diff --git a/public/Digiev.png b/public/Digiev.png
new file mode 100644
index 0000000..2f11f05
Binary files /dev/null and b/public/Digiev.png differ
diff --git a/public/Publica Sans Round/PublicaSansRound-Bd.otf b/public/Publica Sans Round/PublicaSansRound-Bd.otf
new file mode 100644
index 0000000..9a05eaf
Binary files /dev/null and b/public/Publica Sans Round/PublicaSansRound-Bd.otf differ
diff --git a/public/Publica Sans Round/PublicaSansRound-BdIt.otf b/public/Publica Sans Round/PublicaSansRound-BdIt.otf
new file mode 100644
index 0000000..38ccd1e
Binary files /dev/null and b/public/Publica Sans Round/PublicaSansRound-BdIt.otf differ
diff --git a/public/Publica Sans Round/PublicaSansRound-Lt.otf b/public/Publica Sans Round/PublicaSansRound-Lt.otf
new file mode 100644
index 0000000..b5e25da
Binary files /dev/null and b/public/Publica Sans Round/PublicaSansRound-Lt.otf differ
diff --git a/public/Publica Sans Round/PublicaSansRound-LtIt.otf b/public/Publica Sans Round/PublicaSansRound-LtIt.otf
new file mode 100644
index 0000000..deab355
Binary files /dev/null and b/public/Publica Sans Round/PublicaSansRound-LtIt.otf differ
diff --git a/public/Publica Sans Round/PublicaSansRound-Md.otf b/public/Publica Sans Round/PublicaSansRound-Md.otf
new file mode 100644
index 0000000..d9de45d
Binary files /dev/null and b/public/Publica Sans Round/PublicaSansRound-Md.otf differ
diff --git a/public/Publica Sans Round/PublicaSansRound-MdIt.otf b/public/Publica Sans Round/PublicaSansRound-MdIt.otf
new file mode 100644
index 0000000..a81b340
Binary files /dev/null and b/public/Publica Sans Round/PublicaSansRound-MdIt.otf differ
diff --git a/public/Publica Sans Round/PublicaSansRound-Rg.otf b/public/Publica Sans Round/PublicaSansRound-Rg.otf
new file mode 100644
index 0000000..6488bef
Binary files /dev/null and b/public/Publica Sans Round/PublicaSansRound-Rg.otf differ
diff --git a/public/Publica Sans Round/PublicaSansRound-RgIt.otf b/public/Publica Sans Round/PublicaSansRound-RgIt.otf
new file mode 100644
index 0000000..c2ec64c
Binary files /dev/null and b/public/Publica Sans Round/PublicaSansRound-RgIt.otf differ
diff --git a/public/Publica Sans Round/PublicaSansRound-ThIt.otf b/public/Publica Sans Round/PublicaSansRound-ThIt.otf
new file mode 100644
index 0000000..6eb6334
Binary files /dev/null and b/public/Publica Sans Round/PublicaSansRound-ThIt.otf differ
diff --git a/public/Publica Sans Round/PublicaSansRound-Thin.otf b/public/Publica Sans Round/PublicaSansRound-Thin.otf
new file mode 100644
index 0000000..3175231
Binary files /dev/null and b/public/Publica Sans Round/PublicaSansRound-Thin.otf differ
diff --git a/public/Publica Sans Round/PublicaSansRound-UlLt.otf b/public/Publica Sans Round/PublicaSansRound-UlLt.otf
new file mode 100644
index 0000000..367a579
Binary files /dev/null and b/public/Publica Sans Round/PublicaSansRound-UlLt.otf differ
diff --git a/public/Publica Sans Round/PublicaSansRound-UlLtIt.otf b/public/Publica Sans Round/PublicaSansRound-UlLtIt.otf
new file mode 100644
index 0000000..653466a
Binary files /dev/null and b/public/Publica Sans Round/PublicaSansRound-UlLtIt.otf differ
diff --git a/public/Publica Sans Round/PublicaSansRound-XBd.otf b/public/Publica Sans Round/PublicaSansRound-XBd.otf
new file mode 100644
index 0000000..c35ff52
Binary files /dev/null and b/public/Publica Sans Round/PublicaSansRound-XBd.otf differ
diff --git a/public/Publica Sans Round/PublicaSansRound-XBdIt.otf b/public/Publica Sans Round/PublicaSansRound-XBdIt.otf
new file mode 100644
index 0000000..9d00acf
Binary files /dev/null and b/public/Publica Sans Round/PublicaSansRound-XBdIt.otf differ
diff --git a/public/Publica Sans Round/PublicaSansRound-XLt.otf b/public/Publica Sans Round/PublicaSansRound-XLt.otf
new file mode 100644
index 0000000..09bf3e6
Binary files /dev/null and b/public/Publica Sans Round/PublicaSansRound-XLt.otf differ
diff --git a/public/Publica Sans Round/PublicaSansRound-XLtIt.otf b/public/Publica Sans Round/PublicaSansRound-XLtIt.otf
new file mode 100644
index 0000000..d9a0564
Binary files /dev/null and b/public/Publica Sans Round/PublicaSansRound-XLtIt.otf differ
diff --git a/public/fonts/PublicaSansRound-Md.otf b/public/fonts/PublicaSansRound-Md.otf
new file mode 100644
index 0000000..d9de45d
Binary files /dev/null and b/public/fonts/PublicaSansRound-Md.otf differ
diff --git a/src/App.css b/src/App.css
index a9f59a8..841a48f 100644
--- a/src/App.css
+++ b/src/App.css
@@ -22,6 +22,16 @@ html, body {
   }
 }
 
+
+@font-face {
+  font-family: 'Publica Sans Round Medium';
+
+         src: url('../public/fonts/PublicaSansRound-Md.otf') format('otf');
+      
+  font-weight: 500;
+  font-display: swap;
+}
+
 .App-header {
   background-color: #282c34;
   min-height: 100vh;
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
index 2fd372f..796e282 100644
--- a/src/components/Header/index.tsx
+++ b/src/components/Header/index.tsx
@@ -46,7 +46,7 @@ export default function Header() {
 				// height: "84px",
 				minHeight: "70px",
 				maxHeight: "84px",
-				backgroundColor: "#1C1C1C",
+				// backgroundColor: "#1C1C1C",
 				padding: { xs: "20px 12px", sm: "20px 24px" },
 				display: {
 					xs: "none",
@@ -59,10 +59,10 @@ export default function Header() {
 				boxSizing: "border-box",
 				overflowX: "hidden",
 				flex: "0 0 84px",
-				position: "fixed",
-				top: "0",
-				left: "0",
-				zIndex: 1000,
+				// position: "fixed",
+				// top: "0",
+				// left: "0",
+				// zIndex: 1000,
 			}}
 		>
 			<Stack
@@ -102,7 +102,7 @@ export default function Header() {
 						}}
 					/>
 				</Box> */}
-
+			
 				{/* Notification and Profile Section */}
 				<Stack
 					direction="row"
