diff --git a/package-lock.json b/package-lock.json
index 0bb098c..6e35ddc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15041,6 +15041,7 @@
 		},
 		"node_modules/typescript": {
 			"version": "5.7.3",
+			"dev": true,
 			"license": "Apache-2.0",
 			"bin": {
 				"tsc": "bin/tsc",
diff --git a/src/App.css b/src/App.css
index 74b5e05..a9f59a8 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,3 +1,12 @@
+html, body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden; /* Prevents scrolling */
+}
+
+
 .App {
   text-align: center;
 }
diff --git a/src/App.tsx b/src/App.tsx
index 73bc4f6..591615e 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,6 +1,7 @@
 import { BrowserRouter as Router } from "react-router-dom";
 import AppRouter from "./router";
 
+
 function App() {
 	return (
 		<Router>
diff --git a/src/components/Loading/index.tsx b/src/components/Loading/index.tsx
index 8349a30..1da459a 100644
--- a/src/components/Loading/index.tsx
+++ b/src/components/Loading/index.tsx
@@ -1,14 +1,24 @@
 import React from 'react';
-import { useSelector } from 'react-redux';
-
-// import styled from './Loading.style';
+import { CircularProgress, Box, Typography } from '@mui/material';
 
 function LoadingComponent() {
-  // const { isdarktheme } = useSelector((state) => ({
-  //   isdarktheme: state?.authReducer?.isDarkTheme,
-  // }));
-
-  return (<h1>Loading</h1>);
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: '100vh',
+        width: '100%',
+        flexDirection: 'column',
+      }}
+    >
+      <CircularProgress size={50} color="primary" />
+      <Typography variant="h6" sx={{ marginTop: 2 }}>
+        Loading...
+      </Typography>
+    </Box>
+  );
 }
 
-export default LoadingComponent;
\ No newline at end of file
+export default LoadingComponent;
diff --git a/src/pages/Auth/Login/index.tsx b/src/pages/Auth/Login/index.tsx
index cf478df..827e6e3 100644
--- a/src/pages/Auth/Login/index.tsx
+++ b/src/pages/Auth/Login/index.tsx
@@ -11,6 +11,7 @@ import {
 	Grid,
 	IconButton,
 	Link,
+	InputAdornment 
 } from "@mui/material";
 import { useForm, Controller, SubmitHandler } from "react-hook-form";
 import { useDispatch } from "react-redux";
