diff --git a/src/components/login/Login.tsx b/src/components/login/Login.tsx
index 8a0f4db..5ff4a66 100644
--- a/src/components/login/Login.tsx
+++ b/src/components/login/Login.tsx
@@ -1,6 +1,6 @@
 import { useRef, useState, useEffect, useContext } from "react";
 import { useLocation, Link, useNavigate } from "react-router-dom";
-import { Stack } from "@mui/material";
+import { Stack, Typography } from "@mui/material";
 import Container from "@mui/material/Container";
 import TextField from "@mui/material/TextField";
 import Button from "@mui/material/Button";
@@ -49,11 +49,13 @@ const Login: React.FC = () => {
         <TextField className="username-input" id="outlined-basic" label="Username" variant="outlined" placeholder="Username" onChange={(event) => {setUsername(event.target.value)}}/>
         <TextField className="password-input" id="outlined-basic" label="Password" variant="outlined" placeholder="Password" type="password" onChange={(event) => {setPassword(event.target.value)}}/>
         <Stack direction="row" justifyContent="space-between" spacing={2}>
-          <a className="register-btn" href="#">Forgotten Your Password?</a>
+          <a className="register-btn" href="#">
+            <Typography sx={{ ml: 1, mb: 1 }}>Forgot your password?</Typography>
+          </a>
           <Button endIcon={<LoginIcon />} className="login-btn" variant="contained" type="submit" onClick={handleLogin}>Login</Button>
         </Stack>
         <Stack direction="row" justifyContent="space-between" spacing={2}>
-          <label>Login with</label>
+          <Typography sx={{ ml: 1 }}>Login with</Typography>
           <a className="zoom-logo" href="#">
             <img src={zoomLogo} alt="Zoom Logo"/>
           </a>