v3.7.2

fix routing in tabs - #2264
3.7.1 changelog
2026-09-14 14:14:09 +00:00 · 2025-03-22 10:32:03 +01:00 · 2024-11-30 21:31:42 +01:00 · 2024-11-29 10:30:14 +01:00 · 2024-11-29 10:30:05 +01:00 · 2024-10-27 11:41:47 +01:00
484 changed files with 44070 additions and 60614 deletions
@@ -1,27 +0,0 @@
-{
-	"name": "EMS-ESP Devcontainer",
-	"image": "mcr.microsoft.com/devcontainers/typescript-node:1-22-bookworm",
-	"features": {
-		"ghcr.io/devcontainers/features/node:1": {},
-		"ghcr.io/devcontainers-extra/features/pnpm:2": {},
-		"ghcr.io/devcontainers/features/python:1": {},
-		"ghcr.io/shyim/devcontainers-features/bun:0": {}
-	},
-
-	"forwardPorts": [
-		3000,
-		3080
-	],
-
-	// Use 'postCreateCommand' to run commands after the container is created.
-	"postCreateCommand": "cd mock-api && pnpm install && cd .. && cd interface && pnpm install",
-
-	// Configure tool-specific properties.
-	"customizations": {
-		"vscode": {
-			"extensions": [
-				"platformio.platformio-ide"
-			]
-		}
-	}
-}
@@ -21,8 +21,8 @@ _Make sure your have performed every step and checked the applicable boxes befor

 - [ ] Searched the issue in [issues](https://github.com/emsesp/EMS-ESP32/issues)
 - [ ] Searched the issue in [discussions](https://github.com/emsesp/EMS-ESP32/discussions)
- [ ] Searched the issue in the [docs](https://emsesp.org/Troubleshooting/)
- [ ] Searched the issue in the [chat](https://discord.gg/GP9DPSgeJq)
+- [ ] Searched the issue in the [docs](https://docs.emsesp.org/Troubleshooting/)
+- [ ] Searched the issue in the [chat](https://discord.gg/3J3GgnzpyT)
 - [ ] Provide the System information in the area below, taken from `http://<IP>/api/system`

 ```json
@@ -1,11 +1,11 @@
 blank_issues_enabled: false
 contact_links:
  - name: EMS-ESP Docs
-    url: https://emsesp.org
+    url: https://docs.emsesp.org
    about: All the information related to EMS-ESP.
  - name: EMS-ESP Discussions and Support
    url: https://github.com/emsesp/EMS-ESP32/discussions
    about: EMS-ESP usage Questions, Feature Requests and Projects.
  - name: EMS-ESP Users Chat
-    url: https://discord.gg/GP9DPSgeJq
+    url: https://discord.gg/3J3GgnzpyT
    about: Chat for feedback, questions and troubleshooting.
@@ -1,99 +0,0 @@
-name: 'Build dev release'
-
-on:
-  workflow_dispatch:
-  push:
-    paths:
-      - 'src/emsesp_version.h'
-    branches:
-      - 'dev'
-
-permissions:
-  contents: write
-
-jobs:
-  pre-release:
-    name: 'Build Dev Release'
-    runs-on: ubuntu-latest
-    steps:
-        
-      - name: Install python 3.13
-        uses: actions/setup-python@v6
-        with:
-          python-version: '3.13'
-
-      - name: Install Node.js 24
-        uses: actions/setup-node@v6
-        with:
-          node-version: 24
-
-      - name: Checkout repository
-        uses: actions/checkout@v6
-  
-      - name: Enable Corepack
-        run: corepack enable pnpm
-
-      - name: Get the EMS-ESP version
-        id: build_info
-        run: |
-          version=`grep -E '^#define EMSESP_APP_VERSION' ./src/emsesp_version.h | awk -F'"' '{print $2}'`
-          echo "VERSION=$version" >> $GITHUB_OUTPUT
-
-      - name: Install PlatformIO
-        run: |
-          python -m pip install --upgrade pip
-          pip install -U platformio
-          python -m pip install intelhex
-
-      - name: Build webUI
-        run: |
-          platformio run -e build-webUI
-
-      - name: Build modbus
-        run: |
-          platformio run -e build_modbus
-
-      - name: Build standalone
-        run: |
-          platformio run -e build_standalone
-
-      - name: Build all PIO target environments, from default_envs
-        run: |
-          platformio run
-
-      - name: Commit the generated files
-        uses: stefanzweifel/git-auto-commit-action@v7
-        with:
-          commit_message: "chore: update generated files for v${{steps.build_info.outputs.VERSION}}"
-
-      - name: Create GitHub Release
-        id: 'automatic_releases'
-        uses: emsesp/action-automatic-releases@v1.0.1
-        with:
-          repo_token: '${{ secrets.GITHUB_TOKEN }}'
-          title: Development Build v${{steps.build_info.outputs.VERSION}}
-          automatic_release_tag: 'latest'
-          prerelease: true
-          files: |
-            CHANGELOG_LATEST.md
-            ./build/firmware/*.*
-
-      - name: Update version in Cloudflare KV store
-        if: github.repository == 'emsesp/EMS-ESP32'
-        env:
-          CF_ACCOUNT_ID: ${{ secrets.CF_ACCOUNT_ID }}
-          CF_NAMESPACE_ID: ${{ secrets.CF_NAMESPACE_ID }}
-          CF_API_TOKEN: ${{ secrets.CF_API_TOKEN }}
-          VERSION: ${{ steps.build_info.outputs.VERSION }}
-        run: |
-          JSON_DATA=$(jq -n \
-            --arg version "$VERSION" \
-            --arg date "$(date -u +%Y-%m-%dT%H:%M:%SZ)" \
-            '{version: $version, date: $date}')
-          echo "JSON_DATA: $JSON_DATA"
-          curl -sS --fail-with-body \
-            -X PUT "https://api.cloudflare.com/client/v4/accounts/${CF_ACCOUNT_ID}/storage/kv/namespaces/${CF_NAMESPACE_ID}/values/dev" \
-            -H "Authorization: Bearer ${CF_API_TOKEN}" \
-            -H "Content-Type: application/json" \
-            -d "$JSON_DATA"
-          echo
@@ -1,17 +1,16 @@
-name: 'Publish releases to discord'
+name: 'github-releases-to-discord'

 on:
+  workflow_dispatch:
  release:
    types: [published]

 jobs:
  github-releases-to-discord:
    runs-on: ubuntu-latest
-    permissions:
-      contents: read
    steps:
      - name: Checkout
-        uses: actions/checkout@v6
+        uses: actions/checkout@v4
        
      - name: GitHub Releases To Discord
        uses: SethCohen/github-releases-to-discord@v1.13.1
@@ -1,13 +1,18 @@
-name: 'Pre-check on PR'
-permissions:
-  contents: read
+name: 'pr_check'

 on:
  workflow_dispatch:
  pull_request:
    branches: dev
    paths:
-      - 'src/**'
+     - '**.c'
+     - '**.cpp'
+     - '**.h'
+     - '**.hpp'
+     - '**.json'
+     - '**.py'
+     - '**.md'
+     - '.github/workflows/pr_check.yml'

 jobs:
  pre-release:
@@ -15,18 +20,18 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@v4

-      - name: Install python 3.13
-        uses: actions/setup-python@v6
+      - name: Install python 3.11
+        uses: actions/setup-python@v5
        with:
-          python-version: '3.13'
+          python-version: '3.11'

      - name: Install PlatformIO
        run: |
          pip install wheel
          pip install -U platformio

-      - name: Run unit tests
+      - name: Build native
        run: |
-          platformio run -e native-test -t exec
+          platformio run -e native
@@ -0,0 +1,66 @@
+name: 'pre-release'
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - 'dev'
+
+jobs:
+  pre-release:
+    name: 'Automatic pre-release build'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Enable Corepack
+        run: corepack enable
+        
+      - name: Install python 3.11
+        uses: actions/setup-python@v5
+        with:
+          python-version: '3.11'
+
+      - name: Install Node.js 20
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20.x'
+
+      - name: Get EMS-ESP version
+        id: build_info
+        run: |
+          version=`grep -E '^#define EMSESP_APP_VERSION' ./src/version.h | awk -F'"' '{print $2}'`
+          echo "VERSION=$version" >> $GITHUB_OUTPUT
+
+      - name: Install PlatformIO
+        run: |
+          python -m pip install --upgrade pip
+          pip install -U platformio
+
+      - name: Build WebUI
+        run: |
+          cd interface
+          yarn install
+          yarn typesafe-i18n --no-watch
+          sed -i "s/= 'pl'/= 'en'/" ./src/i18n/i18n-util.ts
+          yarn build
+          yarn webUI
+
+      - name: Build all PIO target environments from default_envs
+        run: |
+          platformio run
+        env:
+          NO_BUILD_WEBUI: true
+
+      - name: Create GitHub Release
+        id: 'automatic_releases'
+        uses: emsesp/action-automatic-releases@v1.0.0
+        with:
+          repo_token: '${{ secrets.GITHUB_TOKEN }}'
+          title: Development Build v${{steps.build_info.outputs.VERSION}}
+          automatic_release_tag: 'latest'
+          prerelease: true
+          files: |
+            CHANGELOG_LATEST.md
+            ./build/firmware/*.*
@@ -1,14 +1,12 @@
 # see https://github.com/marketplace/actions/sonarcloud-scan-for-c-and-c#usage
 name: Sonar Check
-permissions:
-  contents: read

 on:
  push:
    branches:
      - dev
-    paths:
-      - 'src/**'
+  # pull_request:
+  #   types: [opened, synchronize, reopened]

 jobs:
  build:
@@ -19,15 +17,18 @@ jobs:
      BUILD_WRAPPER_OUT_DIR: bw-output
    steps:
      - name: Checkout repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@v4
        with:
          fetch-depth: 0
-      - name: Install Build Wrapper
-        uses: SonarSource/sonarqube-scan-action/install-build-wrapper@master
-      - name: Run Build Wrapper
-        run: build-wrapper-linux-x86-64 --out-dir ${{ env.BUILD_WRAPPER_OUT_DIR }} make all
-      - name: SonarQube Scan
-        uses: SonarSource/sonarqube-scan-action@master
-        env:
-          SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}

+      - name: Install sonar-scanner and build-wrapper
+        uses: SonarSource/sonarcloud-github-c-cpp@v2
+
+      - name: Run build-wrapper
+        run:  build-wrapper-linux-x86-64 --out-dir ${{ env.BUILD_WRAPPER_OUT_DIR }} make all
+
+      - name: Run sonar-scanner
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}
+        run: sonar-scanner --define sonar.cfamily.compile-commands="${{ env.BUILD_WRAPPER_OUT_DIR }}/compile_commands.json"
@@ -1,90 +0,0 @@
-name: 'Build stable release'
-
-permissions:
-  contents: write
-
-on:
-  workflow_dispatch:
-  push:
-    tags:
-      - 'v*'
-
-jobs:
-  tagged-release:
-    name: 'Build Stable Release'
-    runs-on: ubuntu-latest
-    steps:
-
-      - name: Install python 3.13
-        uses: actions/setup-python@v6
-        with:
-          python-version: '3.13'
-
-      - name: Install Node.js 24
-        uses: actions/setup-node@v6
-        with:
-          node-version: 24
-
-      - name: Checkout repository
-        uses: actions/checkout@v6
-
-      - name: Enable Corepack
-        run: corepack enable pnpm
-
-
-      - name: Get the EMS-ESP version
-        id: build_info
-        run: |
-          version=`grep -E '^#define EMSESP_APP_VERSION' ./src/emsesp_version.h | awk -F'"' '{print $2}'`
-          echo "VERSION=$version" >> $GITHUB_OUTPUT
-
-      - name: Install PlatformIO
-        run: |
-          python -m pip install --upgrade pip
-          pip install -U platformio
-          python -m pip install intelhex
-
-      - name: Build webUI
-        run: |
-          platformio run -e build-webUI
-
-      - name: Build modbus
-        run: |
-          platformio run -e build_modbus
-
-      - name: Build standalone
-        run: |
-          platformio run -e build_standalone
-
-      - name: Build all PIO target environments, from default_envs
-        run: |
-          platformio run
-
-      - name: Create GitHub Release
-        uses: emsesp/action-automatic-releases@v1.0.1
-        with:
-          repo_token: '${{ secrets.GITHUB_TOKEN }}'
-          prerelease: false
-          files: |
-            CHANGELOG.md
-            ./build/firmware/*.*
-
-      - name: Update version in Cloudflare KV store
-        if: github.repository == 'emsesp/EMS-ESP32'
-        env:
-          CF_ACCOUNT_ID: ${{ secrets.CF_ACCOUNT_ID }}
-          CF_NAMESPACE_ID: ${{ secrets.CF_NAMESPACE_ID }}
-          CF_API_TOKEN: ${{ secrets.CF_API_TOKEN }}
-          VERSION: ${{ steps.build_info.outputs.VERSION }}
-        run: |
-          JSON_DATA=$(jq -n \
-            --arg version "$VERSION" \
-            --arg date "$(date -u +%Y-%m-%dT%H:%M:%SZ)" \
-            '{version: $version, date: $date}')
-          echo "JSON_DATA: $JSON_DATA"
-          curl -sS --fail-with-body \
-            -X PUT "https://api.cloudflare.com/client/v4/accounts/${CF_ACCOUNT_ID}/storage/kv/namespaces/${CF_NAMESPACE_ID}/values/stable" \
-            -H "Authorization: Bearer ${CF_API_TOKEN}" \
-            -H "Content-Type: application/json" \
-            -d "$JSON_DATA"
-          echo
@@ -1,27 +0,0 @@
-name: "Mark or close stale issues and PRs"
-permissions:
-  contents: read
-  issues: write
-  pull-requests: write
- 
-on:
-  schedule:
-    - cron: "30 1 * * *"
-
-jobs:
-  stale:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/stale@v10
-        with:
-          repo-token: ${{ secrets.GITHUB_TOKEN }}
-          days-before-stale: 30
-          days-before-close: 5
-          stale-issue-message: "This issue is stale because it has been open 30 days with no activity. Remove stale label or comment otherwise this will be closed in 5 days."
-          stale-pr-message: "This PR has been automatically marked as stale because there has been no activity in last 30 days. It will be closed if no further activity occurs. Thank you for your contributions."
-          close-issue-message: "This issue was closed because it has been stalled for 5 days with no activity."
-          close-pr-message: "This PR was automatically closed because of being stale."
-          stale-pr-label: "stale"
-          stale-issue-label: "stale"
-          exempt-issue-labels: "bug,enhancement,pinned,security"
-          exempt-pr-labels: "bug,enhancement,pinned,security"
@@ -0,0 +1,57 @@
+name: 'tagged-release'
+
+on:
+  workflow_dispatch:
+  push:
+    tags:
+      - 'v*'
+
+jobs:
+  tagged-release:
+    name: 'Tagged Release'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Enable Corepack
+        run: corepack enable
+
+      - name: Install python 3.11
+        uses: actions/setup-python@v5
+        with:
+          python-version: '3.11'
+
+      - name: Install Node.js 20
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20.x'
+
+      - name: Install PlatformIO
+        run: |
+          python -m pip install --upgrade pip
+          pip install -U platformio
+
+      - name: Build WebUI
+        run: |
+          cd interface
+          yarn install
+          yarn typesafe-i18n --no-watch
+          sed -i "s/= 'pl'/= 'en'/" ./src/i18n/i18n-util.ts
+          yarn build
+          yarn webUI
+
+      - name: Build all PIO target environments from default_envs
+        run: |
+          platformio run
+        env:
+          NO_BUILD_WEBUI: true
+
+      - name: Create GitHub Release
+        uses: emsesp/action-automatic-releases@v1.0.0
+        with:
+          repo_token: '${{ secrets.GITHUB_TOKEN }}'
+          prerelease: false
+          files: |
+            CHANGELOG.md
+            ./build/firmware/*.*
@@ -1,69 +1,59 @@
-name: 'Build test release'
+name: 'test-release'

 on:
  workflow_dispatch:
  push:
    branches:
-      - 'test'
-
-permissions:
-  contents: read
+      - 'dev2'

 jobs:
  pre-release:
-    name: 'Build Test Release'
+    name: 'Automatic test-release build'
    runs-on: ubuntu-latest
-    permissions:
-      contents: write
    steps:
-
-      - name: Install python 3.13
-        uses: actions/setup-python@v6
-        with:
-          python-version: '3.13'
-
-      - name: Install Node.js 24
-        uses: actions/setup-node@v6
-        with:
-          node-version: 24
-
-      - name: Checkout repository
-        uses: actions/checkout@v6
+      - uses: actions/checkout@v4

      - name: Enable Corepack
-        run: corepack enable pnpm
+        run: corepack enable

-      - name: Get the EMS-ESP version
+      - uses: actions/setup-python@v5
+        with:
+          python-version: '3.11'
+
+      - name: Use Node.js 20.x
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20.x'
+
+      - name: Get EMS-ESP source code and version
        id: build_info
        run: |
-          version=`grep -E '^#define EMSESP_APP_VERSION' ./src/emsesp_version.h | awk -F'"' '{print $2}'`
+          version=`grep -E '^#define EMSESP_APP_VERSION' ./src/version.h | awk -F'"' '{print $2}'`
          echo "VERSION=$version" >> $GITHUB_OUTPUT

      - name: Install PlatformIO
        run: |
          python -m pip install --upgrade pip
          pip install -U platformio
-          python -m pip install intelhex

-      - name: Build webUI
+      - name: Build WebUI
        run: |
-          platformio run -e build-webUI
+          cd interface
+          yarn install
+          yarn typesafe-i18n --no-watch
+          sed -i "s/= 'pl'/= 'en'/" ./src/i18n/i18n-util.ts
+          yarn build
+          yarn webUI

-      - name: Build modbus
-        run: |
-          platformio run -e build_modbus
-
-      - name: Build standalone
-        run: |
-          platformio run -e build_standalone
-          
-      - name: Build all PIO target environments, from default_envs
+      - name: Build all target environments from default_envs
        run: |
          platformio run
+        env:
+          NO_BUILD_WEBUI: true

      - name: Create GitHub Release
        id: 'automatic_releases'
-        uses: emsesp/action-automatic-releases@v1.0.1
+        uses: emsesp/action-automatic-releases@v1.0.0
        with:
          repo_token: '${{ secrets.GITHUB_TOKEN }}'
          title: Test Build v${{steps.build_info.outputs.VERSION}}
@@ -1,40 +0,0 @@
-name: 'Update versions'
-
-on:
-  workflow_dispatch:
-
-permissions:
-  contents: write
-
-jobs:
-  update-version:
-    name: 'Update versions in Cloudflare KV store'
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v6
-
-      - name: Get and Send EMS-ESP version to Cloudflare
-        env:
-          CF_ACCOUNT_ID: ${{ secrets.CF_ACCOUNT_ID }}
-          CF_NAMESPACE_ID: ${{ secrets.CF_NAMESPACE_ID }}
-          CF_API_TOKEN: ${{ secrets.CF_API_TOKEN }}
-        run: |
-          version=$(grep -E '^#define EMSESP_APP_VERSION' ./src/emsesp_version.h | awk -F'"' '{print $2}')
-          if [ "$GITHUB_REF" = "refs/heads/main" ]; then
-            KV_ENV="stable"
-          else
-            KV_ENV="dev"
-          fi
-          JSON_DATA=$(jq -n \
-            --arg version "$version" \
-            --arg date "$(date -u +%Y-%m-%dT%H:%M:%SZ)" \
-            '{version: $version, date: $date}')
-          echo "KV_ENV: $KV_ENV"
-          echo "JSON_DATA: $JSON_DATA"
-          curl -sS --fail-with-body \
-            -X PUT "https://api.cloudflare.com/client/v4/accounts/${CF_ACCOUNT_ID}/storage/kv/namespaces/${CF_NAMESPACE_ID}/values/${KV_ENV}" \
-            -H "Authorization: Bearer ${CF_API_TOKEN}" \
-            -H "Content-Type: application/json" \
-            -d "$JSON_DATA"
-          echo
@@ -28,10 +28,14 @@ stats.html
 *.sln
 *.sw?
 .pnp.*
+*/.yarn/cache/*
+*/.yarn/install-state.gz
 analyse.html
 interface/vite.config.ts.timestamp*
 *.local
 src/ESP32React/WWWData.h
+.yarn/*
+.yarnrc.yml

 # i18n generated files
 interface/src/i18n/i18n-react.tsx
@@ -64,7 +68,7 @@ words-found-verbose.txt
 # sonarlint
 compile_commands.json

-# other files
+# pioarduino + hybrid
 managed_components
 dependencies.lock
 CMakeLists.txt
@@ -72,10 +76,3 @@ CMakeLists.txt
 logs/*
 sdkconfig.*
 sdkconfig_tasmota_esp32
-pnpm-lock.yaml
-.cache/
-interface/.tsbuildinfo
-test/test_api/package-lock.json
-.clangd
-mklittlefs
-.cursor
@@ -0,0 +1,101 @@
+{
+    "search.exclude": {
+      "**/.yarn": true,
+      "**/.pnp.*": true
+    },
+    "editor.codeActionsOnSave": {
+      "source.fixAll": "explicit"
+    },
+    "eslint.validate": [
+      "typescript"
+    ],
+    "eslint.codeActionsOnSave.rules": null,
+    "eslint.nodePath": "interface/.yarn/sdks",
+    "eslint.workingDirectories": ["interface"],
+    "prettier.prettierPath": "",
+    "typescript.enablePromptUseWorkspaceTsdk": true,
+    "files.associations": {
+      "*.tsx": "typescriptreact",
+      "*.tcc": "cpp",
+      "optional": "cpp",
+      "istream": "cpp",
+      "ostream": "cpp",
+      "ratio": "cpp",
+      "system_error": "cpp",
+      "array": "cpp",
+      "functional": "cpp",
+      "regex": "cpp",
+      "tuple": "cpp",
+      "type_traits": "cpp",
+      "utility": "cpp",
+      "string": "cpp",
+      "string_view": "cpp",
+      "atomic": "cpp",
+      "bitset": "cpp",
+      "cctype": "cpp",
+      "chrono": "cpp",
+      "clocale": "cpp",
+      "cmath": "cpp",
+      "condition_variable": "cpp",
+      "cstdarg": "cpp",
+      "cstddef": "cpp",
+      "cstdint": "cpp",
+      "cstdio": "cpp",
+      "cstdlib": "cpp",
+      "cstring": "cpp",
+      "ctime": "cpp",
+      "cwchar": "cpp",
+      "cwctype": "cpp",
+      "deque": "cpp",
+      "list": "cpp",
+      "unordered_map": "cpp",
+      "unordered_set": "cpp",
+      "vector": "cpp",
+      "exception": "cpp",
+      "algorithm": "cpp",
+      "iterator": "cpp",
+      "map": "cpp",
+      "memory": "cpp",
+      "memory_resource": "cpp",
+      "numeric": "cpp",
+      "random": "cpp",
+      "set": "cpp",
+      "fstream": "cpp",
+      "initializer_list": "cpp",
+      "iomanip": "cpp",
+      "iosfwd": "cpp",
+      "iostream": "cpp",
+      "limits": "cpp",
+      "mutex": "cpp",
+      "new": "cpp",
+      "sstream": "cpp",
+      "stdexcept": "cpp",
+      "streambuf": "cpp",
+      "thread": "cpp",
+      "cinttypes": "cpp",
+      "typeinfo": "cpp"
+    },
+    "todo-tree.filtering.excludeGlobs": [
+      "**/vendor/**",
+      "**/node_modules/**",
+      "**/dist/**",
+      "**/bower_components/**",
+      "**/build/**",
+      "**/.vscode/**",
+      "**/.github/**",
+      "**/_output/**",
+      "**/*.min.*",
+      "**/*.map",
+      "**/ArduinoJson/**"
+    ],
+    "cSpell.enableFiletypes": [
+      "ini",
+      "makefile"
+    ],
+    "typescript.preferences.preferTypeOnlyAutoImports": true,
+    "sonarlint.pathToCompileCommands": "${workspaceFolder}/compile_commands.json",
+    "sonarlint.connectedMode.project": {
+      "connectionId": "emsesp",
+      "projectKey": "emsesp_EMS-ESP32"
+    }
+  }
@@ -5,188 +5,6 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).

-## [3.8.3] 1 August 2026
-
-## Added
-
- KM300 at address 0x4A [#3084](https://github.com/emsesp/EMS-ESP32/issues/3084)
-
-## Fixed
-
- signed value for solarInfuence [#3077](https://github.com/emsesp/EMS-ESP32/issues/3077)
- set bin file upload limit to 1M again [#3086](https://github.com/emsesp/EMS-ESP32/issues/3086)
- check arithmetric operations on strings [#3127](https://github.com/emsesp/EMS-ESP32/discussions/3127)
- prevent system crash during WiFi network discovery on ESP32-S3 hardware [#3128](https://github.com/emsesp/EMS-ESP32/pull/3128)
- fix setting date/time on Junkers thermostats
- offset of hpminflowtemp [#3144](https://github.com/emsesp/EMS-ESP32/issues/3144)
- water circulation command [#3149](https://github.com/emsesp/EMS-ESP32/pull/3149)
- start scheduler after customEntities, delay scheduler loop after startup, handling of `system/restart` command [#3146](https://github.com/emsesp/EMS-ESP32/issues/3146)
- possible memory leaks fixed.
- repeated startup schedules compute value
- call `system/message` called from scheduler processes compute twice
- water module SM100/200 as dhw1/dhw2 [#3164](https://github.com/emsesp/EMS-ESP32/issues/3164)
-
-## Changed
-
- call compute value direct, enlarge TCP stack [#3127](https://github.com/emsesp/EMS-ESP32/discussions/3127)
- Dewtemperature for Easycontrol calculated by ems-esp [#3135](https://github.com/emsesp/EMS-ESP32/issues/3135)
- add option for sync thermostat to ntp, allow different time zones [#3148](https://github.com/emsesp/EMS-ESP32/discussions/3148), **defaults to sync**.
- block too many GET requests [mentioned in #3104](https://github.com/emsesp/EMS-ESP32/issues/3104)
- set 10 sec timeout for http requests [#3104](https://github.com/emsesp/EMS-ESP32/issues/3104)
- language code "cs" [#3161](https://github.com/emsesp/EMS-ESP32/issues/3161)
-
-## [3.8.2] 12 May 2026
-
-## Added
-
- comfortpoint for BC400 [#2935](https://github.com/emsesp/EMS-ESP32/issues/2935)
- customize device brand [#2784](https://github.com/emsesp/EMS-ESP32/issues/2784)
- set model for ems-esp devices temperature, analog, etc. [#2958](https://github.com/emsesp/EMS-ESP32/discussions/2958)
- prometheus metrics for temperature/analog/scheduler/custom [#2962](https://github.com/emsesp/EMS-ESP32/issues/2962)
- boiler pumpkick [#2965](https://github.com/emsesp/EMS-ESP32/discussions/2965)
- heatpump reset [#2933](https://github.com/emsesp/EMS-ESP32/issues/2933)
- 2.nd freshwater module (dhw4, dhw5) [#2991](https://github.com/emsesp/EMS-ESP32/issues/2991)
- full system backup and restore
- auto-logic to set ht3/ems+ tx-mode
- polariity for digital_in sensors [#3070](https://github.com/emsesp/EMS-ESP32/discussions/3070)
-
-## Fixed
-
- SRC climate creation [#2936](https://github.com/emsesp/EMS-ESP32/issues/2936) and [#2960](https://github.com/emsesp/EMS-ESP32/issues/2960)
- missing translations [#3015](https://github.com/emsesp/EMS-ESP32/issues/3015)
- custom entities check fetch length
- modbus initialization [#3064](https://github.com/emsesp/EMS-ESP32/issues/3064)
-
-## Changed
-
- weblogbuffer up to 1000 messages with PSRAM, mentioned in [#2933](https://github.com/emsesp/EMS-ESP32/issues/2933)
- validate custom entity writes, [#2931](https://github.com/emsesp/EMS-ESP32/issues/2931)
- remove wrong burnMinPower [#2918](https://github.com/emsesp/EMS-ESP32/issues/2918)
- store scheduler active state to nvs [#2946](https://github.com/emsesp/EMS-ESP32/discussions/2946)
- translated modes `heat` and `eco` for HA-climate mode-str-tpl
- support `minflowtemp` and `baseflowtemp` [#2969](https://github.com/emsesp/EMS-ESP32/discussions/2969)
- update version if it is 00.00 in first read [#2981](https://github.com/emsesp/EMS-ESP32/issues/2981)
- device class for % values [#2980](https://github.com/emsesp/EMS-ESP32/issues/2980)
- fetch telegrams: set length to fetch [#3017](https://github.com/emsesp/EMS-ESP32/issues/3017)
- move http client from stack to heap
- heap optimizations [#3021](https://github.com/emsesp/EMS-ESP32/discussions/3021)
- check and read 0x470 as summer2_typeids[0] only if received [#2686](https://github.com/emsesp/EMS-ESP32/issues/2686), [#3055](https://github.com/emsesp/EMS-ESP32/issues/3055)
- default bus-id: gateway1(0x49), tx-mode: auto
-
-## [3.8.1] 11 January 2026
-
-## Added
-
- update time saved in nvs
- heatpump entities [#2883](https://github.com/emsesp/EMS-ESP32/issues/2883)
- HA input number format (mode) selectable box/slider (slider for max range 100) [#2900](https://github.com/emsesp/EMS-ESP32/discussions/2900)
-
-## Fixed
-
- fix EMS bus disconnected errors on some systems [#2881](https://github.com/emsesp/EMS-ESP32/issues/2881)
- selflowtemp fix [#2876](https://github.com/emsesp/EMS-ESP32/issues/2876)
- updated valid GPIOs for ESP32S2, ESP32S3 and ESP32 that caused custom systems to block gpios [#2887](https://github.com/emsesp/EMS-ESP32/issues/2887)
- Junkers wwcharge offset [#2860](https://github.com/emsesp/EMS-ESP32/issues/2860)
- fixed minflowtemp [#2890](https://github.com/emsesp/EMS-ESP32/issues/2890)
- don't add HA uom/classes for bool values [#2885](https://github.com/emsesp/EMS-ESP32/issues/2885)
- fixed missing progress bar on web firmware uploads
-
-## Changed
-
- snapshot gpios stored in temporary ram
- GPIOs stored along with the name and reported in log if conflicting
- free GPIOs depend on board profile [#2901](https://github.com/emsesp/EMS-ESP32/issues/2901)
- prefer PSram for mqtt queue [#2889](https://github.com/emsesp/EMS-ESP32/issues/2889)
- day schedule defult to all days, no day selected is not allowed
- board profile `CUSTOM` can only be selected in developer mode
- mqtt sends round values without decimals (`28` instead of `28.0`)
-
-
-## [3.8.0] 31 December 2025
-
-## Added
-
- analogsensor types: NTC and RGB-Led
- Flag for HMC310 [#2465](https://github.com/emsesp/EMS-ESP32/issues/2465)
- boiler auxheatersource [#2489](https://github.com/emsesp/EMS-ESP32/discussions/2489)
- thermostat last error for RC100/300 [#2501](https://github.com/emsesp/EMS-ESP32/issues/2501)
- boiler 0xC6 telegram [#1963](https://github.com/emsesp/EMS-ESP32/issues/1963)
- CS6800i changes [#2448](https://github.com/emsesp/EMS-ESP32/issues/2448), [#2449](https://github.com/emsesp/EMS-ESP32/issues/2449)
- charging pump [#2544](https://github.com/emsesp/EMS-ESP32/issues/2544)
- hybrid CSH5800iG [#2569](https://github.com/emsesp/EMS-ESP32/issues/2569)
- added EMS Device details to Home Assistant MQTT Discovery
- disinfection command [#2601](https://github.com/emsesp/EMS-ESP32/issues/2601)
- added new board profile for upcoming BBQKees E32V2.2
- set differential pressure entity in Mixer device
- set set climate action cooling/heating in HA [#2583](https://github.com/emsesp/EMS-ESP32/issues/2583)
- Internal sensors of E32V2_2
- FW200 display options [#2610](https://github.com/emsesp/EMS-ESP32/discussions/2610)
- CR11 mode settings OFF/MANUAL depends on selTemp [#2437](https://github.com/emsesp/EMS-ESP32/issues/2437)
- implemented eFuse settings for BBQKees boards to store model type and ESP chipset
- analogsensors for pulse output [#2624](https://github.com/emsesp/EMS-ESP32/discussions/2624)
- analogsensors frequency input [#2631](https://github.com/emsesp/EMS-ESP32/discussions/2631)
- SRC plus thermostats [#2636](https://github.com/emsesp/EMS-ESP32/issues/2636)
- Greenstar 2000 [#2645](https://github.com/emsesp/EMS-ESP32/issues/2645)
- RC3xx `dhw modetype` [#2659](https://github.com/emsesp/EMS-ESP32/discussions/2659)
- new boiler entities VR0,VR1, compressor speed [#2669](https://github.com/emsesp/EMS-ESP32/issues/2669)
- solar temperature TS16 [#2690](https://github.com/emsesp/EMS-ESP32/issues/2690)
- pumpmode enum for HT3 boilers, add commands for manual defrost, chimneysweeper [#2727](https://github.com/emsesp/EMS-ESP32/issues/2727)
- pid settings [#2735](https://github.com/emsesp/EMS-ESP32/issues/2735)
- refresh MQTT button added to MQTT Settings page
- heating assistance, rounding custum settings [#2763](https://github.com/emsesp/EMS-ESP32/discussions/2763)
- added counter 0..2 for short pulses, high frequency [#2758](https://github.com/emsesp/EMS-ESP32/issues/2758)
- added LWT (Last Will and Testament) to MQTT entities in Home Assistant
- added api/metrics endpoint for prometheus integration by @gr3enk [#2774](https://github.com/emsesp/EMS-ESP32/pull/2774)
- added RTL8201 to eth phy list [#2800](https://github.com/emsesp/EMS-ESP32/issues/2800)
- added partitions to Web UI Version page, so previous firmware versions can be installed [#2837](https://github.com/emsesp/EMS-ESP32/issues/2837)
- button pressures show LED. On a long press (10 seconds) the LED flashes for 5 seconds to indicate a factory reset is about to happen. [#2848](https://github.com/emsesp/EMS-ESP32/issues/2848)
- added `txpause` command to pause the TX, by setting Txmode to 0 (disabled) [#2850](https://github.com/emsesp/EMS-ESP32/issues/2850)
-
-## Fixed
-
- dhw/switchtime [#2490](https://github.com/emsesp/EMS-ESP32/issues/2490)
- switch to secure mqtt [#2492](https://github.com/emsesp/EMS-ESP32/issues/2492)
- update link buttons [#2497](https://github.com/emsesp/EMS-ESP32/issues/2497)
- refresh scheduler states [#2502](https://github.com/emsesp/EMS-ESP32/discussions/2502)
- also rebuild HA config on mqtt connect for scheduler, custom and shower
- FB100 controls the hc, not the master [#2510](https://github.com/emsesp/EMS-ESP32/issues/2510)
- IPM DHW module, [#2524](https://github.com/emsesp/EMS-ESP32/issues/2524)
- charge optimization [#2543](https://github.com/emsesp/EMS-ESP32/issues/2543)
- shower active state retained, shows correctly in HA
- MQTT Command Topic with slashes [#2571](https://github.com/emsesp/EMS-ESP32/issues/2571)
- Add pulsed water meter input to V1.3 gateway with Lilygo S3 [#2550](https://github.com/emsesp/EMS-ESP32/issues/2550)
- fix missing long 10-second press of Button to perform a factory reset
- fix wwMaxPower on Junkers ZBS14 [#2609](https://github.com/emsesp/EMS-ESP32/issues/2609)
- ventilation bypass state from telegram 0x55C [#1197](https://github.com/emsesp/EMS-ESP32/issues/1197)
- set selflowtemp for ems+ boilers [#2641](https://github.com/emsesp/EMS-ESP32/discussions/2641)
- syslog timestamp [#2704](https://github.com/emsesp/EMS-ESP32/issues/2704)
- fixed FS format command [#2720](https://github.com/emsesp/EMS-ESP32/discussions/2720)
- dhw priority setting to boiler and mixer, telegrams 0x2CC, 0x2CD, etc.
- check for valid GPIOs when board profile is changed [#2841](https://github.com/emsesp/EMS-ESP32/issues/2841)
-
-## Changed
-
- show console log with ISO date/time [#2533](https://github.com/emsesp/EMS-ESP32/discussions/2533)
- removed ESP32 CPU temperature
- 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 better performance by adding lazy loading and caching
- internal system analog sensors (core_voltage, supply_voltage and gateway_temperature) cannot be accidentally removed
- double click button reconnects EMS-ESP to AP
- place system message command in side scheduler loop to reduce stack memory usage by 2KB
- syslog mark interval set to 1 hour
- handle process_telegram in oneloop
- improved GPIO validation for Analog Sensors and System GPIOs
- entities with no values are greyed out in the Web UI in the Customization page
- added System Status to Web Status page
- show number on entities and supported languages in log on boot
- on tx read fail delay the 3rd. retry 2 sec
- move vectors and lists to PSRAM
- removed unused last topic/payload echo-check
- added Home Assistant device details to MQTT Discovery for all devices
- device_class and state_class changes for HA MQTT Discovery [#2825](https://github.com/emsesp/EMS-ESP32/issues/2825)
-
 ## [3.7.2] 22 March 2025

 ## Added
@@ -267,7 +85,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - The automatically generated temperature sensor ID has replaced dashes (`-`) with underscores (`_`) to be compatible with Home Assistant.
 - `api/system/info` has it's JSON key names changed to camelCase syntax.

-For more details go to [emsesp.org](https://emsesp.org/).
+For more details go to [docs.emsesp.org](https://docs.emsesp.org/).

 ## Added

@@ -399,7 +217,7 @@ For more details go to [emsesp.org](https://emsesp.org/).

 ## **IMPORTANT! BREAKING CHANGES**

-Writeable Text entities have moved from type `sensor` to `text` in Home Assistant to make them also editable within an HA dashboard. Examples are `datetime`, `holidays`, `switchtime`, `vacations`, `maintenancedate`... You will need to manually remove any old discovery topics from your MQTT broker using an application like MQTT Explorer.
+Writeable Text entities have moved from type `sensor` to `text` in Home Assistant to make them also editable within an HA dashboard. Examples are `datetime`, `holidays`, `switchtime`, `vacations`, `maintenancedate`. You will need to manually remove any old discovery topics from your MQTT broker using an application like MQTT Explorer.

 ## Added

@@ -1,43 +1 @@
 # Changelog
-
-For more details go to [emsesp.org](https://emsesp.org/).
-
-## [3.9.0]
-
-This release is based on the latest Espressif/Arduino core version 3. It brings in many memory and performance optimizations. Note it does require the user to manually migrate settings from 3.8.x to 3.9.0.
-
-## Added
-
- user-requested LED blink [#3063](https://github.com/emsesp/EMS-ESP32/issues/3063)
- Commands Service that can be called via MQTT or API or used in the Scheduler Service
- option to disable factory reset [#3150](https://github.com/emsesp/EMS-ESP32/issues/3150)
- TLS support with 4MB boards without PSRAM
- added eth_10mbit to Network Settings, which forces 10BASE-T half-duplex & autonegotiation off, halving the PHY’s power draw. It’s off by default as it will cause issues on managed switches with a port forced to 100Mb [#3213](https://github.com/emsesp/EMS-ESP32/pull/3213)
- cleaner MD5 and firmware uploading in WebUI [#3222](https://github.com/emsesp/EMS-ESP32/issues/3222)
-
-## Fixed
-
- shunting yard show json
- `system/sendmail` called from a Command or the Scheduler computed its value twice, which stripped the quotes from literal text and then failed on characters like `!`. Also shunting yard treated a `?` inside a quoted string as a ternary, so text like `"too hot?"` returned nothing
- memory leak when using different timezones for ems-esp and thermostat[#3184](https://github.com/emsesp/EMS-ESP32/issues/3184)
- LED stayed off on a healthy system when "Disable LED" was unchecked
- Ethernet MAC address changed with the new SDK, breaking DHCP reservations (currently disabled)
- "IPv4 nameserver" showed an IPv6 address when IPv6 was in use
- HA Discovery warning on Uptime after EMS-ESP boot due to NTP not ready
- hc/control setting for UI800 thermostats [#3181](https://github.com/emsesp/EMS-ESP32/discussions/3181)
- solar module switches [#3223](https://github.com/emsesp/EMS-ESP32/issues/3223)
-
-## Changed
-
- various memory optimizations [#3083](https://github.com/emsesp/EMS-ESP32/issues/3083)
- Scheduler name is now mandatory
- network fallback to AP only after start [#3090](https://github.com/emsesp/EMS-ESP32/issues/3090)
- replaced Web async-validator with custom validator and toast with native snackbar to reduce bundle size
- Gateway and Connect devices are shown in the Devices page, but disabled [3126](https://github.com/emsesp/EMS-ESP32/discussions/3126)
- show control setting only for master thermostats (0x10) [#3173](https://github.com/emsesp/EMS-ESP32/issues/3173)
- remove devices without entities not listed in 0x07 telegram
- changes to the Dialogs in Dashboard page, removed the run icon in the Commands page. Renamed Execute to Run.
- set `None` for undefined values in HA `val_tpl`
- changes in WebUI - remove multiple calls systemInfo endpoint, Vewrsion pages checks for internet connection [#3195](https://github.com/emsesp/EMS-ESP32/pull/3195)
- multiple optimization in network, power down WiFi when Ethernet and WiFi nosleep is instant when selected [#3213](https://github.com/emsesp/EMS-ESP32/pull/3213)
-
@@ -6,7 +6,7 @@ Everybody is welcome and invited to contribute to the EMS-ESP Project by:

 - providing Pull Requests (Features, Fixes, suggestions)
 - testing new released features and report issues on your EMS equipment
- contributing to missing [documentation](https://emsesp.org)
+- contributing to missing [documentation](https://docs.emsesp.org)

 This document describes rules that are in effect for this repository, meant for handling issues by contributors in the issue tracker and PRs.

@@ -69,7 +69,7 @@ Format: `<type>(<scope>): <subject>`

 ## Example

-```text
+```
 feat: add hat wobble
 ^--^  ^------------^
 |     |
@@ -96,7 +96,7 @@ References:

 ## Contributor License Agreement (CLA)

-```text
+```
 By making a contribution to this project, I certify that:

 (a) The contribution was created in whole or in part by me and I
@@ -19,20 +19,17 @@ C = $(words $N)$(eval N := x $N)
 ECHO = python3 $(I)/scripts/echo_progress.py --stepno=$C --nsteps=$T
 endif

-# Optimize parallel build configuration
+# determine number of parallel compiles based on OS
 UNAME_S := $(shell uname -s)
-JOBS ?= 1
 ifeq ($(UNAME_S),Linux)
    EXTRA_CPPFLAGS = -D LINUX
-	JOBS := $(shell nproc)
+	JOBS ?= $(shell nproc)
 endif
 ifeq ($(UNAME_S),Darwin)
    EXTRA_CPPFLAGS = -D OSX -Wno-tautological-constant-out-of-range-compare
-	JOBS := $(shell sysctl -n hw.ncpu)
+	JOBS ?= $(shell sysctl -n hw.ncpu)
 endif
-
-# Set optimal parallel build settings
-MAKEFLAGS += -j$(JOBS) -l$(shell echo $$(($(JOBS) * 2)))
+MAKEFLAGS += -j $(JOBS) -l $(JOBS)

 # $(info Number of jobs: $(JOBS))

@@ -47,18 +44,18 @@ MAKEFLAGS += -j$(JOBS) -l$(shell echo $$(($(JOBS) * 2)))
 #----------------------------------------------------------------------
 TARGET    := emsesp
 BUILD     := build
-SOURCES   := src/core src/devices src/web src/test lib_standalone       lib/espMqttClient/src lib/espMqttClient/src/*         lib/ArduinoJson/src lib/uuid-common/src lib/uuid-console/src lib/uuid-log/src   lib/PButton 
-INCLUDES  := src/core src/devices src/web src/test lib_standalone lib/* lib/espMqttClient/src lib/espMqttClient/src/Transport lib/ArduinoJson/src lib/uuid-common/src lib/uuid-console/src lib/uuid-log/src   lib/uuid-telnet/src lib/uuid-syslog/src
+SOURCES   := src/core src/devices src/web src/test       lib_standalone lib/semver lib/espMqttClient/src lib/espMqttClient/src/*         lib/ArduinoJson/src lib/uuid-common/src lib/uuid-console/src lib/uuid-log/src   lib/PButton 
+INCLUDES  := src/core src/devices src/web src/test lib/* lib_standalone lib/semver lib/espMqttClient/src lib/espMqttClient/src/Transport lib/ArduinoJson/src lib/uuid-common/src lib/uuid-console/src lib/uuid-log/src   lib/uuid-telnet/src lib/uuid-syslog/src
 LIBRARIES :=

 CPPCHECK = cppcheck
-CHECKFLAGS = -q --force --std=gnu++20
+CHECKFLAGS = -q --force --std=gnu++17

 #----------------------------------------------------------------------
 # Languages Standard
 #----------------------------------------------------------------------
-C_STANDARD   := -std=c20
-CXX_STANDARD := -std=gnu++20
+C_STANDARD   := -std=c17
+CXX_STANDARD := -std=gnu++17

 #----------------------------------------------------------------------
 # Defined Symbols
@@ -67,7 +64,7 @@ DEFINES += -DARDUINOJSON_ENABLE -DARDUINOJSON_ENABLE_ARDUINO_STRING -DARDUINOJSO
 DEFINES += -DEMSESP_STANDALONE -DEMSESP_TEST -DEMSESP_DEBUG -DEMC_RX_BUFFER_SIZE=1500
 DEFINES += $(ARGS)

-DEFAULTS = -DEMSESP_DEFAULT_LOCALE=\"en\" -DEMSESP_DEFAULT_BOARD_PROFILE=\"S32S3\"
+DEFAULTS = -DEMSESP_DEFAULT_LOCALE=\"en\" -DEMSESP_DEFAULT_TX_MODE=8 -DEMSESP_DEFAULT_VERSION=\"3.7.3-dev\" -DEMSESP_DEFAULT_BOARD_PROFILE=\"S32S3\"

 #----------------------------------------------------------------------
 # Sources & Files
@@ -75,25 +72,16 @@ DEFAULTS = -DEMSESP_DEFAULT_LOCALE=\"en\" -DEMSESP_DEFAULT_BOARD_PROFILE=\"S32S3
 OUTPUT     := $(CURDIR)/$(TARGET)
 SYMBOLS    := $(CURDIR)/$(BUILD)/$(TARGET).out

-# Optimize source discovery - use shell find for better performance
-CSOURCES   := $(shell find $(SOURCES) -name "*.c" 2>/dev/null)
-CXXSOURCES := $(shell find $(SOURCES) -name "*.cpp" 2>/dev/null)
+CSOURCES   := $(foreach dir,$(SOURCES),$(wildcard $(dir)/*.c))
+CXXSOURCES := $(foreach dir,$(SOURCES),$(wildcard $(dir)/*.cpp))

-# Exclude files not needed for standalone build, if they exist
-CSOURCES   := $(filter-out src/core/ModuleLibrary.c,$(CSOURCES))
-CXXSOURCES := $(filter-out src/core/ModuleLibrary.cpp,$(CXXSOURCES))
+OBJS       := $(patsubst %,$(BUILD)/%.o,$(basename $(CSOURCES)) $(basename $(CXXSOURCES)) )
+DEPS       := $(patsubst %,$(BUILD)/%.d,$(basename $(CSOURCES)) $(basename $(CXXSOURCES)) )

-OBJS       := $(patsubst %,$(BUILD)/%.o,$(basename $(CSOURCES)) $(basename $(CXXSOURCES)))
-DEPS       := $(patsubst %,$(BUILD)/%.d,$(basename $(CSOURCES)) $(basename $(CXXSOURCES)))
+INCLUDE    += $(addprefix -I,$(foreach dir,$(INCLUDES), $(wildcard $(dir))))
+INCLUDE    += $(addprefix -I,$(foreach dir,$(LIBRARIES),$(wildcard $(dir)/include)))

-# Optimize include path discovery
-INCLUDE_DIRS := $(shell find $(INCLUDES) -type d 2>/dev/null)
-LIBRARY_INCLUDES := $(shell find $(LIBRARIES) -name "include" -type d 2>/dev/null)
-INCLUDE    += $(addprefix -I,$(INCLUDE_DIRS) $(LIBRARY_INCLUDES))
-
-# Optimize library path discovery
-LIBRARY_DIRS := $(shell find $(LIBRARIES) -name "lib" -type d 2>/dev/null)
-LDLIBS     += $(addprefix -L,$(LIBRARY_DIRS))
+LDLIBS     += $(addprefix -L,$(foreach dir,$(LIBRARIES),$(wildcard $(dir)/lib)))

 #----------------------------------------------------------------------
 # Compiler & Linker
@@ -110,12 +98,13 @@ CXX := /usr/bin/g++
 # LDFLAGS   Linker Flags
 #----------------------------------------------------------------------
 CPPFLAGS  += $(DEFINES) $(DEFAULTS) $(INCLUDE)
-CPPFLAGS  += -ggdb -g3 -MMD
-CPPFLAGS  += -flto=auto
+CPPFLAGS  += -ggdb -g3 -O3
+CPPFLAGS  += -MMD
+CPPFLAGS  += -flto=auto -fno-lto
 CPPFLAGS  += -Wall -Wextra -Werror
-CPPFLAGS  += -Wno-unused-parameter -Wno-missing-braces -Wno-vla-cxx-extension -Wno-switch-enum
-CPPFLAGS  += -ffunction-sections -fdata-sections -fno-exceptions -fno-rtti -fno-threadsafe-statics
-CPPFLAGS  += -Os -DNDEBUG
+CPPFLAGS  += -Wswitch-enum
+CPPFLAGS  += -Wno-unused-parameter
+CPPFLAGS  += -Wno-missing-braces

 CPPFLAGS  += $(EXTRA_CPPFLAGS)

@@ -136,13 +125,11 @@ else
    LD := $(CXX)
 endif

-# Dependency file generation
-DEPFLAGS   += -MF $(BUILD)/$*.d -MT $@
+#DEPFLAGS   += -MF $(BUILD)/$*.d

 LINK.o      = $(LD) $(LDFLAGS) $(LDLIBS) $^ -o $@
 COMPILE.c   = $(CC) $(C_STANDARD) $(CFLAGS) $(DEPFLAGS) -c $< -o $@
 COMPILE.cpp = $(CXX) $(CXX_STANDARD) $(CXXFLAGS) $(DEPFLAGS) -c $< -o $@
-COMPILE.s   = $(CC) $(CFLAGS) $(DEPFLAGS) -c $< -o $@

 #----------------------------------------------------------------------
 # Special Built-in Target
@@ -155,10 +142,7 @@ COMPILE.s   = $(CC) $(CFLAGS) $(DEPFLAGS) -c $< -o $@
 .SUFFIXES:
 .INTERMEDIATE:
 .PRECIOUS: $(OBJS) $(DEPS)
-.PHONY: all clean help cppcheck run
-
-# Enable second expansion for more flexible rules
-.SECONDEXPANSION:
+.PHONY: all clean help

 #----------------------------------------------------------------------
 # Targets
@@ -173,6 +157,7 @@ $(OUTPUT): $(OBJS)
 	@mkdir -p $(@D)
 	@$(ECHO) Linking $@
 	$(LINK.o)
+	$(SYMBOLS.out)
 	
 $(BUILD)/%.o: %.c
 	@mkdir -p $(@D)
@@ -186,7 +171,6 @@ $(BUILD)/%.o: %.cpp

 $(BUILD)/%.o: %.s
 	@mkdir -p $(@D)
-	@$(ECHO) Compiling $@
 	@$(COMPILE.s)

 cppcheck: $(SOURCES)
@@ -201,15 +185,8 @@ clean:
 	@$(RM) -rf $(BUILD) $(OUTPUT)

 help:
-	@echo "Available targets:"
-	@echo "  all      - Build the project (default)"
-	@echo "  run      - Build and run the executable"
-	@echo "  clean    - Remove build artifacts"
-	@echo "  cppcheck - Run static analysis"
-	@echo "  help     - Show this help message"
-	@echo ""
-	@echo "Output: $(OUTPUT)"
-	@echo "Jobs: $(JOBS)"
+	@echo available targets: all run clean
+	@echo $(OUTPUT)

 -include $(DEPS)

@@ -15,10 +15,10 @@
  <a href="https://github.com/emsesp/EMS-ESP32/blob/dev/CONTRIBUTING.md">
    <img src="https://img.shields.io/badge/Contribute-ff4785?style=for-the-badge&logo=git&logoColor=white" alt="Contribute" />
  </a>
-  <a href="https://emsesp.org">
+  <a href="https://docs.emsesp.org">
    <img src="https://img.shields.io/badge/Documentation-0077b5?style=for-the-badge&logo=googledocs&logoColor=white" alt="Guides" />
  </a>
-  <a href="https://discord.gg/GP9DPSgeJq">
+  <a href="https://discord.gg/3J3GgnzpyT">
    <img src="https://img.shields.io/badge/Discord-7289da?style=for-the-badge&logo=discord&logoColor=white" alt="Discord" />
  </a>
  <a href="https://github.com/emsesp/EMS-ESP32/blob/main/CHANGELOG.md">
@@ -32,17 +32,15 @@
 [![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=emsesp_EMS-ESP32&metric=alert_status)](https://sonarcloud.io/summary/new_code?id=emsesp_EMS-ESP32)
 [![Codacy Badge](https://app.codacy.com/project/badge/Grade/9441142f49424ef891e8f5251866ee6b)](https://app.codacy.com/gh/emsesp/EMS-ESP32/dashboard?utm_source=gh&utm_medium=referral&utm_content=&utm_campaign=Badge_grade)
 [![downloads](https://img.shields.io/github/downloads/emsesp/EMS-ESP32/total.svg)](https://github.com/emsesp/EMS-ESP32/releases)
-[![chat](https://img.shields.io/discord/816637840644505620.svg?style=flat-square&color=blueviolet)](https://discord.gg/GP9DPSgeJq)
-[![Ask DeepWiki](https://deepwiki.com/badge.svg)](https://deepwiki.com/emsesp/EMS-ESP32)
+[![chat](https://img.shields.io/discord/816637840644505620.svg?style=flat-square&color=blueviolet)](https://discord.gg/3J3GgnzpyT)

 [![GitHub stars](https://img.shields.io/github/stars/emsesp/EMS-ESP32.svg?style=social&label=Star)](https://github.com/emsesp/EMS-ESP32/stargazers)
-[![GitHub forks](https://img.shields.io/github/forks/emsesp/EMS-ESP32.svg?style=social&label=Fork)](https://github.com/emsesp/EMS-ESP32/network)
+[![GitHub forks](https://img.shields.io/github/forks/emsesp/EMS-ESP32.svg?style=social&label=Fork)](https://github.com/emsesp/EMS-ES32P/network)
 [![donate](https://img.shields.io/badge/donate-PayPal-blue.svg)](https://www.paypal.com/paypalme/prderbyshire/2)

 **EMS-ESP** is an open-source firmware for the Espressif ESP32 microcontroller to communicate with **EMS** (Energy Management System) compatible equipment from manufacturers such as Bosch, Buderus, Nefit, Junkers, Worcester, Sieger, elm.leblanc and iVT.

-It requires a small circuit to interface with the EMS bus which can be purchased from <https://bbqkees-electronics.nl>. These gateways are tested thoroughly and certified to work with EMS-ESP.
-
+It requires a small circuit to interface with the EMS bus which can be purchased from <https://bbqkees-electronics.nl> or custom built.

 ## 📦&nbsp; **Key Features**

@@ -62,39 +60,35 @@ It requires a small circuit to interface with the EMS bus which can be purchased

 ## 🚀&nbsp; **Installing**

-Head over to the [Installation Guide](https://emsesp.org/Installing) section of the documentation for instructions on how to install EMS-ESP.
+Head over to [download.emsesp.org](https://download.emsesp.org) for instructions on how to install EMS-ESP. There is also further details on which boards are supported in [this section](https://docs.emsesp.org/Getting-Started/#first-time-install) of the documentation.

 ## 📋&nbsp; **Documentation**

-Visit [emsesp.org](https://emsesp.org) for more details on how to setup and configure EMS-ESP. You'll also find more a collection of example configuarations, Frequently Asked Questions and Troubleshooting tips.
+Visit [emsesp.org](https://docs.emsesp.org) for more details on how to install and configure EMS-ESP. There is also a collection of Frequently Asked Questions and Troubleshooting tips with example customizations from the community.

 ## 💬&nbsp; **Getting Support**

-To chat with the community reach out on our [Discord Server](https://discord.gg/GP9DPSgeJq).
+To chat with the community reach out on our [Discord Server](https://discord.gg/3J3GgnzpyT).

-If you find an issue or have a request, see the [Getting Support](https://emsesp.org/Support/) section of the documentation. Note if you are using a non-BBQKees EMS gateway, you may need to contact the manufacturer for support.
+If you find an issue or have a request, see [here](https://docs.emsesp.org/Support/) on how to submit a bug report or feature request.

 ## 🎥&nbsp; **Live Demo**

-To see a live demo go to [demo.emsesp.org](https://demo.emsesp.org). Pick a language and use any username and password to log in. Note whast you're seeing is static example data so not all features are operational.
+For a live demo go to [demo.emsesp.org](https://demo.emsesp.org). Pick a language from the sign on page and log in with any username or password. Note not all features are operational as it's based on static data.

 ## 💖&nbsp; **Contributors**

-EMS-ESP is a project originally created by [proddy](https://github.com/proddy) and maintained by the ems-esp community.
+EMS-ESP is a project created by [proddy](https://github.com/proddy) and owned and maintained by both [proddy](https://github.com/proddy) and [MichaelDvP](https://github.com/MichaelDvP) with support from [BBQKees Electronics](https://bbqkees-electronics.nl).

 If you like **EMS-ESP**, please give it a ✨ on GitHub, or even better fork it and contribute. You can also offer a small donation. This is an open-source project maintained by volunteers, and your support is greatly appreciated.

-## 📦&nbsp; **Building**
-
-See the [Building the firmware](https://emsesp.org/Building) guide in the documentation for instructions on how to build EMS-ESP from this source code.
-
 ## 📢&nbsp; **Libraries used**

- [esp8266-react](https://github.com/rjwats/esp8266-react) originally by @rjwats for the core framework that provides the Web UI, which has been heavily modified
+- [esp8266-react](https://github.com/rjwats/esp8266-react) by @rjwats for the core framework that provides the Web UI, which has been heavily modified
 - [uuid-\*](https://github.com/nomis/mcu-uuid-console) from @nomis. The console, syslog, telnet and logging are based off these awesome open source libraries
 - [ArduinoJson](https://github.com/bblanchon/ArduinoJson) for all the JSON processing
 - [espMqttClient](https://github.com/bertmelis/espMqttClient) for the MQTT client
- [ESPAsyncWebServer](https://github.com/ESP32Async/ESPAsyncWebServer) and [AsyncTCP](https://github.com/ESP32Async/AsyncTCP) for the Web server
+- ESPAsyncWebServer and AsyncTCP for the Web server and TCP backends, with custom modifications for performance

 ## 📜&nbsp; **License**

@@ -1,5 +0,0 @@
-# Security Policy
-
-## Reporting a Vulnerability
-
-Please report any security vulnerabilities using the [Contact Form](https://emsesp.org/About/#-contact).
@@ -5,6 +5,7 @@
      },
      "core": "esp32",
      "extra_flags": [
+        "-DTASMOTA_SDK",
        "-DARDUINO_LOLIN_C3_MINI",
        "-DARDUINO_USB_MODE=1",
        "-DARDUINO_USB_CDC_ON_BOOT=1"
@@ -6,6 +6,7 @@
      "core": "esp32",
      "extra_flags": [
        "-DBOARD_HAS_PSRAM",
+        "-DTASMOTA_SDK",
        "-DARDUINO_USB_CDC_ON_BOOT=1",
        "-DARDUINO_USB_MODE=0"
      ],
@@ -36,8 +37,8 @@
      "flash_size": "4MB",
      "maximum_ram_size": 327680,
      "maximum_size": 4194304,
-      "use_1200bps_touch": false,
-      "wait_for_upload_port": false,
+      "use_1200bps_touch": true,
+      "wait_for_upload_port": true,
      "require_upload_port": true,
      "speed": 921600
    },
@@ -21,11 +21,11 @@
      "arduino",
      "espidf"
    ],
-    "name": "Tasmota ESP32-S3 32M Flash OPI PSRAM, 4608KB Code/OTA, 2MB FS",
+    "name": "Espressif ESP32-S3 32M Flash OPI PSRAM, 4608KB Code/OTA, 2MB FS",
    "upload": {
      "flash_size": "32MB",
      "maximum_ram_size": 327680,
-      "maximum_size": 33554432,
+      "maximum_size": 16777216,
      "require_upload_port": true,
      "speed": 460800
    },
@@ -1,6 +1,7 @@
 {
    "build": {
      "core": "esp32",
+      "extra_flags": "-DTASMOTA_SDK",
      "f_cpu": "240000000L",
      "f_flash": "40000000L",
      "flash_mode": "dio",
@@ -18,7 +19,7 @@
      "arduino",
      "espidf"
    ],
-    "name": "Tasmota ESP32 16M Flash, 4608KB Code/OTA, 2MB FS",
+    "name": "Espressif ESP32 16M Flash, 4608KB Code/OTA, 2MB FS",
    "upload": {
      "flash_size": "16MB",
      "maximum_ram_size": 327680,
@@ -19,7 +19,7 @@
      "arduino",
      "espidf"
    ],
-    "name": "Tasmota ESP32 16M Flash DIO PSRAM, 4608KB Code/OTA, 2MB FS",
+    "name": "Espressif ESP32 16M Flash DIO PSRAM, 4608KB Code/OTA, 2MB FS",
    "upload": {
      "flash_size": "16MB",
      "maximum_ram_size": 327680,
@@ -1,6 +1,7 @@
 {
    "build": {
      "core": "esp32",
+      "extra_flags": "-DTASMOTA_SDK",
      "f_cpu": "240000000L",
      "f_flash": "40000000L",
      "flash_mode": "dio",
@@ -1,48 +0,0 @@
-{
-  "build": {
-    "core": "esp32",
-    "extra_flags": [
-      "-DARDUINO_XIAO_ESP32C6",
-      "-DARDUINO_USB_MODE=1",
-      "-DARDUINO_USB_CDC_ON_BOOT=1"
-    ],
-    "f_cpu": "160000000L",
-    "f_flash": "80000000L",
-    "flash_mode": "qio",
-    "hwids": [
-      [
-        "0x2886",
-        "0x0046"
-      ],
-      [
-        "0x303a",
-        "0x1001"
-      ]
-    ],
-    "mcu": "esp32c6",
-    "variant": "XIAO_ESP32C6"
-  },
-  "connectivity": [
-    "wifi",
-    "bluetooth",
-    "zigbee",
-    "thread"
-  ],
-  "debug": {
-    "openocd_target": "esp32c6.cfg"
-  },
-  "frameworks": [
-    "arduino",
-    "espidf"
-  ],
-  "name": "Seeed Studio XIAO ESP32C6",
-  "upload": {
-    "flash_size": "4MB",
-    "maximum_ram_size": 327680,
-    "maximum_size": 4194304,
-    "require_upload_port": true,
-    "speed": 460800
-  },
-  "url": "https://wiki.seeedstudio.com/XIAO_ESP32C6_Getting_Started/",
-  "vendor": "Seeed Studio"
-}
@@ -9,7 +9,6 @@
      }
    ],
    "dictionaries": ["project-words"],
-    "caseSensitive": false,
    "ignorePaths": [
    "node_modules", 
    "compile_commands.json", 
@@ -33,12 +32,6 @@
    "**/*.json",
    "src/core/modbus_entity_parameters.hpp",
    "sdkconfig.*",
-    "managed_components/**",
-    "pnpm-*.yaml",
-    "vite.config.ts",
-    "lib/esp32-psram/**",
-    "test/test_api/test_api.h",
-    "lib_standalone/**",
-    "**/*.js"
+    "managed_components/**"
  ]
  }
@@ -1,344 +1,85 @@
 {
-  "type": "systembackup",
-  "version": "3.9.0",
-  "date": "2026-06-14T10:59:16",
-  "systembackup": [
-    {
-      "type": "settings",
-      "Network": {
-        "ssid": "",
-        "bssid": "",
-        "password": "",
-        "hostname": "ems-esp",
-        "static_ip_config": false,
-        "bandwidth20": false,
-        "nosleep": true,
-        "enableMDNS": true,
-        "enableCORS": false,
-        "CORSOrigin": "*",
-        "tx_power": 0,
-        "eth_10mbit": false
-      },
-      "AP": {
-        "provision_mode": 2,
-        "ssid": "ems-esp",
-        "password": "ems-esp-neo",
-        "channel": 1,
-        "ssid_hidden": false,
-        "max_clients": 4,
-        "local_ip": "192.168.4.1",
-        "gateway_ip": "192.168.4.1",
-        "subnet_mask": "255.255.255.0"
-      },
-      "MQTT": {
-        "enableTLS": false,
-        "rootCA": "",
-        "enabled": true,
-        "host": "192.168.1.2",
-        "port": 1883,
-        "base": "ems-esp",
-        "username": "username",
-        "password": "password",
-        "client_id": "esp32",
-        "keep_alive": 60,
-        "clean_session": false,
-        "entity_format": 1,
-        "publish_time_boiler": 10,
-        "publish_time_thermostat": 10,
-        "publish_time_solar": 10,
-        "publish_time_mixer": 10,
-        "publish_time_water": 10,
-        "publish_time_other": 60,
-        "publish_time_sensor": 10,
-        "publish_time_heartbeat": 60,
-        "mqtt_qos": 0,
-        "mqtt_retain": false,
-        "ha_enabled": true,
-        "nested_format": 1,
-        "discovery_prefix": "homeassistant",
-        "discovery_type": 0,
-        "ha_number_mode": 1,
-        "publish_single": false,
-        "publish_single2cmd": false,
-        "send_response": false
-      },
-      "NTP": {
-        "enabled": true,
-        "server": "time.google.com",
-        "tz_label": "Europe/Amsterdam",
-        "tz_format": "CET-1CEST,M3.5.0,M10.5.0/3"
-      },
-      "Security": {
-        "jwt_secret": "ems-esp-neo",
-        "users": [
-          {
-            "username": "admin",
-            "password": "admin",
-            "admin": true
-          },
-          {
-            "username": "guest",
-            "password": "guest",
-            "admin": false
-          }
-        ]
-      },
-      "Settings": {
-        "version": "3.9.0",
-        "board_profile": "E32V2_2",
-        "platform": "ESP32",
-        "system_name": "prod",
-        "locale": "en",
-        "tx_mode": 1,
-        "ems_bus_id": 73,
-        "syslog_enabled": false,
-        "syslog_level": 3,
-        "trace_raw": false,
-        "syslog_mark_interval": 0,
-        "syslog_host": "",
-        "syslog_port": 514,
-        "boiler_heatingoff": false,
-        "remote_timeout": 24,
-        "remote_timeout_en": false,
-        "shower_timer": true,
-        "shower_alert": false,
-        "shower_alert_coldshot": 10,
-        "shower_alert_trigger": 7,
-        "shower_min_duration": 180,
-        "rx_gpio": 4,
-        "tx_gpio": 5,
-        "dallas_gpio": 14,
-        "dallas_parasite": false,
-        "led_gpio": 32,
-        "hide_led": true,
-        "led_type": 1,
-        "low_clock": false,
-        "telnet_enabled": true,
-        "notoken_api": false,
-        "readonly_mode": false,
-        "analog_enabled": true,
-        "pbutton_gpio": 34,
-        "solar_maxflow": 30,
-        "fahrenheit": false,
-        "bool_format": 1,
-        "bool_dashboard": 1,
-        "enum_format": 1,
-        "weblog_level": 6,
-        "weblog_buffer": 50,
-        "weblog_compact": true,
-        "phy_type": 1,
-        "eth_power": 15,
-        "eth_phy_addr": 0,
-        "eth_clock_mode": 1,
-        "modbus_enabled": false,
-        "modbus_port": 502,
-        "modbus_max_clients": 10,
-        "modbus_timeout": 300,
-        "developer_mode": true,
-        "disable_reset": false,
-        "email_enabled": true,
-        "email_security": 2,
-        "email_server": "smtp.gmail.com",
-        "email_port": 587,
-        "email_login": "test@emsesp.org",
-        "email_pass": "password",
-        "email_sender": "test@emsesp.org",
-        "email_recp": "test@emsesp.org",
-        "email_subject": "ems-esp notification"
-      }
+    "type": "settings",
+    "Network": {
+      "ssid": "my_wifi_ssid",
+      "bssid": "",
+      "password": "my_wifi_password",
+      "hostname": "ems-esp"
    },
-    {
-      "type": "commands",
-      "Commands": {
-        "commands": [
-          {
-            "id": 1,
-            "cmd": "{\"url\":\"https://api.pushover.net/1/messages.json\"}",
-            "value": "{\"user\":\"userkey\", \"token\":\"tokenkey\", \"message\":\"custom/message2\"}",
-            "name": "push_over"
-          },
-          {
-            "id": 2,
-            "cmd": "system/message",
-            "value": "hello",
-            "name": "sendmessage"
-          },
-          {
-            "id": 3,
-            "cmd": "system/message",
-            "value": "{\"url\":\"http://emsesp.org/versions.json\"}",
-            "name": "sendversions"
-          },
-          {
-            "id": 4,
-            "cmd": "custom/message",
-            "value": "{\"url\":\"http://emsesp.org/versions.json\"}",
-            "name": "getversions"
-          },
-          {
-            "id": 5,
-            "cmd": "system/sendmail",
-            "value": "\"test email with \" + custom/message2",
-            "name": "sendmail"
-          }
-        ]
-      }
+    "AP": {
+      "provision_mode": 2,
+      "ssid": "ems-esp",
+      "password": "ems-esp-neo",
+      "channel": 1,
+      "ssid_hidden": false,
+      "max_clients": 4,
+      "local_ip": "192.168.4.1",
+      "gateway_ip": "192.168.4.1",
+      "subnet_mask": "255.255.255.0"
    },
-    {
-      "type": "schedule",
-      "Schedule": {
-        "schedule": [
-          {
-            "id": 1,
-            "flags": 128,
-            "active": false,
-            "time": "",
-            "cmd_name": "sendmail",
-            "name": "sendmailtest"
-          }
-        ]
-      }
+    "MQTT": {
+      "enableTLS": false,
+      "rootCA": "",
+      "enabled": false,
+      "host": "127.0.0.1",
+      "port": 1883,
+      "base": "ems-esp",
+      "username": "username",
+      "password": "password",
+      "client_id": "ems-esp",
+      "entity_format": 1,
+      "publish_time_boiler": 10,
+      "publish_time_thermostat": 10,
+      "publish_time_solar": 10,
+      "publish_time_mixer": 10,
+      "publish_time_water": 10,
+      "publish_time_other": 60,
+      "publish_time_sensor": 10,
+      "publish_time_heartbeat": 60,
+      "mqtt_qos": 0,
+      "mqtt_retain": false,
+      "ha_enabled": false,
+      "nested_format": 1,
+      "discovery_prefix": "homeassistant",
+      "discovery_type": 0,
+      "publish_single": false,
+      "publish_single2cmd": false,
+      "send_response": false
    },
-    {
-      "type": "customizations",
-      "Customizations": {
-        "as": [
-          {
-            "gpio": 39,
-            "name": "core_voltage",
-            "offset": 0,
-            "factor": 0.003771,
-            "uom": 23,
-            "type": 3,
-            "is_system": true
-          },
-          {
-            "gpio": 36,
-            "name": "supply_voltage",
-            "offset": 0,
-            "factor": 0.017,
-            "uom": 23,
-            "type": 3,
-            "is_system": true
-          },
-          {
-            "gpio": 2,
-            "name": "led",
-            "offset": 0,
-            "factor": 1,
-            "uom": 0,
-            "type": 6,
-            "is_system": true
-          }
-        ],
-        "masked_entities": []
-      }
+    "NTP": {
+      "enabled": true,
+      "server": "time.google.com",
+      "tz_label": "Europe/Amsterdam",
+      "tz_format": "CET-1CEST,M3.5.0,M10.5.0/3"
    },
-    {
-      "type": "entities",
-      "Entities": {
-        "entities": [
-          {
-            "id": 0,
-            "ram": 1,
-            "device_id": 0,
-            "type_id": 0,
-            "offset": 0,
-            "factor": 1,
-            "name": "message",
-            "uom": 0,
-            "value_type": 9,
-            "writeable": true,
-            "hide": false,
-            "value": "{\"stable\":{\"version\":\"3.8.3\",\"date\":\"2026-08-01\"},\"dev\":{\"version\":\"3.9.0-dev.0\",\"date\":\"2026-08-01T09:55:29Z\"}}"
-          },
-          {
-            "id": 1,
-            "ram": 1,
-            "device_id": 0,
-            "type_id": 0,
-            "offset": 0,
-            "factor": 1,
-            "name": "message2",
-            "uom": 0,
-            "value_type": 9,
-            "writeable": true,
-            "hide": false,
-            "value": "testing"
-          }
-        ]
-      }
-    },
-    {
-      "type": "modules",
-      "Modules": {
-        "modules": []
-      }
-    },
-    {
-      "type": "nvs",
-      "nvs": [
+    "Security": {
+      "jwt_secret": "ems-esp-neo",
+      "users": [
        {
-          "type": 1,
-          "key": "nompower",
-          "value": 30
+          "username": "admin",
+          "password": "admin",
+          "admin": true
        },
        {
-          "type": 33,
-          "key": "boot",
-          "value": "3.9.0"
-        },
-        {
-          "type": 17,
-          "key": "led",
-          "value": 0
-        },
-        {
-          "type": 33,
-          "key": "intTemp",
-          "value": "28_1767_7B13_2502"
-        },
-        {
-          "type": 4,
-          "key": "d_boot",
-          "value": 1
-        },
-        {
-          "type": 33,
-          "key": "app1",
-          "value": "3.9.0"
-        },
-        {
-          "type": 33,
-          "key": "app0",
-          "value": "3.9.0"
-        },
-        {
-          "type": 66,
-          "key": "nrgheat",
-          "value": 49355.29793
-        },
-        {
-          "type": 4,
-          "key": "d_app1",
-          "value": 1781336521
-        },
-        {
-          "type": 1,
-          "key": "fresh_firmware",
-          "value": 0
-        },
-        {
-          "type": 4,
-          "key": "d_app0",
-          "value": 1781363944
-        },
-        {
-          "type": 66,
-          "key": "nrgww",
-          "value": 41852.79107
+          "username": "guest",
+          "password": "guest",
+          "admin": false
        }
      ]
+    },
+    "Settings": {
+      "board_profile": "S3",
+      "locale": "en",
+      "tx_mode": 1,
+      "ems_bus_id": 11,
+      "boiler_heatingoff": false,
+      "hide_led": true,
+      "telnet_enabled": true,
+      "notoken_api": false,
+      "analog_enabled": true,
+      "fahrenheit": false,
+      "bool_format": 1,
+      "bool_dashboard": 1,
+      "enum_format": 1
    }
-  ]
-}
+  }
@@ -15,7 +15,7 @@ telegram_type_id,name,is_fetched
 0x1C,UBAMaintenanceStatus, 
 0x1E,WM10TempMessage, 
 0x23,JunkersSetMixer,fetched
-0x27,UBASettingsWW,fetched
+0x26,UBASettingsWW,fetched
 0x28,WeatherComp,fetched
 0x2A,MC110Status, 
 0x2E,Meters, 
@@ -62,9 +62,7 @@ telegram_type_id,name,is_fetched
 0xB1,RC10Monitor, 
 0xBB,HybridSettings,fetched
 0xBF,ErrorMessage, 
-0xC0,RCErrorMessage, 
 0xC2,UBAErrorMessage3, 
-0xC6,UBAErrorMessage3, 
 0xD1,UBAOutdoorTemp, 
 0xE3,UBAMonitorSlowPlus2, 
 0xE4,UBAMonitorFastPlus, 
@@ -72,12 +70,11 @@ telegram_type_id,name,is_fetched
 0xE6,UBAParametersPlus,fetched
 0xE9,UBAMonitorWWPlus, 
 0xEA,UBAParameterWWPlus,fetched
-0xEB,PumpKick,fetched
 0x0101,ISM1Set,fetched
 0x0103,ISM1StatusMessage,fetched
 0x0104,ISM2StatusMessage, 
 0x010C,IPMStatusMessage, 
-0x011E,JunkersDisp,fetched
+0x011E,IPMTempMessage, 
 0x012E,HPEnergy1, 
 0x013B,HPEnergy2, 
 0x0165,JunkersSet, 
@@ -112,10 +109,10 @@ telegram_type_id,name,is_fetched
 0x02A0,RC300Curves, 
 0x02A1,RC300Curves, 
 0x02A2,RC300Curves, 
-0x02A5,CRFMonitor, 
+0x02A5,RC300Monitor,fetched
 0x02A6,RC300Monitor, 
-0x02A7,RC300Monitor, 
-0x02A8,CRFMonitor, 
+0x02A7,CRFMonitor, 
+0x02A8,RC300Monitor, 
 0x02A9,RC300Monitor, 
 0x02AA,RC300Monitor, 
 0x02AB,RC300Monitor, 
@@ -137,10 +134,12 @@ telegram_type_id,name,is_fetched
 0x02BF,RC300Set, 
 0x02C0,RC300Set, 
 0x02CC,HPPressure,fetched
-0x02CD,MMPLUSConfigMessage, 
+0x02CD,MMPLUSConfigMessage,fetched
+0x02CE,RC300Set2, 
+0x02D0,RC300Set2, 
+0x02D2,RC300Set2, 
 0x02D6,HPPump2,fetched
 0x02D7,MMPLUSStatusMessage, 
-0x02E0,UBASetPoints, 
 0x02F5,RC300WWmode,fetched
 0x02F6,RC300WW2mode,fetched
 0x0313,MMPLUSConfigMessage_WWC,fetched
@@ -162,24 +161,19 @@ telegram_type_id,name,is_fetched
 0x0380,SM100CollectorConfig,fetched
 0x038E,SM100Energy,fetched
 0x0391,SM100Time,fetched
-0x0421,RC300Set2, 
-0x0422,RC300Set2, 
-0x0423,RC300Set2, 
-0x0424,RC300Set2, 
 0x043F,CRHolidays,fetched
 0x0467,HPSet, 
 0x0468,HPSet, 
 0x0469,HPSet, 
 0x046A,HPSet, 
-0x0470,RC300Summer3,fetched
-0x0471,RC300Sumr2, 
-0x0472,RC300Sumr2, 
-0x0473,RC300Sumr2, 
-0x0474,RC300Sumr2, 
-0x0475,RC300Sumr2, 
-0x0476,RC300Sumr2, 
-0x0477,RC300Sumr2, 
-0x0478,RC300Sumr2, 
+0x0471,RC300Summer2, 
+0x0472,RC300Summer2, 
+0x0473,RC300Summer2, 
+0x0474,RC300Summer2, 
+0x0475,RC300Summer2, 
+0x0476,RC300Summer2, 
+0x0477,RC300Summer2, 
+0x0478,RC300Summer2, 
 0x047B,HP2, 
 0x0484,HPSilentMode,fetched
 0x0485,HpCooling,fetched
@@ -202,7 +196,6 @@ telegram_type_id,name,is_fetched
 0x04AA,HPPower2,fetched
 0x04AE,HPEnergy,fetched
 0x04AF,HPMeters,fetched
-0x055C,VentilationSet,fetched
 0x056B,VentilationMode,fetched
 0x0583,VentilationMonitor, 
 0x0585,Blowerspeed, 
@@ -3,7 +3,7 @@ build_flags =
    ; WiFi settings
    -D FACTORY_WIFI_SSID=\"\"
    -D FACTORY_WIFI_PASSWORD=\"\"
-    -D FACTORY_NETWORK_HOSTNAME=\"ems-esp\"
+    -D FACTORY_WIFI_HOSTNAME=\"ems-esp\"

 	; Access point settings
    -D FACTORY_AP_PROVISION_MODE=AP_MODE_DISCONNECTED
@@ -24,7 +24,6 @@ build_flags =
    -D FACTORY_NTP_TIME_ZONE_LABEL=\"Europe/Amsterdam\"
    -D FACTORY_NTP_TIME_ZONE_FORMAT=\"CET-1CEST,M3.5.0,M10.5.0/3\"
    -D FACTORY_NTP_SERVER=\"time.google.com\"
-    -D FACTORY_NTP_THERMOSTAT_SYNC=1

    ; MQTT settings
    -D FACTORY_MQTT_ENABLED=false
@@ -0,0 +1,4 @@
+/.yarn/**            linguist-vendored
+/.yarn/releases/*    binary
+/.yarn/plugins/**/*  binary
+/.pnp.*              binary linguist-generated
@@ -4,4 +4,5 @@ dist/
 src/i18n/*

 .prettierrc
+.yarn/
 .typesafe-i18n.json
@@ -1,5 +1,5 @@
 {
   "adapter": "react",
   "baseLocale": "pl",
-   "$schema": "https://unpkg.com/typesafe-i18n@5.27.1/schema/typesafe-i18n.json"
+   "$schema": "https://unpkg.com/typesafe-i18n@5.26.2/schema/typesafe-i18n.json"
 }
@@ -0,0 +1,3 @@
+nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-4.7.0.cjs
@@ -1,17 +1,17 @@
 // @ts-check
 import eslint from '@eslint/js';
 import prettierConfig from 'eslint-config-prettier';
-import { defineConfig } from 'eslint/config';
 import tseslint from 'typescript-eslint';

-export default defineConfig(
+export default tseslint.config(
  eslint.configs.recommended,
  ...tseslint.configs.recommendedTypeChecked,
  prettierConfig,
  {
    languageOptions: {
      parserOptions: {
-        project: true
+        project: true,
+        tsconfigRootDir: import.meta.dirname
      }
    }
  },
@@ -1,62 +1,66 @@
 {
  "name": "EMS-ESP",
-  "version": "3.9.0",
+  "version": "3.7.2",
  "description": "EMS-ESP WebUI",
  "homepage": "https://emsesp.org",
-  "author": "emsesp.org",
+  "author": "proddy, emsesp.org",
  "license": "MIT",
  "private": true,
  "type": "module",
  "scripts": {
-    "preinstall": "npx only-allow pnpm",
    "dev": "vite dev",
    "build": "vite build",
    "preview": "vite preview",
    "build-hosted": "typesafe-i18n --no-watch && vite build --mode hosted",
-    "mock-rest": "bun --watch ../mock-api/restServer.ts",
-    "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\"",
+    "preview-standalone": "typesafe-i18n --no-watch && vite build && concurrently -c \"auto\" \"yarn:mock-rest\" \"vite preview\"",
+    "mock-rest": "bun --watch ../mock-api/rest_server.ts",
+    "standalone": "concurrently -c \"auto\" \"typesafe-i18n\" \"yarn:mock-rest\" \"vite\"",
    "typesafe-i18n": "typesafe-i18n --no-watch",
-    "build-webUI": "typesafe-i18n --no-watch && vite build && node progmem-generator.js",
+    "webUI": "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\""
+    "lint": "eslint . --fix"
  },
  "dependencies": {
-    "@alova/adapter-xhr": "2.3.3",
+    "@alova/adapter-xhr": "2.1.1",
    "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.1",
-    "@mui/icons-material": "^9.4.0",
-    "@mui/material": "^9.4.0",
-    "@table-library/react-table-library": "4.1.15",
-    "alova": "^3.5.5",
+    "@emotion/styled": "^11.14.0",
+    "@mui/icons-material": "^6.4.8",
+    "@mui/material": "^6.4.8",
+    "@table-library/react-table-library": "4.1.12",
+    "alova": "3.2.10",
+    "async-validator": "^4.2.5",
    "jwt-decode": "^4.0.0",
-    "preact": "^10.29.8",
-    "react": "^19.2.8",
-    "react-dom": "^19.2.8",
-    "react-icons": "^5.7.0",
-    "react-router": "^8.3.1",
-    "typesafe-i18n": "^5.27.1"
+    "mime-types": "^2.1.35",
+    "preact": "^10.26.4",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-icons": "^5.5.0",
+    "react-router": "^7.4.0",
+    "react-toastify": "^11.0.5",
+    "typesafe-i18n": "^5.26.2",
+    "typescript": "^5.8.2"
  },
  "devDependencies": {
-    "@eslint/js": "^10.0.1",
-    "@preact/preset-vite": "^2.10.6",
-    "@trivago/prettier-plugin-sort-imports": "^6.0.2",
-    "@types/node": "^26.5.0",
-    "@types/react": "^19.2.18",
-    "@types/react-dom": "^19.2.7",
-    "concurrently": "^10.0.5",
-    "eslint": "^10.10.0",
-    "eslint-config-prettier": "^10.1.8",
-    "etag": "^1.8.1",
-    "mime-types": "^3.0.2",
-    "prettier": "^3.9.6",
-    "rollup-plugin-visualizer": "^7.1.1",
-    "terser": "^5.51.2",
-    "typescript": "^6.0.3",
-    "typescript-eslint": "^8.70.0",
-    "vite": "^8.2.2",
-    "vite-plugin-imagemin": "^0.6.1"
+    "@babel/core": "^7.26.10",
+    "@eslint/js": "^9.23.0",
+    "@preact/compat": "^18.3.1",
+    "@preact/preset-vite": "^2.10.1",
+    "@trivago/prettier-plugin-sort-imports": "^5.2.2",
+    "@types/formidable": "^3",
+    "@types/node": "^22.13.11",
+    "@types/react": "^19.0.12",
+    "@types/react-dom": "^19.0.4",
+    "concurrently": "^9.1.2",
+    "eslint": "^9.23.0",
+    "eslint-config-prettier": "^10.1.1",
+    "formidable": "^3.5.2",
+    "prettier": "^3.5.3",
+    "rollup-plugin-visualizer": "^5.14.0",
+    "terser": "^5.39.0",
+    "typescript-eslint": "8.27.0",
+    "vite": "^6.2.2",
+    "vite-plugin-imagemin": "^0.6.1",
+    "vite-tsconfig-paths": "^5.1.4"
  },
-  "packageManager": "pnpm@12.3.4+sha512.961aa41fb077da3a04a441d9f8e15ebc0c96da8ef710b2eb67bf9ee7cb0610eabd48f1fd85f51cffe73846785fa0f87c56a3a872a1d893f8446741b5cce45457"
+  "packageManager": "yarn@4.7.0"
 }
@@ -1,8 +0,0 @@
-allowBuilds:
-  cwebp-bin: false
-  esbuild: false
-  gifsicle: false
-  jpegtran-bin: false
-  mozjpeg: false
-  optipng-bin: false
-  pngquant-bin: false
@@ -1,4 +1,4 @@
-import etag from 'etag';
+import crypto from 'crypto';
 import {
  createWriteStream,
  existsSync,
@@ -15,179 +15,101 @@ const INDENT = '  ';
 const outputPath = '../src/ESP32React/WWWData.h';
 const sourcePath = './dist';
 const bytesPerLine = 20;
-let totalSize = 0;
-let bundleStats = {
-  js: { count: 0, uncompressed: 0, compressed: 0 },
-  css: { count: 0, uncompressed: 0, compressed: 0 },
-  html: { count: 0, uncompressed: 0, compressed: 0 },
-  svg: { count: 0, uncompressed: 0, compressed: 0 },
-  other: { count: 0, uncompressed: 0, compressed: 0 }
+var totalSize = 0;
+
+const generateWWWClass = () =>
+  `typedef std::function<void(const char * uri, const String & contentType, const uint8_t * content, size_t len, const String & hash)> RouteRegistrationHandler;
+// Total size is ${totalSize} bytes
+
+class WWWData {
+${indent}public:
+${indent.repeat(2)}static void registerRoutes(RouteRegistrationHandler handler) {
+${fileInfo.map((file) => `${indent.repeat(3)}handler("${file.uri}", "${file.mimeType}", ${file.variable}, ${file.size}, "${file.hash}");`).join('\n')}
+${indent.repeat(2)}}
 };
-
-// AsyncWebHandler that performs the lookup.
-const generateWWWClass = () => `// Bundle Statistics:
-// - Total compressed size: ${(totalSize / 1000).toFixed(1)} KB
-// - Total uncompressed size: ${(Object.values(bundleStats).reduce((sum, stat) => sum + stat.uncompressed, 0) / 1000).toFixed(1)} KB
-// - Compression ratio: ${(((Object.values(bundleStats).reduce((sum, stat) => sum + stat.uncompressed, 0) - totalSize) / Object.values(bundleStats).reduce((sum, stat) => sum + stat.uncompressed, 0)) * 100).toFixed(1)}%
-// - Generated on: ${new Date().toISOString()}
-
-struct WWWAsset {
-${INDENT}const char *    uri;
-${INDENT}const char *    contentType;
-${INDENT}const uint8_t * content;
-${INDENT}size_t          len;
-${INDENT}const char *    etag; // already includes enclosing double quotes
-};
-
-static const WWWAsset WWW_ASSETS[] = {
-${fileInfo.map((f) => `${INDENT}{"${f.uri}", "${f.mimeType}", ${f.variable}, ${f.size}, "\\"${f.rawHash}\\""},`).join('\n')}
-};
-
-static constexpr size_t WWW_ASSETS_COUNT = sizeof(WWW_ASSETS) / sizeof(WWW_ASSETS[0]);
 `;

-// Optional locale allow-list, shared with the Vite build via VITE_APP_LOCALES
-// (e.g. "en,de,nl"). When set, locale chunks outside the list are NOT embedded
-// into firmware flash. `en` is always kept as the fallback. Unset => embed all.
-const ALL_LOCALES = [
-  'cs',
-  'de',
-  'en',
-  'fr',
-  'it',
-  'nl',
-  'no',
-  'pl',
-  'sk',
-  'sv',
-  'tr'
-];
-const localeAllowList = (process.env.VITE_APP_LOCALES || '')
-  .split(',')
-  .map((locale) => locale.trim())
-  .filter(Boolean);
-
-const isExcludedLocaleChunk = (relativeFilePath) => {
-  if (localeAllowList.length === 0) return false;
-  const base = relativeFilePath.split(sep).pop();
-  const match = /^([a-z]{2})-[A-Za-z0-9_-]+\.js$/.exec(base);
-  if (!match) return false;
-  const code = match[1];
-  // Only treat known locale codes as locale chunks; never drop the en fallback.
-  if (!ALL_LOCALES.includes(code) || code === 'en') return false;
-  return !localeAllowList.includes(code);
-};
-
-const getFilesSync = (dir, files = []) => {
+function getFilesSync(dir, files = []) {
  readdirSync(dir, { withFileTypes: true }).forEach((entry) => {
    const entryPath = resolve(dir, entry.name);
-    entry.isDirectory() ? getFilesSync(entryPath, files) : files.push(entryPath);
+    if (entry.isDirectory()) {
+      getFilesSync(entryPath, files);
+    } else {
+      files.push(entryPath);
+    }
  });
  return files;
-};
+}

-const cleanAndOpen = (path) => {
-  existsSync(path) && unlinkSync(path);
+function cleanAndOpen(path) {
+  if (existsSync(path)) {
+    unlinkSync(path);
+  }
  return createWriteStream(path, { flags: 'w+' });
-};
-
-const getFileType = (filePath) => {
-  const ext = filePath.split('.').pop().toLowerCase();
-  if (ext === 'js') return 'js';
-  if (ext === 'css') return 'css';
-  if (ext === 'html') return 'html';
-  if (ext === 'svg') return 'svg';
-  return 'other';
-};
+}

 const writeFile = (relativeFilePath, buffer) => {
-  const variable = `ESP_REACT_DATA_${fileInfo.length}`;
+  const variable = 'ESP_REACT_DATA_' + fileInfo.length;
  const mimeType = mime.lookup(relativeFilePath);
-  const fileType = getFileType(relativeFilePath);
-  let size = 0;
-  writeStream.write(`const uint8_t ${variable}[] = {`);
-
+  var size = 0;
+  writeStream.write('const uint8_t ' + variable + '[] = {');
+  // const zipBuffer = zlib.brotliCompressSync(buffer, { quality: 1 });
  const zipBuffer = zlib.gzipSync(buffer, { level: 9 });
-  // const hash = crypto.createHash('sha256').update(zipBuffer).digest('hex');
-  const hash = etag(zipBuffer); // use smaller md5 instead of sha256
-  const rawHash = hash.replace(/^"|"$/g, '');
+
+  // create sha
+  const hashSum = crypto.createHash('sha256');
+  hashSum.update(zipBuffer);
+  const hash = hashSum.digest('hex');

  zipBuffer.forEach((b) => {
    if (!(size % bytesPerLine)) {
-      writeStream.write('\n' + INDENT);
+      writeStream.write('\n');
+      writeStream.write(indent);
    }
-    writeStream.write('0x' + b.toString(16).toUpperCase().padStart(2, '0') + ',');
+    writeStream.write('0x' + ('00' + b.toString(16).toUpperCase()).slice(-2) + ',');
    size++;
  });

-  size % bytesPerLine && writeStream.write('\n');
-  writeStream.write('};\n\n');
+  if (size % bytesPerLine) {
+    writeStream.write('\n');
+  }

-  // Update bundle statistics
-  bundleStats[fileType].count++;
-  bundleStats[fileType].uncompressed += buffer.length;
-  bundleStats[fileType].compressed += zipBuffer.length;
+  writeStream.write('};\n\n');

  fileInfo.push({
    uri: '/' + relativeFilePath.replace(sep, '/'),
    mimeType,
    variable,
    size,
-    hash,
-    rawHash
+    hash
  });

+  // console.log(relativeFilePath + ' (size ' + size + ' bytes)');
  totalSize += size;
 };

-console.log(`Generating ${outputPath} from ${sourcePath}`);
+// start
+console.log('Generating ' + outputPath + ' from ' + sourcePath);
+const includes = ARDUINO_INCLUDES;
+const indent = INDENT;
 const fileInfo = [];
 const writeStream = cleanAndOpen(resolve(outputPath));

-writeStream.write(ARDUINO_INCLUDES);
+// includes
+writeStream.write(includes);

+// process static files
 const buildPath = resolve(sourcePath);
 for (const filePath of getFilesSync(buildPath)) {
+  const readStream = readFileSync(filePath);
  const relativeFilePath = relative(buildPath, filePath);
-  if (isExcludedLocaleChunk(relativeFilePath)) {
-    console.log(`Skipping locale (not in VITE_APP_LOCALES): ${relativeFilePath}`);
-    continue;
-  }
-  writeFile(relativeFilePath, readFileSync(filePath));
+  writeFile(relativeFilePath, readStream);
 }

+// add class
 writeStream.write(generateWWWClass());
+
+// end
 writeStream.end();

-// Calculate and display bundle statistics
-const totalUncompressed = Object.values(bundleStats).reduce(
-  (sum, stat) => sum + stat.uncompressed,
-  0
-);
-const totalCompressed = Object.values(bundleStats).reduce(
-  (sum, stat) => sum + stat.compressed,
-  0
-);
-const compressionRatio = (
-  ((totalUncompressed - totalCompressed) / totalUncompressed) *
-  100
-).toFixed(1);
-
-console.log('\n📊 Bundle Size Analysis:');
-console.log('='.repeat(50));
-console.log(`Total compressed size: ${(totalSize / 1000).toFixed(1)} KB`);
-console.log(`Total uncompressed size: ${(totalUncompressed / 1000).toFixed(1)} KB`);
-console.log(`Compression ratio: ${compressionRatio}%`);
-console.log('\n📁 File Type Breakdown:');
-Object.entries(bundleStats).forEach(([type, stats]) => {
-  if (stats.count > 0) {
-    const ratio = (
-      ((stats.uncompressed - stats.compressed) / stats.uncompressed) *
-      100
-    ).toFixed(1);
-    console.log(
-      `${type.toUpperCase().padEnd(4)}: ${stats.count} files, ${(stats.uncompressed / 1000).toFixed(1)} KB → ${(stats.compressed / 1000).toFixed(1)} KB (${ratio}% compression)`
-    );
-  }
-});
-console.log('='.repeat(50));
+console.log('Total size: ' + totalSize / 1000 + ' KB');
@@ -1,15 +1,14 @@
-import { memo, useEffect, useState } from 'react';
-import { Outlet } from 'react-router';
+import { useEffect, useState } from 'react';
+import { ToastContainer, Zoom } from 'react-toastify';

+import AppRouting from 'AppRouting';
 import CustomTheme from 'CustomTheme';
-import { Toaster } from 'components/toast';
-import { Authentication } from 'contexts/authentication';
 import TypesafeI18n from 'i18n/i18n-react';
 import type { Locales } from 'i18n/i18n-types';
 import { loadLocaleAsync } from 'i18n/i18n-util.async';
 import { detectLocale, navigatorDetector } from 'typesafe-i18n/detectors';

-const ALL_LOCALES = [
+const availableLocales = [
  'de',
  'en',
  'it',
@@ -20,42 +19,20 @@ const ALL_LOCALES = [
  'sk',
  'sv',
  'tr',
-  'cs'
-] as Locales[];
+  'cz'
+];

-// Optional build-time allow-list (e.g. VITE_APP_LOCALES="en,de,nl"). When unset,
-// every locale is available. `en` is always kept as the fallback locale, and the
-// progmem generator embeds the matching subset into firmware flash.
-const localeAllowList = (import.meta.env.VITE_APP_LOCALES ?? '')
-  .split(',')
-  .map((locale) => locale.trim())
-  .filter(Boolean);
-
-const AVAILABLE_LOCALES: Locales[] = localeAllowList.length
-  ? ALL_LOCALES.filter(
-      (locale) => locale === 'en' || localeAllowList.includes(locale)
-    )
-  : ALL_LOCALES;
-
-const App = memo(() => {
+const App = () => {
  const [wasLoaded, setWasLoaded] = useState(false);
  const [locale, setLocale] = useState<Locales>('en');

  useEffect(() => {
-    const initializeLocale = async () => {
-      const browserLocale = detectLocale('en', AVAILABLE_LOCALES, navigatorDetector);
-      const stored = localStorage.getItem('lang');
-      // Ignore a stored locale that isn't available (e.g. trimmed from this build).
-      const newLocale =
-        stored && AVAILABLE_LOCALES.includes(stored as Locales)
-          ? (stored as Locales)
-          : browserLocale;
-      localStorage.setItem('lang', newLocale);
-      setLocale(newLocale);
-      await loadLocaleAsync(newLocale);
-      setWasLoaded(true);
-    };
-    void initializeLocale();
+    // determine locale, take from session if set other default to browser language
+    const browserLocale = detectLocale('en', availableLocales, navigatorDetector);
+    const newLocale = (localStorage.getItem('lang') || browserLocale) as Locales;
+    localStorage.setItem('lang', newLocale);
+    setLocale(newLocale);
+    void loadLocaleAsync(newLocale).then(() => setWasLoaded(true));
  }, []);

  if (!wasLoaded) return null;
@@ -63,13 +40,27 @@ const App = memo(() => {
  return (
    <TypesafeI18n locale={locale}>
      <CustomTheme>
-        <Authentication>
-          <Outlet />
-        </Authentication>
-        <Toaster />
+        <AppRouting />
+        <ToastContainer
+          position="bottom-left"
+          autoClose={3000}
+          hideProgressBar={false}
+          newestOnTop={false}
+          closeOnClick
+          rtl={false}
+          pauseOnFocusLoss
+          draggable={false}
+          pauseOnHover={false}
+          transition={Zoom}
+          closeButton={false}
+          theme="dark"
+          toastStyle={{
+            border: '1px solid #177ac9'
+          }}
+        />
      </CustomTheme>
    </TypesafeI18n>
  );
-});
+};

 export default App;
@@ -0,0 +1,60 @@
+import { useContext, useEffect } 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 { Authentication, AuthenticationContext } from 'contexts/authentication';
+import { useI18nContext } from 'i18n/i18n-react';
+
+interface SecurityRedirectProps {
+  message: string;
+  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 AppRouting = () => {
+  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>
+    </Authentication>
+  );
+};
+
+export default AppRouting;
@@ -0,0 +1,76 @@
+import { 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 { AuthenticatedContext } from 'contexts/authentication';
+
+const AuthenticatedRouting = () => {
+  const { me } = useContext(AuthenticatedContext);
+  return (
+    <Layout>
+      <Routes>
+        <Route path="/dashboard/*" element={<Dashboard />} />
+        <Route path="/devices/*" element={<Devices />} />
+        <Route path="/sensors/*" element={<Sensors />} />
+        <Route path="/status/*" element={<Status />} />
+        <Route path="/help/*" element={<Help />} />
+        <Route path="/*" element={<Navigate to="/" />} />
+
+        <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 />} />
+
+            <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 />} />
+          </>
+        )}
+      </Routes>
+    </Layout>
+  );
+};
+
+export default AuthenticatedRouting;
@@ -1,12 +1,6 @@
-import { memo } from 'react';
 import type { FC } from 'react';

-import {
-  CssBaseline,
-  ThemeProvider,
-  responsiveFontSizes,
-  tooltipClasses
-} from '@mui/material';
+import { CssBaseline, ThemeProvider, responsiveFontSizes } from '@mui/material';
 import { createTheme } from '@mui/material/styles';

 import type { RequiredChildrenProps } from 'utils';
@@ -16,9 +10,9 @@ export const dialogStyle = {
    borderRadius: '8px',
    borderColor: '#565656',
    borderStyle: 'solid',
-    borderWidth: '2px'
+    borderWidth: '1px'
  }
-} as const;
+};

 const theme = responsiveFontSizes(
  createTheme({
@@ -36,45 +30,15 @@ const theme = responsiveFontSizes(
      text: {
        disabled: '#eee' // white
      }
-    },
-    components: {
-      MuiListItemText: {
-        styleOverrides: {
-          primary: {
-            fontSize: 14
-          },
-          secondary: {
-            color: '#9e9e9e' // grey[500]
-          }
-        }
-      },
-      MuiTooltip: {
-        defaultProps: {
-          placement: 'top',
-          arrow: true
-        },
-        styleOverrides: {
-          tooltip: {
-            padding: '4px 8px',
-            fontSize: 10,
-            color: 'rgba(0, 0, 0, 0.87)',
-            backgroundColor: '#4caf50', // MUI success.main default color
-            boxShadow: '0px 2px 8px rgba(0, 0, 0, 0.15)',
-            [`& .${tooltipClasses.arrow}`]: {
-              color: '#4caf50'
-            }
-          }
-        }
-      }
    }
  })
 );

-const CustomTheme: FC<RequiredChildrenProps> = memo(({ children }) => (
+const CustomTheme: FC<RequiredChildrenProps> = ({ children }) => (
  <ThemeProvider theme={theme}>
    <CssBaseline />
    {children}
  </ThemeProvider>
-));
+);

 export default CustomTheme;
@@ -1,26 +1,25 @@
-import { memo, useContext, useEffect, useState } from 'react';
+import { useContext, useState } from 'react';
+import { toast } from 'react-toastify';

 import ForwardIcon from '@mui/icons-material/Forward';
 import { Box, Button, Paper, Typography } from '@mui/material';
-import type { Theme } from '@mui/material/styles';

 import * as AuthenticationApi from 'components/routing/authentication';
 import { useRequest } from 'alova/client';
+import type { ValidateFieldsError } from 'async-validator';
 import {
  LanguageSelector,
  ValidatedPasswordField,
  ValidatedTextField
 } from 'components';
-import { toast } from 'components/toast';
 import { AuthenticationContext } from 'contexts/authentication';
 import { PROJECT_NAME } from 'env';
 import { useI18nContext } from 'i18n/i18n-react';
 import type { SignInRequest } from 'types';
 import { onEnterCallback, updateValue } from 'utils';
-import { SIGN_IN_REQUEST_VALIDATOR, ValidationError, validate } from 'validators';
-import type { ValidateFieldsError } from 'validators/schema';
+import { SIGN_IN_REQUEST_VALIDATOR, validate } from 'validators';

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

  const { LL } = useI18nContext();
@@ -37,17 +36,13 @@ const SignIn = memo(() => {
    {
      immediate: false
    }
-  ).onSuccess((response: { data: { access_token: string } }) => {
+  ).onSuccess((response) => {
    if (response.data) {
      authenticationContext.signIn(response.data.access_token);
    }
  });

-  const updateLoginRequestValue = updateValue((updater) =>
-    setSignInRequest(
-      updater as unknown as (prevState: SignInRequest) => SignInRequest
-    )
-  );
+  const updateLoginRequestValue = updateValue(setSignInRequest);

  const signIn = async () => {
    await callSignIn(signInRequest).catch((event: Error) => {
@@ -69,33 +64,22 @@ const SignIn = memo(() => {
      await validate(SIGN_IN_REQUEST_VALIDATOR, signInRequest);
      await signIn();
    } catch (error) {
-      setFieldErrors((error as ValidationError).fieldErrors);
+      setFieldErrors(error as ValidateFieldsError);
      setProcessing(false);
    }
  };

  const submitOnEnter = onEnterCallback(signIn);

-  // get rid of scrollbar
-  useEffect(() => {
-    const originalOverflow = document.body.style.overflow;
-    document.body.style.overflow = 'hidden';
-    return () => {
-      document.body.style.overflow = originalOverflow;
-    };
-  }, []);
-
  return (
    <Box
-      sx={(theme: Theme) => ({
-        display: 'flex',
-        height: '100vh',
-        margin: 'auto',
-        padding: 2,
-        justifyContent: 'center',
-        flexDirection: 'column',
-        maxWidth: theme.breakpoints.values.sm
-      })}
+      display="flex"
+      height="100vh"
+      margin="auto"
+      padding={2}
+      justifyContent="center"
+      flexDirection="column"
+      maxWidth={(theme) => theme.breakpoints.values.sm}
    >
      <Paper
        sx={(theme) => ({
@@ -108,29 +92,23 @@ const SignIn = memo(() => {
          width: '100%'
        })}
      >
-        <Typography sx={{ mb: 1 }} variant="h4">
-          {PROJECT_NAME}
-        </Typography>
+        <Typography variant="h4">{PROJECT_NAME}</Typography>
+
        <LanguageSelector />
-        <Box
-          sx={{
-            mt: 1,
-            display: 'flex',
-            flexDirection: 'column',
-            gap: 1,
-            alignItems: 'center'
-          }}
-        >
+
+        <Box display="flex" flexDirection="column" alignItems="center">
          <ValidatedTextField
-            fieldErrors={fieldErrors || {}}
+            fieldErrors={fieldErrors}
            disabled={processing}
            sx={{
-              width: '32ch'
+              width: 240
            }}
            name="username"
            label={LL.USERNAME(0)}
            value={signInRequest.username}
            onChange={updateLoginRequestValue}
+            margin="normal"
+            variant="outlined"
            slotProps={{
              input: {
                autoCapitalize: 'none',
@@ -139,16 +117,17 @@ const SignIn = memo(() => {
            }}
          />
          <ValidatedPasswordField
-            fieldErrors={fieldErrors || {}}
+            fieldErrors={fieldErrors}
            disabled={processing}
            sx={{
-              width: '32ch'
+              width: 240
            }}
            name="password"
            label={LL.PASSWORD()}
            value={signInRequest.password}
            onChange={updateLoginRequestValue}
            onKeyDown={submitOnEnter}
+            variant="outlined"
          />
        </Box>

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

 export default SignIn;
@@ -4,8 +4,6 @@ import type {
  APIcall,
  Action,
  Activity,
-  CommandItem,
-  Commands,
  CoreData,
  DashboardData,
  DeviceData,
@@ -22,18 +20,19 @@ import type {
  WriteTemperatureSensor
 } from '../app/main/types';

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

 // 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 },
-    ...MSGPACK_CONFIG
+    responseType: 'arraybuffer' // uses msgpack
  });
 export const writeDeviceValue = (data: { id: number; c: string; v: unknown }) =>
  alovaInstance.Post('/rest/writeDeviceValue', data);
@@ -67,13 +66,12 @@ export const callAction = (action: Action) =>

 // SettingsCustomization
 export const readDeviceEntities = (id: number) =>
-  alovaInstance.Get<DeviceEntity[]>('/rest/deviceEntities', {
+  // alovaInstance.Get<DeviceEntity[]>(`/rest/deviceEntities/${id}`, {
+  alovaInstance.Get<DeviceEntity[]>(`/rest/deviceEntities`, {
    params: { id },
-    ...MSGPACK_CONFIG,
-    // @ts-expect-error - exactOptionalPropertyTypes compatibility issue
+    responseType: 'arraybuffer',
    transform(data) {
-      const entities = data as DeviceEntity[];
-      return entities.map((de) => ({
+      return (data as DeviceEntity[]).map((de: DeviceEntity) => ({
        ...de,
        o_m: de.m,
        o_cn: de.cn,
@@ -94,17 +92,16 @@ export const writeDeviceName = (data: { id: number; name: string }) =>
 // SettingsScheduler
 export const readSchedule = () =>
  alovaInstance.Get<ScheduleItem[]>('/rest/schedule', {
-    // @ts-expect-error - exactOptionalPropertyTypes compatibility issue
    transform(data) {
-      const schedule = (data as Schedule).schedule;
-      return schedule.map((si) => ({
+      return (data as Schedule).schedule.map((si: ScheduleItem) => ({
        ...si,
        o_id: si.id,
        o_active: si.active,
        o_deleted: si.deleted,
        o_flags: si.flags,
        o_time: si.time,
-        o_cmd_name: si.cmd_name,
+        o_cmd: si.cmd,
+        o_value: si.value,
        o_name: si.name
      }));
    }
@@ -112,30 +109,11 @@ export const readSchedule = () =>
 export const writeSchedule = (data: Schedule) =>
  alovaInstance.Post('/rest/schedule', data);

-// Commands
-export const readCommands = () =>
-  alovaInstance.Get<CommandItem[]>('/rest/commands', {
-    // @ts-expect-error - exactOptionalPropertyTypes compatibility issue
-    transform(data) {
-      const commands = (data as Commands).commands;
-      return commands.map((ci) => ({
-        ...ci,
-        o_id: ci.id,
-        o_cmd: ci.cmd,
-        o_value: ci.value,
-        o_name: ci.name
-      }));
-    }
-  });
-export const writeCommands = (data: Commands) =>
-  alovaInstance.Post('/rest/commands', data);
-
 // Modules
 export const readModules = () =>
  alovaInstance.Get<ModuleItem[]>('/rest/modules', {
    transform(data) {
-      const modules = (data as Modules).modules;
-      return modules.map((mi) => ({
+      return (data as Modules).modules.map((mi: ModuleItem) => ({
        ...mi,
        o_enabled: mi.enabled,
        o_license: mi.license
@@ -151,10 +129,8 @@ export const writeModules = (data: {
 // CustomEntities
 export const readCustomEntities = () =>
  alovaInstance.Get<EntityItem[]>('/rest/customEntities', {
-    // @ts-expect-error - exactOptionalPropertyTypes compatibility issue
    transform(data) {
-      const entities = (data as Entities).entities;
-      return entities.map((ei) => ({
+      return (data as Entities).entities.map((ei: EntityItem) => ({
        ...ei,
        o_id: ei.id,
        o_ram: ei.ram,
@@ -167,8 +143,7 @@ export const readCustomEntities = () =>
        o_name: ei.name,
        o_writeable: ei.writeable,
        o_value: ei.value,
-        o_deleted: ei.deleted,
-        o_hide: ei.hide
+        o_deleted: ei.deleted
      }));
    }
  });
@@ -4,56 +4,63 @@ import ReactHook from 'alova/react';

 import { unpack } from './unpack';

-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 ACCESS_TOKEN = 'access_token';

 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) {
-    const token = getAccessToken();
-    if (token) {
-      method.config.headers.Authorization = `Bearer ${token}`;
+    if (localStorage.getItem(ACCESS_TOKEN)) {
+      method.config.headers.Authorization =
+        'Bearer ' + localStorage.getItem(ACCESS_TOKEN);
    }
+    // for simulating very slow networks
+    // return new Promise((resolve) => {
+    //   const random = 3000 + Math.random() * 2000;
+    //   setTimeout(resolve, Math.floor(random));
+    // });
  },
+
  responded: {
-    onSuccess: handleResponse
+    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);
+    // }
  }
 });
+
+export const alovaInstanceGH = createAlova({
+  baseURL:
+    process.env.NODE_ENV === 'development'
+      ? '/gh'
+      : 'https://api.github.com/repos/emsesp/EMS-ESP32/releases',
+  statesHook: ReactHook,
+  requestAdapter: xhrRequestAdapter()
+});
@@ -2,14 +2,12 @@ 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: LIST_NETWORKS_TIMEOUT
+    timeout: 20000 // 20 seconds
  });
 export const readNetworkSettings = () =>
  alovaInstance.Get<NetworkSettingsType>('/rest/networkSettings');
@@ -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);

@@ -1,25 +1,45 @@
 import type { LogSettings, SystemStatus } from 'types';

-import { alovaInstance } from './endpoints';
+import { alovaInstance, alovaInstanceGH } from './endpoints';

-// systemStatus - also used in System Monitor to ping the ESP
+// systemStatus - also used to ping in System Monitor for pinging
 export const readSystemStatus = () =>
  alovaInstance.Get<SystemStatus>('/rest/systemStatus');

 // 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');

-const UPLOAD_TIMEOUT = 60000; // 1 minute
+// Get versions from GitHub
+// cache for 10 minutes to stop getting the IP blocked by GitHub
+export const getStableVersion = () =>
+  alovaInstanceGH.Get('latest', {
+    cacheFor: 60 * 10 * 1000,
+    transform(response: { data: { name: string; published_at: string } }) {
+      return {
+        name: response.data.name.substring(1),
+        published_at: response.data.published_at
+      };
+    }
+  });
+export const getDevVersion = () =>
+  alovaInstanceGH.Get('tags/latest', {
+    cacheFor: 60 * 10 * 1000,
+    transform(response: { data: { name: string; published_at: string } }) {
+      return {
+        name: response.data.name.split(/\s+/).splice(-1)[0].substring(1),
+        published_at: response.data.published_at
+      };
+    }
+  });

 export const uploadFile = (file: File) => {
  const formData = new FormData();
  formData.append('file', file);
  return alovaInstance.Post('/rest/uploadFile', formData, {
-    timeout: UPLOAD_TIMEOUT,
-    enableUpload: true
+    timeout: 60000 // override timeout for uploading firmware - 1 minute
  });
 };
@@ -1,37 +1,40 @@
-// @ts-nocheck - Optimized MessagePack unpacking library for EMS-ESP32
-let decoder,
-  src,
-  srcEnd,
-  position = 0,
-  strings = [],
-  stringPosition = 0,
-  currentUnpackr = {},
-  currentStructures,
-  srcString,
-  srcStringStart = 0,
-  srcStringEnd = 0,
-  bundledStrings,
-  referenceMap,
-  dataView;
-const EMPTY_ARRAY = [],
-  currentExtensions = [];
-const defaultOptions = { useRecords: false, mapsAsObjects: true };
+let decoder;
 try {
  decoder = new TextDecoder();
 } catch (error) {}
-class C1Type {}
-const C1 = new C1Type();
+let src;
+let srcEnd;
+let position = 0;
+const EMPTY_ARRAY = [];
+let strings = EMPTY_ARRAY;
+let stringPosition = 0;
+let currentUnpackr = {};
+let currentStructures;
+let srcString;
+let srcStringStart = 0;
+let srcStringEnd = 0;
+let bundledStrings;
+let referenceMap;
+const currentExtensions = [];
+let dataView;
+const defaultOptions = {
+  useRecords: false,
+  mapsAsObjects: true
+};
+export class C1Type {}
+export const C1 = new C1Type();
 C1.name = 'MessagePack 0xC1';
-let sequentialMode = false,
-  inlineObjectReadThreshold = 2,
-  readStruct,
-  onLoadedStructures,
-  onSaveState;
+let sequentialMode = false;
+let inlineObjectReadThreshold = 2;
+let readStruct, onLoadedStructures, onSaveState;
+// no-eval build
 try {
  new Function('');
 } catch (error) {
+  // if eval variants are not supported, do not create inline object readers ever
  inlineObjectReadThreshold = Infinity;
 }
+
 export class Unpackr {
  constructor(options) {
    if (options) {
@@ -47,15 +50,19 @@ export class Unpackr {
      if (options.structures)
        options.structures.sharedLength = options.structures.length;
      else if (options.getStructures) {
-        (options.structures = []).uninitialized = true;
+        (options.structures = []).uninitialized = true; // this is what we use to denote an uninitialized structures
        options.structures.sharedLength = 0;
      }
-      if (options.int64AsNumber) options.int64AsType = 'number';
+      if (options.int64AsNumber) {
+        options.int64AsType = 'number';
+      }
    }
    Object.assign(this, options);
  }
-  unpack(source, options?: { start?: number; end?: number; lazy?: boolean }) {
+
+  unpack(source, options?: any) {
    if (src) {
+      // re-entrant execution, save the state and restore it after we do this unpack
      return saveState(() => {
        clearSource();
        return this
@@ -79,6 +86,9 @@ export class Unpackr {
    strings = EMPTY_ARRAY;
    bundledStrings = null;
    src = source;
+    // this provides cached access to the data view for a buffer if it is getting reused, which is a recommend
+    // technique for getting data from a database where it can be copied into an existing buffer instead of creating
+    // new ones
    try {
      dataView =
        source.dataView ||
@@ -181,10 +191,10 @@ export class Unpackr {
    return this.unpack(source, end);
  }
 }
-function getPosition() {
+export function getPosition() {
  return position;
 }
-function checkedRead(options?: { lazy?: boolean }) {
+export function checkedRead(options: any) {
  try {
    if (!currentUnpackr.trusted && !sequentialMode) {
      const sharedLength = currentStructures.sharedLength || 0;
@@ -254,7 +264,7 @@ function restoreStructures() {
  currentStructures.restoreStructures = null;
 }

-function read() {
+export function read() {
  let token = src[position++];
  if (token < 0xa0) {
    if (token < 0x80) {
@@ -579,7 +589,7 @@ const createSecondByteReader = (firstId, read0) =>
    return structure.read();
  };

-function loadStructures() {
+export function loadStructures() {
  const loadedStructures = saveState(() => {
    // save the state in case getStructures modifies our buffer
    src = null;
@@ -595,8 +605,9 @@ var readFixedString = readStringJS;
 var readString8 = readStringJS;
 var readString16 = readStringJS;
 var readString32 = readStringJS;
-let isNativeAccelerationEnabled = false;
-function setExtractor(extractStrings) {
+export let isNativeAccelerationEnabled = false;
+
+export function setExtractor(extractStrings) {
  isNativeAccelerationEnabled = true;
  readFixedString = readString(1);
  readString8 = readString(2);
@@ -690,7 +701,7 @@ function readStringJS(length) {

  return result;
 }
-function readString(source, start, length) {
+export function readString(source, start, length) {
  const existingSrc = src;
  src = source;
  position = start;
@@ -1054,7 +1065,7 @@ currentExtensions[0x70] = (data) => {

 currentExtensions[0x73] = () => new Set(read());

-const typedArrays = [
+export const typedArrays = [
  'Int8',
  'Uint8',
  'Uint8Clamped',
@@ -1166,20 +1177,44 @@ function saveState(callback) {
  dataView = new DataView(src.buffer, src.byteOffset, src.byteLength);
  return value;
 }
-function clearSource() {
+export function clearSource() {
  src = null;
  referenceMap = null;
  currentStructures = null;
 }

-function addExtension(extension) {
+export function addExtension(extension) {
  if (extension.unpack) currentExtensions[extension.type] = extension.unpack;
  else currentExtensions[extension.type] = extension;
 }

-const mult10 = new Array(147);
+export const mult10 = new Array(147); // this is a table matching binary exponents to the multiplier to determine significant digit rounding
 for (let i = 0; i < 256; i++) {
  mult10[i] = +('1e' + Math.floor(45.15 - i * 0.30103));
 }
-const defaultUnpackr = new Unpackr({ useRecords: false });
+export const Decoder = Unpackr;
+var defaultUnpackr = new Unpackr({ useRecords: false });
 export const unpack = defaultUnpackr.unpack;
+export const unpackMultiple = defaultUnpackr.unpackMultiple;
+export const decode = defaultUnpackr.unpack;
+export const FLOAT32_OPTIONS = {
+  NEVER: 0,
+  ALWAYS: 1,
+  DECIMAL_ROUND: 3,
+  DECIMAL_FIT: 4
+};
+const f32Array = new Float32Array(1);
+const u8Array = new Uint8Array(f32Array.buffer, 0, 4);
+export function roundFloat32(float32Number) {
+  f32Array[0] = float32Number;
+  const multiplier = mult10[((u8Array[3] & 0x7f) << 1) | (u8Array[2] >> 7)];
+  return (
+    ((multiplier * float32Number + (float32Number > 0 ? 0.5 : -0.5)) >> 0) /
+    multiplier
+  );
+}
+export function setReadStruct(updatedReadStruct, loadedStructs, saveState) {
+  readStruct = updatedReadStruct;
+  onLoadedStructures = loadedStructs;
+  onSaveState = saveState;
+}
@@ -1,284 +0,0 @@
-import { useState } from 'react';
-import { useBlocker } from 'react-router';
-
-import AddIcon from '@mui/icons-material/Add';
-import CancelIcon from '@mui/icons-material/Cancel';
-import WarningIcon from '@mui/icons-material/Warning';
-import { Box, Button, Typography } from '@mui/material';
-
-import {
-  Body,
-  Cell,
-  Header,
-  HeaderCell,
-  HeaderRow,
-  Row,
-  Table
-} from '@table-library/react-table-library/table';
-import { useTheme } from '@table-library/react-table-library/theme';
-import { updateState, useRequest } from 'alova/client';
-import {
-  BlockNavigation,
-  ButtonRow,
-  FormLoader,
-  SectionContent,
-  useLayoutTitle
-} from 'components';
-import { toast } from 'components/toast';
-import { useI18nContext } from 'i18n/i18n-react';
-import { useInterval } from 'utils';
-
-import { readCommands, writeCommands } from '../../api/app';
-import CommandsDialog from './CommandsDialog';
-import type { CommandItem, Commands as CommandsType } from './types';
-import { commandItemValidation } from './validators';
-
-const INTERVAL_DELAY = 30000;
-const MIN_ID = -100;
-const MAX_ID = 100;
-
-const DEFAULT_COMMAND_ITEM: Omit<CommandItem, 'id'> = {
-  cmd: '',
-  value: '',
-  name: '',
-  deleted: false
-};
-
-const commandsTheme = {
-  Table: `
-    --data-table-library_grid-template-columns: repeat(1, minmax(100px, 1fr)) repeat(1, minmax(100px, 1fr)) 160px;
-  `,
-  BaseRow: `
-    font-size: 14px;
-    .td {
-      height: 32px;
-    }
-  `,
-  BaseCell: `
-  &:nth-of-type(1) {
-    padding: 8px;
-  }
-  `,
-  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 Commands = () => {
-  const { LL } = useI18nContext();
-  const [numChanges, setNumChanges] = useState<number>(0);
-  const blocker = useBlocker(numChanges !== 0);
-  const [selectedItem, setSelectedItem] = useState<CommandItem>();
-  const [creating, setCreating] = useState<boolean>(false);
-  const [dialogOpen, setDialogOpen] = useState<boolean>(false);
-
-  useLayoutTitle(LL.COMMANDS());
-
-  const {
-    data: commands,
-    send: fetchCommands,
-    error
-  } = useRequest(readCommands, {
-    initialData: []
-  });
-
-  const { send: updateCommands } = useRequest(
-    (data: CommandsType) => writeCommands(data),
-    { immediate: false }
-  );
-
-  const hasChanged = (ci: CommandItem) =>
-    ci.id !== ci.o_id ||
-    (ci.name || '') !== (ci.o_name || '') ||
-    ci.cmd !== ci.o_cmd ||
-    ci.value !== ci.o_value ||
-    ci.deleted !== ci.o_deleted;
-
-  useInterval(() => {
-    if (numChanges === 0) {
-      void fetchCommands();
-    }
-  }, INTERVAL_DELAY);
-
-  const theme = useTheme(commandsTheme);
-
-  const saveCommands = async () => {
-    try {
-      await updateCommands({
-        commands: commands
-          .filter((ci: CommandItem) => !ci.deleted)
-          .map((ci: CommandItem) => ({
-            id: ci.id,
-            cmd: ci.cmd,
-            value: ci.value,
-            name: ci.name
-          }))
-      });
-      toast.success(LL.UPDATED_OF(LL.COMMANDS()));
-    } catch (error: unknown) {
-      const message = error instanceof Error ? error.message : String(error);
-      toast.error(message);
-    } finally {
-      await fetchCommands();
-      setNumChanges(0);
-    }
-  };
-
-  const editItem = (ci: CommandItem) => {
-    setCreating(false);
-    setSelectedItem(ci);
-    setDialogOpen(true);
-    if (ci.o_name === undefined) {
-      ci.o_name = ci.name;
-    }
-  };
-
-  const onDialogClose = () => {
-    setDialogOpen(false);
-  };
-
-  const onDialogCancel = async () => {
-    await fetchCommands().then(() => {
-      setNumChanges(0);
-    });
-  };
-
-  const onDialogSave = (updatedItem: CommandItem) => {
-    setDialogOpen(false);
-    void updateState(readCommands(), (data: CommandItem[]) => {
-      const new_data = creating
-        ? [...data, updatedItem]
-        : data.map((ci) =>
-            ci.id === updatedItem.id ? { ...ci, ...updatedItem } : ci
-          );
-      setNumChanges(new_data.filter((ci) => hasChanged(ci)).length);
-      return new_data;
-    });
-  };
-
-  const addItem = () => {
-    setCreating(true);
-    const newItem: CommandItem = {
-      id: Math.floor(Math.random() * (MAX_ID - MIN_ID) + MIN_ID),
-      ...DEFAULT_COMMAND_ITEM
-    };
-    setSelectedItem(newItem);
-    setDialogOpen(true);
-  };
-
-  const filteredCommands = commands.filter((ci: CommandItem) => !ci.deleted);
-
-  const renderCommands = () => {
-    if (!commands) {
-      return (
-        <FormLoader onRetry={fetchCommands} errorMessage={error?.message || ''} />
-      );
-    }
-
-    return (
-      <Table
-        data={{ nodes: filteredCommands }}
-        theme={theme}
-        layout={{ custom: true }}
-      >
-        {(tableList: CommandItem[]) => (
-          <>
-            <Header>
-              <HeaderRow>
-                <HeaderCell stiff>{LL.COMMAND(0)}</HeaderCell>
-                <HeaderCell stiff>{LL.VALUE(0)}</HeaderCell>
-                <HeaderCell stiff>{LL.NAME(0)}</HeaderCell>
-              </HeaderRow>
-            </Header>
-            <Body>
-              {tableList.map((ci: CommandItem) => (
-                <Row key={ci.id} item={ci} onClick={() => editItem(ci)}>
-                  <Cell>{ci.cmd}</Cell>
-                  <Cell>{ci.value}</Cell>
-                  <Cell>{ci.name}</Cell>
-                </Row>
-              ))}
-            </Body>
-          </>
-        )}
-      </Table>
-    );
-  };
-
-  return (
-    <SectionContent>
-      {blocker ? <BlockNavigation blocker={blocker} /> : null}
-      <Typography sx={{ mb: 2 }} color="warning" variant="body1">
-        {LL.COMMANDS_HELP_1()}.
-      </Typography>
-      {renderCommands()}
-
-      {selectedItem && (
-        <CommandsDialog
-          open={dialogOpen}
-          creating={creating}
-          onClose={onDialogClose}
-          onSave={onDialogSave}
-          selectedItem={selectedItem}
-          validator={commandItemValidation(commands, selectedItem)}
-        />
-      )}
-
-      <Box sx={{ display: 'flex', flexWrap: 'wrap' }}>
-        <Box sx={{ flexGrow: 1 }}>
-          {numChanges !== 0 && (
-            <ButtonRow>
-              <Button
-                startIcon={<CancelIcon />}
-                variant="outlined"
-                onClick={onDialogCancel}
-                color="secondary"
-              >
-                {LL.CANCEL()}
-              </Button>
-              <Button
-                startIcon={<WarningIcon color="warning" />}
-                variant="contained"
-                color="info"
-                onClick={saveCommands}
-              >
-                {LL.APPLY_CHANGES(numChanges)}
-              </Button>
-            </ButtonRow>
-          )}
-        </Box>
-        <Box sx={{ flexWrap: 'nowrap', whiteSpace: 'nowrap' }}>
-          <ButtonRow>
-            <Button
-              startIcon={<AddIcon />}
-              variant="outlined"
-              color="primary"
-              onClick={addItem}
-            >
-              {LL.ADD(0)}
-            </Button>
-          </ButtonRow>
-        </Box>
-      </Box>
-    </SectionContent>
-  );
-};
-
-export default Commands;
@@ -1,206 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import AddIcon from '@mui/icons-material/Add';
-import CancelIcon from '@mui/icons-material/Cancel';
-import DoneIcon from '@mui/icons-material/Done';
-import PlayArrowIcon from '@mui/icons-material/PlayArrow';
-import RemoveIcon from '@mui/icons-material/RemoveCircleOutlined';
-import {
-  Box,
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  TextField
-} from '@mui/material';
-
-import { callAction } from '@/api/app';
-import { dialogStyle } from 'CustomTheme';
-import { useRequest } from 'alova/client';
-import { ValidatedTextField } from 'components';
-import { toast } from 'components/toast';
-import { useI18nContext } from 'i18n/i18n-react';
-import { updateValue } from 'utils';
-import { ValidationError, validate } from 'validators';
-import type Schema from 'validators/schema';
-import type { ValidateFieldsError } from 'validators/schema';
-
-import type { CommandItem } from './types';
-
-interface CommandsDialogProps {
-  open: boolean;
-  creating: boolean;
-  onClose: () => void;
-  onSave: (ci: CommandItem) => void;
-  selectedItem: CommandItem;
-  validator: Schema;
-}
-
-const CommandsDialog = ({
-  open,
-  creating,
-  onClose,
-  onSave,
-  selectedItem,
-  validator
-}: CommandsDialogProps) => {
-  const { LL } = useI18nContext();
-  const [hasChanges, setHasChanges] = useState<boolean>(false);
-  const [editItem, setEditItem] = useState<CommandItem>(selectedItem);
-  const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();
-
-  const updateFormValue = updateValue(
-    setEditItem as unknown as React.Dispatch<
-      React.SetStateAction<Record<string, unknown>>
-    >
-  );
-
-  useEffect(() => {
-    if (open) {
-      setFieldErrors(undefined);
-      setEditItem(selectedItem);
-    }
-  }, [open, selectedItem]);
-
-  const hasChanged = (ci: CommandItem) =>
-    ci.id !== ci.o_id ||
-    (ci.name || '') !== (ci.o_name || '') ||
-    ci.cmd !== ci.o_cmd ||
-    ci.value !== ci.o_value ||
-    ci.deleted !== ci.o_deleted;
-
-  useEffect(() => {
-    setHasChanges(hasChanged(editItem));
-  }, [editItem]);
-
-  const handleSave = async (itemToSave: CommandItem) => {
-    try {
-      setFieldErrors(undefined);
-      await validate(validator, itemToSave);
-      onSave(itemToSave);
-    } catch (error) {
-      setFieldErrors((error as ValidationError).fieldErrors);
-    } finally {
-      // setHasChanges(false);
-    }
-  };
-
-  const save = async () => {
-    await handleSave(editItem);
-  };
-
-  const { send: executeCommand } = useRequest(
-    (id: string) => callAction({ action: 'executeCommand', param: id }),
-    { immediate: false }
-  )
-    .onSuccess(() => {
-      toast.success(LL.COMMAND_EXECUTED());
-    })
-    .onError((error) => {
-      toast.error(String(error.error?.message || 'An error occurred'));
-    });
-
-  const execute = async () => {
-    await executeCommand(editItem.name);
-  };
-
-  const remove = () => {
-    onSave({ ...editItem, deleted: true });
-  };
-
-  const handleClose = (
-    _event: React.SyntheticEvent,
-    reason: 'backdropClick' | 'escapeKeyDown'
-  ) => {
-    if (reason !== 'backdropClick') {
-      onClose();
-    }
-  };
-
-  return (
-    <Dialog sx={dialogStyle} open={open} onClose={handleClose}>
-      <DialogTitle>
-        {creating ? `${LL.ADD(1)} ` : LL.UPDATE() + '/' + LL.RUN()}&nbsp;
-        {LL.COMMAND(0)}
-      </DialogTitle>
-      <DialogContent dividers>
-        <ValidatedTextField
-          fieldErrors={fieldErrors || {}}
-          name="cmd"
-          label={LL.COMMAND(0)}
-          multiline
-          fullWidth
-          value={editItem.cmd}
-          margin="normal"
-          onChange={updateFormValue}
-        />
-        <TextField
-          name="value"
-          label={LL.VALUE(0)}
-          multiline
-          margin="normal"
-          fullWidth
-          value={editItem.value}
-          onChange={updateFormValue}
-        />
-        <ValidatedTextField
-          fieldErrors={fieldErrors || {}}
-          name="name"
-          label={LL.NAME(0)}
-          value={editItem.name}
-          fullWidth
-          margin="normal"
-          onChange={updateFormValue}
-        />
-      </DialogContent>
-
-      <DialogActions>
-        {!creating && (
-          <Box sx={{ flexGrow: 1 }}>
-            <Button
-              startIcon={<RemoveIcon />}
-              variant="outlined"
-              color="warning"
-              onClick={remove}
-            >
-              {LL.REMOVE()}
-            </Button>
-          </Box>
-        )}
-        <Button
-          startIcon={<CancelIcon />}
-          variant="outlined"
-          onClick={onClose}
-          color="secondary"
-        >
-          {LL.CANCEL()}
-        </Button>
-
-        {hasChanges && (
-          <Button
-            startIcon={creating ? <AddIcon /> : <DoneIcon />}
-            variant="outlined"
-            onClick={save}
-            color="primary"
-          >
-            {creating ? LL.ADD(0) : LL.UPDATE()}
-          </Button>
-        )}
-
-        {!creating && !hasChanges && editItem.cmd !== '' && (
-          <Button
-            startIcon={<PlayArrowIcon />}
-            variant="outlined"
-            onClick={execute}
-            color="success"
-          >
-            {LL.RUN()}
-          </Button>
-        )}
-      </DialogActions>
-    </Dialog>
-  );
-};
-
-export default CommandsDialog;
@@ -1,5 +1,6 @@
-import { useState } from 'react';
+import { useCallback, useState } from 'react';
 import { useBlocker } from 'react-router';
+import { toast } from 'react-toastify';

 import AddIcon from '@mui/icons-material/Add';
 import CancelIcon from '@mui/icons-material/Cancel';
@@ -25,7 +26,6 @@ import {
  SectionContent,
  useLayoutTitle
 } from 'components';
-import { toast } from 'components/toast';
 import { useI18nContext } from 'i18n/i18n-react';
 import { useInterval } from 'utils';

@@ -35,10 +35,6 @@ 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);
@@ -68,7 +64,7 @@ const CustomEntities = () => {
    { immediate: false }
  );

-  const hasEntityChanged = (ei: EntityItem) => {
+  function hasEntityChanged(ei: EntityItem) {
    return (
      ei.id !== ei.o_id ||
      ei.ram !== ei.o_ram ||
@@ -80,11 +76,10 @@ const CustomEntities = () => {
      ei.factor !== ei.o_factor ||
      ei.value_type !== ei.o_value_type ||
      ei.writeable !== ei.o_writeable ||
-      ei.hide !== ei.o_hide ||
      ei.deleted !== ei.o_deleted ||
      (ei.value || '') !== (ei.o_value || '')
    );
-  };
+  }

  const entity_theme = useTheme({
    Table: `
@@ -141,8 +136,8 @@ const CustomEntities = () => {
  const saveEntities = async () => {
    await writeEntities({
      entities: entities
-        .filter((ei: EntityItem) => !ei.deleted)
-        .map((condensed_ei: EntityItem) => ({
+        .filter((ei) => !ei.deleted)
+        .map((condensed_ei) => ({
          id: condensed_ei.id,
          ram: condensed_ei.ram,
          name: condensed_ei.name,
@@ -152,7 +147,6 @@ const CustomEntities = () => {
          factor: condensed_ei.factor,
          uom: condensed_ei.uom,
          writeable: condensed_ei.writeable,
-          hide: condensed_ei.hide,
          value_type: condensed_ei.value_type,
          value: condensed_ei.value
        }))
@@ -169,11 +163,11 @@ const CustomEntities = () => {
      });
  };

-  const editEntityItem = (ei: EntityItem) => {
+  const editEntityItem = useCallback((ei: EntityItem) => {
    setCreating(false);
    setSelectedEntityItem(ei);
    setDialogOpen(true);
-  };
+  }, []);

  const onDialogClose = () => {
    setDialogOpen(false);
@@ -204,7 +198,7 @@ const CustomEntities = () => {
  const onDialogDup = (item: EntityItem) => {
    setCreating(true);
    setSelectedEntityItem({
-      id: Math.floor(Math.random() * (MAX_ID - MIN_ID) + MIN_ID),
+      id: Math.floor(Math.random() * (Math.floor(200) - 100) + 100),
      name: item.name + '_',
      ram: item.ram,
      device_id: item.device_id,
@@ -215,7 +209,6 @@ const CustomEntities = () => {
      value_type: item.value_type,
      writeable: item.writeable,
      deleted: false,
-      hide: item.hide,
      value: item.value
    });
    setDialogOpen(true);
@@ -224,7 +217,7 @@ const CustomEntities = () => {
  const addEntityItem = () => {
    setCreating(true);
    setSelectedEntityItem({
-      id: Math.floor(Math.random() * (MAX_ID - MIN_ID) + MIN_ID),
+      id: Math.floor(Math.random() * (Math.floor(200) - 100) + 100),
      name: '',
      ram: 0,
      device_id: '0',
@@ -235,41 +228,35 @@ const CustomEntities = () => {
      value_type: 0,
      writeable: false,
      deleted: false,
-      hide: false,
      value: ''
    });
    setDialogOpen(true);
  };

-  const formatValue = (value: unknown, uom: number) => {
+  function formatValue(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]);
+  }

-  const showHex = (value: number, digit: number) => {
-    return `0x${value.toString(16).toUpperCase().padStart(digit, '0')}`;
-  };
-
-  const filteredAndSortedEntities =
-    entities
-      ?.filter((ei: EntityItem) => !ei.deleted)
-      .sort((a: EntityItem, b: EntityItem) => a.name.localeCompare(b.name)) ?? [];
+  function showHex(value: number, digit: number) {
+    return '0x' + value.toString(16).toUpperCase().padStart(digit, '0');
+  }

  const renderEntity = () => {
    if (!entities) {
-      return (
-        <FormLoader onRetry={fetchEntities} errorMessage={error?.message || ''} />
-      );
+      return <FormLoader onRetry={fetchEntities} errorMessage={error?.message} />;
    }

    return (
      <Table
        data={{
-          nodes: filteredAndSortedEntities
+          nodes: entities
+            .filter((ei) => !ei.deleted)
+            .sort((a, b) => a.name.localeCompare(b.name))
        }}
        theme={entity_theme}
        layout={{ custom: true }}
@@ -292,21 +279,16 @@ const CustomEntities = () => {
                  <Cell>
                    {ei.name}&nbsp;
                    {ei.writeable && (
-                      <EditOutlinedIcon
-                        color="primary"
-                        sx={{ fontSize: ICON_SIZE }}
-                      />
+                      <EditOutlinedIcon color="primary" sx={{ fontSize: 12 }} />
                    )}
                  </Cell>
-                  <Cell>{ei.ram > 0 ? '' : showHex(ei.device_id as number, 2)}</Cell>
-                  <Cell>{ei.ram > 0 ? '' : showHex(ei.type_id as number, 3)}</Cell>
-                  <Cell>{ei.ram > 0 ? '' : ei.offset}</Cell>
                  <Cell>
-                    {ei.ram === 1
-                      ? 'RAM'
-                      : ei.ram === 2
-                        ? 'NVS'
-                        : DeviceValueTypeNames[ei.value_type]}
+                    {ei.ram === 1 ? '' : showHex(ei.device_id as number, 2)}
+                  </Cell>
+                  <Cell>{ei.ram === 1 ? '' : showHex(ei.type_id as number, 3)}</Cell>
+                  <Cell>{ei.ram === 1 ? '' : ei.offset}</Cell>
+                  <Cell>
+                    {ei.ram === 1 ? 'RAM' : DeviceValueTypeNames[ei.value_type]}
                  </Cell>
                  <Cell>{formatValue(ei.value, ei.uom)}</Cell>
                </Row>
@@ -321,9 +303,9 @@ const CustomEntities = () => {
  return (
    <SectionContent>
      {blocker ? <BlockNavigation blocker={blocker} /> : null}
-      <Typography sx={{ mb: 2 }} color="warning" variant="body1">
-        {LL.ENTITIES_HELP_1()}.
-      </Typography>
+      <Box mb={2} color="warning.main">
+        <Typography variant="body1">{LL.ENTITIES_HELP_1()}.</Typography>
+      </Box>

      {renderEntity()}

@@ -339,8 +321,8 @@ const CustomEntities = () => {
        />
      )}

-      <Box sx={{ mt: 2, display: 'flex', flexWrap: 'wrap' }}>
-        <Box sx={{ flexGrow: 1 }}>
+      <Box mt={1} display="flex" flexWrap="wrap">
+        <Box flexGrow={1}>
          {numChanges > 0 && (
            <ButtonRow>
              <Button
@@ -362,7 +344,7 @@ const CustomEntities = () => {
            </ButtonRow>
          )}
        </Box>
-        <Box sx={{ flexWrap: 'nowrap', whiteSpace: 'nowrap' }}>
+        <Box flexWrap="nowrap" whiteSpace="nowrap">
          <Button
            startIcon={<AddIcon />}
            variant="outlined"
@@ -2,12 +2,8 @@ import { useEffect, useState } from 'react';

 import AddIcon from '@mui/icons-material/Add';
 import CancelIcon from '@mui/icons-material/Cancel';
-import CommentsDisabledOutlinedIcon from '@mui/icons-material/CommentsDisabledOutlined';
 import DoneIcon from '@mui/icons-material/Done';
-import EditOffOutlinedIcon from '@mui/icons-material/EditOffOutlined';
-import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
-import InsertCommentOutlinedIcon from '@mui/icons-material/InsertCommentOutlined';
-import RemoveIcon from '@mui/icons-material/RemoveCircleOutlined';
+import RemoveIcon from '@mui/icons-material/RemoveCircleOutline';
 import {
  Box,
  Button,
@@ -16,36 +12,23 @@ import {
  DialogActions,
  DialogContent,
  DialogTitle,
-  Grid,
+  Grid2 as Grid,
  InputAdornment,
  MenuItem,
  TextField
 } from '@mui/material';

 import { dialogStyle } from 'CustomTheme';
+import type Schema from 'async-validator';
+import type { ValidateFieldsError } from 'async-validator';
 import { BlockFormControlLabel, ValidatedTextField } from 'components';
 import { useI18nContext } from 'i18n/i18n-react';
 import { numberValue, updateValue } from 'utils';
-import { ValidationError, validate } from 'validators';
-import type Schema from 'validators/schema';
-import type { ValidateFieldsError } from 'validators/schema';
+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;
@@ -68,43 +51,26 @@ const CustomEntitiesDialog = ({
  const { LL } = useI18nContext();
  const [editItem, setEditItem] = useState<EntityItem>(selectedItem);
  const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();
-  const updateFormValue = updateValue(
-    setEditItem as unknown as React.Dispatch<
-      React.SetStateAction<Record<string, unknown>>
-    >
-  );
+  const updateFormValue = updateValue(setEditItem);

  useEffect(() => {
    if (open) {
      setFieldErrors(undefined);
-      // 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);
+      // convert to hex strings straight away
      setEditItem({
        ...selectedItem,
-        device_id: deviceIdHex,
-        type_id: typeIdHex,
-        factor: factorValue
+        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
      });
    }
  }, [open, selectedItem]);

-  const handleClose = (
-    _event: React.SyntheticEvent,
-    reason: 'backdropClick' | 'escapeKeyDown'
-  ) => {
+  const handleClose = (_event, reason: 'backdropClick' | 'escapeKeyDown') => {
    if (reason !== 'backdropClick') {
      onClose();
    }
@@ -114,52 +80,46 @@ const CustomEntitiesDialog = ({
    try {
      setFieldErrors(undefined);
      await validate(validator, editItem);
-
-      // 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.device_id === 'string') {
+        editItem.device_id = parseInt(editItem.device_id, 16);
      }
-      if (typeof processedItem.type_id === 'string') {
-        processedItem.type_id = Number.parseInt(processedItem.type_id, 16);
+      if (typeof editItem.type_id === 'string') {
+        editItem.type_id = parseInt(editItem.type_id, 16);
      }
      if (
-        processedItem.value_type === DeviceValueType.BOOL &&
-        typeof processedItem.factor === 'string'
+        editItem.value_type === DeviceValueType.BOOL &&
+        typeof editItem.factor === 'string'
      ) {
-        processedItem.factor = Number.parseInt(processedItem.factor, 16);
+        editItem.factor = parseInt(editItem.factor, 16);
      }
-      onSave(processedItem);
+      onSave(editItem);
    } catch (error) {
-      setFieldErrors((error as ValidationError).fieldErrors);
+      setFieldErrors(error as ValidateFieldsError);
    }
  };

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

  const dup = () => {
    onDup(editItem);
  };

-  const uomMenuItems = DeviceValueUOM_s.map((val, i) => (
-    <MenuItem key={val} value={i}>
-      {val}
-    </MenuItem>
-  ));
-
  return (
    <Dialog sx={dialogStyle} open={open} onClose={handleClose}>
      <DialogTitle>
        {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
-              fieldErrors={fieldErrors || {}}
+              fieldErrors={fieldErrors}
              name="name"
              label={LL.NAME(0)}
              value={editItem.name}
@@ -168,20 +128,6 @@ const CustomEntitiesDialog = ({
              onChange={updateFormValue}
            />
          </Grid>
-          <Grid sx={{ mt: 3 }}>
-            <BlockFormControlLabel
-              control={
-                <Checkbox
-                  icon={<InsertCommentOutlinedIcon htmlColor="white" />}
-                  checkedIcon={<CommentsDisabledOutlinedIcon color="primary" />}
-                  checked={editItem.hide}
-                  onChange={updateFormValue}
-                  name="hide"
-                />
-              }
-              label="API/MQTT"
-            />
-          </Grid>
          <Grid>
            <TextField
              name="ram"
@@ -195,17 +141,16 @@ const CustomEntitiesDialog = ({
            >
              <MenuItem value={0}>EMS-{LL.VALUE(1)}</MenuItem>
              <MenuItem value={1}>RAM-{LL.VALUE(1)}</MenuItem>
-              <MenuItem value={2}>NVS-{LL.VALUE(1)}</MenuItem>
            </TextField>
          </Grid>
-          {editItem.ram > 0 && (
+          {editItem.ram === 1 && (
            <>
              <Grid>
                <TextField
                  name="value"
                  label={LL.DEFAULT(0) + ' ' + LL.VALUE(0)}
                  type="string"
-                  value={editItem.value}
+                  value={editItem.value as string}
                  variant="outlined"
                  onChange={updateFormValue}
                  fullWidth
@@ -221,19 +166,21 @@ const CustomEntitiesDialog = ({
                  onChange={updateFormValue}
                  select
                >
-                  {uomMenuItems}
+                  {DeviceValueUOM_s.map((val, i) => (
+                    <MenuItem key={val} value={i}>
+                      {val}
+                    </MenuItem>
+                  ))}
                </TextField>
              </Grid>
            </>
          )}
          {editItem.ram === 0 && (
            <>
-              <Grid sx={{ mt: 3 }}>
+              <Grid mt={3} size={9}>
                <BlockFormControlLabel
                  control={
                    <Checkbox
-                      icon={<EditOffOutlinedIcon color="primary" />}
-                      checkedIcon={<EditOutlinedIcon htmlColor="white" />}
                      checked={editItem.writeable}
                      onChange={updateFormValue}
                      name="writeable"
@@ -244,13 +191,13 @@ const CustomEntitiesDialog = ({
              </Grid>
              <Grid>
                <ValidatedTextField
-                  fieldErrors={fieldErrors || {}}
+                  fieldErrors={fieldErrors}
                  name="device_id"
                  label={LL.ID_OF(LL.DEVICE())}
                  margin="normal"
                  sx={{ width: '11ch' }}
                  type="string"
-                  value={editItem.device_id}
+                  value={editItem.device_id as string}
                  onChange={updateFormValue}
                  slotProps={{
                    input: {
@@ -264,13 +211,13 @@ const CustomEntitiesDialog = ({
              </Grid>
              <Grid>
                <ValidatedTextField
-                  fieldErrors={fieldErrors || {}}
+                  fieldErrors={fieldErrors}
                  name="type_id"
                  label={LL.ID_OF(LL.TYPE(1))}
                  margin="normal"
                  sx={{ width: '11ch' }}
                  type="string"
-                  value={editItem.type_id}
+                  value={editItem.type_id as string}
                  onChange={updateFormValue}
                  slotProps={{
                    input: {
@@ -284,7 +231,7 @@ const CustomEntitiesDialog = ({
              </Grid>
              <Grid>
                <ValidatedTextField
-                  fieldErrors={fieldErrors || {}}
+                  fieldErrors={fieldErrors}
                  name="offset"
                  label={LL.OFFSET()}
                  margin="normal"
@@ -305,11 +252,33 @@ const CustomEntitiesDialog = ({
                  margin="normal"
                  select
                >
-                  {VALUE_TYPE_OPTIONS.map((valueType) => (
-                    <MenuItem key={valueType} value={valueType}>
-                      {DeviceValueTypeNames[valueType]}
-                    </MenuItem>
-                  ))}
+                  <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>
                </TextField>
              </Grid>

@@ -341,7 +310,11 @@ const CustomEntitiesDialog = ({
                        onChange={updateFormValue}
                        select
                      >
-                        {uomMenuItems}
+                        {DeviceValueUOM_s.map((val, i) => (
+                          <MenuItem key={val} value={i}>
+                            {val}
+                          </MenuItem>
+                        ))}
                      </TextField>
                    </Grid>
                  </>
@@ -350,7 +323,7 @@ const CustomEntitiesDialog = ({
                editItem.device_id !== '0' && (
                  <Grid>
                    <ValidatedTextField
-                      fieldErrors={fieldErrors || {}}
+                      fieldErrors={fieldErrors}
                      name="factor"
                      label={LL.BYTES()}
                      value={numberValue(editItem.factor as number)}
@@ -368,10 +341,10 @@ const CustomEntitiesDialog = ({
              {editItem.value_type === DeviceValueType.BOOL && (
                <Grid>
                  <ValidatedTextField
-                    fieldErrors={fieldErrors || {}}
+                    fieldErrors={fieldErrors}
                    name="factor"
                    label={LL.BITMASK()}
-                    value={editItem.factor}
+                    value={editItem.factor as string}
                    sx={{ width: '11ch' }}
                    variant="outlined"
                    onChange={updateFormValue}
@@ -394,7 +367,7 @@ const CustomEntitiesDialog = ({
      </DialogContent>
      <DialogActions>
        {!creating && (
-          <Box sx={{ flexGrow: 1 }}>
+          <Box flexGrow={1}>
            <Button
              startIcon={<RemoveIcon />}
              variant="outlined"
@@ -1,5 +1,6 @@
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useBlocker, useLocation } from 'react-router';
+import { toast } from 'react-toastify';

 import CancelIcon from '@mui/icons-material/Cancel';
 import EditIcon from '@mui/icons-material/Edit';
@@ -15,7 +16,7 @@ import {
  DialogActions,
  DialogContent,
  DialogTitle,
-  Grid,
+  Grid2 as Grid,
  InputAdornment,
  Link,
  MenuItem,
@@ -45,7 +46,6 @@ import {
  SectionContent,
  useLayoutTitle
 } from 'components';
-import { toast } from 'components/toast';
 import { useI18nContext } from 'i18n/i18n-react';

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

-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}` : ''}`;
-};
+export const APIURL = window.location.origin + '/api/';

 const Customizations = () => {
  const { LL } = useI18nContext();
@@ -111,14 +94,13 @@ const Customizations = () => {
  const [selectedDeviceTypeNameURL, setSelectedDeviceTypeNameURL] =
    useState<string>(''); // needed for API URL
  const [selectedDeviceName, setSelectedDeviceName] = useState<string>('');
-  const [selectedDeviceBrand, setSelectedDeviceBrand] = useState<string>('');

  const { send: sendResetCustomizations } = useRequest(resetCustomizations(), {
    immediate: false
  });

  const { send: sendDeviceName } = useRequest(
-    (data: { id: number; name: string; brand: string }) => writeDeviceName(data),
+    (data: { id: number; name: string }) => writeDeviceName(data),
    {
      immediate: false
    }
@@ -143,22 +125,13 @@ const Customizations = () => {

  const setOriginalSettings = (data: DeviceEntity[]) => {
    setDeviceEntities(
-      data.map((de) => {
-        const result: DeviceEntity = {
-          ...de,
-          o_m: de.m
-        };
-        if (de.cn !== undefined) {
-          result.o_cn = de.cn;
-        }
-        if (de.mi !== undefined) {
-          result.o_mi = de.mi;
-        }
-        if (de.ma !== undefined) {
-          result.o_ma = de.ma;
-        }
-        return result;
-      })
+      data.map((de) => ({
+        ...de,
+        o_m: de.m,
+        o_cn: de.cn,
+        o_mi: de.mi,
+        o_ma: de.ma
+      }))
    );
  };

@@ -247,8 +220,19 @@ const Customizations = () => {

  useEffect(() => {
    if (deviceEntities.length) {
-      const changedEntities = deviceEntities.filter((de) => hasEntityChanged(de));
-      setNumChanges(changedEntities.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
+      );
    }
  }, [deviceEntities]);

@@ -260,12 +244,8 @@ const Customizations = () => {
        setSelectedDevice(-1);
        setSelectedDeviceTypeNameURL('');
      } else {
-        const device = devices.devices[index];
-        if (device) {
-          setSelectedDeviceTypeNameURL(device.url || '');
-          setSelectedDeviceName(device.n);
-          setSelectedDeviceBrand(device.b);
-        }
+        setSelectedDeviceTypeNameURL(devices.devices[index].url || '');
+        setSelectedDeviceName(devices.devices[index].n);
        setNumChanges(0);
        setRestartNeeded(false);
      }
@@ -283,23 +263,18 @@ const Customizations = () => {
    return value as string;
  }

-  const isCommand = (de: DeviceEntity) => {
-    return de.n && de.n[0] === '!';
-  };
-
-  const formatName = (de: DeviceEntity, withShortname: boolean) => {
-    let name: string;
-    if (isCommand(de)) {
-      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;
-  };
+  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 getMaskNumber = (newMask: string[]) => {
    let new_mask = 0;
@@ -331,20 +306,27 @@ const Customizations = () => {

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

  const maskDisabled = (set: boolean) => {
-    setDeviceEntities((prev) =>
-      prev.map((de) => {
+    setDeviceEntities(
+      deviceEntities.map(function (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
+            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 {
+          return de;
        }
-        return de;
      })
    );
  };
@@ -357,7 +339,6 @@ const Customizations = () => {
      toast.error((error as Error).message);
    } finally {
      setConfirmReset(false);
-      setRestarting(true);
    }
  };

@@ -367,10 +348,9 @@ const Customizations = () => {

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

@@ -379,7 +359,7 @@ const Customizations = () => {
    updateDeviceEntity(updatedItem);
  };

-  const editDeviceEntity = (de: DeviceEntity) => {
+  const editDeviceEntity = useCallback((de: DeviceEntity) => {
    if (de.n === undefined || (de.n && de.n[0] === '!')) {
      return;
    }
@@ -390,54 +370,50 @@ const Customizations = () => {

    setSelectedDeviceEntity(de);
    setDialogOpen(true);
-  };
+  }, []);

  const saveCustomization = async () => {
-    if (!devices || !deviceEntities || selectedDevice === -1) {
-      return;
-    }
+    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 : '')
+        );

-    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 > 2000) {
+        toast.warning(LL.CUSTOMIZATIONS_FULL());
+        return;
+      }

-    // 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) => {
+      await sendCustomizationEntities({
+        id: selectedDevice,
+        entity_ids: masked_entities
+      }).catch((error: Error) => {
        if (error.message === 'Reboot required') {
          setRestartNeeded(true);
        } else {
          toast.error(error.message);
        }
-      })
-      .finally(() => {
-        setOriginalSettings(deviceEntities);
      });
+      setOriginalSettings(deviceEntities);
+    }
  };

  const renameDevice = async () => {
-    await sendDeviceName({
-      id: selectedDevice,
-      name: selectedDeviceName,
-      brand: selectedDeviceBrand
-    })
+    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);
@@ -447,31 +423,20 @@ const Customizations = () => {

  const renderDeviceList = () => (
    <>
-      <Typography sx={{ mb: 1 }} color="warning" variant="body1">
-        {LL.CUSTOMIZATIONS_HELP_1()}.
-      </Typography>
-      <Box sx={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: 2 }}>
+      <Box mb={1} color="warning.main">
+        <Typography variant="body1">{LL.CUSTOMIZATIONS_HELP_1()}.</Typography>
+      </Box>
+      <Box display="flex" flexWrap="wrap" alignItems="center" gap={2}>
        {rename ? (
-          <>
-            <TextField
-              name="device"
-              label={LL.EMS_DEVICE()}
-              style={{ minWidth: '48%' }}
-              variant="outlined"
-              value={selectedDeviceName}
-              onChange={(e) => setSelectedDeviceName(e.target.value)}
-              margin="normal"
-            />
-            <TextField
-              name="brand"
-              label={LL.BRAND()}
-              style={{ minWidth: '48%' }}
-              variant="outlined"
-              value={selectedDeviceBrand}
-              onChange={(e) => setSelectedDeviceBrand(e.target.value)}
-              margin="normal"
-            />
-          </>
+          <TextField
+            name="device"
+            label={LL.EMS_DEVICE()}
+            fullWidth
+            variant="outlined"
+            value={selectedDeviceName}
+            onChange={(e) => setSelectedDeviceName(e.target.value)}
+            margin="normal"
+          />
        ) : (
          <TextField
            name="device"
@@ -489,8 +454,7 @@ const Customizations = () => {
            </MenuItem>
            {devices.devices.map(
              (device: Device) =>
-                device.id < 90 &&
-                device.e !== 0 && (
+                device.id < 90 && (
                  <MenuItem key={device.id} value={device.id}>
                    {device.n}&nbsp;({device.tn})
                  </MenuItem>
@@ -518,56 +482,50 @@ const Customizations = () => {
              </Button>
            </>
          ) : (
-            <>
-              <Button
-                startIcon={<EditIcon />}
-                variant="outlined"
-                onClick={() => setRename(true)}
-              >
-                {LL.RENAME()}
-              </Button>
-              <Button
-                startIcon={<SettingsBackupRestoreIcon />}
-                variant="outlined"
-                color="error"
-                onClick={() => setConfirmReset(true)}
-              >
-                {LL.REMOVE_ALL()}
-              </Button>
-            </>
+            <Button
+              startIcon={<EditIcon />}
+              variant="outlined"
+              onClick={() => setRename(true)}
+            >
+              {LL.RENAME()}
+            </Button>
          ))}
      </Box>
    </>
  );

-  const filteredEntities = deviceEntities.filter((de) => filter_entity(de));
-
  const renderDeviceData = () => {
+    const shown_data = deviceEntities.filter((de) => filter_entity(de));
+
    return (
      <>
-        <Typography sx={{ mt: 1, mb: 1 }} color="warning" variant="body2">
-          <OptionIcon type="favorite" isSet={true} />={LL.CUSTOMIZATIONS_HELP_2()}
-          &nbsp;&nbsp;
-          <OptionIcon type="readonly" isSet={true} />={LL.CUSTOMIZATIONS_HELP_3()}
-          &nbsp;&nbsp;
-          <OptionIcon type="api_mqtt_exclude" isSet={true} />=
-          {LL.CUSTOMIZATIONS_HELP_4()}&nbsp;&nbsp;
-          <OptionIcon type="web_exclude" isSet={true} />={LL.CUSTOMIZATIONS_HELP_5()}
-          &nbsp;&nbsp;
-          <OptionIcon type="deleted" isSet={true} />={LL.CUSTOMIZATIONS_HELP_6()}
-        </Typography>
+        <Box color="warning.main">
+          <Typography variant="body2" mt={1}>
+            <OptionIcon type="favorite" isSet={true} />={LL.CUSTOMIZATIONS_HELP_2()}
+            &nbsp;&nbsp;
+            <OptionIcon type="readonly" isSet={true} />={LL.CUSTOMIZATIONS_HELP_3()}
+            &nbsp;&nbsp;
+            <OptionIcon type="api_mqtt_exclude" isSet={true} />=
+            {LL.CUSTOMIZATIONS_HELP_4()}&nbsp;&nbsp;
+            <OptionIcon type="web_exclude" isSet={true} />=
+            {LL.CUSTOMIZATIONS_HELP_5()}&nbsp;&nbsp;
+            <OptionIcon type="deleted" isSet={true} />={LL.CUSTOMIZATIONS_HELP_6()}
+          </Typography>
+        </Box>
        <Grid
          container
+          mb={1}
+          mt={0}
          spacing={2}
          direction="row"
-          sx={{ mb: 1, mt: 0, justifyContent: 'flex-start', alignItems: 'center' }}
+          justifyContent="flex-start"
+          alignItems="center"
        >
          <Grid>
            <TextField
              size="small"
              variant="outlined"
              placeholder={LL.SEARCH()}
-              aria-label={LL.SEARCH()}
              onChange={(event) => {
                setSearch(event.target.value);
              }}
@@ -587,7 +545,7 @@ const Customizations = () => {
              size="small"
              color="secondary"
              value={getMaskString(selectedFilters)}
-              onChange={(_, mask: string[]) => {
+              onChange={(event, mask: string[]) => {
                setSelectedFilters(getMaskNumber(mask));
              }}
            >
@@ -636,13 +594,13 @@ const Customizations = () => {
          </Grid>
          <Grid>
            <Typography variant="subtitle2" color="grey">
-              {LL.SHOWING()}&nbsp;{filteredEntities.length}/{deviceEntities.length}
+              {LL.SHOWING()}&nbsp;{shown_data.length}/{deviceEntities.length}
              &nbsp;{LL.ENTITIES(deviceEntities.length)}
            </Typography>
          </Grid>
        </Grid>
        <Table
-          data={{ nodes: filteredEntities }}
+          data={{ nodes: shown_data }}
          theme={entities_theme}
          layout={{ custom: true }}
        >
@@ -664,27 +622,14 @@ const Customizations = () => {
                      <EntityMaskToggle onUpdate={updateDeviceEntity} de={de} />
                    </Cell>
                    <Cell>
-                      <span
-                        style={{
-                          color:
-                            de.v === undefined && !isCommand(de) ? 'grey' : 'inherit'
-                        }}
+                      {formatName(de, false)}&nbsp;(
+                      <Link
+                        target="_blank"
+                        href={APIURL + selectedDeviceTypeNameURL + '/' + de.id}
                      >
-                        {formatName(de, false)}&nbsp;(
-                        <Link
-                          style={{
-                            color:
-                              de.v === undefined && !isCommand(de)
-                                ? 'grey'
-                                : 'primary'
-                          }}
-                          target="_blank"
-                          href={APIURL + selectedDeviceTypeNameURL + '/' + de.id}
-                        >
-                          {de.id}
-                        </Link>
-                        )
-                      </span>
+                        {de.id}
+                      </Link>
+                      )
                    </Cell>
                    <Cell>
                      {!(de.m & DeviceEntityMask.DV_READONLY) && formatValue(de.mi)}
@@ -709,7 +654,7 @@ const Customizations = () => {
      open={confirmReset}
      onClose={() => setConfirmReset(false)}
    >
-      <DialogTitle>{LL.REMOVE_ALL()}</DialogTitle>
+      <DialogTitle>{LL.RESET(1)}</DialogTitle>
      <DialogContent dividers>{LL.CUSTOMIZATIONS_RESET()}</DialogContent>
      <DialogActions>
        <Button
@@ -726,7 +671,7 @@ const Customizations = () => {
          onClick={resetCustomization}
          color="error"
        >
-          {LL.REMOVE_ALL()}
+          {LL.RESET(0)}
        </Button>
      </DialogActions>
    </Dialog>
@@ -737,9 +682,8 @@ const Customizations = () => {
      {devices && renderDeviceList()}
      {selectedDevice !== -1 && !rename && renderDeviceData()}
      {restartNeeded ? (
-        <MessageBox level="warning" message={LL.RESTART_TEXT(0)}>
+        <MessageBox my={2} level="warning" message={LL.RESTART_TEXT(0)}>
          <Button
-            sx={{ ml: 2 }}
            startIcon={<PowerSettingsNewIcon />}
            variant="contained"
            color="error"
@@ -749,19 +693,15 @@ const Customizations = () => {
          </Button>
        </MessageBox>
      ) : (
-        <Box sx={{ display: 'flex', flexWrap: 'wrap' }}>
-          <Box sx={{ flexGrow: 1 }}>
+        <Box display="flex" flexWrap="wrap">
+          <Box flexGrow={1}>
            {numChanges !== 0 && (
              <ButtonRow>
                <Button
                  startIcon={<CancelIcon />}
                  variant="outlined"
                  color="secondary"
-                  onClick={() => {
-                    if (devices) {
-                      void sendDeviceEntities(selectedDevice);
-                    }
-                  }}
+                  onClick={() => devices && sendDeviceEntities(selectedDevice)}
                >
                  {LL.CANCEL()}
                </Button>
@@ -776,18 +716,28 @@ const Customizations = () => {
              </ButtonRow>
            )}
          </Box>
+          {!rename && (
+            <ButtonRow mt={1}>
+              <Button
+                startIcon={<SettingsBackupRestoreIcon />}
+                variant="outlined"
+                color="error"
+                onClick={() => setConfirmReset(true)}
+              >
+                {LL.RESET(0)}
+              </Button>
+            </ButtonRow>
+          )}
        </Box>
      )}
      {renderResetDialog()}
    </>
  );

-  return restarting ? (
-    <SystemMonitor />
-  ) : (
+  return (
    <SectionContent>
      {blocker ? <BlockNavigation blocker={blocker} /> : null}
-      {renderContent()}
+      {restarting ? <SystemMonitor /> : renderContent()}
      {selectedDeviceEntity && (
        <SettingsCustomizationsDialog
          open={dialogOpen}
@@ -1,4 +1,4 @@
-import { memo, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';

 import CancelIcon from '@mui/icons-material/Cancel';
 import CloseIcon from '@mui/icons-material/Close';
@@ -10,7 +10,7 @@ import {
  DialogActions,
  DialogContent,
  DialogTitle,
-  Grid,
+  Grid2 as Grid,
  TextField,
  Typography
 } from '@mui/material';
@@ -30,23 +30,6 @@ 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">
-      {label}:&nbsp;
-    </Typography>
-    <Typography variant="body2">{value}</Typography>
-  </Grid>
-));
-LabelValue.displayName = 'LabelValue';
-
-const ICON_SIZE = 16;
-
 const CustomizationsDialog = ({
  open,
  onClose,
@@ -57,11 +40,7 @@ const CustomizationsDialog = ({
  const [editItem, setEditItem] = useState<DeviceEntity>(selectedItem);
  const [error, setError] = useState<boolean>(false);

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

  const isWriteableNumber =
    typeof editItem.v === 'number' &&
@@ -75,10 +54,7 @@ const CustomizationsDialog = ({
    }
  }, [open, selectedItem]);

-  const handleClose = (
-    _event: React.SyntheticEvent,
-    reason: 'backdropClick' | 'escapeKeyDown'
-  ) => {
+  const handleClose = (_event, reason: 'backdropClick' | 'escapeKeyDown') => {
    if (reason !== 'backdropClick') {
      onClose();
    }
@@ -89,7 +65,7 @@ const CustomizationsDialog = ({
      isWriteableNumber &&
      editItem.mi &&
      editItem.ma &&
-      editItem.mi > editItem.ma
+      editItem.mi > editItem?.ma
    ) {
      setError(true);
    } else {
@@ -98,33 +74,43 @@ const CustomizationsDialog = ({
  };

  const updateDeviceEntity = (updatedItem: DeviceEntity) => {
-    setEditItem((prev) => ({ ...prev, m: updatedItem.m }));
+    setEditItem({ ...editItem, m: updatedItem.m });
  };

  return (
    <Dialog sx={dialogStyle} open={open} onClose={handleClose}>
-      <DialogTitle>{`${LL.EDIT()} ${LL.ENTITY()}`}</DialogTitle>
+      <DialogTitle>{LL.EDIT() + ' ' + LL.ENTITY()}</DialogTitle>
      <DialogContent dividers>
-        <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={
-            editItem.w ? (
-              <DoneIcon color="success" sx={{ fontSize: ICON_SIZE }} />
-            ) : (
-              <CloseIcon color="error" sx={{ fontSize: ICON_SIZE }} />
-            )
-          }
-        />
+        <Grid container>
+          <Typography variant="body2" color="warning.main">
+            {LL.ID_OF(LL.ENTITY())}:&nbsp;
+          </Typography>
+          <Typography variant="body2">{editItem.id}</Typography>
+        </Grid>

-        <Box sx={{ mt: 1, mb: 2 }}>
+        <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>
+
+        <Box mt={1} mb={2}>
          <EntityMaskToggle onUpdate={updateDeviceEntity} de={editItem} />
        </Box>
-
        <Grid container spacing={2}>
          <Grid>
            <TextField
@@ -160,14 +146,12 @@ const CustomizationsDialog = ({
            </>
          )}
        </Grid>
-
        {error && (
-          <Typography sx={{ mt: 2 }} variant="body2" color="error">
+          <Typography variant="body2" color="error" mt={2}>
            Error: Check min and max values
          </Typography>
        )}
      </DialogContent>
-
      <DialogActions>
        <Button
          startIcon={<CancelIcon />}
@@ -1,12 +1,12 @@
-import { memo, useContext, useEffect, useState } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import { IconContext } from 'react-icons/lib';
 import { Link } from 'react-router';
+import { toast } from 'react-toastify';

 import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import EditIcon from '@mui/icons-material/Edit';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import HelpOutlineIcon from '@mui/icons-material/HelpOutlined';
-import PlayArrowIcon from '@mui/icons-material/PlayArrow';
+import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
 import UnfoldLessIcon from '@mui/icons-material/UnfoldLess';
 import UnfoldMoreIcon from '@mui/icons-material/UnfoldMore';
 import {
@@ -14,7 +14,6 @@ import {
  IconButton,
  ToggleButton,
  ToggleButtonGroup,
-  Tooltip,
  Typography
 } from '@mui/material';

@@ -29,7 +28,6 @@ import {
  SectionContent,
  useLayoutTitle
 } from 'components';
-import { toast } from 'components/toast';
 import { AuthenticatedContext } from 'contexts/authentication';
 import { useI18nContext } from 'i18n/i18n-react';
 import { useInterval, usePersistState } from 'utils';
@@ -46,7 +44,7 @@ import {
 } from './types';
 import { deviceValueItemValidation } from './validators';

-const Dashboard = memo(() => {
+const Dashboard = () => {
  const { LL } = useI18nContext();
  const { me } = useContext(AuthenticatedContext);

@@ -76,25 +74,24 @@ const Dashboard = memo(() => {
    {
      immediate: false
    }
-  )
-    .onSuccess(() => {
-      toast.success(LL.WRITE_CMD_SENT());
-    })
-    .onError((error) => {
-      toast.error(String(error.error?.message || 'An error occurred'));
-    });
+  );

  const deviceValueDialogSave = async (devicevalue: DeviceValue) => {
    if (!selectedDashboardItem) {
      return;
    }
-    // skip if we're executing an immediate schedule as this is handled in DevicesDialog::doAction()
-    if (devicevalue.v !== undefined) {
-      const id = selectedDashboardItem.parentNode.id; // this is the parent ID
-      await sendDeviceValue({ id, c: devicevalue.c ?? '', v: devicevalue.v });
-    }
-    setDeviceValueDialogOpen(false);
-    setSelectedDashboardItem(undefined);
+    const id = selectedDashboardItem.parentNode.id; // this is the parent ID
+    await sendDeviceValue({ id, c: devicevalue.c ?? '', v: devicevalue.v })
+      .then(() => {
+        toast.success(LL.WRITE_CMD_SENT());
+      })
+      .catch((error: Error) => {
+        toast.error(error.message);
+      })
+      .finally(() => {
+        setDeviceValueDialogOpen(false);
+        setSelectedDashboardItem(undefined);
+      });
  };

  const dashboard_theme = useTheme({
@@ -128,9 +125,9 @@ const Dashboard = memo(() => {
  });

  const tree = useTree(
-    { nodes: [...data.nodes] },
+    { nodes: data.nodes },
    {
-      onChange: () => {} // not used but needed
+      onChange: undefined // not used but needed
    },
    {
      treeIcon: {
@@ -160,9 +157,8 @@ const Dashboard = memo(() => {
  });

  useEffect(() => {
-    const nodeIds = data.nodes.map((item: DashboardItem) => item.id);
    showAll
-      ? tree.fns.onAddAll(nodeIds) // expand tree
+      ? tree.fns.onAddAll(data.nodes.map((item: DashboardItem) => item.id)) // expand tree
      : tree.fns.onRemoveAll(); // collapse tree
  }, [parentNodes]);

@@ -180,8 +176,6 @@ const Dashboard = memo(() => {
          return LL.ANALOG_SENSORS();
        case DeviceType.TEMPERATURESENSOR:
          return LL.TEMP_SENSORS();
-        case DeviceType.COMMAND:
-          return LL.COMMANDS();
        case DeviceType.SCHEDULER:
          return LL.SCHEDULER();
        default:
@@ -196,7 +190,7 @@ const Dashboard = memo(() => {
      // if its a device (parent node) and has entities
      if (di.nodes?.length) {
        return (
-          <span style={{ fontSize: '15px' }}>
+          <span style={{ fontWeight: 'bold', fontSize: '14px' }}>
            <DeviceIcon type_id={di.t ?? 0} />
            &nbsp;&nbsp;{showType(di.n, di.t)}
            <span style={{ color: 'lightblue' }}>&nbsp;({di.nodes?.length})</span>
@@ -207,26 +201,20 @@ const Dashboard = memo(() => {
    if (di.dv) {
      return <span>{di.dv.id.slice(2)}</span>;
    }
-    return null;
  };

  const hasMask = (id: string, mask: number) =>
    (parseInt(id.slice(0, 2), 16) & mask) === mask;

  const editDashboardValue = (di: DashboardItem) => {
-    // don't execute on parent nodes
-    if (!me.admin || di.id <= 99) {
-      return;
-    }
-
-    if (di.dv?.c) {
+    if (me.admin && di.dv?.c) {
      setSelectedDashboardItem(di);
      setDeviceValueDialogOpen(true);
    }
  };

  const handleShowAll = (
-    _event: React.MouseEvent<HTMLElement>,
+    event: React.MouseEvent<HTMLElement>,
    toggle: boolean | null
  ) => {
    if (toggle !== null) {
@@ -235,21 +223,23 @@ const Dashboard = memo(() => {
    }
  };

-  const hasFavEntities = data.nodes.filter(
-    (item: DashboardItem) => item.id <= 90
-  ).length;
-
  const renderContent = () => {
    if (!data) {
-      return (
-        <FormLoader onRetry={fetchDashboard} errorMessage={error?.message || ''} />
-      );
+      return <FormLoader onRetry={fetchDashboard} errorMessage={error?.message} />;
    }

+    const hasFavEntities = data.nodes.filter(
+      (item: DashboardItem) => item.id <= 90
+    ).length;
+
    return (
      <>
+        {!data.connected && (
+          <MessageBox mb={2} level="error" message={LL.EMS_BUS_WARNING()} />
+        )}
+
        {data.connected && data.nodes.length > 0 && !hasFavEntities && (
-          <MessageBox sx={{ mb: 2 }} level="warning">
+          <MessageBox mb={2} level="warning">
            <Typography>
              {LL.NO_DATA_1()}&nbsp;
              <Link to="/customizations" style={{ color: 'white' }}>
@@ -265,132 +255,105 @@ const Dashboard = memo(() => {
          </MessageBox>
        )}

-        <Box
-          sx={{
-            display: 'flex',
-            justifyContent: 'flex-end',
-            flexWrap: 'nowrap',
-            whiteSpace: 'nowrap'
-          }}
-        >
-          <ToggleButtonGroup
-            size="small"
-            color="primary"
-            value={showAll}
-            exclusive
-            onChange={handleShowAll}
-          >
-            <ButtonTooltip title={LL.ALLVALUES()}>
-              <ToggleButton value={true}>
-                <UnfoldMoreIcon sx={{ fontSize: 18 }} />
-              </ToggleButton>
+        {data.nodes.length > 0 && (
+          <>
+            <ToggleButtonGroup
+              color="primary"
+              size="small"
+              value={showAll}
+              exclusive
+              onChange={handleShowAll}
+            >
+              <ButtonTooltip title={LL.ALLVALUES()} arrow>
+                <ToggleButton value={true}>
+                  <UnfoldMoreIcon sx={{ fontSize: 18 }} />
+                </ToggleButton>
+              </ButtonTooltip>
+              <ButtonTooltip title={LL.COMPACT()} arrow>
+                <ToggleButton value={false}>
+                  <UnfoldLessIcon sx={{ fontSize: 18 }} />
+                </ToggleButton>
+              </ButtonTooltip>
+            </ToggleButtonGroup>
+            <ButtonTooltip title={LL.DASHBOARD_1()} arrow>
+              <HelpOutlineIcon color="primary" sx={{ ml: 1, fontSize: 20 }} />
            </ButtonTooltip>
-            <ButtonTooltip title={LL.COMPACT()}>
-              <ToggleButton value={false}>
-                <UnfoldLessIcon sx={{ fontSize: 18 }} />
-              </ToggleButton>
-            </ButtonTooltip>
-          </ToggleButtonGroup>
-        </Box>

-        {data.nodes.length > 0 ? (
-          <Box sx={{ mt: 1, justifyContent: 'center', flexDirection: 'column' }}>
-            <IconContext.Provider
-              value={{
-                color: 'lightblue',
-                size: '18',
-                style: { verticalAlign: 'middle' }
+            <Box
+              padding={1}
+              justifyContent="center"
+              flexDirection="column"
+              sx={{
+                borderRadius: 1,
+                border: '1px solid grey'
              }}
            >
-              <Table
-                data={{ nodes: data.nodes }}
-                theme={dashboard_theme}
-                layout={{ custom: true }}
-                tree={tree}
-              >
-                {(tableList: DashboardItem[]) => (
-                  <Body>
-                    {tableList.map((di: DashboardItem) => (
-                      <Row
-                        key={di.id}
-                        item={di}
-                        onClick={() => editDashboardValue(di)}
-                      >
-                        {di.id > 99 ? (
-                          <>
-                            <Cell>{showName(di)}</Cell>
-                            <Cell>
-                              <ButtonTooltip
-                                title={formatValue(LL, di.dv?.v, di.dv?.u)}
-                              >
-                                <span>{formatValue(LL, di.dv?.v, di.dv?.u)}</span>
-                              </ButtonTooltip>
-                            </Cell>
-
-                            <Cell>
-                              {me.admin &&
-                                di.dv?.c &&
-                                !hasMask(di.dv.id, DeviceEntityMask.DV_READONLY) &&
-                                (di.dv.v === '' || di.dv.v === undefined ? (
-                                  <IconButton
-                                    size="small"
-                                    aria-label={LL.RUN()}
-                                    onClick={() => editDashboardValue(di)}
-                                    style={{ backgroundColor: 'transparent' }}
-                                  >
-                                    <PlayArrowIcon
-                                      color="primary"
-                                      sx={{ fontSize: 16 }}
-                                    />
-                                  </IconButton>
-                                ) : (
-                                  <IconButton
-                                    size="small"
-                                    aria-label={
-                                      LL.CHANGE_VALUE() + ' ' + LL.VALUE(0)
-                                    }
-                                    onClick={() => editDashboardValue(di)}
-                                    style={{ backgroundColor: 'transparent' }}
-                                  >
-                                    <EditIcon
-                                      color="primary"
-                                      sx={{ fontSize: 16 }}
-                                    />
-                                  </IconButton>
-                                ))}
-                            </Cell>
-                          </>
-                        ) : (
-                          <>
-                            <CellTree item={di}>{showName(di)}</CellTree>
-                            <Cell />
-                            <Cell />
-                          </>
-                        )}
-                      </Row>
-                    ))}
-                  </Body>
-                )}
-              </Table>
-            </IconContext.Provider>
-          </Box>
-        ) : (
-          <Box sx={{ display: 'flex' }}>
-            <Typography sx={{ mt: 1 }} color="warning" variant="body1">
-              no data
-            </Typography>
-            <Tooltip title={LL.DASHBOARD_1()}>
-              <HelpOutlineIcon
-                sx={{
-                  ml: 1,
-                  mt: 1,
-                  fontSize: 20,
-                  verticalAlign: 'middle'
+              <IconContext.Provider
+                value={{
+                  color: 'lightblue',
+                  size: '18',
+                  style: { verticalAlign: 'middle' }
                }}
-                color="primary"
-              />
-            </Tooltip>
-          </Box>
+              >
+                <Table
+                  data={{ nodes: data.nodes }}
+                  theme={dashboard_theme}
+                  layout={{ custom: true }}
+                  tree={tree}
+                >
+                  {(tableList: DashboardItem[]) => (
+                    <Body>
+                      {tableList.map((di: DashboardItem) => (
+                        <Row
+                          key={di.id}
+                          item={di}
+                          onClick={() => editDashboardValue(di)}
+                        >
+                          {di.id > 99 ? (
+                            <>
+                              <Cell>{showName(di)}</Cell>
+                              <Cell>
+                                <ButtonTooltip
+                                  title={formatValue(LL, di.dv?.v, di.dv?.u)}
+                                >
+                                  <span>{formatValue(LL, di.dv?.v, di.dv?.u)}</span>
+                                </ButtonTooltip>
+                              </Cell>
+
+                              <Cell>
+                                {me.admin &&
+                                  di.dv?.c &&
+                                  !hasMask(
+                                    di.dv.id,
+                                    DeviceEntityMask.DV_READONLY
+                                  ) && (
+                                    <IconButton
+                                      size="small"
+                                      onClick={() => editDashboardValue(di)}
+                                    >
+                                      <EditIcon
+                                        color="primary"
+                                        sx={{ fontSize: 16 }}
+                                      />
+                                    </IconButton>
+                                  )}
+                              </Cell>
+                            </>
+                          ) : (
+                            <>
+                              <CellTree item={di}>{showName(di)}</CellTree>
+                              <Cell />
+                              <Cell />
+                            </>
+                          )}
+                        </Row>
+                      ))}
+                    </Body>
+                  )}
+                </Table>
+              </IconContext.Provider>
+            </Box>
+          </>
        )}
      </>
    );
@@ -402,10 +365,7 @@ const Dashboard = memo(() => {
      {selectedDashboardItem && selectedDashboardItem.dv && (
        <DevicesDialog
          open={deviceValueDialogOpen}
-          onClose={() => {
-            setDeviceValueDialogOpen(false);
-            setSelectedDashboardItem(undefined);
-          }}
+          onClose={() => setDeviceValueDialogOpen(false)}
          onSave={deviceValueDialogSave}
          selectedItem={selectedDashboardItem.dv}
          writeable={true}
@@ -415,6 +375,6 @@ const Dashboard = memo(() => {
      )}
    </SectionContent>
  );
-});
+};

 export default Dashboard;
@@ -1,24 +1,26 @@
-import { memo } from 'react';
-import type { IconType } from 'react-icons';
 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';
 import { TiFlowSwitch, TiThermometer } from 'react-icons/ti';
 import { VscVmConnect } from 'react-icons/vsc';

+import type { SvgIconProps } from '@mui/material';
+
 import { DeviceType } from './types';

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

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

 export default DeviceIcon;
@@ -1,5 +1,4 @@
 import {
-  memo,
  useCallback,
  useContext,
  useEffect,
@@ -7,7 +6,8 @@ import {
  useState
 } from 'react';
 import { IconContext } from 'react-icons';
-import { Link, useNavigate } from 'react-router';
+import { useNavigate } from 'react-router';
+import { toast } from 'react-toastify';

 import CommentsDisabledOutlinedIcon from '@mui/icons-material/CommentsDisabledOutlined';
 import ConstructionIcon from '@mui/icons-material/Construction';
@@ -31,7 +31,7 @@ import {
  DialogActions,
  DialogContent,
  DialogTitle,
-  Grid,
+  Grid2 as Grid,
  IconButton,
  InputAdornment,
  List,
@@ -63,7 +63,6 @@ import {
  SectionContent,
  useLayoutTitle
 } from 'components';
-import { toast } from 'components/toast';
 import { AuthenticatedContext } from 'contexts/authentication';
 import { useI18nContext } from 'i18n/i18n-react';
 import { useInterval } from 'utils';
@@ -76,7 +75,7 @@ import { DeviceEntityMask, DeviceType, DeviceValueUOM_s } from './types';
 import type { Device, DeviceValue } from './types';
 import { deviceValueItemValidation } from './validators';

-const Devices = memo(() => {
+const Devices = () => {
  const { LL } = useI18nContext();
  const { me } = useContext(AuthenticatedContext);

@@ -92,7 +91,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: []
@@ -117,26 +116,28 @@ const Devices = memo(() => {
  );

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

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

@@ -167,27 +168,18 @@ const Devices = memo(() => {
  const device_theme = useTheme([
    common_theme,
    {
-      BaseRow: `
-        font-size: 15px;
-        .td {
-         height: 28px;
-        }
-      `,
      Table: `
-      --data-table-library_grid-template-columns: repeat(1, minmax(0, 1fr)) 130px;
-    `,
+        --data-table-library_grid-template-columns: repeat(1, minmax(0, 1fr)) 130px;
+      `,
      HeaderRow: `
-      .th {
-        padding: 8px;
-    `,
+        .th {
+          padding: 8px;
+      `,
      Row: `
-      &:nth-of-type(odd) .td {
-          background-color: #303030;
-      },
-      &:hover .td {
-        background-color: #177ac9;
-      },
-    `
+        font-weight: bold;
+        &:hover .td {
+          background-color: #177ac9;
+      `
    }
  ]);

@@ -195,43 +187,43 @@ const Devices = memo(() => {
    common_theme,
    {
      Table: `
-      --data-table-library_grid-template-columns: minmax(200px, auto) minmax(150px, auto) 40px;
-      height: auto;
-      max-height: 100%;
-      overflow-y: scroll;
-      ::-webkit-scrollbar {
-        display:none;
-      }
-    `,
+        --data-table-library_grid-template-columns: minmax(200px, auto) minmax(150px, auto) 40px;
+        height: auto;
+        max-height: 100%;
+        overflow-y: scroll;
+        ::-webkit-scrollbar {
+          display:none;
+        }
+      `,
      BaseRow: `
-    .td {
-      height: 32px;
-    }
-   `,
+      .td {
+        height: 32px;
+      }
+     `,
      BaseCell: `
-      &:nth-of-type(1) {
-        border-left: 1px solid #177ac9;
-      },
-      &:nth-of-type(2) {
-        text-align: right;
-      },
-      &:nth-of-type(3) {
-        border-right: 1px solid #177ac9;
-      }
-    `,
+        &:nth-of-type(1) {
+          border-left: 1px solid #177ac9;
+        },
+        &:nth-of-type(2) {
+          text-align: right;
+        },
+        &:nth-of-type(3) {
+          border-right: 1px solid #177ac9;
+        }
+      `,
      HeaderRow: `
-      .th {
-        border-top: 1px solid #565656;
-      }
-    `,
+        .th {
+          border-top: 1px solid #565656;
+        }
+      `,
      Row: `
-      &:nth-of-type(odd) .td {
-        background-color: #303030;
-      },
-      &:hover .td {
-        background-color: #177ac9;
-    }
-    `
+        &:nth-of-type(odd) .td {
+          background-color: #303030;
+        },
+        &:hover .td {
+          background-color: #177ac9;
+      }
+      `
    }
  ]);

@@ -246,7 +238,7 @@ const Devices = memo(() => {
  };

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

  const device_select = useRowSelect(
-    { nodes: [...coreData.devices] },
+    { nodes: coreData.devices },
    {
      onChange: onSelectChange
    }
@@ -337,16 +329,13 @@ const Devices = memo(() => {

  const handleDownloadCsv = () => {
    const deviceIndex = coreData.devices.findIndex(
-      (d: Device) => d.id === device_select.state.id
+      (d) => d.id === device_select.state.id
    );
    if (deviceIndex === -1) {
      return;
    }
-    const selectedDevice = coreData.devices[deviceIndex];
-    if (!selectedDevice) {
-      return;
-    }
-    const filename = selectedDevice.tn + '_' + selectedDevice.n;
+    const filename =
+      coreData.devices[deviceIndex].tn + '_' + coreData.devices[deviceIndex].n;

    const columns = [
      {
@@ -361,7 +350,7 @@ const Devices = memo(() => {
      {
        accessor: (dv: DeviceValue) =>
          dv.u !== undefined && DeviceValueUOM_s[dv.u]
-            ? DeviceValueUOM_s[dv.u]?.replace(/[^a-zA-Z0-9]/g, '')
+            ? DeviceValueUOM_s[dv.u].replace(/[^a-zA-Z0-9]/g, '')
            : '',
        name: 'UoM'
      },
@@ -384,9 +373,7 @@ const Devices = memo(() => {
    ];

    const data = onlyFav
-      ? deviceData.nodes.filter((dv: DeviceValue) =>
-          hasMask(dv.id, DeviceEntityMask.DV_FAVORITE)
-        )
+      ? deviceData.nodes.filter((dv) => hasMask(dv.id, DeviceEntityMask.DV_FAVORITE))
      : deviceData.nodes;

    const csvData = data.reduce(
@@ -446,14 +433,10 @@ const Devices = memo(() => {
  const renderDeviceDetails = () => {
    if (showDeviceInfo) {
      const deviceIndex = coreData.devices.findIndex(
-        (d: Device) => d.id === device_select.state.id
+        (d) => d.id === device_select.state.id
      );
      if (deviceIndex === -1) {
-        return null;
-      }
-      const deviceDetails = coreData.devices[deviceIndex];
-      if (!deviceDetails) {
-        return null;
+        return;
      }

      return (
@@ -466,35 +449,47 @@ const Devices = memo(() => {
          <DialogContent dividers>
            <List dense={true}>
              <ListItem>
-                <ListItemText primary={LL.TYPE(0)} secondary={deviceDetails.tn} />
+                <ListItemText
+                  primary={LL.TYPE(0)}
+                  secondary={coreData.devices[deviceIndex].tn}
+                />
              </ListItem>
              <ListItem>
-                <ListItemText primary={LL.NAME(0)} secondary={deviceDetails.n} />
+                <ListItemText
+                  primary={LL.NAME(0)}
+                  secondary={coreData.devices[deviceIndex].n}
+                />
              </ListItem>
-              {deviceDetails.t !== DeviceType.CUSTOM && (
+              {coreData.devices[deviceIndex].t !== DeviceType.CUSTOM && (
                <>
                  <ListItem>
-                    <ListItemText primary={LL.BRAND()} secondary={deviceDetails.b} />
+                    <ListItemText
+                      primary={LL.BRAND()}
+                      secondary={coreData.devices[deviceIndex].b}
+                    />
                  </ListItem>
                  <ListItem>
                    <ListItemText
                      primary={LL.ID_OF(LL.DEVICE())}
                      secondary={
                        '0x' +
-                        ('00' + deviceDetails.d.toString(16).toUpperCase()).slice(-2)
+                        (
+                          '00' +
+                          coreData.devices[deviceIndex].d.toString(16).toUpperCase()
+                        ).slice(-2)
                      }
                    />
                  </ListItem>
                  <ListItem>
                    <ListItemText
                      primary={LL.ID_OF(LL.PRODUCT())}
-                      secondary={deviceDetails.p}
+                      secondary={coreData.devices[deviceIndex].p}
                    />
                  </ListItem>
                  <ListItem>
                    <ListItemText
                      primary={LL.VERSION()}
-                      secondary={deviceDetails.v}
+                      secondary={coreData.devices[deviceIndex].v}
                    />
                  </ListItem>
                </>
@@ -513,86 +508,64 @@ const Devices = memo(() => {
        </Dialog>
      );
    }
-    return null;
  };

  const renderCoreData = () => (
    <>
-      {!coreData.connected ? (
-        <MessageBox level="error" message={LL.EMS_BUS_WARNING() + '.'}>
-          &nbsp;(
-          <Link
-            target="_blank"
-            to="https://docs.emsesp.org/Troubleshooting#ems-bus-is-not-connecting"
-            style={{ color: 'white' }}
+      <IconContext.Provider
+        value={{
+          color: 'lightblue',
+          size: '18',
+          style: { verticalAlign: 'middle' }
+        }}
+      >
+        {!coreData.connected && (
+          <MessageBox my={2} level="error" message={LL.EMS_BUS_WARNING()} />
+        )}
+
+        {coreData.connected && (
+          <Table
+            data={{ nodes: coreData.devices }}
+            select={device_select}
+            theme={device_theme}
+            layout={{ custom: true }}
          >
-            {LL.ONLINE_HELP()}
-          </Link>
-          )
-        </MessageBox>
-      ) : (
-        <Box sx={{ justifyContent: 'center', flexDirection: 'column' }}>
-          <IconContext.Provider
-            value={{
-              color: 'lightblue',
-              size: '18',
-              style: { verticalAlign: 'middle' }
-            }}
-          >
-            <Table
-              data={{ nodes: [...coreData.devices] }}
-              select={device_select}
-              theme={device_theme}
-              layout={{ custom: true }}
-            >
-              {(tableList: Device[]) => (
-                <>
-                  <Header>
-                    <HeaderRow>
-                      <HeaderCell resize>{LL.DESCRIPTION()}</HeaderCell>
-                      <HeaderCell stiff>{LL.TYPE(0)}</HeaderCell>
-                    </HeaderRow>
-                  </Header>
-                  <Body>
-                    {tableList.length === 0 && (
-                      <CircularProgress sx={{ margin: 1 }} size={18} />
-                    )}
-                    {tableList.map((device: Device) => (
-                      <Row key={device.id} item={device} disabled={device.e === 0}>
-                        <Cell>
-                          <DeviceIcon type_id={device.t} />
-                          &nbsp;&nbsp;
-                          <span style={{ color: device.e === 0 ? 'grey' : 'white' }}>
-                            {device.n}
-                          </span>
-                          {device.e !== 0 && (
-                            <span style={{ color: 'lightblue' }}>
-                              &nbsp;&nbsp;({device.e})
-                            </span>
-                          )}
-                        </Cell>
-                        <Cell stiff>
-                          <ButtonTooltip
-                            title={`DeviceID: 0x${('00' + device.d.toString(16).toUpperCase()).slice(-2)}, ProductID: ${device.p}`}
-                          >
-                            <span>{device.tn}</span>
-                          </ButtonTooltip>
-                        </Cell>
-                      </Row>
-                    ))}
-                  </Body>
-                </>
-              )}
-            </Table>
-          </IconContext.Provider>
-        </Box>
-      )}
+            {(tableList: Device[]) => (
+              <>
+                <Header>
+                  <HeaderRow>
+                    <HeaderCell resize>{LL.DESCRIPTION()}</HeaderCell>
+                    <HeaderCell stiff>{LL.TYPE(0)}</HeaderCell>
+                  </HeaderRow>
+                </Header>
+                <Body>
+                  {tableList.length === 0 && (
+                    <CircularProgress sx={{ margin: 1 }} size={18} />
+                  )}
+                  {tableList.map((device: Device) => (
+                    <Row key={device.id} item={device}>
+                      <Cell>
+                        <DeviceIcon type_id={device.t} />
+                        &nbsp;&nbsp;
+                        {device.n}
+                        <span style={{ color: 'lightblue' }}>
+                          &nbsp;&nbsp;({device.e})
+                        </span>
+                      </Cell>
+                      <Cell stiff>{device.tn}</Cell>
+                    </Row>
+                  ))}
+                </Body>
+              </>
+            )}
+          </Table>
+        )}
+      </IconContext.Provider>
    </>
  );

  const deviceValueDialogClose = () => {
    setDeviceValueDialogOpen(false);
-    setSelectedDeviceValue(undefined);
    if (selectedDevice !== undefined) {
      void sendDeviceData(selectedDevice);
    }
@@ -625,49 +598,42 @@ const Devices = memo(() => {

    const shown_data = onlyFav
      ? deviceData.nodes.filter(
-          (dv: DeviceValue) =>
+          (dv) =>
            hasMask(dv.id, DeviceEntityMask.DV_FAVORITE) &&
-            dv.id.slice(2).toLowerCase().includes(search.toLowerCase())
+            dv.id.slice(2).includes(search)
        )
-      : deviceData.nodes.filter((dv: DeviceValue) =>
-          dv.id.slice(2).toLowerCase().includes(search.toLowerCase())
-        );
+      : deviceData.nodes.filter((dv) => dv.id.slice(2).includes(search));

    const deviceIndex = coreData.devices.findIndex(
-      (d: Device) => d.id === device_select.state.id
+      (d) => d.id === device_select.state.id
    );
    if (deviceIndex === -1) {
      return;
    }
-    const deviceInfo = coreData.devices[deviceIndex];
-    if (!deviceInfo) {
-      return;
-    }

-    const [, height] = size;
    return (
      <Box
        sx={{
          backgroundColor: 'black',
          position: 'absolute',
-          left: leftOffset,
+          left: () => leftOffset(),
          right: 0,
          bottom: 0,
          top: 64,
          zIndex: 'modal',
-          maxHeight: () => (height || 0) - 126,
+          maxHeight: () => size[1] - 126,
          border: '1px solid #177ac9'
        }}
      >
        <Box sx={{ p: 1 }}>
-          <Grid container sx={{ justifyContent: 'space-between' }}>
-            <Typography noWrap variant="subtitle1" color="warning">
-              {deviceInfo.n}&nbsp;(
-              {deviceInfo.tn})
+          <Grid container justifyContent="space-between">
+            <Typography noWrap variant="subtitle1" color="warning.main">
+              {coreData.devices[deviceIndex].n}&nbsp;(
+              {coreData.devices[deviceIndex].tn})
            </Typography>
-            <Grid sx={{ justifyContent: 'flex-end' }}>
+            <Grid justifyContent="flex-end">
              <ButtonTooltip title={LL.CLOSE()}>
-                <IconButton onClick={resetDeviceSelect} aria-label={LL.CLOSE()}>
+                <IconButton onClick={resetDeviceSelect}>
                  <HighlightOffIcon color="primary" sx={{ fontSize: 18 }} />
                </IconButton>
              </ButtonTooltip>
@@ -679,7 +645,6 @@ const Devices = memo(() => {
            variant="outlined"
            sx={{ width: '22ch' }}
            placeholder={LL.SEARCH()}
-            aria-label={LL.SEARCH()}
            onChange={(event) => {
              setSearch(event.target.value);
            }}
@@ -694,22 +659,19 @@ const Devices = memo(() => {
            }}
          />
          <ButtonTooltip title={LL.DEVICE_DETAILS()}>
-            <IconButton
-              onClick={() => setShowDeviceInfo(true)}
-              aria-label={LL.DEVICE_DETAILS()}
-            >
+            <IconButton onClick={() => setShowDeviceInfo(true)}>
              <InfoOutlinedIcon color="primary" sx={{ fontSize: 18 }} />
            </IconButton>
          </ButtonTooltip>
          {me.admin && (
            <ButtonTooltip title={LL.CUSTOMIZATIONS()}>
-              <IconButton onClick={customize} aria-label={LL.CUSTOMIZATIONS()}>
+              <IconButton onClick={customize}>
                <ConstructionIcon color="primary" sx={{ fontSize: 18 }} />
              </IconButton>
            </ButtonTooltip>
          )}
          <ButtonTooltip title={LL.EXPORT()}>
-            <IconButton onClick={handleDownloadCsv} aria-label={LL.EXPORT()}>
+            <IconButton onClick={handleDownloadCsv}>
              <DownloadIcon color="primary" sx={{ fontSize: 18 }} />
            </IconButton>
          </ButtonTooltip>
@@ -737,14 +699,14 @@ const Devices = memo(() => {
              ' ' +
              shown_data.length +
              '/' +
-              deviceInfo.e +
+              coreData.devices[deviceIndex].e +
              ' ' +
              LL.ENTITIES(shown_data.length)}
          </span>
        </Box>

        <Table
-          data={{ nodes: Array.from(shown_data) }}
+          data={{ nodes: shown_data }}
          theme={data_theme}
          sort={dv_sort}
          layout={{ custom: true, fixedHeader: true }}
@@ -788,7 +750,6 @@ const Devices = memo(() => {
                          <IconButton
                            size="small"
                            onClick={() => showDeviceValue(dv)}
-                            style={{ backgroundColor: 'transparent' }}
                          >
                            {dv.v === '' ? (
                              <PlayArrowIcon color="primary" sx={{ fontSize: 16 }} />
@@ -829,6 +790,6 @@ const Devices = memo(() => {
      )}
    </SectionContent>
  );
-});
+};

 export default Devices;
@@ -1,7 +1,6 @@
 import { useEffect, useState } from 'react';

 import CancelIcon from '@mui/icons-material/Cancel';
-import PlayArrowIcon from '@mui/icons-material/PlayArrow';
 import WarningIcon from '@mui/icons-material/Warning';
 import {
  Box,
@@ -12,25 +11,22 @@ import {
  DialogContent,
  DialogTitle,
  FormHelperText,
-  Grid,
+  Grid2 as Grid,
  InputAdornment,
  MenuItem,
  TextField,
  Typography
 } from '@mui/material';

-import { callAction } from '@/api/app';
 import { dialogStyle } from 'CustomTheme';
-import { useRequest } from 'alova/client';
+import type Schema from 'async-validator';
+import type { ValidateFieldsError } from 'async-validator';
 import { ValidatedTextField } from 'components';
-import { toast } from 'components/toast';
 import { useI18nContext } from 'i18n/i18n-react';
 import { numberValue, updateValue } from 'utils';
-import { ValidationError, validate } from 'validators';
-import type Schema from 'validators/schema';
-import type { ValidateFieldsError } from 'validators/schema';
+import { validate } from 'validators';

-import { DeviceValueUOM, DeviceValueUOM_s, getDeviceValueKind } from './types';
+import { DeviceValueUOM, DeviceValueUOM_s } from './types';
 import type { DeviceValue } from './types';

 interface DevicesDialogProps {
@@ -65,28 +61,17 @@ const DevicesDialog = ({
    }
  }, [open, selectedItem]);

-  const { send: executeCommand } = useRequest(
-    (id: string) => callAction({ action: 'executeCommand', param: id }),
-    { immediate: false }
-  )
-    .onSuccess(() => {
-      toast.success(LL.COMMAND_EXECUTED());
-    })
-    .onError((error) => {
-      toast.error(String(error.error?.message || 'An error occurred'));
-    });
+  const close = () => {
+    onClose();
+  };

-  const doAction = async () => {
+  const save = async () => {
    try {
      setFieldErrors(undefined);
-      if (editItem.v === undefined && editItem.c !== undefined) {
-        await executeCommand(editItem.c);
-      } else {
-        await validate(validator, editItem);
-      }
+      await validate(validator, editItem);
      onSave(editItem);
    } catch (error) {
-      setFieldErrors((error as ValidationError).fieldErrors);
+      setFieldErrors(error as ValidateFieldsError);
    }
  };

@@ -106,107 +91,91 @@ const DevicesDialog = ({
    }
  };

-  const showHelperText = (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 kind = getDeviceValueKind(selectedItem);
-
-  const dialogTitle =
-    kind === 'command' || kind === 'deviceCommand'
-      ? LL.RUN() + ' ' + LL.COMMAND(0)
-      : kind === 'scheduler'
-        ? LL.UPDATE() + ' ' + LL.SCHEDULE(0)
-        : writeable
-          ? LL.CHANGE_VALUE()
-          : LL.VALUE(0);
-
-  const buttonLabel =
-    kind === 'command' || kind === 'deviceCommand' ? LL.RUN() : LL.UPDATE();
-
-  const helperText = showHelperText(editItem);
-
-  const valueLabel = LL.VALUE(0);
+  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;

  return (
-    <Dialog sx={dialogStyle} open={open} onClose={onClose}>
-      <DialogTitle>{dialogTitle}</DialogTitle>
+    <Dialog sx={dialogStyle} open={open} onClose={close}>
+      <DialogTitle>
+        {selectedItem.v === '' && selectedItem.c
+          ? LL.RUN_COMMAND()
+          : writeable
+            ? LL.CHANGE_VALUE()
+            : LL.VALUE(0)}
+      </DialogTitle>
      <DialogContent dividers>
-        <Typography sx={{ mb: 2 }} color="warning" variant="body2">
-          {editItem.id.slice(2)}
-        </Typography>
-        {kind !== 'command' && (
-          <Grid container>
-            <Grid size={12}>
-              {editItem.l ? (
-                <TextField
-                  name="v"
-                  value={editItem.v}
-                  aria-label={valueLabel}
-                  disabled={!writeable}
-                  sx={{ width: '30ch' }}
-                  select
-                  onChange={updateFormValue}
-                >
-                  {editItem.l.map((val) => (
-                    <MenuItem value={val} key={val}>
-                      {val}
-                    </MenuItem>
-                  ))}
-                </TextField>
-              ) : editItem.s || editItem.u !== DeviceValueUOM.NONE ? (
-                <ValidatedTextField
-                  fieldErrors={fieldErrors || {}}
-                  name="v"
-                  label={valueLabel}
-                  value={numberValue(Math.round((editItem.v as number) * 10) / 10)}
-                  autoFocus
-                  disabled={!writeable}
-                  type="number"
-                  sx={{ width: '30ch' }}
-                  onChange={updateFormValue}
-                  slotProps={{
-                    htmlInput: editItem.s
-                      ? { min: editItem.m, max: editItem.x, step: editItem.s }
-                      : {},
-                    input: {
-                      startAdornment: (
-                        <InputAdornment position="start">
-                          {setUom(editItem.u)}
-                        </InputAdornment>
-                      )
-                    }
-                  }}
-                />
-              ) : (
-                <ValidatedTextField
-                  fieldErrors={fieldErrors || {}}
-                  name="v"
-                  label={valueLabel}
-                  value={editItem.v}
-                  disabled={!writeable}
-                  sx={{ width: '30ch' }}
-                  multiline={!editItem.u}
-                  onChange={updateFormValue}
-                />
-              )}
-            </Grid>
-            {writeable && helperText && (
-              <Grid>
-                <FormHelperText>{helperText}</FormHelperText>
-              </Grid>
+        <Box color="warning.main" p={0} pl={0} pr={0} mt={0} mb={2}>
+          <Typography variant="body2">{editItem.id.slice(2)}</Typography>
+        </Box>
+        <Grid container>
+          <Grid size={12}>
+            {editItem.l ? (
+              <TextField
+                name="v"
+                label={LL.VALUE(0)}
+                value={editItem.v}
+                disabled={!writeable}
+                sx={{ width: '30ch' }}
+                select
+                onChange={updateFormValue}
+              >
+                {editItem.l.map((val) => (
+                  <MenuItem value={val} key={val}>
+                    {val}
+                  </MenuItem>
+                ))}
+              </TextField>
+            ) : editItem.s || editItem.u !== DeviceValueUOM.NONE ? (
+              <ValidatedTextField
+                fieldErrors={fieldErrors}
+                name="v"
+                label={LL.VALUE(0)}
+                value={numberValue(Math.round((editItem.v as number) * 10) / 10)}
+                autoFocus
+                disabled={!writeable}
+                type="number"
+                sx={{ width: '30ch' }}
+                onChange={updateFormValue}
+                slotProps={{
+                  htmlInput: editItem.s
+                    ? { min: editItem.m, max: editItem.x, step: editItem.s }
+                    : {},
+                  input: {
+                    startAdornment: (
+                      <InputAdornment position="start">
+                        {setUom(editItem.u)}
+                      </InputAdornment>
+                    )
+                  }
+                }}
+              />
+            ) : (
+              <ValidatedTextField
+                fieldErrors={fieldErrors}
+                name="v"
+                label={LL.VALUE(0)}
+                value={editItem.v}
+                disabled={!writeable}
+                sx={{ width: '30ch' }}
+                multiline={!editItem.u}
+                onChange={updateFormValue}
+              />
            )}
          </Grid>
-        )}
+          {writeable && (
+            <Grid>
+              <FormHelperText>{showHelperText(editItem)}</FormHelperText>
+            </Grid>
+          )}
+        </Grid>
      </DialogContent>

      <DialogActions>
@@ -222,24 +191,18 @@ const DevicesDialog = ({
            <Button
              startIcon={<CancelIcon />}
              variant="outlined"
-              onClick={onClose}
+              onClick={close}
              color="secondary"
            >
              {LL.CANCEL()}
            </Button>
            <Button
-              startIcon={
-                kind === 'command' ? (
-                  <PlayArrowIcon />
-                ) : kind === 'deviceEntity' || kind === 'deviceCommand' ? (
-                  <WarningIcon color="warning" />
-                ) : undefined
-              }
+              startIcon={<WarningIcon color="warning" />}
              variant="outlined"
-              onClick={doAction}
-              color={kind !== 'value' ? 'success' : 'primary'}
+              onClick={save}
+              color="primary"
            >
-              {buttonLabel}
+              {selectedItem.v === '' && selectedItem.c ? LL.EXECUTE() : LL.UPDATE()}
            </Button>
            {progress && (
              <CircularProgress
@@ -254,7 +217,7 @@ const DevicesDialog = ({
            )}
          </Box>
        ) : (
-          <Button variant="outlined" onClick={onClose} color="secondary">
+          <Button variant="outlined" onClick={close} color="secondary">
            {LL.CLOSE()}
          </Button>
        )}
@@ -9,42 +9,33 @@ interface EntityMaskToggleProps {
  de: DeviceEntity;
 }

-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 getMaskNumber = (newMask: string[]): number =>
-  newMask.reduce((mask, entry) => mask | Number(entry), 0);
-
-const getMaskString = (mask: number): string[] =>
-  MASK_VALUES.filter((value) => (mask & value) === value).map((value) =>
-    String(value)
-  );
-
-const hasMask = (mask: number, flag: number): boolean => (mask & flag) === flag;
-
 const EntityMaskToggle = ({ onUpdate, de }: EntityMaskToggleProps) => {
-  const handleChange = (_event: unknown, mask: string[]) => {
-    const newMask = getMaskNumber(mask);
-    const updatedDe = { ...de };
-
-    // 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;
+  const getMaskNumber = (newMask: string[]) => {
+    let new_mask = 0;
+    for (const entry of newMask) {
+      new_mask |= Number(entry);
    }
+    return new_mask;
+  };

-    // If excluded from web, cannot be favorite
-    if (hasMask(updatedDe.m, DeviceEntityMask.DV_WEB_EXCLUDE)) {
-      updatedDe.m = updatedDe.m & ~DeviceEntityMask.DV_FAVORITE;
+  const getMaskString = (m: number) => {
+    const new_masks: string[] = [];
+    if ((m & 1) === 1) {
+      new_masks.push('1');
    }
-
-    onUpdate(updatedDe);
+    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;
  };

  return (
@@ -52,59 +43,57 @@ const EntityMaskToggle = ({ onUpdate, de }: EntityMaskToggleProps) => {
      size="small"
      color="secondary"
      value={getMaskString(de.m)}
-      onChange={handleChange}
-    >
-      <ToggleButton
-        value="8"
-        disabled={
-          hasMask(
-            de.m,
-            DeviceEntityMask.DV_WEB_EXCLUDE | DeviceEntityMask.DV_DELETED
-          ) || de.n === undefined
+      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);
+      }}
+    >
+      <ToggleButton value="8" disabled={(de.m & 0x81) !== 0 || de.n === undefined}>
        <OptionIcon
          type="favorite"
-          isSet={hasMask(de.m, DeviceEntityMask.DV_FAVORITE)}
+          isSet={
+            (de.m & DeviceEntityMask.DV_FAVORITE) === DeviceEntityMask.DV_FAVORITE
+          }
        />
      </ToggleButton>
-      <ToggleButton
-        value="4"
-        disabled={
-          !de.w ||
-          hasMask(
-            de.m,
-            DeviceEntityMask.DV_WEB_EXCLUDE | DeviceEntityMask.DV_FAVORITE
-          )
-        }
-      >
+      <ToggleButton value="4" disabled={!de.w || (de.m & 0x83) >= 3}>
        <OptionIcon
          type="readonly"
-          isSet={hasMask(de.m, DeviceEntityMask.DV_READONLY)}
+          isSet={
+            (de.m & DeviceEntityMask.DV_READONLY) === DeviceEntityMask.DV_READONLY
+          }
        />
      </ToggleButton>
-      <ToggleButton
-        value="2"
-        disabled={de.n === '' || hasMask(de.m, DeviceEntityMask.DV_DELETED)}
-      >
+      <ToggleButton value="2" disabled={de.n === '' || (de.m & 0x80) !== 0}>
        <OptionIcon
          type="api_mqtt_exclude"
-          isSet={hasMask(de.m, DeviceEntityMask.DV_API_MQTT_EXCLUDE)}
+          isSet={
+            (de.m & DeviceEntityMask.DV_API_MQTT_EXCLUDE) ===
+            DeviceEntityMask.DV_API_MQTT_EXCLUDE
+          }
        />
      </ToggleButton>
-      <ToggleButton
-        value="1"
-        disabled={de.n === undefined || hasMask(de.m, DeviceEntityMask.DV_DELETED)}
-      >
+      <ToggleButton value="1" disabled={de.n === undefined || (de.m & 0x80) !== 0}>
        <OptionIcon
          type="web_exclude"
-          isSet={hasMask(de.m, DeviceEntityMask.DV_WEB_EXCLUDE)}
+          isSet={
+            (de.m & DeviceEntityMask.DV_WEB_EXCLUDE) ===
+            DeviceEntityMask.DV_WEB_EXCLUDE
+          }
        />
      </ToggleButton>
      <ToggleButton value="128">
        <OptionIcon
          type="deleted"
-          isSet={hasMask(de.m, DeviceEntityMask.DV_DELETED)}
+          isSet={
+            (de.m & DeviceEntityMask.DV_DELETED) === DeviceEntityMask.DV_DELETED
+          }
        />
      </ToggleButton>
    </ToggleButtonGroup>
@@ -1,5 +1,5 @@
-import { memo, useContext, useState } from 'react';
-import type { ReactElement } from 'react';
+import { useContext, useState } from 'react';
+import { toast } from 'react-toastify';

 import CommentIcon from '@mui/icons-material/CommentTwoTone';
 import DownloadIcon from '@mui/icons-material/GetApp';
@@ -10,7 +10,6 @@ import {
  Box,
  Button,
  Divider,
-  Grid,
  Link,
  List,
  ListItem,
@@ -20,11 +19,9 @@ import {
  Stack,
  Typography
 } from '@mui/material';
-import type { SxProps, Theme } from '@mui/material/styles';

 import { useRequest } from 'alova/client';
 import { SectionContent, useLayoutTitle } from 'components';
-import { toast } from 'components/toast';
 import { AuthenticatedContext } from 'contexts/authentication';
 import { useI18nContext } from 'i18n/i18n-react';
 import { saveFile } from 'utils';
@@ -32,57 +29,25 @@ import { saveFile } from 'utils';
 import { API, callAction } from '../../api/app';
 import type { APIcall } from './types';

-interface HelpLink {
-  href: string;
-  icon: ReactElement;
-  label: () => string;
-}
-
-interface CustomSupport {
-  img_url: string | null;
-  html: string | null;
-}
-
-const DEFAULT_IMAGE_URL = 'https://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 SYSTEM_INFO_API: APIcall = { device: 'system', cmd: 'info', id: 0 };
-
-const HelpComponent = () => {
+const Help = () => {
  const { LL } = useI18nContext();
  useLayoutTitle(LL.HELP());

  const { me } = useContext(AuthenticatedContext);

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

-  useRequest(callAction({ action: 'getCustomSupport' })).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
-      });
+  useRequest(() => callAction({ action: 'getCustomSupport' })).onSuccess((event) => {
+    if (event && event.data && Object.keys(event.data).length !== 0) {
+      const data = event.data.Support;
+      if (data.img_url) {
+        setCustomSupportIMG(data.img_url);
+      }
+      if (data.html) {
+        setCustomSupportHTML(data.html.join('<br/>'));
+      }
    }
  });

@@ -94,88 +59,113 @@ const HelpComponent = () => {
      toast.info(LL.DOWNLOAD_SUCCESSFUL());
    })
    .onError((error) => {
-      toast.error(String(error.error?.message || 'An error occurred'));
+      toast.error(error.message);
    });

-  const helpLinks: HelpLink[] = [
-    {
-      href: 'https://emsesp.org',
-      icon: <MenuBookIcon />,
-      label: () => LL.HELP_INFORMATION_1()
-    },
-    {
-      href: 'https://discord.gg/GP9DPSgeJq',
-      icon: <CommentIcon />,
-      label: () => LL.HELP_INFORMATION_2()
-    },
-    {
-      href: 'https://github.com/emsesp/EMS-ESP32/issues/new/choose',
-      icon: <GitHubIcon />,
-      label: () => LL.HELP_INFORMATION_3()
-    }
-  ];
-
-  const imageSrc =
-    imgError || !customSupport.img_url ? DEFAULT_IMAGE_URL : customSupport.img_url;
-
  return (
    <SectionContent>
-      {customSupport.html && (
+      {customSupportHTML && (
        <Stack
+          padding={1}
+          mb={2}
          direction="row"
          divider={<Divider orientation="vertical" flexItem />}
-          sx={{ padding: 1, mb: 2, ...SUPPORT_BOX_STYLES }}
+          sx={{
+            borderRadius: 3,
+            border: '2px solid grey',
+            justifyContent: 'space-evenly',
+            alignItems: 'center'
+          }}
        >
          <Typography variant="subtitle1">
-            <div dangerouslySetInnerHTML={{ __html: customSupport.html }} />
+            <div dangerouslySetInnerHTML={{ __html: customSupportHTML }} />
          </Typography>
          <Box
            component="img"
            referrerPolicy="no-referrer"
-            sx={IMAGE_STYLES}
-            onError={() => setImgError(true)}
-            src={imageSrc}
+            sx={{
+              maxHeight: { xs: 100, md: 250 }
+            }}
+            onError={() => setNotFound(true)}
+            src={
+              notFound
+                ? ''
+                : customSupportIMG ||
+                  'https://docs.emsesp.org/_media/images/installer.jpeg'
+            }
          />
        </Stack>
      )}

-      {me?.admin && (
-        <List>
-          {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>
-          ))}
+      {me.admin && (
+        <List sx={{ borderRadius: 3, border: '2px solid grey' }}>
+          <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>
        </List>
      )}

-      <Grid container spacing={2} sx={{ mt: 2, alignItems: 'center' }}>
-        <Typography sx={{ mb: 1 }} color="warning" variant="body1">
-          {LL.HELP_INFORMATION_4()}:
+      <Box p={2} color="warning.main">
+        <Typography mb={1} variant="body1">
+          {LL.HELP_INFORMATION_4()}.
        </Typography>
        <Button
          startIcon={<DownloadIcon />}
          variant="outlined"
          color="primary"
-          onClick={() => void sendAPI(SYSTEM_INFO_API)}
+          onClick={() => sendAPI({ device: 'system', cmd: 'info', id: 0 })}
        >
          {LL.SUPPORT_INFORMATION(0)}
        </Button>
-      </Grid>
+      </Box>

      <Divider sx={{ mt: 4 }} />

-      <Typography color="white" variant="subtitle1" align="center" sx={{ mt: 1 }}>
+      <Typography color="white" variant="subtitle1" align="center" mt={1}>
        &copy;&nbsp;
        <Link
          target="_blank"
@@ -183,13 +173,11 @@ const HelpComponent = () => {
          href="https://emsesp.org"
          color="primary"
        >
-          emsesp.org
+          {'emsesp.org'}
        </Link>
      </Typography>
    </SectionContent>
  );
 };

-const Help = memo(HelpComponent);
-
 export default Help;
@@ -1,5 +1,6 @@
-import { memo, useState } from 'react';
+import { useCallback, useState } from 'react';
 import { useBlocker } from 'react-router';
+import { toast } from 'react-toastify';

 import CancelIcon from '@mui/icons-material/Cancel';
 import CircleIcon from '@mui/icons-material/Circle';
@@ -24,26 +25,12 @@ import {
  SectionContent,
  useLayoutTitle
 } from 'components';
-import { toast } from 'components/toast';
 import { useI18nContext } from 'i18n/i18n-react';

 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);
@@ -115,25 +102,15 @@ const Modules = () => {
    setDialogOpen(false);
  };

-  const updateModuleItem = (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 = (updatedItem: ModuleItem) => {
    setDialogOpen(false);
    updateModuleItem(updatedItem);
  };

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

  const onCancel = async () => {
    await fetchModules().then(() => {
@@ -141,31 +118,43 @@ const Modules = () => {
    });
  };

-  const saveModules = async () => {
-    try {
-      await Promise.all(
-        modules.map((condensed_mi: ModuleItem) =>
-          updateModules({
-            key: condensed_mi.key,
-            enabled: condensed_mi.enabled,
-            license: condensed_mi.license
-          })
-        )
+  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
      );
-      toast.success(LL.MODULES_UPDATED());
-    } catch (error) {
-      toast.error(error instanceof Error ? error.message : String(error));
-    } finally {
-      await fetchModules();
-      setNumChanges(0);
-    }
+      setNumChanges(new_data.filter((mi) => hasModulesChanged(mi)).length);
+      return new_data;
+    });
+  };
+
+  const saveModules = async () => {
+    await updateModules({
+      modules: modules.map((condensed_mi) => ({
+        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 = () => {
    if (!modules) {
-      return (
-        <FormLoader onRetry={fetchModules} errorMessage={error?.message || ''} />
-      );
+      return <FormLoader onRetry={fetchModules} errorMessage={error?.message} />;
    }

    if (modules.length === 0) {
@@ -176,11 +165,18 @@ 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 (
      <>
-        <Typography sx={{ mb: 2 }} color="warning" variant="body1">
-          {LL.MODULES_DESCRIPTION()}.
-        </Typography>
+        <Box mb={2} color="warning.main">
+          <Typography variant="body1">{LL.MODULES_DESCRIPTION()}.</Typography>
+        </Box>
        <Table
          data={{ nodes: modules }}
          theme={modules_theme}
@@ -218,9 +214,7 @@ const Modules = () => {
                    <Cell>{mi.author}</Cell>
                    <Cell>{mi.version}</Cell>
                    <Cell>{mi.message}</Cell>
-                    <Cell>
-                      <ColorStatus status={mi.status} />
-                    </Cell>
+                    <Cell>{colorStatus(mi.status)}</Cell>
                  </Row>
                ))}
              </Body>
@@ -228,8 +222,8 @@ const Modules = () => {
          )}
        </Table>

-        <Box sx={{ mt: 1, display: 'flex', flexWrap: 'wrap' }}>
-          <Box sx={{ flexGrow: 1 }}>
+        <Box mt={1} display="flex" flexWrap="wrap">
+          <Box flexGrow={1}>
            {numChanges !== 0 && (
              <ButtonRow>
                <Button
@@ -10,7 +10,7 @@ import {
  DialogActions,
  DialogContent,
  DialogTitle,
-  Grid,
+  Grid2 as Grid,
  TextField
 } from '@mui/material';

@@ -37,26 +37,25 @@ const ModulesDialog = ({
  const { LL } = useI18nContext();
  const [editItem, setEditItem] = useState<ModuleItem>(selectedItem);

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

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

-  const handleSave = () => {
+  const close = () => {
+    onClose();
+  };
+
+  const save = () => {
    onSave(editItem);
  };

  return (
    <Dialog sx={dialogStyle} fullWidth maxWidth="xs" open={open} onClose={onClose}>
-      <DialogTitle>{`${LL.EDIT()} ${editItem.key}`}</DialogTitle>
+      <DialogTitle>{LL.EDIT() + ' ' + editItem.key}</DialogTitle>
      <DialogContent dividers>
        <Grid container>
          <BlockFormControlLabel
@@ -70,7 +69,7 @@ const ModulesDialog = ({
            label="Enabled"
          />
        </Grid>
-        <Box sx={{ mt: 2, mb: 1 }}>
+        <Box mt={2} mb={1}>
          <TextField
            name="license"
            label="License Key"
@@ -86,7 +85,7 @@ const ModulesDialog = ({
        <Button
          startIcon={<CancelIcon />}
          variant="outlined"
-          onClick={onClose}
+          onClick={close}
          color="secondary"
        >
          {LL.CANCEL()}
@@ -94,7 +93,7 @@ const ModulesDialog = ({
        <Button
          startIcon={<DoneIcon />}
          variant="outlined"
-          onClick={handleSave}
+          onClick={save}
          color="primary"
        >
          {LL.UPDATE()}
@@ -1,46 +1,42 @@
-import { memo } from 'react';
-
 import CommentsDisabledOutlinedIcon from '@mui/icons-material/CommentsDisabledOutlined';
 import DeleteForeverIcon from '@mui/icons-material/DeleteForever';
-import DeleteOutlineIcon from '@mui/icons-material/DeleteOutlined';
+import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
 import EditOffOutlinedIcon from '@mui/icons-material/EditOffOutlined';
 import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
 import InsertCommentOutlinedIcon from '@mui/icons-material/InsertCommentOutlined';
 import StarIcon from '@mui/icons-material/Star';
-import StarOutlineIcon from '@mui/icons-material/StarOutlined';
+import StarOutlineIcon from '@mui/icons-material/StarOutline';
 import VisibilityOffOutlinedIcon from '@mui/icons-material/VisibilityOffOutlined';
 import VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined';
 import type { SvgIconProps } from '@mui/material';

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

-type IconPair = [
-  React.ComponentType<SvgIconProps>,
-  React.ComponentType<SvgIconProps>
-];
-
-const OPTION_ICONS: Record<OptionType, IconPair> = {
+const OPTION_ICONS: {
+  [type in OptionType]: [
+    React.ComponentType<SvgIconProps>,
+    React.ComponentType<SvgIconProps>
+  ];
+} = {
  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} />;
 };

-export default memo(OptionIcon);
+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;
@@ -1,5 +1,6 @@
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useBlocker } from 'react-router';
+import { toast } from 'react-toastify';

 import AddIcon from '@mui/icons-material/Add';
 import CancelIcon from '@mui/icons-material/Cancel';
@@ -25,82 +26,14 @@ import {
  SectionContent,
  useLayoutTitle
 } from 'components';
-import { toast } from 'components/toast';
 import { useI18nContext } from 'i18n/i18n-react';
-import { useInterval } from 'utils';

-import { readCommands, readSchedule, writeSchedule } from '../../api/app';
+import { readSchedule, writeSchedule } from '../../api/app';
 import SettingsSchedulerDialog from './SchedulerDialog';
 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 FLAG_ALL_DAYS = 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: FLAG_ALL_DAYS,
-  time: '',
-  cmd_name: '',
-  name: ''
-};
-
-const scheduleTheme = {
-  Table: `
-    --data-table-library_grid-template-columns: 36px 220px repeat(1, minmax(20px, 1fr)) 192px 160px;
-  `,
-  BaseRow: `
-    font-size: 14px;
-    .td {
-      height: 32px;
-    }
-  `,
-  BaseCell: `
-    &:nth-of-type(1) {
-      text-align: 8px;
-    }
-  `,
-  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_TIMER]: 'Timer',
-  [ScheduleFlag.SCHEDULE_CONDITION]: 'Condition',
-  [ScheduleFlag.SCHEDULE_ONCHANGE]: 'On Change'
-};
-
 const Scheduler = () => {
  const { LL, locale } = useI18nContext();
  const [numChanges, setNumChanges] = useState<number>(0);
@@ -120,11 +53,6 @@ const Scheduler = () => {
    initialData: []
  });

-  const { data: commandNames } = useRequest(readCommands, {
-    initialData: [],
-    initializing: true
-  });
-
  const { send: updateSchedule } = useRequest(
    (data: Schedule) => writeSchedule(data),
    {
@@ -132,7 +60,7 @@ const Scheduler = () => {
    }
  );

-  const hasScheduleChanged = (si: ScheduleItem) => {
+  function hasScheduleChanged(si: ScheduleItem) {
    return (
      si.id !== si.o_id ||
      (si.name || '') !== (si.o_name || '') ||
@@ -140,64 +68,97 @@ const Scheduler = () => {
      si.deleted !== si.o_deleted ||
      si.flags !== si.o_flags ||
      si.time !== si.o_time ||
-      si.cmd_name !== si.o_cmd_name
+      si.cmd !== si.o_cmd ||
+      si.value !== si.o_value
    );
-  };
-
-  useInterval(() => {
-    if (numChanges === 0) {
-      void fetchSchedule();
-    }
-  }, INTERVAL_DELAY);
+  }

  useEffect(() => {
    const formatter = new Intl.DateTimeFormat(locale, {
      weekday: 'short',
      timeZone: 'UTC'
    });
-    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`
-      );
+    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`);
    });
    setDow(days.map((date) => formatter.format(date)));
  }, [locale]);

-  const schedule_theme = useTheme(scheduleTheme);
+  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 saveSchedule = 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_name: condensed_si.cmd_name,
-            name: condensed_si.name
-          }))
+    await updateSchedule({
+      schedule: schedule
+        .filter((si) => !si.deleted)
+        .map((condensed_si) => ({
+          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);
      });
-      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);
-    }
  };

-  const editScheduleItem = (si: ScheduleItem) => {
+  const editScheduleItem = useCallback((si: ScheduleItem) => {
    setCreating(false);
    setSelectedScheduleItem(si);
    setDialogOpen(true);
    if (si.o_name === undefined) {
      si.o_name = si.name;
    }
-  };
+  }, []);

  const onDialogClose = () => {
    setDialogOpen(false);
@@ -213,7 +174,10 @@ const Scheduler = () => {
    setDialogOpen(false);
    void updateState(readSchedule(), (data: ScheduleItem[]) => {
      const new_data = creating
-        ? [...data, updatedItem]
+        ? [
+            ...data.filter((si) => creating || si.o_id !== updatedItem.o_id),
+            updatedItem
+          ]
        : data.map((si) =>
            si.id === updatedItem.id ? { ...si, ...updatedItem } : si
          );
@@ -226,56 +190,63 @@ const Scheduler = () => {

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

-  const filteredAndSortedSchedule = schedule
-    .filter((si: ScheduleItem) => !si.deleted)
-    .sort((a: ScheduleItem, b: ScheduleItem) => a.flags - b.flags);
-
-  const dayBox = (si: ScheduleItem, flag: number, isLast = false) => {
-    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>
-        {!isLast && <Divider orientation="vertical" flexItem />}
-      </>
-    );
-  };
-
-  const scheduleType = (si: ScheduleItem) => {
-    const label = scheduleTypeLabels[si.flags];
-
-    return (
-      <Box>
-        <Typography sx={{ fontSize: 11 }} color="primary">
-          {label || ''}
-        </Typography>
-      </Box>
-    );
-  };
-
  const renderSchedule = () => {
    if (!schedule) {
-      return (
-        <FormLoader onRetry={fetchSchedule} errorMessage={error?.message || ''} />
-      );
+      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: filteredAndSortedSchedule }}
+        data={{
+          nodes: schedule
+            .filter((si) => !si.deleted)
+            .sort((a, b) => a.flags - b.flags)
+        }}
        theme={schedule_theme}
        layout={{ custom: true }}
      >
@@ -285,10 +256,9 @@ const Scheduler = () => {
              <HeaderRow>
                <HeaderCell />
                <HeaderCell stiff>{LL.SCHEDULE(0)}</HeaderCell>
-                <HeaderCell stiff>
-                  {LL.TIME(0)}/{LL.CONDITION()}
-                </HeaderCell>
+                <HeaderCell stiff>{LL.TIME(0)}/Cond.</HeaderCell>
                <HeaderCell stiff>{LL.COMMAND(0)}</HeaderCell>
+                <HeaderCell stiff>{LL.VALUE(0)}</HeaderCell>
                <HeaderCell stiff>{LL.NAME(0)}</HeaderCell>
              </HeaderRow>
            </Header>
@@ -296,19 +266,22 @@ const Scheduler = () => {
              {tableList.map((si: ScheduleItem) => (
                <Row key={si.id} item={si} onClick={() => editScheduleItem(si)}>
                  <Cell stiff>
-                    <CircleIcon
-                      color={si.active ? 'success' : 'error'}
-                      sx={{
-                        fontSize: ICON_SIZE,
-                        ml: '4px',
-                        position: 'relative',
-                        top: '2px'
-                      }}
-                    />
+                    {si.active ? (
+                      <CircleIcon
+                        color="success"
+                        sx={{ fontSize: 16, verticalAlign: 'middle' }}
+                      />
+                    ) : (
+                      <CircleIcon
+                        color="error"
+                        sx={{ fontSize: 16, verticalAlign: 'middle' }}
+                      />
+                    )}
                  </Cell>
                  <Cell stiff>
                    <Stack spacing={0.5} direction="row">
-                      {si.flags > SCHEDULE_FLAG_THRESHOLD ? (
+                      <Divider orientation="vertical" flexItem />
+                      {si.flags > 127 ? (
                        scheduleType(si)
                      ) : (
                        <>
@@ -318,13 +291,14 @@ const Scheduler = () => {
                          {dayBox(si, ScheduleFlag.SCHEDULE_THU)}
                          {dayBox(si, ScheduleFlag.SCHEDULE_FRI)}
                          {dayBox(si, ScheduleFlag.SCHEDULE_SAT)}
-                          {dayBox(si, ScheduleFlag.SCHEDULE_SUN, true)}
+                          {dayBox(si, ScheduleFlag.SCHEDULE_SUN)}
                        </>
                      )}
                    </Stack>
                  </Cell>
-                  <Cell>{si.time === '' ? LL.SCHEDULER_HELP_2() : si.time}</Cell>
-                  <Cell>{si.cmd_name}</Cell>
+                  <Cell>{si.time}</Cell>
+                  <Cell>{si.cmd}</Cell>
+                  <Cell>{si.value}</Cell>
                  <Cell>{si.name}</Cell>
                </Row>
              ))}
@@ -338,9 +312,9 @@ const Scheduler = () => {
  return (
    <SectionContent>
      {blocker ? <BlockNavigation blocker={blocker} /> : null}
-      <Typography sx={{ mb: 2 }} color="warning" variant="body1">
-        {LL.SCHEDULER_HELP_1()}.
-      </Typography>
+      <Box mb={2} color="warning.main">
+        <Typography variant="body1">{LL.SCHEDULER_HELP_1()}.</Typography>
+      </Box>
      {renderSchedule()}

      {selectedScheduleItem && (
@@ -352,12 +326,11 @@ const Scheduler = () => {
          selectedItem={selectedScheduleItem}
          validator={schedulerItemValidation(schedule, selectedScheduleItem)}
          dow={dow}
-          commandNames={commandNames.map((ci) => ci.name)}
        />
      )}

-      <Box sx={{ display: 'flex', flexWrap: 'wrap' }}>
-        <Box sx={{ flexGrow: 1 }}>
+      <Box mt={1} display="flex" flexWrap="wrap">
+        <Box flexGrow={1}>
          {numChanges !== 0 && (
            <ButtonRow>
              <Button
@@ -379,7 +352,7 @@ const Scheduler = () => {
            </ButtonRow>
          )}
        </Box>
-        <Box sx={{ flexWrap: 'nowrap', whiteSpace: 'nowrap' }}>
+        <Box flexWrap="nowrap" whiteSpace="nowrap">
          <ButtonRow>
            <Button
              startIcon={<AddIcon />}
@@ -2,9 +2,9 @@ import { useEffect, useState } from 'react';

 import AddIcon from '@mui/icons-material/Add';
 import CancelIcon from '@mui/icons-material/Cancel';
-import CircleIcon from '@mui/icons-material/Circle';
 import DoneIcon from '@mui/icons-material/Done';
-import RemoveIcon from '@mui/icons-material/RemoveCircleOutlined';
+import PlayArrowIcon from '@mui/icons-material/PlayArrow';
+import RemoveIcon from '@mui/icons-material/RemoveCircleOutline';
 import {
  Box,
  Button,
@@ -13,8 +13,7 @@ import {
  DialogActions,
  DialogContent,
  DialogTitle,
-  Grid,
-  MenuItem,
+  Grid2 as Grid,
  TextField,
  ToggleButton,
  ToggleButtonGroup,
@@ -22,51 +21,16 @@ import {
 } from '@mui/material';

 import { dialogStyle } from 'CustomTheme';
+import type Schema from 'async-validator';
+import type { ValidateFieldsError } from 'async-validator';
 import { BlockFormControlLabel, ValidatedTextField } from 'components';
 import { useI18nContext } from 'i18n/i18n-react';
 import { updateValue } from 'utils';
-import { ValidationError, validate } from 'validators';
-import type Schema from 'validators/schema';
-import type { ValidateFieldsError } from 'validators/schema';
+import { validate } from 'validators';

 import { ScheduleFlag } from './types';
 import type { ScheduleItem } from './types';

-// Constants
-const FLAG_MASK_127 = 127;
-const SCHEDULE_TYPE_THRESHOLD = 127;
-const FLAG_ALL_DAYS = 127;
-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;
-
-const getFlagDOWnumber = (flags: string[]) =>
-  flags.reduce((acc, flag) => acc | Number(flag), 0) & FLAG_MASK_127;
-
-const getFlagDOWstring = (f: number) =>
-  FLAG_VALUES.filter((flag) => (f & flag) === flag).map((flag) => String(flag));
-
 interface SchedulerDialogProps {
  open: boolean;
  creating: boolean;
@@ -75,7 +39,6 @@ interface SchedulerDialogProps {
  selectedItem: ScheduleItem;
  validator: Schema;
  dow: string[];
-  commandNames: string[];
 }

 const SchedulerDialog = ({
@@ -85,120 +48,112 @@ const SchedulerDialog = ({
  onSave,
  selectedItem,
  validator,
-  dow,
-  commandNames
+  dow
 }: SchedulerDialogProps) => {
  const { LL } = useI18nContext();
  const [editItem, setEditItem] = useState<ScheduleItem>(selectedItem);
  const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();
+
  const [scheduleType, setScheduleType] = useState<ScheduleFlag>();

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

  useEffect(() => {
    if (open) {
      setFieldErrors(undefined);
      setEditItem(selectedItem);
+      // 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 <= SCHEDULE_TYPE_THRESHOLD
-          ? ScheduleFlag.SCHEDULE_DAY
-          : selectedItem.flags
+        selectedItem.flags < 128 ? ScheduleFlag.SCHEDULE_DAY : selectedItem.flags
      );
    }
  }, [open, selectedItem]);

-  const handleSave = async (itemToSave: ScheduleItem) => {
+  const save = async () => {
    try {
      setFieldErrors(undefined);
-      await validate(validator, itemToSave);
-      onSave(itemToSave);
+      await validate(validator, editItem);
+      onSave(editItem);
    } catch (error) {
-      setFieldErrors((error as ValidationError).fieldErrors);
+      setFieldErrors(error as ValidateFieldsError);
    }
  };

-  const save = async () => {
-    await handleSave(editItem);
+  const saveandactivate = async () => {
+    editItem.active = true;
+    try {
+      setFieldErrors(undefined);
+      await validate(validator, editItem);
+      onSave(editItem);
+    } catch (error) {
+      setFieldErrors(error as ValidateFieldsError);
+    }
  };

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

-  const DayOfWeekButton = (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>
-    );
+  const getFlagDOWnumber = (newFlag: string[]) => {
+    let new_flag = 0;
+    for (const entry of newFlag) {
+      new_flag |= Number(entry);
+    }
+    return new_flag & 127;
  };

-  const handleClose = (
-    _event: React.SyntheticEvent,
-    reason: 'backdropClick' | 'escapeKeyDown'
-  ) => {
+  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>
+  );
+
+  const handleClose = (_event, reason: 'backdropClick' | 'escapeKeyDown') => {
    if (reason !== 'backdropClick') {
      onClose();
    }
  };

-  const handleScheduleTypeChange = (
-    _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 ? FLAG_ALL_DAYS : flag;
-      setEditItem((prev) => ({ ...prev, time: '', flags: newFlags }));
-    }
-  };
-
-  const handleDOWChange = (
-    _event: React.SyntheticEvent<HTMLElement>,
-    flags: string[]
-  ) => {
-    const newFlags =
-      getFlagDOWnumber(flags) === 0 ? FLAG_ALL_DAYS : getFlagDOWnumber(flags);
-    setEditItem((prev) => ({ ...prev, flags: newFlags }));
-  };
-
-  const isDaySchedule = scheduleType === ScheduleFlag.SCHEDULE_DAY;
-  const isTimerSchedule = scheduleType === ScheduleFlag.SCHEDULE_TIMER;
-  const needsTimeField = isDaySchedule || isTimerSchedule;
-
-  const dowFlags = getFlagDOWstring(editItem.flags);
-
-  const timeFieldValue = needsTimeField
-    ? editItem.time === ''
-      ? DEFAULT_TIME
-      : editItem.time
-    : editItem.time === DEFAULT_TIME
-      ? ''
-      : editItem.time;
-
-  const timeFieldLabel = (() => {
-    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();
-    return LL.TIME(1);
-  })();
-
  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>
@@ -208,27 +163,47 @@ const SchedulerDialog = ({
          value={scheduleType}
          exclusive
          disabled={!creating}
-          onChange={handleScheduleTypeChange}
+          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 }
+              );
+            }
+          }}
        >
          <ToggleButton value={ScheduleFlag.SCHEDULE_DAY}>
            <Typography
-              sx={{ fontSize: TYPOGRAPHY_FONT_SIZE }}
-              color={isDaySchedule ? 'primary' : 'grey'}
+              sx={{ fontSize: 10 }}
+              color={scheduleType === ScheduleFlag.SCHEDULE_DAY ? 'primary' : 'grey'}
            >
              {LL.SCHEDULE(0)}
            </Typography>
          </ToggleButton>
          <ToggleButton value={ScheduleFlag.SCHEDULE_TIMER}>
            <Typography
-              sx={{ fontSize: TYPOGRAPHY_FONT_SIZE }}
-              color={isTimerSchedule ? 'primary' : 'grey'}
+              sx={{ fontSize: 10 }}
+              color={
+                scheduleType === ScheduleFlag.SCHEDULE_TIMER ? 'primary' : 'grey'
+              }
            >
              {LL.TIMER(0)}
            </Typography>
          </ToggleButton>
          <ToggleButton value={ScheduleFlag.SCHEDULE_ONCHANGE}>
            <Typography
-              sx={{ fontSize: TYPOGRAPHY_FONT_SIZE }}
+              sx={{ fontSize: 10 }}
              color={
                scheduleType === ScheduleFlag.SCHEDULE_ONCHANGE ? 'primary' : 'grey'
              }
@@ -238,7 +213,7 @@ const SchedulerDialog = ({
          </ToggleButton>
          <ToggleButton value={ScheduleFlag.SCHEDULE_CONDITION}>
            <Typography
-              sx={{ fontSize: TYPOGRAPHY_FONT_SIZE }}
+              sx={{ fontSize: 10 }}
              color={
                scheduleType === ScheduleFlag.SCHEDULE_CONDITION ? 'primary' : 'grey'
              }
@@ -246,91 +221,132 @@ const SchedulerDialog = ({
              {LL.CONDITION()}
            </Typography>
          </ToggleButton>
+          <ToggleButton value={ScheduleFlag.SCHEDULE_IMMEDIATE}>
+            <Typography
+              sx={{ fontSize: 10 }}
+              color={
+                scheduleType === ScheduleFlag.SCHEDULE_IMMEDIATE ? 'primary' : 'grey'
+              }
+            >
+              {LL.IMMEDIATE()}
+            </Typography>
+          </ToggleButton>
        </ToggleButtonGroup>

-        {isDaySchedule && (
+        {scheduleType === ScheduleFlag.SCHEDULE_DAY && (
          <ToggleButtonGroup
            size="small"
            color="secondary"
-            value={dowFlags}
-            onChange={handleDOWChange}
+            value={getFlagDOWstring(editItem.flags)}
+            onChange={(_event, flag: string[]) => {
+              setEditItem({ ...editItem, flags: getFlagDOWnumber(flag) });
+            }}
          >
-            {DAY_FLAGS.map(({ value, flag }) => (
-              <ToggleButton key={value} value={value}>
-                {DayOfWeekButton(flag)}
-              </ToggleButton>
-            ))}
+            <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>
          </ToggleButtonGroup>
        )}

-        <Grid container>
-          <BlockFormControlLabel
-            control={
-              <Checkbox
-                checked={editItem.active}
-                onChange={updateFormValue}
-                name="active"
+        {scheduleType !== ScheduleFlag.SCHEDULE_IMMEDIATE && (
+          <>
+            <Grid container>
+              <BlockFormControlLabel
+                control={
+                  <Checkbox
+                    checked={editItem.active}
+                    onChange={updateFormValue}
+                    name="active"
+                  />
+                }
+                label={LL.ACTIVE()}
              />
-            }
-            label={LL.ACTIVE()}
-          />
-          <CircleIcon
-            color={editItem.active ? 'success' : 'error'}
-            sx={{
-              fontSize: 16,
-              mt: '12px'
-            }}
-          />
-        </Grid>
-
-        <Grid container>
-          {needsTimeField ? (
-            <>
-              <TextField
-                name="time"
-                type="time"
-                label={timeFieldLabel}
-                value={timeFieldValue}
-                margin="normal"
-                onChange={updateFormValue}
-              />
-              {isTimerSchedule && (
-                <Typography sx={{ ml: 2, mt: 4 }} color="warning" variant="body2">
-                  00:00 = {LL.SCHEDULER_HELP_2()}
-                </Typography>
+            </Grid>
+            <Grid container>
+              {scheduleType === ScheduleFlag.SCHEDULE_DAY ||
+              scheduleType === ScheduleFlag.SCHEDULE_TIMER ? (
+                <>
+                  <TextField
+                    name="time"
+                    type="time"
+                    label={
+                      scheduleType === ScheduleFlag.SCHEDULE_TIMER
+                        ? LL.TIMER(1)
+                        : LL.TIME(1)
+                    }
+                    value={editItem.time === '' ? '00:00' : editItem.time}
+                    margin="normal"
+                    onChange={updateFormValue}
+                  />
+                  {scheduleType === ScheduleFlag.SCHEDULE_TIMER && (
+                    <Box color="warning.main" ml={2} mt={4}>
+                      <Typography variant="body2">
+                        {LL.SCHEDULER_HELP_2()}
+                      </Typography>
+                    </Box>
+                  )}
+                </>
+              ) : (
+                <TextField
+                  name="time"
+                  label={
+                    scheduleType === ScheduleFlag.SCHEDULE_CONDITION
+                      ? LL.CONDITION()
+                      : scheduleType === ScheduleFlag.SCHEDULE_ONCHANGE
+                        ? LL.ONCHANGE()
+                        : LL.IMMEDIATE()
+                  }
+                  multiline
+                  fullWidth
+                  value={editItem.time === '00:00' ? '' : editItem.time}
+                  margin="normal"
+                  onChange={updateFormValue}
+                />
              )}
-            </>
-          ) : (
-            <TextField
-              name="time"
-              label={timeFieldLabel}
-              multiline
-              fullWidth
-              value={timeFieldValue}
-              margin="normal"
-              onChange={updateFormValue}
-            />
-          )}
-        </Grid>
-        <TextField
-          name="cmd_name"
+            </Grid>
+          </>
+        )}
+        <ValidatedTextField
+          fieldErrors={fieldErrors}
+          name="cmd"
          label={LL.COMMAND(0)}
-          value={editItem.cmd_name}
+          multiline
          fullWidth
-          select
+          value={editItem.cmd}
          margin="normal"
          onChange={updateFormValue}
-        >
-          {commandNames.map((name) => (
-            <MenuItem key={name} value={name}>
-              {name}
-            </MenuItem>
-          ))}
-        </TextField>
+        />
+        <TextField
+          name="value"
+          label={LL.VALUE(0)}
+          multiline
+          margin="normal"
+          fullWidth
+          value={editItem.value}
+          onChange={updateFormValue}
+        />
        <ValidatedTextField
-          fieldErrors={fieldErrors || {}}
+          fieldErrors={fieldErrors}
          name="name"
-          label={LL.NAME(0)}
+          label={LL.NAME(0) + ' (' + LL.OPTIONAL() + ')'}
          value={editItem.name}
          fullWidth
          margin="normal"
@@ -340,7 +356,7 @@ const SchedulerDialog = ({

      <DialogActions>
        {!creating && (
-          <Box sx={{ flexGrow: 1 }}>
+          <Box flexGrow={1}>
            <Button
              startIcon={<RemoveIcon />}
              variant="outlined"
@@ -367,6 +383,16 @@ const SchedulerDialog = ({
        >
          {creating ? LL.ADD(0) : LL.UPDATE()}
        </Button>
+        {scheduleType === ScheduleFlag.SCHEDULE_IMMEDIATE && editItem.cmd !== '' && (
+          <Button
+            startIcon={<PlayArrowIcon />}
+            variant="outlined"
+            onClick={saveandactivate}
+            color="success"
+          >
+            {LL.EXECUTE()}
+          </Button>
+        )}
      </DialogActions>
    </Dialog>
  );
@@ -1,4 +1,5 @@
-import { useContext, useRef, useState } from 'react';
+import { useContext, useState } from 'react';
+import { toast } from 'react-toastify';

 import AddCircleOutlineOutlinedIcon from '@mui/icons-material/AddCircleOutlineOutlined';
 import KeyboardArrowDownOutlinedIcon from '@mui/icons-material/KeyboardArrowDownOutlined';
@@ -20,7 +21,6 @@ import { useTheme } from '@table-library/react-table-library/theme';
 import type { State } from '@table-library/react-table-library/types/common';
 import { useRequest } from 'alova/client';
 import { SectionContent, useLayoutTitle } from 'components';
-import { toast } from 'components/toast';
 import { AuthenticatedContext } from 'contexts/authentication';
 import { useI18nContext } from 'i18n/i18n-react';
 import { useInterval } from 'utils';
@@ -49,74 +49,6 @@ 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 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;
-      color: white;
-    }
-  `,
-  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);
@@ -127,22 +59,18 @@ const Sensors = () => {
  const [temperatureDialogOpen, setTemperatureDialogOpen] = useState<boolean>(false);
  const [analogDialogOpen, setAnalogDialogOpen] = useState<boolean>(false);
  const [creating, setCreating] = useState<boolean>(false);
-  const firstAvailableGPIO = useRef<number>(undefined);

-  const { data: sensorData, send: fetchSensorData } = useRequest(readSensorData, {
-    initialData: {
-      ts: [],
-      as: [],
-      analog_enabled: false,
-      available_gpios: [] as number[],
-      platform: 'ESP32'
+  const { data: sensorData, send: fetchSensorData } = useRequest(
+    () => readSensorData(),
+    {
+      initialData: {
+        ts: [],
+        as: [],
+        analog_enabled: false,
+        platform: 'ESP32'
+      }
    }
-  }).onSuccess((event) => {
-    // store the first available GPIO in a ref
-    if (event.data.available_gpios.length > 0) {
-      firstAvailableGPIO.current = event.data.available_gpios[0];
-    }
-  });
+  );

  const { send: sendTemperatureSensor } = useRequest(
    (data: WriteTemperatureSensor) => writeTemperatureSensor(data),
@@ -164,8 +92,110 @@ const Sensors = () => {
    }
  });

-  const temperature_theme = useTheme([common_theme, temperature_theme_config]);
-  const analog_theme = useTheme([common_theme, analog_theme_config]);
+  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;
+      }
+      .th {
+        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 = useTheme([
+    common_theme,
+    {
+      Table: `
+        --data-table-library_grid-template-columns: minmax(0, 1fr) 35%;
+      `
+    }
+  ]);
+
+  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) => {
    if (state.sortKey === sortKey && state.reverse) {
@@ -188,20 +218,11 @@ const Sensors = () => {
      },
      sortToggleType: SortToggleType.AlternateWithReset,
      sortFns: {
-        GPIO: (array) =>
-          [...array].sort(
-            (a, b) => ((a as AnalogSensor)?.g ?? 0) - ((b as AnalogSensor)?.g ?? 0)
-          ),
-        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)
+        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)
      }
    }
  );
@@ -217,15 +238,9 @@ const Sensors = () => {
      },
      sortToggleType: SortToggleType.AlternateWithReset,
      sortFns: {
-        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)
-          )
+        // 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)
      }
    }
  );
@@ -233,25 +248,24 @@ const Sensors = () => {
  useLayoutTitle(LL.SENSORS());

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

-  const formatValue = (value: unknown, uom: DeviceValueUOM) => {
+  function formatValue(value: unknown, uom: DeviceValueUOM) {
    if (value === undefined) {
      return '';
    }
@@ -280,7 +294,7 @@ const Sensors = () => {
      default:
        return new Intl.NumberFormat().format(value) + ' ' + DeviceValueUOM_s[uom];
    }
-  };
+  }

  const updateTemperatureSensor = (ts: TemperatureSensor) => {
    if (me.admin) {
@@ -296,12 +310,7 @@ const Sensors = () => {
  };

  const onTemperatureDialogSave = async (ts: TemperatureSensor) => {
-    await sendTemperatureSensor({
-      id: ts.id,
-      name: ts.n,
-      offset: ts.o,
-      is_system: ts.s
-    })
+    await sendTemperatureSensor({ id: ts.id, name: ts.n, offset: ts.o })
      .then(() => {
        toast.success(LL.UPDATED_OF(LL.SENSOR(1)));
      })
@@ -330,22 +339,17 @@ const Sensors = () => {
  };

  const addAnalogSensor = () => {
-    if (firstAvailableGPIO.current === undefined) {
-      toast.error(LL.NO_GPIO());
-      return;
-    }
    setCreating(true);
    setSelectedAnalogSensor({
-      id: Math.floor(Math.random() * (MAX_TEMP_ID - MIN_TEMP_ID) + MIN_TEMP_ID),
+      id: Math.floor(Math.random() * (Math.floor(200) - 100) + 100),
      n: '',
-      g: firstAvailableGPIO.current,
-      u: DeviceValueUOM.NONE,
+      g: 21, // default GPIO 21 which is safe for all platforms
+      u: 0,
      v: 0,
      o: 0,
+      t: 0,
      f: 1,
-      t: AnalogType.DIGITAL_IN, // default to digital in 1
      d: false,
-      s: false,
      o_n: ''
    });
    setAnalogDialogOpen(true);
@@ -360,8 +364,7 @@ const Sensors = () => {
      factor: as.f,
      uom: as.u,
      type: as.t,
-      deleted: as.d,
-      is_system: as.s
+      deleted: as.d
    })
      .then(() => {
        toast.success(LL.UPDATED_OF(LL.ANALOG_SENSOR(2)));
@@ -376,7 +379,7 @@ const Sensors = () => {
      });
  };

-  const RenderAnalogSensors = (
+  const RenderAnalogSensors = () => (
    <Table
      data={{ nodes: sensorData.as }}
      theme={analog_theme}
@@ -390,7 +393,7 @@ const Sensors = () => {
              <HeaderCell stiff>
                <Button
                  fullWidth
-                  style={HEADER_BUTTON_STYLE}
+                  style={{ fontSize: '14px', justifyContent: 'flex-start' }}
                  endIcon={getSortIcon(analog_sort.state, 'GPIO')}
                  onClick={() => analog_sort.fns.onToggleSort({ sortKey: 'GPIO' })}
                >
@@ -400,7 +403,7 @@ const Sensors = () => {
              <HeaderCell resize>
                <Button
                  fullWidth
-                  style={HEADER_BUTTON_STYLE}
+                  style={{ fontSize: '14px', justifyContent: 'flex-start' }}
                  endIcon={getSortIcon(analog_sort.state, 'NAME')}
                  onClick={() => analog_sort.fns.onToggleSort({ sortKey: 'NAME' })}
                >
@@ -410,7 +413,7 @@ const Sensors = () => {
              <HeaderCell stiff>
                <Button
                  fullWidth
-                  style={HEADER_BUTTON_STYLE}
+                  style={{ fontSize: '14px', justifyContent: 'flex-start' }}
                  endIcon={getSortIcon(analog_sort.state, 'TYPE')}
                  onClick={() => analog_sort.fns.onToggleSort({ sortKey: 'TYPE' })}
                >
@@ -420,7 +423,7 @@ const Sensors = () => {
              <HeaderCell stiff>
                <Button
                  fullWidth
-                  style={HEADER_BUTTON_STYLE_END}
+                  style={{ fontSize: '14px', justifyContent: 'flex-end' }}
                  endIcon={getSortIcon(analog_sort.state, 'VALUE')}
                  onClick={() => analog_sort.fns.onToggleSort({ sortKey: 'VALUE' })}
                >
@@ -430,24 +433,16 @@ const Sensors = () => {
            </HeaderRow>
          </Header>
          <Body>
-            {tableList.map((as: AnalogSensor) => (
-              <Row
-                style={{ color: as.s ? 'grey' : 'inherit' }}
-                key={as.id}
-                item={as}
-                onClick={() => updateAnalogSensor(as)}
-              >
-                <Cell stiff>{as.g}</Cell>
-                <Cell>{as.n}</Cell>
-                <Cell stiff>{AnalogTypeNames[as.t - 1]} </Cell>
-                {(as.t === AnalogType.DIGITAL_OUT &&
-                  as.g !== GPIO_25 &&
-                  as.g !== GPIO_26) ||
-                as.t === AnalogType.DIGITAL_IN ||
-                as.t === AnalogType.PULSE ? (
-                  <Cell stiff>{as.v ? LL.ON() : LL.OFF()}</Cell>
+            {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 ? (
+                  <Cell stiff>{a.v ? LL.ON() : LL.OFF()}</Cell>
                ) : (
-                  <Cell stiff>{formatValue(as.v, as.u)}</Cell>
+                  <Cell stiff>{a.t ? formatValue(a.v, a.u) : ''}</Cell>
                )}
              </Row>
            ))}
@@ -457,67 +452,12 @@ const Sensors = () => {
    </Table>
  );

-  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={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
-                style={{ color: ts.s ? 'grey' : 'inherit' }}
-                key={ts.id}
-                item={ts}
-                onClick={() => updateTemperatureSensor(ts)}
-              >
-                <Cell>{ts.n}</Cell>
-                <Cell>{formatValue(ts.t, ts.u)}</Cell>
-              </Row>
-            ))}
-          </Body>
-        </>
-      )}
-    </Table>
-  );
-
  return (
    <SectionContent>
-      <Typography sx={{ pb: 1 }} variant="h6" color="primary">
+      <Typography sx={{ pb: 1 }} variant="h6" color="secondary">
        {LL.TEMP_SENSORS()}
      </Typography>
-      {RenderTemperatureSensors}
+      <RenderTemperatureSensors />
      {selectedTemperatureSensor && (
        <DashboardSensorsTemperatureDialog
          open={temperatureDialogOpen}
@@ -530,10 +470,10 @@ const Sensors = () => {
          )}
        />
      )}
-      <Typography sx={{ pt: 4, pb: 1 }} variant="h6" color="primary">
+      <Typography sx={{ pt: 4, pb: 1 }} variant="h6" color="secondary">
        {LL.ANALOG_SENSORS()}
      </Typography>
-      {RenderAnalogSensors}
+      <RenderAnalogSensors />
      {selectedAnalogSensor && (
        <DashboardSensorsAnalogDialog
          open={analogDialogOpen}
@@ -541,20 +481,16 @@ const Sensors = () => {
          onSave={onAnalogDialogSave}
          creating={creating}
          selectedItem={selectedAnalogSensor}
-          analogGPIOList={sensorData.available_gpios}
-          disabledTypeList={sensorData.exclude_types}
-          validator={analogSensorItemValidation(sensorData.as, selectedAnalogSensor)}
+          validator={analogSensorItemValidation(
+            sensorData.as,
+            selectedAnalogSensor,
+            creating,
+            sensorData.platform
+          )}
        />
      )}
      {sensorData?.analog_enabled === true && me.admin && (
-        <Box
-          sx={{
-            mt: 2,
-            display: 'flex',
-            flexWrap: 'wrap',
-            justifyContent: 'flex-end'
-          }}
-        >
+        <Box mt={1} display="flex" flexWrap="wrap" justifyContent="flex-end">
          <Button
            variant="outlined"
            color="primary"
@@ -1,8 +1,7 @@
 import { useEffect, useState } from 'react';

 import CancelIcon from '@mui/icons-material/Cancel';
-import DoneIcon from '@mui/icons-material/Done';
-import RemoveIcon from '@mui/icons-material/RemoveCircleOutlined';
+import RemoveIcon from '@mui/icons-material/RemoveCircleOutline';
 import WarningIcon from '@mui/icons-material/Warning';
 import {
  Box,
@@ -11,19 +10,20 @@ import {
  DialogActions,
  DialogContent,
  DialogTitle,
-  Grid,
+  Grid2 as Grid,
  InputAdornment,
  MenuItem,
+  TextField,
  Typography
 } from '@mui/material';

 import { dialogStyle } from 'CustomTheme';
+import type Schema from 'async-validator';
+import type { ValidateFieldsError } from 'async-validator';
 import { ValidatedTextField } from 'components';
 import { useI18nContext } from 'i18n/i18n-react';
 import { numberValue, updateValue } from 'utils';
-import { ValidationError, validate } from 'validators';
-import type Schema from 'validators/schema';
-import type { ValidateFieldsError } from 'validators/schema';
+import { validate } from 'validators';

 import { AnalogType, AnalogTypeNames, DeviceValueUOM_s } from './types';
 import type { AnalogSensor } from './types';
@@ -34,8 +34,6 @@ interface DashboardSensorsAnalogDialogProps {
  onSave: (as: AnalogSensor) => void;
  creating: boolean;
  selectedItem: AnalogSensor;
-  analogGPIOList: number[];
-  disabledTypeList: number[];
  validator: Schema;
 }

@@ -45,81 +43,13 @@ const SensorsAnalogDialog = ({
  onSave,
  creating,
  selectedItem,
-  analogGPIOList,
-  disabledTypeList,
  validator
 }: DashboardSensorsAnalogDialogProps) => {
  const { LL } = useI18nContext();
  const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();
  const [editItem, setEditItem] = useState<AnalogSensor>(selectedItem);
+  const updateFormValue = updateValue(setEditItem);

-  const updateFormValue = updateValue((updater) =>
-    setEditItem(
-      (prev) =>
-        updater(
-          prev as unknown as Record<string, unknown>
-        ) as unknown as AnalogSensor
-    )
-  );
-
-  const isCounterOrRate =
-    editItem.t === AnalogType.COUNTER ||
-    editItem.t === AnalogType.RATE ||
-    (editItem.t >= AnalogType.CNT_0 && editItem.t <= AnalogType.CNT_2);
-  const isCounter =
-    editItem.t === AnalogType.COUNTER ||
-    (editItem.t >= AnalogType.CNT_0 && editItem.t <= AnalogType.CNT_2);
-  const isFreqType =
-    editItem.t >= AnalogType.FREQ_0 && editItem.t <= AnalogType.FREQ_2;
-  const isPWM =
-    editItem.t === AnalogType.PWM_0 ||
-    editItem.t === AnalogType.PWM_1 ||
-    editItem.t === AnalogType.PWM_2;
-  const isDACOutGPIO =
-    editItem.t === AnalogType.DIGITAL_OUT &&
-    (editItem.g === 25 || editItem.g === 26);
-  const isDigitalOutGPIO =
-    editItem.t === AnalogType.DIGITAL_OUT && editItem.g !== 25 && editItem.g !== 26;
-
-  const analogTypeMenuItems = AnalogTypeNames.map((val, i) => ({
-    name: val,
-    value: i + 1
-  }))
-    .sort((a, b) => a.name.localeCompare(b.name))
-    .map(({ name, value }) => (
-      <MenuItem
-        key={name}
-        value={value}
-        disabled={disabledTypeList?.includes(value)}
-      >
-        {name}
-      </MenuItem>
-    ));
-
-  const uomMenuItems = DeviceValueUOM_s.map((val, i) => (
-    <MenuItem key={val} value={i}>
-      {val}
-    </MenuItem>
-  ));
-
-  const analogGPIOMenuItems = () =>
-    // add selectedItem.g to the list
-    [
-      ...(analogGPIOList?.includes(selectedItem.g) || selectedItem.g === undefined
-        ? analogGPIOList
-        : [selectedItem.g, ...analogGPIOList])
-    ]
-      .filter((gpio, idx, arr) => arr.indexOf(gpio) === idx)
-      .sort((a, b) => a - b)
-      .map((gpio: number) => {
-        return (
-          <MenuItem key={gpio} value={gpio}>
-            {gpio}
-          </MenuItem>
-        );
-      });
-
-  // Reset form when dialog opens or selectedItem changes
  useEffect(() => {
    if (open) {
      setFieldErrors(undefined);
@@ -127,10 +57,7 @@ const SensorsAnalogDialog = ({
    }
  }, [open, selectedItem]);

-  const handleClose = (
-    _event: React.SyntheticEvent,
-    reason: 'backdropClick' | 'escapeKeyDown'
-  ) => {
+  const handleClose = (_event, reason: 'backdropClick' | 'escapeKeyDown') => {
    if (reason !== 'backdropClick') {
      onClose();
    }
@@ -142,99 +69,97 @@ const SensorsAnalogDialog = ({
      await validate(validator, editItem);
      onSave(editItem);
    } catch (error) {
-      setFieldErrors((error as ValidationError).fieldErrors);
+      setFieldErrors(error as ValidateFieldsError);
    }
  };

  const remove = () => {
-    onSave({ ...editItem, d: true });
+    editItem.d = true;
+    onSave(editItem);
  };

-  const dialogTitle = `${creating ? LL.ADD(1) + ' ' + LL.NEW(0) : LL.EDIT()} ${LL.ANALOG_SENSOR(0)}`;
-
  return (
    <Dialog sx={dialogStyle} open={open} onClose={handleClose}>
-      <DialogTitle>{dialogTitle}</DialogTitle>
+      <DialogTitle>
+        {creating ? LL.ADD(1) + ' ' + LL.NEW(0) : LL.EDIT()}&nbsp;
+        {LL.ANALOG_SENSOR(0)}
+      </DialogTitle>
      <DialogContent dividers>
        <Grid container spacing={2}>
-          <ValidatedTextField
-            name="g"
-            label="GPIO"
-            value={editItem.g}
-            sx={{ width: '9ch' }}
-            disabled={editItem.s || !creating}
-            select
-            onChange={updateFormValue}
-          >
-            {analogGPIOMenuItems()}
-          </ValidatedTextField>
          <Grid>
            <ValidatedTextField
+              fieldErrors={fieldErrors}
+              name="g"
+              label="GPIO"
+              sx={{ width: '11ch' }}
+              value={numberValue(editItem.g)}
+              type="number"
+              variant="outlined"
+              onChange={updateFormValue}
+            />
+          </Grid>
+          {creating && (
+            <Grid>
+              <Box color="warning.main" mt={2}>
+                <Typography variant="body2">{LL.WARN_GPIO()}</Typography>
+              </Box>
+            </Grid>
+          )}
+          <Grid>
+            <ValidatedTextField
+              fieldErrors={fieldErrors}
              name="n"
              label={LL.NAME(0)}
              value={editItem.n}
              fullWidth
+              variant="outlined"
              onChange={updateFormValue}
            />
          </Grid>
          <Grid>
-            <ValidatedTextField
+            <TextField
              name="t"
              label={LL.TYPE(0)}
              value={editItem.t}
              fullWidth
              select
              onChange={updateFormValue}
-              disabled={editItem.s}
            >
-              {analogTypeMenuItems}
-            </ValidatedTextField>
+              {AnalogTypeNames.map((val, i) => (
+                <MenuItem key={val} value={i}>
+                  {val}
+                </MenuItem>
+              ))}
+            </TextField>
          </Grid>
-          {(isCounterOrRate ||
-            isFreqType ||
-            editItem.t === AnalogType.ADC ||
-            editItem.t === AnalogType.TIMER) && (
+          {editItem.t >= AnalogType.COUNTER && editItem.t <= AnalogType.RATE && (
            <Grid>
-              <ValidatedTextField
+              <TextField
                name="u"
                label={LL.UNIT()}
                value={editItem.u}
                sx={{ width: '15ch' }}
                select
                onChange={updateFormValue}
-                disabled={editItem.s}
              >
-                {uomMenuItems}
-              </ValidatedTextField>
-            </Grid>
-          )}
-          {editItem.t === AnalogType.DIGITAL_IN && (
-            <Grid>
-              <ValidatedTextField
-                name="f"
-                label={LL.POLARITY()}
-                value={editItem.f}
-                sx={{ width: '15ch' }}
-                fullWidth
-                select
-                onChange={updateFormValue}
-                disabled={editItem.s}
-              >
-                <MenuItem value={1}>{LL.ACTIVEHIGH()}</MenuItem>
-                <MenuItem value={0}>{LL.ACTIVELOW()}</MenuItem>
-              </ValidatedTextField>
+                {DeviceValueUOM_s.map((val, i) => (
+                  <MenuItem key={val} value={i}>
+                    {val}
+                  </MenuItem>
+                ))}
+              </TextField>
            </Grid>
          )}
          {editItem.t === AnalogType.ADC && (
            <Grid>
-              <ValidatedTextField
+              <TextField
                name="o"
                label={LL.OFFSET()}
                value={numberValue(editItem.o)}
                type="number"
                sx={{ width: '11ch' }}
+                variant="outlined"
                onChange={updateFormValue}
-                disabled={editItem.s}
                slotProps={{
                  input: {
                    startAdornment: (
@@ -246,152 +171,118 @@ const SensorsAnalogDialog = ({
              />
            </Grid>
          )}
-          {editItem.t === AnalogType.NTC && (
+          {editItem.t === AnalogType.COUNTER && (
            <Grid>
-              <ValidatedTextField
-                name="o"
-                label={LL.OFFSET()}
-                value={numberValue(editItem.o)}
-                sx={{ width: '11ch' }}
-                type="number"
-                onChange={updateFormValue}
-                disabled={editItem.s}
-                slotProps={{
-                  input: {
-                    startAdornment: (
-                      <InputAdornment position="start">°C</InputAdornment>
-                    )
-                  },
-                  htmlInput: { min: '-20', max: '20', step: '0.1' }
-                }}
-              />
-            </Grid>
-          )}
-          {isCounter && (
-            <Grid>
-              <ValidatedTextField
+              <TextField
                name="o"
                label={LL.STARTVALUE()}
                value={numberValue(editItem.o)}
                type="number"
                sx={{ width: '11ch' }}
+                variant="outlined"
                onChange={updateFormValue}
-                disabled={editItem.s}
                slotProps={{
                  htmlInput: { step: '0.001' }
                }}
              />
            </Grid>
          )}
-          {editItem.t === AnalogType.RGB && (
+          {editItem.t >= AnalogType.COUNTER && editItem.t <= AnalogType.RATE && (
            <Grid>
-              <ValidatedTextField
-                name="o"
-                label={'RGB ' + LL.VALUE(0)}
-                value={numberValue(editItem.o)}
-                type="number"
-                sx={{ width: '11ch' }}
-                onChange={updateFormValue}
-                disabled={editItem.s}
-              />
-            </Grid>
-          )}
-          {(isCounterOrRate ||
-            isFreqType ||
-            editItem.t === AnalogType.ADC ||
-            editItem.t === AnalogType.TIMER) && (
-            <Grid>
-              <ValidatedTextField
+              <TextField
                name="f"
                label={LL.FACTOR()}
                value={numberValue(editItem.f)}
-                sx={{ width: '14ch' }}
+                sx={{ width: '11ch' }}
                type="number"
+                variant="outlined"
                onChange={updateFormValue}
-                disabled={editItem.s}
                slotProps={{
                  htmlInput: { step: '0.001' }
                }}
              />
            </Grid>
          )}
-          {isDACOutGPIO && (
-            <Grid>
-              <ValidatedTextField
-                name="o"
-                label={LL.VALUE(0)}
-                value={numberValue(editItem.o)}
-                sx={{ width: '11ch' }}
-                type="number"
-                onChange={updateFormValue}
-                disabled={editItem.s}
-                slotProps={{
-                  htmlInput: { min: '0', max: '255', step: '1' }
-                }}
-              />
-            </Grid>
-          )}
-          {isDigitalOutGPIO && (
-            <>
+          {editItem.t === AnalogType.DIGITAL_OUT &&
+            (editItem.g === 25 || editItem.g === 26) && (
              <Grid>
-                <ValidatedTextField
+                <TextField
                  name="o"
                  label={LL.VALUE(0)}
                  value={numberValue(editItem.o)}
-                  select
+                  sx={{ width: '11ch' }}
+                  type="number"
+                  variant="outlined"
                  onChange={updateFormValue}
-                  disabled={editItem.s}
-                >
-                  <MenuItem value={0}>{LL.OFF()}</MenuItem>
-                  <MenuItem value={1}>{LL.ON()}</MenuItem>
-                </ValidatedTextField>
+                  slotProps={{
+                    htmlInput: { min: '0', max: '255', step: '1' }
+                  }}
+                />
              </Grid>
-              <Grid>
-                <ValidatedTextField
-                  name="f"
-                  label={LL.POLARITY()}
-                  value={editItem.f}
-                  sx={{ width: '15ch' }}
-                  select
-                  onChange={updateFormValue}
-                  disabled={editItem.s}
-                >
-                  <MenuItem value={1}>{LL.ACTIVEHIGH()}</MenuItem>
-                  <MenuItem value={-1}>{LL.ACTIVELOW()}</MenuItem>
-                </ValidatedTextField>
-              </Grid>
-              <Grid>
-                <ValidatedTextField
-                  name="u"
-                  label={LL.STARTVALUE()}
-                  sx={{ width: '15ch' }}
-                  value={editItem.u}
-                  select
-                  onChange={updateFormValue}
-                  disabled={editItem.s}
-                >
-                  <MenuItem value={0}>{LL.UNCHANGED()}</MenuItem>
-                  <MenuItem value={1}>
-                    {LL.ALWAYS()}&nbsp;{LL.OFF()}
-                  </MenuItem>
-                  <MenuItem value={2}>
-                    {LL.ALWAYS()}&nbsp;{LL.ON()}
-                  </MenuItem>
-                </ValidatedTextField>
-              </Grid>
-            </>
-          )}
-          {isPWM && (
+            )}
+          {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>
-                <ValidatedTextField
+                <TextField
                  name="f"
                  label={LL.FREQ()}
                  value={numberValue(editItem.f)}
                  type="number"
+                  variant="outlined"
                  sx={{ width: '11ch' }}
                  onChange={updateFormValue}
-                  disabled={editItem.s}
                  slotProps={{
                    input: {
                      startAdornment: (
@@ -403,14 +294,14 @@ const SensorsAnalogDialog = ({
                />
              </Grid>
              <Grid>
-                <ValidatedTextField
+                <TextField
                  name="o"
                  label={LL.DUTY_CYCLE()}
                  value={numberValue(editItem.o)}
                  type="number"
                  sx={{ width: '11ch' }}
+                  variant="outlined"
                  onChange={updateFormValue}
-                  disabled={editItem.s}
                  slotProps={{
                    input: {
                      startAdornment: (
@@ -423,81 +314,13 @@ const SensorsAnalogDialog = ({
              </Grid>
            </>
          )}
-          {editItem.t === AnalogType.PULSE && (
-            <>
-              <Grid>
-                <ValidatedTextField
-                  name="o"
-                  label={LL.POLARITY()}
-                  value={editItem.o}
-                  sx={{ width: '15ch' }}
-                  select
-                  onChange={updateFormValue}
-                  disabled={editItem.s}
-                >
-                  <MenuItem value={0}>{LL.ACTIVEHIGH()}</MenuItem>
-                  <MenuItem value={1}>{LL.ACTIVELOW()}</MenuItem>
-                </ValidatedTextField>
-              </Grid>
-              <Grid>
-                <ValidatedTextField
-                  name="f"
-                  label="Pulse"
-                  value={numberValue(editItem.f)}
-                  type="number"
-                  sx={{ width: '15ch' }}
-                  onChange={updateFormValue}
-                  disabled={editItem.s}
-                  slotProps={{
-                    input: {
-                      startAdornment: (
-                        <InputAdornment position="start">s</InputAdornment>
-                      )
-                    },
-                    htmlInput: { min: '0', max: '10000', step: '0.1' }
-                  }}
-                />
-              </Grid>
-            </>
-          )}
        </Grid>
-        {fieldErrors && Object.keys(fieldErrors).length > 0 && (
-          <Box sx={{ mt: 1 }}>
-            {Object.values(fieldErrors).map((errArr, idx) =>
-              Array.isArray(errArr)
-                ? errArr.map((err, j) => (
-                    <Typography
-                      key={`${idx}-${j}`}
-                      color="error"
-                      variant="caption"
-                      sx={{ display: 'block' }}
-                    >
-                      {err.message}
-                    </Typography>
-                  ))
-                : null
-            )}
-          </Box>
-        )}
-        {editItem.s && (
-          <Grid>
-            <Typography sx={{ mt: 1 }} color="warning" variant="body2">
-              <WarningIcon
-                fontSize="small"
-                sx={{ mr: 1, verticalAlign: 'middle' }}
-                color="warning"
-              />
-              {LL.SYSTEM(0)} {LL.SENSOR(0)}
-            </Typography>
-          </Grid>
-        )}
      </DialogContent>
      <DialogActions>
        {!creating && (
-          <Box sx={{ flexGrow: 1, '& button': { mt: 0 } }}>
+          <Box flexGrow={1} sx={{ '& button': { mt: 0 } }}>
            <Button
              startIcon={<RemoveIcon />}
-              disabled={editItem.s}
              variant="outlined"
              color="warning"
              onClick={remove}
@@ -515,7 +338,7 @@ const SensorsAnalogDialog = ({
          {LL.CANCEL()}
        </Button>
        <Button
-          startIcon={<DoneIcon />}
+          startIcon={<WarningIcon color="warning" />}
          variant="outlined"
          onClick={save}
          color="primary"
@@ -1,27 +1,27 @@
 import { useEffect, useState } from 'react';

 import CancelIcon from '@mui/icons-material/Cancel';
-import DoneIcon from '@mui/icons-material/Done';
 import WarningIcon from '@mui/icons-material/Warning';
 import {
+  Box,
  Button,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
-  Grid,
+  Grid2 as Grid,
  InputAdornment,
  TextField,
  Typography
 } from '@mui/material';

 import { dialogStyle } from 'CustomTheme';
+import type Schema from 'async-validator';
+import type { ValidateFieldsError } from 'async-validator';
 import { ValidatedTextField } from 'components';
 import { useI18nContext } from 'i18n/i18n-react';
 import { numberValue, updateValue } from 'utils';
-import { ValidationError, validate } from 'validators';
-import type Schema from 'validators/schema';
-import type { ValidateFieldsError } from 'validators/schema';
+import { validate } from 'validators';

 import type { TemperatureSensor } from './types';

@@ -33,12 +33,6 @@ 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,
@@ -49,14 +43,7 @@ const SensorsTemperatureDialog = ({
  const { LL } = useI18nContext();
  const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();
  const [editItem, setEditItem] = useState<TemperatureSensor>(selectedItem);
-
-  const updateFormValue = updateValue(
-    setEditItem as unknown as (
-      updater: (
-        prevState: Readonly<Record<string, unknown>>
-      ) => Record<string, unknown>
-    ) => void
-  );
+  const updateFormValue = updateValue(setEditItem);

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

-  const handleClose = (_event: React.SyntheticEvent, reason?: string) => {
+  const handleClose = (_event, reason: 'backdropClick' | 'escapeKeyDown') => {
    if (reason !== 'backdropClick') {
      onClose();
    }
@@ -77,21 +64,25 @@ const SensorsTemperatureDialog = ({
      await validate(validator, editItem);
      onSave(editItem);
    } catch (error) {
-      setFieldErrors((error as ValidationError).fieldErrors);
+      setFieldErrors(error as ValidateFieldsError);
    }
  };

  return (
    <Dialog sx={dialogStyle} open={open} onClose={handleClose}>
-      <DialogTitle>{`${LL.EDIT()} ${LL.TEMP_SENSOR()}`}</DialogTitle>
+      <DialogTitle>
+        {LL.EDIT()}&nbsp;{LL.TEMP_SENSOR()}
+      </DialogTitle>
      <DialogContent dividers>
-        <Typography sx={{ mb: 2 }} color="warning" variant="body2">
-          {LL.ID_OF(LL.SENSOR(0))}: {editItem.id}
-        </Typography>
+        <Box color="warning.main" p={0} pl={0} pr={0} mt={0} mb={2}>
+          <Typography variant="body2">
+            {LL.ID_OF(LL.SENSOR(0))}: {editItem.id}
+          </Typography>
+        </Box>
        <Grid container spacing={2}>
          <Grid>
            <ValidatedTextField
-              fieldErrors={fieldErrors ?? {}}
+              fieldErrors={fieldErrors}
              name="n"
              label={LL.NAME(0)}
              value={editItem.n}
@@ -111,30 +102,14 @@ const SensorsTemperatureDialog = ({
              slotProps={{
                input: {
                  startAdornment: (
-                    <InputAdornment position="start">{TEMP_UNIT}</InputAdornment>
+                    <InputAdornment position="start">°C</InputAdornment>
                  )
                },
-                htmlInput: {
-                  min: OFFSET_MIN,
-                  max: OFFSET_MAX,
-                  step: OFFSET_STEP
-                }
+                htmlInput: { min: '-5', max: '5', step: '0.1' }
              }}
            />
          </Grid>
        </Grid>
-        {editItem.s && (
-          <Grid>
-            <Typography sx={{ mt: 1 }} color="warning" variant="body2">
-              <WarningIcon
-                fontSize="small"
-                sx={{ mr: 1, verticalAlign: 'middle' }}
-                color="warning"
-              />
-              {LL.SYSTEM(0)} {LL.SENSOR(0)}
-            </Typography>
-          </Grid>
-        )}
      </DialogContent>
      <DialogActions>
        <Button
@@ -146,7 +121,7 @@ const SensorsTemperatureDialog = ({
          {LL.CANCEL()}
        </Button>
        <Button
-          startIcon={<DoneIcon />}
+          startIcon={<WarningIcon color="warning" />}
          variant="outlined"
          onClick={save}
          color="primary"
@@ -1,69 +0,0 @@
-import { memo, useContext } from 'react';
-
-import PersonIcon from '@mui/icons-material/Person';
-import {
-  Avatar,
-  Box,
-  Button,
-  Divider,
-  List,
-  ListItem,
-  ListItemText,
-  Typography
-} from '@mui/material';
-
-import { AuthenticatedContext } from '@/contexts/authentication';
-import { SectionContent, useLayoutTitle } from 'components';
-import { LanguageSelector } from 'components/inputs';
-import { useI18nContext } from 'i18n/i18n-react';
-
-const UserProfileComponent = () => {
-  const { LL } = useI18nContext();
-  const { me, signOut } = useContext(AuthenticatedContext);
-
-  useLayoutTitle(LL.USER_PROFILE());
-
-  const handleSignOut = () => {
-    signOut(true);
-  };
-
-  return (
-    <SectionContent>
-      <List sx={{ flexGrow: 1 }}>
-        <ListItem disablePadding>
-          <Avatar sx={{ bgcolor: '#9e9e9e', color: 'white' }}>
-            <PersonIcon />
-          </Avatar>
-          <ListItemText
-            sx={{ pl: 2, color: '#2196f3' }}
-            primary={me.username}
-            secondary={'(' + (me.admin ? LL.ADMINISTRATOR() : LL.GUEST()) + ')'}
-          />
-        </ListItem>
-      </List>
-      <Box sx={{ mt: 2, mb: 2, display: 'flex', alignItems: 'center' }}>
-        <Typography
-          sx={{ mr: 2, textAlign: 'center' }}
-          color="warning"
-          variant="body1"
-        >
-          {LL.LANGUAGE()}:
-        </Typography>
-        <LanguageSelector />
-      </Box>
-      <Divider />
-      <Button
-        sx={{ mt: 2 }}
-        variant="outlined"
-        color="primary"
-        onClick={handleSignOut}
-      >
-        {LL.SIGN_OUT()}
-      </Button>
-    </SectionContent>
-  );
-};
-
-const UserProfile = memo(UserProfileComponent);
-
-export default UserProfile;
@@ -2,30 +2,27 @@ 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 totalMs = duration_min * 60000;
-  const days = Math.trunc(totalMs / 86400000);
-  const hours = Math.trunc(totalMs / 3600000) % 24;
-  const minutes = Math.trunc(duration_min) % 60;
+  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 parts: string[] = [];
+  let formatted = '';
  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 }));
+    formatted += LL.NUM_DAYS({ num: days });
  }

-  return parts.join(' ');
+  if (hours) {
+    if (formatted) formatted += ' ';
+    formatted += LL.NUM_HOURS({ num: hours });
+  }
+
+  if (minutes) {
+    if (formatted) formatted += ' ';
+    formatted += LL.NUM_MINUTES({ num: minutes });
+  }
+
+  return formatted;
 };

 export function formatValue(
@@ -33,21 +30,18 @@ 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 === DeviceValueUOM.NONE
+      (value === '' || uom === undefined || uom === 0
        ? ''
        : ' ' + DeviceValueUOM_s[uom])
    );
  }

-  // Handle numeric values
  switch (uom) {
    case DeviceValueUOM.HOURS:
      return value ? formatDurationMin(LL, value * 60) : LL.NUM_HOURS({ num: 0 });
@@ -56,12 +50,18 @@ export function formatValue(
    case DeviceValueUOM.SECONDS:
      return LL.NUM_SECONDS({ num: value });
    case DeviceValueUOM.NONE:
-      return numberFormatter.format(value);
+      return new Intl.NumberFormat().format(value);
    case DeviceValueUOM.DEGREES:
    case DeviceValueUOM.DEGREES_R:
    case DeviceValueUOM.FAHRENHEIT:
-      return numberFormatterWithDecimal.format(value) + ' ' + DeviceValueUOM_s[uom];
+      return (
+        new Intl.NumberFormat(undefined, {
+          minimumFractionDigits: 1
+        }).format(value) +
+        ' ' +
+        DeviceValueUOM_s[uom]
+      );
    default:
-      return numberFormatter.format(value) + ' ' + DeviceValueUOM_s[uom];
+      return new Intl.NumberFormat().format(value) + ' ' + DeviceValueUOM_s[uom];
  }
 }
@@ -1,5 +1,4 @@
 export interface Settings {
-  system_name: string;
  locale: string;
  tx_mode: number;
  ems_bus_id: number;
@@ -44,17 +43,7 @@ export interface Settings {
  modbus_port: number;
  modbus_max_clients: number;
  modbus_timeout: number;
-  email_enabled: boolean;
-  email_security: number;
-  email_server: string;
-  email_port: number;
-  email_login: string;
-  email_pass: string;
-  email_sender: string;
-  email_recp: string;
-  email_subject: string;
  developer_mode: boolean;
-  disable_reset: boolean;
 }

 export enum busConnectionStatus {
@@ -71,7 +60,7 @@ export interface Stat {
 }

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

 export interface Device {
@@ -93,43 +82,38 @@ export interface TemperatureSensor {
  t?: number; // temp, optional
  o: number; // offset
  u: number; // uom
-  s: boolean; // system sensor flag
  o_n?: string;
 }

 export interface AnalogSensor {
  id: number;
  g: number; // GPIO
-  n: string; // name
-  v: number; // value
-  u: number; // uom
-  o: number; // offset
-  f: number; // factor
-  t: number; // type
+  n: string;
+  v: number;
+  u: number;
+  o: number;
+  f: number;
+  t: number;
  d: boolean; // deleted flag
-  s: boolean; // system sensor flag
-  o_n?: string; // original name
+  o_n?: string;
 }

 export interface WriteTemperatureSensor {
  id: string;
  name: string;
  offset: number;
-  is_system: boolean;
 }

 export interface SensorData {
  ts: TemperatureSensor[];
  as: AnalogSensor[];
  analog_enabled: boolean;
-  available_gpios: number[];
-  exclude_types: number[];
  platform: string;
 }

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

 export interface DashboardItem {
@@ -138,12 +122,11 @@ 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 {
-  readonly connected: boolean; // true if connected to EMS bus
-  readonly nodes: readonly DashboardItem[];
+  connected: boolean; // true if connected to EMS bus
+  nodes: DashboardItem[];
 }

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

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

 export interface DeviceEntity {
@@ -206,26 +188,13 @@ export enum DeviceValueUOM {
  VOLTS,
  MBAR,
  LH,
-  CTKWH,
-  HERTZ
-}
-
-export type DeviceValueKind =
-  'value' | 'scheduler' | 'command' | 'deviceCommand' | 'deviceEntity';
-
-export function getDeviceValueKind(item: DeviceValue): DeviceValueKind {
-  if (!item.c) return 'value';
-  if (item.v !== undefined && item.l !== undefined && item.u === undefined)
-    return 'scheduler';
-  if (item.v === undefined && item.l === undefined) return 'command';
-  if (item.u === DeviceValueUOM.NONE) return 'deviceCommand';
-  return 'deviceEntity';
+  CTKWH
 }

 export const DeviceValueUOM_s = [
  '',
  '°C',
-  '°C Rel',
+  '°C',
  '%',
  'l/min',
  'kWh',
@@ -249,12 +218,12 @@ export const DeviceValueUOM_s = [
  'V',
  'mbar',
  'l/h',
-  'ct/kWh',
-  'Hz'
-] as const;
+  'ct/kWh'
+];

 export enum AnalogType {
  REMOVED = -1,
+  NOTUSED = 0,
  DIGITAL_IN = 1,
  COUNTER = 2,
  ADC = 3,
@@ -263,57 +232,38 @@ export enum AnalogType {
  DIGITAL_OUT = 6,
  PWM_0 = 7,
  PWM_1 = 8,
-  PWM_2 = 9,
-  NTC = 10,
-  RGB = 11,
-  PULSE = 12,
-  FREQ_0 = 13,
-  FREQ_1 = 14,
-  FREQ_2 = 15,
-  CNT_0 = 16,
-  CNT_1 = 17,
-  CNT_2 = 18
+  PWM_2 = 9
 }

 export const AnalogTypeNames = [
-  'Digital In', // 1
-  'Counter', // 2
-  'ADC In', // 3
-  'Timer', // 4
-  'Rate', // 5
-  'Digital Out', // 6
-  'PWM 0', // 7
-  'PWM 1', // 8
-  'PWM 2', // 9
-  'NTC Temp', // 10
-  'RGB Led', // 11
-  'Pulse', // 12
-  'Freq 0', // 13
-  'Freq 1', // 14
-  'Freq 2', // 15
-  'Counter 0', // 16
-  'Counter 1', // 17
-  'Counter 2' // 18
-] as const;
+  '(disabled)',
+  'Digital In',
+  'Counter',
+  'ADC',
+  'Timer',
+  'Rate',
+  'Digital Out',
+  'PWM 0',
+  'PWM 1',
+  'PWM 2'
+];

-export const BOARD_PROFILES = {
+type BoardProfiles = Record<string, string>;
+
+export const BOARD_PROFILES: BoardProfiles = {
  S32: 'BBQKees Gateway S32',
  S32S3: 'BBQKees Gateway S3',
  E32: 'BBQKees Gateway E32',
  E32V2: 'BBQKees Gateway E32 V2',
-  E32V2_2: 'BBQKees Gateway E32 V2.2',
  NODEMCU: 'NodeMCU 32S',
  'MH-ET': 'MH-ET Live D1 Mini',
  LOLIN: 'Lolin D32',
  OLIMEX: 'Olimex ESP32-EVB',
  OLIMEXPOE: 'Olimex ESP32-POE',
-  OLIMEXPOEW: 'Olimex ESP32-POE-ISO WROVER (PSRAM)',
  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;
@@ -350,7 +300,6 @@ export interface WriteAnalogSensor {
  uom: number;
  type: number;
  deleted: boolean;
-  is_system: boolean;
 }

 export enum DeviceEntityMask {
@@ -363,41 +312,26 @@ export enum DeviceEntityMask {
 }

 export interface ScheduleItem {
-  id: number; // unique index for table
+  id: number; // unique index
  active: boolean;
  deleted?: boolean;
  flags: number;
  time: string; // also used for Condition and On Change
-  cmd_name: string; // references a named Command
-  name: string;
+  cmd: string;
+  value: string;
+  name: string; // can be empty
  o_id?: number;
  o_active?: boolean;
  o_deleted?: boolean;
  o_flags?: number;
  o_time?: string;
-  o_cmd_name?: string;
+  o_cmd?: string;
+  o_value?: string;
  o_name?: string;
 }

 export interface Schedule {
-  readonly schedule: readonly ScheduleItem[];
-}
-
-export interface CommandItem {
-  id: number;
-  cmd: string;
-  value: string;
-  name: string;
-  deleted?: boolean;
-  o_id?: number;
-  o_cmd?: string;
-  o_value?: string;
-  o_name?: string;
-  o_deleted?: boolean;
-}
-
-export interface Commands {
-  readonly commands: readonly CommandItem[];
+  schedule: ScheduleItem[];
 }

 export interface ModuleItem {
@@ -415,7 +349,7 @@ export interface ModuleItem {
 }

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

 export enum ScheduleFlag {
@@ -430,7 +364,8 @@ export enum ScheduleFlag {
  SCHEDULE_DAY = 0, // no bits set
  SCHEDULE_TIMER = 128, // bit 8
  SCHEDULE_ONCHANGE = 129, // bit 1
-  SCHEDULE_CONDITION = 130 // bit 2
+  SCHEDULE_CONDITION = 130, // bit 2
+  SCHEDULE_IMMEDIATE = 132 // bit 3
 }

 export interface EntityItem {
@@ -445,7 +380,6 @@ export interface EntityItem {
  value_type: number;
  value?: unknown;
  writeable: boolean;
-  hide: boolean;
  deleted?: boolean;
  o_id?: number;
  o_ram?: number;
@@ -459,11 +393,10 @@ export interface EntityItem {
  o_deleted?: boolean;
  o_writeable?: boolean;
  o_value?: unknown;
-  o_hide?: boolean;
 }

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

 // matches emsdevice.h DeviceType
@@ -473,7 +406,6 @@ export const enum DeviceType {
  ANALOGSENSOR = 2,
  SCHEDULER = 3,
  CUSTOM = 4,
-  COMMAND = 5,
  BOILER,
  THERMOSTAT,
  MIXER,
@@ -520,4 +452,4 @@ export const DeviceValueTypeNames = [
  'ENUM',
  'RAW',
  'CMD'
-] as const;
+];
@@ -1,10 +1,9 @@
-import Schema from 'validators/schema';
-import type { InternalRuleItem } from 'validators/schema';
+import Schema from 'async-validator';
+import type { InternalRuleItem } from 'async-validator';
 import { IP_OR_HOSTNAME_VALIDATOR } from 'validators/shared';

 import type {
  AnalogSensor,
-  CommandItem,
  DeviceValue,
  EntityItem,
  ScheduleItem,
@@ -12,295 +11,376 @@ import type {
  TemperatureSensor
 } from './types';

-// 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: 3600,
-  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;
-
-type ValidationRules = Array<{
-  required?: boolean;
-  message?: string;
-  [key: string]: unknown;
-}>;
-
-export const createSettingsValidator = (settings: Settings) => {
-  const schema: Record<string, ValidationRules> = {};
-
-  // 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}`
-      }
-    ];
+export const GPIO_VALIDATOR = {
+  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 {
+      callback();
+    }
  }
-
-  // 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);
 };

-// Generic unique name validator factory
-const createUniqueNameValidator = <T extends { name: string }>(
-  items: T[],
-  originalName?: string
-) => ({
+export const GPIO_VALIDATORR = {
  validator(
-    _rule: InternalRuleItem,
+    rule: InternalRuleItem,
+    value: number,
+    callback: (error?: string) => void
+  ) {
+    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();
+    }
+  }
+};
+
+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) => ({
+  validator(
+    rule: InternalRuleItem,
    name: string,
    callback: (error?: string) => void
  ) {
    if (
      name !== '' &&
-      (originalName === undefined ||
-        originalName.toLowerCase() !== name.toLowerCase()) &&
-      items.find((item) => item.name.toLowerCase() === name.toLowerCase())
+      (o_name === undefined || o_name.toLowerCase() !== name.toLowerCase()) &&
+      schedule.find((si) => si.name.toLowerCase() === name.toLowerCase())
    ) {
-      callback(ERROR_MESSAGES.NAME_DUPLICATE);
-      return;
+      callback('Name already in use');
+    } else {
+      callback();
    }
-    callback();
  }
 });

-// 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,
-    name: string,
-    callback: (error?: string) => void
-  ) {
-    if (
-      name !== '' &&
-      (originalName === undefined ||
-        originalName.toLowerCase() !== name.toLowerCase()) &&
-      items.find((item) => getName(item).toLowerCase() === name.toLowerCase())
-    ) {
-      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: [
-      { required: true, message: 'Name is required' },
-      NAME_PATTERN_REQUIRED,
-      uniqueNameValidator(schedule, scheduleItem.o_name)
-    ],
-    cmd_name: [{ required: true, message: 'Command is required' }]
-  });
-
-export const uniqueCommandNameValidator = (
-  commands: CommandItem[],
-  o_name?: string
-) => createUniqueNameValidator(commands, o_name);
-
-export const commandItemValidation = (
-  commands: CommandItem[],
-  commandItem: CommandItem
-) =>
-  new Schema({
-    name: [
-      { required: true, message: 'Name is required' },
-      NAME_PATTERN_REQUIRED,
-      uniqueCommandNameValidator(commands, commandItem.o_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: VALIDATION_LIMITS.COMMAND_MIN,
-        max: VALIDATION_LIMITS.COMMAND_MAX,
-        message: `Command must be ${VALIDATION_LIMITS.COMMAND_MIN}-${VALIDATION_LIMITS.COMMAND_MAX} characters`
+        min: 1,
+        max: 300,
+        message: 'Command must be 1-300 characters'
      }
    ]
  });

-export const uniqueCustomNameValidator = (entity: EntityItem[], o_name?: string) =>
-  createUniqueNameValidator(entity, o_name);
-
-const hexValidator = {
+export const uniqueCustomNameValidator = (
+  entity: EntityItem[],
+  o_name?: string
+) => ({
  validator(
-    _rule: InternalRuleItem,
-    value: string,
+    rule: InternalRuleItem,
+    name: string,
    callback: (error?: string) => void
  ) {
-    if (!value || Number.isNaN(Number.parseInt(value, VALIDATION_LIMITS.HEX_BASE))) {
-      callback(ERROR_MESSAGES.HEX_REQUIRED);
-      return;
+    if (
+      (o_name === undefined || o_name.toLowerCase() !== name.toLowerCase()) &&
+      entity.find((ei) => ei.name.toLowerCase() === name.toLowerCase())
+    ) {
+      callback('Name already in use');
+    } else {
+      callback();
    }
-    callback();
  }
-};
+});

 export const entityItemValidation = (entity: EntityItem[], entityItem: EntityItem) =>
  new Schema({
    name: [
      { required: true, message: 'Name is required' },
-      NAME_PATTERN_REQUIRED,
-      uniqueCustomNameValidator(entity, entityItem.o_name)
+      {
+        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();
+        }
+      }
    ],
-    device_id: [hexValidator],
-    type_id: [hexValidator],
    offset: [
      { required: true, message: 'Offset is required' },
-      {
-        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}`
-      }
+      { type: 'number', min: 0, max: 255, message: 'Must be between 0 and 255' }
    ],
    factor: [{ required: true, message: 'is required' }]
  });
@@ -308,34 +388,93 @@ export const entityItemValidation = (entity: EntityItem[], entityItem: EntityIte
 export const uniqueTemperatureNameValidator = (
  sensors: TemperatureSensor[],
  o_name?: string
-) => createUniqueFieldNameValidator(sensors, (s) => s.n, o_name);
+) => ({
+  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();
+    }
+  }
+});

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

+export const isGPIOUniqueValidator = (sensors: AnalogSensor[]) => ({
+  validator(
+    rule: InternalRuleItem,
+    gpio: number,
+    callback: (error?: string) => void
+  ) {
+    if (sensors.find((as) => as.g === gpio)) {
+      callback('GPIO already in use');
+    } else {
+      callback();
+    }
+  }
+});
+
 export const uniqueAnalogNameValidator = (
  sensors: AnalogSensor[],
  o_name?: string
-) => createUniqueFieldNameValidator(sensors, (s) => s.n, o_name);
+) => ({
+  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();
+    }
+  }
+});

 export const analogSensorItemValidation = (
  sensors: AnalogSensor[],
-  sensor: AnalogSensor
-) => {
-  return new Schema({
-    // name is required and must be unique
+  sensor: AnalogSensor,
+  creating: boolean,
+  platform: string
+) =>
+  new Schema({
    n: [
-      { required: true, message: 'Name is required' },
-      NAME_PATTERN,
-      uniqueAnalogNameValidator(sensors, sensor.o_n)
+      {
+        type: 'string',
+        pattern: /^[a-zA-Z0-9_]{0,19}$/,
+        message: "Must be <20 characters: alphanumeric or '_'"
+      },
+      ...[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,
+      ...(creating ? [isGPIOUniqueValidator(sensors)] : [])
    ]
  });
-};

 export const deviceValueItemValidation = (dv: DeviceValue) =>
  new Schema({
@@ -343,18 +482,17 @@ export const deviceValueItemValidation = (dv: DeviceValue) =>
      { required: true, message: 'Value is required' },
      {
        validator(
-          _rule: InternalRuleItem,
+          rule: InternalRuleItem,
          value: unknown,
          callback: (error?: string) => void
        ) {
          if (
            typeof value === 'number' &&
-            dv.m !== undefined &&
-            dv.x !== undefined &&
+            dv.m &&
+            dv.x &&
            (value < dv.m || value > dv.x)
          ) {
-            callback(ERROR_MESSAGES.VALUE_OUT_OF_RANGE);
-            return;
+            callback('Value out of range');
          }
          callback();
        }
@@ -6,6 +6,7 @@ import { Button, Checkbox, MenuItem } from '@mui/material';

 import * as APApi from 'api/ap';

+import type { ValidateFieldsError } from 'async-validator';
 import {
  BlockFormControlLabel,
  BlockNavigation,
@@ -20,25 +21,12 @@ import { useI18nContext } from 'i18n/i18n-react';
 import type { APSettingsType } from 'types';
 import { APProvisionMode } from 'types';
 import { numberValue, updateValueDirty, useRest } from 'utils';
-import { ValidationError, createAPSettingsValidator, validate } from 'validators';
-import type { ValidateFieldsError } from 'validators/schema';
+import { createAPSettingsValidator, validate } from 'validators';

 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,
@@ -63,35 +51,36 @@ const APSettings = () => {
  const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();

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

-  const apEnabled = data ? isAPEnabled(data) : false;
-
-  const validateAndSubmit = async () => {
-    if (!data) return;
-
-    try {
-      setFieldErrors(undefined);
-      await validate(createAPSettingsValidator(data), data);
-      await saveData();
-    } catch (error) {
-      setFieldErrors((error as ValidationError).fieldErrors);
-    }
-  };
-
  const content = () => {
    if (!data) {
-      return <FormLoader onRetry={loadData} errorMessage={errorMessage || ''} />;
+      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
-          fieldErrors={fieldErrors || {}}
+          fieldErrors={fieldErrors}
          name="provision_mode"
          label={LL.AP_PROVIDE() + '...'}
          value={data.provision_mode}
@@ -101,6 +90,9 @@ const APSettings = () => {
          onChange={updateFormValue}
          margin="normal"
        >
+          <MenuItem value={APProvisionMode.AP_MODE_ALWAYS}>
+            {LL.AP_PROVIDE_TEXT_1()}
+          </MenuItem>
          <MenuItem value={APProvisionMode.AP_MODE_DISCONNECTED}>
            {LL.AP_PROVIDE_TEXT_2()}
          </MenuItem>
@@ -108,10 +100,10 @@ const APSettings = () => {
            {LL.AP_PROVIDE_TEXT_3()}
          </MenuItem>
        </ValidatedTextField>
-        {apEnabled && (
+        {isAPEnabled(data) && (
          <>
            <ValidatedTextField
-              fieldErrors={fieldErrors || {}}
+              fieldErrors={fieldErrors}
              name="ssid"
              label={LL.ACCESS_POINT(2) + ' SSID'}
              fullWidth
@@ -121,7 +113,7 @@ const APSettings = () => {
              margin="normal"
            />
            <ValidatedPasswordField
-              fieldErrors={fieldErrors || {}}
+              fieldErrors={fieldErrors}
              name="password"
              label={LL.ACCESS_POINT(2) + ' ' + LL.PASSWORD()}
              fullWidth
@@ -131,7 +123,7 @@ const APSettings = () => {
              margin="normal"
            />
            <ValidatedTextField
-              fieldErrors={fieldErrors || {}}
+              fieldErrors={fieldErrors}
              name="channel"
              label={LL.AP_PREFERRED_CHANNEL()}
              value={numberValue(data.channel)}
@@ -142,7 +134,7 @@ const APSettings = () => {
              onChange={updateFormValue}
              margin="normal"
            >
-              {CHANNEL_RANGE.map((i) => (
+              {range(1, 14).map((i) => (
                <MenuItem key={i} value={i}>
                  {i}
                </MenuItem>
@@ -159,7 +151,7 @@ const APSettings = () => {
              label={LL.AP_HIDE_SSID()}
            />
            <ValidatedTextField
-              fieldErrors={fieldErrors || {}}
+              fieldErrors={fieldErrors}
              name="max_clients"
              label={LL.AP_MAX_CLIENTS()}
              value={numberValue(data.max_clients)}
@@ -170,14 +162,14 @@ const APSettings = () => {
              onChange={updateFormValue}
              margin="normal"
            >
-              {MAX_CLIENTS_RANGE.map((i) => (
+              {range(1, 9).map((i) => (
                <MenuItem key={i} value={i}>
                  {i}
                </MenuItem>
              ))}
            </ValidatedTextField>
            <ValidatedTextField
-              fieldErrors={fieldErrors || {}}
+              fieldErrors={fieldErrors}
              name="local_ip"
              label={LL.AP_LOCAL_IP()}
              fullWidth
@@ -187,7 +179,7 @@ const APSettings = () => {
              margin="normal"
            />
            <ValidatedTextField
-              fieldErrors={fieldErrors || {}}
+              fieldErrors={fieldErrors}
              name="gateway_ip"
              label={LL.NETWORK_GATEWAY()}
              fullWidth
@@ -197,7 +189,7 @@ const APSettings = () => {
              margin="normal"
            />
            <ValidatedTextField
-              fieldErrors={fieldErrors || {}}
+              fieldErrors={fieldErrors}
              name="subnet_mask"
              label={LL.NETWORK_SUBNET()}
              fullWidth
@@ -1,4 +1,5 @@
-import { useContext, useEffect, useState } from 'react';
+import { useState } from 'react';
+import { toast } from 'react-toastify';

 import CancelIcon from '@mui/icons-material/Cancel';
 import PowerSettingsNewIcon from '@mui/icons-material/PowerSettingsNew';
@@ -8,7 +9,7 @@ import {
  Button,
  Checkbox,
  Divider,
-  Grid,
+  Grid2 as Grid,
  InputAdornment,
  MenuItem,
  TextField,
@@ -19,6 +20,7 @@ import { readSystemStatus } from 'api/system';

 import { useRequest } from 'alova/client';
 import SystemMonitor from 'app/status/SystemMonitor';
+import type { ValidateFieldsError } from 'async-validator';
 import {
  BlockFormControlLabel,
  BlockNavigation,
@@ -26,26 +28,22 @@ import {
  FormLoader,
  MessageBox,
  SectionContent,
-  ValidatedPasswordField,
  ValidatedTextField,
  useLayoutTitle
 } from 'components';
-import { toast } from 'components/toast';
-import { AuthenticatedContext } from 'contexts/authentication';
 import { useI18nContext } from 'i18n/i18n-react';
 import { numberValue, updateValueDirty, useRest } from 'utils';
-import { ValidationError, validate } from 'validators';
-import type { ValidateFieldsError } from 'validators/schema';
+import { validate } from 'validators';

 import { API, getBoardProfile, readSettings, writeSettings } from '../../api/app';
 import { BOARD_PROFILES } from '../main/types';
-import type { APIcall, BoardProfileKey, Settings } from '../main/types';
+import type { APIcall, Settings } from '../main/types';
 import { createSettingsValidator } from '../main/validators';

 export function boardProfileSelectItems() {
  return Object.keys(BOARD_PROFILES).map((code) => (
    <MenuItem key={code} value={code}>
-      {BOARD_PROFILES[code as BoardProfileKey]}
+      {BOARD_PROFILES[code]}
    </MenuItem>
  ));
 }
@@ -69,23 +67,15 @@ const ApplicationSettings = () => {
    update: writeSettings
  });

-  // the menu drawer reads the system name from the authentication context
-  const { setSystemName } = useContext(AuthenticatedContext);
-  useEffect(() => {
-    if (origData?.system_name !== undefined) {
-      setSystemName(origData.system_name);
-    }
-  }, [origData?.system_name, setSystemName]);
-
  const [restarting, setRestarting] = useState<boolean>();

  const { LL } = useI18nContext();

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

  const [fieldErrors, setFieldErrors] = useState<ValidateFieldsError>();
@@ -116,18 +106,6 @@ const ApplicationSettings = () => {
    });
  });

-  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 doRestart = async () => {
    setRestarting(true);
    await sendAPI({ device: 'system', cmd: 'restart', id: 0 }).catch(
@@ -145,71 +123,53 @@ const ApplicationSettings = () => {

  useLayoutTitle(LL.APPLICATION());

-  const validateAndSubmit = async () => {
-    try {
-      setFieldErrors(undefined);
-      await validate(createSettingsValidator(data), data);
-      await saveData();
-    } catch (error) {
-      setFieldErrors((error as ValidationError).fieldErrors);
-    }
+  const SecondsInputProps = {
+    endAdornment: <InputAdornment position="end">{LL.SECONDS()}</InputAdornment>
  };
-
-  const changeBoardProfile = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const boardProfile = event.target.value;
-    updateFormValue(event);
-    if (boardProfile === 'CUSTOM') {
-      updateDataValue({
-        ...data,
-        board_profile: boardProfile
-      });
-    } else {
-      void updateBoardProfile(boardProfile);
-    }
+  const MinutesInputProps = {
+    endAdornment: <InputAdornment position="end">{LL.MINUTES()}</InputAdornment>
  };
-
-  const restart = async () => {
-    await validateAndSubmit();
-    await doRestart();
+  const HoursInputProps = {
+    endAdornment: <InputAdornment position="end">{LL.HOURS()}</InputAdornment>
  };

-  const sendmail = async () => {
-    await sendAPI({
-      device: 'system',
-      cmd: 'sendmail',
-      data: '"Email notification test successful!"',
-      id: 0
-    })
-      .then(() => {
-        toast.success(LL.TEST_EMAIL_SUCCESSFUL());
-      })
-      .catch((error: Error) => {
-        toast.error(error.message);
-      });
-  };
-
-  const boardProfileItems = boardProfileSelectItems();
-
  const content = () => {
    if (!data || !hardwareData) {
-      return <FormLoader onRetry={loadData} errorMessage={errorMessage || ''} />;
+      return <FormLoader onRetry={loadData} errorMessage={errorMessage} />;
    }

+    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 boardProfile = event.target.value;
+      updateFormValue(event);
+      if (boardProfile === 'CUSTOM') {
+        updateDataValue({
+          ...data,
+          board_profile: boardProfile
+        });
+      } else {
+        void updateBoardProfile(boardProfile);
+      }
+    };
+
+    const restart = async () => {
+      await validateAndSubmit();
+      await doRestart();
+    };
+
    return (
      <>
-        <Typography variant="h6" color="primary">
-          {LL.SYSTEM(0)}&nbsp;
-          {LL.CUSTOMIZATIONS()}
-        </Typography>
-        <TextField
-          name="system_name"
-          label={LL.SYSTEM_NAME()}
-          value={data.system_name}
-          variant="outlined"
-          onChange={updateFormValue}
-          margin="normal"
-        />
-        <Typography sx={{ pb: 1, pt: 2 }} variant="h6" color="primary">
+        <Typography sx={{ pb: 1 }} variant="h6" color="primary">
          {LL.SERVICES()}
        </Typography>
        <Typography color="secondary">API</Typography>
@@ -259,7 +219,7 @@ const ApplicationSettings = () => {
          <Grid container spacing={2} rowSpacing={0}>
            <Grid>
              <ValidatedTextField
-                fieldErrors={fieldErrors || {}}
+                fieldErrors={fieldErrors}
                name="modbus_max_clients"
                label={LL.AP_MAX_CLIENTS()}
                variant="outlined"
@@ -271,7 +231,7 @@ const ApplicationSettings = () => {
            </Grid>
            <Grid>
              <ValidatedTextField
-                fieldErrors={fieldErrors || {}}
+                fieldErrors={fieldErrors}
                name="modbus_port"
                label="Port"
                variant="outlined"
@@ -283,7 +243,7 @@ const ApplicationSettings = () => {
            </Grid>
            <Grid>
              <ValidatedTextField
-                fieldErrors={fieldErrors || {}}
+                fieldErrors={fieldErrors}
                name="modbus_timeout"
                label="Timeout"
                slotProps={{
@@ -313,7 +273,7 @@ const ApplicationSettings = () => {
          <Grid container spacing={2} rowSpacing={0}>
            <Grid>
              <ValidatedTextField
-                fieldErrors={fieldErrors || {}}
+                fieldErrors={fieldErrors}
                name="syslog_host"
                label="Host"
                variant="outlined"
@@ -324,7 +284,7 @@ const ApplicationSettings = () => {
            </Grid>
            <Grid>
              <ValidatedTextField
-                fieldErrors={fieldErrors || {}}
+                fieldErrors={fieldErrors}
                name="syslog_port"
                label="Port"
                variant="outlined"
@@ -347,15 +307,15 @@ const ApplicationSettings = () => {
              >
                <MenuItem value={-1}>OFF</MenuItem>
                <MenuItem value={3}>ERR</MenuItem>
-                <MenuItem value={4}>WARN</MenuItem>
                <MenuItem value={5}>NOTICE</MenuItem>
                <MenuItem value={6}>INFO</MenuItem>
+                <MenuItem value={7}>DEBUG</MenuItem>
                <MenuItem value={9}>ALL</MenuItem>
              </TextField>
            </Grid>
            <Grid>
              <ValidatedTextField
-                fieldErrors={fieldErrors || {}}
+                fieldErrors={fieldErrors}
                name="syslog_mark_interval"
                label={LL.MARK_INTERVAL()}
                slotProps={{
@@ -370,148 +330,6 @@ const ApplicationSettings = () => {
            </Grid>
          </Grid>
        )}
-        <Typography color="secondary">eMail</Typography>
-        <BlockFormControlLabel
-          control={
-            <Checkbox
-              checked={data.email_enabled}
-              onChange={updateFormValue}
-              name="email_enabled"
-              disabled={!hardwareData.psram}
-            />
-          }
-          label={
-            <Typography color={!hardwareData.psram ? 'grey' : 'default'}>
-              Enable eMail notification
-              {!hardwareData.psram && (
-                <Typography variant="caption">
-                  &nbsp; &#40;{LL.IS_REQUIRED('PSRAM')}&#41;
-                </Typography>
-              )}
-            </Typography>
-          }
-        />
-        {data.email_enabled && (
-          <>
-            <Grid
-              container
-              spacing={2}
-              direction="row"
-              sx={{ justifyContent: 'flex-start', alignItems: 'flex-start' }}
-            >
-              <Grid>
-                <ValidatedTextField
-                  fieldErrors={fieldErrors || {}}
-                  name="email_server"
-                  label="SMTP Server"
-                  variant="outlined"
-                  value={data.email_server}
-                  onChange={updateFormValue}
-                  margin="normal"
-                />
-              </Grid>
-              <Grid>
-                <ValidatedTextField
-                  fieldErrors={fieldErrors || {}}
-                  sx={{ width: '12ch' }}
-                  name="email_port"
-                  variant="outlined"
-                  label="Port"
-                  value={numberValue(data.email_port)}
-                  type="number"
-                  onChange={updateFormValue}
-                  margin="normal"
-                />
-              </Grid>
-              <Grid>
-                <TextField
-                  sx={{ width: '20ch' }}
-                  name="email_security"
-                  label={LL.SECURITY(0)}
-                  value={data.email_security}
-                  variant="outlined"
-                  onChange={updateFormValue}
-                  margin="normal"
-                  select
-                >
-                  <MenuItem value={0}>{LL.OFF()}</MenuItem>
-                  <MenuItem value={1}>SSL</MenuItem>
-                  <MenuItem value={2}>StartTLS</MenuItem>
-                </TextField>
-              </Grid>
-            </Grid>
-            <Grid container spacing={2} rowSpacing={0}>
-              <Grid>
-                <ValidatedTextField
-                  fieldErrors={fieldErrors || {}}
-                  name="email_login"
-                  label="Login"
-                  variant="outlined"
-                  value={data.email_login}
-                  onChange={updateFormValue}
-                  margin="normal"
-                />
-              </Grid>
-              <Grid>
-                <ValidatedPasswordField
-                  fieldErrors={fieldErrors || {}}
-                  name="email_pass"
-                  label="Password"
-                  variant="outlined"
-                  value={data.email_pass}
-                  onChange={updateFormValue}
-                  margin="normal"
-                />
-              </Grid>
-            </Grid>
-            <Grid container spacing={2} rowSpacing={0}>
-              <Grid>
-                <ValidatedTextField
-                  fieldErrors={fieldErrors || {}}
-                  name="email_sender"
-                  label="From"
-                  variant="outlined"
-                  value={data.email_sender}
-                  onChange={updateFormValue}
-                  margin="normal"
-                />
-              </Grid>
-              <Grid>
-                <ValidatedTextField
-                  fieldErrors={fieldErrors || {}}
-                  name="email_recp"
-                  label="To"
-                  variant="outlined"
-                  value={data.email_recp}
-                  onChange={updateFormValue}
-                  margin="normal"
-                />
-              </Grid>
-              <Grid>
-                <ValidatedTextField
-                  fieldErrors={fieldErrors || {}}
-                  name="email_subject"
-                  label="Subject"
-                  variant="outlined"
-                  value={data.email_subject}
-                  onChange={updateFormValue}
-                  margin="normal"
-                />
-              </Grid>
-              <Grid>
-                <Button
-                  sx={{ mt: 3 }}
-                  variant="outlined"
-                  color="primary"
-                  disabled={dirtyFlags.length !== 0}
-                  onClick={sendmail}
-                >
-                  Send test email
-                </Button>
-              </Grid>
-            </Grid>
-          </>
-        )}
        <Typography sx={{ pb: 1, pt: 2 }} variant="h6" color="primary">
          {LL.SENSORS()}
        </Typography>
@@ -557,7 +375,7 @@ const ApplicationSettings = () => {
              margin="normal"
              select
            >
-              <MenuItem value="cs">Česky (CS)</MenuItem>
+              <MenuItem value="cz">Česky (CZ)</MenuItem>
              <MenuItem value="de">Deutsch (DE)</MenuItem>
              <MenuItem value="en">English (EN)</MenuItem>
              <MenuItem value="fr">Français (FR)</MenuItem>
@@ -650,32 +468,24 @@ const ApplicationSettings = () => {
          name="board_profile"
          label={LL.BOARD_PROFILE()}
          value={data.board_profile}
-          disabled={processingBoard}
+          disabled={processingBoard || hardwareData.model.startsWith('BBQKees')}
          variant="outlined"
          onChange={changeBoardProfile}
          margin="normal"
          select
        >
-          {hardwareData.model.startsWith('BBQKees') ? (
-            <MenuItem key={hardwareData.board} value={hardwareData.board}>
-              {BOARD_PROFILES[hardwareData.board as BoardProfileKey]}
-            </MenuItem>
-          ) : (
-            boardProfileItems
-          )}
-          {(data.board_profile === 'CUSTOM' || data.developer_mode) && <Divider />}
-          {(data.board_profile === 'CUSTOM' || data.developer_mode) && (
-            <MenuItem key={'CUSTOM'} value={'CUSTOM'}>
-              {LL.CUSTOM()}&hellip;
-            </MenuItem>
-          )}
+          {boardProfileSelectItems()}
+          <Divider />
+          <MenuItem key={'CUSTOM'} value={'CUSTOM'}>
+            {LL.CUSTOM()}&hellip;
+          </MenuItem>
        </TextField>
        {data.board_profile === 'CUSTOM' && (
          <>
            <Grid container spacing={2} rowSpacing={0}>
              <Grid>
                <ValidatedTextField
-                  fieldErrors={fieldErrors || {}}
+                  fieldErrors={fieldErrors}
                  name="rx_gpio"
                  label={LL.GPIO_OF('Rx')}
                  fullWidth
@@ -688,7 +498,7 @@ const ApplicationSettings = () => {
              </Grid>
              <Grid>
                <ValidatedTextField
-                  fieldErrors={fieldErrors || {}}
+                  fieldErrors={fieldErrors}
                  name="tx_gpio"
                  label={LL.GPIO_OF('Tx')}
                  fullWidth
@@ -701,7 +511,7 @@ const ApplicationSettings = () => {
              </Grid>
              <Grid>
                <ValidatedTextField
-                  fieldErrors={fieldErrors || {}}
+                  fieldErrors={fieldErrors}
                  name="pbutton_gpio"
                  label={LL.GPIO_OF(LL.BUTTON())}
                  fullWidth
@@ -714,7 +524,7 @@ const ApplicationSettings = () => {
              </Grid>
              <Grid>
                <ValidatedTextField
-                  fieldErrors={fieldErrors || {}}
+                  fieldErrors={fieldErrors}
                  name="dallas_gpio"
                  label={
                    LL.GPIO_OF(LL.TEMPERATURE()) + ' (0=' + LL.DISABLED(1) + ')'
@@ -729,7 +539,7 @@ const ApplicationSettings = () => {
              </Grid>
              <Grid>
                <ValidatedTextField
-                  fieldErrors={fieldErrors || {}}
+                  fieldErrors={fieldErrors}
                  name="led_gpio"
                  label={LL.GPIO_OF('LED') + ' (0=' + LL.DISABLED(1) + ')'}
                  fullWidth
@@ -744,7 +554,7 @@ const ApplicationSettings = () => {
                <Grid>
                  <TextField
                    name="led_type"
-                    label={'LED ' + LL.TYPE(0)}
+                    label={'LED ' + LL.TYPE()}
                    value={data.led_type}
                    fullWidth
                    variant="outlined"
@@ -771,7 +581,6 @@ const ApplicationSettings = () => {
                  <MenuItem value={0}>{LL.DISABLED(1)}</MenuItem>
                  <MenuItem value={1}>LAN8720</MenuItem>
                  <MenuItem value={2}>TLK110</MenuItem>
-                  <MenuItem value={3}>RTL8201</MenuItem>
                </TextField>
              </Grid>
            </Grid>
@@ -838,7 +647,6 @@ const ApplicationSettings = () => {
              <MenuItem value={2}>EMS+</MenuItem>
              <MenuItem value={3}>HT3</MenuItem>
              <MenuItem value={4}>{LL.HARDWARE()}</MenuItem>
-              <MenuItem value={5}>Auto</MenuItem>
            </TextField>
          </Grid>
          <Grid>
@@ -912,16 +720,6 @@ const ApplicationSettings = () => {
          }
          label={LL.DEVELOPER_MODE()}
        />
-        <BlockFormControlLabel
-          control={
-            <Checkbox
-              checked={data.disable_reset}
-              onChange={updateFormValue}
-              name="disable_reset"
-            />
-          }
-          label={LL.DISABLE_RESET()}
-        />
        <BlockFormControlLabel
          control={
            <Checkbox
@@ -943,9 +741,9 @@ const ApplicationSettings = () => {
          label={LL.REMOTE_TIMEOUT_EN()}
        />
        {data.remote_timeout_en && (
-          <Box sx={{ mt: 2 }}>
+          <Box mt={2}>
            <ValidatedTextField
-              fieldErrors={fieldErrors || {}}
+              fieldErrors={fieldErrors}
              name="remote_timeout"
              label={LL.REMOTE_TIMEOUT()}
              slotProps={{
@@ -985,7 +783,7 @@ const ApplicationSettings = () => {
          {data.shower_timer && (
            <Grid>
              <ValidatedTextField
-                fieldErrors={fieldErrors || {}}
+                fieldErrors={fieldErrors}
                name="shower_min_duration"
                label={LL.MIN_DURATION()}
                slotProps={{
@@ -1003,7 +801,7 @@ const ApplicationSettings = () => {
            <>
              <Grid>
                <ValidatedTextField
-                  fieldErrors={fieldErrors || {}}
+                  fieldErrors={fieldErrors}
                  name="shower_alert_trigger"
                  label={LL.TRIGGER_TIME()}
                  slotProps={{
@@ -1019,7 +817,7 @@ const ApplicationSettings = () => {
              </Grid>
              <Grid>
                <ValidatedTextField
-                  fieldErrors={fieldErrors || {}}
+                  fieldErrors={fieldErrors}
                  name="shower_alert_coldshot"
                  label={LL.COLD_SHOT_DURATION()}
                  slotProps={{
@@ -1038,9 +836,8 @@ const ApplicationSettings = () => {
        </Grid>

        {restartNeeded && (
-          <MessageBox level="warning" message={LL.RESTART_TEXT(0)}>
+          <MessageBox my={2} level="warning" message={LL.RESTART_TEXT(0)}>
            <Button
-              sx={{ ml: 2 }}
              startIcon={<PowerSettingsNewIcon />}
              variant="contained"
              color="error"
@@ -1076,12 +873,10 @@ const ApplicationSettings = () => {
    );
  };

-  return restarting ? (
-    <SystemMonitor />
-  ) : (
+  return (
    <SectionContent>
      {blocker ? <BlockNavigation blocker={blocker} /> : null}
-      {content()}
+      {restarting ? <SystemMonitor /> : content()}
    </SectionContent>
  );
 };
@@ -1,22 +1,12 @@
 import { useState } from 'react';
+import { toast } from 'react-toastify';

-import CancelIcon from '@mui/icons-material/Cancel';
 import DownloadIcon from '@mui/icons-material/GetApp';
-import WarningIcon from '@mui/icons-material/Warning';
-import {
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  Grid,
-  Typography
-} from '@mui/material';
+import { Box, Button, Grid2 as Grid, Typography } from '@mui/material';

 import * as SystemApi from 'api/system';
 import { API, callAction } from 'api/app';

-import { dialogStyle } from '@/CustomTheme';
 import { useRequest } from 'alova/client';
 import type { APIcall } from 'app/main/types';
 import SystemMonitor from 'app/status/SystemMonitor';
@@ -26,15 +16,12 @@ import {
  SingleUpload,
  useLayoutTitle
 } from 'components';
-import { toast } from 'components/toast';
 import { useI18nContext } from 'i18n/i18n-react';
 import { saveFile } from 'utils';

 const DownloadUpload = () => {
  const { LL } = useI18nContext();

-  const [confirmBackup, setConfirmBackup] = useState<boolean>(false);
-
  const [restarting, setRestarting] = useState<boolean>(false);

  const { send: sendExportData } = useRequest(
@@ -48,7 +35,7 @@ const DownloadUpload = () => {
      toast.info(LL.DOWNLOAD_SUCCESSFUL());
    })
    .onError((error) => {
-      toast.error(String(error.error?.message || 'An error occurred'));
+      toast.error(error.message);
    });

  const { send: sendAPI } = useRequest((data: APIcall) => API(data), {
@@ -59,114 +46,93 @@ const DownloadUpload = () => {

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

  useLayoutTitle(LL.DOWNLOAD_UPLOAD());

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

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

-  return (
-    <SectionContent>
-      <Dialog
-        sx={dialogStyle}
-        open={confirmBackup}
-        onClose={handleCloseBackupDialog}
-      >
-        <DialogTitle>{LL.DOWNLOAD_SYSTEM_BACKUP()}</DialogTitle>
-        <DialogContent dividers>
-          <WarningIcon color="warning" sx={{ fontSize: 18 }} />
-          &nbsp;
-          {LL.WARNING_SYSTEM_BACKUP()}
-        </DialogContent>
-        <DialogActions>
-          <Button
-            startIcon={<CancelIcon />}
-            variant="outlined"
-            onClick={handleCloseBackupDialog}
-            color="secondary"
-          >
-            {LL.CANCEL()}
-          </Button>
+        <Typography mb={1} variant="body1" color="warning">
+          {LL.DOWNLOAD_SETTINGS_TEXT()}.
+        </Typography>
+        <Grid container spacing={1}>
          <Button
+            sx={{ ml: 2 }}
            startIcon={<DownloadIcon />}
            variant="outlined"
-            onClick={handleDownload('systembackup')}
            color="primary"
+            onClick={() => sendExportData('settings')}
          >
-            {LL.DOWNLOAD(0)}
+            {LL.SETTINGS_OF(LL.APPLICATION())}
          </Button>
-        </DialogActions>
-      </Dialog>

-      <Typography sx={{ pb: 2 }} variant="h6" color="primary">
-        {LL.DOWNLOAD(0)}
-      </Typography>
-
-      <Grid
-        container
-        spacing={2}
-        sx={{
-          alignItems: 'center'
-        }}
-      >
-        <Typography variant="body1" color="warning">
-          {LL.DOWNLOAD_SETTINGS_TEXT()}:
-        </Typography>
+          <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>
        <Button
+          sx={{ ml: 2, mt: 2 }}
          startIcon={<DownloadIcon />}
          variant="outlined"
          color="primary"
-          onClick={() => setConfirmBackup(true)}
-        >
-          {LL.DOWNLOAD_SYSTEM_BACKUP()}
-        </Button>
-      </Grid>
-
-      <Grid container spacing={2} sx={{ mt: 2, alignItems: 'center' }}>
-        <Typography variant="body1" color="warning">
-          {LL.DOWNLOAD_SETTINGS_TEXT2()}:
-        </Typography>
-        <Button
-          startIcon={<DownloadIcon />}
-          variant="outlined"
-          color="primary"
-          onClick={handleDownload('allvalues')}
+          onClick={() => sendExportData('allvalues')}
        >
          {LL.ALLVALUES()}
        </Button>
-      </Grid>

-      <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>

-      <SingleUpload text={LL.UPLOAD_BACKUP_TEXT()} doRestart={doRestart} />
-    </SectionContent>
+        <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>
  );
 };

@@ -1,13 +1,11 @@
 import { useState } from 'react';

 import CancelIcon from '@mui/icons-material/Cancel';
-import SettingsBackupRestoreIcon from '@mui/icons-material/SettingsBackupRestore';
 import WarningIcon from '@mui/icons-material/Warning';
 import {
-  Box,
  Button,
  Checkbox,
-  Grid,
+  Grid2 as Grid,
  InputAdornment,
  MenuItem,
  TextField,
@@ -16,6 +14,7 @@ import {

 import * as MqttApi from 'api/mqtt';

+import type { ValidateFieldsError } from 'async-validator';
 import {
  BlockFormControlLabel,
  BlockNavigation,
@@ -26,14 +25,10 @@ import {
  ValidatedTextField,
  useLayoutTitle
 } from 'components';
-import { toast } from 'components/toast';
 import { useI18nContext } from 'i18n/i18n-react';
 import type { MqttSettingsType } from 'types';
 import { numberValue, updateValueDirty, useRest } from 'utils';
-import { ValidationError, createMqttSettingsValidator, validate } from 'validators';
-import type { ValidateFieldsError } from 'validators/schema';
-
-import { callAction } from '../../api/app';
+import { createMqttSettingsValidator, validate } from 'validators';

 const MqttSettings = () => {
  const {
@@ -57,92 +52,48 @@ const MqttSettings = () => {

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

-  const sendResetMQTT = () => {
-    void callAction({ action: 'resetMQTT' })
-      .then(() => {
-        toast.success('MQTT ' + LL.REFRESH() + ' successful');
-      })
-      .catch((error) => {
-        toast.error(String(error.error?.message || 'An error occurred'));
-      });
-  };
-
  const updateFormValue = updateValueDirty(
-    origData as unknown as Record<string, unknown>,
+    origData,
    dirtyFlags,
    setDirtyFlags,
-    updateDataValue as (value: unknown) => void
+    updateDataValue
  );

  const SecondsInputProps = {
    endAdornment: <InputAdornment position="end">{LL.SECONDS()}</InputAdornment>
  };

-  const validateAndSubmit = async () => {
-    if (!data) return;
-    try {
-      setFieldErrors(undefined);
-      await validate(createMqttSettingsValidator(data), data);
-      await saveData();
-    } catch (error) {
-      setFieldErrors((error as ValidationError).fieldErrors);
+  const content = () => {
+    if (!data) {
+      return <FormLoader onRetry={loadData} errorMessage={errorMessage} />;
    }
-  };

-  const publishIntervalFields = [
-    { 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 }
-  ];
+    const validateAndSubmit = async () => {
+      try {
+        setFieldErrors(undefined);
+        await validate(createMqttSettingsValidator(data), data);
+        await saveData();
+      } catch (error) {
+        setFieldErrors(error as ValidateFieldsError);
+      }
+    };

-  if (!data) {
    return (
-      <SectionContent>
-        {blocker ? <BlockNavigation blocker={blocker} /> : null}
-        <FormLoader onRetry={loadData} errorMessage={errorMessage || ''} />
-      </SectionContent>
-    );
-  }
-
-  return (
-    <SectionContent>
-      {blocker ? <BlockNavigation blocker={blocker} /> : null}
      <>
-        <Box sx={{ display: 'flex', gap: 2, mb: 1 }}>
-          <BlockFormControlLabel
-            control={
-              <Checkbox
-                name="enabled"
-                checked={data.enabled}
-                onChange={updateFormValue}
-              />
-            }
-            label={LL.ENABLE_MQTT()}
-          />
-          {data.enabled && (
-            <Button
-              startIcon={<SettingsBackupRestoreIcon />}
-              color="secondary"
-              variant="outlined"
-              onClick={sendResetMQTT}
-            >
-              {LL.REFRESH() + ' MQTT'}
-            </Button>
-          )}
-        </Box>
+        <BlockFormControlLabel
+          control={
+            <Checkbox
+              name="enabled"
+              checked={data.enabled}
+              onChange={updateFormValue}
+            />
+          }
+          label={LL.ENABLE_MQTT()}
+        />
        <Grid container spacing={2} rowSpacing={0}>
          <Grid>
            <ValidatedTextField
-              fieldErrors={fieldErrors ?? {}}
+              fieldErrors={fieldErrors}
              name="host"
              label={LL.ADDRESS_OF(LL.BROKER())}
              multiline
@@ -154,7 +105,7 @@ const MqttSettings = () => {
          </Grid>
          <Grid>
            <ValidatedTextField
-              fieldErrors={fieldErrors ?? {}}
+              fieldErrors={fieldErrors}
              name="port"
              label="Port"
              variant="outlined"
@@ -166,7 +117,7 @@ const MqttSettings = () => {
          </Grid>
          <Grid>
            <ValidatedTextField
-              fieldErrors={fieldErrors ?? {}}
+              fieldErrors={fieldErrors}
              name="base"
              label={LL.BASE_TOPIC()}
              variant="outlined"
@@ -178,7 +129,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}
@@ -207,7 +158,7 @@ const MqttSettings = () => {
          </Grid>
          <Grid>
            <ValidatedTextField
-              fieldErrors={fieldErrors ?? {}}
+              fieldErrors={fieldErrors}
              name="keep_alive"
              label="Keep Alive"
              slotProps={{
@@ -254,7 +205,6 @@ const MqttSettings = () => {
            label={LL.CERT()}
            variant="outlined"
            value={data.rootCA}
-            sx={{ width: '50ch' }}
            onChange={updateFormValue}
            margin="normal"
          />
@@ -304,160 +254,219 @@ const MqttSettings = () => {
          }
          label={LL.MQTT_RESPONSE()}
        />
-        <Grid container spacing={2} rowSpacing={0}>
-          <Grid>
-            <BlockFormControlLabel
-              control={
-                <Checkbox
-                  name="publish_single"
-                  checked={data.publish_single}
-                  onChange={updateFormValue}
-                  disabled={data.ha_enabled}
-                />
-              }
-              label={LL.MQTT_PUBLISH_TEXT_1()}
-            />
-          </Grid>
-          {data.publish_single && (
+        {!data.ha_enabled && (
+          <Grid container spacing={2} rowSpacing={0}>
            <Grid>
              <BlockFormControlLabel
                control={
                  <Checkbox
-                    name="publish_single2cmd"
-                    checked={data.publish_single2cmd}
+                    name="publish_single"
+                    checked={data.publish_single}
                    onChange={updateFormValue}
                  />
                }
-                label={LL.MQTT_PUBLISH_TEXT_2()}
+                label={LL.MQTT_PUBLISH_TEXT_1()}
              />
            </Grid>
-          )}
-        </Grid>
-        {/* <Grid container spacing={2} rowSpacing={0}> */}
-        <Grid>
-          <BlockFormControlLabel
-            control={
-              <Checkbox
-                name="ha_enabled"
-                checked={data.ha_enabled}
-                onChange={updateFormValue}
-                disabled={data.publish_single}
-              />
-            }
-            label={LL.MQTT_PUBLISH_TEXT_3()}
-          />
-        </Grid>
-        {data.ha_enabled && (
+            {data.publish_single && (
+              <Grid>
+                <BlockFormControlLabel
+                  control={
+                    <Checkbox
+                      name="publish_single2cmd"
+                      checked={data.publish_single2cmd}
+                      onChange={updateFormValue}
+                    />
+                  }
+                  label={LL.MQTT_PUBLISH_TEXT_2()}
+                />
+              </Grid>
+            )}
+          </Grid>
+        )}
+        {!data.publish_single && (
          <Grid container spacing={2} rowSpacing={0}>
            <Grid>
-              <TextField
-                name="discovery_type"
-                label={LL.MQTT_PUBLISH_TEXT_5()}
-                value={data.discovery_type}
-                variant="outlined"
-                onChange={updateFormValue}
-                margin="normal"
-                select
-              >
-                <MenuItem value={0}>Home Assistant</MenuItem>
-                <MenuItem value={1}>Domoticz</MenuItem>
-                <MenuItem value={2}>Domoticz (latest)</MenuItem>
-              </TextField>
-            </Grid>
-            <Grid>
-              <TextField
-                name="discovery_prefix"
-                label={LL.MQTT_PUBLISH_TEXT_4()}
-                variant="outlined"
-                value={data.discovery_prefix}
-                onChange={updateFormValue}
-                margin="normal"
+              <BlockFormControlLabel
+                control={
+                  <Checkbox
+                    name="ha_enabled"
+                    checked={data.ha_enabled}
+                    onChange={updateFormValue}
+                  />
+                }
+                label={LL.MQTT_PUBLISH_TEXT_3()}
              />
            </Grid>
-            <Grid>
-              <TextField
-                name="entity_format"
-                label={LL.MQTT_ENTITY_FORMAT()}
-                value={data.entity_format}
-                variant="outlined"
-                onChange={updateFormValue}
-                margin="normal"
-                select
-              >
-                <MenuItem value={0}>{LL.MQTT_ENTITY_FORMAT_0()}</MenuItem>
-                <MenuItem value={3}>
-                  {LL.MQTT_ENTITY_FORMAT_1()}&nbsp;(v3.5)
-                </MenuItem>
-                <MenuItem value={4}>
-                  {LL.MQTT_ENTITY_FORMAT_2()}&nbsp;(v3.5)
-                </MenuItem>
-                <MenuItem value={1}>
-                  {LL.MQTT_ENTITY_FORMAT_1()}&nbsp;(latest)
-                </MenuItem>
-                <MenuItem value={2}>
-                  {LL.MQTT_ENTITY_FORMAT_2()}&nbsp;(latest)
-                </MenuItem>
-              </TextField>
-            </Grid>
-            <Grid>
-              {data.discovery_type === 0 && (
-                <TextField
-                  name="ha_number_mode"
-                  label={LL.MQTT_INPUT_NUMBER_FORMAT()}
-                  value={data.ha_number_mode}
-                  variant="outlined"
-                  onChange={updateFormValue}
-                  sx={{ width: '20ch' }}
-                  margin="normal"
-                  select
-                >
-                  <MenuItem value={0}>Box</MenuItem>
-                  <MenuItem value={1}>Slider</MenuItem>
-                </TextField>
-              )}
-            </Grid>
+            {data.ha_enabled && (
+              <Grid container spacing={2} rowSpacing={0}>
+                <Grid>
+                  <TextField
+                    name="discovery_type"
+                    label={LL.MQTT_PUBLISH_TEXT_5()}
+                    value={data.discovery_type}
+                    variant="outlined"
+                    onChange={updateFormValue}
+                    margin="normal"
+                    select
+                  >
+                    <MenuItem value={0}>Home Assistant</MenuItem>
+                    <MenuItem value={1}>Domoticz</MenuItem>
+                    <MenuItem value={2}>Domoticz (latest)</MenuItem>
+                  </TextField>
+                </Grid>
+                <Grid>
+                  <TextField
+                    name="discovery_prefix"
+                    label={LL.MQTT_PUBLISH_TEXT_4()}
+                    variant="outlined"
+                    value={data.discovery_prefix}
+                    onChange={updateFormValue}
+                    margin="normal"
+                  />
+                </Grid>
+                <Grid>
+                  <TextField
+                    name="entity_format"
+                    label={LL.MQTT_ENTITY_FORMAT()}
+                    value={data.entity_format}
+                    variant="outlined"
+                    onChange={updateFormValue}
+                    margin="normal"
+                    select
+                  >
+                    <MenuItem value={0}>{LL.MQTT_ENTITY_FORMAT_0()}</MenuItem>
+                    <MenuItem value={3}>
+                      {LL.MQTT_ENTITY_FORMAT_1()}&nbsp;(v3.6)
+                    </MenuItem>
+                    <MenuItem value={4}>
+                      {LL.MQTT_ENTITY_FORMAT_2()}&nbsp;(v3.6)
+                    </MenuItem>
+                    <MenuItem value={1}>{LL.MQTT_ENTITY_FORMAT_1()}</MenuItem>
+                    <MenuItem value={2}>{LL.MQTT_ENTITY_FORMAT_2()}</MenuItem>
+                  </TextField>
+                </Grid>
+              </Grid>
+            )}
          </Grid>
        )}
        <Typography sx={{ pt: 2 }} variant="h6" color="primary">
          {LL.MQTT_PUBLISH_INTERVALS()}&nbsp;(0=auto)
        </Typography>
        <Grid container spacing={2} rowSpacing={0}>
-          {publishIntervalFields.map((field) => (
-            <Grid key={field.name}>
-              {field.validated ? (
-                <ValidatedTextField
-                  fieldErrors={fieldErrors ?? {}}
-                  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>
+            <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.TEMP_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>
        </Grid>
        {dirtyFlags && dirtyFlags.length !== 0 && (
          <ButtonRow>
@@ -484,6 +493,13 @@ const MqttSettings = () => {
          </ButtonRow>
        )}
      </>
+    );
+  };
+
+  return (
+    <SectionContent>
+      {blocker ? <BlockNavigation blocker={blocker} /> : null}
+      {content()}
    </SectionContent>
  );
 };
@@ -1,28 +1,14 @@
 import { useState } from 'react';

-import AccessTimeIcon from '@mui/icons-material/AccessTime';
 import CancelIcon from '@mui/icons-material/Cancel';
 import WarningIcon from '@mui/icons-material/Warning';
-import {
-  Box,
-  Button,
-  Checkbox,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  Grid,
-  MenuItem,
-  TextField,
-  Typography
-} from '@mui/material';
+import { Button, Checkbox, MenuItem } from '@mui/material';

 import * as NTPApi from 'api/ntp';
 import { readNTPSettings } from 'api/ntp';

-import { dialogStyle } from 'CustomTheme';
-import { useRequest } from 'alova/client';
 import { updateState } from 'alova/client';
+import type { ValidateFieldsError } from 'async-validator';
 import {
  BlockFormControlLabel,
  BlockNavigation,
@@ -32,20 +18,13 @@ import {
  ValidatedTextField,
  useLayoutTitle
 } from 'components';
-import { toast } from 'components/toast';
 import { useI18nContext } from 'i18n/i18n-react';
-import type { NTPSettingsType, Time } from 'types';
-import { formatLocalDateTime, updateValueDirty, useRest } from 'utils';
-import { ValidationError, validate } from 'validators';
+import type { NTPSettingsType } from 'types';
+import { updateValueDirty, useRest } from 'utils';
+import { validate } from 'validators';
 import { NTP_SETTINGS_VALIDATOR } from 'validators/ntp';
-import type { ValidateFieldsError } from 'validators/schema';

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

 const NTPSettings = () => {
  const {
@@ -67,94 +46,39 @@ const NTPSettings = () => {
  const { LL } = useI18nContext();
  useLayoutTitle('NTP');

-  const timeZoneItems = useTimeZoneSelectItems();
-  const timeZoneItemsT = timeZoneSelectItemsT();
-
-  const selectedTzValue = data
-    ? selectedTimeZone(data.tz_label, data.tz_format)
-    : undefined;
-
-  const selectedTzValueT = data
-    ? selectedTimeZone(data.tz_label_t, data.tz_format_t)
-    : undefined;
-  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),
-    {
-      immediate: false
-    }
-  );
-
  const updateFormValue = updateValueDirty(
-    origData as unknown as Record<string, unknown>,
+    origData,
    dirtyFlags,
    setDirtyFlags,
-    updateDataValue as (value: unknown) => void
+    updateDataValue
  );

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

-  const openSetTime = () => {
-    setLocalTime(formatLocalDateTime(new Date()));
-    setSettingTime(true);
-  };
-
-  const configureTime = async () => {
-    setProcessing(true);
-
-    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);
-    }
-  };
-
-  const handleCloseSetTime = () => setSettingTime(false);
-
-  const validateAndSubmit = async () => {
-    if (!data) return;
-    try {
-      setFieldErrors(undefined);
-      await validate(NTP_SETTINGS_VALIDATOR, data);
-      await saveData();
-    } catch (error) {
-      setFieldErrors((error as ValidationError).fieldErrors);
-    }
-  };
-
-  const changeTimeZone = (event: React.ChangeEvent<HTMLInputElement>) => {
-    void updateState(readNTPSettings(), (settings: NTPSettingsType) => ({
-      ...settings,
-      tz_label: event.target.value,
-      tz_format: TIME_ZONES[event.target.value]
-    }));
-    updateFormValue(event);
-  };
-
-  const changeTimeZoneT = (event: React.ChangeEvent<HTMLInputElement>) => {
-    void updateState(readNTPSettings(), (settings: NTPSettingsType) => ({
-      ...settings,
-      tz_label_t: event.target.value,
-      tz_format_t: TIME_ZONES[event.target.value]
-    }));
-    updateFormValue(event);
-  };
-
-  const renderContent = () => {
+  const content = () => {
    if (!data) {
-      return <FormLoader onRetry={loadData} errorMessage={errorMessage || ''} />;
+      return <FormLoader onRetry={loadData} errorMessage={errorMessage} />;
    }

+    const validateAndSubmit = async () => {
+      try {
+        setFieldErrors(undefined);
+        await validate(NTP_SETTINGS_VALIDATOR, data);
+        await saveData();
+      } catch (error) {
+        setFieldErrors(error as ValidateFieldsError);
+      }
+    };
+
+    const changeTimeZone = (event: React.ChangeEvent<HTMLInputElement>) => {
+      void updateState(readNTPSettings(), (settings: NTPSettingsType) => ({
+        ...settings,
+        tz_label: event.target.value,
+        tz_format: TIME_ZONES[event.target.value]
+      }));
+      updateFormValue(event);
+    };
+
    return (
      <>
        <BlockFormControlLabel
@@ -168,88 +92,29 @@ const NTPSettings = () => {
          label={LL.ENABLE_NTP()}
        />
        <ValidatedTextField
-          fieldErrors={fieldErrors || {}}
+          fieldErrors={fieldErrors}
          name="server"
          label={LL.NTP_SERVER()}
          fullWidth
          variant="outlined"
-          disabled={!data.enabled}
          value={data.server}
          onChange={updateFormValue}
          margin="normal"
        />
        <ValidatedTextField
-          fieldErrors={fieldErrors || {}}
+          fieldErrors={fieldErrors}
          name="tz_label"
          label={LL.TIME_ZONE()}
          fullWidth
          variant="outlined"
-          value={selectedTzValue}
+          value={selectedTimeZone(data.tz_label, data.tz_format)}
          onChange={changeTimeZone}
          margin="normal"
          select
        >
          <MenuItem disabled>{LL.TIME_ZONE()}...</MenuItem>
-          {timeZoneItems}
+          {timeZoneSelectItems()}
        </ValidatedTextField>
-        {data.enabled && (
-          <Grid container spacing={2} rowSpacing={0}>
-            <Grid>
-              <ValidatedTextField
-                fieldErrors={fieldErrors || {}}
-                name="thermostat_sync"
-                label="Sync EMS-Thermostat"
-                variant="outlined"
-                sx={{ width: '30ch' }}
-                value={data.thermostat_sync}
-                onChange={updateFormValue}
-                margin="normal"
-                select
-              >
-                <MenuItem value={0}>{LL.OFF()}</MenuItem>
-                <MenuItem value={1}>{LL.ON()}</MenuItem>
-                <MenuItem value={2}>
-                  {LL.USE()} {LL.TIME_ZONE()}
-                </MenuItem>
-              </ValidatedTextField>
-            </Grid>
-            <Grid>
-              {data.thermostat_sync === 2 && (
-                <ValidatedTextField
-                  fieldErrors={fieldErrors || {}}
-                  name="tz_label_t"
-                  label={LL.TIME_ZONE() + ' Thermostat'}
-                  sx={{ width: '30ch' }}
-                  variant="outlined"
-                  value={selectedTzValueT}
-                  onChange={changeTimeZoneT}
-                  margin="normal"
-                  select
-                >
-                  <MenuItem disabled>{LL.TIME_ZONE()}...</MenuItem>
-                  {timeZoneItemsT}
-                </ValidatedTextField>
-              )}
-            </Grid>
-          </Grid>
-        )}
-        <Box sx={{ display: 'flex', flexWrap: 'wrap' }}>
-          {!data.enabled && !dirtyFlags.length && (
-            <Box sx={{ flexWrap: 'nowrap', whiteSpace: 'nowrap' }}>
-              <ButtonRow>
-                <Button
-                  onClick={openSetTime}
-                  variant="outlined"
-                  color="primary"
-                  startIcon={<AccessTimeIcon />}
-                >
-                  {LL.SET_TIME(0)}
-                </Button>
-              </ButtonRow>
-            </Box>
-          )}
-        </Box>
-
        {dirtyFlags && dirtyFlags.length !== 0 && (
          <ButtonRow>
            <Button
@@ -281,47 +146,7 @@ const NTPSettings = () => {
  return (
    <SectionContent>
      {blocker ? <BlockNavigation blocker={blocker} /> : null}
-      {renderContent()}
-      <Dialog sx={dialogStyle} open={settingTime} onClose={handleCloseSetTime}>
-        <DialogTitle>{LL.SET_TIME(1)}</DialogTitle>
-        <DialogContent dividers>
-          <Typography color="warning" variant="body2">
-            {LL.SET_TIME_TEXT()}
-          </Typography>
-          <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>
+      {content()}
    </SectionContent>
  );
 };
@@ -1,43 +1,82 @@
-import { useContext } from 'react';
+import { useState } from 'react';

 import AccessTimeIcon from '@mui/icons-material/AccessTime';
-import BuildIcon from '@mui/icons-material/Build';
+import CancelIcon from '@mui/icons-material/Cancel';
 import DeviceHubIcon from '@mui/icons-material/DeviceHub';
 import ImportExportIcon from '@mui/icons-material/ImportExport';
 import LockIcon from '@mui/icons-material/Lock';
+import SettingsBackupRestoreIcon from '@mui/icons-material/SettingsBackupRestore';
 import SettingsEthernetIcon from '@mui/icons-material/SettingsEthernet';
 import SettingsInputAntennaIcon from '@mui/icons-material/SettingsInputAntenna';
 import TuneIcon from '@mui/icons-material/Tune';
 import ViewModuleIcon from '@mui/icons-material/ViewModule';
-import { List } from '@mui/material';
+import {
+  Box,
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  List
+} from '@mui/material';

+import { API } from 'api/app';
+
+import { dialogStyle } from 'CustomTheme';
+import { useRequest } from 'alova/client';
+import type { APIcall } from 'app/main/types';
 import { SectionContent, useLayoutTitle } from 'components';
 import ListMenuItem from 'components/layout/ListMenuItem';
-import { AuthenticatedContext } from 'contexts/authentication';
 import { useI18nContext } from 'i18n/i18n-react';

 const Settings = () => {
  const { LL } = useI18nContext();
-  const { versions } = useContext(AuthenticatedContext);
  useLayoutTitle(LL.SETTINGS(0));

-  const upgradeAvailable = versions?.current?.upgradeable ?? false;
-  const firmwareText = versions?.current?.version
-    ? `v${versions.current.version}${upgradeAvailable ? ` (${LL.UPDATE_AVAILABLE()})` : ''}`
-    : '';
+  const [confirmFactoryReset, setConfirmFactoryReset] = useState<boolean>(false);

-  return (
-    <SectionContent>
-      <List>
-        <ListMenuItem
-          icon={BuildIcon}
-          bgcolor="#72caf9"
-          label="EMS-ESP Firmware"
-          text={firmwareText}
-          to="/settings/version"
-          badge={upgradeAvailable}
-        />
+  const { send: sendAPI } = useRequest((data: APIcall) => API(data), {
+    immediate: false
+  });

+  const doFormat = async () => {
+    await sendAPI({ device: 'system', cmd: 'format', id: 0 }).then(() => {
+      setConfirmFactoryReset(false);
+    });
+  };
+
+  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 content = () => (
+    <>
+      <List sx={{ borderRadius: 3, border: '2px solid grey' }}>
        <ListMenuItem
          icon={TuneIcon}
          bgcolor="#134ba2"
@@ -101,8 +140,23 @@ const Settings = () => {
          to="downloadUpload"
        />
      </List>
-    </SectionContent>
+
+      {renderFactoryResetDialog()}
+
+      <Box mt={2} display="flex" flexWrap="wrap">
+        <Button
+          startIcon={<SettingsBackupRestoreIcon />}
+          variant="outlined"
+          onClick={() => setConfirmFactoryReset(true)}
+          color="error"
+        >
+          {LL.FACTORY_RESET()}
+        </Button>
+      </Box>
+    </>
  );
+
+  return <SectionContent>{content()}</SectionContent>;
 };

 export default Settings;
@@ -1,6 +1,8 @@
 import { MenuItem } from '@mui/material';

-export const TIME_ZONES: Record<string, string> = {
+type TimeZones = Record<string, string>;
+
+export const TIME_ZONES: TimeZones = {
  'Africa/Abidjan': 'GMT0',
  'Africa/Accra': 'GMT0',
  'Africa/Addis_Ababa': 'EAT-3',
@@ -463,27 +465,14 @@ export const TIME_ZONES: Record<string, string> = {
  '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;
 }

-const precomputedTimeZoneItems = TIME_ZONE_LABELS.map((label) => (
-  <MenuItem key={label} value={label}>
-    {label}
-  </MenuItem>
-));
-
-export function useTimeZoneSelectItems() {
-  return precomputedTimeZoneItems;
-}
-
 export function timeZoneSelectItems() {
-  return precomputedTimeZoneItems;
-}
-
-export function timeZoneSelectItemsT() {
-  return precomputedTimeZoneItems;
+  return Object.keys(TIME_ZONES).map((label) => (
+    <MenuItem key={label} value={label}>
+      {label}
+    </MenuItem>
+  ));
 }
@@ -1,946 +0,0 @@
-import { memo, useContext, useEffect, useState } from 'react';
-import { Link } from 'react-router';
-
-import CancelIcon from '@mui/icons-material/Cancel';
-import CloseIcon from '@mui/icons-material/Close';
-import CheckIcon from '@mui/icons-material/Done';
-import DownloadIcon from '@mui/icons-material/GetApp';
-import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
-import PowerSettingsNewIcon from '@mui/icons-material/PowerSettingsNew';
-import SettingsBackupRestoreIcon from '@mui/icons-material/SettingsBackupRestore';
-import WarningIcon from '@mui/icons-material/Warning';
-import {
-  Box,
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  Grid,
-  IconButton,
-  Table,
-  TableBody,
-  TableCell,
-  TableRow,
-  Typography
-} from '@mui/material';
-
-import * as SystemApi from 'api/system';
-import { API, callAction } from 'api/app';
-
-import { dialogStyle } from 'CustomTheme';
-import { useRequest } from 'alova/client';
-import type { APIcall } from 'app/main/types';
-import SystemMonitor from 'app/status/SystemMonitor';
-import {
-  FormLoader,
-  SectionContent,
-  SingleUpload,
-  useLayoutTitle
-} from 'components';
-import { toast } from 'components/toast';
-import { AuthenticatedContext } from 'contexts/authentication';
-import { useI18nContext } from 'i18n/i18n-react';
-import type { TranslationFunctions } from 'i18n/i18n-types';
-import type { VersionInfo } from 'types';
-import { prettyDateTime } from 'utils/time';
-
-// Constants moved outside component to avoid recreation
-const STABLE_URL = 'https://github.com/emsesp/EMS-ESP32/releases/download/';
-const STABLE_RELNOTES_URL =
-  'https://github.com/emsesp/EMS-ESP32/blob/main/CHANGELOG.md';
-const DEV_URL = 'https://github.com/emsesp/EMS-ESP32/releases/download/latest/';
-const DEV_RELNOTES_URL =
-  'https://github.com/emsesp/EMS-ESP32/blob/dev/CHANGELOG_LATEST.md';
-
-// Types for better type safety
-interface PartitionData {
-  partition: string;
-  version: string;
-  install_date?: string;
-  size: number;
-}
-
-interface VersionData {
-  emsesp_version: string;
-  arduino_version: string;
-  esp_platform: string;
-  flash_chip_size: number;
-  psram: boolean;
-  build_flags?: string;
-  partition: string;
-  partitions: PartitionData[];
-  developer_mode: boolean;
-  disable_reset: boolean;
-}
-
-// Memoized components for better performance
-const VersionInfoDialog = memo(
-  ({
-    showVersionInfo,
-    latestVersion,
-    latestDevVersion,
-    partitionVersion,
-    partition,
-    currentPartition,
-    size,
-    locale,
-    LL,
-    onClose
-  }: {
-    showVersionInfo: number;
-    latestVersion: VersionInfo | undefined;
-    latestDevVersion: VersionInfo | undefined;
-    partitionVersion: VersionInfo | undefined;
-    partition: string;
-    currentPartition: string;
-    size: number;
-    locale: string;
-    LL: TranslationFunctions;
-    onClose: () => void;
-  }) => {
-    if (showVersionInfo === 0) return null;
-
-    const isStable = showVersionInfo === 1;
-    const isDev = showVersionInfo === 2;
-    const isPartition = showVersionInfo === 3;
-
-    const version = isStable
-      ? latestVersion
-      : isDev
-        ? latestDevVersion
-        : partitionVersion;
-    const relNotesUrl = isStable
-      ? STABLE_RELNOTES_URL
-      : isDev
-        ? DEV_RELNOTES_URL
-        : '';
-
-    return (
-      <Dialog sx={dialogStyle} open={showVersionInfo !== 0} onClose={onClose}>
-        <DialogTitle>{LL.FIRMWARE_VERSION_INFO()}</DialogTitle>
-        <DialogContent dividers>
-          <Table size="small" sx={{ borderCollapse: 'collapse', minWidth: 0 }}>
-            <TableBody>
-              <TableRow sx={{ height: 24, borderBottom: 'none' }}>
-                <TableCell
-                  component="th"
-                  scope="row"
-                  sx={{
-                    color: 'lightblue',
-                    borderBottom: 'none',
-                    pr: 1,
-                    py: 0.5,
-                    fontSize: 13
-                  }}
-                >
-                  {LL.VERSION()}
-                </TableCell>
-                <TableCell sx={{ borderBottom: 'none', py: 0.5, fontSize: 13 }}>
-                  {isPartition
-                    ? typeof version === 'string'
-                      ? version
-                      : version?.version
-                    : version?.version}
-                </TableCell>
-              </TableRow>
-              <TableRow sx={{ height: 24, borderBottom: 'none' }}>
-                <TableCell
-                  component="th"
-                  scope="row"
-                  sx={{
-                    color: 'lightblue',
-                    borderBottom: 'none',
-                    pr: 1,
-                    py: 0.5,
-                    fontSize: 13,
-                    width: 140
-                  }}
-                >
-                  {isPartition ? LL.TYPE(0) : LL.RELEASE_TYPE()}
-                </TableCell>
-                <TableCell sx={{ borderBottom: 'none', py: 0.5, fontSize: 13 }}>
-                  {partition === currentPartition && LL.ACTIVE() + ' '}
-                  {isStable
-                    ? LL.STABLE()
-                    : isDev
-                      ? LL.DEVELOPMENT()
-                      : 'Partition ' + LL.VERSION()}
-                </TableCell>
-              </TableRow>
-              {isPartition && (
-                <TableRow sx={{ height: 24, borderBottom: 'none' }}>
-                  <TableCell
-                    component="th"
-                    scope="row"
-                    sx={{
-                      color: 'lightblue',
-                      borderBottom: 'none',
-                      pr: 1,
-                      py: 0.5,
-                      fontSize: 13
-                    }}
-                  >
-                    Partition
-                  </TableCell>
-                  <TableCell sx={{ borderBottom: 'none', py: 0.5, fontSize: 13 }}>
-                    {partition}
-                  </TableCell>
-                </TableRow>
-              )}
-              {isPartition && (
-                <TableRow sx={{ height: 24, borderBottom: 'none' }}>
-                  <TableCell
-                    component="th"
-                    scope="row"
-                    sx={{
-                      color: 'lightblue',
-                      borderBottom: 'none',
-                      pr: 1,
-                      py: 0.5,
-                      fontSize: 13
-                    }}
-                  >
-                    Size
-                  </TableCell>
-                  <TableCell sx={{ borderBottom: 'none', py: 0.5, fontSize: 13 }}>
-                    {size} KB
-                  </TableCell>
-                </TableRow>
-              )}
-              {version && version.date && (
-                <TableRow sx={{ height: 24, borderBottom: 'none' }}>
-                  <TableCell
-                    component="th"
-                    scope="row"
-                    sx={{
-                      color: 'lightblue',
-                      borderBottom: 'none',
-                      pr: 1,
-                      py: 0.5,
-                      fontSize: 13
-                    }}
-                  >
-                    {isPartition ? 'Install Date' : 'Build Date'}
-                  </TableCell>
-                  <TableCell sx={{ borderBottom: 'none', py: 0.5, fontSize: 13 }}>
-                    {prettyDateTime(locale, new Date(version.date))}
-                  </TableCell>
-                </TableRow>
-              )}
-            </TableBody>
-          </Table>
-        </DialogContent>
-        <DialogActions>
-          {!isPartition && (
-            <Button
-              variant="outlined"
-              component="a"
-              href={relNotesUrl}
-              target="_blank"
-              color="primary"
-            >
-              Changelog
-            </Button>
-          )}
-          <Button variant="outlined" onClick={onClose} color="secondary">
-            {LL.CLOSE()}
-          </Button>
-        </DialogActions>
-      </Dialog>
-    );
-  }
-);
-
-const InstallDialog = memo(
-  ({
-    openInstallDialog,
-    fetchDevVersion,
-    latestVersion,
-    latestDevVersion,
-    upgradeImportantMessageType,
-    platform,
-    LL,
-    onClose,
-    onInstall
-  }: {
-    openInstallDialog: boolean;
-    fetchDevVersion: boolean;
-    latestVersion: VersionInfo | undefined;
-    latestDevVersion: VersionInfo | undefined;
-    upgradeImportantMessageType: number;
-    platform: string;
-    LL: TranslationFunctions;
-    onClose: () => void;
-    onInstall: (url: string) => void;
-  }) => {
-    const binURL = (() => {
-      if (!latestVersion || !latestDevVersion) return '';
-      const version = fetchDevVersion ? latestDevVersion : latestVersion;
-      const filename = `EMS-ESP-${version.version.replaceAll('.', '_')}-${platform}.bin`;
-      return fetchDevVersion
-        ? `${DEV_URL}${filename}`
-        : `${STABLE_URL}v${version.version}/${filename}`;
-    })();
-
-    return (
-      <Dialog sx={dialogStyle} open={openInstallDialog} onClose={onClose}>
-        <DialogTitle>
-          {`${LL.INSTALL()} ${fetchDevVersion ? LL.DEVELOPMENT() : LL.STABLE()} Firmware`}
-        </DialogTitle>
-        <DialogContent dividers>
-          <Typography sx={{ mb: 2 }}>
-            {LL.INSTALL_VERSION(
-              LL.INSTALL(),
-              fetchDevVersion ? latestDevVersion?.version : latestVersion?.version
-            )}
-          </Typography>
-          {upgradeImportantMessageType === 2 && LL.UPGRADE_IMPORTANT_MESSAGES_2()}
-          {upgradeImportantMessageType === 1 && (
-            <>
-              {LL.UPGRADE_IMPORTANT_MESSAGES_1()}
-              <Typography sx={{ mt: 2 }}>
-                <Link to="/settings/downloadUpload" style={{ color: 'lightblue' }}>
-                  {LL.DOWNLOAD_SYSTEM_BACKUP()}
-                </Link>
-              </Typography>
-            </>
-          )}
-          <Typography sx={{ mt: 2 }}>
-            <Link
-              to="https://docs.emsesp.org/FAQ#upgrading-the-firmware"
-              target="_blank"
-              rel="noreferrer"
-              style={{ color: 'lightblue' }}
-            >
-              {LL.ONLINE_HELP()}
-            </Link>
-          </Typography>
-        </DialogContent>
-        <DialogActions>
-          <Button
-            startIcon={<CancelIcon />}
-            variant="outlined"
-            onClick={onClose}
-            color="secondary"
-          >
-            {LL.CANCEL()}
-          </Button>
-          <Button
-            startIcon={<DownloadIcon />}
-            variant="outlined"
-            onClick={onClose}
-            color="primary"
-          >
-            <Link
-              to={binURL}
-              target="_blank"
-              rel="noreferrer"
-              style={{ color: 'lightblue', textDecoration: 'none' }}
-            >
-              {LL.DOWNLOAD(0)}
-            </Link>
-          </Button>
-          <Button
-            startIcon={<WarningIcon color="warning" />}
-            variant="outlined"
-            onClick={() => onInstall(binURL)}
-            color="primary"
-          >
-            {LL.INSTALL()}
-          </Button>
-        </DialogActions>
-      </Dialog>
-    );
-  }
-);
-
-const InstallPartitionDialog = memo(
-  ({
-    openInstallPartitionDialog,
-    version,
-    partition,
-    LL,
-    onClose,
-    onInstall
-  }: {
-    openInstallPartitionDialog: boolean;
-    version: string;
-    partition: string;
-    LL: TranslationFunctions;
-    onClose: () => void;
-    onInstall: (partition: string) => void;
-  }) => {
-    return (
-      <Dialog sx={dialogStyle} open={openInstallPartitionDialog} onClose={onClose}>
-        <DialogTitle>
-          {LL.INSTALL()} {LL.STORED_VERSIONS()}
-        </DialogTitle>
-        <DialogContent dividers>
-          <Typography sx={{ mb: 2 }}>
-            {LL.INSTALL_VERSION(LL.INSTALL(), version)}
-          </Typography>
-        </DialogContent>
-        <DialogActions>
-          <Button
-            startIcon={<CancelIcon />}
-            variant="outlined"
-            onClick={onClose}
-            color="secondary"
-          >
-            {LL.CANCEL()}
-          </Button>
-
-          <Button
-            startIcon={<WarningIcon color="warning" />}
-            variant="outlined"
-            onClick={() => onInstall(partition)}
-            color="primary"
-          >
-            {LL.INSTALL()}
-          </Button>
-        </DialogActions>
-      </Dialog>
-    );
-  }
-);
-
-// Helper function moved outside component
-const getPlatform = (data: VersionData): string => {
-  return `${data.esp_platform}-${data.flash_chip_size >= 16384 ? '16MB' : '4MB'}${data.psram ? '+' : ''}`;
-};
-
-const Version = () => {
-  const { LL, locale } = useI18nContext();
-  const { me, versions, refreshVersions } = useContext(AuthenticatedContext);
-
-  const [restarting, setRestarting] = useState<boolean>(false);
-  const [confirmFactoryReset, setConfirmFactoryReset] = useState<boolean>(false);
-  const [confirmRestart, setConfirmRestart] = useState<boolean>(false);
-  const [openInstallDialog, setOpenInstallDialog] = useState<boolean>(false);
-
-  const [partitionVersion, setPartitionVersion] = useState<VersionInfo | undefined>(
-    undefined
-  );
-  const [partition, setPartition] = useState<string>('');
-  const [openInstallPartitionDialog, setOpenInstallPartitionDialog] =
-    useState<boolean>(false);
-
-  const [fetchDevVersion, setFetchDevVersion] = useState<boolean>(false);
-  const [showVersionInfo, setShowVersionInfo] = useState<number>(0); // 1 = stable, 2 = dev, 3 = partition
-  const [firmwareSize, setFirmwareSize] = useState<number>(0);
-
-  const latestVersion: VersionInfo | undefined = versions?.stable
-    ? { version: versions.stable.version, date: versions.stable.date }
-    : undefined;
-  const latestDevVersion: VersionInfo | undefined = versions?.dev
-    ? { version: versions.dev.version, date: versions.dev.date }
-    : undefined;
-  const usingDevVersion = versions?.current?.type === 'dev';
-  const stableUpgradeAvailable = versions?.stable?.upgradeable ?? false;
-  const devUpgradeAvailable = versions?.dev?.upgradeable ?? false;
-  const internetLive = Boolean(versions?.stable || versions?.dev);
-
-  useEffect(() => {
-    if (internetLive) {
-      return;
-    }
-    const interval = setInterval(() => {
-      void refreshVersions();
-    }, 3000);
-    return () => clearInterval(interval);
-  }, [internetLive, refreshVersions]);
-
-  const { send: sendSetPartition } = useRequest(
-    (partition: string) => callAction({ action: 'setPartition', param: partition }),
-    { immediate: false }
-  ).onError((error) => {
-    toast.error(String(error.error?.message || 'An error occurred'));
-  });
-
-  const { data, send: loadData, error } = useRequest(SystemApi.readSystemStatus);
-
-  const { send: sendUploadURL } = useRequest(
-    (url: string) => callAction({ action: 'uploadURL', param: url }),
-    { immediate: false }
-  );
-
-  const { send: sendAPI } = useRequest((data: APIcall) => API(data), {
-    immediate: false
-  });
-
-  const [upgradeImportantMessageType, setUpgradeImportantMessageType] =
-    useState<number>(0);
-
-  const { send: checkUpgradeImportantMessages } = useRequest(
-    (version: string) =>
-      callAction({ action: 'upgradeImportantMessages', param: version }),
-    {
-      immediate: false
-    }
-  )
-    .onSuccess((event) => {
-      const upgradeImportantMessageType_n = (
-        event.data as { upgradeImportantMessageType: number }
-      ).upgradeImportantMessageType;
-      setUpgradeImportantMessageType(upgradeImportantMessageType_n);
-    })
-    .onError((error) => {
-      toast.error(String(error.error?.message || 'An error occurred'));
-    });
-
-  const platform = data ? getPlatform(data) : '';
-
-  const otherPartitions =
-    data?.partitions.filter((p) => p.partition !== data.partition) ?? [];
-
-  const setPartitionVersionInfo = (partition: string) => {
-    setShowVersionInfo(3);
-    const partitionData = data?.partitions.find((p) => p.partition === partition);
-    if (partitionData) {
-      setPartitionVersion({
-        version: partitionData.version,
-        date: partitionData.install_date ?? ''
-      });
-      setPartition(partitionData.partition);
-      setFirmwareSize(partitionData.size);
-    }
-  };
-
-  const doRestart = async () => {
-    setConfirmRestart(false);
-    await sendAPI({ device: 'system', cmd: 'restart', id: 0 }).catch(
-      (error: Error) => {
-        toast.error(error.message);
-      }
-    );
-    setRestarting(true);
-  };
-
-  const doFormat = async () => {
-    await sendAPI({ device: 'system', cmd: 'format', id: 0 }).then(() => {
-      setRestarting(true);
-      setConfirmFactoryReset(false);
-    });
-  };
-
-  const handleFactoryResetClose = () => setConfirmFactoryReset(false);
-  const handleFactoryResetClick = () => setConfirmFactoryReset(true);
-  const handleRestartClose = () => setConfirmRestart(false);
-  const handleRestartClick = () => setConfirmRestart(true);
-
-  const installFirmwareURL = async (url: string) => {
-    await sendUploadURL(url).catch((error: Error) => {
-      toast.error(error.message);
-    });
-    await doRestart();
-  };
-
-  const installPartitionFirmware = async (partition: string) => {
-    await sendSetPartition(partition).catch((error: Error) => {
-      toast.error(error.message);
-    });
-    setRestarting(true);
-  };
-
-  const showPartitionDialog = (
-    version: string,
-    partition: string,
-    install_date: string
-  ) => {
-    setOpenInstallPartitionDialog(true);
-    setPartitionVersion({ version: version, date: install_date });
-    setPartition(partition);
-  };
-
-  const showFirmwareDialog = (useDevVersion: boolean) => {
-    setFetchDevVersion(useDevVersion);
-    const targetVersion = useDevVersion
-      ? latestDevVersion?.version
-      : latestVersion?.version;
-    if (targetVersion) {
-      void checkUpgradeImportantMessages(targetVersion);
-    }
-    setOpenInstallDialog(true);
-  };
-
-  const closeInstallDialog = () => setOpenInstallDialog(false);
-  const closeInstallPartitionDialog = () => setOpenInstallPartitionDialog(false);
-
-  const handleVersionInfoClose = () => {
-    setShowVersionInfo(0);
-    setPartitionVersion(undefined);
-    setPartition('');
-  };
-
-  useLayoutTitle('EMS-ESP Firmware');
-
-  const showButtons = (showingDev: boolean) => {
-    const choice = showingDev
-      ? !usingDevVersion
-        ? LL.SWITCH_RELEASE_TYPE(LL.DEVELOPMENT())
-        : devUpgradeAvailable
-          ? LL.UPDATE_AVAILABLE()
-          : undefined
-      : usingDevVersion
-        ? LL.SWITCH_RELEASE_TYPE(LL.STABLE())
-        : stableUpgradeAvailable
-          ? LL.UPDATE_AVAILABLE()
-          : undefined;
-
-    if (!choice) {
-      return (
-        <>
-          <CheckIcon
-            color="success"
-            sx={{ verticalAlign: 'middle', ml: 0.5, mr: 0.5 }}
-          />
-          <span style={{ color: '#66bb6a', fontSize: '0.8em' }}>
-            {LL.LATEST_VERSION(usingDevVersion ? LL.DEVELOPMENT() : LL.STABLE())}
-          </span>
-          <Button
-            sx={{ ml: 1 }}
-            variant="outlined"
-            size="small"
-            onClick={() => showFirmwareDialog(showingDev)}
-          >
-            {LL.REINSTALL()}
-          </Button>
-        </>
-      );
-    }
-
-    if (!me.admin) return null;
-
-    const isUpdateAvailable = choice === LL.UPDATE_AVAILABLE();
-
-    return (
-      <Button
-        sx={{ ml: 1 }}
-        variant="outlined"
-        color={isUpdateAvailable ? 'success' : 'warning'}
-        size="small"
-        onClick={() => showFirmwareDialog(showingDev)}
-      >
-        {choice}
-        {isUpdateAvailable && (
-          <Box
-            component="span"
-            aria-label="update available"
-            sx={{
-              display: 'inline-block',
-              width: 8,
-              height: 8,
-              ml: 1,
-              verticalAlign: 'middle',
-              borderRadius: '50%',
-              backgroundColor: '#ffeb3b',
-              boxShadow: '0 0 6px rgba(255, 235, 59, 0.8)'
-            }}
-          />
-        )}
-      </Button>
-    );
-  };
-
-  if (restarting) {
-    return <SystemMonitor />;
-  }
-
-  if (!data) {
-    return (
-      <SectionContent>
-        <FormLoader onRetry={loadData} errorMessage={error?.message || ''} />
-      </SectionContent>
-    );
-  }
-
-  return (
-    <SectionContent>
-      <Box sx={{ p: 2, border: '1px solid #565656', borderRadius: 2 }}>
-        <Typography sx={{ mb: 1 }} variant="h6" color="primary">
-          {LL.THIS_VERSION()}
-        </Typography>
-
-        <Grid
-          container
-          direction="row"
-          sx={{
-            justifyContent: 'flex-start',
-            alignItems: 'baseline'
-          }}
-        >
-          <Grid size={{ xs: 4, md: 2 }}>
-            <Typography color="secondary">{LL.VERSION()}</Typography>
-          </Grid>
-          <Grid size={{ xs: 8, md: 10 }}>
-            <Typography>
-              {data.emsesp_version}
-              {data.build_flags && (
-                <Typography variant="caption">
-                  &nbsp; &#40;{data.build_flags}&#41;
-                </Typography>
-              )}
-              <IconButton
-                onClick={() => setPartitionVersionInfo(data.partition)}
-                aria-label={LL.FIRMWARE_VERSION_INFO()}
-              >
-                <InfoOutlinedIcon color="primary" sx={{ fontSize: 18 }} />
-              </IconButton>
-            </Typography>
-          </Grid>
-
-          <Grid size={{ xs: 4, md: 2 }}>
-            <Typography color="secondary">{LL.PLATFORM()}</Typography>
-          </Grid>
-          <Grid size={{ xs: 8, md: 10 }}>
-            <Typography>
-              {platform}
-              <Typography variant="caption">
-                &nbsp; &#40;
-                {data.psram ? (
-                  <CheckIcon
-                    color="success"
-                    sx={{
-                      fontSize: '1.5em',
-                      verticalAlign: 'middle'
-                    }}
-                  />
-                ) : (
-                  <CloseIcon
-                    color="error"
-                    sx={{
-                      fontSize: '1.5em',
-                      verticalAlign: 'middle'
-                    }}
-                  />
-                )}
-                PSRAM&#41;
-              </Typography>
-            </Typography>
-          </Grid>
-        </Grid>
-
-        {internetLive ? (
-          <>
-            <Typography sx={{ mt: 4, mb: 1 }} variant="h6" color="primary">
-              {LL.AVAILABLE_VERSION()}
-            </Typography>
-
-            <Grid
-              container
-              direction="row"
-              rowSpacing={1}
-              sx={{
-                justifyContent: 'flex-start',
-                alignItems: 'baseline'
-              }}
-            >
-              {otherPartitions.length > 0 && data.developer_mode && (
-                <>
-                  <Grid size={{ xs: 4, md: 2 }}>
-                    <Typography color="secondary">{LL.STORED_VERSIONS()}</Typography>
-                  </Grid>
-                  <Grid size={{ xs: 8, md: 10 }}>
-                    {otherPartitions.map((partition) => (
-                      <Typography key={partition.partition} sx={{ mb: 1 }}>
-                        {partition.version}
-                        <IconButton
-                          onClick={() =>
-                            setPartitionVersionInfo(partition.partition)
-                          }
-                          aria-label={LL.FIRMWARE_VERSION_INFO()}
-                        >
-                          <InfoOutlinedIcon color="primary" sx={{ fontSize: 18 }} />
-                        </IconButton>
-                        <Button
-                          sx={{ ml: 0 }}
-                          variant="outlined"
-                          size="small"
-                          onClick={() =>
-                            showPartitionDialog(
-                              partition.version,
-                              partition.partition,
-                              partition.install_date ?? ''
-                            )
-                          }
-                        >
-                          {LL.INSTALL()}
-                        </Button>
-                      </Typography>
-                    ))}
-                  </Grid>
-                </>
-              )}
-              <Grid size={{ xs: 4, md: 2 }}>
-                <Typography color="secondary">{LL.STABLE()}</Typography>
-              </Grid>
-              <Grid size={{ xs: 8, md: 10 }}>
-                <Typography>
-                  {latestVersion?.version}
-                  <IconButton
-                    onClick={() => setShowVersionInfo(1)}
-                    aria-label={LL.FIRMWARE_VERSION_INFO()}
-                  >
-                    <InfoOutlinedIcon color="primary" sx={{ fontSize: 18 }} />
-                  </IconButton>
-                  {showButtons(false)}
-                </Typography>
-              </Grid>
-
-              <Grid size={{ xs: 4, md: 2 }}>
-                <Typography color="secondary">{LL.DEVELOPMENT()}</Typography>
-              </Grid>
-              <Grid size={{ xs: 8, md: 10 }}>
-                <Typography>
-                  {latestDevVersion?.version}
-                  <IconButton
-                    onClick={() => setShowVersionInfo(2)}
-                    aria-label={LL.FIRMWARE_VERSION_INFO()}
-                  >
-                    <InfoOutlinedIcon color="primary" sx={{ fontSize: 18 }} />
-                  </IconButton>
-                  {showButtons(true)}
-                </Typography>
-              </Grid>
-            </Grid>
-          </>
-        ) : (
-          <Typography sx={{ mt: 2 }} color="warning">
-            {LL.INTERNET_CONNECTION_CHECK()}&hellip;
-          </Typography>
-        )}
-        {me.admin && (
-          <>
-            <VersionInfoDialog
-              showVersionInfo={showVersionInfo}
-              latestVersion={latestVersion}
-              latestDevVersion={latestDevVersion}
-              partitionVersion={partitionVersion}
-              locale={locale}
-              partition={partition}
-              currentPartition={data?.partition ?? ''}
-              size={firmwareSize}
-              LL={LL}
-              onClose={handleVersionInfoClose}
-            />
-            <InstallDialog
-              openInstallDialog={openInstallDialog}
-              fetchDevVersion={fetchDevVersion}
-              latestVersion={latestVersion}
-              latestDevVersion={latestDevVersion}
-              upgradeImportantMessageType={upgradeImportantMessageType}
-              platform={platform}
-              LL={LL}
-              onClose={closeInstallDialog}
-              onInstall={installFirmwareURL}
-            />
-            <InstallPartitionDialog
-              openInstallPartitionDialog={openInstallPartitionDialog}
-              version={partitionVersion?.version || ''}
-              partition={partition}
-              LL={LL}
-              onClose={closeInstallPartitionDialog}
-              onInstall={installPartitionFirmware}
-            />
-            <Typography sx={{ pt: 2, pb: 2 }} variant="h6" color="primary">
-              {LL.UPLOAD()}
-            </Typography>
-            <SingleUpload text={LL.UPLOAD_FIRMWARE_TEXT()} doRestart={doRestart} />
-          </>
-        )}
-      </Box>
-
-      {me.admin && (
-        <>
-          <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>
-
-          <Dialog
-            sx={dialogStyle}
-            open={confirmRestart}
-            onClose={handleRestartClose}
-          >
-            <DialogTitle>{LL.RESTART()}</DialogTitle>
-            <DialogContent dividers>{LL.RESTART_CONFIRM()}</DialogContent>
-            <DialogActions>
-              <Button
-                startIcon={<CancelIcon />}
-                variant="outlined"
-                onClick={handleRestartClose}
-                color="secondary"
-              >
-                {LL.CANCEL()}
-              </Button>
-              <Button
-                startIcon={<PowerSettingsNewIcon />}
-                variant="outlined"
-                onClick={doRestart}
-                color="success"
-              >
-                {LL.RESTART()}
-              </Button>
-            </DialogActions>
-          </Dialog>
-
-          <Box
-            sx={{
-              mt: 2,
-              display: 'flex',
-              justifyContent: 'space-between',
-              alignItems: 'center',
-              flexWrap: 'nowrap',
-              whiteSpace: 'nowrap',
-              gap: 1
-            }}
-          >
-            {!data.disable_reset && (
-              <Button
-                startIcon={<SettingsBackupRestoreIcon />}
-                variant="outlined"
-                onClick={handleFactoryResetClick}
-                color="error"
-              >
-                {LL.FACTORY_RESET()}
-              </Button>
-            )}
-            <Button
-              startIcon={<PowerSettingsNewIcon />}
-              variant="outlined"
-              onClick={handleRestartClick}
-              color="success"
-            >
-              {LL.RESTART()}
-            </Button>
-          </Box>
-        </>
-      )}
-    </SectionContent>
-  );
-};
-
-export default memo(Version);
@@ -1,5 +1,12 @@
-import { memo, useState } from 'react';
-import { Outlet, useMatch, useNavigate } from 'react-router';
+import { useCallback, useState } from 'react';
+import {
+  Navigate,
+  Route,
+  Routes,
+  matchRoutes,
+  useLocation,
+  useNavigate
+} from 'react-router';

 import { Tab } from '@mui/material';

@@ -7,35 +14,53 @@ import { RouterTabs, useLayoutTitle } from 'components';
 import { useI18nContext } from 'i18n/i18n-react';
 import type { WiFiNetwork } from 'types';

+import NetworkSettings from './NetworkSettings';
 import { WiFiConnectionContext } from './WiFiConnectionContext';
+import WiFiNetworkScanner from './WiFiNetworkScanner';

 const Network = () => {
  const { LL } = useI18nContext();
  useLayoutTitle(LL.NETWORK(0));

-  const routerTab = useMatch('/settings/network/:tab')?.pathname || false;
+  // this also works!
+  // const routerTab = useMatch(`settings/network/:path/*`)?.pathname || false;
+  const matchedRoutes = matchRoutes(
+    [
+      {
+        path: '/settings/network/settings',
+        element: <NetworkSettings />,
+        dog: 'woof'
+      },
+      { path: '/settings/network/scan', element: <WiFiNetworkScanner /> }
+    ],
+    useLocation()
+  );
+  const routerTab = matchedRoutes?.[0].route.path || false;

  const navigate = useNavigate();

  const [selectedNetwork, setSelectedNetwork] = useState<WiFiNetwork>();

-  const selectNetwork = (network: WiFiNetwork) => {
-    setSelectedNetwork(network);
-    void navigate('/settings/network/settings');
-  };
+  const selectNetwork = useCallback(
+    (network: WiFiNetwork) => {
+      setSelectedNetwork(network);
+      void navigate('/settings/network/settings');
+    },
+    [navigate]
+  );

-  const deselectNetwork = () => {
+  const deselectNetwork = useCallback(() => {
    setSelectedNetwork(undefined);
-  };
-
-  const contextValue = {
-    ...(selectedNetwork && { selectedNetwork }),
-    selectNetwork,
-    deselectNetwork
-  };
+  }, []);

  return (
-    <WiFiConnectionContext.Provider value={contextValue}>
+    <WiFiConnectionContext.Provider
+      value={{
+        selectedNetwork,
+        selectNetwork,
+        deselectNetwork
+      }}
+    >
      <RouterTabs value={routerTab}>
        <Tab
          value="/settings/network/settings"
@@ -43,9 +68,16 @@ const Network = () => {
        />
        <Tab value="/settings/network/scan" label={LL.NETWORK_SCAN()} />
      </RouterTabs>
-      <Outlet />
+      <Routes>
+        <Route path="scan" element={<WiFiNetworkScanner />} />
+        <Route path="settings" element={<NetworkSettings />} />
+        <Route
+          path="*"
+          element={<Navigate replace to="/settings/network/settings" />}
+        />
+      </Routes>
    </WiFiConnectionContext.Provider>
  );
 };

-export default memo(Network);
+export default Network;
@@ -1,4 +1,5 @@
-import { memo, useCallback, useContext, useEffect, useState } from 'react';
+import { useContext, useEffect, useState } from 'react';
+import { toast } from 'react-toastify';

 import CancelIcon from '@mui/icons-material/Cancel';
 import DeleteIcon from '@mui/icons-material/Delete';
@@ -22,10 +23,10 @@ import {

 import * as NetworkApi from 'api/network';
 import { API } from 'api/app';
-import { readSystemStatus } from 'api/system';

 import { updateState, useRequest } from 'alova/client';
 import type { APIcall } from 'app/main/types';
+import type { ValidateFieldsError } from 'async-validator';
 import {
  BlockFormControlLabel,
  BlockNavigation,
@@ -36,13 +37,11 @@ import {
  ValidatedPasswordField,
  ValidatedTextField
 } from 'components';
-import { toast } from 'components/toast';
 import { useI18nContext } from 'i18n/i18n-react';
 import type { NetworkSettingsType } from 'types';
 import { updateValueDirty, useRest } from 'utils';
-import { ValidationError, validate } from 'validators';
+import { validate } from 'validators';
 import { createNetworkSettingsValidator } from 'validators/network';
-import type { ValidateFieldsError } from 'validators/schema';

 import SystemMonitor from '../../status/SystemMonitor';
 import { WiFiConnectionContext } from './WiFiConnectionContext';
@@ -51,8 +50,6 @@ import { isNetworkOpen, networkSecurityMode } from './WiFiNetworkSelector';
 const NetworkSettings = () => {
  const { LL } = useI18nContext();

-  const { data: hardwareData } = useRequest(readSystemStatus);
-
  const { selectedNetwork, deselectNetwork } = useContext(WiFiConnectionContext);

  const [initialized, setInitialized] = useState(false);
@@ -92,11 +89,10 @@ const NetworkSettings = () => {
            static_ip_config: false,
            bandwidth20: false,
            tx_power: 0,
-            nosleep: true,
+            nosleep: false,
            enableMDNS: true,
            enableCORS: false,
-            CORSOrigin: '*',
-            eth_10mbit: current_data ? current_data.eth_10mbit : false
+            CORSOrigin: '*'
          })
        );
      }
@@ -108,42 +104,43 @@ const NetworkSettings = () => {
    origData,
    dirtyFlags,
    setDirtyFlags,
-    updateDataValue as (value: unknown) => void
+    updateDataValue
  );

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

-  const validateAndSubmit = useCallback(async () => {
-    if (!data) return;
-    try {
-      setFieldErrors(undefined);
-      await validate(createNetworkSettingsValidator(data), data);
-      await saveData();
-    } catch (error) {
-      setFieldErrors((error as ValidationError).fieldErrors);
-    }
-    deselectNetwork();
-  }, [data, saveData, 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);
-      }
-    );
-  };
+  useEffect(() => deselectNetwork, [deselectNetwork]);

  const content = () => {
-    if (!data || !hardwareData) {
-      return <FormLoader onRetry={loadData} errorMessage={errorMessage || ''} />;
+    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">
@@ -168,16 +165,16 @@ const NetworkSettings = () => {
                  selectedNetwork.bssid
                }
              />
-              <IconButton onClick={setCancel} aria-label={LL.CANCEL()}>
+              <IconButton onClick={setCancel}>
                <DeleteIcon />
              </IconButton>
            </ListItem>
          </List>
        ) : (
          <ValidatedTextField
-            fieldErrors={fieldErrors || {}}
+            fieldErrors={fieldErrors}
            name="ssid"
-            label="SSID"
+            label={'SSID (' + LL.NETWORK_BLANK_SSID() + ')'}
            fullWidth
            variant="outlined"
            value={data.ssid}
@@ -186,7 +183,7 @@ const NetworkSettings = () => {
          />
        )}
        <ValidatedTextField
-          fieldErrors={fieldErrors || {}}
+          fieldErrors={fieldErrors}
          name="bssid"
          label={'BSSID (' + LL.NETWORK_BLANK_BSSID() + ')'}
          fullWidth
@@ -197,7 +194,7 @@ const NetworkSettings = () => {
        />
        {(!selectedNetwork || !isNetworkOpen(selectedNetwork)) && (
          <ValidatedPasswordField
-            fieldErrors={fieldErrors || {}}
+            fieldErrors={fieldErrors}
            name="password"
            label={LL.PASSWORD()}
            fullWidth
@@ -250,28 +247,11 @@ const NetworkSettings = () => {
          }
          label={LL.NETWORK_LOW_BAND()}
        />
-        {hardwareData.esp_platform === 'ESP32' && (
-          <>
-            <Typography sx={{ pt: 2 }} variant="h6" color="primary">
-              Ethernet
-            </Typography>
-            <BlockFormControlLabel
-              control={
-                <Checkbox
-                  name="eth_10mbit"
-                  checked={data.eth_10mbit}
-                  onChange={updateFormValue}
-                />
-              }
-              label="Force 10Mbit half-duplex"
-            />
-          </>
-        )}
        <Typography sx={{ pt: 2 }} variant="h6" color="primary">
          {LL.GENERAL_OPTIONS()}
        </Typography>
        <ValidatedTextField
-          fieldErrors={fieldErrors || {}}
+          fieldErrors={fieldErrors}
          name="hostname"
          label={LL.HOSTNAME()}
          fullWidth
@@ -324,7 +304,7 @@ const NetworkSettings = () => {
        {data.static_ip_config && (
          <>
            <ValidatedTextField
-              fieldErrors={fieldErrors || {}}
+              fieldErrors={fieldErrors}
              name="local_ip"
              label={LL.AP_LOCAL_IP()}
              fullWidth
@@ -334,7 +314,7 @@ const NetworkSettings = () => {
              margin="normal"
            />
            <ValidatedTextField
-              fieldErrors={fieldErrors || {}}
+              fieldErrors={fieldErrors}
              name="gateway_ip"
              label={LL.NETWORK_GATEWAY()}
              fullWidth
@@ -344,7 +324,7 @@ const NetworkSettings = () => {
              margin="normal"
            />
            <ValidatedTextField
-              fieldErrors={fieldErrors || {}}
+              fieldErrors={fieldErrors}
              name="subnet_mask"
              label={LL.NETWORK_SUBNET()}
              fullWidth
@@ -354,7 +334,7 @@ const NetworkSettings = () => {
              margin="normal"
            />
            <ValidatedTextField
-              fieldErrors={fieldErrors || {}}
+              fieldErrors={fieldErrors}
              name="dns_ip_1"
              label="DNS #1"
              fullWidth
@@ -364,7 +344,7 @@ const NetworkSettings = () => {
              margin="normal"
            />
            <ValidatedTextField
-              fieldErrors={fieldErrors || {}}
+              fieldErrors={fieldErrors}
              name="dns_ip_2"
              label="DNS #2"
              fullWidth
@@ -376,9 +356,8 @@ const NetworkSettings = () => {
          </>
        )}
        {restartNeeded && (
-          <MessageBox level="warning" message={LL.RESTART_TEXT(0)}>
+          <MessageBox my={2} level="warning" message={LL.RESTART_TEXT(0)}>
            <Button
-              sx={{ ml: 2 }}
              startIcon={<PowerSettingsNewIcon />}
              variant="contained"
              color="error"
@@ -418,14 +397,12 @@ const NetworkSettings = () => {
    );
  };

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

-export default memo(NetworkSettings);
+export default NetworkSettings;
@@ -1,4 +1,4 @@
-import { memo, useRef, useState } from 'react';
+import { useRef, useState } from 'react';

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

  const renderNetworkScanner = () => {
    if (!networkList) {
-      return <FormLoader errorMessage={errorMessage || ''} />;
+      return (
+        <FormLoader message={LL.SCANNING() + '...'} errorMessage={errorMessage} />
+      );
    }
    return <WiFiNetworkSelector networkList={networkList} />;
  };
@@ -73,4 +75,4 @@ const WiFiNetworkScanner = () => {
  );
 };

-export default memo(WiFiNetworkScanner);
+export default WiFiNetworkScanner;
@@ -1,4 +1,4 @@
-import { memo, useContext } from 'react';
+import { useContext } from 'react';

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

  if (networkList.networks.length === 0) {
-    return <MessageBox message={LL.NETWORK_NO_WIFI()} level="info" />;
+    return <MessageBox mt={2} mb={1} message={LL.NETWORK_NO_WIFI()} level="info" />;
  }

  return <List>{networkList.networks.map(renderNetwork)}</List>;
 };

-export default memo(WiFiNetworkSelector);
+export default WiFiNetworkSelector;
@@ -1,4 +1,4 @@
-import { memo, useEffect } from 'react';
+import { 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, generateToken]);
+  }, [open]);

  return (
    <Dialog
@@ -54,27 +54,19 @@ const GenerateToken = ({ username, onClose }: GenerateTokenProps) => {
      <DialogContent dividers>
        {token ? (
          <>
-            <MessageBox
-              message={LL.ACCESS_TOKEN_TEXT()}
-              level="info"
-              sx={{ mt: 2, mb: 2 }}
-            />
-            <Box sx={{ mt: 2, mb: 2 }}>
+            <MessageBox message={LL.ACCESS_TOKEN_TEXT()} level="info" my={2} />
+            <Box mt={2} mb={2}>
              <TextField
                label="Token"
                multiline
                value={token.token}
                fullWidth
-                slotProps={{
-                  input: {
-                    readOnly: true
-                  }
-                }}
+                contentEditable={false}
              />
            </Box>
          </>
        ) : (
-          <Box sx={{ m: 4, textAlign: 'center' }}>
+          <Box m={4} textAlign="center">
            <LinearProgress />
            <Typography variant="h6">{LL.GENERATING_TOKEN()}&hellip;</Typography>
          </Box>
@@ -94,4 +86,4 @@ const GenerateToken = ({ username, onClose }: GenerateTokenProps) => {
  );
 };

-export default memo(GenerateToken);
+export default GenerateToken;
@@ -1,4 +1,4 @@
-import { memo, useCallback, useContext, useState } from 'react';
+import { useContext, useState } from 'react';
 import { useBlocker } from 'react-router';

 import CancelIcon from '@mui/icons-material/Cancel';
@@ -95,71 +95,70 @@ const ManageUsers = () => {
    `
  });

-  const noAdminConfigured = () => !data?.users.find((u) => u.admin);
-
-  const removeUser = (toRemove: UserType) => {
-    if (!data) return;
-    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 && data) {
-      const users = [
-        ...data.users.filter(
-          (u: { username: string }) => u.username !== user.username
-        ),
-        user
-      ];
-      updateDataValue({ ...data, users });
-      setUser(undefined);
-      setChanged(changed + 1);
-    }
-  };
-
-  const closeGenerateToken = useCallback(() => {
-    setGeneratingToken(undefined);
-  }, []);
-
-  const generateTokenForUser = (username: string) => {
-    setGeneratingToken(username);
-  };
-
-  const onSubmit = async () => {
-    await saveData();
-    await authenticatedContext.refresh();
-    setChanged(0);
-  };
-
-  const onCancelSubmit = async () => {
-    await loadData();
-    setChanged(0);
-  };
-
  const content = () => {
    if (!data) {
-      return <FormLoader onRetry={loadData} errorMessage={errorMessage || ''} />;
+      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,6 +166,7 @@ const ManageUsers = () => {
      admin: boolean;
    }

+    // add id to the type, needed for the table
    const user_table = data.users.map((u) => ({
      ...u,
      id: u.username
@@ -196,24 +196,15 @@ const ManageUsers = () => {
                    <Cell stiff>
                      <IconButton
                        size="small"
-                        aria-label={LL.GENERATING_TOKEN()}
                        disabled={!authenticatedContext.me.admin}
-                        onClick={() => generateTokenForUser(u.username)}
+                        onClick={() => generateToken(u.username)}
                      >
                        <VpnKeyIcon />
                      </IconButton>
-                      <IconButton
-                        size="small"
-                        onClick={() => removeUser(u)}
-                        aria-label={LL.REMOVE()}
-                      >
+                      <IconButton size="small" onClick={() => removeUser(u)}>
                        <DeleteIcon />
                      </IconButton>
-                      <IconButton
-                        size="small"
-                        onClick={() => editUser(u)}
-                        aria-label={LL.EDIT()}
-                      >
+                      <IconButton size="small" onClick={() => editUser(u)}>
                        <EditIcon />
                      </IconButton>
                    </Cell>
@@ -225,16 +216,12 @@ const ManageUsers = () => {
        </Table>

        {noAdminConfigured() && (
-          <MessageBox
-            level="warning"
-            message={LL.USER_WARNING()}
-            sx={{ mt: 2, mb: 2 }}
-          />
+          <MessageBox level="warning" message={LL.USER_WARNING()} my={2} />
        )}

-        <Box sx={{ display: 'flex', flexWrap: 'wrap' }}>
+        <Box display="flex" flexWrap="wrap">
          {changed !== 0 && (
-            <Box sx={{ flexGrow: 1, '& button': { mt: 2 } }}>
+            <Box flexGrow={1} sx={{ '& button': { mt: 2 } }}>
              <ButtonRow>
                <Button
                  startIcon={<CancelIcon />}
@@ -259,7 +246,7 @@ const ManageUsers = () => {
              </ButtonRow>
            </Box>
          )}
-          <Box sx={{ flexWrap: 'nowrap', whiteSpace: 'nowrap' }}>
+          <Box flexWrap="nowrap" whiteSpace="nowrap">
            <ButtonRow>
              <Button
                startIcon={<PersonAddIcon />}
@@ -273,20 +260,15 @@ const ManageUsers = () => {
          </Box>
        </Box>

-        <GenerateToken
-          username={generatingToken || ''}
-          onClose={closeGenerateToken}
+        <GenerateToken username={generatingToken} onClose={closeGenerateToken} />
+        <User
+          user={user}
+          setUser={setUser}
+          creating={creating}
+          onDoneEditing={doneEditingUser}
+          onCancelEditing={cancelEditingUser}
+          validator={createUserValidator(data.users, creating)}
        />
-        {user && (
-          <User
-            user={user}
-            setUser={setUser}
-            creating={creating}
-            onDoneEditing={doneEditingUser}
-            onCancelEditing={cancelEditingUser}
-            validator={createUserValidator(data.users, creating)}
-          />
-        )}
      </>
    );
  };
@@ -299,4 +281,4 @@ const ManageUsers = () => {
  );
 };

-export default memo(ManageUsers);
+export default ManageUsers;
@@ -1,16 +1,25 @@
-import { memo } from 'react';
-import { Outlet, useMatch } from 'react-router';
+import { Navigate, Route, Routes, matchRoutes, useLocation } from 'react-router';

 import { Tab } from '@mui/material';

 import { RouterTabs, useLayoutTitle } from 'components';
 import { useI18nContext } from 'i18n/i18n-react';

+import ManageUsers from './ManageUsers';
+import SecuritySettings from './SecuritySettings';
+
 const Security = () => {
  const { LL } = useI18nContext();
  useLayoutTitle(LL.SECURITY(0));

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

  return (
    <>
@@ -21,9 +30,16 @@ const Security = () => {
        />
        <Tab value="/settings/security/users" label={LL.MANAGE_USERS()} />
      </RouterTabs>
-      <Outlet />
+      <Routes>
+        <Route path="users" element={<ManageUsers />} />
+        <Route path="settings" element={<SecuritySettings />} />
+        <Route
+          path="*"
+          element={<Navigate replace to="/settings/security/settings" />}
+        />
+      </Routes>
    </>
  );
 };

-export default memo(Security);
+export default Security;
@@ -1,4 +1,4 @@
-import { memo, useCallback, useContext, useState } from 'react';
+import { useContext, useState } from 'react';

 import CancelIcon from '@mui/icons-material/Cancel';
 import WarningIcon from '@mui/icons-material/Warning';
@@ -6,6 +6,7 @@ import { Button } from '@mui/material';

 import * as SecurityApi from 'api/security';

+import type { ValidateFieldsError } from 'async-validator';
 import {
  BlockNavigation,
  ButtonRow,
@@ -18,8 +19,7 @@ import { AuthenticatedContext } from 'contexts/authentication';
 import { useI18nContext } from 'i18n/i18n-react';
 import type { SecuritySettingsType } from 'types';
 import { updateValueDirty, useRest } from 'utils';
-import { SECURITY_SETTINGS_VALIDATOR, ValidationError, validate } from 'validators';
-import type { ValidateFieldsError } from 'validators/schema';
+import { SECURITY_SETTINGS_VALIDATOR, validate } from 'validators';

 const SecuritySettings = () => {
  const { LL } = useI18nContext();
@@ -44,33 +44,32 @@ const SecuritySettings = () => {
  const authenticatedContext = useContext(AuthenticatedContext);

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

-  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 ValidationError).fieldErrors);
-    }
-  }, [data, saveData, authenticatedContext]);
-
  const content = () => {
    if (!data) {
-      return <FormLoader onRetry={loadData} errorMessage={errorMessage || ''} />;
+      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
-          fieldErrors={fieldErrors || {}}
+          fieldErrors={fieldErrors}
          name="jwt_secret"
          label={LL.SU_PASSWORD()}
          fullWidth
@@ -79,7 +78,7 @@ const SecuritySettings = () => {
          onChange={updateFormValue}
          margin="normal"
        />
-        <MessageBox level="info" message={LL.SU_TEXT()} sx={{ mt: 1 }} />
+        <MessageBox level="info" message={LL.SU_TEXT()} mt={1} />
        {dirtyFlags && dirtyFlags.length !== 0 && (
          <ButtonRow>
            <Button
@@ -116,4 +115,4 @@ const SecuritySettings = () => {
  );
 };

-export default memo(SecuritySettings);
+export default SecuritySettings;
@@ -1,4 +1,4 @@
-import { memo, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import type { FC } from 'react';

 import CancelIcon from '@mui/icons-material/Cancel';
@@ -14,6 +14,8 @@ import {
 } from '@mui/material';

 import { dialogStyle } from 'CustomTheme';
+import type Schema from 'async-validator';
+import type { ValidateFieldsError } from 'async-validator';
 import {
  BlockFormControlLabel,
  ValidatedPasswordField,
@@ -22,9 +24,7 @@ import {
 import { useI18nContext } from 'i18n/i18n-react';
 import type { UserType } from 'types';
 import { updateValue } from 'utils';
-import { ValidationError, validate } from 'validators';
-import type Schema from 'validators/schema';
-import type { ValidateFieldsError } from 'validators/schema';
+import { validate } from 'validators';

 interface UserFormProps {
  creating: boolean;
@@ -45,14 +45,7 @@ const User: FC<UserFormProps> = ({
 }) => {
  const { LL } = useI18nContext();

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

@@ -69,7 +62,7 @@ const User: FC<UserFormProps> = ({
        await validate(validator, user);
        onDoneEditing();
      } catch (error) {
-        setFieldErrors((error as ValidationError).fieldErrors);
+        setFieldErrors(error as ValidateFieldsError);
      }
    }
  };
@@ -89,7 +82,7 @@ const User: FC<UserFormProps> = ({
          </DialogTitle>
          <DialogContent dividers>
            <ValidatedTextField
-              fieldErrors={fieldErrors || {}}
+              fieldErrors={fieldErrors}
              name="username"
              label={LL.USERNAME(1)}
              fullWidth
@@ -100,7 +93,7 @@ const User: FC<UserFormProps> = ({
              margin="normal"
            />
            <ValidatedPasswordField
-              fieldErrors={fieldErrors || {}}
+              fieldErrors={fieldErrors}
              name="password"
              label={LL.PASSWORD()}
              fullWidth
@@ -144,4 +137,4 @@ const User: FC<UserFormProps> = ({
  );
 };

-export default memo(User);
+export default User;
@@ -34,43 +34,37 @@ 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();
  });

-  if (!data) {
-    return (
-      <SectionContent>
-        <FormLoader onRetry={loadData} errorMessage={error?.message || ''} />
-      </SectionContent>
-    );
-  }
+  const { LL } = useI18nContext();
+  useLayoutTitle(LL.ACCESS_POINT(0));

-  return (
-    <SectionContent>
+  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} />;
+    }
+
+    return (
      <List>
        <ListItem>
          <ListItemAvatar>
@@ -78,26 +72,19 @@ const APStatus = () => {
              <SettingsInputAntennaIcon />
            </Avatar>
          </ListItemAvatar>
-          <ListItemText
-            primary={LL.STATUS_OF('')}
-            secondary={getApStatusText(data.status, LL)}
-          />
+          <ListItemText primary={LL.STATUS_OF('')} secondary={apStatus(data)} />
        </ListItem>
-
        <Divider variant="inset" component="li" />
-
        <ListItem>
          <ListItemAvatar>
-            <Avatar sx={{ bgcolor: 'primary.main' }}>IP</Avatar>
+            <Avatar>IP</Avatar>
          </ListItemAvatar>
          <ListItemText primary={LL.ADDRESS_OF('IP')} secondary={data.ip_address} />
        </ListItem>
-
        <Divider variant="inset" component="li" />
-
        <ListItem>
          <ListItemAvatar>
-            <Avatar sx={{ bgcolor: 'primary.main' }}>
+            <Avatar>
              <DeviceHubIcon />
            </Avatar>
          </ListItemAvatar>
@@ -106,22 +93,21 @@ const APStatus = () => {
            secondary={data.mac_address}
          />
        </ListItem>
-
        <Divider variant="inset" component="li" />
-
        <ListItem>
          <ListItemAvatar>
-            <Avatar sx={{ bgcolor: 'primary.main' }}>
+            <Avatar>
              <ComputerIcon />
            </Avatar>
          </ListItemAvatar>
          <ListItemText primary={LL.AP_CLIENTS()} secondary={data.station_num} />
        </ListItem>
-
        <Divider variant="inset" component="li" />
      </List>
-    </SectionContent>
-  );
+    );
+  };
+
+  return <SectionContent>{content()}</SectionContent>;
 };

 export default APStatus;
@@ -17,12 +17,6 @@ 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);

@@ -73,8 +67,7 @@ const SystemActivity = () => {
  });

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

@@ -83,25 +76,21 @@ const SystemActivity = () => {
      return;
    }
    if (stat.q === 100) {
-      return <div style={{ color: QUALITY_COLORS.PERFECT }}>{stat.q}%</div>;
+      return <div style={{ color: '#00FF7F' }}>{stat.q}%</div>;
    }
    if (stat.q >= 95) {
-      return <div style={{ color: QUALITY_COLORS.WARNING }}>{stat.q}%</div>;
+      return <div style={{ color: 'orange' }}>{stat.q}%</div>;
    } else {
-      return <div style={{ color: QUALITY_COLORS.POOR }}>{stat.q}%</div>;
+      return <div style={{ color: 'red' }}>{stat.q}%</div>;
    }
  };

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

-  return (
-    <SectionContent>
+    return (
      <Table
        data={{ nodes: data.stats }}
        theme={stats_theme}
@@ -130,8 +119,10 @@ const SystemActivity = () => {
          </>
        )}
      </Table>
-    </SectionContent>
-  );
+    );
+  };
+
+  return <SectionContent>{content()}</SectionContent>;
 };

 export default SystemActivity;
@@ -1,5 +1,3 @@
-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';
@@ -26,61 +24,10 @@ 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();

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

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

-  return (
-    <SectionContent>
+    return (
      <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`}
+        <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>
+          </>
        )}
-        <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`}
-        />
+        <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>
-  );
+    );
+  };
+
+  return <SectionContent>{content()}</SectionContent>;
 };

 export default HardwareStatus;
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
proddy	eaa277fef0	v3.7.2	2025-03-22 10:32:03 +01:00
proddy	e418b7d8e7	fix routing in tabs - #2264	2024-11-30 21:31:42 +01:00
proddy	a4e3be6a69	3.7.1 changelog	2024-11-29 10:30:14 +01:00
proddy	a1bc5bb055	3.7.1	2024-11-29 10:30:05 +01:00
proddy	f444ca31e0	Merge remote-tracking branch 'origin/dev'	2024-10-27 11:41:47 +01:00
proddy	1b70b55989	update demo url	2024-08-10 14:58:48 +02:00
proddy	1487f30c43	Merge remote-tracking branch 'origin/dev' for 3.6.5	2024-03-23 17:56:05 +01:00
Proddy	e00eb8e64f	3.6.4	2023-11-26 20:11:36 +01:00
Proddy	f41bb3671c	3.6.4	2023-11-24 07:36:36 +01:00
Proddy	22c75e6df3	3.6.4	2023-11-24 07:36:29 +01:00
proddy	5ab10b7aa6	fixes #1450	2023-11-22 09:48:09 +01:00
Proddy	ee5fd4d0eb	3.6.3	2023-11-21 14:40:47 +01:00
Proddy	46f35bc67c	another patch on 3.6.3	2023-11-21 14:40:32 +01:00
Proddy	ec85a7ec24	3.6.3 (refershed)	2023-11-19 21:24:01 +01:00
Proddy	02f2389587	add workflow_dispatch:	2023-11-18 18:51:12 +01:00
Proddy	7f140021aa	quick fix - https://github.com/emsesp/EMS-ESP32/pull/1438	2023-11-18 18:47:28 +01:00
Proddy	6796962c1e	3.6.3	2023-11-18 13:35:20 +01:00
Proddy	df6de21cf4	Merge remote-tracking branch 'origin/dev'	2023-11-18 13:35:04 +01:00
Proddy	df9f75a5c9	updated yarn for 3.6.2	2023-10-01 17:42:54 +02:00
Proddy	7bd8710eb6	3.6.2	2023-10-01 17:40:09 +02:00
Proddy	32f2c6d341	Merge remote-tracking branch 'origin/dev'	2023-10-01 17:40:02 +02:00
Proddy	86919c1684	Merge branch 'origin/dev'	2023-09-09 14:12:07 +02:00
Proddy	86e29515e7	build s3	2023-08-15 18:44:24 +02:00
Proddy	46eb4185d7	update with 3.6.0	2023-08-13 14:37:13 +02:00
Proddy	8da6761a48	Merge branch 'dev'	2023-08-13 14:32:41 +02:00
Proddy	9233f0dfcc	v3.5.1 - merge with patch	2023-03-11 16:06:05 +01:00
Proddy	292f743b14	Update bug_report.md	2023-02-19 11:18:08 +01:00
Proddy	dd6dfffd57	Delete questions---troubleshooting.md	2023-02-19 10:49:52 +01:00
Proddy	ec705a5307	Delete feature_request.md	2023-02-19 10:49:45 +01:00
Proddy	f45f071710	Create config.yml	2023-02-19 10:49:32 +01:00
Proddy	f3858546de	Merge branch 'origin/dev'	2023-02-06 21:58:27 +01:00
Proddy	d0ac0b7804	update with version on dev	2022-10-30 16:58:37 +01:00
Proddy	d8284ec09f	Merge pull request #705 from MichaelDvP/main v3.4.4 Fix for new installations with filesystem not initializing	2022-10-29 10:46:41 +02:00
MichaelDvP	6e982acde8	v3.4.4 Fix for new installations with filesystem not initializing	2022-10-28 10:50:51 +02:00
Proddy	8c94ce99b2	quick fix for filesystem initialization	2022-10-08 09:23:00 +02:00
proddy	fc057d18c9	Merge remote-tracking branch 'origin/dev'	2022-09-18 14:33:23 +02:00
Proddy	18e9b99413	Merge remote-tracking branch 'origin/dev' into main	2022-05-29 16:16:38 +02:00
Proddy	a47e0e8266	update for 3.4.0	2022-05-23 21:20:45 +02:00
Proddy	f412ddc716	Merge remote-tracking branch 'origin/dev' into main	2022-05-23 21:20:36 +02:00
proddy	29110e96e5	Merge remote-tracking branch 'origin/dev'	2022-01-20 10:51:40 +01:00
proddy	b65866217a	3.4.0	2021-11-28 23:03:28 +01:00
proddy	611e3b1243	Merge remote-tracking branch 'origin/dev'	2021-11-28 23:03:15 +01:00
proddy	2ca0a0c634	v3.2.1 merged from dev	2021-08-08 14:46:14 +02:00
proddy	7eb1f061b7	Merge remote-tracking branch 'origin/dev' for 3.2.0 release	2021-08-06 12:06:08 +02:00
proddy	50459a23fe	force v16 of nodejs	2021-06-26 11:13:07 +02:00
proddy	5bf53c3389	3.1.1	2021-06-26 11:03:03 +02:00
proddy	4b7aa95be3	Merge remote-tracking branch 'origin/dev'	2021-06-26 11:02:55 +02:00
Proddy	70943f5758	Update pre_release.yml	2021-05-16 15:52:09 +02:00
Proddy	3bc280b817	Delete check_code.yml	2021-05-16 15:51:56 +02:00
Proddy	62b15a5319	Update pre_release.yml	2021-05-16 15:35:06 +02:00
Proddy	8dd18802d6	Update tagged_release.yml	2021-05-16 15:34:45 +02:00
proddy	57a516a83a	updated README and images	2021-05-09 15:13:16 +02:00
proddy	a57fdaa4b3	Merge remote-tracking branch 'origin/dev' into main	2021-05-04 12:21:51 +02:00
proddy	4841e42286	Merge remote-tracking branch 'origin/dev' into main	2021-03-30 16:35:18 +02:00
proddy	8c2d2b06ed	cleaned up old changelog	2021-03-18 20:59:09 +01:00
proddy	38c8b1b7f0	3.0.0	2021-03-18 20:58:21 +01:00
proddy	6fb5933a02	Merge remote-tracking branch 'origin/dev' into main	2021-03-18 20:58:12 +01:00
proddy	c0944433be	remove workspace.code-workspace	2021-03-16 17:41:42 +01:00
Proddy	478e6362c9	Merge pull request #27 from FauthD:main Add global names to Dallas sensors to avoid ugly <unknown> and other …	2021-03-16 17:39:00 +01:00
fauthd	4d6354db78	Add stuff to gitignore, add vscode workspace	2021-03-16 16:47:09 +01:00
fauthd	beab0f0c77	Add global names to Dallas sensors to avoid ugly <unknown> and other issues in HA	2021-03-16 16:00:23 +01:00
Proddy	c17749bd22	Update README.md	2021-03-14 23:43:33 +01:00
proddy	2bad769c5c	build: include assets	2021-03-14 21:20:51 +01:00
proddy	8ad89ca64b	move repo	2021-03-14 21:05:15 +01:00
proddy	9244d8daec	Semantic Commit Messages	2021-03-14 18:10:57 +01:00
proddy	02d01334b2	update new build	2021-03-14 17:37:18 +01:00