ui changes

frontend/src/components/Login.js

@@ -1,5 +1,6 @@
 import React, { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { Button, Container, Paper, Typography, Box } from '@mui/material';
 
 const Login = () => {
   const navigate = useNavigate();
@@ -16,10 +17,27 @@ const Login = () => {
   };
 
   return (
-    <div>
-      <h2>Login</h2>
-      <button onClick={handleLogin}>Login with Discord</button>
-    </div>
+    <Container component="main" maxWidth="xs" sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', minHeight: '100vh' }}>
+      <Paper elevation={3} sx={{ padding: 4, display: 'flex', flexDirection: 'column', alignItems: 'center', borderRadius: '20px', boxShadow: '0 8px 16px 0 rgba(0,0,0,0.2)' }}>
+        <Typography component="h1" variant="h4" sx={{ marginBottom: 2, fontWeight: 'bold' }}>
+          Welcome!
+        </Typography>
+        <Typography component="p" variant="h6" sx={{ marginBottom: 4, textAlign: 'center' }}>
+          Login with your Discord account to continue
+        </Typography>
+        <Box sx={{ width: '100%' }}>
+          <Button
+            fullWidth
+            variant="contained"
+            color="primary"
+            onClick={handleLogin}
+            sx={{ borderRadius: '10px', padding: '10px 0', textTransform: 'none', fontSize: '1.2rem' }}
+          >
+            Login with Discord
+          </Button>
+        </Box>
+      </Paper>
+    </Container>
   );
 };