@@ -135,7 +135,7 @@ export default function Header() {
 						/>
 
 						{/* Username */}
-						<Typography variant="body1" sx={{ color: "#FFFFFF" }}>
+						<Typography variant="body1">
 							{user?.name || "No Adminsss"}
 						</Typography>
 
diff --git a/src/components/LineChartCard/lineChartCard.tsx b/src/components/LineChartCard/lineChartCard.tsx
index 927c67a..7375d1c 100644
--- a/src/components/LineChartCard/lineChartCard.tsx
+++ b/src/components/LineChartCard/lineChartCard.tsx
@@ -12,6 +12,7 @@ import { AppDispatch, RootState } from "../../redux/store/store";
 import { fetchDashboardData } from "../../redux/slices/dashboardSlice";
 import { Box } from "@mui/material";
 
+
 function AreaGradient({ color, id }: { color: string; id: string }) {
 	return (
 		<defs>
@@ -22,7 +23,7 @@ function AreaGradient({ color, id }: { color: string; id: string }) {
 		</defs>
 	);
 }
-
+  const chartColor = " #111111";
 export default function LineChartCard() {
 	const theme = useTheme();
 	const isXsScreen = useMediaQuery(theme.breakpoints.down("sm"));
@@ -32,7 +33,7 @@ export default function LineChartCard() {
 	const { totalBookings, loading } = useSelector(
 		(state: RootState) => state.dashboardReducer
 	);
-
+ 
 	// States for date range inputs
 	const [startDateBookings, setStartDateBookings] = React.useState("");
 	const [endDateBookings, setEndDateBookings] = React.useState("");
@@ -67,9 +68,7 @@ export default function LineChartCard() {
 				minHeight: { xs: "360px", sm: "400px", md: "444px" },
 				borderRadius: "16px",
 				border: "none",
-				"*:where([data-mui-color-scheme='dark']) &": {
-					backgroundColor: "#202020",
-				},
+				background: "#D0E1E9",
 			}}
 		>
 			<CardContent
@@ -83,16 +82,15 @@ export default function LineChartCard() {
 						display: "flex",
 						alignItems: "center",
 						flexDirection: isXsScreen ? "column" : "row",
-						color: "#F2F2F2",
+
 						marginBottom: isXsScreen ? 16 : 0,
 					}}
 				>
 					<Typography
 						variant="h6"
 						align={isXsScreen ? "center" : "left"}
-						color="#F2F2F2"
 						sx={{
-							fontWeight: 500,
+							fontWeight: 600,
 							fontSize: { xs: "12px", sm: "14px", md: "16px" },
 							lineHeight: "24px",
 							marginBottom: isXsScreen ? 2 : 0,
@@ -121,11 +119,9 @@ export default function LineChartCard() {
 						value={startDateBookings}
 						onChange={(e) => setStartDateBookings(e.target.value)}
 						sx={{
-							backgroundColor: "#202020",
+							backgroundColor: "#DFECF1",
+							border: "1px solid rgba(87, 85, 85, 0.53)",
 							borderRadius: "8px",
-							"& .MuiInputBase-input": {
-								color: "#F2F2F2",
-							},
 						}}
 					/>
 					<TextField
@@ -137,22 +133,20 @@ export default function LineChartCard() {
 						value={endDateBookings}
 						onChange={(e) => setEndDateBookings(e.target.value)}
 						sx={{
-							backgroundColor: "#202020",
+							backgroundColor: "#DFECF1",
+							border: "1px solid rgba(87, 85, 85, 0.53)",
 							borderRadius: "8px",
-							"& .MuiInputBase-input": {
-								color: "#F2F2F2",
-							},
 						}}
 					/>
 					<Button
 						onClick={handleFetchData}
 						sx={{
-							backgroundColor: "#52ACDF",
+							backgroundColor: "#000000",
 							color: "white",
 							borderRadius: "8px",
-							padding: "10px 20px",
+							width: "117px",
 
-							"&:hover": { backgroundColor: "#3A94C0" },
+							"&:hover": { backgroundColor: "#000000" },
 						}}
 					>
 						Apply
@@ -161,38 +155,35 @@ export default function LineChartCard() {
 
 				{/* Line Chart */}
 				<Box sx={{ mt: 7.5 }}>
-				<LineChart
-					colors={[theme.palette.primary.main]}
-					xAxis={[
-						{
-							scaleType: "point",
-							data: chartData.map((data) => data.label),
-						},
-					]}
-					series={[
-						{
-							id: "totalBookings",
-							showMark: false,
-							curve: "linear",
-							area: true,
-							data: chartData.map((data) => data.value),
-							color: theme.palette.primary.main,
-						},
-					]}
-					height={getChartHeight()}
-					margin={getChartMargin()}
-					grid={{ horizontal: true }}
-					sx={{
-						"& .MuiAreaElement-series-totalBookings": {
-							fill: "url('#totalBookings')",
-						},
-					}}
-				>
-					<AreaGradient
-						color={theme.palette.primary.main}
-						id="totalBookings"
-					/>
-				</LineChart>
+					<LineChart
+						colors={[theme.palette.primary.main]}
+						xAxis={[
+							{
+								scaleType: "point",
+								data: chartData.map((data) => data.label),
+							},
+						]}
+						series={[
+							{
+								id: "totalBookings",
+								showMark: false,
+								curve: "linear",
+								area: true,
+								data: chartData.map((data) => data.value),
+								color: theme.palette.primary.main,
+							},
+						]}
+						height={getChartHeight()}
+						margin={getChartMargin()}
+						grid={{ horizontal: true }}
+						sx={{
+							"& .MuiAreaElement-series-totalBookings": {
+								fill: "url('#totalBookings')",
+							},
+						}}
+					>
+						<AreaGradient color={chartColor} id="totalBookings" />
+					</LineChart>
 				</Box>
 			</CardContent>
 		</Card>
diff --git a/src/components/MainGrid/mainGrid.tsx b/src/components/MainGrid/mainGrid.tsx
index 1bcd4af..a1aefae 100644
--- a/src/components/MainGrid/mainGrid.tsx
+++ b/src/components/MainGrid/mainGrid.tsx
@@ -1,15 +1,16 @@
+import React, { useEffect } from "react";
 import Grid from "@mui/material/Grid";
 import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
 import SessionsChart from "../SessionsChart/sessionChart";
-import StatCard, { StatCardProps } from "../StatCard/statCard";
 import ResourcesPieChart from "../ResourcePieChart/resourcePieChart";
 import RoundedBarChart from "../barChartCard/barChartCard";
 import LineChartCard from "../LineChartCard/lineChartCard";
 import { AppDispatch, RootState } from "../../redux/store/store";
 import { useDispatch, useSelector } from "react-redux";
 import { fetchDashboardData } from "../../redux/slices/dashboardSlice";
-import { useEffect } from "react";
+import AppTheme from "../../shared-theme/AppTheme"; // Import the custom theme
+import StatCard from "../StatCard/statCard"; // Adjusted import for consistency
 
 export default function MainGrid() {
 	const dispatch = useDispatch<AppDispatch>();
@@ -22,18 +23,17 @@ export default function MainGrid() {
 		error,
 	} = useSelector((state: RootState) => state.dashboardReducer);
 
-	const staticData = {
-		totalAdmins: 86,
-		totalManagers: 12,
-		totalUsers: 24,
-		totalStations: 8,
-	};
-
 	useEffect(() => {
 		dispatch(fetchDashboardData());
 	}, [dispatch]);
 
-	const data = { totalAdmins, totalManagers, totalUsers, totalStations };
+	// Use fetched data if available, otherwise fall back to static data
+	const data = {
+		totalAdmins: totalAdmins || 86,
+		totalManagers: totalManagers || 12,
+		totalUsers: totalUsers || 24,
+		totalStations: totalStations || 8,
+	};
 
 	const statCards = [
 		{ title: "Total Admins", value: data.totalAdmins },
@@ -43,48 +43,53 @@ export default function MainGrid() {
 	];
 
 	return (
-		<Box
-			sx={{
-				width: "100%",
-				maxWidth: "1800px",
-				mx: "auto",
-				px: { xs: 2, sm: 1, md: 0 },
-				// background: "#DFECF1",
-				
-			}}
-		>
-			{/* Dashboard Header */}
-			<Typography
-				component="h2"
-				variant="h6"
-				sx={{ mb: 2, fontSize: "30px", fontWeight: "600" }}
+		<AppTheme>
+			<Box
+				sx={{
+					width: "100%",
+					maxWidth: "1800px",
+					mx: "auto",
+					px: { xs: 2, sm: 1, md: 0 },
+					background: (theme) => theme.palette.background.default, // #DFECF1 from theme
+				}}
 			>
-				Dashboard
-			</Typography>
+				{/* Dashboard Header */}
+				<Typography
+					component="h2"
+					variant="h4" // Use h4 to match the "Good morning, James!" size and weight
+					sx={{
+						mb: 3,
+				
+						
+					}}
+				>
+					Dashboard 
+				</Typography>
 
-			{/* Grid Layout */}
-			<Grid container spacing={3} columns={12}>
-				{/* Statistic Cards */}
-				{statCards.map((card, index) => (
-					<Grid key={index} item xs={12} sm={6} md={3} lg={3}>
-						<StatCard {...card} />
+				{/* Grid Layout */}
+				<Grid container spacing={3} columns={12}>
+					{/* Statistic Cards */}
+					{statCards.map((card, index) => (
+						<Grid key={index} item xs={12} sm={6} md={3} lg={3}>
+							<StatCard {...card} />
+						</Grid>
+					))}
+
+					{/* Charts */}
+					<Grid item xs={12} sm={12} md={6} lg={6}>
+						<SessionsChart />
+					</Grid>
+					<Grid item xs={12} sm={12} md={6} lg={6}>
+						<ResourcesPieChart />
+					</Grid>
+					<Grid item xs={12} sm={12} md={6} lg={6}>
+						<RoundedBarChart />
+					</Grid>
+					<Grid item xs={12} sm={12} md={6} lg={6}>
+						<LineChartCard />
 					</Grid>
-				))}
-
-				{/* Charts */}
-				<Grid item xs={12} sm={12} md={6} lg={6}>
-					<SessionsChart />
 				</Grid>
-				<Grid item xs={12} sm={12} md={6} lg={6}>
-					<ResourcesPieChart />
-				</Grid>
-				<Grid item xs={12} sm={12} md={6} lg={6}>
-					<RoundedBarChart />
-				</Grid>
-				<Grid item xs={12} sm={12} md={6} lg={6}>
-					<LineChartCard />
-				</Grid>
-			</Grid>
-		</Box>
+			</Box>
+		</AppTheme>
 	);
 }
diff --git a/src/components/MenuContent/index.tsx b/src/components/MenuContent/index.tsx
index d8e5fc4..6fc2f36 100644
--- a/src/components/MenuContent/index.tsx
+++ b/src/components/MenuContent/index.tsx
@@ -111,7 +111,7 @@ export default function MenuContent({ hidden }: PropType) {
 				flexGrow: 1,
 				// p: 1,
 				justifyContent: "space-between",
-				backgroundColor: "#202020",
+				backgroundColor: "#000000",
 			}}
 		>
 			<List dense>
@@ -150,7 +150,7 @@ export default function MenuContent({ hidden }: PropType) {
 										letterSpacing: "0%",
 										lineHeight: "100%",
 										whiteSpace: "pre",
-										color: "#FAFAFA",
+										color: "#FFFFFF",
 										// marginTop: "5px",
 									},
 								}}
diff --git a/src/components/OptionsMenu/index.tsx b/src/components/OptionsMenu/index.tsx
index 90cd9ec..29b6c01 100644
--- a/src/components/OptionsMenu/index.tsx
+++ b/src/components/OptionsMenu/index.tsx
@@ -53,7 +53,8 @@ export default function OptionsMenu({
 							mt: 1.5,
 
 							"& .MuiList-root": {
-								background: "#272727",
+								background: "#D0E1E9",
+								
 							},
 							"& .MuiMenuItem-root": {
 								borderBottom: "none", // Remove any divider under menu items
@@ -75,10 +76,7 @@ export default function OptionsMenu({
 				>
 					<MenuItem onClick={onClose}>Profile</MenuItem>
 				</Link>
-				<MenuItem
-					onClick={onClose}
-					sx={{ color: "#E8533B" }}
-				>
+				<MenuItem onClick={onClose} sx={{ color: "#E8533B" }}>
 					<ListItemText
 						onClick={(e) => {
 							e.stopPropagation();
diff --git a/src/components/ResourcePieChart/resourcePieChart.tsx b/src/components/ResourcePieChart/resourcePieChart.tsx
index b771994..b745e4b 100644
--- a/src/components/ResourcePieChart/resourcePieChart.tsx
+++ b/src/components/ResourcePieChart/resourcePieChart.tsx
@@ -102,9 +102,10 @@ export default function ResourcePieChart() {
 				padding: { xs: "12px", sm: "14px", md: "16px" },
 				borderRadius: "16px",
 				border: "none",
-				"*:where([data-mui-color-scheme='dark']) &": {
-					backgroundColor: "#202020",
-				},
+				// "*:where([data-mui-color-scheme='dark']) &": {
+				// 	backgroundColor: "#202020",
+				// },
+				background: "#D0E1E9",
 			}}
 		>
 			<CardContent
@@ -113,12 +114,12 @@ export default function ResourcePieChart() {
 				<Typography
 					component="h2"
 					variant="subtitle2"
-					color="#F2F2F2"
+					// color="#F2F2F2"
 					sx={{
-						fontWeight: 500,
+						fontWeight: 600,
 						fontSize: { xs: "12px", sm: "14px", md: "16px" },
 						lineHeight: "24px",
-						color: "#FFFFFF",
+						// color: "#FFFFFF",
 						marginBottom: { xs: 1, sm: 1.5, md: 2 },
 					}}
 				>
@@ -167,7 +168,9 @@ export default function ResourcePieChart() {
 							ml: { xs: 0, sm: 2 },
 						}}
 					>
-					<Typography sx={{whiteSpace: "pre"}}>Car Port Types:</Typography>
+						<Typography sx={{ whiteSpace: "pre" ,fontWeight:500}}>
+							Car Port Types:
+						</Typography>
 
 						{dataToDisplay.map((entry, index) => (
 							<Stack
@@ -195,7 +198,8 @@ export default function ResourcePieChart() {
 											sm: "14px",
 											md: "16px",
 										},
-										color: "#FFFFFF",
+										// color: "#FFFFFF",
+										color: "#111111",
 									}}
 								>
 									{entry.carPort}
diff --git a/src/components/SessionsChart/sessionChart.tsx b/src/components/SessionsChart/sessionChart.tsx
index 3b6e7d4..73b9aa2 100644
--- a/src/components/SessionsChart/sessionChart.tsx
+++ b/src/components/SessionsChart/sessionChart.tsx
@@ -30,9 +30,10 @@ export default function SessionsChart() {
 				borderRadius: "16px",
 				padding: { xs: "12px", sm: "16px", md: "20px" },
 				border: "none",
-				"*:where([data-mui-color-scheme='dark']) &": {
-					backgroundColor: "#202020",
-				},
+				// "*:where([data-mui-color-scheme='dark']) &": {
+				// 	backgroundColor: "#202020",
+				// },
+				background: "#D0E1E9",
 			}}
 		>
 			<CardContent
@@ -41,14 +42,14 @@ export default function SessionsChart() {
 				<Typography
 					variant="h6"
 					align="left"
-					color="#F2F2F2"
+					// color="#F2F2F2"
 					sx={{
-						fontWeight: 500,
+						fontWeight: 600,
 						fontSize: { xs: "12px", sm: "14px", md: "16px" },
 						lineHeight: "24px",
 						letterSpacing: "0%",
-						color: "#FAFAFA",
-						marginBottom: { xs: 1, sm: 1.5, md: 2 },
+						// color: "#FAFAFA",
+						marginBottom: { xs: 1, sm: 0.7, md: 1 },
 					}}
 				>
 					Charging prices
@@ -60,7 +61,7 @@ export default function SessionsChart() {
 						mt: { xs: 1, sm: 1.5, md: 2 },
 						mb: { xs: 1, sm: 1.5, md: 2 },
 						width: "100%",
-						border: "none",
+						border: "1px solid rgba(87, 85, 85, 0.53)",
 						borderRadius: "8px",
 					}}
 				>
@@ -69,13 +70,12 @@ export default function SessionsChart() {
 						onChange={handleChange}
 						label="Select Station"
 						sx={{
-							color: "#D9D8D8",
-							"& .MuiSvgIcon-root": { color: "#F2F2F2" },
+							color: "#000000",
+							"& .MuiSvgIcon-root": { color: "#000000" },
 							fontSize: { xs: "14px", md: "16px" },
 						}}
 						IconComponent={ExpandMoreIcon}
 					>
-						
 						<MenuItem value="Delhi NCR EV Station">
 							Delhi NCR EV Station
 						</MenuItem>
@@ -115,8 +115,9 @@ export default function SessionsChart() {
 								},
 								borderRadius: "8px",
 								p: { xs: "10px", sm: "12px", md: "14px" },
-								backgroundColor: "#272727",
-								color: "#D9D8D8",
+								// backgroundColor: "#272727",
+								// color: "#D9D8D8",
+								backgroundColor: "#D9E7ED",
 								display: "flex",
 								flexDirection: "column",
 								justifyContent: "center",
@@ -125,7 +126,7 @@ export default function SessionsChart() {
 							<Typography
 								variant="body2"
 								sx={{
-									fontWeight: 500,
+									fontWeight: 600,
 									fontSize: {
 										xs: "12px",
 										sm: "14px",
@@ -133,6 +134,7 @@ export default function SessionsChart() {
 									},
 									lineHeight: { xs: "20px", md: "24px" },
 									marginBottom: "4px",
+									color: "#111111",
 								}}
 								gutterBottom
 							>
@@ -141,7 +143,6 @@ export default function SessionsChart() {
 							<Box display="flex" gap={1} alignItems="center">
 								<Typography
 									variant="subtitle2"
-									color="#FFFFFF"
 									sx={{
 										fontWeight: 500,
 										fontSize: {
diff --git a/src/components/SideMenu/sideMenu.tsx b/src/components/SideMenu/sideMenu.tsx
index 503d2ee..4bfb9ad 100644
--- a/src/components/SideMenu/sideMenu.tsx
+++ b/src/components/SideMenu/sideMenu.tsx
@@ -21,7 +21,7 @@ const Drawer = styled(MuiDrawer)({
 	width: drawerWidth,
 	flexShrink: 0,
 	boxSizing: "border-box",
-	
+
 	[`& .${drawerClasses.paper}`]: {
 		width: drawerWidth,
 		boxSizing: "border-box",
@@ -52,9 +52,11 @@ export default function SideMenu() {
 						transition: "all 0.5s ease",
 					},
 					[`& .${drawerClasses.paper}`]: {
-						backgroundColor: "background.paper",
+						backgroundColor: "#000000",
 						width: open ? 250 : 80,
 						transition: "all 0.5s ease",
+						borderTopRightRadius: 16,
+						borderBottomRightRadius: 16,
 					},
 				}}
 			>
@@ -68,15 +70,24 @@ export default function SideMenu() {
 					}}
 				>
 					<img
-						src="/evLogo.png"
+						src={open ? "/evLogo.png" : "/Digiev.png"}
 						alt="Logo"
 						style={{
-							justifyContent: "center",
-							width: open ? "120px" : "60px", // Adjust width depending on open state
+							width: open ? "120px" : "60px",
 							height: "auto",
-							transition: "width 0.5s ease", // Smooth transition for width change
+							transition: "all 0.3s ease",
 						}}
 					/>
+					{/* <img
+						src={open ? "/evLogo.png" : "/evIcon.png"}
+						alt="Logo"
+						style={{
+							width: open ? "120px" : "60px",
+							height: "auto",
+							transition: "all 0.3s ease",
+						}}
+					/> */}
+
 					{/* <Avatar
 					alt="Logo"
 					src="/evLogo.png"
@@ -127,19 +138,24 @@ export default function SideMenu() {
 				<MenuContent hidden={open} />
 			</Drawer>
 			<Button
-				
 				onClick={() => setOpen(!open)}
 				sx={{
 					position: "absolute",
-					top: 20,
-					left: open ? 250 : 80,
+					top: 50,
+					left: open ? 235 : 65, // Slight overlap on edge
 					minWidth: 0,
-					width: 32,
-					height: 35,
+					width: 36,
+					height: 36,
 					borderRadius: "50%",
-
+					backgroundColor: "#FFFFFF",
+					color: "#000000",
 					zIndex: 1301,
-					// boxShadow: 2,
+					boxShadow: 3,
+					border: "1px solid #e0e0e0",
+					transition: "all 0.3s ease-in-out",
+					"&:hover": {
+						backgroundColor: "#f5f5f5",
+					},
 				}}
 			>
 				{open ? (
diff --git a/src/components/StatCard/statCard.tsx b/src/components/StatCard/statCard.tsx
index 34ce18f..3196612 100644
--- a/src/components/StatCard/statCard.tsx
+++ b/src/components/StatCard/statCard.tsx
@@ -16,91 +16,88 @@ export default function StatCard({ title, value }: StatCardProps) {
   const isMdScreen = useMediaQuery(theme.breakpoints.only("md"));
   
   return (
-    <Card
-      variant="outlined"
-      sx={{
-        width: "100%", 
-        height: "100px", 
-        padding: {
-          xs: "12px",
-          sm: "14px",
-          md: "10px"
-        },
-        borderRadius: "12px",
-        border: "none",
-        gap: "24px",
-        "*:where([data-mui-color-scheme='dark']) &": {
-          backgroundColor: "#202020",
-        },
-      }}
-    >
-      <CardContent
-        sx={{
-          padding: {
-            xs: "8px",
-            sm: "12px",
-            md: "16px"
-          },
-          "&:last-child": {
-            paddingBottom: {
-              xs: "8px",
-              sm: "12px", 
-              md: "16px"
-            }
-          }
-        }}
-      >
-        <Typography
-          component="h2"
-          variant="subtitle2"
-          color="#F2F2F2"
-          sx={{
-            fontWeight: 400,
-            fontSize: {
-              xs: "12px",
-              sm: "14px",
-              md: "16px"
-            },
-            lineHeight: {
-              xs: "12px",
-              sm: "13px",
-              md: "14px"
-            },
-            letterSpacing: "0%",
-            width: "auto", 
-            height: "auto", 
-            marginBottom: { xs: "6px", sm: "8px", md: "10px" }, // Added more spacing
-
-          }}
-          gutterBottom
-        >
-          {title}
-        </Typography>
-        <Typography
-          component="h1"
-          variant="body1"
-          color="#D9D8D8"
-          sx={{
-            fontWeight: 600,
-            fontSize: {
-              xs: "24px",
-              sm: "28px",
-              md: "30px"
-            },
-            lineHeight: {
-              xs: "28px",
-              sm: "32px",
-              md: "36px"
-            },
-            letterSpacing: "0%",
-            width: "auto", 
-            height: "auto", 
-          }}
-          gutterBottom
-        >
-          {value}
-        </Typography>
-      </CardContent>
-    </Card>
+		<Card
+			variant="outlined"
+			sx={{
+				width: "100%",
+				height: "100px",
+				padding: {
+					xs: "12px",
+					sm: "14px",
+					md: "10px",
+				},
+				borderRadius: "12px",
+				border: "none",
+				gap: "24px",
+			  background: "#D0E1E9",
+				
+			}}
+		>
+			<CardContent
+				sx={{
+					padding: {
+						xs: "8px",
+						sm: "12px",
+						md: "16px",
+					},
+					"&:last-child": {
+						paddingBottom: {
+							xs: "8px",
+							sm: "12px",
+							md: "16px",
+						},
+					},
+				}}
+			>
+				<Typography
+					component="h2"
+					variant="subtitle2"
+					sx={{
+						fontWeight: 600,
+           
+						fontSize: {
+							xs: "12px",
+							sm: "14px",
+							md: "16px",
+						},
+						lineHeight: {
+							xs: "12px",
+							sm: "13px",
+							md: "14px",
+						},
+						letterSpacing: "0%",
+						width: "auto",
+						height: "auto",
+						marginBottom: { xs: "6px", sm: "8px", md: "10px" }, // Added more spacing
+					}}
+					gutterBottom
+				>
+					{title}
+				</Typography>
+				<Typography
+					component="h1"
+					variant="body1"
+					sx={{
+						fontWeight: 600,
+						fontSize: {
+							xs: "24px",
+							sm: "28px",
+							md: "30px",
+						},
+						lineHeight: {
+							xs: "28px",
+							sm: "32px",
+							md: "36px",
+						},
+						letterSpacing: "0%",
+						width: "auto",
+						height: "auto",
+					}}
+					gutterBottom
+				>
+					{value}
+				</Typography>
+			</CardContent>
+		</Card>
   );
 }
\ No newline at end of file
diff --git a/src/components/barChartCard/barChartCard.tsx b/src/components/barChartCard/barChartCard.tsx
index fbbd93e..96d28be 100644
--- a/src/components/barChartCard/barChartCard.tsx
+++ b/src/components/barChartCard/barChartCard.tsx
@@ -13,7 +13,7 @@ import { axisClasses } from "@mui/x-charts/ChartsAxis";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import { AppDispatch, RootState } from "../../redux/store/store";
 import { useDispatch, useSelector } from "react-redux";
-import { fetchDashboardData } from "../../redux/slices/dashboardSlice";	
+import { fetchDashboardData } from "../../redux/slices/dashboardSlice";
 
 export default function RoundedBarChart() {
 	const theme = useTheme();
@@ -33,11 +33,7 @@ export default function RoundedBarChart() {
 
 	// Handle fetching data with date filters
 	const handleFetchData = () => {
-		
-			dispatch(
-				fetchDashboardData({ startDateStations, endDateStations })
-			);
-		
+		dispatch(fetchDashboardData({ startDateStations, endDateStations }));
 	};
 
 	// Responsive chart settings
@@ -53,7 +49,6 @@ export default function RoundedBarChart() {
 				{
 					dataKey: "name",
 					scaleType: "band" as const,
-					
 				},
 			],
 			sx: {
@@ -102,9 +97,10 @@ export default function RoundedBarChart() {
 				minHeight: { xs: "360px", sm: "400px", md: "444px" },
 				borderRadius: "16px",
 				border: "none",
-				"*:where([data-mui-color-scheme='dark']) &": {
-					backgroundColor: "#202020",
-				},
+				// "*:where([data-mui-color-scheme='dark']) &": {
+				// 	backgroundColor: "#202020",
+				// },
+				background: "#D0E1E9",
 			}}
 		>
 			<CardContent
@@ -123,10 +119,11 @@ export default function RoundedBarChart() {
 				>
 					<Typography
 						variant="h6"
-						color="#F2F2F2"
+						// color="#F2F2F2"
+						color="#000000"
 						align={isXsScreen ? "center" : "left"}
 						sx={{
-							fontWeight: 500,
+							fontWeight: 600,
 							fontSize: { xs: "12px", sm: "14px", md: "16px" },
 							lineHeight: "24px",
 							marginBottom: isXsScreen ? 2 : 0,
@@ -153,11 +150,13 @@ export default function RoundedBarChart() {
 						value={startDateStations}
 						onChange={(e) => setStartDateStations(e.target.value)}
 						sx={{
-							backgroundColor: "#202020",
+							// backgroundColor: "#202020",
+							backgroundColor: "#D9E7ED",
+							border: "1px solid rgba(87, 85, 85, 0.53)",
 							borderRadius: "8px",
-							"& .MuiInputBase-input": {
-								color: "#F2F2F2",
-							},
+							// "& .MuiInputBase-input": {
+							// 	color: "#F2F2F2",
+							// },
 						}}
 					/>
 					<TextField
@@ -171,22 +170,25 @@ export default function RoundedBarChart() {
 						value={endDateStations}
 						onChange={(e) => setEndDateStations(e.target.value)}
 						sx={{
-							backgroundColor: "#202020",
+							// backgroundColor: "#202020",
+							backgroundColor: "#D9E7ED",
+							border: "1px solid rgba(87, 85, 85, 0.53)",
 							borderRadius: "8px",
-							"& .MuiInputBase-input": {
-								color: "#F2F2F2",
-							},
-							
+							// "& .MuiInputBase-input": {
+							// 	color: "#F2F2F2",
+							// },
 						}}
 					/>
 					<Button
 						onClick={handleFetchData}
 						sx={{
-							backgroundColor: "#52ACDF",
+							// backgroundColor: "#52ACDF",
+							backgroundColor: "#000000",
 							color: "white",
 							borderRadius: "8px",
 							width: "117px",
-							"&:hover": { backgroundColor: "#439BC1" },
+							// "&:hover": { backgroundColor: "#439BC1" },
+							"&:hover": { backgroundColor: "#000000" },
 						}}
 					>
 						Apply
diff --git a/src/index.css b/src/index.css
index edad7fc..94c07ff 100644
--- a/src/index.css
+++ b/src/index.css
@@ -22,3 +22,11 @@ code {
   rx: 8;
       ry: 8
 }
+@font-face {
+  font-family: 'Publica Sans Round Medium';
+      src: url('../public/fonts/PublicaSansRound-Md.otf') format('otf');
+      
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
\ No newline at end of file
diff --git a/src/shared-theme/AppTheme.tsx b/src/shared-theme/AppTheme.tsx
index 9e7f76c..66f1a27 100644
--- a/src/shared-theme/AppTheme.tsx
+++ b/src/shared-theme/AppTheme.tsx
@@ -1,3 +1,67 @@
+// import * as React from "react";
+// import { ThemeProvider, Theme, createTheme } from "@mui/material/styles";
+// import type { ThemeOptions } from "@mui/material/styles";
+// import { inputsCustomizations } from "./customizations/inputs";
+// import { dataDisplayCustomizations } from "./customizations/dataDisplay";
+// import { feedbackCustomizations } from "./customizations/feedback";
+// import { navigationCustomizations } from "./customizations/navigation";
+// import { surfacesCustomizations } from "./customizations/surfaces";
+// import { colorSchemes, shadows, shape } from "./themePrimitives";
+
+// interface AppThemeProps {
+// 	children: React.ReactNode;
+// 	disableCustomTheme?: boolean;
+// 	themeComponents?: ThemeOptions["components"];
+// }
+
+// export default function AppTheme(props: AppThemeProps) {
+// 	const { children, disableCustomTheme, themeComponents } = props;
+// 	const theme = React.useMemo(() => {
+// 		return disableCustomTheme
+// 			? {}
+// 			: createTheme({
+// 					palette: {
+// 						mode: "dark",
+// 						background: {
+// 							// default: "#ECF4FA",
+// 							default: "#DFECF1",
+// 							paper: "#1e1e1e",
+// 						},
+// 						text: {
+// 							primary: "#111111",
+// 							secondary: "#b0b0b0",
+// 						},
+// 					},
+// 					typography: {
+// 						fontFamily: "Gilroy",
+// 					},
+// 					cssVariables: {
+// 						colorSchemeSelector: "data-mui-color-scheme",
+// 						cssVarPrefix: "template",
+// 					},
+// 					shadows,
+// 					shape,
+// 					components: {
+// 						...inputsCustomizations,
+// 						...dataDisplayCustomizations,
+// 						...feedbackCustomizations,
+// 						...navigationCustomizations,
+// 						...surfacesCustomizations,
+// 						...themeComponents,
+// 					},
+// 			  });
+// 	}, [disableCustomTheme, themeComponents]);
+
+// 	if (disableCustomTheme) {
+// 		return <React.Fragment>{children}</React.Fragment>;
+// 	}
+
+// 	return (
+// 		<ThemeProvider theme={theme} disableTransitionOnChange>
+// 			{children}
+// 		</ThemeProvider>
+// 	);
+// }
 import * as React from "react";
 import { ThemeProvider, Theme, createTheme } from "@mui/material/styles";
 import type { ThemeOptions } from "@mui/material/styles";
@@ -21,26 +85,49 @@ export default function AppTheme(props: AppThemeProps) {
 			? {}
 			: createTheme({
 					palette: {
-						mode: "dark",
+						mode: "light", // Set to light mode to match the UI
 						background: {
-							// default: "#ECF4FA",
-							default: "#111111",
-							paper: "#1e1e1e",
+							default: "#DFECF1", // Matches the background in the image
+							paper: "#D0E1E9", // Dark cards
 						},
 						text: {
-							primary: "#ffffff",
-							secondary: "#b0b0b0",
+							primary: "#000000", // Already matches the image
+							secondary: "#272727", // Already matches the image
 						},
+						success: {
+							main: "#00C853", // For positive percentages (e.g., +18.7%)
+						},
+						error: {
+							main: "#F44336", // For negative percentages (e.g., +2.7%)
+						},
+						divider: "#E0E0E0", // Light divider for cards
 					},
 					typography: {
-						fontFamily: "Gilroy",
+						fontFamily: '"Publica Sans Round Medium", sans-serif',
+						h4: {
+							fontSize: "2rem", // Matches the "Good morning, James!" heading
+							fontWeight: 600,
+						},
+						h6: {
+							fontSize: "16px", // For card titles
+							fontWeight: 500,
+						},
+						body1: {
+							fontSize: "1rem",
+						},
+						body2: {
+							fontSize: "0.875rem",
+							color: "#b0b0b0",
+						},
 					},
 					cssVariables: {
 						colorSchemeSelector: "data-mui-color-scheme",
 						cssVarPrefix: "template",
 					},
 					shadows,
-					shape,
+					shape: {
+						borderRadius: 8, // Matches the rounded corners in the image
+					},
 					components: {
 						...inputsCustomizations,
 						...dataDisplayCustomizations,
diff --git a/src/shared-theme/customizations/dataDisplay.js b/src/shared-theme/customizations/dataDisplay.js
index f193bab..6eb1af3 100644
--- a/src/shared-theme/customizations/dataDisplay.js
+++ b/src/shared-theme/customizations/dataDisplay.js
@@ -8,229 +8,230 @@ import { gray, red, green } from '../themePrimitives';
 
 /* eslint-disable import/prefer-default-export */
 export const dataDisplayCustomizations = {
-  MuiList: {
-    styleOverrides: {
-      root: {
-        // padding: '8px',
-        display: 'flex',
-        flexDirection: 'column',
+	MuiList: {
+		styleOverrides: {
+			root: {
+				// padding: '8px',
+				display: "flex",
+				flexDirection: "column",
 
-        gap: 0,
-      },
-    },
-  },
-  MuiListItem: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        [`& .${svgIconClasses.root}`]: {
-          width: '1rem',
-          height: '1rem',
-          color: (theme.vars || theme).palette.text.secondary,
-        },
-        [`& .${typographyClasses.root}`]: {
-          fontWeight: 500,
-          fontSize:"16px"
-        },
-        [`& .${buttonBaseClasses.root}`]: {
-          display: 'flex',
-          // gap: 8,
-          // padding: '2px 8px',
-          borderRadius: (theme.vars || theme).shape.borderRadius,
-          opacity: 0.7,
-          '&.Mui-selected': {
-            opacity: 1,
-            backgroundColor: alpha(theme.palette.action.selected, 0.3),
-           
-            [`& .${svgIconClasses.root}`]: {
-              color: (theme.vars || theme).palette.text.primary,
-            },
-            '&:focus-visible': {
-              backgroundColor: alpha(theme.palette.action.selected, 0.3),
-            },
-            '&:hover': {
-              backgroundColor: alpha(theme.palette.action.selected, 0.5),
-            },
-          },
-          '&:focus-visible': {
-            backgroundColor: 'transparent',
-          },
-        },
-      }),
-    },
-  },
-  MuiListItemText: {
-    styleOverrides: {
-      primary: ({ theme }) => ({
-        fontSize: "16px",
-        fontWeight: 500,
-        lineHeight: theme.typography.body2.lineHeight,
-      }),
-      secondary: ({ theme }) => ({
-        fontSize: theme.typography.caption.fontSize,
-        lineHeight: theme.typography.caption.lineHeight,
-      }),
-    },
-  },
-  MuiListSubheader: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        backgroundColor: 'transparent',
-        // padding: '4px 8px',
-        fontSize: theme.typography.caption.fontSize,
-        fontWeight: 500,
-        lineHeight: theme.typography.caption.lineHeight,
-      }),
-    },
-  },
-  MuiListItemIcon: {
-    styleOverrides: {
-      root: {
-        minWidth: 0,
-      },
-    },
-  },
-  MuiChip: {
-    defaultProps: {
-      size: 'small',
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        border: '1px solid',
-        borderRadius: '999px',
-        [`& .${chipClasses.label}`]: {
-          fontWeight: 600,
-        },
-        variants: [
-          {
-            props: {
-              color: 'default',
-            },
-            style: {
-              borderColor: gray[200],
-              backgroundColor: gray[100],
-              [`& .${chipClasses.label}`]: {
-                color: gray[500],
-              },
-              [`& .${chipClasses.icon}`]: {
-                color: gray[500],
-              },
-              ...theme.applyStyles('dark', {
-                borderColor: gray[700],
-                backgroundColor: gray[800],
-                [`& .${chipClasses.label}`]: {
-                  color: gray[300],
-                },
-                [`& .${chipClasses.icon}`]: {
-                  color: gray[300],
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              color: 'success',
-            },
-            style: {
-              borderColor: green[200],
-              backgroundColor: green[50],
-              [`& .${chipClasses.label}`]: {
-                color: green[500],
-              },
-              [`& .${chipClasses.icon}`]: {
-                color: green[500],
-              },
-              ...theme.applyStyles('dark', {
-                borderColor: green[800],
-                backgroundColor: green[900],
-                [`& .${chipClasses.label}`]: {
-                  color: green[300],
-                },
-                [`& .${chipClasses.icon}`]: {
-                  color: green[300],
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              color: 'error',
-            },
-            style: {
-              borderColor: red[100],
-              backgroundColor: red[50],
-              [`& .${chipClasses.label}`]: {
-                color: red[500],
-              },
-              [`& .${chipClasses.icon}`]: {
-                color: red[500],
-              },
-              ...theme.applyStyles('dark', {
-                borderColor: red[800],
-                backgroundColor: red[900],
-                [`& .${chipClasses.label}`]: {
-                  color: red[200],
-                },
-                [`& .${chipClasses.icon}`]: {
-                  color: red[300],
-                },
-              }),
-            },
-          },
-          {
-            props: { size: 'small' },
-            style: {
-              maxHeight: 20,
-              [`& .${chipClasses.label}`]: {
-                fontSize: theme.typography.caption.fontSize,
-              },
-              [`& .${svgIconClasses.root}`]: {
-                fontSize: theme.typography.caption.fontSize,
-              },
-            },
-          },
-          {
-            props: { size: 'medium' },
-            style: {
-              [`& .${chipClasses.label}`]: {
-                fontSize: theme.typography.caption.fontSize,
-              },
-            },
-          },
-        ],
-      }),
-    },
-  },
-  MuiTablePagination: {
-    styleOverrides: {
-      actions: {
-        display: 'flex',
-        gap: 8,
-        marginRight: 6,
-        [`& .${iconButtonClasses.root}`]: {
-          minWidth: 0,
-          width: 36,
-          height: 36,
-        },
-      },
-    },
-  },
-  MuiIcon: {
-    defaultProps: {
-      fontSize: 'small',
-    },
-    styleOverrides: {
-      root: {
-        variants: [
-          {
-            props: {
-              fontSize: 'small',
-            },
-            style: {
-              fontSize: '1rem',
-            },
-          },
-        ],
-      },
-    },
-  },
+				gap: 0,
+			},
+		},
+	},
+	MuiListItem: {
+		styleOverrides: {
+			root: ({ theme }) => ({
+				[`& .${svgIconClasses.root}`]: {
+					width: "3rem",
+					height: "2rem",
+					color: (theme.vars || theme).palette.text.secondary,
+				},
+				[`& .${typographyClasses.root}`]: {
+					fontWeight: 500,
+					fontSize: "16px",
+				},
+				[`& .${buttonBaseClasses.root}`]: {
+					display: "flex",
+					// gap: 8,
+					// padding: '2px 8px',
+					borderRadius: (theme.vars || theme).shape.borderRadius,
+					opacity: 0.7,
+					"&.Mui-selected": {
+						opacity: 2,
+						// backgroundColor: "rgb(66, 64, 64)",
+
+						[`& .${svgIconClasses.root}`]: {
+							//color: (theme.vars || theme).palette.text.primary,
+							color: "	#FFFFFF",
+						},
+						"&:focus-visible": {
+							// backgroundColor: alpha(theme.palette.action.selected, 0.3),
+						},
+						"&:hover": {
+							//backgroundColor: alpha(theme.palette.action.selected, 0.5),
+						},
+					},
+					// "&:focus-visible": {
+					// 	backgroundColor: "transparent",
+					// },
+				},
+			}),
+		},
+	},
+	MuiListItemText: {
+		styleOverrides: {
+			primary: ({ theme }) => ({
+				fontSize: "16px",
+				fontWeight: 500,
+				lineHeight: theme.typography.body2.lineHeight,
+			}),
+			secondary: ({ theme }) => ({
+				fontSize: theme.typography.caption.fontSize,
+				lineHeight: theme.typography.caption.lineHeight,
+			}),
+		},
+	},
+	MuiListSubheader: {
+		styleOverrides: {
+			root: ({ theme }) => ({
+				backgroundColor: "transparent",
+				// padding: '4px 8px',
+				fontSize: theme.typography.caption.fontSize,
+				fontWeight: 500,
+				lineHeight: theme.typography.caption.lineHeight,
+			}),
+		},
+	},
+	MuiListItemIcon: {
+		styleOverrides: {
+			root: {
+				minWidth: 0,
+			},
+		},
+	},
+	MuiChip: {
+		defaultProps: {
+			size: "small",
+		},
+		styleOverrides: {
+			root: ({ theme }) => ({
+				border: "1px solid",
+				borderRadius: "999px",
+				[`& .${chipClasses.label}`]: {
+					fontWeight: 600,
+				},
+				variants: [
+					{
+						props: {
+							color: "default",
+						},
+						style: {
+							borderColor: gray[200],
+							backgroundColor: gray[100],
+							[`& .${chipClasses.label}`]: {
+								color: gray[500],
+							},
+							[`& .${chipClasses.icon}`]: {
+								color: gray[500],
+							},
+							...theme.applyStyles("dark", {
+								borderColor: gray[700],
+								backgroundColor: gray[800],
+								[`& .${chipClasses.label}`]: {
+									color: gray[300],
+								},
+								[`& .${chipClasses.icon}`]: {
+									color: gray[300],
+								},
+							}),
+						},
+					},
+					{
+						props: {
+							color: "success",
+						},
+						style: {
+							borderColor: green[200],
+							backgroundColor: green[50],
+							[`& .${chipClasses.label}`]: {
+								color: green[500],
+							},
+							[`& .${chipClasses.icon}`]: {
+								color: green[500],
+							},
+							...theme.applyStyles("dark", {
+								borderColor: green[800],
+								backgroundColor: green[900],
+								[`& .${chipClasses.label}`]: {
+									color: green[300],
+								},
+								[`& .${chipClasses.icon}`]: {
+									color: green[300],
+								},
+							}),
+						},
+					},
+					{
+						props: {
+							color: "error",
+						},
+						style: {
+							borderColor: red[100],
+							backgroundColor: red[50],
+							[`& .${chipClasses.label}`]: {
+								color: red[500],
+							},
+							[`& .${chipClasses.icon}`]: {
+								color: red[500],
+							},
+							...theme.applyStyles("dark", {
+								borderColor: red[800],
+								backgroundColor: red[900],
+								[`& .${chipClasses.label}`]: {
+									color: red[200],
+								},
+								[`& .${chipClasses.icon}`]: {
+									color: red[300],
+								},
+							}),
+						},
+					},
+					{
+						props: { size: "small" },
+						style: {
+							maxHeight: 20,
+							[`& .${chipClasses.label}`]: {
+								fontSize: theme.typography.caption.fontSize,
+							},
+							[`& .${svgIconClasses.root}`]: {
+								fontSize: theme.typography.caption.fontSize,
+							},
+						},
+					},
+					{
+						props: { size: "medium" },
+						style: {
+							[`& .${chipClasses.label}`]: {
+								fontSize: theme.typography.caption.fontSize,
+							},
+						},
+					},
+				],
+			}),
+		},
+	},
+	MuiTablePagination: {
+		styleOverrides: {
+			actions: {
+				display: "flex",
+				gap: 8,
+				marginRight: 6,
+				[`& .${iconButtonClasses.root}`]: {
+					minWidth: 0,
+					width: 36,
+					height: 36,
+				},
+			},
+		},
+	},
+	MuiIcon: {
+		defaultProps: {
+			fontSize: "small",
+		},
+		styleOverrides: {
+			root: {
+				variants: [
+					{
+						props: {
+							fontSize: "small",
+						},
+						style: {
+							fontSize: "1rem",
+						},
+					},
+				],
+			},
+		},
+	},
 };
diff --git a/src/shared-theme/customizations/dataDisplay.tsx b/src/shared-theme/customizations/dataDisplay.tsx
index 0b71145..8d5bd1f 100644
--- a/src/shared-theme/customizations/dataDisplay.tsx
+++ b/src/shared-theme/customizations/dataDisplay.tsx
@@ -21,6 +21,7 @@ export const dataDisplayCustomizations: Components<Theme> = {
   MuiListItem: {
     styleOverrides: {
       root: ({ theme }) => ({
+        
         [`& .${svgIconClasses.root}`]: {
           width: '1rem',
           height: '1rem',
@@ -41,7 +42,7 @@ export const dataDisplayCustomizations: Components<Theme> = {
             backgroundColor: alpha(theme.palette.action.selected, 0.3),
            
             [`& .${svgIconClasses.root}`]: {
-              color: (theme.vars || theme).palette.text.primary,
+             color: (theme.vars || theme).palette.text.primary,
             },
             '&:focus-visible': {
               backgroundColor: alpha(theme.palette.action.selected, 0.3),
@@ -50,6 +51,7 @@ export const dataDisplayCustomizations: Components<Theme> = {
               backgroundColor: alpha(theme.palette.action.selected, 0.5),
             },
           },
+          
           '&:focus-visible': {
             backgroundColor: 'transparent',
           },
diff --git a/src/shared-theme/customizations/inputs.js b/src/shared-theme/customizations/inputs.js
index 06b159b..af5fccc 100644
--- a/src/shared-theme/customizations/inputs.js
+++ b/src/shared-theme/customizations/inputs.js
@@ -12,435 +12,449 @@ import {autofillFix} from './autoFill';
 
 /* eslint-disable import/prefer-default-export */
 export const inputsCustomizations = {
-  MuiButtonBase: {
-    defaultProps: {
-      disableTouchRipple: true,
-      disableRipple: true,
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        boxSizing: 'border-box',
-        transition: 'all 100ms ease-in',
-        '&:focus-visible': {
-          outline: `3px solid ${alpha(theme.palette.primary.main, 0.5)}`,
-          outlineOffset: '2px',
-        },
-      }),
-    },
-  },
-  MuiButton: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        boxShadow: 'none',
-        borderRadius: (theme.vars || theme).shape.borderRadius,
-        textTransform: 'none',
-        variants: [
-          {
-            props: {
-              size: 'small',
-            },
-            style: {
-              height: '2.25rem',
-              padding: '8px 12px',
-            },
-          },
-          {
-            props: {
-              size: 'medium',
-            },
-            style: {
-              height: '2.5rem', // 40px
-            },
-          },
-          {
-            props: {
-              color: 'primary',
-              variant: 'contained',
-            },
-            style: {
-              color: 'white',
-              backgroundColor: gray[900],
-              backgroundImage: `linear-gradient(to bottom, ${gray[700]}, ${gray[800]})`,
-              boxShadow: `inset 0 1px 0 ${gray[600]}, inset 0 -1px 0 1px hsl(220, 0%, 0%)`,
-              border: `1px solid ${gray[700]}`,
-              '&:hover': {
-                backgroundImage: 'none',
-                backgroundColor: gray[700],
-                boxShadow: 'none',
-              },
-              '&:active': {
-                backgroundColor: gray[800],
-              },
-              ...theme.applyStyles('dark', {
-                color: 'black',
-                backgroundColor: gray[50],
-                backgroundImage: `linear-gradient(to bottom, ${gray[100]}, ${gray[50]})`,
-                boxShadow: 'inset 0 -1px 0  hsl(220, 30%, 80%)',
-                border: `1px solid ${gray[50]}`,
-                '&:hover': {
-                  backgroundImage: 'none',
-                  backgroundColor: gray[300],
-                  boxShadow: 'none',
-                },
-                '&:active': {
-                  backgroundColor: gray[400],
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              color: 'secondary',
-              variant: 'contained',
-            },
-            style: {
-              color: 'white',
-              backgroundColor: brand[300],
-              backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
-              boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
-              border: `1px solid ${brand[500]}`,
-              '&:hover': {
-                backgroundColor: brand[700],
-                boxShadow: 'none',
-              },
-              '&:active': {
-                backgroundColor: brand[700],
-                backgroundImage: 'none',
-              },
-            },
-          },
-          {
-            props: {
-              variant: 'outlined',
-            },
-            style: {
-              color: (theme.vars || theme).palette.text.primary,
-              border: '1px solid',
-              borderColor: gray[200],
-              backgroundColor: alpha(gray[50], 0.3),
-              '&:hover': {
-                backgroundColor: gray[100],
-                borderColor: gray[300],
-              },
-              '&:active': {
-                backgroundColor: gray[200],
-              },
-              ...theme.applyStyles('dark', {
-                backgroundColor: gray[800],
-                borderColor: gray[700],
-                '&:hover': {
-                  backgroundColor: gray[900],
-                  borderColor: gray[600],
-                },
-                '&:active': {
-                  backgroundColor: gray[900],
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              color: 'secondary',
-              variant: 'outlined',
-            },
-            style: {
-              color: brand[700],
-              border: '1px solid',
-              borderColor: brand[200],
-              backgroundColor: brand[50],
-              '&:hover': {
-                backgroundColor: brand[100],
-                borderColor: brand[400],
-              },
-              '&:active': {
-                backgroundColor: alpha(brand[200], 0.7),
-              },
-              ...theme.applyStyles('dark', {
-                color: brand[50],
-                border: '1px solid',
-                borderColor: brand[900],
-                backgroundColor: alpha(brand[900], 0.3),
-                '&:hover': {
-                  borderColor: brand[700],
-                  backgroundColor: alpha(brand[900], 0.6),
-                },
-                '&:active': {
-                  backgroundColor: alpha(brand[900], 0.5),
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              variant: 'text',
-            },
-            style: {
-              color: gray[600],
-              '&:hover': {
-                backgroundColor: gray[100],
-              },
-              '&:active': {
-                backgroundColor: gray[200],
-              },
-              ...theme.applyStyles('dark', {
-                color: gray[50],
-                '&:hover': {
-                  backgroundColor: gray[700],
-                },
-                '&:active': {
-                  backgroundColor: alpha(gray[700], 0.7),
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              color: 'secondary',
-              variant: 'text',
-            },
-            style: {
-              color: brand[700],
-              '&:hover': {
-                backgroundColor: alpha(brand[100], 0.5),
-              },
-              '&:active': {
-                backgroundColor: alpha(brand[200], 0.7),
-              },
-              ...theme.applyStyles('dark', {
-                color: brand[100],
-                '&:hover': {
-                  backgroundColor: alpha(brand[900], 0.5),
-                },
-                '&:active': {
-                  backgroundColor: alpha(brand[900], 0.3),
-                },
-              }),
-            },
-          },
-        ],
-      }),
-    },
-  },
-  MuiIconButton: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        boxShadow: 'none',
-        borderRadius: (theme.vars || theme).shape.borderRadius,
-        textTransform: 'none',
-        fontWeight: theme.typography.fontWeightMedium,
-        letterSpacing: 0,
-        color: (theme.vars || theme).palette.text.primary,
-        border: '1px solid ',
-        borderColor: gray[200],
-        backgroundColor: alpha(gray[50], 0.3),
-        '&:hover': {
-          backgroundColor: gray[100],
-          borderColor: gray[300],
-        },
-        '&:active': {
-          backgroundColor: gray[200],
-        },
-        ...theme.applyStyles('dark', {
-          backgroundColor: gray[800],
-          borderColor: gray[700],
-          '&:hover': {
-            backgroundColor: gray[900],
-            borderColor: gray[600],
-          },
-          '&:active': {
-            backgroundColor: gray[900],
-          },
-        }),
-        variants: [
-          {
-            props: {
-              size: 'small',
-            },
-            style: {
-              width: '2.25rem',
-              height: '2.25rem',
-              padding: '0.25rem',
-              [`& .${svgIconClasses.root}`]: { fontSize: '1rem' },
-            },
-          },
-          {
-            props: {
-              size: 'medium',
-            },
-            style: {
-              width: '2.5rem',
-              height: '2.5rem',
-            },
-          },
-        ],
-      }),
-    },
-  },
-  MuiToggleButtonGroup: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        borderRadius: '10px',
-        boxShadow: `0 4px 16px ${alpha(gray[400], 0.2)}`,
-        [`& .${toggleButtonGroupClasses.selected}`]: {
-          color: brand[500],
-        },
-        ...theme.applyStyles('dark', {
-          [`& .${toggleButtonGroupClasses.selected}`]: {
-            color: '#fff',
-          },
-          boxShadow: `0 4px 16px ${alpha(brand[700], 0.5)}`,
-        }),
-      }),
-    },
-  },
-  MuiToggleButton: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        padding: '12px 16px',
-        textTransform: 'none',
-        borderRadius: '10px',
-        fontWeight: 500,
-        ...theme.applyStyles('dark', {
-          color: gray[400],
-          boxShadow: '0 4px 16px rgba(0, 0, 0, 0.5)',
-          [`&.${toggleButtonClasses.selected}`]: {
-            color: brand[300],
-          },
-        }),
-      }),
-    },
-  },
-  MuiCheckbox: {
-    defaultProps: {
-      disableRipple: true,
-      icon: (
-        <CheckBoxOutlineBlankRoundedIcon sx={{ color: 'hsla(210, 0%, 0%, 0.0)' }} />
-      ),
-      checkedIcon: <CheckRoundedIcon sx={{ height: 14, width: 14 }} />,
-      indeterminateIcon: <RemoveRoundedIcon sx={{ height: 14, width: 14 }} />,
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        margin: 10,
-        height: 16,
-        width: 16,
-        borderRadius: 5,
-        border: '1px solid ',
-        borderColor: alpha(gray[300], 0.8),
-        boxShadow: '0 0 0 1.5px hsla(210, 0%, 0%, 0.04) inset',
-        backgroundColor: alpha(gray[100], 0.4),
-        transition: 'border-color, background-color, 120ms ease-in',
-        '&:hover': {
-          borderColor: brand[300],
-        },
-        '&.Mui-focusVisible': {
-          outline: `3px solid ${alpha(brand[500], 0.5)}`,
-          outlineOffset: '2px',
-          borderColor: brand[400],
-        },
-        '&.Mui-checked': {
-          color: 'white',
-          backgroundColor: brand[500],
-          borderColor: brand[500],
-          boxShadow: `none`,
-          '&:hover': {
-            backgroundColor: brand[600],
-          },
-        },
-        ...theme.applyStyles('dark', {
-          borderColor: alpha(gray[700], 0.8),
-          boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset',
-          backgroundColor: alpha(gray[900], 0.8),
-          '&:hover': {
-            borderColor: brand[300],
-          },
-          '&.Mui-focusVisible': {
-            borderColor: brand[400],
-            outline: `3px solid ${alpha(brand[500], 0.5)}`,
-            outlineOffset: '2px',
-          },
-        }),
-      }),
-    },
-  },
-  MuiInputBase: {
-    styleOverrides: {
-      root: {
-        border: 'none',
-      },
-      input: {
-        '&::placeholder': {
-          opacity: 0.7,
-          color: gray[500],
-        },
-      },
-    },
-  },
-  MuiOutlinedInput: {
-    styleOverrides: {
-      input: {
-        padding: 0,
-        ...autofillFix,
-      },
-      root: ({ theme }) => ({
-        padding: '8px 12px',
-        color: (theme.vars || theme).palette.text.primary,
-        borderRadius: (theme.vars || theme).shape.borderRadius,
-        border: `1px solid ${(theme.vars || theme).palette.divider}`,
-        backgroundColor: "#272727",
-        transition: 'border 120ms ease-in',
-        '&:hover': {
-          borderColor: gray[400],
-        },
-        [`&.${outlinedInputClasses.focused}`]: {
-          outline: `3px solid ${alpha(brand[500], 0.5)}`,
-          borderColor: brand[400],
-        },
-        ...theme.applyStyles('dark', {
-          '&:hover': {
-            borderColor: gray[500],
-          },
-        }),
-        variants: [
-          {
-            props: {
-              size: 'small',
-            },
-            style: {
-              height: '2.25rem',
-            },
-          },
-          {
-            props: {
-              size: 'medium',
-            },
-            style: {
-              height: '2.5rem',
-            },
-          },
-        ],
-      }),
-      notchedOutline: {
-        border: 'none',
-      },
-    },
-  },
-  MuiInputAdornment: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        color: (theme.vars || theme).palette.grey[500],
-        ...theme.applyStyles('dark', {
-          color: (theme.vars || theme).palette.grey[400],
-        }),
-      }),
-    },
-  },
-  MuiFormLabel: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        typography: theme.typography.caption,
-        marginBottom: 8,
-      }),
-    },
-  },
+	MuiButtonBase: {
+		defaultProps: {
+			disableTouchRipple: true,
+			disableRipple: true,
+		},
+		styleOverrides: {
+			root: ({ theme }) => ({
+				boxSizing: "border-box",
+				transition: "all 100ms ease-in",
+				"&:focus-visible": {
+					outline: `3px solid ${alpha(
+						theme.palette.primary.main,
+						0.5
+					)}`,
+					outlineOffset: "2px",
+				},
+			}),
+		},
+	},
+	MuiButton: {
+		styleOverrides: {
+			root: ({ theme }) => ({
+				boxShadow: "none",
+				borderRadius: (theme.vars || theme).shape.borderRadius,
+				textTransform: "none",
+				variants: [
+					{
+						props: {
+							size: "small",
+						},
+						style: {
+							height: "2.25rem",
+							padding: "8px 12px",
+						},
+					},
+					{
+						props: {
+							size: "medium",
+						},
+						style: {
+							height: "2.5rem", // 40px
+						},
+					},
+					{
+						props: {
+							color: "primary",
+							variant: "contained",
+						},
+						style: {
+							color: "white",
+							backgroundColor: gray[900],
+							backgroundImage: `linear-gradient(to bottom, ${gray[700]}, ${gray[800]})`,
+							boxShadow: `inset 0 1px 0 ${gray[600]}, inset 0 -1px 0 1px hsl(220, 0%, 0%)`,
+							border: `1px solid ${gray[700]}`,
+							"&:hover": {
+								backgroundImage: "none",
+								backgroundColor: gray[700],
+								boxShadow: "none",
+							},
+							"&:active": {
+								backgroundColor: gray[800],
+							},
+							...theme.applyStyles("dark", {
+								color: "black",
+								backgroundColor: gray[50],
+								backgroundImage: `linear-gradient(to bottom, ${gray[100]}, ${gray[50]})`,
+								boxShadow: "inset 0 -1px 0  hsl(220, 30%, 80%)",
+								border: `1px solid ${gray[50]}`,
+								"&:hover": {
+									backgroundImage: "none",
+									backgroundColor: gray[300],
+									boxShadow: "none",
+								},
+								"&:active": {
+									backgroundColor: gray[400],
+								},
+							}),
+						},
+					},
+					{
+						props: {
+							color: "secondary",
+							variant: "contained",
+						},
+						style: {
+							color: "white",
+							backgroundColor: brand[300],
+							backgroundImage: `linear-gradient(to bottom, ${alpha(
+								brand[400],
+								0.8
+							)}, ${brand[500]})`,
+							boxShadow: `inset 0 2px 0 ${alpha(
+								brand[200],
+								0.2
+							)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
+							border: `1px solid ${brand[500]}`,
+							"&:hover": {
+								backgroundColor: brand[700],
+								boxShadow: "none",
+							},
+							"&:active": {
+								backgroundColor: brand[700],
+								backgroundImage: "none",
+							},
+						},
+					},
+					{
+						props: {
+							variant: "outlined",
+						},
+						style: {
+							color: (theme.vars || theme).palette.text.primary,
+							border: "1px solid",
+							borderColor: gray[200],
+							backgroundColor: alpha(gray[50], 0.3),
+							"&:hover": {
+								backgroundColor: gray[100],
+								borderColor: gray[300],
+							},
+							"&:active": {
+								backgroundColor: gray[200],
+							},
+							...theme.applyStyles("dark", {
+								backgroundColor: gray[800],
+								borderColor: gray[700],
+								"&:hover": {
+									backgroundColor: gray[900],
+									borderColor: gray[600],
+								},
+								"&:active": {
+									backgroundColor: gray[900],
+								},
+							}),
+						},
+					},
+					{
+						props: {
+							color: "secondary",
+							variant: "outlined",
+						},
+						style: {
+							color: brand[700],
+							border: "1px solid",
+							borderColor: brand[200],
+							backgroundColor: brand[50],
+							"&:hover": {
+								backgroundColor: brand[100],
+								borderColor: brand[400],
+							},
+							"&:active": {
+								backgroundColor: alpha(brand[200], 0.7),
+							},
+							...theme.applyStyles("dark", {
+								color: brand[50],
+								border: "1px solid",
+								borderColor: brand[900],
+								backgroundColor: alpha(brand[900], 0.3),
+								"&:hover": {
+									borderColor: brand[700],
+									backgroundColor: alpha(brand[900], 0.6),
+								},
+								"&:active": {
+									backgroundColor: alpha(brand[900], 0.5),
+								},
+							}),
+						},
+					},
+					{
+						props: {
+							variant: "text",
+						},
+						style: {
+							color: gray[600],
+							"&:hover": {
+								backgroundColor: gray[100],
+							},
+							"&:active": {
+								backgroundColor: gray[200],
+							},
+							...theme.applyStyles("dark", {
+								color: gray[50],
+								"&:hover": {
+									backgroundColor: gray[700],
+								},
+								"&:active": {
+									backgroundColor: alpha(gray[700], 0.7),
+								},
+							}),
+						},
+					},
+					{
+						props: {
+							color: "secondary",
+							variant: "text",
+						},
+						style: {
+							color: brand[700],
+							"&:hover": {
+								backgroundColor: alpha(brand[100], 0.5),
+							},
+							"&:active": {
+								backgroundColor: alpha(brand[200], 0.7),
+							},
+							...theme.applyStyles("dark", {
+								color: brand[100],
+								"&:hover": {
+									backgroundColor: alpha(brand[900], 0.5),
+								},
+								"&:active": {
+									backgroundColor: alpha(brand[900], 0.3),
+								},
+							}),
+						},
+					},
+				],
+			}),
+		},
+	},
+	MuiIconButton: {
+		styleOverrides: {
+			root: ({ theme }) => ({
+				boxShadow: "none",
+				borderRadius: (theme.vars || theme).shape.borderRadius,
+				textTransform: "none",
+				fontWeight: theme.typography.fontWeightMedium,
+				letterSpacing: 0,
+				color: (theme.vars || theme).palette.text.primary,
+				border: "1px solid ",
+				borderColor: gray[200],
+				backgroundColor: alpha(gray[50], 0.3),
+				"&:hover": {
+					backgroundColor: gray[100],
+					borderColor: gray[300],
+				},
+				"&:active": {
+					backgroundColor: gray[200],
+				},
+				...theme.applyStyles("dark", {
+					backgroundColor: gray[800],
+					borderColor: gray[700],
+					"&:hover": {
+						backgroundColor: gray[900],
+						borderColor: gray[600],
+					},
+					"&:active": {
+						backgroundColor: gray[900],
+					},
+				}),
+				variants: [
+					{
+						props: {
+							size: "small",
+						},
+						style: {
+							width: "2.25rem",
+							height: "2.25rem",
+							padding: "0.25rem",
+							[`& .${svgIconClasses.root}`]: { fontSize: "1rem" },
+						},
+					},
+					{
+						props: {
+							size: "medium",
+						},
+						style: {
+							width: "2.5rem",
+							height: "2.5rem",
+						},
+					},
+				],
+			}),
+		},
+	},
+	MuiToggleButtonGroup: {
+		styleOverrides: {
+			root: ({ theme }) => ({
+				borderRadius: "10px",
+				boxShadow: `0 4px 16px ${alpha(gray[400], 0.2)}`,
+				[`& .${toggleButtonGroupClasses.selected}`]: {
+					color: brand[500],
+				},
+				...theme.applyStyles("dark", {
+					[`& .${toggleButtonGroupClasses.selected}`]: {
+						color: "#fff",
+					},
+					boxShadow: `0 4px 16px ${alpha(brand[700], 0.5)}`,
+				}),
+			}),
+		},
+	},
+	MuiToggleButton: {
+		styleOverrides: {
+			root: ({ theme }) => ({
+				padding: "12px 16px",
+				textTransform: "none",
+				borderRadius: "10px",
+				fontWeight: 500,
+				...theme.applyStyles("dark", {
+					color: gray[400],
+					boxShadow: "0 4px 16px rgba(0, 0, 0, 0.5)",
+					[`&.${toggleButtonClasses.selected}`]: {
+						color: brand[300],
+					},
+				}),
+			}),
+		},
+	},
+	MuiCheckbox: {
+		defaultProps: {
+			disableRipple: true,
+			icon: (
+				<CheckBoxOutlineBlankRoundedIcon
+					sx={{ color: "hsla(210, 0%, 0%, 0.0)" }}
+				/>
+			),
+			checkedIcon: <CheckRoundedIcon sx={{ height: 14, width: 14 }} />,
+			indeterminateIcon: (
+				<RemoveRoundedIcon sx={{ height: 14, width: 14 }} />
+			),
+		},
+		styleOverrides: {
+			root: ({ theme }) => ({
+				margin: 10,
+				height: 16,
+				width: 16,
+				borderRadius: 5,
+				border: "1px solid ",
+				borderColor: alpha(gray[300], 0.8),
+				boxShadow: "0 0 0 1.5px hsla(210, 0%, 0%, 0.04) inset",
+				backgroundColor: alpha(gray[100], 0.4),
+				transition: "border-color, background-color, 120ms ease-in",
+				"&:hover": {
+					borderColor: brand[300],
+				},
+				"&.Mui-focusVisible": {
+					outline: `3px solid ${alpha(brand[500], 0.5)}`,
+					outlineOffset: "2px",
+					borderColor: brand[400],
+				},
+				"&.Mui-checked": {
+					color: "white",
+					backgroundColor: brand[500],
+					borderColor: brand[500],
+					boxShadow: `none`,
+					"&:hover": {
+						backgroundColor: brand[600],
+					},
+				},
+				...theme.applyStyles("dark", {
+					borderColor: alpha(gray[700], 0.8),
+					boxShadow: "0 0 0 1.5px hsl(210, 0%, 0%) inset",
+					backgroundColor: alpha(gray[900], 0.8),
+					"&:hover": {
+						borderColor: brand[300],
+					},
+					"&.Mui-focusVisible": {
+						borderColor: brand[400],
+						outline: `3px solid ${alpha(brand[500], 0.5)}`,
+						outlineOffset: "2px",
+					},
+				}),
+			}),
+		},
+	},
+	MuiInputBase: {
+		styleOverrides: {
+			root: {
+				border: "none",
+			},
+			input: {
+				"&::placeholder": {
+					opacity: 0.7,
+					color: gray[500],
+				},
+			},
+		},
+	},
+	MuiOutlinedInput: {
+		styleOverrides: {
+			input: {
+				padding: 0,
+				...autofillFix,
+			},
+			root: ({ theme }) => ({
+				padding: "8px 12px",
+				color: (theme.vars || theme).palette.text.primary,
+				borderRadius: (theme.vars || theme).shape.borderRadius,
+				border: `1px solid ${(theme.vars || theme).palette.divider}`,
+				// backgroundColor: "#272727",
+				backgroundColor: "#D9E7ED",
+				transition: "border 120ms ease-in",
+				"&:hover": {
+					borderColor: gray[400],
+				},
+				[`&.${outlinedInputClasses.focused}`]: {
+					outline: `3px solid ${alpha(brand[500], 0.5)}`,
+					borderColor: brand[400],
+				},
+				...theme.applyStyles("dark", {
+					"&:hover": {
+						borderColor: gray[500],
+					},
+				}),
+				variants: [
+					{
+						props: {
+							size: "small",
+						},
+						style: {
+							height: "2.25rem",
+						},
+					},
+					{
+						props: {
+							size: "medium",
+						},
+						style: {
+							height: "2.5rem",
+						},
+					},
+				],
+			}),
+			notchedOutline: {
+				border: "none",
+			},
+		},
+	},
+	MuiInputAdornment: {
+		styleOverrides: {
+			root: ({ theme }) => ({
+				color: (theme.vars || theme).palette.grey[500],
+				...theme.applyStyles("dark", {
+					color: (theme.vars || theme).palette.grey[400],
+				}),
+			}),
+		},
+	},
+	MuiFormLabel: {
+		styleOverrides: {
+			root: ({ theme }) => ({
+				typography: theme.typography.caption,
+				marginBottom: 8,
+			}),
+		},
+	},
 };
diff --git a/src/shared-theme/customizations/navigation.js b/src/shared-theme/customizations/navigation.js
index 3f5a7e7..9459331 100644
--- a/src/shared-theme/customizations/navigation.js
+++ b/src/shared-theme/customizations/navigation.js
@@ -21,10 +21,12 @@ export const navigationCustomizations = {
 				},
 				[`&.${menuItemClasses.selected}`]: {
 					[`&.${menuItemClasses.focusVisible}`]: {
-						backgroundColor: alpha(
-							theme.palette.action.selected,
-							0.3
-						),
+						// backgroundColor: alpha(
+						// 	theme.palette.action.selected,
+						// 	0.3
+						// ),
+
+						backgroundColor: "transparent",
 					},
 				},
 			}),
@@ -41,17 +43,17 @@ export const navigationCustomizations = {
 			paper: ({ theme }) => ({
 				marginTop: "4px",
 				borderRadius: (theme.vars || theme).shape.borderRadius,
-			border: `1px solid #272727`,
+				border: `1px solidrgb(141, 135, 135)`,
 				backgroundImage: "none",
-				//background: "hsl(0, 0%, 100%)",
+				background: "#D9E7ED",
 				boxShadow:
 					"hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px",
 				[`& .${buttonBaseClasses.root}`]: {
 					"&.Mui-selected": {
-						backgroundColor: alpha(
-							theme.palette.action.selected,
-							0.3
-						),
+						backgroundColor: "transparent",
+					},
+					"&.Mui-selected:hover": {
+						backgroundColor: "transparent",
 					},
 				},
 				...theme.applyStyles("dark", {