diff --git a/gameservice/game-service.js b/gameservice/game-service.js
index 0eec7757..3f69e773 100644
--- a/gameservice/game-service.js
+++ b/gameservice/game-service.js
@@ -148,13 +148,28 @@ app.get('/getParticipation/:userId', async (req, res) => {
       {
         $group: {
           _id: null,
-          totalGames: { $sum: 1 }, //$sum -> Retorna la suma de los valores numéricos
+          totalGames: { $sum: 1 },
           correctAnswers: { $sum: "$pAcertadas" },
           incorrectAnswers: { $sum: "$pFalladas" },
           totalTime: { $sum: "$totalTime" },
+          classic: {
+            $sum: { $cond: [{ $eq: ["$gameMode", "classic"] }, 1, 0] }
+          },
+          infinite: {
+            $sum: { $cond: [{ $eq: ["$gameMode", "infinite"] }, 1, 0] }
+          },
+          threeLife: {
+            $sum: { $cond: [{ $eq: ["$gameMode", "threeLife"] }, 1, 0] }
+          },
+          category: {
+            $sum: { $cond: [{ $eq: ["$gameMode", "category"] }, 1, 0] }
+          },
+          custom: {
+            $sum: { $cond: [{ $eq: ["$gameMode", "custom"] }, 1, 0] }
+          }
         },
       },
-    ]);
+    ]);    
 
     if (participationData.length === 0 || (participationData.length > 0 && participationData[0].totalGames === 0)) {
       // No se encontraron datos para el usuario
diff --git a/gameservice/game-service.test.js b/gameservice/game-service.test.js
index a74a9d45..bf84fed2 100644
--- a/gameservice/game-service.test.js
+++ b/gameservice/game-service.test.js
@@ -37,7 +37,7 @@ beforeEach(async () => {
     pAcertadas: 5,
     pFalladas: 3,
     totalTime: 1200,
-    gameMode: 'normal'
+    gameMode: 'classic'
   });
 });
 
