diff --git a/src/components/AddAdminModal/addAdminModal.tsx b/src/components/AddAdminModal/addAdminModal.tsx
index e459518..5c12acd 100644
--- a/src/components/AddAdminModal/addAdminModal.tsx
+++ b/src/components/AddAdminModal/addAdminModal.tsx
@@ -324,6 +324,7 @@ const AddAdminModal: React.FC<AddAdminModalProps> = ({
 								backgroundColor: "#52ACDF",
 								color: "white",
 								borderRadius: "8px",
+								fontSize: "16px",
 								width: "117px",
 								"&:hover": { backgroundColor: "#439BC1" },
 							}}
diff --git a/src/components/AddBookingModal/addBookingModal.tsx b/src/components/AddBookingModal/addBookingModal.tsx
index 4062a81..b083277 100644
--- a/src/components/AddBookingModal/addBookingModal.tsx
+++ b/src/components/AddBookingModal/addBookingModal.tsx
@@ -125,7 +125,7 @@ export default function AddBookingModal({
 						alignItems: "center",
 					}}
 				>
-					<Typography variant="h6" fontWeight={600}>
+					<Typography variant="h6" fontWeight={600} fontSize={"16px"}>
 						Add Booking
 					</Typography>
 					<CustomIconButton onClick={handleClose}>
@@ -453,6 +453,7 @@ export default function AddBookingModal({
 								backgroundColor: "#52ACDF",
 								color: "white",
 								borderRadius: "8px",
+								fontSize: "16px",
 								width: "117px",
 								"&:hover": { backgroundColor: "#439BC1" },
 							}}
diff --git a/src/components/AddEditAdminModal/addEditAdminModal.tsx b/src/components/AddEditAdminModal/addEditAdminModal.tsx
index 0f85b81..1df20ab 100644
--- a/src/components/AddEditAdminModal/addEditAdminModal.tsx
+++ b/src/components/AddEditAdminModal/addEditAdminModal.tsx
@@ -130,7 +130,7 @@ const AddEditCategoryModal: React.FC<AddEditCategoryModalProps> = ({
 						alignItems: "center",
 					}}
 				>
-					<Typography variant="h6" fontWeight={600}>
+					<Typography variant="h6" fontWeight={600} fontSize={"16px"}>
 						{editRow ? "Edit Admin" : "Add Admin"}
 					</Typography>
 					<CustomIconButton onClick={handleCloseModal}>
@@ -430,6 +430,7 @@ const AddEditCategoryModal: React.FC<AddEditCategoryModalProps> = ({
 								backgroundColor: "#52ACDF",
 								color: "white",
 								borderRadius: "8px",
+								fontSize: "16px",
 								width: "117px",
 								"&:hover": { backgroundColor: "#439BC1" },
 							}}
diff --git a/src/components/AddManagerModal/addManagerModal.tsx b/src/components/AddManagerModal/addManagerModal.tsx
index db9fb96..aac1da3 100644
--- a/src/components/AddManagerModal/addManagerModal.tsx
+++ b/src/components/AddManagerModal/addManagerModal.tsx
@@ -106,7 +106,7 @@ export default function AddManagerModal({
 						alignItems: "center",
 					}}
 				>
-					<Typography variant="h6" fontWeight={600}>
+					<Typography variant="h6" fontWeight={600} fontSize={"16px"}>
 						Add Manager
 					</Typography>
 					<CustomIconButton onClick={handleClose}>
