Merge pull request #3751 from bluewave-labs/develop

develop -> master

.husky/pre-commit

@@ -1,4 +1,23 @@
 #!/bin/sh
+
+# Skip during merge/rebase/cherry-pick/revert. lint-staged's internal
+# git-stash mechanism is incompatible with these states and will silently
+# wipe MERGE_HEAD and your conflict resolutions on commit failure.
+git_dir=$(git rev-parse --git-dir)
+if [ -e "$git_dir/MERGE_HEAD" ] \
+	|| [ -e "$git_dir/CHERRY_PICK_HEAD" ] \
+	|| [ -e "$git_dir/REVERT_HEAD" ] \
+	|| [ -d "$git_dir/rebase-merge" ] \
+	|| [ -d "$git_dir/rebase-apply" ]; then
+	echo "Skipping lint-staged (mid merge/rebase/cherry-pick/revert)"
+	exit 0
+fi
+
+# Anchor to repo root so commits made from a subdirectory still work, and
+# run each package's lint-staged in a subshell so cwd is scoped (a failure
+# inside one package can't poison the cwd for the next).
+cd "$(git rev-parse --show-toplevel)" || exit 1
+
 echo "Running lint-staged..."
-cd client && npx lint-staged && cd ..
-cd server && npx lint-staged && cd ..
+(cd client && npx lint-staged) || exit 1
+(cd server && npx lint-staged) || exit 1

CLAUDE.md

@@ -12,20 +12,22 @@ Checkmate is an open-source uptime and infrastructure monitoring application. It
 ```bash
 cd client
 npm install
-npm run dev              # Start dev server at http://localhost:5173
+npm run dev -- --port 10001 --strictPort   # Local dev port is 10001 (5173 is used by another project on this machine)
 npm run build            # TypeScript check + production build
 npm run lint             # ESLint (strict, max-warnings 0)
 npm run format           # Prettier formatting
 npm run format-check     # Check formatting
 ```
 
+Server `.env` on this machine is configured with `CLIENT_HOST="http://localhost:10001"` to match the client dev port. If you change the client port, keep `.env` in sync.
+
 ### Server (Node.js/Express)
 ```bash
 cd server
 npm install
 npm run dev              # Start with hot-reload (nodemon + tsx) at http://localhost:52345
 npm run build            # TypeScript compile + path alias resolution
-npm run test             # Run Mocha tests with c8 coverage
+npm run test             # Run Jest tests with coverage
 npm run lint             # ESLint v9
 npm run lint-fix         # Auto-fix lint issues
 npm run format           # Prettier formatting
@@ -66,19 +68,23 @@ VITE_APP_LOG_LEVEL="debug"
 ### Backend Layers
 ```
 server/src/
-├── controllers/     # Route handlers (authController, monitorController, etc.)
-├── service/         # Business logic
-│   ├── business/    # Core monitoring logic
-│   ├── infrastructure/  # Server/system utilities
-│   └── system/      # App-level settings
+├── api/             # HTTP layer
+│   ├── controllers/   # Route handlers (authController, monitorController, etc.)
+│   ├── middleware/    # verifyJWT, rateLimiter, sanitization, responseHandler
+│   ├── routes/        # API route definitions
+│   └── validation/    # Zod request-payload schemas
+├── domain/          # Business logic + data access, one folder per entity
+│   ├── monitors/      # e.g. monitor.service.ts, monitor.repository.ts, monitor.type.ts
+│   ├── checks/
+│   ├── incidents/
+│   └── …              # users, teams, status-pages, notifications, etc.
+├── service/         # Cross-cutting services (e.g. infrastructure/)
+├── config/          # App config wiring (controllers, routes, services, envValidation)
 ├── db/
-│   ├── models/      # Mongoose schemas (Monitor, Check, Incident, User, etc.)
-│   ├── migration/   # Database migrations (run on startup)
-│   └── modules/     # Database-specific modules
-├── middleware/v1/   # verifyJWT, rateLimiter, sanitization, responseHandler
-├── routes/v1/       # API route definitions
-├── validation/      # Joi input validation schemas
-└── repositories/    # Data access layer
+│   └── migration/   # Database migrations (run on startup)
+├── templates/       # Email/notification templates
+├── types/           # Shared const tuples + derived types
+└── utils/           # Shared utilities
 ```
 
 ### Frontend Structure
@@ -157,6 +163,26 @@ When working on anything related to check scheduling, incident lifecycle, or not
 
 ## Code Conventions
 
+### Coding conventions (mandatory)
+Read `docs/coding-conventions.md` before touching any `.tsx` or `.ts` file. The doc covers both frontend and backend rules, all enforced in code review.
+
+**Universal — rule 0:** look at peer files first and follow the established pattern. Don't sneak in novel shapes.
+
+**Frontend (`client/src`):**
+1. Prefer MUI native props over `sx` (e.g. `color={…}`, `bgcolor={…}`, `mt={…}` — not `sx={{ color, bgcolor, mt }}`).
+2. Use the full theme path for colors: `color={theme.palette.text.secondary}`, never `color="text.secondary"` (greppability).
+3. No hardcoded literals — use `LAYOUT.*`, `typographyLevels.*`, `theme.shape.borderRadius`, `theme.palette.*`.
+4. Use `useTheme()` inside components; don't `import { theme } from "@/Utils/Theme/Theme"`.
+5. Pair runtime tuples with derived types: `const X = [...] as const; type X = (typeof X)[number]`.
+
+**Backend (`server/src`):**
+6. Layering: Controller → Service → Repository → Mongoose. No DB calls outside repositories.
+7. Provider conventions: DI for stdlib clients, `SERVICE_NAME` + `TIMEOUT_MS` constants, `timeRequest()` helper, inline `setTimeout` race for timeout, outer try/catch into `AppError`.
+8. Mongoose schema fields with closed value sets must declare `enum` reusing the same `types/*` const tuple.
+9. Provider tests at `server/test/unit/providers/network/<name>.test.ts`, `from "@jest/globals"`, `testStatusProviderContract`, inline `setup()` per test (not `beforeEach`).
+10. Centralize validation enums in `types/*` const tuples; never inline `z.enum([…])` more than once.
+11. New entity fields must land in the validator's `*ResponseSchema` so the auto-generated OpenAPI spec sees them.
+
 ### Internationalization
 All user-facing strings must use the translation function:
 ```javascript
@@ -174,12 +200,13 @@ t('your.key')  // Never hardcode UI strings
 - Both use ESLint with strict settings
 
 ### Testing
-Server tests use Mocha + Chai + Sinon:
+Server tests use Jest (with `--experimental-vm-modules` for ESM):
 ```bash
-npm test                    # Run all tests with coverage
-npm test -- --grep "pattern"  # Run specific tests
+npm test                              # Run all tests with coverage
+npm test -- -t "pattern"              # Run tests matching name pattern
+npm test -- path/to/file.test.ts      # Run a specific file
 ```
-Test files: `server/tests/**/*.test.js`
+Test files: `server/test/**/*.test.ts`
 
 ## Database Models
 

CONTRIBUTING.md

@@ -151,6 +151,7 @@ LOG_LEVEL="debug"
 - `ORIGIN`: Origin for CORS purposes
 - `TOKEN_TTL`: Token time to live (in vercel/ms format)
 - `LOG_LEVEL`: Debug level (debug, info, warn, error)
+- `QUEUE_TYPE`: Job queue implementation (`superSimpleQueue` or `lessSimpleQueue`, optional, default: `superSimpleQueue`)
 
 Start the backend server:
 
@@ -255,20 +256,6 @@ docker rm uptime_database_mongo
 
 Start with [good first issues](https://github.com/bluewave-labs/checkmate/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22).
 
-### Improve the documentation?
-
-Docs live in [checkmate-documentation](https://github.com/bluewave-labs/checkmate-documentation). You can fix typos, add guides, or explain features better.
-
-### Help with translations?
-
-We use [PoEditor](https://poeditor.com) for translations. You can:
-
-- [Sign up and join your language team](https://poeditor.com/join/project/lRUoGZFCsJ).
-- Translate UI strings.
-- Ask questions on Discord in the relevant #translations channel.
-
-Make sure all new UI strings in code use `t('key')`.
-
 ### Submit a pull request?
 
 Follow the [pull request checklist](#pull-request-checklist). Your PR should:
@@ -283,7 +270,7 @@ Follow the [pull request checklist](#pull-request-checklist). Your PR should:
 
 ## Code guidelines
 
-- Use ESLint and Prettier (`npm run lint`).
+- Use ESLint and Prettier. Run `npm run lint` and `npm run format-check` in both `client` and `server`. If `format-check` reports issues, fix them with `npm run format` before committing.
 - Follow naming conventions: `camelCase` for variables, `PascalCase` for components, `UPPER_CASE` for constants.
 - No hard-coded strings — use `t('your.key')` for everything visible.
 - Use the shared theme and components. No magic numbers or hardcoded styles.
@@ -304,7 +291,7 @@ Before submitting your pull request, please confirm the following:
 - You used the shared theme for any styling — no magic numbers or inline styles.
 - The pull request addresses only one issue or topic.
 - You added screenshots or a video for any UI-related changes.
-- Your code passes linting and has no TypeScript errors.
+- Your code passes `npm run lint`, `npm run format-check`, and `npm run build` in both `client` and `server` with no errors.
 
 If one or more of these are missing, we may ask you to update your pull request before we can merge it.
 

README.es.md

@@ -1,172 +0,0 @@
-<p align=center> <a href="https://trendshift.io/repositories/12443" target="_blank"><img src="https://trendshift.io/api/badge/repositories/12443" alt="bluewave-labs%2Fcheckmate | Trendshift" style="width: 250px; height: 55px;" width="250" height="55"/></a></p>
-
-![](https://img.shields.io/github/license/bluewave-labs/checkmate)
-![](https://img.shields.io/github/repo-size/bluewave-labs/checkmate)
-![](https://img.shields.io/github/commit-activity/m/bluewave-labs/checkmate)
-![](https://img.shields.io/github/last-commit/bluewave-labs/checkmate)
-![](https://img.shields.io/github/languages/top/bluewave-labs/checkmate)
-![](https://img.shields.io/github/issues/bluewave-labs/checkmate)
-![](https://img.shields.io/github/issues-pr/bluewave-labs/checkmate)
-[![OpenSSF Mejores Prácticas](https://www.bestpractices.dev/projects/9901/badge)](https://www.bestpractices.dev/projects/9901)
-[![Pregunta en DeepWiki](https://deepwiki.com/badge.svg)](https://deepwiki.com/bluewave-labs/checkmate)
-
-<h1 align="center"><a href="https://bluewavelabs.ca" target="_blank">Checkmate</a></h1>
-
-<p align="center"><strong>Una aplicación de código abierto para monitoreo de infraestructura y tiempo de actividad</strong></p>
-
-<img width="1660" alt="image" src="https://github.com/user-attachments/assets/b748f36d-a271-4965-ad0a-18bf153bbee7" />
-
-Este repositorio contiene tanto el frontend como el backend de Checkmate, una herramienta de monitoreo de código abierto y autoalojada para rastrear hardware de servidores, tiempo de actividad, tiempos de respuesta e incidentes en tiempo real con visualizaciones atractivas. Checkmate revisa regularmente si un servidor o sitio web es accesible y funciona de manera óptima, proporcionando alertas e informes en tiempo real sobre la disponibilidad, el tiempo de inactividad y el tiempo de respuesta de los servicios monitoreados.
-
-Checkmate también tiene un agente llamado [Capture](https://github.com/bluewave-labs/capture), para recuperar datos de servidores remotos. Aunque Capture no es obligatorio para ejecutar Checkmate, proporciona información adicional sobre el estado de la CPU, RAM, disco y temperatura de tus servidores.
-
-Checkmate ha sido probado con más de 1000 monitores activos sin problemas ni cuellos de botella de rendimiento.
-
-**Si deseas patrocinar una función, [visita este enlace](https://checkmate.so/sponsored-features).**
-
-## 📚 Tabla de contenidos
-
-- [📦 Demo](#demo)  
-- [🔗 Guía del usuario](#guía-del-usuario)  
-- [🛠️ Instalación](#instalación)
-- [🏁 Traducciones](#traducciones)  
-- [🚀 Rendimiento](#rendimiento)  
-- [💚 Preguntas e ideas](#preguntas-e-ideas)  
-- [🧩 Características](#características)  
-- [🏗️ Capturas de pantalla](#capturas-de-pantalla)  
-- [🏗️ Tecnologías](#tecnologías)  
-- [🔗 Enlaces útiles](#enlaces-útiles)  
-- [🤝 Contribuciones](#contribuciones)  
-- [💰 Patrocinadores](#patrocinadores)
-
-...
-
-**[Texto truncado para mantener la longitud del mensaje manejable]**
-
-## Demo
-
-Puedes ver la última versión de [Checkmate](https://checkmate-demo.bluewavelabs.ca/) en acción. El usuario es uptimedemo@demo.com y la contraseña es Demouser1! (ten en cuenta que actualizamos el servidor de demostración de vez en cuando, así que si no funciona para ti, por favor contáctanos en el canal de Discusiones).
-
-## Guía del usuario
-
-Las instrucciones de uso se pueden encontrar [aquí](https://checkmate.so/docs). Todavía está en desarrollo y parte de la información puede estar desactualizada ya que continuamente añadimos funciones cada semana. ¡Ten por seguro que estamos haciendo lo mejor posible! :)
-
-## Instalación
-
-Consulta las instrucciones de instalación en el [portal de documentación de Checkmate](https://checkmate.so/docs/getting-started/installation).
-
-Alternativamente, también puedes usar [Coolify](https://coolify.io/), [Elestio](https://elest.io/open-source/checkmate), [K8s](./charts/helm/checkmate/INSTALLATION.md) o [Pikapods](https://www.pikapods.com/) para desplegar rápidamente una instancia de Checkmate. Si deseas monitorear tu infraestructura de servidores, necesitarás el agente [Capture](https://github.com/bluewave-labs/capture). El repositorio de Capture también contiene las instrucciones de instalación.
-
-## Traducciones
-
-Si deseas usar Checkmate en tu idioma, por favor [ve a esta página](https://poeditor.com/join/project/lRUoGZFCsJ) y regístrate para el idioma al que te gustaría traducir Checkmate.
-
-## Rendimiento
-
-Gracias a extensas optimizaciones, Checkmate opera con un uso de memoria excepcionalmente bajo, requiriendo recursos mínimos de memoria y CPU. Aquí está el uso de memoria de una instancia de Node.js ejecutándose en un servidor que monitorea 323 servidores cada minuto:
-
-![image](https://github.com/user-attachments/assets/37e04a75-d83a-488f-b25c-025511b492c9)
-
-También puedes ver el consumo de memoria de MongoDB y Redis en el mismo servidor (398Mb y 15Mb) para la misma cantidad de servidores:
-
-![image](https://github.com/user-attachments/assets/3b469e85-e675-4040-a162-3f24c1afc751)
-
-## Preguntas e Ideas
-
-Si tienes alguna pregunta, sugerencia o comentario, tienes varias opciones:
-
-- [Canal de Discord](https://discord.gg/NAb6H3UTjK)
-- [Discusiones en GitHub](https://github.com/bluewave-labs/checkmate/discussions)
-- [Grupo en Reddit](https://www.reddit.com/r/CheckmateMonitoring/)
-
-¡No dudes en hacer preguntas o compartir tus ideas, nos encantaría saber de ti!
-
-## Características
-
-- Completamente de código abierto, desplegable en tus propios servidores o dispositivos personales (por ejemplo, Raspberry Pi 4 o 5)
-- Monitoreo de sitios web
-- Monitoreo de velocidad de carga
-- Monitoreo de infraestructura (memoria, uso de disco, rendimiento de CPU, etc) - requiere el agente [Capture](https://github.com/bluewave-labs/capture)
-- Monitoreo de Docker
-- Monitoreo con ping
-- Monitoreo de certificados SSL
-- Monitoreo de puertos
-- Incidentes en una sola vista
-- Páginas de estado
-- Notificaciones por correo, Webhooks, Discord, Telegram, Slack
-- Mantenimiento programado
-- Monitoreo de consultas JSON
-- Soporte para múltiples idiomas
-
-**Hoja de ruta a corto plazo:** ([Milestone 2.2](https://github.com/bluewave-labs/Checkmate/milestone/8))
-
-- Mejores notificaciones
-- Monitoreo de red
-- ...y algunas funciones más
-
-## Capturas de pantalla
-
-<p>
-<img width="1628" alt="image" src="https://github.com/user-attachments/assets/2eff6464-0738-4a32-9312-26e1e8e86275" />
-</p>
-<p>
-  <img width="1656" alt="image" src="https://github.com/user-attachments/assets/616c3563-c2a7-4ee4-af6c-7e6068955d1a" />
-</p>
-<p>
-<img width="1652" alt="image" src="https://github.com/user-attachments/assets/7912d7cf-0d0e-4f26-aa5c-2ad7170b5c99" />
-</p>
-<p>
-<img width="1652" alt="image" src="https://github.com/user-attachments/assets/08c2c6ac-3a2f-44d1-a229-d1746a3f9d16" />
-</p>
-
-## Tecnologías
-
-- [ReactJs](https://react.dev/)
-- [MUI (framework de React)](https://mui.com/)
-- [Node.js](https://nodejs.org/en)
-- [MongoDB](https://mongodb.com)
-- [Recharts](https://recharts.org)
-- ¡Y muchos otros componentes de código abierto!
-
-## Enlaces útiles
-
-- Si deseas apoyarnos, por favor considera darle una ⭐ y haz clic en "watch".
-- ¿Tienes una pregunta o sugerencia para la hoja de ruta? Revisa nuestro [canal de Discord](https://discord.gg/NAb6H3UTjK) o el foro de [Discusiones](https://github.com/bluewave-labs/checkmate/discussions).
-- ¿Quieres saber cuándo hay una nueva versión? Usa [Newreleases](https://newreleases.io/), un servicio gratuito para seguir lanzamientos.
-- Mira un video de instalación y uso de Checkmate [aquí](https://www.youtube.com/watch?v=GfFOc0xHIwY)
-
-## Contribuciones
-
-Somos [Alex](http://github.com/ajhollid) (líder de equipo), [Vishnu](http://github.com/vishnusn77), [Mohadeseh](http://github.com/mohicody), [Gorkem](http://github.com/gorkem-bwl/), [Owaise](http://github.com/Owaiseimdad), [Aryaman](https://github.com/Br0wnHammer) y [Mert](https://github.com/mertssmnoglu), ayudando a personas y empresas a monitorear su infraestructura y servidores.
-
-Nos enorgullecemos de construir conexiones fuertes con contribuyentes de todos los niveles. A pesar de ser un proyecto joven, Checkmate ya ha ganado más de 7000 estrellas y ha atraído a más de 90 contribuyentes de todo el mundo.
-
-Nuestro repositorio ha sido marcado con estrella por empleados de **Google, Microsoft, Intel, Cisco, Tencent, Electronic Arts, ByteDance, JP Morgan Chase, Deloitte, Accenture, Foxconn, Broadcom, China Telecom, Barclays, Capgemini, Wipro, Cloudflare, Dassault Systèmes y NEC**, ¡así que no te detengas — participa, contribuye y aprende con nosotros!
-
-Cómo contribuir:
-
-0. Dale una estrella al repositorio :)
-1. Revisa la [guía para contribuidores](https://github.com/bluewave-labs/Checkmate/blob/develop/CONTRIBUTING.md). Se anima a los nuevos a revisar las etiquetas `good-first-issue`.
-2. Consulta la [estructura del proyecto](https://deepwiki.com/bluewave-labs/Checkmate#system-architecture) y la [visión general](https://deepwiki.com/bluewave-labs/Checkmate#overview).
-3. Lee una estructura detallada de [Checkmate](https://deepwiki.com/bluewave-labs/Checkmate) si deseas profundizar en la arquitectura.
-4. Abre un issue si crees que has encontrado un error.
-5. Revisa los issues con la etiqueta `good-first-issue` si eres nuevo.
-6. Haz un pull request para añadir nuevas funciones, mejoras o correcciones.
-
-<a href="https://github.com/bluewave-labs/checkmate/graphs/contributors">
-  <img src="https://contrib.rocks/image?repo=bluewave-labs/checkmate" />
-</a>
-
-[![Historial de estrellas](https://api.star-history.com/svg?repos=bluewave-labs/checkmate&type=Date)](https://star-history.com/#bluewave-labs/bluewave-uptime&Date)
-
-## Patrocinadores
-
-Gracias a [Gitbook](https://gitbook.io/) por darnos una cuenta gratuita para su plataforma de documentación, y a [Poeditor](https://poeditor.com/) por proporcionarnos una cuenta gratuita para servicios de traducción. Si deseas patrocinar Checkmate, por favor envía un correo a hello@bluewavelabs.ca
-
-Si deseas patrocinar una función, [visita esta página](https://checkmate.so/sponsored-features).
-
-También puedes revisar otros proyectos de BlueWave orientados a desarrolladores y contribuidores:
-
-- [VerifyWise](https://github.com/bluewave-labs/verifywise), la primera plataforma de gobernanza de IA de código abierto.
-- [DataRoom](https://github.com/bluewave-labs/bluewave-dataroom), una aplicación de intercambio de archivos seguro, también conocida como dataroom.
-- [Guidefox](https://github.com/bluewave-labs/guidefox), una app que ayuda a nuevos usuarios a aprender a usar tu producto mediante pistas, tours, popups y banners.

README.md

@@ -1,5 +1,25 @@
 <p align=center> <a href="https://trendshift.io/repositories/12443" target="_blank"><img src="https://trendshift.io/api/badge/repositories/12443" alt="bluewave-labs%2Fcheckmate | Trendshift" style="width: 250px; height: 55px;" width="250" height="55"/></a></p>
-  
+
+<p align="center">
+  🇺🇸 <a href="README.md">English</a> |
+  🇸🇦 <a href="docs/translations/README.ar.md">العربية</a> |
+  🇪🇸 <a href="docs/translations/README.ca.md">Català</a> |
+  🇨🇿 <a href="docs/translations/README.cs.md">Čeština</a> |
+  🇩🇪 <a href="docs/translations/README.de.md">Deutsch</a> |
+  🇪🇸 <a href="docs/translations/README.es.md">Español</a> |
+  🇫🇮 <a href="docs/translations/README.fi.md">Suomi</a> |
+  🇫🇷 <a href="docs/translations/README.fr.md">Français</a> |
+  🇯🇵 <a href="docs/translations/README.ja.md">日本語</a> |
+  🇧🇷 <a href="docs/translations/README.pt-BR.md">Português (Brasil)</a> |
+  🇷🇺 <a href="docs/translations/README.ru.md">Русский</a> |
+  🇹🇭 <a href="docs/translations/README.th.md">ไทย</a> |
+  🇹🇷 <a href="docs/translations/README.tr.md">Türkçe</a> |
+  🇺🇦 <a href="docs/translations/README.uk.md">Українська</a> |
+  🇻🇳 <a href="docs/translations/README.vi.md">Tiếng Việt</a> |
+  🇨🇳 <a href="docs/translations/README.zh-CN.md">简体中文</a> |
+  🇹🇼 <a href="docs/translations/README.zh-TW.md">繁體中文</a>
+</p>
+
 ![](https://img.shields.io/github/license/bluewave-labs/checkmate)
 ![](https://img.shields.io/github/repo-size/bluewave-labs/checkmate)
 ![](https://img.shields.io/github/commit-activity/m/bluewave-labs/checkmate)
@@ -7,7 +27,6 @@
 ![](https://img.shields.io/github/languages/top/bluewave-labs/checkmate)
 ![](https://img.shields.io/github/issues/bluewave-labs/checkmate)
 ![](https://img.shields.io/github/issues-pr/bluewave-labs/checkmate)
-[![OpenSSF Best Practices](https://www.bestpractices.dev/projects/9901/badge)](https://www.bestpractices.dev/projects/9901)
 [![Ask DeepWiki](https://deepwiki.com/badge.svg)](https://deepwiki.com/bluewave-labs/checkmate)
 
 <h1 align="center"><a href="https://bluewavelabs.ca" target="_blank">Checkmate</a></h1>
@@ -16,7 +35,10 @@
 
 [![Run on PikaPods](https://www.pikapods.com/static/run-button.svg)](https://www.pikapods.com/pods?run=checkmate)
 
-<img width="1660" alt="image" src="https://github.com/user-attachments/assets/b748f36d-a271-4965-ad0a-18bf153bbee7" />
+<img width="1703" height="1041" alt="image" src="https://github.com/user-attachments/assets/0f4dcf38-9b42-4b84-8633-ff34778df1a8" />
+
+<br>
+
 
 This repository contains both the frontend and the backend of Checkmate, an open-source, self-hosted monitoring tool for tracking server hardware, uptime, response times, and incidents in real-time with beautiful visualizations. Checkmate regularly checks whether a server/website is accessible and performs optimally, providing real-time alerts and reports on the monitored services' availability, downtime, and response time.
 
@@ -24,8 +46,6 @@ Checkmate also has an agent, called [Capture](https://github.com/bluewave-labs/c
 
 Checkmate has been stress-tested with 1000+ active monitors without any particular issues or performance bottlenecks.
 
-**If you would like to sponsor a feature, [see this link](https://checkmate.so/sponsored-features).**
-
 ## 📚 Table of contents
 
 - [📦 Demo](#demo)  
@@ -38,15 +58,16 @@ Checkmate has been stress-tested with 1000+ active monitors without any particul
 - [🏗️ Tech stack](#tech-stack)  
 - [🔗 A few links](#a-few-links)  
 - [🤝 Contributing](#contributing)  
-- [💰 Our sponsors](#our-sponsors)
 
 
+<a id="demo"></a>
 ## Demo
 
 You can see the latest build of [Checkmate](https://demo.checkmate.so/) in action. 
 
 The username is demouser@demo.com and the password is Demouser1! (just a note that we update the demo server from time to time, so if it doesn't work for you, please ping us on the Discussions channel).
 
+<a id="users-guide"></a>
 ## User's guide
 
 Usage instructions can be found [here](https://checkmate.so/docs). 
@@ -55,6 +76,7 @@ Usage instructions can be found [here](https://checkmate.so/docs).
 - [Docker](https://www.docker.com/) installed
 - [Git](https://git-scm.com/) installed
 
+<a id="installation"></a>
 ## Installation
 
 See installation instructions in [Checkmate documentation portal](https://checkmate.so/docs). 
@@ -67,6 +89,7 @@ If you need to monitor internal HTTPS endpoints with certificates from private C
 
 For more documentation, see the [docs directory](./docs/).
 
+<a id="performance"></a>
 ## Performance
 
 Thanks to extensive optimizations, Checkmate operates with an exceptionally small memory footprint, requiring minimal memory and CPU resources. Here’s the memory usage of a Node.js instance running on a server that monitors 323 servers every minute:
@@ -77,6 +100,7 @@ You can see the memory footprint of MongoDB and Redis on the same server (398Mb
 
 ![image](https://github.com/user-attachments/assets/3b469e85-e675-4040-a162-3f24c1afc751)
 
+<a id="questions--ideas"></a>
 ## Questions & Ideas
 
 If you have any questions, suggestions or comments, you have several options: 
@@ -86,33 +110,21 @@ If you have any questions, suggestions or comments, you have several options:
 
 Feel free to ask questions or share your ideas - we'd love to hear from you!
 
+<a id="features"></a>
 ## Features
 
 - Completely open source, deployable on your servers or home devices (e.g Raspberry Pi 4 or 5)
-- Website monitoring
+- Several monitoring options: Uptime, Docker, Ping, SSL, Port, Game server
 - Page speed monitoring
 - Infrastructure monitoring (memory, disk usage, CPU performance, network etc) - requires [Capture](https://github.com/bluewave-labs/capture) agent
   - Selective disk monitoring with mountpoint selection
-- Docker monitoring
-- Ping monitoring
-- SSL monitoring
-- Port monitoring
-- Game server monitoring (3.0)
 - Incidents at a glance
-- Status pages
-- E-mail, Webhooks, Discord and Slack notifications
+- Status pages with 4 beautiful themes
+- E-mail, Webhooks, Discord, Slack, PagerDuty, Matrix, Microsoft Teams, Telegram, Pushover, Twilio (SMS) notifications
 - Scheduled maintenance
 - JSON query monitoring
-- Multi-language support for English, German, Japanese, Portuguese (Brazil), Russian, Turkish, Ukrainian, Vietnamese, Chinese (Traditional, Taiwan)
+- 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
 
-**Short term roadmap:** 
-
-- Plugins that will help Checkmate get any information from a remote service (e.g database, etc)
-- Better notifications
-- Network monitoring
-- ..and a few more features
-
-If you would like to sponsor an additional feature, [see this page](https://checkmate.so/sponsored-features).
 
 ## Monitor Lifecycle
 
@@ -123,6 +135,7 @@ If you would like to sponsor an additional feature, [see this page](https://chec
 5. Upon a state change: an incident is either created or resolved, depending on the monitor's current status
 6. Notifications are triggered based on configuration
 
+<a id="screenshots"></a>
 ## Screenshots
 
 <p>
@@ -140,6 +153,7 @@ If you would like to sponsor an additional feature, [see this page](https://chec
 
 
 
+<a id="tech-stack"></a>
 ## Tech stack
 
 - [ReactJs](https://react.dev/)
@@ -149,6 +163,7 @@ If you would like to sponsor an additional feature, [see this page](https://chec
 - [Recharts](https://recharts.org)
 - Lots of other open source components!
 
+<a id="a-few-links"></a>
 ## A few links
 
 - If you would like to support us, please consider giving it a ⭐ and click on "watch".
@@ -156,6 +171,7 @@ If you would like to sponsor an additional feature, [see this page](https://chec
 - Need a ping when there's a new release? Use [Newreleases](https://newreleases.io/), a free service to track releases.
 - Watch a Checkmate [installation and usage video](https://www.youtube.com/watch?v=GfFOc0xHIwY)
 
+<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.
@@ -180,8 +196,3 @@ Here's how you can contribute:
 
 [![Star History Chart](https://api.star-history.com/svg?repos=bluewave-labs/checkmate&type=Date)](https://star-history.com/#bluewave-labs/Checkmate&Date)
 
-## Our sponsors
-
-Thanks to [Gitbook](https://gitbook.io/) for giving us a free tier for their documentation platform, and [Poeditor](https://poeditor.com/) providing us a free account to use their i18n services. If you would like to sponsor Checkmate, please send an email to hello@bluewavelabs.ca
-
-If you would like to sponsor a feature, [see this page](https://checkmate.so/sponsored-features).

charts/helm/checkmate/Chart.yaml

@@ -2,5 +2,5 @@ apiVersion: v2
 name: checkmate-chart
 description: A Helm chart for Checkmate App
 type: application
-version: 0.1.0
-appVersion: "2.3"
+version: 0.2.0
+appVersion: "v3.8.1" # "v" prefix: published image tags are v-prefixed (ghcr.io/.../checkmate-*:v3.8.1)

charts/helm/checkmate/INSTALLATION.md

@@ -19,12 +19,11 @@ cd checkmate/charts/helm/checkmate
 
 ### 2. Customize values.yaml
 Edit `values.yaml` to update:
-- `client.ingress.host` and `server.ingress.host` with your domain names
-- `server.protocol` (usually http or https)
+- `client.ingress.host` and `api.ingress.host` with your domain names
+- `api.protocol` (usually http or https)
 - **If upgrading**: Migrate persistence settings from flat structure to nested:
   - Old: `persistence.mongodbSize` → New: `persistence.mongo.size`
-  - Old: `persistence.redisSize` → New: `persistence.redis.size`
-  - Add: `persistence.mongo.storageClass` and `persistence.redis.storageClass` (leave empty for default)
+  - Add: `persistence.mongo.storageClass` (leave empty for default)
 - Secrets under the `secrets` section (`JWT_SECRET`, email credentials, API keys, etc.) — replace all change_me values
 - **For TLS/HTTPS**: Configure ingress TLS settings (see section below)
 
@@ -32,7 +31,7 @@ Edit `values.yaml` to update:
 ```bash
 helm install checkmate ./charts/helm/checkmate
 ```
-This will deploy the client, server, MongoDB, and Redis components.
+This will deploy the client, api, and MongoDB components.
 
 ### 4. Verify the deployment
 Check pods and services:
@@ -43,6 +42,137 @@ kubectl get svc
 
 Once all pods are `Running` and `Ready`, you can access Checkmate via the configured ingress hosts.
 
+## Upgrading from a previous release
+
+This release renames the `server.*` value block to `api.*` and drops the (unused) bundled Redis.
+Read this before running `helm upgrade` on an existing install.
+
+### `server.*` → `api.*` (values rename)
+
+The value block formerly named `server` is now `api` (`server.image` → `api.image`,
+`server.ingress.host` → `api.ingress.host`, `server.protocol` → `api.protocol`, `server.resources`,
+`server.affinity`, `server.tolerations`, `server.ingress.*`, etc.).
+
+**Your existing `server.*` overrides keep working** — the chart merges any legacy `server.*` values on
+top of the `api.*` defaults (legacy wins where set), so an unchanged values file upgrades cleanly. The
+shim is transitional; migrate your overrides to `api.*` at your convenience and drop the `server:`
+block. If you set **both** `server.*` and `api.*` for the same field, the legacy `server.*` value wins —
+don't mix them.
+
+### Resource renames cause a replace, not a rename
+
+The Kubernetes objects are renamed alongside the values:
+
+| Old object | New object |
+| --- | --- |
+| Deployment/Service `checkmate-server` | `checkmate-api` |
+| Ingress `checkmate-server-ingress` | `checkmate-api-ingress` |
+| ConfigMap `checkmate-server-nginx-cm` | `checkmate-client-nginx-cm` |
+
+Helm deletes the old objects and creates the new ones on upgrade. Expect a brief API restart and a
+**new ClusterIP** for the API Service — update anything outside the chart that referenced the
+`checkmate-server` Service by name. MongoDB data (its PVC) is untouched.
+
+### Redis removed
+
+The bundled Redis StatefulSet/Service and the `redis.*` / `persistence.redis.*` values are gone — the
+scheduler runs in-process and never used them. Default installs (`redis.enabled: false`) are
+unaffected. If you had explicitly set `redis.enabled: true`, **the Redis StatefulSet and its PVC are
+deleted on upgrade** — back up anything you stored there first. Leftover `redis:` / `persistence.redis:`
+keys in your values file are harmless (ignored).
+
+### New secret defaults
+
+`NODE_ENV: production`, `LOG_LEVEL: info`, and `TOKEN_TTL: 99d` are now part of the default `secrets`
+block and merge into your install unless you override them. Set them explicitly if you relied on
+different values (e.g. a non-production `NODE_ENV`).
+
+### Image tags follow the chart's `appVersion`
+
+Each tier's `image` value is now the repository **without a tag**; the tag defaults to the chart's
+`appVersion`, so the client, api, worker, and mongodb images all move together when you upgrade the
+chart. You can still pin per tier:
+
+```yaml
+api:
+  image: ghcr.io/bluewave-labs/checkmate-backend   # repo only
+  tag: ""            # empty → Chart.appVersion; set e.g. "v3.1.0" to pin, or "latest" for a dev tag
+```
+
+- `<tier>.tag` overrides the version for that tier. The `worker` tier inherits `api.tag` (and
+  `api.image`) unless you set `worker.tag` / `worker.image`.
+- If you put a **full `repo:tag`** in `image` (e.g. a legacy `server.image: …:v3.2.0` override), it is
+  used verbatim and the `tag` field is ignored — so existing pinned values keep working unchanged.
+
+**Prefer a pinned tag over `latest`.** With the default `imagePullPolicy: IfNotPresent`, `latest` is
+cached per node and never refreshed, and `helm rollback` can't move a floating tag — pin a version (or
+let it default to `appVersion`) for reproducible, rollback-able deploys.
+
+## Scaling: the worker tier & autoscaling
+
+By default the chart runs a single all-in-one API pod that both schedules **and** processes monitoring
+jobs (`worker.enabled: false`). For larger deployments you can split processing onto a dedicated,
+horizontally-scalable worker tier.
+
+### Topology
+
+| `worker.enabled` | API (`checkmate-api`) | Worker (`checkmate-worker`) |
+| --- | --- | --- |
+| `false` (default) | schedules **and** processes jobs (`QUEUE_PRIMARY_PROCESSES=true`) | not deployed |
+| `true` | schedules + serves the API only (`QUEUE_PRIMARY_PROCESSES=false`, derived) | processes all jobs |
+
+`QUEUE_PRIMARY_PROCESSES` is **derived** from `worker.enabled` — you never set it directly, so the API
+and worker tier can never both process (or both ignore) the queue.
+
+### Enabling the worker tier
+
+```yaml
+worker:
+  enabled: true
+  replicas: 2   # used only when autoscaling.enabled = false
+```
+
+The worker takes **no inbound traffic** (no Service): the kubelet probes pod IPs directly on
+`HEALTH_PORT` (`/livez`, `/readyz`), and graceful shutdown drains in-flight jobs before exit.
+
+> **Invariant:** `worker.terminationGracePeriodSeconds` (default `30`) **must stay greater than the
+> server drain timeout (25s)**. Lower it and Kubernetes SIGKILLs workers mid-drain, losing in-flight
+> checks.
+
+> **Caveat:** with the worker tier enabled the API no longer processes jobs, so if **all** workers are
+> down nothing processes. The `autoscaling.minReplicaCount: 1` floor plus liveness restarts mitigate
+> this; full failover to the API would need leader election (not supported).
+
+### Autoscaling with KEDA
+
+Backlog-driven autoscaling is **off by default** and requires the
+[KEDA operator](https://keda.sh/) installed in-cluster. Enable it with:
+
+```yaml
+worker:
+  enabled: true
+  autoscaling:
+    enabled: true
+    minReplicaCount: 1     # processing floor — never 0, or checks silently stall
+    maxReplicaCount: 10
+    backlogPerReplica: 50  # target due-job backlog per worker
+    mongo:
+      dbName: uptime_db    # MUST match the database in DB_CONNECTION_STRING
+```
+
+A KEDA `ScaledObject` queries MongoDB directly for the due-check backlog and scales the worker
+Deployment between `minReplicaCount` and `maxReplicaCount`. When autoscaling is on, the Deployment
+omits `replicas` so it doesn't fight the HPA KEDA creates. Make sure `autoscaling.mongo.dbName`
+matches the database name in your `DB_CONNECTION_STRING`, or the scaler counts the wrong DB (always 0
+backlog → never scales up).
+
+#### Fallback: Prometheus-adapter HPA (not shipped)
+
+If your KEDA/Mongo versions reject the `$$NOW`/`$toLong` query, or you already run Prometheus, scrape
+the worker's `/metrics` (`checkmate_worker_due_backlog`), expose it via prometheus-adapter, and target
+it with a standard `HorizontalPodAutoscaler`. The manifest is left to the operator; the app computes
+`now` in code on this path, so the query coercion is unnecessary.
+
 ## Enabling TLS/HTTPS with cert-manager
 
 If you have [cert-manager](https://cert-manager.io/) installed in your cluster, you can enable automatic TLS certificate provisioning using Let's Encrypt or other certificate issuers.
@@ -68,7 +198,7 @@ client:
       enabled: true
       secretName: checkmate-client-tls
 
-server:
+api:
   protocol: https
   ingress:
     enabled: true
@@ -78,7 +208,7 @@ server:
       cert-manager.io/cluster-issuer: "letsencrypt-prod"
     tls:
       enabled: true
-      secretName: checkmate-server-tls
+      secretName: checkmate-api-tls
 ```
 
 ### Alternative: Using --set flags
