Merge pull request #4000 from bluewave-labs/feat/express-5-bump

feat: migrate to Express 5

.github/CODEOWNERS

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

.github/workflows/check-build.yml

@@ -12,7 +12,7 @@ jobs:
       - name: Set up Node
         uses: actions/setup-node@v4
         with:
-          node-version: 22
+          node-version: 24
 
       - name: Install client dependencies
         working-directory: client
@@ -29,7 +29,7 @@ jobs:
       - name: Set up Node
         uses: actions/setup-node@v4
         with:
-          node-version: 22
+          node-version: 24
 
       - name: Install server dependencies
         working-directory: server

.github/workflows/check-format.yml

@@ -12,7 +12,7 @@ jobs:
       - name: Set up Node
         uses: actions/setup-node@v4
         with:
-          node-version: 22
+          node-version: 24
 
       - name: Install client dependencies
         working-directory: client
@@ -30,7 +30,7 @@ jobs:
       - name: Set up Node
         uses: actions/setup-node@v4
         with:
-          node-version: 22
+          node-version: 24
 
       - name: Install server dependencies
         working-directory: server

.github/workflows/check-tests.yml

@@ -12,7 +12,7 @@ jobs:
       - name: Set up Node
         uses: actions/setup-node@v4
         with:
-          node-version: 22
+          node-version: 24
 
       - name: Install server dependencies
         working-directory: server

CLAUDE.md

@@ -62,7 +62,7 @@ VITE_APP_LOG_LEVEL="debug"
 
 ### Monorepo Structure
 - `/client` - React 18 + TypeScript + Vite + MUI frontend
-- `/server` - Node.js 20+ + Express + TypeScript backend
+- `/server` - Node.js 24+ + Express + TypeScript backend
 - `/docker` - Multi-environment Docker configs (dev, staging, prod, arm, mono)
 
 ### Backend Layers

README.md

