diff --git a/package-lock.json b/package-lock.json
index 0bb098c..3f84ec6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -38,6 +38,7 @@
 				"react-scripts": "5.0.1",
 				"recharts": "^2.15.1",
 				"sonner": "^1.7.4",
+				"styled-components": "^6.1.15",
 				"web-vitals": "^4.2.4"
 			},
 			"devDependencies": {
@@ -4031,6 +4032,12 @@
 			"version": "2.0.3",
 			"license": "MIT"
 		},
+		"node_modules/@types/stylis": {
+			"version": "4.2.5",
+			"resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.5.tgz",
+			"integrity": "sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw==",
+			"license": "MIT"
+		},
 		"node_modules/@types/trusted-types": {
 			"version": "2.0.7",
 			"license": "MIT"
@@ -5364,6 +5371,15 @@
 				"node": ">= 6"
 			}
 		},
+		"node_modules/camelize": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz",
+			"integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==",
+			"license": "MIT",
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
 		"node_modules/caniuse-api": {
 			"version": "3.0.0",
 			"license": "MIT",
@@ -5821,6 +5837,15 @@
 				"postcss": "^8.4"
 			}
 		},
+		"node_modules/css-color-keywords": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
+			"integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==",
+			"license": "ISC",
+			"engines": {
+				"node": ">=4"
+			}
+		},
 		"node_modules/css-declaration-sorter": {
 			"version": "6.4.1",
 			"license": "ISC",
@@ -5954,6 +5979,17 @@
 			"version": "0.1.1",
 			"license": "MIT"
 		},
+		"node_modules/css-to-react-native": {
+			"version": "3.2.0",
+			"resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz",
+			"integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==",
+			"license": "MIT",
+			"dependencies": {
+				"camelize": "^1.0.0",
+				"css-color-keywords": "^1.0.0",
+				"postcss-value-parser": "^4.0.2"
+			}
+		},
 		"node_modules/css-tree": {
 			"version": "1.0.0-alpha.37",
 			"license": "MIT",
@@ -13806,6 +13842,12 @@
 			"version": "1.2.0",
 			"license": "ISC"
 		},
+		"node_modules/shallowequal": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+			"integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==",
+			"license": "MIT"
+		},
 		"node_modules/shebang-command": {
 			"version": "2.0.0",
 			"license": "MIT",
@@ -14359,6 +14401,95 @@
 				"webpack": "^5.0.0"
 			}
 		},
+		"node_modules/styled-components": {
+			"version": "6.1.15",
+			"resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.15.tgz",
+			"integrity": "sha512-PpOTEztW87Ua2xbmLa7yssjNyUF9vE7wdldRfn1I2E6RTkqknkBYpj771OxM/xrvRGinLy2oysa7GOd7NcZZIA==",
+			"license": "MIT",
+			"dependencies": {
+				"@emotion/is-prop-valid": "1.2.2",
+				"@emotion/unitless": "0.8.1",
+				"@types/stylis": "4.2.5",
+				"css-to-react-native": "3.2.0",
+				"csstype": "3.1.3",
+				"postcss": "8.4.49",
+				"shallowequal": "1.1.0",
+				"stylis": "4.3.2",
+				"tslib": "2.6.2"
+			},
+			"engines": {
+				"node": ">= 16"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/styled-components"
+			},
+			"peerDependencies": {
+				"react": ">= 16.8.0",
+				"react-dom": ">= 16.8.0"
+			}
+		},
+		"node_modules/styled-components/node_modules/@emotion/is-prop-valid": {
+			"version": "1.2.2",
+			"resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz",
+			"integrity": "sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==",
+			"license": "MIT",
+			"dependencies": {
+				"@emotion/memoize": "^0.8.1"
+			}
+		},
+		"node_modules/styled-components/node_modules/@emotion/memoize": {
+			"version": "0.8.1",
+			"resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz",
+			"integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==",
+			"license": "MIT"
+		},
+		"node_modules/styled-components/node_modules/@emotion/unitless": {
+			"version": "0.8.1",
+			"resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz",
+			"integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==",
+			"license": "MIT"
+		},
+		"node_modules/styled-components/node_modules/postcss": {
+			"version": "8.4.49",
+			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz",
+			"integrity": "sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==",
+			"funding": [
+				{
+					"type": "opencollective",
+					"url": "https://opencollective.com/postcss/"
+				},
+				{
+					"type": "tidelift",
+					"url": "https://tidelift.com/funding/github/npm/postcss"
+				},
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/ai"
+				}
+			],
+			"license": "MIT",
+			"dependencies": {
+				"nanoid": "^3.3.7",
+				"picocolors": "^1.1.1",
+				"source-map-js": "^1.2.1"
+			},
+			"engines": {
+				"node": "^10 || ^12 || >=14"
+			}
+		},
+		"node_modules/styled-components/node_modules/stylis": {
+			"version": "4.3.2",
+			"resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.2.tgz",
+			"integrity": "sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg==",
+			"license": "MIT"
+		},
+		"node_modules/styled-components/node_modules/tslib": {
+			"version": "2.6.2",
+			"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+			"integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
+			"license": "0BSD"
+		},
 		"node_modules/stylehacks": {
 			"version": "5.1.1",
 			"license": "MIT",
@@ -15041,6 +15172,7 @@
 		},
 		"node_modules/typescript": {
 			"version": "5.7.3",
+			"dev": true,
 			"license": "Apache-2.0",
 			"bin": {
 				"tsc": "bin/tsc",
diff --git a/package.json b/package.json
index 4e06b17..2a9af7e 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
 		"react-scripts": "5.0.1",
 		"recharts": "^2.15.1",
 		"sonner": "^1.7.4",
+		"styled-components": "^6.1.15",
 		"web-vitals": "^4.2.4"
 	},
 	"scripts": {
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 89f01cb..7c1be76 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,
@@ -70,7 +73,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
 						}}
@@ -78,19 +81,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={{
@@ -106,13 +111,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)}
@@ -123,182 +123,177 @@ 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={{
@@ -309,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}
@@ -341,6 +359,7 @@ export default function Login(props: { disableCustomTheme?: boolean }) {
 									disabled={!isValid}
 									sx={{
 										color: "white",
+                    fontFamily: "Gilroy, sans-serif",
 										backgroundColor: "#52ACDF",
 										"&:hover": {
 											backgroundColor: "#52ACDF",