@@ -130,7 +130,6 @@ export default function AddManagerModal({
 								placeholder="Enter Manager Name"
 								size="small"
 								sx={{ marginTop: 1 }}
-
 								error={!!errors.name}
 								helperText={
 									errors.name ? errors.name.message : ""
@@ -160,10 +159,7 @@ export default function AddManagerModal({
 					{/* Station Dropdown */}
 					<Box sx={{ display: "flex", gap: 2, mb: 2 }}>
 						<Box sx={{ flex: 1 }}>
-							<Typography
-								variant="body2"
-								fontWeight={500}
-							>
+							<Typography variant="body2" fontWeight={500}>
 								Select Station
 							</Typography>
 							<FormControl
@@ -176,7 +172,6 @@ export default function AddManagerModal({
 										required: "Station Name is required",
 									})}
 									sx={{ marginTop: 1 }}
-
 									displayEmpty
 									defaultValue=""
 									renderValue={(selected) => {
@@ -239,7 +234,6 @@ export default function AddManagerModal({
 								placeholder="Enter Manager Email"
 								size="small"
 								sx={{ marginTop: 1 }}
-
 								autoComplete="new-email"
 								error={!!errors.email}
 								helperText={
@@ -281,7 +275,6 @@ export default function AddManagerModal({
 										{...field}
 										required
 										sx={{ marginTop: 1 }}
-
 										autoComplete="new-password"
 										placeholder="Enter Password"
 										type={
@@ -334,7 +327,6 @@ export default function AddManagerModal({
 								placeholder="Enter Phone Number"
 								size="small"
 								sx={{ marginTop: 1 }}
-
 								error={!!errors.phone}
 								helperText={
 									errors.phone ? errors.phone.message : ""
@@ -372,6 +364,7 @@ export default function AddManagerModal({
 								backgroundColor: "#52ACDF",
 								color: "white",
 								borderRadius: "8px",
+								fontSize: "16px",
 								width: "117px",
 								"&:hover": { backgroundColor: "#439BC1" },
 							}}
diff --git a/src/components/AddSlotModal/addSlotModal.tsx b/src/components/AddSlotModal/addSlotModal.tsx
index 1986283..2950115 100644
--- a/src/components/AddSlotModal/addSlotModal.tsx
+++ b/src/components/AddSlotModal/addSlotModal.tsx
@@ -1,173 +1,25 @@
-// import React, { useState } from "react";
-// import {
-// 	Dialog,
-// 	DialogActions,
-// 	DialogContent,
-// 	DialogTitle,
-// 	Button,
-// 	TextField,
-// 	Typography,
-// 	Box,
-// } from "@mui/material";
-// import { useForm } from "react-hook-form";
-
-// const AddSlotModal = ({ open, handleClose, handleAddSlot }: any) => {
-// 	const {
-// 		register,
-// 		handleSubmit,
-// 		reset,
-// 		formState: { errors },
-// 	} = useForm();
-// 	const [isAvailable, setIsAvailable] = useState<boolean>(true); // Default is available
-
-// 	// Get today's date in the format yyyy-mm-dd
-// 	const today = new Date().toISOString().split("T")[0];
-
-// 	const onSubmit = (data: {
-// 		date: string;
-// 		startHour: string;
-// 		endHour: string;
-// 	}) => {
-// 		handleAddSlot({ ...data, isAvailable });
-// 		reset();
-// 		handleClose();
-// 	};
-
-// 	return (
-// 		<Dialog open={open} onClose={handleClose}>
-// 			<DialogTitle>Add EV Slot</DialogTitle>
-// 			<DialogContent>
-// 				<form onSubmit={handleSubmit(onSubmit)}>
-// 					<Typography variant="body2" fontWeight={500}>
-// 						Date
-// 					</Typography>
-// 					<TextField
-// 						{...register("date", {
-// 							required: "Date is required",
-// 							validate: (value) =>
-// 								value >= today || "Date cannot be in the past",
-// 						})}
-// 						// label="Date"
-// 						// sx={{ marginTop: 1 }}
-// 						type="date"
-// 						fullWidth
-// 						margin="normal"
-// 						slotProps={{
-// 							inputLabel: {
-// 								shrink: true,
-// 							},
-// 						}}
-// 						error={!!errors.date}
-// 						helperText={errors.date?.message}
-// 						// Set the min value to today's date
-// 						inputProps={{ min: today }}
-// 					/>
-// 					<Typography variant="body2" fontWeight={500}>
-// 						Start Hour
-// 					</Typography>
-// 					<TextField
-// 						{...register("startHour", {
-// 							required: "Start hour is required",
-// 						})}
-// 						// label="Start Hour"
-// 						type="time"
-// 						// sx={{ marginTop: 1 }}
-// 						fullWidth
-// 						margin="normal"
-// 						slotProps={{
-// 							inputLabel: {
-// 								shrink: true,
-// 							},
-// 						}}
-// 						error={!!errors.startHour}
-// 						helperText={errors.startHour?.message}
-// 					/>
-// 					<Typography variant="body2" fontWeight={500}>
-// 						End Hour
-// 					</Typography>
-// 					<TextField
-// 						{...register("endHour", {
-// 							required: "End hour is required",
-// 						})}
-// 						// label="End Hour"
-// 						type="time"
-// 						// sx={{ marginTop: 1 }}
-// 						fullWidth
-// 						margin="normal"
-// 						InputLabelProps={{
-// 							shrink: true,
-// 						}}
-// 						error={!!errors.endHour}
-// 						helperText={errors.endHour?.message}
-// 					/>
-// 					{/* Availability Toggle */}
-// 					<Box
-// 						display="flex"
-// 						alignItems="center"
-// 						justifyContent="space-between"
-// 						gap={2}
-// 					>
-
-// 						<Button
-// 							onClick={() => setIsAvailable((prev) => !prev)}
-// 							variant={isAvailable ? "contained" : "outlined"}
-// 							color="primary"
-// 							sx={{ marginTop: 1 }}
-
-// 						>
-// 							Check Availability
-// 						</Button>
-// 						<Typography>
-// 							{isAvailable ? "Available" : "Not Available"}
-// 						</Typography>
-// 					</Box>
-// 					<DialogActions>
-// 						<Button onClick={handleClose} color="secondary">
-// 							Cancel
-// 						</Button>
-
-// 						<Button
-// 							type="submit"
-// 							sx={{
-// 								backgroundColor: "#52ACDF",
-// 								color: "white",
-// 								borderRadius: "8px",
-// 								width: "100px",
-// 								"&:hover": { backgroundColor: "#439BC1" },
-// 							}}
-// 						>
-// 							Add Booking
-// 						</Button>
-// 					</DialogActions>
-// 				</form>
-// 			</DialogContent>
-// 		</Dialog>
-// 	);
-// };
-
-// export default AddSlotModal;
 import React, { useState, useEffect } from "react";
 import {
-	Dialog,
-	DialogActions,
-	DialogContent,
-	DialogTitle,
-	Button,
-	TextField,
-	Typography,
 	Box,
+	Button,
+	Typography,
+	Modal,
 	FormControlLabel,
 	Switch,
+	TextField,
 	MenuItem,
 	Select,
-	FormControl,
 	InputLabel,
+	FormControl,
 } from "@mui/material";
 import { useForm } from "react-hook-form";
-import { useDispatch } from "react-redux"; // Import the Redux dispatch
+import { useDispatch } from "react-redux";
 import { createSlot } from "../../redux/slices/slotSlice.ts"; // Assuming this is your slice
+import CloseIcon from "@mui/icons-material/Close";
+import { CustomIconButton } from "../AddUserModal/styled.css"; // Assuming this is for custom styled components
 
 const AddSlotModal = ({ open, handleClose }: any) => {
+	const dispatch = useDispatch(); // Get dispatch from Redux
 	const {
 		register,
 		handleSubmit,
@@ -175,17 +27,13 @@ const AddSlotModal = ({ open, handleClose }: any) => {
 		watch,
 		formState: { errors },
 	} = useForm();
-	const dispatch = useDispatch(); // Get dispatch from Redux
 
 	const [isAvailable, setIsAvailable] = useState<boolean>(true);
 	const [isDateRange, setIsDateRange] = useState<boolean>(false);
-	const [durationUnit, setDurationUnit] = useState<string>("minutes");
 	const [minEndTime, setMinEndTime] = useState<string>("");
+	const [durationUnit, setDurationUnit] = useState<string>("minutes"); // New state for duration unit
 
-	// Get today's date in the format yyyy-mm-dd
 	const today = new Date().toISOString().split("T")[0];
-
-	// Watch the start time value
 	const startHour = watch("startHour");
 
 	useEffect(() => {
@@ -194,214 +42,256 @@ const AddSlotModal = ({ open, handleClose }: any) => {
 		}
 	}, [startHour]);
 
-const onSubmit = (data: any) => {
-	const {
-		date,
-		startingDate,
-		endingDate,
-		startHour,
-		endHour,
-		duration,
-	
-	} = data;
+	const onSubmit = (data: any) => {
+		const { date, startingDate, endingDate, startHour, endHour, duration } =
+			data;
 
-	const payload = isDateRange
-		? {
-				startingDate,
-				endingDate,
-				startHour,
-				endHour,
-				duration: parseInt(duration, 10),
-				isAvailable,
-				
-		  }
-		: {
-				date,
-				startHour,
-				endHour,
-				duration: parseInt(duration, 10),
-				isAvailable,
-				
-		  };
-
-	dispatch(createSlot(payload));
-	reset();
-	handleClose();
-};
+		const payload = isDateRange
+			? {
+					startingDate,
+					endingDate,
+					startHour,
+					endHour,
+					duration: parseInt(duration, 10),
+					durationUnit, // Include the duration unit (minutes or hours)
+					isAvailable,
+			  }
+			: {
+					date,
+					startHour,
+					endHour,
+					duration: parseInt(duration, 10),
+					durationUnit, // Include the duration unit (minutes or hours)
+					isAvailable,
+			  };
 
+		dispatch(createSlot(payload));
+		reset();
+		handleClose();
+	};
 
 	return (
-		<Dialog open={open} onClose={handleClose}>
-			<DialogTitle>Add EV Slot</DialogTitle>
-			<DialogContent>
-				<form onSubmit={handleSubmit(onSubmit)}>
-					<FormControlLabel
-						control={
-							<Switch
-								checked={isDateRange}
-								onChange={() => setIsDateRange(!isDateRange)}
-							/>
-						}
-						label="Select Date Range"
-					/>
-					{isDateRange ? (
-						<>
-							<Typography variant="body2" fontWeight={500}>
-								Start Date
-							</Typography>
-							<TextField
-								{...register("startingDate", {
-									required: "Start date is required",
-									validate: (value) =>
-										value >= today ||
-										"Start date cannot be in the past",
-								})}
-								type="date"
-								fullWidth
-								margin="normal"
-								error={!!errors.startingDate}
-								helperText={errors.startingDate?.message}
-								inputProps={{ min: today }}
-							/>
-							<Typography variant="body2" fontWeight={500}>
-								End Date
-							</Typography>
-							<TextField
-								{...register("endingDate", {
-									required: "End date is required",
-									validate: (value) =>
-										value >= today ||
-										"End date cannot be in the past",
-								})}
-								type="date"
-								fullWidth
-								margin="normal"
-								error={!!errors.endingDate}
-								helperText={errors.endingDate?.message}
-								inputProps={{ min: today }}
-							/>
-						</>
-					) : (
-						<>
-							<Typography variant="body2" fontWeight={500}>
-								Date
-							</Typography>
-							<TextField
-								{...register("date", {
-									required: "Date is required",
-									validate: (value) =>
-										value >= today ||
-										"Date cannot be in the past",
-								})}
-								type="date"
-								fullWidth
-								margin="normal"
-								error={!!errors.date}
-								helperText={errors.date?.message}
-								inputProps={{ min: today }}
-							/>
-						</>
-					)}
-					<Typography variant="body2" fontWeight={500}>
-						Start Hour
+		<Modal
+			open={open}
+			onClose={(e, reason) => {
+				if (reason === "backdropClick") {
+					return;
+				}
+				handleClose();
+			}}
+			aria-labelledby="add-slot-modal"
+		>
+			<Box
+				component="form"
+				onSubmit={handleSubmit(onSubmit)}
+				sx={{
+					position: "absolute",
+					top: "50%",
+					left: "50%",
+					transform: "translate(-50%, -50%)",
+					width: 400,
+					bgcolor: "background.paper",
+					boxShadow: 24,
+					p: 3,
+					borderRadius: 2,
+				}}
+			>
+				{/* Header */}
+				<Box
+					sx={{
+						display: "flex",
+						justifyContent: "space-between",
+						alignItems: "center",
+					}}
+				>
+					<Typography variant="h6" fontWeight={600} fontSize={"16px"}>
+						Add Slot
 					</Typography>
-					<TextField
-						{...register("startHour", {
-							required: "Start hour is required",
-						})}
-						type="time"
-						fullWidth
-						margin="normal"
-						error={!!errors.startHour}
-						helperText={errors.startHour?.message}
-					/>
-					<Typography variant="body2" fontWeight={500}>
-						End Hour
-					</Typography>
-					<TextField
-						{...register("endHour", {
-							required: "End hour is required",
-							validate: (value) =>
-								value > startHour ||
-								"End hour must be after start hour",
-						})}
-						type="time"
-						fullWidth
-						margin="normal"
-						error={!!errors.endHour}
-						helperText={errors.endHour?.message}
-						inputProps={{ min: minEndTime }}
-					/>
-					<Typography variant="body2" fontWeight={500}>
-						Slot Duration
-					</Typography>
-					<Box display="flex" alignItems="center" gap={2}>
-						<TextField
-							{...register("duration", {
-								required: "Duration is required",
-								pattern: {
-									value: /^[0-9]+$/,
-									message: "Duration must be a number",
-								},
-							})}
-							type="number"
-							fullWidth
-							margin="normal"
-							error={!!errors.duration}
-							helperText={errors.duration?.message}
+					<CustomIconButton onClick={handleClose}>
+						<CloseIcon />
+					</CustomIconButton>
+				</Box>
+
+				{/* Horizontal Line */}
+				<Box sx={{ borderBottom: "1px solid #ddd", my: 2 }} />
+
+				{/* Date Range Toggle */}
+				<FormControlLabel
+					control={
+						<Switch
+							checked={isDateRange}
+							onChange={() => setIsDateRange(!isDateRange)}
 						/>
-						<FormControl fullWidth>
-							
-							<Select
-								value={durationUnit}
-								onChange={(e) =>
-									setDurationUnit(e.target.value)
-								}
-								
-							>
-								<MenuItem value="minutes">Minutes</MenuItem>
-								<MenuItem value="hours">Hours</MenuItem>
-							</Select>
-						</FormControl>
-					</Box>
-					<Box
-						display="flex"
-						alignItems="center"
-						justifyContent="space-between"
-						gap={2}
-					>
-						<Button
-							onClick={() => setIsAvailable((prev) => !prev)}
-							variant={isAvailable ? "contained" : "outlined"}
-							color="primary"
-							sx={{ marginTop: 1 }}
-						>
-							Check Availability
-						</Button>
-						<Typography>
-							{isAvailable ? "Available" : "Not Available"}
+					}
+					label="Select Date Range"
+					sx={{
+						fontWeight: 500,
+						fontSize: "16px",
+						margin: 0,
+					}}
+				/>
+
+				{/* Date Input Fields */}
+				{isDateRange ? (
+					<>
+						<Typography variant="body2" fontWeight={500} mb={0.5}>
+							Start Date
 						</Typography>
-					</Box>
-					<DialogActions>
-						<Button onClick={handleClose} color="secondary">
-							Cancel
-						</Button>
-						<Button
-							type="submit"
-							sx={{
-								backgroundColor: "#52ACDF",
-								color: "white",
-								borderRadius: "8px",
-								width: "100px",
-								"&:hover": { backgroundColor: "#439BC1" },
-							}}
+						<TextField
+							{...register("startingDate", {
+								required: "Start date is required",
+								validate: (value) =>
+									value >= today ||
+									"Start date cannot be in the past",
+							})}
+							type="date"
+							fullWidth
+							error={!!errors.startingDate}
+							helperText={errors.startingDate?.message}
+							inputProps={{ min: today }}
+						/>
+						<Typography variant="body2" fontWeight={500} mb={0.5}>
+							End Date
+						</Typography>
+						<TextField
+							{...register("endingDate", {
+								required: "End date is required",
+								validate: (value) =>
+									value >= today ||
+									"End date cannot be in the past",
+							})}
+							type="date"
+							fullWidth
+							error={!!errors.endingDate}
+							helperText={errors.endingDate?.message}
+							inputProps={{ min: today }}
+						/>
+					</>
+				) : (
+					<>
+						<Typography variant="body2" fontWeight={500} mb={0.5}>
+							Date
+						</Typography>
+						<TextField
+							{...register("date", {
+								required: "Date is required",
+								validate: (value) =>
+									value >= today ||
+									"Date cannot be in the past",
+							})}
+							type="date"
+							fullWidth
+							error={!!errors.date}
+							helperText={errors.date?.message}
+							inputProps={{ min: today }}
+						/>
+					</>
+				)}
+
+				{/* Start Hour */}
+				<Typography variant="body2" fontWeight={500} mb={0.5}>
+					Start Hour
+				</Typography>
+				<TextField
+					{...register("startHour", {
+						required: "Start hour is required",
+					})}
+					type="time"
+					fullWidth
+					error={!!errors.startHour}
+					helperText={errors.startHour?.message}
+				/>
+
+				{/* End Hour */}
+				<Typography variant="body2" fontWeight={500} mb={0.5}>
+					End Hour
+				</Typography>
+				<TextField
+					{...register("endHour", {
+						required: "End hour is required",
+						validate: (value) =>
+							value > startHour ||
+							"End hour must be after start hour",
+					})}
+					type="time"
+					fullWidth
+					error={!!errors.endHour}
+					helperText={errors.endHour?.message}
+					inputProps={{ min: minEndTime }}
+				/>
+
+				{/* Duration and Duration Unit */}
+				<Typography variant="body2" fontWeight={500} mb={0.5}>
+					Slot Duration
+				</Typography>
+				<Box display="flex" alignItems="center" gap={2}>
+					<TextField
+						{...register("duration", {
+							required: "Duration is required",
+							pattern: {
+								value: /^[0-9]+$/,
+								message: "Duration must be a number",
+							},
+						})}
+						type="number"
+						fullWidth
+						error={!!errors.duration}
+						helperText={errors.duration?.message}
+					/>
+
+					{/* Dropdown for selecting Minutes/Hours */}
+					<FormControl fullWidth>
+						<InputLabel>Unit</InputLabel>
+						<Select
+							value={durationUnit}
+							onChange={(e) => setDurationUnit(e.target.value)}
 						>
-							Add Booking
-						</Button>
-					</DialogActions>
-				</form>
-			</DialogContent>
-		</Dialog>
+							<MenuItem value="minutes">Minutes</MenuItem>
+							<MenuItem value="hours">Hours</MenuItem>
+						</Select>
+					</FormControl>
+				</Box>
+
+				{/* Availability Toggle */}
+				<Box
+					display="flex"
+					alignItems="center"
+					justifyContent="space-between"
+					gap={2}
+				>
+					<Button
+						onClick={() => setIsAvailable((prev) => !prev)}
+						variant={isAvailable ? "contained" : "outlined"}
+						color="primary"
+						sx={{ marginTop: 1 }}
+					>
+						Check Availability
+					</Button>
+					<Typography>
+						{isAvailable ? "Available" : "Not Available"}
+					</Typography>
+				</Box>
+
+				{/* Submit Button */}
+				<Box
+					sx={{ display: "flex", justifyContent: "flex-end", mt: 3 }}
+				>
+					<Button
+						type="submit"
+						sx={{
+							backgroundColor: "#52ACDF",
+							color: "white",
+							borderRadius: "8px",
+							fontSize: "16px",
+							width: "117px",
+							"&:hover": { backgroundColor: "#439BC1" },
+						}}
+					>
+						Add Slot
+					</Button>
+				</Box>
+			</Box>
+		</Modal>
 	);
 };
 
diff --git a/src/components/AddStationLocation/addStationLocation.tsx b/src/components/AddStationLocation/addStationLocation.tsx
index 98d2bed..14581eb 100644
--- a/src/components/AddStationLocation/addStationLocation.tsx
+++ b/src/components/AddStationLocation/addStationLocation.tsx
@@ -52,7 +52,7 @@ const AddStationLocationModal = ({
 						helperText={errors.city?.message}
 					/>
 					<DialogActions>
-						<Button onClick={handleClose} color="secondary">
+						<Button onClick={handleClose} color="secondary" fontSize={"16px"}>
 							Cancel
 						</Button>
 						<Button
@@ -61,6 +61,7 @@ const AddStationLocationModal = ({
 								backgroundColor: "#52ACDF",
 								color: "white",
 								borderRadius: "8px",
+								fontSize: "16px",
 								width: "100px",
 								"&:hover": { backgroundColor: "#439BC1" },
 							}}
diff --git a/src/components/AddStationModal/addStationModal.tsx b/src/components/AddStationModal/addStationModal.tsx
index 4b499c7..43256ac 100644
--- a/src/components/AddStationModal/addStationModal.tsx
+++ b/src/components/AddStationModal/addStationModal.tsx
@@ -133,7 +133,7 @@ export default function AddStationModal({
 						alignItems: "center",
 					}}
 				>
-					<Typography variant="h6" fontWeight={600}>
+					<Typography variant="h6" fontWeight={600} fontSize={"16px"}>
 						Add Charging Station
 					</Typography>
 					<CustomIconButton onClick={handleClose}>
@@ -304,23 +304,26 @@ export default function AddStationModal({
 														gap: 0.5,
 													}}
 												>
-													{displayNames.map((id,index) => {
-														const brand =
-															vehicleBrands.find(
-																(b) =>
-																	b.id === id
-															);
-														return brand ? (
-															<Typography
-																key={index}
-																variant="body2"
-															>
-																{brand
-																	? brand.name
-																	: ""}
-															</Typography>
-														) : null;
-													})}
+													{displayNames.map(
+														(id, index) => {
+															const brand =
+																vehicleBrands.find(
+																	(b) =>
+																		b.id ===
+																		id
+																);
+															return brand ? (
+																<Typography
+																	key={index}
+																	variant="body2"
+																>
+																	{brand
+																		? brand.name
+																		: ""}
+																</Typography>
+															) : null;
+														}
+													)}
 
 													{moreCount > 0 && (
 														<Typography
@@ -501,6 +504,7 @@ export default function AddStationModal({
 								backgroundColor: "#52ACDF",
 								color: "white",
 								borderRadius: "8px",
+								fontSize: "16px",
 								width: "117px",
 								"&:hover": { backgroundColor: "#439BC1" },
 							}}
diff --git a/src/components/AddUserModal/addUserModal.tsx b/src/components/AddUserModal/addUserModal.tsx
index 8e8e964..eff5dac 100644
--- a/src/components/AddUserModal/addUserModal.tsx
+++ b/src/components/AddUserModal/addUserModal.tsx
@@ -90,7 +90,7 @@ const AddUserModal: React.FC<AddUserModalProps> = ({
 						alignItems: "center",
 					}}
 				>
-					<Typography variant="h6" fontWeight={600}>
+					<Typography variant="h6" fontWeight={600} fontSize={"16px"}>
 						Add User
 					</Typography>
 					<CustomIconButton onClick={handleClose}>
@@ -318,6 +318,7 @@ const AddUserModal: React.FC<AddUserModalProps> = ({
 								backgroundColor: "#52ACDF",
 								color: "white",
 								borderRadius: "8px",
+								fontSize:"16px",
 								width: "117px",
 								"&:hover": { backgroundColor: "#439BC1" },
 							}}
diff --git a/src/components/AddVehicleModal/addVehicleModal.tsx b/src/components/AddVehicleModal/addVehicleModal.tsx
index 0616059..67ab418 100644
--- a/src/components/AddVehicleModal/addVehicleModal.tsx
+++ b/src/components/AddVehicleModal/addVehicleModal.tsx
@@ -106,7 +106,7 @@ export default function AddVehicleModal({
 						alignItems: "center",
 					}}
 				>
-					<Typography variant="h6" fontWeight={600}>
+					<Typography variant="h6" fontWeight={600} fontSize={"16px"}>
 						Add Vehicle
 					</Typography>
 					<CustomIconButton onClick={handleClose}>
@@ -349,6 +349,7 @@ export default function AddVehicleModal({
 							backgroundColor: "#52ACDF",
 							color: "white",
 							borderRadius: "8px",
+							fontSize:"16px",
 							width: "117px",
 							"&:hover": { backgroundColor: "#439BC1" },
 						}}
diff --git a/src/components/BookingSlotsMangers/bookingslots.tsx b/src/components/BookingSlotsMangers/bookingslots.tsx
index fb83ce0..d73b455 100644
--- a/src/components/BookingSlotsMangers/bookingslots.tsx
+++ b/src/components/BookingSlotsMangers/bookingslots.tsx
@@ -80,7 +80,13 @@ const AddSlotModal = ({ open, handleClose, handleAddSlot }: any) => {
 	return (
 		<Dialog open={open} onClose={handleClose}>
 			<DialogTitle>Add EV Slot</DialogTitle>
-			<DialogContent>
+			<DialogContent
+				sx={{
+					display: "flex",
+					flexDirection: "column",
+					padding:0
+				}}
+			>
 				<form onSubmit={handleSubmit(onSubmit)}>
 					<FormControlLabel
 						control={
diff --git a/src/components/CustomTable/customTable.tsx b/src/components/CustomTable/customTable.tsx
index a57ef96..c272f95 100644
--- a/src/components/CustomTable/customTable.tsx
+++ b/src/components/CustomTable/customTable.tsx
@@ -42,6 +42,7 @@ import {
 } from "../../redux/slices/slotSlice.ts";
 import { bookingList, deleteBooking } from "../../redux/slices/bookSlice.ts";
 import AddCircleIcon from "@mui/icons-material/AddCircle";
+import { autofillFix } from "../../shared-theme/customizations/autoFill.tsx";
 // Styled components for customization
 const StyledTableCell = styled(TableCell)(({ theme }) => ({
 	[`&.${tableCellClasses.head}`]: {
@@ -292,6 +293,7 @@ const CustomTable: React.FC<CustomTableProps> = ({
 					marginTop: "16px",
 					alignItems: { xs: "stretch", sm: "stretch", md: "center" },
 					width: "100%",
+					...autofillFix
 				}}
 			>
 				<TextField
@@ -356,6 +358,7 @@ const CustomTable: React.FC<CustomTableProps> = ({
 								maxWidth: "250px", // Optional: limit it from being *too* wide
 								marginRight: "16px",
 								paddingX: "16px",
+								fontSize:"16px",
 								whiteSpace: "nowrap", // Prevents text from wrapping
 								"&:hover": { backgroundColor: "#439BC1" },
 							}}
diff --git a/src/components/EditSlotModal/editSlotModal.tsx b/src/components/EditSlotModal/editSlotModal.tsx
index 3604733..276f9df 100644
--- a/src/components/EditSlotModal/editSlotModal.tsx
+++ b/src/components/EditSlotModal/editSlotModal.tsx
@@ -133,7 +133,7 @@ const EditSlotModal: React.FC<EditSlotModalProps> = ({
 						alignItems: "center",
 					}}
 				>
-					<Typography variant="h6" fontWeight={600}>
+					<Typography variant="h6" fontWeight={600} fontSize={"16px"}>
 						Edit Slot
 					</Typography>
 					<CustomIconButton onClick={handleClose}>
@@ -225,6 +225,7 @@ const EditSlotModal: React.FC<EditSlotModalProps> = ({
 							backgroundColor: "#52ACDF",
 							color: "white",
 							borderRadius: "8px",
+							fontSize:'16px',
 							width: "117px",
 							"&:hover": { backgroundColor: "#439BC1" },
 						}}
diff --git a/src/components/EditStationModal/editSationModal.tsx b/src/components/EditStationModal/editSationModal.tsx
index e86b02d..6999546 100644
--- a/src/components/EditStationModal/editSationModal.tsx
+++ b/src/components/EditStationModal/editSationModal.tsx
@@ -211,7 +211,7 @@ const EditStationModal: React.FC<EditStationModalProps> = ({
 						alignItems: "center",
 					}}
 				>
-					<Typography variant="h6" fontWeight={600}>
+					<Typography variant="h6" fontWeight={600} fontSize={"16px"}>
 						Edit Charging Station
 					</Typography>
 					<CustomIconButton onClick={handleClose}>
@@ -531,6 +531,7 @@ const EditStationModal: React.FC<EditStationModalProps> = ({
 							backgroundColor: "#52ACDF",
 							color: "white",
 							borderRadius: "8px",
+							fontSize:"16px",
 							width: "117px",
 							"&:hover": { backgroundColor: "#439BC1" },
 						}}
diff --git a/src/components/EditUserModal/editUserModal.tsx b/src/components/EditUserModal/editUserModal.tsx
index 949a0aa..400f437 100644
--- a/src/components/EditUserModal/editUserModal.tsx
+++ b/src/components/EditUserModal/editUserModal.tsx
@@ -95,7 +95,7 @@ const EditUserModal: React.FC<EditUserModalProps> = ({
 						alignItems: "center",
 					}}
 				>
-					<Typography variant="h6" fontWeight={600}>
+					<Typography variant="h6" fontWeight={600} fontSize={"16px"}>
 						Edit User
 					</Typography>
 					<CustomIconButton onClick={handleClose}>
@@ -220,6 +220,7 @@ const EditUserModal: React.FC<EditUserModalProps> = ({
 							backgroundColor: "#52ACDF",
 							color: "white",
 							borderRadius: "8px",
+							fpntSize:"16px",
 							width: "117px",
 							"&:hover": { backgroundColor: "#439BC1" },
 						}}
diff --git a/src/components/EditVehicleModal/editVehicleModal.tsx b/src/components/EditVehicleModal/editVehicleModal.tsx
index 0f7e8db..692fcfa 100644
--- a/src/components/EditVehicleModal/editVehicleModal.tsx
+++ b/src/components/EditVehicleModal/editVehicleModal.tsx
@@ -71,7 +71,6 @@ const EditVehicleModal: React.FC<EditVehicleModalProps> = ({
 			} else {
 				setImagePreview(null);
 			}
-
 		} else {
 			// Reset form and preview when no editRow
 			reset();
@@ -138,7 +137,7 @@ const EditVehicleModal: React.FC<EditVehicleModalProps> = ({
 						alignItems: "center",
 					}}
 				>
-					<Typography variant="h6" fontWeight={600}>
+					<Typography variant="h6" fontWeight={600} fontSize={"16px"}>
 						Edit Vehicle
 					</Typography>
 					<CustomIconButton onClick={handleClose}>
@@ -314,7 +313,6 @@ const EditVehicleModal: React.FC<EditVehicleModalProps> = ({
 							Upload Image
 						</Typography>
 						<Button
-						
 							component="label"
 							sx={{
 								backgroundColor: "#52ACDF",
@@ -364,6 +362,7 @@ const EditVehicleModal: React.FC<EditVehicleModalProps> = ({
 							backgroundColor: "#52ACDF",
 							color: "white",
 							borderRadius: "8px",
+							fontSize: "16px",
 							width: "117px",
 							"&:hover": { backgroundColor: "#439BC1" },
 						}}
diff --git a/src/index.css b/src/index.css
index fdb534b..edad7fc 100644
--- a/src/index.css
+++ b/src/index.css
@@ -12,7 +12,7 @@ code {
 }
 
 .mui-typography {
-  font-family: "Gilroy", sans-serif !important;
+  font-family: "Gilroy";
   background-color: rgb(7, 127, 233);
 }
 
diff --git a/src/pages/EvSlotList/index.tsx b/src/pages/EvSlotList/index.tsx
index 3bc1e37..2253a04 100644
--- a/src/pages/EvSlotList/index.tsx
+++ b/src/pages/EvSlotList/index.tsx
@@ -112,7 +112,6 @@ export default function EVSlotList() {
 		}
 	};
 
-
 	// In handleUpdate method
 	const handleUpdate = async (
 		id: string,
@@ -131,8 +130,6 @@ export default function EVSlotList() {
 				"MM/DD/YYYY, h:mm:ss A"
 			).format("hh:mm A");
 
-
-
 			// Dispatch the update action
 			await dispatch(
 				updateSlot({
@@ -165,32 +162,38 @@ export default function EVSlotList() {
 			: []),
 	];
 
-const slotRows = availableSlots?.length
-	? availableSlots.map((slot, index) => {
-			const formattedDate = dayjs(slot?.date).format("YYYY-MM-DD");
-			const startTime = dayjs(
-				slot?.startTime,
-				"YYYY-MM-DD hh:mm A"
-			).isValid()
-				? dayjs(slot?.startTime, "YYYY-MM-DD hh:mm A").format("hh:mm A")
-				: "Invalid";
+	const slotRows = availableSlots?.length
+		? availableSlots.map((slot, index) => {
+				const formattedDate = dayjs(slot?.date).format("YYYY-MM-DD");
+				const startTime = dayjs(
+					slot?.startTime,
+					"YYYY-MM-DD hh:mm A"
+				).isValid()
+					? dayjs(slot?.startTime, "YYYY-MM-DD hh:mm A").format(
+							"hh:mm A"
+					  )
+					: "Invalid";
 
-			const endTime = dayjs(slot?.endTime, "YYYY-MM-DD hh:mm A").isValid()
-				? dayjs(slot?.endTime, "YYYY-MM-DD hh:mm A").format("hh:mm A")
-				: "Invalid";
-
-			return {
-				srno: index + 1,
-				id: slot?.id ?? "NA",
-				stationName: slot?.stationName ?? "NA",
-				date: formattedDate ?? "NA",
-				startTime: startTime ?? "NA",
-				endTime: endTime ?? "NA",
-				isAvailable: slot?.isAvailable ? "Yes" : "No",
-			};
-	  })
-	: [];
+				const endTime = dayjs(
+					slot?.endTime,
+					"YYYY-MM-DD hh:mm A"
+				).isValid()
+					? dayjs(slot?.endTime, "YYYY-MM-DD hh:mm A").format(
+							"hh:mm A"
+					  )
+					: "Invalid";
 
+				return {
+					srno: index + 1,
+					id: slot?.id ?? "NA",
+					stationName: slot?.stationName ?? "NA",
+					date: formattedDate ?? "NA",
+					startTime: startTime ?? "NA",
+					endTime: endTime ?? "NA",
+					isAvailable: slot?.isAvailable ? "Yes" : "No",
+				};
+		  })
+		: [];
 
 	return (
 		<>
diff --git a/src/shared-theme/AppTheme.tsx b/src/shared-theme/AppTheme.tsx
index 45176c3..5da299e 100644
--- a/src/shared-theme/AppTheme.tsx
+++ b/src/shared-theme/AppTheme.tsx
@@ -32,7 +32,8 @@ export default function AppTheme(props: AppThemeProps) {
 						},
 					},
 					typography: {
-						fontFamily: "Gilroy, sans-serif",
+						fontFamily: "Gilroy",
+						
 					},
 					cssVariables: {
 						colorSchemeSelector: "data-mui-color-scheme",
diff --git a/src/shared-theme/customizations/dataDisplay.js b/src/shared-theme/customizations/dataDisplay.js
index 0e7b364..491c0c5 100644
--- a/src/shared-theme/customizations/dataDisplay.js
+++ b/src/shared-theme/customizations/dataDisplay.js
@@ -29,6 +29,7 @@ export const dataDisplayCustomizations = {
         },
         [`& .${typographyClasses.root}`]: {
           fontWeight: 500,
+          fontSize:"16px"
         },
         [`& .${buttonBaseClasses.root}`]: {
           display: 'flex',
@@ -59,7 +60,7 @@ export const dataDisplayCustomizations = {
   MuiListItemText: {
     styleOverrides: {
       primary: ({ theme }) => ({
-        fontSize: theme.typography.body2.fontSize,
+        fontSize: "16px",
         fontWeight: 500,
         lineHeight: theme.typography.body2.lineHeight,
       }),
diff --git a/src/shared-theme/customizations/dataDisplay.tsx b/src/shared-theme/customizations/dataDisplay.tsx
index 1efed55..662ab55 100644
--- a/src/shared-theme/customizations/dataDisplay.tsx
+++ b/src/shared-theme/customizations/dataDisplay.tsx
@@ -28,6 +28,7 @@ export const dataDisplayCustomizations: Components<Theme> = {
         },
         [`& .${typographyClasses.root}`]: {
           fontWeight: 500,
+          
         },
         [`& .${buttonBaseClasses.root}`]: {
           display: 'flex',