diff --git a/src/components/Register/Register.css b/src/components/Register/Register.css
index 4eff54f..5d00d0f 100644
--- a/src/components/Register/Register.css
+++ b/src/components/Register/Register.css
@@ -5,4 +5,5 @@
     justify-content: center;
     min-height: 100vh;
     padding: 16px;
-}
+
+}
\ No newline at end of file
diff --git a/src/components/Register/Register.jsx b/src/components/Register/Register.jsx
index d4f9dab..ba30e81 100644
--- a/src/components/Register/Register.jsx
+++ b/src/components/Register/Register.jsx
@@ -8,8 +8,14 @@ import {
     Typography,
     Container,
     IconButton,
+    Grid,
+    Box,
+    Avatar,
 } from '@mui/material';
 import { Visibility, VisibilityOff } from '@mui/icons-material';
+import CssBaseline from '@mui/material/CssBaseline';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
 import axios from 'axios';
 import './Register.css';
 
@@ -51,67 +57,153 @@ const Register = () => {
         }
     };
 
+    const defaultTheme = createTheme();
     return (
-        <Container maxWidth='xs' className='register-container'>
-            <TextField
-                label='Username'
-                value={username}
-                onChange={(e) => setUsername(e.target.value)}
-            />
-            <TextField
-                label='Email'
-                type='email'
-                value={email}
-                onChange={(e) => setEmail(e.target.value)}
-            />
-            <TextField
-                label='Password'
-                type={showPassword ? 'text' : 'password'}
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                InputProps={{
-                    endAdornment: (
-                        <IconButton onClick={handleTogglePasswordVisibility}>
-                            {showPassword ? <VisibilityOff /> : <Visibility />}
-                        </IconButton>
-                    ),
-                }}
-            />
-            <TextField
-                label='Confirm Password'
-                type={showConfirmPassword ? 'text' : 'password'}
-                value={confirmPassword}
-                onChange={(e) => setConfirmPassword(e.target.value)}
-                InputProps={{
-                    endAdornment: (
-                        <IconButton
-                            onClick={handleToggleConfirmPasswordVisibility}
+        <ThemeProvider theme={defaultTheme}>
+            <Container component='main' maxWidth='xs'>
+                <CssBaseline />
+                <Box
+                    sx={{
+                        marginTop: 8,
+                        display: 'flex',
+                        flexDirection: 'column',
+                        alignItems: 'center',
+                    }}
+                >
+                    <Avatar sx={{ m: 1, bgcolor: 'secondary.main' }}>
+                        <LockOutlinedIcon />
+                    </Avatar>
+                    <Typography component='h1' variant='h5'>
+                        Sign up
+                    </Typography>
+                    <Box
+                        component='form'
+                        noValidate
+                        onSubmit={handleRegister}
+                        sx={{ mt: 3 }}
+                    >
+                        <Grid container spacing={2}>
+                            <Grid item xs={12} sm={6}>
+                                <TextField
+                                    required
+                                    fullWidth
+                                    label='username'
+                                    value={username}
+                                    onChange={(e) =>
+                                        setUsername(e.target.value)
+                                    }
+                                />
+                            </Grid>
+                            <Grid item xs={12} sm={6}>
+                                <TextField
+                                    required
+                                    fullWidth
+                                    id='lastName'
+                                    label='email'
+                                    name='email'
+                                    value={email}
+                                    onChange={(e) => setEmail(e.target.value)}
+                                />
+                            </Grid>
+                            <Grid item xs={12}>
+                                <TextField
+                                    required
+                                    fullWidth
+                                    label='Password'
+                                    type={showPassword ? 'text' : 'password'}
+                                    value={password}
+                                    onChange={(e) =>
+                                        setPassword(e.target.value)
+                                    }
+                                    InputProps={{
+                                        endAdornment: (
+                                            <IconButton
+                                                onClick={
+                                                    handleTogglePasswordVisibility
+                                                }
+                                            >
+                                                {showPassword ? (
+                                                    <VisibilityOff />
+                                                ) : (
+                                                    <Visibility />
+                                                )}
+                                            </IconButton>
+                                        ),
+                                    }}
+                                />
+                            </Grid>
+                            <Grid item xs={12}>
+                                <TextField
+                                    required
+                                    fullWidth
+                                    label='Confirm Password'
+                                    type={
+                                        showConfirmPassword
+                                            ? 'text'
+                                            : 'password'
+                                    }
+                                    value={confirmPassword}
+                                    onChange={(e) =>
+                                        setConfirmPassword(e.target.value)
+                                    }
+                                    InputProps={{
+                                        endAdornment: (
+                                            <IconButton
+                                                onClick={
+                                                    handleToggleConfirmPasswordVisibility
+                                                }
+                                            >
+                                                {showConfirmPassword ? (
+                                                    <VisibilityOff />
+                                                ) : (
+                                                    <Visibility />
+                                                )}
+                                            </IconButton>
+                                        ),
+                                    }}
+                                />
+                            </Grid>
+                            <Grid item xs={12}>
+                                <FormControlLabel
+                                    control={
+                                        <Checkbox
+                                            value='allowExtraEmails'
+                                            color='primary'
+                                        />
+                                    }
+                                    label='I agree to the Terms and Conditions'
+                                />
+                                <Typography variant='body2'>
+                                    Read our{' '}
+                                    <Link
+                                        href='/privacy-policy'
+                                        target='_blank'
+                                    >
+                                        Privacy Policy
+                                    </Link>
+                                    .
+                                </Typography>
+                            </Grid>
+                        </Grid>
+                        <Button
+                            type='submit'
+                            fullWidth
+                            variant='contained'
+                            sx={{ mt: 3, mb: 2 }}
                         >
-                            {showConfirmPassword ? (
-                                <VisibilityOff />
-                            ) : (
-                                <Visibility />
-                            )}
-                        </IconButton>
-                    ),
-                }}
-            />
-            {/* Add optional fields here */}
-            <FormControlLabel
-                control={<Checkbox />}
-                label='I agree to the Terms and Conditions'
-            />
-            <Typography variant='body2'>
-                Read our{' '}
-                <Link href='/privacy-policy' target='_blank'>
-                    Privacy Policy
-                </Link>
-                .
-            </Typography>
-            <Button variant='contained' onClick={handleRegister}>
-                Sign Up
-            </Button>
-        </Container>
+                            Sign Up
+                        </Button>
+                        <Grid container justifyContent='flex-end'>
+                            <Grid item>
+                                <Link href='/login' variant='body2'>
+                                    Already have an account? Sign in
+                                </Link>
+                            </Grid>
+                        </Grid>
+                    </Box>
+                </Box>
+            </Container>
+        </ThemeProvider>
     );
 };
 
