fix(monitors): correct proxy transport and error attribution

Second review round found two blocking defects, both verified against a stub
proxy rather than inferred.

HttpsProxyAgent was used for every target, and it always issues CONNECT:

    PROXY RECEIVED: "CONNECT example.com:80 HTTP/1.1"

Squid's stock ACL permits CONNECT only to 443, so every http:// monitor would
have broken the moment HTTP_PROXY was set — in exactly the hardened networks
this feature targets. Plain-http targets now use http-proxy-agent, which
sends an absolute-URI request. The agent cache keys on target scheme.

A refused CONNECT is replayed onto the socket, so the proxy's own status was
parsed as the target's: a proxy ACL denial reported "the site returned 403",
and a monitor whose customUpCodes included 403 or 407 was marked UP while the
target was never reached. Proxy-tunnel rejections are now detected via the
agent's proxyConnect event and reported as a network error naming the proxy.
The listener is per request and removed in a finally block, so a failure
cannot be attributed to a concurrent check.

Also from review:

- The fallback for an invalid PROXY_MONITOR_TYPES no longer fires when every
  entry was a deliberate but unproxyable type ("ping,port"). Falling back
  there would have proxied http and pagespeed, which the operator never
  nominated. Typos still fall back; unproxyable lists stay empty and warn.
- Dropped the now-redundant strict/insecure agent split: TLS is applied per
  request, and Node already separates socket pools by TLS options, so the
  split only doubled tunnels to the proxy.
- Renamed to ProxyPolicy.ts to match the PascalCase peers in the directory.
- The warning no longer echoes the raw config value.

Adds 9 tests covering scheme selection, tunnel rejection, and the narrowed
fallback. Verified by reverting: the tunnel-failure test fails without the fix.

.github/workflows/check-lockfile.yml

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

.github/workflows/poeditor-sync.yml

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

.github/workflows/upload-poeditor.yml

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

CLAUDE.md

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

README.md

@@ -32,13 +32,12 @@
 
 <h1 align="center"><a href="https://bluewavelabs.ca" target="_blank">Checkmate</a></h1>
 
