Fix formatting issues

Restore refresh token functionality for seamless session renewal
## Summary Restores refresh token functionality that was lost during a previous refactor. This enables seamless session renewal without forcing users to re-login when their access token expires. ## Server changes - Add refresh token configuration to settingsService (7d TTL by default) - Add issueRefreshToken method to userService - Update login/register/resetPassword to return refreshToken - Add refreshAuthToken method to userService for token refresh - Add refreshAuthToken controller method - Add POST /auth/refresh route - Update verifyJWT middleware to return 403 for expired tokens (triggers refresh) and 401 for invalid tokens (triggers logout) ## Client changes - Store refreshToken in Redux auth state - Clear refreshToken on logout - Add setAuthToken action for updating token after refresh - Update NetworkService to handle 403 responses: - Call /auth/refresh endpoint to get new token - Retry failed request with new token - Queue concurrent requests during refresh - Redirect to login if refresh fails
2026-01-15 22:31:05 -05:00 · 2026-01-15 22:28:07 -05:00
809 changed files with 44582 additions and 33611 deletions
@@ -3,6 +3,3 @@
 .VSCodeCounter
 *.sh
 mongo
-node_modules/
-docs/architecture
-docs/reviews
@@ -1,4 +0,0 @@
-#!/bin/sh
-echo "Running lint-staged..."
-cd client && npx lint-staged && cd ..
-cd server && npx lint-staged && cd ..
@@ -1,145 +0,0 @@
-# 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
@@ -79,8 +79,9 @@ You can see the memory footprint of MongoDB and Redis on the same server (398Mb

 If you have any questions, suggestions or comments, you have several options: 

- [Discord channel](https://discord.gg/NAb6H3UTjK) (preferred)
- [GitHub Discussions](https://github.com/bluewave-labs/bluewave-uptime/discussions) (we check here from time to time)
+- [Discord channel](https://discord.gg/NAb6H3UTjK)
+- [GitHub Discussions](https://github.com/bluewave-labs/bluewave-uptime/discussions)
+- [Reddit group](https://www.reddit.com/r/CheckmateMonitoring/)

 Feel free to ask questions or share your ideas - we'd love to hear from you!

@@ -147,7 +148,7 @@ If you would like to sponsor an additional feature, [see this page](https://chec

 ## Contributing

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

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

@@ -18,7 +18,7 @@
 		<div id="root"></div>
 		<script
 			type="module"
-			src="/src/main.tsx"
+			src="/src/main.jsx"
 		></script>
 	</body>
 </html>
@@ -12,18 +12,16 @@
 		"format": "prettier --write .",
 		"format-check": "prettier --check ."
 	},
-	"lint-staged": {
-		"**/*": "npm run format"
-	},
 	"dependencies": {
 		"@emotion/react": "^11.13.3",
 		"@emotion/styled": "^11.13.0",
 		"@hello-pangea/dnd": "^18.0.0",
 		"@hookform/resolvers": "5.2.2",
-		"@mui/lab": "7.0.0",
-		"@mui/material": "7.3.7",
-		"@mui/x-charts": "7.29.1",
-		"@mui/x-date-pickers": "7.29.4",
+		"@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",
+		"@mui/x-date-pickers": "7.29.0",
 		"@reduxjs/toolkit": "2.7.0",
 		"axios": "^1.7.4",
 		"dayjs": "1.11.13",
@@ -32,13 +30,11 @@
 		"human-interval": "2.0.1",
 		"i18next": "25.4.2",
 		"joi": "17.13.3",
-		"lucide-react": "^0.562.0",
-		"mui-color-input": "^7.0.0",
-		"pretty-bytes": "^7.1.0",
-		"pretty-ms": "^9.3.0",
+		"mui-color-input": "^6.0.0",
+		"pretty-ms": "9.3.0",
 		"react": "18.3.1",
 		"react-dom": "^18.2.0",
-		"react-hook-form": "^7.63.0",
+		"react-hook-form": "7.63.0",
 		"react-i18next": "^15.4.0",
 		"react-icons": "5.5.0",
 		"react-redux": "9.2.0",
@@ -47,9 +43,9 @@
 		"react-toastify": "^10.0.5",
 		"recharts": "2.15.2",
 		"redux-persist": "6.0.0",
-		"swr": "^2.3.6",
+		"swr": "2.3.6",
 		"vite-plugin-svgr": "^4.2.0",
-		"zod": "^4.1.11"
+		"zod": "4.1.11"
 	},
 	"devDependencies": {
 		"@types/node": "24.5.2",
@@ -60,7 +56,6 @@
 		"eslint-plugin-react": "^7.34.1",
 		"eslint-plugin-react-hooks": "^5.0.0",
 		"eslint-plugin-react-refresh": "^0.4.6",
-		"lint-staged": "^16.2.7",
 		"prettier": "^3.3.3",
 		"typescript": "5.9.3",
 		"vite": "6.3.6"
@@ -0,0 +1,36 @@
+import { useEffect } from "react";
+import { useSelector } from "react-redux";
+import "react-toastify/dist/ReactToastify.css";
+import { ToastContainer } from "react-toastify";
+import { ThemeProvider } from "@emotion/react";
+import lightTheme from "./Utils/Theme/lightTheme";
+import darkTheme from "./Utils/Theme/darkTheme";
+import { CssBaseline, GlobalStyles } from "@mui/material";
+import { logger } from "./Utils/Logger"; // Import the logger
+import { networkService } from "./main";
+import { Routes } from "./Routes";
+import AppLayout from "@/Components/v1/Layouts/AppLayout";
+
+function App() {
+	const mode = useSelector((state) => state.ui.mode);
+
+	// Cleanup
+	useEffect(() => {
+		return () => {
+			logger.cleanup();
+			networkService.cleanup();
+		};
+	}, []);
+
+	return (
+		<ThemeProvider theme={mode === "light" ? lightTheme : darkTheme}>
+			<CssBaseline />
+			<AppLayout>
+				<Routes />
+			</AppLayout>
+			<ToastContainer />
+		</ThemeProvider>
+	);
+}
+
+export default App;
@@ -1,46 +0,0 @@
-import { type CSSProperties } from "react";
-import { useSelector } from "react-redux";
-import "react-toastify/dist/ReactToastify.css";
-import { ToastContainer } from "react-toastify";
-import { ThemeProvider } from "@emotion/react";
-import lightTheme from "./Utils/Theme/lightTheme";
-import darkTheme from "./Utils/Theme/darkTheme";
-import { CssBaseline, GlobalStyles } from "@mui/material";
-import { Routes } from "./Routes";
-import AppLayout from "@/Components/v2/layout/AppLayout";
-import type { RootState } from "@/Types/state";
-
-function App() {
-	const mode = useSelector((state: RootState) => state.ui.mode);
-
-	const theme = mode === "light" ? lightTheme : darkTheme;
-
-	return (
-		<ThemeProvider theme={theme}>
-			<CssBaseline />
-			<GlobalStyles
-				styles={{
-					body: {
-						// @ts-ignore
-						backgroundColor: theme.palette.background.main,
-					},
-				}}
-			/>
-			<AppLayout>
-				<Routes />
-			</AppLayout>
-			<ToastContainer
-				newestOnTop={true}
-				theme={mode}
-				style={
-					{
-						"--toastify-color-progress-light": "#7C8BA1",
-						"--toastify-color-progress-dark": "#7C8BA1",
-					} as CSSProperties
-				}
-			/>
-		</ThemeProvider>
-	);
-}
-
-export default App;
@@ -0,0 +1,53 @@
+.wallet-adapter-dropdown {
+	width: 100%;
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+	align-items: center;
+	gap: var(--env-var-spacing-1);
+}
+
+.wallet-adapter-button {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: auto;
+	height: var(--env-var-height-2) !important;
+	font-size: var(--env-var-font-size-medium-plus) !important;
+	font-weight: 500 !important;
+	margin: 0;
+	padding: calc(
+			(var(--env-var-height-2) - var(--env-var-font-size-medium-plus) * 1.2) / 2
+		)
+		var(--env-var-spacing-1);
+	white-space: nowrap;
+}
+
+.wallet-adapter-modal-title {
+	font-size: var(--font-size-h5) !important;
+}
+
+/* Separator styling */
+.wallet-adapter-modal-divider {
+	background-color: var(--border-color) !important;
+	margin: var(--spacing-md) 0 !important;
+}
+
+/* Responsive fixes */
+@media (max-width: 1200px) {
+	.wallet-adapter-button {
+		font-size: var(--env-var-font-size-medium) !important;
+		padding: calc((var(--env-var-height-2) - var(--env-var-font-size-medium) * 1.2) / 2)
+			var(--env-var-spacing-1-minus) !important;
+	}
+}
+
+@media (max-width: 900px) {
+	.wallet-adapter-modal-wrapper {
+		flex-direction: column !important;
+	}
+
+	.wallet-adapter-modal-divider {
+		margin: var(--spacing-sm) 0 !important;
+	}
+}
@@ -0,0 +1,50 @@
+// import { useMemo } from "react";
+// import { ConnectionProvider, WalletProvider } from "@solana/wallet-adapter-react";
+// import { WalletAdapterNetwork } from "@solana/wallet-adapter-base";
+// import {
+// 	UnsafeBurnerWalletAdapter,
+// 	PhantomWalletAdapter,
+// } from "@solana/wallet-adapter-wallets";
+
+// import { WalletModalProvider } from "@solana/wallet-adapter-react-ui";
+// import { clusterApiUrl } from "@solana/web3.js";
+// import PropTypes from "prop-types";
+// import "./index.css";
+
+// // Default styles that can be overridden by your app
+// import "@solana/wallet-adapter-react-ui/styles.css";
+
+// export const Wallet = ({ children }) => {
+// 	// The network can be set to 'devnet', 'testnet', or 'mainnet-beta'.
+// 	const network = WalletAdapterNetwork.Mainnet;
+
+// 	// You can also provide a custom RPC endpoint.
+// 	const endpoint = useMemo(() => clusterApiUrl(network), [network]);
+
+// 	const wallets = useMemo(
+// 		() => [new PhantomWalletAdapter()],
+// 		// eslint-disable-next-line react-hooks/exhaustive-deps
+// 		[network]
+// 	);
+
+// 	return (
+// 		<ConnectionProvider endpoint={endpoint}>
+// 			<WalletProvider
+// 				wallets={wallets}
+// 				autoConnect
+// 			>
+// 				<WalletModalProvider>{children}</WalletModalProvider>
+// 			</WalletProvider>
+// 		</ConnectionProvider>
+// 	);
+// };
+
+// Wallet.propTypes = {
+// 	children: PropTypes.node,
+// };
+
+const Wallet = ({ children }) => {
+	return children;
+};
+
+export default Wallet;
@@ -0,0 +1,226 @@
+// Components
+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 Dialog from "../Dialog/index.jsx";
+
+// Utils
+import { useState } from "react";
+import { useTheme } from "@emotion/react";
+import { useNavigate } from "react-router-dom";
+import { createToast } from "../../../Utils/toastUtils.jsx";
+
+import PropTypes from "prop-types";
+import { usePauseMonitor, useDeleteMonitor } from "../../../Hooks/monitorHooks.js";
+
+const ActionsMenu = ({
+	monitor,
+	isAdmin,
+	updateRowCallback,
+	pauseCallback,
+	setIsLoading = () => {},
+}) => {
+	const [anchorEl, setAnchorEl] = useState(null);
+	const [actions, setActions] = useState({});
+	const [isOpen, setIsOpen] = useState(false);
+	const theme = useTheme();
+	const [pauseMonitor, isPausing, error] = usePauseMonitor();
+	const [deleteMonitor, isDeleting] = useDeleteMonitor();
+
+	const handleRemove = async (event) => {
+		event.preventDefault();
+		event.stopPropagation();
+		let monitor = { id: actions.id };
+		console.log(monitor);
+		await deleteMonitor({ monitor });
+		updateRowCallback();
+	};
+
+	const handlePause = async () => {
+		try {
+			setIsLoading(true);
+			await pauseMonitor({ monitorId: monitor.id });
+			pauseCallback();
+		} catch (error) {
+			createToast({ body: "Failed to pause monitor." });
+		} finally {
+			setIsLoading(false);
+		}
+	};
+
+	const openMenu = (event, id, url) => {
+		event.preventDefault();
+		event.stopPropagation();
+		setAnchorEl(event.currentTarget);
+		setActions({ id: id, url: url });
+	};
+
+	const openRemove = (e) => {
+		closeMenu(e);
+		setIsOpen(true);
+	};
+
+	const closeMenu = (e) => {
+		e.stopPropagation();
+		setAnchorEl(null);
+	};
+
+	const navigate = useNavigate();
+	return (
+		<>
+			<IconButton
+				aria-label="monitor actions"
+				onClick={(event) => {
+					event.stopPropagation();
+					openMenu(event, monitor.id, monitor.type === "ping" ? null : monitor.url);
+				}}
+				sx={{
+					"&:focus": {
+						outline: "none",
+					},
+					"& svg path": {
+						stroke: theme.palette.primary.contrastTextTertiary,
+					},
+				}}
+			>
+				<Settings />
+			</IconButton>
+
+			<Menu
+				className="actions-menu"
+				anchorEl={anchorEl}
+				open={Boolean(anchorEl)}
+				onClose={(e) => closeMenu(e)}
+				disableScrollLock
+				slotProps={{
+					paper: {
+						sx: {
+							"& ul": {
+								p: theme.spacing(2.5),
+								backgroundColor: theme.palette.primary.main,
+							},
+							"& li": { m: 0, color: theme.palette.primary.contrastTextSecondary },
+							/* 
+							This should not be set automatically on the last of type
+							"& li:last-of-type": {
+								color: theme.palette.error.main,
+							}, */
+						},
+					},
+				}}
+			>
+				{actions.url !== null ? (
+					<MenuItem
+						onClick={(e) => {
+							closeMenu(e);
+							e.stopPropagation();
+							window.open(actions.url, "_blank", "noreferrer");
+						}}
+					>
+						Open site
+					</MenuItem>
+				) : (
+					""
+				)}
+				<MenuItem
+					onClick={(e) => {
+						e.stopPropagation();
+						navigate(`/uptime/${actions.id}`);
+					}}
+				>
+					Details
+				</MenuItem>
+				{/* TODO - pass monitor id to Incidents page */}
+				<MenuItem
+					onClick={(e) => {
+						e.stopPropagation();
+						navigate(`/incidents/${actions.id}`);
+					}}
+				>
+					Incidents
+				</MenuItem>
+				{isAdmin && (
+					<MenuItem
+						onClick={(e) => {
+							e.stopPropagation();
+
+							navigate(`/uptime/configure/${actions.id}`);
+						}}
+					>
+						Configure
+					</MenuItem>
+				)}
+				{isAdmin && (
+					<MenuItem
+						onClick={(e) => {
+							e.stopPropagation();
+							navigate(`/uptime/create/${actions.id}`);
+						}}
+					>
+						Clone
+					</MenuItem>
+				)}
+				{isAdmin && (
+					<MenuItem
+						onClick={(e) => {
+							closeMenu(e);
+
+							e.stopPropagation();
+							handlePause(e);
+						}}
+					>
+						{monitor?.isActive === true ? "Pause" : "Resume"}
+					</MenuItem>
+				)}
+				{isAdmin && (
+					<MenuItem
+						onClick={(e) => {
+							e.stopPropagation();
+							openRemove(e);
+						}}
+						sx={{ "&.MuiButtonBase-root": { color: theme.palette.error.main } }}
+					>
+						Remove
+					</MenuItem>
+				)}
+			</Menu>
+			<Dialog
+				open={isOpen}
+				theme={theme}
+				title="Do you really want to delete this monitor?"
+				description="Once deleted, this monitor cannot be retrieved."
+				/* Do we need stop propagation? */
+				onCancel={(e) => {
+					e.stopPropagation();
+					setIsOpen(false);
+				}}
+				confirmationButtonLabel="Delete"
+				/* Do we need stop propagation? */
+				onConfirm={(e) => {
+					console.log(e);
+					e.stopPropagation();
+					handleRemove(e);
+				}}
+				isLoading={isDeleting}
+				modelTitle="modal-delete-monitor"
+				modelDescription="delete-monitor-confirmation"
+			/>
+		</>
+	);
+};
+
+ActionsMenu.propTypes = {
+	monitor: PropTypes.shape({
+		id: PropTypes.string,
+		url: PropTypes.string,
+		type: PropTypes.string,
+		isActive: PropTypes.bool,
+	}).isRequired,
+	isAdmin: PropTypes.bool,
+	updateRowCallback: PropTypes.func,
+	pauseCallback: PropTypes.func,
+	setIsLoading: PropTypes.func,
+};
+
+export default ActionsMenu;
@@ -0,0 +1,9 @@
+.alert {
+	margin: 0;
+	width: fit-content;
+}
+.alert,
+.alert button,
+.alert .MuiTypography-root {
+	font-size: var(--env-var-font-size-medium);
+}
@@ -0,0 +1,127 @@
+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 "./index.css";
+
+/**
+ * Icons mapping for different alert variants.
+ * @type {Object<string, JSX.Element>}
+ */
+
+const icons = {
+	info: <InfoOutlinedIcon />,
+	error: <ErrorOutlineOutlinedIcon />,
+	warning: <WarningAmberOutlinedIcon />,
+};
+
+/**
+ * @param {Object} props
+ * @param {'info' | 'error' | 'warning'} props.variant - The type of alert.
+ * @param {string} [props.title] - The title of the alert.
+ * @param {string} [props.body] - The body text of the alert.
+ * @param {boolean} [props.isToast] - Indicates if the alert is used as a toast notification.
+ * @param {boolean} [props.hasIcon] - Whether to display an icon in the alert.
+ * @param {function} props.onClick - Toast dismiss function.
+ * @returns {JSX.Element}
+ */
+
+const Alert = ({ variant, title, body, isToast, hasIcon = true, onClick }) => {
+	const theme = useTheme();
+	/* TODO 
+	Do we need other variants for alert?
+	*/
+
+	const text = theme.palette.secondary.contrastText;
+	const border = theme.palette.alert.contrastText;
+	const bg = theme.palette.alert.main;
+	const icon = icons[variant];
+
+	return (
+		<Stack
+			direction="row"
+			justifyContent="flex-start"
+			alignItems={hasIcon ? "" : "center"}
+			className="alert row-stack"
+			gap={theme.spacing(8)}
+			sx={{
+				padding: hasIcon ? theme.spacing(8) : `${theme.spacing(4)} ${theme.spacing(8)}`,
+				backgroundColor: bg,
+				border: `solid 1px ${border}`,
+				borderRadius: theme.shape.borderRadius,
+			}}
+		>
+			{hasIcon && <Box sx={{ color: text }}>{icon}</Box>}
+			<Stack
+				direction="column"
+				gap="2px"
+				sx={{ flex: 1 }}
+			>
+				{title && (
+					<Typography sx={{ fontWeight: "700", color: `${text}` }}>{title}</Typography>
+				)}
+				{body && (
+					<Typography sx={{ fontWeight: "400", color: `${text}` }}>{body}</Typography>
+				)}
+				{hasIcon && isToast && (
+					<Button
+						variant="text"
+						color="info"
+						onClick={onClick}
+						sx={{
+							fontWeight: "600",
+							width: "fit-content",
+							mt: theme.spacing(4),
+							padding: 0,
+							minWidth: 0,
+						}}
+					>
+						Dismiss
+					</Button>
+				)}
+			</Stack>
+			{isToast && (
+				<IconButton
+					onClick={onClick}
+					sx={{
+						alignSelf: "flex-start",
+						ml: "auto",
+						mr: "-5px",
+						mt: hasIcon ? "-5px" : 0,
+						padding: "5px",
+						"&:focus": {
+							outline: "none",
+						},
+					}}
+				>
+					<CloseIcon
+						sx={{
+							fontSize: "20px",
+						}}
+					/>
+				</IconButton>
+			)}
+		</Stack>
+	);
+};
+
+Alert.propTypes = {
+	variant: PropTypes.oneOf(["info", "error", "warning"]).isRequired,
+	title: PropTypes.string,
+	body: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+	isToast: PropTypes.bool,
+	hasIcon: PropTypes.bool,
+	onClick: function (props, propName, componentName) {
+		if (props.isToast && !props[propName]) {
+			return new Error(
+				`Prop '${propName}' is required when 'isToast' is true in '${componentName}'.`
+			);
+		}
+		return null;
+	},
+};
+
+export default Alert;
@@ -0,0 +1,68 @@
+import PropTypes from "prop-types";
+import { Box, Stack, useTheme } from "@mui/material";
+// import useUtils from "../../Pages/Uptime/utils";
+
+/**
+ * A component that renders a pulsating dot with a specified color.
+ *
+ * @component
+ * @example
+ * // Example usage:
+ * <PulseDot color="#f00" />
+ *
+ * @param {Object} props
+ * @param {string} props.color - The color of the dot.
+ * @returns {JSX.Element} The PulseDot component.
+ */
+
+const PulseDot = ({ color }) => {
+	const theme = useTheme();
+	// const { statusToTheme } = useUtils();
+	/* TODO refactor so it gets status and gets theme color. Then uses theme.palette.[themeColor].lowContrast  */
+	/* const themeColor = statusToTheme[status]; */
+
+	return (
+		<Stack
+			width="26px"
+			height="24px"
+			alignItems="center"
+			justifyContent="center"
+		>
+			<Box
+				minWidth="18px"
+				minHeight="18px"
+				sx={{
+					position: "relative",
+					backgroundColor: color,
+					borderRadius: "50%",
+					"&::before": {
+						content: `""`,
+						position: "absolute",
+						width: "100%",
+						height: "100%",
+						backgroundColor: "inherit",
+						borderRadius: "50%",
+						animation: "ripple 1.8s ease-out infinite",
+					},
+					"&::after": {
+						content: `""`,
+						position: "absolute",
+						width: "7px",
+						height: "7px",
+						borderRadius: "50%",
+						backgroundColor: theme.palette.accent.contrastText,
+						top: "50%",
+						left: "50%",
+						transform: "translate(-50%, -50%)",
+					},
+				}}
+			/>
+		</Stack>
+	);
+};
+
+PulseDot.propTypes = {
+	color: PropTypes.string.isRequired,
+};
+
+export default PulseDot;
@@ -0,0 +1,35 @@
+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 PropTypes from "prop-types";
+
+const ArrowLeft = ({ type, color = "#667085", ...props }) => {
+	if (type === "double") {
+		return (
+			<LeftArrowDouble
+				style={{ color }}
+				{...props}
+			/>
+		);
+	} else if (type === "long") {
+		return (
+			<LeftArrowLong
+				style={{ color }}
+				{...props}
+			/>
+		);
+	} else {
+		return (
+			<LeftArrow
+				style={{ color }}
+				{...props}
+			/>
+		);
+	}
+};
+
+ArrowLeft.propTypes = {
+	color: PropTypes.string,
+	type: PropTypes.oneOf(["double", "long", "default"]),
+};
+export default ArrowLeft;
@@ -1,20 +1,19 @@
-import Icon from "../Icon";
+import RightArrow from "../../../assets/icons/right-arrow.svg?react";
+import RightArrowDouble from "../../../assets/icons/right-arrow-double.svg?react";
 import PropTypes from "prop-types";

 const ArrowRight = ({ type, color = "#667085", ...props }) => {
 	if (type === "double") {
 		return (
-			<Icon
-				name="ChevronsRight"
-				color={color}
+			<RightArrowDouble
+				style={{ color }}
 				{...props}
 			/>
 		);
 	} else {
 		return (
-			<Icon
-				name="ChevronRight"
-				color={color}
+			<RightArrow
+				style={{ color }}
 				{...props}
 			/>
 		);
@@ -0,0 +1,73 @@
+import { Avatar as MuiAvatar } from "@mui/material";
+import PropTypes from "prop-types";
+import { useSelector } from "react-redux";
+import { useEffect, useState } from "react";
+import { useTheme } from "@emotion/react";
+/**
+ * @component
+ * @param {Object} props
+ * @param {string} props.src - Path to image for avatar
+ * @param {boolean} props.small - Specifies if avatar should be large
+ * @param {Object} [props.sx] - Additional styles to apply to the button.
+ * @returns {JSX.Element}
+ * @example
+ * // Render a red label
+ * <Avatar src="assets/img" first="Alex" last="Holliday" small />
+ */
+
+const Avatar = ({ src, small, sx, onClick = () => {} }) => {
+	const { user } = useSelector((state) => state.auth);
+	const theme = useTheme();
+
+	const style = small ? { width: 32, height: 32 } : { width: 64, height: 64 };
+	const border = small ? 1 : 3;
+
+	const [image, setImage] = useState();
+	useEffect(() => {
+		if (user.avatarImage) {
+			setImage(`data:image/png;base64,${user.avatarImage}`);
+		}
+	}, [user?.avatarImage]);
+
+	return (
+		<MuiAvatar
+			onClick={onClick}
+			alt={`${user?.firstName} ${user?.lastName}`}
+			/* TODO What is the  /static/images/avatar/2.jpg ?*/
+			src={src ? src : user?.avatarImage ? image : "/static/images/avatar/2.jpg"}
+			sx={{
+				fontSize: small ? "16px" : "22px",
+				fontWeight: 400,
+				color: theme.palette.accent.contrastText,
+				backgroundColor: theme.palette.accent.main, // Same BG color as checkmate BG in sidebar
+				display: "inline-flex",
+				/* 
+				TODO not sure what this is for*/
+				"&::before": {
+					content: `""`,
+					position: "absolute",
+					top: 0,
+					left: 0,
+					width: `100%`,
+					height: `100%`,
+					border: `${border}px solid rgba(255,255,255,0.2)`,
+					borderRadius: "50%",
+				},
+				...style,
+				...sx,
+			}}
+		>
+			{user.firstName?.charAt(0)}
+			{user.lastName?.charAt(0) || ""}
+		</MuiAvatar>
+	);
+};
+
+Avatar.propTypes = {
+	src: PropTypes.string,
+	small: PropTypes.bool,
+	sx: PropTypes.object,
+	onClick: PropTypes.func,
+};
+
+export default Avatar;
@@ -6,6 +6,7 @@
 	min-height: 16px;
 }
 .MuiBreadcrumbs-root .MuiBreadcrumbs-li a {
+	font-size: var(--env-var-font-size-medium);
 	font-weight: 400;
 }
 .MuiBreadcrumbs-root .MuiBreadcrumbs-li:not(:last-child) {
@@ -0,0 +1,30 @@
+import React from "react";
+import Button from "@mui/material/Button";
+import { styled } from "@mui/material/styles";
+
+const RoundGradientButton = styled(Button)(({ theme }) => ({
+	position: "relative",
+	border: "5px solid transparent",
+	backgroundClip: "padding-box",
+	borderRadius: 30,
+	fontSize: "1.2rem",
+	color: theme.palette.primary.contrastText,
+	backgroundColor: theme.palette.background.main,
+
+	"&:after": {
+		position: "absolute",
+		top: -3,
+		left: -3,
+		right: -3,
+		bottom: -3,
+		background:
+			theme.palette.mode === "dark"
+				? "linear-gradient(90deg, #842bd2, #ff5451, #8c52ff)"
+				: "linear-gradient(90deg, #842bd2, #ff5451, #8c52ff)",
+		content: '""',
+		zIndex: -1,
+		borderRadius: 30,
+	},
+}));
+
+export default RoundGradientButton;
@@ -0,0 +1,214 @@
+/**
+ * CustomAreaChart component for rendering an area chart with optional gradient and custom ticks.
+ *
+ * @param {Object} props - The properties object.
+ * @param {Array} props.data - The data array for the chart.
+ * @param {Array} props.dataKeys - An array of data keys to be plotted as separate areas.
+ * @param {string} props.xKey - The key for the x-axis data.
+ * @param {string} [props.yKey] - The key for the y-axis data (optional).
+ * @param {Object} [props.xTick] - Custom tick component for the x-axis.
+ * @param {Object} [props.yTick] - Custom tick component for the y-axis.
+ * @param {string} [props.strokeColor] - The base stroke color for the areas.
+ *                                       If not provided, uses a predefined color palette.
+ * @param {string} [props.fillColor] - The base fill color for the areas.
+ * @param {boolean} [props.gradient=false] - Whether to apply a gradient fill to the areas.
+ * @param {string} [props.gradientDirection="vertical"] - The direction of the gradient.
+ * @param {string} [props.gradientStartColor] - The start color of the gradient.
+ *                                              Defaults to the area's stroke color if not provided.
+ * @param {string} [props.gradientEndColor] - The end color of the gradient.
+ * @param {Object} [props.customTooltip] - Custom tooltip component for the chart.
+ * @param {string|number} [props.height="100%"] - Height of the chart container.
+ *
+ * @returns {JSX.Element} The rendered area chart component.
+ *
+ * @example
+ * // Single series chart
+ * <CustomAreaChart
+ *   data={temperatureData}
+ *   dataKeys={["temperature"]}
+ *   xKey="date"
+ *   yKey="temperature"
+ *   gradient={true}
+ *   gradientStartColor="#ff6b6b"
+ *   gradientEndColor="#4ecdc4"
+ * />
+ *
+ * @example
+ * // Multi-series chart with custom tooltip
+ * <CustomAreaChart
+ *   data={performanceData}
+ *   dataKeys={["cpu.usage", "memory.usage"]}
+ *   xKey="timestamp"
+ *   xTick={<CustomTimeTick />}
+ *   yTick={<PercentageTick />}
+ *   gradient={true}
+ *   customTooltip={({ active, payload, label }) => (
+ *     <CustomTooltip
+ *       label={label}
+ *       payload={payload}
+ *       active={active}
+ *     />
+ *   )}
+ * />
+ */
+
+import {
+	AreaChart,
+	Area,
+	XAxis,
+	YAxis,
+	CartesianGrid,
+	Tooltip,
+	ResponsiveContainer,
+} from "recharts";
+import { createGradient } from "../Utils/gradientUtils.jsx";
+import PropTypes from "prop-types";
+import { useTheme } from "@mui/material";
+import { useId } from "react";
+import { Fragment } from "react";
+
+const CustomAreaChart = ({
+	data,
+	dataKeys,
+	xKey,
+	xDomain,
+	yKey,
+	yDomain,
+	xTick,
+	yTick,
+	strokeColor,
+	fillColor,
+	gradient = false,
+	gradientDirection = "vertical",
+	gradientStartColor,
+	gradientEndColor,
+	customTooltip,
+	height = "100%",
+}) => {
+	const theme = useTheme();
+	const uniqueId = useId();
+
+	const AREA_COLORS = [
+		// Blues
+		"#3182bd", // Deep blue
+		"#6baed6", // Medium blue
+		"#9ecae1", // Light blue
+
+		// Greens
+		"#74c476", // Soft green
+		"#a1d99b", // Light green
+		"#c7e9c0", // Pale green
+
+		// Oranges
+		"#fdae6b", // Warm orange
+		"#fdd0a2", // Light orange
+		"#feedde", // Pale orange
+
+		// Purples
+		"#9467bd", // Lavender
+		"#a55194", // Deep magenta
+		"#c994c7", // Soft magenta
+
+		// Reds
+		"#ff9896", // Soft red
+		"#de2d26", // Deep red
+		"#fc9272", // Medium red
+
+		// Cyans/Teals
+		"#17becf", // Cyan
+		"#7fcdbb", // Teal
+		"#a1dab4", // Light teal
+
+		// Yellows
+		"#fec44f", // Mustard
+		"#fee391", // Light yellow
+		"#ffffd4", // Pale yellow
+
+		// Additional colors
+		"#e377c2", // Soft pink
+		"#bcbd22", // Olive
+		"#2ca02c", // Vibrant green
+	];
+
+	return (
+		<ResponsiveContainer
+			width="100%"
+			height={height}
+			// FE team HELP!  Why does this overflow if set to 100%?
+		>
+			<AreaChart data={data}>
+				<XAxis
+					dataKey={xKey}
+					{...(xDomain && { domain: xDomain })}
+					{...(xTick && { tick: xTick })}
+				/>
+				<YAxis
+					dataKey={yKey}
+					{...(yDomain && { domain: yDomain })}
+					{...(yTick && { tick: yTick })}
+				/>
+
+				<CartesianGrid
+					stroke={theme.palette.primary.lowContrast}
+					strokeWidth={1}
+					strokeOpacity={1}
+					fill="transparent"
+					vertical={false}
+				/>
+				{dataKeys.map((dataKey, index) => {
+					const gradientId = `gradient-${uniqueId}-${index}`;
+
+					return (
+						<Fragment key={dataKey}>
+							{gradient === true &&
+								createGradient({
+									id: gradientId,
+									startColor: gradientStartColor || AREA_COLORS[index],
+									endColor: gradientEndColor,
+									direction: gradientDirection,
+								})}
+							<Area
+								yKey={dataKey}
+								key={dataKey}
+								type="monotone"
+								dataKey={dataKey}
+								stroke={strokeColor || AREA_COLORS[index]}
+								fill={gradient === true ? `url(#${gradientId})` : fillColor}
+							/>
+						</Fragment>
+					);
+				})}
+				{customTooltip ? (
+					<Tooltip
+						cursor={{ stroke: theme.palette.primary.lowContrast }}
+						content={customTooltip}
+						wrapperStyle={{ pointerEvents: "none" }}
+					/>
+				) : (
+					<Tooltip />
+				)}
+			</AreaChart>
+		</ResponsiveContainer>
+	);
+};
+
+CustomAreaChart.propTypes = {
+	data: PropTypes.array.isRequired,
+	dataKeys: PropTypes.array.isRequired,
+	xTick: PropTypes.object, // Recharts takes an instance of component, so we can't pass the component itself
+	yTick: PropTypes.object, // Recharts takes an instance of component, so we can't pass the component itself
+	xKey: PropTypes.string.isRequired,
+	xDomain: PropTypes.array,
+	yKey: PropTypes.string,
+	yDomain: PropTypes.array,
+	fillColor: PropTypes.string,
+	strokeColor: PropTypes.string,
+	gradient: PropTypes.bool,
+	gradientDirection: PropTypes.string,
+	gradientStartColor: PropTypes.string,
+	gradientEndColor: PropTypes.string,
+	customTooltip: PropTypes.object,
+	height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+export default CustomAreaChart;
@@ -0,0 +1,181 @@
+import { useTheme } from "@emotion/react";
+import { Box, Stack, Tooltip, Typography } from "@mui/material";
+import { formatDateWithTz } from "../../../../Utils/timeUtils.js";
+import { useEffect, useState } from "react";
+import "./index.css";
+import { useSelector } from "react-redux";
+
+/* TODO add prop validation and jsdocs */
+const BarChart = ({ checks = [] }) => {
+	const theme = useTheme();
+	const [animate, setAnimate] = useState(false);
+	const uiTimezone = useSelector((state) => state.ui.timezone);
+
+	useEffect(() => {
+		setAnimate(true);
+	});
+
+	// set responseTime to average if there's only one check
+	if (checks.length === 1) {
+		checks[0] = { ...checks[0], responseTime: 50 };
+	}
+
+	if (checks.length !== 25) {
+		const placeholders = Array(25 - checks.length).fill("placeholder");
+		checks = [...checks, ...placeholders];
+	}
+
+	return (
+		<Stack
+			direction="row"
+			flexWrap="nowrap"
+			gap={theme.spacing(1.5)}
+			height="50px"
+			width="fit-content"
+			onClick={(event) => event.stopPropagation()}
+			sx={{
+				cursor: "default",
+			}}
+		>
+			{checks.map((check, index) =>
+				check === "placeholder" ? (
+					/* TODO what is the purpose of this box? 	*/
+					// CAIO_REVIEW the purpose of this box is to make sure there are always at least 25 bars
+					// even if there are less than 25 checks
+					<Box
+						key={`${check}-${index}`}
+						position="relative"
+						width={theme.spacing(4.5)}
+						height="100%"
+						backgroundColor={theme.palette.primary.lowContrast}
+						sx={{
+							borderRadius: theme.spacing(1.5),
+						}}
+					/>
+				) : (
+					<Tooltip
+						title={
+							<>
+								<Typography>
+									{formatDateWithTz(
+										check.updatedAt,
+										"ddd, MMMM D, YYYY, HH:mm A",
+										uiTimezone
+									)}
+								</Typography>
+								<Box mt={theme.spacing(2)}>
+									<Box
+										display="inline-block"
+										width={theme.spacing(4)}
+										height={theme.spacing(4)}
+										backgroundColor={
+											check.status
+												? theme.palette.success.lowContrast
+												: theme.palette.error.lowContrast
+										}
+										sx={{ borderRadius: "50%" }}
+									/>
+									<Stack
+										display="inline-flex"
+										direction="row"
+										justifyContent="space-between"
+										ml={theme.spacing(2)}
+										gap={theme.spacing(12)}
+									>
+										<Typography
+											component="span"
+											sx={{ opacity: 0.8 }}
+										>
+											Response Time
+										</Typography>
+										<Typography component="span">
+											{check.originalResponseTime}
+											<Typography
+												component="span"
+												sx={{ opacity: 0.8 }}
+											>
+												{" "}
+												ms
+											</Typography>
+										</Typography>
+									</Stack>
+								</Box>
+							</>
+						}
+						placement="top"
+						key={`check-${check?.id}`}
+						slotProps={{
+							popper: {
+								className: "bar-tooltip",
+								modifiers: [
+									{
+										name: "offset",
+										options: {
+											offset: [0, -10],
+										},
+									},
+								],
+								sx: {
+									"& .MuiTooltip-tooltip": {
+										backgroundColor: theme.palette.secondary.main,
+										border: 1,
+										borderColor: theme.palette.primary.lowContrast,
+										borderRadius: theme.shape.borderRadius,
+										boxShadow: theme.shape.boxShadow,
+										px: theme.spacing(4),
+										py: theme.spacing(3),
+									},
+									"& .MuiTooltip-tooltip p": {
+										/* TODO Font size should point to theme */
+										fontSize: 12,
+										color: theme.palette.secondary.contrastText,
+										fontWeight: 500,
+									},
+									"& .MuiTooltip-tooltip span": {
+										/* TODO Font size should point to theme */
+										fontSize: 11,
+										color: theme.palette.secondary.contrastText,
+										fontWeight: 600,
+									},
+								},
+							},
+						}}
+					>
+						<Box
+							position="relative"
+							width="9px"
+							height="100%"
+							backgroundColor={theme.palette.primary.lowContrast}
+							sx={{
+								borderRadius: theme.spacing(1.5),
+								/* 
+								TODO this doesn't seem to be used
+								"&:hover > .MuiBox-root": {
+									filter: "brightness(0.8)",
+								}, */
+							}}
+						>
+							<Box
+								position="absolute"
+								bottom={0}
+								width="100%"
+								height={`${animate ? check.responseTime : 0}%`}
+								backgroundColor={
+									check.status
+										? theme.palette.success.lowContrast
+										: theme.palette.error.lowContrast
+								}
+								sx={{
+									borderRadius: theme.spacing(1.5),
+									transition: "height 600ms cubic-bezier(0.4, 0, 0.2, 1)",
+								}}
+							/>
+						</Box>
+					</Tooltip>
+				)
+			)}
+		</Stack>
+	);
+};
+
+export default BarChart;
@@ -0,0 +1,106 @@
+// Components
+import { Typography, Stack } from "@mui/material";
+import PropTypes from "prop-types";
+import { useTheme } from "@emotion/react";
+import IconBox from "../../IconBox/index.jsx";
+
+/**
+ * `EmptyView` is a functional React component that displays an empty state view with an optional icon, header, and message.
+ *
+ * @component
+ * @param {Object} props - The properties that define the `EmptyView` component.
+ * @param {React.ReactNode} [props.icon] - An optional icon to display at the top of the empty view.
+ * @param {string} [props.header] - An optional header text displayed next to the icon.
+ * @param {string} [props.message="No Data"] - The message to be displayed in the empty view.
+ * @param {'h1' | 'h2' | 'h3'} [props.headingLevel="h2"] - The heading level for the message text.
+ * @param {string} [props.justifyContent="flex-start"] - The CSS `justify-content` value to align elements vertically.
+ * @param {string} [props.height="100%"] - The height of the empty view container.
+ *
+ * @example
+ * // Example usage of EmptyView component:
+ * <EmptyView
+ *   icon={<SomeIcon />}
+ *   header="Average Response Time"
+ *   message="No Response Time Available"
+ *   headingLevel="h2"
+ *   justifyContent="center"
+ *   height="50%"
+ * />
+ *
+ * @returns {React.Element} The `EmptyView` component with customizable icon, header, and message.
+ */
+
+const EmptyView = ({
+	icon,
+	header,
+	message = "No Data",
+	headingLevel = "h2",
+	justifyContent = "flex-start",
+	height = "100%",
+}) => {
+	const theme = useTheme();
+	return (
+		<Stack
+			flex={1}
+			direction="row"
+			sx={{
+				backgroundColor: theme.palette.primary.main,
+
+				border: 1,
+				borderStyle: "solid",
+				borderColor: theme.palette.primary.lowContrast,
+				borderRadius: 2,
+				borderTopRightRadius: 4,
+				borderBottomRightRadius: 4,
+			}}
+		>
+			<Stack
+				flex={1}
+				alignItems="center"
+				sx={{
+					padding: theme.spacing(8),
+					justifyContent,
+					gap: theme.spacing(8),
+					height,
+					"& h2": {
+						color: theme.palette.primary.contrastTextSecondary,
+						fontSize: 15,
+						fontWeight: 500,
+					},
+
+					"& tspan, & text": {
+						fill: theme.palette.primary.contrastTextTertiary,
+					},
+				}}
+			>
+				<Stack
+					alignSelf="flex-start"
+					direction="row"
+					alignItems="center"
+					gap={theme.spacing(6)}
+				>
+					{icon && <IconBox>{icon}</IconBox>}
+					{header && <Typography component="h2">{header}</Typography>}
+				</Stack>
+				<Stack
+					flex={1}
+					justifyContent="center"
+					alignItems="center"
+				>
+					<Typography component={headingLevel}>{message}</Typography>
+				</Stack>
+			</Stack>
+		</Stack>
+	);
+};
+
+EmptyView.propTypes = {
+	message: PropTypes.string,
+	icon: PropTypes.node,
+	header: PropTypes.string,
+	headingLevel: PropTypes.oneOf(["h1", "h2", "h3"]),
+	justifyContent: PropTypes.string,
+	height: PropTypes.string,
+};
+
+export default EmptyView;
@@ -0,0 +1,104 @@
+import { Stack, Typography } from "@mui/material";
+import { useTheme } from "@emotion/react";
+import IconBox from "../../IconBox/index.jsx";
+import EmptyView from "./EmptyView.jsx";
+import PropTypes from "prop-types";
+
+const ChartBox = ({
+	children,
+	icon,
+	header,
+	height = "300px",
+	justifyContent = "space-between",
+	Legend,
+	borderRadiusRight = 4,
+	sx,
+	noDataMessage,
+	isEmpty = false,
+}) => {
+	const theme = useTheme();
+	if (isEmpty) {
+		return (
+			<EmptyView
+				icon={icon}
+				header={header}
+				message={noDataMessage}
+			/>
+		);
+	}
+	return (
+		<Stack
+			flex={1}
+			direction="row"
+			sx={{
+				backgroundColor: theme.palette.primary.main,
+
+				border: 1,
+				borderStyle: "solid",
+				borderColor: theme.palette.primary.lowContrast,
+				borderRadius: 2,
+				borderTopRightRadius: borderRadiusRight,
+				borderBottomRightRadius: borderRadiusRight,
+			}}
+		>
+			<Stack
+				flex={1}
+				sx={{
+					padding: theme.spacing(8),
+					justifyContent,
+					gap: theme.spacing(8),
+					height,
+					minWidth: 250,
+					"& h2": {
+						color: theme.palette.primary.contrastTextSecondary,
+						fontSize: 15,
+						fontWeight: 500,
+					},
+					"& .MuiBox-root:not(.area-tooltip) p": {
+						color: theme.palette.primary.contrastTextTertiary,
+						fontSize: 13,
+					},
+					"& .MuiBox-root > span": {
+						color: theme.palette.primary.contrastText,
+						fontSize: 20,
+						"& span": {
+							opacity: 0.8,
+							marginLeft: 2,
+							fontSize: 15,
+						},
+					},
+
+					"& tspan, & text": {
+						fill: theme.palette.primary.contrastTextTertiary,
+					},
+					"& path": {
+						transition: "fill 300ms ease, stroke-width 400ms ease",
+					},
+				}}
+			>
+				<Stack
+					alignSelf="flex-start"
+					direction="row"
+					alignItems="center"
+					gap={theme.spacing(6)}
+				>
+					{icon && <IconBox>{icon}</IconBox>}
+					{header && <Typography component="h2">{header}</Typography>}
+				</Stack>
+				{children}
+			</Stack>
+			{Legend && Legend}
+		</Stack>
+	);
+};
+
+export default ChartBox;
+
+ChartBox.propTypes = {
+	children: PropTypes.node,
+	icon: PropTypes.node,
+	header: PropTypes.string,
+	height: PropTypes.string,
+	noDataMessage: PropTypes.string,
+	isEmpty: PropTypes.bool,
+};
@@ -0,0 +1,14 @@
+.radial-chart {
+	position: relative;
+	display: inline-block;
+}
+
+.radial-chart-base {
+	opacity: 0.3;
+}
+
+.radial-chart-progress {
+	transform: rotate(-90deg);
+	transform-origin: center;
+	transition: stroke-dashoffset 1.5s ease-in-out;
+}
@@ -0,0 +1,148 @@
+import { useTheme } from "@emotion/react";
+import { useEffect, useState, useMemo } from "react";
+import Stack from "@mui/material/Stack";
+import { Box, Typography } from "@mui/material";
+import PropTypes from "prop-types";
+import "./index.css";
+import CircularProgress from "@mui/material/CircularProgress";
+
+const MINIMUM_VALUE = 0;
+const MAXIMUM_VALUE = 100;
+
+/**
+ * A Performant SVG based circular gauge
+ *
+ * @component
+ * @param {Object} props - Component properties
+ * @param {number} [props.progress=0] - Progress percentage (0-100)
+ * @param {number} [props.radius=60] - Radius of the gauge circle
+ * @param {number} [props.strokeWidth=15] - Width of the gauge stroke
+ * @param {number} [props.precision=1] - Precision of the progress percentage
+ * @param {string} [props.unit="%"] - Unit of progress
+ *
+ * @example
+ * <CustomGauge
+ *   progress={75}
+ *   radius={50}
+ *   strokeWidth={10}
+ * />
+ *
+ * @returns {React.ReactElement} Rendered CustomGauge component
+ */
+const CustomGauge = ({
+	isLoading = false,
+	progress = 0,
+	radius = 70,
+	strokeWidth = 15,
+	precision = 1,
+	unit = "%",
+}) => {
+	const theme = useTheme();
+	// Calculate the length of the stroke for the circle
+	const { circumference, totalSize, strokeLength } = useMemo(
+		() => ({
+			circumference: 2 * Math.PI * radius,
+			totalSize: radius * 2 + strokeWidth * 2,
+			strokeLength: (progress / 100) * (2 * Math.PI * radius),
+		}),
+		[radius, strokeWidth, progress]
+	);
+
+	// Handle initial animation
+	const [offset, setOffset] = useState(circumference);
+	useEffect(() => {
+		setOffset(circumference);
+		const timer = setTimeout(() => {
+			setOffset(circumference - strokeLength);
+		}, 100);
+
+		return () => clearTimeout(timer);
+	}, [progress, circumference, strokeLength]);
+
+	const progressWithinRange = Math.max(MINIMUM_VALUE, Math.min(progress, MAXIMUM_VALUE));
+
+	let fillColor;
+	if (progressWithinRange < 50) {
+		fillColor = theme.palette.success.main;
+	} else if (progressWithinRange < 80) {
+		fillColor = theme.palette.warning.lowContrast;
+	} else {
+		fillColor = theme.palette.error.lowContrast;
+	}
+
+	if (isLoading) {
+		return (
+			<Stack
+				className="radial-chart"
+				width={radius}
+				height={radius}
+				alignItems="center"
+				justifyContent="center"
+			>
+				<CircularProgress color="accent" />
+			</Stack>
+		);
+	}
+
+	return (
+		<Box
+			className="radial-chart"
+			width={radius}
+			height={radius}
+			sx={{ backgroundColor: theme.palette.primary.main, borderRadius: "50%" }}
+		>
+			<svg
+				viewBox={`0 0 ${totalSize} ${totalSize}`}
+				width={radius}
+				height={radius}
+			>
+				<circle
+					className="radial-chart-base"
+					stroke={theme.palette.secondary.light}
+					strokeWidth={strokeWidth}
+					fill="none"
+					cx={totalSize / 2} // Center the circle
+					cy={totalSize / 2} // Center the circle
+					r={radius}
+				/>
+				<circle
+					className="radial-chart-progress"
+					stroke={fillColor}
+					strokeWidth={strokeWidth}
+					strokeDasharray={`${circumference} ${circumference}`}
+					strokeDashoffset={offset}
+					strokeLinecap="round"
+					fill="none"
+					cx={totalSize / 2}
+					cy={totalSize / 2}
+					r={radius}
+				/>
+			</svg>
+
+			<Typography
+				className="radial-chart-text"
+				style={{
+					position: "absolute",
+					top: "50%",
+					left: "50%",
+					transform: "translate(-50%, -50%)",
+					...theme.typography.h2,
+					fill: theme.typography.h2.color,
+				}}
+			>
+				{`${progressWithinRange.toFixed(precision)}${unit}`}
+			</Typography>
+		</Box>
+	);
+};
+
+export default CustomGauge;
+
+CustomGauge.propTypes = {
+	isLoading: PropTypes.bool,
+	progress: PropTypes.number,
+	radius: PropTypes.number,
+	strokeWidth: PropTypes.number,
+	precision: PropTypes.number,
+	unit: PropTypes.string,
+};
@@ -0,0 +1,181 @@
+// Components
+import { Stack, Box, Tooltip, Typography } from "@mui/material";
+
+// Utils
+import { useTheme } from "@emotion/react";
+import { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import { formatDateWithTz } from "../../../../Utils/timeUtils.js";
+import { useSelector } from "react-redux";
+
+const PlaceholderCheck = ({ daysToShow }) => {
+	const theme = useTheme();
+
+	return (
+		<Box
+			width={`calc(30vw / ${daysToShow})`}
+			height="100%"
+			backgroundColor={theme.palette.primary.lowContrast}
+			sx={{
+				borderRadius: theme.spacing(1.5),
+			}}
+		/>
+	);
+};
+
+PlaceholderCheck.propTypes = {
+	daysToShow: PropTypes.number,
+};
+
+const Check = ({ check, daysToShow }) => {
+	const [animate, setAnimate] = useState(false);
+
+	const theme = useTheme();
+	useEffect(() => {
+		setAnimate(true);
+	}, []);
+	const uiTimezone = useSelector((state) => state.ui.timezone);
+
+	return (
+		<Tooltip
+			title={
+				<>
+					<Typography>
+						{formatDateWithTz(check._id, "ddd, MMMM D, YYYY", uiTimezone)}
+					</Typography>
+					<Box mt={theme.spacing(2)}>
+						<Stack
+							display="inline-flex"
+							direction="row"
+							justifyContent="space-between"
+							gap={theme.spacing(4)}
+						>
+							<Typography
+								component="span"
+								sx={{ opacity: 0.8 }}
+							>
+								Uptime percentage
+							</Typography>
+							<Typography component="span">
+								{check.upPercentage.toFixed(2)}
+								<Typography
+									component="span"
+									sx={{ opacity: 0.8 }}
+								>
+									{" "}
+									%
+								</Typography>
+							</Typography>
+						</Stack>
+					</Box>
+				</>
+			}
+			placement="top"
+			key={`check-${check?._id}`}
+			slotProps={{
+				popper: {
+					className: "bar-tooltip",
+					modifiers: [
+						{
+							name: "offset",
+							options: {
+								offset: [0, -10],
+							},
+						},
+					],
+					sx: {
+						"& .MuiTooltip-tooltip": {
+							backgroundColor: theme.palette.secondary.main,
+							border: 1,
+							borderColor: theme.palette.primary.lowContrast,
+							borderRadius: theme.shape.borderRadius,
+							boxShadow: theme.shape.boxShadow,
+							px: theme.spacing(4),
+							py: theme.spacing(3),
+						},
+						"& .MuiTooltip-tooltip p": {
+							/* TODO Font size should point to theme */
+							fontSize: 12,
+							color: theme.palette.secondary.contrastText,
+							fontWeight: 500,
+						},
+						"& .MuiTooltip-tooltip span": {
+							/* TODO Font size should point to theme */
+							fontSize: 11,
+							color: theme.palette.secondary.contrastText,
+							fontWeight: 600,
+						},
+					},
+				},
+			}}
+		>
+			<Box
+				position="relative"
+				width={`calc(30vw / ${daysToShow})`}
+				height="100%"
+				backgroundColor={theme.palette.error.lowContrast}
+				sx={{
+					borderRadius: theme.spacing(1.5),
+				}}
+			>
+				<Box
+					position="absolute"
+					bottom={0}
+					width="100%"
+					height={`${animate ? check.upPercentage : 0}%`}
+					backgroundColor={theme.palette.success.lowContrast}
+					sx={{
+						borderRadius: theme.spacing(1.5),
+						transition: "height 600ms cubic-bezier(0.4, 0, 0.2, 1)",
+					}}
+				/>
+			</Box>
+		</Tooltip>
+	);
+};
+
+Check.propTypes = {
+	check: PropTypes.object,
+	daysToShow: PropTypes.number,
+};
+
+const DePINStatusPageBarChart = ({ checks = [], daysToShow = 30 }) => {
+	if (checks.length !== daysToShow) {
+		const placeholders = Array(daysToShow - checks.length).fill("placeholder");
+		checks = [...checks, ...placeholders];
+	}
+	return (
+		<Stack
+			direction="row"
+			justifyContent="space-between"
+			width="100%"
+			flexWrap="nowrap"
+			height="50px"
+		>
+			{checks.map((check) => {
+				if (check === "placeholder") {
+					return (
+						<PlaceholderCheck
+							key={Math.random()}
+							daysToShow={daysToShow}
+						/>
+					);
+				}
+				return (
+					<Check
+						key={Math.random()}
+						check={check}
+						daysToShow={daysToShow}
+					/>
+				);
+			})}
+		</Stack>
+	);
+};
+
+DePINStatusPageBarChart.propTypes = {
+	checks: PropTypes.array,
+	daysToShow: PropTypes.number,
+};
+
+export default DePINStatusPageBarChart;
@@ -0,0 +1,42 @@
+import { Stack, Typography } from "@mui/material";
+import { useTheme } from "@emotion/react";
+import IconBox from "../../IconBox/index.jsx";
+import PropTypes from "prop-types";
+
+const LegendBox = ({ children, icon, header, sx }) => {
+	const theme = useTheme();
+	return (
+		<Stack
+			direction="column"
+			gap={theme.spacing(4)}
+			borderRadius={theme.spacing(8)}
+			sx={{
+				...sx,
+				"& label": { pl: theme.spacing(6) },
+				borderLeftStyle: "solid",
+				borderLeftWidth: 1,
+				borderLeftColor: theme.palette.primary.lowContrast,
+				backgroundColor: theme.palette.primary.main,
+				padding: theme.spacing(8),
+				background: `linear-gradient(325deg, ${theme.palette.tertiary.main} 20%, ${theme.palette.primary.main} 45%)`,
+			}}
+		>
+			<Stack
+				direction="row"
+				gap={theme.spacing(6)}
+			>
+				<IconBox>{icon}</IconBox>
+				<Typography component="h2">{header}</Typography>
+			</Stack>
+			{children}
+		</Stack>
+	);
+};
+
+LegendBox.propTypes = {
+	children: PropTypes.node,
+	icon: PropTypes.node,
+	header: PropTypes.string,
+};
+
+export default LegendBox;
@@ -0,0 +1,222 @@
+import PropTypes from "prop-types";
+import {
+	AreaChart,
+	Area,
+	XAxis,
+	Tooltip,
+	CartesianGrid,
+	ResponsiveContainer,
+	Text,
+} from "recharts";
+import { Box, Stack, Typography } from "@mui/material";
+import { useTheme } from "@emotion/react";
+import { useMemo, useState } from "react";
+import { useSelector } from "react-redux";
+import { formatDateWithTz } from "../../../../Utils/timeUtils.js";
+import {
+	tooltipDateFormatLookup,
+	tickDateFormatLookup,
+} from "../Utils/chartUtilFunctions.js";
+
+import "./index.css";
+const CustomToolTip = ({ active, payload, label, dateRange }) => {
+	const format = tooltipDateFormatLookup(dateRange);
+	const uiTimezone = useSelector((state) => state.ui.timezone);
+	const theme = useTheme();
+	if (active && payload && payload.length) {
+		const responseTime = payload[0]?.payload?.originalAvgResponseTime
+			? payload[0]?.payload?.originalAvgResponseTime
+			: (payload[0]?.payload?.avgResponseTime ?? 0);
+		return (
+			<Box
+				className="area-tooltip"
+				sx={{
+					backgroundColor: theme.palette.primary.main,
+					border: 1,
+					borderColor: theme.palette.primary.lowContrast,
+					borderRadius: theme.shape.borderRadius,
+					py: theme.spacing(2),
+					px: theme.spacing(4),
+				}}
+			>
+				<Typography
+					sx={{
+						color: theme.palette.primary.contrastTextTertiary,
+						fontSize: 12,
+						fontWeight: 500,
+					}}
+				>
+					{formatDateWithTz(label, format, uiTimezone)}
+				</Typography>
+				<Box mt={theme.spacing(1)}>
+					<Box
+						display="inline-block"
+						width={theme.spacing(4)}
+						height={theme.spacing(4)}
+						backgroundColor={theme.palette.primary.main}
+						sx={{ borderRadius: "50%" }}
+					/>
+					<Stack
+						display="inline-flex"
+						direction="row"
+						justifyContent="space-between"
+						ml={theme.spacing(3)}
+						sx={{
+							"& span": {
+								color: theme.palette.primary.contrastTextTertiary,
+								fontSize: 11,
+								fontWeight: 500,
+							},
+						}}
+					>
+						<Typography
+							component="span"
+							sx={{ opacity: 0.8 }}
+						>
+							Response time:
+						</Typography>
+						<Typography
+							ml={theme.spacing(4)}
+							component="span"
+						>
+							{Math.floor(responseTime)}
+							<Typography
+								component="span"
+								sx={{ opacity: 0.8 }}
+							>
+								{" "}
+								ms
+							</Typography>
+						</Typography>
+					</Stack>
+				</Box>
+				{/* Display original value */}
+			</Box>
+		);
+	}
+	return null;
+};
+
+CustomToolTip.propTypes = {
+	active: PropTypes.bool,
+	payload: PropTypes.arrayOf(
+		PropTypes.shape({
+			value: PropTypes.number,
+			payload: PropTypes.shape({
+				_id: PropTypes.string,
+				avgResponseTime: PropTypes.number,
+				originalAvgResponseTime: PropTypes.number,
+			}),
+		})
+	),
+	label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+	dateRange: PropTypes.string,
+};
+const CustomTick = ({ x, y, payload, dateRange }) => {
+	const format = tickDateFormatLookup(dateRange);
+	const theme = useTheme();
+	const uiTimezone = useSelector((state) => state.ui.timezone);
+	return (
+		<Text
+			x={x}
+			y={y + 10}
+			textAnchor="middle"
+			fill={theme.palette.primary.contrastTextTertiary}
+			fontSize={11}
+			fontWeight={400}
+		>
+			{formatDateWithTz(payload?.value, format, uiTimezone)}
+		</Text>
+	);
+};
+
+CustomTick.propTypes = {
+	x: PropTypes.number,
+	y: PropTypes.number,
+	payload: PropTypes.object,
+	index: PropTypes.number,
+	dateRange: PropTypes.string,
+};
+
+const MonitorDetailsAreaChart = ({ checks, dateRange }) => {
+	const theme = useTheme();
+	const memoizedChecks = useMemo(() => checks, [checks[0]]);
+	const [isHovered, setIsHovered] = useState(false);
+	return (
+		<ResponsiveContainer
+			width="100%"
+			minWidth={25}
+			height={220}
+		>
+			<AreaChart
+				width="100%"
+				height="100%"
+				data={memoizedChecks}
+				margin={{
+					top: 10,
+					right: 0,
+					left: 0,
+					bottom: 0,
+				}}
+				onMouseMove={() => setIsHovered(true)}
+				onMouseLeave={() => setIsHovered(false)}
+			>
+				<CartesianGrid
+					stroke={theme.palette.primary.lowContrast}
+					strokeWidth={1}
+					strokeOpacity={1}
+					fill="transparent"
+					vertical={false}
+				/>
+				<defs>
+					<linearGradient
+						id="colorUv"
+						x1="0"
+						y1="0"
+						x2="0"
+						y2="1"
+					>
+						<stop
+							offset="0%"
+							stopColor={theme.palette.accent.main}
+							stopOpacity={0.8}
+						/>
+						<stop
+							offset="100%"
+							stopColor={theme.palette.accent.light}
+							stopOpacity={0}
+						/>
+					</linearGradient>
+				</defs>
+				<XAxis
+					stroke={theme.palette.primary.lowContrast}
+					dataKey="_id"
+					tick={<CustomTick dateRange={dateRange} />}
+					axisLine={false}
+					tickLine={false}
+					height={20}
+				/>
+				<Tooltip
+					cursor={{ stroke: theme.palette.primary.lowContrast }}
+					content={<CustomToolTip dateRange={dateRange} />}
+					wrapperStyle={{ pointerEvents: "none" }}
+				/>
+				<Area
+					type="monotone"
+					dataKey="avgResponseTime"
+					stroke={theme.palette.accent.main} // CAIO_REVIEW
+					fill="url(#colorUv)"
+					strokeWidth={isHovered ? 2.5 : 1.5}
+					activeDot={{ stroke: theme.palette.accent.main, r: 5 }} // CAIO_REVIEW
+				/>
+			</AreaChart>
+		</ResponsiveContainer>
+	);
+};
+
+MonitorDetailsAreaChart.propTypes = {
+	checks: PropTypes.array,
+	dateRange: PropTypes.string,
+};
+
+export default MonitorDetailsAreaChart;
@@ -0,0 +1,217 @@
+import { useTheme } from "@emotion/react";
+import { Box, Stack, Tooltip, Typography } from "@mui/material";
+import { formatDateWithTz } from "../../../../Utils/timeUtils.js";
+import { useEffect, useState, forwardRef } from "react";
+import { useSelector } from "react-redux";
+import PropTypes from "prop-types";
+
+/**
+ * A customizable Bar component that renders a colored bar with optional children.
+ * @component
+ *
+ * @param {string} width The width of the bar (e.g., "100px").
+ * @param {string} height The height of the bar (e.g., "50px").
+ * @param {string} backgroundColor The background color of the bar (e.g., "#FF5733").
+ * @param {string} [borderRadius] Optional border radius for the bar (e.g., "8px").
+ * @param {node} children The content to be rendered inside the bar.
+ * @returns {JSX.Element} The Bar component.
+ */
+
+const Bar = forwardRef(
+	({ width, height, backgroundColor, borderRadius, children, ...otherProps }, ref) => {
+		const theme = useTheme();
+
+		return (
+			<Box
+				ref={ref}
+				position="relative"
+				width={width}
+				height={height}
+				backgroundColor={backgroundColor}
+				sx={{
+					borderRadius: borderRadius || theme.spacing(1.5),
+				}}
+				{...otherProps}
+			>
+				{children}
+			</Box>
+		);
+	}
+);
+
+Bar.displayName = "Bar";
+
+Bar.propTypes = {
+	width: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
+	height: PropTypes.string.isRequired,
+	backgroundColor: PropTypes.string.isRequired,
+	borderRadius: PropTypes.string,
+	children: PropTypes.node,
+};
+
+/* TODO add prop validation and jsdocs */
+const StatusPageBarChart = ({ checks = [] }) => {
+	const theme = useTheme();
+	const [animate, setAnimate] = useState(false);
+	const uiTimezone = useSelector((state) => state.ui.timezone);
+
+	const barWidth = {
+		xs: "calc(60% / 25)",
+		xl: "calc(40% / 25)",
+	};
+
+	useEffect(() => {
+		setAnimate(true);
+	}, []);
+
+	// set responseTime to average if there's only one check
+	if (checks.length === 1) {
+		checks[0] = { ...checks[0], responseTime: 50 };
+	}
+
+	if (checks.length !== 25) {
+		const placeholders = Array(25 - checks.length).fill("placeholder");
+		checks = [...checks, ...placeholders];
+	}
+
+	return (
+		<Stack
+			direction="row"
+			justifyContent="space-between"
+			width="100%"
+			flexWrap="nowrap"
+			height="50px"
+			onClick={(event) => event.stopPropagation()}
+			sx={{
+				cursor: "default",
+			}}
+		>
+			{checks.map((check, index) =>
+				check === "placeholder" ? (
+					/* TODO what is the purpose of this box? 	*/
+					// CAIO_REVIEW the purpose of this box is to make sure there are always at least 25 bars
+					// even if there are less than 25 checks
+					<Bar
+						key={`${check}-${index}`}
+						width={barWidth}
+						height="100%"
+						backgroundColor={theme.palette.primary.lowContrast}
+					/>
+				) : (
+					<Tooltip
+						title={
+							<>
+								<Typography>
+									{formatDateWithTz(
+										check.createdAt,
+										"ddd, MMMM D, YYYY, HH:mm A",
+										uiTimezone
+									)}
+								</Typography>
+								<Box mt={theme.spacing(2)}>
+									<Box
+										display="inline-block"
+										width={theme.spacing(4)}
+										height={theme.spacing(4)}
+										backgroundColor={
+											check.status
+												? theme.palette.success.lowContrast
+												: theme.palette.error.lowContrast
+										}
+										sx={{ borderRadius: "50%" }}
+									/>
+									<Stack
+										display="inline-flex"
+										direction="row"
+										justifyContent="space-between"
+										ml={theme.spacing(2)}
+										gap={theme.spacing(12)}
+									>
+										<Typography
+											component="span"
+											sx={{ opacity: 0.8 }}
+										>
+											Response Time
+										</Typography>
+										<Typography component="span">
+											{check.originalResponseTime}
+											<Typography
+												component="span"
+												sx={{ opacity: 0.8 }}
+											>
+												{" "}
+												ms
+											</Typography>
+										</Typography>
+									</Stack>
+								</Box>
+							</>
+						}
+						placement="top"
+						key={`check-${check?._id}`}
+						slotProps={{
+							popper: {
+								className: "bar-tooltip",
+								modifiers: [
+									{
+										name: "offset",
+										options: {
+											offset: [0, -10],
+										},
+									},
+								],
+								sx: {
+									"& .MuiTooltip-tooltip": {
+										backgroundColor: theme.palette.secondary.main,
+										border: 1,
+										borderColor: theme.palette.primary.lowContrast,
+										borderRadius: theme.shape.borderRadius,
+										boxShadow: theme.shape.boxShadow,
+										px: theme.spacing(4),
+										py: theme.spacing(3),
+									},
+									"& .MuiTooltip-tooltip p": {
+										/* TODO Font size should point to theme */
+										fontSize: 12,
+										color: theme.palette.secondary.contrastText,
+										fontWeight: 500,
+									},
+									"& .MuiTooltip-tooltip span": {
+										/* TODO Font size should point to theme */
+										fontSize: 11,
+										color: theme.palette.secondary.contrastText,
+										fontWeight: 600,
+									},
+								},
+							},
+						}}
+					>
+						<Bar
+							width={barWidth}
+							height="100%"
+							backgroundColor={theme.palette.primary.lowContrast}
+						>
+							<Box
+								position="absolute"
+								bottom={0}
+								width="100%"
+								height={`${animate ? check.responseTime : 0}%`}
+								backgroundColor={
+									check.status
+										? theme.palette.success.lowContrast
+										: theme.palette.error.lowContrast
+								}
+								sx={{
+									borderRadius: theme.spacing(1.5),
+									transition: "height 600ms cubic-bezier(0.4, 0, 0.2, 1)",
+								}}
+							/>
+						</Bar>
+					</Tooltip>
+				)
+			)}
+		</Stack>
+	);
+};
+
+export default StatusPageBarChart;
@@ -0,0 +1,27 @@
+export const tooltipDateFormatLookup = (dateRange) => {
+	const dateFormatLookup = {
+		recent: "ddd. MMMM D, YYYY, hh:mm A",
+		day: "ddd. MMMM D, YYYY, hh:mm A",
+		week: "ddd. MMMM D, YYYY, hh:mm A",
+		month: "ddd. MMMM D, YYYY",
+	};
+	const format = dateFormatLookup[dateRange];
+	if (format === undefined) {
+		return "";
+	}
+	return format;
+};
+
+export const tickDateFormatLookup = (dateRange) => {
+	const tickFormatLookup = {
+		recent: "h:mm A",
+		day: "h:mm A",
+		week: "MM/D, h:mm A",
+		month: "ddd. M/D",
+	};
+	const format = tickFormatLookup[dateRange];
+	if (format === undefined) {
+		return "";
+	}
+	return format;
+};
@@ -0,0 +1,337 @@
+import PropTypes from "prop-types";
+import { useSelector } from "react-redux";
+import { useTheme } from "@mui/material";
+import { Text } from "recharts";
+import { formatDateWithTz } from "../../../../Utils/timeUtils.js";
+import { Box, Stack, Typography } from "@mui/material";
+import { tickDateFormatLookup, tooltipDateFormatLookup } from "./chartUtilFunctions.js";
+/**
+ * Custom tick component for rendering time with timezone.
+ *
+ * @param {Object} props - The properties object.
+ * @param {number} props.x - The x-coordinate for the tick.
+ * @param {number} props.y - The y-coordinate for the tick.
+ * @param {Object} props.payload - The payload object containing tick data.
+ * @param {number} props.index - The index of the tick.
+ * @returns {JSX.Element} The rendered tick component.
+ */
+export const TzTick = ({ x, y, payload, index, dateRange }) => {
+	const theme = useTheme();
+	const uiTimezone = useSelector((state) => state.ui.timezone);
+	const format = tickDateFormatLookup(dateRange);
+	return (
+		<Text
+			x={x}
+			y={y + 10}
+			textAnchor="middle"
+			fill={theme.palette.primary.contrastTextTertiary}
+			fontSize={11}
+			fontWeight={400}
+		>
+			{formatDateWithTz(payload?.value, format, uiTimezone)}
+		</Text>
+	);
+};
+
+TzTick.propTypes = {
+	x: PropTypes.number,
+	y: PropTypes.number,
+	payload: PropTypes.object,
+	index: PropTypes.number,
+	dateRange: PropTypes.string,
+};
+
+/**
+ * Custom tick component for rendering percentage values.
+ *
+ * @param {Object} props - The properties object.
+ * @param {number} props.x - The x-coordinate for the tick.
+ * @param {number} props.y - The y-coordinate for the tick.
+ * @param {Object} props.payload - The payload object containing tick data.
+ * @param {number} props.index - The index of the tick.
+ * @returns {JSX.Element|null} The rendered tick component or null for the first tick.
+ */
+export const PercentTick = ({ x, y, payload, index }) => {
+	const theme = useTheme();
+	if (index === 0) return null;
+	return (
+		<Text
+			x={x - 20}
+			y={y}
+			textAnchor="middle"
+			fill={theme.palette.primary.contrastTextTertiary}
+			fontSize={11}
+			fontWeight={400}
+		>
+			{`${(payload?.value * 100).toFixed()}%`}
+		</Text>
+	);
+};
+
+PercentTick.propTypes = {
+	x: PropTypes.number,
+	y: PropTypes.number,
+	payload: PropTypes.object,
+	index: PropTypes.number,
+};
+
+/**
+ * Converts a decimal value to a formatted percentage string.
+ *
+ * @param {number} value - The decimal value to convert (e.g., 0.75)
+ * @returns {string} Formatted percentage string (e.g., "75.00%") or original input if not a number
+ *
+ * @example
+ * getFormattedPercentage(0.7543)   // Returns "75.43%"
+ * getFormattedPercentage(1)        // Returns "100.00%"
+ * getFormattedPercentage("test")   // Returns "test"
+ */
+const getFormattedPercentage = (value) => {
+	if (typeof value !== "number") return value;
+	return `${(value * 100).toFixed(2)}%`;
+};
+
+/**
+ * Custom tick component for rendering network bytes per second.
+ *
+ * @param {Object} props - The properties object.
+ * @param {number} props.x - The x-coordinate for the tick.
+ * @param {number} props.y - The y-coordinate for the tick.
+ * @param {Object} props.payload - The payload object containing tick data.
+ * @param {number} props.index - The index of the tick.
+ * @returns {JSX.Element|null} The rendered tick component or null for the first tick.
+ */
+export const NetworkTick = ({ x, y, payload, index, formatter }) => {
+	const theme = useTheme();
+	if (index === 0) return null;
+
+	if (formatter === undefined) {
+		formatter = (value, space = false) => {
+			if (typeof value !== "number") return value;
+			// need to add space between value and unit
+			return `${(value / 1024).toFixed(1)}${space ? " " : ""}Kbps`;
+		};
+	}
+
+	return (
+		<Text
+			x={x - 20}
+			y={y}
+			textAnchor="middle"
+			fill={theme.palette.primary.contrastTextTertiary}
+			fontSize={11}
+			fontWeight={400}
+		>
+			{formatter(payload?.value, true)}
+		</Text>
+	);
+};
+
+NetworkTick.propTypes = {
+	x: PropTypes.number,
+	y: PropTypes.number,
+	payload: PropTypes.object,
+	index: PropTypes.number,
+	formatter: PropTypes.func,
+};
+
+/**
+ * Custom tooltip component for displaying infrastructure data.
+ *
+ * @param {Object} props - The properties object.
+ * @param {boolean} props.active - Indicates if the tooltip is active.
+ * @param {Array} props.payload - The payload array containing tooltip data.
+ * @param {string} props.label - The label for the tooltip.
+ * @param {string} props.yKey - The key for the y-axis data.
+ * @param {string} props.yLabel - The label for the y-axis data.
+ * @param {string} props.dotColor - The color of the dot in the tooltip.
+ * @returns {JSX.Element|null} The rendered tooltip component or null if inactive.
+ */
+export const InfrastructureTooltip = ({
+	active,
+	payload,
+	label,
+	yKey,
+	yIdx = -1,
+	yLabel,
+	dotColor,
+	dateRange,
+	formatter = getFormattedPercentage,
+}) => {
+	const uiTimezone = useSelector((state) => state.ui.timezone);
+	const theme = useTheme();
+
+	const format = tooltipDateFormatLookup(dateRange);
+	if (active && payload && payload.length) {
+		const [hardwareType, metric] = yKey.split(".");
+		return (
+			<Box
+				className="area-tooltip"
+				sx={{
+					backgroundColor: theme.palette.primary.main,
+					border: 1,
+					borderColor: theme.palette.primary.lowContrast,
+					borderRadius: theme.shape.borderRadius,
+					py: theme.spacing(2),
+					px: theme.spacing(4),
+				}}
+			>
+				<Typography
+					sx={{
+						color: theme.palette.primary.contrastTextTertiary,
+						fontSize: 12,
+						fontWeight: 500,
+					}}
+				>
+					{formatDateWithTz(label, format, uiTimezone)}
+				</Typography>
+				<Box mt={theme.spacing(1)}>
+					<Box
+						display="inline-block"
+						width={theme.spacing(4)}
+						height={theme.spacing(4)}
+						backgroundColor={dotColor}
+						sx={{ borderRadius: "50%" }}
+					/>
+					<Stack
+						display="inline-flex"
+						direction="row"
+						justifyContent="space-between"
+						ml={theme.spacing(3)}
+						sx={{
+							"& span": {
+								color: theme.palette.primary.contrastTextTertiary,
+								fontSize: 11,
+								fontWeight: 500,
+							},
+						}}
+					>
+						<Typography
+							component="span"
+							sx={{ opacity: 0.8 }}
+						>
+							{yIdx >= 0
+								? `${yLabel} ${formatter(payload[0].payload[hardwareType][yIdx][metric])}`
+								: `${yLabel} ${formatter(payload[0].payload[yKey])}`}
+						</Typography>
+					</Stack>
+				</Box>
+				{/* Display original value */}
+			</Box>
+		);
+	}
+	return null;
+};
+
+InfrastructureTooltip.propTypes = {
+	active: PropTypes.bool,
+	payload: PropTypes.array,
+	label: PropTypes.oneOfType([
+		PropTypes.instanceOf(Date),
+		PropTypes.string,
+		PropTypes.number,
+	]),
+	yKey: PropTypes.string,
+	yIdx: PropTypes.number,
+	yLabel: PropTypes.string,
+	dotColor: PropTypes.string,
+	dateRange: PropTypes.string,
+};
+
+export const TemperatureTooltip = ({
+	active,
+	payload,
+	label,
+	keys,
+	dotColor,
+	dateRange,
+}) => {
+	const uiTimezone = useSelector((state) => state.ui.timezone);
+	const theme = useTheme();
+	const format = tooltipDateFormatLookup(dateRange);
+	const formatCoreKey = (key) => {
+		return key.replace(/^core(\d+)$/, "Core $1");
+	};
+	if (active && payload && payload.length) {
+		return (
+			<Box
+				className="area-tooltip"
+				sx={{
+					backgroundColor: theme.palette.primary.main,
+					border: 1,
+					borderColor: theme.palette.primary.lowContrast,
+					borderRadius: theme.shape.borderRadius,
+					py: theme.spacing(2),
+					px: theme.spacing(4),
+				}}
+			>
+				<Typography
+					sx={{
+						color: theme.palette.primary.contrastTextTertiary,
+						fontSize: 12,
+						fontWeight: 500,
+					}}
+				>
+					{formatDateWithTz(label, format, uiTimezone)}
+				</Typography>
+
+				<Stack direction="column">
+					{keys.map((key) => {
+						return (
+							<Stack
+								key={key}
+								display="inline-flex"
+								direction="row"
+								justifyContent="space-between"
+								ml={theme.spacing(3)}
+								sx={{
+									"& span": {
+										color: theme.palette.primary.contrastTextTertiary,
+										fontSize: 11,
+										fontWeight: 500,
+									},
+								}}
+							>
+								<Stack
+									direction="row"
+									alignItems="center"
+									gap={theme.spacing(2)}
+								>
+									<Box
+										display="inline-block"
+										width={theme.spacing(4)}
+										height={theme.spacing(4)}
+										backgroundColor={dotColor}
+										sx={{ borderRadius: "50%" }}
+									/>
+
+									<Typography
+										component="span"
+										sx={{ opacity: 0.8 }}
+									>
+										{`${formatCoreKey(key)}: ${payload[0].payload[key]} °C`}
+									</Typography>
+								</Stack>
+								<Typography component="span"></Typography>
+							</Stack>
+						);
+					})}
+				</Stack>
+			</Box>
+		);
+	}
+	return null;
+};
+
+TemperatureTooltip.propTypes = {
+	active: PropTypes.bool,
+	keys: PropTypes.array,
+	payload: PropTypes.array,
+	label: PropTypes.oneOfType([
+		PropTypes.instanceOf(Date),
+		PropTypes.string,
+		PropTypes.number,
+	]),
+	dotColor: PropTypes.string,
+	dateRange: PropTypes.string,
+};
@@ -0,0 +1,47 @@
+/**
+ * Creates an SVG gradient definition for use in charts
+ * @param {Object} params - The gradient parameters
+ * @param {string} [params.id="colorUv"] - Unique identifier for the gradient
+ * @param {string} params.startColor - Starting color of the gradient (hex, rgb, or color name)
+ * @param {string} params.endColor - Ending color of the gradient (hex, rgb, or color name)
+ * @param {number} [params.startOpacity=0.8] - Starting opacity (0-1)
+ * @param {number} [params.endOpacity=0] - Ending opacity (0-1)
+ * @param {('vertical'|'horizontal')} [params.direction="vertical"] - Direction of the gradient
+ * @returns {JSX.Element} SVG gradient definition element
+ * @example
+ * createCustomGradient({
+ *   startColor: "#1976D2",
+ *   endColor: "#42A5F5",
+ *   direction: "horizontal"
+ * })
+ */
+
+export const createGradient = ({
+	id,
+	startColor,
+	endColor,
+	startOpacity = 0.8,
+	endOpacity = 0,
+	direction = "vertical", // or "horizontal"
+}) => (
+	<defs>
+		<linearGradient
+			id={id}
+			x1={direction === "vertical" ? "0" : "0"}
+			y1={direction === "vertical" ? "0" : "0"}
+			x2={direction === "vertical" ? "0" : "1"}
+			y2={direction === "vertical" ? "1" : "0"}
+		>
+			<stop
+				offset="0%"
+				stopColor={startColor}
+				stopOpacity={startOpacity}
+			/>
+			<stop
+				offset="100%"
+				stopColor={endColor}
+				stopOpacity={endOpacity}
+			/>
+		</linearGradient>
+	</defs>
+);
@@ -0,0 +1,74 @@
+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 { Box, Stack, Typography } from "@mui/material";
+import { useTheme } from "@emotion/react";
+
+/**
+ * `Check` is a functional React component that displays a check icon and a label.
+ *
+ * @component
+ * @param {Object} props - The properties that define the `Check` component.
+ * @param {string} props.text - The text to be displayed as the label next to the check icon.
+ * @param {'info' | 'error' | 'success'} [props.variant='info'] - The variant of the check component, affecting its styling.
+ * @param {boolean} [props.outlined] - Whether the check icon should be outlined or not.
+ *
+ * @example
+ * // To use this component, import it and use it in your JSX like this:
+ * <Check text="Your Text Here" />
+ *
+ * @returns {React.Element} The `Check` component with a check icon and a label, defined by the `text` prop.
+ */
+const Check = ({ text, noHighlightText, variant = "info", outlined = false }) => {
+	const theme = useTheme();
+	const colors = {
+		success: theme.palette.success.main,
+		error: theme.palette.error.main,
+		info: theme.palette.info.border,
+	};
+	return (
+		<Stack
+			direction="row"
+			className="check"
+			gap={outlined ? theme.spacing(6) : theme.spacing(4)}
+			alignItems="center"
+		>
+			{outlined ? (
+				<CheckOutlined alt="check" />
+			) : (
+				<Box
+					lineHeight={0}
+					sx={{
+						"& svg > path": { fill: colors[variant] },
+					}}
+				>
+					<CheckGrey alt="form checks" />
+				</Box>
+			)}
+			<Typography
+				component="span"
+				sx={{
+					color:
+						variant === "info"
+							? theme.palette.primary.contrastTextSecondary
+							: colors[variant],
+					opacity: 0.9,
+					fontWeight: 450,
+				}}
+			>
+				{noHighlightText && <Typography component="span">{noHighlightText}</Typography>}{" "}
+				{text}
+			</Typography>
+		</Stack>
+	);
+};
+
+Check.propTypes = {
+	text: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+	noHighlightText: PropTypes.string,
+	variant: PropTypes.oneOf(["info", "error", "success"]),
+	outlined: PropTypes.bool,
+};
+
+export default Check;
@@ -0,0 +1,29 @@
+import { Box } from "@mui/material";
+import PropTypes from "prop-types";
+import { useTheme } from "@emotion/react";
+const CircularCount = ({ count }) => {
+	const theme = useTheme();
+	return (
+		<Box
+			component="span"
+			color={theme.palette.tertiary.contrastText}
+			border={2}
+			borderColor={theme.palette.accent.main}
+			backgroundColor={theme.palette.tertiary.main}
+			sx={{
+				padding: ".25em .75em",
+				borderRadius: "50rem",
+				fontSize: "12px",
+				fontWeight: 500,
+			}}
+		>
+			{count}
+		</Box>
+	);
+};
+
+CircularCount.propTypes = {
+	count: PropTypes.number,
+};
+
+export default CircularCount;
@@ -0,0 +1,213 @@
+import { useState } from "react";
+import { styled, alpha } from "@mui/material/styles";
+import Box from "@mui/material/Box";
+import AppBar from "@mui/material/AppBar";
+import Toolbar from "@mui/material/Toolbar";
+import Button from "@mui/material/Button";
+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 ThemeSwitch from "../ThemeSwitch/index.jsx";
+import { useTheme } from "@mui/material/styles";
+import { useSelector } from "react-redux";
+import { useLocation, useNavigate } from "react-router-dom";
+
+const StyledToolbar = styled(Toolbar)(({ theme, mode }) => ({
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "space-between",
+	flexShrink: 0,
+	borderRadius: `calc(${theme.shape.borderRadius}px + 4px)`,
+	backdropFilter: "blur(24px)",
+	border: "1px solid",
+	borderColor:
+		mode === "light"
+			? alpha(theme.palette.common.black, 0.1)
+			: alpha(theme.palette.common.white, 0.1),
+	backgroundColor:
+		mode === "light"
+			? alpha(theme.palette.common.white, 0.4)
+			: alpha(theme.palette.common.black, 0.4),
+	boxShadow: theme.shadows[3],
+	padding: "8px 12px",
+}));
+
+const StyledMenuItem = styled(MenuItem)(({ theme }) => ({
+	fontSize: "1.1rem",
+	margin: theme.spacing(4, 2),
+}));
+
+const AppAppBar = () => {
+	const [open, setOpen] = useState(false);
+	const theme = useTheme();
+	const mode = useSelector((state) => state.ui.mode);
+	const location = useLocation();
+	const navigate = useNavigate();
+
+	const logoSrc =
+		mode === "light" ? "/images/prism-black.png" : "/images/prism-white.png";
+
+	const toggleDrawer = (newOpen) => () => {
+		setOpen(newOpen);
+	};
+
+	const handleScroll = (id) => {
+		if (location.pathname === "/") {
+			const element = document.getElementById(id);
+			if (element) {
+				element.scrollIntoView({ behavior: "smooth" });
+			}
+		} else {
+			navigate(`/#${id}`);
+		}
+	};
+
+	return (
+		<AppBar
+			position="fixed"
+			sx={{
+				boxShadow: 0,
+				bgcolor: "transparent",
+				backgroundImage: "none",
+				border: "none",
+				mt: "calc(var(--template-frame-height, 0px) + 28px)",
+			}}
+		>
+			<Container maxWidth="lg">
+				<StyledToolbar
+					variant="dense"
+					disableGutters
+					mode={mode}
+				>
+					<Box sx={{ flexGrow: 1, display: "flex", alignItems: "center", px: 0 }}>
+						<img
+							src={logoSrc}
+							alt="Prism Logo"
+							style={{
+								height: "auto",
+								width: "auto",
+								marginRight: "10px",
+								maxHeight: "32px",
+							}}
+						/>
+						<Box sx={{ display: { xs: "none", md: "flex" } }}>
+							<Button
+								variant="text"
+								color="info"
+								size="large"
+								onClick={() => handleScroll("features")}
+							>
+								Features
+							</Button>
+							<Button
+								variant="text"
+								color="info"
+								size="large"
+								onClick={() => handleScroll("highlights")}
+							>
+								Highlights
+							</Button>
+							<Button
+								variant="text"
+								color="info"
+								size="large"
+								onClick={() => handleScroll("faq")}
+							>
+								FAQ
+							</Button>
+							<Button
+								variant="text"
+								color="info"
+								size="large"
+								href="https://uprock.com/blog"
+							>
+								Blog
+							</Button>
+						</Box>
+					</Box>
+					<Box
+						sx={{
+							display: { xs: "none", md: "flex" },
+							gap: 1,
+							alignItems: "center",
+						}}
+					>
+						{/* <Button color="primary" variant="text" size="small">
+              Sign in
+            </Button>
+            <Button color="primary" variant="contained" size="small">
+              Sign up
+            </Button> */}
+					</Box>
+					<Box
+						sx={{
+							display: { xs: "flex", md: "none" },
+
+							gap: 1,
+						}}
+					>
+						<IconButton
+							aria-label="Menu button"
+							onClick={toggleDrawer(true)}
+						>
+							<MenuIcon sx={{ color: theme.palette.text.primary }} />
+						</IconButton>
+						<Drawer
+							anchor="top"
+							open={open}
+							onClose={toggleDrawer(false)}
+							PaperProps={{
+								sx: {
+									top: 0,
+									marginTop: 0,
+									borderRadius: 0,
+									backgroundColor: theme.palette.background.paper,
+								},
+							}}
+						>
+							<Box sx={{ p: 4, backgroundColor: theme.palette.background.main }}>
+								<Box
+									sx={{
+										display: "flex",
+										justifyContent: "flex-end",
+									}}
+								>
+									<IconButton onClick={toggleDrawer(false)}>
+										<CloseRoundedIcon sx={{ color: theme.palette.text.primary }} />
+									</IconButton>
+								</Box>
+
+								<StyledMenuItem>Features</StyledMenuItem>
+								<StyledMenuItem>Testimonials</StyledMenuItem>
+								<StyledMenuItem>Highlights</StyledMenuItem>
+								<StyledMenuItem>FAQ</StyledMenuItem>
+								<StyledMenuItem
+									component="a"
+									href="https://uprock.com/blog"
+								>
+									Blog
+								</StyledMenuItem>
+								{/* <MenuItem>
+                  <Button color="primary" variant="contained" fullWidth>
+                    Sign up
+                  </Button>
+                </MenuItem>
+                <MenuItem>
+                  <Button color="primary" variant="outlined" fullWidth>
+                    Sign in
+                  </Button>
+                </MenuItem> */}
+							</Box>
+						</Drawer>
+					</Box>
+					<ThemeSwitch />
+				</StyledToolbar>
+			</Container>
+		</AppBar>
+	);
+};
+
+export default AppAppBar;
@@ -0,0 +1,255 @@
+import * as React from "react";
+import Box from "@mui/material/Box";
+import Container from "@mui/material/Container";
+import IconButton from "@mui/material/IconButton";
+import Link from "@mui/material/Link";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import { FaFacebook, FaLinkedin, FaGithub, FaTwitter, FaEnvelope } from "react-icons/fa";
+
+function Copyright() {
+	return (
+		<Typography sx={{ color: "text.secondary", mt: 1 }}>
+			{"Copyright © "}
+			<Link
+				color="text.secondary"
+				href="https://prism.uprock.com/"
+			>
+				UpRock
+			</Link>
+			&nbsp;
+			{new Date().getFullYear()}
+		</Typography>
+	);
+}
+
+export default function Footer() {
+	return (
+		<Container
+			sx={{
+				display: "flex",
+				flexDirection: "column",
+				alignItems: "center",
+				gap: { xs: 4, sm: 8 },
+				py: { xs: 24, sm: 24 },
+				px: { xs: 12, sm: 12 },
+				textAlign: { sm: "center", md: "left" },
+			}}
+		>
+			<Box
+				sx={{
+					display: "flex",
+					justifyContent: "space-between",
+					pt: { xs: 4, sm: 8 },
+					width: "100%",
+					borderColor: "divider",
+				}}
+			>
+				<div>
+					<Link
+						color="text.secondary"
+						href="https://uprock.com/privacy-policy"
+					>
+						Privacy Policy
+					</Link>
+					<Typography sx={{ display: "inline", mx: 0.5, opacity: 0.5 }}>
+						&nbsp;•&nbsp;
+					</Typography>
+					<Link
+						color="text.secondary"
+						href="https://uprock.com/terms-of-use"
+					>
+						Terms of Service
+					</Link>
+					<Copyright />
+				</div>
+				<Stack
+					direction="row"
+					spacing={1}
+					useFlexGap
+					sx={{ justifyContent: "left", color: "text.secondary" }}
+				>
+					<IconButton
+						color="inherit"
+						size="small"
+						href="mailto:prism@uprock.com?subject=Interested%20in%20UpRock%20Prism"
+						aria-label="Contact Us"
+						sx={{ alignSelf: "center" }}
+					>
+						<FaEnvelope />
+					</IconButton>
+					<IconButton
+						color="inherit"
+						size="small"
+						href="https://facebook.com/uprockcom"
+						aria-label="Facebook"
+						sx={{ alignSelf: "center" }}
+					>
+						<FaFacebook />
+					</IconButton>
+					<IconButton
+						color="inherit"
+						size="small"
+						href="https://x.com/uprockcom"
+						aria-label="X"
+						sx={{ alignSelf: "center" }}
+					>
+						<FaTwitter />
+					</IconButton>
+					<IconButton
+						color="inherit"
+						size="small"
+						href="https://www.linkedin.com/company/uprock/"
+						aria-label="LinkedIn"
+						sx={{ alignSelf: "center" }}
+					>
+						<FaLinkedin />
+					</IconButton>
+					<IconButton
+						color="inherit"
+						size="small"
+						href="https://github.com/uprockcom"
+						aria-label="GitHub"
+						sx={{ alignSelf: "center" }}
+					>
+						<FaGithub />
+					</IconButton>
+				</Stack>
+			</Box>
+
+			<Box
+				sx={{
+					display: "flex",
+					flexDirection: "column",
+					alignItems: "center",
+					mt: 4,
+				}}
+			>
+				<Typography
+					variant="h2"
+					sx={{ color: "text.secondary" }}
+				>
+					Made with ❤️ by&nbsp;
+					<Link
+						href="https://uprock.com"
+						color="inherit"
+						sx={{ mx: 0.5 }}
+					>
+						UpRock&nbsp;
+					</Link>
+					&&nbsp;
+					<Link
+						href="https://bluewavelabs.ca"
+						color="inherit"
+						sx={{ mx: 0.5 }}
+					>
+						Bluewave Labs
+					</Link>
+				</Typography>
+				<Box
+					sx={{
+						display: "flex",
+						alignItems: "center",
+						mt: 2,
+					}}
+				>
+					<Typography
+						variant="h2"
+						sx={{ color: "text.secondary", mr: 1 }}
+					>
+						Built on&nbsp;
+					</Typography>
+					<svg
+						id="Layer_1"
+						xmlns="http://www.w3.org/2000/svg"
+						xmlnsXlink="http://www.w3.org/1999/xlink"
+						x="0px"
+						y="0px"
+						viewBox="0 0 397.7 311.7"
+						xmlSpace="preserve"
+						width="15"
+						height="15"
+					>
+						<style type="text/css">
+							{`.st0{fill:url(#SVGID_1_);}
+                .st1{fill:url(#SVGID_2_);}
+                .st2{fill:url(#SVGID_3_);}`}
+						</style>
+						<linearGradient
+							id="SVGID_1_"
+							gradientUnits="userSpaceOnUse"
+							x1="360.8791"
+							y1="351.4553"
+							x2="141.213"
+							y2="-69.2936"
+							gradientTransform="matrix(1 0 0 -1 0 314)"
+						>
+							<stop
+								offset="0"
+								style={{ stopColor: "rgb(0, 255, 163)" }}
+							/>
+							<stop
+								offset="1"
+								style={{ stopColor: "rgb(220, 31, 255)" }}
+							/>
+						</linearGradient>
+						<path
+							className="st0"
+							d="M64.6,237.9c2.4-2.4,5.7-3.8,9.2-3.8h317.4c5.8,0,8.7,7,4.6,11.1l-62.7,62.7c-2.4,2.4-5.7,3.8-9.2,3.8H6.5 c-5.8,0-8.7-7-4.6-11.1L64.6,237.9z"
+						/>
+						<linearGradient
+							id="SVGID_2_"
+							gradientUnits="userSpaceOnUse"
+							x1="264.8291"
+							y1="401.6014"
+							x2="45.163"
+							y2="-19.1475"
+							gradientTransform="matrix(1 0 0 -1 0 314)"
+						>
+							<stop
+								offset="0"
+								style={{ stopColor: "rgb(0, 255, 163)" }}
+							/>
+							<stop
+								offset="1"
+								style={{ stopColor: "rgb(220, 31, 255)" }}
+							/>
+						</linearGradient>
+						<path
+							className="st1"
+							d="M64.6,3.8C67.1,1.4,70.4,0,73.8,0h317.4c5.8,0,8.7,7,4.6,11.1l-62.7,62.7c-2.4,2.4-5.7,3.8-9.2,3.8H6.5 c-5.8,0-8.7-7-4.6-11.1L64.6,3.8z"
+						/>
+						<linearGradient
+							id="SVGID_3_"
+							gradientUnits="userSpaceOnUse"
+							x1="312.5484"
+							y1="376.688"
+							x2="92.8822"
+							y2="-44.061"
+							gradientTransform="matrix(1 0 0 -1 0 314)"
+						>
+							<stop
+								offset="0"
+								style={{ stopColor: "rgb(0, 255, 163)" }}
+							/>
+							<stop
+								offset="1"
+								style={{ stopColor: "rgb(220, 31, 255)" }}
+							/>
+						</linearGradient>
+						<path
+							className="st2"
+							d="M333.1,120.1c-2.4-2.4-5.7-3.8-9.2-3.8H6.5c-5.8,0-8.7,7-4.6,11.1l62.7,62.7c2.4,2.4,5.7,3.8,9.2,3.8h317.4 c5.8,0,8.7-7,4.6-11.1L333.1,120.1z"
+						/>
+					</svg>
+					<Typography
+						variant="h2"
+						sx={{ color: "text.secondary", ml: 1 }}
+					>
+						&nbsp;Solana
+					</Typography>
+				</Box>
+			</Box>
+		</Container>
+	);
+}
@@ -0,0 +1,58 @@
+import { Box, Stack, Typography } from "@mui/material";
+import PropTypes from "prop-types";
+import { useTheme } from "@emotion/react";
+import ConfigBox from "../ConfigBox/index.jsx";
+
+/**
+ * ConfigRow is a styled container used to layout content in a row format with specific padding, border, and spacing.
+ * It serves as the wrapper for ConfigBox, with the left section displaying the title and description,
+ * and the right section displaying the children.
+ *
+ * @component
+ * @example
+ * return (
+ *   <ConfigBox>
+ *     <div>Left content (Title + Description)</div>
+ *     <div>Right content (Children)</div>
+ *   </ConfigBox>
+ * );
+ */
+
+const ConfigRow = ({ title, description, children }) => {
+	const theme = useTheme();
+
+	return (
+		<ConfigBox>
+			<Box>
+				<Typography
+					component="h2"
+					variant="h2"
+				>
+					{title}
+				</Typography>
+				{description && (
+					<Typography
+						variant="body2"
+						mt={theme.spacing(2)}
+					>
+						{description}
+					</Typography>
+				)}
+			</Box>
+			<Stack
+				gap={theme.spacing(15)}
+				mt={theme.spacing(4)}
+			>
+				{children}
+			</Stack>
+		</ConfigBox>
+	);
+};
+
+ConfigRow.propTypes = {
+	title: PropTypes.string.isRequired,
+	description: PropTypes.string,
+	children: PropTypes.node,
+};
+
+export default ConfigRow;
@@ -0,0 +1,24 @@
+import PropTypes from "prop-types";
+
+const Dot = ({ color = "gray", size = "4px", style }) => {
+	return (
+		<span
+			style={{
+				content: '""',
+				width: size,
+				height: size,
+				borderRadius: "50%",
+				backgroundColor: color,
+				opacity: 0.8,
+				...style,
+			}}
+		/>
+	);
+};
+
+Dot.propTypes = {
+	color: PropTypes.string,
+	size: PropTypes.string,
+};
+
+export default Dot;
@@ -0,0 +1,44 @@
+import { Button, Stack } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
+import { useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import PropTypes from "prop-types";
+
+const FallbackActionButtons = ({ link, type }) => {
+	const theme = useTheme();
+	const navigate = useNavigate();
+	const { t } = useTranslation();
+
+	return (
+		<Stack
+			gap={theme.spacing(10)}
+			alignItems="center"
+		>
+			<Button
+				variant="contained"
+				color="accent"
+				sx={{ fontWeight: 700 }}
+				onClick={() => navigate(link)}
+			>
+				{t(`${type}.fallback.actionButton`)}
+			</Button>
+			{type === "uptimeMonitor" && (
+				<Button
+					variant="contained"
+					color="accent"
+					sx={{ alignSelf: "center" }}
+					onClick={() => navigate("/uptime/bulk-import")}
+				>
+					{t("bulkImport.fallbackPage")}
+				</Button>
+			)}
+		</Stack>
+	);
+};
+FallbackActionButtons.propTypes = {
+	title: PropTypes.string.isRequired,
+	link: PropTypes.string.isRequired,
+	type: PropTypes.string.isRequired,
+};
+
+export default FallbackActionButtons;
@@ -0,0 +1,39 @@
+import { useTheme } from "@emotion/react";
+import Box from "@mui/material/Box";
+import Background from "../../../assets/Images/background-grid.svg?react";
+import OutputAnimation from "../../../assets/Animations/output.gif";
+import DarkmodeOutput from "../../../assets/Animations/darkmodeOutput.gif";
+import { useSelector } from "react-redux";
+const FallbackBackground = () => {
+	const theme = useTheme();
+	const mode = useSelector((state) => state.ui.mode);
+	return (
+		<>
+			<Box
+				component="img"
+				src={mode === "light" ? OutputAnimation : DarkmodeOutput}
+				background="transparent"
+				alt="Loading animation"
+				sx={{
+					zIndex: 1,
+					border: "none",
+					borderRadius: theme.spacing(8),
+					width: "100%",
+					transform: "scale(0.6667)",
+				}}
+			/>
+			<Box
+				className="background-pattern-svg"
+				sx={{
+					"& svg g g:last-of-type path": {
+						stroke: theme.palette.primary.lowContrast,
+					},
+				}}
+			>
+				<Background style={{ width: "100%" }} />
+			</Box>
+		</>
+	);
+};
+
+export default FallbackBackground;
@@ -0,0 +1,35 @@
+import PropTypes from "prop-types";
+import { useTheme } from "@mui/material/styles";
+import Box from "@mui/material/Box";
+import Stack from "@mui/material/Stack";
+import Check from "../Check/Check.jsx";
+const FallbackCheckList = ({ checks, type }) => {
+	const theme = useTheme();
+	return (
+		<Box
+			sx={{
+				display: "flex",
+				flexWrap: "wrap",
+				gap: theme.spacing(2),
+				alignItems: "flex-start",
+				maxWidth: { xs: "90%", md: "80%", lg: "75%" },
+			}}
+		>
+			{checks?.map((check, index) => (
+				<Check
+					text={check}
+					key={`${type.trim().split(" ")[0]}-${index}`}
+					outlined={true}
+				/>
+			))}
+		</Box>
+	);
+};
+
+FallbackCheckList.propTypes = {
+	checks: PropTypes.arrayOf(PropTypes.string).isRequired,
+	title: PropTypes.string.isRequired,
+	type: PropTypes.string.isRequired,
+};
+
+export default FallbackCheckList;
@@ -0,0 +1,44 @@
+import { useTheme } from "@emotion/react";
+import { Box, Stack } from "@mui/material";
+import PropTypes from "prop-types";
+
+const FallbackContainer = ({ children, type }) => {
+	const theme = useTheme();
+	return (
+		<Box
+			border={1}
+			borderColor={theme.palette.tertiary.border}
+			borderRadius={theme.shape.borderRadius}
+			backgroundColor={theme.palette.tertiary.background}
+			overflow="hidden"
+			sx={{
+				display: "flex",
+				borderStyle: "dashed",
+				height: "fit-content",
+				minHeight: "60vh",
+				width: {
+					sm: "90%",
+					md: "70%",
+					lg: "50%",
+					xl: "40%",
+				},
+				padding: `${theme.spacing(20)} ${theme.spacing(10)}`,
+			}}
+		>
+			<Stack
+				className={`fallback__${type?.trim().split(" ")[0]}`}
+				alignItems="center"
+				gap={theme.spacing(20)}
+			>
+				{children}
+			</Stack>
+		</Box>
+	);
+};
+
+FallbackContainer.propTypes = {
+	children: PropTypes.node,
+	type: PropTypes.string,
+};
+
+export default FallbackContainer;
@@ -0,0 +1,69 @@
+import Box from "@mui/material/Box";
+import { useTheme } from "@mui/material/styles";
+import Link from "@mui/material/Link";
+import { Link as RouterLink } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import Alert from "../Alert/index.jsx";
+import PropTypes from "prop-types";
+
+const renderWarningMessage = (t) => {
+	return (
+		<>
+			{t("pageSpeedWarning")}{" "}
+			<Link
+				component={RouterLink}
+				to="/settings"
+				sx={{
+					textDecoration: "underline",
+					color: "inherit",
+					fontWeight: "inherit",
+					"&:hover": {
+						textDecoration: "underline",
+					},
+				}}
+			>
+				{t("pageSpeedLearnMoreLink")}
+			</Link>{" "}
+			{t("pageSpeedAddApiKey")}
+		</>
+	);
+};
+
+const FallbackPageSpeedWarning = ({ settingsData }) => {
+	const theme = useTheme();
+	const { t } = useTranslation();
+	return (
+		<Box sx={{ width: "80%", maxWidth: "600px", zIndex: 1 }}>
+			<Box
+				sx={{
+					"& .alert.row-stack": {
+						backgroundColor: theme.palette.warningSecondary.main,
+						borderColor: theme.palette.warningSecondary.lowContrast,
+						"& .MuiTypography-root": {
+							color: theme.palette.warningSecondary.contrastText,
+						},
+						"& .MuiBox-root > svg": {
+							color: theme.palette.warningSecondary.contrastText,
+						},
+					},
+				}}
+			>
+				{settingsData?.pagespeedKeySet === false && (
+					<Alert
+						variant="warning"
+						hasIcon={true}
+						body={renderWarningMessage(t)}
+					/>
+				)}
+			</Box>
+		</Box>
+	);
+};
+
+FallbackPageSpeedWarning.propTypes = {
+	settingsData: PropTypes.shape({
+		pagespeedKeySet: PropTypes.bool,
+	}),
+};
+
+export default FallbackPageSpeedWarning;
@@ -0,0 +1,21 @@
+import { useTheme } from "@mui/material/styles";
+import { Typography } from "@mui/material";
+import PropTypes from "prop-types";
+
+const FallbackTitle = ({ title }) => {
+	const theme = useTheme();
+	return (
+		<Typography
+			alignSelf="center"
+			component="h1"
+			marginY={theme.spacing(4)}
+			color={theme.palette.primary.contrastText}
+		>
+			{title}
+		</Typography>
+	);
+};
+FallbackTitle.propTypes = {
+	title: PropTypes.string.isRequired,
+};
+export default FallbackTitle;
@@ -0,0 +1,40 @@
+[class*="fallback__"] {
+	width: fit-content;
+	margin: auto;
+}
+
+[class*="fallback__"] h1.MuiTypography-root {
+	font-size: var(--env-var-font-size-large);
+	font-weight: 600;
+}
+
+[class*="fallback__"] button.MuiButtonBase-root,
+[class*="fallback__"] .check {
+	width: max-content;
+}
+
+[class*="fallback__"] button.MuiButtonBase-root {
+	min-height: 34px;
+}
+
+[class*="fallback__"] .check span.MuiTypography-root,
+[class*="fallback__"] button.MuiButtonBase-root {
+	font-size: var(--env-var-font-size-medium);
+}
+
+[class*="fallback__"] .background-pattern-svg {
+	position: absolute;
+	top: 0;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	z-index: 0;
+
+	width: 100%;
+	max-width: 800px;
+	height: 100%;
+	max-height: 800px;
+
+	background-position: center;
+	background-size: cover;
+	background-repeat: no-repeat;
+}
@@ -0,0 +1,75 @@
+import PropTypes from "prop-types";
+import { useTheme } from "@emotion/react";
+import { Box, Stack } from "@mui/material";
+import "./index.css";
+import FallbackTitle from "./FallbackTitle.jsx";
+import FallbackCheckList from "./FallbackCheckList.jsx";
+import FallbackActionButtons from "./FallBackActionButtons.jsx";
+import FallbackBackground from "./FallbackBackground.jsx";
+import FallbackContainer from "./FallbackContainer.jsx";
+/**
+ * Fallback component to display a fallback UI with a title, a list of checks, and a navigation button.
+ *
+ * @param {Object} props - The component props.
+ * @param {string} props.title - The title to be displayed in the fallback UI.
+ * @param {string} props.type - The type of the fallback (e.g., "pageSpeed", "notifications").
+ * @param {Array<string>} props.checks - An array of strings representing the checks to display.
+ * @param {string} [props.link="/"] - The link to navigate to.
+ * @param {boolean} [props.showPageSpeedWarning=false] - Whether to show the PageSpeed API warning.
+ * @returns {JSX.Element} The rendered fallback UI.
+ */
+
+const Fallback = ({ title, checks, link = "/", isAdmin, type, children }) => {
+	const theme = useTheme();
+	return (
+		<Box
+			position="relative"
+			sx={{
+				height: "100%",
+				width: "100%",
+				display: "flex",
+				justifyContent: "center",
+				alignItems: "center",
+			}}
+		>
+			<FallbackContainer type={type}>
+				<FallbackBackground />
+				<Stack
+					gap={theme.spacing(5)}
+					zIndex={1}
+					alignItems="center"
+				>
+					<FallbackTitle title={title} />
+					<FallbackCheckList
+						checks={checks}
+						title={title}
+						type={type}
+					/>
+				</Stack>
+				{isAdmin && (
+					<Stack
+						gap={theme.spacing(10)}
+						alignItems="center"
+					>
+						<FallbackActionButtons
+							title={title}
+							link={link}
+							type={type}
+						/>
+						{children}
+					</Stack>
+				)}
+			</FallbackContainer>
+		</Box>
+	);
+};
+Fallback.propTypes = {
+	title: PropTypes.string.isRequired,
+	checks: PropTypes.arrayOf(PropTypes.string).isRequired,
+	link: PropTypes.string,
+	isAdmin: PropTypes.bool,
+	showPageSpeedWarning: PropTypes.bool,
+	type: PropTypes.string.isRequired,
+	children: PropTypes.node,
+};
+export default Fallback;
@@ -0,0 +1,99 @@
+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";
+
+/**
+ * A reusable filter header component that displays a dropdown menu with selectable options.
+ *
+ * @component
+ * @param {Object} props - The component props.
+ * @param {string} props.header - The header text to display when no options are selected.
+ * @param {Array} props.options - An array of options to display in the dropdown menu. Each option should have a `value` and `label`.
+ * @param {Array} [props.value] - The currently selected values.
+ * @param {Function} props.onChange - The callback function to handle changes in the selected values.
+ * @param {boolean} [props.multiple=true] - Whether multiple options can be selected.
+ * @returns {JSX.Element} The rendered FilterHeader component.
+ */
+
+const FilterHeader = ({ header, options, value, onChange, multiple = true }) => {
+	const theme = useTheme();
+
+	const controlledValue = value === undefined ? [] : value; // Ensure value is always treated as an array for controlled component purposes
+
+	return (
+		<FormControl
+			sx={{ minWidth: "10%" }}
+			size="small"
+		>
+			<Select
+				multiple={multiple}
+				IconComponent={(props) => (
+					<AddCircleOutlineIcon
+						{...props}
+						sx={{ fontSize: "medium" }}
+					/>
+				)}
+				displayEmpty
+				value={controlledValue}
+				onChange={onChange}
+				renderValue={(selected) => {
+					if (!selected?.length) {
+						return header;
+					}
+
+					return (
+						header +
+						" | " +
+						selected
+							.map((value) => options.find((option) => option.value === value)?.label)
+							.filter(Boolean)
+							.join(", ")
+					);
+				}}
+				MenuProps={{
+					anchorOrigin: {
+						vertical: "bottom",
+						horizontal: "left",
+					},
+					transformOrigin: {
+						vertical: "top",
+						horizontal: "left",
+					},
+				}}
+			>
+				{options.map((option) => (
+					<MenuItem
+						key={option.value}
+						value={option.value}
+						sx={{
+							height: theme.spacing(17),
+							padding: 0,
+						}}
+					>
+						<Checkbox
+							checked={controlledValue.includes(option.value)}
+							size="small"
+						/>
+						<ListItemText primary={option.label} />
+					</MenuItem>
+				))}
+			</Select>
+		</FormControl>
+	);
+};
+
+FilterHeader.propTypes = {
+	header: PropTypes.string.isRequired,
+	options: PropTypes.arrayOf(
+		PropTypes.shape({
+			value: PropTypes.string.isRequired,
+			label: PropTypes.string.isRequired,
+		})
+	).isRequired,
+	value: PropTypes.arrayOf(PropTypes.string),
+	onChange: PropTypes.func.isRequired,
+	multiple: PropTypes.bool,
+};
+
+export default FilterHeader;
@@ -0,0 +1,23 @@
+import { Typography } from "@mui/material";
+import { useTheme } from "@emotion/react";
+import { useTranslation } from "react-i18next";
+
+const NetworkError = () => {
+	const theme = useTheme();
+	const { t } = useTranslation();
+
+	return (
+		<>
+			<Typography
+				variant="h1"
+				marginY={theme.spacing(4)}
+				color={theme.palette.primary.contrastTextTertiary}
+			>
+				{t("common.toasts.networkError")}
+			</Typography>
+			<Typography>{t("common.toasts.checkConnection")}</Typography>
+		</>
+	);
+};
+
+export default NetworkError;
@@ -0,0 +1,85 @@
+import { useTheme } from "@emotion/react";
+import { Box, Stack } from "@mui/material";
+import OutputAnimation from "../../../assets/Animations/output.gif";
+import DarkmodeOutput from "../../../assets/Animations/darkmodeOutput.gif";
+import Background from "../../../assets/Images/background-grid.svg?react";
+import { useSelector } from "react-redux";
+
+/**
+ * Fallback component to display a fallback UI for network errors
+ *
+ * @returns {JSX.Element} The rendered fallback UI.
+ */
+
+const GenericFallback = ({ children }) => {
+	const theme = useTheme();
+	const mode = useSelector((state) => state.ui.mode);
+
+	return (
+		<Box
+			padding={theme.spacing(16)}
+			position="relative"
+			border={1}
+			borderColor={theme.palette.primary.lowContrast}
+			borderRadius={theme.shape.borderRadius}
+			backgroundColor={theme.palette.primary.main}
+			overflow="hidden"
+			sx={{
+				borderStyle: "dashed",
+			}}
+		>
+			<Stack
+				alignItems="center"
+				gap={theme.spacing(20)}
+				sx={{
+					width: "fit-content",
+					margin: "auto",
+					marginTop: "100px",
+				}}
+			>
+				<Box
+					component="img"
+					src={mode === "light" ? OutputAnimation : DarkmodeOutput}
+					alt="Loading animation"
+					sx={{
+						zIndex: 1,
+						border: "none",
+						borderRadius: theme.spacing(8),
+						width: "100%",
+						backgroundColor: "transparent",
+					}}
+				/>
+				<Box
+					sx={{
+						"& svg g g:last-of-type path": {
+							stroke: theme.palette.primary.lowContrast,
+						},
+						position: "absolute",
+						top: "0",
+						left: "50%",
+						transform: "translate(-50%, -50%)",
+						width: "100%",
+						maxWidth: "800px",
+						height: "100%",
+						maxHeight: "800px",
+						backgroundPosition: "center",
+						backgroundSize: "cover",
+						backgroundRepeat: "no-repeat",
+					}}
+				>
+					<Background style={{ width: "100%" }} />
+				</Box>
+				<Stack
+					gap={theme.spacing(4)}
+					alignItems="center"
+					maxWidth={"300px"}
+					zIndex={1}
+				>
+					{children}
+				</Stack>
+			</Stack>
+		</Box>
+	);
+};
+
+export default GenericFallback;
@@ -0,0 +1,49 @@
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+import { logger } from "../../../Utils/Logger.js";
+import { networkService } from "../../../main.jsx";
+
+const withAdminCheck = (WrappedComponent) => {
+	const WithAdminCheck = (props) => {
+		const navigate = useNavigate();
+		const [isChecking, setIsChecking] = useState(true);
+		const [superAdminExists, setSuperAdminExists] = useState(false);
+
+		useEffect(() => {
+			networkService
+				.doesSuperAdminExist()
+				.then((response) => {
+					if (response?.data?.data === true) {
+						navigate("/login");
+					} else {
+						setSuperAdminExists(false);
+					}
+				})
+				.catch((error) => {
+					logger.error(error);
+				})
+				.finally(() => {
+					setIsChecking(false);
+				});
+		}, [navigate]);
+
+		if (isChecking) {
+			return null;
+		}
+
+		return (
+			<WrappedComponent
+				{...props}
+				superAdminExists={superAdminExists}
+			/>
+		);
+	};
+	const wrappedComponentName =
+		WrappedComponent.displayName || WrappedComponent.name || "Component";
+	WithAdminCheck.displayName = `WithAdminCheck(${wrappedComponentName})`;
+
+	return WithAdminCheck;
+};
+
+export default withAdminCheck;
@@ -0,0 +1,32 @@
+import { Typography } from "@mui/material";
+import PropTypes from "prop-types";
+
+/**
+ * A heading component that renders text with a specific heading level.
+ *
+ * @param {Object} props - The properties passed to the Heading component.
+ * @param {('h1'|'h2'|'h3')} props.component - The heading level for the component.
+ * @param {Object} props.style - Custom styles to apply to the heading.
+ * @param {string} props.children - The content to display inside the heading.
+ * @returns {JSX.Element} The Typography component with specified heading properties.
+ */
+
+function Heading({ component, style, children }) {
+	return (
+		<Typography
+			component={component}
+			variant="h2"
+			fontWeight={600}
+			style={style}
+		>
+			{children}
+		</Typography>
+	);
+}
+
+Heading.propTypes = {
+	component: PropTypes.oneOf(["h1", "h2", "h3"]).isRequired,
+	style: PropTypes.object,
+	children: PropTypes.string.isRequired,
+};
+export { Heading };
@@ -0,0 +1,73 @@
+import { Stack, Typography } from "@mui/material";
+import PropTypes from "prop-types";
+import { useTheme } from "@emotion/react";
+import Dot from "../Dot/index.jsx";
+import { StatusLabel } from "@/Components/v1/Label/index.jsx";
+/**
+ * Host component.
+ * This subcomponent receives a params object and displays the host details.
+ *
+ * @component
+ * @param {Object} params - An object containing the following properties:
+ * @param {string} params.url - The URL of the host.
+ * @param {string} params.title - The name of the host.
+ * @param {string} params.percentageColor - The color of the percentage text.
+ * @param {number} params.percentage - The percentage to display.
+ * @returns {React.ElementType} Returns a div element with the host details.
+ */
+const Host = ({ url, title, percentageColor, percentage, showURL, status }) => {
+	const theme = useTheme();
+	return (
+		<Stack>
+			<Stack
+				direction="row"
+				position="relative"
+				alignItems="center"
+				gap={theme.spacing(5)}
+			>
+				<Typography
+					variant="h6"
+					sx={{
+						fontWeight: 600,
+					}}
+				>
+					{title}
+				</Typography>
+
+				{percentageColor && percentage && (
+					<>
+						<Dot />
+						<Typography
+							variant="h6"
+							sx={{
+								fontWeight: 600,
+								color: percentageColor,
+							}}
+						>
+							{percentage}%
+						</Typography>
+						{status && (
+							<StatusLabel
+								status={status}
+								text={status}
+								customStyles={{ textTransform: "capitalize" }}
+							/>
+						)}
+					</>
+				)}
+			</Stack>
+			{showURL && <span style={{ opacity: 0.6 }}>{url}</span>}
+		</Stack>
+	);
+};
+
+Host.propTypes = {
+	title: PropTypes.string,
+	percentageColor: PropTypes.string,
+	percentage: PropTypes.string,
+	url: PropTypes.string,
+	showURL: PropTypes.bool,
+	status: PropTypes.string,
+};
+
+export default Host;
@@ -0,0 +1,67 @@
+import PropTypes from "prop-types";
+import { useTheme } from "@mui/material";
+import { BaseLabel } from "../Label/index.jsx";
+
+/**
+ * @component
+ * @param {Object} props
+ * @param {number} props.status - The http status for the label
+ * @param {Styles} props.customStyles - CSS Styles passed from parent component
+ * @returns {JSX.Element}
+ * @example
+ * // Render a http status label
+ * <HttpStatusLabel status={404} />
+ */
+
+const DEFAULT_CODE = 9999; // Default code for unknown status
+
+const handleStatusCode = (status) => {
+	if (status) {
+		return status;
+	}
+	return DEFAULT_CODE;
+};
+
+const getRoundedStatusCode = (status) => {
+	return Math.floor(status / 100) * 100;
+};
+
+const HttpStatusLabel = ({ status, customStyles }) => {
+	const theme = useTheme();
+	const colors = {
+		400: {
+			color: theme.palette.warning.main,
+			borderColor: theme.palette.warning.lowContrast,
+		},
+		500: {
+			color: theme.palette.error.main,
+			borderColor: theme.palette.error.lowContrast,
+		},
+		default: {
+			color: theme.palette.primary.contrastText,
+			borderColor: theme.palette.primary.contrastText,
+		},
+	};
+
+	const statusCode = handleStatusCode(status);
+
+	const { borderColor, color } =
+		colors[getRoundedStatusCode(statusCode)] || colors.default;
+	return (
+		<BaseLabel
+			label={String(statusCode)}
+			styles={{
+				color: color,
+				borderColor: borderColor,
+				...customStyles,
+			}}
+		/>
+	);
+};
+
+HttpStatusLabel.propTypes = {
+	status: PropTypes.number,
+	customStyles: PropTypes.object,
+};
+
+export { HttpStatusLabel };
@@ -1,9 +1,8 @@
-import i18n from "@/Utils/i18n.js";
+import i18n from "../../../Utils/i18n.js";
 import { useSelector } from "react-redux";
 import { useEffect } from "react";
-import type { RootState } from "@/store";
 const I18nLoader = () => {
-	const language = useSelector((state: RootState) => state.ui.language ?? "en");
+	const language = useSelector((state) => state.ui.language ?? "en");

 	useEffect(() => {
 		if (language && i18n.language !== language) {
@@ -1,120 +0,0 @@
-/**
- * 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",
-};
@@ -1,198 +0,0 @@
-import { useTheme } from "@mui/material";
-import PropTypes from "prop-types";
-import {
-	Activity,
-	AlertCircle,
-	AlertTriangle,
-	ArrowDown,
-	ArrowLeft,
-	ArrowUp,
-	ArrowUpRight,
-	Bell,
-	Calendar,
-	Check,
-	CheckCircle,
-	CheckCircle2,
-	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,
-	CheckCircle2,
-	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;
@@ -0,0 +1,77 @@
+import { Box, styled } from "@mui/material";
+import PropTypes from "prop-types";
+
+/**
+ * IconBox - A styled box component for rendering icons with consistent sizing and styling
+ *
+ * @component
+ * @param {Object} [props] - Configuration options for the IconBox
+ * @param {number} [props.height=34] - Height of the icon box
+ * @param {number} [props.width=34] - Width of the icon box
+ * @param {number} [props.minWidth=34] - Minimum width of the icon box
+ * @param {number} [props.borderRadius=4] - Border radius of the icon box
+ * @param {number} [props.svgWidth=20] - Width of the SVG icon
+ * @param {number} [props.svgHeight=20] - Height of the SVG icon
+ *
+ * @example
+ * // Basic usage
+ * <IconBox>
+ *   <SomeIcon />
+ * </IconBox>
+ *
+ * @example
+ * // Customized usage
+ * <IconBox
+ *   height={40}
+ *   width={40}
+ *   svgWidth={24}
+ *   svgHeight={24}
+ * >
+ *   <CustomIcon />
+ * </IconBox>
+ *
+ * @returns {React.ReactElement} A styled box containing an icon
+ */
+const IconBox = styled(Box)(
+	({
+		theme,
+		height = 34,
+		width = 34,
+		minWidth = 34,
+		borderRadius = 4,
+		svgWidth = 20,
+		svgHeight = 20,
+	}) => ({
+		height: height,
+		minWidth: minWidth,
+		width: width,
+		position: "relative",
+		border: 1,
+		borderStyle: "solid",
+		borderColor: theme.palette.primary.lowContrast,
+		borderRadius: borderRadius,
+		backgroundColor: theme.palette.tertiary.main,
+		"& svg": {
+			position: "absolute",
+			top: "50%",
+			left: "50%",
+			transform: "translate(-50%, -50%)",
+			width: svgWidth,
+			height: svgHeight,
+			"& path": {
+				stroke: theme.palette.primary.contrastTextTertiary,
+			},
+		},
+	})
+);
+
+IconBox.propTypes = {
+	height: PropTypes.number,
+	width: PropTypes.number,
+	minWidth: PropTypes.number,
+	borderRadius: PropTypes.number,
+	svgWidth: PropTypes.number,
+	svgHeight: PropTypes.number,
+};
+
+export default IconBox;
@@ -0,0 +1,72 @@
+import { Box } from "@mui/material";
+import PropTypes from "prop-types";
+
+const isValidBase64Image = (data) => {
+	return /^[A-Za-z0-9+/=]+$/.test(data);
+};
+
+const Image = ({
+	shouldRender = true,
+	src,
+	alt,
+	width = "auto",
+	height = "auto",
+	minWidth = "auto",
+	minHeight = "auto",
+	maxWidth = "auto",
+	maxHeight = "auto",
+	base64,
+	placeholder,
+	sx,
+}) => {
+	if (shouldRender === false) {
+		return null;
+	}
+
+	if (typeof src !== "undefined" && typeof base64 !== "undefined") {
+		console.warn("base64 takes precedence over src and overwrites it");
+	}
+
+	if (typeof base64 !== "undefined" && isValidBase64Image(base64)) {
+		src = `data:image/png;base64,${base64}`;
+	}
+
+	if (
+		typeof src === "undefined" &&
+		typeof base64 === "undefined" &&
+		typeof placeholder !== "undefined"
+	) {
+		src = placeholder;
+	}
+
+	return (
+		<Box
+			component="img"
+			src={src}
+			alt={alt}
+			minWidth={minWidth}
+			minHeight={minHeight}
+			maxWidth={maxWidth}
+			maxHeight={maxHeight}
+			width={width}
+			height={height}
+			sx={{ ...sx }}
+		/>
+	);
+};
+
+Image.propTypes = {
+	shouldRender: PropTypes.bool,
+	src: PropTypes.string,
+	alt: PropTypes.string.isRequired,
+	width: PropTypes.string,
+	height: PropTypes.string,
+	minWidth: PropTypes.string,
+	minHeight: PropTypes.string,
+	maxWidth: PropTypes.string,
+	maxHeight: PropTypes.string,
+	base64: PropTypes.string,
+	sx: PropTypes.object,
+};
+
+export default Image;
@@ -0,0 +1,42 @@
+import { RowContainer } from "../StandardContainer/index.jsx";
+import { Stack, Typography } from "@mui/material";
+import Image from "../Image/index.jsx";
+
+import { useTheme } from "@mui/material/styles";
+
+const InfoBox = ({
+	img,
+	icon: Icon,
+	alt,
+	heading,
+	headingLevel = 2,
+	subHeading,
+	subHeadingLevel = "",
+	sx,
+}) => {
+	const theme = useTheme();
+	return (
+		<RowContainer sx={{ ...sx }}>
+			{img && (
+				<Image
+					src={img}
+					height={"30px"}
+					width={"30px"}
+					alt={alt}
+					sx={{ marginRight: theme.spacing(8) }}
+				/>
+			)}
+			{Icon && (
+				<Icon sx={{ width: "30px", height: "30px", marginRight: theme.spacing(8) }} />
+			)}
+			<Stack>
+				<Typography variant={`h${headingLevel}`}>{heading}</Typography>
+				<Typography variant={subHeadingLevel ? `h${subHeadingLevel}` : "body1"}>
+					{subHeading}
+				</Typography>
+			</Stack>
+		</RowContainer>
+	);
+};
+
+export default InfoBox;
@@ -1,7 +1,8 @@
 import PropTypes from "prop-types";
 import { FormControlLabel, Checkbox as MuiCheckbox } from "@mui/material";
 import { useTheme } from "@emotion/react";
-import Icon from "../../Icon";
+import CheckboxOutline from "../../../../assets/icons/checkbox-outline.svg?react";
+import CheckboxFilled from "../../../../assets/icons/checkbox-filled.svg?react";

 /**
 * Checkbox Component
@@ -64,8 +65,8 @@ const Checkbox = ({
 					name={name}
 					value={value}
 					onChange={onChange}
-					icon={<Icon name="Square" />}
-					checkedIcon={<Icon name="CheckSquare" />}
+					icon={<CheckboxOutline />}
+					checkedIcon={<CheckboxFilled />}
 					inputProps={{
 						"aria-label": "controlled checkbox",
 						id: id,
@@ -1,10 +1,11 @@
 // Components
 import { Box, Stack, Typography } from "@mui/material";
-import Icon from "../../Icon";
+import CloudUploadIcon from "@mui/icons-material/CloudUpload";
 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";
@@ -175,10 +176,7 @@ const ImageUpload = ({
 									boxShadow: theme.shape.boxShadow,
 								}}
 							>
-								<Icon
-									name="Upload"
-									size={24}
-								/>
+								<CloudUploadIcon />
 							</IconButton>
 							<Typography
 								component="h2"
@@ -205,12 +203,7 @@ const ImageUpload = ({
 					</Box>
 					{(localError || progress.isLoading || progress.value !== 0) && (
 						<ProgressUpload
-							icon={
-								<Icon
-									name="Image"
-									size={20}
-								/>
-							}
+							icon={<ImageIcon />}
 							label={file?.name || "Upload failed"}
 							size={file?.size}
 							progress={progress.value}
@@ -1,7 +1,7 @@
 import PropTypes from "prop-types";
 import { FormControlLabel, Radio as MUIRadio, Typography } from "@mui/material";
 import { useTheme } from "@emotion/react";
-import Icon from "../../Icon";
+import RadioChecked from "../../../../assets/icons/radio-checked.svg?react";
 import "./index.css";

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

 import "./index.css";
@@ -64,6 +64,7 @@ const Select = ({
 	const theme = useTheme();
 	const getItemValue = (item) => item?._id ?? item?.id;
 	const itemStyles = {
+		fontSize: "var(--env-var-font-size-medium)",
 		color: theme.palette.primary.contrastTextTertiary,
 		borderRadius: theme.shape.borderRadius,
 		margin: theme.spacing(2),
@@ -97,13 +98,7 @@ const Select = ({
 				error={error}
 				name={name}
 				inputProps={{ id: id }}
-				IconComponent={(props) => (
-					<Icon
-						name="ChevronDown"
-						size={20}
-						{...props}
-					/>
-				)}
+				IconComponent={KeyboardArrowDownIcon}
 				MenuProps={{ disableScrollLock: true }}
 				sx={{
 					fontSize: 13,
@@ -1,7 +1,10 @@
 import { Stack, Typography, InputAdornment, IconButton } from "@mui/material";
 import { useTheme } from "@mui/material/styles";
 import PropTypes from "prop-types";
-import Icon from "../../../Icon";
+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";

 export const HttpAdornment = ({ https }) => {
 	const theme = useTheme();
@@ -18,6 +21,7 @@ export const HttpAdornment = ({ https }) => {
 		>
 			<Typography
 				component="h5"
+				paddingRight={"var(--env-var-spacing-1-minus)"}
 				color={theme.palette.primary.contrastTextSecondary}
 				sx={{ lineHeight: 1, opacity: 0.8 }}
 			>
@@ -52,17 +56,7 @@ export const PasswordEndAdornment = ({ fieldType, setFieldType }) => {
 					},
 				}}
 			>
-				{fieldType === "password" ? (
-					<Icon
-						name="EyeOff"
-						size={20}
-					/>
-				) : (
-					<Icon
-						name="Eye"
-						size={20}
-					/>
-				)}
+				{fieldType === "password" ? <VisibilityOff /> : <Visibility />}
 			</IconButton>
 		</InputAdornment>
 	);
@@ -0,0 +1,6 @@
+.label {
+	display: inline-flex;
+	justify-content: center;
+	align-items: center;
+	line-height: normal;
+}
@@ -0,0 +1,172 @@
+import PropTypes from "prop-types";
+import { Box } from "@mui/material";
+import { useTheme } from "@mui/material";
+import "./index.css";
+
+/**
+ * @typedef {Object} Styles
+ * @param {string} [color] - The text color
+ * @param {string} [backgroundColor] - The background color
+ * @param {string} [borderColor] - The border color
+ */
+
+/**
+ * @component
+ * @param {Object} props
+ * @param {string} props.label - The label of the label
+ * @param {Styles} props.styles - CSS Styles passed from parent component
+ * @param {React.ReactNode} children - Children passed from parent component
+ * @returns {JSX.Element}
+ */
+
+const BaseLabel = ({ label, styles, children }) => {
+	const theme = useTheme();
+	// Grab the default borderRadius from the theme to match button style
+	const { borderRadius } = theme.shape;
+	// Calculate padding for the label to mimic button.  Appears to scale correctly, not 100% sure though.
+	const padding = theme.spacing(3, 5);
+
+	return (
+		<Box
+			className="label"
+			sx={{
+				borderRadius: borderRadius,
+				border: `1px solid ${theme.palette.primary.lowContrast}`,
+				color: theme.palette.primary.contrastText,
+				padding: padding,
+				...styles,
+			}}
+		>
+			{children}
+			{label}
+		</Box>
+	);
+};
+
+BaseLabel.propTypes = {
+	label: PropTypes.string.isRequired,
+	styles: PropTypes.shape({
+		color: PropTypes.string,
+		backgroundColor: PropTypes.string,
+	}),
+	children: PropTypes.node,
+};
+
+// Produces a lighter color based on a hex color and a percent
+// lightenColor("#067647", 20) will produce a color 20% lighter than #067647
+const lightenColor = (color, percent) => {
+	let r = parseInt(color.substring(1, 3), 16);
+	let g = parseInt(color.substring(3, 5), 16);
+	let b = parseInt(color.substring(5, 7), 16);
+
+	const amt = Math.round((255 * percent) / 100);
+
+	r = r + amt <= 255 ? r + amt : 255;
+	g = g + amt <= 255 ? g + amt : 255;
+	b = b + amt <= 255 ? b + amt : 255;
+
+	r = r.toString(16).padStart(2, "0");
+	g = g.toString(16).padStart(2, "0");
+	b = b.toString(16).padStart(2, "0");
+
+	return `#${r}${g}${b}`;
+};
+
+/**
+ * @component
+ * @param {Object} props
+ * @param {string} props.label - The label of the label
+ * @param {string} props.color - The color of the label, specified in #RRGGBB format
+ * @returns {JSX.Element}
+ * @example
+ * // Render a red label
+ * <ColoredLabel label="Label" color="#FF0000" />
+ */
+
+const ColoredLabel = ({ label, color }) => {
+	const theme = useTheme();
+	// If an invalid color is passed, default to the labelGray color
+	if (typeof color !== "string" || !/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(color)) {
+		color = theme.palette.primary.lowContrast;
+	}
+
+	// Calculate lighter shades for border and bg
+	const borderColor = lightenColor(color, 20);
+	const bgColor = lightenColor(color, 75);
+
+	return (
+		<BaseLabel
+			label={label}
+			styles={{
+				color: color,
+				borderColor: borderColor,
+				backgroundColor: bgColor,
+			}}
+		></BaseLabel>
+	);
+};
+
+ColoredLabel.propTypes = {
+	label: PropTypes.string.isRequired,
+	color: PropTypes.string.isRequired,
+};
+
+/**
+ * @component
+ * @param {Object} props
+ * @param {'up' | 'down' | 'paused' | 'pending' | 'cannot resolve' | 'published' | 'unpublished'} props.status - The status for the label
+ * @param {string} props.text - The text of the label
+ * @returns {JSX.Element}
+ * @example
+ * // Render an active label
+ * <StatusLabel status="up" text="Active" />
+ */
+
+const statusToTheme = {
+	up: "success",
+	down: "error",
+	paused: "warning",
+	pending: "warning",
+	"cannot resolve": "error",
+	published: "success",
+	unpublished: "error",
+};
+
+const StatusLabel = ({ status, text, customStyles }) => {
+	const theme = useTheme();
+
+	const themeColor = statusToTheme[status];
+
+	return (
+		<BaseLabel
+			label={text}
+			styles={{
+				color: theme.palette[themeColor].main,
+				borderColor: theme.palette[themeColor].lowContrast,
+				...customStyles,
+			}}
+		>
+			<Box
+				bgcolor={theme.palette[themeColor].lowContrast}
+				borderRadius="0%"
+				marginRight="1px"
+			/>
+		</BaseLabel>
+	);
+};
+
+StatusLabel.propTypes = {
+	status: PropTypes.oneOf([
+		"up",
+		"down",
+		"paused",
+		"pending",
+		"cannot resolve",
+		"published",
+		"unpublished",
+	]),
+	text: PropTypes.string,
+	customStyles: PropTypes.object,
+};
+
+export { BaseLabel, ColoredLabel, StatusLabel };
@@ -0,0 +1,31 @@
+import Box from "@mui/material/Box";
+import PropTypes from "prop-types";
+import { useTheme } from "@emotion/react";
+import BackgroundSVG from "../../../../assets/Images/background.svg";
+import { useSelector } from "react-redux";
+
+const AppLayout = ({ children }) => {
+	const theme = useTheme();
+	const ui = useSelector((state) => state.ui);
+	return (
+		<Box
+			sx={{
+				minHeight: "100vh",
+				backgroundColor: theme.palette.primaryBackground.main,
+				backgroundImage: ui?.mode === "dark" ? `url("${BackgroundSVG}")` : "none",
+				backgroundSize: "100% 100%",
+				backgroundPosition: "center",
+				backgroundRepeat: "no-repeat",
+				color: theme.palette.primary.contrastText,
+			}}
+		>
+			{children}
+		</Box>
+	);
+};
+
+AppLayout.propTypes = {
+	children: PropTypes.node,
+};
+
+export default AppLayout;
@@ -0,0 +1,33 @@
+.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;
+}
@@ -0,0 +1,22 @@
+import Sidebar from "../../Sidebar/index.jsx";
+import { Outlet } from "react-router";
+import { Stack } from "@mui/material";
+
+import "./index.css";
+
+const HomeLayout = () => {
+	return (
+		<Stack
+			className="home-layout"
+			flexDirection="row"
+			gap={14}
+		>
+			<Sidebar />
+			<Stack className="home-content-wrapper">
+				<Outlet />
+			</Stack>
+		</Stack>
+	);
+};
+
+export default HomeLayout;
@@ -0,0 +1,116 @@
+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 ClickAwayListener from "@mui/material/ClickAwayListener";
+import Grow from "@mui/material/Grow";
+import Paper from "@mui/material/Paper";
+import Popper from "@mui/material/Popper";
+import MenuItem from "@mui/material/MenuItem";
+import MenuList from "@mui/material/MenuList";
+import { useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { createToast } from "../../../Utils/toastUtils.jsx";
+import { useExportMonitors } from "../../../Hooks/monitorHooks.js";
+
+const MonitorActions = ({ isLoading }) => {
+	const [open, setOpen] = React.useState(false);
+	const anchorRef = React.useRef(null);
+	const [selectedIndex, setSelectedIndex] = React.useState(0);
+	const navigate = useNavigate();
+	const { t } = useTranslation();
+	const [exportMonitors, isExporting] = useExportMonitors();
+
+	const options = [t("monitorActions.import"), t("monitorActions.export")];
+
+	const handleClick = async () => {
+		if (selectedIndex === 0) {
+			// Import
+			navigate("/uptime/bulk-import");
+		} else {
+			// Export
+			const [success, error] = await exportMonitors();
+			if (!success) {
+				createToast({ body: error || t("export.failed") });
+			}
+		}
+	};
+
+	const handleMenuItemClick = (event, index) => {
+		setSelectedIndex(index);
+		setOpen(false);
+	};
+
+	const handleToggle = () => {
+		setOpen((prevOpen) => !prevOpen);
+	};
+
+	const handleClose = (event) => {
+		if (anchorRef.current && anchorRef.current.contains(event.target)) {
+			return;
+		}
+		setOpen(false);
+	};
+
+	return (
+		<React.Fragment>
+			<ButtonGroup
+				variant="contained"
+				color="accent"
+				ref={anchorRef}
+				aria-label="Monitor actions"
+				disabled={isLoading || isExporting}
+			>
+				<Button onClick={handleClick}>{options[selectedIndex]}</Button>
+				<Button
+					size="small"
+					aria-controls={open ? "split-button-menu" : undefined}
+					aria-expanded={open ? "true" : undefined}
+					aria-label="select monitor action"
+					aria-haspopup="menu"
+					onClick={handleToggle}
+				>
+					<ArrowDropDownIcon />
+				</Button>
+			</ButtonGroup>
+			<Popper
+				sx={{ zIndex: 1 }}
+				open={open}
+				anchorEl={anchorRef.current}
+				role={undefined}
+				transition
+				disablePortal
+			>
+				{({ TransitionProps, placement }) => (
+					<Grow
+						{...TransitionProps}
+						style={{
+							transformOrigin: placement === "bottom" ? "center top" : "center bottom",
+						}}
+					>
+						<Paper>
+							<ClickAwayListener onClickAway={handleClose}>
+								<MenuList
+									id="split-button-menu"
+									autoFocusItem
+								>
+									{options.map((option, index) => (
+										<MenuItem
+											key={option}
+											selected={index === selectedIndex}
+											onClick={(event) => handleMenuItemClick(event, index)}
+										>
+											{option}
+										</MenuItem>
+									))}
+								</MenuList>
+							</ClickAwayListener>
+						</Paper>
+					</Grow>
+				)}
+			</Popper>
+		</React.Fragment>
+	);
+};
+
+export default MonitorActions;
@@ -0,0 +1,52 @@
+import { Stack, Typography } from "@mui/material";
+import PropTypes from "prop-types";
+import { useTheme } from "@emotion/react";
+import SkeletonLayout from "./skeleton.jsx";
+
+const MonitorCountHeader = ({
+	isLoading = false,
+	monitorCount,
+	heading = "monitors",
+	sx,
+	children,
+}) => {
+	const theme = useTheme();
+	if (isLoading) return <SkeletonLayout />;
+
+	if (monitorCount === 1) {
+		heading = "monitor";
+	}
+
+	return (
+		<Stack
+			direction="row"
+			alignItems="center"
+			display="flex"
+			width="fit-content"
+			height={theme.spacing(18)}
+			gap={theme.spacing(2)}
+			mt={theme.spacing(2)}
+			px={theme.spacing(4)}
+			pt={theme.spacing(2)}
+			pb={theme.spacing(3)}
+			borderRadius={theme.spacing(1)}
+			sx={{
+				...sx,
+				backgroundColor: theme.palette.secondary.main,
+			}}
+		>
+			{monitorCount} <Typography component="h2">{heading}</Typography>
+			{children}
+		</Stack>
+	);
+};
+
+MonitorCountHeader.propTypes = {
+	isLoading: PropTypes.bool,
+	monitorCount: PropTypes.number,
+	heading: PropTypes.string,
+	children: PropTypes.node,
+	sx: PropTypes.object,
+};
+
+export default MonitorCountHeader;
@@ -0,0 +1,26 @@
+import { Stack, Skeleton } from "@mui/material";
+import { useTheme } from "@emotion/react";
+
+const SkeletonLayout = () => {
+	const theme = useTheme();
+	return (
+		<Stack
+			direction="row"
+			alignItems="center"
+			gap={theme.spacing(2)}
+		>
+			<Skeleton
+				variant="text"
+				width={100}
+				height={32}
+			/>
+			<Skeleton
+				variant="circular"
+				width={40}
+				height={40}
+			/>
+		</Stack>
+	);
+};
+
+export default SkeletonLayout;
@@ -0,0 +1,45 @@
+import { Stack, Button } from "@mui/material";
+import { useNavigate } from "react-router-dom";
+import PropTypes from "prop-types";
+import { useTranslation } from "react-i18next";
+import { useTheme } from "@emotion/react";
+import MonitorActions from "../MonitorActions/index.jsx";
+
+const CreateMonitorHeader = ({ isAdmin, label, isLoading = true, path, bulkPath }) => {
+	const navigate = useNavigate();
+	const { t } = useTranslation();
+	const theme = useTheme();
+
+	// Use the provided label or fall back to the translated default
+
+	if (!isAdmin) return null;
+
+	return (
+		<Stack
+			direction="row"
+			justifyContent="end"
+			alignItems="center"
+			gap={theme.spacing(6)}
+		>
+			<Button
+				loading={isLoading}
+				variant="contained"
+				color="accent"
+				onClick={() => navigate(path)}
+			>
+				{label || t("createNew")}
+			</Button>
+			{/* {bulkPath && <MonitorActions isLoading={isLoading} />} */}
+		</Stack>
+	);
+};
+
+export default CreateMonitorHeader;
+
+CreateMonitorHeader.propTypes = {
+	isAdmin: PropTypes.bool.isRequired,
+	isLoading: PropTypes.bool,
+	path: PropTypes.string.isRequired,
+	label: PropTypes.string,
+	bulkPath: PropTypes.string,
+};
@@ -0,0 +1,19 @@
+import { Stack, Skeleton } from "@mui/material";
+
+const SkeletonLayout = () => {
+	return (
+		<Stack
+			direction="row"
+			justifyContent="end"
+			alignItems="center"
+		>
+			<Skeleton
+				variant="rectangular"
+				width={100}
+				height={36}
+			/>
+		</Stack>
+	);
+};
+
+export default SkeletonLayout;
@@ -0,0 +1,141 @@
+import Stack from "@mui/material/Stack";
+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";
+
+// Utils
+import PropTypes from "prop-types";
+import { useNavigate } from "react-router-dom";
+import { useTheme } from "@mui/material/styles";
+import { usePauseMonitor } from "../../../Hooks/monitorHooks.js";
+import { useSendTestEmail } from "../../../Hooks/useSendTestEmail.js";
+import { useTranslation } from "react-i18next";
+import { useTestAllNotifications } from "../../../Hooks/useNotifications.js";
+/**
+ * MonitorDetailsControlHeader component displays the control header for monitor details.
+ * It includes status display, pause/resume button, and a configure button for admins.
+ *
+ * @component
+ * @param {Object} props - Component props
+ * @param {string} props.path - The base path for navigation
+ * @param {boolean} [props.isLoading=false] - Flag indicating if the data is loading
+ * @param {boolean} [props.isAdmin=false] - Flag indicating if the user is an admin
+ * @param {Object} props.monitor - The monitor object containing details
+ * @param {Function} props.triggerUpdate - Function to trigger an update
+ * @returns {JSX.Element} The rendered component
+ */
+const MonitorDetailsControlHeader = ({
+	path,
+	isLoading = false,
+	isAdmin = false,
+	monitor,
+	triggerUpdate,
+}) => {
+	const navigate = useNavigate();
+	const theme = useTheme();
+	const { t } = useTranslation();
+	const [pauseMonitor, isPausing, error] = usePauseMonitor();
+
+	const isTestNotificationsDisabled = monitor?.notifications?.length === 0;
+
+	const tooltipTitle = isTestNotificationsDisabled ? t("testNotificationsDisabled") : "";
+
+	// const [isSending, emailError, sendTestEmail] = useSendTestEmail();
+
+	const [testAllNotifications, isSending, errorAllNotifications] =
+		useTestAllNotifications();
+
+	if (isLoading) {
+		return <Skeleton />;
+	}
+
+	return (
+		<Stack
+			direction="row"
+			justifyContent="space-between"
+		>
+			<Status monitor={monitor} />
+
+			<Stack
+				direction="row"
+				gap={theme.spacing(2)}
+			>
+				<Tooltip
+					key={monitor?.id}
+					placement="bottom"
+					title={tooltipTitle}
+				>
+					<span>
+						<Button
+							variant="contained"
+							color="secondary"
+							loading={isSending}
+							startIcon={<EmailIcon />}
+							disabled={isTestNotificationsDisabled}
+							onClick={() => {
+								testAllNotifications({ monitorId: monitor?.id });
+							}}
+							sx={{
+								whiteSpace: "nowrap",
+							}}
+						>
+							{t("sendTestNotifications")}
+						</Button>
+					</span>
+				</Tooltip>
+				<Button
+					variant="contained"
+					color="secondary"
+					onClick={(e) => {
+						navigate(`/incidents/${monitor?.id}`);
+					}}
+				>
+					{t("menu.incidents")}
+				</Button>
+				{isAdmin && (
+					<Button
+						variant="contained"
+						color="secondary"
+						loading={isPausing}
+						startIcon={
+							monitor?.isActive ? <PauseOutlinedIcon /> : <PlayArrowOutlinedIcon />
+						}
+						onClick={() => {
+							pauseMonitor({
+								monitorId: monitor?.id,
+								triggerUpdate,
+							});
+						}}
+					>
+						{monitor?.isActive ? "Pause" : "Resume"}
+					</Button>
+				)}
+				{isAdmin && (
+					<Button
+						variant="contained"
+						color="secondary"
+						startIcon={<SettingsOutlinedIcon />}
+						onClick={() => navigate(`/${path}/configure/${monitor.id}`)}
+					>
+						Configure
+					</Button>
+				)}
+			</Stack>
+		</Stack>
+	);
+};
+
+MonitorDetailsControlHeader.propTypes = {
+	path: PropTypes.string,
+	isLoading: PropTypes.bool,
+	isAdmin: PropTypes.bool,
+	monitor: PropTypes.object,
+	triggerUpdate: PropTypes.func,
+};
+
+export default MonitorDetailsControlHeader;
@@ -0,0 +1,23 @@
+import { Stack, Skeleton } from "@mui/material";
+
+const SkeletonLayout = () => {
+	return (
+		<Stack
+			direction="row"
+			justifyContent="space-between"
+		>
+			<Skeleton
+				height={40}
+				variant="rounded"
+				width="15%"
+			/>
+			<Skeleton
+				height={40}
+				variant="rounded"
+				width="15%"
+			/>
+		</Stack>
+	);
+};
+
+export default SkeletonLayout;
@@ -0,0 +1,51 @@
+// Components
+import Stack from "@mui/material/Stack";
+import PulseDot from "../Animated/PulseDot.jsx";
+import Typography from "@mui/material/Typography";
+import Dot from "../Dot/index.jsx";
+// Utils
+import { formatDurationRounded } from "../../../Utils/timeUtils.js";
+import PropTypes from "prop-types";
+import { useTheme } from "@emotion/react";
+import { useMonitorUtils } from "../../../Hooks/useMonitorUtils.js";
+import { formatMonitorUrl } from "../../../Utils/utils.js";
+/**
+ * Status component displays the status information of a monitor.
+ * It includes the monitor's name, URL, and check interval.
+ *
+ * @component
+ * @param {Object} props - Component props
+ * @param {Object} props.monitor - The monitor object containing details
+ * @param {string} props.monitor.name - The name of the monitor
+ * @param {string} props.monitor.url - The URL of the monitor
+ * @param {number} props.monitor.interval - The interval at which the monitor checks
+ * @returns {JSX.Element} The rendered component
+ */
+const Status = ({ monitor }) => {
+	const theme = useTheme();
+	const { statusColor, determineState } = useMonitorUtils();
+
+	return (
+		<Stack>
+			<Typography variant="monitorName">{monitor?.name}</Typography>
+			<Stack
+				direction="row"
+				alignItems={"center"}
+				gap={theme.spacing(4)}
+			>
+				<PulseDot color={statusColor[determineState(monitor)]} />
+				<Typography variant="monitorUrl">{formatMonitorUrl(monitor?.url)}</Typography>
+				<Dot />
+				<Typography>
+					Checking every {formatDurationRounded(monitor?.interval)}.
+				</Typography>
+			</Stack>
+		</Stack>
+	);
+};
+
+Status.propTypes = {
+	monitor: PropTypes.object,
+};
+
+export default Status;
@@ -0,0 +1,85 @@
+import { Stack, Typography, Button, ButtonGroup } from "@mui/material";
+import { useTheme } from "@emotion/react";
+import SkeletonLayout from "./skeleton.jsx";
+import PropTypes from "prop-types";
+
+const MonitorTimeFrameHeader = ({
+	isLoading = false,
+	hasDateRange = true,
+	dateRange,
+	setDateRange,
+}) => {
+	const theme = useTheme();
+
+	if (isLoading) {
+		return <SkeletonLayout />;
+	}
+
+	let timeFramePicker = null;
+
+	if (hasDateRange) {
+		timeFramePicker = (
+			<ButtonGroup sx={{ height: 32 }}>
+				<Button
+					variant="group"
+					filled={(dateRange === "recent").toString()}
+					onClick={() => setDateRange("recent")}
+				>
+					Recent
+				</Button>
+				<Button
+					variant="group"
+					filled={(dateRange === "day").toString()}
+					onClick={() => setDateRange("day")}
+				>
+					Day
+				</Button>
+				<Button
+					variant="group"
+					filled={(dateRange === "week").toString()}
+					onClick={() => setDateRange("week")}
+				>
+					Week
+				</Button>
+				<Button
+					variant="group"
+					filled={(dateRange === "month").toString()}
+					onClick={() => setDateRange("month")}
+				>
+					Month
+				</Button>
+			</ButtonGroup>
+		);
+	}
+
+	return (
+		<Stack
+			direction="row"
+			justifyContent="flex-end"
+			alignItems="center"
+			gap={theme.spacing(4)}
+		>
+			<Typography variant="body2">
+				Showing statistics for past{" "}
+				{dateRange === "recent"
+					? "2 hours"
+					: dateRange === "day"
+						? "24 hours"
+						: dateRange === "week"
+							? "7 days"
+							: "30 days"}
+				.
+			</Typography>
+			{timeFramePicker}
+		</Stack>
+	);
+};
+
+MonitorTimeFrameHeader.propTypes = {
+	isLoading: PropTypes.bool,
+	hasDateRange: PropTypes.bool,
+	dateRange: PropTypes.string,
+	setDateRange: PropTypes.func,
+};
+
+export default MonitorTimeFrameHeader;
@@ -0,0 +1,23 @@
+import { Stack, Skeleton } from "@mui/material";
+
+const SkeletonLayout = () => {
+	return (
+		<Stack
+			direction="row"
+			justifyContent="space-between"
+		>
+			<Skeleton
+				variant="rounded"
+				width="20%"
+				height={34}
+			/>
+			<Skeleton
+				variant="rounded"
+				width="20%"
+				height={34}
+			/>
+		</Stack>
+	);
+};
+
+export default SkeletonLayout;
@@ -0,0 +1,125 @@
+// Components
+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 Search from "../Inputs/Search/index.jsx";
+
+// Utils
+import { useState, useEffect } from "react";
+import { useTheme } from "@mui/material/styles";
+import PropTypes from "prop-types";
+
+const NotificationConfig = ({
+	notifications,
+	setMonitor,
+	setNotifications,
+	//FieldWrapper's props
+	gap,
+	labelMb,
+	labelFontWeight,
+	labelVariant,
+	labelSx = {},
+	sx = {},
+}) => {
+	// Local state
+	const [notificationsSearch, setNotificationsSearch] = useState("");
+	const [selectedNotifications, setSelectedNotifications] = useState([]);
+
+	const handleSearch = (value) => {
+		setSelectedNotifications(value);
+		setMonitor((prev) => {
+			return {
+				...prev,
+				notifications: value.map((notification) => notification._id),
+			};
+		});
+	};
+
+	// Handlers
+	const handleDelete = (id) => {
+		const updatedNotifications = selectedNotifications.filter(
+			(notification) => notification._id !== id
+		);
+
+		setSelectedNotifications(updatedNotifications);
+		setMonitor((prev) => {
+			return {
+				...prev,
+				notifications: updatedNotifications.map((notification) => notification._id),
+			};
+		});
+	};
+
+	// Setup
+	const theme = useTheme();
+
+	useEffect(() => {
+		if (setNotifications) {
+			const toSet = setNotifications.map((notification) => {
+				return notifications.find((n) => n._id === notification);
+			});
+			setSelectedNotifications(toSet);
+		}
+	}, [setNotifications, notifications]);
+
+	return (
+		<Stack gap={theme.spacing(6)}>
+			<Search
+				type="notifications"
+				label="Notifications"
+				options={notifications}
+				filteredBy="notificationName"
+				multiple={true}
+				value={selectedNotifications}
+				inputValue={notificationsSearch}
+				handleInputChange={setNotificationsSearch}
+				handleChange={(value) => {
+					handleSearch(value);
+				}}
+				labelMb={labelMb}
+				labelVariant={labelVariant}
+				labelFontWeight={labelFontWeight}
+				labelSx={labelSx}
+				gap={gap}
+				sx={{
+					...sx,
+				}}
+			/>
+			<Stack
+				flex={1}
+				width="100%"
+			>
+				{selectedNotifications.map((notification, index) => (
+					<Stack
+						direction="row"
+						alignItems="center"
+						key={notification._id}
+						width="100%"
+					>
+						<Typography
+							flexGrow={1} // <-- This will take up all available horizontal space
+						>
+							{notification.notificationName}
+						</Typography>
+						<DeleteOutlineRoundedIcon
+							onClick={() => {
+								handleDelete(notification._id);
+							}}
+							sx={{ cursor: "pointer" }}
+						/>
+						{index < selectedNotifications.length - 1 && <Divider />}
+					</Stack>
+				))}
+			</Stack>
+		</Stack>
+	);
+};
+
+NotificationConfig.propTypes = {
+	notifications: PropTypes.array,
+	setMonitor: PropTypes.func,
+	setNotifications: PropTypes.array,
+};
+
+export default NotificationConfig;
@@ -0,0 +1,419 @@
+import { useState, useMemo, useEffect, useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import PropTypes from "prop-types";
+
+import {
+	Dialog,
+	DialogContent,
+	DialogActions,
+	Button,
+	Typography,
+	Box,
+	Tabs,
+	Tab,
+	Stack,
+} from "@mui/material";
+import { useTheme } from "@emotion/react";
+import TabPanel from "./TabPanel.jsx";
+import TabComponent from "./TabComponent.jsx";
+import useNotifications from "../Hooks/useNotification.js";
+
+// Define constants for notification types to avoid magic values
+const NOTIFICATION_TYPES = {
+	SLACK: "slack",
+	DISCORD: "discord",
+	TELEGRAM: "telegram",
+	WEBHOOK: "webhook",
+};
+
+// Define constants for field IDs
+const FIELD_IDS = {
+	WEBHOOK: "webhook",
+	TOKEN: "token",
+	CHAT_ID: "chatId",
+	URL: "url",
+};
+
+const NotificationIntegrationModal = ({
+	open,
+	onClose,
+	monitor,
+	setMonitor,
+	// Optional prop to configure available notification types
+	notificationTypes = null,
+}) => {
+	const { t } = useTranslation();
+	const theme = useTheme();
+	const [tabValue, setTabValue] = useState(0);
+
+	const [loading, _, sendTestNotification] = useNotifications();
+
+	// Helper to get the field state key with error handling
+	const getFieldKey = useCallback(
+		(typeId, fieldId) => {
+			if (typeof typeId !== "string" || typeId === "") {
+				throw new Error(t("errorInvalidTypeId"));
+			}
+
+			if (typeof fieldId !== "string" || fieldId === "") {
+				throw new Error(t("errorInvalidFieldId"));
+			}
+
+			return `${typeId}${fieldId.charAt(0).toUpperCase() + fieldId.slice(1)}`;
+		},
+		[t]
+	);
+
+	// Define notification types
+	const DEFAULT_NOTIFICATION_TYPES = [
+		{
+			id: NOTIFICATION_TYPES.SLACK,
+			label: t("notifications.slack.label"),
+			description: t("notifications.slack.description"),
+			fields: [
+				{
+					id: FIELD_IDS.WEBHOOK,
+					label: t("notifications.slack.webhookLabel"),
+					placeholder: t("notifications.slack.webhookPlaceholder"),
+					type: "text",
+				},
+			],
+		},
+		{
+			id: NOTIFICATION_TYPES.DISCORD,
+			label: t("notifications.discord.label"),
+			description: t("notifications.discord.description"),
+			fields: [
+				{
+					id: FIELD_IDS.WEBHOOK,
+					label: t("notifications.discord.webhookLabel"),
+					placeholder: t("notifications.discord.webhookPlaceholder"),
+					type: "text",
+				},
+			],
+		},
+		{
+			id: NOTIFICATION_TYPES.TELEGRAM,
+			label: t("notifications.telegram.label"),
+			description: t("notifications.telegram.description"),
+			fields: [
+				{
+					id: FIELD_IDS.TOKEN,
+					label: t("notifications.telegram.tokenLabel"),
+					placeholder: t("notifications.telegram.tokenPlaceholder"),
+					type: "text",
+				},
+				{
+					id: FIELD_IDS.CHAT_ID,
+					label: t("notifications.telegram.chatIdLabel"),
+					placeholder: t("notifications.telegram.chatIdPlaceholder"),
+					type: "text",
+				},
+			],
+		},
+		{
+			id: NOTIFICATION_TYPES.WEBHOOK,
+			label: t("notifications.webhook.label"),
+			description: t("notifications.webhook.description"),
+			fields: [
+				{
+					id: FIELD_IDS.URL,
+					label: t("notifications.webhook.urlLabel"),
+					placeholder: t("notifications.webhook.urlPlaceholder"),
+					type: "text",
+				},
+			],
+		},
+	];
+
+	// Use provided notification types or default to our translated ones
+	const activeNotificationTypes = notificationTypes || DEFAULT_NOTIFICATION_TYPES;
+
+	// Memoized function to initialize integrations state
+	const initialIntegrationsState = useMemo(() => {
+		const state = {};
+
+		activeNotificationTypes.forEach((type) => {
+			// Add enabled flag for each notification type
+			state[type.id] = false;
+
+			// Add state for each field in the notification type
+			type.fields.forEach((field) => {
+				const fieldKey = getFieldKey(type.id, field.id);
+				state[fieldKey] = "";
+			});
+		});
+
+		return state;
+	}, [activeNotificationTypes, getFieldKey]); // Only recompute when these dependencies change
+
+	const [integrations, setIntegrations] = useState(initialIntegrationsState);
+
+	useEffect(() => {
+		if (open) {
+			const extractNotificationValues = () => {
+				const values = {};
+
+				if (!monitor?.notifications || !Array.isArray(monitor.notifications)) {
+					return values;
+				}
+
+				monitor.notifications.forEach((notification) => {
+					// Handle notification based on its structure
+					if (notification.type === "webhook" && notification.platform) {
+						if (typeof notification.config === "undefined") return;
+						const platform = notification.platform;
+						values[platform] = true; // Set platform as enabled
+
+						// Extract configuration based on platform
+						switch (platform) {
+							case NOTIFICATION_TYPES.SLACK:
+							case NOTIFICATION_TYPES.DISCORD:
+								if (notification.config.webhookUrl) {
+									values[getFieldKey(platform, FIELD_IDS.WEBHOOK)] =
+										notification.config.webhookUrl;
+								}
+								break;
+							case NOTIFICATION_TYPES.TELEGRAM:
+								if (notification.config.botToken) {
+									values[getFieldKey(platform, FIELD_IDS.TOKEN)] =
+										notification.config.botToken;
+								}
+								if (notification.config.chatId) {
+									values[getFieldKey(platform, FIELD_IDS.CHAT_ID)] =
+										notification.config.chatId;
+								}
+								break;
+							case NOTIFICATION_TYPES.WEBHOOK:
+								if (notification.config.webhookUrl) {
+									values[getFieldKey(platform, FIELD_IDS.URL)] =
+										notification.config.webhookUrl;
+								}
+								break;
+						}
+					}
+				});
+
+				return values;
+			};
+
+			const extractedValues = extractNotificationValues();
+			setIntegrations((prev) => ({
+				...prev,
+				...extractedValues,
+			}));
+		}
+	}, [open, monitor, getFieldKey]);
+
+	const handleChangeTab = (event, newValue) => {
+		setTabValue(newValue);
+	};
+
+	const handleIntegrationChange = (type, checked) => {
+		setIntegrations((prev) => ({
+			...prev,
+			[type]: checked,
+		}));
+	};
+
+	const handleInputChange = (type, value) => {
+		setIntegrations((prev) => ({
+			...prev,
+			[type]: value,
+		}));
+	};
+
+	const handleTestNotification = async (type) => {
+		// Get the notification type details
+		const notificationType = activeNotificationTypes.find((t) => t.id === type);
+
+		if (typeof notificationType === "undefined") {
+			return;
+		}
+
+		// Prepare config object based on notification type
+		const config = {};
+
+		// Add each field value to the config object
+		notificationType.fields.forEach((field) => {
+			const fieldKey = getFieldKey(type, field.id);
+			config[field.id] = integrations[fieldKey];
+		});
+
+		await sendTestNotification(type, config);
+	};
+
+	// In NotificationIntegrationModal.jsx, update the handleSave function:
+
+	const handleSave = () => {
+		// Get existing notifications
+		const notifications = [...(monitor?.notifications || [])];
+
+		// Get all notification types IDs
+		const existingTypes = activeNotificationTypes.map((type) => type.id);
+
+		// Filter out notifications that are configurable in this modal
+		const filteredNotifications = notifications.filter((notification) => {
+			if (notification.platform) {
+				return !existingTypes.includes(notification.platform);
+			}
+
+			return !existingTypes.includes(notification.type);
+		});
+
+		// Add each enabled notification with its configured fields
+		activeNotificationTypes.forEach((type) => {
+			if (integrations[type.id]) {
+				let notificationObject = {
+					type: "webhook",
+					platform: type.id, // Set platform to identify the specific service
+					config: {},
+				};
+
+				// Configure based on notification type
+				switch (type.id) {
+					case "slack":
+					case "discord":
+						notificationObject.config.webhookUrl =
+							integrations[getFieldKey(type.id, "webhook")];
+						break;
+					case "telegram":
+						notificationObject.config.botToken =
+							integrations[getFieldKey(type.id, "token")];
+						notificationObject.config.chatId =
+							integrations[getFieldKey(type.id, "chatId")];
+						break;
+					case "webhook":
+						notificationObject.config.webhookUrl =
+							integrations[getFieldKey(type.id, "url")];
+						break;
+				}
+
+				filteredNotifications.push(notificationObject);
+			}
+		});
+
+		// Update monitor with new notifications
+		setMonitor((prev) => ({
+			...prev,
+			notifications: filteredNotifications,
+		}));
+
+		onClose();
+	};
+
+	return (
+		<Dialog
+			open={open}
+			onClose={onClose}
+			fullWidth
+			maxWidth="md"
+			sx={{
+				"& .MuiDialog-paper": {
+					width: `calc(80% - ${theme.spacing(40)})`,
+					maxWidth: `${theme.breakpoints.values.md - 70}px`,
+				},
+			}}
+		>
+			<DialogContent>
+				<Stack
+					direction="row"
+					sx={{
+						height: `calc(30vh - ${theme.spacing(20)})`,
+					}}
+				>
+					{/* Left sidebar with tabs */}
+					<Box
+						sx={{
+							borderRight: 1,
+							borderColor: theme.palette.primary.lowContrast,
+							width: "30%",
+							maxWidth: theme.spacing(120),
+							pr: theme.spacing(10),
+						}}
+					>
+						<Typography variant="h2">
+							{t("notifications.addOrEditNotifications")}
+						</Typography>
+
+						<Tabs
+							orientation="vertical"
+							variant="scrollable"
+							value={tabValue}
+							onChange={handleChangeTab}
+							aria-label="Notification tabs"
+						>
+							{activeNotificationTypes.map((type) => (
+								<Tab
+									key={type.id}
+									label={type.label}
+									orientation="vertical"
+									disableRipple
+								/>
+							))}
+						</Tabs>
+					</Box>
+
+					{/* Right side content */}
+					<Box
+						sx={{
+							flex: 1,
+							pl: theme.spacing(7.5),
+							overflowY: "auto",
+						}}
+					>
+						{activeNotificationTypes.map((type, index) => (
+							<TabPanel
+								key={type.id}
+								value={tabValue}
+								index={index}
+							>
+								<TabComponent
+									type={type}
+									integrations={integrations}
+									handleIntegrationChange={handleIntegrationChange}
+									handleInputChange={handleInputChange}
+									handleTestNotification={handleTestNotification}
+									isLoading={loading}
+								/>
+							</TabPanel>
+						))}
+					</Box>
+				</Stack>
+			</DialogContent>
+			<DialogActions
+				sx={{
+					p: theme.spacing(4),
+					display: "flex",
+					justifyContent: "flex-end",
+					mb: theme.spacing(5),
+					mr: theme.spacing(5),
+				}}
+			>
+				<Button
+					variant="contained"
+					color="accent"
+					onClick={handleSave}
+					loading={loading}
+					sx={{
+						width: "auto",
+						minWidth: theme.spacing(60),
+						px: theme.spacing(8),
+					}}
+				>
+					{t("commonSave")}
+				</Button>
+			</DialogActions>
+		</Dialog>
+	);
+};
+
+NotificationIntegrationModal.propTypes = {
+	open: PropTypes.bool.isRequired,
+	onClose: PropTypes.func.isRequired,
+	monitor: PropTypes.object.isRequired,
+	setMonitor: PropTypes.func.isRequired,
+	notificationTypes: PropTypes.array,
+};
+
+export default NotificationIntegrationModal;
@@ -0,0 +1,115 @@
+import React from "react";
+import { Typography, Box, Button, CircularProgress } from "@mui/material";
+import { useTranslation } from "react-i18next";
+import { useTheme } from "@emotion/react";
+import TextInput from "../../Inputs/TextInput/index.jsx";
+import Checkbox from "../../Inputs/Checkbox/index.jsx";
+
+const TabComponent = ({
+	type,
+	integrations,
+	handleIntegrationChange,
+	handleInputChange,
+	handleTestNotification,
+	isLoading,
+}) => {
+	const theme = useTheme();
+	const { t } = useTranslation();
+
+	// Helper to get the field state key (e.g., slackWebhook, telegramToken)
+	const getFieldKey = (typeId, fieldId) => {
+		return `${typeId}${fieldId.charAt(0).toUpperCase() + fieldId.slice(1)}`;
+	};
+
+	// Check if all fields have values to enable test button
+	const areAllFieldsFilled = () => {
+		return type.fields.every((field) => {
+			const fieldKey = getFieldKey(type.id, field.id);
+			return integrations[fieldKey];
+		});
+	};
+
+	return (
+		<>
+			<Typography
+				variant="subtitle1"
+				component="h4"
+				sx={{
+					fontWeight: "bold",
+					color: theme.palette.primary.contrastTextSecondary,
+				}}
+			>
+				{type.label}
+			</Typography>
+
+			<Typography
+				sx={{
+					mt: theme.spacing(0.5),
+					mb: theme.spacing(1.5),
+					color: theme.palette.primary.contrastTextTertiary,
+				}}
+			>
+				{type.description}
+			</Typography>
+
+			<Box sx={{ pl: theme.spacing(1.5) }}>
+				<Checkbox
+					id={`enable-${type.id}`}
+					label={t("notifications.enableNotifications", { platform: type.label })}
+					isChecked={integrations[type.id]}
+					onChange={(e) => handleIntegrationChange(type.id, e.target.checked)}
+					disabled={isLoading}
+				/>
+			</Box>
+
+			{type.fields.map((field) => {
+				const fieldKey = getFieldKey(type.id, field.id);
+
+				return (
+					<Box
+						key={field.id}
+						sx={{ mt: theme.spacing(1) }}
+					>
+						<Typography
+							sx={{
+								mb: theme.spacing(2),
+								fontWeight: "bold",
+								color: theme.palette.primary.contrastTextSecondary,
+							}}
+						>
+							{field.label}
+						</Typography>
+
+						<TextInput
+							id={`${type.id}-${field.id}`}
+							type={field.type}
+							placeholder={field.placeholder}
+							value={integrations[fieldKey]}
+							onChange={(e) => handleInputChange(fieldKey, e.target.value)}
+							disabled={!integrations[type.id] || isLoading}
+						/>
+					</Box>
+				);
+			})}
+
+			<Box sx={{ mt: theme.spacing(1) }}>
+				<Button
+					variant="text"
+					color="info"
+					onClick={() => handleTestNotification(type.id)}
+					disabled={!integrations[type.id] || !areAllFieldsFilled() || isLoading}
+				>
+					{isLoading ? (
+						<CircularProgress
+							size={theme.spacing(8)}
+							sx={{ mr: theme.spacing(1), color: theme.palette.accent.main }}
+						/>
+					) : null}
+					{t("notifications.testNotification")}
+				</Button>
+			</Box>
+		</>
+	);
+};
+
+export default TabComponent;
@@ -0,0 +1,41 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Box } from "@mui/material";
+import { useTheme } from "@emotion/react";
+
+/**
+ * TabPanel component that displays content for the selected tab.
+ *
+ * @component
+ * @param {Object} props - The component props.
+ * @param {React.ReactNode} props.children - The content to be displayed when this tab panel is selected.
+ * @param {number} props.value - The currently selected tab value.
+ * @param {number} props.index - The index of this specific tab panel.
+ * @param {Object} props.other - Any additional props to be spread to the root element.
+ * @returns {React.ReactElement|null} The rendered tab panel or null if not selected.
+ */
+function TabPanel({ children, value, index, ...other }) {
+	const theme = useTheme();
+
+	return (
+		<div
+			role="tabpanel"
+			hidden={value !== index}
+			id={`notification-tabpanel-${index}`}
+			aria-labelledby={`notification-tab-${index}`}
+			{...other}
+		>
+			{value === index && <Box sx={{ pt: theme.spacing(3) }}>{children}</Box>}
+		</div>
+	);
+}
+
+TabPanel.propTypes = {
+	children: PropTypes.node,
+
+	index: PropTypes.number.isRequired,
+
+	value: PropTypes.number.isRequired,
+};
+
+export default TabPanel;
@@ -0,0 +1,129 @@
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { networkService } from "../../../../Utils/NetworkService.js";
+import { createToast } from "../../../../Utils/toastUtils.jsx";
+
+// Define constants for notification types to avoid magic values
+const NOTIFICATION_TYPES = {
+	SLACK: "slack",
+	DISCORD: "discord",
+	TELEGRAM: "telegram",
+	WEBHOOK: "webhook",
+};
+
+// Define constants for field IDs
+const FIELD_IDS = {
+	WEBHOOK: "webhook",
+	TOKEN: "token",
+	CHAT_ID: "chatId",
+	URL: "url",
+};
+
+/**
+ * Custom hook for notification-related operations
+ */
+const useNotifications = () => {
+	const [loading, setLoading] = useState(false);
+	const [error, setError] = useState(undefined);
+	const { t } = useTranslation();
+
+	/**
+	 * Send a test notification
+	 * @param {string} type - The notification type (slack, discord, telegram, webhook)
+	 * @param {object} config - Configuration object with necessary params
+	 */
+	const sendTestNotification = async (type, config) => {
+		setLoading(true);
+		setError(undefined);
+
+		// Validation based on notification type
+		let payload = { platform: type };
+		let isValid = true;
+		let errorMessage = "";
+
+		switch (type) {
+			case NOTIFICATION_TYPES.SLACK:
+				payload.webhookUrl = config.webhook;
+				if (typeof payload.webhookUrl === "undefined" || payload.webhookUrl === "") {
+					isValid = false;
+					errorMessage = t("notifications.slack.webhookRequired");
+				}
+				break;
+
+			case NOTIFICATION_TYPES.DISCORD:
+				payload.webhookUrl = config.webhook;
+				if (typeof payload.webhookUrl === "undefined" || payload.webhookUrl === "") {
+					isValid = false;
+					errorMessage = t("notifications.discord.webhookRequired");
+				}
+				break;
+
+			case NOTIFICATION_TYPES.TELEGRAM:
+				payload.botToken = config.token;
+				payload.chatId = config.chatId;
+				if (
+					typeof payload.botToken === "undefined" ||
+					payload.botToken === "" ||
+					typeof payload.chatId === "undefined" ||
+					payload.chatId === ""
+				) {
+					isValid = false;
+					errorMessage = t("notifications.telegram.fieldsRequired");
+				}
+				break;
+
+			case NOTIFICATION_TYPES.WEBHOOK:
+				payload.webhookUrl = config.url;
+				payload.platform = NOTIFICATION_TYPES.SLACK;
+				if (typeof payload.webhookUrl === "undefined" || payload.webhookUrl === "") {
+					isValid = false;
+					errorMessage = t("notifications.webhook.urlRequired");
+				}
+				break;
+
+			default:
+				isValid = false;
+				errorMessage = t("notifications.unsupportedType");
+		}
+
+		// If validation fails, show error and return
+		if (isValid === false) {
+			createToast({
+				body: errorMessage,
+				variant: "error",
+			});
+			setLoading(false);
+			return;
+		}
+
+		try {
+			const response = await networkService.testNotification({
+				platform: type,
+				payload: payload,
+			});
+
+			if (response.data.success === true) {
+				createToast({
+					body: t("notifications.testSuccess"),
+					variant: "info",
+				});
+			} else {
+				throw new Error(response.data.msg || t("notifications.testFailed"));
+			}
+		} catch (error) {
+			const errorMsg =
+				error.response?.data?.msg || error.message || t("notifications.networkError");
+			createToast({
+				body: `${t("notifications.testFailed")}: ${errorMsg}`,
+				variant: "error",
+			});
+			setError(errorMsg);
+		} finally {
+			setLoading(false);
+		}
+	};
+
+	return [loading, error, sendTestNotification];
+};
+
+export default useNotifications;
@@ -0,0 +1,66 @@
+import GenericFallback from "../GenericFallback/index.jsx";
+import Fallback from "../Fallback/index.jsx";
+import { Typography } from "@mui/material";
+import { useTheme } from "@emotion/react";
+import { useTranslation } from "react-i18next";
+import { useIsAdmin } from "@/Hooks/useIsAdmin.js";
+import PropTypes from "prop-types";
+const PageStateWrapper = ({
+	networkError,
+	isLoading,
+	items,
+	type,
+	fallbackLink,
+	fallbackChildren,
+	children,
+}) => {
+	const theme = useTheme();
+	const { t } = useTranslation();
+	const isAdmin = useIsAdmin();
+	const isEmpty = items === null || (Array.isArray(items) && items.length === 0);
+	const hasInitialized = items !== undefined && !(isLoading && isEmpty);
+	const showEmpty = !isLoading && isEmpty;
+	if (networkError) {
+		return (
+			<GenericFallback>
+				<Typography
+					variant="h1"
+					marginY={theme.spacing(4)}
+					color={theme.palette.primary.contrastTextTertiary}
+				>
+					{t("common.toasts.networkError")}
+				</Typography>
+				<Typography>{t("common.toasts.checkConnection")}</Typography>
+			</GenericFallback>
+		);
+	}
+	if (!hasInitialized) {
+		return null;
+	}
+	if (showEmpty) {
+		return (
+			<Fallback
+				type={type}
+				title={t(`${type}.fallback.title`)}
+				checks={t(`${type}.fallback.checks`, { returnObjects: true })}
+				link={fallbackLink}
+				isAdmin={isAdmin}
+			>
+				{fallbackChildren}
+			</Fallback>
+		);
+	}
+	return <>{children}</>;
+};
+
+PageStateWrapper.propTypes = {
+	networkError: PropTypes.any,
+	isLoading: PropTypes.bool,
+	items: PropTypes.oneOfType([PropTypes.array, PropTypes.oneOf([null])]),
+	type: PropTypes.string,
+	fallbackLink: PropTypes.string,
+	fallbackChildren: PropTypes.node,
+	children: PropTypes.node,
+};
+
+export default PageStateWrapper;
@@ -0,0 +1,10 @@
+.progress-bar-container h2.MuiTypography-root,
+.progress-bar-container p.MuiTypography-root {
+	font-size: var(--env-var-font-size-medium);
+}
+.progress-bar-container p.MuiTypography-root:has(span) {
+	font-size: 12px;
+}
+.progress-bar-container p.MuiTypography-root span {
+	padding-left: 2px;
+}
@@ -0,0 +1,179 @@
+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 "./index.css";
+
+/**
+ * @param {Object} props - The component props.
+ * @param {JSX.Element} props.icon - The icon element to display (optional).
+ * @param {string} props.label - The label text for the progress item.
+ * @param {string} props.size - The size information for the progress item.
+ * @param {number} props.progress - The current progress value (0-100).
+ * @param {function} props.onClick - The function to handle click events on the remove button.
+ * @param {string} props.error - Error message to display if there's an error (optional).
+ * @returns {JSX.Element} The rendered component.
+ */
+
+const ProgressUpload = ({ icon, label, size, progress = 0, onClick, error }) => {
+	const theme = useTheme();
+
+	return (
+		<Box
+			className="progress-bar-container"
+			mt={theme.spacing(10)}
+			p={theme.spacing(8)}
+			sx={{
+				minWidth: "200px",
+				height: "fit-content",
+				borderRadius: theme.shape.borderRadius,
+				border: 1,
+				borderColor: theme.palette.primary.lowContrast,
+				backgroundColor: theme.palette.primary.lowContrast,
+				"&:has(.input-error)": {
+					borderColor: theme.palette.error.main,
+					backgroundColor: theme.palette.error.lowContrast,
+					py: theme.spacing(4),
+					px: theme.spacing(8),
+					"& > .MuiStack-root > svg": {
+						fill: theme.palette.error.contrastText,
+						width: "20px",
+						height: "20px",
+					},
+				},
+			}}
+		>
+			<Stack
+				direction="row"
+				mb={error ? 0 : theme.spacing(5)}
+				gap={theme.spacing(5)}
+				alignItems={error ? "center" : "flex-start"}
+			>
+				{error ? (
+					<ErrorOutlineOutlinedIcon />
+				) : icon ? (
+					<Box
+						sx={{
+							position: "relative",
+							height: 30,
+							minWidth: 30,
+							border: 1,
+							borderColor: theme.palette.primary.lowContrast,
+							borderRadius: 2,
+							backgroundColor: theme.palette.primary.main,
+							"& svg": {
+								position: "absolute",
+								top: "50%",
+								left: "50%",
+								transform: "translate(-50%, -50%)",
+								width: 23,
+								height: 23,
+								"& path": {
+									fill: theme.palette.primary.contrastTextTertiary,
+								},
+							},
+						}}
+					>
+						{icon}
+					</Box>
+				) : (
+					""
+				)}
+				{error ? (
+					<Typography
+						component="p"
+						className="input-error"
+						color={theme.palette.error.contrastText}
+					>
+						{error}
+					</Typography>
+				) : (
+					<Box color={theme.palette.primary.contrastTextTertiary}>
+						<Typography
+							component="h2"
+							mb={theme.spacing(1.5)}
+							sx={{ wordBreak: "break-all" }}
+						>
+							{error ? error : label}
+						</Typography>
+						<Typography
+							component="p"
+							sx={{ opacity: 0.6 }}
+						>
+							{!error && size}
+						</Typography>
+					</Box>
+				)}
+				<IconButton
+					onClick={onClick}
+					sx={
+						!error
+							? {
+									alignSelf: "flex-start",
+									ml: "auto",
+									mr: theme.spacing(-2.5),
+									mt: theme.spacing(-2.5),
+									padding: theme.spacing(2.5),
+									"&:focus": {
+										outline: "none",
+									},
+								}
+							: {
+									ml: "auto",
+									"&:focus": {
+										outline: "none",
+									},
+								}
+					}
+				>
+					<CloseIcon
+						sx={{
+							fontSize: "20px",
+						}}
+					/>
+				</IconButton>
+			</Stack>
+			{!error ? (
+				<Stack
+					direction="row"
+					alignItems="center"
+				>
+					<Box sx={{ width: "100%", mr: theme.spacing(5) }}>
+						<LinearProgress
+							variant="determinate"
+							value={progress}
+							sx={{
+								width: "100%",
+								height: "10px",
+								borderRadius: theme.shape.borderRadius,
+								maxWidth: "500px",
+								backgroundColor: theme.palette.primary.lowContrast,
+							}}
+						/>
+					</Box>
+					<Typography
+						component="p"
+						sx={{ minWidth: "max-content", opacity: 0.6 }}
+					>
+						{progress}
+						<span>%</span>
+					</Typography>
+				</Stack>
+			) : (
+				""
+			)}
+		</Box>
+	);
+};
+
+ProgressUpload.propTypes = {
+	icon: PropTypes.element, // JSX element for the icon (optional)
+	label: PropTypes.string, // Label text for the progress item
+	size: PropTypes.string.isRequired, // Size information for the progress item
+	progress: PropTypes.number.isRequired, // Current progress value (0-100)
+	onClick: PropTypes.func.isRequired, // Function to handle click events on the remove button
+	error: PropTypes.string, // Error message to display if there's an error (optional)
+};
+
+export default ProgressUpload;
@@ -0,0 +1,67 @@
+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 PropTypes from "prop-types";
+
+const CustomStepIcon = (props) => {
+	const { completed, active } = props;
+	return completed ? (
+		<CheckCircle color="accent" />
+	) : (
+		<RadioButtonCheckedIcon color={active ? "accent" : "disabled"} />
+	);
+};
+
+CustomStepIcon.propTypes = {
+	completed: PropTypes.bool.isRequired,
+	active: PropTypes.bool.isRequired,
+};
+
+/**
+ * @component
+ * @param {Object} props
+ * @param {Array} props.steps
+ */
+
+const ProgressStepper = ({ steps }) => {
+	const [activeStep, setActiveStep] = React.useState(1);
+	return (
+		<Stepper
+			activeStep={activeStep}
+			alternativeLabel
+		>
+			{steps.map((step, index) => {
+				const color = activeStep === index ? "primary" : "inherit";
+				return (
+					<Step
+						key={step.label}
+						onClick={() => setActiveStep(index)}
+					>
+						<StepLabel StepIconComponent={CustomStepIcon}>
+							<Typography
+								variant="body1"
+								color={color}
+								sx={{ fontWeight: "bold" }}
+							>
+								{step.label}
+							</Typography>
+						</StepLabel>
+						<Typography
+							variant="body1"
+							color={color}
+						>
+							{step.content}
+						</Typography>
+					</Step>
+				);
+			})}
+		</Stepper>
+	);
+};
+
+ProgressStepper.propTypes = {
+	steps: PropTypes.array.isRequired,
+};
+
+export default ProgressStepper;
@@ -0,0 +1,32 @@
+import { Navigate } from "react-router-dom";
+import { useSelector } from "react-redux";
+import PropTypes from "prop-types";
+
+/**
+ * ProtectedRoute is a wrapper component that ensures only authenticated users
+ * can access the wrapped content. It checks authentication status (e.g., from Redux or Context).
+ * If the user is authenticated, it renders the children; otherwise, it redirects to the login page.
+ *
+ * @param {Object} props - The props passed to the ProtectedRoute component.
+ * @param {React.ReactNode} props.children - The children to render if the user is authenticated.
+ * @returns {React.ReactElement} The children wrapped in a protected route or a redirect to the login page.
+ */
+
+const ProtectedRoute = ({ children }) => {
+	const authState = useSelector((state) => state.auth);
+
+	return authState.authToken ? (
+		children
+	) : (
+		<Navigate
+			to="/login"
+			replace
+		/>
+	);
+};
+
+ProtectedRoute.propTypes = {
+	children: PropTypes.element.isRequired,
+};
+
+export default ProtectedRoute;
@@ -0,0 +1,35 @@
+import { Navigate } from "react-router-dom";
+import { useSelector } from "react-redux";
+import PropTypes from "prop-types";
+
+/**
+ * ProtectedRoute is a wrapper component that ensures only authenticated users
+ * can access the wrapped content. It checks authentication status (e.g., from Redux or Context).
+ * If the user is authenticated, it renders the children; otherwise, it redirects to the login page.
+ *
+ * @param {Object} props - The props passed to the ProtectedRoute component.
+ * @param {React.ReactNode} props.children - The children to render if the user is authenticated.
+ * @returns {React.ReactElement} The children wrapped in a protected route or a redirect to the login page.
+ */
+
+const RoleProtectedRoute = ({ roles, children }) => {
+	const authState = useSelector((state) => state.auth);
+	const userRoles = authState?.user?.role || [];
+	const canAccess = userRoles.some((role) => roles.includes(role));
+
+	return canAccess ? (
+		children
+	) : (
+		<Navigate
+			to="/uptime"
+			replace
+		/>
+	);
+};
+
+RoleProtectedRoute.propTypes = {
+	children: PropTypes.element.isRequired,
+	roles: PropTypes.array,
+};
+
+export default RoleProtectedRoute;
@@ -0,0 +1,67 @@
+import html2canvas from "html2canvas";
+import ShareIcon from "@mui/icons-material/Share";
+import { Button } from "@mui/material";
+import { useTheme } from "@emotion/react";
+
+const ShareComponent = ({ elementToCapture, fileName = "screenshot" }) => {
+	const theme = useTheme();
+	const captureAndShare = async () => {
+		try {
+			// Temporarily apply styles directly to the element
+			const originalBackground = elementToCapture.current.style.background;
+			const originalPadding = elementToCapture.current.style.padding;
+
+			elementToCapture.current.style.background = `radial-gradient(circle, ${theme.palette.gradient.color1}, ${theme.palette.gradient.color2}, ${theme.palette.gradient.color3}, ${theme.palette.gradient.color4}, ${theme.palette.gradient.color5})`;
+			elementToCapture.current.style.padding = `${theme.spacing(20)}`;
+
+			// Capture the element directly
+			const canvas = await html2canvas(elementToCapture.current, {
+				useCORS: true,
+				scale: 2,
+				allowTaint: true,
+				backgroundColor: null,
+			});
+
+			// Restore original styles
+			elementToCapture.current.style.background = originalBackground;
+			elementToCapture.current.style.padding = originalPadding;
+
+			const imageBlob = await new Promise((resolve) =>
+				canvas.toBlob(resolve, "image/png")
+			);
+
+			const file = new File([imageBlob], `${fileName}.png`, {
+				type: "image/png",
+			});
+
+			if (navigator.share) {
+				await navigator.share({
+					files: [file],
+					title: "Screenshot",
+					text: "Check out this screenshot!",
+				});
+			} else {
+				const url = URL.createObjectURL(imageBlob);
+				const a = document.createElement("a");
+				a.href = url;
+				a.download = `${fileName}.png`;
+				a.click();
+				URL.revokeObjectURL(url);
+			}
+		} catch (error) {
+			console.error(error);
+		}
+	};
+	return (
+		<Button
+			variant="outlined"
+			startIcon={<ShareIcon sx={{ color: theme.palette.success.main }} />}
+			color="success"
+			onClick={captureAndShare}
+		>
+			Share
+		</Button>
+	);
+};
+
+export default ShareComponent;
@@ -0,0 +1,277 @@
+import Stack from "@mui/material/Stack";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import Tooltip from "@mui/material/Tooltip";
+import IconButton from "@mui/material/IconButton";
+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 { useTheme } from "@emotion/react";
+import { useSelector } from "react-redux";
+import { useTranslation } from "react-i18next";
+import { useState } from "react";
+import { useNavigate } from "react-router";
+import { clearAuthState } from "../../../../Features/Auth/authSlice.js";
+import { useDispatch } from "react-redux";
+import PropTypes from "prop-types";
+
+const getFilteredAccountMenuItems = (user, items) => {
+	if (!user) return [];
+
+	let filtered = [...items];
+
+	if (user.role?.includes("demo")) {
+		filtered = filtered.filter((item) => item.name !== "Password");
+	}
+
+	if (!user.role?.includes("superadmin")) {
+		filtered = filtered.filter((item) => item.name !== "Team");
+	}
+
+	return filtered;
+};
+
+const getRoleDisplayText = (user, t) => {
+	if (!user?.role) return "";
+
+	if (user.role.includes("superadmin")) return t("roles.superAdmin");
+	if (user.role.includes("admin")) return t("roles.admin");
+	if (user.role.includes("user")) return t("roles.teamMember");
+	if (user.role.includes("demo")) return t("roles.demoUser");
+
+	return user.role;
+};
+
+const AuthFooter = ({ collapsed, accountMenuItems }) => {
+	const { t } = useTranslation();
+	const theme = useTheme();
+	const authState = useSelector((state) => state.auth);
+	const navigate = useNavigate();
+	const dispatch = useDispatch();
+
+	const [anchorEl, setAnchorEl] = useState(null);
+
+	const openPopup = (event) => {
+		setAnchorEl(event.currentTarget);
+	};
+
+	const closePopup = () => {
+		setAnchorEl(null);
+	};
+
+	const logout = async () => {
+		dispatch(clearAuthState());
+		navigate("/login");
+	};
+	const renderAccountMenuItems = (user, items) => {
+		const filteredItems = getFilteredAccountMenuItems(user, items);
+
+		return filteredItems.map((item) => (
+			<MenuItem
+				key={item.name}
+				onClick={() => {
+					closePopup();
+					navigate(item.path);
+				}}
+				sx={{
+					gap: theme.spacing(2),
+					borderRadius: theme.shape.borderRadius,
+					pl: theme.spacing(4),
+				}}
+			>
+				{item.icon}
+				{item.name}
+			</MenuItem>
+		));
+	};
+	return (
+		<Stack
+			direction="row"
+			height="var(--env-var-side-bar-auth-footer-height)"
+			alignItems="center"
+			py={theme.spacing(4)}
+			px={theme.spacing(8)}
+			gap={theme.spacing(2)}
+			borderRadius={theme.shape.borderRadius}
+			boxSizing={"border-box"}
+		>
+			<Avatar
+				small={true}
+				onClick={(e) => collapsed && openPopup(e)}
+				sx={{
+					cursor: collapsed ? "pointer" : "default",
+				}}
+			/>
+
+			<Stack
+				direction={"row"}
+				alignItems={"center"}
+				gap={theme.spacing(2)}
+				minWidth={0}
+				maxWidth={collapsed ? 0 : "100%"}
+				sx={{
+					opacity: collapsed ? 0 : 1,
+					transition: "opacity 300ms ease, max-width 300ms ease",
+					transitionDelay: collapsed ? "0ms" : "300ms",
+				}}
+			>
+				<Stack
+					ml={theme.spacing(2)}
+					sx={{
+						maxWidth: "50%",
+						overflow: "hidden",
+					}}
+				>
+					<Typography
+						color={theme.palette.primary.contrastText}
+						fontWeight={500}
+						lineHeight={1}
+						fontSize={"var(--env-var-font-size-medium)"}
+						sx={{
+							display: "block",
+							whiteSpace: "nowrap",
+							overflow: "hidden",
+							textOverflow: "ellipsis",
+						}}
+					>
+						{authState.user?.firstName} {authState.user?.lastName}
+					</Typography>
+					<Typography
+						color={theme.palette.primary.contrastText}
+						fontSize={"var(--env-var-font-size-small)"}
+						textOverflow="ellipsis"
+						overflow="hidden"
+						whiteSpace="nowrap"
+						sx={{ textTransform: "capitalize", opacity: 0.8 }}
+					>
+						{getRoleDisplayText(authState.user, t)}
+					</Typography>
+				</Stack>
+				<Tooltip
+					title={t("navControls")}
+					disableInteractive
+				>
+					<IconButton
+						sx={{
+							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 />
+					</IconButton>
+				</Tooltip>
+			</Stack>
+			<Menu
+				className="sidebar-popup"
+				anchorEl={anchorEl}
+				open={Boolean(anchorEl)}
+				onClose={closePopup}
+				disableScrollLock
+				anchorOrigin={{
+					vertical: "top",
+					horizontal: "right",
+				}}
+				slotProps={{
+					paper: {
+						sx: {
+							marginTop: theme.spacing(-4),
+							marginLeft: collapsed ? theme.spacing(2) : 0,
+						},
+					},
+				}}
+				MenuListProps={{
+					sx: {
+						p: 2,
+						"& li": { m: 0 },
+						"& li:has(.MuiBox-root):hover": {
+							backgroundColor: "transparent",
+						},
+					},
+				}}
+				sx={{
+					ml: theme.spacing(4),
+				}}
+			>
+				{collapsed && (
+					<MenuItem sx={{ cursor: "default", minWidth: "50%" }}>
+						<Box
+							mb={theme.spacing(2)}
+							sx={{
+								minWidth: "50%",
+								maxWidth: "max-content",
+								overflow: "visible",
+								whiteSpace: "nowrap",
+							}}
+						>
+							<Typography
+								component="span"
+								fontWeight={500}
+								fontSize={13}
+								sx={{
+									display: "block",
+									whiteSpace: "nowrap",
+									overflow: "visible",
+									// wordBreak: "break-word",
+									textOverflow: "clip",
+								}}
+							>
+								{authState.user?.firstName} {authState.user?.lastName}
+							</Typography>
+							<Typography
+								sx={{
+									textTransform: "capitalize",
+									fontSize: 12,
+									whiteSpace: "nowrap",
+									overflow: "visible",
+									// wordBreak: "break-word",
+								}}
+							>
+								{authState.user?.role}
+							</Typography>
+						</Box>
+					</MenuItem>
+				)}
+				{/* TODO Do we need two dividers? */}
+				{collapsed && <Divider />}
+				{/* <Divider /> */}
+				{renderAccountMenuItems(authState.user, accountMenuItems)}
+				<MenuItem
+					onClick={logout}
+					sx={{
+						gap: theme.spacing(4),
+						borderRadius: theme.shape.borderRadius,
+						pl: theme.spacing(4),
+						"& svg path": {
+							stroke: theme.palette.primary.contrastTextTertiary,
+						},
+					}}
+				>
+					<LogoutSvg />
+					{t("menu.logOut", "Log out")}
+				</MenuItem>
+			</Menu>
+		</Stack>
+	);
+};
+
+AuthFooter.propTypes = {
+	collapsed: PropTypes.bool,
+	accountMenuItems: PropTypes.array,
+};
+
+export default AuthFooter;
@@ -0,0 +1,55 @@
+import IconButton from "@mui/material/IconButton";
+import ArrowRight from "../../ArrowRight/index.jsx";
+import ArrowLeft from "../../ArrowLeft/index.jsx";
+import { useTheme } from "@mui/material/styles";
+import { useDispatch } from "react-redux";
+import { toggleSidebar } from "../../../../Features/UI/uiSlice.js";
+import PropTypes from "prop-types";
+
+const CollapseButton = ({ collapsed }) => {
+	const theme = useTheme();
+	const dispatch = useDispatch();
+	const arrowIcon = collapsed ? (
+		<ArrowRight
+			height={theme.spacing(8)}
+			width={theme.spacing(8)}
+			color={theme.palette.primary.contrastTextSecondary}
+		/>
+	) : (
+		<ArrowLeft
+			height={theme.spacing(8)}
+			width={theme.spacing(8)}
+			color={theme.palette.primary.contrastTextSecondary}
+		/>
+	);
+	return (
+		<IconButton
+			sx={{
+				position: "absolute",
+				/* TODO 60 is a magic number. if logo chnges size this might break */
+				top: 60,
+				right: 0,
+				transform: `translate(50%, 0)`,
+				backgroundColor: theme.palette.tertiary.main,
+				border: `1px solid ${theme.palette.primary.lowContrast}`,
+				p: theme.spacing(2.5),
+
+				"&:focus": { outline: "none" },
+				"&:hover": {
+					backgroundColor: theme.palette.primary.lowContrast,
+					borderColor: theme.palette.primary.lowContrast,
+				},
+			}}
+			onClick={() => {
+				dispatch(toggleSidebar());
+			}}
+		>
+			{arrowIcon}
+		</IconButton>
+	);
+};
+
+CollapseButton.propTypes = {
+	collapsed: PropTypes.bool.isRequired,
+};
+export default CollapseButton;