style: fix Prettier formatting in documentation content

Add three new documentation articles to the user guide:
- Docker monitors: Setup and configuration for container monitoring
- Bulk import monitors: CSV import guide for creating multiple monitors
- Account settings: Profile, password, and account management

Updates article counts in collections accordingly.

CLAUDE.md

@@ -0,0 +1,145 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+Checkmate is an open-source uptime and infrastructure monitoring application. It monitors server hardware, uptime, response times, and incidents with real-time alerts. The companion agent [Capture](https://github.com/bluewave-labs/capture) provides infrastructure metrics (CPU, RAM, disk, temperature).
+
+## Development Commands
+
+### Client (React/Vite)
+```bash
+cd client
+npm install
+npm run dev              # Start dev server at http://localhost:5173
+npm run build            # TypeScript check + production build
+npm run lint             # ESLint (strict, max-warnings 0)
+npm run format           # Prettier formatting
+npm run format-check     # Check formatting
+```
+
+### Server (Node.js/Express)
+```bash
+cd server
+npm install
+npm run dev              # Start with hot-reload (nodemon + tsx) at http://localhost:52345
+npm run build            # TypeScript compile + path alias resolution
+npm run test             # Run Mocha tests with c8 coverage
+npm run lint             # ESLint v9
+npm run lint-fix         # Auto-fix lint issues
+npm run format           # Prettier formatting
+```
+
+### Docker Development
+```bash
+cd docker/dev
+./build_images.sh
+docker run -d -p 27017:27017 -v uptime_mongo_data:/data/db --name uptime_database_mongo mongo:6.0
+```
+
+## Environment Setup
+
+### Server `.env` (minimum required)
+```env
+CLIENT_HOST="http://localhost:5173"
+JWT_SECRET="my_secret_key_change_this"
+DB_CONNECTION_STRING="mongodb://localhost:27017/uptime_db"
+TOKEN_TTL="99d"
+ORIGIN="localhost"
+LOG_LEVEL="debug"
+```
+
+### Client `.env`
+```env
+VITE_APP_API_BASE_URL="http://localhost:52345/api/v1"
+VITE_APP_LOG_LEVEL="debug"
+```
+
+## Architecture
+
+### Monorepo Structure
+- `/client` - React 18 + TypeScript + Vite + MUI frontend
+- `/server` - Node.js 20+ + Express + TypeScript backend
+- `/docker` - Multi-environment Docker configs (dev, staging, prod, arm, mono)
+
+### Backend Layers
+```
+server/src/
+├── controllers/     # Route handlers (authController, monitorController, etc.)
+├── service/         # Business logic
+│   ├── business/    # Core monitoring logic
+│   ├── infrastructure/  # Server/system utilities
+│   └── system/      # App-level settings
+├── db/
+│   ├── models/      # Mongoose schemas (Monitor, Check, Incident, User, etc.)
+│   ├── migration/   # Database migrations (run on startup)
+│   └── modules/     # Database-specific modules
+├── middleware/v1/   # verifyJWT, rateLimiter, sanitization, responseHandler
+├── routes/v1/       # API route definitions
+├── validation/      # Joi input validation schemas
+└── repositories/    # Data access layer
+```
+
+### Frontend Structure
+```
+client/src/
+├── Components/      # Reusable UI components
+├── Pages/           # Page components (Auth, Uptime, Infrastructure, Incidents, etc.)
+├── Features/        # Redux slices (Auth, UI)
+├── Hooks/           # Custom React hooks
+├── Utils/           # Utilities (NetworkService.js is main API client)
+├── Validation/      # Input validation
+└── locales/         # i18n translations
+```
+
+### API
+- Base URL: `/api/v1`
+- Documentation: `http://localhost:52345/api-docs` (Swagger UI)
+- OpenAPI spec: `/server/openapi.json`
+
+### Key Technologies
+- **State Management**: Redux Toolkit + Redux-Persist
+- **Data Fetching**: SWR + Axios
+- **Database**: MongoDB with Mongoose ODM
+- **Queue/Cache**: Redis + BullMQ + Pulse (cron scheduling)
+- **i18n**: i18next + react-i18next (translations via PoEditor)
+
+## Code Conventions
+
+### Internationalization
+All user-facing strings must use the translation function:
+```javascript
+t('your.key')  // Never hardcode UI strings
+```
+
+### Branching
+- Always branch from `develop` (not master)
+- Use descriptive names: `feat/add-alerts`, `fix/login-error`
+- PRs target `develop` branch
+
+### Formatting
+- **Client**: Prettier with `printWidth: 90`, tabs, double quotes
+- **Server**: Prettier with `printWidth: 150`, tabs, double quotes
+- Both use ESLint with strict settings
+
+### Testing
+Server tests use Mocha + Chai + Sinon:
+```bash
+npm test                    # Run all tests with coverage
+npm test -- --grep "pattern"  # Run specific tests
+```
+Test files: `server/tests/**/*.test.js`
+
+## Database Models
+
+Key Mongoose models in `/server/src/db/models/`:
+- **Monitor** - Monitoring configuration (website, infrastructure, port, etc.)
+- **Check** - Individual monitoring check results
+- **Incident** - Downtime incidents
+- **User** - User accounts
+- **Team** - Team/workspace management
+- **StatusPage** - Public status pages
+- **Notification** - Alert configuration (email, Discord, Slack, webhooks)
+- **MaintenanceWindow** - Scheduled maintenance periods
+- **AppSettings** - Global application settings

client/package-lock.json

@@ -12,7 +12,6 @@
 				"@emotion/styled": "^11.13.0",
 				"@hello-pangea/dnd": "^18.0.0",
 				"@hookform/resolvers": "5.2.2",
-				"@mui/icons-material": "6.4.11",
 				"@mui/lab": "6.0.0-dev.240424162023-9968b4889d",
 				"@mui/material": "6.4.11",
 				"@mui/x-charts": "^7.5.1",
@@ -25,6 +24,7 @@
 				"human-interval": "2.0.1",
 				"i18next": "25.4.2",
 				"joi": "17.13.3",
+				"lucide-react": "^0.562.0",
 				"mui-color-input": "^6.0.0",
 				"pretty-ms": "9.3.0",
 				"react": "18.3.1",
@@ -1189,32 +1189,6 @@
 				"url": "https://opencollective.com/mui-org"
 			}
 		},