-<p align="center"><strong>An open source uptime and infrastructure monitoring application</strong>
+<p align="center"><strong>An open source uptime and infrastructure monitoring application</strong></p>
 
 [![Run on PikaPods](https://www.pikapods.com/static/run-button.svg)](https://www.pikapods.com/pods?run=checkmate)
 
-
 <img width="1703" height="1041" alt="image" src="https://github.com/user-attachments/assets/0f4dcf38-9b42-4b84-8633-ff34778df1a8" />
-</p>
+
 <br>
 
 
@@ -92,10 +91,6 @@ JWT_SECRET="$(openssl rand -hex 32)" docker compose up -d
 
 Then open http://localhost:52345. If the app is reached at another origin (domain or LAN IP), set `CLIENT_HOST` accordingly. To build the image yourself, run `docker build -f docker/Dockerfile -t checkmate .` from a checkout. For TLS, put any reverse proxy (Caddy, Traefik, nginx) in front of port 52345.
 
-There are also 1-click installation options like [Repocloud](https://repocloud.io/details/Checkmate),
-[Pikapods](https://www.pikapods.com/), [Coolify](https://coolify.io/), [Elestio](https://elest.io/open-source/checkmate), [K8s](../../charts/helm/checkmate/INSTALLATION.md), [Sive Host](https://sive.host) or [Cloudzy](https://cloudzy.com/marketplace/checkmate).
-
-
 ### Configuration
 
 The image is configured entirely through environment variables on the server container:
@@ -212,9 +207,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), [Mert](https://github.com/mertssmnoglu) and [Karen](https://github.com/karenvicent) 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 7000+ stars and attracted 90+ 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,17 +1,16 @@
 {
 	"name": "client",
-	"version": "3.11.0",
+	"version": "3.10.0",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "client",
-			"version": "3.11.0",
+			"version": "3.10.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",
@@ -951,15 +950,6 @@
 				"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,10 +1,9 @@
 {
 	"name": "client",
 	"private": true,
-	"version": "3.11.0",
+	"version": "3.10.0",
 	"type": "module",
 	"scripts": {
-		"lockfile": "docker run --rm -v \"$PWD\":/w -w /w $(grep -m1 -o 'node:[^ ]*' ../docker/Dockerfile) npm install --package-lock-only",
 		"dev": "vite",
 		"build": "tsc -b && vite build",
 		"build-dev": "tsc -b && vite build --mode development",
@@ -21,7 +20,6 @@
 		"@csstools/css-tokenizer": "^3.0.4",
 		"@emotion/react": "^11.13.3",
 		"@emotion/styled": "^11.13.0",
-		"@fontsource-variable/geist": "^5.3.0",
 		"@hello-pangea/dnd": "^18.0.0",
 		"@hookform/resolvers": "5.2.2",
 		"@mui/lab": "7.0.0",

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

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

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

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

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

@@ -10,10 +10,8 @@ import { useTheme } from "@mui/material/styles";
 type BaseChartProps = React.PropsWithChildren<{
 	icon?: React.ReactNode;
 	title: string;
-	rightTitle?: string;
 	width?: number | string;
 	maxWidth?: number | string;
-	flexBasis?: number | string;
 	padding?: number | string | ResponsiveStyleValue<number | string>;
 	onClick?: () => void;
 }>;
@@ -21,10 +19,8 @@ type BaseChartProps = React.PropsWithChildren<{
 export const BaseChart = ({
 	children,
 	title,
-	rightTitle,
 	width = "100%",
 	maxWidth = "100%",
-	flexBasis = "0%",
 	padding,
 	onClick,
 }: BaseChartProps) => {
@@ -36,7 +32,6 @@ export const BaseChart = ({
 				padding: padding ?? theme.spacing(LAYOUT.MD),
 				display: "flex",
 				flex: 1,
-				flexBasis,
 				width: width,
 				maxWidth: maxWidth,
 				...(onClick && {
@@ -49,27 +44,13 @@ export const BaseChart = ({
 				gap={theme.spacing(LAYOUT.MD)}
 				flex={1}
 			>
-				<Stack
-					direction="row"
-					justifyContent={"space-between"}
+				<Typography
+					variant="eyebrow"
+					color="text.secondary"
+					sx={{ overflowWrap: "anywhere" }}
 				>
-					<Typography
-						variant="eyebrow"
-						color="text.secondary"
-						sx={{ overflowWrap: "anywhere" }}
-					>
-						{title}
-					</Typography>
-					{rightTitle && (
-						<Typography
-							variant="eyebrow"
-							color="text.secondary"
-							sx={{ overflowWrap: "anywhere" }}
-						>
-							{rightTitle}
-						</Typography>
-					)}
-				</Stack>
+					{title}
+				</Typography>
 				<Box flex={1}>{children}</Box>
 			</Stack>
 		</BaseBox>

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

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

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

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

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

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

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.dark,
-				color: "#FFFFFF",
+				backgroundColor: theme.palette.error.main,
+				color: theme.palette.error.contrastText,
 				px: theme.spacing(8),
 				py: theme.spacing(4),
 				transition: "top 1s ease-in-out",

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

@@ -6,7 +6,6 @@ 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 { CONTROL_HEIGHT, ICON_CONTROL_WIDTH } from "@/Utils/Theme/constants";
 
 import type { ReactNode } from "react";
 
@@ -110,7 +109,7 @@ export const PageHeader = ({
 							fontSize: 14,
 							color: theme.palette.text.secondary,
 							lineHeight: 1.55,
-							maxWidth: "108ch",
+							maxWidth: 640,
 						}}
 					>
 						{description}
@@ -142,8 +141,8 @@ export const PageHeader = ({
 								display: "inline-flex",
 								alignItems: "center",
 								justifyContent: "center",
-								width: ICON_CONTROL_WIDTH,
-								height: CONTROL_HEIGHT,
+								width: 36,
+								height: 32,
 								color: theme.palette.text.secondary,
 								borderRight:
 									idx < linkItems.length - 1

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

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

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

@@ -5,7 +5,7 @@ import { BaseBox } from "@/Components/design-elements";
 import { useTranslation } from "react-i18next";
 import type { SxProps } from "@mui/material";
 
-import { alpha, useTheme } from "@mui/material/styles";
+import { useTheme } from "@mui/material/styles";
 
 type StatusBoxProps = React.PropsWithChildren<{
 	children: React.ReactNode;
@@ -33,15 +33,9 @@ export const BGBox = ({ children, sx }: StatusBoxProps) => {
 				bottom={0}
 				sx={{
 					pointerEvents: "none",
-					// Deliberately far fainter than `divider` - this is texture
-					// behind the number, not a rule, and it must never compete
-					// with the box's own border. Note alpha() *replaces* the
-					// alpha channel, so this relies on `divider` being an opaque
-					// hex; if it ever goes translucent this gets stronger, not
-					// weaker.
 					backgroundImage: `
-						linear-gradient(${alpha(theme.palette.divider, 0.4)} 1px, transparent 1px),
-						linear-gradient(90deg, ${alpha(theme.palette.divider, 0.4)} 1px, transparent 1px)
+						linear-gradient(${theme.palette.divider} 1px, transparent 1px),
+						linear-gradient(90deg, ${theme.palette.divider} 1px, transparent 1px)
 					`,
 					backgroundSize: "24px 24px",
 					maskImage:

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

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

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

@@ -52,12 +52,6 @@ type DataTableProps<T extends { id?: string | number; _id?: string | number }> =
 	emptyViewText?: string;
 	emptyViewPositive?: boolean;
 	getRowSx?: (row: T) => SxProps<Theme>;
-	/**
-	 * Marks a row selected so it gets the shared selected + hover treatment.
-	 * Desktop table only - the small-screen card branch does not style
-	 * selection yet, same as `getRowSx`.
-	 */
-	isRowSelected?: (row: T) => boolean;
 };
 
 export function DataTable<
@@ -76,7 +70,6 @@ export function DataTable<
 	emptyViewText,
 	emptyViewPositive,
 	getRowSx,
-	isRowSelected,
 }: DataTableProps<T>) {
 	const theme = useTheme();
 	const [expanded, setExpanded] = useState<(string | number) | null>(null);
@@ -86,7 +79,6 @@ export function DataTable<
 	};
 
 	const isSmall = useMediaQuery(theme.breakpoints.down("md"));
-	const isInteractive = Boolean(onRowClick) || expandableRows;
 
 	if (data.length === 0 || headers.length === 0) {
 		return (
@@ -116,11 +108,6 @@ export function DataTable<
 								borderRadius: theme.shape.borderRadius,
 								padding: theme.spacing(LAYOUT.XS),
 								cursor: onRowClick ? "pointer" : "default",
-								...(onRowClick && {
-									"&:hover": {
-										backgroundColor: theme.palette.action.rowHover,
-									},
-								}),
 							}}
 							key={key}
 						>
@@ -204,7 +191,7 @@ export function DataTable<
 					"& :is(th)": {
 						backgroundColor: theme.palette.background.paper,
 						color: theme.palette.text.secondary,
-						fontWeight: 600,
+						fontWeight: 500,
 						textTransform: "uppercase",
 						letterSpacing: "0.08em",
 						padding: `${theme.spacing(SPACING.LG)} ${theme.spacing(LAYOUT.MD)}`,
@@ -220,17 +207,6 @@ export function DataTable<
 					"& .MuiTableBody-root .MuiTableRow-root:last-child .MuiTableCell-root": {
 						borderBottom: "none",
 					},
-					"& .MuiTableBody-root .MuiTableRow-root.is-selected .MuiTableCell-root": {
-						backgroundColor: theme.palette.action.selected,
-					},
-					"& .MuiTableBody-root .MuiTableRow-root.is-clickable:hover .MuiTableCell-root":
-						{
-							backgroundColor: theme.palette.action.rowHover,
-						},
-					"& .MuiTableBody-root .MuiTableRow-root.is-selected.is-clickable:hover .MuiTableCell-root":
-						{
-							backgroundColor: theme.palette.action.selectedHover,
-						},
 				}}
 			>
 				<TableHead>
@@ -255,14 +231,8 @@ export function DataTable<
 						return (
 							<Fragment key={key}>
 								<TableRow
-									className={[
-										isInteractive ? "is-clickable" : "",
-										isRowSelected?.(row) ? "is-selected" : "",
-									]
-										.filter(Boolean)
-										.join(" ")}
 									sx={{
-										cursor: isInteractive ? "pointer" : "default",
+										cursor: onRowClick ? "pointer" : "default",
 										...(getRowSx?.(row) as object),
 									}}
 									onClick={() => {
@@ -322,12 +292,6 @@ interface TablePaginationActionsProps {
 	onPageChange: (event: React.MouseEvent<HTMLButtonElement>, newPage: number) => void;
 }
 
-const controlHoverSx = (theme: Theme): SxProps<Theme> => ({
-	"&:hover": {
-		backgroundColor: theme.palette.action.controlHover,
-	},
-});
-
 function TablePaginationActions(props: TablePaginationActionsProps) {
 	const theme = useTheme();
 	const { count, page, rowsPerPage, onPageChange } = props;
@@ -357,7 +321,6 @@ function TablePaginationActions(props: TablePaginationActionsProps) {
 				onClick={handleFirstPageButtonClick}
 				disabled={page === 0}
 				aria-label="first page"
-				sx={controlHoverSx(theme)}
 			>
 				{theme.direction === "rtl" ? (
 					<ChevronsRight
@@ -375,7 +338,6 @@ function TablePaginationActions(props: TablePaginationActionsProps) {
 				onClick={handleBackButtonClick}
 				disabled={page === 0}
 				aria-label="previous page"
-				sx={controlHoverSx(theme)}
 			>
 				{theme.direction === "rtl" ? (
 					<ChevronRight
@@ -393,7 +355,6 @@ function TablePaginationActions(props: TablePaginationActionsProps) {
 				onClick={handleNextButtonClick}
 				disabled={page >= Math.ceil(count / rowsPerPage) - 1}
 				aria-label="next page"
-				sx={controlHoverSx(theme)}
 			>
 				{theme.direction === "rtl" ? (
 					<ChevronLeft
@@ -411,7 +372,6 @@ function TablePaginationActions(props: TablePaginationActionsProps) {
 				onClick={handleLastPageButtonClick}
 				disabled={page >= Math.ceil(count / rowsPerPage) - 1}
 				aria-label="last page"
-				sx={controlHoverSx(theme)}
 			>
 				{theme.direction === "rtl" ? (
 					<ChevronsLeft
@@ -459,7 +419,6 @@ function HasMoreTablePaginationActions(props: HasMoreTablePaginationActionsProps
 				onClick={handleFirstPageButtonClick}
 				disabled={page === 0}
 				aria-label="first page"
-				sx={controlHoverSx(theme)}
 			>
 				{theme.direction === "rtl" ? (
 					<ChevronsRight
@@ -477,7 +436,6 @@ function HasMoreTablePaginationActions(props: HasMoreTablePaginationActionsProps
 				onClick={handleBackButtonClick}
 				disabled={page === 0}
 				aria-label="previous page"
-				sx={controlHoverSx(theme)}
 			>
 				{theme.direction === "rtl" ? (
 					<ChevronRight
@@ -495,7 +453,6 @@ function HasMoreTablePaginationActions(props: HasMoreTablePaginationActionsProps
 				onClick={handleNextButtonClick}
 				disabled={hasMore === false}
 				aria-label="next page"
-				sx={controlHoverSx(theme)}
 			>
 				{theme.direction === "rtl" ? (
 					<ChevronLeft
@@ -513,7 +470,6 @@ function HasMoreTablePaginationActions(props: HasMoreTablePaginationActionsProps
 				<IconButton
 					disabled={hasMore === false}
 					aria-label="next page"
-					sx={controlHoverSx(theme)}
 				>
 					<Ellipsis
 						size={20}

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

@@ -1,8 +1,6 @@
 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 { CONTROL_HEIGHT } from "@/Utils/Theme/constants";
 interface CustomTabsProps extends TabsProps {}
 
 export const Tabs = (props: CustomTabsProps) => {
@@ -10,7 +8,7 @@ export const Tabs = (props: CustomTabsProps) => {
 	return (
 		<MuiTabs
 			sx={{
-				minHeight: CONTROL_HEIGHT,
+				minHeight: 34,
 				borderBottom: `1px solid ${theme.palette.divider}`,
 				"& .MuiTabs-indicator": {
 					backgroundColor: theme.palette.primary.main,
@@ -40,9 +38,9 @@ export const Tab = (props: CustomTabProps) => {
 			iconPosition="start"
 			sx={{
 				textTransform: "none",
-				fontSize: typographyLevels.m,
+				fontSize: 14,
 				fontWeight: 500,
-				minHeight: CONTROL_HEIGHT,
+				minHeight: 34,
 				padding: theme.spacing(1, 0),
 				paddingBottom: 0,
 				minWidth: "auto",
@@ -50,6 +48,7 @@ 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 { CONTROL_HEIGHT, HOVER } from "@/Utils/Theme/constants";
+import { HOVER } from "@/Utils/Theme/constants";
 
 const PALETTE_COLORS = [
 	"primary",
@@ -43,8 +43,7 @@ export const ButtonInput = ({ sx, ...props }: ButtonProps) => {
 			{...props}
 			sx={{
 				textTransform: "none",
-				height: CONTROL_HEIGHT,
-				lineHeight: 1.2,
+				height: 34,
 				fontWeight: 400,
 				borderRadius: 2,
 				whiteSpace: "nowrap",

client/src/Components/inputs/ColorPicker.tsx

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

client/src/Components/inputs/DatePicker.tsx

@@ -8,7 +8,6 @@ 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 { CONTROL_HEIGHT } from "@/Utils/Theme/constants";
 
 interface DatePickerComponentProps extends Omit<DatePickerProps<Dayjs>, "label"> {
 	fieldLabel?: string;
@@ -56,7 +55,7 @@ export const DatePickerComponent = ({
 								flexDirection: "row-reverse",
 							},
 							"& input": {
-								minHeight: CONTROL_HEIGHT,
+								minHeight: 34,
 								p: 0,
 								pl: theme.spacing(3),
 								pr: theme.spacing(5),
@@ -67,9 +66,7 @@ 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.text.disabled,
+									borderColor: error ? theme.palette.error.main : theme.palette.divider,
 								},
 						},
 					},

client/src/Components/inputs/Select.tsx

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

client/src/Components/inputs/TextInput.tsx

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

client/src/Components/inputs/TimePicker.tsx

@@ -7,7 +7,6 @@ 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 { CONTROL_HEIGHT } from "@/Utils/Theme/constants";
 
 interface TimePickerComponentProps extends Omit<MobileTimePickerProps<Dayjs>, "label"> {
 	fieldLabel?: string;
@@ -34,7 +33,7 @@ export const TimePickerComponent = ({
 						sx: {
 							width: "fit-content",
 							"& input": {
-								minHeight: CONTROL_HEIGHT,
+								minHeight: 34,
 								p: 0,
 								px: theme.spacing(5),
 							},

client/src/Components/inputs/ToggleButton.tsx

@@ -4,7 +4,6 @@ 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 { CONTROL_HEIGHT } from "@/Utils/Theme/constants";
 
 export const ToggleButtonInput = ({ sx, ...props }: ToggleButtonProps) => {
 	const theme = useTheme();
@@ -21,7 +20,7 @@ export const ToggleButtonInput = ({ sx, ...props }: ToggleButtonProps) => {
 			sx={{
 				px: 8,
 				textTransform: "none",
-				height: CONTROL_HEIGHT,
+				height: 34,
 				fontWeight: 400,
 				whiteSpace: "nowrap",
 				textOverflow: "ellipsis",
@@ -35,6 +34,7 @@ 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/FormRadioGroupField.tsx

@@ -8,7 +8,6 @@ import {
 } from "react-hook-form";
 import { LAYOUT } from "@/Utils/Theme/constants";
 import { RadioWithDescription } from "@/Components/inputs/Radio";
-import { FieldLabel } from "@/Components/inputs/FieldLabel";
 export interface FormRadioOption {
 	value: string;
 	label: string;
@@ -18,12 +17,10 @@ export interface FormRadioOption {
 interface FormRadioGroupProps<T extends FieldValues> {
 	name: FieldPath<T>;
 	options: FormRadioOption[];
-	fieldLabel?: string;
 }
 export const FormRadioGroup = <T extends FieldValues>({
 	name,
 	options,
-	fieldLabel,
 }: FormRadioGroupProps<T>) => {
 	const { control } = useFormContext<T>();
 	const theme = useTheme();
@@ -33,7 +30,6 @@ export const FormRadioGroup = <T extends FieldValues>({
 			control={control}
 			render={({ field, fieldState }) => (
 				<FormControl error={!!fieldState.error}>
-					{fieldLabel && <FieldLabel>{fieldLabel}</FieldLabel>}
 					<RadioGroup
 						{...field}
 						sx={{ gap: theme.spacing(LAYOUT.MD) }}

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

@@ -44,7 +44,6 @@ export const FormSelectField = <T extends FieldValues>({
 					}}
 					error={!!fieldState.error}
 					{...rest}
-					helperText={fieldState.error?.message ?? rest.helperText}
 				>
 					{options.map((option) => (
 						<MenuItem

client/src/Components/monitors/ControlsFilter.tsx

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

client/src/Components/monitors/MonitorListPage.tsx

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

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

@@ -0,0 +1,34 @@
+export const computeYAxisCap = (values: number[]): number | undefined => {
+	const sorted = values.slice().sort((a, b) => a - b);
+	if (sorted.length < 2) return undefined;
+	const p95 = sorted[Math.min(sorted.length - 1, Math.floor(sorted.length * 0.95))];
+	return p95 > 0 ? Math.ceil(p95 * 2) : undefined;
+};
+
+export const PHASE_KEYS = [
+	"avgDns",
+	"avgTcp",
+	"avgTls",
+	"avgRequest",
+	"avgFirstByte",
+	"avgDownload",
+] as const;
+
+export const PHASE_COLOR_KEYS = {
+	avgDns: "dns",
+	avgTcp: "tcp",
+	avgTls: "tls",
+	avgRequest: "request",
+	avgFirstByte: "firstByte",
+	avgDownload: "download",
+} as const;
+
+// i18n keys, resolved with t() at render
+export const PHASE_LABEL_KEYS: Record<(typeof PHASE_KEYS)[number], string> = {
+	avgDns: "common.charts.phases.dns",
+	avgTcp: "common.charts.phases.tcp",
+	avgTls: "common.charts.phases.tls",
+	avgRequest: "common.charts.phases.request",
+	avgFirstByte: "common.charts.phases.firstByte",
+	avgDownload: "common.charts.phases.download",
+};

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

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

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

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

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

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

client/src/Components/monitors/index.tsx

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

client/src/Components/sidebar/Menu.tsx

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

client/src/Components/sidebar/NavItem.tsx

@@ -28,8 +28,8 @@ export const NavItem = ({
 
 	const buttonBgColor = selected ? theme.palette.action.selected : "transparent";
 	const buttonBgHoverColor = selected
-		? theme.palette.action.selectedHover
-		: theme.palette.action.rowHover;
+		? theme.palette.action.selected
+		: theme.palette.action.hover;
 	const fontWeight = selected ? 600 : 400;
 	return (
 		<Tooltip

client/src/Components/sidebar/index.tsx

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

client/src/Features/UI/uiSlice.ts

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

client/src/Hooks/useMonitorForm.ts

@@ -4,7 +4,6 @@ import {
 	DefaultHttpMethod,
 	DefaultMonitorMatchMethod,
 	DefaultPageSpeedStrategy,
-	DefaultProxyMode,
 } from "@/Types/Monitor";
 import type { Monitor, MonitorType } from "@/Types/Monitor";
 
@@ -47,8 +46,6 @@ export const getMonitorDefaults = (
 				url: data?.url || "",
 				method: data?.method ?? DefaultHttpMethod,
 				ignoreTlsErrors: data?.ignoreTlsErrors || false,
-				proxyMode: data?.proxyMode ?? DefaultProxyMode,
-				proxyId: data?.proxyId || "",
 				useAdvancedMatching: data?.useAdvancedMatching || false,
 				matchMethod: data?.matchMethod || DefaultMonitorMatchMethod,
 				expectedValue: data?.expectedValue || "",
@@ -144,8 +141,6 @@ export const getMonitorDefaults = (
 				url: "",
 				method: DefaultHttpMethod,
 				ignoreTlsErrors: false,
-				proxyMode: DefaultProxyMode,
-				proxyId: "",
 				useAdvancedMatching: false,
 				matchMethod: DefaultMonitorMatchMethod,
 				expectedValue: "",

client/src/Hooks/useMonitorListController.ts

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

client/src/Hooks/useProxiesForm.ts

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

client/src/Hooks/useSettingsForm.ts

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

client/src/Hooks/useSidebar.ts

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

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

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

client/src/Pages/Checks/index.tsx

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

client/src/Pages/CreateMonitor/index.tsx

@@ -41,12 +41,9 @@ import {
 	DefaultMonitorMatchMethod,
 	MonitorMatchMethods,
 	GeoCheckIntervalOptions,
-	ProxyModes,
-	type ProxyMode,
 } from "@/Types/Monitor";
 import type { Notification } from "@/Types/Notification";
 import type { Tag } from "@/Types/Tag";
-import type { AppSettingsResponse } from "@/Types/Settings";
 import {
 	stepFieldsFor,
 	monitorStepCount,
@@ -59,7 +56,6 @@ import { FormMultiSelectField } from "@/Components/inputs/forms/FormMultiSelectF
 import { FormSelectField } from "@/Components/inputs/forms/FormSelectField";
 import { FormSliderField } from "@/Components/inputs/forms/FormSliderField";
 import { FormSwitchField } from "@/Components/inputs/forms/FormSwitchField";
-import type { ProxyResponse } from "@/Types/Proxy";
 
 const httpMethodOptions = HttpMethods.map((method) => ({
 	value: method,
@@ -71,7 +67,6 @@ interface GeneralSettingsConfig {
 	urlPlaceholder: string;
 	namePlaceholder: string;
 	showUrl: boolean;
-	showProxy: boolean;
 	showPort: boolean;
 	showGameSelect: boolean;
 	showSecret: boolean;
@@ -92,7 +87,6 @@ const getGeneralSettingsConfig = (
 			urlPlaceholder: t("pages.createMonitor.form.general.option.url.placeholder"),
 			namePlaceholder: t("pages.createMonitor.form.general.option.name.placeholder"),
 			showUrl: true,
-			showProxy: true,
 			showPort: false,
 			showGameSelect: false,
 			showSecret: false,
@@ -107,7 +101,6 @@ const getGeneralSettingsConfig = (
 			urlPlaceholder: t("pages.createMonitor.form.general.option.host.placeholder"),
 			namePlaceholder: t("pages.createMonitor.form.general.option.name.placeholder"),
 			showUrl: true,
-			showProxy: false,
 			showPort: false,
 			showGameSelect: false,
 			showSecret: false,
@@ -122,7 +115,6 @@ const getGeneralSettingsConfig = (
 			urlPlaceholder: t("pages.createMonitor.form.general.option.container.placeholder"),
 			namePlaceholder: t("pages.createMonitor.form.general.option.name.placeholder"),
 			showUrl: true,
-			showProxy: false,
 			showPort: false,
 			showGameSelect: false,
 			showSecret: false,
@@ -137,7 +129,6 @@ const getGeneralSettingsConfig = (
 			urlPlaceholder: t("pages.createMonitor.form.general.option.url.placeholder"),
 			namePlaceholder: t("pages.createMonitor.form.general.option.name.placeholder"),
 			showUrl: true,
-			showProxy: false,
 			showPort: true,
 			showGameSelect: false,
 			showSecret: false,
@@ -152,7 +143,6 @@ const getGeneralSettingsConfig = (
 			urlPlaceholder: t("pages.createMonitor.form.general.option.url.placeholder"),
 			namePlaceholder: t("pages.createMonitor.form.general.option.name.placeholder"),
 			showUrl: true,
-			showProxy: false,
 			showPort: true,
 			showGameSelect: true,
 			showSecret: false,
@@ -167,7 +157,6 @@ const getGeneralSettingsConfig = (
 			urlPlaceholder: t("pages.createMonitor.form.general.option.host.placeholder"),
 			namePlaceholder: t("pages.createMonitor.form.general.option.name.placeholder"),
 			showUrl: true,
-			showProxy: false,
 			showPort: true,
 			showGameSelect: false,
 			showSecret: false,
@@ -182,7 +171,6 @@ const getGeneralSettingsConfig = (
 			urlPlaceholder: t("pages.createMonitor.form.general.option.url.placeholder"),
 			namePlaceholder: t("pages.createMonitor.form.general.option.name.placeholder"),
 			showUrl: true,
-			showProxy: false,
 			showPort: false,
 			showGameSelect: false,
 			showSecret: false,
@@ -197,7 +185,6 @@ const getGeneralSettingsConfig = (
 			urlPlaceholder: t("pages.createMonitor.form.general.option.captureUrl.placeholder"),
 			namePlaceholder: t("pages.createMonitor.form.general.option.name.placeholder"),
 			showUrl: true,
-			showProxy: false,
 			showPort: false,
 			showGameSelect: false,
 			showSecret: true,
@@ -212,7 +199,6 @@ const getGeneralSettingsConfig = (
 			urlPlaceholder: t("pages.createMonitor.form.general.option.wsUrl.placeholder"),
 			namePlaceholder: t("pages.createMonitor.form.general.option.name.placeholder"),
 			showUrl: true,
-			showProxy: false,
 			showPort: false,
 			showGameSelect: false,
 			showSecret: false,
@@ -227,7 +213,6 @@ const getGeneralSettingsConfig = (
 			urlPlaceholder: t("pages.createMonitor.form.general.option.url.placeholder"),
 			namePlaceholder: t("pages.createMonitor.form.general.option.name.placeholder"),
 			showUrl: true,
-			showProxy: false,
 			showPort: false,
 			showGameSelect: false,
 			showSecret: false,
@@ -273,8 +258,6 @@ const CreateMonitorPage = () => {
 	const { data: notifications } = useGet<Notification[]>("/notifications/team");
 	const { data: games } = useGet<GamesMap>("/monitors/games");
 	const { data: tags } = useGet<Tag[]>("/tags/team");
-	const { data: proxies } = useGet<ProxyResponse[]>("/proxies/team");
-	const { data: appSettings } = useGet<AppSettingsResponse>("/settings");
 
 	const { schema, defaults } = useMonitorForm({
 		data: existingMonitor ?? null,
@@ -298,7 +281,6 @@ const CreateMonitorPage = () => {
 
 	const watchedType = watch("type") as MonitorType;
 	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;
 
@@ -484,38 +466,6 @@ const CreateMonitorPage = () => {
 			})),
 		[t]
 	);
-	const globalProxyName = appSettings?.globalProxy?.name;
-
-	const proxyModeOptions = useMemo(
-		() =>
-			ProxyModes.map((mode) => {
-				const key =
-					mode === "inherit"
-						? globalProxyName
-							? "inheritGlobal"
-							: "inheritDirect"
-						: mode;
-				return {
-					value: mode,
-					label: t(`pages.createMonitor.form.general.option.proxyMode.value.${key}`, {
-						name: globalProxyName,
-					}),
-					description: t(
-						`pages.createMonitor.form.general.option.proxyMode.description.${key}`
-					),
-				};
-			}),
-		[t, globalProxyName]
-	);
-
-	const proxyOptions = useMemo(
-		() =>
-			(proxies ?? []).map((proxy) => ({
-				value: proxy.id,
-				label: `${proxy.name} (${proxy.host}:${proxy.port})`,
-			})),
-		[proxies]
-	);
 
 	return (
 		<FormProvider {...form}>
@@ -568,11 +518,6 @@ const CreateMonitorPage = () => {
 						}
 						rightContent={
 							<Stack spacing={theme.spacing(LAYOUT.MD)}>
-								<FormTextField
-									name="name"
-									fieldLabel={t("pages.createMonitor.form.general.option.name.label")}
-									placeholder={generalSettingsConfig.namePlaceholder}
-								/>
 								{/* URL/Host/Container field - not shown for hardware */}
 								{generalSettingsConfig.showUrl && (
 									<FormTextField
@@ -582,27 +527,6 @@ const CreateMonitorPage = () => {
 										disabled={isEditMode}
 									/>
 								)}
-								{/* Proxy fields - only shown for HTTP */}
-								{generalSettingsConfig.showProxy && (
-									<>
-										<FormRadioGroup
-											name="proxyMode"
-											options={proxyModeOptions}
-											fieldLabel={t(
-												"pages.createMonitor.form.general.option.proxyMode.label"
-											)}
-										/>
-										{watchedProxyMode === "custom" && (
-											<FormSelectField
-												name="proxyId"
-												fieldLabel={t(
-													"pages.createMonitor.form.general.option.proxy.label"
-												)}
-												options={proxyOptions}
-											/>
-										)}
-									</>
-								)}
 
 								{/* Strategy field - only for pagespeed type */}
 								{generalSettingsConfig.showStrategy && (
@@ -679,6 +603,11 @@ const CreateMonitorPage = () => {
 										options={dnsRecordTypeOptions}
 									/>
 								)}
+								<FormTextField
+									name="name"
+									fieldLabel={t("pages.createMonitor.form.general.option.name.label")}
+									placeholder={generalSettingsConfig.namePlaceholder}
+								/>
 							</Stack>
 						}
 					/>

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

@@ -1,51 +0,0 @@
-import Stack from "@mui/material/Stack";
-import { StatBox } from "@/Components/design-elements";
-
-// Types
-
-// Hooks
-import { useTheme } from "@mui/material";
-import { useTranslation } from "react-i18next";
-import type { DockerContainerInfo } from "@/Types/Check";
-
-// Utils
-import { formatDuration } from "@/Utils/TimeUtils";
-
-export const DockerContainerStatusBoxes = ({
-	container,
-}: {
-	container: DockerContainerInfo | undefined;
-}) => {
-	const { t } = useTranslation();
-	const theme = useTheme();
-
-	if (!container) return null;
-
-	const { state, restartCount, health } = container;
-	const startedAt = container.startedAt ?? "0";
-	const runningFor = Date.now() - new Date(startedAt).getTime();
-	return (
-		<Stack
-			direction="row"
-			gap={theme.spacing(8)}
-			flexWrap={"wrap"}
-		>
-			<StatBox
-				title={t("common.labels.state")}
-				subtitle={state}
-			/>
-			<StatBox
-				title={t("common.labels.uptime")}
-				subtitle={formatDuration(runningFor)}
-			/>
-			<StatBox
-				title={t("common.labels.restarts")}
-				subtitle={String(restartCount ?? 0)}
-			/>
-			<StatBox
-				title={t("common.labels.health")}
-				subtitle={health}
-			/>
-		</Stack>
-	);
-};

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

@@ -1,3 +0,0 @@
-export const TabLogs = () => {
-	return "This is the logs tab";
-};

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

@@ -1,113 +0,0 @@
-// Components
-import Grid from "@mui/material/Grid";
-import Stack from "@mui/material/Stack";
-import { HistogramDockerContainer } from "@/Components/monitors/charts/HistogramDockerContainer";
-
-// Hooks
-import { Typography, useTheme } from "@mui/material";
-import { useTranslation } from "react-i18next";
-import useMediaQuery from "@mui/material/useMediaQuery";
-
-// Types
-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 prettyBytes from "pretty-bytes";
-import { BaseBox } from "@/Components/design-elements";
-import { dedupeDockerPorts, getDockerMountLabel } from "@/Utils/MonitorUtils";
-
-const getChartConfigs = (theme: Theme, t: TFunction, stats: DockerContainerStats) => [
-	{
-		title: t("common.charts.labels.cpuUsage"),
-		key: "avgCpuPct",
-		color: theme.palette.success.main,
-		rightTitle: formatPercentage(stats?.latest?.container.cpuPct || 0),
-	},
-	{
-		title: t("common.charts.labels.memoryUsage"),
-		key: "avgMemoryUsedBytes",
-		color: theme.palette.primary.main,
-		rightTitle: prettyBytes(stats?.latest?.container.memoryUsedBytes || 0),
-	},
-];
-
-export const TabOverview = ({ stats }: { stats: DockerContainerStats }) => {
-	const theme = useTheme();
-	const { t } = useTranslation();
-	const isSmall = useMediaQuery(theme.breakpoints.down("md"));
-
-	const { ports, mounts } = stats?.latest?.container ?? {};
-	const dedupedPorts = dedupeDockerPorts(ports ?? []);
-	return (
-		<Grid
-			container
-			spacing={LAYOUT.MD}
-		>
-			{getChartConfigs(theme, t, stats).map((config) => {
-				return (
-					<Grid
-						key={config.key}
-						size={isSmall ? 12 : 6}
-					>
-						<HistogramDockerContainer
-							title={config.title}
-							rightTitle={config.rightTitle}
-							stats={stats}
-							dataKey={config.key}
-							strokeColor={config.color}
-							gradientStartColor={config.color}
-						/>
-					</Grid>
-				);
-			})}
-			<Grid size={isSmall ? 12 : 6}>
-				<BaseBox
-					padding={LAYOUT.MD}
-					minHeight={200}
-				>
-					<Typography
-						variant="eyebrow"
-						color={theme.palette.text.secondary}
-						textTransform={"uppercase"}
-					>
-						Ports
-					</Typography>
-					<Stack>
-						{dedupedPorts?.map((port) => {
-							return (
-								<Typography
-									key={`${port.publicPort}/${port.privatePort}`}
-								>{`${port.hostIp}:${port.publicPort} -> ${port.privatePort}/${port.protocol}`}</Typography>
-							);
-						})}
-					</Stack>
-				</BaseBox>
-			</Grid>
-			<Grid size={isSmall ? 12 : 6}>
-				<BaseBox
-					padding={LAYOUT.MD}
-					minHeight={200}
-				>
-					<Typography
-						variant="eyebrow"
-						color={theme.palette.text.secondary}
-						textTransform={"uppercase"}
-					>
-						Volumes
-					</Typography>
-					<Stack>
-						{mounts?.map((mount) => {
-							return (
-								<Typography key={`${mount.source}/${mount.destination}`}>
-									{`${getDockerMountLabel(mount)} -> ${mount.destination}`}
-								</Typography>
-							);
-						})}
-					</Stack>
-				</BaseBox>
-			</Grid>
-		</Grid>
-	);
-};

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

@@ -1,78 +0,0 @@
-// Components
-import { BasePage, Tabs, Tab, DockerStateLabel } from "@/Components/design-elements";
-import { TabOverview } from "@/Pages/Docker/ContainerDetails/TabOverview";
-import { TabLogs } from "@/Pages/Docker/ContainerDetails/TabLogs";
-
-// Hooks
-import { useParams } from "react-router-dom";
-import { useState } from "react";
-import { useTranslation } from "react-i18next";
-import { useGet } from "@/Hooks/UseApi";
-import type { DockerContainerResponse } from "@/Types/Monitor";
-import { DockerContainerStatusBoxes } from "@/Pages/Docker/ContainerDetails/Components/StatBoxes";
-import type { DateRange } from "@/Types/Query";
-import { HeaderTimeRange } from "@/Components/common";
-interface DockerContainerDetailsProps {
-	open?: "overview" | "logs";
-}
-
-const TAB_MAP = {
-	overview: 0,
-	logs: 1,
-} as const;
-
-const DockerDetailsPage = ({ open = "overview" }: DockerContainerDetailsProps) => {
-	const [activeTab, setActiveTab] = useState<number>(TAB_MAP[open]);
-	const [dateRange, setDateRange] = useState<DateRange>("recent");
-	const { monitorId, containerName } = useParams<{
-		monitorId: string;
-		containerName: string;
-	}>();
-	const { t } = useTranslation();
-
-	const containerDetailsUrl = monitorId
-		? `/monitors/docker/details/${monitorId}/containers/${containerName}?dateRange=${dateRange}`
-		: null;
-
-	const { data: containerData } = useGet<DockerContainerResponse>(
-		containerDetailsUrl,
-		{},
-		{ refreshInterval: 10000, keepPreviousData: true }
-	);
-
-	const monitor = containerData?.monitor;
-	if (!monitor) return null;
-
-	const stats = containerData.stats;
-
-	const container = stats?.latest?.container;
-	if (!container) return null;
-
-	const { state, name, image } = container;
-
-	return (
-		<BasePage headerKey="docker.container">
-			<DockerStateLabel
-				state={state}
-				name={name}
-				image={image}
-			/>
-			<DockerContainerStatusBoxes container={container} />
-			<HeaderTimeRange
-				dateRange={dateRange}
-				setDateRange={setDateRange}
-			/>
-			<Tabs
-				value={activeTab}
-				onChange={(_, newValue: number) => setActiveTab(newValue)}
-			>
-				<Tab label={t("pages.docker.container.tabs.overview")} />
-				<Tab label={t("pages.docker.container.tabs.logs")} />
-			</Tabs>
-			{activeTab === 0 && <TabOverview stats={stats} />}
-			{activeTab === 1 && <TabLogs />}
-		</BasePage>
-	);
-};
-
-export default DockerDetailsPage;

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

@@ -1,123 +0,0 @@
-import Box from "@mui/material/Box";
-import Typography from "@mui/material/Typography";
-import { DockerStateLabel, Table } from "@/Components/design-elements";
-// Hooks
-import { useTranslation } from "react-i18next";
-import useMediaQuery from "@mui/material/useMediaQuery";
-import { useTheme } from "@mui/material/styles";
-import { useNavigate } from "react-router-dom";
-
-// Types
-import type { Header } from "@/Components/design-elements/Table";
-import type { DockerContainerInfo } from "@/Types/Check";
-
-// Utils
-import { formatPercentage } from "@/Utils/FormatUtils";
-
-interface DockerContainersTableProps {
-	monitorId: string | undefined;
-	containers: DockerContainerInfo[];
-	onRowClick?: (container: DockerContainerInfo) => void;
-}
-
-export const DockerContainersTable = ({
-	monitorId,
-	containers,
-}: DockerContainersTableProps) => {
-	const { t } = useTranslation();
-	const theme = useTheme();
-	const isSmall = useMediaQuery(theme.breakpoints.down("md"));
-	const navigate = useNavigate();
-
-	const getHeaders = () => {
-		// const renderSortIcon = (isActive: boolean) => (
-		// 	<Box
-		// 		width={16}
-		// 		display="inline-flex"
-		// 		justifyContent="center"
-		// 	>
-		// 		{isActive ? (
-		// 			sortOrder === "asc" ? (
-		// 				<ArrowUp size={16} />
-		// 			) : (
-		// 				<ArrowDown size={16} />
-		// 			)
-		// 		) : null}
-		// 	</Box>
-		// );
-		const headers: Header<DockerContainerInfo>[] = [
-			{
-				id: "container",
-				content: t("pages.docker.host.table.headers.container"),
-				render: (row) => {
-					return (
-						<DockerStateLabel
-							state={row.state}
-							name={row.name}
-							image={row.image}
-						/>
-					);
-				},
-			},
-			{
-				id: "status",
-				content: t("common.table.headers.status"),
-				render: (row) => {
-					return <Typography>{row.state}</Typography>;
-				},
-			},
-			{
-				id: "health",
-				content: t("common.labels.health"),
-				render: (row) => {
-					return <Typography>{row.health}</Typography>;
-				},
-			},
-			{
-				id: "cpu",
-				content: t("pages.docker.host.table.headers.cpu"),
-				render: (row) => {
-					return <Typography>{formatPercentage(row.cpuPct ?? 0)}</Typography>;
-				},
-			},
-			{
-				id: "memory",
-				content: t("pages.docker.host.table.headers.memory"),
-				render: (row) => {
-					return <Typography>{formatPercentage(row.memoryPct ?? 0)}</Typography>;
-				},
-			},
-			{
-				id: "restarts",
-				content: t("common.labels.restarts"),
-				render: (row) => {
-					return <Typography>{row.restartCount}</Typography>;
-				},
-			},
-		];
-		return headers;
-	};
-
-	let headers = getHeaders();
-
-	if (isSmall) {
-		headers = headers.filter((h) => h.id !== "histogram");
-	}
-
-	return (
-		<Box>
-			<Table
-				headers={headers}
-				data={containers}
-				onRowClick={(row) => {
-					navigate(`/docker/host/${monitorId}/container/${row.name}`);
-				}}
-				// getRowSx={(row) => ({
-				// 	backgroundColor: isRowSelected(row.id)
-				// 		? theme.palette.action.selected
-				// 		: "inherit",
-				// })}
-			/>
-		</Box>
-	);
-};

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

@@ -1,47 +0,0 @@
-import Stack from "@mui/material/Stack";
-import { StatBox } from "@/Components/design-elements";
-
-// Types
-import type { DockerStats } from "@/Types/Monitor";
-
-// Hooks
-import { useTheme } from "@mui/material";
-import { useTranslation } from "react-i18next";
-
-// Utils
-
-export const DockerStatusBoxes = ({ stats }: { stats: DockerStats | undefined }) => {
-	const { t } = useTranslation();
-	const theme = useTheme();
-
-	if (!stats) return null;
-
-	const { total, running, stopped, unhealthy } = stats.latest?.summary ?? {};
-
-	return (
-		<Stack
-			direction="row"
-			gap={theme.spacing(8)}
-			flexWrap={"wrap"}
-		>
-			<StatBox
-				title={t("pages.docker.host.statBoxes.containers")}
-				subtitle={String(total)}
-			/>
-			<StatBox
-				title={t("pages.docker.host.statBoxes.running")}
-				subtitle={String(running)}
-			/>
-
-			<StatBox
-				title={t("pages.docker.host.statBoxes.stopped")}
-				subtitle={String(stopped)}
-			/>
-
-			<StatBox
-				title={t("pages.docker.host.statBoxes.unhealthy")}
-				subtitle={String(unhealthy)}
-			/>
-		</Stack>
-	);
-};

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

@@ -1,55 +0,0 @@
-import { BasePage } from "@/Components/design-elements";
-import { HeaderMonitorControls, MonitorStatBoxes } from "@/Components/monitors";
-import { DockerStatusBoxes } from "@/Pages/Docker/HostDetails/Components/StatBoxes";
-
-// Types
-import type { DockerDetailsResponse } from "@/Types/Monitor";
-
-// Hooks
-import { useGet } from "@/Hooks/UseApi";
-import { useIsAdmin } from "@/Hooks/useIsAdmin";
-import { useParams } from "react-router-dom";
-import { DockerContainersTable } from "@/Pages/Docker/HostDetails/Components/DockerContainersTable";
-
-const DockerHostDetailsPage = () => {
-	const { monitorId } = useParams<{ monitorId: string }>();
-	const isAdmin = useIsAdmin();
-
-	// The containers list renders the latest check only, so no date range is
-	// offered; the endpoint's dateRange param only shapes the aggregate buckets.
-	const monitorDetailsUrl = monitorId ? `/monitors/docker/details/${monitorId}` : null;
-
-	const { data: monitorDetailsData, refetch: refetchMonitor } =
-		useGet<DockerDetailsResponse>(
-			monitorDetailsUrl,
-			{},
-			{ refreshInterval: 10000, keepPreviousData: true }
-		);
-
-	const monitor = monitorDetailsData?.monitor;
-	const monitorStats = monitorDetailsData?.monitorStats ?? null;
-	const stats = monitorDetailsData?.stats;
-	const containers = stats?.latest?.containers ?? [];
-
-	return (
-		<BasePage>
-			<HeaderMonitorControls
-				path="docker"
-				monitor={monitor}
-				isAdmin={isAdmin}
-				refetch={refetchMonitor}
-			/>
-			<MonitorStatBoxes
-				monitor={monitor}
-				monitorStats={monitorStats}
-			/>
-			<DockerStatusBoxes stats={stats} />
-			<DockerContainersTable
-				monitorId={monitorId}
-				containers={containers}
-			/>
-		</BasePage>
-	);
-};
-
-export default DockerHostDetailsPage;

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

@@ -1,343 +0,0 @@
-import Box from "@mui/material/Box";
-import Stack from "@mui/material/Stack";
-import Typography from "@mui/material/Typography";
-import {
-	Table,
-	Pagination,
-	StatusLabel,
-	ColoredLabel,
-} from "@/Components/design-elements";
-import { SPACING } from "@/Utils/Theme/constants";
-import type { Header } from "@/Components/design-elements/Table";
-import { ActionsMenu, type ActionMenuItem } from "@/Components/actions-menu";
-import { ArrowUp, ArrowDown } from "lucide-react";
-
-import { useTranslation } from "react-i18next";
-import useMediaQuery from "@mui/material/useMediaQuery";
-import { useTheme } from "@mui/material/styles";
-import { useNavigate } from "react-router-dom";
-import { usePost } from "@/Hooks/UseApi";
-
-import type { Monitor } from "@/Types/Monitor";
-import type { Tag } from "@/Types/Tag";
-import type { DockerContainerSummary } from "@/Types/Check";
-import { Checkbox } from "@/Components/inputs";
-
-const summaryOf = (monitor: Monitor): DockerContainerSummary | undefined => {
-	const recentChecks = monitor.recentChecks ?? [];
-	return recentChecks[recentChecks.length - 1]?.containerSummary;
-};
-
-interface DockerMonitorsTableProps {
-	monitors: Monitor[];
-	tags: Tag[];
-	refetch: () => void;
-	setSelectedMonitor: (monitor: Monitor | null) => void;
-	sortField: string;
-	setSortField: (field: string) => void;
-	sortOrder: "asc" | "desc";
-	setSortOrder: (order: "asc" | "desc") => void;
-	count: number;
-	page: number;
-	setPage: (page: number) => void;
-	rowsPerPage: number;
-	setRowsPerPage: (rowsPerPage: number) => void;
-	selectedRows?: string[];
-	onSelectionChange?: (selected: string[]) => void;
-}
-
-export const DockerMonitorsTable = ({
-	monitors,
-	tags,
-	refetch,
-	setSelectedMonitor,
-	sortField,
-	setSortField,
-	sortOrder,
-	setSortOrder,
-	count,
-	page,
-	setPage,
-	rowsPerPage,
-	setRowsPerPage,
-	selectedRows = [],
-	onSelectionChange,
-}: DockerMonitorsTableProps) => {
-	const { t } = useTranslation();
-	const theme = useTheme();
-	const isSmall = useMediaQuery(theme.breakpoints.down("md"));
-	const navigate = useNavigate();
-	const { post } = usePost<Record<string, never>, Monitor>();
-
-	const selectedSet = new Set(selectedRows);
-	const isAllSelected =
-		monitors.length > 0 && monitors.every((m) => selectedSet.has(m.id));
-	const isSomeSelected = selectedRows.length > 0 && !isAllSelected;
-
-	const handleSelectAll = (checked: boolean) => {
-		onSelectionChange?.(checked ? monitors.map((m) => m.id) : []);
-	};
-
-	const handleSelectRow = (id: string, checked: boolean) => {
-		if (!onSelectionChange) return;
-		onSelectionChange(
-			checked ? [...selectedRows, id] : selectedRows.filter((rowId) => rowId !== id)
-		);
-	};
-
-	const isRowSelected = (id: string) => selectedSet.has(id);
-
-	const handlePageChange = (
-		_e: React.MouseEvent<HTMLButtonElement> | null,
-		newPage: number
-	) => {
-		setPage(newPage);
-	};
-
-	const handleRowsPerPageChange = (
-		e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>
-	) => {
-		const value = Number(e.target.value);
-		setPage(0);
-		setRowsPerPage(value);
-	};
-
-	const handleSort = (e: React.MouseEvent, field: string) => {
-		e.preventDefault();
-		e.stopPropagation();
-		if (sortField === field) {
-			const newOrder = sortOrder === "asc" ? "desc" : "asc";
-			setSortOrder(newOrder);
-		} else {
-			setSortField(field);
-			setSortOrder("asc");
-		}
-		refetch();
-	};
-
-	const getActions = (monitor: Monitor): ActionMenuItem[] => {
-		return [
-			{
-				id: 2,
-				label: t("pages.common.monitors.actions.details"),
-				action: () => {
-					navigate(`${monitor.id}`);
-				},
-			},
-			{
-				id: 3,
-				label: t("pages.common.monitors.actions.incidents"),
-				action: () => {
-					navigate(`/incidents?monitorId=${monitor.id}`);
-				},
-			},
-			{
-				id: 4,
-				label: t("pages.common.monitors.actions.configure"),
-				action: () => {
-					navigate(`/docker/configure/${monitor.id}`);
-				},
-			},
-			{
-				id: 6,
-				label:
-					monitor.isActive === false
-						? t("common.buttons.resume")
-						: t("common.buttons.pause"),
-				action: async () => {
-					await post(`/monitors/pause/${monitor.id}`, {});
-					refetch();
-				},
-				closeMenu: true,
-			},
-			{
-				id: 7,
-				label: (
-					<Typography color={theme.palette.error.main}>
-						{t("common.buttons.delete")}
-					</Typography>
-				),
-				action: () => {
-					setSelectedMonitor(monitor);
-				},
-				closeMenu: true,
-			},
-		];
-	};
-
-	const getHeaders = () => {
-		const renderSortIcon = (isActive: boolean) => (
-			<Box
-				width={16}
-				display="inline-flex"
-				justifyContent="center"
-			>
-				{isActive ? (
-					sortOrder === "asc" ? (
-						<ArrowUp size={16} />
-					) : (
-						<ArrowDown size={16} />
-					)
-				) : null}
-			</Box>
-		);
-		const headers: Header<Monitor>[] = [
-			{
-				id: "selection",
-				content: (
-					<Checkbox
-						aria-label={t("pages.common.monitors.actions.selectAll")}
-						indeterminate={isSomeSelected}
-						checked={isAllSelected}
-						onChange={(e) => handleSelectAll(e.target.checked)}
-					/>
-				),
-				hideMobileLabel: true,
-				render: (row) => (
-					<Checkbox
-						aria-label={t("pages.common.monitors.actions.selectMonitor", {
-							name: row.name,
-						})}
-						checked={isRowSelected(row.id)}
-						onChange={(e) => {
-							handleSelectRow(row.id, e.target.checked);
-						}}
-						onClick={(e) => e.stopPropagation()}
-					/>
-				),
-				onClick: (e) => e?.stopPropagation(),
-			},
-			{
-				id: "name",
-				align: "left",
-				mobileLabel: t("pages.docker.table.headers.host"),
-				content: (
-					<Typography
-						component="div"
-						display="inline-flex"
-						alignItems="center"
-						gap={theme.spacing(4)}
-						onClick={(e) => handleSort(e, "name")}
-						sx={{ cursor: "pointer" }}
-					>
-						{t("pages.docker.table.headers.host")}
-						{renderSortIcon(sortField === "name")}
-					</Typography>
-				),
-				render: (row) => {
-					return (
-						<Stack>
-							<Typography variant="body2">{row.name}</Typography>
-							<Typography
-								variant="caption"
-								color={theme.palette.text.secondary}
-							>
-								{row.url}
-							</Typography>
-						</Stack>
-					);
-				},
-			},
-			{
-				id: "status",
-				mobileLabel: t("common.table.headers.status"),
-				content: (
-					<Stack
-						gap={theme.spacing(4)}
-						direction={"row"}
-						justifyContent={"center"}
-						alignItems={"center"}
-						onClick={(e) => handleSort(e, "status")}
-						sx={{ cursor: "pointer" }}
-					>
-						<Box width={theme.spacing(8)} />
-						{t("common.table.headers.status")}
-						{renderSortIcon(sortField === "status")}
-					</Stack>
-				),
-				render: (row) => {
-					return <StatusLabel status={row.status} />;
-				},
-			},
-			{
-				id: "containers",
-				content: t("pages.docker.table.headers.containers"),
-				render: (row) => {
-					const summary = summaryOf(row);
-					return (
-						<Typography variant="body2">
-							{summary
-								? t("pages.docker.table.containersRunning", {
-										running: summary.running,
-										total: summary.total,
-									})
-								: "—"}
-						</Typography>
-					);
-				},
-			},
-			{
-				id: "tags",
-				content: t("common.table.headers.tags"),
-				render: (row) => {
-					if (row.tags.length === 0) return "-";
-					return (
-						<Stack
-							justifyContent={"center"}
-							direction={isSmall ? "column" : "row"}
-							gap={theme.spacing(SPACING.LG)}
-						>
-							{row.tags.map((tagId) => {
-								const fullTag = tags.find((t) => t.id === tagId);
-								if (!fullTag) return null;
-								return (
-									<ColoredLabel
-										key={fullTag.id}
-										text={fullTag.name}
-										color={fullTag.color}
-									/>
-								);
-							})}
-						</Stack>
-					);
-				},
-			},
-
-			{
-				id: "actions",
-				content: t("common.table.headers.actions"),
-				render: (row) => {
-					return <ActionsMenu items={getActions(row)} />;
-				},
-			},
-		];
-		return headers;
-	};
-
-	let headers = getHeaders();
-
-	if (isSmall) {
-		headers = headers.filter((h) => h.id !== "histogram");
-	}
-	return (
-		<Box>
-			<Table
-				headers={headers}
-				data={monitors}
-				onRowClick={(row) => {
-					navigate(`/docker/host/${row.id}`);
-				}}
-				isRowSelected={(row) => isRowSelected(row.id)}
-			/>
-			<Pagination
-				component="div"
-				count={count}
-				page={page}
-				rowsPerPage={rowsPerPage}
-				onPageChange={handlePageChange}
-				onRowsPerPageChange={handleRowsPerPageChange}
-				itemsOnPage={monitors.length}
-			/>
-		</Box>
-	);
-};

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

@@ -1,44 +0,0 @@
-import { MonitorListPage } from "@/Components/monitors";
-import { DockerMonitorsTable } from "@/Pages/Docker/Monitors/Components/DockerMonitorsTable";
-import { useMonitorListController } from "@/Hooks/useMonitorListController";
-
-const DockerMonitorsPage = () => {
-	const c = useMonitorListController({
-		types: ["docker"],
-		checksLimit: 25,
-		refreshInterval: 5000,
-		rowsPerPageTable: "docker",
-		rowsPerPageDefault: 10,
-	});
-
-	return (
-		<MonitorListPage
-			headerKey="docker"
-			page="docker"
-			actionLink="/docker/create"
-			controller={c}
-			bulkActions
-			showTypeFilter={false}
-		>
-			<DockerMonitorsTable
-				monitors={c.monitors || []}
-				tags={c.tags || []}
-				refetch={c.refetch}
-				setSelectedMonitor={c.setSelectedMonitor}
-				count={c.count || 0}
-				page={c.page}
-				setPage={c.setPage}
-				rowsPerPage={c.rowsPerPage}
-				sortField={c.sortField}
-				setSortField={c.setSortField}
-				sortOrder={c.sortOrder}
-				setSortOrder={c.setSortOrder}
-				setRowsPerPage={c.handleSetRowsPerPage}
-				selectedRows={c.selectedRows}
-				onSelectionChange={c.setSelectedRows}
-			/>
-		</MonitorListPage>
-	);
-};
-
-export default DockerMonitorsPage;

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

@@ -30,10 +30,6 @@ const SummaryItem = ({ icon, label, value }: SummaryItemProps) => {
 				direction="row"
 				alignItems="center"
 				gap={theme.spacing(2)}
-				// The icons are supporting marks beside the label, not content,
-				// so they take secondary ink rather than lucide's currentColor
-				// default, which renders them heavier than the text.
-				sx={{ "& svg": { color: theme.palette.text.secondary } }}
 			>
 				{icon}
 				<Typography variant="body1">{label}</Typography>
@@ -147,10 +143,7 @@ const SummaryIncidentItem = ({ incident }: { incident: IncidentSummaryItem }) =>
 					gap: theme.spacing(2),
 				}}
 			>
-				<Icon
-					icon={Globe}
-					color={theme.palette.text.secondary}
-				/>
+				<Icon icon={Globe} />
 				<Typography
 					variant="body1"
 					fontWeight={500}

client/src/Pages/Incidents/index.tsx

@@ -20,7 +20,6 @@ import { useState, useEffect, useMemo } from "react";
 import { useParams } from "react-router-dom";
 import type { Incident, IncidentsResponse, IncidentSummary } from "@/Types/Incident";
 import type { Monitor } from "@/Types/Monitor";
-import type { DateRange } from "@/Types/Query";
 import { useTheme } from "@mui/material";
 
 const IncidentsPage = () => {
@@ -31,7 +30,7 @@ const IncidentsPage = () => {
 	// Filter state
 	const [selectedMonitor, setSelectedMonitor] = useState(monitorId || "0");
 	const [filter, setFilter] = useState("all");
-	const [dateRange, setDateRange] = useState<DateRange>("recent");
+	const [dateRange, setDateRange] = useState("recent");
 	const [page, setPage] = useState(0);
 	const [rowsPerPage, setRowsPerPage] = useState(10);
 	const [activeIncidentsPage, setActiveIncidentsPage] = useState(0);

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

@@ -12,7 +12,7 @@ const formatTemp = (value: number) => `${value.toFixed(0)}°C`;
 const getChartConfigs = (theme: any, checks: HardwareCheckStats[], t: any) => {
 	return [
 		{
-			title: t("common.charts.labels.memoryUsage"),
+			title: t("pages.infrastructure.charts.labels.memory"),
 			type: "memory",
 			dataKeys: ["avgMemoryUsage"],
 			strokeColor: theme.palette.primary.main,
@@ -22,7 +22,7 @@ const getChartConfigs = (theme: any, checks: HardwareCheckStats[], t: any) => {
 			idx: null,
 		},
 		{
-			title: t("common.charts.labels.cpuUsage"),
+			title: t("pages.infrastructure.charts.labels.cpu"),
 			type: "cpu",
 			dataKeys: ["avgCpuUsage"],
 			strokeColor: theme.palette.success.main,

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

@@ -63,42 +63,19 @@ const getChartConfigs = (
 	return configs;
 };
 
-// Loopback / bridge names Capture reports when it can only observe the
-// container's own network namespace.
+// Loopback / bridge names Capture sees when it can only observe the container's
+// own network namespace. When ALL reported interfaces match this set we assume
+// the "no real interfaces visible" case and surface the notice.
 const CONTAINER_ONLY_IFACE_NAMES = new Set(["lo", "lo0", "docker0"]);
 
-// Below this, an interface is carrying no traffic worth charting. Real host
-// NICs sit orders of magnitude above it; a container's veth sits at or near
-// zero.
-const IDLE_INTERFACE_BYTES_PER_SECOND = 1024;
-
-const interfaceIsIdle = (checks: HardwareCheckStats[], name: string): boolean =>
-	checks.every((check) => {
-		const iface = check.net?.find((candidate) => candidate.name === name);
-		if (!iface) {
-			return true;
-		}
-		return (
-			(iface.bytesSentPerSecond || 0) < IDLE_INTERFACE_BYTES_PER_SECOND &&
-			(iface.deltaBytesRecv || 0) < IDLE_INTERFACE_BYTES_PER_SECOND
-		);
-	});
-
 const onlyContainerVisibleInterfaces = (checks: HardwareCheckStats[]): boolean => {
 	const named = new Set<string>();
 	checks.forEach((c) => c.net?.forEach((iface) => named.add(iface.name)));
-	if (named.size === 0) {
-		return false;
+	if (named.size === 0) return false;
+	for (const name of named) {
+		if (!CONTAINER_ONLY_IFACE_NAMES.has(name)) return false;
 	}
-
-	const names = [...named];
-	if (names.every((name) => CONTAINER_ONLY_IFACE_NAMES.has(name))) {
-		return true;
-	}
-	if (!names.some((name) => CONTAINER_ONLY_IFACE_NAMES.has(name))) {
-		return false;
-	}
-	return names.every((name) => interfaceIsIdle(checks, name));
+	return true;
 };
 
 export const InfraNetworkCharts = ({

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

@@ -8,8 +8,6 @@ import { useTheme } from "@mui/material";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import type { CheckSnapshot } from "@/Types/Check";
 
-const GAUGE_MAX_WIDTH = 260;
-
 export const InfraDetailsGauges = ({
 	snapshot,
 }: {
@@ -28,42 +26,37 @@ export const InfraDetailsGauges = ({
 			direction={isSmall ? "column" : "row"}
 			spacing={theme.spacing(8)}
 			alignItems={"stretch"}
-			flexWrap={"wrap"}
-			useFlexGap
 		>
 			<DetailGauge
 				title={t("pages.infrastructure.gauges.memory.title")}
-				maxWidth={GAUGE_MAX_WIDTH}
+				maxWidth={260}
 				progress={(snapshot?.memory?.usage_percent || 0) * 100}
 				upperLabel={t("pages.infrastructure.gauges.memory.upperLabel")}
 				upperValue={prettyBytes(snapshot?.memory?.used_bytes || 0)}
 				lowerLabel={t("pages.infrastructure.gauges.memory.lowerLabel")}
 				lowerValue={prettyBytes(snapshot?.memory?.total_bytes || 0)}
-				flexBasis={isSmall ? "auto" : GAUGE_MAX_WIDTH}
 			/>
 			<DetailGauge
 				title={t("pages.infrastructure.gauges.cpu.title")}
-				maxWidth={GAUGE_MAX_WIDTH}
+				maxWidth={260}
 				progress={(snapshot?.cpu?.usage_percent || 0) * 100}
 				upperLabel={t("pages.infrastructure.gauges.cpu.upperLabel")}
 				upperValue={getFrequency(snapshot?.cpu?.current_frequency || 0)}
 				lowerLabel={t("pages.infrastructure.gauges.cpu.lowerLabel")}
 				lowerValue={getFrequency(snapshot?.cpu?.frequency || 0)}
-				flexBasis={isSmall ? "auto" : GAUGE_MAX_WIDTH}
 			/>
 			{snapshot?.disk?.map((disk, idx) => {
 				return (
 					<DetailGauge
-						key={disk?.device || `disk-${idx}`}
+						key={disk?.device || 0 + idx}
 						// title={`Disk ${idx} usage`}
 						title={t("pages.infrastructure.gauges.disk.title", { idx })}
-						maxWidth={GAUGE_MAX_WIDTH}
+						maxWidth={260}
 						progress={(disk.usage_percent || 0) * 100}
 						upperLabel={t("pages.infrastructure.gauges.disk.upperLabel")}
 						upperValue={prettyBytes(disk?.used_bytes || 0)}
 						lowerLabel={t("pages.infrastructure.gauges.disk.lowerLabel")}
 						lowerValue={prettyBytes(disk?.total_bytes || 0)}
-						flexBasis={isSmall ? "auto" : GAUGE_MAX_WIDTH}
 					/>
 				);
 			})}

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

@@ -10,7 +10,6 @@ import { useGet } from "@/Hooks/UseApi";
 import type { HardwareDetailsResponse } from "@/Types/Monitor";
 import { useIsAdmin } from "@/Hooks/useIsAdmin";
 import { useTranslation } from "react-i18next";
-import type { DateRange } from "@/Types/Query";
 
 const InfrastructureDetails = () => {
 	const { t } = useTranslation();
@@ -18,7 +17,7 @@ const InfrastructureDetails = () => {
 
 	const { monitorId } = useParams<{ monitorId: string }>();
 
-	const [dateRange, setDateRange] = useState<DateRange>("recent");
+	const [dateRange, setDateRange] = useState<string>("recent");
 	const [selectedTab, setSelectedTab] = useState<number>(0);
 
 	const monitorDetailsUrl = useMemo(() => {

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

@@ -331,7 +331,11 @@ export const InfraMonitorsTable = ({
 				onRowClick={(row) => {
 					navigate(`/infrastructure/${row.id}`);
 				}}
-				isRowSelected={(row) => isRowSelected(row.id)}
+				getRowSx={(row) => ({
+					backgroundColor: isRowSelected(row.id)
+						? theme.palette.action.selected
+						: "inherit",
+				})}
 			/>
 			<Pagination
 				component="div"

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

@@ -1,44 +1,274 @@
-import { MonitorListPage } from "@/Components/monitors";
-import { InfraMonitorsTable } from "@/Pages/Infrastructure/Monitors/Components/MonitorsTable";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import { MonitorBasePageWithStates, ColoredLabel } from "@/Components/design-elements";
+import { HeaderCreate } from "@/Components/common";
+import {
+	ControlsFilter,
+	HeaderMonitorsSummary,
+	BulkActionsBar,
+} from "@/Components/monitors";
+import { TextField, Dialog, Button } from "@/Components/inputs";
+import { Play, Pause } from "lucide-react";
 
-import { useMonitorListController } from "@/Hooks/useMonitorListController";
+import { useGet, useDelete } from "@/Hooks/UseApi";
+import { useIsAdmin } from "@/Hooks/useIsAdmin";
+import type { Monitor, MonitorsWithChecksResponse } from "@/Types/Monitor";
+import type { Tag } from "@/Types/Tag";
+import { useTheme } from "@mui/material";
+import { SPACING } from "@/Utils/Theme/constants";
+import { useState, useCallback, useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { useSelector, useDispatch } from "react-redux";
+import { setRowsPerPage } from "@/Features/UI/uiSlice.js";
+import type { RootState } from "@/Types/state";
+import { InfraMonitorsTable } from "./Components/MonitorsTable";
+import useDebounce from "@/Hooks/useDebounce";
+import { useBulkMonitorActions } from "@/Hooks/useBulkMonitorActions";
 
 const InfrastructureMonitors = () => {
-	const c = useMonitorListController({
-		types: ["hardware"],
-		checksLimit: 1,
-		refreshInterval: 5000,
-		rowsPerPageTable: "infrastructure",
-		rowsPerPageDefault: 5,
-	});
+	const { t } = useTranslation();
+	const theme = useTheme();
+	const isSmall = useMediaQuery(theme.breakpoints.down("md"));
+	const isAdmin = useIsAdmin();
+	const dispatch = useDispatch();
+
+	// Redux state
+	const rowsPerPage = useSelector(
+		(state: RootState) => state.ui?.infrastructure?.rowsPerPage ?? 5
+	);
+
+	// Local state
+	const [selectedStatus, setSelectedStatus] = useState<string>("");
+	const [selectedState, setSelectedState] = useState<string>("");
+	const [selectedTags, setSelectedTags] = useState<string[]>([]);
+	const [search, setSearch] = useState<string>("");
+	const [page, setPage] = useState<number>(0);
+	const [sortField, setSortField] = useState<string>("");
+	const [sortOrder, setSortOrder] = useState<"asc" | "desc">("asc");
+	const [selectedMonitor, setSelectedMonitor] = useState<Monitor | null>(null);
+
+	const { data: tags } = useGet<Tag[]>("/tags/team");
+
+	const isDialogOpen = Boolean(selectedMonitor);
+
+	const debouncedSearch = useDebounce<string>(search, 300);
+
+	const handleClearFilters = useCallback(() => {
+		setSelectedStatus("");
+		setSelectedState("");
+		setSelectedTags([]);
+		setSearch("");
+	}, []);
+
+	// Convert filter selections to API filter values
+	const toFilterStatus = useMemo(() => {
+		if (selectedStatus === "up") return "true";
+		if (selectedStatus === "down") return "false";
+		return undefined;
+	}, [selectedStatus]);
+
+	const toFilterActive = useMemo(() => {
+		if (selectedState === "active") return "true";
+		if (selectedState === "paused") return "false";
+		return undefined;
+	}, [selectedState]);
+
+	// Determine field and filter for the API request
+	// Priority: status > isActive > search
+	const filterLookup = new Map<string | undefined, string>([
+		[toFilterStatus, "status"],
+		[toFilterActive, "isActive"],
+	]);
+	const activeFilter = [...filterLookup].find(([key]) => key !== undefined);
+	const field = activeFilter?.[1] || (debouncedSearch ? "name" : sortField || undefined);
+	const filter = activeFilter?.[0] || debouncedSearch || undefined;
+
+	// Build URL for monitors with checks
+	const monitorsWithChecksUrl = useMemo(() => {
+		const params = new URLSearchParams();
+		params.append("type", "hardware");
+		selectedTags.forEach((tagId) => params.append("tags", tagId));
+		params.append("limit", "1");
+		if (page !== undefined) params.append("page", String(page));
+		if (rowsPerPage) params.append("rowsPerPage", String(rowsPerPage));
+		if (filter) params.append("filter", filter);
+		if (field) params.append("field", field);
+		if (sortOrder) params.append("order", sortOrder);
+		return `/monitors/team/with-checks?${params.toString()}`;
+	}, [page, rowsPerPage, filter, field, sortOrder, selectedTags]);
+
+	const {
+		data: monitorsWithChecksData,
+		isLoading: monitorsWithChecksLoading,
+		error: monitorsWithChecksError,
+		refetch,
+	} = useGet<MonitorsWithChecksResponse>(
+		monitorsWithChecksUrl,
+		{},
+		{ refreshInterval: 5000, keepPreviousData: true }
+	);
+
+	const { summary, count } = monitorsWithChecksData ?? { summary: null, count: 0 };
+	const isLoading = monitorsWithChecksLoading;
+
+	// Bulk actions
+	const {
+		selectedRows,
+		setSelectedRows,
+		handleBulkPause,
+		handleBulkResume,
+		handleCancelSelection,
+	} = useBulkMonitorActions(refetch, page);
+
+	// Check if any filters are active
+	const hasActiveFilters = Boolean(
+		selectedStatus || selectedState || selectedTags.length > 0 || search
+	);
+
+	// Show empty state only when there are truly no monitors (not just filtered out)
+	const effectiveTotalCount =
+		hasActiveFilters && (summary?.totalMonitors ?? 0) === 0
+			? 1
+			: (summary?.totalMonitors ?? 0);
+
+	// Delete hook
+	const { deleteFn, loading: isDeleting } = useDelete();
+
+	const handleConfirm = async () => {
+		if (!selectedMonitor) return;
+		await deleteFn(`/monitors/${selectedMonitor.id}`);
+		setSelectedMonitor(null);
+		refetch();
+	};
+
+	const handleCancel = () => {
+		setSelectedMonitor(null);
+	};
+
 	return (
-		<MonitorListPage
+		<MonitorBasePageWithStates
 			headerKey="infrastructure"
+			loading={isLoading}
+			error={monitorsWithChecksError}
+			totalCount={effectiveTotalCount}
 			page="infrastructure"
 			actionLink="/infrastructure/create"
-			controller={c}
-			bulkActions
-			showTypeFilter={false}
-			summaryProps={{ showBreached: true }}
 		>
-			<InfraMonitorsTable
-				monitors={c.monitors || []}
-				tags={c.tags || []}
-				refetch={c.refetch}
-				setSelectedMonitor={c.setSelectedMonitor}
-				count={c.count || 0}
-				page={c.page}
-				setPage={c.setPage}
-				rowsPerPage={c.rowsPerPage}
-				sortField={c.sortField}
-				setSortField={c.setSortField}
-				sortOrder={c.sortOrder}
-				setSortOrder={c.setSortOrder}
-				setRowsPerPage={c.handleSetRowsPerPage}
-				selectedRows={c.selectedRows}
-				onSelectionChange={c.setSelectedRows}
+			<HeaderCreate
+				path="/infrastructure/create"
+				isLoading={isLoading}
+				isAdmin={isAdmin}
 			/>
-		</MonitorListPage>
+			<HeaderMonitorsSummary
+				summary={summary}
+				showBreached={true}
+			/>
+			<Stack
+				direction={isSmall ? "column" : "row"}
+				justifyContent={isSmall ? "flex-start" : "space-between"}
+				gap={theme.spacing(4)}
+			>
+				<ControlsFilter
+					showTypes={false}
+					selectedStatus={selectedStatus}
+					setSelectedStatus={setSelectedStatus}
+					selectedState={selectedState}
+					setSelectedState={setSelectedState}
+					tagOptions={tags ?? []}
+					selectedTags={selectedTags}
+					setSelectedTags={setSelectedTags}
+					onClearFilters={handleClearFilters}
+				/>
+				<TextField
+					placeholder={t("pages.uptime.filters.search.placeholder")}
+					value={search}
+					onChange={(event) => {
+						setSearch(event.target.value);
+					}}
+				/>
+			</Stack>
+
+			{selectedTags.length > 0 && (
+				<Stack
+					direction={isSmall ? "column" : "row"}
+					alignItems={isSmall ? "flex-start" : "center"}
+					flexWrap="wrap"
+					gap={theme.spacing(SPACING.XL)}
+				>
+					<Typography color={theme.palette.text.secondary}>
+						{t("pages.uptime.filters.activeTags")}
+					</Typography>
+					{selectedTags.map((tagId) => {
+						const tag = tags?.find((t) => t.id === tagId);
+						if (!tag) return null;
+						return (
+							<ColoredLabel
+								key={tag.id}
+								text={tag.name}
+								color={tag.color}
+							/>
+						);
+					})}
+				</Stack>
+			)}
+
+			{!isLoading && (
+				<BulkActionsBar
+					selectedCount={selectedRows.length}
+					onCancel={handleCancelSelection}
+				>
+					<Button
+						size="small"
+						startIcon={<Play size={16} />}
+						onClick={handleBulkResume}
+					>
+						{t("common.buttons.resume")}
+					</Button>
+					<Button
+						size="small"
+						startIcon={<Pause size={16} />}
+						onClick={handleBulkPause}
+					>
+						{t("common.buttons.pause")}
+					</Button>
+				</BulkActionsBar>
+			)}
+
+			<InfraMonitorsTable
+				monitors={monitorsWithChecksData?.monitors || []}
+				tags={tags ?? []}
+				refetch={refetch}
+				setSelectedMonitor={setSelectedMonitor}
+				sortField={sortField}
+				setSortField={setSortField}
+				sortOrder={sortOrder}
+				setSortOrder={setSortOrder}
+				count={count || 0}
+				page={page}
+				setPage={setPage}
+				rowsPerPage={rowsPerPage}
+				setRowsPerPage={(value: number) => {
+					dispatch(
+						setRowsPerPage({
+							value,
+							table: "infrastructure",
+						})
+					);
+					setPage(0);
+				}}
+				selectedRows={selectedRows}
+				onSelectionChange={setSelectedRows}
+			/>
+			<Dialog
+				open={isDialogOpen}
+				title={t("common.dialogs.delete.title")}
+				content={t("common.dialogs.delete.description")}
+				onConfirm={handleConfirm}
+				onCancel={handleCancel}
+				loading={isDeleting}
+			/>
+		</MonitorBasePageWithStates>
 	);
 };
 

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

@@ -1,8 +1,7 @@
 import Stack from "@mui/material/Stack";
-import Typography from "@mui/material/Typography";
 import { logger } from "@/Utils/logger";
 import { SPACING, LAYOUT } from "@/Utils/Theme/constants";
-import { BasePage, ColoredLabel, ConfigBox } from "@/Components/design-elements";
+import { BasePage, ConfigBox } from "@/Components/design-elements";
 import { Button } from "@/Components/inputs";
 
 import { useTheme } from "@mui/material";
@@ -16,7 +15,6 @@ import { useGet, usePost, usePatch } from "@/Hooks/UseApi";
 import { mutate } from "swr";
 import { useParams, useNavigate } from "react-router-dom";
 import type { Monitor } from "@/Types/Monitor";
-import type { Tag } from "@/Types/Tag";
 import { useForm, FormProvider } from "react-hook-form";
 import { useEffect } from "react";
 import { zodResolver } from "@hookform/resolvers/zod/dist/zod.js";
@@ -43,7 +41,6 @@ const CreateMaintenanceWindowPage = () => {
 	);
 
 	const { data: monitors } = useGet<Monitor[]>("/monitors/team");
-	const { data: tags } = useGet<Tag[]>("/tags/team");
 
 	const { post, loading: isPosting } = usePost();
 	const { patch, loading: isPatching } = usePatch();
@@ -206,26 +203,6 @@ const CreateMaintenanceWindowPage = () => {
 								"pages.maintenanceWindow.form.startTime.monitors.option.addMonitors.label"
 							)}
 							options={monitors ?? []}
-							renderOptionContent={(monitor) => (
-								<Stack
-									direction="row"
-									alignItems="center"
-									gap={theme.spacing(2)}
-									flexWrap="wrap"
-								>
-									<Typography>{monitor.name}</Typography>
-									{monitor.tags.map((tagId) => {
-										const tag = tags?.find(({ id }) => id === tagId);
-										return tag ? (
-											<ColoredLabel
-												key={tag.id}
-												text={tag.name}
-												color={tag.color}
-											/>
-										) : null;
-									})}
-								</Stack>
-							)}
 						/>
 					}
 				/>

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

@@ -15,13 +15,12 @@ import { useGet } from "@/Hooks/UseApi";
 import { useParams } from "react-router-dom";
 import { useTheme } from "@mui/material";
 import { useState, useMemo } from "react";
-import type { DateRange } from "@/Types/Query";
 
 const PageSpeedDetails = () => {
 	const { monitorId } = useParams();
 	const isAdmin = useIsAdmin();
 	const theme = useTheme();
-	const [dateRange, setDateRange] = useState<DateRange>("day");
+	const [dateRange, setDateRange] = useState<string>("day");
 
 	const monitorDetailsUrl = useMemo(() => {
 		if (!monitorId) {

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

@@ -1,57 +1,229 @@
-import { PageSpeedKeyPriorityFallback } from "@/Components/design-elements";
+import {
+	MonitorBasePageWithStates,
+	PageSpeedKeyPriorityFallback,
+	ColoredLabel,
+} from "@/Components/design-elements";
+import { Dialog, TextField } from "@/Components/inputs";
+import { HeaderCreate } from "@/Components/common";
 import { PageSpeedMonitorsTable } from "@/Pages/PageSpeed/Monitors/Components/PageSpeedMonitorsTable";
+import type { Monitor } from "@/Types/Monitor";
+import type { Tag } from "@/Types/Tag";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import { useTheme } from "@mui/material";
+import { SPACING } from "@/Utils/Theme/constants";
+
+import { useTranslation } from "react-i18next";
+import { useCallback, useMemo, useState } from "react";
 import { useIsAdmin } from "@/Hooks/useIsAdmin";
-import { useGet } from "@/Hooks/UseApi";
+import { useGet, useDelete } from "@/Hooks/UseApi";
+import useDebounce from "@/Hooks/useDebounce";
+import type { MonitorsWithChecksResponse } from "@/Types/Monitor";
 import type { AppSettingsResponse } from "@/Types/Settings";
-import { MonitorListPage } from "@/Components/monitors";
-import { useMonitorListController } from "@/Hooks/useMonitorListController";
+import { ControlsFilter, HeaderMonitorsSummary } from "@/Components/monitors";
 
 const PageSpeedMonitorsPage = () => {
+	const { t } = useTranslation();
+	const theme = useTheme();
+	const isSmall = useMediaQuery(theme.breakpoints.down("md"));
 	const isAdmin = useIsAdmin();
+	const { deleteFn, loading: isDeleting } = useDelete();
+
+	const settingsUrl = "/settings";
 	const {
 		data: settingsData,
 		isLoading: settingsIsLoading,
 		error: settingsError,
-	} = useGet<AppSettingsResponse>("/settings");
+	} = useGet<AppSettingsResponse>(settingsUrl);
 
-	const c = useMonitorListController({
-		types: ["pagespeed"],
-		checksLimit: 25,
-		refreshInterval: 30000,
-		rowsPerPageTable: "pagespeed",
-		rowsPerPageDefault: 10,
-		initialSortField: "name",
-	});
+	const [selectedMonitor, setSelectedMonitor] = useState<Monitor | null>(null);
+	const isDialogOpen = Boolean(selectedMonitor);
+	const [sortField, setSortField] = useState<string>("name");
+	const [sortOrder, setSortOrder] = useState<"asc" | "desc">("asc");
+	const [page, setPage] = useState(0);
+	const [rowsPerPage, setRowsPerPage] = useState(10);
+	const [selectedTags, setSelectedTags] = useState<string[]>([]);
+	const [selectedStatus, setSelectedStatus] = useState<string>("");
+	const [selectedState, setSelectedState] = useState<string>("");
+	const [search, setSearch] = useState<string>("");
+
+	const debouncedSearch = useDebounce<string>(search, 300);
+
+	// Status: pass "up"/"down" directly to the API
+	// State: "active" -> true, "paused" -> false
+	const toFilterStatus = useMemo(() => {
+		if (selectedStatus === "up") return "up";
+		if (selectedStatus === "down") return "down";
+		return undefined;
+	}, [selectedStatus]);
+
+	const toFilterActive = useMemo(() => {
+		if (selectedState === "active") return "true";
+		if (selectedState === "paused") return "false";
+		return undefined;
+	}, [selectedState]);
+
+	// Priority: status > isActive > search > sort
+	const filterLookup = new Map<string | undefined, string>([
+		[toFilterStatus, "status"],
+		[toFilterActive, "isActive"],
+	]);
+	const activeFilter = [...filterLookup].find(([key]) => key !== undefined);
+	const field = activeFilter?.[1] || (debouncedSearch ? "name" : sortField || undefined);
+	const filter = activeFilter?.[0] || debouncedSearch;
+
+	const { data: tags } = useGet<Tag[]>("/tags/team");
+
+	const monitorsWithChecksUrl = useMemo(() => {
+		const params = new URLSearchParams();
+		params.append("type", "pagespeed");
+		selectedTags.forEach((tagId) => params.append("tags", tagId));
+		params.append("limit", "25");
+		if (page !== undefined) params.append("page", String(page));
+		if (rowsPerPage) params.append("rowsPerPage", String(rowsPerPage));
+		if (filter) params.append("filter", filter);
+		if (field) params.append("field", field);
+		if (sortOrder) params.append("order", sortOrder);
+		return `/monitors/team/with-checks?${params.toString()}`;
+	}, [page, rowsPerPage, sortOrder, selectedTags, filter, field]);
+
+	const {
+		data: monitorsData,
+		isLoading: monitorsIsLoading,
+		error: monitorsError,
+		refetch,
+	} = useGet<MonitorsWithChecksResponse>(
+		monitorsWithChecksUrl,
+		{},
+		{ refreshInterval: 30000 }
+	);
+
+	const monitors = monitorsData?.monitors;
+	const monitorsCount = monitorsData?.count ?? 0;
+	const summary = monitorsData?.summary ?? null;
+
+	const isLoading = monitorsIsLoading || settingsIsLoading;
 
 	const showApiKeyWarning = isAdmin && settingsData && !settingsData.pagespeedKeySet;
 
+	const handleConfirm = async () => {
+		if (!selectedMonitor) return;
+		await deleteFn(`/monitors/${selectedMonitor.id}`);
+		setSelectedMonitor(null);
+		refetch();
+	};
+
+	const handleCancel = () => {
+		setSelectedMonitor(null);
+	};
+
+	const handleClearFilters = useCallback(() => {
+		setSelectedStatus("");
+		setSelectedState("");
+		setSelectedTags([]);
+		setSearch("");
+	}, []);
+
+	const hasActiveFilters = Boolean(
+		selectedStatus || selectedState || selectedTags.length > 0 || search
+	);
+
+	const effectiveTotalCount =
+		hasActiveFilters && (summary?.totalMonitors ?? 0) === 0
+			? 1
+			: (summary?.totalMonitors ?? 0);
+
 	return (
-		<MonitorListPage
+		<MonitorBasePageWithStates
 			headerKey="pageSpeed"
+			loading={isLoading}
+			error={monitorsError || settingsError}
+			totalCount={effectiveTotalCount}
 			page="pageSpeed"
 			actionLink="/pagespeed/create"
-			controller={c}
-			showTypeFilter={false}
-			extraLoading={settingsIsLoading}
-			extraError={settingsError}
 			priorityFallback={showApiKeyWarning ? <PageSpeedKeyPriorityFallback /> : undefined}
 		>
-			<PageSpeedMonitorsTable
-				monitors={c.monitors || []}
-				tags={c.tags || []}
-				refetch={c.refetch}
-				setSelectedMonitor={c.setSelectedMonitor}
-				count={c.count || 0}
-				page={c.page}
-				setPage={c.setPage}
-				rowsPerPage={c.rowsPerPage}
-				sortField={c.sortField}
-				setSortField={c.setSortField}
-				sortOrder={c.sortOrder}
-				setSortOrder={c.setSortOrder}
-				setRowsPerPage={c.handleSetRowsPerPage}
+			<HeaderCreate
+				path="/pagespeed/create"
+				isLoading={isLoading}
+				isAdmin={isAdmin}
 			/>
-		</MonitorListPage>
+			<HeaderMonitorsSummary summary={summary} />
+
+			<Stack
+				direction={isSmall ? "column" : "row"}
+				justifyContent={isSmall ? "flex-start" : "space-between"}
+				gap={theme.spacing(4)}
+			>
+				<ControlsFilter
+					showTypes={false}
+					selectedStatus={selectedStatus}
+					setSelectedStatus={setSelectedStatus}
+					selectedState={selectedState}
+					setSelectedState={setSelectedState}
+					tagOptions={tags ?? []}
+					selectedTags={selectedTags}
+					setSelectedTags={setSelectedTags}
+					onClearFilters={handleClearFilters}
+				/>
+				<TextField
+					placeholder={t("pages.uptime.filters.search.placeholder")}
+					value={search}
+					onChange={(event) => {
+						setSearch(event.target.value);
+					}}
+				/>
+			</Stack>
+
+			{selectedTags.length > 0 && (
+				<Stack
+					direction={isSmall ? "column" : "row"}
+					alignItems={isSmall ? "flex-start" : "center"}
+					flexWrap="wrap"
+					gap={theme.spacing(SPACING.XL)}
+				>
+					<Typography color={theme.palette.text.secondary}>
+						{t("pages.uptime.filters.activeTags")}
+					</Typography>
+					{selectedTags.map((tagId) => {
+						const tag = tags?.find((t) => t.id === tagId);
+						if (!tag) return null;
+						return (
+							<ColoredLabel
+								key={tag.id}
+								text={tag.name}
+								color={tag.color}
+							/>
+						);
+					})}
+				</Stack>
+			)}
+
+			<PageSpeedMonitorsTable
+				monitors={monitors || []}
+				tags={tags ?? []}
+				refetch={refetch}
+				setSelectedMonitor={setSelectedMonitor}
+				sortField={sortField}
+				setSortField={setSortField}
+				sortOrder={sortOrder}
+				setSortOrder={setSortOrder}
+				count={monitorsCount || 0}
+				page={page}
+				setPage={setPage}
+				rowsPerPage={rowsPerPage}
+				setRowsPerPage={setRowsPerPage}
+			/>
+			<Dialog
+				open={isDialogOpen}
+				title={t("common.dialogs.delete.title")}
+				content={t("common.dialogs.delete.description")}
+				onConfirm={handleConfirm}
+				onCancel={handleCancel}
+				loading={isDeleting}
+			/>
+		</MonitorBasePageWithStates>
 	);
 };
 

client/src/Pages/Proxies/components/ProxiesTable.tsx

@@ -1,103 +0,0 @@
-import { ActionsMenu, type ActionMenuItem } from "@/Components/actions-menu";
-import Typography from "@mui/material/Typography";
-import type { Header } from "@/Components/design-elements/Table";
-import { Table } from "@/Components/design-elements";
-import { Pagination } from "@/Components/design-elements/Table";
-import { useClientPagination } from "@/Hooks/useClientPagination";
-
-import type { ProxyResponse } from "@/Types/Proxy";
-import { useNavigate } from "react-router";
-import { useTranslation } from "react-i18next";
-import { useTheme } from "@mui/material";
-
-interface ProxiesTableProps {
-	proxies: ProxyResponse[];
-	setSelectedProxy: Function;
-}
-
-export const ProxiesTable = ({ proxies, setSelectedProxy }: ProxiesTableProps) => {
-	const navigate = useNavigate();
-	const { t } = useTranslation();
-	const theme = useTheme();
-	const { pagedRows, paginationProps } = useClientPagination(proxies);
-
-	const getActions = (proxy: ProxyResponse): ActionMenuItem[] => {
-		return [
-			{
-				id: 1,
-				label: t("pages.common.monitors.actions.configure"),
-				action: () => {
-					navigate(`/proxies/configure/${proxy.id}`);
-				},
-				closeMenu: true,
-			},
-
-			{
-				id: 2,
-				label: (
-					<Typography color={theme.palette.error.main}>
-						{t("pages.common.monitors.actions.delete")}
-					</Typography>
-				),
-				action: async () => {
-					setSelectedProxy(proxy);
-				},
-				closeMenu: true,
-			},
-		];
-	};
-
-	const getHeaders = () => {
-		const headers: Header<ProxyResponse>[] = [
-			{
-				id: "name",
-				content: t("common.table.headers.name"),
-				render: (row) => {
-					return <Typography>{row?.name}</Typography>;
-				},
-			},
-			{
-				id: "protocol",
-				content: t("pages.proxies.table.headers.protocol"),
-				render: (row) => {
-					return <Typography>{row?.protocol}</Typography>;
-				},
-			},
-			{
-				id: "host",
-				content: t("pages.proxies.table.headers.host"),
-				render: (row) => {
-					return <Typography>{row?.host}</Typography>;
-				},
-			},
-			{
-				id: "port",
-				content: t("pages.proxies.table.headers.port"),
-				render: (row) => {
-					return <Typography>{row?.port}</Typography>;
-				},
-			},
-			{
-				id: "actions",
-				content: t("common.table.headers.actions"),
-				render: (row) => {
-					return <ActionsMenu items={getActions(row)} />;
-				},
-			},
-		];
-		return headers;
-	};
-
-	return (
-		<>
-			<Table
-				headers={getHeaders()}
-				data={pagedRows}
-				onRowClick={(row) => {
-					navigate(`/proxies/configure/${row.id}`);
-				}}
-			/>
-			{proxies.length > 0 && <Pagination {...paginationProps} />}
-		</>
-	);
-};

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

@@ -1,213 +0,0 @@
-import { BasePage, ConfigBox } from "@/Components/design-elements";
-import { LAYOUT } from "@/Utils/Theme/constants";
-import { Button, FieldLabel } from "@/Components/inputs";
-import Box from "@mui/material/Box";
-import Stack from "@mui/material/Stack";
-import { useTheme } from "@mui/material/styles";
-
-import { useEffect, useState } from "react";
-import { useParams } from "react-router-dom";
-import { useNavigate } from "react-router-dom";
-import { useForm, FormProvider } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { mutate } from "swr";
-import { useGet, usePost, usePatch } from "@/Hooks/UseApi";
-import type { ProxyFormData } from "@/Validation/proxy";
-import { ProxyProtocols, type ProxyResponse } from "@/Types/Proxy";
-import { useTranslation } from "react-i18next";
-import { useProxiesForm } from "@/Hooks/useProxiesForm";
-import { FormTextField } from "@/Components/inputs/forms/FormTextField";
-import { FormSelectField } from "@/Components/inputs/forms/FormSelectField";
-import { useMemo } from "react";
-import { FormNumberField } from "@/Components/inputs/forms/FormNumberField";
-const ProxiesCreatePage = () => {
-	const { t } = useTranslation();
-	const theme = useTheme();
-	const navigate = useNavigate();
-	const { proxyId } = useParams<{ proxyId: string }>();
-	const isEditMode = Boolean(proxyId);
-
-	const { data: existingProxy } = useGet<ProxyResponse>(
-		isEditMode ? `/proxies/${proxyId}` : null
-	);
-
-	const { post, loading: isSubmitting } = usePost<ProxyFormData, ProxyResponse>();
-	const { patch, loading: isPatching } = usePatch<ProxyFormData, ProxyResponse>();
-
-	const { schema, defaults } = useProxiesForm({ data: existingProxy });
-
-	const form = useForm<ProxyFormData>({
-		resolver: zodResolver(schema),
-		defaultValues: defaults,
-	});
-
-	const { reset, handleSubmit } = form;
-
-	const isPasswordSet = existingProxy?.hasPassword ?? false;
-	const [passwordHasBeenReset, setPasswordHasBeenReset] = useState(false);
-
-	const handleResetPassword = () => {
-		form.setValue("password", "");
-		setPasswordHasBeenReset(true);
-	};
-
-	const isUsernameSet = Boolean(existingProxy?.username);
-	const [usernameHasBeenReset, setUsernameHasBeenReset] = useState(false);
-
-	const handleResetUsername = () => {
-		form.setValue("username", "");
-		setUsernameHasBeenReset(true);
-	};
-
-	const protocolOptions = useMemo(
-		() =>
-			ProxyProtocols.map((protocol) => ({
-				value: protocol,
-				label: protocol,
-			})),
-		[]
-	);
-
-	useEffect(() => {
-		reset(defaults);
-	}, [defaults, reset]);
-
-	const onSubmit = async (data: ProxyFormData) => {
-		const payload: ProxyFormData & { clearPassword?: boolean; clearUsername?: boolean } =
-			{
-				...data,
-			};
-		// Don't send password/username if one is set and the user hasn't clicked reset
-		if (isPasswordSet && !passwordHasBeenReset) {
-			delete payload.password;
-		} else if (passwordHasBeenReset && !payload.password) {
-			payload.clearPassword = true;
-		}
-		if (isUsernameSet && !usernameHasBeenReset) {
-			delete payload.username;
-		} else if (usernameHasBeenReset && !payload.username) {
-			payload.clearUsername = true;
-		}
-		const result = isEditMode
-			? await patch(`/proxies/${proxyId}`, payload)
-			: await post("/proxies", payload);
-		if (result?.success) {
-			await mutate((key) => typeof key === "string" && key.startsWith("/proxies"));
-			navigate("/proxies");
-		}
-	};
-
-	return (
-		<FormProvider {...form}>
-			<BasePage
-				component="form"
-				onSubmit={handleSubmit(onSubmit)}
-			>
-				<ConfigBox
-					title={t("pages.proxies.form.name.title")}
-					subtitle={t("pages.proxies.form.name.description")}
-					rightContent={
-						<FormTextField
-							name="name"
-							fieldLabel={t("pages.proxies.form.name.optionName")}
-							placeholder={t("pages.proxies.form.name.placeholder")}
-						/>
-					}
-				/>
-				<ConfigBox
-					title={t("pages.proxies.form.server.title")}
-					subtitle={t("pages.proxies.form.server.description")}
-					rightContent={
-						<Stack gap={theme.spacing(LAYOUT.MD)}>
-							<FormSelectField
-								name="protocol"
-								fieldLabel={t("pages.proxies.form.server.option.protocol.label")}
-								options={protocolOptions}
-							/>
-							<FormTextField
-								name="host"
-								fieldLabel={t("pages.proxies.form.server.option.host.label")}
-								placeholder={t("pages.proxies.form.server.option.host.placeholder")}
-							/>
-							<FormNumberField
-								name="port"
-								fieldLabel={t("pages.proxies.form.server.option.port.label")}
-							/>
-						</Stack>
-					}
-				/>
-
-				<ConfigBox
-					title={t("pages.proxies.form.auth.title")}
-					subtitle={t("pages.proxies.form.auth.description")}
-					rightContent={
-						<Stack gap={theme.spacing(LAYOUT.MD)}>
-							{(isUsernameSet === false || usernameHasBeenReset === true) && (
-								<FormTextField
-									name="username"
-									fieldLabel={t("pages.proxies.form.auth.option.username.label")}
-									placeholder={t("pages.proxies.form.auth.option.username.placeholder")}
-								/>
-							)}
-
-							{isUsernameSet === true && usernameHasBeenReset === false && (
-								<Box>
-									<FieldLabel>
-										{t("pages.proxies.form.auth.option.username.labelSet")}
-									</FieldLabel>
-									<Button
-										onClick={handleResetUsername}
-										variant="contained"
-										color="error"
-									>
-										{t("common.buttons.reset")}
-									</Button>
-								</Box>
-							)}
-
-							{(isPasswordSet === false || passwordHasBeenReset === true) && (
-								<FormTextField
-									name="password"
-									type="password"
-									fieldLabel={t("pages.proxies.form.auth.option.password.label")}
-								/>
-							)}
-
-							{isPasswordSet === true && passwordHasBeenReset === false && (
-								<Box>
-									<FieldLabel>
-										{t("pages.proxies.form.auth.option.password.labelSet")}
-									</FieldLabel>
-									<Button
-										onClick={handleResetPassword}
-										variant="contained"
-										color="error"
-									>
-										{t("common.buttons.reset")}
-									</Button>
-								</Box>
-							)}
-						</Stack>
-					}
-				/>
-
-				<Stack
-					direction="row"
-					justifyContent="flex-end"
-					spacing={theme.spacing(2)}
-				>
-					<Button
-						loading={isSubmitting || isPatching}
-						type="submit"
-						variant="contained"
-						color="primary"
-					>
-						{t("common.buttons.save")}
-					</Button>
-				</Stack>
-			</BasePage>
-		</FormProvider>
-	);
-};
-
-export default ProxiesCreatePage;

client/src/Pages/Proxies/index.tsx

@@ -1,72 +0,0 @@
-import { BasePageWithStates } from "@/Components/design-elements";
-import { ProxiesTable } from "@/Pages/Proxies/components/ProxiesTable";
-import { Dialog } from "@/Components/inputs";
-import { HeaderCreate } from "@/Components/common";
-
-import { useState } from "react";
-import { useGet, useDelete } from "@/Hooks/UseApi";
-import { useTranslation } from "react-i18next";
-import type { ProxyResponse } from "@/Types/Proxy";
-import { useIsAdmin } from "@/Hooks/useIsAdmin";
-
-const ProxiesPage = () => {
-	const { t } = useTranslation();
-	const isAdmin = useIsAdmin();
-
-	const [selectedProxy, setSelectedProxy] = useState<ProxyResponse | null>(null);
-	const isDialogOpen = Boolean(selectedProxy);
-
-	const {
-		data: proxies,
-		isLoading,
-		isValidating,
-		error,
-		refetch,
-	} = useGet<ProxyResponse[]>("/proxies/team", {}, { keepPreviousData: true });
-
-	const { deleteFn, loading: isDeleting } = useDelete();
-
-	const handleConfirm = async () => {
-		if (!selectedProxy) return;
-		await deleteFn(`/proxies/${selectedProxy.id}`);
-		setSelectedProxy(null);
-		refetch();
-	};
-
-	const handleCancel = () => {
-		setSelectedProxy(null);
-	};
-
-	return (
-		<BasePageWithStates
-			headerKey="proxies"
-			page={t("pages.proxies.fallback.title")}
-			description={t("pages.proxies.fallback.description")}
-			loading={isLoading || isValidating}
-			error={!!error}
-			totalCount={proxies?.length ?? 0}
-			actionButtonText={t("pages.proxies.fallback.actionButton")}
-			actionLink="/proxies/create"
-		>
-			<HeaderCreate
-				path="/proxies/create"
-				isLoading={isLoading || isValidating}
-				isAdmin={isAdmin}
-			/>
-			<ProxiesTable
-				proxies={proxies ?? []}
-				setSelectedProxy={setSelectedProxy}
-			/>
-			<Dialog
-				open={isDialogOpen}
-				title={t("common.dialogs.delete.title")}
-				content={t("common.dialogs.delete.description")}
-				onConfirm={handleConfirm}
-				onCancel={handleCancel}
-				loading={isDeleting}
-			/>
-		</BasePageWithStates>
-	);
-};
-
-export default ProxiesPage;

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

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

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

@@ -1,9 +1,4 @@
-import {
-	BasePage,
-	ColoredLabel,
-	ConfigBox,
-	StepProgress,
-} from "@/Components/design-elements";
+import { BasePage, ConfigBox, StepProgress } from "@/Components/design-elements";
 import Stack from "@mui/material/Stack";
 import { logger } from "@/Utils/logger";
 import { LAYOUT } from "@/Utils/Theme/constants";
@@ -21,12 +16,12 @@ import { statusPageStepCount, statusPageStepFieldsFor } from "@/Validation/statu
 import { useGet, usePost, usePut, useDelete } from "@/Hooks/UseApi";
 import type { Monitor } from "@/Types/Monitor";
 import { SelectableMonitorTypes } from "@/Types/Monitor";
-import type { Tag } from "@/Types/Tag";
 import type { MonitorDisplayType, StatusPageResponse } from "@/Types/StatusPage";
 import { getMonitorTypeLabel } from "@/Types/StatusPage";
 import { timezoneOptions } from "@/Utils/timezoneOptions";
 import { useNavigate, useParams } from "react-router-dom";
 import { mutate } from "swr";
+import axios from "axios";
 import { HeaderConfigStatusControls } from "./Components/HeaderConfigStatusControls";
 import { ThemePicker } from "./Components/ThemePicker";
 import { FormSwitchField } from "@/Components/inputs/forms/FormSwitchField";
@@ -58,9 +53,7 @@ const LogoUploadField = () => {
 		<ImageUpload
 			src={field.value?.data}
 			onChange={(file) => {
-				field.onChange(
-					file ? { data: file.src, contentType: file.file.type, file: file.file } : null
-				);
+				field.onChange(file ? { data: file.src, contentType: file.file.type } : null);
 			}}
 		/>
 	);
@@ -93,8 +86,6 @@ const CreateStatusPage = () => {
 
 	const { data: monitorsResponse } = useGet<Monitor[]>(monitorsUrl);
 	const monitors = useMemo(() => monitorsResponse ?? [], [monitorsResponse]);
-	const { data: tagsResponse } = useGet<Tag[]>("/tags/team");
-	const tags = useMemo(() => tagsResponse ?? [], [tagsResponse]);
 
 	const { post, loading: isSubmittingPost } = usePost();
 	const { put, loading: isSubmittingPut } = usePut();
@@ -205,8 +196,18 @@ const CreateStatusPage = () => {
 		if (data.logo === null) {
 			// Signal to remove the logo
 			fd.append("removeLogo", "true");
-		} else if (data.logo?.file) {
-			fd.append("logo", data.logo.file);
+		} else if (data.logo?.data && data.logo.data !== "") {
+			if (data.logo.data.startsWith("blob:")) {
+				try {
+					const imageResult = await axios.get(data.logo.data, {
+						responseType: "blob",
+					});
+					fd.append("logo", imageResult.data);
+					URL.revokeObjectURL(data.logo.data);
+				} catch (e) {
+					logger.error("Failed to fetch logo blob", e instanceof Error ? e : undefined);
+				}
+			}
 		}
 
 		let result;
@@ -307,28 +308,6 @@ const CreateStatusPage = () => {
 									"pages.statusPages.form.monitors.option.monitors.placeholder"
 								)}
 								options={monitors}
-								renderOptionContent={(monitor) => (
-									<Stack
-										direction="row"
-										alignItems="center"
-										gap={theme.spacing(2)}
-										flexWrap="wrap"
-									>
-										<Typography>
-											{`${monitor.name} (${getMonitorTypeLabel(monitor.type, t)})`}
-										</Typography>
-										{monitor.tags.map((tagId) => {
-											const tag = tags.find(({ id }) => id === tagId);
-											return tag ? (
-												<ColoredLabel
-													key={tag.id}
-													text={tag.name}
-													color={tag.color}
-												/>
-											) : null;
-										})}
-									</Stack>
-								)}
 								renderRow={(monitor) => (
 									<Typography flexGrow={1}>
 										{`${monitor.name} (${getMonitorTypeLabel(monitor.type, t)})`}

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

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

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

@@ -113,7 +113,6 @@ const StatusPageView = () => {
 		apiUrl,
 		{},
 		{
-			keepPreviousData: true,
 			refreshInterval: range === "latest" ? 10000 : 60000,
 		}
 	);

client/src/Pages/StatusPage/Status/themes/bold/styles.ts

@@ -1,5 +1,5 @@
 import type { SxProps, Theme } from "@mui/material/styles";
-import { mixSeverityColor, type StatusPageThemeTokens } from "../tokens";
+import type { StatusPageThemeTokens } from "../tokens";
 import { type OverallTone, toneColor, toneSoft } from "../shared/overallStatus";
 import { BOLD_SANS_STACK, MONO_STACK } from "../shared/fontStacks";
 import { MAX_RECENT_CHECKS } from "@/Types/Monitor";
@@ -34,9 +34,9 @@ export interface BoldStyles {
 	monitorUrl: SxProps<Theme>;
 	badge: (tone: OverallTone) => SxProps<Theme>;
 	heatmap: SxProps<Theme>;
-	heatmapCell: (kind: BoldHeatCell, severity?: number) => SxProps<Theme>;
+	heatmapCell: (kind: BoldHeatCell) => SxProps<Theme>;
 	histogram: SxProps<Theme>;
-	bar: (kind: BoldBarKind, heightPct: number, severity?: number) => SxProps<Theme>;
+	bar: (kind: BoldBarKind, heightPct: number) => SxProps<Theme>;
 	chartStats: SxProps<Theme>;
 	infra: SxProps<Theme>;
 	infraEmpty: SxProps<Theme>;
@@ -327,12 +327,9 @@ export const boldStyles = (
 			gap: { xs: "1px", md: "3px" },
 			height: 48,
 		},
-		heatmapCell: (kind, severity = 1) => ({
+		heatmapCell: (kind) => ({
 			borderRadius: "3px",
-			background:
-				kind === "degraded"
-					? mixSeverityColor(tokens.up, tokens.degraded, severity)
-					: heatCellBg[kind],
+			background: heatCellBg[kind],
 			boxShadow: heatCellShadow[kind],
 			opacity: kind === "empty" ? 0.4 : 1,
 			transition: "transform 0.15s",
@@ -347,11 +344,8 @@ export const boldStyles = (
 			alignItems: "flex-end",
 			height: 48,
 		},
-		bar: (kind, heightPct, severity = 1) => ({
-			background:
-				kind === "degraded"
-					? mixSeverityColor(tokens.up, tokens.degraded, severity)
-					: barBg[kind],
+		bar: (kind, heightPct) => ({
+			background: barBg[kind],
 			borderRadius: "3px",
 			minHeight: 4,
 			opacity: kind === "empty" ? 0.4 : 1,

client/src/Pages/StatusPage/Status/themes/editorial/styles.ts

@@ -1,5 +1,5 @@
 import type { SxProps, Theme } from "@mui/material/styles";
-import { mixSeverityColor, type StatusPageThemeTokens } from "../tokens";
+import type { StatusPageThemeTokens } from "../tokens";
 import { type OverallTone, toneColor, toneSoft } from "../shared/overallStatus";
 import {
 	EDITORIAL_SECONDARY_SANS_STACK,
@@ -38,9 +38,9 @@ export interface EditorialStyles {
 	monitorUrl: SxProps<Theme>;
 	badge: (tone: OverallTone) => SxProps<Theme>;
 	heatmap: SxProps<Theme>;
-	heatmapCell: (kind: EditorialHeatCell, severity?: number) => SxProps<Theme>;
+	heatmapCell: (kind: EditorialHeatCell) => SxProps<Theme>;
 	histogram: SxProps<Theme>;
-	bar: (kind: EditorialBarKind, heightPct: number, severity?: number) => SxProps<Theme>;
+	bar: (kind: EditorialBarKind, heightPct: number) => SxProps<Theme>;
 	chartStats: SxProps<Theme>;
 	infra: SxProps<Theme>;
 	infraEmpty: SxProps<Theme>;
@@ -272,11 +272,8 @@ export const editorialStyles = (
 			gap: { xs: "1px", md: "2px" },
 			height: 40,
 		},
-		heatmapCell: (kind, severity = 1) => ({
-			background:
-				kind === "degraded"
-					? mixSeverityColor(tokens.up, tokens.degraded, severity)
-					: heatCellBg[kind],
+		heatmapCell: (kind) => ({
+			background: heatCellBg[kind],
 			opacity: kind === "empty" ? 0.5 : 1,
 		}),
 
@@ -288,11 +285,8 @@ export const editorialStyles = (
 			alignItems: "flex-end",
 			height: 40,
 		},
-		bar: (kind, heightPct, severity = 1) => ({
-			background:
-				kind === "degraded"
-					? mixSeverityColor(tokens.up, tokens.degraded, severity)
-					: barBg[kind],
+		bar: (kind, heightPct) => ({
+			background: barBg[kind],
 			minHeight: 3,
 			opacity: kind === "empty" ? 0.5 : 1,
 			height: `${heightPct}%`,

client/src/Pages/StatusPage/Status/themes/modern/styles.ts

@@ -1,6 +1,6 @@
 import type { SxProps, Theme } from "@mui/material/styles";
 import { keyframes } from "@mui/system";
-import { mixSeverityColor, type StatusPageThemeTokens } from "../tokens";
+import type { StatusPageThemeTokens } from "../tokens";
 import { type OverallTone, toneColor, toneSoft } from "../shared/overallStatus";
 import { MONO_STACK, SANS_STACK } from "../shared/fontStacks";
 import { MAX_RECENT_CHECKS } from "@/Types/Monitor";
@@ -37,9 +37,9 @@ export interface ModernStyles {
 	monitorUrl: SxProps<Theme>;
 	badge: (tone: OverallTone) => SxProps<Theme>;
 	heatmap: SxProps<Theme>;
-	heatmapCell: (kind: ModernHeatCell, severity?: number) => SxProps<Theme>;
+	heatmapCell: (kind: ModernHeatCell) => SxProps<Theme>;
 	histogram: SxProps<Theme>;
-	bar: (kind: ModernBarKind, heightPct: number, severity?: number) => SxProps<Theme>;
+	bar: (kind: ModernBarKind, heightPct: number) => SxProps<Theme>;
 	chartStats: SxProps<Theme>;
 	infra: SxProps<Theme>;
 	infraEmpty: SxProps<Theme>;
@@ -83,14 +83,13 @@ export const modernStyles = (
 ): ModernStyles => {
 	const cardShadow = isDark ? darkShadow : lightShadow;
 	const cardHoverShadow = isDark ? darkShadowHover : lightShadowHover;
-	const darken = (color: string) => `color-mix(in srgb, ${color} 70%, #000000 30%)`;
 
 	const heatCellBg: Record<ModernHeatCell, string> = {
 		fast: `linear-gradient(180deg, ${tokens.up}, ${tokens.upStrong})`,
 		med: `linear-gradient(180deg, color-mix(in srgb, ${tokens.up} 70%, #ffffff 30%), ${tokens.up})`,
 		slow: `linear-gradient(180deg, ${tokens.warn}, ${tokens.degraded})`,
-		degraded: `linear-gradient(180deg, ${tokens.degraded}, ${darken(tokens.degraded)})`,
-		down: `linear-gradient(180deg, ${tokens.down}, ${darken(tokens.down)})`,
+		degraded: `linear-gradient(180deg, ${tokens.degraded}, color-mix(in srgb, ${tokens.degraded} 70%, #000000 30%))`,
+		down: `linear-gradient(180deg, ${tokens.down}, color-mix(in srgb, ${tokens.down} 70%, #000000 30%))`,
 		empty: tokens.border,
 	};
 
@@ -104,7 +103,7 @@ export const modernStyles = (
 	const gaugeFillBg: Record<ModernGaugeFill, string> = {
 		ok: `linear-gradient(90deg, ${tokens.up}, ${tokens.upStrong})`,
 		warm: `linear-gradient(90deg, ${tokens.warn}, ${tokens.degraded})`,
-		hot: `linear-gradient(90deg, ${tokens.down}, color-mix(in srgb, ${tokens.down}, ${darken(tokens.down)})`,
+		hot: `linear-gradient(90deg, ${tokens.down}, color-mix(in srgb, ${tokens.down} 70%, #000000 30%))`,
 	};
 
 	return {
@@ -355,19 +354,13 @@ export const modernStyles = (
 			gap: { xs: "1px", md: "3px" },
 			height: 46,
 		},
-		heatmapCell: (kind, severity = 1) => {
-			const mixed = mixSeverityColor(tokens.up, tokens.degraded, severity);
-			return {
-				borderRadius: "3px",
-				background:
-					kind === "degraded"
-						? `linear-gradient(180deg, ${mixed}, ${darken(mixed)})`
-						: heatCellBg[kind],
-				opacity: kind === "empty" ? 0.4 : 1,
-				transition: "transform 0.15s",
-				"&:hover": { transform: "scaleY(1.2)" },
-			};
-		},
+		heatmapCell: (kind) => ({
+			borderRadius: "3px",
+			background: heatCellBg[kind],
+			opacity: kind === "empty" ? 0.4 : 1,
+			transition: "transform 0.15s",
+			"&:hover": { transform: "scaleY(1.2)" },
+		}),
 
 		histogram: {
 			padding: { xs: "0 12px", md: "0 24px" },
@@ -377,11 +370,8 @@ export const modernStyles = (
 			alignItems: "flex-end",
 			height: 46,
 		},
-		bar: (kind, heightPct, severity = 1) => ({
-			background:
-				kind === "degraded"
-					? mixSeverityColor(tokens.up, tokens.degraded, severity)
-					: barBg[kind],
+		bar: (kind, heightPct) => ({
+			background: barBg[kind],
 			borderRadius: "3px",
 			minHeight: 4,
 			opacity: kind === "empty" ? 0.4 : 1,

client/src/Pages/StatusPage/Status/themes/refined/styles.ts

@@ -1,5 +1,5 @@
 import type { SxProps, Theme } from "@mui/material/styles";
-import { mixSeverityColor, type StatusPageThemeTokens } from "../tokens";
+import type { StatusPageThemeTokens } from "../tokens";
 import { type OverallTone, toneColor, toneSoft } from "../shared/overallStatus";
 import { MONO_STACK, SANS_STACK } from "../shared/fontStacks";
 
@@ -37,9 +37,9 @@ export interface RefinedStyles {
 	monitorUrl: SxProps<Theme>;
 	badge: (tone: OverallTone) => SxProps<Theme>;
 	heatmap: SxProps<Theme>;
-	heatmapCell: (kind: RefinedHeatCell, severity?: number) => SxProps<Theme>;
+	heatmapCell: (kind: RefinedHeatCell) => SxProps<Theme>;
 	histogram: SxProps<Theme>;
-	bar: (kind: RefinedBarKind, heightPct: number, severity?: number) => SxProps<Theme>;
+	bar: (kind: RefinedBarKind, heightPct: number) => SxProps<Theme>;
 	chartStats: SxProps<Theme>;
 	infra: SxProps<Theme>;
 	infraEmpty: SxProps<Theme>;
@@ -296,12 +296,9 @@ export const refinedStyles = (
 			gap: { xs: "1px", md: "3px" },
 			height: 42,
 		},
-		heatmapCell: (kind, severity = 1) => ({
+		heatmapCell: (kind) => ({
 			borderRadius: "2px",
-			background:
-				kind === "degraded"
-					? mixSeverityColor(tokens.up, tokens.degraded, severity)
-					: heatCellBg[kind],
+			background: heatCellBg[kind],
 			opacity: kind === "empty" ? 0.4 : 1,
 			transition: "transform 0.15s",
 			"&:hover": { transform: "scaleY(1.15)" },
@@ -315,11 +312,8 @@ export const refinedStyles = (
 			alignItems: "flex-end",
 			height: 42,
 		},
-		bar: (kind, heightPct, severity = 1) => ({
-			background:
-				kind === "degraded"
-					? mixSeverityColor(tokens.up, tokens.degraded, severity)
-					: barBg[kind],
+		bar: (kind, heightPct) => ({
+			background: barBg[kind],
 			borderRadius: "2px",
 			minHeight: 3,
 			opacity: kind === "empty" ? 0.4 : 1,

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

@@ -59,9 +59,9 @@ export interface BaseStyles {
 	monitorUrl: SxProps<Theme>;
 	badge: (tone: OverallTone) => SxProps<Theme>;
 	heatmap: SxProps<Theme>;
-	heatmapCell: (kind: HeatCellKind, severity?: number) => SxProps<Theme>;
+	heatmapCell: (kind: HeatCellKind) => SxProps<Theme>;
 	histogram: SxProps<Theme>;
-	bar: (kind: BarKind, heightPct: number, severity?: number) => SxProps<Theme>;
+	bar: (kind: BarKind, heightPct: number) => SxProps<Theme>;
 	chartStats: SxProps<Theme>;
 	infra: SxProps<Theme>;
 	infraEmpty: SxProps<Theme>;
@@ -211,7 +211,6 @@ export const BaseStatusPage = ({
 							>
 								<Icon
 									icon={TriangleAlert}
-									size={20}
 									color={theme.palette.warning.main}
 								/>
 								<Typography>

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

@@ -18,7 +18,6 @@ export type HeatCellKind = "fast" | "med" | "slow" | "degraded" | "down" | "empt
 
 export interface ChartCell {
 	key: string;
-	severity: number;
 	barKind: BarKind;
 	heatKind: HeatCellKind;
 	heightPct: number; // histogram bar height
@@ -29,22 +28,9 @@ export interface ChartCell {
 
 const DAY_DOWN_THRESHOLD = 0.5;
 
-// Color interpolation
-// 0  = perfect
-// 1 = at or below the down threshold
-const SEVERITY_FLOOR = 0.15; // A degraded server should never be green
-const SEVERITY_GAMMA = 2; // >1 biases toward green so high-uptime days stay visibly distinct from low ones
-
-export const severityFromUpRatio = (upRatio: number): number => {
-	const failed = 1 - upRatio;
-	if (failed <= 0) return 0;
-	const scaled = (Math.log10(failed) + 3) / (Math.log10(1 - DAY_DOWN_THRESHOLD) + 3);
-	const clamped = Math.min(1, Math.max(0, scaled));
-	return Math.max(SEVERITY_FLOOR, clamped ** SEVERITY_GAMMA);
-};
-
-const classifyDay = (bucket: DailyCheckBucket, upRatio: number): BarKind => {
+const classifyDay = (bucket: DailyCheckBucket): BarKind => {
 	if (bucket.totalChecks === 0) return "empty";
+	const upRatio = bucket.upChecks / bucket.totalChecks;
 	if (upRatio >= 1) return "up";
 	if (upRatio < DAY_DOWN_THRESHOLD) return "down";
 	return "degraded";
@@ -69,7 +55,6 @@ const emptyCell = (key: string): ChartCell => ({
 	responseTime: 0,
 	tooltip: null,
 	ariaLabel: "",
-	severity: 0,
 });
 
 const padCells = (cells: ChartCell[], length: number): ChartCell[] => [
@@ -91,7 +76,6 @@ export const checksToCells = (checks: CheckSnapshot[]): ChartCell[] => {
 			responseTime: check.responseTime ?? 0,
 			tooltip: <ThemedChartTooltip check={check} />,
 			ariaLabel: `${formatMs(check.responseTime)}, ${check.status ? "up" : "down"}`,
-			severity: 0,
 		})
 	);
 	return padCells(cells, MAX_RECENT_CHECKS);
@@ -109,17 +93,9 @@ export const dailyBucketsToCells = (
 	return enumerated.map((date) => {
 		const bucket = byDate.get(date);
 		if (!bucket) return emptyCell(`day-${date}`);
-		const upRatio = bucket.upChecks / bucket.totalChecks;
-
-		const barKind = classifyDay(bucket, upRatio);
+		const barKind = classifyDay(bucket);
 		return {
 			key: `day-${date}`,
-			severity:
-				barKind === "degraded"
-					? severityFromUpRatio(upRatio)
-					: barKind === "down"
-						? 1
-						: 0,
 			barKind,
 			heatKind:
 				barKind === "up"

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

@@ -10,7 +10,7 @@ import type {
 interface Props {
 	cells: ChartCell[];
 	containerSx: SxProps<Theme>;
-	cellSx: (kind: HeatCellKind, severity?: number) => SxProps<Theme>;
+	cellSx: (kind: HeatCellKind) => SxProps<Theme>;
 }
 
 export const ThemedHeatmap = ({ cells, containerSx, cellSx }: Props) => {
@@ -42,7 +42,7 @@ export const ThemedHeatmap = ({ cells, containerSx, cellSx }: Props) => {
 						placement="top"
 					>
 						<Box
-							sx={cellSx(cell.heatKind, cell.severity)}
+							sx={cellSx(cell.heatKind)}
 							aria-label={cell.ariaLabel}
 						/>
 					</Tooltip>

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

@@ -13,7 +13,7 @@ import type {
 interface Props {
 	cells: ChartCell[];
 	containerSx: SxProps<Theme>;
-	barSx: (kind: BarKind, heightPct: number, severity?: number) => SxProps<Theme>;
+	barSx: (kind: BarKind, heightPct: number) => SxProps<Theme>;
 	statsSx: SxProps<Theme>;
 	statsGap?: number;
 }
@@ -61,7 +61,7 @@ export const ThemedHistogram = ({
 							placement="top"
 						>
 							<Box
-								sx={barSx(cell.barKind, cell.heightPct, cell.severity)}
+								sx={barSx(cell.barKind, cell.heightPct)}
 								aria-label={cell.ariaLabel}
 							/>
 						</Tooltip>

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

@@ -1,8 +1,5 @@
-// No "Inter" here: its webfont was never self-hosted, so once the Google Fonts
-// import went it resolved to a fallback anyway. Listing it only made the stack
-// look intentional on machines that happen to have Inter installed.
 export const SANS_STACK =
-	'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
+	'-apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif';
 
 export const BOLD_SANS_STACK = `ui-sans-serif, ${SANS_STACK}`;
 

client/src/Pages/StatusPage/Status/themes/tokens.ts

@@ -243,10 +243,3 @@ export const themeTokens: Record<StatusPageTheme, ThemeVariants> = {
 	editorial,
 	minimal,
 };
-
-// Interpolate between a theme's up and degraded colors by severity (0..1).
-export const mixSeverityColor = (
-	up: string,
-	degraded: string,
-	severity: number
-): string => `color-mix(in oklch, ${degraded} ${Math.round(severity * 100)}%, ${up})`;

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

@@ -31,7 +31,6 @@ import type { RootState } from "@/Types/state";
 import { formatDateWithTz } from "@/Utils/TimeUtils";
 import { t } from "i18next";
 import { Typography } from "@mui/material";
-import type { DateRange } from "@/Types/Query";
 
 const certificateDateFormat = "MMM D, YYYY h A";
 
@@ -54,7 +53,7 @@ const UptimeDetailsPage = () => {
 	const [rowsPerPage, setRowsPerPage] = useState<number>(5);
 	const [geoPage, setGeoPage] = useState<number>(0);
 	const [geoRowsPerPage, setGeoRowsPerPage] = useState<number>(5);
-	const [dateRange, setDateRange] = useState<DateRange>("recent");
+	const [dateRange, setDateRange] = useState<string>("recent");
 	const [selectedLocation, setSelectedLocation] = useState<GeoContinent>("NA");
 
 	const monitorDetailsUrl = useMemo(() => {

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

@@ -350,7 +350,11 @@ export const MonitorTable = ({
 				onRowClick={(row) => {
 					navigate(`/uptime/${row.id}`);
 				}}
-				isRowSelected={(row) => isRowSelected(row.id)}
+				getRowSx={(row) => ({
+					backgroundColor: isRowSelected(row.id)
+						? theme.palette.action.selected
+						: "inherit",
+				})}
 			/>
 			<Pagination
 				component="div"

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

@@ -1,43 +1,294 @@
-import { MonitorListPage } from "@/Components/monitors";
+import {
+	ControlsFilter,
+	HeaderMonitorsSummary,
+	BulkActionsBar,
+} from "@/Components/monitors";
+import { MonitorBasePageWithStates, ColoredLabel } from "@/Components/design-elements";
+import { TextField, Dialog, Button } from "@/Components/inputs";
+import Stack from "@mui/material/Stack";
 import { MonitorTable } from "@/Pages/Uptime/Monitors/Components/UptimeMonitorsTable";
+import { HeaderCreate } from "@/Components/common";
+import { Play, Pause } from "lucide-react";
+import Typography from "@mui/material/Typography";
 
-import { useMonitorListController } from "@/Hooks/useMonitorListController";
+import { useTranslation } from "react-i18next";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import { useGet, useDelete } from "@/Hooks/UseApi";
+import type { Monitor, MonitorType, MonitorsWithChecksResponse } from "@/Types/Monitor";
+import type { Tag } from "@/Types/Tag";
+import { useState, useMemo, useCallback } from "react";
+import { useSelector, useDispatch } from "react-redux";
+import { setRowsPerPage } from "@/Features/UI/uiSlice.js";
+import { useIsAdmin } from "@/Hooks/useIsAdmin";
+import type { RootState } from "@/Types/state";
+import { useTheme } from "@mui/material";
+import useDebounce from "@/Hooks/useDebounce";
+import { useBulkMonitorActions } from "@/Hooks/useBulkMonitorActions";
+import { SPACING } from "@/Utils/Theme/constants";
 
 const UptimeMonitorsPage = () => {
-	const c = useMonitorListController({
-		types: "selectable",
-		checksLimit: 25,
-		refreshInterval: 5000,
-		rowsPerPageTable: "monitors",
-		rowsPerPageDefault: 10,
-	});
+	const { t } = useTranslation();
+	const theme = useTheme();
+	const isSmall = useMediaQuery(theme.breakpoints.down("md"));
+	const dispatch = useDispatch();
+	const isAdmin = useIsAdmin();
+	// Redux state
+	const rowsPerPage = useSelector(
+		(state: RootState) => state.ui?.monitors?.rowsPerPage ?? 10
+	);
+
+	// Local state
+	const [selectedTypes, setSelectedTypes] = useState<MonitorType[]>([]);
+	const [selectedStatus, setSelectedStatus] = useState<string>("");
+	const [selectedState, setSelectedState] = useState<string>("");
+	const [selectedTags, setSelectedTags] = useState<string[]>([]);
+	const [page, setPage] = useState<number>(0);
+	const [search, setSearch] = useState<string>("");
+	const [sortField, setSortField] = useState<string>("");
+	const [sortOrder, setSortOrder] = useState<"asc" | "desc">("asc");
+	const [selectedMonitor, setSelectedMonitor] = useState<Monitor | null>(null);
+
+	const isDialogOpen = Boolean(selectedMonitor);
+
+	const debouncedSearch = useDebounce<string>(search, 300);
+
+	// Convert filter selections to API filter values
+	// Status: pass "up"/"down" directly to the API
+	// State: "active" -> true, "paused" -> false
+	const toFilterStatus = useMemo(() => {
+		if (selectedStatus === "up") return "up";
+		if (selectedStatus === "down") return "down";
+		return undefined;
+	}, [selectedStatus]);
+
+	const toFilterActive = useMemo(() => {
+		if (selectedState === "active") return "true";
+		if (selectedState === "paused") return "false";
+		return undefined;
+	}, [selectedState]);
+
+	// Determine field and filter for the API request
+	// Priority: status > isActive > search > sort
+	const filterLookup = new Map<string | undefined, string>([
+		[toFilterStatus, "status"],
+		[toFilterActive, "isActive"],
+	]);
+	const activeFilter = [...filterLookup].find(([key]) => key !== undefined);
+	const field = activeFilter?.[1] || (debouncedSearch ? "name" : sortField || undefined);
+	const filter = activeFilter?.[0] || debouncedSearch;
+
+	// Default to all types when none selected
+	const effectiveTypes =
+		selectedTypes.length > 0
+			? selectedTypes
+			: ["http", "ping", "docker", "port", "game", "grpc", "websocket", "dns"];
+
+	// Build URL for monitors with checks
+	const monitorsWithChecksUrl = useMemo(() => {
+		const params = new URLSearchParams();
+		effectiveTypes.forEach((type) => params.append("type", type));
+		selectedTags.forEach((tagId) => params.append("tags", tagId));
+		params.append("limit", "25");
+		if (page !== undefined) params.append("page", String(page));
+		if (rowsPerPage) params.append("rowsPerPage", String(rowsPerPage));
+		if (filter) params.append("filter", filter);
+		if (field) params.append("field", field);
+		if (sortOrder) params.append("order", sortOrder);
+		return `/monitors/team/with-checks?${params.toString()}`;
+	}, [effectiveTypes, selectedTags, page, rowsPerPage, filter, field, sortOrder]);
+
+	const {
+		data: monitorsWithChecksData,
+		isLoading: monitorsWithChecksLoading,
+		error: monitorsWithChecksError,
+		refetch,
+	} = useGet<MonitorsWithChecksResponse>(
+		monitorsWithChecksUrl,
+		{},
+		{ refreshInterval: 5000, keepPreviousData: true }
+	);
+
+	const { data: tags } = useGet<Tag[]>("/tags/team");
+
+	const {
+		monitors: monitorsWithChecks,
+		summary,
+		count,
+	} = monitorsWithChecksData ?? { monitors: null, summary: null, count: 0 };
+
+	// Bulk actions
+	const {
+		selectedRows,
+		setSelectedRows,
+		handleBulkPause,
+		handleBulkResume,
+		handleCancelSelection,
+	} = useBulkMonitorActions(refetch, page);
+
+	// Delete hook
+	const { deleteFn, loading: isDeleting } = useDelete();
+
+	// Handlers
+	const handleClearFilters = useCallback(() => {
+		setSelectedTypes([]);
+		setSelectedStatus("");
+		setSelectedState("");
+		setSelectedTags([]);
+		setSearch("");
+	}, []);
+
+	const handleConfirm = async () => {
+		if (!selectedMonitor) return;
+		await deleteFn(`/monitors/${selectedMonitor.id}`);
+		setSelectedMonitor(null);
+		refetch();
+	};
+
+	const handleCancel = () => {
+		setSelectedMonitor(null);
+	};
+
+	const isLoading = monitorsWithChecksLoading;
+
+	// Check if any filters are active
+	const hasActiveFilters = Boolean(
+		selectedTypes.length > 0 ||
+		selectedStatus ||
+		selectedState ||
+		selectedTags.length > 0 ||
+		search
+	);
+
+	// Show empty state only when there are truly no monitors (not just filtered out)
+	// If filters are active and count is 0, pass 1 to prevent empty state fallback
+	const effectiveTotalCount =
+		hasActiveFilters && (summary?.totalMonitors ?? 0) === 0
+			? 1
+			: (summary?.totalMonitors ?? 0);
 
 	return (
-		<MonitorListPage
+		<MonitorBasePageWithStates
 			headerKey="uptime"
+			loading={isLoading}
+			error={monitorsWithChecksError}
+			totalCount={effectiveTotalCount}
 			page="uptime"
 			actionLink="/uptime/create"
-			controller={c}
-			bulkActions
 		>
-			<MonitorTable
-				monitors={c.monitors || []}
-				tags={c.tags || []}
-				refetch={c.refetch}
-				setSelectedMonitor={c.setSelectedMonitor}
-				count={c.count || 0}
-				page={c.page}
-				setPage={c.setPage}
-				rowsPerPage={c.rowsPerPage}
-				sortField={c.sortField}
-				setSortField={c.setSortField}
-				sortOrder={c.sortOrder}
-				setSortOrder={c.setSortOrder}
-				setRowsPerPage={c.handleSetRowsPerPage}
-				selectedRows={c.selectedRows}
-				onSelectionChange={c.setSelectedRows}
+			<HeaderCreate
+				path="/uptime/create"
+				isLoading={isLoading}
+				isAdmin={isAdmin}
 			/>
-		</MonitorListPage>
+
+			<HeaderMonitorsSummary summary={summary} />
+
+			<Stack
+				direction={isSmall ? "column" : "row"}
+				justifyContent={isSmall ? "flex-start" : "space-between"}
+				gap={theme.spacing(4)}
+			>
+				<ControlsFilter
+					selectedTypes={selectedTypes}
+					setSelectedTypes={setSelectedTypes}
+					selectedStatus={selectedStatus}
+					setSelectedStatus={setSelectedStatus}
+					selectedState={selectedState}
+					setSelectedState={setSelectedState}
+					tagOptions={tags ?? []}
+					selectedTags={selectedTags}
+					setSelectedTags={setSelectedTags}
+					onClearFilters={handleClearFilters}
+				/>
+				<TextField
+					placeholder={t("pages.uptime.filters.search.placeholder")}
+					value={search}
+					onChange={(event) => {
+						setSearch(event.target.value);
+					}}
+				/>
+			</Stack>
+
+			{selectedTags.length > 0 && (
+				<Stack
+					direction={isSmall ? "column" : "row"}
+					alignItems={isSmall ? "flex-start" : "center"}
+					flexWrap="wrap"
+					gap={theme.spacing(SPACING.XL)}
+				>
+					<Typography color={theme.palette.text.secondary}>
+						{t("pages.uptime.filters.activeTags")}
+					</Typography>
+					{selectedTags.map((tagId) => {
+						const tag = tags?.find((t) => t.id === tagId);
+						if (!tag) return null;
+						return (
+							<ColoredLabel
+								key={tag.id}
+								text={tag.name}
+								color={tag.color}
+							/>
+						);
+					})}
+				</Stack>
+			)}
+
+			{!isLoading && (
+				<BulkActionsBar
+					selectedCount={selectedRows.length}
+					onCancel={handleCancelSelection}
+				>
+					<Button
+						size="small"
+						startIcon={<Play size={16} />}
+						onClick={handleBulkResume}
+					>
+						{t("common.buttons.resume")}
+					</Button>
+					<Button
+						size="small"
+						startIcon={<Pause size={16} />}
+						onClick={handleBulkPause}
+					>
+						{t("common.buttons.pause")}
+					</Button>
+				</BulkActionsBar>
+			)}
+
+			<MonitorTable
+				monitors={monitorsWithChecks || []}
+				tags={tags || []}
+				refetch={refetch}
+				setSelectedMonitor={setSelectedMonitor}
+				count={count || 0}
+				page={page}
+				setPage={setPage}
+				rowsPerPage={rowsPerPage}
+				sortField={sortField}
+				setSortField={setSortField}
+				sortOrder={sortOrder}
+				setSortOrder={setSortOrder}
+				setRowsPerPage={(rowsPerPage: number) => {
+					dispatch(
+						setRowsPerPage({
+							value: rowsPerPage,
+							table: "monitors",
+						})
+					);
+					setPage(0);
+				}}
+				selectedRows={selectedRows}
+				onSelectionChange={setSelectedRows}
+			/>
+			<Dialog
+				open={isDialogOpen}
+				title={t("common.dialogs.delete.title")}
+				content={t("common.dialogs.delete.description")}
+				onConfirm={handleConfirm}
+				onCancel={handleCancel}
+				loading={isDeleting}
+			/>
+		</MonitorBasePageWithStates>
 	);
 };
 

client/src/Routes/index.tsx

@@ -20,11 +20,6 @@ import PageSpeedDetails from "@/Pages/PageSpeed/Details/";
 import Infrastructure from "@/Pages/Infrastructure/Monitors";
 import InfrastructureDetails from "@/Pages/Infrastructure/Details";
 
-// Docker
-import Docker from "@/Pages/Docker/Monitors";
-import DockerHostDetails from "@/Pages/Docker/HostDetails";
-import DockerDetails from "@/Pages/Docker/ContainerDetails";
-
 // Checks
 import Checks from "@/Pages/Checks";
 
@@ -44,14 +39,11 @@ import CreateNotifications from "@/Pages/Notifications/create";
 import Tags from "@/Pages/Tags";
 import CreateTags from "@/Pages/Tags/create";
 
-// Proxies
-import Proxies from "@/Pages/Proxies";
-import CreateProxies from "@/Pages/Proxies/create";
-
 // Settings
 import Account from "@/Pages/Account";
 import EditUser from "@/Pages/Account/EditUser";
 import Settings from "@/Pages/Settings";
+
 import Maintenance from "@/Pages/Maintenance";
 import CreateNewMaintenanceWindow from "@/Pages/Maintenance/create";
 
@@ -60,8 +52,10 @@ import Logs from "@/Pages/Logs";
 
 // Routing
 import { ProtectedRoute, RoleProtectedRoute } from "@/Components/routing/RouteProtected";
+
 import CreateMonitor from "@/Pages/CreateMonitor";
 import { isCustomDomainHost } from "@/Utils/statusPageUrl";
+
 const Routes = () => {
 	if (isCustomDomainHost()) {
 		return (
@@ -144,26 +138,6 @@ const Routes = () => {
 					path="infrastructure/:monitorId"
 					element={<InfrastructureDetails />}
 				/>
-				<Route
-					path="docker"
-					element={<Docker />}
-				/>
-				<Route
-					path="docker/create"
-					element={<CreateMonitor />}
-				/>
-				<Route
-					path="/docker/configure/:monitorId"
-					element={<CreateMonitor />}
-				/>
-				<Route
-					path="docker/host/:monitorId/container/:containerName"
-					element={<DockerDetails />}
-				/>
-				<Route
-					path="docker/host/:monitorId"
-					element={<DockerHostDetails />}
-				/>
 				<Route
 					path="checks/:monitorId?"
 					element={<Checks />}
@@ -214,24 +188,12 @@ const Routes = () => {
 					path="tags/create"
 					element={<CreateTags />}
 				/>
+
 				<Route
 					path="tags/configure/:tagId"
 					element={<CreateTags />}
 				/>
 
-				<Route
-					path="proxies"
-					element={<Proxies />}
-				/>
-				<Route
-					path="proxies/create"
-					element={<CreateProxies />}
-				/>
-				<Route
-					path="proxies/configure/:proxyId"
-					element={<CreateProxies />}
-				/>
-
 				<Route
 					path="maintenance"
 					element={<Maintenance />}

client/src/Types/Check.ts

@@ -119,65 +119,6 @@ export interface CheckTimings {
 	};
 }
 
-// Mirrors DockerContainerSummary in server/src/types/network.ts.
-export interface DockerContainerSummary {
-	total: number;
-	running: number;
-	stopped: number;
-	unhealthy: number;
-}
-
-// Mirrors DockerContainerStates in server/src/types/network.ts.
-export const DockerContainerStates = [
-	"created",
-	"running",
-	"paused",
-	"restarting",
-	"removing",
-	"exited",
-	"dead",
-] as const;
-export type DockerContainerState = (typeof DockerContainerStates)[number];
-
-export const DockerHealthStatuses = ["healthy", "unhealthy", "starting", "none"] as const;
-export type DockerHealthStatus = (typeof DockerHealthStatuses)[number];
-
-export const DockerPortProtocols = ["tcp", "udp", "sctp"] as const;
-export type DockerPortProtocol = (typeof DockerPortProtocols)[number];
-
-export interface DockerContainerPort {
-	privatePort: number;
-	protocol: DockerPortProtocol;
-	publicPort?: number;
-	hostIp?: string;
-}
-
-export interface DockerContainerMount {
-	type: string;
-	name?: string;
-	source: string;
-	destination: string;
-	mode: string;
-	rw: boolean;
-}
-
-export interface DockerContainerInfo {
-	id: string;
-	name: string;
-	image: string;
-	state: DockerContainerState;
-	status: string;
-	health: DockerHealthStatus;
-	cpuPct?: number;
-	memoryUsedBytes?: number;
-	memoryLimitBytes?: number;
-	memoryPct?: number;
-	restartCount?: number;
-	startedAt?: string;
-	ports?: DockerContainerPort[];
-	mounts?: DockerContainerMount[];
-}
-
 export interface Check {
 	id: string;
 	metadata: CheckMetadata;
@@ -192,7 +133,6 @@ export interface Check {
 	host?: CheckHostInfo;
 	errors?: CheckErrorInfo[];
 	capture?: CheckCaptureInfo;
-	containerSummary?: DockerContainerSummary;
 	net?: CheckNetworkInterfaceInfo[];
 	accessibility?: number;
 	bestPractices?: number;
@@ -347,7 +287,6 @@ export type CheckSnapshot = Pick<
 	memory?: SnapshotMemoryInfo;
 	disk?: SnapshotDiskInfo[];
 	host?: SnapshotHostInfo;
-	containerSummary?: DockerContainerSummary;
 };
 export interface HasResponseTime {
 	responseTime: number;

client/src/Types/Monitor.ts

@@ -3,8 +3,6 @@ import type {
 	CheckSnapshot,
 	GroupedUptimeCheck,
 	DailyCheckBucket,
-	DockerContainerInfo,
-	DockerContainerSummary,
 } from "@/Types/Check";
 import type { PageSpeedGroupedCheck } from "@/Types/Check";
 import type { GeoContinent } from "@/Types/GeoCheck";
@@ -32,6 +30,7 @@ export type MonitorType = (typeof MonitorTypes)[number];
 export const SelectableMonitorTypes = [
 	"http",
 	"ping",
+	"docker",
 	"port",
 	"game",
 	"grpc",
@@ -110,10 +109,6 @@ export const HttpMethods = ["GET", "HEAD"] as const;
 export type HttpMethod = (typeof HttpMethods)[number];
 export const DefaultHttpMethod: HttpMethod = "GET";
 
-export const ProxyModes = ["inherit", "none", "custom"] as const;
-export type ProxyMode = (typeof ProxyModes)[number];
-export const DefaultProxyMode: ProxyMode = "inherit";
-
 export interface Monitor {
 	id: string;
 	userId: string;
@@ -126,8 +121,6 @@ export interface Monitor {
 	statusWindowThreshold: number;
 	type: MonitorType;
 	ignoreTlsErrors: boolean;
-	proxyMode: ProxyMode;
-	proxyId?: string;
 	useAdvancedMatching: boolean;
 	jsonPath?: string;
 	expectedValue?: string;
@@ -270,58 +263,6 @@ export interface HardwareDetailsResponse {
 	monitorStats: MonitorStats | null;
 }
 
-export interface DockerStatsBucket {
-	_id: string;
-	avgResponseTime: number | null;
-	upCount: number;
-	totalCount: number;
-	avgRunning: number | null;
-	avgTotal: number | null;
-	avgUnhealthy: number | null;
-}
-
-export interface DockerStats {
-	aggregateData: {
-		totalChecks: number;
-	};
-	upChecks: {
-		totalChecks: number;
-	};
-	aggregate: DockerStatsBucket[];
-	latest: {
-		containers: DockerContainerInfo[];
-		summary?: DockerContainerSummary;
-		checkedAt: string;
-	} | null;
-}
-
-export interface DockerDetailsResponse {
-	monitor: Monitor;
-	stats: DockerStats;
-	monitorStats: MonitorStats | null;
-}
-export interface DockerContainerStatsBucket {
-	_id: string;
-	avgCpuPct: number | null;
-	avgMemoryUsedBytes: number | null;
-	avgMemoryPct: number | null;
-	minRestartCount: number | null;
-	maxRestartCount: number | null;
-}
-
-export interface DockerContainerStats {
-	aggregate: DockerContainerStatsBucket[];
-	restartsInRange: number;
-	latest: {
-		container: DockerContainerInfo;
-		checkedAt: string;
-	} | null;
-}
-export interface DockerContainerResponse {
-	monitor: Monitor;
-	stats: DockerContainerStats;
-}
-
 export interface Game {
 	name: string;
 	options?: {

client/src/Types/Proxy.ts

@@ -1,17 +0,0 @@
-export const ProxyProtocols = ["http", "https"] as const;
-export type ProxyProtocol = (typeof ProxyProtocols)[number];
-
-export interface Proxy {
-	id: string;
-	teamId: string;
-	name: string;
-	protocol: ProxyProtocol;
-	host: string;
-	port: number;
-	username?: string;
-	password?: string;
-	createdAt: string;
-	updatedAt: string;
-}
-
-export type ProxyResponse = Omit<Proxy, "password"> & { hasPassword: boolean };

client/src/Types/Query.ts

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

client/src/Types/Settings.ts

@@ -24,8 +24,6 @@ export interface Settings {
 	showURL: boolean;
 	singleton: boolean;
 	globalThresholds?: SettingsThresholds;
-	globalProxyEnabled: boolean;
-	globalProxyId?: string | null;
 	createdAt: string;
 	updatedAt: string;
 }
@@ -33,11 +31,5 @@ export interface Settings {
 export interface AppSettingsResponse {
 	pagespeedKeySet: boolean;
 	emailPasswordSet: boolean;
-	globalProxy: {
-		id: string;
-		name: string;
-		host: string;
-		port: number;
-	} | null;
 	settings: Settings;
 }

client/src/Utils/FormatUtils.ts

@@ -1,31 +1,25 @@
 /**
  * Intl.NumberFormat instance for percentage formatting.
  * Reused across all formatting calls for performance.
- *
- * Two decimals rather than one: at a single decimal every value above 99.95%
- * renders as "100.0%", so a period containing real downtime is reported as
- * flawless. It also collapses 99.9 / 99.95 / 99.99 — three materially
- * different SLA commitments — into the same figure.
  */
 const percentageFormatter = new Intl.NumberFormat("en-US", {
 	style: "percent",
-	minimumFractionDigits: 2,
-	maximumFractionDigits: 2,
+	minimumFractionDigits: 1,
+	maximumFractionDigits: 1,
 });
 
 /**
  * Formats a decimal value as a percentage string.
  * @param value - Decimal value (e.g., 0.75 for 75%)
- * @returns Formatted percentage string (e.g., "75.00%")
+ * @returns Formatted percentage string (e.g., "75.0%")
  * @example
- * formatPercentage(0.75)   // "75.00%"
- * formatPercentage(1)      // "100.00%"
- * formatPercentage(0.5432) // "54.32%"
- * formatPercentage(0.9999) // "99.99%"
+ * formatPercentage(0.75)   // "75.0%"
+ * formatPercentage(1)      // "100.0%"
+ * formatPercentage(0.5432) // "54.3%"
  */
 export const formatPercentage = (value: number): string => {
 	if (typeof value !== "number" || Number.isNaN(value)) {
-		return "0.00%";
+		return "0.0%";
 	}
 	return percentageFormatter.format(value);
 };
@@ -33,11 +27,11 @@ export const formatPercentage = (value: number): string => {
 /**
  * Formats a whole number percentage value as a percentage string.
  * @param value - Whole number percentage (e.g., 75 for 75%)
- * @returns Formatted percentage string (e.g., "75.00%")
+ * @returns Formatted percentage string (e.g., "75.0%")
  * @example
- * formatPercentageFromWhole(75)    // "75.00%"
- * formatPercentageFromWhole(100)   // "100.00%"
- * formatPercentageFromWhole(54.32) // "54.32%"
+ * formatPercentageFromWhole(75)    // "75.0%"
+ * formatPercentageFromWhole(100)   // "100.0%"
+ * formatPercentageFromWhole(54.32) // "54.3%"
  */
 export const formatPercentageFromWhole = (value: number): string => {
 	return formatPercentage(value / 100);

client/src/Utils/MonitorUtils.ts

@@ -1,11 +1,6 @@
 import type { MonitorStatus, MonitorType } from "@/Types/Monitor";
 import type { PaletteKey } from "@/Utils/Theme/Theme";
 import type { ValueType } from "@/Components/design-elements/StatusLabel";
-import type {
-	DockerContainerMount,
-	DockerContainerPort,
-	DockerContainerState,
-} from "@/Types/Check";
 
 export const getMonitorPath = (type: MonitorType): string => {
 	const pathMap: Record<MonitorType, string> = {
@@ -17,7 +12,7 @@ export const getMonitorPath = (type: MonitorType): string => {
 		websocket: "uptime",
 		dns: "uptime",
 		unknown: "uptime",
-		docker: "docker",
+		docker: "uptime",
 		hardware: "infrastructure",
 		pagespeed: "pagespeed",
 	};
@@ -46,19 +41,6 @@ export const getValuePalette = (value: ValueType): PaletteKey => {
 	return paletteMap[value];
 };
 
-export const getDockerStatePalette = (state: DockerContainerState): PaletteKey => {
-	const paletteMap: Record<DockerContainerState, PaletteKey> = {
-		paused: "warning",
-		created: "warning",
-		running: "success",
-		restarting: "warning",
-		removing: "warning",
-		exited: "error",
-		dead: "error",
-	};
-	return paletteMap[state];
-};
-
 export const getStatusColor = (status: MonitorStatus, theme: any): string => {
 	if (status === "up") {
 		return theme.palette.success.light;
@@ -115,32 +97,3 @@ export const formatUrl = (url: string, maxLength: number = 55) => {
 		? `${strippedUrl.slice(0, maxLength)}…`
 		: strippedUrl;
 };
-
-export const dedupeDockerPorts = (
-	ports: DockerContainerPort[]
-): DockerContainerPort[] => {
-	return ports.filter((port) => {
-		// Discard ipv6 wildcards
-		if (port.hostIp !== "::") return port;
-
-		const isDuplicate = ports.some((otherPort) => {
-			if (otherPort.hostIp !== "0.0.0.0") return false;
-
-			return (
-				otherPort.privatePort === port.privatePort &&
-				otherPort.protocol === port.protocol &&
-				otherPort.publicPort === port.publicPort
-			);
-		});
-		return !isDuplicate;
-	});
-};
-
-const isAnonymousVolumeName = (name: string): boolean => /^[0-9a-f]{64}$/.test(name);
-
-export const getDockerMountLabel = (mount: DockerContainerMount) => {
-	if (mount.type === "volume" && mount.name)
-		return isAnonymousVolumeName(mount.name) ? mount.name.slice(0, 12) : mount.name;
-	if (mount.source) return mount.source;
-	return mount.type;
-};

client/src/Utils/Theme/Palette.ts

@@ -1,5 +1,4 @@
 import { alpha } from "@mui/material/styles";
-import { HOVER } from "@/Utils/Theme/constants";
 
 const typographyBase = 13;
 
@@ -18,20 +17,6 @@ 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",
@@ -54,34 +39,9 @@ export const lightPalette = {
 	primary: {
 		main: colors.brandGreen,
 	},
-	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,
 	},
@@ -104,13 +64,6 @@ 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,
@@ -119,21 +72,6 @@ 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,
 	},