improve email error handling

Merge pull request #3986 from bluewave-labs/feat/docker-container-alerts
feat: docker container alerts
2026-09-23 12:13:27 -07:00 · 2026-09-23 11:50:04 -07:00 · 2026-09-23 11:46:58 -07:00 · 2026-09-23 11:39:16 -07:00 · 2026-09-23 11:31:37 -07:00 · 2026-09-23 11:17:19 -07:00
255 changed files with 9940 additions and 5993 deletions
@@ -92,7 +92,7 @@ JWT_SECRET="$(openssl rand -hex 32)" docker compose up -d
 Then open http://localhost:52345. If the app is reached at another origin (domain or LAN IP), set `CLIENT_HOST` accordingly. To build the image yourself, run `docker build -f docker/Dockerfile -t checkmate .` from a checkout. For TLS, put any reverse proxy (Caddy, Traefik, nginx) in front of port 52345.

 There are also 1-click installation options like [Repocloud](https://repocloud.io/details/Checkmate),
-[Pikapods](https://www.pikapods.com/), [Coolify](https://coolify.io/), [Elestio](https://elest.io/open-source/checkmate), [K8s](../../charts/helm/checkmate/INSTALLATION.md), [Sive Host](https://sive.host) or [Cloudzy](https://cloudzy.com/marketplace/checkmate).
+[Pikapods](https://www.pikapods.com/), [Coolify](https://coolify.io/), [Elestio](https://elest.io/open-source/checkmate), [Easypanel](https://easypanel.io/templates/checkmate), [K8s](./charts/helm/checkmate/INSTALLATION.md), [Sive Host](https://sive.host) or [Cloudzy](https://cloudzy.com/marketplace/checkmate). Note that the Helm chart has not yet been migrated to the all-in-one image: it still deploys the legacy `checkmate-client`, `checkmate-backend` and `checkmate-mongo` images, pinned at v3.8.1.


 ### Configuration
@@ -104,7 +104,15 @@ The image is configured entirely through environment variables on the server con
 | `DB_CONNECTION_STRING` | Yes | MongoDB connection string, e.g. `mongodb://mongodb:27017/uptime_db` |
 | `JWT_SECRET` | Yes | Secret used to sign auth tokens; generate one with `openssl rand -hex 32` |
 | `CLIENT_HOST` | Yes | The URL users reach the app at, e.g. `https://checkmate.example.com`; used for CORS and for links in notifications and emails |
+| `ENCRYPTION_KEY` | No | Encrypts stored Docker TLS client keys at rest; generate one with `openssl rand -base64 32`. Comma-separated list: the first key encrypts, every key decrypts. Must be identical on the API and every worker. To rotate without downtime, deploy `OLD_KEY,NEW_KEY` everywhere, then `NEW_KEY,OLD_KEY` everywhere, wait for the worker to re-encrypt every row, then drop `OLD_KEY`. |
+| `PORT` | No | Port the API and web client are served on (default `52345`) |
+| `HEALTH_PORT` | No | Port for the `/livez`, `/readyz` and `/metrics` endpoints, served by any process that runs the job worker (default `52346`) |
+| `NODE_ENV` | No | `development`, `production` or `test` (default `development`). `development` disables the general API rate limiter; set `production` on real deployments |
 | `LOG_LEVEL` | No | Server log level: `error`, `warn`, `info`, or `debug` (default `debug`) |
+| `TOKEN_TTL` | No | Lifetime of issued auth tokens, e.g. `12h` or `7d` (default `99d`) |
+| `QUEUE_MODE` | No | `primary` (default) runs the API, the web client and the job scheduler; `worker` runs a job-processing worker only, with no API |
+| `QUEUE_PRIMARY_PROCESSES` | No | `true` (default) or `false`. Whether a `primary` node also processes monitoring jobs itself; set `false` when dedicated `worker` nodes handle all checks. Ignored in `worker` mode |
+| `STATUS_PAGE_THEMES_ENABLED` | No | `true` (default) or `false`. When `false`, status pages ignore theme settings and always render the default theme |

 The web client needs no configuration by default: it calls the API on the same origin it was served from (`/api/v1`). For setups where the defaults don't apply — for example, the API is reached through a different origin than the page — the server renders overrides into the client at runtime via these optional variables:

@@ -118,12 +126,122 @@ The web client needs no configuration by default: it calls the API on the same o

 See full installation instructions in the [Checkmate documentation portal](https://checkmate.so/docs). 

-Alternatively, you can also use [Coolify](https://coolify.io/), [Elestio](https://elest.io/open-source/checkmate), [K8s](./charts/helm/checkmate/INSTALLATION.md), [Sive Host](https://sive.host) (South Africa), [Cloudzy](https://cloudzy.com/marketplace/checkmate) or [Pikapods](https://www.pikapods.com/) to quickly spin off a Checkmate instance. If you would like to monitor your server infrastructure, you'll need [Capture agent](https://github.com/bluewave-labs/capture). Capture repository also contains the installation instructions.
+Alternatively, you can also use [Coolify](https://coolify.io/), [Elestio](https://elest.io/open-source/checkmate), [K8s](./charts/helm/checkmate/INSTALLATION.md) (legacy images, pinned at v3.8.1), [Sive Host](https://sive.host) (South Africa), [Cloudzy](https://cloudzy.com/marketplace/checkmate) or [Pikapods](https://www.pikapods.com/) to quickly spin off a Checkmate instance. If you would like to monitor your server infrastructure, you'll need [Capture agent](https://github.com/bluewave-labs/capture). Capture repository also contains the installation instructions.

 ### Using a Custom CA

 If you need to monitor internal HTTPS endpoints with certificates from private Certificate Authorities (like Smallstep), see our [Custom CA Trust Guide](./docs/custom-ca-trust.md) for Docker configuration options.

+### Docker monitors
+
+A Docker monitor reports on every container running on a host. It can connect to the Docker daemon directly or read container metrics from a Capture agent. Direct monitors use the daemon's ping response for availability and record container state, health, CPU and memory usage, restart count, published ports and mounts. Enabling **Collect container logs** additionally stores the latest 200 log lines per container on every direct check; logs are kept for 7 days.
+
+The **Docker host** field accepts three forms:
+
+| Host | Example | Notes |
+|---|---|---|
+| Local socket | `unix:///var/run/docker.sock` | Also accepts a bare absolute path such as `/var/run/docker.sock`. Use this for the daemon on the same machine Checkmate runs on. |
+| Remote daemon | `tcp://docker.example.com:2376` | Always uses mutual TLS; the port defaults to `2376`. Unencrypted daemons on `2375` are not supported. |
+| Capture agent | `https://capture.example.com/api/v1/metrics/docker` | Enter the full endpoint ending in `/metrics/docker` and its authorization secret. Checkmate requests `all=true` so stopped containers are included. |
+
+Capture-backed monitors normalize Capture's container state, health, CPU, memory, start time and exposed ports into the same Docker pages. Capture does not currently provide restart counts, mounts, published host-port bindings or container logs, so those values are shown as unavailable. Capture also reports a container whose health check is still starting as healthy, so the `starting` health state only appears on direct monitors, and stopped containers carry no CPU or memory metrics.
+
+**Monitoring the local socket.** The reference Compose file does not mount the socket, so add it and grant the container the host's `docker` group. The image runs as an unprivileged user and cannot read the socket otherwise. Find the group id with `stat -c %g /var/run/docker.sock`, then:
+
+```yaml
+services:
+  checkmate:
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock:ro
+    group_add:
+      - "989"   # the gid printed by stat
+```
+
+**Monitoring a remote daemon.** Set the host to `tcp://host:port` and fill in the **TLS credentials** section of the monitor form with the same PEM files you would pass to `docker --tlsverify`:
+
+- **CA certificate**: the CA that signed the daemon's server certificate. Required unless **Ignore TLS/SSL errors** is on, which skips verifying the daemon's identity.
+- **Client certificate**: the certificate the daemon uses to authenticate Checkmate.
+- **Client key**: the matching private key, unencrypted (no passphrase). Checkmate checks that it matches the certificate, encrypts it with `ENCRYPTION_KEY`, and never shows it again. Leave the field blank when editing to keep the stored key.
+
+TLS Docker monitors require `ENCRYPTION_KEY` to be set on the server (see [Configuration](#configuration)). Saving one without it fails with an error telling you so. If the key is ever removed or rotated incorrectly, affected checks fail with a decryption error until it is restored.
+
+If the daemon's certificate is signed by a private CA that you also want the rest of Checkmate to trust, see the [Custom CA Trust Guide](./docs/custom-ca-trust.md); for Docker monitors alone, the **CA certificate** field is enough.
+
+### Securing the Docker daemon with TLS
+
+The Docker daemon does not enable TLS by default. Follow these steps on the Docker host to generate a CA, a server certificate, and a client certificate for Checkmate. This is the procedure from [Docker's own guide](https://docs.docker.com/engine/security/protect-access/), condensed. Replace `docker.example.com` and `203.0.113.10` with your daemon's DNS name and IP.
+
+**1. Create a CA.** The CA key gets a passphrase; keep it offline once the certificates are issued.
+
+```bash
+openssl genrsa -aes256 -out ca-key.pem 4096
+openssl req -new -x509 -days 365 -key ca-key.pem -sha256 -subj "/CN=docker-ca" -out ca.pem
+```
+
+**2. Create the server certificate.** The subject alternative names must cover every name or address Checkmate will use to reach the daemon.
+
+```bash
+openssl genrsa -out server-key.pem 4096
+openssl req -subj "/CN=docker.example.com" -sha256 -new -key server-key.pem -out server.csr
+cat > server-ext.cnf <<EOF
+subjectAltName = DNS:docker.example.com,IP:203.0.113.10
+extendedKeyUsage = serverAuth
+EOF
+openssl x509 -req -days 365 -sha256 -in server.csr -CA ca.pem -CAkey ca-key.pem -CAcreateserial \
+  -out server-cert.pem -extfile server-ext.cnf
+```
+
+**3. Create the client certificate for Checkmate.** Do not add a passphrase to this key; Checkmate cannot use encrypted private keys.
+
+```bash
+openssl genrsa -out key.pem 4096
+openssl req -subj "/CN=checkmate" -new -key key.pem -out client.csr
+echo "extendedKeyUsage = clientAuth" > client-ext.cnf
+openssl x509 -req -days 365 -sha256 -in client.csr -CA ca.pem -CAkey ca-key.pem -CAcreateserial \
+  -out cert.pem -extfile client-ext.cnf
+rm client.csr server.csr server-ext.cnf client-ext.cnf
+chmod 0400 ca-key.pem key.pem server-key.pem
+chmod 0444 ca.pem server-cert.pem cert.pem
+```
+
+**4. Point the daemon at the certificates.** Move `ca.pem`, `server-cert.pem` and `server-key.pem` to `/etc/docker/certs/` and configure `/etc/docker/daemon.json`:
+
+```json
+{
+  "hosts": ["unix:///var/run/docker.sock", "tcp://0.0.0.0:2376"],
+  "tls": true,
+  "tlsverify": true,
+  "tlscacert": "/etc/docker/certs/ca.pem",
+  "tlscert": "/etc/docker/certs/server-cert.pem",
+  "tlskey": "/etc/docker/certs/server-key.pem"
+}
+```
+
+On distributions where the systemd unit already passes `-H fd://` (Debian, Ubuntu and derivatives), the daemon refuses to start with `hosts` set in both places. Remove the flag from the unit with an override, then restart:
+
+```bash
+sudo systemctl edit docker.service
+```
+
+```ini
+[Service]
+ExecStart=
+ExecStart=/usr/bin/dockerd
+```
+
+```bash
+sudo systemctl daemon-reload && sudo systemctl restart docker
+```
+
+Open port `2376` on the host firewall only to the machine running Checkmate.
+
+**5. Verify from the Checkmate host**, then paste `ca.pem`, `cert.pem` and `key.pem` into the monitor form:
+
+```bash
+docker --tlsverify --tlscacert=ca.pem --tlscert=cert.pem --tlskey=key.pem \
+  -H=docker.example.com:2376 version
+```
+
 For more documentation, see the [docs directory](./docs/).

 <a id="performance"></a>
@@ -133,7 +251,7 @@ Thanks to extensive optimizations, Checkmate operates with an exceptionally smal

 ![image](https://github.com/user-attachments/assets/37e04a75-d83a-488f-b25c-025511b492c9)

-You can see the memory footprint of MongoDB and Redis on the same server (398Mb and 15Mb) for the same amount of servers:
+You can see the memory footprint of MongoDB on the same server (398Mb) for the same amount of servers:

 ![image](https://github.com/user-attachments/assets/3b469e85-e675-4040-a162-3f24c1afc751)

@@ -151,16 +269,16 @@ Feel free to ask questions or share your ideas - we'd love to hear from you!
 ## Features

 - Completely open source, deployable on your servers or home devices (e.g Raspberry Pi 4 or 5)
- Several monitoring options: Uptime, Docker, Ping, SSL, Port, Game server
+- Several monitoring options: HTTP (with SSL certificate expiry), Ping, Port, DNS, Docker, gRPC, WebSocket, 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
 - Incidents at a glance
- Status pages with 4 beautiful themes
- E-mail, Webhooks, Discord, Slack, PagerDuty, Matrix, Rocket.Chat, Microsoft Teams, Telegram, Pushover, Twilio (SMS) notifications
+- Status pages with 5 beautiful themes
+- E-mail, Webhooks, Discord, Slack, PagerDuty, Matrix, Rocket.Chat, Microsoft Teams, Telegram, Pushover, ntfy, SignalGrid, Twilio (SMS) notifications
 - Scheduled maintenance
 - JSON query monitoring
- Multi-language support for Arabic, Chinese (Simplified), Chinese (Traditional, Taiwan), Czech, English, Finnish, French, German, Japanese, Portuguese (Brazil), Russian, Spanish, Thai, Turkish, Ukrainian, and Vietnamese
+- Multi-language support for Arabic, Catalan, Chinese (Simplified), Chinese (Traditional, Taiwan), Czech, English, Finnish, French, German, Italian, Japanese, Polish, Portuguese (Brazil), Russian, Spanish, Thai, Turkish, Ukrainian, and Vietnamese


 ## Monitor Lifecycle
@@ -213,7 +331,7 @@ Feel free to ask questions or share your ideas - we'd love to hear from you!

 We are [Alex](http://github.com/ajhollid) (team lead), [Gorkem](http://github.com/gorkem-bwl/), [Aryaman](https://github.com/Br0wnHammer), [Malena](https://github.com/malenacaroline) and [Mert](https://github.com/mertssmnoglu) helping individuals and businesses monitor their infra and servers.

-We pride ourselves on building strong connections with contributors at every level. Despite being a young project, Checkmate has already earned almost 11K+ stars and attracted 150+ contributors from around the globe.
+We pride ourselves on building strong connections with contributors at every level. Despite being a young project, Checkmate has already earned almost 11K stars and attracted 150+ contributors from around the globe.

 Our repo is starred by employees from **Google, Microsoft, Intel, Cisco, Tencent, Electronic Arts, ByteDance, JP Morgan Chase, Deloitte, Accenture, Foxconn, Broadcom, China Telecom, Barclays, Capgemini, Wipro, Cloudflare, Dassault Systèmes and NEC**, so don’t hold back — jump in, contribute and learn with us!

@@ -1,17 +1,14 @@
 {
 	"name": "client",
-	"version": "3.11.0",
+	"version": "3.12.0",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "client",
-			"version": "3.11.0",
+			"version": "3.12.0",
 			"dependencies": {
 				"@csstools/css-tokenizer": "^3.0.4",
-				"@dnd-kit/core": "^6.3.1",
-				"@dnd-kit/sortable": "^10.0.0",
-				"@dnd-kit/utilities": "^3.2.2",
 				"@emotion/react": "^11.13.3",
 				"@emotion/styled": "^11.13.0",
 				"@fontsource-variable/geist": "^5.3.0",
@@ -365,59 +362,6 @@
 				"node": ">=14"
 			}
 		},
-		"node_modules/@dnd-kit/accessibility": {
-			"version": "3.1.1",
-			"resolved": "https://registry.npmjs.org/@dnd-kit/accessibility/-/accessibility-3.1.1.tgz",
-			"integrity": "sha512-2P+YgaXF+gRsIihwwY1gCsQSYnu9Zyj2py8kY5fFvUM1qm2WA2u639R6YNVfU4GWr+ZM5mqEsfHZZLoRONbemw==",
-			"license": "MIT",
-			"dependencies": {
-				"tslib": "^2.0.0"
-			},
-			"peerDependencies": {
-				"react": ">=16.8.0"
-			}
-		},
-		"node_modules/@dnd-kit/core": {
-			"version": "6.3.1",
-			"resolved": "https://registry.npmjs.org/@dnd-kit/core/-/core-6.3.1.tgz",
-			"integrity": "sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ==",
-			"license": "MIT",
-			"dependencies": {
-				"@dnd-kit/accessibility": "^3.1.1",
-				"@dnd-kit/utilities": "^3.2.2",
-				"tslib": "^2.0.0"
-			},
-			"peerDependencies": {
-				"react": ">=16.8.0",
-				"react-dom": ">=16.8.0"
-			}
-		},
-		"node_modules/@dnd-kit/sortable": {
-			"version": "10.0.0",
-			"resolved": "https://registry.npmjs.org/@dnd-kit/sortable/-/sortable-10.0.0.tgz",
-			"integrity": "sha512-+xqhmIIzvAYMGfBYYnbKuNicfSsk4RksY2XdmJhT+HAC01nix6fHCztU68jooFiMUB01Ky3F0FyOvhG/BZrWkg==",
-			"license": "MIT",
-			"dependencies": {
-				"@dnd-kit/utilities": "^3.2.2",
-				"tslib": "^2.0.0"
-			},
-			"peerDependencies": {
-				"@dnd-kit/core": "^6.3.0",
-				"react": ">=16.8.0"
-			}
-		},
-		"node_modules/@dnd-kit/utilities": {
-			"version": "3.2.2",
-			"resolved": "https://registry.npmjs.org/@dnd-kit/utilities/-/utilities-3.2.2.tgz",
-			"integrity": "sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg==",
-			"license": "MIT",
-			"dependencies": {
-				"tslib": "^2.0.0"
-			},
-			"peerDependencies": {
-				"react": ">=16.8.0"
-			}
-		},
 		"node_modules/@emotion/babel-plugin": {
 			"version": "11.13.5",
 			"license": "MIT",
@@ -1,7 +1,7 @@
 {
 	"name": "client",
 	"private": true,
-	"version": "3.11.0",
+	"version": "3.12.0",
 	"type": "module",
 	"scripts": {
 		"lockfile": "docker run --rm -v \"$PWD\":/w -w /w $(grep -m1 -o 'node:[^ ]*' ../docker/Dockerfile) npm install --package-lock-only",
@@ -20,9 +20,6 @@
 	},
 	"dependencies": {
 		"@csstools/css-tokenizer": "^3.0.4",
-		"@dnd-kit/core": "^6.3.1",
-		"@dnd-kit/sortable": "^10.0.0",
-		"@dnd-kit/utilities": "^3.2.2",
 		"@emotion/react": "^11.13.3",
 		"@emotion/styled": "^11.13.0",
 		"@fontsource-variable/geist": "^5.3.0",
@@ -8,8 +8,11 @@ import { typographyLevels } from "@/Utils/Theme/Palette";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import { LAYOUT } from "@/Utils/Theme/constants";
 import { formatDuration } from "@/Utils/TimeUtils";
+import { useTranslation } from "react-i18next";
+
 export const MonitorStatus = ({ monitor }: { monitor: Monitor }) => {
 	const theme = useTheme();
+	const { t, i18n } = useTranslation();
 	const isSmall = useMediaQuery(theme.breakpoints.down("md"));

 	if (!monitor) {
@@ -52,7 +55,12 @@ export const MonitorStatus = ({ monitor }: { monitor: Monitor }) => {
 					<>
 						<Dot />
 						<Typography>
-							Checking every {formatDuration(monitor?.interval, true)}
+							{t("pages.common.monitors.statBoxes.checkingEvery", {
+								interval: formatDuration(monitor.interval, {
+									long: true,
+									locale: i18n.resolvedLanguage,
+								}),
+							})}
 						</Typography>
 					</>
 				)}
@@ -5,9 +5,10 @@ import {
 	type FieldValues,
 } from "react-hook-form";
 import { Autocomplete } from "@/Components/inputs";
+import type { AutocompleteProps } from "@mui/material/Autocomplete";

 export interface AutocompleteOption {
-	id: string;
+	id: string | number;
 	name: string;
 }

@@ -16,6 +17,9 @@ interface FormAutocompleteProps<T extends FieldValues, O extends AutocompleteOpt
 	options: O[];
 	fieldLabel?: string;
 	placeholder?: string;
+	filterOptions?: AutocompleteProps<O, false, false, false>["filterOptions"];
+	getOptionDisabled?: AutocompleteProps<O, false, false, false>["getOptionDisabled"];
+	disableClearable?: boolean;
 }

 export const FormAutocompleteField = <
@@ -26,6 +30,9 @@ export const FormAutocompleteField = <
 	options,
 	fieldLabel,
 	placeholder,
+	filterOptions,
+	getOptionDisabled,
+	disableClearable,
 }: FormAutocompleteProps<T, O>) => {
 	const { control } = useFormContext<T>();
 	return (
@@ -39,10 +46,14 @@ export const FormAutocompleteField = <
 					isOptionEqualToValue={(option, value) => option.id === value.id}
 					value={options.find((o) => o.id === field.value) ?? null}
 					onChange={(_: unknown, newValue: O | null) => {
+						if (newValue === null && disableClearable) return;
 						field.onChange(newValue?.id ?? "");
 					}}
 					fieldLabel={fieldLabel}
 					placeholder={placeholder}
+					filterOptions={filterOptions}
+					getOptionDisabled={getOptionDisabled}
+					disableClearable={disableClearable}
 					error={!!fieldState.error}
 					helperText={fieldState.error?.message ?? ""}
 				/>
@@ -21,7 +21,7 @@ export const MonitorStatBoxes = ({
 	domainExpiry,
 }: MonitorStatBoxesProps) => {
 	const theme = useTheme();
-	const { t } = useTranslation();
+	const { t, i18n } = useTranslation();
 	if (!monitorStats || !monitor) {
 		return null;
 	}
@@ -29,13 +29,16 @@ export const MonitorStatBoxes = ({
 	const timeOfLastFailure = monitorStats?.timeOfLastFailure || 0;
 	const timeSinceLastFailure = timeOfLastFailure > 0 ? Date.now() - timeOfLastFailure : 0;

-	// Determine time since last check
 	const timeOfLastCheck = monitorStats?.lastCheckTimestamp || 0;
-	const timeSinceLastCheck = Date.now() - timeOfLastCheck || 0;

 	const streakTime = formatDuration(timeSinceLastFailure);
-
-	const lastCheckTime = formatDuration(timeSinceLastCheck);
+	const lastCheckTime = timeOfLastCheck
+		? formatDuration(Date.now() - timeOfLastCheck, {
+				long: true,
+				relative: true,
+				locale: i18n.resolvedLanguage,
+			})
+		: t("common.labels.na");
 	const isActive =
 		monitor?.status === "up" ||
 		monitor?.status === "paused" ||
@@ -1,15 +1,58 @@
-import { BaseChart } from "@/Components/design-elements";
-import { Area, AreaChart, CartesianGrid, ResponsiveContainer } from "recharts";
+import { BaseChart, BaseBox } from "@/Components/design-elements";
+import { Area, AreaChart, CartesianGrid, ResponsiveContainer, Tooltip } from "recharts";
+import Typography from "@mui/material/Typography";

 // Types
 import type { DockerContainerStats } from "@/Types/Monitor";
+import type { TooltipProps } from "recharts";
+import type { NameType, ValueType } from "recharts/types/component/DefaultTooltipContent";
+import type { Theme } from "@mui/material/styles";
+import type { RootState } from "@/Types/state";

 // Hooks
 import { useTheme } from "@mui/material";
 import { Fragment, useId } from "react";
+import { useTranslation } from "react-i18next";
+import { useSelector } from "react-redux";

 // Utils
 import { createGradient } from "@/Components/monitors/charts/ChartUtils";
+import { tooltipDateFormatLookup, formatDateWithTz } from "@/Utils/TimeUtils";
+import type { DateRange } from "@/Types/Query";
+
+type DockerHistogramToolTipProps = TooltipProps<ValueType, NameType> & {
+	dataKey: string;
+	range: string;
+	theme: Theme;
+	uiTimezone: string;
+	valueFormatter: (value: number) => string;
+	labelKey: string;
+};
+
+const DockerHistogramToolTip = ({
+	dataKey,
+	active,
+	payload,
+	range,
+	theme,
+	uiTimezone,
+	valueFormatter,
+	labelKey,
+}: DockerHistogramToolTipProps) => {
+	const { t } = useTranslation();
+	if (!payload) return null;
+	if (!active) return null;
+	const format = tooltipDateFormatLookup(range);
+	const ts = payload[0].payload?._id ?? null;
+	const dataPoint = payload[0].payload?.[dataKey] ?? null;
+
+	return (
+		<BaseBox sx={{ py: theme.spacing(2), px: theme.spacing(4) }}>
+			<Typography>{formatDateWithTz(ts, format, uiTimezone)}</Typography>
+			<Typography>{t(labelKey, { value: valueFormatter(dataPoint) })}</Typography>
+		</BaseBox>
+	);
+};
 interface HistogramDockerContainerProps {
 	title: string;
 	rightTitle: string;
@@ -17,6 +60,9 @@ interface HistogramDockerContainerProps {
 	dataKey: string;
 	strokeColor: string;
 	gradientStartColor: string;
+	range: DateRange;
+	formatter: (value: number) => string;
+	labelKey: string;
 }

 export const HistogramDockerContainer = ({
@@ -26,11 +72,14 @@ export const HistogramDockerContainer = ({
 	dataKey,
 	strokeColor,
 	gradientStartColor,
+	range,
+	formatter,
+	labelKey,
 }: HistogramDockerContainerProps) => {
 	const uniqueId = useId();
 	const theme = useTheme();
 	const gradientId = `gradient-${uniqueId}`;
-
+	const uiTimezone = useSelector((state: RootState) => state.ui.timezone);
 	return (
 		<BaseChart
 			icon="null"
@@ -56,6 +105,19 @@ export const HistogramDockerContainer = ({
 							endColor: "transparent",
 							direction: "vertical",
 						})}
+						<Tooltip
+							content={(props) => (
+								<DockerHistogramToolTip
+									{...props}
+									range={range}
+									theme={theme}
+									uiTimezone={uiTimezone}
+									dataKey={dataKey}
+									valueFormatter={formatter}
+									labelKey={labelKey}
+								/>
+							)}
+						/>
 						<Area
 							dataKey={dataKey}
 							type="monotone"
@@ -1,7 +1,6 @@
 import { Icon } from "@/Components/design-elements";

 import {
-	LayoutDashboard,
 	Globe,
 	Gauge,
 	Link,
@@ -21,17 +20,18 @@ import {
 	Tag,
 	Waypoints,
 	Container,
+	// LayoutDashboard,
 } from "lucide-react";
 export const getMenu = (t: Function) => {
 	return [
 		{
 			group: t("components.sidebar.menu.groups.monitoring"),
 			items: [
-				{
-					name: t("components.sidebar.menu.dashboard"),
-					path: "dashboard",
-					icon: <Icon icon={LayoutDashboard} />,
-				},
+				// {
+				// 	name: t("components.sidebar.menu.dashboard"),
+				// 	path: "dashboard",
+				// 	icon: <Icon icon={LayoutDashboard} />,
+				// },
 				{
 					name: t("components.sidebar.menu.uptime"),
 					path: "uptime",
@@ -1,8 +1,9 @@
+import { dashboardCardKeys, type DashboardCardKey } from "@/Types/Dashboard";
 import { createSlice, type PayloadAction } from "@reduxjs/toolkit";
-import type { CardId } from "@/Pages/Dashboard/cards";

 type ThemeMode = "light" | "dark";
 type ChartType = "histogram" | "line";
+
 type TableName =
 	| "monitors"
 	| "team"
@@ -36,7 +37,7 @@ interface UIState {
 	language: string;
 	starPromptOpen: boolean;
 	chartType: ChartType;
-	dashboardCards: CardId[] | null;
+	dashboardVisibleCards: DashboardCardKey[];
 }

 const initialMode: ThemeMode = window?.matchMedia?.("(prefers-color-scheme: dark)")
@@ -76,7 +77,7 @@ const initialState: UIState = {
 	language: "en",
 	starPromptOpen: true,
 	chartType: "histogram",
-	dashboardCards: null,
+	dashboardVisibleCards: [...dashboardCardKeys],
 };

 const uiSlice = createSlice({
@@ -120,8 +121,8 @@ const uiSlice = createSlice({
 		setChartType: (state, action: PayloadAction<ChartType>) => {
 			state.chartType = action.payload;
 		},
-		setDashboardCards: (state, action: PayloadAction<CardId[] | null>) => {
-			state.dashboardCards = action.payload;
+		setDashboardVisibleCards: (state, action: PayloadAction<DashboardCardKey[]>) => {
+			state.dashboardVisibleCards = action.payload;
 		},
 	},
 });
@@ -139,5 +140,5 @@ export const {
 	setLanguage,
 	setStarPromptOpen,
 	setChartType,
-	setDashboardCards,
+	setDashboardVisibleCards,
 } = uiSlice.actions;
@@ -77,7 +77,16 @@ export const getMonitorDefaults = (
 				...base,
 				type: "docker",
 				url: data?.url || "",
+				secret: data?.secret || "",
+				ignoreTlsErrors: data?.ignoreTlsErrors || false,
+				dockerTlsCa: data?.dockerTlsCa || "",
+				dockerTlsCert: data?.dockerTlsCert || "",
+				// The key is write-only; the API never returns it.
+				dockerTlsKey: "",
+				dockerTlsKeySet: data?.dockerTlsKeySet ?? false,
 				dockerLogsEnabled: data?.dockerLogsEnabled ?? false,
+				dockerAlertOnStopped: data?.dockerAlertOnStopped ?? false,
+				dockerAlertOnUnhealthy: data?.dockerAlertOnUnhealthy ?? false,
 			};
 			break;
 		case "game":
@@ -38,6 +38,7 @@ import {
 	PageSpeedStrategies,
 	DnsRecordTypes,
 	MonitorIntervalOptions,
+	MIN_MONITOR_INTERVAL_MS,
 	DefaultMonitorMatchMethod,
 	MonitorMatchMethods,
 	GeoCheckIntervalOptions,
@@ -50,6 +51,8 @@ import type { AppSettingsResponse } from "@/Types/Settings";
 import {
 	stepFieldsFor,
 	monitorStepCount,
+	isCaptureDockerUrl,
+	isDockerTlsUrl,
 	type MonitorFormData,
 } from "@/Validation/monitor";
 import { FormNumberField } from "@/Components/inputs/forms/FormNumberField";
@@ -57,15 +60,62 @@ import { FormTextField } from "@/Components/inputs/forms/FormTextField";
 import { FormRadioGroup } from "@/Components/inputs/forms/FormRadioGroupField";
 import { FormMultiSelectField } from "@/Components/inputs/forms/FormMultiSelectField";
 import { FormSelectField } from "@/Components/inputs/forms/FormSelectField";
+import {
+	FormAutocompleteField,
+	type AutocompleteOption,
+} from "@/Components/inputs/forms/FormAutoCompleteField";
 import { FormSliderField } from "@/Components/inputs/forms/FormSliderField";
 import { FormSwitchField } from "@/Components/inputs/forms/FormSwitchField";
 import type { ProxyResponse } from "@/Types/Proxy";
+import { formatDuration } from "@/Utils/TimeUtils";

 const httpMethodOptions = HttpMethods.map((method) => ({
 	value: method,
 	label: method,
 }));

+const PEM_FIELD_ROWS = 6;
+
+// Hides the pasted key while the field is not focused. Ignored by browsers
+// without -webkit-text-security, which then show the key as plain text.
+const maskedInputSx = {
+	"&:not(.Mui-focused) textarea": { WebkitTextSecurity: "disc" },
+};
+
+interface IntervalOption extends AutocompleteOption {
+	id: number;
+}
+
+const INTERVAL_UNIT_MULTIPLIERS = [1000, 60000, 3600000, 86400000] as const;
+
+const toIntervalOption = (
+	intervalMs: number,
+	locale: string | undefined
+): IntervalOption => ({
+	id: intervalMs,
+	name: formatDuration(intervalMs, { long: true, locale }),
+});
+
+const filterIntervalOptions = (
+	options: IntervalOption[],
+	inputValue: string,
+	locale: string | undefined
+): IntervalOption[] => {
+	const input = inputValue.trim();
+	if (input === "" || options.some((option) => option.name === input)) {
+		return options;
+	}
+
+	const amount = Number(input);
+	if (!Number.isFinite(amount) || amount <= 0) {
+		return [];
+	}
+
+	return INTERVAL_UNIT_MULTIPLIERS.map((multiplier) => amount * multiplier)
+		.filter(Number.isSafeInteger)
+		.map((ms) => toIntervalOption(ms, locale));
+};
+
 interface GeneralSettingsConfig {
 	urlLabel: string;
 	urlPlaceholder: string;
@@ -243,7 +293,7 @@ const getGeneralSettingsConfig = (

 const CreateMonitorPage = () => {
 	const theme = useTheme();
-	const { t } = useTranslation();
+	const { t, i18n } = useTranslation();
 	const { monitorId } = useParams();
 	const location = useLocation();
 	const navigate = useNavigate();
@@ -300,10 +350,13 @@ const CreateMonitorPage = () => {
 	const showStep = (step: number) => isEditMode || currentStep === step;

 	const watchedType = watch("type") as MonitorType;
+	const watchedUrl = watch("url") as string;
+	const isCaptureDocker = watchedType === "docker" && isCaptureDockerUrl(watchedUrl);
 	const watchedMethod = watch("method") as HttpMethod | undefined;
 	const watchedProxyMode = watch("proxyMode") as ProxyMode | undefined;
 	const watchedUseAdvancedMatching = watch("useAdvancedMatching") as boolean;
 	const watchGeoCheckEnabled = watch("geoCheckEnabled") as boolean;
+	const watchedInterval = watch("interval");

 	// Steps without an advanced section drop it, so the last step is the form's.
 	const totalSteps = monitorStepCount(watchedType);
@@ -329,11 +382,20 @@ const CreateMonitorPage = () => {
 		}
 	}, [watchedType, showTypeSelector, reset, clearErrors]);

+	// The logs switch is hidden for Capture hosts, so a value left over from a socket host must not be submitted.
+	useEffect(() => {
+		if (isCaptureDocker) {
+			setValue("dockerLogsEnabled", false);
+		}
+	}, [isCaptureDocker, setValue]);
+
 	const generalSettingsConfig = useMemo(
 		() => getGeneralSettingsConfig(watchedType, t),
 		[watchedType, t]
 	);

+	const pemInputSx = { fontFamily: theme.typography.fontFamilyMonospace };
+
 	const { post, loading: isCreating } = usePost<MonitorFormData, Monitor>();
 	const { patch, loading: isUpdating } = usePatch<MonitorFormData, Monitor>();
 	const isSubmitting = isCreating || isUpdating;
@@ -459,16 +521,18 @@ const CreateMonitorPage = () => {
 		[t]
 	);

-	const intervalOptions = useMemo(
-		() =>
-			MonitorIntervalOptions.map((option) => ({
-				value: option.value,
-				label: t(
-					`pages.createMonitor.form.frequency.option.frequency.value.${option.labelKey}`
-				),
-			})),
-		[t]
-	);
+	const intervalOptions = useMemo(() => {
+		const options = MonitorIntervalOptions.map(({ value }) =>
+			toIntervalOption(value, i18n.resolvedLanguage)
+		);
+		if (
+			typeof watchedInterval === "number" &&
+			!options.some((option) => option.id === watchedInterval)
+		) {
+			options.push(toIntervalOption(watchedInterval, i18n.resolvedLanguage));
+		}
+		return options;
+	}, [watchedInterval, i18n.resolvedLanguage]);

 	const matchMethodOptions = useMemo(
 		() =>
@@ -553,7 +617,6 @@ const CreateMonitorPage = () => {
 						}
 					/>
 				)}
-
 				{showStep(0) && (
 					<ConfigBox
 						title={t("pages.createMonitor.form.general.title")}
@@ -654,8 +717,8 @@ const CreateMonitorPage = () => {
 									/>
 								)}

-								{/* Secret field - only for hardware type */}
-								{generalSettingsConfig.showSecret && (
+								{/* Capture API secret - used by hardware and Capture-backed Docker monitors */}
+								{(generalSettingsConfig.showSecret || isCaptureDocker) && (
 									<FormTextField
 										name="secret"
 										fieldLabel={t("pages.createMonitor.form.general.option.secret.label")}
@@ -664,6 +727,12 @@ const CreateMonitorPage = () => {
 										)}
 									/>
 								)}
+								{isCaptureDocker && (
+									<FormSwitchField
+										name="ignoreTlsErrors"
+										label={t("pages.createMonitor.form.ignoreTls.option.tls.label")}
+									/>
+								)}
 								{generalSettingsConfig.showDnsServer && (
 									<FormTextField
 										name="dnsServer"
@@ -688,23 +757,83 @@ const CreateMonitorPage = () => {
 						}
 					/>
 				)}
-
+				{showStep(0) && watchedType === "docker" && isDockerTlsUrl(watchedUrl) && (
+					<ConfigBox
+						title={t("pages.createMonitor.form.dockerTls.title")}
+						subtitle={t("pages.createMonitor.form.dockerTls.description")}
+						rightContent={
+							<Stack spacing={theme.spacing(LAYOUT.MD)}>
+								<FormTextField
+									name="dockerTlsCa"
+									multiline
+									rows={PEM_FIELD_ROWS}
+									fieldLabel={t("pages.createMonitor.form.dockerTls.option.ca.label")}
+									placeholder={t(
+										"pages.createMonitor.form.dockerTls.option.ca.placeholder"
+									)}
+									slotProps={{ input: { sx: pemInputSx } }}
+								/>
+								<FormTextField
+									name="dockerTlsCert"
+									multiline
+									rows={PEM_FIELD_ROWS}
+									fieldLabel={t("pages.createMonitor.form.dockerTls.option.cert.label")}
+									placeholder={t(
+										"pages.createMonitor.form.dockerTls.option.cert.placeholder"
+									)}
+									slotProps={{ input: { sx: pemInputSx } }}
+								/>
+								<FormTextField
+									name="dockerTlsKey"
+									multiline
+									rows={PEM_FIELD_ROWS}
+									fieldLabel={t("pages.createMonitor.form.dockerTls.option.key.label")}
+									placeholder={t(
+										"pages.createMonitor.form.dockerTls.option.key.placeholder"
+									)}
+									helperText={
+										existingMonitor?.dockerTlsKeySet
+											? t("pages.createMonitor.form.dockerTls.option.key.stored")
+											: undefined
+									}
+									autoComplete="off"
+									slotProps={{ input: { sx: { ...pemInputSx, ...maskedInputSx } } }}
+								/>
+								<FormSwitchField
+									name="ignoreTlsErrors"
+									label={t("pages.createMonitor.form.dockerTls.option.ignoreTls.label")}
+								/>
+								<Typography
+									component="span"
+									color={theme.palette.text.secondary}
+									sx={{ opacity: 0.8 }}
+								>
+									{t("pages.createMonitor.form.dockerTls.option.ignoreTls.description")}
+								</Typography>
+							</Stack>
+						}
+					/>
+				)}
 				{showStep(1) && (
 					<ConfigBox
 						title={t("pages.createMonitor.form.frequency.title")}
 						subtitle={t("pages.createMonitor.form.frequency.description")}
 						rightContent={
-							<FormSelectField
+							<FormAutocompleteField
 								name="interval"
 								fieldLabel={t(
 									"pages.createMonitor.form.frequency.option.frequency.label"
 								)}
 								options={intervalOptions}
+								filterOptions={(options, { inputValue }) =>
+									filterIntervalOptions(options, inputValue, i18n.resolvedLanguage)
+								}
+								getOptionDisabled={(option) => option.id < MIN_MONITOR_INTERVAL_MS}
+								disableClearable
 							/>
 						}
 					/>
 				)}
-
 				{/* Alert Thresholds - only for hardware type */}
 				{watchedType === "hardware" && showStep(1) && (
 					<ConfigBox
@@ -760,7 +889,6 @@ const CreateMonitorPage = () => {
 						}
 					/>
 				)}
-
 				{showStep(1) && (
 					<ConfigBox
 						title={t("pages.createMonitor.form.incidents.title")}
@@ -787,7 +915,6 @@ const CreateMonitorPage = () => {
 						}
 					/>
 				)}
-
 				{showStep(1) && (
 					<ConfigBox
 						title={t("pages.createMonitor.form.notifications.title")}
@@ -800,7 +927,6 @@ const CreateMonitorPage = () => {
 						}
 					/>
 				)}
-
 				{showStep(1) && (
 					<ConfigBox
 						title={t("pages.createMonitor.form.tags.title")}
@@ -827,8 +953,7 @@ const CreateMonitorPage = () => {
 						}
 					/>
 				)}
-
-				{showStep(1) && watchedType === "docker" && (
+				{showStep(1) && watchedType === "docker" && !isCaptureDocker && (
 					<ConfigBox
 						title={t("pages.createMonitor.form.dockerLogs.title")}
 						subtitle={t("pages.createMonitor.form.dockerLogs.description")}
@@ -840,7 +965,28 @@ const CreateMonitorPage = () => {
 						}
 					/>
 				)}
-
+				{showStep(1) && watchedType === "docker" && (
+					<ConfigBox
+						title={t("pages.createMonitor.form.dockerAlerts.title")}
+						subtitle={t("pages.createMonitor.form.dockerAlerts.description")}
+						rightContent={
+							<Stack gap={theme.spacing(LAYOUT.MD)}>
+								<FormSwitchField
+									name="dockerAlertOnStopped"
+									label={t(
+										"pages.createMonitor.form.dockerAlerts.option.onStopped.label"
+									)}
+								/>
+								<FormSwitchField
+									name="dockerAlertOnUnhealthy"
+									label={t(
+										"pages.createMonitor.form.dockerAlerts.option.onUnhealthy.label"
+									)}
+								/>
+							</Stack>
+						}
+					/>
+				)}
 				{showStep(2) &&
 					(watchedType === "http" ||
 						watchedType === "grpc" ||
@@ -856,7 +1002,6 @@ const CreateMonitorPage = () => {
 							}
 						/>
 					)}
-
 				{showStep(2) && watchedType === "http" && (
 					<ConfigBox
 						title={t("pages.createMonitor.form.advanced.title")}
@@ -956,7 +1101,6 @@ const CreateMonitorPage = () => {
 						}
 					/>
 				)}
-
 				{showStep(2) && supportsGeoCheck(watchedType) && (
 					<ConfigBox
 						title={t("pages.createMonitor.form.geoChecks.title")}
@@ -989,7 +1133,6 @@ const CreateMonitorPage = () => {
 						}
 					/>
 				)}
-
 				<Stack
 					direction="row"
 					justifyContent={!isEditMode ? "space-between" : "flex-end"}
@@ -1,123 +0,0 @@
-import Box from "@mui/material/Box";
-import { useTheme } from "@mui/material/styles";
-import { GripVertical } from "lucide-react";
-import {
-	DndContext,
-	closestCenter,
-	PointerSensor,
-	useSensor,
-	useSensors,
-} from "@dnd-kit/core";
-import type { DragEndEvent } from "@dnd-kit/core";
-import { SortableContext, useSortable, rectSortingStrategy } from "@dnd-kit/sortable";
-
-import { Icon } from "@/Components/design-elements";
-import { LAYOUT } from "@/Utils/Theme/constants";
-import { GRID_COLUMNS, type CardDefinition, type CardId } from "../cards";
-import { CardSlotContext } from "./CardSlotContext";
-
-const SortableCard = ({ card }: { card: CardDefinition }) => {
-	const theme = useTheme();
-	const { attributes, listeners, setNodeRef, transform, transition, isDragging } =
-		useSortable({ id: card.id });
-	const Component = card.component;
-
-	return (
-		<Box
-			ref={setNodeRef}
-			minWidth={0}
-			sx={{
-				width: {
-					xs: "100%",
-					md:
-						card.width >= GRID_COLUMNS
-							? "100%"
-							: `calc(${(card.width / GRID_COLUMNS) * 100}% - ${theme.spacing(LAYOUT.MD / 2)})`,
-				},
-				transform: transform
-					? `translate3d(${Math.round(transform.x)}px, ${Math.round(transform.y)}px, 0)`
-					: undefined,
-				transition,
-				opacity: isDragging ? 0.4 : 1,
-				zIndex: isDragging ? 1 : "auto",
-			}}
-		>
-			<CardSlotContext.Provider
-				value={
-					<Box
-						{...attributes}
-						{...listeners}
-						display="flex"
-						alignItems="center"
-						sx={{
-							cursor: "grab",
-							"&:active": { cursor: "grabbing" },
-							touchAction: "none",
-						}}
-					>
-						<Icon
-							icon={GripVertical}
-							size={16}
-							color={theme.palette.text.secondary}
-						/>
-					</Box>
-				}
-			>
-				<Component />
-			</CardSlotContext.Provider>
-		</Box>
-	);
-};
-
-export const CardGrid = ({
-	cards,
-	onReorder,
-}: {
-	cards: CardDefinition[];
-	onReorder: (sourceIndex: number, destIndex: number) => void;
-}) => {
-	const theme = useTheme();
-
-	const sensors = useSensors(
-		useSensor(PointerSensor, {
-			activationConstraint: { distance: 8 },
-		})
-	);
-
-	const handleDragEnd = (event: DragEndEvent) => {
-		const { active, over } = event;
-		if (!over || active.id === over.id) return;
-		const sourceIndex = cards.findIndex((c) => c.id === active.id);
-		const destIndex = cards.findIndex((c) => c.id === over.id);
-		if (sourceIndex !== -1 && destIndex !== -1) onReorder(sourceIndex, destIndex);
-	};
-
-	const cardIds = cards.map((c) => c.id);
-
-	return (
-		<DndContext
-			sensors={sensors}
-			collisionDetection={closestCenter}
-			onDragEnd={handleDragEnd}
-		>
-			<SortableContext
-				items={cardIds}
-				strategy={rectSortingStrategy}
-			>
-				<Box
-					display="flex"
-					flexWrap="wrap"
-					gap={theme.spacing(LAYOUT.MD)}
-					alignItems="stretch"
-				>
-					{cards.map((card) => (
-						<SortableCard
-							key={card.id}
-							card={card}
-						/>
-					))}
-				</Box>
-			</SortableContext>
-		</DndContext>
-	);
-};
@@ -1,137 +0,0 @@
-import Box from "@mui/material/Box";
-import Typography from "@mui/material/Typography";
-import FormControlLabel from "@mui/material/FormControlLabel";
-import Stack from "@mui/material/Stack";
-import { useTheme } from "@mui/material/styles";
-import { useTranslation } from "react-i18next";
-import { useMemo } from "react";
-
-import { Dialog, Checkbox, Button } from "@/Components/inputs";
-import { LAYOUT } from "@/Utils/Theme/constants";
-import { CardGroups, type CardDefinition, type CardGroup, type CardId } from "../cards";
-
-interface CardPickerProps {
-	open: boolean;
-	available: CardDefinition[];
-	selected: CardId[];
-	allSelected: boolean;
-	onAdd: (id: CardId) => void;
-	onRemove: (id: CardId) => void;
-	onSelectAll: () => void;
-	onDeselectAll: () => void;
-	onReset: () => void;
-	onClose: () => void;
-}
-
-/**
- * Cards are grouped by sidebar section, not by load cost: you look for a card
- * where you look for the feature it belongs to. Admin-only cards never reach
- * `available` for a non-admin, so nobody is offered a card they cannot load.
- */
-export const CardPicker = ({
-	open,
-	available,
-	selected,
-	allSelected,
-	onAdd,
-	onRemove,
-	onSelectAll,
-	onDeselectAll,
-	onReset,
-	onClose,
-}: CardPickerProps) => {
-	const theme = useTheme();
-	const { t } = useTranslation();
-
-	const grouped = useMemo(() => {
-		return CardGroups.map((group: CardGroup) => ({
-			group,
-			cards: available.filter((card) => card.group === group),
-		})).filter((entry) => entry.cards.length > 0);
-	}, [available]);
-
-	const chosen = new Set(selected);
-	const someSelected = selected.length > 0 && !allSelected;
-
-	return (
-		<Dialog
-			open={open}
-			maxWidth="sm"
-			fullWidth
-			title={t("pages.dashboard.picker.title")}
-			// Reset sits alone on the left, away from Done — a destructive action
-			// should not be adjacent to the one people reach for by reflex.
-			onCancel={onReset}
-			cancelText={t("pages.dashboard.picker.reset")}
-			onConfirm={onClose}
-			confirmText={t("pages.dashboard.picker.done")}
-			additionalButtons={
-				<Button
-					variant="outlined"
-					color="secondary"
-					onClick={allSelected ? onDeselectAll : onSelectAll}
-					startIcon={
-						<Checkbox
-							checked={allSelected}
-							indeterminate={someSelected}
-							size="small"
-							sx={{ p: 0 }}
-							onChange={() => {}}
-						/>
-					}
-				>
-					{t("pages.dashboard.picker.selectAll")}
-				</Button>
-			}
-		>
-			{/*
-			 * Two columns: seventeen cards in one list makes the dialog scroll,
-			 * which hides most of the catalogue. Groups flow down the columns and
-			 * are kept whole so a group is never split across the gap.
-			 */}
-			<Box
-				pt={theme.spacing(LAYOUT.SM)}
-				sx={{
-					columnCount: { xs: 1, sm: 2 },
-					columnGap: theme.spacing(LAYOUT.XL),
-				}}
-			>
-				{grouped.map(({ group, cards }) => (
-					<Stack
-						key={group}
-						gap={theme.spacing(LAYOUT.XXS)}
-						pb={theme.spacing(LAYOUT.MD)}
-						sx={{ breakInside: "avoid" }}
-					>
-						<Typography
-							variant="eyebrow"
-							color={theme.palette.text.disabled}
-						>
-							{t(`pages.dashboard.picker.groups.${group}`, {
-								defaultValue: group,
-							})}
-						</Typography>
-						{cards.map((card) => (
-							<FormControlLabel
-								key={card.id}
-								label={
-									<Typography color={theme.palette.text.primary}>
-										{t(`pages.dashboard.cards.${card.key}.title`)}
-									</Typography>
-								}
-								control={
-									<Checkbox
-										checked={chosen.has(card.id)}
-										onChange={() =>
-											chosen.has(card.id) ? onRemove(card.id) : onAdd(card.id)
-										}
-									/>
-								}
-							/>
-						))}
-					</Stack>
-				))}
-			</Box>
-		</Dialog>
-	);
-};
@@ -1,275 +0,0 @@
-import Stack from "@mui/material/Stack";
-import Box from "@mui/material/Box";
-import Typography from "@mui/material/Typography";
-import { useTheme } from "@mui/material/styles";
-import { Link as RouterLink } from "react-router-dom";
-
-import { Tooltip } from "@/Components/design-elements";
-import { LAYOUT } from "@/Utils/Theme/constants";
-import { typographyLevels } from "@/Utils/Theme/Palette";
-
-import type { ReactNode } from "react";
-
-/**
- * One thickness for every bar on the dashboard. Plain and segmented bars sit
- * side by side across cards, so differing weights read as an inconsistency
- * rather than as emphasis.
- */
-const BAR_HEIGHT = 8;
-
-export interface BarSegment {
-	key: string;
-	value: number;
-	color: string;
-	/** Tooltip text, since the segments themselves carry no labels. */
-	label: string;
-}
-
-/**
- * A proportional bar. `value` and `max` share whatever unit the caller uses;
- * percentages come in as 0-100, not as the API's 0-1 fractions.
- */
-export const CardBar = ({
-	value,
-	max = 100,
-	color,
-}: {
-	value: number;
-	max?: number;
-	color: string;
-}) => {
-	const theme = useTheme();
-	const ratio = max > 0 ? Math.min(Math.max(value / max, 0), 1) : 0;
-
-	return (
-		<Box
-			width="100%"
-			height={BAR_HEIGHT}
-			borderRadius={theme.shape.borderRadius}
-			bgcolor={theme.palette.action.hover}
-			sx={{ overflow: "hidden" }}
-		>
-			<Box
-				width={`${ratio * 100}%`}
-				height="100%"
-				bgcolor={color}
-				sx={{ transition: "width 0.3s ease" }}
-			/>
-		</Box>
-	);
-};
-
-/**
- * One bar divided into proportional segments — the shape of a whole split into
- * parts, where the relative sizes are the point rather than any single value.
- *
- * Zero-value segments are dropped so they cannot appear as hairlines, and each
- * segment carries a tooltip because the bar itself has no room for labels.
- */
-export const CardSegmentedBar = ({ segments }: { segments: BarSegment[] }) => {
-	const theme = useTheme();
-	const visible = segments.filter((segment) => segment.value > 0);
-	const total = visible.reduce((sum, segment) => sum + segment.value, 0);
-
-	return (
-		<Stack
-			direction="row"
-			width="100%"
-			height={BAR_HEIGHT}
-			borderRadius={theme.shape.borderRadius}
-			bgcolor={theme.palette.action.hover}
-			gap="1px"
-			sx={{ overflow: "hidden" }}
-		>
-			{total > 0 &&
-				visible.map((segment) => (
-					<Tooltip
-						key={segment.key}
-						title={segment.label}
-					>
-						<Box
-							width={`${(segment.value / total) * 100}%`}
-							height="100%"
-							bgcolor={segment.color}
-							sx={{ transition: "width 0.3s ease" }}
-						/>
-					</Tooltip>
-				))}
-		</Stack>
-	);
-};
-
-/** A clickable list row. Rows link to the entity they describe. */
-export const CardRow = ({ to, children }: { to?: string; children: ReactNode }) => {
-	const theme = useTheme();
-
-	return (
-		<Stack
-			{...(to ? { component: RouterLink, to } : {})}
-			direction="row"
-			alignItems="center"
-			gap={theme.spacing(LAYOUT.SM)}
-			px={theme.spacing(LAYOUT.XS)}
-			py={theme.spacing(LAYOUT.XS)}
-			mx={`-${theme.spacing(LAYOUT.XS)}`}
-			borderRadius={theme.shape.borderRadius}
-			color="inherit"
-			sx={{
-				textDecoration: "none",
-				...(to && {
-					"&:hover": { backgroundColor: theme.palette.action.hover },
-				}),
-			}}
-		>
-			{children}
-		</Stack>
-	);
-};
-
-/** Name plus optional secondary line, truncating rather than wrapping. */
-export const CardRowLabel = ({
-	primary,
-	secondary,
-}: {
-	primary: string;
-	secondary?: string | null;
-}) => {
-	const theme = useTheme();
-
-	return (
-		<Stack
-			minWidth={0}
-			flex={1}
-		>
-			<Typography
-				color={theme.palette.text.primary}
-				noWrap
-			>
-				{primary}
-			</Typography>
-			{secondary && (
-				<Typography
-					color={theme.palette.text.secondary}
-					noWrap
-				>
-					{secondary}
-				</Typography>
-			)}
-		</Stack>
-	);
-};
-
-/** A single large figure with a caption — the shape of the stat cards. */
-export const CardFigure = ({
-	value,
-	caption,
-	color,
-}: {
-	value: string;
-	caption?: string;
-	color?: string;
-}) => {
-	const theme = useTheme();
-
-	return (
-		<Stack gap={theme.spacing(LAYOUT.XXS)}>
-			<Typography
-				fontSize={typographyLevels.xxl}
-				fontWeight={300}
-				color={color ?? theme.palette.text.primary}
-				lineHeight={1.1}
-			>
-				{value}
-			</Typography>
-			{caption && <Typography color={theme.palette.text.secondary}>{caption}</Typography>}
-		</Stack>
-	);
-};
-
-/**
- * A label with its value on the right — the shape almost every stat card
- * repeats. `color` highlights the value alone, leaving the label quiet.
- */
-export const CardStatLine = ({
-	label,
-	value,
-	color,
-}: {
-	label: string;
-	value: string;
-	color?: string;
-}) => {
-	const theme = useTheme();
-
-	return (
-		<Stack
-			direction="row"
-			alignItems="baseline"
-			justifyContent="space-between"
-			gap={theme.spacing(LAYOUT.SM)}
-		>
-			<Typography color={theme.palette.text.secondary}>{label}</Typography>
-			<Typography
-				color={color ?? theme.palette.text.primary}
-				noWrap
-			>
-				{value}
-			</Typography>
-		</Stack>
-	);
-};
-
-/**
- * A CardStatLine with a proportional bar beneath it — the ranking and
- * breakdown row. `max` defaults to a percentage scale; pass the largest value
- * in the set to make bars relative to each other instead.
- *
- * `label` may be a node so callers can put a "N down" flag beside the name.
- */
-export const CardMeterRow = ({
-	label,
-	value,
-	max,
-	color,
-	trailing,
-}: {
-	label: ReactNode;
-	value: number;
-	max?: number;
-	color: string;
-	trailing?: ReactNode;
-}) => {
-	const theme = useTheme();
-
-	return (
-		<Stack
-			flex={1}
-			minWidth={0}
-			gap={theme.spacing(LAYOUT.XXS)}
-		>
-			<Stack
-				direction="row"
-				alignItems="center"
-				justifyContent="space-between"
-				gap={theme.spacing(LAYOUT.SM)}
-			>
-				{typeof label === "string" ? (
-					<Typography
-						color={theme.palette.text.primary}
-						noWrap
-					>
-						{label}
-					</Typography>
-				) : (
-					label
-				)}
-				{trailing}
-			</Stack>
-			<CardBar
-				value={value}
-				max={max}
-				color={color}
-			/>
-		</Stack>
-	);
-};
@@ -1,7 +0,0 @@
-import { createContext, useContext } from "react";
-
-import type { ReactNode } from "react";
-
-export const CardSlotContext = createContext<ReactNode>(null);
-
-export const useCardSlot = (): ReactNode => useContext(CardSlotContext);
@@ -1,219 +0,0 @@
-import Stack from "@mui/material/Stack";
-import Typography from "@mui/material/Typography";
-import { useTheme } from "@mui/material/styles";
-import { useTranslation } from "react-i18next";
-import { useMemo } from "react";
-
-import { useGet } from "@/Hooks/UseApi";
-import { LAYOUT } from "@/Utils/Theme/constants";
-import { formatTimestamp } from "@/Utils/TimeUtils";
-import { DashboardCard, CardMessage } from "../DashboardCard";
-import { CardFigure, CardRow, CardRowLabel, CardStatLine } from "../CardPrimitives";
-
-import { REFRESH_INTERVAL_MS, SLOW_REFRESH_INTERVAL_MS } from "../../cards";
-
-import type { QueueMetrics } from "@/Types/Queue";
-import type { Log } from "@/Types/Log";
-import type { User } from "@/Types/User";
-
-const MAX_ERROR_ROWS = 5;
-
-/** Reads as a single reassurance line while nothing is failing. */
-export const ChecksOnScheduleCard = () => {
-	const theme = useTheme();
-	const { t } = useTranslation();
-	const { data, isLoading, isValidating, error } = useGet<QueueMetrics>(
-		"/queue/metrics",
-		{},
-		{ refreshInterval: REFRESH_INTERVAL_MS }
-	);
-
-	const healthy = data?.failingJobs === 0;
-
-	return (
-		<DashboardCard
-			title={t("pages.dashboard.cards.checksOnSchedule.title")}
-			to="/logs"
-			isLoading={isLoading && !data}
-			error={error}
-			isStale={isValidating && Boolean(data)}
-		>
-			{data && (
-				<Stack gap={theme.spacing(LAYOUT.SM)}>
-					{healthy ? (
-						<CardMessage
-							text={t("pages.dashboard.cards.checksOnSchedule.healthy", {
-								jobs: data.jobs,
-								workers: data.workers.length,
-							})}
-						/>
-					) : (
-						<>
-							<CardFigure
-								value={String(data.failingJobs)}
-								caption={t("pages.dashboard.cards.checksOnSchedule.failing")}
-								color={theme.palette.error.main}
-							/>
-							<Stack gap={theme.spacing(LAYOUT.XS)}>
-								{data.jobsWithFailures.slice(0, MAX_ERROR_ROWS).map((job) => (
-									<CardRow key={String(job.monitorId)}>
-										<CardRowLabel
-											primary={job.monitorUrl ?? String(job.monitorId)}
-											secondary={job.failReason}
-										/>
-										<Typography
-											color={theme.palette.error.main}
-											flexShrink={0}
-										>
-											{job.failCount}
-										</Typography>
-									</CardRow>
-								))}
-							</Stack>
-						</>
-					)}
-					<CardStatLine
-						label={t("pages.dashboard.cards.checksOnSchedule.scheduled")}
-						value={String(data.jobs)}
-					/>
-					<CardStatLine
-						label={t("pages.dashboard.cards.checksOnSchedule.runningNow")}
-						value={String(data.activeJobs)}
-					/>
-				</Stack>
-			)}
-		</DashboardCard>
-	);
-};
-
-/**
- * /logs is an in-memory ring buffer capped at 1000 entries, wiped on restart,
- * and it ignores page/rowsPerPage. It rotates fast, so this is deliberately
- * worded "recent" rather than "all".
- */
-export const RecentErrorsCard = () => {
-	const theme = useTheme();
-	const { t } = useTranslation();
-	const { data, isLoading, isValidating, error } = useGet<Log[]>(
-		"/logs",
-		{},
-		{ refreshInterval: SLOW_REFRESH_INTERVAL_MS }
-	);
-
-	const { errors, warnings, newest } = useMemo(() => {
-		const relevant = (data ?? []).filter(
-			(entry) => entry.level === "error" || entry.level === "warn"
-		);
-		const sorted = [...relevant].sort(
-			(a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime()
-		);
-		return {
-			errors: relevant.filter((entry) => entry.level === "error").length,
-			warnings: relevant.filter((entry) => entry.level === "warn").length,
-			newest: sorted.slice(0, MAX_ERROR_ROWS),
-		};
-	}, [data]);
-
-	return (
-		<DashboardCard
-			title={t("pages.dashboard.cards.recentErrors.title")}
-			to="/logs"
-			isLoading={isLoading && !data}
-			error={error}
-			isStale={isValidating && Boolean(data)}
-			action={
-				errors > 0 ? (
-					<Typography color={theme.palette.error.main}>
-						{t("pages.dashboard.cards.recentErrors.count", { count: errors })}
-					</Typography>
-				) : null
-			}
-		>
-			{newest.length === 0 ? (
-				<CardMessage text={t("pages.dashboard.cards.recentErrors.empty")} />
-			) : (
-				<Stack gap={theme.spacing(LAYOUT.SM)}>
-					<CardStatLine
-						label={t("pages.dashboard.cards.recentErrors.warnings")}
-						value={String(warnings)}
-					/>
-					<Stack gap={theme.spacing(LAYOUT.XS)}>
-						{newest.map((entry, index) => (
-							<CardRow key={`${entry.timestamp}-${index}`}>
-								<CardRowLabel
-									primary={entry.message}
-									secondary={[entry.service, entry.method].filter(Boolean).join(" · ")}
-								/>
-								<Typography
-									color={
-										entry.level === "error"
-											? theme.palette.error.main
-											: theme.palette.warning.main
-									}
-									flexShrink={0}
-								>
-									{formatTimestamp(entry.timestamp)}
-								</Typography>
-							</CardRow>
-						))}
-					</Stack>
-				</Stack>
-			)}
-		</DashboardCard>
-	);
-};
-
-/** Never empty — at minimum the current user exists. */
-export const TeamCard = () => {
-	const theme = useTheme();
-	const { t } = useTranslation();
-	const { data, isLoading, isValidating, error } = useGet<User[]>("/auth/users");
-
-	const { total, byRole, unverified } = useMemo(() => {
-		const users = data ?? [];
-		const roles = new Map<string, number>();
-		for (const user of users) {
-			for (const role of user.role ?? []) {
-				roles.set(role, (roles.get(role) ?? 0) + 1);
-			}
-		}
-		return {
-			total: users.length,
-			byRole: [...roles.entries()].sort((a, b) => b[1] - a[1]),
-			unverified: users.filter((user) => !user.isVerified).length,
-		};
-	}, [data]);
-
-	return (
-		<DashboardCard
-			title={t("pages.dashboard.cards.team.title")}
-			to="/account/team"
-			isLoading={isLoading && !data}
-			error={error}
-			isStale={isValidating && Boolean(data)}
-		>
-			{data && (
-				<Stack gap={theme.spacing(LAYOUT.SM)}>
-					<CardFigure
-						value={String(total)}
-						caption={t("pages.dashboard.cards.team.members", { count: total })}
-					/>
-					{byRole.map(([role, count]) => (
-						<CardStatLine
-							key={role}
-							label={t(`common.auth.roles.${role}`, { defaultValue: role })}
-							value={String(count)}
-						/>
-					))}
-					{unverified > 0 && (
-						<CardStatLine
-							label={t("pages.dashboard.cards.team.unverified")}
-							value={String(unverified)}
-							color={theme.palette.warning.main}
-						/>
-					)}
-				</Stack>
-			)}
-		</DashboardCard>
-	);
-};
@@ -1,97 +0,0 @@
-import Stack from "@mui/material/Stack";
-import Typography from "@mui/material/Typography";
-import { useTheme } from "@mui/material/styles";
-import { useTranslation } from "react-i18next";
-
-import { LAYOUT } from "@/Utils/Theme/constants";
-import { DashboardCard, CardMessage } from "../DashboardCard";
-import { CardMeterRow, CardRow } from "../CardPrimitives";
-
-export interface BreakdownBucket {
-	/** Stable key and displayed label. */
-	key: string;
-	label: string;
-	total: number;
-	down: number;
-	/** Where the row links to, if anywhere. */
-	to?: string;
-}
-
-/**
- * "How the fleet splits by X" — one proportional row per bucket, flagging any
- * bucket with something down. Monitors by type and Monitors by group are the
- * same card over different keys, so they share this shell.
- */
-export const BreakdownCard = ({
-	titleKey,
-	emptyKey,
-	to,
-	buckets,
-	isLoading,
-	isStale,
-	error,
-}: {
-	titleKey: string;
-	emptyKey: string;
-	to?: string;
-	buckets: BreakdownBucket[];
-	isLoading?: boolean;
-	isStale?: boolean;
-	error?: unknown;
-}) => {
-	const theme = useTheme();
-	const { t } = useTranslation();
-
-	const max = Math.max(0, ...buckets.map((bucket) => bucket.total));
-
-	return (
-		<DashboardCard
-			title={t(titleKey)}
-			to={to}
-			isLoading={isLoading}
-			error={error}
-			isStale={isStale}
-		>
-			{buckets.length === 0 ? (
-				<CardMessage text={t(emptyKey)} />
-			) : (
-				<Stack gap={theme.spacing(LAYOUT.SM)}>
-					{buckets.map((bucket) => (
-						<CardRow
-							key={bucket.key}
-							to={bucket.to}
-						>
-							<CardMeterRow
-								label={bucket.label}
-								value={bucket.total}
-								max={max}
-								color={
-									bucket.down > 0 ? theme.palette.error.main : theme.palette.primary.main
-								}
-								trailing={
-									<Stack
-										direction="row"
-										alignItems="center"
-										gap={theme.spacing(LAYOUT.XS)}
-										flexShrink={0}
-									>
-										{bucket.down > 0 && (
-											<Typography color={theme.palette.error.main}>
-												{t("pages.dashboard.cards.monitorsByType.down", {
-													count: bucket.down,
-												})}
-											</Typography>
-										)}
-										<Typography color={theme.palette.text.secondary}>
-											{bucket.total}
-										</Typography>
-									</Stack>
-								}
-							/>
-						</CardRow>
-					))}
-				</Stack>
-			)}
-		</DashboardCard>
-	);
-};
@@ -1,143 +0,0 @@
-import Stack from "@mui/material/Stack";
-import Typography from "@mui/material/Typography";
-import { useTheme } from "@mui/material/styles";
-import { useTranslation } from "react-i18next";
-import { useMemo } from "react";
-
-import { LAYOUT } from "@/Utils/Theme/constants";
-import { DashboardCard, CardMessage } from "../DashboardCard";
-import { CardBar, CardRow, CardRowLabel } from "../CardPrimitives";
-import { useMonitors } from "../../useDashboardData";
-
-import { latestCheck } from "../../checks";
-
-import type { Monitor } from "@/Types/Monitor";
-
-// <60% fine, 60-85% warm, above that hot.
-const WARM = 60;
-const HOT = 85;
-
-interface ServerUsage {
-	monitor: Monitor;
-	cpu: number | null;
-	memory: number | null;
-	disk: number | null;
-	peak: number;
-}
-
-const Metric = ({ label, value }: { label: string; value: number | null }) => {
-	const theme = useTheme();
-	const color =
-		value === null
-			? theme.palette.text.secondary
-			: value > HOT
-				? theme.palette.error.main
-				: value > WARM
-					? theme.palette.warning.main
-					: theme.palette.primary.main;
-
-	return (
-		<Stack
-			flex={1}
-			minWidth={0}
-			gap={theme.spacing(LAYOUT.XXS)}
-		>
-			<Stack
-				direction="row"
-				alignItems="baseline"
-				justifyContent="space-between"
-				gap={theme.spacing(LAYOUT.XS)}
-			>
-				<Typography color={theme.palette.text.secondary}>{label}</Typography>
-				<Typography color={color}>
-					{/* A down server reports nothing — show a dash, never 0%. */}
-					{value === null ? "—" : `${value.toFixed(1)}%`}
-				</Typography>
-			</Stack>
-			<CardBar
-				value={value ?? 0}
-				color={color}
-			/>
-		</Stack>
-	);
-};
-
-export const BusiestServersCard = () => {
-	const theme = useTheme();
-	const { t } = useTranslation();
-	const { data, isLoading, isValidating, error } = useMonitors();
-
-	const servers = useMemo<ServerUsage[]>(() => {
-		return (data?.monitors ?? [])
-			.filter((monitor) => monitor.type === "hardware")
-			.map((monitor) => {
-				const latest = latestCheck(monitor);
-				// snake_case here, unlike camelCase in HardwareCheckStats, and
-				// these are 0-1 fractions, so scale to percent.
-				const toPercent = (value: number | undefined) =>
-					typeof value === "number" ? value * 100 : null;
-				const cpu = toPercent(latest?.cpu?.usage_percent);
-				const memory = toPercent(latest?.memory?.usage_percent);
-				const disks = (latest?.disk ?? [])
-					.map((entry) => entry.usage_percent)
-					.filter((value): value is number => typeof value === "number");
-				const disk = disks.length > 0 ? Math.max(...disks) * 100 : null;
-				return {
-					monitor,
-					cpu,
-					memory,
-					disk,
-					peak: Math.max(cpu ?? 0, memory ?? 0, disk ?? 0),
-				};
-			})
-			.sort((a, b) => b.peak - a.peak);
-	}, [data]);
-
-	return (
-		<DashboardCard
-			title={t("pages.dashboard.cards.busiestServers.title")}
-			to="/infrastructure"
-			isLoading={isLoading && !data}
-			error={error}
-			isStale={isValidating && Boolean(data)}
-		>
-			{servers.length === 0 ? (
-				<CardMessage text={t("pages.dashboard.cards.busiestServers.empty")} />
-			) : (
-				<Stack gap={theme.spacing(LAYOUT.MD)}>
-					{servers.map(({ monitor, cpu, memory, disk }) => (
-						<CardRow
-							key={monitor.id}
-							to={`/infrastructure/${monitor.id}`}
-						>
-							<Stack
-								flex={1}
-								minWidth={0}
-								gap={theme.spacing(LAYOUT.XS)}
-							>
-								<CardRowLabel primary={monitor.name} />
-								<Stack
-									direction="row"
-									gap={theme.spacing(LAYOUT.MD)}
-								>
-									<Metric
-										label={t("pages.dashboard.cards.busiestServers.cpu")}
-										value={cpu}
-									/>
-									<Metric
-										label={t("pages.dashboard.cards.busiestServers.memory")}
-										value={memory}
-									/>
-									<Metric
-										label={t("pages.dashboard.cards.busiestServers.disk")}
-										value={disk}
-									/>
-								</Stack>
-							</Stack>
-						</CardRow>
-					))}
-				</Stack>
-			)}
-		</DashboardCard>
-	);
-};
@@ -1,93 +0,0 @@
-import Stack from "@mui/material/Stack";
-import { useTheme } from "@mui/material/styles";
-import { useTranslation } from "react-i18next";
-
-import { useGet } from "@/Hooks/UseApi";
-import { LAYOUT } from "@/Utils/Theme/constants";
-import { formatDuration } from "@/Utils/TimeUtils";
-import { DashboardCard } from "../DashboardCard";
-import { CardBar, CardStatLine } from "../CardPrimitives";
-
-import { REFRESH_INTERVAL_MS } from "../../cards";
-
-import type { Diagnostics } from "@/Types/Diagnostics";
-
-const BYTES_PER_MB = 1024 * 1024;
-
-// Banding from CARD-SPECS: warm at 50ms of event-loop delay, hot at 200ms;
-// heap warm past 80% of the V8 limit.
-const EVENT_LOOP_WARM_MS = 50;
-const EVENT_LOOP_HOT_MS = 200;
-const HEAP_WARM_RATIO = 0.8;
-
-/**
- * The one card that is never empty — it reports on Checkmate itself, so it
- * works on a fresh install with zero monitors. Admin only.
- */
-export const CheckmateServerCard = () => {
-	const theme = useTheme();
-	const { t } = useTranslation();
-	const { data, isLoading, isValidating, error } = useGet<Diagnostics>(
-		"/diagnostic/system",
-		{},
-		{ refreshInterval: REFRESH_INTERVAL_MS }
-	);
-
-	const usedHeap = data?.v8HeapStats.usedHeapSizeBytes ?? 0;
-	const heapLimit = data?.v8HeapStats.heapSizeLimitBytes ?? 0;
-	const heapRatio = heapLimit > 0 ? usedHeap / heapLimit : 0;
-	const heapColor =
-		heapRatio > HEAP_WARM_RATIO ? theme.palette.warning.main : theme.palette.primary.main;
-
-	const eventLoopMs = data?.eventLoopDelayMs ?? 0;
-	const eventLoopColor =
-		eventLoopMs > EVENT_LOOP_HOT_MS
-			? theme.palette.error.main
-			: eventLoopMs > EVENT_LOOP_WARM_MS
-				? theme.palette.warning.main
-				: theme.palette.text.primary;
-
-	return (
-		<DashboardCard
-			title={t("pages.dashboard.cards.checkmateServer.title")}
-			to="/logs"
-			isLoading={isLoading && !data}
-			error={error}
-			isStale={isValidating && Boolean(data)}
-		>
-			{data && (
-				<Stack gap={theme.spacing(LAYOUT.SM)}>
-					<Stack gap={theme.spacing(LAYOUT.XXS)}>
-						<CardStatLine
-							label={t("pages.dashboard.cards.checkmateServer.memory")}
-							value={`${Math.round(usedHeap / BYTES_PER_MB)} / ${Math.round(
-								heapLimit / BYTES_PER_MB
-							)} MB`}
-							color={heapColor}
-						/>
-						<CardBar
-							value={heapRatio * 100}
-							color={heapColor}
-						/>
-					</Stack>
-					<CardStatLine
-						label={t("pages.dashboard.cards.checkmateServer.eventLoop")}
-						value={`${eventLoopMs.toFixed(1)} ms`}
-						color={eventLoopColor}
-					/>
-					<CardStatLine
-						label={t("pages.dashboard.cards.checkmateServer.uptime")}
-						value={formatDuration(data.uptimeMs)}
-					/>
-					<CardStatLine
-						label={t("pages.dashboard.cards.checkmateServer.database")}
-						value={t("pages.dashboard.cards.checkmateServer.readsWrites", {
-							reads: data.mongoStats.readsPerSecond.toFixed(1),
-							writes: data.mongoStats.writesPerSecond.toFixed(1),
-						})}
-					/>
-				</Stack>
-			)}
-		</DashboardCard>
-	);
-};
@@ -1,157 +0,0 @@
-import Stack from "@mui/material/Stack";
-import Box from "@mui/material/Box";
-import Typography from "@mui/material/Typography";
-import { useTheme } from "@mui/material/styles";
-import { useTranslation } from "react-i18next";
-import { useMemo } from "react";
-
-import { Dot } from "@/Components/design-elements";
-import { LAYOUT } from "@/Utils/Theme/constants";
-import { getStatusColor, getMonitorPath } from "@/Utils/MonitorUtils";
-import { formatStatusCode } from "@/Utils/statusCode";
-import { formatDuration } from "@/Utils/TimeUtils";
-import { DashboardCard, CardMessage } from "../DashboardCard";
-import { CardRow } from "../CardPrimitives";
-import { Sparkline } from "../Sparkline";
-import { useMonitors } from "../../useDashboardData";
-
-import { latestCheck } from "../../checks";
-
-import type { Monitor, MonitorStatus } from "@/Types/Monitor";
-
-const SPARKLINE_WIDTH = 80;
-
-const STATUS_RANK: Partial<Record<MonitorStatus, number>> = {
-	down: 1,
-	breached: 2,
-};
-
-const isProblem = (monitor: Monitor) => STATUS_RANK[monitor.status] !== undefined;
-
-/**
- * How long the monitor has been down, from the oldest consecutive failing
- * check. recentChecks is oldest-first, so the run is walked back from the end.
- */
-const downSince = (monitor: Monitor): string | null => {
-	const checks = monitor.recentChecks ?? [];
-	let oldestFailing: string | null = null;
-	for (let index = checks.length - 1; index >= 0; index -= 1) {
-		if (checks[index].status !== false) {
-			break;
-		}
-		oldestFailing = checks[index].createdAt;
-	}
-	return oldestFailing;
-};
-
-export const CurrentlyDownCard = () => {
-	const theme = useTheme();
-	const { t } = useTranslation();
-	const { data, isLoading, isValidating, error } = useMonitors();
-
-	const problems = useMemo(() => {
-		const monitors = data?.monitors ?? [];
-		return monitors
-			.filter(isProblem)
-			.map((monitor) => ({ monitor, since: downSince(monitor) }))
-			.sort((a, b) => {
-				const rank =
-					(STATUS_RANK[a.monitor.status] ?? 99) - (STATUS_RANK[b.monitor.status] ?? 99);
-				if (rank !== 0) {
-					return rank;
-				}
-				// Tie-break on longest downtime: the older timestamp ranks first.
-				return new Date(a.since ?? 0).getTime() - new Date(b.since ?? 0).getTime();
-			});
-	}, [data]);
-
-	return (
-		<DashboardCard
-			title={t("pages.dashboard.cards.currentlyDown.title")}
-			to="/incidents"
-			isLoading={isLoading && !data}
-			error={error}
-			isStale={isValidating && Boolean(data)}
-			action={
-				problems.length > 0 ? (
-					<Typography color={theme.palette.error.main}>
-						{t("pages.dashboard.cards.currentlyDown.count", {
-							count: problems.length,
-						})}
-					</Typography>
-				) : null
-			}
-		>
-			{problems.length === 0 ? (
-				<CardMessage text={t("pages.dashboard.cards.currentlyDown.empty")} />
-			) : (
-				<Stack gap={theme.spacing(LAYOUT.XS)}>
-					{problems.map(({ monitor, since }) => (
-						<CardRow
-							key={monitor.id}
-							to={`/${getMonitorPath(monitor.type)}/${monitor.id}`}
-						>
-							<Dot
-								color={getStatusColor(monitor.status, theme)}
-								size="md"
-							/>
-							<Stack
-								flex={1}
-								minWidth={0}
-								gap={theme.spacing(LAYOUT.XXS)}
-							>
-								<Stack
-									direction="row"
-									alignItems="baseline"
-									justifyContent="space-between"
-									gap={theme.spacing(LAYOUT.SM)}
-								>
-									<Typography
-										color={theme.palette.text.primary}
-										noWrap
-									>
-										{monitor.name}
-									</Typography>
-									{since && (
-										<Typography
-											color={theme.palette.error.main}
-											flexShrink={0}
-										>
-											{formatDuration(Date.now() - new Date(since).getTime())}
-										</Typography>
-									)}
-								</Stack>
-								<Stack
-									direction="row"
-									alignItems="center"
-									justifyContent="space-between"
-									gap={theme.spacing(LAYOUT.SM)}
-								>
-									{/* Not StatusCodeLabel: its Tooltip is focusable, and a
-									    focusable element inside the row's link is unreachable
-									    by keyboard. */}
-									<Typography
-										color={theme.palette.text.secondary}
-										noWrap
-									>
-										{monitor.type} ·{" "}
-										{formatStatusCode(latestCheck(monitor)?.statusCode, t)}
-									</Typography>
-									<Box
-										width={SPARKLINE_WIDTH}
-										flexShrink={0}
-									>
-										<Sparkline
-											checks={monitor.recentChecks ?? []}
-											color={theme.palette.error.main}
-										/>
-									</Box>
-								</Stack>
-							</Stack>
-						</CardRow>
-					))}
-				</Stack>
-			)}
-		</DashboardCard>
-	);
-};
@@ -1,54 +0,0 @@
-import Stack from "@mui/material/Stack";
-import { useTheme } from "@mui/material/styles";
-import { useTranslation } from "react-i18next";
-
-import { useGet } from "@/Hooks/UseApi";
-import { LAYOUT } from "@/Utils/Theme/constants";
-import { DashboardCard, CardMessage } from "../DashboardCard";
-import { CardBar, CardFigure } from "../CardPrimitives";
-
-import type { ChecksSummary } from "@/Types/Check";
-
-// Day only. `dateRange=week` returns figures identical to `day`, so a range
-// selector here would silently lie.
-const SUMMARY_URL = "/checks/team/summary?dateRange=day";
-
-export const FailedChecksCard = () => {
-	const theme = useTheme();
-	const { t } = useTranslation();
-	const { data, isLoading, isValidating, error } = useGet<ChecksSummary>(SUMMARY_URL);
-
-	const total = data?.totalChecks ?? 0;
-	const failed = data?.downChecks ?? 0;
-	const percentage = total > 0 ? (failed / total) * 100 : 0;
-	const color = percentage > 10 ? theme.palette.error.main : theme.palette.success.main;
-
-	return (
-		<DashboardCard
-			title={t("pages.dashboard.cards.failedChecks.title")}
-			to="/checks"
-			isLoading={isLoading && !data}
-			error={error}
-			isStale={isValidating && Boolean(data)}
-		>
-			{total === 0 ? (
-				<CardMessage text={t("pages.dashboard.cards.failedChecks.empty")} />
-			) : (
-				<Stack gap={theme.spacing(LAYOUT.SM)}>
-					<CardFigure
-						value={`${percentage.toFixed(1)}%`}
-						caption={t("pages.dashboard.cards.failedChecks.ratio", {
-							failed: failed.toLocaleString(),
-							total: total.toLocaleString(),
-						})}
-						color={color}
-					/>
-					<CardBar
-						value={percentage}
-						color={color}
-					/>
-				</Stack>
-			)}
-		</DashboardCard>
-	);
-};
@@ -1,138 +0,0 @@
-import Stack from "@mui/material/Stack";
-import Typography from "@mui/material/Typography";
-import { useTheme } from "@mui/material/styles";
-import { Link as RouterLink } from "react-router-dom";
-import { useTranslation } from "react-i18next";
-
-import { Dot } from "@/Components/design-elements";
-import { LAYOUT } from "@/Utils/Theme/constants";
-import { typographyLevels } from "@/Utils/Theme/Palette";
-import { getStatusColor } from "@/Utils/MonitorUtils";
-import { DashboardCard, CardMessage } from "../DashboardCard";
-import { CardSegmentedBar, type BarSegment } from "../CardPrimitives";
-import { useMonitors } from "../../useDashboardData";
-
-import type { MonitorStatus, MonitorsSummary } from "@/Types/Monitor";
-
-// Every state the summary reports, ordered worst first so the bar reads
-// problems-to-healthy left to right and the chips below list what is wrong
-// before what is merely idle. `up` is handled separately as the headline.
-const STATES: { key: string; status: MonitorStatus; field: keyof MonitorsSummary }[] = [
-	{ key: "down", status: "down", field: "downMonitors" },
-	{ key: "breached", status: "breached", field: "breachedMonitors" },
-	{ key: "initializing", status: "initializing", field: "initializingMonitors" },
-	{ key: "maintenance", status: "maintenance", field: "maintenanceMonitors" },
-	{ key: "paused", status: "paused", field: "pausedMonitors" },
-];
-
-export const MonitorStatusCard = () => {
-	const theme = useTheme();
-	const { t } = useTranslation();
-	const { data, isLoading, isValidating, error } = useMonitors();
-	const summary = data?.summary ?? null;
-
-	// Only states that actually have monitors are shown. Padding the card with
-	// zeros says nothing, and a healthy fleet should read as calm rather than as
-	// a row of empty counters.
-	const present = summary
-		? STATES.map((state) => ({ ...state, count: summary[state.field] })).filter(
-				(state) => state.count > 0
-			)
-		: [];
-
-	const segments: BarSegment[] = summary
-		? [
-				{
-					key: "up",
-					value: summary.upMonitors,
-					color: getStatusColor("up", theme),
-					label: `${t("pages.common.monitors.status.up")} — ${summary.upMonitors}`,
-				},
-				...present.map((state) => ({
-					key: state.key,
-					value: state.count,
-					color: getStatusColor(state.status, theme),
-					label: `${t(`pages.common.monitors.status.${state.key}`)} — ${state.count}`,
-				})),
-			]
-		: [];
-
-	return (
-		<DashboardCard
-			title={t("pages.dashboard.cards.monitorStatus.title")}
-			to="/uptime"
-			isLoading={isLoading && !summary}
-			error={error}
-			isStale={isValidating && Boolean(data)}
-		>
-			{!summary || summary.totalMonitors === 0 ? (
-				<CardMessage text={t("pages.dashboard.cards.monitorStatus.empty")} />
-			) : (
-				<Stack gap={theme.spacing(LAYOUT.MD)}>
-					<Stack gap={theme.spacing(LAYOUT.SM)}>
-						<Stack
-							direction="row"
-							alignItems="baseline"
-							gap={theme.spacing(LAYOUT.XS)}
-						>
-							<Typography
-								fontSize={typographyLevels.xxl}
-								fontWeight={300}
-								color={theme.palette.text.primary}
-								lineHeight={1.1}
-							>
-								{summary.upMonitors}
-							</Typography>
-							<Typography color={theme.palette.text.secondary}>
-								{t("pages.dashboard.cards.monitorStatus.upOfTotal", {
-									total: summary.totalMonitors,
-								})}
-							</Typography>
-						</Stack>
-						<CardSegmentedBar segments={segments} />
-					</Stack>
-					{present.length > 0 && (
-						<Stack
-							direction="row"
-							flexWrap="wrap"
-							gap={theme.spacing(LAYOUT.MD)}
-						>
-							{present.map((state) => (
-								<Stack
-									key={state.key}
-									component={RouterLink}
-									// Plain /uptime: the monitors list does not read query
-									// params, so a ?status= filter would be silently dropped
-									// and the link would lie about where it goes.
-									to="/uptime"
-									direction="row"
-									alignItems="center"
-									gap={theme.spacing(LAYOUT.XS)}
-									px={theme.spacing(LAYOUT.XS)}
-									py={theme.spacing(LAYOUT.XXS)}
-									mx={`-${theme.spacing(LAYOUT.XS)}`}
-									borderRadius={theme.shape.borderRadius}
-									sx={{
-										textDecoration: "none",
-										"&:hover": { backgroundColor: theme.palette.action.hover },
-									}}
-								>
-									<Dot
-										color={getStatusColor(state.status, theme)}
-										size="md"
-									/>
-									<Typography color={theme.palette.text.secondary}>
-										{t(`pages.common.monitors.status.${state.key}`)}
-									</Typography>
-									<Typography color={theme.palette.text.primary}>
-										{state.count}
-									</Typography>
-								</Stack>
-							))}
-						</Stack>
-					)}
-				</Stack>
-			)}
-		</DashboardCard>
-	);
-};
@@ -1,43 +0,0 @@
-import { useMemo } from "react";
-
-import { BreakdownCard, type BreakdownBucket } from "./BreakdownCard";
-import { useMonitors } from "../../useDashboardData";
-
-export const MonitorsByGroupCard = () => {
-	const { data, isLoading, isValidating, error } = useMonitors();
-
-	// `group` is a plain string | null on the monitor — there is no groups
-	// endpoint, so the set is whatever monitors actually declare.
-	const buckets = useMemo<BreakdownBucket[]>(() => {
-		const byGroup = new Map<string, BreakdownBucket>();
-		for (const monitor of data?.monitors ?? []) {
-			if (!monitor.group) {
-				continue;
-			}
-			const bucket = byGroup.get(monitor.group) ?? {
-				key: monitor.group,
-				label: monitor.group,
-				total: 0,
-				down: 0,
-			};
-			bucket.total += 1;
-			if (monitor.status === "down" || monitor.status === "breached") {
-				bucket.down += 1;
-			}
-			byGroup.set(monitor.group, bucket);
-		}
-		return [...byGroup.values()].sort((a, b) => b.total - a.total);
-	}, [data]);
-
-	return (
-		<BreakdownCard
-			titleKey="pages.dashboard.cards.monitorsByGroup.title"
-			emptyKey="pages.dashboard.cards.monitorsByGroup.empty"
-			to="/uptime"
-			buckets={buckets}
-			isLoading={isLoading && !data}
-			isStale={isValidating && Boolean(data)}
-			error={error}
-		/>
-	);
-};
@@ -1,42 +0,0 @@
-import { useMemo } from "react";
-
-import { getMonitorPath } from "@/Utils/MonitorUtils";
-import { BreakdownCard, type BreakdownBucket } from "./BreakdownCard";
-import { useMonitors } from "../../useDashboardData";
-
-import type { MonitorType } from "@/Types/Monitor";
-
-export const MonitorsByTypeCard = () => {
-	const { data, isLoading, isValidating, error } = useMonitors();
-
-	const buckets = useMemo<BreakdownBucket[]>(() => {
-		const byType = new Map<MonitorType, BreakdownBucket>();
-		for (const monitor of data?.monitors ?? []) {
-			const bucket = byType.get(monitor.type) ?? {
-				key: monitor.type,
-				label: monitor.type,
-				total: 0,
-				down: 0,
-				to: `/${getMonitorPath(monitor.type)}`,
-			};
-			bucket.total += 1;
-			if (monitor.status === "down" || monitor.status === "breached") {
-				bucket.down += 1;
-			}
-			byType.set(monitor.type, bucket);
-		}
-		return [...byType.values()].sort((a, b) => b.total - a.total);
-	}, [data]);
-
-	return (
-		<BreakdownCard
-			titleKey="pages.dashboard.cards.monitorsByType.title"
-			emptyKey="pages.dashboard.cards.monitorsByType.empty"
-			to="/uptime"
-			buckets={buckets}
-			isLoading={isLoading && !data}
-			isStale={isValidating && Boolean(data)}
-			error={error}
-		/>
-	);
-};
@@ -1,175 +0,0 @@
-import Stack from "@mui/material/Stack";
-import Typography from "@mui/material/Typography";
-import { useTheme } from "@mui/material/styles";
-import { useTranslation } from "react-i18next";
-import { useMemo } from "react";
-
-import { LAYOUT } from "@/Utils/Theme/constants";
-import { getMonitorPath, getUptimePercentageColor } from "@/Utils/MonitorUtils";
-import { DashboardCard, CardMessage } from "../DashboardCard";
-import { CardMeterRow, CardRow, CardRowLabel } from "../CardPrimitives";
-import { useMonitors } from "../../useDashboardData";
-
-import type { Monitor } from "@/Types/Monitor";
-
-const TOP_N = 5;
-// A ranking of one is not a ranking.
-const MIN_RANKABLE = 2;
-
-const averageResponseTime = (monitor: Monitor): number | null => {
-	const times = (monitor.recentChecks ?? [])
-		.map((check) => check.responseTime)
-		.filter((value): value is number => typeof value === "number");
-	if (times.length === 0) {
-		return null;
-	}
-	return times.reduce((sum, value) => sum + value, 0) / times.length;
-};
-
-/** Header reads "top 5 of 12" so a truncated ranking says so. */
-const RankingCount = ({ shown, total }: { shown: number; total: number }) => {
-	const theme = useTheme();
-	const { t } = useTranslation();
-	return (
-		<Typography color={theme.palette.text.secondary}>
-			{t("pages.dashboard.cards.ranking.topOf", { shown, total })}
-		</Typography>
-	);
-};
-
-export const SlowestMonitorsCard = () => {
-	const theme = useTheme();
-	const { t } = useTranslation();
-	const { data, isLoading, isValidating, error } = useMonitors();
-
-	const ranked = useMemo(() => {
-		return (data?.monitors ?? [])
-			.filter((monitor) => monitor.status !== "paused")
-			.map((monitor) => ({ monitor, average: averageResponseTime(monitor) }))
-			.filter(
-				(entry): entry is { monitor: Monitor; average: number } => entry.average !== null
-			)
-			.sort((a, b) => b.average - a.average);
-	}, [data]);
-
-	const slowest = ranked[0]?.average ?? 0;
-
-	return (
-		<DashboardCard
-			title={t("pages.dashboard.cards.slowestMonitors.title")}
-			to="/uptime"
-			isLoading={isLoading && !data}
-			error={error}
-			isStale={isValidating && Boolean(data)}
-			action={
-				ranked.length >= MIN_RANKABLE ? (
-					<RankingCount
-						shown={Math.min(TOP_N, ranked.length)}
-						total={ranked.length}
-					/>
-				) : null
-			}
-		>
-			{ranked.length < MIN_RANKABLE ? (
-				<CardMessage text={t("pages.dashboard.cards.ranking.notEnough")} />
-			) : (
-				<Stack gap={theme.spacing(LAYOUT.SM)}>
-					{ranked.slice(0, TOP_N).map(({ monitor, average }) => (
-						<CardRow
-							key={monitor.id}
-							to={`/${getMonitorPath(monitor.type)}/${monitor.id}`}
-						>
-							<CardMeterRow
-								label={<CardRowLabel primary={monitor.name} />}
-								value={average}
-								max={slowest}
-								color={theme.palette.primary.main}
-								trailing={
-									<Typography
-										color={theme.palette.text.secondary}
-										flexShrink={0}
-									>
-										{Math.round(average)} ms
-									</Typography>
-								}
-							/>
-						</CardRow>
-					))}
-				</Stack>
-			)}
-		</DashboardCard>
-	);
-};
-
-export const LowestUptimeCard = () => {
-	const theme = useTheme();
-	const { t } = useTranslation();
-	const { data, isLoading, isValidating, error } = useMonitors();
-
-	const ranked = useMemo(() => {
-		return (
-			(data?.monitors ?? [])
-				// Paused monitors keep whatever uptime they had, or zero — a paused
-				// ping monitor reads 0% and would rank beside a genuinely down one.
-				// Neither is a live problem, so neither belongs in a worst-uptime list.
-				.filter((monitor) => monitor.status !== "paused")
-				.filter(
-					(monitor): monitor is Monitor & { uptimePercentage: number } =>
-						typeof monitor.uptimePercentage === "number"
-				)
-				.sort((a, b) => a.uptimePercentage - b.uptimePercentage)
-		);
-	}, [data]);
-
-	return (
-		<DashboardCard
-			title={t("pages.dashboard.cards.lowestUptime.title")}
-			to="/uptime"
-			isLoading={isLoading && !data}
-			error={error}
-			isStale={isValidating && Boolean(data)}
-			action={
-				ranked.length >= MIN_RANKABLE ? (
-					<RankingCount
-						shown={Math.min(TOP_N, ranked.length)}
-						total={ranked.length}
-					/>
-				) : null
-			}
-		>
-			{ranked.length < MIN_RANKABLE ? (
-				<CardMessage text={t("pages.dashboard.cards.ranking.notEnough")} />
-			) : (
-				<Stack gap={theme.spacing(LAYOUT.SM)}>
-					{ranked.slice(0, TOP_N).map((monitor) => {
-						// uptimePercentage is a 0-1 fraction, not 0-100.
-						const percentage = monitor.uptimePercentage * 100;
-						const palette = getUptimePercentageColor(monitor.uptimePercentage);
-						return (
-							<CardRow
-								key={monitor.id}
-								to={`/${getMonitorPath(monitor.type)}/${monitor.id}`}
-							>
-								<CardMeterRow
-									label={<CardRowLabel primary={monitor.name} />}
-									// The card ranks worst uptime first, so the bar shows the
-									// shortfall - the worst monitor gets the longest bar.
-									value={100 - percentage}
-									color={theme.palette[palette].main}
-									trailing={
-										<Typography
-											color={theme.palette[palette].main}
-											flexShrink={0}
-										>
-											{percentage.toFixed(1)}%
-										</Typography>
-									}
-								/>
-							</CardRow>
-						);
-					})}
-				</Stack>
-			)}
-		</DashboardCard>
-	);
-};
@@ -1,99 +0,0 @@
-import Stack from "@mui/material/Stack";
-import Typography from "@mui/material/Typography";
-import { useTheme } from "@mui/material/styles";
-import { useTranslation } from "react-i18next";
-
-import { useGet } from "@/Hooks/UseApi";
-import { Dot } from "@/Components/design-elements";
-import { LAYOUT } from "@/Utils/Theme/constants";
-import { formatDuration, formatTimestamp } from "@/Utils/TimeUtils";
-import { DashboardCard, CardMessage } from "../DashboardCard";
-import { CardRow, CardRowLabel } from "../CardPrimitives";
-
-import type { IncidentSummary, IncidentSummaryItem } from "@/Types/Incident";
-
-const MAX_ROWS = 5;
-
-/** Open incidents have no end time; closed ones report how long they ran. */
-const incidentDuration = (incident: IncidentSummaryItem): string | null => {
-	if (!incident.endTime) {
-		return null;
-	}
-	const ms =
-		new Date(incident.endTime).getTime() - new Date(incident.startTime).getTime();
-	return ms > 0 ? formatDuration(ms) : null;
-};
-
-export const RecentIncidentsCard = () => {
-	const theme = useTheme();
-	const { t } = useTranslation();
-	const { data, isLoading, isValidating, error } = useGet<IncidentSummary>(
-		"/incidents/team/summary"
-	);
-
-	const incidents = (data?.latestIncidents ?? []).slice(0, MAX_ROWS);
-
-	return (
-		<DashboardCard
-			title={t("pages.dashboard.cards.recentIncidents.title")}
-			to="/incidents"
-			isLoading={isLoading && !data}
-			error={error}
-			isStale={isValidating && Boolean(data)}
-			action={
-				data && data.totalActive > 0 ? (
-					<Typography color={theme.palette.error.main}>
-						{t("pages.dashboard.cards.recentIncidents.active", {
-							count: data.totalActive,
-						})}
-					</Typography>
-				) : null
-			}
-		>
-			{incidents.length === 0 ? (
-				<CardMessage text={t("pages.dashboard.cards.recentIncidents.empty")} />
-			) : (
-				<Stack gap={theme.spacing(LAYOUT.XS)}>
-					{incidents.map((incident) => {
-						const isOpen = incident.status === true;
-						const duration = incidentDuration(incident);
-						return (
-							<CardRow
-								key={incident.id}
-								to="/incidents"
-							>
-								<Dot
-									color={isOpen ? theme.palette.error.light : theme.palette.success.light}
-									size="md"
-								/>
-								<CardRowLabel
-									primary={
-										incident.monitorName ??
-										t("pages.dashboard.cards.recentIncidents.unknownMonitor")
-									}
-									secondary={formatTimestamp(incident.startTime)}
-								/>
-								<Typography
-									color={theme.palette.text.secondary}
-									sx={{ flexShrink: 0 }}
-								>
-									{isOpen
-										? t("pages.dashboard.cards.recentIncidents.ongoing")
-										: (duration ?? "—")}
-								</Typography>
-								{incident.resolutionType === "manual" && (
-									<Typography
-										color={theme.palette.warning.main}
-										sx={{ flexShrink: 0 }}
-									>
-										{t("pages.dashboard.cards.recentIncidents.manual")}
-									</Typography>
-								)}
-							</CardRow>
-						);
-					})}
-				</Stack>
-			)}
-		</DashboardCard>
-	);
-};
@@ -1,258 +0,0 @@
-import Stack from "@mui/material/Stack";
-import Typography from "@mui/material/Typography";
-import { useTheme } from "@mui/material/styles";
-import { useTranslation } from "react-i18next";
-import { useMemo } from "react";
-
-import { useGet } from "@/Hooks/UseApi";
-import { Dot } from "@/Components/design-elements";
-import { LAYOUT } from "@/Utils/Theme/constants";
-import { formatTimestamp } from "@/Utils/TimeUtils";
-import { DashboardCard, CardMessage } from "../DashboardCard";
-import {
-	CardFigure,
-	CardRow,
-	CardRowLabel,
-	CardSegmentedBar,
-	CardStatLine,
-} from "../CardPrimitives";
-
-import type { IncidentSummary } from "@/Types/Incident";
-import type { Notification } from "@/Types/Notification";
-import type { MaintenanceWindow } from "@/Types/MaintenanceWindow";
-import type { StatusPage } from "@/Types/StatusPage";
-
-/** Free when Recent incidents is present — same summary call, shared by SWR. */
-export const IncidentStatsCard = () => {
-	const theme = useTheme();
-	const { t } = useTranslation();
-	const { data, isLoading, isValidating, error } = useGet<IncidentSummary>(
-		"/incidents/team/summary"
-	);
-
-	return (
-		<DashboardCard
-			title={t("pages.dashboard.cards.incidentStats.title")}
-			to="/incidents"
-			isLoading={isLoading && !data}
-			error={error}
-			isStale={isValidating && Boolean(data)}
-		>
-			{data && (
-				<Stack gap={theme.spacing(LAYOUT.MD)}>
-					{/* Open now leads, paired with the all-time total for context: two
-					    open means something different against 12 incidents than 183. */}
-					<Stack
-						direction="row"
-						gap={theme.spacing(LAYOUT.XXL)}
-					>
-						<CardFigure
-							value={String(data.totalActive)}
-							caption={t("pages.dashboard.cards.incidentStats.openNow")}
-							color={
-								data.totalActive > 0
-									? theme.palette.error.main
-									: theme.palette.success.main
-							}
-						/>
-						<CardFigure
-							value={data.total.toLocaleString()}
-							caption={t("pages.dashboard.cards.incidentStats.total")}
-						/>
-					</Stack>
-					{/* How much of the fleet heals itself — the automatic/manual split
-					    is already computed server-side and said nothing on the card
-					    before. A high manual share means people are doing the work. */}
-					{data.totalAutomaticResolutions + data.totalManualResolutions > 0 && (
-						<Stack gap={theme.spacing(LAYOUT.XS)}>
-							<CardSegmentedBar
-								segments={[
-									{
-										key: "automatic",
-										value: data.totalAutomaticResolutions,
-										color: theme.palette.success.main,
-										label: `${t("pages.dashboard.cards.incidentStats.automatic")} — ${data.totalAutomaticResolutions}`,
-									},
-									{
-										key: "manual",
-										value: data.totalManualResolutions,
-										color: theme.palette.warning.main,
-										label: `${t("pages.dashboard.cards.incidentStats.manual")} — ${data.totalManualResolutions}`,
-									},
-								]}
-							/>
-							<CardStatLine
-								label={t("pages.dashboard.cards.incidentStats.resolved")}
-								value={t("pages.dashboard.cards.incidentStats.autoManual", {
-									automatic: data.totalAutomaticResolutions,
-									manual: data.totalManualResolutions,
-								})}
-							/>
-						</Stack>
-					)}
-					<Stack gap={theme.spacing(LAYOUT.XS)}>
-						<CardStatLine
-							label={t("pages.dashboard.cards.incidentStats.avgResolution")}
-							value={t("pages.dashboard.cards.incidentStats.hours", {
-								hours: data.avgResolutionTimeHours.toFixed(1),
-							})}
-						/>
-						{data.topMonitor?.monitorName && (
-							<CardStatLine
-								label={t("pages.dashboard.cards.incidentStats.mostIncidents")}
-								value={`${data.topMonitor.monitorName} (${data.topMonitor.incidentCount})`}
-							/>
-						)}
-					</Stack>
-				</Stack>
-			)}
-		</DashboardCard>
-	);
-};
-
-export const NotificationChannelsCard = () => {
-	const theme = useTheme();
-	const { t } = useTranslation();
-	const { data, isLoading, isValidating, error } =
-		useGet<Notification[]>("/notifications/team");
-
-	// The response also carries accessToken and accountSid. Only `type` is read
-	// here — credential fields must never reach the DOM.
-	const byType = useMemo(() => {
-		const counts = new Map<string, number>();
-		for (const notification of data ?? []) {
-			counts.set(notification.type, (counts.get(notification.type) ?? 0) + 1);
-		}
-		return [...counts.entries()].sort((a, b) => b[1] - a[1]);
-	}, [data]);
-
-	return (
-		<DashboardCard
-			title={t("pages.dashboard.cards.notificationChannels.title")}
-			to="/notifications"
-			isLoading={isLoading && !data}
-			error={error}
-			isStale={isValidating && Boolean(data)}
-		>
-			{byType.length === 0 ? (
-				<CardMessage text={t("pages.dashboard.cards.notificationChannels.empty")} />
-			) : (
-				<Stack gap={theme.spacing(LAYOUT.XS)}>
-					{byType.map(([type, count]) => (
-						<CardStatLine
-							key={type}
-							label={type}
-							value={String(count)}
-						/>
-					))}
-				</Stack>
-			)}
-		</DashboardCard>
-	);
-};
-
-export const MaintenanceCard = () => {
-	const theme = useTheme();
-	const { t } = useTranslation();
-	const { data, isLoading, isValidating, error } = useGet<{
-		maintenanceWindows: MaintenanceWindow[];
-		maintenanceWindowCount: number;
-	}>("/maintenance-window/team?page=0&rowsPerPage=0");
-
-	// `active` is a user on/off flag, not "running now" — compare the window
-	// client-side. repeat > 0 means recurring, so `end` may sit in the past for
-	// a window that is currently live.
-	const { running, next } = useMemo(() => {
-		const now = Date.now();
-		const windows = (data?.maintenanceWindows ?? []).filter((entry) => entry.active);
-		const live = windows.filter((entry) => {
-			const start = new Date(entry.start).getTime();
-			const end = new Date(entry.end).getTime();
-			return start <= now && (now <= end || entry.repeat > 0);
-		});
-		const upcoming = windows
-			.filter((entry) => new Date(entry.start).getTime() > now)
-			.sort((a, b) => new Date(a.start).getTime() - new Date(b.start).getTime());
-		return { running: live.length, next: upcoming[0] ?? null };
-	}, [data]);
-
-	return (
-		<DashboardCard
-			title={t("pages.dashboard.cards.maintenance.title")}
-			to="/maintenance"
-			isLoading={isLoading && !data}
-			error={error}
-			isStale={isValidating && Boolean(data)}
-		>
-			{!data || data.maintenanceWindows.length === 0 ? (
-				<CardMessage text={t("pages.dashboard.cards.maintenance.empty")} />
-			) : (
-				<Stack gap={theme.spacing(LAYOUT.SM)}>
-					<CardFigure
-						value={String(running)}
-						caption={t("pages.dashboard.cards.maintenance.runningNow")}
-					/>
-					{next && (
-						<CardStatLine
-							label={t("pages.dashboard.cards.maintenance.next")}
-							value={formatTimestamp(next.start)}
-						/>
-					)}
-				</Stack>
-			)}
-		</DashboardCard>
-	);
-};
-
-export const StatusPagesCard = () => {
-	const theme = useTheme();
-	const { t } = useTranslation();
-	const { data, isLoading, isValidating, error } =
-		useGet<StatusPage[]>("/status-page/team");
-
-	return (
-		<DashboardCard
-			title={t("pages.dashboard.cards.statusPages.title")}
-			to="/status"
-			isLoading={isLoading && !data}
-			error={error}
-			isStale={isValidating && Boolean(data)}
-		>
-			{!data || data.length === 0 ? (
-				<CardMessage text={t("pages.dashboard.cards.statusPages.empty")} />
-			) : (
-				<Stack gap={theme.spacing(LAYOUT.XS)}>
-					{data.map((page) => (
-						<CardRow
-							key={page.id}
-							to={`/status/${page.url}`}
-						>
-							<Dot
-								color={
-									page.isPublished
-										? theme.palette.success.light
-										: theme.palette.text.secondary
-								}
-								size="md"
-							/>
-							<CardRowLabel
-								primary={page.companyName}
-								secondary={t("pages.dashboard.cards.statusPages.monitorCount", {
-									count: page.monitors.length,
-								})}
-							/>
-							<Typography
-								color={theme.palette.text.secondary}
-								flexShrink={0}
-							>
-								{page.isPublished
-									? t("pages.dashboard.cards.statusPages.published")
-									: t("pages.dashboard.cards.statusPages.draft")}
-							</Typography>
-						</CardRow>
-					))}
-				</Stack>
-			)}
-		</DashboardCard>
-	);
-};
@@ -1,159 +0,0 @@
-import Stack from "@mui/material/Stack";
-import Box from "@mui/material/Box";
-import Typography from "@mui/material/Typography";
-import CircularProgress from "@mui/material/CircularProgress";
-import Skeleton from "@mui/material/Skeleton";
-import { useTheme } from "@mui/material/styles";
-import { Link as RouterLink } from "react-router-dom";
-import { useTranslation } from "react-i18next";
-
-import { BaseBox } from "@/Components/design-elements";
-import { LAYOUT } from "@/Utils/Theme/constants";
-import { useCardSlot } from "./CardSlotContext";
-
-import type { ReactNode } from "react";
-
-// Control height plus the header's vertical padding, so a card with no action
-// still lines up with one that has a button in its header.
-const HEADER_MIN_HEIGHT = 44;
-const SKELETON_ROW_HEIGHT = 20;
-
-interface DashboardCardProps {
-	title: string;
-	/** Where the title links to — the page this card belongs to. */
-	to?: string;
-	/** Rendered at the right of the header: a count, an average, a filter. */
-	action?: ReactNode;
-	isLoading?: boolean;
-	error?: unknown;
-	/** Dimmed rather than blanked while a refresh is in flight over stale data. */
-	isStale?: boolean;
-	children: ReactNode;
-}
-
-export const DashboardCard = ({
-	title,
-	to,
-	action,
-	isLoading,
-	error,
-	isStale,
-	children,
-}: DashboardCardProps) => {
-	const theme = useTheme();
-	const { t } = useTranslation();
-	const slot = useCardSlot();
-
-	return (
-		<BaseBox
-			display="flex"
-			flexDirection="column"
-			height="100%"
-			sx={{
-				overflow: "hidden",
-				"&:hover .dashboard-card-slot": {
-					opacity: 1,
-				},
-			}}
-		>
-			<Stack
-				direction="row"
-				alignItems="center"
-				justifyContent="space-between"
-				gap={theme.spacing(LAYOUT.SM)}
-				px={theme.spacing(LAYOUT.MD)}
-				py={theme.spacing(LAYOUT.SM)}
-				borderBottom={`1px solid ${theme.palette.divider}`}
-				minHeight={HEADER_MIN_HEIGHT}
-			>
-				<Typography
-					{...(to ? { component: RouterLink, to } : {})}
-					fontWeight={500}
-					color={theme.palette.text.primary}
-					sx={{
-						textDecoration: "none",
-						...(to && {
-							"&:hover": { color: theme.palette.primary.main },
-						}),
-					}}
-				>
-					{title}
-				</Typography>
-				<Stack
-					direction="row"
-					alignItems="center"
-					gap={theme.spacing(LAYOUT.SM)}
-					flexShrink={0}
-					position="relative"
-				>
-					{isStale && (
-						<CircularProgress
-							size={16}
-							color="primary"
-						/>
-					)}
-					{action && <Box>{action}</Box>}
-					{slot && (
-						<Box
-							className="dashboard-card-slot"
-							sx={{
-								opacity: 0.3,
-								transition: "opacity 0.15s ease",
-							}}
-						>
-							{slot}
-						</Box>
-					)}
-				</Stack>
-			</Stack>
-			<Box
-				flex={1}
-				p={theme.spacing(LAYOUT.MD)}
-				sx={{
-					...(isStale && { opacity: 0.5, transition: "opacity 0.2s ease" }),
-				}}
-			>
-				{isLoading ? (
-					<CardSkeleton />
-				) : error ? (
-					<CardMessage text={t("pages.dashboard.card.error")} />
-				) : (
-					children
-				)}
-			</Box>
-		</BaseBox>
-	);
-};
-
-/** Placeholder rows, sized to the row list most cards render. */
-export const CardSkeleton = ({ rows = 3 }: { rows?: number }) => {
-	const theme = useTheme();
-	return (
-		<Stack gap={theme.spacing(LAYOUT.SM)}>
-			{Array.from({ length: rows }).map((_, index) => (
-				<Skeleton
-					key={index}
-					variant="rounded"
-					height={SKELETON_ROW_HEIGHT}
-					width={index === rows - 1 ? "60%" : "100%"}
-				/>
-			))}
-		</Stack>
-	);
-};
-
-/** The quiet one-line state a healthy card collapses to. */
-export const CardMessage = ({ text, action }: { text: string; action?: ReactNode }) => {
-	const theme = useTheme();
-	return (
-		<Stack
-			direction="row"
-			alignItems="center"
-			justifyContent="space-between"
-			gap={theme.spacing(LAYOUT.SM)}
-		>
-			<Typography color={theme.palette.text.secondary}>{text}</Typography>
-			{action}
-		</Stack>
-	);
-};
@@ -1,72 +0,0 @@
-import Box from "@mui/material/Box";
-import { useMemo } from "react";
-
-import type { CheckSnapshot } from "@/Types/Check";
-
-const VIEWBOX_WIDTH = 100;
-// The svg renders at its viewBox height, so one constant serves both.
-const VIEWBOX_HEIGHT = 24;
-// Matches the 1.5 stroke the shared Icon component uses.
-const STROKE_WIDTH = 1.5;
-
-/**
- * Response times as a bare polyline. Deliberately axis-free and label-free —
- * at this size the shape is the only readable signal.
- *
- * `checks` arrives oldest-first, which is already left-to-right reading order.
- */
-export const Sparkline = ({
-	checks,
-	color,
-}: {
-	checks: CheckSnapshot[];
-	color: string;
-}) => {
-	const points = useMemo(() => {
-		const values = checks
-			.map((check) => check.responseTime)
-			.filter((value): value is number => typeof value === "number");
-
-		if (values.length < 2) {
-			return null;
-		}
-
-		const max = Math.max(...values);
-		const min = Math.min(...values);
-		const span = max - min || 1;
-
-		return values
-			.map((value, index) => {
-				const x = (index / (values.length - 1)) * VIEWBOX_WIDTH;
-				const y = VIEWBOX_HEIGHT - ((value - min) / span) * VIEWBOX_HEIGHT;
-				return `${x.toFixed(1)},${y.toFixed(1)}`;
-			})
-			.join(" ");
-	}, [checks]);
-
-	if (!points) {
-		return null;
-	}
-
-	return (
-		<Box
-			component="svg"
-			viewBox={`0 0 ${VIEWBOX_WIDTH} ${VIEWBOX_HEIGHT}`}
-			preserveAspectRatio="none"
-			aria-hidden="true"
-			width="100%"
-			height={VIEWBOX_HEIGHT}
-			display="block"
-		>
-			<polyline
-				points={points}
-				fill="none"
-				stroke={color}
-				strokeWidth={STROKE_WIDTH}
-				strokeLinejoin="round"
-				strokeLinecap="round"
-				vectorEffect="non-scaling-stroke"
-			/>
-		</Box>
-	);
-};
@@ -1,84 +0,0 @@
-import type { ComponentType } from "react";
-
-// The 12-column grid the dashboard lays cards out on.
-//
-// Every card is currently half-width, so they pair up down the page and the
-// grid reads as one system. Full width stays in the type for a card whose
-// content genuinely needs it. Width is declared per card type in code and is
-// never a user setting.
-export const CardWidths = [6, 12] as const;
-export type CardWidth = (typeof CardWidths)[number];
-
-export const GRID_COLUMNS = 12;
-
-// Picker groups mirror the sidebar sections: you look for a card where you
-// look for the feature it belongs to.
-export const CardGroups = [
-	"uptime",
-	"infrastructure",
-	"incidents",
-	"notifications",
-	"maintenance",
-	"statusPages",
-	"checks",
-	"logs",
-	"settings",
-] as const;
-export type CardGroup = (typeof CardGroups)[number];
-
-// The Containers card (CARD-SPECS.md #11) is deliberately absent: it needs
-// `containerSummary` on the check snapshot, which arrives with the Docker
-// monitoring work. Add it here once that lands on develop.
-export const CardIds = [
-	"monitorStatus",
-	"currentlyDown",
-	"slowestMonitors",
-	"lowestUptime",
-	"monitorsByType",
-	"monitorsByGroup",
-	"recentIncidents",
-	"incidentStats",
-	"notificationChannels",
-	"maintenance",
-	"statusPages",
-	"failedChecks",
-	"busiestServers",
-	"checkmateServer",
-	"checksOnSchedule",
-	"recentErrors",
-	"team",
-] as const;
-export type CardId = (typeof CardIds)[number];
-
-export interface CardDefinition {
-	id: CardId;
-	/** i18n key fragment under pages.dashboard.cards.<key>. */
-	key: string;
-	group: CardGroup;
-	width: CardWidth;
-	/** Hidden from the page and absent from the picker for non-admins. */
-	adminOnly?: boolean;
-	component: ComponentType;
-}
-
-// The cards a fresh dashboard starts with. Chosen so a brand new install still
-// shows something real: Checkmate server works with zero monitors.
-// Ordered so the declared widths pair into full rows: a card left alone in a
-// row is stretched to fill it, so 8- and 4-wide cards are kept adjacent.
-export const DEFAULT_CARD_IDS: readonly CardId[] = [
-	"monitorStatus",
-	"currentlyDown",
-	"failedChecks",
-	"monitorsByType",
-	"recentIncidents",
-	"checkmateServer",
-];
-
-export const DASHBOARD_CARDS_STORAGE_KEY = "checkmate-dashboard-cards";
-
-/**
- * Poll rates, in ms. Monitor and server figures move continuously; the log ring
- * buffer rotates fast but is expensive to re-read, so it is polled slowly.
- */
-export const REFRESH_INTERVAL_MS = 30000;
-export const SLOW_REFRESH_INTERVAL_MS = 60000;
@@ -1,8 +0,0 @@
-import type { Monitor } from "@/Types/Monitor";
-
-/**
- * `recentChecks` is oldest-first — the server appends each snapshot with
- * `$push … $slice: -N` — so the newest retained check is the last element.
- */
-export const latestCheck = (monitor: Monitor) =>
-	monitor.recentChecks?.[monitor.recentChecks.length - 1];
@@ -0,0 +1,54 @@
+import Box from "@mui/material/Box";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import { useTheme } from "@mui/material/styles";
+import { LAYOUT } from "@/Utils/Theme/constants";
+import { typographyLevels } from "@/Utils/Theme/Palette";
+
+interface DashboardCardProps {
+	title: string;
+	topRight?: React.ReactNode;
+	children: React.ReactNode;
+}
+
+export const DashboardCard = ({ title, topRight, children }: DashboardCardProps) => {
+	const theme = useTheme();
+
+	return (
+		<Box
+			bgcolor={theme.palette.background.paper}
+			border={1}
+			borderColor={theme.palette.divider}
+			borderRadius={`${theme.shape.borderRadius}px`}
+			padding={theme.spacing(LAYOUT.MD)}
+			display="flex"
+			flexDirection="column"
+			gap={theme.spacing(LAYOUT.SM)}
+			height="100%"
+			boxSizing="border-box"
+		>
+			<Stack
+				direction="row"
+				alignItems="center"
+				justifyContent="space-between"
+			>
+				<Typography
+					fontSize={typographyLevels.m}
+					fontWeight={500}
+					color={theme.palette.text.primary}
+				>
+					{title}
+				</Typography>
+				{topRight && (
+					<Typography
+						fontSize={typographyLevels.s}
+						color={theme.palette.text.secondary}
+					>
+						{topRight}
+					</Typography>
+				)}
+			</Stack>
+			{children}
+		</Box>
+	);
+};
@@ -0,0 +1,69 @@
+import { useState } from "react";
+import Stack from "@mui/material/Stack";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import { useTranslation } from "react-i18next";
+import { Checkbox, Dialog } from "@/Components/inputs";
+import { type DashboardCardKey, dashboardCardKeys } from "@/Types/Dashboard";
+
+interface EditCardsModalProps {
+	open: boolean;
+	visibleCards: Set<DashboardCardKey>;
+	onClose: () => void;
+	onSave: (visibleCards: Set<DashboardCardKey>) => void;
+}
+
+export const EditCardsModal = ({
+	open,
+	visibleCards,
+	onClose,
+	onSave,
+}: EditCardsModalProps) => {
+	const { t } = useTranslation();
+	const [draft, setDraft] = useState<Set<DashboardCardKey>>(new Set(visibleCards));
+
+	const handleClose = () => {
+		setDraft(new Set(visibleCards));
+		onClose();
+	};
+
+	const handleToggle = (key: DashboardCardKey) => {
+		setDraft((prev) => {
+			const next = new Set(prev);
+			if (next.has(key)) {
+				next.delete(key);
+			} else {
+				next.add(key);
+			}
+			return next;
+		});
+	};
+
+	return (
+		<Dialog
+			open={open}
+			title={t("pages.dashboard.editCardsModal.title")}
+			content={t("pages.dashboard.editCardsModal.description")}
+			onCancel={handleClose}
+			onConfirm={() => onSave(draft)}
+			confirmText={t("pages.dashboard.editCardsModal.done")}
+			maxWidth="xs"
+			fullWidth
+		>
+			<Stack>
+				{dashboardCardKeys.map((key: DashboardCardKey) => (
+					<FormControlLabel
+						key={key}
+						label={t(`pages.dashboard.cards.${key}`)}
+						control={
+							<Checkbox
+								checked={draft.has(key)}
+								disabled={draft.has(key) && draft.size === 1}
+								onChange={() => handleToggle(key)}
+							/>
+						}
+					/>
+				))}
+			</Stack>
+		</Dialog>
+	);
+};
@@ -0,0 +1,28 @@
+import { LAYOUT } from "@/Utils/Theme/constants";
+import Box from "@mui/material/Box";
+import { useTheme } from "@mui/material/styles";
+
+interface ProgressBarProps {
+	fillRatio: number;
+}
+
+export const ProgressBar = ({ fillRatio }: ProgressBarProps) => {
+	const theme = useTheme();
+	const clamped = Math.min(1, Math.max(0, fillRatio));
+
+	return (
+		<Box
+			height={theme.spacing(LAYOUT.XS)}
+			borderRadius={theme.shape.borderRadius}
+			bgcolor={theme.palette.action.disabledBackground}
+			overflow="hidden"
+		>
+			<Box
+				height="100%"
+				width={`${clamped * 100}%`}
+				borderRadius={theme.shape.borderRadius}
+				bgcolor={theme.palette.primary.main}
+			/>
+		</Box>
+	);
+};
@@ -0,0 +1,42 @@
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import { useTheme } from "@mui/material/styles";
+import { typographyLevels } from "@/Utils/Theme/Palette";
+import { SPACING } from "@/Utils/Theme/constants";
+import { ProgressBar } from "@/Pages/Dashboard/components/ProgressBar";
+
+interface BarRowProps {
+	label: string;
+	value: string;
+	fillRatio: number;
+	valueColor?: string;
+}
+
+export const BarRow = ({ label, value, fillRatio, valueColor }: BarRowProps) => {
+	const theme = useTheme();
+
+	return (
+		<Stack gap={theme.spacing(SPACING.LG)}>
+			<Stack
+				direction="row"
+				justifyContent="space-between"
+				alignItems="center"
+			>
+				<Typography
+					fontSize={typographyLevels.m}
+					color={theme.palette.text.primary}
+				>
+					{label}
+				</Typography>
+				<Typography
+					fontSize={typographyLevels.m}
+					color={valueColor ?? theme.palette.primary.main}
+					fontWeight={500}
+				>
+					{value}
+				</Typography>
+			</Stack>
+			<ProgressBar fillRatio={fillRatio} />
+		</Stack>
+	);
+};
@@ -0,0 +1,58 @@
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import { useTheme } from "@mui/material/styles";
+import { DashboardCard } from "@/Pages/Dashboard/components/DashboardCard";
+import { ProgressBar } from "@/Pages/Dashboard/components/ProgressBar";
+import { typographyLevels } from "@/Utils/Theme/Palette";
+import { SPACING } from "@/Utils/Theme/constants";
+import { useTranslation } from "react-i18next";
+import type { MonitorsSummary } from "@/Types/Monitor";
+
+interface MonitorStatusCardProps {
+	summary: MonitorsSummary | null;
+}
+
+export const MonitorStatusCard = ({ summary }: MonitorStatusCardProps) => {
+	const theme = useTheme();
+	const { t } = useTranslation();
+
+	const up = summary?.upMonitors ?? 0;
+	const total = summary?.totalMonitors ?? 0;
+	const ratio = total > 0 ? up / total : 0;
+
+	return (
+		<DashboardCard title={t("pages.dashboard.cards.monitorStatus")}>
+			{total === 0 ? (
+				<Typography
+					fontSize={typographyLevels.m}
+					color={theme.palette.text.disabled}
+				>
+					{t("pages.dashboard.noData")}
+				</Typography>
+			) : (
+				<Stack gap={theme.spacing(SPACING.SM)}>
+					<Stack
+						direction="row"
+						alignItems="baseline"
+						gap={theme.spacing(SPACING.XS)}
+					>
+						<Typography
+							fontSize={typographyLevels.xxl}
+							fontWeight={500}
+							color={theme.palette.text.primary}
+						>
+							{up}
+						</Typography>
+						<Typography
+							fontSize={typographyLevels.m}
+							color={theme.palette.text.secondary}
+						>
+							{t("pages.dashboard.monitorStatus.ofUp", { total })}
+						</Typography>
+					</Stack>
+					<ProgressBar fillRatio={ratio} />
+				</Stack>
+			)}
+		</DashboardCard>
+	);
+};
@@ -0,0 +1,46 @@
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import { DashboardCard } from "@/Pages/Dashboard/components/DashboardCard";
+import { BarRow } from "@/Pages/Dashboard/components/cards/BarRow";
+import { useTranslation } from "react-i18next";
+import { useTheme } from "@mui/material/styles";
+import type { MonitorTypeCount } from "@/Types/Monitor";
+import { getMonitorTypeLabel } from "@/Types/Monitor";
+import { LAYOUT } from "@/Utils/Theme/constants";
+import { typographyLevels } from "@/Utils/Theme/Palette";
+
+interface MonitorsByTypeCardProps {
+	monitorsByType: MonitorTypeCount[];
+}
+
+export const MonitorsByTypeCard = ({ monitorsByType }: MonitorsByTypeCardProps) => {
+	const { t } = useTranslation();
+	const theme = useTheme();
+
+	const maxCount = monitorsByType[0]?.count ?? 1;
+
+	return (
+		<DashboardCard title={t("pages.dashboard.cards.monitorsByType")}>
+			{monitorsByType.length === 0 ? (
+				<Typography
+					fontSize={typographyLevels.m}
+					color={theme.palette.text.disabled}
+				>
+					{t("pages.dashboard.noData")}
+				</Typography>
+			) : (
+				<Stack gap={theme.spacing(LAYOUT.SM)}>
+					{monitorsByType.map(({ type, count }) => (
+						<BarRow
+							key={type}
+							label={getMonitorTypeLabel(type, t)}
+							value={String(count)}
+							fillRatio={count / maxCount}
+							valueColor={theme.palette.text.primary}
+						/>
+					))}
+				</Stack>
+			)}
+		</DashboardCard>
+	);
+};
@@ -1,85 +1,95 @@
+import { Fragment, useMemo, useState, type ReactNode } from "react";
+import Box from "@mui/material/Box";
 import Stack from "@mui/material/Stack";
 import { useTheme } from "@mui/material/styles";
 import { useTranslation } from "react-i18next";
-import { useState } from "react";
-import { LayoutGrid } from "lucide-react";
+import { useSelector, useDispatch } from "react-redux";

-import { BasePage, EmptyState, Icon } from "@/Components/design-elements";
+import { BasePage } from "@/Components/design-elements/BasePage";
 import { Button } from "@/Components/inputs";
 import { LAYOUT } from "@/Utils/Theme/constants";
-import { CardGrid } from "./Components/CardGrid";
-import { CardPicker } from "./Components/CardPicker";
-import { MonitorsContext, useMonitorsRequest } from "./useDashboardData";
-import { useCardSelection } from "./useCardSelection";
+import { useMonitorListController } from "@/Hooks/useMonitorListController";
+import { MonitorTypes, type MonitorTypeCount } from "@/Types/Monitor";
+import { setDashboardVisibleCards } from "@/Features/UI/uiSlice";
+import type { RootState, AppDispatch } from "@/store";
+
+import { MonitorStatusCard } from "@/Pages/Dashboard/components/cards/MonitorStatusCard";
+import { MonitorsByTypeCard } from "@/Pages/Dashboard/components/cards/MonitorsByTypeCard";
+import { EditCardsModal } from "@/Pages/Dashboard/components/EditCardsModal";
+import { type DashboardCardKey, dashboardCardKeys } from "@/Types/Dashboard";

 const Dashboard = () => {
 	const theme = useTheme();
 	const { t } = useTranslation();
-	const monitorsRequest = useMonitorsRequest();
-	const {
-		cards,
-		available,
-		selected,
-		addCard,
-		removeCard,
-		reorderCards,
-		resetCards,
-		selectAll,
-		deselectAll,
-		allSelected,
-	} = useCardSelection();
-	const [isPickerOpen, setIsPickerOpen] = useState(false);
+	const dispatch = useDispatch<AppDispatch>();
+	const [editOpen, setEditOpen] = useState(false);
+	const visibleCardsList = useSelector(
+		(state: RootState) => state.ui.dashboardVisibleCards
+	);
+	const visibleCards = useMemo(() => new Set(visibleCardsList), [visibleCardsList]);
+
+	const { monitors, summary } = useMonitorListController({
+		types: [...MonitorTypes],
+		checksLimit: 1,
+		refreshInterval: 30000,
+		rowsPerPageTable: "monitors",
+		rowsPerPageDefault: 100,
+	});
+
+	const monitorsByType = useMemo<MonitorTypeCount[]>(() => {
+		const countMap = new Map<MonitorTypeCount["type"], number>();
+		(monitors ?? []).forEach((m) =>
+			countMap.set(m.type, (countMap.get(m.type) ?? 0) + 1)
+		);
+		return [...countMap.entries()]
+			.map(([type, count]) => ({ type, count }))
+			.sort((a, b) => b.count - a.count);
+	}, [monitors]);
+
+	const cardComponents: Record<DashboardCardKey, ReactNode> = {
+		monitorStatus: <MonitorStatusCard summary={summary} />,
+		monitorsByType: <MonitorsByTypeCard monitorsByType={monitorsByType} />,
+	};

 	return (
-		<MonitorsContext.Provider value={monitorsRequest}>
-			<BasePage headerKey="dashboard">
-				<Stack gap={theme.spacing(LAYOUT.MD)}>
-					<Stack
-						direction="row"
-						justifyContent="flex-end"
+		<BasePage headerKey="dashboard">
+			<Stack gap={theme.spacing(LAYOUT.SM)}>
+				<Stack
+					direction="row"
+					justifyContent="flex-end"
+				>
+					<Button
+						variant="outlined"
+						size="small"
+						onClick={() => setEditOpen(true)}
 					>
-						<Button
-							variant="outlined"
-							color="secondary"
-							onClick={() => setIsPickerOpen(true)}
-							startIcon={
-								<Icon
-									icon={LayoutGrid}
-									size={16}
-								/>
-							}
-						>
-							{t("pages.dashboard.picker.trigger")}
-						</Button>
-					</Stack>
-					{cards.length === 0 ? (
-						<EmptyState
-							title={t("pages.dashboard.empty.title")}
-							description={t("pages.dashboard.empty.description")}
-							actionText={t("pages.dashboard.picker.trigger")}
-							onAction={() => setIsPickerOpen(true)}
-						/>
-					) : (
-						<CardGrid
-							cards={cards}
-							onReorder={reorderCards}
-						/>
-					)}
+						{t("pages.dashboard.editCards")}
+					</Button>
 				</Stack>
-				<CardPicker
-					open={isPickerOpen}
-					available={available}
-					selected={selected}
-					allSelected={allSelected}
-					onAdd={addCard}
-					onRemove={removeCard}
-					onSelectAll={selectAll}
-					onDeselectAll={deselectAll}
-					onReset={resetCards}
-					onClose={() => setIsPickerOpen(false)}
-				/>
-			</BasePage>
-		</MonitorsContext.Provider>
+
+				<Box
+					display="grid"
+					gridTemplateColumns={{ xs: "1fr", md: "1fr 1fr" }}
+					gap={theme.spacing(LAYOUT.MD)}
+				>
+					{dashboardCardKeys
+						.filter((key) => visibleCards.has(key))
+						.map((key) => (
+							<Fragment key={key}>{cardComponents[key]}</Fragment>
+						))}
+				</Box>
+			</Stack>
+
+			<EditCardsModal
+				open={editOpen}
+				visibleCards={visibleCards}
+				onClose={() => setEditOpen(false)}
+				onSave={(next) => {
+					dispatch(setDashboardVisibleCards([...next]));
+					setEditOpen(false);
+				}}
+			/>
+		</BasePage>
 	);
 };

@@ -1,21 +0,0 @@
-import type { CardDefinition } from "./cards";
-
-export interface PlacedCard {
-	card: CardDefinition;
-	/** Columns rendered — currently always the declared width. */
-	renderedWidth: number;
-}
-
-/**
- * Packs cards into rows of GRID_COLUMNS.
- *
- * With a single body width this is a straight pass-through: two halves fill a
- * row exactly, so no card is ever stretched to close a gap.
- *
- * An odd number of cards leaves the last one alone on its row. It keeps its
- * declared width rather than being promoted to full: widening one card to fill
- * the row makes it look more important than it is, and an odd count is a
- * property of the selection, not something the layout should hide.
- */
-export const layoutCards = (cards: CardDefinition[]): PlacedCard[] =>
-	cards.map((card) => ({ card, renderedWidth: card.width }));
@@ -1,161 +0,0 @@
-import { MonitorStatusCard } from "./Components/Cards/MonitorStatusCard";
-import { CurrentlyDownCard } from "./Components/Cards/CurrentlyDownCard";
-import { FailedChecksCard } from "./Components/Cards/FailedChecksCard";
-import { RecentIncidentsCard } from "./Components/Cards/RecentIncidentsCard";
-import { MonitorsByTypeCard } from "./Components/Cards/MonitorsByTypeCard";
-import { MonitorsByGroupCard } from "./Components/Cards/MonitorsByGroupCard";
-import { CheckmateServerCard } from "./Components/Cards/CheckmateServerCard";
-import { BusiestServersCard } from "./Components/Cards/BusiestServersCard";
-import { SlowestMonitorsCard, LowestUptimeCard } from "./Components/Cards/RankingCards";
-import {
-	IncidentStatsCard,
-	NotificationChannelsCard,
-	MaintenanceCard,
-	StatusPagesCard,
-} from "./Components/Cards/SummaryCards";
-import {
-	ChecksOnScheduleCard,
-	RecentErrorsCard,
-	TeamCard,
-} from "./Components/Cards/AdminCards";
-
-import type { CardDefinition, CardId } from "./cards";
-
-// Declared width is the minimum number of columns a card needs. The grid may
-// stretch the last card of a short row; nothing here is a user setting.
-//
-// Order is the render order, and the order the picker lists them in.
-//
-// Every card is half-width and pairs up down the page. The grid promotes a
-// lone trailing card to full width so the page does not end on a ragged half.
-export const CARD_REGISTRY: CardDefinition[] = [
-	{
-		id: "monitorStatus",
-		key: "monitorStatus",
-		group: "uptime",
-		width: 6,
-		component: MonitorStatusCard,
-	},
-	{
-		id: "currentlyDown",
-		key: "currentlyDown",
-		group: "uptime",
-		width: 6,
-		component: CurrentlyDownCard,
-	},
-	{
-		id: "failedChecks",
-		key: "failedChecks",
-		group: "checks",
-		width: 6,
-		component: FailedChecksCard,
-	},
-	{
-		id: "slowestMonitors",
-		key: "slowestMonitors",
-		group: "uptime",
-		width: 6,
-		component: SlowestMonitorsCard,
-	},
-	{
-		id: "lowestUptime",
-		key: "lowestUptime",
-		group: "uptime",
-		width: 6,
-		component: LowestUptimeCard,
-	},
-	{
-		id: "monitorsByType",
-		key: "monitorsByType",
-		group: "uptime",
-		width: 6,
-		component: MonitorsByTypeCard,
-	},
-	{
-		id: "monitorsByGroup",
-		key: "monitorsByGroup",
-		group: "uptime",
-		width: 6,
-		component: MonitorsByGroupCard,
-	},
-	{
-		id: "busiestServers",
-		key: "busiestServers",
-		group: "infrastructure",
-		width: 6,
-		component: BusiestServersCard,
-	},
-	{
-		id: "recentIncidents",
-		key: "recentIncidents",
-		group: "incidents",
-		width: 6,
-		component: RecentIncidentsCard,
-	},
-	{
-		id: "incidentStats",
-		key: "incidentStats",
-		group: "incidents",
-		width: 6,
-		component: IncidentStatsCard,
-	},
-	{
-		id: "notificationChannels",
-		key: "notificationChannels",
-		group: "notifications",
-		width: 6,
-		component: NotificationChannelsCard,
-	},
-	{
-		id: "maintenance",
-		key: "maintenance",
-		group: "maintenance",
-		width: 6,
-		component: MaintenanceCard,
-	},
-	{
-		id: "statusPages",
-		key: "statusPages",
-		group: "statusPages",
-		width: 6,
-		component: StatusPagesCard,
-	},
-	{
-		id: "checkmateServer",
-		key: "checkmateServer",
-		group: "logs",
-		width: 6,
-		adminOnly: true,
-		component: CheckmateServerCard,
-	},
-	{
-		id: "checksOnSchedule",
-		key: "checksOnSchedule",
-		group: "logs",
-		width: 6,
-		adminOnly: true,
-		component: ChecksOnScheduleCard,
-	},
-	{
-		id: "recentErrors",
-		key: "recentErrors",
-		group: "logs",
-		width: 6,
-		adminOnly: true,
-		component: RecentErrorsCard,
-	},
-	{
-		id: "team",
-		key: "team",
-		group: "settings",
-		width: 6,
-		adminOnly: true,
-		component: TeamCard,
-	},
-];
-
-const BY_ID = new Map<CardId, CardDefinition>(
-	CARD_REGISTRY.map((card) => [card.id, card])
-);
-
-export const getCard = (id: CardId): CardDefinition | undefined => BY_ID.get(id);
@@ -1,109 +0,0 @@
-import { useCallback, useMemo } from "react";
-import { useSelector, useDispatch } from "react-redux";
-
-import { useIsAdmin } from "@/Hooks/useIsAdmin";
-import { setDashboardCards } from "@/Features/UI/uiSlice";
-import { CardIds, DEFAULT_CARD_IDS, type CardId } from "./cards";
-import { CARD_REGISTRY, getCard } from "./registry";
-
-import type { CardDefinition } from "./cards";
-import type { RootState } from "@/store";
-
-const isCardId = (value: unknown): value is CardId =>
-	typeof value === "string" && (CardIds as readonly string[]).includes(value);
-
-export const useCardSelection = () => {
-	const dispatch = useDispatch();
-	const isAdmin = useIsAdmin();
-
-	// null means the user has never customised; fall back to defaults.
-	const stored = useSelector((state: RootState) => state.ui.dashboardCards);
-	const selected: CardId[] = useMemo(
-		() => (stored !== null ? stored.filter(isCardId) : [...DEFAULT_CARD_IDS]),
-		[stored]
-	);
-
-	const isVisible = useCallback(
-		(card: CardDefinition) => !card.adminOnly || isAdmin,
-		[isAdmin]
-	);
-
-	const cards = useMemo(
-		() =>
-			selected
-				.map(getCard)
-				.filter((card): card is CardDefinition => card !== undefined)
-				.filter(isVisible),
-		[selected, isVisible]
-	);
-
-	const available = useMemo(() => CARD_REGISTRY.filter(isVisible), [isVisible]);
-
-	const addCard = useCallback(
-		(id: CardId) => {
-			if (!selected.includes(id)) dispatch(setDashboardCards([...selected, id]));
-		},
-		[dispatch, selected]
-	);
-
-	const removeCard = useCallback(
-		(id: CardId) => {
-			dispatch(setDashboardCards(selected.filter((cardId) => cardId !== id)));
-		},
-		[dispatch, selected]
-	);
-
-	const resetCards = useCallback(() => dispatch(setDashboardCards(null)), [dispatch]);
-
-	const selectAll = useCallback(
-		() =>
-			dispatch(
-				setDashboardCards(
-					available.map((card) => card.id).filter((id) => !selected.includes(id)).length >
-						0
-						? [...new Set([...selected, ...available.map((card) => card.id)])]
-						: selected
-				)
-			),
-		[dispatch, available, selected]
-	);
-
-	const deselectAll = useCallback(() => dispatch(setDashboardCards([])), [dispatch]);
-
-	/**
-	 * Reorders cards based on DnD source/dest indices into the visible `cards` array.
-	 * Hidden admin cards keep their stored positions unchanged.
-	 */
-	const reorderCards = useCallback(
-		(sourceIndex: number, destIndex: number) => {
-			const visibleIds = cards.map((c) => c.id);
-			const reordered = [...visibleIds];
-			const [moved] = reordered.splice(sourceIndex, 1);
-			reordered.splice(destIndex, 0, moved);
-			let visibleIdx = 0;
-			dispatch(
-				setDashboardCards(
-					selected.map((cardId) =>
-						visibleIds.includes(cardId) ? reordered[visibleIdx++] : cardId
-					)
-				)
-			);
-		},
-		[dispatch, cards, selected]
-	);
-
-	const allSelected = available.every((card) => selected.includes(card.id));
-
-	return {
-		cards,
-		available,
-		selected,
-		addCard,
-		removeCard,
-		reorderCards,
-		resetCards,
-		selectAll,
-		deselectAll,
-		allSelected,
-	};
-};
@@ -1,32 +0,0 @@
-import { createContext, useContext } from "react";
-import { useGet } from "@/Hooks/UseApi";
-import { MonitorTypes, type MonitorsWithChecksResponse } from "@/Types/Monitor";
-import { REFRESH_INTERVAL_MS } from "./cards";
-
-// One request feeds every monitor-derived card, read from context so adding a
-// card costs no extra call. No rowsPerPage: the dashboard summarises the whole
-// fleet, and the repository treats its absence as "no limit".
-const buildMonitorsUrl = () => {
-	const params = new URLSearchParams();
-	MonitorTypes.forEach((type) => params.append("type", type));
-	return `/monitors/team/with-checks?${params.toString()}`;
-};
-
-export const useMonitorsRequest = () =>
-	useGet<MonitorsWithChecksResponse>(
-		buildMonitorsUrl(),
-		{},
-		{ refreshInterval: REFRESH_INTERVAL_MS, keepPreviousData: true }
-	);
-
-export type MonitorsRequest = ReturnType<typeof useMonitorsRequest>;
-
-export const MonitorsContext = createContext<MonitorsRequest | null>(null);
-
-export const useMonitors = (): MonitorsRequest => {
-	const context = useContext(MonitorsContext);
-	if (!context) {
-		throw new Error("useMonitors must be used inside the dashboard's MonitorsContext");
-	}
-	return context;
-};
@@ -10,6 +10,7 @@ import type { DockerContainerInfo } from "@/Types/Check";

 // Utils
 import { formatDuration } from "@/Utils/TimeUtils";
+import { PLACEHOLDER } from "@/Utils/FormatUtils";
 import { getDockerPalette } from "@/Utils/MonitorUtils";

 export const DockerContainerStatusBoxes = ({
@@ -23,8 +24,9 @@ export const DockerContainerStatusBoxes = ({
 	if (!container) return null;

 	const { state, restartCount, health } = container;
-	const startedAt = container.startedAt ?? "0";
-	const runningFor = Date.now() - new Date(startedAt).getTime();
+	const runningFor = container.startedAt
+		? Date.now() - new Date(container.startedAt).getTime()
+		: undefined;
 	const palette = getDockerPalette(state);
 	return (
 		<Stack
@@ -39,11 +41,11 @@ export const DockerContainerStatusBoxes = ({
 			/>
 			<StatBox
 				title={t("common.labels.uptime")}
-				subtitle={formatDuration(runningFor)}
+				subtitle={runningFor === undefined ? PLACEHOLDER : formatDuration(runningFor)}
 			/>
 			<StatBox
 				title={t("common.labels.restarts")}
-				subtitle={String(restartCount ?? 0)}
+				subtitle={restartCount === undefined ? PLACEHOLDER : String(restartCount)}
 			/>
 			<StatBox
 				title={t("common.labels.health")}
@@ -13,10 +13,11 @@ import type { Theme } from "@mui/material";
 import type { TFunction } from "i18next";
 import type { DockerContainerStats } from "@/Types/Monitor";
 import { LAYOUT } from "@/Utils/Theme/constants";
-import { formatPercentage } from "@/Utils/FormatUtils";
+import { formatPercentage, PLACEHOLDER } from "@/Utils/FormatUtils";
 import prettyBytes from "pretty-bytes";
 import { BaseBox } from "@/Components/design-elements";
 import { dedupeDockerPorts, getDockerMountLabel } from "@/Utils/MonitorUtils";
+import type { DateRange } from "@/Types/Query";

 const getChartConfigs = (theme: Theme, t: TFunction, stats: DockerContainerStats) => [
 	{
@@ -24,20 +25,29 @@ const getChartConfigs = (theme: Theme, t: TFunction, stats: DockerContainerStats
 		key: "avgCpuPct",
 		color: theme.palette.success.main,
 		rightTitle: formatPercentage(stats?.latest?.container.cpuPct || 0),
+		formatter: formatPercentage,
+		labelKey: "common.charts.histogram.avgCpuUsage",
 	},
 	{
 		title: t("common.charts.labels.memoryUsage"),
 		key: "avgMemoryUsedBytes",
 		color: theme.palette.primary.main,
 		rightTitle: prettyBytes(stats?.latest?.container.memoryUsedBytes || 0),
+		formatter: prettyBytes,
+		labelKey: "common.charts.histogram.avgMemoryUsage",
 	},
 ];

-export const TabOverview = ({ stats }: { stats: DockerContainerStats }) => {
+export const TabOverview = ({
+	stats,
+	range,
+}: {
+	stats: DockerContainerStats;
+	range: DateRange;
+}) => {
 	const theme = useTheme();
 	const { t } = useTranslation();
 	const isSmall = useMediaQuery(theme.breakpoints.down("md"));
-
 	const { ports, mounts } = stats?.latest?.container ?? {};
 	const dedupedPorts = dedupeDockerPorts(ports ?? []);
 	return (
@@ -58,6 +68,9 @@ export const TabOverview = ({ stats }: { stats: DockerContainerStats }) => {
 							dataKey={config.key}
 							strokeColor={config.color}
 							gradientStartColor={config.color}
+							range={range}
+							formatter={config.formatter}
+							labelKey={config.labelKey}
 						/>
 					</Grid>
 				);
@@ -75,11 +88,17 @@ export const TabOverview = ({ stats }: { stats: DockerContainerStats }) => {
 						Ports
 					</Typography>
 					<Stack>
-						{dedupedPorts?.map((port) => {
+						{dedupedPorts.length === 0 && <Typography>{PLACEHOLDER}</Typography>}
+						{dedupedPorts.map((port) => {
+							const containerPort = `${port.privatePort}/${port.protocol}`;
+							const label =
+								port.publicPort === undefined
+									? containerPort
+									: `${port.hostIp ?? "0.0.0.0"}:${port.publicPort} -> ${containerPort}`;
 							return (
-								<Typography
-									key={`${port.publicPort}/${port.privatePort}`}
-								>{`${port.hostIp}:${port.publicPort} -> ${port.privatePort}/${port.protocol}`}</Typography>
+								<Typography key={`${port.hostIp}/${port.publicPort}/${containerPort}`}>
+									{label}
+								</Typography>
 							);
 						})}
 					</Stack>
@@ -98,6 +117,7 @@ export const TabOverview = ({ stats }: { stats: DockerContainerStats }) => {
 						Volumes
 					</Typography>
 					<Stack>
+						{!mounts?.length && <Typography>{PLACEHOLDER}</Typography>}
 						{mounts?.map((mount) => {
 							return (
 								<Typography key={`${mount.source}/${mount.destination}`}>
@@ -21,7 +21,7 @@ const TAB_MAP = {
 	logs: 1,
 } as const;

-const DockerDetailsPage = ({ open = "logs" }: DockerContainerDetailsProps) => {
+const DockerDetailsPage = ({ open = "overview" }: DockerContainerDetailsProps) => {
 	const [activeTab, setActiveTab] = useState<number>(TAB_MAP[open]);
 	const [dateRange, setDateRange] = useState<DateRange>("recent");
 	const { monitorId, containerName } = useParams<{
@@ -69,7 +69,12 @@ const DockerDetailsPage = ({ open = "logs" }: DockerContainerDetailsProps) => {
 				<Tab label={t("pages.docker.container.tabs.overview")} />
 				<Tab label={t("pages.docker.container.tabs.logs")} />
 			</Tabs>
-			{activeTab === 0 && <TabOverview stats={stats} />}
+			{activeTab === 0 && (
+				<TabOverview
+					stats={stats}
+					range={dateRange}
+				/>
+			)}
 			{activeTab === 1 && (
 				<TabLogs
 					monitorId={monitorId}
@@ -12,7 +12,7 @@ import type { Header } from "@/Components/design-elements/Table";
 import type { DockerContainerInfo } from "@/Types/Check";

 // Utils
-import { formatPercentage } from "@/Utils/FormatUtils";
+import { formatPercentage, PLACEHOLDER } from "@/Utils/FormatUtils";

 interface DockerContainersTableProps {
 	monitorId: string | undefined;
@@ -91,7 +91,7 @@ export const DockerContainersTable = ({
 				id: "restarts",
 				content: t("common.labels.restarts"),
 				render: (row) => {
-					return <Typography>{row.restartCount}</Typography>;
+					return <Typography>{row.restartCount ?? PLACEHOLDER}</Typography>;
 				},
 			},
 		];
@@ -19,6 +19,7 @@ const DockerMonitorsPage = () => {
 			controller={c}
 			bulkActions
 			showTypeFilter={false}
+			summaryProps={{ showBreached: true }}
 		>
 			<DockerMonitorsTable
 				monitors={c.monitors || []}
@@ -1,7 +1,7 @@
 import Box from "@mui/material/Box";
 import { DetailGauge } from "@/Components/design-elements";

-import { getPercentage, formatPercentageFromWhole } from "@/Utils/FormatUtils";
+import { getPercentage, formatPercentageFromWhole, PLACEHOLDER } from "@/Utils/FormatUtils";
 import prettyBytes from "pretty-bytes";
 import { useTranslation } from "react-i18next";
 import { useTheme } from "@mui/material";
@@ -11,7 +11,6 @@ interface StatGaugesProps {
 	diagnostics: Diagnostics | null;
 }

-const PLACEHOLDER = "—";

 export const StatGauges = ({ diagnostics }: StatGaugesProps) => {
 	const theme = useTheme();
@@ -6,12 +6,12 @@ import { useTheme } from "@mui/material";
 import { useTranslation } from "react-i18next";
 import type { Diagnostics } from "@/Types/Diagnostics";
 import { formatDuration, formatMs } from "@/Utils/TimeUtils";
+import { PLACEHOLDER } from "@/Utils/FormatUtils";

 interface StatsProps {
 	diagnostics: Diagnostics | null;
 }

-const PLACEHOLDER = "—";

 export const Stats = ({ diagnostics }: StatsProps) => {
 	const { t } = useTranslation();
@@ -8,7 +8,7 @@ import { useTranslation } from "react-i18next";

 const LogsPage = () => {
 	const { t } = useTranslation();
-	const [activeTab, setActiveTab] = useState<number>(1);
+	const [activeTab, setActiveTab] = useState<number>(0);
 	return (
 		<BasePage headerKey="logs">
 			<Tabs
@@ -1,4 +1,4 @@
-import NotFoundSvg from "@/assets/Images/sushi_404.svg";
+import NotFoundSvg from "@/assets/Images/sushi_404.svg?react";
 import { Button } from "@/Components/inputs";
 import Box from "@mui/material/Box";
 import Stack from "@mui/material/Stack";
@@ -36,10 +36,11 @@ const NotFoundPage = ({ title, desc }: NotFoundProps) => {
 				alignItems="center"
 			>
 				<Box
-					component="img"
-					src={NotFoundSvg}
-					alt="404"
-					maxHeight={"25rem"}
+					component={NotFoundSvg}
+					role="img"
+					aria-label="404"
+					width="100%"
+					maxHeight="25rem"
 				/>
 				<Typography
 					component="h1"
@@ -14,6 +14,7 @@ import {
 import type { StatusPageThemeTokens } from "@/Pages/StatusPage/Status/themes/tokens";
 import { ThemedHeatmap } from "@/Pages/StatusPage/Status/themes/shared/ThemedHeatmap";
 import { ThemedHistogram } from "@/Pages/StatusPage/Status/themes/shared/ThemedHistogram";
+import { IncidentModal } from "@/Pages/StatusPage/Status/themes/shared/IncidentModal";
 import {
 	ThemedInfrastructure,
 	type GaugeFillLevel,
@@ -116,6 +117,8 @@ export const BaseStatusPage = ({
 		[config, tokens, mode]
 	);
 	const [chartMode, setChartMode] = useState<"heatmap" | "histogram">("heatmap");
+	const [selectedMonitorId, setSelectedMonitorId] = useState<string | null>(null);
+	const [selectedDate, setSelectedDate] = useState<string | null>(null);

 	const overall = resolveOverallStatus(monitors, t, config.overallStatusOptions);
 	const logoSrc = statusPage.logo?.data
@@ -306,6 +309,10 @@ export const BaseStatusPage = ({
 										cells={cells}
 										containerSx={styles.heatmap}
 										cellSx={styles.heatmapCell}
+										onCellClick={(date) => {
+											setSelectedMonitorId(monitor.id);
+											setSelectedDate(date);
+										}}
 									/>
 								) : (
 									<ThemedHistogram
@@ -313,6 +320,10 @@ export const BaseStatusPage = ({
 										containerSx={styles.histogram}
 										barSx={styles.bar}
 										statsSx={styles.chartStats}
+										onCellClick={(date) => {
+											setSelectedMonitorId(monitor.id);
+											setSelectedDate(date);
+										}}
 									/>
 								))}
 						</Box>
@@ -333,6 +344,16 @@ export const BaseStatusPage = ({
 					Checkmate
 				</a>
 			</Box>
+			<IncidentModal
+				url={statusPage.url}
+				monitorId={selectedMonitorId}
+				date={selectedDate}
+				timezone={bucketTimezone}
+				onClose={() => {
+					setSelectedMonitorId(null);
+					setSelectedDate(null);
+				}}
+			/>
 		</Box>
 	);
 };
@@ -25,6 +25,7 @@ export interface ChartCell {
 	responseTime: number; // 0 for empty cells
 	tooltip: React.ReactNode | null;
 	ariaLabel: string;
+	date: string | null;
 }

 const DAY_DOWN_THRESHOLD = 0.5;
@@ -61,7 +62,7 @@ export const classifyResponseTime = (
 	return "fast";
 };

-const emptyCell = (key: string): ChartCell => ({
+const emptyCell = (key: string, date: string | null = null): ChartCell => ({
 	key,
 	barKind: "empty",
 	heatKind: "empty",
@@ -70,6 +71,7 @@ const emptyCell = (key: string): ChartCell => ({
 	tooltip: null,
 	ariaLabel: "",
 	severity: 0,
+	date,
 });

 const padCells = (cells: ChartCell[], length: number): ChartCell[] => [
@@ -92,6 +94,7 @@ export const checksToCells = (checks: CheckSnapshot[]): ChartCell[] => {
 			tooltip: <ThemedChartTooltip check={check} />,
 			ariaLabel: `${formatMs(check.responseTime)}, ${check.status ? "up" : "down"}`,
 			severity: 0,
+			date: null,
 		})
 	);
 	return padCells(cells, MAX_RECENT_CHECKS);
@@ -108,7 +111,7 @@ export const dailyBucketsToCells = (
 	const enumerated = enumerateDays(days, bucketTimezone);
 	return enumerated.map((date) => {
 		const bucket = byDate.get(date);
-		if (!bucket) return emptyCell(`day-${date}`);
+		if (!bucket) return emptyCell(`day-${date}`, date);
 		const upRatio = bucket.upChecks / bucket.totalChecks;

 		const barKind = classifyDay(bucket, upRatio);
@@ -132,6 +135,7 @@ export const dailyBucketsToCells = (
 				date,
 				uptime: formatPercentage(bucket.upChecks / bucket.totalChecks),
 			}),
+			date,
 		};
 	});
 };
@@ -0,0 +1,111 @@
+import Dialog from "@mui/material/Dialog";
+import DialogTitle from "@mui/material/DialogTitle";
+import DialogContent from "@mui/material/DialogContent";
+import Typography from "@mui/material/Typography";
+import Stack from "@mui/material/Stack";
+import IconButton from "@mui/material/IconButton";
+import { X as XIcon } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { useGet } from "@/Hooks/UseApi";
+import { useTheme } from "@mui/material";
+import { SPACING } from "@/Utils/Theme/constants";
+import { formatDateWithTz } from "@/Utils/TimeUtils";
+
+import type { Incident } from "@/Types/Incident";
+interface IncidentModalProps {
+	url: string;
+	monitorId: string | null;
+	date: string | null;
+	timezone: string;
+	onClose: () => void;
+}
+
+export const IncidentModal = ({
+	url,
+	monitorId,
+	date,
+	timezone,
+	onClose,
+}: IncidentModalProps) => {
+	const theme = useTheme();
+	const { t } = useTranslation();
+	const open = Boolean(monitorId && date);
+
+	const { data, isLoading, error } = useGet<{ incidents: Incident[] }>(
+		open ? `/status-page/${url}/incidents/${monitorId}?date=${date}` : null,
+		{},
+		{ revalidateOnFocus: false, keepPreviousData: true }
+	);
+
+	return (
+		<Dialog
+			open={open}
+			onClose={onClose}
+			maxWidth="sm"
+			fullWidth
+		>
+			<DialogTitle
+				sx={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}
+			>
+				{t("pages.statusPages.monitorsList.incidents.modalTitle", { date })} ({timezone})
+				<IconButton
+					onClick={onClose}
+					size="small"
+					aria-label="close"
+				>
+					<XIcon size={20} />
+				</IconButton>
+			</DialogTitle>
+			<DialogContent>
+				{isLoading ? (
+					<Typography mt={SPACING.SM}>
+						{t("pages.statusPages.monitorsList.incidents.loading")}
+					</Typography>
+				) : error ? (
+					<Typography
+						mt={SPACING.SM}
+						color={theme.palette.error.main}
+					>
+						{t("pages.statusPages.monitorsList.incidents.errorLoading")}
+					</Typography>
+				) : data?.incidents && data.incidents.length > 0 ? (
+					<Stack
+						gap={SPACING.LG}
+						mt={SPACING.SM}
+					>
+						{data.incidents.map((incident) => (
+							<Stack
+								key={incident.id}
+								p={SPACING.LG}
+								border={1}
+								borderColor="divider"
+								borderRadius={theme.shape.borderRadius}
+							>
+								<Typography
+									variant="subtitle2"
+									fontWeight="bold"
+								>
+									{incident.message ||
+										(incident.statusCode ? `Error ${incident.statusCode}` : "Incident")}
+								</Typography>
+								<Typography
+									variant="body2"
+									color={theme.palette.text.secondary}
+								>
+									{formatDateWithTz(incident.startTime, "h:mm A", timezone)} -{" "}
+									{incident.endTime
+										? formatDateWithTz(incident.endTime, "h:mm A", timezone)
+										: t("pages.statusPages.monitorsList.incidents.ongoing")}
+								</Typography>
+							</Stack>
+						))}
+					</Stack>
+				) : (
+					<Typography mt={SPACING.SM}>
+						{t("pages.statusPages.monitorsList.incidents.noIncidents")}
+					</Typography>
+				)}
+			</DialogContent>
+		</Dialog>
+	);
+};
@@ -2,6 +2,8 @@ import Tooltip from "@mui/material/Tooltip";
 import Box from "@mui/material/Box";
 import type { SxProps, Theme } from "@mui/material/styles";
 import { useTranslation } from "react-i18next";
+import { mergeSx } from "@/Pages/StatusPage/Status/themes/shared/sx";
+
 import type {
 	ChartCell,
 	HeatCellKind,
@@ -11,17 +13,15 @@ interface Props {
 	cells: ChartCell[];
 	containerSx: SxProps<Theme>;
 	cellSx: (kind: HeatCellKind, severity?: number) => SxProps<Theme>;
+	onCellClick?: (date: string) => void;
 }

-export const ThemedHeatmap = ({ cells, containerSx, cellSx }: Props) => {
+export const ThemedHeatmap = ({ cells, containerSx, cellSx, onCellClick }: Props) => {
 	const { t } = useTranslation();

 	return (
 		<Box
-			sx={[
-				...(Array.isArray(containerSx) ? containerSx : [containerSx]),
-				{ gridTemplateColumns: `repeat(${cells.length}, 1fr)` },
-			]}
+			sx={mergeSx(containerSx, { gridTemplateColumns: `repeat(${cells.length}, 1fr)` })}
 			role="img"
 			aria-label={t("pages.statusPages.monitorsList.chart.heatmapAria")}
 		>
@@ -30,7 +30,15 @@ export const ThemedHeatmap = ({ cells, containerSx, cellSx }: Props) => {
 					return (
 						<Box
 							key={cell.key}
-							sx={cellSx("empty")}
+							sx={mergeSx(
+								cellSx("empty"),
+								!!cell.date && !!onCellClick ? { cursor: "pointer" } : undefined
+							)}
+							onClick={() => {
+								if (cell.date && onCellClick) {
+									onCellClick(cell.date);
+								}
+							}}
 						/>
 					);
 				}
@@ -42,8 +50,16 @@ export const ThemedHeatmap = ({ cells, containerSx, cellSx }: Props) => {
 						placement="top"
 					>
 						<Box
-							sx={cellSx(cell.heatKind, cell.severity)}
+							sx={mergeSx(
+								cellSx(cell.heatKind, cell.severity),
+								!!cell.date && !!onCellClick ? { cursor: "pointer" } : undefined
+							)}
 							aria-label={cell.ariaLabel}
+							onClick={() => {
+								if (cell.date && onCellClick) {
+									onCellClick(cell.date);
+								}
+							}}
 						/>
 					</Tooltip>
 				);
@@ -5,6 +5,8 @@ import Stack from "@mui/material/Stack";
 import type { SxProps, Theme } from "@mui/material/styles";
 import { useTranslation } from "react-i18next";
 import { formatMs } from "@/Utils/TimeUtils";
+import { mergeSx } from "@/Pages/StatusPage/Status/themes/shared/sx";
+
 import type {
 	BarKind,
 	ChartCell,
@@ -16,6 +18,7 @@ interface Props {
 	barSx: (kind: BarKind, heightPct: number, severity?: number) => SxProps<Theme>;
 	statsSx: SxProps<Theme>;
 	statsGap?: number;
+	onCellClick?: (date: string) => void;
 }

 export const ThemedHistogram = ({
@@ -24,6 +27,7 @@ export const ThemedHistogram = ({
 	barSx,
 	statsSx,
 	statsGap = 1,
+	onCellClick,
 }: Props) => {
 	const { t } = useTranslation();

@@ -39,17 +43,22 @@ export const ThemedHistogram = ({
 	return (
 		<Stack gap={statsGap}>
 			<Box
-				sx={[
-					...(Array.isArray(containerSx) ? containerSx : [containerSx]),
-					{ gridTemplateColumns: `repeat(${cells.length}, 1fr)` },
-				]}
+				sx={mergeSx(containerSx, { gridTemplateColumns: `repeat(${cells.length}, 1fr)` })}
 			>
 				{cells.map((cell) => {
 					if (cell.barKind === "empty") {
 						return (
 							<Box
 								key={cell.key}
-								sx={barSx("empty", cell.heightPct)}
+								sx={mergeSx(
+									barSx("empty", cell.heightPct),
+									!!cell.date && !!onCellClick ? { cursor: "pointer" } : undefined
+								)}
+								onClick={() => {
+									if (cell.date && onCellClick) {
+										onCellClick(cell.date);
+									}
+								}}
 							/>
 						);
 					}
@@ -61,8 +70,16 @@ export const ThemedHistogram = ({
 							placement="top"
 						>
 							<Box
-								sx={barSx(cell.barKind, cell.heightPct, cell.severity)}
+								sx={mergeSx(
+									barSx(cell.barKind, cell.heightPct, cell.severity),
+									!!cell.date && !!onCellClick ? { cursor: "pointer" } : undefined
+								)}
 								aria-label={cell.ariaLabel}
+								onClick={() => {
+									if (cell.date && onCellClick) {
+										onCellClick(cell.date);
+									}
+								}}
 							/>
 						</Tooltip>
 					);
@@ -0,0 +1,16 @@
+import type { SxProps, Theme } from "@mui/material/styles";
+
+export const mergeSx = (
+	...styles: Array<SxProps<Theme> | false | null | undefined>
+): SxProps<Theme> => {
+	const result: SxProps<Theme>[] = [];
+	for (const style of styles) {
+		if (!style) continue;
+		if (Array.isArray(style)) {
+			result.push(...(style.filter(Boolean) as SxProps<Theme>[]));
+		} else {
+			result.push(style);
+		}
+	}
+	return result as SxProps<Theme>;
+};
@@ -93,10 +93,10 @@ const Routes = () => {
 			>
 				<Route
 					path="/"
-					element={<Navigate to="/dashboard" />}
+					element={<Navigate to="/uptime" />}
 				/>
 				<Route
-					path="/dashboard"
+					path="dashboard"
 					element={<Dashboard />}
 				/>
 				<Route
@@ -0,0 +1,2 @@
+export const dashboardCardKeys = ["monitorStatus", "monitorsByType"] as const;
+export type DashboardCardKey = (typeof dashboardCardKeys)[number];
@@ -60,6 +60,15 @@ export const monitorTypeLabelKey: Record<SelectableMonitorType, string> &
 	pagespeed: "optionPagespeed",
 };

+export const getMonitorTypeLabel = (
+	type: MonitorType,
+	t: (key: string) => string
+): string => {
+	const monitorLabel = monitorTypeLabelKey[type];
+	return monitorLabel ? t(`pages.common.monitors.monitorTypes.${monitorLabel}`) : type;
+};
+export const MIN_MONITOR_INTERVAL_MS = 10000;
+
 export const MonitorIntervalOptions = [
 	{ value: 15000, labelKey: "fifteenSeconds" },
 	{ value: 30000, labelKey: "thirtySeconds" },
@@ -160,6 +169,11 @@ export interface Monitor {
 	geoCheckLocations?: GeoContinent[];
 	geoCheckInterval?: number;
 	dockerLogsEnabled?: boolean;
+	dockerAlertOnStopped?: boolean;
+	dockerAlertOnUnhealthy?: boolean;
+	dockerTlsCa?: string;
+	dockerTlsCert?: string;
+	dockerTlsKeySet?: boolean;
 	dnsServer?: string;
 	dnsRecordType?: DnsRecordType;
 	recentChecks: CheckSnapshot[];
@@ -180,6 +194,11 @@ export interface MonitorsSummary {
 	breachedMonitors: number;
 }

+export interface MonitorTypeCount {
+	type: MonitorType;
+	count: number;
+}
+
 export interface MonitorsWithChecksResponse {
 	count: number;
 	monitors: MonitorWithChecks[];
@@ -47,3 +47,6 @@ export const getPercentage = (value: number, total: number) => {
 	if (!value || !total) return 0;
 	return (value / total) * 100;
 };
+
+// Shown wherever a value is not available for the current data source.
+export const PLACEHOLDER = "—";
@@ -20,7 +20,7 @@ export const getMonitorPath = (type: MonitorType): string => {
 		websocket: "uptime",
 		dns: "uptime",
 		unknown: "uptime",
-		docker: "docker",
+		docker: "docker/host",
 		hardware: "infrastructure",
 		pagespeed: "pagespeed",
 	};
@@ -85,6 +85,10 @@ export const lightPalette = {
 	sidebar: {
 		accent: colors.brandGreen,
 	},
+	scrollbar: {
+		track: colors.rule200,
+		thumb: colors.brandGreen,
+	},
 	rowStatus: {
 		running: colors.green200,
 		paused: colors.yellow200,
@@ -137,6 +141,10 @@ export const darkPalette = {
 	sidebar: {
 		accent: colors.brandGreenLight,
 	},
+	scrollbar: {
+		track: colors.ruleDark,
+		thumb: colors.brandGreen,
+	},
 	rowStatus: {
 		running: alpha(colors.brandGreen, 0.18),
 		paused: alpha(colors.orange500, 0.18),
@@ -3,6 +3,7 @@ import { lightPalette, darkPalette, typographyLevels } from "@/Utils/Theme/Palet

 import type { Theme } from "@mui/material/styles";
 import type {} from "@mui/material/styles";
+import { SCROLLBAR_SIZE } from "@/Utils/Theme/constants";

 declare module "@mui/material/styles" {
 	interface TypographyVariants {
@@ -20,6 +21,7 @@ declare module "@mui/material/styles" {
 	}
 	interface Palette {
 		sidebar: { accent: string };
+		scrollbar: { track: string; thumb: string };
 		rowStatus: { running: string; paused: string };
 		chart: {
 			phases: {
@@ -34,6 +36,7 @@ declare module "@mui/material/styles" {
 	}
 	interface PaletteOptions {
 		sidebar?: { accent: string };
+		scrollbar?: { track: string; thumb: string };
 		rowStatus?: { running: string; paused: string };
 		chart?: {
 			phases: {
@@ -112,6 +115,27 @@ export const theme = (mode: string, palette: any) =>
 		},

 		components: {
+			MuiCssBaseline: {
+				styleOverrides: (theme) => ({
+					"*": {
+						scrollbarWidth: "auto",
+						scrollbarColor: `${theme.palette.scrollbar.thumb} ${theme.palette.scrollbar.track}`,
+					},
+					"*::-webkit-scrollbar": {
+						width: SCROLLBAR_SIZE,
+						height: SCROLLBAR_SIZE,
+					},
+					"*::-webkit-scrollbar-track": {
+						background: theme.palette.scrollbar.track,
+						borderRadius: theme.shape.borderRadius,
+					},
+					"*::-webkit-scrollbar-thumb": {
+						background: theme.palette.scrollbar.thumb,
+						borderRadius: theme.shape.borderRadius,
+					},
+					"*::-webkit-scrollbar-button": { display: "none" },
+				}),
+			},
 			MuiTouchRipple: {
 				styleOverrides: {
 					root: {
@@ -19,7 +19,7 @@ export const LAYOUT = {
 } as const;

 export const INPUT_BASE_HEIGHT = 32; // Height for inputs/controls
-
+export const SCROLLBAR_SIZE = 16;
 export const HOVER = {
 	DARKEN: 0.06, // This is a coefficient for darkening function
 	ROW: 0.025, // Overlay alpha for hoverable rows and cards
@@ -104,9 +104,52 @@ export const formatMs = (ms: number, hasSpace: boolean = true): string => {
 	return formatted;
 };

-export const formatDuration = (ms: number, verbose: boolean = false, hasSpace = true) => {
-	if (verbose) {
-		return prettyMilliseconds(ms, { verbose: true });
+type DurationUnit = "day" | "hour" | "minute" | "second";
+
+interface FormatDurationOptions {
+	long?: boolean;
+	relative?: boolean;
+	hasSpace?: boolean;
+	locale?: string;
+}
+
+const DURATION_UNITS: Array<{ unit: DurationUnit; milliseconds: number }> = [
+	{ unit: "day", milliseconds: MS_PER_DAY },
+	{ unit: "hour", milliseconds: MS_PER_HOUR },
+	{ unit: "minute", milliseconds: MS_PER_MINUTE },
+	{ unit: "second", milliseconds: MS_PER_SECOND },
+];
+
+const FALLBACK_DURATION_UNIT = DURATION_UNITS[DURATION_UNITS.length - 1];
+
+const getDurationUnit = (ms: number) =>
+	DURATION_UNITS.find(({ milliseconds }) => Math.abs(ms) >= milliseconds) ??
+	FALLBACK_DURATION_UNIT;
+
+const getExactDurationUnit = (ms: number) =>
+	DURATION_UNITS.find(({ milliseconds }) => ms !== 0 && ms % milliseconds === 0) ??
+	FALLBACK_DURATION_UNIT;
+
+export const formatDuration = (
+	ms: number,
+	{ long = false, relative = false, hasSpace = true, locale }: FormatDurationOptions = {}
+): string => {
+	if (relative) {
+		const { unit, milliseconds } = getDurationUnit(ms);
+		const value = Math.sign(ms) * Math.floor(Math.abs(ms) / milliseconds);
+		return new Intl.RelativeTimeFormat(locale, {
+			numeric: "always",
+			style: long ? "long" : "narrow",
+		}).format(-value, unit);
+	}
+
+	if (long) {
+		const { unit, milliseconds } = getExactDurationUnit(ms);
+		return new Intl.NumberFormat(locale, {
+			style: "unit",
+			unit,
+			unitDisplay: "long",
+		}).format(ms / milliseconds);
 	}

 	const formatted = prettyMilliseconds(ms, {
@@ -6,6 +6,7 @@ import {
 	HttpMethods,
 	PageSpeedStrategies,
 	ProxyModes,
+	MIN_MONITOR_INTERVAL_MS,
 	type MonitorType,
 } from "@/Types/Monitor";
 import { ALL_HTTP_STATUS_CODES } from "@/Utils/statusCode";
@@ -27,7 +28,8 @@ const baseSchema = z.object({
 	description: z.string().optional(),
 	interval: z
 		.number()
-		.min(15000, "Interval must be at least 15 seconds")
+		.int("Interval must be a whole number of milliseconds")
+		.min(MIN_MONITOR_INTERVAL_MS, "Interval must be at least 10 seconds")
 		.register(monitorStepRegistry, { step: 1 }),
 	notifications: z.array(z.string()).register(monitorStepRegistry, { step: 1 }),
 	tags: z.array(z.string()).register(monitorStepRegistry, { step: 1 }),
@@ -108,11 +110,50 @@ const portSchema = baseSchema.extend({
 		.max(65535, "Port must be at most 65535"),
 });

-// Docker monitor schema
+// Docker monitor schema. The URL forms mirror the Docker source helpers in
+// server/src/utils/dockerHost.ts.
+const dockerTlsUrlRegex = /^(tcp|https):\/\/([^/\s:]+)(?::(\d+))?\/?$/;
+const dockerSocketUrlRegex = /^(?:unix:\/\/\/\S+|\/\S+)$/;
+
+export const isDockerTlsUrl = (url: string | undefined): boolean =>
+	dockerTlsUrlRegex.test(url?.trim() ?? "");
+
+export const isCaptureDockerUrl = (url: string | undefined): boolean => {
+	try {
+		const parsed = new URL(url?.trim() ?? "");
+		const pathname = parsed.pathname.replace(/\/+$/, "");
+		return (
+			(parsed.protocol === "http:" || parsed.protocol === "https:") &&
+			pathname.endsWith("/metrics/docker")
+		);
+	} catch {
+		return false;
+	}
+};
+
 const dockerSchema = baseSchema.extend({
 	type: z.literal("docker"),
-	url: z.string().min(1, "Docker host URL is required"),
+	url: z
+		.string()
+		.min(1, "Docker host URL is required")
+		.refine(
+			(url) =>
+				dockerSocketUrlRegex.test(url.trim()) ||
+				isDockerTlsUrl(url) ||
+				isCaptureDockerUrl(url),
+			"Docker host must be a socket path, a TLS daemon URL, or a Capture /metrics/docker endpoint"
+		),
+	secret: z.string(),
+	ignoreTlsErrors: z.boolean(),
+	dockerTlsCa: z.string(),
+	dockerTlsCert: z.string(),
+	// blank on edit keeps the stored key.
+	dockerTlsKey: z.string(),
+	// Read only mirror of the server flag, stripped on submit
+	dockerTlsKeySet: z.boolean(),
 	dockerLogsEnabled: z.boolean().register(monitorStepRegistry, { step: 1 }),
+	dockerAlertOnStopped: z.boolean().register(monitorStepRegistry, { step: 1 }),
+	dockerAlertOnUnhealthy: z.boolean().register(monitorStepRegistry, { step: 1 }),
 });

 // Game server monitor schema
@@ -217,7 +258,8 @@ const monitorSchemaUnion = z.discriminatedUnion("type", [
 	dnsSchema,
 ]);

-// Mirrors the server's refineProxySelection (monitorValidation.ts)
+// Mirrors the server's refineProxySelection and refineDockerTls
+// (monitorValidation.ts). PEM contents are only parsed on the server.
 export const monitorSchema = monitorSchemaUnion.superRefine((data, ctx) => {
 	if (data.type === "http" && data.proxyMode === "custom" && !data.proxyId) {
 		ctx.addIssue({
@@ -226,6 +268,38 @@ export const monitorSchema = monitorSchemaUnion.superRefine((data, ctx) => {
 			message: "A proxy must be selected when proxy mode is custom",
 		});
 	}
+
+	if (data.type === "docker" && isCaptureDockerUrl(data.url) && !data.secret.trim()) {
+		ctx.addIssue({
+			code: "custom",
+			path: ["secret"],
+			message: "Capture API secret is required",
+		});
+	}
+
+	if (data.type === "docker" && isDockerTlsUrl(data.url)) {
+		if (!data.dockerTlsCert.trim()) {
+			ctx.addIssue({
+				code: "custom",
+				path: ["dockerTlsCert"],
+				message: "Client certificate is required for a TLS Docker host",
+			});
+		}
+		if (!data.dockerTlsKeySet && !data.dockerTlsKey.trim()) {
+			ctx.addIssue({
+				code: "custom",
+				path: ["dockerTlsKey"],
+				message: "Client key is required for a TLS Docker host",
+			});
+		}
+		if (!data.ignoreTlsErrors && !data.dockerTlsCa.trim()) {
+			ctx.addIssue({
+				code: "custom",
+				path: ["dockerTlsCa"],
+				message: "CA certificate is required unless TLS errors are ignored",
+			});
+		}
+	}
 });

 export type MonitorFormData = z.infer<typeof monitorSchema>;
@@ -1377,6 +1377,9 @@
 					"maintenance": "صيانة",
 					"paused": "متوقف مؤقتاً",
 					"up": "قيد التشغيل"
+				},
+				"incidents": {
+					"errorLoading": "فشل تحميل الحوادث."
 				}
 			},
 			"statusBar": {
@@ -1377,6 +1377,9 @@
 				"uptime": {
 					"title": "Temps en línia",
 					"responseTime": "Temps de resposta"
+				},
+				"incidents": {
+					"errorLoading": "No s'han pogut carregar les incidències."
 				}
 			},
 			"statusBar": {
@@ -1377,6 +1377,9 @@
 					"maintenance": "Údržba",
 					"paused": "Pozastaveno",
 					"up": "V provozu"
+				},
+				"incidents": {
+					"errorLoading": "Nepodařilo se načíst incidenty."
 				}
 			},
 			"statusBar": {
@@ -448,6 +448,7 @@
 				},
 				"statBoxes": {
 					"activeFor": "Aktiv seit",
+					"checkingEvery": "Check alle {{interval}}",
 					"certificateExpiry": "Zertifikatablauf",
 					"lastCheck": "Letzter Check",
 					"lastResponseTime": "Letzte Antwortzeit",
@@ -1377,6 +1378,9 @@
 					"maintenance": "Wartung",
 					"paused": "Pausiert",
 					"up": "Betriebsbereit"
+				},
+				"incidents": {
+					"errorLoading": "Vorfälle konnten nicht geladen werden."
 				}
 			},
 			"statusBar": {
@@ -80,7 +80,9 @@
 				"avg": "Avg: {{value}}",
 				"max": "Max: {{value}}",
 				"responseTime": "Response time: {{value}}",
-				"total": "Total: {{value}}"
+				"total": "Total: {{value}}",
+				"avgCpuUsage": "Average CPU usage: {{value}}",
+				"avgMemoryUsage": "Average memory usage: {{value}}"
 			},
 			"phases": {
 				"dns": "DNS",
@@ -206,7 +208,6 @@
 		},
 		"sidebar": {
 			"menu": {
-				"dashboard": "Dashboard",
 				"uptime": "Uptime",
 				"pagespeed": "Pagespeed",
 				"infrastructure": "Infrastructure",
@@ -225,7 +226,8 @@
 					"alerting": "Alerting",
 					"reporting": "Reporting",
 					"configuration": "Configuration"
-				}
+				},
+				"dashboard": "Dashboard"
 			},
 			"bottomMenu": {
 				"support": "Support",
@@ -259,147 +261,6 @@
 		}
 	},
 	"pages": {
-		"dashboard": {
-			"header": {
-				"title": "Dashboard",
-				"description": "See every monitor type in one place and spot what needs attention."
-			},
-			"card": {
-				"error": "Could not load this card."
-			},
-			"cards": {
-				"monitorStatus": {
-					"title": "Monitor status",
-					"empty": "No monitors yet.",
-					"upOfTotal": "of {{total}} up"
-				},
-				"currentlyDown": {
-					"title": "Currently down",
-					"empty": "All monitors are up. No incidents open.",
-					"count": "{{count}} needing attention"
-				},
-				"monitorsByType": {
-					"title": "Monitors by type",
-					"empty": "No monitors yet.",
-					"down": "{{count}} down"
-				},
-				"recentIncidents": {
-					"title": "Recent incidents",
-					"empty": "No incidents — all systems healthy.",
-					"active": "{{count}} open",
-					"ongoing": "Ongoing",
-					"manual": "Manual",
-					"unknownMonitor": "Unknown monitor"
-				},
-				"failedChecks": {
-					"title": "Failed checks",
-					"empty": "No checks yet.",
-					"ratio": "{{failed}} of {{total}} in the last day"
-				},
-				"checkmateServer": {
-					"title": "Checkmate server",
-					"memory": "Memory",
-					"eventLoop": "Event loop delay",
-					"uptime": "Uptime",
-					"database": "Database",
-					"readsWrites": "{{reads}} reads/s · {{writes}} writes/s"
-				},
-				"ranking": {
-					"topOf": "Top {{shown}} of {{total}}",
-					"notEnough": "Not enough monitors to rank yet."
-				},
-				"slowestMonitors": {
-					"title": "Slowest monitors"
-				},
-				"lowestUptime": {
-					"title": "Lowest uptime"
-				},
-				"monitorsByGroup": {
-					"title": "Monitors by group",
-					"empty": "No groups yet. Groups are set per monitor."
-				},
-				"busiestServers": {
-					"title": "Busiest servers",
-					"empty": "No infrastructure monitors yet.",
-					"cpu": "CPU",
-					"memory": "Memory",
-					"disk": "Disk"
-				},
-				"incidentStats": {
-					"title": "Incident stats",
-					"openNow": "Open now",
-					"avgResolution": "Average time to resolve",
-					"hours": "{{hours}} h",
-					"mostIncidents": "Most incidents",
-					"total": "total",
-					"resolved": "Resolved",
-					"automatic": "Automatic",
-					"manual": "Manual",
-					"autoManual": "{{automatic}} automatic · {{manual}} manual"
-				},
-				"notificationChannels": {
-					"title": "Notification channels",
-					"empty": "No channels yet."
-				},
-				"maintenance": {
-					"title": "Maintenance windows",
-					"empty": "No maintenance scheduled.",
-					"runningNow": "Running now",
-					"next": "Next window"
-				},
-				"statusPages": {
-					"title": "Status pages",
-					"empty": "No status pages yet.",
-					"monitorCount": "{{count}} monitors",
-					"published": "Published",
-					"draft": "Draft"
-				},
-				"checksOnSchedule": {
-					"title": "Check queue",
-					"healthy": "All {{jobs}} jobs on schedule across {{workers}} worker(s).",
-					"failing": "Failing jobs",
-					"scheduled": "Scheduled jobs",
-					"runningNow": "Running now"
-				},
-				"recentErrors": {
-					"title": "Recent errors",
-					"empty": "No errors logged.",
-					"count": "{{count}} errors",
-					"warnings": "Warnings"
-				},
-				"team": {
-					"title": "Team members",
-					"members": "{{count}} members",
-					"unverified": "Unverified"
-				}
-			},
-			"picker": {
-				"trigger": "Edit cards",
-				"title": "Dashboard cards",
-				"selectAll": "Select all",
-				"done": "Done",
-				"reset": "Reset to defaults",
-				"groups": {
-					"uptime": "Uptime",
-					"infrastructure": "Infrastructure",
-					"incidents": "Incidents",
-					"notifications": "Notifications",
-					"maintenance": "Maintenance",
-					"statusPages": "Status pages",
-					"checks": "Checks",
-					"logs": "System",
-					"settings": "Settings"
-				}
-			},
-			"empty": {
-				"title": "No cards on your dashboard",
-				"description": "Choose the cards you want to see. Your selection is remembered in this browser."
-			},
-			"reorder": {
-				"moveUp": "Move up",
-				"moveDown": "Move down"
-			}
-		},
 		"proxies": {
 			"header": {
 				"title": "Proxies",
@@ -687,6 +548,7 @@
 				},
 				"statBoxes": {
 					"activeFor": "Active for",
+					"checkingEvery": "Checking every {{interval}}",
 					"certificateExpiry": "Certificate expiry",
 					"domainExpiry": "Domain expiry",
 					"lastCheck": "Last check",
@@ -695,7 +557,7 @@
 				},
 				"status": {
 					"down": "down",
-					"breached": "threshold exceeded",
+					"breached": "alert",
 					"initializing": "initializing",
 					"maintenance": "maintenance",
 					"paused": "paused",
@@ -858,7 +720,7 @@
 						"http": "Enter the URL or IP to monitor (e.g., https://example.com/ or 192.168.1.100) and add a clear display name that appears on the dashboard.  Set an optional proxy server to connect through.",
 						"ping": "Enter the IP address or hostname to ping (e.g., 192.168.1.100 or example.com) and add a clear display name that appears on the dashboard.",
 						"port": "Enter the URL or IP of the server, the port number and a clear display name that appears on the dashboard.",
-						"docker": "Enter the Docker socket to monitor, as unix:///var/run/docker.sock or an absolute path such as /var/run/docker.sock. Every container on the host is monitored.",
+						"docker": "Enter a Docker socket such as unix:///var/run/docker.sock, a remote daemon such as tcp://host:2376 with TLS client certificates, or a Capture endpoint ending in /metrics/docker with its authorization secret. Every container on the host is monitored.",
 						"game": "Enter the IP address or hostname and the port number to ping (e.g., 192.168.1.100 or example.com) and choose game type. Some games require enabling server queries in their config file — check your game server's documentation. See the <gamedigLink>supported games list</gamedigLink> for protocol details.",
 						"pagespeed": "Track page load performance, Core Web Vitals, and optimization scores for your website.",
 						"grpc": "Enter the hostname and port of the gRPC server, optionally specify a service name for the health check, and add a display name.",
@@ -965,6 +827,18 @@
 						}
 					}
 				},
+				"dockerAlerts": {
+					"title": "Container alerts",
+					"description": "Mark this host as breached while any container on it is stopped or failing its health check, and notify on the change. Containers that exit with code 0 do not count as stopped. Capture does not report exit codes, so on Capture hosts every stopped container counts.",
+					"option": {
+						"onStopped": {
+							"label": "Alert when a container is stopped"
+						},
+						"onUnhealthy": {
+							"label": "Alert when a container is unhealthy"
+						}
+					}
+				},
 				"stats": {
 					"title": "Monitor history",
 					"description": "Clear all monitoring history and statistics for your team. This action is irreversible.",
@@ -974,6 +848,29 @@
 						"description": "This will permanently delete all monitoring history, statistics, and check data for your team. This action cannot be undone.",
 						"confirm": "Yes, clear all stats"
 					}
+				},
+				"dockerTls": {
+					"title": "TLS credentials",
+					"description": "Connect to a remote Docker daemon over mutual TLS. Paste the PEM files you would pass to docker --tlsverify. The client key is encrypted before it is stored and is never shown again.",
+					"option": {
+						"ca": {
+							"label": "CA certificate",
+							"placeholder": "-----BEGIN CERTIFICATE-----"
+						},
+						"cert": {
+							"label": "Client certificate",
+							"placeholder": "-----BEGIN CERTIFICATE-----"
+						},
+						"key": {
+							"label": "Client key",
+							"placeholder": "-----BEGIN PRIVATE KEY-----",
+							"stored": "A key is stored. Leave blank to keep it."
+						},
+						"ignoreTls": {
+							"label": "Ignore TLS/SSL errors",
+							"description": "Skips verifying the daemon's certificate, so the CA certificate becomes optional. The client certificate and key are still required because the daemon verifies them."
+						}
+					}
 				}
 			}
 		},
@@ -1800,7 +1697,7 @@
 				"status": {
 					"up": "Operational",
 					"down": "Down",
-					"breached": "Threshold exceeded",
+					"breached": "Alert",
 					"maintenance": "Maintenance",
 					"paused": "Paused",
 					"initializing": "Initializing"
@@ -1827,19 +1724,26 @@
 				"uptime": {
 					"title": "Uptime",
 					"responseTime": "Response time"
+				},
+				"incidents": {
+					"modalTitle": "Incidents for {{date}}",
+					"loading": "Loading...",
+					"noIncidents": "No incidents reported for this day.",
+					"ongoing": "Ongoing",
+					"errorLoading": "Failed to load incidents."
 				}
 			},
 			"statusBar": {
 				"monitoringSummary": "Monitoring {{count}} service · Updates every 10 seconds",
 				"monitoringSummary_other": "Monitoring {{count}} services · Updates every 10 seconds",
 				"allUp": "All systems operational",
-				"allBreached": "All systems have exceeded thresholds",
+				"allBreached": "All systems have active alerts",
 				"allMaintenance": "All systems are under maintenance",
 				"allDown": "All systems are down",
 				"allPaused": "All systems are paused",
 				"allInitializing": "All systems are initializing",
-				"breachedAndDown": "Some systems have exceeded thresholds and are down",
-				"breached": "Some systems have exceeded thresholds",
+				"breachedAndDown": "Some systems have active alerts and some are down",
+				"breached": "Some systems have active alerts",
 				"degraded": "Some systems are experiencing issues",
 				"maintenanceAndDown": "Some systems are down during maintenance",
 				"maintenance": "Some systems are under maintenance",
@@ -2024,6 +1928,26 @@
 				"title": "Uptime monitors",
 				"description": "Watch HTTP endpoints, pings, containers, and ports — and get alerted the moment something goes down."
 			}
+		},
+		"dashboard": {
+			"noData": "No data available at this moment.",
+			"monitorStatus": {
+				"ofUp": "of {{total}} up"
+			},
+			"cards": {
+				"monitorStatus": "Monitor status",
+				"monitorsByType": "Monitors by type"
+			},
+			"header": {
+				"title": "Dashboard",
+				"description": "See every monitor type in one place and spot what needs attention."
+			},
+			"editCards": "Edit cards",
+			"editCardsModal": {
+				"title": "Edit cards",
+				"description": "Select the cards to display on your dashboard.",
+				"done": "Done"
+			}
 		}
 	}
 }
@@ -1377,6 +1377,9 @@
 					"maintenance": "Mantenimiento",
 					"paused": "Pausado",
 					"up": "Operativo"
+				},
+				"incidents": {
+					"errorLoading": "Error al cargar incidentes."
 				}
 			},
 			"statusBar": {
@@ -1377,6 +1377,9 @@
 					"maintenance": "Huolto",
 					"paused": "Keskeytetty",
 					"up": "Toiminnassa"
+				},
+				"incidents": {
+					"errorLoading": "Häiriöiden lataaminen epäonnistui."
 				}
 			},
 			"statusBar": {
@@ -1377,6 +1377,9 @@
 					"maintenance": "Maintenance",
 					"paused": "En pause",
 					"up": "Opérationnel"
+				},
+				"incidents": {
+					"errorLoading": "Échec du chargement des incidents."
 				}
 			},
 			"statusBar": {
@@ -1473,6 +1473,9 @@
 				"uptime": {
 					"title": "Uptime",
 					"responseTime": "Tempo di risposta"
+				},
+				"incidents": {
+					"errorLoading": "Impossibile caricare gli incidenti."
 				}
 			},
 			"statusBar": {
@@ -1377,6 +1377,9 @@
 					"maintenance": "メンテナンス",
 					"paused": "一時停止中",
 					"up": "稼働中"
+				},
+				"incidents": {
+					"errorLoading": "インシデントの読み込みに失敗しました。"
 				}
 			},
 			"statusBar": {
@@ -1584,6 +1584,9 @@
 				"uptime": {
 					"responseTime": "Czas odpowiedzi",
 					"title": "Czas pracy"
+				},
+				"incidents": {
+					"errorLoading": "Nie udało się załadować incydentów."
 				}
 			},
 			"preview": {
@@ -1377,6 +1377,9 @@
 					"maintenance": "Manutenção",
 					"paused": "Pausado",
 					"up": "Operacional"
+				},
+				"incidents": {
+					"errorLoading": "Falha ao carregar incidentes."
 				}
 			},
 			"statusBar": {
@@ -1377,6 +1377,9 @@
 					"maintenance": "Обслуживание",
 					"paused": "Приостановлено",
 					"up": "Работает"
+				},
+				"incidents": {
+					"errorLoading": "Не удалось загрузить инциденты."
 				}
 			},
 			"statusBar": {
@@ -1377,6 +1377,9 @@
 					"maintenance": "การบำรุงรักษา",
 					"paused": "หยุดชั่วคราว",
 					"up": "ใช้งานได้"
+				},
+				"incidents": {
+					"errorLoading": "ไม่สามารถโหลดเหตุการณ์ได้"
 				}
 			},
 			"statusBar": {
@@ -1377,6 +1377,9 @@
 					"maintenance": "Bakım",
 					"paused": "Duraklatıldı",
 					"up": "Çalışıyor"
+				},
+				"incidents": {
+					"errorLoading": "Olaylar yüklenemedi."
 				}
 			},
 			"statusBar": {
@@ -1377,6 +1377,9 @@
 					"maintenance": "Обслуговування",
 					"paused": "Призупинено",
 					"up": "Працює"
+				},
+				"incidents": {
+					"errorLoading": "Не вдалося завантажити інциденти."
 				}
 			},
 			"statusBar": {
@@ -1377,6 +1377,9 @@
 					"maintenance": "Bảo trì",
 					"paused": "Tạm dừng",
 					"up": "Hoạt động"
+				},
+				"incidents": {
+					"errorLoading": "Không thể tải sự cố."
 				}
 			},
 			"statusBar": {
@@ -1378,6 +1378,9 @@
 					"maintenance": "维护中",
 					"paused": "已暂停",
 					"up": "运行中"
+				},
+				"incidents": {
+					"errorLoading": "无法加载事件。"
 				}
 			},
 			"statusBar": {
@@ -1377,6 +1377,9 @@
 					"maintenance": "維護中",
 					"paused": "已暫停",
 					"up": "運行中"
+				},
+				"incidents": {
+					"errorLoading": "無法載入事件。"
 				}
 			},
 			"statusBar": {
@@ -9,6 +9,7 @@ services:
      - DB_CONNECTION_STRING=mongodb://mongodb:27017/uptime_db
      - CLIENT_HOST=${CLIENT_HOST:-http://localhost:52345}
      - JWT_SECRET=${JWT_SECRET:?set JWT_SECRET in your environment}
+      - ENCRYPTION_KEY=${ENCRYPTION_KEY:-}
    stop_grace_period: 60s
    healthcheck:
      test:
@@ -27,6 +27,17 @@ CLIENT_HOST=http://localhost:5173
 # ----------------------
 ORIGIN=localhost

+# Encryption
+# ------------------
+# Encrypts stored Docker TLS client keys. Not needed for socket-only Docker monitors.
+# Generate a key:      openssl rand -base64 32
+# Key list:            comma-separated; the first key encrypts, every key decrypts.
+# Split deployments:   set the same value on the API and every worker.
+# Rotate a key:        1. deploy OLD_KEY,NEW_KEY everywhere so every process can read both
+#                      2. deploy NEW_KEY,OLD_KEY everywhere so new writes use the new key
+#                      3. wait for the worker to re-encrypt every row, then drop OLD_KEY
+# ENCRYPTION_KEY=<output of openssl rand -base64 32>
+
 # Feature Flags
 # -------------
 # Set to "false" to disable the selectable theme feature on status pages.
@@ -422,9 +422,6 @@
 					"secret": {
 						"type": "string"
 					},
-					"sshPrivateKey": {
-						"type": "string"
-					},
 					"cpuAlertThreshold": {
 						"type": "number"
 					},
@@ -466,6 +463,24 @@
 					"geoCheckInterval": {
 						"type": "number"
 					},
+					"dockerLogsEnabled": {
+						"type": "boolean"
+					},
+					"dockerAlertOnStopped": {
+						"type": "boolean"
+					},
+					"dockerAlertOnUnhealthy": {
+						"type": "boolean"
+					},
+					"dockerTlsCa": {
+						"type": "string"
+					},
+					"dockerTlsCert": {
+						"type": "string"
+					},
+					"dockerTlsKeySet": {
+						"type": "boolean"
+					},
 					"dnsServer": {
 						"type": "string"
 					},
@@ -513,6 +528,9 @@
 					"geoCheckEnabled",
 					"geoCheckLocations",
 					"geoCheckInterval",
+					"dockerLogsEnabled",
+					"dockerAlertOnStopped",
+					"dockerAlertOnUnhealthy",
 					"teamId",
 					"userId",
 					"createdAt",
@@ -640,9 +658,6 @@
 									"secret": {
 										"type": "string"
 									},
-									"sshPrivateKey": {
-										"type": "string"
-									},
 									"cpuAlertThreshold": {
 										"type": "number"
 									},
@@ -684,6 +699,24 @@
 									"geoCheckInterval": {
 										"type": "number"
 									},
+									"dockerLogsEnabled": {
+										"type": "boolean"
+									},
+									"dockerAlertOnStopped": {
+										"type": "boolean"
+									},
+									"dockerAlertOnUnhealthy": {
+										"type": "boolean"
+									},
+									"dockerTlsCa": {
+										"type": "string"
+									},
+									"dockerTlsCert": {
+										"type": "string"
+									},
+									"dockerTlsKeySet": {
+										"type": "boolean"
+									},
 									"dnsServer": {
 										"type": "string"
 									},
@@ -733,6 +766,9 @@
 									"geoCheckEnabled",
 									"geoCheckLocations",
 									"geoCheckInterval",
+									"dockerLogsEnabled",
+									"dockerAlertOnStopped",
+									"dockerAlertOnUnhealthy",
 									"teamId",
 									"userId",
 									"createdAt",
@@ -929,6 +965,9 @@
 					{
 						"$ref": "#/components/schemas/PushoverNotification"
 					},
+					{
+						"$ref": "#/components/schemas/SignalgridNotification"
+					},
 					{
 						"$ref": "#/components/schemas/TwilioNotification"
 					},
@@ -949,6 +988,7 @@
 						"teams": "#/components/schemas/TeamsNotification",
 						"telegram": "#/components/schemas/TelegramNotification",
 						"pushover": "#/components/schemas/PushoverNotification",
+						"signalgrid": "#/components/schemas/SignalgridNotification",
 						"twilio": "#/components/schemas/TwilioNotification",
 						"ntfy": "#/components/schemas/NtfyNotification"
 					}
@@ -1380,6 +1420,34 @@
 					"accessToken": "a1234567890abcdef"
 				}
 			},
+			"SignalgridNotification": {
+				"type": "object",
+				"properties": {
+					"notificationName": {
+						"type": "string",
+						"minLength": 1
+					},
+					"type": {
+						"type": "string",
+						"enum": ["signalgrid"]
+					},
+					"address": {
+						"type": "string",
+						"minLength": 1
+					},
+					"accessToken": {
+						"type": "string",
+						"minLength": 1
+					}
+				},
+				"required": ["notificationName", "type", "address", "accessToken"],
+				"example": {
+					"notificationName": "Signalgrid",
+					"type": "signalgrid",
+					"address": "your-channel",
+					"accessToken": "your-client-key"
+				}
+			},
 			"TwilioNotification": {
 				"type": "object",
 				"properties": {
@@ -7090,9 +7158,6 @@
 														"secret": {
 															"type": "string"
 														},
-														"sshPrivateKey": {
-															"type": "string"
-														},
 														"cpuAlertThreshold": {
 															"type": "number"
 														},
@@ -7134,6 +7199,24 @@
 														"geoCheckInterval": {
 															"type": "number"
 														},
+														"dockerLogsEnabled": {
+															"type": "boolean"
+														},
+														"dockerAlertOnStopped": {
+															"type": "boolean"
+														},
+														"dockerAlertOnUnhealthy": {
+															"type": "boolean"
+														},
+														"dockerTlsCa": {
+															"type": "string"
+														},
+														"dockerTlsCert": {
+															"type": "string"
+														},
+														"dockerTlsKeySet": {
+															"type": "boolean"
+														},
 														"dnsServer": {
 															"type": "string"
 														},
@@ -7183,6 +7266,9 @@
 														"geoCheckEnabled",
 														"geoCheckLocations",
 														"geoCheckInterval",
+														"dockerLogsEnabled",
+														"dockerAlertOnStopped",
+														"dockerAlertOnUnhealthy",
 														"teamId",
 														"userId",
 														"createdAt",
@@ -7655,9 +7741,6 @@
 														"secret": {
 															"type": "string"
 														},
-														"sshPrivateKey": {
-															"type": "string"
-														},
 														"cpuAlertThreshold": {
 															"type": "number"
 														},
@@ -7699,6 +7782,24 @@
 														"geoCheckInterval": {
 															"type": "number"
 														},
+														"dockerLogsEnabled": {
+															"type": "boolean"
+														},
+														"dockerAlertOnStopped": {
+															"type": "boolean"
+														},
+														"dockerAlertOnUnhealthy": {
+															"type": "boolean"
+														},
+														"dockerTlsCa": {
+															"type": "string"
+														},
+														"dockerTlsCert": {
+															"type": "string"
+														},
+														"dockerTlsKeySet": {
+															"type": "boolean"
+														},
 														"dnsServer": {
 															"type": "string"
 														},
@@ -7748,6 +7849,9 @@
 														"geoCheckEnabled",
 														"geoCheckLocations",
 														"geoCheckInterval",
+														"dockerLogsEnabled",
+														"dockerAlertOnStopped",
+														"dockerAlertOnUnhealthy",
 														"teamId",
 														"userId",
 														"createdAt",
@@ -7984,6 +8088,231 @@
 				}
 			}
 		},
+		"/monitors/docker/details/{monitorId}/containers/{containerName}/logs": {
+			"get": {
+				"tags": ["monitors"],
+				"summary": "Get stored log lines for one container on a Docker host monitor, newest first",
+				"security": [
+					{
+						"bearerAuth": []
+					}
+				],
+				"parameters": [
+					{
+						"schema": {
+							"type": "string",
+							"minLength": 1
+						},
+						"required": true,
+						"name": "monitorId",
+						"in": "path"
+					},
+					{
+						"schema": {
+							"type": "string",
+							"minLength": 1
+						},
+						"required": true,
+						"name": "containerName",
+						"in": "path"
+					},
+					{
+						"schema": {
+							"type": "string",
+							"format": "date-time"
+						},
+						"required": false,
+						"name": "before",
+						"in": "query"
+					},
+					{
+						"schema": {
+							"type": "string",
+							"format": "date-time"
+						},
+						"required": false,
+						"name": "after",
+						"in": "query"
+					},
+					{
+						"schema": {
+							"type": "integer",
+							"minimum": 1,
+							"maximum": 50,
+							"default": 20
+						},
+						"required": false,
+						"name": "limit",
+						"in": "query"
+					}
+				],
+				"responses": {
+					"200": {
+						"description": "OK",
+						"content": {
+							"application/json": {
+								"schema": {
+									"type": "object",
+									"properties": {
+										"success": {
+											"type": "boolean",
+											"enum": [true]
+										},
+										"msg": {
+											"type": "string"
+										},
+										"data": {
+											"type": "object",
+											"properties": {
+												"logs": {
+													"type": "array",
+													"items": {
+														"type": "object",
+														"properties": {
+															"id": {
+																"type": "string"
+															},
+															"metadata": {
+																"type": "object",
+																"properties": {
+																	"monitorId": {
+																		"type": "string"
+																	},
+																	"teamId": {
+																		"type": "string"
+																	},
+																	"containerId": {
+																		"type": "string"
+																	},
+																	"containerName": {
+																		"type": "string"
+																	}
+																},
+																"required": ["monitorId", "teamId", "containerId", "containerName"]
+															},
+															"lines": {
+																"type": "array",
+																"items": {
+																	"type": "object",
+																	"properties": {
+																		"ts": {
+																			"type": "string"
+																		},
+																		"stream": {
+																			"type": "string",
+																			"enum": ["stdout", "stderr"]
+																		},
+																		"text": {
+																			"type": "string"
+																		}
+																	},
+																	"required": ["ts", "stream", "text"]
+																}
+															},
+															"gap": {
+																"type": "boolean"
+															},
+															"checkedAt": {
+																"type": "string"
+															},
+															"expiry": {
+																"type": "string"
+															},
+															"createdAt": {
+																"type": "string"
+															},
+															"updatedAt": {
+																"type": "string"
+															}
+														},
+														"required": ["id", "metadata", "lines", "gap", "checkedAt", "expiry", "createdAt", "updatedAt"]
+													}
+												},
+												"nextCursor": {
+													"type": "string",
+													"nullable": true
+												}
+											},
+											"required": ["logs", "nextCursor"]
+										}
+									},
+									"required": ["success", "msg", "data"]
+								}
+							}
+						}
+					},
+					"401": {
+						"description": "Unauthorized",
+						"content": {
+							"application/json": {
+								"schema": {
+									"type": "object",
+									"properties": {
+										"success": {
+											"type": "boolean",
+											"enum": [false]
+										},
+										"msg": {
+											"type": "string"
+										},
+										"data": {
+											"nullable": true
+										}
+									},
+									"required": ["success", "msg"]
+								}
+							}
+						}
+					},
+					"403": {
+						"description": "Forbidden",
+						"content": {
+							"application/json": {
+								"schema": {
+									"type": "object",
+									"properties": {
+										"success": {
+											"type": "boolean",
+											"enum": [false]
+										},
+										"msg": {
+											"type": "string"
+										},
+										"data": {
+											"nullable": true
+										}
+									},
+									"required": ["success", "msg"]
+								}
+							}
+						}
+					},
+					"500": {
+						"description": "Internal server error",
+						"content": {
+							"application/json": {
+								"schema": {
+									"type": "object",
+									"properties": {
+										"success": {
+											"type": "boolean",
+											"enum": [false]
+										},
+										"msg": {
+											"type": "string"
+										},
+										"data": {
+											"nullable": true
+										}
+									},
+									"required": ["success", "msg"]
+								}
+							}
+						}
+					}
+				}
+			}
+		},
 		"/monitors/pagespeed/details/{monitorId}": {
 			"get": {
 				"tags": ["monitors"],
@@ -8908,9 +9237,6 @@
 									"secret": {
 										"type": "string"
 									},
-									"sshPrivateKey": {
-										"type": "string"
-									},
 									"jsonPath": {
 										"anyOf": [
 											{
@@ -9011,6 +9337,48 @@
 										"type": "number",
 										"minimum": 300000
 									},
+									"dockerLogsEnabled": {
+										"type": "boolean"
+									},
+									"dockerAlertOnStopped": {
+										"type": "boolean"
+									},
+									"dockerAlertOnUnhealthy": {
+										"type": "boolean"
+									},
+									"dockerTlsCa": {
+										"anyOf": [
+											{
+												"type": "string"
+											},
+											{
+												"type": "string",
+												"enum": [""]
+											}
+										]
+									},
+									"dockerTlsCert": {
+										"anyOf": [
+											{
+												"type": "string"
+											},
+											{
+												"type": "string",
+												"enum": [""]
+											}
+										]
+									},
+									"dockerTlsKey": {
+										"anyOf": [
+											{
+												"type": "string"
+											},
+											{
+												"type": "string",
+												"enum": [""]
+											}
+										]
+									},
 									"dnsServer": {
 										"type": "string",
 										"minLength": 1
@@ -9604,9 +9972,6 @@
 												"secret": {
 													"type": "string"
 												},
-												"sshPrivateKey": {
-													"type": "string"
-												},
 												"cpuAlertThreshold": {
 													"type": "number",
 													"default": 100
@@ -9702,6 +10067,18 @@
 													"minimum": 300000,
 													"default": 300000
 												},
+												"dockerLogsEnabled": {
+													"type": "boolean",
+													"default": false
+												},
+												"dockerAlertOnStopped": {
+													"type": "boolean",
+													"default": false
+												},
+												"dockerAlertOnUnhealthy": {
+													"type": "boolean",
+													"default": false
+												},
 												"dnsServer": {
 													"type": "string",
 													"minLength": 1
@@ -10137,9 +10514,6 @@
 									"secret": {
 										"type": "string"
 									},
-									"sshPrivateKey": {
-										"type": "string"
-									},
 									"ignoreTlsErrors": {
 										"type": "boolean"
 									},
@@ -10269,6 +10643,48 @@
 										"type": "number",
 										"minimum": 300000
 									},
+									"dockerLogsEnabled": {
+										"type": "boolean"
+									},
+									"dockerAlertOnStopped": {
+										"type": "boolean"
+									},
+									"dockerAlertOnUnhealthy": {
+										"type": "boolean"
+									},
+									"dockerTlsCa": {
+										"anyOf": [
+											{
+												"type": "string"
+											},
+											{
+												"type": "string",
+												"enum": [""]
+											}
+										]
+									},
+									"dockerTlsCert": {
+										"anyOf": [
+											{
+												"type": "string"
+											},
+											{
+												"type": "string",
+												"enum": [""]
+											}
+										]
+									},
+									"dockerTlsKey": {
+										"anyOf": [
+											{
+												"type": "string"
+											},
+											{
+												"type": "string",
+												"enum": [""]
+											}
+										]
+									},
 									"dnsServer": {
 										"type": "string",
 										"minLength": 1
@@ -12930,6 +13346,25 @@
 									"globalProxyId": {
 										"type": "string",
 										"nullable": true
+									},
+									"egressCheckEnabled": {
+										"type": "boolean"
+									},
+									"egressCheckTargets": {
+										"type": "array",
+										"items": {
+											"type": "string",
+											"minLength": 1,
+											"maxLength": 253
+										},
+										"maxItems": 10
+									},
+									"egressNotifications": {
+										"type": "array",
+										"items": {
+											"type": "string",
+											"pattern": "^[0-9a-fA-F]{24}$"
+										}
 									}
 								}
 							}
@@ -18,6 +18,7 @@
 				"compression": "1.8.1",
 				"cookie-parser": "^1.4.7",
 				"cors": "^2.8.5",
+				"dayjs": "^1.11.23",
 				"dockerode": "5.0.0",
 				"dotenv": "^16.4.5",
 				"express": "^4.19.2",
@@ -5803,6 +5804,12 @@
 				"node": ">=18"
 			}
 		},
+		"node_modules/dayjs": {
+			"version": "1.11.23",
+			"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.23.tgz",
+			"integrity": "sha512-QDTCU0M0MxR3hQfnlDJfwekQiaanm1ubOD231u73WBckQ/fsamwRLiE2GBz6D3a/xF1NgfiDLJjXBa1hYOYTtQ==",
+			"license": "MIT"
+		},
 		"node_modules/debug": {
 			"version": "4.4.3",
 			"resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
@@ -15,7 +15,7 @@
 		"worker": "QUEUE_MODE=worker node ./dist/index.js",
 		"worker:dev": "QUEUE_MODE=worker nodemon --exec tsx src/index.js",
 		"clean": "rm -rf dist",
-		"build": "npm run clean && npm run build:openapi && tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json && cp -r src/templates dist/templates",
+		"build": "npm run clean && npm run build:openapi && tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json && cp -r src/templates dist/templates && mkdir -p dist/service && cp -r src/service/protos dist/service/",
 		"typeCheck": "tsc --noEmit",
 		"build:openapi": "tsc --noEmit && tsx scripts/buildOpenApi.ts",
 		"lint": "eslint .",
@@ -42,6 +42,7 @@
 		"compression": "1.8.1",
 		"cookie-parser": "^1.4.7",
 		"cors": "^2.8.5",
+		"dayjs": "^1.11.23",
 		"dockerode": "5.0.0",
 		"dotenv": "^16.4.5",
 		"express": "^4.19.2",
@@ -5,6 +5,7 @@ import { requireTeamId, requireUserEmail, requireUserId, requireUserRoles } from

 import {
 	registrationBodyValidation,
+	registerInviteTokenValidation,
 	loginValidation,
 	recoveryValidation,
 	recoveryTokenBodyValidation,
@@ -48,7 +49,7 @@ class AuthController implements IAuthController {

 	registerUser = catchAsync(async (req: Request, res: Response) => {
 		const newUser = req.body.user;
-		const newUserToken = req.body.token;
+		const newUserToken = registerInviteTokenValidation.parse(req.body.token);
 		if (newUser?.email) {
 			const newUserEmail = requireUserEmail(newUser.email);
 			newUser.email = newUserEmail.toLowerCase();
@@ -35,11 +35,18 @@ class NotificationController implements INotificationController {

 	testNotification = catchAsync(async (req: Request, res: Response) => {
 		const notification = testNotificationBodyValidation.parse(req.body);
-		const success = await this.notificationsService.sendTestNotification(notification);
+		let success = false;
+		let reason: string | undefined;
+		try {
+			success = await this.notificationsService.sendTestNotification(notification);
+		} catch (error: unknown) {
+			if (!(error instanceof AppError)) throw error;
+			reason = error.message;
+		}

 		return res.status(200).json({
 			success,
-			msg: success ? "Notification sent successfully" : "Notification could not be sent — check the destination details.",
+			msg: success ? "Notification sent successfully" : (reason ?? "Notification could not be sent — check the destination details."),
 			details: { service: SERVICE_NAME },
 		});
 	});
@@ -6,8 +6,11 @@ import { AppError } from "@/utils/AppError.js";
 import { ISettingsService } from "@/domain/app-settings/app-settings.service.js";
 import { IEmailService } from "@/service/emailService.js";
 import { IProxiesService } from "@/domain/proxies/proxy.service.js";
+import { IEgressStateService } from "@/domain/egress/egress-state.service.js";
 import { Settings } from "@/domain/app-settings/app-settings.type.js";

+const SERVICE_NAME = "SettingsController";
+
 export interface ISettingsController {
 	getAppSettings: RequestHandler;
 	updateAppSettings: RequestHandler;
@@ -18,10 +21,17 @@ class SettingsController implements ISettingsController {
 	private settingsService: ISettingsService;
 	private emailService: IEmailService;
 	private proxiesService: IProxiesService;
-	constructor(settingsService: ISettingsService, emailService: IEmailService, proxiesService: IProxiesService) {
+	private egressStateService: IEgressStateService;
+	constructor(
+		settingsService: ISettingsService,
+		emailService: IEmailService,
+		proxiesService: IProxiesService,
+		egressStateService: IEgressStateService
+	) {
 		this.settingsService = settingsService;
 		this.emailService = emailService;
 		this.proxiesService = proxiesService;
+		this.egressStateService = egressStateService;
 	}

 	buildAppSettings = async (dbSettings: Settings) => {
@@ -70,7 +80,14 @@ class SettingsController implements ISettingsController {
 			}
 		}

+		const previousSettings = await this.settingsService.getDBSettings();
 		const updatedSettings = await this.settingsService.updateDbSettings(validatedBody);
+
+		// Switching the egress check on or off starts from a clean state: no degraded episode, no pending recovery job
+		if (validatedBody.egressCheckEnabled !== undefined && validatedBody.egressCheckEnabled !== previousSettings.egressCheckEnabled) {
+			await this.egressStateService.reset();
+		}
+
 		const returnSettings = await this.buildAppSettings(updatedSettings);
 		return res.status(200).json({
 			success: true,
@@ -104,7 +121,7 @@ class SettingsController implements ISettingsController {

 		const html = await this.emailService.buildEmail("testEmailTemplate", context);
 		if (!html) {
-			throw new AppError({ message: "Failed to build email template.", status: 500 });
+			throw new AppError({ message: "Failed to build email template.", status: 500, service: SERVICE_NAME, method: "sendTestEmail" });
 		}
 		let messageId: string;
 		try {
@@ -127,8 +144,11 @@ class SettingsController implements ISettingsController {
 			// Surface the underlying SMTP failure: diagnosing the settings is the whole
 			// point of the test email endpoint.
 			throw new AppError({
-				message: error instanceof Error ? `Failed to send test email. ${error.message}` : "Failed to send test email.",
-				status: 500,
+				message: error instanceof AppError ? error.message : "Failed to send test email.",
+				status: error instanceof AppError ? error.status : 500,
+				service: SERVICE_NAME,
+				method: "sendTestEmail",
+				details: error instanceof AppError ? error.details : undefined,
 			});
 		}

@@ -7,6 +7,8 @@ import {
 	getStatusPageQueryValidation,
 	imageValidation,
 	resolveStatusPageQueryValidation,
+	getPublicMonitorIncidentsParamValidation,
+	getPublicMonitorIncidentsQueryValidation,
 } from "@/api/validation/statusPageValidation.js";
 import { AppError } from "@/utils/AppError.js";
 import { requireTeamId, requireUserId } from "@/api/controllers/controllerUtils.js";
@@ -17,6 +19,7 @@ export interface IStatusPageController {
 	createStatusPage: RequestHandler;
 	updateStatusPage: RequestHandler;
 	getStatusPageByUrl: RequestHandler;
+	getPublicMonitorIncidents: RequestHandler;
 	resolveStatusPageByDomain: RequestHandler;
 	getStatusPagesByTeamId: RequestHandler;
 	deleteStatusPage: RequestHandler;
@@ -85,6 +88,19 @@ class StatusPageController implements IStatusPageController {
 		});
 	});

+	getPublicMonitorIncidents = catchAsync(async (req: Request, res: Response) => {
+		const { url, monitorId } = getPublicMonitorIncidentsParamValidation.parse(req.params);
+		const { date } = getPublicMonitorIncidentsQueryValidation.parse(req.query);
+
+		const incidents = await this.statusPageService.getPublicMonitorIncidents(url, monitorId, date, req.user?.teamId);
+
+		return res.status(200).json({
+			success: true,
+			msg: "Incidents retrieved successfully",
+			data: { incidents },
+		});
+	});
+
 	resolveStatusPageByDomain = catchAsync(async (req: Request, res: Response) => {
 		const { range } = resolveStatusPageQueryValidation.parse(req.query);
 		const domain = resolveStatusPageDomainFromRequest(req.hostname, req.query.domain as string | undefined);
@@ -16,7 +16,15 @@ export const isPublicStatusPageApiPath = (method: string, path: string): boolean
 		return true;
 	}

-	if (!slug || slug === "team" || slug.includes("/")) {
+	if (!slug || slug === "team") {
+		return false;
+	}
+
+	if (slug.includes("/")) {
+		const parts = slug.split("/");
+		if (parts.length === 3 && parts[1] === "incidents") {
+			return true;
+		}
 		return false;
 	}

@@ -14,6 +14,7 @@ export const createStatusPageRoutes = (
 	router.put("/:id", imageUpload.single("logo"), verifyJWT, isAllowed(["admin", "superadmin"]), statusPageController.updateStatusPage);
 	router.get("/resolve", statusPageController.resolveStatusPageByDomain);
 	router.get("/:url", verifyStatusPageAccess, statusPageController.getStatusPageByUrl);
+	router.get("/:url/incidents/:monitorId", verifyStatusPageAccess, statusPageController.getPublicMonitorIncidents);
 	router.delete("/:id", verifyJWT, isAllowed(["admin", "superadmin"]), statusPageController.deleteStatusPage);
 	return router;
 };
@@ -23,6 +23,8 @@ export const registrationBodyValidation = z.object({
 	inviteToken: z.string().optional().default(""),
 });

+export const registerInviteTokenValidation = z.string().optional().default("");
+
 export const recoveryValidation = z.object({
 	email: z.email("Must be a valid email address"),
 });