Merge origin/develop into feat/main-dashboard

Brings the branch up to date with 91 commits on develop, including the
merged theme pass. 20 conflicts, all resolved by keeping both sides.

Locales (19 files): develop added `components.sidebar.menu.groups.*` for
the new grouped sidebar; this branch added `components.sidebar.menu.
dashboard`. Both are wanted, so both are kept. Every file re-validated as
JSON, and all 19 confirmed to carry menu.dashboard, menu.groups and
pages.dashboard.

Menu.tsx: develop restructured the sidebar from a flat list into
`{group, items[]}` groups. That structure is preserved as-is - the
renderer calls `group.items.map` unconditionally, so a flat entry would
throw. Dashboard is now the first item in the Monitoring group, which
suits a page that summarises every monitor type at once. All four groups
(Monitoring, Alerting, Reporting, Configuration) intact.

Gates after merge: tsc clean, build passes, format-check clean, lint
12 errors - the same pre-existing 12 as develop, none in dashboard files.

Left for a follow-up: develop renamed CONTROL_HEIGHT to
INPUT_BASE_HEIGHT, which is now importable here. DashboardCard's
HEADER_MIN_HEIGHT = 44 could derive from it, but the header pads with
theme.spacing(LAYOUT.SM) and the theme's spacing base is 2, so the
padding is 12px a side, not 6 - the derivation would be 56 and would
make every card header taller. That is a visual change, not a merge
resolution, so 44 stands.

.github/CODEOWNERS

@@ -1 +1 @@
-*     @ajhollid @mohicody @Br0wnHammer @Owaiseimdad @karenvicent @shanikauwu1
+

.github/workflows/check-lockfile.yml

@@ -0,0 +1,22 @@
+name: Lockfile Check (Client & Server)
+on:
+  pull_request:
+  workflow_dispatch:
+
+jobs:
+  check-lockfiles:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      # Validate with the same node image the production build uses, so a lock
+      # that passes here cannot fail the image build's npm ci.
+      - name: Resolve node image from Dockerfile
+        id: node-image
+        run: echo "image=$(grep -m1 -o 'node:[^ ]*' docker/Dockerfile)" >> "$GITHUB_OUTPUT"
+
+      - name: Check server lockfile
+        run: docker run --rm -v "$PWD/server":/w -w /w ${{ steps.node-image.outputs.image }} npm ci --dry-run
+
+      - name: Check client lockfile
+        run: docker run --rm -v "$PWD/client":/w -w /w ${{ steps.node-image.outputs.image }} npm ci --dry-run

.github/workflows/poeditor-sync.yml

@@ -1,138 +0,0 @@
-name: POEditor Translation Synchronization (disabled)
-
-# This workflow is intentionally disabled — kept for reference only.
-# The full definition is preserved commented-out below. To re-enable,
-# delete the stub job and uncomment the section starting at `on:`.
-
-on:
-    workflow_dispatch:
-
-jobs:
-    disabled:
-        if: false
-        runs-on: ubuntu-latest
-        steps:
-            - run: echo "This workflow is disabled. See comments below for the original definition."
-
-# ---------------------------------------------------------------------------
-# Original (disabled) workflow below. Do not uncomment if you don't know what you're doing.
-# ---------------------------------------------------------------------------
-
-# on:
-#   # For manual triggering
-#   workflow_dispatch:
-#     inputs:
-#       languages:
-#         description: "Languages to synchronize (comma separated, e.g.: tr,en,es)"
-#         required: false
-#         default: "ar,zh-tw,cs,en,fi,fr,de,pt-br,ru,es,tr,ja,zh-cn,th"
-#       format:
-#         description: "Export format (key_value_json or json)"
-#         required: false
-#         default: "key_value_json"
-
-# permissions:
-#   contents: write
-#   pull-requests: write
-
-# jobs:
-#   sync-translations:
-#     runs-on: ubuntu-latest
-#     permissions:
-#       contents: write
-#       issues: write
-#       pull-requests: write
-
-#     steps:
-#       - name: Checkout code
-#         uses: actions/checkout@v3
-#         with:
-#           token: ${{ secrets.GITHUB_TOKEN }}
-#           fetch-depth: 0
-
-#       - name: Setup Node.js
-#         uses: actions/setup-node@v3
-#         with:
-#           node-version: "22"
-
-#       - name: Create package.json for scripts
-#         run: |
-#           mkdir -p .github/scripts
-#           cat > .github/scripts/package.json << EOF
-#           {
-#             "name": "poeditor-scripts",
-#             "version": "1.0.0",
-#             "private": true,
-#             "type": "module",
-#             "dependencies": {
-#               "axios": "^1.6.0",
-#               "fs-extra": "^11.1.1"
-#             }
-#           }
-#           EOF
-
-#       - name: Install dependencies
-#         run: |
-#           cd .github/scripts
-#           npm install
-
-#       - name: Download translations from POEditor
-#         env:
-#           POEDITOR_API: ${{ secrets.POEDITOR_API }}
-#           POEDITOR_PROJECT_ID: ${{ secrets.POEDITOR_PROJECT_ID }}
-#           LANGUAGES: ${{ github.event.inputs.languages || 'tr,en' }}
-#           EXPORT_FORMAT: ${{ github.event.inputs.format || 'key_value_json' }}
-#         run: |
-#           mkdir -p temp
-#           node .github/scripts/download-translations.js
-
-#       - name: Verify translation files
-#         run: |
-#           echo "Verifying translation files..."
-#           for file in temp/*.json; do
-#             echo "Checking $file"
-#             if [ ! -s "$file" ]; then
-#               echo "Error: $file is empty or does not exist"
-#               exit 1
-#             fi
-#             # Validate JSON format
-#             cat "$file" | jq . > /dev/null || { echo "Error: $file is not valid JSON"; exit 1; }
-#           done
-#           echo "All translation files are valid"
-
-#       - name: Copy translations to project
-#         run: |
-#           mkdir -p client/src/locales
-#           cp -r temp/* client/src/locales/
-#           echo "Translation files copied to client/src/locales/"
-
-#       - name: Get current date
-#         id: date
-#         run: echo "date=$(date +'%Y-%m-%d %H:%M:%S')" >> $GITHUB_OUTPUT
-
-#       - name: Format client code
-#         run: |
-#           cd client
-#           npm ci
-#           npm run format
-
-#       - name: Create Pull Request
-#         uses: peter-evans/create-pull-request@v7
-#         with:
-#           token: ${{ secrets.GITHUB_TOKEN }}
-#           commit-message: "feat: translations updated from POEditor"
-#           title: "🌐 Updated Translations from POEditor"
-#           body: |
-#             This PR contains the latest translations from POEditor.
-
-#             📅 Update Date: ${{ steps.date.outputs.date }}
-#             🔄 Updated Languages: ${{ github.event.inputs.languages || 'tr,en' }}
-
-#             ⚠️ Please review the translations and approve the PR if everything looks correct.
-#           branch: translation-update-${{ github.run_number }}
-#           delete-branch: true
-#           base: develop
-#           add-paths: |
-#             client/src/locales/*.json
-#           committer: GitHub Action <github-actions[bot]@users.noreply.github.com>
-#           author: GitHub Action <github-actions[bot]@users.noreply.github.com>

.github/workflows/upload-poeditor.yml

@@ -1,113 +0,0 @@
-name: Upload Translations to POEditor on PR Merge
-
-on:
-  pull_request:
-    types: [closed]
-    branches:
-      - develop
-    paths:
-      - "client/src/locales/**"
-
-jobs:
-  upload-translations:
-    # Only run if the PR was merged (not just closed) or manually triggered
-    if: github.event.pull_request.merged == true
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v3
-        with:
-          fetch-depth: 0 # Fetch all history to get changed files
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: "22"
-
-      - name: Create package.json for scripts
-        run: |
-          mkdir -p .github/scripts
-          cat > .github/scripts/package.json << EOF
-          {
-            "name": "poeditor-scripts",
-            "version": "1.0.0",
-            "private": true,
-            "type": "module",
-            "dependencies": {
-              "axios": "^1.6.0",
-              "fs-extra": "^11.1.1",
-              "form-data": "^4.0.0"
-            }
-          }
-          EOF
-
-      - name: Install dependencies
-        run: |
-          cd .github/scripts
-          npm install
-
-      - name: Get changed locale files
-        id: changed-files
-        if: github.event_name == 'pull_request'
-        run: |
-          # Get base and head commits
-          BASE_SHA=${{ github.event.pull_request.base.sha }}
-          HEAD_SHA=${{ github.event.pull_request.head.sha }}
-
-          echo "Base SHA: $BASE_SHA"
-          echo "Head SHA: $HEAD_SHA"
-
-          # Get list of changed files in client/src/locales directory
-          CHANGED_FILES=$(git diff --name-only $BASE_SHA..$HEAD_SHA -- 'client/src/locales/*.json' || git ls-files 'client/src/locales/*.json')
-
-          if [ -z "$CHANGED_FILES" ]; then
-            echo "No changes detected in locale files"
-            echo "CHANGED_FILES=" >> $GITHUB_ENV
-          else
-            echo "Changed files:"
-            echo "$CHANGED_FILES"
-            echo "CHANGED_FILES<<EOF" >> $GITHUB_ENV
-            echo "$CHANGED_FILES" >> $GITHUB_ENV
-            echo "EOF" >> $GITHUB_ENV
-          fi
-
-      - name: Upload changed translations to POEditor
-        if: env.CHANGED_FILES != ''
-        env:
-          POEDITOR_API: ${{ secrets.POEDITOR_API }}
-          POEDITOR_PROJECT_ID: ${{ secrets.POEDITOR_PROJECT_ID }}
-        run: |
-          # Process each changed file
-          for FILE in $CHANGED_FILES; do
-            if [[ -f "$FILE" ]]; then
-              # Extract language code from filename (e.g., client/src/locales/en.json -> en)
-              FILENAME=$(basename "$FILE")
-              
-              # Special case: map gb.json to en language code
-              if [ "$FILENAME" == "gb.json" ]; then
-                LANG="en"
-                echo "Found gb.json, mapping to language code 'en'"
-              else
-                LANG=$(basename "$FILE" .json)
-              fi
-              
-              echo "Processing $FILE for language $LANG"
-              
-              # Upload to POEditor
-              LANGUAGE=$LANG FILE_PATH=$FILE node .github/scripts/upload-translations.js
-            fi
-          done
-
-      - name: Notify on success
-        if: success() && env.CHANGED_FILES != ''
-        run: |
-          echo "Successfully uploaded translation files to POEditor."
-          if [ "${{ github.event_name }}" == "workflow_dispatch" ]; then
-            echo "Manual trigger comment: ${{ github.event.inputs.comment }}"
-          fi
-
-      - name: Notify on no changes
-        if: env.CHANGED_FILES == ''
-        run: |
-          echo "No translation files were found to upload."

CLAUDE.md

@@ -109,7 +109,7 @@ client/src/
 - **Data Fetching**: SWR + Axios
 - **Database**: MongoDB with Mongoose ODM
 - **Queue/Cache**: Redis + BullMQ + Pulse (cron scheduling)
-- **i18n**: i18next + react-i18next (translations via PoEditor)
+- **i18n**: i18next + react-i18next (non-English locales are machine translated, not managed through a translation service)
 
 ---
 

README.md

@@ -32,12 +32,12 @@
 
 <h1 align="center"><a href="https://bluewavelabs.ca" target="_blank">Checkmate</a></h1>
 
