diff --git a/backend/database.db b/backend/database.db
index 24d4450..8461bbf 100644
Binary files a/backend/database.db and b/backend/database.db differ
diff --git a/frontend/src/pages/games.css b/frontend/src/pages/games.css
index 3e88cbd..99f9ba3 100644
--- a/frontend/src/pages/games.css
+++ b/frontend/src/pages/games.css
@@ -1,6 +1,13 @@
-.bar-bg {
+.bar-bg-mana {
   width: 100%;
-  background-color: #333;
+  background-color: #090040;
+  border-radius: 4px;
+  height: 10px;
+  overflow: hidden;
+}
+.bar-bg-health {
+  width: 100%;
+  background-color: #a10000;
   border-radius: 4px;
   height: 10px;
   overflow: hidden;
@@ -13,7 +20,7 @@
 }
 
 .bar-fg-red {
-  background-color: red;
+  background-color: rgb(52, 190, 24);
 }
 
 .bar-fg-blue {
@@ -27,11 +34,7 @@
     #8A2BE2 50%,   /* Purple */
     #4169E1 100%   /* Blue */
   );
-  -webkit-background-clip: text;
-  background-clip: text;
-  -webkit-text-fill-color: transparent;
-  color: transparent;
-  display: inline-block; /* Ensure icon remains visible */
+  border-radius: 5px;
 }
 
 .rarity-1 {
diff --git a/frontend/src/pages/games.jsx b/frontend/src/pages/games.jsx
index 74d23e9..6868b88 100644
--- a/frontend/src/pages/games.jsx
+++ b/frontend/src/pages/games.jsx
@@ -12,6 +12,7 @@ import WcIcon from '@mui/icons-material/Wc';
 import WorkIcon from '@mui/icons-material/Work';
 import HeartIcon from '@mui/icons-material/Favorite';
 import WaterDropIcon from '@mui/icons-material/WaterDrop';
+import KeyboardDoubleArrowUpIcon from '@mui/icons-material/KeyboardDoubleArrowUp';
 
 import defaultCharacterImage from '../assets/default-character.png';
 import defaultItemImage from '../assets/default-item.png';
@@ -92,11 +93,11 @@ const GamesPage = () => {
         <Typography variant="h4" sx={{ mb: 4 }}>No Character Found</Typography>
         <Button
           variant="contained"
-          sx={{ 
-            backgroundColor: '#764ACB', 
-            '&:hover': { 
-              backgroundColor: '#9865f7' 
-            } 
+          sx={{
+            backgroundColor: '#764ACB',
+            '&:hover': {
+              backgroundColor: '#9865f7'
+            }
           }}
           component={Link}
           to="/create-character"
@@ -112,23 +113,41 @@ const GamesPage = () => {
       <Grid2 container spacing={3}>
         {/* 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: '100%', backgroundColor: '#1e1e2f', color: '#fff', height: '635px' }}>
+          <Box sx={{ border: '1px solid #444', borderRadius: '3px', p: 2, backgroundColor: '#2e2e3f' }}>
+            <Card sx={{ width: '400px', backgroundColor: '#1e1e2f', color: '#fff', height: '635px' }}>
               <CardMedia
                 component="img"
                 height="300"
                 image={character.Img || defaultCharacterImage}
                 alt={character.CharName}
-                sx={{ borderRadius: '3px' }}
+                sx={{ borderRadius: '3px', objectFit: 'cover', margin: '0 auto' }}
               />
-              <CardContent>
-                <Typography variant="h4" sx={{ mb: 4, color: '#fff' }}>{character.CharName}</Typography>
-                <Typography variant="h5"><PaidIcon sx={{ color: 'gold' }} /> <strong>Gold:</strong> {character.Gold}</Typography>
-                <Typography variant="h5"><CalendarTodayIcon sx={{ color: '#C0C0C0' }} /> <strong>Age:</strong> {character.Age}</Typography>
-                <Typography variant="h5"><PetsIcon sx={{ color: '#8B4513' }} /> <strong>Race:</strong> {character.Race}</Typography>
-                <Typography variant="h5"><WcIcon className="gender-icon" sx={{ fontSize: 'inherit' }} /> <strong>Sex:</strong> {character.Sex}</Typography>
-                <Typography variant="h5"><WorkIcon sx={{ color: '#CD7F32' }} /> <strong>Job:</strong> {character.Job}</Typography>
+              <CardContent sx={{padding: '4px'}}>
+                <Typography variant="h4" sx={{ mb: 4, color: '#fff', textAlign: 'center'}}>{character.CharName}</Typography>
+                <Grid2 container spacing={2} sx={{ padding: '4px'}}>
+                  <CardContent sx={{}}>
+                    <Typography variant='h6'><KeyboardDoubleArrowUpIcon sx={{ color: '#fff' }} /> <strong>Level:</strong> {character.Level}</Typography>
+                  </CardContent>
+                  <CardContent sx={{}}>
+                    <Typography variant="h6"><PaidIcon sx={{ color: 'gold' }} /> <strong>Gold:</strong> {character.Gold}</Typography>
+                  </CardContent>
+               </Grid2>
               </CardContent>
+              
+              <Grid2 container spacing={2} sx={{ padding: '8px', borderTop: '1px solid #444' }}>
+                <CardContent sx={{borderRight: '3px solid #444'}}>
+                  <Typography variant="h6"><CalendarTodayIcon sx={{ color: '#C0C0C0' }} /> <strong>Age:</strong> {character.Age}</Typography>
+                  <Typography variant="h6"><PetsIcon sx={{ color: '#8B4513' }} /> <strong>Race:</strong> {character.Race}</Typography>
+                  <Typography variant="h6"><WcIcon className="gender-icon" sx={{ fontSize: 'inherit' }} /> <strong>Sex:</strong> {character.Sex}</Typography>
+                  <Typography variant="h6"><WorkIcon sx={{ color: '#CD7F32' }} /> <strong>Job:</strong> {character.Job}</Typography>
+                </CardContent>
+                <CardContent>
+                  <Typography variant="h6"><strong>Strength:</strong> {character.Strength}</Typography>
+                  <Typography variant="h6"><strong>Dexterity:</strong> {character.Dexterity}</Typography>
+                  <Typography variant="h6"><strong>Agility:</strong> {character.Agility}</Typography>
+                  <Typography variant="h6"><strong>Endurance:</strong> {character.Endurance}</Typography>
+                </CardContent>
+              </Grid2>
             </Card>
           </Box>
         </Grid2>
@@ -138,11 +157,11 @@ const GamesPage = () => {
           <Box sx={{ display: 'flex', gap: 2, mb: 4, width: '885px' }}>
             <Box sx={{ flex: 1, backgroundColor: '#2e2e3f', borderRadius: '8px', p: 2, border: '1px solid #444' }}>
               <Typography variant="body1" sx={{ display: 'flex', justifyContent: 'space-between', color: '#fff' }}>
-                <HeartIcon sx={{color: "red"}}/>
+                <HeartIcon sx={{ color: "red" }} />
                 <span>Health</span>
                 <span>{character.currentHealth}/{character.maxHealth}</span>
               </Typography>
-              <Box className="bar-bg">
+              <Box className="bar-bg-health">
                 <Box
                   className="bar-fg bar-fg-red"
                   sx={{ width: `${(character.currentHealth / character.maxHealth) * 100}%` }}
@@ -151,11 +170,11 @@ const GamesPage = () => {
             </Box>
             <Box sx={{ flex: 1, backgroundColor: '#2e2e3f', borderRadius: '8px', p: 2, border: '1px solid #444' }}>
               <Typography variant="body1" sx={{ display: 'flex', justifyContent: 'space-between', color: '#fff' }}>
-                <WaterDropIcon sx={{color: 'blue'}}/>
+                <WaterDropIcon sx={{ color: 'blue' }} />
                 <span>Mana</span>
                 <span>{character.currentMana}/{character.maxMana}</span>
               </Typography>
-              <Box className="bar-bg">
+              <Box className="bar-bg-mana">
                 <Box
                   className="bar-fg bar-fg-blue"
                   sx={{ width: `${(character.currentMana / character.maxMana) * 100}%` }}
@@ -168,14 +187,14 @@ const GamesPage = () => {
           <Box sx={{ mb: 4 }}>
             <Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
               <Typography variant="h5" sx={{ color: '#fff', mr: 1 }}>Description</Typography>
-              <IconButton 
-                onClick={handleEditOpen} 
-                sx={{ 
-                  marginLeft: '10px', 
-                  color: '#fff', 
-                  backgroundColor: '#764ACB', 
-                  borderRadius: '4px', 
-                  p: 1, 
+              <IconButton
+                onClick={handleEditOpen}
+                sx={{
+                  marginLeft: '10px',
+                  color: '#fff',
+                  backgroundColor: '#764ACB',
+                  borderRadius: '4px',
+                  p: 1,
                   width: '50px',
                   '&:hover': {
                     backgroundColor: '#9865f7'