feat: register & login ui

src/pages/Login.tsx

@@ -104,7 +104,6 @@ const Login = () => {
                     )}
                 </Button>
 
-                {/* Redirect to Register */}
                 <Typography variant="body2" align="center">
                     Don’t have an account?{' '}
                     <Link to="/register" style={{ textDecoration: 'none', color: '#1976d2' }}>

src/pages/Register.tsx

@@ -50,18 +50,18 @@ const Register = () => {
     };
 
     return (
-        <Container maxWidth="sm" sx={{ mt: 8 }}>
             <Box
-                sx={{
+            sx={{
-                    display: 'flex',
+                display: 'flex',
-                    flexDirection: 'column',
+                flexDirection: 'column',
-                    alignItems: 'center',
+                alignItems: 'center',
-                }}
+                mt: 5,
+            }}
             >
                 <Typography variant="h4" gutterBottom>
                     Create an account
                 </Typography>
-                <Box component="form" onSubmit={submitForm} sx={{ mt: 1 }}>
+                <Box component="form" onSubmit={submitForm} sx={{ maxWidth: 400, width: '100%' }}>
                     <TextField
                         margin="normal"
                         required
@@ -94,7 +94,10 @@ const Register = () => {
                         disabled={loading || !email || !password}
                     >
                         {loading ? (
-                            <CircularProgress size={24} sx={{ color: '#fff' }} />
+                            <>
+                            <CircularProgress size={20} sx={{ mr: 2 }} />
+                            Loading
+                            </>
                         ) : (
                             'Register'
                         )}
@@ -107,7 +110,6 @@ const Register = () => {
                     </Typography>
                 </Box>
             </Box>
-        </Container>
     );
 };