-		"node_modules/@mui/icons-material": {
-			"version": "6.4.11",
-			"resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-6.4.11.tgz",
-			"integrity": "sha512-+jjJGIrB1awNbMv4ZVPPdN/p7O1UKFZ+xqRvNIQ8B1KnlID5hPMPBLM6UUbRF4bu3UDCbu79rn9Nye5LGNzmeA==",
-			"license": "MIT",
-			"dependencies": {
-				"@babel/runtime": "^7.26.0"
-			},
-			"engines": {
-				"node": ">=14.0.0"
-			},
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/mui-org"
-			},
-			"peerDependencies": {
-				"@mui/material": "^6.4.11",
-				"@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-				"react": "^17.0.0 || ^18.0.0 || ^19.0.0"
-			},
-			"peerDependenciesMeta": {
-				"@types/react": {
-					"optional": true
-				}
-			}
-		},
 		"node_modules/@mui/lab": {
 			"version": "6.0.0-dev.240424162023-9968b4889d",
 			"resolved": "https://registry.npmjs.org/@mui/lab/-/lab-6.0.0-dev.240424162023-9968b4889d.tgz",
@@ -2050,9 +2024,9 @@
 			}
 		},
 		"node_modules/@remix-run/router": {
-			"version": "1.23.0",
-			"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.23.0.tgz",
-			"integrity": "sha512-O3rHJzAQKamUz1fvE0Qaw0xSFqsA/yafi2iqeE0pvdFtCO1viYx8QL6f3Ln/aCCTLxs68SLf0KPM9eSeM8yBnA==",
+			"version": "1.23.2",
+			"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.23.2.tgz",
+			"integrity": "sha512-Ic6m2U/rMjTkhERIa/0ZtXJP17QUi2CbWE7cqx4J58M8aA3QTfW+2UlQ4psvTX9IO1RfNVhK3pcpdjej7L+t2w==",
 			"license": "MIT",
 			"engines": {
 				"node": ">=14.0.0"
@@ -5297,9 +5271,9 @@
 			"license": "MIT"
 		},
 		"node_modules/js-yaml": {
-			"version": "4.1.0",
-			"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
-			"integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+			"version": "4.1.1",
+			"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz",
+			"integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==",
 			"license": "MIT",
 			"dependencies": {
 				"argparse": "^2.0.1"
@@ -5464,6 +5438,15 @@
 				"yallist": "^3.0.2"
 			}
 		},
+		"node_modules/lucide-react": {
+			"version": "0.562.0",
+			"resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.562.0.tgz",
+			"integrity": "sha512-82hOAu7y0dbVuFfmO4bYF1XEwYk/mEbM5E+b1jgci/udUBEE/R7LF5Ip0CCEmXe8AybRM8L+04eP+LGZeDvkiw==",
+			"license": "ISC",
+			"peerDependencies": {
+				"react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+			}
+		},
 		"node_modules/math-intrinsics": {
 			"version": "1.1.0",
 			"resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -6129,12 +6112,12 @@
 			}
 		},
 		"node_modules/react-router": {
-			"version": "6.30.1",
-			"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.30.1.tgz",
-			"integrity": "sha512-X1m21aEmxGXqENEPG3T6u0Th7g0aS4ZmoNynhbs+Cn+q+QGTLt+d5IQ2bHAXKzKcxGJjxACpVbnYQSCRcfxHlQ==",
+			"version": "6.30.3",
+			"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.30.3.tgz",
+			"integrity": "sha512-XRnlbKMTmktBkjCLE8/XcZFlnHvr2Ltdr1eJX4idL55/9BbORzyZEaIkBFDhFGCEWBBItsVrDxwx3gnisMitdw==",
 			"license": "MIT",
 			"dependencies": {
-				"@remix-run/router": "1.23.0"
+				"@remix-run/router": "1.23.2"
 			},
 			"engines": {
 				"node": ">=14.0.0"
@@ -6144,13 +6127,13 @@
 			}
 		},
 		"node_modules/react-router-dom": {
-			"version": "6.30.1",
-			"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.30.1.tgz",
-			"integrity": "sha512-llKsgOkZdbPU1Eg3zK8lCn+sjD9wMRZZPuzmdWWX5SUs8OFkN5HnFVC0u5KMeMaC9aoancFI/KoLuKPqN+hxHw==",
+			"version": "6.30.3",
+			"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.30.3.tgz",
+			"integrity": "sha512-pxPcv1AczD4vso7G4Z3TKcvlxK7g7TNt3/FNGMhfqyntocvYKj+GCatfigGDjbLozC4baguJ0ReCigoDJXb0ag==",
 			"license": "MIT",
 			"dependencies": {
-				"@remix-run/router": "1.23.0",
-				"react-router": "6.30.1"
+				"@remix-run/router": "1.23.2",
+				"react-router": "6.30.3"
 			},
 			"engines": {
 				"node": ">=14.0.0"

client/package.json

@@ -17,7 +17,6 @@
 		"@emotion/styled": "^11.13.0",
 		"@hello-pangea/dnd": "^18.0.0",
 		"@hookform/resolvers": "5.2.2",
-		"@mui/icons-material": "6.4.11",
 		"@mui/lab": "6.0.0-dev.240424162023-9968b4889d",
 		"@mui/material": "6.4.11",
 		"@mui/x-charts": "^7.5.1",
@@ -30,6 +29,7 @@
 		"human-interval": "2.0.1",
 		"i18next": "25.4.2",
 		"joi": "17.13.3",
+		"lucide-react": "^0.562.0",
 		"mui-color-input": "^6.0.0",
 		"pretty-ms": "9.3.0",
 		"react": "18.3.1",

client/src/App.jsx

@@ -10,6 +10,7 @@ import { logger } from "./Utils/Logger"; // Import the logger
 import { networkService } from "./main";
 import { Routes } from "./Routes";
 import AppLayout from "@/Components/v1/Layouts/AppLayout";
+import { UserGuideSidebarProvider } from "@/Components/v1/UserGuide";
 
 function App() {
 	const mode = useSelector((state) => state.ui.mode);
@@ -25,9 +26,11 @@ function App() {
 	return (
 		<ThemeProvider theme={mode === "light" ? lightTheme : darkTheme}>
 			<CssBaseline />
-			<AppLayout>
-				<Routes />
-			</AppLayout>
+			<UserGuideSidebarProvider>
+				<AppLayout>
+					<Routes />
+				</AppLayout>
+			</UserGuideSidebarProvider>
 			<ToastContainer />
 		</ThemeProvider>
 	);

client/src/Components/v1/ActionsMenu/index.jsx

@@ -2,7 +2,7 @@
 import IconButton from "@mui/material/IconButton";
 import Menu from "@mui/material/Menu";
 import MenuItem from "@mui/material/MenuItem";
-import Settings from "../../../assets/icons/settings-bold.svg?react";
+import Icon from "../Icon";
 import Dialog from "../Dialog/index.jsx";
 
 // Utils
@@ -84,7 +84,10 @@ const ActionsMenu = ({
 					},
 				}}
 			>
-				<Settings />
+				<Icon
+					name="Settings"
+					size={20}
+				/>
 			</IconButton>
 
 			<Menu

client/src/Components/v1/Alert/index.jsx

@@ -1,10 +1,7 @@
 import PropTypes from "prop-types";
 import { useTheme } from "@emotion/react";
 import { Box, Button, IconButton, Stack, Typography } from "@mui/material";
-import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
-import ErrorOutlineOutlinedIcon from "@mui/icons-material/ErrorOutlineOutlined";
-import WarningAmberOutlinedIcon from "@mui/icons-material/WarningAmberOutlined";
-import CloseIcon from "@mui/icons-material/Close";
+import Icon from "../Icon";
 import "./index.css";
 
 /**
@@ -13,9 +10,24 @@ import "./index.css";
  */
 
 const icons = {
-	info: <InfoOutlinedIcon />,
-	error: <ErrorOutlineOutlinedIcon />,
-	warning: <WarningAmberOutlinedIcon />,
+	info: (
+		<Icon
+			name="Info"
+			size={24}
+		/>
+	),
+	error: (
+		<Icon
+			name="AlertCircle"
+			size={24}
+		/>
+	),
+	warning: (
+		<Icon
+			name="AlertTriangle"
+			size={24}
+		/>
+	),
 };
 
 /**
@@ -97,10 +109,9 @@ const Alert = ({ variant, title, body, isToast, hasIcon = true, onClick }) => {
 						},
 					}}
 				>
-					<CloseIcon
-						sx={{
-							fontSize: "20px",
-						}}
+					<Icon
+						name="X"
+						size={20}
 					/>
 				</IconButton>
 			)}

client/src/Components/v1/ArrowLeft/index.jsx

@@ -1,27 +1,28 @@
-import LeftArrow from "../../../assets/icons/left-arrow.svg?react";
-import LeftArrowDouble from "../../../assets/icons/left-arrow-double.svg?react";
-import LeftArrowLong from "../../../assets/icons/left-arrow-long.svg?react";
+import Icon from "../Icon";
 import PropTypes from "prop-types";
 
 const ArrowLeft = ({ type, color = "#667085", ...props }) => {
 	if (type === "double") {
 		return (
-			<LeftArrowDouble
-				style={{ color }}
+			<Icon
+				name="ChevronsLeft"
+				color={color}
 				{...props}
 			/>
 		);
 	} else if (type === "long") {
 		return (
-			<LeftArrowLong
-				style={{ color }}
+			<Icon
+				name="ArrowLeft"
+				color={color}
 				{...props}
 			/>
 		);
 	} else {
 		return (
-			<LeftArrow
-				style={{ color }}
+			<Icon
+				name="ChevronLeft"
+				color={color}
 				{...props}
 			/>
 		);

client/src/Components/v1/ArrowRight/index.jsx

@@ -1,19 +1,20 @@
-import RightArrow from "../../../assets/icons/right-arrow.svg?react";
-import RightArrowDouble from "../../../assets/icons/right-arrow-double.svg?react";
+import Icon from "../Icon";
 import PropTypes from "prop-types";
 
 const ArrowRight = ({ type, color = "#667085", ...props }) => {
 	if (type === "double") {
 		return (
-			<RightArrowDouble
-				style={{ color }}
+			<Icon
+				name="ChevronsRight"
+				color={color}
 				{...props}
 			/>
 		);
 	} else {
 		return (
-			<RightArrow
-				style={{ color }}
+			<Icon
+				name="ChevronRight"
+				color={color}
 				{...props}
 			/>
 		);

client/src/Components/v1/Check/Check.jsx

@@ -1,7 +1,6 @@
 import "./check.css";
 import PropTypes from "prop-types";
-import CheckGrey from "../../../assets/icons/check.svg?react";
-import CheckOutlined from "../../../assets/icons/check-outlined.svg?react";
+import Icon from "../Icon";
 import { Box, Stack, Typography } from "@mui/material";
 import { useTheme } from "@emotion/react";
 
@@ -35,16 +34,16 @@ const Check = ({ text, noHighlightText, variant = "info", outlined = false }) =>
 			alignItems="center"
 		>
 			{outlined ? (
-				<CheckOutlined alt="check" />
+				<Icon
+					name="CheckCircle"
+					size={20}
+				/>
 			) : (
-				<Box
-					lineHeight={0}
-					sx={{
-						"& svg > path": { fill: colors[variant] },
-					}}
-				>
-					<CheckGrey alt="form checks" />
-				</Box>
+				<Icon
+					name="Check"
+					size={16}
+					color={colors[variant]}
+				/>
 			)}
 			<Typography
 				component="span"

client/src/Components/v1/Common/AppBar.jsx

@@ -8,8 +8,7 @@ import IconButton from "@mui/material/IconButton";
 import Container from "@mui/material/Container";
 import MenuItem from "@mui/material/MenuItem";
 import Drawer from "@mui/material/Drawer";
-import MenuIcon from "@mui/icons-material/Menu";
-import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
+import Icon from "../Icon";
 import ThemeSwitch from "../ThemeSwitch/index.jsx";
 import { useTheme } from "@mui/material/styles";
 import { useSelector } from "react-redux";
@@ -153,7 +152,11 @@ const AppAppBar = () => {
 							aria-label="Menu button"
 							onClick={toggleDrawer(true)}
 						>
-							<MenuIcon sx={{ color: theme.palette.text.primary }} />
+							<Icon
+								name="Menu"
+								size={24}
+								color={theme.palette.text.primary}
+							/>
 						</IconButton>
 						<Drawer
 							anchor="top"
@@ -176,7 +179,11 @@ const AppAppBar = () => {
 									}}
 								>
 									<IconButton onClick={toggleDrawer(false)}>
-										<CloseRoundedIcon sx={{ color: theme.palette.text.primary }} />
+										<Icon
+											name="X"
+											size={24}
+											color={theme.palette.text.primary}
+										/>
 									</IconButton>
 								</Box>
 

client/src/Components/v1/FilterHeader/index.jsx

@@ -1,7 +1,7 @@
 import { Checkbox, FormControl, ListItemText, MenuItem, Select } from "@mui/material";
 import { useTheme } from "@emotion/react";
 import PropTypes from "prop-types";
-import AddCircleOutlineIcon from "@mui/icons-material/AddCircleOutline";
+import Icon from "../Icon";
 
 /**
  * A reusable filter header component that displays a dropdown menu with selectable options.
@@ -29,9 +29,10 @@ const FilterHeader = ({ header, options, value, onChange, multiple = true }) =>
 			<Select
 				multiple={multiple}
 				IconComponent={(props) => (
-					<AddCircleOutlineIcon
+					<Icon
 						{...props}
-						sx={{ fontSize: "medium" }}
+						name="PlusCircle"
+						size={18}
 					/>
 				)}
 				displayEmpty

client/src/Components/v1/Host/index.jsx

@@ -23,12 +23,12 @@ const Host = ({ url, title, percentageColor, percentage, showURL, status }) => {
 				direction="row"
 				position="relative"
 				alignItems="center"
-				gap={theme.spacing(5)}
+				gap={theme.spacing(4)}
 			>
 				<Typography
-					variant="h6"
+					component="span"
 					sx={{
-						fontWeight: 600,
+						fontWeight: 500,
 					}}
 				>
 					{title}
@@ -38,9 +38,9 @@ const Host = ({ url, title, percentageColor, percentage, showURL, status }) => {
 					<>
 						<Dot />
 						<Typography
-							variant="h6"
+							component="span"
 							sx={{
-								fontWeight: 600,
+								fontWeight: 500,
 								color: percentageColor,
 							}}
 						>

client/src/Components/v1/Icon/iconMap.js

@@ -0,0 +1,120 @@
+/**
+ * Maps legacy icon names to Lucide icon names
+ * Use: import { iconMap } from './iconMap'; LucideIcons[iconMap['monitors']]
+ */
+export const iconMap = {
+	// Navigation/Sidebar icons
+	monitors: "Globe",
+	incidents: "AlertTriangle",
+	integrations: "Link",
+	"page-speed": "Gauge",
+	settings: "Settings",
+	notifications: "Bell",
+	maintenance: "Wrench",
+	"status-pages": "Wifi",
+	docs: "FileText",
+	discussions: "MessageCircle",
+	support: "HelpCircle",
+	changeLog: "Code",
+	logs: "Database",
+
+	// User icons
+	user: "User",
+	"user-two": "Users",
+	"user-edit": "UserPen",
+	groups: "Users",
+	lock: "Lock",
+	key: "Key",
+	logout: "LogOut",
+
+	// Action icons
+	edit: "Pencil",
+	"trash-bin": "Trash2",
+	search: "Search",
+	"close-icon": "X",
+	check: "Check",
+	"check-icon": "CheckCircle",
+	"check-outlined": "CheckCircle",
+
+	// Arrow icons
+	"left-arrow": "ChevronLeft",
+	"right-arrow": "ChevronRight",
+	"up-arrow": "ChevronUp",
+	"down-arrow": "ChevronDown",
+	"left-arrow-double": "ChevronsLeft",
+	"right-arrow-double": "ChevronsRight",
+	"left-arrow-long": "ArrowLeft",
+	"top-right-arrow": "ArrowUpRight",
+	"open-in-new-page": "ExternalLink",
+	"selector-vertical": "ChevronsUpDown",
+
+	// Status/Alert icons
+	"alert-icon": "Bell",
+	"warning-icon": "AlertCircle",
+	"history-icon": "History",
+
+	// Data/Chart icons
+	dashboard: "LayoutGrid",
+	"monitor-graph-line": "TrendingUp",
+	"response-time-icon": "TrendingUp",
+	"uptime-icon": "Activity",
+	"speedometer-icon": "Gauge",
+	"spedometer-icon": "Gauge",
+	"ruler-icon": "Ruler",
+	"performance-report": "Layers",
+	"average-response-icon": "BarChart3",
+	"distributed-uptime": "Network",
+
+	// Misc icons
+	calendar: "Calendar",
+	"calendar-check": "CalendarCheck",
+	"clock-snooze": "Clock",
+	mail: "Mail",
+	email: "Mail",
+	folder: "Folder",
+	"dots-vertical": "MoreVertical",
+	"pause-icon": "PauseCircle",
+	"resume-icon": "PlayCircle",
+	"checkbox-filled": "CheckSquare",
+	"checkbox-outline": "Square",
+	"radio-checked": "Circle",
+	"cpu-chip": "Cpu",
+	certificate: "Award",
+	"interval-check": "RefreshCw",
+};
+
+/**
+ * MUI icon to Lucide mapping
+ */
+export const muiToLucideMap = {
+	AddCircleOutline: "PlusCircle",
+	ArrowDownwardRounded: "ArrowDown",
+	ArrowUpwardRounded: "ArrowUp",
+	ArrowDropDown: "ChevronDown",
+	ArrowOutward: "ExternalLink",
+	CheckCircle: "CheckCircle2",
+	Clear: "X",
+	Close: "X",
+	CloseRounded: "X",
+	CloudUpload: "Upload",
+	Delete: "Trash2",
+	DeleteOutlineRounded: "Trash2",
+	Email: "Mail",
+	ErrorOutline: "AlertTriangle",
+	ErrorOutlineOutlined: "AlertTriangle",
+	Image: "ImageIcon",
+	InfoOutlined: "Info",
+	KeyboardArrowDown: "ChevronDown",
+	Menu: "Menu",
+	PauseCircleOutline: "PauseCircle",
+	PauseOutlined: "Pause",
+	PlayArrowOutlined: "Play",
+	PlayCircleOutlineRounded: "PlayCircle",
+	RadioButtonChecked: "Circle",
+	ReorderRounded: "GripVertical",
+	SettingsOutlined: "Settings",
+	Share: "Share2",
+	Visibility: "Eye",
+	VisibilityOff: "EyeOff",
+	WarningAmberOutlined: "AlertTriangle",
+};

client/src/Components/v1/Icon/index.jsx

@@ -0,0 +1,196 @@
+import { useTheme } from "@mui/material";
+import PropTypes from "prop-types";
+import {
+	Activity,
+	AlertCircle,
+	AlertTriangle,
+	ArrowDown,
+	ArrowLeft,
+	ArrowUp,
+	ArrowUpRight,
+	Bell,
+	Calendar,
+	Check,
+	CheckCircle,
+	CheckSquare,
+	ChevronDown,
+	ChevronLeft,
+	ChevronRight,
+	ChevronsLeft,
+	ChevronsRight,
+	ChevronsUpDown,
+	Circle,
+	CircleDot,
+	Clock,
+	Code,
+	Cpu,
+	Database,
+	ExternalLink,
+	Eye,
+	EyeOff,
+	FileText,
+	Gauge,
+	Globe,
+	GripVertical,
+	HelpCircle,
+	History,
+	Image as ImageIcon,
+	Info,
+	Key,
+	Layers,
+	Link,
+	Lock,
+	LogOut,
+	Mail,
+	Menu,
+	MessageCircle,
+	MoreVertical,
+	Pause,
+	PauseCircle,
+	Play,
+	PlayCircle,
+	PlusCircle,
+	RefreshCw,
+	Ruler,
+	Search,
+	Settings,
+	Square,
+	Trash2,
+	TrendingUp,
+	Upload,
+	User,
+	Users,
+	Wifi,
+	Wrench,
+	X,
+} from "lucide-react";
+
+/**
+ * Map of icon names to Lucide icon components.
+ * Only icons explicitly imported here will be included in the bundle (tree-shaking).
+ * To add a new icon: import it above and add it to this object.
+ */
+const iconComponents = {
+	Activity,
+	AlertCircle,
+	AlertTriangle,
+	ArrowDown,
+	ArrowLeft,
+	ArrowUp,
+	ArrowUpRight,
+	Bell,
+	Calendar,
+	Check,
+	CheckCircle,
+	CheckSquare,
+	ChevronDown,
+	ChevronLeft,
+	ChevronRight,
+	ChevronsLeft,
+	ChevronsRight,
+	ChevronsUpDown,
+	Circle,
+	CircleDot,
+	Clock,
+	Code,
+	Cpu,
+	Database,
+	ExternalLink,
+	Eye,
+	EyeOff,
+	FileText,
+	Gauge,
+	Globe,
+	GripVertical,
+	HelpCircle,
+	History,
+	Image: ImageIcon,
+	Info,
+	Key,
+	Layers,
+	Link,
+	Lock,
+	LogOut,
+	Mail,
+	Menu,
+	MessageCircle,
+	MoreVertical,
+	Pause,
+	PauseCircle,
+	Play,
+	PlayCircle,
+	PlusCircle,
+	RefreshCw,
+	Ruler,
+	Search,
+	Settings,
+	Square,
+	Trash2,
+	TrendingUp,
+	Upload,
+	User,
+	Users,
+	Wifi,
+	Wrench,
+	X,
+};
+
+/**
+ * Theme-aware icon component wrapping Lucide icons
+ *
+ * @param {string} name - Lucide icon name (e.g., "Bell", "Check", "ArrowLeft")
+ * @param {number} size - Icon size in pixels (default: 20)
+ * @param {string} color - Direct color value OR theme path like "primary.contrastText"
+ * @param {number} strokeWidth - Stroke width (default: 1.5)
+ * @param {string} fill - Fill color (default: "none")
+ */
+const Icon = ({ name, size = 20, color, strokeWidth = 1.5, fill = "none", ...props }) => {
+	const theme = useTheme();
+
+	// Resolve color from theme path or use direct value
+	const resolveColor = (colorValue) => {
+		if (!colorValue) {
+			return theme.palette.primary.contrastTextTertiary; // Default icon color
+		}
+
+		// If it's a theme path like "primary.contrastText"
+		if (typeof colorValue === "string" && colorValue.includes(".")) {
+			const parts = colorValue.split(".");
+			let resolved = theme.palette;
+			for (const part of parts) {
+				resolved = resolved?.[part];
+			}
+			return resolved || colorValue;
+		}
+
+		// Direct color value
+		return colorValue;
+	};
+
+	const LucideIcon = iconComponents[name];
+
+	if (!LucideIcon) {
+		console.warn(`Icon "${name}" not found in Icon component`);
+		return null;
+	}
+
+	return (
+		<LucideIcon
+			size={size}
+			color={resolveColor(color)}
+			strokeWidth={strokeWidth}
+			fill={fill}
+			{...props}
+		/>
+	);
+};
+
+Icon.propTypes = {
+	name: PropTypes.string.isRequired,
+	size: PropTypes.number,
+	color: PropTypes.string,
+	strokeWidth: PropTypes.number,
+	fill: PropTypes.string,
+};
+
+export default Icon;

client/src/Components/v1/Inputs/Checkbox/index.jsx

@@ -1,8 +1,7 @@
 import PropTypes from "prop-types";
 import { FormControlLabel, Checkbox as MuiCheckbox } from "@mui/material";
 import { useTheme } from "@emotion/react";
-import CheckboxOutline from "../../../../assets/icons/checkbox-outline.svg?react";
-import CheckboxFilled from "../../../../assets/icons/checkbox-filled.svg?react";
+import Icon from "../../Icon";
 
 /**
  * Checkbox Component
@@ -65,8 +64,8 @@ const Checkbox = ({
 					name={name}
 					value={value}
 					onChange={onChange}
-					icon={<CheckboxOutline />}
-					checkedIcon={<CheckboxFilled />}
+					icon={<Icon name="Square" />}
+					checkedIcon={<Icon name="CheckSquare" />}
 					inputProps={{
 						"aria-label": "controlled checkbox",
 						id: id,

client/src/Components/v1/Inputs/ImageUpload/index.jsx

@@ -1,11 +1,10 @@
 // Components
 import { Box, Stack, Typography } from "@mui/material";
-import CloudUploadIcon from "@mui/icons-material/CloudUpload";
+import Icon from "../../Icon";
 import Image from "../../Image/index.jsx";
 import TextField from "@mui/material/TextField";
 import IconButton from "@mui/material/IconButton";
 import ProgressUpload from "../../ProgressBars/index.jsx";
-import ImageIcon from "@mui/icons-material/Image";
 
 // Utils
 import PropTypes from "prop-types";
@@ -176,7 +175,10 @@ const ImageUpload = ({
 									boxShadow: theme.shape.boxShadow,
 								}}
 							>
-								<CloudUploadIcon />
+								<Icon
+									name="Upload"
+									size={24}
+								/>
 							</IconButton>
 							<Typography
 								component="h2"
@@ -203,7 +205,12 @@ const ImageUpload = ({
 					</Box>
 					{(localError || progress.isLoading || progress.value !== 0) && (
 						<ProgressUpload
-							icon={<ImageIcon />}
+							icon={
+								<Icon
+									name="Image"
+									size={20}
+								/>
+							}
 							label={file?.name || "Upload failed"}
 							size={file?.size}
 							progress={progress.value}

client/src/Components/v1/Inputs/Radio/index.jsx

@@ -1,7 +1,7 @@
 import PropTypes from "prop-types";
 import { FormControlLabel, Radio as MUIRadio, Typography } from "@mui/material";
 import { useTheme } from "@emotion/react";
-import RadioChecked from "../../../../assets/icons/radio-checked.svg?react";
+import Icon from "../../Icon";
 import "./index.css";
 
 /**
@@ -47,7 +47,12 @@ const Radio = ({
 				<MUIRadio
 					id={id}
 					size={size}
-					checkedIcon={<RadioChecked />}
+					checkedIcon={
+						<Icon
+							name="CircleDot"
+							size={16}
+						/>
+					}
 					sx={{
 						color: "transparent",
 						width: 16,

client/src/Components/v1/Inputs/Search/index.jsx

@@ -8,7 +8,7 @@ import {
 	Checkbox,
 } from "@mui/material";
 import { useTheme } from "@emotion/react";
-import SearchIcon from "../../../../assets/icons/search.svg?react";
+import Icon from "../../Icon";
 import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import FieldWrapper from "../FieldWrapper/index.jsx";
@@ -31,20 +31,13 @@ import FieldWrapper from "../FieldWrapper/index.jsx";
 const SearchAdornment = () => {
 	const theme = useTheme();
 	return (
-		<Box
-			height={16}
-			sx={{
-				"& svg": {
-					width: 16,
-					height: 16,
-					"& path": {
-						stroke: theme.palette.primary.contrastTextTertiary,
-						strokeWidth: 1.2,
-					},
-				},
-			}}
-		>
-			<SearchIcon />
+		<Box height={16}>
+			<Icon
+				name="Search"
+				size={16}
+				color="primary.contrastTextTertiary"
+				strokeWidth={1.2}
+			/>
 		</Box>
 	);
 };

client/src/Components/v1/Inputs/Select/index.jsx

@@ -1,7 +1,7 @@
 import PropTypes from "prop-types";
 import { useTheme } from "@emotion/react";
 import { MenuItem, Select as MuiSelect, Stack, Typography } from "@mui/material";
-import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
+import Icon from "../../Icon";
 import FieldWrapper from "../FieldWrapper/index.jsx";
 
 import "./index.css";
@@ -98,7 +98,13 @@ const Select = ({
 				error={error}
 				name={name}
 				inputProps={{ id: id }}
-				IconComponent={KeyboardArrowDownIcon}
+				IconComponent={(props) => (
+					<Icon
+						name="ChevronDown"
+						size={20}
+						{...props}
+					/>
+				)}
 				MenuProps={{ disableScrollLock: true }}
 				sx={{
 					fontSize: 13,

client/src/Components/v1/Inputs/TextInput/Adornments/index.jsx

@@ -1,10 +1,7 @@
 import { Stack, Typography, InputAdornment, IconButton } from "@mui/material";
 import { useTheme } from "@mui/material/styles";
 import PropTypes from "prop-types";
-import VisibilityOff from "@mui/icons-material/VisibilityOff";
-import Visibility from "@mui/icons-material/Visibility";
-import ReorderRoundedIcon from "@mui/icons-material/ReorderRounded";
-import DeleteIcon from "../../../../../assets/icons/trash-bin.svg?react";
+import Icon from "../../../Icon";
 
 export const HttpAdornment = ({ https }) => {
 	const theme = useTheme();
@@ -56,7 +53,17 @@ export const PasswordEndAdornment = ({ fieldType, setFieldType }) => {
 					},
 				}}
 			>
-				{fieldType === "password" ? <VisibilityOff /> : <Visibility />}
+				{fieldType === "password" ? (
+					<Icon
+						name="EyeOff"
+						size={20}
+					/>
+				) : (
+					<Icon
+						name="Eye"
+						size={20}
+					/>
+				)}
 			</IconButton>
 		</InputAdornment>
 	);

client/src/Components/v1/Layouts/HomeLayout/index.css

@@ -1,33 +0,0 @@
-.home-layout {
-	position: relative;
-	min-height: 100vh;
-	margin: 0 auto;
-	padding: 0;
-}
-
-/* TODO go for this approach for responsiveness. The aside needs to be taken care of */
-/* @media (max-width: 1000px) {
-	.home-layout {
-		flex-direction: column !important;
-	}
-} */
-
-/* .home-layout aside {
-	position: sticky;
-	top: 0;
-	left: 0;
-	height: 100vh;
-	max-width: var(--env-var-side-bar-width);
-} */
-
-.home-layout > div {
-	min-height: calc(100vh - var(--env-var-spacing-2) * 2);
-	flex: 1;
-}
-
-.home-content-wrapper {
-	padding: var(--env-var-spacing-2);
-	max-width: 1400px;
-	margin: 0 auto;
-	flex: 1;
-}

client/src/Components/v1/Layouts/HomeLayout/index.jsx

@@ -1,20 +1,44 @@
 import Sidebar from "../../Sidebar/index.jsx";
 import { Outlet } from "react-router";
 import { Stack } from "@mui/material";
-
-import "./index.css";
+import { useTheme } from "@mui/material/styles";
+import { UserGuideSidebar, TAB_BAR_WIDTH } from "../../UserGuide";
 
 const HomeLayout = () => {
+	const theme = useTheme();
+
 	return (
 		<Stack
-			className="home-layout"
 			flexDirection="row"
 			gap={14}
+			sx={{
+				position: "relative",
+				minHeight: "100vh",
+				margin: "0 auto",
+				padding: 0,
+				overflowX: "hidden",
+				width: "100%",
+				"& > div": {
+					minHeight: `calc(100vh - ${theme.spacing(4)} * 2)`,
+					flex: 1,
+				},
+			}}
 		>
 			<Sidebar />
-			<Stack className="home-content-wrapper">
+			<Stack
+				sx={{
+					padding: theme.spacing(4),
+					paddingRight: `${TAB_BAR_WIDTH + 16}px`,
+					maxWidth: 1400,
+					margin: "0 auto",
+					flex: 1,
+					minWidth: 0,
+					overflowX: "hidden",
+				}}
+			>
 				<Outlet />
 			</Stack>
+			<UserGuideSidebar />
 		</Stack>
 	);
 };

client/src/Components/v1/MonitorActions/index.jsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import Button from "@mui/material/Button";
 import ButtonGroup from "@mui/material/ButtonGroup";
-import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
+import Icon from "../Icon";
 import ClickAwayListener from "@mui/material/ClickAwayListener";
 import Grow from "@mui/material/Grow";
 import Paper from "@mui/material/Paper";
@@ -70,7 +70,10 @@ const MonitorActions = ({ isLoading }) => {
 					aria-haspopup="menu"
 					onClick={handleToggle}
 				>
-					<ArrowDropDownIcon />
+					<Icon
+						name="ChevronDown"
+						size={20}
+					/>
 				</Button>
 			</ButtonGroup>
 			<Popper

client/src/Components/v1/MonitorDetailsControlHeader/index.jsx

@@ -3,10 +3,7 @@ import Status from "./status.jsx";
 import Skeleton from "./skeleton.jsx";
 import Button from "@mui/material/Button";
 import { Tooltip } from "@mui/material";
-import SettingsOutlinedIcon from "@mui/icons-material/SettingsOutlined";
-import PauseOutlinedIcon from "@mui/icons-material/PauseOutlined";
-import PlayArrowOutlinedIcon from "@mui/icons-material/PlayArrowOutlined";
-import EmailIcon from "@mui/icons-material/Email";
+import Icon from "../Icon";
 
 // Utils
 import PropTypes from "prop-types";
@@ -75,7 +72,12 @@ const MonitorDetailsControlHeader = ({
 							variant="contained"
 							color="secondary"
 							loading={isSending}
-							startIcon={<EmailIcon />}
+							startIcon={
+								<Icon
+									name="Mail"
+									size={18}
+								/>
+							}
 							disabled={isTestNotificationsDisabled}
 							onClick={() => {
 								testAllNotifications({ monitorId: monitor?.id });
@@ -103,7 +105,17 @@ const MonitorDetailsControlHeader = ({
 						color="secondary"
 						loading={isPausing}
 						startIcon={
-							monitor?.isActive ? <PauseOutlinedIcon /> : <PlayArrowOutlinedIcon />
+							monitor?.isActive ? (
+								<Icon
+									name="Pause"
+									size={18}
+								/>
+							) : (
+								<Icon
+									name="Play"
+									size={18}
+								/>
+							)
 						}
 						onClick={() => {
 							pauseMonitor({
@@ -119,7 +131,12 @@ const MonitorDetailsControlHeader = ({
 					<Button
 						variant="contained"
 						color="secondary"
-						startIcon={<SettingsOutlinedIcon />}
+						startIcon={
+							<Icon
+								name="Settings"
+								size={18}
+							/>
+						}
 						onClick={() => navigate(`/${path}/configure/${monitor.id}`)}
 					>
 						Configure

client/src/Components/v1/NotificationConfig/index.jsx

@@ -2,7 +2,7 @@
 import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
 import Divider from "@mui/material/Divider";
-import DeleteOutlineRoundedIcon from "@mui/icons-material/DeleteOutlineRounded";
+import Icon from "../Icon";
 import Search from "../Inputs/Search/index.jsx";
 
 // Utils
@@ -102,11 +102,13 @@ const NotificationConfig = ({
 						>
 							{notification.notificationName}
 						</Typography>
-						<DeleteOutlineRoundedIcon
+						<Icon
+							name="Trash2"
+							size={20}
 							onClick={() => {
 								handleDelete(notification._id);
 							}}
-							sx={{ cursor: "pointer" }}
+							style={{ cursor: "pointer" }}
 						/>
 						{index < selectedNotifications.length - 1 && <Divider />}
 					</Stack>

client/src/Components/v1/ProgressBars/index.jsx

@@ -1,8 +1,7 @@
 import { useTheme } from "@emotion/react";
 import PropTypes from "prop-types";
 import { Box, IconButton, LinearProgress, Stack, Typography } from "@mui/material";
-import CloseIcon from "@mui/icons-material/Close";
-import ErrorOutlineOutlinedIcon from "@mui/icons-material/ErrorOutlineOutlined";
+import Icon from "../Icon";
 import "./index.css";
 
 /**
@@ -51,7 +50,10 @@ const ProgressUpload = ({ icon, label, size, progress = 0, onClick, error }) =>
 				alignItems={error ? "center" : "flex-start"}
 			>
 				{error ? (
-					<ErrorOutlineOutlinedIcon />
+					<Icon
+						name="AlertTriangle"
+						size={20}
+					/>
 				) : icon ? (
 					<Box
 						sx={{
@@ -127,10 +129,9 @@ const ProgressUpload = ({ icon, label, size, progress = 0, onClick, error }) =>
 								}
 					}
 				>
-					<CloseIcon
-						sx={{
-							fontSize: "20px",
-						}}
+					<Icon
+						name="X"
+						size={20}
 					/>
 				</IconButton>
 			</Stack>

client/src/Components/v1/ProgressStepper/index.jsx

@@ -1,15 +1,22 @@
 import React from "react";
 import { Step, Stepper, StepLabel, Typography } from "@mui/material";
-import RadioButtonCheckedIcon from "@mui/icons-material/RadioButtonChecked";
-import CheckCircle from "@mui/icons-material/CheckCircle";
+import Icon from "../Icon";
 import PropTypes from "prop-types";
 
 const CustomStepIcon = (props) => {
 	const { completed, active } = props;
 	return completed ? (
-		<CheckCircle color="accent" />
+		<Icon
+			name="CheckCircle2"
+			size={24}
+			color="accent.main"
+		/>
 	) : (
-		<RadioButtonCheckedIcon color={active ? "accent" : "disabled"} />
+		<Icon
+			name="Circle"
+			size={24}
+			color={active ? "accent.main" : "text.disabled"}
+		/>
 	);
 };
 

client/src/Components/v1/ShareComponent/index.jsx

@@ -1,5 +1,5 @@
 import html2canvas from "html2canvas";
-import ShareIcon from "@mui/icons-material/Share";
+import Icon from "../Icon";
 import { Button } from "@mui/material";
 import { useTheme } from "@emotion/react";
 
@@ -55,7 +55,13 @@ const ShareComponent = ({ elementToCapture, fileName = "screenshot" }) => {
 	return (
 		<Button
 			variant="outlined"
-			startIcon={<ShareIcon sx={{ color: theme.palette.success.main }} />}
+			startIcon={
+				<Icon
+					name="Share2"
+					size={18}
+					color="success.main"
+				/>
+			}
 			color="success"
 			onClick={captureAndShare}
 		>

client/src/Components/v1/Sidebar/components/authFooter.jsx

@@ -7,8 +7,7 @@ import Avatar from "../../Avatar/index.jsx";
 import Menu from "@mui/material/Menu";
 import MenuItem from "@mui/material/MenuItem";
 import Divider from "@mui/material/Divider";
-import DotsVertical from "../../../../assets/icons/dots-vertical.svg?react";
-import LogoutSvg from "../../../../assets/icons/logout.svg?react";
+import Icon from "../../Icon";
 
 import { useTheme } from "@emotion/react";
 import { useSelector } from "react-redux";
@@ -81,6 +80,10 @@ const AuthFooter = ({ collapsed, accountMenuItems }) => {
 					gap: theme.spacing(2),
 					borderRadius: theme.shape.borderRadius,
 					pl: theme.spacing(4),
+					color: theme.palette.primary.contrastTextTertiary,
+					"& svg": {
+						stroke: theme.palette.primary.contrastTextTertiary,
+					},
 				}}
 			>
 				{item.icon}
@@ -160,19 +163,14 @@ const AuthFooter = ({ collapsed, accountMenuItems }) => {
 							ml: "50px",
 							"&:focus": { outline: "none" },
 							alignSelf: "center",
-
-							"& svg": {
-								width: "22px",
-								height: "22px",
-							},
-							"& svg path": {
-								/* Vertical three dots */
-								stroke: theme.palette.primary.contrastTextTertiary,
-							},
 						}}
 						onClick={(event) => openPopup(event)}
 					>
-						<DotsVertical />
+						<Icon
+							name="MoreVertical"
+							size={22}
+							color="primary.contrastTextTertiary"
+						/>
 					</IconButton>
 				</Tooltip>
 			</Stack>
@@ -256,12 +254,13 @@ const AuthFooter = ({ collapsed, accountMenuItems }) => {
 						gap: theme.spacing(4),
 						borderRadius: theme.shape.borderRadius,
 						pl: theme.spacing(4),
-						"& svg path": {
-							stroke: theme.palette.primary.contrastTextTertiary,
-						},
 					}}
 				>
-					<LogoutSvg />
+					<Icon
+						name="LogOut"
+						size={20}
+						color="primary.contrastTextTertiary"
+					/>
 					{t("menu.logOut", "Log out")}
 				</MenuItem>
 			</Menu>

client/src/Components/v1/Sidebar/components/navItem.jsx

@@ -52,12 +52,11 @@ const NavItem = ({ item, collapsed, selected, onClick }) => {
 				<ListItemIcon
 					sx={{
 						minWidth: 0,
+						color: iconStroke,
 						"& svg": {
 							height: 20,
 							width: 20,
 							opacity: 0.81,
-						},
-						"& svg path": {
 							stroke: iconStroke,
 						},
 					}}

client/src/Components/v1/Sidebar/index.jsx

@@ -8,22 +8,7 @@ import NavItem from "./components/navItem.jsx";
 import AuthFooter from "./components/authFooter.jsx";
 
 import StarPrompt from "../StarPrompt/index.jsx";
-import LockSvg from "../../../assets/icons/lock.svg?react";
-import UserSvg from "../../../assets/icons/user.svg?react";
-import TeamSvg from "../../../assets/icons/user-two.svg?react";
-import Support from "../../../assets/icons/support.svg?react";
-import Maintenance from "../../../assets/icons/maintenance.svg?react";
-import Monitors from "../../../assets/icons/monitors.svg?react";
-import Incidents from "../../../assets/icons/incidents.svg?react";
-import Integrations from "../../../assets/icons/integrations.svg?react";
-import PageSpeed from "../../../assets/icons/page-speed.svg?react";
-import Settings from "../../../assets/icons/settings.svg?react";
-import ChangeLog from "../../../assets/icons/changeLog.svg?react";
-import Docs from "../../../assets/icons/docs.svg?react";
-import StatusPages from "../../../assets/icons/status-pages.svg?react";
-import Discussions from "../../../assets/icons/discussions.svg?react";
-import Notifications from "../../../assets/icons/notifications.svg?react";
-import Logs from "../../../assets/icons/logs.svg?react";
+import Icon from "../Icon";
 
 // Utils
 import { useTheme } from "@mui/material/styles";
@@ -39,44 +24,41 @@ const URL_MAP = {
 };
 
 const getMenu = (t) => [
-	{ name: t("menu.uptime"), path: "uptime", icon: <Monitors /> },
-	{ name: t("menu.pagespeed"), path: "pagespeed", icon: <PageSpeed /> },
-
-	{ name: t("menu.infrastructure"), path: "infrastructure", icon: <Integrations /> },
+	{ name: t("menu.uptime"), path: "uptime", icon: <Icon name="Globe" /> },
+	{ name: t("menu.pagespeed"), path: "pagespeed", icon: <Icon name="Gauge" /> },
+	{ name: t("menu.infrastructure"), path: "infrastructure", icon: <Icon name="Link" /> },
 	{
 		name: t("menu.notifications"),
 		path: "notifications",
-		icon: <Notifications />,
+		icon: <Icon name="Bell" />,
 	},
-	{ name: t("menu.checks"), path: "checks", icon: <Docs /> },
-	{ name: t("menu.incidents"), path: "incidents", icon: <Incidents /> },
-
-	{ name: t("menu.statusPages"), path: "status", icon: <StatusPages /> },
-	{ name: t("menu.maintenance"), path: "maintenance", icon: <Maintenance /> },
-	{ name: t("menu.logs"), path: "logs", icon: <Logs /> },
-
+	{ name: t("menu.checks"), path: "checks", icon: <Icon name="FileText" /> },
+	{ name: t("menu.incidents"), path: "incidents", icon: <Icon name="AlertTriangle" /> },
+	{ name: t("menu.statusPages"), path: "status", icon: <Icon name="Wifi" /> },
+	{ name: t("menu.maintenance"), path: "maintenance", icon: <Icon name="Wrench" /> },
+	{ name: t("menu.logs"), path: "logs", icon: <Icon name="Database" /> },
 	{
 		name: t("menu.settings"),
-		icon: <Settings />,
+		icon: <Icon name="Settings" />,
 		path: "settings",
 	},
 ];
 
 const getOtherMenuItems = (t) => [
-	{ name: t("menu.support"), path: "support", icon: <Support /> },
+	{ name: t("menu.support"), path: "support", icon: <Icon name="HelpCircle" /> },
 	{
 		name: t("menu.discussions"),
 		path: "discussions",
-		icon: <Discussions />,
+		icon: <Icon name="MessageCircle" />,
 	},
-	{ name: t("menu.docs"), path: "docs", icon: <Docs /> },
-	{ name: t("menu.changelog"), path: "changelog", icon: <ChangeLog /> },
+	{ name: t("menu.docs"), path: "docs", icon: <Icon name="FileText" /> },
+	{ name: t("menu.changelog"), path: "changelog", icon: <Icon name="Code" /> },
 ];
 
 const getAccountMenuItems = (t) => [
-	{ name: t("menu.profile"), path: "account/profile", icon: <UserSvg /> },
-	{ name: t("menu.password"), path: "account/password", icon: <LockSvg /> },
-	{ name: t("menu.team"), path: "account/team", icon: <TeamSvg /> },
+	{ name: t("menu.profile"), path: "account/profile", icon: <Icon name="User" /> },
+	{ name: t("menu.password"), path: "account/password", icon: <Icon name="Lock" /> },
+	{ name: t("menu.team"), path: "account/team", icon: <Icon name="Users" /> },
 ];
 
 const Sidebar = () => {
@@ -107,6 +89,8 @@ const Sidebar = () => {
 			gap={theme.spacing(6)}
 			sx={{
 				transition: "width 650ms cubic-bezier(0.36, -0.01, 0, 0.77)",
+				backgroundColor: theme.palette.primaryBackground.main,
+				zIndex: 1000,
 			}}
 		>
 			<CollapseButton collapsed={collapsed} />

client/src/Components/v1/StarPrompt/index.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Typography, IconButton, Stack, Box } from "@mui/material";
-import CloseIcon from "@mui/icons-material/Close";
+import Icon from "../Icon";
 import { useTheme } from "@emotion/react";
 import { useSelector, useDispatch } from "react-redux";
 import { useTranslation } from "react-i18next";
@@ -67,7 +67,10 @@ const StarPrompt = ({ repoUrl = "https://github.com/bluewave-labs/checkmate" })
 						},
 					}}
 				>
-					<CloseIcon sx={{ fontSize: "1.25rem" }} />
+					<Icon
+						name="X"
+						size={20}
+					/>
 				</IconButton>
 			</Stack>
 

client/src/Components/v1/Table/TablePagination/index.jsx

@@ -2,7 +2,7 @@ import PropTypes from "prop-types";
 import { useTheme } from "@emotion/react";
 import { Stack, TablePagination, Typography } from "@mui/material";
 import { TablePaginationActions } from "./Actions/index.jsx";
-import SelectorVertical from "../../../../assets/icons/selector-vertical.svg?react";
+import Icon from "../../Icon";
 
 Pagination.propTypes = {
 	paginationLabel: PropTypes.string, // Label for the pagination.
@@ -100,7 +100,12 @@ function Pagination({
 							},
 						},
 						inputProps: { id: "pagination-dropdown" },
-						IconComponent: SelectorVertical,
+						IconComponent: () => (
+							<Icon
+								name="ChevronsUpDown"
+								size={16}
+							/>
+						),
 						sx: {
 							ml: theme.spacing(4),
 							mr: theme.spacing(12),

client/src/Components/v1/Toast/index.jsx

@@ -3,19 +3,31 @@ import IconButton from "@mui/material/IconButton";
 import Typography from "@mui/material/Typography";
 import Button from "@mui/material/Button";
 import ToastBody from "./body.jsx";
-import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
-import ErrorOutlineOutlinedIcon from "@mui/icons-material/ErrorOutlineOutlined";
-import WarningAmberOutlinedIcon from "@mui/icons-material/WarningAmberOutlined";
-import CloseIcon from "@mui/icons-material/Close";
+import Icon from "../Icon";
 
 // Utils
 import { useTheme } from "@emotion/react";
 import PropTypes from "prop-types";
 
 const icons = {
-	info: <InfoOutlinedIcon />,
-	error: <ErrorOutlineOutlinedIcon />,
-	warning: <WarningAmberOutlinedIcon />,
+	info: (
+		<Icon
+			name="Info"
+			size={24}
+		/>
+	),
+	error: (
+		<Icon
+			name="AlertCircle"
+			size={24}
+		/>
+	),
+	warning: (
+		<Icon
+			name="AlertTriangle"
+			size={24}
+		/>
+	),
 };
 
 const Toast = ({ variant, title, body, onClick, hasDismiss, hasIcon }) => {
@@ -50,7 +62,10 @@ const Toast = ({ variant, title, body, onClick, hasDismiss, hasIcon }) => {
 				)}
 				{title && (
 					<IconButton onClick={onClick}>
-						<CloseIcon />
+						<Icon
+							name="X"
+							size={20}
+						/>
 					</IconButton>
 				)}
 			</Stack>
@@ -63,7 +78,10 @@ const Toast = ({ variant, title, body, onClick, hasDismiss, hasIcon }) => {
 				<ToastBody body={body} />
 				{!title && (
 					<IconButton onClick={onClick}>
-						<CloseIcon />
+						<Icon
+							name="X"
+							size={20}
+						/>
 					</IconButton>
 				)}
 			</Stack>

client/src/Components/v1/UserGuide/ArticlePage.css

@@ -0,0 +1,157 @@
+/* ArticlePage styles - hover states and nested selectors (Dark theme) */
+
+/* Breadcrumb hover */
+.user-guide-breadcrumb-link {
+	transition: color 150ms ease;
+}
+
+.user-guide-breadcrumb-link:hover {
+	color: #1570ef;
+}
+
+/* ToC link hover */
+.user-guide-toc-link {
+	transition: all 150ms ease;
+}
+
+.user-guide-toc-link:hover {
+	color: #1570ef;
+	text-decoration: underline !important;
+}
+
+/* Navigation button hover */
+.user-guide-nav-button .nav-text {
+	transition: color 150ms ease;
+}
+
+.user-guide-nav-button:hover .nav-text {
+	color: #1570ef;
+}
+
+/* Article body typography */
+.user-guide-article-body h2 {
+	font-size: 18px;
+	font-weight: 600;
+	color: #ffffff;
+	margin-top: 32px;
+	margin-bottom: 16px;
+	line-height: 1.4;
+}
+
+.user-guide-article-body h3 {
+	font-size: 14px;
+	font-weight: 600;
+	color: #ffffff;
+	margin-top: 24px;
+	margin-bottom: 12px;
+	line-height: 1.4;
+}
+
+.user-guide-article-body p {
+	font-size: 13px;
+	color: #d0d5dd;
+	line-height: 1.5;
+	margin-bottom: 16px;
+	margin-top: 0;
+}
+
+.user-guide-article-body ul,
+.user-guide-article-body ol {
+	padding-left: 24px;
+	margin-bottom: 16px;
+	margin-top: 0;
+}
+
+.user-guide-article-body li {
+	font-size: 13px;
+	color: #d0d5dd;
+	line-height: 1.5;
+	margin-bottom: 8px;
+}
+
+.user-guide-article-body a {
+	color: #1570ef;
+	text-decoration: none;
+	font-weight: 500;
+}
+
+.user-guide-article-body a:hover {
+	text-decoration: underline;
+}
+
+.user-guide-article-body code {
+	background-color: #2d2d2d;
+	padding: 2px 6px;
+	border-radius: 4px;
+	font-size: 10px;
+	font-family: "Geist Mono", "Fira Code", "Consolas", monospace;
+	color: #d0d5dd;
+}
+
+.user-guide-article-body pre {
+	background-color: #1c2130;
+	border-radius: 4px;
+	padding: 16px;
+	overflow: auto;
+	margin-bottom: 16px;
+	margin-top: 0;
+}
+
+.user-guide-article-body pre code {
+	background-color: transparent;
+	padding: 0;
+	color: #e5e7eb;
+}
+
+.user-guide-article-body blockquote {
+	border-left: 3px solid #1570ef;
+	background-color: rgba(255, 255, 255, 0.05);
+	padding: 12px 16px;
+	border-radius: 0 4px 4px 0;
+	margin-bottom: 16px;
+	margin-top: 0;
+	margin-left: 0;
+	margin-right: 0;
+}
+
+.user-guide-article-body blockquote p {
+	margin-bottom: 0;
+	color: #d0d5dd;
+}
+
+.user-guide-article-body table {
+	width: 100%;
+	border-collapse: collapse;
+	margin-bottom: 16px;
+}
+
+.user-guide-article-body th,
+.user-guide-article-body td {
+	border: 1px solid #344054;
+	padding: 12px;
+	text-align: left;
+	font-size: 10px;
+}
+
+.user-guide-article-body th {
+	background-color: rgba(255, 255, 255, 0.05);
+	font-weight: 600;
+	color: #ffffff;
+}
+
+.user-guide-article-body td {
+	color: #d0d5dd;
+}
+
+.user-guide-article-body img {
+	max-width: 100%;
+	border-radius: 4px;
+	border: 1px solid #344054;
+	margin-bottom: 16px;
+}
+
+.user-guide-article-body hr {
+	border: none;
+	border-top: 1px solid #344054;
+	margin: 32px 0;
+}

client/src/Components/v1/UserGuide/ArticlePage.jsx

@@ -0,0 +1,333 @@
+import { useState, useEffect } from "react";
+import {
+	ChevronLeft,
+	ChevronRight,
+	Rocket,
+	Globe,
+	Gauge,
+	Link,
+	Bell,
+	AlertTriangle,
+	Settings,
+	FileText,
+} from "lucide-react";
+import { useUserGuideTheme } from "./styles/useUserGuideTheme";
+import "./ArticlePage.css";
+
+// Map icon names to actual Lucide components
+const iconMap = {
+	Rocket,
+	Globe,
+	Gauge,
+	Link,
+	Bell,
+	AlertTriangle,
+	Settings,
+	FileText,
+};
+
+const ArticlePage = ({
+	collection,
+	article,
+	onBack,
+	onBackToHome,
+	onNextArticle,
+	onPrevArticle,
+	nextArticle,
+	prevArticle,
+	tocItems,
+	children,
+	mode = "in-app",
+}) => {
+	const { colors, typography, spacing, border, isDark } = useUserGuideTheme();
+	const IconComponent = iconMap[collection.icon] || Rocket;
+	const isInApp = mode === "in-app";
+	const [activeSection, setActiveSection] = useState("");
+
+	// Track active section on scroll
+	useEffect(() => {
+		if (!tocItems || tocItems.length === 0) return;
+
+		const handleScroll = () => {
+			const sections = tocItems
+				.map((item) => {
+					const id = item.href.replace("#", "");
+					const element = document.getElementById(id);
+					return { id: item.href, element };
+				})
+				.filter((s) => s.element);
+
+			if (sections.length === 0) return;
+
+			let currentSection = sections[0].id;
+
+			for (const section of sections) {
+				if (section.element) {
+					const rect = section.element.getBoundingClientRect();
+					if (rect.top <= 150) {
+						currentSection = section.id;
+					}
+				}
+			}
+
+			setActiveSection(currentSection);
+		};
+
+		window.addEventListener("scroll", handleScroll, { passive: true });
+		document.addEventListener("scroll", handleScroll, { passive: true, capture: true });
+		handleScroll();
+
+		return () => {
+			window.removeEventListener("scroll", handleScroll);
+			document.removeEventListener("scroll", handleScroll, { capture: true });
+		};
+	}, [tocItems]);
+
+	return (
+		<div style={{ minHeight: "100%", backgroundColor: colors.background.alt }}>
+			{/* Main content area */}
+			<div
+				style={{
+					maxWidth: isInApp ? "100%" : 1100,
+					margin: "0 auto",
+					padding: isInApp ? spacing.lg : spacing["3xl"],
+				}}
+			>
+				{/* Article Content */}
+				<div style={{ maxWidth: isInApp ? "100%" : 680, minWidth: 0 }}>
+					{/* Title */}
+					<h1
+						style={{
+							fontFamily: typography.fontFamily.sans,
+							fontSize: typography.fontSize["3xl"],
+							fontWeight: typography.fontWeight.semibold,
+							color: colors.text.primary,
+							marginBottom: spacing.lg,
+							lineHeight: typography.lineHeight.snug,
+							marginTop: 0,
+						}}
+					>
+						{article.title}
+					</h1>
+
+					{/* Description */}
+					<p
+						style={{
+							fontFamily: typography.fontFamily.sans,
+							fontSize: typography.fontSize.md,
+							color: colors.text.secondary,
+							marginBottom: spacing.lg,
+							lineHeight: typography.lineHeight.normal,
+							marginTop: 0,
+						}}
+					>
+						{article.description}
+					</p>
+
+					{/* Table of Contents - at top */}
+					{tocItems && tocItems.length > 0 && (
+						<div
+							style={{
+								marginBottom: spacing["2xl"],
+								paddingBottom: isInApp ? 0 : spacing.lg,
+								borderBottom: isInApp ? "none" : border.default,
+							}}
+						>
+							<div
+								style={{
+									backgroundColor: isInApp
+										? isDark
+											? "rgba(255, 255, 255, 0.05)"
+											: "rgba(0, 0, 0, 0.02)"
+										: "transparent",
+									borderRadius: isInApp ? border.radius : 0,
+									padding: isInApp ? spacing.md : 0,
+									border: isInApp ? border.default : "none",
+								}}
+							>
+								<span
+									style={{
+										display: "block",
+										fontSize: 12,
+										fontWeight: typography.fontWeight.semibold,
+										color: colors.text.secondary,
+										marginBottom: spacing.sm,
+										textTransform: "uppercase",
+										letterSpacing: "0.5px",
+									}}
+								>
+									In this article
+								</span>
+								<div
+									style={{
+										display: "flex",
+										flexDirection: isInApp ? "column" : "row",
+										flexWrap: isInApp ? "nowrap" : "wrap",
+										gap: isInApp ? 0 : spacing.xs,
+										columnGap: isInApp ? 0 : spacing.lg,
+									}}
+								>
+									{tocItems.map((item) => {
+										const isActive = activeSection === item.href;
+										return (
+											<a
+												key={item.href}
+												href={item.href}
+												className="user-guide-toc-link"
+												onClick={(e) => {
+													if (isInApp) {
+														e.preventDefault();
+														const id = item.href.replace("#", "");
+														const element = document.getElementById(id);
+														if (element) {
+															element.scrollIntoView({
+																behavior: "smooth",
+																block: "start",
+															});
+														}
+													}
+												}}
+												style={{
+													fontFamily: typography.fontFamily.sans,
+													fontSize: isInApp ? 13 : 12,
+													color: isActive ? colors.brand.primary : colors.text.secondary,
+													fontWeight: isActive
+														? typography.fontWeight.medium
+														: typography.fontWeight.normal,
+													textDecoration: "none",
+													padding: isInApp ? "2px 0" : `${spacing.xs} 0`,
+												}}
+											>
+												{item.label}
+											</a>
+										);
+									})}
+								</div>
+							</div>
+						</div>
+					)}
+
+					{/* Article Body */}
+					<div className="user-guide-article-body">
+						{children || (
+							<div
+								style={{
+									backgroundColor: colors.background.white,
+									border: border.default,
+									borderRadius: border.radius,
+									padding: spacing.xl,
+									textAlign: "center",
+								}}
+							>
+								<span
+									style={{ fontSize: typography.fontSize.sm, color: colors.text.muted }}
+								>
+									Article content coming soon.
+								</span>
+							</div>
+						)}
+					</div>
+
+					{/* Navigation */}
+					{(prevArticle || nextArticle) && (
+						<div
+							style={{
+								display: "flex",
+								justifyContent: "space-between",
+								marginTop: spacing["2xl"],
+								paddingTop: spacing.xl,
+								borderTop: border.default,
+							}}
+						>
+							{prevArticle ? (
+								<div
+									onClick={onPrevArticle}
+									className="user-guide-nav-button"
+									style={{
+										display: "flex",
+										alignItems: "center",
+										gap: spacing.sm,
+										cursor: "pointer",
+									}}
+								>
+									<ChevronLeft
+										size={16}
+										strokeWidth={1.5}
+										color={colors.text.muted}
+									/>
+									<div>
+										<span
+											style={{
+												display: "block",
+												fontSize: typography.fontSize.xs,
+												color: colors.text.muted,
+											}}
+										>
+											Previous
+										</span>
+										<span
+											className="nav-text"
+											style={{
+												display: "block",
+												fontSize: typography.fontSize.sm,
+												color: colors.text.primary,
+												fontWeight: typography.fontWeight.medium,
+											}}
+										>
+											{prevArticle.title}
+										</span>
+									</div>
+								</div>
+							) : (
+								<div />
+							)}
+							{nextArticle && (
+								<div
+									onClick={onNextArticle}
+									className="user-guide-nav-button"
+									style={{
+										display: "flex",
+										alignItems: "center",
+										gap: spacing.sm,
+										textAlign: "right",
+										cursor: "pointer",
+									}}
+								>
+									<div>
+										<span
+											style={{
+												display: "block",
+												fontSize: typography.fontSize.xs,
+												color: colors.text.muted,
+											}}
+										>
+											Next
+										</span>
+										<span
+											className="nav-text"
+											style={{
+												display: "block",
+												fontSize: typography.fontSize.sm,
+												color: colors.text.primary,
+												fontWeight: typography.fontWeight.medium,
+											}}
+										>
+											{nextArticle.title}
+										</span>
+									</div>
+									<ChevronRight
+										size={16}
+										strokeWidth={1.5}
+										color={colors.text.muted}
+									/>
+								</div>
+							)}
+						</div>
+					)}
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export default ArticlePage;

client/src/Components/v1/UserGuide/CollectionPage.css

@@ -0,0 +1,31 @@
+/* CollectionPage styles - hover states */
+
+/* Back link hover */
+.user-guide-back-link {
+	transition: color 150ms ease;
+}
+
+.user-guide-back-link:hover {
+	color: #1570ef;
+}
+
+/* Article row hover */
+.user-guide-article-row {
+	transition: all 150ms ease;
+}
+
+.user-guide-article-row:hover {
+	background-color: rgba(0, 0, 0, 0.04);
+}
+
+[data-mui-color-scheme="dark"] .user-guide-article-row:hover {
+	background-color: rgba(255, 255, 255, 0.05);
+}
+
+.user-guide-article-row .arrow-icon {
+	transition: all 150ms ease;
+}
+
+.user-guide-article-row:hover .arrow-icon {
+	color: #1570ef;
+}

client/src/Components/v1/UserGuide/CollectionPage.jsx

@@ -0,0 +1,171 @@
+import {
+	ArrowRight,
+	FileText,
+	Rocket,
+	Globe,
+	Gauge,
+	Link,
+	Bell,
+	AlertTriangle,
+	Settings,
+} from "lucide-react";
+import { useUserGuideTheme } from "./styles/useUserGuideTheme";
+import "./CollectionPage.css";
+
+// Map icon names to actual Lucide components
+const iconMap = {
+	Rocket,
+	Globe,
+	Gauge,
+	Link,
+	Bell,
+	AlertTriangle,
+	Settings,
+	FileText,
+};
+
+const CollectionPage = ({ collection, onBack, onArticleClick }) => {
+	const { colors, typography, spacing, border } = useUserGuideTheme();
+	const IconComponent = iconMap[collection.icon] || Rocket;
+
+	return (
+		<div style={{ minHeight: "100%", backgroundColor: colors.background.alt }}>
+			{/* Header */}
+			<div
+				style={{
+					backgroundColor: colors.background.white,
+					borderBottom: border.default,
+					padding: `${spacing.lg} ${spacing.lg}`,
+				}}
+			>
+				<div style={{ maxWidth: 900, margin: "0 auto" }}>
+					{/* Collection Header */}
+					<div style={{ display: "flex", alignItems: "flex-start", gap: spacing.md }}>
+						<IconComponent
+							size={24}
+							strokeWidth={1.5}
+							color={colors.brand.primary}
+							style={{ marginTop: 4 }}
+						/>
+						<div>
+							<h1
+								style={{
+									fontFamily: typography.fontFamily.sans,
+									fontSize: typography.fontSize["2xl"],
+									fontWeight: typography.fontWeight.semibold,
+									color: colors.text.primary,
+									marginBottom: spacing.xs,
+									marginTop: 0,
+								}}
+							>
+								{collection.title}
+							</h1>
+							<p
+								style={{
+									fontFamily: typography.fontFamily.sans,
+									fontSize: typography.fontSize.base,
+									color: colors.text.secondary,
+									lineHeight: typography.lineHeight.normal,
+									margin: 0,
+								}}
+							>
+								{collection.description}
+							</p>
+							<span
+								style={{
+									display: "block",
+									fontSize: typography.fontSize.sm,
+									color: colors.text.muted,
+									marginTop: spacing.sm,
+								}}
+							>
+								{collection.articleCount} articles in this collection
+							</span>
+						</div>
+					</div>
+				</div>
+			</div>
+
+			{/* Articles List */}
+			<div
+				style={{
+					maxWidth: 900,
+					margin: "0 auto",
+					padding: `${spacing.lg} ${spacing.lg}`,
+				}}
+			>
+				<div
+					style={{
+						backgroundColor: colors.background.white,
+						border: border.default,
+						borderRadius: border.radius,
+						overflow: "hidden",
+					}}
+				>
+					{collection.articles.map((article, index) => (
+						<div
+							key={article.id}
+							onClick={() => onArticleClick(article.id)}
+							className="user-guide-article-row"
+							style={{
+								display: "flex",
+								alignItems: "center",
+								justifyContent: "space-between",
+								padding: spacing.lg,
+								borderBottom:
+									index < collection.articles.length - 1 ? border.default : "none",
+								cursor: "pointer",
+							}}
+						>
+							<div style={{ display: "flex", alignItems: "flex-start", gap: spacing.md }}>
+								<FileText
+									size={16}
+									strokeWidth={1.5}
+									color={colors.text.muted}
+									style={{ marginTop: 2, flexShrink: 0 }}
+								/>
+								<div>
+									<span
+										style={{
+											display: "block",
+											fontFamily: typography.fontFamily.sans,
+											fontSize: typography.fontSize.base,
+											fontWeight: typography.fontWeight.medium,
+											color: colors.text.primary,
+											marginBottom: spacing.xs,
+										}}
+									>
+										{article.title}
+									</span>
+									<span
+										style={{
+											display: "block",
+											fontFamily: typography.fontFamily.sans,
+											fontSize: typography.fontSize.base,
+											color: colors.text.secondary,
+											lineHeight: typography.lineHeight.normal,
+										}}
+									>
+										{article.description}
+									</span>
+								</div>
+							</div>
+							<ArrowRight
+								className="arrow-icon"
+								size={16}
+								strokeWidth={1.5}
+								color={colors.text.muted}
+								style={{
+									flexShrink: 0,
+									marginLeft: 16,
+								}}
+							/>
+						</div>
+					))}
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export default CollectionPage;

client/src/Components/v1/UserGuide/ContentRenderer.css

@@ -0,0 +1,45 @@
+/* ContentRenderer styles - hover states and list styling */
+
+/* List styling - colors handled by inline styles for theme support */
+.user-guide-content-list li {
+	/* Font styles handled inline for theme-aware colors */
+}
+
+/* Table row hover */
+.user-guide-table-row {
+	transition: background-color 150ms ease;
+}
+
+.user-guide-table-row:hover {
+	background-color: rgba(0, 0, 0, 0.04) !important;
+}
+
+[data-mui-color-scheme="dark"] .user-guide-table-row:hover {
+	background-color: rgba(255, 255, 255, 0.05) !important;
+}
+
+/* Article links hover */
+.user-guide-article-link-item {
+	transition: all 150ms ease;
+}
+
+.user-guide-article-link-item:hover {
+	background-color: rgba(0, 0, 0, 0.04);
+}
+
+[data-mui-color-scheme="dark"] .user-guide-article-link-item:hover {
+	background-color: rgba(255, 255, 255, 0.05);
+}
+
+.user-guide-article-link-item:hover .link-title {
+	color: #1570ef;
+}
+
+.user-guide-article-link-item .arrow-icon {
+	transition: all 150ms ease;
+}
+
+.user-guide-article-link-item:hover .arrow-icon {
+	transform: translateX(4px);
+	color: #1570ef;
+}

client/src/Components/v1/UserGuide/ContentRenderer.jsx

@@ -0,0 +1,925 @@
+import { useState } from "react";
+import { useUserGuideTheme } from "./styles/useUserGuideTheme";
+import ImageLightbox from "./ImageLightbox";
+import {
+	CheckCircle,
+	Clock,
+	Rocket,
+	Shield,
+	Brain,
+	AlertTriangle,
+	Server,
+	Database,
+	Terminal,
+	FileText,
+	FolderKanban,
+	Gauge,
+	LayoutDashboard,
+	Menu,
+	Settings,
+	Info,
+	Lightbulb,
+	ArrowRight,
+	Globe,
+	Bell,
+	Link,
+} from "lucide-react";
+import "./ContentRenderer.css";
+
+// Icon mapping
+const iconMap = {
+	CheckCircle,
+	Clock,
+	Rocket,
+	Shield,
+	Brain,
+	AlertTriangle,
+	Server,
+	Database,
+	Terminal,
+	FileText,
+	FolderKanban,
+	Gauge,
+	LayoutDashboard,
+	Menu,
+	Settings,
+	Info,
+	Lightbulb,
+	Globe,
+	Bell,
+	Link,
+};
+
+const getIcon = (name) => iconMap[name] || Info;
+
+const ContentRenderer = ({ content, onNavigate }) => {
+	const { colors, typography, spacing, border, chipStyles, imageStyles, isDark } =
+		useUserGuideTheme();
+	const [lightboxImage, setLightboxImage] = useState(null);
+
+	// Parse basic markdown in text (inside component to access onNavigate)
+	const parseMarkdown = (text) => {
+		const parts = [];
+		let key = 0;
+
+		// Supports: **bold**, `code`, [[link text]](collection/article)
+		const combinedRegex = /\*\*([^*]+)\*\*|`([^`]+)`|\[\[([^\]]+)\]\]\(([^)]+)\)/g;
+		let lastIndex = 0;
+		let match;
+
+		const getChipStyle = (codeContent) => {
+			const isUrl = /^https?:\/\//.test(codeContent);
+			return isUrl ? chipStyles.url : chipStyles.code;
+		};
+
+		while ((match = combinedRegex.exec(text)) !== null) {
+			if (match.index > lastIndex) {
+				parts.push(text.slice(lastIndex, match.index));
+			}
+
+			if (match[1]) {
+				// Bold: **text**
+				parts.push(<strong key={key++}>{match[1]}</strong>);
+			} else if (match[2]) {
+				// Code: `text`
+				const style = getChipStyle(match[2]);
+				parts.push(
+					<span
+						key={key++}
+						style={style}
+					>
+						{match[2]}
+					</span>
+				);
+			} else if (match[3] && match[4]) {
+				// Article link: [[text]](collection/article)
+				const linkText = match[3];
+				const linkPath = match[4];
+				const [collectionId, articleId] = linkPath.split("/");
+				parts.push(
+					<span
+						key={key++}
+						onClick={() => onNavigate?.(collectionId, articleId)}
+						style={{
+							color: colors.brand.primary,
+							cursor: "pointer",
+							textDecoration: "underline",
+							textDecorationColor: "transparent",
+							transition: "text-decoration-color 150ms ease",
+						}}
+						onMouseEnter={(e) => {
+							e.currentTarget.style.textDecorationColor = colors.brand.primary;
+						}}
+						onMouseLeave={(e) => {
+							e.currentTarget.style.textDecorationColor = "transparent";
+						}}
+					>
+						{linkText}
+					</span>
+				);
+			}
+
+			lastIndex = match.index + match[0].length;
+		}
+
+		if (lastIndex < text.length) {
+			parts.push(text.slice(lastIndex));
+		}
+
+		return parts.length > 0 ? parts : text;
+	};
+
+	const renderBlock = (block, index) => {
+		switch (block.type) {
+			case "heading":
+				return renderHeading(block, index);
+			case "paragraph":
+				return renderParagraph(block, index);
+			case "callout":
+				return renderCallout(block, index);
+			case "bullet-list":
+				return renderBulletList(block, index);
+			case "ordered-list":
+				return renderOrderedList(block, index);
+			case "checklist":
+				return renderChecklist(block, index);
+			case "icon-cards":
+				return renderIconCards(block, index);
+			case "grid-cards":
+				return renderGridCards(block, index);
+			case "time-estimate":
+				return renderTimeEstimate(block, index);
+			case "info-box":
+				return renderInfoBox(block, index);
+			case "code":
+				return renderCode(block, index);
+			case "requirements":
+				return renderRequirements(block, index);
+			case "table":
+				return renderTable(block, index);
+			case "image":
+				return renderImage(block, index);
+			case "article-links":
+				return renderArticleLinks(block, index);
+			default:
+				return null;
+		}
+	};
+
+	const renderHeading = (block, index) => {
+		const Tag = block.level === 2 ? "h2" : "h3";
+		return (
+			<Tag
+				key={index}
+				id={block.id}
+				style={{
+					fontFamily: typography.fontFamily.sans,
+					fontSize:
+						block.level === 2 ? typography.fontSize["2xl"] : typography.fontSize.lg,
+					fontWeight: typography.fontWeight.semibold,
+					color: colors.text.primary,
+					marginBottom: spacing.lg,
+					marginTop: index > 0 ? spacing["2xl"] : 0,
+					lineHeight: typography.lineHeight.normal,
+				}}
+			>
+				{block.text}
+			</Tag>
+		);
+	};
+
+	const renderParagraph = (block, index) => (
+		<p
+			key={index}
+			style={{
+				fontFamily: typography.fontFamily.sans,
+				fontSize: typography.fontSize.base,
+				color: colors.text.secondary,
+				lineHeight: typography.lineHeight.relaxed,
+				marginBottom: spacing.lg,
+				marginTop: 0,
+			}}
+		>
+			{parseMarkdown(block.text)}
+		</p>
+	);
+
+	const renderCallout = (block, index) => {
+		const calloutColors = {
+			info: colors.brand.primary,
+			tip: colors.brand.primary,
+			warning: colors.brand.warning,
+			success: colors.brand.success,
+		};
+		const accentColor = calloutColors[block.variant || "info"];
+
+		return (
+			<div
+				key={index}
+				style={{
+					border: border.default,
+					borderLeftWidth: "3px",
+					borderLeftColor: accentColor,
+					backgroundColor: isDark ? "rgba(255, 255, 255, 0.03)" : "rgba(0, 0, 0, 0.02)",
+					paddingLeft: spacing.lg,
+					paddingTop: spacing.md,
+					paddingBottom: spacing.md,
+					paddingRight: spacing.lg,
+					borderRadius: border.radius,
+					marginBottom: spacing["2xl"],
+				}}
+			>
+				{block.title && (
+					<span
+						style={{
+							display: "block",
+							fontSize: typography.fontSize.base,
+							fontWeight: typography.fontWeight.semibold,
+							color: colors.text.primary,
+							marginBottom: spacing.xs,
+						}}
+					>
+						{block.title}
+					</span>
+				)}
+				<span
+					style={{
+						display: "block",
+						fontSize: typography.fontSize.base,
+						color: colors.text.secondary,
+						lineHeight: typography.lineHeight.normal,
+					}}
+				>
+					{parseMarkdown(block.text)}
+				</span>
+			</div>
+		);
+	};
+
+	const renderBulletList = (block, index) => (
+		<ul
+			key={index}
+			className="user-guide-content-list"
+			style={{
+				paddingLeft: spacing.xl,
+				marginBottom: spacing["2xl"],
+				marginTop: 0,
+			}}
+		>
+			{block.items.map((item, i) => (
+				<li
+					key={i}
+					style={{
+						fontSize: typography.fontSize.base,
+						color: colors.text.secondary,
+						lineHeight: typography.lineHeight.normal,
+						marginBottom: spacing.sm,
+					}}
+				>
+					{item.bold && (
+						<strong style={{ color: colors.text.primary }}>{item.bold}</strong>
+					)}
+					{item.bold && <span style={{ color: colors.text.secondary }}> — </span>}
+					<span style={{ color: colors.text.secondary }}>
+						{item.bold ? parseMarkdown(item.text) : parseMarkdown(item.text)}
+					</span>
+				</li>
+			))}
+		</ul>
+	);
+
+	const renderOrderedList = (block, index) => (
+		<ol
+			key={index}
+			className="user-guide-content-list"
+			style={{
+				paddingLeft: spacing.xl,
+				marginBottom: spacing.lg,
+				marginTop: 0,
+			}}
+		>
+			{block.items.map((item, i) => (
+				<li
+					key={i}
+					style={{
+						fontSize: typography.fontSize.base,
+						color: colors.text.secondary,
+						lineHeight: typography.lineHeight.normal,
+						marginBottom: spacing.sm,
+					}}
+				>
+					{item.bold && (
+						<strong style={{ color: colors.text.primary }}>{item.bold}</strong>
+					)}
+					{item.bold && " "}
+					<span style={{ color: colors.text.secondary }}>
+						{item.bold ? parseMarkdown(item.text) : parseMarkdown(item.text)}
+					</span>
+				</li>
+			))}
+		</ol>
+	);
+
+	const renderChecklist = (block, index) => (
+		<div
+			key={index}
+			style={{ marginBottom: spacing["2xl"], paddingLeft: spacing.sm }}
+		>
+			{block.items.map((item, i) => (
+				<div
+					key={i}
+					style={{
+						display: "flex",
+						flexDirection: "row",
+						alignItems: "flex-start",
+						gap: "10px",
+						marginBottom: spacing.sm,
+					}}
+				>
+					<CheckCircle
+						size={16}
+						strokeWidth={1.5}
+						color={colors.brand.primary}
+						style={{ flexShrink: 0, marginTop: 3 }}
+					/>
+					<span
+						style={{
+							fontSize: typography.fontSize.base,
+							color: colors.text.secondary,
+							lineHeight: typography.lineHeight.tight,
+						}}
+					>
+						{parseMarkdown(item)}
+					</span>
+				</div>
+			))}
+		</div>
+	);
+
+	const renderIconCards = (block, index) => (
+		<div
+			key={index}
+			style={{
+				display: "flex",
+				flexDirection: "column",
+				gap: spacing.md,
+				marginBottom: spacing["2xl"],
+			}}
+		>
+			{block.items.map((item, i) => {
+				const IconComponent = getIcon(item.icon);
+				return (
+					<div
+						key={i}
+						style={{
+							display: "flex",
+							gap: spacing.md,
+							padding: spacing.sm,
+							backgroundColor: colors.background.white,
+							border: border.default,
+							borderRadius: border.radius,
+						}}
+					>
+						<div
+							style={{
+								display: "flex",
+								alignItems: "center",
+								justifyContent: "center",
+								flexShrink: 0,
+								width: "20px",
+								height: "22px",
+							}}
+						>
+							<IconComponent
+								size={20}
+								strokeWidth={1.5}
+								color={colors.brand.primary}
+							/>
+						</div>
+						<div>
+							<span
+								style={{
+									display: "block",
+									fontSize: typography.fontSize.md,
+									fontWeight: typography.fontWeight.semibold,
+									color: colors.text.primary,
+									lineHeight: "22px",
+									marginBottom: "2px",
+								}}
+							>
+								{item.title}
+							</span>
+							<span
+								style={{
+									display: "block",
+									fontSize: typography.fontSize.base,
+									color: colors.text.secondary,
+									lineHeight: typography.lineHeight.normal,
+								}}
+							>
+								{parseMarkdown(item.description)}
+							</span>
+						</div>
+					</div>
+				);
+			})}
+		</div>
+	);
+
+	const renderGridCards = (block, index) => (
+		<div
+			key={index}
+			style={{
+				display: "grid",
+				gridTemplateColumns: `repeat(auto-fit, minmax(${block.columns === 2 ? "250px" : "200px"}, 1fr))`,
+				gap: spacing.md,
+				marginBottom: spacing["2xl"],
+			}}
+		>
+			{block.items.map((item, i) => {
+				const IconComponent = item.icon ? getIcon(item.icon) : null;
+				return (
+					<div
+						key={i}
+						style={{
+							padding: "14px",
+							backgroundColor: colors.background.white,
+							border: border.default,
+							borderRadius: border.radius,
+						}}
+					>
+						<div
+							style={{
+								display: "flex",
+								alignItems: "flex-start",
+								gap: spacing.sm,
+								marginBottom: "6px",
+							}}
+						>
+							{IconComponent && (
+								<span
+									style={{
+										display: "inline-flex",
+										alignItems: "center",
+										justifyContent: "center",
+										flexShrink: 0,
+										width: "16px",
+										height: "18px",
+									}}
+								>
+									<IconComponent
+										size={16}
+										strokeWidth={1.5}
+										color={colors.brand.primary}
+									/>
+								</span>
+							)}
+							<span
+								style={{
+									fontSize: typography.fontSize.base,
+									fontWeight: typography.fontWeight.semibold,
+									color: colors.text.primary,
+									lineHeight: "18px",
+								}}
+							>
+								{item.title}
+							</span>
+						</div>
+						<span
+							style={{
+								display: "block",
+								fontSize: typography.fontSize.xs,
+								color: colors.text.secondary,
+								lineHeight: typography.lineHeight.snug,
+							}}
+						>
+							{parseMarkdown(item.description)}
+						</span>
+					</div>
+				);
+			})}
+		</div>
+	);
+
+	const renderTimeEstimate = (block, index) => (
+		<div
+			key={index}
+			style={{
+				display: "inline-flex",
+				alignItems: "center",
+				gap: spacing.sm,
+				padding: `${spacing.md} ${spacing.lg}`,
+				backgroundColor: isDark ? "rgba(255, 255, 255, 0.05)" : "rgba(0, 0, 0, 0.03)",
+				border: border.default,
+				borderRadius: border.radius,
+				marginBottom: spacing.xl,
+			}}
+		>
+			<span
+				style={{
+					display: "inline-flex",
+					alignItems: "center",
+					justifyContent: "center",
+					flexShrink: 0,
+					height: "20px",
+				}}
+			>
+				<Clock
+					size={16}
+					strokeWidth={1.5}
+					color={colors.brand.primary}
+				/>
+			</span>
+			<span
+				style={{
+					fontSize: typography.fontSize.base,
+					color: colors.text.primary,
+					lineHeight: "20px",
+					display: "inline-flex",
+					alignItems: "center",
+				}}
+			>
+				{parseMarkdown(block.text)}
+			</span>
+		</div>
+	);
+
+	const renderInfoBox = (block, index) => {
+		const IconComponent = block.icon ? getIcon(block.icon) : FolderKanban;
+		return (
+			<div
+				key={index}
+				style={{
+					display: "flex",
+					gap: spacing.md,
+					padding: spacing.lg,
+					backgroundColor: colors.background.white,
+					border: border.default,
+					borderRadius: border.radius,
+					marginBottom: spacing.lg,
+				}}
+			>
+				<IconComponent
+					size={20}
+					strokeWidth={1.5}
+					color={colors.brand.primary}
+					style={{ flexShrink: 0, marginTop: 2 }}
+				/>
+				<div>
+					<span
+						style={{
+							display: "block",
+							fontSize: typography.fontSize.md,
+							fontWeight: typography.fontWeight.semibold,
+							color: colors.text.primary,
+							marginBottom: spacing.sm,
+						}}
+					>
+						{block.title}
+					</span>
+					<ul style={{ margin: 0, paddingLeft: "20px" }}>
+						{block.items.map((item, i) => (
+							<li
+								key={i}
+								style={{
+									fontSize: typography.fontSize.sm,
+									color: colors.text.secondary,
+									lineHeight: typography.lineHeight.normal,
+									marginBottom: spacing.xs,
+								}}
+							>
+								{parseMarkdown(item)}
+							</li>
+						))}
+					</ul>
+				</div>
+			</div>
+		);
+	};
+
+	const renderCode = (block, index) => (
+		<div
+			key={index}
+			style={{
+				backgroundColor: colors.background.code,
+				borderRadius: border.radius,
+				padding: "14px 16px",
+				overflow: "auto",
+				marginBottom: spacing.lg,
+			}}
+		>
+			<pre
+				style={{
+					fontSize: typography.fontSize.sm,
+					fontFamily: typography.fontFamily.mono,
+					color: "#E5E7EB",
+					margin: 0,
+					whiteSpace: "pre-wrap",
+					wordBreak: "break-all",
+				}}
+			>
+				{block.code}
+			</pre>
+		</div>
+	);
+
+	const renderRequirements = (block, index) => (
+		<div
+			key={index}
+			style={{
+				display: "flex",
+				flexDirection: "column",
+				gap: spacing.md,
+				marginBottom: spacing["2xl"],
+			}}
+		>
+			{block.items.map((req, i) => {
+				const IconComponent = getIcon(req.icon);
+				return (
+					<div
+						key={i}
+						style={{
+							padding: spacing.lg,
+							backgroundColor: colors.background.white,
+							border: border.default,
+							borderRadius: border.radius,
+						}}
+					>
+						<div
+							style={{
+								display: "flex",
+								alignItems: "center",
+								gap: spacing.sm,
+								marginBottom: spacing.md,
+							}}
+						>
+							<IconComponent
+								size={16}
+								strokeWidth={1.5}
+								color={colors.brand.primary}
+								style={{ flexShrink: 0 }}
+							/>
+							<span
+								style={{
+									fontSize: typography.fontSize.base,
+									fontWeight: typography.fontWeight.semibold,
+									color: colors.text.primary,
+								}}
+							>
+								{req.title}
+							</span>
+						</div>
+						<ul style={{ margin: 0, paddingLeft: "20px" }}>
+							{req.items.map((item, j) => (
+								<li
+									key={j}
+									style={{
+										fontSize: typography.fontSize.sm,
+										color: colors.text.secondary,
+										lineHeight: typography.lineHeight.normal,
+										marginBottom: spacing.xs,
+									}}
+								>
+									{item}
+								</li>
+							))}
+						</ul>
+					</div>
+				);
+			})}
+		</div>
+	);
+
+	const renderTableCell = (value) => {
+		if (value === "✓") {
+			return (
+				<span
+					style={{
+						display: "inline-flex",
+						alignItems: "center",
+						justifyContent: "center",
+						width: 20,
+						height: 20,
+						borderRadius: "50%",
+						backgroundColor: "rgba(19, 113, 91, 0.2)",
+						color: colors.brand.primary,
+						fontSize: typography.fontSize.sm,
+						fontWeight: typography.fontWeight.semibold,
+					}}
+				>
+					✓
+				</span>
+			);
+		}
+		if (value === "✗" || value === "—") {
+			return (
+				<span
+					style={{
+						display: "inline-flex",
+						alignItems: "center",
+						justifyContent: "center",
+						width: 20,
+						height: 20,
+						borderRadius: "50%",
+						backgroundColor: "rgba(102, 112, 133, 0.2)",
+						color: colors.text.muted,
+						fontSize: typography.fontSize.sm,
+					}}
+				>
+					—
+				</span>
+			);
+		}
+		return parseMarkdown(value);
+	};
+
+	const renderTable = (block, index) => (
+		<div
+			key={index}
+			style={{
+				border: border.default,
+				borderRadius: border.radius,
+				overflow: "hidden",
+				marginBottom: spacing["2xl"],
+			}}
+		>
+			{/* Header */}
+			<div
+				style={{
+					display: "grid",
+					gridTemplateColumns: block.columns.map((col) => col.width || "1fr").join(" "),
+					backgroundColor: isDark ? "rgba(255, 255, 255, 0.05)" : "rgba(0, 0, 0, 0.03)",
+					borderBottom: border.default,
+					padding: `${spacing.md} ${spacing.lg}`,
+					gap: spacing.md,
+				}}
+			>
+				{block.columns.map((col) => (
+					<span
+						key={col.key}
+						style={{
+							fontSize: typography.fontSize.sm,
+							fontWeight: typography.fontWeight.semibold,
+							color: colors.text.primary,
+							lineHeight: typography.lineHeight.tight,
+						}}
+					>
+						{col.label}
+					</span>
+				))}
+			</div>
+			{/* Rows */}
+			{block.rows.map((row, i) => (
+				<div
+					key={i}
+					className="user-guide-table-row"
+					style={{
+						display: "grid",
+						gridTemplateColumns: block.columns.map((col) => col.width || "1fr").join(" "),
+						borderBottom: i < block.rows.length - 1 ? border.default : "none",
+						backgroundColor:
+							i % 2 === 1
+								? isDark
+									? "rgba(255, 255, 255, 0.02)"
+									: "rgba(0, 0, 0, 0.02)"
+								: "transparent",
+						padding: `10px ${spacing.lg}`,
+						gap: spacing.md,
+						alignItems: "center",
+					}}
+				>
+					{block.columns.map((col, j) => (
+						<div
+							key={col.key}
+							style={{
+								fontSize: typography.fontSize.sm,
+								fontWeight:
+									j === 0 ? typography.fontWeight.medium : typography.fontWeight.normal,
+								color: j === 0 ? colors.text.primary : colors.text.secondary,
+								lineHeight: typography.lineHeight.normal,
+							}}
+						>
+							{renderTableCell(row[col.key])}
+						</div>
+					))}
+				</div>
+			))}
+		</div>
+	);
+
+	const renderImage = (block, index) => (
+		<div
+			key={index}
+			style={{
+				marginBottom: spacing["2xl"],
+			}}
+		>
+			<img
+				src={block.src}
+				alt={block.alt}
+				onClick={() =>
+					setLightboxImage({ src: block.src, alt: block.alt, caption: block.caption })
+				}
+				style={{
+					...imageStyles.image,
+					cursor: "zoom-in",
+				}}
+			/>
+			{block.caption && (
+				<p
+					style={{
+						...imageStyles.caption,
+						marginTop: spacing.sm,
+						marginBottom: 0,
+					}}
+				>
+					{block.caption}
+				</p>
+			)}
+		</div>
+	);
+
+	const renderArticleLinks = (block, index) => (
+		<div
+			key={index}
+			style={{ marginBottom: spacing["2xl"] }}
+		>
+			<div
+				style={{
+					height: "1px",
+					backgroundColor: colors.border.default,
+					marginBottom: spacing.xl,
+				}}
+			/>
+			{block.title && (
+				<span
+					style={{
+						display: "block",
+						fontFamily: typography.fontFamily.sans,
+						fontSize: typography.fontSize.lg,
+						fontWeight: typography.fontWeight.semibold,
+						color: colors.text.primary,
+						marginBottom: spacing.md,
+					}}
+				>
+					{block.title}
+				</span>
+			)}
+			<div style={{ display: "flex", flexDirection: "column" }}>
+				{block.items.map((item, i) => (
+					<div
+						key={i}
+						onClick={() => onNavigate?.(item.collectionId, item.articleId)}
+						className="user-guide-article-link-item"
+						style={{
+							display: "flex",
+							alignItems: "center",
+							justifyContent: "space-between",
+							padding: spacing.sm,
+							margin: `0 -${spacing.sm}`,
+							borderRadius: "4px",
+							cursor: "pointer",
+						}}
+					>
+						<span
+							className="link-title"
+							style={{
+								fontFamily: typography.fontFamily.sans,
+								fontSize: typography.fontSize.base,
+								fontWeight: typography.fontWeight.medium,
+								color: colors.text.primary,
+							}}
+						>
+							{item.title}
+						</span>
+						<ArrowRight
+							className="arrow-icon"
+							size={18}
+							strokeWidth={1.5}
+							color={colors.text.muted}
+							style={{ flexShrink: 0, marginLeft: 16 }}
+						/>
+					</div>
+				))}
+			</div>
+		</div>
+	);
+
+	return (
+		<>
+			<div>{content.blocks.map((block, index) => renderBlock(block, index))}</div>
+
+			{/* Image Lightbox */}
+			{lightboxImage && (
+				<ImageLightbox
+					src={lightboxImage.src}
+					alt={lightboxImage.alt}
+					caption={lightboxImage.caption}
+					onClose={() => setLightboxImage(null)}
+				/>
+			)}
+		</>
+	);
+};
+
+export default ContentRenderer;

client/src/Components/v1/UserGuide/HelpSection.css

@@ -0,0 +1,14 @@
+/* HelpSection styles */
+
+.user-guide-help-button {
+	transition: all 150ms ease;
+}
+
+.user-guide-help-button:hover {
+	border-color: #1570ef;
+	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
+}
+
+[data-mui-color-scheme="dark"] .user-guide-help-button:hover {
+	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
+}

client/src/Components/v1/UserGuide/HelpSection.jsx

@@ -0,0 +1,134 @@
+import { ExternalLink } from "lucide-react";
+import { useUserGuideTheme } from "./styles/useUserGuideTheme";
+import "./HelpSection.css";
+
+const HelpSection = () => {
+	const { colors, typography, spacing, border } = useUserGuideTheme();
+
+	return (
+		<div
+			style={{
+				padding: spacing.xl,
+				minHeight: "100%",
+			}}
+		>
+			{/* Contact us */}
+			<div style={{ marginBottom: spacing["2xl"] }}>
+				<h2
+					style={{
+						fontFamily: typography.fontFamily.sans,
+						fontSize: typography.fontSize.lg,
+						fontWeight: typography.fontWeight.semibold,
+						color: colors.text.primary,
+						marginBottom: spacing.sm,
+						marginTop: 0,
+					}}
+				>
+					Contact us
+				</h2>
+				<p
+					style={{
+						fontFamily: typography.fontFamily.sans,
+						fontSize: typography.fontSize.base,
+						color: colors.text.secondary,
+						lineHeight: typography.lineHeight.normal,
+						margin: 0,
+						marginBottom: spacing.md,
+					}}
+				>
+					Can't find what you need? Our support team is here to help.
+				</p>
+				<a
+					href="https://discord.com/invite/NAb6H3UTjK"
+					target="_blank"
+					rel="noopener noreferrer"
+					className="user-guide-help-button"
+					style={{
+						display: "flex",
+						alignItems: "center",
+						justifyContent: "center",
+						gap: spacing.sm,
+						width: "100%",
+						padding: `${spacing.md} ${spacing.lg}`,
+						backgroundColor: colors.background.white,
+						border: border.default,
+						borderRadius: border.radius,
+						textDecoration: "none",
+						cursor: "pointer",
+						fontFamily: typography.fontFamily.sans,
+						fontSize: typography.fontSize.base,
+						fontWeight: typography.fontWeight.medium,
+						color: colors.text.primary,
+					}}
+				>
+					Join our Discord
+					<ExternalLink
+						size={14}
+						strokeWidth={1.5}
+						color={colors.text.muted}
+					/>
+				</a>
+			</div>
+
+			{/* Ask the community */}
+			<div>
+				<h2
+					style={{
+						fontFamily: typography.fontFamily.sans,
+						fontSize: typography.fontSize.lg,
+						fontWeight: typography.fontWeight.semibold,
+						color: colors.text.primary,
+						marginBottom: spacing.sm,
+						marginTop: 0,
+					}}
+				>
+					GitHub discussions
+				</h2>
+				<p
+					style={{
+						fontFamily: typography.fontFamily.sans,
+						fontSize: typography.fontSize.base,
+						color: colors.text.secondary,
+						lineHeight: typography.lineHeight.normal,
+						margin: 0,
+						marginBottom: spacing.md,
+					}}
+				>
+					Questions about features, how-tos, or use cases? Join the community discussion.
+				</p>
+				<a
+					href="https://github.com/bluewave-labs/checkmate/discussions"
+					target="_blank"
+					rel="noopener noreferrer"
+					className="user-guide-help-button"
+					style={{
+						display: "flex",
+						alignItems: "center",
+						justifyContent: "center",
+						gap: spacing.sm,
+						width: "100%",
+						padding: `${spacing.md} ${spacing.lg}`,
+						backgroundColor: colors.background.white,
+						border: border.default,
+						borderRadius: border.radius,
+						textDecoration: "none",
+						cursor: "pointer",
+						fontFamily: typography.fontFamily.sans,
+						fontSize: typography.fontSize.base,
+						fontWeight: typography.fontWeight.medium,
+						color: colors.text.primary,
+					}}
+				>
+					GitHub discussions
+					<ExternalLink
+						size={14}
+						strokeWidth={1.5}
+						color={colors.text.muted}
+					/>
+				</a>
+			</div>
+		</div>
+	);
+};
+
+export default HelpSection;

client/src/Components/v1/UserGuide/ImageLightbox.jsx

@@ -0,0 +1,125 @@
+import { useEffect, useCallback } from "react";
+import { X } from "lucide-react";
+import { typography, spacing } from "./styles/theme";
+
+const ImageLightbox = ({ src, alt, caption, onClose }) => {
+	// Close on escape key
+	const handleKeyDown = useCallback(
+		(e) => {
+			if (e.key === "Escape") {
+				onClose();
+			}
+		},
+		[onClose]
+	);
+
+	useEffect(() => {
+		document.addEventListener("keydown", handleKeyDown);
+		document.body.style.overflow = "hidden";
+
+		return () => {
+			document.removeEventListener("keydown", handleKeyDown);
+			document.body.style.overflow = "";
+		};
+	}, [handleKeyDown]);
+
+	// Close when clicking backdrop
+	const handleBackdropClick = (e) => {
+		if (e.target === e.currentTarget) {
+			onClose();
+		}
+	};
+
+	return (
+		<div
+			onClick={handleBackdropClick}
+			style={{
+				position: "fixed",
+				top: 0,
+				left: 0,
+				right: 0,
+				bottom: 0,
+				backgroundColor: "rgba(0, 0, 0, 0.9)",
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center",
+				zIndex: 2000,
+				padding: spacing.xl,
+				cursor: "zoom-out",
+			}}
+		>
+			{/* Close button */}
+			<button
+				onClick={onClose}
+				style={{
+					position: "absolute",
+					top: 16,
+					right: 16,
+					width: 40,
+					height: 40,
+					borderRadius: "50%",
+					backgroundColor: "rgba(255, 255, 255, 0.1)",
+					border: "none",
+					cursor: "pointer",
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "center",
+					transition: "background-color 150ms ease",
+				}}
+				onMouseEnter={(e) => {
+					e.currentTarget.style.backgroundColor = "rgba(255, 255, 255, 0.2)";
+				}}
+				onMouseLeave={(e) => {
+					e.currentTarget.style.backgroundColor = "rgba(255, 255, 255, 0.1)";
+				}}
+				title="Close (Esc)"
+			>
+				<X
+					size={24}
+					strokeWidth={1.5}
+					color="#fff"
+				/>
+			</button>
+
+			{/* Image container */}
+			<div
+				style={{
+					maxWidth: "90vw",
+					maxHeight: "90vh",
+					display: "flex",
+					flexDirection: "column",
+					alignItems: "center",
+				}}
+			>
+				<img
+					src={src}
+					alt={alt}
+					style={{
+						maxWidth: "100%",
+						maxHeight: caption ? "calc(90vh - 40px)" : "90vh",
+						objectFit: "contain",
+						borderRadius: "4px",
+						boxShadow: "0 8px 32px rgba(0, 0, 0, 0.3)",
+						cursor: "default",
+					}}
+					onClick={(e) => e.stopPropagation()}
+				/>
+				{caption && (
+					<p
+						style={{
+							marginTop: spacing.md,
+							fontSize: typography.fontSize.sm,
+							color: "rgba(255, 255, 255, 0.8)",
+							textAlign: "center",
+							fontStyle: "italic",
+						}}
+					>
+						{caption}
+					</p>
+				)}
+			</div>
+		</div>
+	);
+};
+
+export default ImageLightbox;

client/src/Components/v1/UserGuide/STYLE_GUIDE.md

@@ -0,0 +1,638 @@
+# Checkmate User Guide Style Guide
+
+This document defines the writing standards, formatting rules, and content patterns for all Checkmate user documentation.
+
+---
+
+## Voice & Tone
+
+### Core Principles
+
+1. **Second person, active voice** - Address the reader directly
+
+   - ✅ "You can configure monitors from the dashboard"
+   - ❌ "Monitors can be configured from the dashboard"
+
+2. **Professional but approachable** - Clear and helpful, not stiff or overly casual
+
+   - ✅ "Select the notification channel you want to use"
+   - ❌ "Go ahead and pick whatever notification channel works for you!"
+   - ❌ "The user shall select the appropriate notification channel"
+
+3. **Direct and instructional** - Tell users what to do, not what the system does
+
+   - ✅ "Click Save to apply your changes"
+   - ❌ "The Save button will apply your changes"
+
+4. **User-focused** - Lead with what users can accomplish
+   - ✅ "You can track server performance with infrastructure monitors"
+   - ❌ "Infrastructure monitors use the Capture agent to collect metrics"
+
+### Language Patterns
+
+**Opening phrases:**
+
+- "The [Feature] allows you to..."
+- "[Feature] is..."
+- "You can..."
+- "To [action]:"
+
+**Navigation instructions:**
+
+- "Navigate to [location]"
+- "Click [element]"
+- "Select [option]"
+- "From the [page], click..."
+
+**Avoid:**
+
+- Passive voice where active is clearer
+- Jargon without explanation
+- Assuming prior knowledge
+- Marketing language ("powerful", "seamless", "robust")
+
+---
+
+## Content Structure
+
+### Standard Article Pattern
+
+Every article should follow this flow:
+
+```
+1. OVERVIEW (H2)
+   - 1-2 paragraphs explaining what and why
+   - Set context for the topic
+
+2. VISUAL (Optional)
+   - Screenshot showing the feature
+   - Include after intro, not before
+
+3. MAIN CONTENT (H2/H3 sections)
+   - Procedures with ordered lists
+   - Features with bullet lists
+   - Reference info in tables
+
+4. TIPS & WARNINGS (Callouts)
+   - Best practices
+   - Common pitfalls
+   - Important restrictions
+
+5. RELATED ARTICLES (Links)
+   - 2-4 related topics
+   - Logical next steps
+```
+
+### Heading Hierarchy
+
+Use only two heading levels within articles:
+
+- **H2** - Major sections (Overview, Configuration, Settings)
+- **H3** - Subsections within H2s (Creating a monitor, Editing settings)
+
+Never use H4 or deeper. If content requires more nesting, restructure into separate sections.
+
+### Section Length
+
+| Element       | Target Length  |
+| ------------- | -------------- |
+| Paragraphs    | 2-4 sentences  |
+| H2 sections   | 100-300 words  |
+| H3 sections   | 50-150 words   |
+| Full articles | 800-1500 words |
+
+---
+
+## Formatting Rules
+
+### Lists
+
+**Bullet lists** - Use for features, options, characteristics (unordered items)
+
+```javascript
+{
+  type: 'bullet-list',
+  items: [
+    { text: 'HTTP monitors check website availability' },
+    { text: 'Ping monitors verify server reachability' },
+    { text: 'Port monitors test specific service ports' }
+  ]
+}
+```
+
+**Ordered lists** - Use for step-by-step procedures (sequential actions)
+
+```javascript
+{
+  type: 'ordered-list',
+  items: [
+    { text: 'Navigate to **Uptime** in the sidebar' },
+    { text: 'Click **Create monitor**' },
+    { text: 'Enter the URL you want to monitor' },
+    { text: 'Click **Save** to create the monitor' }
+  ]
+}
+```
+
+**List guidelines:**
+
+- Keep procedures to 4-6 steps maximum
+- If longer, break into multiple procedures
+- Start each item with an action verb for procedures
+- Use parallel structure (all items same grammatical form)
+
+### Callouts
+
+Use callouts sparingly for important information that shouldn't be missed.
+
+**Types:**
+
+| Variant   | Use For                           | Example                                                                    |
+| --------- | --------------------------------- | -------------------------------------------------------------------------- |
+| `info`    | Additional context, clarification | "Monitors check at the interval you specify, starting from creation time." |
+| `tip`     | Best practices, recommendations   | "Use descriptive names to easily identify monitors in alerts."             |
+| `warning` | Restrictions, potential issues    | "Deleting a monitor removes all associated check history."                 |
+| `success` | Confirmations, positive outcomes  | "Your monitor is now active and checking every 5 minutes."                 |
+
+```javascript
+{
+  type: 'callout',
+  variant: 'tip',
+  title: 'Best practice',
+  text: 'Group related monitors together for easier management.'
+}
+```
+
+**Callout guidelines:**
+
+- Maximum 2-3 callouts per article
+- Keep callout text concise (1-2 sentences)
+- Title is optional but helps scannability
+- Don't use callouts for routine information
+
+### Inline Formatting
+
+**Bold** - Use for:
+
+- UI element names: "Click **Save**"
+- Key terms on first use: "**Uptime** measures availability over time"
+- Emphasis in lists: "**Name** — The display name for your monitor"
+
+**Code/monospace** - Use for:
+
+- URLs: `https://example.com`
+- File paths: `/api/v1/monitors`
+- Technical values: `200`, `timeout`
+- Commands: `npm run dev`
+
+```javascript
+// In paragraph text, use backticks in markdown:
+{
+	text: "Enter the URL (e.g., `https://example.com`) in the field";
+}
+```
+
+### Tables
+
+Use tables for:
+
+- Feature comparisons
+- Configuration options
+- Reference data with multiple attributes
+
+```javascript
+{
+  type: 'table',
+  columns: [
+    { key: 'type', label: 'Monitor Type', width: '1fr' },
+    { key: 'use', label: 'Best For', width: '2fr' }
+  ],
+  rows: [
+    { type: 'HTTP', use: 'Websites and APIs' },
+    { type: 'Ping', use: 'Server availability' },
+    { type: 'Port', use: 'Specific services (databases, mail servers)' }
+  ]
+}
+```
+
+---
+
+## Content Types
+
+### Block Types Reference
+
+| Type            | Purpose           | When to Use               |
+| --------------- | ----------------- | ------------------------- |
+| `heading`       | Section titles    | Start each major topic    |
+| `paragraph`     | Body text         | Explanations, context     |
+| `bullet-list`   | Unordered items   | Features, options         |
+| `ordered-list`  | Sequential steps  | Procedures                |
+| `checklist`     | Checkable items   | Requirements, checklists  |
+| `callout`       | Important notices | Tips, warnings            |
+| `code`          | Code blocks       | Commands, config examples |
+| `table`         | Structured data   | Comparisons, reference    |
+| `image`         | Screenshots       | UI demonstration          |
+| `icon-cards`    | Feature grids     | Capability overviews      |
+| `article-links` | Related content   | End-of-article navigation |
+
+### Icon Cards
+
+Use for presenting 4-8 related features or concepts:
+
+```javascript
+{
+  type: 'icon-cards',
+  items: [
+    {
+      icon: 'Globe',
+      title: 'HTTP monitoring',
+      description: 'Check website availability and response times'
+    },
+    {
+      icon: 'Server',
+      title: 'Infrastructure',
+      description: 'Monitor CPU, memory, and disk usage'
+    }
+  ]
+}
+```
+
+### Article Links
+
+Always end articles with related content:
+
+```javascript
+{
+  type: 'article-links',
+  title: 'Related articles',
+  items: [
+    {
+      collectionId: 'uptime-monitoring',
+      articleId: 'http-monitors',
+      title: 'Creating HTTP monitors',
+      description: 'Set up your first website monitor'
+    }
+  ]
+}
+```
+
+---
+
+## Images & Screenshots
+
+### When to Include Images
+
+- After introducing a feature (not before)
+- For complex UI that benefits from visual reference
+- For multi-step workflows
+- Skip for simple, text-describable actions
+
+### Image Requirements
+
+```javascript
+{
+  type: 'image',
+  src: '/images/user-guide/monitor-create.png',
+  alt: 'Monitor creation form showing URL field, name field, and interval selector',
+  caption: 'The monitor creation form with required fields highlighted'
+}
+```
+
+**Alt text guidelines:**
+
+- Describe what the image shows (15-30 words)
+- Include key UI elements visible
+- Make it useful for screen readers
+
+**Caption guidelines:**
+
+- Explain the context or what to notice
+- Keep to one sentence
+- Optional but recommended
+
+### Screenshot Standards
+
+- Capture at consistent browser width (1200px recommended)
+- Use light theme for screenshots
+- Highlight relevant areas if needed
+- Avoid personal data in screenshots
+- Crop to show relevant UI only
+
+---
+
+## Writing Procedures
+
+### Step-by-Step Instructions
+
+**Format:**
+
+```javascript
+{
+  type: 'ordered-list',
+  items: [
+    { text: 'Navigate to **Uptime** in the sidebar' },
+    { text: 'Click **Create monitor** in the top right' },
+    { text: 'Enter the URL you want to monitor' },
+    { text: 'Set the check interval (default: 5 minutes)' },
+    { text: 'Click **Save** to create the monitor' }
+  ]
+}
+```
+
+**Guidelines:**
+
+- Start each step with an action verb (Click, Enter, Select, Navigate)
+- One action per step
+- Include the location of UI elements
+- Bold all clickable elements
+- Add context in parentheses when helpful
+
+### Describing Features
+
+**Format:**
+
+```javascript
+{
+  type: 'bullet-list',
+  items: [
+    { bold: 'Name', text: 'A descriptive label for your monitor' },
+    { bold: 'URL', text: 'The address to check (must include protocol)' },
+    { bold: 'Interval', text: 'How often to perform checks (1-60 minutes)' }
+  ]
+}
+```
+
+---
+
+## Terminology
+
+### Consistent Terms
+
+Use these terms consistently throughout documentation:
+
+| Term         | Use                       | Don't Use             |
+| ------------ | ------------------------- | --------------------- |
+| Monitor      | The configured check      | Watcher, probe, check |
+| Check        | A single monitoring event | Ping, request, poll   |
+| Incident     | A detected problem        | Outage, alert, issue  |
+| Notification | Alert sent to user        | Message, email, ping  |
+| Dashboard    | Main overview page        | Home, overview        |
+| Sidebar      | Left navigation           | Menu, nav             |
+
+### Feature Names
+
+Always match UI exactly:
+
+- **Uptime** (not "Uptime Monitoring")
+- **PageSpeed** (not "Page Speed" or "Pagespeed")
+- **Infrastructure** (not "Server Monitoring")
+- **Status pages** (not "Status Pages" - lowercase 'p')
+
+---
+
+## Article Templates
+
+### Getting Started Article
+
+```javascript
+{
+	blocks: [
+		{
+			type: "heading",
+			level: 2,
+			text: "Overview",
+			id: "overview",
+		},
+		{
+			type: "paragraph",
+			text: "[1-2 sentences: What this feature/concept is]",
+		},
+		{
+			type: "paragraph",
+			text: "[1-2 sentences: Why it matters to users]",
+		},
+		{
+			type: "heading",
+			level: 2,
+			text: "[Main topic]",
+			id: "main-topic",
+		},
+		// ... content blocks
+		{
+			type: "article-links",
+			title: "Next steps",
+			items: [
+				// 2-3 logical next articles
+			],
+		},
+	];
+}
+```
+
+### How-To Article
+
+```javascript
+{
+	blocks: [
+		{
+			type: "heading",
+			level: 2,
+			text: "Overview",
+			id: "overview",
+		},
+		{
+			type: "paragraph",
+			text: "[Brief description of what user will accomplish]",
+		},
+		{
+			type: "heading",
+			level: 2,
+			text: "[Action: Creating/Configuring/Setting up...]",
+			id: "action",
+		},
+		{
+			type: "ordered-list",
+			items: [
+				// 4-6 steps
+			],
+		},
+		{
+			type: "callout",
+			variant: "tip",
+			text: "[Best practice or helpful hint]",
+		},
+		{
+			type: "article-links",
+			title: "Related articles",
+			items: [],
+		},
+	];
+}
+```
+
+### Reference Article
+
+```javascript
+{
+  blocks: [
+    {
+      type: 'heading',
+      level: 2,
+      text: 'Overview',
+      id: 'overview'
+    },
+    {
+      type: 'paragraph',
+      text: '[What this reference covers]'
+    },
+    {
+      type: 'heading',
+      level: 2,
+      text: '[Category 1]',
+      id: 'category-1'
+    },
+    {
+      type: 'table',
+      columns: [...],
+      rows: [...]
+    },
+    // More categories as needed
+    {
+      type: 'article-links',
+      title: 'Related articles',
+      items: []
+    }
+  ]
+}
+```
+
+---
+
+## Quality Checklist
+
+Before publishing any article, verify:
+
+### Content
+
+- [ ] Overview explains what AND why
+- [ ] Procedures are tested and accurate
+- [ ] All UI element names match exactly
+- [ ] No assumptions about user knowledge
+- [ ] Related articles are linked
+
+### Formatting
+
+- [ ] Only H2 and H3 headings used
+- [ ] All headings have unique IDs
+- [ ] Lists use correct type (bullet vs ordered)
+- [ ] Callouts are used sparingly (max 3)
+- [ ] Bold used for UI elements
+
+### Style
+
+- [ ] Active voice throughout
+- [ ] Second person ("you")
+- [ ] Action verbs start procedure steps
+- [ ] Consistent terminology
+- [ ] No marketing language
+
+### Technical
+
+- [ ] All links work
+- [ ] Images have alt text
+- [ ] Code examples are correct
+- [ ] No placeholder content
+
+---
+
+## Available Icons
+
+For icon-cards and other icon references, use these Lucide icon names:
+
+**Navigation:**
+
+- `Globe` - Uptime/HTTP
+- `Gauge` - PageSpeed
+- `Server` - Infrastructure
+- `Bell` - Notifications
+- `AlertTriangle` - Incidents
+- `Wifi` - Status pages
+- `Wrench` - Maintenance
+- `Settings` - Settings
+- `Users` - Team
+
+**Actions:**
+
+- `CheckCircle` - Success/complete
+- `Clock` - Time/scheduling
+- `Info` - Information
+- `Lightbulb` - Tips
+- `ArrowRight` - Navigation
+
+**Features:**
+
+- `Database` - Data/storage
+- `Terminal` - Commands
+- `FileText` - Documentation
+- `Shield` - Security
+- `Rocket` - Getting started
+
+---
+
+## File Structure
+
+Articles are stored in `/content/index.js`:
+
+```javascript
+export const articleContents = {
+	"collection-id": {
+		"article-id": {
+			blocks: [
+				// Content blocks
+			],
+		},
+	},
+};
+```
+
+Article metadata is in `/content/userGuideConfig.js`:
+
+```javascript
+{
+  id: 'article-id',
+  title: 'Article Title',
+  description: 'Brief description for search and previews',
+  keywords: ['search', 'terms', 'for', 'this', 'article']
+}
+```
+
+---
+
+## Examples
+
+### Good Paragraph
+
+> "HTTP monitors check your websites and APIs at regular intervals. When a check fails—due to a timeout, error response, or connection issue—Checkmate creates an incident and sends notifications to your configured channels."
+
+### Good Procedure
+
+> 1. Navigate to **Uptime** in the sidebar
+> 2. Click **Create monitor** in the top right
+> 3. Enter the URL you want to monitor (include `https://`)
+> 4. Set your preferred check interval
+> 5. Click **Save** to create the monitor
+
+### Good Callout
+
+> **Tip:** Use descriptive monitor names like "Production API" or "Marketing Website" to quickly identify issues in notifications.
+
+### Good Feature List
+
+> - **Name** — A descriptive label for easy identification
+> - **URL** — The address to monitor (must include protocol)
+> - **Interval** — How often to check (1-60 minutes)
+> - **Timeout** — How long to wait before marking as failed
+
+---
+
+_Last updated: January 2025_

client/src/Components/v1/UserGuide/SearchResults.css

@@ -0,0 +1,12 @@
+/* SearchResults styles (Dark theme) */
+
+.user-guide-search-result-item {
+	transition:
+		background-color 150ms ease,
+		border-color 150ms ease;
+}
+
+.user-guide-search-result-item:hover {
+	background-color: rgba(255, 255, 255, 0.05) !important;
+	border-color: #4a5568 !important;
+}

client/src/Components/v1/UserGuide/SearchResults.jsx

@@ -0,0 +1,173 @@
+import { FileText, ArrowRight } from "lucide-react";
+import { searchArticles } from "./content/userGuideConfig";
+import { useUserGuideTheme } from "./styles/useUserGuideTheme";
+import "./SearchResults.css";
+
+const SearchResults = ({ query, onNavigate, onClearSearch }) => {
+	const { colors, typography, spacing, border } = useUserGuideTheme();
+	const results = searchArticles(query);
+
+	const handleResultClick = (result) => {
+		onNavigate(result.collectionId, result.articleId);
+		onClearSearch();
+	};
+
+	if (query.trim().length < 2) {
+		return (
+			<div style={{ padding: spacing.lg }}>
+				<p
+					style={{
+						fontFamily: typography.fontFamily.sans,
+						fontSize: typography.fontSize.sm,
+						color: colors.text.muted,
+						textAlign: "center",
+						margin: 0,
+					}}
+				>
+					Type at least 2 characters to search...
+				</p>
+			</div>
+		);
+	}
+
+	if (results.length === 0) {
+		return (
+			<div style={{ padding: spacing.xl }}>
+				<p
+					style={{
+						fontFamily: typography.fontFamily.sans,
+						fontSize: typography.fontSize.base,
+						color: colors.text.primary,
+						textAlign: "center",
+						marginBottom: spacing.sm,
+						marginTop: 0,
+					}}
+				>
+					No results found for "{query}"
+				</p>
+				<p
+					style={{
+						fontFamily: typography.fontFamily.sans,
+						fontSize: typography.fontSize.sm,
+						color: colors.text.muted,
+						textAlign: "center",
+						margin: 0,
+					}}
+				>
+					Try different keywords or browse by topic
+				</p>
+			</div>
+		);
+	}
+
+	return (
+		<div style={{ padding: spacing.lg }}>
+			<div
+				style={{
+					display: "flex",
+					justifyContent: "space-between",
+					alignItems: "center",
+					marginBottom: spacing.md,
+				}}
+			>
+				<span
+					style={{
+						fontFamily: typography.fontFamily.sans,
+						fontSize: typography.fontSize.sm,
+						color: colors.text.muted,
+					}}
+				>
+					{results.length} result{results.length !== 1 ? "s" : ""} for "{query}"
+				</span>
+				<button
+					onClick={onClearSearch}
+					style={{
+						background: "none",
+						border: "none",
+						fontFamily: typography.fontFamily.sans,
+						fontSize: typography.fontSize.sm,
+						color: colors.brand.primary,
+						cursor: "pointer",
+						padding: 0,
+					}}
+				>
+					Clear search
+				</button>
+			</div>
+
+			<div style={{ display: "flex", flexDirection: "column", gap: spacing.sm }}>
+				{results.map((result) => (
+					<div
+						key={`${result.collectionId}-${result.articleId}`}
+						onClick={() => handleResultClick(result)}
+						className="user-guide-search-result-item"
+						style={{
+							display: "flex",
+							alignItems: "flex-start",
+							gap: spacing.md,
+							padding: spacing.md,
+							backgroundColor: colors.background.white,
+							border: border.default,
+							borderRadius: border.radius,
+							cursor: "pointer",
+						}}
+					>
+						<FileText
+							size={16}
+							strokeWidth={1.5}
+							color={colors.text.muted}
+							style={{ flexShrink: 0, marginTop: 2 }}
+						/>
+						<div style={{ flex: 1, minWidth: 0 }}>
+							<span
+								style={{
+									display: "block",
+									fontFamily: typography.fontFamily.sans,
+									fontSize: typography.fontSize.base,
+									fontWeight: typography.fontWeight.medium,
+									color: colors.text.primary,
+									marginBottom: 2,
+								}}
+							>
+								{result.articleTitle}
+							</span>
+							<span
+								style={{
+									display: "block",
+									fontFamily: typography.fontFamily.sans,
+									fontSize: typography.fontSize.sm,
+									color: colors.text.secondary,
+									lineHeight: typography.lineHeight.normal,
+									overflow: "hidden",
+									textOverflow: "ellipsis",
+									whiteSpace: "nowrap",
+								}}
+							>
+								{result.articleDescription}
+							</span>
+							<span
+								style={{
+									display: "block",
+									fontFamily: typography.fontFamily.sans,
+									fontSize: typography.fontSize.xs,
+									color: colors.text.muted,
+									marginTop: spacing.xs,
+								}}
+							>
+								in {result.collectionTitle}
+							</span>
+						</div>
+						<ArrowRight
+							size={16}
+							strokeWidth={1.5}
+							color={colors.text.muted}
+							style={{ flexShrink: 0, marginTop: 2 }}
+						/>
+					</div>
+				))}
+			</div>
+		</div>
+	);
+};
+
+export default SearchResults;

client/src/Components/v1/UserGuide/SidebarHeader.css

@@ -0,0 +1,40 @@
+/* SidebarHeader styles - Dark theme */
+
+.user-guide-header-icon-button {
+	transition: all 150ms ease;
+}
+
+.user-guide-header-icon-button:hover {
+	background-color: rgba(255, 255, 255, 0.1) !important;
+	color: #1570ef !important;
+}
+
+.user-guide-header-icon-button.active {
+	background-color: #0d0d0d;
+	color: #1570ef;
+}
+
+.user-guide-breadcrumb-dropdown-trigger {
+	transition: background-color 150ms ease;
+}
+
+.user-guide-breadcrumb-dropdown-trigger:hover {
+	background-color: rgba(255, 255, 255, 0.05);
+}
+
+.user-guide-breadcrumb-item {
+	transition: background-color 150ms ease;
+}
+
+.user-guide-breadcrumb-item:hover {
+	background-color: rgba(255, 255, 255, 0.05);
+}
+
+.user-guide-search-input:focus {
+	outline: none;
+	border-color: #1570ef;
+}
+
+.user-guide-search-input::placeholder {
+	color: #667085;
+}

client/src/Components/v1/UserGuide/SidebarHeader.jsx

@@ -0,0 +1,399 @@
+import { useState, useRef, useEffect } from "react";
+import {
+	Home,
+	ChevronDown,
+	ChevronLeft,
+	ChevronRight,
+	Search,
+	ExternalLink,
+	X,
+} from "lucide-react";
+import { useUserGuideTheme } from "./styles/useUserGuideTheme";
+import "./SidebarHeader.css";
+
+const SidebarHeader = ({
+	breadcrumbs,
+	onHomeClick,
+	onBack,
+	onForward,
+	canGoBack,
+	canGoForward,
+	onClose,
+	onOpenInNewTab,
+	isSearchOpen,
+	onSearchToggle,
+	searchQuery,
+	onSearchChange,
+	showOpenInNewTab = true,
+	showNavigation = true,
+}) => {
+	const { colors, typography, spacing, border, isDark } = useUserGuideTheme();
+	const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+	const dropdownRef = useRef(null);
+	const searchInputRef = useRef(null);
+
+	// Close dropdown when clicking outside
+	useEffect(() => {
+		const handleClickOutside = (event) => {
+			if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+				setIsDropdownOpen(false);
+			}
+		};
+
+		document.addEventListener("mousedown", handleClickOutside);
+		return () => document.removeEventListener("mousedown", handleClickOutside);
+	}, []);
+
+	// Focus search input when opened
+	useEffect(() => {
+		if (isSearchOpen && searchInputRef.current) {
+			searchInputRef.current.focus();
+		}
+	}, [isSearchOpen]);
+
+	// Get current breadcrumb (last item)
+	const currentBreadcrumb = breadcrumbs[breadcrumbs.length - 1];
+
+	return (
+		<div
+			style={{
+				backgroundColor: colors.background.white,
+				borderBottom: border.default,
+				padding: `${spacing.sm} ${spacing.md}`,
+			}}
+		>
+			{/* Main header row */}
+			<div
+				style={{
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "space-between",
+					gap: spacing.sm,
+				}}
+			>
+				{/* Left side: Navigation + Breadcrumb dropdown */}
+				<div
+					style={{
+						display: "flex",
+						alignItems: "center",
+						gap: spacing.xs,
+						flex: 1,
+						minWidth: 0,
+					}}
+				>
+					{/* Navigation buttons - only shown when showNavigation is true */}
+					{showNavigation && (
+						<>
+							{/* Back button */}
+							<button
+								onClick={onBack}
+								disabled={!canGoBack}
+								className="user-guide-header-icon-button"
+								style={{
+									display: "flex",
+									alignItems: "center",
+									justifyContent: "center",
+									width: 28,
+									height: 28,
+									backgroundColor: "transparent",
+									border: "none",
+									borderRadius: border.radius,
+									cursor: canGoBack ? "pointer" : "default",
+									color: canGoBack ? colors.text.secondary : colors.border.default,
+									flexShrink: 0,
+									opacity: canGoBack ? 1 : 0.5,
+								}}
+								title="Back"
+							>
+								<ChevronLeft
+									size={16}
+									strokeWidth={1.5}
+								/>
+							</button>
+
+							{/* Forward button */}
+							<button
+								onClick={onForward}
+								disabled={!canGoForward}
+								className="user-guide-header-icon-button"
+								style={{
+									display: "flex",
+									alignItems: "center",
+									justifyContent: "center",
+									width: 28,
+									height: 28,
+									backgroundColor: "transparent",
+									border: "none",
+									borderRadius: border.radius,
+									cursor: canGoForward ? "pointer" : "default",
+									color: canGoForward ? colors.text.secondary : colors.border.default,
+									flexShrink: 0,
+									opacity: canGoForward ? 1 : 0.5,
+								}}
+								title="Forward"
+							>
+								<ChevronRight
+									size={16}
+									strokeWidth={1.5}
+								/>
+							</button>
+
+							{/* Home button */}
+							<button
+								onClick={breadcrumbs.length > 1 ? onHomeClick : undefined}
+								disabled={breadcrumbs.length <= 1}
+								className="user-guide-header-icon-button"
+								style={{
+									display: "flex",
+									alignItems: "center",
+									justifyContent: "center",
+									width: 28,
+									height: 28,
+									backgroundColor: "transparent",
+									border: "none",
+									borderRadius: border.radius,
+									cursor: breadcrumbs.length > 1 ? "pointer" : "default",
+									color:
+										breadcrumbs.length > 1
+											? colors.text.secondary
+											: colors.border.default,
+									flexShrink: 0,
+									opacity: breadcrumbs.length > 1 ? 1 : 0.5,
+								}}
+								title="Home"
+							>
+								<Home
+									size={16}
+									strokeWidth={1.5}
+								/>
+							</button>
+						</>
+					)}
+
+					{/* Breadcrumb dropdown */}
+					<div
+						ref={dropdownRef}
+						style={{ position: "relative", flex: 1, minWidth: 0 }}
+					>
+						<button
+							onClick={() => breadcrumbs.length > 1 && setIsDropdownOpen(!isDropdownOpen)}
+							className="user-guide-breadcrumb-dropdown-trigger"
+							style={{
+								display: "flex",
+								alignItems: "center",
+								gap: 4,
+								padding: "4px 8px",
+								backgroundColor: "transparent",
+								border: "none",
+								borderRadius: border.radius,
+								cursor: breadcrumbs.length > 1 ? "pointer" : "default",
+								maxWidth: "100%",
+							}}
+						>
+							<span
+								style={{
+									fontFamily: typography.fontFamily.sans,
+									fontSize: typography.fontSize.sm,
+									fontWeight: typography.fontWeight.medium,
+									color: colors.text.primary,
+									whiteSpace: "nowrap",
+									overflow: "hidden",
+									textOverflow: "ellipsis",
+								}}
+							>
+								{currentBreadcrumb?.label || "User guide"}
+							</span>
+							{breadcrumbs.length > 1 && (
+								<ChevronDown
+									size={14}
+									strokeWidth={1.5}
+									color={colors.text.muted}
+									style={{
+										flexShrink: 0,
+										transform: isDropdownOpen ? "rotate(180deg)" : "rotate(0)",
+										transition: "transform 150ms ease",
+									}}
+								/>
+							)}
+						</button>
+
+						{/* Dropdown menu */}
+						{isDropdownOpen && breadcrumbs.length > 1 && (
+							<div
+								className="user-guide-breadcrumb-dropdown"
+								style={{
+									position: "absolute",
+									top: "100%",
+									left: 0,
+									marginTop: 4,
+									backgroundColor: colors.background.white,
+									border: border.default,
+									borderRadius: border.radius,
+									boxShadow: isDark
+										? "0 4px 12px rgba(0, 0, 0, 0.3)"
+										: "0 4px 12px rgba(0, 0, 0, 0.1)",
+									minWidth: 180,
+									maxWidth: 280,
+									zIndex: 100,
+									overflow: "hidden",
+								}}
+							>
+								{breadcrumbs.slice(0, -1).map((item, index) => (
+									<button
+										key={index}
+										onClick={() => {
+											item.onClick();
+											setIsDropdownOpen(false);
+										}}
+										className="user-guide-breadcrumb-item"
+										style={{
+											display: "block",
+											width: "100%",
+											padding: "10px 14px",
+											backgroundColor: "transparent",
+											border: "none",
+											textAlign: "left",
+											cursor: "pointer",
+											fontFamily: typography.fontFamily.sans,
+											fontSize: typography.fontSize.sm,
+											color: colors.text.primary,
+										}}
+									>
+										{item.label}
+									</button>
+								))}
+							</div>
+						)}
+					</div>
+				</div>
+
+				{/* Right side: Actions */}
+				<div
+					style={{
+						display: "flex",
+						alignItems: "center",
+						gap: spacing.xs,
+						flexShrink: 0,
+					}}
+				>
+					{/* Open in new tab - only shown when showOpenInNewTab is true */}
+					{showOpenInNewTab && (
+						<button
+							onClick={onOpenInNewTab}
+							className="user-guide-header-icon-button"
+							style={{
+								display: "flex",
+								alignItems: "center",
+								justifyContent: "center",
+								width: 28,
+								height: 28,
+								backgroundColor: "transparent",
+								border: "none",
+								borderRadius: border.radius,
+								cursor: "pointer",
+								color: colors.text.secondary,
+							}}
+							title="Open in new tab"
+						>
+							<ExternalLink
+								size={16}
+								strokeWidth={1.5}
+							/>
+						</button>
+					)}
+
+					{/* Search toggle */}
+					<button
+						onClick={onSearchToggle}
+						className={`user-guide-header-icon-button ${isSearchOpen ? "active" : ""}`}
+						style={{
+							display: "flex",
+							alignItems: "center",
+							justifyContent: "center",
+							width: 28,
+							height: 28,
+							backgroundColor: isSearchOpen ? colors.background.alt : "transparent",
+							border: "none",
+							borderRadius: border.radius,
+							cursor: "pointer",
+							color: isSearchOpen ? colors.brand.primary : colors.text.secondary,
+						}}
+						title="Search"
+					>
+						<Search
+							size={16}
+							strokeWidth={1.5}
+						/>
+					</button>
+
+					{/* Close button */}
+					<button
+						onClick={onClose}
+						className="user-guide-header-icon-button"
+						style={{
+							display: "flex",
+							alignItems: "center",
+							justifyContent: "center",
+							width: 28,
+							height: 28,
+							backgroundColor: "transparent",
+							border: "none",
+							borderRadius: border.radius,
+							cursor: "pointer",
+							color: colors.text.secondary,
+						}}
+						title="Close"
+					>
+						<X
+							size={16}
+							strokeWidth={1.5}
+						/>
+					</button>
+				</div>
+			</div>
+
+			{/* Search input (collapsible) */}
+			{isSearchOpen && (
+				<div style={{ marginTop: spacing.sm }}>
+					<div style={{ position: "relative" }}>
+						<Search
+							size={14}
+							strokeWidth={1.5}
+							color={colors.text.muted}
+							style={{
+								position: "absolute",
+								left: 10,
+								top: "50%",
+								transform: "translateY(-50%)",
+								pointerEvents: "none",
+							}}
+						/>
+						<input
+							ref={searchInputRef}
+							type="text"
+							placeholder="Search articles..."
+							value={searchQuery}
+							onChange={(e) => onSearchChange(e.target.value)}
+							className="user-guide-search-input"
+							style={{
+								width: "100%",
+								height: 32,
+								fontSize: typography.fontSize.sm,
+								fontFamily: typography.fontFamily.sans,
+								backgroundColor: colors.background.alt,
+								borderRadius: border.radius,
+								border: border.default,
+								paddingLeft: 32,
+								paddingRight: 12,
+								boxSizing: "border-box",
+								color: colors.text.primary,
+							}}
+						/>
+					</div>
+				</div>
+			)}
+		</div>
+	);
+};
+
+export default SidebarHeader;

client/src/Components/v1/UserGuide/SidebarWrapper.css

@@ -0,0 +1,11 @@
+/* SidebarWrapper styles (Dark theme) */
+
+.user-guide-sidebar-container {
+	box-shadow: -2px 0 8px rgba(0, 0, 0, 0.3);
+}
+
+/* Push main content when sidebar is open */
+body.user-guide-sidebar-open .home-content-wrapper {
+	margin-right: var(--help-sidebar-padding, 440px);
+	transition: margin-right 300ms ease-in-out;
+}

client/src/Components/v1/UserGuide/SidebarWrapper.jsx

@@ -0,0 +1,485 @@
+import { useState, useEffect, useCallback, useRef } from "react";
+import { useUserGuideTheme } from "./styles/useUserGuideTheme";
+import TabBar from "./TabBar";
+import SidebarHeader from "./SidebarHeader";
+import UserGuideLanding from "./UserGuideLanding";
+import CollectionPage from "./CollectionPage";
+import ArticlePage from "./ArticlePage";
+import ContentRenderer from "./ContentRenderer";
+import HelpSection from "./HelpSection";
+import SearchResults from "./SearchResults";
+import { getCollection, getArticle } from "./content/userGuideConfig";
+import { getArticleContent } from "./content";
+import { extractToc } from "./content/contentTypes";
+import {
+	useUserGuideSidebarContext,
+	DEFAULT_CONTENT_WIDTH,
+} from "./UserGuideSidebarContext";
+import "./SidebarWrapper.css";
+
+const STORAGE_KEY = "checkmate-sidebar-state";
+const MIN_CONTENT_WIDTH = DEFAULT_CONTENT_WIDTH;
+const MAX_CONTENT_WIDTH = DEFAULT_CONTENT_WIDTH * 2; // 100% wider
+
+const SidebarWrapper = ({ isOpen, onClose, onOpen, initialPath, onOpenInNewTab }) => {
+	const { setContentWidth: setContextContentWidth } = useUserGuideSidebarContext();
+	const { colors, border } = useUserGuideTheme();
+	const [activeTab, setActiveTab] = useState("user-guide");
+	const [collectionId, setCollectionId] = useState(undefined);
+	const [articleId, setArticleId] = useState(undefined);
+	const [searchQuery, setSearchQuery] = useState("");
+	const [isSearchOpen, setIsSearchOpen] = useState(false);
+	const [contentWidth, setContentWidthLocal] = useState(DEFAULT_CONTENT_WIDTH);
+	const [isResizing, setIsResizing] = useState(false);
+	const [isHoveringHandle, setIsHoveringHandle] = useState(false);
+	const [mouseY, setMouseY] = useState(0);
+	const resizeRef = useRef(null);
+	const handleRef = useRef(null);
+
+	// Sync content width with context whenever it changes
+	const setContentWidth = useCallback(
+		(width) => {
+			setContentWidthLocal(width);
+			setContextContentWidth(width);
+		},
+		[setContextContentWidth]
+	);
+
+	// Initialize context with current width on mount
+	useEffect(() => {
+		setContextContentWidth(DEFAULT_CONTENT_WIDTH);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, []); // Only run once on mount
+
+	// Navigation history
+	const [history, setHistory] = useState([
+		{ collectionId: undefined, articleId: undefined },
+	]);
+	const [historyIndex, setHistoryIndex] = useState(0);
+	const isNavigatingRef = useRef(false);
+
+	// Parse initial path on mount
+	useEffect(() => {
+		if (initialPath) {
+			const parts = initialPath.split("/");
+			if (parts.length >= 1 && parts[0]) {
+				setCollectionId(parts[0]);
+				if (parts.length >= 2 && parts[1]) {
+					setArticleId(parts[1]);
+				}
+			}
+		}
+	}, [initialPath]);
+
+	// Persist sidebar state to localStorage
+	useEffect(() => {
+		if (isOpen) {
+			const state = { activeTab, collectionId, articleId };
+			localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
+		}
+	}, [isOpen, activeTab, collectionId, articleId]);
+
+	// Restore state from localStorage on mount
+	useEffect(() => {
+		const savedState = localStorage.getItem(STORAGE_KEY);
+		if (savedState && !initialPath) {
+			try {
+				const {
+					activeTab: savedTab,
+					collectionId: savedCollection,
+					articleId: savedArticle,
+				} = JSON.parse(savedState);
+				if (savedTab) setActiveTab(savedTab);
+				if (savedCollection) setCollectionId(savedCollection);
+				if (savedArticle) setArticleId(savedArticle);
+			} catch (e) {
+				// Ignore parse errors
+			}
+		}
+	}, [initialPath]);
+
+	// Track navigation changes in history
+	useEffect(() => {
+		if (isNavigatingRef.current) {
+			isNavigatingRef.current = false;
+			return;
+		}
+		// Only track if this is a new navigation (not from back/forward)
+		const currentEntry = history[historyIndex];
+		if (
+			currentEntry?.collectionId !== collectionId ||
+			currentEntry?.articleId !== articleId
+		) {
+			// Truncate forward history and add new entry
+			const newHistory = [
+				...history.slice(0, historyIndex + 1),
+				{ collectionId, articleId },
+			];
+			setHistory(newHistory);
+			setHistoryIndex(newHistory.length - 1);
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [collectionId, articleId]);
+
+	// Navigation handlers
+	const handleNavigate = useCallback((newCollectionId, newArticleId) => {
+		setCollectionId(newCollectionId);
+		setArticleId(newArticleId);
+	}, []);
+
+	const handleBackToHome = useCallback(() => {
+		setCollectionId(undefined);
+		setArticleId(undefined);
+	}, []);
+
+	// Back/Forward navigation
+	const canGoBack = historyIndex > 0;
+	const canGoForward = historyIndex < history.length - 1;
+
+	const handleBack = useCallback(() => {
+		if (historyIndex > 0) {
+			isNavigatingRef.current = true;
+			const prevIndex = historyIndex - 1;
+			const prevEntry = history[prevIndex];
+			setHistoryIndex(prevIndex);
+			setCollectionId(prevEntry.collectionId);
+			setArticleId(prevEntry.articleId);
+		}
+	}, [historyIndex, history]);
+
+	const handleForward = useCallback(() => {
+		if (historyIndex < history.length - 1) {
+			isNavigatingRef.current = true;
+			const nextIndex = historyIndex + 1;
+			const nextEntry = history[nextIndex];
+			setHistoryIndex(nextIndex);
+			setCollectionId(nextEntry.collectionId);
+			setArticleId(nextEntry.articleId);
+		}
+	}, [historyIndex, history]);
+
+	const handleBackToCollection = useCallback(() => {
+		setArticleId(undefined);
+	}, []);
+
+	const handleHomeClick = useCallback(() => {
+		setCollectionId(undefined);
+		setArticleId(undefined);
+	}, []);
+
+	// Get current collection and article
+	const collection = collectionId ? getCollection(collectionId) : undefined;
+	const article =
+		collectionId && articleId ? getArticle(collectionId, articleId) : undefined;
+
+	// Get prev/next articles for navigation
+	const getAdjacentArticles = () => {
+		if (!collection || !articleId) return { prev: undefined, next: undefined };
+		const currentIndex = collection.articles.findIndex((a) => a.id === articleId);
+		return {
+			prev: currentIndex > 0 ? collection.articles[currentIndex - 1] : undefined,
+			next:
+				currentIndex < collection.articles.length - 1
+					? collection.articles[currentIndex + 1]
+					: undefined,
+		};
+	};
+
+	const { prev: prevArticle, next: nextArticle } = getAdjacentArticles();
+
+	// Get article content
+	const articleContent =
+		collectionId && articleId ? getArticleContent(collectionId, articleId) : undefined;
+
+	// Auto-generate TOC from content headings
+	const tocItems = articleContent ? extractToc(articleContent.blocks) : undefined;
+
+	// Build breadcrumb items for dropdown
+	const buildBreadcrumbs = () => {
+		let items = [];
+		switch (activeTab) {
+			case "user-guide":
+				items = [{ label: "User guide", onClick: handleHomeClick }];
+				if (collection) {
+					items.push({ label: collection.title, onClick: () => setArticleId(undefined) });
+				}
+				if (article) {
+					items.push({ label: article.title, onClick: () => {} });
+				}
+				return items;
+			default:
+				return [{ label: "Help", onClick: () => {} }];
+		}
+	};
+
+	// Handle "Open in new tab"
+	const handleOpenInNewTab = () => {
+		let path = "https://bluewavelabs.gitbook.io/checkmate";
+		if (onOpenInNewTab) {
+			onOpenInNewTab();
+		} else {
+			window.open(path, "_blank", "noopener,noreferrer");
+		}
+	};
+
+	// Clear search and close search bar
+	const handleClearSearch = useCallback(() => {
+		setSearchQuery("");
+		setIsSearchOpen(false);
+	}, []);
+
+	// Render User Guide content
+	const renderUserGuideContent = () => {
+		// Show search results when search is active
+		if (isSearchOpen && searchQuery.trim().length > 0) {
+			return (
+				<SearchResults
+					query={searchQuery}
+					onNavigate={(colId, artId) => {
+						handleNavigate(colId, artId);
+						handleClearSearch();
+					}}
+					onClearSearch={handleClearSearch}
+				/>
+			);
+		}
+
+		if (collection && article) {
+			return (
+				<ArticlePage
+					collection={collection}
+					article={article}
+					onBack={handleBackToCollection}
+					onBackToHome={handleBackToHome}
+					prevArticle={prevArticle}
+					nextArticle={nextArticle}
+					onPrevArticle={
+						prevArticle ? () => handleNavigate(collectionId, prevArticle.id) : undefined
+					}
+					onNextArticle={
+						nextArticle ? () => handleNavigate(collectionId, nextArticle.id) : undefined
+					}
+					tocItems={tocItems}
+					mode="in-app"
+				>
+					{articleContent && (
+						<ContentRenderer
+							content={articleContent}
+							onNavigate={handleNavigate}
+						/>
+					)}
+				</ArticlePage>
+			);
+		}
+
+		if (collection) {
+			return (
+				<CollectionPage
+					collection={collection}
+					onArticleClick={(id) => handleNavigate(collectionId, id)}
+				/>
+			);
+		}
+
+		return (
+			<UserGuideLanding
+				onNavigate={handleNavigate}
+				searchQuery={searchQuery}
+				onSearchChange={setSearchQuery}
+				mode="in-app"
+			/>
+		);
+	};
+
+	const contentArea = (tabValue) => {
+		switch (tabValue) {
+			case "user-guide":
+				return renderUserGuideContent();
+			default:
+				return <HelpSection />;
+		}
+	};
+
+	// Handle tab click - open sidebar if closed, close if clicking active tab, or switch tab
+	const handleTabClick = (tab) => {
+		if (!isOpen) {
+			onOpen();
+			setActiveTab(tab);
+		} else if (activeTab === tab) {
+			// Clicking the already-active tab closes the sidebar
+			onClose();
+		} else {
+			// Clicking a different tab switches to it
+			setActiveTab(tab);
+		}
+	};
+
+	// Resize handlers
+	const handleResizeStart = useCallback(
+		(e) => {
+			e.preventDefault();
+			setIsResizing(true);
+			resizeRef.current = { startX: e.clientX, startWidth: contentWidth };
+		},
+		[contentWidth]
+	);
+
+	const handleResizeMove = useCallback(
+		(e) => {
+			if (!isResizing || !resizeRef.current) return;
+
+			const deltaX = resizeRef.current.startX - e.clientX;
+			const newWidth = Math.min(
+				MAX_CONTENT_WIDTH,
+				Math.max(MIN_CONTENT_WIDTH, resizeRef.current.startWidth + deltaX)
+			);
+			setContentWidth(newWidth);
+		},
+		[isResizing, setContentWidth]
+	);
+
+	const handleResizeEnd = useCallback(() => {
+		setIsResizing(false);
+		setIsHoveringHandle(false);
+		resizeRef.current = null;
+	}, []);
+
+	// Add/remove resize event listeners
+	useEffect(() => {
+		if (isResizing) {
+			document.addEventListener("mousemove", handleResizeMove);
+			document.addEventListener("mouseup", handleResizeEnd);
+			document.body.style.cursor = "ew-resize";
+			document.body.style.userSelect = "none";
+		}
+		return () => {
+			document.removeEventListener("mousemove", handleResizeMove);
+			document.removeEventListener("mouseup", handleResizeEnd);
+			document.body.style.cursor = "";
+			document.body.style.userSelect = "";
+		};
+	}, [isResizing, handleResizeMove, handleResizeEnd]);
+
+	return (
+		<div
+			className="user-guide-sidebar-container"
+			style={{
+				position: "fixed",
+				top: 0,
+				right: 0,
+				height: "100vh",
+				display: "flex",
+				zIndex: 1100,
+			}}
+		>
+			{/* Resize Handle - positioned absolutely on the left edge */}
+			<div
+				ref={handleRef}
+				onMouseDown={handleResizeStart}
+				onMouseEnter={() => setIsHoveringHandle(true)}
+				onMouseLeave={() => !isResizing && setIsHoveringHandle(false)}
+				onMouseMove={(e) => {
+					if (handleRef.current) {
+						const rect = handleRef.current.getBoundingClientRect();
+						setMouseY(e.clientY - rect.top);
+					}
+				}}
+				style={{
+					position: "absolute",
+					left: 0,
+					top: 0,
+					width: 8,
+					height: "100%",
+					cursor: "ew-resize",
+					zIndex: 20,
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "flex-start",
+				}}
+			>
+				{/* Visual indicator line */}
+				<div
+					style={{
+						width: isResizing ? 2 : 1,
+						height: "100%",
+						backgroundColor:
+							isResizing || isHoveringHandle ? "#4CAF93" : colors.border.default,
+						transition: isResizing ? "none" : "all 150ms ease",
+						position: "relative",
+					}}
+				>
+					{/* Grab indicator follows mouse */}
+					{(isHoveringHandle || isResizing) && (
+						<div
+							style={{
+								position: "absolute",
+								left: -1,
+								top: mouseY - 10,
+								width: 3,
+								height: 20,
+								backgroundColor: "#555",
+								borderRadius: 1,
+							}}
+						/>
+					)}
+				</div>
+			</div>
+
+			{/* Tab Bar - Always visible */}
+			<TabBar
+				activeTab={isOpen ? activeTab : undefined}
+				onTabChange={handleTabClick}
+			/>
+
+			{/* Main Sidebar Content - Slides in/out */}
+			<div
+				style={{
+					width: isOpen ? contentWidth : 0,
+					height: "100%",
+					backgroundColor: colors.background.white,
+					borderLeft: isOpen ? border.default : "none",
+					display: "flex",
+					flexDirection: "column",
+					overflow: "hidden",
+					transition: isResizing ? "none" : "width 300ms ease-in-out",
+					position: "relative",
+				}}
+			>
+				{isOpen && (
+					<>
+						{/* Header */}
+						<SidebarHeader
+							showOpenInNewTab={activeTab === "user-guide"}
+							showNavigation={activeTab === "user-guide"}
+							breadcrumbs={buildBreadcrumbs()}
+							onHomeClick={handleHomeClick}
+							onBack={handleBack}
+							onForward={handleForward}
+							canGoBack={canGoBack}
+							canGoForward={canGoForward}
+							onClose={onClose}
+							onOpenInNewTab={handleOpenInNewTab}
+							isSearchOpen={isSearchOpen}
+							onSearchToggle={() => setIsSearchOpen(!isSearchOpen)}
+							searchQuery={searchQuery}
+							onSearchChange={setSearchQuery}
+						/>
+
+						{/* Content Area */}
+						<div
+							style={{
+								flex: 1,
+								overflowY: "auto",
+								backgroundColor: colors.background.alt,
+							}}
+						>
+							{contentArea(activeTab)}
+						</div>
+					</>
+				)}
+			</div>
+		</div>
+	);
+};
+
+export default SidebarWrapper;

client/src/Components/v1/UserGuide/TabBar.css

@@ -0,0 +1,13 @@
+/* TabBar styles */
+
+.user-guide-tab-item {
+	transition: all 150ms ease;
+}
+
+.user-guide-tab-item:hover {
+	background-color: rgba(255, 255, 255, 0.05);
+}
+
+.user-guide-tab-item.active:hover {
+	background-color: #1a1a1a;
+}

client/src/Components/v1/UserGuide/TabBar.jsx

@@ -0,0 +1,96 @@
+import { BookOpen, HelpCircle } from "lucide-react";
+import { useUserGuideTheme } from "./styles/useUserGuideTheme";
+import "./TabBar.css";
+
+const TabItem = ({ label, icon, isActive, onClick, colors, typography }) => {
+	return (
+		<div
+			onClick={onClick}
+			className={`user-guide-tab-item ${isActive ? "active" : ""}`}
+			style={{
+				display: "flex",
+				flexDirection: "column",
+				alignItems: "center",
+				justifyContent: "center",
+				padding: "16px 8px",
+				cursor: "pointer",
+				backgroundColor: isActive ? colors.background.white : "transparent",
+				borderLeft: isActive
+					? `2px solid ${colors.brand.primary}`
+					: "2px solid transparent",
+				borderBottom: `1px solid ${colors.border.default}`,
+			}}
+		>
+			<div
+				style={{
+					color: isActive ? colors.brand.primary : colors.text.muted,
+					marginBottom: 8,
+				}}
+			>
+				{icon}
+			</div>
+			<span
+				style={{
+					writingMode: "vertical-rl",
+					textOrientation: "mixed",
+					fontFamily: typography.fontFamily.sans,
+					fontSize: 12,
+					fontWeight: typography.fontWeight.normal,
+					color: isActive ? colors.brand.primary : colors.text.muted,
+					letterSpacing: "0.5px",
+				}}
+			>
+				{label}
+			</span>
+		</div>
+	);
+};
+
+const TabBar = ({ activeTab, onTabChange }) => {
+	const { colors, typography } = useUserGuideTheme();
+
+	return (
+		<div
+			style={{
+				width: 40,
+				height: "100%",
+				backgroundColor: colors.background.sidebar,
+				borderLeft: `1px solid ${colors.border.default}`,
+				display: "flex",
+				flexDirection: "column",
+				alignItems: "stretch",
+			}}
+		>
+			<TabItem
+				id="user-guide"
+				label="User guide"
+				icon={
+					<BookOpen
+						size={18}
+						strokeWidth={1.5}
+					/>
+				}
+				isActive={activeTab === "user-guide"}
+				onClick={() => onTabChange("user-guide")}
+				colors={colors}
+				typography={typography}
+			/>
+			<TabItem
+				id="help"
+				label="Help"
+				icon={
+					<HelpCircle
+						size={18}
+						strokeWidth={1.5}
+					/>
+				}
+				isActive={activeTab === "help"}
+				onClick={() => onTabChange("help")}
+				colors={colors}
+				typography={typography}
+			/>
+		</div>
+	);
+};
+
+export default TabBar;

client/src/Components/v1/UserGuide/UserGuideLanding.css

@@ -0,0 +1,39 @@
+/* UserGuideLanding styles - hover states */
+
+/* Collection card hover */
+.user-guide-collection-card {
+	transition: all 150ms ease;
+}
+
+.user-guide-collection-card:hover {
+	border-color: rgba(21, 112, 239, 0.3) !important;
+	background-color: rgba(21, 112, 239, 0.02) !important;
+	box-shadow: 0px 2px 8px -2px rgba(0, 0, 0, 0.08);
+}
+
+[data-mui-color-scheme="dark"] .user-guide-collection-card:hover {
+	border-color: rgba(21, 112, 239, 0.5) !important;
+	background-color: rgba(21, 112, 239, 0.05) !important;
+	box-shadow: 0px 4px 16px -4px rgba(0, 0, 0, 0.4);
+}
+
+/* Fast find item hover */
+.user-guide-fast-find-item {
+	transition: all 150ms ease;
+}
+
+.user-guide-fast-find-item:hover {
+	background-color: rgba(0, 0, 0, 0.04);
+}
+
+[data-mui-color-scheme="dark"] .user-guide-fast-find-item:hover {
+	background-color: rgba(255, 255, 255, 0.05);
+}
+
+.user-guide-fast-find-item .arrow-icon {
+	transition: all 150ms ease;
+}
+
+.user-guide-fast-find-item:hover .arrow-icon {
+	color: #1570ef;
+}

client/src/Components/v1/UserGuide/UserGuideLanding.jsx

@@ -0,0 +1,214 @@
+import {
+	ArrowRight,
+	Rocket,
+	Globe,
+	Gauge,
+	Server,
+	Bell,
+	AlertTriangle,
+	Settings,
+	Wifi,
+	Wrench,
+	Users,
+} from "lucide-react";
+import { collections, fastFinds, getCollection } from "./content/userGuideConfig";
+import { useUserGuideTheme } from "./styles/useUserGuideTheme";
+import "./UserGuideLanding.css";
+
+// Map icon names to actual Lucide components
+const iconMap = {
+	Rocket,
+	Globe,
+	Gauge,
+	Server,
+	Bell,
+	AlertTriangle,
+	Settings,
+	Wifi,
+	Wrench,
+	Users,
+};
+
+const UserGuideLanding = ({
+	onNavigate,
+	searchQuery,
+	onSearchChange,
+	mode = "in-app",
+}) => {
+	const { colors, typography, spacing, border } = useUserGuideTheme();
+	const isInApp = mode === "in-app";
+
+	return (
+		<div style={{ minHeight: "100%", backgroundColor: colors.background.alt }}>
+			{/* Main Content */}
+			<div
+				style={{
+					maxWidth: isInApp ? "100%" : 1200,
+					margin: "0 auto",
+					padding: isInApp ? spacing.lg : `${spacing["3xl"]} ${spacing["3xl"]}`,
+				}}
+			>
+				{/* Collections Grid */}
+				<h2
+					style={{
+						fontFamily: typography.fontFamily.sans,
+						fontSize: isInApp ? typography.fontSize.lg : typography.fontSize.xl,
+						fontWeight: typography.fontWeight.semibold,
+						color: colors.text.primary,
+						marginBottom: isInApp ? spacing.md : spacing.xl,
+						marginTop: 0,
+					}}
+				>
+					Browse by topic
+				</h2>
+
+				<div
+					style={{
+						display: "grid",
+						gridTemplateColumns: isInApp
+							? "1fr"
+							: "repeat(auto-fill, minmax(340px, 1fr))",
+						gap: isInApp ? spacing.md : spacing.lg,
+						marginBottom: isInApp ? spacing.xl : spacing["4xl"],
+					}}
+				>
+					{collections.map((collection) => {
+						const IconComponent = iconMap[collection.icon] || Rocket;
+						return (
+							<div
+								key={collection.id}
+								onClick={() => onNavigate(collection.id)}
+								className="user-guide-collection-card"
+								style={{
+									backgroundColor: colors.background.white,
+									border: border.default,
+									borderRadius: border.radius,
+									padding: spacing.lg,
+									cursor: "pointer",
+								}}
+							>
+								<div
+									style={{ display: "flex", alignItems: "flex-start", gap: spacing.md }}
+								>
+									<IconComponent
+										size={20}
+										strokeWidth={1.5}
+										color={colors.brand.primary}
+									/>
+									<div style={{ flex: 1 }}>
+										<div
+											style={{
+												display: "flex",
+												alignItems: "center",
+												justifyContent: "space-between",
+												marginBottom: spacing.xs,
+											}}
+										>
+											<span
+												style={{
+													fontFamily: typography.fontFamily.sans,
+													fontSize: typography.fontSize.base,
+													fontWeight: typography.fontWeight.semibold,
+													color: colors.text.primary,
+												}}
+											>
+												{collection.title}
+											</span>
+											<span
+												style={{
+													fontSize: typography.fontSize.xs,
+													color: colors.text.secondary,
+													backgroundColor: colors.background.alt,
+													padding: "2px 6px",
+													borderRadius: border.radius,
+												}}
+											>
+												{collection.articleCount} articles
+											</span>
+										</div>
+										<span
+											style={{
+												fontFamily: typography.fontFamily.sans,
+												fontSize: typography.fontSize.base,
+												color: colors.text.secondary,
+												lineHeight: typography.lineHeight.normal,
+												display: "block",
+											}}
+										>
+											{collection.description}
+										</span>
+									</div>
+								</div>
+							</div>
+						);
+					})}
+				</div>
+
+				{/* About our docs - Only shown in in-app mode */}
+				{isInApp && (
+					<div
+						style={{
+							backgroundColor: colors.background.white,
+							border: border.default,
+							borderRadius: border.radius,
+							padding: spacing.lg,
+						}}
+					>
+						<h3
+							style={{
+								fontFamily: typography.fontFamily.sans,
+								fontSize: typography.fontSize.base,
+								fontWeight: typography.fontWeight.semibold,
+								color: colors.text.primary,
+								marginBottom: spacing.md,
+								marginTop: 0,
+							}}
+						>
+							About our docs
+						</h3>
+						<p
+							style={{
+								fontFamily: typography.fontFamily.sans,
+								fontSize: typography.fontSize.sm,
+								color: colors.text.secondary,
+								lineHeight: typography.lineHeight.normal,
+								margin: 0,
+								marginBottom: spacing.md,
+							}}
+						>
+							There are a few ways to explore our docs:
+						</p>
+
+						<div style={{ marginBottom: spacing.md }}>
+							<h4
+								style={{
+									fontFamily: typography.fontFamily.sans,
+									fontSize: typography.fontSize.sm,
+									fontWeight: typography.fontWeight.semibold,
+									color: colors.text.primary,
+									marginBottom: spacing.xs,
+									marginTop: 0,
+								}}
+							>
+								In the product
+							</h4>
+							<p
+								style={{
+									fontFamily: typography.fontFamily.sans,
+									fontSize: typography.fontSize.sm,
+									color: colors.text.secondary,
+									lineHeight: typography.lineHeight.normal,
+									margin: 0,
+								}}
+							>
+								Look for help icons and tooltips throughout the interface.
+							</p>
+						</div>
+					</div>
+				)}
+			</div>
+		</div>
+	);
+};
+
+export default UserGuideLanding;

client/src/Components/v1/UserGuide/UserGuideSidebarContext.jsx

@@ -0,0 +1,102 @@
+import { createContext, useContext, useState, useCallback, useEffect } from "react";
+
+const SIDEBAR_STATE_KEY = "checkmate-sidebar-open";
+
+// Constants for sidebar dimensions
+export const TAB_BAR_WIDTH = 41; // 40px width + 1px border
+export const DEFAULT_CONTENT_WIDTH = 400;
+// Gap when sidebar is closed (need more space since tab bar is narrow)
+export const CLOSED_GAP = 24;
+// Gap when sidebar is open (less needed since content edge is clear)
+export const OPEN_GAP = 8;
+
+const UserGuideSidebarContext = createContext(null);
+
+export const UserGuideSidebarProvider = ({ children }) => {
+	const [isOpen, setIsOpen] = useState(() => {
+		if (typeof window === "undefined") return false;
+		const saved = localStorage.getItem(SIDEBAR_STATE_KEY);
+		return saved === "true";
+	});
+
+	const [currentPath, setCurrentPath] = useState(undefined);
+	const [contentWidth, setContentWidth] = useState(DEFAULT_CONTENT_WIDTH);
+
+	// Calculate total sidebar width and required padding
+	const totalSidebarWidth = isOpen ? TAB_BAR_WIDTH + contentWidth : TAB_BAR_WIDTH;
+	const gap = isOpen ? OPEN_GAP : CLOSED_GAP;
+	const requiredPaddingRight = totalSidebarWidth + gap;
+
+	// Set CSS custom properties on document root for global access
+	useEffect(() => {
+		if (typeof document === "undefined") return;
+
+		const root = document.documentElement;
+		root.style.setProperty("--help-sidebar-width", `${totalSidebarWidth}px`);
+		root.style.setProperty("--help-sidebar-padding", `${requiredPaddingRight}px`);
+	}, [totalSidebarWidth, requiredPaddingRight]);
+
+	// Update body class for content push effect
+	useEffect(() => {
+		if (typeof document === "undefined") return;
+
+		if (isOpen) {
+			document.body.classList.add("user-guide-sidebar-open");
+		} else {
+			document.body.classList.remove("user-guide-sidebar-open");
+		}
+
+		return () => {
+			document.body.classList.remove("user-guide-sidebar-open");
+		};
+	}, [isOpen]);
+
+	// Persist state to localStorage
+	useEffect(() => {
+		if (typeof window === "undefined") return;
+		localStorage.setItem(SIDEBAR_STATE_KEY, String(isOpen));
+	}, [isOpen]);
+
+	const open = useCallback((path) => {
+		setCurrentPath(path);
+		setIsOpen(true);
+	}, []);
+
+	const close = useCallback(() => {
+		setIsOpen(false);
+	}, []);
+
+	const toggle = useCallback(() => {
+		setIsOpen((prev) => !prev);
+	}, []);
+
+	return (
+		<UserGuideSidebarContext.Provider
+			value={{
+				isOpen,
+				open,
+				close,
+				toggle,
+				currentPath,
+				contentWidth,
+				setContentWidth,
+				totalSidebarWidth,
+				requiredPaddingRight,
+			}}
+		>
+			{children}
+		</UserGuideSidebarContext.Provider>
+	);
+};
+
+export const useUserGuideSidebarContext = () => {
+	const context = useContext(UserGuideSidebarContext);
+	if (!context) {
+		throw new Error(
+			"useUserGuideSidebarContext must be used within a UserGuideSidebarProvider"
+		);
+	}
+	return context;
+};
+
+export default UserGuideSidebarContext;

client/src/Components/v1/UserGuide/content/contentTypes.js

@@ -0,0 +1,176 @@
+// Content block types for the templatic article system
+
+/**
+ * @typedef {'heading' | 'paragraph' | 'callout' | 'bullet-list' | 'ordered-list' | 'checklist' | 'icon-cards' | 'grid-cards' | 'time-estimate' | 'info-box' | 'code' | 'requirements' | 'table' | 'image' | 'article-links'} ContentBlockType
+ */
+
+/**
+ * @typedef {Object} HeadingBlock
+ * @property {'heading'} type
+ * @property {string} id - Used for TOC anchors
+ * @property {2 | 3} level - h2 or h3
+ * @property {string} text
+ */
+
+/**
+ * @typedef {Object} ParagraphBlock
+ * @property {'paragraph'} type
+ * @property {string} text - Supports basic markdown: **bold**, *italic*, `code`
+ */
+
+/**
+ * @typedef {Object} CalloutBlock
+ * @property {'callout'} type
+ * @property {'info' | 'tip' | 'warning' | 'success'} [variant]
+ * @property {string} [title]
+ * @property {string} text
+ */
+
+/**
+ * @typedef {Object} ListItem
+ * @property {string} text
+ * @property {string} [bold] - Optional bold prefix
+ */
+
+/**
+ * @typedef {Object} BulletListBlock
+ * @property {'bullet-list'} type
+ * @property {ListItem[]} items
+ */
+
+/**
+ * @typedef {Object} OrderedListBlock
+ * @property {'ordered-list'} type
+ * @property {ListItem[]} items
+ */
+
+/**
+ * @typedef {Object} ChecklistBlock
+ * @property {'checklist'} type
+ * @property {string[]} items
+ */
+
+/**
+ * @typedef {Object} IconCardItem
+ * @property {string} icon - Icon name from lucide-react
+ * @property {string} title
+ * @property {string} description
+ */
+
+/**
+ * @typedef {Object} IconCardsBlock
+ * @property {'icon-cards'} type
+ * @property {IconCardItem[]} items
+ */
+
+/**
+ * @typedef {Object} GridCardItem
+ * @property {string} title
+ * @property {string} description
+ * @property {string} [icon]
+ */
+
+/**
+ * @typedef {Object} GridCardsBlock
+ * @property {'grid-cards'} type
+ * @property {GridCardItem[]} items
+ * @property {number} [columns]
+ */
+
+/**
+ * @typedef {Object} TimeEstimateBlock
+ * @property {'time-estimate'} type
+ * @property {string} text
+ */
+
+/**
+ * @typedef {Object} InfoBoxBlock
+ * @property {'info-box'} type
+ * @property {string} [icon]
+ * @property {string} title
+ * @property {string[]} items
+ */
+
+/**
+ * @typedef {Object} CodeBlock
+ * @property {'code'} type
+ * @property {string} code
+ * @property {string} [language]
+ */
+
+/**
+ * @typedef {Object} RequirementItem
+ * @property {string} icon
+ * @property {string} title
+ * @property {string[]} items
+ */
+
+/**
+ * @typedef {Object} RequirementsBlock
+ * @property {'requirements'} type
+ * @property {RequirementItem[]} items
+ */
+
+/**
+ * @typedef {Object} TableColumn
+ * @property {string} key
+ * @property {string} label
+ * @property {string} [width]
+ */
+
+/**
+ * @typedef {Object} TableBlock
+ * @property {'table'} type
+ * @property {TableColumn[]} columns
+ * @property {Object[]} rows
+ */
+
+/**
+ * @typedef {Object} ImageBlock
+ * @property {'image'} type
+ * @property {string} src
+ * @property {string} alt
+ * @property {string} [caption]
+ */
+
+/**
+ * @typedef {Object} ArticleLink
+ * @property {string} collectionId
+ * @property {string} articleId
+ * @property {string} title
+ * @property {string} [description]
+ */
+
+/**
+ * @typedef {Object} ArticleLinksBlock
+ * @property {'article-links'} type
+ * @property {string} [title] - e.g., "Next steps", "Related articles"
+ * @property {ArticleLink[]} items
+ */
+
+/**
+ * @typedef {Object} ArticleContent
+ * @property {ContentBlock[]} blocks
+ */
+
+/**
+ * @typedef {Object} TocItem
+ * @property {string} label
+ * @property {string} href
+ * @property {number} level
+ */
+
+/**
+ * Helper to extract TOC from content blocks
+ * @param {ContentBlock[]} blocks
+ * @returns {TocItem[]}
+ */
+export const extractToc = (blocks) => {
+	return blocks
+		.filter((block) => block.type === "heading")
+		.map((block) => ({
+			label: block.text,
+			href: `#${block.id}`,
+			level: block.level,
+		}));
+};

client/src/Components/v1/UserGuide/content/userGuideConfig.js

@@ -0,0 +1,604 @@
+// Icon names as strings - resolved to actual components in UserGuideLanding.jsx
+// Available icons: Rocket, Globe, Gauge, Server, Bell, AlertTriangle, Settings, Wifi, Wrench, Users
+
+/**
+ * @typedef {Object} Article
+ * @property {string} id
+ * @property {string} title
+ * @property {string} description
+ * @property {string[]} keywords
+ */
+
+/**
+ * @typedef {Object} Collection
+ * @property {string} id
+ * @property {string} title
+ * @property {string} description
+ * @property {string} icon
+ * @property {number} articleCount
+ * @property {Article[]} articles
+ */
+
+/**
+ * @typedef {Object} FastFind
+ * @property {string} id
+ * @property {string} title
+ * @property {string} collectionId
+ * @property {string} articleId
+ */
+
+// Collections configuration for Checkmate
+export const collections = [
+	{
+		id: "getting-started",
+		title: "Getting started",
+		description: "Essential first steps for new users.",
+		icon: "Rocket",
+		articleCount: 4,
+		articles: [
+			{
+				id: "what-is-checkmate",
+				title: "What is Checkmate",
+				description: "Overview of monitoring capabilities and core features.",
+				keywords: ["introduction", "overview", "platform", "monitoring", "uptime"],
+			},
+			{
+				id: "quick-start",
+				title: "Quick start guide",
+				description: "Create your first monitor in 5 minutes.",
+				keywords: ["quick", "start", "first", "monitor", "setup", "tutorial"],
+			},
+			{
+				id: "dashboard",
+				title: "Understanding the dashboard",
+				description: "Navigation and key metrics explained.",
+				keywords: ["dashboard", "navigation", "interface", "home", "metrics"],
+			},
+			{
+				id: "roles-permissions",
+				title: "User roles and permissions",
+				description: "User, Admin, and Superadmin roles explained.",
+				keywords: ["role", "permission", "admin", "superadmin", "user", "access"],
+			},
+		],
+	},
+	{
+		id: "uptime-monitoring",
+		title: "Uptime monitoring",
+		description: "Monitor website and service availability.",
+		icon: "Globe",
+		articleCount: 9,
+		articles: [
+			{
+				id: "http-monitors",
+				title: "Creating HTTP monitors",
+				description: "URL monitoring with response validation.",
+				keywords: ["http", "https", "url", "website", "monitor", "create"],
+			},
+			{
+				id: "ping-monitors",
+				title: "Ping monitors",
+				description: "ICMP-based availability checks.",
+				keywords: ["ping", "icmp", "availability", "monitor"],
+			},
+			{
+				id: "port-monitors",
+				title: "Port monitors",
+				description: "TCP port availability monitoring.",
+				keywords: ["port", "tcp", "availability", "monitor", "service"],
+			},
+			{
+				id: "docker-monitors",
+				title: "Docker monitors",
+				description: "Monitor Docker container status and health.",
+				keywords: ["docker", "container", "monitoring", "health", "status"],
+			},
+			{
+				id: "bulk-import",
+				title: "Bulk import monitors",
+				description: "Import multiple monitors from a CSV file.",
+				keywords: ["bulk", "import", "csv", "multiple", "batch", "upload"],
+			},
+			{
+				id: "intervals-timing",
+				title: "Monitor intervals and timing",
+				description: "Configure how often to check your services.",
+				keywords: ["interval", "timing", "frequency", "check", "schedule"],
+			},
+			{
+				id: "json-path-matching",
+				title: "JSON path matching",
+				description: "Validate API response content.",
+				keywords: ["json", "api", "response", "validation", "match", "path"],
+			},
+			{
+				id: "ssl-tls-monitoring",
+				title: "SSL/TLS monitoring",
+				description: "Certificate tracking and error handling.",
+				keywords: ["ssl", "tls", "certificate", "https", "security", "expiry"],
+			},
+			{
+				id: "uptime-metrics",
+				title: "Understanding uptime metrics",
+				description: "Response time, status codes, and uptime percentage.",
+				keywords: [
+					"metrics",
+					"response",
+					"time",
+					"status",
+					"code",
+					"uptime",
+					"percentage",
+				],
+			},
+		],
+	},
+	{
+		id: "pagespeed",
+		title: "PageSpeed monitoring",
+		description: "Track website performance and Core Web Vitals.",
+		icon: "Gauge",
+		articleCount: 5,
+		articles: [
+			{
+				id: "creating-pagespeed",
+				title: "Creating PageSpeed monitors",
+				description: "Setup and configuration for performance monitoring.",
+				keywords: ["pagespeed", "create", "setup", "performance", "lighthouse"],
+			},
+			{
+				id: "understanding-scores",
+				title: "Understanding scores",
+				description: "Performance, Accessibility, SEO, and Best Practices explained.",
+				keywords: ["score", "performance", "accessibility", "seo", "best", "practices"],
+			},
+			{
+				id: "core-web-vitals",
+				title: "Core Web Vitals explained",
+				description: "LCP, FCP, CLS, TBT, and Speed Index.",
+				keywords: ["core", "web", "vitals", "lcp", "fcp", "cls", "tbt", "speed", "index"],
+			},
+			{
+				id: "pagespeed-api",
+				title: "PageSpeed API configuration",
+				description: "Setting up your Google PageSpeed API key.",
+				keywords: ["api", "key", "google", "pagespeed", "configure", "setup"],
+			},
+			{
+				id: "performance-trends",
+				title: "Performance trends",
+				description: "Tracking improvements over time.",
+				keywords: ["trend", "history", "improvement", "tracking", "chart"],
+			},
+		],
+	},
+	{
+		id: "infrastructure",
+		title: "Infrastructure monitoring",
+		description: "Monitor server hardware with Capture agent.",
+		icon: "Server",
+		articleCount: 6,
+		articles: [
+			{
+				id: "installing-capture",
+				title: "Installing Capture agent",
+				description: "Setup the monitoring agent on your servers.",
+				keywords: ["install", "capture", "agent", "setup", "server"],
+			},
+			{
+				id: "cpu-monitoring",
+				title: "CPU monitoring",
+				description: "Usage, temperature, and core metrics.",
+				keywords: ["cpu", "processor", "usage", "temperature", "cores"],
+			},
+			{
+				id: "memory-monitoring",
+				title: "Memory monitoring",
+				description: "RAM usage and availability tracking.",
+				keywords: ["memory", "ram", "usage", "available", "free"],
+			},
+			{
+				id: "disk-monitoring",
+				title: "Disk monitoring",
+				description: "Storage space and read/write speeds.",
+				keywords: ["disk", "storage", "space", "read", "write", "speed"],
+			},
+			{
+				id: "network-monitoring",
+				title: "Network monitoring",
+				description: "Bandwidth and packet statistics.",
+				keywords: ["network", "bandwidth", "packet", "interface", "traffic"],
+			},
+			{
+				id: "hardware-thresholds",
+				title: "Setting hardware thresholds",
+				description: "Alert when resources become critical.",
+				keywords: ["threshold", "alert", "critical", "warning", "limit"],
+			},
+		],
+	},
+	{
+		id: "incidents",
+		title: "Incidents & alerts",
+		description: "Respond to downtime and issues.",
+		icon: "AlertTriangle",
+		articleCount: 4,
+		articles: [
+			{
+				id: "understanding-incidents",
+				title: "Understanding incidents",
+				description: "How incidents are detected and created.",
+				keywords: ["incident", "detection", "downtime", "outage", "alert"],
+			},
+			{
+				id: "incident-timeline",
+				title: "Incident timeline",
+				description: "Tracking start, duration, and resolution.",
+				keywords: ["timeline", "duration", "start", "end", "resolution"],
+			},
+			{
+				id: "resolving-incidents",
+				title: "Resolving incidents",
+				description: "Manual vs automatic resolution.",
+				keywords: ["resolve", "manual", "automatic", "acknowledge", "fix"],
+			},
+			{
+				id: "incident-history",
+				title: "Incident history and analysis",
+				description: "Learn from past outages.",
+				keywords: ["history", "analysis", "report", "past", "outage"],
+			},
+		],
+	},
+	{
+		id: "checks",
+		title: "Checks",
+		description: "View monitoring check results and history.",
+		icon: "FileText",
+		articleCount: 3,
+		articles: [
+			{
+				id: "understanding-checks",
+				title: "Understanding checks",
+				description: "What checks are and how they work.",
+				keywords: ["check", "result", "monitoring", "status", "response"],
+			},
+			{
+				id: "check-details",
+				title: "Check details and timing",
+				description: "Response times, status codes, and timing breakdown.",
+				keywords: ["response", "time", "timing", "breakdown", "dns", "tls"],
+			},
+			{
+				id: "filtering-checks",
+				title: "Filtering and date ranges",
+				description: "Filter checks by date range and status.",
+				keywords: ["filter", "date", "range", "pagination", "sort"],
+			},
+		],
+	},
+	{
+		id: "logs",
+		title: "Logs & diagnostics",
+		description: "System logs, queue monitoring, and diagnostics.",
+		icon: "Database",
+		articleCount: 3,
+		articles: [
+			{
+				id: "application-logs",
+				title: "Application logs",
+				description: "View and filter system logs by level.",
+				keywords: ["log", "error", "warning", "info", "debug", "filter"],
+			},
+			{
+				id: "queue-monitoring",
+				title: "Queue monitoring",
+				description: "Monitor background jobs and queue status.",
+				keywords: ["queue", "job", "background", "bullmq", "worker"],
+			},
+			{
+				id: "system-diagnostics",
+				title: "System diagnostics",
+				description: "CPU, memory, and heap usage metrics.",
+				keywords: ["diagnostics", "cpu", "memory", "heap", "performance"],
+			},
+		],
+	},
+	{
+		id: "notifications",
+		title: "Notifications",
+		description: "Get alerted when things go wrong.",
+		icon: "Bell",
+		articleCount: 7,
+		articles: [
+			{
+				id: "email-notifications",
+				title: "Email notifications",
+				description: "SMTP setup and configuration.",
+				keywords: ["email", "smtp", "mail", "setup", "configure"],
+			},
+			{
+				id: "slack-integration",
+				title: "Slack integration",
+				description: "Webhook setup for Slack channels.",
+				keywords: ["slack", "webhook", "integration", "channel"],
+			},
+			{
+				id: "discord-integration",
+				title: "Discord integration",
+				description: "Channel notifications via webhooks.",
+				keywords: ["discord", "webhook", "integration", "channel"],
+			},
+			{
+				id: "pagerduty-integration",
+				title: "PagerDuty integration",
+				description: "On-call management integration.",
+				keywords: ["pagerduty", "oncall", "integration", "escalation"],
+			},
+			{
+				id: "webhook-notifications",
+				title: "Webhook notifications",
+				description: "Custom HTTP callbacks for alerts.",
+				keywords: ["webhook", "http", "callback", "custom", "api"],
+			},
+			{
+				id: "matrix-integration",
+				title: "Matrix integration",
+				description: "Decentralized messaging notifications.",
+				keywords: ["matrix", "messaging", "integration", "homeserver"],
+			},
+			{
+				id: "testing-notifications",
+				title: "Testing notifications",
+				description: "Verify your notification setup works.",
+				keywords: ["test", "verify", "notification", "check"],
+			},
+		],
+	},
+	{
+		id: "status-pages",
+		title: "Status pages",
+		description: "Share uptime with your users.",
+		icon: "Wifi",
+		articleCount: 5,
+		articles: [
+			{
+				id: "creating-status-page",
+				title: "Creating a status page",
+				description: "Public-facing uptime dashboard setup.",
+				keywords: ["status", "page", "create", "public", "dashboard"],
+			},
+			{
+				id: "customizing-appearance",
+				title: "Customizing appearance",
+				description: "Logo, colors, and branding options.",
+				keywords: ["customize", "logo", "color", "brand", "style"],
+			},
+			{
+				id: "adding-monitors",
+				title: "Adding monitors to status page",
+				description: "Main monitors and sub-components.",
+				keywords: ["add", "monitor", "component", "group"],
+			},
+			{
+				id: "display-options",
+				title: "Display options",
+				description: "Charts, uptime percentage, and login links.",
+				keywords: ["display", "chart", "uptime", "percentage", "option"],
+			},
+			{
+				id: "sharing",
+				title: "Sharing your status page",
+				description: "Share your status page URL with users.",
+				keywords: ["share", "url", "public", "link", "access"],
+			},
+		],
+	},
+	{
+		id: "maintenance",
+		title: "Maintenance windows",
+		description: "Schedule planned downtime.",
+		icon: "Wrench",
+		articleCount: 3,
+		articles: [
+			{
+				id: "creating-maintenance",
+				title: "Creating maintenance windows",
+				description: "Suppress alerts during planned maintenance.",
+				keywords: ["maintenance", "create", "schedule", "suppress", "alert"],
+			},
+			{
+				id: "recurring-maintenance",
+				title: "One-time vs recurring",
+				description: "Different scheduling options.",
+				keywords: ["recurring", "one-time", "schedule", "repeat", "frequency"],
+			},
+			{
+				id: "managing-maintenance",
+				title: "Managing active maintenance",
+				description: "Edit, extend, or cancel maintenance windows.",
+				keywords: ["manage", "edit", "cancel", "extend", "active"],
+			},
+		],
+	},
+	{
+		id: "team-management",
+		title: "Team management",
+		description: "Collaborate with your team.",
+		icon: "Users",
+		articleCount: 3,
+		articles: [
+			{
+				id: "inviting-members",
+				title: "Inviting team members",
+				description: "Send email invitations to your team.",
+				keywords: ["invite", "team", "member", "email", "add"],
+			},
+			{
+				id: "user-roles",
+				title: "User roles",
+				description: "Admin vs User permissions explained.",
+				keywords: ["role", "admin", "user", "permission", "access"],
+			},
+			{
+				id: "managing-access",
+				title: "Managing team access",
+				description: "Add and remove team members.",
+				keywords: ["manage", "access", "remove", "team", "member"],
+			},
+		],
+	},
+	{
+		id: "settings",
+		title: "Settings & configuration",
+		description: "Customize your Checkmate instance.",
+		icon: "Settings",
+		articleCount: 6,
+		articles: [
+			{
+				id: "account-settings",
+				title: "Account settings",
+				description: "Manage your profile, password, and account.",
+				keywords: ["account", "profile", "password", "avatar", "photo", "delete"],
+			},
+			{
+				id: "email-configuration",
+				title: "Email configuration",
+				description: "SMTP server setup for notifications.",
+				keywords: ["email", "smtp", "configure", "server", "mail"],
+			},
+			{
+				id: "global-thresholds",
+				title: "Global thresholds",
+				description: "Default alert levels for all monitors.",
+				keywords: ["threshold", "global", "default", "alert", "level"],
+			},
+			{
+				id: "appearance",
+				title: "Appearance settings",
+				description: "Theme and display preferences.",
+				keywords: ["appearance", "theme", "dark", "light", "display", "mode"],
+			},
+			{
+				id: "timezone-settings",
+				title: "Timezone settings",
+				description: "Display preferences for dates and times.",
+				keywords: ["timezone", "time", "date", "display", "preference"],
+			},
+			{
+				id: "export-monitors",
+				title: "Export monitors",
+				description: "Download your monitors as JSON.",
+				keywords: ["export", "download", "backup", "json", "monitors"],
+			},
+		],
+	},
+];
+
+// Fast Finds - Popular/quick access articles
+export const fastFinds = [
+	{
+		id: "ff-1",
+		title: "Creating your first monitor",
+		collectionId: "getting-started",
+		articleId: "quick-start",
+	},
+	{
+		id: "ff-2",
+		title: "Setting up email notifications",
+		collectionId: "notifications",
+		articleId: "email-notifications",
+	},
+	{
+		id: "ff-3",
+		title: "Installing Capture agent",
+		collectionId: "infrastructure",
+		articleId: "installing-capture",
+	},
+	{
+		id: "ff-4",
+		title: "Creating a status page",
+		collectionId: "status-pages",
+		articleId: "creating-status-page",
+	},
+	{
+		id: "ff-5",
+		title: "Understanding Core Web Vitals",
+		collectionId: "pagespeed",
+		articleId: "core-web-vitals",
+	},
+];
+
+// Helper functions
+export const getCollection = (collectionId) => {
+	return collections.find((c) => c.id === collectionId);
+};
+
+export const getArticle = (collectionId, articleId) => {
+	const collection = getCollection(collectionId);
+	return collection?.articles.find((a) => a.id === articleId);
+};
+
+export const getTotalArticleCount = () => {
+	return collections.reduce((sum, collection) => sum + collection.articleCount, 0);
+};
+
+/**
+ * @typedef {Object} SearchResult
+ * @property {string} collectionId
+ * @property {string} collectionTitle
+ * @property {string} articleId
+ * @property {string} articleTitle
+ * @property {string} articleDescription
+ * @property {'title' | 'description' | 'keyword'} matchType
+ */
+
+/**
+ * Search articles by query
+ * @param {string} query
+ * @returns {SearchResult[]}
+ */
+export const searchArticles = (query) => {
+	if (!query || query.trim().length < 2) return [];
+
+	const normalizedQuery = query.toLowerCase().trim();
+	const results = [];
+
+	for (const collection of collections) {
+		for (const article of collection.articles) {
+			let matchType = null;
+
+			// Check title match (highest priority)
+			if (article.title.toLowerCase().includes(normalizedQuery)) {
+				matchType = "title";
+			}
+			// Check description match
+			else if (article.description.toLowerCase().includes(normalizedQuery)) {
+				matchType = "description";
+			}
+			// Check keywords match
+			else if (
+				article.keywords.some((kw) => kw.toLowerCase().includes(normalizedQuery))
+			) {
+				matchType = "keyword";
+			}
+
+			if (matchType) {
+				results.push({
+					collectionId: collection.id,
+					collectionTitle: collection.title,
+					articleId: article.id,
+					articleTitle: article.title,
+					articleDescription: article.description,
+					matchType,
+				});
+			}
+		}
+	}
+
+	// Sort by match type priority: title > description > keyword
+	return results.sort((a, b) => {
+		const priority = { title: 0, description: 1, keyword: 2 };
+		return priority[a.matchType] - priority[b.matchType];
+	});
+};

client/src/Components/v1/UserGuide/index.jsx

@@ -0,0 +1,30 @@
+import SidebarWrapper from "./SidebarWrapper";
+import {
+	UserGuideSidebarProvider,
+	useUserGuideSidebarContext,
+	TAB_BAR_WIDTH,
+	DEFAULT_CONTENT_WIDTH,
+} from "./UserGuideSidebarContext";
+
+// Main component that wraps SidebarWrapper with context consumer
+const UserGuideSidebar = () => {
+	const { isOpen, open, close } = useUserGuideSidebarContext();
+
+	return (
+		<SidebarWrapper
+			isOpen={isOpen}
+			onOpen={open}
+			onClose={close}
+		/>
+	);
+};
+
+export {
+	UserGuideSidebar,
+	UserGuideSidebarProvider,
+	useUserGuideSidebarContext,
+	TAB_BAR_WIDTH,
+	DEFAULT_CONTENT_WIDTH,
+};
+
+export default UserGuideSidebar;

client/src/Components/v1/UserGuide/styles/theme.js

@@ -0,0 +1,222 @@
+/**
+ * Design Tokens for UserGuide
+ * Supports both light and dark themes via MUI theme integration
+ */
+
+// Typography (theme-independent)
+export const typography = {
+	fontFamily: {
+		sans: "'Inter', system-ui, -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif",
+		mono: "'Geist Mono', 'Fira Code', 'Consolas', monospace",
+	},
+	fontSize: {
+		xs: 12,
+		sm: 12,
+		base: 13,
+		md: 14,
+		lg: 15,
+		xl: 16,
+		"2xl": 20,
+		"3xl": 22,
+		"4xl": 26,
+		"5xl": 30,
+	},
+	lineHeight: {
+		tight: 1.2,
+		snug: 1.3,
+		normal: 1.4,
+		relaxed: 1.5,
+	},
+	fontWeight: {
+		normal: 400,
+		medium: 500,
+		semibold: 600,
+		bold: 700,
+	},
+};
+
+// Spacing (theme-independent)
+export const spacing = {
+	xs: "4px",
+	sm: "8px",
+	md: "12px",
+	lg: "16px",
+	xl: "24px",
+	"2xl": "32px",
+	"3xl": "40px",
+	"4xl": "48px",
+};
+
+// Brand colors (theme-independent) - Checkmate blue
+export const brandColors = {
+	primary: "#1570EF",
+	primaryDark: "#1054B0",
+	primaryLight: "#5BA3F5",
+	success: "#17B26A",
+	warning: "#F79009",
+	error: "#F04438",
+};
+
+/**
+ * Get theme-aware colors based on MUI theme mode
+ * @param {'light' | 'dark'} mode - The current theme mode
+ * @returns {Object} Theme-aware color tokens
+ */
+export const getColors = (mode) => {
+	const isDark = mode === "dark";
+
+	return {
+		text: {
+			primary: isDark ? "#ffffff" : "#1C2130",
+			secondary: isDark ? "#d0d5dd" : "#475467",
+			muted: isDark ? "#98a2b3" : "#667085",
+			white: "#ffffff",
+			whiteMuted: "rgba(255, 255, 255, 0.8)",
+		},
+		brand: brandColors,
+		border: {
+			default: isDark ? "#344054" : "#d0d5dd",
+		},
+		background: {
+			white: isDark ? "#1a1a1a" : "#ffffff",
+			alt: isDark ? "#0d0d0d" : "#f9fafb",
+			code: isDark ? "#1C2130" : "#f3f4f6",
+			sidebar: isDark ? "#101010" : "#ffffff",
+			hover: isDark ? "#2a2a2a" : "#f3f4f6",
+		},
+	};
+};
+
+/**
+ * Get theme-aware border styles
+ * @param {'light' | 'dark'} mode - The current theme mode
+ * @returns {Object} Border styles
+ */
+export const getBorder = (mode) => {
+	const colors = getColors(mode);
+	return {
+		radius: "4px",
+		default: `1px solid ${colors.border.default}`,
+	};
+};
+
+/**
+ * Get theme-aware image styles
+ * @param {'light' | 'dark'} mode - The current theme mode
+ * @returns {Object} Image styles
+ */
+export const getImageStyles = (mode) => {
+	const colors = getColors(mode);
+	const border = getBorder(mode);
+	const isDark = mode === "dark";
+
+	return {
+		image: {
+			width: "100%",
+			borderRadius: border.radius,
+			border: border.default,
+			display: "block",
+			boxShadow: isDark ? "0 2px 8px rgba(0, 0, 0, 0.3)" : "0 2px 8px rgba(0, 0, 0, 0.1)",
+		},
+		caption: {
+			fontSize: 10,
+			color: colors.text.muted,
+			textAlign: "center",
+			fontStyle: "italic",
+		},
+	};
+};
+
+/**
+ * Get theme-aware chip styles
+ * @param {'light' | 'dark'} mode - The current theme mode
+ * @returns {Object} Chip styles
+ */
+export const getChipStyles = (mode) => {
+	const isDark = mode === "dark";
+
+	return {
+		url: {
+			backgroundColor: isDark ? "rgba(21, 112, 239, 0.2)" : "rgba(21, 112, 239, 0.1)",
+			color: isDark ? "#5BA3F5" : "#1570EF",
+			padding: "2px 8px",
+			borderRadius: "4px",
+			fontFamily: typography.fontFamily.mono,
+			fontSize: "0.9em",
+		},
+		code: {
+			backgroundColor: isDark ? "#2d2d2d" : "#f3f4f6",
+			color: isDark ? "#d0d5dd" : "#1C2130",
+			padding: "2px 8px",
+			borderRadius: "4px",
+			fontFamily: typography.fontFamily.mono,
+			fontSize: "0.9em",
+		},
+	};
+};
+
+/**
+ * Get theme-aware component styles
+ * @param {'light' | 'dark'} mode - The current theme mode
+ * @returns {Object} Component styles
+ */
+export const getComponentStyles = (mode) => {
+	const colors = getColors(mode);
+	const border = getBorder(mode);
+
+	return {
+		card: {
+			backgroundColor: colors.background.white,
+			border: border.default,
+			borderRadius: border.radius,
+		},
+		heading: {
+			h2: {
+				fontFamily: typography.fontFamily.sans,
+				fontSize: typography.fontSize["2xl"],
+				fontWeight: typography.fontWeight.semibold,
+				color: colors.text.primary,
+				lineHeight: typography.lineHeight.normal,
+			},
+			h3: {
+				fontFamily: typography.fontFamily.sans,
+				fontSize: typography.fontSize.lg,
+				fontWeight: typography.fontWeight.semibold,
+				color: colors.text.primary,
+				lineHeight: typography.lineHeight.normal,
+			},
+		},
+		paragraph: {
+			fontFamily: typography.fontFamily.sans,
+			fontSize: typography.fontSize.base,
+			color: colors.text.primary,
+			lineHeight: typography.lineHeight.relaxed,
+		},
+		listItem: {
+			fontSize: typography.fontSize.base,
+			color: colors.text.primary,
+			lineHeight: typography.lineHeight.snug,
+		},
+	};
+};
+
+// Legacy exports for backwards compatibility (dark mode defaults)
+// These will be replaced by useUserGuideTheme hook usage
+export const colors = getColors("dark");
+export const border = getBorder("dark");
+export const imageStyles = getImageStyles("dark");
+export const chipStyles = getChipStyles("dark");
+export const componentStyles = getComponentStyles("dark");
+
+// Export everything as a single theme object (dark mode default)
+export const theme = {
+	colors,
+	typography,
+	spacing,
+	border,
+	imageStyles,
+	chipStyles,
+	componentStyles,
+};
+
+export default theme;

client/src/Components/v1/UserGuide/styles/useUserGuideTheme.js

@@ -0,0 +1,123 @@
+/**
+ * Hook to get theme-aware styles for UserGuide components
+ * Uses MUI's theme system from Checkmate
+ */
+import { useTheme } from "@mui/material/styles";
+import { typography, spacing, brandColors } from "./theme";
+
+/**
+ * Returns theme-aware styles for UserGuide components
+ */
+export const useUserGuideTheme = () => {
+	const theme = useTheme();
+	const isDark = theme.palette.mode === "dark";
+
+	const colors = {
+		text: {
+			primary: theme.palette.primary.contrastText,
+			secondary: theme.palette.primary.contrastTextSecondary,
+			muted: theme.palette.primary.contrastTextTertiary,
+			white: "#ffffff",
+		},
+		brand: brandColors,
+		border: {
+			default: theme.palette.primary.lowContrast,
+		},
+		background: {
+			white: isDark ? "#1a1a1a" : "#ffffff",
+			alt: theme.palette.primaryBackground.main,
+			code: isDark ? "#1C2130" : "#f3f4f6",
+			sidebar: theme.palette.primaryBackground.main,
+			hover: isDark ? "#2a2a2a" : "#f3f4f6",
+		},
+	};
+
+	const border = {
+		radius: "4px",
+		default: `1px solid ${colors.border.default}`,
+	};
+
+	const imageStyles = {
+		image: {
+			width: "100%",
+			borderRadius: border.radius,
+			border: border.default,
+			display: "block",
+			boxShadow: isDark ? "0 2px 8px rgba(0, 0, 0, 0.3)" : "0 2px 8px rgba(0, 0, 0, 0.1)",
+		},
+		caption: {
+			fontSize: 10,
+			color: colors.text.muted,
+			textAlign: "center",
+			fontStyle: "italic",
+		},
+	};
+
+	const chipStyles = {
+		url: {
+			backgroundColor: isDark ? "rgba(21, 112, 239, 0.2)" : "rgba(21, 112, 239, 0.1)",
+			color: isDark ? "#5BA3F5" : "#1570EF",
+			padding: "2px 8px",
+			borderRadius: "4px",
+			fontFamily: typography.fontFamily.mono,
+			fontSize: "0.9em",
+		},
+		code: {
+			backgroundColor: isDark ? "#2d2d2d" : "#f3f4f6",
+			color: isDark ? "#d0d5dd" : "#1C2130",
+			padding: "2px 8px",
+			borderRadius: "4px",
+			fontFamily: typography.fontFamily.mono,
+			fontSize: "0.9em",
+		},
+	};
+
+	const componentStyles = {
+		card: {
+			backgroundColor: colors.background.white,
+			border: border.default,
+			borderRadius: border.radius,
+		},
+		heading: {
+			h2: {
+				fontFamily: typography.fontFamily.sans,
+				fontSize: typography.fontSize["2xl"],
+				fontWeight: typography.fontWeight.semibold,
+				color: colors.text.primary,
+				lineHeight: typography.lineHeight.normal,
+			},
+			h3: {
+				fontFamily: typography.fontFamily.sans,
+				fontSize: typography.fontSize.lg,
+				fontWeight: typography.fontWeight.semibold,
+				color: colors.text.primary,
+				lineHeight: typography.lineHeight.normal,
+			},
+		},
+		paragraph: {
+			fontFamily: typography.fontFamily.sans,
+			fontSize: typography.fontSize.base,
+			color: colors.text.primary,
+			lineHeight: typography.lineHeight.relaxed,
+		},
+		listItem: {
+			fontSize: typography.fontSize.base,
+			color: colors.text.primary,
+			lineHeight: typography.lineHeight.snug,
+		},
+	};
+
+	return {
+		colors,
+		typography,
+		spacing,
+		border,
+		imageStyles,
+		chipStyles,
+		componentStyles,
+		isDark,
+		theme,
+	};
+};
+
+export default useUserGuideTheme;

client/src/Hooks/monitorHooks.js

@@ -243,6 +243,7 @@ export const useFetchPageSpeedMonitorById = ({ monitorId, dateRange, updateTrigg
 	const [isLoading, setIsLoading] = useState(true);
 	const [networkError, setNetworkError] = useState(false);
 	const [monitor, setMonitor] = useState(undefined);
+	const [monitorStats, setMonitorStats] = useState(undefined);
 
 	useEffect(() => {
 		const fetchMonitor = async () => {
@@ -254,7 +255,8 @@ export const useFetchPageSpeedMonitorById = ({ monitorId, dateRange, updateTrigg
 					monitorId: monitorId,
 					dateRange: dateRange,
 				});
-				setMonitor(response.data.data);
+				setMonitor(response.data.data.monitor);
+				setMonitorStats(response.data.data.monitorStats);
 			} catch (error) {
 				setNetworkError(true);
 			} finally {
@@ -263,7 +265,7 @@ export const useFetchPageSpeedMonitorById = ({ monitorId, dateRange, updateTrigg
 		};
 		fetchMonitor();
 	}, [monitorId, dateRange, updateTrigger]);
-	return [monitor, isLoading, networkError];
+	return [monitor, monitorStats, isLoading, networkError];
 };
 
 export const useFetchUptimeMonitorById = ({ monitorId, dateRange, trigger }) => {

client/src/Pages/Account/components/AddMemberMenu/index.jsx

@@ -3,7 +3,7 @@ import Button from "@mui/material/Button";
 import Menu from "@mui/material/Menu";
 import MenuItem from "@mui/material/MenuItem";
 import { useTheme } from "@emotion/react";
-import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
+import Icon from "@/Components/v1/Icon";
 import { useTranslation } from "react-i18next";
 import Proptypes from "prop-types";
 
@@ -24,7 +24,13 @@ const AddMemberMenu = ({ handleInviteOpen, handleIsRegisterOpen }) => {
 			<Button
 				variant="contained"
 				color="accent"
-				endIcon={<ArrowDropDownIcon sx={{ color: theme.palette.secondary.light }} />}
+				endIcon={
+					<Icon
+						name="ChevronDown"
+						size={20}
+						color="secondary.light"
+					/>
+				}
 				onClick={handleClick}
 			>
 				{t("teamPanel.addTeamMember.addMemberMenu")}

client/src/Pages/Account/components/RoleTable/index.jsx

@@ -1,6 +1,6 @@
 import Typography from "@mui/material/Typography";
 import DataTable from "@/Components/v1/Table/index.jsx";
-import DeleteOutlineRoundedIcon from "@mui/icons-material/DeleteOutlineRounded";
+import Icon from "@/Components/v1/Icon";
 
 import { useTranslation } from "react-i18next";
 import { ROLES } from "../../../../Utils/roleUtils.js";
@@ -21,11 +21,13 @@ const RoleTable = ({ roles, handleDeleteRole }) => {
 			render: (row) => {
 				if (row === ROLES.SUPERADMIN) return null;
 				return (
-					<DeleteOutlineRoundedIcon
+					<Icon
+						name="Trash2"
+						size={20}
 						onClick={() => {
 							handleDeleteRole(row);
 						}}
-						sx={{ cursor: "pointer" }}
+						style={{ cursor: "pointer" }}
 					/>
 				);
 			},

client/src/Pages/Auth/CheckEmail.jsx

@@ -7,9 +7,9 @@ import { createToast } from "../../Utils/toastUtils.jsx";
 import { forgotPassword } from "../../Features/Auth/authSlice.js";
 import { Trans, useTranslation } from "react-i18next";
 import Background from "@/assets/Images/background-grid.svg?react";
-import EmailIcon from "@/assets/icons/email.svg?react";
 import Logo from "@/assets/icons/checkmate-icon.svg?react";
 import IconBox from "@/Components/v1/IconBox/index.jsx";
+import Icon from "@/Components/v1/Icon";
 import "./index.css";
 
 const CheckEmail = () => {
@@ -160,7 +160,7 @@ const CheckEmail = () => {
 								svgHeight={24}
 								mb={theme.spacing(4)}
 							>
-								<EmailIcon alt={t("auth.forgotPassword.imageAlts.email")} />
+								<Icon name="Mail" />
 							</IconBox>
 						</Stack>
 						<Typography component="h1">{t("auth.forgotPassword.heading")}</Typography>

client/src/Pages/Auth/ForgotPassword.jsx

@@ -8,9 +8,9 @@ import { newOrChangedCredentials } from "../../Validation/validation.js";
 import { useNavigate } from "react-router-dom";
 import TextInput from "@/Components/v1/Inputs/TextInput/index.jsx";
 import Logo from "@/assets/icons/checkmate-icon.svg?react";
-import Key from "@/assets/icons/key.svg?react";
 import Background from "@/assets/Images/background-grid.svg?react";
 import IconBox from "@/Components/v1/IconBox/index.jsx";
+import Icon from "@/Components/v1/Icon";
 import { Trans, useTranslation } from "react-i18next";
 import "./index.css";
 
@@ -165,7 +165,7 @@ const ForgotPassword = () => {
 								svgHeight={24}
 								mb={theme.spacing(4)}
 							>
-								<Key alt={t("auth.forgotPassword.imageAlts.passwordKey")} />
+								<Icon name="Key" />
 							</IconBox>
 						</Stack>
 						<Typography component="h1">{t("auth.forgotPassword.heading")}</Typography>

client/src/Pages/Auth/NewPasswordConfirmed.jsx

@@ -4,9 +4,9 @@ import { useNavigate } from "react-router-dom";
 import { useDispatch } from "react-redux";
 import { clearAuthState } from "../../Features/Auth/authSlice.js";
 import Background from "@/assets/Images/background-grid.svg?react";
-import ConfirmIcon from "@/assets/icons/check-outlined.svg?react";
 import Logo from "@/assets/icons/checkmate-icon.svg?react";
 import IconBox from "@/Components/v1/IconBox/index.jsx";
+import Icon from "@/Components/v1/Icon";
 import { Trans, useTranslation } from "react-i18next";
 import "./index.css";
 
@@ -94,7 +94,7 @@ const NewPasswordConfirmed = () => {
 								svgHeight={24}
 								mb={theme.spacing(4)}
 							>
-								<ConfirmIcon alt={t("auth.forgotPassword.imageAlts.passwordConfirm")} />
+								<Icon name="CheckCircle" />
 							</IconBox>
 						</Stack>
 						<Typography component="h1">{t("auth.forgotPassword.heading")}</Typography>

client/src/Pages/Auth/SetNewPassword.jsx

@@ -11,9 +11,9 @@ import Check from "@/Components/v1/Check/Check.jsx";
 import TextInput from "@/Components/v1/Inputs/TextInput/index.jsx";
 import { PasswordEndAdornment } from "@/Components/v1/Inputs/TextInput/Adornments/index.jsx";
 import IconBox from "@/Components/v1/IconBox/index.jsx";
-import LockIcon from "@/assets/icons/lock.svg?react";
 import Logo from "@/assets/icons/checkmate-icon.svg?react";
 import Background from "@/assets/Images/background-grid.svg?react";
+import Icon from "@/Components/v1/Icon";
 import "./index.css";
 import { useValidatePassword } from "./hooks/useValidatePassword.jsx";
 import { Trans, useTranslation } from "react-i18next";
@@ -140,7 +140,7 @@ const SetNewPassword = () => {
 								svgHeight={24}
 								mb={theme.spacing(4)}
 							>
-								<LockIcon alt={t("auth.forgotPassword.imageAlts.lock")} />
+								<Icon name="Lock" />
 							</IconBox>
 						</Stack>
 						<Typography component="h1">{t("auth.forgotPassword.heading")}</Typography>

client/src/Pages/Incidents/Components/StatusBoxes/StatusBox.jsx

@@ -2,10 +2,7 @@ import PropTypes from "prop-types";
 import { useTheme } from "@emotion/react";
 import { Box, Stack, Typography } from "@mui/material";
 import Background from "@/assets/Images/background-grid.svg?react";
-import AlertIcon from "@/assets/icons/alert-icon.svg?react";
-import CheckIcon from "@/assets/icons/check-icon.svg?react";
-import CloseIcon from "@/assets/icons/close-icon.svg?react";
-import WarningIcon from "@/assets/icons/warning-icon.svg?react";
+import Icon from "@/Components/v1/Icon";
 
 const StatusBox = ({ title, value, status }) => {
 	const theme = useTheme();
@@ -26,28 +23,40 @@ const StatusBox = ({ title, value, status }) => {
 		color = theme.palette.success.lowContrast;
 		icon = (
 			<Box sx={{ ...sharedStyles, top: theme.spacing(6), right: theme.spacing(6) }}>
-				<CheckIcon />
+				<Icon
+					name="CheckCircle"
+					size={20}
+				/>
 			</Box>
 		);
 	} else if (status === "down") {
 		color = theme.palette.error.lowContrast;
 		icon = (
 			<Box sx={{ ...sharedStyles, top: theme.spacing(6), right: theme.spacing(6) }}>
-				<CloseIcon />
+				<Icon
+					name="X"
+					size={20}
+				/>
 			</Box>
 		);
 	} else if (status === "paused") {
 		color = theme.palette.warning.lowContrast;
 		icon = (
 			<Box sx={{ ...sharedStyles, top: theme.spacing(6), right: theme.spacing(6) }}>
-				<WarningIcon />
+				<Icon
+					name="AlertTriangle"
+					size={20}
+				/>
 			</Box>
 		);
 	} else {
 		color = theme.palette.accent.main;
 		icon = (
 			<Box sx={{ ...sharedStyles, top: theme.spacing(6), right: theme.spacing(6) }}>
-				<AlertIcon />
+				<Icon
+					name="Bell"
+					size={20}
+				/>
 			</Box>
 		);
 	}

client/src/Pages/Incidents2/Components/ActiveIncidentsPanel/index.jsx

@@ -3,8 +3,7 @@ import { Box, Stack, Typography } from "@mui/material";
 import { useTheme } from "@emotion/react";
 import { useTranslation } from "react-i18next";
 import PanelSkeleton from "../IncidentsSummaryPanel/skeleton.jsx";
-import Incidents from "@/assets/icons/incidents.svg?react";
-import CheckIcon from "@/assets/icons/check-icon.svg?react";
+import Icon from "@/Components/v1/Icon";
 import SummaryCard from "../SummaryCard/index.jsx";
 
 /**
@@ -43,39 +42,39 @@ const ActiveIncidentsPanel = ({ totalCount = 0, isLoading = false, error = null
 
 	if (!totalCount || totalCount === 0) {
 		return (
-			<SummaryCard>
+			<SummaryCard title={t("incidentsPage.incidentsActivePanelTitle")}>
 				<Stack
 					direction="column"
 					alignItems="center"
 					justifyContent="center"
-					padding={theme.spacing(10)}
-					gap={theme.spacing(4)}
+					padding={theme.spacing(6)}
+					gap={theme.spacing(2)}
 					sx={{ flex: 1 }}
 				>
 					<Box
 						sx={{
 							color: theme.palette.success.main,
 							"& svg": {
-								width: 60,
-								height: 60,
-
+								width: 24,
+								height: 24,
 								"& path": { stroke: "currentColor", strokeWidth: 2 },
 							},
-							mb: theme.spacing(2),
+							mb: theme.spacing(1),
 						}}
 					>
-						<CheckIcon />
+						<Icon
+							name="CheckCircle"
+							size={60}
+						/>
 					</Box>
 
 					<Typography
-						variant="h1"
-						color={theme.palette.primary.contrastTextSecondary}
 						sx={{
+							fontSize: 13,
 							textTransform: "uppercase",
-							fontWeight: 600,
+							fontWeight: 500,
 							textAlign: "center",
 							color: theme.palette.success.lowContrast,
-							letterSpacing: theme.spacing(0.4),
 						}}
 					>
 						{t("incidentsPage.allSystemsAreOperational")}
@@ -86,50 +85,40 @@ const ActiveIncidentsPanel = ({ totalCount = 0, isLoading = false, error = null
 	}
 
 	return (
-		<SummaryCard isHighPriority={true}>
+		<SummaryCard title={t("incidentsPage.incidentsActivePanelTitle")}>
 			<Stack
 				direction="column"
 				alignItems="center"
 				justifyContent="center"
-				spacing={theme.spacing(4)}
+				gap={theme.spacing(2)}
+				sx={{ flex: 1 }}
 			>
 				<Box
 					sx={{
 						color: theme.palette.error.lowContrast,
-						padding: theme.spacing(2),
 						"& svg": {
-							width: 60,
-							height: 60,
-
+							width: 24,
+							height: 24,
 							"& path": { stroke: "currentColor", strokeWidth: 2 },
 						},
 					}}
 				>
-					<Incidents />
+					<Icon
+						name="AlertTriangle"
+						size={60}
+					/>
 				</Box>
 
 				<Typography
-					variant="h1"
 					sx={{
-						fontSize: `calc(${theme.typography.h1.fontSize} * 2.5)`,
-						fontWeight: 700,
+						fontSize: 32,
+						fontWeight: 600,
 						color: theme.palette.error.lowContrast,
 						lineHeight: 1,
 					}}
 				>
 					{totalCount}
 				</Typography>
-				<Typography
-					variant="h2"
-					sx={{
-						textTransform: "uppercase",
-						fontWeight: 700,
-						letterSpacing: theme.spacing(0.4),
-						paddingTop: theme.spacing(3),
-					}}
-				>
-					{t("incidentsPage.incidentsActivePanelTitle")}
-				</Typography>
 			</Stack>
 		</SummaryCard>
 	);

client/src/Pages/Incidents2/Components/IncidentsSummaryPanel/index.jsx

@@ -53,7 +53,7 @@ const IncidentsSummaryPanel = ({ updateTrigger }) => {
 		<>
 			<Grid
 				container
-				spacing={3}
+				spacing={"16px"}
 			>
 				<Grid
 					item

client/src/Pages/Incidents2/Components/LatestIncidentsPanel/IncidentItem.jsx

@@ -3,8 +3,7 @@ import { Box, Stack, Typography } from "@mui/material";
 import { useTheme } from "@emotion/react";
 import { StatusLabel } from "@/Components/v1/Label/index.jsx";
 import { getHumanReadableDuration } from "@/Utils/timeUtils.js";
-import Monitors from "@/assets/icons/monitors.svg?react";
-import AverageResponseIcon from "@/assets/icons/status-pages.svg?react";
+import Icon from "@/Components/v1/Icon";
 import { useTranslation } from "react-i18next";
 
 const IncidentItem = ({ incident }) => {
@@ -37,101 +36,68 @@ const IncidentItem = ({ incident }) => {
 
 	const duration = calculateDuration();
 	const iconWrapperStyle = {
-		px: theme.spacing(2),
 		display: "flex",
 		justifyContent: "center",
+		mx: theme.spacing(2),
 		color: theme.palette.primary.contrastTextTertiary,
+		"& svg": {
+			width: 18,
+			height: 18,
+		},
 		"& svg path": {
 			stroke: "currentColor",
+			strokeWidth: 1.5,
 		},
 	};
 
 	return (
 		<Box
 			sx={{
-				cursor: "pointer",
+				display: "grid",
+				gridTemplateColumns: "1fr 100px 80px",
+				alignItems: "center",
+				gap: theme.spacing(2),
 				width: "100%",
 				py: theme.spacing(0.5),
-				"&:hover": { opacity: 0.8 },
 			}}
 		>
 			<Stack
-				direction="column"
-				gap={theme.spacing(1.5)}
+				direction="row"
+				alignItems="center"
+				gap={theme.spacing(2)}
 			>
-				<Stack
-					direction="row"
-					alignItems="center"
-					gap={theme.spacing(1)}
+				<Box sx={iconWrapperStyle}>
+					<Icon
+						name="Globe"
+						size={18}
+					/>
+				</Box>
+				<Typography
+					variant="body1"
+					fontWeight={500}
+					noWrap
 				>
-					<Box
-						sx={{
-							...iconWrapperStyle,
-						}}
-					>
-						<Monitors />
-					</Box>
-
-					<Stack
-						direction="row"
-						gap={theme.spacing(4)}
-						alignItems="baseline"
-					>
-						<Typography variant="body1">
-							{t("incidentsPage.incidentItemMonitor")}:
-						</Typography>
-						<Typography
-							variant="body1"
-							fontWeight={600}
-						>
-							{incident.monitorName || t("incidentsPage.unknownMonitor")}
-						</Typography>
-					</Stack>
-				</Stack>
-
-				<Stack
-					direction="row"
-					alignItems="center"
-					width="100%"
-					marginTop={theme.spacing(1)}
-				>
-					<Stack
-						direction="row"
-						alignItems="center"
-						gap={theme.spacing(3)}
-					>
-						<Box sx={{ ...iconWrapperStyle }}>
-							<AverageResponseIcon />
-						</Box>
-						<Stack
-							direction="row"
-							alignItems="center"
-							spacing={2}
-						>
-							<Typography variant="body1">
-								{t("incidentsPage.incidentItemStatus")}:
-							</Typography>
-						</Stack>
-
-						<StatusLabel
-							status={isActive ? "down" : "up"}
-							text={isActive ? t("incidentsPage.active") : t("incidentsPage.resolved")}
-							customStyles={{
-								textTransform: "capitalize",
-							}}
-						/>
-					</Stack>
-
-					<Box sx={{ flexGrow: 1 }} />
-
-					<Typography
-						variant="body1"
-						fontWeight={500}
-					>
-						{duration}
-					</Typography>
-				</Stack>
+					{incident.monitorName || t("incidentsPage.unknownMonitor")}
+				</Typography>
 			</Stack>
+
+			<Box sx={{ display: "flex", justifyContent: "center" }}>
+				<StatusLabel
+					status={isActive ? "down" : "up"}
+					text={isActive ? t("incidentsPage.active") : t("incidentsPage.resolved")}
+					customStyles={{
+						textTransform: "capitalize",
+					}}
+				/>
+			</Box>
+
+			<Typography
+				variant="body1"
+				fontWeight={500}
+				textAlign="right"
+			>
+				{duration}
+			</Typography>
 		</Box>
 	);
 };

client/src/Pages/Incidents2/Components/LatestIncidentsPanel/index.jsx

@@ -5,6 +5,7 @@ import { useTranslation } from "react-i18next";
 import PanelSkeleton from "../IncidentsSummaryPanel/skeleton.jsx";
 import IncidentItem from "./IncidentItem.jsx";
 import SummaryCard from "../SummaryCard/index.jsx";
+import Icon from "@/Components/v1/Icon";
 
 /**
  * LatestIncidentsPanel Component
@@ -51,21 +52,35 @@ const LatestIncidentsPanel = ({ incidents = [], isLoading = false, error = null
 	return (
 		<SummaryCard title={t("incidentsPage.incidentsLatestPanelTitle")}>
 			{!incidents || incidents.length === 0 ? (
-				<Box
-					sx={{
-						display: "flex",
-						alignItems: "center",
-						justifyContent: "center",
-						flexGrow: 1,
-					}}
+				<Stack
+					direction="column"
+					alignItems="center"
+					justifyContent="center"
+					padding={theme.spacing(6)}
+					gap={theme.spacing(2)}
+					sx={{ flex: 1 }}
 				>
+					<Box sx={{ mb: theme.spacing(1) }}>
+						<Icon
+							name="Check"
+							size={24}
+							color={theme.palette.success.main}
+							strokeWidth={2}
+						/>
+					</Box>
+
 					<Typography
-						variant="body2"
-						textAlign="center"
+						sx={{
+							fontSize: 13,
+							textTransform: "uppercase",
+							fontWeight: 500,
+							textAlign: "center",
+							color: theme.palette.success.lowContrast,
+						}}
 					>
 						{t("incidentsPage.incidentsLatestPanelEmpty")}
 					</Typography>
-				</Box>
+				</Stack>
 			) : (
 				<Stack gap={theme.spacing(4)}>
 					{incidents.map((incident, index) => (

client/src/Pages/Incidents2/Components/StatisticsPanel/index.jsx

@@ -1,13 +1,9 @@
 import PropTypes from "prop-types";
-import { Box, Stack, Typography } from "@mui/material";
+import { Box, Stack, Typography, Divider } from "@mui/material";
 import { useTheme } from "@emotion/react";
 import PanelSkeleton from "../IncidentsSummaryPanel/skeleton.jsx";
 import { useTranslation } from "react-i18next";
-import { Divider } from "@mui/material";
-import Clock from "@/assets/icons/maintenance.svg?react";
-import Incidents from "@/assets/icons/incidents.svg?react";
-import ResolutionItem from "@/assets/icons/interval-check.svg?react";
-import NotificationIcon from "@/assets/icons/notifications.svg?react";
+import Icon from "@/Components/v1/Icon";
 import SummaryCard from "../SummaryCard/index.jsx";
 
 /**
@@ -35,18 +31,19 @@ const StatisticsPanel = ({ isLoading = false, error = null, summary = {} }) => {
 	const { t } = useTranslation();
 	const totalResolutions =
 		(summary?.totalManualResolutions || 0) + (summary?.totalAutomaticResolutions || 0);
-	const automaticPercentage =
-		totalResolutions > 0
-			? (summary?.totalAutomaticResolutions / totalResolutions) * 100
-			: 0;
 
 	const iconWrapperStyle = {
 		display: "flex",
 		justifyContent: "center",
-		mx: theme.spacing(3),
+		mx: theme.spacing(2),
 		color: theme.palette.primary.contrastTextTertiary,
+		"& svg": {
+			width: 18,
+			height: 18,
+		},
 		"& svg path": {
 			stroke: "currentColor",
+			strokeWidth: 1.5,
 		},
 	};
 	if (isLoading) {
@@ -76,150 +73,87 @@ const StatisticsPanel = ({ isLoading = false, error = null, summary = {} }) => {
 		);
 	}
 
+	const getMostAffectedMonitor = () => {
+		if (!summary.total || summary.total === 0) {
+			return t("incidentsPage.none");
+		}
+		return summary.topMonitor?.monitorName || t("incidentsPage.none");
+	};
+
+	const rowStyle = {
+		py: theme.spacing(0.5),
+		minHeight: 32,
+	};
+
 	return (
 		<SummaryCard title={t("incidentsPage.incidentsStatisticsPanelTitle")}>
 			<Stack gap={theme.spacing(4)}>
-				<Stack
-					direction="row"
-					alignItems="center"
-					gap={theme.spacing(3)}
-				>
-					<Box
-						sx={{
-							...iconWrapperStyle,
-						}}
-					>
-						<NotificationIcon />
-					</Box>
-					<Box>
-						<Typography
-							variant="body1"
-							sx={{
-								fontWeight: 500,
-								lineHeight: 1.2,
-							}}
-						>
-							{t("incidentsPage.totalIncidents")} : {summary.total || 0}
-						</Typography>
-					</Box>
-				</Stack>
-				<Divider />
-				<Stack
-					direction="row"
-					alignItems="center"
-					gap={theme.spacing(2)}
-				>
-					<Box sx={iconWrapperStyle}>
-						<Incidents />
-					</Box>
-					<Box>
-						<Typography
-							variant="body1"
-							sx={{
-								fontWeight: 500,
-								lineHeight: 1.2,
-							}}
-						>
-							{t("incidentsPage.mostAffectedMonitor")} :{" "}
-							{summary.topMonitor?.monitorName || t("incidentsPage.unknownMonitor")}
-						</Typography>
-					</Box>
-				</Stack>
-				<Divider />
-				<Stack
-					direction="row"
-					alignItems="center"
-					gap={theme.spacing(2)}
-				>
-					<Box sx={iconWrapperStyle}>
-						<Clock />
-					</Box>
-					<Box>
-						<Typography
-							variant="body1"
-							sx={{
-								fontWeight: 600,
-							}}
-						>
-							{t("incidentsPage.avgResolutionTime")} :{" "}
-							{summary.avgResolutionTimeHours || 0} {t("incidentsPage.hours")}
-						</Typography>
-					</Box>
-				</Stack>
-				<Divider />
-
-				<Box padding={theme.spacing(2)}>
+				<Box>
 					<Stack
 						direction="row"
 						alignItems="center"
 						gap={theme.spacing(2)}
-						mb={theme.spacing(1.5)}
+						sx={rowStyle}
 					>
 						<Box sx={iconWrapperStyle}>
-							<ResolutionItem />
-						</Box>
-
-						<Box>
-							<Typography
-								variant="body1"
-								sx={{
-									fontWeight: 500,
-									lineHeight: 1.2,
-								}}
-							>
-								{t("incidentsPage.resolutions")}: {totalResolutions}
-							</Typography>
+							<Icon
+								name="Bell"
+								size={18}
+							/>
 						</Box>
+						<Typography
+							variant="body1"
+							fontWeight={500}
+						>
+							{t("incidentsPage.totalIncidents")}: {summary.total || 0}
+						</Typography>
 					</Stack>
-
-					<Box
-						sx={{
-							display: "flex",
-							height: 8,
-							borderRadius: 4,
-							overflow: "hidden",
-							bgcolor: theme.palette.accent.main,
-							width: "100%",
-							marginTop: theme.spacing(4),
-						}}
+					<Divider sx={{ mt: theme.spacing(2) }} />
+				</Box>
+				<Box>
+					<Stack
+						direction="row"
+						alignItems="center"
+						gap={theme.spacing(2)}
+						sx={rowStyle}
 					>
-						<Box
-							sx={{
-								width: `${automaticPercentage}%`,
-
-								bgcolor: theme.palette.warningSecondary.lowContrast,
-								height: "100%",
-							}}
+						<Box sx={iconWrapperStyle}>
+							<Icon
+								name="AlertTriangle"
+								size={18}
+							/>
+						</Box>
+						<Typography
+							variant="body1"
+							fontWeight={500}
+						>
+							{t("incidentsPage.mostAffectedMonitor")}: {getMostAffectedMonitor()}
+						</Typography>
+					</Stack>
+					<Divider sx={{ mt: theme.spacing(2) }} />
+				</Box>
+				<Stack
+					direction="row"
+					alignItems="center"
+					gap={theme.spacing(2)}
+					sx={rowStyle}
+				>
+					<Box sx={iconWrapperStyle}>
+						<Icon
+							name="Wrench"
+							size={18}
 						/>
 					</Box>
-					<Box
-						sx={{
-							display: "flex",
-							justifyContent: "space-between",
-							paddingTop: theme.spacing(4),
-							width: "100%",
-						}}
+					<Typography
+						variant="body1"
+						fontWeight={500}
 					>
-						{summary.totalAutomaticResolutions > 0 && (
-							<Typography
-								variant="body2"
-								fontWeight={500}
-								color={theme.palette.warningSecondary.contrastText}
-							>
-								{t("incidentsPage.automatic")} ({summary.totalAutomaticResolutions})
-							</Typography>
-						)}
-						{summary.totalManualResolutions > 0 && (
-							<Typography
-								variant="body2"
-								fontWeight={500}
-								color={theme.palette.accent.main}
-							>
-								{t("incidentsPage.manual")} ({summary.totalManualResolutions})
-							</Typography>
-						)}
-					</Box>
-				</Box>
+						{t("incidentsPage.avgResolutionTime")}:{" "}
+						{summary.total > 0
+							? `${summary.avgResolutionTimeHours || 0} ${t("incidentsPage.hours")}`
+							: "N/A"}
+					</Typography>
+				</Stack>
 			</Stack>
 		</SummaryCard>
 	);

client/src/Pages/Incidents2/Components/SummaryCard/index.jsx

@@ -8,17 +8,14 @@ const SummaryCard = ({ children, isHighPriority = false, sx = {}, title = null }
 		<Paper
 			elevation={0}
 			sx={{
-				padding: theme.spacing(4),
-				borderRadius: 3,
+				padding: "16px",
+				borderRadius: theme.shape.borderRadius,
 				height: "100%",
 				display: "flex",
 				flexDirection: "column",
 				justifyContent: "center",
 				backgroundColor: theme.palette.primary.main,
-				border: isHighPriority
-					? `${theme.spacing(1.5)} solid ${theme.palette.error.lowContrast}`
-					: `${theme.spacing(1)} solid ${theme.palette.divider}`,
-				boxShadow: theme.palette.tertiary.cardShadow,
+				border: `1px solid ${theme.palette.primary.lowContrast}`,
 				color: theme.palette.primary.contrastTextTertiary,
 				fontSize: theme.typography.body1.fontSize,
 				...sx,
@@ -33,13 +30,12 @@ const SummaryCard = ({ children, isHighPriority = false, sx = {}, title = null }
 						}}
 					>
 						<Typography
-							variant="h6"
+							component="h2"
 							sx={{
 								textTransform: "uppercase",
-								fontWeight: 700,
-								fontSize: theme.typography.h2.fontSize,
-
-								letterSpacing: theme.spacing(0.5),
+								fontWeight: 500,
+								fontSize: 13,
+								color: theme.palette.primary.contrastTextSecondary,
 							}}
 						>
 							{title}
@@ -49,9 +45,9 @@ const SummaryCard = ({ children, isHighPriority = false, sx = {}, title = null }
 				</Box>
 			)}
 			<Stack
-				mt={theme.spacing(4)}
-				paddingTop={theme.spacing(5)}
-				gap={theme.spacing(4)}
+				mt={theme.spacing(2)}
+				paddingTop={theme.spacing(2)}
+				gap={theme.spacing(2)}
 				sx={{ height: "100%" }}
 			>
 				{children}

client/src/Pages/Incidents2/index.jsx

@@ -87,8 +87,8 @@ const Incidents2 = () => {
 
 	useEffect(() => {
 		const lookup = monitors?.reduce((acc, monitor) => {
-			acc[monitor._id] = {
-				_id: monitor._id,
+			acc[monitor.id] = {
+				_id: monitor.id,
 				name: monitor.name,
 				type: monitor.type,
 			};

client/src/Pages/Infrastructure/Create/Components/MonitorActionButtons.jsx

@@ -2,8 +2,7 @@ import { useState } from "react";
 import { Box, Button } from "@mui/material";
 import { useTheme } from "@emotion/react";
 import { useTranslation } from "react-i18next";
-import PauseCircleOutlineIcon from "@mui/icons-material/PauseCircleOutline";
-import PlayCircleOutlineRoundedIcon from "@mui/icons-material/PlayCircleOutlineRounded";
+import Icon from "@/Components/v1/Icon";
 import Dialog from "@/Components/v1/Dialog/index.jsx";
 import PropTypes from "prop-types";
 
@@ -36,12 +35,18 @@ const MonitorActionButtons = ({ monitor, isBusy, handlePause, handleRemove }) =>
 			>
 				{monitor?.isActive ? (
 					<>
-						<PauseCircleOutlineIcon />
+						<Icon
+							name="PauseCircle"
+							size={20}
+						/>
 						{t("pause")}
 					</>
 				) : (
 					<>
-						<PlayCircleOutlineRoundedIcon />
+						<Icon
+							name="PlayCircle"
+							size={20}
+						/>
 						{t("resume")}
 					</>
 				)}

client/src/Pages/Infrastructure/Create/hooks/useInfrastructureSubmit.jsx

@@ -61,7 +61,7 @@ const useInfrastructureSubmit = () => {
 		};
 
 		const finalForm = {
-			...(isCreate ? {} : { _id: monitorId }),
+			...(isCreate ? {} : { id: monitorId }),
 			...rest,
 			description: form.name,
 			type: "hardware",

client/src/Pages/Infrastructure/Create/index.jsx

@@ -22,9 +22,9 @@ import { useTranslation } from "react-i18next";
 import {
 	useDeleteMonitor,
 	useFetchGlobalSettings,
-	useFetchHardwareMonitorById,
+	useFetchMonitorById,
 	usePauseMonitor,
-} from "../../../Hooks/monitorHooks.js";
+} from "@/Hooks/monitorHooks.js";
 import useInfrastructureMonitorForm from "./hooks/useInfrastructureMonitorForm.jsx";
 import useValidateInfrastructureForm from "./hooks/useValidateInfrastructureForm.jsx";
 import useInfrastructureSubmit from "./hooks/useInfrastructureSubmit.jsx";
@@ -37,14 +37,16 @@ const CreateInfrastructureMonitor = () => {
 	const { t } = useTranslation();
 
 	// State
+	const [monitor, setMonitor] = useState(null);
 	const [https, setHttps] = useState(false);
 	const [updateTrigger, setUpdateTrigger] = useState(false);
 	const [availableDisks, setAvailableDisks] = useState([]);
 
 	// Fetch monitor details if editing
-	const [monitor, isLoading] = useFetchHardwareMonitorById({
+	const [isLoading] = useFetchMonitorById({
 		monitorId,
-		updateTrigger,
+		setMonitor,
+		updateTrigger: true,
 	});
 	const [deleteMonitor, isDeleting] = useDeleteMonitor();
 	const [globalSettings, globalSettingsLoading] = useFetchGlobalSettings();
@@ -150,8 +152,7 @@ const CreateInfrastructureMonitor = () => {
 
 	const handleRemove = async (event) => {
 		event.preventDefault();
-		const TEMP_MONITOR = { id: monitor._id };
-		await deleteMonitor({ monitor: TEMP_MONITOR, redirect: "/infrastructure" });
+		await deleteMonitor({ monitor, redirect: "/infrastructure" });
 	};
 
 	const isBusy =

client/src/Pages/Infrastructure/Monitors/Components/Filters/index.jsx

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 import FilterHeader from "@/Components/v1/FilterHeader/index.jsx";
 import { useMemo } from "react";
 import { Box, Button } from "@mui/material";
-import ClearIcon from "@mui/icons-material/Clear";
+import Icon from "@/Components/v1/Icon";
 import { useTranslation } from "react-i18next";
 
 /**
@@ -68,7 +68,12 @@ const Filter = ({
 				color={theme.palette.primary.contrastText}
 				onClick={handleReset}
 				variant="contained"
-				endIcon={<ClearIcon />}
+				endIcon={
+					<Icon
+						name="X"
+						size={18}
+					/>
+				}
 				sx={{
 					visibility: isFilterActive ? "visible" : "hidden",
 				}}

client/src/Pages/Infrastructure/Monitors/Components/MonitorsTable/index.jsx

@@ -7,7 +7,7 @@ import { Stack } from "@mui/material";
 import { InfrastructureMenu } from "../MonitorsTableMenu/index.jsx";
 import LoadingSpinner from "../../../../Uptime/Monitors/Components/LoadingSpinner/index.jsx";
 // Assets
-import CPUChipIcon from "@/assets/icons/cpu-chip.svg?react";
+import Icon from "@/Components/v1/Icon";
 import CustomGauge from "@/Components/v1/Charts/CustomGauge/index.jsx";
 
 // Utils
@@ -67,9 +67,9 @@ const MonitorsTable = ({
 					alignItems={"center"}
 					gap=".25rem"
 				>
-					<CPUChipIcon
-						width={20}
-						height={20}
+					<Icon
+						name="Cpu"
+						size={20}
 					/>
 					{row.processor}
 				</Stack>

client/src/Pages/Infrastructure/Monitors/Components/MonitorsTableMenu/index.jsx

@@ -5,7 +5,7 @@ import { useTheme } from "@emotion/react";
 import { useNavigate } from "react-router-dom";
 import { createToast } from "@/Utils/toastUtils.jsx";
 import { IconButton, Menu, MenuItem } from "@mui/material";
-import Settings from "@/assets/icons/settings-bold.svg?react";
+import Icon from "@/Components/v1/Icon";
 import PropTypes from "prop-types";
 import Dialog from "@/Components/v1/Dialog/index.jsx";
 import { networkService } from "@/Utils/NetworkService.js";
@@ -100,7 +100,10 @@ const InfrastructureMenu = ({ monitor, isAdmin, updateCallback }) => {
 				}}
 				ref={anchor}
 			>
-				<Settings />
+				<Icon
+					name="Settings"
+					size={20}
+				/>
 			</IconButton>
 
 			<Menu

client/src/Pages/Logs/Diagnostics/components/gauges/index.jsx

@@ -12,13 +12,16 @@ import { Box } from "@mui/material";
 const BaseContainer = ({children}) => {
 	const theme = useTheme()
 	return(
-		<Box 
+		<Box
 			sx={{
 				padding: theme.spacing(3),
-				borderRadius: theme.spacing(2),
-				border: `1px solid ${theme.palette.divider}`,
-				minWidth: 250,
-				width: "fit-content",
+				borderRadius: 4,
+				border: `1px solid ${theme.palette.primary.lowContrast}`,
+				minWidth: 200,
+				width: `calc(25% - (3 * ${theme.spacing(8)} / 4))`,
+				[theme.breakpoints.down("md")]: {
+					width: `calc(50% - (1 * ${theme.spacing(8)} / 2))`,
+				},
 			}}>
 				{children}
 		</Box>
@@ -99,7 +102,7 @@ const Gauges = ({ diagnostics, isLoading }) => {
 	return (
 		<Stack
 			direction="row"
-			spacing={theme.spacing(8)}
+			gap={theme.spacing(8)}
 			flexWrap="wrap"
 		>
 			<InfrastructureStyleGauge

client/src/Pages/Logs/Logs/index.jsx

@@ -2,14 +2,17 @@ import Stack from "@mui/material/Stack";
 import Box from "@mui/material/Box";
 import Select from "@/Components/v1/Inputs/Select/index.jsx";
 import Typography from "@mui/material/Typography";
-import Divider from "@mui/material/Divider";
+import DataTable from "@/Components/v1/Table/index.jsx";
+import Pagination from "@/Components/v1/Table/TablePagination/index.jsx";
 
 import { useFetchLogs } from "../../../Hooks/logHooks.js";
 import { useTheme } from "@emotion/react";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 
-const formatLog = (theme, log, idx) => {
+const LevelBadge = ({ level }) => {
+	const theme = useTheme();
+
 	const levelColors = {
 		info: theme.palette.success.main,
 		warn: theme.palette.warning.main,
@@ -17,31 +20,38 @@ const formatLog = (theme, log, idx) => {
 		debug: theme.palette.accent.main,
 	};
 
-	const color = levelColors[log.level] || theme.palette.primary.contrastText;
+	const color = levelColors[level] || theme.palette.primary.contrastText;
 
 	return (
-		<span key={idx}>
-			<span>[{log.timestamp}]</span>{" "}
-			<span style={{ color, fontWeight: "bold" }}>{log.level.toUpperCase()}</span>
-			{": "}
-			{`(${log.service})`}
-			{`(${log.method})`}
-			{": "}
-			{log.message}
-			<br />
-		</span>
+		<Box
+			component="span"
+			sx={{
+				color: color,
+				fontWeight: 600,
+				textTransform: "uppercase",
+				fontSize: 12,
+			}}
+		>
+			{level}
+		</Box>
 	);
 };
 
-const Logs = () => {
-	// Local state
-	const [logLevel, setLogLevel] = useState("all");
+const formatTimestamp = (timestamp) => {
+	if (!timestamp) return "-";
+	const date = new Date(timestamp);
+	return date.toLocaleString();
+};
+
+const Logs = () => {
+	const [logLevel, setLogLevel] = useState("all");
+	const [page, setPage] = useState(0);
+	const [rowsPerPage, setRowsPerPage] = useState(15);
 
-	// Hooks
 	const theme = useTheme();
 	const { t } = useTranslation();
 	const [logs, isLoading, error] = useFetchLogs();
-	// Setup
+
 	const LOG_LEVELS = [
 		{ _id: "all", name: t("logsPage.logLevelSelect.values.all") },
 		{ _id: "info", name: t("logsPage.logLevelSelect.values.info") },
@@ -49,52 +59,116 @@ const Logs = () => {
 		{ _id: "error", name: t("logsPage.logLevelSelect.values.error") },
 		{ _id: "debug", name: t("logsPage.logLevelSelect.values.debug") },
 	];
+
+	const headers = [
+		{
+			id: "timestamp",
+			content: t("logsPage.table.timestamp"),
+			render: (row) => (
+				<Typography sx={{ fontSize: 13, fontFamily: "monospace" }}>
+					{formatTimestamp(row.timestamp)}
+				</Typography>
+			),
+		},
+		{
+			id: "level",
+			content: t("logsPage.table.level"),
+			render: (row) => <LevelBadge level={row.level} />,
+		},
+		{
+			id: "service",
+			content: t("logsPage.table.service"),
+			render: (row) => (
+				<Typography sx={{ fontSize: 13 }}>{row.service || "-"}</Typography>
+			),
+		},
+		{
+			id: "method",
+			content: t("logsPage.table.method"),
+			render: (row) => (
+				<Typography sx={{ fontSize: 13, fontFamily: "monospace" }}>{row.method || "-"}</Typography>
+			),
+		},
+		{
+			id: "message",
+			content: t("logsPage.table.message"),
+			render: (row) => (
+				<Typography
+					sx={{
+						fontSize: 13,
+						maxWidth: 400,
+						overflow: "hidden",
+						textOverflow: "ellipsis",
+						whiteSpace: "nowrap",
+					}}
+				>
+					{row.message || "-"}
+				</Typography>
+			),
+		},
+	];
+
+	const filteredLogs = logs
+		?.filter((log) => {
+			if (logLevel === "all") return true;
+			return log.level === logLevel;
+		})
+		.reverse()
+		.map((log, idx) => ({ ...log, id: idx }));
+
+	const paginatedLogs = filteredLogs?.slice(
+		page * rowsPerPage,
+		page * rowsPerPage + rowsPerPage
+	);
+
+	const handleChangePage = (event, newPage) => {
+		setPage(newPage);
+	};
+
+	const handleChangeRowsPerPage = (event) => {
+		setRowsPerPage(parseInt(event.target.value, 10));
+		setPage(0);
+	};
+
+	const handleLogLevelChange = (e) => {
+		setLogLevel(e.target.value);
+		setPage(0);
+	};
+
 	return (
 		<Stack gap={theme.spacing(4)}>
 			<Stack
 				direction="row"
 				alignItems="center"
 				gap={theme.spacing(4)}
-				sx={{
-					position: "sticky",
-					top: theme.spacing(17),
-					backdropFilter: "blur(10px)",
-					paddingTop: theme.spacing(4),
-					paddingLeft: theme.spacing(6),
-				}}
 			>
 				<Typography>{t("logsPage.logLevelSelect.title")}</Typography>
 				<Select
 					items={LOG_LEVELS}
 					value={logLevel}
-					onChange={(e) => {
-						setLogLevel(e.target.value);
-					}}
+					onChange={handleLogLevelChange}
 				/>
 			</Stack>
 
-			<Box
-				component="pre"
-				sx={{
-					fontFamily: "monospace",
-					color: theme.palette.primary.contrastText,
-					padding: 2,
-					borderRadius: 1,
-					overflowX: "auto",
-					whiteSpace: "pre-wrap",
-					wordWrap: "break-word",
+			<DataTable
+				shouldRender={!isLoading}
+				headers={headers}
+				data={paginatedLogs || []}
+				config={{
+					emptyView: t("logsPage.noLogs"),
 				}}
-			>
-				<code>
-					{logs
-						?.filter((log) => {
-							if (logLevel === "all") return true;
-							return log.level === logLevel;
-						})
-						.reverse()
-						.map((log, idx) => formatLog(theme, log, idx))}
-				</code>
-			</Box>
+			/>
+
+			{filteredLogs?.length > 0 && (
+				<Pagination
+					paginationLabel={t("logsPage.table.logs")}
+					itemCount={filteredLogs?.length || 0}
+					page={page}
+					rowsPerPage={rowsPerPage}
+					handleChangePage={handleChangePage}
+					handleChangeRowsPerPage={handleChangeRowsPerPage}
+				/>
+			)}
 		</Stack>
 	);
 };

client/src/Pages/Maintenance/CreateMaintenance/Components/MonitorList/index.jsx

@@ -1,6 +1,6 @@
 // Components
 import { Stack, Typography } from "@mui/material";
-import DeleteIcon from "@mui/icons-material/Delete";
+import Icon from "@/Components/v1/Icon";
 import { useTheme } from "@emotion/react";
 import PropTypes from "prop-types";
 
@@ -14,8 +14,10 @@ const MonitorListItem = ({ monitor, onDelete }) => {
 			width="100%"
 		>
 			<Typography flexGrow={1}>{monitor.name}</Typography>
-			<DeleteIcon
-				sx={{ cursor: "pointer" }}
+			<Icon
+				name="Trash2"
+				size={20}
+				style={{ cursor: "pointer" }}
 				onClick={() => onDelete(monitor)}
 			/>
 		</Stack>

client/src/Pages/Maintenance/CreateMaintenance/index.jsx

@@ -16,7 +16,7 @@ import useMaintenanceActions from "./hooks/useMaintenanceActions.jsx";
 
 import TextInput from "@/Components/v1/Inputs/TextInput/index.jsx";
 import Breadcrumbs from "@/Components/v1/Breadcrumbs/index.jsx";
-import CalendarIcon from "@/assets/icons/calendar.svg?react";
+import Icon from "@/Components/v1/Icon";
 import "./index.css";
 import Search from "@/Components/v1/Inputs/Search/index.jsx";
 import { logger } from "@/Utils/Logger.js";
@@ -217,7 +217,14 @@ const CreateMaintenance = () => {
 									disablePast
 									disableHighlightToday
 									value={form.startDate}
-									slots={{ openPickerIcon: () => <CalendarIcon /> }}
+									slots={{
+										openPickerIcon: () => (
+											<Icon
+												name="Calendar"
+												size={20}
+											/>
+										),
+									}}
 									slotProps={{
 										switchViewButton: { sx: { display: "none" } },
 										nextIconButton: { sx: { ml: theme.spacing(2) } },

client/src/Pages/Maintenance/MaintenanceTable/ActionsMenu/index.jsx

@@ -4,7 +4,7 @@ import { useNavigate } from "react-router-dom";
 import { useSelector } from "react-redux";
 import { IconButton, Menu, MenuItem } from "@mui/material";
 import { logger } from "@/Utils/Logger.js";
-import Settings from "@/assets/icons/settings-bold.svg?react";
+import Icon from "@/Components/v1/Icon";
 import PropTypes from "prop-types";
 import { networkService } from "../../../../main.jsx";
 import { createToast } from "@/Utils/toastUtils.jsx";
@@ -98,7 +98,10 @@ const ActionsMenu = ({ /* isAdmin, */ maintenanceWindow, updateCallback }) => {
 					},
 				}}
 			>
-				<Settings />
+				<Icon
+					name="Settings"
+					size={20}
+				/>
 			</IconButton>
 
 			<Menu

client/src/Pages/Maintenance/MaintenanceTable/index.jsx

@@ -2,8 +2,7 @@ import PropTypes from "prop-types";
 import { Box } from "@mui/material";
 import DataTable from "@/Components/v1/Table/index.jsx";
 import Pagination from "@/Components/v1/Table/TablePagination/index.jsx";
-import ArrowDownwardRoundedIcon from "@mui/icons-material/ArrowDownwardRounded";
-import ArrowUpwardRoundedIcon from "@mui/icons-material/ArrowUpwardRounded";
+import Icon from "@/Components/v1/Icon";
 import ActionsMenu from "./ActionsMenu/index.jsx";
 import { memo } from "react";
 import { useDispatch, useSelector } from "react-redux";
@@ -68,9 +67,15 @@ const MaintenanceTable = ({
 						}}
 					>
 						{sort.order === "asc" ? (
-							<ArrowUpwardRoundedIcon />
+							<Icon
+								name="ArrowUp"
+								size={18}
+							/>
 						) : (
-							<ArrowDownwardRoundedIcon />
+							<Icon
+								name="ArrowDown"
+								size={18}
+							/>
 						)}
 					</span>
 				</Box>
@@ -89,9 +94,15 @@ const MaintenanceTable = ({
 						}}
 					>
 						{sort.order === "asc" ? (
-							<ArrowUpwardRoundedIcon />
+							<Icon
+								name="ArrowUp"
+								size={18}
+							/>
 						) : (
-							<ArrowDownwardRoundedIcon />
+							<Icon
+								name="ArrowDown"
+								size={18}
+							/>
 						)}
 					</span>
 				</Box>

client/src/Pages/Notifications/components/ActionMenu.jsx

@@ -1,7 +1,7 @@
 // Components
 import Menu from "@mui/material/Menu";
 import IconButton from "@mui/material/IconButton";
-import SettingsOutlinedIcon from "@mui/icons-material/SettingsOutlined";
+import Icon from "@/Components/v1/Icon";
 import MenuItem from "@mui/material/MenuItem";
 
 // Utils
@@ -49,7 +49,10 @@ const ActionMenu = ({ notification, onDelete }) => {
 				onClick={handleClick}
 				onMouseDown={(e) => e.stopPropagation()}
 			>
-				<SettingsOutlinedIcon />
+				<Icon
+					name="Settings"
+					size={20}
+				/>
 			</IconButton>
 
 			<Menu

client/src/Pages/PageSpeed/Create/index.jsx

@@ -3,10 +3,9 @@ import { Box, Stack, Tooltip, Typography, Button, ButtonGroup } from "@mui/mater
 import ConfigBox from "@/Components/v1/ConfigBox/index.jsx";
 import Select from "@/Components/v1/Inputs/Select/index.jsx";
 import TextInput from "@/Components/v1/Inputs/TextInput/index.jsx";
-import PauseCircleOutlineIcon from "@mui/icons-material/PauseCircleOutline";
+import Icon from "@/Components/v1/Icon";
 import Breadcrumbs from "@/Components/v1/Breadcrumbs/index.jsx";
 import PulseDot from "@/Components/v1/Animated/PulseDot.jsx";
-import PlayCircleOutlineRoundedIcon from "@mui/icons-material/PlayCircleOutlineRounded";
 import SkeletonLayout from "./skeleton.jsx";
 import NotificationsConfig from "@/Components/v1/NotificationConfig/index.jsx";
 import Dialog from "@/Components/v1/Dialog/index.jsx";
@@ -178,8 +177,7 @@ const PageSpeedSetup = () => {
 
 	const handleRemove = async (event) => {
 		event.preventDefault();
-		const TEMP_MONITOR = { id: monitor._id };
-		await deleteMonitor({ monitor: TEMP_MONITOR, redirect: "/pagespeed" });
+		await deleteMonitor({ monitor: { id: monitorId }, redirect: "/pagespeed" });
 	};
 
 	const isBusy = isLoading || isCreating || isDeleting || isUpdating || isPausing;
@@ -314,12 +312,18 @@ const PageSpeedSetup = () => {
 							>
 								{monitor?.isActive ? (
 									<>
-										<PauseCircleOutlineIcon />
+										<Icon
+											name="PauseCircle"
+											size={20}
+										/>
 										{t("pause")}
 									</>
 								) : (
 									<>
-										<PlayCircleOutlineRoundedIcon />
+										<Icon
+											name="PlayCircle"
+											size={20}
+										/>
 										{t("resume")}
 									</>
 								)}

client/src/Pages/PageSpeed/Details/Components/Charts/AreaChartLegend.jsx

@@ -1,6 +1,6 @@
 import { Box, Typography, Divider } from "@mui/material";
 import Checkbox from "@/Components/v1/Inputs/Checkbox/index.jsx";
-import MetricsIcon from "@/assets/icons/ruler-icon.svg?react";
+import Icon from "@/Components/v1/Icon";
 import LegendBox from "@/Components/v1/Charts/LegendBox/index.jsx";
 import { useTranslation } from "react-i18next";
 import { useTheme } from "@emotion/react";
@@ -10,7 +10,12 @@ const AreaChartLegend = ({ metrics, handleMetrics }) => {
 	const { t } = useTranslation();
 	return (
 		<LegendBox
-			icon={<MetricsIcon />}
+			icon={
+				<Icon
+					name="Ruler"
+					size={20}
+				/>
+			}
 			header="Metrics"
 		>
 			<Box>

client/src/Pages/PageSpeed/Details/Components/Charts/PieChartLegend.jsx

@@ -1,7 +1,7 @@
 import { Stack, Box, Typography } from "@mui/material";
 import { useTheme } from "@emotion/react";
 import LegendBox from "@/Components/v1/Charts/LegendBox/index.jsx";
-import SpeedometerIcon from "@/assets/icons/speedometer-icon.svg?react";
+import Icon from "@/Components/v1/Icon";
 import PropTypes from "prop-types";
 
 const PieChartLegend = ({ audits }) => {
@@ -9,7 +9,12 @@ const PieChartLegend = ({ audits }) => {
 
 	return (
 		<LegendBox
-			icon={<SpeedometerIcon />}
+			icon={
+				<Icon
+					name="Gauge"
+					size={20}
+				/>
+			}
 			header="Performance metrics"
 			sx={{ flex: 1 }}
 		>

client/src/Pages/PageSpeed/Details/Components/PageSpeedAreaChart/index.jsx

@@ -2,7 +2,7 @@ import ChartBox from "@/Components/v1/Charts/ChartBox/index.jsx";
 import AreaChart from "../Charts/AreaChart.jsx";
 import AreaChartLegend from "../Charts/AreaChartLegend.jsx";
 import SkeletonLayout from "./skeleton.jsx";
-import ScoreIcon from "@/assets/icons/monitor-graph-line.svg?react";
+import Icon from "@/Components/v1/Icon";
 import { Stack } from "@mui/material";
 import PropTypes from "prop-types";
 
@@ -24,7 +24,12 @@ const PageSpeedAreaChart = ({ shouldRender, monitor, metrics, handleMetrics }) =
 		>
 			<ChartBox
 				justifyContent="flex-start"
-				icon={<ScoreIcon />}
+				icon={
+					<Icon
+						name="TrendingUp"
+						size={20}
+					/>
+				}
 				header="Score history"
 				height="100%"
 				borderRadiusRight={16}

client/src/Pages/PageSpeed/Details/Components/PageSpeedStatusBoxes/index.jsx

@@ -4,9 +4,21 @@ import { Typography } from "@mui/material";
 import { getHumanReadableDuration } from "../../../../../Utils/timeUtils.js";
 import { useTranslation } from "react-i18next";
 
-const PageSpeedStatusBoxes = ({ shouldRender, monitor }) => {
-	const uptimeDuration = getHumanReadableDuration(monitor?.uptimeDuration);
-	const time = getHumanReadableDuration(monitor?.lastChecked);
+const PageSpeedStatusBoxes = ({ shouldRender, monitorStats }) => {
+	const lastChecked = monitorStats?.lastCheckTimestamp
+		? Date.now() - monitorStats.lastCheckTimestamp
+		: 0;
+
+	// Determine time since last failure
+	const timeOfLastFailure = monitorStats?.timeOfLastFailure;
+	const timeSinceLastFailure =
+		timeOfLastFailure > 0
+			? Date.now() - timeOfLastFailure
+			: Date.now() - new Date(monitorStats?.createdAt);
+
+	const streakTime = getHumanReadableDuration(timeSinceLastFailure);
+
+	const time = getHumanReadableDuration(lastChecked);
 
 	const { t } = useTranslation();
 
@@ -16,7 +28,7 @@ const PageSpeedStatusBoxes = ({ shouldRender, monitor }) => {
 				heading="checks since"
 				subHeading={
 					<>
-						{uptimeDuration}
+						{streakTime}
 						<Typography component="span">{t("ago")}</Typography>
 					</>
 				}

client/src/Pages/PageSpeed/Details/Components/PerformanceReport/index.jsx

@@ -1,5 +1,5 @@
 import ChartBox from "@/Components/v1/Charts/ChartBox/index.jsx";
-import PerformanceIcon from "@/assets/icons/performance-report.svg?react";
+import Icon from "@/Components/v1/Icon";
 import PieChart from "../Charts/PieChart.jsx";
 import { Typography } from "@mui/material";
 import { useTheme } from "@emotion/react";
@@ -17,7 +17,12 @@ const PerformanceReport = ({ shouldRender, audits }) => {
 
 	return (
 		<ChartBox
-			icon={<PerformanceIcon />}
+			icon={
+				<Icon
+					name="Layers"
+					size={20}
+				/>
+			}
 			header="Performance report"
 			Legend={<PieChartLegend audits={audits} />}
 			borderRadiusRight={16}

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

@@ -35,7 +35,7 @@ const PageSpeedDetails = () => {
 	});
 	const [trigger, setTrigger] = useState(false);
 	// Network
-	const [monitor, isLoading, networkError] = useFetchPageSpeedMonitorById({
+	const [monitor, monitorStats, isLoading, networkError] = useFetchPageSpeedMonitorById({
 		monitorId,
 		dateRange: "day",
 		updateTrigger: trigger,
@@ -95,7 +95,7 @@ const PageSpeedDetails = () => {
 			/>
 			<PageSpeedStatusBoxes
 				shouldRender={!isLoading}
-				monitor={monitor}
+				monitorStats={monitorStats}
 			/>
 			<MonitorTimeFrameHeader
 				shouldRender={!isLoading}

client/src/Pages/PageSpeed/Monitors/Components/Card/index.jsx

@@ -1,6 +1,5 @@
 import PropTypes from "prop-types";
-// import PageSpeedIcon from "../../../../assets/icons/page-speed.svg?react";
-import PageSpeedIcon from "@/assets/icons/page-speed.svg?react";
+import Icon from "@/Components/v1/Icon";
 import { StatusLabel } from "@/Components/v1/Label/index.jsx";
 import { Box, Grid, Stack, Typography } from "@mui/material";
 import { useNavigate } from "react-router-dom";
@@ -241,7 +240,10 @@ const Card = ({ monitor }) => {
 				}}
 			>
 				<IconBox>
-					<PageSpeedIcon />
+					<Icon
+						name="Gauge"
+						size={20}
+					/>
 				</IconBox>
 				<Typography
 					component="h2"

client/src/Pages/StatusPage/Create/Components/MonitorList/index.jsx

@@ -1,7 +1,6 @@
 // Components
 import { Stack, Typography } from "@mui/material";
-import ReorderRoundedIcon from "@mui/icons-material/ReorderRounded";
-import DeleteIcon from "@mui/icons-material/Delete";
+import Icon from "@/Components/v1/Icon";
 
 // Utils
 import { DragDropContext, Droppable, Draggable } from "@hello-pangea/dnd";
@@ -28,10 +27,15 @@ const MonitorListItem = ({
 			justifyContent={"start"}
 			border={`1px solid ${theme.palette.primary.lowContrast}`}
 		>
-			<ReorderRoundedIcon />
+			<Icon
+				name="GripVertical"
+				size={20}
+			/>
 			<Typography>{monitor.name}</Typography>
-			<DeleteIcon
-				sx={{ marginLeft: "auto" }}
+			<Icon
+				name="Trash2"
+				size={20}
+				style={{ marginLeft: "auto", cursor: "pointer" }}
 				onClick={() => {
 					onDelete(monitor);
 				}}

client/src/Pages/StatusPage/Create/Components/Progress/index.jsx

@@ -1,6 +1,6 @@
 import { Button, Box } from "@mui/material";
 import ProgressUpload from "@/Components/v1/ProgressBars/index.jsx";
-import ImageIcon from "@mui/icons-material/Image";
+import Icon from "@/Components/v1/Icon";
 import { useTranslation } from "react-i18next";
 import { formatBytes } from "../../../../../Utils/fileUtils.js";
 const Progress = ({ isLoading, progressValue, logo, logoType, removeLogo, errors }) => {
@@ -8,7 +8,12 @@ const Progress = ({ isLoading, progressValue, logo, logoType, removeLogo, errors
 	if (isLoading) {
 		return (
 			<ProgressUpload
-				icon={<ImageIcon />}
+				icon={
+					<Icon
+						name="Image"
+						size={20}
+					/>
+				}
 				label={logo?.name}
 				size={formatBytes(logo?.size)}
 				progress={progressValue}

client/src/Pages/StatusPage/Status/Components/ControlsHeader/index.jsx

@@ -1,9 +1,8 @@
 // Components
 import { Box, Stack, Typography, Button } from "@mui/material";
 import Image from "@/Components/v1/Image/index.jsx";
-import SettingsIcon from "@/assets/icons/settings-bold.svg?react";
+import Icon from "@/Components/v1/Icon";
 import ThemeSwitch from "@/Components/v1/ThemeSwitch/index.jsx";
-import ArrowOutwardIcon from "@mui/icons-material/ArrowOutward";
 //Utils
 import { useTheme } from "@mui/material/styles";
 import { useNavigate } from "react-router-dom";
@@ -46,7 +45,12 @@ const Controls = ({ url, type }) => {
 						},
 					}}
 				>
-					<SettingsIcon /> {t("configure")}
+					<Icon
+						name="Settings"
+						size={18}
+						style={{ marginRight: "8px" }}
+					/>{" "}
+					{t("configure")}
 				</Button>
 			</Box>
 		</Stack>
@@ -111,7 +115,10 @@ const ControlsHeader = ({ statusPage, isPublic, url, type = "uptime" }) => {
 						}}
 					>
 						<Typography>{t("publicLink")}</Typography>
-						<ArrowOutwardIcon />
+						<Icon
+							name="ExternalLink"
+							size={18}
+						/>
 					</Stack>
 				)}
 			</Stack>