diff --git a/src/pages/Login/Login.css b/src/pages/Login/Login.css
index db88bb9..e524692 100644
--- a/src/pages/Login/Login.css
+++ b/src/pages/Login/Login.css
@@ -3,40 +3,54 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
+    gap: 1.5rem;
     height: 100vh;
     font-family: 'Roboto', 'Open Sans', sans-serif;
 }
 
-.MuiFormControl-root {
-    margin-bottom: 15px;
-    /* Adjust margin between the fields */
+.login-wrapper-icon {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
 }
 
+.login-wrapper-input {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    width: 35%;
+}
+
+
+
 .MuiInputBase-input {
     font-family: 'Roboto', 'Open Sans', sans-serif;
-    margin-top: 15px;
-    margin-bottom: 15px;
 }
 
-.checkbox-wrapper {
-    display: flex;
-    align-items: center;
-    margin-bottom: 5px;
-    /* Adjust margin between the checkbox and the label */
-}
 
-.forgot-password {
-    margin-bottom: 5px;
-    /* Adjust margin below the "Forgot Password" link */
+.checkbox-wrapper input {
+    margin-right: .5rem;
 }
 
+
+
 .login-button {
-    /* Adjust margin above the login button */
     background-color: #1976d2;
-    /* Set primary color */
     color: #fff;
-    padding: 10px 20px;
+    padding: .5rem 1.25rem;
     border: none;
-    border-radius: 4px;
+    font-weight: 700;
+    font-size: 1.25rem;
+    border-radius: .25rem;
     cursor: pointer;
+    width: 35%;
 }
+
+.login-wrapper-forgot-register {
+    display: flex;
+    width: 35%;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+}
\ No newline at end of file
diff --git a/src/pages/Login/Login.jsx b/src/pages/Login/Login.jsx
index 1fe8987..deae428 100644
--- a/src/pages/Login/Login.jsx
+++ b/src/pages/Login/Login.jsx
@@ -6,6 +6,8 @@ import {
     TextField,
     Typography,
 } from '@mui/material';
+import Avatar from '@mui/material/Avatar';
+import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
 import { Visibility, VisibilityOff } from '@mui/icons-material';
 import { Link } from 'react-router-dom';
 import './Login.css';
@@ -44,51 +46,66 @@ function Login() {
 
     return (
         <div className='login-wrapper'>
-            <TextField
-                label='Username or Email'
-                value={usernameOrEmail}
-                onChange={(e) => setUsernameOrEmail(e.target.value)}
-            />
-            <TextField
-                label='Password'
-                type={showPassword ? 'text' : 'password'}
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                InputProps={{
-                    endAdornment: (
-                        <InputAdornment position='end'>
-                            <IconButton
-                                onClick={() => setShowPassword(!showPassword)}
-                                onMouseDown={(e) => e.preventDefault()}
-                            >
-                                {showPassword ? (
-                                    <VisibilityOff />
-                                ) : (
-                                    <Visibility />
-                                )}
-                            </IconButton>
-                        </InputAdornment>
-                    ),
-                }}
-            />
-            <div className='checkbox-wrapper'>
-                <input
-                    type='checkbox'
-                    checked={rememberMe}
-                    onChange={(e) => setRememberMe(e.target.checked)}
+            <div className='login-wrapper-icon'>
+                <Avatar sx={{ bgcolor: 'secondary.main' }}>
+                    <LockOutlinedIcon />
+                </Avatar>
+                <Typography component='h1' variant='h5'>
+                    Sign In
+                </Typography>
+            </div>
+            <div className='login-wrapper-input'>
+                <TextField
+                    label='Username or Email'
+                    value={usernameOrEmail}
+                    onChange={(e) => setUsernameOrEmail(e.target.value)}
+                />
+                <TextField
+                    label='Password'
+                    type={showPassword ? 'text' : 'password'}
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    InputProps={{
+                        endAdornment: (
+                            <InputAdornment position='end'>
+                                <IconButton
+                                    onClick={() =>
+                                        setShowPassword(!showPassword)
+                                    }
+                                    onMouseDown={(e) => e.preventDefault()}
+                                >
+                                    {showPassword ? (
+                                        <VisibilityOff />
+                                    ) : (
+                                        <Visibility />
+                                    )}
+                                </IconButton>
+                            </InputAdornment>
+                        ),
+                    }}
                 />
-                <label>Remember Me</label>
+                <div className='checkbox-wrapper'>
+                    <input
+                        type='checkbox'
+                        checked={rememberMe}
+                        onChange={(e) => setRememberMe(e.target.checked)}
+                    />
+                    <label>Remember Me</label>
+                </div>
             </div>
-            <a href='/forgot-password' className='forgot-password'>
-                Forgot Password
-            </a>
+
             <button onClick={handleLogin} className='login-button'>
-                Log In
+                Sign In
             </button>
-            <Typography variant='body2'>
-                Don&apos;t have an account? Please{' '}
-                <Link to='/register'>register here</Link>
-            </Typography>
+            <div className='login-wrapper-forgot-register'>
+                <a href='/forgot-password' className='forgot-password'>
+                    Forgot Password
+                </a>
+                <Typography variant='body2'>
+                    Don&apos;t have an account? Please{' '}
+                    <Link to='/register'>register here</Link>
+                </Typography>
+            </div>
         </div>
     );
 }