src/components/AddUserModel/index.tsx

@@ -55,7 +55,19 @@ const AddUserModal: React.FC<AddUserModalProps> = ({
 	});
 
 	const onSubmit = (data: FormData) => {
+		if (editRow) {
+		
+			handleUpdate(
+				editRow.id,
+				data.name,
+				data.email,
+				data.phone,
+				data.password
+			);
+		} else {
+			
 			handleCreate(data);
+		}
 
 		handleClose();
 		reset();
@@ -79,7 +91,7 @@ const AddUserModal: React.FC<AddUserModalProps> = ({
 					justifyContent: "space-between",
 				}}
 			>
-				{editRow ? "Edit Admin" : "Add Admin"}
+				{editRow ? "Edit User" : "Add User"}
 				<Box
 					onClick={handleClose}
 					sx={{
@@ -210,3 +222,7 @@ const AddUserModal: React.FC<AddUserModalProps> = ({
 };
 
 export default AddUserModal;
+function handleUpdate(id: any, name: string, email: string, phone: string, password: string) {
+	throw new Error("Function not implemented.");
+}
+

src/components/AppNavbar/index.tsx

@@ -42,7 +42,7 @@ export default function AppNavbar() {
 			sx={{
 				display: { xs: "auto", md: "none" },
 				boxShadow: 0,
-				bgcolor: "background.paper",
+				backgroundColor:"#1C1C1C",
 				backgroundImage: "none",
 				borderBottom: "1px solid",
 				borderColor: "divider",

src/components/CustomTable/index.tsx

@@ -1,3 +1,4 @@
+
 import * as React from "react";
 import { styled } from "@mui/material/styles";
 import Table from "@mui/material/Table";
@@ -12,24 +13,30 @@ import { useDispatch } from "react-redux";
 import {
 	Box,
 	Button,
-	dividerClasses,
 	IconButton,
-	listClasses,
+	InputAdornment,
 	Menu,
+	Pagination,
+	TextField,
+	Typography,
 } from "@mui/material";
-import MoreVertRoundedIcon from "@mui/icons-material/MoreVertRounded";
+import MoreHorizRoundedIcon from "@mui/icons-material/MoreHorizRounded"; 
 import DeleteModal from "../Modals/DeleteModal";
 import { AppDispatch } from "../../redux/store/store";
 import ViewModal from "../Modals/ViewModal";
+import SearchIcon from "@mui/icons-material/Search";
+import TuneIcon from "@mui/icons-material/Tune";
 
 // Styled components for customization
 const StyledTableCell = styled(TableCell)(({ theme }) => ({
 	[`&.${tableCellClasses.head}`]: {
-		backgroundColor: " #1565c0",
+		backgroundColor: "#454545", // Changed to #272727 for the header
 		color: theme.palette.common.white,
+		borderBottom: "none", // Remove any border at the bottom of the header
 	},
 	[`&.${tableCellClasses.body}`]: {
 		fontSize: 14,
+		borderBottom: "1px solid #454545", // Adding border to body cells
 	},
 }));
 
@@ -37,8 +44,9 @@ const StyledTableRow = styled(TableRow)(({ theme }) => ({
 	"&:nth-of-type(odd)": {
 		backgroundColor: theme.palette.action.hover,
 	},
-	"&:last-child td, &:last-child th": {
+	"& td, th": {
-		border: 0,
+		borderColor: "#454545", // Applying border color to both td and th
+		borderWidth: "1px", // Set border width to ensure it appears
 	},
 }));
 
@@ -62,7 +70,8 @@ interface CustomTableProps {
 	setViewModal: Function;
 	deleteModal: boolean;
 	handleStatusToggle: (id: string, currentStatus: number) => void;
-	tableType?: string;
+	tableType: string; // Adding tableType prop to change header text dynamically
+	handleClickOpen: () => void;
 }
 
 const CustomTable: React.FC<CustomTableProps> = ({
@@ -76,10 +85,15 @@ const CustomTable: React.FC<CustomTableProps> = ({
 	setModalOpen,
 	handleStatusToggle,
 	tableType,
+	handleClickOpen,
+
 }) => {
 	const dispatch = useDispatch<AppDispatch>();
 	const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
 	const [selectedRow, setSelectedRow] = React.useState<Row | null>(null);
+	const [searchQuery, setSearchQuery] = React.useState("");
+	const [currentPage, setCurrentPage] = React.useState(1);
+	const usersPerPage = 10;
 
 	const open = Boolean(anchorEl);
 
@@ -124,32 +138,164 @@ const CustomTable: React.FC<CustomTableProps> = ({
 		handleClose();
 	};
 
+const filteredRows = rows.filter(
+	(row) =>
+		(row.name &&
+			row.name.toLowerCase().includes(searchQuery.toLowerCase())) ||
+		false
+);
+
+
+	const indexOfLastRow = currentPage * usersPerPage;
+	const indexOfFirstRow = indexOfLastRow - usersPerPage;
+	const currentRows = filteredRows.slice(indexOfFirstRow, indexOfLastRow);
+
+	const handlePageChange = (
+		event: React.ChangeEvent<unknown>,
+		value: number
+	) => {
+		setCurrentPage(value);
+	};
+
 	return (
-		<Box sx={{ overflowX: "auto", width: "100%" }}>
+		<Box
-			<TableContainer component={Paper}>
-				<Table
 			sx={{
-						minWidth: 700,
+				width: "calc(100% - 48px)",
-						width: "100%",
+				margin: "0 auto",
-						tableLayout: "auto",
+				padding: "24px",
+				backgroundColor: "#1C1C1C",
+				borderRadius: "12px",
 			}}
-					aria-label="customized table"
 		>
-					<TableHead>
+			<Typography
+				sx={{
+					color: "#FFFFFF",
+					fontWeight: 500,
+					fontSize: "18px",
+					fontFamily: "Gilroy",
+				}}
+			>
+				{/* Dynamic title based on the page type */}
+				{tableType === "admin"
+					? "Admin"
+					: tableType === "role"
+					? "Roles"
+					: tableType === "user"
+					? "Users"
+					: tableType === "manager"
+					? "Managers"
+					: tableType === "vehicle"
+					? "Vehicles"
+					: "List"}
+			</Typography>
+
+			{/* Search & Buttons Section */}
+			<Box
+				sx={{
+					display: "flex",
+					gap: "16px",
+					marginTop: "16px",
+					alignItems: "center",
+				}}
+			>
+				<TextField
+					variant="outlined"
+					placeholder="Search"
+					sx={{
+						width: "422px",
+						borderRadius: "12px",
+						input: { color: "#FFFFFF" },
+						backgroundColor: "#272727",
+						"& .MuiOutlinedInput-root": {
+							borderRadius: "12px",
+							"& fieldset": { borderColor: "#FFFFFF" },
+							"&:hover fieldset": { borderColor: "#FFFFFF" },
+							"&.Mui-focused fieldset": {
+								borderColor: "#52ACDF",
+							},
+						},
+					}}
+					InputProps={{
+						startAdornment: (
+							<InputAdornment position="start">
+								<SearchIcon sx={{ color: "#272727" }} />
+							</InputAdornment>
+						),
+					}}
+					value={searchQuery}
+					onChange={(e) => setSearchQuery(e.target.value)}
+				/>
+				<Box
+					sx={{
+						display: "flex",
+						justifyContent: "flex-end",
+						width: "100%",
+					}}
+				>
+					<Button
+						sx={{
+							backgroundColor: "#52ACDF",
+							color: "white",
+							borderRadius: "8px",
+							width: "184px",
+							"&:hover": { backgroundColor: "#439BC1" },
+						}}
+						onClick={() => handleClickOpen()}
+					>
+						Add{" "}
+						{tableType === "admin"
+							? "Admin"
+							: tableType === "role"
+							? "Role"
+							: tableType === "user"
+							? "User"
+							: tableType === "manager"
+							? "Manager"
+							: tableType === "vehicle"
+							? "Vehicle"
+							: "Item"}
+					</Button>
+				</Box>
+
+				<IconButton
+					sx={{
+						width: "44px",
+						height: "44px",
+						borderRadius: "8px",
+						backgroundColor: "#272727",
+						color: "#52ACDF",
+						"&:hover": { backgroundColor: "#333333" },
+					}}
+				>
+					<TuneIcon />
+				</IconButton>
+			</Box>
+
+			{/* Table Section */}
+			<TableContainer
+				component={Paper}
+				sx={{
+					marginTop: "24px",
+					backgroundColor: "#1C1C1C",
+					borderRadius: "12px",
+					overflow: "hidden",
+				}}
+			>
+				<Table>
+					<TableHead
+						sx={{
+							backgroundColor: "#272727",
+							borderBottom: "none",
+						}}
+					>
+						{" "}
 						<TableRow>
 							{columns.map((column) => (
 								<StyledTableCell
 									key={column.id}
-									align={column.align || "left"}
 									sx={{
-										whiteSpace: "nowrap", // Prevent wrapping
+										color: "#FFFFFF",
-										// fontSize: { xs: "12px", sm: "14px" },
+										fontWeight: "bold",
-										fontSize: {
-											xs: "10px",
-											sm: "12px",
-											md: "14px",
-										}, // Adjust font size responsively
-										padding: { xs: "8px", sm: "12px" },
 									}}
 								>
 									{column.label}
@@ -158,20 +304,14 @@ const CustomTable: React.FC<CustomTableProps> = ({
 						</TableRow>
 					</TableHead>
 					<TableBody>
-						{rows.map((row, rowIndex) => (
+						{currentRows.map((row, rowIndex) => (
 							<StyledTableRow key={rowIndex}>
 								{columns.map((column) => (
 									<StyledTableCell
 										key={column.id}
-										align={column.align || "left"}
 										sx={{
-											whiteSpace: "nowrap", // Prevent wrapping
+											color: "#FFFFFF",
-											fontSize: {
+											backgroundColor: "#272727",
-												xs: "10px",
-												sm: "12px",
-												md: "14px",
-											}, // Adjust font size responsively
-											padding: { xs: "8px", sm: "12px" },
 										}}
 									>
 										{isImage(row[column.id]) ? (
@@ -192,8 +332,24 @@ const CustomTable: React.FC<CustomTableProps> = ({
 													handleClick(e, row);
 													setRowData(row); // Store the selected row
 												}}
+												sx={{
+													padding: 0,
+													minWidth: 0,
+													width: "auto",
+													height: "auto",
+													backgroundColor:
+														"transparent",
+													color: "#FFFFFF",
+													border: "none",
+													"&:hover": {
+														backgroundColor:
+															"transparent",
+													},
+												}}
 											>
-												<MoreVertRoundedIcon />
+												<MoreHorizRoundedIcon
+													sx={{ fontSize: "24px" }}
+												/>
 											</IconButton>
 										)}
 									</StyledTableCell>
@@ -204,6 +360,40 @@ const CustomTable: React.FC<CustomTableProps> = ({
 				</Table>
 			</TableContainer>
 
+			{/* Pagination */}
+			<Box
+				sx={{
+					display: "flex",
+					justifyContent: "flex-end",
+					alignItems: "center",
+					marginTop: "16px",
+				}}
+			>
+				<Typography
+					sx={{ color: "white", fontSize: "16px", fontWeight: 500 }}
+				>
+					Page Number :
+				</Typography>
+				<Pagination
+					count={Math.ceil(filteredRows.length / usersPerPage)}
+					page={currentPage}
+					onChange={handlePageChange}
+					siblingCount={0}
+					boundaryCount={0}
+					sx={{
+						"& .MuiPaginationItem-root": {
+							color: "white",
+							borderRadius: "0px",
+						},
+						"& .MuiPaginationItem-page.Mui-selected": {
+							backgroundColor: "transparent",
+							fontWeight: "bold",
+							color: "#FFFFFF",
+						},
+					}}
+				/>
+			</Box>
+
 			{/* Menu Actions */}
 			{open && (
 				<Menu
@@ -215,15 +405,9 @@ const CustomTable: React.FC<CustomTableProps> = ({
 					transformOrigin={{ horizontal: "right", vertical: "top" }}
 					anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
 					sx={{
-						[`& .${listClasses.root}`]: {
-							padding: "4px",
-						},
 						[`& .${paperClasses.root}`]: {
 							padding: 0,
 						},
-						[`& .${dividerClasses.root}`]: {
-							margin: "4px -4px",
-						},
 					}}
 				>
 					<Box
@@ -243,7 +427,8 @@ const CustomTable: React.FC<CustomTableProps> = ({
 							sx={{
 								justifyContent: "flex-start",
 								py: 0,
-								textTransform: "capitalize",
+								fontWeight: "bold",
+								color: "#52ACDF",
 							}}
 						>
 							View
@@ -258,6 +443,7 @@ const CustomTable: React.FC<CustomTableProps> = ({
 								id={selectedRow?.id}
 							/>
 						)}
+
 						<Button
 							variant="text"
 							onClick={() => setModalOpen(true)}
@@ -270,10 +456,21 @@ const CustomTable: React.FC<CustomTableProps> = ({
 						>
 							Edit
 						</Button>
-
+						{tableType === "role" && (
-						{tableType === "roleList" && (
+							<Button
-							<Button variant="text" onClick={handleToggleStatus}>
+								variant="text"
-								{selectedRow.statusValue === 1
+								onClick={(e) => {
+									e.stopPropagation();
+									handleToggleStatus();
+								}}
+								color="secondary"
+								sx={{
+									justifyContent: "flex-start",
+									py: 0,
+									fontWeight: "bold",
+								}}
+							>
+								{selectedRow?.statusValue === 1
 									? "Deactivate"
 									: "Activate"}
 							</Button>
@@ -289,25 +486,26 @@ const CustomTable: React.FC<CustomTableProps> = ({
 							sx={{
 								justifyContent: "flex-start",
 								py: 0,
-								textTransform: "capitalize",
+								fontWeight: "bold",
+								color: "red",
 							}}
 						>
 							Delete
 						</Button>
+					</Box>
+				</Menu>
+			)}
+
+			{/* Modals */}
 			{deleteModal && (
 				<DeleteModal
-								handleDelete={() =>
+					handleDelete={() => handleDeleteButton(selectedRow?.id)}
-									handleDeleteButton(selectedRow?.id)
-								}
 					open={deleteModal}
 					setDeleteModal={setDeleteModal}
 					id={selectedRow?.id}
 				/>
 			)}
 		</Box>
-				</Menu>
-			)}
-		</Box>
 	);
 };
 

src/components/Header/index.tsx

@@ -14,6 +14,7 @@ import { useDispatch, useSelector } from "react-redux";
 import { AppDispatch, RootState } from "../../redux/store/store";
 import { fetchAdminProfile } from "../../redux/slices/profileSlice";
 import OptionsMenu from "../OptionsMenu";
+import NotificationsNoneIcon from "@mui/icons-material/NotificationsNone";
 
 export default function Header() {
 	const [showNotifications, setShowNotifications] = React.useState(false);
@@ -34,16 +35,16 @@ export default function Header() {
 		<Box
 			sx={{
 				width: "100%",
-				height: "84px",
+				// height: "84px",
-				// backgroundColor: "#202020",
+				// backgroundColor: "#1C1C1C",
-				padding: "20px 24px",
+				padding: { xs: "20px 12px", sm: "20px 24px" }, // Adjust padding based on screen size // error on this
 				display: "flex",
 				alignItems: "center",
 				justifyContent: "space-between",
 				flexDirection: { xs: "column", sm: "row" },
+				// padding:"0px"
 			}}
 		>
-			<Box sx={{ flexGrow: 1 }} />
 			<Stack
 				direction="row"
 				spacing={3}
@@ -58,9 +59,9 @@ export default function Header() {
 				{/* Search Bar */}
 				<Box
 					sx={{
-						width: { xs: "100%", sm: "360px" },
+						// width: { xs: "100%", sm: "360px" },
 						height: "44px",
-						backgroundColor: "#FFFFFF",
+
 						borderRadius: "8px",
 						border: "1px solid #424242",
 						display: "flex",
@@ -68,12 +69,12 @@ export default function Header() {
 						padding: "0 12px",
 					}}
 				>
-					<SearchIcon sx={{ color: "#202020" }} />
+					<SearchIcon sx={{ color: "#FFFFFF" }} />
 					<InputBase
 						sx={{
 							marginLeft: 1,
 							flex: 1,
-							color: "#202020",
+							color: "#FFFFFF",
 							fontSize: { xs: "12px", sm: "14px" },
 						}}
 					/>
@@ -88,32 +89,20 @@ export default function Header() {
 						display: { xs: "none", sm: "flex" }, // Hide on mobile, show on larger screens
 					}}
 				>
-					{/* Custom Bell Icon */}
-					<MenuButton
-						showBadge
-						aria-label="Open notifications"
-						onClick={toggleNotifications}
-					>
-						<NotificationsRoundedIcon />
-					</MenuButton>
 				
-					<Divider flexItem sx={{ backgroundColor: "#202020" }} />
+					<NotificationsNoneIcon onClick={toggleNotifications} />
-					<Stack direction="row" spacing={1.5} alignItems="center">
 					<Avatar
 						alt="User Avatar"
 						src="/avatar.png"
 						sx={{ width: 36, height: 36 }}
 					/>
-						<Typography variant="body1" sx={{ color: "#202020" }}>
+					<Typography variant="body1" sx={{ color: "#FFFFFF" }}>
 						{user?.name || "No Admin"}
 					</Typography>
 
-						<OptionsMenu
+					<OptionsMenu />
+				</Stack>
 
-						/>
-					</Stack>
-					{/* <ColorModeIconDropdown /> */}
-				</Stack>
 				{showNotifications && (
 					<Box
 						sx={{

src/components/LineChartCard/index.tsx

@@ -43,20 +43,20 @@ export default function LineChartCard() {
 	return (
 		<Card
 			variant="outlined"
-			sx={{ width: "100%", height: "100%", backgroundColor: "#F2F2F2" }}
+			sx={{ width: "100%", height: "100%", backgroundColor: "#202020" }}
 		>
 			<CardContent>
 				<div
 					style={{
 						display: "flex",
 						alignItems: "center",
-						color: "#202020",
+						color: "#F2F2F2",
 					}}
 				>
 					<Typography
 						variant="h6"
 						align="left"
-						color="#202020"
+						color="#F2F2F2"
 						sx={{
 							fontFamily: "Gilroy",
 							fontWeight: 500,
@@ -70,7 +70,7 @@ export default function LineChartCard() {
 						sx={{
 							mt: 2,
 							mb: 2,
-							backgroundColor: "#FFFFFF",
+							backgroundColor: "#202020",
 							marginLeft: "auto",
 							marginRight: "16px",
 							display: "flex",
@@ -81,7 +81,7 @@ export default function LineChartCard() {
 							border: "1px solid #454545",
 
 							padding: "4px 8px",
-							color: "#FFFFFF",
+							color: "#F2F2F2",
 						}}
 					>
 						<Typography
@@ -90,13 +90,13 @@ export default function LineChartCard() {
 								fontWeight: 500,
 								fontSize: "14px",
 								lineHeight: "24px",
-								color: "#202020",
+								color: "#F2F2F2",
 								p: "4px",
 							}}
 						>
 							Weekly
 						</Typography>
-						<ArrowDropDownIcon sx={{ color: "#202020" }} />
+						<ArrowDropDownIcon sx={{ color: "#F2F2F2" }} />
 					</Box>
 				</div>
 

src/components/MainGrid/index.tsx

@@ -48,7 +48,7 @@ export default function MainGrid() {
 				spacing={2}
 				columns={12}
 				
-				sx={{ mb: (theme) => theme.spacing(2) }}
+				// sx={{ mb: (theme) => theme.spacing(2) }}
 			>
 				{data.map((card, index) => (
 					<Grid key={index} size={{ xs: 12, sm: 6, lg: 3 }}>

src/components/OptionsMenu/index.tsx

@@ -1,22 +1,15 @@
 import * as React from "react";
 import { styled } from "@mui/material/styles";
-import Divider, { dividerClasses } from "@mui/material/Divider";
 import Menu from "@mui/material/Menu";
 import MuiMenuItem from "@mui/material/MenuItem";
-import { paperClasses } from "@mui/material/Paper";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-import { listClasses } from "@mui/material/List";
+import Link from "@mui/material/Link";
-import ListItemText from "@mui/material/ListItemText";
-import ListItemIcon, { listItemIconClasses } from "@mui/material/ListItemIcon";
-import LogoutRoundedIcon from "@mui/icons-material/LogoutRounded";
-import MoreVertRoundedIcon from "@mui/icons-material/MoreVertRounded";
-import MenuButton from "../MenuButton";
-import { Avatar } from "@mui/material";
-import { useNavigate } from "react-router-dom";
 import Logout from "../LogOutFunction/LogOutFunction";
-import { ArrowDropDownIcon } from "@mui/x-date-pickers";
+import ListItemIcon, { listItemIconClasses } from "@mui/material/ListItemIcon";
-
+import { ListItemText } from "@mui/material";
 const MenuItem = styled(MuiMenuItem)({
 	margin: "2px 0",
+	borderBottom: "none",
 });
 
 export default function OptionsMenu({ avatar }: { avatar?: boolean }) {
@@ -29,71 +22,44 @@ export default function OptionsMenu({ avatar }: { avatar?: boolean }) {
 	const handleClose = () => {
 		setAnchorEl(null);
 	};
-	//Eknoor singh and jaanvi
-	//date:- 12-Feb-2025
-	//Made a navigation page for the profile page
-	const navigate = useNavigate();
-	const handleProfile = () => {
-		navigate("/panel/profile");
-	};
-
-	//jaanvi
-	//date:- 13-Feb-2025
 
 	return (
 		<React.Fragment>
-			<MenuButton
+			<ExpandMoreIcon onClick={handleClick} />
-				aria-label="Open menu"
-				onClick={handleClick}
-				sx={{ borderColor: "transparent" }}
-			>
-				{/* {avatar ? (
-					<MoreVertRoundedIcon />
-				) : (
-					<Avatar
-						sizes="small"
-						alt="Super Admin"
-						src="/static/images/avatar/7.jpg"
-						sx={{ width: 36, height: 36 }}
-					/>
-				)} */}
-				<ArrowDropDownIcon />
-			</MenuButton>
 			<Menu
 				anchorEl={anchorEl}
-				id="menu"
+				id="top-menu"
 				open={open}
 				onClose={handleClose}
 				onClick={handleClose}
+				slotProps={{
+					paper: {
+						elevation: 0,
+						sx: {
+							overflow: "visible",
+							filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.32))",
+							mt: 1.5,
+							"& .MuiMenuItem-root": {
+								borderBottom: "none", // Remove any divider under menu items
+							},
+						},
+					},
+				}}
 				transformOrigin={{ horizontal: "right", vertical: "top" }}
 				anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
+			>
+				<Link
+					href={"/panel/profile"}
+					underline="none"
 					sx={{
-					[`& .${listClasses.root}`]: {
+						"&::before": {
-						padding: "4px",
+							display: "none",
-					},
-					[`& .${paperClasses.root}`]: {
-						padding: 0,
-					},
-					[`& .${dividerClasses.root}`]: {
-						margin: "4px -4px",
-					},
-				}}
-			>
-				<MenuItem onClick={handleProfile}>Profile</MenuItem>
-				{/* <MenuItem onClick={handleClose}>My account</MenuItem>
-				<Divider />
-				<MenuItem onClick={handleClose}>Add another account</MenuItem>
-				<MenuItem onClick={handleClose}>Settings</MenuItem> */}
-				{/* <Divider /> */}
-				<MenuItem
-					onClick={handleClose}
-					sx={{
-						[`& .${listItemIconClasses.root}`]: {
-							ml: "auto",
-							minWidth: 0,
 						},
 					}}
 				>
+					<MenuItem onClick={handleClose}>Profile</MenuItem>
+				</Link>
+				<MenuItem onClick={handleClose} sx={{ color: "#E8533B" }}>
 					<ListItemText
 						onClick={(e) => {
 							e.stopPropagation();
@@ -103,14 +69,11 @@ export default function OptionsMenu({ avatar }: { avatar?: boolean }) {
 					>
 						Logout
 					</ListItemText>
+
 					<Logout
 						setLogoutModal={setLogoutModal}
 						logoutModal={logoutModal}
 					/>
-
-					{/* <ListItemIcon>
-						<LogoutRoundedIcon fontSize="small" />
-					</ListItemIcon> */}
 				</MenuItem>
 			</Menu>
 		</React.Fragment>

src/components/ResourcePieChart/index.tsx

@@ -32,14 +32,14 @@ export default function ResourcePieChart() {
 				flexGrow: 1,
 				width: "100%",
 				height: "100%",
-				backgroundColor: "#F2F2F2",
+				backgroundColor: "#202020",
 			}}
 		>
 			<CardContent>
 				<Typography
 					component="h2"
 					variant="subtitle2"
-					color="#202020"
+					color="#F2F2F2"
 					sx={{
 						fontFamily: "Gilroy",
 						fontWeight: 500,
@@ -93,7 +93,7 @@ export default function ResourcePieChart() {
 										borderRadius: "50%",
 									}}
 								/>
-								<Typography variant="body2" color="#202020">
+								<Typography variant="body2" color="#F2F2F2">
 									{entry.title}
 								</Typography>
 							</Stack>

src/components/SessionsChart/index.tsx

@@ -12,7 +12,7 @@ export default function SessionsChart() {
 			sx={{
 				width: "100%",
 				height: "100%",
-				backgroundColor: "#F2F2F2",
+				backgroundColor: "#202020",
 				p: 2,
 			}}
 		>
@@ -20,7 +20,7 @@ export default function SessionsChart() {
 				<Typography
 					variant="h6"
 					align="left"
-					color="#202020"
+					color="#F2F2F2"
 					sx={{
 						fontFamily: "Gilroy",
 						fontWeight: 500,
@@ -36,7 +36,7 @@ export default function SessionsChart() {
 					sx={{
 						mt: 2,
 						mb: 2,
-						backgroundColor: "#FFFFFF",
+						backgroundColor: "#202020",
 						fontSize: "14px",
 						lineHeight: "20px",
 						width: { xs: "100%" },
@@ -55,13 +55,13 @@ export default function SessionsChart() {
 							fontWeight: 500,
 							fontSize: "14px",
 							lineHeight: "24px",
-							color: "#202020",
+							color: "#F2F2F2",
 							p: "4px",
 						}}
 					>
 						Delhi NCR EV Station
 					</Typography>
-					<ArrowDropDownIcon sx={{ color: "#202020" }} />
+					<ArrowDropDownIcon sx={{ color: "#F2F2F2" }} />
 				</Box>
 
 				{/* Grid container for the four boxes */}
@@ -86,8 +86,8 @@ export default function SessionsChart() {
 								height: "84px",
 								borderRadius: "8px",
 								p: "12px 16px",
-								backgroundColor: "#FFFFFF",
+								backgroundColor: "#272727",
-								color: "#202020",
+								color: "#F2F2F2",
 							}}
 						>
 							<Typography

src/components/SideMenu/index.tsx

@@ -69,39 +69,7 @@ export default function SideMenu() {
 				</Button>
 			</Box>
 			<MenuContent hidden={open} />
-			{/* <CardAlert /> */}
+			
-			{/* <Stack
-				direction="row"
-				sx={{
-					p: 2,
-					gap: 1,
-					alignItems: "center",
-					borderTop: "1px solid",
-					borderColor: "divider",
-				}}
-			>
-				<Avatar
-					sizes="small"
-					alt={user?.name || "User Avatar"}
-					src={"/static/images/avatar/7.jpg"}
-					sx={{ width: open ? 36 : 0, height: open ? 36 : 0 }}
-				/>
-				<Box sx={{ mr: "auto", display: !open ? "none" : "block" }}>
-					<Typography
-						variant="body2"
-						sx={{ fontWeight: 500, lineHeight: "16px" }}
-					>
-						{user?.name || "No Admin"}
-					</Typography>
-					<Typography
-						variant="caption"
-						sx={{ color: "text.secondary" }}
-					>
-						{user?.email || "No Email"}
-					</Typography>
-				</Box>
-				 <OptionsMenu avatar={open} /> 
-			</Stack> */}
 		</Drawer>
 	);
 }

src/components/StatCard/index.tsx

@@ -18,13 +18,13 @@ export default function StatCard({ title, value }: StatCardProps) {
 	return (
 		<Card
 			variant="outlined"
-			sx={{ height: "100%", backgroundColor: "#F2F2F2" }}
+			sx={{ height: "100%", backgroundColor: "#202020" }}
 		>
 			<CardContent>
 				<Typography
 					component="h2"
 					variant="subtitle2"
-					color="#202020"
+					color="#F2F2F2"
 					gutterBottom
 				>
 					{title}
@@ -32,7 +32,7 @@ export default function StatCard({ title, value }: StatCardProps) {
 				<Typography
 					component="h1"
 					variant="body1"
-					color="#202020"
+					color="#F2F2F2"
 					fontSize={30}
 					fontWeight={700}
 					gutterBottom

src/components/barChartCard/index.tsx

@@ -30,20 +30,20 @@ export default function RoundedBarChart() {
 	return (
 		<Card
 			variant="outlined"
-			sx={{ width: "100%", height: "100%", backgroundColor: "#F2F2F2" }}
+			sx={{ width: "100%", height: "100%", backgroundColor: "#202020" }}
 		>
 			<CardContent>
 				<div
 					style={{
 						display: "flex",
 						alignItems: "center",
-						color: "#202020",
+						color: "#F2F2F2",
 					}}
 				>
 					<Typography
 						variant="h6"
 						align="left"
-						color="#202020"
+						color="#F2F2F2"
 						sx={{
 							fontFamily: "Gilroy",
 							fontWeight: 500,
@@ -57,7 +57,7 @@ export default function RoundedBarChart() {
 						sx={{
 							mt: 2,
 							mb: 2,
-							backgroundColor: "#FFFFFF",
+							backgroundColor: "#202020",
 							marginLeft: "auto",
 							marginRight: "16px",
 							display: "flex",
@@ -68,7 +68,7 @@ export default function RoundedBarChart() {
 							border: "1px solid #454545",
 
 							padding: "4px 8px",
-							color: "#202020",
+							color: "#F2F2F2",
 						}}
 					>
 						<Typography
@@ -77,13 +77,13 @@ export default function RoundedBarChart() {
 								fontWeight: 500,
 								fontSize: "14px",
 								lineHeight: "24px",
-								color: "#202020",
+								color: "#F2F2F2",
 								p: "4px",
 							}}
 						>
 							Monthly
 						</Typography>
-						<ArrowDropDownIcon sx={{ color: "#202020" }} />
+						<ArrowDropDownIcon sx={{ color: "#F2F2F2" }} />
 					</Box>
 				</div>
 				<BarChart

src/layouts/DashboardLayout/index.tsx

@@ -16,15 +16,18 @@ const DashboardLayout: React.FC<LayoutProps> = ({ customStyles }) => {
 			<Box
 				sx={{
 					display: "flex",
-					height: "100vh",
+					height: "auto",
 					flexDirection: { xs: "column", md: "row" },
+					width: "100%",
+					margin: 0,
+					padding: 0,
 				}}
 			>
 				{/* SideMenu - Responsive, shown only on large screens */}
 				<Box
 					sx={{
 						display: { xs: "none", md: "block" },
-						width: 250,
+						// width: 250,
 					}}
 				>
 					<SideMenu />
@@ -46,8 +49,13 @@ const DashboardLayout: React.FC<LayoutProps> = ({ customStyles }) => {
 						overflow: "auto",
 						...customStyles,
 						mt: { xs: 8, md: 0 },
+						padding: 0,
+						
 					})}
 				>
+						
+						
+					
 					<Stack
 						spacing={2}
 						sx={{

src/pages/AddEditRolePage/index.tsx

@@ -137,8 +137,8 @@ const AddEditRolePage: React.FC = () => {
 					display: "flex",
 					justifyContent: "space-between",
 					alignItems: "center",
-					backgroundColor: "#1976D2",
+					backgroundColor: "#52ACDF",
-					color: "#fff",
+					color: "#fffff",
 					p: 2,
 					borderRadius: "8px",
 					mb: 2,
@@ -147,11 +147,7 @@ const AddEditRolePage: React.FC = () => {
 				<Typography variant="h6" fontWeight={600}>
 					Role Permissions
 				</Typography>
-				<Button
+				<Button variant="contained" onClick={handleBack}>
-					variant="contained"
-					color="secondary"
-					onClick={handleBack}
-				>
 					Back
 				</Button>
 			</Box>
@@ -166,7 +162,6 @@ const AddEditRolePage: React.FC = () => {
 					fullWidth
 					required
 					variant="outlined"
-					
 					sx={{ mb: 2, mt: 2 }}
 				/>
 			</Box>
@@ -174,12 +169,15 @@ const AddEditRolePage: React.FC = () => {
 			{/* Table Container */}
 			<TableContainer
 				component={Paper}
-				sx={{ borderRadius: "8px", overflow: "hidden" }}
+				sx={{
+					borderRadius: "8px",
+					overflow: "hidden",
+				}}
 			>
 				<Table>
 					{/* Table Head */}
 					<TableHead>
-						<TableRow sx={{ backgroundColor: "#f5f5f5" }}>
+						<TableRow sx={{ backgroundColor: "#1C1C1C" }}>
 							<TableCell
 								sx={{ fontWeight: "bold", width: "30%" }}
 							>
@@ -200,7 +198,7 @@ const AddEditRolePage: React.FC = () => {
 								key={index}
 								sx={{
 									"&:nth-of-type(odd)": {
-										backgroundColor: "#FAFAFA",
+										backgroundColor: "#1C1C1C",
 									},
 								}}
 							>

src/pages/AdminList/index.tsx

@@ -69,6 +69,7 @@ export default function AdminList() {
 					email,
 					phone,
 					registeredAddress,
+					
 				})
 			);
 			await dispatch(adminList());
@@ -85,18 +86,17 @@ export default function AdminList() {
 		{ id: "registeredAddress", label: "Address" },
 		{ id: "action", label: "Action", align: "center" },
 	];
-	const filteredAdmins = admins?.filter(
+	// const filteredAdmins = admins?.filter(
-		(admin) =>
+	// 	(admin) =>
-			admin.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+	// 		admin.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
-			admin.email.toLowerCase().includes(searchTerm.toLowerCase()) ||
+	// 		admin.email.toLowerCase().includes(searchTerm.toLowerCase()) ||
-			admin.phone.toLowerCase().includes(searchTerm.toLowerCase()) ||
+	// 		admin.phone.toLowerCase().includes(searchTerm.toLowerCase()) ||
-			admin.registeredAddress
+	// 		admin.registeredAddress
-				.toLowerCase()
+	// 			.toLowerCase()
-				.includes(searchTerm.toLowerCase())
+	// 			.includes(searchTerm.toLowerCase())
-	);
+	// );
 
-	const categoryRows = filteredAdmins?.length
+	const categoryRows = admins?.map(
-		? filteredAdmins?.map(
 				(
 					admin: {
 						id: string;
@@ -112,67 +112,13 @@ export default function AdminList() {
 					name: admin?.name,
 					email: admin?.email,
 					phone: admin?.phone,
-					registeredAddress: admin?.registeredAddress,
+					registeredAddress: admin?.registeredAddress || "NA",
 				})
 		  )
-		: [];
+	;
 
 	return (
 		<>
-			<Typography
-				component="h2"
-				variant="h6"
-				sx={{
-					fontWeight: 600,
-					mb: { xs: 2, sm: 0 },
-					width: "100%",
-					display: "flex",
-				}}
-			>
-				Admins
-			</Typography>
-
-			<Box
-				sx={{
-					width: "100%",
-					display: "flex",
-					flexDirection: { xs: "column", sm: "row" },
-					justifyContent: "space-between",
-					alignItems: "center",
-					mb: 2, // Add margin bottom for spacing
-				}}
-			>
-				<TextField
-					variant="outlined"
-					size="small"
-					placeholder="Search..."
-					value={searchTerm}
-					onChange={(e) => setSearchTerm(e.target.value)}
-					sx={{
-						width: { xs: "100%", sm: "30%" }, 
-						marginBottom: { xs: 2, sm: 0 }, 
-					}}
-					InputProps={{
-						startAdornment: (
-							<SearchIcon
-								sx={{ color: "#202020", marginRight: 1 }}
-							/>
-						),
-					}}
-				/>
-
-				<Button
-					variant="contained"
-					size="medium"
-					sx={{
-						textAlign: "center",
-						width: { xs: "100%", sm: "auto" },
-					}}
-					onClick={handleClickOpen}
-				>
-					Add Admin
-				</Button>
-			</Box>
 			
 			<CustomTable
 				columns={categoryColumns}
@@ -183,6 +129,8 @@ export default function AdminList() {
 				viewModal={viewModal}
 				setRowData={setRowData}
 				setModalOpen={setModalOpen}
+				tableType="admin"
+				handleClickOpen={handleClickOpen}
 			/>
 			<AddEditCategoryModal
 				open={modalOpen}

src/pages/Auth/Login/index.tsx

@@ -54,7 +54,6 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 			}
 		} catch (error: any) {
 			console.log("Login failed:", error);
-			toast.error("Login failed: " + error);
 		}
 	};
 

src/pages/Dashboard/index.tsx

@@ -1,18 +1,18 @@
 // src/pages/Dashboard
 
-import * as React from 'react';
+import * as React from "react";
-import { Box, CssBaseline, Typography } from '@mui/material';
+import { Box, CssBaseline, Typography } from "@mui/material";
 
 import {
 	chartsCustomizations,
 	dataGridCustomizations,
 	datePickersCustomizations,
 	treeViewCustomizations,
-} from './theme/customizations';
+} from "./theme/customizations";
-import DashboardLayout from '../../layouts/DashboardLayout';
+import DashboardLayout from "../../layouts/DashboardLayout";
-import AppTheme from '../../shared-theme/AppTheme';
+import AppTheme from "../../shared-theme/AppTheme";
-import MainGrid from '../../components/MainGrid';
+import MainGrid from "../../components/MainGrid";
-import AdminList from '../AdminList';
+import AdminList from "../AdminList";
 
 const xThemeComponents = {
 	...chartsCustomizations,
@@ -25,36 +25,34 @@ interface DashboardProps {
 	disableCustomTheme?: boolean;
 }
 
-const Dashboard: React.FC<DashboardProps> = ({ disableCustomTheme = false }) => {
+const Dashboard: React.FC<DashboardProps> = ({
+	disableCustomTheme = false,
+}) => {
 	return (
-    <AppTheme {...{ disableCustomTheme }} themeComponents={xThemeComponents}>
+		<AppTheme
+			{...{ disableCustomTheme }}
+			themeComponents={xThemeComponents}
+		>
 			<CssBaseline enableColorScheme />
 			{!disableCustomTheme ? (
-        <><MainGrid /></>
+				<>
+					<MainGrid />
+				</>
 			) : (
 				<Box
 					sx={{
-            display: 'flex',
+						display: "flex",
-            justifyContent: 'center',
+						justifyContent: "center",
-            alignItems: 'center',
+						alignItems: "center",
-            backgroundColor:'#202020',
+						backgroundColor: "#202020",
-            height: '100vh',
+						height: "100vh",
-            textAlign: 'center',
+						textAlign: "center",
 						padding: 2,
 					}}
-        >
+				></Box>
-          
-        </Box>
 			)}
 		</AppTheme>
 	);
 };
 
 export default Dashboard;
-
-
-
-
-
-
-

src/pages/ProfilePage/index.tsx

@@ -46,7 +46,12 @@ const ProfilePage = () => {
 			<Typography variant="h4" gutterBottom>
 				Account Info
 			</Typography>
-			<Card sx={{ maxWidth: "100%", margin: "0 auto" }}>
+			<Card
+				sx={{
+					maxWidth: "100%",
+					margin: "0 auto",
+				}}
+			>
 				<CardContent>
 					<Stack direction="column" spacing={2}>
 						<Stack
@@ -62,14 +67,11 @@ const ProfilePage = () => {
 							<Box>
 								<Typography
 									variant="body1"
-									sx={{ color: "#202020" }}
+									sx={{ color: "#FFFFFF" }}
 								>
 									{user?.name || "No Admin"}
 								</Typography>
-								<Typography
+								<Typography variant="body2" color="#D9D8D8">
-									variant="body2"
-									color="text.secondary"
-								>
 									{user?.userType || "N/A"}
 								</Typography>
 							</Box>
@@ -86,11 +88,17 @@ const ProfilePage = () => {
 						>
 							<Typography
 								variant="body1"
-								sx={{ color: "#202020" }}
+								sx={{ color: "#FFFFFF" }}
 							>
 								Personal Information
 							</Typography>
-							<Link href="/edit-profile" underline="hover">
+							<Link
+								variant="body1"
+								href="/edit-profile"
+				
+								color="#52ACDF"
+								
+							>
 								Edit
 							</Link>
 						</Stack>
@@ -99,52 +107,42 @@ const ProfilePage = () => {
 							<Grid item xs={12} sm={4}>
 								<Typography
 									variant="body1"
-									sx={{ color: "#202020" }}
+									sx={{ color: "#FFFFFF" }}
 								>
-									Name:
+									Full Name:
 								</Typography>
-								<Typography
+								<Typography variant="body2" color="#D9D8D8">
-									variant="body2"
-									color="text.secondary"
-								>
 									{user?.name || "N/A"}
 								</Typography>
 							</Grid>
 							<Grid item xs={12} sm={4}>
 								<Typography
 									variant="body1"
-									sx={{ color: "#202020" }}
+									sx={{ color: "#FFFFFF" }}
 								>
 									Phone:
 								</Typography>
-								<Typography
+								<Typography variant="body2" color="#D9D8D8">
-									variant="body2"
-									color="text.secondary"
-								>
 									{user?.phone || "N/A"}
 								</Typography>
 							</Grid>
 							<Grid item xs={12} sm={4}>
 								<Typography
 									variant="body1"
-									sx={{ color: "#202020" }}
+									sx={{ color: "#FFFFFF" }}
 								>
 									Email:
 								</Typography>
-								<Typography
+								<Typography variant="body2" color="#D9D8D8">
-									variant="body2"
-									color="text.secondary"
-								>
 									{user?.email || "N/A"}
 								</Typography>
 							</Grid>
 						</Grid>
 
-
+						<Typography variant="body1" sx={{ color: "#FFFFFF" }}>
-						<Typography variant="body1" sx={{ color: "#202020" }}>
 							Bio:
 						</Typography>
-						<Typography variant="body2" color="text.secondary">
+						<Typography variant="body2" color="#D9D8D8">
 							{user?.bio || "No bio available."}
 						</Typography>
 					</Stack>

src/pages/RoleList/index.tsx

@@ -100,46 +100,6 @@ export default function RoleList() {
 
 	return (
 		<>
-			<Box
-				sx={{
-					width: "100%",
-					display: "flex",
-					flexDirection: { xs: "column", sm: "row" },
-					justifyContent: "space-between",
-					alignItems: "center",
-					mb: 2, 
-				}}
-			>
-				<TextField
-					variant="outlined"
-					size="small"
-					placeholder="Search..."
-					value={searchTerm}
-					onChange={(e) => setSearchTerm(e.target.value)}
-					sx={{
-						width: { xs: "100%", sm: "30%" },
-						marginBottom: { xs: 2, sm: 0 },
-					}}
-					InputProps={{
-						startAdornment: (
-							<SearchIcon
-								sx={{ color: "#202020", marginRight: 1 }}
-							/>
-						),
-					}}
-				/>
-				<Button
-					variant="contained"
-					size="small"
-					onClick={handleClickOpen}
-					sx={{
-						textAlign: "center",
-						width: { xs: "100%", sm: "auto" },
-					}}
-				>
-					Add Role
-				</Button>
-			</Box>
 			
 			{showPermissions ? (
 				<AddEditRolePage />
@@ -154,7 +114,8 @@ export default function RoleList() {
 					setRowData={setRowData}
 					setModalOpen={setModalOpen}
 					handleStatusToggle={handleStatusToggle}
-					tableType="roleList"
+					tableType="role"
+					handleClickOpen={handleClickOpen}
 				/>
 			)}
 		</>

src/pages/UserList/index.tsx

@@ -1,678 +1,10 @@
-// import { useEffect, useState } from "react";
-// import {
-// 	Box,
-// 	Button,
-// 	Typography,
-// 	TextField,
-// 	InputAdornment,
-// 	Paper,
-// 	Table,
-// 	TableBody,
-// 	TableCell,
-// 	TableContainer,
-// 	TableHead,
-// 	TableRow,
-// 	Pagination,
-// 	IconButton,
-// } from "@mui/material";
-// import SearchIcon from "@mui/icons-material/Search";
-// import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
-// import TuneIcon from "@mui/icons-material/Tune";
-// import { useDispatch, useSelector } from "react-redux";
-// import { userList } from "../../redux/slices/userSlice"; // Make sure userSlice exists
-// import { AppDispatch, RootState } from "../../redux/store/store";
-
-// export default function UserList() {
-// 	const [searchQuery, setSearchQuery] = useState("");
-// 	const [currentPage, setCurrentPage] = useState(1);
-// 	const usersPerPage = 10;
-
-// 	const dispatch = useDispatch<AppDispatch>();
-// 	const users = useSelector((state: RootState) => state.userReducer.users);
-
-// 	useEffect(() => {
-// 		dispatch(userList());
-// 	}, [dispatch]);
-
-// 	const staticUsers = [
-// 		{
-// 			name: "Alice Johnson",
-// 			email: "alice@example.com",
-// 			role: "User",
-// 			phone: "+1 234 567 8901",
-// 		},
-// 		{
-// 			name: "Bob Brown",
-// 			email: "bob@example.com",
-// 			role: "Admin",
-// 			phone: "+1 987 654 3210",
-// 		},
-// 		{
-// 			name: "Charlie Davis",
-// 			email: "charlie@example.com",
-// 			role: "User",
-// 			phone: "+1 312 555 7890",
-// 		},
-// 		{
-// 			name: "Alice Johnson",
-// 			email: "alice@example.com",
-// 			role: "User",
-// 			phone: "+1 234 567 8901",
-// 		},
-// 		{
-// 			name: "Bob Brown",
-// 			email: "bob@example.com",
-// 			role: "Admin",
-// 			phone: "+1 987 654 3210",
-// 		},
-// 		{
-// 			name: "Charlie Davis",
-// 			email: "charlie@example.com",
-// 			role: "User",
-// 			phone: "+1 312 555 7890",
-// 		},
-// 		{
-// 			name: "Bob Brown",
-// 			email: "bob@example.com",
-// 			role: "Admin",
-// 			phone: "+1 987 654 3210",
-// 		},
-// 		{
-// 			name: "Charlie Davis",
-// 			email: "charlie@example.com",
-// 			role: "User",
-// 			phone: "+1 312 555 7890",
-// 		},
-// 	];
-
-// 	const userData = users.length ? users : staticUsers;
-
-// 	const filteredUsers = userData.filter((user) =>
-// 		user.name.toLowerCase().includes(searchQuery.toLowerCase())
-// 	);
-
-// 	const indexOfLastUser = currentPage * usersPerPage;
-// 	const indexOfFirstUser = indexOfLastUser - usersPerPage;
-// 	const currentUsers = filteredUsers.slice(indexOfFirstUser, indexOfLastUser);
-
-// 	const handlePageChange = (event, value) => {
-// 		setCurrentPage(value);
-// 	};
-
-// 	return (
-// 		<Box
-// 			sx={{
-// 				width: "calc(100% - 48px)",
-// 				margin: "0 auto",
-// 				padding: "24px",
-// 				backgroundColor: "#1C1C1C",
-// 				borderRadius: "12px",
-// 			}}
-// 		>
-// 			<Typography
-// 				sx={{
-// 					color: "#FFFFFF",
-// 					fontWeight: 500,
-// 					fontSize: "18px",
-// 					fontFamily: "Gilroy",
-// 				}}
-// 			>
-// 				User List
-// 			</Typography>
-
-// 			{/* Search & Buttons Section */}
-// 			<Box
-// 				sx={{
-// 					display: "flex",
-// 					gap: "16px",
-// 					marginTop: "16px",
-// 					alignItems: "center",
-// 					fontFamily: "Gilroy",
-// 				}}
-// 			>
-// 				<TextField
-// 					variant="outlined"
-// 					placeholder="Search Users"
-// 					sx={{
-// 						width: "422px",
-// 						backgroundColor: "#272727",
-// 						borderRadius: "12px",
-// 						input: { color: "#FFFFFF" },
-// 						"& .MuiOutlinedInput-root": {
-// 							borderRadius: "12px",
-// 							"& fieldset": { borderColor: "#FFFFFF" },
-// 							"&:hover fieldset": { borderColor: "#FFFFFF" },
-// 							"&.Mui-focused fieldset": {
-// 								borderColor: "#52ACDF",
-// 							},
-// 						},
-// 					}}
-// 					InputProps={{
-// 						startAdornment: (
-// 							<InputAdornment position="start">
-// 								<SearchIcon sx={{ color: "#FFFFFF" }} />
-// 							</InputAdornment>
-// 						),
-// 					}}
-// 					value={searchQuery}
-// 					onChange={(e) => setSearchQuery(e.target.value)}
-// 				/>
-// 				<Box
-// 					sx={{
-// 						display: "flex",
-// 						justifyContent: "flex-end",
-// 						width: "100%",
-// 					}}
-// 				>
-// 					<Button
-// 						sx={{
-// 							backgroundColor: "#52ACDF",
-// 							color: "white",
-// 							borderRadius: "8px",
-// 							width: "184px",
-// 							"&:hover": { backgroundColor: "#439BC1" },
-// 						}}
-// 					>
-// 						Add User
-// 					</Button>
-// 				</Box>
-
-// 				<IconButton
-// 					sx={{
-// 						width: "44px",
-// 						height: "44px",
-// 						borderRadius: "8px",
-// 						backgroundColor: "#272727",
-// 						color: "#52ACDF",
-// 						"&:hover": { backgroundColor: "#333333" },
-// 					}}
-// 				>
-// 					<TuneIcon />
-// 				</IconButton>
-// 			</Box>
-
-// 			{/* Table Section */}
-// 			<TableContainer
-// 				component={Paper}
-// 				sx={{
-// 					marginTop: "24px",
-// 					backgroundColor: "#1C1C1C",
-// 					borderRadius: "12px",
-// 					overflow: "hidden",
-// 				}}
-// 			>
-// 				<Table>
-// 					<TableHead sx={{ backgroundColor: "#272727" }}>
-// 						<TableRow>
-// 							{["Name", "Email", "Role", "Phone", "Action"].map(
-// 								(header) => (
-// 									<TableCell
-// 										key={header}
-// 										sx={{
-// 											color: "#FFFFFF",
-// 											fontWeight: "bold",
-// 										}}
-// 									>
-// 										{header}
-// 									</TableCell>
-// 								)
-// 							)}
-// 						</TableRow>
-// 					</TableHead>
-// 					<TableBody>
-// 						{currentUsers.map((user, index) => (
-// 							<TableRow
-// 								key={index}
-// 								sx={{ backgroundColor: "#1C1C1C" }}
-// 							>
-// 								<TableCell
-// 									sx={{
-// 										color: "#FFFFFF",
-// 										borderBottom: "1px solid #2A2A2A",
-// 									}}
-// 								>
-// 									{user.name}
-// 								</TableCell>
-// 								<TableCell
-// 									sx={{
-// 										color: "#FFFFFF",
-// 										borderBottom: "1px solid #2A2A2A",
-// 									}}
-// 								>
-// 									{user.email}
-// 								</TableCell>
-// 								<TableCell
-// 									sx={{
-// 										color: "#FFFFFF",
-// 										borderBottom: "1px solid #2A2A2A",
-// 									}}
-// 								>
-// 									{user.role}
-// 								</TableCell>
-// 								<TableCell
-// 									sx={{
-// 										color: "#FFFFFF",
-// 										borderBottom: "1px solid #2A2A2A",
-// 									}}
-// 								>
-// 									{user.phone}
-// 								</TableCell>
-// 								<TableCell
-// 									sx={{
-// 										color: "#FFFFFF",
-// 										borderBottom: "1px solid #2A2A2A",
-// 									}}
-// 								>
-// 									<IconButton size="small">
-// 										<MoreHorizIcon
-// 											sx={{ color: "#FFFFFF" }}
-// 										/>
-// 									</IconButton>
-// 								</TableCell>
-// 							</TableRow>
-// 						))}
-// 					</TableBody>
-// 				</Table>
-// 			</TableContainer>
-
-// 			{/* Pagination */}
-// 			<Box
-// 				sx={{
-// 					display: "flex",
-// 					justifyContent: "flex-end",
-// 					alignItems: "center",
-// 					marginTop: "16px",
-// 				}}
-// 			>
-// 				<Typography
-// 					sx={{ color: "white", fontSize: "16px", fontWeight: 500 }}
-// 				>
-// 					Page Number :
-// 				</Typography>
-// 				<Pagination
-// 					count={Math.ceil(filteredUsers.length / usersPerPage)}
-// 					page={currentPage}
-// 					onChange={handlePageChange}
-// 					siblingCount={0}
-// 					boundaryCount={0}
-// 					sx={{
-// 						"& .MuiPaginationItem-root": {
-// 							color: "white",
-// 							borderRadius: "0px",
-// 						},
-// 						"& .MuiPaginationItem-page.Mui-selected": {
-// 							backgroundColor: "transparent",
-// 							fontWeight: "bold",
-// 							color: "#FFFFFF",
-// 						},
-// 					}}
-// 				/>
-// 			</Box>
-// 		</Box>
-// 	);
-// }
-// import { useEffect, useState } from "react";
-// import {
-// 	Box,
-// 	Button,
-// 	Typography,
-// 	TextField,
-// 	InputAdornment,
-// 	Paper,
-// 	Table,
-// 	TableBody,
-// 	TableCell,
-// 	TableContainer,
-// 	TableHead,
-// 	TableRow,
-// 	Pagination,
-// 	IconButton,
-// } from "@mui/material";
-// import SearchIcon from "@mui/icons-material/Search";
-// import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
-// import TuneIcon from "@mui/icons-material/Tune";
-// import { useDispatch, useSelector } from "react-redux";
-// import { adminList } from "../../redux/slices/adminSlice";
-// import { AppDispatch, RootState } from "../../redux/store/store";
-
-// export default function AdminList() {
-// 	const [searchQuery, setSearchQuery] = useState("");
-// 	const [currentPage, setCurrentPage] = useState(1);
-// 	const adminsPerPage = 10;
-
-// 	const dispatch = useDispatch<AppDispatch>();
-// 	const admins = useSelector((state: RootState) => state.adminReducer.admins);
-
-// 	useEffect(() => {
-// 		dispatch(adminList());
-// 	}, [dispatch]);
-
-// 	const staticAdmins = [
-// 		{
-// 			name: "John Doe",
-// 			location: "New York",
-// 			managerAssigned: "Alice Johnson",
-// 			vehicle: "Tesla Model S",
-// 			phone: "+1 234 567 8901",
-// 		},
-// 		{
-// 			name: "Jane Smith",
-// 			location: "Los Angeles",
-// 			managerAssigned: "Bob Brown",
-// 			vehicle: "Ford F-150",
-// 			phone: "+1 987 654 3210",
-// 		},
-// 		{
-// 			name: "Michael Brown",
-// 			location: "Chicago",
-// 			managerAssigned: "Sarah Lee",
-// 			vehicle: "Chevrolet Bolt",
-// 			phone: "+1 312 555 7890",
-// 		},
-// 		{
-// 			name: "Emily Davis",
-// 			location: "Houston",
-// 			managerAssigned: "Tom Wilson",
-// 			vehicle: "Nissan Leaf",
-// 			phone: "+1 713 444 5678",
-// 		},
-// 		{
-// 			name: "Daniel Martinez",
-// 			location: "Phoenix",
-// 			managerAssigned: "Jessica White",
-// 			vehicle: "BMW i3",
-// 			phone: "+1 602 999 4321",
-// 		},
-// 		{
-// 			name: "Sophia Miller",
-// 			location: "Philadelphia",
-// 			managerAssigned: "Mark Adams",
-// 			vehicle: "Audi e-tron",
-// 			phone: "+1 215 777 6543",
-// 		},
-// 		{
-// 			name: "James Anderson",
-// 			location: "San Antonio",
-// 			managerAssigned: "Emma Thomas",
-// 			vehicle: "Hyundai Kona EV",
-// 			phone: "+1 210 321 8765",
-// 		},
-// 		{
-// 			name: "James Anderson",
-// 			location: "San Antonio",
-// 			managerAssigned: "Emma Thomas",
-// 			vehicle: "Hyundai Kona EV",
-// 			phone: "+1 210 321 8765",
-// 		},
-// 	];
-
-// 	const adminData = admins.length ? admins : staticAdmins;
-
-// 	const filteredAdmins = adminData.filter((admin) =>
-// 		admin.name.toLowerCase().includes(searchQuery.toLowerCase())
-// 	);
-
-// 	const indexOfLastAdmin = currentPage * adminsPerPage;
-// 	const indexOfFirstAdmin = indexOfLastAdmin - adminsPerPage;
-// 	const currentAdmins = filteredAdmins.slice(
-// 		indexOfFirstAdmin,
-// 		indexOfLastAdmin
-// 	);
-
-// 	const handlePageChange = (event, value) => {
-// 		setCurrentPage(value);
-// 	};
-
-// 	return (
-// 		<Box
-// 			sx={{
-// 				width: "calc(100% - 48px)",
-// 				margin: "0 auto",
-// 				padding: "24px",
-// 				backgroundColor: "#1C1C1C",
-// 				borderRadius: "12px",
-// 			}}
-// 		>
-// 			<Typography
-// 				sx={{
-// 					color: "#FFFFFF",
-// 					fontWeight: 500,
-// 					fontSize: "18px",
-// 					fontFamily: "Gilroy",
-// 				}}
-// 			>
-// 				Charge stations
-// 			</Typography>
-
-// 			{/* Search & Buttons Section */}
-// 			<Box
-// 				sx={{
-// 					display: "flex",
-// 					gap: "16px",
-// 					marginTop: "16px",
-// 					alignItems: "center",
-// 					fontFamily: "Gilroy",
-// 				}}
-// 			>
-// 				<TextField
-// 					variant="outlined"
-// 					placeholder="Search Charge stations"
-// 					sx={{
-// 						width: "422px",
-// 						backgroundColor: "#272727",
-
-// 						borderRadius: "12px",
-// 						input: { color: "#FFFFFF" },
-// 						"& .MuiOutlinedInput-root": {
-// 							borderRadius: "12px",
-// 							"& fieldset": { borderColor: "#FFFFFF" },
-// 							"&:hover fieldset": { borderColor: "#FFFFFF" },
-// 							"&.Mui-focused fieldset": {
-// 								borderColor: "#52ACDF",
-// 							},
-// 						},
-// 					}}
-// 					InputProps={{
-// 						startAdornment: (
-// 							<InputAdornment position="start">
-// 								<SearchIcon sx={{ color: "#FFFFFF" }} />
-// 							</InputAdornment>
-// 						),
-// 					}}
-// 					value={searchQuery}
-// 					onChange={(e) => setSearchQuery(e.target.value)}
-// 				/>
-// 				<Box
-// 					sx={{
-// 						display: "flex",
-// 						justifyContent: "flex-end",
-// 						width: "100%",
-// 					}}
-// 				>
-// 					<Button
-// 						sx={{
-// 							backgroundColor: "#52ACDF",
-// 							color: "white",
-// 							borderRadius: "8px",
-// 							width: "184px",
-// 							"&:hover": {
-// 								backgroundColor: "#439BC1",
-// 							},
-// 						}}
-// 					>
-// 						Add Charge Stations
-// 					</Button>
-// 				</Box>
-
-// 				<IconButton
-// 					sx={{
-// 						width: "44px",
-// 						height: "44px",
-// 						borderRadius: "8px",
-// 						backgroundColor: "#272727",
-// 						color: "#52ACDF",
-// 						"&:hover": { backgroundColor: "#333333" },
-// 					}}
-// 				>
-// 					<TuneIcon />
-// 				</IconButton>
-// 			</Box>
-
-// 			{/* Table Section */}
-// 			<TableContainer
-// 				component={Paper}
-// 				sx={{
-// 					marginTop: "24px",
-// 					backgroundColor: "#1C1C1C",
-// 					borderRadius: "12px",
-// 					overflow: "hidden",
-// 				}}
-// 			>
-// 				<Table>
-// 					<TableHead sx={{ backgroundColor: "#272727" }}>
-// 						<TableRow>
-// 							{[
-// 								"Name",
-// 								"Location",
-// 								"Manager Assigned",
-// 								"Vehicle",
-// 								"Phone Number",
-// 								"Action",
-// 							].map((header) => (
-// 								<TableCell
-// 									key={header}
-// 									sx={{
-// 										color: "#FFFFFF",
-// 										fontWeight: "bold",
-// 									}}
-// 								>
-// 									{header}
-// 								</TableCell>
-// 							))}
-// 						</TableRow>
-// 					</TableHead>
-// 					<TableBody>
-// 						{currentAdmins.map((admin, index) => (
-// 							<TableRow
-// 								key={index}
-// 								sx={{ backgroundColor: "#1C1C1C" }}
-// 							>
-// 								<TableCell
-// 									sx={{
-// 										color: "#FFFFFF",
-// 										borderBottom: "1px solid #2A2A2A",
-// 									}}
-// 								>
-// 									{admin.name}
-// 								</TableCell>
-// 								<TableCell
-// 									sx={{
-// 										color: "#FFFFFF",
-// 										borderBottom: "1px solid #2A2A2A",
-// 									}}
-// 								>
-// 									{admin.location || "N/A"}
-// 								</TableCell>
-// 								<TableCell
-// 									sx={{
-// 										color: "#FFFFFF",
-// 										borderBottom: "1px solid #2A2A2A",
-// 									}}
-// 								>
-// 									{admin.managerAssigned || "N/A"}
-// 								</TableCell>
-// 								<TableCell
-// 									sx={{
-// 										color: "#FFFFFF",
-// 										borderBottom: "1px solid #2A2A2A",
-// 									}}
-// 								>
-// 									{admin.vehicle || "N/A"}{" "}
-// 									<Typography
-// 										component="span"
-// 										sx={{
-// 											color: "#52ACDF",
-// 											cursor: "pointer",
-// 											textDecoration: "none",
-// 											"&:hover": {
-// 												textDecoration: "underline",
-// 											},
-// 										}}
-// 									>
-// 										+6 more
-// 									</Typography>
-// 								</TableCell>
-// 								<TableCell
-// 									sx={{
-// 										color: "#FFFFFF",
-// 										borderBottom: "1px solid #2A2A2A",
-// 									}}
-// 								>
-// 									{admin.phone}
-// 								</TableCell>
-// 								<TableCell
-// 									sx={{
-// 										color: "#FFFFFF",
-// 										borderBottom: "1px solid #2A2A2A",
-// 									}}
-// 								>
-// 									<IconButton size="small">
-// 										<MoreHorizIcon
-// 											sx={{ color: "#FFFFFF" }}
-// 										/>
-// 									</IconButton>
-// 								</TableCell>
-// 							</TableRow>
-// 						))}
-// 					</TableBody>
-// 				</Table>
-// 			</TableContainer>
-
-// 			{/* Pagination */}
-// 			<Box
-// 				sx={{
-// 					display: "flex",
-// 					justifyContent: "flex-end",
-// 					alignItems: "center",
-// 					marginTop: "16px",
-// 					width: "100%",
-// 					gap: "8px",
-// 				}}
-// 			>
-// 				<Typography
-// 					sx={{ color: "white", fontSize: "16px", fontWeight: 500 }}
-// 				>
-// 					Page Number :
-// 				</Typography>
-// 				<Pagination
-// 					count={Math.ceil(filteredAdmins.length / adminsPerPage)}
-// 					page={currentPage}
-// 					onChange={handlePageChange}
-// 					siblingCount={0}
-// 					boundaryCount={0}
-// 					sx={{
-// 						"& .MuiPaginationItem-root": {
-// 							color: "white",
-// 							borderRadius: "0px",
-// 						},
-// 						"& .MuiPaginationItem-page.Mui-selected": {
-// 							backgroundColor: "transparent",
-// 							fontWeight: "bold",
-// 							color: "#FFFFFF",
-// 						},
-// 					}}
-// 				/>
-// 			</Box>
-// 		</Box>
-// 	);
-// }
 import React, { useEffect, useState } from "react";
 import { Box, Button, Typography } from "@mui/material";
 import AddEditCategoryModal from "../../components/AddEditCategoryModal";
 import { useForm } from "react-hook-form";
 import CustomTable, { Column } from "../../components/CustomTable";
 import { useDispatch, useSelector } from "react-redux";
-import { createUser, userList } from "../../redux/slices/userSlice";
+import { createUser, updateUser, userList } from "../../redux/slices/userSlice";
 import { AppDispatch, RootState } from "../../redux/store/store";
 import { string } from "prop-types";
 import { adminList, updateAdmin } from "../../redux/slices/adminSlice";
@@ -709,7 +41,7 @@ export default function UserList() {
 		name: string;
 		email: string;
 		phone: string;
-		registeredAddress: string;
+		
 	}) => {
 		try {
 			await dispatch(createUser(data));
@@ -724,20 +56,19 @@ export default function UserList() {
 		id: string,
 		name: string,
 		email: string,
-		phone: string,
+		phone: string
-		registeredAddress: string
 	) => {
 		try {
 			await dispatch(
-				updateAdmin({
+				updateUser({
 					id,
 					name,
 					email,
 					phone,
-					registeredAddress,
+					
 				})
 			);
-			await dispatch(adminList());
+			await dispatch(userList());
 		} catch (error) {
 			console.error("Update failed", error);
 		}
@@ -784,34 +115,6 @@ export default function UserList() {
 
 	return (
 		<>
-			<Box
-				sx={{
-					width: "100%",
-					maxWidth: {
-						sm: "100%",
-						display: "flex",
-						justifyContent: "space-between",
-						alignItems: "center",
-					},
-				}}
-			>
-				<Typography
-					component="h2"
-					variant="h6"
-					sx={{ mt: 2, fontWeight: 600 }}
-				>
-					Users
-				</Typography>
-				<Button
-					variant="contained"
-					size="medium"
-					sx={{ textAlign: "right" }}
-					onClick={handleClickOpen}
-				>
-					Add User
-				</Button>
-			</Box>
-
 			<CustomTable
 				columns={categoryColumns}
 				rows={categoryRows}
@@ -821,6 +124,8 @@ export default function UserList() {
 				viewModal={viewModal}
 				setRowData={setRowData}
 				setModalOpen={setModalOpen}
+				tableType="user"
+				handleClickOpen={handleClickOpen}
 			/>
 			<AddUserModal
 				open={modalOpen}

src/pages/VehicleList/index.tsx

@@ -152,55 +152,6 @@ export default function VehicleList() {
 	return (
 		<>
 			
-				{/* Title and Add Category button */}
-				<Typography
-					component="h2"
-					variant="h6"
-					sx={{ mt: 2, fontWeight: 600 }}
-				>
-					Vehicles
-				</Typography>
-        <Box
-				sx={{
-					width: "100%",
-					display: "flex",
-					flexDirection: { xs: "column", sm: "row" },
-					justifyContent: "space-between",
-					alignItems: "center",
-					mb: 2, // Add margin bottom for spacing
-				}}
-			>
-				<TextField
-					variant="outlined"
-					size="small"
-					placeholder="Search..."
-					value={searchTerm}
-					onChange={(e) => setSearchTerm(e.target.value)}
-					sx={{
-						width: { xs: "100%", sm: "30%" }, 
-						marginBottom: { xs: 2, sm: 0 }, 
-					}}
-					InputProps={{
-						startAdornment: (
-							<SearchIcon
-								sx={{ color: "#202020", marginRight: 1 }}
-							/>
-						),
-					}}
-				/>
-				<Button
-                  variant="contained"
-                  size="medium"
-                  sx={{
-                    textAlign: "center",
-                    width: { xs: "100%", sm: "auto" },
-                  }}
-                  onClick={handleClickOpen}
-                >
-                  Add Vehicle
-                </Button>
-        </Box>
-			
 
 			<CustomTable
 				columns={categoryColumns}
@@ -211,6 +162,8 @@ export default function VehicleList() {
 				viewModal={viewModal}
 				setRowData={setRowData}
 				setModalOpen={setModalOpen}
+				tableType="vehicle"
+				handleClickOpen={handleClickOpen}
 			/>
 			{/* <AddEditCategoryModal
         open={modalOpen}

src/redux/slices/VehicleSlice.ts

@@ -120,11 +120,8 @@ const vehicleSlice = createSlice({
 				state.loading = true;
 			})
 			.addCase(updateVehicle.fulfilled, (state, action) => {
-				const updateVehicle = action.payload;
-				state.vehicles = state?.vehicles?.map((vehicle) =>
-					vehicle?.id === updateVehicle?.id ? updateVehicle : vehicle
-				);
 				state.loading = false;
+				state.error = action.payload;
 			})
 			.addCase(updateVehicle.rejected, (state) => {
 				state.loading = false;

src/redux/slices/adminSlice.ts

@@ -150,10 +150,7 @@ const adminSlice = createSlice({
 				state.isLoading = true;
 			})
 			.addCase(updateAdmin.fulfilled, (state, action) => {
-				const updatedAdmin = action.payload;
+				
-				state.admins = state?.admins?.map((admin) =>
-					admin?.id === updatedAdmin?.id ? updatedAdmin : admin
-				);
 				state.isLoading = false;
 			})
 			.addCase(updateAdmin.rejected, (state) => {

src/redux/slices/userSlice.ts

@@ -5,7 +5,7 @@ import { toast } from "sonner";
 
 // Define TypeScript types
 interface User {
-	id: number;
+	id: string;
 	name: string;
 	email: string;
 	phone?: string;
@@ -55,12 +55,8 @@ export const createUser = createAsyncThunk<
 	{
 		name: string;
 		email: string;
-		password: string;
 		phone: string;
 
-		// location?: string;
-		// managerAssigned?: string;
-		// vehicle?: string;
 	},
 	{ rejectValue: string }
 >("/CreateUser", async (data, { rejectWithValue }) => {
@@ -74,6 +70,23 @@ export const createUser = createAsyncThunk<
 	}
 });
 
+
+
+export const updateUser = createAsyncThunk(
+	"updateUser",
+	async ({ id, ...userData }: User, { rejectWithValue }) => {
+		try {
+			const response = await http.put(`/${id}/update-user`, userData);
+			toast.success("User updated successfully");
+			return response?.data;
+		} catch (error: any) {
+			toast.error("Error updating the user: " + error);
+			return rejectWithValue(
+				error.response?.data?.message || "An error occurred"
+			);
+		}
+	}
+);
 const userSlice = createSlice({
 	name: "fetchUsers",
 	initialState,
@@ -111,7 +124,16 @@ const userSlice = createSlice({
 				(state, action: PayloadAction<string | undefined>) => {
 					state.loading = false;
 				}
-			);
+			)
+			.addCase(updateUser.pending, (state) => {
+				state.loading = true;
+			})
+			.addCase(updateUser.fulfilled, (state, action) => {
+				state.loading = false;
+			})
+			.addCase(updateUser.rejected, (state) => {
+				state.loading = false;
+			});
 	},
 });
 

src/shared-theme/AppTheme.tsx

@@ -1,16 +1,16 @@
-import * as React from 'react';
+import * as React from "react";
-import { ThemeProvider, Theme, createTheme } from '@mui/material/styles';
+import { ThemeProvider, Theme, createTheme } from "@mui/material/styles";
-import type { ThemeOptions } from '@mui/material/styles';
+import type { ThemeOptions } from "@mui/material/styles";
-import { inputsCustomizations } from './customizations/inputs';
+import { inputsCustomizations } from "./customizations/inputs";
-import { dataDisplayCustomizations } from './customizations/dataDisplay';
+import { dataDisplayCustomizations } from "./customizations/dataDisplay";
-import { feedbackCustomizations } from './customizations/feedback';
+import { feedbackCustomizations } from "./customizations/feedback";
-import { navigationCustomizations } from './customizations/navigation';
+import { navigationCustomizations } from "./customizations/navigation";
-import { surfacesCustomizations } from './customizations/surfaces';
+import { surfacesCustomizations } from "./customizations/surfaces";
-import { colorSchemes, typography, shadows, shape } from './themePrimitives';
+import { colorSchemes, typography, shadows, shape } from "./themePrimitives";
 
-declare module '@mui/styles/defaultTheme' {
+declare module "@mui/styles/defaultTheme" {
 	interface DefaultTheme extends Theme {
-    vars: object
+		vars: object;
 	}
 }
 
@@ -20,7 +20,7 @@ interface AppThemeProps {
 	 * This is for the docs site. You can ignore it or remove it.
 	 */
 	disableCustomTheme?: boolean;
-  themeComponents?: ThemeOptions['components'];
+	themeComponents?: ThemeOptions["components"];
 }
 
 export default function AppTheme(props: AppThemeProps) {
@@ -29,12 +29,21 @@ export default function AppTheme(props: AppThemeProps) {
 		return disableCustomTheme
 			? {}
 			: createTheme({
-        // For more details about CSS variables configuration, see https://mui.com/material-ui/customization/css-theme-variables/configuration/
+					palette: {
-        cssVariables: {
+						mode: "dark", // Enforcing dark mode across the app
-          colorSchemeSelector: 'data-mui-color-scheme',
+						background: {
-          cssVarPrefix: 'template',
+							default: "#111111", // Dark background color
+							paper: "#1e1e1e", // Darker background for cards, containers, etc.
+						},
+						text: {
+							primary: "#ffffff", // White text for readability
+							secondary: "#b0b0b0", // Lighter secondary text
+						},
+					},
+					cssVariables: {
+						colorSchemeSelector: "data-mui-color-scheme",
+						cssVarPrefix: "template",
 					},
-        colorSchemes, // Recently added in v6 for building light & dark mode app, see https://mui.com/material-ui/customization/palette/#color-schemes
 					typography,
 					shadows,
 					shape,
@@ -48,9 +57,11 @@ export default function AppTheme(props: AppThemeProps) {
 					},
 			  });
 	}, [disableCustomTheme, themeComponents]);
+
 	if (disableCustomTheme) {
 		return <React.Fragment>{children}</React.Fragment>;
 	}
+
 	return (
 		<ThemeProvider theme={theme} disableTransitionOnChange>
 			{children}

src/shared-theme/customizations/surfaces.js

@@ -67,7 +67,7 @@ export const surfacesCustomizations = {
           border: `1px solid ${(theme.vars || theme).palette.divider}`,
           boxShadow: 'none',
           ...theme.applyStyles('dark', {
-            backgroundColor: gray[800],
+            backgroundColor:"#1C1C1C",
           }),
           variants: [
             {

src/shared-theme/themePrimitives.js

@@ -1,79 +1,79 @@
-import { createTheme, alpha } from '@mui/material/styles';
+import { createTheme, alpha } from "@mui/material/styles";
 
 const defaultTheme = createTheme();
 
 const customShadows = [...defaultTheme.shadows];
 
 export const brand = {
-  50: 'hsl(210, 100%, 95%)',
+	50: "hsl(210, 100%, 95%)",
-  100: 'hsl(210, 100%, 92%)',
+	100: "hsl(210, 100%, 92%)",
-  200: 'hsl(210, 100%, 80%)',
+	200: "hsl(210, 100%, 80%)",
-  300: 'hsl(210, 100%, 65%)',
+	300: "hsl(210, 100%, 65%)",
-  400: 'hsl(210, 98%, 48%)',
+	400: "hsl(210, 98%, 48%)",
-  500: 'hsl(210, 98%, 42%)',
+	500: "hsl(210, 98%, 42%)",
-  600: 'hsl(210, 98%, 55%)',
+	600: "hsl(210, 98%, 55%)",
-  700: 'hsl(210, 100%, 35%)',
+	700: "hsl(210, 100%, 35%)",
-  800: 'hsl(210, 100%, 16%)',
+	800: "hsl(210, 100%, 16%)",
-  900: 'hsl(210, 100%, 21%)',
+	900: "hsl(210, 100%, 21%)",
 };
 
 export const gray = {
-  50: 'hsl(220, 35%, 97%)',
+	50: "hsl(220, 35%, 97%)",
-  100: 'hsl(220, 30%, 94%)',
+	100: "hsl(220, 30%, 94%)",
-  200: 'hsl(220, 20%, 88%)',
+	200: "hsl(220, 20%, 88%)",
-  300: 'hsl(220, 20%, 80%)',
+	300: "hsl(220, 20%, 80%)",
-  400: 'hsl(220, 20%, 65%)',
+	400: "hsl(220, 20%, 65%)",
-  500: 'hsl(220, 20%, 42%)',
+	500: "hsl(220, 20%, 42%)",
-  600: 'hsl(220, 20%, 35%)',
+	600: "hsl(220, 20%, 35%)",
-  700: 'hsl(220, 20%, 25%)',
+	700: "hsl(220, 20%, 25%)",
-  800: 'hsl(220, 30%, 6%)',
+	800: "hsl(220, 30%, 6%)",
-  900: 'hsl(220, 35%, 3%)',
+	900: "hsl(220, 35%, 3%)",
 };
 
 export const green = {
-  50: 'hsl(120, 80%, 98%)',
+	50: "hsl(120, 80%, 98%)",
-  100: 'hsl(120, 75%, 94%)',
+	100: "hsl(120, 75%, 94%)",
-  200: 'hsl(120, 75%, 87%)',
+	200: "hsl(120, 75%, 87%)",
-  300: 'hsl(120, 61%, 77%)',
+	300: "hsl(120, 61%, 77%)",
-  400: 'hsl(120, 44%, 53%)',
+	400: "hsl(120, 44%, 53%)",
-  500: 'hsl(120, 59%, 30%)',
+	500: "hsl(120, 59%, 30%)",
-  600: 'hsl(120, 70%, 25%)',
+	600: "hsl(120, 70%, 25%)",
-  700: 'hsl(120, 75%, 16%)',
+	700: "hsl(120, 75%, 16%)",
-  800: 'hsl(120, 84%, 10%)',
+	800: "hsl(120, 84%, 10%)",
-  900: 'hsl(120, 87%, 6%)',
+	900: "hsl(120, 87%, 6%)",
 };
 
 export const orange = {
-  50: 'hsl(45, 100%, 97%)',
+	50: "hsl(45, 100%, 97%)",
-  100: 'hsl(45, 92%, 90%)',
+	100: "hsl(45, 92%, 90%)",
-  200: 'hsl(45, 94%, 80%)',
+	200: "hsl(45, 94%, 80%)",
-  300: 'hsl(45, 90%, 65%)',
+	300: "hsl(45, 90%, 65%)",
-  400: 'hsl(45, 90%, 40%)',
+	400: "hsl(45, 90%, 40%)",
-  500: 'hsl(45, 90%, 35%)',
+	500: "hsl(45, 90%, 35%)",
-  600: 'hsl(45, 91%, 25%)',
+	600: "hsl(45, 91%, 25%)",
-  700: 'hsl(45, 94%, 20%)',
+	700: "hsl(45, 94%, 20%)",
-  800: 'hsl(45, 95%, 16%)',
+	800: "hsl(45, 95%, 16%)",
-  900: 'hsl(45, 93%, 12%)',
+	900: "hsl(45, 93%, 12%)",
 };
 
 export const red = {
-  50: 'hsl(0, 100%, 97%)',
+	50: "hsl(0, 100%, 97%)",
-  100: 'hsl(0, 92%, 90%)',
+	100: "hsl(0, 92%, 90%)",
-  200: 'hsl(0, 94%, 80%)',
+	200: "hsl(0, 94%, 80%)",
-  300: 'hsl(0, 90%, 65%)',
+	300: "hsl(0, 90%, 65%)",
-  400: 'hsl(0, 90%, 40%)',
+	400: "hsl(0, 90%, 40%)",
-  500: 'hsl(0, 90%, 30%)',
+	500: "hsl(0, 90%, 30%)",
-  600: 'hsl(0, 91%, 25%)',
+	600: "hsl(0, 91%, 25%)",
-  700: 'hsl(0, 94%, 18%)',
+	700: "hsl(0, 94%, 18%)",
-  800: 'hsl(0, 95%, 12%)',
+	800: "hsl(0, 95%, 12%)",
-  900: 'hsl(0, 93%, 6%)',
+	900: "hsl(0, 93%, 6%)",
 };
 
 export const getDesignTokens = (mode) => {
 	customShadows[1] =
-    mode === 'dark'
+		mode === "dark"
-      ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px'
+			? "hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px"
-      : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px';
+			: "hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px";
 
 	return {
 		palette: {
@@ -83,7 +83,7 @@ export const getDesignTokens = (mode) => {
 				main: brand[400],
 				dark: brand[700],
 				contrastText: brand[50],
-        ...(mode === 'dark' && {
+				...(mode === "dark" && {
 					contrastText: brand[50],
 					light: brand[300],
 					main: brand[400],
@@ -95,7 +95,7 @@ export const getDesignTokens = (mode) => {
 				main: brand[300],
 				dark: brand[600],
 				contrastText: gray[50],
-        ...(mode === 'dark' && {
+				...(mode === "dark" && {
 					contrastText: brand[300],
 					light: brand[500],
 					main: brand[700],
@@ -106,7 +106,7 @@ export const getDesignTokens = (mode) => {
 				light: orange[300],
 				main: orange[400],
 				dark: orange[800],
-        ...(mode === 'dark' && {
+				...(mode === "dark" && {
 					light: orange[400],
 					main: orange[500],
 					dark: orange[700],
@@ -116,7 +116,7 @@ export const getDesignTokens = (mode) => {
 				light: red[300],
 				main: red[400],
 				dark: red[800],
-        ...(mode === 'dark' && {
+				...(mode === "dark" && {
 					light: red[400],
 					main: red[500],
 					dark: red[700],
@@ -126,7 +126,7 @@ export const getDesignTokens = (mode) => {
 				light: green[300],
 				main: green[400],
 				dark: green[800],
-        ...(mode === 'dark' && {
+				...(mode === "dark" && {
 					light: green[400],
 					main: green[500],
 					dark: green[700],
@@ -135,32 +135,36 @@ export const getDesignTokens = (mode) => {
 			grey: {
 				...gray,
 			},
-      divider: mode === 'dark' ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4),
+			divider:
+				mode === "dark" ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4),
 			background: {
-        default: 'hsl(0, 0%, 99%)',
+				default: "hsl(0, 0%, 99%)",
-        paper: 'hsl(220, 35%, 97%)',
+				paper: "hsl(220, 35%, 97%)",
-        ...(mode === 'dark' && { default: gray[900], paper: 'hsl(220, 30%, 7%)' }),
+				...(mode === "dark" && {
+					default: gray[900],
+					paper: "hsl(220, 30%, 7%)",
+				}),
 			},
 			text: {
 				primary: gray[800],
 				secondary: gray[600],
 				warning: orange[400],
-        ...(mode === 'dark' && {
+				...(mode === "dark" && {
-          primary: 'hsl(0, 0%, 100%)',
+					primary: "hsl(0, 0%, 100%)",
 					secondary: gray[400],
 				}),
 			},
 			action: {
 				hover: alpha(gray[200], 0.2),
 				selected: `${alpha(gray[200], 0.3)}`,
-        ...(mode === 'dark' && {
+				...(mode === "dark" && {
 					hover: alpha(gray[600], 0.2),
 					selected: alpha(gray[600], 0.3),
 				}),
 			},
 		},
 		typography: {
-      fontFamily: 'Inter, sans-serif',
+			fontFamily: "Gilory",
 			h1: {
 				fontSize: defaultTheme.typography.pxToRem(48),
 				fontWeight: 600,
@@ -250,8 +254,8 @@ export const colorSchemes = {
 			},
 			divider: alpha(gray[300], 0.4),
 			background: {
-        default: 'hsl(0, 0%, 99%)',
+				default: "hsl(0, 0%, 99%)",
-        paper: 'hsl(220, 35%, 97%)',
+				paper: "hsl(220, 35%, 97%)",
 			},
 			text: {
 				primary: gray[800],
@@ -263,7 +267,7 @@ export const colorSchemes = {
 				selected: `${alpha(gray[200], 0.3)}`,
 			},
 			baseShadow:
-        'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px',
+				"hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px",
 		},
 	},
 	dark: {
@@ -301,10 +305,10 @@ export const colorSchemes = {
 			divider: alpha(gray[700], 0.6),
 			background: {
 				default: gray[900],
-        paper: 'hsl(220, 30%, 7%)',
+				paper: "hsl(220, 30%, 7%)",
 			},
 			text: {
-        primary: 'hsl(0, 0%, 100%)',
+				primary: "hsl(0, 0%, 100%)",
 				secondary: gray[400],
 			},
 			action: {
@@ -312,13 +316,13 @@ export const colorSchemes = {
 				selected: alpha(gray[600], 0.3),
 			},
 			baseShadow:
-        'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px',
+				"hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px",
 		},
 	},
 };
 
 export const typography = {
-  fontFamily: 'Inter, sans-serif',
+	fontFamily: "Gilory",
 	h1: {
 		fontSize: defaultTheme.typography.pxToRem(48),
 		fontWeight: 600,
@@ -372,8 +376,8 @@ export const shape = {
 };
 
 const defaultShadows = [
-  'none',
+	"none",
-  'var(--template-palette-baseShadow)',
+	"var(--template-palette-baseShadow)",
 	...defaultTheme.shadows.slice(2),
 ];
 

src/shared-theme/themePrimitives.ts

@@ -1,11 +1,11 @@
-import { createTheme, alpha, PaletteMode, Shadows } from '@mui/material/styles';
+import { createTheme, alpha, PaletteMode, Shadows } from "@mui/material/styles";
 
-declare module '@mui/material/Paper' {
+declare module "@mui/material/Paper" {
 	interface PaperPropsVariantOverrides {
 		highlighted: true;
 	}
 }
-declare module '@mui/material/styles/createPalette' {
+declare module "@mui/material/styles/createPalette" {
 	interface ColorRange {
 		50: string;
 		100: string;
@@ -31,75 +31,75 @@ const defaultTheme = createTheme();
 const customShadows: Shadows = [...defaultTheme.shadows];
 
 export const brand = {
-  50: 'hsl(210, 100%, 95%)',
+	50: "hsl(210, 100%, 95%)",
-  100: 'hsl(210, 100%, 92%)',
+	100: "hsl(210, 100%, 92%)",
-  200: 'hsl(210, 100%, 80%)',
+	200: "hsl(210, 100%, 80%)",
-  300: 'hsl(210, 100%, 65%)',
+	300: "hsl(210, 100%, 65%)",
-  400: 'hsl(210, 98%, 48%)',
+	400: "hsl(210, 98%, 48%)",
-  500: 'hsl(210, 98%, 42%)',
+	500: "hsl(210, 98%, 42%)",
-  600: 'hsl(210, 98%, 55%)',
+	600: "hsl(210, 98%, 55%)",
-  700: 'hsl(210, 100%, 35%)',
+	700: "hsl(210, 100%, 35%)",
-  800: 'hsl(210, 100%, 16%)',
+	800: "hsl(210, 100%, 16%)",
-  900: 'hsl(210, 100%, 21%)',
+	900: "hsl(210, 100%, 21%)",
 };
 
 export const gray = {
-  50: 'hsl(220, 35%, 97%)',
+	50: "hsl(220, 35%, 97%)",
-  100: 'hsl(220, 30%, 94%)',
+	100: "hsl(220, 30%, 94%)",
-  200: 'hsl(220, 20%, 88%)',
+	200: "hsl(220, 20%, 88%)",
-  300: 'hsl(220, 20%, 80%)',
+	300: "hsl(220, 20%, 80%)",
-  400: 'hsl(220, 20%, 65%)',
+	400: "hsl(220, 20%, 65%)",
-  500: 'hsl(220, 20%, 42%)',
+	500: "hsl(220, 20%, 42%)",
-  600: 'hsl(220, 20%, 35%)',
+	600: "hsl(220, 20%, 35%)",
-  700: 'hsl(220, 20%, 25%)',
+	700: "hsl(220, 20%, 25%)",
-  800: 'hsl(220, 30%, 6%)',
+	800: "hsl(220, 30%, 6%)",
-  900: 'hsl(220, 35%, 3%)',
+	900: "hsl(220, 35%, 3%)",
 };
 
 export const green = {
-  50: 'hsl(120, 80%, 98%)',
+	50: "hsl(120, 80%, 98%)",
-  100: 'hsl(120, 75%, 94%)',
+	100: "hsl(120, 75%, 94%)",
-  200: 'hsl(120, 75%, 87%)',
+	200: "hsl(120, 75%, 87%)",
-  300: 'hsl(120, 61%, 77%)',
+	300: "hsl(120, 61%, 77%)",
-  400: 'hsl(120, 44%, 53%)',
+	400: "hsl(120, 44%, 53%)",
-  500: 'hsl(120, 59%, 30%)',
+	500: "hsl(120, 59%, 30%)",
-  600: 'hsl(120, 70%, 25%)',
+	600: "hsl(120, 70%, 25%)",
-  700: 'hsl(120, 75%, 16%)',
+	700: "hsl(120, 75%, 16%)",
-  800: 'hsl(120, 84%, 10%)',
+	800: "hsl(120, 84%, 10%)",
-  900: 'hsl(120, 87%, 6%)',
+	900: "hsl(120, 87%, 6%)",
 };
 
 export const orange = {
-  50: 'hsl(45, 100%, 97%)',
+	50: "hsl(45, 100%, 97%)",
-  100: 'hsl(45, 92%, 90%)',
+	100: "hsl(45, 92%, 90%)",
-  200: 'hsl(45, 94%, 80%)',
+	200: "hsl(45, 94%, 80%)",
-  300: 'hsl(45, 90%, 65%)',
+	300: "hsl(45, 90%, 65%)",
-  400: 'hsl(45, 90%, 40%)',
+	400: "hsl(45, 90%, 40%)",
-  500: 'hsl(45, 90%, 35%)',
+	500: "hsl(45, 90%, 35%)",
-  600: 'hsl(45, 91%, 25%)',
+	600: "hsl(45, 91%, 25%)",
-  700: 'hsl(45, 94%, 20%)',
+	700: "hsl(45, 94%, 20%)",
-  800: 'hsl(45, 95%, 16%)',
+	800: "hsl(45, 95%, 16%)",
-  900: 'hsl(45, 93%, 12%)',
+	900: "hsl(45, 93%, 12%)",
 };
 
 export const red = {
-  50: 'hsl(0, 100%, 97%)',
+	50: "hsl(0, 100%, 97%)",
-  100: 'hsl(0, 92%, 90%)',
+	100: "hsl(0, 92%, 90%)",
-  200: 'hsl(0, 94%, 80%)',
+	200: "hsl(0, 94%, 80%)",
-  300: 'hsl(0, 90%, 65%)',
+	300: "hsl(0, 90%, 65%)",
-  400: 'hsl(0, 90%, 40%)',
+	400: "hsl(0, 90%, 40%)",
-  500: 'hsl(0, 90%, 30%)',
+	500: "hsl(0, 90%, 30%)",
-  600: 'hsl(0, 91%, 25%)',
+	600: "hsl(0, 91%, 25%)",
-  700: 'hsl(0, 94%, 18%)',
+	700: "hsl(0, 94%, 18%)",
-  800: 'hsl(0, 95%, 12%)',
+	800: "hsl(0, 95%, 12%)",
-  900: 'hsl(0, 93%, 6%)',
+	900: "hsl(0, 93%, 6%)",
 };
 
 export const getDesignTokens = (mode: PaletteMode) => {
 	customShadows[1] =
-    mode === 'dark'
+		mode === "dark"
-      ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px'
+			? "hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px"
-      : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px';
+			: "hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px";
 
 	return {
 		palette: {
@@ -109,7 +109,7 @@ export const getDesignTokens = (mode: PaletteMode) => {
 				main: brand[400],
 				dark: brand[700],
 				contrastText: brand[50],
-        ...(mode === 'dark' && {
+				...(mode === "dark" && {
 					contrastText: brand[50],
 					light: brand[300],
 					main: brand[400],
@@ -121,7 +121,7 @@ export const getDesignTokens = (mode: PaletteMode) => {
 				main: brand[300],
 				dark: brand[600],
 				contrastText: gray[50],
-        ...(mode === 'dark' && {
+				...(mode === "dark" && {
 					contrastText: brand[300],
 					light: brand[500],
 					main: brand[700],
@@ -132,7 +132,7 @@ export const getDesignTokens = (mode: PaletteMode) => {
 				light: orange[300],
 				main: orange[400],
 				dark: orange[800],
-        ...(mode === 'dark' && {
+				...(mode === "dark" && {
 					light: orange[400],
 					main: orange[500],
 					dark: orange[700],
@@ -142,7 +142,7 @@ export const getDesignTokens = (mode: PaletteMode) => {
 				light: red[300],
 				main: red[400],
 				dark: red[800],
-        ...(mode === 'dark' && {
+				...(mode === "dark" && {
 					light: red[400],
 					main: red[500],
 					dark: red[700],
@@ -152,7 +152,7 @@ export const getDesignTokens = (mode: PaletteMode) => {
 				light: green[300],
 				main: green[400],
 				dark: green[800],
-        ...(mode === 'dark' && {
+				...(mode === "dark" && {
 					light: green[400],
 					main: green[500],
 					dark: green[700],
@@ -161,29 +161,36 @@ export const getDesignTokens = (mode: PaletteMode) => {
 			grey: {
 				...gray,
 			},
-      divider: mode === 'dark' ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4),
+			divider:
+				mode === "dark" ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4),
 			background: {
-        default: 'hsl(0, 0%, 99%)',
+				default: "hsl(0, 0%, 99%)",
-        paper: 'hsl(220, 35%, 97%)',
+				paper: "hsl(220, 35%, 97%)",
-        ...(mode === 'dark' && { default: gray[900], paper: 'hsl(220, 30%, 7%)' }),
+				...(mode === "dark" && {
+					default: gray[900],
+					paper: "hsl(220, 30%, 7%)",
+				}),
 			},
 			text: {
 				primary: gray[800],
 				secondary: gray[600],
 				warning: orange[400],
-        ...(mode === 'dark' && { primary: 'hsl(0, 0%, 100%)', secondary: gray[400] }),
+				...(mode === "dark" && {
+					primary: "hsl(0, 0%, 100%)",
+					secondary: gray[400],
+				}),
 			},
 			action: {
 				hover: alpha(gray[200], 0.2),
 				selected: `${alpha(gray[200], 0.3)}`,
-        ...(mode === 'dark' && {
+				...(mode === "dark" && {
 					hover: alpha(gray[600], 0.2),
 					selected: alpha(gray[600], 0.3),
 				}),
 			},
 		},
 		typography: {
-      fontFamily: 'Inter, sans-serif',
+			fontFamily: "Gilroy",
 			h1: {
 				fontSize: defaultTheme.typography.pxToRem(48),
 				fontWeight: 600,
@@ -273,8 +280,8 @@ export const colorSchemes = {
 			},
 			divider: alpha(gray[300], 0.4),
 			background: {
-        default: 'hsl(0, 0%, 99%)',
+				default: "hsl(0, 0%, 99%)",
-        paper: 'hsl(220, 35%, 97%)',
+				paper: "hsl(220, 35%, 97%)",
 			},
 			text: {
 				primary: gray[800],
@@ -286,7 +293,7 @@ export const colorSchemes = {
 				selected: `${alpha(gray[200], 0.3)}`,
 			},
 			baseShadow:
-        'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px',
+				"hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px",
 		},
 	},
 	dark: {
@@ -324,10 +331,10 @@ export const colorSchemes = {
 			divider: alpha(gray[700], 0.6),
 			background: {
 				default: gray[900],
-        paper: 'hsl(220, 30%, 7%)',
+				paper: "hsl(220, 30%, 7%)",
 			},
 			text: {
-        primary: 'hsl(0, 0%, 100%)',
+				primary: "hsl(0, 0%, 100%)",
 				secondary: gray[400],
 			},
 			action: {
@@ -335,13 +342,13 @@ export const colorSchemes = {
 				selected: alpha(gray[600], 0.3),
 			},
 			baseShadow:
-        'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px',
+				"hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px",
 		},
 	},
 };
 
 export const typography = {
-  fontFamily: 'Inter, sans-serif',
+	fontFamily: "Gilroy",
 	h1: {
 		fontSize: defaultTheme.typography.pxToRem(48),
 		fontWeight: 600,
@@ -396,8 +403,8 @@ export const shape = {
 
 // @ts-ignore
 const defaultShadows: Shadows = [
-  'none',
+	"none",
-  'var(--template-palette-baseShadow)',
+	"var(--template-palette-baseShadow)",
 	...defaultTheme.shadows.slice(2),
 ];
 export const shadows = defaultShadows;