-<p align="center"><strong>An open source uptime and infrastructure monitoring application</strong></p>
+<p align="center"><strong>An open source uptime and infrastructure monitoring application</strong>
 
 [![Run on PikaPods](https://www.pikapods.com/static/run-button.svg)](https://www.pikapods.com/pods?run=checkmate)
 
-<img width="1703" height="1041" alt="image" src="https://github.com/user-attachments/assets/0f4dcf38-9b42-4b84-8633-ff34778df1a8" />
+<img width="1461" height="853" alt="image" src="https://github.com/user-attachments/assets/d5ee1a4e-9db9-47cc-ad47-e1ba88a9d796" />
-
+</p>
 <br>
 
 
@@ -80,7 +80,9 @@ Usage instructions can be found [here](https://checkmate.so/docs).
 <a id="installation"></a>
 ## Installation
 
-The quickest way to run Checkmate is the reference Docker Compose file, which runs the all-in-one image (`ghcr.io/bluewave-labs/checkmate`) plus MongoDB:
+The quickest way to run Checkmate is the reference Docker Compose file. It starts two services: the all-in-one Checkmate application image (`ghcr.io/bluewave-labs/checkmate`) and a separate MongoDB service.
+
+> **What “all-in-one” means:** the Checkmate application is packaged in a single image; MongoDB is not embedded in that image and remains required. The reference Compose file starts MongoDB for you. For custom deployments, configure `DB_CONNECTION_STRING` to use an external MongoDB instance.
 
 ```bash
 curl -O https://raw.githubusercontent.com/bluewave-labs/checkmate/master/docker/docker-compose.yaml
@@ -89,6 +91,10 @@ JWT_SECRET="$(openssl rand -hex 32)" docker compose up -d
 
 Then open http://localhost:52345. If the app is reached at another origin (domain or LAN IP), set `CLIENT_HOST` accordingly. To build the image yourself, run `docker build -f docker/Dockerfile -t checkmate .` from a checkout. For TLS, put any reverse proxy (Caddy, Traefik, nginx) in front of port 52345.
 
+There are also 1-click installation options like [Repocloud](https://repocloud.io/details/Checkmate),
+[Pikapods](https://www.pikapods.com/), [Coolify](https://coolify.io/), [Elestio](https://elest.io/open-source/checkmate), [K8s](../../charts/helm/checkmate/INSTALLATION.md), [Sive Host](https://sive.host) or [Cloudzy](https://cloudzy.com/marketplace/checkmate).
+
+
 ### Configuration
 
 The image is configured entirely through environment variables on the server container:
@@ -151,7 +157,7 @@ Feel free to ask questions or share your ideas - we'd love to hear from you!
   - Selective disk monitoring with mountpoint selection
 - Incidents at a glance
 - Status pages with 4 beautiful themes
-- E-mail, Webhooks, Discord, Slack, PagerDuty, Matrix, Microsoft Teams, Telegram, Pushover, Twilio (SMS) notifications
+- E-mail, Webhooks, Discord, Slack, PagerDuty, Matrix, Rocket.Chat, Microsoft Teams, Telegram, Pushover, Twilio (SMS) notifications
 - Scheduled maintenance
 - JSON query monitoring
 - Multi-language support for Arabic, Chinese (Simplified), Chinese (Traditional, Taiwan), Czech, English, Finnish, French, German, Japanese, Portuguese (Brazil), Russian, Spanish, Thai, Turkish, Ukrainian, and Vietnamese
@@ -205,9 +211,9 @@ Feel free to ask questions or share your ideas - we'd love to hear from you!
 <a id="contributing"></a>
 ## Contributing
 
-We are [Alex](http://github.com/ajhollid) (team lead), [Gorkem](http://github.com/gorkem-bwl/), [Aryaman](https://github.com/Br0wnHammer), [Mert](https://github.com/mertssmnoglu) and [Karen](https://github.com/karenvicent) helping individuals and businesses monitor their infra and servers.
+We are [Alex](http://github.com/ajhollid) (team lead), [Gorkem](http://github.com/gorkem-bwl/), [Aryaman](https://github.com/Br0wnHammer), [Malena](https://github.com/malenacaroline) and [Mert](https://github.com/mertssmnoglu) helping individuals and businesses monitor their infra and servers.
 
-We pride ourselves on building strong connections with contributors at every level. Despite being a young project, Checkmate has already earned 7000+ stars and attracted 90+ contributors from around the globe.
+We pride ourselves on building strong connections with contributors at every level. Despite being a young project, Checkmate has already earned almost 11K+ stars and attracted 150+ contributors from around the globe.
 
 Our repo is starred by employees from **Google, Microsoft, Intel, Cisco, Tencent, Electronic Arts, ByteDance, JP Morgan Chase, Deloitte, Accenture, Foxconn, Broadcom, China Telecom, Barclays, Capgemini, Wipro, Cloudflare, Dassault Systèmes and NEC**, so don’t hold back — jump in, contribute and learn with us!
 

client/package-lock.json

@@ -1,16 +1,17 @@
 {
 	"name": "client",
-	"version": "3.9.2",
+	"version": "3.11.0",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "client",
-			"version": "3.9.2",
+			"version": "3.11.0",
 			"dependencies": {
 				"@csstools/css-tokenizer": "^3.0.4",
 				"@emotion/react": "^11.13.3",
 				"@emotion/styled": "^11.13.0",
+				"@fontsource-variable/geist": "^5.3.0",
 				"@hello-pangea/dnd": "^18.0.0",
 				"@hookform/resolvers": "5.2.2",
 				"@mui/lab": "7.0.0",
@@ -92,6 +93,7 @@
 			"resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.7.tgz",
 			"integrity": "sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA==",
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"@babel/code-frame": "^7.29.7",
 				"@babel/generator": "^7.29.7",
@@ -407,6 +409,7 @@
 		"node_modules/@emotion/react": {
 			"version": "11.14.0",
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"@babel/runtime": "^7.18.3",
 				"@emotion/babel-plugin": "^11.13.5",
@@ -444,6 +447,7 @@
 		"node_modules/@emotion/styled": {
 			"version": "11.14.1",
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"@babel/runtime": "^7.18.3",
 				"@emotion/babel-plugin": "^11.13.5",
@@ -950,6 +954,15 @@
 				"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
 			}
 		},
+		"node_modules/@fontsource-variable/geist": {
+			"version": "5.3.0",
+			"resolved": "https://registry.npmjs.org/@fontsource-variable/geist/-/geist-5.3.0.tgz",
+			"integrity": "sha512-j0m+vLQuG5XAYoHtGCVu0spvlGreR3EzpECUVzkFmI1mTVnAO38l/NEPDCFgZ177JxzYJCLSmTQibIiYPilGrA==",
+			"license": "OFL-1.1",
+			"funding": {
+				"url": "https://github.com/sponsors/ayuhito"
+			}
+		},
 		"node_modules/@hapi/hoek": {
 			"version": "9.3.0",
 			"license": "BSD-3-Clause"
@@ -1223,6 +1236,7 @@
 		"node_modules/@mui/material": {
 			"version": "7.3.7",
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"@babel/runtime": "^7.28.4",
 				"@mui/core-downloads-tracker": "^7.3.7",
@@ -1327,6 +1341,7 @@
 		"node_modules/@mui/system": {
 			"version": "7.3.7",
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"@babel/runtime": "^7.28.4",
 				"@mui/private-theming": "^7.3.7",
@@ -2371,6 +2386,7 @@
 			"version": "24.5.2",
 			"devOptional": true,
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"undici-types": "~7.12.0"
 			}
@@ -2386,6 +2402,7 @@
 		"node_modules/@types/react": {
 			"version": "18.3.27",
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"@types/prop-types": "*",
 				"csstype": "^3.2.2"
@@ -2476,6 +2493,7 @@
 			"integrity": "sha512-4Z+L8I2OqhZV8qA132M4wNL30ypZGYOQVBfMgxDH/K5UX0PNqTu1c6za9ST5r9+tavvHiTWmBnKzpCJ/GlVFtg==",
 			"dev": true,
 			"license": "BSD-2-Clause",
+			"peer": true,
 			"dependencies": {
 				"@typescript-eslint/scope-manager": "7.18.0",
 				"@typescript-eslint/types": "7.18.0",
@@ -2756,6 +2774,7 @@
 			"version": "8.15.0",
 			"dev": true,
 			"license": "MIT",
+			"peer": true,
 			"bin": {
 				"acorn": "bin/acorn"
 			},
@@ -3112,6 +3131,7 @@
 				}
 			],
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"baseline-browser-mapping": "^2.10.42",
 				"caniuse-lite": "^1.0.30001800",
@@ -3555,7 +3575,8 @@
 		},
 		"node_modules/dayjs": {
 			"version": "1.11.13",
-			"license": "MIT"
+			"license": "MIT",
+			"peer": true
 		},
 		"node_modules/debug": {
 			"version": "4.4.3",
@@ -3954,6 +3975,7 @@
 			"version": "8.57.1",
 			"dev": true,
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"@eslint-community/eslint-utils": "^4.2.0",
 				"@eslint-community/regexpp": "^4.6.1",
@@ -4766,6 +4788,7 @@
 				}
 			],
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"@babel/runtime": "^7.27.6"
 			},
@@ -5577,6 +5600,7 @@
 			"resolved": "https://registry.npmjs.org/maplibre-gl/-/maplibre-gl-5.19.0.tgz",
 			"integrity": "sha512-REhYUN8gNP3HlcIZS6QU2uy8iovl31cXsrNDkCcqWSQbCkcpdYLczqDz5PVIwNH42UQNyvukjes/RoHPDrOUmQ==",
 			"license": "BSD-3-Clause",
+			"peer": true,
 			"dependencies": {
 				"@mapbox/geojson-rewind": "^0.5.2",
 				"@mapbox/jsonlint-lines-primitives": "^2.0.2",
@@ -6358,6 +6382,7 @@
 		"node_modules/react-dom": {
 			"version": "18.3.1",
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"loose-envify": "^1.1.0",
 				"scheduler": "^0.23.2"
@@ -6369,6 +6394,7 @@
 		"node_modules/react-hook-form": {
 			"version": "7.71.1",
 			"license": "MIT",
+			"peer": true,
 			"engines": {
 				"node": ">=18.0.0"
 			},
@@ -6572,7 +6598,8 @@
 		},
 		"node_modules/redux": {
 			"version": "5.0.1",
-			"license": "MIT"
+			"license": "MIT",
+			"peer": true
 		},
 		"node_modules/redux-persist": {
 			"version": "6.0.0",
@@ -6722,6 +6749,7 @@
 			"resolved": "https://registry.npmjs.org/rollup/-/rollup-4.62.2.tgz",
 			"integrity": "sha512-RFnrW4lhXA3s3eqHDZvN654g8OTjzRfqpIRJYczCGB6HzphckVAi/Qh4tbPUbRuDi7s1Llv8g/NspLkttY3gTA==",
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"@types/estree": "1.0.9"
 			},
@@ -7563,6 +7591,7 @@
 			"version": "5.9.3",
 			"devOptional": true,
 			"license": "Apache-2.0",
+			"peer": true,
 			"bin": {
 				"tsc": "bin/tsc",
 				"tsserver": "bin/tsserver"
@@ -7700,6 +7729,7 @@
 			"resolved": "https://registry.npmjs.org/vite/-/vite-6.4.3.tgz",
 			"integrity": "sha512-NTKlcQjlAK7MlQoyb6LgaqHc8sso/pVyUJYWMws3jg21uTJw/LddqIFPcPqP6PzpgbIcZyKI85sFE4HBrQDA8A==",
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"esbuild": "^0.25.0",
 				"fdir": "^6.4.4",

client/package.json

@@ -1,9 +1,10 @@
 {
 	"name": "client",
 	"private": true,
-	"version": "3.9.2",
+	"version": "3.11.0",
 	"type": "module",
 	"scripts": {
+		"lockfile": "docker run --rm -v \"$PWD\":/w -w /w $(grep -m1 -o 'node:[^ ]*' ../docker/Dockerfile) npm install --package-lock-only",
 		"dev": "vite",
 		"build": "tsc -b && vite build",
 		"build-dev": "tsc -b && vite build --mode development",
@@ -11,7 +12,8 @@
 		"lint-strict": "eslint . --ext js,jsx,ts,tsx --report-unused-disable-directives --max-warnings 0",
 		"preview": "vite preview",
 		"format": "prettier --write .",
-		"format-check": "prettier --check ."
+		"format-check": "prettier --check .",
+		"compile": "tsc -b"
 	},
 	"lint-staged": {
 		"**/*": "prettier --write --ignore-unknown"
@@ -20,6 +22,7 @@
 		"@csstools/css-tokenizer": "^3.0.4",
 		"@emotion/react": "^11.13.3",
 		"@emotion/styled": "^11.13.0",
+		"@fontsource-variable/geist": "^5.3.0",
 		"@hello-pangea/dnd": "^18.0.0",
 		"@hookform/resolvers": "5.2.2",
 		"@mui/lab": "7.0.0",

client/src/Components/actions-menu/index.tsx

@@ -3,6 +3,7 @@ import Menu from "@mui/material/Menu";
 import MenuItem from "@mui/material/MenuItem";
 import IconButton from "@mui/material/IconButton";
 import { Settings } from "lucide-react";
+import { useTheme } from "@mui/material/styles";
 
 export type ActionMenuItem = {
 	id: number | string;
@@ -12,6 +13,7 @@ export type ActionMenuItem = {
 };
 
 export const ActionsMenu = ({ items }: { items: ActionMenuItem[] }) => {
+	const theme = useTheme();
 	const [anchorEl, setAnchorEl] = useState<null | any>(null);
 	const open = Boolean(anchorEl);
 
@@ -27,7 +29,14 @@ export const ActionsMenu = ({ items }: { items: ActionMenuItem[] }) => {
 
 	return (
 		<div>
-			<IconButton onClick={handleClick}>
+			<IconButton
+				onClick={handleClick}
+				sx={{
+					"&:hover": {
+						backgroundColor: theme.palette.action.controlHover,
+					},
+				}}
+			>
 				<Settings
 					size={20}
 					strokeWidth={1.5}

client/src/Components/common/charts/HeatmapResponseTimeTooltip.tsx

@@ -1,7 +1,7 @@
 import Stack from "@mui/material/Stack";
 import Tooltip from "@mui/material/Tooltip";
 import Typography from "@mui/material/Typography";
-import { formatDateWithTz } from "@/Utils/TimeUtils";
+import { formatDateWithTz, formatMs } from "@/Utils/TimeUtils";
 import type { CheckSnapshot } from "@/Types/Check";
 import { useTheme } from "@mui/material/styles";
 import { useSelector } from "react-redux";
@@ -58,7 +58,7 @@ export const HeatmapResponseTimeTooltip = ({
 					</Typography>
 					<Typography>
 						{t("common.labels.responseTime")}:{" "}
-						{check?.originalResponseTime?.toFixed() ?? "N/A"} ms
+						{check?.responseTime ? formatMs(check.responseTime) : "N/A"}
 					</Typography>
 					<Typography textTransform={"capitalize"}>
 						Status:{" "}

client/src/Components/common/charts/HistogramResponseTime.tsx

@@ -8,6 +8,8 @@ import { HeatmapResponseTimeTooltip } from "./HeatmapResponseTimeTooltip";
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { MAX_RECENT_CHECKS } from "@/Types/Monitor";
+import { computeBarHeights } from "@/Utils/DataUtils";
+import { formatMs } from "@/Utils/TimeUtils";
 
 interface HistogramResponseTimeProps {
 	checks: CheckSnapshot[];
@@ -18,25 +20,25 @@ interface HistogramResponseTimeProps {
 }
 
 interface ResponseTimeStats {
-	max: number | string;
+	max: string | null;
-	avg: number | string;
+	avg: string | null;
 }
 
 const DEFAULT_HEIGHT = 50;
 
 const calculateResponseTimeStats = (checks: CheckSnapshot[]): ResponseTimeStats => {
 	if (!Array.isArray(checks) || checks.length === 0) {
-		return { max: "-", avg: "-" };
+		return { max: null, avg: null };
 	}
 
-	const validChecks = checks.filter((check) => check.originalResponseTime != null);
+	const validChecks = checks.filter((check) => check.responseTime != null);
 	if (validChecks.length === 0) {
-		return { max: "-", avg: "-" };
+		return { max: null, avg: null };
 	}
 
-	const responseTimes = validChecks.map((check) => check.originalResponseTime);
+	const responseTimes = validChecks.map((check) => check.responseTime);
-	const max = Math.round(Math.max(...responseTimes));
+	const max = formatMs(Math.max(...responseTimes));
-	const avg = Math.round(
+	const avg = formatMs(
 		responseTimes.reduce((sum, time) => sum + time, 0) / responseTimes.length
 	);
 
@@ -54,7 +56,7 @@ export const HistogramResponseTime = ({
 	const { t } = useTranslation();
 
 	const stats = useMemo(() => calculateResponseTimeStats(checks), [checks]);
-
+	const barHeights = useMemo(() => computeBarHeights(checks), [checks]);
 	if (!Array.isArray(checks) || checks.length === 0) return null;
 
 	const data =
@@ -68,29 +70,28 @@ export const HistogramResponseTime = ({
 	const chartHeight = typeof height === "number" ? `${height}px` : height;
 	const gridGap = gap ?? theme.spacing(0.5);
 
-	const statsContent = showStats &&
+	const statsContent = showStats && (stats.max !== null || stats.avg !== null) && (
-		(typeof stats.max === "number" || typeof stats.avg === "number") && (
+		<Stack
-			<Stack
+			justifyContent="center"
-				justifyContent="center"
+			alignItems={statsPosition === "left" ? "flex-end" : "flex-start"}
-				alignItems={statsPosition === "left" ? "flex-end" : "flex-start"}
+			width={110}
-				width={110}
+			pr={statsPosition === "left" ? theme.spacing(8) : 0}
-				pr={statsPosition === "left" ? theme.spacing(8) : 0}
+			pl={statsPosition === "right" ? theme.spacing(8) : 0}
-				pl={statsPosition === "right" ? theme.spacing(8) : 0}
+		>
+			<Typography
+				variant="body2"
+				noWrap
 			>
-				<Typography
+				{t("common.charts.histogram.avg", { value: stats.avg })}
-					variant="body2"
+			</Typography>
-					noWrap
+			<Typography
-				>
+				variant="body2"
-					{t("common.charts.histogram.avg", { value: stats.avg })}
+				noWrap
-				</Typography>
+			>
-				<Typography
+				{t("common.charts.histogram.max", { value: stats.max })}
-					variant="body2"
+			</Typography>
-					noWrap
+		</Stack>
-				>
+	);
-					{t("common.charts.histogram.max", { value: stats.max })}
-				</Typography>
-			</Stack>
-		);
 
 	return (
 		<Stack
@@ -111,7 +112,7 @@ export const HistogramResponseTime = ({
 				>
 					{data.map((check, index) => {
 						const isPlaceholder = (check as any).status === "placeholder";
-						const heightPct = `${Math.max(0, Math.min(100, (check as any).responseTime ?? 0))}%`;
+						const heightPct = `${barHeights[index] ?? 0}%`;
 						const barColor =
 							check.status === true
 								? theme.palette.success.light

client/src/Components/common/controls/HeaderTimeRange.tsx

@@ -6,12 +6,13 @@ import { useTheme } from "@mui/material/styles";
 import CircularProgress from "@mui/material/CircularProgress";
 import { useTranslation } from "react-i18next";
 import { useMediaQuery } from "@mui/material";
+import type { DateRange } from "@/Types/Query";
 
 interface MonitorTimeFrameHeaderProps {
 	isLoading?: boolean;
 	hasDateRange?: boolean;
-	dateRange: string;
+	dateRange: DateRange;
-	setDateRange: (dateRange: string) => void;
+	setDateRange: (dateRange: DateRange) => void;
 }
 
 export const HeaderTimeRange = ({
@@ -25,7 +26,7 @@ export const HeaderTimeRange = ({
 	const isSmallScreen = useMediaQuery(theme.breakpoints.down("md"));
 	const handleChange = (
 		_event: React.MouseEvent<HTMLElement>,
-		newValue: string | null
+		newValue: DateRange | null
 	) => {
 		if (newValue !== null) {
 			setDateRange(newValue);

client/src/Components/design-elements/BaseBox.tsx

@@ -1,10 +1,12 @@
 import Box, { type BoxProps } from "@mui/material/Box";
 import { useTheme } from "@mui/material/styles";
+import { forwardRef } from "react";
 
-export const BaseBox = ({ sx, ...rest }: BoxProps) => {
+export const BaseBox = forwardRef<HTMLDivElement, BoxProps>(({ sx, ...rest }, ref) => {
 	const theme = useTheme();
 	return (
 		<Box
+			ref={ref}
 			{...rest}
 			sx={{
 				backgroundColor: theme.palette.background.paper,
@@ -16,4 +18,6 @@ export const BaseBox = ({ sx, ...rest }: BoxProps) => {
 			}}
 		/>
 	);
-};
+});
+
+BaseBox.displayName = "BaseBox";

client/src/Components/design-elements/BaseChart.tsx

@@ -10,39 +10,66 @@ import { useTheme } from "@mui/material/styles";
 type BaseChartProps = React.PropsWithChildren<{
 	icon?: React.ReactNode;
 	title: string;
+	rightTitle?: string;
 	width?: number | string;
 	maxWidth?: number | string;
+	flexBasis?: number | string;
 	padding?: number | string | ResponsiveStyleValue<number | string>;
+	onClick?: () => void;
 }>;
 
 export const BaseChart = ({
 	children,
 	title,
+	rightTitle,
 	width = "100%",
 	maxWidth = "100%",
+	flexBasis = "0%",
 	padding,
+	onClick,
 }: BaseChartProps) => {
 	const theme = useTheme();
 	return (
 		<BaseBox
+			onClick={onClick}
 			sx={{
 				padding: padding ?? theme.spacing(LAYOUT.MD),
 				display: "flex",
 				flex: 1,
+				flexBasis,
 				width: width,
 				maxWidth: maxWidth,
+				...(onClick && {
+					cursor: "pointer",
+					"& .recharts-wrapper": { cursor: "pointer !important" },
+				}),
 			}}
 		>
 			<Stack
 				gap={theme.spacing(LAYOUT.MD)}
 				flex={1}
 			>
-				<Typography
+				<Stack
-					variant="eyebrow"
+					direction="row"
-					color="text.secondary"
+					justifyContent={"space-between"}
 				>
-					{title}
+					<Typography
-				</Typography>
+						variant="eyebrow"
+						color="text.secondary"
+						sx={{ overflowWrap: "anywhere" }}
+					>
+						{title}
+					</Typography>
+					{rightTitle && (
+						<Typography
+							variant="eyebrow"
+							color="text.secondary"
+							sx={{ overflowWrap: "anywhere" }}
+						>
+							{rightTitle}
+						</Typography>
+					)}
+				</Stack>
 				<Box flex={1}>{children}</Box>
 			</Stack>
 		</BaseBox>

client/src/Components/design-elements/Breadcrumb.tsx

@@ -83,12 +83,17 @@ export const Breadcrumb = ({
 	const basePage = segments[0] || t("common.breadcrumbs.home");
 
 	const secondSegment = segments[1];
+	const thirdSegment = segments[2];
 	const isActionPage = secondSegment && actionSegments.includes(secondSegment);
 	const isDetailsPage = secondSegment && isId(secondSegment);
-	const hasSubPage = isActionPage || isDetailsPage;
+	// page/section/:id routes such as docker/host/:monitorId
+	const isSectionDetailsPage = Boolean(
+		secondSegment && !isId(secondSegment) && thirdSegment && isId(thirdSegment)
+	);
+	const hasSubPage = isActionPage || isDetailsPage || isSectionDetailsPage;
 
 	const getSubPageLabel = (): string => {
-		if (isActionPage) {
+		if (isActionPage || isSectionDetailsPage) {
 			return secondSegment.charAt(0).toUpperCase() + secondSegment.slice(1);
 		}
 		return t("common.breadcrumbs.details");

client/src/Components/design-elements/Dot.tsx

@@ -1,18 +1,28 @@
 import type { CSSProperties } from "react";
 
+export const DotSizes = ["xs", "sm", "md", "lg"] as const;
+export type DotSize = (typeof DotSizes)[number];
+
+const DOT_SIZE_PX: Record<DotSize, string> = {
+	xs: "2px",
+	sm: "4px",
+	md: "8px",
+	lg: "12px",
+};
+
 interface DotProps {
 	color?: string;
-	size?: string;
+	size?: DotSize;
 	style?: CSSProperties;
 }
 
-export const Dot = ({ color = "gray", size = "4px", style }: DotProps) => {
+export const Dot = ({ color = "gray", size = "sm", style }: DotProps) => {
 	return (
 		<span
 			style={{
 				content: '""',
-				width: size,
+				width: DOT_SIZE_PX[size],
-				height: size,
+				height: DOT_SIZE_PX[size],
 				borderRadius: "50%",
 				backgroundColor: color,
 				opacity: 0.8,

client/src/Components/design-elements/Gauge.tsx

@@ -39,9 +39,9 @@ export const Gauge = forwardRef<HTMLDivElement, GaugeProps>(function Gauge(
 		() => ({
 			circumference: 2 * Math.PI * radius,
 			totalSize: radius * 2 + strokeWidth * 2,
-			strokeLength: (progress / 100) * (2 * Math.PI * radius),
+			strokeLength: (progressWithinRange / 100) * (2 * Math.PI * radius),
 		}),
-		[radius, strokeWidth, progress]
+		[radius, strokeWidth, progressWithinRange]
 	);
 
 	const [offset, setOffset] = useState(circumference);
@@ -52,7 +52,7 @@ export const Gauge = forwardRef<HTMLDivElement, GaugeProps>(function Gauge(
 		}, 100);
 
 		return () => clearTimeout(timer);
-	}, [progress, circumference, strokeLength]);
+	}, [circumference, strokeLength]);
 
 	const fillColor = getInfraGaugeColor(progressWithinRange, theme);
 
@@ -123,6 +123,7 @@ export const DetailGauge = ({
 	lowerLabel,
 	lowerValue,
 	maxWidth = 225,
+	flexBasis = "0%",
 }: {
 	title: string;
 	progress: number;
@@ -131,6 +132,7 @@ export const DetailGauge = ({
 	lowerLabel?: string;
 	lowerValue?: string | number;
 	maxWidth?: number;
+	flexBasis?: number | string;
 }) => {
 	const theme = useTheme();
 	return (
@@ -138,6 +140,7 @@ export const DetailGauge = ({
 			icon={null}
 			title={title}
 			maxWidth={maxWidth}
+			flexBasis={flexBasis}
 		>
 			<Stack
 				alignItems={"center"}

client/src/Components/design-elements/Icon.tsx

@@ -5,13 +5,15 @@ interface IconProps {
 	size?: number;
 	strokeWidth?: number;
 	stroke?: string;
+	color?: string;
 }
 
-const Icon = ({ icon: Icon, size = 20, strokeWidth = 1.5 }: IconProps) => {
+const Icon = ({ icon: Icon, size = 16, strokeWidth = 1.5, color }: IconProps) => {
 	return (
 		<Icon
 			size={size}
 			strokeWidth={strokeWidth}
+			color={color}
 		/>
 	);
 };

client/src/Components/design-elements/MonitorStatus.tsx

@@ -4,10 +4,10 @@ import Typography from "@mui/material/Typography";
 import { PulseDot, Dot, StrategyBadge } from "@/Components/design-elements";
 import { getStatusColor, formatUrl } from "@/Utils/MonitorUtils";
 import { useTheme } from "@mui/material/styles";
-import prettyMilliseconds from "pretty-ms";
 import { typographyLevels } from "@/Utils/Theme/Palette";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import { LAYOUT } from "@/Utils/Theme/constants";
+import { formatDuration } from "@/Utils/TimeUtils";
 export const MonitorStatus = ({ monitor }: { monitor: Monitor }) => {
 	const theme = useTheme();
 	const isSmall = useMediaQuery(theme.breakpoints.down("md"));
@@ -52,7 +52,7 @@ export const MonitorStatus = ({ monitor }: { monitor: Monitor }) => {
 					<>
 						<Dot />
 						<Typography>
-							Checking every {prettyMilliseconds(monitor?.interval, { verbose: true })}
+							Checking every {formatDuration(monitor?.interval, true)}
 						</Typography>
 					</>
 				)}

client/src/Components/design-elements/OfflineBanner.tsx

@@ -37,8 +37,8 @@ export const OfflineBanner = ({ visible }: OfflineBannerProps) => {
 				left: 0,
 				right: 0,
 				zIndex: theme.zIndex.snackbar,
-				backgroundColor: theme.palette.error.main,
+				backgroundColor: theme.palette.error.dark,
-				color: theme.palette.error.contrastText,
+				color: "#FFFFFF",
 				px: theme.spacing(8),
 				py: theme.spacing(4),
 				transition: "top 1s ease-in-out",

client/src/Components/design-elements/PageHeader.tsx

@@ -6,6 +6,7 @@ import { Link as RouterLink } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { useTheme } from "@mui/material/styles";
 import { ChevronLeft, HelpCircle, FileText, Code } from "lucide-react";
+import { INPUT_BASE_HEIGHT } from "@/Utils/Theme/constants";
 
 import type { ReactNode } from "react";
 
@@ -109,7 +110,7 @@ export const PageHeader = ({
 							fontSize: 14,
 							color: theme.palette.text.secondary,
 							lineHeight: 1.55,
-							maxWidth: 640,
+							maxWidth: "108ch",
 						}}
 					>
 						{description}
@@ -142,7 +143,7 @@ export const PageHeader = ({
 								alignItems: "center",
 								justifyContent: "center",
 								width: 36,
-								height: 32,
+								height: INPUT_BASE_HEIGHT,
 								color: theme.palette.text.secondary,
 								borderRight:
 									idx < linkItems.length - 1

client/src/Components/design-elements/SkeletonCard.tsx

@@ -1,4 +1,5 @@
 import { Box, Stack, useTheme } from "@mui/material";
+import { INPUT_BASE_HEIGHT } from "@/Utils/Theme/constants";
 
 interface SkeletonCardProps {
 	width?: number | string | { xs?: number | string; md?: number | string };
@@ -44,7 +45,7 @@ export const SkeletonCard = ({
 
 	const blockStyle = {
 		width: 55,
-		height: 34,
+		height: INPUT_BASE_HEIGHT,
 		borderRadius: theme.shape.borderRadius,
 		background: theme.palette.secondary.main,
 		border: `1px solid ${theme.palette.divider}`,

client/src/Components/design-elements/StatBox.tsx

@@ -2,7 +2,7 @@ import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
 import Box from "@mui/material/Box";
 import { useTheme } from "@mui/material/styles";
-import { lighten } from "@mui/material/styles";
+import { darken, lighten } from "@mui/material/styles";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import type { PaletteKey } from "@/Utils/Theme/Theme";
 import { BaseBox, TooltipWithInfo } from "@/Components/design-elements";
@@ -11,17 +11,18 @@ import type { SxProps } from "@mui/material";
 type GradientBox = React.PropsWithChildren<{
 	palette?: PaletteKey;
 	sx?: SxProps;
+	interactive?: boolean;
 }>;
 
-export const GradientBox = ({ children, palette, sx }: GradientBox) => {
+export const GradientBox = ({ children, palette, sx, interactive }: GradientBox) => {
 	const theme = useTheme();
 	const isSmall = useMediaQuery(theme.breakpoints.down("md"));
 	const isLight = theme.palette.mode === "light";
 	const paper = theme.palette.background.paper;
-	const paperStart = lighten(paper, isLight ? 0.06 : 0.08);
+	const paperStart = isLight ? darken(paper, 0.02) : lighten(paper, 0.08);
 	const paperEnd = paper;
 	const bg = palette
-		? `linear-gradient(135deg, ${theme.palette[palette].light} 0%, ${theme.palette[palette].main} 100%)`
+		? `linear-gradient(135deg, ${lighten(theme.palette[palette].main, 0.12)} 0%, ${theme.palette[palette].main} 100%)`
 		: `linear-gradient(135deg, ${paperStart} 0%, ${paperEnd} 100%)`;
 
 	return (
@@ -30,6 +31,12 @@ export const GradientBox = ({ children, palette, sx }: GradientBox) => {
 				padding: `${theme.spacing(4)} ${theme.spacing(8)}`,
 				width: isSmall ? `100%` : `calc(25% - (3 * ${theme.spacing(8)} / 4))`,
 				background: bg,
+				...(interactive && {
+					cursor: "pointer",
+					"&:hover": {
+						backgroundImage: `linear-gradient(${theme.palette.action.rowHover}, ${theme.palette.action.rowHover}), ${bg}`,
+					},
+				}),
 				...sx,
 			}}
 		>
@@ -62,10 +69,8 @@ export const StatBox = ({
 	return (
 		<GradientBox
 			palette={palette}
-			sx={{
+			interactive={Boolean(onClick)}
-				...(sx as object),
+			sx={{ ...(sx as object) }}
-				...(onClick ? { cursor: "pointer", "&:hover": { opacity: 0.95 } } : {}),
-			}}
 		>
 			<Stack onClick={onClick}>
 				<Box sx={{ display: "flex", alignItems: "center", gap: theme.spacing(2) }}>

client/src/Components/design-elements/StatusBox.tsx

@@ -5,7 +5,7 @@ import { BaseBox } from "@/Components/design-elements";
 import { useTranslation } from "react-i18next";
 import type { SxProps } from "@mui/material";
 
-import { useTheme } from "@mui/material/styles";
+import { alpha, useTheme } from "@mui/material/styles";
 
 type StatusBoxProps = React.PropsWithChildren<{
 	children: React.ReactNode;
@@ -34,8 +34,8 @@ export const BGBox = ({ children, sx }: StatusBoxProps) => {
 				sx={{
 					pointerEvents: "none",
 					backgroundImage: `
-						linear-gradient(${theme.palette.divider} 1px, transparent 1px),
+						linear-gradient(${alpha(theme.palette.divider, 0.4)} 1px, transparent 1px),
-						linear-gradient(90deg, ${theme.palette.divider} 1px, transparent 1px)
+						linear-gradient(90deg, ${alpha(theme.palette.divider, 0.4)} 1px, transparent 1px)
 					`,
 					backgroundSize: "24px 24px",
 					maskImage:

client/src/Components/design-elements/StatusLabel.tsx

@@ -1,12 +1,19 @@
 import Box from "@mui/material/Box";
 import { BaseBox } from "@/Components/design-elements";
 import Typography from "@mui/material/Typography";
+import Stack from "@mui/material/Stack";
 
 import type { MonitorStatus } from "@/Types/Monitor";
 import type { SxProps } from "@mui/material/styles";
-import { getStatusPalette, getValuePalette } from "@/Utils/MonitorUtils";
+import {
+	getDockerStatePalette,
+	getStatusPalette,
+	getValuePalette,
+} from "@/Utils/MonitorUtils";
 import { useTheme } from "@mui/material/styles";
 import { useTranslation } from "react-i18next";
+import type { DockerContainerState } from "@/Types/Check";
+import { SPACING } from "@/Utils/Theme/constants";
 
 export const ValueTypes = ["positive", "negative", "neutral"] as const;
 export type ValueType = (typeof ValueTypes)[number];
@@ -110,3 +117,36 @@ export const ColoredLabel = ({ text, color }: { text: string; color: string }) =
 		</BaseBox>
 	);
 };
+
+export const DockerStateLabel = ({
+	state,
+	name,
+	image,
+}: {
+	state: DockerContainerState;
+	name: string;
+	image: string;
+}) => {
+	const palette = getDockerStatePalette(state);
+	const theme = useTheme();
+
+	return (
+		<Stack
+			direction="row"
+			gap={SPACING.LG}
+			alignItems={"center"}
+		>
+			<Box
+				width={7}
+				height={7}
+				bgcolor={theme.palette[palette].light}
+				borderRadius="50%"
+				marginRight="5px"
+			/>
+			<Stack>
+				<Typography>{name}</Typography>
+				<Typography variant="body2">{image}</Typography>
+			</Stack>
+		</Stack>
+	);
+};

client/src/Components/design-elements/Table.tsx

@@ -52,6 +52,7 @@ type DataTableProps<T extends { id?: string | number; _id?: string | number }> =
 	emptyViewText?: string;
 	emptyViewPositive?: boolean;
 	getRowSx?: (row: T) => SxProps<Theme>;
+	isRowSelected?: (row: T) => boolean;
 };
 
 export function DataTable<
@@ -70,6 +71,7 @@ export function DataTable<
 	emptyViewText,
 	emptyViewPositive,
 	getRowSx,
+	isRowSelected,
 }: DataTableProps<T>) {
 	const theme = useTheme();
 	const [expanded, setExpanded] = useState<(string | number) | null>(null);
@@ -79,6 +81,7 @@ export function DataTable<
 	};
 
 	const isSmall = useMediaQuery(theme.breakpoints.down("md"));
+	const isInteractive = Boolean(onRowClick) || expandableRows;
 
 	if (data.length === 0 || headers.length === 0) {
 		return (
@@ -108,6 +111,11 @@ export function DataTable<
 								borderRadius: theme.shape.borderRadius,
 								padding: theme.spacing(LAYOUT.XS),
 								cursor: onRowClick ? "pointer" : "default",
+								...(onRowClick && {
+									"&:hover": {
+										backgroundColor: theme.palette.action.rowHover,
+									},
+								}),
 							}}
 							key={key}
 						>
@@ -191,7 +199,7 @@ export function DataTable<
 					"& :is(th)": {
 						backgroundColor: theme.palette.background.paper,
 						color: theme.palette.text.secondary,
-						fontWeight: 500,
+						fontWeight: 600,
 						textTransform: "uppercase",
 						letterSpacing: "0.08em",
 						padding: `${theme.spacing(SPACING.LG)} ${theme.spacing(LAYOUT.MD)}`,
@@ -227,12 +235,25 @@ export function DataTable<
 					{data.map((row) => {
 						const key = row.id || row._id || Math.random();
 						const isExpanded = expanded === key;
+						const selected = isRowSelected?.(row);
 
 						return (
 							<Fragment key={key}>
 								<TableRow
 									sx={{
-										cursor: onRowClick ? "pointer" : "default",
+										cursor: isInteractive ? "pointer" : "default",
+										...(isInteractive && {
+											"&:hover .MuiTableCell-root": {
+												backgroundColor: selected
+													? theme.palette.action.selectedHover
+													: theme.palette.action.rowHover,
+											},
+										}),
+										...(selected && {
+											"& .MuiTableCell-root": {
+												backgroundColor: theme.palette.action.selected,
+											},
+										}),
 										...(getRowSx?.(row) as object),
 									}}
 									onClick={() => {
@@ -292,6 +313,12 @@ interface TablePaginationActionsProps {
 	onPageChange: (event: React.MouseEvent<HTMLButtonElement>, newPage: number) => void;
 }
 
+const controlHoverSx = (theme: Theme): SxProps<Theme> => ({
+	"&:hover": {
+		backgroundColor: theme.palette.action.controlHover,
+	},
+});
+
 function TablePaginationActions(props: TablePaginationActionsProps) {
 	const theme = useTheme();
 	const { count, page, rowsPerPage, onPageChange } = props;
@@ -321,6 +348,7 @@ function TablePaginationActions(props: TablePaginationActionsProps) {
 				onClick={handleFirstPageButtonClick}
 				disabled={page === 0}
 				aria-label="first page"
+				sx={controlHoverSx(theme)}
 			>
 				{theme.direction === "rtl" ? (
 					<ChevronsRight
@@ -338,6 +366,7 @@ function TablePaginationActions(props: TablePaginationActionsProps) {
 				onClick={handleBackButtonClick}
 				disabled={page === 0}
 				aria-label="previous page"
+				sx={controlHoverSx(theme)}
 			>
 				{theme.direction === "rtl" ? (
 					<ChevronRight
@@ -355,6 +384,7 @@ function TablePaginationActions(props: TablePaginationActionsProps) {
 				onClick={handleNextButtonClick}
 				disabled={page >= Math.ceil(count / rowsPerPage) - 1}
 				aria-label="next page"
+				sx={controlHoverSx(theme)}
 			>
 				{theme.direction === "rtl" ? (
 					<ChevronLeft
@@ -372,6 +402,7 @@ function TablePaginationActions(props: TablePaginationActionsProps) {
 				onClick={handleLastPageButtonClick}
 				disabled={page >= Math.ceil(count / rowsPerPage) - 1}
 				aria-label="last page"
+				sx={controlHoverSx(theme)}
 			>
 				{theme.direction === "rtl" ? (
 					<ChevronsLeft
@@ -419,6 +450,7 @@ function HasMoreTablePaginationActions(props: HasMoreTablePaginationActionsProps
 				onClick={handleFirstPageButtonClick}
 				disabled={page === 0}
 				aria-label="first page"
+				sx={controlHoverSx(theme)}
 			>
 				{theme.direction === "rtl" ? (
 					<ChevronsRight
@@ -436,6 +468,7 @@ function HasMoreTablePaginationActions(props: HasMoreTablePaginationActionsProps
 				onClick={handleBackButtonClick}
 				disabled={page === 0}
 				aria-label="previous page"
+				sx={controlHoverSx(theme)}
 			>
 				{theme.direction === "rtl" ? (
 					<ChevronRight
@@ -453,6 +486,7 @@ function HasMoreTablePaginationActions(props: HasMoreTablePaginationActionsProps
 				onClick={handleNextButtonClick}
 				disabled={hasMore === false}
 				aria-label="next page"
+				sx={controlHoverSx(theme)}
 			>
 				{theme.direction === "rtl" ? (
 					<ChevronLeft
@@ -470,6 +504,7 @@ function HasMoreTablePaginationActions(props: HasMoreTablePaginationActionsProps
 				<IconButton
 					disabled={hasMore === false}
 					aria-label="next page"
+					sx={controlHoverSx(theme)}
 				>
 					<Ellipsis
 						size={20}

client/src/Components/design-elements/Tabs.tsx

@@ -1,6 +1,8 @@
 import MuiTabs from "@mui/material/Tabs";
 import type { TabsProps } from "@mui/material/Tabs";
 import { useTheme } from "@mui/material/styles";
+import { typographyLevels } from "@/Utils/Theme/Palette";
+import { INPUT_BASE_HEIGHT } from "@/Utils/Theme/constants";
 interface CustomTabsProps extends TabsProps {}
 
 export const Tabs = (props: CustomTabsProps) => {
@@ -8,7 +10,7 @@ export const Tabs = (props: CustomTabsProps) => {
 	return (
 		<MuiTabs
 			sx={{
-				minHeight: 34,
+				minHeight: INPUT_BASE_HEIGHT,
 				borderBottom: `1px solid ${theme.palette.divider}`,
 				"& .MuiTabs-indicator": {
 					backgroundColor: theme.palette.primary.main,
@@ -38,9 +40,9 @@ export const Tab = (props: CustomTabProps) => {
 			iconPosition="start"
 			sx={{
 				textTransform: "none",
-				fontSize: 14,
+				fontSize: typographyLevels.m,
 				fontWeight: 500,
-				minHeight: 34,
+				minHeight: INPUT_BASE_HEIGHT,
 				padding: theme.spacing(1, 0),
 				paddingBottom: 0,
 				minWidth: "auto",
@@ -48,7 +50,6 @@ export const Tab = (props: CustomTabProps) => {
 				color: theme.palette.text.secondary,
 				"&.Mui-selected": {
 					color: theme.palette.primary.main,
-					fontWeight: 600,
 				},
 				"&:hover": {
 					color: theme.palette.text.secondary,

client/src/Components/inputs/AutoComplete.tsx

@@ -6,6 +6,7 @@ import Stack from "@mui/material/Stack";
 import { useTheme } from "@mui/material/styles";
 import { FieldLabel } from "./FieldLabel";
 import { ChevronDown } from "lucide-react";
+import { useTranslation } from "react-i18next";
 
 type AutoCompleteInputProps = Omit<
 	AutocompleteProps<any, boolean, boolean, boolean>,
@@ -15,6 +16,9 @@ type AutoCompleteInputProps = Omit<
 	fieldLabel?: string;
 	required?: boolean;
 	renderOptionContent?: (option: any) => React.ReactNode;
+	placeholder?: string;
+	error?: boolean;
+	helperText?: string;
 };
 
 export const AutoCompleteInput = ({
@@ -22,15 +26,21 @@ export const AutoCompleteInput = ({
 	required,
 	renderInput,
 	renderOptionContent,
+	placeholder,
+	error,
+	helperText,
 	...props
 }: AutoCompleteInputProps) => {
 	const theme = useTheme();
+	const { t } = useTranslation();
 	const multiple = props.multiple;
 	const { renderOption: customRenderOption, ...autocompleteProps } = props;
 	const defaultRenderInput = (params: any) => (
 		<TextField
 			{...params}
-			placeholder="Type to search"
+			placeholder={placeholder ?? t("common.form.autocomplete.placeholder")}
+			error={error}
+			helperText={helperText}
 		/>
 	);
 

client/src/Components/inputs/Button.tsx

@@ -1,7 +1,7 @@
 import Button from "@mui/material/Button";
 import type { ButtonProps } from "@mui/material/Button";
 import { useTheme, darken } from "@mui/material/styles";
-import { HOVER } from "@/Utils/Theme/constants";
+import { INPUT_BASE_HEIGHT, HOVER } from "@/Utils/Theme/constants";
 
 const PALETTE_COLORS = [
 	"primary",
@@ -43,7 +43,8 @@ export const ButtonInput = ({ sx, ...props }: ButtonProps) => {
 			{...props}
 			sx={{
 				textTransform: "none",
-				height: 34,
+				height: INPUT_BASE_HEIGHT,
+				lineHeight: 1.2,
 				fontWeight: 400,
 				borderRadius: 2,
 				whiteSpace: "nowrap",

client/src/Components/inputs/ColorPicker.tsx

@@ -4,6 +4,7 @@ import { typographyLevels } from "@/Utils/Theme/Palette";
 import { useTheme } from "@mui/material";
 import Stack from "@mui/material/Stack";
 import { FieldLabel } from "@/Components/inputs/FieldLabel";
+import { INPUT_BASE_HEIGHT } from "@/Utils/Theme/constants";
 
 interface ColorPickerProps extends MuiColorInputProps {
 	fieldLabel?: string;
@@ -18,7 +19,7 @@ export const ColorInput = ({ fieldLabel, required, ...props }: ColorPickerProps)
 			sx={{
 				"& .MuiOutlinedInput-root": {
 					borderRadius: theme.shape.borderRadius,
-					height: 34,
+					height: INPUT_BASE_HEIGHT,
 					fontSize: typographyLevels.base,
 				},
 				"& .MuiOutlinedInput-notchedOutline": {

client/src/Components/inputs/DatePicker.tsx

@@ -8,6 +8,7 @@ import { FieldLabel } from "./FieldLabel";
 import { Calendar } from "lucide-react";
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
 import { LocalizationProvider } from "@mui/x-date-pickers";
+import { INPUT_BASE_HEIGHT } from "@/Utils/Theme/constants";
 
 interface DatePickerComponentProps extends Omit<DatePickerProps<Dayjs>, "label"> {
 	fieldLabel?: string;
@@ -55,7 +56,7 @@ export const DatePickerComponent = ({
 								flexDirection: "row-reverse",
 							},
 							"& input": {
-								minHeight: 34,
+								minHeight: INPUT_BASE_HEIGHT,
 								p: 0,
 								pl: theme.spacing(3),
 								pr: theme.spacing(5),
@@ -66,7 +67,9 @@ export const DatePickerComponent = ({
 							},
 							"&:not(:has(.Mui-disabled)):not(:has(.Mui-error)) .MuiOutlinedInput-root:not(:has(input:focus)):hover fieldset":
 								{
-									borderColor: error ? theme.palette.error.main : theme.palette.divider,
+									borderColor: error
+										? theme.palette.error.main
+										: theme.palette.text.disabled,
 								},
 						},
 					},

client/src/Components/inputs/Dialog.tsx

@@ -9,6 +9,7 @@ import { Button } from "@/Components/inputs";
 import { LAYOUT } from "@/Utils/Theme/constants";
 import { useTheme } from "@mui/material/styles";
 import { useTranslation } from "react-i18next";
+import type { SxProps } from "@mui/material/styles";
 import type { ReactNode } from "react";
 
 export const DialogInput = ({
@@ -25,6 +26,8 @@ export const DialogInput = ({
 	maxWidth,
 	fullWidth = false,
 	additionalButtons,
+	cancelSx,
+	onEscape,
 }: {
 	open: boolean;
 	title?: string;
@@ -39,6 +42,14 @@ export const DialogInput = ({
 	maxWidth?: DialogProps["maxWidth"];
 	fullWidth?: boolean;
 	additionalButtons?: ReactNode;
+	/** Styles the cancel button — e.g. an auto margin to push it left. */
+	cancelSx?: SxProps;
+	/**
+	 * Called when Escape is pressed. Defaults to `onCancel`, which is right when
+	 * cancel simply dismisses — but not when it does something else, so a dialog
+	 * whose cancel slot carries another action passes its own dismiss here.
+	 */
+	onEscape?(): void;
 }) => {
 	const { t } = useTranslation();
 	const theme = useTheme();
@@ -48,7 +59,12 @@ export const DialogInput = ({
 			maxWidth={maxWidth}
 			fullWidth={fullWidth}
 			onClose={(_event, reason) => {
-				if (reason !== "backdropClick" && onCancel) onCancel(undefined);
+				if (reason === "backdropClick") return;
+				if (onEscape) {
+					onEscape();
+					return;
+				}
+				if (onCancel) onCancel(undefined);
 			}}
 		>
 			{title && (
@@ -94,6 +110,7 @@ export const DialogInput = ({
 					loading={loading}
 					variant="outlined"
 					onClick={onCancel}
+					sx={cancelSx}
 				>
 					{cancelText ?? t("common.buttons.cancel")}
 				</Button>

client/src/Components/inputs/Radio.tsx

@@ -42,6 +42,9 @@ export const RadioWithDescription = ({
 				"& .MuiButtonBase-root": {
 					mr: theme.spacing(6),
 				},
+				"&:has(.Mui-focusVisible)": {
+					backgroundColor: theme.palette.action.hover,
+				},
 			}}
 		/>
 	);

client/src/Components/inputs/Select.tsx

@@ -6,15 +6,17 @@ import Stack from "@mui/material/Stack";
 import { FieldLabel } from "./FieldLabel";
 import { ChevronDown } from "lucide-react";
 import Typography from "@mui/material/Typography";
+import { INPUT_BASE_HEIGHT } from "@/Utils/Theme/constants";
 
 interface SelectInputProps<T> extends Omit<SelectProps<T>, "label"> {
 	fieldLabel?: string;
 	required?: boolean;
 	placeholder?: string;
+	helperText?: string;
 }
 
 const SelectInputInner = <T,>(
-	{ fieldLabel, required, placeholder, ...props }: SelectInputProps<T>,
+	{ fieldLabel, required, placeholder, helperText, ...props }: SelectInputProps<T>,
 	ref: React.ForwardedRef<HTMLDivElement>
 ) => {
 	const theme = useTheme();
@@ -27,7 +29,7 @@ const SelectInputInner = <T,>(
 			: selected === undefined || selected === null || selected === "";
 
 		if (isEmpty && placeholder) {
-			return <Typography sx={{ color: emptyPlaceholderColor }}>{placeholder}</Typography>;
+			return <Typography color={emptyPlaceholderColor}>{placeholder}</Typography>;
 		}
 
 		if (isMultiple) {
@@ -70,7 +72,7 @@ const SelectInputInner = <T,>(
 				/>
 			)}
 			sx={{
-				height: "34px",
+				height: `${INPUT_BASE_HEIGHT}px`,
 				"& .MuiSelect-select": {
 					display: "flex",
 					alignItems: "center",
@@ -82,21 +84,27 @@ const SelectInputInner = <T,>(
 				},
 				"& .MuiOutlinedInput-notchedOutline": {
 					borderRadius: theme.shape.borderRadius,
-					borderColor: theme.palette.divider,
-				},
-				"&:hover .MuiOutlinedInput-notchedOutline": {
-					borderColor: theme.palette.divider,
 				},
 				...props.sx,
 			}}
 		/>
 	);
 
-	if (fieldLabel) {
+	const helper = helperText ? (
+		<Typography
+			variant="caption"
+			color={props.error ? theme.palette.error.main : theme.palette.text.secondary}
+		>
+			{helperText}
+		</Typography>
+	) : null;
+
+	if (fieldLabel || helper) {
 		return (
 			<Stack spacing={theme.spacing(2)}>
-				<FieldLabel required={required}>{fieldLabel}</FieldLabel>
+				{fieldLabel && <FieldLabel required={required}>{fieldLabel}</FieldLabel>}
 				{select}
+				{helper}
 			</Stack>
 		);
 	}

client/src/Components/inputs/TextInput.tsx

@@ -5,7 +5,7 @@ import { typographyLevels } from "@/Utils/Theme/Palette";
 import { useTheme } from "@mui/material/styles";
 import Stack from "@mui/material/Stack";
 import { FieldLabel } from "./FieldLabel";
-import { LAYOUT } from "@/Utils/Theme/constants";
+import { INPUT_BASE_HEIGHT, LAYOUT } from "@/Utils/Theme/constants";
 
 interface TextInputProps extends Omit<TextFieldProps, "label"> {
 	fieldLabel?: string;
@@ -22,16 +22,10 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(function T
 		width: "100%",
 		"& .MuiOutlinedInput-root": {
 			borderRadius: theme.shape.borderRadius,
-			height: props.multiline ? "auto" : 34,
+			height: props.multiline ? "auto" : INPUT_BASE_HEIGHT,
 			fontSize: typographyLevels.base,
 			overflow: "hidden",
 		},
-		"& .MuiOutlinedInput-notchedOutline": {
-			borderColor: theme.palette.divider,
-		},
-		"&:hover .MuiOutlinedInput-notchedOutline": {
-			borderColor: theme.palette.divider,
-		},
 		"& .MuiFormHelperText-root": {
 			marginLeft: 0,
 			marginRight: 0,
@@ -39,7 +33,7 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(function T
 		},
 		"& input:-webkit-autofill, & input:-webkit-autofill:hover, & input:-webkit-autofill:focus, & input:-webkit-autofill:active":
 			{
-				WebkitBoxShadow: `0 0 0 100px ${theme.palette.background.default} inset !important`,
+				WebkitBoxShadow: `0 0 0 100px ${theme.palette.background.paper} inset !important`,
 				WebkitTextFillColor: `${theme.palette.text.primary} !important`,
 				caretColor: theme.palette.text.primary,
 				transition: "background-color 5000s ease-in-out 0s",

client/src/Components/inputs/TimePicker.tsx

@@ -3,18 +3,24 @@ import type { MobileTimePickerProps } from "@mui/x-date-pickers/MobileTimePicker
 import type { Dayjs } from "dayjs";
 import { useTheme } from "@mui/material/styles";
 import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
 import { FieldLabel } from "./FieldLabel";
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
 import { LocalizationProvider } from "@mui/x-date-pickers";
+import { INPUT_BASE_HEIGHT } from "@/Utils/Theme/constants";
 
 interface TimePickerComponentProps extends Omit<MobileTimePickerProps<Dayjs>, "label"> {
 	fieldLabel?: string;
 	required?: boolean;
+	error?: boolean;
+	helperText?: string;
 }
 
 export const TimePickerComponent = ({
 	fieldLabel,
 	required,
+	error,
+	helperText,
 	...props
 }: TimePickerComponentProps) => {
 	const theme = useTheme();
@@ -28,17 +34,17 @@ export const TimePickerComponent = ({
 						sx: {
 							width: "fit-content",
 							"& input": {
-								minHeight: 34,
+								minHeight: INPUT_BASE_HEIGHT,
 								p: 0,
 								px: theme.spacing(5),
 							},
 							"& fieldset": {
-								borderColor: theme.palette.divider,
+								borderColor: error ? theme.palette.error.main : theme.palette.divider,
 								borderRadius: theme.shape.borderRadius,
 							},
 							"&:not(:has(.Mui-disabled)):not(:has(.Mui-error)) .MuiOutlinedInput-root:not(:has(input:focus)):hover fieldset":
 								{
-									borderColor: theme.palette.divider,
+									borderColor: error ? theme.palette.error.main : theme.palette.divider,
 								},
 						},
 					},
@@ -48,14 +54,18 @@ export const TimePickerComponent = ({
 		</LocalizationProvider>
 	);
 
-	if (fieldLabel) {
+	return (
-		return (
+		<Stack spacing={theme.spacing(2)}>
-			<Stack spacing={theme.spacing(2)}>
+			{fieldLabel && <FieldLabel required={required}>{fieldLabel}</FieldLabel>}
-				<FieldLabel required={required}>{fieldLabel}</FieldLabel>
+			{picker}
-				{picker}
+			{helperText && (
-			</Stack>
+				<Typography
-		);
+					variant="caption"
-	}
+					color={error ? "error" : "text.secondary"}
-
+				>
-	return picker;
+					{helperText}
+				</Typography>
+			)}
+		</Stack>
+	);
 };

client/src/Components/inputs/ToggleButton.tsx

@@ -4,6 +4,7 @@ import type { ToggleButtonProps } from "@mui/material/ToggleButton";
 import type { ToggleButtonGroupProps } from "@mui/material/ToggleButtonGroup";
 import { useTheme } from "@mui/material/styles";
 import { alpha } from "@mui/material/styles";
+import { INPUT_BASE_HEIGHT } from "@/Utils/Theme/constants";
 
 export const ToggleButtonInput = ({ sx, ...props }: ToggleButtonProps) => {
 	const theme = useTheme();
@@ -20,7 +21,7 @@ export const ToggleButtonInput = ({ sx, ...props }: ToggleButtonProps) => {
 			sx={{
 				px: 8,
 				textTransform: "none",
-				height: 34,
+				height: INPUT_BASE_HEIGHT,
 				fontWeight: 400,
 				whiteSpace: "nowrap",
 				textOverflow: "ellipsis",
@@ -34,7 +35,6 @@ export const ToggleButtonInput = ({ sx, ...props }: ToggleButtonProps) => {
 				"&.Mui-selected": {
 					backgroundColor: selectedBg,
 					color: theme.palette.text.primary,
-					fontWeight: 500,
 					"&:hover": {
 						backgroundColor: selectedHoverBg,
 					},

client/src/Components/inputs/forms/FormAutoCompleteField.tsx

@@ -0,0 +1,52 @@
+import {
+	Controller,
+	useFormContext,
+	type FieldPath,
+	type FieldValues,
+} from "react-hook-form";
+import { Autocomplete } from "@/Components/inputs";
+
+export interface AutocompleteOption {
+	id: string;
+	name: string;
+}
+
+interface FormAutocompleteProps<T extends FieldValues, O extends AutocompleteOption> {
+	name: FieldPath<T>;
+	options: O[];
+	fieldLabel?: string;
+	placeholder?: string;
+}
+
+export const FormAutocompleteField = <
+	T extends FieldValues,
+	O extends AutocompleteOption,
+>({
+	name,
+	options,
+	fieldLabel,
+	placeholder,
+}: FormAutocompleteProps<T, O>) => {
+	const { control } = useFormContext<T>();
+	return (
+		<Controller
+			name={name}
+			control={control}
+			render={({ field, fieldState }) => (
+				<Autocomplete
+					options={options}
+					getOptionLabel={(option) => option.name}
+					isOptionEqualToValue={(option, value) => option.id === value.id}
+					value={options.find((o) => o.id === field.value) ?? null}
+					onChange={(_: unknown, newValue: O | null) => {
+						field.onChange(newValue?.id ?? "");
+					}}
+					fieldLabel={fieldLabel}
+					placeholder={placeholder}
+					error={!!fieldState.error}
+					helperText={fieldState.error?.message ?? ""}
+				/>
+			)}
+		/>
+	);
+};

client/src/Components/inputs/forms/FormCheckboxField.tsx

@@ -0,0 +1,38 @@
+import {
+	Controller,
+	useFormContext,
+	type FieldPath,
+	type FieldValues,
+} from "react-hook-form";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import { Checkbox } from "@/Components/inputs";
+
+interface FormCheckboxFieldProps<T extends FieldValues> {
+	name: FieldPath<T>;
+	label: string;
+}
+
+export const FormCheckboxField = <T extends FieldValues>({
+	name,
+	label,
+}: FormCheckboxFieldProps<T>) => {
+	const { control } = useFormContext<T>();
+
+	return (
+		<Controller
+			name={name}
+			control={control}
+			render={({ field }) => (
+				<FormControlLabel
+					control={
+						<Checkbox
+							checked={field.value ?? false}
+							onChange={(e) => field.onChange(e.target.checked)}
+						/>
+					}
+					label={label}
+				/>
+			)}
+		/>
+	);
+};

client/src/Components/inputs/forms/FormColorField.tsx

@@ -0,0 +1,35 @@
+import {
+	Controller,
+	useFormContext,
+	type FieldPath,
+	type FieldValues,
+} from "react-hook-form";
+import { ColorInput } from "@/Components/inputs";
+
+interface FormColorFieldProps<T extends FieldValues> {
+	name: FieldPath<T>;
+	fieldLabel?: string;
+}
+
+export const FormColorField = <T extends FieldValues>({
+	name,
+	fieldLabel,
+}: FormColorFieldProps<T>) => {
+	const { control } = useFormContext<T>();
+	return (
+		<Controller
+			name={name}
+			control={control}
+			render={({ field, fieldState }) => (
+				<ColorInput
+					format="hex"
+					value={field.value}
+					onChange={field.onChange}
+					fieldLabel={fieldLabel}
+					error={!!fieldState.error}
+					helperText={fieldState.error?.message ?? ""}
+				/>
+			)}
+		/>
+	);
+};

client/src/Components/inputs/forms/FormDateTimePickerField.tsx

@@ -0,0 +1,81 @@
+import {
+	Controller,
+	useFormContext,
+	type FieldPath,
+	type FieldValues,
+} from "react-hook-form";
+import dayjs, { type Dayjs } from "dayjs";
+import { DatePicker, TimePicker } from "@/Components/inputs";
+
+export interface FormPickerFieldProps<T extends FieldValues> {
+	name: FieldPath<T>;
+	fieldLabel?: string;
+	format?: string;
+	onValueChange?: (value: string) => void; // e.g. () => trigger("startDate")
+}
+
+interface DayjsPickerProps {
+	fieldLabel?: string;
+	value: Dayjs | null;
+	onChange: (value: Dayjs | null) => void;
+	error?: boolean;
+	helperText?: string;
+}
+
+interface FormDayjsPickerFieldProps<
+	T extends FieldValues,
+> extends FormPickerFieldProps<T> {
+	picker: React.ComponentType<DayjsPickerProps>;
+	format: string;
+}
+
+const FormDayjsPickerField = <T extends FieldValues>({
+	name,
+	fieldLabel,
+	format,
+	onValueChange,
+	picker: Picker,
+}: FormDayjsPickerFieldProps<T>) => {
+	const { control } = useFormContext<T>();
+	return (
+		<Controller
+			name={name}
+			control={control}
+			render={({ field, fieldState }) => (
+				<Picker
+					fieldLabel={fieldLabel}
+					value={field.value ? dayjs(field.value, format) : null}
+					onChange={(value) => {
+						const next = value ? value.format(format) : "";
+						field.onChange(next);
+						onValueChange?.(next);
+					}}
+					error={!!fieldState.error}
+					helperText={fieldState.error?.message}
+				/>
+			)}
+		/>
+	);
+};
+
+export const FormDatePickerField = <T extends FieldValues>({
+	format = "YYYY-MM-DD",
+	...rest
+}: FormPickerFieldProps<T>) => (
+	<FormDayjsPickerField
+		{...rest}
+		format={format}
+		picker={DatePicker}
+	/>
+);
+
+export const FormTimePickerField = <T extends FieldValues>({
+	format = "HH:mm",
+	...rest
+}: FormPickerFieldProps<T>) => (
+	<FormDayjsPickerField
+		{...rest}
+		format={format}
+		picker={TimePicker}
+	/>
+);

client/src/Components/inputs/forms/FormMultiSelectField.tsx

@@ -0,0 +1,187 @@
+import { useMemo } from "react";
+import {
+	Controller,
+	useFormContext,
+	type FieldPath,
+	type FieldValues,
+} from "react-hook-form";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import IconButton from "@mui/material/IconButton";
+import { useTheme } from "@mui/material/styles";
+import { Trash2, GripVertical } from "lucide-react";
+import { DragDropContext, Droppable, Draggable } from "@hello-pangea/dnd";
+import type { DropResult } from "@hello-pangea/dnd";
+import { useTranslation } from "react-i18next";
+import { Autocomplete } from "@/Components/inputs";
+import { SPACING, LAYOUT } from "@/Utils/Theme/constants";
+
+export interface MultiSelectOption {
+	id: string | number;
+	name: string;
+}
+
+interface FormMultiSelectFieldProps<T extends FieldValues, O extends MultiSelectOption> {
+	name: FieldPath<T>;
+	options: O[];
+	fieldLabel?: string;
+	placeholder?: string;
+	description?: string;
+	renderRow?: (option: O) => React.ReactNode;
+	renderOptionContent?: (option: O) => React.ReactNode;
+	sortable?: boolean;
+}
+
+export const FormMultiSelectField = <T extends FieldValues, O extends MultiSelectOption>({
+	name,
+	options,
+	fieldLabel,
+	placeholder,
+	description,
+	renderRow,
+	renderOptionContent,
+	sortable = false,
+}: FormMultiSelectFieldProps<T, O>) => {
+	const { control } = useFormContext<T>();
+	const theme = useTheme();
+	const { t } = useTranslation();
+	const optionsById = useMemo(
+		() => new Map<O["id"], O>(options.map((o) => [o.id, o])),
+		[options]
+	);
+	return (
+		<Controller
+			name={name}
+			control={control}
+			render={({ field, fieldState }) => {
+				const selectedIds: O["id"][] = field.value ?? [];
+				const selected = selectedIds
+					.map((id) => optionsById.get(id))
+					.filter((o): o is O => o !== undefined);
+
+				const handleDragEnd = (result: DropResult) => {
+					if (!result.destination) return;
+					const reordered = selected.map((o) => o.id);
+					const [moved] = reordered.splice(result.source.index, 1);
+					reordered.splice(result.destination.index, 0, moved);
+					const unresolved = selectedIds.filter((id) => !optionsById.has(id));
+					field.onChange([...reordered, ...unresolved]);
+				};
+
+				const rowContent = (option: O) =>
+					renderRow ? (
+						renderRow(option)
+					) : (
+						<Typography flexGrow={1}>{option.name}</Typography>
+					);
+
+				const removeButton = (option: O) => (
+					<IconButton
+						size="small"
+						onClick={() => {
+							field.onChange(selectedIds.filter((id) => id !== option.id));
+						}}
+						aria-label={t("common.buttons.removeItem", { item: option.name })}
+					>
+						<Trash2 size={16} />
+					</IconButton>
+				);
+
+				return (
+					<Stack spacing={theme.spacing(LAYOUT.MD)}>
+						<Autocomplete
+							multiple
+							autoHighlight
+							options={options}
+							value={selected}
+							getOptionLabel={(option) => option.name}
+							isOptionEqualToValue={(option, value) => option.id === value.id}
+							onChange={(_: unknown, newValue: O[]) => {
+								// The Autocomplete only sees resolved options, so ids missing
+								// from options must be re-appended or they'd be silently
+								// dropped (e.g. a role excluded from the selectable list).
+								const unresolved = selectedIds.filter((id) => !optionsById.has(id));
+								field.onChange([...newValue.map((o) => o.id), ...unresolved]);
+							}}
+							fieldLabel={fieldLabel}
+							placeholder={selected.length > 0 ? "" : placeholder}
+							renderOptionContent={renderOptionContent}
+							error={!!fieldState.error}
+							helperText={fieldState.error?.message ?? ""}
+						/>
+						{description && (
+							<Typography
+								component="span"
+								color={theme.palette.text.secondary}
+								sx={{ opacity: 0.8 }}
+							>
+								{description}
+							</Typography>
+						)}
+						{sortable
+							? selected.length > 0 && (
+									<DragDropContext onDragEnd={handleDragEnd}>
+										<Droppable droppableId={`${name}-list`}>
+											{(provided) => (
+												<Stack
+													{...provided.droppableProps}
+													ref={provided.innerRef}
+												>
+													{selected.map((option, index) => (
+														<Draggable
+															key={option.id}
+															draggableId={String(option.id)}
+															index={index}
+														>
+															{(provided) => (
+																<Stack
+																	ref={provided.innerRef}
+																	{...provided.draggableProps}
+																	{...provided.dragHandleProps}
+																	direction="row"
+																	alignItems="center"
+																	spacing={theme.spacing(LAYOUT.XS)}
+																	padding={theme.spacing(LAYOUT.XS)}
+																	marginTop={theme.spacing(SPACING.LG)}
+																	borderRadius={1}
+																	border={`1px solid ${theme.palette.divider}`}
+																	sx={{
+																		cursor: "grab",
+																		"&:active": { cursor: "grabbing" },
+																	}}
+																>
+																	<GripVertical size={20} />
+																	{rowContent(option)}
+																	{removeButton(option)}
+																</Stack>
+															)}
+														</Draggable>
+													))}
+													{provided.placeholder}
+												</Stack>
+											)}
+										</Droppable>
+									</DragDropContext>
+								)
+							: selected.map((option) => (
+									<Stack
+										key={option.id}
+										direction="row"
+										alignItems="center"
+										spacing={theme.spacing(LAYOUT.XS)}
+										padding={theme.spacing(LAYOUT.XS)}
+										marginTop={theme.spacing(SPACING.LG)}
+										borderRadius={1}
+										border={`1px solid ${theme.palette.divider}`}
+										width="100%"
+									>
+										{rowContent(option)}
+										{removeButton(option)}
+									</Stack>
+								))}
+					</Stack>
+				);
+			}}
+		/>
+	);
+};

client/src/Components/inputs/forms/FormNumberField.tsx

@@ -0,0 +1,46 @@
+import {
+	Controller,
+	useFormContext,
+	type FieldPath,
+	type FieldValues,
+} from "react-hook-form";
+import { TextField } from "@/Components/inputs";
+
+interface FormNumberFieldProps<T extends FieldValues> extends Omit<
+	React.ComponentProps<typeof TextField>,
+	"name" | "error" | "helperText" | "type"
+> {
+	name: FieldPath<T>;
+	emptyValue?: number; // what an empty input writes to the form; 0 keeps today's sentinel
+}
+
+export const FormNumberField = <T extends FieldValues>({
+	name,
+	emptyValue = 0,
+	...rest
+}: FormNumberFieldProps<T>) => {
+	const { control } = useFormContext<T>();
+	return (
+		<Controller
+			name={name}
+			control={control}
+			render={({ field, fieldState }) => (
+				<TextField
+					{...field}
+					type="number"
+					value={
+						field.value === undefined || field.value === emptyValue ? "" : field.value
+					}
+					onChange={(e) => {
+						const val = e.target.value;
+						field.onChange(val === "" ? emptyValue : Number(val));
+					}}
+					error={!!fieldState.error}
+					helperText={fieldState.error?.message ?? ""}
+					fullWidth
+					{...rest}
+				/>
+			)}
+		/>
+	);
+};

client/src/Components/inputs/forms/FormRadioGroupField.tsx

@@ -0,0 +1,54 @@
+import { RadioGroup, useTheme } from "@mui/material";
+import FormControl from "@mui/material/FormControl";
+import {
+	Controller,
+	useFormContext,
+	type FieldPath,
+	type FieldValues,
+} from "react-hook-form";
+import { LAYOUT } from "@/Utils/Theme/constants";
+import { RadioWithDescription } from "@/Components/inputs/Radio";
+import { FieldLabel } from "@/Components/inputs/FieldLabel";
+export interface FormRadioOption {
+	value: string;
+	label: string;
+	description: string;
+}
+
+interface FormRadioGroupProps<T extends FieldValues> {
+	name: FieldPath<T>;
+	options: FormRadioOption[];
+	fieldLabel?: string;
+}
+export const FormRadioGroup = <T extends FieldValues>({
+	name,
+	options,
+	fieldLabel,
+}: FormRadioGroupProps<T>) => {
+	const { control } = useFormContext<T>();
+	const theme = useTheme();
+	return (
+		<Controller
+			name={name}
+			control={control}
+			render={({ field, fieldState }) => (
+				<FormControl error={!!fieldState.error}>
+					{fieldLabel && <FieldLabel>{fieldLabel}</FieldLabel>}
+					<RadioGroup
+						{...field}
+						sx={{ gap: theme.spacing(LAYOUT.MD) }}
+					>
+						{options.map((option) => (
+							<RadioWithDescription
+								key={option.value}
+								value={option.value}
+								label={option.label}
+								description={option.description}
+							/>
+						))}
+					</RadioGroup>
+				</FormControl>
+			)}
+		/>
+	);
+};

client/src/Components/inputs/forms/FormSelectField.tsx

@@ -0,0 +1,61 @@
+import {
+	Controller,
+	useFormContext,
+	type FieldValues,
+	type FieldPath,
+} from "react-hook-form";
+import MenuItem from "@mui/material/MenuItem";
+import { Select } from "@/Components/inputs";
+
+export interface FormSelectOption {
+	value: string | number;
+	label: string;
+}
+
+interface FormSelectProps<T extends FieldValues> extends Omit<
+	React.ComponentProps<typeof Select>,
+	"name" | "error" | "value" | "onChange"
+> {
+	name: FieldPath<T>;
+	options: FormSelectOption[];
+	fallbackValue?: string | number; // display value while the field is undefined
+	onValueChange?: (value: string | number) => void; // side effects, see Notes
+}
+
+export const FormSelectField = <T extends FieldValues>({
+	name,
+	options,
+	fallbackValue,
+	onValueChange,
+	...rest
+}: FormSelectProps<T>) => {
+	const { control } = useFormContext<T>();
+	return (
+		<Controller
+			name={name}
+			control={control}
+			render={({ field, fieldState }) => (
+				<Select
+					{...field}
+					value={field.value ?? fallbackValue ?? ""}
+					onChange={(e) => {
+						field.onChange(e.target.value);
+						onValueChange?.(e.target.value as string | number);
+					}}
+					error={!!fieldState.error}
+					{...rest}
+					helperText={fieldState.error?.message ?? rest.helperText}
+				>
+					{options.map((option) => (
+						<MenuItem
+							key={option.value}
+							value={option.value}
+						>
+							{option.label}
+						</MenuItem>
+					))}
+				</Select>
+			)}
+		/>
+	);
+};

client/src/Components/inputs/forms/FormSliderField.tsx

@@ -0,0 +1,34 @@
+import {
+	Controller,
+	useFormContext,
+	type FieldPath,
+	type FieldValues,
+} from "react-hook-form";
+import { SliderWithLabel } from "@/Components/inputs";
+
+interface FormSliderProps<T extends FieldValues> extends Omit<
+	React.ComponentProps<typeof SliderWithLabel>,
+	"name" | "value" | "onChange"
+> {
+	name: FieldPath<T>;
+}
+
+export const FormSliderField = <T extends FieldValues>({
+	name,
+	...rest
+}: FormSliderProps<T>) => {
+	const { control } = useFormContext<T>();
+	return (
+		<Controller
+			name={name}
+			control={control}
+			render={({ field }) => (
+				<SliderWithLabel
+					{...field}
+					sliderMaxWidth={{ xs: "100%", md: "50%" }}
+					{...rest}
+				/>
+			)}
+		/>
+	);
+};

client/src/Components/inputs/forms/FormSwitchField.tsx

@@ -0,0 +1,59 @@
+import {
+	Controller,
+	useFormContext,
+	type FieldPath,
+	type FieldValues,
+} from "react-hook-form";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import { useTheme } from "@mui/material/styles";
+import { SwitchComponent } from "@/Components/inputs";
+import { SPACING } from "@/Utils/Theme/constants";
+
+interface FormSwitchProps<T extends FieldValues> {
+	name: FieldPath<T>;
+	label: string;
+	labelPlacement?: "start" | "end"; // left | right
+}
+
+export const FormSwitchField = <T extends FieldValues>({
+	name,
+	label,
+	labelPlacement = "end",
+}: FormSwitchProps<T>) => {
+	const { control } = useFormContext<T>();
+	const theme = useTheme();
+
+	return (
+		<Controller
+			name={name}
+			control={control}
+			render={({ field }) => (
+				<Stack
+					direction="row"
+					alignItems="center"
+					spacing={labelPlacement === "start" ? undefined : theme.spacing(SPACING.LG)}
+					justifyContent={labelPlacement === "start" ? "space-between" : undefined}
+				>
+					{labelPlacement === "start" ? (
+						<>
+							<Typography>{label}</Typography>
+							<SwitchComponent
+								checked={field.value ?? false}
+								onChange={(e) => field.onChange(e.target.checked)}
+							/>
+						</>
+					) : (
+						<>
+							<SwitchComponent
+								checked={field.value ?? false}
+								onChange={(e) => field.onChange(e.target.checked)}
+							/>
+							<Typography>{label}</Typography>
+						</>
+					)}
+				</Stack>
+			)}
+		/>
+	);
+};

client/src/Components/inputs/forms/FormTextField.tsx

@@ -0,0 +1,40 @@
+import {
+	Controller,
+	useFormContext,
+	type FieldPath,
+	type FieldValues,
+} from "react-hook-form";
+
+import { TextField } from "@/Components/inputs";
+
+interface FormTextFieldProps<T extends FieldValues> extends Omit<
+	React.ComponentProps<typeof TextField>,
+	"name" | "error" | "helperText"
+> {
+	name: FieldPath<T>;
+	helperText?: string;
+}
+
+export const FormTextField = <T extends FieldValues>({
+	name,
+	...rest
+}: FormTextFieldProps<T>) => {
+	const { control } = useFormContext<T>();
+	return (
+		<Controller
+			name={name}
+			control={control}
+			render={({ field, fieldState }) => (
+				<TextField
+					{...field}
+					type="text"
+					{...rest}
+					value={field.value ?? ""}
+					error={!!fieldState.error}
+					helperText={fieldState.error?.message ?? rest.helperText ?? ""}
+					fullWidth
+				/>
+			)}
+		/>
+	);
+};

client/src/Components/layout/RootLayout.tsx

@@ -18,15 +18,13 @@ const RootLayout = () => {
 				flex={1}
 				padding={6}
 				overflow={"hidden"}
-				sx={{
+				bgcolor={
-					backgroundColor:
+					theme.palette.mode === "dark"
-						theme.palette.mode === "dark"
+						? "rgba(255, 255, 255, 0.01)"
-							? "rgba(255, 255, 255, 0.01)"
+						: "rgba(124, 116, 116, 0.01)"
-							: "rgba(0, 0, 0, 0.01)",
+				}
-					display: "flex",
+				alignItems="center"
-					alignItems: "center",
+				paddingLeft={isSmall ? `${collapsedWidth + 12}px` : 12}
-					paddingLeft: isSmall ? `${collapsedWidth + 12}px` : 12,
-				}}
 			>
 				<Stack
 					maxWidth={1280}

client/src/Components/monitors/ControlsFilter.tsx

@@ -9,12 +9,11 @@ import type { Tag } from "@/Types/Tag";
 import { Typography, useTheme } from "@mui/material";
 import { useTranslation } from "react-i18next";
 
-const types = ["http", "ping", "port", "docker", "game", "grpc", "websocket"];
+const types = ["http", "ping", "port", "game", "grpc", "websocket"];
 const typeDisplayNames: Record<string, string> = {
 	http: "HTTP",
 	ping: "Ping",
 	port: "Port",
-	docker: "Docker",
 	game: "Game",
 	grpc: "gRPC",
 	websocket: "WebSocket",

client/src/Components/monitors/GeoChecksMap.tsx

@@ -6,6 +6,7 @@ import type { FlatGeoCheck } from "@/Types/GeoCheck";
 import { useTranslation } from "react-i18next";
 import { formatStatusCode } from "@/Utils/statusCode";
 import "maplibre-gl/dist/maplibre-gl.css";
+import { formatMs } from "@/Utils/TimeUtils";
 
 interface GeoChecksMapProps {
 	geoChecks: FlatGeoCheck[];
@@ -83,10 +84,6 @@ export const GeoChecksMap = ({ geoChecks }: GeoChecksMapProps) => {
 		return status ? theme.palette.success.main : theme.palette.error.main;
 	};
 
-	const formatResponseTime = (timing: number): string => {
-		return `${timing.toFixed(0)}ms`;
-	};
-
 	return (
 		<>
 			{mapPopupStyles}
@@ -186,7 +183,7 @@ export const GeoChecksMap = ({ geoChecks }: GeoChecksMapProps) => {
 										>
 											Response Time:
 										</Typography>{" "}
-										{formatResponseTime(selectedCheck.timings.total)}
+										{formatMs(selectedCheck.timings.total)}
 									</Typography>
 									<Typography
 										variant="caption"

client/src/Components/monitors/MonitorListPage.tsx

@@ -0,0 +1,156 @@
+import { HeaderCreate } from "@/Components/common";
+import { ColoredLabel, MonitorBasePageWithStates } from "@/Components/design-elements";
+import { BulkActionsBar } from "@/Components/monitors/BulkActionsBar";
+import { ControlsFilter } from "@/Components/monitors/ControlsFilter";
+import { HeaderMonitorsSummary } from "@/Components/monitors/HeaderMonitorsSummary";
+import { useIsAdmin } from "@/Hooks/useIsAdmin";
+import type { MonitorListController } from "@/Hooks/useMonitorListController";
+import { useMediaQuery, useTheme } from "@mui/material";
+import { SPACING } from "@/Utils/Theme/constants";
+
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import { TextField, Button, Dialog } from "@/Components/inputs";
+import type { ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+import { Pause, Play } from "lucide-react";
+
+interface MonitorListPageProps {
+	headerKey: string;
+	page: string;
+	actionLink: string;
+	controller: MonitorListController;
+	bulkActions?: boolean;
+	showTypeFilter?: boolean;
+	summaryProps?: { showBreached?: boolean };
+	priorityFallback?: ReactNode;
+	extraLoading?: boolean;
+	extraError?: unknown;
+	children: ReactNode;
+}
+
+// Base monitor list page, all monitors pages are nearly identical, but with different tables.
+
+export const MonitorListPage = ({
+	headerKey,
+	page,
+	actionLink,
+	controller,
+	bulkActions,
+	showTypeFilter,
+	summaryProps,
+	priorityFallback,
+	extraLoading,
+	extraError,
+	children,
+}: MonitorListPageProps) => {
+	const { t } = useTranslation();
+	const theme = useTheme();
+	const isSmall = useMediaQuery(theme.breakpoints.down("md"));
+	const isAdmin = useIsAdmin();
+	const isLoading = controller.isLoading || Boolean(extraLoading);
+
+	return (
+		<MonitorBasePageWithStates
+			headerKey={headerKey}
+			loading={isLoading}
+			error={controller.error || extraError}
+			totalCount={controller.effectiveTotalCount}
+			page={page}
+			actionLink={actionLink}
+			priorityFallback={priorityFallback}
+		>
+			<HeaderCreate
+				path={actionLink}
+				isLoading={isLoading}
+				isAdmin={isAdmin}
+			/>
+			<HeaderMonitorsSummary
+				summary={controller.summary}
+				{...summaryProps}
+			/>
+			<Stack
+				direction={isSmall ? "column" : "row"}
+				justifyContent={isSmall ? "flex-start" : "space-between"}
+				gap={theme.spacing(4)}
+			>
+				<ControlsFilter
+					{...(showTypeFilter === false
+						? { showTypes: false }
+						: {
+								selectedTypes: controller.selectedTypes,
+								setSelectedTypes: controller.setSelectedTypes,
+							})}
+					selectedStatus={controller.selectedStatus}
+					setSelectedStatus={controller.setSelectedStatus}
+					selectedState={controller.selectedState}
+					setSelectedState={controller.setSelectedState}
+					tagOptions={controller.tags ?? []}
+					selectedTags={controller.selectedTags}
+					setSelectedTags={controller.setSelectedTags}
+					onClearFilters={controller.handleClearFilters}
+				/>
+				<TextField
+					placeholder={t("pages.uptime.filters.search.placeholder")}
+					value={controller.search}
+					onChange={(event) => {
+						controller.setSearch(event.target.value);
+					}}
+				/>
+			</Stack>
+			{controller.selectedTags.length > 0 && (
+				<Stack
+					direction={isSmall ? "column" : "row"}
+					alignItems={isSmall ? "flex-start" : "center"}
+					flexWrap="wrap"
+					gap={theme.spacing(SPACING.XL)}
+				>
+					<Typography color={theme.palette.text.secondary}>
+						{t("pages.uptime.filters.activeTags")}
+					</Typography>
+					{controller.selectedTags.map((tagId) => {
+						const tag = controller.tags?.find((t) => t.id === tagId);
+						if (!tag) return null;
+						return (
+							<ColoredLabel
+								key={tag.id}
+								text={tag.name}
+								color={tag.color}
+							/>
+						);
+					})}
+				</Stack>
+			)}
+			{bulkActions && !isLoading && (
+				<BulkActionsBar
+					selectedCount={controller.selectedRows.length}
+					onCancel={controller.handleCancelSelection}
+				>
+					<Button
+						size="small"
+						startIcon={<Play size={16} />}
+						onClick={controller.handleBulkResume}
+					>
+						{t("common.buttons.resume")}
+					</Button>
+					<Button
+						size="small"
+						startIcon={<Pause size={16} />}
+						onClick={controller.handleBulkPause}
+					>
+						{t("common.buttons.pause")}
+					</Button>
+				</BulkActionsBar>
+			)}
+			{children}
+			<Dialog
+				open={controller.isDialogOpen}
+				title={t("common.dialogs.delete.title")}
+				content={t("common.dialogs.delete.description")}
+				onConfirm={controller.handleConfirmDelete}
+				onCancel={controller.handleCancelDelete}
+				loading={controller.isDeleting}
+			/>
+		</MonitorBasePageWithStates>
+	);
+};

client/src/Components/monitors/MonitorStatBoxes.tsx

@@ -1,22 +1,24 @@
 import Stack from "@mui/material/Stack";
 import { StatBox } from "@/Components/design-elements";
 
-import prettyMilliseconds from "pretty-ms";
 import { useTheme } from "@mui/material/styles";
 import type { MonitorStats, Monitor } from "@/Types/Monitor";
 import { getStatusPalette } from "@/Utils/MonitorUtils";
 import { useTranslation } from "react-i18next";
+import { formatMs, formatDuration } from "@/Utils/TimeUtils";
 
 interface MonitorStatBoxesProps {
 	monitor?: Monitor;
 	monitorStats: MonitorStats | null;
 	certificateExpiry?: string;
+	domainExpiry?: string;
 }
 
 export const MonitorStatBoxes = ({
 	monitor,
 	monitorStats,
 	certificateExpiry,
+	domainExpiry,
 }: MonitorStatBoxesProps) => {
 	const theme = useTheme();
 	const { t } = useTranslation();
@@ -31,14 +33,9 @@ export const MonitorStatBoxes = ({
 	const timeOfLastCheck = monitorStats?.lastCheckTimestamp || 0;
 	const timeSinceLastCheck = Date.now() - timeOfLastCheck || 0;
 
-	const options = {
+	const streakTime = formatDuration(timeSinceLastFailure);
-		secondsDecimalDigits: 0,
-		millisecondsDecimalDigits: 0,
-	};
 
-	const streakTime = prettyMilliseconds(timeSinceLastFailure, options);
+	const lastCheckTime = formatDuration(timeSinceLastCheck);
-
-	const lastCheckTime = prettyMilliseconds(timeSinceLastCheck, options);
 	const isActive =
 		monitor?.status === "up" ||
 		monitor?.status === "paused" ||
@@ -67,14 +64,20 @@ export const MonitorStatBoxes = ({
 			/>
 			<StatBox
 				title={t("pages.common.monitors.statBoxes.lastResponseTime")}
-				subtitle={prettyMilliseconds(monitorStats?.lastResponseTime ?? 0)}
+				subtitle={formatMs(monitorStats?.lastResponseTime ?? 0)}
 			/>
 
 			{monitor?.type === "http" && (
-				<StatBox
+				<>
-					title={t("pages.common.monitors.statBoxes.certificateExpiry")}
+					<StatBox
-					subtitle={certificateExpiry || "N/A"}
+						title={t("pages.common.monitors.statBoxes.certificateExpiry")}
-				/>
+						subtitle={certificateExpiry || "N/A"}
+					/>
+					<StatBox
+						title={t("pages.common.monitors.statBoxes.domainExpiry")}
+						subtitle={domainExpiry || "N/A"}
+					/>
+				</>
 			)}
 		</Stack>
 	);

client/src/Components/monitors/charts/ChartUtils.tsx

@@ -0,0 +1,113 @@
+export const computeYAxisCap = (values: number[]): number | undefined => {
+	const sorted = values.slice().sort((a, b) => a - b);
+	if (sorted.length < 2) return undefined;
+	const p95 = sorted[Math.min(sorted.length - 1, Math.floor(sorted.length * 0.95))];
+	return p95 > 0 ? Math.ceil(p95 * 2) : undefined;
+};
+
+export const PHASE_KEYS = [
+	"avgDns",
+	"avgTcp",
+	"avgTls",
+	"avgRequest",
+	"avgFirstByte",
+	"avgDownload",
+] as const;
+
+export const PHASE_COLOR_KEYS = {
+	avgDns: "dns",
+	avgTcp: "tcp",
+	avgTls: "tls",
+	avgRequest: "request",
+	avgFirstByte: "firstByte",
+	avgDownload: "download",
+} as const;
+
+// i18n keys, resolved with t() at render
+export const PHASE_LABEL_KEYS: Record<(typeof PHASE_KEYS)[number], string> = {
+	avgDns: "common.charts.phases.dns",
+	avgTcp: "common.charts.phases.tcp",
+	avgTls: "common.charts.phases.tls",
+	avgRequest: "common.charts.phases.request",
+	avgFirstByte: "common.charts.phases.firstByte",
+	avgDownload: "common.charts.phases.download",
+};
+
+export const AREA_COLORS = [
+	// Blues
+	"#3182bd", // Deep blue
+	"#6baed6", // Medium blue
+	"#9ecae1", // Light blue
+
+	// Greens
+	"#74c476", // Soft green
+	"#a1d99b", // Light green
+	"#c7e9c0", // Pale green
+
+	// Oranges
+	"#fdae6b", // Warm orange
+	"#fdd0a2", // Light orange
+	"#feedde", // Pale orange
+
+	// Purples
+	"#9467bd", // Lavender
+	"#a55194", // Deep magenta
+	"#c994c7", // Soft magenta
+
+	// Reds
+	"#ff9896", // Soft red
+	"#de2d26", // Deep red
+	"#fc9272", // Medium red
+
+	// Cyans/Teals
+	"#17becf", // Cyan
+	"#7fcdbb", // Teal
+	"#a1dab4", // Light teal
+
+	// Yellows
+	"#fec44f", // Mustard
+	"#fee391", // Light yellow
+	"#ffffd4", // Pale yellow
+
+	// Additional colors
+	"#e377c2", // Soft pink
+	"#bcbd22", // Olive
+	"#2ca02c", // Vibrant green
+];
+
+export const createGradient = ({
+	id,
+	startColor,
+	endColor,
+	startOpacity = 0.8,
+	endOpacity = 0,
+	direction = "vertical",
+}: {
+	id: string;
+	startColor: string;
+	endColor: string;
+	startOpacity?: number;
+	endOpacity?: number;
+	direction?: "vertical" | "horizontal";
+}) => (
+	<defs>
+		<linearGradient
+			id={id}
+			x1={direction === "vertical" ? "0" : "0"}
+			y1={direction === "vertical" ? "0" : "0"}
+			x2={direction === "vertical" ? "0" : "1"}
+			y2={direction === "vertical" ? "1" : "0"}
+		>
+			<stop
+				offset="0%"
+				stopColor={startColor}
+				stopOpacity={startOpacity}
+			/>
+			<stop
+				offset="100%"
+				stopColor={endColor}
+				stopOpacity={endOpacity}
+			/>
+		</linearGradient>
+	</defs>
+);

client/src/Components/monitors/charts/HistogramDetails.tsx

@@ -1,53 +1,39 @@
+import Stack from "@mui/material/Stack";
 import { BaseChart, BaseBox } from "@/Components/design-elements";
 import { Clock } from "lucide-react";
+import { Dot } from "@/Components/design-elements";
 import {
 	AreaChart,
 	Area,
 	XAxis,
+	YAxis,
 	Tooltip,
 	CartesianGrid,
 	ResponsiveContainer,
-	Text,
 } from "recharts";
 import type { TooltipProps } from "recharts";
 import type { NameType, ValueType } from "recharts/types/component/DefaultTooltipContent";
 import Typography from "@mui/material/Typography";
-
+import { XTick } from "@/Components/monitors/charts/XTick";
 import { useSelector } from "react-redux";
-import {
+import { useTranslation } from "react-i18next";
-	formatDateWithTz,
+import { formatDateWithTz, formatMs, tooltipDateFormatLookup } from "@/Utils/TimeUtils";
-	tickDateFormatLookup,
-	tooltipDateFormatLookup,
-} from "@/Utils/TimeUtils";
 import { useTheme } from "@mui/material/styles";
 import type { Theme } from "@mui/material/styles";
-import type { GroupedCheck } from "@/Types/Check";
+import type { GroupedCheck, GroupedUptimeCheck } from "@/Types/Check";
 import type { RootState } from "@/Types/state";
+import { computeYAxisCap } from "@/Components/monitors/charts/ChartUtils";
 
-type XTickProps = {
+import { useMemo, useState } from "react";
-	x: number;
+import { LAYOUT, SPACING } from "@/Utils/Theme/constants";
-	y: number;
+import {
-	payload: { value: string };
+	PHASE_COLOR_KEYS,
-	range: string;
+	PHASE_KEYS,
-};
+	PHASE_LABEL_KEYS,
+} from "@/Components/monitors/charts/ChartUtils";
 
-export const XTick = ({ x, y, payload, range }: XTickProps) => {
+type DetailsCheck = GroupedCheck &
-	const format = tickDateFormatLookup(range);
+	Partial<Pick<GroupedUptimeCheck, (typeof PHASE_KEYS)[number]>>;
-	const theme = useTheme();
-	const uiTimezone = useSelector((state: RootState) => state.ui.timezone);
-	return (
-		<Text
-			x={x}
-			y={y + 10}
-			textAnchor="middle"
-			fill={theme.palette.text.secondary}
-			fontSize={11}
-			fontWeight={400}
-		>
-			{formatDateWithTz(payload?.value, format, uiTimezone)}
-		</Text>
-	);
-};
 
 type ResponseTimeToolTipProps = TooltipProps<ValueType, NameType> & {
 	range: string;
@@ -63,17 +49,65 @@ const ResponseTimeToolTip = ({
 	theme,
 	uiTimezone,
 }: ResponseTimeToolTipProps) => {
+	const { t } = useTranslation();
 	if (!label) return null;
 	if (!payload) return null;
 	if (!active) return null;
 
 	const format = tooltipDateFormatLookup(range);
-	console.log(payload);
+	const responseTime = payload[0]?.payload?.avgResponseTime ?? 0;
-	const responseTime = Math.floor(payload[0]?.payload?.originalAvgResponseTime || 0);
 	return (
 		<BaseBox sx={{ py: theme.spacing(2), px: theme.spacing(4) }}>
 			<Typography>{formatDateWithTz(String(label), format, uiTimezone)}</Typography>
-			<Typography>Response time: {responseTime} ms</Typography>
+			<Typography>
+				{t("common.charts.histogram.responseTime", {
+					value: formatMs(responseTime),
+				})}
+			</Typography>
+		</BaseBox>
+	);
+};
+
+type TimingPhaseToolTipProps = TooltipProps<ValueType, NameType> & {
+	range: string;
+	theme: Theme;
+	uiTimezone: string;
+};
+
+const TimingPhasesToolTip = ({
+	active,
+	payload,
+	range,
+	theme,
+	uiTimezone,
+}: TimingPhaseToolTipProps) => {
+	const { t } = useTranslation();
+	if (!active || !payload?.length) return null;
+	const bucket = payload[0].payload as GroupedUptimeCheck;
+	const total = PHASE_KEYS.reduce((sum, key) => sum + bucket[key], 0);
+	const format = tooltipDateFormatLookup(range);
+	return (
+		<BaseBox sx={{ py: theme.spacing(2), px: theme.spacing(4) }}>
+			<Typography>{formatDateWithTz(bucket.bucketDate, format, uiTimezone)}</Typography>
+			<Typography>
+				{t("common.charts.histogram.total", { value: formatMs(total) })}
+			</Typography>
+			{PHASE_KEYS.map((key) => (
+				<Stack
+					alignItems={"center"}
+					direction="row"
+					key={key}
+					gap={SPACING.LG}
+				>
+					<Dot
+						size="lg"
+						color={theme.palette.chart.phases[PHASE_COLOR_KEYS[key]]}
+					/>
+					<Typography>
+						{t(PHASE_LABEL_KEYS[key])}: {formatMs(bucket[key])}
+					</Typography>
+				</Stack>
+			))}
 		</BaseBox>
 	);
 };
@@ -82,11 +116,28 @@ export const HistogramDetails = ({
 	checks,
 	range,
 }: {
-	checks: GroupedCheck[];
+	checks: DetailsCheck[];
 	range: string;
 }) => {
+	const [showTimingPhases, setShowTimingPhases] = useState(false);
+	const [hoveredPhase, setHoveredPhase] = useState<string | null>(null);
+
+	const { t } = useTranslation();
 	const theme = useTheme();
 	const uiTimezone = useSelector((state: RootState) => state.ui.timezone);
+	const yMax = useMemo(() => {
+		const totals = checks.map((check) => {
+			const phaseSum = PHASE_KEYS.reduce((sum, key) => sum + (check[key] ?? 0), 0);
+			return Math.max(check.avgResponseTime ?? 0, phaseSum);
+		});
+		return computeYAxisCap(totals);
+	}, [checks]);
+
+	const hasTimingPhases = useMemo(
+		() => (checks ?? []).some((check) => PHASE_KEYS.some((key) => (check[key] ?? 0) > 0)),
+		[checks]
+	);
+
 	return (
 		<BaseChart
 			icon={
@@ -95,7 +146,15 @@ export const HistogramDetails = ({
 					strokeWidth={1.5}
 				/>
 			}
-			title="Response times"
+			title={
+				showTimingPhases
+					? t("common.charts.labels.timingPhases")
+					: t("common.charts.labels.responseTime")
+			}
+			onClick={() => {
+				if (!hasTimingPhases) return;
+				setShowTimingPhases((prev) => !prev);
+			}}
 		>
 			<ResponsiveContainer
 				width="100%"
@@ -128,7 +187,34 @@ export const HistogramDetails = ({
 								stopOpacity={0}
 							/>
 						</linearGradient>
+						{PHASE_KEYS.map((key) => (
+							<linearGradient
+								key={key}
+								id={`phaseGradient-${key}`}
+								x1="0"
+								y1="0"
+								x2="0"
+								y2="1"
+							>
+								<stop
+									offset="0%"
+									stopColor={theme.palette.chart.phases[PHASE_COLOR_KEYS[key]]}
+									stopOpacity={0.8}
+								/>
+								<stop
+									offset="100%"
+									stopColor={theme.palette.chart.phases[PHASE_COLOR_KEYS[key]]}
+									stopOpacity={0.2}
+								/>
+							</linearGradient>
+						))}
 					</defs>
+					<YAxis
+						hide
+						// scale="sqrt"
+						domain={[0, yMax ?? "auto"]}
+						allowDataOverflow
+					/>
 					<XAxis
 						axisLine={false}
 						tickLine={false}
@@ -141,24 +227,99 @@ export const HistogramDetails = ({
 						)}
 					/>
 
-					<Tooltip
+					{showTimingPhases ? (
-						content={(props) => (
+						<Tooltip
-							<ResponseTimeToolTip
+							content={(props) => (
-								{...props}
+								<TimingPhasesToolTip
-								range={range}
+									{...props}
-								theme={theme}
+									range={range}
-								uiTimezone={uiTimezone}
+									theme={theme}
-							/>
+									uiTimezone={uiTimezone}
-						)}
+								/>
-					/>
+							)}
-					<Area
+						/>
-						type="monotone"
+					) : (
-						dataKey="avgResponseTime"
+						<Tooltip
-						stroke={theme.palette.primary.main}
+							content={(props) => (
-						fill="url(#colorUv)"
+								<ResponseTimeToolTip
-					/>
+									{...props}
+									range={range}
+									theme={theme}
+									uiTimezone={uiTimezone}
+								/>
+							)}
+						/>
+					)}
+					{!showTimingPhases && (
+						<Area
+							type="monotone"
+							dataKey="avgResponseTime"
+							stroke={theme.palette.primary.main}
+							fill="url(#colorUv)"
+						/>
+					)}
+					{hasTimingPhases &&
+						showTimingPhases &&
+						PHASE_KEYS.map((key) => {
+							const dimmed = hoveredPhase !== null && hoveredPhase !== key;
+							return (
+								<Area
+									key={key}
+									type="monotone"
+									stackId={1}
+									dataKey={key}
+									stroke={theme.palette.chart.phases[PHASE_COLOR_KEYS[key]]}
+									fill={`url(#phaseGradient-${key})`}
+									fillOpacity={dimmed ? 0.2 : undefined}
+									strokeOpacity={dimmed ? 0.2 : undefined}
+								/>
+							);
+						})}
 				</AreaChart>
 			</ResponsiveContainer>
