Merge pull request #2701 from proddy/dev

web optimizations
2025-12-06 07:49:52 +03:00 · 2025-11-05 14:06:26 +01:00
parent 22eb5436ab 1e4c157c28
commit 3386ac7f8a
126 changed files with 5723 additions and 4540 deletions
--- a/CHANGELOG_LATEST.md
+++ b/CHANGELOG_LATEST.md
@@ -57,3 +57,4 @@ For more details go to [docs.emsesp.org](https://docs.emsesp.org/).
 - updated core libraries like AsyncTCP, AsyncWebServer and Modbus
 - remove command `scan deep`
 - ignore repeated `forceheatingoff` commands [#2641](https://github.com/emsesp/EMS-ESP32/discussions/2641)
+- optimized web for performance
--- a/interface/package.json
+++ b/interface/package.json
@@ -13,11 +13,11 @@
    "build": "vite build",
    "preview": "vite preview",
    "build-hosted": "typesafe-i18n && vite build --mode hosted",
-    "preview-standalone": "typesafe-i18n --no-watch && vite build && concurrently -c \"auto\" \"pnpm:mock-rest\" \"vite preview\"",
    "mock-rest": "bun --watch ../mock-api/restServer.ts",
-    "standalone": "concurrently -c \"auto\" \"typesafe-i18n\" \"pnpm:mock-rest\" \"vite\"",
+    "preview-standalone": "typesafe-i18n --no-watch && vite build && concurrently -c \"auto\" \"pnpm:mock-rest\" \"vite preview\"",
+    "standalone": "concurrently -c \"auto\" \"typesafe-i18n\" \"pnpm:mock-rest\" \"vite dev\"",
    "typesafe-i18n": "typesafe-i18n --no-watch",
-    "webUI": "node progmem-generator.js",
+    "webUI": "vite build && node progmem-generator.js",
    "format": "prettier -l -w '**/*.{ts,tsx,js,css,json,md}'",
    "lint": "eslint . --fix",
    "standalone-devcontainer": "concurrently -c \"auto\" \"typesafe-i18n\" \"pnpm:mock-rest\" \"vite --host\""
@@ -26,11 +26,13 @@
    "@alova/adapter-xhr": "2.2.1",
    "@emotion/react": "^11.14.0",
    "@emotion/styled": "^11.14.1",
-    "@mui/icons-material": "^7.3.4",
-    "@mui/material": "^7.3.4",
+    "@mui/icons-material": "^7.3.5",
+    "@mui/material": "^7.3.5",
+    "@preact/compat": "^18.3.1",
    "@table-library/react-table-library": "4.1.15",
    "alova": "3.3.4",
    "async-validator": "^4.2.5",
+    "etag": "^1.8.1",
    "formidable": "^3.5.4",
    "jwt-decode": "^4.0.0",
    "magic-string": "^0.30.21",
@@ -46,23 +48,24 @@
  },
  "devDependencies": {
    "@babel/core": "^7.28.5",
-    "@eslint/js": "^9.39.0",
+    "@eslint/js": "^9.39.1",
    "@preact/compat": "^18.3.1",
    "@preact/preset-vite": "^2.10.2",
-    "@trivago/prettier-plugin-sort-imports": "^5.2.2",
+    "@trivago/prettier-plugin-sort-imports": "^6.0.0",
    "@types/node": "^24.10.0",
    "@types/react": "^19.2.2",
    "@types/react-dom": "^19.2.2",
+    "axe-core": "^4.11.0",
    "concurrently": "^9.2.1",
-    "eslint": "^9.39.0",
+    "eslint": "^9.39.1",
    "eslint-config-prettier": "^10.1.8",
    "prettier": "^3.6.2",
    "rollup-plugin-visualizer": "^6.0.5",
-    "terser": "^5.44.0",
-    "typescript-eslint": "^8.46.2",
-    "vite": "^7.1.12",
+    "terser": "^5.44.1",
+    "typescript-eslint": "^8.46.3",
+    "vite": "^7.2.0",
    "vite-plugin-imagemin": "^0.6.1",
    "vite-tsconfig-paths": "^5.1.4"
  },
-  "packageManager": "pnpm@10.20.0"
+  "packageManager": "pnpm@10.20.0+sha512.cf9998222162dd85864d0a8102e7892e7ba4ceadebbf5a31f9c2fce48dfce317a9c53b9f6464d1ef9042cba2e02ae02a9f7c143a2b438cd93c91840f0192b9dd"
 }
--- a/interface/pnpm-lock.yaml
+++ b/interface/pnpm-lock.yaml
@@ -18,11 +18,14 @@ importers:
        specifier: ^11.14.1
        version: 11.14.1(@emotion/react@11.14.0(@types/react@19.2.2)(react@19.2.0))(@types/react@19.2.2)(react@19.2.0)
      '@mui/icons-material':
-        specifier: ^7.3.4
-        version: 7.3.4(@mui/material@7.3.4(@emotion/react@11.14.0(@types/react@19.2.2)(react@19.2.0))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.2)(react@19.2.0))(@types/react@19.2.2)(react@19.2.0))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(@types/react@19.2.2)(react@19.2.0)
+        specifier: ^7.3.5
+        version: 7.3.5(@mui/material@7.3.5(@emotion/react@11.14.0(@types/react@19.2.2)(react@19.2.0))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.2)(react@19.2.0))(@types/react@19.2.2)(react@19.2.0))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(@types/react@19.2.2)(react@19.2.0)
      '@mui/material':
-        specifier: ^7.3.4
-        version: 7.3.4(@emotion/react@11.14.0(@types/react@19.2.2)(react@19.2.0))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.2)(react@19.2.0))(@types/react@19.2.2)(react@19.2.0))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+        specifier: ^7.3.5
+        version: 7.3.5(@emotion/react@11.14.0(@types/react@19.2.2)(react@19.2.0))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.2)(react@19.2.0))(@types/react@19.2.2)(react@19.2.0))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@preact/compat':
+        specifier: ^18.3.1
+        version: 18.3.1(preact@10.27.2)
      '@table-library/react-table-library':
        specifier: 4.1.15
        version: 4.1.15(@emotion/react@11.14.0(@types/react@19.2.2)(react@19.2.0))(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
@@ -32,6 +35,9 @@ importers:
      async-validator:
        specifier: ^4.2.5
        version: 4.2.5
+      etag:
+        specifier: ^1.8.1
+        version: 1.8.1
      formidable:
        specifier: ^3.5.4
        version: 3.5.4
@@ -73,17 +79,14 @@ importers:
        specifier: ^7.28.5
        version: 7.28.5
      '@eslint/js':
-        specifier: ^9.39.0
-        version: 9.39.0
-      '@preact/compat':
-        specifier: ^18.3.1
-        version: 18.3.1(preact@10.27.2)
+        specifier: ^9.39.1
+        version: 9.39.1
      '@preact/preset-vite':
        specifier: ^2.10.2
-        version: 2.10.2(@babel/core@7.28.5)(preact@10.27.2)(vite@7.1.12(@types/node@24.10.0)(terser@5.44.0))
+        version: 2.10.2(@babel/core@7.28.5)(preact@10.27.2)(vite@7.2.0(@types/node@24.10.0)(terser@5.44.1))
      '@trivago/prettier-plugin-sort-imports':
-        specifier: ^5.2.2
-        version: 5.2.2(prettier@3.6.2)
+        specifier: ^6.0.0
+        version: 6.0.0(prettier@3.6.2)
      '@types/node':
        specifier: ^24.10.0
        version: 24.10.0
@@ -93,15 +96,18 @@ importers:
      '@types/react-dom':
        specifier: ^19.2.2
        version: 19.2.2(@types/react@19.2.2)
+      axe-core:
+        specifier: ^4.11.0
+        version: 4.11.0
      concurrently:
        specifier: ^9.2.1
        version: 9.2.1
      eslint:
-        specifier: ^9.39.0
-        version: 9.39.0
+        specifier: ^9.39.1
+        version: 9.39.1
      eslint-config-prettier:
        specifier: ^10.1.8
-        version: 10.1.8(eslint@9.39.0)
+        version: 10.1.8(eslint@9.39.1)
      prettier:
        specifier: ^3.6.2
        version: 3.6.2
@@ -109,20 +115,20 @@ importers:
        specifier: ^6.0.5
        version: 6.0.5(rollup@4.52.5)
      terser:
-        specifier: ^5.44.0
-        version: 5.44.0
+        specifier: ^5.44.1
+        version: 5.44.1
      typescript-eslint:
-        specifier: ^8.46.2
-        version: 8.46.2(eslint@9.39.0)(typescript@5.9.3)
+        specifier: ^8.46.3
+        version: 8.46.3(eslint@9.39.1)(typescript@5.9.3)
      vite:
-        specifier: ^7.1.12
-        version: 7.1.12(@types/node@24.10.0)(terser@5.44.0)
+        specifier: ^7.2.0
+        version: 7.2.0(@types/node@24.10.0)(terser@5.44.1)
      vite-plugin-imagemin:
        specifier: ^0.6.1
-        version: 0.6.1(vite@7.1.12(@types/node@24.10.0)(terser@5.44.0))
+        version: 0.6.1(vite@7.2.0(@types/node@24.10.0)(terser@5.44.1))
      vite-tsconfig-paths:
        specifier: ^5.1.4
-        version: 5.1.4(typescript@5.9.3)(vite@7.1.12(@types/node@24.10.0)(terser@5.44.0))
+        version: 5.1.4(typescript@5.9.3)(vite@7.2.0(@types/node@24.10.0)(terser@5.44.1))

 packages:

@@ -473,8 +479,8 @@ packages:
    resolution: {integrity: sha512-gtF186CXhIl1p4pJNGZw8Yc6RlshoePRvE0X91oPGb3vZ8pM3qOS9W9NGPat9LziaBV7XrJWGylNQXkGcnM3IQ==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}

-  '@eslint/js@9.39.0':
-    resolution: {integrity: sha512-BIhe0sW91JGPiaF1mOuPy5v8NflqfjIcDNpC+LbW9f609WVRX1rArrhi6Z2ymvrAry9jw+5POTj4t2t62o8Bmw==}
+  '@eslint/js@9.39.1':
+    resolution: {integrity: sha512-S26Stp4zCy88tH94QbBv3XCuzRQiZ9yXofEILmglYTh/Ug/a9/umqvgFtYBAo3Lp0nsI/5/qH1CCrbdK3AP1Tw==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}

  '@eslint/object-schema@2.1.7':
@@ -528,27 +534,27 @@ packages:
  '@jridgewell/trace-mapping@0.3.31':
    resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}

-  '@mui/core-downloads-tracker@7.3.4':
-    resolution: {integrity: sha512-BIktMapG3r4iXwIhYNpvk97ZfYWTreBBQTWjQKbNbzI64+ULHfYavQEX2w99aSWHS58DvXESWIgbD9adKcUOBw==}
+  '@mui/core-downloads-tracker@7.3.5':
+    resolution: {integrity: sha512-kOLwlcDPnVz2QMhiBv0OQ8le8hTCqKM9cRXlfVPL91l3RGeOsxrIhNRsUt3Xb8wb+pTVUolW+JXKym93vRKxCw==}

-  '@mui/icons-material@7.3.4':
-    resolution: {integrity: sha512-9n6Xcq7molXWYb680N2Qx+FRW8oT6j/LXF5PZFH3ph9X/Rct0B/BlLAsFI7iL9ySI6LVLuQIVtrLiPT82R7OZw==}
+  '@mui/icons-material@7.3.5':
+    resolution: {integrity: sha512-LciL1GLMZ+VlzyHAALSVAR22t8IST4LCXmljcUSx2NOutgO2XnxdIp8ilFbeNf9wpo0iUFbAuoQcB7h+HHIf3A==}
    engines: {node: '>=14.0.0'}
    peerDependencies:
-      '@mui/material': ^7.3.4
+      '@mui/material': ^7.3.5
      '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
      react: ^17.0.0 || ^18.0.0 || ^19.0.0
    peerDependenciesMeta:
      '@types/react':
        optional: true

-  '@mui/material@7.3.4':
-    resolution: {integrity: sha512-gEQL9pbJZZHT7lYJBKQCS723v1MGys2IFc94COXbUIyCTWa+qC77a7hUax4Yjd5ggEm35dk4AyYABpKKWC4MLw==}
+  '@mui/material@7.3.5':
+    resolution: {integrity: sha512-8VVxFmp1GIm9PpmnQoCoYo0UWHoOrdA57tDL62vkpzEgvb/d71Wsbv4FRg7r1Gyx7PuSo0tflH34cdl/NvfHNQ==}
    engines: {node: '>=14.0.0'}
    peerDependencies:
      '@emotion/react': ^11.5.0
      '@emotion/styled': ^11.3.0
-      '@mui/material-pigment-css': ^7.3.3
+      '@mui/material-pigment-css': ^7.3.5
      '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
      react: ^17.0.0 || ^18.0.0 || ^19.0.0
      react-dom: ^17.0.0 || ^18.0.0 || ^19.0.0
@@ -562,8 +568,8 @@ packages:
      '@types/react':
        optional: true

-  '@mui/private-theming@7.3.3':
-    resolution: {integrity: sha512-OJM+9nj5JIyPUvsZ5ZjaeC9PfktmK+W5YaVLToLR8L0lB/DGmv1gcKE43ssNLSvpoW71Hct0necfade6+kW3zQ==}
+  '@mui/private-theming@7.3.5':
+    resolution: {integrity: sha512-cTx584W2qrLonwhZLbEN7P5pAUu0nZblg8cLBlTrZQ4sIiw8Fbvg7GvuphQaSHxPxrCpa7FDwJKtXdbl2TSmrA==}
    engines: {node: '>=14.0.0'}
    peerDependencies:
      '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
@@ -572,8 +578,8 @@ packages:
      '@types/react':
        optional: true

-  '@mui/styled-engine@7.3.3':
-    resolution: {integrity: sha512-CmFxvRJIBCEaWdilhXMw/5wFJ1+FT9f3xt+m2pPXhHPeVIbBg9MnMvNSJjdALvnQJMPw8jLhrUtXmN7QAZV2fw==}
+  '@mui/styled-engine@7.3.5':
+    resolution: {integrity: sha512-zbsZ0uYYPndFCCPp2+V3RLcAN6+fv4C8pdwRx6OS3BwDkRCN8WBehqks7hWyF3vj1kdQLIWrpdv/5Y0jHRxYXQ==}
    engines: {node: '>=14.0.0'}
    peerDependencies:
      '@emotion/react': ^11.4.1
@@ -585,8 +591,8 @@ packages:
      '@emotion/styled':
        optional: true

-  '@mui/system@7.3.3':
-    resolution: {integrity: sha512-Lqq3emZr5IzRLKaHPuMaLBDVaGvxoh6z7HMWd1RPKawBM5uMRaQ4ImsmmgXWtwJdfZux5eugfDhXJUo2mliS8Q==}
+  '@mui/system@7.3.5':
+    resolution: {integrity: sha512-yPaf5+gY3v80HNkJcPi6WT+r9ebeM4eJzrREXPxMt7pNTV/1eahyODO4fbH3Qvd8irNxDFYn5RQ3idHW55rA6g==}
    engines: {node: '>=14.0.0'}
    peerDependencies:
      '@emotion/react': ^11.5.0
@@ -601,16 +607,16 @@ packages:
      '@types/react':
        optional: true

-  '@mui/types@7.4.7':
-    resolution: {integrity: sha512-8vVje9rdEr1rY8oIkYgP+Su5Kwl6ik7O3jQ0wl78JGSmiZhRHV+vkjooGdKD8pbtZbutXFVTWQYshu2b3sG9zw==}
+  '@mui/types@7.4.8':
+    resolution: {integrity: sha512-ZNXLBjkPV6ftLCmmRCafak3XmSn8YV0tKE/ZOhzKys7TZXUiE0mZxlH8zKDo6j6TTUaDnuij68gIG+0Ucm7Xhw==}
    peerDependencies:
      '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
    peerDependenciesMeta:
      '@types/react':
        optional: true

-  '@mui/utils@7.3.3':
-    resolution: {integrity: sha512-kwNAUh7bLZ7mRz9JZ+6qfRnnxbE4Zuc+RzXnhSpRSxjTlSTj7b4JxRLXpG+MVtPVtqks5k/XC8No1Vs3x4Z2gg==}
+  '@mui/utils@7.3.5':
+    resolution: {integrity: sha512-jisvFsEC3sgjUjcPnR4mYfhzjCDIudttSGSbe1o/IXFNu0kZuR+7vqQI0jg8qtcVZBHWrwTfvAZj9MNMumcq1g==}
    engines: {node: '>=14.0.0'}
    peerDependencies:
      '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
@@ -794,17 +800,20 @@ packages:
      react: '>=16.8.0'
      react-dom: '>=16.8.0'

-  '@trivago/prettier-plugin-sort-imports@5.2.2':
-    resolution: {integrity: sha512-fYDQA9e6yTNmA13TLVSA+WMQRc5Bn/c0EUBditUHNfMMxN7M82c38b1kEggVE3pLpZ0FwkwJkUEKMiOi52JXFA==}
-    engines: {node: '>18.12'}
+  '@trivago/prettier-plugin-sort-imports@6.0.0':
+    resolution: {integrity: sha512-Xarx55ow0R8oC7ViL5fPmDsg1EBa1dVhyZFVbFXNtPPJyW2w9bJADIla8YFSaNG9N06XfcklA9O9vmw4noNxkQ==}
+    engines: {node: '>= 20'}
    peerDependencies:
      '@vue/compiler-sfc': 3.x
      prettier: 2.x - 3.x
+      prettier-plugin-ember-template-tag: '>= 2.0.0'
      prettier-plugin-svelte: 3.x
      svelte: 4.x || 5.x
    peerDependenciesMeta:
      '@vue/compiler-sfc':
        optional: true
+      prettier-plugin-ember-template-tag:
+        optional: true
      prettier-plugin-svelte:
        optional: true
      svelte:
@@ -879,63 +888,63 @@ packages:
  '@types/svgo@2.6.4':
    resolution: {integrity: sha512-l4cmyPEckf8moNYHdJ+4wkHvFxjyW6ulm9l4YGaOxeyBWPhBOT0gvni1InpFPdzx1dKf/2s62qGITwxNWnPQng==}

-  '@typescript-eslint/eslint-plugin@8.46.2':
-    resolution: {integrity: sha512-ZGBMToy857/NIPaaCucIUQgqueOiq7HeAKkhlvqVV4lm089zUFW6ikRySx2v+cAhKeUCPuWVHeimyk6Dw1iY3w==}
+  '@typescript-eslint/eslint-plugin@8.46.3':
+    resolution: {integrity: sha512-sbaQ27XBUopBkRiuY/P9sWGOWUW4rl8fDoHIUmLpZd8uldsTyB4/Zg6bWTegPoTLnKj9Hqgn3QD6cjPNB32Odw==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
    peerDependencies:
-      '@typescript-eslint/parser': ^8.46.2
+      '@typescript-eslint/parser': ^8.46.3
      eslint: ^8.57.0 || ^9.0.0
      typescript: '>=4.8.4 <6.0.0'

-  '@typescript-eslint/parser@8.46.2':
-    resolution: {integrity: sha512-BnOroVl1SgrPLywqxyqdJ4l3S2MsKVLDVxZvjI1Eoe8ev2r3kGDo+PcMihNmDE+6/KjkTubSJnmqGZZjQSBq/g==}
+  '@typescript-eslint/parser@8.46.3':
+    resolution: {integrity: sha512-6m1I5RmHBGTnUGS113G04DMu3CpSdxCAU/UvtjNWL4Nuf3MW9tQhiJqRlHzChIkhy6kZSAQmc+I1bcGjE3yNKg==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
    peerDependencies:
      eslint: ^8.57.0 || ^9.0.0
      typescript: '>=4.8.4 <6.0.0'

-  '@typescript-eslint/project-service@8.46.2':
-    resolution: {integrity: sha512-PULOLZ9iqwI7hXcmL4fVfIsBi6AN9YxRc0frbvmg8f+4hQAjQ5GYNKK0DIArNo+rOKmR/iBYwkpBmnIwin4wBg==}
+  '@typescript-eslint/project-service@8.46.3':
+    resolution: {integrity: sha512-Fz8yFXsp2wDFeUElO88S9n4w1I4CWDTXDqDr9gYvZgUpwXQqmZBr9+NTTql5R3J7+hrJZPdpiWaB9VNhAKYLuQ==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
    peerDependencies:
      typescript: '>=4.8.4 <6.0.0'

-  '@typescript-eslint/scope-manager@8.46.2':
-    resolution: {integrity: sha512-LF4b/NmGvdWEHD2H4MsHD8ny6JpiVNDzrSZr3CsckEgCbAGZbYM4Cqxvi9L+WqDMT+51Ozy7lt2M+d0JLEuBqA==}
+  '@typescript-eslint/scope-manager@8.46.3':
+    resolution: {integrity: sha512-FCi7Y1zgrmxp3DfWfr+3m9ansUUFoy8dkEdeQSgA9gbm8DaHYvZCdkFRQrtKiedFf3Ha6VmoqoAaP68+i+22kg==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}

-  '@typescript-eslint/tsconfig-utils@8.46.2':
-    resolution: {integrity: sha512-a7QH6fw4S57+F5y2FIxxSDyi5M4UfGF+Jl1bCGd7+L4KsaUY80GsiF/t0UoRFDHAguKlBaACWJRmdrc6Xfkkag==}
+  '@typescript-eslint/tsconfig-utils@8.46.3':
+    resolution: {integrity: sha512-GLupljMniHNIROP0zE7nCcybptolcH8QZfXOpCfhQDAdwJ/ZTlcaBOYebSOZotpti/3HrHSw7D3PZm75gYFsOA==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
    peerDependencies:
      typescript: '>=4.8.4 <6.0.0'

-  '@typescript-eslint/type-utils@8.46.2':
-    resolution: {integrity: sha512-HbPM4LbaAAt/DjxXaG9yiS9brOOz6fabal4uvUmaUYe6l3K1phQDMQKBRUrr06BQkxkvIZVVHttqiybM9nJsLA==}
+  '@typescript-eslint/type-utils@8.46.3':
+    resolution: {integrity: sha512-ZPCADbr+qfz3aiTTYNNkCbUt+cjNwI/5McyANNrFBpVxPt7GqpEYz5ZfdwuFyGUnJ9FdDXbGODUu6iRCI6XRXw==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
    peerDependencies:
      eslint: ^8.57.0 || ^9.0.0
      typescript: '>=4.8.4 <6.0.0'

-  '@typescript-eslint/types@8.46.2':
-    resolution: {integrity: sha512-lNCWCbq7rpg7qDsQrd3D6NyWYu+gkTENkG5IKYhUIcxSb59SQC/hEQ+MrG4sTgBVghTonNWq42bA/d4yYumldQ==}
+  '@typescript-eslint/types@8.46.3':
+    resolution: {integrity: sha512-G7Ok9WN/ggW7e/tOf8TQYMaxgID3Iujn231hfi0Pc7ZheztIJVpO44ekY00b7akqc6nZcvregk0Jpah3kep6hA==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}

-  '@typescript-eslint/typescript-estree@8.46.2':
-    resolution: {integrity: sha512-f7rW7LJ2b7Uh2EiQ+7sza6RDZnajbNbemn54Ob6fRwQbgcIn+GWfyuHDHRYgRoZu1P4AayVScrRW+YfbTvPQoQ==}
+  '@typescript-eslint/typescript-estree@8.46.3':
+    resolution: {integrity: sha512-f/NvtRjOm80BtNM5OQtlaBdM5BRFUv7gf381j9wygDNL+qOYSNOgtQ/DCndiYi80iIOv76QqaTmp4fa9hwI0OA==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
    peerDependencies:
      typescript: '>=4.8.4 <6.0.0'

-  '@typescript-eslint/utils@8.46.2':
-    resolution: {integrity: sha512-sExxzucx0Tud5tE0XqR0lT0psBQvEpnpiul9XbGUB1QwpWJJAps1O/Z7hJxLGiZLBKMCutjTzDgmd1muEhBnVg==}
+  '@typescript-eslint/utils@8.46.3':
+    resolution: {integrity: sha512-VXw7qmdkucEx9WkmR3ld/u6VhRyKeiF1uxWwCy/iuNfokjJ7VhsgLSOTjsol8BunSw190zABzpwdNsze2Kpo4g==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
    peerDependencies:
      eslint: ^8.57.0 || ^9.0.0
      typescript: '>=4.8.4 <6.0.0'

-  '@typescript-eslint/visitor-keys@8.46.2':
-    resolution: {integrity: sha512-tUFMXI4gxzzMXt4xpGJEsBsTox0XbNQ1y94EwlD/CuZwFcQP79xfQqMhau9HsRc/J0cAPA/HZt1dZPtGn9V/7w==}
+  '@typescript-eslint/visitor-keys@8.46.3':
+    resolution: {integrity: sha512-uk574k8IU0rOF/AjniX8qbLSGURJVUCeM5e4MIMKBFFi8weeiLrG1fyQejyLXQpRZbU/1BuQasleV/RfHC3hHg==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}

  acorn-jsx@5.3.2:
@@ -999,6 +1008,10 @@ packages:
    resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==}
    engines: {node: '>= 0.4'}

+  axe-core@4.11.0:
+    resolution: {integrity: sha512-ilYanEU8vxxBexpJd8cWM4ElSQq4QctCLKih0TSfjIfCQTeyH/6zVrmIJfLPrKTKJRbiG+cfnZbQIjAlJmF1jQ==}
+    engines: {node: '>=4'}
+
  babel-plugin-macros@3.1.0:
    resolution: {integrity: sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==}
    engines: {node: '>=10', npm: '>=6'}
@@ -1014,8 +1027,8 @@ packages:
  base64-js@1.5.1:
    resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}

-  baseline-browser-mapping@2.8.23:
-    resolution: {integrity: sha512-616V5YX4bepJFzNyOfce5Fa8fDJMfoxzOIzDCZwaGL8MKVpFrXqfNUoIpRn9YMI5pXf/VKgzjB4htFMsFKKdiQ==}
+  baseline-browser-mapping@2.8.24:
+    resolution: {integrity: sha512-uUhTRDPXamakPyghwrUcjaGvvBqGrWvBHReoiULMIpOJVM9IYzQh83Xk2Onx5HlGI2o10NNCzcs9TG/S3TkwrQ==}
    hasBin: true

  bin-build@3.0.0:
@@ -1324,8 +1337,8 @@ packages:
  duplexer3@0.1.5:
    resolution: {integrity: sha512-1A8za6ws41LQgv9HrE/66jyC5yuSjQ3L/KOpFtoBilsAK2iA2wuS5rTt1OCzIvtS2V7nVmedsUU+DGRcjBmOYA==}

-  electron-to-chromium@1.5.244:
-    resolution: {integrity: sha512-OszpBN7xZX4vWMPJwB9illkN/znA8M36GQqQxi6MNy9axWxhOfJyZZJtSLQCpEFLHP2xK33BiWx9aIuIEXVCcw==}
+  electron-to-chromium@1.5.245:
+    resolution: {integrity: sha512-rdmGfW47ZhL/oWEJAY4qxRtdly2B98ooTJ0pdEI4jhVLZ6tNf8fPtov2wS1IRKwFJT92le3x4Knxiwzl7cPPpQ==}

  emoji-regex@8.0.0:
    resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
@@ -1515,8 +1528,8 @@ packages:
    resolution: {integrity: sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}

-  eslint@9.39.0:
-    resolution: {integrity: sha512-iy2GE3MHrYTL5lrCtMZ0X1KLEKKUjmK0kzwcnefhR66txcEmXZD2YWgR5GNdcEwkNx3a0siYkSvl0vIC+Svjmg==}
+  eslint@9.39.1:
+    resolution: {integrity: sha512-BhHmn2yNOFA9H9JmmIVKJmd288g9hrVRDkdoIgRCRuSySRUHH7r/DI6aAXW9T1WwUuY3DFgrcaqB+deURBLR5g==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
    hasBin: true
    peerDependencies:
@@ -1548,6 +1561,10 @@ packages:
    resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
    engines: {node: '>=0.10.0'}

+  etag@1.8.1:
+    resolution: {integrity: sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==}
+    engines: {node: '>= 0.6'}
+
  exec-buffer@3.2.0:
    resolution: {integrity: sha512-wsiD+2Tp6BWHoVv3B+5Dcx6E7u5zky+hUwOHjuH2hKSLR3dvRmX8fk8UD8uqQixHs4Wk6eDmiegVrMPjKj7wpA==}
    engines: {node: '>=4'}
@@ -2105,12 +2122,12 @@ packages:
    resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
    engines: {node: '>=10'}

+  lodash-es@4.17.21:
+    resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==}
+
  lodash.merge@4.6.2:
    resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}

-  lodash@4.17.21:
-    resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
-
  logalot@2.1.0:
    resolution: {integrity: sha512-Ah4CgdSRfeCJagxQhcVNMi9BfGYyEKLa6d7OA6xSbld/Hg3Cf2QiOa1mDpmG7Ve8LOH6DN3mdttzjQAvWTyVkw==}
    engines: {node: '>=0.10.0'}
@@ -2351,6 +2368,9 @@ packages:
    resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
    engines: {node: '>=6'}

+  parse-imports-exports@0.2.4:
+    resolution: {integrity: sha512-4s6vd6dx1AotCx/RCI2m7t7GCh5bDRUtGNvRfHSP2wbBQdMi67pPe7mtzmgwcaQ8VKK/6IB7Glfyu3qdZJPybQ==}
+
  parse-json@2.2.0:
    resolution: {integrity: sha512-QR/GGaKCkhwk1ePQNYDRKYZ3mwU9ypsKhB0XyFnLQdomyEqk3e8wpW3V5Jp88zbxK4n5ST1nqo+g9juTpownhQ==}
    engines: {node: '>=0.10.0'}
@@ -2359,6 +2379,9 @@ packages:
    resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
    engines: {node: '>=8'}

+  parse-statements@1.0.11:
+    resolution: {integrity: sha512-HlsyYdMBnbPQ9Jr/VgJ1YF4scnldvJpJxCVx6KgqPL4dxppsWrJHCIIxQXMJrqGnsRkNPATbeMJ8Yxu7JMsYcA==}
+
  path-exists@2.1.0:
    resolution: {integrity: sha512-yTltuKuhtNeFJKa1PiRzfLAU5182q1y4Eb4XCJ3PBqyzEDkAZRzBrKKBct682ls9reBVHf9udYLN5Nd+K1B9BQ==}
    engines: {node: '>=0.10.0'}
@@ -2828,8 +2851,8 @@ packages:
    resolution: {integrity: sha512-ZOn6nJUgvgC09+doCEF3oB+r3ag7kUvlsXEGX069QRD60p+P3uP7XG9N2/at+EyIRGSN//ZY3LyEotA1YpmjuA==}
    engines: {node: '>=4'}

-  terser@5.44.0:
-    resolution: {integrity: sha512-nIVck8DK+GM/0Frwd+nIhZ84pR/BX7rmXMfYwyg+Sri5oGVE99/E3KvXqpC2xHFxyqXyGHTKBSioxxplrO4I4w==}
+  terser@5.44.1:
+    resolution: {integrity: sha512-t/R3R/n0MSwnnazuPpPNVO60LX0SKL45pyl9YlvxIdkH0Of7D5qM2EVe+yASRIlY5pZ73nclYJfNANGWPwFDZw==}
    engines: {node: '>=10'}
    hasBin: true

@@ -2904,8 +2927,8 @@ packages:
    peerDependencies:
      typescript: '>=3.5.1'

-  typescript-eslint@8.46.2:
-    resolution: {integrity: sha512-vbw8bOmiuYNdzzV3lsiWv6sRwjyuKJMQqWulBOU7M0RrxedXledX8G8kBbQeiOYDnTfiXz0Y4081E1QMNB6iQg==}
+  typescript-eslint@8.46.3:
+    resolution: {integrity: sha512-bAfgMavTuGo+8n6/QQDVQz4tZ4f7Soqg53RbrlZQEoAltYop/XR4RAts/I0BrO3TTClTSTFJ0wYbla+P8cEWJA==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
    peerDependencies:
      eslint: ^8.57.0 || ^9.0.0
@@ -2976,8 +2999,8 @@ packages:
      vite:
        optional: true

-  vite@7.1.12:
-    resolution: {integrity: sha512-ZWyE8YXEXqJrrSLvYgrRP7p62OziLW7xI5HYGWFzOvupfAlrLvURSzv/FyGyy0eidogEM3ujU+kUG1zuHgb6Ug==}
+  vite@7.2.0:
+    resolution: {integrity: sha512-C/Naxf8H0pBx1PA4BdpT+c/5wdqI9ILMdwjSMILw7tVIh3JsxzZqdeTLmmdaoh5MYUEOyBnM9K3o0DzoZ/fe+w==}
    engines: {node: ^20.19.0 || >=22.12.0}
    hasBin: true
    peerDependencies:
@@ -3377,9 +3400,9 @@ snapshots:
  '@esbuild/win32-x64@0.25.12':
    optional: true

-  '@eslint-community/eslint-utils@4.9.0(eslint@9.39.0)':
+  '@eslint-community/eslint-utils@4.9.0(eslint@9.39.1)':
    dependencies:
-      eslint: 9.39.0
+      eslint: 9.39.1
      eslint-visitor-keys: 3.4.3

  '@eslint-community/regexpp@4.12.2': {}
@@ -3414,7 +3437,7 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

-  '@eslint/js@9.39.0': {}
+  '@eslint/js@9.39.1': {}

  '@eslint/object-schema@2.1.7': {}

@@ -3464,23 +3487,23 @@ snapshots:
      '@jridgewell/resolve-uri': 3.1.2
      '@jridgewell/sourcemap-codec': 1.5.5

-  '@mui/core-downloads-tracker@7.3.4': {}
+  '@mui/core-downloads-tracker@7.3.5': {}

-  '@mui/icons-material@7.3.4(@mui/material@7.3.4(@emotion/react@11.14.0(@types/react@19.2.2)(react@19.2.0))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.2)(react@19.2.0))(@types/react@19.2.2)(react@19.2.0))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(@types/react@19.2.2)(react@19.2.0)':
+  '@mui/icons-material@7.3.5(@mui/material@7.3.5(@emotion/react@11.14.0(@types/react@19.2.2)(react@19.2.0))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.2)(react@19.2.0))(@types/react@19.2.2)(react@19.2.0))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(@types/react@19.2.2)(react@19.2.0)':
    dependencies:
      '@babel/runtime': 7.28.4
-      '@mui/material': 7.3.4(@emotion/react@11.14.0(@types/react@19.2.2)(react@19.2.0))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.2)(react@19.2.0))(@types/react@19.2.2)(react@19.2.0))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      '@mui/material': 7.3.5(@emotion/react@11.14.0(@types/react@19.2.2)(react@19.2.0))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.2)(react@19.2.0))(@types/react@19.2.2)(react@19.2.0))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
      react: 19.2.0
    optionalDependencies:
      '@types/react': 19.2.2

-  '@mui/material@7.3.4(@emotion/react@11.14.0(@types/react@19.2.2)(react@19.2.0))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.2)(react@19.2.0))(@types/react@19.2.2)(react@19.2.0))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
+  '@mui/material@7.3.5(@emotion/react@11.14.0(@types/react@19.2.2)(react@19.2.0))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.2)(react@19.2.0))(@types/react@19.2.2)(react@19.2.0))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
    dependencies:
      '@babel/runtime': 7.28.4
-      '@mui/core-downloads-tracker': 7.3.4
-      '@mui/system': 7.3.3(@emotion/react@11.14.0(@types/react@19.2.2)(react@19.2.0))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.2)(react@19.2.0))(@types/react@19.2.2)(react@19.2.0))(@types/react@19.2.2)(react@19.2.0)
-      '@mui/types': 7.4.7(@types/react@19.2.2)
-      '@mui/utils': 7.3.3(@types/react@19.2.2)(react@19.2.0)
+      '@mui/core-downloads-tracker': 7.3.5
+      '@mui/system': 7.3.5(@emotion/react@11.14.0(@types/react@19.2.2)(react@19.2.0))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.2)(react@19.2.0))(@types/react@19.2.2)(react@19.2.0))(@types/react@19.2.2)(react@19.2.0)
+      '@mui/types': 7.4.8(@types/react@19.2.2)
+      '@mui/utils': 7.3.5(@types/react@19.2.2)(react@19.2.0)
      '@popperjs/core': 2.11.8
      '@types/react-transition-group': 4.4.12(@types/react@19.2.2)
      clsx: 2.1.1
@@ -3495,16 +3518,16 @@ snapshots:
      '@emotion/styled': 11.14.1(@emotion/react@11.14.0(@types/react@19.2.2)(react@19.2.0))(@types/react@19.2.2)(react@19.2.0)
      '@types/react': 19.2.2

-  '@mui/private-theming@7.3.3(@types/react@19.2.2)(react@19.2.0)':
+  '@mui/private-theming@7.3.5(@types/react@19.2.2)(react@19.2.0)':
    dependencies:
      '@babel/runtime': 7.28.4
-      '@mui/utils': 7.3.3(@types/react@19.2.2)(react@19.2.0)
+      '@mui/utils': 7.3.5(@types/react@19.2.2)(react@19.2.0)
      prop-types: 15.8.1
      react: 19.2.0
    optionalDependencies:
      '@types/react': 19.2.2

-  '@mui/styled-engine@7.3.3(@emotion/react@11.14.0(@types/react@19.2.2)(react@19.2.0))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.2)(react@19.2.0))(@types/react@19.2.2)(react@19.2.0))(react@19.2.0)':
+  '@mui/styled-engine@7.3.5(@emotion/react@11.14.0(@types/react@19.2.2)(react@19.2.0))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.2)(react@19.2.0))(@types/react@19.2.2)(react@19.2.0))(react@19.2.0)':
    dependencies:
      '@babel/runtime': 7.28.4
      '@emotion/cache': 11.14.0
@@ -3517,13 +3540,13 @@ snapshots:
      '@emotion/react': 11.14.0(@types/react@19.2.2)(react@19.2.0)
      '@emotion/styled': 11.14.1(@emotion/react@11.14.0(@types/react@19.2.2)(react@19.2.0))(@types/react@19.2.2)(react@19.2.0)

-  '@mui/system@7.3.3(@emotion/react@11.14.0(@types/react@19.2.2)(react@19.2.0))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.2)(react@19.2.0))(@types/react@19.2.2)(react@19.2.0))(@types/react@19.2.2)(react@19.2.0)':
+  '@mui/system@7.3.5(@emotion/react@11.14.0(@types/react@19.2.2)(react@19.2.0))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.2)(react@19.2.0))(@types/react@19.2.2)(react@19.2.0))(@types/react@19.2.2)(react@19.2.0)':
    dependencies:
      '@babel/runtime': 7.28.4
-      '@mui/private-theming': 7.3.3(@types/react@19.2.2)(react@19.2.0)
-      '@mui/styled-engine': 7.3.3(@emotion/react@11.14.0(@types/react@19.2.2)(react@19.2.0))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.2)(react@19.2.0))(@types/react@19.2.2)(react@19.2.0))(react@19.2.0)
-      '@mui/types': 7.4.7(@types/react@19.2.2)
-      '@mui/utils': 7.3.3(@types/react@19.2.2)(react@19.2.0)
+      '@mui/private-theming': 7.3.5(@types/react@19.2.2)(react@19.2.0)
+      '@mui/styled-engine': 7.3.5(@emotion/react@11.14.0(@types/react@19.2.2)(react@19.2.0))(@emotion/styled@11.14.1(@emotion/react@11.14.0(@types/react@19.2.2)(react@19.2.0))(@types/react@19.2.2)(react@19.2.0))(react@19.2.0)
+      '@mui/types': 7.4.8(@types/react@19.2.2)
+      '@mui/utils': 7.3.5(@types/react@19.2.2)(react@19.2.0)
      clsx: 2.1.1
      csstype: 3.1.3
      prop-types: 15.8.1
@@ -3533,16 +3556,16 @@ snapshots:
      '@emotion/styled': 11.14.1(@emotion/react@11.14.0(@types/react@19.2.2)(react@19.2.0))(@types/react@19.2.2)(react@19.2.0)
      '@types/react': 19.2.2

-  '@mui/types@7.4.7(@types/react@19.2.2)':
+  '@mui/types@7.4.8(@types/react@19.2.2)':
    dependencies:
      '@babel/runtime': 7.28.4
    optionalDependencies:
      '@types/react': 19.2.2

-  '@mui/utils@7.3.3(@types/react@19.2.2)(react@19.2.0)':
+  '@mui/utils@7.3.5(@types/react@19.2.2)(react@19.2.0)':
    dependencies:
      '@babel/runtime': 7.28.4
-      '@mui/types': 7.4.7(@types/react@19.2.2)
+      '@mui/types': 7.4.8(@types/react@19.2.2)
      '@types/prop-types': 15.7.15
      clsx: 2.1.1
      prop-types: 15.8.1
@@ -3575,18 +3598,18 @@ snapshots:
    dependencies:
      preact: 10.27.2

-  '@preact/preset-vite@2.10.2(@babel/core@7.28.5)(preact@10.27.2)(vite@7.1.12(@types/node@24.10.0)(terser@5.44.0))':
+  '@preact/preset-vite@2.10.2(@babel/core@7.28.5)(preact@10.27.2)(vite@7.2.0(@types/node@24.10.0)(terser@5.44.1))':
    dependencies:
      '@babel/core': 7.28.5
      '@babel/plugin-transform-react-jsx': 7.27.1(@babel/core@7.28.5)
      '@babel/plugin-transform-react-jsx-development': 7.27.1(@babel/core@7.28.5)
-      '@prefresh/vite': 2.4.11(preact@10.27.2)(vite@7.1.12(@types/node@24.10.0)(terser@5.44.0))
+      '@prefresh/vite': 2.4.11(preact@10.27.2)(vite@7.2.0(@types/node@24.10.0)(terser@5.44.1))
      '@rollup/pluginutils': 4.2.1
      babel-plugin-transform-hook-names: 1.0.2(@babel/core@7.28.5)
      debug: 4.4.3
      picocolors: 1.1.1
-      vite: 7.1.12(@types/node@24.10.0)(terser@5.44.0)
-      vite-prerender-plugin: 0.5.12(vite@7.1.12(@types/node@24.10.0)(terser@5.44.0))
+      vite: 7.2.0(@types/node@24.10.0)(terser@5.44.1)
+      vite-prerender-plugin: 0.5.12(vite@7.2.0(@types/node@24.10.0)(terser@5.44.1))
    transitivePeerDependencies:
      - preact
      - supports-color
@@ -3599,7 +3622,7 @@ snapshots:

  '@prefresh/utils@1.2.1': {}

-  '@prefresh/vite@2.4.11(preact@10.27.2)(vite@7.1.12(@types/node@24.10.0)(terser@5.44.0))':
+  '@prefresh/vite@2.4.11(preact@10.27.2)(vite@7.2.0(@types/node@24.10.0)(terser@5.44.1))':
    dependencies:
      '@babel/core': 7.28.5
      '@prefresh/babel-plugin': 0.5.2
@@ -3607,7 +3630,7 @@ snapshots:
      '@prefresh/utils': 1.2.1
      '@rollup/pluginutils': 4.2.1
      preact: 10.27.2
-      vite: 7.1.12(@types/node@24.10.0)(terser@5.44.0)
+      vite: 7.2.0(@types/node@24.10.0)(terser@5.44.1)
    transitivePeerDependencies:
      - supports-color

@@ -3693,14 +3716,16 @@ snapshots:
      react-virtualized-auto-sizer: 1.0.26(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
      react-window: 1.8.11(react-dom@19.2.0(react@19.2.0))(react@19.2.0)

-  '@trivago/prettier-plugin-sort-imports@5.2.2(prettier@3.6.2)':
+  '@trivago/prettier-plugin-sort-imports@6.0.0(prettier@3.6.2)':
    dependencies:
      '@babel/generator': 7.28.5
      '@babel/parser': 7.28.5
      '@babel/traverse': 7.28.5
      '@babel/types': 7.28.5
      javascript-natural-sort: 0.7.1
-      lodash: 4.17.21
+      lodash-es: 4.17.21
+      minimatch: 9.0.5
+      parse-imports-exports: 0.2.4
      prettier: 3.6.2
    transitivePeerDependencies:
      - supports-color
@@ -3781,15 +3806,15 @@ snapshots:
    dependencies:
      '@types/node': 24.10.0

-  '@typescript-eslint/eslint-plugin@8.46.2(@typescript-eslint/parser@8.46.2(eslint@9.39.0)(typescript@5.9.3))(eslint@9.39.0)(typescript@5.9.3)':
+  '@typescript-eslint/eslint-plugin@8.46.3(@typescript-eslint/parser@8.46.3(eslint@9.39.1)(typescript@5.9.3))(eslint@9.39.1)(typescript@5.9.3)':
    dependencies:
      '@eslint-community/regexpp': 4.12.2
-      '@typescript-eslint/parser': 8.46.2(eslint@9.39.0)(typescript@5.9.3)
-      '@typescript-eslint/scope-manager': 8.46.2
-      '@typescript-eslint/type-utils': 8.46.2(eslint@9.39.0)(typescript@5.9.3)
-      '@typescript-eslint/utils': 8.46.2(eslint@9.39.0)(typescript@5.9.3)
-      '@typescript-eslint/visitor-keys': 8.46.2
-      eslint: 9.39.0
+      '@typescript-eslint/parser': 8.46.3(eslint@9.39.1)(typescript@5.9.3)
+      '@typescript-eslint/scope-manager': 8.46.3
+      '@typescript-eslint/type-utils': 8.46.3(eslint@9.39.1)(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.46.3(eslint@9.39.1)(typescript@5.9.3)
+      '@typescript-eslint/visitor-keys': 8.46.3
+      eslint: 9.39.1
      graphemer: 1.4.0
      ignore: 7.0.5
      natural-compare: 1.4.0
@@ -3798,56 +3823,56 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

-  '@typescript-eslint/parser@8.46.2(eslint@9.39.0)(typescript@5.9.3)':
+  '@typescript-eslint/parser@8.46.3(eslint@9.39.1)(typescript@5.9.3)':
    dependencies:
-      '@typescript-eslint/scope-manager': 8.46.2
-      '@typescript-eslint/types': 8.46.2
-      '@typescript-eslint/typescript-estree': 8.46.2(typescript@5.9.3)
-      '@typescript-eslint/visitor-keys': 8.46.2
+      '@typescript-eslint/scope-manager': 8.46.3
+      '@typescript-eslint/types': 8.46.3
+      '@typescript-eslint/typescript-estree': 8.46.3(typescript@5.9.3)
+      '@typescript-eslint/visitor-keys': 8.46.3
      debug: 4.4.3
-      eslint: 9.39.0
+      eslint: 9.39.1
      typescript: 5.9.3
    transitivePeerDependencies:
      - supports-color

-  '@typescript-eslint/project-service@8.46.2(typescript@5.9.3)':
+  '@typescript-eslint/project-service@8.46.3(typescript@5.9.3)':
    dependencies:
-      '@typescript-eslint/tsconfig-utils': 8.46.2(typescript@5.9.3)
-      '@typescript-eslint/types': 8.46.2
+      '@typescript-eslint/tsconfig-utils': 8.46.3(typescript@5.9.3)
+      '@typescript-eslint/types': 8.46.3
      debug: 4.4.3
      typescript: 5.9.3
    transitivePeerDependencies:
      - supports-color

-  '@typescript-eslint/scope-manager@8.46.2':
+  '@typescript-eslint/scope-manager@8.46.3':
    dependencies:
-      '@typescript-eslint/types': 8.46.2
-      '@typescript-eslint/visitor-keys': 8.46.2
+      '@typescript-eslint/types': 8.46.3
+      '@typescript-eslint/visitor-keys': 8.46.3

-  '@typescript-eslint/tsconfig-utils@8.46.2(typescript@5.9.3)':
+  '@typescript-eslint/tsconfig-utils@8.46.3(typescript@5.9.3)':
    dependencies:
      typescript: 5.9.3

-  '@typescript-eslint/type-utils@8.46.2(eslint@9.39.0)(typescript@5.9.3)':
+  '@typescript-eslint/type-utils@8.46.3(eslint@9.39.1)(typescript@5.9.3)':
    dependencies:
-      '@typescript-eslint/types': 8.46.2
-      '@typescript-eslint/typescript-estree': 8.46.2(typescript@5.9.3)
-      '@typescript-eslint/utils': 8.46.2(eslint@9.39.0)(typescript@5.9.3)
+      '@typescript-eslint/types': 8.46.3
+      '@typescript-eslint/typescript-estree': 8.46.3(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.46.3(eslint@9.39.1)(typescript@5.9.3)
      debug: 4.4.3
-      eslint: 9.39.0
+      eslint: 9.39.1
      ts-api-utils: 2.1.0(typescript@5.9.3)
      typescript: 5.9.3
    transitivePeerDependencies:
      - supports-color

-  '@typescript-eslint/types@8.46.2': {}
+  '@typescript-eslint/types@8.46.3': {}

-  '@typescript-eslint/typescript-estree@8.46.2(typescript@5.9.3)':
+  '@typescript-eslint/typescript-estree@8.46.3(typescript@5.9.3)':
    dependencies:
-      '@typescript-eslint/project-service': 8.46.2(typescript@5.9.3)
-      '@typescript-eslint/tsconfig-utils': 8.46.2(typescript@5.9.3)
-      '@typescript-eslint/types': 8.46.2
-      '@typescript-eslint/visitor-keys': 8.46.2
+      '@typescript-eslint/project-service': 8.46.3(typescript@5.9.3)
+      '@typescript-eslint/tsconfig-utils': 8.46.3(typescript@5.9.3)
+      '@typescript-eslint/types': 8.46.3
+      '@typescript-eslint/visitor-keys': 8.46.3
      debug: 4.4.3
      fast-glob: 3.3.3
      is-glob: 4.0.3
@@ -3858,20 +3883,20 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

-  '@typescript-eslint/utils@8.46.2(eslint@9.39.0)(typescript@5.9.3)':
+  '@typescript-eslint/utils@8.46.3(eslint@9.39.1)(typescript@5.9.3)':
    dependencies:
-      '@eslint-community/eslint-utils': 4.9.0(eslint@9.39.0)
-      '@typescript-eslint/scope-manager': 8.46.2
-      '@typescript-eslint/types': 8.46.2
-      '@typescript-eslint/typescript-estree': 8.46.2(typescript@5.9.3)
-      eslint: 9.39.0
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.39.1)
+      '@typescript-eslint/scope-manager': 8.46.3
+      '@typescript-eslint/types': 8.46.3
+      '@typescript-eslint/typescript-estree': 8.46.3(typescript@5.9.3)
+      eslint: 9.39.1
      typescript: 5.9.3
    transitivePeerDependencies:
      - supports-color

-  '@typescript-eslint/visitor-keys@8.46.2':
+  '@typescript-eslint/visitor-keys@8.46.3':
    dependencies:
-      '@typescript-eslint/types': 8.46.2
+      '@typescript-eslint/types': 8.46.3
      eslint-visitor-keys: 4.2.1

  acorn-jsx@5.3.2(acorn@8.15.0):
@@ -3922,6 +3947,8 @@ snapshots:
    dependencies:
      possible-typed-array-names: 1.1.0

+  axe-core@4.11.0: {}
+
  babel-plugin-macros@3.1.0:
    dependencies:
      '@babel/runtime': 7.28.4
@@ -3936,7 +3963,7 @@ snapshots:

  base64-js@1.5.1: {}

-  baseline-browser-mapping@2.8.23: {}
+  baseline-browser-mapping@2.8.24: {}

  bin-build@3.0.0:
    dependencies:
@@ -3993,9 +4020,9 @@ snapshots:

  browserslist@4.27.0:
    dependencies:
-      baseline-browser-mapping: 2.8.23
+      baseline-browser-mapping: 2.8.24
      caniuse-lite: 1.0.30001753
-      electron-to-chromium: 1.5.244
+      electron-to-chromium: 1.5.245
      node-releases: 2.0.27
      update-browserslist-db: 1.1.4(browserslist@4.27.0)

@@ -4340,7 +4367,7 @@ snapshots:

  duplexer3@0.1.5: {}

-  electron-to-chromium@1.5.244: {}
+  electron-to-chromium@1.5.245: {}

  emoji-regex@8.0.0: {}

@@ -4483,9 +4510,9 @@ snapshots:

  escape-string-regexp@4.0.0: {}

-  eslint-config-prettier@10.1.8(eslint@9.39.0):
+  eslint-config-prettier@10.1.8(eslint@9.39.1):
    dependencies:
-      eslint: 9.39.0
+      eslint: 9.39.1

  eslint-scope@8.4.0:
    dependencies:
@@ -4496,15 +4523,15 @@ snapshots:

  eslint-visitor-keys@4.2.1: {}

-  eslint@9.39.0:
+  eslint@9.39.1:
    dependencies:
-      '@eslint-community/eslint-utils': 4.9.0(eslint@9.39.0)
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.39.1)
      '@eslint-community/regexpp': 4.12.2
      '@eslint/config-array': 0.21.1
      '@eslint/config-helpers': 0.4.2
      '@eslint/core': 0.17.0
      '@eslint/eslintrc': 3.3.1
-      '@eslint/js': 9.39.0
+      '@eslint/js': 9.39.1
      '@eslint/plugin-kit': 0.4.1
      '@humanfs/node': 0.16.7
      '@humanwhocodes/module-importer': 1.0.1
@@ -4555,6 +4582,8 @@ snapshots:

  esutils@2.0.3: {}

+  etag@1.8.1: {}
+
  exec-buffer@3.2.0:
    dependencies:
      execa: 0.7.0
@@ -5138,9 +5167,9 @@ snapshots:
    dependencies:
      p-locate: 5.0.0

-  lodash.merge@4.6.2: {}
+  lodash-es@4.17.21: {}

-  lodash@4.17.21: {}
+  lodash.merge@4.6.2: {}

  logalot@2.1.0:
    dependencies:
@@ -5376,6 +5405,10 @@ snapshots:
    dependencies:
      callsites: 3.1.0

+  parse-imports-exports@0.2.4:
+    dependencies:
+      parse-statements: 1.0.11
+
  parse-json@2.2.0:
    dependencies:
      error-ex: 1.3.4
@@ -5387,6 +5420,8 @@ snapshots:
      json-parse-even-better-errors: 2.3.1
      lines-and-columns: 1.2.4

+  parse-statements@1.0.11: {}
+
  path-exists@2.1.0:
    dependencies:
      pinkie-promise: 2.0.1
@@ -5820,7 +5855,7 @@ snapshots:
      temp-dir: 1.0.0
      uuid: 3.4.0

-  terser@5.44.0:
+  terser@5.44.1:
    dependencies:
      '@jridgewell/source-map': 0.3.11
      acorn: 8.15.0
@@ -5884,13 +5919,13 @@ snapshots:
    dependencies:
      typescript: 5.9.3

-  typescript-eslint@8.46.2(eslint@9.39.0)(typescript@5.9.3):
+  typescript-eslint@8.46.3(eslint@9.39.1)(typescript@5.9.3):
    dependencies:
-      '@typescript-eslint/eslint-plugin': 8.46.2(@typescript-eslint/parser@8.46.2(eslint@9.39.0)(typescript@5.9.3))(eslint@9.39.0)(typescript@5.9.3)
-      '@typescript-eslint/parser': 8.46.2(eslint@9.39.0)(typescript@5.9.3)
-      '@typescript-eslint/typescript-estree': 8.46.2(typescript@5.9.3)
-      '@typescript-eslint/utils': 8.46.2(eslint@9.39.0)(typescript@5.9.3)
-      eslint: 9.39.0
+      '@typescript-eslint/eslint-plugin': 8.46.3(@typescript-eslint/parser@8.46.3(eslint@9.39.1)(typescript@5.9.3))(eslint@9.39.1)(typescript@5.9.3)
+      '@typescript-eslint/parser': 8.46.3(eslint@9.39.1)(typescript@5.9.3)
+      '@typescript-eslint/typescript-estree': 8.46.3(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.46.3(eslint@9.39.1)(typescript@5.9.3)
+      eslint: 9.39.1
      typescript: 5.9.3
    transitivePeerDependencies:
      - supports-color
@@ -5935,7 +5970,7 @@ snapshots:
      spdx-correct: 3.2.0
      spdx-expression-parse: 3.0.1

-  vite-plugin-imagemin@0.6.1(vite@7.1.12(@types/node@24.10.0)(terser@5.44.0)):
+  vite-plugin-imagemin@0.6.1(vite@7.2.0(@types/node@24.10.0)(terser@5.44.1)):
    dependencies:
      '@types/imagemin': 7.0.1
      '@types/imagemin-gifsicle': 7.0.4
@@ -5960,11 +5995,11 @@ snapshots:
      imagemin-webp: 6.1.0
      jpegtran-bin: 6.0.1
      pathe: 0.2.0
-      vite: 7.1.12(@types/node@24.10.0)(terser@5.44.0)
+      vite: 7.2.0(@types/node@24.10.0)(terser@5.44.1)
    transitivePeerDependencies:
      - supports-color

-  vite-prerender-plugin@0.5.12(vite@7.1.12(@types/node@24.10.0)(terser@5.44.0)):
+  vite-prerender-plugin@0.5.12(vite@7.2.0(@types/node@24.10.0)(terser@5.44.1)):
    dependencies:
      kolorist: 1.8.0
      magic-string: 0.30.21
@@ -5972,20 +6007,20 @@ snapshots:
      simple-code-frame: 1.3.0
      source-map: 0.7.6
      stack-trace: 1.0.0-pre2
-      vite: 7.1.12(@types/node@24.10.0)(terser@5.44.0)
+      vite: 7.2.0(@types/node@24.10.0)(terser@5.44.1)

-  vite-tsconfig-paths@5.1.4(typescript@5.9.3)(vite@7.1.12(@types/node@24.10.0)(terser@5.44.0)):
+  vite-tsconfig-paths@5.1.4(typescript@5.9.3)(vite@7.2.0(@types/node@24.10.0)(terser@5.44.1)):
    dependencies:
      debug: 4.4.3
      globrex: 0.1.2
      tsconfck: 3.1.6(typescript@5.9.3)
    optionalDependencies:
-      vite: 7.1.12(@types/node@24.10.0)(terser@5.44.0)
+      vite: 7.2.0(@types/node@24.10.0)(terser@5.44.1)
    transitivePeerDependencies:
      - supports-color
      - typescript

-  vite@7.1.12(@types/node@24.10.0)(terser@5.44.0):
+  vite@7.2.0(@types/node@24.10.0)(terser@5.44.1):
    dependencies:
      esbuild: 0.25.12
      fdir: 6.5.0(picomatch@4.0.3)
@@ -5996,7 +6031,7 @@ snapshots:
    optionalDependencies:
      '@types/node': 24.10.0
      fsevents: 2.3.3
-      terser: 5.44.0
+      terser: 5.44.1

  which-typed-array@1.1.19:
    dependencies:
--- a/interface/progmem-generator.js
+++ b/interface/progmem-generator.js
@@ -1,10 +1,9 @@
-import crypto from 'crypto';
+import etag from 'etag';
 import {
  createWriteStream,
  existsSync,
  readFileSync,
  readdirSync,
-  statSync,
  unlinkSync
 } from 'fs';
 import mime from 'mime-types';
@@ -36,7 +35,7 @@ const generateWWWClass =
 class WWWData {
 ${INDENT}public:
 ${INDENT.repeat(2)}static void registerRoutes(RouteRegistrationHandler handler) {
-${fileInfo.map((f) => `${INDENT.repeat(3)}handler("${f.uri}", "${f.mimeType}", ${f.variable}, ${f.size}, "${f.hash}");`).join('\n')}
+${fileInfo.map((f) => `${INDENT.repeat(3)}handler("${f.uri}", "${f.mimeType}", ${f.variable}, ${f.size}, ${f.hash});`).join('\n')}
 ${INDENT.repeat(2)}}
 };
 `;
@@ -71,7 +70,8 @@ const writeFile = (relativeFilePath, buffer) => {
  writeStream.write(`const uint8_t ${variable}[] = {`);

  const zipBuffer = zlib.gzipSync(buffer, { level: 9 });
-  const hash = crypto.createHash('sha256').update(zipBuffer).digest('hex');
+  // const hash = crypto.createHash('sha256').update(zipBuffer).digest('hex');
+  const hash = etag(zipBuffer); // use smaller md5 instead of sha256

  zipBuffer.forEach((b) => {
    if (!(size % bytesPerLine)) {
--- a/interface/src/App.tsx
+++ b/interface/src/App.tsx
@@ -1,4 +1,4 @@
-import { memo, useCallback, useEffect, useMemo, useState } from 'react';
+import { memo, useCallback, useEffect, useState } from 'react';
 import { ToastContainer, Zoom } from 'react-toastify';

 import AppRouting from 'AppRouting';
@@ -23,6 +23,26 @@ const AVAILABLE_LOCALES = [
  'cz'
 ] as Locales[];

+// Static toast configuration - no need to recreate on every render
+const TOAST_CONTAINER_PROPS = {
+  position: 'bottom-left' as const,
+  autoClose: 3000,
+  hideProgressBar: false,
+  newestOnTop: false,
+  closeOnClick: true,
+  rtl: false,
+  pauseOnFocusLoss: true,
+  draggable: false,
+  pauseOnHover: false,
+  transition: Zoom,
+  closeButton: false,
+  theme: 'dark' as const,
+  toastStyle: {
+    border: '1px solid #177ac9',
+    width: 'fit-content'
+  }
+};
+
 const App = memo(() => {
  const [wasLoaded, setWasLoaded] = useState(false);
  const [locale, setLocale] = useState<Locales>('en');
@@ -41,36 +61,13 @@ const App = memo(() => {
    void initializeLocale();
  }, [initializeLocale]);

-  // Memoize toast container props to prevent recreation
-  const toastContainerProps = useMemo(
-    () => ({
-      position: 'bottom-left' as const,
-      autoClose: 3000,
-      hideProgressBar: false,
-      newestOnTop: false,
-      closeOnClick: true,
-      rtl: false,
-      pauseOnFocusLoss: true,
-      draggable: false,
-      pauseOnHover: false,
-      transition: Zoom,
-      closeButton: false,
-      theme: 'dark' as const,
-      toastStyle: {
-        border: '1px solid #177ac9',
-        width: 'fit-content'
-      }
-    }),
-    []
-  );
-
  if (!wasLoaded) return null;

  return (
    <TypesafeI18n locale={locale}>
      <CustomTheme>
        <AppRouting />
-        <ToastContainer {...toastContainerProps} />
+        <ToastContainer {...TOAST_CONTAINER_PROPS} />
      </CustomTheme>
    </TypesafeI18n>
  );
--- a/interface/src/AppRouting.tsx
+++ b/interface/src/AppRouting.tsx
@@ -1,60 +1,80 @@
-import { useContext, useEffect } from 'react';
+import { type FC, Suspense, lazy, memo, useContext, useEffect, useRef } from 'react';
 import { Navigate, Route, Routes } from 'react-router';
 import { toast } from 'react-toastify';

-import AuthenticatedRouting from 'AuthenticatedRouting';
-import SignIn from 'SignIn';
-import { RequireAuthenticated, RequireUnauthenticated } from 'components';
+import {
+  LoadingSpinner,
+  RequireAuthenticated,
+  RequireUnauthenticated
+} from 'components';
 import { Authentication, AuthenticationContext } from 'contexts/authentication';
 import { useI18nContext } from 'i18n/i18n-react';

+// Lazy load route components for better code splitting
+const SignIn = lazy(() => import('SignIn'));
+const AuthenticatedRouting = lazy(() => import('AuthenticatedRouting'));
+
 interface SecurityRedirectProps {
-  message: string;
-  signOut?: boolean;
+  readonly message: string;
+  readonly signOut?: boolean;
 }

-const RootRedirect = ({ message, signOut }: SecurityRedirectProps) => {
-  const authenticationContext = useContext(AuthenticationContext);
-  useEffect(() => {
-    signOut && authenticationContext.signOut(false);
-    toast.success(message);
-  }, [message, signOut, authenticationContext]);
-  return <Navigate to="/" />;
-};
+const RootRedirect: FC<SecurityRedirectProps> = memo(
+  ({ message, signOut = false }) => {
+    const { signOut: contextSignOut } = useContext(AuthenticationContext);
+    const hasShownToast = useRef(false);

-const AppRouting = () => {
+    useEffect(() => {
+      // Prevent duplicate toasts on strict mode or re-renders
+      if (!hasShownToast.current) {
+        hasShownToast.current = true;
+        if (signOut) {
+          contextSignOut(false);
+        }
+        toast.success(message);
+      }
+      // Only run once on mount - using ref to track execution
+    }, []);
+
+    return <Navigate to="/" replace />;
+  }
+);
+
+const AppRouting: FC = memo(() => {
  const { LL } = useI18nContext();

  return (
    <Authentication>
-      <Routes>
-        <Route
-          path="/unauthorized"
-          element={<RootRedirect message={LL.PLEASE_SIGNIN()} signOut />}
-        />
-        <Route
-          path="/fileUpdated"
-          element={<RootRedirect message={LL.UPLOAD_SUCCESSFUL()} />}
-        />
-        <Route
-          path="/"
-          element={
-            <RequireUnauthenticated>
-              <SignIn />
-            </RequireUnauthenticated>
-          }
-        />
-        <Route
-          path="/*"
-          element={
-            <RequireAuthenticated>
-              <AuthenticatedRouting />
-            </RequireAuthenticated>
-          }
-        />
-      </Routes>
+      <Suspense fallback={<LoadingSpinner />}>
+        <Routes>
+          <Route
+            path="/unauthorized"
+            element={<RootRedirect message={LL.PLEASE_SIGNIN()} signOut />}
+          />
+          <Route
+            path="/fileUpdated"
+            element={<RootRedirect message={LL.UPLOAD_SUCCESSFUL()} />}
+          />
+          <Route
+            path="/"
+            element={
+              <RequireUnauthenticated>
+                <SignIn />
+              </RequireUnauthenticated>
+            }
+          />
+          <Route
+            path="/*"
+            element={
+              <RequireAuthenticated>
+                <AuthenticatedRouting />
+              </RequireAuthenticated>
+            }
+          />
+        </Routes>
+      </Suspense>
    </Authentication>
  );
-};
+});

 export default AppRouting;
--- a/interface/src/AuthenticatedRouting.tsx
+++ b/interface/src/AuthenticatedRouting.tsx
@@ -1,77 +1,86 @@
-import { useContext } from 'react';
+import { Suspense, lazy, memo, useContext } from 'react';
 import { Navigate, Route, Routes } from 'react-router';

-import CustomEntities from 'app/main/CustomEntities';
-import Customizations from 'app/main/Customizations';
-import Dashboard from 'app/main/Dashboard';
-import Devices from 'app/main/Devices';
-import Help from 'app/main/Help';
-import Modules from 'app/main/Modules';
-import Scheduler from 'app/main/Scheduler';
-import Sensors from 'app/main/Sensors';
-import APSettings from 'app/settings/APSettings';
-import ApplicationSettings from 'app/settings/ApplicationSettings';
-import DownloadUpload from 'app/settings/DownloadUpload';
-import MqttSettings from 'app/settings/MqttSettings';
-import NTPSettings from 'app/settings/NTPSettings';
-import Settings from 'app/settings/Settings';
-import Network from 'app/settings/network/Network';
-import Security from 'app/settings/security/Security';
-import APStatus from 'app/status/APStatus';
-import Activity from 'app/status/Activity';
-import HardwareStatus from 'app/status/HardwareStatus';
-import MqttStatus from 'app/status/MqttStatus';
-import NTPStatus from 'app/status/NTPStatus';
-import NetworkStatus from 'app/status/NetworkStatus';
-import Status from 'app/status/Status';
-import SystemLog from 'app/status/SystemLog';
-import Version from 'app/status/Version';
-import { Layout } from 'components';
+import { Layout, LoadingSpinner } from 'components';
 import { AuthenticatedContext } from 'contexts/authentication';

-const AuthenticatedRouting = () => {
+// Lazy load all route components for better code splitting
+const Dashboard = lazy(() => import('app/main/Dashboard'));
+const Devices = lazy(() => import('app/main/Devices'));
+const Sensors = lazy(() => import('app/main/Sensors'));
+const Help = lazy(() => import('app/main/Help'));
+const Customizations = lazy(() => import('app/main/Customizations'));
+const Scheduler = lazy(() => import('app/main/Scheduler'));
+const CustomEntities = lazy(() => import('app/main/CustomEntities'));
+const Modules = lazy(() => import('app/main/Modules'));
+
+const Status = lazy(() => import('app/status/Status'));
+const HardwareStatus = lazy(() => import('app/status/HardwareStatus'));
+const Activity = lazy(() => import('app/status/Activity'));
+const SystemLog = lazy(() => import('app/status/SystemLog'));
+const MqttStatus = lazy(() => import('app/status/MqttStatus'));
+const NTPStatus = lazy(() => import('app/status/NTPStatus'));
+const APStatus = lazy(() => import('app/status/APStatus'));
+const NetworkStatus = lazy(() => import('app/status/NetworkStatus'));
+const Version = lazy(() => import('app/status/Version'));
+
+const Settings = lazy(() => import('app/settings/Settings'));
+const ApplicationSettings = lazy(() => import('app/settings/ApplicationSettings'));
+const MqttSettings = lazy(() => import('app/settings/MqttSettings'));
+const NTPSettings = lazy(() => import('app/settings/NTPSettings'));
+const APSettings = lazy(() => import('app/settings/APSettings'));
+const DownloadUpload = lazy(() => import('app/settings/DownloadUpload'));
+const Network = lazy(() => import('app/settings/network/Network'));
+const Security = lazy(() => import('app/settings/security/Security'));
+
+const AuthenticatedRouting = memo(() => {
  const { me } = useContext(AuthenticatedContext);
  return (
    <Layout>
-      <Routes>
-        <Route path="/dashboard/*" element={<Dashboard />} />
-        <Route path="/devices/*" element={<Devices />} />
-        <Route path="/sensors/*" element={<Sensors />} />
-        <Route path="/help/*" element={<Help />} />
+      <Suspense fallback={<LoadingSpinner />}>
+        <Routes>
+          <Route path="/dashboard/*" element={<Dashboard />} />
+          <Route path="/devices/*" element={<Devices />} />
+          <Route path="/sensors/*" element={<Sensors />} />
+          <Route path="/help/*" element={<Help />} />

-        <Route path="/status/*" element={<Status />} />
-        <Route path="/status/hardwarestatus/*" element={<HardwareStatus />} />
-        <Route path="/status/activity" element={<Activity />} />
-        <Route path="/status/log" element={<SystemLog />} />
-        <Route path="/status/mqtt" element={<MqttStatus />} />
-        <Route path="/status/ntp" element={<NTPStatus />} />
-        <Route path="/status/ap" element={<APStatus />} />
-        <Route path="/status/network" element={<NetworkStatus />} />
-        <Route path="/status/version" element={<Version />} />
+          <Route path="/status/*" element={<Status />} />
+          <Route path="/status/hardwarestatus/*" element={<HardwareStatus />} />
+          <Route path="/status/activity" element={<Activity />} />
+          <Route path="/status/log" element={<SystemLog />} />
+          <Route path="/status/mqtt" element={<MqttStatus />} />
+          <Route path="/status/ntp" element={<NTPStatus />} />
+          <Route path="/status/ap" element={<APStatus />} />
+          <Route path="/status/network" element={<NetworkStatus />} />
+          <Route path="/status/version" element={<Version />} />

-        {me.admin && (
-          <>
-            <Route path="/settings" element={<Settings />} />
-            <Route path="/settings/application" element={<ApplicationSettings />} />
-            <Route path="/settings/mqtt" element={<MqttSettings />} />
-            <Route path="/settings/ntp" element={<NTPSettings />} />
-            <Route path="/settings/ap" element={<APSettings />} />
-            <Route path="/settings/modules" element={<Modules />} />
-            <Route path="/settings/downloadUpload" element={<DownloadUpload />} />
+          {me.admin && (
+            <>
+              <Route path="/settings" element={<Settings />} />
+              <Route
+                path="/settings/application"
+                element={<ApplicationSettings />}
+              />
+              <Route path="/settings/mqtt" element={<MqttSettings />} />
+              <Route path="/settings/ntp" element={<NTPSettings />} />
+              <Route path="/settings/ap" element={<APSettings />} />
+              <Route path="/settings/modules" element={<Modules />} />
+              <Route path="/settings/downloadUpload" element={<DownloadUpload />} />

-            <Route path="/settings/network/*" element={<Network />} />
-            <Route path="/settings/security/*" element={<Security />} />
+              <Route path="/settings/network/*" element={<Network />} />
+              <Route path="/settings/security/*" element={<Security />} />

-            <Route path="/customizations" element={<Customizations />} />
-            <Route path="/scheduler" element={<Scheduler />} />
-            <Route path="/customentities" element={<CustomEntities />} />
-          </>
-        )}
+              <Route path="/customizations" element={<Customizations />} />
+              <Route path="/scheduler" element={<Scheduler />} />
+              <Route path="/customentities" element={<CustomEntities />} />
+            </>
+          )}

-        <Route path="/*" element={<Navigate to="/" />} />
-      </Routes>
+          <Route path="/*" element={<Navigate to="/" />} />
+        </Routes>
+      </Suspense>
    </Layout>
  );
-};
+});

 export default AuthenticatedRouting;
--- a/interface/src/SignIn.tsx
+++ b/interface/src/SignIn.tsx
@@ -1,4 +1,4 @@
-import { useContext, useState } from 'react';
+import { memo, useCallback, useContext, useMemo, useState } from 'react';
 import { toast } from 'react-toastify';

 import ForwardIcon from '@mui/icons-material/Forward';
@@ -19,7 +19,7 @@ import type { SignInRequest } from 'types';
 import { onEnterCallback, updateValue } from 'utils';
 import { SIGN_IN_REQUEST_VALIDATOR, validate } from 'validators';

-const SignIn = () => {
+const SignIn = memo(() => {
  const authenticationContext = useContext(AuthenticationContext);

  const { LL } = useI18nContext();
@@ -42,9 +42,18 @@ const SignIn = () => {
    }
  });

-  const updateLoginRequestValue = updateValue(setSignInRequest);
+  // Memoize callback to prevent recreation on every render
+  const updateLoginRequestValue = useMemo(
+    () =>
+      updateValue((updater) =>
+        setSignInRequest(
+          updater as unknown as (prevState: SignInRequest) => SignInRequest
+        )
+      ),
+    []
+  );

-  const signIn = async () => {
+  const signIn = useCallback(async () => {
    await callSignIn(signInRequest).catch((event: Error) => {
      if (event.message === 'Unauthorized') {
        toast.warning(LL.INVALID_LOGIN());
@@ -53,9 +62,9 @@ const SignIn = () => {
      }
      setProcessing(false);
    });
-  };
+  }, [callSignIn, signInRequest, LL]);

-  const validateAndSignIn = async () => {
+  const validateAndSignIn = useCallback(async () => {
    setProcessing(true);
    SIGN_IN_REQUEST_VALIDATOR.messages({
      required: LL.IS_REQUIRED('%s')
@@ -67,9 +76,10 @@ const SignIn = () => {
      setFieldErrors(error as ValidateFieldsError);
      setProcessing(false);
    }
-  };
+  }, [signInRequest, signIn, LL]);

-  const submitOnEnter = onEnterCallback(signIn);
+  // Memoize callback to prevent recreation on every render
+  const submitOnEnter = useMemo(() => onEnterCallback(signIn), [signIn]);

  return (
    <Box
@@ -144,6 +154,6 @@ const SignIn = () => {
      </Paper>
    </Box>
  );
-};
+});

 export default SignIn;
--- a/interface/src/api/app.ts
+++ b/interface/src/api/app.ts
@@ -20,19 +20,18 @@ import type {
  WriteTemperatureSensor
 } from '../app/main/types';

+const MSGPACK_CONFIG = { responseType: 'arraybuffer' as const };
+
 // Dashboard
 export const readDashboard = () =>
-  alovaInstance.Get<DashboardData>('/rest/dashboardData', {
-    responseType: 'arraybuffer' // uses msgpack
-  });
+  alovaInstance.Get<DashboardData>('/rest/dashboardData', MSGPACK_CONFIG);

 // Devices
-export const readCoreData = () => alovaInstance.Get<CoreData>(`/rest/coreData`);
+export const readCoreData = () => alovaInstance.Get<CoreData>('/rest/coreData');
 export const readDeviceData = (id: number) =>
  alovaInstance.Get<DeviceData>('/rest/deviceData', {
-    // alovaInstance.Get<DeviceData>(`/rest/deviceData/${id}`, {
    params: { id },
-    responseType: 'arraybuffer' // uses msgpack
+    ...MSGPACK_CONFIG
  });
 export const writeDeviceValue = (data: { id: number; c: string; v: unknown }) =>
  alovaInstance.Post('/rest/writeDeviceValue', data);
@@ -66,13 +65,13 @@ export const callAction = (action: Action) =>

 // SettingsCustomization
 export const readDeviceEntities = (id: number) =>
-  // alovaInstance.Get<DeviceEntity[]>(`/rest/deviceEntities/${id}`, {
-  alovaInstance.Get<DeviceEntity[]>(`/rest/deviceEntities`, {
+  alovaInstance.Get<DeviceEntity[]>('/rest/deviceEntities', {
    params: { id },
-    responseType: 'arraybuffer',
+    ...MSGPACK_CONFIG,
    // @ts-expect-error - exactOptionalPropertyTypes compatibility issue
    transform(data) {
-      return (data as DeviceEntity[]).map((de: DeviceEntity) => ({
+      const entities = data as DeviceEntity[];
+      return entities.map((de) => ({
        ...de,
        o_m: de.m,
        o_cn: de.cn,
@@ -95,7 +94,8 @@ export const readSchedule = () =>
  alovaInstance.Get<ScheduleItem[]>('/rest/schedule', {
    // @ts-expect-error - exactOptionalPropertyTypes compatibility issue
    transform(data) {
-      return (data as Schedule).schedule.map((si: ScheduleItem) => ({
+      const schedule = (data as Schedule).schedule;
+      return schedule.map((si) => ({
        ...si,
        o_id: si.id,
        o_active: si.active,
@@ -115,7 +115,8 @@ export const writeSchedule = (data: Schedule) =>
 export const readModules = () =>
  alovaInstance.Get<ModuleItem[]>('/rest/modules', {
    transform(data) {
-      return (data as Modules).modules.map((mi: ModuleItem) => ({
+      const modules = (data as Modules).modules;
+      return modules.map((mi) => ({
        ...mi,
        o_enabled: mi.enabled,
        o_license: mi.license
@@ -133,7 +134,8 @@ export const readCustomEntities = () =>
  alovaInstance.Get<EntityItem[]>('/rest/customEntities', {
    // @ts-expect-error - exactOptionalPropertyTypes compatibility issue
    transform(data) {
-      return (data as Entities).entities.map((ei: EntityItem) => ({
+      const entities = (data as Entities).entities;
+      return entities.map((ei) => ({
        ...ei,
        o_id: ei.id,
        o_ram: ei.ram,
--- a/interface/src/api/endpoints.ts
+++ b/interface/src/api/endpoints.ts
@@ -4,55 +4,57 @@ import ReactHook from 'alova/react';

 import { unpack } from './unpack';

-export const ACCESS_TOKEN = 'access_token';
+export const ACCESS_TOKEN = 'access_token' as const;
+
+// Cached token to avoid repeated localStorage access
+let cachedToken: string | null = null;
+
+const getAccessToken = (): string | null => {
+  if (cachedToken === null) {
+    cachedToken = localStorage.getItem(ACCESS_TOKEN);
+  }
+  return cachedToken;
+};
+
+// Clear token cache when needed (e.g., on logout)
+export const clearTokenCache = (): void => {
+  cachedToken = null;
+};
+
+const handleResponse = async (response: AlovaXHRResponse) => {
+  // Handle various HTTP status codes
+  if (response.status === 205) {
+    throw new Error('Reboot required');
+  }
+  if (response.status === 400) {
+    throw new Error('Request Failed');
+  }
+  if (response.status >= 400) {
+    throw new Error(response.statusText);
+  }
+
+  const data = (await response.data) as ArrayBuffer;
+
+  // Unpack MessagePack data if ArrayBuffer
+  if (data instanceof ArrayBuffer) {
+    return unpack(data) as ArrayBuffer;
+  }
+
+  return data;
+};

 export const alovaInstance = createAlova({
  statesHook: ReactHook,
-  // timeout: 3000, // 3 seconds before throwing a timeout error, default is 0 = none
  cacheFor: null, // disable cache
-  // cacheFor: {
-  //   GET: {
-  //     mode: 'memory',
-  //     expire: 60 * 10 * 1000 // 60 seconds in cache
-  //   }
-  // },
  requestAdapter: xhrRequestAdapter(),
  beforeRequest(method) {
-    if (localStorage.getItem(ACCESS_TOKEN)) {
-      method.config.headers.Authorization =
-        'Bearer ' + localStorage.getItem(ACCESS_TOKEN);
+    const token = getAccessToken();
+    if (token) {
+      method.config.headers.Authorization = `Bearer ${token}`;
    }
-    // for simulating very slow networks
-    // return new Promise((resolve) => {
-    //   const random = 3000 + Math.random() * 2000;
-    //   setTimeout(resolve, Math.floor(random));
-    // });
  },
-
  responded: {
-    onSuccess: async (response: AlovaXHRResponse) => {
-      // if (response.status === 202) {
-      //   throw new Error('Wait'); // wifi scan in progress
-      // } else
-      if (response.status === 205) {
-        throw new Error('Reboot required');
-      } else if (response.status === 400) {
-        throw new Error('Request Failed');
-      } else if (response.status >= 400) {
-        throw new Error(response.statusText);
-      }
-      const data: ArrayBuffer = (await response.data) as ArrayBuffer;
-      if (response.data instanceof ArrayBuffer) {
-        return unpack(data) as ArrayBuffer;
-      }
-      return data;
-    }
-
-    // Interceptor for request failure. This interceptor will be entered when the request is wrong.
-    // http errors like 401 (unauthorized) are handled either in the methods or AuthenticatedRouting()
-    // onError: (error, method) => {
-    //   alert(error.message);
-    // }
+    onSuccess: handleResponse
  }
 });

--- a/interface/src/api/network.ts
+++ b/interface/src/api/network.ts
@@ -2,12 +2,14 @@ import type { NetworkSettingsType, NetworkStatusType, WiFiNetworkList } from 'ty

 import { alovaInstance } from './endpoints';

+const LIST_NETWORKS_TIMEOUT = 20000; // 20 seconds
+
 export const readNetworkStatus = () =>
  alovaInstance.Get<NetworkStatusType>('/rest/networkStatus');
 export const scanNetworks = () => alovaInstance.Get('/rest/scanNetworks');
 export const listNetworks = () =>
  alovaInstance.Get<WiFiNetworkList>('/rest/listNetworks', {
-    timeout: 20000 // 20 seconds
+    timeout: LIST_NETWORKS_TIMEOUT
  });
 export const readNetworkSettings = () =>
  alovaInstance.Get<NetworkSettingsType>('/rest/networkSettings');
--- a/interface/src/api/ntp.ts
+++ b/interface/src/api/ntp.ts
@@ -6,7 +6,7 @@ export const readNTPStatus = () =>
  alovaInstance.Get<NTPStatusType>('/rest/ntpStatus');

 export const readNTPSettings = () =>
-  alovaInstance.Get<NTPSettingsType>('/rest/ntpSettings', {});
+  alovaInstance.Get<NTPSettingsType>('/rest/ntpSettings');
 export const updateNTPSettings = (data: NTPSettingsType) =>
  alovaInstance.Post<NTPSettingsType>('/rest/ntpSettings', data);

--- a/interface/src/api/system.ts
+++ b/interface/src/api/system.ts
@@ -8,7 +8,7 @@ export const readSystemStatus = () =>

 // SystemLog
 export const readLogSettings = () =>
-  alovaInstance.Get<LogSettings>(`/rest/logSettings`);
+  alovaInstance.Get<LogSettings>('/rest/logSettings');
 export const updateLogSettings = (data: LogSettings) =>
  alovaInstance.Post('/rest/logSettings', data);
 export const fetchLogES = () => alovaInstance.Get('/es/log');
@@ -36,10 +36,12 @@ export const getDevVersion = () =>
    }
  });

+const UPLOAD_TIMEOUT = 60000; // 1 minute
+
 export const uploadFile = (file: File) => {
  const formData = new FormData();
  formData.append('file', file);
  return alovaInstance.Post('/rest/uploadFile', formData, {
-    timeout: 60000 // override timeout for uploading firmware - 1 minute
+    timeout: UPLOAD_TIMEOUT
  });
 };
--- a/interface/src/api/unpack.ts
+++ b/interface/src/api/unpack.ts
@@ -54,7 +54,7 @@ export class Unpackr {
    }
    Object.assign(this, options);
  }
-  unpack(source, options?: any) {
+  unpack(source, options?: { start?: number; end?: number; lazy?: boolean }) {
    if (src) {
      return saveState(() => {
        clearSource();
@@ -184,7 +184,7 @@ export class Unpackr {
 function getPosition() {
  return position;
 }
-function checkedRead(options: any) {
+function checkedRead(options?: { lazy?: boolean }) {
  try {
    if (!currentUnpackr.trusted && !sequentialMode) {
      const sharedLength = currentStructures.sharedLength || 0;
--- a/interface/src/app/main/CustomEntities.tsx
+++ b/interface/src/app/main/CustomEntities.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { useBlocker } from 'react-router';
 import { toast } from 'react-toastify';

@@ -35,6 +35,10 @@ import { DeviceValueTypeNames, DeviceValueUOM_s } from './types';
 import type { Entities, EntityItem } from './types';
 import { entityItemValidation } from './validators';

+const MIN_ID = -100;
+const MAX_ID = 100;
+const ICON_SIZE = 12;
+
 const CustomEntities = () => {
  const { LL } = useI18nContext();
  const [numChanges, setNumChanges] = useState<number>(0);
@@ -53,18 +57,20 @@ const CustomEntities = () => {
    initialData: []
  });

-  useInterval(() => {
+  const intervalCallback = useCallback(() => {
    if (!dialogOpen && !numChanges) {
      void fetchEntities();
    }
-  });
+  }, [dialogOpen, numChanges, fetchEntities]);
+
+  useInterval(intervalCallback);

  const { send: writeEntities } = useRequest(
    (data: Entities) => writeCustomEntities(data),
    { immediate: false }
  );

-  function hasEntityChanged(ei: EntityItem) {
+  const hasEntityChanged = useCallback((ei: EntityItem) => {
    return (
      ei.id !== ei.o_id ||
      ei.ram !== ei.o_ram ||
@@ -80,19 +86,21 @@ const CustomEntities = () => {
      ei.deleted !== ei.o_deleted ||
      (ei.value || '') !== (ei.o_value || '')
    );
-  }
+  }, []);

-  const entity_theme = useTheme({
-    Table: `
+  const entity_theme = useMemo(
+    () =>
+      useTheme({
+        Table: `
      --data-table-library_grid-template-columns: repeat(1, minmax(60px, 1fr)) minmax(80px, auto) 80px 80px 80px 120px;
    `,
-    BaseRow: `
+        BaseRow: `
      font-size: 14px;
      .td {
        height: 32px;
      }
    `,
-    BaseCell: `
+        BaseCell: `
      &:nth-of-type(1) {
        padding: 8px;
      }
@@ -112,7 +120,7 @@ const CustomEntities = () => {
        text-align: center;
      }
    `,
-    HeaderRow: `
+        HeaderRow: `
      text-transform: uppercase;
      background-color: black;
      color: #90CAF9;
@@ -121,7 +129,7 @@ const CustomEntities = () => {
        height: 36px;
      }
    `,
-    Row: `
+        Row: `
      background-color: #1e1e1e;
      position: relative;
      cursor: pointer;
@@ -132,9 +140,11 @@ const CustomEntities = () => {
        background-color: #177ac9;
      }
    `
-  });
+      }),
+    []
+  );

-  const saveEntities = async () => {
+  const saveEntities = useCallback(async () => {
    await writeEntities({
      entities: entities
        .filter((ei: EntityItem) => !ei.deleted)
@@ -163,7 +173,7 @@ const CustomEntities = () => {
        await fetchEntities();
        setNumChanges(0);
      });
-  };
+  }, [entities, writeEntities, LL, fetchEntities]);

  const editEntityItem = useCallback((ei: EntityItem) => {
    setCreating(false);
@@ -171,36 +181,39 @@ const CustomEntities = () => {
    setDialogOpen(true);
  }, []);

-  const onDialogClose = () => {
+  const onDialogClose = useCallback(() => {
    setDialogOpen(false);
-  };
+  }, []);

-  const onDialogCancel = async () => {
+  const onDialogCancel = useCallback(async () => {
    await fetchEntities().then(() => {
      setNumChanges(0);
    });
-  };
+  }, [fetchEntities]);

-  const onDialogSave = (updatedItem: EntityItem) => {
-    setDialogOpen(false);
-    void updateState(readCustomEntities(), (data: EntityItem[]) => {
-      const new_data = creating
-        ? [
-            ...data.filter((ei) => creating || ei.o_id !== updatedItem.o_id),
-            updatedItem
-          ]
-        : data.map((ei) =>
-            ei.id === updatedItem.id ? { ...ei, ...updatedItem } : ei
-          );
-      setNumChanges(new_data.filter((ei) => hasEntityChanged(ei)).length);
-      return new_data;
-    });
-  };
+  const onDialogSave = useCallback(
+    (updatedItem: EntityItem) => {
+      setDialogOpen(false);
+      void updateState(readCustomEntities(), (data: EntityItem[]) => {
+        const new_data = creating
+          ? [
+              ...data.filter((ei) => creating || ei.o_id !== updatedItem.o_id),
+              updatedItem
+            ]
+          : data.map((ei) =>
+              ei.id === updatedItem.id ? { ...ei, ...updatedItem } : ei
+            );
+        setNumChanges(new_data.filter((ei) => hasEntityChanged(ei)).length);
+        return new_data;
+      });
+    },
+    [creating, hasEntityChanged]
+  );

-  const onDialogDup = (item: EntityItem) => {
+  const onDialogDup = useCallback((item: EntityItem) => {
    setCreating(true);
    setSelectedEntityItem({
-      id: Math.floor(Math.random() * (Math.floor(200) - 100) + 100),
+      id: Math.floor(Math.random() * (MAX_ID - MIN_ID) + MIN_ID),
      name: item.name + '_',
      ram: item.ram,
      device_id: item.device_id,
@@ -215,12 +228,12 @@ const CustomEntities = () => {
      value: item.value
    });
    setDialogOpen(true);
-  };
+  }, []);

-  const addEntityItem = () => {
+  const addEntityItem = useCallback(() => {
    setCreating(true);
    setSelectedEntityItem({
-      id: Math.floor(Math.random() * (Math.floor(200) - 100) + 100),
+      id: Math.floor(Math.random() * (MAX_ID - MIN_ID) + MIN_ID),
      name: '',
      ram: 0,
      device_id: '0',
@@ -235,22 +248,30 @@ const CustomEntities = () => {
      value: ''
    });
    setDialogOpen(true);
-  };
+  }, []);

-  function formatValue(value: unknown, uom: number) {
+  const formatValue = useCallback((value: unknown, uom: number) => {
    return value === undefined
      ? ''
      : typeof value === 'number'
        ? new Intl.NumberFormat().format(value) +
-          (uom === 0 ? '' : ' ' + DeviceValueUOM_s[uom])
-        : (value as string) + (uom === 0 ? '' : ' ' + DeviceValueUOM_s[uom]);
-  }
+          (uom === 0 ? '' : ` ${DeviceValueUOM_s[uom]}`)
+        : `${value as string}${uom === 0 ? '' : ` ${DeviceValueUOM_s[uom]}`}`;
+  }, []);

-  function showHex(value: number, digit: number) {
-    return '0x' + value.toString(16).toUpperCase().padStart(digit, '0');
-  }
+  const showHex = useCallback((value: number, digit: number) => {
+    return `0x${value.toString(16).toUpperCase().padStart(digit, '0')}`;
+  }, []);

-  const renderEntity = () => {
+  const filteredAndSortedEntities = useMemo(
+    () =>
+      entities
+        ?.filter((ei: EntityItem) => !ei.deleted)
+        .sort((a: EntityItem, b: EntityItem) => a.name.localeCompare(b.name)) ?? [],
+    [entities]
+  );
+
+  const renderEntity = useCallback(() => {
    if (!entities) {
      return (
        <FormLoader onRetry={fetchEntities} errorMessage={error?.message || ''} />
@@ -260,9 +281,7 @@ const CustomEntities = () => {
    return (
      <Table
        data={{
-          nodes: entities
-            .filter((ei: EntityItem) => !ei.deleted)
-            .sort((a: EntityItem, b: EntityItem) => a.name.localeCompare(b.name))
+          nodes: filteredAndSortedEntities
        }}
        theme={entity_theme}
        layout={{ custom: true }}
@@ -285,7 +304,10 @@ const CustomEntities = () => {
                  <Cell>
                    {ei.name}&nbsp;
                    {ei.writeable && (
-                      <EditOutlinedIcon color="primary" sx={{ fontSize: 12 }} />
+                      <EditOutlinedIcon
+                        color="primary"
+                        sx={{ fontSize: ICON_SIZE }}
+                      />
                    )}
                  </Cell>
                  <Cell>
@@ -304,7 +326,17 @@ const CustomEntities = () => {
        )}
      </Table>
    );
-  };
+  }, [
+    entities,
+    error,
+    fetchEntities,
+    entity_theme,
+    editEntityItem,
+    LL,
+    filteredAndSortedEntities,
+    showHex,
+    formatValue
+  ]);

  return (
    <SectionContent>
--- a/interface/src/app/main/CustomEntitiesDialog.tsx
+++ b/interface/src/app/main/CustomEntitiesDialog.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';

 import AddIcon from '@mui/icons-material/Add';
 import CancelIcon from '@mui/icons-material/Cancel';
@@ -33,6 +33,19 @@ import { validate } from 'validators';
 import { DeviceValueType, DeviceValueTypeNames, DeviceValueUOM_s } from './types';
 import type { EntityItem } from './types';

+// Constant value type options for the dropdown
+const VALUE_TYPE_OPTIONS = [
+  DeviceValueType.BOOL,
+  DeviceValueType.INT8,
+  DeviceValueType.UINT8,
+  DeviceValueType.INT16,
+  DeviceValueType.UINT16,
+  DeviceValueType.UINT24,
+  DeviceValueType.TIME,
+  DeviceValueType.UINT32,
+  DeviceValueType.STRING
+] as const;
+
 interface CustomEntitiesDialogProps {
  open: boolean;
  creating: boolean;
@@ -55,64 +68,97 @@ const CustomEntitiesDialog = ({
  const { LL } = useI18nContext();
  const [editItem, setEditItem] = useState<EntityItem>(selectedItem);
  const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();
-  const updateFormValue = updateValue(setEditItem);
+  const updateFormValue = useMemo(
+    () =>
+      updateValue(
+        setEditItem as unknown as React.Dispatch<
+          React.SetStateAction<Record<string, unknown>>
+        >
+      ),
+    []
+  );

  useEffect(() => {
    if (open) {
      setFieldErrors(undefined);
-      setEditItem(selectedItem);
-      // convert to hex strings straight away
+      // Convert to hex strings - combined into single setEditItem call
+      const deviceIdHex =
+        typeof selectedItem.device_id === 'number'
+          ? selectedItem.device_id.toString(16).toUpperCase()
+          : selectedItem.device_id;
+      const typeIdHex =
+        typeof selectedItem.type_id === 'number'
+          ? selectedItem.type_id.toString(16).toUpperCase()
+          : selectedItem.type_id;
+      const factorValue =
+        selectedItem.value_type === DeviceValueType.BOOL &&
+        typeof selectedItem.factor === 'number'
+          ? selectedItem.factor.toString(16).toUpperCase()
+          : selectedItem.factor;
+
      setEditItem({
        ...selectedItem,
-        device_id: selectedItem.device_id.toString(16).toUpperCase(),
-        type_id: selectedItem.type_id.toString(16).toUpperCase(),
-        factor:
-          selectedItem.value_type === DeviceValueType.BOOL
-            ? selectedItem.factor.toString(16).toUpperCase()
-            : selectedItem.factor
+        device_id: deviceIdHex,
+        type_id: typeIdHex,
+        factor: factorValue
      });
    }
  }, [open, selectedItem]);

-  const handleClose = (
-    _event: React.SyntheticEvent,
-    reason: 'backdropClick' | 'escapeKeyDown'
-  ) => {
-    if (reason !== 'backdropClick') {
-      onClose();
-    }
-  };
+  const handleClose = useCallback(
+    (_event: React.SyntheticEvent, reason: 'backdropClick' | 'escapeKeyDown') => {
+      if (reason !== 'backdropClick') {
+        onClose();
+      }
+    },
+    [onClose]
+  );

-  const save = async () => {
+  const save = useCallback(async () => {
    try {
      setFieldErrors(undefined);
      await validate(validator, editItem);
-      if (typeof editItem.device_id === 'string') {
-        editItem.device_id = parseInt(editItem.device_id, 16);
+
+      // Create a copy to avoid mutating the state directly
+      const processedItem: EntityItem = { ...editItem };
+
+      if (typeof processedItem.device_id === 'string') {
+        processedItem.device_id = Number.parseInt(processedItem.device_id, 16);
      }
-      if (typeof editItem.type_id === 'string') {
-        editItem.type_id = parseInt(editItem.type_id, 16);
+      if (typeof processedItem.type_id === 'string') {
+        processedItem.type_id = Number.parseInt(processedItem.type_id, 16);
      }
      if (
-        editItem.value_type === DeviceValueType.BOOL &&
-        typeof editItem.factor === 'string'
+        processedItem.value_type === DeviceValueType.BOOL &&
+        typeof processedItem.factor === 'string'
      ) {
-        editItem.factor = parseInt(editItem.factor, 16);
+        processedItem.factor = Number.parseInt(processedItem.factor, 16);
      }
-      onSave(editItem);
+      onSave(processedItem);
    } catch (error) {
      setFieldErrors(error as ValidateFieldsError);
    }
-  };
+  }, [validator, editItem, onSave]);

-  const remove = () => {
-    editItem.deleted = true;
-    onSave(editItem);
-  };
+  const remove = useCallback(() => {
+    const itemWithDeleted = { ...editItem, deleted: true };
+    onSave(itemWithDeleted);
+  }, [editItem, onSave]);

-  const dup = () => {
+  const dup = useCallback(() => {
    onDup(editItem);
-  };
+  }, [editItem, onDup]);
+
+  // Memoize UOM menu items to avoid recreating on every render
+  const uomMenuItems = useMemo(
+    () =>
+      DeviceValueUOM_s.map((val, i) => (
+        <MenuItem key={val} value={i}>
+          {val}
+        </MenuItem>
+      )),
+    []
+  );

  return (
    <Dialog sx={dialogStyle} open={open} onClose={handleClose}>
@@ -120,9 +166,6 @@ const CustomEntitiesDialog = ({
        {creating ? LL.ADD(1) + ' ' + LL.NEW(1) : LL.EDIT()}&nbsp;{LL.ENTITY()}
      </DialogTitle>
      <DialogContent dividers>
-        <Box display="flex" flexWrap="wrap" mb={1}>
-          <Box flexWrap="nowrap" whiteSpace="nowrap" />
-        </Box>
        <Grid container spacing={2} rowSpacing={0}>
          <Grid size={12}>
            <ValidatedTextField
@@ -187,11 +230,7 @@ const CustomEntitiesDialog = ({
                  onChange={updateFormValue}
                  select
                >
-                  {DeviceValueUOM_s.map((val, i) => (
-                    <MenuItem key={val} value={i}>
-                      {val}
-                    </MenuItem>
-                  ))}
+                  {uomMenuItems}
                </TextField>
              </Grid>
            </>
@@ -275,33 +314,11 @@ const CustomEntitiesDialog = ({
                  margin="normal"
                  select
                >
-                  <MenuItem value={DeviceValueType.BOOL}>
-                    {DeviceValueTypeNames[DeviceValueType.BOOL]}
-                  </MenuItem>
-                  <MenuItem value={DeviceValueType.INT8}>
-                    {DeviceValueTypeNames[DeviceValueType.INT8]}
-                  </MenuItem>
-                  <MenuItem value={DeviceValueType.UINT8}>
-                    {DeviceValueTypeNames[DeviceValueType.UINT8]}
-                  </MenuItem>
-                  <MenuItem value={DeviceValueType.INT16}>
-                    {DeviceValueTypeNames[DeviceValueType.INT16]}
-                  </MenuItem>
-                  <MenuItem value={DeviceValueType.UINT16}>
-                    {DeviceValueTypeNames[DeviceValueType.UINT16]}
-                  </MenuItem>
-                  <MenuItem value={DeviceValueType.UINT24}>
-                    {DeviceValueTypeNames[DeviceValueType.UINT24]}
-                  </MenuItem>
-                  <MenuItem value={DeviceValueType.TIME}>
-                    {DeviceValueTypeNames[DeviceValueType.TIME]}
-                  </MenuItem>
-                  <MenuItem value={DeviceValueType.UINT32}>
-                    {DeviceValueTypeNames[DeviceValueType.UINT32]}
-                  </MenuItem>
-                  <MenuItem value={DeviceValueType.STRING}>
-                    {DeviceValueTypeNames[DeviceValueType.STRING]}
-                  </MenuItem>
+                  {VALUE_TYPE_OPTIONS.map((valueType) => (
+                    <MenuItem key={valueType} value={valueType}>
+                      {DeviceValueTypeNames[valueType]}
+                    </MenuItem>
+                  ))}
                </TextField>
              </Grid>

@@ -333,11 +350,7 @@ const CustomEntitiesDialog = ({
                        onChange={updateFormValue}
                        select
                      >
-                        {DeviceValueUOM_s.map((val, i) => (
-                          <MenuItem key={val} value={i}>
-                            {val}
-                          </MenuItem>
-                        ))}
+                        {uomMenuItems}
                      </TextField>
                    </Grid>
                  </>
--- a/interface/src/app/main/Customizations.tsx
+++ b/interface/src/app/main/Customizations.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useBlocker, useLocation } from 'react-router';
 import { toast } from 'react-toastify';

@@ -62,7 +62,24 @@ import OptionIcon from './OptionIcon';
 import { DeviceEntityMask } from './types';
 import type { APIcall, Device, DeviceEntity } from './types';

-export const APIURL = window.location.origin + '/api/';
+export const APIURL = `${window.location.origin}/api/`;
+
+const MAX_BUFFER_SIZE = 2000;
+
+// Helper function to create masked entity ID - extracted to avoid duplication
+const createMaskedEntityId = (de: DeviceEntity): string => {
+  const maskHex = de.m.toString(16).padStart(2, '0');
+  const hasCustomizations = !!(de.cn || de.mi || de.ma);
+  const customizations = [
+    de.cn || '',
+    de.mi ? `>${de.mi}` : '',
+    de.ma ? `<${de.ma}` : ''
+  ]
+    .filter(Boolean)
+    .join('');
+
+  return `${maskHex}${de.id}${hasCustomizations ? `|${customizations}` : ''}`;
+};

 const Customizations = () => {
  const { LL } = useI18nContext();
@@ -153,17 +170,19 @@ const Customizations = () => {
    );
  };

-  const entities_theme = useTheme({
-    Table: `
+  const entities_theme = useMemo(
+    () =>
+      useTheme({
+        Table: `
      --data-table-library_grid-template-columns: 156px repeat(1, minmax(80px, 1fr)) 45px minmax(45px, auto) minmax(120px, auto);
    `,
-    BaseRow: `
+        BaseRow: `
      font-size: 14px;
      .td {
        height: 32px;
      }
    `,
-    BaseCell: `
+        BaseCell: `
      &:nth-of-type(3) {
        text-align: right;
      }
@@ -174,7 +193,7 @@ const Customizations = () => {
        text-align: right;
      }
    `,
-    HeaderRow: `
+        HeaderRow: `
      text-transform: uppercase;
      background-color: black;
      color: #90CAF9;
@@ -186,7 +205,7 @@ const Customizations = () => {
        text-align: center;
      }
    `,
-    Row: `
+        Row: `
      background-color: #1e1e1e;
      position: relative;
      cursor: pointer;
@@ -202,7 +221,7 @@ const Customizations = () => {
        background-color: #177ac9;
      }
    `,
-    Cell: `
+        Cell: `
      &:nth-of-type(2) {
        padding: 8px;
      }
@@ -216,7 +235,9 @@ const Customizations = () => {
        padding-right: 8px;
      }
    `
-  });
+      }),
+    []
+  );

  function hasEntityChanged(de: DeviceEntity) {
    return (
@@ -229,19 +250,8 @@ const Customizations = () => {

  useEffect(() => {
    if (deviceEntities.length) {
-      setNumChanges(
-        deviceEntities
-          .filter((de) => hasEntityChanged(de))
-          .map(
-            (new_de) =>
-              new_de.m.toString(16).padStart(2, '0') +
-              new_de.id +
-              (new_de.cn || new_de.mi || new_de.ma ? '|' : '') +
-              (new_de.cn ? new_de.cn : '') +
-              (new_de.mi ? '>' + new_de.mi : '') +
-              (new_de.ma ? '<' + new_de.ma : '')
-          ).length
-      );
+      const changedEntities = deviceEntities.filter((de) => hasEntityChanged(de));
+      setNumChanges(changedEntities.length);
    }
  }, [deviceEntities]);

@@ -275,18 +285,22 @@ const Customizations = () => {
    return value as string;
  }

-  const formatName = (de: DeviceEntity, withShortname: boolean) =>
-    (de.n && de.n[0] === '!'
-      ? de.t
-        ? LL.COMMAND(1) + ': ' + de.t + ' ' + de.n.slice(1)
-        : LL.COMMAND(1) + ': ' + de.n.slice(1)
-      : de.cn && de.cn !== ''
-        ? de.t
-          ? de.t + ' ' + de.cn
-          : de.cn
-        : de.t
-          ? de.t + ' ' + de.n
-          : de.n) + (withShortname ? ' ' + de.id : '');
+  const formatName = useCallback(
+    (de: DeviceEntity, withShortname: boolean) => {
+      let name: string;
+      if (de.n && de.n[0] === '!') {
+        name = de.t
+          ? `${LL.COMMAND(1)}: ${de.t} ${de.n.slice(1)}`
+          : `${LL.COMMAND(1)}: ${de.n.slice(1)}`;
+      } else if (de.cn && de.cn !== '') {
+        name = de.t ? `${de.t} ${de.cn}` : de.cn;
+      } else {
+        name = de.t ? `${de.t} ${de.n}` : de.n || '';
+      }
+      return withShortname ? `${name} ${de.id}` : name;
+    },
+    [LL]
+  );

  const getMaskNumber = (newMask: string[]) => {
    let new_mask = 0;
@@ -316,34 +330,33 @@ const Customizations = () => {
    return new_masks;
  };

-  const filter_entity = (de: DeviceEntity) =>
-    (de.m & selectedFilters || !selectedFilters) &&
-    formatName(de, true).toLowerCase().includes(search.toLowerCase());
+  const filter_entity = useCallback(
+    (de: DeviceEntity) =>
+      (de.m & selectedFilters || !selectedFilters) &&
+      formatName(de, true).toLowerCase().includes(search.toLowerCase()),
+    [selectedFilters, search, formatName]
+  );

-  const maskDisabled = (set: boolean) => {
-    setDeviceEntities(
-      deviceEntities.map(function (de) {
-        if (filter_entity(de)) {
-          return {
-            ...de,
-            m: set
-              ? de.m |
-                (DeviceEntityMask.DV_API_MQTT_EXCLUDE |
-                  DeviceEntityMask.DV_WEB_EXCLUDE)
-              : de.m &
-                ~(
-                  DeviceEntityMask.DV_API_MQTT_EXCLUDE |
-                  DeviceEntityMask.DV_WEB_EXCLUDE
-                )
-          };
-        } else {
+  const maskDisabled = useCallback(
+    (set: boolean) => {
+      setDeviceEntities((prev) =>
+        prev.map((de) => {
+          if (filter_entity(de)) {
+            const excludeMask =
+              DeviceEntityMask.DV_API_MQTT_EXCLUDE | DeviceEntityMask.DV_WEB_EXCLUDE;
+            return {
+              ...de,
+              m: set ? de.m | excludeMask : de.m & ~excludeMask
+            };
+          }
          return de;
-        }
-      })
-    );
-  };
+        })
+      );
+    },
+    [filter_entity]
+  );

-  const resetCustomization = async () => {
+  const resetCustomization = useCallback(async () => {
    try {
      await sendResetCustomizations();
      toast.info(LL.CUSTOMIZATIONS_RESTART());
@@ -352,24 +365,28 @@ const Customizations = () => {
    } finally {
      setConfirmReset(false);
    }
-  };
+  }, [sendResetCustomizations, LL]);

  const onDialogClose = () => {
    setDialogOpen(false);
  };

-  const updateDeviceEntity = (updatedItem: DeviceEntity) => {
+  const updateDeviceEntity = useCallback((updatedItem: DeviceEntity) => {
    setDeviceEntities(
-      deviceEntities?.map((de) =>
-        de.id === updatedItem.id ? { ...de, ...updatedItem } : de
-      )
+      (prev) =>
+        prev?.map((de) =>
+          de.id === updatedItem.id ? { ...de, ...updatedItem } : de
+        ) ?? []
    );
-  };
+  }, []);

-  const onDialogSave = (updatedItem: DeviceEntity) => {
-    setDialogOpen(false);
-    updateDeviceEntity(updatedItem);
-  };
+  const onDialogSave = useCallback(
+    (updatedItem: DeviceEntity) => {
+      setDialogOpen(false);
+      updateDeviceEntity(updatedItem);
+    },
+    [updateDeviceEntity]
+  );

  const editDeviceEntity = useCallback((de: DeviceEntity) => {
    if (de.n === undefined || (de.n && de.n[0] === '!')) {
@@ -384,60 +401,54 @@ const Customizations = () => {
    setDialogOpen(true);
  }, []);

-  const saveCustomization = async () => {
-    if (devices && deviceEntities && selectedDevice !== -1) {
-      const masked_entities = deviceEntities
-        .filter((de: DeviceEntity) => hasEntityChanged(de))
-        .map(
-          (new_de) =>
-            new_de.m.toString(16).padStart(2, '0') +
-            new_de.id +
-            (new_de.cn || new_de.mi || new_de.ma ? '|' : '') +
-            (new_de.cn ? new_de.cn : '') +
-            (new_de.mi ? '>' + new_de.mi : '') +
-            (new_de.ma ? '<' + new_de.ma : '')
-        );
-
-      // check size in bytes to match buffer in CPP, which is 2048
-      const bytes = new TextEncoder().encode(JSON.stringify(masked_entities)).length;
-      if (bytes > 2000) {
-        toast.warning(LL.CUSTOMIZATIONS_FULL());
-        return;
-      }
-
-      await sendCustomizationEntities({
-        id: selectedDevice,
-        entity_ids: masked_entities
-      })
-        .then(() => {
-          toast.success(LL.CUSTOMIZATIONS_SAVED());
-        })
-        .catch((error: Error) => {
-          if (error.message === 'Reboot required') {
-            setRestartNeeded(true);
-          } else {
-            toast.error(error.message);
-          }
-        })
-        .finally(() => {
-          setOriginalSettings(deviceEntities);
-        });
+  const saveCustomization = useCallback(async () => {
+    if (!devices || !deviceEntities || selectedDevice === -1) {
+      return;
    }
-  };

-  const renameDevice = async () => {
+    const masked_entities = deviceEntities
+      .filter((de: DeviceEntity) => hasEntityChanged(de))
+      .map((new_de) => createMaskedEntityId(new_de));
+
+    // check size in bytes to match buffer in CPP, which is 2048
+    const bytes = new TextEncoder().encode(JSON.stringify(masked_entities)).length;
+    if (bytes > MAX_BUFFER_SIZE) {
+      toast.warning(LL.CUSTOMIZATIONS_FULL());
+      return;
+    }
+
+    await sendCustomizationEntities({
+      id: selectedDevice,
+      entity_ids: masked_entities
+    })
+      .then(() => {
+        toast.success(LL.CUSTOMIZATIONS_SAVED());
+      })
+      .catch((error: Error) => {
+        if (error.message === 'Reboot required') {
+          setRestartNeeded(true);
+        } else {
+          toast.error(error.message);
+        }
+      })
+      .finally(() => {
+        setOriginalSettings(deviceEntities);
+      });
+  }, [devices, deviceEntities, selectedDevice, sendCustomizationEntities, LL]);
+
+  const renameDevice = useCallback(async () => {
    await sendDeviceName({ id: selectedDevice, name: selectedDeviceName })
      .then(() => {
        toast.success(LL.UPDATED_OF(LL.NAME(1)));
      })
      .catch(() => {
-        toast.error(LL.UPDATE_OF(LL.NAME(1)) + ' ' + LL.FAILED(1));
+        toast.error(`${LL.UPDATE_OF(LL.NAME(1))} ${LL.FAILED(1)}`);
      })
      .finally(async () => {
        setRename(false);
        await fetchCoreData();
      });
-  };
+  }, [selectedDevice, selectedDeviceName, sendDeviceName, LL, fetchCoreData]);

  const renderDeviceList = () => (
    <>
@@ -512,9 +523,12 @@ const Customizations = () => {
    </>
  );

-  const renderDeviceData = () => {
-    const shown_data = deviceEntities.filter((de) => filter_entity(de));
+  const filteredEntities = useMemo(
+    () => deviceEntities.filter((de) => filter_entity(de)),
+    [deviceEntities, filter_entity]
+  );

+  const renderDeviceData = () => {
    return (
      <>
        <Box color="warning.main">
@@ -544,6 +558,7 @@ const Customizations = () => {
              size="small"
              variant="outlined"
              placeholder={LL.SEARCH()}
+              aria-label={LL.SEARCH()}
              onChange={(event) => {
                setSearch(event.target.value);
              }}
@@ -612,13 +627,13 @@ const Customizations = () => {
          </Grid>
          <Grid>
            <Typography variant="subtitle2" color="grey">
-              {LL.SHOWING()}&nbsp;{shown_data.length}/{deviceEntities.length}
+              {LL.SHOWING()}&nbsp;{filteredEntities.length}/{deviceEntities.length}
              &nbsp;{LL.ENTITIES(deviceEntities.length)}
            </Typography>
          </Grid>
        </Grid>
        <Table
-          data={{ nodes: shown_data }}
+          data={{ nodes: filteredEntities }}
          theme={entities_theme}
          layout={{ custom: true }}
        >
@@ -719,7 +734,11 @@ const Customizations = () => {
                  startIcon={<CancelIcon />}
                  variant="outlined"
                  color="secondary"
-                  onClick={() => devices && sendDeviceEntities(selectedDevice)}
+                  onClick={() => {
+                    if (devices) {
+                      void sendDeviceEntities(selectedDevice);
+                    }
+                  }}
                >
                  {LL.CANCEL()}
                </Button>
--- a/interface/src/app/main/CustomizationsDialog.tsx
+++ b/interface/src/app/main/CustomizationsDialog.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { memo, useCallback, useEffect, useMemo, useState } from 'react';

 import CancelIcon from '@mui/icons-material/Cancel';
 import CloseIcon from '@mui/icons-material/Close';
@@ -30,6 +30,23 @@ interface SettingsCustomizationsDialogProps {
  selectedItem: DeviceEntity;
 }

+interface LabelValueProps {
+  label: string;
+  value: React.ReactNode;
+}
+
+const LabelValue = memo(({ label, value }: LabelValueProps) => (
+  <Grid container direction="row">
+    <Typography variant="body2" color="warning.main">
+      {label}:&nbsp;
+    </Typography>
+    <Typography variant="body2">{value}</Typography>
+  </Grid>
+));
+LabelValue.displayName = 'LabelValue';
+
+const ICON_SIZE = 16;
+
 const CustomizationsDialog = ({
  open,
  onClose,
@@ -40,12 +57,23 @@ const CustomizationsDialog = ({
  const [editItem, setEditItem] = useState<DeviceEntity>(selectedItem);
  const [error, setError] = useState<boolean>(false);

-  const updateFormValue = updateValue(setEditItem);
+  const updateFormValue = useMemo(
+    () =>
+      updateValue(
+        setEditItem as unknown as React.Dispatch<
+          React.SetStateAction<Record<string, unknown>>
+        >
+      ),
+    []
+  );

-  const isWriteableNumber =
-    typeof editItem.v === 'number' &&
-    editItem.w &&
-    !(editItem.m & DeviceEntityMask.DV_READONLY);
+  const isWriteableNumber = useMemo(
+    () =>
+      typeof editItem.v === 'number' &&
+      editItem.w &&
+      !(editItem.m & DeviceEntityMask.DV_READONLY),
+    [editItem.v, editItem.w, editItem.m]
+  );

  useEffect(() => {
    if (open) {
@@ -54,66 +82,59 @@ const CustomizationsDialog = ({
    }
  }, [open, selectedItem]);

-  const handleClose = (
-    _event: React.SyntheticEvent,
-    reason: 'backdropClick' | 'escapeKeyDown'
-  ) => {
-    if (reason !== 'backdropClick') {
-      onClose();
-    }
-  };
+  const handleClose = useCallback(
+    (_event: React.SyntheticEvent, reason: 'backdropClick' | 'escapeKeyDown') => {
+      if (reason !== 'backdropClick') {
+        onClose();
+      }
+    },
+    [onClose]
+  );

-  const save = () => {
+  const save = useCallback(() => {
    if (
      isWriteableNumber &&
      editItem.mi &&
      editItem.ma &&
-      editItem.mi > editItem?.ma
+      editItem.mi > editItem.ma
    ) {
      setError(true);
    } else {
      onSave(editItem);
    }
-  };
+  }, [isWriteableNumber, editItem, onSave]);

-  const updateDeviceEntity = (updatedItem: DeviceEntity) => {
-    setEditItem({ ...editItem, m: updatedItem.m });
-  };
+  const updateDeviceEntity = useCallback((updatedItem: DeviceEntity) => {
+    setEditItem((prev) => ({ ...prev, m: updatedItem.m }));
+  }, []);
+
+  const dialogTitle = useMemo(() => `${LL.EDIT()} ${LL.ENTITY()}`, [LL]);
+
+  const writeableIcon = useMemo(
+    () =>
+      editItem.w ? (
+        <DoneIcon color="success" sx={{ fontSize: ICON_SIZE }} />
+      ) : (
+        <CloseIcon color="error" sx={{ fontSize: ICON_SIZE }} />
+      ),
+    [editItem.w]
+  );

  return (
    <Dialog sx={dialogStyle} open={open} onClose={handleClose}>
-      <DialogTitle>{LL.EDIT() + ' ' + LL.ENTITY()}</DialogTitle>
+      <DialogTitle>{dialogTitle}</DialogTitle>
      <DialogContent dividers>
-        <Grid container>
-          <Typography variant="body2" color="warning.main">
-            {LL.ID_OF(LL.ENTITY())}:&nbsp;
-          </Typography>
-          <Typography variant="body2">{editItem.id}</Typography>
-        </Grid>
-
-        <Grid container direction="row">
-          <Typography variant="body2" color="warning.main">
-            {LL.DEFAULT(1) + ' ' + LL.ENTITY_NAME(1)}:&nbsp;
-          </Typography>
-          <Typography variant="body2">{editItem.n}</Typography>
-        </Grid>
-
-        <Grid container direction="row">
-          <Typography variant="body2" color="warning.main">
-            {LL.WRITEABLE()}:&nbsp;
-          </Typography>
-          <Typography variant="body2">
-            {editItem.w ? (
-              <DoneIcon color="success" sx={{ fontSize: 16 }} />
-            ) : (
-              <CloseIcon color="error" sx={{ fontSize: 16 }} />
-            )}
-          </Typography>
-        </Grid>
+        <LabelValue label={LL.ID_OF(LL.ENTITY())} value={editItem.id} />
+        <LabelValue
+          label={`${LL.DEFAULT(1)} ${LL.ENTITY_NAME(1)}`}
+          value={editItem.n}
+        />
+        <LabelValue label={LL.WRITEABLE()} value={writeableIcon} />

        <Box mt={1} mb={2}>
          <EntityMaskToggle onUpdate={updateDeviceEntity} de={editItem} />
        </Box>
+
        <Grid container spacing={2}>
          <Grid>
            <TextField
@@ -149,12 +170,14 @@ const CustomizationsDialog = ({
            </>
          )}
        </Grid>
+
        {error && (
          <Typography variant="body2" color="error" mt={2}>
            Error: Check min and max values
          </Typography>
        )}
      </DialogContent>
+
      <DialogActions>
        <Button
          startIcon={<CancelIcon />}
--- a/interface/src/app/main/Dashboard.tsx
+++ b/interface/src/app/main/Dashboard.tsx
@@ -133,7 +133,7 @@ const Dashboard = memo(() => {
  );

  const tree = useTree(
-    { nodes: data.nodes },
+    { nodes: [...data.nodes] },
    {
      onChange: () => {} // not used but needed
    },
@@ -364,6 +364,9 @@ const Dashboard = memo(() => {
                                  ) && (
                                    <IconButton
                                      size="small"
+                                      aria-label={
+                                        LL.CHANGE_VALUE() + ' ' + LL.VALUE(0)
+                                      }
                                      onClick={() => editDashboardValue(di)}
                                    >
                                      <EditIcon
--- a/interface/src/app/main/DeviceIcon.tsx
+++ b/interface/src/app/main/DeviceIcon.tsx
@@ -1,13 +1,14 @@
+import { memo } from 'react';
 import { AiOutlineAlert, AiOutlineControl, AiOutlineGateway } from 'react-icons/ai';
 import { CgSmartHomeBoiler } from 'react-icons/cg';
 import { FaSolarPanel } from 'react-icons/fa';
 import { GiHeatHaze, GiTap } from 'react-icons/gi';
-import { MdPlaylistAdd } from 'react-icons/md';
-import { MdMoreTime } from 'react-icons/md';
 import {
+  MdMoreTime,
  MdOutlineDevices,
  MdOutlinePool,
  MdOutlineSensors,
+  MdPlaylistAdd,
  MdThermostatAuto
 } from 'react-icons/md';
 import { PiFan, PiGauge } from 'react-icons/pi';
@@ -18,9 +19,10 @@ import type { SvgIconProps } from '@mui/material';

 import { DeviceType } from './types';

-const deviceIconLookup: {
-  [key in DeviceType]: React.ComponentType<SvgIconProps> | undefined;
-} = {
+const deviceIconLookup: Record<
+  DeviceType,
+  React.ComponentType<SvgIconProps> | null
+> = {
  [DeviceType.TEMPERATURESENSOR]: TiThermometer,
  [DeviceType.ANALOGSENSOR]: PiGauge,
  [DeviceType.BOILER]: CgSmartHomeBoiler,
@@ -39,15 +41,19 @@ const deviceIconLookup: {
  [DeviceType.POOL]: MdOutlinePool,
  [DeviceType.CUSTOM]: MdPlaylistAdd,
  [DeviceType.UNKNOWN]: MdOutlineSensors,
-  [DeviceType.SYSTEM]: undefined,
+  [DeviceType.SYSTEM]: null,
  [DeviceType.SCHEDULER]: MdMoreTime,
  [DeviceType.GENERIC]: MdOutlineSensors,
  [DeviceType.VENTILATION]: PiFan
 };

-const DeviceIcon = ({ type_id }: { type_id: DeviceType }) => {
+interface DeviceIconProps {
+  type_id: DeviceType;
+}
+
+const DeviceIcon = memo(({ type_id }: DeviceIconProps) => {
  const Icon = deviceIconLookup[type_id];
  return Icon ? <Icon /> : null;
-};
+});

 export default DeviceIcon;
--- a/interface/src/app/main/Devices.tsx
+++ b/interface/src/app/main/Devices.tsx
@@ -93,7 +93,7 @@ const Devices = memo(() => {

  useLayoutTitle(LL.DEVICES());

-  const { data: coreData, send: sendCoreData } = useRequest(() => readCoreData(), {
+  const { data: coreData, send: sendCoreData } = useRequest(readCoreData, {
    initialData: {
      connected: true,
      devices: []
@@ -118,30 +118,28 @@ const Devices = memo(() => {
  );

  useLayoutEffect(() => {
-    function updateSize() {
-      setSize([window.innerWidth, window.innerHeight]);
-    }
+    let raf = 0;
+    const updateSize = () => {
+      cancelAnimationFrame(raf);
+      raf = requestAnimationFrame(() => {
+        setSize([window.innerWidth, window.innerHeight]);
+      });
+    };
    window.addEventListener('resize', updateSize);
    updateSize();
-    return () => window.removeEventListener('resize', updateSize);
+    return () => {
+      window.removeEventListener('resize', updateSize);
+      cancelAnimationFrame(raf);
+    };
  }, []);

-  const leftOffset = () => {
+  const leftOffset = useCallback(() => {
    const devicesWindow = document.getElementById('devices-window');
-    if (!devicesWindow) {
-      return 0;
-    }
-
-    const clientRect = devicesWindow.getBoundingClientRect();
-    const left = clientRect.left;
-    const right = clientRect.right;
-
-    if (!left || !right) {
-      return 0;
-    }
-
+    if (!devicesWindow) return 0;
+    const { left, right } = devicesWindow.getBoundingClientRect();
+    if (!left || !right) return 0;
    return left + (right - left < 400 ? 0 : 200);
-  };
+  }, []);

  const common_theme = useMemo(
    () =>
@@ -261,7 +259,7 @@ const Devices = memo(() => {
  };

  const dv_sort = useSort(
-    { nodes: deviceData.nodes },
+    { nodes: [...deviceData.nodes] },
    {},
    {
      sortIcon: {
@@ -291,7 +289,7 @@ const Devices = memo(() => {
  }

  const device_select = useRowSelect(
-    { nodes: coreData.devices },
+    { nodes: [...coreData.devices] },
    {
      onChange: onSelectChange
    }
@@ -549,7 +547,7 @@ const Devices = memo(() => {

          {coreData.connected && (
            <Table
-              data={{ nodes: coreData.devices }}
+              data={{ nodes: [...coreData.devices] }}
              select={device_select}
              theme={device_theme}
              layout={{ custom: true }}
@@ -654,7 +652,7 @@ const Devices = memo(() => {
        sx={{
          backgroundColor: 'black',
          position: 'absolute',
-          left: () => leftOffset(),
+          left: leftOffset,
          right: 0,
          bottom: 0,
          top: 64,
@@ -671,7 +669,7 @@ const Devices = memo(() => {
            </Typography>
            <Grid justifyContent="flex-end">
              <ButtonTooltip title={LL.CLOSE()}>
-                <IconButton onClick={resetDeviceSelect}>
+                <IconButton onClick={resetDeviceSelect} aria-label={LL.CLOSE()}>
                  <HighlightOffIcon color="primary" sx={{ fontSize: 18 }} />
                </IconButton>
              </ButtonTooltip>
@@ -683,6 +681,7 @@ const Devices = memo(() => {
            variant="outlined"
            sx={{ width: '22ch' }}
            placeholder={LL.SEARCH()}
+            aria-label={LL.SEARCH()}
            onChange={(event) => {
              setSearch(event.target.value);
            }}
@@ -697,19 +696,22 @@ const Devices = memo(() => {
            }}
          />
          <ButtonTooltip title={LL.DEVICE_DETAILS()}>
-            <IconButton onClick={() => setShowDeviceInfo(true)}>
+            <IconButton
+              onClick={() => setShowDeviceInfo(true)}
+              aria-label={LL.DEVICE_DETAILS()}
+            >
              <InfoOutlinedIcon color="primary" sx={{ fontSize: 18 }} />
            </IconButton>
          </ButtonTooltip>
          {me.admin && (
            <ButtonTooltip title={LL.CUSTOMIZATIONS()}>
-              <IconButton onClick={customize}>
+              <IconButton onClick={customize} aria-label={LL.CUSTOMIZATIONS()}>
                <ConstructionIcon color="primary" sx={{ fontSize: 18 }} />
              </IconButton>
            </ButtonTooltip>
          )}
          <ButtonTooltip title={LL.EXPORT()}>
-            <IconButton onClick={handleDownloadCsv}>
+            <IconButton onClick={handleDownloadCsv} aria-label={LL.EXPORT()}>
              <DownloadIcon color="primary" sx={{ fontSize: 18 }} />
            </IconButton>
          </ButtonTooltip>
@@ -744,7 +746,7 @@ const Devices = memo(() => {
        </Box>

        <Table
-          data={{ nodes: shown_data }}
+          data={{ nodes: Array.from(shown_data) }}
          theme={data_theme}
          sort={dv_sort}
          layout={{ custom: true, fixedHeader: true }}
--- a/interface/src/app/main/DevicesDialog.tsx
+++ b/interface/src/app/main/DevicesDialog.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';

 import CancelIcon from '@mui/icons-material/Cancel';
 import WarningIcon from '@mui/icons-material/Warning';
@@ -52,7 +52,7 @@ const DevicesDialog = ({
  const [editItem, setEditItem] = useState<DeviceValue>(selectedItem);
  const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();

-  const updateFormValue = updateValue(setEditItem);
+  const updateFormValue = useMemo(() => updateValue(setEditItem), [setEditItem]);

  useEffect(() => {
    if (open) {
@@ -61,11 +61,7 @@ const DevicesDialog = ({
    }
  }, [open, selectedItem]);

-  const close = () => {
-    onClose();
-  };
-
-  const save = async () => {
+  const save = useCallback(async () => {
    try {
      setFieldErrors(undefined);
      await validate(validator, editItem);
@@ -73,46 +69,66 @@ const DevicesDialog = ({
    } catch (error) {
      setFieldErrors(error as ValidateFieldsError);
    }
-  };
+  }, [validator, editItem, onSave]);

-  const setUom = (uom?: DeviceValueUOM) => {
-    if (uom === undefined) {
-      return;
-    }
-    switch (uom) {
-      case DeviceValueUOM.HOURS:
-        return LL.HOURS();
-      case DeviceValueUOM.MINUTES:
-        return LL.MINUTES();
-      case DeviceValueUOM.SECONDS:
-        return LL.SECONDS();
-      default:
-        return DeviceValueUOM_s[uom];
-    }
-  };
+  const setUom = useCallback(
+    (uom?: DeviceValueUOM) => {
+      if (uom === undefined) {
+        return;
+      }
+      switch (uom) {
+        case DeviceValueUOM.HOURS:
+          return LL.HOURS();
+        case DeviceValueUOM.MINUTES:
+          return LL.MINUTES();
+        case DeviceValueUOM.SECONDS:
+          return LL.SECONDS();
+        default:
+          return DeviceValueUOM_s[uom];
+      }
+    },
+    [LL]
+  );

-  const showHelperText = (dv: DeviceValue) =>
-    dv.h ? (
-      dv.h
-    ) : dv.l ? (
-      dv.l.join(' | ')
-    ) : dv.m !== undefined && dv.x !== undefined ? (
-      <>
-        {dv.m}&nbsp;&rarr;&nbsp;{dv.x}
-      </>
-    ) : undefined;
+  const showHelperText = useCallback((dv: DeviceValue) => {
+    if (dv.h) return dv.h;
+    if (dv.l) return dv.l.join(' | ');
+    if (dv.m !== undefined && dv.x !== undefined) {
+      return (
+        <>
+          {dv.m}&nbsp;&rarr;&nbsp;{dv.x}
+        </>
+      );
+    }
+    return undefined;
+  }, []);
+
+  const isCommand = useMemo(
+    () => selectedItem.v === '' && selectedItem.c,
+    [selectedItem.v, selectedItem.c]
+  );
+
+  const dialogTitle = useMemo(() => {
+    if (isCommand) return LL.RUN_COMMAND();
+    return writeable ? LL.CHANGE_VALUE() : LL.VALUE(0);
+  }, [isCommand, writeable, LL]);
+
+  const buttonLabel = useMemo(() => {
+    return isCommand ? LL.EXECUTE() : LL.UPDATE();
+  }, [isCommand, LL]);
+
+  const helperText = useMemo(
+    () => showHelperText(editItem),
+    [editItem, showHelperText]
+  );
+
+  const valueLabel = LL.VALUE(0);

  return (
-    <Dialog sx={dialogStyle} open={open} onClose={close}>
-      <DialogTitle>
-        {selectedItem.v === '' && selectedItem.c
-          ? LL.RUN_COMMAND()
-          : writeable
-            ? LL.CHANGE_VALUE()
-            : LL.VALUE(0)}
-      </DialogTitle>
+    <Dialog sx={dialogStyle} open={open} onClose={onClose}>
+      <DialogTitle>{dialogTitle}</DialogTitle>
      <DialogContent dividers>
-        <Box color="warning.main" p={0} pl={0} pr={0} mt={0} mb={2}>
+        <Box color="warning.main" mb={2}>
          <Typography variant="body2">{editItem.id.slice(2)}</Typography>
        </Box>
        <Grid container>
@@ -120,8 +136,8 @@ const DevicesDialog = ({
            {editItem.l ? (
              <TextField
                name="v"
-                // label={LL.VALUE(0)}
                value={editItem.v}
+                aria-label={valueLabel}
                disabled={!writeable}
                sx={{ width: '30ch' }}
                select
@@ -137,7 +153,7 @@ const DevicesDialog = ({
              <ValidatedTextField
                fieldErrors={fieldErrors || {}}
                name="v"
-                label={LL.VALUE(0)}
+                label={valueLabel}
                value={numberValue(Math.round((editItem.v as number) * 10) / 10)}
                autoFocus
                disabled={!writeable}
@@ -161,7 +177,7 @@ const DevicesDialog = ({
              <ValidatedTextField
                fieldErrors={fieldErrors || {}}
                name="v"
-                label={LL.VALUE(0)}
+                label={valueLabel}
                value={editItem.v}
                disabled={!writeable}
                sx={{ width: '30ch' }}
@@ -170,9 +186,9 @@ const DevicesDialog = ({
              />
            )}
          </Grid>
-          {writeable && (
+          {writeable && helperText && (
            <Grid>
-              <FormHelperText>{showHelperText(editItem)}</FormHelperText>
+              <FormHelperText>{helperText}</FormHelperText>
            </Grid>
          )}
        </Grid>
@@ -191,7 +207,7 @@ const DevicesDialog = ({
            <Button
              startIcon={<CancelIcon />}
              variant="outlined"
-              onClick={close}
+              onClick={onClose}
              color="secondary"
            >
              {LL.CANCEL()}
@@ -202,7 +218,7 @@ const DevicesDialog = ({
              onClick={save}
              color="primary"
            >
-              {selectedItem.v === '' && selectedItem.c ? LL.EXECUTE() : LL.UPDATE()}
+              {buttonLabel}
            </Button>
            {progress && (
              <CircularProgress
@@ -217,7 +233,7 @@ const DevicesDialog = ({
            )}
          </Box>
        ) : (
-          <Button variant="outlined" onClick={close} color="secondary">
+          <Button variant="outlined" onClick={onClose} color="secondary">
            {LL.CLOSE()}
          </Button>
        )}
--- a/interface/src/app/main/EntityMaskToggle.tsx
+++ b/interface/src/app/main/EntityMaskToggle.tsx
@@ -1,3 +1,5 @@
+import { useCallback, useMemo } from 'react';
+
 import { ToggleButton, ToggleButtonGroup } from '@mui/material';

 import OptionIcon from './OptionIcon';
@@ -9,92 +11,132 @@ interface EntityMaskToggleProps {
  de: DeviceEntity;
 }

-const EntityMaskToggle = ({ onUpdate, de }: EntityMaskToggleProps) => {
-  const getMaskNumber = (newMask: string[]) => {
-    let new_mask = 0;
-    for (const entry of newMask) {
-      new_mask |= Number(entry);
-    }
-    return new_mask;
-  };
+// Available mask values
+const MASK_VALUES = [
+  DeviceEntityMask.DV_WEB_EXCLUDE, // 1
+  DeviceEntityMask.DV_API_MQTT_EXCLUDE, // 2
+  DeviceEntityMask.DV_READONLY, // 4
+  DeviceEntityMask.DV_FAVORITE, // 8
+  DeviceEntityMask.DV_DELETED // 128
+];

-  const getMaskString = (m: number) => {
-    const new_masks: string[] = [];
-    if ((m & 1) === 1) {
-      new_masks.push('1');
-    }
-    if ((m & 2) === 2) {
-      new_masks.push('2');
-    }
-    if ((m & 4) === 4) {
-      new_masks.push('4');
-    }
-    if ((m & 8) === 8) {
-      new_masks.push('8');
-    }
-    if ((m & 128) === 128) {
-      new_masks.push('128');
-    }
-    return new_masks;
-  };
+/**
+ * Converts an array of mask strings to a bitmask number
+ */
+const getMaskNumber = (newMask: string[]): number => {
+  return newMask.reduce((mask, entry) => mask | Number(entry), 0);
+};
+
+/**
+ * Converts a bitmask number to an array of mask strings
+ */
+const getMaskString = (mask: number): string[] => {
+  return MASK_VALUES.filter((value) => (mask & value) === value).map((value) =>
+    String(value)
+  );
+};
+
+/**
+ * Checks if a specific mask bit is set
+ */
+const hasMask = (mask: number, flag: number): boolean => (mask & flag) === flag;
+
+const EntityMaskToggle = ({ onUpdate, de }: EntityMaskToggleProps) => {
+  const handleChange = useCallback(
+    (_event: unknown, mask: string[]) => {
+      // Convert selected masks to a number
+      const newMask = getMaskNumber(mask);
+      const updatedDe = { ...de };
+
+      // Apply business logic for mask interactions
+      // If entity has no name and is set to readonly, also exclude from web
+      if (updatedDe.n === '' && hasMask(newMask, DeviceEntityMask.DV_READONLY)) {
+        updatedDe.m = newMask | DeviceEntityMask.DV_WEB_EXCLUDE;
+      } else {
+        updatedDe.m = newMask;
+      }
+
+      // If excluded from web, cannot be favorite
+      if (hasMask(updatedDe.m, DeviceEntityMask.DV_WEB_EXCLUDE)) {
+        updatedDe.m = updatedDe.m & ~DeviceEntityMask.DV_FAVORITE;
+      }
+
+      onUpdate(updatedDe);
+    },
+    [de, onUpdate]
+  );
+
+  // Memoize mask string value
+  const maskStringValue = useMemo(() => getMaskString(de.m), [de.m]);
+
+  // Memoize disabled states
+  const isFavoriteDisabled = useMemo(
+    () =>
+      hasMask(de.m, DeviceEntityMask.DV_WEB_EXCLUDE | DeviceEntityMask.DV_DELETED) ||
+      de.n === undefined,
+    [de.m, de.n]
+  );
+
+  const isReadonlyDisabled = useMemo(
+    () =>
+      !de.w ||
+      hasMask(de.m, DeviceEntityMask.DV_WEB_EXCLUDE | DeviceEntityMask.DV_FAVORITE),
+    [de.w, de.m]
+  );
+
+  const isApiMqttExcludeDisabled = useMemo(
+    () => de.n === '' || hasMask(de.m, DeviceEntityMask.DV_DELETED),
+    [de.n, de.m]
+  );
+
+  const isWebExcludeDisabled = useMemo(
+    () => de.n === undefined || hasMask(de.m, DeviceEntityMask.DV_DELETED),
+    [de.n, de.m]
+  );
+
+  // Memoize mask flag checks
+  const isFavoriteSet = useMemo(
+    () => hasMask(de.m, DeviceEntityMask.DV_FAVORITE),
+    [de.m]
+  );
+  const isReadonlySet = useMemo(
+    () => hasMask(de.m, DeviceEntityMask.DV_READONLY),
+    [de.m]
+  );
+  const isApiMqttExcludeSet = useMemo(
+    () => hasMask(de.m, DeviceEntityMask.DV_API_MQTT_EXCLUDE),
+    [de.m]
+  );
+  const isWebExcludeSet = useMemo(
+    () => hasMask(de.m, DeviceEntityMask.DV_WEB_EXCLUDE),
+    [de.m]
+  );
+  const isDeletedSet = useMemo(
+    () => hasMask(de.m, DeviceEntityMask.DV_DELETED),
+    [de.m]
+  );

  return (
    <ToggleButtonGroup
      size="small"
      color="secondary"
-      value={getMaskString(de.m)}
-      onChange={(_event, mask: string[]) => {
-        de.m = getMaskNumber(mask);
-        if (de.n === '' && de.m & DeviceEntityMask.DV_READONLY) {
-          de.m = de.m | DeviceEntityMask.DV_WEB_EXCLUDE;
-        }
-        if (de.m & DeviceEntityMask.DV_WEB_EXCLUDE) {
-          de.m = de.m & ~DeviceEntityMask.DV_FAVORITE;
-        }
-        onUpdate(de);
-      }}
+      value={maskStringValue}
+      onChange={handleChange}
    >
-      <ToggleButton value="8" disabled={(de.m & 0x81) !== 0 || de.n === undefined}>
-        <OptionIcon
-          type="favorite"
-          isSet={
-            (de.m & DeviceEntityMask.DV_FAVORITE) === DeviceEntityMask.DV_FAVORITE
-          }
-        />
+      <ToggleButton value="8" disabled={isFavoriteDisabled}>
+        <OptionIcon type="favorite" isSet={isFavoriteSet} />
      </ToggleButton>
-      <ToggleButton value="4" disabled={!de.w || (de.m & 0x83) >= 3}>
-        <OptionIcon
-          type="readonly"
-          isSet={
-            (de.m & DeviceEntityMask.DV_READONLY) === DeviceEntityMask.DV_READONLY
-          }
-        />
+      <ToggleButton value="4" disabled={isReadonlyDisabled}>
+        <OptionIcon type="readonly" isSet={isReadonlySet} />
      </ToggleButton>
-      <ToggleButton value="2" disabled={de.n === '' || (de.m & 0x80) !== 0}>
-        <OptionIcon
-          type="api_mqtt_exclude"
-          isSet={
-            (de.m & DeviceEntityMask.DV_API_MQTT_EXCLUDE) ===
-            DeviceEntityMask.DV_API_MQTT_EXCLUDE
-          }
-        />
+      <ToggleButton value="2" disabled={isApiMqttExcludeDisabled}>
+        <OptionIcon type="api_mqtt_exclude" isSet={isApiMqttExcludeSet} />
      </ToggleButton>
-      <ToggleButton value="1" disabled={de.n === undefined || (de.m & 0x80) !== 0}>
-        <OptionIcon
-          type="web_exclude"
-          isSet={
-            (de.m & DeviceEntityMask.DV_WEB_EXCLUDE) ===
-            DeviceEntityMask.DV_WEB_EXCLUDE
-          }
-        />
+      <ToggleButton value="1" disabled={isWebExcludeDisabled}>
+        <OptionIcon type="web_exclude" isSet={isWebExcludeSet} />
      </ToggleButton>
      <ToggleButton value="128">
-        <OptionIcon
-          type="deleted"
-          isSet={
-            (de.m & DeviceEntityMask.DV_DELETED) === DeviceEntityMask.DV_DELETED
-          }
-        />
+        <OptionIcon type="deleted" isSet={isDeletedSet} />
      </ToggleButton>
    </ToggleButtonGroup>
  );
--- a/interface/src/app/main/Help.tsx
+++ b/interface/src/app/main/Help.tsx
@@ -1,4 +1,5 @@
-import { useContext, useState } from 'react';
+import { memo, useCallback, useContext, useMemo, useState } from 'react';
+import type { ReactElement } from 'react';
 import { toast } from 'react-toastify';

 import CommentIcon from '@mui/icons-material/CommentTwoTone';
@@ -19,6 +20,7 @@ import {
  Stack,
  Typography
 } from '@mui/material';
+import type { SxProps, Theme } from '@mui/material/styles';

 import { useRequest } from 'alova/client';
 import { SectionContent, useLayoutTitle } from 'components';
@@ -29,26 +31,62 @@ import { saveFile } from 'utils';
 import { API, callAction } from '../../api/app';
 import type { APIcall } from './types';

-const Help = () => {
+interface HelpLink {
+  href: string;
+  icon: ReactElement;
+  label: () => string;
+}
+
+interface CustomSupport {
+  img_url: string | null;
+  html: string | null;
+}
+
+// Constants moved outside component to prevent recreation
+const DEFAULT_IMAGE_URL = 'https://docs.emsesp.org/_media/images/installer.jpeg';
+
+const SUPPORT_BOX_STYLES: SxProps<Theme> = {
+  borderRadius: 3,
+  border: '1px solid lightblue',
+  justifyContent: 'space-evenly',
+  alignItems: 'center'
+};
+
+const IMAGE_STYLES: SxProps<Theme> = {
+  maxHeight: { xs: 100, md: 250 }
+};
+
+const AVATAR_STYLES: SxProps<Theme> = {
+  bgcolor: '#72caf9'
+};
+
+const HelpComponent = () => {
  const { LL } = useI18nContext();
  useLayoutTitle(LL.HELP());

  const { me } = useContext(AuthenticatedContext);

-  const [customSupportIMG, setCustomSupportIMG] = useState<string | null>(null);
-  const [customSupportHTML, setCustomSupportHTML] = useState<string | null>(null);
-  const [notFound, setNotFound] = useState<boolean>(false);
+  const [customSupport, setCustomSupport] = useState<CustomSupport>({
+    img_url: null,
+    html: null
+  });
+  const [imgError, setImgError] = useState<boolean>(false);

-  useRequest(() => callAction({ action: 'getCustomSupport' })).onSuccess((event) => {
-    if (event && event.data && Object.keys(event.data).length !== 0) {
-      const data = (event.data as { Support: { img_url?: string; html?: string[] } })
-        .Support;
-      if (data.img_url) {
-        setCustomSupportIMG(data.img_url);
-      }
-      if (data.html) {
-        setCustomSupportHTML(data.html.join('<br/>'));
-      }
+  // Memoize the request method to prevent re-creation on every render
+  const getCustomSupportMethod = useMemo(
+    () => callAction({ action: 'getCustomSupport' }),
+    []
+  );
+
+  useRequest(getCustomSupportMethod).onSuccess((event) => {
+    if (event?.data && Object.keys(event.data).length !== 0) {
+      const { Support } = event.data as {
+        Support: { img_url?: string; html?: string[] };
+      };
+      setCustomSupport({
+        img_url: Support.img_url || null,
+        html: Support.html?.join('<br/>') || null
+      });
    }
  });

@@ -63,90 +101,88 @@ const Help = () => {
      toast.error(String(error.error?.message || 'An error occurred'));
    });

+  // Optimize API call memoization
+  const apiCall = useMemo(() => ({ device: 'system', cmd: 'info', id: 0 }), []);
+
+  const handleDownloadSystemInfo = useCallback(() => {
+    void sendAPI(apiCall);
+  }, [sendAPI, apiCall]);
+
+  const handleImageError = useCallback(() => {
+    setImgError(true);
+  }, []);
+
+  // Memoize help links to prevent recreation on every render
+  const helpLinks: HelpLink[] = useMemo(
+    () => [
+      {
+        href: 'https://docs.emsesp.org',
+        icon: <MenuBookIcon />,
+        label: () => LL.HELP_INFORMATION_1()
+      },
+      {
+        href: 'https://discord.gg/3J3GgnzpyT',
+        icon: <CommentIcon />,
+        label: () => LL.HELP_INFORMATION_2()
+      },
+      {
+        href: 'https://github.com/emsesp/EMS-ESP32/issues/new/choose',
+        icon: <GitHubIcon />,
+        label: () => LL.HELP_INFORMATION_3()
+      }
+    ],
+    [LL]
+  );
+
+  const isAdmin = useMemo(() => me?.admin ?? false, [me?.admin]);
+
+  // Memoize image source computation
+  const imageSrc = useMemo(
+    () =>
+      imgError || !customSupport.img_url ? DEFAULT_IMAGE_URL : customSupport.img_url,
+    [imgError, customSupport.img_url]
+  );
+
  return (
    <SectionContent>
-      {customSupportHTML && (
+      {customSupport.html && (
        <Stack
          padding={1}
          mb={2}
          direction="row"
          divider={<Divider orientation="vertical" flexItem />}
-          sx={{
-            borderRadius: 3,
-            border: '1px solid lightblue',
-            justifyContent: 'space-evenly',
-            alignItems: 'center'
-          }}
+          sx={SUPPORT_BOX_STYLES}
        >
          <Typography variant="subtitle1">
-            <div dangerouslySetInnerHTML={{ __html: customSupportHTML }} />
+            <div dangerouslySetInnerHTML={{ __html: customSupport.html }} />
          </Typography>
          <Box
            component="img"
            referrerPolicy="no-referrer"
-            sx={{
-              maxHeight: { xs: 100, md: 250 }
-            }}
-            onError={() => setNotFound(true)}
-            src={
-              notFound
-                ? ''
-                : customSupportIMG ||
-                  'https://docs.emsesp.org/_media/images/installer.jpeg'
-            }
+            sx={IMAGE_STYLES}
+            onError={handleImageError}
+            src={imageSrc}
          />
        </Stack>
      )}

-      {me.admin && (
+      {isAdmin && (
        <List>
-          <ListItem>
-            <ListItemButton
-              component="a"
-              target="_blank"
-              rel="noreferrer"
-              href="https://docs.emsesp.org"
-            >
-              <ListItemAvatar>
-                <Avatar sx={{ bgcolor: '#72caf9' }}>
-                  <MenuBookIcon />
-                </Avatar>
-              </ListItemAvatar>
-              <ListItemText primary={LL.HELP_INFORMATION_1()} />
-            </ListItemButton>
-          </ListItem>
-
-          <ListItem>
-            <ListItemButton
-              component="a"
-              target="_blank"
-              rel="noreferrer"
-              href="https://discord.gg/3J3GgnzpyT"
-            >
-              <ListItemAvatar>
-                <Avatar sx={{ bgcolor: '#72caf9' }}>
-                  <CommentIcon />
-                </Avatar>
-              </ListItemAvatar>
-              <ListItemText primary={LL.HELP_INFORMATION_2()} />
-            </ListItemButton>
-          </ListItem>
-
-          <ListItem>
-            <ListItemButton
-              component="a"
-              target="_blank"
-              rel="noreferrer"
-              href="https://github.com/emsesp/EMS-ESP32/issues/new/choose"
-            >
-              <ListItemAvatar>
-                <Avatar sx={{ bgcolor: '#72caf9' }}>
-                  <GitHubIcon />
-                </Avatar>
-              </ListItemAvatar>
-              <ListItemText primary={LL.HELP_INFORMATION_3()} />
-            </ListItemButton>
-          </ListItem>
+          {helpLinks.map(({ href, icon, label }) => (
+            <ListItem key={href}>
+              <ListItemButton
+                component="a"
+                target="_blank"
+                rel="noreferrer"
+                href={href}
+              >
+                <ListItemAvatar>
+                  <Avatar sx={AVATAR_STYLES}>{icon}</Avatar>
+                </ListItemAvatar>
+                <ListItemText primary={label()} />
+              </ListItemButton>
+            </ListItem>
+          ))}
        </List>
      )}

@@ -158,7 +194,7 @@ const Help = () => {
          startIcon={<DownloadIcon />}
          variant="outlined"
          color="primary"
-          onClick={() => sendAPI({ device: 'system', cmd: 'info', id: 0 })}
+          onClick={handleDownloadSystemInfo}
        >
          {LL.SUPPORT_INFORMATION(0)}
        </Button>
@@ -174,11 +210,14 @@ const Help = () => {
          href="https://emsesp.org"
          color="primary"
        >
-          {'emsesp.org'}
+          emsesp.org
        </Link>
      </Typography>
    </SectionContent>
  );
 };

+// Memoize the component to prevent unnecessary re-renders
+const Help = memo(HelpComponent);
+
 export default Help;
--- a/interface/src/app/main/Modules.tsx
+++ b/interface/src/app/main/Modules.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react';
+import { memo, useCallback, useMemo, useState } from 'react';
 import { useBlocker } from 'react-router';
 import { toast } from 'react-toastify';

@@ -31,6 +31,19 @@ import { readModules, writeModules } from '../../api/app';
 import ModulesDialog from './ModulesDialog';
 import type { ModuleItem } from './types';

+const PENDING_COLOR = 'red';
+const ACTIVATED_COLOR = '#00FF7F';
+
+const hasModulesChanged = (mi: ModuleItem): boolean =>
+  mi.enabled !== mi.o_enabled || mi.license !== mi.o_license;
+
+const ColorStatus = memo(({ status }: { status: number }) => {
+  if (status === 1) {
+    return <div style={{ color: PENDING_COLOR }}>Pending Activation</div>;
+  }
+  return <div style={{ color: ACTIVATED_COLOR }}>Activated</div>;
+});
+
 const Modules = () => {
  const { LL } = useI18nContext();
  const [numChanges, setNumChanges] = useState<number>(0);
@@ -56,105 +69,107 @@ const Modules = () => {
    }
  );

-  const modules_theme = useTheme({
-    Table: `
-      --data-table-library_grid-template-columns: 48px 180px 120px 100px repeat(1, minmax(160px, 1fr)) 180px;
-    `,
-    BaseRow: `
-      font-size: 14px;
-      .td {
-        height: 32px;
-      }
-    `,
-    BaseCell: `
-      &:nth-of-type(1) {
-        text-align: center;
-      }
-    `,
-    HeaderRow: `
-      text-transform: uppercase;
-      background-color: black;
-      color: #90CAF9;
-      .th {
-        border-bottom: 1px solid #565656;
-        height: 36px;
-      }
-    `,
-    Row: `
-      background-color: #1e1e1e;
-      position: relative;
-      cursor: pointer;
-      .td {
-        border-top: 1px solid #565656;
-        border-bottom: 1px solid #565656;
-      }
-      &:hover .td {
-        border-top: 1px solid #177ac9;
-        border-bottom: 1px solid #177ac9;
-      }
-      &:nth-of-type(odd) .td {
-        background-color: #303030;
-      }
-    `
-  });
+  const modules_theme = useTheme(
+    useMemo(
+      () => ({
+        Table: `
+          --data-table-library_grid-template-columns: 48px 180px 120px 100px repeat(1, minmax(160px, 1fr)) 180px;
+        `,
+        BaseRow: `
+          font-size: 14px;
+          .td {
+            height: 32px;
+          }
+        `,
+        BaseCell: `
+          &:nth-of-type(1) {
+            text-align: center;
+          }
+        `,
+        HeaderRow: `
+          text-transform: uppercase;
+          background-color: black;
+          color: #90CAF9;
+          .th {
+            border-bottom: 1px solid #565656;
+            height: 36px;
+          }
+        `,
+        Row: `
+          background-color: #1e1e1e;
+          position: relative;
+          cursor: pointer;
+          .td {
+            border-top: 1px solid #565656;
+            border-bottom: 1px solid #565656;
+          }
+          &:hover .td {
+            border-top: 1px solid #177ac9;
+            border-bottom: 1px solid #177ac9;
+          }
+          &:nth-of-type(odd) .td {
+            background-color: #303030;
+          }
+        `
+      }),
+      []
+    )
+  );

-  const onDialogClose = () => {
+  const onDialogClose = useCallback(() => {
    setDialogOpen(false);
-  };
+  }, []);

-  const onDialogSave = (updatedItem: ModuleItem) => {
-    setDialogOpen(false);
-    updateModuleItem(updatedItem);
-  };
+  const updateModuleItem = useCallback((updatedItem: ModuleItem) => {
+    void updateState(readModules(), (data: ModuleItem[]) => {
+      const new_data = data.map((mi) =>
+        mi.id === updatedItem.id ? { ...mi, ...updatedItem } : mi
+      );
+      setNumChanges(new_data.filter(hasModulesChanged).length);
+      return new_data;
+    });
+  }, []);
+
+  const onDialogSave = useCallback(
+    (updatedItem: ModuleItem) => {
+      setDialogOpen(false);
+      updateModuleItem(updatedItem);
+    },
+    [updateModuleItem]
+  );

  const editModuleItem = useCallback((mi: ModuleItem) => {
    setSelectedModuleItem(mi);
    setDialogOpen(true);
  }, []);

-  const onCancel = async () => {
+  const onCancel = useCallback(async () => {
    await fetchModules().then(() => {
      setNumChanges(0);
    });
-  };
+  }, [fetchModules]);

-  function hasModulesChanged(mi: ModuleItem) {
-    return mi.enabled !== mi.o_enabled || mi.license !== mi.o_license;
-  }
-
-  const updateModuleItem = (updatedItem: ModuleItem) => {
-    void updateState(readModules(), (data: ModuleItem[]) => {
-      const new_data = data.map((mi) =>
-        mi.id === updatedItem.id ? { ...mi, ...updatedItem } : mi
+  const saveModules = useCallback(async () => {
+    try {
+      await Promise.all(
+        modules.map((condensed_mi: ModuleItem) =>
+          updateModules({
+            key: condensed_mi.key,
+            enabled: condensed_mi.enabled,
+            license: condensed_mi.license
+          })
+        )
      );
-      setNumChanges(new_data.filter((mi) => hasModulesChanged(mi)).length);
-      return new_data;
-    });
-  };
+      toast.success(LL.MODULES_UPDATED());
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : String(error));
+    } finally {
+      await fetchModules();
+      setNumChanges(0);
+    }
+  }, [modules, updateModules, LL, fetchModules]);

-  const saveModules = async () => {
-    await Promise.all(
-      modules.map((condensed_mi: ModuleItem) =>
-        updateModules({
-          key: condensed_mi.key,
-          enabled: condensed_mi.enabled,
-          license: condensed_mi.license
-        })
-      )
-    )
-      .then(() => {
-        toast.success(LL.MODULES_UPDATED());
-      })
-      .catch((error: Error) => {
-        toast.error(error.message);
-      })
-      .finally(async () => {
-        await fetchModules();
-        setNumChanges(0);
-      });
-  };
-
-  const renderContent = () => {
+  const content = useMemo(() => {
    if (!modules) {
      return (
        <FormLoader onRetry={fetchModules} errorMessage={error?.message || ''} />
@@ -169,13 +184,6 @@ const Modules = () => {
      );
    }

-    const colorStatus = (status: number) => {
-      if (status === 1) {
-        return <div style={{ color: 'red' }}>Pending Activation</div>;
-      }
-      return <div style={{ color: '#00FF7F' }}>Activated</div>;
-    };
-
    return (
      <>
        <Box mb={2} color="warning.main">
@@ -218,7 +226,9 @@ const Modules = () => {
                    <Cell>{mi.author}</Cell>
                    <Cell>{mi.version}</Cell>
                    <Cell>{mi.message}</Cell>
-                    <Cell>{colorStatus(mi.status)}</Cell>
+                    <Cell>
+                      <ColorStatus status={mi.status} />
+                    </Cell>
                  </Row>
                ))}
              </Body>
@@ -252,12 +262,22 @@ const Modules = () => {
        </Box>
      </>
    );
-  };
+  }, [
+    modules,
+    fetchModules,
+    error,
+    modules_theme,
+    editModuleItem,
+    LL,
+    numChanges,
+    onCancel,
+    saveModules
+  ]);

  return (
    <SectionContent>
      {blocker ? <BlockNavigation blocker={blocker} /> : null}
-      {renderContent()}
+      {content}
      {selectedModuleItem && (
        <ModulesDialog
          open={dialogOpen}
--- a/interface/src/app/main/ModulesDialog.tsx
+++ b/interface/src/app/main/ModulesDialog.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';

 import CancelIcon from '@mui/icons-material/Cancel';
 import DoneIcon from '@mui/icons-material/Done';
@@ -37,25 +37,35 @@ const ModulesDialog = ({
  const { LL } = useI18nContext();
  const [editItem, setEditItem] = useState<ModuleItem>(selectedItem);

-  const updateFormValue = updateValue(setEditItem);
+  const updateFormValue = useMemo(
+    () =>
+      updateValue(
+        setEditItem as unknown as React.Dispatch<
+          React.SetStateAction<Record<string, unknown>>
+        >
+      ),
+    []
+  );

+  // Sync form state when dialog opens or selected item changes
  useEffect(() => {
    if (open) {
      setEditItem(selectedItem);
    }
  }, [open, selectedItem]);

-  const close = () => {
-    onClose();
-  };
-
-  const save = () => {
+  const handleSave = useCallback(() => {
    onSave(editItem);
-  };
+  }, [editItem, onSave]);
+
+  const dialogTitle = useMemo(
+    () => `${LL.EDIT()} ${editItem.key}`,
+    [LL, editItem.key]
+  );

  return (
    <Dialog sx={dialogStyle} fullWidth maxWidth="xs" open={open} onClose={onClose}>
-      <DialogTitle>{LL.EDIT() + ' ' + editItem.key}</DialogTitle>
+      <DialogTitle>{dialogTitle}</DialogTitle>
      <DialogContent dividers>
        <Grid container>
          <BlockFormControlLabel
@@ -85,7 +95,7 @@ const ModulesDialog = ({
        <Button
          startIcon={<CancelIcon />}
          variant="outlined"
-          onClick={close}
+          onClick={onClose}
          color="secondary"
        >
          {LL.CANCEL()}
@@ -93,7 +103,7 @@ const ModulesDialog = ({
        <Button
          startIcon={<DoneIcon />}
          variant="outlined"
-          onClick={save}
+          onClick={handleSave}
          color="primary"
        >
          {LL.UPDATE()}
--- a/interface/src/app/main/OptionIcon.tsx
+++ b/interface/src/app/main/OptionIcon.tsx
@@ -1,3 +1,5 @@
+import { memo } from 'react';
+
 import CommentsDisabledOutlinedIcon from '@mui/icons-material/CommentsDisabledOutlined';
 import DeleteForeverIcon from '@mui/icons-material/DeleteForever';
 import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
@@ -10,33 +12,39 @@ import VisibilityOffOutlinedIcon from '@mui/icons-material/VisibilityOffOutlined
 import VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined';
 import type { SvgIconProps } from '@mui/material';

-type OptionType =
+export type OptionType =
  | 'deleted'
  | 'readonly'
  | 'web_exclude'
  | 'api_mqtt_exclude'
  | 'favorite';

-const OPTION_ICONS: {
-  [type in OptionType]: [
-    React.ComponentType<SvgIconProps>,
-    React.ComponentType<SvgIconProps>
-  ];
-} = {
+type IconPair = [
+  React.ComponentType<SvgIconProps>,
+  React.ComponentType<SvgIconProps>
+];
+
+const OPTION_ICONS: Record<OptionType, IconPair> = {
  deleted: [DeleteForeverIcon, DeleteOutlineIcon],
  readonly: [EditOffOutlinedIcon, EditOutlinedIcon],
  web_exclude: [VisibilityOffOutlinedIcon, VisibilityOutlinedIcon],
  api_mqtt_exclude: [CommentsDisabledOutlinedIcon, InsertCommentOutlinedIcon],
  favorite: [StarIcon, StarOutlineIcon]
+} as const;
+
+const ICON_SIZE = 16;
+const ICON_SX = { fontSize: ICON_SIZE, verticalAlign: 'middle' } as const;
+
+export interface OptionIconProps {
+  readonly type: OptionType;
+  readonly isSet: boolean;
+}
+
+const OptionIcon = ({ type, isSet }: OptionIconProps) => {
+  const [SetIcon, UnsetIcon] = OPTION_ICONS[type];
+  const Icon = isSet ? SetIcon : UnsetIcon;
+
+  return <Icon {...(isSet && { color: 'primary' })} sx={ICON_SX} />;
 };

-const OptionIcon = ({ type, isSet }: { type: OptionType; isSet: boolean }) => {
-  const Icon = OPTION_ICONS[type][isSet ? 0 : 1];
-  return isSet ? (
-    <Icon color="primary" sx={{ fontSize: 16, verticalAlign: 'middle' }} />
-  ) : (
-    <Icon sx={{ fontSize: 16, verticalAlign: 'middle' }} />
-  );
-};
-
-export default OptionIcon;
+export default memo(OptionIcon);
--- a/interface/src/app/main/Scheduler.tsx
+++ b/interface/src/app/main/Scheduler.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useBlocker } from 'react-router';
 import { toast } from 'react-toastify';

@@ -35,6 +35,76 @@ import { ScheduleFlag } from './types';
 import type { Schedule, ScheduleItem } from './types';
 import { schedulerItemValidation } from './validators';

+// Constants
+const INTERVAL_DELAY = 30000; // 30 seconds
+const MIN_ID = -100;
+const MAX_ID = 100;
+const ICON_SIZE = 16;
+const SCHEDULE_FLAG_THRESHOLD = 127;
+const REFERENCE_YEAR = 2017;
+const REFERENCE_MONTH = '01';
+const LOG_2 = Math.log(2);
+
+// Days of week starting from Monday (1-7)
+const WEEK_DAYS = [1, 2, 3, 4, 5, 6, 7] as const;
+
+const DEFAULT_SCHEDULE_ITEM: Omit<ScheduleItem, 'id' | 'o_id'> = {
+  active: false,
+  deleted: false,
+  flags: ScheduleFlag.SCHEDULE_DAY,
+  time: '',
+  cmd: '',
+  value: '',
+  name: ''
+};
+
+const scheduleTheme = {
+  Table: `
+    --data-table-library_grid-template-columns: 36px 210px 100px 192px repeat(1, minmax(100px, 1fr)) 160px;
+  `,
+  BaseRow: `
+    font-size: 14px;
+    .td {
+      height: 32px;
+    }
+  `,
+  BaseCell: `
+    &:nth-of-type(2) {
+      text-align: center;
+    }
+    &:nth-of-type(1) {
+      text-align: center;
+    }
+  `,
+  HeaderRow: `
+    text-transform: uppercase;
+    background-color: black;
+    color: #90CAF9;
+    .th {
+      border-bottom: 1px solid #565656;
+      height: 36px;
+    }
+  `,
+  Row: `
+    background-color: #1e1e1e;
+    position: relative;
+    cursor: pointer;
+    .td {
+      border-bottom: 1px solid #565656;
+    }
+    &:hover .td {
+      background-color: #177ac9;
+    }
+  `
+};
+
+const scheduleTypeLabels: Record<number, string> = {
+  [ScheduleFlag.SCHEDULE_IMMEDIATE]: 'Immediate',
+  [ScheduleFlag.SCHEDULE_TIMER]: 'Timer',
+  [ScheduleFlag.SCHEDULE_CONDITION]: 'Condition',
+  [ScheduleFlag.SCHEDULE_ONCHANGE]: 'On Change'
+};
+
 const Scheduler = () => {
  const { LL, locale } = useI18nContext();
  const [numChanges, setNumChanges] = useState<number>(0);
@@ -61,7 +131,7 @@ const Scheduler = () => {
    }
  );

-  function hasScheduleChanged(si: ScheduleItem) {
+  const hasScheduleChanged = useCallback((si: ScheduleItem) => {
    return (
      si.id !== si.o_id ||
      (si.name || '') !== (si.o_name || '') ||
@@ -72,91 +142,56 @@ const Scheduler = () => {
      si.cmd !== si.o_cmd ||
      si.value !== si.o_value
    );
-  }
+  }, []);

-  useInterval(() => {
+  const intervalCallback = useCallback(() => {
    if (numChanges === 0) {
      void fetchSchedule();
    }
-  });
+  }, [numChanges, fetchSchedule]);
+
+  useInterval(intervalCallback, INTERVAL_DELAY);

  useEffect(() => {
    const formatter = new Intl.DateTimeFormat(locale, {
      weekday: 'short',
      timeZone: 'UTC'
    });
-    const days = [1, 2, 3, 4, 5, 6, 7].map((day) => {
-      const dd = day < 10 ? `0${day}` : day;
-      return new Date(`2017-01-${dd}T00:00:00+00:00`);
+    const days = WEEK_DAYS.map((day) => {
+      const dayStr = String(day).padStart(2, '0');
+      return new Date(
+        `${REFERENCE_YEAR}-${REFERENCE_MONTH}-${dayStr}T00:00:00+00:00`
+      );
    });
    setDow(days.map((date) => formatter.format(date)));
  }, [locale]);

-  const schedule_theme = useTheme({
-    Table: `
-      --data-table-library_grid-template-columns: 36px 210px 100px 192px repeat(1, minmax(100px, 1fr)) 160px;
-    `,
-    BaseRow: `
-      font-size: 14px;
-      .td {
-        height: 32px;
-      }
-    `,
-    BaseCell: `
-      &:nth-of-type(2) {
-        text-align: center;
-      }
-      &:nth-of-type(1) {
-        text-align: center;
-      }
-    `,
-    HeaderRow: `
-      text-transform: uppercase;
-      background-color: black;
-      color: #90CAF9;
-      .th {
-        border-bottom: 1px solid #565656;
-        height: 36px;
-      }
-    `,
-    Row: `
-      background-color: #1e1e1e;
-      position: relative;
-      cursor: pointer;
-      .td {
-        border-bottom: 1px solid #565656;
-      }
-      &:hover .td {
-        background-color: #177ac9;
-      }
-    `
-  });
+  const schedule_theme = useTheme(scheduleTheme);

-  const saveSchedule = async () => {
-    await updateSchedule({
-      schedule: schedule
-        .filter((si: ScheduleItem) => !si.deleted)
-        .map((condensed_si: ScheduleItem) => ({
-          id: condensed_si.id,
-          active: condensed_si.active,
-          flags: condensed_si.flags,
-          time: condensed_si.time,
-          cmd: condensed_si.cmd,
-          value: condensed_si.value,
-          name: condensed_si.name
-        }))
-    })
-      .then(() => {
-        toast.success(LL.SCHEDULE_UPDATED());
-      })
-      .catch((error: Error) => {
-        toast.error(error.message);
-      })
-      .finally(async () => {
-        await fetchSchedule();
-        setNumChanges(0);
+  const saveSchedule = useCallback(async () => {
+    try {
+      await updateSchedule({
+        schedule: schedule
+          .filter((si: ScheduleItem) => !si.deleted)
+          .map((condensed_si: ScheduleItem) => ({
+            id: condensed_si.id,
+            active: condensed_si.active,
+            flags: condensed_si.flags,
+            time: condensed_si.time,
+            cmd: condensed_si.cmd,
+            value: condensed_si.value,
+            name: condensed_si.name
+          }))
      });
-  };
+      toast.success(LL.SCHEDULE_UPDATED());
+    } catch (error: unknown) {
+      const message = error instanceof Error ? error.message : String(error);
+      toast.error(message);
+    } finally {
+      await fetchSchedule();
+      setNumChanges(0);
+    }
+  }, [LL, schedule, updateSchedule, fetchSchedule]);

  const editScheduleItem = useCallback((si: ScheduleItem) => {
    setCreating(false);
@@ -167,95 +202,93 @@ const Scheduler = () => {
    }
  }, []);

-  const onDialogClose = () => {
+  const onDialogClose = useCallback(() => {
    setDialogOpen(false);
-  };
+  }, []);

-  const onDialogCancel = async () => {
+  const onDialogCancel = useCallback(async () => {
    await fetchSchedule().then(() => {
      setNumChanges(0);
    });
-  };
+  }, [fetchSchedule]);

-  const onDialogSave = (updatedItem: ScheduleItem) => {
-    setDialogOpen(false);
-    void updateState(readSchedule(), (data: ScheduleItem[]) => {
-      const new_data = creating
-        ? [
-            ...data.filter((si) => creating || si.o_id !== updatedItem.o_id),
-            updatedItem
-          ]
-        : data.map((si) =>
-            si.id === updatedItem.id ? { ...si, ...updatedItem } : si
-          );
+  const onDialogSave = useCallback(
+    (updatedItem: ScheduleItem) => {
+      setDialogOpen(false);
+      void updateState(readSchedule(), (data: ScheduleItem[]) => {
+        const new_data = creating
+          ? [...data, updatedItem]
+          : data.map((si) =>
+              si.id === updatedItem.id ? { ...si, ...updatedItem } : si
+            );

-      setNumChanges(new_data.filter((si) => hasScheduleChanged(si)).length);
+        setNumChanges(new_data.filter((si) => hasScheduleChanged(si)).length);

-      return new_data;
-    });
-  };
+        return new_data;
+      });
+    },
+    [creating, hasScheduleChanged]
+  );

-  const addScheduleItem = () => {
+  const addScheduleItem = useCallback(() => {
    setCreating(true);
-    setSelectedScheduleItem({
-      id: Math.floor(Math.random() * (Math.floor(200) - 100) + 100),
-      active: false,
-      deleted: false,
-      flags: ScheduleFlag.SCHEDULE_DAY,
-      time: '',
-      cmd: '',
-      value: '',
-      name: ''
-    });
+    const newItem: ScheduleItem = {
+      id: Math.floor(Math.random() * (MAX_ID - MIN_ID) + MIN_ID),
+      ...DEFAULT_SCHEDULE_ITEM
+    };
+    setSelectedScheduleItem(newItem);
    setDialogOpen(true);
-  };
+  }, []);

-  const renderSchedule = () => {
+  const filteredAndSortedSchedule = useMemo(
+    () =>
+      schedule
+        .filter((si: ScheduleItem) => !si.deleted)
+        .sort((a: ScheduleItem, b: ScheduleItem) => a.flags - b.flags),
+    [schedule]
+  );
+
+  const dayBox = useCallback(
+    (si: ScheduleItem, flag: number) => {
+      const dayIndex = Math.log(flag) / LOG_2;
+      const isActive = (si.flags & flag) === flag;
+
+      return (
+        <>
+          <Box>
+            <Typography sx={{ fontSize: 11 }} color={isActive ? 'primary' : 'grey'}>
+              {dow[dayIndex]}
+            </Typography>
+          </Box>
+          <Divider orientation="vertical" flexItem />
+        </>
+      );
+    },
+    [dow]
+  );
+
+  const scheduleType = useCallback((si: ScheduleItem) => {
+    const label = scheduleTypeLabels[si.flags];
+
+    return (
+      <Box>
+        <Typography sx={{ fontSize: 11 }} color="primary">
+          {label || ''}
+        </Typography>
+      </Box>
+    );
+  }, []);
+
+  const renderSchedule = useCallback(() => {
    if (!schedule) {
      return (
        <FormLoader onRetry={fetchSchedule} errorMessage={error?.message || ''} />
      );
    }

-    const dayBox = (si: ScheduleItem, flag: number) => (
-      <>
-        <Box>
-          <Typography
-            sx={{ fontSize: 11 }}
-            color={(si.flags & flag) === flag ? 'primary' : 'grey'}
-          >
-            {dow[Math.log(flag) / Math.log(2)]}
-          </Typography>
-        </Box>
-        <Divider orientation="vertical" flexItem />
-      </>
-    );
-
-    const scheduleType = (si: ScheduleItem) => (
-      <Box>
-        <Typography sx={{ fontSize: 11 }} color="primary">
-          {si.flags === ScheduleFlag.SCHEDULE_IMMEDIATE ? (
-            <>Immediate</>
-          ) : si.flags === ScheduleFlag.SCHEDULE_TIMER ? (
-            <>Timer</>
-          ) : si.flags === ScheduleFlag.SCHEDULE_CONDITION ? (
-            <>Condition</>
-          ) : si.flags === ScheduleFlag.SCHEDULE_ONCHANGE ? (
-            <>On Change</>
-          ) : (
-            <></>
-          )}
-        </Typography>
-      </Box>
-    );
-
    return (
      <Table
-        data={{
-          nodes: schedule
-            .filter((si: ScheduleItem) => !si.deleted)
-            .sort((a: ScheduleItem, b: ScheduleItem) => a.flags - b.flags)
-        }}
+        data={{ nodes: filteredAndSortedSchedule }}
        theme={schedule_theme}
        layout={{ custom: true }}
      >
@@ -275,22 +308,15 @@ const Scheduler = () => {
              {tableList.map((si: ScheduleItem) => (
                <Row key={si.id} item={si} onClick={() => editScheduleItem(si)}>
                  <Cell stiff>
-                    {si.active ? (
-                      <CircleIcon
-                        color="success"
-                        sx={{ fontSize: 16, verticalAlign: 'middle' }}
-                      />
-                    ) : (
-                      <CircleIcon
-                        color="error"
-                        sx={{ fontSize: 16, verticalAlign: 'middle' }}
-                      />
-                    )}
+                    <CircleIcon
+                      color={si.active ? 'success' : 'error'}
+                      sx={{ fontSize: ICON_SIZE, verticalAlign: 'middle' }}
+                    />
                  </Cell>
                  <Cell stiff>
                    <Stack spacing={0.5} direction="row">
                      <Divider orientation="vertical" flexItem />
-                      {si.flags > 127 ? (
+                      {si.flags > SCHEDULE_FLAG_THRESHOLD ? (
                        scheduleType(si)
                      ) : (
                        <>
@@ -316,7 +342,17 @@ const Scheduler = () => {
        )}
      </Table>
    );
-  };
+  }, [
+    schedule,
+    error,
+    fetchSchedule,
+    filteredAndSortedSchedule,
+    schedule_theme,
+    editScheduleItem,
+    LL,
+    dayBox,
+    scheduleType
+  ]);

  return (
    <SectionContent>
--- a/interface/src/app/main/SchedulerDialog.tsx
+++ b/interface/src/app/main/SchedulerDialog.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';

 import AddIcon from '@mui/icons-material/Add';
 import CancelIcon from '@mui/icons-material/Cancel';
@@ -31,6 +31,34 @@ import { validate } from 'validators';
 import { ScheduleFlag } from './types';
 import type { ScheduleItem } from './types';

+// Constants
+const FLAG_MASK_127 = 127;
+const SCHEDULE_TYPE_THRESHOLD = 128;
+const DEFAULT_TIME = '00:00';
+const TYPOGRAPHY_FONT_SIZE = 10;
+
+// Day of week flag configuration (static, defined outside component)
+const DAY_FLAGS = [
+  { value: '2', flag: ScheduleFlag.SCHEDULE_MON },
+  { value: '4', flag: ScheduleFlag.SCHEDULE_TUE },
+  { value: '8', flag: ScheduleFlag.SCHEDULE_WED },
+  { value: '16', flag: ScheduleFlag.SCHEDULE_THU },
+  { value: '32', flag: ScheduleFlag.SCHEDULE_FRI },
+  { value: '64', flag: ScheduleFlag.SCHEDULE_SAT },
+  { value: '1', flag: ScheduleFlag.SCHEDULE_SUN }
+] as const;
+
+// Day of week flag values array (static)
+const FLAG_VALUES = [
+  ScheduleFlag.SCHEDULE_SUN,
+  ScheduleFlag.SCHEDULE_MON,
+  ScheduleFlag.SCHEDULE_TUE,
+  ScheduleFlag.SCHEDULE_WED,
+  ScheduleFlag.SCHEDULE_THU,
+  ScheduleFlag.SCHEDULE_FRI,
+  ScheduleFlag.SCHEDULE_SAT
+] as const;
+
 interface SchedulerDialogProps {
  open: boolean;
  creating: boolean;
@@ -53,110 +81,163 @@ const SchedulerDialog = ({
  const { LL } = useI18nContext();
  const [editItem, setEditItem] = useState<ScheduleItem>(selectedItem);
  const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();
-
  const [scheduleType, setScheduleType] = useState<ScheduleFlag>();

-  const updateFormValue = updateValue(setEditItem);
+  const updateFormValue = useMemo(
+    () =>
+      updateValue(
+        setEditItem as unknown as React.Dispatch<
+          React.SetStateAction<Record<string, unknown>>
+        >
+      ),
+    []
+  );

  useEffect(() => {
    if (open) {
      setFieldErrors(undefined);
      setEditItem(selectedItem);
-      // set the flags based on type when page is loaded...
+      // Set the flags based on type when page is loaded:
      // 0-127 is day schedule
      // 128 is timer
      // 129 is on change
      // 130 is on condition
      // 132 is immediate
      setScheduleType(
-        selectedItem.flags < 128 ? ScheduleFlag.SCHEDULE_DAY : selectedItem.flags
+        selectedItem.flags < SCHEDULE_TYPE_THRESHOLD
+          ? ScheduleFlag.SCHEDULE_DAY
+          : selectedItem.flags
      );
    }
  }, [open, selectedItem]);

-  const save = async () => {
-    try {
-      setFieldErrors(undefined);
-      await validate(validator, editItem);
-      onSave(editItem);
-    } catch (error) {
-      setFieldErrors(error as ValidateFieldsError);
-    }
-  };
-
-  const saveandactivate = async () => {
-    editItem.active = true;
-    try {
-      setFieldErrors(undefined);
-      await validate(validator, editItem);
-      onSave(editItem);
-    } catch (error) {
-      setFieldErrors(error as ValidateFieldsError);
-    }
-  };
-
-  const remove = () => {
-    editItem.deleted = true;
-    onSave(editItem);
-  };
-
-  const getFlagDOWnumber = (newFlag: string[]) => {
-    let new_flag = 0;
-    for (const entry of newFlag) {
-      new_flag |= Number(entry);
-    }
-    return new_flag & 127;
-  };
-
-  const getFlagDOWstring = (f: number) => {
-    const new_flags: string[] = [];
-    if ((f & 129) === 1) {
-      new_flags.push('1');
-    }
-    if ((f & 130) === 2) {
-      new_flags.push('2');
-    }
-    if ((f & 4) === 4) {
-      new_flags.push('4');
-    }
-    if ((f & 8) === 8) {
-      new_flags.push('8');
-    }
-    if ((f & 16) === 16) {
-      new_flags.push('16');
-    }
-    if ((f & 32) === 32) {
-      new_flags.push('32');
-    }
-    if ((f & 64) === 64) {
-      new_flags.push('64');
-    }
-
-    return new_flags;
-  };
-
-  const showDOW = (si: ScheduleItem, flag: number) => (
-    <Typography
-      sx={{ fontSize: 10 }}
-      color={(si.flags & flag) === flag ? 'primary' : 'grey'}
-    >
-      {dow[Math.log(flag) / Math.log(2)]}
-    </Typography>
+  // Helper function to handle save operations
+  const handleSave = useCallback(
+    async (itemToSave: ScheduleItem) => {
+      try {
+        setFieldErrors(undefined);
+        await validate(validator, itemToSave);
+        onSave(itemToSave);
+      } catch (error) {
+        setFieldErrors(error as ValidateFieldsError);
+      }
+    },
+    [validator, onSave]
  );

-  const handleClose = (
-    _event: React.SyntheticEvent,
-    reason: 'backdropClick' | 'escapeKeyDown'
-  ) => {
-    if (reason !== 'backdropClick') {
-      onClose();
+  const save = useCallback(async () => {
+    await handleSave(editItem);
+  }, [editItem, handleSave]);
+
+  const saveandactivate = useCallback(async () => {
+    await handleSave({ ...editItem, active: true });
+  }, [editItem, handleSave]);
+
+  const remove = useCallback(() => {
+    onSave({ ...editItem, deleted: true });
+  }, [editItem, onSave]);
+
+  // Optimize DOW flag conversion
+  const getFlagDOWnumber = useCallback((flags: string[]) => {
+    return flags.reduce((acc, flag) => acc | Number(flag), 0) & FLAG_MASK_127;
+  }, []);
+
+  const getFlagDOWstring = useCallback((f: number) => {
+    return FLAG_VALUES.filter((flag) => (f & flag) === flag).map((flag) =>
+      String(flag)
+    );
+  }, []);
+
+  // Day of week display component
+  const DayOfWeekButton = useCallback(
+    (flag: number) => {
+      const dayIndex = Math.log2(flag);
+      const isSelected = (editItem.flags & flag) === flag;
+      return (
+        <Typography
+          sx={{ fontSize: TYPOGRAPHY_FONT_SIZE }}
+          color={isSelected ? 'primary' : 'grey'}
+        >
+          {dow[dayIndex]}
+        </Typography>
+      );
+    },
+    [editItem.flags, dow]
+  );
+
+  const handleClose = useCallback(
+    (_event: React.SyntheticEvent, reason: 'backdropClick' | 'escapeKeyDown') => {
+      if (reason !== 'backdropClick') {
+        onClose();
+      }
+    },
+    [onClose]
+  );
+
+  const handleScheduleTypeChange = useCallback(
+    (_event: React.SyntheticEvent<HTMLElement>, flag: ScheduleFlag | null) => {
+      if (flag !== null) {
+        setFieldErrors(undefined); // clear any validation errors
+        setScheduleType(flag);
+        // wipe the time field when changing the schedule type
+        // set the flags based on type
+        const newFlags = flag === ScheduleFlag.SCHEDULE_DAY ? 0 : flag;
+        setEditItem((prev) => ({ ...prev, time: '', flags: newFlags }));
+      }
+    },
+    []
+  );
+
+  const handleDOWChange = useCallback(
+    (_event: React.SyntheticEvent<HTMLElement>, flags: string[]) => {
+      const newFlags = getFlagDOWnumber(flags);
+      setEditItem((prev) => ({ ...prev, flags: newFlags }));
+    },
+    [getFlagDOWnumber]
+  );
+
+  // Memoize derived values
+  const isDaySchedule = useMemo(
+    () => scheduleType === ScheduleFlag.SCHEDULE_DAY,
+    [scheduleType]
+  );
+  const isTimerSchedule = useMemo(
+    () => scheduleType === ScheduleFlag.SCHEDULE_TIMER,
+    [scheduleType]
+  );
+  const isImmediateSchedule = useMemo(
+    () => scheduleType === ScheduleFlag.SCHEDULE_IMMEDIATE,
+    [scheduleType]
+  );
+  const needsTimeField = useMemo(
+    () => isDaySchedule || isTimerSchedule,
+    [isDaySchedule, isTimerSchedule]
+  );
+
+  const dowFlags = useMemo(
+    () => getFlagDOWstring(editItem.flags),
+    [editItem.flags, getFlagDOWstring]
+  );
+
+  const timeFieldValue = useMemo(() => {
+    if (needsTimeField) {
+      return editItem.time === '' ? DEFAULT_TIME : editItem.time;
    }
-  };
+    return editItem.time === DEFAULT_TIME ? '' : editItem.time;
+  }, [editItem.time, needsTimeField]);
+
+  const timeFieldLabel = useMemo(() => {
+    if (scheduleType === ScheduleFlag.SCHEDULE_TIMER) return LL.TIMER(1);
+    if (scheduleType === ScheduleFlag.SCHEDULE_CONDITION) return LL.CONDITION();
+    if (scheduleType === ScheduleFlag.SCHEDULE_ONCHANGE) return LL.ONCHANGE();
+    if (scheduleType === ScheduleFlag.SCHEDULE_IMMEDIATE) return LL.IMMEDIATE();
+    return LL.TIME(1);
+  }, [scheduleType, LL]);

  return (
    <Dialog sx={dialogStyle} open={open} onClose={handleClose}>
      <DialogTitle>
-        {creating ? LL.ADD(1) + ' ' + LL.NEW(0) : LL.EDIT()}&nbsp;
+        {creating ? `${LL.ADD(1)} ${LL.NEW(0)}` : LL.EDIT()}&nbsp;
        {LL.SCHEDULE(1)}
      </DialogTitle>
      <DialogContent dividers>
@@ -166,47 +247,27 @@ const SchedulerDialog = ({
          value={scheduleType}
          exclusive
          disabled={!creating}
-          onChange={(_event, flag: ScheduleFlag) => {
-            if (flag !== null) {
-              setFieldErrors(undefined); // clear any validation errors
-              setScheduleType(flag);
-              // wipe the time field when changing the schedule type
-              setEditItem({ ...editItem, time: '' });
-              // set the flags based on type
-              // 0-127 is day schedule
-              // 128 is timer
-              // 129 is on change
-              // 130 is on condition
-              // 132 is immediate
-              setEditItem(
-                flag === ScheduleFlag.SCHEDULE_DAY
-                  ? { ...editItem, flags: 0 }
-                  : { ...editItem, flags: flag }
-              );
-            }
-          }}
+          onChange={handleScheduleTypeChange}
        >
          <ToggleButton value={ScheduleFlag.SCHEDULE_DAY}>
            <Typography
-              sx={{ fontSize: 10 }}
-              color={scheduleType === ScheduleFlag.SCHEDULE_DAY ? 'primary' : 'grey'}
+              sx={{ fontSize: TYPOGRAPHY_FONT_SIZE }}
+              color={isDaySchedule ? 'primary' : 'grey'}
            >
              {LL.SCHEDULE(0)}
            </Typography>
          </ToggleButton>
          <ToggleButton value={ScheduleFlag.SCHEDULE_TIMER}>
            <Typography
-              sx={{ fontSize: 10 }}
-              color={
-                scheduleType === ScheduleFlag.SCHEDULE_TIMER ? 'primary' : 'grey'
-              }
+              sx={{ fontSize: TYPOGRAPHY_FONT_SIZE }}
+              color={isTimerSchedule ? 'primary' : 'grey'}
            >
              {LL.TIMER(0)}
            </Typography>
          </ToggleButton>
          <ToggleButton value={ScheduleFlag.SCHEDULE_ONCHANGE}>
            <Typography
-              sx={{ fontSize: 10 }}
+              sx={{ fontSize: TYPOGRAPHY_FONT_SIZE }}
              color={
                scheduleType === ScheduleFlag.SCHEDULE_ONCHANGE ? 'primary' : 'grey'
              }
@@ -216,7 +277,7 @@ const SchedulerDialog = ({
          </ToggleButton>
          <ToggleButton value={ScheduleFlag.SCHEDULE_CONDITION}>
            <Typography
-              sx={{ fontSize: 10 }}
+              sx={{ fontSize: TYPOGRAPHY_FONT_SIZE }}
              color={
                scheduleType === ScheduleFlag.SCHEDULE_CONDITION ? 'primary' : 'grey'
              }
@@ -226,50 +287,30 @@ const SchedulerDialog = ({
          </ToggleButton>
          <ToggleButton value={ScheduleFlag.SCHEDULE_IMMEDIATE}>
            <Typography
-              sx={{ fontSize: 10 }}
-              color={
-                scheduleType === ScheduleFlag.SCHEDULE_IMMEDIATE ? 'primary' : 'grey'
-              }
+              sx={{ fontSize: TYPOGRAPHY_FONT_SIZE }}
+              color={isImmediateSchedule ? 'primary' : 'grey'}
            >
              {LL.IMMEDIATE()}
            </Typography>
          </ToggleButton>
        </ToggleButtonGroup>

-        {scheduleType === ScheduleFlag.SCHEDULE_DAY && (
+        {isDaySchedule && (
          <ToggleButtonGroup
            size="small"
            color="secondary"
-            value={getFlagDOWstring(editItem.flags)}
-            onChange={(_event, flag: string[]) => {
-              setEditItem({ ...editItem, flags: getFlagDOWnumber(flag) });
-            }}
+            value={dowFlags}
+            onChange={handleDOWChange}
          >
-            <ToggleButton value="2">
-              {showDOW(editItem, ScheduleFlag.SCHEDULE_MON)}
-            </ToggleButton>
-            <ToggleButton value="4">
-              {showDOW(editItem, ScheduleFlag.SCHEDULE_TUE)}
-            </ToggleButton>
-            <ToggleButton value="8">
-              {showDOW(editItem, ScheduleFlag.SCHEDULE_WED)}
-            </ToggleButton>
-            <ToggleButton value="16">
-              {showDOW(editItem, ScheduleFlag.SCHEDULE_THU)}
-            </ToggleButton>
-            <ToggleButton value="32">
-              {showDOW(editItem, ScheduleFlag.SCHEDULE_FRI)}
-            </ToggleButton>
-            <ToggleButton value="64">
-              {showDOW(editItem, ScheduleFlag.SCHEDULE_SAT)}
-            </ToggleButton>
-            <ToggleButton value="1">
-              {showDOW(editItem, ScheduleFlag.SCHEDULE_SUN)}
-            </ToggleButton>
+            {DAY_FLAGS.map(({ value, flag }) => (
+              <ToggleButton key={value} value={value}>
+                {DayOfWeekButton(flag)}
+              </ToggleButton>
+            ))}
          </ToggleButtonGroup>
        )}

-        {scheduleType !== ScheduleFlag.SCHEDULE_IMMEDIATE && (
+        {!isImmediateSchedule && (
          <>
            <Grid container>
              <BlockFormControlLabel
@@ -284,22 +325,17 @@ const SchedulerDialog = ({
              />
            </Grid>
            <Grid container>
-              {scheduleType === ScheduleFlag.SCHEDULE_DAY ||
-              scheduleType === ScheduleFlag.SCHEDULE_TIMER ? (
+              {needsTimeField ? (
                <>
                  <TextField
                    name="time"
                    type="time"
-                    label={
-                      scheduleType === ScheduleFlag.SCHEDULE_TIMER
-                        ? LL.TIMER(1)
-                        : LL.TIME(1)
-                    }
-                    value={editItem.time === '' ? '00:00' : editItem.time}
+                    label={timeFieldLabel}
+                    value={timeFieldValue}
                    margin="normal"
                    onChange={updateFormValue}
                  />
-                  {scheduleType === ScheduleFlag.SCHEDULE_TIMER && (
+                  {isTimerSchedule && (
                    <Box color="warning.main" ml={2} mt={4}>
                      <Typography variant="body2">
                        {LL.SCHEDULER_HELP_2()}
@@ -310,16 +346,10 @@ const SchedulerDialog = ({
              ) : (
                <TextField
                  name="time"
-                  label={
-                    scheduleType === ScheduleFlag.SCHEDULE_CONDITION
-                      ? LL.CONDITION()
-                      : scheduleType === ScheduleFlag.SCHEDULE_ONCHANGE
-                        ? LL.ONCHANGE()
-                        : LL.IMMEDIATE()
-                  }
+                  label={timeFieldLabel}
                  multiline
                  fullWidth
-                  value={editItem.time === '00:00' ? '' : editItem.time}
+                  value={timeFieldValue}
                  margin="normal"
                  onChange={updateFormValue}
                />
@@ -386,7 +416,7 @@ const SchedulerDialog = ({
        >
          {creating ? LL.ADD(0) : LL.UPDATE()}
        </Button>
-        {scheduleType === ScheduleFlag.SCHEDULE_IMMEDIATE && editItem.cmd !== '' && (
+        {isImmediateSchedule && editItem.cmd !== '' && (
          <Button
            startIcon={<PlayArrowIcon />}
            variant="outlined"
--- a/interface/src/app/main/Sensors.tsx
+++ b/interface/src/app/main/Sensors.tsx
@@ -1,4 +1,4 @@
-import { useContext, useState } from 'react';
+import { useCallback, useContext, useMemo, useState } from 'react';
 import { toast } from 'react-toastify';

 import AddCircleOutlineOutlinedIcon from '@mui/icons-material/AddCircleOutlineOutlined';
@@ -49,6 +49,74 @@ import {
  temperatureSensorItemValidation
 } from './validators';

+// Constants
+const MS_PER_SECOND = 1000;
+const MS_PER_MINUTE = 60 * MS_PER_SECOND;
+const MS_PER_HOUR = 60 * MS_PER_MINUTE;
+const MS_PER_DAY = 24 * MS_PER_HOUR;
+const DEFAULT_GPIO = 21; // Safe GPIO for all platforms
+const MIN_TEMP_ID = -100;
+const MAX_TEMP_ID = 100;
+const GPIO_25 = 25;
+const GPIO_26 = 26;
+
+const HEADER_BUTTON_STYLE: React.CSSProperties = {
+  fontSize: '14px',
+  justifyContent: 'flex-start'
+};
+
+const HEADER_BUTTON_STYLE_END: React.CSSProperties = {
+  fontSize: '14px',
+  justifyContent: 'flex-end'
+};
+
+const common_theme = {
+  BaseRow: `
+    font-size: 14px;
+    .td {
+      height: 32px;
+    }
+  `,
+  HeaderRow: `
+    text-transform: uppercase;
+    background-color: black;
+    color: #90CAF9;
+    .th {
+      border-bottom: 1px solid #565656;
+      height: 36px;
+    }
+  `,
+  Row: `
+    background-color: #1e1e1e;
+    position: relative;
+    cursor: pointer;
+    .td {
+      padding: 8px;
+      border-bottom: 1px solid #565656;
+    }
+    &:hover .td {
+      background-color: #177ac9;
+    }
+  `,
+  Cell: `
+    &:last-of-type {
+      text-align: right;
+    },
+  `
+};
+
+const temperature_theme_config = {
+  Table: `
+    --data-table-library_grid-template-columns: minmax(0, 1fr) 35%;
+  `
+};
+
+const analog_theme_config = {
+  Table: `
+    --data-table-library_grid-template-columns: 80px repeat(1, minmax(0, 1fr)) 120px 110px;
+  `
+};
+
 const Sensors = () => {
  const { LL } = useI18nContext();
  const { me } = useContext(AuthenticatedContext);
@@ -60,17 +128,14 @@ const Sensors = () => {
  const [analogDialogOpen, setAnalogDialogOpen] = useState<boolean>(false);
  const [creating, setCreating] = useState<boolean>(false);

-  const { data: sensorData, send: fetchSensorData } = useRequest(
-    () => readSensorData(),
-    {
-      initialData: {
-        ts: [],
-        as: [],
-        analog_enabled: false,
-        platform: 'ESP32'
-      }
+  const { data: sensorData, send: fetchSensorData } = useRequest(readSensorData, {
+    initialData: {
+      ts: [],
+      as: [],
+      analog_enabled: false,
+      platform: 'ESP32'
    }
-  );
+  });

  const { send: sendTemperatureSensor } = useRequest(
    (data: WriteTemperatureSensor) => writeTemperatureSensor(data),
@@ -86,116 +151,18 @@ const Sensors = () => {
    }
  );

-  useInterval(() => {
+  const intervalCallback = useCallback(() => {
    if (!temperatureDialogOpen && !analogDialogOpen) {
      void fetchSensorData();
    }
-  });
+  }, [temperatureDialogOpen, analogDialogOpen, fetchSensorData]);

-  const common_theme = useTheme({
-    BaseRow: `
-      font-size: 14px;
-      .td {
-        height: 32px;
-      }
-    `,
-    HeaderRow: `
-      text-transform: uppercase;
-      background-color: black;
-      color: #90CAF9;
-      .th {
-        border-bottom: 1px solid #565656;
-        height: 36px;
-      }
-    `,
-    Row: `
-      background-color: #1e1e1e;
-      position: relative;
-      cursor: pointer;
-      .td {
-        padding: 8px;
-        border-bottom: 1px solid #565656;
-      }
-      &:hover .td {
-        background-color: #177ac9;
-      }
-    `,
-    Cell: `
-      &:last-of-type {
-        text-align: right;
-      },
-    `
-  });
+  useInterval(intervalCallback);

-  const temperature_theme = useTheme([
-    common_theme,
-    {
-      Table: `
-        --data-table-library_grid-template-columns: minmax(0, 1fr) 35%;
-      `
-    }
-  ]);
+  const temperature_theme = useTheme([common_theme, temperature_theme_config]);
+  const analog_theme = useTheme([common_theme, analog_theme_config]);

-  const analog_theme = useTheme([
-    common_theme,
-    {
-      Table: `
-        --data-table-library_grid-template-columns: 80px repeat(1, minmax(0, 1fr)) 120px 110px;
-      `
-    }
-  ]);
-
-  const RenderTemperatureSensors = () => (
-    <Table
-      data={{ nodes: sensorData.ts }}
-      theme={temperature_theme}
-      sort={temperature_sort}
-      layout={{ custom: true }}
-    >
-      {(tableList: TemperatureSensor[]) => (
-        <>
-          <Header>
-            <HeaderRow>
-              <HeaderCell resize>
-                <Button
-                  fullWidth
-                  style={{ fontSize: '14px', justifyContent: 'flex-start' }}
-                  endIcon={getSortIcon(temperature_sort.state, 'NAME')}
-                  onClick={() =>
-                    temperature_sort.fns.onToggleSort({ sortKey: 'NAME' })
-                  }
-                >
-                  {LL.NAME(0)}
-                </Button>
-              </HeaderCell>
-              <HeaderCell stiff>
-                <Button
-                  fullWidth
-                  style={{ fontSize: '14px', justifyContent: 'flex-end' }}
-                  endIcon={getSortIcon(temperature_sort.state, 'VALUE')}
-                  onClick={() =>
-                    temperature_sort.fns.onToggleSort({ sortKey: 'VALUE' })
-                  }
-                >
-                  {LL.VALUE(0)}
-                </Button>
-              </HeaderCell>
-            </HeaderRow>
-          </Header>
-          <Body>
-            {tableList.map((ts: TemperatureSensor) => (
-              <Row key={ts.id} item={ts} onClick={() => updateTemperatureSensor(ts)}>
-                <Cell>{ts.n}</Cell>
-                <Cell>{formatValue(ts.t, ts.u)}</Cell>
-              </Row>
-            ))}
-          </Body>
-        </>
-      )}
-    </Table>
-  );
-
-  const getSortIcon = (state: State, sortKey: unknown) => {
+  const getSortIcon = useCallback((state: State, sortKey: unknown) => {
    if (state.sortKey === sortKey && state.reverse) {
      return <KeyboardArrowDownOutlinedIcon />;
    }
@@ -203,7 +170,7 @@ const Sensors = () => {
      return <KeyboardArrowUpOutlinedIcon />;
    }
    return <UnfoldMoreOutlinedIcon />;
-  };
+  }, []);

  const analog_sort = useSort(
    { nodes: sensorData.as },
@@ -216,11 +183,16 @@ const Sensors = () => {
      },
      sortToggleType: SortToggleType.AlternateWithReset,
      sortFns: {
-        GPIO: (array) => array.sort((a, b) => a.g - b.g),
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-return
-        NAME: (array) => array.sort((a, b) => a.n.localeCompare(b.n)),
-        TYPE: (array) => array.sort((a, b) => a.t - b.t),
-        VALUE: (array) => array.sort((a, b) => a.v - b.v)
+        GPIO: (array) =>
+          [...array].sort((a, b) => (a as AnalogSensor).g - (b as AnalogSensor).g),
+        NAME: (array) =>
+          [...array].sort((a, b) =>
+            (a as AnalogSensor).n.localeCompare((b as AnalogSensor).n)
+          ),
+        TYPE: (array) =>
+          [...array].sort((a, b) => (a as AnalogSensor).t - (b as AnalogSensor).t),
+        VALUE: (array) =>
+          [...array].sort((a, b) => (a as AnalogSensor).v - (b as AnalogSensor).v)
      }
    }
  );
@@ -236,112 +208,134 @@ const Sensors = () => {
      },
      sortToggleType: SortToggleType.AlternateWithReset,
      sortFns: {
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-return
-        NAME: (array) => array.sort((a, b) => a.n.localeCompare(b.n)),
-        VALUE: (array) => array.sort((a, b) => a.t - b.t)
+        NAME: (array) =>
+          [...array].sort((a, b) =>
+            (a as TemperatureSensor).n.localeCompare((b as TemperatureSensor).n)
+          ),
+        VALUE: (array) =>
+          [...array].sort(
+            (a, b) =>
+              ((a as TemperatureSensor).t ?? 0) - ((b as TemperatureSensor).t ?? 0)
+          )
      }
    }
  );

  useLayoutTitle(LL.SENSORS());

-  const formatDurationMin = (duration_min: number) => {
-    const days = Math.trunc((duration_min * 60000) / 86400000);
-    const hours = Math.trunc((duration_min * 60000) / 3600000) % 24;
-    const minutes = Math.trunc((duration_min * 60000) / 60000) % 60;
+  const formatDurationMin = useCallback(
+    (duration_min: number) => {
+      const totalMs = duration_min * MS_PER_MINUTE;
+      const days = Math.trunc(totalMs / MS_PER_DAY);
+      const hours = Math.trunc(totalMs / MS_PER_HOUR) % 24;
+      const minutes = Math.trunc(totalMs / MS_PER_MINUTE) % 60;

-    let formatted = '';
-    if (days) {
-      formatted += LL.NUM_DAYS({ num: days }) + ' ';
-    }
-    if (hours) {
-      formatted += LL.NUM_HOURS({ num: hours }) + ' ';
-    }
-    if (minutes) {
-      formatted += LL.NUM_MINUTES({ num: minutes });
-    }
-    return formatted;
-  };
+      const parts: string[] = [];
+      if (days > 0) {
+        parts.push(LL.NUM_DAYS({ num: days }));
+      }
+      if (hours > 0) {
+        parts.push(LL.NUM_HOURS({ num: hours }));
+      }
+      if (minutes > 0) {
+        parts.push(LL.NUM_MINUTES({ num: minutes }));
+      }
+      return parts.join(' ');
+    },
+    [LL]
+  );

-  function formatValue(value: unknown, uom: DeviceValueUOM) {
-    if (value === undefined) {
-      return '';
-    }
-    if (typeof value !== 'number') {
-      return value as string;
-    }
-    switch (uom) {
-      case DeviceValueUOM.HOURS:
-        return value ? formatDurationMin(value * 60) : LL.NUM_HOURS({ num: 0 });
-      case DeviceValueUOM.MINUTES:
-        return value ? formatDurationMin(value) : LL.NUM_MINUTES({ num: 0 });
-      case DeviceValueUOM.SECONDS:
-        return LL.NUM_SECONDS({ num: value });
-      case DeviceValueUOM.NONE:
-        return new Intl.NumberFormat().format(value);
-      case DeviceValueUOM.DEGREES:
-      case DeviceValueUOM.DEGREES_R:
-      case DeviceValueUOM.FAHRENHEIT:
-        return (
-          new Intl.NumberFormat(undefined, {
-            minimumFractionDigits: 1
-          }).format(value) +
-          ' ' +
-          DeviceValueUOM_s[uom]
-        );
-      default:
-        return new Intl.NumberFormat().format(value) + ' ' + DeviceValueUOM_s[uom];
-    }
-  }
+  const formatValue = useCallback(
+    (value: unknown, uom: DeviceValueUOM) => {
+      if (value === undefined) {
+        return '';
+      }
+      if (typeof value !== 'number') {
+        return value as string;
+      }
+      switch (uom) {
+        case DeviceValueUOM.HOURS:
+          return value ? formatDurationMin(value * 60) : LL.NUM_HOURS({ num: 0 });
+        case DeviceValueUOM.MINUTES:
+          return value ? formatDurationMin(value) : LL.NUM_MINUTES({ num: 0 });
+        case DeviceValueUOM.SECONDS:
+          return LL.NUM_SECONDS({ num: value });
+        case DeviceValueUOM.NONE:
+          return new Intl.NumberFormat().format(value);
+        case DeviceValueUOM.DEGREES:
+        case DeviceValueUOM.DEGREES_R:
+        case DeviceValueUOM.FAHRENHEIT:
+          return (
+            new Intl.NumberFormat(undefined, {
+              minimumFractionDigits: 1
+            }).format(value) +
+            ' ' +
+            DeviceValueUOM_s[uom]
+          );
+        default:
+          return new Intl.NumberFormat().format(value) + ' ' + DeviceValueUOM_s[uom];
+      }
+    },
+    [formatDurationMin, LL]
+  );

-  const updateTemperatureSensor = (ts: TemperatureSensor) => {
-    if (me.admin) {
-      ts.o_n = ts.n;
-      setSelectedTemperatureSensor(ts);
-      setTemperatureDialogOpen(true);
-    }
-  };
+  const updateTemperatureSensor = useCallback(
+    (ts: TemperatureSensor) => {
+      if (me.admin) {
+        ts.o_n = ts.n;
+        setSelectedTemperatureSensor(ts);
+        setTemperatureDialogOpen(true);
+      }
+    },
+    [me.admin]
+  );

-  const onTemperatureDialogClose = () => {
+  const onTemperatureDialogClose = useCallback(() => {
    setTemperatureDialogOpen(false);
    void fetchSensorData();
-  };
+  }, [fetchSensorData]);

-  const onTemperatureDialogSave = async (ts: TemperatureSensor) => {
-    await sendTemperatureSensor({ id: ts.id, name: ts.n, offset: ts.o })
-      .then(() => {
-        toast.success(LL.UPDATED_OF(LL.SENSOR(1)));
-      })
-      .catch(() => {
-        toast.error(LL.UPDATE_OF(LL.SENSOR(2)) + ' ' + LL.FAILED(1));
-      })
-      .finally(() => {
-        setTemperatureDialogOpen(false);
-        setSelectedTemperatureSensor(undefined);
-        void fetchSensorData();
-      });
-  };
+  const onTemperatureDialogSave = useCallback(
+    async (ts: TemperatureSensor) => {
+      await sendTemperatureSensor({ id: ts.id, name: ts.n, offset: ts.o })
+        .then(() => {
+          toast.success(LL.UPDATED_OF(LL.SENSOR(1)));
+        })
+        .catch(() => {
+          toast.error(LL.UPDATE_OF(LL.SENSOR(2)) + ' ' + LL.FAILED(1));
+        })
+        .finally(() => {
+          setTemperatureDialogOpen(false);
+          setSelectedTemperatureSensor(undefined);
+          void fetchSensorData();
+        });
+    },
+    [sendTemperatureSensor, LL, fetchSensorData]
+  );

-  const updateAnalogSensor = (as: AnalogSensor) => {
-    if (me.admin) {
-      setCreating(false);
-      as.o_n = as.n;
-      setSelectedAnalogSensor(as);
-      setAnalogDialogOpen(true);
-    }
-  };
+  const updateAnalogSensor = useCallback(
+    (as: AnalogSensor) => {
+      if (me.admin) {
+        setCreating(false);
+        as.o_n = as.n;
+        setSelectedAnalogSensor(as);
+        setAnalogDialogOpen(true);
+      }
+    },
+    [me.admin]
+  );

-  const onAnalogDialogClose = () => {
+  const onAnalogDialogClose = useCallback(() => {
    setAnalogDialogOpen(false);
    void fetchSensorData();
-  };
+  }, [fetchSensorData]);

-  const addAnalogSensor = () => {
+  const addAnalogSensor = useCallback(() => {
    setCreating(true);
    setSelectedAnalogSensor({
-      id: Math.floor(Math.random() * (Math.floor(200) - 100) + 100),
+      id: Math.floor(Math.random() * (MAX_TEMP_ID - MIN_TEMP_ID) + MIN_TEMP_ID),
      n: '',
-      g: 21, // default GPIO 21 which is safe for all platforms
+      g: DEFAULT_GPIO,
      u: 0,
      v: 0,
      o: 0,
@@ -351,112 +345,197 @@ const Sensors = () => {
      o_n: ''
    });
    setAnalogDialogOpen(true);
-  };
+  }, []);

-  const onAnalogDialogSave = async (as: AnalogSensor) => {
-    await sendAnalogSensor({
-      id: as.id,
-      gpio: as.g,
-      name: as.n,
-      offset: as.o,
-      factor: as.f,
-      uom: as.u,
-      type: as.t,
-      deleted: as.d
-    })
-      .then(() => {
-        toast.success(LL.UPDATED_OF(LL.ANALOG_SENSOR(2)));
+  const onAnalogDialogSave = useCallback(
+    async (as: AnalogSensor) => {
+      await sendAnalogSensor({
+        id: as.id,
+        gpio: as.g,
+        name: as.n,
+        offset: as.o,
+        factor: as.f,
+        uom: as.u,
+        type: as.t,
+        deleted: as.d
      })
-      .catch(() => {
-        toast.error(LL.UPDATE_OF(LL.ANALOG_SENSOR(5)) + ' ' + LL.FAILED(1));
-      })
-      .finally(() => {
-        setAnalogDialogOpen(false);
-        setSelectedAnalogSensor(undefined);
-        void fetchSensorData();
-      });
-  };
+        .then(() => {
+          toast.success(LL.UPDATED_OF(LL.ANALOG_SENSOR(2)));
+        })
+        .catch(() => {
+          toast.error(LL.UPDATE_OF(LL.ANALOG_SENSOR(5)) + ' ' + LL.FAILED(1));
+        })
+        .finally(() => {
+          setAnalogDialogOpen(false);
+          setSelectedAnalogSensor(undefined);
+          void fetchSensorData();
+        });
+    },
+    [sendAnalogSensor, LL, fetchSensorData]
+  );

-  const RenderAnalogSensors = () => (
-    <Table
-      data={{ nodes: sensorData.as }}
-      theme={analog_theme}
-      sort={analog_sort}
-      layout={{ custom: true }}
-    >
-      {(tableList: AnalogSensor[]) => (
-        <>
-          <Header>
-            <HeaderRow>
-              <HeaderCell stiff>
-                <Button
-                  fullWidth
-                  style={{ fontSize: '14px', justifyContent: 'flex-start' }}
-                  endIcon={getSortIcon(analog_sort.state, 'GPIO')}
-                  onClick={() => analog_sort.fns.onToggleSort({ sortKey: 'GPIO' })}
+  const RenderAnalogSensors = useMemo(
+    () => (
+      <Table
+        data={{ nodes: sensorData.as }}
+        theme={analog_theme}
+        sort={analog_sort}
+        layout={{ custom: true }}
+      >
+        {(tableList: AnalogSensor[]) => (
+          <>
+            <Header>
+              <HeaderRow>
+                <HeaderCell stiff>
+                  <Button
+                    fullWidth
+                    style={HEADER_BUTTON_STYLE}
+                    endIcon={getSortIcon(analog_sort.state, 'GPIO')}
+                    onClick={() => analog_sort.fns.onToggleSort({ sortKey: 'GPIO' })}
+                  >
+                    GPIO
+                  </Button>
+                </HeaderCell>
+                <HeaderCell resize>
+                  <Button
+                    fullWidth
+                    style={HEADER_BUTTON_STYLE}
+                    endIcon={getSortIcon(analog_sort.state, 'NAME')}
+                    onClick={() => analog_sort.fns.onToggleSort({ sortKey: 'NAME' })}
+                  >
+                    {LL.NAME(0)}
+                  </Button>
+                </HeaderCell>
+                <HeaderCell stiff>
+                  <Button
+                    fullWidth
+                    style={HEADER_BUTTON_STYLE}
+                    endIcon={getSortIcon(analog_sort.state, 'TYPE')}
+                    onClick={() => analog_sort.fns.onToggleSort({ sortKey: 'TYPE' })}
+                  >
+                    {LL.TYPE(0)}
+                  </Button>
+                </HeaderCell>
+                <HeaderCell stiff>
+                  <Button
+                    fullWidth
+                    style={HEADER_BUTTON_STYLE_END}
+                    endIcon={getSortIcon(analog_sort.state, 'VALUE')}
+                    onClick={() =>
+                      analog_sort.fns.onToggleSort({ sortKey: 'VALUE' })
+                    }
+                  >
+                    {LL.VALUE(0)}
+                  </Button>
+                </HeaderCell>
+              </HeaderRow>
+            </Header>
+            <Body>
+              {tableList.map((a: AnalogSensor) => (
+                <Row key={a.id} item={a} onClick={() => updateAnalogSensor(a)}>
+                  <Cell stiff>{a.g}</Cell>
+                  <Cell>{a.n}</Cell>
+                  <Cell stiff>{AnalogTypeNames[a.t]} </Cell>
+                  {(a.t === AnalogType.DIGITAL_OUT &&
+                    a.g !== GPIO_25 &&
+                    a.g !== GPIO_26) ||
+                  a.t === AnalogType.DIGITAL_IN ||
+                  a.t === AnalogType.PULSE ? (
+                    <Cell stiff>{a.v ? LL.ON() : LL.OFF()}</Cell>
+                  ) : (
+                    <Cell stiff>
+                      {a.t !== AnalogType.NOTUSED ? formatValue(a.v, a.u) : ''}
+                    </Cell>
+                  )}
+                </Row>
+              ))}
+            </Body>
+          </>
+        )}
+      </Table>
+    ),
+    [
+      analog_sort,
+      analog_theme,
+      getSortIcon,
+      sensorData.as,
+      LL,
+      updateAnalogSensor,
+      formatValue
+    ]
+  );
+
+  const RenderTemperatureSensors = useMemo(
+    () => (
+      <Table
+        data={{ nodes: sensorData.ts }}
+        theme={temperature_theme}
+        sort={temperature_sort}
+        layout={{ custom: true }}
+      >
+        {(tableList: TemperatureSensor[]) => (
+          <>
+            <Header>
+              <HeaderRow>
+                <HeaderCell resize>
+                  <Button
+                    fullWidth
+                    style={HEADER_BUTTON_STYLE}
+                    endIcon={getSortIcon(temperature_sort.state, 'NAME')}
+                    onClick={() =>
+                      temperature_sort.fns.onToggleSort({ sortKey: 'NAME' })
+                    }
+                  >
+                    {LL.NAME(0)}
+                  </Button>
+                </HeaderCell>
+                <HeaderCell stiff>
+                  <Button
+                    fullWidth
+                    style={HEADER_BUTTON_STYLE_END}
+                    endIcon={getSortIcon(temperature_sort.state, 'VALUE')}
+                    onClick={() =>
+                      temperature_sort.fns.onToggleSort({ sortKey: 'VALUE' })
+                    }
+                  >
+                    {LL.VALUE(0)}
+                  </Button>
+                </HeaderCell>
+              </HeaderRow>
+            </Header>
+            <Body>
+              {tableList.map((ts: TemperatureSensor) => (
+                <Row
+                  key={ts.id}
+                  item={ts}
+                  onClick={() => updateTemperatureSensor(ts)}
                >
-                  GPIO
-                </Button>
-              </HeaderCell>
-              <HeaderCell resize>
-                <Button
-                  fullWidth
-                  style={{ fontSize: '14px', justifyContent: 'flex-start' }}
-                  endIcon={getSortIcon(analog_sort.state, 'NAME')}
-                  onClick={() => analog_sort.fns.onToggleSort({ sortKey: 'NAME' })}
-                >
-                  {LL.NAME(0)}
-                </Button>
-              </HeaderCell>
-              <HeaderCell stiff>
-                <Button
-                  fullWidth
-                  style={{ fontSize: '14px', justifyContent: 'flex-start' }}
-                  endIcon={getSortIcon(analog_sort.state, 'TYPE')}
-                  onClick={() => analog_sort.fns.onToggleSort({ sortKey: 'TYPE' })}
-                >
-                  {LL.TYPE(0)}
-                </Button>
-              </HeaderCell>
-              <HeaderCell stiff>
-                <Button
-                  fullWidth
-                  style={{ fontSize: '14px', justifyContent: 'flex-end' }}
-                  endIcon={getSortIcon(analog_sort.state, 'VALUE')}
-                  onClick={() => analog_sort.fns.onToggleSort({ sortKey: 'VALUE' })}
-                >
-                  {LL.VALUE(0)}
-                </Button>
-              </HeaderCell>
-            </HeaderRow>
-          </Header>
-          <Body>
-            {tableList.map((a: AnalogSensor) => (
-              <Row key={a.id} item={a} onClick={() => updateAnalogSensor(a)}>
-                <Cell stiff>{a.g}</Cell>
-                <Cell>{a.n}</Cell>
-                <Cell stiff>{AnalogTypeNames[a.t]} </Cell>
-                {(a.t === AnalogType.DIGITAL_OUT && a.g !== 25 && a.g !== 26) ||
-                a.t === AnalogType.DIGITAL_IN ||
-                a.t === AnalogType.PULSE ? (
-                  <Cell stiff>{a.v ? LL.ON() : LL.OFF()}</Cell>
-                ) : (
-                  <Cell stiff>{a.t ? formatValue(a.v, a.u) : ''}</Cell>
-                )}
-              </Row>
-            ))}
-          </Body>
-        </>
-      )}
-    </Table>
+                  <Cell>{ts.n}</Cell>
+                  <Cell>{formatValue(ts.t, ts.u)}</Cell>
+                </Row>
+              ))}
+            </Body>
+          </>
+        )}
+      </Table>
+    ),
+    [
+      temperature_sort,
+      temperature_theme,
+      getSortIcon,
+      sensorData.ts,
+      LL,
+      updateTemperatureSensor,
+      formatValue
+    ]
  );

  return (
    <SectionContent>
-      <Typography sx={{ pb: 1 }} variant="h6" color="secondary">
+      <Typography sx={{ pb: 1 }} variant="h6" color="primary">
        {LL.TEMP_SENSORS()}
      </Typography>
-      <RenderTemperatureSensors />
+      {RenderTemperatureSensors}
      {selectedTemperatureSensor && (
        <DashboardSensorsTemperatureDialog
          open={temperatureDialogOpen}
@@ -469,10 +548,10 @@ const Sensors = () => {
          )}
        />
      )}
-      <Typography sx={{ pt: 4, pb: 1 }} variant="h6" color="secondary">
+      <Typography sx={{ pt: 4, pb: 1 }} variant="h6" color="primary">
        {LL.ANALOG_SENSORS()}
      </Typography>
-      <RenderAnalogSensors />
+      {RenderAnalogSensors}
      {selectedAnalogSensor && (
        <DashboardSensorsAnalogDialog
          open={analogDialogOpen}
--- a/interface/src/app/main/SensorsAnalogDialog.tsx
+++ b/interface/src/app/main/SensorsAnalogDialog.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';

 import CancelIcon from '@mui/icons-material/Cancel';
 import RemoveIcon from '@mui/icons-material/RemoveCircleOutline';
@@ -48,8 +48,72 @@ const SensorsAnalogDialog = ({
  const { LL } = useI18nContext();
  const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();
  const [editItem, setEditItem] = useState<AnalogSensor>(selectedItem);
-  const updateFormValue = updateValue(setEditItem);

+  const updateFormValue = useMemo(
+    () =>
+      updateValue((updater) =>
+        setEditItem(
+          (prev) =>
+            updater(
+              prev as unknown as Record<string, unknown>
+            ) as unknown as AnalogSensor
+        )
+      ),
+    [setEditItem]
+  );
+
+  // Memoize helper functions to check sensor type conditions
+  const isCounterOrRate = useMemo(
+    () => editItem.t >= AnalogType.COUNTER && editItem.t <= AnalogType.RATE,
+    [editItem.t]
+  );
+  const isFreqType = useMemo(
+    () => editItem.t >= AnalogType.FREQ_0 && editItem.t <= AnalogType.FREQ_2,
+    [editItem.t]
+  );
+  const isPWM = useMemo(
+    () =>
+      editItem.t === AnalogType.PWM_0 ||
+      editItem.t === AnalogType.PWM_1 ||
+      editItem.t === AnalogType.PWM_2,
+    [editItem.t]
+  );
+  const isDigitalOutGPIO = useMemo(
+    () =>
+      editItem.t === AnalogType.DIGITAL_OUT &&
+      (editItem.g === 25 || editItem.g === 26),
+    [editItem.t, editItem.g]
+  );
+  const isDigitalOutNonGPIO = useMemo(
+    () =>
+      editItem.t === AnalogType.DIGITAL_OUT &&
+      editItem.g !== 25 &&
+      editItem.g !== 26,
+    [editItem.t, editItem.g]
+  );
+
+  // Memoize menu items to avoid recreation on each render
+  const analogTypeMenuItems = useMemo(
+    () =>
+      AnalogTypeNames.map((val, i) => (
+        <MenuItem key={val} value={i}>
+          {val}
+        </MenuItem>
+      )),
+    []
+  );
+
+  const uomMenuItems = useMemo(
+    () =>
+      DeviceValueUOM_s.map((val, i) => (
+        <MenuItem key={val} value={i}>
+          {val}
+        </MenuItem>
+      )),
+    []
+  );
+
+  // Reset form when dialog opens or selectedItem changes
  useEffect(() => {
    if (open) {
      setFieldErrors(undefined);
@@ -57,16 +121,16 @@ const SensorsAnalogDialog = ({
    }
  }, [open, selectedItem]);

-  const handleClose = (
-    _event: React.SyntheticEvent,
-    reason: 'backdropClick' | 'escapeKeyDown'
-  ) => {
-    if (reason !== 'backdropClick') {
-      onClose();
-    }
-  };
+  const handleClose = useCallback(
+    (_event: React.SyntheticEvent, reason: 'backdropClick' | 'escapeKeyDown') => {
+      if (reason !== 'backdropClick') {
+        onClose();
+      }
+    },
+    [onClose]
+  );

-  const save = async () => {
+  const save = useCallback(async () => {
    try {
      setFieldErrors(undefined);
      await validate(validator, editItem);
@@ -74,19 +138,21 @@ const SensorsAnalogDialog = ({
    } catch (error) {
      setFieldErrors(error as ValidateFieldsError);
    }
-  };
+  }, [validator, editItem, onSave]);

-  const remove = () => {
-    editItem.d = true;
-    onSave(editItem);
-  };
+  const remove = useCallback(() => {
+    onSave({ ...editItem, d: true });
+  }, [editItem, onSave]);
+
+  const dialogTitle = useMemo(
+    () =>
+      `${creating ? LL.ADD(1) + ' ' + LL.NEW(0) : LL.EDIT()} ${LL.ANALOG_SENSOR(0)}`,
+    [creating, LL]
+  );

  return (
    <Dialog sx={dialogStyle} open={open} onClose={handleClose}>
-      <DialogTitle>
-        {creating ? LL.ADD(1) + ' ' + LL.NEW(0) : LL.EDIT()}&nbsp;
-        {LL.ANALOG_SENSOR(0)}
-      </DialogTitle>
+      <DialogTitle>{dialogTitle}</DialogTitle>
      <DialogContent dividers>
        <Grid container spacing={2}>
          <Grid>
@@ -128,16 +194,10 @@ const SensorsAnalogDialog = ({
              select
              onChange={updateFormValue}
            >
-              {AnalogTypeNames.map((val, i) => (
-                <MenuItem key={val} value={i}>
-                  {val}
-                </MenuItem>
-              ))}
+              {analogTypeMenuItems}
            </TextField>
          </Grid>
-          {((editItem.t >= AnalogType.COUNTER && editItem.t <= AnalogType.RATE) ||
-            (editItem.t >= AnalogType.FREQ_0 &&
-              editItem.t <= AnalogType.FREQ_2)) && (
+          {(isCounterOrRate || isFreqType) && (
            <Grid>
              <TextField
                name="u"
@@ -147,11 +207,7 @@ const SensorsAnalogDialog = ({
                select
                onChange={updateFormValue}
              >
-                {DeviceValueUOM_s.map((val, i) => (
-                  <MenuItem key={val} value={i}>
-                    {val}
-                  </MenuItem>
-                ))}
+                {uomMenuItems}
              </TextField>
            </Grid>
          )}
@@ -226,7 +282,7 @@ const SensorsAnalogDialog = ({
              />
            </Grid>
          )}
-          {editItem.t >= AnalogType.COUNTER && editItem.t <= AnalogType.RATE && (
+          {isCounterOrRate && (
            <Grid>
              <TextField
                name="f"
@@ -242,76 +298,71 @@ const SensorsAnalogDialog = ({
              />
            </Grid>
          )}
-          {editItem.t === AnalogType.DIGITAL_OUT &&
-            (editItem.g === 25 || editItem.g === 26) && (
+          {isDigitalOutGPIO && (
+            <Grid>
+              <TextField
+                name="o"
+                label={LL.VALUE(0)}
+                value={numberValue(editItem.o)}
+                sx={{ width: '11ch' }}
+                type="number"
+                variant="outlined"
+                onChange={updateFormValue}
+                slotProps={{
+                  htmlInput: { min: '0', max: '255', step: '1' }
+                }}
+              />
+            </Grid>
+          )}
+          {isDigitalOutNonGPIO && (
+            <>
              <Grid>
                <TextField
                  name="o"
                  label={LL.VALUE(0)}
                  value={numberValue(editItem.o)}
-                  sx={{ width: '11ch' }}
-                  type="number"
+                  select
                  variant="outlined"
                  onChange={updateFormValue}
-                  slotProps={{
-                    htmlInput: { min: '0', max: '255', step: '1' }
-                  }}
-                />
+                >
+                  <MenuItem value={0}>{LL.OFF()}</MenuItem>
+                  <MenuItem value={1}>{LL.ON()}</MenuItem>
+                </TextField>
              </Grid>
-            )}
-          {editItem.t === AnalogType.DIGITAL_OUT &&
-            editItem.g !== 25 &&
-            editItem.g !== 26 && (
-              <>
-                <Grid>
-                  <TextField
-                    name="o"
-                    label={LL.VALUE(0)}
-                    value={numberValue(editItem.o)}
-                    select
-                    variant="outlined"
-                    onChange={updateFormValue}
-                  >
-                    <MenuItem value={0}>{LL.OFF()}</MenuItem>
-                    <MenuItem value={1}>{LL.ON()}</MenuItem>
-                  </TextField>
-                </Grid>
-                <Grid>
-                  <TextField
-                    name="f"
-                    label={LL.POLARITY()}
-                    value={editItem.f}
-                    sx={{ width: '15ch' }}
-                    select
-                    onChange={updateFormValue}
-                  >
-                    <MenuItem value={1}>{LL.ACTIVEHIGH()}</MenuItem>
-                    <MenuItem value={-1}>{LL.ACTIVELOW()}</MenuItem>
-                  </TextField>
-                </Grid>
-                <Grid>
-                  <TextField
-                    name="u"
-                    label={LL.STARTVALUE()}
-                    sx={{ width: '15ch' }}
-                    value={editItem.u}
-                    select
-                    onChange={updateFormValue}
-                  >
-                    <MenuItem value={0}>{LL.UNCHANGED()}</MenuItem>
-                    <MenuItem value={1}>
-                      {LL.ALWAYS()}&nbsp;{LL.OFF()}
-                    </MenuItem>
-                    <MenuItem value={2}>
-                      {LL.ALWAYS()}&nbsp;{LL.ON()}
-                    </MenuItem>
-                  </TextField>
-                </Grid>
-              </>
-            )}
-          {(editItem.t === AnalogType.PWM_0 ||
-            editItem.t === AnalogType.PWM_1 ||
-            editItem.t === AnalogType.PWM_2) && (
+              <Grid>
+                <TextField
+                  name="f"
+                  label={LL.POLARITY()}
+                  value={editItem.f}
+                  sx={{ width: '15ch' }}
+                  select
+                  onChange={updateFormValue}
+                >
+                  <MenuItem value={1}>{LL.ACTIVEHIGH()}</MenuItem>
+                  <MenuItem value={-1}>{LL.ACTIVELOW()}</MenuItem>
+                </TextField>
+              </Grid>
+              <Grid>
+                <TextField
+                  name="u"
+                  label={LL.STARTVALUE()}
+                  sx={{ width: '15ch' }}
+                  value={editItem.u}
+                  select
+                  onChange={updateFormValue}
+                >
+                  <MenuItem value={0}>{LL.UNCHANGED()}</MenuItem>
+                  <MenuItem value={1}>
+                    {LL.ALWAYS()}&nbsp;{LL.OFF()}
+                  </MenuItem>
+                  <MenuItem value={2}>
+                    {LL.ALWAYS()}&nbsp;{LL.ON()}
+                  </MenuItem>
+                </TextField>
+              </Grid>
+            </>
+          )}
+          {isPWM && (
            <>
              <Grid>
                <TextField
--- a/interface/src/app/main/SensorsTemperatureDialog.tsx
+++ b/interface/src/app/main/SensorsTemperatureDialog.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';

 import CancelIcon from '@mui/icons-material/Cancel';
 import WarningIcon from '@mui/icons-material/Warning';
@@ -33,6 +33,12 @@ interface SensorsTemperatureDialogProps {
  validator: Schema;
 }

+// Constants
+const OFFSET_MIN = -5;
+const OFFSET_MAX = 5;
+const OFFSET_STEP = 0.1;
+const TEMP_UNIT = '°C';
+
 const SensorsTemperatureDialog = ({
  open,
  onClose,
@@ -43,7 +49,18 @@ const SensorsTemperatureDialog = ({
  const { LL } = useI18nContext();
  const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();
  const [editItem, setEditItem] = useState<TemperatureSensor>(selectedItem);
-  const updateFormValue = updateValue(setEditItem);
+
+  const updateFormValue = useMemo(
+    () =>
+      updateValue(
+        setEditItem as unknown as (
+          updater: (
+            prevState: Readonly<Record<string, unknown>>
+          ) => Record<string, unknown>
+        ) => void
+      ),
+    [setEditItem]
+  );

  useEffect(() => {
    if (open) {
@@ -52,16 +69,16 @@ const SensorsTemperatureDialog = ({
    }
  }, [open, selectedItem]);

-  const handleClose = (
-    _event: React.SyntheticEvent,
-    reason: 'backdropClick' | 'escapeKeyDown'
-  ) => {
-    if (reason !== 'backdropClick') {
-      onClose();
-    }
-  };
+  const handleClose = useCallback(
+    (_event: React.SyntheticEvent, reason?: string) => {
+      if (reason !== 'backdropClick') {
+        onClose();
+      }
+    },
+    [onClose]
+  );

-  const save = async () => {
+  const save = useCallback(async () => {
    try {
      setFieldErrors(undefined);
      await validate(validator, editItem);
@@ -69,15 +86,31 @@ const SensorsTemperatureDialog = ({
    } catch (error) {
      setFieldErrors(error as ValidateFieldsError);
    }
-  };
+  }, [validator, editItem, onSave]);
+
+  const dialogTitle = useMemo(() => `${LL.EDIT()} ${LL.TEMP_SENSOR()}`, [LL]);
+
+  const offsetValue = useMemo(() => numberValue(editItem.o), [editItem.o]);
+
+  const slotProps = useMemo(
+    () => ({
+      input: {
+        startAdornment: <InputAdornment position="start">{TEMP_UNIT}</InputAdornment>
+      },
+      htmlInput: {
+        min: OFFSET_MIN,
+        max: OFFSET_MAX,
+        step: OFFSET_STEP
+      }
+    }),
+    []
+  );

  return (
    <Dialog sx={dialogStyle} open={open} onClose={handleClose}>
-      <DialogTitle>
-        {LL.EDIT()}&nbsp;{LL.TEMP_SENSOR()}
-      </DialogTitle>
+      <DialogTitle>{dialogTitle}</DialogTitle>
      <DialogContent dividers>
-        <Box color="warning.main" p={0} pl={0} pr={0} mt={0} mb={2}>
+        <Box color="warning.main" mb={2}>
          <Typography variant="body2">
            {LL.ID_OF(LL.SENSOR(0))}: {editItem.id}
          </Typography>
@@ -85,7 +118,7 @@ const SensorsTemperatureDialog = ({
        <Grid container spacing={2}>
          <Grid>
            <ValidatedTextField
-              fieldErrors={fieldErrors || {}}
+              fieldErrors={fieldErrors ?? {}}
              name="n"
              label={LL.NAME(0)}
              value={editItem.n}
@@ -97,19 +130,12 @@ const SensorsTemperatureDialog = ({
            <TextField
              name="o"
              label={LL.OFFSET()}
-              value={numberValue(editItem.o)}
+              value={offsetValue}
              sx={{ width: '11ch' }}
              type="number"
              variant="outlined"
              onChange={updateFormValue}
-              slotProps={{
-                input: {
-                  startAdornment: (
-                    <InputAdornment position="start">°C</InputAdornment>
-                  )
-                },
-                htmlInput: { min: '-5', max: '5', step: '0.1' }
-              }}
+              slotProps={slotProps}
            />
          </Grid>
        </Grid>
--- a/interface/src/app/main/deviceValue.ts
+++ b/interface/src/app/main/deviceValue.ts
@@ -2,27 +2,30 @@ import type { TranslationFunctions } from 'i18n/i18n-types';

 import { DeviceValueUOM, DeviceValueUOM_s } from './types';

+// Cache NumberFormat instances for better performance
+const numberFormatter = new Intl.NumberFormat();
+const numberFormatterWithDecimal = new Intl.NumberFormat(undefined, {
+  minimumFractionDigits: 1
+});
+
 const formatDurationMin = (LL: TranslationFunctions, duration_min: number) => {
-  const days = Math.trunc((duration_min * 60000) / 86400000);
-  const hours = Math.trunc((duration_min * 60000) / 3600000) % 24;
-  const minutes = Math.trunc((duration_min * 60000) / 60000) % 60;
+  const totalMs = duration_min * 60000;
+  const days = Math.trunc(totalMs / 86400000);
+  const hours = Math.trunc(totalMs / 3600000) % 24;
+  const minutes = Math.trunc(duration_min) % 60;

-  let formatted = '';
+  const parts: string[] = [];
  if (days) {
-    formatted += LL.NUM_DAYS({ num: days });
+    parts.push(LL.NUM_DAYS({ num: days }));
  }
-
  if (hours) {
-    if (formatted) formatted += ' ';
-    formatted += LL.NUM_HOURS({ num: hours });
+    parts.push(LL.NUM_HOURS({ num: hours }));
  }
-
  if (minutes) {
-    if (formatted) formatted += ' ';
-    formatted += LL.NUM_MINUTES({ num: minutes });
+    parts.push(LL.NUM_MINUTES({ num: minutes }));
  }

-  return formatted;
+  return parts.join(' ');
 };

 export function formatValue(
@@ -30,18 +33,21 @@ export function formatValue(
  value?: unknown,
  uom?: DeviceValueUOM
 ) {
+  // Handle non-numeric values or missing data
  if (typeof value !== 'number' || uom === undefined || value === undefined) {
    if (value === undefined || typeof value === 'boolean') {
      return '';
    }
+    // Type assertion is safe here since we know it's not a number, boolean, or undefined
    return (
      (value as string) +
-      (value === '' || uom === undefined || uom === 0
+      (value === '' || uom === undefined || uom === DeviceValueUOM.NONE
        ? ''
        : ' ' + DeviceValueUOM_s[uom])
    );
  }

+  // Handle numeric values
  switch (uom) {
    case DeviceValueUOM.HOURS:
      return value ? formatDurationMin(LL, value * 60) : LL.NUM_HOURS({ num: 0 });
@@ -50,18 +56,12 @@ export function formatValue(
    case DeviceValueUOM.SECONDS:
      return LL.NUM_SECONDS({ num: value });
    case DeviceValueUOM.NONE:
-      return new Intl.NumberFormat().format(value);
+      return numberFormatter.format(value);
    case DeviceValueUOM.DEGREES:
    case DeviceValueUOM.DEGREES_R:
    case DeviceValueUOM.FAHRENHEIT:
-      return (
-        new Intl.NumberFormat(undefined, {
-          minimumFractionDigits: 1
-        }).format(value) +
-        ' ' +
-        DeviceValueUOM_s[uom]
-      );
+      return numberFormatterWithDecimal.format(value) + ' ' + DeviceValueUOM_s[uom];
    default:
-      return new Intl.NumberFormat().format(value) + ' ' + DeviceValueUOM_s[uom];
+      return numberFormatter.format(value) + ' ' + DeviceValueUOM_s[uom];
  }
 }
--- a/interface/src/app/main/types.ts
+++ b/interface/src/app/main/types.ts
@@ -60,7 +60,7 @@ export interface Stat {
 }

 export interface Activity {
-  stats: Stat[];
+  readonly stats: readonly Stat[];
 }

 export interface Device {
@@ -112,8 +112,8 @@ export interface SensorData {
 }

 export interface CoreData {
-  connected: boolean;
-  devices: Device[];
+  readonly connected: boolean;
+  readonly devices: readonly Device[];
 }

 export interface DashboardItem {
@@ -122,11 +122,12 @@ export interface DashboardItem {
  n?: string; // name, optional
  dv?: DeviceValue; // device value, optional
  nodes?: DashboardItem[]; // children nodes, optional
+  parentNode: DashboardItem; // to stop lint errors
 }

 export interface DashboardData {
-  connected: boolean; // true if connected to EMS bus
-  nodes: DashboardItem[];
+  readonly connected: boolean; // true if connected to EMS bus
+  readonly nodes: readonly DashboardItem[];
 }

 export interface DeviceValue {
@@ -139,10 +140,11 @@ export interface DeviceValue {
  s?: string; // steps for up/down, optional
  m?: number; // min, optional
  x?: number; // max, optional
+  [key: string]: unknown;
 }

 export interface DeviceData {
-  nodes: DeviceValue[];
+  readonly nodes: readonly DeviceValue[];
 }

 export interface DeviceEntity {
@@ -221,7 +223,7 @@ export const DeviceValueUOM_s = [
  'l/h',
  'ct/kWh',
  'Hz'
-];
+] as const;

 export enum AnalogType {
  REMOVED = -1,
@@ -260,11 +262,9 @@ export const AnalogTypeNames = [
  'Freq 0',
  'Freq 1',
  'Freq 2'
-];
+] as const;

-type BoardProfiles = Record<string, string>;
-
-export const BOARD_PROFILES: BoardProfiles = {
+export const BOARD_PROFILES = {
  S32: 'BBQKees Gateway S32',
  S32S3: 'BBQKees Gateway S3',
  E32: 'BBQKees Gateway E32',
@@ -278,7 +278,9 @@ export const BOARD_PROFILES: BoardProfiles = {
  C3MINI: 'Wemos C3 Mini',
  S2MINI: 'Wemos S2 Mini',
  S3MINI: 'Liligo S3'
-};
+} as const;
+
+export type BoardProfileKey = keyof typeof BOARD_PROFILES;

 export interface BoardProfile {
  board_profile: string;
@@ -346,7 +348,7 @@ export interface ScheduleItem {
 }

 export interface Schedule {
-  schedule: ScheduleItem[];
+  readonly schedule: readonly ScheduleItem[];
 }

 export interface ModuleItem {
@@ -364,7 +366,7 @@ export interface ModuleItem {
 }

 export interface Modules {
-  modules: ModuleItem[];
+  readonly modules: readonly ModuleItem[];
 }

 export enum ScheduleFlag {
@@ -413,7 +415,7 @@ export interface EntityItem {
 }

 export interface Entities {
-  entities: EntityItem[];
+  readonly entities: readonly EntityItem[];
 }

 // matches emsdevice.h DeviceType
@@ -469,4 +471,4 @@ export const DeviceValueTypeNames = [
  'ENUM',
  'RAW',
  'CMD'
-];
+] as const;
--- a/interface/src/app/main/validators.ts
+++ b/interface/src/app/main/validators.ts
@@ -11,273 +11,264 @@ import type {
  TemperatureSensor
 } from './types';

-export const GPIO_VALIDATOR = {
+// Constants
+const ERROR_MESSAGES = {
+  GPIO_INVALID: 'Must be an valid GPIO port',
+  NAME_DUPLICATE: 'Name already in use',
+  GPIO_DUPLICATE: 'GPIO already in use',
+  VALUE_OUT_OF_RANGE: 'Value out of range',
+  HEX_REQUIRED: 'Is required and must be in hex format'
+} as const;
+
+const VALIDATION_LIMITS = {
+  PORT_MIN: 0,
+  PORT_MAX: 65535,
+  MODBUS_MAX_CLIENTS_MIN: 0,
+  MODBUS_MAX_CLIENTS_MAX: 50,
+  MODBUS_TIMEOUT_MIN: 100,
+  MODBUS_TIMEOUT_MAX: 20000,
+  SYSLOG_MARK_INTERVAL_MIN: 0,
+  SYSLOG_MARK_INTERVAL_MAX: 10,
+  SHOWER_MIN_DURATION_MIN: 10,
+  SHOWER_MIN_DURATION_MAX: 360,
+  SHOWER_ALERT_TRIGGER_MIN: 1,
+  SHOWER_ALERT_TRIGGER_MAX: 20,
+  SHOWER_ALERT_COLDSHOT_MIN: 1,
+  SHOWER_ALERT_COLDSHOT_MAX: 10,
+  REMOTE_TIMEOUT_MIN: 1,
+  REMOTE_TIMEOUT_MAX: 240,
+  OFFSET_MIN: 0,
+  OFFSET_MAX: 255,
+  COMMAND_MIN: 1,
+  COMMAND_MAX: 300,
+  NAME_MAX_LENGTH: 19,
+  HEX_BASE: 16
+} as const;
+
+// Helper to create GPIO validator from invalid ranges
+const createGPIOValidator = (
+  invalidRanges: Array<number | [number, number]>,
+  maxValue: number
+) => ({
  validator(
    _rule: InternalRuleItem,
    value: number,
    callback: (error?: string) => void
  ) {
-    if (
-      value &&
-      (value === 1 ||
-        (value >= 6 && value <= 11) ||
-        value === 20 ||
-        value === 24 ||
-        (value >= 28 && value <= 31) ||
-        value > 40 ||
-        value < 0)
-    ) {
-      callback('Must be an valid GPIO port');
-    } else {
+    if (!value) {
      callback();
+      return;
    }
-  }
-};

-export const GPIO_VALIDATORR = {
-  validator(
-    _rule: InternalRuleItem,
-    value: number,
-    callback: (error?: string) => void
+    if (value < 0 || value > maxValue) {
+      callback(ERROR_MESSAGES.GPIO_INVALID);
+      return;
+    }
+
+    for (const range of invalidRanges) {
+      if (typeof range === 'number') {
+        if (value === range) {
+          callback(ERROR_MESSAGES.GPIO_INVALID);
+          return;
+        }
+      } else {
+        const [start, end] = range;
+        if (value >= start && value <= end) {
+          callback(ERROR_MESSAGES.GPIO_INVALID);
+          return;
+        }
+      }
+    }
+
+    callback();
+  }
+});
+
+export const GPIO_VALIDATOR = createGPIOValidator(
+  [[6, 11], 1, 20, 24, [28, 31]],
+  40
+);
+
+export const GPIO_VALIDATORC3 = createGPIOValidator([[11, 19]], 21);
+
+export const GPIO_VALIDATORS2 = createGPIOValidator(
+  [
+    [19, 20],
+    [22, 32]
+  ],
+  40
+);
+
+export const GPIO_VALIDATORS3 = createGPIOValidator(
+  [
+    [19, 20],
+    [22, 37],
+    [39, 42]
+  ],
+  48
+);
+
+const GPIO_FIELD_NAMES = [
+  'led_gpio',
+  'dallas_gpio',
+  'pbutton_gpio',
+  'tx_gpio',
+  'rx_gpio'
+] as const;
+
+type ValidationRules = Array<{
+  required?: boolean;
+  message?: string;
+  [key: string]: unknown;
+}>;
+
+const createGPIOValidations = (
+  validator: typeof GPIO_VALIDATOR
+): Record<string, ValidationRules> =>
+  GPIO_FIELD_NAMES.reduce(
+    (acc, field) => {
+      const fieldName = field.replace('_gpio', '').toUpperCase();
+      acc[field] = [
+        { required: true, message: `${fieldName} GPIO is required` },
+        validator
+      ];
+      return acc;
+    },
+    {} as Record<string, ValidationRules>
+  );
+
+const PLATFORM_VALIDATORS = {
+  ESP32: GPIO_VALIDATOR,
+  ESP32C3: GPIO_VALIDATORC3,
+  ESP32S2: GPIO_VALIDATORS2,
+  ESP32S3: GPIO_VALIDATORS3
+} as const;
+
+export const createSettingsValidator = (settings: Settings) => {
+  const schema: Record<string, ValidationRules> = {};
+
+  // Add GPIO validations for CUSTOM board profiles
+  if (
+    settings.board_profile === 'CUSTOM' &&
+    settings.platform in PLATFORM_VALIDATORS
  ) {
-    if (
-      value &&
-      (value === 1 ||
-        (value >= 6 && value <= 11) ||
-        (value >= 16 && value <= 17) ||
-        value === 20 ||
-        value === 24 ||
-        (value >= 28 && value <= 31) ||
-        value > 40 ||
-        value < 0)
-    ) {
-      callback('Must be an valid GPIO port');
-    } else {
-      callback();
-    }
+    Object.assign(
+      schema,
+      createGPIOValidations(
+        PLATFORM_VALIDATORS[settings.platform as keyof typeof PLATFORM_VALIDATORS]
+      )
+    );
  }
+
+  // Syslog validations
+  if (settings.syslog_enabled) {
+    schema.syslog_host = [
+      { required: true, message: 'Host is required' },
+      IP_OR_HOSTNAME_VALIDATOR
+    ];
+    schema.syslog_port = [
+      { required: true, message: 'Port is required' },
+      {
+        type: 'number',
+        min: VALIDATION_LIMITS.PORT_MIN,
+        max: VALIDATION_LIMITS.PORT_MAX,
+        message: 'Invalid Port'
+      }
+    ];
+    schema.syslog_mark_interval = [
+      { required: true, message: 'Mark interval is required' },
+      {
+        type: 'number',
+        min: VALIDATION_LIMITS.SYSLOG_MARK_INTERVAL_MIN,
+        max: VALIDATION_LIMITS.SYSLOG_MARK_INTERVAL_MAX,
+        message: `Must be between ${VALIDATION_LIMITS.SYSLOG_MARK_INTERVAL_MIN} and ${VALIDATION_LIMITS.SYSLOG_MARK_INTERVAL_MAX}`
+      }
+    ];
+  }
+
+  // Modbus validations
+  if (settings.modbus_enabled) {
+    schema.modbus_max_clients = [
+      { required: true, message: 'Max clients is required' },
+      {
+        type: 'number',
+        min: VALIDATION_LIMITS.MODBUS_MAX_CLIENTS_MIN,
+        max: VALIDATION_LIMITS.MODBUS_MAX_CLIENTS_MAX,
+        message: 'Invalid number'
+      }
+    ];
+    schema.modbus_port = [
+      { required: true, message: 'Port is required' },
+      {
+        type: 'number',
+        min: VALIDATION_LIMITS.PORT_MIN,
+        max: VALIDATION_LIMITS.PORT_MAX,
+        message: 'Invalid Port'
+      }
+    ];
+    schema.modbus_timeout = [
+      { required: true, message: 'Timeout is required' },
+      {
+        type: 'number',
+        min: VALIDATION_LIMITS.MODBUS_TIMEOUT_MIN,
+        max: VALIDATION_LIMITS.MODBUS_TIMEOUT_MAX,
+        message: `Must be between ${VALIDATION_LIMITS.MODBUS_TIMEOUT_MIN} and ${VALIDATION_LIMITS.MODBUS_TIMEOUT_MAX}`
+      }
+    ];
+  }
+
+  // Shower timer validations
+  if (settings.shower_timer) {
+    schema.shower_min_duration = [
+      {
+        type: 'number',
+        min: VALIDATION_LIMITS.SHOWER_MIN_DURATION_MIN,
+        max: VALIDATION_LIMITS.SHOWER_MIN_DURATION_MAX,
+        message: `Time must be between ${VALIDATION_LIMITS.SHOWER_MIN_DURATION_MIN} and ${VALIDATION_LIMITS.SHOWER_MIN_DURATION_MAX} seconds`
+      }
+    ];
+  }
+
+  // Shower alert validations
+  if (settings.shower_alert) {
+    schema.shower_alert_trigger = [
+      {
+        type: 'number',
+        min: VALIDATION_LIMITS.SHOWER_ALERT_TRIGGER_MIN,
+        max: VALIDATION_LIMITS.SHOWER_ALERT_TRIGGER_MAX,
+        message: `Time must be between ${VALIDATION_LIMITS.SHOWER_ALERT_TRIGGER_MIN} and ${VALIDATION_LIMITS.SHOWER_ALERT_TRIGGER_MAX} minutes`
+      }
+    ];
+    schema.shower_alert_coldshot = [
+      {
+        type: 'number',
+        min: VALIDATION_LIMITS.SHOWER_ALERT_COLDSHOT_MIN,
+        max: VALIDATION_LIMITS.SHOWER_ALERT_COLDSHOT_MAX,
+        message: `Time must be between ${VALIDATION_LIMITS.SHOWER_ALERT_COLDSHOT_MIN} and ${VALIDATION_LIMITS.SHOWER_ALERT_COLDSHOT_MAX} seconds`
+      }
+    ];
+  }
+
+  // Remote timeout validations
+  if (settings.remote_timeout_en) {
+    schema.remote_timeout = [
+      {
+        type: 'number',
+        min: VALIDATION_LIMITS.REMOTE_TIMEOUT_MIN,
+        max: VALIDATION_LIMITS.REMOTE_TIMEOUT_MAX,
+        message: `Timeout must be between ${VALIDATION_LIMITS.REMOTE_TIMEOUT_MIN} and ${VALIDATION_LIMITS.REMOTE_TIMEOUT_MAX} hours`
+      }
+    ];
+  }
+
+  return new Schema(schema);
 };

-export const GPIO_VALIDATORC3 = {
-  validator(
-    _rule: InternalRuleItem,
-    value: number,
-    callback: (error?: string) => void
-  ) {
-    if (value && ((value >= 11 && value <= 19) || value > 21 || value < 0)) {
-      callback('Must be an valid GPIO port');
-    } else {
-      callback();
-    }
-  }
-};
-
-export const GPIO_VALIDATORS2 = {
-  validator(
-    _rule: InternalRuleItem,
-    value: number,
-    callback: (error?: string) => void
-  ) {
-    if (
-      value &&
-      ((value >= 19 && value <= 20) ||
-        (value >= 22 && value <= 32) ||
-        value > 40 ||
-        value < 0)
-    ) {
-      callback('Must be an valid GPIO port');
-    } else {
-      callback();
-    }
-  }
-};
-
-export const GPIO_VALIDATORS3 = {
-  validator(
-    _rule: InternalRuleItem,
-    value: number,
-    callback: (error?: string) => void
-  ) {
-    if (
-      value &&
-      ((value >= 19 && value <= 20) ||
-        (value >= 22 && value <= 37) ||
-        (value >= 39 && value <= 42) ||
-        value > 48 ||
-        value < 0)
-    ) {
-      callback('Must be an valid GPIO port');
-    } else {
-      callback();
-    }
-  }
-};
-
-export const createSettingsValidator = (settings: Settings) =>
-  new Schema({
-    ...(settings.board_profile === 'CUSTOM' &&
-      settings.platform === 'ESP32' && {
-        led_gpio: [
-          { required: true, message: 'LED GPIO is required' },
-          GPIO_VALIDATOR
-        ],
-        dallas_gpio: [
-          { required: true, message: 'GPIO is required' },
-          GPIO_VALIDATOR
-        ],
-        pbutton_gpio: [
-          { required: true, message: 'Button GPIO is required' },
-          GPIO_VALIDATOR
-        ],
-        tx_gpio: [
-          { required: true, message: 'Tx GPIO is required' },
-          GPIO_VALIDATOR
-        ],
-        rx_gpio: [{ required: true, message: 'Rx GPIO is required' }, GPIO_VALIDATOR]
-      }),
-    ...(settings.board_profile === 'CUSTOM' &&
-      settings.platform === 'ESP32C3' && {
-        led_gpio: [
-          { required: true, message: 'LED GPIO is required' },
-          GPIO_VALIDATORC3
-        ],
-        dallas_gpio: [
-          { required: true, message: 'GPIO is required' },
-          GPIO_VALIDATORC3
-        ],
-        pbutton_gpio: [
-          { required: true, message: 'Button GPIO is required' },
-          GPIO_VALIDATORC3
-        ],
-        tx_gpio: [
-          { required: true, message: 'Tx GPIO is required' },
-          GPIO_VALIDATORC3
-        ],
-        rx_gpio: [
-          { required: true, message: 'Rx GPIO is required' },
-          GPIO_VALIDATORC3
-        ]
-      }),
-    ...(settings.board_profile === 'CUSTOM' &&
-      settings.platform === 'ESP32S2' && {
-        led_gpio: [
-          { required: true, message: 'LED GPIO is required' },
-          GPIO_VALIDATORS2
-        ],
-        dallas_gpio: [
-          { required: true, message: 'GPIO is required' },
-          GPIO_VALIDATORS2
-        ],
-        pbutton_gpio: [
-          { required: true, message: 'Button GPIO is required' },
-          GPIO_VALIDATORS2
-        ],
-        tx_gpio: [
-          { required: true, message: 'Tx GPIO is required' },
-          GPIO_VALIDATORS2
-        ],
-        rx_gpio: [
-          { required: true, message: 'Rx GPIO is required' },
-          GPIO_VALIDATORS2
-        ]
-      }),
-    ...(settings.board_profile === 'CUSTOM' &&
-      settings.platform === 'ESP32S3' && {
-        led_gpio: [
-          { required: true, message: 'LED GPIO is required' },
-          GPIO_VALIDATORS3
-        ],
-        dallas_gpio: [
-          { required: true, message: 'GPIO is required' },
-          GPIO_VALIDATORS3
-        ],
-        pbutton_gpio: [
-          { required: true, message: 'Button GPIO is required' },
-          GPIO_VALIDATORS3
-        ],
-        tx_gpio: [
-          { required: true, message: 'Tx GPIO is required' },
-          GPIO_VALIDATORS3
-        ],
-        rx_gpio: [
-          { required: true, message: 'Rx GPIO is required' },
-          GPIO_VALIDATORS3
-        ]
-      }),
-    ...(settings.syslog_enabled && {
-      syslog_host: [
-        { required: true, message: 'Host is required' },
-        IP_OR_HOSTNAME_VALIDATOR
-      ],
-      syslog_port: [
-        { required: true, message: 'Port is required' },
-        { type: 'number', min: 0, max: 65535, message: 'Invalid Port' }
-      ],
-      syslog_mark_interval: [
-        { required: true, message: 'Mark interval is required' },
-        { type: 'number', min: 0, max: 10, message: 'Must be between 0 and 10' }
-      ]
-    }),
-    ...(settings.modbus_enabled && {
-      modbus_max_clients: [
-        { required: true, message: 'Max clients is required' },
-        { type: 'number', min: 0, max: 50, message: 'Invalid number' }
-      ],
-      modbus_port: [
-        { required: true, message: 'Port is required' },
-        { type: 'number', min: 0, max: 65535, message: 'Invalid Port' }
-      ],
-      modbus_timeout: [
-        { required: true, message: 'Timeout is required' },
-        {
-          type: 'number',
-          min: 100,
-          max: 20000,
-          message: 'Must be between 100 and 20000'
-        }
-      ]
-    }),
-    ...(settings.shower_timer && {
-      shower_min_duration: [
-        {
-          type: 'number',
-          min: 10,
-          max: 360,
-          message: 'Time must be between 10 and 360 seconds'
-        }
-      ]
-    }),
-    ...(settings.shower_alert && {
-      shower_alert_trigger: [
-        {
-          type: 'number',
-          min: 1,
-          max: 20,
-          message: 'Time must be between 1 and 20 minutes'
-        }
-      ],
-      shower_alert_coldshot: [
-        {
-          type: 'number',
-          min: 1,
-          max: 10,
-          message: 'Time must be between 1 and 10 seconds'
-        }
-      ]
-    }),
-    ...(settings.remote_timeout_en && {
-      remote_timeout: [
-        {
-          type: 'number',
-          min: 1,
-          max: 240,
-          message: 'Timeout must be between 1 and 240 hours'
-        }
-      ]
-    })
-  });
-
-export const uniqueNameValidator = (schedule: ScheduleItem[], o_name?: string) => ({
+// Generic unique name validator factory
+const createUniqueNameValidator = <T extends { name: string }>(
+  items: T[],
+  originalName?: string
+) => ({
  validator(
    _rule: InternalRuleItem,
    name: string,
@@ -285,43 +276,22 @@ export const uniqueNameValidator = (schedule: ScheduleItem[], o_name?: string) =
  ) {
    if (
      name !== '' &&
-      (o_name === undefined || o_name.toLowerCase() !== name.toLowerCase()) &&
-      schedule.find((si) => si.name.toLowerCase() === name.toLowerCase())
+      (originalName === undefined ||
+        originalName.toLowerCase() !== name.toLowerCase()) &&
+      items.find((item) => item.name.toLowerCase() === name.toLowerCase())
    ) {
-      callback('Name already in use');
-    } else {
-      callback();
+      callback(ERROR_MESSAGES.NAME_DUPLICATE);
+      return;
    }
+    callback();
  }
 });

-export const schedulerItemValidation = (
-  schedule: ScheduleItem[],
-  scheduleItem: ScheduleItem
-) =>
-  new Schema({
-    name: [
-      {
-        type: 'string',
-        pattern: /^[a-zA-Z0-9_]{0,19}$/,
-        message: "Must be <20 characters: alphanumeric or '_'"
-      },
-      ...[uniqueNameValidator(schedule, scheduleItem.o_name)]
-    ],
-    cmd: [
-      { required: true, message: 'Command is required' },
-      {
-        type: 'string',
-        min: 1,
-        max: 300,
-        message: 'Command must be 1-300 characters'
-      }
-    ]
-  });
-
-export const uniqueCustomNameValidator = (
-  entity: EntityItem[],
-  o_name?: string
+// Generic field name validator (for cases where the name field has different property names)
+const createUniqueFieldNameValidator = <T>(
+  items: T[],
+  getName: (item: T) => string,
+  originalName?: string
 ) => ({
  validator(
    _rule: InternalRuleItem,
@@ -329,58 +299,91 @@ export const uniqueCustomNameValidator = (
    callback: (error?: string) => void
  ) {
    if (
-      (o_name === undefined || o_name.toLowerCase() !== name.toLowerCase()) &&
-      entity.find((ei) => ei.name.toLowerCase() === name.toLowerCase())
+      name !== '' &&
+      (originalName === undefined ||
+        originalName.toLowerCase() !== name.toLowerCase()) &&
+      items.find((item) => getName(item).toLowerCase() === name.toLowerCase())
    ) {
-      callback('Name already in use');
-    } else {
-      callback();
+      callback(ERROR_MESSAGES.NAME_DUPLICATE);
+      return;
    }
+    callback();
  }
 });

+const NAME_PATTERN_BASE = '[a-zA-Z0-9_]';
+const NAME_PATTERN_MESSAGE = `Must be <${VALIDATION_LIMITS.NAME_MAX_LENGTH + 1} characters: alphanumeric or '_'`;
+
+const NAME_PATTERN = {
+  type: 'string' as const,
+  pattern: new RegExp(
+    `^${NAME_PATTERN_BASE}{0,${VALIDATION_LIMITS.NAME_MAX_LENGTH}}$`
+  ),
+  message: NAME_PATTERN_MESSAGE
+};
+
+const NAME_PATTERN_REQUIRED = {
+  type: 'string' as const,
+  pattern: new RegExp(
+    `^${NAME_PATTERN_BASE}{1,${VALIDATION_LIMITS.NAME_MAX_LENGTH}}$`
+  ),
+  message: NAME_PATTERN_MESSAGE
+};
+
+export const uniqueNameValidator = (schedule: ScheduleItem[], o_name?: string) =>
+  createUniqueNameValidator(schedule, o_name);
+
+export const schedulerItemValidation = (
+  schedule: ScheduleItem[],
+  scheduleItem: ScheduleItem
+) =>
+  new Schema({
+    name: [NAME_PATTERN, uniqueNameValidator(schedule, scheduleItem.o_name)],
+    cmd: [
+      { required: true, message: 'Command is required' },
+      {
+        type: 'string',
+        min: VALIDATION_LIMITS.COMMAND_MIN,
+        max: VALIDATION_LIMITS.COMMAND_MAX,
+        message: `Command must be ${VALIDATION_LIMITS.COMMAND_MIN}-${VALIDATION_LIMITS.COMMAND_MAX} characters`
+      }
+    ]
+  });
+
+export const uniqueCustomNameValidator = (entity: EntityItem[], o_name?: string) =>
+  createUniqueNameValidator(entity, o_name);
+
+const hexValidator = {
+  validator(
+    _rule: InternalRuleItem,
+    value: string,
+    callback: (error?: string) => void
+  ) {
+    if (!value || Number.isNaN(Number.parseInt(value, VALIDATION_LIMITS.HEX_BASE))) {
+      callback(ERROR_MESSAGES.HEX_REQUIRED);
+      return;
+    }
+    callback();
+  }
+};
+
 export const entityItemValidation = (entity: EntityItem[], entityItem: EntityItem) =>
  new Schema({
    name: [
      { required: true, message: 'Name is required' },
-      {
-        type: 'string',
-        pattern: /^[a-zA-Z0-9_]{1,19}$/,
-        message: "Must be <20 characters: alphanumeric or '_'"
-      },
-      ...[uniqueCustomNameValidator(entity, entityItem.o_name)]
-    ],
-    device_id: [
-      {
-        validator(
-          _rule: InternalRuleItem,
-          value: string,
-          callback: (error?: string) => void
-        ) {
-          if (isNaN(parseInt(value, 16))) {
-            callback('Is required and must be in hex format');
-          }
-          callback();
-        }
-      }
-    ],
-    type_id: [
-      {
-        validator(
-          _rule: InternalRuleItem,
-          value: string,
-          callback: (error?: string) => void
-        ) {
-          if (isNaN(parseInt(value, 16))) {
-            callback('Is required and must be in hex format');
-          }
-          callback();
-        }
-      }
+      NAME_PATTERN_REQUIRED,
+      uniqueCustomNameValidator(entity, entityItem.o_name)
    ],
+    device_id: [hexValidator],
+    type_id: [hexValidator],
    offset: [
      { required: true, message: 'Offset is required' },
-      { type: 'number', min: 0, max: 255, message: 'Must be between 0 and 255' }
+      {
+        type: 'number',
+        min: VALIDATION_LIMITS.OFFSET_MIN,
+        max: VALIDATION_LIMITS.OFFSET_MAX,
+        message: `Must be between ${VALIDATION_LIMITS.OFFSET_MIN} and ${VALIDATION_LIMITS.OFFSET_MAX}`
+      }
    ],
    factor: [{ required: true, message: 'is required' }]
  });
@@ -388,33 +391,14 @@ export const entityItemValidation = (entity: EntityItem[], entityItem: EntityIte
 export const uniqueTemperatureNameValidator = (
  sensors: TemperatureSensor[],
  o_name?: string
-) => ({
-  validator(_rule: InternalRuleItem, n: string, callback: (error?: string) => void) {
-    if (
-      (o_name === undefined || o_name.toLowerCase() !== n.toLowerCase()) &&
-      n !== '' &&
-      sensors.find((ts) => ts.n.toLowerCase() === n.toLowerCase())
-    ) {
-      callback('Name already in use');
-    } else {
-      callback();
-    }
-  }
-});
+) => createUniqueFieldNameValidator(sensors, (s) => s.n, o_name);

 export const temperatureSensorItemValidation = (
  sensors: TemperatureSensor[],
  sensor: TemperatureSensor
 ) =>
  new Schema({
-    n: [
-      {
-        type: 'string',
-        pattern: /^[a-zA-Z0-9_]{0,19}$/,
-        message: "Must be <20 characters: alphanumeric or '_'"
-      },
-      ...[uniqueTemperatureNameValidator(sensors, sensor.o_n)]
-    ]
+    n: [NAME_PATTERN, uniqueTemperatureNameValidator(sensors, sensor.o_n)]
  });

 export const isGPIOUniqueValidator = (sensors: AnalogSensor[]) => ({
@@ -423,58 +407,49 @@ export const isGPIOUniqueValidator = (sensors: AnalogSensor[]) => ({
    gpio: number,
    callback: (error?: string) => void
  ) {
-    if (sensors.find((as) => as.g === gpio)) {
-      callback('GPIO already in use');
-    } else {
-      callback();
+    if (sensors.some((as) => as.g === gpio)) {
+      callback(ERROR_MESSAGES.GPIO_DUPLICATE);
+      return;
    }
+    callback();
  }
 });

 export const uniqueAnalogNameValidator = (
  sensors: AnalogSensor[],
  o_name?: string
-) => ({
-  validator(_rule: InternalRuleItem, n: string, callback: (error?: string) => void) {
-    if (
-      (o_name === undefined || o_name.toLowerCase() !== n.toLowerCase()) &&
-      n !== '' &&
-      sensors.find((as) => as.n.toLowerCase() === n.toLowerCase())
-    ) {
-      callback('Name already in use');
-    } else {
-      callback();
-    }
+) => createUniqueFieldNameValidator(sensors, (s) => s.n, o_name);
+
+const getPlatformGPIOValidator = (platform: string) => {
+  switch (platform) {
+    case 'ESP32S3':
+      return GPIO_VALIDATORS3;
+    case 'ESP32S2':
+      return GPIO_VALIDATORS2;
+    case 'ESP32C3':
+      return GPIO_VALIDATORC3;
+    default:
+      return GPIO_VALIDATOR;
  }
-});
+};

 export const analogSensorItemValidation = (
  sensors: AnalogSensor[],
  sensor: AnalogSensor,
  creating: boolean,
  platform: string
-) =>
-  new Schema({
-    n: [
-      {
-        type: 'string',
-        pattern: /^[a-zA-Z0-9_]{0,19}$/,
-        message: "Must be <20 characters: alphanumeric or '_'"
-      },
-      ...[uniqueAnalogNameValidator(sensors, sensor.o_n)]
-    ],
+) => {
+  const gpioValidator = getPlatformGPIOValidator(platform);
+
+  return new Schema({
+    n: [NAME_PATTERN, uniqueAnalogNameValidator(sensors, sensor.o_n)],
    g: [
      { required: true, message: 'GPIO is required' },
-      platform === 'ESP32S3'
-        ? GPIO_VALIDATORS3
-        : platform === 'ESP32S2'
-          ? GPIO_VALIDATORS2
-          : platform === 'ESP32C3'
-            ? GPIO_VALIDATORC3
-            : GPIO_VALIDATOR,
+      gpioValidator,
      ...(creating ? [isGPIOUniqueValidator(sensors)] : [])
    ]
  });
+};

 export const deviceValueItemValidation = (dv: DeviceValue) =>
  new Schema({
@@ -488,11 +463,12 @@ export const deviceValueItemValidation = (dv: DeviceValue) =>
        ) {
          if (
            typeof value === 'number' &&
-            dv.m &&
-            dv.x &&
+            dv.m !== undefined &&
+            dv.x !== undefined &&
            (value < dv.m || value > dv.x)
          ) {
-            callback('Value out of range');
+            callback(ERROR_MESSAGES.VALUE_OUT_OF_RANGE);
+            return;
          }
          callback();
        }
--- a/interface/src/app/settings/APSettings.tsx
+++ b/interface/src/app/settings/APSettings.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';

 import CancelIcon from '@mui/icons-material/Cancel';
 import WarningIcon from '@mui/icons-material/Warning';
@@ -27,6 +27,19 @@ export const isAPEnabled = ({ provision_mode }: APSettingsType) =>
  provision_mode === APProvisionMode.AP_MODE_ALWAYS ||
  provision_mode === APProvisionMode.AP_MODE_DISCONNECTED;

+// Efficient range function without recursion
+const createRange = (start: number, end: number): number[] => {
+  const result: number[] = [];
+  for (let i = start; i <= end; i++) {
+    result.push(i);
+  }
+  return result;
+};
+
+// Pre-computed ranges for better performance
+const CHANNEL_RANGE = createRange(1, 14);
+const MAX_CLIENTS_RANGE = createRange(1, 9);
+
 const APSettings = () => {
  const {
    loadData,
@@ -50,33 +63,38 @@ const APSettings = () => {

  const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();

-  const updateFormValue = updateValueDirty(
-    origData,
-    dirtyFlags,
-    setDirtyFlags,
-    updateDataValue as (value: unknown) => void
+  const updateFormValue = useMemo(
+    () =>
+      updateValueDirty(
+        origData as unknown as Record<string, unknown>,
+        dirtyFlags,
+        setDirtyFlags,
+        updateDataValue as (value: unknown) => void
+      ),
+    [origData, dirtyFlags, setDirtyFlags, updateDataValue]
  );

+  // Memoize AP enabled state
+  const apEnabled = useMemo(() => (data ? isAPEnabled(data) : false), [data]);
+
+  // Memoize validation and submit handler
+  const validateAndSubmit = useCallback(async () => {
+    if (!data) return;
+
+    try {
+      setFieldErrors(undefined);
+      await validate(createAPSettingsValidator(data), data);
+      await saveData();
+    } catch (error) {
+      setFieldErrors(error as ValidateFieldsError);
+    }
+  }, [data, saveData]);
+
  const content = () => {
    if (!data) {
      return <FormLoader onRetry={loadData} errorMessage={errorMessage || ''} />;
    }

-    const validateAndSubmit = async () => {
-      try {
-        setFieldErrors(undefined);
-        await validate(createAPSettingsValidator(data), data);
-        await saveData();
-      } catch (error) {
-        setFieldErrors(error as ValidateFieldsError);
-      }
-    };
-
-    // no lodash - https://asleepace.com/blog/typescript-range-without-a-loop/
-    function range(a: number, b: number): number[] {
-      return a < b ? [a, ...range(a + 1, b)] : [b];
-    }
-
    return (
      <>
        <ValidatedTextField
@@ -100,7 +118,7 @@ const APSettings = () => {
            {LL.AP_PROVIDE_TEXT_3()}
          </MenuItem>
        </ValidatedTextField>
-        {isAPEnabled(data) && (
+        {apEnabled && (
          <>
            <ValidatedTextField
              fieldErrors={fieldErrors || {}}
@@ -134,7 +152,7 @@ const APSettings = () => {
              onChange={updateFormValue}
              margin="normal"
            >
-              {range(1, 14).map((i) => (
+              {CHANNEL_RANGE.map((i) => (
                <MenuItem key={i} value={i}>
                  {i}
                </MenuItem>
@@ -162,7 +180,7 @@ const APSettings = () => {
              onChange={updateFormValue}
              margin="normal"
            >
-              {range(1, 9).map((i) => (
+              {MAX_CLIENTS_RANGE.map((i) => (
                <MenuItem key={i} value={i}>
                  {i}
                </MenuItem>
--- a/interface/src/app/settings/ApplicationSettings.tsx
+++ b/interface/src/app/settings/ApplicationSettings.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { toast } from 'react-toastify';

 import CancelIcon from '@mui/icons-material/Cancel';
@@ -72,7 +72,7 @@ const ApplicationSettings = () => {
  const { LL } = useI18nContext();

  const updateFormValue = updateValueDirty(
-    origData,
+    origData as unknown as Record<string, unknown>,
    dirtyFlags,
    setDirtyFlags,
    updateDataValue as (value: unknown) => void
@@ -106,50 +106,61 @@ const ApplicationSettings = () => {
    });
  });

-  const doRestart = async () => {
+  // Memoized input props to prevent recreation on every render
+  const SecondsInputProps = useMemo(
+    () => ({
+      endAdornment: <InputAdornment position="end">{LL.SECONDS()}</InputAdornment>
+    }),
+    [LL]
+  );
+
+  const MinutesInputProps = useMemo(
+    () => ({
+      endAdornment: <InputAdornment position="end">{LL.MINUTES()}</InputAdornment>
+    }),
+    [LL]
+  );
+
+  const HoursInputProps = useMemo(
+    () => ({
+      endAdornment: <InputAdornment position="end">{LL.HOURS()}</InputAdornment>
+    }),
+    [LL]
+  );
+
+  const doRestart = useCallback(async () => {
    setRestarting(true);
    await sendAPI({ device: 'system', cmd: 'restart', id: 0 }).catch(
      (error: Error) => {
        toast.error(error.message);
      }
    );
-  };
+  }, [sendAPI]);

-  const updateBoardProfile = async (board_profile: string) => {
-    await readBoardProfile(board_profile).catch((error: Error) => {
-      toast.error(error.message);
-    });
-  };
+  const updateBoardProfile = useCallback(
+    async (board_profile: string) => {
+      await readBoardProfile(board_profile).catch((error: Error) => {
+        toast.error(error.message);
+      });
+    },
+    [readBoardProfile]
+  );

  useLayoutTitle(LL.APPLICATION());

-  const SecondsInputProps = {
-    endAdornment: <InputAdornment position="end">{LL.SECONDS()}</InputAdornment>
-  };
-  const MinutesInputProps = {
-    endAdornment: <InputAdornment position="end">{LL.MINUTES()}</InputAdornment>
-  };
-  const HoursInputProps = {
-    endAdornment: <InputAdornment position="end">{LL.HOURS()}</InputAdornment>
-  };
-
-  const content = () => {
-    if (!data || !hardwareData) {
-      return <FormLoader onRetry={loadData} errorMessage={errorMessage || ''} />;
+  const validateAndSubmit = useCallback(async () => {
+    try {
+      setFieldErrors(undefined);
+      await validate(createSettingsValidator(data), data);
+    } catch (error) {
+      setFieldErrors(error as ValidateFieldsError);
+    } finally {
+      await saveData();
    }
+  }, [data, saveData]);

-    const validateAndSubmit = async () => {
-      try {
-        setFieldErrors(undefined);
-        await validate(createSettingsValidator(data), data);
-      } catch (error) {
-        setFieldErrors(error as ValidateFieldsError);
-      } finally {
-        await saveData();
-      }
-    };
-
-    const changeBoardProfile = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const changeBoardProfile = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
      const boardProfile = event.target.value;
      updateFormValue(event);
      if (boardProfile === 'CUSTOM') {
@@ -160,12 +171,22 @@ const ApplicationSettings = () => {
      } else {
        void updateBoardProfile(boardProfile);
      }
-    };
+    },
+    [data, updateBoardProfile, updateFormValue, updateDataValue]
+  );

-    const restart = async () => {
-      await validateAndSubmit();
-      await doRestart();
-    };
+  const restart = useCallback(async () => {
+    await validateAndSubmit();
+    await doRestart();
+  }, [validateAndSubmit, doRestart]);
+
+  // Memoize board profile select items to prevent recreation
+  const boardProfileItems = useMemo(() => boardProfileSelectItems(), []);
+
+  const content = () => {
+    if (!data || !hardwareData) {
+      return <FormLoader onRetry={loadData} errorMessage={errorMessage || ''} />;
+    }

    return (
      <>
@@ -474,7 +495,7 @@ const ApplicationSettings = () => {
          margin="normal"
          select
        >
-          {boardProfileSelectItems()}
+          {boardProfileItems}
          <Divider />
          <MenuItem key={'CUSTOM'} value={'CUSTOM'}>
            {LL.CUSTOM()}&hellip;
--- a/interface/src/app/settings/DownloadUpload.tsx
+++ b/interface/src/app/settings/DownloadUpload.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { toast } from 'react-toastify';

 import DownloadIcon from '@mui/icons-material/GetApp';
@@ -19,6 +19,13 @@ import {
 import { useI18nContext } from 'i18n/i18n-react';
 import { saveFile } from 'utils';

+interface DownloadButton {
+  key: string;
+  type: string;
+  label: string | number;
+  isGridButton: boolean;
+}
+
 const DownloadUpload = () => {
  const { LL } = useI18nContext();

@@ -44,95 +51,126 @@ const DownloadUpload = () => {

  const { data, send: loadData, error } = useRequest(SystemApi.readSystemStatus);

-  const doRestart = async () => {
+  const doRestart = useCallback(async () => {
    setRestarting(true);
-    await sendAPI({ device: 'system', cmd: 'restart', id: 0 }).catch(
-      (error: Error) => {
-        toast.error(error.message);
-      }
-    );
-  };
+    try {
+      await sendAPI({ device: 'system', cmd: 'restart', id: 0 });
+    } catch (error) {
+      toast.error((error as Error).message);
+      setRestarting(false);
+    }
+  }, [sendAPI]);

  useLayoutTitle(LL.DOWNLOAD_UPLOAD());

-  const content = () => {
-    if (!data) {
-      return <FormLoader onRetry={loadData} errorMessage={error?.message || ''} />;
-    }
+  const downloadButtons: DownloadButton[] = useMemo(
+    () => [
+      {
+        key: 'settings',
+        type: 'settings',
+        label: LL.SETTINGS_OF(LL.APPLICATION()),
+        isGridButton: true
+      },
+      {
+        key: 'customizations',
+        type: 'customizations',
+        label: LL.CUSTOMIZATIONS(),
+        isGridButton: true
+      },
+      {
+        key: 'entities',
+        type: 'entities',
+        label: LL.CUSTOM_ENTITIES(0),
+        isGridButton: true
+      },
+      {
+        key: 'schedule',
+        type: 'schedule',
+        label: LL.SCHEDULE(0),
+        isGridButton: true
+      },
+      {
+        key: 'allvalues',
+        type: 'allvalues',
+        label: LL.ALLVALUES(),
+        isGridButton: false
+      }
+    ],
+    [LL]
+  );

+  const handleDownload = useCallback(
+    (type: string) => () => {
+      void sendExportData(type);
+    },
+    [sendExportData]
+  );
+
+  if (restarting) {
+    return <SystemMonitor />;
+  }
+
+  if (!data) {
    return (
-      <>
-        <Typography sx={{ pb: 2 }} variant="h6" color="primary">
-          {LL.DOWNLOAD(0)}
-        </Typography>
+      <SectionContent>
+        <FormLoader onRetry={loadData} errorMessage={error?.message || ''} />
+      </SectionContent>
+    );
+  }

-        <Typography mb={1} variant="body1" color="warning">
-          {LL.DOWNLOAD_SETTINGS_TEXT()}.
-        </Typography>
-        <Grid container spacing={1}>
-          <Button
-            sx={{ ml: 2 }}
-            startIcon={<DownloadIcon />}
-            variant="outlined"
-            color="primary"
-            onClick={() => sendExportData('settings')}
-          >
-            {LL.SETTINGS_OF(LL.APPLICATION())}
-          </Button>
+  const gridButtons = downloadButtons.filter((btn) => btn.isGridButton);
+  const standaloneButton = downloadButtons.find((btn) => !btn.isGridButton);

-          <Button
-            sx={{ ml: 2 }}
-            startIcon={<DownloadIcon />}
-            variant="outlined"
-            color="primary"
-            onClick={() => sendExportData('customizations')}
-          >
-            {LL.CUSTOMIZATIONS()}
-          </Button>
-          <Button
-            sx={{ ml: 2 }}
-            startIcon={<DownloadIcon />}
-            variant="outlined"
-            color="primary"
-            onClick={() => sendExportData('entities')}
-          >
-            {LL.CUSTOM_ENTITIES(0)}
-          </Button>
-          <Button
-            sx={{ ml: 2 }}
-            startIcon={<DownloadIcon />}
-            variant="outlined"
-            color="primary"
-            onClick={() => sendExportData('schedule')}
-          >
-            {LL.SCHEDULE(0)}
-          </Button>
-        </Grid>
+  return (
+    <SectionContent>
+      <Typography sx={{ pb: 2 }} variant="h6" color="primary">
+        {LL.DOWNLOAD(0)}
+      </Typography>
+
+      <Typography mb={1} variant="body1" color="warning">
+        {LL.DOWNLOAD_SETTINGS_TEXT()}.
+      </Typography>
+
+      <Grid container spacing={2}>
+        {gridButtons.map((button) => (
+          <Grid key={button.key}>
+            <Button
+              startIcon={<DownloadIcon />}
+              variant="outlined"
+              color="primary"
+              onClick={handleDownload(button.type)}
+            >
+              {button.label}
+            </Button>
+          </Grid>
+        ))}
+      </Grid>
+
+      <Typography mt={2} mb={1} variant="body1" color="warning">
+        {LL.DOWNLOAD_SETTINGS_TEXT2()}.
+      </Typography>
+
+      {standaloneButton && (
        <Button
-          sx={{ ml: 2, mt: 2 }}
          startIcon={<DownloadIcon />}
          variant="outlined"
          color="primary"
-          onClick={() => sendExportData('allvalues')}
+          onClick={handleDownload(standaloneButton.type)}
        >
-          {LL.ALLVALUES()}
+          {standaloneButton.label}
        </Button>
+      )}

-        <Typography sx={{ pt: 2, pb: 2 }} variant="h6" color="primary">
-          {LL.UPLOAD()}
-        </Typography>
+      <Typography sx={{ pt: 2, pb: 2 }} variant="h6" color="primary">
+        {LL.UPLOAD()}
+      </Typography>

-        <Box color="warning.main" sx={{ pb: 2 }}>
-          <Typography variant="body1">{LL.UPLOAD_TEXT()}.</Typography>
-        </Box>
+      <Box color="warning.main" sx={{ pb: 2 }}>
+        <Typography variant="body1">{LL.UPLOAD_TEXT()}.</Typography>
+      </Box>

-        <SingleUpload text={LL.UPLOAD_DRAG()} doRestart={doRestart} />
-      </>
-    );
-  };
-
-  return (
-    <SectionContent>{restarting ? <SystemMonitor /> : content()}</SectionContent>
+      <SingleUpload text={LL.UPLOAD_DRAG()} doRestart={doRestart} />
+    </SectionContent>
  );
 };

--- a/interface/src/app/settings/MqttSettings.tsx
+++ b/interface/src/app/settings/MqttSettings.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';

 import CancelIcon from '@mui/icons-material/Cancel';
 import WarningIcon from '@mui/icons-material/Warning';
@@ -52,33 +52,67 @@ const MqttSettings = () => {

  const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();

-  const updateFormValue = updateValueDirty(
-    origData,
-    dirtyFlags,
-    setDirtyFlags,
-    updateDataValue as (value: unknown) => void
+  const updateFormValue = useMemo(
+    () =>
+      updateValueDirty(
+        origData as unknown as Record<string, unknown>,
+        dirtyFlags,
+        setDirtyFlags,
+        updateDataValue as (value: unknown) => void
+      ),
+    [origData, dirtyFlags, setDirtyFlags, updateDataValue]
  );

-  const SecondsInputProps = {
-    endAdornment: <InputAdornment position="end">{LL.SECONDS()}</InputAdornment>
-  };
+  const SecondsInputProps = useMemo(
+    () => ({
+      endAdornment: <InputAdornment position="end">{LL.SECONDS()}</InputAdornment>
+    }),
+    [LL]
+  );

-  const content = () => {
-    if (!data) {
-      return <FormLoader onRetry={loadData} errorMessage={errorMessage || ''} />;
+  const emptyFieldErrors = useMemo(() => ({}), []);
+
+  const validateAndSubmit = useCallback(async () => {
+    if (!data) return;
+    try {
+      setFieldErrors(undefined);
+      await validate(createMqttSettingsValidator(data), data);
+      await saveData();
+    } catch (error) {
+      setFieldErrors(error as ValidateFieldsError);
    }
+  }, [data, saveData]);

-    const validateAndSubmit = async () => {
-      try {
-        setFieldErrors(undefined);
-        await validate(createMqttSettingsValidator(data), data);
-        await saveData();
-      } catch (error) {
-        setFieldErrors(error as ValidateFieldsError);
-      }
-    };
+  const publishIntervalFields = useMemo(
+    () => [
+      { name: 'publish_time_heartbeat', label: 'Heartbeat', validated: true },
+      { name: 'publish_time_boiler', label: LL.MQTT_INT_BOILER(), validated: false },
+      {
+        name: 'publish_time_thermostat',
+        label: LL.MQTT_INT_THERMOSTATS(),
+        validated: false
+      },
+      { name: 'publish_time_solar', label: LL.MQTT_INT_SOLAR(), validated: false },
+      { name: 'publish_time_mixer', label: LL.MQTT_INT_MIXER(), validated: false },
+      { name: 'publish_time_water', label: LL.MQTT_INT_WATER(), validated: false },
+      { name: 'publish_time_sensor', label: LL.SENSORS(), validated: false },
+      { name: 'publish_time_other', label: LL.DEFAULT(0), validated: false }
+    ],
+    [LL]
+  );

+  if (!data) {
    return (
+      <SectionContent>
+        {blocker ? <BlockNavigation blocker={blocker} /> : null}
+        <FormLoader onRetry={loadData} errorMessage={errorMessage || ''} />
+      </SectionContent>
+    );
+  }
+
+  return (
+    <SectionContent>
+      {blocker ? <BlockNavigation blocker={blocker} /> : null}
      <>
        <BlockFormControlLabel
          control={
@@ -93,7 +127,7 @@ const MqttSettings = () => {
        <Grid container spacing={2} rowSpacing={0}>
          <Grid>
            <ValidatedTextField
-              fieldErrors={fieldErrors || {}}
+              fieldErrors={fieldErrors ?? emptyFieldErrors}
              name="host"
              label={LL.ADDRESS_OF(LL.BROKER())}
              multiline
@@ -105,7 +139,7 @@ const MqttSettings = () => {
          </Grid>
          <Grid>
            <ValidatedTextField
-              fieldErrors={fieldErrors || {}}
+              fieldErrors={fieldErrors ?? emptyFieldErrors}
              name="port"
              label="Port"
              variant="outlined"
@@ -117,7 +151,7 @@ const MqttSettings = () => {
          </Grid>
          <Grid>
            <ValidatedTextField
-              fieldErrors={fieldErrors || {}}
+              fieldErrors={fieldErrors ?? emptyFieldErrors}
              name="base"
              label={LL.BASE_TOPIC()}
              variant="outlined"
@@ -129,7 +163,7 @@ const MqttSettings = () => {
          <Grid>
            <TextField
              name="client_id"
-              label={LL.ID_OF(LL.CLIENT()) + ' (' + LL.OPTIONAL() + ')'}
+              label={`${LL.ID_OF(LL.CLIENT())} (${LL.OPTIONAL()})`}
              variant="outlined"
              value={data.client_id}
              onChange={updateFormValue}
@@ -158,7 +192,7 @@ const MqttSettings = () => {
          </Grid>
          <Grid>
            <ValidatedTextField
-              fieldErrors={fieldErrors || {}}
+              fieldErrors={fieldErrors ?? emptyFieldErrors}
              name="keep_alive"
              label="Keep Alive"
              slotProps={{
@@ -352,119 +386,42 @@ const MqttSettings = () => {
          {LL.MQTT_PUBLISH_INTERVALS()}&nbsp;(0=auto)
        </Typography>
        <Grid container spacing={2} rowSpacing={0}>
-          <Grid>
-            <ValidatedTextField
-              fieldErrors={fieldErrors || {}}
-              name="publish_time_heartbeat"
-              label="Heartbeat"
-              slotProps={{
-                input: SecondsInputProps
-              }}
-              variant="outlined"
-              value={numberValue(data.publish_time_heartbeat)}
-              type="number"
-              onChange={updateFormValue}
-              margin="normal"
-            />
-          </Grid>
-          <Grid>
-            <TextField
-              name="publish_time_boiler"
-              label={LL.MQTT_INT_BOILER()}
-              variant="outlined"
-              value={numberValue(data.publish_time_boiler)}
-              type="number"
-              onChange={updateFormValue}
-              margin="normal"
-              slotProps={{
-                input: SecondsInputProps
-              }}
-            />
-          </Grid>
-          <Grid>
-            <TextField
-              name="publish_time_thermostat"
-              label={LL.MQTT_INT_THERMOSTATS()}
-              variant="outlined"
-              value={numberValue(data.publish_time_thermostat)}
-              type="number"
-              onChange={updateFormValue}
-              margin="normal"
-              slotProps={{
-                input: SecondsInputProps
-              }}
-            />
-          </Grid>
-          <Grid>
-            <TextField
-              name="publish_time_solar"
-              label={LL.MQTT_INT_SOLAR()}
-              variant="outlined"
-              value={numberValue(data.publish_time_solar)}
-              type="number"
-              onChange={updateFormValue}
-              margin="normal"
-              slotProps={{
-                input: SecondsInputProps
-              }}
-            />
-          </Grid>
-          <Grid>
-            <TextField
-              name="publish_time_mixer"
-              label={LL.MQTT_INT_MIXER()}
-              variant="outlined"
-              value={numberValue(data.publish_time_mixer)}
-              type="number"
-              onChange={updateFormValue}
-              margin="normal"
-              slotProps={{
-                input: SecondsInputProps
-              }}
-            />
-          </Grid>
-          <Grid>
-            <TextField
-              name="publish_time_water"
-              label={LL.MQTT_INT_WATER()}
-              variant="outlined"
-              value={numberValue(data.publish_time_water)}
-              type="number"
-              onChange={updateFormValue}
-              margin="normal"
-              slotProps={{
-                input: SecondsInputProps
-              }}
-            />
-          </Grid>
-          <Grid>
-            <TextField
-              name="publish_time_sensor"
-              label={LL.SENSORS()}
-              variant="outlined"
-              value={numberValue(data.publish_time_sensor)}
-              type="number"
-              onChange={updateFormValue}
-              margin="normal"
-              slotProps={{
-                input: SecondsInputProps
-              }}
-            />
-          </Grid>
-          <Grid>
-            <TextField
-              name="publish_time_other"
-              label={LL.DEFAULT(0)}
-              variant="outlined"
-              value={numberValue(data.publish_time_other)}
-              type="number"
-              onChange={updateFormValue}
-              margin="normal"
-              slotProps={{
-                input: SecondsInputProps
-              }}
-            />
-          </Grid>
+          {publishIntervalFields.map((field) => (
+            <Grid key={field.name}>
+              {field.validated ? (
+                <ValidatedTextField
+                  fieldErrors={fieldErrors ?? emptyFieldErrors}
+                  name={field.name}
+                  label={field.label}
+                  slotProps={{
+                    input: SecondsInputProps
+                  }}
+                  variant="outlined"
+                  value={numberValue(
+                    data[field.name as keyof MqttSettingsType] as number
+                  )}
+                  type="number"
+                  onChange={updateFormValue}
+                  margin="normal"
+                />
+              ) : (
+                <TextField
+                  name={field.name}
+                  label={field.label}
+                  variant="outlined"
+                  value={numberValue(
+                    data[field.name as keyof MqttSettingsType] as number
+                  )}
+                  type="number"
+                  onChange={updateFormValue}
+                  margin="normal"
+                  slotProps={{
+                    input: SecondsInputProps
+                  }}
+                />
+              )}
+            </Grid>
+          ))}
        </Grid>
        {dirtyFlags && dirtyFlags.length !== 0 && (
          <ButtonRow>
@@ -491,13 +448,6 @@ const MqttSettings = () => {
          </ButtonRow>
        )}
      </>
-    );
-  };
-
-  return (
-    <SectionContent>
-      {blocker ? <BlockNavigation blocker={blocker} /> : null}
-      {content()}
    </SectionContent>
  );
 };
--- a/interface/src/app/settings/NTPSettings.tsx
+++ b/interface/src/app/settings/NTPSettings.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { toast } from 'react-toastify';

 import AccessTimeIcon from '@mui/icons-material/AccessTime';
@@ -39,7 +39,7 @@ import { formatLocalDateTime, updateValueDirty, useRest } from 'utils';
 import { validate } from 'validators';
 import { NTP_SETTINGS_VALIDATOR } from 'validators/ntp';

-import { TIME_ZONES, selectedTimeZone, timeZoneSelectItems } from './TZ';
+import { TIME_ZONES, selectedTimeZone, useTimeZoneSelectItems } from './TZ';

 const NTPSettings = () => {
  const {
@@ -61,9 +61,19 @@ const NTPSettings = () => {
  const { LL } = useI18nContext();
  useLayoutTitle('NTP');

+  // Memoized timezone select items for better performance
+  const timeZoneItems = useTimeZoneSelectItems();
+
+  // Memoized selected timezone value
+  const selectedTzValue = useMemo(
+    () => (data ? selectedTimeZone(data.tz_label, data.tz_format) : undefined),
+    [data?.tz_label, data?.tz_format]
+  );
+
  const [localTime, setLocalTime] = useState<string>('');
  const [settingTime, setSettingTime] = useState<boolean>(false);
  const [processing, setProcessing] = useState<boolean>(false);
+  const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();

  const { send: updateTime } = useRequest(
    (local_time: Time) => NTPApi.updateTime(local_time),
@@ -72,110 +82,79 @@ const NTPSettings = () => {
    }
  );

-  const updateFormValue = updateValueDirty(
-    origData,
-    dirtyFlags,
-    setDirtyFlags,
-    updateDataValue as (value: unknown) => void
+  // Memoize updateFormValue to prevent recreation on every render
+  const updateFormValue = useMemo(
+    () =>
+      updateValueDirty(
+        origData as unknown as Record<string, unknown>,
+        dirtyFlags,
+        setDirtyFlags,
+        updateDataValue as (value: unknown) => void
+      ),
+    [origData, dirtyFlags, setDirtyFlags, updateDataValue]
  );

-  const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();
+  // Memoize updateLocalTime handler
+  const updateLocalTime = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => setLocalTime(event.target.value),
+    []
+  );

-  const updateLocalTime = (event: React.ChangeEvent<HTMLInputElement>) =>
-    setLocalTime(event.target.value);
-
-  const openSetTime = () => {
+  // Memoize openSetTime handler
+  const openSetTime = useCallback(() => {
    setLocalTime(formatLocalDateTime(new Date()));
    setSettingTime(true);
-  };
+  }, []);

-  const configureTime = async () => {
+  // Memoize configureTime handler
+  const configureTime = useCallback(async () => {
    setProcessing(true);

-    await updateTime({ local_time: formatLocalDateTime(new Date(localTime)) })
-      .then(async () => {
-        toast.success(LL.TIME_SET());
-        setSettingTime(false);
-        await loadData();
-      })
-      .catch(() => {
-        toast.error(LL.PROBLEM_UPDATING());
-      })
-      .finally(() => {
-        setProcessing(false);
-      });
-  };
-
-  const renderSetTimeDialog = () => (
-    <Dialog
-      sx={dialogStyle}
-      open={settingTime}
-      onClose={() => setSettingTime(false)}
-    >
-      <DialogTitle>{LL.SET_TIME(1)}</DialogTitle>
-      <DialogContent dividers>
-        <Box color="warning.main" p={0} pl={0} pr={0} mt={0} mb={2}>
-          <Typography variant="body2">{LL.SET_TIME_TEXT()}</Typography>
-        </Box>
-        <TextField
-          label={LL.LOCAL_TIME(0)}
-          type="datetime-local"
-          value={localTime}
-          onChange={updateLocalTime}
-          disabled={processing}
-          fullWidth
-          slotProps={{
-            inputLabel: {
-              shrink: true
-            }
-          }}
-        />
-      </DialogContent>
-      <DialogActions>
-        <Button
-          startIcon={<CancelIcon />}
-          variant="outlined"
-          onClick={() => setSettingTime(false)}
-          color="secondary"
-        >
-          {LL.CANCEL()}
-        </Button>
-        <Button
-          startIcon={<AccessTimeIcon />}
-          variant="outlined"
-          onClick={configureTime}
-          disabled={processing}
-          color="primary"
-        >
-          {LL.UPDATE()}
-        </Button>
-      </DialogActions>
-    </Dialog>
-  );
-
-  const content = () => {
-    if (!data) {
-      return <FormLoader onRetry={loadData} errorMessage={errorMessage || ''} />;
+    try {
+      await updateTime({ local_time: formatLocalDateTime(new Date(localTime)) });
+      toast.success(LL.TIME_SET());
+      setSettingTime(false);
+      await loadData();
+    } catch {
+      toast.error(LL.PROBLEM_UPDATING());
+    } finally {
+      setProcessing(false);
    }
+  }, [localTime, updateTime, LL, loadData]);

-    const validateAndSubmit = async () => {
-      try {
-        setFieldErrors(undefined);
-        await validate(NTP_SETTINGS_VALIDATOR, data);
-        await saveData();
-      } catch (error) {
-        setFieldErrors(error as ValidateFieldsError);
-      }
-    };
+  // Memoize close dialog handler
+  const handleCloseSetTime = useCallback(() => setSettingTime(false), []);

-    const changeTimeZone = (event: React.ChangeEvent<HTMLInputElement>) => {
+  // Memoize validate and submit handler
+  const validateAndSubmit = useCallback(async () => {
+    if (!data) return;
+    try {
+      setFieldErrors(undefined);
+      await validate(NTP_SETTINGS_VALIDATOR, data);
+      await saveData();
+    } catch (error) {
+      setFieldErrors(error as ValidateFieldsError);
+    }
+  }, [data, saveData]);
+
+  // Memoize timezone change handler
+  const changeTimeZone = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
      void updateState(readNTPSettings(), (settings: NTPSettingsType) => ({
        ...settings,
        tz_label: event.target.value,
        tz_format: TIME_ZONES[event.target.value]
      }));
      updateFormValue(event);
-    };
+    },
+    [updateFormValue]
+  );
+
+  // Memoize render content to prevent unnecessary re-renders
+  const renderContent = useMemo(() => {
+    if (!data) {
+      return <FormLoader onRetry={loadData} errorMessage={errorMessage || ''} />;
+    }

    return (
      <>
@@ -205,13 +184,13 @@ const NTPSettings = () => {
          label={LL.TIME_ZONE()}
          fullWidth
          variant="outlined"
-          value={selectedTimeZone(data.tz_label, data.tz_format)}
+          value={selectedTzValue}
          onChange={changeTimeZone}
          margin="normal"
          select
        >
          <MenuItem disabled>{LL.TIME_ZONE()}...</MenuItem>
-          {timeZoneSelectItems()}
+          {timeZoneItems}
        </ValidatedTextField>

        <Box display="flex" flexWrap="wrap">
@@ -230,7 +209,6 @@ const NTPSettings = () => {
            </Box>
          )}
        </Box>
-        {renderSetTimeDialog()}

        {dirtyFlags && dirtyFlags.length !== 0 && (
          <ButtonRow>
@@ -258,12 +236,66 @@ const NTPSettings = () => {
        )}
      </>
    );
-  };
+  }, [
+    data,
+    errorMessage,
+    loadData,
+    updateFormValue,
+    fieldErrors,
+    selectedTzValue,
+    changeTimeZone,
+    timeZoneItems,
+    dirtyFlags,
+    openSetTime,
+    saving,
+    validateAndSubmit,
+    LL
+  ]);

  return (
    <SectionContent>
      {blocker ? <BlockNavigation blocker={blocker} /> : null}
-      {content()}
+      {renderContent}
+      <Dialog sx={dialogStyle} open={settingTime} onClose={handleCloseSetTime}>
+        <DialogTitle>{LL.SET_TIME(1)}</DialogTitle>
+        <DialogContent dividers>
+          <Box color="warning.main" p={0} pl={0} pr={0} mt={0} mb={2}>
+            <Typography variant="body2">{LL.SET_TIME_TEXT()}</Typography>
+          </Box>
+          <TextField
+            label={LL.LOCAL_TIME(0)}
+            type="datetime-local"
+            value={localTime}
+            onChange={updateLocalTime}
+            disabled={processing}
+            fullWidth
+            slotProps={{
+              inputLabel: {
+                shrink: true
+              }
+            }}
+          />
+        </DialogContent>
+        <DialogActions>
+          <Button
+            startIcon={<CancelIcon />}
+            variant="outlined"
+            onClick={handleCloseSetTime}
+            color="secondary"
+          >
+            {LL.CANCEL()}
+          </Button>
+          <Button
+            startIcon={<AccessTimeIcon />}
+            variant="outlined"
+            onClick={configureTime}
+            disabled={processing}
+            color="primary"
+          >
+            {LL.UPDATE()}
+          </Button>
+        </DialogActions>
+      </Dialog>
    </SectionContent>
  );
 };
--- a/interface/src/app/settings/Settings.tsx
+++ b/interface/src/app/settings/Settings.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useCallback, useState } from 'react';

 import AccessTimeIcon from '@mui/icons-material/AccessTime';
 import CancelIcon from '@mui/icons-material/Cancel';
@@ -34,46 +34,25 @@ const Settings = () => {
  const { LL } = useI18nContext();
  useLayoutTitle(LL.SETTINGS(0));

-  const [confirmFactoryReset, setConfirmFactoryReset] = useState<boolean>(false);
+  const [confirmFactoryReset, setConfirmFactoryReset] = useState(false);

  const { send: sendAPI } = useRequest((data: APIcall) => API(data), {
    immediate: false
  });

-  const doFormat = async () => {
+  const doFormat = useCallback(async () => {
    await sendAPI({ device: 'system', cmd: 'format', id: 0 }).then(() => {
      setConfirmFactoryReset(false);
    });
-  };
+  }, [sendAPI]);

-  const renderFactoryResetDialog = () => (
-    <Dialog
-      sx={dialogStyle}
-      open={confirmFactoryReset}
-      onClose={() => setConfirmFactoryReset(false)}
-    >
-      <DialogTitle>{LL.FACTORY_RESET()}</DialogTitle>
-      <DialogContent dividers>{LL.SYSTEM_FACTORY_TEXT_DIALOG()}</DialogContent>
-      <DialogActions>
-        <Button
-          startIcon={<CancelIcon />}
-          variant="outlined"
-          onClick={() => setConfirmFactoryReset(false)}
-          color="secondary"
-        >
-          {LL.CANCEL()}
-        </Button>
-        <Button
-          startIcon={<SettingsBackupRestoreIcon />}
-          variant="outlined"
-          onClick={doFormat}
-          color="error"
-        >
-          {LL.FACTORY_RESET()}
-        </Button>
-      </DialogActions>
-    </Dialog>
-  );
+  const handleFactoryResetClose = useCallback(() => {
+    setConfirmFactoryReset(false);
+  }, []);
+
+  const handleFactoryResetClick = useCallback(() => {
+    setConfirmFactoryReset(true);
+  }, []);

  return (
    <SectionContent>
@@ -142,7 +121,32 @@ const Settings = () => {
        />
      </List>

-      {renderFactoryResetDialog()}
+      <Dialog
+        sx={dialogStyle}
+        open={confirmFactoryReset}
+        onClose={handleFactoryResetClose}
+      >
+        <DialogTitle>{LL.FACTORY_RESET()}</DialogTitle>
+        <DialogContent dividers>{LL.SYSTEM_FACTORY_TEXT_DIALOG()}</DialogContent>
+        <DialogActions>
+          <Button
+            startIcon={<CancelIcon />}
+            variant="outlined"
+            onClick={handleFactoryResetClose}
+            color="secondary"
+          >
+            {LL.CANCEL()}
+          </Button>
+          <Button
+            startIcon={<SettingsBackupRestoreIcon />}
+            variant="outlined"
+            onClick={doFormat}
+            color="error"
+          >
+            {LL.FACTORY_RESET()}
+          </Button>
+        </DialogActions>
+      </Dialog>

      <Divider />

@@ -156,7 +160,7 @@ const Settings = () => {
        <Button
          startIcon={<SettingsBackupRestoreIcon />}
          variant="outlined"
-          onClick={() => setConfirmFactoryReset(true)}
+          onClick={handleFactoryResetClick}
          color="error"
        >
          {LL.FACTORY_RESET()}
--- a/interface/src/app/settings/TZ.tsx
+++ b/interface/src/app/settings/TZ.tsx
@@ -1,8 +1,10 @@
+import { useMemo } from 'react';
+
 import { MenuItem } from '@mui/material';

 type TimeZones = Record<string, string>;

-export const TIME_ZONES: TimeZones = {
+export const TIME_ZONES: Readonly<TimeZones> = {
  'Africa/Abidjan': 'GMT0',
  'Africa/Accra': 'GMT0',
  'Africa/Addis_Ababa': 'EAT-3',
@@ -465,14 +467,33 @@ export const TIME_ZONES: TimeZones = {
  'Pacific/Wallis': 'UNK-12'
 };

+// Pre-compute sorted timezone labels for better performance
+export const TIME_ZONE_LABELS = Object.keys(TIME_ZONES).sort();
+
 export function selectedTimeZone(label: string, format: string) {
  return TIME_ZONES[label] === format ? label : undefined;
 }

-export function timeZoneSelectItems() {
-  return Object.keys(TIME_ZONES).map((label) => (
-    <MenuItem key={label} value={label}>
-      {label}
-    </MenuItem>
-  ));
+// Memoized version for use in components
+export function useTimeZoneSelectItems() {
+  return useMemo(
+    () =>
+      TIME_ZONE_LABELS.map((label) => (
+        <MenuItem key={label} value={label}>
+          {label}
+        </MenuItem>
+      )),
+    []
+  );
+}
+
+// Fallback export for backward compatibility - now memoized
+const precomputedTimeZoneItems = TIME_ZONE_LABELS.map((label) => (
+  <MenuItem key={label} value={label}>
+    {label}
+  </MenuItem>
+));
+
+export function timeZoneSelectItems() {
+  return precomputedTimeZoneItems;
 }
--- a/interface/src/app/settings/network/Network.tsx
+++ b/interface/src/app/settings/network/Network.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react';
+import { memo, useCallback, useMemo, useState } from 'react';
 import {
  Navigate,
  Route,
@@ -28,8 +28,7 @@ const Network = () => {
    [
      {
        path: '/settings/network/settings',
-        element: <NetworkSettings />,
-        dog: 'woof'
+        element: <NetworkSettings />
      },
      { path: '/settings/network/scan', element: <WiFiNetworkScanner /> }
    ],
@@ -53,14 +52,17 @@ const Network = () => {
    setSelectedNetwork(undefined);
  }, []);

+  const contextValue = useMemo(
+    () => ({
+      ...(selectedNetwork && { selectedNetwork }),
+      selectNetwork,
+      deselectNetwork
+    }),
+    [selectedNetwork, selectNetwork, deselectNetwork]
+  );
+
  return (
-    <WiFiConnectionContext.Provider
-      value={{
-        ...(selectedNetwork && { selectedNetwork }),
-        selectNetwork,
-        deselectNetwork
-      }}
-    >
+    <WiFiConnectionContext.Provider value={contextValue}>
      <RouterTabs value={routerTab}>
        <Tab
          value="/settings/network/settings"
@@ -80,4 +82,4 @@ const Network = () => {
  );
 };

-export default Network;
+export default memo(Network);
--- a/interface/src/app/settings/network/NetworkSettings.tsx
+++ b/interface/src/app/settings/network/NetworkSettings.tsx
@@ -1,4 +1,4 @@
-import { useContext, useEffect, useState } from 'react';
+import { memo, useCallback, useContext, useEffect, useState } from 'react';
 import { toast } from 'react-toastify';

 import CancelIcon from '@mui/icons-material/Cancel';
@@ -109,38 +109,37 @@ const NetworkSettings = () => {

  const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();

-  useEffect(() => deselectNetwork, [deselectNetwork]);
+  const validateAndSubmit = useCallback(async () => {
+    if (!data) return;
+    try {
+      setFieldErrors(undefined);
+      await validate(createNetworkSettingsValidator(data), data);
+      await saveData();
+    } catch (error) {
+      setFieldErrors(error as ValidateFieldsError);
+    }
+    deselectNetwork();
+  }, [data, saveData, deselectNetwork]);
+
+  const setCancel = useCallback(async () => {
+    deselectNetwork();
+    await loadData();
+  }, [deselectNetwork, loadData]);
+
+  const doRestart = useCallback(async () => {
+    setRestarting(true);
+    await sendAPI({ device: 'system', cmd: 'restart', id: 0 }).catch(
+      (error: Error) => {
+        toast.error(error.message);
+      }
+    );
+  }, [sendAPI]);

  const content = () => {
    if (!data) {
      return <FormLoader onRetry={loadData} errorMessage={errorMessage || ''} />;
    }

-    const validateAndSubmit = async () => {
-      try {
-        setFieldErrors(undefined);
-        await validate(createNetworkSettingsValidator(data), data);
-        await saveData();
-      } catch (error) {
-        setFieldErrors(error as ValidateFieldsError);
-      }
-      deselectNetwork();
-    };
-
-    const setCancel = async () => {
-      deselectNetwork();
-      await loadData();
-    };
-
-    const doRestart = async () => {
-      setRestarting(true);
-      await sendAPI({ device: 'system', cmd: 'restart', id: 0 }).catch(
-        (error: Error) => {
-          toast.error(error.message);
-        }
-      );
-    };
-
    return (
      <>
        <Typography variant="h6" color="primary">
@@ -165,7 +164,7 @@ const NetworkSettings = () => {
                  selectedNetwork.bssid
                }
              />
-              <IconButton onClick={setCancel}>
+              <IconButton onClick={setCancel} aria-label={LL.CANCEL()}>
                <DeleteIcon />
              </IconButton>
            </ListItem>
@@ -405,4 +404,4 @@ const NetworkSettings = () => {
  );
 };

-export default NetworkSettings;
+export default memo(NetworkSettings);
--- a/interface/src/app/settings/network/WiFiNetworkScanner.tsx
+++ b/interface/src/app/settings/network/WiFiNetworkScanner.tsx
@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react';
+import { memo, useCallback, useRef, useState } from 'react';

 import PermScanWifiIcon from '@mui/icons-material/PermScanWifi';
 import { Button } from '@mui/material';
@@ -48,12 +48,12 @@ const WiFiNetworkScanner = () => {
    }
  });

-  const renderNetworkScanner = () => {
+  const renderNetworkScanner = useCallback(() => {
    if (!networkList) {
      return <FormLoader errorMessage={errorMessage || ''} />;
    }
    return <WiFiNetworkSelector networkList={networkList} />;
-  };
+  }, [networkList, errorMessage]);

  return (
    <SectionContent>
@@ -73,4 +73,4 @@ const WiFiNetworkScanner = () => {
  );
 };

-export default WiFiNetworkScanner;
+export default memo(WiFiNetworkScanner);
--- a/interface/src/app/settings/network/WiFiNetworkSelector.tsx
+++ b/interface/src/app/settings/network/WiFiNetworkSelector.tsx
@@ -1,4 +1,4 @@
-import { useContext } from 'react';
+import { memo, useCallback, useContext } from 'react';

 import LockIcon from '@mui/icons-material/Lock';
 import LockOpenIcon from '@mui/icons-material/LockOpen';
@@ -63,31 +63,34 @@ const WiFiNetworkSelector = ({ networkList }: { networkList: WiFiNetworkList })

  const wifiConnectionContext = useContext(WiFiConnectionContext);

-  const renderNetwork = (network: WiFiNetwork) => (
-    <ListItem
-      key={network.bssid}
-      onClick={() => wifiConnectionContext.selectNetwork(network)}
-    >
-      <ListItemAvatar>
-        <Avatar>{isNetworkOpen(network) ? <LockOpenIcon /> : <LockIcon />}</Avatar>
-      </ListItemAvatar>
-      <ListItemText
-        primary={network.ssid}
-        secondary={
-          'Security: ' +
-          networkSecurityMode(network) +
-          ', Ch: ' +
-          network.channel +
-          ', bssid: ' +
-          network.bssid
-        }
-      />
-      <ListItemIcon>
-        <Badge badgeContent={network.rssi + 'dBm'}>
-          <WifiIcon sx={{ color: networkQualityHighlight(network, theme) }} />
-        </Badge>
-      </ListItemIcon>
-    </ListItem>
+  const renderNetwork = useCallback(
+    (network: WiFiNetwork) => (
+      <ListItem
+        key={network.bssid}
+        onClick={() => wifiConnectionContext.selectNetwork(network)}
+      >
+        <ListItemAvatar>
+          <Avatar>{isNetworkOpen(network) ? <LockOpenIcon /> : <LockIcon />}</Avatar>
+        </ListItemAvatar>
+        <ListItemText
+          primary={network.ssid}
+          secondary={
+            'Security: ' +
+            networkSecurityMode(network) +
+            ', Ch: ' +
+            network.channel +
+            ', bssid: ' +
+            network.bssid
+          }
+        />
+        <ListItemIcon>
+          <Badge badgeContent={network.rssi + 'dBm'}>
+            <WifiIcon sx={{ color: networkQualityHighlight(network, theme) }} />
+          </Badge>
+        </ListItemIcon>
+      </ListItem>
+    ),
+    [wifiConnectionContext, theme]
  );

  if (networkList.networks.length === 0) {
@@ -97,4 +100,4 @@ const WiFiNetworkSelector = ({ networkList }: { networkList: WiFiNetworkList })
  return <List>{networkList.networks.map(renderNetwork)}</List>;
 };

-export default WiFiNetworkSelector;
+export default memo(WiFiNetworkSelector);
--- a/interface/src/app/settings/security/GenerateToken.tsx
+++ b/interface/src/app/settings/security/GenerateToken.tsx
@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { memo, useEffect } from 'react';

 import CloseIcon from '@mui/icons-material/Close';
 import {
@@ -40,7 +40,7 @@ const GenerateToken = ({ username, onClose }: GenerateTokenProps) => {
    if (open) {
      void generateToken();
    }
-  }, [open]);
+  }, [open, generateToken]);

  return (
    <Dialog
@@ -86,4 +86,4 @@ const GenerateToken = ({ username, onClose }: GenerateTokenProps) => {
  );
 };

-export default GenerateToken;
+export default memo(GenerateToken);
--- a/interface/src/app/settings/security/ManageUsers.tsx
+++ b/interface/src/app/settings/security/ManageUsers.tsx
@@ -1,4 +1,4 @@
-import { useContext, useState } from 'react';
+import { memo, useCallback, useContext, useMemo, useState } from 'react';
 import { useBlocker } from 'react-router';

 import CancelIcon from '@mui/icons-material/Cancel';
@@ -55,14 +55,16 @@ const ManageUsers = () => {
  const blocker = useBlocker(changed !== 0);
  const { LL } = useI18nContext();

-  const table_theme = useTheme({
-    Table: `
+  const table_theme = useMemo(
+    () =>
+      useTheme({
+        Table: `
      --data-table-library_grid-template-columns: repeat(1, minmax(0, 1fr)) minmax(120px, max-content) 120px;
    `,
-    BaseRow: `
+        BaseRow: `
      font-size: 14px;
    `,
-    HeaderRow: `
+        HeaderRow: `
      text-transform: uppercase;
      background-color: black;
      color: #90CAF9;
@@ -72,7 +74,7 @@ const ManageUsers = () => {
        border-bottom: 1px solid #565656;
      }
    `,
-    Row: `
+        Row: `
      .td {
        padding: 8px;
        border-top: 1px solid #565656;
@@ -85,7 +87,7 @@ const ManageUsers = () => {
        background-color: #1e1e1e;
      }
    `,
-    BaseCell: `
+        BaseCell: `
      &:nth-of-type(2) {
        text-align: center;
      }
@@ -93,72 +95,81 @@ const ManageUsers = () => {
        text-align: right;
      }
    `
-  });
+      }),
+    []
+  );
+
+  const noAdminConfigured = useCallback(
+    () => !data?.users.find((u) => u.admin),
+    [data]
+  );
+
+  const removeUser = useCallback(
+    (toRemove: UserType) => {
+      if (!data) return;
+      const users = data.users.filter((u) => u.username !== toRemove.username);
+      updateDataValue({ ...data, users });
+      setChanged(changed + 1);
+    },
+    [data, updateDataValue, changed]
+  );
+
+  const createUser = useCallback(() => {
+    setCreating(true);
+    setUser({
+      username: '',
+      password: '',
+      admin: true
+    });
+  }, []);
+
+  const editUser = useCallback((toEdit: UserType) => {
+    setCreating(false);
+    setUser({ ...toEdit });
+  }, []);
+
+  const cancelEditingUser = useCallback(() => {
+    setUser(undefined);
+  }, []);
+
+  const doneEditingUser = useCallback(() => {
+    if (user && data) {
+      const users = [
+        ...data.users.filter(
+          (u: { username: string }) => u.username !== user.username
+        ),
+        user
+      ];
+      updateDataValue({ ...data, users });
+      setUser(undefined);
+      setChanged(changed + 1);
+    }
+  }, [user, data, updateDataValue, changed]);
+
+  const closeGenerateToken = useCallback(() => {
+    setGeneratingToken(undefined);
+  }, []);
+
+  const generateTokenForUser = useCallback((username: string) => {
+    setGeneratingToken(username);
+  }, []);
+
+  const onSubmit = useCallback(async () => {
+    await saveData();
+    await authenticatedContext.refresh();
+    setChanged(0);
+  }, [saveData, authenticatedContext]);
+
+  const onCancelSubmit = useCallback(async () => {
+    await loadData();
+    setChanged(0);
+  }, [loadData]);

  const content = () => {
    if (!data) {
      return <FormLoader onRetry={loadData} errorMessage={errorMessage || ''} />;
    }

-    const noAdminConfigured = () => !data.users.find((u) => u.admin);
-
-    const removeUser = (toRemove: UserType) => {
-      const users = data.users.filter((u) => u.username !== toRemove.username);
-      updateDataValue({ ...data, users });
-      setChanged(changed + 1);
-    };
-
-    const createUser = () => {
-      setCreating(true);
-      setUser({
-        username: '',
-        password: '',
-        admin: true
-      });
-    };
-
-    const editUser = (toEdit: UserType) => {
-      setCreating(false);
-      setUser({ ...toEdit });
-    };
-
-    const cancelEditingUser = () => {
-      setUser(undefined);
-    };
-
-    const doneEditingUser = () => {
-      if (user) {
-        const users = [
-          ...data.users.filter(
-            (u: { username: string }) => u.username !== user.username
-          ),
-          user
-        ];
-        updateDataValue({ ...data, users });
-        setUser(undefined);
-        setChanged(changed + 1);
-      }
-    };
-
-    const closeGenerateToken = () => {
-      setGeneratingToken(undefined);
-    };
-
-    const generateToken = (username: string) => {
-      setGeneratingToken(username);
-    };
-
-    const onSubmit = async () => {
-      await saveData();
-      await authenticatedContext.refresh();
-      setChanged(0);
-    };
-
-    const onCancelSubmit = async () => {
-      await loadData();
-      setChanged(0);
-    };
-
    interface UserType2 {
      id: string;
      username: string;
@@ -167,10 +178,14 @@ const ManageUsers = () => {
    }

    // add id to the type, needed for the table
-    const user_table = data.users.map((u) => ({
-      ...u,
-      id: u.username
-    })) as UserType2[];
+    const user_table = useMemo(
+      () =>
+        data.users.map((u) => ({
+          ...u,
+          id: u.username
+        })) as UserType2[],
+      [data.users]
+    );

    return (
      <>
@@ -196,15 +211,24 @@ const ManageUsers = () => {
                    <Cell stiff>
                      <IconButton
                        size="small"
+                        aria-label={LL.GENERATING_TOKEN()}
                        disabled={!authenticatedContext.me.admin}
-                        onClick={() => generateToken(u.username)}
+                        onClick={() => generateTokenForUser(u.username)}
                      >
                        <VpnKeyIcon />
                      </IconButton>
-                      <IconButton size="small" onClick={() => removeUser(u)}>
+                      <IconButton
+                        size="small"
+                        onClick={() => removeUser(u)}
+                        aria-label={LL.REMOVE()}
+                      >
                        <DeleteIcon />
                      </IconButton>
-                      <IconButton size="small" onClick={() => editUser(u)}>
+                      <IconButton
+                        size="small"
+                        onClick={() => editUser(u)}
+                        aria-label={LL.EDIT()}
+                      >
                        <EditIcon />
                      </IconButton>
                    </Cell>
@@ -286,4 +310,4 @@ const ManageUsers = () => {
  );
 };

-export default ManageUsers;
+export default memo(ManageUsers);
--- a/interface/src/app/settings/security/Security.tsx
+++ b/interface/src/app/settings/security/Security.tsx
@@ -1,3 +1,4 @@
+import { memo, useMemo } from 'react';
 import { Navigate, Route, Routes, matchRoutes, useLocation } from 'react-router';

 import { Tab } from '@mui/material';
@@ -12,12 +13,21 @@ const Security = () => {
  const { LL } = useI18nContext();
  useLayoutTitle(LL.SECURITY(0));

-  const matchedRoutes = matchRoutes(
-    [
-      { path: '/settings/security/settings', element: <ManageUsers />, dog: 'woof' },
-      { path: '/settings/security/users', element: <SecuritySettings /> }
-    ],
-    useLocation()
+  const location = useLocation();
+
+  const matchedRoutes = useMemo(
+    () =>
+      matchRoutes(
+        [
+          {
+            path: '/settings/security/settings',
+            element: <ManageUsers />
+          },
+          { path: '/settings/security/users', element: <SecuritySettings /> }
+        ],
+        location
+      ),
+    [location]
  );
  const routerTab = matchedRoutes?.[0]?.route.path || false;

@@ -42,4 +52,4 @@ const Security = () => {
  );
 };

-export default Security;
+export default memo(Security);
--- a/interface/src/app/settings/security/SecuritySettings.tsx
+++ b/interface/src/app/settings/security/SecuritySettings.tsx
@@ -1,4 +1,4 @@
-import { useContext, useState } from 'react';
+import { memo, useCallback, useContext, useState } from 'react';

 import CancelIcon from '@mui/icons-material/Cancel';
 import WarningIcon from '@mui/icons-material/Warning';
@@ -44,28 +44,29 @@ const SecuritySettings = () => {
  const authenticatedContext = useContext(AuthenticatedContext);

  const updateFormValue = updateValueDirty(
-    origData,
+    origData as unknown as Record<string, unknown>,
    dirtyFlags,
    setDirtyFlags,
    updateDataValue as (value: unknown) => void
  );

+  const validateAndSubmit = useCallback(async () => {
+    if (!data) return;
+    try {
+      setFieldErrors(undefined);
+      await validate(SECURITY_SETTINGS_VALIDATOR, data);
+      await saveData();
+      await authenticatedContext.refresh();
+    } catch (error) {
+      setFieldErrors(error as ValidateFieldsError);
+    }
+  }, [data, saveData, authenticatedContext]);
+
  const content = () => {
    if (!data) {
      return <FormLoader onRetry={loadData} errorMessage={errorMessage || ''} />;
    }

-    const validateAndSubmit = async () => {
-      try {
-        setFieldErrors(undefined);
-        await validate(SECURITY_SETTINGS_VALIDATOR, data);
-        await saveData();
-        await authenticatedContext.refresh();
-      } catch (error) {
-        setFieldErrors(error as ValidateFieldsError);
-      }
-    };
-
    return (
      <>
        <ValidatedPasswordField
@@ -115,4 +116,4 @@ const SecuritySettings = () => {
  );
 };

-export default SecuritySettings;
+export default memo(SecuritySettings);
--- a/interface/src/app/settings/security/User.tsx
+++ b/interface/src/app/settings/security/User.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { memo, useCallback, useEffect, useState } from 'react';
 import type { FC } from 'react';

 import CancelIcon from '@mui/icons-material/Cancel';
@@ -45,7 +45,14 @@ const User: FC<UserFormProps> = ({
 }) => {
  const { LL } = useI18nContext();

-  const updateFormValue = updateValue(setUser);
+  const updateFormValue = updateValue((updater) => {
+    setUser((prevState) => {
+      if (!prevState) return prevState;
+      return updater(
+        prevState as unknown as Record<string, unknown>
+      ) as unknown as UserType;
+    });
+  });
  const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();
  const open = !!user;

@@ -55,7 +62,7 @@ const User: FC<UserFormProps> = ({
    }
  }, [open]);

-  const validateAndDone = async () => {
+  const validateAndDone = useCallback(async () => {
    if (user) {
      try {
        setFieldErrors(undefined);
@@ -65,7 +72,7 @@ const User: FC<UserFormProps> = ({
        setFieldErrors(error as ValidateFieldsError);
      }
    }
-  };
+  }, [user, validator, onDoneEditing]);

  return (
    <Dialog
@@ -137,4 +144,4 @@ const User: FC<UserFormProps> = ({
  );
 };

-export default User;
+export default memo(User);
--- a/interface/src/app/status/APStatus.tsx
+++ b/interface/src/app/status/APStatus.tsx
@@ -34,37 +34,43 @@ export const apStatusHighlight = ({ status }: APStatusType, theme: Theme) => {
  }
 };

+const getApStatusText = (
+  status: APNetworkStatus,
+  LL: ReturnType<typeof useI18nContext>['LL']
+) => {
+  switch (status) {
+    case APNetworkStatus.ACTIVE:
+      return LL.ACTIVE();
+    case APNetworkStatus.INACTIVE:
+      return LL.INACTIVE(0);
+    case APNetworkStatus.LINGERING:
+      return 'Lingering until idle';
+    default:
+      return LL.UNKNOWN();
+  }
+};
+
 const APStatus = () => {
  const { data, send: loadData, error } = useRequest(APApi.readAPStatus);
+  const { LL } = useI18nContext();
+  const theme = useTheme();
+
+  useLayoutTitle(LL.ACCESS_POINT(0));

  useInterval(() => {
    void loadData();
  });

-  const { LL } = useI18nContext();
-  useLayoutTitle(LL.ACCESS_POINT(0));
-
-  const theme = useTheme();
-
-  const apStatus = ({ status }: APStatusType) => {
-    switch (status) {
-      case APNetworkStatus.ACTIVE:
-        return LL.ACTIVE();
-      case APNetworkStatus.INACTIVE:
-        return LL.INACTIVE(0);
-      case APNetworkStatus.LINGERING:
-        return 'Lingering until idle';
-      default:
-        return LL.UNKNOWN();
-    }
-  };
-
-  const content = () => {
-    if (!data) {
-      return <FormLoader onRetry={loadData} errorMessage={error?.message || ''} />;
-    }
-
+  if (!data) {
    return (
+      <SectionContent>
+        <FormLoader onRetry={loadData} errorMessage={error?.message || ''} />
+      </SectionContent>
+    );
+  }
+
+  return (
+    <SectionContent>
      <List>
        <ListItem>
          <ListItemAvatar>
@@ -72,19 +78,26 @@ const APStatus = () => {
              <SettingsInputAntennaIcon />
            </Avatar>
          </ListItemAvatar>
-          <ListItemText primary={LL.STATUS_OF('')} secondary={apStatus(data)} />
+          <ListItemText
+            primary={LL.STATUS_OF('')}
+            secondary={getApStatusText(data.status, LL)}
+          />
        </ListItem>
+
        <Divider variant="inset" component="li" />
+
        <ListItem>
          <ListItemAvatar>
-            <Avatar>IP</Avatar>
+            <Avatar sx={{ bgcolor: 'primary.main' }}>IP</Avatar>
          </ListItemAvatar>
          <ListItemText primary={LL.ADDRESS_OF('IP')} secondary={data.ip_address} />
        </ListItem>
+
        <Divider variant="inset" component="li" />
+
        <ListItem>
          <ListItemAvatar>
-            <Avatar>
+            <Avatar sx={{ bgcolor: 'primary.main' }}>
              <DeviceHubIcon />
            </Avatar>
          </ListItemAvatar>
@@ -93,21 +106,22 @@ const APStatus = () => {
            secondary={data.mac_address}
          />
        </ListItem>
+
        <Divider variant="inset" component="li" />
+
        <ListItem>
          <ListItemAvatar>
-            <Avatar>
+            <Avatar sx={{ bgcolor: 'primary.main' }}>
              <ComputerIcon />
            </Avatar>
          </ListItemAvatar>
          <ListItemText primary={LL.AP_CLIENTS()} secondary={data.station_num} />
        </ListItem>
+
        <Divider variant="inset" component="li" />
      </List>
-    );
-  };
-
-  return <SectionContent>{content()}</SectionContent>;
+    </SectionContent>
+  );
 };

 export default APStatus;
--- a/interface/src/app/status/Activity.tsx
+++ b/interface/src/app/status/Activity.tsx
@@ -1,3 +1,5 @@
+import { useCallback, useMemo } from 'react';
+
 import {
  Body,
  Cell,
@@ -17,6 +19,12 @@ import { useInterval } from 'utils';
 import { readActivity } from '../../api/app';
 import type { Stat } from '../main/types';

+const QUALITY_COLORS = {
+  PERFECT: '#00FF7F',
+  WARNING: 'orange',
+  POOR: 'red'
+} as const;
+
 const SystemActivity = () => {
  const { data, send: loadData, error } = useRequest(readActivity);

@@ -28,14 +36,16 @@ const SystemActivity = () => {

  useLayoutTitle(LL.DATA_TRAFFIC());

-  const stats_theme = tableTheme({
-    Table: `
+  const stats_theme = tableTheme(
+    useMemo(
+      () => ({
+        Table: `
      --data-table-library_grid-template-columns: repeat(1, minmax(0, 1fr)) 90px 90px 80px;
    `,
-    BaseRow: `
+        BaseRow: `
      font-size: 14px;
    `,
-    HeaderRow: `
+        HeaderRow: `
      text-transform: uppercase;
      background-color: black;
      color: #90CAF9;
@@ -45,7 +55,7 @@ const SystemActivity = () => {
        border-bottom: 1px solid #565656;
      }
    `,
-    Row: `
+        Row: `
      .td {
        padding: 8px;
        border-top: 1px solid #565656;
@@ -59,34 +69,40 @@ const SystemActivity = () => {
        background-color: #1e1e1e;
      }
    `,
-    BaseCell: `
+        BaseCell: `
      &:not(:first-of-type) {
        text-align: center;
      }
    `
-  });
+      }),
+      []
+    )
+  );

-  const showName = (id: number) => {
-    const name: keyof Translation['STATUS_NAMES'] =
-      id.toString() as keyof Translation['STATUS_NAMES'];
-    return LL.STATUS_NAMES[name]();
-  };
+  const showName = useCallback(
+    (id: number) => {
+      const name: keyof Translation['STATUS_NAMES'] =
+        id.toString() as keyof Translation['STATUS_NAMES'];
+      return LL.STATUS_NAMES[name]();
+    },
+    [LL]
+  );

-  const showQuality = (stat: Stat) => {
+  const showQuality = useCallback((stat: Stat) => {
    if (stat.q === 0 || stat.s + stat.f === 0) {
      return;
    }
    if (stat.q === 100) {
-      return <div style={{ color: '#00FF7F' }}>{stat.q}%</div>;
+      return <div style={{ color: QUALITY_COLORS.PERFECT }}>{stat.q}%</div>;
    }
    if (stat.q >= 95) {
-      return <div style={{ color: 'orange' }}>{stat.q}%</div>;
+      return <div style={{ color: QUALITY_COLORS.WARNING }}>{stat.q}%</div>;
    } else {
-      return <div style={{ color: 'red' }}>{stat.q}%</div>;
+      return <div style={{ color: QUALITY_COLORS.POOR }}>{stat.q}%</div>;
    }
-  };
+  }, []);

-  const content = () => {
+  const content = useMemo(() => {
    if (!data) {
      return <FormLoader onRetry={loadData} errorMessage={error?.message || ''} />;
    }
@@ -121,9 +137,9 @@ const SystemActivity = () => {
        )}
      </Table>
    );
-  };
+  }, [data, loadData, error?.message, stats_theme, LL, showName, showQuality]);

-  return <SectionContent>{content()}</SectionContent>;
+  return <SectionContent>{content}</SectionContent>;
 };

 export default SystemActivity;
--- a/interface/src/app/status/HardwareStatus.tsx
+++ b/interface/src/app/status/HardwareStatus.tsx
@@ -1,3 +1,5 @@
+import { ReactElement } from 'react';
+
 import AppsIcon from '@mui/icons-material/Apps';
 import DeveloperBoardIcon from '@mui/icons-material/DeveloperBoard';
 import DevicesIcon from '@mui/icons-material/Devices';
@@ -24,10 +26,61 @@ import { useInterval } from 'utils';

 import BBQKeesIcon from './bbqkees.svg';

+// Constants
+const AVATAR_COLORS = {
+  DEFAULT: '#5f9a5f',
+  BBQKEES: '#003289'
+} as const;
+
+const TEMP_THRESHOLD_CELSIUS = 90; // Temperature threshold to determine F vs C
+
 function formatNumber(num: number) {
  return new Intl.NumberFormat().format(num);
 }

+function formatTemperature(temp?: number): string {
+  if (!temp) return '';
+  const unit = temp > TEMP_THRESHOLD_CELSIUS ? 'F' : 'C';
+  return `, T: ${temp} °${unit}`;
+}
+
+function formatFlashSpeed(speed: number): string {
+  return (speed / 1000000).toFixed(0) + ' MHz';
+}
+
+function formatCPUCores(cores: number): string {
+  return cores === 1 ? 'single-core)' : 'dual-core)';
+}
+
+// Reusable component for hardware status list items
+interface HardwareListItemProps {
+  icon: ReactElement;
+  primary: string;
+  secondary: string;
+  avatarColor?: string;
+  customIcon?: ReactElement | undefined;
+}
+
+const HardwareListItem = ({
+  icon,
+  primary,
+  secondary,
+  avatarColor = AVATAR_COLORS.DEFAULT,
+  customIcon
+}: HardwareListItemProps) => (
+  <>
+    <ListItem>
+      <ListItemAvatar>
+        <Avatar sx={{ bgcolor: avatarColor, color: 'white' }}>
+          {customIcon || icon}
+        </Avatar>
+      </ListItemAvatar>
+      <ListItemText primary={primary} secondary={secondary} />
+    </ListItem>
+    <Divider variant="inset" component="li" />
+  </>
+);
+
 const HardwareStatus = () => {
  const { LL } = useI18nContext();

@@ -39,175 +92,72 @@ const HardwareStatus = () => {
    void loadData();
  });

-  const content = () => {
-    if (!data) {
-      return <FormLoader onRetry={loadData} errorMessage={error?.message || ''} />;
-    }
-
+  if (!data) {
    return (
-      <List>
-        <ListItem>
-          <ListItemAvatar>
-            {data.model ? (
-              <Avatar sx={{ bgcolor: '#003289', color: 'white' }}>
-                <img
-                  alt="BBQKees"
-                  src={BBQKeesIcon}
-                  style={{ width: 16, verticalAlign: 'middle' }}
-                />
-              </Avatar>
-            ) : (
-              <Avatar sx={{ bgcolor: '#5f9a5f', color: 'white' }}>
-                <TapAndPlayIcon />
-              </Avatar>
-            )}
-          </ListItemAvatar>
-          <ListItemText
-            primary={LL.HARDWARE() + ' ' + LL.DEVICE()}
-            secondary={data.model ? data.model : data.cpu_type}
-          />
-        </ListItem>
-        <Divider variant="inset" component="li" />
-        <ListItem>
-          <ListItemAvatar>
-            <Avatar sx={{ bgcolor: '#5f9a5f', color: 'white' }}>
-              <DevicesIcon />
-            </Avatar>
-          </ListItemAvatar>
-          <ListItemText
-            primary="SDK"
-            secondary={data.arduino_version + ' / ESP-IDF ' + data.sdk_version}
-          />
-        </ListItem>
-        <Divider variant="inset" component="li" />
-        <ListItem>
-          <ListItemAvatar>
-            <Avatar sx={{ bgcolor: '#5f9a5f', color: 'white' }}>
-              <DeveloperBoardIcon />
-            </Avatar>
-          </ListItemAvatar>
-          <ListItemText
-            primary="CPU"
-            secondary={
-              data.esp_platform +
-              '/' +
-              data.cpu_type +
-              ' (rev.' +
-              data.cpu_rev +
-              ', ' +
-              (data.cpu_cores === 1 ? 'single-core)' : 'dual-core)') +
-              ' @ ' +
-              data.cpu_freq_mhz +
-              ' Mhz' +
-              // bit of a hack : if the CPU temp is higher than 90 (=32 Fahrenheit if using Celsius), show F, otherwise C
-              (data.temperature
-                ? ', T: ' +
-                  data.temperature +
-                  ' °' +
-                  (data.temperature > 90 ? 'F' : 'C')
-                : '')
-            }
-          />
-        </ListItem>
-        <Divider variant="inset" component="li" />
-        <ListItem>
-          <ListItemAvatar>
-            <Avatar sx={{ bgcolor: '#5f9a5f', color: 'white' }}>
-              <MemoryIcon />
-            </Avatar>
-          </ListItemAvatar>
-          <ListItemText
-            primary={LL.FREE_MEMORY()}
-            secondary={
-              formatNumber(data.free_heap) +
-              ' KB (' +
-              formatNumber(data.max_alloc_heap) +
-              ' KB max alloc, ' +
-              formatNumber(data.free_caps) +
-              ' KB caps)'
-            }
-          />
-        </ListItem>
-        {data.psram_size !== undefined && data.free_psram !== undefined && (
-          <>
-            <Divider variant="inset" component="li" />
-            <ListItem>
-              <ListItemAvatar>
-                <Avatar sx={{ bgcolor: '#5f9a5f', color: 'white' }}>
-                  <AppsIcon />
-                </Avatar>
-              </ListItemAvatar>
-              <ListItemText
-                primary={LL.PSRAM()}
-                secondary={
-                  formatNumber(data.psram_size) +
-                  ' KB / ' +
-                  formatNumber(data.free_psram) +
-                  ' KB'
-                }
-              />
-            </ListItem>
-          </>
-        )}
-        <Divider variant="inset" component="li" />
-        <ListItem>
-          <ListItemAvatar>
-            <Avatar sx={{ bgcolor: '#5f9a5f', color: 'white' }}>
-              <SdStorageIcon />
-            </Avatar>
-          </ListItemAvatar>
-          <ListItemText
-            primary={LL.FLASH()}
-            secondary={
-              formatNumber(data.flash_chip_size) +
-              ' KB , ' +
-              (data.flash_chip_speed / 1000000).toFixed(0) +
-              ' MHz'
-            }
-          />
-        </ListItem>
-        <Divider variant="inset" component="li" />
-        <ListItem>
-          <ListItemAvatar>
-            <Avatar sx={{ bgcolor: '#5f9a5f', color: 'white' }}>
-              <SdCardAlertIcon />
-            </Avatar>
-          </ListItemAvatar>
-          <ListItemText
-            primary={LL.APPSIZE()}
-            secondary={
-              data.partition +
-              ': ' +
-              formatNumber(data.app_used) +
-              ' KB / ' +
-              formatNumber(data.app_free) +
-              ' KB'
-            }
-          />
-        </ListItem>
-        <Divider variant="inset" component="li" />
-        <ListItem>
-          <ListItemAvatar>
-            <Avatar sx={{ bgcolor: '#5f9a5f', color: 'white' }}>
-              <FolderIcon />
-            </Avatar>
-          </ListItemAvatar>
-          <ListItemText
-            primary={LL.FILESYSTEM()}
-            secondary={
-              formatNumber(data.fs_used) +
-              ' KB / ' +
-              formatNumber(data.fs_free) +
-              ' KB'
-            }
-          />
-        </ListItem>
-        <Divider variant="inset" component="li" />
-      </List>
+      <SectionContent>
+        <FormLoader onRetry={loadData} errorMessage={error?.message || ''} />
+      </SectionContent>
    );
-  };
+  }

-  return <SectionContent>{content()}</SectionContent>;
+  return (
+    <SectionContent>
+      <List>
+        <HardwareListItem
+          icon={<TapAndPlayIcon />}
+          primary={`${LL.HARDWARE()} ${LL.DEVICE()}`}
+          secondary={data.model || data.cpu_type}
+          avatarColor={data.model ? AVATAR_COLORS.BBQKEES : AVATAR_COLORS.DEFAULT}
+          customIcon={
+            data.model ? (
+              <img
+                alt="BBQKees"
+                src={BBQKeesIcon}
+                style={{ width: 16, verticalAlign: 'middle' }}
+              />
+            ) : undefined
+          }
+        />
+        <HardwareListItem
+          icon={<DevicesIcon />}
+          primary="SDK"
+          secondary={`${data.arduino_version} / ESP-IDF ${data.sdk_version}`}
+        />
+        <HardwareListItem
+          icon={<DeveloperBoardIcon />}
+          primary="CPU"
+          secondary={`${data.esp_platform}/${data.cpu_type} (rev.${data.cpu_rev}, ${formatCPUCores(data.cpu_cores)} @ ${data.cpu_freq_mhz} Mhz${formatTemperature(data.temperature)}`}
+        />
+        <HardwareListItem
+          icon={<MemoryIcon />}
+          primary={LL.FREE_MEMORY()}
+          secondary={`${formatNumber(data.free_heap)} KB (${formatNumber(data.max_alloc_heap)} KB max alloc, ${formatNumber(data.free_caps)} KB caps)`}
+        />
+        {data.psram_size !== undefined && data.free_psram !== undefined && (
+          <HardwareListItem
+            icon={<AppsIcon />}
+            primary={LL.PSRAM()}
+            secondary={`${formatNumber(data.psram_size)} KB / ${formatNumber(data.free_psram)} KB`}
+          />
+        )}
+        <HardwareListItem
+          icon={<SdStorageIcon />}
+          primary={LL.FLASH()}
+          secondary={`${formatNumber(data.flash_chip_size)} KB , ${formatFlashSpeed(data.flash_chip_speed)}`}
+        />
+        <HardwareListItem
+          icon={<SdCardAlertIcon />}
+          primary={LL.APPSIZE()}
+          secondary={`${data.partition}: ${formatNumber(data.app_used)} KB / ${formatNumber(data.app_free)} KB`}
+        />
+        <HardwareListItem
+          icon={<FolderIcon />}
+          primary={LL.FILESYSTEM()}
+          secondary={`${formatNumber(data.fs_used)} KB / ${formatNumber(data.fs_free)} KB`}
+        />
+      </List>
+    </SectionContent>
+  );
 };

 export default HardwareStatus;
--- a/interface/src/app/status/MqttStatus.tsx
+++ b/interface/src/app/status/MqttStatus.tsx
@@ -1,3 +1,5 @@
+import { type FC, memo, useMemo } from 'react';
+
 import AutoAwesomeMotionIcon from '@mui/icons-material/AutoAwesomeMotion';
 import DeviceHubIcon from '@mui/icons-material/DeviceHub';
 import ReportIcon from '@mui/icons-material/Report';
@@ -22,17 +24,28 @@ import type { MqttStatusType } from 'types';
 import { MqttDisconnectReason } from 'types';
 import { useInterval } from 'utils';

+// Disconnect reason lookup table - created once, reused across renders
+const DISCONNECT_REASONS: Record<MqttDisconnectReason, string> = {
+  [MqttDisconnectReason.USER_OK]: 'User disconnected',
+  [MqttDisconnectReason.TCP_DISCONNECTED]: 'TCP disconnected',
+  [MqttDisconnectReason.MQTT_UNACCEPTABLE_PROTOCOL_VERSION]:
+    'Unacceptable protocol version',
+  [MqttDisconnectReason.MQTT_IDENTIFIER_REJECTED]: 'Client ID rejected',
+  [MqttDisconnectReason.MQTT_SERVER_UNAVAILABLE]: 'Server unavailable',
+  [MqttDisconnectReason.MQTT_MALFORMED_CREDENTIALS]: 'Malformed credentials',
+  [MqttDisconnectReason.MQTT_NOT_AUTHORIZED]: 'Not authorized',
+  [MqttDisconnectReason.TLS_BAD_FINGERPRINT]: 'TLS fingerprint invalid'
+};
+
+const getDisconnectReason = (disconnect_reason: MqttDisconnectReason): string =>
+  DISCONNECT_REASONS[disconnect_reason] ?? 'Unknown';
+
 export const mqttStatusHighlight = (
  { enabled, connected }: MqttStatusType,
  theme: Theme
 ) => {
-  if (!enabled) {
-    return theme.palette.info.main;
-  }
-  if (connected) {
-    return theme.palette.success.main;
-  }
-  return theme.palette.error.main;
+  if (!enabled) return theme.palette.info.main;
+  return connected ? theme.palette.success.main : theme.palette.error.main;
 };

 export const mqttPublishHighlight = (
@@ -41,114 +54,100 @@ export const mqttPublishHighlight = (
 ) => {
  if (mqtt_fails === 0) return theme.palette.success.main;
  if (mqtt_fails < 10) return theme.palette.warning.main;
-
  return theme.palette.error.main;
 };

-export const mqttQueueHighlight = (
-  { mqtt_queued }: MqttStatusType,
-  theme: Theme
-) => {
-  if (mqtt_queued <= 1) return theme.palette.success.main;
+export const mqttQueueHighlight = ({ mqtt_queued }: MqttStatusType, theme: Theme) =>
+  mqtt_queued <= 1 ? theme.palette.success.main : theme.palette.warning.main;

-  return theme.palette.warning.main;
-};
+interface ConnectionStatusProps {
+  data: MqttStatusType;
+  theme: Theme;
+}
+
+// Memoized component to prevent unnecessary re-renders when parent updates
+const ConnectionStatus: FC<ConnectionStatusProps> = memo(({ data, theme }) => {
+  const { LL } = useI18nContext();
+
+  return (
+    <>
+      {!data.connected && (
+        <>
+          <ListItem>
+            <ListItemAvatar>
+              <Avatar>
+                <ReportIcon />
+              </Avatar>
+            </ListItemAvatar>
+            <ListItemText
+              primary={LL.DISCONNECT_REASON()}
+              secondary={getDisconnectReason(data.disconnect_reason)}
+            />
+          </ListItem>
+          <Divider variant="inset" component="li" />
+        </>
+      )}
+      <ListItem>
+        <ListItemAvatar>
+          <Avatar>#</Avatar>
+        </ListItemAvatar>
+        <ListItemText primary={LL.ID_OF(LL.CLIENT())} secondary={data.client_id} />
+      </ListItem>
+      <Divider variant="inset" component="li" />
+      <ListItem>
+        <ListItemAvatar>
+          <Avatar sx={{ bgcolor: mqttQueueHighlight(data, theme) }}>
+            <AutoAwesomeMotionIcon />
+          </Avatar>
+        </ListItemAvatar>
+        <ListItemText primary={LL.MQTT_QUEUE()} secondary={data.mqtt_queued} />
+      </ListItem>
+      <Divider variant="inset" component="li" />
+      <ListItem>
+        <ListItemAvatar>
+          <Avatar sx={{ bgcolor: mqttPublishHighlight(data, theme) }}>
+            <SpeakerNotesOffIcon />
+          </Avatar>
+        </ListItemAvatar>
+        <ListItemText primary={LL.ERRORS_OF('MQTT')} secondary={data.mqtt_fails} />
+      </ListItem>
+      <Divider variant="inset" component="li" />
+    </>
+  );
+});

 const MqttStatus = () => {
  const { data, send: loadData, error } = useRequest(MqttApi.readMqttStatus);
+  const { LL } = useI18nContext();
+  const theme = useTheme();
+
+  useLayoutTitle('MQTT');

  useInterval(() => {
    void loadData();
  });

-  const { LL } = useI18nContext();
-  useLayoutTitle('MQTT');
+  // Memoize error message separately to avoid re-renders on error object changes
+  const errorMessage = error?.message || '';

-  const theme = useTheme();
-
-  const mqttStatus = ({ enabled, connected, connect_count }: MqttStatusType) => {
-    if (!enabled) {
-      return LL.NOT_ENABLED();
-    }
-    if (connected) {
-      return LL.CONNECTED(0) + ' (' + connect_count + ')';
-    }
-    return LL.DISCONNECTED() + ' (' + connect_count + ')';
-  };
-
-  const disconnectReason = ({ disconnect_reason }: MqttStatusType) => {
-    switch (disconnect_reason) {
-      case MqttDisconnectReason.TCP_DISCONNECTED:
-        return 'TCP disconnected';
-      case MqttDisconnectReason.MQTT_UNACCEPTABLE_PROTOCOL_VERSION:
-        return 'Unacceptable protocol version';
-      case MqttDisconnectReason.MQTT_IDENTIFIER_REJECTED:
-        return 'Client ID rejected';
-      case MqttDisconnectReason.MQTT_SERVER_UNAVAILABLE:
-        return 'Server unavailable';
-      case MqttDisconnectReason.MQTT_MALFORMED_CREDENTIALS:
-        return 'Malformed credentials';
-      case MqttDisconnectReason.MQTT_NOT_AUTHORIZED:
-        return 'Not authorized';
-      case MqttDisconnectReason.TLS_BAD_FINGERPRINT:
-        return 'TLS fingerprint invalid';
-      default:
-        return 'Unknown';
-    }
-  };
-
-  const content = () => {
-    if (!data) {
-      return <FormLoader onRetry={loadData} errorMessage={error?.message || ''} />;
-    }
-
-    const renderConnectionStatus = () => (
-      <>
-        {!data.connected && (
-          <>
-            <ListItem>
-              <ListItemAvatar>
-                <Avatar>
-                  <ReportIcon />
-                </Avatar>
-              </ListItemAvatar>
-              <ListItemText
-                primary={LL.DISCONNECT_REASON()}
-                secondary={disconnectReason(data)}
-              />
-            </ListItem>
-            <Divider variant="inset" component="li" />
-          </>
-        )}
-        <ListItem>
-          <ListItemAvatar>
-            <Avatar>#</Avatar>
-          </ListItemAvatar>
-          <ListItemText primary={LL.ID_OF(LL.CLIENT())} secondary={data.client_id} />
-        </ListItem>
-        <Divider variant="inset" component="li" />
-        <ListItem>
-          <ListItemAvatar>
-            <Avatar sx={{ bgcolor: mqttQueueHighlight(data, theme) }}>
-              <AutoAwesomeMotionIcon />
-            </Avatar>
-          </ListItemAvatar>
-          <ListItemText primary={LL.MQTT_QUEUE()} secondary={data.mqtt_queued} />
-        </ListItem>
-        <Divider variant="inset" component="li" />
-        <ListItem>
-          <ListItemAvatar>
-            <Avatar sx={{ bgcolor: mqttPublishHighlight(data, theme) }}>
-              <SpeakerNotesOffIcon />
-            </Avatar>
-          </ListItemAvatar>
-          <ListItemText primary={LL.ERRORS_OF('MQTT')} secondary={data.mqtt_fails} />
-        </ListItem>
-        <Divider variant="inset" component="li" />
-      </>
-    );
+  const mqttStatusText = useMemo(() => {
+    if (!data) return '';
+    if (!data.enabled) return LL.NOT_ENABLED();
+    return data.connected
+      ? `${LL.CONNECTED(0)} (${data.connect_count})`
+      : `${LL.DISCONNECTED()} (${data.connect_count})`;
+  }, [data, LL]);

+  if (!data) {
    return (
+      <SectionContent>
+        <FormLoader onRetry={loadData} errorMessage={errorMessage} />
+      </SectionContent>
+    );
+  }
+
+  return (
+    <SectionContent>
      <List>
        <ListItem>
          <ListItemAvatar>
@@ -156,15 +155,13 @@ const MqttStatus = () => {
              <DeviceHubIcon />
            </Avatar>
          </ListItemAvatar>
-          <ListItemText primary={LL.STATUS_OF('')} secondary={mqttStatus(data)} />
+          <ListItemText primary={LL.STATUS_OF('')} secondary={mqttStatusText} />
        </ListItem>
        <Divider variant="inset" component="li" />
-        {data.enabled && renderConnectionStatus()}
+        {data.enabled && <ConnectionStatus data={data} theme={theme} />}
      </List>
-    );
-  };
-
-  return <SectionContent>{content()}</SectionContent>;
+    </SectionContent>
+  );
 };

 export default MqttStatus;
--- a/interface/src/app/status/NTPStatus.tsx
+++ b/interface/src/app/status/NTPStatus.tsx
@@ -1,3 +1,5 @@
+import { useMemo } from 'react';
+
 import AccessTimeIcon from '@mui/icons-material/AccessTime';
 import DnsIcon from '@mui/icons-material/Dns';
 import SwapVerticalCircleIcon from '@mui/icons-material/SwapVerticalCircle';
@@ -23,6 +25,23 @@ import { NTPSyncStatus } from 'types';
 import { useInterval } from 'utils';
 import { formatDateTime } from 'utils';

+// Utility functions
+const isNtpEnabled = ({ status }: NTPStatusType) =>
+  status !== NTPSyncStatus.NTP_DISABLED;
+
+const ntpStatusHighlight = ({ status }: NTPStatusType, theme: Theme) => {
+  switch (status) {
+    case NTPSyncStatus.NTP_DISABLED:
+      return theme.palette.info.main;
+    case NTPSyncStatus.NTP_INACTIVE:
+      return theme.palette.error.main;
+    case NTPSyncStatus.NTP_ACTIVE:
+      return theme.palette.success.main;
+    default:
+      return theme.palette.error.main;
+  }
+};
+
 const NTPStatus = () => {
  const { data, send: loadData, error } = useRequest(NTPApi.readNTPStatus);

@@ -33,24 +52,6 @@ const NTPStatus = () => {
  const { LL } = useI18nContext();
  useLayoutTitle('NTP');

-  NTPApi.updateTime;
-
-  const isNtpEnabled = ({ status }: NTPStatusType) =>
-    status !== NTPSyncStatus.NTP_DISABLED;
-
-  const ntpStatusHighlight = ({ status }: NTPStatusType, theme: Theme) => {
-    switch (status) {
-      case NTPSyncStatus.NTP_DISABLED:
-        return theme.palette.info.main;
-      case NTPSyncStatus.NTP_INACTIVE:
-        return theme.palette.error.main;
-      case NTPSyncStatus.NTP_ACTIVE:
-        return theme.palette.success.main;
-      default:
-        return theme.palette.error.main;
-    }
-  };
-
  const theme = useTheme();

  const ntpStatus = ({ status }: NTPStatusType) => {
@@ -66,66 +67,64 @@ const NTPStatus = () => {
    }
  };

-  const content = () => {
+  const content = useMemo(() => {
    if (!data) {
      return <FormLoader onRetry={loadData} errorMessage={error?.message || ''} />;
    }

    return (
-      <>
-        <List>
-          <ListItem>
-            <ListItemAvatar>
-              <Avatar sx={{ bgcolor: ntpStatusHighlight(data, theme) }}>
-                <UpdateIcon />
-              </Avatar>
-            </ListItemAvatar>
-            <ListItemText primary={LL.STATUS_OF('')} secondary={ntpStatus(data)} />
-          </ListItem>
-          <Divider variant="inset" component="li" />
-          {isNtpEnabled(data) && (
-            <>
-              <ListItem>
-                <ListItemAvatar>
-                  <Avatar>
-                    <DnsIcon />
-                  </Avatar>
-                </ListItemAvatar>
-                <ListItemText primary={LL.NTP_SERVER()} secondary={data.server} />
-              </ListItem>
-              <Divider variant="inset" component="li" />
-            </>
-          )}
-          <ListItem>
-            <ListItemAvatar>
-              <Avatar>
-                <AccessTimeIcon />
-              </Avatar>
-            </ListItemAvatar>
-            <ListItemText
-              primary={LL.LOCAL_TIME(0)}
-              secondary={formatDateTime(data.local_time)}
-            />
-          </ListItem>
-          <Divider variant="inset" component="li" />
-          <ListItem>
-            <ListItemAvatar>
-              <Avatar>
-                <SwapVerticalCircleIcon />
-              </Avatar>
-            </ListItemAvatar>
-            <ListItemText
-              primary={LL.UTC_TIME()}
-              secondary={formatDateTime(data.utc_time)}
-            />
-          </ListItem>
-          <Divider variant="inset" component="li" />
-        </List>
-      </>
+      <List>
+        <ListItem>
+          <ListItemAvatar>
+            <Avatar sx={{ bgcolor: ntpStatusHighlight(data, theme) }}>
+              <UpdateIcon />
+            </Avatar>
+          </ListItemAvatar>
+          <ListItemText primary={LL.STATUS_OF('')} secondary={ntpStatus(data)} />
+        </ListItem>
+        <Divider variant="inset" component="li" />
+        {isNtpEnabled(data) && (
+          <>
+            <ListItem>
+              <ListItemAvatar>
+                <Avatar>
+                  <DnsIcon />
+                </Avatar>
+              </ListItemAvatar>
+              <ListItemText primary={LL.NTP_SERVER()} secondary={data.server} />
+            </ListItem>
+            <Divider variant="inset" component="li" />
+          </>
+        )}
+        <ListItem>
+          <ListItemAvatar>
+            <Avatar>
+              <AccessTimeIcon />
+            </Avatar>
+          </ListItemAvatar>
+          <ListItemText
+            primary={LL.LOCAL_TIME(0)}
+            secondary={formatDateTime(data.local_time)}
+          />
+        </ListItem>
+        <Divider variant="inset" component="li" />
+        <ListItem>
+          <ListItemAvatar>
+            <Avatar>
+              <SwapVerticalCircleIcon />
+            </Avatar>
+          </ListItemAvatar>
+          <ListItemText
+            primary={LL.UTC_TIME()}
+            secondary={formatDateTime(data.utc_time)}
+          />
+        </ListItem>
+        <Divider variant="inset" component="li" />
+      </List>
    );
-  };
+  }, [data, error, loadData, LL, theme]);

-  return <SectionContent>{content()}</SectionContent>;
+  return <SectionContent>{content}</SectionContent>;
 };

 export default NTPStatus;
--- a/interface/src/app/status/NetworkStatus.tsx
+++ b/interface/src/app/status/NetworkStatus.tsx
@@ -1,3 +1,5 @@
+import { useMemo } from 'react';
+
 import DeviceHubIcon from '@mui/icons-material/DeviceHub';
 import DnsIcon from '@mui/icons-material/Dns';
 import GiteIcon from '@mui/icons-material/Gite';
@@ -25,10 +27,17 @@ import type { NetworkStatusType } from 'types';
 import { NetworkConnectionStatus } from 'types';
 import { useInterval } from 'utils';

+// Utility functions
 const isConnected = ({ status }: NetworkStatusType) =>
  status === NetworkConnectionStatus.WIFI_STATUS_CONNECTED ||
  status === NetworkConnectionStatus.ETHERNET_STATUS_CONNECTED;

+export const isWiFi = ({ status }: NetworkStatusType) =>
+  status === NetworkConnectionStatus.WIFI_STATUS_CONNECTED;
+
+export const isEthernet = ({ status }: NetworkStatusType) =>
+  status === NetworkConnectionStatus.ETHERNET_STATUS_CONNECTED;
+
 const networkStatusHighlight = ({ status }: NetworkStatusType, theme: Theme) => {
  switch (status) {
    case NetworkConnectionStatus.WIFI_STATUS_IDLE:
@@ -55,11 +64,6 @@ const networkQualityHighlight = ({ rssi }: NetworkStatusType, theme: Theme) => {
  return theme.palette.success.main;
 };

-export const isWiFi = ({ status }: NetworkStatusType) =>
-  status === NetworkConnectionStatus.WIFI_STATUS_CONNECTED;
-export const isEthernet = ({ status }: NetworkStatusType) =>
-  status === NetworkConnectionStatus.ETHERNET_STATUS_CONNECTED;
-
 const dnsServers = ({ dns_ip_1, dns_ip_2 }: NetworkStatusType) => {
  if (!dns_ip_1) {
    return 'none';
@@ -81,6 +85,33 @@ const IPs = (status: NetworkStatusType) => {
  return status.local_ip + ', ' + status.local_ipv6;
 };

+const getNetworkStatusText = (
+  status: NetworkConnectionStatus,
+  reconnectCount: number,
+  LL: ReturnType<typeof useI18nContext>['LL']
+) => {
+  switch (status) {
+    case NetworkConnectionStatus.ETHERNET_STATUS_CONNECTED:
+      return LL.CONNECTED(0) + ' (Ethernet)';
+    case NetworkConnectionStatus.WIFI_STATUS_NO_SHIELD:
+      return LL.INACTIVE(1);
+    case NetworkConnectionStatus.WIFI_STATUS_IDLE:
+      return LL.IDLE();
+    case NetworkConnectionStatus.WIFI_STATUS_NO_SSID_AVAIL:
+      return 'No SSID Available';
+    case NetworkConnectionStatus.WIFI_STATUS_CONNECTED:
+      return LL.CONNECTED(0) + ' (WiFi) (' + reconnectCount + ')';
+    case NetworkConnectionStatus.WIFI_STATUS_CONNECT_FAILED:
+      return LL.CONNECTED(1) + ' ' + LL.FAILED(0) + ' (' + reconnectCount + ')';
+    case NetworkConnectionStatus.WIFI_STATUS_CONNECTION_LOST:
+      return LL.CONNECTED(1) + ' ' + LL.LOST() + ' (' + reconnectCount + ')';
+    case NetworkConnectionStatus.WIFI_STATUS_DISCONNECTED:
+      return LL.DISCONNECTED();
+    default:
+      return LL.UNKNOWN();
+  }
+};
+
 const NetworkStatus = () => {
  const { data, send: loadData, error } = useRequest(NetworkApi.readNetworkStatus);

@@ -93,51 +124,30 @@ const NetworkStatus = () => {

  const theme = useTheme();

-  const networkStatus = ({ status }: NetworkStatusType) => {
-    switch (status) {
-      case NetworkConnectionStatus.ETHERNET_STATUS_CONNECTED:
-        return LL.CONNECTED(0) + ' (Ethernet)';
-      case NetworkConnectionStatus.WIFI_STATUS_NO_SHIELD:
-        return LL.INACTIVE(1);
-      case NetworkConnectionStatus.WIFI_STATUS_IDLE:
-        return LL.IDLE();
-      case NetworkConnectionStatus.WIFI_STATUS_NO_SSID_AVAIL:
-        return 'No SSID Available';
-      case NetworkConnectionStatus.WIFI_STATUS_CONNECTED:
-        return LL.CONNECTED(0) + ' (WiFi) (' + data.reconnect_count + ')';
-      case NetworkConnectionStatus.WIFI_STATUS_CONNECT_FAILED:
-        return (
-          LL.CONNECTED(1) + ' ' + LL.FAILED(0) + ' (' + data.reconnect_count + ')'
-        );
-      case NetworkConnectionStatus.WIFI_STATUS_CONNECTION_LOST:
-        return LL.CONNECTED(1) + ' ' + LL.LOST() + ' (' + data.reconnect_count + ')';
-      case NetworkConnectionStatus.WIFI_STATUS_DISCONNECTED:
-        return LL.DISCONNECTED();
-      default:
-        return LL.UNKNOWN();
-    }
-  };
-
-  const content = () => {
+  const content = useMemo(() => {
    if (!data) {
      return <FormLoader onRetry={loadData} errorMessage={error?.message || ''} />;
    }

+    const statusText = getNetworkStatusText(data.status, data.reconnect_count, LL);
+    const statusColor = networkStatusHighlight(data, theme);
+    const qualityColor = networkQualityHighlight(data, theme);
+
    return (
      <List>
        <ListItem>
          <ListItemAvatar>
-            <Avatar sx={{ bgcolor: networkStatusHighlight(data, theme) }}>
+            <Avatar sx={{ bgcolor: statusColor }}>
              {isWiFi(data) && <WifiIcon />}
              {isEthernet(data) && <RouterIcon />}
            </Avatar>
          </ListItemAvatar>
-          <ListItemText primary="Status" secondary={networkStatus(data)} />
+          <ListItemText primary="Status" secondary={statusText} />
        </ListItem>
        <Divider variant="inset" component="li" />
        <ListItem>
          <ListItemAvatar>
-            <Avatar sx={{ bgcolor: networkStatusHighlight(data, theme) }}>
+            <Avatar sx={{ bgcolor: statusColor }}>
              <GiteIcon />
            </Avatar>
          </ListItemAvatar>
@@ -148,13 +158,13 @@ const NetworkStatus = () => {
          <>
            <ListItem>
              <ListItemAvatar>
-                <Avatar sx={{ bgcolor: networkQualityHighlight(data, theme) }}>
+                <Avatar sx={{ bgcolor: qualityColor }}>
                  <SettingsInputAntennaIcon />
                </Avatar>
              </ListItemAvatar>
              <ListItemText
                primary="SSID (RSSI)"
-                secondary={data.ssid + ' (' + data.rssi + ' dBm)'}
+                secondary={`${data.ssid} (${data.rssi} dBm)`}
              />
            </ListItem>
            <Divider variant="inset" component="li" />
@@ -218,9 +228,9 @@ const NetworkStatus = () => {
        )}
      </List>
    );
-  };
+  }, [data, error, loadData, LL, theme]);

-  return <SectionContent>{content()}</SectionContent>;
+  return <SectionContent>{content}</SectionContent>;
 };

 export default NetworkStatus;
--- a/interface/src/app/status/Status.tsx
+++ b/interface/src/app/status/Status.tsx
@@ -1,4 +1,4 @@
-import { useContext, useState } from 'react';
+import { useCallback, useContext, useMemo, useState } from 'react';
 import { toast } from 'react-toastify';

 import AccessTimeIcon from '@mui/icons-material/AccessTime';
@@ -43,6 +43,28 @@ import { formatDateTime } from 'utils/time';

 import SystemMonitor from './SystemMonitor';

+// Pure functions moved outside component to avoid recreation on each render
+const formatNumber = (num: number) => new Intl.NumberFormat().format(num);
+
+const formatDurationSec = (
+  duration_sec: number,
+  LL: ReturnType<typeof useI18nContext>['LL']
+) => {
+  const ms = duration_sec * 1000;
+  const days = Math.trunc(ms / 86400000);
+  const hours = Math.trunc(ms / 3600000) % 24;
+  const minutes = Math.trunc(ms / 60000) % 60;
+  const seconds = Math.trunc(ms / 1000) % 60;
+
+  const parts: string[] = [];
+  if (days) parts.push(LL.NUM_DAYS({ num: days }));
+  if (hours) parts.push(LL.NUM_HOURS({ num: hours }));
+  if (minutes) parts.push(LL.NUM_MINUTES({ num: minutes }));
+  parts.push(LL.NUM_SECONDS({ num: seconds }));
+
+  return parts.join(' ');
+};
+
 const SystemStatus = () => {
  const { LL } = useI18nContext();

@@ -62,7 +84,6 @@ const SystemStatus = () => {
    send: loadData,
    error
  } = useRequest(readSystemStatus, {
-    initialData: [],
    async middleware(_, next) {
      if (!restarting) {
        await next();
@@ -76,51 +97,25 @@ const SystemStatus = () => {

  const theme = useTheme();

-  const formatDurationSec = (duration_sec: number) => {
-    const days = Math.trunc((duration_sec * 1000) / 86400000);
-    const hours = Math.trunc((duration_sec * 1000) / 3600000) % 24;
-    const minutes = Math.trunc((duration_sec * 1000) / 60000) % 60;
-    const seconds = Math.trunc((duration_sec * 1000) / 1000) % 60;
+  // Memoize derived status values to avoid recalculation on every render
+  const busStatus = useMemo(() => {
+    if (!data) return 'EMS state unknown';

-    let formatted = '';
-    if (days) {
-      formatted += LL.NUM_DAYS({ num: days }) + ' ';
+    switch (data.bus_status) {
+      case busConnectionStatus.BUS_STATUS_CONNECTED:
+        return `EMS ${LL.CONNECTED(0)} (${formatDurationSec(data.bus_uptime, LL)})`;
+      case busConnectionStatus.BUS_STATUS_TX_ERRORS:
+        return 'EMS ' + LL.TX_ISSUES();
+      case busConnectionStatus.BUS_STATUS_OFFLINE:
+        return 'EMS ' + LL.DISCONNECTED();
+      default:
+        return 'EMS state unknown';
    }
-    if (hours) {
-      formatted += LL.NUM_HOURS({ num: hours }) + ' ';
-    }
-    if (minutes) {
-      formatted += LL.NUM_MINUTES({ num: minutes }) + ' ';
-    }
-    formatted += LL.NUM_SECONDS({ num: seconds });
-    return formatted;
-  };
+  }, [data?.bus_status, data?.bus_uptime, LL]);

-  function formatNumber(num: number) {
-    return new Intl.NumberFormat().format(num);
-  }
+  const busStatusHighlight = useMemo(() => {
+    if (!data) return theme.palette.warning.main;

-  const busStatus = () => {
-    if (data) {
-      switch (data.bus_status) {
-        case busConnectionStatus.BUS_STATUS_CONNECTED:
-          return (
-            'EMS ' +
-            LL.CONNECTED(0) +
-            ' (' +
-            formatDurationSec(data.bus_uptime) +
-            ')'
-          );
-        case busConnectionStatus.BUS_STATUS_TX_ERRORS:
-          return 'EMS ' + LL.TX_ISSUES();
-        case busConnectionStatus.BUS_STATUS_OFFLINE:
-          return 'EMS ' + LL.DISCONNECTED();
-      }
-    }
-    return 'EMS state unknown';
-  };
-
-  const busStatusHighlight = () => {
    switch (data.bus_status) {
      case busConnectionStatus.BUS_STATUS_TX_ERRORS:
        return theme.palette.warning.main;
@@ -131,27 +126,28 @@ const SystemStatus = () => {
      default:
        return theme.palette.warning.main;
    }
-  };
+  }, [data?.bus_status, theme.palette]);
+
+  const ntpStatus = useMemo(() => {
+    if (!data) return LL.UNKNOWN();

-  const ntpStatus = () => {
    switch (data.ntp_status) {
      case NTPSyncStatus.NTP_DISABLED:
        return LL.NOT_ENABLED();
      case NTPSyncStatus.NTP_INACTIVE:
        return LL.INACTIVE(0);
      case NTPSyncStatus.NTP_ACTIVE:
-        return (
-          LL.ACTIVE() +
-          (data.ntp_time !== undefined
-            ? ' (' + formatDateTime(data.ntp_time) + ')'
-            : '')
-        );
+        return data.ntp_time
+          ? `${LL.ACTIVE()} (${formatDateTime(data.ntp_time)})`
+          : LL.ACTIVE();
      default:
        return LL.UNKNOWN();
    }
-  };
+  }, [data?.ntp_status, data?.ntp_time, LL]);
+
+  const ntpStatusHighlight = useMemo(() => {
+    if (!data) return theme.palette.error.main;

-  const ntpStatusHighlight = () => {
    switch (data.ntp_status) {
      case NTPSyncStatus.NTP_DISABLED:
        return theme.palette.info.main;
@@ -162,9 +158,11 @@ const SystemStatus = () => {
      default:
        return theme.palette.error.main;
    }
-  };
+  }, [data?.ntp_status, theme.palette]);
+
+  const networkStatusHighlight = useMemo(() => {
+    if (!data) return theme.palette.warning.main;

-  const networkStatusHighlight = () => {
    switch (data.network_status) {
      case NetworkConnectionStatus.WIFI_STATUS_IDLE:
      case NetworkConnectionStatus.WIFI_STATUS_DISCONNECTED:
@@ -179,9 +177,11 @@ const SystemStatus = () => {
      default:
        return theme.palette.warning.main;
    }
-  };
+  }, [data?.network_status, theme.palette]);
+
+  const networkStatus = useMemo(() => {
+    if (!data) return LL.UNKNOWN();

-  const networkStatus = () => {
    switch (data.network_status) {
      case NetworkConnectionStatus.WIFI_STATUS_NO_SHIELD:
        return LL.INACTIVE(1);
@@ -190,24 +190,27 @@ const SystemStatus = () => {
      case NetworkConnectionStatus.WIFI_STATUS_NO_SSID_AVAIL:
        return 'No SSID Available';
      case NetworkConnectionStatus.WIFI_STATUS_CONNECTED:
-        return LL.CONNECTED(0) + ' (WiFi, ' + data.wifi_rssi + ' dBm)';
+        return `${LL.CONNECTED(0)} (WiFi, ${data.wifi_rssi} dBm)`;
      case NetworkConnectionStatus.ETHERNET_STATUS_CONNECTED:
-        return LL.CONNECTED(0) + ' (Ethernet)';
+        return `${LL.CONNECTED(0)} (Ethernet)`;
      case NetworkConnectionStatus.WIFI_STATUS_CONNECT_FAILED:
-        return LL.CONNECTED(1) + ' ' + LL.FAILED(0);
+        return `${LL.CONNECTED(1)} ${LL.FAILED(0)}`;
      case NetworkConnectionStatus.WIFI_STATUS_CONNECTION_LOST:
-        return LL.CONNECTED(1) + ' ' + LL.LOST();
+        return `${LL.CONNECTED(1)} ${LL.LOST()}`;
      case NetworkConnectionStatus.WIFI_STATUS_DISCONNECTED:
        return LL.DISCONNECTED();
      default:
        return LL.UNKNOWN();
    }
-  };
+  }, [data?.network_status, data?.wifi_rssi, LL]);

-  const activeHighlight = (value: boolean) =>
-    value ? theme.palette.success.main : theme.palette.info.main;
+  const activeHighlight = useCallback(
+    (value: boolean) =>
+      value ? theme.palette.success.main : theme.palette.info.main,
+    [theme.palette]
+  );

-  const doRestart = async () => {
+  const doRestart = useCallback(async () => {
    setConfirmRestart(false);
    setRestarting(true);
    await sendAPI({ device: 'system', cmd: 'restart', id: 0 }).catch(
@@ -215,38 +218,83 @@ const SystemStatus = () => {
        toast.error(error.message);
      }
    );
-  };
+  }, [sendAPI]);

-  const renderRestartDialog = () => (
-    <Dialog
-      sx={dialogStyle}
-      open={confirmRestart}
-      onClose={() => setConfirmRestart(false)}
-    >
-      <DialogTitle>{LL.RESTART()}</DialogTitle>
-      <DialogContent dividers>{LL.RESTART_CONFIRM()}</DialogContent>
-      <DialogActions>
-        <Button
-          startIcon={<CancelIcon />}
-          variant="outlined"
-          onClick={() => setConfirmRestart(false)}
-          color="secondary"
-        >
-          {LL.CANCEL()}
-        </Button>
-        <Button
-          startIcon={<PowerSettingsNewIcon />}
-          variant="outlined"
-          onClick={doRestart}
-          color="error"
-        >
-          {LL.RESTART()}
-        </Button>
-      </DialogActions>
-    </Dialog>
+  const handleCloseRestartDialog = useCallback(() => {
+    setConfirmRestart(false);
+  }, []);
+
+  const renderRestartDialog = useMemo(
+    () => (
+      <Dialog
+        sx={dialogStyle}
+        open={confirmRestart}
+        onClose={handleCloseRestartDialog}
+      >
+        <DialogTitle>{LL.RESTART()}</DialogTitle>
+        <DialogContent dividers>{LL.RESTART_CONFIRM()}</DialogContent>
+        <DialogActions>
+          <Button
+            startIcon={<CancelIcon />}
+            variant="outlined"
+            onClick={handleCloseRestartDialog}
+            color="secondary"
+          >
+            {LL.CANCEL()}
+          </Button>
+          <Button
+            startIcon={<PowerSettingsNewIcon />}
+            variant="outlined"
+            onClick={doRestart}
+            color="error"
+          >
+            {LL.RESTART()}
+          </Button>
+        </DialogActions>
+      </Dialog>
+    ),
+    [confirmRestart, handleCloseRestartDialog, doRestart, LL]
  );

-  const content = () => {
+  // Memoize formatted values
+  const firmwareVersion = useMemo(
+    () => `v${data?.emsesp_version || ''}`,
+    [data?.emsesp_version]
+  );
+
+  const uptimeText = useMemo(
+    () => (data ? formatDurationSec(data.uptime, LL) : ''),
+    [data?.uptime, LL]
+  );
+
+  const freeMemoryText = useMemo(
+    () => (data ? `${formatNumber(data.free_heap)} KB ${LL.FREE_MEMORY()}` : ''),
+    [data?.free_heap, LL]
+  );
+
+  const networkIcon = useMemo(
+    () =>
+      data?.network_status === NetworkConnectionStatus.WIFI_STATUS_CONNECTED
+        ? WifiIcon
+        : RouterIcon,
+    [data?.network_status]
+  );
+
+  const mqttStatusText = useMemo(
+    () => (data?.mqtt_status ? LL.CONNECTED(0) : LL.INACTIVE(0)),
+    [data?.mqtt_status, LL]
+  );
+
+  const apStatusText = useMemo(
+    () => (data?.ap_status ? LL.ACTIVE() : LL.INACTIVE(0)),
+    [data?.ap_status, LL]
+  );
+
+  const handleRestartClick = useCallback(() => {
+    setConfirmRestart(true);
+  }, []);
+
+  const content = useMemo(() => {
    if (!data || !LL) {
      return <FormLoader onRetry={loadData} errorMessage={error?.message || ''} />;
    }
@@ -258,7 +306,7 @@ const SystemStatus = () => {
            icon={BuildIcon}
            bgcolor="#72caf9"
            label="EMS-ESP Firmware"
-            text={'v' + data.emsesp_version}
+            text={firmwareVersion}
            to="version"
          />

@@ -268,16 +316,13 @@ const SystemStatus = () => {
                <TimerIcon />
              </Avatar>
            </ListItemAvatar>
-            <ListItemText
-              primary={LL.UPTIME()}
-              secondary={formatDurationSec(data.uptime)}
-            />
+            <ListItemText primary={LL.UPTIME()} secondary={uptimeText} />
            {me.admin && (
              <Button
                startIcon={<PowerSettingsNewIcon />}
                variant="outlined"
                color="error"
-                onClick={() => setConfirmRestart(true)}
+                onClick={handleRestartClick}
              >
                {LL.RESTART()}
              </Button>
@@ -289,29 +334,25 @@ const SystemStatus = () => {
            icon={MemoryIcon}
            bgcolor="#68374d"
            label={LL.HARDWARE()}
-            text={formatNumber(data.free_heap) + ' KB' + ' ' + LL.FREE_MEMORY()}
+            text={freeMemoryText}
            to="/status/hardwarestatus"
          />

          <ListMenuItem
            disabled={!me.admin}
            icon={DirectionsBusIcon}
-            bgcolor={busStatusHighlight()}
+            bgcolor={busStatusHighlight}
            label={LL.DATA_TRAFFIC()}
-            text={busStatus()}
+            text={busStatus}
            to="/status/activity"
          />

          <ListMenuItem
            disabled={!me.admin}
-            icon={
-              data.network_status === NetworkConnectionStatus.WIFI_STATUS_CONNECTED
-                ? WifiIcon
-                : RouterIcon
-            }
-            bgcolor={networkStatusHighlight()}
+            icon={networkIcon}
+            bgcolor={networkStatusHighlight}
            label={LL.NETWORK(1)}
-            text={networkStatus()}
+            text={networkStatus}
            to="/status/network"
          />

@@ -320,16 +361,16 @@ const SystemStatus = () => {
            icon={DeviceHubIcon}
            bgcolor={activeHighlight(data.mqtt_status)}
            label="MQTT"
-            text={data.mqtt_status ? LL.CONNECTED(0) : LL.INACTIVE(0)}
+            text={mqttStatusText}
            to="/status/mqtt"
          />

          <ListMenuItem
            disabled={!me.admin}
            icon={AccessTimeIcon}
-            bgcolor={ntpStatusHighlight()}
+            bgcolor={ntpStatusHighlight}
            label="NTP"
-            text={ntpStatus()}
+            text={ntpStatus}
            to="/status/ntp"
          />

@@ -338,7 +379,7 @@ const SystemStatus = () => {
            icon={SettingsInputAntennaIcon}
            bgcolor={activeHighlight(data.ap_status)}
            label={LL.ACCESS_POINT(0)}
-            text={data.ap_status ? LL.ACTIVE() : LL.INACTIVE(0)}
+            text={apStatusText}
            to="/status/ap"
          />

@@ -352,14 +393,33 @@ const SystemStatus = () => {
          />
        </List>

-        {renderRestartDialog()}
+        {renderRestartDialog}
      </>
    );
-  };
+  }, [
+    data,
+    LL,
+    firmwareVersion,
+    uptimeText,
+    freeMemoryText,
+    networkIcon,
+    mqttStatusText,
+    apStatusText,
+    busStatus,
+    busStatusHighlight,
+    networkStatusHighlight,
+    networkStatus,
+    ntpStatusHighlight,
+    ntpStatus,
+    activeHighlight,
+    me.admin,
+    handleRestartClick,
+    error,
+    loadData,
+    renderRestartDialog
+  ]);

-  return (
-    <SectionContent>{restarting ? <SystemMonitor /> : content()}</SectionContent>
-  );
+  return <SectionContent>{restarting ? <SystemMonitor /> : content}</SectionContent>;
 };

 export default SystemStatus;
--- a/interface/src/app/status/SystemLog.tsx
+++ b/interface/src/app/status/SystemLog.tsx
@@ -1,4 +1,11 @@
-import { useEffect, useRef, useState } from 'react';
+import {
+  memo,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState
+} from 'react';
 import { toast } from 'react-toastify';

 import DownloadIcon from '@mui/icons-material/GetApp';
@@ -31,6 +38,8 @@ import type { LogEntry, LogSettings } from 'types';
 import { LogLevel } from 'types';
 import { updateValueDirty, useRest } from 'utils';

+const MAX_LOG_ENTRIES = 1000; // Limit log entries to prevent memory issues
+
 const TextColors: Record<LogLevel, string> = {
  [LogLevel.ERROR]: '#ff0000', // red
  [LogLevel.WARNING]: '#ff0000', // red
@@ -47,11 +56,6 @@ const LogEntryLine = styled('span')(
  })
 );

-const topOffset = () =>
-  document.getElementById('log-window')?.getBoundingClientRect().bottom || 0;
-const leftOffset = () =>
-  document.getElementById('log-window')?.getBoundingClientRect().left || 0;
-
 const levelLabel = (level: LogLevel) => {
  switch (level) {
    case LogLevel.ERROR:
@@ -71,6 +75,39 @@ const levelLabel = (level: LogLevel) => {
  }
 };

+const paddedLevelLabel = (level: LogLevel, compact: boolean) => {
+  const label = levelLabel(level);
+  return compact ? ' ' + label[0] : label.padStart(8, '\xa0');
+};
+
+const paddedNameLabel = (name: string, compact: boolean) => {
+  const label = '[' + name + ']';
+  return compact ? label : label.padEnd(12, '\xa0');
+};
+
+const paddedIDLabel = (id: number, compact: boolean) => {
+  const label = id + ':';
+  return compact ? label : label.padEnd(7, '\xa0');
+};
+
+// Memoized log entry component to prevent unnecessary re-renders
+const LogEntryItem = memo(
+  ({ entry, compact }: { entry: LogEntry; compact: boolean }) => {
+    return (
+      <div style={{ font: '13px monospace', whiteSpace: 'nowrap' }}>
+        <span>{entry.t}</span>
+        <span>{paddedLevelLabel(entry.l, compact)}&nbsp;</span>
+        <span>{paddedIDLabel(entry.i, compact)} </span>
+        <span>{paddedNameLabel(entry.n, compact)} </span>
+        <LogEntryLine details={{ level: entry.l }}>{entry.m}</LogEntryLine>
+      </div>
+    );
+  },
+  (prevProps, nextProps) =>
+    prevProps.entry.i === nextProps.entry.i &&
+    prevProps.compact === nextProps.compact
+);
+
 const SystemLog = () => {
  const { LL } = useI18nContext();

@@ -102,54 +139,89 @@ const SystemLog = () => {
  const [readOpen, setReadOpen] = useState(false);
  const [logEntries, setLogEntries] = useState<LogEntry[]>([]);
  const [autoscroll, setAutoscroll] = useState(true);
-  const [lastId, setLastId] = useState<number>(-1);
+  const [boxPosition, setBoxPosition] = useState({ top: 0, left: 0 });

  const ALPHA_NUMERIC_DASH_REGEX = /^[a-fA-F0-9 ]+$/;

  const updateFormValue = updateValueDirty(
-    origData,
+    origData as unknown as Record<string, unknown>,
    dirtyFlags,
    setDirtyFlags,
    updateDataValue as (value: unknown) => void
  );

+  // Calculate box position after layout
+  useLayoutEffect(() => {
+    const logWindow = document.getElementById('log-window');
+    if (!logWindow) {
+      return;
+    }
+
+    const updatePosition = () => {
+      const windowElement = document.getElementById('log-window');
+      if (!windowElement) {
+        return;
+      }
+      const rect = windowElement.getBoundingClientRect();
+      setBoxPosition({ top: rect.bottom, left: rect.left });
+    };
+
+    updatePosition();
+
+    // Debounce resize events with requestAnimationFrame
+    let rafId: number;
+    const handleResize = () => {
+      cancelAnimationFrame(rafId);
+      rafId = requestAnimationFrame(updatePosition);
+    };
+
+    // Update position on window resize
+    window.addEventListener('resize', handleResize);
+    const resizeObserver = new ResizeObserver(handleResize);
+    resizeObserver.observe(logWindow);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+      resizeObserver.disconnect();
+      cancelAnimationFrame(rafId);
+    };
+  }, [data]); // Recalculate when data changes (in case layout shifts)
+
+  // Memoize message handler to avoid recreating on every render
+  const handleLogMessage = useCallback((message: { data: string }) => {
+    const rawData = message.data;
+    const logentry = JSON.parse(rawData) as LogEntry;
+    setLogEntries((log) => {
+      // Skip if this is a duplicate entry (check last entry id)
+      if (log.length > 0) {
+        const lastEntry = log[log.length - 1];
+        if (lastEntry && logentry.i <= lastEntry.i) {
+          return log;
+        }
+      }
+      const newLog = [...log, logentry];
+      // Limit log entries to prevent memory issues - only slice when necessary
+      if (newLog.length > MAX_LOG_ENTRIES) {
+        return newLog.slice(-MAX_LOG_ENTRIES);
+      }
+      return newLog;
+    });
+  }, []);
+
  useSSE(fetchLogES, {
    immediate: true,
    interceptByGlobalResponded: false
  })
-    .onMessage((message: { data: string }) => {
-      const rawData = message.data;
-      const logentry = JSON.parse(rawData) as LogEntry;
-      if (lastId < logentry.i) {
-        setLogEntries((log) => [...log, logentry]);
-        setLastId(logentry.i);
-      }
-    })
+    .onMessage(handleLogMessage)
    .onError(() => {
      toast.error('No connection to Log service');
    });

-  const paddedLevelLabel = (level: LogLevel) => {
-    const label = levelLabel(level);
-    return data?.compact ? ' ' + label[0] : label.padStart(8, '\xa0');
-  };
+  const onDownload = useCallback(() => {
+    const result = logEntries
+      .map((i) => `${i.t} ${levelLabel(i.l)} ${i.i}: [${i.n}] ${i.m}`)
+      .join('\n');

-  const paddedNameLabel = (name: string) => {
-    const label = '[' + name + ']';
-    return data?.compact ? label : label.padEnd(12, '\xa0');
-  };
-
-  const paddedIDLabel = (id: number) => {
-    const label = id + ':';
-    return data?.compact ? label : label.padEnd(7, '\xa0');
-  };
-
-  const onDownload = () => {
-    let result = '';
-    for (const i of logEntries) {
-      result +=
-        i.t + ' ' + levelLabel(i.l) + ' ' + i.i + ': [' + i.n + '] ' + i.m + '\n';
-    }
    const a = document.createElement('a');
    a.setAttribute(
      'href',
@@ -159,24 +231,28 @@ const SystemLog = () => {
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
-  };
+  }, [logEntries]);

-  const saveSettings = async () => {
+  const saveSettings = useCallback(async () => {
    await saveData();
-  };
+  }, [saveData]);

-  // handle scrolling
+  // handle scrolling - optimized to only scroll when needed
  const ref = useRef<HTMLDivElement>(null);
+  const logWindowRef = useRef<HTMLDivElement>(null);
+
  useEffect(() => {
    if (logEntries.length && autoscroll) {
-      ref.current?.scrollIntoView({
-        behavior: 'smooth',
-        block: 'end'
-      });
+      const container = logWindowRef.current;
+      if (container) {
+        requestAnimationFrame(() => {
+          container.scrollTop = container.scrollHeight;
+        });
+      }
    }
-  }, [logEntries.length]);
+  }, [logEntries.length, autoscroll]);

-  const sendReadCommand = () => {
+  const sendReadCommand = useCallback(() => {
    if (readValue === '') {
      setReadOpen(!readOpen);
      return;
@@ -187,7 +263,7 @@ const SystemLog = () => {
      setReadOpen(false);
      setReadValue('');
    }
-  };
+  }, [readValue, readOpen, send]);

  const content = () => {
    if (!data) {
@@ -279,6 +355,7 @@ const SystemLog = () => {
            >
              <IconButton
                disableRipple
+                aria-label={LL.CANCEL()}
                onClick={() => {
                  setReadOpen(false);
                  setReadValue('');
@@ -304,7 +381,7 @@ const SystemLog = () => {
          ) : (
            <>
              {data.developer_mode && (
-                <IconButton onClick={sendReadCommand}>
+                <IconButton onClick={sendReadCommand} aria-label={LL.EXECUTE()}>
                  <PlayArrowIcon color="primary" />
                </IconButton>
              )}
@@ -326,27 +403,20 @@ const SystemLog = () => {
        </Grid>

        <Box
+          ref={logWindowRef}
          sx={{
            backgroundColor: 'black',
            overflowY: 'scroll',
            position: 'absolute',
            right: 18,
            bottom: 18,
-            left: () => leftOffset(),
-            top: () => topOffset(),
+            left: boxPosition.left,
+            top: boxPosition.top,
            p: 1
          }}
        >
          {logEntries.map((e) => (
-            <div key={e.i} style={{ font: '14px monospace', whiteSpace: 'nowrap' }}>
-              <span>{e.t}</span>
-              <span>{paddedLevelLabel(e.l)}&nbsp;</span>
-              <span>{paddedIDLabel(e.i)} </span>
-              <span>{paddedNameLabel(e.n)} </span>
-              <LogEntryLine details={{ level: e.l }} key={e.i}>
-                {e.m}
-              </LogEntryLine>
-            </div>
+            <LogEntryItem key={e.i} entry={e} compact={data.compact} />
          ))}

          <div ref={ref} />
--- a/interface/src/app/status/SystemMonitor.tsx
+++ b/interface/src/app/status/SystemMonitor.tsx
@@ -1,12 +1,11 @@
-import { useState } from 'react';
+import { useCallback, useMemo, useRef, useState } from 'react';

 import CancelIcon from '@mui/icons-material/Cancel';
-import { Box, Button, Dialog, DialogContent, Typography } from '@mui/material';
+import { Box, Button, Typography } from '@mui/material';

 import { callAction } from 'api/app';
 import { readSystemStatus } from 'api/system';

-import { dialogStyle } from 'CustomTheme';
 import { useRequest } from 'alova/client';
 import MessageBox from 'components/MessageBox';
 import { useI18nContext } from 'i18n/i18n-react';
@@ -17,11 +16,9 @@ import { LinearProgressWithLabel } from '../../components/upload/LinearProgressW

 const SystemMonitor = () => {
  const [errorMessage, setErrorMessage] = useState<string>();
-
+  const hasInitialized = useRef(false);
  const { LL } = useI18nContext();

-  let count = 0;
-
  const { send: setSystemStatus } = useRequest(
    (status: string) => callAction({ action: 'systemStatus', param: status }),
    {
@@ -32,10 +29,12 @@ const SystemMonitor = () => {
  const { data, send } = useRequest(readSystemStatus, {
    force: true,
    async middleware(_, next) {
-      if (count++ >= 1) {
-        // skip first request (1 second) to allow AsyncWS to send its response
-        await next();
+      // Skip first request to allow AsyncWS to send its response
+      if (!hasInitialized.current) {
+        hasInitialized.current = true;
+        return; // Don't await next() on first call
      }
+      await next();
    }
  })
    .onSuccess((event) => {
@@ -58,33 +57,82 @@ const SystemMonitor = () => {
    void send();
  }, 1000); // check every 1 second

-  const onCancel = async () => {
+  const { statusMessage, isUploading, progressValue } = useMemo(() => {
+    const status = data?.status;
+
+    let message = '';
+    if (status && status >= SystemStatusCodes.SYSTEM_STATUS_UPLOADING) {
+      message = LL.WAIT_FIRMWARE();
+    } else if (status === SystemStatusCodes.SYSTEM_STATUS_PENDING_RESTART) {
+      message = LL.APPLICATION_RESTARTING();
+    } else if (status === SystemStatusCodes.SYSTEM_STATUS_NORMAL) {
+      message = LL.RESTARTING_PRE();
+    } else if (status === SystemStatusCodes.SYSTEM_STATUS_ERROR_UPLOAD) {
+      message = 'Upload Failed';
+    } else {
+      message = LL.RESTARTING_POST();
+    }
+
+    const uploading =
+      status !== undefined && status >= SystemStatusCodes.SYSTEM_STATUS_UPLOADING;
+    const progress =
+      uploading && status
+        ? Math.round(status - SystemStatusCodes.SYSTEM_STATUS_UPLOADING)
+        : 0;
+
+    return {
+      statusMessage: message,
+      isUploading: uploading,
+      progressValue: progress
+    };
+  }, [data?.status, LL]);
+
+  const onCancel = useCallback(async () => {
    setErrorMessage(undefined);
-    await setSystemStatus(
-      SystemStatusCodes.SYSTEM_STATUS_NORMAL as unknown as string
-    );
+    await setSystemStatus(String(SystemStatusCodes.SYSTEM_STATUS_NORMAL));
    document.location.href = '/';
-  };
+  }, [setSystemStatus]);

  return (
-    <Dialog fullWidth={true} sx={dialogStyle} open={true}>
-      <DialogContent dividers>
-        <Box m={0} py={0} display="flex" alignItems="center" flexDirection="column">
+    <Box
+      sx={{
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        width: '100vw',
+        height: '100vh',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        backdropFilter: 'blur(8px)'
+      }}
+    >
+      <Box
+        sx={{
+          width: '30%',
+          minWidth: '300px',
+          maxWidth: '500px',
+          backgroundColor: '#393939',
+          border: 3,
+          borderColor: '#565656',
+          borderRadius: '8px',
+          boxShadow: '0 8px 32px rgba(0, 0, 0, 0.3)',
+          p: 3
+        }}
+      >
+        <Box display="flex" alignItems="center" flexDirection="column">
+          <img
+            src="/app/icon.png"
+            alt="EMS-ESP"
+            style={{ width: '40px', height: '40px', marginBottom: '16px' }}
+          />
          <Typography
            color="secondary"
            variant="h6"
            fontWeight={400}
            textAlign="center"
          >
-            {data?.status >= SystemStatusCodes.SYSTEM_STATUS_UPLOADING
-              ? LL.WAIT_FIRMWARE()
-              : data?.status === SystemStatusCodes.SYSTEM_STATUS_PENDING_RESTART
-                ? LL.APPLICATION_RESTARTING()
-                : data?.status === SystemStatusCodes.SYSTEM_STATUS_NORMAL
-                  ? LL.RESTARTING_PRE()
-                  : data?.status === SystemStatusCodes.SYSTEM_STATUS_ERROR_UPLOAD
-                    ? 'Upload Failed'
-                    : LL.RESTARTING_POST()}
+            {statusMessage}
          </Typography>

          {errorMessage ? (
@@ -105,20 +153,16 @@ const SystemMonitor = () => {
              <Typography mt={2} variant="h6" fontWeight={400} textAlign="center">
                {LL.PLEASE_WAIT()}&hellip;
              </Typography>
-              {data && data.status >= SystemStatusCodes.SYSTEM_STATUS_UPLOADING && (
+              {isUploading && (
                <Box width="100%" pl={2} pr={2} py={2}>
-                  <LinearProgressWithLabel
-                    value={Math.round(
-                      data?.status - SystemStatusCodes.SYSTEM_STATUS_UPLOADING
-                    )}
-                  />
+                  <LinearProgressWithLabel value={progressValue} />
                </Box>
              )}
            </>
          )}
        </Box>
-      </DialogContent>
-    </Dialog>
+      </Box>
+    </Box>
  );
 };

--- a/interface/src/app/status/Version.tsx
+++ b/interface/src/app/status/Version.tsx
@@ -567,7 +567,10 @@ const Version = () => {
                <Grid size={{ xs: 8, md: 10 }}>
                  <Typography>
                    {latestVersion?.name}
-                    <IconButton onClick={() => setShowVersionInfo(1)}>
+                    <IconButton
+                      onClick={() => setShowVersionInfo(1)}
+                      aria-label={LL.FIRMWARE_VERSION_INFO()}
+                    >
                      <InfoOutlinedIcon color="primary" sx={{ fontSize: 18 }} />
                    </IconButton>
                    {showButtons(false)}
@@ -580,7 +583,10 @@ const Version = () => {
                <Grid size={{ xs: 8, md: 10 }}>
                  <Typography>
                    {latestDevVersion?.name}
-                    <IconButton onClick={() => setShowVersionInfo(2)}>
+                    <IconButton
+                      onClick={() => setShowVersionInfo(2)}
+                      aria-label={LL.FIRMWARE_VERSION_INFO()}
+                    >
                      <InfoOutlinedIcon color="primary" sx={{ fontSize: 18 }} />
                    </IconButton>
                    {showButtons(true)}
--- a/interface/src/components/ButtonRow.tsx
+++ b/interface/src/components/ButtonRow.tsx
@@ -19,6 +19,4 @@ const ButtonRow = memo<BoxProps>(({ children, ...rest }) => (
  </Box>
 ));

-ButtonRow.displayName = 'ButtonRow';
-
 export default ButtonRow;
--- a/interface/src/components/MessageBox.tsx
+++ b/interface/src/components/MessageBox.tsx
@@ -1,11 +1,11 @@
-import type { FC } from 'react';
+import { type FC, memo, useMemo } from 'react';

 import CheckCircleOutlineOutlinedIcon from '@mui/icons-material/CheckCircleOutlineOutlined';
 import ErrorIcon from '@mui/icons-material/Error';
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
 import ReportProblemOutlinedIcon from '@mui/icons-material/ReportProblemOutlined';
 import { Box, Typography, useTheme } from '@mui/material';
-import type { BoxProps, SvgIconProps, Theme } from '@mui/material';
+import type { BoxProps, SvgIconProps } from '@mui/material';

 type MessageBoxLevel = 'warning' | 'success' | 'info' | 'error';

@@ -14,22 +14,18 @@ export interface MessageBoxProps extends BoxProps {
  message?: string;
 }

-const LEVEL_ICONS: {
-  [type in MessageBoxLevel]: React.ComponentType<SvgIconProps>;
-} = {
+const LEVEL_ICONS: Record<MessageBoxLevel, React.ComponentType<SvgIconProps>> = {
  success: CheckCircleOutlineOutlinedIcon,
  info: InfoOutlinedIcon,
  warning: ReportProblemOutlinedIcon,
  error: ErrorIcon
 };

-const LEVEL_BACKGROUNDS: {
-  [type in MessageBoxLevel]: (theme: Theme) => string;
-} = {
-  success: (theme: Theme) => theme.palette.success.dark,
-  info: (theme: Theme) => theme.palette.info.main,
-  warning: (theme: Theme) => theme.palette.warning.dark,
-  error: (theme: Theme) => theme.palette.error.dark
+const LEVEL_PALETTE_PATHS: Record<MessageBoxLevel, string> = {
+  success: 'success.dark',
+  info: 'info.main',
+  warning: 'warning.dark',
+  error: 'error.dark'
 };

 const MessageBox: FC<MessageBoxProps> = ({
@@ -40,25 +36,38 @@ const MessageBox: FC<MessageBoxProps> = ({
  ...rest
 }) => {
  const theme = useTheme();
-  const Icon = LEVEL_ICONS[level];
-  const backgroundColor = LEVEL_BACKGROUNDS[level](theme);
-  const color = 'white';
+
+  const { Icon, backgroundColor } = useMemo(() => {
+    const Icon = LEVEL_ICONS[level];
+    const palettePath = LEVEL_PALETTE_PATHS[level];
+    const [key, shade] = palettePath.split('.') as [
+      keyof typeof theme.palette,
+      string
+    ];
+    const paletteKey = theme.palette[key] as unknown as Record<string, string>;
+    const backgroundColor = paletteKey[shade];
+
+    return { Icon, backgroundColor };
+  }, [level, theme]);
+
  return (
    <Box
      p={2}
      display="flex"
      alignItems="center"
      borderRadius={1}
-      sx={{ backgroundColor, color, ...sx }}
+      sx={{ backgroundColor, color: 'white', ...sx }}
      {...rest}
    >
      <Icon />
-      <Typography sx={{ ml: 2 }} variant="body1">
-        {message ?? ''}
-      </Typography>
-      {children}
+      {(message || children) && (
+        <Typography sx={{ ml: 2 }} variant="body1">
+          {message}
+          {children}
+        </Typography>
+      )}
    </Box>
  );
 };

-export default MessageBox;
+export default memo(MessageBox);
--- a/interface/src/components/SectionContent.tsx
+++ b/interface/src/components/SectionContent.tsx
@@ -1,6 +1,8 @@
+import { memo } from 'react';
 import type { FC } from 'react';

 import { Paper } from '@mui/material';
+import type { SxProps, Theme } from '@mui/material/styles';

 import type { RequiredChildrenProps } from 'utils';

@@ -8,16 +10,19 @@ interface SectionContentProps extends RequiredChildrenProps {
  id?: string;
 }

-const SectionContent: FC<SectionContentProps> = (props) => {
-  const { children, id } = props;
-  return (
-    <Paper
-      id={id}
-      sx={{ p: 1.5, m: 1.5, borderRadius: 3, border: '1px solid rgb(65, 65, 65)' }}
-    >
-      {children}
-    </Paper>
-  );
+// Extract styles to avoid recreation on every render
+const paperStyles: SxProps<Theme> = {
+  p: 1.5,
+  m: 1.5,
+  borderRadius: 3,
+  border: '1px solid rgb(65, 65, 65)'
 };

-export default SectionContent;
+const SectionContent: FC<SectionContentProps> = ({ children, id }) => (
+  <Paper id={id} sx={paperStyles}>
+    {children}
+  </Paper>
+);
+
+// Memoize to prevent unnecessary re-renders
+export default memo(SectionContent);
--- a/interface/src/components/inputs/BlockFormControlLabel.tsx
+++ b/interface/src/components/inputs/BlockFormControlLabel.tsx
@@ -1,3 +1,4 @@
+import { memo } from 'react';
 import type { FC } from 'react';

 import { FormControlLabel } from '@mui/material';
@@ -9,4 +10,4 @@ const BlockFormControlLabel: FC<FormControlLabelProps> = (props) => (
  </div>
 );

-export default BlockFormControlLabel;
+export default memo(BlockFormControlLabel);
--- a/interface/src/components/inputs/LanguageSelector.tsx
+++ b/interface/src/components/inputs/LanguageSelector.tsx
@@ -1,4 +1,6 @@
-import { type ChangeEventHandler, useContext } from 'react';
+import { memo, useCallback, useContext, useMemo } from 'react';
+import type { ChangeEventHandler } from 'react';
+import type { CSSProperties } from 'react';

 import { MenuItem, TextField } from '@mui/material';

@@ -17,73 +19,68 @@ import { I18nContext } from 'i18n/i18n-react';
 import type { Locales } from 'i18n/i18n-types';
 import { loadLocaleAsync } from 'i18n/i18n-util.async';

-const LanguageSelector = () => {
-  const { setLocale, locale } = useContext(I18nContext);
+// Extract style to constant to prevent recreation
+const flagStyle: CSSProperties = { width: 16, verticalAlign: 'middle' };

-  const onLocaleSelected: ChangeEventHandler<HTMLInputElement> = async ({
-    target
-  }) => {
-    const loc = target.value as Locales;
-    localStorage.setItem('lang', loc);
-    await loadLocaleAsync(loc);
-    setLocale(loc);
-  };
+// Define language options outside component to prevent recreation
+interface LanguageOption {
+  key: Locales;
+  flag: string;
+  label: string;
+}
+
+const LANGUAGE_OPTIONS: LanguageOption[] = [
+  { key: 'cz', flag: CZflag, label: 'CZ' },
+  { key: 'de', flag: DEflag, label: 'DE' },
+  { key: 'en', flag: GBflag, label: 'EN' },
+  { key: 'fr', flag: FRflag, label: 'FR' },
+  { key: 'it', flag: ITflag, label: 'IT' },
+  { key: 'nl', flag: NLflag, label: 'NL' },
+  { key: 'no', flag: NOflag, label: 'NO' },
+  { key: 'pl', flag: PLflag, label: 'PL' },
+  { key: 'sk', flag: SKflag, label: 'SK' },
+  { key: 'sv', flag: SVflag, label: 'SV' },
+  { key: 'tr', flag: TRflag, label: 'TR' }
+];
+
+const LanguageSelector = () => {
+  const { setLocale, locale, LL } = useContext(I18nContext);
+
+  const onLocaleSelected: ChangeEventHandler<HTMLInputElement> = useCallback(
+    async ({ target }) => {
+      const loc = target.value as Locales;
+      localStorage.setItem('lang', loc);
+      await loadLocaleAsync(loc);
+      setLocale(loc);
+    },
+    [setLocale]
+  );
+
+  // Memoize menu items to prevent recreation on every render
+  const menuItems = useMemo(
+    () =>
+      LANGUAGE_OPTIONS.map(({ key, flag, label }) => (
+        <MenuItem key={key} value={key}>
+          <img src={flag} style={flagStyle} alt={label} />
+          &nbsp;{label}
+        </MenuItem>
+      )),
+    []
+  );

  return (
    <TextField
      name="locale"
      variant="outlined"
+      aria-label={LL.LANGUAGE()}
      value={locale}
      onChange={onLocaleSelected}
      size="small"
      select
    >
-      <MenuItem key="cz" value="cz">
-        <img src={CZflag} style={{ width: 16, verticalAlign: 'middle' }} />
-        &nbsp;CZ
-      </MenuItem>
-      <MenuItem key="de" value="de">
-        <img src={DEflag} style={{ width: 16, verticalAlign: 'middle' }} />
-        &nbsp;DE
-      </MenuItem>
-      <MenuItem key="en" value="en">
-        <img src={GBflag} style={{ width: 16, verticalAlign: 'middle' }} />
-        &nbsp;EN
-      </MenuItem>
-      <MenuItem key="fr" value="fr">
-        <img src={FRflag} style={{ width: 16, verticalAlign: 'middle' }} />
-        &nbsp;FR
-      </MenuItem>
-      <MenuItem key="it" value="it">
-        <img src={ITflag} style={{ width: 16, verticalAlign: 'middle' }} />
-        &nbsp;IT
-      </MenuItem>
-      <MenuItem key="nl" value="nl">
-        <img src={NLflag} style={{ width: 16, verticalAlign: 'middle' }} />
-        &nbsp;NL
-      </MenuItem>
-      <MenuItem key="no" value="no">
-        <img src={NOflag} style={{ width: 16, verticalAlign: 'middle' }} />
-        &nbsp;NO
-      </MenuItem>
-      <MenuItem key="pl" value="pl">
-        <img src={PLflag} style={{ width: 16, verticalAlign: 'middle' }} />
-        &nbsp;PL
-      </MenuItem>
-      <MenuItem key="sk" value="sk">
-        <img src={SKflag} style={{ width: 16, verticalAlign: 'middle' }} />
-        &nbsp;SK
-      </MenuItem>
-      <MenuItem key="sv" value="sv">
-        <img src={SVflag} style={{ width: 16, verticalAlign: 'middle' }} />
-        &nbsp;SV
-      </MenuItem>
-      <MenuItem key="tr" value="tr">
-        <img src={TRflag} style={{ width: 16, verticalAlign: 'middle' }} />
-        &nbsp;TR
-      </MenuItem>
+      {menuItems}
    </TextField>
  );
 };

-export default LanguageSelector;
+export default memo(LanguageSelector);
--- a/interface/src/components/inputs/ValidatedPasswordField.tsx
+++ b/interface/src/components/inputs/ValidatedPasswordField.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { memo, useCallback, useState } from 'react';
 import type { FC } from 'react';

 import VisibilityIcon from '@mui/icons-material/Visibility';
@@ -13,6 +13,10 @@ type ValidatedPasswordFieldProps = Omit<ValidatedTextFieldProps, 'type'>;
 const ValidatedPasswordField: FC<ValidatedPasswordFieldProps> = ({ ...props }) => {
  const [showPassword, setShowPassword] = useState<boolean>(false);

+  const togglePasswordVisibility = useCallback(() => {
+    setShowPassword((prev) => !prev);
+  }, []);
+
  return (
    <ValidatedTextField
      {...props}
@@ -21,7 +25,11 @@ const ValidatedPasswordField: FC<ValidatedPasswordFieldProps> = ({ ...props }) =
        input: {
          endAdornment: (
            <InputAdornment position="end">
-              <IconButton onClick={() => setShowPassword(!showPassword)} edge="end">
+              <IconButton
+                onClick={togglePasswordVisibility}
+                edge="end"
+                aria-label="Password visibility"
+              >
                {showPassword ? <VisibilityIcon /> : <VisibilityOffIcon />}
              </IconButton>
            </InputAdornment>
@@ -32,4 +40,4 @@ const ValidatedPasswordField: FC<ValidatedPasswordFieldProps> = ({ ...props }) =
  );
 };

-export default ValidatedPasswordField;
+export default memo(ValidatedPasswordField);
--- a/interface/src/components/inputs/ValidatedTextField.tsx
+++ b/interface/src/components/inputs/ValidatedTextField.tsx
@@ -1,3 +1,4 @@
+import { memo } from 'react';
 import type { FC } from 'react';

 import { FormHelperText, TextField } from '@mui/material';
@@ -20,7 +21,7 @@ const ValidatedTextField: FC<ValidatedTextFieldProps> = ({

  return (
    <>
-      <TextField error={!!errors} {...rest} />
+      <TextField error={!!errors} {...rest} aria-label="Error" />
      {errors?.map((e) => (
        <FormHelperText key={e.message}>{e.message}</FormHelperText>
      ))}
@@ -28,4 +29,4 @@ const ValidatedTextField: FC<ValidatedTextFieldProps> = ({
  );
 };

-export default ValidatedTextField;
+export default memo(ValidatedTextField);
--- a/interface/src/components/layout/Layout.tsx
+++ b/interface/src/components/layout/Layout.tsx
@@ -13,7 +13,7 @@ import { LayoutContext } from './context';

 export const DRAWER_WIDTH = 210;

-const Layout: FC<RequiredChildrenProps> = memo(({ children }) => {
+const LayoutComponent: FC<RequiredChildrenProps> = ({ children }) => {
  const [mobileOpen, setMobileOpen] = useState(false);
  const [title, setTitle] = useState(PROJECT_NAME);
  const { pathname } = useLocation();
@@ -41,6 +41,8 @@ const Layout: FC<RequiredChildrenProps> = memo(({ children }) => {
      </Box>
    </LayoutContext.Provider>
  );
-});
+};
+
+const Layout = memo(LayoutComponent);

 export default Layout;
--- a/interface/src/components/layout/LayoutAppBar.tsx
+++ b/interface/src/components/layout/LayoutAppBar.tsx
@@ -1,8 +1,10 @@
+import { memo, useCallback, useMemo } from 'react';
 import { Link, useLocation, useNavigate } from 'react-router';

 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import MenuIcon from '@mui/icons-material/Menu';
 import { AppBar, IconButton, Toolbar, Typography } from '@mui/material';
+import type { SxProps, Theme } from '@mui/material/styles';

 import { useI18nContext } from 'i18n/i18n-react';

@@ -13,30 +15,47 @@ interface LayoutAppBarProps {
  onToggleDrawer: () => void;
 }

-const LayoutAppBar = ({ title, onToggleDrawer }: LayoutAppBarProps) => {
+// Extract static styles
+const appBarStyles: SxProps<Theme> = {
+  width: { md: `calc(100% - ${DRAWER_WIDTH}px)` },
+  ml: { md: `${DRAWER_WIDTH}px` },
+  boxShadow: 'none',
+  backgroundColor: '#2e586a'
+};
+
+const menuButtonStyles: SxProps<Theme> = {
+  mr: 2,
+  display: { md: 'none' }
+};
+
+const backButtonStyles: SxProps<Theme> = {
+  mr: 1,
+  fontSize: 20,
+  verticalAlign: 'middle'
+};
+
+const LayoutAppBarComponent = ({ title, onToggleDrawer }: LayoutAppBarProps) => {
  const { LL } = useI18nContext();
  const navigate = useNavigate();
+  const location = useLocation();

-  const pathnames = useLocation()
-    .pathname.split('/')
-    .filter((x) => x);
+  const pathnames = useMemo(
+    () => location.pathname.split('/').filter((x) => x),
+    [location.pathname]
+  );
+
+  const handleBackClick = useCallback(() => {
+    void navigate('/' + pathnames[0]);
+  }, [navigate, pathnames]);

  return (
-    <AppBar
-      position="fixed"
-      sx={{
-        width: { md: `calc(100% - ${DRAWER_WIDTH}px)` },
-        ml: { md: `${DRAWER_WIDTH}px` },
-        boxShadow: 'none',
-        backgroundColor: '#2e586a'
-      }}
-    >
+    <AppBar position="fixed" sx={appBarStyles}>
      <Toolbar>
        <IconButton
          color="inherit"
          edge="start"
          onClick={onToggleDrawer}
-          sx={{ mr: 2, display: { md: 'none' } }}
+          sx={menuButtonStyles}
        >
          <MenuIcon />
        </IconButton>
@@ -44,10 +63,10 @@ const LayoutAppBar = ({ title, onToggleDrawer }: LayoutAppBarProps) => {
        {pathnames.length > 1 && (
          <>
            <IconButton
-              sx={{ mr: 1, fontSize: 20, verticalAlign: 'middle' }}
+              sx={backButtonStyles}
              color="primary"
              edge="start"
-              onClick={() => navigate('/' + pathnames[0])}
+              onClick={handleBackClick}
            >
              <ArrowBackIcon />
            </IconButton>
@@ -70,4 +89,6 @@ const LayoutAppBar = ({ title, onToggleDrawer }: LayoutAppBarProps) => {
  );
 };

+const LayoutAppBar = memo(LayoutAppBarComponent);
+
 export default LayoutAppBar;
--- a/interface/src/components/layout/LayoutDrawer.tsx
+++ b/interface/src/components/layout/LayoutDrawer.tsx
@@ -1,3 +1,5 @@
+import { memo, useMemo } from 'react';
+
 import { Box, Divider, Drawer, Toolbar, Typography, styled } from '@mui/material';

 import { PROJECT_NAME } from 'env';
@@ -21,19 +23,23 @@ interface LayoutDrawerProps {
  onClose: () => void;
 }

-const LayoutDrawerProps = ({ mobileOpen, onClose }: LayoutDrawerProps) => {
-  const drawer = (
-    <>
-      <Toolbar disableGutters>
-        <Box display="flex" alignItems="center" px={2}>
-          <LayoutDrawerLogo src="/app/icon.png" alt={PROJECT_NAME} />
-          <Typography variant="h6">{PROJECT_NAME}</Typography>
-        </Box>
-        <Divider absolute />
-      </Toolbar>
-      <Divider />
-      <LayoutMenu />
-    </>
+const LayoutDrawerComponent = ({ mobileOpen, onClose }: LayoutDrawerProps) => {
+  // Memoize drawer content to prevent unnecessary re-renders
+  const drawer = useMemo(
+    () => (
+      <>
+        <Toolbar disableGutters>
+          <Box display="flex" alignItems="center" px={2}>
+            <LayoutDrawerLogo src="/app/icon.png" alt={PROJECT_NAME} />
+            <Typography variant="h6">{PROJECT_NAME}</Typography>
+          </Box>
+          <Divider absolute />
+        </Toolbar>
+        <Divider />
+        <LayoutMenu />
+      </>
+    ),
+    []
  );

  return (
@@ -66,4 +72,6 @@ const LayoutDrawerProps = ({ mobileOpen, onClose }: LayoutDrawerProps) => {
  );
 };

-export default LayoutDrawerProps;
+const LayoutDrawer = memo(LayoutDrawerComponent);
+
+export default LayoutDrawer;
--- a/interface/src/components/layout/LayoutMenu.tsx
+++ b/interface/src/components/layout/LayoutMenu.tsx
@@ -1,4 +1,4 @@
-import { useContext, useState } from 'react';
+import { memo, useCallback, useContext, useMemo, useState } from 'react';

 import AccountCircleIcon from '@mui/icons-material/AccountCircle';
 import AssessmentIcon from '@mui/icons-material/Assessment';
@@ -30,24 +30,31 @@ import LayoutMenuItem from 'components/layout/LayoutMenuItem';
 import { AuthenticatedContext } from 'contexts/authentication';
 import { useI18nContext } from 'i18n/i18n-react';

-const LayoutMenu = () => {
+const LayoutMenuComponent = () => {
  const { me, signOut } = useContext(AuthenticatedContext);
  const { LL } = useI18nContext();

  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
-
-  const open = Boolean(anchorEl);
-  const id = anchorEl ? 'app-menu-popover' : undefined;
-
  const [menuOpen, setMenuOpen] = useState(true);

-  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-    setAnchorEl(event.currentTarget);
-  };
+  const open = useMemo(() => Boolean(anchorEl), [anchorEl]);
+  const id = useMemo(() => (anchorEl ? 'app-menu-popover' : undefined), [anchorEl]);

-  const handleClose = () => {
+  const handleClick = useCallback((event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  }, []);
+
+  const handleClose = useCallback(() => {
    setAnchorEl(null);
-  };
+  }, []);
+
+  const handleSignOut = useCallback(() => {
+    signOut(true);
+  }, [signOut]);
+
+  const handleMenuToggle = useCallback(() => {
+    setMenuOpen((prev) => !prev);
+  }, []);

  return (
    <>
@@ -64,10 +71,8 @@ const LayoutMenu = () => {
        >
          <ListItemButton
            alignItems="flex-start"
-            onClick={() => setMenuOpen(!menuOpen)}
+            onClick={handleMenuToggle}
            sx={{
-              pt: 2.5,
-              pb: menuOpen ? 0 : 2.5,
              '&:hover, &:focus': { '& svg': { opacity: 1 } }
            }}
          >
@@ -173,7 +178,7 @@ const LayoutMenu = () => {
            variant="outlined"
            fullWidth
            color="primary"
-            onClick={() => signOut(true)}
+            onClick={handleSignOut}
          >
            {LL.SIGN_OUT()}
          </Button>
@@ -196,4 +201,6 @@ const LayoutMenu = () => {
  );
 };

+const LayoutMenu = memo(LayoutMenuComponent);
+
 export default LayoutMenu;
--- a/interface/src/components/layout/LayoutMenuItem.tsx
+++ b/interface/src/components/layout/LayoutMenuItem.tsx
@@ -1,7 +1,8 @@
+import { memo, useMemo } from 'react';
 import { Link, useLocation } from 'react-router';

 import { ListItemButton, ListItemIcon, ListItemText } from '@mui/material';
-import type { SvgIconProps } from '@mui/material';
+import type { SvgIconProps, SxProps, Theme } from '@mui/material';

 import { routeMatches } from 'utils';

@@ -12,7 +13,7 @@ interface LayoutMenuItemProps {
  disabled?: boolean;
 }

-const LayoutMenuItem = ({
+const LayoutMenuItemComponent = ({
  icon: Icon,
  label,
  to,
@@ -20,7 +21,53 @@ const LayoutMenuItem = ({
 }: LayoutMenuItemProps) => {
  const { pathname } = useLocation();

-  const selected = routeMatches(to, pathname);
+  const selected = useMemo(() => routeMatches(to, pathname), [to, pathname]);
+
+  // Memoize dynamic styles based on selected state
+  const buttonStyles: SxProps<Theme> = useMemo(
+    () => ({
+      transition: 'all 0.05s cubic-bezier(0.55, 0.085, 0.68, 0.53)',
+      transform: selected ? 'scale(1.02)' : 'scale(1)',
+      backgroundColor: selected ? 'rgba(144, 202, 249, 0.1)' : 'transparent',
+      borderRadius: '8px',
+      margin: '2px 8px',
+      '&:hover': {
+        backgroundColor: 'rgba(68, 82, 211, 0.39)',
+        transform: selected ? 'scale(1.02)' : 'scale(1.01)'
+      },
+      '&::before': {
+        content: '""',
+        position: 'absolute',
+        left: 0,
+        top: 0,
+        bottom: 0,
+        width: selected ? '4px' : '0px',
+        backgroundColor: '#90caf9',
+        borderRadius: '0 2px 2px 0',
+        transition: 'width 0.05s cubic-bezier(0.55, 0.085, 0.68, 0.53)'
+      }
+    }),
+    [selected]
+  );
+
+  const iconStyles: SxProps<Theme> = useMemo(
+    () => ({
+      color: selected ? '#90caf9' : '#9e9e9e',
+      transition: 'color 0.05s cubic-bezier(0.55, 0.085, 0.68, 0.53)',
+      transform: selected ? 'scale(1.1)' : 'scale(1)',
+      transitionProperty: 'color, transform'
+    }),
+    [selected]
+  );
+
+  const textStyles: SxProps<Theme> = useMemo(
+    () => ({
+      color: selected ? '#90caf9' : '#f5f5f5',
+      transition: 'color 0.05s cubic-bezier(0.55, 0.085, 0.68, 0.53)',
+      transitionProperty: 'color, font-weight'
+    }),
+    [selected]
+  );

  return (
    <ListItemButton
@@ -28,51 +75,16 @@ const LayoutMenuItem = ({
      to={to}
      disabled={disabled || false}
      selected={selected}
-      sx={{
-        transition: 'all 0.05s cubic-bezier(0.55, 0.085, 0.68, 0.53)',
-        transform: selected ? 'scale(1.02)' : 'scale(1)',
-        backgroundColor: selected ? 'rgba(144, 202, 249, 0.1)' : 'transparent',
-        borderRadius: '8px',
-        margin: '2px 8px',
-        '&:hover': {
-          backgroundColor: 'rgba(68, 82, 211, 0.39)',
-          transform: selected ? 'scale(1.02)' : 'scale(1.01)'
-        },
-        '&::before': {
-          content: '""',
-          position: 'absolute',
-          left: 0,
-          top: 0,
-          bottom: 0,
-          width: selected ? '4px' : '0px',
-          backgroundColor: '#90caf9',
-          borderRadius: '0 2px 2px 0',
-          transition: 'width 0.05s cubic-bezier(0.55, 0.085, 0.68, 0.53)'
-        }
-      }}
+      sx={buttonStyles}
    >
-      <ListItemIcon
-        sx={{
-          color: selected ? '#90caf9' : '#9e9e9e',
-          transition: 'color 0.05s cubic-bezier(0.55, 0.085, 0.68, 0.53)',
-          transform: selected ? 'scale(1.1)' : 'scale(1)',
-          transitionProperty: 'color, transform'
-        }}
-      >
+      <ListItemIcon sx={iconStyles}>
        <Icon />
      </ListItemIcon>
-      <ListItemText
-        sx={{
-          color: selected ? '#90caf9' : '#f5f5f5',
-          transition: 'color 0.05s cubic-bezier(0.55, 0.085, 0.68, 0.53)',
-          // fontWeight: selected ? '600' : '400',
-          transitionProperty: 'color, font-weight'
-        }}
-      >
-        {label}
-      </ListItemText>
+      <ListItemText sx={textStyles}>{label}</ListItemText>
    </ListItemButton>
  );
 };

+const LayoutMenuItem = memo(LayoutMenuItemComponent);
+
 export default LayoutMenuItem;
--- a/interface/src/components/layout/ListMenuItem.tsx
+++ b/interface/src/components/layout/ListMenuItem.tsx
@@ -1,3 +1,5 @@
+import { memo } from 'react';
+import type { CSSProperties } from 'react';
 import { Link } from 'react-router';

 import NavigateNextIcon from '@mui/icons-material/NavigateNext';
@@ -20,8 +22,15 @@ interface ListMenuItemProps {
  disabled?: boolean;
 }

-function RenderIcon({ icon: Icon, bgcolor, label, text }: ListMenuItemProps) {
-  return (
+// Extract styles to prevent recreation
+const iconStyles: CSSProperties = {
+  justifyContent: 'right',
+  color: 'lightblue',
+  verticalAlign: 'middle'
+};
+
+const RenderIcon = memo(
+  ({ icon: Icon, bgcolor, label, text }: ListMenuItemProps) => (
    <>
      <ListItemAvatar>
        <Avatar sx={{ bgcolor, color: 'white' }}>
@@ -30,8 +39,8 @@ function RenderIcon({ icon: Icon, bgcolor, label, text }: ListMenuItemProps) {
      </ListItemAvatar>
      <ListItemText primary={label} secondary={text} />
    </>
-  );
-}
+  )
+);

 const LayoutMenuItem = ({
  icon,
@@ -46,13 +55,7 @@ const LayoutMenuItem = ({
      <ListItem
        disablePadding
        secondaryAction={
-          <ListItemIcon
-            style={{
-              justifyContent: 'right',
-              color: 'lightblue',
-              verticalAlign: 'middle'
-            }}
-          >
+          <ListItemIcon style={iconStyles}>
            <NavigateNextIcon />
          </ListItemIcon>
        }
@@ -79,4 +82,4 @@ const LayoutMenuItem = ({
  </>
 );

-export default LayoutMenuItem;
+export default memo(LayoutMenuItem);
--- a/interface/src/components/loading/FormLoader.tsx
+++ b/interface/src/components/loading/FormLoader.tsx
@@ -1,3 +1,5 @@
+import { memo } from 'react';
+
 import RefreshIcon from '@mui/icons-material/Refresh';
 import { Box, Button, CircularProgress } from '@mui/material';

@@ -9,7 +11,7 @@ interface FormLoaderProps {
  onRetry?: () => void;
 }

-const FormLoader = ({ errorMessage, onRetry }: FormLoaderProps) => {
+const FormLoaderComponent = ({ errorMessage, onRetry }: FormLoaderProps) => {
  const { LL } = useI18nContext();

  if (errorMessage) {
@@ -38,4 +40,6 @@ const FormLoader = ({ errorMessage, onRetry }: FormLoaderProps) => {
  );
 };

+const FormLoader = memo(FormLoaderComponent);
+
 export default FormLoader;
--- a/interface/src/components/loading/LazyLoader.tsx
+++ b/interface/src/components/loading/LazyLoader.tsx
@@ -1,20 +1,22 @@
 import { memo } from 'react';

 import { Box, CircularProgress } from '@mui/material';
+import type { SxProps, Theme } from '@mui/material';
+
+// Extract styles to prevent recreation on every render
+const containerStyles: SxProps<Theme> = {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  minHeight: '200px',
+  backgroundColor: 'background.default',
+  borderRadius: 1,
+  border: '1px solid',
+  borderColor: 'divider'
+};

 const LazyLoader = memo(() => (
-  <Box
-    display="flex"
-    justifyContent="center"
-    alignItems="center"
-    minHeight="200px"
-    sx={{
-      backgroundColor: 'background.default',
-      borderRadius: 1,
-      border: '1px solid',
-      borderColor: 'divider'
-    }}
-  >
+  <Box sx={containerStyles}>
    <CircularProgress size={40} />
  </Box>
 ));
--- a/interface/src/components/loading/LoadingSpinner.tsx
+++ b/interface/src/components/loading/LoadingSpinner.tsx
@@ -1,10 +1,18 @@
+import { memo } from 'react';
+
 import { Box, CircularProgress } from '@mui/material';
-import type { Theme } from '@mui/material';
+import type { SxProps, Theme } from '@mui/material';

 interface LoadingSpinnerProps {
  height?: number | string;
 }

+// Extract styles to prevent recreation on every render
+const circularProgressStyles: SxProps<Theme> = (theme: Theme) => ({
+  margin: theme.spacing(4),
+  color: theme.palette.text.secondary
+});
+
 const LoadingSpinner = ({ height = '100%' }: LoadingSpinnerProps) => {
  return (
    <Box
@@ -15,15 +23,9 @@ const LoadingSpinner = ({ height = '100%' }: LoadingSpinnerProps) => {
      padding={2}
      height={height}
    >
-      <CircularProgress
-        sx={(theme: Theme) => ({
-          margin: theme.spacing(4),
-          color: theme.palette.text.secondary
-        })}
-        size={100}
-      />
+      <CircularProgress sx={circularProgressStyles} size={100} />
    </Box>
  );
 };

-export default LoadingSpinner;
+export default memo(LoadingSpinner);
--- a/interface/src/components/routing/BlockNavigation.tsx
+++ b/interface/src/components/routing/BlockNavigation.tsx
@@ -1,3 +1,4 @@
+import { memo, useCallback } from 'react';
 import type { Blocker } from 'react-router';

 import {
@@ -14,23 +15,23 @@ import { useI18nContext } from 'i18n/i18n-react';
 const BlockNavigation = ({ blocker }: { blocker: Blocker }) => {
  const { LL } = useI18nContext();

+  const handleReset = useCallback(() => {
+    blocker.reset?.();
+  }, [blocker]);
+
+  const handleProceed = useCallback(() => {
+    blocker.proceed?.();
+  }, [blocker]);
+
  return (
    <Dialog sx={dialogStyle} open={blocker.state === 'blocked'}>
      <DialogTitle>{LL.BLOCK_NAVIGATE_1()}</DialogTitle>
      <DialogContent dividers>{LL.BLOCK_NAVIGATE_2()}</DialogContent>
      <DialogActions>
-        <Button
-          variant="outlined"
-          onClick={() => blocker.reset?.()}
-          color="secondary"
-        >
+        <Button variant="outlined" onClick={handleReset} color="secondary">
          {LL.STAY()}
        </Button>
-        <Button
-          variant="contained"
-          onClick={() => blocker.proceed?.()}
-          color="primary"
-        >
+        <Button variant="contained" onClick={handleProceed} color="primary">
          {LL.LEAVE()}
        </Button>
      </DialogActions>
@@ -38,4 +39,4 @@ const BlockNavigation = ({ blocker }: { blocker: Blocker }) => {
  );
 };

-export default BlockNavigation;
+export default memo(BlockNavigation);
--- a/interface/src/components/routing/RequireAdmin.tsx
+++ b/interface/src/components/routing/RequireAdmin.tsx
@@ -1,4 +1,4 @@
-import { useContext } from 'react';
+import { memo, useContext } from 'react';
 import type { FC } from 'react';
 import { Navigate } from 'react-router';

@@ -14,4 +14,4 @@ const RequireAdmin: FC<RequiredChildrenProps> = ({ children }) => {
  );
 };

-export default RequireAdmin;
+export default memo(RequireAdmin);
--- a/interface/src/components/routing/RequireAuthenticated.tsx
+++ b/interface/src/components/routing/RequireAuthenticated.tsx
@@ -1,4 +1,4 @@
-import { useContext, useEffect } from 'react';
+import { memo, useContext, useEffect } from 'react';
 import type { FC } from 'react';
 import { Navigate, useLocation } from 'react-router';

@@ -18,7 +18,7 @@ const RequireAuthenticated: FC<RequiredChildrenProps> = ({ children }) => {
    if (!authenticationContext.me) {
      storeLoginRedirect(location);
    }
-  });
+  }, [authenticationContext.me, location]);

  return authenticationContext.me ? (
    <AuthenticatedContext.Provider
@@ -31,4 +31,4 @@ const RequireAuthenticated: FC<RequiredChildrenProps> = ({ children }) => {
  );
 };

-export default RequireAuthenticated;
+export default memo(RequireAuthenticated);
--- a/interface/src/components/routing/RequireUnauthenticated.tsx
+++ b/interface/src/components/routing/RequireUnauthenticated.tsx
@@ -1,4 +1,4 @@
-import { useContext } from 'react';
+import { memo, useContext } from 'react';
 import type { FC } from 'react';
 import { Navigate } from 'react-router';

@@ -16,4 +16,4 @@ const RequireUnauthenticated: FC<RequiredChildrenProps> = ({ children }) => {
  );
 };

-export default RequireUnauthenticated;
+export default memo(RequireUnauthenticated);
--- a/interface/src/components/routing/RouterTabs.tsx
+++ b/interface/src/components/routing/RouterTabs.tsx
@@ -1,3 +1,4 @@
+import { memo, useCallback } from 'react';
 import type { FC } from 'react';
 import { useNavigate } from 'react-router';

@@ -15,9 +16,12 @@ const RouterTabs: FC<RouterTabsProps> = ({ value, children }) => {
  const theme = useTheme();
  const smallDown = useMediaQuery(theme.breakpoints.down('sm'));

-  const handleTabChange = (_event: unknown, path: string) => {
-    void navigate(path);
-  };
+  const handleTabChange = useCallback(
+    (_event: unknown, path: string) => {
+      void navigate(path);
+    },
+    [navigate]
+  );

  return (
    <Tabs
@@ -30,4 +34,4 @@ const RouterTabs: FC<RouterTabsProps> = ({ value, children }) => {
  );
 };

-export default RouterTabs;
+export default memo(RouterTabs);
--- a/interface/src/components/routing/authentication.ts
+++ b/interface/src/components/routing/authentication.ts
@@ -13,8 +13,14 @@ export const verifyAuthorization = () =>
 export const signIn = (request: SignInRequest) =>
  alovaInstance.Post<SignInResponse>('/rest/signIn', request);

+// Cache storage reference to avoid repeated checks
+let cachedStorage: Storage | undefined;
+
 export function getStorage() {
-  return localStorage || sessionStorage;
+  if (!cachedStorage) {
+    cachedStorage = localStorage || sessionStorage;
+  }
+  return cachedStorage;
 }

 export function storeLoginRedirect(location?: { pathname: string; search: string }) {
--- a/interface/src/i18n/cz/index.ts
+++ b/interface/src/i18n/cz/index.ts
@@ -187,6 +187,7 @@ const cz: Translation = {
  BUFFER_SIZE: 'Maximální velikost vyrovnávací paměti',
  COMPACT: 'Kompaktní',
  DOWNLOAD_SETTINGS_TEXT: 'Vytvořte zálohu svého nastavení a konfigurace',
+  DOWNLOAD_SETTINGS_TEXT2: 'Exportovat všechna data',
  UPLOAD_TEXT: 'Nahrajte nový soubor firmwaru (.bin) nebo záložní soubor (.json)',
  UPLOAD_DROP_TEXT: 'Přetáhněte soubor sem nebo klikněte pro výběr',
  ERROR: 'Neočekávaná chyba, zkuste to prosím znovu',
--- a/interface/src/i18n/de/index.ts
+++ b/interface/src/i18n/de/index.ts
@@ -187,6 +187,7 @@ const de: Translation = {
  BUFFER_SIZE: 'Max. Puffergröße',
  COMPACT: 'Kompakte Darstellung',
  DOWNLOAD_SETTINGS_TEXT: 'Erstellen Sie eine Sicherung Ihrer Konfigurationen und Einstellungen',
+  DOWNLOAD_SETTINGS_TEXT2: 'Exportiere alle Daten',
  UPLOAD_TEXT: 'Laden Sie eine neue Firmware-Datei (.bin) oder eine Sicherungsdatei (.json) hoch',
  UPLOAD_DROP_TEXT: 'Legen Sie eine Firmware-Datei (.bin) ab oder klicken Sie hier',
  ERROR: 'Unerwarteter Fehler, bitte versuchen Sie es erneut.',
--- a/interface/src/i18n/en/index.ts
+++ b/interface/src/i18n/en/index.ts
@@ -187,6 +187,7 @@ const en: Translation = {
  BUFFER_SIZE: 'Max Buffer Size',
  COMPACT: 'Compact',
  DOWNLOAD_SETTINGS_TEXT: 'Create a backup of your configuration and settings',
+  DOWNLOAD_SETTINGS_TEXT2: 'Export all data',
  UPLOAD_TEXT: 'Upload a new firmware file (.bin) or a backup file (.json)',
  UPLOAD_DROP_TEXT: 'Drop a firmware .bin file or click here',
  ERROR: 'Unexpected Error, please try again',
--- a/interface/src/i18n/fr/index.ts
+++ b/interface/src/i18n/fr/index.ts
@@ -187,6 +187,7 @@ const fr: Translation = {
  BUFFER_SIZE: 'Max taille du buffer',
  COMPACT: 'Compact',
  DOWNLOAD_SETTINGS_TEXT: 'Créer une sauvegarde de vos paramètres et configurations',
+  DOWNLOAD_SETTINGS_TEXT2: 'Exporter toutes les données',
  UPLOAD_TEXT: 'Télécharger un nouveau fichier firmware (.bin) ou une sauvegarde (.json)',
  UPLOAD_DROP_TEXT: 'Drop a firmware .bin file or click here',
  ERROR: 'Erreur inattendue, veuillez réessayer',
--- a/interface/src/i18n/it/index.ts
+++ b/interface/src/i18n/it/index.ts
@@ -187,6 +187,7 @@ const it: Translation = {
  BUFFER_SIZE: 'Max Buffer Size',
  COMPACT: 'Compatto',
  DOWNLOAD_SETTINGS_TEXT: 'Create a backup of your configuration and settings',
+  DOWNLOAD_SETTINGS_TEXT2: 'Esporta tutti i dati',
  UPLOAD_TEXT: 'Upload a new firmware file (.bin) or a backup file (.json)',
  UPLOAD_DROP_TEXT: 'Drop a firmware .bin file or click here',
  ERROR: 'Errore Inaspettato, prego tenta ancora',
--- a/interface/src/i18n/nl/index.ts
+++ b/interface/src/i18n/nl/index.ts
@@ -187,6 +187,7 @@ const nl: Translation = {
  BUFFER_SIZE: 'Max buffer grootte',
  COMPACT: 'Compact',
  DOWNLOAD_SETTINGS_TEXT: 'Maak een back-up van uw configuratie en instellingen',
+  DOWNLOAD_SETTINGS_TEXT2: 'Exporteer alle data',
  UPLOAD_TEXT: 'Upload een nieuw firmwarebestand (.bin) of een back-upbestand (.json)',
  UPLOAD_DROP_TEXT: 'Sleep en firmware .bin bestand hierheen of klik hier',
  ERROR: 'Onverwachte fout, probeer opnieuw',
--- a/interface/src/i18n/no/index.ts
+++ b/interface/src/i18n/no/index.ts
@@ -187,6 +187,7 @@ const no: Translation = {
  BUFFER_SIZE: 'Max Buffer Størrelse',
  COMPACT: 'Komprimere',
  DOWNLOAD_SETTINGS_TEXT: 'Lag en sikkerhetskopi av dine konfigurasjon og innstillinger',
+  DOWNLOAD_SETTINGS_TEXT2: 'Eksporter alle data',
  UPLOAD_TEXT: 'Last opp en ny firmware fil (.bin) eller en sikkerhetskopi fil (.json)',
  UPLOAD_DROP_TEXT: 'Dropp en firmware fil (.bin) eller klikk her',
  ERROR: 'Ukjent feil, prøv igjen',
--- a/interface/src/i18n/pl/index.ts
+++ b/interface/src/i18n/pl/index.ts
@@ -187,6 +187,7 @@ const pl: BaseTranslation = {
  BUFFER_SIZE: 'Maksymalna pojemność bufora (ilość wpisów)',
  COMPACT: 'Kompaktowy',
  DOWNLOAD_SETTINGS_TEXT: 'Utwórz kopię swoich ustawień i konfiguracji',
+  DOWNLOAD_SETTINGS_TEXT2: 'Eksportuj wszystkie dane',
  UPLOAD_TEXT: 'Wgraj nowy plik firmware (.bin) lub kopię ustawień (.json)',
  UPLOAD_DROP_TEXT: 'Upuść plik firmware .bin lub kliknij tutaj',
  ERROR: 'Nieoczekiwany błąd, spróbuj ponownie!',
--- a/interface/src/i18n/sk/index.ts
+++ b/interface/src/i18n/sk/index.ts
@@ -187,6 +187,7 @@ const sk: Translation = {
  BUFFER_SIZE: 'Buffer-max. veľkosť',
  COMPACT: 'Kompaktné',
  DOWNLOAD_SETTINGS_TEXT: 'Vytvorte zálohu svojej konfigurácie a nastavení',
+  DOWNLOAD_SETTINGS_TEXT2: 'Exportovať všetky dáta',
  UPLOAD_TEXT: 'Nahrajte nový súbor firmvéru (.bin) alebo súbor zálohy (.json)',
  UPLOAD_DROP_TEXT: 'Presuňte súbor .bin firmvéru alebo kliknite sem',
  ERROR: 'Neočakávaná chyba, prosím skúste to znova',
--- a/interface/src/i18n/sv/index.ts
+++ b/interface/src/i18n/sv/index.ts
@@ -187,6 +187,7 @@ const sv: Translation = {
  BUFFER_SIZE: 'Max bufferstorlek',
  COMPACT: 'Komprimerad',
  DOWNLOAD_SETTINGS_TEXT: 'Skapa en säkerhetskopia av din konfiguration och inställningar',
+  DOWNLOAD_SETTINGS_TEXT2: 'Exportera alla data',
  UPLOAD_TEXT: 'Ladda upp en ny firmwarefil (.bin) eller en säkerhetskopiafil (.json)',
  UPLOAD_DROP_TEXT: 'Droppa en firmware .bin fil eller klicka här',
  ERROR: 'Okänt fel, var god försök igen',
--- a/interface/src/i18n/tr/index.ts
+++ b/interface/src/i18n/tr/index.ts
@@ -187,6 +187,7 @@ const tr: Translation = {
  BUFFER_SIZE: 'En fazla bellek boyutu',
  COMPACT: 'Sıkışık',
  DOWNLOAD_SETTINGS_TEXT: 'Yapılandırma ve ayarlarınızın yedekleme yapın',
+  DOWNLOAD_SETTINGS_TEXT2: 'Tüm verileri dışarı al',
  UPLOAD_TEXT: 'Yeni bir firmware dosyası (.bin) veya yedek dosyası (.json) yükle',
  UPLOAD_DROP_TEXT: 'Bir firmware .bin dosyası veya buraya tıklayın',
  ERROR: 'Beklenemedik hata, lütfen tekrar deneyin.',
--- a/interface/src/index.tsx
+++ b/interface/src/index.tsx
@@ -4,13 +4,109 @@ import {
  Route,
  RouterProvider,
  createBrowserRouter,
-  createRoutesFromElements
+  createRoutesFromElements,
+  useRouteError
 } from 'react-router';

 import App from 'App';

+const errorPageStyles = {
+  container: {
+    display: 'flex',
+    flexDirection: 'column' as const,
+    alignItems: 'center',
+    justifyContent: 'center',
+    minHeight: '100vh',
+    padding: '2rem',
+    textAlign: 'center' as const,
+    backgroundColor: '#1e1e1e',
+    color: '#eee'
+  },
+  logo: {
+    width: '100px',
+    height: '100px',
+    marginBottom: '2rem'
+  },
+  title: {
+    fontSize: '2rem',
+    margin: '0 0 1rem 0',
+    color: '#90CAF9',
+    fontWeight: 500 as const
+  },
+  status: {
+    color: '#2196f3',
+    fontSize: '1.5rem',
+    fontWeight: 400 as const,
+    margin: '0 0 1rem 0'
+  },
+  message: {
+    fontFamily: 'monospace, monospace',
+    fontSize: '1.1rem',
+    color: '#9e9e9e',
+    maxWidth: '600px',
+    margin: '0 0 2rem 0'
+  },
+  message2: {
+    fontSize: '1.1rem',
+    color: '#2196f3',
+    maxWidth: '600px',
+    margin: '0 0 2rem 0'
+  }
+};
+interface ErrorWithStatus {
+  status?: number | string;
+  statusText?: string;
+  message?: string;
+}
+
+function isErrorWithDetails(error: unknown): error is ErrorWithStatus {
+  return typeof error === 'object' && error !== null;
+}
+
+function getErrorStatus(error: unknown): string {
+  if (isErrorWithDetails(error) && 'status' in error && error.status != null) {
+    return String(error.status);
+  }
+  return 'Error';
+}
+
+function getErrorMessage(error: unknown): string {
+  if (!isErrorWithDetails(error)) {
+    return 'Something went wrong';
+  }
+  return error.statusText || error.message || 'Something went wrong';
+}
+
+// Custom Error Component
+function ErrorPage() {
+  const error = useRouteError();
+
+  return (
+    <div style={errorPageStyles.container}>
+      <img src="/app/icon.png" alt="EMS-ESP Logo" style={errorPageStyles.logo} />
+      <h1 style={errorPageStyles.title}>The WebUI is having problems</h1>
+      <p style={errorPageStyles.message}>
+        {getErrorStatus(error)}: {getErrorMessage(error)}
+      </p>
+      <p style={errorPageStyles.message2}>
+        Please report on{' '}
+        <a
+          href="https://docs.emsesp.org/Support"
+          target="_blank"
+          rel="noreferrer"
+          style={{ color: 'inherit', textDecoration: 'underline' }}
+        >
+          https://docs.emsesp.org/Support
+        </a>
+      </p>
+    </div>
+  );
+}
+
 const router = createBrowserRouter(
-  createRoutesFromElements(<Route path="/*" element={<App />} />)
+  createRoutesFromElements(
+    <Route path="/*" element={<App />} errorElement={<ErrorPage />} />
+  )
 );

 createRoot(document.getElementById('root')!).render(
--- a/interface/src/types/index.ts
+++ b/interface/src/types/index.ts
@@ -1,8 +1,9 @@
 export * from './ap';
+export * from './features';
 export * from './me';
 export * from './mqtt';
+export * from './network';
 export * from './ntp';
 export * from './security';
 export * from './signin';
 export * from './system';
-export * from './network';
--- a/interface/src/types/network.ts
+++ b/interface/src/types/network.ts
@@ -54,6 +54,7 @@ export interface NetworkSettingsType {
  enableMDNS: boolean;
  enableCORS: boolean;
  CORSOrigin: string;
+  [key: string]: unknown;
 }

 export interface WiFiNetworkList {
--- a/interface/src/utils/binding.ts
+++ b/interface/src/utils/binding.ts
@@ -1,60 +1,67 @@
-export const numberValue = (value?: number) => {
-  if (value !== undefined) {
-    return isNaN(value) ? '' : value.toString();
-  }
-  return '';
-};
+/**
+ * Converts a number value to a string for input fields.
+ * Returns empty string for undefined or NaN values.
+ */
+export const numberValue = (value?: number): string =>
+  value === undefined || isNaN(value) ? '' : String(value);

-export const extractEventValue = (event: React.ChangeEvent<HTMLInputElement>) => {
-  switch (event.target.type) {
-    case 'number':
-      return event.target.valueAsNumber;
-    case 'checkbox':
-      return event.target.checked;
-    default:
-      return event.target.value;
-  }
+/**
+ * Extracts the appropriate value from an input event based on input type.
+ */
+export const extractEventValue = (
+  event: React.ChangeEvent<HTMLInputElement>
+): string | number | boolean => {
+  const { type, valueAsNumber, checked, value } = event.target;
+
+  if (type === 'number') return valueAsNumber;
+  if (type === 'checkbox') return checked;
+  return value;
 };

 type UpdateEntity<S> = (state: (prevState: Readonly<S>) => S) => void;

+/**
+ * Creates an event handler that updates an entity's state based on input changes.
+ */
 export const updateValue =
-  <S>(updateEntity: UpdateEntity<S>) =>
-  (event: React.ChangeEvent<HTMLInputElement>) => {
+  <S extends Record<string, unknown>>(updateEntity: UpdateEntity<S>) =>
+  (event: React.ChangeEvent<HTMLInputElement>): void => {
+    const { name } = event.target;
+    const value = extractEventValue(event);
+
    updateEntity((prevState) => ({
      ...prevState,
-      [event.target.name]: extractEventValue(event)
+      [name]: value
    }));
  };

+/**
+ * Creates an event handler that tracks dirty flags for modified fields.
+ * Optimized to minimize state updates and unnecessary array operations.
+ */
 export const updateValueDirty =
-  (
-    origData: unknown,
+  <T extends Record<string, unknown>>(
+    origData: T,
    dirtyFlags: string[],
    setDirtyFlags: React.Dispatch<React.SetStateAction<string[]>>,
-    updateDataValue: (value: unknown) => void
+    updateDataValue: (updater: (prevState: T) => T) => void
  ) =>
-  (event: React.ChangeEvent<HTMLInputElement>) => {
-    const updated_value = extractEventValue(event);
-    const name = event.target.name;
+  (event: React.ChangeEvent<HTMLInputElement>): void => {
+    const { name } = event.target;
+    const updatedValue = extractEventValue(event);

-    updateDataValue((prevState: unknown) => ({
-      ...(prevState as Record<string, unknown>),
-      [name]: updated_value
+    updateDataValue((prevState) => ({
+      ...prevState,
+      [name]: updatedValue
    }));

-    const arr: string[] = dirtyFlags;
+    const isDirty = origData[name] !== updatedValue;
+    const wasDirty = dirtyFlags.includes(name);

-    if ((origData as Record<string, unknown>)[name] !== updated_value) {
-      if (!arr.includes(name)) {
-        arr.push(name);
-      }
-    } else {
-      const startIndex = arr.indexOf(name);
-      if (startIndex !== -1) {
-        arr.splice(startIndex, 1);
-      }
+    // Only update dirty flags if the state changed
+    if (isDirty !== wasDirty) {
+      setDirtyFlags(
+        isDirty ? [...dirtyFlags, name] : dirtyFlags.filter((f) => f !== name)
+      );
    }
-
-    setDirtyFlags(arr);
  };
--- a/interface/src/utils/file.ts
+++ b/interface/src/utils/file.ts
@@ -1,11 +1,28 @@
-export const saveFile = (json: unknown, filename: string, extension: string) => {
-  const anchor = document.createElement('a');
-  anchor.href = URL.createObjectURL(
-    new Blob([JSON.stringify(json, null, 2)], {
-      type: 'text/plain'
-    })
-  );
-  anchor.download = 'emsesp_' + filename + extension;
-  anchor.click();
-  URL.revokeObjectURL(anchor.href);
+export const saveFile = (
+  json: unknown,
+  filename: string,
+  extension: string
+): void => {
+  try {
+    const blob = new Blob([JSON.stringify(json, null, 2)], {
+      type: 'application/json'
+    });
+    const url = URL.createObjectURL(blob);
+    const anchor = document.createElement('a');
+    anchor.href = url;
+    anchor.download = `emsesp_${filename}${extension}`;
+
+    // Trigger download
+    document.body.appendChild(anchor);
+    anchor.click();
+    document.body.removeChild(anchor);
+
+    // Delay revocation to ensure download starts properly
+    setTimeout(() => {
+      URL.revokeObjectURL(url);
+    }, 100);
+  } catch (error) {
+    console.error('Failed to save file:', error);
+    throw new Error(`Unable to save file: ${filename}${extension}`);
+  }
 };
--- a/interface/src/utils/time.ts
+++ b/interface/src/utils/time.ts
@@ -1,8 +1,10 @@
-// Cache for formatters to avoid recreation
+// Cache for formatters to avoid recreation (with size limits to prevent memory leaks)
+const MAX_CACHE_SIZE = 50;
 const formatterCache = new Map<string, Intl.DateTimeFormat>();
 const rtfCache = new Map<string, Intl.RelativeTimeFormat>();

-// Pre-computed time divisions for relative time formatting
+// Pre-computed constants
+const MS_TO_MINUTES = 60000; // 60 * 1000
 const TIME_DIVISIONS = [
  { amount: 60, name: 'seconds' as const },
  { amount: 60, name: 'minutes' as const },
@@ -13,30 +15,79 @@ const TIME_DIVISIONS = [
  { amount: Number.POSITIVE_INFINITY, name: 'years' as const }
 ] as const;

+// Cached navigator languages to avoid repeated array spreads
+let cachedLanguages: readonly string[] | null = null;
+
 /**
- * Get or create a cached DateTimeFormat instance
+ * Get navigator languages with caching
+ */
+function getNavigatorLanguages(): readonly string[] {
+  if (!cachedLanguages) {
+    cachedLanguages = window.navigator.languages;
+  }
+  return cachedLanguages;
+}
+
+/**
+ * Create a fast cache key from DateTimeFormat options
+ */
+function createFormatterKey(options: Intl.DateTimeFormatOptions): string {
+  // Build key from most common properties for better performance than JSON.stringify
+  return `${options.day}-${options.month}-${options.year}-${options.hour}-${options.minute}-${options.second}-${options.hour12}`;
+}
+
+/**
+ * Get or create a cached DateTimeFormat instance with LRU-like cache management
 */
 function getDateTimeFormatter(
  options: Intl.DateTimeFormatOptions
 ): Intl.DateTimeFormat {
-  const key = JSON.stringify(options);
-  if (!formatterCache.has(key)) {
-    formatterCache.set(
-      key,
-      new Intl.DateTimeFormat([...window.navigator.languages], options)
-    );
+  const key = createFormatterKey(options);
+
+  if (formatterCache.has(key)) {
+    // Move to end for LRU behavior
+    const formatter = formatterCache.get(key)!;
+    formatterCache.delete(key);
+    formatterCache.set(key, formatter);
+    return formatter;
  }
-  return formatterCache.get(key)!;
+
+  // Limit cache size
+  if (formatterCache.size >= MAX_CACHE_SIZE) {
+    const firstKey = formatterCache.keys().next().value;
+    if (firstKey) {
+      formatterCache.delete(firstKey);
+    }
+  }
+
+  const formatter = new Intl.DateTimeFormat(getNavigatorLanguages(), options);
+  formatterCache.set(key, formatter);
+  return formatter;
 }

 /**
- * Get or create a cached RelativeTimeFormat instance
+ * Get or create a cached RelativeTimeFormat instance with cache size management
 */
 function getRelativeTimeFormatter(locale: string): Intl.RelativeTimeFormat {
-  if (!rtfCache.has(locale)) {
-    rtfCache.set(locale, new Intl.RelativeTimeFormat(locale, { numeric: 'auto' }));
+  if (rtfCache.has(locale)) {
+    // Move to end for LRU behavior
+    const formatter = rtfCache.get(locale)!;
+    rtfCache.delete(locale);
+    rtfCache.set(locale, formatter);
+    return formatter;
  }
-  return rtfCache.get(locale)!;
+
+  // Limit cache size
+  if (rtfCache.size >= MAX_CACHE_SIZE) {
+    const firstKey = rtfCache.keys().next().value;
+    if (firstKey) {
+      rtfCache.delete(firstKey);
+    }
+  }
+
+  const formatter = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' });
+  rtfCache.set(locale, formatter);
+  return formatter;
 }

 /**
@@ -49,7 +100,7 @@ function formatTimeAgo(locale: string, date: Date): string {

  const rtf = getRelativeTimeFormatter(locale);

-  // Use for...of for better performance and readability
+  // Find the appropriate time division
  for (const division of TIME_DIVISIONS) {
    if (Math.abs(duration) < division.amount) {
      return rtf.format(Math.round(duration), division.name);
@@ -57,7 +108,8 @@ function formatTimeAgo(locale: string, date: Date): string {
    duration /= division.amount;
  }

-  return rtf.format(0, 'seconds');
+  // This should never be reached due to POSITIVE_INFINITY in divisions
+  return rtf.format(Math.round(duration), 'years');
 }

 /**
@@ -102,8 +154,8 @@ export const formatLocalDateTime = (date: Date): string => {
    return 'Invalid date';
  }

-  // Calculate local time offset in milliseconds
-  const offsetMs = date.getTimezoneOffset() * 60000;
+  // Calculate local time offset using pre-computed constant
+  const offsetMs = date.getTimezoneOffset() * MS_TO_MINUTES;
  const localTime = date.getTime() - offsetMs;

  // Convert to ISO string and remove timezone info
--- a/Show More
+++ b/Show More