Add public monitoring features and CI updates

- Add status pages, incidents, badges, maintenance, bulk ops, and metrics
- Add Docker packaging, env example, and frontend routes
- Refresh GitHub workflows and project metadata

internal/site/src/components/command-palette.tsx

@@ -1,13 +1,18 @@
-import { t } from "@lingui/core/macro"
+import { memo, useEffect, useMemo } from "react"
 import { Trans } from "@lingui/react/macro"
-import { getPagePath } from "@nanostores/router"
+import { t } from "@lingui/core/macro"
+import { useQuery } from "@tanstack/react-query"
 import { DialogDescription } from "@radix-ui/react-dialog"
 import {
+	Activity,
 	AlertOctagonIcon,
+	AlertTriangle,
 	BookIcon,
+	Calendar,
 	ContainerIcon,
 	DatabaseBackupIcon,
 	FingerprintIcon,
+	GlobeIcon,
 	HardDriveIcon,
 	LogsIcon,
 	MailIcon,
@@ -16,7 +21,6 @@ import {
 	SettingsIcon,
 	UsersIcon,
 } from "lucide-react"
-import { memo, useEffect, useMemo } from "react"
 import {
 	CommandDialog,
 	CommandEmpty,
@@ -29,8 +33,11 @@ import {
 } from "@/components/ui/command"
 import { isAdmin } from "@/lib/api"
 import { $systems } from "@/lib/stores"
-import { getHostDisplayValue, listen } from "@/lib/utils"
+import { listMonitors } from "@/lib/monitors"
+import { getDomains } from "@/lib/domains"
+import { getPagePath } from "@nanostores/router"
 import { $router, basePath, navigate, prependBasePath } from "./router"
+import { getHostDisplayValue, listen } from "@/lib/utils"
 
 export default memo(function CommandPalette({ open, setOpen }: { open: boolean; setOpen: (open: boolean) => void }) {
 	useEffect(() => {
@@ -43,6 +50,18 @@ export default memo(function CommandPalette({ open, setOpen }: { open: boolean;
 		return listen(document, "keydown", down)
 	}, [open, setOpen])
 
+	const { data: monitors = [] } = useQuery({
+		queryKey: ["monitors"],
+		queryFn: listMonitors,
+		enabled: open,
+	})
+
+	const { data: domains = [] } = useQuery({
+		queryKey: ["domains"],
+		queryFn: getDomains,
+		enabled: open,
+	})
+
 	return useMemo(() => {
 		const systems = $systems.get()
 		const SettingsShortcut = (
@@ -58,7 +77,7 @@ export default memo(function CommandPalette({ open, setOpen }: { open: boolean;
 		return (
 			<CommandDialog open={open} onOpenChange={setOpen}>
 				<DialogDescription className="sr-only">Command palette</DialogDescription>
-				<CommandInput placeholder={t`Search for systems or settings...`} />
+				<CommandInput placeholder={t`Search for systems, monitors, domains or settings...`} />
 				<CommandList>
 					{systems.length > 0 && (
 						<>
@@ -80,6 +99,44 @@ export default memo(function CommandPalette({ open, setOpen }: { open: boolean;
 							<CommandSeparator className="mb-1.5" />
 						</>
 					)}
+					{monitors.length > 0 && (
+						<>
+							<CommandGroup heading={t`Monitors`}>
+								{monitors.map((monitor) => (
+									<CommandItem
+										key={monitor.id}
+										onSelect={() => {
+											setOpen(false)
+											$router.open(getPagePath($router, "monitor", { id: monitor.id }))
+										}}
+									>
+										<Activity className="me-2 size-4" />
+										<span className="max-w-60 truncate">{monitor.name}</span>
+									</CommandItem>
+								))}
+							</CommandGroup>
+							<CommandSeparator className="mb-1.5" />
+						</>
+					)}
+					{domains.length > 0 && (
+						<>
+							<CommandGroup heading={t`Domains`}>
+								{domains.map((domain) => (
+									<CommandItem
+										key={domain.id}
+										onSelect={() => {
+											setOpen(false)
+											$router.open(getPagePath($router, "domain", { id: domain.id }))
+										}}
+									>
+										<GlobeIcon className="me-2 size-4" />
+										<span className="max-w-60 truncate">{domain.domain_name}</span>
+									</CommandItem>
+								))}
+							</CommandGroup>
+							<CommandSeparator className="mb-1.5" />
+						</>
+					)}
 					<CommandGroup heading={t`Pages / Settings`}>
 						<CommandItem
 							keywords={["home"]}
@@ -97,6 +154,7 @@ export default memo(function CommandPalette({ open, setOpen }: { open: boolean;
 							</CommandShortcut>
 						</CommandItem>
 						<CommandItem
+							keywords={["containers", "docker", "podman"]}
 							onSelect={() => {
 								navigate(getPagePath($router, "containers"))
 								setOpen(false)
@@ -122,6 +180,66 @@ export default memo(function CommandPalette({ open, setOpen }: { open: boolean;
 								<Trans>Page</Trans>
 							</CommandShortcut>
 						</CommandItem>
+						<CommandItem
+							keywords={["monitoring", "monitors", "domains", "websites"]}
+							onSelect={() => {
+								navigate(getPagePath($router, "monitoring"))
+								setOpen(false)
+							}}
+						>
+							<Activity className="me-2 size-4" />
+							<span>
+								<Trans>Monitoring</Trans>
+							</span>
+							<CommandShortcut>
+								<Trans>Page</Trans>
+							</CommandShortcut>
+						</CommandItem>
+						<CommandItem
+							keywords={["status", "public"]}
+							onSelect={() => {
+								navigate(getPagePath($router, "status_pages"))
+								setOpen(false)
+							}}
+						>
+							<GlobeIcon className="me-2 size-4" />
+							<span>
+								<Trans>Status Pages</Trans>
+							</span>
+							<CommandShortcut>
+								<Trans>Page</Trans>
+							</CommandShortcut>
+						</CommandItem>
+						<CommandItem
+							keywords={["incidents", "problems"]}
+							onSelect={() => {
+								navigate(getPagePath($router, "incidents"))
+								setOpen(false)
+							}}
+						>
+							<AlertTriangle className="me-2 size-4" />
+							<span>
+								<Trans>Incidents</Trans>
+							</span>
+							<CommandShortcut>
+								<Trans>Page</Trans>
+							</CommandShortcut>
+						</CommandItem>
+						<CommandItem
+							keywords={["calendar", "expiry", "ssl"]}
+							onSelect={() => {
+								navigate(getPagePath($router, "calendar"))
+								setOpen(false)
+							}}
+						>
+							<Calendar className="me-2 size-4" />
+							<span>
+								<Trans>Calendar</Trans>
+							</span>
+							<CommandShortcut>
+								<Trans>Page</Trans>
+							</CommandShortcut>
+						</CommandItem>
 						<CommandItem
 							onSelect={() => {
 								navigate(getPagePath($router, "settings", { name: "general" }))

internal/site/src/components/domains-table/domain-dialog.tsx

@@ -46,8 +46,22 @@ const formSchema = z.object({
 	current_value: z.coerce.number().min(0).optional(),
 	renewal_cost: z.coerce.number().min(0).optional(),
 	auto_renew: z.boolean(),
+	monitor_type: z.enum(["expiry", "watchlist", "portfolio"]),
+	// Expiry alerts
 	alert_days_before: z.coerce.number().min(1).max(365),
 	ssl_alert_enabled: z.boolean(),
+	ssl_alert_days: z.coerce.number().min(1).max(90),
+	// Notification settings
+	notify_on_expiry: z.boolean(),
+	notify_on_ssl_expiry: z.boolean(),
+	notify_on_dns_change: z.boolean(),
+	notify_on_registrar_change: z.boolean(),
+	notify_on_value_change: z.boolean(),
+	value_change_threshold: z.coerce.number().min(1).optional(),
+	// Quiet hours
+	quiet_hours_enabled: z.boolean(),
+	quiet_hours_start: z.string(),
+	quiet_hours_end: z.string(),
 })
 
 type FormData = z.infer<typeof formSchema>
@@ -76,8 +90,22 @@ export function DomainDialog({ open, onOpenChange, domain, isEdit = false }: Dom
 			current_value: 0,
 			renewal_cost: 0,
 			auto_renew: false,
+			monitor_type: "expiry",
+			// Expiry alerts
 			alert_days_before: 30,
 			ssl_alert_enabled: true,
+			ssl_alert_days: 14,
+			// Notification settings
+			notify_on_expiry: true,
+			notify_on_ssl_expiry: true,
+			notify_on_dns_change: false,
+			notify_on_registrar_change: false,
+			notify_on_value_change: false,
+			value_change_threshold: 10,
+			// Quiet hours
+			quiet_hours_enabled: false,
+			quiet_hours_start: "22:00",
+			quiet_hours_end: "08:00",
 		},
 	})
 
@@ -91,8 +119,22 @@ export function DomainDialog({ open, onOpenChange, domain, isEdit = false }: Dom
 				current_value: domain.current_value || 0,
 				renewal_cost: domain.renewal_cost || 0,
 				auto_renew: domain.auto_renew || false,
+				monitor_type: domain.monitor_type || "expiry",
+				// Expiry alerts
 				alert_days_before: domain.alert_days_before || 30,
 				ssl_alert_enabled: domain.ssl_alert_enabled || true,
+				ssl_alert_days: domain.ssl_alert_days || 14,
+				// Notification settings
+				notify_on_expiry: domain.notify_on_expiry !== false,
+				notify_on_ssl_expiry: domain.notify_on_ssl_expiry !== false,
+				notify_on_dns_change: domain.notify_on_dns_change || false,
+				notify_on_registrar_change: domain.notify_on_registrar_change || false,
+				notify_on_value_change: domain.notify_on_value_change || false,
+				value_change_threshold: domain.value_change_threshold || 10,
+				// Quiet hours
+				quiet_hours_enabled: domain.quiet_hours_enabled || false,
+				quiet_hours_start: domain.quiet_hours_start || "22:00",
+				quiet_hours_end: domain.quiet_hours_end || "08:00",
 			})
 		} else if (open && !isEdit) {
 			form.reset({
@@ -103,8 +145,22 @@ export function DomainDialog({ open, onOpenChange, domain, isEdit = false }: Dom
 				current_value: 0,
 				renewal_cost: 0,
 				auto_renew: false,
+				monitor_type: "expiry",
+				// Expiry alerts
 				alert_days_before: 30,
 				ssl_alert_enabled: true,
+				ssl_alert_days: 14,
+				// Notification settings
+				notify_on_expiry: true,
+				notify_on_ssl_expiry: true,
+				notify_on_dns_change: false,
+				notify_on_registrar_change: false,
+				notify_on_value_change: false,
+				value_change_threshold: 10,
+				// Quiet hours
+				quiet_hours_enabled: false,
+				quiet_hours_start: "22:00",
+				quiet_hours_end: "08:00",
 			})
 			setLookupData(null)
 		}
@@ -173,8 +229,22 @@ export function DomainDialog({ open, onOpenChange, domain, isEdit = false }: Dom
 			current_value: data.current_value,
 			renewal_cost: data.renewal_cost,
 			auto_renew: data.auto_renew,
+			monitor_type: data.monitor_type,
+			// Expiry alerts
 			alert_days_before: data.alert_days_before,
 			ssl_alert_enabled: data.ssl_alert_enabled,
+			ssl_alert_days: data.ssl_alert_days,
+			// Notification settings
+			notify_on_expiry: data.notify_on_expiry,
+			notify_on_ssl_expiry: data.notify_on_ssl_expiry,
+			notify_on_dns_change: data.notify_on_dns_change,
+			notify_on_registrar_change: data.notify_on_registrar_change,
+			notify_on_value_change: data.notify_on_value_change,
+			value_change_threshold: data.notify_on_value_change ? data.value_change_threshold : undefined,
+			// Quiet hours
+			quiet_hours_enabled: data.quiet_hours_enabled,
+			quiet_hours_start: data.quiet_hours_enabled ? data.quiet_hours_start : undefined,
+			quiet_hours_end: data.quiet_hours_enabled ? data.quiet_hours_end : undefined,
 		}
 
 		if (isEdit && domain) {
@@ -187,8 +257,22 @@ export function DomainDialog({ open, onOpenChange, domain, isEdit = false }: Dom
 					current_value: payload.current_value,
 					renewal_cost: payload.renewal_cost,
 					auto_renew: payload.auto_renew,
+					monitor_type: payload.monitor_type,
+					// Expiry alerts
 					alert_days_before: payload.alert_days_before,
 					ssl_alert_enabled: payload.ssl_alert_enabled,
+					ssl_alert_days: payload.ssl_alert_days,
+					// Notification settings
+					notify_on_expiry: payload.notify_on_expiry,
+					notify_on_ssl_expiry: payload.notify_on_ssl_expiry,
+					notify_on_dns_change: payload.notify_on_dns_change,
+					notify_on_registrar_change: payload.notify_on_registrar_change,
+					notify_on_value_change: payload.notify_on_value_change,
+					value_change_threshold: payload.value_change_threshold,
+					// Quiet hours
+					quiet_hours_enabled: payload.quiet_hours_enabled,
+					quiet_hours_start: payload.quiet_hours_start,
+					quiet_hours_end: payload.quiet_hours_end,
 				},
 			})
 		} else {
@@ -231,7 +315,7 @@ export function DomainDialog({ open, onOpenChange, domain, isEdit = false }: Dom
 											<FormItem className="flex-1">
 												<FormLabel>Domain Name</FormLabel>
 												<FormControl>
-													<Input placeholder="example.com" {...field} />
+													<Input placeholder="example.com" autoFocus tabIndex={0} {...field} />
 												</FormControl>
 												<FormMessage />
 											</FormItem>
@@ -381,37 +465,259 @@ export function DomainDialog({ open, onOpenChange, domain, isEdit = false }: Dom
 							</TabsContent>
 
 							<TabsContent value="alerts" className="space-y-4 mt-4">
+								{/* Monitor Type */}
 								<FormField
 									control={form.control}
-									name="alert_days_before"
+									name="monitor_type"
 									render={({ field }) => (
-										<FormItem>
-											<FormLabel>Alert Days Before Expiry</FormLabel>
+										<FormItem className="rounded-lg border p-4">
+											<FormLabel className="font-medium">Monitoring Purpose</FormLabel>
 											<FormControl>
-												<Input type="number" min={1} max={365} {...field} />
+												<div className="grid grid-cols-3 gap-2 mt-2">
+													<Button
+														type="button"
+														variant={field.value === "expiry" ? "default" : "outline"}
+														onClick={() => field.onChange("expiry")}
+														className="flex-col h-auto py-3"
+													>
+														<span className="text-xs">Track Expiry</span>
+														<span className="text-[10px] opacity-70">Monitor expiration</span>
+													</Button>
+													<Button
+														type="button"
+														variant={field.value === "watchlist" ? "default" : "outline"}
+														onClick={() => field.onChange("watchlist")}
+														className="flex-col h-auto py-3"
+													>
+														<span className="text-xs">Watch to Buy</span>
+														<span className="text-[10px] opacity-70">Track availability</span>
+													</Button>
+													<Button
+														type="button"
+														variant={field.value === "portfolio" ? "default" : "outline"}
+														onClick={() => field.onChange("portfolio")}
+														className="flex-col h-auto py-3"
+													>
+														<span className="text-xs">Portfolio</span>
+														<span className="text-[10px] opacity-70">Value tracking</span>
+													</Button>
+												</div>
 											</FormControl>
 											<FormMessage />
 										</FormItem>
 									)}
 								/>
 
-								<FormField
-									control={form.control}
-									name="ssl_alert_enabled"
-									render={({ field }) => (
-										<FormItem className="flex items-center justify-between rounded-lg border p-3">
-											<div className="space-y-0.5">
-												<FormLabel>SSL Expiry Alerts</FormLabel>
-											</div>
-											<FormControl>
-												<Switch
-													checked={field.value}
-													onCheckedChange={field.onChange}
-												/>
-											</FormControl>
-										</FormItem>
+								{/* Domain Expiry Alerts */}
+								<div className="space-y-4 rounded-lg border p-4">
+									<h4 className="font-medium text-sm">Domain Expiry Alerts</h4>
+									
+									<FormField
+										control={form.control}
+										name="notify_on_expiry"
+										render={({ field }) => (
+											<FormItem className="flex items-center justify-between">
+												<div className="space-y-0.5">
+													<FormLabel>Notify before expiry</FormLabel>
+													<p className="text-xs text-muted-foreground">Alert when domain is about to expire</p>
+												</div>
+												<FormControl>
+													<Switch
+														checked={field.value}
+														onCheckedChange={field.onChange}
+													/>
+												</FormControl>
+											</FormItem>
+										)}
+									/>
+
+									{form.watch("notify_on_expiry") && (
+										<FormField
+											control={form.control}
+											name="alert_days_before"
+											render={({ field }) => (
+												<FormItem className="pl-4 border-l-2">
+													<FormLabel>Days before expiry</FormLabel>
+													<FormControl>
+														<Input type="number" min={1} max={365} className="w-32" {...field} />
+													</FormControl>
+													<FormMessage />
+												</FormItem>
+											)}
+										/>
 									)}
-								/>
+								</div>
+
+								{/* SSL Alerts */}
+								<div className="space-y-4 rounded-lg border p-4">
+									<h4 className="font-medium text-sm">SSL Certificate Alerts</h4>
+									
+									<FormField
+										control={form.control}
+										name="notify_on_ssl_expiry"
+										render={({ field }) => (
+											<FormItem className="flex items-center justify-between">
+												<div className="space-y-0.5">
+													<FormLabel>Notify on SSL expiry</FormLabel>
+													<p className="text-xs text-muted-foreground">Alert when SSL certificate expires</p>
+												</div>
+												<FormControl>
+													<Switch
+														checked={field.value}
+														onCheckedChange={field.onChange}
+													/>
+												</FormControl>
+											</FormItem>
+										)}
+									/>
+
+									{form.watch("notify_on_ssl_expiry") && (
+										<FormField
+											control={form.control}
+											name="ssl_alert_days"
+											render={({ field }) => (
+												<FormItem className="pl-4 border-l-2">
+													<FormLabel>Days before SSL expiry</FormLabel>
+													<FormControl>
+														<Input type="number" min={1} max={90} className="w-32" {...field} />
+													</FormControl>
+													<FormMessage />
+												</FormItem>
+											)}
+										/>
+									)}
+								</div>
+
+								{/* Change Detection Alerts */}
+								<div className="space-y-4 rounded-lg border p-4">
+									<h4 className="font-medium text-sm">Change Detection</h4>
+									
+									<FormField
+										control={form.control}
+										name="notify_on_dns_change"
+										render={({ field }) => (
+											<FormItem className="flex items-center justify-between">
+												<div className="space-y-0.5">
+													<FormLabel>DNS changes</FormLabel>
+													<p className="text-xs text-muted-foreground">Alert when DNS records change</p>
+												</div>
+												<FormControl>
+													<Switch
+														checked={field.value}
+														onCheckedChange={field.onChange}
+													/>
+												</FormControl>
+											</FormItem>
+										)}
+									/>
+
+									<FormField
+										control={form.control}
+										name="notify_on_registrar_change"
+										render={({ field }) => (
+											<FormItem className="flex items-center justify-between">
+												<div className="space-y-0.5">
+													<FormLabel>Registrar changes</FormLabel>
+													<p className="text-xs text-muted-foreground">Alert when registrar information changes</p>
+												</div>
+												<FormControl>
+													<Switch
+														checked={field.value}
+														onCheckedChange={field.onChange}
+													/>
+												</FormControl>
+											</FormItem>
+										)}
+									/>
+
+									<FormField
+										control={form.control}
+										name="notify_on_value_change"
+										render={({ field }) => (
+											<FormItem className="flex items-center justify-between">
+												<div className="space-y-0.5">
+													<FormLabel>Value changes</FormLabel>
+													<p className="text-xs text-muted-foreground">Alert when estimated value changes significantly</p>
+												</div>
+												<FormControl>
+													<Switch
+														checked={field.value}
+														onCheckedChange={field.onChange}
+													/>
+												</FormControl>
+											</FormItem>
+										)}
+									/>
+
+									{form.watch("notify_on_value_change") && (
+										<FormField
+											control={form.control}
+											name="value_change_threshold"
+											render={({ field }) => (
+												<FormItem className="pl-4 border-l-2">
+													<FormLabel>Change threshold (%)</FormLabel>
+													<FormControl>
+														<Input type="number" min={1} max={100} className="w-32" {...field} />
+													</FormControl>
+													<FormMessage />
+												</FormItem>
+											)}
+										/>
+									)}
+								</div>
+
+								{/* Quiet Hours */}
+								<div className="space-y-4 rounded-lg border p-4">
+									<h4 className="font-medium text-sm">Quiet Hours</h4>
+									
+									<FormField
+										control={form.control}
+										name="quiet_hours_enabled"
+										render={({ field }) => (
+											<FormItem className="flex items-center justify-between">
+												<div className="space-y-0.5">
+													<FormLabel>Enable quiet hours</FormLabel>
+													<p className="text-xs text-muted-foreground">Suppress notifications during specific hours</p>
+												</div>
+												<FormControl>
+													<Switch
+														checked={field.value}
+														onCheckedChange={field.onChange}
+													/>
+												</FormControl>
+											</FormItem>
+										)}
+									/>
+
+									{form.watch("quiet_hours_enabled") && (
+										<div className="grid grid-cols-2 gap-4 pl-4 border-l-2">
+											<FormField
+												control={form.control}
+												name="quiet_hours_start"
+												render={({ field }) => (
+													<FormItem>
+														<FormLabel>Start time</FormLabel>
+														<FormControl>
+															<Input type="time" {...field} />
+														</FormControl>
+													</FormItem>
+												)}
+											/>
+											<FormField
+												control={form.control}
+												name="quiet_hours_end"
+												render={({ field }) => (
+													<FormItem>
+														<FormLabel>End time</FormLabel>
+														<FormControl>
+															<Input type="time" {...field} />
+														</FormControl>
+													</FormItem>
+												)}
+											/>
+										</div>
+									)}
+								</div>
 							</TabsContent>
 						</Tabs>
 

internal/site/src/components/domains-table/domains-table.tsx

@@ -1,9 +1,27 @@
 "use client"
 
-import { useState } from "react"
+import { useState, useMemo } from "react"
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
 import { useToast } from "@/components/ui/use-toast"
+import { Trans, useLingui } from "@lingui/react/macro"
 import { Button } from "@/components/ui/button"
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+} from "@/components/ui/alert-dialog"
+import {
+	Card,
+	CardContent,
+	CardHeader,
+	CardTitle,
+	CardDescription,
+} from "@/components/ui/card"
 import {
 	Table,
 	TableBody,
@@ -16,9 +34,14 @@ import {
 	DropdownMenu,
 	DropdownMenuContent,
 	DropdownMenuItem,
+	DropdownMenuLabel,
+	DropdownMenuRadioGroup,
+	DropdownMenuRadioItem,
+	DropdownMenuSeparator,
 	DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
 import { Badge } from "@/components/ui/badge"
+import { Input } from "@/components/ui/input"
 import {
 	getDomains,
 	deleteDomain,
@@ -27,37 +50,80 @@ import {
 	getStatusLabel,
 	formatDate,
 	formatDays,
-	cleanDomain,
 	type Domain,
 } from "@/lib/domains"
-import { MoreHorizontal, Plus, RefreshCw, Globe, AlertTriangle, CheckCircle2, Clock } from "lucide-react"
+import {
+	MoreHorizontal,
+	Plus,
+	RefreshCw,
+	Globe,
+	AlertTriangle,
+	CheckCircle2,
+	Clock,
+	Settings2Icon,
+	FilterIcon,
+	LayoutGridIcon,
+	LayoutListIcon,
+} from "lucide-react"
 import { DomainDialog } from "./domain-dialog"
 import { Link } from "@/components/router"
+import { useBrowserStorage } from "@/lib/utils"
+
+type ViewMode = "table" | "grid"
+type StatusFilter = "all" | "active" | "expiring" | "expired" | "unknown" | "watchlist"
 
 export default function DomainsTable() {
+	const { t } = useLingui()
 	const { toast } = useToast()
 	const queryClient = useQueryClient()
 	const [dialogOpen, setDialogOpen] = useState(false)
 	const [editingDomain, setEditingDomain] = useState<Domain | null>(null)
+	const [deleteConfirmId, setDeleteConfirmId] = useState<string | null>(null)
+	const [filter, setFilter] = useState("")
+	const [statusFilter, setStatusFilter] = useState<StatusFilter>("all")
+	
+	const [viewMode, setViewMode] = useBrowserStorage<ViewMode>(
+		"domainsViewMode",
+		window.innerWidth < 1024 ? "grid" : "table"
+	)
 
-	const { data: domains, isLoading } = useQuery({
+	const { data: domains = [], isLoading } = useQuery({
 		queryKey: ["domains"],
 		queryFn: getDomains,
 	})
 
+	// Filter by status first
+	const statusFilteredDomains = useMemo(() => {
+		if (statusFilter === "all") return domains
+		return domains.filter((d) => d.status === statusFilter)
+	}, [domains, statusFilter])
+
+	// Then filter by search text
+	const filteredDomains = useMemo(() => {
+		if (!filter) return statusFilteredDomains
+		const f = filter.toLowerCase()
+		return statusFilteredDomains.filter(
+			(d) =>
+				d.domain_name.toLowerCase().includes(f) ||
+				(d.registrar_name || "").toLowerCase().includes(f)
+		)
+	}, [statusFilteredDomains, filter])
+
+	const statusCounts = useMemo(() => {
+		const total = domains.length
+		const active = domains.filter((d) => d.status === "active").length
+		const expiring = domains.filter((d) => d.status === "expiring").length
+		const expired = domains.filter((d) => d.status === "expired").length
+		const unknown = domains.filter((d) => d.status === "unknown").length
+		return { total, active, expiring, expired, unknown }
+	}, [domains])
+
 	const deleteMutation = useMutation({
 		mutationFn: deleteDomain,
 		onSuccess: () => {
 			toast({ title: "Domain deleted successfully" })
 			queryClient.invalidateQueries({ queryKey: ["domains"] })
 		},
-		onError: (error: Error) => {
-			toast({
-				title: "Failed to delete domain",
-				description: error.message,
-				variant: "destructive",
-			})
-		},
 	})
 
 	const refreshMutation = useMutation({
@@ -66,13 +132,6 @@ export default function DomainsTable() {
 			toast({ title: "Domain refresh started" })
 			queryClient.invalidateQueries({ queryKey: ["domains"] })
 		},
-		onError: (error: Error) => {
-			toast({
-				title: "Failed to refresh domain",
-				description: error.message,
-				variant: "destructive",
-			})
-		},
 	})
 
 	const handleEdit = (domain: Domain) => {
@@ -86,9 +145,7 @@ export default function DomainsTable() {
 	}
 
 	const handleDelete = (id: string) => {
-		if (confirm("Are you sure you want to delete this domain?")) {
-			deleteMutation.mutate(id)
-		}
+		setDeleteConfirmId(id)
 	}
 
 	const handleRefresh = (id: string) => {
@@ -109,136 +166,319 @@ export default function DomainsTable() {
 	}
 
 	if (isLoading) {
-		return <div className="p-4">Loading...</div>
+		return (
+			<Card className="w-full px-3 py-5 sm:py-6 sm:px-6">
+				<CardContent className="p-0">
+					<div className="p-8 text-center text-muted-foreground">Loading...</div>
+				</CardContent>
+			</Card>
+		)
 	}
 
 	return (
-		<div className="space-y-4">
-			<div className="flex items-center justify-between">
-				<h2 className="text-lg font-semibold">Domain Expiry Monitoring</h2>
-				<Button onClick={handleAdd}>
-					<Plus className="mr-2 h-4 w-4" />
-					Add Domain
-				</Button>
-			</div>
+		<>
+			<Card className="w-full px-3 py-5 sm:py-6 sm:px-6">
+			<CardHeader className="p-0 pb-5">
+				<div className="flex flex-col gap-4">
+					{/* Title row */}
+					<div className="flex flex-col sm:flex-row sm:items-start justify-between gap-4">
+						<div className="flex-1">
+							<CardTitle className="text-xl mb-2 flex items-center gap-2">
+								<Globe className="h-5 w-5 text-primary" />
+								<Trans>Domain Monitoring</Trans>
+							</CardTitle>
+							<CardDescription className="flex flex-wrap items-center gap-x-2 gap-y-1">
+								<Trans>Track domain expiry dates and watch domains for purchase</Trans>
+								<span className="text-xs text-muted-foreground">
+									({statusCounts.active} <CheckCircle2 className="inline h-3 w-3 text-green-500" />
+									{statusCounts.expiring > 0 && (
+										<>
+											{" "}
+											{statusCounts.expiring}{" "}
+											<Clock className="inline h-3 w-3 text-yellow-500" />
+										</>
+									)}
+									{statusCounts.expired > 0 && (
+										<>
+											{" "}
+											{statusCounts.expired}{" "}
+											<AlertTriangle className="inline h-3 w-3 text-red-500" />
+										</>
+									)}
+									/ {statusCounts.total})
+								</span>
+							</CardDescription>
+						</div>
+						<Button onClick={handleAdd} className="shrink-0">
+							<Plus className="mr-2 h-4 w-4" />
+							<Trans>Add Domain</Trans>
+						</Button>
+					</div>
 
-			<div className="rounded-md border">
-				<Table>
-					<TableHeader>
-						<TableRow>
-							<TableHead>Domain</TableHead>
-							<TableHead>Status</TableHead>
-							<TableHead>Expiry</TableHead>
-							<TableHead>Days Left</TableHead>
-							<TableHead>Registrar</TableHead>
-							<TableHead>SSL Expiry</TableHead>
-							<TableHead className="w-[100px]">Actions</TableHead>
-						</TableRow>
-					</TableHeader>
-					<TableBody>
-						{domains?.length === 0 ? (
-							<TableRow>
-								<TableCell colSpan={7} className="text-center py-8 text-muted-foreground">
-									No domains tracked. Add domains to monitor their expiry dates.
-								</TableCell>
-							</TableRow>
-						) : (
-							domains?.map((domain) => (
-								<TableRow key={domain.id}>
-									<TableCell className="font-medium">
-										<Link href={`/domain/${domain.id}`} className="flex items-center gap-2 cursor-pointer">
-											{domain.favicon_url && (
-												<img
-													src={domain.favicon_url}
-													alt=""
-													className="h-4 w-4"
-													onError={(e) => (e.currentTarget.style.display = "none")}
-												></img>
+					{/* Filter row */}
+					<div className="flex flex-col sm:flex-row gap-2">
+						<div className="relative flex-1">
+							<Input
+								placeholder={t`Filter domains...`}
+								onChange={(e) => setFilter(e.target.value)}
+								value={filter}
+								className="w-full"
+							/>
+						</div>
+						<DropdownMenu>
+							<DropdownMenuTrigger asChild>
+								<Button variant="outline">
+									<Settings2Icon className="me-1.5 size-4 opacity-80" />
+									<Trans>View</Trans>
+								</Button>
+							</DropdownMenuTrigger>
+							<DropdownMenuContent align="end" className="min-w-48">
+								{/* Layout */}
+								<DropdownMenuLabel className="flex items-center gap-2">
+									<LayoutGridIcon className="size-4" />
+									<Trans>Layout</Trans>
+								</DropdownMenuLabel>
+								<DropdownMenuRadioGroup value={viewMode} onValueChange={(v) => setViewMode(v as ViewMode)}>
+									<DropdownMenuRadioItem value="table" className="gap-2">
+										<LayoutListIcon className="size-4" />
+										<Trans>Table</Trans>
+									</DropdownMenuRadioItem>
+									<DropdownMenuRadioItem value="grid" className="gap-2">
+										<LayoutGridIcon className="size-4" />
+										<Trans>Grid</Trans>
+									</DropdownMenuRadioItem>
+								</DropdownMenuRadioGroup>
+								<DropdownMenuSeparator />
+
+								{/* Status Filter */}
+								<DropdownMenuLabel className="flex items-center gap-2">
+									<FilterIcon className="size-4" />
+									<Trans>Status</Trans>
+								</DropdownMenuLabel>
+								<DropdownMenuRadioGroup value={statusFilter} onValueChange={(v) => setStatusFilter(v as StatusFilter)}>
+									<DropdownMenuRadioItem value="all">
+										<Trans>All ({statusCounts.total})</Trans>
+									</DropdownMenuRadioItem>
+									<DropdownMenuRadioItem value="active">
+										<Trans>Active ({statusCounts.active})</Trans>
+									</DropdownMenuRadioItem>
+									<DropdownMenuRadioItem value="expiring">
+										<Trans>Expiring ({statusCounts.expiring})</Trans>
+									</DropdownMenuRadioItem>
+									<DropdownMenuRadioItem value="expired">
+										<Trans>Expired ({statusCounts.expired})</Trans>
+									</DropdownMenuRadioItem>
+									<DropdownMenuRadioItem value="unknown">
+										<Trans>Unknown ({statusCounts.unknown})</Trans>
+									</DropdownMenuRadioItem>
+								</DropdownMenuRadioGroup>
+							</DropdownMenuContent>
+						</DropdownMenu>
+					</div>
+				</div>
+			</CardHeader>
+
+				<CardContent className="p-0">
+					{filteredDomains.length === 0 ? (
+						<div className="p-8 text-center text-muted-foreground">
+							{filter || statusFilter !== "all" ? (
+								"No domains match your filters."
+							) : (
+								<div>
+									<p className="mb-4">No domains tracked. Add domains to monitor their expiry dates or track domains you want to buy.</p>
+									<Button onClick={handleAdd} variant="outline">
+										<Plus className="mr-2 h-4 w-4" />
+										Add your first domain
+									</Button>
+								</div>
+							)}
+						</div>
+					) : viewMode === "table" ? (
+						<div className="rounded-md border">
+							<Table>
+								<TableHeader>
+									<TableRow>
+										<TableHead>Domain</TableHead>
+										<TableHead>Status</TableHead>
+										<TableHead>Expiry</TableHead>
+										<TableHead>Days Left</TableHead>
+										<TableHead>Registrar</TableHead>
+										<TableHead>SSL Expiry</TableHead>
+										<TableHead className="w-[100px]">Actions</TableHead>
+									</TableRow>
+									</TableHeader>
+									<TableBody>
+										{filteredDomains.map((domain) => (
+											<TableRow key={domain.id}>
+												<TableCell className="font-medium">
+													<Link href={`/domain/${domain.id}`} className="flex items-center gap-2 cursor-pointer">
+														{domain.favicon_url && (
+															<img
+																src={domain.favicon_url}
+																alt=""
+																className="h-4 w-4"
+																onError={(e) => (e.currentTarget.style.display = "none")}
+															/>
+														)}
+														<span className="hover:underline">{domain.domain_name}</span>
+													</Link>
+												</TableCell>
+												<TableCell>
+													<div className="flex items-center gap-2">
+														{getStatusIcon(domain.status)}
+														<Badge className={getStatusBadgeColor(domain.status)}>
+															{getStatusLabel(domain.status)}
+														</Badge>
+													</div>
+												</TableCell>
+												<TableCell>
+													{domain.expiry_date ? formatDate(domain.expiry_date) : "Unknown"}
+												</TableCell>
+												<TableCell>
+											<span className={
+															domain.days_until_expiry !== undefined && domain.days_until_expiry >= 0 && domain.days_until_expiry <= 30
+															? domain.days_until_expiry <= 7
+																? "text-red-600 font-semibold"
+																: "text-yellow-600"
+															: ""
+												}>
+													{formatDays(domain.days_until_expiry)}
+												</span>
+											</TableCell>
+										<TableCell>{domain.registrar_name || "Unknown"}</TableCell>
+										<TableCell>
+											{domain.ssl_valid_to ? (
+												<span
+													className={
+														domain.ssl_days_until !== undefined && domain.ssl_days_until >= 0 && domain.ssl_days_until <= 14
+														? "text-red-600"
+														: ""
+													}
+												>
+													{formatDays(domain.ssl_days_until)}
+												</span>
+											) : (
+												"N/A"
 											)}
-											<span className="hover:underline">{domain.domain_name}</span>
-										</Link>
-									</TableCell>
-									<TableCell>
+										</TableCell>
+												<TableCell>
+													<DropdownMenu>
+														<DropdownMenuTrigger asChild>
+															<Button variant="ghost" size="icon">
+																<MoreHorizontal className="h-4 w-4" />
+															</Button>
+														</DropdownMenuTrigger>
+														<DropdownMenuContent align="end">
+															<DropdownMenuItem onClick={() => handleEdit(domain)}>
+																Edit
+															</DropdownMenuItem>
+															<DropdownMenuItem
+																onClick={() => handleRefresh(domain.id)}
+																disabled={refreshMutation.isPending}
+															>
+																<RefreshCw className="mr-2 h-4 w-4" />
+																Refresh
+															</DropdownMenuItem>
+															<DropdownMenuItem asChild>
+																<a
+																	href={`https://${domain.domain_name}`}
+																	target="_blank"
+																	rel="noopener noreferrer"
+																>
+																	<Globe className="mr-2 h-4 w-4" />
+																	Visit
+																</a>
+															</DropdownMenuItem>
+															<DropdownMenuItem
+																onClick={() => handleDelete(domain.id)}
+																className="text-destructive"
+															>
+																Delete
+															</DropdownMenuItem>
+														</DropdownMenuContent>
+													</DropdownMenu>
+												</TableCell>
+											</TableRow>
+										))}
+									</TableBody>
+								</Table>
+							</div>
+						) : (
+							<div className="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
+								{filteredDomains.map((domain) => (
+									<div key={domain.id} className="rounded-lg border bg-card p-4 space-y-3 hover:shadow-md transition-shadow">
+										<div className="flex items-start justify-between">
+											<Link href={`/domain/${domain.id}`} className="flex items-center gap-3 cursor-pointer min-w-0">
+												{domain.favicon_url && (
+													<img
+														src={domain.favicon_url}
+														alt=""
+														className="h-5 w-5 shrink-0"
+														onError={(e) => (e.currentTarget.style.display = "none")}
+													/>
+												)}
+												<div className="min-w-0">
+													<div className="font-medium truncate hover:underline">{domain.domain_name}</div>
+												</div>
+											</Link>
+											<DropdownMenu>
+												<DropdownMenuTrigger asChild>
+													<Button variant="ghost" size="icon" className="h-8 w-8 shrink-0">
+														<MoreHorizontal className="h-4 w-4" />
+													</Button>
+												</DropdownMenuTrigger>
+												<DropdownMenuContent align="end">
+													<DropdownMenuItem onClick={() => handleEdit(domain)}>Edit</DropdownMenuItem>
+													<DropdownMenuItem onClick={() => handleRefresh(domain.id)} disabled={refreshMutation.isPending}>
+														<RefreshCw className="mr-2 h-4 w-4" />
+														Refresh
+													</DropdownMenuItem>
+													<DropdownMenuItem onClick={() => handleDelete(domain.id)} className="text-destructive">
+														Delete
+													</DropdownMenuItem>
+												</DropdownMenuContent>
+											</DropdownMenu>
+										</div>
+
 										<div className="flex items-center gap-2">
 											{getStatusIcon(domain.status)}
 											<Badge className={getStatusBadgeColor(domain.status)}>
 												{getStatusLabel(domain.status)}
 											</Badge>
 										</div>
-									</TableCell>
-									<TableCell>
-										{domain.expiry_date ? formatDate(domain.expiry_date) : "Unknown"}
-									</TableCell>
-									<TableCell>
-										<span className={
-											domain.days_until_expiry !== undefined && domain.days_until_expiry <= 30
-												? domain.days_until_expiry <= 7
-													? "text-red-600 font-semibold"
-													: "text-yellow-600"
-												: ""
-										}>
-											{formatDays(domain.days_until_expiry)}
-										</span>
-									</TableCell>
-									<TableCell>{domain.registrar_name || "Unknown"}</TableCell>
-									<TableCell>
-										{domain.ssl_valid_to ? (
-											<span
-												className={
-													domain.ssl_days_until !== undefined && domain.ssl_days_until <= 14
+
+										<div className="grid grid-cols-2 gap-2 text-sm">
+											<div>
+												<div className="text-xs text-muted-foreground">Days Left</div>
+												<span className={
+												domain.days_until_expiry !== undefined && domain.days_until_expiry >= 0 && domain.days_until_expiry <= 30
+													? domain.days_until_expiry <= 7
+														? "text-red-600 font-semibold"
+														: "text-yellow-600"
+													: ""
+											}>
+												{formatDays(domain.days_until_expiry)}
+											</span>
+											</div>
+											<div>
+												<div className="text-xs text-muted-foreground">SSL</div>
+												<span
+													className={
+														domain.ssl_days_until !== undefined && domain.ssl_days_until >= 0 && domain.ssl_days_until <= 14
 														? "text-red-600"
 														: ""
-												}
-											>
-												{formatDays(domain.ssl_days_until)}
-											</span>
-										) : (
-											"N/A"
-										)}
-									</TableCell>
-									<TableCell>
-										<DropdownMenu>
-											<DropdownMenuTrigger asChild>
-												<Button variant="ghost" size="icon">
-													<MoreHorizontal className="h-4 w-4" />
-												</Button>
-											</DropdownMenuTrigger>
-											<DropdownMenuContent align="end">
-												<DropdownMenuItem onClick={() => handleEdit(domain)}>
-													Edit
-												</DropdownMenuItem>
-												<DropdownMenuItem
-													onClick={() => handleRefresh(domain.id)}
-													disabled={refreshMutation.isPending}
+													}
 												>
-													<RefreshCw className="mr-2 h-4 w-4" />
-													Refresh
-												</DropdownMenuItem>
-												<DropdownMenuItem asChild>
-													<a
-														href={`https://${domain.domain_name}`}
-														target="_blank"
-														rel="noopener noreferrer"
-													>
-														<Globe className="mr-2 h-4 w-4" />
-														Visit
-													</a>
-												</DropdownMenuItem>
-												<DropdownMenuItem
-													onClick={() => handleDelete(domain.id)}
-													className="text-destructive"
-												>
-													Delete
-												</DropdownMenuItem>
-											</DropdownMenuContent>
-										</DropdownMenu>
-									</TableCell>
-								</TableRow>
-							))
+													{formatDays(domain.ssl_days_until)}
+												</span>
+											</div>
+										</div>
+									</div>
+								))}
+							</div>
 						)}
-					</TableBody>
-				</Table>
-			</div>
+					</CardContent>
+				</Card>
 
 			<DomainDialog
 				open={dialogOpen}
@@ -246,6 +486,34 @@ export default function DomainsTable() {
 				domain={editingDomain}
 				isEdit={!!editingDomain}
 			/>
-		</div>
+			<AlertDialog open={!!deleteConfirmId} onOpenChange={() => setDeleteConfirmId(null)}>
+				<AlertDialogContent>
+					<AlertDialogHeader>
+						<AlertDialogTitle>
+							<Trans>Delete Domain</Trans>
+						</AlertDialogTitle>
+						<AlertDialogDescription>
+							<Trans>Are you sure you want to delete this domain? This action cannot be undone.</Trans>
+						</AlertDialogDescription>
+					</AlertDialogHeader>
+					<AlertDialogFooter>
+						<AlertDialogCancel>
+							<Trans>Cancel</Trans>
+						</AlertDialogCancel>
+						<AlertDialogAction
+							onClick={() => {
+								if (deleteConfirmId) {
+									deleteMutation.mutate(deleteConfirmId)
+									setDeleteConfirmId(null)
+								}
+							}}
+							className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+						>
+							<Trans>Delete</Trans>
+						</AlertDialogAction>
+					</AlertDialogFooter>
+				</AlertDialogContent>
+			</AlertDialog>
+		</>
 	)
 }

internal/site/src/components/login/auth-form.tsx

@@ -129,11 +129,11 @@ export function UserAuthForm({
 		[isFirstRun]
 	)
 
-	const authProviders = authMethods.oauth2.providers ?? []
-	const oauthEnabled = authMethods.oauth2.enabled && authProviders.length > 0
-	const passwordEnabled = authMethods.password.enabled
-	const otpEnabled = authMethods.otp.enabled
-	const mfaEnabled = authMethods.mfa.enabled
+	const authProviders = authMethods.oauth2?.providers ?? []
+	const oauthEnabled = authMethods.oauth2?.enabled && authProviders.length > 0
+	const passwordEnabled = authMethods.password?.enabled ?? false
+	const otpEnabled = authMethods.otp?.enabled ?? false
+	const mfaEnabled = authMethods.mfa?.enabled ?? false
 
 	function loginWithOauth(provider: AuthProviderInfo, forcePopup = false) {
 		setIsOauthLoading(true)
@@ -337,7 +337,7 @@ export function UserAuthForm({
 			)}
 			{oauthEnabled && (
 				<div className="grid gap-2 -mt-1">
-					{authMethods.oauth2.providers.map((provider) => (
+					{authProviders.map((provider) => (
 						<button
 							key={provider.name}
 							type="button"

internal/site/src/components/monitors-table/add-monitor-dialog.tsx

@@ -15,7 +15,9 @@ import { Label } from "@/components/ui/label"
 import {
 	Select,
 	SelectContent,
+	SelectGroup,
 	SelectItem,
+	SelectLabel,
 	SelectTrigger,
 	SelectValue,
 } from "@/components/ui/select"
@@ -32,15 +34,41 @@ import {
 	type UpdateMonitorRequest,
 } from "@/lib/monitors"
 
-const MONITOR_TYPES: { value: MonitorType; label: string }[] = [
-	{ value: "http", label: "HTTP" },
-	{ value: "https", label: "HTTPS" },
-	{ value: "tcp", label: "TCP Port" },
-	{ value: "ping", label: "Ping" },
-	{ value: "dns", label: "DNS" },
-	{ value: "keyword", label: "HTTP Keyword" },
-	{ value: "json-query", label: "HTTP JSON" },
-	{ value: "docker", label: "Docker Container" },
+const MONITOR_TYPES: { value: MonitorType; label: string; group: string }[] = [
+	// General
+	{ value: "http", label: "HTTP", group: "General" },
+	{ value: "https", label: "HTTPS", group: "General" },
+	{ value: "keyword", label: "HTTP Keyword", group: "General" },
+	{ value: "json-query", label: "HTTP JSON", group: "General" },
+	{ value: "grpc-keyword", label: "gRPC Keyword", group: "General" },
+	{ value: "real-browser", label: "Browser Engine (Beta)", group: "General" },
+	{ value: "tcp", label: "TCP Port", group: "General" },
+	{ value: "ping", label: "Ping", group: "General" },
+	{ value: "dns", label: "DNS", group: "General" },
+	{ value: "docker", label: "Docker Container", group: "General" },
+	{ value: "push", label: "Push", group: "General" },
+	{ value: "manual", label: "Manual", group: "General" },
+	// Network / Protocol
+	{ value: "mqtt", label: "MQTT", group: "Network / Protocol" },
+	{ value: "rabbitmq", label: "RabbitMQ", group: "Network / Protocol" },
+	{ value: "kafka-producer", label: "Kafka Producer", group: "Network / Protocol" },
+	{ value: "smtp", label: "SMTP", group: "Network / Protocol" },
+	{ value: "snmp", label: "SNMP", group: "Network / Protocol" },
+	{ value: "websocket-upgrade", label: "WebSocket Upgrade", group: "Network / Protocol" },
+	{ value: "sip-options", label: "SIP Options Ping", group: "Network / Protocol" },
+	{ value: "tailscale-ping", label: "Tailscale Ping", group: "Network / Protocol" },
+	{ value: "globalping", label: "Globalping", group: "Network / Protocol" },
+	// Database
+	{ value: "mysql", label: "MySQL / MariaDB", group: "Database" },
+	{ value: "postgresql", label: "PostgreSQL", group: "Database" },
+	{ value: "mongodb", label: "MongoDB", group: "Database" },
+	{ value: "redis", label: "Redis", group: "Database" },
+	{ value: "sqlserver", label: "Microsoft SQL Server", group: "Database" },
+	{ value: "oracledb", label: "Oracle DB", group: "Database" },
+	{ value: "radius", label: "RADIUS", group: "Database" },
+	// Games
+	{ value: "gamedig", label: "GameDig", group: "Game Server" },
+	{ value: "steam", label: "Steam API", group: "Game Server" },
 ]
 
 const HTTP_METHODS = ["GET", "POST", "PUT", "DELETE", "HEAD", "OPTIONS", "PATCH"]
@@ -88,6 +116,27 @@ export function AddMonitorDialog({
 	const [certExpiryNotification, setCertExpiryNotification] = useState(false)
 	const [certExpiryDays, setCertExpiryDays] = useState(14)
 
+	// Database / network fields
+	const [dbConnectionString, setDbConnectionString] = useState("")
+	const [dbUsername, setDbUsername] = useState("")
+	const [dbPassword, setDbPassword] = useState("")
+	const [dbName, setDbName] = useState("")
+	const [mqttTopic, setMqttTopic] = useState("")
+	const [grpcKeyword, setGrpcKeyword] = useState("")
+	
+	// Notification settings
+	const [notifyOnDown, setNotifyOnDown] = useState(true)
+	const [notifyOnRecover, setNotifyOnRecover] = useState(true)
+	const [notifyOnResponseTime, setNotifyOnResponseTime] = useState(false)
+	const [responseTimeThreshold, setResponseTimeThreshold] = useState(1000)
+	const [notifyOnUptimeDrop, setNotifyOnUptimeDrop] = useState(false)
+	const [uptimeThreshold, setUptimeThreshold] = useState(95)
+	const [notifyRepeatedFailures, setNotifyRepeatedFailures] = useState(true)
+	const [consecutiveFailures, setConsecutiveFailures] = useState(3)
+	const [quietHoursStart, setQuietHoursStart] = useState("22:00")
+	const [quietHoursEnd, setQuietHoursEnd] = useState("08:00")
+	const [quietHoursEnabled, setQuietHoursEnabled] = useState(false)
+
 	// Reset form when dialog opens/closes
 	useEffect(() => {
 		if (open) {
@@ -114,6 +163,19 @@ export function AddMonitorDialog({
 				setIgnoreTLSError(monitor.ignore_tls_error || false)
 				setCertExpiryNotification(monitor.cert_expiry_notification || false)
 				setCertExpiryDays(monitor.cert_expiry_days || 14)
+				
+				// Load notification settings
+				setNotifyOnDown(monitor.notify_on_down !== false)
+				setNotifyOnRecover(monitor.notify_on_recover !== false)
+				setNotifyOnResponseTime(monitor.notify_on_response_time || false)
+				setResponseTimeThreshold(monitor.response_time_threshold || 1000)
+				setNotifyOnUptimeDrop(monitor.notify_on_uptime_drop || false)
+				setUptimeThreshold(monitor.uptime_threshold || 95)
+				setNotifyRepeatedFailures(monitor.notify_repeated_failures !== false)
+				setConsecutiveFailures(monitor.consecutive_failures || 3)
+				setQuietHoursStart(monitor.quiet_hours_start || "22:00")
+				setQuietHoursEnd(monitor.quiet_hours_end || "08:00")
+				setQuietHoursEnabled(monitor.quiet_hours_enabled || false)
 			} else {
 				// Reset to defaults for new monitor
 				setName("")
@@ -137,6 +199,19 @@ export function AddMonitorDialog({
 				setIgnoreTLSError(false)
 				setCertExpiryNotification(false)
 				setCertExpiryDays(14)
+				
+				// Reset notification settings
+				setNotifyOnDown(true)
+				setNotifyOnRecover(true)
+				setNotifyOnResponseTime(false)
+				setResponseTimeThreshold(1000)
+				setNotifyOnUptimeDrop(false)
+				setUptimeThreshold(95)
+				setNotifyRepeatedFailures(true)
+				setConsecutiveFailures(3)
+				setQuietHoursStart("22:00")
+				setQuietHoursEnd("08:00")
+				setQuietHoursEnabled(false)
 			}
 			setActiveTab("basic")
 		}
@@ -186,8 +261,8 @@ export function AddMonitorDialog({
 		if (isEdit && monitor) {
 			const data: UpdateMonitorRequest = {
 				name: name.trim(),
-				url: url.trim() || undefined,
-				hostname: hostname.trim() || undefined,
+				url: needsDbOptions ? dbConnectionString.trim() || undefined : url.trim() || undefined,
+				hostname: needsHostname ? hostname.trim() || undefined : undefined,
 				port: port ? Number(port) : undefined,
 				method: ["http", "https", "keyword", "json-query"].includes(type)
 					? method
@@ -210,14 +285,32 @@ export function AddMonitorDialog({
 						: undefined,
 				cert_expiry_notification: type === "https" ? certExpiryNotification : undefined,
 				cert_expiry_days: type === "https" ? certExpiryDays : undefined,
+				// Notification settings
+				notify_on_down: notifyOnDown,
+				notify_on_recover: notifyOnRecover,
+				notify_on_response_time: notifyOnResponseTime,
+				response_time_threshold: notifyOnResponseTime ? responseTimeThreshold : undefined,
+				notify_on_uptime_drop: notifyOnUptimeDrop,
+				uptime_threshold: notifyOnUptimeDrop ? uptimeThreshold : undefined,
+				notify_repeated_failures: notifyRepeatedFailures,
+				consecutive_failures: consecutiveFailures,
+				quiet_hours_enabled: quietHoursEnabled,
+				quiet_hours_start: quietHoursEnabled ? quietHoursStart : undefined,
+				quiet_hours_end: quietHoursEnabled ? quietHoursEnd : undefined,
+				// Database / network extra fields
+				db_username: needsDbOptions ? dbUsername.trim() || undefined : undefined,
+				db_password: needsDbOptions ? dbPassword.trim() || undefined : undefined,
+				db_name: needsDbOptions ? dbName.trim() || undefined : undefined,
+				mqtt_topic: needsMqttOptions ? mqttTopic.trim() || undefined : undefined,
+				grpc_keyword: needsGrpcOptions ? grpcKeyword.trim() || undefined : undefined,
 			}
 			updateMutation.mutate({ id: monitor.id, data })
 		} else {
 			const data: CreateMonitorRequest = {
 				name: name.trim(),
 				type,
-				url: url.trim() || undefined,
-				hostname: hostname.trim() || undefined,
+				url: needsDbOptions ? dbConnectionString.trim() || undefined : url.trim() || undefined,
+				hostname: needsHostname ? hostname.trim() || undefined : undefined,
 				port: port ? Number(port) : undefined,
 				method: ["http", "https", "keyword", "json-query"].includes(type)
 					? method
@@ -240,19 +333,40 @@ export function AddMonitorDialog({
 						: undefined,
 				cert_expiry_notification: type === "https" ? certExpiryNotification : undefined,
 				cert_expiry_days: type === "https" ? certExpiryDays : undefined,
+				// Notification settings
+				notify_on_down: notifyOnDown,
+				notify_on_recover: notifyOnRecover,
+				notify_on_response_time: notifyOnResponseTime,
+				response_time_threshold: notifyOnResponseTime ? responseTimeThreshold : undefined,
+				notify_on_uptime_drop: notifyOnUptimeDrop,
+				uptime_threshold: notifyOnUptimeDrop ? uptimeThreshold : undefined,
+				notify_repeated_failures: notifyRepeatedFailures,
+				consecutive_failures: consecutiveFailures,
+				quiet_hours_enabled: quietHoursEnabled,
+				quiet_hours_start: quietHoursEnabled ? quietHoursStart : undefined,
+				quiet_hours_end: quietHoursEnabled ? quietHoursEnd : undefined,
+				// Database / network extra fields
+				db_username: needsDbOptions ? dbUsername.trim() || undefined : undefined,
+				db_password: needsDbOptions ? dbPassword.trim() || undefined : undefined,
+				db_name: needsDbOptions ? dbName.trim() || undefined : undefined,
+				mqtt_topic: needsMqttOptions ? mqttTopic.trim() || undefined : undefined,
+				grpc_keyword: needsGrpcOptions ? grpcKeyword.trim() || undefined : undefined,
 			}
 			createMutation.mutate(data)
 		}
 	}
 
-	const needsUrl = ["http", "https", "keyword", "json-query"].includes(type)
-	const needsHostname = ["tcp", "ping", "dns"].includes(type)
-	const needsPort = type === "tcp"
+	const needsUrl = ["http", "https", "keyword", "json-query", "grpc-keyword", "real-browser", "websocket-upgrade", "push"].includes(type)
+	const needsHostname = ["tcp", "ping", "dns", "mqtt", "rabbitmq", "kafka-producer", "smtp", "snmp", "sip-options", "tailscale-ping", "globalping", "mysql", "postgresql", "mongodb", "redis", "sqlserver", "oracledb", "radius", "gamedig", "steam"].includes(type)
+	const needsPort = ["tcp", "smtp", "mysql", "postgresql", "redis", "sqlserver", "oracledb", "radius", "mqtt", "rabbitmq", "kafka-producer", "gamedig", "steam", "snmp"].includes(type)
 	const needsHttpOptions = ["http", "https", "keyword", "json-query"].includes(type)
 	const needsKeyword = type === "keyword"
 	const needsJsonQuery = type === "json-query"
 	const needsDnsOptions = type === "dns"
 	const needsTlsOptions = type === "https"
+	const needsDbOptions = ["mysql", "postgresql", "mongodb", "redis", "sqlserver", "oracledb", "radius"].includes(type)
+	const needsMqttOptions = type === "mqtt"
+	const needsGrpcOptions = type === "grpc-keyword"
 
 	const isPending = createMutation.isPending || updateMutation.isPending
 
@@ -296,6 +410,8 @@ export function AddMonitorDialog({
 										value={name}
 										onChange={(e) => setName(e.target.value)}
 										required
+										tabIndex={0}
+										autoFocus
 									/>
 								</div>
 
@@ -311,10 +427,15 @@ export function AddMonitorDialog({
 											<SelectValue />
 										</SelectTrigger>
 										<SelectContent>
-											{MONITOR_TYPES.map((mt) => (
-												<SelectItem key={mt.value} value={mt.value}>
-													{mt.label}
-												</SelectItem>
+											{["General", "Network / Protocol", "Database", "Game Server"].map((group) => (
+												<SelectGroup key={group}>
+													<SelectLabel>{group}</SelectLabel>
+													{MONITOR_TYPES.filter((mt) => mt.group === group).map((mt) => (
+															<SelectItem key={mt.value} value={mt.value}>
+																{mt.label}
+															</SelectItem>
+														))}
+												</SelectGroup>
 											))}
 										</SelectContent>
 									</Select>
@@ -479,6 +600,90 @@ export function AddMonitorDialog({
 									</div>
 								)}
 
+								{needsDbOptions && (
+									<div className="space-y-4 border rounded-lg p-4">
+										<h4 className="font-medium text-sm">
+											<Trans>Database Connection</Trans>
+										</h4>
+										<div className="grid gap-2">
+											<Label htmlFor="dbConnectionString">
+												<Trans>Host / Connection String</Trans> *
+											</Label>
+											<Input
+												id="dbConnectionString"
+												placeholder={t`localhost:3306`}
+												value={dbConnectionString}
+												onChange={(e) => setDbConnectionString(e.target.value)}
+												required={needsDbOptions}
+											/>
+										</div>
+										<div className="grid grid-cols-2 gap-4">
+											<div className="grid gap-2">
+												<Label htmlFor="dbUsername">
+													<Trans>Username</Trans>
+												</Label>
+												<Input
+													id="dbUsername"
+													placeholder={t`root`}
+													value={dbUsername}
+													onChange={(e) => setDbUsername(e.target.value)}
+												/>
+											</div>
+											<div className="grid gap-2">
+												<Label htmlFor="dbPassword">
+													<Trans>Password</Trans>
+												</Label>
+												<Input
+													id="dbPassword"
+													type="password"
+													placeholder={t`password`}
+													value={dbPassword}
+													onChange={(e) => setDbPassword(e.target.value)}
+												/>
+											</div>
+										</div>
+										<div className="grid gap-2">
+											<Label htmlFor="dbName">
+												<Trans>Database Name</Trans>
+											</Label>
+											<Input
+												id="dbName"
+												placeholder={t`mydb`}
+												value={dbName}
+												onChange={(e) => setDbName(e.target.value)}
+											/>
+										</div>
+									</div>
+								)}
+
+								{needsMqttOptions && (
+									<div className="grid gap-2">
+										<Label htmlFor="mqttTopic">
+											<Trans>MQTT Topic</Trans>
+										</Label>
+										<Input
+											id="mqttTopic"
+											placeholder={t`sensor/temperature`}
+											value={mqttTopic}
+											onChange={(e) => setMqttTopic(e.target.value)}
+										/>
+									</div>
+								)}
+
+								{needsGrpcOptions && (
+									<div className="grid gap-2">
+										<Label htmlFor="grpcKeyword">
+											<Trans>gRPC Keyword</Trans>
+										</Label>
+										<Input
+											id="grpcKeyword"
+											placeholder={t`health`}
+											value={grpcKeyword}
+											onChange={(e) => setGrpcKeyword(e.target.value)}
+										/>
+									</div>
+								)}
+
 								<div className="grid gap-2">
 									<Label htmlFor="description">
 										<Trans>Description</Trans>
@@ -583,54 +788,193 @@ export function AddMonitorDialog({
 						</TabsContent>
 
 						<TabsContent value="notifications" className="space-y-4 mt-4">
+							{/* Status Change Notifications */}
+							<div className="space-y-4 border rounded-lg p-4">
+								<h4 className="font-medium text-sm">Status Change Alerts</h4>
+								
+								<div className="flex items-center justify-between">
+									<div className="space-y-0.5">
+										<Label htmlFor="notifyOnDown">Notify when monitor goes down</Label>
+										<p className="text-xs text-muted-foreground">Send alert when service becomes unavailable</p>
+									</div>
+									<Switch
+										id="notifyOnDown"
+										checked={notifyOnDown}
+										onCheckedChange={setNotifyOnDown}
+									/>
+								</div>
+
+								<div className="flex items-center justify-between">
+									<div className="space-y-0.5">
+										<Label htmlFor="notifyOnRecover">Notify when monitor recovers</Label>
+										<p className="text-xs text-muted-foreground">Send alert when service comes back up</p>
+									</div>
+									<Switch
+										id="notifyOnRecover"
+										checked={notifyOnRecover}
+										onCheckedChange={setNotifyOnRecover}
+									/>
+								</div>
+
+								<div className="space-y-3">
+									<div className="flex items-center justify-between">
+										<div className="space-y-0.5">
+											<Label htmlFor="notifyRepeatedFailures">Repeated failures only</Label>
+											<p className="text-xs text-muted-foreground">Only alert after multiple consecutive failures</p>
+										</div>
+										<Switch
+											id="notifyRepeatedFailures"
+											checked={notifyRepeatedFailures}
+											onCheckedChange={setNotifyRepeatedFailures}
+										/>
+									</div>
+									{notifyRepeatedFailures && (
+										<div className="grid gap-2 pl-4 border-l-2">
+											<Label htmlFor="consecutiveFailures">Consecutive failures before alert</Label>
+											<Input
+												id="consecutiveFailures"
+												type="number"
+												min={1}
+												max={10}
+												value={consecutiveFailures}
+												onChange={(e) => setConsecutiveFailures(Number(e.target.value))}
+												className="w-32"
+											/>
+										</div>
+									)}
+								</div>
+							</div>
+
+							{/* Performance Alerts */}
+							<div className="space-y-4 border rounded-lg p-4">
+								<h4 className="font-medium text-sm">Performance Alerts</h4>
+								
+								<div className="space-y-3">
+									<div className="flex items-center justify-between">
+										<div className="space-y-0.5">
+											<Label htmlFor="notifyOnResponseTime">Response time threshold</Label>
+											<p className="text-xs text-muted-foreground">Alert when response time exceeds limit</p>
+										</div>
+										<Switch
+											id="notifyOnResponseTime"
+											checked={notifyOnResponseTime}
+											onCheckedChange={setNotifyOnResponseTime}
+										/>
+									</div>
+									{notifyOnResponseTime && (
+										<div className="grid gap-2 pl-4 border-l-2">
+											<Label htmlFor="responseTimeThreshold">Max response time (ms)</Label>
+											<Input
+												id="responseTimeThreshold"
+												type="number"
+												min={100}
+												max={60000}
+												step={100}
+												value={responseTimeThreshold}
+												onChange={(e) => setResponseTimeThreshold(Number(e.target.value))}
+												className="w-32"
+											/>
+										</div>
+									)}
+								</div>
+
+								<div className="space-y-3">
+									<div className="flex items-center justify-between">
+										<div className="space-y-0.5">
+											<Label htmlFor="notifyOnUptimeDrop">Uptime threshold</Label>
+											<p className="text-xs text-muted-foreground">Alert when uptime percentage drops below</p>
+										</div>
+										<Switch
+											id="notifyOnUptimeDrop"
+											checked={notifyOnUptimeDrop}
+											onCheckedChange={setNotifyOnUptimeDrop}
+										/>
+									</div>
+									{notifyOnUptimeDrop && (
+										<div className="grid gap-2 pl-4 border-l-2">
+											<Label htmlFor="uptimeThreshold">Minimum uptime (%)</Label>
+											<Input
+												id="uptimeThreshold"
+												type="number"
+												min={1}
+												max={100}
+												value={uptimeThreshold}
+												onChange={(e) => setUptimeThreshold(Number(e.target.value))}
+												className="w-32"
+											/>
+										</div>
+									)}
+								</div>
+							</div>
+
+							{/* Certificate Expiry */}
 							{needsTlsOptions && (
 								<div className="space-y-4 border rounded-lg p-4">
-									<div className="flex items-center gap-2">
+									<h4 className="font-medium text-sm">Certificate Alerts</h4>
+									<div className="flex items-center justify-between">
+										<div className="space-y-0.5">
+											<Label htmlFor="certExpiryNotification">Notify when certificate expires</Label>
+											<p className="text-xs text-muted-foreground">Alert before SSL certificate expiry</p>
+										</div>
 										<Switch
 											id="certExpiryNotification"
 											checked={certExpiryNotification}
 											onCheckedChange={setCertExpiryNotification}
 										/>
-										<Label htmlFor="certExpiryNotification">
-											<Trans>Notify when certificate expires</Trans>
-										</Label>
 									</div>
 									{certExpiryNotification && (
-										<div className="grid gap-2 mt-2">
-											<Label htmlFor="certExpiryDays">
-												<Trans>Days before expiry to notify</Trans>
-											</Label>
+										<div className="grid gap-2 pl-4 border-l-2">
+											<Label htmlFor="certExpiryDays">Days before expiry to notify</Label>
 											<Input
 												id="certExpiryDays"
 												type="number"
 												min={1}
 												max={90}
 												value={certExpiryDays}
-												onChange={(e) =>
-													setCertExpiryDays(Number(e.target.value))
-												}
+												onChange={(e) => setCertExpiryDays(Number(e.target.value))}
+												className="w-32"
 											/>
 										</div>
 									)}
 								</div>
 							)}
 
-							{!needsTlsOptions && (
-								<p className="text-muted-foreground text-sm">
-									<Trans>
-										Certificate expiry notifications are only available
-										for HTTPS monitors.
-									</Trans>
-								</p>
-							)}
-
-							<div className="border rounded-lg p-4">
-								<p className="text-sm text-muted-foreground">
-									<Trans>
-										General notification settings will be configured in
-										the Notifications tab.
-									</Trans>
-								</p>
+							{/* Quiet Hours */}
+							<div className="space-y-4 border rounded-lg p-4">
+								<h4 className="font-medium text-sm">Quiet Hours</h4>
+								<div className="flex items-center justify-between">
+									<div className="space-y-0.5">
+										<Label htmlFor="quietHoursEnabled">Enable quiet hours</Label>
+										<p className="text-xs text-muted-foreground">Suppress notifications during specific hours</p>
+									</div>
+									<Switch
+										id="quietHoursEnabled"
+										checked={quietHoursEnabled}
+										onCheckedChange={setQuietHoursEnabled}
+									/>
+								</div>
+								{quietHoursEnabled && (
+									<div className="grid grid-cols-2 gap-4 pl-4 border-l-2">
+										<div className="grid gap-2">
+											<Label htmlFor="quietHoursStart">Start time</Label>
+											<Input
+												id="quietHoursStart"
+												type="time"
+												value={quietHoursStart}
+												onChange={(e) => setQuietHoursStart(e.target.value)}
+											/>
+										</div>
+										<div className="grid gap-2">
+											<Label htmlFor="quietHoursEnd">End time</Label>
+											<Input
+												id="quietHoursEnd"
+												type="time"
+												value={quietHoursEnd}
+												onChange={(e) => setQuietHoursEnd(e.target.value)}
+											/>
+										</div>
+									</div>
+								)}
 							</div>
 						</TabsContent>
 					</Tabs>

internal/site/src/components/monitors-table/monitors-table.tsx

@@ -3,14 +3,20 @@ import { useStore } from "@nanostores/react"
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
 import {
 	ArrowDownIcon,
+	ArrowUpDownIcon,
 	ArrowUpIcon,
 	CheckCircleIcon,
 	Edit3Icon,
+	EyeIcon,
+	FilterIcon,
 	GlobeIcon,
+	LayoutGridIcon,
+	LayoutListIcon,
 	PauseIcon,
 	PlayIcon,
 	PlusIcon,
 	RefreshCwIcon,
+	Settings2Icon,
 	Trash2Icon,
 	XCircleIcon,
 } from "lucide-react"
@@ -23,17 +29,15 @@ import {
 	CardHeader,
 	CardTitle,
 } from "@/components/ui/card"
-import {
-	Dialog,
-	DialogContent,
-	DialogDescription,
-	DialogHeader,
-	DialogTitle,
-} from "@/components/ui/dialog"
 import {
 	DropdownMenu,
+	DropdownMenuCheckboxItem,
 	DropdownMenuContent,
 	DropdownMenuItem,
+	DropdownMenuLabel,
+	DropdownMenuRadioGroup,
+	DropdownMenuRadioItem,
+	DropdownMenuSeparator,
 	DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
 import { Input } from "@/components/ui/input"
@@ -64,7 +68,7 @@ import {
 	formatUptime,
 	formatPing,
 } from "@/lib/monitors"
-import { cn } from "@/lib/utils"
+import { cn, useBrowserStorage } from "@/lib/utils"
 import { AddMonitorDialog } from "./add-monitor-dialog"
 import { Link } from "@/components/router"
 
@@ -97,6 +101,158 @@ function StatusIndicator({ status }: { status: MonitorStatus }) {
 	)
 }
 
+// Monitor Card component for grid view
+function MonitorCard({
+	monitor,
+	onEdit,
+}: {
+	monitor: Monitor
+	onEdit: (m: Monitor) => void
+}) {
+	const { toast } = useToast()
+	const queryClient = useQueryClient()
+
+	const checkMutation = useMutation({
+		mutationFn: manualCheck,
+		onSuccess: (result) => {
+			toast({
+				title: `Check complete`,
+				description: `${monitor.name} is ${result.status} (${formatPing(result.ping)})`,
+			})
+			queryClient.invalidateQueries({ queryKey: ["monitors"] })
+		},
+	})
+
+	const pauseMutation = useMutation({
+		mutationFn: monitor.status === "paused" ? resumeMonitor : pauseMonitor,
+		onSuccess: () => {
+			toast({
+				title: monitor.status === "paused" ? "Monitor resumed" : "Monitor paused",
+			})
+			queryClient.invalidateQueries({ queryKey: ["monitors"] })
+		},
+	})
+
+	const deleteMutation = useMutation({
+		mutationFn: deleteMonitor,
+		onSuccess: () => {
+			toast({ title: "Monitor deleted" })
+			queryClient.invalidateQueries({ queryKey: ["monitors"] })
+		},
+	})
+
+	return (
+		<div className="rounded-lg border bg-card p-4 space-y-4 hover:shadow-md transition-shadow">
+			<div className="flex items-start justify-between">
+				<Link href={`/monitor/${monitor.id}`} className="flex items-center gap-3 cursor-pointer min-w-0">
+					<div className="shrink-0">
+						<StatusIndicator status={monitor.status} />
+					</div>
+					<div className="min-w-0">
+						<div className="font-medium truncate hover:underline">{monitor.name}</div>
+						<div className="text-xs text-muted-foreground truncate">
+							{monitor.url || monitor.hostname}
+							{monitor.port ? `:${monitor.port}` : ""}
+						</div>
+					</div>
+				</Link>
+				<DropdownMenu>
+					<DropdownMenuTrigger asChild>
+						<Button variant="ghost" size="icon" className="h-8 w-8 shrink-0">
+							<Edit3Icon className="h-4 w-4" />
+						</Button>
+					</DropdownMenuTrigger>
+					<DropdownMenuContent align="end">
+						<DropdownMenuItem onClick={() => onEdit(monitor)}>
+							<Edit3Icon className="mr-2 h-4 w-4" />
+							Edit
+						</DropdownMenuItem>
+						<DropdownMenuItem
+							onClick={() => deleteMutation.mutate(monitor.id)}
+							className="text-destructive"
+						>
+							<Trash2Icon className="mr-2 h-4 w-4" />
+							Delete
+						</DropdownMenuItem>
+					</DropdownMenuContent>
+				</DropdownMenu>
+			</div>
+
+			<div className="grid grid-cols-2 gap-3 text-sm">
+				<div className="space-y-1">
+					<div className="text-xs text-muted-foreground">Type</div>
+					<div className="inline-flex items-center rounded-md bg-muted px-2 py-1 text-xs font-medium">
+						{getMonitorTypeLabel(monitor.type)}
+					</div>
+				</div>
+				<div className="space-y-1">
+					<div className="text-xs text-muted-foreground">Response</div>
+					<div>
+						{monitor.last_check ? (
+							formatPing(monitor.uptime_stats?.last_ping || 0)
+						) : (
+							<span className="text-muted-foreground">-</span>
+						)}
+					</div>
+				</div>
+				<div className="col-span-2 space-y-1">
+					<div className="text-xs text-muted-foreground">Uptime (24h)</div>
+					<UptimeBar stats={monitor.uptime_stats} />
+				</div>
+			</div>
+
+			<div className="flex items-center gap-2 pt-2 border-t">
+				<TooltipProvider>
+					<Tooltip>
+						<TooltipTrigger asChild>
+							<Button
+								variant="outline"
+								size="sm"
+								className="flex-1"
+								onClick={() => checkMutation.mutate(monitor.id)}
+								disabled={checkMutation.isPending}
+							>
+								<RefreshCwIcon
+									className={cn(
+										"h-4 w-4 mr-1",
+										checkMutation.isPending && "animate-spin"
+									)}
+								/>
+								Check
+							</Button>
+						</TooltipTrigger>
+						<TooltipContent>
+							<p>Check now</p>
+						</TooltipContent>
+					</Tooltip>
+				</TooltipProvider>
+				<TooltipProvider>
+					<Tooltip>
+						<TooltipTrigger asChild>
+							<Button
+								variant="outline"
+								size="sm"
+								className="flex-1"
+								onClick={() => pauseMutation.mutate(monitor.id)}
+								disabled={pauseMutation.isPending}
+							>
+								{monitor.status === "paused" ? (
+									<><PlayIcon className="h-4 w-4 mr-1" /> Resume</>
+								) : (
+									<><PauseIcon className="h-4 w-4 mr-1" /> Pause</>
+								)}
+							</Button>
+						</TooltipTrigger>
+						<TooltipContent>
+							<p>{monitor.status === "paused" ? "Resume" : "Pause"}</p>
+						</TooltipContent>
+					</Tooltip>
+				</TooltipProvider>
+			</div>
+		</div>
+	)
+}
+
 // Uptime bar component
 function UptimeBar({ stats }: { stats?: Record<string, number> }) {
 	const uptime24h = stats?.uptime_24h ?? 100
@@ -275,79 +431,161 @@ function MonitorRow({
 	)
 }
 
+type ViewMode = "table" | "grid"
+type StatusFilter = "all" | MonitorStatus
+
 // Main component
 export default memo(function MonitorsTable() {
-	const { t } = useLingui()
+	const { t, i18n } = useLingui()
 	const [filter, setFilter] = useState("")
+	const [statusFilter, setStatusFilter] = useState<StatusFilter>("all")
 	const [isAddDialogOpen, setIsAddDialogOpen] = useState(false)
 	const [editingMonitor, setEditingMonitor] = useState<Monitor | null>(null)
+	
+	const [viewMode, setViewMode] = useBrowserStorage<ViewMode>(
+		"monitorsViewMode",
+		window.innerWidth < 1024 ? "grid" : "table"
+	)
 
 	const { data: monitors = [], isLoading } = useQuery({
 		queryKey: ["monitors"],
 		queryFn: listMonitors,
-		refetchInterval: 30000, // Refresh every 30 seconds
+		refetchInterval: 30000,
 	})
 
+	// Filter by status first
+	const statusFilteredMonitors = useMemo(() => {
+		if (statusFilter === "all") return monitors
+		return monitors.filter((m) => m.status === statusFilter)
+	}, [monitors, statusFilter])
+
+	// Then filter by search text
 	const filteredMonitors = useMemo(() => {
-		if (!filter) return monitors
+		if (!filter) return statusFilteredMonitors
 		const f = filter.toLowerCase()
-		return monitors.filter(
+		return statusFilteredMonitors.filter(
 			(m) =>
 				m.name.toLowerCase().includes(f) ||
 				(m.url || "").toLowerCase().includes(f) ||
 				(m.hostname || "").toLowerCase().includes(f)
 		)
-	}, [monitors, filter])
+	}, [statusFilteredMonitors, filter])
 
 	const stats = useMemo(() => {
 		const total = monitors.length
 		const up = monitors.filter((m) => m.status === "up").length
 		const down = monitors.filter((m) => m.status === "down").length
 		const paused = monitors.filter((m) => m.status === "paused").length
-		return { total, up, down, paused }
+		const pending = monitors.filter((m) => m.status === "pending").length
+		const maintenance = monitors.filter((m) => m.status === "maintenance").length
+		return { total, up, down, paused, pending, maintenance }
 	}, [monitors])
 
 	return (
-		<Card>
-			<CardHeader className="p-4 sm:p-6">
-				<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
-					<div>
-						<CardTitle className="text-xl">
-							<Trans>Website & Service Monitoring</Trans>
-						</CardTitle>
-						<CardDescription>
-							<Trans>Monitor websites, APIs, and services</Trans>
-							<span className="ml-2 text-xs">
-								({stats.up} <ArrowUpIcon className="inline h-3 w-3 text-green-500" />
-								{stats.down > 0 && (
-									<>
-										{" "}
-										{stats.down}{" "}
-										<ArrowDownIcon className="inline h-3 w-3 text-red-500" />
-									</>
-								)}
-								{stats.paused > 0 && (
-									<>
-										{" "}
-										{stats.paused} <PauseIcon className="inline h-3 w-3 text-gray-400" />
-									</>
-								)}
-								/ {stats.total})
-							</span>
-						</CardDescription>
-					</div>
-					<div className="flex gap-2">
-						<Input
-							placeholder={t`Search monitors...`}
-							value={filter}
-							onChange={(e) => setFilter(e.target.value)}
-							className="w-full sm:w-64"
-						/>
-						<Button onClick={() => setIsAddDialogOpen(true)}>
+		<Card className="w-full px-3 py-5 sm:py-6 sm:px-6">
+			<CardHeader className="p-0 pb-5">
+				<div className="flex flex-col gap-4">
+					{/* Title row */}
+					<div className="flex flex-col sm:flex-row sm:items-start justify-between gap-4">
+						<div className="flex-1">
+							<CardTitle className="text-xl mb-2 flex items-center gap-2">
+								<GlobeIcon className="h-5 w-5 text-primary" />
+								<Trans>Website & Service Monitoring</Trans>
+							</CardTitle>
+							<CardDescription className="flex flex-wrap items-center gap-x-2 gap-y-1">
+								<Trans>Monitor websites, APIs, and services</Trans>
+								<span className="text-xs text-muted-foreground">
+									({stats.up} <ArrowUpIcon className="inline h-3 w-3 text-green-500" />
+									{stats.down > 0 && (
+										<>
+											{" "}
+											{stats.down}{" "}
+											<ArrowDownIcon className="inline h-3 w-3 text-red-500" />
+										</>
+									)}
+									{stats.paused > 0 && (
+										<>
+											{" "}
+											{stats.paused} <PauseIcon className="inline h-3 w-3 text-gray-400" />
+										</>
+									)}
+									/ {stats.total})
+								</span>
+							</CardDescription>
+						</div>
+						<Button onClick={() => setIsAddDialogOpen(true)} className="shrink-0">
 							<PlusIcon className="mr-2 h-4 w-4" />
-							<Trans>Add</Trans>
+							<Trans>Add Monitor</Trans>
 						</Button>
 					</div>
+
+					{/* Filter row */}
+					<div className="flex flex-col sm:flex-row gap-2">
+						<div className="relative flex-1">
+							<Input
+								placeholder={t`Filter monitors...`}
+								onChange={(e) => setFilter(e.target.value)}
+								value={filter}
+								className="w-full"
+							/>
+						</div>
+						<DropdownMenu>
+							<DropdownMenuTrigger asChild>
+								<Button variant="outline">
+									<Settings2Icon className="me-1.5 size-4 opacity-80" />
+									<Trans>View</Trans>
+								</Button>
+							</DropdownMenuTrigger>
+							<DropdownMenuContent align="end" className="min-w-48">
+								{/* Layout */}
+								<DropdownMenuLabel className="flex items-center gap-2">
+									<LayoutGridIcon className="size-4" />
+									<Trans>Layout</Trans>
+								</DropdownMenuLabel>
+								<DropdownMenuRadioGroup value={viewMode} onValueChange={(v) => setViewMode(v as ViewMode)}>
+									<DropdownMenuRadioItem value="table" className="gap-2">
+										<LayoutListIcon className="size-4" />
+										<Trans>Table</Trans>
+									</DropdownMenuRadioItem>
+									<DropdownMenuRadioItem value="grid" className="gap-2">
+										<LayoutGridIcon className="size-4" />
+										<Trans>Grid</Trans>
+									</DropdownMenuRadioItem>
+								</DropdownMenuRadioGroup>
+								<DropdownMenuSeparator />
+
+								{/* Status Filter */}
+								<DropdownMenuLabel className="flex items-center gap-2">
+									<FilterIcon className="size-4" />
+									<Trans>Status</Trans>
+								</DropdownMenuLabel>
+								<DropdownMenuRadioGroup value={statusFilter} onValueChange={(v) => setStatusFilter(v as StatusFilter)}>
+									<DropdownMenuRadioItem value="all">
+										<Trans>All ({stats.total})</Trans>
+									</DropdownMenuRadioItem>
+									<DropdownMenuRadioItem value="up">
+										<Trans>Up ({stats.up})</Trans>
+									</DropdownMenuRadioItem>
+									<DropdownMenuRadioItem value="down">
+										<Trans>Down ({stats.down})</Trans>
+									</DropdownMenuRadioItem>
+									<DropdownMenuRadioItem value="paused">
+										<Trans>Paused ({stats.paused})</Trans>
+									</DropdownMenuRadioItem>
+									{stats.pending > 0 && (
+										<DropdownMenuRadioItem value="pending">
+											<Trans>Pending ({stats.pending})</Trans>
+										</DropdownMenuRadioItem>
+									)}
+									{stats.maintenance > 0 && (
+										<DropdownMenuRadioItem value="maintenance">
+											<Trans>Maintenance ({stats.maintenance})</Trans>
+										</DropdownMenuRadioItem>
+									)}
+								</DropdownMenuRadioGroup>
+							</DropdownMenuContent>
+						</DropdownMenu>
+					</div>
 				</div>
 			</CardHeader>
 			<CardContent className="p-0">
@@ -357,8 +595,8 @@ export default memo(function MonitorsTable() {
 					</div>
 				) : filteredMonitors.length === 0 ? (
 					<div className="p-8 text-center text-muted-foreground">
-						{filter ? (
-							<Trans>No monitors match your search.</Trans>
+						{filter || statusFilter !== "all" ? (
+							<Trans>No monitors match your filters.</Trans>
 						) : (
 							<div>
 								<p className="mb-4">
@@ -371,7 +609,7 @@ export default memo(function MonitorsTable() {
 							</div>
 						)}
 					</div>
-				) : (
+				) : viewMode === "table" ? (
 					<Table>
 						<TableHeader>
 							<TableRow>
@@ -405,6 +643,16 @@ export default memo(function MonitorsTable() {
 							))}
 						</TableBody>
 					</Table>
+				) : (
+					<div className="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
+						{filteredMonitors.map((monitor) => (
+							<MonitorCard
+								key={monitor.id}
+								monitor={monitor}
+								onEdit={setEditingMonitor}
+							/>
+						))}
+					</div>
 				)}
 			</CardContent>
 

internal/site/src/components/navbar.tsx

@@ -1,4 +1,3 @@
-import { t } from "@lingui/core/macro"
 import { Trans } from "@lingui/react/macro"
 import { getPagePath } from "@nanostores/router"
 import {
@@ -8,7 +7,7 @@ import {
 	LogOutIcon,
 	LogsIcon,
 	MenuIcon,
-	PlusIcon,
+	MonitorIcon,
 	SearchIcon,
 	ServerIcon,
 	SettingsIcon,
@@ -31,7 +30,6 @@ import {
 } from "@/components/ui/dropdown-menu"
 import { isAdmin, isReadOnlyUser, logOut, pb } from "@/lib/api"
 import { cn, runOnce } from "@/lib/utils"
-import { AddSystemDialog } from "./add-system"
 import { LangToggle } from "./lang-toggle"
 import { Logo } from "./logo"
 import { ModeToggle } from "./mode-toggle"
@@ -43,19 +41,15 @@ const CommandPalette = lazy(() => import("./command-palette"))
 const isMac = navigator.platform.toUpperCase().indexOf("MAC") >= 0
 
 export default function Navbar() {
-	const [addSystemDialogOpen, setAddSystemDialogOpen] = useState(false)
 	const [commandPaletteOpen, setCommandPaletteOpen] = useState(false)
 
 	const AdminLinks = AdminDropdownGroup()
 
-	const systemTranslation = t`System`
-
 	return (
 		<div className="flex items-center h-14 md:h-16 bg-card px-4 pe-3 sm:px-6 border border-border/60 bt-0 rounded-md my-4">
 			<Suspense>
 				<CommandPalette open={commandPaletteOpen} setOpen={setCommandPaletteOpen} />
 			</Suspense>
-			<AddSystemDialog open={addSystemDialogOpen} setOpen={setAddSystemDialogOpen} />
 
 			<Link
 				href={basePath}
@@ -109,6 +103,10 @@ export default function Navbar() {
 								<HardDriveIcon className="h-4 w-4 me-2.5" strokeWidth={1.5} />
 								<span>S.M.A.R.T.</span>
 							</DropdownMenuItem>
+							<DropdownMenuItem onClick={() => navigate(getPagePath($router, "monitoring"))} className="flex items-center">
+								<MonitorIcon className="h-4 w-4 me-2.5" strokeWidth={1.5} />
+								<Trans>Monitoring</Trans>
+							</DropdownMenuItem>
 							<DropdownMenuItem
 								onClick={() => navigate(getPagePath($router, "settings", { name: "general" }))}
 								className="flex items-center"
@@ -125,17 +123,6 @@ export default function Navbar() {
 									<DropdownMenuSubContent>{AdminLinks}</DropdownMenuSubContent>
 								</DropdownMenuSub>
 							)}
-							{!isReadOnlyUser() && (
-								<DropdownMenuItem
-									className="flex items-center"
-									onSelect={() => {
-										setAddSystemDialogOpen(true)
-									}}
-								>
-									<PlusIcon className="h-4 w-4 me-2.5" />
-									<Trans>Add {{ foo: systemTranslation }}</Trans>
-								</DropdownMenuItem>
-							)}
 						</DropdownMenuGroup>
 						<DropdownMenuSeparator />
 						<DropdownMenuGroup>
@@ -178,8 +165,25 @@ export default function Navbar() {
 							<HardDriveIcon className="h-[1.2rem] w-[1.2rem]" strokeWidth={1.5} />
 						</Link>
 					</TooltipTrigger>
+					<TooltipContent>
+						<span>S.M.A.R.T.</span>
+					</TooltipContent>
 					<TooltipContent>S.M.A.R.T.</TooltipContent>
 				</Tooltip>
+				<Tooltip>
+					<TooltipTrigger asChild>
+						<Link
+							href={getPagePath($router, "monitoring")}
+							className={cn(buttonVariants({ variant: "ghost", size: "icon" }))}
+							aria-label="Monitoring"
+						>
+							<MonitorIcon className="h-[1.2rem] w-[1.2rem]" strokeWidth={1.5} />
+						</Link>
+					</TooltipTrigger>
+					<TooltipContent>
+						<Trans>Monitoring</Trans>
+					</TooltipContent>
+				</Tooltip>
 				<LangToggle />
 				<ModeToggle />
 				<Tooltip>
@@ -219,12 +223,6 @@ export default function Navbar() {
 						</DropdownMenuItem>
 					</DropdownMenuContent>
 				</DropdownMenu>
-				{!isReadOnlyUser() && (
-					<Button variant="outline" className="flex gap-1 ms-2" onClick={() => setAddSystemDialogOpen(true)}>
-						<PlusIcon className="h-4 w-4 -ms-1" />
-						<Trans>Add {{ foo: systemTranslation }}</Trans>
-					</Button>
-				)}
 			</div>
 		</div>
 	)

internal/site/src/components/notifications/notification-settings-dialog.tsx

@@ -5,7 +5,7 @@ import { useMutation, useQueryClient } from "@tanstack/react-query"
 import { zodResolver } from "@hookform/resolvers/zod"
 import { useForm } from "react-hook-form"
 import { z } from "zod"
-import { useToast } from "@/hooks/use-toast"
+import { useToast } from "@/components/ui/use-toast"
 import { Button } from "@/components/ui/button"
 import {
 	Dialog,
@@ -508,12 +508,251 @@ function EmailForm({
 	)
 }
 
-// Similar components for other providers... (abbreviated for brevity)
-// Webhook, Discord, Slack, Telegram, Gotify, Pushover forms
+// Stub form components for other notification providers
+
+const webhookSchema = z.object({
+	name: z.string().min(1, "Name is required"),
+	is_default: z.boolean(),
+	settings: z.object({
+		url: z.string().min(1, "Webhook URL is required"),
+	}),
+})
+
+type WebhookFormData = z.infer<typeof webhookSchema>
+
+function WebhookForm({ defaultValues, onSubmit, isPending, onCancel, onTest, testPending }: FormComponentProps<WebhookFormData>) {
+	const form = useForm<WebhookFormData>({ resolver: zodResolver(webhookSchema), defaultValues })
+	return (
+		<Form {...form}>
+			<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+				<FormField control={form.control} name="name" render={({ field }) => (
+					<FormItem><FormLabel>Name</FormLabel><FormControl><Input placeholder="My Webhook" {...field} /></FormControl><FormMessage /></FormItem>
+				)} />
+				<FormField control={form.control} name="settings.url" render={({ field }) => (
+					<FormItem><FormLabel>Webhook URL</FormLabel><FormControl><Input placeholder="https://hooks.example.com/..." {...field} /></FormControl><FormMessage /></FormItem>
+				)} />
+				<FormField control={form.control} name="is_default" render={({ field }) => (
+					<FormItem className="flex items-center justify-between rounded-lg border p-3">
+						<div className="space-y-0.5"><FormLabel>Default Provider</FormLabel></div>
+						<FormControl><Switch checked={field.value} onCheckedChange={field.onChange} /></FormControl>
+					</FormItem>
+				)} />
+				<DialogFooter className="gap-2">
+					{onTest && <Button type="button" variant="outline" onClick={onTest} disabled={testPending}>{testPending ? "Sending..." : "Test"}</Button>}
+					<Button type="button" variant="outline" onClick={onCancel}>Cancel</Button>
+					<Button type="submit" disabled={isPending}>{isPending ? "Saving..." : "Save"}</Button>
+				</DialogFooter>
+			</form>
+		</Form>
+	)
+}
+
+const discordSchema = z.object({
+	name: z.string().min(1, "Name is required"),
+	is_default: z.boolean(),
+	settings: z.object({
+		webhook_url: z.string().min(1, "Discord Webhook URL is required"),
+	}),
+})
+
+type DiscordFormData = z.infer<typeof discordSchema>
+
+function DiscordForm({ defaultValues, onSubmit, isPending, onCancel, onTest, testPending }: FormComponentProps<DiscordFormData>) {
+	const form = useForm<DiscordFormData>({ resolver: zodResolver(discordSchema), defaultValues })
+	return (
+		<Form {...form}>
+			<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+				<FormField control={form.control} name="name" render={({ field }) => (
+					<FormItem><FormLabel>Name</FormLabel><FormControl><Input placeholder="Discord Alerts" {...field} /></FormControl><FormMessage /></FormItem>
+				)} />
+				<FormField control={form.control} name="settings.webhook_url" render={({ field }) => (
+					<FormItem><FormLabel>Discord Webhook URL</FormLabel><FormControl><Input placeholder="https://discord.com/api/webhooks/..." {...field} /></FormControl><FormMessage /></FormItem>
+				)} />
+				<FormField control={form.control} name="is_default" render={({ field }) => (
+					<FormItem className="flex items-center justify-between rounded-lg border p-3">
+						<div className="space-y-0.5"><FormLabel>Default Provider</FormLabel></div>
+						<FormControl><Switch checked={field.value} onCheckedChange={field.onChange} /></FormControl>
+					</FormItem>
+				)} />
+				<DialogFooter className="gap-2">
+					{onTest && <Button type="button" variant="outline" onClick={onTest} disabled={testPending}>{testPending ? "Sending..." : "Test"}</Button>}
+					<Button type="button" variant="outline" onClick={onCancel}>Cancel</Button>
+					<Button type="submit" disabled={isPending}>{isPending ? "Saving..." : "Save"}</Button>
+				</DialogFooter>
+			</form>
+		</Form>
+	)
+}
+
+const slackSchema = z.object({
+	name: z.string().min(1, "Name is required"),
+	is_default: z.boolean(),
+	settings: z.object({
+		webhook_url: z.string().min(1, "Slack Webhook URL is required"),
+	}),
+})
+
+type SlackFormData = z.infer<typeof slackSchema>
+
+function SlackForm({ defaultValues, onSubmit, isPending, onCancel, onTest, testPending }: FormComponentProps<SlackFormData>) {
+	const form = useForm<SlackFormData>({ resolver: zodResolver(slackSchema), defaultValues })
+	return (
+		<Form {...form}>
+			<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+				<FormField control={form.control} name="name" render={({ field }) => (
+					<FormItem><FormLabel>Name</FormLabel><FormControl><Input placeholder="Slack Alerts" {...field} /></FormControl><FormMessage /></FormItem>
+				)} />
+				<FormField control={form.control} name="settings.webhook_url" render={({ field }) => (
+					<FormItem><FormLabel>Slack Webhook URL</FormLabel><FormControl><Input placeholder="https://hooks.slack.com/services/..." {...field} /></FormControl><FormMessage /></FormItem>
+				)} />
+				<FormField control={form.control} name="is_default" render={({ field }) => (
+					<FormItem className="flex items-center justify-between rounded-lg border p-3">
+						<div className="space-y-0.5"><FormLabel>Default Provider</FormLabel></div>
+						<FormControl><Switch checked={field.value} onCheckedChange={field.onChange} /></FormControl>
+					</FormItem>
+				)} />
+				<DialogFooter className="gap-2">
+					{onTest && <Button type="button" variant="outline" onClick={onTest} disabled={testPending}>{testPending ? "Sending..." : "Test"}</Button>}
+					<Button type="button" variant="outline" onClick={onCancel}>Cancel</Button>
+					<Button type="submit" disabled={isPending}>{isPending ? "Saving..." : "Save"}</Button>
+				</DialogFooter>
+			</form>
+		</Form>
+	)
+}
+
+const telegramSchema = z.object({
+	name: z.string().min(1, "Name is required"),
+	is_default: z.boolean(),
+	settings: z.object({
+		bot_token: z.string().min(1, "Bot Token is required"),
+		chat_id: z.string().min(1, "Chat ID is required"),
+	}),
+})
+
+type TelegramFormData = z.infer<typeof telegramSchema>
+
+function TelegramForm({ defaultValues, onSubmit, isPending, onCancel, onTest, testPending }: FormComponentProps<TelegramFormData>) {
+	const form = useForm<TelegramFormData>({ resolver: zodResolver(telegramSchema), defaultValues })
+	return (
+		<Form {...form}>
+			<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+				<FormField control={form.control} name="name" render={({ field }) => (
+					<FormItem><FormLabel>Name</FormLabel><FormControl><Input placeholder="Telegram Alerts" {...field} /></FormControl><FormMessage /></FormItem>
+				)} />
+				<div className="grid grid-cols-2 gap-4">
+					<FormField control={form.control} name="settings.bot_token" render={({ field }) => (
+						<FormItem><FormLabel>Bot Token</FormLabel><FormControl><Input placeholder="123456:ABC-DEF..." {...field} /></FormControl><FormMessage /></FormItem>
+					)} />
+					<FormField control={form.control} name="settings.chat_id" render={({ field }) => (
+						<FormItem><FormLabel>Chat ID</FormLabel><FormControl><Input placeholder="-100123456789" {...field} /></FormControl><FormMessage /></FormItem>
+					)} />
+				</div>
+				<FormField control={form.control} name="is_default" render={({ field }) => (
+					<FormItem className="flex items-center justify-between rounded-lg border p-3">
+						<div className="space-y-0.5"><FormLabel>Default Provider</FormLabel></div>
+						<FormControl><Switch checked={field.value} onCheckedChange={field.onChange} /></FormControl>
+					</FormItem>
+				)} />
+				<DialogFooter className="gap-2">
+					{onTest && <Button type="button" variant="outline" onClick={onTest} disabled={testPending}>{testPending ? "Sending..." : "Test"}</Button>}
+					<Button type="button" variant="outline" onClick={onCancel}>Cancel</Button>
+					<Button type="submit" disabled={isPending}>{isPending ? "Saving..." : "Save"}</Button>
+				</DialogFooter>
+			</form>
+		</Form>
+	)
+}
+
+const gotifySchema = z.object({
+	name: z.string().min(1, "Name is required"),
+	is_default: z.boolean(),
+	settings: z.object({
+		server_url: z.string().min(1, "Server URL is required"),
+		app_token: z.string().min(1, "App Token is required"),
+	}),
+})
+
+type GotifyFormData = z.infer<typeof gotifySchema>
+
+function GotifyForm({ defaultValues, onSubmit, isPending, onCancel, onTest, testPending }: FormComponentProps<GotifyFormData>) {
+	const form = useForm<GotifyFormData>({ resolver: zodResolver(gotifySchema), defaultValues })
+	return (
+		<Form {...form}>
+			<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+				<FormField control={form.control} name="name" render={({ field }) => (
+					<FormItem><FormLabel>Name</FormLabel><FormControl><Input placeholder="Gotify Alerts" {...field} /></FormControl><FormMessage /></FormItem>
+				)} />
+				<div className="grid grid-cols-2 gap-4">
+					<FormField control={form.control} name="settings.server_url" render={({ field }) => (
+						<FormItem><FormLabel>Server URL</FormLabel><FormControl><Input placeholder="https://gotify.example.com" {...field} /></FormControl><FormMessage /></FormItem>
+					)} />
+					<FormField control={form.control} name="settings.app_token" render={({ field }) => (
+						<FormItem><FormLabel>App Token</FormLabel><FormControl><Input placeholder="Abc..." {...field} /></FormControl><FormMessage /></FormItem>
+					)} />
+				</div>
+				<FormField control={form.control} name="is_default" render={({ field }) => (
+					<FormItem className="flex items-center justify-between rounded-lg border p-3">
+						<div className="space-y-0.5"><FormLabel>Default Provider</FormLabel></div>
+						<FormControl><Switch checked={field.value} onCheckedChange={field.onChange} /></FormControl>
+					</FormItem>
+				)} />
+				<DialogFooter className="gap-2">
+					{onTest && <Button type="button" variant="outline" onClick={onTest} disabled={testPending}>{testPending ? "Sending..." : "Test"}</Button>}
+					<Button type="button" variant="outline" onClick={onCancel}>Cancel</Button>
+					<Button type="submit" disabled={isPending}>{isPending ? "Saving..." : "Save"}</Button>
+				</DialogFooter>
+			</form>
+		</Form>
+	)
+}
+
+const pushoverSchema = z.object({
+	name: z.string().min(1, "Name is required"),
+	is_default: z.boolean(),
+	settings: z.object({
+		user_key: z.string().min(1, "User Key is required"),
+		app_token: z.string().min(1, "App Token is required"),
+	}),
+})
+
+type PushoverFormData = z.infer<typeof pushoverSchema>
+
+function PushoverForm({ defaultValues, onSubmit, isPending, onCancel, onTest, testPending }: FormComponentProps<PushoverFormData>) {
+	const form = useForm<PushoverFormData>({ resolver: zodResolver(pushoverSchema), defaultValues })
+	return (
+		<Form {...form}>
+			<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+				<FormField control={form.control} name="name" render={({ field }) => (
+					<FormItem><FormLabel>Name</FormLabel><FormControl><Input placeholder="Pushover Alerts" {...field} /></FormControl><FormMessage /></FormItem>
+				)} />
+				<div className="grid grid-cols-2 gap-4">
+					<FormField control={form.control} name="settings.user_key" render={({ field }) => (
+						<FormItem><FormLabel>User Key</FormLabel><FormControl><Input placeholder="u..." {...field} /></FormControl><FormMessage /></FormItem>
+					)} />
+					<FormField control={form.control} name="settings.app_token" render={({ field }) => (
+						<FormItem><FormLabel>App Token</FormLabel><FormControl><Input placeholder="a..." {...field} /></FormControl><FormMessage /></FormItem>
+					)} />
+				</div>
+				<FormField control={form.control} name="is_default" render={({ field }) => (
+					<FormItem className="flex items-center justify-between rounded-lg border p-3">
+						<div className="space-y-0.5"><FormLabel>Default Provider</FormLabel></div>
+						<FormControl><Switch checked={field.value} onCheckedChange={field.onChange} /></FormControl>
+					</FormItem>
+				)} />
+				<DialogFooter className="gap-2">
+					{onTest && <Button type="button" variant="outline" onClick={onTest} disabled={testPending}>{testPending ? "Sending..." : "Test"}</Button>}
+					<Button type="button" variant="outline" onClick={onCancel}>Cancel</Button>
+					<Button type="submit" disabled={isPending}>{isPending ? "Saving..." : "Save"}</Button>
+				</DialogFooter>
+			</form>
+		</Form>
+	)
+}
 
 type FormComponentProps<T> = {
 	defaultValues: T
-	onSubmit: (data: T) => void
+	onSubmit: (data: any) => void
 	isPending: boolean
 	onCancel: () => void
 	onTest?: () => void

internal/site/src/components/router.tsx

@@ -10,6 +10,10 @@ const routes = {
 	settings: `/settings/:name?`,
 	forgot_password: `/forgot-password`,
 	request_otp: `/request-otp`,
+	status_pages: `/status-pages`,
+	incidents: `/incidents`,
+	calendar: `/calendar`,
+	monitoring: `/monitoring`,
 } as const
 
 /**

internal/site/src/components/routes/calendar.tsx

@@ -0,0 +1,17 @@
+import { memo, useEffect } from "react"
+import { useLingui } from "@lingui/react/macro"
+import { CalendarView } from "@/components/calendar/calendar-view"
+
+export default memo(() => {
+	const { t } = useLingui()
+
+	useEffect(() => {
+		document.title = `${t`Calendar`} / Beszel`
+	}, [t])
+
+	return (
+		<div className="flex flex-col gap-8">
+			<CalendarView />
+		</div>
+	)
+})

internal/site/src/components/routes/domain.tsx

@@ -1,11 +1,20 @@
-import { memo, useState } from "react"
+import { memo, useMemo, useState } from "react"
 import { useQuery } from "@tanstack/react-query"
 import { Trans } from "@lingui/react/macro"
 import { useToast } from "@/components/ui/use-toast"
 import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
+import {
+AlertDialog,
+AlertDialogAction,
+AlertDialogCancel,
+AlertDialogContent,
+AlertDialogDescription,
+AlertDialogFooter,
+AlertDialogHeader,
+AlertDialogTitle,
+} from "@/components/ui/alert-dialog"
 import { Badge } from "@/components/ui/badge"
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import {
 	Globe,
 	Calendar,
@@ -20,18 +29,15 @@ import {
 	CheckCircle2,
 	AlertTriangle,
 	XCircle,
-	Lock,
-	Key,
-	Fingerprint,
 	FileText,
 	User,
 	Mail,
-	Phone,
 	Building,
 } from "lucide-react"
-import { getDomain, getDomainHistory, refreshDomain, formatDate, formatDays } from "@/lib/domains"
-import { XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, AreaChart, Area } from "recharts"
+import { getDomain, getDomainHistory, refreshDomain, deleteDomain, formatDate, formatDays } from "@/lib/domains"
+import { XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, BarChart, Bar, Cell } from "recharts"
 import { Link, navigate } from "@/components/router"
+import { DomainDialog } from "@/components/domains-table/domain-dialog"
 
 // Status badge component
 function StatusBadge({ status }: { status: string }) {
@@ -77,17 +83,19 @@ function InfoCard({ title, value, icon: Icon, subtitle, className }: { title: st
 
 export default memo(function DomainDetail({ id }: { id: string }) {
 	const { toast } = useToast()
-	const [activeTab, setActiveTab] = useState("overview")
+	const [isEditDialogOpen, setIsEditDialogOpen] = useState(false)
+	const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false)
 
 	const { data: domain, isLoading: isDomainLoading } = useQuery({
 		queryKey: ["domain", id],
 		queryFn: () => getDomain(id),
-		refetchInterval: 60000,
+		refetchInterval: 30000,
 	})
 
 	const { data: history } = useQuery({
 		queryKey: ["domain-history", id],
 		queryFn: () => getDomainHistory(id),
+		refetchInterval: 60000,
 	})
 
 	const handleRefresh = async () => {
@@ -103,13 +111,40 @@ export default memo(function DomainDetail({ id }: { id: string }) {
 	}
 
 	const handleDelete = () => {
-		if (confirm("Are you sure you want to delete this domain?")) {
-			// Delete domain logic would go here
+		setIsDeleteDialogOpen(true)
+	}
+
+	const handleDeleteConfirm = async () => {
+		if (!domain?.id) return
+		try {
+			await deleteDomain(domain.id)
 			toast({ title: "Domain deleted" })
 			navigate("/")
+		} catch (error) {
+			toast({
+				title: "Failed to delete domain",
+				variant: "destructive",
+			})
+		} finally {
+			setIsDeleteDialogOpen(false)
 		}
 	}
 
+	// Prepare chart data from history (events by date)
+	const chartData = useMemo(() => {
+		if (!history?.length) return []
+		const counts: Record<string, number> = {}
+		history.forEach((h: any) => {
+			const d = h.created_at
+				? new Date(h.created_at).toISOString().split("T")[0]
+				: "Unknown"
+			counts[d] = (counts[d] || 0) + 1
+		})
+		return Object.entries(counts)
+			.map(([date, count]) => ({ date, count }))
+			.sort((a, b) => a.date.localeCompare(b.date))
+	}, [history])
+
 	if (isDomainLoading) {
 		return (
 			<div className="flex items-center justify-center h-64">
@@ -131,13 +166,6 @@ export default memo(function DomainDetail({ id }: { id: string }) {
 		)
 	}
 
-	// Prepare chart data from history
-	const chartData = history?.map((h: any) => ({
-		date: new Date(h.created).toLocaleDateString(),
-		daysUntilExpiry: h.days_until_expiry || 0,
-		sslDaysUntil: h.ssl_days_until || 0,
-	})) || []
-
 	return (
 		<div className="grid gap-4 mb-14">
 			{/* Header */}
@@ -175,7 +203,7 @@ export default memo(function DomainDetail({ id }: { id: string }) {
 									<Trans>Visit</Trans>
 								</a>
 							</Button>
-							<Button variant="outline" size="sm">
+							<Button variant="outline" size="sm" onClick={() => setIsEditDialogOpen(true)}>
 								<Edit3 className="mr-2 h-4 w-4" />
 								<Trans>Edit</Trans>
 							</Button>
@@ -200,14 +228,14 @@ export default memo(function DomainDetail({ id }: { id: string }) {
 					value={formatDate(domain.expiry_date)}
 					subtitle={formatDays(domain.days_until_expiry)}
 					icon={Calendar}
-					className={domain.days_until_expiry !== undefined && domain.days_until_expiry <= 30 ? "text-yellow-600" : ""}
+					className={domain.days_until_expiry !== undefined && domain.days_until_expiry >= 0 && domain.days_until_expiry <= 30 ? "text-yellow-600" : ""}
 				/>
 				<InfoCard
 					title="SSL Expiry"
 					value={domain.ssl_valid_to ? formatDate(domain.ssl_valid_to) : "No SSL"}
 					subtitle={domain.ssl_valid_to ? formatDays(domain.ssl_days_until) : undefined}
 					icon={Shield}
-					className={domain.ssl_days_until !== undefined && domain.ssl_days_until <= 14 ? "text-red-600" : ""}
+					className={domain.ssl_days_until !== undefined && domain.ssl_days_until >= 0 && domain.ssl_days_until <= 14 ? "text-red-600" : ""}
 				/>
 				<InfoCard
 					title="Location"
@@ -217,74 +245,73 @@ export default memo(function DomainDetail({ id }: { id: string }) {
 				/>
 			</div>
 
-			{/* Tabs */}
-			<Tabs value={activeTab} onValueChange={setActiveTab} className="contents">
-				<TabsList className="h-11 p-1.5 w-full shadow-xs overflow-auto justify-start">
-					<TabsTrigger value="overview" className="flex items-center gap-1.5 px-4">
-						<Globe className="size-3.5" />
-						<Trans>Overview</Trans>
-					</TabsTrigger>
-					<TabsTrigger value="dns" className="flex items-center gap-1.5 px-4">
-						<Server className="size-3.5" />
-						<Trans>DNS Records</Trans>
-					</TabsTrigger>
-					<TabsTrigger value="ssl" className="flex items-center gap-1.5 px-4">
-						<Lock className="size-3.5" />
-						<Trans>SSL Certificate</Trans>
-					</TabsTrigger>
-					<TabsTrigger value="whois" className="flex items-center gap-1.5 px-4">
-						<FileText className="size-3.5" />
-						<Trans>WHOIS Info</Trans>
-					</TabsTrigger>
-					<TabsTrigger value="history" className="flex items-center gap-1.5 px-4">
-						<Clock className="size-3.5" />
-						<Trans>History</Trans>
-					</TabsTrigger>
-				</TabsList>
+			{/* Expiry Comparison Chart */}
+			<Card>
+				<CardHeader>
+					<CardTitle>Expiry Overview</CardTitle>
+					<CardDescription>Days remaining until domain and SSL certificate expiration</CardDescription>
+				</CardHeader>
+				<CardContent>
+					<div className="h-[200px]">
+						<ResponsiveContainer width="100%" height="100%">
+							<BarChart
+								data={[
+									...(typeof domain.days_until_expiry === "number" && domain.days_until_expiry >= 0
+										? [{ name: "Domain Expiry", days: domain.days_until_expiry }]
+										: []),
+									...(typeof domain.ssl_days_until === "number" && domain.ssl_days_until >= 0
+										? [{ name: "SSL Expiry", days: domain.ssl_days_until }]
+										: []),
+								]}
+								layout="vertical"
+							>
+								<CartesianGrid strokeDasharray="3 3" opacity={0.3} />
+								<XAxis type="number" tick={{ fontSize: 12 }} />
+								<YAxis dataKey="name" type="category" tick={{ fontSize: 12 }} width={100} />
+								<Tooltip
+									formatter={(value: number) => [`${value} days`, "Remaining"]}
+									contentStyle={{ backgroundColor: "hsl(var(--card))", border: "1px solid hsl(var(--border))" }}
+								/>
+								<Bar dataKey="days" radius={[0, 4, 4, 0]}>
+									{[
+										{ days: domain.days_until_expiry ?? 0 },
+										{ days: domain.ssl_days_until ?? 0 },
+									].map((entry, index) => (
+											<Cell
+												key={`cell-${index}`}
+												fill={
+													entry.days <= 14
+														? "#ef4444"
+														: entry.days <= 30
+															? "#f59e0b"
+															: "#22c55e"
+												}
+											/>
+										))}
+									</Bar>
+								</BarChart>
+							</ResponsiveContainer>
+						</div>
+					</CardContent>
+				</Card>
 
-				<TabsContent value="overview" className="contents">
-					<div className="grid gap-4">
-						{/* Expiry Timeline Chart */}
+			<div className="grid gap-4">
+				{/* Expiry Timeline Chart */}
 						<Card>
 							<CardHeader>
-								<CardTitle>Domain Expiry Timeline</CardTitle>
-								<CardDescription>Days until domain and SSL expiry over time</CardDescription>
+								<CardTitle>History Events</CardTitle>
+								<CardDescription>Domain changes and check events over time</CardDescription>
 							</CardHeader>
 							<CardContent>
 								<div className="h-[300px]">
 									<ResponsiveContainer width="100%" height="100%">
-										<AreaChart data={chartData}>
-											<defs>
-												<linearGradient id="colorDomain" x1="0" y1="0" x2="0" y2="1">
-													<stop offset="5%" stopColor="#3b82f6" stopOpacity={0.3} />
-													<stop offset="95%" stopColor="#3b82f6" stopOpacity={0} />
-												</linearGradient>
-												<linearGradient id="colorSsl" x1="0" y1="0" x2="0" y2="1">
-													<stop offset="5%" stopColor="#22c55e" stopOpacity={0.3} />
-													<stop offset="95%" stopColor="#22c55e" stopOpacity={0} />
-												</linearGradient>
-											</defs>
+										<BarChart data={chartData}>
 											<CartesianGrid strokeDasharray="3 3" opacity={0.3} />
 											<XAxis dataKey="date" tick={{ fontSize: 12 }} />
-											<YAxis tick={{ fontSize: 12 }} />
+											<YAxis tick={{ fontSize: 12 }} allowDecimals={false} />
 											<Tooltip />
-											<Area
-												type="monotone"
-												dataKey="daysUntilExpiry"
-												stroke="#3b82f6"
-												fillOpacity={1}
-												fill="url(#colorDomain)"
-												name="Domain Days"
-											/>
-											<Area
-												type="monotone"
-												dataKey="sslDaysUntil"
-												stroke="#22c55e"
-												fillOpacity={1}
-												fill="url(#colorSsl)"
-												name="SSL Days"
-											/>
-										</AreaChart>
+											<Bar dataKey="count" fill="#3b82f6" name="Events" />
+										</BarChart>
 									</ResponsiveContainer>
 								</div>
 							</CardContent>
@@ -354,9 +381,7 @@ export default memo(function DomainDetail({ id }: { id: string }) {
 							</Card>
 						)}
 					</div>
-				</TabsContent>
 
-				<TabsContent value="dns" className="contents">
 					<div className="grid gap-4">
 						<Card>
 							<CardHeader>
@@ -434,9 +459,7 @@ export default memo(function DomainDetail({ id }: { id: string }) {
 							</CardContent>
 						</Card>
 					</div>
-				</TabsContent>
 
-				<TabsContent value="ssl" className="contents">
 					<div className="grid gap-4">
 						<Card>
 							<CardHeader>
@@ -458,7 +481,7 @@ export default memo(function DomainDetail({ id }: { id: string }) {
 												value={formatDate(domain.ssl_valid_to)}
 												subtitle={formatDays(domain.ssl_days_until)}
 												icon={Shield}
-												className={domain.ssl_days_until !== undefined && domain.ssl_days_until <= 14 ? "text-red-600" : ""}
+												className={domain.ssl_days_until !== undefined && domain.ssl_days_until >= 0 && domain.ssl_days_until <= 14 ? "text-red-600" : ""}
 											/>
 										</div>
 
@@ -511,9 +534,7 @@ export default memo(function DomainDetail({ id }: { id: string }) {
 							</CardContent>
 						</Card>
 					</div>
-				</TabsContent>
 
-				<TabsContent value="whois" className="contents">
 					<div className="grid gap-4">
 						<Card>
 							<CardHeader>
@@ -634,7 +655,7 @@ export default memo(function DomainDetail({ id }: { id: string }) {
 								)}
 
 								{/* Domain Status */}
-								{domain.status && domain.status !== "Unknown" && (
+								{domain.status && domain.status !== "unknown" && (
 									<div className="space-y-2 pt-4 border-t">
 										<h4 className="text-sm font-medium flex items-center gap-2">
 											<Shield className="h-4 w-4" />
@@ -650,9 +671,7 @@ export default memo(function DomainDetail({ id }: { id: string }) {
 							</CardContent>
 						</Card>
 					</div>
-				</TabsContent>
 
-				<TabsContent value="history" className="contents">
 					<Card>
 						<CardHeader>
 							<CardTitle>Change History</CardTitle>
@@ -669,7 +688,7 @@ export default memo(function DomainDetail({ id }: { id: string }) {
 											<p className="font-medium">{item.change_type}</p>
 											<p className="text-sm text-muted-foreground">{item.change_description}</p>
 											<p className="text-xs text-muted-foreground mt-1">
-												{new Date(item.created).toLocaleString()}
+												{new Date(item.created_at || item.created).toLocaleString()}
 											</p>
 										</div>
 									</div>
@@ -680,8 +699,32 @@ export default memo(function DomainDetail({ id }: { id: string }) {
 							</div>
 						</CardContent>
 					</Card>
-				</TabsContent>
-			</Tabs>
+			<DomainDialog
+				open={isEditDialogOpen}
+				onOpenChange={setIsEditDialogOpen}
+				domain={domain}
+				isEdit
+			/>
+
+			<AlertDialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
+				<AlertDialogContent>
+					<AlertDialogHeader>
+						<AlertDialogTitle>Delete Domain</AlertDialogTitle>
+						<AlertDialogDescription>
+							Are you sure you want to delete this domain? This action cannot be undone.
+						</AlertDialogDescription>
+					</AlertDialogHeader>
+					<AlertDialogFooter>
+						<AlertDialogCancel>Cancel</AlertDialogCancel>
+						<AlertDialogAction
+							onClick={handleDeleteConfirm}
+							className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+						>
+							Delete
+						</AlertDialogAction>
+					</AlertDialogFooter>
+				</AlertDialogContent>
+			</AlertDialog>
 		</div>
 	)
 })

internal/site/src/components/routes/home.tsx

@@ -1,10 +1,14 @@
 import { useLingui } from "@lingui/react/macro"
+import { getPagePath } from "@nanostores/router"
 import { memo, Suspense, useEffect, useMemo } from "react"
+import { Link, $router } from "@/components/router"
 import SystemsTable from "@/components/systems-table/systems-table"
 import MonitorsTable from "@/components/monitors-table/monitors-table"
 import DomainsTable from "@/components/domains-table/domains-table"
 import { ActiveAlerts } from "@/components/active-alerts"
 import { FooterRepoLink } from "@/components/footer-repo-link"
+import { Card, CardContent } from "@/components/ui/card"
+import { Globe, AlertTriangle, Calendar } from "lucide-react"
 
 export default memo(() => {
 	const { t } = useLingui()
@@ -16,8 +20,8 @@ export default memo(() => {
 	return useMemo(
 		() => (
 			<>
-				<div className="flex flex-col gap-6">
-					{/* Section 1: Device Monitoring (Primary) */}
+				<div className="flex flex-col gap-8">
+					{/* Section 1: System Monitoring */}
 					<section>
 						<ActiveAlerts />
 						<Suspense>
@@ -25,19 +29,62 @@ export default memo(() => {
 						</Suspense>
 					</section>
 
-					{/* Section 2: Website & Service Monitoring (Secondary) */}
+					{/* Section 2: Website & Service Monitoring */}
 					<section>
 						<Suspense>
 							<MonitorsTable />
 						</Suspense>
 					</section>
 
-					{/* Section 3: Domain Expiry Monitoring */}
+					{/* Section 3: Domain Monitoring */}
 					<section>
 						<Suspense>
 							<DomainsTable />
 						</Suspense>
 					</section>
+
+					{/* Section 4: Quick Actions */}
+					<section className="grid grid-cols-1 md:grid-cols-3 gap-4">
+						<Card>
+							<CardContent className="p-4">
+								<Link href={getPagePath($router, "status_pages")} className="flex items-center gap-3 hover:opacity-80">
+									<div className="p-2 bg-muted rounded-lg">
+										<Globe className="h-5 w-5 text-muted-foreground" />
+									</div>
+									<div>
+										<p className="font-semibold">{t`Status Pages`}</p>
+										<p className="text-sm text-muted-foreground">{t`Manage public status pages`}</p>
+									</div>
+								</Link>
+							</CardContent>
+						</Card>
+						<Card>
+							<CardContent className="p-4">
+								<Link href={getPagePath($router, "incidents")} className="flex items-center gap-3 hover:opacity-80">
+									<div className="p-2 bg-muted rounded-lg">
+										<AlertTriangle className="h-5 w-5 text-muted-foreground" />
+									</div>
+									<div>
+										<p className="font-semibold">{t`Incidents`}</p>
+										<p className="text-sm text-muted-foreground">{t`View and manage incidents`}</p>
+									</div>
+								</Link>
+							</CardContent>
+						</Card>
+						<Card>
+							<CardContent className="p-4">
+								<Link href={getPagePath($router, "calendar")} className="flex items-center gap-3 hover:opacity-80">
+									<div className="p-2 bg-muted rounded-lg">
+										<Calendar className="h-5 w-5 text-muted-foreground" />
+									</div>
+									<div>
+										<p className="font-semibold">{t`Calendar`}</p>
+										<p className="text-sm text-muted-foreground">{t`Domain and SSL expiry calendar`}</p>
+									</div>
+								</Link>
+							</CardContent>
+						</Card>
+					</section>
 				</div>
 				<FooterRepoLink />
 			</>

internal/site/src/components/routes/incidents.tsx

@@ -0,0 +1,122 @@
+import { memo, useEffect, useState } from "react"
+import { useLingui } from "@lingui/react/macro"
+import { useQuery } from "@tanstack/react-query"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { CalendarIcon, AlertTriangle, CheckCircle2, Clock } from "lucide-react"
+import { getIncidents, type Incident } from "@/lib/incidents"
+import { formatDate } from "@/lib/domains"
+
+function StatusBadge({ status }: { status: string }) {
+	const configs: Record<string, { color: string; icon: React.ElementType; text: string }> = {
+		open: { color: "bg-red-500", icon: AlertTriangle, text: "Open" },
+		acknowledged: { color: "bg-yellow-500", icon: Clock, text: "Acknowledged" },
+		resolved: { color: "bg-green-500", icon: CheckCircle2, text: "Resolved" },
+		closed: { color: "bg-gray-500", icon: CheckCircle2, text: "Closed" },
+	}
+	const config = configs[status] || configs.open
+	const Icon = config.icon
+	return (
+		<div className="flex items-center gap-2">
+			<div className={`h-2.5 w-2.5 rounded-full ${config.color}`} />
+			<Icon className="h-4 w-4 text-muted-foreground" />
+			<span className="capitalize text-sm">{config.text}</span>
+		</div>
+	)
+}
+
+function SeverityBadge({ severity }: { severity: string }) {
+	const colors: Record<string, string> = {
+		critical: "bg-red-500",
+		high: "bg-orange-500",
+		medium: "bg-yellow-500",
+		low: "bg-blue-500",
+	}
+	return <Badge className={colors[severity] || "bg-gray-500"}>{severity}</Badge>
+}
+
+export default memo(() => {
+	const { t } = useLingui()
+	const [filter, setFilter] = useState("all")
+
+	useEffect(() => {
+		document.title = `${t`Incidents`} / Beszel`
+	}, [t])
+
+	const { data: incidents = [], isLoading } = useQuery({
+		queryKey: ["incidents", filter],
+		queryFn: () => getIncidents(filter === "all" ? undefined : { status: filter }),
+	})
+
+	if (isLoading) {
+		return (
+			<div className="container">
+				<div className="p-4">Loading incidents...</div>
+			</div>
+		)
+	}
+
+	return (
+		<div className="container flex flex-col gap-6">
+			<div className="flex items-center justify-between">
+				<h1 className="text-2xl font-semibold">{t`Incidents`}</h1>
+				<div className="flex gap-2">
+					{["all", "open", "acknowledged", "resolved", "closed"].map((s) => (
+						<Button
+							key={s}
+							variant={filter === s ? "default" : "outline"}
+							size="sm"
+							onClick={() => setFilter(s)}
+						>
+							{s}
+						</Button>
+					))}
+				</div>
+			</div>
+
+			{incidents.length === 0 ? (
+				<Card>
+					<CardContent className="p-8 text-center text-muted-foreground">
+						No incidents found.
+					</CardContent>
+				</Card>
+			) : (
+				<div className="grid gap-4">
+					{incidents.map((incident: Incident) => (
+						<Card key={incident.id}>
+							<CardHeader className="pb-2">
+								<div className="flex items-center justify-between">
+									<CardTitle className="text-lg">{incident.title}</CardTitle>
+									<div className="flex gap-2">
+										<SeverityBadge severity={incident.severity} />
+										<StatusBadge status={incident.status} />
+									</div>
+								</div>
+							</CardHeader>
+							<CardContent>
+								{incident.description && (
+									<p className="text-sm text-muted-foreground mb-3">
+										{incident.description}
+									</p>
+								)}
+								<div className="flex items-center gap-4 text-xs text-muted-foreground">
+									<span className="flex items-center gap-1">
+										<CalendarIcon className="h-3 w-3" />
+										Started: {formatDate(incident.started_at)}
+									</span>
+									{incident.resolved_at && (
+										<span className="flex items-center gap-1">
+											<CheckCircle2 className="h-3 w-3" />
+											Resolved: {formatDate(incident.resolved_at)}
+										</span>
+									)}
+								</div>
+							</CardContent>
+						</Card>
+					))}
+				</div>
+			)}
+		</div>
+	)
+})

internal/site/src/components/routes/monitor.tsx

@@ -1,11 +1,22 @@
-import { memo, useState, useMemo } from "react"
+import { memo, useMemo, useState } from "react"
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
 import { Trans } from "@lingui/react/macro"
 import { useToast } from "@/components/ui/use-toast"
 import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import {
+AlertDialog,
+AlertDialogAction,
+AlertDialogCancel,
+AlertDialogContent,
+AlertDialogDescription,
+AlertDialogFooter,
+AlertDialogHeader,
+AlertDialogTitle,
+} from "@/components/ui/alert-dialog"
 import { Badge } from "@/components/ui/badge"
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
 import {
 	Globe,
@@ -30,13 +41,27 @@ import {
 	pauseMonitor,
 	resumeMonitor,
 	deleteMonitor,
+	updateMonitor,
 	getMonitorTypeLabel,
 	formatUptime,
 	formatPing,
 } from "@/lib/monitors"
 import { formatDate } from "@/lib/domains"
-import { XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, LineChart, AreaChart, Area } from "recharts"
+import { getStatusPages, createStatusPage } from "@/lib/statuspages"
+import {
+	Bar,
+	XAxis,
+	YAxis,
+	CartesianGrid,
+	Tooltip,
+	ResponsiveContainer,
+	Area,
+	Cell,
+	ComposedChart,
+	Legend,
+} from "recharts"
 import { Link, navigate } from "@/components/router"
+import { AddMonitorDialog } from "@/components/monitors-table/add-monitor-dialog"
 import { cn } from "@/lib/utils"
 
 // Status badge component
@@ -103,22 +128,27 @@ function StatCard({
 export default memo(function MonitorDetail({ id }: { id: string }) {
 	const { toast } = useToast()
 	const queryClient = useQueryClient()
-	const [activeTab, setActiveTab] = useState("overview")
+	const [isEditDialogOpen, setIsEditDialogOpen] = useState(false)
+	const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false)
+	const [timeRange, setTimeRange] = useState<"24h" | "7d" | "30d">("24h")
 
 	const { data: monitor, isLoading: isMonitorLoading } = useQuery({
 		queryKey: ["monitor", id],
 		queryFn: () => getMonitor(id),
+		staleTime: Infinity,
 		refetchInterval: 30000,
 	})
 
 	const { data: stats } = useQuery({
 		queryKey: ["monitor-stats", id],
 		queryFn: () => getMonitorStats(id),
+		refetchInterval: 30000,
 	})
 
 	const { data: heartbeatsData } = useQuery({
 		queryKey: ["monitor-heartbeats", id],
 		queryFn: () => getMonitorHeartbeats(id),
+		refetchInterval: 30000,
 	})
 	const heartbeats = heartbeatsData?.heartbeats
 
@@ -152,24 +182,72 @@ export default memo(function MonitorDetail({ id }: { id: string }) {
 		},
 	})
 
+	const [isCreateStatusPageOpen, setIsCreateStatusPageOpen] = useState(false)
+	const [statusPageName, setStatusPageName] = useState("")
+	const [statusPageSlug, setStatusPageSlug] = useState("")
+
+	const { data: statusPages } = useQuery({
+		queryKey: ["status-pages"],
+		queryFn: () => getStatusPages(),
+	})
+
+	const updateStatusPagesMutation = useMutation({
+		mutationFn: (status_pages: string[]) => updateMonitor(id, { status_pages } as any),
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: ["monitor", id] })
+			toast({ title: "Status pages updated" })
+		},
+	})
+
+	const createStatusPageMutation = useMutation({
+		mutationFn: () =>
+			createStatusPage({
+				name: statusPageName || `${monitor?.name} Status`,
+				slug: statusPageSlug || monitor?.name?.toLowerCase().replace(/\s+/g, "-") || "status",
+				title: statusPageName || `${monitor?.name} Status Page`,
+				public: true,
+			}),
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: ["status-pages"] })
+			toast({ title: "Status page created" })
+			setIsCreateStatusPageOpen(false)
+			setStatusPageName("")
+			setStatusPageSlug("")
+		},
+	})
+
 	const handleDelete = () => {
-		if (confirm("Are you sure you want to delete this monitor?")) {
-			deleteMutation.mutate()
-		}
+		setIsDeleteDialogOpen(true)
 	}
 
+	// Filter heartbeats by time range
+	const filteredHeartbeats = useMemo(() => {
+		if (!heartbeats) return []
+		const now = Date.now()
+		const ranges: Record<string, number> = {
+			"24h": 24 * 60 * 60 * 1000,
+			"7d": 7 * 24 * 60 * 60 * 1000,
+			"30d": 30 * 24 * 60 * 60 * 1000,
+		}
+		const cutoff = now - (ranges[timeRange] || ranges["24h"])
+		return heartbeats.filter((h: any) => {
+			const t = new Date(h.time || h.timestamp).getTime()
+			return t >= cutoff
+		})
+	}, [heartbeats, timeRange])
+
 	// Prepare chart data from heartbeats
 	const chartData = useMemo(() => {
-		if (!heartbeats) return []
-		return heartbeats
+		if (!filteredHeartbeats.length) return []
+		return filteredHeartbeats
 			.slice()
 			.reverse()
 			.map((h: any) => ({
-				time: new Date(h.timestamp).toLocaleTimeString(),
+				time: new Date(h.time || h.timestamp).toLocaleTimeString(),
 				responseTime: h.ping || 0,
 				status: h.status === "up" ? 1 : 0,
 			}))
-	}, [heartbeats])
+	}, [filteredHeartbeats])
 
 	// Calculate stats
 	const uptimeStats = useMemo(() => {
@@ -278,7 +356,7 @@ export default memo(function MonitorDetail({ id }: { id: string }) {
 									</>
 								)}
 							</Button>
-							<Button variant="outline" size="sm">
+							<Button variant="outline" size="sm" onClick={() => setIsEditDialogOpen(true)}>
 								<Edit3 className="mr-2 h-4 w-4" />
 								<Trans>Edit</Trans>
 							</Button>
@@ -291,230 +369,308 @@ export default memo(function MonitorDetail({ id }: { id: string }) {
 				</CardContent>
 			</Card>
 
-			{/* Stats Grid */}
-			<div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
+			{/* Summary Bar */}
+			<div className="grid sm:grid-cols-4 gap-4">
 				<StatCard
 					title="Uptime (24h)"
 					value={formatUptime(stats?.uptime_24h ? (stats.uptime_24h.up / stats.uptime_24h.total) * 100 : 0)}
 					icon={Activity}
-					trend={stats?.uptime_24h && (stats.uptime_24h.up / stats.uptime_24h.total) * 100 >= 99 ? "up" : "down"}
 				/>
 				<StatCard
 					title="Uptime (7d)"
 					value={formatUptime(stats?.uptime_7d ? (stats.uptime_7d.up / stats.uptime_7d.total) * 100 : 0)}
 					icon={Activity}
-					trend={stats?.uptime_7d && (stats.uptime_7d.up / stats.uptime_7d.total) * 100 >= 99 ? "up" : "down"}
 				/>
 				<StatCard
 					title="Uptime (30d)"
 					value={formatUptime(stats?.uptime_30d ? (stats.uptime_30d.up / stats.uptime_30d.total) * 100 : 0)}
 					icon={Activity}
-					trend={stats?.uptime_30d && (stats.uptime_30d.up / stats.uptime_30d.total) * 100 >= 99 ? "up" : "down"}
 				/>
 				<StatCard
-					title="Response Time"
+					title="Avg Response"
 					value={uptimeStats ? `${uptimeStats.avgResponse}ms` : "-"}
 					subtitle={`${uptimeStats?.totalChecks || 0} checks`}
 					icon={Clock}
 				/>
 			</div>
 
-			{/* Tabs */}
-			<Tabs value={activeTab} onValueChange={setActiveTab} className="contents">
-				<TabsList className="h-11 p-1.5 w-full shadow-xs overflow-auto justify-start">
-					<TabsTrigger value="overview" className="w-full flex items-center gap-1.5">
-						<Activity className="size-3.5" />
-						<Trans>Overview</Trans>
-					</TabsTrigger>
-					<TabsTrigger value="response" className="w-full flex items-center gap-1.5">
-						<TrendingUp className="size-3.5" />
-						<Trans>Response Times</Trans>
-					</TabsTrigger>
-					<TabsTrigger value="history" className="w-full flex items-center gap-1.5">
-						<Clock className="size-3.5" />
-						<Trans>Check History</Trans>
-					</TabsTrigger>
-				</TabsList>
-
-				<TabsContent value="overview" className="contents">
-					<div className="grid gap-4">
-						{/* Response Time Chart */}
-						<Card>
-							<CardHeader>
-								<CardTitle>Response Time History</CardTitle>
-								<CardDescription>Response times for the last 50 checks</CardDescription>
-							</CardHeader>
-							<CardContent>
-								<div className="h-[300px]">
-									<ResponsiveContainer width="100%" height="100%">
-										<LineChart data={chartData}>
-											<defs>
-												<linearGradient id="colorResponse" x1="0" y1="0" x2="0" y2="1">
-													<stop offset="5%" stopColor="#3b82f6" stopOpacity={0.3} />
-													<stop offset="95%" stopColor="#3b82f6" stopOpacity={0} />
-												</linearGradient>
-											</defs>
-											<CartesianGrid strokeDasharray="3 3" opacity={0.3} />
-											<XAxis dataKey="time" tick={{ fontSize: 12 }} />
-											<YAxis tick={{ fontSize: 12 }} unit="ms" />
-											<Tooltip
-												contentStyle={{ backgroundColor: "hsl(var(--card))", border: "1px solid hsl(var(--border))" }}
-											/>
-											<Area
-												type="monotone"
-												dataKey="responseTime"
-												stroke="#3b82f6"
-												fillOpacity={1}
-												fill="url(#colorResponse)"
-												name="Response Time (ms)"
-											/>
-										</LineChart>
-									</ResponsiveContainer>
-								</div>
-							</CardContent>
-						</Card>
-
-						{/* Monitor Details */}
-						<div className="grid sm:grid-cols-2 gap-4">
-							<Card>
-								<CardHeader>
-									<CardTitle>Monitor Details</CardTitle>
-								</CardHeader>
-								<CardContent className="space-y-2">
-									<div className="flex justify-between">
-										<span className="text-muted-foreground">Type</span>
-										<span className="font-medium">{getMonitorTypeLabel(monitor.type)}</span>
-									</div>
-									<div className="flex justify-between">
-										<span className="text-muted-foreground">Interval</span>
-										<span className="font-medium">{monitor.interval}s</span>
-									</div>
-									<div className="flex justify-between">
-										<span className="text-muted-foreground">Retries</span>
-										<span className="font-medium">{monitor.retries}</span>
-									</div>
-									<div className="flex justify-between">
-										<span className="text-muted-foreground">Created</span>
-										<span className="font-medium">{formatDate(monitor.created)}</span>
-									</div>
-									{monitor.last_check && (
-										<div className="flex justify-between">
-											<span className="text-muted-foreground">Last Check</span>
-											<span className="font-medium">{formatDate(monitor.last_check)}</span>
-										</div>
-									)}
-								</CardContent>
-							</Card>
-
-							<Card>
-								<CardHeader>
-									<CardTitle>Uptime Statistics</CardTitle>
-								</CardHeader>
-								<CardContent className="space-y-2">
-									<div className="flex justify-between">
-										<span className="text-muted-foreground">24 Hours</span>
-										<span className="font-medium text-green-600">{formatUptime(stats?.uptime_24h ? (stats.uptime_24h.up / stats.uptime_24h.total) * 100 : 0)}</span>
-									</div>
-									<div className="flex justify-between">
-										<span className="text-muted-foreground">7 Days</span>
-										<span className="font-medium text-green-600">{formatUptime(stats?.uptime_7d ? (stats.uptime_7d.up / stats.uptime_7d.total) * 100 : 0)}</span>
-									</div>
-									<div className="flex justify-between">
-										<span className="text-muted-foreground">30 Days</span>
-										<span className="font-medium text-green-600">{formatUptime(stats?.uptime_30d ? (stats.uptime_30d.up / stats.uptime_30d.total) * 100 : 0)}</span>
-									</div>
-									{uptimeStats && (
-										<div className="flex justify-between">
-											<span className="text-muted-foreground">Total Checks</span>
-											<span className="font-medium">{uptimeStats.totalChecks}</span>
-										</div>
-									)}
-								</CardContent>
-							</Card>
-						</div>
+			{/* Combined Uptime & Response Chart */}
+			<Card>
+				<CardHeader className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+					<div>
+						<CardTitle>Uptime & Response Time</CardTitle>
+						<CardDescription>
+							<Trans>Status and response time over the selected period</Trans>
+						</CardDescription>
 					</div>
-				</TabsContent>
-
-				<TabsContent value="response" className="contents">
-					<Card>
-						<CardHeader>
-							<CardTitle>Response Time Analysis</CardTitle>
-							<CardDescription>Detailed response time metrics</CardDescription>
-						</CardHeader>
-						<CardContent>
-							<div className="h-[400px]">
-								<ResponsiveContainer width="100%" height="100%">
-									<AreaChart data={chartData}>
-										<defs>
-											<linearGradient id="colorResponseDetail" x1="0" y1="0" x2="0" y2="1">
-												<stop offset="5%" stopColor="#8b5cf6" stopOpacity={0.3} />
-												<stop offset="95%" stopColor="#8b5cf6" stopOpacity={0} />
-											</linearGradient>
-										</defs>
-										<CartesianGrid strokeDasharray="3 3" opacity={0.3} />
-										<XAxis dataKey="time" tick={{ fontSize: 12 }} />
-										<YAxis tick={{ fontSize: 12 }} unit="ms" />
-										<Tooltip
-											contentStyle={{ backgroundColor: "hsl(var(--card))", border: "1px solid hsl(var(--border))" }}
-										/>
-										<Area
-											type="monotone"
-											dataKey="responseTime"
-											stroke="#8b5cf6"
-											strokeWidth={2}
-											fillOpacity={1}
-											fill="url(#colorResponseDetail)"
-											name="Response Time (ms)"
-										/>
-									</AreaChart>
-								</ResponsiveContainer>
+					<div className="flex items-center gap-2">
+						{(["24h", "7d", "30d"] as const).map((range) => (
+							<Button
+								key={range}
+								variant={timeRange === range ? "default" : "outline"}
+								size="sm"
+								onClick={() => setTimeRange(range)}
+							>
+								{range === "24h" ? "24h" : range === "7d" ? "7d" : "30d"}
+							</Button>
+						))}
+					</div>
+				</CardHeader>
+				<CardContent>
+					<div className="h-[300px]">
+						{chartData.length > 0 ? (
+							<ResponsiveContainer width="100%" height="100%">
+								<ComposedChart data={chartData}>
+									<defs>
+										<linearGradient id="colorResponse" x1="0" y1="0" x2="0" y2="1">
+											<stop offset="5%" stopColor="#3b82f6" stopOpacity={0.3} />
+											<stop offset="95%" stopColor="#3b82f6" stopOpacity={0} />
+										</linearGradient>
+									</defs>
+									<CartesianGrid strokeDasharray="3 3" opacity={0.3} />
+									<XAxis dataKey="time" tick={{ fontSize: 12 }} />
+									<YAxis
+										yAxisId="left"
+										tick={{ fontSize: 12 }}
+										unit="ms"
+									/>
+									<YAxis
+										yAxisId="right"
+										orientation="right"
+										tick={{ fontSize: 12 }}
+										domain={[0, 1]}
+										tickFormatter={(v) => (v === 1 ? "Up" : "Down")}
+									/>
+									<Tooltip
+										contentStyle={{
+											backgroundColor: "hsl(var(--card))",
+											border: "1px solid hsl(var(--border))",
+										}}
+									/>
+									<Legend />
+									<Area
+										yAxisId="left"
+										type="monotone"
+										dataKey="responseTime"
+										stroke="#3b82f6"
+										fillOpacity={1}
+										fill="url(#colorResponse)"
+										name="Response Time (ms)"
+									/>
+									<Bar
+										yAxisId="right"
+										dataKey="status"
+										barSize={4}
+										name="Status"
+									>
+										{chartData.map((entry, index) => (
+											<Cell
+												key={`cell-${index}`}
+												fill={entry.status === 1 ? "#22c55e" : "#ef4444"}
+											/>
+										))}
+									</Bar>
+								</ComposedChart>
+							</ResponsiveContainer>
+						) : (
+							<div className="h-full flex items-center justify-center text-muted-foreground">
+								<Trans>No data available for selected time range</Trans>
 							</div>
-						</CardContent>
-					</Card>
-				</TabsContent>
+						)}
+					</div>
+				</CardContent>
+			</Card>
 
-				<TabsContent value="history" className="contents">
-					<Card>
-						<CardHeader>
-							<CardTitle>Recent Checks</CardTitle>
-							<CardDescription>Last 50 monitor checks</CardDescription>
-						</CardHeader>
-						<CardContent>
-							<Table>
-								<TableHeader>
-									<TableRow>
-										<TableHead>Time</TableHead>
-										<TableHead>Status</TableHead>
-										<TableHead>Response Time</TableHead>
-										<TableHead>Message</TableHead>
-									</TableRow>
-								</TableHeader>
-								<TableBody>
-									{heartbeats?.slice(0, 50).map((hb: any) => (
-										<TableRow key={hb.id}>
-											<TableCell>{formatDate(hb.timestamp)}</TableCell>
-											<TableCell>
-												<Badge variant={hb.status === "up" ? "default" : "destructive"}>
-													{hb.status}
-												</Badge>
-											</TableCell>
-											<TableCell>{formatPing(hb.ping)}</TableCell>
-											<TableCell className="max-w-xs truncate">{hb.message || "-"}</TableCell>
-										</TableRow>
-									))}
-									{!heartbeats?.length && (
-										<TableRow>
-											<TableCell colSpan={4} className="text-center py-8 text-muted-foreground">
-												No check history available
-											</TableCell>
-										</TableRow>
-									)}
-								</TableBody>
-							</Table>
-						</CardContent>
-					</Card>
-				</TabsContent>
-			</Tabs>
+			<div className="grid sm:grid-cols-2 gap-4">
+				<Card>
+					<CardHeader>
+						<CardTitle>Monitor Details</CardTitle>
+					</CardHeader>
+					<CardContent className="space-y-2">
+						<div className="flex justify-between">
+							<span className="text-muted-foreground">Type</span>
+							<span className="font-medium">{getMonitorTypeLabel(monitor.type)}</span>
+						</div>
+						<div className="flex justify-between">
+							<span className="text-muted-foreground">Interval</span>
+							<span className="font-medium">{monitor.interval}s</span>
+						</div>
+						<div className="flex justify-between">
+							<span className="text-muted-foreground">Retries</span>
+							<span className="font-medium">{monitor.retries}</span>
+						</div>
+						<div className="flex justify-between">
+							<span className="text-muted-foreground">Created</span>
+							<span className="font-medium">{formatDate(monitor.created)}</span>
+						</div>
+						{monitor.last_check && (
+							<div className="flex justify-between">
+								<span className="text-muted-foreground">Last Check</span>
+								<span className="font-medium">{formatDate(monitor.last_check)}</span>
+							</div>
+						)}
+					</CardContent>
+				</Card>
+
+				<Card>
+					<CardHeader>
+						<CardTitle>Status Page</CardTitle>
+						<CardDescription>Link or create a public status page</CardDescription>
+					</CardHeader>
+					<CardContent className="space-y-3">
+						{statusPages && statusPages.length > 0 ? (
+							<div className="space-y-2">
+								{statusPages.map((page) => {
+									const isLinked = monitor.status_pages?.includes(page.id) || false
+									return (
+										<div key={page.id} className="flex items-center justify-between py-1">
+											<span className="text-sm">{page.name}</span>
+											<Button
+												variant={isLinked ? "default" : "outline"}
+												size="sm"
+												onClick={() => {
+													const current = monitor.status_pages || []
+													const next = isLinked
+															? current.filter((sp) => sp !== page.id)
+															: [...current, page.id]
+													updateStatusPagesMutation.mutate({
+														id: monitor.id,
+														status_pages: next,
+													} as any)
+												}}
+											>
+												{isLinked ? "Linked" : "Link"}
+											</Button>
+										</div>
+									)
+									})}
+								</div>
+							) : (
+								<p className="text-sm text-muted-foreground">No status pages yet.</p>
+							)}
+						<Button
+							variant="outline"
+							size="sm"
+							className="w-full"
+							onClick={() => setIsCreateStatusPageOpen(true)}
+						>
+							Create Status Page
+						</Button>
+					</CardContent>
+				</Card>
+			</div>
+
+			<Card>
+				<CardHeader>
+					<CardTitle>Recent Checks</CardTitle>
+					<CardDescription>Last 50 monitor checks</CardDescription>
+				</CardHeader>
+				<CardContent>
+					<Table>
+						<TableHeader>
+							<TableRow>
+								<TableHead>Time</TableHead>
+								<TableHead>Status</TableHead>
+								<TableHead>Response Time</TableHead>
+								<TableHead>Message</TableHead>
+							</TableRow>
+						</TableHeader>
+						<TableBody>
+							{heartbeats?.slice(0, 50).map((hb: any) => (
+								<TableRow key={hb.id}>
+									<TableCell>{formatDate(hb.time || hb.timestamp)}</TableCell>
+									<TableCell>
+										<Badge variant={hb.status === "up" ? "default" : "destructive"}>
+											{hb.status}
+										</Badge>
+									</TableCell>
+									<TableCell>{formatPing(hb.ping)}</TableCell>
+									<TableCell className="max-w-xs truncate">{hb.msg || "-"}</TableCell>
+								</TableRow>
+							))}
+							{!heartbeats?.length && (
+								<TableRow>
+									<TableCell colSpan={4} className="text-center py-8 text-muted-foreground">
+										No check history available
+									</TableCell>
+								</TableRow>
+							)}
+						</TableBody>
+					</Table>
+				</CardContent>
+			</Card>
+
+			{/* Create Status Page Dialog */}
+			{isCreateStatusPageOpen && (
+				<AlertDialog open={isCreateStatusPageOpen} onOpenChange={setIsCreateStatusPageOpen}>
+					<AlertDialogContent>
+						<AlertDialogHeader>
+							<AlertDialogTitle>Create Status Page</AlertDialogTitle>
+							<AlertDialogDescription>
+								Create a public status page for this monitor.
+							</AlertDialogDescription>
+						</AlertDialogHeader>
+						<div className="grid gap-4 py-4">
+							<div className="grid gap-2">
+								<Label htmlFor="sp-name">Name</Label>
+								<Input
+									id="sp-name"
+									value={statusPageName}
+									onChange={(e) => setStatusPageName(e.target.value)}
+									placeholder={`${monitor.name} Status`}
+								/>
+							</div>
+							<div className="grid gap-2">
+								<Label htmlFor="sp-slug">Slug</Label>
+								<Input
+									id="sp-slug"
+									value={statusPageSlug}
+									onChange={(e) => setStatusPageSlug(e.target.value)}
+									placeholder={monitor.name?.toLowerCase().replace(/\s+/g, "-")}
+								/>
+							</div>
+						</div>
+						<AlertDialogFooter>
+							<AlertDialogCancel onClick={() => setIsCreateStatusPageOpen(false)}>Cancel</AlertDialogCancel>
+							<AlertDialogAction
+								onClick={() => createStatusPageMutation.mutate()}
+								disabled={createStatusPageMutation.isPending}
+							>
+								Create
+							</AlertDialogAction>
+						</AlertDialogFooter>
+					</AlertDialogContent>
+				</AlertDialog>
+			)}
+			<AddMonitorDialog
+				open={isEditDialogOpen}
+				onOpenChange={setIsEditDialogOpen}
+				monitor={monitor}
+				isEdit
+			/>
+
+			<AlertDialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
+				<AlertDialogContent>
+					<AlertDialogHeader>
+						<AlertDialogTitle>Delete Monitor</AlertDialogTitle>
+						<AlertDialogDescription>
+							Are you sure you want to delete this monitor? This action cannot be undone.
+						</AlertDialogDescription>
+					</AlertDialogHeader>
+					<AlertDialogFooter>
+						<AlertDialogCancel>Cancel</AlertDialogCancel>
+						<AlertDialogAction
+							onClick={() => {
+								deleteMutation.mutate()
+								setIsDeleteDialogOpen(false)
+							}}
+							className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+						>
+							Delete
+						</AlertDialogAction>
+					</AlertDialogFooter>
+				</AlertDialogContent>
+			</AlertDialog>
 		</div>
 	)
 })

internal/site/src/components/routes/monitoring.tsx

@@ -0,0 +1,18 @@
+import { memo } from "react"
+import MonitorsTable from "@/components/monitors-table/monitors-table"
+import DomainsTable from "@/components/domains-table/domains-table"
+
+const MonitoringPage = memo(function MonitoringPage() {
+	return (
+		<div className="grid gap-8 mb-14">
+			<section>
+				<MonitorsTable />
+			</section>
+			<section>
+				<DomainsTable />
+			</section>
+		</div>
+	)
+})
+
+export default MonitoringPage

internal/site/src/components/routes/status-pages.tsx

@@ -0,0 +1,17 @@
+import { memo, useEffect } from "react"
+import { useLingui } from "@lingui/react/macro"
+import { StatusPagesTable } from "@/components/status-pages/status-pages-table"
+
+export default memo(() => {
+	const { t } = useLingui()
+
+	useEffect(() => {
+		document.title = `${t`Status Pages`} / Beszel`
+	}, [t])
+
+	return (
+		<div className="flex flex-col gap-8">
+			<StatusPagesTable />
+		</div>
+	)
+})

internal/site/src/components/status-pages/status-pages-table.tsx

@@ -2,7 +2,7 @@
 
 import { useState } from "react"
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
-import { useToast } from "@/hooks/use-toast"
+import { useToast } from "@/components/ui/use-toast"
 import { Button } from "@/components/ui/button"
 import {
 	Table,

internal/site/src/components/systems-table/systems-table.tsx

@@ -17,12 +17,14 @@ import {
 import { useVirtualizer, type VirtualItem } from "@tanstack/react-virtual"
 import {
 	ArrowDownIcon,
-	ArrowUpDownIcon,
 	ArrowUpIcon,
 	EyeIcon,
 	FilterIcon,
 	LayoutGridIcon,
 	LayoutListIcon,
+	PauseIcon,
+	PlusIcon,
+	ServerIcon,
 	Settings2Icon,
 	XIcon,
 } from "lucide-react"
@@ -32,7 +34,6 @@ import {
 	DropdownMenu,
 	DropdownMenuCheckboxItem,
 	DropdownMenuContent,
-	DropdownMenuItem,
 	DropdownMenuLabel,
 	DropdownMenuRadioGroup,
 	DropdownMenuRadioItem,
@@ -46,6 +47,7 @@ import { $downSystems, $pausedSystems, $systems, $upSystems } from "@/lib/stores
 import { cn, runOnce, useBrowserStorage } from "@/lib/utils"
 import type { SystemRecord } from "@/types"
 import AlertButton from "../alerts/alert-button"
+import { AddSystemDialog } from "../add-system"
 import { $router, Link } from "../router"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../ui/card"
 import { SystemsTableColumns, ActionsButton, IndicatorDot } from "./systems-table-columns"
@@ -70,6 +72,7 @@ export default function SystemsTable() {
 	)
 	const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
 	const [columnVisibility, setColumnVisibility] = useBrowserStorage<VisibilityState>("cols", {})
+	const [addSystemDialogOpen, setAddSystemDialogOpen] = useState(false)
 
 	const locale = i18n.locale
 
@@ -134,18 +137,45 @@ export default function SystemsTable() {
 
 	const CardHead = useMemo(() => {
 		return (
-			<CardHeader className="p-0 mb-3 sm:mb-4">
-				<div className="grid md:flex gap-x-5 gap-y-3 w-full items-end">
-					<div className="px-2 sm:px-1">
-						<CardTitle className="mb-2">
-							<Trans>All Systems</Trans>
-						</CardTitle>
-						<CardDescription className="flex">
-							<Trans>Click on a system to view more information.</Trans>
-						</CardDescription>
+			<CardHeader className="p-0 pb-5">
+				<div className="flex flex-col gap-4">
+					{/* Title row */}
+					<div className="flex flex-col sm:flex-row sm:items-start justify-between gap-4">
+						<div className="flex-1">
+							<CardTitle className="text-xl mb-2 flex items-center gap-2">
+								<ServerIcon className="h-5 w-5 text-primary" />
+								<Trans>All Systems</Trans>
+							</CardTitle>
+							<CardDescription className="flex flex-wrap items-center gap-x-2 gap-y-1">
+								<Trans>Click on a system to view more information.</Trans>
+								<span className="text-xs text-muted-foreground">
+									({upSystemsLength} <ArrowUpIcon className="inline h-3 w-3 text-green-500" />
+									{downSystemsLength > 0 && (
+										<>
+											{" "}
+											{downSystemsLength}{" "}
+											<ArrowDownIcon className="inline h-3 w-3 text-red-500" />
+										</>
+									)}
+									{pausedSystemsLength > 0 && (
+										<>
+											{" "}
+											{pausedSystemsLength}{" "}
+											<PauseIcon className="inline h-3 w-3 text-gray-400" />
+										</>
+									)}
+									/ {data.length})
+								</span>
+							</CardDescription>
+						</div>
+						<Button variant="outline" onClick={() => setAddSystemDialogOpen(true)} className="shrink-0">
+							<PlusIcon className="mr-2 h-4 w-4" />
+							<Trans>Add System</Trans>
+						</Button>
 					</div>
 
-					<div className="flex gap-2 ms-auto w-full md:w-80">
+					{/* Filter row */}
+					<div className="flex flex-col sm:flex-row gap-2">
 						<div className="relative flex-1">
 							<Input
 								placeholder={t`Filter...`}
@@ -173,116 +203,61 @@ export default function SystemsTable() {
 									<Trans>View</Trans>
 								</Button>
 							</DropdownMenuTrigger>
-							<DropdownMenuContent align="end" className="h-72 md:h-auto min-w-48 md:min-w-auto overflow-y-auto">
-								<div className="grid grid-cols-1 md:grid-cols-4 divide-y md:divide-s md:divide-y-0">
-									<div className="border-r">
-										<DropdownMenuLabel className="pt-2 px-3.5 flex items-center gap-2">
-											<LayoutGridIcon className="size-4" />
-											<Trans>Layout</Trans>
-										</DropdownMenuLabel>
-										<DropdownMenuSeparator />
-										<DropdownMenuRadioGroup
-											className="px-1 pb-1"
-											value={viewMode}
-											onValueChange={(view) => setViewMode(view as ViewMode)}
-										>
-											<DropdownMenuRadioItem value="table" onSelect={(e) => e.preventDefault()} className="gap-2">
-												<LayoutListIcon className="size-4" />
-												<Trans>Table</Trans>
-											</DropdownMenuRadioItem>
-											<DropdownMenuRadioItem value="grid" onSelect={(e) => e.preventDefault()} className="gap-2">
-												<LayoutGridIcon className="size-4" />
-												<Trans>Grid</Trans>
-											</DropdownMenuRadioItem>
-										</DropdownMenuRadioGroup>
-									</div>
+							<DropdownMenuContent align="end" className="min-w-48">
+								{/* Layout */}
+								<DropdownMenuLabel className="flex items-center gap-2">
+									<LayoutGridIcon className="size-4" />
+									<Trans>Layout</Trans>
+								</DropdownMenuLabel>
+								<DropdownMenuRadioGroup value={viewMode} onValueChange={(view) => setViewMode(view as ViewMode)}>
+									<DropdownMenuRadioItem value="table" className="gap-2">
+										<LayoutListIcon className="size-4" />
+										<Trans>Table</Trans>
+									</DropdownMenuRadioItem>
+									<DropdownMenuRadioItem value="grid" className="gap-2">
+										<LayoutGridIcon className="size-4" />
+										<Trans>Grid</Trans>
+									</DropdownMenuRadioItem>
+								</DropdownMenuRadioGroup>
+								<DropdownMenuSeparator />
 
-									<div className="border-r">
-										<DropdownMenuLabel className="pt-2 px-3.5 flex items-center gap-2">
-											<FilterIcon className="size-4" />
-											<Trans>Status</Trans>
-										</DropdownMenuLabel>
-										<DropdownMenuSeparator />
-										<DropdownMenuRadioGroup
-											className="px-1 pb-1"
-											value={statusFilter}
-											onValueChange={(value) => setStatusFilter(value as StatusFilter)}
-										>
-											<DropdownMenuRadioItem value="all" onSelect={(e) => e.preventDefault()}>
-												<Trans>All Systems</Trans>
-											</DropdownMenuRadioItem>
-											<DropdownMenuRadioItem value="up" onSelect={(e) => e.preventDefault()}>
-												<Trans>Up ({upSystemsLength})</Trans>
-											</DropdownMenuRadioItem>
-											<DropdownMenuRadioItem value="down" onSelect={(e) => e.preventDefault()}>
-												<Trans>Down ({downSystemsLength})</Trans>
-											</DropdownMenuRadioItem>
-											<DropdownMenuRadioItem value="paused" onSelect={(e) => e.preventDefault()}>
-												<Trans>Paused ({pausedSystemsLength})</Trans>
-											</DropdownMenuRadioItem>
-										</DropdownMenuRadioGroup>
-									</div>
+								{/* Status */}
+								<DropdownMenuLabel className="flex items-center gap-2">
+									<FilterIcon className="size-4" />
+									<Trans>Status</Trans>
+								</DropdownMenuLabel>
+								<DropdownMenuRadioGroup value={statusFilter} onValueChange={(value) => setStatusFilter(value as StatusFilter)}>
+									<DropdownMenuRadioItem value="all">
+										<Trans>All ({data.length})</Trans>
+									</DropdownMenuRadioItem>
+									<DropdownMenuRadioItem value="up">
+										<Trans>Up ({upSystemsLength})</Trans>
+									</DropdownMenuRadioItem>
+									<DropdownMenuRadioItem value="down">
+										<Trans>Down ({downSystemsLength})</Trans>
+									</DropdownMenuRadioItem>
+									<DropdownMenuRadioItem value="paused">
+										<Trans>Paused ({pausedSystemsLength})</Trans>
+									</DropdownMenuRadioItem>
+								</DropdownMenuRadioGroup>
+								<DropdownMenuSeparator />
 
-									<div className="border-r">
-										<DropdownMenuLabel className="pt-2 px-3.5 flex items-center gap-2">
-											<ArrowUpDownIcon className="size-4" />
-											<Trans>Sort By</Trans>
-										</DropdownMenuLabel>
-										<DropdownMenuSeparator />
-										<div className="px-1 pb-1">
-											{columns.map((column) => {
-												if (!column.getCanSort()) return null
-												let Icon = <span className="w-6"></span>
-												// if current sort column, show sort direction
-												if (sorting[0]?.id === column.id) {
-													if (sorting[0]?.desc) {
-														Icon = <ArrowUpIcon className="me-2 size-4" />
-													} else {
-														Icon = <ArrowDownIcon className="me-2 size-4" />
-													}
-												}
-												return (
-													<DropdownMenuItem
-														onSelect={(e) => {
-															e.preventDefault()
-															setSorting([{ id: column.id, desc: sorting[0]?.id === column.id && !sorting[0]?.desc }])
-														}}
-														key={column.id}
-													>
-														{Icon}
-														{/* @ts-ignore */}
-														{column.columnDef.name()}
-													</DropdownMenuItem>
-												)
-											})}
-										</div>
-									</div>
-
-									<div>
-										<DropdownMenuLabel className="pt-2 px-3.5 flex items-center gap-2">
-											<EyeIcon className="size-4" />
-											<Trans>Visible Fields</Trans>
-										</DropdownMenuLabel>
-										<DropdownMenuSeparator />
-										<div className="px-1.5 pb-1">
-											{columns
-												.filter((column) => column.getCanHide())
-												.map((column) => {
-													return (
-														<DropdownMenuCheckboxItem
-															key={column.id}
-															onSelect={(e) => e.preventDefault()}
-															checked={column.getIsVisible()}
-															onCheckedChange={(value) => column.toggleVisibility(!!value)}
-														>
-															{/* @ts-ignore */}
-															{column.columnDef.name()}
-														</DropdownMenuCheckboxItem>
-													)
-												})}
-										</div>
-									</div>
-								</div>
+								{/* Columns */}
+								<DropdownMenuLabel className="flex items-center gap-2">
+									<EyeIcon className="size-4" />
+									<Trans>Columns</Trans>
+								</DropdownMenuLabel>
+								{columns.map((column) => (
+									<DropdownMenuCheckboxItem
+										key={column.id}
+										checked={column.getIsVisible()}
+										onCheckedChange={(value) => column.toggleVisibility(!!value)}
+										onSelect={(e) => e.preventDefault()}
+										className="gap-2"
+									>
+										{column.columnDef.header?.toString() ?? column.id}
+									</DropdownMenuCheckboxItem>
+								))}
 							</DropdownMenuContent>
 						</DropdownMenu>
 					</div>
@@ -298,32 +273,37 @@ export default function SystemsTable() {
 		upSystemsLength,
 		downSystemsLength,
 		pausedSystemsLength,
+		data.length,
 		filter,
+		setAddSystemDialogOpen,
 	])
 
 	return (
-		<Card className="w-full px-3 py-5 sm:py-6 sm:px-6">
-			{CardHead}
-			{viewMode === "table" ? (
-				// table layout
-				<div className="rounded-md">
-					<AllSystemsTable table={table} rows={rows} colLength={visibleColumns.length} />
-				</div>
-			) : (
-				// grid layout
-				<div className="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
-					{rows?.length ? (
-						rows.map((row) => {
-							return <SystemCard key={row.original.id} row={row} table={table} colLength={visibleColumns.length} />
-						})
-					) : (
-						<div className="col-span-full text-center py-8">
-							<Trans>No systems found.</Trans>
-						</div>
-					)}
-				</div>
-			)}
-		</Card>
+		<>
+			<Card className="w-full px-3 py-5 sm:py-6 sm:px-6">
+				{CardHead}
+				{viewMode === "table" ? (
+					// table layout
+					<div className="rounded-md">
+						<AllSystemsTable table={table} rows={rows} colLength={visibleColumns.length} />
+					</div>
+				) : (
+					// grid layout
+					<div className="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
+						{rows?.length ? (
+							rows.map((row) => {
+								return <SystemCard key={row.original.id} row={row} table={table} colLength={visibleColumns.length} />
+							})
+						) : (
+							<div className="col-span-full text-center py-8">
+								<Trans>No systems found.</Trans>
+							</div>
+						)}
+					</div>
+				)}
+			</Card>
+			<AddSystemDialog open={addSystemDialogOpen} setOpen={setAddSystemDialogOpen} />
+		</>
 	)
 }
 

internal/site/src/components/ui/select.tsx

@@ -13,9 +13,10 @@ const SelectValue = SelectPrimitive.Value
 const SelectTrigger = React.forwardRef<
 	React.ElementRef<typeof SelectPrimitive.Trigger>,
 	React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
+>(({ className, children, tabIndex = 0, ...props }, ref) => (
 	<SelectPrimitive.Trigger
 		ref={ref}
+		tabIndex={tabIndex}
 		className={cn(
 			"flex h-10 w-full items-center justify-between rounded-md border bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
 			className