diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx
index 62db2f5d..7a637ccf 100644
--- a/src/pages/Login.tsx
+++ b/src/pages/Login.tsx
@@ -59,16 +59,17 @@ const Login = () => {
                 flexDirection: 'column',
                 alignItems: 'center',
                 justifyContent: 'center',
+                backgroundColor: '#f5f5f5',
               
              
                 height: "calc(100vh - 64px)",
 
             }}
         >
-            <Typography variant="h4" gutterBottom>
+            <Box component="form" onSubmit={submitForm} sx={{ textAlign: 'center',maxWidth: 400, width: '100%', backgroundColor: '#fff', padding: 3, borderRadius: 4,boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.1)', display: 'flex', flexDirection: 'column' }}>
+            <Typography variant="h4" gutterBottom color={"#ff00c3"}>
                 Welcome Back!
             </Typography>
-            <Box component="form" onSubmit={submitForm} sx={{ maxWidth: 400, width: '100%' }}>
                 <TextField
                     fullWidth
                     label="Email"
diff --git a/src/pages/Register.tsx b/src/pages/Register.tsx
index a138a973..c5bdbde0 100644
--- a/src/pages/Register.tsx
+++ b/src/pages/Register.tsx
@@ -57,15 +57,18 @@ const Register = () => {
                 flexDirection: 'column',
                 alignItems: 'center',
                 justifyContent: 'center',
+                
               
              
                 height: "calc(100vh - 64px)",
+                backgroundColor: '#f5f5f5',
             }}
         >
-            <Typography variant="h4" gutterBottom>
+            
+            <Box component="form" onSubmit={submitForm} sx={{ textAlign: 'center',maxWidth: 400, width: '100%', backgroundColor: '#fff', padding: 3, borderRadius: 4,boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.1)', display: 'flex', flexDirection: 'column' }}>
+            <Typography variant="h4" gutterBottom color={'#ff00c3'}>
                 Create an account
             </Typography>
-            <Box component="form" onSubmit={submitForm} sx={{ maxWidth: 400, width: '100%' }}>
                 <TextField
                     margin="normal"
                     required
@@ -113,7 +116,8 @@ const Register = () => {
                     </Link>
                 </Typography>
             </Box>
-        </Box>
+            </Box>
+       
     );
 };