@@ -88,13 +218,13 @@ You can also enable TLS during installation using Helm's `--set` flags:
 ```bash
 helm install checkmate ./charts/helm/checkmate \
   --set client.protocol=https \
-  --set server.protocol=https \
+  --set api.protocol=https \
   --set client.ingress.annotations."cert-manager\.io/cluster-issuer"="letsencrypt-prod" \
   --set client.ingress.tls.enabled=true \
   --set client.ingress.tls.secretName=checkmate-client-tls \
-  --set server.ingress.annotations."cert-manager\.io/cluster-issuer"="letsencrypt-prod" \
-  --set server.ingress.tls.enabled=true \
-  --set server.ingress.tls.secretName=checkmate-server-tls
+  --set api.ingress.annotations."cert-manager\.io/cluster-issuer"="letsencrypt-prod" \
+  --set api.ingress.tls.enabled=true \
+  --set api.ingress.tls.secretName=checkmate-api-tls
 ```
 
 ### Verification
@@ -107,7 +237,7 @@ kubectl get certificates
 
 # Check certificate details
 kubectl describe certificate checkmate-client-tls
-kubectl describe certificate checkmate-server-tls
+kubectl describe certificate checkmate-api-tls
 
 # Verify the secrets were created
 kubectl get secrets | grep checkmate-tls

charts/helm/checkmate/templates/_helpers.tpl

@@ -0,0 +1,35 @@
+{{- /*
+Back-compat shim: the `server.*` value block was renamed to `api.*`. Existing installs that
+still pass a legacy `server:` block keep working — this returns the effective API values with any
+legacy `server.*` overrides merged on top of the `api.*` defaults (legacy wins where set).
+
+New installs have no `server:` key, so this is a no-op deepCopy of `.Values.api`. Consume it as:
+  {{- $api := include "checkmate.api" . | fromYaml -}}
+then reference `$api.*` instead of `.Values.api.*`.
+*/}}
+{{- define "checkmate.api" -}}
+{{- $api := deepCopy .Values.api -}}
+{{- with .Values.server -}}
+{{- $api = mergeOverwrite $api (deepCopy .) -}}
+{{- end -}}
+{{- $api | toYaml -}}
+{{- end -}}
+
+{{- /*
+Resolve a full image reference from a repo + optional tag. `appVersion` is the single source of
+truth for tags: bumping Chart.appVersion moves every tier at once. Call as:
+  {{ include "checkmate.image" (dict "image" $repo "tag" $tag "root" $) }}
+
+If `image` already carries a tag (a ":" in its final path segment) it is used verbatim — this keeps
+legacy `server.image: repo:tag` overrides working and lets anyone pin a full ref (e.g. tag "latest").
+A ":" only in the registry segment (a registry port like "reg:5000/x") is ignored, so a tag is still
+appended. Otherwise the tag is `tag` if set, else the chart's appVersion.
+*/}}
+{{- define "checkmate.image" -}}
+{{- $lastSegment := .image | splitList "/" | last -}}
+{{- if contains ":" $lastSegment -}}
+{{- .image -}}
+{{- else -}}
+{{- printf "%s:%s" .image (.tag | default .root.Chart.AppVersion) -}}
+{{- end -}}
+{{- end -}}

charts/helm/checkmate/templates/api/deployment.yaml

@@ -0,0 +1,65 @@
+{{- $api := include "checkmate.api" . | fromYaml -}}
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: checkmate-api
+spec:
+  replicas: 1 # single scheduler — seeds/reconciles the jobs collection
+  selector:
+    matchLabels:
+      app: checkmate-api
+  template:
+    metadata:
+      labels:
+        app: checkmate-api
+    spec:
+    {{- with $api.affinity }}
+      affinity:
+        {{- tpl ( . | toYaml) $ | nindent 8 }}
+    {{- end }}
+    {{- with $api.tolerations }}
+      tolerations:
+        {{- tpl ( . | toYaml) $ | nindent 8 }}
+    {{- end }}
+      containers:
+        - name: api
+          image: {{ include "checkmate.image" (dict "image" $api.image "tag" $api.tag "root" $) }}
+          imagePullPolicy: {{ $api.imagePullPolicy }}
+          ports:
+            - name: http
+              containerPort: {{ $api.port }}
+          envFrom:
+            - secretRef:
+                name: checkmate-secrets
+          # Probes hit the Express /api/v1/health endpoint — proves the HTTP server is responsive.
+          # NOTE: this does NOT detect a wedged job loop when queuePrimaryProcesses=true (the API is
+          # also a worker). Worker-aware health for that mode is a follow-up — see worker-health-checks.md §7.5.
+          livenessProbe:
+            httpGet:
+              path: /api/v1/health
+              port: http
+            initialDelaySeconds: {{ $api.probes.liveness.initialDelaySeconds }}
+            periodSeconds: {{ $api.probes.liveness.periodSeconds }}
+            timeoutSeconds: {{ $api.probes.liveness.timeoutSeconds }}
+            failureThreshold: {{ $api.probes.liveness.failureThreshold }}
+          readinessProbe:
+            httpGet:
+              path: /api/v1/health
+              port: http
+            initialDelaySeconds: {{ $api.probes.readiness.initialDelaySeconds }}
+            periodSeconds: {{ $api.probes.readiness.periodSeconds }}
+            timeoutSeconds: {{ $api.probes.readiness.timeoutSeconds }}
+            failureThreshold: {{ $api.probes.readiness.failureThreshold }}
+          {{- with $api.resources }}
+          resources:
+              {{- tpl ( . | toYaml) $ | nindent 12 }}
+          {{- end }}
+          env:
+          - name: CLIENT_HOST
+            value: "{{ .Values.client.protocol }}://{{ .Values.client.ingress.host }}"
+          - name: QUEUE_MODE
+            value: "primary"
+          # Derived: when a worker tier is deployed the API only schedules (false); otherwise it is
+          # all-in-one and processes jobs itself (true). Keeps the two from ever competing for jobs.
+          - name: QUEUE_PRIMARY_PROCESSES
+            value: {{ not .Values.worker.enabled | quote }}

charts/helm/checkmate/templates/api/ingress.yaml

@@ -1,11 +1,12 @@
-{{- if .Values.server.ingress.enabled }}
+{{- $api := include "checkmate.api" . | fromYaml -}}
+{{- if $api.ingress.enabled }}
 apiVersion: networking.k8s.io/v1
 kind: Ingress
 metadata:
-  name: checkmate-server-ingress
-  {{- if .Values.server.ingress.annotations }}
+  name: checkmate-api-ingress
+  {{- if $api.ingress.annotations }}
   annotations:
-    {{- range $key, $value := .Values.server.ingress.annotations }}
+    {{- range $key, $value := $api.ingress.annotations }}
     {{ $key }}: {{ $value | quote }}
     {{- end }}
   {{- end }}
@@ -17,22 +18,22 @@ metadata:
     #nginx.ingress.kubernetes.io/cors-allow-headers: "DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization"
     #nginx.ingress.kubernetes.io/cors-allow-credentials: "true"*/}}
 spec:
-  ingressClassName: {{ .Values.server.ingress.className }}
-  {{- if .Values.server.ingress.tls.enabled }}
+  ingressClassName: {{ $api.ingress.className }}
+  {{- if $api.ingress.tls.enabled }}
   tls:
     - hosts:
-        - {{ .Values.server.ingress.host }}
-      secretName: {{ default (printf "%s-server-tls" .Release.Name) .Values.server.ingress.tls.secretName }}
+        - {{ $api.ingress.host }}
+      secretName: {{ default (printf "%s-api-tls" .Release.Name) $api.ingress.tls.secretName }}
   {{- end }}
   rules:
-    - host: {{ .Values.server.ingress.host }}
+    - host: {{ $api.ingress.host }}
       http:
         paths:
           - path: /api/v1
             pathType: Prefix
             backend:
               service:
-                name: checkmate-server
+                name: checkmate-api
                 port:
-                  number: {{ .Values.server.port }}
+                  number: {{ $api.port }}
 {{- end }}

charts/helm/checkmate/templates/api/service.yaml

@@ -0,0 +1,10 @@
+{{- $api := include "checkmate.api" . | fromYaml -}}
+apiVersion: v1
+kind: Service
+metadata:
+  name: checkmate-api
+spec:
+  selector:
+    app: checkmate-api
+  ports:
+    - port: {{ $api.port }}

charts/helm/checkmate/templates/client/deployment.yaml

@@ -1,3 +1,4 @@
+{{- $api := include "checkmate.api" . | fromYaml -}}
 apiVersion: apps/v1
 kind: Deployment
 metadata:
@@ -22,12 +23,13 @@ spec:
     {{- end }}
       containers:
         - name: client
-          image: {{ .Values.client.image }}
+          image: {{ include "checkmate.image" (dict "image" .Values.client.image "tag" .Values.client.tag "root" $) }}
+          imagePullPolicy: {{ .Values.client.imagePullPolicy }}
           ports:
             - containerPort: {{ .Values.client.port }}
           env:
             - name: UPTIME_APP_API_BASE_URL
-              value: "{{ .Values.server.protocol }}://{{ .Values.server.ingress.host }}/api/v1"
+              value: "{{ $api.protocol }}://{{ $api.ingress.host }}/api/v1"
             - name: UPTIME_APP_CLIENT_HOST
               value: "{{ .Values.client.protocol }}://{{ .Values.client.ingress.host }}"
           volumeMounts:
@@ -41,4 +43,4 @@ spec:
       volumes:
         - name: config-volume
           configMap:
-            name: checkmate-server-nginx-cm
+            name: checkmate-client-nginx-cm

charts/helm/checkmate/templates/client/nginx-cm.yaml

@@ -1,7 +1,8 @@
+{{- $api := include "checkmate.api" . | fromYaml -}}
 apiVersion: v1
-kind: ConfigMap 
+kind: ConfigMap
 metadata:
-  name: checkmate-server-nginx-cm
+  name: checkmate-client-nginx-cm
 data:
   default.conf: |
     server {
@@ -22,7 +23,7 @@ data:
       }
 
       # location /api/ {
-      #     proxy_pass http://{{ .Values.server.ingress.host }}:5000/api/;
+      #     proxy_pass http://{{ $api.ingress.host }}:5000/api/;
       #     proxy_http_version 1.1;
       #     proxy_set_header Host $host;
       #     proxy_set_header X-Real-IP $remote_addr;
@@ -31,7 +32,7 @@ data:
       # }
 
       location /api-docs/ {
-          proxy_pass http://{{ .Values.server.ingress.host }}:5000/api-docs/;
+          proxy_pass http://{{ $api.ingress.host }}:5000/api-docs/;
           proxy_http_version 1.1;
           proxy_set_header Host $host;
           proxy_set_header X-Real-IP $remote_addr;

charts/helm/checkmate/templates/db/mongodb-statefulsets.yaml

@@ -22,7 +22,8 @@ spec:
     {{- end }}
       containers:
         - name: mongodb
-          image: {{ .Values.mongodb.image }}
+          image: {{ include "checkmate.image" (dict "image" .Values.mongodb.image "tag" .Values.mongodb.tag "root" $) }}
+          imagePullPolicy: {{ .Values.mongodb.imagePullPolicy }}
           ports:
             - containerPort: {{ .Values.mongodb.port }}
           command: ["mongod", "--quiet", "--bind_ip_all"]
@@ -37,7 +38,9 @@ spec:
     - metadata:
         name: checkmate-mongo-persistent-storage
       spec:
-        storageClassName: {{ .Values.persistence.mongo.storageClass | quote }}
+        {{- with .Values.persistence.mongo.storageClass }}
+        storageClassName: {{ . | quote }} {{/* omitted when empty so the cluster's default StorageClass applies */}}
+        {{- end }}
         accessModes: ["ReadWriteOnce"]
         resources:
           requests:

charts/helm/checkmate/templates/prechecks.yaml

@@ -1,14 +1,15 @@
+{{- $api := include "checkmate.api" . | fromYaml -}}
 {{- if eq .Values.client.ingress.host "change_me" }}
   {{- fail "client.ingress.host must be overridden and not set to 'change_me'" }}
 {{- end }}
 
-{{- if eq .Values.server.ingress.host "change_me" }}
-  {{- fail "server.ingress.host must be overridden and not set to 'change_me'" }}
+{{- if eq $api.ingress.host "change_me" }}
+  {{- fail "api.ingress.host (or legacy server.ingress.host) must be overridden and not set to 'change_me'" }}
 {{- end }}
 
-{{- $serverProtocol := .Values.server.protocol }}
-{{- if not (or (eq $serverProtocol "http") (eq $serverProtocol "https")) }}
-  {{- fail "server.protocol must be either 'http' or 'https'" }}
+{{- $apiProtocol := $api.protocol }}
+{{- if not (or (eq $apiProtocol "http") (eq $apiProtocol "https")) }}
+  {{- fail "api.protocol must be either 'http' or 'https'" }}
 {{- end }}
 
 {{- $clientProtocol := .Values.client.protocol }}
@@ -21,28 +22,33 @@
   {{- fail "client.ingress.tls.enabled is true but client.protocol is not 'https'. Set client.protocol: https to avoid mixed content." }}
 {{- end }}
 
-{{- if and .Values.server.ingress.tls.enabled (ne $serverProtocol "https") }}
-  {{- fail "server.ingress.tls.enabled is true but server.protocol is not 'https'. Set server.protocol: https to ensure correct API base URL." }}
+{{- if and $api.ingress.tls.enabled (ne $apiProtocol "https") }}
+  {{- fail "api.ingress.tls.enabled is true but api.protocol is not 'https'. Set api.protocol: https to ensure correct API base URL." }}
 {{- end }}
 
 {{/* If client runs on https, API must also be https to avoid mixed content */}}
-{{- if and (eq $clientProtocol "https") (ne $serverProtocol "https") }}
-  {{- fail "client.protocol is 'https' but server.protocol is not. Set server.protocol: https to prevent browser mixed-content issues." }}
+{{- if and (eq $clientProtocol "https") (ne $apiProtocol "https") }}
+  {{- fail "client.protocol is 'https' but api.protocol is not. Set api.protocol: https to prevent browser mixed-content issues." }}
 {{- end }}
 
 {{/* Fail early if TLS enabled without cert-manager annotations (cluster-issuer or issuer) */}}
 {{- $cAnn := .Values.client.ingress.annotations | default dict }}
-{{- $sAnn := .Values.server.ingress.annotations | default dict }}
+{{- $aAnn := $api.ingress.annotations | default dict }}
 
 {{- $clientHasIssuer := or (hasKey $cAnn "cert-manager.io/cluster-issuer") (hasKey $cAnn "cert-manager.io/issuer") }}
-{{- $serverHasIssuer := or (hasKey $sAnn "cert-manager.io/cluster-issuer") (hasKey $sAnn "cert-manager.io/issuer") }}
+{{- $apiHasIssuer := or (hasKey $aAnn "cert-manager.io/cluster-issuer") (hasKey $aAnn "cert-manager.io/issuer") }}
 
 {{- if and .Values.client.ingress.tls.enabled (not $clientHasIssuer) }}
   {{- fail "client.ingress.tls.enabled is true but no cert-manager issuer annotation found. Add 'cert-manager.io/cluster-issuer' or 'cert-manager.io/issuer'." }}
 {{- end }}
 
-{{- if and .Values.server.ingress.tls.enabled (not $serverHasIssuer) }}
-  {{- fail "server.ingress.tls.enabled is true but no cert-manager issuer annotation found. Add 'cert-manager.io/cluster-issuer' or 'cert-manager.io/issuer'." }}
+{{- if and $api.ingress.tls.enabled (not $apiHasIssuer) }}
+  {{- fail "api.ingress.tls.enabled is true but no cert-manager issuer annotation found. Add 'cert-manager.io/cluster-issuer' or 'cert-manager.io/issuer'." }}
 {{- end }}
 
-{{/* Secret name can be omitted; we default to <release>-client|server-tls in templates */}}
+{{/* Worker grace period must exceed the server drain timeout (25s) or workers are SIGKILLed mid-drain */}}
+{{- if and .Values.worker.enabled (le (int .Values.worker.terminationGracePeriodSeconds) 25) }}
+  {{- fail "worker.terminationGracePeriodSeconds must be greater than 25 (the server drain timeout) or workers are killed mid-drain" }}
+{{- end }}
+
+{{/* Secret name can be omitted; we default to <release>-client|api-tls in templates */}}

charts/helm/checkmate/templates/redis-service.yaml

@@ -1,11 +0,0 @@
-{{- if .Values.redis.enabled }}
-apiVersion: v1
-kind: Service
-metadata:
-  name: checkmate-redis
-spec:
-  selector:
-    app: checkmate-redis
-  ports:
-    - port: {{ .Values.redis.port }}
-{{- end }}

charts/helm/checkmate/templates/redis-statefulsets.yaml

@@ -1,33 +0,0 @@
-{{- if .Values.redis.enabled }}
-apiVersion: apps/v1
-kind: StatefulSet
-metadata:
-  name: checkmate-redis
-spec:
-  replicas: 1
-  selector:
-    matchLabels:
-      app: checkmate-redis
-  template:
-    metadata:
-      labels:
-        app: checkmate-redis
-    spec:
-      containers:
-        - name: redis
-          image: {{ .Values.redis.image }}
-          ports:
-            - containerPort: {{ .Values.redis.port }}
-          volumeMounts:
-            - name: redis-data
-              mountPath: /data
-  volumeClaimTemplates:
-    - metadata:
-        name: checkmate-redis-persistent-storage
-      spec:
-        storageClassName: {{ .Values.persistence.redis.storageClass | quote }}
-        accessModes: ["ReadWriteOnce"]
-        resources:
-          requests:
-            storage: {{ .Values.persistence.redis.size | default "1Gi" | quote }}
-{{- end }}

charts/helm/checkmate/templates/secrets.yaml

@@ -4,6 +4,14 @@
   {{- fail "secrets.JWT_SECRET must be overridden and cannot be 'change_me'" }}
 {{- end }}
 
+{{- /*
+  The bundled Mongo service ("checkmate-mongodb") lives in .Release.Namespace. App pods reach it
+  by bare name, but the KEDA operator runs in its own namespace and a bare name is NXDOMAIN there,
+  so worker autoscaling fails to query the backlog. Qualify the in-cluster host to its FQDN here so
+  the one connection string resolves from every namespace. External/already-qualified hosts are not
+  matched (the char after the host name is "." for an FQDN, which the pattern excludes).
+*/}}
+{{- $mongoFqdn := printf "checkmate-mongodb.%s.svc.cluster.local" .Release.Namespace }}
 apiVersion: v1
 kind: Secret
 metadata:
@@ -11,5 +19,9 @@ metadata:
 type: Opaque
 stringData:
 {{- range $key, $value := $secrets }}
+{{- if eq $key "DB_CONNECTION_STRING" }}
+  {{ $key }}: {{ regexReplaceAll "(//|@)checkmate-mongodb([:/,]|$)" $value (printf "${1}%s${2}" $mongoFqdn) | quote }}
+{{- else }}
   {{ $key }}: {{ $value | quote }}
+{{- end }}
 {{- end }}

charts/helm/checkmate/templates/server-deployment.yaml

@@ -1,37 +0,0 @@
-apiVersion: apps/v1
-kind: Deployment
-metadata:
-  name: checkmate-server
-spec:
-  replicas: 1
-  selector:
-    matchLabels:
-      app: checkmate-server
-  template:
-    metadata:
-      labels:
-        app: checkmate-server
-    spec:
-    {{- with .Values.server.affinity }}
-      affinity:
-        {{- tpl ( . | toYaml) $ | nindent 8 }}
-    {{- end }}
-    {{- with .Values.server.tolerations }}
-      tolerations:
-        {{- tpl ( . | toYaml) $ | nindent 8 }}
-    {{- end }}
-      containers:
-        - name: server
-          image: {{ .Values.server.image }}
-          ports:
-            - containerPort: {{ .Values.server.port }}
-          envFrom:
-            - secretRef:
-                name: checkmate-secrets
-          {{- with .Values.server.resources }}
-          resources:
-              {{- tpl ( . | toYaml) $ | nindent 12 }}
-          {{- end }}
-          env:
-          - name: CLIENT_HOST
-            value: "{{ .Values.client.protocol }}://{{ .Values.client.ingress.host }}"

charts/helm/checkmate/templates/server-service.yaml

@@ -1,9 +0,0 @@
-apiVersion: v1
-kind: Service
-metadata:
-  name: checkmate-server
-spec:
-  selector:
-    app: checkmate-server
-  ports:
-    - port: {{ .Values.server.port }}

charts/helm/checkmate/templates/worker/deployment.yaml

@@ -0,0 +1,66 @@
+{{- $api := include "checkmate.api" . | fromYaml -}}
+{{- if .Values.worker.enabled }}
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: checkmate-worker
+spec:
+  {{- if not .Values.worker.autoscaling.enabled }}
+  replicas: {{ .Values.worker.replicas }} # omitted when autoscaling owns the replica count
+  {{- end }}
+  selector:
+    matchLabels:
+      app: checkmate-worker
+  template:
+    metadata:
+      labels:
+        app: checkmate-worker
+    spec:
+      terminationGracePeriodSeconds: {{ .Values.worker.terminationGracePeriodSeconds }}
+    {{- with .Values.worker.affinity }}
+      affinity:
+        {{- tpl ( . | toYaml) $ | nindent 8 }}
+    {{- end }}
+    {{- with .Values.worker.tolerations }}
+      tolerations:
+        {{- tpl ( . | toYaml) $ | nindent 8 }}
+    {{- end }}
+      containers:
+        - name: worker
+          image: {{ include "checkmate.image" (dict "image" (.Values.worker.image | default $api.image) "tag" (.Values.worker.tag | default $api.tag) "root" $) }}
+          imagePullPolicy: {{ .Values.worker.imagePullPolicy | default $api.imagePullPolicy }}
+          ports:
+            - name: health
+              containerPort: {{ .Values.worker.healthPort }}
+          envFrom:
+            - secretRef:
+                name: checkmate-secrets # DB_CONNECTION_STRING (+ JWT_SECRET/CLIENT_HOST for validateEnv)
+          env:
+          # Secret default CLIENT_HOST is the non-URL "change_me"; override like the API so validateEnv passes.
+          - name: CLIENT_HOST
+            value: "{{ .Values.client.protocol }}://{{ .Values.client.ingress.host }}"
+          - name: QUEUE_MODE
+            value: "worker"
+          - name: HEALTH_PORT
+            value: {{ .Values.worker.healthPort | quote }}
+          livenessProbe:
+            httpGet:
+              path: /livez
+              port: health
+            initialDelaySeconds: {{ .Values.worker.probes.liveness.initialDelaySeconds }}
+            periodSeconds: {{ .Values.worker.probes.liveness.periodSeconds }}
+            timeoutSeconds: {{ .Values.worker.probes.liveness.timeoutSeconds }}
+            failureThreshold: {{ .Values.worker.probes.liveness.failureThreshold }}
+          readinessProbe:
+            httpGet:
+              path: /readyz
+              port: health
+            initialDelaySeconds: {{ .Values.worker.probes.readiness.initialDelaySeconds }}
+            periodSeconds: {{ .Values.worker.probes.readiness.periodSeconds }}
+            timeoutSeconds: {{ .Values.worker.probes.readiness.timeoutSeconds }}
+            failureThreshold: {{ .Values.worker.probes.readiness.failureThreshold }}
+          {{- with .Values.worker.resources }}
+          resources:
+              {{- tpl ( . | toYaml) $ | nindent 12 }}
+          {{- end }}
+{{- end }}

charts/helm/checkmate/templates/worker/scaledobject.yaml

@@ -0,0 +1,30 @@
+{{- if and .Values.worker.enabled .Values.worker.autoscaling.enabled }}
+apiVersion: keda.sh/v1alpha1
+kind: ScaledObject
+metadata:
+  name: checkmate-worker
+spec:
+  scaleTargetRef:
+    name: checkmate-worker
+  minReplicaCount: {{ .Values.worker.autoscaling.minReplicaCount }} # floor: never 0 — a cold gap stops checks
+  maxReplicaCount: {{ .Values.worker.autoscaling.maxReplicaCount }}
+  cooldownPeriod: {{ .Values.worker.autoscaling.cooldownPeriod }}
+  advanced:
+    horizontalPodAutoscalerConfig:
+      behavior:
+        scaleDown:
+          stabilizationWindowSeconds: {{ .Values.worker.autoscaling.stabilizationWindowSeconds }}
+  triggers:
+    - type: mongodb
+      metadata:
+        dbName: {{ .Values.worker.autoscaling.mongo.dbName | quote }}
+        collection: {{ .Values.worker.autoscaling.mongo.collection | quote }}
+        # The Phase 2 countDueBacklog predicate, time-relativized with $$NOW (epoch-ms via $toLong):
+        query: >-
+          { "type": "check", "isActive": true,
+            "$expr": { "$lte": ["$nextScheduledAt", { "$toLong": "$$NOW" }] },
+            "$or": [ { "lockedUntil": null },
+                     { "$expr": { "$lt": ["$lockedUntil", { "$toLong": "$$NOW" }] } } ] }
+        queryValue: {{ .Values.worker.autoscaling.backlogPerReplica | quote }}
+        connectionStringFromEnv: DB_CONNECTION_STRING # resolved from the worker's checkmate-secrets
+{{- end }}

charts/helm/checkmate/values.yaml

@@ -1,5 +1,7 @@
 client:
-  image: ghcr.io/bluewave-labs/checkmate-client:v3.2.0
+  image: ghcr.io/bluewave-labs/checkmate-client
+  tag: "" # defaults to Chart.appVersion; set a full repo:tag in `image` to pin (e.g. a :latest dev tag)
+  imagePullPolicy: IfNotPresent # IfNotPresent so kind-loaded :latest images are used (not pulled)
   port: 80
   protocol: http
   ingress:
@@ -17,10 +19,24 @@ client:
       # a cert-manager issuer annotation (e.g. cert-manager.io/cluster-issuer: "letsencrypt-prod").
       # The secret will be automatically created by cert-manager when using the cert-manager.io/cluster-issuer annotation
 
-server:
-  image: ghcr.io/bluewave-labs/checkmate-backend:v3.2.0
+api:
+  image: ghcr.io/bluewave-labs/checkmate-backend
+  tag: "" # defaults to Chart.appVersion; set a full repo:tag in `image` to pin (e.g. a :latest dev tag)
+  imagePullPolicy: IfNotPresent # IfNotPresent so kind-loaded :latest images are used (not pulled)
   port: 52345
   protocol: http
+  # Liveness/readiness probes hit GET /api/v1/health on the api port (proves the HTTP server is up).
+  probes:
+    liveness:
+      initialDelaySeconds: 10
+      periodSeconds: 10
+      timeoutSeconds: 3
+      failureThreshold: 3
+    readiness:
+      initialDelaySeconds: 5
+      periodSeconds: 10
+      timeoutSeconds: 3
+      failureThreshold: 3
   ingress:
     enabled: true
     host: change_me
@@ -31,40 +47,62 @@ server:
     #   cert-manager.io/cluster-issuer: "letsencrypt-prod"
     tls:
       enabled: false
-      # secretName: {{ .Release.Name }}-server-tls  # Optional; defaults to <release>-server-tls if omitted
-      # Note: when enabling TLS, also set server.protocol: https and add
+      # secretName: {{ .Release.Name }}-api-tls  # Optional; defaults to <release>-api-tls if omitted
+      # Note: when enabling TLS, also set api.protocol: https and add
       # a cert-manager issuer annotation (e.g. cert-manager.io/cluster-issuer: "letsencrypt-prod").
       # The secret will be automatically created by cert-manager when using the cert-manager.io/cluster-issuer annotation
 
-redis:
-  enabled: false
-  image: redis:7.2
-  port: 6379
-
 mongodb:
-  image: ghcr.io/bluewave-labs/checkmate-mongo:v3.2.0
+  image: ghcr.io/bluewave-labs/checkmate-mongo
+  tag: "" # defaults to Chart.appVersion; set a full repo:tag in `image` to pin
+  imagePullPolicy: IfNotPresent # IfNotPresent so kind-loaded :latest images are used (not pulled)
   port: 27017
 
+worker:
+  # Off by default; existing installs are unchanged. When true, a dedicated worker processes all
+  # jobs and the API stops processing (QUEUE_PRIMARY_PROCESSES is derived as false). When false, the
+  # API is all-in-one and processes jobs itself.
+  enabled: false
+  image: "" # defaults to api.image when empty, same as API image
+  tag: "" # defaults to api.tag (-> Chart.appVersion) when empty
+  imagePullPolicy: "" # defaults to api.imagePullPolicy when empty
+  replicas: 1 # used only when autoscaling.enabled = false
+  healthPort: 52346 # HEALTH_PORT; serves /livez /readyz /metrics
+  terminationGracePeriodSeconds: 30 # MUST stay > the server drain timeout (25s) or workers are killed mid-drain
+  resources: {}
+  affinity: {}
+  tolerations: {}
+  probes:
+    liveness: # /livez — failureThreshold>=3 so one slow tick never restarts mid-job
+      initialDelaySeconds: 10
+      periodSeconds: 10
+      timeoutSeconds: 3
+      failureThreshold: 3
+    readiness: # /readyz — flips to 503 on drain
+      initialDelaySeconds: 5
+      periodSeconds: 10
+      timeoutSeconds: 3
+      failureThreshold: 3
+  autoscaling:
+    enabled: false # requires the KEDA operator installed in-cluster
+    minReplicaCount: 1 # processing floor — never 0 (a cold gap silently stops checks)
+    maxReplicaCount: 10
+    backlogPerReplica: 50 # KEDA queryValue: target due-backlog per worker
+    cooldownPeriod: 300 # seconds before scaling an idle target down
+    stabilizationWindowSeconds: 300 # damp the interval-boundary herd
+    mongo:
+      dbName: uptime_db # must match DB_CONNECTION_STRING's database
+      collection: jobs
+
 secrets:
   JWT_SECRET: change_me
-#  REFRESH_TOKEN_SECRET: change_me
-#  SYSTEM_EMAIL_ADDRESS: test@example.com
-#  SYSTEM_EMAIL_PASSWORD: change_me
-#  SYSTEM_EMAIL_HOST: smtp.example.com
-#  SYSTEM_EMAIL_PORT: "587"
-#  PAGESPEED_API_KEY: change_me
-  DB_CONNECTION_STRING: mongodb://checkmate-mongodb.namespace.svc:27017/uptime_db
+  DB_CONNECTION_STRING: mongodb://checkmate-mongodb:27017/uptime_db
   CLIENT_HOST: change_me
-#  REDIS_HOST: redis
-#  REDIS_PORT: "6379"
-#  DB_TYPE: MongoDB
-#  TOKEN_TTL: 99d
-#  REFRESH_TOKEN_TTL: 99d
+  NODE_ENV: production
+  LOG_LEVEL: info
+  TOKEN_TTL: 99d
 
 persistence:
   mongo:
     size: 5Gi
     storageClass: ""
-  redis:
-    size: 1Gi
-    storageClass: ""

client/.eslintrc.cjs

@@ -1,3 +1,104 @@
+// MUI sx keys that have a native (system) prop equivalent.
+// Flagged when found inside an sx={{ ... }} object literal — see frontend-conventions.md rule #1.
+const SX_NATIVE_EQUIVALENT_KEYS = [
+	"color",
+	"bgcolor",
+	"backgroundColor",
+	"borderRadius",
+	"border",
+	"borderTop",
+	"borderBottom",
+	"borderLeft",
+	"borderRight",
+	"width",
+	"height",
+	"minHeight",
+	"maxWidth",
+	"minWidth",
+	"maxHeight",
+	"p",
+	"pt",
+	"pb",
+	"px",
+	"py",
+	"pl",
+	"pr",
+	"m",
+	"mt",
+	"mb",
+	"mx",
+	"my",
+	"ml",
+	"mr",
+	"display",
+	"textAlign",
+	"fontWeight",
+	"fontSize",
+	"lineHeight",
+	"gap",
+];
+
+// MUI components that accept system props as top-level attributes.
+// sx={{ color, p, mt, ... }} on these can be hoisted into native props.
+// Dialog*, Drawer*, Menu*, Tab*, Toolbar etc. only accept sx — don't flag those.
+const SX_HOISTABLE_COMPONENTS = [
+	"Box",
+	"Stack",
+	"Typography",
+	"Grid",
+	"Container",
+	"Paper",
+	"Card",
+	"CardContent",
+	"CardActions",
+	"CardHeader",
+	"Divider",
+	"Link",
+	"Chip",
+];
+
+const sxKeySelector = SX_HOISTABLE_COMPONENTS.flatMap((component) =>
+	SX_NATIVE_EQUIVALENT_KEYS.map(
+		(k) =>
+			`JSXOpeningElement[name.name='${component}'] > JSXAttribute[name.name='sx'] > JSXExpressionContainer > ObjectExpression > Property[key.name='${k}']`
+	)
+).join(", ");
+
+const FRONTEND_CONVENTION_RULES = {
+	// Rule #2 — color/bgcolor/borderColor as a string shorthand like "text.secondary".
+	// Catches: <Typography color="text.secondary" /> — should be color={theme.palette.text.secondary}.
+	"no-restricted-syntax": [
+		"warn",
+		{
+			selector:
+				"JSXAttribute[name.name=/^(color|bgcolor|borderColor)$/] > Literal[value=/\\./]",
+			message:
+				'Use the full theme path instead of a string shorthand. e.g. color={theme.palette.text.secondary} not color="text.secondary". See docs/frontend-conventions.md rule #2.',
+		},
+		{
+			// Rule #1 — sx={{ key: ... }} where key has a native prop equivalent.
+			selector: sxKeySelector,
+			message:
+				"Hoist this key out of `sx` onto the component as a native MUI prop (e.g. color={...}, mt={...}, width={...}). See docs/frontend-conventions.md rule #1.",
+		},
+		{
+			// Rule #4 — importing the singleton theme from the Theme module.
+			// Catches: import { theme } from "@/Utils/Theme/Theme" — should be useTheme() inside the component.
+			selector:
+				"ImportDeclaration[source.value='@/Utils/Theme/Theme'] > ImportSpecifier[imported.name='theme']",
+			message:
+				"Don't import { theme } from @/Utils/Theme/Theme — use the useTheme() hook inside the component. See docs/frontend-conventions.md rule #4.",
+		},
+		{
+			// Rule #3 (subset) — Typography fontSize={13} is the body default; drop it.
+			selector:
+				"JSXOpeningElement[name.name='Typography'] JSXAttribute[name.name='fontSize'] > JSXExpressionContainer > Literal[value=13]",
+			message:
+				"fontSize={13} is the Typography body default — drop the prop. For other sizes use typographyLevels tokens. See docs/frontend-conventions.md rule #3.",
+		},
+	],
+};
+
 module.exports = {
 	root: true,
 	env: { browser: true, es2020: true },
@@ -15,9 +116,43 @@ module.exports = {
 		"react/jsx-no-target-blank": "off",
 		"react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
 		"react/no-unescaped-entities": "off",
+		...FRONTEND_CONVENTION_RULES,
 	},
 	globals: {
 		__APP_VERSION__: "readonly",
 		process: "readonly",
 	},
+	overrides: [
+		{
+			files: ["**/*.ts", "**/*.tsx"],
+			parser: "@typescript-eslint/parser",
+			parserOptions: { ecmaVersion: "latest", sourceType: "module" },
+			extends: [
+				"eslint:recommended",
+				"plugin:@typescript-eslint/recommended",
+				"plugin:react/recommended",
+				"plugin:react/jsx-runtime",
+				"plugin:react-hooks/recommended",
+			],
+			plugins: ["@typescript-eslint", "react-refresh"],
+			rules: {
+				"react/jsx-no-target-blank": "off",
+				"react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
+				"react/no-unescaped-entities": "off",
+				"no-unused-vars": "off",
+				"@typescript-eslint/no-unused-vars": [
+					"warn",
+					{ argsIgnorePattern: "^_", varsIgnorePattern: "^_" },
+				],
+				// TS handles these; eslint duplicates create noise on existing files.
+				"@typescript-eslint/no-explicit-any": "off",
+				"@typescript-eslint/ban-ts-comment": "off",
+				"@typescript-eslint/ban-types": "off",
+				"@typescript-eslint/no-empty-function": "off",
+				"@typescript-eslint/no-empty-interface": "off",
+				"@typescript-eslint/no-non-null-assertion": "off",
+				...FRONTEND_CONVENTION_RULES,
+			},
+		},
+	],
 };

client/package-lock.json

@@ -1,13 +1,14 @@
 {
 	"name": "client",
-	"version": "3.6.1",
+	"version": "3.9.1",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "client",
-			"version": "3.6.1",
+			"version": "3.9.1",
 			"dependencies": {
+				"@csstools/css-tokenizer": "^3.0.4",
 				"@emotion/react": "^11.13.3",
 				"@emotion/styled": "^11.13.0",
 				"@hello-pangea/dnd": "^18.0.0",
@@ -18,7 +19,7 @@
 				"@mui/x-date-pickers": "7.29.4",
 				"@reduxjs/toolkit": "2.7.0",
 				"@types/maplibre-gl": "^1.13.2",
-				"axios": "^1.7.4",
+				"axios": "^1.15.2",
 				"dayjs": "1.11.13",
 				"html2canvas": "^1.4.1",
 				"human-interval": "2.0.1",
@@ -49,15 +50,18 @@
 				"@types/node": "24.5.2",
 				"@types/react": "^18.2.66",
 				"@types/react-dom": "^18.2.22",
+				"@typescript-eslint/eslint-plugin": "^7.18.0",
+				"@typescript-eslint/parser": "^7.18.0",
 				"@vitejs/plugin-react": "^4.2.1",
 				"eslint": "^8.57.0",
 				"eslint-plugin-react": "^7.34.1",
 				"eslint-plugin-react-hooks": "^5.0.0",
 				"eslint-plugin-react-refresh": "^0.4.6",
 				"lint-staged": "^16.2.7",
+				"mongoose": "9.6.2",
 				"prettier": "^3.3.3",
 				"typescript": "5.9.3",
-				"vite": "6.4.1"
+				"vite": "^6.4.2"
 			}
 		},
 		"node_modules/@babel/code-frame": {
@@ -82,6 +86,7 @@
 		"node_modules/@babel/core": {
 			"version": "7.29.0",
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"@babel/code-frame": "^7.29.0",
 				"@babel/generator": "^7.29.0",
@@ -299,6 +304,25 @@
 				"node": ">=6.9.0"
 			}
 		},
+		"node_modules/@csstools/css-tokenizer": {
+			"version": "3.0.4",
+			"resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-3.0.4.tgz",
+			"integrity": "sha512-Vd/9EVDiu6PPJt9yAh6roZP6El1xHrdvIVGjyBsHR0RYwNHgL7FJPyIIW4fANJNG6FtyZfvlRPpFI4ZM/lubvw==",
+			"funding": [
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/csstools"
+				},
+				{
+					"type": "opencollective",
+					"url": "https://opencollective.com/csstools"
+				}
+			],
+			"license": "MIT",
+			"engines": {
+				"node": ">=18"
+			}
+		},
 		"node_modules/@ctrl/tinycolor": {
 			"version": "4.2.0",
 			"license": "MIT",
@@ -352,6 +376,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",
@@ -389,6 +414,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",
@@ -1105,6 +1131,16 @@
 				"supercluster": "^8.0.1"
 			}
 		},