+			<Stack
+				justifyContent={"center"}
+				gap={LAYOUT.XS}
+				direction={"row"}
+				flexWrap={"wrap"}
+			>
+				{showTimingPhases ? (
+					PHASE_KEYS.map((key) => {
+						return (
+							<Stack
+								direction="row"
+								alignItems="center"
+								gap={SPACING.LG}
+								key={key}
+								onMouseEnter={() => setHoveredPhase(key)}
+								onMouseLeave={() => setHoveredPhase(null)}
+							>
+								<Dot
+									color={theme.palette.chart.phases[PHASE_COLOR_KEYS[key]]}
+									size="lg"
+								/>
+								<Typography lineHeight={1}>{t(PHASE_LABEL_KEYS[key])}</Typography>
+							</Stack>
+						);
+					})
+				) : (
+					<Stack
+						direction="row"
+						alignItems="center"
+						gap={SPACING.LG}
+						onMouseEnter={() => setHoveredPhase("avgResponseTime")}
+						onMouseLeave={() => setHoveredPhase(null)}
+					>
+						<Dot
+							color={theme.palette.primary.main}
+							size="lg"
+						/>
+						<Typography lineHeight={1}>
+							{t("common.charts.labels.totalResponseTime")}
+						</Typography>
+					</Stack>
+				)}
+			</Stack>
 		</BaseChart>
 	);
 };

