diff --git a/backend/database.db b/backend/database.db
index 0d76e02..aa34431 100644
Binary files a/backend/database.db and b/backend/database.db differ
diff --git a/backend/server.js b/backend/server.js
index 990caac..66896a6 100644
--- a/backend/server.js
+++ b/backend/server.js
@@ -220,6 +220,23 @@ app.get('/games/:gameId/:userId/character', (req, res) => {
     });
 });
 
+// Update Player Character Description
+app.put('/games/:gameId/:userId/character', (req, res) => {
+    const gameId = req.params.gameId;
+    const userId = req.params.userId;
+    const { description } = req.body;
+
+    const stmt = db.prepare('UPDATE PlayerCharacter SET description = ? WHERE GameID = ? AND PlayerID = ?');
+    stmt.run([description, gameId, userId], function (err) {
+        if (err) {
+            console.error('Database error:', err); // Debug output
+            return res.status(500).json({ error: 'Internal server error' });
+        }
+        res.json({ message: 'Description updated successfully!' });
+    });
+    stmt.finalize();
+});
+
 // Fetch Player Items
 app.get('/games/:charId/items', (req, res) => {
     const gameId = req.params.gameId;
diff --git a/frontend/package.json b/frontend/package.json
index 1446ebd..2ebf151 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -12,6 +12,7 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
+    "@mui/icons-material": "^6.3.1",
     "@mui/material": "^6.3.1",
     "axios": "^1.7.9",
     "react": "^18.3.1",
diff --git a/frontend/src/pages/games.jsx b/frontend/src/pages/games.jsx
index 591896d..0ab738f 100644
--- a/frontend/src/pages/games.jsx
+++ b/frontend/src/pages/games.jsx
@@ -2,13 +2,16 @@ 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, Grid2, Card, CardContent, CardMedia, Button } from '@mui/material';
+import { Box, Typography, Grid2, Card, CardContent, CardMedia, Button, IconButton, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, TextField } from '@mui/material';
+import EditIcon from '@mui/icons-material/Edit';
 import defaultCharacterImage from '../assets/default-character.png';
 
 const GamesPage = () => {
   const { userId } = useContext(UserContext);
   const { gameId } = useParams();
   const [character, setCharacter] = useState(null);
+  const [isEditOpen, setIsEditOpen] = useState(false);
+  const [newDescription, setNewDescription] = useState('');
 
   useEffect(() => {
     const fetchCharacter = async () => {
@@ -27,11 +30,35 @@ const GamesPage = () => {
     }
   }, [userId, gameId]);
 
+  const handleEditOpen = () => {
+    setNewDescription(character.description);
+    setIsEditOpen(true);
+  };
+
+  const handleEditClose = () => {
+    setIsEditOpen(false);
+  };
+
+  const handleSaveDescription = async () => {
+    try {
+      const response = await axios.put(`http://localhost:5000/games/${gameId}/${userId}/character`, { description: newDescription });
+      setCharacter({ ...character, description: newDescription });
+      setIsEditOpen(false);
+    } catch (error) {
+      console.error('Error updating description:', error);
+    }
+  };
+
   if (!character) {
     return (
       <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', p: 4 }}>
         <Typography variant="h4" sx={{ mb: 4 }}>No Character Found</Typography>
-        <Button variant="contained" color="primary" component={Link} to="/create-character">
+        <Button
+          variant="contained"
+          sx={{ backgroundColor: '#764ACB', '&:hover': { backgroundColor: '#5e3aa2' } }}
+          component={Link}
+          to="/create-character"
+        >
           Create New Character
         </Button>
       </Box>
@@ -39,7 +66,8 @@ const GamesPage = () => {
   }
 
   return (
-    <Box sx={{ p: 3, }}>
+
+    <Box sx={{ p: 3, color: '#fff' }}>
       <Grid2 container spacing={3}>
         {/* Character Image and Details */}
         <Grid2 item xs={12} md={4}>
@@ -53,6 +81,7 @@ const GamesPage = () => {
                 sx={{ borderRadius: '3px' }}
               />
               <CardContent>
+                <Typography variant="h4" sx={{ mb: 4, color: '#fff' }}>{character.CharName}</Typography>
                 <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>
@@ -64,8 +93,7 @@ const GamesPage = () => {
 
         {/* 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: '450px'}}>
+          <Box sx={{ display: 'flex', gap: 2, mb: 4, width: '800px' }}>
             <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>
@@ -88,8 +116,13 @@ const GamesPage = () => {
 
           {/* Character Info Section */}
           <Box sx={{ mb: 4 }}>
-            <Typography variant="h5" sx={{ mb: 2, color: '#fff' }}>Description</Typography>
-            <Box sx={{ maxHeight: '300px', overflowY: 'auto', backgroundColor: '#2e2e3f', p: 2, borderRadius: '8px', border: '1px solid #444' }}>
+            <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, width: '50px' }}>
+                <EditIcon />
+              </IconButton>
+            </Box>
+            <Box sx={{ maxHeight: '200px', maxWidth: '770px', overflowY: 'auto', backgroundColor: '#2e2e3f', p: 2, borderRadius: '8px', border: '1px solid #444' }}>
               <Typography variant="body1" sx={{ color: '#fff' }}>{character.description}</Typography>
             </Box>
           </Box>
@@ -112,8 +145,55 @@ const GamesPage = () => {
           </Box>
         </Grid2>
       </Grid2>
+
+      {/* Edit Description Dialog */}
+      <Dialog
+        open={isEditOpen}
+        onClose={handleEditClose}
+        PaperProps={{
+          sx: {
+            backgroundColor: '#1e1e2f',
+            color: '#fff',
+            '& .MuiDialogTitle-root': {
+              color: '#fff'
+            }
+          }
+        }}
+      >
+        <DialogTitle>Edit Description</DialogTitle>
+        <DialogContent>
+          <DialogContentText sx={{ color: '#bbb' }}>
+            ---------------------------------------------------------------------
+          </DialogContentText>
+          <TextField
+            autoFocus
+            margin="dense"
+            id="description"
+            label="Description"
+            type="text"
+            fullWidth
+            variant="standard"
+            multiline
+            rows={6}
+            value={newDescription}
+            onChange={(e) => setNewDescription(e.target.value)}
+            sx={{
+              '& .MuiInputBase-root': {
+                color: '#fff'
+              },
+              '& .MuiInputLabel-root': {
+                color: '#ccc'
+              }
+            }}
+          />
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={handleEditClose}>Cancel</Button>
+          <Button onClick={handleSaveDescription}>Save</Button>
+        </DialogActions>
+      </Dialog>
     </Box>
   );
 };
 
-export default GamesPage; 
\ No newline at end of file
+export default GamesPage;
\ No newline at end of file
diff --git a/frontend/src/pages/home.css b/frontend/src/pages/home.css
index 4507f50..43f16b4 100644
--- a/frontend/src/pages/home.css
+++ b/frontend/src/pages/home.css
@@ -10,7 +10,6 @@
 
 .button-group {
   display: flex;
-  
   align-self: center;
   flex-direction: row;
   margin-bottom: 10px;
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 39c1083..b0dee33 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -522,6 +522,13 @@
   resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-6.3.1.tgz#e954cd6be58d92f3acc255089413357b6c4e08c6"
   integrity sha512-2OmnEyoHpj5//dJJpMuxOeLItCCHdf99pjMFfUFdBteCunAK9jW+PwEo4mtdGcLs7P+IgZ+85ypd52eY4AigoQ==
 
+"@mui/icons-material@^6.3.1":
+  version "6.3.1"
+  resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-6.3.1.tgz#f28b5ecc3a4d8e8be389f9e9e5738759c7a98240"
+  integrity sha512-nJmWj1PBlwS3t1PnoqcixIsftE+7xrW3Su7f0yrjPw4tVjYrgkhU0hrRp+OlURfZ3ptdSkoBkalee9Bhf1Erfw==
+  dependencies:
+    "@babel/runtime" "^7.26.0"
+
 "@mui/material@^6.3.1":
   version "6.3.1"
   resolved "https://registry.yarnpkg.com/@mui/material/-/material-6.3.1.tgz#75c51a4f4fefa9879fb197e8fae11dc6891a9d0b"