+		"node_modules/@mongodb-js/saslprep": {
+			"version": "1.4.11",
+			"resolved": "https://registry.npmjs.org/@mongodb-js/saslprep/-/saslprep-1.4.11.tgz",
+			"integrity": "sha512-o9rAHc0IpIjuPSxRutWpE1F62x7n+4mVS4rCNHkzhIUMQcc18bb6xEq5wd2NdN0WjepIyXIppRshYI2kQDOZVA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"sparse-bitfield": "^3.0.3"
+			}
+		},
 		"node_modules/@mui/core-downloads-tracker": {
 			"version": "7.3.7",
 			"license": "MIT",
@@ -1158,6 +1194,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",
@@ -1262,6 +1299,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",
@@ -2302,6 +2340,7 @@
 			"version": "24.5.2",
 			"devOptional": true,
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"undici-types": "~7.12.0"
 			}
@@ -2317,6 +2356,7 @@
 		"node_modules/@types/react": {
 			"version": "18.3.27",
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"@types/prop-types": "*",
 				"csstype": "^3.2.2"
@@ -2350,6 +2390,256 @@
 			"version": "0.0.6",
 			"license": "MIT"
 		},
+		"node_modules/@types/webidl-conversions": {
+			"version": "7.0.3",
+			"resolved": "https://registry.npmjs.org/@types/webidl-conversions/-/webidl-conversions-7.0.3.tgz",
+			"integrity": "sha512-CiJJvcRtIgzadHCYXw7dqEnMNRjhGZlYK05Mj9OyktqV8uVT8fD2BFOB7S1uwBE3Kj2Z+4UyPmFw/Ixgw/LAlA==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/@types/whatwg-url": {
+			"version": "13.0.0",
+			"resolved": "https://registry.npmjs.org/@types/whatwg-url/-/whatwg-url-13.0.0.tgz",
+			"integrity": "sha512-N8WXpbE6Wgri7KUSvrmQcqrMllKZ9uxkYWMt+mCSGwNc0Hsw9VQTW7ApqI4XNrx6/SaM2QQJCzMPDEXE058s+Q==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@types/webidl-conversions": "*"
+			}
+		},
+		"node_modules/@typescript-eslint/eslint-plugin": {
+			"version": "7.18.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.18.0.tgz",
+			"integrity": "sha512-94EQTWZ40mzBc42ATNIBimBEDltSJ9RQHCC8vc/PDbxi4k8dVwUAv4o98dk50M1zB+JGFxp43FP7f8+FP8R6Sw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@eslint-community/regexpp": "^4.10.0",
+				"@typescript-eslint/scope-manager": "7.18.0",
+				"@typescript-eslint/type-utils": "7.18.0",
+				"@typescript-eslint/utils": "7.18.0",
+				"@typescript-eslint/visitor-keys": "7.18.0",
+				"graphemer": "^1.4.0",
+				"ignore": "^5.3.1",
+				"natural-compare": "^1.4.0",
+				"ts-api-utils": "^1.3.0"
+			},
+			"engines": {
+				"node": "^18.18.0 || >=20.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/typescript-eslint"
+			},
+			"peerDependencies": {
+				"@typescript-eslint/parser": "^7.0.0",
+				"eslint": "^8.56.0"
+			},
+			"peerDependenciesMeta": {
+				"typescript": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@typescript-eslint/parser": {
+			"version": "7.18.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-7.18.0.tgz",
+			"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",
+				"@typescript-eslint/typescript-estree": "7.18.0",
+				"@typescript-eslint/visitor-keys": "7.18.0",
+				"debug": "^4.3.4"
+			},
+			"engines": {
+				"node": "^18.18.0 || >=20.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/typescript-eslint"
+			},
+			"peerDependencies": {
+				"eslint": "^8.56.0"
+			},
+			"peerDependenciesMeta": {
+				"typescript": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@typescript-eslint/scope-manager": {
+			"version": "7.18.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-7.18.0.tgz",
+			"integrity": "sha512-jjhdIE/FPF2B7Z1uzc6i3oWKbGcHb87Qw7AWj6jmEqNOfDFbJWtjt/XfwCpvNkpGWlcJaog5vTR+VV8+w9JflA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@typescript-eslint/types": "7.18.0",
+				"@typescript-eslint/visitor-keys": "7.18.0"
+			},
+			"engines": {
+				"node": "^18.18.0 || >=20.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/typescript-eslint"
+			}
+		},
+		"node_modules/@typescript-eslint/type-utils": {
+			"version": "7.18.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-7.18.0.tgz",
+			"integrity": "sha512-XL0FJXuCLaDuX2sYqZUUSOJ2sG5/i1AAze+axqmLnSkNEVMVYLF+cbwlB2w8D1tinFuSikHmFta+P+HOofrLeA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@typescript-eslint/typescript-estree": "7.18.0",
+				"@typescript-eslint/utils": "7.18.0",
+				"debug": "^4.3.4",
+				"ts-api-utils": "^1.3.0"
+			},
+			"engines": {
+				"node": "^18.18.0 || >=20.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/typescript-eslint"
+			},
+			"peerDependencies": {
+				"eslint": "^8.56.0"
+			},
+			"peerDependenciesMeta": {
+				"typescript": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@typescript-eslint/types": {
+			"version": "7.18.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-7.18.0.tgz",
+			"integrity": "sha512-iZqi+Ds1y4EDYUtlOOC+aUmxnE9xS/yCigkjA7XpTKV6nCBd3Hp/PRGGmdwnfkV2ThMyYldP1wRpm/id99spTQ==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": "^18.18.0 || >=20.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/typescript-eslint"
+			}
+		},
+		"node_modules/@typescript-eslint/typescript-estree": {
+			"version": "7.18.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-7.18.0.tgz",
+			"integrity": "sha512-aP1v/BSPnnyhMHts8cf1qQ6Q1IFwwRvAQGRvBFkWlo3/lH29OXA3Pts+c10nxRxIBrDnoMqzhgdwVe5f2D6OzA==",
+			"dev": true,
+			"license": "BSD-2-Clause",
+			"dependencies": {
+				"@typescript-eslint/types": "7.18.0",
+				"@typescript-eslint/visitor-keys": "7.18.0",
+				"debug": "^4.3.4",
+				"globby": "^11.1.0",
+				"is-glob": "^4.0.3",
+				"minimatch": "^9.0.4",
+				"semver": "^7.6.0",
+				"ts-api-utils": "^1.3.0"
+			},
+			"engines": {
+				"node": "^18.18.0 || >=20.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/typescript-eslint"
+			},
+			"peerDependenciesMeta": {
+				"typescript": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.1.0.tgz",
+			"integrity": "sha512-TN1kCZAgdgweJhWWpgKYrQaMNHcDULHkWwQIspdtjV4Y5aurRdZpjAqn6yX3FPqTA9ngHCc4hJxMAMgGfve85w==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"balanced-match": "^1.0.0"
+			}
+		},
+		"node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": {
+			"version": "9.0.9",
+			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.9.tgz",
+			"integrity": "sha512-OBwBN9AL4dqmETlpS2zasx+vTeWclWzkblfZk7KTA5j3jeOONz/tRCnZomUyvNg83wL5Zv9Ss6HMJXAgL8R2Yg==",
+			"dev": true,
+			"license": "ISC",
+			"dependencies": {
+				"brace-expansion": "^2.0.2"
+			},
+			"engines": {
+				"node": ">=16 || 14 >=14.17"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/isaacs"
+			}
+		},
+		"node_modules/@typescript-eslint/typescript-estree/node_modules/semver": {
+			"version": "7.7.4",
+			"resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
+			"integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
+			"dev": true,
+			"license": "ISC",
+			"bin": {
+				"semver": "bin/semver.js"
+			},
+			"engines": {
+				"node": ">=10"
+			}
+		},
+		"node_modules/@typescript-eslint/utils": {
+			"version": "7.18.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-7.18.0.tgz",
+			"integrity": "sha512-kK0/rNa2j74XuHVcoCZxdFBMF+aq/vH83CXAOHieC+2Gis4mF8jJXT5eAfyD3K0sAxtPuwxaIOIOvhwzVDt/kw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@eslint-community/eslint-utils": "^4.4.0",
+				"@typescript-eslint/scope-manager": "7.18.0",
+				"@typescript-eslint/types": "7.18.0",
+				"@typescript-eslint/typescript-estree": "7.18.0"
+			},
+			"engines": {
+				"node": "^18.18.0 || >=20.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/typescript-eslint"
+			},
+			"peerDependencies": {
+				"eslint": "^8.56.0"
+			}
+		},
+		"node_modules/@typescript-eslint/visitor-keys": {
+			"version": "7.18.0",
+			"resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-7.18.0.tgz",
+			"integrity": "sha512-cDF0/Gf81QpY3xYyJKDV14Zwdmid5+uuENhjH2EqFaF0ni+yAyq/LzMaIJdhNJXZI7uLzwIlA+V7oWoyn6Curg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@typescript-eslint/types": "7.18.0",
+				"eslint-visitor-keys": "^3.4.3"
+			},
+			"engines": {
+				"node": "^18.18.0 || >=20.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/typescript-eslint"
+			}
+		},
 		"node_modules/@ungap/structured-clone": {
 			"version": "1.3.0",
 			"dev": true,
@@ -2438,6 +2728,7 @@
 			"version": "8.15.0",
 			"dev": true,
 			"license": "MIT",
+			"peer": true,
 			"bin": {
 				"acorn": "bin/acorn"
 			},
@@ -2557,6 +2848,16 @@
 				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
+		"node_modules/array-union": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
+			"integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=8"
+			}
+		},
 		"node_modules/array.prototype.findlast": {
 			"version": "1.2.5",
 			"dev": true,
@@ -2681,14 +2982,14 @@
 			}
 		},
 		"node_modules/axios": {
-			"version": "1.13.5",
-			"resolved": "https://registry.npmjs.org/axios/-/axios-1.13.5.tgz",
-			"integrity": "sha512-cz4ur7Vb0xS4/KUN0tPWe44eqxrIu31me+fbang3ijiNscE129POzipJJA6zniq2C/Z6sJCjMimjS8Lc/GAs8Q==",
+			"version": "1.15.2",
+			"resolved": "https://registry.npmjs.org/axios/-/axios-1.15.2.tgz",
+			"integrity": "sha512-wLrXxPtcrPTsNlJmKjkPnNPK2Ihe0hn0wGSaTEiHRPxwjvJwT3hKmXF4dpqxmPO9SoNb2FsYXj/xEo0gHN+D5A==",
 			"license": "MIT",
 			"dependencies": {
 				"follow-redirects": "^1.15.11",
 				"form-data": "^4.0.5",
-				"proxy-from-env": "^1.1.0"
+				"proxy-from-env": "^2.1.0"
 			}
 		},
 		"node_modules/babel-plugin-macros": {
@@ -2762,6 +3063,7 @@
 				}
 			],
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"baseline-browser-mapping": "^2.9.0",
 				"caniuse-lite": "^1.0.30001759",
@@ -2776,6 +3078,16 @@
 				"node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
 			}
 		},
+		"node_modules/bson": {
+			"version": "7.2.0",
+			"resolved": "https://registry.npmjs.org/bson/-/bson-7.2.0.tgz",
+			"integrity": "sha512-YCEo7KjMlbNlyHhz7zAZNDpIpQbd+wOEHJYezv0nMYTn4x31eIUM2yomNNubclAt63dObUzKHWsBLJ9QcZNSnQ==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"engines": {
+				"node": ">=20.19.0"
+			}
+		},
 		"node_modules/bytewise": {
 			"version": "1.1.0",
 			"resolved": "https://registry.npmjs.org/bytewise/-/bytewise-1.1.0.tgz",
@@ -2995,9 +3307,9 @@
 			}
 		},
 		"node_modules/cosmiconfig/node_modules/yaml": {
-			"version": "1.10.2",
-			"resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
-			"integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+			"version": "1.10.3",
+			"resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.3.tgz",
+			"integrity": "sha512-vIYeF1u3CjlhAFekPPAk2h/Kv4T3mAkMox5OymRiJQB0spDP10LHvt+K7G9Ny6NuuMAb25/6n1qyUjAcGNf/AA==",
 			"license": "ISC",
 			"engines": {
 				"node": ">= 6"
@@ -3193,7 +3505,8 @@
 		},
 		"node_modules/dayjs": {
 			"version": "1.11.13",
-			"license": "MIT"
+			"license": "MIT",
+			"peer": true
 		},
 		"node_modules/debug": {
 			"version": "4.4.3",
@@ -3272,6 +3585,19 @@
 				"node": ">=6"
 			}
 		},
+		"node_modules/dir-glob": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
+			"integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"path-type": "^4.0.0"
+			},
+			"engines": {
+				"node": ">=8"
+			}
+		},
 		"node_modules/doctrine": {
 			"version": "3.0.0",
 			"dev": true,
@@ -3575,6 +3901,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",
@@ -3814,6 +4141,36 @@
 				"node": ">=6.0.0"
 			}
 		},
+		"node_modules/fast-glob": {
+			"version": "3.3.3",
+			"resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
+			"integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@nodelib/fs.stat": "^2.0.2",
+				"@nodelib/fs.walk": "^1.2.3",
+				"glob-parent": "^5.1.2",
+				"merge2": "^1.3.0",
+				"micromatch": "^4.0.8"
+			},
+			"engines": {
+				"node": ">=8.6.0"
+			}
+		},
+		"node_modules/fast-glob/node_modules/glob-parent": {
+			"version": "5.1.2",
+			"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+			"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+			"dev": true,
+			"license": "ISC",
+			"dependencies": {
+				"is-glob": "^4.0.1"
+			},
+			"engines": {
+				"node": ">= 6"
+			}
+		},
 		"node_modules/fast-json-stable-stringify": {
 			"version": "2.1.0",
 			"dev": true,
@@ -3904,12 +4261,16 @@
 			}
 		},
 		"node_modules/flatted": {
-			"version": "3.3.3",
+			"version": "3.4.2",
+			"resolved": "https://registry.npmjs.org/flatted/-/flatted-3.4.2.tgz",
+			"integrity": "sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA==",
 			"dev": true,
 			"license": "ISC"
 		},
 		"node_modules/follow-redirects": {
-			"version": "1.15.11",
+			"version": "1.16.0",
+			"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.16.0.tgz",
+			"integrity": "sha512-y5rN/uOsadFT/JfYwhxRS5R7Qce+g3zG97+JrtFZlC9klX/W5hD7iiLzScI4nZqUS7DNUdhPgw4xI8W2LuXlUw==",
 			"funding": [
 				{
 					"type": "individual",
@@ -4170,6 +4531,27 @@
 				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
+		"node_modules/globby": {
+			"version": "11.1.0",
+			"resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
+			"integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"array-union": "^2.1.0",
+				"dir-glob": "^3.0.1",
+				"fast-glob": "^3.2.9",
+				"ignore": "^5.2.0",
+				"merge2": "^1.4.1",
+				"slash": "^3.0.0"
+			},
+			"engines": {
+				"node": ">=10"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
 		"node_modules/gopd": {
 			"version": "1.2.0",
 			"license": "MIT",
@@ -4315,6 +4697,7 @@
 				}
 			],
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"@babel/runtime": "^7.27.6"
 			},
@@ -4910,6 +5293,16 @@
 				"node": ">=4.0"
 			}
 		},
+		"node_modules/kareem": {
+			"version": "3.3.0",
+			"resolved": "https://registry.npmjs.org/kareem/-/kareem-3.3.0.tgz",
+			"integrity": "sha512-kpSuLD3/7RenBnjnJdOHXCKC8dTd1JzeOiJhN0necWWci6cC+qX+VuwPnMVgb+a4+KNJSfgqahpnfWaeDXCimw==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"engines": {
+				"node": ">=18.0.0"
+			}
+		},
 		"node_modules/kdbush": {
 			"version": "4.0.2",
 			"resolved": "https://registry.npmjs.org/kdbush/-/kdbush-4.0.2.tgz",
@@ -5005,7 +5398,9 @@
 			}
 		},
 		"node_modules/lodash": {
-			"version": "4.17.23",
+			"version": "4.18.1",
+			"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.18.1.tgz",
+			"integrity": "sha512-dMInicTPVE8d1e5otfwmmjlxkZoUpiVLwyeTdUsi/Caj/gfzzblBcCE5sRHV/AsjuCmxWrte2TNGSYuCeCq+0Q==",
 			"license": "MIT"
 		},
 		"node_modules/lodash.merge": {
@@ -5098,6 +5493,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",
@@ -5137,6 +5533,23 @@
 				"node": ">= 0.4"
 			}
 		},
+		"node_modules/memory-pager": {
+			"version": "1.5.0",
+			"resolved": "https://registry.npmjs.org/memory-pager/-/memory-pager-1.5.0.tgz",
+			"integrity": "sha512-ZS4Bp4r/Zoeq6+NLJpP+0Zzm0pR8whtGPf1XExKLJBAczGMnSi3It14OiNCStjQjM6NU1okjQGSxgEZN8eBYKg==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/merge2": {
+			"version": "1.4.1",
+			"resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+			"integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">= 8"
+			}
+		},
 		"node_modules/micromatch": {
 			"version": "4.0.8",
 			"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
@@ -5152,9 +5565,9 @@
 			}
 		},
 		"node_modules/micromatch/node_modules/picomatch": {
-			"version": "2.3.1",
-			"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-			"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+			"version": "2.3.2",
+			"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz",
+			"integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==",
 			"dev": true,
 			"license": "MIT",
 			"engines": {
@@ -5216,6 +5629,109 @@
 				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
+		"node_modules/mongodb": {
+			"version": "7.2.0",
+			"resolved": "https://registry.npmjs.org/mongodb/-/mongodb-7.2.0.tgz",
+			"integrity": "sha512-F/2+BMZtLVhY30ioZp0dAmZ+IRZMBqI+nrv6t5+9/1AIwCa8sMRC3jBf81lpxMhnZgqq8CoUD503Z1oZWq1/sw==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"dependencies": {
+				"@mongodb-js/saslprep": "^1.3.0",
+				"bson": "^7.2.0",
+				"mongodb-connection-string-url": "^7.0.0"
+			},
+			"engines": {
+				"node": ">=20.19.0"
+			},
+			"peerDependencies": {
+				"@aws-sdk/credential-providers": "^3.806.0",
+				"@mongodb-js/zstd": "^7.0.0",
+				"gcp-metadata": "^7.0.1",
+				"kerberos": "^7.0.0",
+				"mongodb-client-encryption": ">=7.0.0 <7.1.0",
+				"snappy": "^7.3.2",
+				"socks": "^2.8.6"
+			},
+			"peerDependenciesMeta": {
+				"@aws-sdk/credential-providers": {
+					"optional": true
+				},
+				"@mongodb-js/zstd": {
+					"optional": true
+				},
+				"gcp-metadata": {
+					"optional": true
+				},
+				"kerberos": {
+					"optional": true
+				},
+				"mongodb-client-encryption": {
+					"optional": true
+				},
+				"snappy": {
+					"optional": true
+				},
+				"socks": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/mongodb-connection-string-url": {
+			"version": "7.0.1",
+			"resolved": "https://registry.npmjs.org/mongodb-connection-string-url/-/mongodb-connection-string-url-7.0.1.tgz",
+			"integrity": "sha512-h0AZ9A7IDVwwHyMxmdMXKy+9oNlF0zFoahHiX3vQ8e3KFcSP3VmsmfvtRSuLPxmyv2vjIDxqty8smTgie/SNRQ==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"dependencies": {
+				"@types/whatwg-url": "^13.0.0",
+				"whatwg-url": "^14.1.0"
+			},
+			"engines": {
+				"node": ">=20.19.0"
+			}
+		},
+		"node_modules/mongoose": {
+			"version": "9.6.2",
+			"resolved": "https://registry.npmjs.org/mongoose/-/mongoose-9.6.2.tgz",
+			"integrity": "sha512-7m8HntjkoRnwEmuPC0kdlwcZXJOQf4twumFj+PNzg/anqqZE2Er7hQslqyzy07mP3JcFjoTSgH5765PyqOXsxw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"kareem": "3.3.0",
+				"mongodb": "~7.2",
+				"mpath": "0.9.0",
+				"mquery": "6.0.0",
+				"ms": "2.1.3",
+				"sift": "17.1.3"
+			},
+			"engines": {
+				"node": ">=20.19.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/mongoose"
+			}
+		},
+		"node_modules/mpath": {
+			"version": "0.9.0",
+			"resolved": "https://registry.npmjs.org/mpath/-/mpath-0.9.0.tgz",
+			"integrity": "sha512-ikJRQTk8hw5DEoFVxHG1Gn9T/xcjtdnOKIU1JTmGjZZlg9LST2mBLmcX3/ICIbgJydT2GOc15RnNy5mHmzfSew==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=4.0.0"
+			}
+		},
+		"node_modules/mquery": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/mquery/-/mquery-6.0.0.tgz",
+			"integrity": "sha512-b2KQNsmgtkscfeDgkYMcWGn9vZI9YoXh802VDEwE6qc50zxBFQ0Oo8ROkawbPAsXCY1/Z1yp0MagqsZStPWJjw==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=20.19.0"
+			}
+		},
 		"node_modules/ms": {
 			"version": "2.1.3",
 			"license": "MIT"
@@ -5563,7 +6079,9 @@
 			"license": "ISC"
 		},
 		"node_modules/picomatch": {
-			"version": "4.0.3",
+			"version": "4.0.4",
+			"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
+			"integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
 			"license": "MIT",
 			"engines": {
 				"node": ">=12"
@@ -5594,7 +6112,9 @@
 			}
 		},
 		"node_modules/postcss": {
-			"version": "8.5.6",
+			"version": "8.5.12",
+			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.12.tgz",
+			"integrity": "sha512-W62t/Se6rA0Az3DfCL0AqJwXuKwBeYg6nOaIgzP+xZ7N5BFCI7DYi1qs6ygUYT6rvfi6t9k65UMLJC+PHZpDAA==",
 			"funding": [
 				{
 					"type": "opencollective",
@@ -5686,14 +6206,19 @@
 			"license": "MIT"
 		},
 		"node_modules/protocol-buffers-schema": {
-			"version": "3.6.0",
-			"resolved": "https://registry.npmjs.org/protocol-buffers-schema/-/protocol-buffers-schema-3.6.0.tgz",
-			"integrity": "sha512-TdDRD+/QNdrCGCE7v8340QyuXd4kIWIgapsE2+n/SaGiSSbomYl4TjHlvIoCWRpE7wFt02EpB35VVA2ImcBVqw==",
+			"version": "3.6.1",
+			"resolved": "https://registry.npmjs.org/protocol-buffers-schema/-/protocol-buffers-schema-3.6.1.tgz",
+			"integrity": "sha512-VG2K63Igkiv9p76tk1lilczEK1cT+kCjKtkdhw1dQZV3k3IXJbd3o6Ho8b9zJZaHSnT2hKe4I+ObmX9w6m5SmQ==",
 			"license": "MIT"
 		},
 		"node_modules/proxy-from-env": {
-			"version": "1.1.0",
-			"license": "MIT"
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-2.1.0.tgz",
+			"integrity": "sha512-cJ+oHTW1VAEa8cJslgmUZrc+sjRKgAKl3Zyse6+PV38hZe/V6Z14TbCuXcan9F9ghlz4QrFr2c92TNF82UkYHA==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=10"
+			}
 		},
 		"node_modules/punycode": {
 			"version": "2.3.1",
@@ -5745,6 +6270,7 @@
 		"node_modules/react-dom": {
 			"version": "18.3.1",
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"loose-envify": "^1.1.0",
 				"scheduler": "^0.23.2"
@@ -5756,6 +6282,7 @@
 		"node_modules/react-hook-form": {
 			"version": "7.71.1",
 			"license": "MIT",
+			"peer": true,
 			"engines": {
 				"node": ">=18.0.0"
 			},
@@ -5955,7 +6482,8 @@
 		},
 		"node_modules/redux": {
 			"version": "5.0.1",
-			"license": "MIT"
+			"license": "MIT",
+			"peer": true
 		},
 		"node_modules/redux-persist": {
 			"version": "6.0.0",
@@ -6105,6 +6633,7 @@
 			"resolved": "https://registry.npmjs.org/rollup/-/rollup-4.59.0.tgz",
 			"integrity": "sha512-2oMpl67a3zCH9H79LeMcbDhXW/UmWG/y2zuqnF2jQq5uq9TbM9TVyXvA4+t+ne2IIkBdrLpAaRQAvo7YI/Yyeg==",
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"@types/estree": "1.0.8"
 			},
@@ -6380,6 +6909,13 @@
 				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
+		"node_modules/sift": {
+			"version": "17.1.3",
+			"resolved": "https://registry.npmjs.org/sift/-/sift-17.1.3.tgz",
+			"integrity": "sha512-Rtlj66/b0ICeFzYTuNvX/EF1igRbbnGSvEyT79McoZa/DeGhMyC5pWKOEsZKnpkqtSeovd5FL/bjHWC3CIIvCQ==",
+			"dev": true,
+			"license": "MIT"
+		},
 		"node_modules/signal-exit": {
 			"version": "4.1.0",
 			"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
@@ -6393,6 +6929,16 @@
 				"url": "https://github.com/sponsors/isaacs"
 			}
 		},
+		"node_modules/slash": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+			"integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=8"
+			}
+		},
 		"node_modules/slice-ansi": {
 			"version": "7.1.2",
 			"resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-7.1.2.tgz",
@@ -6480,6 +7026,16 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/sparse-bitfield": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/sparse-bitfield/-/sparse-bitfield-3.0.3.tgz",
+			"integrity": "sha512-kvzhi7vqKTfkh0PZU+2D2PIllw2ymqJKujUcyPMd9Y75Nv4nPbGJZXNhxsgdQab2BmlDct1YnfQCguEvHr7VsQ==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"memory-pager": "^1.0.2"
+			}
+		},
 		"node_modules/split-string": {
 			"version": "3.1.0",
 			"resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz",
@@ -6793,6 +7349,32 @@
 				"node": ">=8.0"
 			}
 		},