client/src/Components/monitors/charts/HistogramDockerContainer.tsx

@@ -0,0 +1,70 @@
+import { BaseChart } from "@/Components/design-elements";
+import { Area, AreaChart, CartesianGrid, ResponsiveContainer } from "recharts";
+
+// Types
+import type { DockerContainerStats } from "@/Types/Monitor";
+
+// Hooks
+import { useTheme } from "@mui/material";
+import { Fragment, useId } from "react";
+
+// Utils
+import { createGradient } from "@/Components/monitors/charts/ChartUtils";
+interface HistogramDockerContainerProps {
+	title: string;
+	rightTitle: string;
+	stats: DockerContainerStats;
+	dataKey: string;
+	strokeColor: string;
+	gradientStartColor: string;
+}
+
+export const HistogramDockerContainer = ({
+	title,
+	rightTitle,
+	stats,
+	dataKey,
+	strokeColor,
+	gradientStartColor,
+}: HistogramDockerContainerProps) => {
+	const uniqueId = useId();
+	const theme = useTheme();
+	const gradientId = `gradient-${uniqueId}`;
+
+	return (
+		<BaseChart
+			icon="null"
+			title={title}
+			rightTitle={rightTitle}
+		>
+			<ResponsiveContainer
+				width="100%"
+				height={200}
+			>
+				<AreaChart data={stats.aggregate}>
+					<CartesianGrid
+						strokeWidth={1}
+						stroke={theme.palette.divider}
+						strokeOpacity={1}
+						fill="transparent"
+						vertical={false}
+					/>
+					<Fragment>
+						{createGradient({
+							id: gradientId,
+							startColor: gradientStartColor,
+							endColor: "transparent",
+							direction: "vertical",
+						})}
+						<Area
+							dataKey={dataKey}
+							type="monotone"
+							stroke={strokeColor}
+							fill={`url(#${gradientId})`}
+						/>
+					</Fragment>
+				</AreaChart>
+			</ResponsiveContainer>
+		</BaseChart>
+	);
+};

client/src/Components/monitors/charts/HistogramInfrastructure.tsx

@@ -8,89 +8,11 @@ import {
 	ResponsiveContainer,
 } from "recharts";
 import { Fragment, useId } from "react";
-import { XTick } from "@/Components/monitors";
+import { XTick } from "@/Components/monitors/charts/XTick";
 
 import { useTheme } from "@mui/material/styles";
 import type { HardwareCheckStats } from "@/Types/Monitor";