@@ -54,7 +54,7 @@ describe('Game Service', () => {
       pAcertadas: 5,
       pFalladas: 3,
       totalTime: 1200,
-      gameMode: 'normal'
+      gameMode: 'classic'
     };
 
     const response = await request(app).post('/addgame').send(newGame);
@@ -79,8 +79,15 @@ describe('Game Service', () => {
       correctAnswers: 5,
       incorrectAnswers: 3,
       totalTime: 1200,
+      classic: 1,
+      infinite: 0,
+      threeLife: 0,
+      category: 0,
+      custom: 0,
     };
 
+    
+
     const response = await request(app).get(`/getParticipation/${userId}`);
 
     expect(response.status).toBe(200);
diff --git a/webapp/src/components/Participation.jsx b/webapp/src/components/Participation.jsx
index 7b0a727c..4d40194c 100644
--- a/webapp/src/components/Participation.jsx
+++ b/webapp/src/components/Participation.jsx
@@ -3,6 +3,7 @@ import axios from 'axios';
 import '../css/participation.css';
 import { SessionContext } from '../SessionContext';
 import { FormattedMessage } from 'react-intl';
+import Typography from '@mui/material/Typography';
 import Table from '@mui/material/Table';
 import TableBody from '@mui/material/TableBody';
 import TableCell from '@mui/material/TableCell';
@@ -43,61 +44,63 @@ export const Participation = ({ goTo }) => {
   return (
     <main className="Participation-container">
       <div>
-      <h1 className="Participation-title"><FormattedMessage id="participationTitle" /></h1>
+        <Typography id="participationTitle" sx={{ textAlign: 'center', fontSize:'2em', margin:'0 0 0.3em 0 !important', color:'#8f95fd' }}>
+          <FormattedMessage id="participationTitle" />
+        </Typography>
 
-      {loading ? (
-        <p><FormattedMessage id={participationData ? "loadingData" : "noParticipationData"} className="Participation-text"/></p>
-      ) : (
-        participationData !== null ? (
-          <div className="Participation-text">
-            <TableContainer component={Paper}>
-              <Table className='tablePost' sx={{ minWidth: '30vw' }} aria-label="simple table">
-                <TableBody>
-                  <TableRow key={"Total Games"} sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
-                    <TableCell sx={{ fontSize:'1.2em' }}><FormattedMessage id="totalGames" /></TableCell>
-                    <TableCell sx={{ fontSize:'1.2em' }} align="right">{participationData.totalGames}</TableCell>
-                  </TableRow>
-                  <TableRow key={"Correct Answers"} sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
-                    <TableCell sx={{ fontSize:'1.2em' }}><FormattedMessage id="correctAnswers" /></TableCell>
-                    <TableCell sx={{ fontSize:'1.2em' }} align="right">{participationData.correctAnswers}</TableCell>
-                  </TableRow>
-                  <TableRow key={"Incorrect Answers"} sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
-                    <TableCell sx={{ fontSize:'1.2em' }}><FormattedMessage id="incorrectAnswers" /></TableCell>
-                    <TableCell sx={{ fontSize:'1.2em' }} align="right">{participationData.incorrectAnswers}</TableCell>
-                  </TableRow>
-                  <TableRow key={"Total Time"} sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
-                    <TableCell sx={{ fontSize:'1.2em' }}><FormattedMessage id="totalTime" /></TableCell>
-                    <TableCell sx={{ fontSize:'1.2em' }} align="right">{participationData.totalTime} <FormattedMessage id="seconds" /></TableCell>
-                  </TableRow>
-                </TableBody>
-              </Table>
-            </TableContainer>
-            <div data-testid="pie-chart" className="recharts-wrapper">
-              <PieChart width={400} height={400}>
-                <Pie
-                  data={[
-                    { name: <FormattedMessage id="correctAnswers" />, value: participationData.correctAnswers },
-                    { name: <FormattedMessage id="incorrectAnswers" />, value: participationData.incorrectAnswers }
-                  ]}
-                  dataKey="value"
-                  nameKey="name"
-                  cx="50%"
-                  cy="50%"
-                  outerRadius={80}
-                  label
-                  labelLine={false}
-                >
-                  <Cell fill="#82ca9d" /> {/* Color verde para Respuestas Correctas */}
-                  <Cell fill="#ff6b6b" /> {/* Color rojo para Respuestas Incorrectas */}
-                </Pie>
-                <Tooltip />
-              </PieChart>
-            </div>
-          </div>
+        {loading ? (
+          <p><FormattedMessage id={participationData ? "loadingData" : "noParticipationData"} className="Participation-text"/></p>
         ) : (
-          <p><FormattedMessage id="noParticipationData" className="Participation-text"/></p>
-        )
-      )}
+          participationData !== null ? (
+            <div className="Participation-text">
+              <TableContainer component={Paper} className='tableContainer'>
+                <Table className='tablePost' sx={{ minWidth: '30vw' }} aria-label="simple table">
+                  <TableBody>
+                    <TableRow key={"Total Games"} sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
+                      <TableCell sx={{ fontSize:'1.2em' }}><FormattedMessage id="totalGames" /></TableCell>
+                      <TableCell sx={{ fontSize:'1.2em' }} align="right">{participationData.totalGames}</TableCell>
+                    </TableRow>
+                    <TableRow key={"Correct Answers"} sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
+                      <TableCell sx={{ fontSize:'1.2em' }}><FormattedMessage id="correctAnswers" /></TableCell>
+                      <TableCell sx={{ fontSize:'1.2em' }} align="right">{participationData.correctAnswers}</TableCell>
+                    </TableRow>
+                    <TableRow key={"Incorrect Answers"} sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
+                      <TableCell sx={{ fontSize:'1.2em' }}><FormattedMessage id="incorrectAnswers" /></TableCell>
+                      <TableCell sx={{ fontSize:'1.2em' }} align="right">{participationData.incorrectAnswers}</TableCell>
+                    </TableRow>
+                    <TableRow key={"Total Time"} sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
+                      <TableCell sx={{ fontSize:'1.2em' }}><FormattedMessage id="totalTime" /></TableCell>
+                      <TableCell sx={{ fontSize:'1.2em' }} align="right">{participationData.totalTime} <FormattedMessage id="seconds" /></TableCell>
+                    </TableRow>
+                  </TableBody>
+                </Table>
+              </TableContainer>
+              <div data-testid="pie-chart" className="recharts-wrapper" style={{ display: 'flex', justifyContent: 'center' }}>
+                <PieChart width={400} height={400}>
+                  <Pie
+                    data={[
+                      { name: <FormattedMessage id="correctAnswers" />, value: participationData.correctAnswers },
+                      { name: <FormattedMessage id="incorrectAnswers" />, value: participationData.incorrectAnswers }
+                    ]}
+                    dataKey="value"
+                    nameKey="name"
+                    cx="50%"
+                    cy="50%"
+                    outerRadius={80}
+                    label
+                    labelLine={false}
+                  >
+                    <Cell fill="#82ca9d" /> {/* Color verde para Respuestas Correctas */}
+                    <Cell fill="#ff6b6b" /> {/* Color rojo para Respuestas Incorrectas */}
+                  </Pie>
+                  <Tooltip />
+                </PieChart>
+              </div>
+            </div>
+          ) : (
+            <p><FormattedMessage id="noParticipationData" className="Participation-text"/></p>
+          )
+        )}
       </div>
     </main>
   );
diff --git a/webapp/src/css/participation.css b/webapp/src/css/participation.css
index 54e1d680..08155cb8 100644
--- a/webapp/src/css/participation.css
+++ b/webapp/src/css/participation.css
@@ -1,20 +1,11 @@
-.Participation-container {
-    margin-top: 50px;
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
+  @media screen and (max-width: 768px) {
+  .tablePost {
+    font-size: 0.8rem;
   }
-  
-  .Participation-title {
-    color: #8f95fd;
-    padding: 0 1em;
-    text-align: center;
-    font-size: 1.4em;
+  .Participation-text{
+    width: 100vmin;
+  }  
+  #participationTitle{
+    padding-top: 60px;
   }
-  
-  .Participation-text {
-    font-size: 1.4em;
-    text-align: center;
-    line-height: 1;
-  }
-  
\ No newline at end of file
+}
diff --git a/webapp/src/test/Participation.test.js b/webapp/src/test/Participation.test.js
index 14b61768..379e23e3 100644
--- a/webapp/src/test/Participation.test.js
+++ b/webapp/src/test/Participation.test.js
@@ -5,7 +5,6 @@ import { Participation } from '../components/Participation';
 import { SessionContext } from '../SessionContext';
 import { IntlProvider } from 'react-intl';
 import messages_en from '../messages/messages_en.json';
-import { FormattedMessage } from 'react-intl';
 
 jest.mock('axios');