diff --git a/webapp/e2e/steps/theCallange.steps.js b/webapp/e2e/steps/theCallange.steps.js
index 8b3d7d59..609fd412 100644
--- a/webapp/e2e/steps/theCallange.steps.js
+++ b/webapp/e2e/steps/theCallange.steps.js
@@ -86,15 +86,7 @@ defineFeature(feature, test => {
     });
 
     then('The button turns green', async () => {
-        /*const answerButton = await page.$x('(//*[@data-testid="answer"])[1]');
-        const textoBoton1 = await page.evaluate(button => button.innerText, answerButton[0]);
-        const textoBoton2 = await page.evaluate(button => button.innerText, answerButton[1]);
-        if(textoBoton1 === "Madrid") {
-          await expect(textoBoton1).toMatch(/Madrid/i);
-        } else {
-          await expect(textoBoton2).toMatch(/Madrid/i);
-        }*/
-        await expect(page).toMatchElement("button", { style: { color: 'green' } });
+        await expect(page).toMatchElement("button", { style: { color: 'rgb(51, 153, 102);' } });
     });
   })
 
@@ -119,16 +111,8 @@ defineFeature(feature, test => {
     });
 
     then('The button turns red', async () => {
-        /*const answerButton = await page.$x('(//*[@data-testid="answer"])[2]');
-        const textoBoton1 = await page.evaluate(button => button.innerText, answerButton[0]);
-        const textoBoton2 = await page.evaluate(button => button.innerText, answerButton[1]);
-        if(textoBoton1 !== "Madrid") {
-          await expect(textoBoton1).not.toMatch(/Madrid/i);
-        } else {
-          await expect(textoBoton2).toMatch(/Madrid/i);
-        }*/
-        await expect(page).toMatchElement("button", { style: { color: 'red' } });
-        await expect(page).toMatchElement("button", { style: { color: 'green' } });
+        await expect(page).toMatchElement("button", { style: { color: 'rgb(153, 0, 0);' } });
+        await expect(page).toMatchElement("button", { style: { color: 'rgb(51, 153, 102);' } });
     });
   })
 
diff --git a/webapp/src/pages/Statistics.js b/webapp/src/pages/Statistics.js
index 83b6b14c..632e5202 100644
--- a/webapp/src/pages/Statistics.js
+++ b/webapp/src/pages/Statistics.js
@@ -41,8 +41,8 @@ const Statistics = () => {
     useEffect(() => {
         const fetchQuestionsRecord = async () => {
             try {
-                const response = await axios.get(`${apiEndpoint}/questionsRecord/${username}/${selectedMode}`, {
-                    username: username,
+                const response = await axios.get(`${apiEndpoint}/questionsRecord/${user}/${selectedMode}`, {
+                    username: user,
                     gameMode: selectedMode
                 });
                 setQuestionsRecord(response.data);
@@ -52,7 +52,7 @@ const Statistics = () => {
         };
 
         fetchQuestionsRecord();
-    }, [username, selectedMode]);
+    }, [user, selectedMode]);
 
     const totalPages = Math.ceil(questionsRecord.length / itemsPerPage);
 
@@ -236,14 +236,14 @@ const Statistics = () => {
                                 <Grid item xs={12} key={questionIndex}>
                                     <Box sx={{ bgcolor: '#f0f0f0', borderRadius: '20px', padding: '2%' }}>
                                         <Typography variant="body1" gutterBottom>
-                                            {question.correctAnswer === question.response ? <CheckIcon style={{color: 'green', fontSize: '1.2rem'}} /> : <ClearIcon style={{color: 'red', fontSize: '1.2rem'}} />}
+                                            {question.correctAnswer === question.response ? <CheckIcon style={{color: theme.palette.success.main, fontSize: '1.2rem'}} /> : <ClearIcon style={{color: theme.palette.error.main, fontSize: '1.2rem'}} />}
                                             {question.question}
                                         </Typography>
                                         {question.options.map((option, optionIndex) => (
                                             <Box
                                                 key={optionIndex}
                                                 sx={{
-                                                    bgcolor: option === question.correctAnswer ? 'green' : question.response === option ? 'red' : '#ffffff',
+                                                    bgcolor: option === question.correctAnswer ? theme.palette.success.main : question.response === option ? theme.palette.error.main : '#ffffff',
                                                     color: option === question.correctAnswer || option === question.response ? '#ffffff' : 'inherit', 
                                                     borderRadius: '20px',
                                                     padding: '2%',
@@ -327,7 +327,7 @@ const Statistics = () => {
                     <Button
                         onClick={() => setShowQuestionsRecord(!showQuestionsRecord)}
                         variant="contained"
-                        sx={{ marginBottom: '0.5em', marginTop: '0.5em', backgroundColor: 'green', color: theme.palette.secondary.main, borderColor: theme.palette.primary.main, '&:hover': { backgroundColor: theme.palette.secondary.main, color: theme.palette.primary.main, borderColor: theme.palette.primary.main } }}
+                        sx={{ marginBottom: '0.5em', marginTop: '0.5em', backgroundColor: theme.palette.success.main, color: theme.palette.secondary.main, borderColor: theme.palette.primary.main, '&:hover': { backgroundColor: theme.palette.secondary.main, color: theme.palette.primary.main, borderColor: theme.palette.primary.main } }}
                     >
                         {showQuestionsRecord ? t("Statistics.button.hide_record") : t("Statistics.button.show_record")}
                     </Button>
diff --git a/webapp/src/pages/games/TheChallengeGame.js b/webapp/src/pages/games/TheChallengeGame.js
index d9c9c440..5397347f 100644
--- a/webapp/src/pages/games/TheChallengeGame.js
+++ b/webapp/src/pages/games/TheChallengeGame.js
@@ -381,7 +381,7 @@ const TheChallengeGame = () => {
                         <Grid item xs={12} key={index}>
                             <Button data-testid={buttonStates[index] === "success" ? `success${index}` : buttonStates[index] === "failure" ? `fail${index}` : `answer${index}`}
                                 variant="contained" onClick={() => selectResponse(index, option)} disabled={buttonStates[index] !== null || answered}
-                                sx={{ height: "3.3em", width: "50%", borderRadius: "10px", margin: "5px", "&:disabled": { backgroundColor: buttonStates[index] === "success" ? "green" : buttonStates[index] === "failure" ? "red" : "gray", color: "white" }}}>
+                                sx={{ height: "3.3em", width: "50%", borderRadius: "10px", margin: "5px", "&:disabled": { backgroundColor: buttonStates[index] === "success" ? theme.palette.success.main : buttonStates[index] === "failure" ? theme.palette.error.main : "gray", color: "white" }}}>
                                 {buttonStates[index] === "success" ? <CheckIcon /> : buttonStates[index] === "failure" ? <ClearIcon /> : null}
                                 {option}
                             </Button>