+		"node_modules/tr46": {
+			"version": "5.1.1",
+			"resolved": "https://registry.npmjs.org/tr46/-/tr46-5.1.1.tgz",
+			"integrity": "sha512-hdF5ZgjTqgAntKkklYw0R03MG2x/bSzTtkxmIRw/sTNV8YXsCJ1tfLAX23lhxhHJlEf3CRCOCGGWw3vI3GaSPw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"punycode": "^2.3.1"
+			},
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/ts-api-utils": {
+			"version": "1.4.3",
+			"resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.4.3.tgz",
+			"integrity": "sha512-i3eMG77UTMD0hZhgRS562pv83RC6ukSAC2GMNWc+9dieh/+jDM5u5YG+NHX6VNDRHQcHwmsTHctP9LhbC3WxVw==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=16"
+			},
+			"peerDependencies": {
+				"typescript": ">=4.2.0"
+			}
+		},
 		"node_modules/tslib": {
 			"version": "2.8.1",
 			"license": "0BSD"
@@ -6893,6 +7475,7 @@
 			"version": "5.9.3",
 			"devOptional": true,
 			"license": "Apache-2.0",
+			"peer": true,
 			"bin": {
 				"tsc": "bin/tsc",
 				"tsserver": "bin/tsserver"
@@ -7024,10 +7607,11 @@
 			}
 		},
 		"node_modules/vite": {
-			"version": "6.4.1",
-			"resolved": "https://registry.npmjs.org/vite/-/vite-6.4.1.tgz",
-			"integrity": "sha512-+Oxm7q9hDoLMyJOYfUYBuHQo+dkAloi33apOPP56pzj+vsdJDzr+j1NISE5pyaAuKL4A3UD34qd0lx5+kfKp2g==",
+			"version": "6.4.2",
+			"resolved": "https://registry.npmjs.org/vite/-/vite-6.4.2.tgz",
+			"integrity": "sha512-2N/55r4JDJ4gdrCvGgINMy+HH3iRpNIz8K6SFwVsA+JbQScLiC+clmAxBgwiSPgcG9U15QmvqCGWzMbqda5zGQ==",
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"esbuild": "^0.25.0",
 				"fdir": "^6.4.4",
@@ -7116,6 +7700,30 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/webidl-conversions": {
+			"version": "7.0.0",
+			"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
+			"integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==",
+			"dev": true,
+			"license": "BSD-2-Clause",
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/whatwg-url": {
+			"version": "14.2.0",
+			"resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-14.2.0.tgz",
+			"integrity": "sha512-De72GdQZzNTUBBChsXueQUnPKDkg/5A5zp7pFDuQAj5UFoENpiACU0wlCvzpAGnTkj++ihpKwKyYewn/XNUbKw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"tr46": "^5.1.0",
+				"webidl-conversions": "^7.0.0"
+			},
+			"engines": {
+				"node": ">=18"
+			}
+		},
 		"node_modules/which": {
 			"version": "2.0.2",
 			"dev": true,
@@ -7307,9 +7915,9 @@
 			"license": "ISC"
 		},
 		"node_modules/yaml": {
-			"version": "2.8.2",
-			"resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.2.tgz",
-			"integrity": "sha512-mplynKqc1C2hTVYxd0PU2xQAc22TI1vShAYGksCCfxbn/dFwnHTNi1bvYsBTkhdUNtGIf5xNOg938rrSSYvS9A==",
+			"version": "2.8.3",
+			"resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.3.tgz",
+			"integrity": "sha512-AvbaCLOO2Otw/lW5bmh9d/WEdcDFdQp2Z2ZUH3pX9U2ihyUY0nvLv7J6TrWowklRGPYbB/IuIMfYgxaCPg5Bpg==",
 			"devOptional": true,
 			"license": "ISC",
 			"bin": {

client/package.json

@@ -1,21 +1,23 @@
 {
 	"name": "client",
 	"private": true,
-	"version": "3.6.1",
+	"version": "3.9.1",
 	"type": "module",
 	"scripts": {
 		"dev": "vite",
 		"build": "tsc -b && vite build",
 		"build-dev": "tsc -b && vite build --mode development",
-		"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+		"lint": "eslint . --ext js,jsx,ts,tsx --report-unused-disable-directives",
+		"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 ."
 	},
 	"lint-staged": {
-		"**/*": "prettier --write"
+		"**/*": "prettier --write --ignore-unknown"
 	},
 	"dependencies": {
+		"@csstools/css-tokenizer": "^3.0.4",
 		"@emotion/react": "^11.13.3",
 		"@emotion/styled": "^11.13.0",
 		"@hello-pangea/dnd": "^18.0.0",
@@ -26,7 +28,7 @@
 		"@mui/x-date-pickers": "7.29.4",
 		"@reduxjs/toolkit": "2.7.0",
 		"@types/maplibre-gl": "^1.13.2",
-		"axios": "^1.7.4",
+		"axios": "^1.15.2",
 		"dayjs": "1.11.13",
 		"html2canvas": "^1.4.1",
 		"human-interval": "2.0.1",
@@ -57,14 +59,17 @@
 		"@types/node": "24.5.2",
 		"@types/react": "^18.2.66",
 		"@types/react-dom": "^18.2.22",
+		"@typescript-eslint/eslint-plugin": "^7.18.0",
+		"@typescript-eslint/parser": "^7.18.0",
 		"@vitejs/plugin-react": "^4.2.1",
 		"eslint": "^8.57.0",
 		"eslint-plugin-react": "^7.34.1",
 		"eslint-plugin-react-hooks": "^5.0.0",
 		"eslint-plugin-react-refresh": "^0.4.6",
 		"lint-staged": "^16.2.7",
+		"mongoose": "9.6.2",
 		"prettier": "^3.3.3",
 		"typescript": "5.9.3",
-		"vite": "6.4.1"
+		"vite": "^6.4.2"
 	}
 }

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

@@ -5,7 +5,7 @@ import { getResponseColor } from "@/Utils/DataUtils";
 import { HeatmapResponseTimeTooltip } from "@/Components/common/charts/HeatmapResponseTimeTooltip";
 import type { SxProps } from "@mui/material/styles";
 import type { ResponsiveStyleValue } from "@mui/system";
-
+import { MAX_RECENT_CHECKS } from "@/Types/Monitor";
 interface PlaceholderCheck {
 	status: "placeholder";
 	responseTime: 0;
@@ -32,11 +32,11 @@ export const HeatmapResponseTime = ({
 
 	if (!checks || checks.length === 0) return null;
 
-	const latestChecks = checks.slice(-25);
+	const latestChecks = checks.slice(-MAX_RECENT_CHECKS);
 
 	let data: Array<CheckSnapshot | PlaceholderCheck>;
-	if (latestChecks.length !== 25) {
-		const placeholders = Array(25 - latestChecks.length).fill({
+	if (latestChecks.length !== MAX_RECENT_CHECKS) {
+		const placeholders = Array(MAX_RECENT_CHECKS - latestChecks.length).fill({
 			status: "placeholder" as const,
 		});
 		data = [...latestChecks, ...placeholders];
@@ -44,13 +44,13 @@ export const HeatmapResponseTime = ({
 		data = latestChecks;
 	}
 	return (
-		<Box sx={{ width: "100%" }}>
+		<Box width={"100%"}>
 			<Box
+				width={"100%"}
+				display={"grid"}
+				gap={gap}
 				sx={{
-					width: "100%",
-					display: "grid",
-					gridTemplateColumns: "repeat(25, 1fr)",
-					gap: gap,
+					gridTemplateColumns: `repeat(${MAX_RECENT_CHECKS}, 1fr)`,
 					alignItems: "stretch",
 				}}
 			>
@@ -82,50 +82,50 @@ export const HeatmapResponseTime = ({
 							check={check}
 						>
 							<Box
+								display={"grid"}
 								sx={{
-									display: "grid",
 									gridTemplateRows: "auto auto",
 								}}
 							>
 								<Box
+									display={"flex"}
+									gap={theme.spacing(2)}
 									sx={{
-										display: "flex",
 										flexDirection: "column",
-										gap: theme.spacing(2),
 									}}
 								>
 									<Box
+										width={"100%"}
 										sx={{
 											position: "relative",
-											width: "100%",
 											aspectRatio: "10",
 										}}
 									>
 										<Box
+											bgcolor={statusBg}
+											borderRadius={theme.shape.borderRadius}
 											sx={{
 												position: "absolute",
 												inset: 0,
-												bgcolor: statusBg,
-												borderRadius: theme.spacing(0.5),
 												...availabilityCellSx,
 											}}
 										/>
 										<Box
+											borderRadius={theme.shape.borderRadius}
 											sx={{
 												position: "absolute",
 												inset: 0,
 												pointerEvents: "none",
-												borderRadius: theme.spacing(0.5),
 												boxShadow: `inset 0 0 0 2px ${statusBorder}`,
 											}}
 										/>
 									</Box>
 									<Box
+										width={"100%"}
+										bgcolor={respBg}
+										borderRadius={theme.shape.borderRadius}
 										sx={{
-											width: "100%",
 											aspectRatio: "1 / 1",
-											bgcolor: respBg,
-											borderRadius: theme.spacing(0.5),
 											...responseCellSx,
 										}}
 									/>

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

@@ -7,6 +7,7 @@ import type { CheckSnapshot } from "@/Types/Check";
 import { HeatmapResponseTimeTooltip } from "./HeatmapResponseTimeTooltip";
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
+import { MAX_RECENT_CHECKS } from "@/Types/Monitor";
 
 interface HistogramResponseTimeProps {
 	checks: CheckSnapshot[];
@@ -34,7 +35,7 @@ const calculateResponseTimeStats = (checks: CheckSnapshot[]): ResponseTimeStats
 	}
 
 	const responseTimes = validChecks.map((check) => check.originalResponseTime);
-	const max = Math.max(...responseTimes);
+	const max = Math.round(Math.max(...responseTimes));
 	const avg = Math.round(
 		responseTimes.reduce((sum, time) => sum + time, 0) / responseTimes.length
 	);
@@ -57,8 +58,11 @@ export const HistogramResponseTime = ({
 	if (!Array.isArray(checks) || checks.length === 0) return null;
 
 	const data =
-		checks.length !== 25
-			? [...checks, ...Array(25 - checks.length).fill({ status: "placeholder" })]
+		checks.length !== MAX_RECENT_CHECKS
+			? [
+					...checks,
+					...Array(MAX_RECENT_CHECKS - checks.length).fill({ status: "placeholder" }),
+				]
 			: checks;
 
 	const chartHeight = typeof height === "number" ? `${height}px` : height;
@@ -69,14 +73,20 @@ export const HistogramResponseTime = ({
 			<Stack
 				justifyContent="center"
 				alignItems={statsPosition === "left" ? "flex-end" : "flex-start"}
-				minWidth={70}
+				width={110}
 				pr={statsPosition === "left" ? theme.spacing(8) : 0}
 				pl={statsPosition === "right" ? theme.spacing(8) : 0}
 			>
-				<Typography variant="body2">
+				<Typography
+					variant="body2"
+					noWrap
+				>
 					{t("common.charts.histogram.avg", { value: stats.avg })}
 				</Typography>
-				<Typography variant="body2">
+				<Typography
+					variant="body2"
+					noWrap
+				>
 					{t("common.charts.histogram.max", { value: stats.max })}
 				</Typography>
 			</Stack>
@@ -86,17 +96,17 @@ export const HistogramResponseTime = ({
 		<Stack
 			direction={statsPosition === "left" ? "row-reverse" : "row"}
 			alignItems="center"
-			sx={{ width: "100%" }}
+			width={"100%"}
 		>
 			<Box sx={{ flex: 1 }}>
 				<Box
+					width={"100%"}
+					display={"grid"}
+					gap={gridGap}
+					height={chartHeight}
 					sx={{
-						width: "100%",
-						display: "grid",
-						gridTemplateColumns: "repeat(25, 1fr)",
-						gap: gridGap,
+						gridTemplateColumns: `repeat(${MAX_RECENT_CHECKS}, 1fr)`,
 						alignItems: "end",
-						height: chartHeight,
 					}}
 				>
 					{data.map((check, index) => {
@@ -108,23 +118,23 @@ export const HistogramResponseTime = ({
 								: theme.palette.error.light;
 						const bar = (
 							<Box
+								width={"100%"}
+								height={"100%"}
+								borderRadius={theme.shape.borderRadius}
+								bgcolor={theme.palette.action.hover}
 								sx={{
 									position: "relative",
-									width: "100%",
-									height: "100%",
-									borderRadius: theme.spacing(1),
-									bgcolor: theme.palette.action.hover,
 									overflow: "hidden",
 								}}
 							>
 								<Box
+									width={"100%"}
+									height={isPlaceholder ? 0 : heightPct}
+									bgcolor={barColor}
 									sx={{
 										position: "absolute",
 										bottom: 0,
 										left: 0,
-										width: "100%",
-										height: isPlaceholder ? 0 : heightPct,
-										bgcolor: barColor,
 										transition: "height 500ms cubic-bezier(0.4, 0, 0.2, 1)",
 									}}
 								/>
@@ -133,8 +143,8 @@ export const HistogramResponseTime = ({
 
 						return isPlaceholder ? (
 							<Box
+								height={"100%"}
 								key={index}
-								sx={{ height: "100%" }}
 							>
 								{bar}
 							</Box>

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

@@ -9,13 +9,14 @@ import {
 	EmptyMonitorFallback,
 } from "@/Components/design-elements/Fallback";
 import { EmptyState } from "@/Components/design-elements/EmptyState";
+import { NoticeBanner } from "@/Components/design-elements/NoticeBanner";
 import { Breadcrumb } from "@/Components/design-elements/Breadcrumb";
 import { PageHeader } from "@/Components/design-elements/PageHeader";
 import CircularProgress from "@mui/material/CircularProgress";
 import { LanguageSelector, SwitchTheme } from "@/Components/inputs";
 
 import type { StackProps } from "@mui/material/Stack";
-import { useTheme, alpha } from "@mui/material/styles";
+import { useTheme } from "@mui/material/styles";
 import { Trans, useTranslation } from "react-i18next";
 import { Link as RouterLink } from "react-router-dom";
 import { Typography } from "@mui/material";
@@ -23,60 +24,30 @@ import { Typography } from "@mui/material";
 export const PageSpeedKeyPriorityFallback = () => {
 	const theme = useTheme();
 	const { t } = useTranslation();
-	const alertBg = alpha(theme.palette.warning.main, 0.08);
-	const alertBorder = alpha(theme.palette.warning.main, 0.45);
-	const alertIcon = theme.palette.warning.main;
 	return (
 		<EmptyState
 			fullscreen
 			title={t("pages.pageSpeed.fallback.title")}
 			description={t("pages.pageSpeed.fallback.description")}
 			alert={
-				<Stack
-					direction="row"
-					alignItems="flex-start"
-					gap={theme.spacing(LAYOUT.SM)}
-					sx={{
-						width: "100%",
-						p: theme.spacing(LAYOUT.MD),
-						borderRadius: 1,
-						border: `1px solid ${alertBorder}`,
-						backgroundColor: alertBg,
-						textAlign: "left",
-					}}
-				>
-					<Box
-						component="span"
-						sx={{
-							color: alertIcon,
-							fontSize: 18,
-							lineHeight: 1,
-							mt: "2px",
+				<NoticeBanner severity="warning">
+					<Trans
+						i18nKey="common.alerts.pageSpeedApiKey.content"
+						components={{
+							settingsLink: (
+								<Link
+									component={RouterLink}
+									to="/settings"
+									color={theme.palette.primary.main}
+									fontWeight={600}
+									sx={{
+										textDecoration: "underline",
+									}}
+								/>
+							),
 						}}
-					>
-						⚠
-					</Box>
-					<Typography
-						sx={{ color: theme.palette.text.primary, lineHeight: 1.55, fontSize: 13 }}
-					>
-						<Trans
-							i18nKey="common.alerts.pageSpeedApiKey.content"
-							components={{
-								settingsLink: (
-									<Link
-										component={RouterLink}
-										to="/settings"
-										sx={{
-											color: theme.palette.primary.main,
-											fontWeight: 600,
-											textDecoration: "underline",
-										}}
-									/>
-								),
-							}}
-						/>
-					</Typography>
-				</Stack>
+					/>
+				</NoticeBanner>
 			}
 		/>
 	);

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

@@ -1,30 +1,36 @@
 import { BaseChart } from "@/Components/design-elements";
 import Stack from "@mui/material/Stack";
-import Box from "@mui/material/Box";
+import Box, { type BoxProps } from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
 
 import { useTheme } from "@mui/material/styles";
-import { useMemo, useState, useEffect } from "react";
+import { forwardRef, useMemo, useState, useEffect } from "react";
 import { getInfraGaugeColor } from "@/Utils/MonitorUtils";
 
 const MINIMUM_VALUE = 0;
 const MAXIMUM_VALUE = 100;
 
-export const Gauge = ({
-	isLoading = false,
-	progress = 0,
-	radius = 70,
-	strokeWidth = 15,
-	precision = 1,
-	unit = "%",
-}: {
+interface GaugeProps extends Omit<BoxProps, "color"> {
 	isLoading?: boolean;
 	progress?: number;
 	radius?: number;
 	strokeWidth?: number;
 	precision?: number;
 	unit?: string;
-}) => {
+}
+
+export const Gauge = forwardRef<HTMLDivElement, GaugeProps>(function Gauge(
+	{
+		isLoading = false,
+		progress = 0,
+		radius = 70,
+		strokeWidth = 15,
+		precision = 1,
+		unit = "%",
+		...rest
+	},
+	ref
+) {
 	const theme = useTheme();
 	const progressWithinRange = Math.max(MINIMUM_VALUE, Math.min(progress, MAXIMUM_VALUE));
 
@@ -51,17 +57,19 @@ export const Gauge = ({
 	const fillColor = getInfraGaugeColor(progressWithinRange, theme);
 
 	if (isLoading) {
-		return;
+		return null;
 	}
 
 	return (
 		<Box
+			ref={ref}
 			display={"inline-block"}
 			position={"relative"}
 			width={radius}
 			height={radius}
 			bgcolor={theme.palette.background.paper}
 			borderRadius={"50%"}
+			{...rest}
 		>
 			<svg
 				viewBox={`0 0 ${totalSize} ${totalSize}`}
@@ -105,7 +113,7 @@ export const Gauge = ({
 			</Typography>
 		</Box>
 	);
-};
+});
 
 export const DetailGauge = ({
 	title,

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

@@ -1,12 +1,13 @@
 import type { Monitor } from "@/Types/Monitor";
 import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
-import { PulseDot, Dot } from "@/Components/design-elements";
+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";
 export const MonitorStatus = ({ monitor }: { monitor: Monitor }) => {
 	const theme = useTheme();
 	const isSmall = useMediaQuery(theme.breakpoints.down("md"));
@@ -17,7 +18,7 @@ export const MonitorStatus = ({ monitor }: { monitor: Monitor }) => {
 	return (
 		<Stack>
 			<Typography
-				fontSize={typographyLevels.xl}
+				fontSize={typographyLevels.xxl}
 				fontWeight={500}
 				overflow={"hidden"}
 				textOverflow={"ellipsis"}
@@ -28,7 +29,7 @@ export const MonitorStatus = ({ monitor }: { monitor: Monitor }) => {
 			<Stack
 				direction="row"
 				alignItems={"center"}
-				gap={theme.spacing(4)}
+				gap={theme.spacing(LAYOUT.XS)}
 			>
 				<PulseDot color={getStatusColor(monitor.status, theme)} />
 				<Typography
@@ -41,6 +42,12 @@ export const MonitorStatus = ({ monitor }: { monitor: Monitor }) => {
 				>
 					{formatUrl(monitor?.url)}
 				</Typography>
+				{monitor.type === "pagespeed" && monitor.strategy && (
+					<>
+						<Dot />
+						<StrategyBadge strategy={monitor.strategy} />
+					</>
+				)}
 				{!isSmall && (
 					<>
 						<Dot />

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

@@ -0,0 +1,55 @@
+import Stack from "@mui/material/Stack";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import { useTheme, alpha } from "@mui/material/styles";
+import { LAYOUT } from "@/Utils/Theme/constants";
+import { typographyLevels } from "@/Utils/Theme/Palette";
+
+export const Severities = ["info", "warning", "error"] as const;
+export type Severity = (typeof Severities)[number];
+
+const SEVERITY_GLYPH: Record<Severity, string> = {
+	info: "ⓘ",
+	warning: "⚠",
+	error: "✕",
+};
+
+interface NoticeBannerProps {
+	severity?: Severity;
+	children: React.ReactNode;
+}
+
+export const NoticeBanner = ({ severity = "info", children }: NoticeBannerProps) => {
+	const theme = useTheme();
+	const tone = theme.palette[severity].main;
+	return (
+		<Stack
+			direction="row"
+			alignItems="flex-start"
+			gap={theme.spacing(LAYOUT.SM)}
+			width={"100%"}
+			p={theme.spacing(LAYOUT.MD)}
+			borderRadius={theme.shape.borderRadius}
+			border={`1px solid ${alpha(tone, 0.45)}`}
+			bgcolor={alpha(tone, 0.08)}
+			textAlign={"left"}
+		>
+			<Box
+				component="span"
+				color={tone}
+				fontSize={typographyLevels.xl}
+				lineHeight={1}
+				mt={LAYOUT.XXS}
+				aria-hidden
+			>
+				{SEVERITY_GLYPH[severity]}
+			</Box>
+			<Typography
+				color={theme.palette.text.primary}
+				lineHeight={1.55}
+			>
+				{children}
+			</Typography>
+		</Stack>
+	);
+};

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

@@ -53,7 +53,7 @@ export const ConfigBox = ({
 	rightContent,
 }: {
 	title: string;
-	subtitle: string;
+	subtitle: React.ReactNode;
 	leftContent?: React.ReactNode;
 	rightContent: React.ReactNode;
 }) => {

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

@@ -0,0 +1,40 @@
+import { useTranslation } from "react-i18next";
+import {
+	formatStatusCode,
+	getStatusCodeTooltip,
+	getStatusCodeValueType,
+} from "@/Utils/statusCode";
+import { ValueLabel } from "./StatusLabel";
+import { Tooltip } from "./Tooltip";
+
+export type StatusCodeLabelProps = {
+	statusCode: number | null | undefined;
+	message?: string | null;
+	fallback?: string;
+};
+
+export const StatusCodeLabel = ({
+	statusCode,
+	message,
+	fallback = "N/A",
+}: StatusCodeLabelProps) => {
+	const { t } = useTranslation();
+	if (!statusCode) {
+		return <>{fallback}</>;
+	}
+
+	const text = formatStatusCode(statusCode, t);
+	const tooltip = getStatusCodeTooltip(statusCode, message, t);
+	const body = (
+		<ValueLabel
+			value={getStatusCodeValueType(statusCode)}
+			text={text}
+		/>
+	);
+	if (!tooltip) return body;
+	return (
+		<Tooltip title={tooltip}>
+			<span>{body}</span>
+		</Tooltip>
+	);
+};

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

@@ -93,3 +93,20 @@ export const ValueLabel = ({ value, text }: { value: ValueType; text: string })
 		</BaseBox>
 	);
 };
+
+export const ColoredLabel = ({ text, color }: { text: string; color: string }) => {
+	const theme = useTheme();
+
+	return (
+		<BaseBox
+			sx={{
+				width: "fit-content",
+				padding: theme.spacing(1, 3),
+				color: color,
+				borderColor: color,
+			}}
+		>
+			<Typography>{text}</Typography>
+		</BaseBox>
+	);
+};

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

@@ -0,0 +1,42 @@
+import Stack from "@mui/material/Stack";
+import Box from "@mui/material/Box";
+import { useTheme, alpha } from "@mui/material/styles";
+import { LAYOUT } from "@/Utils/Theme/constants";
+
+interface StepProgressProps {
+	steps: number;
+	current: number;
+}
+
+export const StepProgress = ({ steps, current }: StepProgressProps) => {
+	const theme = useTheme();
+	const activeBg = `linear-gradient(135deg, ${theme.palette.primary.light} 0%, ${theme.palette.primary.main} 100%)`;
+	const completedBg = `linear-gradient(135deg, ${alpha(theme.palette.primary.light, 0.5)} 0%, ${alpha(theme.palette.primary.main, 0.5)} 100%)`;
+
+	const getSegmentBackground = (index: number) => {
+		if (index < current) return completedBg;
+		if (index === current) return activeBg;
+		return theme.palette.divider;
+	};
+
+	return (
+		<Stack
+			direction="row"
+			gap={theme.spacing(LAYOUT.XS)}
+			width="100%"
+		>
+			{Array.from({ length: steps }).map((_, index) => (
+				<Box
+					key={index}
+					flex={1}
+					height={theme.spacing(LAYOUT.XXS)}
+					borderRadius={theme.shape.borderRadius}
+					sx={{
+						background: getSegmentBackground(index),
+						transition: "background 0.2s ease",
+					}}
+				/>
+			))}
+		</Stack>
+	);
+};

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

@@ -0,0 +1,32 @@
+import Typography from "@mui/material/Typography";
+import { useTheme } from "@mui/material/styles";
+import { useTranslation } from "react-i18next";
+import type { PageSpeedStrategy } from "@/Types/Monitor";
+import { SPACING } from "@/Utils/Theme/constants";
+
+interface StrategyBadgeProps {
+	strategy: PageSpeedStrategy | undefined;
+	variant?: "caption" | "body2";
+}
+
+export const StrategyBadge = ({ strategy, variant = "body2" }: StrategyBadgeProps) => {
+	const theme = useTheme();
+	const { t } = useTranslation();
+
+	if (!strategy) {
+		return null;
+	}
+
+	return (
+		<Typography
+			variant={variant}
+			px={SPACING.XXL}
+			py={SPACING.SM}
+			borderRadius={theme.shape.borderRadius}
+			bgcolor={theme.palette.secondary.light}
+			color={theme.palette.text.primary}
+		>
+			{t(`pages.pageSpeed.strategy.${strategy}`)}
+		</Typography>
+	);
+};

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

@@ -35,6 +35,9 @@ import useMediaQuery from "@mui/material/useMediaQuery";
 export type Header<T> = {
 	id: number | string;
 	content: React.ReactNode;
+	mobileLabel?: React.ReactNode;
+	hideMobileLabel?: boolean;
+	align?: "left" | "center" | "right" | "justify" | "inherit";
 	onClick?: (event: React.MouseEvent<HTMLTableCellElement | null>, row: T) => void;
 	render: (row: T) => React.ReactNode;
 };
@@ -109,6 +112,24 @@ export function DataTable<
 							key={key}
 						>
 							{headers.map((header) => {
+								if (header.hideMobileLabel) {
+									return (
+										<Grid2
+											container
+											key={header.id}
+										>
+											<Grid2
+												size={12}
+												display="flex"
+												alignItems="center"
+												justifyContent="flex-end"
+											>
+												{header.render(row)}
+											</Grid2>
+										</Grid2>
+									);
+								}
+
 								return (
 									<Grid2
 										container
@@ -123,7 +144,7 @@ export function DataTable<
 												component="div"
 												color={theme.palette.text.primary}
 											>
-												{header.content}
+												{header.mobileLabel ?? header.content}
 											</Typography>
 										</Grid2>
 										<Grid2
@@ -193,7 +214,7 @@ export function DataTable<
 						{headers.map((header, idx) => {
 							return (
 								<TableCell
-									align={idx === 0 ? "left" : "center"}
+									align={header.align ?? (idx === 0 ? "left" : "center")}
 									key={header.id}
 								>
 									{header.content}
@@ -222,7 +243,7 @@ export function DataTable<
 									{headers.map((header, index) => {
 										return (
 											<TableCell
-												align={index === 0 ? "left" : "center"}
+												align={header.align ?? (index === 0 ? "left" : "center")}
 												key={header.id}
 												onClick={
 													header.onClick ? (e) => header.onClick!(e, row) : undefined

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

@@ -6,7 +6,11 @@ import type { TooltipProps } from "@mui/material/Tooltip";
 
 type StyledTooltipProps = TooltipProps;
 
-export const Tooltip = ({ placement = "top", ...props }: StyledTooltipProps) => {
+export const Tooltip = ({
+	placement = "top",
+	slotProps,
+	...props
+}: StyledTooltipProps) => {
 	const theme = useTheme();
 
 	return (
@@ -27,6 +31,7 @@ export const Tooltip = ({ placement = "top", ...props }: StyledTooltipProps) =>
 						boxShadow: theme.shadows[6],
 					},
 				},
+				...slotProps,
 			}}
 		>
 			{props.children}

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

@@ -22,5 +22,9 @@ export * from "./Gauge";
 export * from "./Tabs";
 export * from "./SplitBox";
 export * from "./TextLink";
+export * from "./NoticeBanner";
 export * from "./OfflineBanner";
 export * from "./Avatar";
+export * from "./StatusCodeLabel";
+export * from "./StrategyBadge";
+export * from "./StepProgress";

client/src/Components/inputs/AutoComplete.tsx

@@ -14,17 +14,19 @@ type AutoCompleteInputProps = Omit<
 	renderInput?: AutocompleteProps<any, boolean, boolean, boolean>["renderInput"];
 	fieldLabel?: string;
 	required?: boolean;
+	renderOptionContent?: (option: any) => React.ReactNode;
 };
 
 export const AutoCompleteInput = ({
 	fieldLabel,
 	required,
 	renderInput,
+	renderOptionContent,
 	...props
 }: AutoCompleteInputProps) => {
 	const theme = useTheme();
 	const multiple = props.multiple;
-
+	const { renderOption: customRenderOption, ...autocompleteProps } = props;
 	const defaultRenderInput = (params: any) => (
 		<TextField
 			{...params}
@@ -34,7 +36,7 @@ export const AutoCompleteInput = ({
 
 	const autocomplete = (
 		<Autocomplete
-			{...props}
+			{...autocompleteProps}
 			disableCloseOnSelect={!!multiple}
 			popupIcon={
 				<ChevronDown
@@ -46,24 +48,28 @@ export const AutoCompleteInput = ({
 			renderInput={renderInput || defaultRenderInput}
 			getOptionKey={(option) => option.id}
 			renderTags={() => null}
-			renderOption={(props, option, { selected }) => {
-				const { key, ...optionProps } = props;
-				return (
-					<ListItem
-						key={key}
-						{...optionProps}
-					>
-						<Stack
-							direction={"row"}
-							alignItems={"center"}
-							gap={theme.spacing(2)}
+			renderOption={
+				customRenderOption ||
+				((props, option, { selected }) => {
+					const { key, ...optionProps } = props;
+					return (
+						<ListItem
+							key={key}
+							{...optionProps}
 						>
-							{multiple && <Checkbox checked={selected} />}
-							{option.name}
-						</Stack>
-					</ListItem>
-				);
-			}}
+							<Stack
+								direction={"row"}
+								alignItems={"center"}
+								gap={theme.spacing(2)}
+								width="100%"
+							>
+								{multiple && <Checkbox checked={selected} />}
+								{renderOptionContent ? renderOptionContent(option) : option.name}
+							</Stack>
+						</ListItem>
+					);
+				})
+			}
 			sx={{
 				"&.MuiAutocomplete-root .MuiAutocomplete-input": {
 					padding: `0 ${theme.spacing(5)}`,

client/src/Components/inputs/Button.tsx

@@ -1,19 +1,43 @@
 import Button from "@mui/material/Button";
 import type { ButtonProps } from "@mui/material/Button";
-import { useTheme } from "@mui/material/styles";
+import { useTheme, darken } from "@mui/material/styles";
+import { HOVER } from "@/Utils/Theme/constants";
+
+const PALETTE_COLORS = [
+	"primary",
+	"secondary",
+	"error",
+	"warning",
+	"info",
+	"success",
+] as const;
+type PaletteColor = (typeof PALETTE_COLORS)[number];
 
 export const ButtonInput = ({ sx, ...props }: ButtonProps) => {
 	const theme = useTheme();
-	const outlinedSx =
+
+	const hoverOverrides: Record<string, unknown> = { boxShadow: "none" };
+
+	if (props.variant === "outlined") {
+		hoverOverrides.borderColor = theme.palette.text.secondary;
+	}
+
+	if (props.variant === "contained") {
+		const colorKey = (props.color ?? "primary") as PaletteColor;
+		const palette = theme.palette[colorKey];
+		if (palette && typeof palette === "object" && "main" in palette) {
+			hoverOverrides.backgroundColor = darken(palette.main, HOVER.DARKEN);
+		}
+	}
+
+	const variantSx =
 		props.variant === "outlined"
 			? {
 					color: theme.palette.text.primary,
 					borderColor: theme.palette.divider,
-					"&:hover": {
-						borderColor: theme.palette.text.secondary,
-					},
 				}
 			: {};
+
 	return (
 		<Button
 			{...props}
@@ -26,10 +50,8 @@ export const ButtonInput = ({ sx, ...props }: ButtonProps) => {
 				textOverflow: "ellipsis",
 				overflow: "hidden",
 				boxShadow: "none",
-				"&:hover": {
-					boxShadow: "none",
-				},
-				...outlinedSx,
+				"&:hover": hoverOverrides,
+				...variantSx,
 				...sx,
 			}}
 		/>

client/src/Components/inputs/Checkbox.tsx

@@ -1,7 +1,7 @@
 import { forwardRef } from "react";
 import Checkbox from "@mui/material/Checkbox";
 import type { CheckboxProps } from "@mui/material/Checkbox";
-import { Square, SquareCheck } from "lucide-react";
+import { Square, SquareCheck, SquareMinus } from "lucide-react";
 import { useTheme } from "@mui/material/styles";
 
 type CheckboxInputProps = CheckboxProps & {
@@ -34,9 +34,15 @@ export const CheckboxInput = forwardRef<HTMLInputElement, CheckboxInputProps>(
 						strokeWidth={1.5}
 					/>
 				}
+				indeterminateIcon={
+					<SquareMinus
+						size={16}
+						strokeWidth={1.5}
+					/>
+				}
 				sx={{
 					color: theme.palette.text.secondary,
-					"&.Mui-checked": {
+					"&.Mui-checked, &.MuiCheckbox-indeterminate": {
 						color: theme.palette.primary.main,
 					},
 					"&:hover": { backgroundColor: "transparent" },

client/src/Components/inputs/Dialog.tsx

@@ -2,10 +2,12 @@ import Dialog from "@mui/material/Dialog";
 import type { DialogProps } from "@mui/material/Dialog";
 import DialogActions from "@mui/material/DialogActions";
 import DialogContent from "@mui/material/DialogContent";
-import DialogContentText from "@mui/material/DialogContentText";
 import DialogTitle from "@mui/material/DialogTitle";
+import Typography from "@mui/material/Typography";
+import Box from "@mui/material/Box";
 import { Button } from "@/Components/inputs";
-import { typographyLevels } from "@/Utils/Theme/Palette";
+import { LAYOUT } from "@/Utils/Theme/constants";
+import { useTheme } from "@mui/material/styles";
 import { useTranslation } from "react-i18next";
 import type { ReactNode } from "react";
 
@@ -16,7 +18,6 @@ export const DialogInput = ({
 	onConfirm,
 	onCancel,
 	confirmColor = "primary",
-	cancelColor = "error",
 	loading = false,
 	cancelText,
 	confirmText,
@@ -31,7 +32,6 @@ export const DialogInput = ({
 	onConfirm?(item: any): any;
 	onCancel?(item: any): any;
 	confirmColor?: "error" | "primary";
-	cancelColor?: "error" | "primary";
 	loading?: boolean;
 	cancelText?: string;
 	confirmText?: string;
@@ -41,6 +41,7 @@ export const DialogInput = ({
 	additionalButtons?: ReactNode;
 }) => {
 	const { t } = useTranslation();
+	const theme = useTheme();
 	return (
 		<Dialog
 			open={open}
@@ -50,16 +51,48 @@ export const DialogInput = ({
 				if (reason !== "backdropClick" && onCancel) onCancel(undefined);
 			}}
 		>
-			{title && <DialogTitle sx={{ fontSize: typographyLevels.l }}>{title}</DialogTitle>}
-			<DialogContent>
-				{content && <DialogContentText>{content}</DialogContentText>}
-				{children}
-			</DialogContent>
-			<DialogActions>
+			{title && (
+				<DialogTitle
+					pb={theme.spacing(LAYOUT.XS)}
+					bgcolor={theme.palette.action.hover}
+					borderBottom={`1px solid ${theme.palette.divider}`}
+				>
+					<Typography
+						component="span"
+						variant="h2"
+						fontWeight={600}
+						display={"block"}
+					>
+						{title}
+					</Typography>
+					{content && (
+						<Typography
+							variant="body1"
+							color={theme.palette.text.secondary}
+							mt={theme.spacing(LAYOUT.XS)}
+							display={"block"}
+						>
+							{content}
+						</Typography>
+					)}
+				</DialogTitle>
+			)}
+			{children && (
+				<DialogContent sx={{ pt: theme.spacing(LAYOUT.MD) }}>
+					<Box pt={theme.spacing(LAYOUT.XS)}>{children}</Box>
+				</DialogContent>
+			)}
+			<DialogActions
+				sx={{
+					p: theme.spacing(LAYOUT.MD),
+					pt: theme.spacing(LAYOUT.SM),
+					backgroundColor: theme.palette.action.hover,
+					borderTop: `1px solid ${theme.palette.divider}`,
+				}}
+			>
 				<Button
 					loading={loading}
-					variant="contained"
-					color={cancelColor}
+					variant="outlined"
 					onClick={onCancel}
 				>
 					{cancelText ?? t("common.buttons.cancel")}

client/src/Components/inputs/FieldLabel.tsx

@@ -15,9 +15,9 @@ export const FieldLabel = ({ children, required = false, htmlFor }: FieldLabelPr
 	return (
 		<Typography
 			component="label"
+			variant="body1"
 			htmlFor={htmlFor}
 			sx={{
-				fontSize: "14px",
 				fontWeight: 500,
 				color: theme.palette.text.secondary,
 				marginBottom: theme.spacing(2),

client/src/Components/inputs/LanguageSelector.tsx

@@ -10,6 +10,7 @@ import type { RootState } from "@/Types/state";
 export const languageNames: Record<string, string> = {
 	en: "English",
 	de: "Deutsch",
+	ca: "Català",
 	es: "Español",
 	fr: "Français",
 	"pt-BR": "Português (BR)",

client/src/Components/inputs/TextInput.tsx

@@ -5,6 +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";
 
 interface TextInputProps extends Omit<TextFieldProps, "label"> {
 	fieldLabel?: string;
@@ -12,47 +13,53 @@ interface TextInputProps extends Omit<TextFieldProps, "label"> {
 }
 
 export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(function TextInput(
-	{ fieldLabel, required, ...props },
+	{ fieldLabel, required, sx, ...props },
 	ref
 ) {
 	const theme = useTheme();
 
+	const innerSx = {
+		width: "100%",
+		"& .MuiOutlinedInput-root": {
+			borderRadius: theme.shape.borderRadius,
+			height: props.multiline ? "auto" : 34,
+			fontSize: typographyLevels.base,
+			overflow: "hidden",
+		},
+		"& .MuiOutlinedInput-notchedOutline": {
+			borderColor: theme.palette.divider,
+		},
+		"&:hover .MuiOutlinedInput-notchedOutline": {
+			borderColor: theme.palette.divider,
+		},
+		"& .MuiFormHelperText-root": {
+			marginLeft: 0,
+			marginRight: 0,
+			marginTop: theme.spacing(1),
+		},
+		"& 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`,
+				WebkitTextFillColor: `${theme.palette.text.primary} !important`,
+				caretColor: theme.palette.text.primary,
+				transition: "background-color 5000s ease-in-out 0s",
+			},
+	};
+
 	const input = (
 		<TextField
 			{...props}
 			inputRef={ref}
-			sx={{
-				"& .MuiOutlinedInput-root": {
-					borderRadius: theme.shape.borderRadius,
-					height: 34,
-					fontSize: typographyLevels.base,
-					overflow: "hidden",
-				},
-				"& .MuiOutlinedInput-notchedOutline": {
-					borderColor: theme.palette.divider,
-				},
-				"&:hover .MuiOutlinedInput-notchedOutline": {
-					borderColor: theme.palette.divider,
-				},
-				"& .MuiFormHelperText-root": {
-					marginLeft: 0,
-					marginRight: 0,
-					marginTop: theme.spacing(1),
-				},
-				"& 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`,
-						WebkitTextFillColor: `${theme.palette.text.primary} !important`,
-						caretColor: theme.palette.text.primary,
-						transition: "background-color 5000s ease-in-out 0s",
-					},
-			}}
+			sx={fieldLabel ? innerSx : { ...innerSx, ...sx }}
 		/>
 	);
 
 	if (fieldLabel) {
 		return (
-			<Stack spacing={theme.spacing(2)}>
+			<Stack
+				spacing={theme.spacing(LAYOUT.XXS)}
+				sx={sx}
+			>
 				<FieldLabel required={required}>{fieldLabel}</FieldLabel>
 				{input}
 			</Stack>

client/src/Components/monitors/BulkActionsBar.tsx

@@ -0,0 +1,102 @@
+import React from "react";
+import Box from "@mui/material/Box";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import Paper from "@mui/material/Paper";
+import Slide from "@mui/material/Slide";
+import IconButton from "@mui/material/IconButton";
+import { X } from "lucide-react";
+
+import { useTranslation } from "react-i18next";
+import { useTheme } from "@mui/material/styles";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import { LAYOUT } from "@/Utils/Theme/constants";
+import { useSidebar } from "@/Hooks/useSidebar";
+
+interface BulkActionsBarProps {
+	selectedCount: number;
+	onCancel: () => void;
+	children?: React.ReactNode;
+}
+
+export const BulkActionsBar = ({
+	selectedCount,
+	onCancel,
+	children,
+}: BulkActionsBarProps) => {
+	const { t } = useTranslation();
+	const theme = useTheme();
+	const isOpen = selectedCount > 0;
+
+	const isSmall = useMediaQuery(theme.breakpoints.down("md"));
+	const { width, collapsedWidth, transition } = useSidebar();
+
+	return (
+		<Box
+			sx={{
+				position: "fixed",
+				bottom: theme.spacing(LAYOUT.XS),
+				left: isSmall ? collapsedWidth : width,
+				right: 0,
+				display: "flex",
+				justifyContent: "center",
+				pointerEvents: "none",
+				zIndex: theme.zIndex.snackbar,
+				transition: transition.replace("width", "left"),
+			}}
+		>
+			<Slide
+				direction="up"
+				in={isOpen}
+				mountOnEnter
+				unmountOnExit
+			>
+				<Paper
+					elevation={6}
+					sx={{
+						pointerEvents: "auto",
+						px: LAYOUT.MD,
+						py: LAYOUT.XS,
+						borderRadius: theme.shape.borderRadius,
+						backgroundColor: theme.palette.background.paper,
+						border: `1px solid ${theme.palette.divider}`,
+						display: "flex",
+						alignItems: "center",
+						gap: LAYOUT.XS,
+						boxShadow: theme.shadows[8],
+					}}
+				>
+					<Stack
+						direction="row"
+						alignItems="center"
+						gap={LAYOUT.XXS}
+					>
+						<Typography
+							variant="body1"
+							fontWeight={600}
+							color={theme.palette.text.primary}
+						>
+							{t("pages.common.monitors.actions.bulkSelected", {
+								count: selectedCount,
+							})}
+						</Typography>
+						<IconButton
+							size="small"
+							onClick={onCancel}
+							aria-label={t("common.buttons.cancel")}
+						>
+							<X size={18} />
+						</IconButton>
+					</Stack>
+					<Stack
+						direction="row"
+						alignItems="center"
+						gap={LAYOUT.XXS}
+					>
+						{children}
+					</Stack>
+				</Paper>
+			</Slide>
+		</Box>
+	);
+};

client/src/Components/monitors/ControlsFilter.tsx

@@ -1,9 +1,11 @@
 import Stack from "@mui/material/Stack";
-import { Select, Button } from "@/Components/inputs";
+import { Select, Autocomplete, Button, TextField } from "@/Components/inputs";
+import { ColoredLabel } from "@/Components/design-elements";
 import MenuItem from "@mui/material/MenuItem";
 import useMediaQuery from "@mui/material/useMediaQuery";
 
 import type { MonitorType } from "@/Types/Monitor";
+import type { Tag } from "@/Types/Tag";
 import { Typography, useTheme } from "@mui/material";
 import { useTranslation } from "react-i18next";
 
@@ -28,22 +30,34 @@ export const ControlsFilter = ({
 	setSelectedStatus,
 	selectedState,
 	setSelectedState,
+	tagOptions,
+	selectedTags,
+	setSelectedTags,
 	onClearFilters,
 }: {
 	showTypes?: boolean;
 	selectedTypes?: MonitorType[];
 	setSelectedTypes?: React.Dispatch<React.SetStateAction<MonitorType[]>>;
-	selectedStatus: string;
-	setSelectedStatus: React.Dispatch<React.SetStateAction<string>>;
-	selectedState: string;
-	setSelectedState: React.Dispatch<React.SetStateAction<string>>;
+	selectedStatus?: string;
+	setSelectedStatus?: React.Dispatch<React.SetStateAction<string>>;
+	selectedState?: string;
+	setSelectedState?: React.Dispatch<React.SetStateAction<string>>;
+	tagOptions?: Tag[];
+	selectedTags?: string[];
+	setSelectedTags?: React.Dispatch<React.SetStateAction<string[]>>;
 	onClearFilters: () => void;
 }) => {
 	const theme = useTheme();
 	const { t } = useTranslation();
 	const isSmall = useMediaQuery(theme.breakpoints.down("md"));
 	const isFilterActive =
-		(selectedTypes?.length ?? 0) > 0 || selectedStatus !== "" || selectedState !== "";
+		(selectedTypes?.length ?? 0) > 0 ||
+		Boolean(selectedStatus) ||
+		Boolean(selectedState) ||
+		(selectedTags?.length ?? 0) > 0;
+	const selectedTagObjects = (tagOptions ?? []).filter((tag) =>
+		(selectedTags ?? []).includes(tag.id)
+	);
 	return (
 		<Stack
 			direction={isSmall ? "column" : "row"}
@@ -66,34 +80,68 @@ export const ControlsFilter = ({
 					))}
 				</Select>
 			)}
-			<Select
-				placeholder="Status"
-				value={selectedStatus}
-				onChange={(e) => setSelectedStatus(e.target.value)}
-			>
-				{statuses.map((status) => (
-					<MenuItem
-						key={status}
-						value={status}
-					>
-						<Typography textTransform={"capitalize"}>{status}</Typography>
-					</MenuItem>
-				))}
-			</Select>
-			<Select
-				placeholder="State"
-				value={selectedState}
-				onChange={(e) => setSelectedState(e.target.value)}
-			>
-				{states.map((state) => (
-					<MenuItem
-						key={state}
-						value={state}
-					>
-						<Typography textTransform={"capitalize"}>{state}</Typography>
-					</MenuItem>
-				))}
-			</Select>
+			{setSelectedStatus && (
+				<Select
+					placeholder="Status"
+					value={selectedStatus ?? ""}
+					onChange={(e) => setSelectedStatus(e.target.value)}
+				>
+					{statuses.map((status) => (
+						<MenuItem
+							key={status}
+							value={status}
+						>
+							<Typography textTransform={"capitalize"}>{status}</Typography>
+						</MenuItem>
+					))}
+				</Select>
+			)}
+			{setSelectedState && (
+				<Select
+					placeholder="State"
+					value={selectedState ?? ""}
+					onChange={(e) => setSelectedState(e.target.value)}
+				>
+					{states.map((state) => (
+						<MenuItem
+							key={state}
+							value={state}
+						>
+							<Typography textTransform={"capitalize"}>{state}</Typography>
+						</MenuItem>
+					))}
+				</Select>
+			)}
+			{tagOptions && setSelectedTags && (
+				<Autocomplete
+					multiple
+					options={tagOptions}
+					value={selectedTagObjects}
+					getOptionLabel={(option) => option.name}
+					onChange={(_: unknown, newValue: Tag[]) => {
+						setSelectedTags(newValue.map((tag) => tag.id));
+					}}
+					isOptionEqualToValue={(option, value) => option.id === value.id}
+					renderOptionContent={(option) => (
+						<ColoredLabel
+							text={option.name}
+							color={option.color}
+						/>
+					)}
+					renderInput={(params) => (
+						<TextField
+							{...params}
+							placeholder={t("common.table.headers.tags")}
+						/>
+					)}
+					slotProps={{
+						popper: {
+							sx: { width: "fit-content !important", minWidth: 280 },
+						},
+					}}
+					sx={{ minWidth: 180 }}
+				/>
+			)}
 			{isFilterActive && (
 				<Button
 					variant="contained"

client/src/Components/monitors/GeoChecksMap.tsx

@@ -3,6 +3,8 @@ import { Box, Typography, Stack, useTheme, GlobalStyles } from "@mui/material";
 import Map, { Marker, Popup } from "react-map-gl/maplibre";
 import type { MapRef } from "react-map-gl/maplibre";
 import type { FlatGeoCheck } from "@/Types/GeoCheck";
+import { useTranslation } from "react-i18next";
+import { formatStatusCode } from "@/Utils/statusCode";
 import "maplibre-gl/dist/maplibre-gl.css";
 
 interface GeoChecksMapProps {
@@ -14,6 +16,7 @@ export const GeoChecksMap = ({ geoChecks }: GeoChecksMapProps) => {
 	const [selectedCheck, setSelectedCheck] = useState<FlatGeoCheck | null>(null);
 	const theme = useTheme();
 	const isDarkMode = theme.palette.mode === "dark";
+	const { t } = useTranslation();
 
 	const mapPopupStyles = (
 		<GlobalStyles
@@ -174,7 +177,7 @@ export const GeoChecksMap = ({ geoChecks }: GeoChecksMapProps) => {
 										>
 											Status Code:
 										</Typography>{" "}
-										{selectedCheck.statusCode}
+										{formatStatusCode(selectedCheck.statusCode, t)}
 									</Typography>
 									<Typography variant="body2">
 										<Typography

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

@@ -9,6 +9,8 @@ import {
 	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 { useSelector } from "react-redux";
@@ -18,13 +20,14 @@ import {
 	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 { RootState } from "@/Types/state";
 
 type XTickProps = {
 	x: number;
 	y: number;
-	payload: { value: any };
+	payload: { value: string };
 	range: string;
 };
 
@@ -46,12 +49,9 @@ export const XTick = ({ x, y, payload, range }: XTickProps) => {
 	);
 };
 
-type ResponseTimeToolTipProps = {
-	active?: boolean | undefined;
-	payload?: any[];
-	label?: string | number;
+type ResponseTimeToolTipProps = TooltipProps<ValueType, NameType> & {
 	range: string;
-	theme: any;
+	theme: Theme;
 	uiTimezone: string;
 };
 
@@ -68,7 +68,8 @@ const ResponseTimeToolTip = ({
 	if (!active) return null;
 
 	const format = tooltipDateFormatLookup(range);
-	const responseTime = Math.floor(payload?.[0]?.payload?.avgResponseTime || 0);
+	console.log(payload);
+	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>

client/src/Components/monitors/index.tsx

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

client/src/Components/sidebar/Menu.tsx

@@ -17,6 +17,7 @@ import {
 	User,
 	Lock,
 	Users,
+	Tag,
 } from "lucide-react";
 
 export const getMenu = (t: Function) => {
@@ -41,6 +42,11 @@ export const getMenu = (t: Function) => {
 			path: "notifications",
 			icon: <Icon icon={Bell} />,
 		},
+		{
+			name: t("components.sidebar.menu.tags"),
+			path: "tags",
+			icon: <Icon icon={Tag} />,
+		},
 		{
 			name: t("components.sidebar.menu.checks"),
 			path: "checks",

client/src/Features/UI/uiSlice.ts

@@ -89,7 +89,9 @@ const uiSlice = createSlice({
 		},
 
 		setTimezone: (state, action: PayloadAction<{ timezone: string }>) => {
-			state.timezone = action.payload.timezone;
+			if (action.payload.timezone) {
+				state.timezone = action.payload.timezone;
+			}
 		},
 		setLanguage: (state, action: PayloadAction<string>) => {
 			state.language = action.payload;

client/src/Hooks/UseToast.ts

@@ -20,6 +20,8 @@ export const useToast = () => {
 		showToast(msg, { ...opts, type: "error" });
 	const toastInfo = (msg: string, opts?: ToastOptions) =>
 		showToast(msg, { ...opts, type: "info" });
+	const toastWarning = (msg: string, opts?: ToastOptions) =>
+		showToast(msg, { ...opts, type: "warning" });
 
-	return { showToast, toastSuccess, toastError, toastInfo };
+	return { showToast, toastSuccess, toastError, toastInfo, toastWarning };
 };

client/src/Hooks/useBulkMonitorActions.ts

@@ -0,0 +1,105 @@
+import { useState, useEffect } from "react";
+import axios from "axios";
+import { post } from "@/Utils/ApiClient";
+import { useToast } from "@/Hooks/UseToast";
+import { useTranslation } from "react-i18next";
+import { logger } from "@/Utils/logger";
+import type { Monitor } from "@/Types/Monitor";
+
+interface ApiResponse {
+	success: boolean;
+	msg: string;
+	data: {
+		monitors: Monitor[];
+		failedCount: number;
+	};
+}
+
+interface UseBulkMonitorActionsReturn {
+	selectedRows: string[];
+	setSelectedRows: (rows: string[]) => void;
+	handleBulkPause: () => Promise<void>;
+	handleBulkResume: () => Promise<void>;
+	handleCancelSelection: () => void;
+}
+
+export const useBulkMonitorActions = (
+	refetch: () => void,
+	page?: number
+): UseBulkMonitorActionsReturn => {
+	const [selectedRows, setSelectedRows] = useState<string[]>([]);
+	const { toastSuccess, toastError, toastInfo, toastWarning } = useToast();
+	const { t } = useTranslation();
+
+	// Clear selection when page changes
+	useEffect(() => {
+		setSelectedRows([]);
+	}, [page]);
+
+	const executeBulkAction = async (pause: boolean) => {
+		try {
+			const res = await post<ApiResponse>("/monitors/bulk/pause", {
+				monitorIds: selectedRows,
+				pause,
+			});
+
+			const affectedCount = res.data?.data?.monitors?.length ?? 0;
+			const failedCount = res.data?.data?.failedCount ?? 0;
+
+			if (affectedCount === 0) {
+				const key = pause
+					? "pages.common.monitors.bulkPause.alreadyPaused"
+					: "pages.common.monitors.bulkPause.alreadyRunning";
+				toastInfo(t(key, { count: selectedRows.length }));
+			} else if (failedCount > 0) {
+				toastWarning(
+					t("pages.common.monitors.bulkPause.partialFailure", {
+						successCount: affectedCount,
+						failedCount,
+					})
+				);
+			} else {
+				const key = pause
+					? "pages.common.monitors.bulkPause.paused"
+					: "pages.common.monitors.bulkPause.resumed";
+				toastSuccess(t(key, { count: affectedCount }));
+			}
+
+			setSelectedRows([]);
+			refetch();
+		} catch (err: unknown) {
+			let errMsg = "An error occurred";
+
+			if (axios.isAxiosError(err)) {
+				errMsg = err.response?.data?.msg || err.message || errMsg;
+			} else if (err instanceof Error) {
+				errMsg = err.message;
+			}
+
+			logger.error("Bulk pause/resume failed", err instanceof Error ? err : undefined, {
+				pause,
+			});
+			toastError(errMsg);
+		}
+	};
+
+	const handleBulkPause = async () => {
+		await executeBulkAction(true);
+	};
+
+	const handleBulkResume = async () => {
+		await executeBulkAction(false);
+	};
+
+	const handleCancelSelection = () => {
+		setSelectedRows([]);
+	};
+
+	return {
+		selectedRows,
+		setSelectedRows,
+		handleBulkPause,
+		handleBulkResume,
+		handleCancelSelection,
+	};
+};

client/src/Hooks/useMaintenanceWindowForm.ts

@@ -2,6 +2,7 @@ import { useMemo } from "react";
 import dayjs from "dayjs";
 import {
 	maintenanceWindowSchema,
+	maintenanceWindowEditSchema,
 	repeatOptions,
 	type MaintenanceWindowFormData,
 } from "@/Validation/maintenanceWindow";
@@ -32,7 +33,7 @@ export const useMaintenanceWindowForm = ({
 				startTime: startDate.format("HH:mm"),
 				duration: data.duration ?? 0,
 				durationUnit: data.durationUnit ?? "minutes",
-				monitors: [data.monitorId],
+				monitors: data.monitorIds,
 			};
 		} else {
 			const now = dayjs();
@@ -47,6 +48,9 @@ export const useMaintenanceWindowForm = ({
 			};
 		}
 
-		return { schema: maintenanceWindowSchema, defaults };
+		return {
+			schema: data ? maintenanceWindowEditSchema : maintenanceWindowSchema,
+			defaults,
+		};
 	}, [data]);
 };

client/src/Hooks/useMonitorForm.ts

@@ -1,5 +1,6 @@
 import { useMemo } from "react";
 import { monitorSchema, type MonitorFormData } from "@/Validation/monitor";
+import { DefaultHttpMethod, DefaultPageSpeedStrategy } from "@/Types/Monitor";
 import type { Monitor, MonitorType } from "@/Types/Monitor";
 
 interface UseMonitorFormOptions {
@@ -12,118 +13,147 @@ const getBaseDefaults = (data?: Monitor | null) => ({
 	description: data?.description || "",
 	interval: data?.interval || 60000,
 	notifications: data?.notifications || [],
+	tags: data?.tags || [],
 	statusWindowSize: data?.statusWindowSize || 5,
 	statusWindowThreshold: data?.statusWindowThreshold || 60,
+});
+
+// Geo-check defaults — only http and ping support geo checks.
+const getGeoCheckDefaults = (data?: Monitor | null) => ({
 	geoCheckEnabled: data?.geoCheckEnabled ?? false,
 	geoCheckLocations: data?.geoCheckLocations || [],
 	geoCheckInterval: data?.geoCheckInterval || 300000,
 });
 
+export const getMonitorDefaults = (
+	type: MonitorType,
+	data: Monitor | null = null
+): MonitorFormData => {
+	const base = getBaseDefaults(data);
+
+	let defaults: MonitorFormData;
+
+	switch (type) {
+		case "http":
+			defaults = {
+				...base,
+				...getGeoCheckDefaults(data),
+				type: "http",
+				url: data?.url || "",
+				method: data?.method ?? DefaultHttpMethod,
+				ignoreTlsErrors: data?.ignoreTlsErrors || false,
+				useAdvancedMatching: data?.useAdvancedMatching || false,
+				matchMethod: data?.matchMethod || "",
+				expectedValue: data?.expectedValue || "",
+				jsonPath: data?.jsonPath || "",
+				customUpCodes: data?.customUpCodes || [],
+			};
+			break;
+		case "ping":
+			defaults = {
+				...base,
+				...getGeoCheckDefaults(data),
+				type: "ping",
+				url: data?.url || "",
+			};
+			break;
+		case "port":
+			defaults = {
+				...base,
+				type: "port",
+				url: data?.url || "",
+				port: data?.port || 80,
+			};
+			break;
+		case "docker":
+			defaults = {
+				...base,
+				type: "docker",
+				url: data?.url || "",
+			};
+			break;
+		case "game":
+			defaults = {
+				...base,
+				type: "game",
+				url: data?.url || "",
+				port: data?.port || 27015,
+				gameId: data?.gameId || "",
+			};
+			break;
+		case "grpc":
+			defaults = {
+				...base,
+				type: "grpc",
+				url: data?.url || "",
+				port: data?.port || 50051,
+				grpcServiceName: data?.grpcServiceName || "",
+				ignoreTlsErrors: data?.ignoreTlsErrors || false,
+			};
+			break;
+		case "pagespeed":
+			defaults = {
+				...base,
+				type: "pagespeed",
+				url: data?.url || "",
+				strategy: data?.strategy ?? DefaultPageSpeedStrategy,
+			};
+			break;
+		case "hardware":
+			defaults = {
+				...base,
+				type: "hardware",
+				url: data?.url || "",
+				secret: data?.secret || "",
+				cpuAlertThreshold: data?.cpuAlertThreshold ?? 100,
+				memoryAlertThreshold: data?.memoryAlertThreshold ?? 100,
+				diskAlertThreshold: data?.diskAlertThreshold ?? 100,
+				tempAlertThreshold: data?.tempAlertThreshold ?? 100,
+				selectedDisks: data?.selectedDisks || [],
+			};
+			break;
+		case "websocket":
+			defaults = {
+				...base,
+				type: "websocket",
+				url: data?.url || "",
+				ignoreTlsErrors: data?.ignoreTlsErrors || false,
+			};
+			break;
+		case "dns":
+			defaults = {
+				...base,
+				type: "dns",
+				url: data?.url || "",
+				dnsServer: data?.dnsServer || "",
+				dnsRecordType: data?.dnsRecordType || "A",
+			};
+			break;
+		default:
+			defaults = {
+				...base,
+				...getGeoCheckDefaults(data),
+				type: "http",
+				url: "",
+				method: DefaultHttpMethod,
+				ignoreTlsErrors: false,
+				useAdvancedMatching: false,
+				matchMethod: "",
+				expectedValue: "",
+				jsonPath: "",
+				customUpCodes: [],
+			};
+	}
+
+	return defaults;
+};
+
 export const useMonitorForm = ({
 	data = null,
 	defaultType = "http",
 }: UseMonitorFormOptions = {}) => {
 	return useMemo(() => {
 		const type = data?.type || defaultType;
-		const base = getBaseDefaults(data);
-
-		let defaults: MonitorFormData;
-
-		switch (type) {
-			case "http":
-				defaults = {
-					...base,
-					type: "http",
-					url: data?.url || "",
-					ignoreTlsErrors: data?.ignoreTlsErrors || false,
-					useAdvancedMatching: data?.useAdvancedMatching || false,
-					matchMethod: data?.matchMethod || "",
-					expectedValue: data?.expectedValue || "",
-					jsonPath: data?.jsonPath || "",
-				};
-				break;
-			case "ping":
-				defaults = {
-					...base,
-					type: "ping",
-					url: data?.url || "",
-				};
-				break;
-			case "port":
-				defaults = {
-					...base,
-					type: "port",
-					url: data?.url || "",
-					port: data?.port || 80,
-				};
-				break;
-			case "docker":
-				defaults = {
-					...base,
-					type: "docker",
-					url: data?.url || "",
-				};
-				break;
-			case "game":
-				defaults = {
-					...base,
-					type: "game",
-					url: data?.url || "",
-					port: data?.port || 27015,
-					gameId: data?.gameId || "",
-				};
-				break;
-			case "grpc":
-				defaults = {
-					...base,
-					type: "grpc",
-					url: data?.url || "",
-					port: data?.port || 50051,
-					grpcServiceName: data?.grpcServiceName || "",
-					ignoreTlsErrors: data?.ignoreTlsErrors || false,
-				};
-				break;
-			case "pagespeed":
-				defaults = {
-					...base,
-					type: "pagespeed",
-					url: data?.url || "",
-				};
-				break;
-			case "hardware":
-				defaults = {
-					...base,
-					type: "hardware",
-					url: data?.url || "",
-					secret: data?.secret || "",
-					cpuAlertThreshold: data?.cpuAlertThreshold ?? 100,
-					memoryAlertThreshold: data?.memoryAlertThreshold ?? 100,
-					diskAlertThreshold: data?.diskAlertThreshold ?? 100,
-					tempAlertThreshold: data?.tempAlertThreshold ?? 100,
-					selectedDisks: data?.selectedDisks || [],
-				};
-				break;
-			case "websocket":
-				defaults = {
-					...base,
-					type: "websocket",
-					url: data?.url || "",
-					ignoreTlsErrors: data?.ignoreTlsErrors || false,
-				};
-				break;
-			default:
-				defaults = {
-					...base,
-					type: "http",
-					url: "",
-					ignoreTlsErrors: false,
-					useAdvancedMatching: false,
-					matchMethod: "",
-					expectedValue: "",
-					jsonPath: "",
-				};
-		}
-
-		return { schema: monitorSchema, defaults };
+		return { schema: monitorSchema, defaults: getMonitorDefaults(type, data) };
 	}, [data, defaultType]);
 };

client/src/Hooks/useNotificationForm.ts

@@ -78,6 +78,14 @@ function buildDefaults(data: Notification | null): NotificationFormData {
 			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",

client/src/Hooks/useSettingsForm.ts

@@ -18,6 +18,7 @@ export const useSettingsForm = ({ data = null }: UseSettingsFormOptions = {}) =>
 			systemEmailHost: data?.systemEmailHost || "",
 			systemEmailUser: data?.systemEmailUser || "",
 			systemEmailAddress: data?.systemEmailAddress || "",
+			systemEmailDisplayName: data?.systemEmailDisplayName || "",
 			systemEmailConnectionHost: data?.systemEmailConnectionHost || "localhost",
 			systemEmailTLSServername: data?.systemEmailTLSServername || "",
 			systemEmailPort: data?.systemEmailPort,

client/src/Hooks/useStatusPageForm.ts

@@ -1,7 +1,12 @@
 import { useMemo } from "react";
 import { statusPageSchema, type StatusPageFormData } from "@/Validation/statusPage";
 import type { StatusPage } from "@/Types/StatusPage";
+import {
+	DEFAULT_STATUS_PAGE_THEME,
+	DEFAULT_STATUS_PAGE_THEME_MODE,
+} from "@/Types/StatusPage";
 import type { Monitor } from "@/Types/Monitor";
+import { resolveTimezone } from "@/Utils/TimeUtils";
 
 interface UseStatusPageFormOptions {
 	data?: StatusPage | null;
@@ -26,7 +31,8 @@ export const useStatusPageForm = ({
 		const defaults: StatusPageFormData = {
 			companyName: data?.companyName || "",
 			url: data?.url || generateDefaultUrl(),
-			timezone: data?.timezone || Intl.DateTimeFormat().resolvedOptions().timeZone,
+			customDomain: data?.customDomain ?? null,
+			timezone: resolveTimezone(data?.timezone),
 			type: data?.type || ["uptime"],
 			color: data?.color || "#13715B",
 			monitors: data?.monitors || [],
@@ -36,6 +42,8 @@ export const useStatusPageForm = ({
 			showAdminLoginLink: data?.showAdminLoginLink ?? false,
 			showInfrastructure: data?.showInfrastructure ?? false,
 			customCSS: data?.customCSS || "",
+			theme: data?.theme ?? DEFAULT_STATUS_PAGE_THEME,
+			themeMode: data?.themeMode ?? DEFAULT_STATUS_PAGE_THEME_MODE,
 			logo: transformLogo(data?.logo),
 		};
 

client/src/Hooks/useTagsForm.ts

@@ -0,0 +1,18 @@
+import { useMemo } from "react";
+import { tagSchema, type TagFormData } from "@/Validation/tag";
+import type { Tag } from "@/Types/Tag";
+
+interface UseTagsFormOptions {
+	data?: Tag | null;
+}
+
+export const useTagsForm = ({ data }: UseTagsFormOptions) => {
+	return useMemo(() => {
+		const defaults: TagFormData = {
+			name: data?.name ?? "",
+			color: data?.color ?? "#13715B",
+		};
+
+		return { schema: tagSchema, defaults };
+	}, [data]);
+};

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

@@ -9,6 +9,7 @@ import { useAddTeamMemberForm } from "@/Hooks/useAddTeamMemberForm";
 import type { AddTeamMemberFormData } from "@/Validation/addTeamMember";
 import type { UserRole, User } from "@/Types/User";
 import { usePost } from "@/Hooks/UseApi";
+import { LAYOUT } from "@/Utils/Theme/constants";
 
 interface AddTeamMemberDialogProps {
 	open: boolean;
@@ -82,38 +83,40 @@ export const AddTeamMemberDialog = ({
 			maxWidth="sm"
 			fullWidth
 		>
-			<Stack
-				gap={theme.spacing(4)}
-				mt={theme.spacing(4)}
-			>
-				<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 ?? ""}
-							fullWidth
-						/>
-					)}
-				/>
-				<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 ?? ""}
-							fullWidth
-						/>
-					)}
-				/>
+			<Stack gap={theme.spacing(LAYOUT.XS)}>
+				<Stack
+					direction="row"
+					gap={theme.spacing(LAYOUT.XS)}
+				>
+					<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 ?? ""}
+								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}
@@ -151,36 +154,41 @@ export const AddTeamMemberDialog = ({
 						</Select>
 					)}
 				/>
-				<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 ?? ""}
-							fullWidth
-						/>
-					)}
-				/>
-				<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 ?? ""}
-							fullWidth
-						/>
-					)}
-				/>
+				<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 }}
+							/>
+						)}
+					/>
+				</Stack>
 			</Stack>
 		</Dialog>
 	);

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

@@ -9,6 +9,7 @@ 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";
 
 const CLIENT_HOST = import.meta.env.VITE_APP_CLIENT_HOST;
 
@@ -95,10 +96,7 @@ export const InviteTeamMemberDialog = ({
 				</Button>
 			}
 		>
-			<Stack
-				gap={theme.spacing(4)}
-				mt={theme.spacing(4)}
-			>
+			<Stack gap={theme.spacing(LAYOUT.XS)}>
 				<Controller
 					name="email"
 					control={control}

client/src/Pages/Checks/Components/ChecksTable.tsx

@@ -1,8 +1,12 @@
-import { Table, Pagination, ValueLabel, StatusLabel } from "@/Components/design-elements";
+import {
+	Table,
+	Pagination,
+	StatusLabel,
+	StatusCodeLabel,
+} from "@/Components/design-elements";
 import Box from "@mui/material/Box";
 import type { Header } from "@/Components/design-elements/Table";
 import type { Monitor } from "@/Types/Monitor";
-
 import { useTranslation } from "react-i18next";
 import { formatDateWithTz } from "@/Utils/TimeUtils";
 import type { Check } from "@/Types/Check";
@@ -29,7 +33,7 @@ export const ChecksTable = ({
 	const { t } = useTranslation();
 	const uiTimezone = useSelector((state: RootState) => state.ui.timezone);
 
-	const getHeaders = (t: Function, uiTimezone: string) => {
+	const getHeaders = () => {
 		const headers: Header<Check>[] = [
 			{
 				id: "monitorName",
@@ -63,13 +67,10 @@ export const ChecksTable = ({
 				id: "statusCode",
 				content: t("pages.checks.table.headers.statusCode"),
 				render: (row) => {
-					const code = row.statusCode;
-					if (!code) return "N/A";
-					const value = code < 300 ? "positive" : code < 400 ? "neutral" : "negative";
 					return (
-						<ValueLabel
-							value={value}
-							text={String(code)}
+						<StatusCodeLabel
+							statusCode={row.statusCode}
+							message={row.message}
 						/>
 					);
 				},
@@ -85,7 +86,7 @@ export const ChecksTable = ({
 		return headers;
 	};
 
-	const headers = getHeaders(t, uiTimezone);
+	const headers = getHeaders();
 
 	const handlePageChange = (
 		_e: React.MouseEvent<HTMLButtonElement> | null,

client/src/Pages/Incidents/Components/CardDetails.tsx

@@ -2,7 +2,7 @@ import Stack from "@mui/material/Stack";
 import Grid from "@mui/material/Grid";
 import Divider from "@mui/material/Divider";
 import Typography from "@mui/material/Typography";
-import { BaseBox, ValueLabel } from "@/Components/design-elements";
+import { BaseBox, ValueLabel, StatusCodeLabel } from "@/Components/design-elements";
 import { LAYOUT } from "@/Utils/Theme/constants";
 
 import { useTranslation } from "react-i18next";
@@ -20,6 +20,24 @@ interface CardDetailsProps {
 	sx?: object;
 }
 
+const SectionHeading = ({ children }: { children: React.ReactNode }) => {
+	const theme = useTheme();
+
+	return (
+		<Typography
+			component="h2"
+			variant="eyebrow"
+			color={theme.palette.text.secondary}
+		>
+			{children}
+		</Typography>
+	);
+};
+
+const Cell = ({ children }: { children: React.ReactNode }) => (
+	<Typography variant="body1">{children}</Typography>
+);
+
 export const CardDetails = ({ incident, monitor, sx }: CardDetailsProps) => {
 	const { t } = useTranslation();
 	const theme = useTheme();
@@ -28,27 +46,24 @@ export const CardDetails = ({ incident, monitor, sx }: CardDetailsProps) => {
 	if (!incident) {
 		return null;
 	}
+
 	return (
 		<Stack
 			gap={theme.spacing(LAYOUT.MD)}
 			sx={sx}
 		>
-			<Typography textTransform={"uppercase"}>
-				{t("pages.incidents.dialog.details.title")}
-			</Typography>
+			<SectionHeading>{t("pages.incidents.dialog.details.title")}</SectionHeading>
 			<BaseBox padding={LAYOUT.MD}>
 				<Stack gap={theme.spacing(LAYOUT.MD)}>
-					<Typography textTransform={"uppercase"}>
-						{t("pages.incidents.dialog.details.overview")}
-					</Typography>
-					<Divider />
-
+					<SectionHeading>{t("pages.incidents.dialog.details.overview")}</SectionHeading>
 					<Grid
 						container
 						spacing={theme.spacing(LAYOUT.MD)}
 						alignItems="center"
 					>
-						<Grid size={2}>{t("pages.incidents.dialog.details.status")}</Grid>
+						<Grid size={2}>
+							<Cell>{t("pages.incidents.dialog.details.status")}</Cell>
+						</Grid>
 						<Grid size={10}>
 							<ValueLabel
 								value={incident.status ? "negative" : "positive"}
@@ -61,15 +76,17 @@ export const CardDetails = ({ incident, monitor, sx }: CardDetailsProps) => {
 						</Grid>
 						{monitor && (
 							<>
-								<Grid size={2}>{t("pages.incidents.dialog.details.monitor")}</Grid>
+								<Grid size={2}>
+									<Cell>{t("pages.incidents.dialog.details.monitor")}</Cell>
+								</Grid>
 								<Grid size={10}>
-									<Typography>{monitor.name ?? "N/A"}</Typography>
+									<Cell>{monitor.name ?? "N/A"}</Cell>
 								</Grid>
 								<Grid size={2}>
-									<Typography>{t("pages.incidents.dialog.details.url")}</Typography>
+									<Cell>{t("pages.incidents.dialog.details.url")}</Cell>
 								</Grid>
 								<Grid size={10}>
-									<Typography>{monitor.url ?? "N/A"}</Typography>
+									<Cell>{monitor.url ?? "N/A"}</Cell>
 								</Grid>
 							</>
 						)}
@@ -78,51 +95,53 @@ export const CardDetails = ({ incident, monitor, sx }: CardDetailsProps) => {
 			</BaseBox>
 			<BaseBox padding={LAYOUT.MD}>
 				<Stack gap={theme.spacing(LAYOUT.MD)}>
-					<Typography textTransform={"uppercase"}>
-						{t("pages.incidents.dialog.details.analysis")}
-					</Typography>
-					<Divider />
+					<SectionHeading>{t("pages.incidents.dialog.details.analysis")}</SectionHeading>
 					<Grid
 						container
 						spacing={theme.spacing(LAYOUT.MD)}
 					>
 						<Grid size={6}>
-							<Typography>{t("pages.incidents.dialog.details.timeline")}</Typography>
+							<Cell>{t("pages.incidents.dialog.details.timeline")}</Cell>
 						</Grid>
 						<Grid size={6}>
-							<Typography>{t("pages.incidents.dialog.details.detailsLabel")}</Typography>
+							<Cell>{t("pages.incidents.dialog.details.detailsLabel")}</Cell>
 						</Grid>
 						<Grid size={6}>
-							<Divider></Divider>
+							<Divider />
 						</Grid>
 						<Grid size={6}>
-							<Divider></Divider>
+							<Divider />
 						</Grid>
 						<Grid size={2}>
-							<Typography>{t("pages.incidents.dialog.details.startedAt")}</Typography>
+							<Cell>{t("pages.incidents.dialog.details.startedAt")}</Cell>
 						</Grid>
 						<Grid size={4}>
-							<Typography>
+							<Cell>
 								{formatDateWithTz(incident.startTime, "D MMM YYYY, h:mm A", uiTimezone)}
-							</Typography>
+							</Cell>
 						</Grid>
 						<Grid size={2}>
-							<Typography>{t("pages.incidents.dialog.details.statusCode")}</Typography>
+							<Cell>{t("pages.incidents.dialog.details.statusCode")}</Cell>
 						</Grid>
 						<Grid size={4}>
-							<Typography>{incident.statusCode ?? "N/A"}</Typography>
+							<Cell>
+								<StatusCodeLabel
+									statusCode={incident.statusCode}
+									message={incident.message}
+								/>
+							</Cell>
 						</Grid>
 						<Grid size={2}>
-							<Typography>{t("pages.incidents.dialog.details.downtime")}</Typography>
+							<Cell>{t("pages.incidents.dialog.details.downtime")}</Cell>
 						</Grid>
 						<Grid size={4}>
-							<Typography>{getIncidentsDuration(incident)}</Typography>
+							<Cell>{getIncidentsDuration(incident)}</Cell>
 						</Grid>
 						<Grid size={2}>
-							<Typography>{t("pages.incidents.dialog.details.message")}</Typography>
+							<Cell>{t("pages.incidents.dialog.details.message")}</Cell>
 						</Grid>
 						<Grid size={4}>
-							<Typography>{incident.message ?? "N/A"}</Typography>
+							<Cell>{incident.message ?? "N/A"}</Cell>
 						</Grid>
 					</Grid>
 				</Stack>
@@ -130,60 +149,53 @@ export const CardDetails = ({ incident, monitor, sx }: CardDetailsProps) => {
 			{!incident.status && (
 				<BaseBox padding={LAYOUT.MD}>
 					<Stack gap={theme.spacing(LAYOUT.XS)}>
-						<Typography textTransform={"uppercase"}>
+						<SectionHeading>
 							{t("pages.incidents.dialog.details.resolutionDetails")}
-						</Typography>
-						<Divider />
+						</SectionHeading>
 						<Grid
 							container
 							spacing={theme.spacing(LAYOUT.MD)}
 							alignItems="center"
 						>
 							<Grid size={2}>
-								<Typography>{t("pages.incidents.dialog.details.resolvedAt")}</Typography>
+								<Cell>{t("pages.incidents.dialog.details.resolvedAt")}</Cell>
 							</Grid>
 							<Grid size={10}>
-								<Typography>
+								<Cell>
 									{incident.endTime
 										? formatDateWithTz(incident.endTime, "D MMM YYYY, h:mm A", uiTimezone)
 										: "N/A"}
-								</Typography>
+								</Cell>
 							</Grid>
 							<Grid size={2}>
-								<Typography>
-									{t("pages.incidents.dialog.details.resolutionType")}
-								</Typography>
+								<Cell>{t("pages.incidents.dialog.details.resolutionType")}</Cell>
 							</Grid>
 							<Grid size={10}>
-								<Typography>
+								<Cell>
 									{incident.resolutionType
 										? t(
 												`pages.incidents.dialog.details.resolutionTypes.${incident.resolutionType}`
 											)
 										: "N/A"}
-								</Typography>
+								</Cell>
 							</Grid>
 							{incident.resolvedBy && (
 								<>
 									<Grid size={2}>
-										<Typography>
-											{t("pages.incidents.dialog.details.resolvedBy")}
-										</Typography>
+										<Cell>{t("pages.incidents.dialog.details.resolvedBy")}</Cell>
 									</Grid>
 									<Grid size={10}>
-										<Typography>
-											{incident.resolvedByEmail ?? incident.resolvedBy}
-										</Typography>
+										<Cell>{incident.resolvedByEmail ?? incident.resolvedBy}</Cell>
 									</Grid>
 								</>
 							)}
 							{incident.comment && (
 								<>
 									<Grid size={2}>
-										<Typography>{t("pages.incidents.dialog.details.comment")}</Typography>
+										<Cell>{t("pages.incidents.dialog.details.comment")}</Cell>
 									</Grid>
 									<Grid size={10}>
-										<Typography>{incident.comment}</Typography>
+										<Cell>{incident.comment}</Cell>
 									</Grid>
 								</>
 							)}

client/src/Pages/Incidents/Components/CardSummary.tsx

@@ -1,8 +1,7 @@
 import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
-import Divider from "@mui/material/Divider";
 import Grid from "@mui/material/Grid";
-import { BaseBox, ValueLabel } from "@/Components/design-elements";
+import { BaseBox, Icon, ValueLabel } from "@/Components/design-elements";
 import { CircleCheck, TriangleAlert, Bell, Wrench, Globe } from "lucide-react";
 import Box from "@mui/material/Box";
 
@@ -25,6 +24,7 @@ const SummaryItem = ({ icon, label, value }: SummaryItemProps) => {
 			alignItems="center"
 			justifyContent="space-between"
 			gap={theme.spacing(2)}
+			minHeight={32}
 		>
 			<Stack
 				direction="row"
@@ -32,10 +32,10 @@ const SummaryItem = ({ icon, label, value }: SummaryItemProps) => {
 				gap={theme.spacing(2)}
 			>
 				{icon}
-				<Typography variant="body2">{label}</Typography>
+				<Typography variant="body1">{label}</Typography>
 			</Stack>
 			<Typography
-				variant="body2"
+				variant="body1"
 				fontWeight={600}
 			>
 				{value}
@@ -67,15 +67,11 @@ export const SummaryCard = ({
 			>
 				<Typography
 					component="h2"
-					sx={{
-						textTransform: "uppercase",
-						fontWeight: 500,
-						fontSize: 13,
-					}}
+					variant="eyebrow"
+					color={theme.palette.text.secondary}
 				>
 					{title}
 				</Typography>
-				<Divider />
 				{children}
 			</Stack>
 		</BaseBox>
@@ -97,10 +93,13 @@ export const SummaryCardActiveIncidents = ({
 	const activeCount = summary.totalActive;
 	const hasActive = activeCount > 0;
 	const color = hasActive ? theme.palette.error.main : theme.palette.success.main;
-	const icon = hasActive ? (
-		<TriangleAlert color={color} />
-	) : (
-		<CircleCheck color={color} />
+	const icon = (
+		<Box sx={{ color, display: "inline-flex" }}>
+			<Icon
+				icon={hasActive ? TriangleAlert : CircleCheck}
+				size={32}
+			/>
+		</Box>
 	);
 	const msg = t("pages.incidents.summaryCard.activeIncidents.active", {
 		count: activeCount,
@@ -133,10 +132,7 @@ const SummaryIncidentItem = ({ incident }: { incident: IncidentSummaryItem }) =>
 			container
 			alignItems="center"
 			spacing={2}
-			sx={{
-				width: "100%",
-				py: theme.spacing(0.5),
-			}}
+			sx={{ width: "100%", minHeight: 32 }}
 		>
 			<Grid
 				size={{ xs: 12, lg: 5 }}
@@ -147,7 +143,7 @@ const SummaryIncidentItem = ({ incident }: { incident: IncidentSummaryItem }) =>
 					gap: theme.spacing(2),
 				}}
 			>
-				<Globe />
+				<Icon icon={Globe} />
 				<Typography
 					variant="body1"
 					fontWeight={500}
@@ -159,9 +155,7 @@ const SummaryIncidentItem = ({ incident }: { incident: IncidentSummaryItem }) =>
 
 			<Grid
 				size={{ xs: 12, md: 6, lg: 3 }}
-				sx={{
-					display: "flex",
-				}}
+				sx={{ display: "flex" }}
 			>
 				<ValueLabel
 					value={incident.status ? "negative" : "positive"}
@@ -173,7 +167,7 @@ const SummaryIncidentItem = ({ incident }: { incident: IncidentSummaryItem }) =>
 				size={{ xs: 12, md: 6, lg: 4 }}
 				sx={{
 					textAlign: { xs: "left", md: "right" },
-					fontWeight: 500,
+					fontWeight: 600,
 				}}
 			>
 				<Typography variant="body1">{duration}</Typography>
@@ -190,22 +184,17 @@ export const SummaryCardLatestIncidents = ({
 	summary,
 }: SummaryCardLatestIncidentsProps) => {
 	const { t } = useTranslation();
-	const theme = useTheme();
 
 	const latestIncidents = summary?.latestIncidents ?? [];
 
 	return (
 		<SummaryCard title={t("pages.incidents.summaryCard.latestIncidents.title")}>
-			<Stack gap={theme.spacing(4)}>
-				{latestIncidents.slice(0, 3).map((incident, index) => (
-					<Box key={incident.id}>
-						<SummaryIncidentItem incident={incident} />
-						{index < latestIncidents.length - 1 && (
-							<Divider sx={{ mt: theme.spacing(2) }} />
-						)}
-					</Box>
-				))}
-			</Stack>
+			{latestIncidents.slice(0, 3).map((incident) => (
+				<SummaryIncidentItem
+					key={incident.id}
+					incident={incident}
+				/>
+			))}
 		</SummaryCard>
 	);
 };
@@ -224,17 +213,17 @@ export const SummaryCardStats = ({ summary }: SummaryCardStatsProps) => {
 	return (
 		<SummaryCard title={t("pages.incidents.summaryCard.incidentStats.title")}>
 			<SummaryItem
-				icon={<Bell size={18} />}
+				icon={<Icon icon={Bell} />}
 				label={t("pages.incidents.summaryCard.incidentStats.totalIncidents")}
 				value={summary?.total || 0}
 			/>
 			<SummaryItem
-				icon={<TriangleAlert size={18} />}
+				icon={<Icon icon={TriangleAlert} />}
 				label={t("pages.incidents.summaryCard.incidentStats.mostAffectedMonitor")}
 				value={mostAffected}
 			/>
 			<SummaryItem
-				icon={<Wrench size={18} />}
+				icon={<Icon icon={Wrench} />}
 				label={t("pages.incidents.summaryCard.incidentStats.avgResolutionTime")}
 				value={
 					summary.total > 0

client/src/Pages/Incidents/Components/ControlsIncidentFilter.tsx

@@ -75,7 +75,7 @@ export const ControlsIncidentFilter = ({
 					variant="contained"
 					onClick={onClearFilters}
 				>
-					{t("pages.incidents.filters.clearFilters")}
+					{t("common.buttons.clearFilters")}
 				</Button>
 			)}
 		</Stack>

client/src/Pages/Incidents/Components/DialogResolution.tsx

@@ -1,9 +1,7 @@
 import { useState, useEffect } from "react";
-import Box from "@mui/material/Box";
 import { Dialog, TextField } from "@/Components/inputs";
 import { usePut } from "@/Hooks/UseApi";
 import { useTranslation } from "react-i18next";
-import { useTheme } from "@mui/material";
 
 interface DialogResolutionProps {
 	open: boolean;
@@ -19,7 +17,6 @@ export const DialogResolution = ({
 	onResolved,
 }: DialogResolutionProps) => {
 	const { t } = useTranslation();
-	const theme = useTheme();
 	const [comment, setComment] = useState("");
 	const { put: resolveIncident, loading: isResolving } = usePut();
 
@@ -50,22 +47,19 @@ export const DialogResolution = ({
 			onCancel={handleCancel}
 			onConfirm={handleConfirm}
 			confirmColor="error"
-			cancelColor="primary"
 			loading={isResolving}
 			maxWidth="sm"
 			fullWidth
 		>
-			<Box sx={{ mt: theme.spacing(4) }}>
-				<TextField
-					fieldLabel={t("pages.incidents.dialog.resolveIncident.option.comment.label")}
-					placeholder={t(
-						"pages.incidents.dialog.resolveIncident.option.comment.placeholder"
-					)}
-					value={comment}
-					onChange={(e) => setComment(e.target.value)}
-					fullWidth
-				/>
-			</Box>
+			<TextField
+				fieldLabel={t("pages.incidents.dialog.resolveIncident.option.comment.label")}
+				placeholder={t(
+					"pages.incidents.dialog.resolveIncident.option.comment.placeholder"
+				)}
+				value={comment}
+				onChange={(e) => setComment(e.target.value)}
+				fullWidth
+			/>
 		</Dialog>
 	);
 };

client/src/Pages/Incidents/Components/IncidentTable.tsx

@@ -1,8 +1,6 @@
-import { Table } from "@/Components/design-elements";
+import { Table, ValueLabel, StatusCodeLabel } from "@/Components/design-elements";
 import { Pagination } from "@/Components/design-elements/Table";
 import type { Header } from "@/Components/design-elements/Table";
-import { ValueLabel } from "@/Components/design-elements";
-import type { ValueType } from "@/Components/design-elements/StatusLabel";
 import { ActionsMenu } from "@/Components/actions-menu";
 import type { Incident } from "@/Types/Incident";
 import type { Monitor } from "@/Types/Monitor";
@@ -136,13 +134,12 @@ export const IncidentsTable = ({
 						return (
 							<Typography
 								variant="body2"
-								sx={{
-									textTransform: "capitalize",
-									color:
-										row.resolutionType === "manual"
-											? theme.palette.warning.main
-											: theme.palette.success.main,
-								}}
+								color={
+									row.resolutionType === "manual"
+										? theme.palette.warning.main
+										: theme.palette.success.main
+								}
+								textTransform={"capitalize"}
 							>
 								{row.resolutionType}
 							</Typography>
@@ -155,15 +152,10 @@ export const IncidentsTable = ({
 				id: "statusCode",
 				content: t("pages.incidents.table.headers.statusCode"),
 				render: (row) => {
-					const code = row.statusCode;
-					if (!code) return "N/A";
-					let value: ValueType = "neutral";
-					if (code < 300) value = "positive";
-					else if (code >= 400) value = "negative";
 					return (
-						<ValueLabel
-							value={value}
-							text={String(code)}
+						<StatusCodeLabel
+							statusCode={row.statusCode}
+							message={row.message}
 						/>
 					);
 				},

client/src/Pages/Incidents/index.tsx

@@ -15,6 +15,7 @@ import { HeaderTimeRange } from "@/Components/common";
 import { ControlsIncidentFilter } from "@/Pages/Incidents/Components/ControlsIncidentFilter";
 
 import { useGet } from "@/Hooks/UseApi";
+import { LAYOUT } from "@/Utils/Theme/constants";
 import { useState, useEffect, useMemo } from "react";
 import { useParams } from "react-router-dom";
 import type { Incident, IncidentsResponse, IncidentSummary } from "@/Types/Incident";
@@ -186,8 +187,9 @@ const IncidentsPage = () => {
 			{activeIncidentsCount > 0 && (
 				<>
 					<Typography
-						variant="h6"
-						sx={{ mb: theme.spacing(4), textTransform: "uppercase" }}
+						variant="eyebrow"
+						color={theme.palette.text.secondary}
+						mb={theme.spacing(LAYOUT.XS)}
 					>
 						{t("pages.incidents.table.activeIncidents")}
 					</Typography>
@@ -208,8 +210,9 @@ const IncidentsPage = () => {
 			)}
 
 			<Typography
-				variant="h6"
-				sx={{ mb: theme.spacing(4), textTransform: "uppercase" }}
+				variant="eyebrow"
+				color={theme.palette.text.secondary}
+				mb={theme.spacing(LAYOUT.XS)}
 			>
 				{t("pages.incidents.table.resolvedIncidents")}
 			</Typography>

client/src/Pages/Infrastructure/Details/Components/ChartsNetwork.tsx

@@ -1,4 +1,6 @@
 import Grid from "@mui/material/Grid";
+import Stack from "@mui/material/Stack";
+import { NoticeBanner } from "@/Components/design-elements";
 import { HistogramInfrastructure } from "@/Components/monitors";
 
 import { useTranslation } from "react-i18next";
@@ -6,6 +8,7 @@ import type { HardwareCheckStats } from "@/Types/Monitor";
 import { useMemo } from "react";
 import { useTheme } from "@mui/material/styles";
 import useMediaQuery from "@mui/material/useMediaQuery";
+import { LAYOUT } from "@/Utils/Theme/constants";
 
 const formatBytesToMB = (value: number) => `${(value / (1024 * 1024)).toFixed(2)} MB`;
 
@@ -60,6 +63,11 @@ const getChartConfigs = (
 	return configs;
 };
 
+const hasAnyNetworkTraffic = (checks: HardwareCheckStats[]): boolean =>
+	checks.some((c) =>
+		c.net?.some((iface) => iface.bytesSentPerSecond > 0 || iface.deltaBytesRecv > 0)
+	);
+
 export const InfraNetworkCharts = ({
 	checks,
 	dateRange,
@@ -74,35 +82,43 @@ export const InfraNetworkCharts = ({
 		() => getChartConfigs(theme, checks, t),
 		[theme, checks, t]
 	);
+	const showNoTrafficNotice = chartConfigs.length > 0 && !hasAnyNetworkTraffic(checks);
 
 	return (
-		<Grid
-			container
-			spacing={theme.spacing(8)}
-		>
-			{chartConfigs.map((config) => {
-				return (
-					<Grid
-						size={isSmall ? 12 : 6}
-						key={`${config.type}-${config.interfaceName ?? config.idx ?? ""}`}
-					>
-						<HistogramInfrastructure
-							dateRange={dateRange}
-							title={config.title}
-							type={config.type}
-							idx={config.idx}
-							checks={checks}
-							xKey="bucketDate"
-							dataKeys={config.dataKeys}
-							gradient={true}
-							gradientStartColor={config.gradientStartColor}
-							gradientEndColor="#ffffff"
-							strokeColor={config.strokeColor}
-							yAxisFormatter={formatBytesToMB}
-						/>
-					</Grid>
-				);
-			})}
-		</Grid>
+		<Stack gap={theme.spacing(LAYOUT.XS)}>
+			{showNoTrafficNotice && (
+				<NoticeBanner severity="warning">
+					{t("pages.infrastructure.charts.labels.netNoTraffic")}
+				</NoticeBanner>
+			)}
+			<Grid
+				container
+				spacing={theme.spacing(LAYOUT.MD)}
+			>
+				{chartConfigs.map((config) => {
+					return (
+						<Grid
+							size={isSmall ? 12 : 6}
+							key={`${config.type}-${config.interfaceName ?? config.idx ?? ""}`}
+						>
+							<HistogramInfrastructure
+								dateRange={dateRange}
+								title={config.title}
+								type={config.type}
+								idx={config.idx}
+								checks={checks}
+								xKey="bucketDate"
+								dataKeys={config.dataKeys}
+								gradient={true}
+								gradientStartColor={config.gradientStartColor}
+								gradientEndColor="#ffffff"
+								strokeColor={config.strokeColor}
+								yAxisFormatter={formatBytesToMB}
+							/>
+						</Grid>
+					);
+				})}
+			</Grid>
+		</Stack>
 	);
 };

client/src/Pages/Infrastructure/Monitors/Components/MonitorsTable.tsx

@@ -1,6 +1,14 @@
 import Box from "@mui/material/Box";
+import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
-import { Table, Pagination, StatusLabel, Gauge } from "@/Components/design-elements";
+import {
+	Table,
+	Pagination,
+	StatusLabel,
+	Gauge,
+	ColoredLabel,
+} from "@/Components/design-elements";
+import { SPACING } from "@/Utils/Theme/constants";
 import type { Header } from "@/Components/design-elements/Table";
 import { ActionsMenu, type ActionMenuItem } from "@/Components/actions-menu";
 import { ArrowUp, ArrowDown } from "lucide-react";
@@ -12,9 +20,30 @@ import { useNavigate } from "react-router-dom";
 import { usePost } from "@/Hooks/UseApi";
 
 import type { Monitor } from "@/Types/Monitor";
+import type { Tag } from "@/Types/Tag";
+import { Checkbox } from "@/Components/inputs";
+
+interface InfraMonitorsTableProps {
+	monitors: Monitor[];
+	tags: Tag[];
+	refetch: () => void;
+	setSelectedMonitor: (monitor: Monitor | null) => void;
+	sortField: string;
+	setSortField: (field: string) => void;
+	sortOrder: "asc" | "desc";
+	setSortOrder: (order: "asc" | "desc") => void;
+	count: number;
+	page: number;
+	setPage: (page: number) => void;
+	rowsPerPage: number;
+	setRowsPerPage: (rowsPerPage: number) => void;
+	selectedRows?: string[];
+	onSelectionChange?: (selected: string[]) => void;
+}
 
 export const InfraMonitorsTable = ({
 	monitors,
+	tags,
 	refetch,
 	setSelectedMonitor,
 	sortField,
@@ -26,29 +55,32 @@ export const InfraMonitorsTable = ({
 	setPage,
 	rowsPerPage,
 	setRowsPerPage,
-}: {
-	monitors: Monitor[];
-	refetch: Function;
-	setSelectedMonitor: Function;
-	sortField: string;
-	setSortField: (field: string) => void;
-	sortOrder: "asc" | "desc";
-	setSortOrder: (order: "asc" | "desc") => void;
-	count: number;
-	page: number;
-	setPage: (page: number) => void;
-	rowsPerPage: number;
-	setRowsPerPage: (rowsPerPage: number) => void;
-}) => {
+	selectedRows = [],
+	onSelectionChange,
+}: InfraMonitorsTableProps) => {
 	const { t } = useTranslation();
 	const theme = useTheme();
 	const isSmall = useMediaQuery(theme.breakpoints.down("md"));
 	const navigate = useNavigate();
-	const {
-		post,
-		// loading: isPatching,
-		// error: postError,
-	} = usePost<any, Monitor>();
+	const { post } = usePost<Record<string, never>, Monitor>();
+
+	const selectedSet = new Set(selectedRows);
+	const isAllSelected =
+		monitors.length > 0 && monitors.every((m) => selectedSet.has(m.id));
+	const isSomeSelected = selectedRows.length > 0 && !isAllSelected;
+
+	const handleSelectAll = (checked: boolean) => {
+		onSelectionChange?.(checked ? monitors.map((m) => m.id) : []);
+	};
+
+	const handleSelectRow = (id: string, checked: boolean) => {
+		if (!onSelectionChange) return;
+		onSelectionChange(
+			checked ? [...selectedRows, id] : selectedRows.filter((rowId) => rowId !== id)
+		);
+	};
+
+	const isRowSelected = (id: string) => selectedSet.has(id);
 
 	const handlePageChange = (
 		_e: React.MouseEvent<HTMLButtonElement> | null,
@@ -65,7 +97,7 @@ export const InfraMonitorsTable = ({
 		setRowsPerPage(value);
 	};
 
-	const handleSort = (e: any, field: string) => {
+	const handleSort = (e: React.MouseEvent, field: string) => {
 		e.preventDefault();
 		e.stopPropagation();
 		if (sortField === field) {
@@ -101,13 +133,6 @@ export const InfraMonitorsTable = ({
 					navigate(`/infrastructure/configure/${monitor.id}`);
 				},
 			},
-			// {
-			//   id: 5,
-			//   label: "Clone",
-			//   action: () => {
-
-			//   },
-			// },
 			{
 				id: 6,
 				label:
@@ -152,8 +177,35 @@ export const InfraMonitorsTable = ({
 			</Box>
 		);
 		const headers: Header<Monitor>[] = [
+			{
+				id: "selection",
+				content: (
+					<Checkbox
+						aria-label={t("pages.common.monitors.actions.selectAll")}
+						indeterminate={isSomeSelected}
+						checked={isAllSelected}
+						onChange={(e) => handleSelectAll(e.target.checked)}
+					/>
+				),
+				hideMobileLabel: true,
+				render: (row) => (
+					<Checkbox
+						aria-label={t("pages.common.monitors.actions.selectMonitor", {
+							name: row.name,
+						})}
+						checked={isRowSelected(row.id)}
+						onChange={(e) => {
+							handleSelectRow(row.id, e.target.checked);
+						}}
+						onClick={(e) => e.stopPropagation()}
+					/>
+				),
+				onClick: (e) => e?.stopPropagation(),
+			},
 			{
 				id: "name",
+				align: "left",
+				mobileLabel: t("common.table.headers.name"),
 				content: (
 					<Typography
 						component="div"
@@ -173,18 +225,20 @@ export const InfraMonitorsTable = ({
 			},
 			{
 				id: "status",
+				mobileLabel: t("common.table.headers.status"),
 				content: (
-					<Typography
-						component="div"
-						display="inline-flex"
-						alignItems="center"
+					<Stack
 						gap={theme.spacing(4)}
+						direction={"row"}
+						justifyContent={"center"}
+						alignItems={"center"}
 						onClick={(e) => handleSort(e, "status")}
 						sx={{ cursor: "pointer" }}
 					>
+						<Box width={theme.spacing(8)} />
 						{t("common.table.headers.status")}
 						{renderSortIcon(sortField === "status")}
-					</Typography>
+					</Stack>
 				),
 				render: (row) => {
 					return <StatusLabel status={row.status} />;
@@ -223,6 +277,32 @@ export const InfraMonitorsTable = ({
 					return <Gauge progress={diskUsage} />;
 				},
 			},
+			{
+				id: "tags",
+				content: t("common.table.headers.tags"),
+				render: (row) => {
+					if (row.tags.length === 0) return "-";
+					return (
+						<Stack
+							justifyContent={"center"}
+							direction={isSmall ? "column" : "row"}
+							gap={theme.spacing(SPACING.LG)}
+						>
+							{row.tags.map((tagId) => {
+								const fullTag = tags.find((t) => t.id === tagId);
+								if (!fullTag) return null;
+								return (
+									<ColoredLabel
+										key={fullTag.id}
+										text={fullTag.name}
+										color={fullTag.color}
+									/>
+								);
+							})}
+						</Stack>
+					);
+				},
+			},
 
 			{
 				id: "actions",
@@ -248,6 +328,11 @@ export const InfraMonitorsTable = ({
 				onRowClick={(row) => {
 					navigate(`/infrastructure/${row.id}`);
 				}}
+				getRowSx={(row) => ({
+					backgroundColor: isRowSelected(row.id)
+						? theme.palette.action.selected
+						: "inherit",
+				})}
 			/>
 			<Pagination
 				component="div"

client/src/Pages/Infrastructure/Monitors/index.tsx

@@ -1,14 +1,22 @@
 import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
 import useMediaQuery from "@mui/material/useMediaQuery";
-import { MonitorBasePageWithStates } from "@/Components/design-elements";
+import { MonitorBasePageWithStates, ColoredLabel } from "@/Components/design-elements";
 import { HeaderCreate } from "@/Components/common";
-import { ControlsFilter, HeaderMonitorsSummary } from "@/Components/monitors";
-import { TextField, Dialog } from "@/Components/inputs";
+import {
+	ControlsFilter,
+	HeaderMonitorsSummary,
+	BulkActionsBar,
+} from "@/Components/monitors";
+import { TextField, Dialog, Button } from "@/Components/inputs";
+import { Play, Pause } from "lucide-react";
 
 import { useGet, useDelete } from "@/Hooks/UseApi";
 import { useIsAdmin } from "@/Hooks/useIsAdmin";
 import type { Monitor, MonitorsWithChecksResponse } from "@/Types/Monitor";
+import type { Tag } from "@/Types/Tag";
 import { useTheme } from "@mui/material";
+import { SPACING } from "@/Utils/Theme/constants";
 import { useState, useCallback, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { useSelector, useDispatch } from "react-redux";
@@ -16,6 +24,7 @@ import { setRowsPerPage } from "@/Features/UI/uiSlice.js";
 import type { RootState } from "@/Types/state";
 import { InfraMonitorsTable } from "./Components/MonitorsTable";
 import useDebounce from "@/Hooks/useDebounce";
+import { useBulkMonitorActions } from "@/Hooks/useBulkMonitorActions";
 
 const InfrastructureMonitors = () => {
 	const { t } = useTranslation();
@@ -32,11 +41,15 @@ const InfrastructureMonitors = () => {
 	// Local state
 	const [selectedStatus, setSelectedStatus] = useState<string>("");
 	const [selectedState, setSelectedState] = useState<string>("");
+	const [selectedTags, setSelectedTags] = useState<string[]>([]);
 	const [search, setSearch] = useState<string>("");
 	const [page, setPage] = useState<number>(0);
 	const [sortField, setSortField] = useState<string>("");
 	const [sortOrder, setSortOrder] = useState<"asc" | "desc">("asc");
 	const [selectedMonitor, setSelectedMonitor] = useState<Monitor | null>(null);
+
+	const { data: tags } = useGet<Tag[]>("/tags/team");
+
 	const isDialogOpen = Boolean(selectedMonitor);
 
 	const debouncedSearch = useDebounce<string>(search, 300);
@@ -44,6 +57,7 @@ const InfrastructureMonitors = () => {
 	const handleClearFilters = useCallback(() => {
 		setSelectedStatus("");
 		setSelectedState("");
+		setSelectedTags([]);
 		setSearch("");
 	}, []);
 
@@ -74,6 +88,7 @@ const InfrastructureMonitors = () => {
 	const monitorsWithChecksUrl = useMemo(() => {
 		const params = new URLSearchParams();
 		params.append("type", "hardware");
+		selectedTags.forEach((tagId) => params.append("tags", tagId));
 		params.append("limit", "1");
 		if (page !== undefined) params.append("page", String(page));
 		if (rowsPerPage) params.append("rowsPerPage", String(rowsPerPage));
@@ -81,7 +96,7 @@ const InfrastructureMonitors = () => {
 		if (field) params.append("field", field);
 		if (sortOrder) params.append("order", sortOrder);
 		return `/monitors/team/with-checks?${params.toString()}`;
-	}, [page, rowsPerPage, filter, field, sortOrder]);
+	}, [page, rowsPerPage, filter, field, sortOrder, selectedTags]);
 
 	const {
 		data: monitorsWithChecksData,
@@ -97,8 +112,19 @@ const InfrastructureMonitors = () => {
 	const { summary, count } = monitorsWithChecksData ?? { summary: null, count: 0 };
 	const isLoading = monitorsWithChecksLoading;
 
+	// Bulk actions
+	const {
+		selectedRows,
+		setSelectedRows,
+		handleBulkPause,
+		handleBulkResume,
+		handleCancelSelection,
+	} = useBulkMonitorActions(refetch, page);
+
 	// Check if any filters are active
-	const hasActiveFilters = Boolean(selectedStatus || selectedState || search);
+	const hasActiveFilters = Boolean(
+		selectedStatus || selectedState || selectedTags.length > 0 || search
+	);
 
 	// Show empty state only when there are truly no monitors (not just filtered out)
 	const effectiveTotalCount =
@@ -149,6 +175,9 @@ const InfrastructureMonitors = () => {
 					setSelectedStatus={setSelectedStatus}
 					selectedState={selectedState}
 					setSelectedState={setSelectedState}
+					tagOptions={tags ?? []}
+					selectedTags={selectedTags}
+					setSelectedTags={setSelectedTags}
 					onClearFilters={handleClearFilters}
 				/>
 				<TextField
@@ -159,8 +188,56 @@ const InfrastructureMonitors = () => {
 					}}
 				/>
 			</Stack>
+
+			{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>
+					{selectedTags.map((tagId) => {
+						const tag = tags?.find((t) => t.id === tagId);
+						if (!tag) return null;
+						return (
+							<ColoredLabel
+								key={tag.id}
+								text={tag.name}
+								color={tag.color}
+							/>
+						);
+					})}
+				</Stack>
+			)}
+
+			{!isLoading && (
+				<BulkActionsBar
+					selectedCount={selectedRows.length}
+					onCancel={handleCancelSelection}
+				>
+					<Button
+						size="small"
+						startIcon={<Play size={16} />}
+						onClick={handleBulkResume}
+					>
+						{t("common.buttons.resume")}
+					</Button>
+					<Button
+						size="small"
+						startIcon={<Pause size={16} />}
+						onClick={handleBulkPause}
+					>
+						{t("common.buttons.pause")}
+					</Button>
+				</BulkActionsBar>
+			)}
+
 			<InfraMonitorsTable
 				monitors={monitorsWithChecksData?.monitors || []}
+				tags={tags ?? []}
 				refetch={refetch}
 				setSelectedMonitor={setSelectedMonitor}
 				sortField={sortField}
@@ -180,6 +257,8 @@ const InfrastructureMonitors = () => {
 					);
 					setPage(0);
 				}}
+				selectedRows={selectedRows}
+				onSelectionChange={setSelectedRows}
 			/>
 			<Dialog
 				open={isDialogOpen}

client/src/Pages/Logs/TabDiagnostics.tsx

@@ -1,12 +1,15 @@
 import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
 import { Stats } from "@/Pages/Logs/components/Stats";
+import { MongoStats } from "@/Pages/Logs/components/MongoStats";
+import { MongoCollectionStats } from "./components/MongoCollectionStats";
 import { StatGauges } from "@/Pages/Logs/components/StatGauges";
 
 import { useTheme } from "@mui/material";
 import { useTranslation } from "react-i18next";
 import { useGet } from "@/Hooks/UseApi";
 import type { Diagnostics } from "@/Types/Diagnostics";
+import { LAYOUT, SPACING } from "@/Utils/Theme/constants";
 
 export const TabDiagnostics = () => {
 	const theme = useTheme();
@@ -19,12 +22,12 @@ export const TabDiagnostics = () => {
 	} = useGet<Diagnostics>("/diagnostic/system", {}, { refreshInterval: 5000 });
 
 	return (
-		<Stack gap={theme.spacing(12)}>
-			<Stack gap={theme.spacing(4)}>
-				<Stack gap={theme.spacing(1)}>
+		<Stack gap={theme.spacing(LAYOUT.XL)}>
+			<Stack gap={theme.spacing(LAYOUT.XS)}>
+				<Stack gap={theme.spacing(SPACING.SM)}>
 					<Typography
 						variant="eyebrow"
-						color="text.secondary"
+						color={theme.palette.text.secondary}
 					>
 						{t("pages.logs.diagnostics.sections.runtimeStats.title")}
 					</Typography>
@@ -34,11 +37,11 @@ export const TabDiagnostics = () => {
 				</Stack>
 				<Stats diagnostics={diagnostics} />
 			</Stack>
-			<Stack gap={theme.spacing(4)}>
-				<Stack gap={theme.spacing(1)}>
+			<Stack gap={theme.spacing(LAYOUT.XS)}>
+				<Stack gap={theme.spacing(SPACING.SM)}>
 					<Typography
 						variant="eyebrow"
-						color="text.secondary"
+						color={theme.palette.text.secondary}
 					>
 						{t("pages.logs.diagnostics.sections.memoryCpu.title")}
 					</Typography>
@@ -48,6 +51,30 @@ export const TabDiagnostics = () => {
 				</Stack>
 				<StatGauges diagnostics={diagnostics} />
 			</Stack>
+			<Stack gap={theme.spacing(LAYOUT.XS)}>
+				<Typography
+					variant="eyebrow"
+					color={theme.palette.text.secondary}
+				>
+					{t("pages.logs.diagnostics.sections.mongoDBStats.title")}
+				</Typography>
+				<Typography color={theme.palette.text.secondary}>
+					{t("pages.logs.diagnostics.sections.mongoDBStats.description")}
+				</Typography>
+				<MongoStats diagnostics={diagnostics} />
+			</Stack>
+			<Stack gap={theme.spacing(LAYOUT.XS)}>
+				<Typography
+					variant="eyebrow"
+					color={theme.palette.text.secondary}
+				>
+					{t("pages.logs.diagnostics.sections.mongoDBCollectionStats.title")}
+				</Typography>
+				<Typography color={theme.palette.text.secondary}>
+					{t("pages.logs.diagnostics.sections.mongoDBCollectionStats.description")}
+				</Typography>
+				<MongoCollectionStats diagnostics={diagnostics} />
+			</Stack>
 		</Stack>
 	);
 };

client/src/Pages/Logs/TabQueue.tsx

@@ -2,28 +2,41 @@ import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
 import Box from "@mui/material/Box";
 import { TableJobs, TableFailedJobs } from "./components/TableJobs";
-
+import { TableWorkers } from "./components/TableWorkers";
 import { useTheme } from "@mui/material";
+import { useState } from "react";
 import { useTranslation, Trans } from "react-i18next";
 import { useGet, usePost } from "@/Hooks/UseApi";
 import type { QueueData } from "@/Types/Queue";
 import { Metrics } from "@/Pages/Logs/components/Metrics";
 import { Button } from "@/Components/inputs";
 import { EmptyState } from "@/Components/design-elements";
+import { SPACING } from "@/Utils/Theme/constants";
 
 export const TabQueue = () => {
 	const theme = useTheme();
 	const { t } = useTranslation();
+	const [page, setPage] = useState(0);
+	const [rowsPerPage, setRowsPerPage] = useState(10);
 	const {
 		data: queueData,
 		isLoading,
 		// error,
 		refetch,
-	} = useGet<QueueData>("/queue/all-metrics", {}, { refreshInterval: 5000 });
+	} = useGet<QueueData>(
+		`/queue/all-metrics?page=${page}&rowsPerPage=${rowsPerPage}`,
+		{},
+		{ refreshInterval: 1000, keepPreviousData: true }
+	);
 
 	const { post, loading: isFlushing } = usePost();
 
 	const jobs = queueData?.jobs ?? [];
+	const jobsCount = queueData?.count ?? 0;
+	const workers = (queueData?.metrics?.workers ?? []).map((worker, idx) => ({
+		...worker,
+		id: idx,
+	}));
 	const metrics = queueData?.metrics ?? null;
 	const hasNeverRun = !isLoading && metrics !== null && (metrics.totalRuns ?? 0) === 0;
 	const noQueueData = !isLoading && metrics === null && jobs.length === 0;
@@ -49,54 +62,77 @@ export const TabQueue = () => {
 				<Stack gap={theme.spacing(1)}>
 					<Typography
 						variant="eyebrow"
-						color="text.secondary"
+						color={theme.palette.text.secondary}
 					>
-						{t("pages.logs.jobQueue")}
+						{t("pages.logs.workers")}
 					</Typography>
-					<Typography
-						sx={{
-							fontSize: 13,
-							color: theme.palette.text.secondary,
-						}}
-					>
+					<Typography color={theme.palette.text.secondary}>
 						<Trans
-							i18nKey="pages.logs.jobQueueExplainer"
+							i18nKey="pages.logs.workersExplainers"
 							components={{
 								highlight: (
 									<Box
 										component="span"
-										sx={{
-											backgroundColor:
-												theme.palette.mode === "dark"
-													? "rgba(19, 113, 91, 0.18)"
-													: "#ECF7F2",
-											color: theme.palette.text.primary,
-											px: 1,
-											py: 0.25,
-											borderRadius: 0.5,
-										}}
+										bgcolor={theme.palette.rowStatus.running}
+										color={theme.palette.text.primary}
+										px={SPACING.SM}
+										py={SPACING.XXS}
+										borderRadius={theme.shape.borderRadius}
 									/>
 								),
 							}}
 						/>
 					</Typography>
 				</Stack>
-				<TableJobs jobs={jobs} />
+				<TableWorkers queueWorkers={workers} />
 			</Stack>
 			<Stack gap={theme.spacing(3)}>
 				<Stack gap={theme.spacing(1)}>
 					<Typography
 						variant="eyebrow"
-						color="text.secondary"
+						color={theme.palette.text.secondary}
+					>
+						{t("pages.logs.jobQueue")}
+					</Typography>
+					<Typography color={theme.palette.text.secondary}>
+						<Trans
+							i18nKey="pages.logs.jobQueueExplainer"
+							components={{
+								highlight: (
+									<Box
+										component="span"
+										bgcolor={theme.palette.rowStatus.running}
+										color={theme.palette.text.primary}
+										px={SPACING.SM}
+										py={SPACING.XXS}
+										borderRadius={theme.shape.borderRadius}
+									/>
+								),
+							}}
+						/>
+					</Typography>
+				</Stack>
+				<TableJobs
+					jobs={jobs}
+					count={jobsCount}
+					page={page}
+					rowsPerPage={rowsPerPage}
+					onPageChange={(_, newPage) => setPage(newPage)}
+					onRowsPerPageChange={(event) => {
+						setRowsPerPage(parseInt(event.target.value, 10));
+						setPage(0);
+					}}
+				/>
+			</Stack>
+			<Stack gap={theme.spacing(3)}>
+				<Stack gap={theme.spacing(1)}>
+					<Typography
+						variant="eyebrow"
+						color={theme.palette.text.secondary}
 					>
 						{t("pages.logs.failedJobs")}
 					</Typography>
-					<Typography
-						sx={{
-							fontSize: 13,
-							color: theme.palette.text.secondary,
-						}}
-					>
+					<Typography color={theme.palette.text.secondary}>
 						{t("pages.logs.failedJobsExplainer")}
 					</Typography>
 				</Stack>

client/src/Pages/Logs/components/MongoCollectionStats.tsx

@@ -0,0 +1,104 @@
+import Box from "@mui/material/Box";
+import { StatBox, Gauge, Tooltip } from "@/Components/design-elements";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+
+import { useTranslation } from "react-i18next";
+import prettyBytes from "pretty-bytes";
+import { useTheme } from "@mui/material";
+import type { Diagnostics } from "@/Types/Diagnostics";
+import { LAYOUT } from "@/Utils/Theme/constants";
+
+interface MongoStatsProps {
+	diagnostics: Diagnostics | null;
+}
+
+export const MongoCollectionStats = ({ diagnostics }: MongoStatsProps) => {
+	const theme = useTheme();
+	const { t } = useTranslation();
+
+	const mongoStats = diagnostics?.mongoStats;
+	if (!mongoStats) {
+		return null;
+	}
+
+	return (
+		<Box
+			display={"grid"}
+			gap={theme.spacing(LAYOUT.MD)}
+			sx={{
+				gridTemplateColumns: { xs: "1fr", md: "repeat(5, 1fr)" },
+				"& > *": { width: "100% !important" },
+			}}
+		>
+			{mongoStats.collections.map((colStat) => (
+				<StatBox
+					key={colStat.name}
+					title={colStat.name}
+					subtitle={""}
+				>
+					<Stack
+						direction={"row"}
+						alignItems={"center"}
+						justifyContent={"space-between"}
+					>
+						<Stack>
+							{/* <Typography variant="body2">{`Documents: ${colStat.documentCount}`}</Typography> */}
+							<Typography variant="body2">
+								{t("pages.logs.diagnostics.mongoDBCollectionStats.documents", {
+									count: colStat.documentCount,
+								})}
+							</Typography>
+							{colStat.bucketCount !== undefined && (
+								<Typography variant="body2">
+									{t("pages.logs.diagnostics.mongoDBCollectionStats.bucketCount", {
+										count: colStat.bucketCount,
+									})}
+								</Typography>
+							)}
+							<Typography variant="body2">
+								{t("pages.logs.diagnostics.mongoDBCollectionStats.storageSize", {
+									size: prettyBytes(colStat.storageSize),
+								})}
+							</Typography>
+							<Typography variant="body2">
+								{t("pages.logs.diagnostics.mongoDBCollectionStats.indexSize", {
+									size: prettyBytes(colStat.totalIndexSize),
+								})}
+							</Typography>
+							<Typography variant="body2">
+								{t("pages.logs.diagnostics.mongoDBCollectionStats.totalSize", {
+									size: prettyBytes(colStat.totalSize),
+								})}
+							</Typography>
+						</Stack>
+						<Stack alignItems={"center"}>
+							<Tooltip
+								title={t("pages.logs.diagnostics.mongoDBCollectionStats.dbUsageTooltip", {
+									percentage: ((colStat.totalSize / mongoStats.totalSize) * 100).toFixed(
+										2
+									),
+								})}
+								placement="top"
+								slotProps={{
+									popper: {
+										modifiers: [
+											{
+												name: "offset",
+												options: {
+													offset: [0, -10],
+												},
+											},
+										],
+									},
+								}}
+							>
+								<Gauge progress={(colStat.totalSize / mongoStats.totalSize) * 100} />
+							</Tooltip>
+						</Stack>
+					</Stack>
+				</StatBox>
+			))}
+		</Box>
+	);
+};

client/src/Pages/Logs/components/MongoStats.tsx

@@ -0,0 +1,74 @@
+import Box from "@mui/material/Box";
+import { StatBox } from "@/Components/design-elements";
+
+import { useTranslation } from "react-i18next";
+import prettyBytes from "pretty-bytes";
+import { useTheme } from "@mui/material";
+import type { Diagnostics } from "@/Types/Diagnostics";
+import { LAYOUT } from "@/Utils/Theme/constants";
+
+interface MongoStatsProps {
+	diagnostics: Diagnostics | null;
+}
+
+export const MongoStats = ({ diagnostics }: MongoStatsProps) => {
+	const theme = useTheme();
+	const { t } = useTranslation();
+
+	const mongoStats = diagnostics?.mongoStats;
+	if (!mongoStats) {
+		return null;
+	}
+
+	return (
+		<Box
+			display={"grid"}
+			gap={theme.spacing(LAYOUT.MD)}
+			sx={{
+				gridTemplateColumns: { xs: "1fr", md: "repeat(5, 1fr)" },
+				"& > *": { width: "100% !important" },
+			}}
+		>
+			<StatBox
+				title={t("pages.logs.diagnostics.mongoDBStats.readyState")}
+				subtitle={mongoStats.readyState.toString()}
+			/>
+			<StatBox
+				title={t("pages.logs.diagnostics.mongoDBStats.readsPerSecond")}
+				subtitle={mongoStats.readsPerSecond.toFixed(0)}
+			/>
+			<StatBox
+				title={t("pages.logs.diagnostics.mongoDBStats.insertsPerSecond")}
+				subtitle={mongoStats.insertsPerSecond.toFixed(0)}
+			/>
+			<StatBox
+				title={t("pages.logs.diagnostics.mongoDBStats.updatesPerSecond")}
+				subtitle={mongoStats.updatesPerSecond.toFixed(0)}
+			/>
+			<StatBox
+				title={t("pages.logs.diagnostics.mongoDBStats.deletesPerSecond")}
+				subtitle={mongoStats.deletesPerSecond.toFixed(0)}
+			/>
+			<StatBox
+				title={t("pages.logs.diagnostics.mongoDBStats.writesPerSecond")}
+				subtitle={mongoStats.writesPerSecond.toFixed(0)}
+			/>
+			<StatBox
+				title={t("pages.logs.diagnostics.mongoDBStats.host")}
+				subtitle={mongoStats.host}
+			/>
+			<StatBox
+				title={t("pages.logs.diagnostics.mongoDBStats.port")}
+				subtitle={mongoStats.port.toString()}
+			/>
+			<StatBox
+				title={t("pages.logs.diagnostics.mongoDBStats.dbName")}
+				subtitle={mongoStats.dbName}
+			/>
+			<StatBox
+				title={t("pages.logs.diagnostics.mongoDBStats.storageSize")}
+				subtitle={prettyBytes(mongoStats.totalSize)}
+			/>
+		</Box>
+	);
+};

client/src/Pages/Logs/components/TableJobs.tsx

@@ -1,4 +1,4 @@
-import { Table } from "@/Components/design-elements";
+import { Table, Pagination } from "@/Components/design-elements";
 import { Typography, useTheme } from "@mui/material";
 import prettyMilliseconds from "pretty-ms";
 import { formatTimestamp } from "@/Utils/TimeUtils";
@@ -6,14 +6,27 @@ import { formatTimestamp } from "@/Utils/TimeUtils";
 import { useTranslation } from "react-i18next";
 import type { QueueJobFailure, QueueJobSummary, QueueMetrics } from "@/Types/Queue";
 import type { Header } from "@/Components/design-elements";
+import type { TablePaginationProps } from "@mui/material/TablePagination";
 
 type QueueJobWithId = QueueJobSummary & { id: string | number };
 
 interface TableJobsProps {
 	jobs: QueueJobSummary[];
+	count: number;
+	page: number;
+	rowsPerPage: number;
+	onPageChange: TablePaginationProps["onPageChange"];
+	onRowsPerPageChange: TablePaginationProps["onRowsPerPageChange"];
 }
 
-export const TableJobs = ({ jobs }: TableJobsProps) => {
+export const TableJobs = ({
+	jobs,
+	count,
+	page,
+	rowsPerPage,
+	onPageChange,
+	onRowsPerPageChange,
+}: TableJobsProps) => {
 	const { t } = useTranslation();
 	const theme = useTheme();
 
@@ -29,7 +42,26 @@ export const TableJobs = ({ jobs }: TableJobsProps) => {
 		maxWidth: 220,
 	};
 
+	const isRunning = (row: QueueJobWithId) =>
+		row.lockedBy !== null && row.lockedUntil !== null && row.lockedUntil > Date.now();
+
 	const headers: Header<QueueJobWithId>[] = [
+		{
+			id: "state",
+			content: t("pages.logs.table.headers.state"),
+			render: (row) => {
+				if (isRunning(row)) {
+					return t("common.labels.running");
+				}
+				if (row.monitorActive === true) {
+					return t("common.labels.active");
+				}
+				if (row.monitorActive === false) {
+					return t("common.labels.paused");
+				}
+				return t("common.labels.idle");
+			},
+		},
 		{
 			id: "id",
 			content: t("common.table.headers.monitorId"),
@@ -43,15 +75,6 @@ export const TableJobs = ({ jobs }: TableJobsProps) => {
 				</Typography>
 			),
 		},
-		{
-			id: "url",
-			content: t("common.table.headers.url"),
-			render: (row) => (
-				<Typography title={row.monitorUrl ?? ""} sx={cellSx}>
-					{row.monitorUrl}
-				</Typography>
-			),
-		},
 		{
 			id: "type",
 			content: t("common.table.headers.type"),
@@ -65,52 +88,82 @@ export const TableJobs = ({ jobs }: TableJobsProps) => {
 			),
 		},
 		{
-			id: "lastRun",
-			content: t("pages.logs.table.headers.lastRunAt"),
+			id: "lastFinishedAt",
+			content: t("pages.logs.table.headers.lastFinishedAt"),
 			render: (row) => {
-				const v = formatTimestamp(row.lastRunAt) ?? "-";
+				const lastFinishedAt = formatTimestamp(row.lastFinishedAt) ?? "-";
 				return (
-					<Typography title={v} sx={cellSx}>
-						{v}
+					<Typography
+						title={lastFinishedAt}
+						sx={cellSx}
+					>
+						{lastFinishedAt}
 					</Typography>
 				);
 			},
 		},
 		{
-			id: "lastRunTook",
-			content: t("pages.logs.table.headers.lastRunTook"),
+			id: "nextScheduledAt",
+			content: t("pages.logs.table.headers.nextScheduledAt"),
 			render: (row) => {
-				const value = row.lastRunTook ? prettyMilliseconds(row.lastRunTook) : "-";
-				return <Typography sx={cellSx}>{value}</Typography>;
+				const nextScheduledAt = formatTimestamp(row.nextScheduledAt) ?? "-";
+				return (
+					<Typography
+						title={nextScheduledAt}
+						sx={cellSx}
+					>
+						{nextScheduledAt}
+					</Typography>
+				);
 			},
 		},
 		{
-			id: "lockedAt",
-			content: t("pages.logs.table.headers.lockedAt"),
+			id: "lockedBy",
+			content: t("pages.logs.table.headers.lockedBy"),
 			render: (row) => {
-				const v = formatTimestamp(row.lockedAt) ?? "-";
+				const lockedBy = row.lockedBy;
+				if (!lockedBy) {
+					return <Typography sx={cellSx}>-</Typography>;
+				}
+
+				const workerId = lockedBy.split(":")[2];
+				const shortWorkerId = workerId.slice(workerId.length - 8);
 				return (
-					<Typography title={v} sx={cellSx}>
-						{v}
+					<Typography
+						title={workerId}
+						sx={cellSx}
+					>
+						{`...${shortWorkerId}`}
 					</Typography>
 				);
 			},
 		},
 	];
 
-	const isDark = theme.palette.mode === "dark";
-	const runningBg = isDark ? "rgba(19, 113, 91, 0.18)" : "#ECF7F2";
-
 	return (
-		<Table
-			headers={headers}
-			data={jobsWithId}
-			getRowSx={(row) => ({
-				...(row.lockedAt && {
-					"& td": { backgroundColor: runningBg },
-				}),
-			})}
-		/>
+		<>
+			<Table
+				headers={headers}
+				data={jobsWithId}
+				getRowSx={(row) => ({
+					...(isRunning(row) && {
+						"& td": { backgroundColor: theme.palette.rowStatus.running },
+					}),
+					...(row.monitorActive === false && {
+						"& td": { backgroundColor: theme.palette.rowStatus.paused },
+					}),
+				})}
+			/>
+			<Pagination
+				component="div"
+				count={count}
+				page={page}
+				rowsPerPage={rowsPerPage}
+				onPageChange={onPageChange}
+				onRowsPerPageChange={onRowsPerPageChange}
+				itemsOnPage={jobs.length}
+			/>
+		</>
 	);
 };
 

client/src/Pages/Logs/components/TableWorkers.tsx

@@ -0,0 +1,94 @@
+import { Table } from "@/Components/design-elements";
+import { Typography, useTheme } from "@mui/material";
+import { formatTimestamp } from "@/Utils/TimeUtils";
+
+import { useTranslation } from "react-i18next";
+import type { QueueWorker } from "@/Types/Queue";
+import type { Header } from "@/Components/design-elements";
+
+type QueueWorkerWithId = QueueWorker & { id: number };
+
+interface TableWorkersProps {
+	queueWorkers: QueueWorkerWithId[];
+}
+
+export const TableWorkers = ({ queueWorkers }: TableWorkersProps) => {
+	const { t } = useTranslation();
+	const theme = useTheme();
+
+	const cellSx = {
+		whiteSpace: "nowrap" as const,
+		overflow: "hidden",
+		textOverflow: "ellipsis",
+		maxWidth: 220,
+	};
+
+	const headers: Header<QueueWorkerWithId>[] = [
+		{
+			id: "host",
+			content: t("pages.logs.table.headers.host"),
+			render: (row) => {
+				const host = row.workerId.split(":")[0];
+				return (
+					<Typography
+						fontFamily={theme.typography.fontFamilyMonospace}
+						sx={cellSx}
+					>
+						{host}
+					</Typography>
+				);
+			},
+		},
+		{
+			id: "processId",
+			content: t("pages.logs.table.headers.processId"),
+			render: (row) => {
+				const processId = row.workerId.split(":")[1];
+				return (
+					<Typography
+						fontFamily={theme.typography.fontFamilyMonospace}
+						sx={cellSx}
+					>
+						{processId}
+					</Typography>
+				);
+			},
+		},
+		{
+			id: "id",
+			content: t("pages.logs.table.headers.workerId"),
+			render: (row) => {
+				const workerId = row.workerId.split(":")[2];
+				const shortWorkerId = workerId.slice(workerId.length - 8);
+				return (
+					<Typography
+						fontFamily={theme.typography.fontFamilyMonospace}
+						title={workerId}
+						sx={cellSx}
+					>
+						{`...${shortWorkerId}`}
+					</Typography>
+				);
+			},
+		},
+		{
+			id: "mode",
+			content: t("pages.logs.table.headers.workerMode"),
+			render: (row) => <Typography sx={cellSx}>{row.mode}</Typography>,
+		},
+		{
+			id: "lastSeen",
+			content: t("pages.logs.table.headers.lastSeenAt"),
+			render: (row) => (
+				<Typography sx={cellSx}>{formatTimestamp(row.lastSeenAt)}</Typography>
+			),
+		},
+	];
+
+	return (
+		<Table
+			headers={headers}
+			data={queueWorkers}
+		/>
+	);
+};

client/src/Pages/Maintenance/create/index.tsx

@@ -22,6 +22,7 @@ import type { MaintenanceWindowFormData } from "@/Validation/maintenanceWindow";
 import { repeatOptions, durationUnitOptions } from "@/Validation/maintenanceWindow";
 import { useMaintenanceWindowForm } from "@/Hooks/useMaintenanceWindowForm";
 import { useGet, usePost, usePatch } from "@/Hooks/UseApi";
+import { mutate } from "swr";
 import { useParams, useNavigate } from "react-router-dom";
 import type { Monitor } from "@/Types/Monitor";
 import { useForm, Controller } from "react-hook-form";
@@ -85,10 +86,6 @@ const CreateMaintenanceWindowPage = () => {
 			repeat,
 		};
 
-		if (repeat === 0) {
-			payload.expiry = endDateTime.toISOString();
-		}
-
 		return payload;
 	};
 
@@ -103,6 +100,9 @@ const CreateMaintenanceWindowPage = () => {
 		}
 
 		if (result?.success) {
+			await mutate(
+				(key) => typeof key === "string" && key.startsWith("/maintenance-window")
+			);
 			navigate("/maintenance");
 		}
 	};

client/src/Pages/Notifications/create/index.tsx

@@ -150,7 +150,8 @@ const NotificationsCreatePage = () => {
 			{watchedType !== "matrix" &&
 				watchedType !== "telegram" &&
 				watchedType !== "pushover" &&
-				watchedType !== "twilio" && (
+				watchedType !== "twilio" &&
+				watchedType !== "ntfy" && (
 					<ConfigBox
 						title={addressConfig.title}
 						subtitle={addressConfig.description}
@@ -174,6 +175,48 @@ const NotificationsCreatePage = () => {
 						}
 					/>
 				)}
+			{watchedType === "ntfy" && (
+				<ConfigBox
+					title={t("pages.notifications.form.ntfy.title")}
+					subtitle={t("pages.notifications.form.ntfy.description")}
+					rightContent={
+						<Stack spacing={theme.spacing(8)}>
+							<Controller
+								name="address"
+								control={control}
+								defaultValue={"address" in defaults ? defaults.address : ""}
+								render={({ field, fieldState }) => (
+									<TextField
+										{...field}
+										type="text"
+										fieldLabel={t("pages.notifications.form.ntfy.optionServerUrl")}
+										placeholder={t("pages.notifications.form.ntfy.placeholderServerUrl")}
+										fullWidth
+										error={!!fieldState.error}
+										helperText={fieldState.error?.message ?? ""}
+									/>
+								)}
+							/>
+							<Controller
+								name="topic"
+								control={control}
+								defaultValue={"topic" in defaults ? defaults.topic : ""}
+								render={({ field, fieldState }) => (
+									<TextField
+										{...field}
+										type="text"
+										fieldLabel={t("pages.notifications.form.ntfy.optionTopic")}
+										placeholder={t("pages.notifications.form.ntfy.placeholderTopic")}
+										fullWidth
+										error={!!fieldState.error}
+										helperText={fieldState.error?.message ?? ""}
+									/>
+								)}
+							/>
+						</Stack>
+					}
+				/>
+			)}
 			{watchedType === "telegram" && (
 				<ConfigBox
 					title={t("pages.notifications.form.telegram.title")}

client/src/Pages/PageSpeed/Monitors/Components/PageSpeedMonitorsTable.tsx

@@ -1,7 +1,14 @@
 import Stack from "@mui/material/Stack";
 import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
-import { Table, Pagination, StatusLabel } from "@/Components/design-elements";
+import {
+	Table,
+	Pagination,
+	StatusLabel,
+	StrategyBadge,
+	ColoredLabel,
+} from "@/Components/design-elements";
+import { LAYOUT, SPACING } from "@/Utils/Theme/constants";
 import { HistogramPageSpeed } from "@/Components/monitors";
 import { ArrowDown, ArrowUp } from "lucide-react";
 import type { Header } from "@/Components/design-elements/Table";
@@ -14,10 +21,12 @@ import { useNavigate } from "react-router-dom";
 import { usePatch } from "@/Hooks/UseApi";
 
 import type { Monitor, MonitorWithChecks } from "@/Types/Monitor";
+import type { Tag } from "@/Types/Tag";
 import type { ActionMenuItem } from "@/Components/actions-menu";
 
 export const PageSpeedMonitorsTable = ({
 	monitors,
+	tags,
 	refetch,
 	setSelectedMonitor,
 	sortField,
@@ -31,6 +40,7 @@ export const PageSpeedMonitorsTable = ({
 	setRowsPerPage,
 }: {
 	monitors: MonitorWithChecks[];
+	tags: Tag[];
 	refetch: Function;
 	setSelectedMonitor: Function;
 	sortField: string;
@@ -179,7 +189,19 @@ export const PageSpeedMonitorsTable = ({
 					</Stack>
 				),
 				render: (row) => {
-					return row.name;
+					return (
+						<Stack
+							direction="row"
+							alignItems="center"
+							gap={LAYOUT.XS}
+						>
+							<Typography>{row.name}</Typography>
+							<StrategyBadge
+								strategy={row.strategy}
+								variant="caption"
+							/>
+						</Stack>
+					);
 				},
 			},
 			{
@@ -215,6 +237,32 @@ export const PageSpeedMonitorsTable = ({
 					);
 				},
 			},
+			{
+				id: "tags",
+				content: t("common.table.headers.tags"),
+				render: (row) => {
+					if (row.tags.length === 0) return "-";
+					return (
+						<Stack
+							justifyContent={"center"}
+							direction={isSmall ? "column" : "row"}
+							gap={theme.spacing(SPACING.LG)}
+						>
+							{row.tags.map((tagId) => {
+								const fullTag = tags.find((tag) => tag.id === tagId);
+								if (!fullTag) return null;
+								return (
+									<ColoredLabel
+										key={fullTag.id}
+										text={fullTag.name}
+										color={fullTag.color}
+									/>
+								);
+							})}
+						</Stack>
+					);
+				},
+			},
 
 			{
 				id: "actions",

client/src/Pages/PageSpeed/Monitors/index.tsx

@@ -1,22 +1,32 @@
 import {
 	MonitorBasePageWithStates,
 	PageSpeedKeyPriorityFallback,
+	ColoredLabel,
 } from "@/Components/design-elements";
-import { Dialog } from "@/Components/inputs";
+import { Dialog, TextField } from "@/Components/inputs";
 import { HeaderCreate } from "@/Components/common";
 import { PageSpeedMonitorsTable } from "@/Pages/PageSpeed/Monitors/Components/PageSpeedMonitorsTable";
 import type { Monitor } from "@/Types/Monitor";
+import type { Tag } from "@/Types/Tag";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import { useTheme } from "@mui/material";
+import { SPACING } from "@/Utils/Theme/constants";
 
 import { useTranslation } from "react-i18next";
-import { useMemo, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { useIsAdmin } from "@/Hooks/useIsAdmin";
 import { useGet, useDelete } from "@/Hooks/UseApi";
+import useDebounce from "@/Hooks/useDebounce";
 import type { MonitorsWithChecksResponse } from "@/Types/Monitor";
 import type { AppSettingsResponse } from "@/Types/Settings";
-import { HeaderMonitorsSummary } from "@/Components/monitors";
+import { ControlsFilter, HeaderMonitorsSummary } from "@/Components/monitors";
 
 const PageSpeedMonitorsPage = () => {
 	const { t } = useTranslation();
+	const theme = useTheme();
+	const isSmall = useMediaQuery(theme.breakpoints.down("md"));
 	const isAdmin = useIsAdmin();
 	const { deleteFn, loading: isDeleting } = useDelete();
 
@@ -33,17 +43,50 @@ const PageSpeedMonitorsPage = () => {
 	const [sortOrder, setSortOrder] = useState<"asc" | "desc">("asc");
 	const [page, setPage] = useState(0);
 	const [rowsPerPage, setRowsPerPage] = useState(10);
+	const [selectedTags, setSelectedTags] = useState<string[]>([]);
+	const [selectedStatus, setSelectedStatus] = useState<string>("");
+	const [selectedState, setSelectedState] = useState<string>("");
+	const [search, setSearch] = useState<string>("");
+
+	const debouncedSearch = useDebounce<string>(search, 300);
+
+	// 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]);
+
+	// 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;
+
+	const { data: tags } = useGet<Tag[]>("/tags/team");
 
 	const monitorsWithChecksUrl = useMemo(() => {
 		const params = new URLSearchParams();
 		params.append("type", "pagespeed");
+		selectedTags.forEach((tagId) => params.append("tags", tagId));
 		params.append("limit", "25");
 		if (page !== undefined) params.append("page", String(page));
 		if (rowsPerPage) params.append("rowsPerPage", String(rowsPerPage));
-		if (sortField) params.append("field", sortField);
+		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()}`;
-	}, [page, rowsPerPage, sortField, sortOrder]);
+	}, [page, rowsPerPage, sortOrder, selectedTags, filter, field]);
 
 	const {
 		data: monitorsData,
@@ -75,12 +118,28 @@ const PageSpeedMonitorsPage = () => {
 		setSelectedMonitor(null);
 	};
 
+	const handleClearFilters = useCallback(() => {
+		setSelectedStatus("");
+		setSelectedState("");
+		setSelectedTags([]);
+		setSearch("");
+	}, []);
+
+	const hasActiveFilters = Boolean(
+		selectedStatus || selectedState || selectedTags.length > 0 || search
+	);
+
+	const effectiveTotalCount =
+		hasActiveFilters && (summary?.totalMonitors ?? 0) === 0
+			? 1
+			: (summary?.totalMonitors ?? 0);
+
 	return (
 		<MonitorBasePageWithStates
 			headerKey="pageSpeed"
 			loading={isLoading}
 			error={monitorsError || settingsError}
-			totalCount={summary?.totalMonitors ?? 0}
+			totalCount={effectiveTotalCount}
 			page="pageSpeed"
 			actionLink="/pagespeed/create"
 			priorityFallback={showApiKeyWarning ? <PageSpeedKeyPriorityFallback /> : undefined}
@@ -91,8 +150,59 @@ const PageSpeedMonitorsPage = () => {
 				isAdmin={isAdmin}
 			/>
 			<HeaderMonitorsSummary summary={summary} />
+
+			<Stack
+				direction={isSmall ? "column" : "row"}
+				justifyContent={isSmall ? "flex-start" : "space-between"}
+				gap={theme.spacing(4)}
+			>
+				<ControlsFilter
+					showTypes={false}
+					selectedStatus={selectedStatus}
+					setSelectedStatus={setSelectedStatus}
+					selectedState={selectedState}
+					setSelectedState={setSelectedState}
+					tagOptions={tags ?? []}
+					selectedTags={selectedTags}
+					setSelectedTags={setSelectedTags}
+					onClearFilters={handleClearFilters}
+				/>
+				<TextField
+					placeholder={t("pages.uptime.filters.search.placeholder")}
+					value={search}
+					onChange={(event) => {
+						setSearch(event.target.value);
+					}}
+				/>
+			</Stack>
+
+			{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>
+					{selectedTags.map((tagId) => {
+						const tag = tags?.find((t) => t.id === tagId);
+						if (!tag) return null;
+						return (
+							<ColoredLabel
+								key={tag.id}
+								text={tag.name}
+								color={tag.color}
+							/>
+						);
+					})}
+				</Stack>
+			)}
+
 			<PageSpeedMonitorsTable
 				monitors={monitors || []}
+				tags={tags ?? []}
 				refetch={refetch}
 				setSelectedMonitor={setSelectedMonitor}
 				sortField={sortField}

client/src/Pages/Settings/DummyChart.tsx

@@ -3,6 +3,7 @@ import Typography from "@mui/material/Typography";
 import { useTheme } from "@mui/material/styles";
 import { HeatmapResponseTime, HistogramResponseTime } from "@/Components/common";
 import type { CheckSnapshot } from "@/Types/Check";
+import { MAX_RECENT_CHECKS } from "@/Types/Monitor";
 
 interface DummyChartProps {
 	chartType: string;
@@ -10,7 +11,7 @@ interface DummyChartProps {
 
 const generateDummyChecks = (): CheckSnapshot[] => {
 	const checks: CheckSnapshot[] = [];
-	for (let i = 0; i < 25; i++) {
+	for (let i = 0; i < MAX_RECENT_CHECKS; i++) {
 		const isUp = Math.random() > 0.1;
 		const responseTime = Math.floor(Math.random() * 80) + 20;
 		checks.push({

client/src/Pages/Settings/index.tsx

@@ -128,8 +128,8 @@ export const SettingsPage = () => {
 		timezoneOptions.find((tz) => tz.id === selectedTimezoneId) ?? null;
 
 	const handleTimezoneChange = (newValue: Timezone | null) => {
-		const newId = newValue?.id ?? "";
-		dispatch(setTimezone({ timezone: newId }));
+		if (!newValue?.id) return;
+		dispatch(setTimezone({ timezone: newValue.id }));
 	};
 
 	const handleModeChange = (e: SelectChangeEvent<ThemeMode>) => {
@@ -182,6 +182,9 @@ export const SettingsPage = () => {
 			systemEmailRequireTLS: formValues.systemEmailRequireTLS,
 			systemEmailRejectUnauthorized: formValues.systemEmailRejectUnauthorized,
 			...(formValues.systemEmailUser && { systemEmailUser: formValues.systemEmailUser }),
+			...(formValues.systemEmailDisplayName && {
+				systemEmailDisplayName: formValues.systemEmailDisplayName,
+			}),
 			...(formValues.systemEmailTLSServername && {
 				systemEmailTLSServername: formValues.systemEmailTLSServername,
 			}),
@@ -577,44 +580,65 @@ export const SettingsPage = () => {
 								href="https://nodemailer.com/smtp/"
 								target="_blank"
 							/>
-							<Box
-								component="pre"
-								sx={{
-									fontFamily: theme.typography.fontFamilyMonospace,
-									p: 2,
-									borderRadius: 1,
-									overflow: "auto",
-									backgroundColor: theme.palette.action.hover,
-								}}
-							>
-								<code>
-									{JSON.stringify(
-										{
-											host: form.watch("systemEmailHost") || "",
-											port: form.watch("systemEmailPort") || "",
-											secure: form.watch("systemEmailSecure") ?? false,
-											auth: {
-												user:
-													form.watch("systemEmailUser") ||
-													form.watch("systemEmailAddress") ||
-													"",
-												pass: "<your_password>",
-											},
-											name: form.watch("systemEmailConnectionHost") || "localhost",
-											pool: form.watch("systemEmailPool") ?? false,
-											tls: {
-												rejectUnauthorized:
-													form.watch("systemEmailRejectUnauthorized") ?? true,
-												ignoreTLS: form.watch("systemEmailIgnoreTLS") ?? false,
-												requireTLS: form.watch("systemEmailRequireTLS") ?? false,
-												servername: form.watch("systemEmailTLSServername") || "",
-											},
-										},
-										null,
-										2
-									)}
-								</code>
-							</Box>
+							{(() => {
+								const address = form.watch("systemEmailAddress") || "";
+								const displayName = form.watch("systemEmailDisplayName")?.trim();
+								return (
+									<>
+										<Box
+											component="pre"
+											p={2}
+											borderRadius={theme.shape.borderRadius}
+											bgcolor={theme.palette.action.hover}
+											sx={{
+												fontFamily: theme.typography.fontFamilyMonospace,
+												overflow: "auto",
+											}}
+										>
+											<code>
+												{JSON.stringify(
+													{
+														host: form.watch("systemEmailHost") || "",
+														port: form.watch("systemEmailPort") || "",
+														secure: form.watch("systemEmailSecure") ?? false,
+														auth: {
+															user: form.watch("systemEmailUser") || address,
+															pass: "<your_password>",
+														},
+														name: form.watch("systemEmailConnectionHost") || "localhost",
+														pool: form.watch("systemEmailPool") ?? false,
+														tls: {
+															rejectUnauthorized:
+																form.watch("systemEmailRejectUnauthorized") ?? true,
+															ignoreTLS: form.watch("systemEmailIgnoreTLS") ?? false,
+															requireTLS: form.watch("systemEmailRequireTLS") ?? false,
+															servername: form.watch("systemEmailTLSServername") || "",
+														},
+													},
+													null,
+													2
+												)}
+											</code>
+										</Box>
+										{address && (
+											<Box
+												component="pre"
+												p={2}
+												borderRadius={theme.shape.borderRadius}
+												bgcolor={theme.palette.action.hover}
+												sx={{
+													fontFamily: theme.typography.fontFamilyMonospace,
+													overflow: "auto",
+												}}
+											>
+												<code>
+													{`From: ${displayName ? `"${displayName}" <${address}>` : address}`}
+												</code>
+											</Box>
+										)}
+									</>
+								);
+							})()}
 						</Stack>
 					}
 					rightContent={
@@ -680,6 +704,24 @@ export const SettingsPage = () => {
 								)}
 							/>
 
+							{/* Email Display Name (Optional) */}
+							<Controller
+								name="systemEmailDisplayName"
+								control={form.control}
+								render={({ field, fieldState }) => (
+									<TextField
+										{...field}
+										value={field.value ?? ""}
+										fieldLabel={t("pages.settings.form.email.option.displayName.label")}
+										placeholder={t(
+											"pages.settings.form.email.option.displayName.placeholder"
+										)}
+										error={!!fieldState.error}
+										helperText={fieldState.error?.message}
+									/>
+								)}
+							/>
+
 							{/* Email User (Optional) */}
 							<Controller
 								name="systemEmailUser"
@@ -974,7 +1016,13 @@ export const SettingsPage = () => {
 					setIsDemoMonitorsDialogOpen(false);
 				}}
 				loading={isDeletingAllMonitors}
-			/>
+				confirmColor="error"
+				confirmText={t("common.buttons.removeMonitors")}
+			>
+				<Typography variant="body1">
+					{t("pages.settings.form.removeMonitors.dialog.paragraph")}
+				</Typography>
+			</Dialog>
 
 			<Stack
 				direction="row"

client/src/Pages/StatusPage/Create/Components/ThemePicker.tsx

@@ -0,0 +1,66 @@
+import { useTranslation } from "react-i18next";
+import Stack from "@mui/material/Stack";
+import RadioGroup from "@mui/material/RadioGroup";
+import MenuItem from "@mui/material/MenuItem";
+import { useTheme } from "@mui/material/styles";
+import { RadioWithDescription, Select } from "@/Components/inputs";
+import {
+	STATUS_PAGE_THEMES,
+	STATUS_PAGE_THEME_MODES,
+	type StatusPageTheme,
+	type StatusPageThemeMode,
+} from "@/Types/StatusPage";
+
+interface Props {
+	theme: StatusPageTheme;
+	themeMode: StatusPageThemeMode;
+	onThemeChange: (value: StatusPageTheme) => void;
+	onThemeModeChange: (value: StatusPageThemeMode) => void;
+}
+
+export const ThemePicker = ({
+	theme,
+	themeMode,
+	onThemeChange,
+	onThemeModeChange,
+}: Props) => {
+	const { t } = useTranslation();
+	const muiTheme = useTheme();
+
+	return (
+		<Stack spacing={muiTheme.spacing(6)}>
+			<RadioGroup
+				value={theme}
+				onChange={(_, value) => onThemeChange(value as StatusPageTheme)}
+			>
+				<Stack spacing={muiTheme.spacing(4)}>
+					{STATUS_PAGE_THEMES.map((option) => (
+						<RadioWithDescription
+							key={option}
+							value={option}
+							label={t(`pages.statusPages.form.theme.options.${option}.name`)}
+							description={t(
+								`pages.statusPages.form.theme.options.${option}.description`
+							)}
+						/>
+					))}
+				</Stack>
+			</RadioGroup>
+
+			<Select
+				fieldLabel={t("pages.statusPages.form.themeMode.label")}
+				value={themeMode}
+				onChange={(e) => onThemeModeChange(e.target.value as StatusPageThemeMode)}
+			>
+				{STATUS_PAGE_THEME_MODES.map((mode) => (
+					<MenuItem
+						key={mode}
+						value={mode}
+					>
+						{t(`pages.statusPages.form.themeMode.${mode}`)}
+					</MenuItem>
+				))}
+			</Select>
+		</Stack>
+	);
+};

client/src/Pages/StatusPage/Create/index.tsx

@@ -1,4 +1,4 @@
-import { BasePage, ConfigBox } from "@/Components/design-elements";
+import { BasePage, ConfigBox, StepProgress } from "@/Components/design-elements";
 import Stack from "@mui/material/Stack";
 import { logger } from "@/Utils/logger";
 import { SPACING, LAYOUT } from "@/Utils/Theme/constants";
@@ -26,14 +26,17 @@ import { useForm, Controller } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useStatusPageForm } from "@/Hooks/useStatusPageForm";
 import type { StatusPageFormData } from "@/Validation/statusPage";
+import { statusPageStepCount, statusPageStepFieldsFor } from "@/Validation/statusPage";
 import { useGet, usePost, usePut, useDelete } from "@/Hooks/UseApi";
 import type { Monitor } from "@/Types/Monitor";
 import type { MonitorDisplayType, StatusPageResponse } from "@/Types/StatusPage";
 import { getMonitorTypeLabel } from "@/Types/StatusPage";
 import timezones from "@/Utils/timezones.json";
 import { useNavigate, useParams } from "react-router-dom";
+import { mutate } from "swr";
 import axios from "axios";
 import { HeaderConfigStatusControls } from "./Components/HeaderConfigStatusControls";
+import { ThemePicker } from "./Components/ThemePicker";
 
 const monitorsUrl = (() => {
 	const params = new URLSearchParams();
@@ -48,6 +51,9 @@ interface TimezoneOption {
 	name: string;
 }
 
+const buildStatusPageKey = (slug: string | null | undefined) =>
+	slug ? `/status-page/${slug}?type=uptime&type=infrastructure` : null;
+
 const CreateStatusPage = () => {
 	const theme = useTheme();
 	const { t } = useTranslation();
@@ -58,9 +64,7 @@ const CreateStatusPage = () => {
 
 	// Fetch existing status page data when configuring
 	const { data: statusPageData, isLoading: isLoadingStatusPage } =
-		useGet<StatusPageResponse>(
-			isCreate ? null : `/status-page/${url}?type=uptime&type=infrastructure`
-		);
+		useGet<StatusPageResponse>(isCreate ? null : buildStatusPageKey(url));
 
 	const { data: monitorsResponse } = useGet<Monitor[]>(monitorsUrl);
 	const monitors = monitorsResponse ?? [];
@@ -83,13 +87,27 @@ const CreateStatusPage = () => {
 		defaultValues: defaults,
 	});
 
-	const { control, reset, handleSubmit } = form;
+	const { control, reset, handleSubmit, trigger } = form;
 
 	// Reset form when defaults change (from fetched data)
 	useEffect(() => {
 		reset(defaults);
 	}, [defaults, reset]);
 
+	// Multi-step wizard, create only. The configure (edit) flow keeps the flat
+	// form, where showStep() is always true.
+	const [currentStep, setCurrentStep] = useState(0);
+	const showStep = (step: number) => !isCreate || currentStep === step;
+	const totalSteps = statusPageStepCount();
+
+	const handleNext = async () => {
+		const isValid = await trigger(statusPageStepFieldsFor(currentStep));
+		if (isValid) {
+			setCurrentStep((step) => step + 1);
+		}
+	};
+	const handleBack = () => setCurrentStep((step) => step - 1);
+
 	const watchedMonitorIds: string[] = form.watch("monitors") ?? [];
 	const computedTypes: MonitorDisplayType[] = useMemo(() => {
 		const selectedMonitors = (watchedMonitorIds ?? [])
@@ -133,12 +151,20 @@ const CreateStatusPage = () => {
 		fd.append("isPublished", String(data.isPublished));
 		if (data.companyName) fd.append("companyName", data.companyName);
 		if (data.url) fd.append("url", data.url);
+		if (data.customDomain !== undefined && data.customDomain !== null) {
+			fd.append("customDomain", data.customDomain);
+		} else {
+			fd.append("customDomain", "");
+		}
 		if (data.timezone) fd.append("timezone", data.timezone);
 		if (data.color) fd.append("color", data.color);
 		fd.append("showCharts", String(data.showCharts));
 		fd.append("showUptimePercentage", String(data.showUptimePercentage));
 		fd.append("showAdminLoginLink", String(data.showAdminLoginLink));
 		fd.append("showInfrastructure", String(data.showInfrastructure));
+		fd.append("customCSS", data.customCSS ?? "");
+		if (data.theme) fd.append("theme", data.theme);
+		if (data.themeMode) fd.append("themeMode", data.themeMode);
 
 		data.monitors.forEach((monitorId) => {
 			fd.append("monitors[]", monitorId);
@@ -178,6 +204,10 @@ const CreateStatusPage = () => {
 		}
 
 		if (result) {
+			await mutate(buildStatusPageKey(data.url));
+			if (!isCreate && url !== data.url) {
+				await mutate(buildStatusPageKey(url));
+			}
 			navigate(`/status/${data.url}`);
 		}
 	};
@@ -191,291 +221,382 @@ const CreateStatusPage = () => {
 			onSubmit={handleSubmit(onSubmit, onError)}
 		>
 			{!isCreate && <HeaderConfigStatusControls onDelete={handleDeleteClick} />}
-			<ConfigBox
-				title={t("pages.statusPages.form.access.title")}
-				subtitle={t("pages.statusPages.form.access.description")}
-				rightContent={
-					<Stack
-						direction="row"
-						alignItems="center"
-						spacing={theme.spacing(SPACING.MD)}
-					>
-						<Controller
-							name="isPublished"
-							control={control}
-							render={({ field }) => (
-								<SwitchComponent
-									checked={field.value ?? false}
-									onChange={(e) => field.onChange(e.target.checked)}
-								/>
-							)}
-						/>
-						<Typography>
-							{t("pages.statusPages.form.access.option.published.name")}
-						</Typography>
-					</Stack>
-				}
-			/>
-			<ConfigBox
-				title={t("pages.statusPages.form.basicInfo.title")}
-				subtitle={t("pages.statusPages.form.basicInfo.description")}
-				rightContent={
-					<Stack spacing={theme.spacing(LAYOUT.MD)}>
-						<Controller
-							name="companyName"
-							control={control}
-							render={({ field, fieldState }) => (
-								<TextField
-									{...field}
-									fieldLabel={t("pages.statusPages.form.basicInfo.option.name.label")}
-									placeholder={t(
-										"pages.statusPages.form.basicInfo.option.name.placeholder"
-									)}
-									error={!!fieldState.error}
-									helperText={fieldState.error?.message}
-								/>
-							)}
-						/>
-						<Controller
-							name="url"
-							control={control}
-							render={({ field, fieldState }) => (
-								<TextField
-									{...field}
-									fieldLabel={t("pages.statusPages.form.basicInfo.option.url.label")}
-									placeholder={t(
-										"pages.statusPages.form.basicInfo.option.url.placeholder"
-									)}
-									error={!!fieldState.error}
-									helperText={fieldState.error?.message}
-								/>
-							)}
-						/>
-					</Stack>
-				}
-			/>
-			<ConfigBox
-				title={t("pages.statusPages.form.monitors.title")}
-				subtitle={t("pages.statusPages.form.monitors.description")}
-				rightContent={
-					<Controller
-						name="monitors"
-						control={control}
-						render={({ field, fieldState }) => {
-							const selectedMonitors = field.value
-								.map((id: string) => monitors.find((m) => m.id === id))
-								.filter((m): m is Monitor => m !== undefined);
-
-							const handleDragEnd = (result: DropResult) => {
-								if (!result.destination) return;
-								const reordered = Array.from(field.value);
-								const [removed] = reordered.splice(result.source.index, 1);
-								reordered.splice(result.destination.index, 0, removed);
-								field.onChange(reordered);
-							};
-
-							return (
-								<Stack spacing={theme.spacing(LAYOUT.MD)}>
-									<Autocomplete
-										multiple
-										options={monitors}
-										getOptionLabel={(option: Monitor) => option.name}
-										value={selectedMonitors}
-										onChange={(_, newValue) => {
-											field.onChange(newValue.map((m: Monitor) => m.id));
-										}}
-										fieldLabel={t(
-											"pages.statusPages.form.monitors.option.monitors.label"
-										)}
-										renderInput={(params) => (
-											<TextField
-												{...params}
-												placeholder={
-													selectedMonitors.length === 0
-														? t(
-																"pages.statusPages.form.monitors.option.monitors.placeholder"
-															)
-														: ""
-												}
-												error={!!fieldState.error}
-												helperText={fieldState.error?.message}
-											/>
-										)}
-									/>
-									{selectedMonitors.length > 0 && (
-										<DragDropContext onDragEnd={handleDragEnd}>
-											<Droppable droppableId="monitors-list">
-												{(provided) => (
-													<Stack
-														{...provided.droppableProps}
-														ref={provided.innerRef}
-													>
-														{selectedMonitors.map((monitor, index) => (
-															<Draggable
-																key={monitor.id}
-																draggableId={monitor.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}
-																		sx={{
-																			border: `1px solid ${theme.palette.divider}`,
-																			cursor: "grab",
-																			"&:active": { cursor: "grabbing" },
-																		}}
-																	>
-																		<GripVertical size={20} />
-																		<Typography
-																			flexGrow={1}
-																		>{`${monitor.name} (${getMonitorTypeLabel(monitor.type, t)})`}</Typography>
-																		<IconButton
-																			size="small"
-																			onClick={() => {
-																				field.onChange(
-																					field.value.filter(
-																						(id: string) => id !== monitor.id
-																					)
-																				);
-																			}}
-																			aria-label="Remove monitor"
-																		>
-																			<Trash2 size={16} />
-																		</IconButton>
-																	</Stack>
-																)}
-															</Draggable>
-														))}
-														{provided.placeholder}
-													</Stack>
-												)}
-											</Droppable>
-										</DragDropContext>
-									)}
-								</Stack>
-							);
-						}}
-					/>
-				}
-			/>
-			<ConfigBox
-				title={t("pages.statusPages.form.timezone.title")}
-				subtitle={t("pages.statusPages.form.timezone.description")}
-				rightContent={
-					<Controller
-						name="timezone"
-						control={control}
-						render={({ field }) => (
-							<Autocomplete
-								options={timezones}
-								getOptionLabel={(option: TimezoneOption) => option.name}
-								value={
-									timezones.find((tz: TimezoneOption) => tz._id === field.value) ?? null
-								}
-								onChange={(_, newValue: TimezoneOption | null) => {
-									field.onChange(newValue?._id ?? "");
-								}}
-								fieldLabel={t("pages.statusPages.form.timezone.option.timezone.label")}
-								renderInput={(params) => (
-									<TextField
-										{...params}
-										placeholder={t(
-											"pages.statusPages.form.timezone.option.timezone.placeholder"
-										)}
+			{isCreate && (
+				<StepProgress
+					steps={totalSteps}
+					current={currentStep}
+				/>
+			)}
+			{showStep(0) && (
+				<ConfigBox
+					title={t("pages.statusPages.form.access.title")}
+					subtitle={t("pages.statusPages.form.access.description")}
+					rightContent={
+						<Stack
+							direction="row"
+							alignItems="center"
+							spacing={theme.spacing(SPACING.MD)}
+						>
+							<Controller
+								name="isPublished"
+								control={control}
+								render={({ field }) => (
+									<SwitchComponent
+										checked={field.value ?? false}
+										onChange={(e) => field.onChange(e.target.checked)}
 									/>
 								)}
 							/>
-						)}
-					/>
-				}
-			/>
-			<ConfigBox
-				title={t("pages.statusPages.form.appearance.title")}
-				subtitle={t("pages.statusPages.form.appearance.description")}
-				rightContent={
-					<Stack spacing={theme.spacing(LAYOUT.MD)}>
-						<Stack alignItems={"center"}>
+							<Typography>
+								{t("pages.statusPages.form.access.option.published.name")}
+							</Typography>
+						</Stack>
+					}
+				/>
+			)}
+			{showStep(0) && (
+				<ConfigBox
+					title={t("pages.statusPages.form.basicInfo.title")}
+					subtitle={t("pages.statusPages.form.basicInfo.description")}
+					rightContent={
+						<Stack spacing={theme.spacing(LAYOUT.MD)}>
 							<Controller
-								name="logo"
+								name="companyName"
 								control={control}
-								render={({ field }) => (
-									<ImageUpload
-										src={field.value?.data}
-										onChange={(file) => {
-											if (file) {
-												field.onChange({
-													data: file.src,
-													contentType: file.file.type,
-												});
-											} else {
-												field.onChange(null);
-											}
-										}}
+								render={({ field, fieldState }) => (
+									<TextField
+										{...field}
+										fieldLabel={t("pages.statusPages.form.basicInfo.option.name.label")}
+										placeholder={t(
+											"pages.statusPages.form.basicInfo.option.name.placeholder"
+										)}
+										error={!!fieldState.error}
+										helperText={fieldState.error?.message}
+									/>
+								)}
+							/>
+							<Controller
+								name="url"
+								control={control}
+								render={({ field, fieldState }) => (
+									<TextField
+										{...field}
+										fieldLabel={t("pages.statusPages.form.basicInfo.option.url.label")}
+										placeholder={t(
+											"pages.statusPages.form.basicInfo.option.url.placeholder"
+										)}
+										error={!!fieldState.error}
+										helperText={fieldState.error?.message}
+									/>
+								)}
+							/>
+							<Controller
+								name="customDomain"
+								control={control}
+								render={({ field, fieldState }) => (
+									<TextField
+										{...field}
+										value={field.value ?? ""}
+										fieldLabel={t(
+											"pages.statusPages.form.basicInfo.option.customDomain.label"
+										)}
+										placeholder={t(
+											"pages.statusPages.form.basicInfo.option.customDomain.placeholder"
+										)}
+										helperText={
+											fieldState.error?.message ||
+											t("pages.statusPages.form.basicInfo.option.customDomain.helper")
+										}
+										error={!!fieldState.error}
 									/>
 								)}
 							/>
 						</Stack>
+					}
+				/>
+			)}
+			{showStep(0) && (
+				<ConfigBox
+					title={t("pages.statusPages.form.monitors.title")}
+					subtitle={t("pages.statusPages.form.monitors.description")}
+					rightContent={
 						<Controller
-							name="color"
+							name="monitors"
 							control={control}
-							render={({ field }) => (
-								<ColorInput
-									format="hex"
-									value={field.value}
-									onChange={field.onChange}
-									fieldLabel={t("pages.statusPages.form.appearance.option.color.label")}
-								/>
-							)}
-						/>
-					</Stack>
-				}
-			/>
-			<ConfigBox
-				title={t("pages.statusPages.form.features.title")}
-				subtitle={t("pages.statusPages.form.features.description")}
-				rightContent={
-					<Stack spacing={theme.spacing(LAYOUT.MD)}>
-						<Controller
-							name="showCharts"
-							control={control}
-							render={({ field }) => (
-								<FormControlLabel
-									control={
-										<Checkbox
-											checked={field.value}
-											onChange={field.onChange}
+							render={({ field, fieldState }) => {
+								const selectedMonitors = field.value
+									.map((id: string) => monitors.find((m) => m.id === id))
+									.filter((m): m is Monitor => m !== undefined);
+
+								const handleDragEnd = (result: DropResult) => {
+									if (!result.destination) return;
+									const reordered = Array.from(field.value);
+									const [removed] = reordered.splice(result.source.index, 1);
+									reordered.splice(result.destination.index, 0, removed);
+									field.onChange(reordered);
+								};
+
+								return (
+									<Stack spacing={theme.spacing(LAYOUT.MD)}>
+										<Autocomplete
+											multiple
+											options={monitors}
+											getOptionLabel={(option: Monitor) => option.name}
+											value={selectedMonitors}
+											onChange={(_, newValue) => {
+												field.onChange(newValue.map((m: Monitor) => m.id));
+											}}
+											fieldLabel={t(
+												"pages.statusPages.form.monitors.option.monitors.label"
+											)}
+											renderInput={(params) => (
+												<TextField
+													{...params}
+													placeholder={
+														selectedMonitors.length === 0
+															? t(
+																	"pages.statusPages.form.monitors.option.monitors.placeholder"
+																)
+															: ""
+													}
+													error={!!fieldState.error}
+													helperText={fieldState.error?.message}
+												/>
+											)}
 										/>
-									}
-									label={t("pages.statusPages.form.features.option.showCharts.label")}
-								/>
-							)}
+										{selectedMonitors.length > 0 && (
+											<DragDropContext onDragEnd={handleDragEnd}>
+												<Droppable droppableId="monitors-list">
+													{(provided) => (
+														<Stack
+															{...provided.droppableProps}
+															ref={provided.innerRef}
+														>
+															{selectedMonitors.map((monitor, index) => (
+																<Draggable
+																	key={monitor.id}
+																	draggableId={monitor.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}
+																			sx={{
+																				border: `1px solid ${theme.palette.divider}`,
+																				cursor: "grab",
+																				"&:active": { cursor: "grabbing" },
+																			}}
+																		>
+																			<GripVertical size={20} />
+																			<Typography
+																				flexGrow={1}
+																			>{`${monitor.name} (${getMonitorTypeLabel(monitor.type, t)})`}</Typography>
+																			<IconButton
+																				size="small"
+																				onClick={() => {
+																					field.onChange(
+																						field.value.filter(
+																							(id: string) => id !== monitor.id
+																						)
+																					);
+																				}}
+																				aria-label="Remove monitor"
+																			>
+																				<Trash2 size={16} />
+																			</IconButton>
+																		</Stack>
+																	)}
+																</Draggable>
+															))}
+															{provided.placeholder}
+														</Stack>
+													)}
+												</Droppable>
+											</DragDropContext>
+										)}
+									</Stack>
+								);
+							}}
 						/>
+					}
+				/>
+			)}
+			{showStep(0) && (
+				<ConfigBox
+					title={t("pages.statusPages.form.timezone.title")}
+					subtitle={t("pages.statusPages.form.timezone.description")}
+					rightContent={
 						<Controller
-							name="showInfrastructure"
+							name="timezone"
 							control={control}
 							render={({ field }) => (
-								<FormControlLabel
-									control={
-										<Checkbox
-											checked={field.value}
-											onChange={field.onChange}
-										/>
+								<Autocomplete
+									options={timezones}
+									getOptionLabel={(option: TimezoneOption) => option.name}
+									value={
+										timezones.find((tz: TimezoneOption) => tz._id === field.value) ?? null
 									}
-									label={t(
-										"pages.statusPages.form.features.option.showInfrastructure.label"
+									onChange={(_, newValue: TimezoneOption | null) => {
+										field.onChange(newValue?._id ?? "");
+									}}
+									fieldLabel={t("pages.statusPages.form.timezone.option.timezone.label")}
+									renderInput={(params) => (
+										<TextField
+											{...params}
+											placeholder={t(
+												"pages.statusPages.form.timezone.option.timezone.placeholder"
+											)}
+										/>
 									)}
 								/>
 							)}
 						/>
-						{/* <Controller
+					}
+				/>
+			)}
+			{showStep(1) && (
+				<ConfigBox
+					title={t("pages.statusPages.form.appearance.title")}
+					subtitle={t("pages.statusPages.form.appearance.description")}
+					rightContent={
+						<Stack spacing={theme.spacing(LAYOUT.MD)}>
+							<Stack alignItems={"center"}>
+								<Controller
+									name="logo"
+									control={control}
+									render={({ field }) => (
+										<ImageUpload
+											src={field.value?.data}
+											onChange={(file) => {
+												if (file) {
+													field.onChange({
+														data: file.src,
+														contentType: file.file.type,
+													});
+												} else {
+													field.onChange(null);
+												}
+											}}
+										/>
+									)}
+								/>
+							</Stack>
+							<Controller
+								name="color"
+								control={control}
+								render={({ field }) => (
+									<ColorInput
+										format="hex"
+										value={field.value}
+										onChange={field.onChange}
+										fieldLabel={t("pages.statusPages.form.appearance.option.color.label")}
+									/>
+								)}
+							/>
+						</Stack>
+					}
+				/>
+			)}
+			{showStep(1) && (
+				<ConfigBox
+					title={t("pages.statusPages.form.theme.title")}
+					subtitle={t("pages.statusPages.form.theme.description")}
+					rightContent={
+						<Controller
+							name="theme"
+							control={control}
+							render={({ field: themeField }) => (
+								<Controller
+									name="themeMode"
+									control={control}
+									render={({ field: modeField }) => (
+										<ThemePicker
+											theme={themeField.value ?? "refined"}
+											themeMode={modeField.value ?? "auto"}
+											onThemeChange={themeField.onChange}
+											onThemeModeChange={modeField.onChange}
+										/>
+									)}
+								/>
+							)}
+						/>
+					}
+				/>
+			)}
+			{showStep(1) && (
+				<ConfigBox
+					title={t("pages.statusPages.form.customCSS.title")}
+					subtitle={t("pages.statusPages.form.customCSS.description")}
+					rightContent={
+						<Controller
+							name="customCSS"
+							control={control}
+							render={({ field, fieldState }) => (
+								<TextField
+									{...field}
+									multiline
+									rows={8}
+									fieldLabel={t(
+										"pages.statusPages.form.customCSS.option.customCSS.label"
+									)}
+									placeholder={t(
+										"pages.statusPages.form.customCSS.option.customCSS.placeholder"
+									)}
+									error={!!fieldState.error}
+									helperText={fieldState.error?.message}
+								/>
+							)}
+						/>
+					}
+				/>
+			)}
+			{showStep(1) && (
+				<ConfigBox
+					title={t("pages.statusPages.form.features.title")}
+					subtitle={t("pages.statusPages.form.features.description")}
+					rightContent={
+						<Stack spacing={theme.spacing(LAYOUT.MD)}>
+							<Controller
+								name="showCharts"
+								control={control}
+								render={({ field }) => (
+									<FormControlLabel
+										control={
+											<Checkbox
+												checked={field.value}
+												onChange={field.onChange}
+											/>
+										}
+										label={t("pages.statusPages.form.features.option.showCharts.label")}
+									/>
+								)}
+							/>
+							<Controller
+								name="showInfrastructure"
+								control={control}
+								render={({ field }) => (
+									<FormControlLabel
+										control={
+											<Checkbox
+												checked={field.value}
+												onChange={field.onChange}
+											/>
+										}
+										label={t(
+											"pages.statusPages.form.features.option.showInfrastructure.label"
+										)}
+									/>
+								)}
+							/>
+							{/* <Controller
 							name="showUptimePercentage"
 							control={control}
 							render={({ field }) => (
@@ -509,21 +630,46 @@ const CreateStatusPage = () => {
 								/>
 							)}
 						/> */}
-					</Stack>
-				}
-			/>
+						</Stack>
+					}
+				/>
+			)}
 			<Stack
 				direction="row"
-				justifyContent="flex-end"
+				justifyContent={isCreate ? "space-between" : "flex-end"}
 			>
-				<Button
-					loading={isSubmitting}
-					type="submit"
-					variant="contained"
-					color="primary"
-				>
-					{t("common.buttons.save")}
-				</Button>
+				{isCreate && (
+					<Button
+						type="button"
+						variant="outlined"
+						color="secondary"
+						disabled={currentStep === 0}
+						onClick={handleBack}
+					>
+						{t("common.buttons.back")}
+					</Button>
+				)}
+				{isCreate && currentStep < totalSteps - 1 ? (
+					<Button
+						key="wizard-next"
+						type="button"
+						variant="contained"
+						color="primary"
+						onClick={handleNext}
+					>
+						{t("common.buttons.next")}
+					</Button>
+				) : (
+					<Button
+						key="wizard-save"
+						loading={isSubmitting}
+						type="submit"
+						variant="contained"
+						color="primary"
+					>
+						{t("common.buttons.save")}
+					</Button>
+				)}
 			</Stack>
 			<Dialog
 				open={isDeleteDialogOpen}

client/src/Pages/StatusPage/Status/Components/HeaderStatusPageControls.tsx

@@ -8,7 +8,8 @@ import { Settings, ExternalLink } from "lucide-react";
 import { useTheme } from "@mui/material";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
-import type { StatusPage } from "@/Types/StatusPage";
+import { type StatusPage } from "@/Types/StatusPage";
+import { getStatusPagePublicUrl } from "@/Utils/statusPageUrl";
 
 interface HeaderStatusPageControlsProps {
 	isAdmin: boolean;
@@ -50,7 +51,7 @@ export const HeaderStatusPageControls = ({
 						<Typography
 							onClick={() => {
 								window.open(
-									`/status/public/${statusPage.url}`,
+									getStatusPagePublicUrl(statusPage),
 									"_blank",
 									"noopener,noreferrer"
 								);

client/src/Pages/StatusPage/Status/Components/InfrastructureMetrics.tsx

@@ -1,246 +0,0 @@
-import Stack from "@mui/material/Stack";
-import Typography from "@mui/material/Typography";
-import { Gauge } from "@/Components/design-elements";
-import { useTheme } from "@mui/material/styles";
-import { useTranslation } from "react-i18next";
-import prettyBytes from "pretty-bytes";
-import type { Monitor } from "@/Types/Monitor";
-import Grid from "@mui/material/Grid";
-import useMediaQuery from "@mui/material/useMediaQuery";
-import Box from "@mui/material/Box";
-import { LAYOUT, SPACING } from "@/Utils/Theme/constants";
-
-const GAUGE_RADIUS = 60;
-const GAUGE_STROKE_WIDTH = 12;
-const PERCENTAGE_MULTIPLIER = 100;
-
-interface StatusPageMonitor extends Monitor {
-	checks?: Monitor["recentChecks"];
-}
-
-interface MetricDetail {
-	label: string;
-	value: string;
-}
-
-interface MetricConfig {
-	key: string;
-	label: string;
-	hasData: boolean;
-	progress: number;
-	details: MetricDetail[];
-}
-
-const MetricDetailRow = ({ label, value }: MetricDetail) => {
-	const theme = useTheme();
-	return (
-		<Stack
-			direction="row"
-			justifyContent="space-between"
-		>
-			<Typography
-				variant="body2"
-				color={theme.palette.text.secondary}
-			>
-				{label}
-			</Typography>
-			<Typography variant="body2">{value}</Typography>
-		</Stack>
-	);
-};
-
-interface MetricItemProps {
-	label: string;
-	progress: number;
-	details?: MetricDetail[];
-}
-
-const MetricItem = ({ label, progress, details }: MetricItemProps) => {
-	const theme = useTheme();
-	const isSmall = useMediaQuery(theme.breakpoints.down("md"));
-	return (
-		<Grid
-			size={isSmall ? 12 : 4}
-			sx={{
-				display: "flex",
-				flexDirection: "column",
-				alignItems: "center",
-				textAlign: "center",
-				gap: theme.spacing(SPACING.LG),
-				padding: theme.spacing(LAYOUT.XS),
-				borderRight: isSmall ? "none" : `1px solid ${theme.palette.divider}`,
-				borderBottom: isSmall ? `1px solid ${theme.palette.divider}` : "none",
-				"&:last-child": {
-					borderRight: "none",
-					borderBottom: "none",
-					paddingBottom: theme.spacing(SPACING.LG),
-				},
-			}}
-		>
-			<Box
-				display="flex"
-				flexDirection="column"
-				alignItems="center"
-			>
-				<Gauge
-					progress={progress}
-					radius={GAUGE_RADIUS}
-					strokeWidth={GAUGE_STROKE_WIDTH}
-				/>
-				<Typography variant="body2">{label}</Typography>
-			</Box>
-			{details && details.length > 0 && (
-				<Box
-					width="100%"
-					paddingX={theme.spacing(LAYOUT.LG)}
-				>
-					{details.map((detail) => (
-						<MetricDetailRow
-							key={detail.label}
-							label={detail.label}
-							value={detail.value}
-						/>
-					))}
-				</Box>
-			)}
-		</Grid>
-	);
-};
-
-type LatestCheck = NonNullable<Monitor["recentChecks"]>[number];
-
-const buildCpuMetric = (
-	check: LatestCheck,
-	t: (key: string) => string
-): MetricConfig | null => {
-	if (!check.cpu || typeof check.cpu.usage_percent !== "number") {
-		return null;
-	}
-	const usagePercent = (check.cpu.usage_percent ?? 0) * PERCENTAGE_MULTIPLIER;
-	return {
-		key: "cpu",
-		label: t("pages.statusPages.monitorsList.infrastructure.cpu"),
-		hasData: true,
-		progress: usagePercent,
-		details: [
-			{
-				label: t("pages.statusPages.monitorsList.infrastructure.usage"),
-				value: `${usagePercent.toFixed(2)}%`,
-			},
-		],
-	};
-};
-
-const buildMemoryMetric = (
-	check: LatestCheck,
-	t: (key: string) => string
-): MetricConfig | null => {
-	if (
-		!check.memory ||
-		typeof check.memory.usage_percent !== "number" ||
-		typeof check.memory.used_bytes !== "number" ||
-		typeof check.memory.total_bytes !== "number"
-	) {
-		return null;
-	}
-	return {
-		key: "memory",
-		label: t("pages.statusPages.monitorsList.infrastructure.memory"),
-		hasData: true,
-		progress: (check.memory.usage_percent ?? 0) * PERCENTAGE_MULTIPLIER,
-		details: [
-			{
-				label: t("pages.statusPages.monitorsList.infrastructure.used"),
-				value: prettyBytes(check.memory.used_bytes ?? 0),
-			},
-			{
-				label: t("pages.statusPages.monitorsList.infrastructure.total"),
-				value: prettyBytes(check.memory.total_bytes ?? 0),
-			},
-		],
-	};
-};
-
-const buildDiskMetric = (
-	check: LatestCheck,
-	t: (key: string) => string
-): MetricConfig | null => {
-	if (!check.disk || check.disk.length === 0) {
-		return null;
-	}
-	const disks = check.disk;
-	const avgUsagePercent =
-		(disks.reduce((acc, disk) => acc + (disk?.usage_percent ?? 0), 0) / disks.length) *
-		PERCENTAGE_MULTIPLIER;
-	const totalUsedBytes = disks.reduce((acc, disk) => acc + (disk?.used_bytes ?? 0), 0);
-	const totalTotalBytes = disks.reduce((acc, disk) => acc + (disk?.total_bytes ?? 0), 0);
-
-	return {
-		key: "disk",
-		label: t("pages.statusPages.monitorsList.infrastructure.disk"),
-		hasData: true,
-		progress: avgUsagePercent,
-		details: [
-			{
-				label: t("pages.statusPages.monitorsList.infrastructure.used"),
-				value: prettyBytes(totalUsedBytes),
-			},
-			{
-				label: t("pages.statusPages.monitorsList.infrastructure.total"),
-				value: prettyBytes(totalTotalBytes),
-			},
-		],
-	};
-};
-
-export const InfrastructureMetrics = ({ monitor }: { monitor: StatusPageMonitor }) => {
-	const theme = useTheme();
-	const { t } = useTranslation();
-
-	const latestCheck = monitor.recentChecks?.[0] ?? monitor.checks?.[0];
-
-	if (!latestCheck) {
-		return (
-			<Typography
-				variant="body2"
-				color={theme.palette.text.secondary}
-			>
-				{t("pages.statusPages.monitorsList.noData")}
-			</Typography>
-		);
-	}
-
-	const metrics: MetricConfig[] = [
-		buildCpuMetric(latestCheck, t),
-		buildMemoryMetric(latestCheck, t),
-		buildDiskMetric(latestCheck, t),
-	].filter((m): m is MetricConfig => m !== null);
-
-	if (metrics.length === 0) {
-		return (
-			<Typography
-				variant="body2"
-				color={theme.palette.text.secondary}
-			>
-				{t("pages.statusPages.monitorsList.noData")}
-			</Typography>
-		);
-	}
-
-	return (
-		<Grid
-			container
-			alignItems="center"
-			padding={theme.spacing(LAYOUT.XS)}
-		>
-			{metrics.map(({ key, label, progress, details }) => (
-				<MetricItem
-					key={key}
-					label={label}
-					progress={progress}
-					details={details}
-				/>
-			))}
-		</Grid>
-	);
-};

client/src/Pages/StatusPage/Status/Components/MonitorsList.tsx

@@ -1,171 +0,0 @@
-import Stack from "@mui/material/Stack";
-import { useTranslation } from "react-i18next";
-import Box from "@mui/material/Box";
-import Typography from "@mui/material/Typography";
-import { HistogramResponseTime, HeatmapResponseTime } from "@/Components/common";
-import { StatusLabel, BaseBox } from "@/Components/design-elements";
-import { SwitchComponent } from "@/Components/inputs";
-import { InfrastructureMetrics } from "@/Pages/StatusPage/Status/Components/InfrastructureMetrics";
-
-import { useTheme, type Theme } from "@mui/material/styles";
-import { useSelector } from "react-redux";
-import { useState } from "react";
-import type { Monitor } from "@/Types/Monitor";
-import type { StatusPage } from "@/Types/StatusPage";
-import { getMonitorTypeLabel } from "@/Types/StatusPage";
-import type { RootState } from "@/Types/state";
-import { LAYOUT, SPACING } from "@/Utils/Theme/constants";
-
-interface StatusPageMonitor extends Monitor {
-	checks?: Monitor["recentChecks"];
-}
-
-interface MonitorsListProps {
-	statusPage: StatusPage;
-	monitors: StatusPageMonitor[];
-}
-
-const getMonitorBadgeStyles = (monitorType: string, theme: Theme) => {
-	const bg =
-		monitorType === "hardware" ? theme.palette.info.light : theme.palette.success.light;
-	return {
-		backgroundColor: bg,
-		color: theme.palette.background.paper,
-		padding: `${theme.spacing(SPACING.SM)} ${theme.spacing(SPACING.LG)}`,
-		borderRadius: theme.shape.borderRadius,
-	};
-};
-
-const MonitorHeader = ({
-	monitor,
-	showURL,
-}: {
-	monitor: StatusPageMonitor;
-	showURL: boolean;
-}) => {
-	const theme = useTheme();
-	const { t } = useTranslation();
-
-	return (
-		<Stack
-			direction="row"
-			alignItems="center"
-			justifyContent="space-between"
-			gap={theme.spacing(LAYOUT.XS)}
-			mb={theme.spacing(LAYOUT.XS)}
-		>
-			<Box sx={{ overflow: "hidden", minWidth: 0, flex: 1 }}>
-				<Stack
-					direction="row"
-					alignItems="center"
-					gap={theme.spacing(SPACING.LG)}
-					mb={theme.spacing(SPACING.SM)}
-				>
-					<Typography
-						variant="h6"
-						sx={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}
-					>
-						{monitor.name}
-					</Typography>
-					<Typography
-						variant="caption"
-						sx={getMonitorBadgeStyles(monitor.type ?? "", theme)}
-					>
-						{getMonitorTypeLabel(monitor.type, t)}
-					</Typography>
-				</Stack>
-				{showURL && monitor.url && (
-					<Typography
-						variant="body2"
-						color={theme.palette.text.secondary}
-						sx={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}
-					>
-						{monitor.url}
-					</Typography>
-				)}
-			</Box>
-			<StatusLabel status={monitor.status} />
-		</Stack>
-	);
-};
-
-const MonitorContent = ({
-	monitor,
-	statusPage,
-	chartType,
-}: {
-	monitor: StatusPageMonitor;
-	statusPage: StatusPage;
-	chartType: string;
-}) => {
-	const theme = useTheme();
-
-	if (monitor.type === "hardware") {
-		if (statusPage.showInfrastructure === false) return null;
-		return <InfrastructureMetrics monitor={monitor} />;
-	}
-
-	if (statusPage.showCharts === false) return null;
-
-	const checks = monitor.checks?.slice().reverse() ?? [];
-	return (
-		<Box sx={{ overflow: "hidden", minWidth: 0, flex: 1, mb: theme.spacing(SPACING.LG) }}>
-			{chartType === "histogram" ? (
-				<HistogramResponseTime
-					height={{ xs: 50, md: 100 }}
-					gap={{ xs: theme.spacing(SPACING.SM), md: theme.spacing(LAYOUT.SM) }}
-					checks={checks}
-				/>
-			) : (
-				<HeatmapResponseTime checks={checks} />
-			)}
-		</Box>
-	);
-};
-
-export const MonitorsList = ({ statusPage, monitors }: MonitorsListProps) => {
-	const theme = useTheme();
-	const { t } = useTranslation();
-	const showURL = useSelector((state: RootState) => state.ui?.showURL);
-	const [chartType, setChartType] = useState<"histogram" | "heatmap">("histogram");
-
-	return (
-		<Stack gap={theme.spacing(LAYOUT.MD)}>
-			{statusPage.showCharts && (
-				<Stack
-					direction="row"
-					alignItems="center"
-					gap={theme.spacing(LAYOUT.SM)}
-				>
-					<Typography>{t("pages.statusPages.monitorsList.chartTypeHeatmap")}</Typography>
-					<SwitchComponent
-						dualOption
-						value={chartType}
-						checked={chartType === "histogram"}
-						onChange={(e) => setChartType(e.target.checked ? "histogram" : "heatmap")}
-					/>
-					<Typography>
-						{t("pages.statusPages.monitorsList.chartTypeHistogram")}
-					</Typography>
-				</Stack>
-			)}
-
-			{monitors.map((monitor) => (
-				<BaseBox
-					key={monitor.id}
-					padding={theme.spacing(LAYOUT.MD)}
-				>
-					<MonitorHeader
-						monitor={monitor}
-						showURL={showURL}
-					/>
-					<MonitorContent
-						monitor={monitor}
-						statusPage={statusPage}
-						chartType={chartType}
-					/>
-				</BaseBox>
-			))}
-		</Stack>
-	);
-};

client/src/Pages/StatusPage/Status/Components/StatusBar.tsx

@@ -1,138 +0,0 @@
-import {
-	AlertTriangle,
-	CircleCheck,
-	CircleX,
-	Loader,
-	PauseCircle,
-	ShieldAlert,
-	Wrench,
-} from "lucide-react";
-import Stack from "@mui/material/Stack";
-import Typography from "@mui/material/Typography";
-
-import { useTranslation } from "react-i18next";
-import { useTheme } from "@mui/material";
-import type { Theme } from "@mui/material";
-import type { Monitor, MonitorStatus } from "@/Types/Monitor";
-
-interface StatusDisplay {
-	icon: JSX.Element;
-	msg?: string;
-	color?: string;
-}
-
-const getMonitorStatus = (monitors: Monitor[], theme: Theme, t: Function) => {
-	const monitorsStatus: StatusDisplay = {
-		icon: <AlertTriangle size={24} />,
-	};
-
-	// Handle empty monitors array
-	if (monitors.length === 0) {
-		monitorsStatus.msg = t("pages.statusPages.statusBar.noMonitors");
-		monitorsStatus.color = theme.palette.warning.main;
-		monitorsStatus.icon = <CircleX size={24} />;
-		return monitorsStatus;
-	}
-
-	const allOf = (...statuses: MonitorStatus[]) =>
-		monitors.every((m) => statuses.includes(m.status));
-	const someOf = (...statuses: MonitorStatus[]) =>
-		monitors.some((m) => statuses.includes(m.status));
-	const noneOf = (...statuses: MonitorStatus[]) =>
-		monitors.every((m) => !statuses.includes(m.status));
-
-	// All monitors in a single state
-	if (allOf("up")) {
-		monitorsStatus.msg = t("pages.statusPages.statusBar.allUp");
-		monitorsStatus.color = theme.palette.success.main;
-		monitorsStatus.icon = <CircleCheck size={24} />;
-	} else if (allOf("breached")) {
-		monitorsStatus.msg = t("pages.statusPages.statusBar.allBreached");
-		monitorsStatus.color = theme.palette.error.main;
-		monitorsStatus.icon = <ShieldAlert size={24} />;
-	} else if (allOf("maintenance")) {
-		monitorsStatus.msg = t("pages.statusPages.statusBar.allMaintenance");
-		monitorsStatus.color = theme.palette.warning.main;
-		monitorsStatus.icon = <Wrench size={24} />;
-	} else if (allOf("down")) {
-		monitorsStatus.msg = t("pages.statusPages.statusBar.allDown");
-		monitorsStatus.color = theme.palette.error.main;
-		monitorsStatus.icon = <CircleX size={24} />;
-	} else if (allOf("paused")) {
-		monitorsStatus.msg = t("pages.statusPages.statusBar.allPaused");
-		monitorsStatus.color = theme.palette.warning.main;
-		monitorsStatus.icon = <PauseCircle size={24} />;
-	} else if (allOf("initializing")) {
-		monitorsStatus.msg = t("pages.statusPages.statusBar.allInitializing");
-		monitorsStatus.color = theme.palette.warning.main;
-		monitorsStatus.icon = <Loader size={24} />;
-
-		// Breached takes highest priority in mixed states
-	} else if (someOf("breached") && someOf("down")) {
-		monitorsStatus.msg = t("pages.statusPages.statusBar.breachedAndDown");
-		monitorsStatus.color = theme.palette.error.main;
-		monitorsStatus.icon = <ShieldAlert size={24} />;
-	} else if (someOf("breached")) {
-		monitorsStatus.msg = t("pages.statusPages.statusBar.breached");
-		monitorsStatus.color = theme.palette.error.main;
-		monitorsStatus.icon = <ShieldAlert size={24} />;
-
-		// Maintenance combinations
-	} else if (someOf("maintenance") && someOf("down")) {
-		monitorsStatus.msg = t("pages.statusPages.statusBar.maintenanceAndDown");
-		monitorsStatus.color = theme.palette.error.main;
-		monitorsStatus.icon = <Wrench size={24} />;
-	} else if (someOf("maintenance") && noneOf("down")) {
-		monitorsStatus.msg = t("pages.statusPages.statusBar.maintenance");
-		monitorsStatus.color = theme.palette.warning.main;
-		monitorsStatus.icon = <Wrench size={24} />;
-
-		// Degraded (some down, no maintenance/breached)
-	} else if (someOf("down")) {
-		monitorsStatus.msg = t("pages.statusPages.statusBar.degraded");
-		monitorsStatus.color = theme.palette.warning.main;
-		monitorsStatus.icon = <AlertTriangle size={24} />;
-
-		// Some Paused
-	} else if (someOf("paused")) {
-		monitorsStatus.msg = t("pages.statusPages.statusBar.partiallyPaused");
-		monitorsStatus.color = theme.palette.warning.main;
-		monitorsStatus.icon = <PauseCircle size={24} />;
-
-		// Initializing
-	} else if (someOf("initializing")) {
-		monitorsStatus.msg = t("pages.statusPages.statusBar.initializing");
-		monitorsStatus.color = theme.palette.info.main;
-		monitorsStatus.icon = <Loader size={24} />;
-	} else {
-		monitorsStatus.msg = t("pages.statusPages.statusBar.unknown");
-		monitorsStatus.color = theme.palette.warning.main;
-	}
-
-	return monitorsStatus;
-};
-
-interface StatusBarProps {
-	monitors: Monitor[];
-}
-
-export const StatusBar = ({ monitors }: StatusBarProps) => {
-	const theme = useTheme();
-	const { t } = useTranslation();
-	const monitorsStatus = getMonitorStatus(monitors, theme, t);
-
-	return (
-		<Stack
-			direction="row"
-			alignItems="center"
-			justifyContent="center"
-			gap={theme.spacing(2)}
-			height={theme.spacing(30)}
-			bgcolor={monitorsStatus.color}
-			borderRadius={theme.shape.borderRadius}
-		>
-			{monitorsStatus.icon}
-			<Typography>{monitorsStatus.msg}</Typography>
-		</Stack>
-	);
-};

client/src/Pages/StatusPage/Status/index.tsx

@@ -1,18 +1,77 @@
 import { BasePage, BaseFallback } from "@/Components/design-elements";
-import { StatusBar } from "@/Pages/StatusPage/Status/Components/StatusBar";
-import { MonitorsList } from "@/Pages/StatusPage/Status/Components/MonitorsList";
 import Typography from "@mui/material/Typography";
 import { Link } from "react-router-dom";
 import Stack from "@mui/material/Stack";
 import Box from "@mui/material/Box";
 
-import { useMediaQuery, useTheme } from "@mui/material";
+import { useTheme } from "@mui/material";
 import { useTranslation } from "react-i18next";
 import { useIsAdmin } from "@/Hooks/useIsAdmin";
 import { useLocation, useParams } from "react-router-dom";
 import { useGet } from "@/Hooks/UseApi";
-import type { StatusPageResponse } from "@/Types/StatusPage";
-import { HeaderStatusPageControls } from "./Components/HeaderStatusPageControls";
+import { resolveStatusPageTheme } from "@/Types/StatusPage";
+import {
+	PUBLIC_STATUS_PAGE_PREFIX,
+	type StatusPageResponse,
+	type StatusPageTheme,
+} from "@/Types/StatusPage";
+import {
+	buildStatusPageApiPath,
+	getStatusPagePreviewUrl,
+	getStatusPagePublicUrl,
+	isCustomDomainHost,
+} from "@/Utils/statusPageUrl";
+import { HeaderStatusPageControls } from "@/Pages/StatusPage/Status/Components/HeaderStatusPageControls";
+import { StatusPageThemeProvider } from "@/Pages/StatusPage/Status/themes/StatusPageThemeProvider";
+import {
+	BaseStatusPage,
+	type ThemeConfig,
+} from "@/Pages/StatusPage/Status/themes/shared/BaseStatusPage";
+import { BrowserFrame } from "@/Pages/StatusPage/Status/themes/BrowserFrame";
+import { refinedStyles } from "@/Pages/StatusPage/Status/themes/refined/styles";
+import { RefinedHeader } from "@/Pages/StatusPage/Status/themes/refined/RefinedHeader";
+import { RefinedHero } from "@/Pages/StatusPage/Status/themes/refined/RefinedHero";
+import { modernStyles } from "@/Pages/StatusPage/Status/themes/modern/styles";
+import { ModernHeader } from "@/Pages/StatusPage/Status/themes/modern/ModernHeader";
+import { ModernHero } from "@/Pages/StatusPage/Status/themes/modern/ModernHero";
+import { boldStyles } from "@/Pages/StatusPage/Status/themes/bold/styles";
+import { BoldHeader } from "@/Pages/StatusPage/Status/themes/bold/BoldHeader";
+import { BoldHero } from "@/Pages/StatusPage/Status/themes/bold/BoldHero";
+import { editorialStyles } from "@/Pages/StatusPage/Status/themes/editorial/styles";
+import { EditorialHeader } from "@/Pages/StatusPage/Status/themes/editorial/EditorialHeader";
+import { EditorialHero } from "@/Pages/StatusPage/Status/themes/editorial/EditorialHero";
+import { minimalStyles } from "@/Pages/StatusPage/Status/themes/minimal/styles";
+
+const THEME_CONFIGS: Record<StatusPageTheme, ThemeConfig<any>> = {
+	refined: {
+		createStyles: refinedStyles,
+		HeaderSlot: RefinedHeader,
+		HeroSlot: RefinedHero,
+	},
+	modern: {
+		createStyles: modernStyles,
+		HeaderSlot: ModernHeader,
+		HeroSlot: ModernHero,
+		overallStatusOptions: { iconSize: 20 },
+	},
+	bold: {
+		createStyles: boldStyles,
+		HeaderSlot: BoldHeader,
+		HeroSlot: BoldHero,
+		overallStatusOptions: { iconSize: 18 },
+	},
+	editorial: {
+		createStyles: editorialStyles,
+		HeaderSlot: EditorialHeader,
+		HeroSlot: EditorialHero,
+		overallStatusOptions: { allUpKey: "pages.statusPages.editorial.allUp" },
+	},
+	minimal: {
+		createStyles: minimalStyles,
+		HeaderSlot: RefinedHeader,
+		HeroSlot: RefinedHero,
+	},
+};
 
 const StatusPageView = () => {
 	const theme = useTheme();
@@ -20,10 +79,15 @@ const StatusPageView = () => {
 	const { url } = useParams();
 	const isAdmin = useIsAdmin();
 	const location = useLocation();
-	const isSmall = useMediaQuery(theme.breakpoints.down("md"));
-	const isPublic = location.pathname.startsWith("/status/public");
 
-	const apiUrl = url ? `/status-page/${url}?type=uptime&type=infrastructure` : null;
+	const onCustomDomainHost = isCustomDomainHost();
+	const isPublic =
+		onCustomDomainHost || location.pathname.startsWith(PUBLIC_STATUS_PAGE_PREFIX);
+
+	const apiUrl = buildStatusPageApiPath({
+		url,
+		useCustomDomain: onCustomDomainHost,
+	});
 
 	const { data, isLoading, error } = useGet<StatusPageResponse>(
 		apiUrl,
@@ -65,48 +129,56 @@ const StatusPageView = () => {
 		);
 	}
 
-	let sx: React.CSSProperties = {};
+	// Public route: render directly on the viewport, themed background covers everything.
 	if (isPublic) {
-		sx.paddingTop = theme.spacing(20);
-		sx.paddingLeft = isSmall ? "5vw" : "20vw";
-		sx.paddingRight = isSmall ? "5vw" : "20vw";
+		const themeConfig = THEME_CONFIGS[resolveStatusPageTheme(statusPage.theme)];
+		return (
+			<StatusPageThemeProvider
+				theme={statusPage.theme}
+				themeMode={statusPage.themeMode}
+				timezone={statusPage.timezone}
+				paintBody
+			>
+				<BaseStatusPage
+					statusPage={statusPage}
+					monitors={monitors}
+					config={themeConfig}
+				/>
+			</StatusPageThemeProvider>
+		);
 	}
 
-	const logoSrc = statusPage.logo?.data
-		? `data:${statusPage.logo.contentType};base64,${statusPage.logo.data}`
-		: null;
-
+	const publicUrl = getStatusPagePublicUrl(statusPage);
+	const previewUrl = getStatusPagePreviewUrl(statusPage);
 	return (
 		<BasePage
 			loading={isLoading}
 			error={error}
-			sx={sx}
-			breadcrumbOverride={isPublic ? [] : undefined}
+			breadcrumbOverride={undefined}
+			sx={{ flex: 1, minHeight: 0 }}
 		>
 			<HeaderStatusPageControls
 				isAdmin={isAdmin}
 				statusPage={statusPage}
-				isPublic={isPublic}
-			/>
-			{logoSrc && (
-				<Box
-					component="img"
-					src={logoSrc}
-					alignSelf={"flex-start"}
-					alt={statusPage.companyName}
-					sx={{
-						maxHeight: 120,
-						maxWidth: "100%",
-						objectFit: "contain",
-						mb: 2,
-					}}
-				/>
-			)}
-			<StatusBar monitors={monitors} />
-			<MonitorsList
-				statusPage={statusPage}
-				monitors={monitors}
+				isPublic={false}
 			/>
+			<StatusPageThemeProvider
+				theme={statusPage.theme}
+				themeMode={statusPage.themeMode}
+				timezone={statusPage.timezone}
+				transparent
+			>
+				<BrowserFrame url={publicUrl}>
+					<Box
+						component="iframe"
+						src={previewUrl}
+						title={t("pages.statusPages.preview.title")}
+						flex={1}
+						width="100%"
+						border={0}
+					/>
+				</BrowserFrame>
+			</StatusPageThemeProvider>
 		</BasePage>
 	);
 };

client/src/Pages/StatusPage/Status/themes/BrowserFrame.tsx

@@ -0,0 +1,76 @@
+import type { ReactNode } from "react";
+import Box from "@mui/material/Box";
+import { useStatusPageTheme } from "./StatusPageThemeProvider";
+
+interface Props {
+	url: string;
+	children: ReactNode;
+}
+
+export const BrowserFrame = ({ url, children }: Props) => {
+	const { tokens } = useStatusPageTheme();
+
+	return (
+		<Box
+			sx={{
+				width: "100%",
+				minHeight: "calc(100vh - 180px)",
+				display: "flex",
+				flexDirection: "column",
+				borderRadius: "12px",
+				overflow: "hidden",
+				border: `1px solid ${tokens.border}`,
+				background: tokens.surface,
+				color: tokens.text,
+			}}
+		>
+			<Box
+				sx={{
+					display: "flex",
+					alignItems: "center",
+					gap: 1.25,
+					padding: "10px 14px",
+					background: tokens.bg,
+					borderBottom: `1px solid ${tokens.border}`,
+				}}
+			>
+				<Box sx={{ display: "flex", gap: 0.75 }}>
+					<Box
+						sx={{ width: 12, height: 12, borderRadius: "50%", background: "#ff5f57" }}
+					/>
+					<Box
+						sx={{ width: 12, height: 12, borderRadius: "50%", background: "#febc2e" }}
+					/>
+					<Box
+						sx={{ width: 12, height: 12, borderRadius: "50%", background: "#28c840" }}
+					/>
+				</Box>
+				<Box
+					sx={{
+						flex: 1,
+						padding: "4px 12px",
+						marginLeft: 2,
+						borderRadius: "6px",
+						background: tokens.surface,
+						border: `1px solid ${tokens.border}`,
+						fontFamily: "ui-monospace, Menlo, monospace",
+						fontSize: 12,
+						color: tokens.textMuted,
+						overflow: "hidden",
+						textOverflow: "ellipsis",
+						whiteSpace: "nowrap",
+					}}
+				>
+					{url}
+				</Box>
+			</Box>
+			<Box
+				display="flex"
+				flexDirection="column"
+				sx={{ flex: 1, minHeight: 0 }}
+			>
+				{children}
+			</Box>
+		</Box>
+	);
+};

client/src/Pages/StatusPage/Status/themes/StatusPageThemeProvider.tsx

@@ -0,0 +1,153 @@
+import {
+	createContext,
+	useContext,
+	useEffect,
+	useMemo,
+	useState,
+	type ReactNode,
+} from "react";
+import {
+	DEFAULT_STATUS_PAGE_THEME,
+	resolveStatusPageTheme,
+	resolveStatusPageThemeMode,
+	type StatusPageTheme,
+	type StatusPageThemeMode,
+} from "@/Types/StatusPage";
+import { resolveTimezone } from "@/Utils/TimeUtils";
+import { themeTokens, type StatusPageThemeTokens } from "./tokens";
+
+type ResolvedMode = "light" | "dark";
+
+interface StatusPageThemeContextValue {
+	theme: StatusPageTheme;
+	mode: ResolvedMode;
+	tokens: StatusPageThemeTokens;
+	timezone: string;
+}
+
+const StatusPageThemeContext = createContext<StatusPageThemeContextValue | null>(null);
+
+const resolveSystemMode = (): ResolvedMode => {
+	if (typeof window === "undefined" || !window.matchMedia) return "light";
+	return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+};
+
+interface Props {
+	theme?: StatusPageTheme;
+	themeMode?: StatusPageThemeMode;
+	timezone?: string;
+	/**
+	 * When true, paint the document body with the theme background so it
+	 * covers beyond the provider's wrapper (useful on the public route
+	 * where no admin shell sits behind). Defaults to false for admin
+	 * previews that already have an app background.
+	 */
+	paintBody?: boolean;
+	/**
+	 * When true, the provider's wrapper div does NOT paint its own
+	 * background or set a min-height. Use this when the wrapper is
+	 * inside a clipped container (e.g. BrowserFrame) that already sets
+	 * the visible background, so the wrapper's bg doesn't bleed past the
+	 * container's rounded corners.
+	 */
+	transparent?: boolean;
+	children: ReactNode;
+}
+
+export const StatusPageThemeProvider = ({
+	theme,
+	themeMode,
+	timezone,
+	paintBody = false,
+	transparent = false,
+	children,
+}: Props) => {
+	const resolvedTheme = resolveStatusPageTheme(theme);
+	const resolvedThemeMode = resolveStatusPageThemeMode(themeMode);
+	const resolvedTimezone = resolveTimezone(timezone);
+
+	const [systemMode, setSystemMode] = useState<ResolvedMode>(resolveSystemMode);
+
+	useEffect(() => {
+		if (resolvedThemeMode !== "auto") return;
+		if (typeof window === "undefined" || !window.matchMedia) return;
+		const mq = window.matchMedia("(prefers-color-scheme: dark)");
+		// Reconcile on first paint whenever we (re-)enter auto mode — only
+		// when it disagrees with the stored value, so we don't trigger an
+		// extra render on the common hot path.
+		const next: ResolvedMode = mq.matches ? "dark" : "light";
+		setSystemMode((prev) => (prev === next ? prev : next));
+		const handler = (e: MediaQueryListEvent) =>
+			setSystemMode(e.matches ? "dark" : "light");
+		mq.addEventListener("change", handler);
+		return () => mq.removeEventListener("change", handler);
+	}, [resolvedThemeMode]);
+
+	useEffect(() => {
+		if (!paintBody || typeof document === "undefined") return;
+		const html = document.documentElement;
+		const body = document.body;
+		const prev = {
+			htmlBg: html.style.background,
+			bodyBg: body.style.background,
+			bodyMargin: body.style.margin,
+			htmlColorScheme: html.style.colorScheme,
+		};
+		const resolvedMode = resolvedThemeMode === "auto" ? systemMode : resolvedThemeMode;
+		const bg = themeTokens[resolvedTheme][resolvedMode].bg;
+		html.style.background = bg;
+		body.style.background = bg;
+		body.style.margin = "0";
+		html.style.colorScheme = resolvedMode;
+		return () => {
+			html.style.background = prev.htmlBg;
+			body.style.background = prev.bodyBg;
+			body.style.margin = prev.bodyMargin;
+			html.style.colorScheme = prev.htmlColorScheme;
+		};
+	}, [paintBody, resolvedTheme, resolvedThemeMode, systemMode]);
+
+	const resolvedMode: ResolvedMode =
+		resolvedThemeMode === "auto" ? systemMode : resolvedThemeMode;
+	const tokens = themeTokens[resolvedTheme][resolvedMode];
+
+	const value = useMemo(
+		() => ({
+			theme: resolvedTheme,
+			mode: resolvedMode,
+			tokens,
+			timezone: resolvedTimezone,
+		}),
+		[resolvedTheme, resolvedMode, tokens, resolvedTimezone]
+	);
+
+	return (
+		<StatusPageThemeContext.Provider value={value}>
+			<div
+				style={
+					transparent
+						? undefined
+						: {
+								background: tokens.bg,
+								minHeight: "100vh",
+							}
+				}
+			>
+				{children}
+			</div>
+		</StatusPageThemeContext.Provider>
+	);
+};
+
+export const useStatusPageTheme = (): StatusPageThemeContextValue => {
+	const ctx = useContext(StatusPageThemeContext);
+	if (!ctx) {
+		return {
+			theme: DEFAULT_STATUS_PAGE_THEME,
+			mode: resolveSystemMode(),
+			tokens: themeTokens[DEFAULT_STATUS_PAGE_THEME][resolveSystemMode()],
+			timezone: resolveTimezone(),
+		};
+	}
+	return ctx;
+};

client/src/Pages/StatusPage/Status/themes/bold/BoldHeader.tsx

@@ -0,0 +1,20 @@
+import Box from "@mui/material/Box";
+import { monoFirstChar } from "@/Pages/StatusPage/Status/themes/shared/overallStatus";
+import type { SlotProps } from "@/Pages/StatusPage/Status/themes/shared/BaseStatusPage";
+import type { BoldStyles } from "@/Pages/StatusPage/Status/themes/bold/styles";
+
+export const BoldHeader = ({ statusPage, logoSrc, styles }: SlotProps<BoldStyles>) => (
+	<Box sx={styles.brand}>
+		{logoSrc ? (
+			<Box
+				component="img"
+				src={logoSrc}
+				alt={statusPage.companyName}
+				sx={styles.logoImg}
+			/>
+		) : (
+			<Box sx={styles.logoConic}>{monoFirstChar(statusPage.companyName)}</Box>
+		)}
+		{statusPage.companyName}
+	</Box>
+);