diff --git a/src/components/AddBookingModal/addBookingModal.tsx b/src/components/AddBookingModal/addBookingModal.tsx
index 605b1c8..4062a81 100644
--- a/src/components/AddBookingModal/addBookingModal.tsx
+++ b/src/components/AddBookingModal/addBookingModal.tsx
@@ -23,7 +23,7 @@ import { toast } from "sonner";
 import { CustomIconButton, CustomTextField } from "../AddUserModal/styled.css";
 import { getAllStations } from "../../redux/slices/stationSlice.ts";
 import { fetchAvailableSlots } from "../../redux/slices/slotSlice.ts";
-
+import { autofillFix } from "../../shared-theme/customizations/autoFill";
 export default function AddBookingModal({
 	open,
 	handleClose,
@@ -108,11 +108,14 @@ export default function AddBookingModal({
 					top: "50%",
 					left: "50%",
 					transform: "translate(-50%, -50%)",
-					width: 400,
+					// width: 400,
 					bgcolor: "background.paper",
 					boxShadow: 24,
 					p: 3,
 					borderRadius: 2,
+					width: "100%",
+					maxWidth: 600,
+					overflow: "auto",
 				}}
 			>
 				<Box
@@ -135,19 +138,40 @@ export default function AddBookingModal({
 					{/* Station ID and Car Name */}
 					<Box sx={{ display: "flex", gap: 2, mb: 2 }}>
 						{/* Station ID */}
-						<Box sx={{ flex: 1 }}>
-							<Typography variant="body2" fontWeight={500}>
+						<Box
+							sx={{
+								display: "flex",
+								flexDirection: "column",
+								width: "50%",
+								...autofillFix,
+							}}
+						>
+							<Typography variant="body2" fontWeight={500} mb={1}>
 								Select Station
 							</Typography>
-							<FormControl fullWidth error={!!errors.stationName}>
-								<InputLabel>Select Station</InputLabel>
+							{/* Station ID Field */}
+							<FormControl fullWidth error={!!errors.stationId}>
 								<Select
 									{...register("stationId", {
-										required: "Station Name is required", // Change to stationId
+										required: "Station Name is required", // Validation rule
 									})}
 									defaultValue=""
 									size="small"
+									displayEmpty
+									sx={{
+										textOverflow: "ellipsis", // Truncate long text
+										whiteSpace: "nowrap",
+										overflow: "hidden",
+									}}
 								>
+									{/* Placeholder */}
+									<MenuItem value="" disabled>
+										<Typography color="text.secondary">
+											Choose Station
+										</Typography>
+									</MenuItem>
+
+									{/* Station Options */}
 									{stations.map((station) => (
 										<MenuItem
 											key={station.id}
@@ -157,16 +181,24 @@ export default function AddBookingModal({
 										</MenuItem>
 									))}
 								</Select>
+								{/* Safely render the error message */}
 								{errors.stationId && (
 									<Typography color="error" variant="body2">
-										{errors.stationName.message}
+										{errors.stationId.message}
 									</Typography>
 								)}
 							</FormControl>
 						</Box>
 
-						<Box sx={{ flex: 1 }}>
-							<Typography variant="body2" fontWeight={500}>
+						<Box
+							sx={{
+								display: "flex",
+								flexDirection: "column",
+								width: "50%",
+								...autofillFix,
+							}}
+						>
+							<Typography variant="body2" fontWeight={500} mb={1}>
 								Date
 							</Typography>
 							<CustomTextField
@@ -185,10 +217,10 @@ export default function AddBookingModal({
 								})}
 								slotProps={{
 									inputLabel: {
-										shrink: true, 
+										shrink: true,
 									},
 									htmlInput: {
-										min: today, 
+										min: today,
 									},
 								}}
 							/>
@@ -198,8 +230,15 @@ export default function AddBookingModal({
 					{/* Car Port and Date */}
 					<Box sx={{ display: "flex", gap: 2, mb: 2 }}>
 						{/* Car Name */}
-						<Box sx={{ flex: 1 }}>
-							<Typography variant="body2" fontWeight={500}>
+						<Box
+							sx={{
+								display: "flex",
+								flexDirection: "column",
+								width: "50%",
+								...autofillFix,
+							}}
+						>
+							<Typography variant="body2" fontWeight={500} mb={1}>
 								Car Name
 							</Typography>
 							<Controller
@@ -213,10 +252,24 @@ export default function AddBookingModal({
 									>
 										<Select
 											{...field}
-											label="Car Name"
 											defaultValue=""
+											size="small"
+											displayEmpty
+											sx={{
+												textOverflow: "ellipsis",
+												whiteSpace: "nowrap",
+												overflow: "hidden",
+											}}
 										>
-											{carNames.map((car, index) => (
+											{/* Placeholder item */}
+											<MenuItem value="" disabled>
+												<Typography color="text.secondary">
+													Choose Car Name
+												</Typography>
+											</MenuItem>
+
+											{/* Car names */}
+											{carNames.map((car) => (
 												<MenuItem
 													key={car.id}
 													value={car.name}
@@ -225,6 +278,7 @@ export default function AddBookingModal({
 												</MenuItem>
 											))}
 										</Select>
+
 										{errors.carName && (
 											<Typography
 												color="error"
@@ -240,8 +294,15 @@ export default function AddBookingModal({
 							/>
 						</Box>
 						{/* Car Port */}
-						<Box sx={{ flex: 1 }}>
-							<Typography variant="body2" fontWeight={500}>
+						<Box
+							sx={{
+								display: "flex",
+								flexDirection: "column",
+								width: "50%",
+								...autofillFix,
+							}}
+						>
+							<Typography variant="body2" fontWeight={500} mb={1}>
 								Car Port
 							</Typography>
 							<Controller
@@ -253,12 +314,20 @@ export default function AddBookingModal({
 										size="small"
 										error={!!errors.carPort}
 									>
-										<InputLabel>Car Port</InputLabel>
 										<Select
 											{...field}
-											label="Car Port"
-											defaultValue=""
+											defaultValue="" // Set the default value as empty
+											size="small"
+											displayEmpty // Ensures the placeholder is visible by default
 										>
+											{/* Placeholder MenuItem */}
+											<MenuItem value="" disabled>
+												<Typography color="text.secondary">
+													Choose Car Port
+												</Typography>
+											</MenuItem>
+
+											{/* Car Ports */}
 											{carPorts.map((port, index) => (
 												<MenuItem
 													key={index}
@@ -268,6 +337,7 @@ export default function AddBookingModal({
 												</MenuItem>
 											))}
 										</Select>
+
 										{errors.carPort && (
 											<Typography
 												color="error"
@@ -286,8 +356,15 @@ export default function AddBookingModal({
 
 					{/* Start Time and End Time */}
 					<Box sx={{ display: "flex", gap: 2, mb: 2 }}>
-						<Box sx={{ flex: 1 }}>
-							<Typography variant="body2" fontWeight={500}>
+						<Box
+							sx={{
+								display: "flex",
+								flexDirection: "column",
+								width: "50%",
+								...autofillFix,
+							}}
+						>
+							<Typography variant="body2" fontWeight={500} mb={1}>
 								Start Time
 							</Typography>
 							<CustomTextField
@@ -306,8 +383,15 @@ export default function AddBookingModal({
 							/>
 						</Box>
 
-						<Box sx={{ flex: 1 }}>
-							<Typography variant="body2" fontWeight={500}>
+						<Box
+							sx={{
+								display: "flex",
+								flexDirection: "column",
+								width: "50%",
+								...autofillFix,
+							}}
+						>
+							<Typography variant="body2" fontWeight={500} mb={1}>
 								End Time
 							</Typography>
 							<CustomTextField
@@ -327,8 +411,15 @@ export default function AddBookingModal({
 
 					{/* Car Number */}
 					<Box sx={{ display: "flex", gap: 2, mb: 2 }}>
-						<Box sx={{ flex: 1 }}>
-							<Typography variant="body2" fontWeight={500}>
+						<Box
+							sx={{
+								display: "flex",
+								flexDirection: "column",
+								width: "50%",
+								...autofillFix,
+							}}
+						>
+							<Typography variant="body2" fontWeight={500} mb={1}>
 								Car Number
 							</Typography>
 							<CustomTextField
@@ -373,4 +464,4 @@ export default function AddBookingModal({
 			</Box>
 		</Modal>
 	);
-}
\ No newline at end of file
+}
diff --git a/src/components/AddStationModal/addStationModal.tsx b/src/components/AddStationModal/addStationModal.tsx
index a27b518..4b499c7 100644
--- a/src/components/AddStationModal/addStationModal.tsx
+++ b/src/components/AddStationModal/addStationModal.tsx
@@ -207,7 +207,6 @@ export default function AddStationModal({
 									placeholder="Enter Charging Station Address"
 									size="small"
 									sx={{ marginTop: 1 }}
-
 									error={!!errors.registeredAddress}
 									helperText={
 										errors.registeredAddress
@@ -239,7 +238,6 @@ export default function AddStationModal({
 									placeholder="Enter Total Slots"
 									size="small"
 									sx={{ marginTop: 1 }}
-
 									type="number"
 									error={!!errors.totalSlots}
 									helperText={
@@ -261,120 +259,118 @@ export default function AddStationModal({
 
 						{/* Vehicle Brand Dropdown with Checkboxes */}
 						<Box sx={{ display: "flex", gap: 2 }}>
-								<Box
-									sx={{
-										display: "flex",
-										flexDirection: "column",
-										width: "100%",
-									}}
+							<Box
+								sx={{
+									display: "flex",
+									flexDirection: "column",
+									width: "100%",
+								}}
+							>
+								<Typography
+									variant="body2"
+									fontWeight={500}
+									sx={{ mb: 1 }}
 								>
-									<Typography
-										variant="body2"
-										fontWeight={500}
-										sx={{ mb: 1 }}
-									>
-										Vehicle Brand
-									</Typography>
-									<FormControl fullWidth size="small">
-										<Select
-											multiple
-											displayEmpty
-											sx={{ marginTop: 1 }}
-
-											value={selectedBrands}
-											onChange={handleBrandChange}
-											renderValue={(selected) => {
-												if (selected.length === 0) {
-													return (
-														<Typography color="text.secondary">
-															Choose Brands
-														</Typography>
-													);
-												}
-
-												const displayNames = (
-													selected as string[]
-												).slice(0, 1);
-												const moreCount =
-													(selected as string[]).length -
-													1;
-
+									Vehicle Brand
+								</Typography>
+								<FormControl fullWidth size="small">
+									<Select
+										multiple
+										displayEmpty
+										sx={{ marginTop: 1 }}
+										value={selectedBrands}
+										onChange={handleBrandChange}
+										renderValue={(selected) => {
+											if (selected.length === 0) {
 												return (
-													<Box
-														sx={{
-															display: "flex",
-															flexWrap: "wrap",
-															gap: 0.5,
-														}}
-													>
-														{displayNames.map((id) => {
-															const brand =
-																vehicleBrands.find(
-																	(b) =>
-																		b.id === id
-																);
-															return brand ? (
-																<Chip
-																	key={id}
-																	label={
-																		brand.name
-																	}
-																	size="small"
-																	sx={{
-																		height: 24,
-																	}}
-																/>
-															) : null;
-														})}
-														{moreCount > 0 && (
-															<Chip
-																label={`+${moreCount} more`}
-																size="small"
-																sx={{ height: 24 }}
-															/>
-														)}
-													</Box>
+													<Typography color="text.secondary">
+														Choose Brands
+													</Typography>
 												);
-											}}
-											MenuProps={{
-												PaperProps: {
-													style: {
-														maxHeight: 224,
-													},
-												},
-											}}
-										>
-											{vehicleBrands.length > 0 ? (
-												vehicleBrands.map((brand) => (
-													<MenuItem
-														key={brand.id}
-														value={brand.id}
-													>
-														<Checkbox
-															checked={selectedBrands.includes(
-																brand.id
-															)}
-														/>
-														<ListItemText
-															primary={brand.name}
-														/>
-													</MenuItem>
-												))
-											) : (
-												<MenuItem disabled>
-													No vehicle brands available
-												</MenuItem>
-											)}
-										</Select>
-										<FormHelperText>
-											{errors.vehicleBrand
-												? errors.vehicleBrand.message
-												: ""}
-										</FormHelperText>
-									</FormControl>
-								</Box>
+											}
+
+											const displayNames = (
+												selected as string[]
+											).slice(0, 1);
+											const moreCount =
+												(selected as string[]).length -
+												1;
+
+											return (
+												<Box
+													sx={{
+														display: "flex",
+														flexWrap: "wrap",
+														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;
+													})}
+
+													{moreCount > 0 && (
+														<Typography
+															variant="body2"
+															color="textSecondary"
+														>
+															+{moreCount} more
+														</Typography>
+													)}
+												</Box>
+											);
+										}}
+										MenuProps={{
+											PaperProps: {
+												style: {
+													maxHeight: 224,
+												},
+											},
+										}}
+									>
+										{vehicleBrands.length > 0 ? (
+											vehicleBrands.map((brand) => (
+												<MenuItem
+													key={brand.id}
+													value={brand.id}
+												>
+													<Checkbox
+														checked={selectedBrands.includes(
+															brand.id
+														)}
+													/>
+													<ListItemText
+														primary={brand.name}
+													/>
+												</MenuItem>
+											))
+										) : (
+											<MenuItem disabled>
+												No vehicle brands available
+											</MenuItem>
+										)}
+									</Select>
+									<FormHelperText>
+										{errors.vehicleBrand
+											? errors.vehicleBrand.message
+											: ""}
+									</FormHelperText>
+								</FormControl>
+							</Box>
 
-							{/* Replace the Vehicle Name Dropdown code with this */}
 							<Box
 								sx={{
 									display: "flex",
@@ -398,7 +394,6 @@ export default function AddStationModal({
 										multiple
 										displayEmpty
 										sx={{ marginTop: 1 }}
-
 										value={selectedVehicles}
 										onChange={handleVehicleChange}
 										renderValue={(selected) => {
@@ -424,28 +419,29 @@ export default function AddStationModal({
 												<Box
 													sx={{
 														display: "flex",
-														flexWrap: "wrap",
+														alignItems: "center",
 														gap: 0.5,
+
+														whiteSpace: "nowrap",
 													}}
 												>
 													{displayNames.map(
-														(name) => (
-															<Chip
-																key={name}
-																label={name}
-																size="small"
-																sx={{
-																	height: 24,
-																}}
-															/>
+														(name, index) => (
+															<Typography
+																key={index}
+																variant="body2"
+															>
+																{name}
+															</Typography>
 														)
 													)}
 													{moreCount > 0 && (
-														<Chip
-															label={`+${moreCount} more`}
-															size="small"
-															sx={{ height: 24 }}
-														/>
+														<Typography
+															variant="body2"
+															color="textSecondary"
+														>
+															+{moreCount} more
+														</Typography>
 													)}
 												</Box>
 											);
diff --git a/src/components/CustomTable/customTable.tsx b/src/components/CustomTable/customTable.tsx
index 0d02790..5e1c6f3 100644
--- a/src/components/CustomTable/customTable.tsx
+++ b/src/components/CustomTable/customTable.tsx
@@ -624,6 +624,8 @@ const CustomTable: React.FC<CustomTableProps> = ({
 							onClick={(e) => {
 								e.stopPropagation();
 								setViewModal(true);
+								
+								
 							}}
 							color="primary"
 							sx={{
@@ -640,6 +642,7 @@ const CustomTable: React.FC<CustomTableProps> = ({
 							<ViewModal
 								handleView={() =>
 									handleViewButton(selectedRow?.id)
+									
 								}
 								open={viewModal}
 								setViewModal={setViewModal}
@@ -698,6 +701,7 @@ const CustomTable: React.FC<CustomTableProps> = ({
 									setModalOpen(true); // Only open if a row is selected
 									setRowData(selectedRow);
 								}
+								handleClose(); 
 							}}
 							color="primary"
 							sx={{
@@ -755,6 +759,7 @@ const CustomTable: React.FC<CustomTableProps> = ({
 							onClick={(e) => {
 								e.stopPropagation();
 								setDeleteModal(true);
+								handleClose(); 
 							}}
 							color="error"
 							sx={{
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
index 9abb2d9..6843b06 100644
--- a/src/components/Header/index.tsx
+++ b/src/components/Header/index.tsx
@@ -110,7 +110,7 @@ export default function Header() {
 					<OptionsMenu />
 				</Stack>
 
-				{showNotifications && (
+				{/* {showNotifications && (
 					<Box
 						sx={{
 							p: 2,
@@ -125,14 +125,12 @@ export default function Header() {
 							width: "250px",
 						}}
 					>
-						{/* <Typography variant="h6" color="text.primary">
-						Notifications
-					</Typography> */}
+
 						<Typography variant="body2" color="text.secondary">
 							No notifications yet
 						</Typography>
 					</Box>
-				)}
+				)} */}
 			</Stack>
 		</Box>
 	);
diff --git a/src/components/Modals/ViewModal/index.tsx b/src/components/Modals/ViewModal/index.tsx
index 138d34d..ae4a863 100644
--- a/src/components/Modals/ViewModal/index.tsx
+++ b/src/components/Modals/ViewModal/index.tsx
@@ -78,7 +78,7 @@ export default function ViewModal({ open, setViewModal, id }: Props) {
 				<Divider sx={{ width: "100%" }} />
 
 				{selectedAdmin ? (
-					<Grid container spacing={2} sx={{ width: "80%" }}>
+					<Grid container spacing={2} sx={{ width: "90%" }}>
 						<Grid item xs={6}>
 							<Typography variant="body1">
 								<strong>Name:</strong>
diff --git a/src/components/SideMenuMobile/index.tsx b/src/components/SideMenuMobile/index.tsx
index b761442..e77a1bf 100644
--- a/src/components/SideMenuMobile/index.tsx
+++ b/src/components/SideMenuMobile/index.tsx
@@ -66,13 +66,13 @@ export default function SideMenuMobile({
 							Super Admin
 						</Typography>
 					</Stack>
-					<MenuButton showBadge>
+					{/* <MenuButton showBadge>
 						<NotificationsRoundedIcon />
-					</MenuButton>
+					</MenuButton> */}
 				</Stack>
 				<Divider />
 				<Stack sx={{ flexGrow: 1 }}>
-					<MenuContent hidden={false} />
+					<MenuContent hidden={true} />
 					<Divider />
 				</Stack>
 				<CardAlert />
@@ -85,7 +85,7 @@ export default function SideMenuMobile({
 							e.stopPropagation();
 							setLogoutModal(true);
 						}}
-						sx={{ color: "red" }}
+						
 					>
 						Logout
 					</Button>
diff --git a/src/pages/LandingPage/index.tsx b/src/pages/LandingPage/index.tsx
index 4bd87f7..0c3db36 100644
--- a/src/pages/LandingPage/index.tsx
+++ b/src/pages/LandingPage/index.tsx
@@ -288,8 +288,8 @@ const LandingPage = () => {
 						spacing={2}
 						textAlign="center"
 						sx={{
-							display: { xs: "grid", },
-							
+							display: { xs: "grid" },
+
 							gridTemplateColumns: {
 								xs: "repeat(2, 1fr)", // Two items per row on mobile
 								sm: "repeat(4, 1fr)",
@@ -670,7 +670,7 @@ const LandingPage = () => {
 					borderRadius: "16px",
 
 					mt: { xs: 6, md: 10 },
-					fontFamily: "Neue Montreal",
+					fontFamily: "Gilory",
 				}}
 			>
 				Key Features
@@ -690,7 +690,7 @@ const LandingPage = () => {
 					py: { xs: 2, md: 5 },
 					px: { xs: 2, md: 3 },
 					mt: { xs: 6, md: 5 },
-					fontFamily: "Neue Montreal",
+					fontFamily: "Gilory",
 				}}
 			>
 				<Box
@@ -1184,7 +1184,7 @@ const LandingPage = () => {
 					px: { xs: 2, sm: 3, md: 4 },
 					mt: { xs: 6, sm: 8, md: 10 },
 					// height: { xs: "auto", lg: "261px", sm: "208px" },
-					fontFamily: "Neue Montreal",
+					fontFamily: "Gilory",
 					borderRadius: "12px",
 				}}
 			>
@@ -1271,7 +1271,7 @@ const LandingPage = () => {
 									lg: "54px",
 									md: "44px",
 								},
-								fontFamily: "Neue Montreal",
+								fontFamily: "Gilory",
 								textTransform: "none",
 								fontWeight: 500,
 								fontSize: {
@@ -1306,7 +1306,7 @@ const LandingPage = () => {
 					px: { xs: 2, sm: 3, md: 4 },
 					mt: { xs: 6, sm: 8, md: 10 },
 					mb: { xs: 6, sm: 8, md: 10 },
-					fontFamily: "Neue Montreal",
+					fontFamily: "Gilory",
 					height: "auto",
 					borderRadius: { xs: "8px", lg: "12px" },
 				}}
@@ -1317,7 +1317,7 @@ const LandingPage = () => {
 						py: 4,
 						px: 3,
 						mt: 2,
-						fontFamily: "Neue Montreal",
+						fontFamily: "Gilory",
 					}}
 				>
 					<Typography
@@ -1338,7 +1338,7 @@ const LandingPage = () => {
 						variant="body2"
 						sx={{
 							my: { xs: 2, sm: 3 },
-							fontFamily: "Inter",
+							fontFamily: "Gilory",
 							fontWeight: 400,
 							fontSize: { xs: "14px", sm: "18px", md: "20px" },
 							color: "#FFFFFF",