diff --git a/backend/database.db b/backend/database.db
index 743abed..0d76e02 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 c24dc77..591896d 100644
--- a/frontend/src/pages/games.jsx
+++ b/frontend/src/pages/games.jsx
@@ -65,7 +65,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: '600px'}}>
+          <Box sx={{ display: 'flex', gap: 2, mb: 4, width: '450px'}}>
             <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>
@@ -89,7 +89,9 @@ const GamesPage = () => {
           {/* Character Info Section */}
           <Box sx={{ mb: 4 }}>
             <Typography variant="h5" sx={{ mb: 2, color: '#fff' }}>Description</Typography>
-            <Typography variant="body1" sx={{ color: '#fff' }}>{character.description}</Typography>
+            <Box sx={{ maxHeight: '300px', overflowY: 'auto', backgroundColor: '#2e2e3f', p: 2, borderRadius: '8px', border: '1px solid #444' }}>
+              <Typography variant="body1" sx={{ color: '#fff' }}>{character.description}</Typography>
+            </Box>
           </Box>
 
           {/* Inventory */}
diff --git a/frontend/src/pages/profile.jsx b/frontend/src/pages/profile.jsx
index 80691dd..489acbf 100644
--- a/frontend/src/pages/profile.jsx
+++ b/frontend/src/pages/profile.jsx
@@ -1,10 +1,11 @@
 import React, { useState, useEffect, useContext } from 'react';
+import { Link } from 'react-router-dom';
 import { UserContext } from '../context/UserContext';
 import axios from 'axios';
 import { Box, Typography, Grid2, Card, CardContent, CardMedia } from '@mui/material';
 import defaultCharacterImage from '../assets/default-character.png';
 
-function Profile() {
+const Profile = () => {
   const { userId, username } = useContext(UserContext);
   const [characters, setCharacters] = useState([]);
 
@@ -26,7 +27,6 @@ function Profile() {
 
   return (
     <Box sx={{ p: 3 }}>
-      {/* Username on top */}
       <Typography variant="h4" sx={{ mb: 4, color: '#fff' }}>
         Benutzerprofil: {username}
       </Typography>
@@ -37,31 +37,33 @@ function Profile() {
 
       <Grid2 container spacing={3}>
         {characters.map((character) => (
-          <Grid2 item xs={12} sm={6} md={4} key={character.id}>
-            <Card sx={{ border: '1px solid #444', backgroundColor: '#2e2e3f', color: '#fff' }}>
-              <CardMedia
-                component="img"
-                height="200"
-                image={character.imageUrl || defaultCharacterImage}
-                alt={character.CharName}
-              />
-              <CardContent>
-                <Typography variant="h6" component="div" sx={{ color: '#fff', mb: 1 }}>
-                  {character.CharName}
-                </Typography>
-                <Typography variant="body2" sx={{ color: '#bbb', mb: 0.5 }}>
-                  Race: {character.Race}
-                </Typography>
-                <Typography variant="body2" sx={{ color: '#bbb' }}>
-                  Age: {character.Age}
-                </Typography>
-              </CardContent>
-            </Card>
+          <Grid2 item xs={12} sm={6} md={4} key={character.CharID}>
+            <Link to={`/games/${character.GameID}`} style={{ textDecoration: 'none' }}>
+              <Card sx={{ border: '1px solid #444', backgroundColor: '#2e2e3f', color: '#fff', cursor: 'pointer' }}>
+                <CardMedia
+                  component="img"
+                  height="200"
+                  image={character.Img || defaultCharacterImage}
+                  alt={character.CharName}
+                />
+                <CardContent>
+                  <Typography variant="h6" component="div" sx={{ color: '#fff', mb: 1 }}>
+                    {character.CharName}
+                  </Typography>
+                  <Typography variant="body2" sx={{ color: '#bbb', mb: 0.5 }}>
+                    Race: {character.Race}
+                  </Typography>
+                  <Typography variant="body2" sx={{ color: '#bbb' }}>
+                    Age: {character.Age}
+                  </Typography>
+                </CardContent>
+              </Card>
+            </Link>
           </Grid2>
         ))}
       </Grid2>
     </Box>
   );
-}
+};
 
 export default Profile;
\ No newline at end of file