@@ -29,7 +30,9 @@ interface ILoginForm {
 
 export default function Login(props: { disableCustomTheme?: boolean }) {
 	const [open, setOpen] = React.useState(false);
+  const [isClicked, setIsClicked] = React.useState(false);
 	const [showPassword, setShowPassword] = React.useState(false);
+  
 	const {
 		control,
 		handleSubmit,
@@ -69,7 +72,7 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 						md={7}
 						sx={{
 							background: `url('/mainPageLogo.png') center/cover no-repeat`,
-							height: { xs: "0%", sm: "0%", md: "100%" },
+							// height: { xs: "0%", sm: "50%", md: "100%" },
 							backgroundSize: "cover",
 							display: { xs: "none", md: "block" }, // Hide the image on xs and sm screens
 						}}
@@ -77,19 +80,21 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 
 					{/* Form Section */}
 					<Grid
-						item
-						xs={12}
-						md={5}
-						sx={{
-							backgroundColor: "black",
-							display: "flex",
-							justifyContent: "center",
-							alignItems: "center",
-							flexDirection: "column",
-							padding: { xs: "2rem", md: "3rem", lg: "3rem" },
-							height: "100%",
-						}}
-					>
+  item
+  xs={12}
+  md={5}
+  sx={{
+    backgroundColor: "black",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    flexDirection: "column",
+    padding: { xs: "2rem", md: "3rem", lg: "3rem" },
+   
+    height: "auto", // ✅ Allows the height to adjust dynamically
+  }}
+>
+
 						<Typography
 							variant="h3"
 							sx={{
@@ -105,13 +110,8 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 							Welcome Back!
 						</Typography>
 
-						<Card
-							variant="outlined"
-							sx={{
-								maxWidth: "400px",
-								width: { xs: "80%", sm: "80%", md: "100%" },
-							}}
-						>
+						<Card variant="outlined" sx={{ width: { xs: "100%", sm: "300px",lg:"408px" }, padding: "24px", borderRadius: "12px", backgroundColor: "#1E1E1E", border: "1px solid #4B5255" }}>
+
 							<Box
 								component="form"
 								onSubmit={handleSubmit(onSubmit)}
@@ -122,182 +122,178 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 									gap: 2,
 								}}
 							>
-								<Typography
-									component="h1"
-									variant="h4"
-									sx={{
-										textAlign: "center",
-										color: "white",
-										fontSize: { xs: "1.5rem", sm: "2rem" },
-									}}
-								>
-									Login
-								</Typography>
-								<Typography
-									component="h6"
-									variant="subtitle2"
-									sx={{
-										textAlign: "center",
-										color: "white",
-										fontSize: { xs: "0.9rem", sm: "1rem" },
-									}}
-								>
-									Log in with your email and password
-								</Typography>
+									<Typography component="h1" variant="h4" sx={{ textAlign: "center", color: "white", fontFamily: "Gilroy", fontSize: "24px" }}>Login</Typography>
+									<Typography
+					component="h6"
+					variant="subtitle2"
+					sx={{ textAlign: "center", color: "white", fontFamily: "Gilroy", fontSize: "16px" }}
+				>
+					Log in with your email and password
+				</Typography>
 
-								<FormControl sx={{ width: "100%" }}>
-									<FormLabel
-										htmlFor="email"
-										sx={{
-											fontSize: {
-												xs: "0.9rem",
-												sm: "1rem",
-											},
-											color: "white",
-										}}
-									>
-										Email
-									</FormLabel>
-									<Controller
-										name="email"
-										control={control}
-										defaultValue=""
-										rules={{
-											required: "Email is required",
-											pattern: {
-												value: /\S+@\S+\.\S+/,
-												message:
-													"Please enter a valid email address.",
-											},
-										}}
-										render={({ field }) => (
-											<TextField
-												{...field}
-												error={!!errors.email}
-												helperText={
-													errors.email?.message
-												}
-												id="email"
-												type="email"
-												placeholder="Email"
-												autoComplete="email"
-												autoFocus
-												required
-												fullWidth
-												variant="outlined"
-												color={
-													errors.email
-														? "error"
-														: "primary"
-												}
-												sx={{
-													input: {
-														fontSize: {
-															xs: "0.9rem",
-															sm: "1rem",
-														},
-													},
-												}}
-											/>
-										)}
-									/>
-								</FormControl>
 
-								<FormControl sx={{ width: "100%" }}>
-									<FormLabel
-										htmlFor="password"
-										sx={{
-											fontSize: {
-												xs: "0.9rem",
-												sm: "1rem",
-											},
-											color: "white",
-										}}
-									>
-										Password
-									</FormLabel>
-									<Controller
-										name="password"
-										control={control}
-										defaultValue=""
-										rules={{
-											required: "Password is required",
-											minLength: {
-												value: 6,
-												message:
-													"Password must be at least 6 characters long.",
-											},
-											pattern: {
-												value: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{6,}$/,
-												message:
-													"Password must contain at least one uppercase letter, one lowercase letter, one number, and one special character.",
-											},
-										}}
-										render={({ field }) => (
-											<Box sx={{ position: "relative" }}>
-												<TextField
-													{...field}
-													error={!!errors.password}
-													helperText={
-														errors.password?.message
-													}
-													name="password"
-													placeholder="Password"
-													type={
-														showPassword
-															? "text"
-															: "password"
-													}
-													id="password"
-													autoComplete="current-password"
-													autoFocus
-													required
-													fullWidth
-													variant="outlined"
-													color={
-														errors.password
-															? "error"
-															: "primary"
-													}
-													sx={{
-														paddingRight: "40px",
-														height: "40px",
-														marginBottom: "8px",
-													}}
-												/>
-												<IconButton
-													sx={{
-														position: "absolute",
-														top: "50%",
-														right: "10px",
-														transform:
-															"translateY(-50%)",
-														background: "none",
-														borderColor:
-															"transparent",
-														"&:hover": {
-															backgroundColor:
-																"transparent",
-															borderColor:
-																"transparent",
-														},
-													}}
-													onClick={() =>
-														setShowPassword(
-															(prev) => !prev
-														)
-													}
-												>
-													{showPassword ? (
-														<VisibilityOff />
-													) : (
-														<Visibility />
-													)}
-												</IconButton>
-											</Box>
-										)}
-									/>
-								</FormControl>
+{/* -------------------------------- Email Field ----------------- */}
+<FormControl sx={{ width: "100%" }}>
+  <FormLabel
+    htmlFor="email"
+    sx={{
+      fontSize: { xs: "0.9rem", sm: "1rem" },
+      color: "white",
+      fontFamily: "Gilroy, sans-serif", // ✅ Apply Gilroy font
+    }}
+  >
+    Email
+  </FormLabel>
+  <Controller
+    name="email"
+    control={control}
+    defaultValue=""
+    rules={{
+      required: "Email is required",
+      pattern: {
+        value: /\S+@\S+\.\S+/,
+        message: "Please enter a valid email address.",
+      },
+    }}
+    render={({ field }) => (
+      <TextField
+        {...field}
+        error={!!errors.email}
+        helperText={errors.email?.message}
+        id="email"
+        type="email"
+        placeholder="Email"
+        autoComplete="email"
+        autoFocus
+        required
+        fullWidth
+        variant="outlined"
+        color={errors.email ? "error" : "primary"}
+        InputProps={{
+          sx: {
+            height: "50px", 
+            alignItems: "center", 
+            backgroundColor: "#1E1F1F", 
+            fontFamily: "Gilroy, sans-serif", 
+          },
+        }}
+        sx={{
+          "& .MuiOutlinedInput-root": {
+            backgroundColor: "#1E1F1F",
+            borderRadius: "4px",
+            "& fieldset": { borderColor: "#4b5255" },
+            "&:hover fieldset": { borderColor: "#4b5255" },
+            "&.Mui-focused fieldset": { borderColor: "#4b5255" },
+          },
+          "& input": {
+            color: "white",
+            fontSize: { xs: "0.9rem", sm: "1rem" },
+            fontFamily: "Gilroy, sans-serif", 
+          },
+          "& .MuiInputBase-input::placeholder": {
+            color: "white",
+            opacity: 1,
+            fontFamily: "Gilroy, sans-serif", 
+          },
+        }}
+      />
+    )}
+  />
+</FormControl>
+
+
+{/* -------------------------------- Password Field ----------------- */}
+<FormControl sx={{ width: "100%" }}>
+  <FormLabel
+    htmlFor="password"
+    sx={{
+      fontSize: { xs: "0.9rem", sm: "1rem" },
+      color: "white",
+      fontFamily: "Gilroy, sans-serif", 
+    }}
+  >
+    Password
+  </FormLabel>
+  <Controller
+    name="password"
+    control={control}
+    defaultValue=""
+    rules={{
+      required: "Password is required",
+      minLength: {
+        value: 6,
+        message: "Password must be at least 6 characters long.",
+      },
+      pattern: {
+        value:
+          /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{6,}$/,
+        message:
+          "Password must contain at least one uppercase letter, one lowercase letter, one number, and one special character.",
+      },
+    }}
+    render={({ field }) => (
+      <TextField
+        {...field}
+        error={!!errors.password}
+        helperText={errors.password?.message}
+        name="password"
+        placeholder="Password"
+        type={showPassword ? "text" : "password"}
+        id="password"
+        autoComplete="current-password"
+        required
+        fullWidth
+        variant="outlined"
+        color={errors.password ? "error" : "primary"}
+        InputProps={{
+          sx: {
+            height: "50px",
+            fontFamily: "Gilroy, sans-serif", // Apply Gilroy font
+          },
+          
+          endAdornment: (
+            <IconButton
+              onClick={() => setShowPassword((prev) => !prev)}
+              edge="end"
+              sx={{
+                color: "white",
+                padding: 0,
+                margin: 0,
+                backgroundColor: "transparent",
+                border: "none",
+                boxShadow: "none",
+                "&:hover": { backgroundColor: "transparent" },
+                "&:focus": { outline: "none", border: "none" },
+              }}
+            >
+              {showPassword ? <VisibilityOff /> : <Visibility />}
+            </IconButton>
+          ),
+        }}
+        sx={{
+          "& .MuiOutlinedInput-root": {
+            backgroundColor: "#1E1F1F",
+            borderRadius: "4px",
+            "& fieldset": { borderColor: "#4b5255" },
+            "&:hover fieldset": { borderColor: "#4b5255" },
+            "&.Mui-focused fieldset": { borderColor: "#4b5255" },
+          },
+          "& input": {
+            color: "white",
+            fontSize: { xs: "0.9rem", sm: "1rem" },
+            fontFamily: "Gilroy, sans-serif", 
+          },
+          "& .MuiInputBase-input::placeholder": {
+            color: "white",
+            opacity: 1,
+            fontFamily: "Gilroy, sans-serif", 
+          },
+        }}
+      />
+    )}
+  />
+</FormControl>
+
 
 								<Box
 									sx={{
@@ -308,27 +304,50 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 										flexWrap: "wrap",
 									}}
 								>
-									<FormControlLabel
-										control={
-											<Checkbox
-												value="remember"
-												color="primary"
-											/>
-										}
-										label="Remember me"
-									/>
-									<Link
-										component="button"
-										type="button"
-										onClick={handleClickOpen}
-										variant="body2"
-										sx={{
-											alignSelf: "center",
-											color: "#01579b",
-										}}
-									>
-										Forgot password?
-									</Link>
+								<FormControlLabel
+  control={
+    <Checkbox
+    value="remember"
+    sx={{
+      width: 20,
+      height: 20,
+      fontFamily: "Gilroy, sans-serif",
+      border: "2px solid #4b5255",
+      borderRadius: "4px",
+      backgroundColor: "transparent",
+      "&:hover": {
+        backgroundColor: "transparent",
+      },
+      "&.Mui-checked": {
+        backgroundColor: "transparent",
+        borderColor: "#4b5255",
+        "&:hover": {
+          backgroundColor: "transparent",
+        },
+      },
+    }}
+  />
+  
+  }
+  label="Remember me"
+/>
+
+<Link
+  component="button"
+  type="button"
+  onClick={handleClickOpen}
+  variant="body2"
+  sx={{
+    alignSelf: "center",
+    fontFamily: "Gilroy, sans-serif",
+    color: "#01579b",
+    textDecoration: "none", // ✅ Removes underline
+   
+  }}
+>
+  Forgot password?
+</Link>
+
 								</Box>
 								<ForgotPassword
 									open={open}
@@ -340,6 +359,7 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 									disabled={!isValid}
 									sx={{
 										color: "white",
+                    fontFamily: "Gilroy, sans-serif",
 										backgroundColor: "#52ACDF",
 										"&:hover": {
 											backgroundColor: "#52ACDF",