@@ -36,8 +36,7 @@
 
 [![Run on PikaPods](https://www.pikapods.com/static/run-button.svg)](https://www.pikapods.com/pods?run=checkmate)
 
-
+<img width="1461" height="853" alt="image" src="https://github.com/user-attachments/assets/d5ee1a4e-9db9-47cc-ad47-e1ba88a9d796" />
-<img width="1703" height="1041" alt="image" src="https://github.com/user-attachments/assets/0f4dcf38-9b42-4b84-8633-ff34778df1a8" />
 </p>
 <br>
 
@@ -93,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
@@ -105,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:
 
@@ -119,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>
@@ -134,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)
 
@@ -152,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
+- Status pages with 5 beautiful themes
-- E-mail, Webhooks, Discord, Slack, PagerDuty, Matrix, Rocket.Chat, Microsoft Teams, Telegram, Pushover, Twilio (SMS) notifications
+- 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
@@ -212,9 +329,9 @@ Feel free to ask questions or share your ideas - we'd love to hear from you!
 <a id="contributing"></a>
 ## Contributing
 
-We are [Alex](http://github.com/ajhollid) (team lead), [Gorkem](http://github.com/gorkem-bwl/), [Aryaman](https://github.com/Br0wnHammer) and [Mert](https://github.com/mertssmnoglu) helping individuals and businesses monitor their infra and servers.
+We are [Alex](http://github.com/ajhollid) (team lead), [Gorkem](http://github.com/gorkem-bwl/), [Aryaman](https://github.com/Br0wnHammer), [Malena](https://github.com/malenacaroline) and [Mert](https://github.com/mertssmnoglu) helping individuals and businesses monitor their infra and servers.
 
-We pride ourselves on building strong connections with contributors at every level. Despite being a young project, Checkmate has already earned 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!
 

client/package-lock.json

@@ -1,16 +1,17 @@
 {
 	"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",
 				"@emotion/react": "^11.13.3",
 				"@emotion/styled": "^11.13.0",
+				"@fontsource-variable/geist": "^5.3.0",
 				"@hello-pangea/dnd": "^18.0.0",
 				"@hookform/resolvers": "5.2.2",
 				"@mui/lab": "7.0.0",
@@ -950,6 +951,15 @@
 				"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
 			}
 		},
+		"node_modules/@fontsource-variable/geist": {
+			"version": "5.3.0",
+			"resolved": "https://registry.npmjs.org/@fontsource-variable/geist/-/geist-5.3.0.tgz",
+			"integrity": "sha512-j0m+vLQuG5XAYoHtGCVu0spvlGreR3EzpECUVzkFmI1mTVnAO38l/NEPDCFgZ177JxzYJCLSmTQibIiYPilGrA==",
+			"license": "OFL-1.1",
+			"funding": {
+				"url": "https://github.com/sponsors/ayuhito"
+			}
+		},
 		"node_modules/@hapi/hoek": {
 			"version": "9.3.0",
 			"license": "BSD-3-Clause"

client/package.json

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

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

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

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

@@ -8,7 +8,7 @@ interface IconProps {
 	color?: string;
 }
 
-const Icon = ({ icon: Icon, size = 20, strokeWidth = 1.5, color }: IconProps) => {
+const Icon = ({ icon: Icon, size = 16, strokeWidth = 1.5, color }: IconProps) => {
 	return (
 		<Icon
 			size={size}

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

@@ -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>
 					</>
 				)}

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

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

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

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

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

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

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

@@ -2,7 +2,7 @@ import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
 import Box from "@mui/material/Box";
 import { useTheme } from "@mui/material/styles";
-import { lighten } from "@mui/material/styles";
+import { darken, lighten } from "@mui/material/styles";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import type { PaletteKey } from "@/Utils/Theme/Theme";
 import { BaseBox, TooltipWithInfo } from "@/Components/design-elements";
@@ -19,10 +19,10 @@ export const GradientBox = ({ children, palette, sx, interactive }: GradientBox)
 	const isSmall = useMediaQuery(theme.breakpoints.down("md"));
 	const isLight = theme.palette.mode === "light";
 	const paper = theme.palette.background.paper;
-	const paperStart = lighten(paper, isLight ? 0.06 : 0.08);
+	const paperStart = isLight ? darken(paper, 0.02) : lighten(paper, 0.08);
 	const paperEnd = paper;
 	const bg = palette
-		? `linear-gradient(135deg, ${theme.palette[palette].light} 0%, ${theme.palette[palette].main} 100%)`
+		? `linear-gradient(135deg, ${lighten(theme.palette[palette].main, 0.12)} 0%, ${theme.palette[palette].main} 100%)`
 		: `linear-gradient(135deg, ${paperStart} 0%, ${paperEnd} 100%)`;
 
 	return (

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

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

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

@@ -52,6 +52,7 @@ type DataTableProps<T extends { id?: string | number; _id?: string | number }> =
 	emptyViewText?: string;
 	emptyViewPositive?: boolean;
 	getRowSx?: (row: T) => SxProps<Theme>;
+	isRowSelected?: (row: T) => boolean;
 };
 
 export function DataTable<
@@ -70,6 +71,7 @@ export function DataTable<
 	emptyViewText,
 	emptyViewPositive,
 	getRowSx,
+	isRowSelected,
 }: DataTableProps<T>) {
 	const theme = useTheme();
 	const [expanded, setExpanded] = useState<(string | number) | null>(null);
@@ -79,6 +81,21 @@ export function DataTable<
 	};
 
 	const isSmall = useMediaQuery(theme.breakpoints.down("md"));
+
+	const hasTextSelectionWithin = (element: Element) => {
+		const selection = window.getSelection();
+		if (!selection || selection.isCollapsed || !selection.toString().trim()) {
+			return false;
+		}
+		return (
+			selection.anchorNode !== null &&
+			element.contains(
+				selection.anchorNode.nodeType === Node.TEXT_NODE
+					? selection.anchorNode.parentNode
+					: selection.anchorNode
+			)
+		);
+	};
 	const isInteractive = Boolean(onRowClick) || expandableRows;
 
 	if (data.length === 0 || headers.length === 0) {
@@ -100,7 +117,10 @@ export function DataTable<
 					keys.push(key);
 					return (
 						<Stack
-							onClick={() => (onRowClick ? onRowClick(row) : null)}
+							onClick={(e) => {
+								if (hasTextSelectionWithin(e.currentTarget)) return;
+								if (onRowClick) onRowClick(row);
+							}}
 							spacing={theme.spacing(LAYOUT.XS)}
 							sx={{
 								borderStyle: "solid",
@@ -197,7 +217,7 @@ export function DataTable<
 					"& :is(th)": {
 						backgroundColor: theme.palette.background.paper,
 						color: theme.palette.text.secondary,
-						fontWeight: 500,
+						fontWeight: 600,
 						textTransform: "uppercase",
 						letterSpacing: "0.08em",
 						padding: `${theme.spacing(SPACING.LG)} ${theme.spacing(LAYOUT.MD)}`,
@@ -213,10 +233,6 @@ export function DataTable<
 					"& .MuiTableBody-root .MuiTableRow-root:last-child .MuiTableCell-root": {
 						borderBottom: "none",
 					},
-					"& .MuiTableBody-root .MuiTableRow-root.is-clickable:hover .MuiTableCell-root":
-						{
-							backgroundColor: theme.palette.action.rowHover,
-						},
 				}}
 			>
 				<TableHead>
@@ -237,16 +253,29 @@ export function DataTable<
 					{data.map((row) => {
 						const key = row.id || row._id || Math.random();
 						const isExpanded = expanded === key;
+						const selected = isRowSelected?.(row);
 
 						return (
 							<Fragment key={key}>
 								<TableRow
-									className={isInteractive ? "is-clickable" : undefined}
 									sx={{
 										cursor: isInteractive ? "pointer" : "default",
+										...(isInteractive && {
+											"&:hover .MuiTableCell-root": {
+												backgroundColor: selected
+													? theme.palette.action.selectedHover
+													: theme.palette.action.rowHover,
+											},
+										}),
+										...(selected && {
+											"& .MuiTableCell-root": {
+												backgroundColor: theme.palette.action.selected,
+											},
+										}),
 										...(getRowSx?.(row) as object),
 									}}
-									onClick={() => {
+									onClick={(e) => {
+										if (hasTextSelectionWithin(e.currentTarget)) return;
 										if (expandableRows) handleExpand(row);
 										else if (onRowClick) onRowClick(row);
 									}}

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

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

client/src/Components/inputs/Button.tsx

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

client/src/Components/inputs/ColorPicker.tsx

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

client/src/Components/inputs/DatePicker.tsx

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

client/src/Components/inputs/Select.tsx

@@ -6,6 +6,7 @@ import Stack from "@mui/material/Stack";
 import { FieldLabel } from "./FieldLabel";
 import { ChevronDown } from "lucide-react";
 import Typography from "@mui/material/Typography";
+import { INPUT_BASE_HEIGHT } from "@/Utils/Theme/constants";
 
 interface SelectInputProps<T> extends Omit<SelectProps<T>, "label"> {
 	fieldLabel?: string;
@@ -71,7 +72,7 @@ const SelectInputInner = <T,>(
 				/>
 			)}
 			sx={{
-				height: "34px",
+				height: `${INPUT_BASE_HEIGHT}px`,
 				"& .MuiSelect-select": {
 					display: "flex",
 					alignItems: "center",
@@ -83,10 +84,6 @@ const SelectInputInner = <T,>(
 				},
 				"& .MuiOutlinedInput-notchedOutline": {
 					borderRadius: theme.shape.borderRadius,
-					borderColor: theme.palette.divider,
-				},
-				"&:hover .MuiOutlinedInput-notchedOutline": {
-					borderColor: theme.palette.divider,
 				},
 				...props.sx,
 			}}

client/src/Components/inputs/TextInput.tsx

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

client/src/Components/inputs/TimePicker.tsx

@@ -7,6 +7,7 @@ import Typography from "@mui/material/Typography";
 import { FieldLabel } from "./FieldLabel";
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
 import { LocalizationProvider } from "@mui/x-date-pickers";
+import { INPUT_BASE_HEIGHT } from "@/Utils/Theme/constants";
 
 interface TimePickerComponentProps extends Omit<MobileTimePickerProps<Dayjs>, "label"> {
 	fieldLabel?: string;
@@ -33,7 +34,7 @@ export const TimePickerComponent = ({
 						sx: {
 							width: "fit-content",
 							"& input": {
-								minHeight: 34,
+								minHeight: INPUT_BASE_HEIGHT,
 								p: 0,
 								px: theme.spacing(5),
 							},

client/src/Components/inputs/ToggleButton.tsx

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

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

@@ -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 ?? ""}
 				/>

client/src/Components/monitors/HeaderMonitorControls.tsx

@@ -60,20 +60,22 @@ export const HeaderMonitorControls = ({
 				direction={{ xs: "column", md: "row" }}
 				gap={theme.spacing(2)}
 			>
-				<Button
+				{isAdmin && (
-					variant="contained"
+					<Button
-					color="secondary"
+						variant="contained"
-					loading={isPosting}
+						color="secondary"
-					startIcon={<Icon icon={Mail} />}
+						loading={isPosting}
-					onClick={async () => {
+						startIcon={<Icon icon={Mail} />}
-						await post(`/notifications/test/all`, { monitorId: monitor.id });
+						onClick={async () => {
-					}}
+							await post(`/notifications/test/all`, { monitorId: monitor.id });
-					sx={{
+						}}
-						whiteSpace: "nowrap",
+						sx={{
-					}}
+							whiteSpace: "nowrap",
-				>
+						}}
-					{t("common.buttons.testNotifications")}
+					>
-				</Button>
+						{t("common.buttons.testNotifications")}
+					</Button>
+				)}
 				<Button
 					variant="contained"
 					color="secondary"

client/src/Components/monitors/MonitorListPage.tsx

@@ -35,7 +35,7 @@ export const MonitorListPage = ({
 	headerKey,
 	page,
 	actionLink,
-	controller: c,
+	controller,
 	bulkActions,
 	showTypeFilter,
 	summaryProps,
@@ -48,14 +48,14 @@ export const MonitorListPage = ({
 	const theme = useTheme();
 	const isSmall = useMediaQuery(theme.breakpoints.down("md"));
 	const isAdmin = useIsAdmin();
-	const isLoading = c.isLoading || Boolean(extraLoading);
+	const isLoading = controller.isLoading || Boolean(extraLoading);
 
 	return (
 		<MonitorBasePageWithStates
 			headerKey={headerKey}
 			loading={isLoading}
-			error={c.error || extraError}
+			error={controller.error || extraError}
-			totalCount={c.effectiveTotalCount}
+			totalCount={controller.effectiveTotalCount}
 			page={page}
 			actionLink={actionLink}
 			priorityFallback={priorityFallback}
@@ -66,7 +66,7 @@ export const MonitorListPage = ({
 				isAdmin={isAdmin}
 			/>
 			<HeaderMonitorsSummary
-				summary={c.summary}
+				summary={controller.summary}
 				{...summaryProps}
 			/>
 			<Stack
@@ -78,27 +78,27 @@ export const MonitorListPage = ({
 					{...(showTypeFilter === false
 						? { showTypes: false }
 						: {
-								selectedTypes: c.selectedTypes,
+								selectedTypes: controller.selectedTypes,
-								setSelectedTypes: c.setSelectedTypes,
+								setSelectedTypes: controller.setSelectedTypes,
 							})}
-					selectedStatus={c.selectedStatus}
+					selectedStatus={controller.selectedStatus}
-					setSelectedStatus={c.setSelectedStatus}
+					setSelectedStatus={controller.setSelectedStatus}
-					selectedState={c.selectedState}
+					selectedState={controller.selectedState}
-					setSelectedState={c.setSelectedState}
+					setSelectedState={controller.setSelectedState}
-					tagOptions={c.tags ?? []}
+					tagOptions={controller.tags ?? []}
-					selectedTags={c.selectedTags}
+					selectedTags={controller.selectedTags}
-					setSelectedTags={c.setSelectedTags}
+					setSelectedTags={controller.setSelectedTags}
-					onClearFilters={c.handleClearFilters}
+					onClearFilters={controller.handleClearFilters}
 				/>
 				<TextField
 					placeholder={t("pages.uptime.filters.search.placeholder")}
-					value={c.search}
+					value={controller.search}
 					onChange={(event) => {
-						c.setSearch(event.target.value);
+						controller.setSearch(event.target.value);
 					}}
 				/>
 			</Stack>
-			{c.selectedTags.length > 0 && (
+			{controller.selectedTags.length > 0 && (
 				<Stack
 					direction={isSmall ? "column" : "row"}
 					alignItems={isSmall ? "flex-start" : "center"}
@@ -108,8 +108,8 @@ export const MonitorListPage = ({
 					<Typography color={theme.palette.text.secondary}>
 						{t("pages.uptime.filters.activeTags")}
 					</Typography>
-					{c.selectedTags.map((tagId) => {
+					{controller.selectedTags.map((tagId) => {
-						const tag = c.tags?.find((t) => t.id === tagId);
+						const tag = controller.tags?.find((t) => t.id === tagId);
 						if (!tag) return null;
 						return (
 							<ColoredLabel
@@ -123,20 +123,20 @@ export const MonitorListPage = ({
 			)}
 			{bulkActions && !isLoading && (
 				<BulkActionsBar
-					selectedCount={c.selectedRows.length}
+					selectedCount={controller.selectedRows.length}
-					onCancel={c.handleCancelSelection}
+					onCancel={controller.handleCancelSelection}
 				>
 					<Button
 						size="small"
 						startIcon={<Play size={16} />}
-						onClick={c.handleBulkResume}
+						onClick={controller.handleBulkResume}
 					>
 						{t("common.buttons.resume")}
 					</Button>
 					<Button
 						size="small"
 						startIcon={<Pause size={16} />}
-						onClick={c.handleBulkPause}
+						onClick={controller.handleBulkPause}
 					>
 						{t("common.buttons.pause")}
 					</Button>
@@ -144,12 +144,12 @@ export const MonitorListPage = ({
 			)}
 			{children}
 			<Dialog
-				open={c.isDialogOpen}
+				open={controller.isDialogOpen}
 				title={t("common.dialogs.delete.title")}
 				content={t("common.dialogs.delete.description")}
-				onConfirm={c.handleConfirmDelete}
+				onConfirm={controller.handleConfirmDelete}
-				onCancel={c.handleCancelDelete}
+				onCancel={controller.handleCancelDelete}
-				loading={c.isDeleting}
+				loading={controller.isDeleting}
 			/>
 		</MonitorBasePageWithStates>
 	);

client/src/Components/monitors/MonitorStatBoxes.tsx

@@ -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 = timeOfLastCheck
-	const lastCheckTime = formatDuration(timeSinceLastCheck);
+		? formatDuration(Date.now() - timeOfLastCheck, {
+				long: true,
+				relative: true,
+				locale: i18n.resolvedLanguage,
+			})
+		: t("common.labels.na");
 	const isActive =
 		monitor?.status === "up" ||
 		monitor?.status === "paused" ||

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

@@ -1,15 +1,58 @@
-import { BaseChart } from "@/Components/design-elements";
+import { BaseChart, BaseBox } from "@/Components/design-elements";
-import { Area, AreaChart, CartesianGrid, ResponsiveContainer } from "recharts";
+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"

client/src/Components/sidebar/Menu.tsx

@@ -20,21 +20,27 @@ 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.uptime"),
 					path: "uptime",
 					icon: <Icon icon={Globe} />,
 				},
 				{
-					name: t("components.sidebar.menu.pagespeed"),
+					name: t("components.sidebar.menu.docker"),
-					path: "pagespeed",
+					path: "docker",
-					icon: <Icon icon={Gauge} />,
+					icon: <Icon icon={Container} />,
 				},
 				{
 					name: t("components.sidebar.menu.infrastructure"),
@@ -42,9 +48,9 @@ export const getMenu = (t: Function) => {
 					icon: <Icon icon={Link} />,
 				},
 				{
-					name: t("components.sidebar.menu.docker"),
+					name: t("components.sidebar.menu.pagespeed"),
-					path: "docker",
+					path: "pagespeed",
-					icon: <Icon icon={Container} />,
+					icon: <Icon icon={Gauge} />,
 				},
 			],
 		},

client/src/Components/sidebar/NavItem.tsx

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

client/src/Components/sidebar/index.tsx

@@ -73,11 +73,11 @@ export const Sidebar = () => {
 				gap={theme.spacing(LAYOUT.SM)}
 				borderRight={`1px solid ${theme.palette.divider}`}
 				width={width}
+				bgcolor={theme.palette.background.paper}
 				sx={{
 					touchAction: "none",
 					transition: transition,
 					zIndex: 1000,
-					backdropFilter: "blur(8px)",
 				}}
 			>
 				<List

client/src/Features/UI/uiSlice.ts

@@ -1,8 +1,16 @@
+import {
+	dashboardCardKeys,
+	type DashboardCardKey,
+	type DashboardSortOrder,
+} from "@/Types/Dashboard";
+import type { SortOrder } from "@/Types/Query";
 import { createSlice, type PayloadAction } from "@reduxjs/toolkit";
 
 type ThemeMode = "light" | "dark";
 type ChartType = "histogram" | "line";
+
 type TableName =
+	| "dashboard"
 	| "monitors"
 	| "team"
 	| "maintenance"
@@ -13,6 +21,8 @@ type TableName =
 
 interface TableState {
 	rowsPerPage: number;
+	sortField?: string;
+	sortOrder?: SortOrder;
 }
 
 interface SidebarState {
@@ -20,6 +30,7 @@ interface SidebarState {
 }
 
 interface UIState {
+	dashboard: TableState;
 	monitors: TableState;
 	pagespeed: TableState;
 	team: TableState;
@@ -35,6 +46,8 @@ interface UIState {
 	language: string;
 	starPromptOpen: boolean;
 	chartType: ChartType;
+	dashboardVisibleCards: DashboardCardKey[];
+	dashboardUptimeSortOrder: DashboardSortOrder;
 }
 
 const initialMode: ThemeMode = window?.matchMedia?.("(prefers-color-scheme: dark)")
@@ -43,6 +56,9 @@ const initialMode: ThemeMode = window?.matchMedia?.("(prefers-color-scheme: dark
 	: "light";
 
 const initialState: UIState = {
+	dashboard: {
+		rowsPerPage: 100,
+	},
 	monitors: {
 		rowsPerPage: 10,
 	},
@@ -74,6 +90,8 @@ const initialState: UIState = {
 	language: "en",
 	starPromptOpen: true,
 	chartType: "histogram",
+	dashboardVisibleCards: [...dashboardCardKeys],
+	dashboardUptimeSortOrder: "ascending",
 };
 
 const uiSlice = createSlice({
@@ -90,6 +108,14 @@ const uiSlice = createSlice({
 			const { table, value } = action.payload;
 			state[table].rowsPerPage = value;
 		},
+		setTableSort: (
+			state,
+			action: PayloadAction<{ table: TableName; field: string; order: SortOrder }>
+		) => {
+			const { table, field, order } = action.payload;
+			state[table].sortField = field;
+			state[table].sortOrder = order;
+		},
 		toggleSidebar: (state) => {
 			state.sidebar.collapsed = !state.sidebar.collapsed;
 		},
@@ -117,6 +143,12 @@ const uiSlice = createSlice({
 		setChartType: (state, action: PayloadAction<ChartType>) => {
 			state.chartType = action.payload;
 		},
+		setDashboardVisibleCards: (state, action: PayloadAction<DashboardCardKey[]>) => {
+			state.dashboardVisibleCards = action.payload;
+		},
+		setDashboardUptimeSortOrder: (state, action: PayloadAction<DashboardSortOrder>) => {
+			state.dashboardUptimeSortOrder = action.payload;
+		},
 	},
 });
 
@@ -124,6 +156,7 @@ export type { UIState, ThemeMode, ChartType, TableName };
 export default uiSlice.reducer;
 export const {
 	setRowsPerPage,
+	setTableSort,
 	toggleSidebar,
 	setCollapsed,
 	setMode,
@@ -133,4 +166,6 @@ export const {
 	setLanguage,
 	setStarPromptOpen,
 	setChartType,
+	setDashboardVisibleCards,
+	setDashboardUptimeSortOrder,
 } = uiSlice.actions;

client/src/Hooks/UseApi.ts

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

client/src/Hooks/UseToast.ts

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

client/src/Hooks/useMonitorForm.ts

@@ -77,6 +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":

client/src/Hooks/useMonitorListController.ts

@@ -1,4 +1,4 @@
-import { setRowsPerPage, type TableName } from "@/Features/UI/uiSlice";
+import { setRowsPerPage, setTableSort, type TableName } from "@/Features/UI/uiSlice";
 import { useDelete, useGet } from "@/Hooks/UseApi";
 import { useBulkMonitorActions } from "@/Hooks/useBulkMonitorActions";
 import useDebounce from "@/Hooks/useDebounce";
@@ -10,6 +10,7 @@ import {
 	type MonitorType,
 } from "@/Types/Monitor";
 import type { Tag } from "@/Types/Tag";
+import type { SortOrder } from "@/Types/Query";
 import { useCallback, useMemo, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 
@@ -24,10 +25,12 @@ interface MonitorListConfig {
 
 export const useMonitorListController = (config: MonitorListConfig) => {
 	const dispatch = useDispatch();
-	const rowsPerPage = useSelector(
+	const tableState = useSelector(
-		(state: RootState) =>
+		(state: RootState) => state.ui?.[config.rowsPerPageTable]
-			state.ui?.[config.rowsPerPageTable]?.rowsPerPage ?? config.rowsPerPageDefault
 	);
+	const rowsPerPage = tableState?.rowsPerPage ?? config.rowsPerPageDefault;
+	const sortField = tableState?.sortField ?? config.initialSortField ?? "";
+	const sortOrder = tableState?.sortOrder ?? "asc";
 
 	// Filter states
 	const [selectedTypes, setSelectedTypes] = useState<MonitorType[]>([]);
@@ -36,8 +39,6 @@ export const useMonitorListController = (config: MonitorListConfig) => {
 	const [selectedTags, setSelectedTags] = useState<string[]>([]);
 	const [page, setPage] = useState<number>(0);
 	const [search, setSearch] = useState<string>("");
-	const [sortField, setSortField] = useState<string>(config.initialSortField ?? "");
-	const [sortOrder, setSortOrder] = useState<"asc" | "desc">("asc");
 	const [selectedMonitor, setSelectedMonitor] = useState<Monitor | null>(null);
 	const debouncedSearch = useDebounce<string>(search, 300);
 
@@ -135,6 +136,11 @@ export const useMonitorListController = (config: MonitorListConfig) => {
 		setPage(0);
 	};
 
+	const setSort = (field: string, order: SortOrder) => {
+		dispatch(setTableSort({ field, order, table: config.rowsPerPageTable }));
+		setPage(0);
+	};
+
 	// Check for active filters
 	const hasActiveFilters = Boolean(
 		selectedTypes.length > 0 ||
@@ -189,9 +195,8 @@ export const useMonitorListController = (config: MonitorListConfig) => {
 		rowsPerPage,
 		handleSetRowsPerPage,
 		sortField,
-		setSortField,
 		sortOrder,
-		setSortOrder,
+		setSort,
 
 		// Delete
 		selectedMonitor,

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

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

client/src/Pages/CreateMonitor/index.tsx

@@ -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;
@@ -118,8 +168,8 @@ const getGeneralSettingsConfig = (
 			showDnsRecordType: false,
 		},
 		docker: {
-			urlLabel: t("pages.createMonitor.form.general.option.container.label"),
+			urlLabel: t("pages.createMonitor.form.general.option.dockerHost.label"),
-			urlPlaceholder: t("pages.createMonitor.form.general.option.container.placeholder"),
+			urlPlaceholder: t("pages.createMonitor.form.general.option.dockerHost.placeholder"),
 			namePlaceholder: t("pages.createMonitor.form.general.option.name.placeholder"),
 			showUrl: true,
 			showProxy: false,
@@ -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();
@@ -255,6 +305,7 @@ const CreateMonitorPage = () => {
 		const firstSegment = pathSegments[0];
 		if (firstSegment === "pagespeed") return "pagespeed";
 		if (firstSegment === "infrastructure") return "hardware";
+		if (firstSegment === "docker") return "docker";
 		return "uptime";
 	}, [location.pathname]);
 
@@ -264,7 +315,9 @@ const CreateMonitorPage = () => {
 			? "pagespeed"
 			: pageType === "hardware"
 				? "hardware"
-				: "http";
+				: pageType === "docker"
+					? "docker"
+					: "http";
 
 	const { data: existingMonitor, refetch: refetchMonitor } = useGet<Monitor>(
 		isEditMode ? `/monitors/${monitorId}` : null
@@ -297,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);
@@ -326,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;
@@ -373,6 +438,8 @@ const CreateMonitorPage = () => {
 				navigate("/pagespeed");
 			} else if (pageType === "hardware") {
 				navigate("/infrastructure");
+			} else if (pageType === "docker") {
+				navigate("/docker");
 			} else {
 				navigate("/uptime");
 			}
@@ -454,16 +521,18 @@ const CreateMonitorPage = () => {
 		[t]
 	);
 
-	const intervalOptions = useMemo(
+	const intervalOptions = useMemo(() => {
-		() =>
+		const options = MonitorIntervalOptions.map(({ value }) =>
-			MonitorIntervalOptions.map((option) => ({
+			toIntervalOption(value, i18n.resolvedLanguage)
-				value: option.value,
+		);
-				label: t(
+		if (
-					`pages.createMonitor.form.frequency.option.frequency.value.${option.labelKey}`
+			typeof watchedInterval === "number" &&
-				),
+			!options.some((option) => option.id === watchedInterval)
-			})),
+		) {
-		[t]
+			options.push(toIntervalOption(watchedInterval, i18n.resolvedLanguage));
-	);
+		}
+		return options;
+	}, [watchedInterval, i18n.resolvedLanguage]);
 
 	const matchMethodOptions = useMemo(
 		() =>
@@ -548,7 +617,6 @@ const CreateMonitorPage = () => {
 						}
 					/>
 				)}
-
 				{showStep(0) && (
 					<ConfigBox
 						title={t("pages.createMonitor.form.general.title")}
@@ -649,8 +717,8 @@ const CreateMonitorPage = () => {
 									/>
 								)}
 
-								{/* Secret field - only for hardware type */}
+								{/* Capture API secret - used by hardware and Capture-backed Docker monitors */}
-								{generalSettingsConfig.showSecret && (
+								{(generalSettingsConfig.showSecret || isCaptureDocker) && (
 									<FormTextField
 										name="secret"
 										fieldLabel={t("pages.createMonitor.form.general.option.secret.label")}
@@ -659,6 +727,12 @@ const CreateMonitorPage = () => {
 										)}
 									/>
 								)}
+								{isCaptureDocker && (
+									<FormSwitchField
+										name="ignoreTlsErrors"
+										label={t("pages.createMonitor.form.ignoreTls.option.tls.label")}
+									/>
+								)}
 								{generalSettingsConfig.showDnsServer && (
 									<FormTextField
 										name="dnsServer"
@@ -683,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
@@ -755,7 +889,6 @@ const CreateMonitorPage = () => {
 						}
 					/>
 				)}
-
 				{showStep(1) && (
 					<ConfigBox
 						title={t("pages.createMonitor.form.incidents.title")}
@@ -782,7 +915,6 @@ const CreateMonitorPage = () => {
 						}
 					/>
 				)}
-
 				{showStep(1) && (
 					<ConfigBox
 						title={t("pages.createMonitor.form.notifications.title")}
@@ -795,7 +927,6 @@ const CreateMonitorPage = () => {
 						}
 					/>
 				)}
-
 				{showStep(1) && (
 					<ConfigBox
 						title={t("pages.createMonitor.form.tags.title")}
@@ -822,7 +953,40 @@ const CreateMonitorPage = () => {
 						}
 					/>
 				)}
-
+				{showStep(1) && watchedType === "docker" && !isCaptureDocker && (
+					<ConfigBox
+						title={t("pages.createMonitor.form.dockerLogs.title")}
+						subtitle={t("pages.createMonitor.form.dockerLogs.description")}
+						rightContent={
+							<FormSwitchField
+								name="dockerLogsEnabled"
+								label={t("pages.createMonitor.form.dockerLogs.option.enabled.label")}
+							/>
+						}
+					/>
+				)}
+				{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" ||
@@ -838,7 +1002,6 @@ const CreateMonitorPage = () => {
 							}
 						/>
 					)}
-
 				{showStep(2) && watchedType === "http" && (
 					<ConfigBox
 						title={t("pages.createMonitor.form.advanced.title")}
@@ -938,7 +1101,6 @@ const CreateMonitorPage = () => {
 						}
 					/>
 				)}
-
 				{showStep(2) && supportsGeoCheck(watchedType) && (
 					<ConfigBox
 						title={t("pages.createMonitor.form.geoChecks.title")}
@@ -971,7 +1133,6 @@ const CreateMonitorPage = () => {
 						}
 					/>
 				)}
-
 				<Stack
 					direction="row"
 					justifyContent={!isEditMode ? "space-between" : "flex-end"}

client/src/Pages/Dashboard/components/DashboardCard.tsx

@@ -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>
+	);
+};

client/src/Pages/Dashboard/components/EditCardsModal.tsx

@@ -0,0 +1,89 @@
+import { useMemo, useState } from "react";
+import Stack from "@mui/material/Stack";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import Typography from "@mui/material/Typography";
+import { useTheme } from "@mui/material/styles";
+import { useTranslation } from "react-i18next";
+import { Checkbox, Dialog } from "@/Components/inputs";
+import { LAYOUT } from "@/Utils/Theme/constants";
+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 theme = useTheme();
+	const { t } = useTranslation();
+	const [cardsSelection, setCardsSelection] = useState<Set<DashboardCardKey>>(
+		new Set(visibleCards)
+	);
+
+	const handleClose = () => {
+		setCardsSelection(new Set(visibleCards));
+		onClose();
+	};
+
+	const handleToggle = (key: DashboardCardKey) => {
+		setCardsSelection((prev) => {
+			const next = new Set(prev);
+			if (next.has(key)) {
+				next.delete(key);
+			} else {
+				next.add(key);
+			}
+			return next;
+		});
+	};
+
+	const sortedCardKeys = useMemo(
+		() =>
+			[...dashboardCardKeys].sort((a, b) =>
+				t(`pages.dashboard.cards.${a}`).localeCompare(t(`pages.dashboard.cards.${b}`))
+			),
+		[t]
+	);
+
+	return (
+		<Dialog
+			open={open}
+			title={t("pages.dashboard.editCardsModal.title")}
+			content={t("pages.dashboard.editCardsModal.description")}
+			onCancel={handleClose}
+			onConfirm={() => onSave(cardsSelection)}
+			confirmText={t("pages.dashboard.editCardsModal.done")}
+			maxWidth="xs"
+			fullWidth
+		>
+			<Stack gap={theme.spacing(LAYOUT.XXS)}>
+				<Typography
+					variant="eyebrow"
+					color={theme.palette.text.disabled}
+				>
+					{t("pages.dashboard.editCardsModal.groups.uptime")}
+				</Typography>
+				{sortedCardKeys.map((key: DashboardCardKey) => (
+					<FormControlLabel
+						key={key}
+						label={t(`pages.dashboard.cards.${key}`)}
+						control={
+							<Checkbox
+								checked={cardsSelection.has(key)}
+								disabled={cardsSelection.has(key) && cardsSelection.size === 1}
+								onChange={() => handleToggle(key)}
+							/>
+						}
+					/>
+				))}
+			</Stack>
+		</Dialog>
+	);
+};

client/src/Pages/Dashboard/components/ProgressBar.tsx

@@ -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>
+	);
+};

client/src/Pages/Dashboard/components/cards/BarRow.tsx

@@ -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>
+	);
+};

client/src/Pages/Dashboard/components/cards/CurrentlyDownCard.tsx

@@ -0,0 +1,58 @@
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import { useTheme } from "@mui/material/styles";
+import { useTranslation } from "react-i18next";
+import { DashboardCard } from "@/Pages/Dashboard/components/DashboardCard";
+import { Dot } from "@/Components/design-elements";
+import { typographyLevels } from "@/Utils/Theme/Palette";
+import { LAYOUT } from "@/Utils/Theme/constants";
+import type { Monitor } from "@/Types/Monitor";
+
+interface CurrentlyDownCardProps {
+	monitors: Monitor[];
+}
+
+export const CurrentlyDownCard = ({ monitors }: CurrentlyDownCardProps) => {
+	const theme = useTheme();
+	const { t } = useTranslation();
+
+	const downMonitors = monitors.filter((monitor) => monitor.status === "down");
+
+	return (
+		<DashboardCard
+			title={t("pages.dashboard.cards.currentlyDown")}
+			topRight={downMonitors.length > 0 ? downMonitors.length : undefined}
+		>
+			{downMonitors.length === 0 ? (
+				<Typography
+					fontSize={typographyLevels.m}
+					color={theme.palette.text.disabled}
+				>
+					{t("pages.dashboard.currentlyDown.empty")}
+				</Typography>
+			) : (
+				<Stack gap={theme.spacing(LAYOUT.SM)}>
+					{downMonitors.map((monitor) => (
+						<Stack
+							key={monitor.id}
+							direction="row"
+							alignItems="center"
+							gap={theme.spacing(LAYOUT.XS)}
+						>
+							<Dot color={theme.palette.error.main} />
+							<Typography
+								fontSize={typographyLevels.m}
+								color={theme.palette.text.primary}
+								overflow="hidden"
+								textOverflow="ellipsis"
+								whiteSpace="nowrap"
+							>
+								{monitor.name}
+							</Typography>
+						</Stack>
+					))}
+				</Stack>
+			)}
+		</DashboardCard>
+	);
+};

client/src/Pages/Dashboard/components/cards/MonitorStatusCard.tsx

@@ -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>
+	);
+};

client/src/Pages/Dashboard/components/cards/MonitorsByTypeCard.tsx

@@ -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>
+	);
+};

client/src/Pages/Dashboard/components/cards/UptimeCard.tsx

@@ -0,0 +1,90 @@
+import IconButton from "@mui/material/IconButton";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import { useTheme } from "@mui/material/styles";
+import { useTranslation } from "react-i18next";
+import { useDispatch, useSelector } from "react-redux";
+import { ArrowDown, ArrowUp } from "lucide-react";
+import { Icon } from "@/Components/design-elements";
+import { DashboardCard } from "@/Pages/Dashboard/components/DashboardCard";
+import { BarRow } from "@/Pages/Dashboard/components/cards/BarRow";
+import { getUptimePercentageColor } from "@/Utils/MonitorUtils";
+import { formatPercentage } from "@/Utils/FormatUtils";
+import { typographyLevels } from "@/Utils/Theme/Palette";
+import { LAYOUT } from "@/Utils/Theme/constants";
+import { setDashboardUptimeSortOrder } from "@/Features/UI/uiSlice";
+import type { Monitor } from "@/Types/Monitor";
+import type { AppDispatch, RootState } from "@/store";
+
+const TOP_N = 5;
+
+interface UptimeCardProps {
+	monitors: Monitor[];
+}
+
+export const UptimeCard = ({ monitors }: UptimeCardProps) => {
+	const theme = useTheme();
+	const { t } = useTranslation();
+	const dispatch = useDispatch<AppDispatch>();
+	const sortOrder = useSelector((state: RootState) => state.ui.dashboardUptimeSortOrder);
+
+	const direction = sortOrder === "ascending" ? 1 : -1;
+	const ranked = monitors
+		.filter((monitor) => monitor.status !== "paused")
+		.filter(
+			(monitor): monitor is Monitor & { uptimePercentage: number } =>
+				typeof monitor.uptimePercentage === "number"
+		)
+		.sort((a, b) => direction * (a.uptimePercentage - b.uptimePercentage))
+		.slice(0, TOP_N);
+
+	return (
+		<DashboardCard
+			title={t("pages.dashboard.cards.uptime")}
+			topRight={
+				<IconButton
+					size="small"
+					aria-label={t("pages.dashboard.uptimeCard.toggleSortOrder")}
+					onClick={() =>
+						dispatch(
+							setDashboardUptimeSortOrder(
+								sortOrder === "ascending" ? "descending" : "ascending"
+							)
+						)
+					}
+				>
+					<Icon
+						icon={sortOrder === "ascending" ? ArrowUp : ArrowDown}
+						size={16}
+						color={theme.palette.text.secondary}
+					/>
+				</IconButton>
+			}
+		>
+			{ranked.length === 0 ? (
+				<Typography
+					fontSize={typographyLevels.m}
+					color={theme.palette.text.disabled}
+				>
+					{t("pages.dashboard.noData")}
+				</Typography>
+			) : (
+				<Stack gap={theme.spacing(LAYOUT.SM)}>
+					{ranked.map((monitor) => {
+						const paletteKey = getUptimePercentageColor(monitor.uptimePercentage);
+						const color = theme.palette[paletteKey].main;
+						return (
+							<BarRow
+								key={monitor.id}
+								label={monitor.name}
+								value={formatPercentage(monitor.uptimePercentage)}
+								fillRatio={monitor.uptimePercentage}
+								valueColor={color}
+							/>
+						);
+					})}
+				</Stack>
+			)}
+		</DashboardCard>
+	);
+};

client/src/Pages/Dashboard/index.tsx

@@ -0,0 +1,100 @@
+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 { useSelector, useDispatch } from "react-redux";
+
+import { BasePage } from "@/Components/design-elements/BasePage";
+import { Button } from "@/Components/inputs";
+import { LAYOUT } from "@/Utils/Theme/constants";
+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 { CurrentlyDownCard } from "@/Pages/Dashboard/components/cards/CurrentlyDownCard";
+import { UptimeCard } from "@/Pages/Dashboard/components/cards/UptimeCard";
+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 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: "dashboard",
+		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} />,
+		currentlyDown: <CurrentlyDownCard monitors={monitors ?? []} />,
+		uptime: <UptimeCard monitors={monitors ?? []} />,
+		monitorsByType: <MonitorsByTypeCard monitorsByType={monitorsByType} />,
+	};
+
+	return (
+		<BasePage headerKey="dashboard">
+			<Stack gap={theme.spacing(LAYOUT.SM)}>
+				<Stack
+					direction="row"
+					justifyContent="flex-end"
+				>
+					<Button
+						variant="outlined"
+						size="small"
+						onClick={() => setEditOpen(true)}
+					>
+						{t("pages.dashboard.editCards")}
+					</Button>
+				</Stack>
+
+				<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>
+	);
+};
+
+export default Dashboard;

client/src/Pages/Docker/ContainerDetails/Components/HeaderLogs.tsx

@@ -0,0 +1,69 @@
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import { Dot } from "@/Components/design-elements";
+
+// Hooks
+import { useEffect, useState } from "react";
+import { useTheme } from "@mui/material";
+import { useTranslation } from "react-i18next";
+
+// Utils
+import { LAYOUT, SPACING } from "@/Utils/Theme/constants";
+import { MS_PER_SECOND, MS_PER_MINUTE } from "@/Utils/TimeUtils";
+
+interface HeaderLogsProps {
+	lines: number;
+	loading: boolean;
+	lastUpdatedAt: number | null;
+}
+
+export const HeaderLogs = ({ lines, loading, lastUpdatedAt }: HeaderLogsProps) => {
+	const theme = useTheme();
+	const { t } = useTranslation();
+	const [now, setNow] = useState(() => Date.now());
+
+	useEffect(() => {
+		if (lastUpdatedAt === null) return;
+		setNow(Date.now());
+		const id = window.setInterval(() => setNow(Date.now()), MS_PER_SECOND);
+		return () => window.clearInterval(id);
+	}, [lastUpdatedAt]);
+
+	const renderStatus = () => {
+		if (loading) return t("pages.docker.container.logs.loading");
+		if (lastUpdatedAt === null) return null;
+		const ageMs = Math.max(0, now - lastUpdatedAt);
+		return ageMs < MS_PER_MINUTE
+			? t("pages.docker.container.logs.updatedSecondsAgo", {
+					count: Math.floor(ageMs / MS_PER_SECOND),
+				})
+			: t("pages.docker.container.logs.updatedMinutesAgo", {
+					count: Math.floor(ageMs / MS_PER_MINUTE),
+				});
+	};
+
+	return (
+		<Stack
+			direction="row"
+			alignItems="center"
+			gap={LAYOUT.MD}
+		>
+			<Typography>
+				{t("pages.docker.container.logs.recentLines", { count: lines })}
+			</Typography>
+			<Stack
+				direction="row"
+				alignItems="center"
+				gap={SPACING.SM}
+			>
+				{lastUpdatedAt !== null && !loading && (
+					<Dot
+						color={theme.palette.success.main}
+						size="md"
+					/>
+				)}
+				<Typography color={theme.palette.text.secondary}>{renderStatus()}</Typography>
+			</Stack>
+		</Stack>
+	);
+};

client/src/Pages/Docker/ContainerDetails/Components/RowLog.tsx

@@ -0,0 +1,78 @@
+import Grid from "@mui/material/Grid";
+import Typography from "@mui/material/Typography";
+import Box from "@mui/material/Box";
+import Stack from "@mui/material/Stack";
+import Divider from "@mui/material/Divider";
+import { Fragment } from "react";
+
+// Hooks
+import { useTheme } from "@mui/material";
+import { useSelector } from "react-redux";
+import { useTranslation } from "react-i18next";
+
+// Utils
+import type { DockerLogRow } from "@/Utils/MonitorUtils";
+import { LAYOUT, SPACING } from "@/Utils/Theme/constants";
+import { formatDateWithTz } from "@/Utils/TimeUtils";
+import type { RootState } from "@/store";
+
+export const RowLog = ({ row }: { row: DockerLogRow }) => {
+	const theme = useTheme();
+	const uiTimezone = useSelector((state: RootState) => state.ui.timezone);
+	const { t } = useTranslation();
+
+	return (
+		<Fragment>
+			<Grid
+				container
+				spacing={{ xs: 0, md: LAYOUT.MD }}
+				py={{ xs: LAYOUT.LG, md: 0 }}
+			>
+				<Grid size={{ xs: 12, md: "auto" }}>
+					<Typography
+						fontFamily="monospace"
+						color={theme.palette.text.secondary}
+					>
+						{formatDateWithTz(row.ts, "MMM D HH:mm:ss", uiTimezone)}
+					</Typography>
+				</Grid>
+				<Grid size={{ xs: 12, md: "grow" }}>
+					<Typography
+						fontFamily={"monospace"}
+						whiteSpace={{ xs: "pre-wrap", md: "nowrap" }}
+						sx={{
+							overflowWrap: { xs: "anywhere", md: "normal" },
+						}}
+					>
+						<Box
+							component={"span"}
+							color={
+								row.stream === "stderr"
+									? theme.palette.error.main
+									: theme.palette.success.main
+							}
+						>
+							{row.stream}
+						</Box>
+						: {row.text}
+					</Typography>
+				</Grid>
+			</Grid>
+			{row.gapBefore ? (
+				<Stack
+					width="100%"
+					direction="row"
+					alignItems={"center"}
+					py={SPACING.MD}
+				>
+					<Typography pr={SPACING.MD}>
+						{t("pages.docker.container.logs.skipped")}
+					</Typography>
+					<Divider sx={{ flex: 1 }} />
+				</Stack>
+			) : (
+				<Divider sx={{ display: { xs: "block", md: "none" } }} />
+			)}
+		</Fragment>
+	);
+};

client/src/Pages/Docker/ContainerDetails/Components/StatBoxes.tsx

@@ -10,6 +10,8 @@ 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 = ({
 	container,
@@ -22,8 +24,10 @@ export const DockerContainerStatusBoxes = ({
 	if (!container) return null;
 
 	const { state, restartCount, health } = container;
-	const startedAt = container.startedAt ?? "0";
+	const runningFor = container.startedAt
-	const runningFor = Date.now() - new Date(startedAt).getTime();
+		? Date.now() - new Date(container.startedAt).getTime()
+		: undefined;
+	const palette = getDockerPalette(state);
 	return (
 		<Stack
 			direction="row"
@@ -33,14 +37,15 @@ export const DockerContainerStatusBoxes = ({
 			<StatBox
 				title={t("common.labels.state")}
 				subtitle={state}
+				palette={palette}
 			/>
 			<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")}

client/src/Pages/Docker/ContainerDetails/TabLogs.tsx

@@ -1,3 +1,252 @@
-export const TabLogs = () => {
+// Components
-	return "This is the logs tab";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import { BaseBox, EmptyState } from "@/Components/design-elements";
+import { Button } from "@/Components/inputs";
+import { HeaderLogs } from "@/Pages/Docker/ContainerDetails/Components/HeaderLogs";
+import { RowLog } from "@/Pages/Docker/ContainerDetails/Components/RowLog";
+
+// Types
+import type { DockerContainerLogsResponse } from "@/Types/Monitor";
+import type { DockerLog } from "@/Types/Check";
+import type { ApiResponse } from "@/Hooks/UseApi";
+
+// Hooks
+import {
+	useState,
+	useEffect,
+	useLayoutEffect,
+	useMemo,
+	useRef,
+	useCallback,
+} from "react";
+import { useTheme } from "@mui/material";
+import { useTranslation } from "react-i18next";
+import { useToast } from "@/Hooks/UseToast";
+import { useIsAdmin } from "@/Hooks/useIsAdmin";
+
+// Utils
+import { get } from "@/Utils/ApiClient";
+import { LAYOUT } from "@/Utils/Theme/constants";
+import { flattenDockerLogs } from "@/Utils/MonitorUtils";
+
+interface TabLogsProps {
+	monitorId?: string;
+	containerName?: string;
+	enabled: boolean;
+}
+
+const SCROLL_PIN_THRESHOLD_PX = 8;
+const TAIL_POLL_MS = 10_000;
+
+const isScrolledToBottom = (el: HTMLElement) =>
+	el.scrollHeight - el.scrollTop - el.clientHeight <= SCROLL_PIN_THRESHOLD_PX;
+
+const fetchLogs = async (url: string, params: { before?: string; after?: string }) => {
+	const res = await get<ApiResponse<DockerContainerLogsResponse>>(url, { params });
+	return res.data.data;
+};
+
+export const TabLogs = ({ monitorId, containerName, enabled }: TabLogsProps) => {
+	const theme = useTheme();
+	const { t } = useTranslation();
+	const { toastError } = useToast();
+	const isAdmin = useIsAdmin();
+
+	// logs is newest-first, matching the API and what flattenDockerLogs expects.
+	const [logs, setLogs] = useState<DockerLog[]>([]);
+	const [olderExhausted, setOlderExhausted] = useState(false);
+	const [loadingInitial, setLoadingInitial] = useState(false);
+	const [loadingOlder, setLoadingOlder] = useState(false);
+	const [lastUpdatedAt, setLastUpdatedAt] = useState<number | null>(null);
+
+	const logsUrl =
+		isAdmin && enabled && monitorId && containerName
+			? `/monitors/docker/details/${encodeURIComponent(monitorId)}/containers/${encodeURIComponent(containerName)}/logs`
+			: null;
+
+	const newestCursor = logs[0]?.checkedAt;
+	const oldestCursor = logs[logs.length - 1]?.checkedAt;
+
+	// Initial page. Resets everything when the container changes.
+	useEffect(() => {
+		setLogs([]);
+		setOlderExhausted(false);
+		if (!logsUrl) return;
+		let cancelled = false;
+		setLoadingInitial(true);
+		fetchLogs(logsUrl, {})
+			.then((page) => {
+				if (cancelled) return;
+				setLogs(page.logs);
+				setOlderExhausted(page.nextCursor === null);
+				setLastUpdatedAt(Date.now());
+			})
+			.catch(() => {
+				if (cancelled) return;
+				toastError(t("pages.docker.container.logs.loadError"));
+			})
+			.finally(() => {
+				if (!cancelled) setLoadingInitial(false);
+			});
+		return () => {
+			cancelled = true;
+		};
+	}, [logsUrl, t, toastError]);
+
+	const newestCursorRef = useRef(newestCursor);
+	newestCursorRef.current = newestCursor;
+
+	useEffect(() => {
+		if (!logsUrl) return;
+		let inFlight = false;
+		const tick = async () => {
+			if (inFlight || document.hidden) return;
+			inFlight = true;
+			try {
+				const cursor = newestCursorRef.current;
+				const page = await fetchLogs(logsUrl, cursor ? { after: cursor } : {});
+				if (page.logs.length > 0) setLogs((prev) => [...page.logs, ...prev]);
+				setLastUpdatedAt(Date.now());
+			} catch (err: unknown) {
+				console.error(err);
+			} finally {
+				inFlight = false;
+			}
+		};
+		const id = window.setInterval(tick, TAIL_POLL_MS);
+		document.addEventListener("visibilitychange", tick);
+		return () => {
+			window.clearInterval(id);
+			document.removeEventListener("visibilitychange", tick);
+		};
+	}, [logsUrl]);
+
+	const rows = useMemo(() => flattenDockerLogs(logs), [logs]);
+
+	const logBoxRef = useRef<HTMLDivElement>(null);
+	const pinnedToBottom = useRef(true);
+	const prependAnchor = useRef<{ scrollHeight: number; scrollTop: number } | null>(null);
+
+	// Always pin to bottom when container/monitor changes
+	useLayoutEffect(() => {
+		pinnedToBottom.current = true;
+	}, [monitorId, containerName]);
+
+	// Rows changed: restore position after a prepend, otherwise honour the pin
+	useLayoutEffect(() => {
+		const el = logBoxRef.current;
+		if (!el) return;
+		const anchor = prependAnchor.current;
+		if (anchor) {
+			prependAnchor.current = null;
+			el.scrollTop = el.scrollHeight - anchor.scrollHeight + anchor.scrollTop;
+			return;
+		}
+		if (pinnedToBottom.current) el.scrollTop = el.scrollHeight;
+	}, [rows]);
+
+	const handleScroll = useCallback((event: React.UIEvent<HTMLDivElement>) => {
+		pinnedToBottom.current = isScrolledToBottom(event.currentTarget);
+	}, []);
+
+	const loadOlder = useCallback(async () => {
+		if (!logsUrl || !oldestCursor || loadingOlder) return;
+		setLoadingOlder(true);
+		try {
+			const page = await fetchLogs(logsUrl, { before: oldestCursor });
+			const el = logBoxRef.current;
+			if (el)
+				prependAnchor.current = {
+					scrollHeight: el.scrollHeight,
+					scrollTop: el.scrollTop,
+				};
+			setLogs((prev) => [...prev, ...page.logs]);
+			setOlderExhausted(page.nextCursor === null);
+		} catch {
+			toastError(t("pages.docker.container.logs.loadOlderError"));
+		} finally {
+			setLoadingOlder(false);
+		}
+	}, [logsUrl, oldestCursor, loadingOlder, t, toastError]);
+
+	if (!isAdmin) {
+		return (
+			<EmptyState
+				title={t("pages.docker.container.logs.forbidden.title")}
+				description={t("pages.docker.container.logs.forbidden.description")}
+			/>
+		);
+	}
+
+	if (!enabled) {
+		return (
+			<EmptyState
+				title={t("pages.docker.container.logs.disabled.title")}
+				description={t("pages.docker.container.logs.disabled.description")}
+				actionText={t("pages.docker.container.logs.disabled.action")}
+				actionTo={`/docker/configure/${monitorId}`}
+			/>
+		);
+	}
+
+	if (lastUpdatedAt !== null && rows.length === 0) {
+		return (
+			<EmptyState
+				title={t("pages.docker.container.logs.empty.title")}
+				description={t("pages.docker.container.logs.empty.description")}
+			/>
+		);
+	}
+
+	return (
+		<Stack gap={LAYOUT.MD}>
+			<HeaderLogs
+				lines={rows.length}
+				loading={loadingInitial}
+				lastUpdatedAt={lastUpdatedAt}
+			/>
+			<BaseBox
+				ref={logBoxRef}
+				onScroll={handleScroll}
+				minHeight={240}
+				maxHeight="50vh"
+				overflow="auto"
+				padding={LAYOUT.MD}
+				sx={{ overflowAnchor: "none" }}
+			>
+				{rows.length > 0 && (
+					<Stack
+						direction="row"
+						justifyContent="center"
+						pb={LAYOUT.MD}
+					>
+						{olderExhausted ? (
+							<Typography color={theme.palette.text.secondary}>
+								{t("pages.docker.container.logs.noOlder")}
+							</Typography>
+						) : (
+							<Button
+								variant="contained"
+								disabled={loadingOlder}
+								onClick={loadOlder}
+							>
+								{loadingOlder
+									? t("pages.docker.container.logs.loadingOlder")
+									: t("pages.docker.container.logs.loadOlder")}
+							</Button>
+						)}
+					</Stack>
+				)}
+				{rows.map((row) => {
+					return (
+						<RowLog
+							key={row.key}
+							row={row}
+						/>
+					);
+				})}
+			</BaseBox>
+		</Stack>
+	);
 };

client/src/Pages/Docker/ContainerDetails/TabOverview.tsx

@@ -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
+								<Typography key={`${port.hostIp}/${port.publicPort}/${containerPort}`}>
-									key={`${port.publicPort}/${port.privatePort}`}
+									{label}
-								>{`${port.hostIp}:${port.publicPort} -> ${port.privatePort}/${port.protocol}`}</Typography>
+								</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}`}>

client/src/Pages/Docker/ContainerDetails/index.tsx

@@ -69,8 +69,19 @@ const DockerDetailsPage = ({ open = "overview" }: 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 && (
-			{activeTab === 1 && <TabLogs />}
+				<TabOverview
+					stats={stats}
+					range={dateRange}
+				/>
+			)}
+			{activeTab === 1 && (
+				<TabLogs
+					monitorId={monitorId}
+					containerName={containerName}
+					enabled={monitor.dockerLogsEnabled ?? false}
+				/>
+			)}
 		</BasePage>
 	);
 };

client/src/Pages/Docker/HostDetails/Components/DockerContainersTable.tsx

@@ -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>;
 				},
 			},
 		];

client/src/Pages/Docker/Monitors/Components/DockerMonitorsTable.tsx

@@ -8,6 +8,7 @@ import {
 	ColoredLabel,
 } from "@/Components/design-elements";
 import { SPACING } from "@/Utils/Theme/constants";
+import { getNextMonitorSort } from "@/Utils/MonitorUtils";
 import type { Header } from "@/Components/design-elements/Table";
 import { ActionsMenu, type ActionMenuItem } from "@/Components/actions-menu";
 import { ArrowUp, ArrowDown } from "lucide-react";
@@ -20,6 +21,7 @@ import { usePost } from "@/Hooks/UseApi";
 
 import type { Monitor } from "@/Types/Monitor";
 import type { Tag } from "@/Types/Tag";
+import type { SortOrder } from "@/Types/Query";
 import type { DockerContainerSummary } from "@/Types/Check";
 import { Checkbox } from "@/Components/inputs";
 
@@ -34,9 +36,8 @@ interface DockerMonitorsTableProps {
 	refetch: () => void;
 	setSelectedMonitor: (monitor: Monitor | null) => void;
 	sortField: string;
-	setSortField: (field: string) => void;
+	sortOrder: SortOrder;
-	sortOrder: "asc" | "desc";
+	setSort: (field: string, order: SortOrder) => void;
-	setSortOrder: (order: "asc" | "desc") => void;
 	count: number;
 	page: number;
 	setPage: (page: number) => void;
@@ -52,9 +53,8 @@ export const DockerMonitorsTable = ({
 	refetch,
 	setSelectedMonitor,
 	sortField,
-	setSortField,
 	sortOrder,
-	setSortOrder,
+	setSort,
 	count,
 	page,
 	setPage,
@@ -105,14 +105,8 @@ export const DockerMonitorsTable = ({
 	const handleSort = (e: React.MouseEvent, field: string) => {
 		e.preventDefault();
 		e.stopPropagation();
-		if (sortField === field) {
+		const nextSort = getNextMonitorSort(field, sortField, sortOrder);
-			const newOrder = sortOrder === "asc" ? "desc" : "asc";
+		setSort(nextSort.field, nextSort.order);
-			setSortOrder(newOrder);
-		} else {
-			setSortField(field);
-			setSortOrder("asc");
-		}
-		refetch();
 	};
 
 	const getActions = (monitor: Monitor): ActionMenuItem[] => {
@@ -327,11 +321,7 @@ export const DockerMonitorsTable = ({
 				onRowClick={(row) => {
 					navigate(`/docker/host/${row.id}`);
 				}}
-				getRowSx={(row) => ({
+				isRowSelected={(row) => isRowSelected(row.id)}
-					backgroundColor: isRowSelected(row.id)
-						? theme.palette.action.selected
-						: "inherit",
-				})}
 			/>
 			<Pagination
 				component="div"

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

@@ -19,6 +19,7 @@ const DockerMonitorsPage = () => {
 			controller={c}
 			bulkActions
 			showTypeFilter={false}
+			summaryProps={{ showBreached: true }}
 		>
 			<DockerMonitorsTable
 				monitors={c.monitors || []}
@@ -30,9 +31,8 @@ const DockerMonitorsPage = () => {
 				setPage={c.setPage}
 				rowsPerPage={c.rowsPerPage}
 				sortField={c.sortField}
-				setSortField={c.setSortField}
 				sortOrder={c.sortOrder}
-				setSortOrder={c.setSortOrder}
+				setSort={c.setSort}
 				setRowsPerPage={c.handleSetRowsPerPage}
 				selectedRows={c.selectedRows}
 				onSelectionChange={c.setSelectedRows}

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

@@ -30,6 +30,7 @@ const SummaryItem = ({ icon, label, value }: SummaryItemProps) => {
 				direction="row"
 				alignItems="center"
 				gap={theme.spacing(2)}
+				sx={{ "& svg": { color: theme.palette.text.secondary } }}
 			>
 				{icon}
 				<Typography variant="body1">{label}</Typography>
@@ -143,7 +144,10 @@ const SummaryIncidentItem = ({ incident }: { incident: IncidentSummaryItem }) =>
 					gap: theme.spacing(2),
 				}}
 			>
-				<Icon icon={Globe} />
+				<Icon
+					icon={Globe}
+					color={theme.palette.text.secondary}
+				/>
 				<Typography
 					variant="body1"
 					fontWeight={500}

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

@@ -9,6 +9,7 @@ import {
 	ColoredLabel,
 } from "@/Components/design-elements";
 import { SPACING } from "@/Utils/Theme/constants";
+import { getNextMonitorSort } from "@/Utils/MonitorUtils";
 import type { Header } from "@/Components/design-elements/Table";
 import { ActionsMenu, type ActionMenuItem } from "@/Components/actions-menu";
 import { ArrowUp, ArrowDown } from "lucide-react";
@@ -21,6 +22,7 @@ import { usePost } from "@/Hooks/UseApi";
 
 import type { Monitor } from "@/Types/Monitor";
 import type { Tag } from "@/Types/Tag";
+import type { SortOrder } from "@/Types/Query";
 import { Checkbox } from "@/Components/inputs";
 
 interface InfraMonitorsTableProps {
@@ -29,9 +31,8 @@ interface InfraMonitorsTableProps {
 	refetch: () => void;
 	setSelectedMonitor: (monitor: Monitor | null) => void;
 	sortField: string;
-	setSortField: (field: string) => void;
+	sortOrder: SortOrder;
-	sortOrder: "asc" | "desc";
+	setSort: (field: string, order: SortOrder) => void;
-	setSortOrder: (order: "asc" | "desc") => void;
 	count: number;
 	page: number;
 	setPage: (page: number) => void;
@@ -47,9 +48,8 @@ export const InfraMonitorsTable = ({
 	refetch,
 	setSelectedMonitor,
 	sortField,
-	setSortField,
 	sortOrder,
-	setSortOrder,
+	setSort,
 	count,
 	page,
 	setPage,
@@ -100,14 +100,8 @@ export const InfraMonitorsTable = ({
 	const handleSort = (e: React.MouseEvent, field: string) => {
 		e.preventDefault();
 		e.stopPropagation();
-		if (sortField === field) {
+		const nextSort = getNextMonitorSort(field, sortField, sortOrder);
-			const newOrder = sortOrder === "asc" ? "desc" : "asc";
+		setSort(nextSort.field, nextSort.order);
-			setSortOrder(newOrder);
-		} else {
-			setSortField(field);
-			setSortOrder("asc");
-		}
-		refetch();
 	};
 
 	const getActions = (monitor: Monitor): ActionMenuItem[] => {
@@ -331,11 +325,7 @@ export const InfraMonitorsTable = ({
 				onRowClick={(row) => {
 					navigate(`/infrastructure/${row.id}`);
 				}}
-				getRowSx={(row) => ({
+				isRowSelected={(row) => isRowSelected(row.id)}
-					backgroundColor: isRowSelected(row.id)
-						? theme.palette.action.selected
-						: "inherit",
-				})}
 			/>
 			<Pagination
 				component="div"

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

@@ -31,9 +31,8 @@ const InfrastructureMonitors = () => {
 				setPage={c.setPage}
 				rowsPerPage={c.rowsPerPage}
 				sortField={c.sortField}
-				setSortField={c.setSortField}
 				sortOrder={c.sortOrder}
-				setSortOrder={c.setSortOrder}
+				setSort={c.setSort}
 				setRowsPerPage={c.handleSetRowsPerPage}
 				selectedRows={c.selectedRows}
 				onSelectionChange={c.setSelectedRows}

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

@@ -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();

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

@@ -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();

client/src/Pages/Logs/index.tsx

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

client/src/Pages/NotFound/index.tsx

@@ -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"
+					component={NotFoundSvg}
-					src={NotFoundSvg}
+					role="img"
-					alt="404"
+					aria-label="404"
-					maxHeight={"25rem"}
+					width="100%"
+					maxHeight="25rem"
 				/>
 				<Typography
 					component="h1"

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

@@ -126,6 +126,7 @@ const NotificationsCreatePage = () => {
 				{watchedType !== "matrix" &&
 					watchedType !== "telegram" &&
 					watchedType !== "pushover" &&
+					watchedType !== "signalgrid" &&
 					watchedType !== "twilio" &&
 					watchedType !== "ntfy" && (
 						<ConfigBox
@@ -201,6 +202,31 @@ const NotificationsCreatePage = () => {
 						}
 					/>
 				)}
+				{watchedType === "signalgrid" && (
+					<ConfigBox
+						title={t("pages.notifications.form.signalgrid.title")}
+						subtitle={t("pages.notifications.form.signalgrid.description")}
+						rightContent={
+							<Stack spacing={theme.spacing(8)}>
+								<FormTextField
+									name="accessToken"
+									fieldLabel={t("pages.notifications.form.signalgrid.optionClientKey")}
+									placeholder={t(
+										"pages.notifications.form.signalgrid.placeholderClientKey"
+									)}
+								/>
+
+								<FormTextField
+									name="address"
+									fieldLabel={t("pages.notifications.form.signalgrid.optionChannel")}
+									placeholder={t(
+										"pages.notifications.form.signalgrid.placeholderChannel"
+									)}
+								/>
+							</Stack>
+						}
+					/>
+				)}
 				{watchedType === "twilio" && (
 					<ConfigBox
 						title={t("pages.notifications.form.twilio.title")}

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

@@ -9,6 +9,7 @@ import {
 	ColoredLabel,
 } from "@/Components/design-elements";
 import { LAYOUT, SPACING } from "@/Utils/Theme/constants";
+import { getNextMonitorSort } from "@/Utils/MonitorUtils";
 import { HistogramPageSpeed } from "@/Components/monitors";
 import { ArrowDown, ArrowUp } from "lucide-react";
 import type { Header } from "@/Components/design-elements/Table";
@@ -22,6 +23,7 @@ import { usePatch } from "@/Hooks/UseApi";
 
 import type { Monitor, MonitorWithChecks } from "@/Types/Monitor";
 import type { Tag } from "@/Types/Tag";
+import type { SortOrder } from "@/Types/Query";
 import type { ActionMenuItem } from "@/Components/actions-menu";
 
 export const PageSpeedMonitorsTable = ({
@@ -30,9 +32,8 @@ export const PageSpeedMonitorsTable = ({
 	refetch,
 	setSelectedMonitor,
 	sortField,
-	setSortField,
 	sortOrder,
-	setSortOrder,
+	setSort,
 	count,
 	page,
 	setPage,
@@ -44,9 +45,8 @@ export const PageSpeedMonitorsTable = ({
 	refetch: Function;
 	setSelectedMonitor: Function;
 	sortField: string;
-	setSortField: (field: string) => void;
+	sortOrder: SortOrder;
-	sortOrder: "asc" | "desc";
+	setSort: (field: string, order: SortOrder) => void;
-	setSortOrder: (order: "asc" | "desc") => void;
 	count: number;
 	page: number;
 	setPage: (page: number) => void;
@@ -81,14 +81,8 @@ export const PageSpeedMonitorsTable = ({
 	const handleSort = (e: any, field: string) => {
 		e.preventDefault();
 		e.stopPropagation();
-		if (sortField === field) {
+		const nextSort = getNextMonitorSort(field, sortField, sortOrder);
-			const newOrder = sortOrder === "asc" ? "desc" : "asc";
+		setSort(nextSort.field, nextSort.order);
-			setSortOrder(newOrder);
-		} else {
-			setSortField(field);
-			setSortOrder("asc");
-		}
-		refetch();
 	};
 
 	const getActions = (monitor: Monitor): ActionMenuItem[] => {

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

@@ -46,9 +46,8 @@ const PageSpeedMonitorsPage = () => {
 				setPage={c.setPage}
 				rowsPerPage={c.rowsPerPage}
 				sortField={c.sortField}
-				setSortField={c.setSortField}
 				sortOrder={c.sortOrder}
-				setSortOrder={c.setSortOrder}
+				setSort={c.setSort}
 				setRowsPerPage={c.handleSetRowsPerPage}
 			/>
 		</MonitorListPage>

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

@@ -25,7 +25,12 @@ export const HeaderConfigStatusControls = ({
 			<Button
 				variant="contained"
 				color="error"
-				startIcon={<Icon icon={Trash} />}
+				startIcon={
+					<Icon
+						icon={Trash}
+						size={16}
+					/>
+				}
 				onClick={onDelete}
 			>
 				{translate.t("common.buttons.delete")}

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

@@ -77,7 +77,12 @@ export const HeaderStatusPageControls = ({
 				<Button
 					variant="contained"
 					color="secondary"
-					startIcon={<Icon icon={Settings} />}
+					startIcon={
+						<Icon
+							icon={Settings}
+							size={16}
+						/>
+					}
 					onClick={() => navigate(`/status/configure/${statusPage.url}`)}
 				>
 					{t("common.buttons.configure")}

client/src/Pages/StatusPage/Status/themes/shared/BaseStatusPage.tsx

@@ -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
@@ -211,6 +214,7 @@ export const BaseStatusPage = ({
 							>
 								<Icon
 									icon={TriangleAlert}
+									size={20}
 									color={theme.palette.warning.main}
 								/>
 								<Typography>
@@ -305,6 +309,10 @@ export const BaseStatusPage = ({
 										cells={cells}
 										containerSx={styles.heatmap}
 										cellSx={styles.heatmapCell}
+										onCellClick={(date) => {
+											setSelectedMonitorId(monitor.id);
+											setSelectedDate(date);
+										}}
 									/>
 								) : (
 									<ThemedHistogram
@@ -312,6 +320,10 @@ export const BaseStatusPage = ({
 										containerSx={styles.histogram}
 										barSx={styles.bar}
 										statsSx={styles.chartStats}
+										onCellClick={(date) => {
+											setSelectedMonitorId(monitor.id);
+											setSelectedDate(date);
+										}}
 									/>
 								))}
 						</Box>
@@ -332,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>
 	);
 };

client/src/Pages/StatusPage/Status/themes/shared/ChartCells.tsx

@@ -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,
 		};
 	});
 };

client/src/Pages/StatusPage/Status/themes/shared/IncidentModal.tsx

@@ -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>
+	);
+};

client/src/Pages/StatusPage/Status/themes/shared/ThemedHeatmap.tsx

@@ -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={[
+			sx={mergeSx(containerSx, { gridTemplateColumns: `repeat(${cells.length}, 1fr)` })}
-				...(Array.isArray(containerSx) ? containerSx : [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>
 				);

client/src/Pages/StatusPage/Status/themes/shared/ThemedHistogram.tsx

@@ -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={[
+				sx={mergeSx(containerSx, { gridTemplateColumns: `repeat(${cells.length}, 1fr)` })}
-					...(Array.isArray(containerSx) ? containerSx : [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>
 					);

client/src/Pages/StatusPage/Status/themes/shared/fontStacks.ts

@@ -1,5 +1,5 @@
 export const SANS_STACK =
-	'-apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif';
+	'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
 
 export const BOLD_SANS_STACK = `ui-sans-serif, ${SANS_STACK}`;
 

client/src/Pages/StatusPage/Status/themes/shared/sx.ts

@@ -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>;
+};

client/src/Pages/Uptime/Monitors/Components/UptimeMonitorsTable.tsx

@@ -24,8 +24,9 @@ import type { ActionMenuItem } from "@/Components/actions-menu";
 import type { RootState } from "@/Types/state";
 import { Checkbox } from "@/Components/inputs";
 import type { Tag } from "@/Types/Tag";
+import type { SortOrder } from "@/Types/Query";
 import { SPACING } from "@/Utils/Theme/constants";
-import { getUptimePercentageColor } from "@/Utils/MonitorUtils";
+import { getNextMonitorSort, getUptimePercentageColor } from "@/Utils/MonitorUtils";
 import { formatPercentage } from "@/Utils/FormatUtils";
 
 interface MonitorTableProps {
@@ -34,9 +35,8 @@ interface MonitorTableProps {
 	refetch: () => void;
 	setSelectedMonitor: (monitor: Monitor | null) => void;
 	sortField: string;
-	setSortField: (field: string) => void;
+	sortOrder: SortOrder;
-	sortOrder: "asc" | "desc";
+	setSort: (field: string, order: SortOrder) => void;
-	setSortOrder: (order: "asc" | "desc") => void;
 	count: number;
 	page: number;
 	setPage: (page: number) => void;
@@ -52,9 +52,8 @@ export const MonitorTable = ({
 	refetch,
 	setSelectedMonitor,
 	sortField,
-	setSortField,
 	sortOrder,
-	setSortOrder,
+	setSort,
 	count,
 	page,
 	setPage,
@@ -91,14 +90,8 @@ export const MonitorTable = ({
 	const handleSort = (e: React.MouseEvent, field: string) => {
 		e.preventDefault();
 		e.stopPropagation();
-		if (sortField === field) {
+		const nextSort = getNextMonitorSort(field, sortField, sortOrder);
-			const newOrder = sortOrder === "asc" ? "desc" : "asc";
+		setSort(nextSort.field, nextSort.order);
-			setSortOrder(newOrder);
-		} else {
-			setSortField(field);
-			setSortOrder("asc");
-		}
-		refetch();
 	};
 
 	const isBrowserOpenable = (monitor: Monitor): boolean => {
@@ -350,11 +343,7 @@ export const MonitorTable = ({
 				onRowClick={(row) => {
 					navigate(`/uptime/${row.id}`);
 				}}
-				getRowSx={(row) => ({
+				isRowSelected={(row) => isRowSelected(row.id)}
-					backgroundColor: isRowSelected(row.id)
-						? theme.palette.action.selected
-						: "inherit",
-				})}
 			/>
 			<Pagination
 				component="div"

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

@@ -4,7 +4,7 @@ import { MonitorTable } from "@/Pages/Uptime/Monitors/Components/UptimeMonitorsT
 import { useMonitorListController } from "@/Hooks/useMonitorListController";
 
 const UptimeMonitorsPage = () => {
-	const c = useMonitorListController({
+	const monitorListController = useMonitorListController({
 		types: "selectable",
 		checksLimit: 25,
 		refreshInterval: 5000,
@@ -17,25 +17,24 @@ const UptimeMonitorsPage = () => {
 			headerKey="uptime"
 			page="uptime"
 			actionLink="/uptime/create"
-			controller={c}
+			controller={monitorListController}
 			bulkActions
 		>
 			<MonitorTable
-				monitors={c.monitors || []}
+				monitors={monitorListController.monitors || []}
-				tags={c.tags || []}
+				tags={monitorListController.tags || []}
-				refetch={c.refetch}
+				refetch={monitorListController.refetch}
-				setSelectedMonitor={c.setSelectedMonitor}
+				setSelectedMonitor={monitorListController.setSelectedMonitor}
-				count={c.count || 0}
+				count={monitorListController.count || 0}
-				page={c.page}
+				page={monitorListController.page}
-				setPage={c.setPage}
+				setPage={monitorListController.setPage}
-				rowsPerPage={c.rowsPerPage}
+				rowsPerPage={monitorListController.rowsPerPage}
-				sortField={c.sortField}
+				sortField={monitorListController.sortField}
-				setSortField={c.setSortField}
+				sortOrder={monitorListController.sortOrder}
-				sortOrder={c.sortOrder}
+				setSort={monitorListController.setSort}
-				setSortOrder={c.setSortOrder}
+				setRowsPerPage={monitorListController.handleSetRowsPerPage}
-				setRowsPerPage={c.handleSetRowsPerPage}
+				selectedRows={monitorListController.selectedRows}
-				selectedRows={c.selectedRows}
+				onSelectionChange={monitorListController.setSelectedRows}
-				onSelectionChange={c.setSelectedRows}
 			/>
 		</MonitorListPage>
 	);

client/src/Routes/index.tsx

@@ -8,6 +8,9 @@ import AuthRegister from "@/Pages/Auth/Register";
 import AuthForgotPassword from "@/Pages/Auth/Recovery";
 import AuthSetNewPassword from "@/Pages/Auth/SetNewPassword";
 
+// Dashboard
+import Dashboard from "@/Pages/Dashboard";
+
 // Uptime
 import Uptime from "@/Pages/Uptime/Monitors";
 import UptimeDetails from "@/Pages/Uptime/Details";
@@ -92,6 +95,10 @@ const Routes = () => {
 					path="/"
 					element={<Navigate to="/uptime" />}
 				/>
+				<Route
+					path="dashboard"
+					element={<Dashboard />}
+				/>
 				<Route
 					path="/uptime"
 					element={<Uptime />}

client/src/Types/Check.ts

@@ -161,6 +161,31 @@ export interface DockerContainerMount {
 	rw: boolean;
 }
 
+export const DockerLogStreams = ["stdout", "stderr"] as const;
+export type DockerLogStream = (typeof DockerLogStreams)[number];
+
+export interface DockerLogLine {
+	ts: string;
+	stream: DockerLogStream;
+	text: string;
+}
+
+export interface DockerLog {
+	id: string;
+	metadata: {
+		monitorId: string;
+		teamId: string;
+		containerId: string;
+		containerName: string;
+	};
+	lines: DockerLogLine[];
+	gap: boolean;
+	checkedAt: string;
+	expiry: string;
+	createdAt: string;
+	updatedAt: string;
+}
+
 export interface DockerContainerInfo {
 	id: string;
 	name: string;

client/src/Types/Dashboard.ts

@@ -0,0 +1,10 @@
+export const dashboardCardKeys = [
+	"monitorStatus",
+	"currentlyDown",
+	"uptime",
+	"monitorsByType",
+] as const;
+export type DashboardCardKey = (typeof dashboardCardKeys)[number];
+
+export const dashboardSortOrders = ["ascending", "descending"] as const;
+export type DashboardSortOrder = (typeof dashboardSortOrders)[number];

client/src/Types/Monitor.ts

@@ -5,6 +5,7 @@ import type {
 	DailyCheckBucket,
 	DockerContainerInfo,
 	DockerContainerSummary,
+	DockerLog,
 } from "@/Types/Check";
 import type { PageSpeedGroupedCheck } from "@/Types/Check";
 import type { GeoContinent } from "@/Types/GeoCheck";
@@ -59,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" },
@@ -158,6 +168,12 @@ export interface Monitor {
 	geoCheckEnabled?: boolean;
 	geoCheckLocations?: GeoContinent[];
 	geoCheckInterval?: number;
+	dockerLogsEnabled?: boolean;
+	dockerAlertOnStopped?: boolean;
+	dockerAlertOnUnhealthy?: boolean;
+	dockerTlsCa?: string;
+	dockerTlsCert?: string;
+	dockerTlsKeySet?: boolean;
 	dnsServer?: string;
 	dnsRecordType?: DnsRecordType;
 	recentChecks: CheckSnapshot[];
@@ -178,6 +194,11 @@ export interface MonitorsSummary {
 	breachedMonitors: number;
 }
 
+export interface MonitorTypeCount {
+	type: MonitorType;
+	count: number;
+}
+
 export interface MonitorsWithChecksResponse {
 	count: number;
 	monitors: MonitorWithChecks[];
@@ -322,6 +343,10 @@ export interface DockerContainerResponse {
 	stats: DockerContainerStats;
 }
 
+export interface DockerContainerLogsResponse {
+	logs: DockerLog[];
+	nextCursor: string | null;
+}
 export interface Game {
 	name: string;
 	options?: {

client/src/Types/Notification.ts

@@ -9,6 +9,7 @@ export const NotificationChannels = [
 	"teams",
 	"telegram",
 	"pushover",
+	"signalgrid",
 	"twilio",
 	"ntfy",
 ] as const;

client/src/Types/Query.ts

@@ -1,2 +1,5 @@
 export const DateRanges = ["recent", "hour", "day", "week", "month", "all"] as const;
 export type DateRange = (typeof DateRanges)[number];
+
+export const SortOrders = ["asc", "desc"] as const;
+export type SortOrder = (typeof SortOrders)[number];

client/src/Utils/FormatUtils.ts

@@ -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 = "—";

client/src/Utils/MonitorUtils.ts

@@ -1,12 +1,26 @@
 import type { MonitorStatus, MonitorType } from "@/Types/Monitor";
+import type { SortOrder } from "@/Types/Query";
 import type { PaletteKey } from "@/Utils/Theme/Theme";
 import type { ValueType } from "@/Components/design-elements/StatusLabel";
-import type {
+import {
-	DockerContainerMount,
+	DockerLogStreams,
-	DockerContainerPort,
+	type DockerContainerMount,
-	DockerContainerState,
+	type DockerContainerPort,
+	type DockerContainerState,
+	type DockerLog,
+	type DockerLogLine,
 } from "@/Types/Check";
 
+export const getNextMonitorSort = (
+	field: string,
+	sortField: string,
+	sortOrder: SortOrder
+): { field: string; order: SortOrder } => {
+	if (field !== sortField) return { field, order: "asc" };
+	if (sortOrder === "asc") return { field, order: "desc" };
+	return { field: "", order: "asc" };
+};
+
 export const getMonitorPath = (type: MonitorType): string => {
 	const pathMap: Record<MonitorType, string> = {
 		http: "uptime",
@@ -17,7 +31,7 @@ export const getMonitorPath = (type: MonitorType): string => {
 		websocket: "uptime",
 		dns: "uptime",
 		unknown: "uptime",
-		docker: "docker",
+		docker: "docker/host",
 		hardware: "infrastructure",
 		pagespeed: "pagespeed",
 	};
@@ -37,6 +51,14 @@ export const getStatusPalette = (status: MonitorStatus): PaletteKey => {
 	return "warning";
 };
 
+export const getDockerPalette = (dockerState: DockerContainerState): PaletteKey => {
+	if (dockerState === "created") return "success";
+	if (dockerState === "running") return "success";
+	if (dockerState === "dead") return "error";
+	if (dockerState === "exited") return "error";
+	return "warning";
+};
+
 export const getValuePalette = (value: ValueType): PaletteKey => {
 	const paletteMap: Record<ValueType, PaletteKey> = {
 		positive: "success",
@@ -144,3 +166,35 @@ export const getDockerMountLabel = (mount: DockerContainerMount) => {
 	if (mount.source) return mount.source;
 	return mount.type;
 };
+
+export const DockerLogStreamFilters = ["all", ...DockerLogStreams] as const;
+export type DockerLogStreamFilter = (typeof DockerLogStreamFilters)[number];
+
+export interface DockerLogRow extends DockerLogLine {
+	key: string;
+	gapBefore: boolean; // This signifies lines skipped
+}
+
+export const flattenDockerLogs = (logs: DockerLog[]): DockerLogRow[] => {
+	const rows: DockerLogRow[] = [];
+	for (const log of [...logs].reverse()) {
+		log.lines.forEach((line: DockerLogLine, idx: number) => {
+			rows.push({ ...line, key: `${log.id}:${idx}`, gapBefore: idx === 0 && log.gap });
+		});
+	}
+	return rows;
+};
+
+export const filterDockerLogRows = (
+	rows: DockerLogRow[],
+	stream: DockerLogStreamFilter,
+	query: string
+): DockerLogRow[] => {
+	const normalizedQuery = query.trim().toLowerCase();
+	return rows.filter((row) => {
+		return (
+			(stream === "all" || row.stream === stream) &&
+			(normalizedQuery === "" || row.text.toLowerCase().includes(normalizedQuery))
+		);
+	});
+};

client/src/Utils/Theme/Palette.ts

@@ -18,6 +18,20 @@ export const colors = {
 	gray700: "#313131",
 	gray900: "#151518",
 	gray850: "#1c1c21",
+	ink900: "#101917",
+	ink600: "#55635C",
+	ink400: "#7C8983",
+	surface50: "#F6F8F7",
+	rule200: "#C7D2CC",
+	successMain: "#0D6049",
+	errorMain: "#A02B24",
+	warningMain: "#8C5806",
+	inkDark900: "#ECEFED",
+	inkDark600: "#A3ADA8",
+	ruleDark: "#3A4642",
+	successDark: "#4BC49E",
+	errorDark: "#E8837A",
+	warningDark: "#E0A458",
 	brandGreen: "#13715B",
 	brandGreenLight: "#4DAF94",
 	green200: "#ECF7F2",
@@ -43,13 +57,38 @@ export const lightPalette = {
 	action: {
 		rowHover: alpha(colors.gray900, HOVER.ROW),
 		controlHover: alpha(colors.gray900, HOVER.CONTROL),
+		selected: alpha(colors.brandGreen, 0.06),
+		selectedHover: alpha(colors.brandGreen, 0.1),
 	},
 	secondary: {
 		main: colors.gray200,
 	},
+	background: {
+		default: colors.surface50,
+		paper: "#FFFFFF",
+	},
+	text: {
+		primary: colors.ink900,
+		secondary: colors.ink600,
+		disabled: colors.ink400,
+	},
+	divider: colors.rule200,
+	success: {
+		main: colors.successMain,
+	},
+	error: {
+		main: colors.errorMain,
+	},
+	warning: {
+		main: colors.warningMain,
+	},
 	sidebar: {
 		accent: colors.brandGreen,
 	},
+	scrollbar: {
+		track: colors.rule200,
+		thumb: colors.brandGreen,
+	},
 	rowStatus: {
 		running: colors.green200,
 		paused: colors.yellow200,
@@ -69,10 +108,13 @@ export const lightPalette = {
 export const darkPalette = {
 	primary: {
 		main: colors.brandGreen,
+		light: colors.brandGreenLight,
 	},
 	action: {
 		rowHover: alpha("#FFFFFF", HOVER.ROW),
 		controlHover: alpha("#FFFFFF", HOVER.CONTROL),
+		selected: alpha(colors.brandGreenLight, 0.07),
+		selectedHover: alpha(colors.brandGreenLight, 0.11),
 	},
 	secondary: {
 		main: colors.gray700,
@@ -81,9 +123,28 @@ export const darkPalette = {
 		default: colors.gray900,
 		paper: colors.gray850,
 	},
+	text: {
+		primary: colors.inkDark900,
+		secondary: colors.inkDark600,
+		disabled: colors.ink400,
+	},
+	divider: colors.ruleDark,
+	success: {
+		main: colors.successDark,
+	},
+	error: {
+		main: colors.errorDark,
+	},
+	warning: {
+		main: colors.warningDark,
+	},
 	sidebar: {
 		accent: colors.brandGreenLight,
 	},
+	scrollbar: {
+		track: colors.ruleDark,
+		thumb: colors.brandGreen,
+	},
 	rowStatus: {
 		running: alpha(colors.brandGreen, 0.18),
 		paused: alpha(colors.orange500, 0.18),

client/src/Utils/Theme/Theme.ts

@@ -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 {
@@ -16,9 +17,11 @@ declare module "@mui/material/styles" {
 	interface TypeAction {
 		rowHover: string;
 		controlHover: string;
+		selectedHover: string;
 	}
 	interface Palette {
 		sidebar: { accent: string };
+		scrollbar: { track: string; thumb: string };
 		rowStatus: { running: string; paused: string };
 		chart: {
 			phases: {
@@ -33,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: {
@@ -57,7 +61,7 @@ export type PaletteKey = {
 	[K in keyof Theme["palette"]]: Theme["palette"][K] extends { main: any } ? K : never;
 }[keyof Theme["palette"]];
 
-const fontFamilyPrimary = "system-ui, sans-serif";
+const fontFamilyPrimary = '"Geist Variable", system-ui, sans-serif';
 const fontFamilyMonospace =
 	'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace';
 const shadow =
@@ -85,11 +89,13 @@ export const theme = (mode: string, palette: any) =>
 			fontSize: typographyLevels.base,
 			h1: {
 				fontSize: typographyLevels.xxl,
-				fontWeight: 500,
+				fontWeight: 700,
+				letterSpacing: "-0.015em",
 			},
 			h2: {
 				fontSize: typographyLevels.l,
-				fontWeight: 400,
+				fontWeight: 600,
+				letterSpacing: "-0.01em",
 			},
 			body1: {
 				fontSize: typographyLevels.m,
@@ -109,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: {
@@ -131,7 +158,11 @@ export const theme = (mode: string, palette: any) =>
 				styleOverrides: {
 					root: ({ theme }) => ({
 						"&.Mui-focusVisible": {
-							outline: `1px solid ${theme.palette.primary.main}`,
+							outline: `1px solid ${
+								theme.palette.mode === "dark"
+									? theme.palette.primary.light
+									: theme.palette.primary.main
+							}`,
 							outlineOffset: 2,
 						},
 					}),
@@ -185,18 +216,38 @@ export const theme = (mode: string, palette: any) =>
 					}),
 				},
 			},
-
 			MuiOutlinedInput: {
 				styleOverrides: {
+					input: {
+						paddingTop: 0,
+						paddingBottom: 0,
+						height: "100%",
+					},
 					root: ({ theme }) => ({
-						"&:hover .MuiOutlinedInput-notchedOutline": {
+						"& .MuiSelect-select": {
+							paddingTop: 0,
+							paddingBottom: 0,
+							display: "flex",
+							alignItems: "center",
+							minHeight: "unset",
+						},
+						"& .MuiOutlinedInput-notchedOutline": {
+							borderColor: theme.palette.divider,
+							transition: "border-color 0.15s ease",
+						},
+						"&:hover:not(.Mui-focused):not(.Mui-disabled) .MuiOutlinedInput-notchedOutline":
+							{
+								borderColor: theme.palette.text.disabled,
+							},
+						"&.Mui-focused .MuiOutlinedInput-notchedOutline": {
 							borderColor:
 								theme.palette.mode === "dark"
-									? "rgba(255, 255, 255, 0.23)"
+									? theme.palette.primary.light
-									: theme.palette.text.primary,
+									: theme.palette.primary.main,
+							borderWidth: 2,
 						},
-						"&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+						"&.Mui-error .MuiOutlinedInput-notchedOutline": {
-							borderColor: palette.primary.main,
+							borderColor: theme.palette.error.main,
 						},
 					}),
 				},

client/src/Utils/Theme/constants.ts

@@ -18,6 +18,8 @@ export const LAYOUT = {
 	XXL: 16,
 } 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

client/src/Utils/TimeUtils.ts

@@ -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) => {
+type DurationUnit = "day" | "hour" | "minute" | "second";
-	if (verbose) {
+
-		return prettyMilliseconds(ms, { verbose: true });
+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, {

client/src/Validation/monitor.ts

@@ -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,10 +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, "Container ID 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
@@ -216,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({
@@ -225,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>;

client/src/Validation/notifications.ts

@@ -70,6 +70,12 @@ const pushoverSchema = baseSchema.extend({
 	accessToken: z.string().min(1, "App token is required"),
 });
 
+const signalgridSchema = baseSchema.extend({
+	type: z.literal("signalgrid"),
+	address: z.string().min(1, "Channel is required"),
+	accessToken: z.string().min(1, "Client key is required"),
+});
+
 const twilioSchema = baseSchema.extend({
 	type: z.literal("twilio"),
 	accountSid: z.string().min(1, "Account SID is required"),
@@ -95,6 +101,7 @@ export const notificationSchema = z.discriminatedUnion("type", [
 	teamsSchema,
 	telegramSchema,
 	pushoverSchema,
+	signalgridSchema,
 	twilioSchema,
 	ntfySchema,
 ]);

client/src/index.css

@@ -1,5 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
-
 * {
 	box-sizing: border-box;
 }

client/src/locales/ar.json

@@ -1377,6 +1377,9 @@
 					"maintenance": "صيانة",
 					"paused": "متوقف مؤقتاً",
 					"up": "قيد التشغيل"
+				},
+				"incidents": {
+					"errorLoading": "فشل تحميل الحوادث."
 				}
 			},
 			"statusBar": {

client/src/locales/ca.json

@@ -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": {

client/src/locales/cs.json

@@ -1377,6 +1377,9 @@
 					"maintenance": "Údržba",
 					"paused": "Pozastaveno",
 					"up": "V provozu"
+				},
+				"incidents": {
+					"errorLoading": "Nepodařilo se načíst incidenty."
 				}
 			},
 			"statusBar": {

client/src/locales/de.json

@@ -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": {