1 files changed, 35 insertions, 40 deletions
diff --git a/client/src/components/GuestLogin.tsx b/client/src/components/GuestLogin.tsx
index 32245fc..7f634aa 100644
--- a/client/src/components/GuestLogin.tsx
+++ b/client/src/components/GuestLogin.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useDispatch } from 'react-redux';
-import { Button, TextField, Typography } from '@mui/material';
+import { Button, Paper, TextField, Typography } from '@mui/material';
 import { useForm } from 'react-hook-form';
 import { setCredentials } from '../slices/authSlice';
 import { useLoginMutation } from '../slices/apiSlice';
@@ -44,49 +44,44 @@ function GuestLogin() {
       noValidate
       onSubmit={handleSubmit(onSubmit)}
     >
-      <div
-        style={{
-          width: '90%',
+      <Paper
+        elevation={3}
+        sx={{
+          width: { xs: '90%', md: 400 },
           display: 'flex',
+          flexDirection: 'column',
           justifyContent: 'center',
+          alignItems: 'center',
+          mt: 16,
+          p: 2,
+          borderRadius: '8px',
         }}
       >
-        <div
-          style={{
-            width: 384,
-            marginTop: 128,
-            display: 'flex',
-            flexDirection: 'column',
-            justifyContent: 'center',
-            alignItems: 'center',
-          }}
-        >
-          <Typography variant="h6">Guest Login</Typography>
-          <TextField
-            label="First Name"
-            variant="outlined"
-            margin="normal"
-            fullWidth
-            error={!!errors.firstName}
-            helperText={errors.firstName?.message}
-            required
-            {...register('firstName', { required: 'This field is required' })}
-          />
-          <TextField
-            label="Last Name"
-            variant="outlined"
-            margin="normal"
-            fullWidth
-            error={!!errors.lastName}
-            helperText={errors.lastName?.message}
-            required
-            {...register('lastName', { required: 'This field is required' })}
-          />
-          <Button type="submit" variant="contained" fullWidth sx={{ mt: 2 }}>
-            Log in
-          </Button>
-        </div>
-      </div>
+        <Typography variant="h6">Guest Login</Typography>
+        <TextField
+          label="First Name"
+          variant="outlined"
+          margin="normal"
+          fullWidth
+          error={!!errors.firstName}
+          helperText={errors.firstName?.message}
+          required
+          {...register('firstName', { required: 'This field is required' })}
+        />
+        <TextField
+          label="Last Name"
+          variant="outlined"
+          margin="normal"
+          fullWidth
+          error={!!errors.lastName}
+          helperText={errors.lastName?.message}
+          required
+          {...register('lastName', { required: 'This field is required' })}
+        />
+        <Button type="submit" variant="contained" fullWidth sx={{ mt: 2 }}>
+          Log in
+        </Button>
+      </Paper>
     </form>
   );
 }