+

frontend/src/pages/createCharacter.jsx

@@ -148,7 +148,7 @@ const CreateCharacter = () => {
                       height="300"
                       image={imagePreview}
                       alt="Character Preview"
-                      sx={{ borderRadius: '3px', objectFit: 'cover', margin: '0 auto' }}
+                      sx={{ borderRadius: '3px', objectFit: 'contain', margin: '0 auto', borderBottom: '1px solid #444' }}  
                     />
                   </Box>
                 ) : (

frontend/src/pages/games.jsx

@@ -114,13 +114,13 @@ const GamesPage = () => {
         {/* Character Image and Details */}
         <Grid2 item xs={12} md={4}>
           <Box sx={{ border: '1px solid #444', borderRadius: '3px', p: 2, backgroundColor: '#2e2e3f' }}>
-            <Card sx={{ width: '400px', backgroundColor: '#1e1e2f', color: '#fff', height: '635px' }}>
+            <Card sx={{ width: '480px', backgroundColor: '#1e1e2f', color: '#fff', height: '635px' }}>
               <CardMedia
                 component="img"
                 height="300"
                 image={character.Img || defaultCharacterImage}
                 alt={character.CharName}
-                sx={{ borderRadius: '3px', objectFit: 'cover', margin: '0 auto' }}
+                sx={{ borderRadius: '3px', objectFit: 'contain', margin: '0 auto', borderBottom: '1px solid #444' }}
               />
               <CardContent sx={{padding: '4px'}}>
                 <Typography variant="h4" sx={{ mb: 4, color: '#fff', textAlign: 'center'}}>{character.CharName}</Typography>

frontend/src/pages/profile.jsx

@@ -57,6 +57,9 @@ const Profile = () => {
                   <Typography variant="body2" sx={{ color: '#bbb' }}>
                     Age: {character.Age}
                   </Typography>
+                  <Typography variant="body2" sx={{ color: '#bbb', mt: 1 }}>
+                    Sex: {character.Sex}
+                  </Typography>
                 </CardContent>
               </Card>
             </Link>