-
+import { AREA_COLORS, createGradient } from "@/Components/monitors/charts/ChartUtils";
-const AREA_COLORS = [
-	// Blues
-	"#3182bd", // Deep blue
-	"#6baed6", // Medium blue
-	"#9ecae1", // Light blue
-
-	// Greens
-	"#74c476", // Soft green
-	"#a1d99b", // Light green
-	"#c7e9c0", // Pale green
-
-	// Oranges
-	"#fdae6b", // Warm orange
-	"#fdd0a2", // Light orange
-	"#feedde", // Pale orange
-
-	// Purples
-	"#9467bd", // Lavender
-	"#a55194", // Deep magenta
-	"#c994c7", // Soft magenta
-
-	// Reds
-	"#ff9896", // Soft red
-	"#de2d26", // Deep red
-	"#fc9272", // Medium red
-
-	// Cyans/Teals
-	"#17becf", // Cyan
-	"#7fcdbb", // Teal
-	"#a1dab4", // Light teal
-
-	// Yellows
-	"#fec44f", // Mustard
-	"#fee391", // Light yellow
-	"#ffffd4", // Pale yellow
-
-	// Additional colors
-	"#e377c2", // Soft pink
-	"#bcbd22", // Olive
-	"#2ca02c", // Vibrant green
-];
-
-const createGradient = ({
-	id,
-	startColor,
-	endColor,
-	startOpacity = 0.8,
-	endOpacity = 0,
-	direction = "vertical",
-}: {
-	id: string;
-	startColor: string;
-	endColor: string;
-	startOpacity?: number;
-	endOpacity?: number;
-	direction?: "vertical" | "horizontal";
-}) => (
-	<defs>
-		<linearGradient
-			id={id}
-			x1={direction === "vertical" ? "0" : "0"}
-			y1={direction === "vertical" ? "0" : "0"}
-			x2={direction === "vertical" ? "0" : "1"}
-			y2={direction === "vertical" ? "1" : "0"}
-		>
-			<stop
-				offset="0%"
-				stopColor={startColor}
-				stopOpacity={startOpacity}
-			/>
-			<stop
-				offset="100%"
-				stopColor={endColor}
-				stopOpacity={endOpacity}
-			/>
-		</linearGradient>
-	</defs>
-);
 
 export const HistogramInfrastructure = ({
 	dateRange,

client/src/Components/monitors/charts/HistogramPageSpeedDetails.tsx

@@ -1,6 +1,6 @@
 import { BaseChart } from "@/Components/design-elements";
 import { TrendingUp } from "lucide-react";
-import { XTick } from "@/Components/monitors";
+import { XTick } from "@/Components/monitors/charts/XTick";
 import {
 	XAxis,
 	AreaChart,

client/src/Components/monitors/charts/HistogramStatus.tsx

@@ -3,7 +3,7 @@ import Typography from "@mui/material/Typography";
 import { BaseChart } from "@/Components/design-elements";
 import { useTheme } from "@mui/material/styles";
 import { useSelector } from "react-redux";
-import { formatDateWithTz } from "@/Utils/TimeUtils";
+import { formatDateWithTz, formatMs } from "@/Utils/TimeUtils";
 import { useTranslation } from "react-i18next";
 import { ResponsiveContainer, BarChart, XAxis, Bar, Cell, Tooltip } from "recharts";
 import { getResponseTimeColor } from "@/Utils/MonitorUtils";
@@ -100,7 +100,7 @@ export const HistogramStatus = ({
 					</Typography>
 				) : null}
 				<Typography variant="caption">{titleText}</Typography>
-				<Typography variant="body2">{Math.floor(avg)} ms</Typography>
+				<Typography variant="body2">{formatMs(avg)}</Typography>
 			</Stack>
 		);
 	};

client/src/Components/monitors/charts/RadialAvgResponse.tsx

@@ -7,6 +7,7 @@ import { Cell, RadialBarChart, RadialBar, ResponsiveContainer } from "recharts";
 import { useTranslation } from "react-i18next";
 import { getResponseTimeColor } from "@/Utils/MonitorUtils";
 import { useTheme } from "@mui/material/styles";
+import { formatMs } from "@/Utils/TimeUtils";
 
 export const RadialAvgResponse = ({ avg, max }: { avg: number; max: number }) => {
 	const { t } = useTranslation();
@@ -84,7 +85,9 @@ export const RadialAvgResponse = ({ avg, max }: { avg: number; max: number }) =>
 					<Typography
 						variant="h1"
 						textAlign={"center"}
-					>{`${avg?.toFixed()}ms`}</Typography>
+					>
+						{formatMs(avg)}
+					</Typography>
 				</Stack>
 			</Stack>
 		</BaseChart>

client/src/Components/monitors/charts/XTick.tsx

@@ -0,0 +1,30 @@
+import { formatDateWithTz, tickDateFormatLookup } from "@/Utils/TimeUtils";
+import { useSelector } from "react-redux";
+import { Text } from "recharts";
+import { useTheme } from "@mui/material";
+import type { RootState } from "@/Types/state";
+
+type XTickProps = {
+	x: number;
+	y: number;
+	payload: { value: string };
+	range: string;
+};
+
+export const XTick = ({ x, y, payload, range }: XTickProps) => {
+	const format = tickDateFormatLookup(range);
+	const theme = useTheme();
+	const uiTimezone = useSelector((state: RootState) => state.ui.timezone);
+	return (
+		<Text
+			x={x}
+			y={y + 10}
+			textAnchor="middle"
+			fill={theme.palette.text.secondary}
+			fontSize={11}
+			fontWeight={400}
+		>
+			{formatDateWithTz(payload?.value, format, uiTimezone)}
+		</Text>
+	);
+};

client/src/Components/monitors/index.tsx

@@ -15,3 +15,4 @@ export * from "./charts/HistogramPageSpeedDetailsTooltip";
 export * from "./charts/HistogramInfrastructure";
 export * from "./HeaderMonitorsSummary";
 export * from "./BulkActionsBar";
+export * from "./MonitorListPage";

client/src/Components/sidebar/Authfooter.tsx

@@ -10,10 +10,11 @@ import { useSelector, useDispatch } from "react-redux";
 import { useTranslation } from "react-i18next";
 import { useState } from "react";
 import { useNavigate } from "react-router";
-import { MoreVertical, LogOut } from "lucide-react";
+import { MoreVertical, LogOut, Moon, Sun } from "lucide-react";
 import { Avatar, Icon } from "@/Components/design-elements";
 import { clearAuthState } from "@/Features/Auth/authSlice.js";
 import type { RootState } from "@/Types/state.js";
+import { setMode } from "@/Features/UI/uiSlice.js";
 
 interface AuthFooterProps {
 	collapsed: boolean;
@@ -27,6 +28,7 @@ interface AuthFooterProps {
 export const AuthFooter = ({ collapsed, accountMenuItems }: AuthFooterProps) => {
 	const { t } = useTranslation();
 	const theme = useTheme();
+	const mode = useSelector((state: RootState) => state.ui.mode);
 	const user = useSelector((state: RootState) => state.auth.user);
 	const navigate = useNavigate();
 	const dispatch = useDispatch();
@@ -105,13 +107,14 @@ export const AuthFooter = ({ collapsed, accountMenuItems }: AuthFooterProps) =>
 						<Typography
 							fontWeight={500}
 							noWrap
-							sx={{ color: theme.palette.text.primary }}
+							color={theme.palette.text.primary}
 						>
 							{user?.firstName} {user?.lastName}
 						</Typography>
 						<Typography
 							noWrap
-							sx={{ textTransform: "capitalize", color: theme.palette.text.secondary }}
+							textTransform={"capitalize"}
+							color={theme.palette.text.secondary}
 						>
 							{getRoleText()}
 						</Typography>
@@ -154,15 +157,12 @@ export const AuthFooter = ({ collapsed, accountMenuItems }: AuthFooterProps) =>
 						pb={2}
 						sx={{ pointerEvents: "none" }}
 					>
-						<Typography
+						<Typography fontWeight={500}>
-							fontWeight={500}
-							fontSize={13}
-						>
 							{user?.firstName} {user?.lastName}
 						</Typography>
 						<Typography
-							fontSize={12}
+							variant="body2"
-							sx={{ textTransform: "capitalize" }}
+							textTransform={"capitalize"}
 						>
 							{getRoleText()}
 						</Typography>
@@ -178,6 +178,18 @@ export const AuthFooter = ({ collapsed, accountMenuItems }: AuthFooterProps) =>
 						{item.name}
 					</MenuItem>
 				))}
+				<MenuItem
+					onClick={() => {
+						dispatch(setMode(mode === "light" ? "dark" : "light"));
+						handleMenuClose();
+					}}
+					sx={menuItemSx}
+				>
+					<Icon icon={mode === "light" ? Moon : Sun} />
+					{mode === "light"
+						? t("pages.settings.form.ui.option.theme.dark")
+						: t("pages.settings.form.ui.option.theme.light")}
+				</MenuItem>
 				<MenuItem
 					onClick={handleLogout}
 					sx={menuItemSx}

client/src/Components/sidebar/Menu.tsx

@@ -1,6 +1,7 @@
 import { Icon } from "@/Components/design-elements";
 
 import {
+	LayoutDashboard,
 	Globe,
 	Gauge,
 	Link,
@@ -18,64 +19,100 @@ import {
 	Lock,
 	Users,
 	Tag,
+	Waypoints,
+	Container,
 } from "lucide-react";
-
 export const getMenu = (t: Function) => {
 	return [
 		{
-			name: t("components.sidebar.menu.uptime"),
+			group: t("components.sidebar.menu.groups.monitoring"),
-			path: "uptime",
+			items: [
-			icon: <Icon icon={Globe} />,
+				{
+					name: t("components.sidebar.menu.dashboard"),
+					path: "dashboard",
+					icon: <Icon icon={LayoutDashboard} />,
+				},
+				{
+					name: t("components.sidebar.menu.uptime"),
+					path: "uptime",
+					icon: <Icon icon={Globe} />,
+				},
+				{
+					name: t("components.sidebar.menu.docker"),
+					path: "docker",
+					icon: <Icon icon={Container} />,
+				},
+				{
+					name: t("components.sidebar.menu.infrastructure"),
+					path: "infrastructure",
+					icon: <Icon icon={Link} />,
+				},
+				{
+					name: t("components.sidebar.menu.pagespeed"),
+					path: "pagespeed",
+					icon: <Icon icon={Gauge} />,
+				},
+			],
 		},
 		{
-			name: t("components.sidebar.menu.pagespeed"),
+			group: t("components.sidebar.menu.groups.alerting"),
-			path: "pagespeed",
+			items: [
-			icon: <Icon icon={Gauge} />,
+				{
+					name: t("components.sidebar.menu.incidents"),
+					path: "incidents",
+					icon: <Icon icon={AlertTriangle} />,
+				},
+				{
+					name: t("components.sidebar.menu.notifications"),
+					path: "notifications",
+					icon: <Icon icon={Bell} />,
+				},
+				{
+					name: t("components.sidebar.menu.maintenance"),
+					path: "maintenance",
+					icon: <Icon icon={Wrench} />,
+				},
+			],
 		},
 		{
-			name: t("components.sidebar.menu.infrastructure"),
+			group: t("components.sidebar.menu.groups.reporting"),
-			path: "infrastructure",
+			items: [
-			icon: <Icon icon={Link} />,
+				{
+					name: t("components.sidebar.menu.statusPages"),
+					path: "status",
+					icon: <Icon icon={Wifi} />,
+				},
+				{
+					name: t("components.sidebar.menu.checks"),
+					path: "checks",
+					icon: <Icon icon={FileText} />,
+				},
+				{
+					name: t("components.sidebar.menu.logs"),
+					path: "logs",
+					icon: <Icon icon={ScrollText} />,
+				},
+			],
 		},
 		{
-			name: t("components.sidebar.menu.notifications"),
+			group: t("components.sidebar.menu.groups.configuration"),
-			path: "notifications",
+			items: [
-			icon: <Icon icon={Bell} />,
+				{
-		},
+					name: t("components.sidebar.menu.tags"),
-		{
+					path: "tags",
-			name: t("components.sidebar.menu.tags"),
+					icon: <Icon icon={Tag} />,
-			path: "tags",
+				},
-			icon: <Icon icon={Tag} />,
+				{
-		},
+					name: t("components.sidebar.menu.proxies"),
-		{
+					path: "proxies",
-			name: t("components.sidebar.menu.checks"),
+					icon: <Icon icon={Waypoints} />,
-			path: "checks",
+				},
-			icon: <Icon icon={FileText} />,
+				{
-		},
+					name: t("components.sidebar.menu.settings"),
-		{
+					path: "settings",
-			name: t("components.sidebar.menu.incidents"),
+					icon: <Icon icon={Settings} />,
-			path: "incidents",
+				},
-			icon: <Icon icon={AlertTriangle} />,
+			],
-		},
-		{
-			name: t("components.sidebar.menu.statusPages"),
-			path: "status",
-			icon: <Icon icon={Wifi} />,
-		},
-		{
-			name: t("components.sidebar.menu.maintenance"),
-			path: "maintenance",
-			icon: <Icon icon={Wrench} />,
-		},
-		{
-			name: t("components.sidebar.menu.logs"),
-			path: "logs",
-			icon: <Icon icon={ScrollText} />,
-		},
-		{
-			name: t("components.sidebar.menu.settings"),
-			icon: <Icon icon={Settings} />,
-			path: "settings",
 		},
 	];
 };

client/src/Components/sidebar/NavItem.tsx

@@ -25,11 +25,10 @@ export const NavItem = ({
 	const iconStroke = selected
 		? theme.palette.sidebar.accent
 		: theme.palette.text.secondary;
-
 	const buttonBgColor = selected ? theme.palette.action.selected : "transparent";
 	const buttonBgHoverColor = selected
-		? theme.palette.action.selected
+		? theme.palette.action.selectedHover
-		: theme.palette.action.hover;
+		: theme.palette.action.rowHover;
 	const fontWeight = selected ? 600 : 400;
 	return (
 		<Tooltip

client/src/Components/sidebar/index.tsx

@@ -1,9 +1,12 @@
 import { useEffect } from "react";
 import Backdrop from "@mui/material/Backdrop";
 import Stack from "@mui/material/Stack";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
 import List from "@mui/material/List";
 import Divider from "@mui/material/Divider";
 import { LAYOUT } from "@/Utils/Theme/constants";
+import { typographyLevels } from "@/Utils/Theme/Palette";
 import { useSidebar } from "@/Hooks/useSidebar.js";
 import { Logo } from "@/Components/sidebar/Logo";
 import { getMenu, getAccountMenu } from "@/Components/sidebar/Menu";
@@ -29,7 +32,7 @@ export const Sidebar = () => {
 	const navigate = useNavigate();
 	const location = useLocation();
 	const { t } = useTranslation();
-	const { width, transition, collapsed } = useSidebar();
+	const { width, transition, transitionTiming, collapsed } = useSidebar();
 	const theme = useTheme();
 	const isSmall = useMediaQuery(theme.breakpoints.down("md"));
 	const menu = getMenu(t);
@@ -70,11 +73,11 @@ export const Sidebar = () => {
 				gap={theme.spacing(LAYOUT.SM)}
 				borderRight={`1px solid ${theme.palette.divider}`}
 				width={width}
+				bgcolor={theme.palette.background.paper}
 				sx={{
 					touchAction: "none",
 					transition: transition,
 					zIndex: 1000,
-					backdropFilter: "blur(8px)",
 				}}
 			>
 				<List
@@ -89,19 +92,55 @@ export const Sidebar = () => {
 						pt={theme.spacing(LAYOUT.MD)}
 						pb={theme.spacing(LAYOUT.MD)}
 					/>
-					{menu.map((item) => {
+					{menu.map((group) => (
-						const selected = location.pathname.startsWith(`/${item.path}`);
+						<Box key={group.group}>
-						return (
+							<Box
-							<NavItem
+								position="relative"
-								key={item.path}
+								overflow="hidden"
-								item={item}
+							>
-								selected={selected}
+								<Typography
-								onClick={() => handleNavClick(item.path)}
+									variant="eyebrow"
-							/>
+									component="div"
-						);
+									color={theme.palette.text.disabled}
-					})}
+									fontSize={typographyLevels.s}
+									paddingLeft={theme.spacing(5)}
+									paddingTop={theme.spacing(LAYOUT.SM)}
+									paddingBottom={theme.spacing(LAYOUT.XXS)}
+									whiteSpace="nowrap"
+									sx={{
+										opacity: collapsed ? 0 : 1,
+										transition: `opacity ${transitionTiming}`,
+									}}
+								>
+									{group.group}
+								</Typography>
+								<Divider
+									sx={{
+										position: "absolute",
+										top: "50%",
+										left: 0,
+										right: 0,
+										opacity: collapsed ? 1 : 0,
+										transition: `opacity ${transitionTiming}`,
+									}}
+								/>
+							</Box>
+							{group.items.map((item) => {
+								const selected = location.pathname.startsWith(`/${item.path}`);
+								return (
+									<NavItem
+										key={item.path}
+										item={item}
+										selected={selected}
+										onClick={() => handleNavClick(item.path)}
+									/>
+								);
+							})}
+						</Box>
+					))}
 				</List>
 				<StarPrompt />
+
 				<Divider sx={{ borderColor: theme.palette.divider }} />
 
 				<AuthFooter

client/src/Features/UI/uiSlice.ts

@@ -2,7 +2,14 @@ import { createSlice, type PayloadAction } from "@reduxjs/toolkit";
 
 type ThemeMode = "light" | "dark";
 type ChartType = "histogram" | "line";
-type TableName = "monitors" | "team" | "maintenance" | "infrastructure" | "logs";
+type TableName =
+	| "monitors"
+	| "team"
+	| "maintenance"
+	| "infrastructure"
+	| "logs"
+	| "pagespeed"
+	| "docker";
 
 interface TableState {
 	rowsPerPage: number;
@@ -14,9 +21,11 @@ interface SidebarState {
 
 interface UIState {
 	monitors: TableState;
+	pagespeed: TableState;
 	team: TableState;
 	maintenance: TableState;
 	infrastructure: TableState;
+	docker: TableState;
 	logs: TableState;
 	sidebar: SidebarState;
 	mode: ThemeMode;
@@ -37,6 +46,9 @@ const initialState: UIState = {
 	monitors: {
 		rowsPerPage: 10,
 	},
+	pagespeed: {
+		rowsPerPage: 10,
+	},
 	team: {
 		rowsPerPage: 5,
 	},
@@ -46,6 +58,9 @@ const initialState: UIState = {
 	infrastructure: {
 		rowsPerPage: 5,
 	},
+	docker: {
+		rowsPerPage: 5,
+	},
 	logs: {
 		rowsPerPage: 15,
 	},

client/src/Hooks/UseApi.ts

@@ -6,7 +6,7 @@ import { useState } from "react";
 import { useToast } from "@/Hooks/UseToast";
 import { logger } from "@/Utils/logger";
 
-interface ApiResponse<T> {
+export interface ApiResponse<T> {
 	success: boolean;
 	msg: string;
 	data: T;

client/src/Hooks/UseToast.ts

@@ -1,27 +1,30 @@
 import { toast, type ToastOptions } from "react-toastify";
+import { useMemo } from "react";
 
 export const useToast = () => {
-	const showToast = (message: string, options?: ToastOptions) => {
+	return useMemo(() => {
-		toast.dismiss();
+		const showToast = (message: string, options?: ToastOptions) => {
-		const baseStyle: React.CSSProperties = {
+			toast.dismiss();
-			whiteSpace: "nowrap",
+			const baseStyle: React.CSSProperties = {
-			overflow: "hidden",
+				whiteSpace: "nowrap",
-			textOverflow: "ellipsis",
+				overflow: "hidden",
+				textOverflow: "ellipsis",
+			};
+			toast(message, {
+				...options,
+				style: { ...baseStyle, ...(options?.style || {}) },
+			});
 		};
-		toast(message, {
-			...options,
-			style: { ...baseStyle, ...(options?.style || {}) },
-		});
-	};
 
-	const toastSuccess = (msg: string, opts?: ToastOptions) =>
+		const toastSuccess = (msg: string, opts?: ToastOptions) =>
-		showToast(msg, { ...opts, type: "success" });
+			showToast(msg, { ...opts, type: "success" });
-	const toastError = (msg: string, opts?: ToastOptions) =>
+		const toastError = (msg: string, opts?: ToastOptions) =>
-		showToast(msg, { ...opts, type: "error" });
+			showToast(msg, { ...opts, type: "error" });
-	const toastInfo = (msg: string, opts?: ToastOptions) =>
+		const toastInfo = (msg: string, opts?: ToastOptions) =>
-		showToast(msg, { ...opts, type: "info" });
+			showToast(msg, { ...opts, type: "info" });
-	const toastWarning = (msg: string, opts?: ToastOptions) =>
+		const toastWarning = (msg: string, opts?: ToastOptions) =>
-		showToast(msg, { ...opts, type: "warning" });
+			showToast(msg, { ...opts, type: "warning" });
 
-	return { showToast, toastSuccess, toastError, toastInfo, toastWarning };
+		return { showToast, toastSuccess, toastError, toastInfo, toastWarning };
+	}, []);
 };

client/src/Hooks/useMonitorForm.ts

@@ -1,6 +1,11 @@
 import { useMemo } from "react";
 import { monitorSchema, type MonitorFormData } from "@/Validation/monitor";
-import { DefaultHttpMethod, DefaultPageSpeedStrategy } from "@/Types/Monitor";
+import {
+	DefaultHttpMethod,
+	DefaultMonitorMatchMethod,
+	DefaultPageSpeedStrategy,
+	DefaultProxyMode,
+} from "@/Types/Monitor";
 import type { Monitor, MonitorType } from "@/Types/Monitor";
 
 interface UseMonitorFormOptions {
@@ -42,8 +47,10 @@ export const getMonitorDefaults = (
 				url: data?.url || "",
 				method: data?.method ?? DefaultHttpMethod,
 				ignoreTlsErrors: data?.ignoreTlsErrors || false,
+				proxyMode: data?.proxyMode ?? DefaultProxyMode,
+				proxyId: data?.proxyId || "",
 				useAdvancedMatching: data?.useAdvancedMatching || false,
-				matchMethod: data?.matchMethod || "",
+				matchMethod: data?.matchMethod || DefaultMonitorMatchMethod,
 				expectedValue: data?.expectedValue || "",
 				jsonPath: data?.jsonPath || "",
 				customUpCodes: data?.customUpCodes || [],
@@ -70,6 +77,7 @@ export const getMonitorDefaults = (
 				...base,
 				type: "docker",
 				url: data?.url || "",
+				dockerLogsEnabled: data?.dockerLogsEnabled ?? false,
 			};
 			break;
 		case "game":
@@ -137,8 +145,10 @@ export const getMonitorDefaults = (
 				url: "",
 				method: DefaultHttpMethod,
 				ignoreTlsErrors: false,
+				proxyMode: DefaultProxyMode,
+				proxyId: "",
 				useAdvancedMatching: false,
-				matchMethod: "",
+				matchMethod: DefaultMonitorMatchMethod,
 				expectedValue: "",
 				jsonPath: "",
 				customUpCodes: [],

client/src/Hooks/useMonitorListController.ts

@@ -0,0 +1,209 @@
+import { setRowsPerPage, type TableName } from "@/Features/UI/uiSlice";
+import { useDelete, useGet } from "@/Hooks/UseApi";
+import { useBulkMonitorActions } from "@/Hooks/useBulkMonitorActions";
+import useDebounce from "@/Hooks/useDebounce";
+import type { RootState } from "@/store";
+import {
+	type MonitorsWithChecksResponse,
+	SelectableMonitorTypes,
+	type Monitor,
+	type MonitorType,
+} from "@/Types/Monitor";
+import type { Tag } from "@/Types/Tag";
+import { useCallback, useMemo, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+
+interface MonitorListConfig {
+	types: MonitorType[] | "selectable";
+	checksLimit: number;
+	refreshInterval: number;
+	rowsPerPageTable: TableName;
+	rowsPerPageDefault: number;
+	initialSortField?: string; // default ""
+}
+
+export const useMonitorListController = (config: MonitorListConfig) => {
+	const dispatch = useDispatch();
+	const rowsPerPage = useSelector(
+		(state: RootState) =>
+			state.ui?.[config.rowsPerPageTable]?.rowsPerPage ?? config.rowsPerPageDefault
+	);
+
+	// Filter states
+	const [selectedTypes, setSelectedTypes] = useState<MonitorType[]>([]);
+	const [selectedStatus, setSelectedStatus] = useState<string>("");
+	const [selectedState, setSelectedState] = useState<string>("");
+	const [selectedTags, setSelectedTags] = useState<string[]>([]);
+	const [page, setPage] = useState<number>(0);
+	const [search, setSearch] = useState<string>("");
+	const [sortField, setSortField] = useState<string>(config.initialSortField ?? "");
+	const [sortOrder, setSortOrder] = useState<"asc" | "desc">("asc");
+	const [selectedMonitor, setSelectedMonitor] = useState<Monitor | null>(null);
+	const debouncedSearch = useDebounce<string>(search, 300);
+
+	// Convert filter selections to API filter values
+	// Status: pass "up"/"down" directly to the API
+	// State: "active" -> true, "paused" -> false
+	const toFilterStatus = useMemo(() => {
+		if (selectedStatus === "up") return "up";
+		if (selectedStatus === "down") return "down";
+		return undefined;
+	}, [selectedStatus]);
+
+	const toFilterActive = useMemo(() => {
+		if (selectedState === "active") return "true";
+		if (selectedState === "paused") return "false";
+		return undefined;
+	}, [selectedState]);
+
+	// Determine field and filter for the API request
+	// Priority: status > isActive > search > sort
+	const filterLookup = new Map<string | undefined, string>([
+		[toFilterStatus, "status"],
+		[toFilterActive, "isActive"],
+	]);
+	const activeFilter = [...filterLookup].find(([key]) => key !== undefined);
+	const field = activeFilter?.[1] || (debouncedSearch ? "name" : sortField || undefined);
+	const filter = activeFilter?.[0] || debouncedSearch || undefined;
+
+	const effectiveTypes = useMemo(() => {
+		return config.types === "selectable"
+			? selectedTypes.length > 0
+				? selectedTypes
+				: [...SelectableMonitorTypes]
+			: config.types;
+	}, [config.types, selectedTypes]);
+
+	// Fetching
+	const monitorsWithChecksUrl = useMemo(() => {
+		const params = new URLSearchParams();
+		effectiveTypes.forEach((type) => params.append("type", type));
+		selectedTags.forEach((tag) => params.append("tags", tag));
+		params.append("limit", String(config.checksLimit));
+		if (page !== undefined) params.append("page", String(page));
+		if (rowsPerPage) params.append("rowsPerPage", String(rowsPerPage));
+		if (filter) params.append("filter", filter);
+		if (field) params.append("field", field);
+		if (sortOrder) params.append("order", sortOrder);
+		return `/monitors/team/with-checks?${params.toString()}`;
+	}, [
+		effectiveTypes,
+		selectedTags,
+		page,
+		rowsPerPage,
+		filter,
+		field,
+		sortOrder,
+		config.checksLimit,
+	]);
+
+	const {
+		data: monitorsWithChecksData,
+		isLoading,
+		error,
+		refetch,
+	} = useGet<MonitorsWithChecksResponse>(
+		monitorsWithChecksUrl,
+		{},
+		{ refreshInterval: config.refreshInterval, keepPreviousData: true }
+	);
+	const { data: tags } = useGet<Tag[]>("/tags/team");
+
+	const bulk = useBulkMonitorActions(refetch, page);
+
+	// Delete ops
+	const { deleteFn, loading: isDeleting } = useDelete();
+	const handleConfirmDelete = async () => {
+		if (!selectedMonitor) return;
+		await deleteFn(`/monitors/${selectedMonitor.id}`);
+		setSelectedMonitor(null);
+		refetch();
+	};
+	const handleCancelDelete = () => setSelectedMonitor(null);
+
+	// Handle filters
+	const handleClearFilters = useCallback(() => {
+		setSelectedTypes([]);
+		setSelectedStatus("");
+		setSelectedState("");
+		setSelectedTags([]);
+		setSearch("");
+	}, []);
+
+	const handleSetRowsPerPage = (value: number) => {
+		dispatch(setRowsPerPage({ value, table: config.rowsPerPageTable }));
+		setPage(0);
+	};
+
+	// Check for active filters
+	const hasActiveFilters = Boolean(
+		selectedTypes.length > 0 ||
+		selectedStatus ||
+		selectedState ||
+		selectedTags.length > 0 ||
+		search
+	);
+
+	// Show empty state only when there are truly no monitors (not just filtered out)
+	// If filters are active and count is 0, pass 1 to prevent empty state fallback
+
+	const { monitors, summary, count } = monitorsWithChecksData ?? {
+		monitors: null,
+		summary: null,
+		count: 0,
+	};
+
+	const effectiveTotalCount =
+		hasActiveFilters && (summary?.totalMonitors ?? 0) === 0
+			? 1
+			: (summary?.totalMonitors ?? 0);
+
+	return {
+		// Data
+		monitors,
+		summary,
+		count,
+		tags,
+		isLoading,
+		error,
+		refetch,
+		effectiveTotalCount,
+		hasActiveFilters,
+
+		// Filter state and setters
+		selectedTypes,
+		setSelectedTypes,
+		selectedStatus,
+		setSelectedStatus,
+		selectedState,
+		setSelectedState,
+		selectedTags,
+		setSelectedTags,
+		search,
+		setSearch,
+		handleClearFilters,
+
+		// Paging and Sorting
+		page,
+		setPage,
+		rowsPerPage,
+		handleSetRowsPerPage,
+		sortField,
+		setSortField,
+		sortOrder,
+		setSortOrder,
+
+		// Delete
+		selectedMonitor,
+		setSelectedMonitor,
+		isDialogOpen: Boolean(selectedMonitor),
+		isDeleting,
+		handleConfirmDelete,
+		handleCancelDelete,
+
+		// Rendered only when config.bulkActions
+		...bulk,
+	};
+};
+
+export type MonitorListController = ReturnType<typeof useMonitorListController>;

client/src/Hooks/useNotificationForm.ts

@@ -8,89 +8,17 @@ interface UseNotificationFormOptions {
 }
 
 function buildDefaults(data: Notification | null): NotificationFormData {
-	if (data?.type === "matrix") {
-		return {
-			type: "matrix",
-			notificationName: data.notificationName || "",
-			homeserverUrl: data.homeserverUrl || "",
-			roomId: data.roomId || "",
-			accessToken: data.accessToken || "",
-		};
-	}
-	if (data?.type === "telegram") {
-		return {
-			type: "telegram",
-			notificationName: data.notificationName || "",
-			address: data.address || "",
-			accessToken: data.accessToken || "",
-		};
-	}
-	if (data?.type === "slack") {
-		return {
-			type: "slack",
-			notificationName: data.notificationName || "",
-			address: data.address || "",
-		};
-	}
-	if (data?.type === "discord") {
-		return {
-			type: "discord",
-			notificationName: data.notificationName || "",
-			address: data.address || "",
-		};
-	}
-	if (data?.type === "webhook") {
-		return {
-			type: "webhook",
-			notificationName: data.notificationName || "",
-			address: data.address || "",
-		};
-	}
-	if (data?.type === "pager_duty") {
-		return {
-			type: "pager_duty",
-			notificationName: data.notificationName || "",
-			address: data.address || "",
-		};
-	}
-	if (data?.type === "teams") {
-		return {
-			type: "teams",
-			notificationName: data.notificationName || "",
-			address: data.address || "",
-		};
-	}
-	if (data?.type === "twilio") {
-		return {
-			type: "twilio",
-			notificationName: data.notificationName || "",
-			accountSid: data.accountSid || "",
-			accessToken: data.accessToken || "",
-			phone: data.phone || "",
-			twilioPhoneNumber: data.twilioPhoneNumber || "",
-		};
-	}
-	if (data?.type === "pushover") {
-		return {
-			type: "pushover",
-			notificationName: data.notificationName || "",
-			address: data.address || "",
-			accessToken: data.accessToken || "",
-		};
-	}
-	if (data?.type === "ntfy") {
-		return {
-			type: "ntfy",
-			notificationName: data.notificationName || "",
-			address: data.address || "",
-			topic: data.topic || "",
-		};
-	}
-	// Default: email (covers both data === null and data.type === "email")
 	return {
-		type: "email",
+		type: data?.type ?? "email",
 		notificationName: data?.notificationName || "",
 		address: data?.address || "",
+		accessToken: data?.accessToken || "",
+		accountSid: data?.accountSid || "",
+		phone: data?.phone || "",
+		twilioPhoneNumber: data?.twilioPhoneNumber || "",
+		homeserverUrl: data?.homeserverUrl || "",
+		roomId: data?.roomId || "",
+		topic: data?.topic || "",
 	};
 }
 

client/src/Hooks/useProxiesForm.ts

@@ -0,0 +1,22 @@
+import { useMemo } from "react";
+import { proxySchema, type ProxyFormData } from "@/Validation/proxy";
+import type { ProxyResponse } from "@/Types/Proxy";
+
+interface UseProxiesFormOptions {
+	data?: ProxyResponse | null;
+}
+
+export const useProxiesForm = ({ data }: UseProxiesFormOptions) => {
+	return useMemo(() => {
+		const defaults: ProxyFormData = {
+			name: data?.name ?? "",
+			protocol: data?.protocol ?? "http",
+			host: data?.host ?? "",
+			port: data?.port ?? 8080,
+			username: "",
+			password: "",
+		};
+
+		return { schema: proxySchema, defaults };
+	}, [data]);
+};

client/src/Hooks/useSettingsForm.ts

@@ -43,6 +43,8 @@ export const useSettingsForm = ({ data = null }: UseSettingsFormOptions = {}) =>
 			checkTTL: data?.checkTTL ?? 30,
 			pagespeedApiKey: "",
 			systemEmailPassword: "",
+			globalProxyEnabled: data?.globalProxyEnabled ?? false,
+			globalProxyId: data?.globalProxyId ?? null,
 		};
 
 		return { schema: settingsSchema, defaults };

client/src/Hooks/useSidebar.ts

@@ -6,7 +6,8 @@ const SIDEBAR_WIDTH_VAR = 250;
 const SIDEBAR_COLLAPSED_WIDTH_VAR = 64;
 
 // Transition timing for sidebar width changes
-const SIDEBAR_TRANSITION = "width 650ms cubic-bezier(0.36, -0.01, 0, 0.77)";
+const SIDEBAR_TRANSITION_TIMING = "650ms cubic-bezier(0.36, -0.01, 0, 0.77)";
+const SIDEBAR_TRANSITION = `width ${SIDEBAR_TRANSITION_TIMING}`;
 
 export const useSidebar = () => {
 	const collapsed = useSelector(
@@ -19,6 +20,7 @@ export const useSidebar = () => {
 		expandedWidth: SIDEBAR_WIDTH_VAR,
 		width: collapsed ? SIDEBAR_COLLAPSED_WIDTH_VAR : SIDEBAR_WIDTH_VAR,
 		transition: SIDEBAR_TRANSITION,
+		transitionTiming: SIDEBAR_TRANSITION_TIMING,
 	};
 };
 

client/src/Pages/Account/EditUser/index.tsx

@@ -1,11 +1,6 @@
-import { Trash2 } from "lucide-react";
+import { TextField, Button } from "@/Components/inputs";
-import { TextField, Button, Autocomplete } from "@/Components/inputs";
 import Stack from "@mui/material/Stack";
-import Typography from "@mui/material/Typography";
+import { FormProvider, useForm } from "react-hook-form";
-import IconButton from "@mui/material/IconButton";
-import Divider from "@mui/material/Divider";
-import FormHelperText from "@mui/material/FormHelperText";
-import { useForm, Controller } from "react-hook-form";
 import { ConfigBox, BasePage } from "@/Components/design-elements";
 
 import { UserRoles } from "@/Types/User";
@@ -22,6 +17,8 @@ import { useSelector } from "react-redux";
 import type { RootState } from "@/Types/state";
 import { LAYOUT } from "@/Utils/Theme/constants";
 import { useIsAdmin, useIsSuperAdmin } from "@/Hooks/useIsAdmin";
+import { FormTextField } from "@/Components/inputs/forms/FormTextField";
+import { FormMultiSelectField } from "@/Components/inputs/forms/FormMultiSelectField";
 
 interface RoleOption {
 	id: UserRole;
@@ -43,10 +40,11 @@ const EditUserPage = () => {
 
 	const { data: user, isLoading } = useGet<User>(`/auth/users/${userId}`);
 
-	const { control, handleSubmit, reset, watch, setValue } = useForm<EditUserFormData>({
+	const form = useForm<EditUserFormData>({
 		resolver,
 		defaultValues: defaults,
 	});
+	const { handleSubmit, reset } = form;
 
 	useEffect(() => {
 		if (user) {
@@ -64,13 +62,6 @@ const EditUserPage = () => {
 		name: t(`common.auth.roles.${role}`),
 	}));
 
-	const watchedRoles = watch("role");
-	const selectedRoles = roleOptions.filter((r) => watchedRoles?.includes(r.id));
-	const handleRemoveRole = (roleToRemove: UserRole) => {
-		const newRoles = watchedRoles.filter((role) => role !== roleToRemove);
-		setValue("role", newRoles, { shouldValidate: true });
-	};
-
 	const canDeleteUser =
 		isAdmin &&
 		userId !== currentUser?.id &&
@@ -90,42 +81,31 @@ const EditUserPage = () => {
 	};
 
 	return (
-		<BasePage loading={isLoading}>
+		<FormProvider {...form}>
-			<form onSubmit={handleSubmit(onSubmit)}>
+			<BasePage
+				loading={isLoading}
+				component={"form"}
+				onSubmit={handleSubmit(onSubmit)}
+			>
 				<Stack gap={theme.spacing(8)}>
 					<ConfigBox
 						title={t("pages.account.form.name.title")}
 						subtitle={t("pages.account.form.name.description")}
 						rightContent={
 							<Stack gap={theme.spacing(8)}>
-								<Controller
+								<FormTextField
 									name="firstName"
-									control={control}
+									autoComplete="given-name"
-									render={({ field, fieldState }) => (
+									fieldLabel={t("common.form.name.option.firstName.label")}
-										<TextField
+									placeholder={t("common.form.name.option.firstName.placeholder")}
-											{...field}
-											fieldLabel={t("common.form.name.option.firstName.label")}
-											placeholder={t("common.form.name.option.firstName.placeholder")}
-											error={!!fieldState.error}
-											helperText={fieldState.error?.message}
-											autoComplete="given-name"
-										/>
-									)}
 								/>
-								<Controller
+								<FormTextField
 									name="lastName"
-									control={control}
+									autoComplete="family-name"
-									render={({ field, fieldState }) => (
+									fieldLabel={t("common.form.name.option.lastName.label")}
-										<TextField
+									placeholder={t("common.form.name.option.lastName.placeholder")}
-											{...field}
-											fieldLabel={t("common.form.name.option.lastName.label")}
-											placeholder={t("common.form.name.option.lastName.placeholder")}
-											error={!!fieldState.error}
-											helperText={fieldState.error?.message}
-											autoComplete="family-name"
-										/>
-									)}
 								/>
+
 								<TextField
 									fieldLabel={t("common.form.email.option.email.label")}
 									placeholder={t("common.form.email.option.email.placeholder")}
@@ -139,55 +119,11 @@ const EditUserPage = () => {
 						title={t("pages.editUser.form.roles.title")}
 						subtitle={t("pages.editUser.form.roles.description")}
 						rightContent={
-							<Stack spacing={theme.spacing(4)}>
+							<FormMultiSelectField
-								<Controller
+								name="role"
-									name="role"
+								fieldLabel={t("common.form.role.option.role.label")}
-									control={control}
+								options={roleOptions}
-									render={({ field, fieldState }) => (
+							/>
-										<>
-											<Autocomplete
-												fieldLabel={t("common.form.role.option.role.label")}
-												multiple
-												options={roleOptions}
-												value={selectedRoles}
-												getOptionLabel={(option) => option.name}
-												onChange={(_: unknown, newValue: RoleOption[]) => {
-													field.onChange(newValue.map((r) => r.id));
-												}}
-												isOptionEqualToValue={(option, value) => option.id === value.id}
-											/>
-											{fieldState.error && (
-												<FormHelperText error>{fieldState.error.message}</FormHelperText>
-											)}
-										</>
-									)}
-								/>
-								{selectedRoles.length > 0 && (
-									<Stack
-										flex={1}
-										width="100%"
-									>
-										{selectedRoles.map((role, index) => (
-											<Stack
-												direction="row"
-												alignItems="center"
-												key={role.id}
-												width="100%"
-											>
-												<Typography flexGrow={1}>{role.name}</Typography>
-												<IconButton
-													size="small"
-													onClick={() => handleRemoveRole(role.id)}
-													aria-label="Remove role"
-												>
-													<Trash2 size={16} />
-												</IconButton>
-												{index < selectedRoles.length - 1 && <Divider />}
-											</Stack>
-										))}
-									</Stack>
-								)}
-							</Stack>
 						}
 					/>
 					<Stack
@@ -217,19 +153,19 @@ const EditUserPage = () => {
 						</Button>
 					</Stack>
 				</Stack>
-			</form>
+				<DialogInput
-			<DialogInput
+					open={showDeleteDialog}
-				open={showDeleteDialog}
+					title={t("pages.editUser.dialog.removeUser.title")}
-				title={t("pages.editUser.dialog.removeUser.title")}
+					content={t("pages.editUser.dialog.removeUser.content", {
-				content={t("pages.editUser.dialog.removeUser.content", {
+						name: `${user?.firstName} ${user?.lastName}`,
-					name: `${user?.firstName} ${user?.lastName}`,
+					})}
-				})}
+					onCancel={() => setShowDeleteDialog(false)}
-				onCancel={() => setShowDeleteDialog(false)}
+					onConfirm={handleDeleteUser}
-				onConfirm={handleDeleteUser}
+					confirmText={t("common.buttons.removeUser")}
-				confirmText={t("common.buttons.removeUser")}
+					loading={isDeleting}
-				loading={isDeleting}
+				/>
-			/>
+			</BasePage>
-		</BasePage>
+		</FormProvider>
 	);
 };
 

client/src/Pages/Account/TabPassword.tsx

@@ -1,13 +1,15 @@
 import { Stack } from "@mui/material";
 import { ConfigBox } from "@/Components/design-elements";
-import { TextField, Button } from "@/Components/inputs";
+import { Button } from "@/Components/inputs";
 
 import { useTranslation } from "react-i18next";
 import { useTheme } from "@mui/material";
-import { useForm, Controller } from "react-hook-form";
+import { useForm, FormProvider } from "react-hook-form";
 import { usePasswordForm } from "@/Hooks/usePasswordForm";
 import { usePatch } from "@/Hooks/UseApi";
 import type { PasswordFormData } from "@/Validation/password";
+import { FormTextField } from "@/Components/inputs/forms/FormTextField";
+import { LAYOUT } from "@/Utils/Theme/constants";
 
 export const TabPassword = () => {
 	const { t } = useTranslation();
@@ -15,10 +17,11 @@ export const TabPassword = () => {
 	const { resolver, defaults } = usePasswordForm();
 	const { patch, loading } = usePatch<FormData, void>();
 
-	const { control, handleSubmit, reset } = useForm<PasswordFormData>({
+	const form = useForm<PasswordFormData>({
 		resolver,
 		defaultValues: defaults,
 	});
+	const { handleSubmit, reset } = form;
 
 	const onSubmit = async (data: PasswordFormData) => {
 		const fd = new FormData();
@@ -32,85 +35,61 @@ export const TabPassword = () => {
 	};
 
 	return (
-		<Stack
+		<FormProvider {...form}>
-			gap={theme.spacing(8)}
+			<Stack
-			component="form"
+				gap={theme.spacing(LAYOUT.MD)}
-			onSubmit={handleSubmit(onSubmit)}
+				component="form"
-		>
+				onSubmit={handleSubmit(onSubmit)}
-			<ConfigBox
-				title={t("pages.account.form.currentPassword.title")}
-				subtitle={t("pages.account.form.currentPassword.description")}
-				rightContent={
-					<Controller
-						name="currentPassword"
-						control={control}
-						render={({ field, fieldState }) => (
-							<TextField
-								{...field}
-								type="password"
-								fieldLabel={t("pages.account.form.currentPassword.option.label")}
-								placeholder={t("pages.account.form.currentPassword.option.placeholder")}
-								autoComplete="current-password"
-								error={!!fieldState.error}
-								helperText={fieldState.error?.message ?? ""}
-							/>
-						)}
-					/>
-				}
-			/>
-			<ConfigBox
-				title={t("pages.account.form.newPassword.title")}
-				subtitle={t("pages.account.form.newPassword.description")}
-				rightContent={
-					<Stack gap={theme.spacing(8)}>
-						<Controller
-							name="newPassword"
-							control={control}
-							render={({ field, fieldState }) => (
-								<TextField
-									{...field}
-									type="password"
-									fieldLabel={t(
-										"pages.account.form.newPassword.option.newPassword.label"
-									)}
-									placeholder={t(
-										"pages.account.form.newPassword.option.newPassword.placeholder"
-									)}
-									autoComplete="new-password"
-									error={!!fieldState.error}
-									helperText={fieldState.error?.message ?? ""}
-								/>
-							)}
-						/>
-						<Controller
-							name="confirm"
-							control={control}
-							render={({ field, fieldState }) => (
-								<TextField
-									{...field}
-									type="password"
-									fieldLabel={t("pages.account.form.newPassword.option.confirm.label")}
-									placeholder={t(
-										"pages.account.form.newPassword.option.confirm.placeholder"
-									)}
-									autoComplete="new-password"
-									error={!!fieldState.error}
-									helperText={fieldState.error?.message ?? ""}
-								/>
-							)}
-						/>
-					</Stack>
-				}
-			/>
-			<Button
-				type="submit"
-				variant="contained"
-				color="primary"
-				loading={loading}
-				sx={{ alignSelf: "flex-end", minWidth: 100 }}
 			>
-				{t("common.buttons.save")}
+				<ConfigBox
-			</Button>
+					title={t("pages.account.form.currentPassword.title")}
-		</Stack>
+					subtitle={t("pages.account.form.currentPassword.description")}
+					rightContent={
+						<FormTextField
+							name="currentPassword"
+							type="password"
+							autoComplete="current-password"
+							fieldLabel={t("pages.account.form.currentPassword.option.label")}
+							placeholder={t("pages.account.form.currentPassword.option.placeholder")}
+						/>
+					}
+				/>
+				<ConfigBox
+					title={t("pages.account.form.newPassword.title")}
+					subtitle={t("pages.account.form.newPassword.description")}
+					rightContent={
+						<Stack gap={theme.spacing(LAYOUT.MD)}>
+							<FormTextField
+								name="newPassword"
+								type="password"
+								autoComplete="new-password"
+								fieldLabel={t("pages.account.form.newPassword.option.newPassword.label")}
+								placeholder={t(
+									"pages.account.form.newPassword.option.newPassword.placeholder"
+								)}
+							/>
+							<FormTextField
+								name="confirm"
+								type="password"
+								autoComplete="new-password"
+								fieldLabel={t("pages.account.form.newPassword.option.confirm.label")}
+								placeholder={t(
+									"pages.account.form.newPassword.option.confirm.placeholder"
+								)}
+							/>
+						</Stack>
+					}
+				/>
+				<Button
+					type="submit"
+					variant="contained"
+					color="primary"
+					loading={loading}
+					sx={{ alignSelf: "flex-end", minWidth: 100 }}
+				>
+					{t("common.buttons.save")}
+				</Button>
+			</Stack>
+		</FormProvider>
 	);
 };

client/src/Pages/Account/TabProfile.tsx

@@ -1,11 +1,11 @@
 import { Stack } from "@mui/material";
 import { ConfigBox } from "@/Components/design-elements";
-import { TextField, Button } from "@/Components/inputs";
+import { Button } from "@/Components/inputs";
 import { ImageUpload } from "@/Components/inputs";
 
 import { useTheme } from "@mui/material";
 import { useTranslation } from "react-i18next";
-import { useForm, Controller } from "react-hook-form";
+import { useForm, FormProvider } from "react-hook-form";
 import { useSelector, useDispatch } from "react-redux";
 import { useProfileForm } from "@/Hooks/useProfileForm";
 import { usePatch } from "@/Hooks/UseApi";
@@ -13,6 +13,8 @@ import { setUser } from "@/Features/Auth/authSlice";
 import type { ProfileFormData } from "@/Validation/profile";
 import type { RootState } from "@/Types/state";
 import type { User } from "@/Types/User";
+import { FormTextField } from "@/Components/inputs/forms/FormTextField";
+import { LAYOUT } from "@/Utils/Theme/constants";
 
 export const TabProfile = () => {
 	const theme = useTheme();
@@ -22,7 +24,7 @@ export const TabProfile = () => {
 	const { resolver, defaults } = useProfileForm();
 	const { patch, loading: patchLoading } = usePatch<FormData, User>();
 
-	const { control, handleSubmit, setValue, watch } = useForm<ProfileFormData>({
+	const form = useForm<ProfileFormData>({
 		resolver,
 		defaultValues: {
 			firstName: user?.firstName ?? defaults.firstName,
@@ -31,7 +33,7 @@ export const TabProfile = () => {
 			deleteProfileImage: defaults.deleteProfileImage,
 		},
 	});
-
+	const { handleSubmit, setValue, watch } = form;
 	const currentImage = watch("profileImage");
 	const deleteImage = watch("deleteProfileImage");
 
@@ -74,66 +76,52 @@ export const TabProfile = () => {
 	};
 
 	return (
-		<Stack
+		<FormProvider {...form}>
-			gap={theme.spacing(8)}
+			<Stack
-			component="form"
+				gap={theme.spacing(LAYOUT.MD)}
-			onSubmit={handleSubmit(onSubmit)}
+				component="form"
-		>
+				onSubmit={handleSubmit(onSubmit)}
-			<ConfigBox
-				title={t("pages.account.form.name.title")}
-				subtitle={t("pages.account.form.name.description")}
-				rightContent={
-					<Stack gap={theme.spacing(8)}>
-						<Controller
-							name="firstName"
-							control={control}
-							render={({ field, fieldState }) => (
-								<TextField
-									{...field}
-									fieldLabel={t("common.form.name.option.firstName.label")}
-									placeholder={t("common.form.name.option.firstName.placeholder")}
-									autoComplete="given-name"
-									error={!!fieldState.error}
-									helperText={fieldState.error?.message ?? ""}
-								/>
-							)}
-						/>
-						<Controller
-							name="lastName"
-							control={control}
-							render={({ field, fieldState }) => (
-								<TextField
-									{...field}
-									fieldLabel={t("common.form.name.option.lastName.label")}
-									placeholder={t("common.form.name.option.lastName.placeholder")}
-									autoComplete="family-name"
-									error={!!fieldState.error}
-									helperText={fieldState.error?.message ?? ""}
-								/>
-							)}
-						/>
-					</Stack>
-				}
-			/>
-			<ConfigBox
-				title={t("pages.account.form.photo.title")}
-				subtitle={t("pages.account.form.photo.description")}
-				rightContent={
-					<ImageUpload
-						src={getCurrentImageSrc()}
-						onChange={handleImageChange}
-					/>
-				}
-			/>
-			<Button
-				type="submit"
-				variant="contained"
-				color="primary"
-				loading={patchLoading}
-				sx={{ alignSelf: "flex-end", minWidth: 100 }}
 			>
-				{t("common.buttons.save")}
+				<ConfigBox
-			</Button>
+					title={t("pages.account.form.name.title")}
-		</Stack>
+					subtitle={t("pages.account.form.name.description")}
+					rightContent={
+						<Stack gap={theme.spacing(LAYOUT.MD)}>
+							<FormTextField
+								name="firstName"
+								autoComplete="given-name"
+								fieldLabel={t("common.form.name.option.firstName.label")}
+								placeholder={t("common.form.name.option.firstName.placeholder")}
+							/>
+							<FormTextField
+								name="lastName"
+								autoComplete="family-name"
+								fieldLabel={t("common.form.name.option.lastName.label")}
+								placeholder={t("common.form.name.option.lastName.placeholder")}
+							/>
+						</Stack>
+					}
+				/>
+				<ConfigBox
+					title={t("pages.account.form.photo.title")}
+					subtitle={t("pages.account.form.photo.description")}
+					rightContent={
+						<ImageUpload
+							src={getCurrentImageSrc()}
+							onChange={handleImageChange}
+						/>
+					}
+				/>
+				<Button
+					type="submit"
+					variant="contained"
+					color="primary"
+					loading={patchLoading}
+					sx={{ alignSelf: "flex-end", minWidth: 100 }}
+				>
+					{t("common.buttons.save")}
+				</Button>
+			</Stack>
+		</FormProvider>
 	);
 };

client/src/Pages/Account/components/AddTeamMemberDialog.tsx

@@ -1,15 +1,16 @@
 import { Stack } from "@mui/material";
-import MenuItem from "@mui/material/MenuItem";
 import { useTheme } from "@mui/material";
 import { useTranslation } from "react-i18next";
-import { useForm, Controller } from "react-hook-form";
+import { useForm, FormProvider } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod/dist/zod.js";
-import { Dialog, TextField, Select } from "@/Components/inputs";
+import { Dialog } from "@/Components/inputs";
 import { useAddTeamMemberForm } from "@/Hooks/useAddTeamMemberForm";
 import type { AddTeamMemberFormData } from "@/Validation/addTeamMember";
-import type { UserRole, User } from "@/Types/User";
+import type { User } from "@/Types/User";
 import { usePost } from "@/Hooks/UseApi";
 import { LAYOUT } from "@/Utils/Theme/constants";
+import { FormTextField } from "@/Components/inputs/forms/FormTextField";
+import { RoleSelectField } from "./RoleSelectField";
 
 interface AddTeamMemberDialogProps {
 	open: boolean;
@@ -35,17 +36,13 @@ export const AddTeamMemberDialog = ({
 	const { schema, defaults } = useAddTeamMemberForm();
 	const { post, loading } = usePost<RegisterPayload, User>();
 
-	const { control, handleSubmit, reset, setError } = useForm<AddTeamMemberFormData>({
+	const form = useForm<AddTeamMemberFormData>({
 		resolver: zodResolver(schema),
 		defaultValues: defaults,
 		values: defaults,
 	});
 
-	const roleOptions: { value: UserRole; label: string }[] = [
+	const { handleSubmit, reset, setError } = form;
-		{ value: "admin", label: t("common.auth.roles.admin") },
-		{ value: "user", label: t("common.auth.roles.user") },
-		{ value: "demo", label: t("common.auth.roles.demo") },
-	];
 
 	const handleClose = () => {
 		reset();
@@ -55,7 +52,7 @@ export const AddTeamMemberDialog = ({
 	const onSubmit = async (data: AddTeamMemberFormData) => {
 		if (loading) return;
 
-		const { confirm, ...userData } = data;
+		const { confirm: _confirm, ...userData } = data;
 		const payload: RegisterPayload = userData;
 
 		const result = await post("/auth/users", payload);
@@ -72,124 +69,64 @@ export const AddTeamMemberDialog = ({
 	};
 
 	return (
-		<Dialog
+		<FormProvider {...form}>
-			open={open}
+			<Dialog
-			title={t("pages.account.team.addMember.title")}
+				open={open}
-			content={t("pages.account.team.addMember.description")}
+				title={t("pages.account.team.addMember.title")}
-			onCancel={handleClose}
+				content={t("pages.account.team.addMember.description")}
-			onConfirm={handleSubmit(onSubmit)}
+				onCancel={handleClose}
-			confirmText={t("common.buttons.addMember")}
+				onConfirm={handleSubmit(onSubmit)}
-			loading={loading}
+				confirmText={t("common.buttons.addMember")}
-			maxWidth="sm"
+				loading={loading}
-			fullWidth
+				maxWidth="sm"
-		>
+				fullWidth
-			<Stack gap={theme.spacing(LAYOUT.XS)}>
+			>
-				<Stack
+				<Stack gap={theme.spacing(LAYOUT.XS)}>
-					direction="row"
+					<Stack
-					gap={theme.spacing(LAYOUT.XS)}
+						direction="row"
-				>
+						gap={theme.spacing(LAYOUT.XS)}
-					<Controller
+					>
-						name="firstName"
+						<FormTextField
-						control={control}
+							name="firstName"
-						render={({ field, fieldState }) => (
+							fieldLabel={t("common.form.name.option.firstName.label")}
-							<TextField
+							placeholder={t("common.form.name.option.firstName.placeholder")}
-								{...field}
-								fieldLabel={t("common.form.name.option.firstName.label")}
-								placeholder={t("common.form.name.option.firstName.placeholder")}
-								error={!!fieldState.error}
-								helperText={fieldState.error?.message ?? ""}
-								sx={{ flex: 1 }}
-							/>
-						)}
-					/>
-					<Controller
-						name="lastName"
-						control={control}
-						render={({ field, fieldState }) => (
-							<TextField
-								{...field}
-								fieldLabel={t("common.form.name.option.lastName.label")}
-								placeholder={t("common.form.name.option.lastName.placeholder")}
-								error={!!fieldState.error}
-								helperText={fieldState.error?.message ?? ""}
-								sx={{ flex: 1 }}
-							/>
-						)}
-					/>
-				</Stack>
-				<Controller
-					name="email"
-					control={control}
-					render={({ field, fieldState }) => (
-						<TextField
-							{...field}
-							fieldLabel={t("common.form.email.option.email.label")}
-							placeholder={t("common.form.email.option.email.placeholder")}
-							type="email"
-							error={!!fieldState.error}
-							helperText={fieldState.error?.message ?? ""}
-							fullWidth
 						/>
-					)}
+						<FormTextField
-				/>
+							name="lastName"
-				<Controller
+							fieldLabel={t("common.form.name.option.lastName.label")}
-					name="role"
+							placeholder={t("common.form.name.option.lastName.placeholder")}
-					control={control}
+						/>
-					render={({ field }) => (
+					</Stack>
-						<Select
+					<FormTextField
-							{...field}
+						name="email"
-							value={field.value[0] ?? "user"}
+						type="email"
-							onChange={(e) => field.onChange([e.target.value])}
+						fieldLabel={t("common.form.email.option.email.label")}
-							fieldLabel={t("common.form.role.option.role.label")}
+						placeholder={t("common.form.email.option.email.placeholder")}
-							fullWidth
-						>
-							{roleOptions.map((option) => (
-								<MenuItem
-									key={option.value}
-									value={option.value}
-								>
-									{option.label}
-								</MenuItem>
-							))}
-						</Select>
-					)}
-				/>
-				<Stack
-					direction="row"
-					gap={theme.spacing(LAYOUT.XS)}
-				>
-					<Controller
-						name="password"
-						control={control}
-						render={({ field, fieldState }) => (
-							<TextField
-								{...field}
-								fieldLabel={t("pages.auth.common.form.option.password.label")}
-								placeholder={t("pages.auth.common.form.option.password.placeholder")}
-								type="password"
-								error={!!fieldState.error}
-								helperText={fieldState.error?.message ?? ""}
-								sx={{ flex: 1 }}
-							/>
-						)}
-					/>
-					<Controller
-						name="confirm"
-						control={control}
-						render={({ field, fieldState }) => (
-							<TextField
-								{...field}
-								fieldLabel={t("pages.auth.common.form.option.confirmPassword.label")}
-								placeholder={t("pages.auth.common.form.option.password.placeholder")}
-								type="password"
-								error={!!fieldState.error}
-								helperText={fieldState.error?.message ?? ""}
-								sx={{ flex: 1 }}
-							/>
-						)}
 					/>
+
+					<RoleSelectField />
+
+					<Stack
+						direction="row"
+						gap={theme.spacing(LAYOUT.XS)}
+					>
+						<FormTextField
+							name="password"
+							fieldLabel={t("pages.auth.common.form.option.password.label")}
+							placeholder={t("pages.auth.common.form.option.password.placeholder")}
+							type="password"
+							sx={{ flex: 1 }}
+						/>
+
+						<FormTextField
+							name="confirm"
+							fieldLabel={t("pages.auth.common.form.option.confirmPassword.label")}
+							placeholder={t("pages.auth.common.form.option.password.placeholder")}
+							type="password"
+						/>
+					</Stack>
 				</Stack>
-			</Stack>
+			</Dialog>
-		</Dialog>
+		</FormProvider>
 	);
 };

client/src/Pages/Account/components/HeaderTeamControls.tsx

@@ -59,7 +59,12 @@ export const HeaderTeamControls = ({
 				<Button
 					variant="contained"
 					color="primary"
-					startIcon={<Icon icon={Mail} />}
+					startIcon={
+						<Icon
+							icon={Mail}
+							size={16}
+						/>
+					}
 					onClick={onInviteClick}
 				>
 					{t("common.buttons.inviteMember")}
@@ -69,7 +74,12 @@ export const HeaderTeamControls = ({
 				<Button
 					variant="contained"
 					color="primary"
-					startIcon={<Icon icon={UserPlus} />}
+					startIcon={
+						<Icon
+							icon={UserPlus}
+							size={16}
+						/>
+					}
 					onClick={onAddMemberClick}
 				>
 					{t("common.buttons.addMember")}

client/src/Pages/Account/components/InviteTeamMemberDialog.tsx

@@ -1,16 +1,16 @@
 import { Stack } from "@mui/material";
-import MenuItem from "@mui/material/MenuItem";
+import { useTheme, Typography } from "@mui/material";
-import { useTheme, FormHelperText, Typography } from "@mui/material";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useForm, Controller } from "react-hook-form";
+import { useForm, FormProvider } from "react-hook-form";
-import { Dialog, TextField, Select, Button } from "@/Components/inputs";
+import { Dialog, TextField, Button } from "@/Components/inputs";
-import type { UserRole } from "@/Types/User";
 import { useInviteForm } from "@/Hooks/useInviteForm";
 import type { InviteFormData } from "@/Validation/invite";
 import { usePost } from "@/Hooks/UseApi";
 import { LAYOUT } from "@/Utils/Theme/constants";
 import { runtimeConfig } from "@/Utils/runtimeConfig";
+import { FormTextField } from "@/Components/inputs/forms/FormTextField";
+import { RoleSelectField } from "./RoleSelectField";
 
 const CLIENT_HOST = runtimeConfig.clientHost || import.meta.env.VITE_APP_CLIENT_HOST;
 
@@ -31,11 +31,12 @@ export const InviteTeamMemberDialog = ({
 	const { t } = useTranslation();
 	const { resolver, defaults } = useInviteForm();
 
-	const { control, handleSubmit, reset } = useForm<InviteFormData>({
+	const form = useForm<InviteFormData>({
 		resolver,
 		defaultValues: defaults,
 		values: defaults,
 	});
+	const { handleSubmit, reset } = form;
 
 	const { post: generateToken, loading: generateLoading } = usePost<
 		InviteFormData,
@@ -47,12 +48,6 @@ export const InviteTeamMemberDialog = ({
 	>();
 	const [inviteLink, setInviteLink] = useState<string | null>(null);
 
-	const roleOptions: { value: UserRole; label: string }[] = [
-		{ value: "admin", label: t("common.auth.roles.admin") },
-		{ value: "user", label: t("common.auth.roles.user") },
-		{ value: "demo", label: t("common.auth.roles.demo") },
-	];
-
 	const handleGenerateToken = async (data: InviteFormData) => {
 		const result = await generateToken("/invite", data);
 		if (result?.data?.token) {
@@ -76,88 +71,55 @@ export const InviteTeamMemberDialog = ({
 	};
 
 	return (
-		<Dialog
+		<FormProvider {...form}>
-			open={open}
+			<Dialog
-			title={t("pages.account.team.invite.title")}
+				open={open}
-			content={t("pages.account.team.invite.description")}
+				title={t("pages.account.team.invite.title")}
-			onCancel={handleClose}
+				content={t("pages.account.team.invite.description")}
-			onConfirm={handleSubmit(handleSendInvite)}
+				onCancel={handleClose}
-			confirmText={t("common.buttons.sendInvite")}
+				onConfirm={handleSubmit(handleSendInvite)}
-			loading={sendLoading || generateLoading}
+				confirmText={t("common.buttons.sendInvite")}
-			maxWidth="sm"
+				loading={sendLoading || generateLoading}
-			fullWidth
+				maxWidth="sm"
-			additionalButtons={
+				fullWidth
-				<Button
+				additionalButtons={
-					variant="contained"
+					<Button
-					color="primary"
+						variant="contained"
-					onClick={handleSubmit(handleGenerateToken)}
+						color="primary"
-					loading={generateLoading || sendLoading}
+						onClick={handleSubmit(handleGenerateToken)}
-				>
+						loading={generateLoading || sendLoading}
-					{t("common.buttons.generateToken")}
+					>
-				</Button>
+						{t("common.buttons.generateToken")}
-			}
+					</Button>
-		>
+				}
-			<Stack gap={theme.spacing(LAYOUT.XS)}>
+			>
-				<Controller
+				<Stack gap={theme.spacing(LAYOUT.XS)}>
-					name="email"
+					<FormTextField
-					control={control}
+						name="email"
-					render={({ field, fieldState }) => (
+						type="email"
-						<TextField
+						fieldLabel={t("common.form.email.option.email.label")}
-							{...field}
+						placeholder={t("common.form.email.option.email.placeholder")}
-							fieldLabel={t("common.form.email.option.email.label")}
+					/>
-							placeholder={t("common.form.email.option.email.placeholder")}
+
-							type="email"
+					<RoleSelectField />
-							fullWidth
+					{inviteLink && (
-							error={!!fieldState.error}
-							helperText={fieldState.error?.message ?? ""}
-						/>
-					)}
-				/>
-				<Controller
-					name="role"
-					control={control}
-					render={({ field: { value, onChange, ...field }, fieldState }) => (
 						<>
-							<Select
+							<Typography variant="body2">
-								{...field}
+								{t("pages.account.team.invite.linkLabel")}
-								value={Array.isArray(value) ? (value[0] ?? "") : ""}
+							</Typography>
-								onChange={(e) => onChange([e.target.value as UserRole])}
+							<TextField
-								fieldLabel={t("common.form.role.option.role.label")}
+								value={inviteLink}
 								fullWidth
-								error={!!fieldState.error}
+								slotProps={{
-							>
+									input: {
-								{roleOptions.map((option) => (
+										readOnly: true,
-									<MenuItem
+									},
-										key={option.value}
+								}}
-										value={option.value}
+							/>
-									>
-										{option.label}
-									</MenuItem>
-								))}
-							</Select>
-							{fieldState.error && (
-								<FormHelperText error>{fieldState.error.message}</FormHelperText>
-							)}
 						</>
 					)}
-				/>
+				</Stack>
-				{inviteLink && (
+			</Dialog>
-					<>
+		</FormProvider>
-						<Typography variant="body2">
-							{t("pages.account.team.invite.linkLabel")}
-						</Typography>
-						<TextField
-							value={inviteLink}
-							fullWidth
-							slotProps={{
-								input: {
-									readOnly: true,
-								},
-							}}
-						/>
-					</>
-				)}
-			</Stack>
-		</Dialog>
 	);
 };

client/src/Pages/Account/components/RoleSelectField.tsx

@@ -0,0 +1,45 @@
+import MenuItem from "@mui/material/MenuItem";
+import FormHelperText from "@mui/material/FormHelperText";
+import { useController } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { Select } from "@/Components/inputs";
+import { UserRoles } from "@/Types/User";
+import type { UserRole } from "@/Types/User";
+
+export const RoleSelectField = () => {
+	const { t } = useTranslation();
+	const { field, fieldState } = useController<{ role: UserRole[] }, "role">({
+		name: "role",
+	});
+
+	const editableRoles = UserRoles.filter((role) => role !== "superadmin");
+	const roleOptions: { value: UserRole; label: string }[] = editableRoles.map((role) => ({
+		value: role,
+		label: t(`common.auth.roles.${role}`),
+	}));
+
+	return (
+		<>
+			<Select
+				{...field}
+				value={field.value[0] ?? "user"}
+				onChange={(e) => field.onChange([e.target.value])}
+				fieldLabel={t("common.form.role.option.role.label")}
+				fullWidth
+				error={!!fieldState.error}
+			>
+				{roleOptions.map((option) => (
+					<MenuItem
+						key={option.value}
+						value={option.value}
+					>
+						{option.label}
+					</MenuItem>
+				))}
+			</Select>
+			{fieldState.error && (
+				<FormHelperText error>{fieldState.error.message}</FormHelperText>
+			)}
+		</>
+	);
+};

client/src/Pages/Auth/Login/index.tsx

@@ -1,9 +1,9 @@
 import { BaseAuthPage, TextLink } from "@/Components/design-elements";
-import { Button, TextField } from "@/Components/inputs";
+import { Button } from "@/Components/inputs";
 
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useForm, Controller } from "react-hook-form";
+import { useForm, FormProvider } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod/dist/zod.js";
 import { useLoginForm } from "@/Hooks/useLoginForm";
 import type { LoginFormData } from "@/Validation/login";
@@ -11,6 +11,7 @@ import { useDispatch } from "react-redux";
 import { useNavigate } from "react-router-dom";
 import { setAuthState } from "@/Features/Auth/authSlice";
 import { useLazyGet, usePost } from "@/Hooks/UseApi";
+import { FormTextField } from "@/Components/inputs/forms/FormTextField";
 
 const LoginPage = () => {
 	const { t } = useTranslation();
@@ -31,11 +32,13 @@ const LoginPage = () => {
 
 	const { schema, defaults } = useLoginForm();
 
-	const { control, handleSubmit } = useForm<LoginFormData>({
+	const form = useForm<LoginFormData>({
 		resolver: zodResolver(schema),
 		defaultValues: defaults,
 	});
 
+	const { handleSubmit } = form;
+
 	if (isCheckingAdmin) return null;
 
 	const onSubmit = async (data: LoginFormData) => {
@@ -50,53 +53,39 @@ const LoginPage = () => {
 	};
 
 	return (
-		<BaseAuthPage
+		<FormProvider {...form}>
-			component="form"
+			<BaseAuthPage
-			onSubmit={handleSubmit(onSubmit)}
+				component="form"
-			title={t("pages.auth.login.title")}
+				onSubmit={handleSubmit(onSubmit)}
-			subtitle={t("pages.auth.login.subtitle")}
+				title={t("pages.auth.login.title")}
-		>
+				subtitle={t("pages.auth.login.subtitle")}
-			<Controller
-				name="email"
-				control={control}
-				render={({ field, fieldState }) => (
-					<TextField
-						{...field}
-						fieldLabel={t("pages.auth.common.form.option.email.label")}
-						placeholder={t("pages.auth.common.form.option.email.placeholder")}
-						error={!!fieldState.error}
-						helperText={fieldState.error ? t(fieldState.error.message ?? "") : ""}
-					/>
-				)}
-			/>
-			<Controller
-				name="password"
-				control={control}
-				render={({ field, fieldState }) => (
-					<TextField
-						{...field}
-						type="password"
-						fieldLabel={t("pages.auth.common.form.option.password.label")}
-						placeholder={t("pages.auth.common.form.option.password.placeholder")}
-						error={!!fieldState.error}
-						helperText={fieldState.error ? t(fieldState.error.message ?? "") : ""}
-					/>
-				)}
-			/>
-			<Button
-				variant="contained"
-				type="submit"
-				loading={loading}
 			>
-				{t("pages.auth.login.submit")}
+				<FormTextField
-			</Button>
+					name="email"
-			<TextLink
+					fieldLabel={t("pages.auth.common.form.option.email.label")}
-				alignSelf={"center"}
+					placeholder={t("pages.auth.common.form.option.email.placeholder")}
-				text={t("pages.auth.login.links.forgotPassword.text")}
+				/>
-				linkText={t("pages.auth.login.links.forgotPassword.linkText")}
+				<FormTextField
-				href="/forgot-password"
+					name="password"
-			/>
+					type="password"
-		</BaseAuthPage>
+					fieldLabel={t("pages.auth.common.form.option.password.label")}
+					placeholder={t("pages.auth.common.form.option.password.placeholder")}
+				/>
+				<Button
+					variant="contained"
+					type="submit"
+					loading={loading}
+				>
+					{t("pages.auth.login.submit")}
+				</Button>
+				<TextLink
+					alignSelf={"center"}
+					text={t("pages.auth.login.links.forgotPassword.text")}
+					linkText={t("pages.auth.login.links.forgotPassword.linkText")}
+					href="/forgot-password"
+				/>
+			</BaseAuthPage>
+		</FormProvider>
 	);
 };
 

client/src/Pages/Auth/Recovery/index.tsx

@@ -1,12 +1,13 @@
-import { Button, TextField } from "@/Components/inputs";
+import { Button } from "@/Components/inputs";
 import { BaseAuthPage, TextLink } from "@/Components/design-elements";
 
-import { useForm, Controller } from "react-hook-form";
+import { useForm, FormProvider } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod/dist/zod.js";
 import { useRecoveryForm } from "@/Hooks/useRecoveryForm";
 import type { RecoveryFormData } from "@/Validation/recovery";
 import { usePost } from "@/Hooks/UseApi";
 import { useTranslation } from "react-i18next";
+import { FormTextField } from "@/Components/inputs/forms/FormTextField";
 
 const ForgotPasswordPage = () => {
 	const { t } = useTranslation();
@@ -14,10 +15,11 @@ const ForgotPasswordPage = () => {
 
 	const { schema, defaults } = useRecoveryForm();
 
-	const { control, handleSubmit } = useForm<RecoveryFormData>({
+	const form = useForm<RecoveryFormData>({
 		resolver: zodResolver(schema),
 		defaultValues: defaults,
 	});
+	const { handleSubmit } = form;
 
 	const onSubmit = async (data: RecoveryFormData) => {
 		if (loading) return;
@@ -30,39 +32,33 @@ const ForgotPasswordPage = () => {
 	};
 
 	return (
-		<BaseAuthPage
+		<FormProvider {...form}>
-			component="form"
+			<BaseAuthPage
-			onSubmit={handleSubmit(onSubmit)}
+				component="form"
-			title={t("pages.auth.forgotPassword.title")}
+				onSubmit={handleSubmit(onSubmit)}
-			subtitle={t("pages.auth.forgotPassword.subtitle")}
+				title={t("pages.auth.forgotPassword.title")}
-		>
+				subtitle={t("pages.auth.forgotPassword.subtitle")}
-			<Controller
-				name="email"
-				control={control}
-				render={({ field, fieldState }) => (
-					<TextField
-						{...field}
-						fieldLabel={t("pages.auth.common.form.option.email.label")}
-						placeholder={t("pages.auth.common.form.option.email.placeholder")}
-						error={!!fieldState.error}
-						helperText={fieldState.error ? t(fieldState.error.message ?? "") : ""}
-					/>
-				)}
-			/>
-			<Button
-				variant="contained"
-				type="submit"
-				loading={loading}
 			>
-				{t("pages.auth.forgotPassword.submit")}
+				<FormTextField
-			</Button>
+					name="email"
-			<TextLink
+					fieldLabel={t("pages.auth.common.form.option.email.label")}
-				alignSelf={"center"}
+					placeholder={t("pages.auth.common.form.option.email.placeholder")}
-				text={t("pages.auth.forgotPassword.links.login.text")}
+				/>
-				linkText={t("pages.auth.forgotPassword.links.login.linkText")}
+				<Button
-				href="/login"
+					variant="contained"
-			/>
+					type="submit"
-		</BaseAuthPage>
+					loading={loading}
+				>
+					{t("pages.auth.forgotPassword.submit")}
+				</Button>
+				<TextLink
+					alignSelf={"center"}
+					text={t("pages.auth.forgotPassword.links.login.text")}
+					linkText={t("pages.auth.forgotPassword.links.login.linkText")}
+					href="/login"
+				/>
+			</BaseAuthPage>
+		</FormProvider>
 	);
 };
 

client/src/Pages/Auth/Register/index.tsx

@@ -1,7 +1,7 @@
 import { BaseAuthPage } from "@/Components/design-elements";
-import { Button, TextField } from "@/Components/inputs";
+import { Button } from "@/Components/inputs";
 import Alert from "@mui/material/Alert";
-import { useForm, Controller } from "react-hook-form";
+import { useForm, FormProvider } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod/dist/zod.js";
 import { useRegisterForm } from "@/Hooks/useRegisterForm";
 import type { RegisterFormData } from "@/Validation/register";
@@ -12,6 +12,7 @@ import { useDispatch } from "react-redux";
 import { useNavigate, useParams } from "react-router-dom";
 import type { AuthResponse } from "@/Types/User";
 import { useEffect, useRef, useState } from "react";
+import { FormTextField } from "@/Components/inputs/forms/FormTextField";
 
 interface RegisterPayload {
 	user: Omit<RegisterFormData, "confirm">;
@@ -45,10 +46,11 @@ const RegisterPage = () => {
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
 
-	const { control, handleSubmit, setError, reset } = useForm<RegisterFormData>({
+	const form = useForm<RegisterFormData>({
 		resolver: zodResolver(schema),
 		defaultValues: defaults,
 	});
+	const { handleSubmit, setError, reset } = form;
 
 	useEffect(() => {
 		if (!token || hasVerified.current) return;
@@ -64,14 +66,14 @@ const RegisterPage = () => {
 				navigate("/register", { replace: true });
 			}
 		});
-	}, [token]);
+	}, [token, defaults, navigate, reset, verifyToken]);
 
 	if (isCheckingAdmin) return null;
 
 	const onSubmit = async (data: RegisterFormData) => {
 		if (loading) return;
 
-		const { confirm, ...userData } = data;
+		const { confirm: _confirm, ...userData } = data;
 		const payload: RegisterPayload = { user: userData };
 		if (token) {
 			payload.token = token;
@@ -89,105 +91,70 @@ const RegisterPage = () => {
 	};
 
 	return (
-		<BaseAuthPage
+		<FormProvider {...form}>
-			component="form"
+			<BaseAuthPage
-			onSubmit={handleSubmit(onSubmit)}
+				component="form"
-			title={t("pages.auth.register.title")}
+				onSubmit={handleSubmit(onSubmit)}
-			subtitle={t("pages.auth.register.subtitle")}
+				title={t("pages.auth.register.title")}
-		>
+				subtitle={t("pages.auth.register.subtitle")}
-			{!token && (
-				<Alert
-					severity="info"
-					icon={false}
-					sx={(theme) => ({
-						fontSize: 13,
-						lineHeight: 1.55,
-						color: theme.palette.text.secondary,
-						backgroundColor: theme.palette.action.hover,
-						border: `1px solid ${theme.palette.divider}`,
-						borderRadius: 1,
-						"& .MuiAlert-message": { padding: 0 },
-					})}
-				>
-					{t("pages.auth.register.setupNotice")}
-				</Alert>
-			)}
-			<Controller
-				name="firstName"
-				control={control}
-				render={({ field, fieldState }) => (
-					<TextField
-						{...field}
-						fieldLabel={t("common.form.name.option.firstName.label")}
-						placeholder={t("common.form.name.option.firstName.placeholder")}
-						error={!!fieldState.error}
-						helperText={fieldState.error?.message ?? ""}
-					/>
-				)}
-			/>
-			<Controller
-				name="lastName"
-				control={control}
-				render={({ field, fieldState }) => (
-					<TextField
-						{...field}
-						fieldLabel={t("common.form.name.option.lastName.label")}
-						placeholder={t("common.form.name.option.lastName.placeholder")}
-						error={!!fieldState.error}
-						helperText={fieldState.error?.message ?? ""}
-					/>
-				)}
-			/>
-			<Controller
-				name="email"
-				control={control}
-				render={({ field, fieldState }) => (
-					<TextField
-						{...field}
-						disabled={!!token}
-						fieldLabel={t("common.form.email.option.email.label")}
-						placeholder={t("common.form.email.option.email.placeholder")}
-						error={!!fieldState.error}
-						helperText={fieldState.error?.message ?? ""}
-					/>
-				)}
-			/>
-			<Controller
-				name="password"
-				control={control}
-				render={({ field, fieldState }) => (
-					<TextField
-						{...field}
-						type="password"
-						fieldLabel={t("pages.auth.common.form.option.password.label")}
-						placeholder={t("pages.auth.common.form.option.password.placeholder")}
-						error={!!fieldState.error}
-						helperText={fieldState.error?.message ?? ""}
-					/>
-				)}
-			/>
-			<Controller
-				name="confirm"
-				control={control}
-				render={({ field, fieldState }) => (
-					<TextField
-						{...field}
-						type="password"
-						fieldLabel={t("pages.auth.common.form.option.confirmPassword.label")}
-						placeholder={t("pages.auth.common.form.option.password.placeholder")}
-						error={!!fieldState.error}
-						helperText={fieldState.error?.message ?? ""}
-					/>
-				)}
-			/>
-			<Button
-				variant="contained"
-				type="submit"
-				loading={loading}
 			>
-				{t("pages.auth.register.submit")}
+				{!token && (
-			</Button>
+					<Alert
-		</BaseAuthPage>
+						severity="info"
+						icon={false}
+						sx={(theme) => ({
+							fontSize: 13,
+							lineHeight: 1.55,
+							color: theme.palette.text.secondary,
+							backgroundColor: theme.palette.action.hover,
+							border: `1px solid ${theme.palette.divider}`,
+							borderRadius: 1,
+							"& .MuiAlert-message": { padding: 0 },
+						})}
+					>
+						{t("pages.auth.register.setupNotice")}
+					</Alert>
+				)}
+				<FormTextField
+					name="firstName"
+					fieldLabel={t("common.form.name.option.firstName.label")}
+					placeholder={t("common.form.name.option.firstName.placeholder")}
+				/>
+				<FormTextField
+					name="lastName"
+					fieldLabel={t("common.form.name.option.lastName.label")}
+					placeholder={t("common.form.name.option.lastName.placeholder")}
+				/>
+				<FormTextField
+					name="email"
+					disabled={!!token}
+					fieldLabel={t("common.form.email.option.email.label")}
+					placeholder={t("common.form.email.option.email.placeholder")}
+				/>
+
+				<FormTextField
+					name="password"
+					type="password"
+					fieldLabel={t("pages.auth.common.form.option.password.label")}
+					placeholder={t("pages.auth.common.form.option.password.placeholder")}
+				/>
+
+				<FormTextField
+					name="confirm"
+					type="password"
+					fieldLabel={t("pages.auth.common.form.option.confirmPassword.label")}
+					placeholder={t("pages.auth.common.form.option.password.placeholder")}
+				/>
+
+				<Button
+					variant="contained"
+					type="submit"
+					loading={loading}
+				>
+					{t("pages.auth.register.submit")}
+				</Button>
+			</BaseAuthPage>
+		</FormProvider>
 	);
 };
 

client/src/Pages/Auth/SetNewPassword/index.tsx

@@ -1,9 +1,9 @@
 import { BaseAuthPage, BulletPointCheck, TextLink } from "@/Components/design-elements";
-import { Button, TextField } from "@/Components/inputs";
+import { Button } from "@/Components/inputs";
 import Stack from "@mui/material/Stack";
 import { useTheme } from "@mui/material/styles";
 import { useTranslation } from "react-i18next";
-import { useForm, Controller } from "react-hook-form";
+import { useForm, FormProvider } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod/dist/zod.js";
 import { useSetNewPasswordForm } from "@/Hooks/useSetNewPasswordForm";
 import type { SetNewPasswordFormData } from "@/Validation/setNewPassword";
@@ -12,6 +12,7 @@ import { useParams, useNavigate } from "react-router-dom";
 import { usePost } from "@/Hooks/UseApi";
 import { useDispatch } from "react-redux";
 import { setAuthState } from "@/Features/Auth/authSlice";
+import { FormTextField } from "@/Components/inputs/forms/FormTextField";
 
 const SetNewPasswordPage = () => {
 	const theme = useTheme();
@@ -23,11 +24,11 @@ const SetNewPasswordPage = () => {
 
 	const { schema, defaults } = useSetNewPasswordForm();
 
-	const { control, handleSubmit, watch } = useForm<SetNewPasswordFormData>({
+	const form = useForm<SetNewPasswordFormData>({
 		resolver: zodResolver(schema),
 		defaultValues: defaults,
 	});
-
+	const { handleSubmit, watch } = form;
 	const password = watch("password");
 	const confirm = watch("confirm");
 
@@ -57,81 +58,68 @@ const SetNewPasswordPage = () => {
 	};
 
 	return (
-		<BaseAuthPage
+		<FormProvider {...form}>
-			component="form"
+			<BaseAuthPage
-			onSubmit={handleSubmit(onSubmit)}
+				component="form"
-			title={t("pages.auth.setNewPassword.title")}
+				onSubmit={handleSubmit(onSubmit)}
-			subtitle={t("pages.auth.setNewPassword.subtitle")}
+				title={t("pages.auth.setNewPassword.title")}
-		>
+				subtitle={t("pages.auth.setNewPassword.subtitle")}
-			<Controller
-				name="password"
-				control={control}
-				render={({ field, fieldState }) => (
-					<TextField
-						{...field}
-						type="password"
-						fieldLabel={t("pages.auth.common.form.option.password.label")}
-						placeholder={t("pages.auth.common.form.option.password.placeholder")}
-						error={!!fieldState.error}
-						helperText={fieldState.error?.message ?? ""}
-					/>
-				)}
-			/>
-			<Controller
-				name="confirm"
-				control={control}
-				render={({ field, fieldState }) => (
-					<TextField
-						{...field}
-						type="password"
-						fieldLabel={t("pages.auth.common.form.option.confirmPassword.label")}
-						placeholder={t("pages.auth.common.form.option.password.placeholder")}
-						error={!!fieldState.error}
-						helperText={fieldState.error?.message ?? ""}
-					/>
-				)}
-			/>
-			<Stack gap={theme.spacing(4)}>
-				<BulletPointCheck
-					text={t("pages.auth.common.passwordRules.length")}
-					variant={getVariant(hasLength)}
-				/>
-				<BulletPointCheck
-					text={t("pages.auth.common.passwordRules.special")}
-					variant={getVariant(hasSpecial)}
-				/>
-				<BulletPointCheck
-					text={t("pages.auth.common.passwordRules.number")}
-					variant={getVariant(hasNumber)}
-				/>
-				<BulletPointCheck
-					text={t("pages.auth.common.passwordRules.uppercase")}
-					variant={getVariant(hasUppercase)}
-				/>
-				<BulletPointCheck
-					text={t("pages.auth.common.passwordRules.lowercase")}
-					variant={getVariant(hasLowercase)}
-				/>
-				<BulletPointCheck
-					text={t("pages.auth.common.passwordRules.match")}
-					variant={getVariant(passwordsMatch)}
-				/>
-			</Stack>
-			<Button
-				variant="contained"
-				type="submit"
-				fullWidth
-				loading={loading}
 			>
-				{t("common.buttons.resetPassword")}
+				<FormTextField
-			</Button>
+					name="password"
-			<TextLink
+					type="password"
-				alignSelf="center"
+					fieldLabel={t("pages.auth.common.form.option.password.label")}
-				text={t("pages.auth.forgotPassword.links.login.text")}
+					placeholder={t("pages.auth.common.form.option.password.placeholder")}
-				linkText={t("pages.auth.forgotPassword.links.login.linkText")}
+				/>
-				href="/login"
+				<FormTextField
-			/>
+					name="confirm"
-		</BaseAuthPage>
+					type="password"
+					fieldLabel={t("pages.auth.common.form.option.confirmPassword.label")}
+					placeholder={t("pages.auth.common.form.option.password.placeholder")}
+				/>
+
+				<Stack gap={theme.spacing(4)}>
+					<BulletPointCheck
+						text={t("pages.auth.common.passwordRules.length")}
+						variant={getVariant(hasLength)}
+					/>
+					<BulletPointCheck
+						text={t("pages.auth.common.passwordRules.special")}
+						variant={getVariant(hasSpecial)}
+					/>
+					<BulletPointCheck
+						text={t("pages.auth.common.passwordRules.number")}
+						variant={getVariant(hasNumber)}
+					/>
+					<BulletPointCheck
+						text={t("pages.auth.common.passwordRules.uppercase")}
+						variant={getVariant(hasUppercase)}
+					/>
+					<BulletPointCheck
+						text={t("pages.auth.common.passwordRules.lowercase")}
+						variant={getVariant(hasLowercase)}
+					/>
+					<BulletPointCheck
+						text={t("pages.auth.common.passwordRules.match")}
+						variant={getVariant(passwordsMatch)}
+					/>
+				</Stack>
+				<Button
+					variant="contained"
+					type="submit"
+					fullWidth
+					loading={loading}
+				>
+					{t("common.buttons.resetPassword")}
+				</Button>
+				<TextLink
+					alignSelf="center"
+					text={t("pages.auth.forgotPassword.links.login.text")}
+					linkText={t("pages.auth.forgotPassword.links.login.linkText")}
+					href="/login"
+				/>
+			</BaseAuthPage>
+		</FormProvider>
 	);
 };
 

client/src/Pages/Checks/index.tsx

@@ -17,13 +17,14 @@ import { useParams } from "react-router-dom";
 import { useGet } from "@/Hooks/UseApi";
 import type { Monitor } from "@/Types/Monitor";
 import type { ChecksSummary, ChecksResponse } from "@/Types/Check";
+import type { DateRange } from "@/Types/Query";
 
 const Checks = () => {
 	const { t } = useTranslation();
 	const { monitorId } = useParams<{ monitorId?: string }>();
 
 	const [selectedMonitor, setSelectedMonitor] = useState<string>(monitorId || "0");
-	const [dateRange, setDateRange] = useState<string>("recent");
+	const [dateRange, setDateRange] = useState<DateRange>("recent");
 	const [statusFilter, setStatusFilter] = useState<string>("down");
 	const [page, setPage] = useState<number>(0);
 	const [rowsPerPage, setRowsPerPage] = useState<number>(10);

client/src/Pages/Dashboard/Components/CardGrid.tsx

@@ -0,0 +1,78 @@
+import Box from "@mui/material/Box";
+import { useTheme } from "@mui/material/styles";
+import { useMemo } from "react";
+
+import { LAYOUT } from "@/Utils/Theme/constants";
+import { GRID_COLUMNS, type CardDefinition, type CardId } from "../cards";
+import { layoutCards } from "../layout";
+import { useCardTransitions } from "../useCardTransitions";
+import { CardReorderControls } from "./CardReorderControls";
+import { CardSlotContext } from "./CardSlotContext";
+
+export const CardGrid = ({
+	cards,
+	onMove,
+}: {
+	cards: CardDefinition[];
+	onMove: (id: CardId, delta: -1 | 1) => void;
+}) => {
+	const theme = useTheme();
+	const placed = useMemo(() => layoutCards(cards), [cards]);
+	const { registerCard, capturePositions } = useCardTransitions();
+
+	// Positions are measured before the state change so the cards can be
+	// animated from where they were to where they land.
+	const handleMove = (id: CardId, delta: -1 | 1) => {
+		capturePositions(id);
+		onMove(id, delta);
+	};
+
+	return (
+		<Box
+			display="grid"
+			gap={theme.spacing(LAYOUT.MD)}
+			sx={{
+				gridTemplateColumns: {
+					xs: "1fr",
+					md: `repeat(${GRID_COLUMNS}, 1fr)`,
+				},
+				alignItems: "stretch",
+			}}
+		>
+			{placed.map(({ card, renderedWidth }, index) => {
+				const Component = card.component;
+				return (
+					<Box
+						key={card.id}
+						ref={(node: HTMLElement | null) => registerCard(card.id, node)}
+						minWidth={0}
+						// Positioned so the moving card can be lifted above its
+						// neighbours with a z-index while it travels.
+						position="relative"
+						gridColumn={{ xs: "auto", md: `span ${renderedWidth}` }}
+						// Hints the compositor before a transform is applied, so the
+						// first frame of a move does not stutter.
+						sx={{ willChange: "transform" }}
+					>
+						{/*
+						 * The controls go through context rather than a prop so the 17
+						 * card components stay unaware of their own position.
+						 */}
+						<CardSlotContext.Provider
+							value={
+								<CardReorderControls
+									canMoveUp={index > 0}
+									canMoveDown={index < placed.length - 1}
+									onMoveUp={() => handleMove(card.id, -1)}
+									onMoveDown={() => handleMove(card.id, 1)}
+								/>
+							}
+						>
+							<Component />
+						</CardSlotContext.Provider>
+					</Box>
+				);
+			})}
+		</Box>
+	);
+};

client/src/Pages/Dashboard/Components/CardPicker.tsx

@@ -0,0 +1,127 @@
+import Stack from "@mui/material/Stack";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import { useTheme } from "@mui/material/styles";
+import { useTranslation } from "react-i18next";
+import { useMemo } from "react";
+
+import { Dialog, Checkbox } from "@/Components/inputs";
+import { LAYOUT } from "@/Utils/Theme/constants";
+import { CardGroups, type CardDefinition, type CardGroup, type CardId } from "../cards";
+
+interface CardPickerProps {
+	open: boolean;
+	available: CardDefinition[];
+	selected: CardId[];
+	onAdd: (id: CardId) => void;
+	onRemove: (id: CardId) => void;
+	onReset: () => void;
+	onClose: () => void;
+}
+
+/**
+ * Cards are grouped by sidebar section, not by load cost: you look for a card
+ * where you look for the feature it belongs to. Admin-only cards never reach
+ * `available` for a non-admin, so nobody is offered a card they cannot load.
+ */
+export const CardPicker = ({
+	open,
+	available,
+	selected,
+	onAdd,
+	onRemove,
+	onReset,
+	onClose,
+}: CardPickerProps) => {
+	const theme = useTheme();
+	const { t } = useTranslation();
+
+	const grouped = useMemo(() => {
+		return CardGroups.map((group: CardGroup) => ({
+			group,
+			cards: available.filter((card) => card.group === group),
+		})).filter((entry) => entry.cards.length > 0);
+	}, [available]);
+
+	const chosen = new Set(selected);
+
+	return (
+		<Dialog
+			open={open}
+			maxWidth="sm"
+			fullWidth
+			title={t("pages.dashboard.picker.title")}
+			// The dialog lays its actions out as cancel → additional → confirm, all
+			// right-aligned. Reset takes the cancel slot with an auto right margin
+			// so it sits alone on the left, away from Done — a destructive action
+			// should not be adjacent to the one people reach for by reflex.
+			onCancel={onReset}
+			cancelText={t("pages.dashboard.picker.reset")}
+			cancelSx={{ marginRight: "auto" }}
+			// Escape must dismiss, not reset. The dialog sends Escape to onCancel by
+			// default, and this one's cancel slot resets the selection — so without
+			// this, Escape would wipe the user's cards instead of closing.
+			onEscape={onClose}
+			// Changes apply immediately, so Done only dismisses; it is the primary
+			// action here and carries the usual contained styling.
+			onConfirm={onClose}
+			confirmText={t("pages.dashboard.picker.done")}
+		>
+			{/*
+			 * Two columns: seventeen cards in one list makes the dialog scroll,
+			 * which hides most of the catalogue behind a scrollbar. Groups flow
+			 * down the columns and are kept whole, so a group is never split
+			 * across the gap.
+			 */}
+			<Box
+				pt={theme.spacing(LAYOUT.SM)}
+				sx={{
+					columnCount: { xs: 1, sm: 2 },
+					columnGap: theme.spacing(LAYOUT.XL),
+				}}
+			>
+				{grouped.map(({ group, cards }) => (
+					<Stack
+						key={group}
+						gap={theme.spacing(LAYOUT.XXS)}
+						pb={theme.spacing(LAYOUT.MD)}
+						sx={{ breakInside: "avoid" }}
+					>
+						<Typography
+							variant="eyebrow"
+							color={theme.palette.text.disabled}
+						>
+							{/*
+							 * The picker has its own group labels rather than reusing the
+							 * sidebar's: the Logs page hosts logs, queue and diagnostics
+							 * tabs, so "Logs" would misdescribe the three cards under it.
+							 */}
+							{t(`pages.dashboard.picker.groups.${group}`, {
+								defaultValue: group,
+							})}
+						</Typography>
+						{cards.map((card) => (
+							<FormControlLabel
+								key={card.id}
+								label={
+									<Typography color={theme.palette.text.primary}>
+										{t(`pages.dashboard.cards.${card.key}.title`)}
+									</Typography>
+								}
+								control={
+									<Checkbox
+										checked={chosen.has(card.id)}
+										onChange={() =>
+											chosen.has(card.id) ? onRemove(card.id) : onAdd(card.id)
+										}
+									/>
+								}
+							/>
+						))}
+					</Stack>
+				))}
+			</Box>
+		</Dialog>
+	);
+};

client/src/Pages/Dashboard/Components/CardPrimitives.tsx

@@ -0,0 +1,275 @@
+import Stack from "@mui/material/Stack";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import { useTheme } from "@mui/material/styles";
+import { Link as RouterLink } from "react-router-dom";
+
+import { Tooltip } from "@/Components/design-elements";
+import { LAYOUT } from "@/Utils/Theme/constants";
+import { typographyLevels } from "@/Utils/Theme/Palette";
+
+import type { ReactNode } from "react";
+
+/**
+ * One thickness for every bar on the dashboard. Plain and segmented bars sit
+ * side by side across cards, so differing weights read as an inconsistency
+ * rather than as emphasis.
+ */
+const BAR_HEIGHT = 8;
+
+export interface BarSegment {
+	key: string;
+	value: number;
+	color: string;
+	/** Tooltip text, since the segments themselves carry no labels. */
+	label: string;
+}
+
+/**
+ * A proportional bar. `value` and `max` share whatever unit the caller uses;
+ * percentages come in as 0-100, not as the API's 0-1 fractions.
+ */
+export const CardBar = ({
+	value,
+	max = 100,
+	color,
+}: {
+	value: number;
+	max?: number;
+	color: string;
+}) => {
+	const theme = useTheme();
+	const ratio = max > 0 ? Math.min(Math.max(value / max, 0), 1) : 0;
+
+	return (
+		<Box
+			width="100%"
+			height={BAR_HEIGHT}
+			borderRadius={theme.shape.borderRadius}
+			bgcolor={theme.palette.action.hover}
+			sx={{ overflow: "hidden" }}
+		>
+			<Box
+				width={`${ratio * 100}%`}
+				height="100%"
+				bgcolor={color}
+				sx={{ transition: "width 0.3s ease" }}
+			/>
+		</Box>
+	);
+};
+
+/**
+ * One bar divided into proportional segments — the shape of a whole split into
+ * parts, where the relative sizes are the point rather than any single value.
+ *
+ * Zero-value segments are dropped so they cannot appear as hairlines, and each
+ * segment carries a tooltip because the bar itself has no room for labels.
+ */
+export const CardSegmentedBar = ({ segments }: { segments: BarSegment[] }) => {
+	const theme = useTheme();
+	const visible = segments.filter((segment) => segment.value > 0);
+	const total = visible.reduce((sum, segment) => sum + segment.value, 0);
+
+	return (
+		<Stack
+			direction="row"
+			width="100%"
+			height={BAR_HEIGHT}
+			borderRadius={theme.shape.borderRadius}
+			bgcolor={theme.palette.action.hover}
+			gap="1px"
+			sx={{ overflow: "hidden" }}
+		>
+			{total > 0 &&
+				visible.map((segment) => (
+					<Tooltip
+						key={segment.key}
+						title={segment.label}
+					>
+						<Box
+							width={`${(segment.value / total) * 100}%`}
+							height="100%"
+							bgcolor={segment.color}
+							sx={{ transition: "width 0.3s ease" }}
+						/>
+					</Tooltip>
+				))}
+		</Stack>
+	);
+};
+
+/** A clickable list row. Rows link to the entity they describe. */
+export const CardRow = ({ to, children }: { to?: string; children: ReactNode }) => {
+	const theme = useTheme();
+
+	return (
+		<Stack
+			{...(to ? { component: RouterLink, to } : {})}
+			direction="row"
+			alignItems="center"
+			gap={theme.spacing(LAYOUT.SM)}
+			px={theme.spacing(LAYOUT.XS)}
+			py={theme.spacing(LAYOUT.XS)}
+			mx={`-${theme.spacing(LAYOUT.XS)}`}
+			borderRadius={theme.shape.borderRadius}
+			color="inherit"
+			sx={{
+				textDecoration: "none",
+				...(to && {
+					"&:hover": { backgroundColor: theme.palette.action.hover },
+				}),
+			}}
+		>
+			{children}
+		</Stack>
+	);
+};
+
+/** Name plus optional secondary line, truncating rather than wrapping. */
+export const CardRowLabel = ({
+	primary,
+	secondary,
+}: {
+	primary: string;
+	secondary?: string | null;
+}) => {
+	const theme = useTheme();
+
+	return (
+		<Stack
+			minWidth={0}
+			flex={1}
+		>
+			<Typography
+				color={theme.palette.text.primary}
+				noWrap
+			>
+				{primary}
+			</Typography>
+			{secondary && (
+				<Typography
+					color={theme.palette.text.secondary}
+					noWrap
+				>
+					{secondary}
+				</Typography>
+			)}
+		</Stack>
+	);
+};
+
+/** A single large figure with a caption — the shape of the stat cards. */
+export const CardFigure = ({
+	value,
+	caption,
+	color,
+}: {
+	value: string;
+	caption?: string;
+	color?: string;
+}) => {
+	const theme = useTheme();
+
+	return (
+		<Stack gap={theme.spacing(LAYOUT.XXS)}>
+			<Typography
+				fontSize={typographyLevels.xxl}
+				fontWeight={300}
+				color={color ?? theme.palette.text.primary}
+				lineHeight={1.1}
+			>
+				{value}
+			</Typography>
+			{caption && <Typography color={theme.palette.text.secondary}>{caption}</Typography>}
+		</Stack>
+	);
+};
+
+/**
+ * A label with its value on the right — the shape almost every stat card
+ * repeats. `color` highlights the value alone, leaving the label quiet.
+ */
+export const CardStatLine = ({
+	label,
+	value,
+	color,
+}: {
+	label: string;
+	value: string;
+	color?: string;
+}) => {
+	const theme = useTheme();
+
+	return (
+		<Stack
+			direction="row"
+			alignItems="baseline"
+			justifyContent="space-between"
+			gap={theme.spacing(LAYOUT.SM)}
+		>
+			<Typography color={theme.palette.text.secondary}>{label}</Typography>
+			<Typography
+				color={color ?? theme.palette.text.primary}
+				noWrap
+			>
+				{value}
+			</Typography>
+		</Stack>
+	);
+};
+
+/**
+ * A CardStatLine with a proportional bar beneath it — the ranking and
+ * breakdown row. `max` defaults to a percentage scale; pass the largest value
+ * in the set to make bars relative to each other instead.
+ *
+ * `label` may be a node so callers can put a "N down" flag beside the name.
+ */
+export const CardMeterRow = ({
+	label,
+	value,
+	max,
+	color,
+	trailing,
+}: {
+	label: ReactNode;
+	value: number;
+	max?: number;
+	color: string;
+	trailing?: ReactNode;
+}) => {
+	const theme = useTheme();
+
+	return (
+		<Stack
+			flex={1}
+			minWidth={0}
+			gap={theme.spacing(LAYOUT.XXS)}
+		>
+			<Stack
+				direction="row"
+				alignItems="center"
+				justifyContent="space-between"
+				gap={theme.spacing(LAYOUT.SM)}
+			>
+				{typeof label === "string" ? (
+					<Typography
+						color={theme.palette.text.primary}
+						noWrap
+					>
+						{label}
+					</Typography>
+				) : (
+					label
+				)}
+				{trailing}
+			</Stack>
+			<CardBar
+				value={value}
+				max={max}
+				color={color}
+			/>
+		</Stack>
+	);
+};

client/src/Pages/Dashboard/Components/CardReorderControls.tsx

@@ -0,0 +1,90 @@
+import Stack from "@mui/material/Stack";
+import IconButton from "@mui/material/IconButton";
+import { useTheme } from "@mui/material/styles";
+import { useTranslation } from "react-i18next";
+import { ChevronUp, ChevronDown } from "lucide-react";
+
+import { Icon, Tooltip } from "@/Components/design-elements";
+import { LAYOUT } from "@/Utils/Theme/constants";
+
+// Snug around the 16px icon without inflating the card header.
+const CONTROL_SIZE = 24;
+const ICON_SIZE = 16;
+
+/**
+ * Move-up / move-down controls, revealed on hover over the card they belong to.
+ * Kept out of DashboardCard so the 17 card components stay unaware of their own
+ * position — the grid owns ordering.
+ */
+export const CardReorderControls = ({
+	onMoveUp,
+	onMoveDown,
+	canMoveUp,
+	canMoveDown,
+}: {
+	onMoveUp: () => void;
+	onMoveDown: () => void;
+	canMoveUp: boolean;
+	canMoveDown: boolean;
+}) => {
+	const theme = useTheme();
+	const { t } = useTranslation();
+
+	const buttonSx = {
+		width: CONTROL_SIZE,
+		height: CONTROL_SIZE,
+		borderRadius: theme.shape.borderRadius,
+		color: theme.palette.text.secondary,
+		"&:hover": {
+			backgroundColor: theme.palette.action.hover,
+			color: theme.palette.text.primary,
+		},
+		"&.Mui-disabled": { color: theme.palette.text.disabled },
+	};
+
+	return (
+		<Stack
+			direction="row"
+			alignItems="center"
+			gap={theme.spacing(LAYOUT.XXS)}
+			p={theme.spacing(LAYOUT.XXS)}
+			borderRadius={theme.shape.borderRadius}
+			bgcolor={theme.palette.background.paper}
+			border={`1px solid ${theme.palette.divider}`}
+		>
+			<Tooltip title={t("pages.dashboard.reorder.moveUp")}>
+				{/* span keeps the tooltip working while the button is disabled */}
+				<span>
+					<IconButton
+						size="small"
+						disabled={!canMoveUp}
+						onClick={onMoveUp}
+						aria-label={t("pages.dashboard.reorder.moveUp")}
+						sx={buttonSx}
+					>
+						<Icon
+							icon={ChevronUp}
+							size={ICON_SIZE}
+						/>
+					</IconButton>
+				</span>
+			</Tooltip>
+			<Tooltip title={t("pages.dashboard.reorder.moveDown")}>
+				<span>
+					<IconButton
+						size="small"
+						disabled={!canMoveDown}
+						onClick={onMoveDown}
+						aria-label={t("pages.dashboard.reorder.moveDown")}
+						sx={buttonSx}
+					>
+						<Icon
+							icon={ChevronDown}
+							size={ICON_SIZE}
+						/>
+					</IconButton>
+				</span>
+			</Tooltip>
+		</Stack>
+	);
+};

client/src/Pages/Dashboard/Components/CardSlotContext.tsx

@@ -0,0 +1,7 @@
+import { createContext, useContext } from "react";
+
+import type { ReactNode } from "react";
+
+export const CardSlotContext = createContext<ReactNode>(null);
+
+export const useCardSlot = (): ReactNode => useContext(CardSlotContext);

client/src/Pages/Dashboard/Components/Cards/AdminCards.tsx

@@ -0,0 +1,219 @@
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import { useTheme } from "@mui/material/styles";
+import { useTranslation } from "react-i18next";
+import { useMemo } from "react";
+
+import { useGet } from "@/Hooks/UseApi";
+import { LAYOUT } from "@/Utils/Theme/constants";
+import { formatTimestamp } from "@/Utils/TimeUtils";
+import { DashboardCard, CardMessage } from "../DashboardCard";
+import { CardFigure, CardRow, CardRowLabel, CardStatLine } from "../CardPrimitives";
+
+import { REFRESH_INTERVAL_MS, SLOW_REFRESH_INTERVAL_MS } from "../../cards";
+
+import type { QueueMetrics } from "@/Types/Queue";
+import type { Log } from "@/Types/Log";
+import type { User } from "@/Types/User";
+
+const MAX_ERROR_ROWS = 5;
+
+/** Reads as a single reassurance line while nothing is failing. */
+export const ChecksOnScheduleCard = () => {
+	const theme = useTheme();
+	const { t } = useTranslation();
+	const { data, isLoading, isValidating, error } = useGet<QueueMetrics>(
+		"/queue/metrics",
+		{},
+		{ refreshInterval: REFRESH_INTERVAL_MS }
+	);
+
+	const healthy = data?.failingJobs === 0;
+
+	return (
+		<DashboardCard
+			title={t("pages.dashboard.cards.checksOnSchedule.title")}
+			to="/logs"
+			isLoading={isLoading && !data}
+			error={error}
+			isStale={isValidating && Boolean(data)}
+		>
+			{data && (
+				<Stack gap={theme.spacing(LAYOUT.SM)}>
+					{healthy ? (
+						<CardMessage
+							text={t("pages.dashboard.cards.checksOnSchedule.healthy", {
+								jobs: data.jobs,
+								workers: data.workers.length,
+							})}
+						/>
+					) : (
+						<>
+							<CardFigure
+								value={String(data.failingJobs)}
+								caption={t("pages.dashboard.cards.checksOnSchedule.failing")}
+								color={theme.palette.error.main}
+							/>
+							<Stack gap={theme.spacing(LAYOUT.XS)}>
+								{data.jobsWithFailures.slice(0, MAX_ERROR_ROWS).map((job) => (
+									<CardRow key={String(job.monitorId)}>
+										<CardRowLabel
+											primary={job.monitorUrl ?? String(job.monitorId)}
+											secondary={job.failReason}
+										/>
+										<Typography
+											color={theme.palette.error.main}
+											flexShrink={0}
+										>
+											{job.failCount}
+										</Typography>
+									</CardRow>
+								))}
+							</Stack>
+						</>
+					)}
+					<CardStatLine
+						label={t("pages.dashboard.cards.checksOnSchedule.scheduled")}
+						value={String(data.jobs)}
+					/>
+					<CardStatLine
+						label={t("pages.dashboard.cards.checksOnSchedule.runningNow")}
+						value={String(data.activeJobs)}
+					/>
+				</Stack>
+			)}
+		</DashboardCard>
+	);
+};
+
+/**
+ * /logs is an in-memory ring buffer capped at 1000 entries, wiped on restart,
+ * and it ignores page/rowsPerPage. It rotates fast, so this is deliberately
+ * worded "recent" rather than "all".
+ */
+export const RecentErrorsCard = () => {
+	const theme = useTheme();
+	const { t } = useTranslation();
+	const { data, isLoading, isValidating, error } = useGet<Log[]>(
+		"/logs",
+		{},
+		{ refreshInterval: SLOW_REFRESH_INTERVAL_MS }
+	);
+
+	const { errors, warnings, newest } = useMemo(() => {
+		const relevant = (data ?? []).filter(
+			(entry) => entry.level === "error" || entry.level === "warn"
+		);
+		const sorted = [...relevant].sort(
+			(a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime()
+		);
+		return {
+			errors: relevant.filter((entry) => entry.level === "error").length,
+			warnings: relevant.filter((entry) => entry.level === "warn").length,
+			newest: sorted.slice(0, MAX_ERROR_ROWS),
+		};
+	}, [data]);
+
+	return (
+		<DashboardCard
+			title={t("pages.dashboard.cards.recentErrors.title")}
+			to="/logs"
+			isLoading={isLoading && !data}
+			error={error}
+			isStale={isValidating && Boolean(data)}
+			action={
+				errors > 0 ? (
+					<Typography color={theme.palette.error.main}>
+						{t("pages.dashboard.cards.recentErrors.count", { count: errors })}
+					</Typography>
+				) : null
+			}
+		>
+			{newest.length === 0 ? (
+				<CardMessage text={t("pages.dashboard.cards.recentErrors.empty")} />
+			) : (
+				<Stack gap={theme.spacing(LAYOUT.SM)}>
+					<CardStatLine
+						label={t("pages.dashboard.cards.recentErrors.warnings")}
+						value={String(warnings)}
+					/>
+					<Stack gap={theme.spacing(LAYOUT.XS)}>
+						{newest.map((entry, index) => (
+							<CardRow key={`${entry.timestamp}-${index}`}>
+								<CardRowLabel
+									primary={entry.message}
+									secondary={[entry.service, entry.method].filter(Boolean).join(" · ")}
+								/>
+								<Typography
+									color={
+										entry.level === "error"
+											? theme.palette.error.main
+											: theme.palette.warning.main
+									}
+									flexShrink={0}
+								>
+									{formatTimestamp(entry.timestamp)}
+								</Typography>
+							</CardRow>
+						))}
+					</Stack>
+				</Stack>
+			)}
+		</DashboardCard>
+	);
+};
+
+/** Never empty — at minimum the current user exists. */
+export const TeamCard = () => {
+	const theme = useTheme();
+	const { t } = useTranslation();
+	const { data, isLoading, isValidating, error } = useGet<User[]>("/auth/users");
+
+	const { total, byRole, unverified } = useMemo(() => {
+		const users = data ?? [];
+		const roles = new Map<string, number>();
+		for (const user of users) {
+			for (const role of user.role ?? []) {
+				roles.set(role, (roles.get(role) ?? 0) + 1);
+			}
+		}
+		return {
+			total: users.length,
+			byRole: [...roles.entries()].sort((a, b) => b[1] - a[1]),
+			unverified: users.filter((user) => !user.isVerified).length,
+		};
+	}, [data]);
+
+	return (
+		<DashboardCard
+			title={t("pages.dashboard.cards.team.title")}
+			to="/account/team"
+			isLoading={isLoading && !data}
+			error={error}
+			isStale={isValidating && Boolean(data)}
+		>
+			{data && (
+				<Stack gap={theme.spacing(LAYOUT.SM)}>
+					<CardFigure
+						value={String(total)}
+						caption={t("pages.dashboard.cards.team.members", { count: total })}
+					/>
+					{byRole.map(([role, count]) => (
+						<CardStatLine
+							key={role}
+							label={t(`common.auth.roles.${role}`, { defaultValue: role })}
+							value={String(count)}
+						/>
+					))}
+					{unverified > 0 && (
+						<CardStatLine
+							label={t("pages.dashboard.cards.team.unverified")}
+							value={String(unverified)}
+							color={theme.palette.warning.main}
+						/>
+					)}
+				</Stack>
+			)}
+		</DashboardCard>
+	);
+};

client/src/Pages/Dashboard/Components/Cards/BreakdownCard.tsx

@@ -0,0 +1,97 @@
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import { useTheme } from "@mui/material/styles";
+import { useTranslation } from "react-i18next";
+
+import { LAYOUT } from "@/Utils/Theme/constants";
+import { DashboardCard, CardMessage } from "../DashboardCard";
+import { CardMeterRow, CardRow } from "../CardPrimitives";
+
+export interface BreakdownBucket {
+	/** Stable key and displayed label. */
+	key: string;
+	label: string;
+	total: number;
+	down: number;
+	/** Where the row links to, if anywhere. */
+	to?: string;
+}
+
+/**
+ * "How the fleet splits by X" — one proportional row per bucket, flagging any
+ * bucket with something down. Monitors by type and Monitors by group are the
+ * same card over different keys, so they share this shell.
+ */
+export const BreakdownCard = ({
+	titleKey,
+	emptyKey,
+	to,
+	buckets,
+	isLoading,
+	isStale,
+	error,
+}: {
+	titleKey: string;
+	emptyKey: string;
+	to?: string;
+	buckets: BreakdownBucket[];
+	isLoading?: boolean;
+	isStale?: boolean;
+	error?: unknown;
+}) => {
+	const theme = useTheme();
+	const { t } = useTranslation();
+
+	const max = Math.max(0, ...buckets.map((bucket) => bucket.total));
+
+	return (
+		<DashboardCard
+			title={t(titleKey)}
+			to={to}
+			isLoading={isLoading}
+			error={error}
+			isStale={isStale}
+		>
+			{buckets.length === 0 ? (
+				<CardMessage text={t(emptyKey)} />
+			) : (
+				<Stack gap={theme.spacing(LAYOUT.SM)}>
+					{buckets.map((bucket) => (
+						<CardRow
+							key={bucket.key}
+							to={bucket.to}
+						>
+							<CardMeterRow
+								label={bucket.label}
+								value={bucket.total}
+								max={max}
+								color={
+									bucket.down > 0 ? theme.palette.error.main : theme.palette.primary.main
+								}
+								trailing={
+									<Stack
+										direction="row"
+										alignItems="center"
+										gap={theme.spacing(LAYOUT.XS)}
+										flexShrink={0}
+									>
+										{bucket.down > 0 && (
+											<Typography color={theme.palette.error.main}>
+												{t("pages.dashboard.cards.monitorsByType.down", {
+													count: bucket.down,
+												})}
+											</Typography>
+										)}
+										<Typography color={theme.palette.text.secondary}>
+											{bucket.total}
+										</Typography>
+									</Stack>
+								}
+							/>
+						</CardRow>
+					))}
+				</Stack>
+			)}
+		</DashboardCard>
+	);
+};

client/src/Pages/Dashboard/Components/Cards/BusiestServersCard.tsx

@@ -0,0 +1,143 @@
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import { useTheme } from "@mui/material/styles";
+import { useTranslation } from "react-i18next";
+import { useMemo } from "react";
+
+import { LAYOUT } from "@/Utils/Theme/constants";
+import { DashboardCard, CardMessage } from "../DashboardCard";
+import { CardBar, CardRow, CardRowLabel } from "../CardPrimitives";
+import { useMonitors } from "../../useDashboardData";
+
+import { latestCheck } from "../../checks";
+
+import type { Monitor } from "@/Types/Monitor";
+
+// <60% fine, 60-85% warm, above that hot.
+const WARM = 60;
+const HOT = 85;
+
+interface ServerUsage {
+	monitor: Monitor;
+	cpu: number | null;
+	memory: number | null;
+	disk: number | null;
+	peak: number;
+}
+
+const Metric = ({ label, value }: { label: string; value: number | null }) => {
+	const theme = useTheme();
+	const color =
+		value === null
+			? theme.palette.text.secondary
+			: value > HOT
+				? theme.palette.error.main
+				: value > WARM
+					? theme.palette.warning.main
+					: theme.palette.primary.main;
+
+	return (
+		<Stack
+			flex={1}
+			minWidth={0}
+			gap={theme.spacing(LAYOUT.XXS)}
+		>
+			<Stack
+				direction="row"
+				alignItems="baseline"
+				justifyContent="space-between"
+				gap={theme.spacing(LAYOUT.XS)}
+			>
+				<Typography color={theme.palette.text.secondary}>{label}</Typography>
+				<Typography color={color}>
+					{/* A down server reports nothing — show a dash, never 0%. */}
+					{value === null ? "—" : `${value.toFixed(1)}%`}
+				</Typography>
+			</Stack>
+			<CardBar
+				value={value ?? 0}
+				color={color}
+			/>
+		</Stack>
+	);
+};
+
+export const BusiestServersCard = () => {
+	const theme = useTheme();
+	const { t } = useTranslation();
+	const { data, isLoading, isValidating, error } = useMonitors();
+
+	const servers = useMemo<ServerUsage[]>(() => {
+		return (data?.monitors ?? [])
+			.filter((monitor) => monitor.type === "hardware")
+			.map((monitor) => {
+				const latest = latestCheck(monitor);
+				// snake_case here, unlike camelCase in HardwareCheckStats, and
+				// these are 0-1 fractions, so scale to percent.
+				const toPercent = (value: number | undefined) =>
+					typeof value === "number" ? value * 100 : null;
+				const cpu = toPercent(latest?.cpu?.usage_percent);
+				const memory = toPercent(latest?.memory?.usage_percent);
+				const disks = (latest?.disk ?? [])
+					.map((entry) => entry.usage_percent)
+					.filter((value): value is number => typeof value === "number");
+				const disk = disks.length > 0 ? Math.max(...disks) * 100 : null;
+				return {
+					monitor,
+					cpu,
+					memory,
+					disk,
+					peak: Math.max(cpu ?? 0, memory ?? 0, disk ?? 0),
+				};
+			})
+			.sort((a, b) => b.peak - a.peak);
+	}, [data]);
+
+	return (
+		<DashboardCard
+			title={t("pages.dashboard.cards.busiestServers.title")}
+			to="/infrastructure"
+			isLoading={isLoading && !data}
+			error={error}
+			isStale={isValidating && Boolean(data)}
+		>
+			{servers.length === 0 ? (
+				<CardMessage text={t("pages.dashboard.cards.busiestServers.empty")} />
+			) : (
+				<Stack gap={theme.spacing(LAYOUT.MD)}>
+					{servers.map(({ monitor, cpu, memory, disk }) => (
+						<CardRow
+							key={monitor.id}
+							to={`/infrastructure/${monitor.id}`}
+						>
+							<Stack
+								flex={1}
+								minWidth={0}
+								gap={theme.spacing(LAYOUT.XS)}
+							>
+								<CardRowLabel primary={monitor.name} />
+								<Stack
+									direction="row"
+									gap={theme.spacing(LAYOUT.MD)}
+								>
+									<Metric
+										label={t("pages.dashboard.cards.busiestServers.cpu")}
+										value={cpu}
+									/>
+									<Metric
+										label={t("pages.dashboard.cards.busiestServers.memory")}
+										value={memory}
+									/>
+									<Metric
+										label={t("pages.dashboard.cards.busiestServers.disk")}
+										value={disk}
+									/>
+								</Stack>
+							</Stack>
+						</CardRow>
+					))}
+				</Stack>
+			)}
+		</DashboardCard>
+	);
+};

client/src/Pages/Dashboard/Components/Cards/CheckmateServerCard.tsx

@@ -0,0 +1,93 @@
+import Stack from "@mui/material/Stack";
+import { useTheme } from "@mui/material/styles";
+import { useTranslation } from "react-i18next";
+
+import { useGet } from "@/Hooks/UseApi";
+import { LAYOUT } from "@/Utils/Theme/constants";
+import { formatDuration } from "@/Utils/TimeUtils";
+import { DashboardCard } from "../DashboardCard";
+import { CardBar, CardStatLine } from "../CardPrimitives";
+
+import { REFRESH_INTERVAL_MS } from "../../cards";
+
+import type { Diagnostics } from "@/Types/Diagnostics";
+
+const BYTES_PER_MB = 1024 * 1024;
+
+// Banding from CARD-SPECS: warm at 50ms of event-loop delay, hot at 200ms;
+// heap warm past 80% of the V8 limit.
+const EVENT_LOOP_WARM_MS = 50;
+const EVENT_LOOP_HOT_MS = 200;
+const HEAP_WARM_RATIO = 0.8;
+
+/**
+ * The one card that is never empty — it reports on Checkmate itself, so it
+ * works on a fresh install with zero monitors. Admin only.
+ */
+export const CheckmateServerCard = () => {
+	const theme = useTheme();
+	const { t } = useTranslation();
+	const { data, isLoading, isValidating, error } = useGet<Diagnostics>(
+		"/diagnostic/system",
+		{},
+		{ refreshInterval: REFRESH_INTERVAL_MS }
+	);
+
+	const usedHeap = data?.v8HeapStats.usedHeapSizeBytes ?? 0;
+	const heapLimit = data?.v8HeapStats.heapSizeLimitBytes ?? 0;
+	const heapRatio = heapLimit > 0 ? usedHeap / heapLimit : 0;
+	const heapColor =
+		heapRatio > HEAP_WARM_RATIO ? theme.palette.warning.main : theme.palette.primary.main;
+
+	const eventLoopMs = data?.eventLoopDelayMs ?? 0;
+	const eventLoopColor =
+		eventLoopMs > EVENT_LOOP_HOT_MS
+			? theme.palette.error.main
+			: eventLoopMs > EVENT_LOOP_WARM_MS
+				? theme.palette.warning.main
+				: theme.palette.text.primary;
+
+	return (
+		<DashboardCard
+			title={t("pages.dashboard.cards.checkmateServer.title")}
+			to="/logs"
+			isLoading={isLoading && !data}
+			error={error}
+			isStale={isValidating && Boolean(data)}
+		>
+			{data && (
+				<Stack gap={theme.spacing(LAYOUT.SM)}>
+					<Stack gap={theme.spacing(LAYOUT.XXS)}>
+						<CardStatLine
+							label={t("pages.dashboard.cards.checkmateServer.memory")}
+							value={`${Math.round(usedHeap / BYTES_PER_MB)} / ${Math.round(
+								heapLimit / BYTES_PER_MB
+							)} MB`}
+							color={heapColor}
+						/>
+						<CardBar
+							value={heapRatio * 100}
+							color={heapColor}
+						/>
+					</Stack>
+					<CardStatLine
+						label={t("pages.dashboard.cards.checkmateServer.eventLoop")}
+						value={`${eventLoopMs.toFixed(1)} ms`}
+						color={eventLoopColor}
+					/>
+					<CardStatLine
+						label={t("pages.dashboard.cards.checkmateServer.uptime")}
+						value={formatDuration(data.uptimeMs)}
+					/>
+					<CardStatLine
+						label={t("pages.dashboard.cards.checkmateServer.database")}
+						value={t("pages.dashboard.cards.checkmateServer.readsWrites", {
+							reads: data.mongoStats.readsPerSecond.toFixed(1),
+							writes: data.mongoStats.writesPerSecond.toFixed(1),
+						})}
+					/>
+				</Stack>
+			)}
+		</DashboardCard>
+	);
+};

client/src/Pages/Dashboard/Components/Cards/CurrentlyDownCard.tsx

@@ -0,0 +1,157 @@
+import Stack from "@mui/material/Stack";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import { useTheme } from "@mui/material/styles";
+import { useTranslation } from "react-i18next";
+import { useMemo } from "react";
+
+import { Dot } from "@/Components/design-elements";
+import { LAYOUT } from "@/Utils/Theme/constants";
+import { getStatusColor, getMonitorPath } from "@/Utils/MonitorUtils";
+import { formatStatusCode } from "@/Utils/statusCode";
+import { formatDuration } from "@/Utils/TimeUtils";
+import { DashboardCard, CardMessage } from "../DashboardCard";
+import { CardRow } from "../CardPrimitives";
+import { Sparkline } from "../Sparkline";
+import { useMonitors } from "../../useDashboardData";
+
+import { latestCheck } from "../../checks";
+
+import type { Monitor, MonitorStatus } from "@/Types/Monitor";
+
+const SPARKLINE_WIDTH = 80;
+
+const STATUS_RANK: Partial<Record<MonitorStatus, number>> = {
+	down: 1,
+	breached: 2,
+};
+
+const isProblem = (monitor: Monitor) => STATUS_RANK[monitor.status] !== undefined;
+
+/**
+ * How long the monitor has been down, from the oldest consecutive failing
+ * check. recentChecks is oldest-first, so the run is walked back from the end.
+ */
+const downSince = (monitor: Monitor): string | null => {
+	const checks = monitor.recentChecks ?? [];
+	let oldestFailing: string | null = null;
+	for (let index = checks.length - 1; index >= 0; index -= 1) {
+		if (checks[index].status !== false) {
+			break;
+		}
+		oldestFailing = checks[index].createdAt;
+	}
+	return oldestFailing;
+};
+
+export const CurrentlyDownCard = () => {
+	const theme = useTheme();
+	const { t } = useTranslation();
+	const { data, isLoading, isValidating, error } = useMonitors();
+
+	const problems = useMemo(() => {
+		const monitors = data?.monitors ?? [];
+		return monitors
+			.filter(isProblem)
+			.map((monitor) => ({ monitor, since: downSince(monitor) }))
+			.sort((a, b) => {
+				const rank =
+					(STATUS_RANK[a.monitor.status] ?? 99) - (STATUS_RANK[b.monitor.status] ?? 99);
+				if (rank !== 0) {
+					return rank;
+				}
+				// Tie-break on longest downtime: the older timestamp ranks first.
+				return new Date(a.since ?? 0).getTime() - new Date(b.since ?? 0).getTime();
+			});
+	}, [data]);
+
+	return (
+		<DashboardCard
+			title={t("pages.dashboard.cards.currentlyDown.title")}
+			to="/incidents"
+			isLoading={isLoading && !data}
+			error={error}
+			isStale={isValidating && Boolean(data)}
+			action={
+				problems.length > 0 ? (
+					<Typography color={theme.palette.error.main}>
+						{t("pages.dashboard.cards.currentlyDown.count", {
+							count: problems.length,
+						})}
+					</Typography>
+				) : null
+			}
+		>
+			{problems.length === 0 ? (
+				<CardMessage text={t("pages.dashboard.cards.currentlyDown.empty")} />
+			) : (
+				<Stack gap={theme.spacing(LAYOUT.XS)}>
+					{problems.map(({ monitor, since }) => (
+						<CardRow
+							key={monitor.id}
+							to={`/${getMonitorPath(monitor.type)}/${monitor.id}`}
+						>
+							<Dot
+								color={getStatusColor(monitor.status, theme)}
+								size="md"
+							/>
+							<Stack
+								flex={1}
+								minWidth={0}
+								gap={theme.spacing(LAYOUT.XXS)}
+							>
+								<Stack
+									direction="row"
+									alignItems="baseline"
+									justifyContent="space-between"
+									gap={theme.spacing(LAYOUT.SM)}
+								>
+									<Typography
+										color={theme.palette.text.primary}
+										noWrap
+									>
+										{monitor.name}
+									</Typography>
+									{since && (
+										<Typography
+											color={theme.palette.error.main}
+											flexShrink={0}
+										>
+											{formatDuration(Date.now() - new Date(since).getTime())}
+										</Typography>
+									)}
+								</Stack>
+								<Stack
+									direction="row"
+									alignItems="center"
+									justifyContent="space-between"
+									gap={theme.spacing(LAYOUT.SM)}
+								>
+									{/* Not StatusCodeLabel: its Tooltip is focusable, and a
+									    focusable element inside the row's link is unreachable
+									    by keyboard. */}
+									<Typography
+										color={theme.palette.text.secondary}
+										noWrap
+									>
+										{monitor.type} ·{" "}
+										{formatStatusCode(latestCheck(monitor)?.statusCode, t)}
+									</Typography>
+									<Box
+										width={SPARKLINE_WIDTH}
+										flexShrink={0}
+									>
+										<Sparkline
+											checks={monitor.recentChecks ?? []}
+											color={theme.palette.error.main}
+										/>
+									</Box>
+								</Stack>
+							</Stack>
+						</CardRow>
+					))}
+				</Stack>
+			)}
+		</DashboardCard>
+	);
+};

client/src/Pages/Dashboard/Components/Cards/FailedChecksCard.tsx

@@ -0,0 +1,54 @@
+import Stack from "@mui/material/Stack";
+import { useTheme } from "@mui/material/styles";
+import { useTranslation } from "react-i18next";
+
+import { useGet } from "@/Hooks/UseApi";
+import { LAYOUT } from "@/Utils/Theme/constants";
+import { DashboardCard, CardMessage } from "../DashboardCard";
+import { CardBar, CardFigure } from "../CardPrimitives";
+
+import type { ChecksSummary } from "@/Types/Check";
+
+// Day only. `dateRange=week` returns figures identical to `day`, so a range
+// selector here would silently lie.
+const SUMMARY_URL = "/checks/team/summary?dateRange=day";
+
+export const FailedChecksCard = () => {
+	const theme = useTheme();
+	const { t } = useTranslation();
+	const { data, isLoading, isValidating, error } = useGet<ChecksSummary>(SUMMARY_URL);
+
+	const total = data?.totalChecks ?? 0;
+	const failed = data?.downChecks ?? 0;
+	const percentage = total > 0 ? (failed / total) * 100 : 0;
+	const color = percentage > 10 ? theme.palette.error.main : theme.palette.success.main;
+
+	return (
+		<DashboardCard
+			title={t("pages.dashboard.cards.failedChecks.title")}
+			to="/checks"
+			isLoading={isLoading && !data}
+			error={error}
+			isStale={isValidating && Boolean(data)}
+		>
+			{total === 0 ? (
+				<CardMessage text={t("pages.dashboard.cards.failedChecks.empty")} />
+			) : (
+				<Stack gap={theme.spacing(LAYOUT.SM)}>
+					<CardFigure
+						value={`${percentage.toFixed(1)}%`}
+						caption={t("pages.dashboard.cards.failedChecks.ratio", {
+							failed: failed.toLocaleString(),
+							total: total.toLocaleString(),
+						})}
+						color={color}
+					/>
+					<CardBar
+						value={percentage}
+						color={color}
+					/>
+				</Stack>
+			)}
+		</DashboardCard>
+	);
+};

client/src/Pages/Dashboard/Components/Cards/MonitorStatusCard.tsx

@@ -0,0 +1,138 @@
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import { useTheme } from "@mui/material/styles";
+import { Link as RouterLink } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+
+import { Dot } from "@/Components/design-elements";
+import { LAYOUT } from "@/Utils/Theme/constants";
+import { typographyLevels } from "@/Utils/Theme/Palette";
+import { getStatusColor } from "@/Utils/MonitorUtils";
+import { DashboardCard, CardMessage } from "../DashboardCard";
+import { CardSegmentedBar, type BarSegment } from "../CardPrimitives";
+import { useMonitors } from "../../useDashboardData";
+
+import type { MonitorStatus, MonitorsSummary } from "@/Types/Monitor";
+
+// Every state the summary reports, ordered worst first so the bar reads
+// problems-to-healthy left to right and the chips below list what is wrong
+// before what is merely idle. `up` is handled separately as the headline.
+const STATES: { key: string; status: MonitorStatus; field: keyof MonitorsSummary }[] = [
+	{ key: "down", status: "down", field: "downMonitors" },
+	{ key: "breached", status: "breached", field: "breachedMonitors" },
+	{ key: "initializing", status: "initializing", field: "initializingMonitors" },
+	{ key: "maintenance", status: "maintenance", field: "maintenanceMonitors" },
+	{ key: "paused", status: "paused", field: "pausedMonitors" },
+];
+
+export const MonitorStatusCard = () => {
+	const theme = useTheme();
+	const { t } = useTranslation();
+	const { data, isLoading, isValidating, error } = useMonitors();
+	const summary = data?.summary ?? null;
+
+	// Only states that actually have monitors are shown. Padding the card with
+	// zeros says nothing, and a healthy fleet should read as calm rather than as
+	// a row of empty counters.
+	const present = summary
+		? STATES.map((state) => ({ ...state, count: summary[state.field] })).filter(
+				(state) => state.count > 0
+			)
+		: [];
+
+	const segments: BarSegment[] = summary
+		? [
+				{
+					key: "up",
+					value: summary.upMonitors,
+					color: getStatusColor("up", theme),
+					label: `${t("pages.common.monitors.status.up")} — ${summary.upMonitors}`,
+				},
+				...present.map((state) => ({
+					key: state.key,
+					value: state.count,
+					color: getStatusColor(state.status, theme),
+					label: `${t(`pages.common.monitors.status.${state.key}`)} — ${state.count}`,
+				})),
+			]
+		: [];
+
+	return (
+		<DashboardCard
+			title={t("pages.dashboard.cards.monitorStatus.title")}
+			to="/uptime"
+			isLoading={isLoading && !summary}
+			error={error}
+			isStale={isValidating && Boolean(data)}
+		>
+			{!summary || summary.totalMonitors === 0 ? (
+				<CardMessage text={t("pages.dashboard.cards.monitorStatus.empty")} />
+			) : (
+				<Stack gap={theme.spacing(LAYOUT.MD)}>
+					<Stack gap={theme.spacing(LAYOUT.SM)}>
+						<Stack
+							direction="row"
+							alignItems="baseline"
+							gap={theme.spacing(LAYOUT.XS)}
+						>
+							<Typography
+								fontSize={typographyLevels.xxl}
+								fontWeight={300}
+								color={theme.palette.text.primary}
+								lineHeight={1.1}
+							>
+								{summary.upMonitors}
+							</Typography>
+							<Typography color={theme.palette.text.secondary}>
+								{t("pages.dashboard.cards.monitorStatus.upOfTotal", {
+									total: summary.totalMonitors,
+								})}
+							</Typography>
+						</Stack>
+						<CardSegmentedBar segments={segments} />
+					</Stack>
+					{present.length > 0 && (
+						<Stack
+							direction="row"
+							flexWrap="wrap"
+							gap={theme.spacing(LAYOUT.MD)}
+						>
+							{present.map((state) => (
+								<Stack
+									key={state.key}
+									component={RouterLink}
+									// Plain /uptime: the monitors list does not read query
+									// params, so a ?status= filter would be silently dropped
+									// and the link would lie about where it goes.
+									to="/uptime"
+									direction="row"
+									alignItems="center"
+									gap={theme.spacing(LAYOUT.XS)}
+									px={theme.spacing(LAYOUT.XS)}
+									py={theme.spacing(LAYOUT.XXS)}
+									mx={`-${theme.spacing(LAYOUT.XS)}`}
+									borderRadius={theme.shape.borderRadius}
+									sx={{
+										textDecoration: "none",
+										"&:hover": { backgroundColor: theme.palette.action.hover },
+									}}
+								>
+									<Dot
+										color={getStatusColor(state.status, theme)}
+										size="md"
+									/>
+									<Typography color={theme.palette.text.secondary}>
+										{t(`pages.common.monitors.status.${state.key}`)}
+									</Typography>
+									<Typography color={theme.palette.text.primary}>
+										{state.count}
+									</Typography>
+								</Stack>
+							))}
+						</Stack>
+					)}
+				</Stack>
+			)}
+		</DashboardCard>
+	);
+};