diff --git a/backend/database.db b/backend/database.db
index 07c5f38..743abed 100644
Binary files a/backend/database.db and b/backend/database.db differ
diff --git a/frontend/src/pages/games.jsx b/frontend/src/pages/games.jsx
index 7574d36..c24dc77 100644
--- a/frontend/src/pages/games.jsx
+++ b/frontend/src/pages/games.jsx
@@ -2,7 +2,7 @@ import { useState, useEffect, useContext } from 'react';
 import { Link, useParams } from 'react-router-dom';
 import axios from 'axios';
 import { UserContext } from '../context/UserContext';
-import { Box, Typography, Grid, Card, CardContent, CardMedia, Button } from '@mui/material';
+import { Box, Typography, Grid2, Card, CardContent, CardMedia, Button } from '@mui/material';
 import defaultCharacterImage from '../assets/default-character.png';
 
 const GamesPage = () => {
@@ -13,7 +13,9 @@ const GamesPage = () => {
   useEffect(() => {
     const fetchCharacter = async () => {
       try {
+        console.log(`Fetching character for gameId: ${gameId}, userId: ${userId}`); // Debug output
         const response = await axios.get(`http://localhost:5000/games/${gameId}/${userId}/character`);
+        console.log('Character data:', response.data); // Debug output
         setCharacter(response.data);
       } catch (error) {
         console.error('Error fetching character:', error);
@@ -37,78 +39,79 @@ const GamesPage = () => {
   }
 
   return (
-    <Box sx={{ p: 3 }}>
-      <Grid container spacing={3}>
-        {/* Character Info Section */}
-        <Grid item xs={12} md={8}>
-          <Typography variant="h3" sx={{ mb: 4 }}>{character.CharName}</Typography>
-          <Box sx={{ mb: 4 }}>
-            {/* Health Bar */}
-            <Box sx={{ mb: 2 }}>
-              <Typography variant="body1" sx={{ display: 'flex', justifyContent: 'space-between' }}>
+    <Box sx={{ p: 3, }}>
+      <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' }}>
+              <CardMedia
+                component="img"
+                height="300"
+                image={character.Img || defaultCharacterImage}
+                alt={character.CharName}
+                sx={{ borderRadius: '3px' }}
+              />
+              <CardContent>
+                <Typography variant="h5"><strong>Age:</strong> {character.Age}</Typography>
+                <Typography variant="h5"><strong>Race:</strong> {character.Race}</Typography>
+                <Typography variant="h5"><strong>Sex:</strong> {character.Sex}</Typography>
+                <Typography variant="h5"><strong>Job:</strong> {character.Job}</Typography>
+              </CardContent>
+            </Card>
+          </Box>
+        </Grid2>
+
+        {/* CharName, Health and Mana Bars */}
+        <Grid2 item xs={12} md={8}>
+          <Typography variant="h3" sx={{ mb: 4, color: '#fff' }}>{character.CharName}</Typography>
+          <Box sx={{ display: 'flex', gap: 2, mb: 4, width: '600px'}}>
+            <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' }}>
                 <span>Health</span>
-                <span>{character.CurrentHealth}/{character.MaxHealth}</span>
+                <span>{character.currentHealth}/{character.maxHealth}</span>
               </Typography>
-              <Box sx={{ width: '100%', backgroundColor: 'gray', borderRadius: '4px', height: '10px' }}>
-                <Box sx={{ width: `${(character.CurrentHealth / character.MaxHealth) * 100}%`, backgroundColor: 'red', height: '100%', borderRadius: '4px' }}></Box>
+              <Box sx={{ width: '100%', backgroundColor: '#333', borderRadius: '4px', height: '10px' }}>
+                <Box sx={{ width: `${(character.currentHealth / character.maxHealth) * 100}%`, backgroundColor: 'red', height: '100%', borderRadius: '4px' }}></Box>
               </Box>
             </Box>
-            {/* Mana Bar */}
-            <Box>
-              <Typography variant="body1" sx={{ display: 'flex', justifyContent: 'space-between' }}>
+            <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' }}>
                 <span>Mana</span>
-                <span>{character.CurrentMana}/{character.MaxMana}</span>
+                <span>{character.currentMana}/{character.maxMana}</span>
               </Typography>
-              <Box sx={{ width: '100%', backgroundColor: 'gray', borderRadius: '4px', height: '10px' }}>
-                <Box sx={{ width: `${(character.CurrentMana / character.MaxMana) * 100}%`, backgroundColor: 'blue', height: '100%', borderRadius: '4px' }}></Box>
+              <Box sx={{ width: '100%', backgroundColor: '#333', borderRadius: '4px', height: '10px' }}>
+                <Box sx={{ width: `${(character.currentMana / character.maxMana) * 100}%`, backgroundColor: 'blue', height: '100%', borderRadius: '4px' }}></Box>
               </Box>
             </Box>
           </Box>
-          
-          {/* Character Description */}
+
+          {/* Character Info Section */}
           <Box sx={{ mb: 4 }}>
-            <Typography variant="h5" sx={{ mb: 2 }}>Description</Typography>
-            <Typography variant="body1">{character.Looks}</Typography>
+            <Typography variant="h5" sx={{ mb: 2, color: '#fff' }}>Description</Typography>
+            <Typography variant="body1" sx={{ color: '#fff' }}>{character.description}</Typography>
           </Box>
 
           {/* Inventory */}
           <Box>
-            <Typography variant="h5" sx={{ mb: 2 }}>Inventory</Typography>
-            <Grid container spacing={2}>
-              {character.Items?.map((item, index) => (
-                <Grid item xs={6} sm={4} md={3} key={index}>
-                  <Card>
+            <Typography variant="h5" sx={{ mb: 2, color: '#fff' }}>Inventory</Typography>
+            <Grid2 container spacing={2}>
+              {character.inventory?.map((item, index) => (
+                <Grid2 item xs={6} sm={4} md={3} key={index}>
+                  <Card sx={{ backgroundColor: '#1e1e2f', color: '#fff' }}>
                     <CardContent>
                       <Typography variant="h6">{item.name}</Typography>
                       <Typography variant="body2" color="textSecondary">Quantity: {item.quantity}</Typography>
                     </CardContent>
                   </Card>
-                </Grid>
+                </Grid2>
               ))}
-            </Grid>
+            </Grid2>
           </Box>
-        </Grid>
-
-        {/* Character Image and Details */}
-        <Grid item xs={12} md={4}>
-          <Card>
-            <CardMedia
-              component="img"
-              height="300"
-              image={character.Img || defaultCharacterImage}
-              alt={character.CharName}
-            />
-            <CardContent>
-              <Typography variant="body1"><strong>Age:</strong> {character.Age}</Typography>
-              <Typography variant="body1"><strong>Race:</strong> {character.Race}</Typography>
-              <Typography variant="body1"><strong>Sex:</strong> {character.Sex}</Typography>
-              <Typography variant="body1"><strong>Job:</strong> {character.Job}</Typography>
-            </CardContent>
-          </Card>
-        </Grid>
-      </Grid>
+        </Grid2>
+      </Grid2>
     </Box>
   );
 };
 
-export default GamesPage;
\ No newline at end of file
+export default GamesPage; 
\ No newline at end of file