From ea7d33d3c2f13d09064726ae933aa856e35d8a74 Mon Sep 17 00:00:00 2001
From: uo287543 <uo287543@uniovi.es>
Date: Sat, 22 Feb 2025 20:47:55 +0100
Subject: [PATCH 01/21] componentes creados version1

---
 webapp/src/components/home/Configuration.js | 46 +++++++++++++++++++++
 webapp/src/components/home/Home.js          | 20 +++++++++
 2 files changed, 66 insertions(+)
 create mode 100644 webapp/src/components/home/Configuration.js
 create mode 100644 webapp/src/components/home/Home.js

diff --git a/webapp/src/components/home/Configuration.js b/webapp/src/components/home/Configuration.js
new file mode 100644
index 00000000..2b7bc5e6
--- /dev/null
+++ b/webapp/src/components/home/Configuration.js
@@ -0,0 +1,46 @@
+import React, { useState } from "react";
+
+const Configuration = () => {
+  const [questions, setQuestions] = useState(30);
+  const [time, setTime] = useState(120);
+
+  return (
+    <div className="flex flex-col items-center justify-center h-screen bg-white">
+      <div className="bg-gray-100 p-6 rounded-lg shadow-lg w-80 relative">
+        <button className="text-red-500 text-xl absolute top-2 left-4">✖</button>
+        <h2 className="text-xl font-bold text-center mt-4">Configuración de la Partida</h2>
+        <div className="mt-4">
+          <label className="block text-gray-700">Número de Preguntas:</label>
+          <select className="w-full p-2 border rounded mt-1" value={questions} onChange={(e) => setQuestions(e.target.value)}>
+            <option>10</option>
+            <option>20</option>
+            <option>30</option>
+          </select>
+        </div>
+        <div className="mt-4">
+          <label className="block text-gray-700">Tiempo:</label>
+          <select className="w-full p-2 border rounded mt-1" value={time} onChange={(e) => setTime(e.target.value)}>
+            <option>60s</option>
+            <option>120s</option>
+            <option>180s</option>
+          </select>
+        </div>
+        <div className="mt-4 text-center">
+          <div className="space-x-2">
+            <span className="px-2 py-1 bg-purple-400 text-white rounded">Historia</span>
+            <span className="px-2 py-1 bg-green-400 text-white rounded">Ciencia</span>
+            <span className="px-2 py-1 bg-red-400 text-white rounded">Arte</span>
+          </div>
+          <div className="mt-2 space-x-2">
+            <span className="px-2 py-1 bg-yellow-400 text-white rounded">Deportes</span>
+            <span className="px-2 py-1 bg-blue-400 text-white rounded">Geografía</span>
+          </div>
+        </div>
+        <button className="w-full bg-blue-500 text-white p-2 rounded mt-4 hover:bg-blue-600">Jugar</button>
+      </div>
+    </div>
+  );
+};
+
+export default Configuration;
+
diff --git a/webapp/src/components/home/Home.js b/webapp/src/components/home/Home.js
new file mode 100644
index 00000000..40282782
--- /dev/null
+++ b/webapp/src/components/home/Home.js
@@ -0,0 +1,20 @@
+import React from "react";
+
+const Home = () => {
+  return (
+    <div className="flex flex-col items-center justify-center h-screen bg-white">
+      <h1 className="text-4xl font-bold">Bienvenido a <span className="text-black">WiChat</span></h1>
+      <p className="text-gray-600 mt-2">Saludos</p>
+      <div className="mt-6 flex flex-col space-y-4">
+        <button className="px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600">
+          Partida Rápida
+        </button>
+        <button className="px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600">
+          Modo Caos
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default Home;

From e504fc52c2b29827d042dc2fc0a8f9e2f6fc39d6 Mon Sep 17 00:00:00 2001
From: uo287543 <uo287543@uniovi.es>
Date: Mon, 24 Feb 2025 23:50:13 +0100
Subject: [PATCH 02/21] =?UTF-8?q?todos=20los=20componentes=20creados,falta?=
 =?UTF-8?q?=20internacionalizaci=C3=B3n=20y=20funcionalidad?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                           | 388 ++++++++++++++++++++
 package.json                                |   7 +
 webapp/package-lock.json                    | 201 +++++++++-
 webapp/package.json                         |   2 +
 webapp/src/App.js                           |  30 +-
 webapp/src/components/home/Configuration.js |  69 ++--
 webapp/src/components/home/Home.js          |  38 +-
 7 files changed, 668 insertions(+), 67 deletions(-)
 create mode 100644 package-lock.json
 create mode 100644 package.json

diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 00000000..87932a66
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,388 @@
+{
+  "name": "wichat_es4a",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "dependencies": {
+        "bootstrap": "^5.3.3",
+        "react-bootstrap": "^2.10.9",
+        "react-icons": "^5.5.0"
+      }
+    },
+    "node_modules/@babel/runtime": {
+      "version": "7.26.9",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.26.9.tgz",
+      "integrity": "sha512-aA63XwOkcl4xxQa3HjPMqOP6LiK0ZDv3mUPYEFXkpHbaFjtGggE1A61FjFzJnB+p7/oy2gA8E+rcBNl/zC1tMg==",
+      "license": "MIT",
+      "dependencies": {
+        "regenerator-runtime": "^0.14.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
+    "node_modules/@react-aria/ssr": {
+      "version": "3.9.7",
+      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.9.7.tgz",
+      "integrity": "sha512-GQygZaGlmYjmYM+tiNBA5C6acmiDWF52Nqd40bBp0Znk4M4hP+LTmI0lpI1BuKMw45T8RIhrAsICIfKwZvi2Gg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      },
+      "engines": {
+        "node": ">= 12"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+      }
+    },
+    "node_modules/@restart/hooks": {
+      "version": "0.4.16",
+      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.16.tgz",
+      "integrity": "sha512-f7aCv7c+nU/3mF7NWLtVVr0Ra80RqsO89hO72r+Y/nvQr5+q0UFGkocElTH6MJApvReVh6JHUFYn2cw1WdHF3w==",
+      "license": "MIT",
+      "dependencies": {
+        "dequal": "^2.0.3"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@restart/ui": {
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/@restart/ui/-/ui-1.9.4.tgz",
+      "integrity": "sha512-N4C7haUc3vn4LTwVUPlkJN8Ach/+yIMvRuTVIhjilNHqegY60SGLrzud6errOMNJwSnmYFnt1J0H/k8FE3A4KA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.26.0",
+        "@popperjs/core": "^2.11.8",
+        "@react-aria/ssr": "^3.5.0",
+        "@restart/hooks": "^0.5.0",
+        "@types/warning": "^3.0.3",
+        "dequal": "^2.0.3",
+        "dom-helpers": "^5.2.0",
+        "uncontrollable": "^8.0.4",
+        "warning": "^4.0.3"
+      },
+      "peerDependencies": {
+        "react": ">=16.14.0",
+        "react-dom": ">=16.14.0"
+      }
+    },
+    "node_modules/@restart/ui/node_modules/@restart/hooks": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.5.1.tgz",
+      "integrity": "sha512-EMoH04NHS1pbn07iLTjIjgttuqb7qu4+/EyhAx27MHpoENcB2ZdSsLTNxmKD+WEPnZigo62Qc8zjGnNxoSE/5Q==",
+      "license": "MIT",
+      "dependencies": {
+        "dequal": "^2.0.3"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@restart/ui/node_modules/uncontrollable": {
+      "version": "8.0.4",
+      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-8.0.4.tgz",
+      "integrity": "sha512-ulRWYWHvscPFc0QQXvyJjY6LIXU56f0h8pQFvhxiKk5V1fcI8gp9Ht9leVAhrVjzqMw0BgjspBINx9r6oyJUvQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16.14.0"
+      }
+    },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.15",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz",
+      "integrity": "sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.8.0"
+      }
+    },
+    "node_modules/@types/prop-types": {
+      "version": "15.7.14",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.14.tgz",
+      "integrity": "sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==",
+      "license": "MIT"
+    },
+    "node_modules/@types/react": {
+      "version": "19.0.10",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.0.10.tgz",
+      "integrity": "sha512-JuRQ9KXLEjaUNjTWpzuR231Z2WpIwczOkBEIvbHNCzQefFIT0L8IqE6NV6ULLyC1SI/i234JnDoMkfg+RjQj2g==",
+      "license": "MIT",
+      "dependencies": {
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@types/react-transition-group": {
+      "version": "4.4.12",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.12.tgz",
+      "integrity": "sha512-8TV6R3h2j7a91c+1DXdJi3Syo69zzIZbz7Lg5tORM5LEJG7X/E6a1V3drRyBRZq7/utz7A+c4OgYLiLcYGHG6w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*"
+      }
+    },
+    "node_modules/@types/warning": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.3.tgz",
+      "integrity": "sha512-D1XC7WK8K+zZEveUPY+cf4+kgauk8N4eHr/XIHXGlGYkHLud6hK9lYfZk1ry1TNh798cZUCgb6MqGEG8DkJt6Q==",
+      "license": "MIT"
+    },
+    "node_modules/bootstrap": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz",
+      "integrity": "sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ],
+      "license": "MIT",
+      "peerDependencies": {
+        "@popperjs/core": "^2.11.8"
+      }
+    },
+    "node_modules/classnames": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==",
+      "license": "MIT"
+    },
+    "node_modules/csstype": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+      "license": "MIT"
+    },
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "license": "MIT"
+    },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
+    "node_modules/prop-types-extra": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz",
+      "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==",
+      "license": "MIT",
+      "dependencies": {
+        "react-is": "^16.3.2",
+        "warning": "^4.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=0.14.0"
+      }
+    },
+    "node_modules/react": {
+      "version": "19.0.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.0.0.tgz",
+      "integrity": "sha512-V8AVnmPIICiWpGfm6GLzCR/W5FXLchHop40W4nXBmdlEceh16rCN8O8LNWm5bh5XUX91fh7KpA+W0TgMKmgTpQ==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-bootstrap": {
+      "version": "2.10.9",
+      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.10.9.tgz",
+      "integrity": "sha512-TJUCuHcxdgYpOqeWmRApM/Dy0+hVsxNRFvq2aRFQuxhNi/+ivOxC5OdWIeHS3agxvzJ4Ev4nDw2ZdBl9ymd/JQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.24.7",
+        "@restart/hooks": "^0.4.9",
+        "@restart/ui": "^1.9.4",
+        "@types/prop-types": "^15.7.12",
+        "@types/react-transition-group": "^4.4.6",
+        "classnames": "^2.3.2",
+        "dom-helpers": "^5.2.1",
+        "invariant": "^2.2.4",
+        "prop-types": "^15.8.1",
+        "prop-types-extra": "^1.1.0",
+        "react-transition-group": "^4.4.5",
+        "uncontrollable": "^7.2.1",
+        "warning": "^4.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.14.8",
+        "react": ">=16.14.0",
+        "react-dom": ">=16.14.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "19.0.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.0.0.tgz",
+      "integrity": "sha512-4GV5sHFG0e/0AD4X+ySy6UJd3jVl1iNsNHdpad0qhABJ11twS3TTBnseqsKurKcsNqCEFeGL3uLpVChpIO3QfQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "scheduler": "^0.25.0"
+      },
+      "peerDependencies": {
+        "react": "^19.0.0"
+      }
+    },
+    "node_modules/react-icons": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",
+      "integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
+    "node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "license": "MIT"
+    },
+    "node_modules/react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==",
+      "license": "MIT"
+    },
+    "node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
+    "node_modules/regenerator-runtime": {
+      "version": "0.14.1",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
+      "license": "MIT"
+    },
+    "node_modules/scheduler": {
+      "version": "0.25.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.25.0.tgz",
+      "integrity": "sha512-xFVuu11jh+xcO7JOAGJNOXld8/TcEHK/4CituBUeUb5hqxJLj9YuemAEuvm9gQ/+pgXYfbQuqAkiYu+u7YEsNA==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
+    "node_modules/uncontrollable": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz",
+      "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.6.3",
+        "@types/react": ">=16.9.11",
+        "invariant": "^2.2.4",
+        "react-lifecycles-compat": "^3.0.4"
+      },
+      "peerDependencies": {
+        "react": ">=15.0.0"
+      }
+    },
+    "node_modules/warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 00000000..18e2b7b6
--- /dev/null
+++ b/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "bootstrap": "^5.3.3",
+    "react-bootstrap": "^2.10.9",
+    "react-icons": "^5.5.0"
+  }
+}
diff --git a/webapp/package-lock.json b/webapp/package-lock.json
index 270554f4..10f390e4 100644
--- a/webapp/package-lock.json
+++ b/webapp/package-lock.json
@@ -15,7 +15,9 @@
         "@testing-library/react": "^14.1.2",
         "@testing-library/user-event": "^14.5.2",
         "axios": "^1.7.9",
+        "bootstrap": "^5.3.3",
         "react": "^18.2.0",
+        "react-bootstrap": "^2.10.9",
         "react-dom": "^18.2.0",
         "react-scripts": "5.0.1",
         "react-simple-typewriter": "^5.0.1",
@@ -3603,6 +3605,75 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@react-aria/ssr": {
+      "version": "3.9.7",
+      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.9.7.tgz",
+      "integrity": "sha512-GQygZaGlmYjmYM+tiNBA5C6acmiDWF52Nqd40bBp0Znk4M4hP+LTmI0lpI1BuKMw45T8RIhrAsICIfKwZvi2Gg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      },
+      "engines": {
+        "node": ">= 12"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+      }
+    },
+    "node_modules/@restart/hooks": {
+      "version": "0.4.16",
+      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.16.tgz",
+      "integrity": "sha512-f7aCv7c+nU/3mF7NWLtVVr0Ra80RqsO89hO72r+Y/nvQr5+q0UFGkocElTH6MJApvReVh6JHUFYn2cw1WdHF3w==",
+      "license": "MIT",
+      "dependencies": {
+        "dequal": "^2.0.3"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@restart/ui": {
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/@restart/ui/-/ui-1.9.4.tgz",
+      "integrity": "sha512-N4C7haUc3vn4LTwVUPlkJN8Ach/+yIMvRuTVIhjilNHqegY60SGLrzud6errOMNJwSnmYFnt1J0H/k8FE3A4KA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.26.0",
+        "@popperjs/core": "^2.11.8",
+        "@react-aria/ssr": "^3.5.0",
+        "@restart/hooks": "^0.5.0",
+        "@types/warning": "^3.0.3",
+        "dequal": "^2.0.3",
+        "dom-helpers": "^5.2.0",
+        "uncontrollable": "^8.0.4",
+        "warning": "^4.0.3"
+      },
+      "peerDependencies": {
+        "react": ">=16.14.0",
+        "react-dom": ">=16.14.0"
+      }
+    },
+    "node_modules/@restart/ui/node_modules/@restart/hooks": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.5.1.tgz",
+      "integrity": "sha512-EMoH04NHS1pbn07iLTjIjgttuqb7qu4+/EyhAx27MHpoENcB2ZdSsLTNxmKD+WEPnZigo62Qc8zjGnNxoSE/5Q==",
+      "license": "MIT",
+      "dependencies": {
+        "dequal": "^2.0.3"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@restart/ui/node_modules/uncontrollable": {
+      "version": "8.0.4",
+      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-8.0.4.tgz",
+      "integrity": "sha512-ulRWYWHvscPFc0QQXvyJjY6LIXU56f0h8pQFvhxiKk5V1fcI8gp9Ht9leVAhrVjzqMw0BgjspBINx9r6oyJUvQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16.14.0"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -3989,6 +4060,15 @@
         "url": "https://github.com/sponsors/gregberge"
       }
     },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.15",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz",
+      "integrity": "sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.8.0"
+      }
+    },
     "node_modules/@testing-library/dom": {
       "version": "10.4.0",
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz",
@@ -4480,7 +4560,6 @@
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.18.tgz",
       "integrity": "sha512-t4yC+vtgnkYjNSKlFx1jkAhH8LgTo2N/7Qvi83kdEaUtMDiwpbLAktKDaAMlRcJ5eSxZkH74eEGt1ky31d7kfQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.0.2"
@@ -4592,6 +4671,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/warning": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.3.tgz",
+      "integrity": "sha512-D1XC7WK8K+zZEveUPY+cf4+kgauk8N4eHr/XIHXGlGYkHLud6hK9lYfZk1ry1TNh798cZUCgb6MqGEG8DkJt6Q==",
+      "license": "MIT"
+    },
     "node_modules/@types/webidl-conversions": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/@types/webidl-conversions/-/webidl-conversions-7.0.3.tgz",
@@ -6273,6 +6358,25 @@
       "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
       "license": "ISC"
     },
+    "node_modules/bootstrap": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz",
+      "integrity": "sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ],
+      "license": "MIT",
+      "peerDependencies": {
+        "@popperjs/core": "^2.11.8"
+      }
+    },
     "node_modules/boxen": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/boxen/-/boxen-7.0.0.tgz",
@@ -6815,6 +6919,12 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/classnames": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==",
+      "license": "MIT"
+    },
     "node_modules/clean-css": {
       "version": "5.3.3",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.3.tgz",
@@ -11346,6 +11456,15 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/ip-address": {
       "version": "9.0.5",
       "resolved": "https://registry.npmjs.org/ip-address/-/ip-address-9.0.5.tgz",
@@ -18826,6 +18945,25 @@
         "react-is": "^16.13.1"
       }
     },
+    "node_modules/prop-types-extra": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz",
+      "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==",
+      "license": "MIT",
+      "dependencies": {
+        "react-is": "^16.3.2",
+        "warning": "^4.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=0.14.0"
+      }
+    },
+    "node_modules/prop-types-extra/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "license": "MIT"
+    },
     "node_modules/prop-types/node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -19276,6 +19414,37 @@
       "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
       "license": "MIT"
     },
+    "node_modules/react-bootstrap": {
+      "version": "2.10.9",
+      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.10.9.tgz",
+      "integrity": "sha512-TJUCuHcxdgYpOqeWmRApM/Dy0+hVsxNRFvq2aRFQuxhNi/+ivOxC5OdWIeHS3agxvzJ4Ev4nDw2ZdBl9ymd/JQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.24.7",
+        "@restart/hooks": "^0.4.9",
+        "@restart/ui": "^1.9.4",
+        "@types/prop-types": "^15.7.12",
+        "@types/react-transition-group": "^4.4.6",
+        "classnames": "^2.3.2",
+        "dom-helpers": "^5.2.1",
+        "invariant": "^2.2.4",
+        "prop-types": "^15.8.1",
+        "prop-types-extra": "^1.1.0",
+        "react-transition-group": "^4.4.5",
+        "uncontrollable": "^7.2.1",
+        "warning": "^4.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.14.8",
+        "react": ">=16.14.0",
+        "react-dom": ">=16.14.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-dev-utils": {
       "version": "12.0.1",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
@@ -19391,6 +19560,12 @@
       "integrity": "sha512-H91OHcwjZsbq3ClIDHMzBShc1rotbfACdWENsmEf0IFvZ3FgGPtdHMcsv45bQ1hAbgdfiA8SnxTKfDS+x/8m2g==",
       "license": "MIT"
     },
+    "node_modules/react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==",
+      "license": "MIT"
+    },
     "node_modules/react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -24551,6 +24726,21 @@
         "through": "^2.3.8"
       }
     },
+    "node_modules/uncontrollable": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz",
+      "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.6.3",
+        "@types/react": ">=16.9.11",
+        "invariant": "^2.2.4",
+        "react-lifecycles-compat": "^3.0.4"
+      },
+      "peerDependencies": {
+        "react": ">=15.0.0"
+      }
+    },
     "node_modules/underscore": {
       "version": "1.12.1",
       "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.12.1.tgz",
@@ -24957,6 +25147,15 @@
         "makeerror": "1.0.12"
       }
     },
+    "node_modules/warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/watchpack": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.2.tgz",
diff --git a/webapp/package.json b/webapp/package.json
index 48a306a1..adf51d5a 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -10,7 +10,9 @@
     "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.2",
     "axios": "^1.7.9",
+    "bootstrap": "^5.3.3",
     "react": "^18.2.0",
+    "react-bootstrap": "^2.10.9",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
     "react-simple-typewriter": "^5.0.1",
diff --git a/webapp/src/App.js b/webapp/src/App.js
index 1f6f1b29..7f424499 100644
--- a/webapp/src/App.js
+++ b/webapp/src/App.js
@@ -1,36 +1,16 @@
-import React, { useState } from 'react';
-import AddUser from './components/AddUser';
-import Login from './components/Login';
+import React from 'react';
 import CssBaseline from '@mui/material/CssBaseline';
 import Container from '@mui/material/Container';
 import Typography from '@mui/material/Typography';
-import Link from '@mui/material/Link';
+import Home from './components/home/Home'; 
 
 function App() {
-  const [showLogin, setShowLogin] = useState(true);
-
-  const handleToggleView = () => {
-    setShowLogin(!showLogin);
-  };
-
   return (
     <Container component="main" maxWidth="xs">
       <CssBaseline />
-      <Typography component="h1" variant="h5" align="center" sx={{ marginTop: 2 }}>
-        Welcome to the 2025 edition of the Software Architecture course
-      </Typography>
-      {showLogin ? <Login /> : <AddUser />}
-      <Typography component="div" align="center" sx={{ marginTop: 2 }}>
-        {showLogin ? (
-          <Link name="gotoregister" component="button" variant="body2" onClick={handleToggleView}>
-            Don't have an account? Register here.
-          </Link>
-        ) : (
-          <Link component="button" variant="body2" onClick={handleToggleView}>
-            Already have an account? Login here.
-          </Link>
-        )}
-      </Typography>
+
+      {/* Mostramos directamente el componente Home */}
+      <Home />
     </Container>
   );
 }
diff --git a/webapp/src/components/home/Configuration.js b/webapp/src/components/home/Configuration.js
index 2b7bc5e6..80937e0d 100644
--- a/webapp/src/components/home/Configuration.js
+++ b/webapp/src/components/home/Configuration.js
@@ -1,46 +1,55 @@
 import React, { useState } from "react";
+import { Button, Dropdown, Container } from "react-bootstrap";
+import "bootstrap/dist/css/bootstrap.min.css";
 
-const Configuration = () => {
+const Configuration = ({ onClose }) => {
   const [questions, setQuestions] = useState(30);
   const [time, setTime] = useState(120);
 
   return (
-    <div className="flex flex-col items-center justify-center h-screen bg-white">
-      <div className="bg-gray-100 p-6 rounded-lg shadow-lg w-80 relative">
-        <button className="text-red-500 text-xl absolute top-2 left-4">✖</button>
-        <h2 className="text-xl font-bold text-center mt-4">Configuración de la Partida</h2>
-        <div className="mt-4">
-          <label className="block text-gray-700">Número de Preguntas:</label>
-          <select className="w-full p-2 border rounded mt-1" value={questions} onChange={(e) => setQuestions(e.target.value)}>
-            <option>10</option>
-            <option>20</option>
-            <option>30</option>
-          </select>
+    <div className="position-fixed top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center bg-dark bg-opacity-50">
+      <div className="bg-white p-4 rounded shadow-lg text-center position-relative" style={{ width: "300px" }}>
+        <button
+          onClick={onClose}
+          className="text-danger fs-4 position-absolute top-0 start-0 m-2 border-0 bg-transparent"
+        >✖</button>
+        <h2 className="mb-3">Configuración de la Partida</h2>
+        <div className="mb-3 d-flex align-items-center justify-content-between">
+          <label className="me-2">Número de Preguntas:</label>
+          <Dropdown onSelect={(value) => setQuestions(Number(value))}>
+            <Dropdown.Toggle variant="light">{questions}</Dropdown.Toggle>
+            <Dropdown.Menu>
+              <Dropdown.Item eventKey={10}>10</Dropdown.Item>
+              <Dropdown.Item eventKey={20}>20</Dropdown.Item>
+              <Dropdown.Item eventKey={30}>30</Dropdown.Item>
+            </Dropdown.Menu>
+          </Dropdown>
         </div>
-        <div className="mt-4">
-          <label className="block text-gray-700">Tiempo:</label>
-          <select className="w-full p-2 border rounded mt-1" value={time} onChange={(e) => setTime(e.target.value)}>
-            <option>60s</option>
-            <option>120s</option>
-            <option>180s</option>
-          </select>
+        <div className="mb-3 d-flex align-items-center justify-content-between">
+          <label className="me-2">Tiempo:</label>
+          <Dropdown onSelect={(value) => setTime(Number(value))}>
+            <Dropdown.Toggle variant="light">{time}s</Dropdown.Toggle>
+            <Dropdown.Menu>
+              <Dropdown.Item eventKey={60}>60s</Dropdown.Item>
+              <Dropdown.Item eventKey={120}>120s</Dropdown.Item>
+              <Dropdown.Item eventKey={180}>180s</Dropdown.Item>
+            </Dropdown.Menu>
+          </Dropdown>
         </div>
-        <div className="mt-4 text-center">
-          <div className="space-x-2">
-            <span className="px-2 py-1 bg-purple-400 text-white rounded">Historia</span>
-            <span className="px-2 py-1 bg-green-400 text-white rounded">Ciencia</span>
-            <span className="px-2 py-1 bg-red-400 text-white rounded">Arte</span>
-          </div>
-          <div className="mt-2 space-x-2">
-            <span className="px-2 py-1 bg-yellow-400 text-white rounded">Deportes</span>
-            <span className="px-2 py-1 bg-blue-400 text-white rounded">Geografía</span>
+        <div className="mb-3">
+          <label className="d-block">Topics</label>
+          <div className="d-flex flex-wrap justify-content-center gap-2">
+          <Button className="px-3 py-1 text-white" style={{ backgroundColor: "purple", border: "none", fontSize: "0.8rem" }}>Historia</Button>
+            <Button className="px-3 py-1 text-white" style={{ backgroundColor: "green", border: "none", fontSize: "0.8rem" }}>Ciencia</Button>
+            <Button className="px-3 py-1 text-white" style={{ backgroundColor: "red", border: "none", fontSize: "0.8rem" }}>Arte</Button>
+            <Button className="px-3 py-1 text-white" style={{ backgroundColor: "orange", border: "none", fontSize: "0.8rem" }}>Deportes</Button>
+            <Button className="px-3 py-1 text-white" style={{ backgroundColor: "blue", border: "none", fontSize: "0.8rem" }}>Geografía</Button>
           </div>
         </div>
-        <button className="w-full bg-blue-500 text-white p-2 rounded mt-4 hover:bg-blue-600">Jugar</button>
+        <Button variant="primary" className="w-100">Jugar</Button>
       </div>
     </div>
   );
 };
 
 export default Configuration;
-
diff --git a/webapp/src/components/home/Home.js b/webapp/src/components/home/Home.js
index 40282782..91c7c0b6 100644
--- a/webapp/src/components/home/Home.js
+++ b/webapp/src/components/home/Home.js
@@ -1,18 +1,34 @@
-import React from "react";
+import React, { useState } from "react";
+import { Navbar, Nav, Container } from 'react-bootstrap';
+import Button from 'react-bootstrap/Button';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import Configuration from "./Configuration";
 
 const Home = () => {
+  const [showConfig, setShowConfig] = useState(false);
+
   return (
-    <div className="flex flex-col items-center justify-center h-screen bg-white">
-      <h1 className="text-4xl font-bold">Bienvenido a <span className="text-black">WiChat</span></h1>
-      <p className="text-gray-600 mt-2">Saludos</p>
-      <div className="mt-6 flex flex-col space-y-4">
-        <button className="px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600">
-          Partida Rápida
-        </button>
-        <button className="px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600">
-          Modo Caos
-        </button>
+    <div className="d-flex flex-column align-items-center justify-content-center vh-100 bg-white">
+      {/* NavBar */}
+      <Navbar bg="light" expand="lg" fixed="top" className="w-100">
+        <Container>
+          <Nav className="ms-auto">
+            <Nav.Link href="#">Reglas</Nav.Link>
+            <Nav.Link href="#">Icono</Nav.Link>
+            <Nav.Link href="#">Salir</Nav.Link>
+          </Nav>
+        </Container>
+      </Navbar>
+
+      {/* Contenido Principal */}
+      <h1 className="text-center fw-bold mt-5">Bienvenido a <span className="text-dark">WiChat</span></h1>
+      <p className="text-secondary">Texto de saludo generado por IA</p>
+      <div className="mt-3 d-flex flex-column gap-3">
+        <Button variant="primary" size="lg" onClick={() => setShowConfig(true)}>Partida Rápida</Button>
+        <Button variant="primary" size="lg">Modo Caos</Button>
       </div>
+
+      {showConfig && <Configuration onClose={() => setShowConfig(false)} />}
     </div>
   );
 };

From beb00f580dc46d8d59ccc48244ff3669821efe4d Mon Sep 17 00:00:00 2001
From: uo287543 <uo287543@uniovi.es>
Date: Tue, 25 Feb 2025 11:49:24 +0100
Subject: [PATCH 03/21] iconos correctos

---
 webapp/package-lock.json           | 10 ++++++++++
 webapp/package.json                |  1 +
 webapp/src/components/home/Home.js | 15 +++++++++++----
 3 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/webapp/package-lock.json b/webapp/package-lock.json
index 10f390e4..c8ff4177 100644
--- a/webapp/package-lock.json
+++ b/webapp/package-lock.json
@@ -19,6 +19,7 @@
         "react": "^18.2.0",
         "react-bootstrap": "^2.10.9",
         "react-dom": "^18.2.0",
+        "react-icons": "^5.5.0",
         "react-scripts": "5.0.1",
         "react-simple-typewriter": "^5.0.1",
         "web-vitals": "^3.5.1"
@@ -19554,6 +19555,15 @@
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==",
       "license": "MIT"
     },
+    "node_modules/react-icons": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",
+      "integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "19.0.0",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.0.0.tgz",
diff --git a/webapp/package.json b/webapp/package.json
index adf51d5a..4ac51fd4 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -14,6 +14,7 @@
     "react": "^18.2.0",
     "react-bootstrap": "^2.10.9",
     "react-dom": "^18.2.0",
+    "react-icons": "^5.5.0",
     "react-scripts": "5.0.1",
     "react-simple-typewriter": "^5.0.1",
     "web-vitals": "^3.5.1"
diff --git a/webapp/src/components/home/Home.js b/webapp/src/components/home/Home.js
index 91c7c0b6..75e8c6cd 100644
--- a/webapp/src/components/home/Home.js
+++ b/webapp/src/components/home/Home.js
@@ -2,6 +2,8 @@ import React, { useState } from "react";
 import { Navbar, Nav, Container } from 'react-bootstrap';
 import Button from 'react-bootstrap/Button';
 import 'bootstrap/dist/css/bootstrap.min.css';
+import { VscAccount } from "react-icons/vsc";
+import { VscArrowRight } from "react-icons/vsc";
 import Configuration from "./Configuration";
 
 const Home = () => {
@@ -13,16 +15,21 @@ const Home = () => {
       <Navbar bg="light" expand="lg" fixed="top" className="w-100">
         <Container>
           <Nav className="ms-auto">
-            <Nav.Link href="#">Reglas</Nav.Link>
-            <Nav.Link href="#">Icono</Nav.Link>
-            <Nav.Link href="#">Salir</Nav.Link>
+          <Nav.Link href="#" style={{ fontSize: "20px" }}>Idioma</Nav.Link>
+          <Nav.Link href="#" style={{ fontSize: "20px" }}>Reglas</Nav.Link>
+          <Nav.Link href="#">
+              <VscAccount size={30}/>
+          </Nav.Link>
+          <Nav.Link href="#">
+            <VscArrowRight size={30}/>
+            </Nav.Link>
           </Nav>
         </Container>
       </Navbar>
 
       {/* Contenido Principal */}
       <h1 className="text-center fw-bold mt-5">Bienvenido a <span className="text-dark">WiChat</span></h1>
-      <p className="text-secondary">Texto de saludo generado por IA</p>
+      <p className="text-secondary">Saludos</p>
       <div className="mt-3 d-flex flex-column gap-3">
         <Button variant="primary" size="lg" onClick={() => setShowConfig(true)}>Partida Rápida</Button>
         <Button variant="primary" size="lg">Modo Caos</Button>

From c595051f790b2411abf01ce7a43f2d09a05e8e61 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adriana=20Herrero=20Gonz=C3=A1lez?= <UO287543@uniovi.es>
Date: Tue, 25 Feb 2025 14:05:17 +0100
Subject: [PATCH 04/21] icono de cerrar correcto y desplegable de idioma hechos

---
 webapp/src/components/home/Configuration.js | 27 +++++++++++++++------
 webapp/src/components/home/Home.js          | 14 ++++++++---
 2 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/webapp/src/components/home/Configuration.js b/webapp/src/components/home/Configuration.js
index 80937e0d..f0e72ea8 100644
--- a/webapp/src/components/home/Configuration.js
+++ b/webapp/src/components/home/Configuration.js
@@ -1,19 +1,32 @@
 import React, { useState } from "react";
-import { Button, Dropdown, Container } from "react-bootstrap";
+import { Button, Dropdown } from "react-bootstrap";
 import "bootstrap/dist/css/bootstrap.min.css";
+import { red } from "@mui/material/colors";
+import { GoXCircle } from "react-icons/go";
 
 const Configuration = ({ onClose }) => {
   const [questions, setQuestions] = useState(30);
   const [time, setTime] = useState(120);
 
+  const handleClose = () => {
+    onClose();  
+  };
+
   return (
     <div className="position-fixed top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center bg-dark bg-opacity-50">
-      <div className="bg-white p-4 rounded shadow-lg text-center position-relative" style={{ width: "300px" }}>
-        <button
-          onClick={onClose}
-          className="text-danger fs-4 position-absolute top-0 start-0 m-2 border-0 bg-transparent"
-        >✖</button>
-        <h2 className="mb-3">Configuración de la Partida</h2>
+      <div className="bg-white p-4 rounded shadow-lg text-center position-relative" style={{ width: "325px" }}>
+      <GoXCircle 
+        onClick={handleClose} 
+        style={{
+          position: 'absolute', 
+          top: '10px',           
+          left: '10px',          
+          color: 'red',          
+          fontSize: '30px',      
+          cursor: 'pointer'     
+        }} 
+      />
+        <h2 className="mb-3">Configuración de la Partida </h2>
         <div className="mb-3 d-flex align-items-center justify-content-between">
           <label className="me-2">Número de Preguntas:</label>
           <Dropdown onSelect={(value) => setQuestions(Number(value))}>
diff --git a/webapp/src/components/home/Home.js b/webapp/src/components/home/Home.js
index 75e8c6cd..e06572db 100644
--- a/webapp/src/components/home/Home.js
+++ b/webapp/src/components/home/Home.js
@@ -1,11 +1,13 @@
 import React, { useState } from "react";
-import { Navbar, Nav, Container } from 'react-bootstrap';
+import { Navbar, Nav, Container, Dropdown } from 'react-bootstrap';
 import Button from 'react-bootstrap/Button';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import { VscAccount } from "react-icons/vsc";
 import { VscArrowRight } from "react-icons/vsc";
 import Configuration from "./Configuration";
 
+
+
 const Home = () => {
   const [showConfig, setShowConfig] = useState(false);
 
@@ -15,8 +17,14 @@ const Home = () => {
       <Navbar bg="light" expand="lg" fixed="top" className="w-100">
         <Container>
           <Nav className="ms-auto">
-          <Nav.Link href="#" style={{ fontSize: "20px" }}>Idioma</Nav.Link>
-          <Nav.Link href="#" style={{ fontSize: "20px" }}>Reglas</Nav.Link>
+          <Dropdown align="end">
+          <Dropdown.Toggle variant="link" id="dropdown-language" style={{ fontSize: "20px",color: "rgb(0 0 0 / 65%)", textDecoration: "none" }}>Idioma</Dropdown.Toggle>
+              <Dropdown.Menu>
+                <Dropdown.Item>Español</Dropdown.Item>
+                <Dropdown.Item>Inglés</Dropdown.Item>
+              </Dropdown.Menu>
+            </Dropdown>
+          <Nav.Link href="#" style={{ fontSize: "20px"}}>Reglas</Nav.Link>
           <Nav.Link href="#">
               <VscAccount size={30}/>
           </Nav.Link>

From 004ecce525d058c758db31887ab80c9456b6131a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adriana=20Herrero=20Gonz=C3=A1lez?= <UO287543@uniovi.es>
Date: Tue, 25 Feb 2025 14:32:51 +0100
Subject: [PATCH 05/21] =?UTF-8?q?estructura=20para=20=20internacionalizaci?=
 =?UTF-8?q?=C3=B3n=20hecha?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 webapp/package-lock.json                  | 152 +++++++++++++++-------
 webapp/package.json                       |   4 +
 webapp/public/locales/en/translation.json |   3 +
 webapp/public/locales/es/translation.json |   3 +
 webapp/src/App.js                         |   1 -
 webapp/src/components/home/Home.js        |   4 +-
 webapp/src/i18n/i18next.js                |  21 +++
 webapp/src/index.js                       |   1 +
 8 files changed, 137 insertions(+), 52 deletions(-)
 create mode 100644 webapp/public/locales/en/translation.json
 create mode 100644 webapp/public/locales/es/translation.json
 create mode 100644 webapp/src/i18n/i18next.js

diff --git a/webapp/package-lock.json b/webapp/package-lock.json
index c8ff4177..2fcfaa0b 100644
--- a/webapp/package-lock.json
+++ b/webapp/package-lock.json
@@ -16,9 +16,13 @@
         "@testing-library/user-event": "^14.5.2",
         "axios": "^1.7.9",
         "bootstrap": "^5.3.3",
+        "i18next": "^24.2.2",
+        "i18next-browser-languagedetector": "^8.0.4",
+        "i18next-http-backend": "^3.0.2",
         "react": "^18.2.0",
         "react-bootstrap": "^2.10.9",
         "react-dom": "^18.2.0",
+        "react-i18next": "^15.4.1",
         "react-icons": "^5.5.0",
         "react-scripts": "5.0.1",
         "react-simple-typewriter": "^5.0.1",
@@ -4070,26 +4074,6 @@
         "tslib": "^2.8.0"
       }
     },
-    "node_modules/@testing-library/dom": {
-      "version": "10.4.0",
-      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz",
-      "integrity": "sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "@babel/code-frame": "^7.10.4",
-        "@babel/runtime": "^7.12.5",
-        "@types/aria-query": "^5.0.1",
-        "aria-query": "5.3.0",
-        "chalk": "^4.1.0",
-        "dom-accessibility-api": "^0.5.9",
-        "lz-string": "^1.5.0",
-        "pretty-format": "^27.0.2"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
     "node_modules/@testing-library/jest-dom": {
       "version": "5.17.0",
       "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.17.0.tgz",
@@ -7438,7 +7422,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-4.0.0.tgz",
       "integrity": "sha512-e4a5N8lVvuLgAWgnCrLr2PP0YyDOTHa9H/Rj54dirp61qXnNq46m82bRhNqIA5VccJtWBvPTFRV3TtvHUKPB1g==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "node-fetch": "^2.6.12"
@@ -10787,6 +10770,7 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/growly/-/growly-1.3.0.tgz",
       "integrity": "sha512-+xGQY0YyAWCnqy7Cd++hc2JqMYzlm0dG30Jd0beaA64sROr8C4nt8Yc9V5Ro3avlSUDTN0ulqP/VBKi1/lLygw==",
+      "dev": true,
       "license": "MIT",
       "optional": true
     },
@@ -11131,6 +11115,14 @@
         "node": ">= 12"
       }
     },
+    "node_modules/html-parse-stringify": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
+      "integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==",
+      "dependencies": {
+        "void-elements": "3.1.0"
+      }
+    },
     "node_modules/html-webpack-plugin": {
       "version": "5.6.3",
       "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-5.6.3.tgz",
@@ -11285,6 +11277,52 @@
         "node": ">=10.17.0"
       }
     },
+    "node_modules/i18next": {
+      "version": "24.2.2",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-24.2.2.tgz",
+      "integrity": "sha512-NE6i86lBCKRYZa5TaUDkU5S4HFgLIEJRLr3Whf2psgaxBleQ2LC1YW1Vc+SCgkAW7VEzndT6al6+CzegSUHcTQ==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://locize.com"
+        },
+        {
+          "type": "individual",
+          "url": "https://locize.com/i18next.html"
+        },
+        {
+          "type": "individual",
+          "url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project"
+        }
+      ],
+      "dependencies": {
+        "@babel/runtime": "^7.23.2"
+      },
+      "peerDependencies": {
+        "typescript": "^5"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/i18next-browser-languagedetector": {
+      "version": "8.0.4",
+      "resolved": "https://registry.npmjs.org/i18next-browser-languagedetector/-/i18next-browser-languagedetector-8.0.4.tgz",
+      "integrity": "sha512-f3frU3pIxD50/Tz20zx9TD9HobKYg47fmAETb117GKGPrhwcSSPJDoCposXlVycVebQ9GQohC3Efbpq7/nnJ5w==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.2"
+      }
+    },
+    "node_modules/i18next-http-backend": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/i18next-http-backend/-/i18next-http-backend-3.0.2.tgz",
+      "integrity": "sha512-PdlvPnvIp4E1sYi46Ik4tBYh/v/NbYfFFgTjkwFl0is8A18s7/bx9aXqsrOax9WUbeNS6mD2oix7Z0yGGf6m5g==",
+      "dependencies": {
+        "cross-fetch": "4.0.0"
+      }
+    },
     "node_modules/iconv-lite": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
@@ -13982,7 +14020,7 @@
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-29.7.0.tgz",
       "integrity": "sha512-fP8u2pyfqx0K1rGn1R9pyE0/KTn+G7PxktWidOBTqFPLYX0b9ksaMFkhK5vrS3DVun09pckLdlx90QthlW7AmA==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jest/types": "^29.6.3",
@@ -15074,7 +15112,7 @@
       "version": "29.6.3",
       "resolved": "https://registry.npmjs.org/jest-regex-util/-/jest-regex-util-29.6.3.tgz",
       "integrity": "sha512-KJJBsRCyyLNWCNBOvZyRDnAIfUiRJ8v+hOBQYGn8gDyF3UegwiP4gwRR3/SDa42g1YbVycTidUF3rKjyLFDWbg==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
@@ -15084,7 +15122,7 @@
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/jest-resolve/-/jest-resolve-29.7.0.tgz",
       "integrity": "sha512-IOVhZSrg+UvVAshDSDtHyFCCBUl/Q3AAJv8iZ6ZjnZ74xzvwuzLXid9IIIPgTnY62SJjfuupMKZsZQRsCvxEgA==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "chalk": "^4.0.0",
@@ -15318,7 +15356,7 @@
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/jest-validate/-/jest-validate-29.7.0.tgz",
       "integrity": "sha512-ZB7wHqaRGVw/9hST/OuFUReG7M8vKeq0/J2egIGLdvjHCmYqGARhzXmtgi+gVeZ5uXFF219aOc3Ls2yLg27tkw==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jest/types": "^29.6.3",
@@ -15336,7 +15374,7 @@
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
       "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=10"
@@ -15349,7 +15387,7 @@
       "version": "6.3.0",
       "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz",
       "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=10"
@@ -15362,7 +15400,7 @@
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",
       "integrity": "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jest/schemas": "^29.6.3",
@@ -15377,7 +15415,7 @@
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
       "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/jest-watcher": {
@@ -15404,7 +15442,7 @@
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-29.7.0.tgz",
       "integrity": "sha512-eIz2msL/EzL9UFTFFx7jBTkeZfku0yUAyZZZmJ93H2TYEiroIx2PQjEXcwYtYl8zXCxb+PAmA2hLIt/6ZEkPHw==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/node": "*",
@@ -15420,7 +15458,7 @@
       "version": "8.1.1",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
       "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "has-flag": "^4.0.0"
@@ -16552,7 +16590,6 @@
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
       "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "whatwg-url": "^5.0.0"
@@ -16573,21 +16610,18 @@
       "version": "0.0.3",
       "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
       "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/node-fetch/node_modules/webidl-conversions": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
       "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
-      "dev": true,
       "license": "BSD-2-Clause"
     },
     "node_modules/node-fetch/node_modules/whatwg-url": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
       "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "tr46": "~0.0.3",
@@ -16613,6 +16647,7 @@
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/node-notifier/-/node-notifier-8.0.2.tgz",
       "integrity": "sha512-oJP/9NAdd9+x2Q+rfphB2RJCHjod70RcRLjosiPMMu5gjIfwVnOUGq2nbTjTUbmy0DJ/tFIVT30+Qe3nzl4TJg==",
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "dependencies": {
@@ -16628,6 +16663,7 @@
       "version": "7.6.3",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
       "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
+      "dev": true,
       "license": "ISC",
       "optional": true,
       "bin": {
@@ -19555,6 +19591,27 @@
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==",
       "license": "MIT"
     },
+    "node_modules/react-i18next": {
+      "version": "15.4.1",
+      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-15.4.1.tgz",
+      "integrity": "sha512-ahGab+IaSgZmNPYXdV1n+OYky95TGpFwnKRflX/16dY04DsYYKHtVLjeny7sBSCREEcoMbAgSkFiGLF5g5Oofw==",
+      "dependencies": {
+        "@babel/runtime": "^7.25.0",
+        "html-parse-stringify": "^3.0.1"
+      },
+      "peerDependencies": {
+        "i18next": ">= 23.2.3",
+        "react": ">= 16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-icons": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",
@@ -21612,7 +21669,7 @@
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/resolve.exports/-/resolve.exports-2.0.3.tgz",
       "integrity": "sha512-OcXjMsGdhL4XnbShKpAcSqPMzQoYkYyhbEaeSko47MjRP9NfEQMhZkXL1DoFlt9LWQn4YttrdnV6X2OiyzBi+A==",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=10"
@@ -22719,6 +22776,7 @@
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/shellwords/-/shellwords-0.1.1.tgz",
       "integrity": "sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==",
+      "dev": true,
       "license": "MIT",
       "optional": true
     },
@@ -24693,20 +24751,6 @@
         "is-typedarray": "^1.0.0"
       }
     },
-    "node_modules/typescript": {
-      "version": "4.9.5",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
-      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
-      "license": "Apache-2.0",
-      "peer": true,
-      "bin": {
-        "tsc": "bin/tsc",
-        "tsserver": "bin/tsserver"
-      },
-      "engines": {
-        "node": ">=4.2.0"
-      }
-    },
     "node_modules/unbox-primitive": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.1.0.tgz",
@@ -25106,6 +25150,14 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/void-elements": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
+      "integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/w3c-hr-time": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",
diff --git a/webapp/package.json b/webapp/package.json
index 4ac51fd4..598366b4 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -11,9 +11,13 @@
     "@testing-library/user-event": "^14.5.2",
     "axios": "^1.7.9",
     "bootstrap": "^5.3.3",
+    "i18next": "^24.2.2",
+    "i18next-browser-languagedetector": "^8.0.4",
+    "i18next-http-backend": "^3.0.2",
     "react": "^18.2.0",
     "react-bootstrap": "^2.10.9",
     "react-dom": "^18.2.0",
+    "react-i18next": "^15.4.1",
     "react-icons": "^5.5.0",
     "react-scripts": "5.0.1",
     "react-simple-typewriter": "^5.0.1",
diff --git a/webapp/public/locales/en/translation.json b/webapp/public/locales/en/translation.json
new file mode 100644
index 00000000..4132c220
--- /dev/null
+++ b/webapp/public/locales/en/translation.json
@@ -0,0 +1,3 @@
+{
+    "rules-menu": "Rules"
+}
\ No newline at end of file
diff --git a/webapp/public/locales/es/translation.json b/webapp/public/locales/es/translation.json
new file mode 100644
index 00000000..a954328c
--- /dev/null
+++ b/webapp/public/locales/es/translation.json
@@ -0,0 +1,3 @@
+{
+    "rules-menu": "Reglas"
+}
\ No newline at end of file
diff --git a/webapp/src/App.js b/webapp/src/App.js
index 7f424499..0a9c17ee 100644
--- a/webapp/src/App.js
+++ b/webapp/src/App.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import CssBaseline from '@mui/material/CssBaseline';
 import Container from '@mui/material/Container';
-import Typography from '@mui/material/Typography';
 import Home from './components/home/Home'; 
 
 function App() {
diff --git a/webapp/src/components/home/Home.js b/webapp/src/components/home/Home.js
index e06572db..612c63e0 100644
--- a/webapp/src/components/home/Home.js
+++ b/webapp/src/components/home/Home.js
@@ -5,11 +5,13 @@ import 'bootstrap/dist/css/bootstrap.min.css';
 import { VscAccount } from "react-icons/vsc";
 import { VscArrowRight } from "react-icons/vsc";
 import Configuration from "./Configuration";
+import { useTranslation } from 'react-i18next';
 
 
 
 const Home = () => {
   const [showConfig, setShowConfig] = useState(false);
+  const { t } = useTranslation();
 
   return (
     <div className="d-flex flex-column align-items-center justify-content-center vh-100 bg-white">
@@ -24,7 +26,7 @@ const Home = () => {
                 <Dropdown.Item>Inglés</Dropdown.Item>
               </Dropdown.Menu>
             </Dropdown>
-          <Nav.Link href="#" style={{ fontSize: "20px"}}>Reglas</Nav.Link>
+          <Nav.Link href="#" style={{ fontSize: "20px"}}>{t('rules-menu')}</Nav.Link>
           <Nav.Link href="#">
               <VscAccount size={30}/>
           </Nav.Link>
diff --git a/webapp/src/i18n/i18next.js b/webapp/src/i18n/i18next.js
new file mode 100644
index 00000000..48957511
--- /dev/null
+++ b/webapp/src/i18n/i18next.js
@@ -0,0 +1,21 @@
+// src/i18n.js
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+import Backend from 'i18next-http-backend';
+
+i18n
+  .use(Backend) // To load instructions from a backend server or a file
+  .use(LanguageDetector) // Detects the language of the web browser
+  .use(initReactI18next) // Initializes i18next for React
+  .init({
+    fallbackLng: 'es', // Default language
+    debug: true, // Show useful information for debugging
+
+    interpolation: {
+      escapeValue: false, 
+    },
+
+  });
+
+export default i18n;
\ No newline at end of file
diff --git a/webapp/src/index.js b/webapp/src/index.js
index d563c0fb..fdc4ef6c 100644
--- a/webapp/src/index.js
+++ b/webapp/src/index.js
@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import i18n from './i18n/i18next.js';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(

From 5b49558936a9bdc1641bde136d9ff9e228397446 Mon Sep 17 00:00:00 2001
From: uo287543 <uo287543@uniovi.es>
Date: Wed, 26 Feb 2025 13:27:05 +0100
Subject: [PATCH 06/21] ventana home internacionalizada

---
 webapp/package-lock.json                  |  1 +
 webapp/public/locales/en/translation.json |  9 +++-
 webapp/public/locales/es/translation.json |  9 +++-
 webapp/src/components/home/Home.js        | 56 +++++++++++++----------
 4 files changed, 50 insertions(+), 25 deletions(-)

diff --git a/webapp/package-lock.json b/webapp/package-lock.json
index 2fcfaa0b..112e048d 100644
--- a/webapp/package-lock.json
+++ b/webapp/package-lock.json
@@ -11319,6 +11319,7 @@
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/i18next-http-backend/-/i18next-http-backend-3.0.2.tgz",
       "integrity": "sha512-PdlvPnvIp4E1sYi46Ik4tBYh/v/NbYfFFgTjkwFl0is8A18s7/bx9aXqsrOax9WUbeNS6mD2oix7Z0yGGf6m5g==",
+      "license": "MIT",
       "dependencies": {
         "cross-fetch": "4.0.0"
       }
diff --git a/webapp/public/locales/en/translation.json b/webapp/public/locales/en/translation.json
index 4132c220..909186c8 100644
--- a/webapp/public/locales/en/translation.json
+++ b/webapp/public/locales/en/translation.json
@@ -1,3 +1,10 @@
 {
-    "rules-menu": "Rules"
+    "rules-menu": "Rules",
+    "language-menu": "Language",
+    "spanish-menu": "Spanish",
+    "english-menu": "English",
+    "welcome-home": "Welcome to",
+    "hello-home": "Hellooo",
+    "quickGame-home": "Quick Game",
+    "chaosMode-home": "Chaos Mode"
 }
\ No newline at end of file
diff --git a/webapp/public/locales/es/translation.json b/webapp/public/locales/es/translation.json
index a954328c..00e27fbd 100644
--- a/webapp/public/locales/es/translation.json
+++ b/webapp/public/locales/es/translation.json
@@ -1,3 +1,10 @@
 {
-    "rules-menu": "Reglas"
+    "rules-menu": "Reglas",
+    "language-menu": "Idioma",
+    "spanish-menu": "Español",
+    "english-menu": "Inglés",
+    "welcome-home":"Bienvenido a",
+    "hello-home": "Holaaa",
+    "quickGame-home": "Partida Rápida",
+    "chaosMode-home": "Modo Caos"
 }
\ No newline at end of file
diff --git a/webapp/src/components/home/Home.js b/webapp/src/components/home/Home.js
index 612c63e0..7eaa2995 100644
--- a/webapp/src/components/home/Home.js
+++ b/webapp/src/components/home/Home.js
@@ -1,48 +1,58 @@
 import React, { useState } from "react";
-import { Navbar, Nav, Container, Dropdown } from 'react-bootstrap';
-import Button from 'react-bootstrap/Button';
-import 'bootstrap/dist/css/bootstrap.min.css';
-import { VscAccount } from "react-icons/vsc";
-import { VscArrowRight } from "react-icons/vsc";
+import { Navbar, Nav, Container, Dropdown } from "react-bootstrap";
+import Button from "react-bootstrap/Button";
+import "bootstrap/dist/css/bootstrap.min.css";
+import { VscAccount, VscArrowRight } from "react-icons/vsc";
 import Configuration from "./Configuration";
-import { useTranslation } from 'react-i18next';
-
-
+import { useTranslation } from "react-i18next";
+import i18n from "../../i18n/i18next";
 
 const Home = () => {
   const [showConfig, setShowConfig] = useState(false);
   const { t } = useTranslation();
 
+  const changeLanguage = (lang) => {
+    i18n.changeLanguage(lang);
+  };
+
   return (
     <div className="d-flex flex-column align-items-center justify-content-center vh-100 bg-white">
       {/* NavBar */}
       <Navbar bg="light" expand="lg" fixed="top" className="w-100">
         <Container>
           <Nav className="ms-auto">
-          <Dropdown align="end">
-          <Dropdown.Toggle variant="link" id="dropdown-language" style={{ fontSize: "20px",color: "rgb(0 0 0 / 65%)", textDecoration: "none" }}>Idioma</Dropdown.Toggle>
+            {/* Dropdown de idioma */}
+            <Dropdown align="end">
+              <Dropdown.Toggle
+                variant="link"
+                id="dropdown-language"
+                style={{ fontSize: "20px", color: "rgb(0 0 0 / 65%)", textDecoration: "none" }}
+              >
+               {t("language-menu")}
+              </Dropdown.Toggle>
               <Dropdown.Menu>
-                <Dropdown.Item>Español</Dropdown.Item>
-                <Dropdown.Item>Inglés</Dropdown.Item>
+                <Dropdown.Item onClick={() => changeLanguage("es")}>{t("spanish-menu")}</Dropdown.Item>
+                <Dropdown.Item onClick={() => changeLanguage("en")}>{t("english-menu")}</Dropdown.Item>
               </Dropdown.Menu>
             </Dropdown>
-          <Nav.Link href="#" style={{ fontSize: "20px"}}>{t('rules-menu')}</Nav.Link>
-          <Nav.Link href="#">
-              <VscAccount size={30}/>
-          </Nav.Link>
-          <Nav.Link href="#">
-            <VscArrowRight size={30}/>
-            </Nav.Link>
+            
+            <Nav.Link href="#" style={{ fontSize: "20px" }}>{t("rules-menu")}</Nav.Link>
+            <Nav.Link href="#"><VscAccount size={30} /></Nav.Link>
+            <Nav.Link href="#"><VscArrowRight size={30} /></Nav.Link>
           </Nav>
         </Container>
       </Navbar>
 
       {/* Contenido Principal */}
-      <h1 className="text-center fw-bold mt-5">Bienvenido a <span className="text-dark">WiChat</span></h1>
-      <p className="text-secondary">Saludos</p>
+      <h1 className="text-center fw-bold mt-5">
+      {t("welcome-home")} <span className="text-dark">WiChat</span>
+      </h1>
+      <p className="text-secondary">{t("hello-home")}</p>
       <div className="mt-3 d-flex flex-column gap-3">
-        <Button variant="primary" size="lg" onClick={() => setShowConfig(true)}>Partida Rápida</Button>
-        <Button variant="primary" size="lg">Modo Caos</Button>
+        <Button variant="primary" size="lg" onClick={() => setShowConfig(true)}>
+        {t("quickGame-home")}
+        </Button>
+        <Button variant="primary" size="lg">{t("chaosMode-home")}</Button>
       </div>
 
       {showConfig && <Configuration onClose={() => setShowConfig(false)} />}

From 5e19a35fe6dafbab8ff2ca1192ad41ef6bcc21ce Mon Sep 17 00:00:00 2001
From: uo287543 <uo287543@uniovi.es>
Date: Wed, 26 Feb 2025 13:39:55 +0100
Subject: [PATCH 07/21] =?UTF-8?q?ventana=20de=20configuraci=C3=B3n=20inter?=
 =?UTF-8?q?nacionalizada?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 webapp/public/locales/en/translation.json   | 11 ++++++++++-
 webapp/public/locales/es/translation.json   | 11 ++++++++++-
 webapp/src/components/home/Configuration.js | 22 ++++++++++++---------
 3 files changed, 33 insertions(+), 11 deletions(-)

diff --git a/webapp/public/locales/en/translation.json b/webapp/public/locales/en/translation.json
index 909186c8..b6a30fbf 100644
--- a/webapp/public/locales/en/translation.json
+++ b/webapp/public/locales/en/translation.json
@@ -6,5 +6,14 @@
     "welcome-home": "Welcome to",
     "hello-home": "Hellooo",
     "quickGame-home": "Quick Game",
-    "chaosMode-home": "Chaos Mode"
+    "chaosMode-home": "Chaos Mode",
+    "title-configuration": "Configuration of the game",
+    "numberQuestions-configuration": "Number of questions:",
+    "time-configuration": "Time:",
+    "play-configuration": "Play",
+    "history-configuration":"History",
+    "science-configuration":"Science",
+    "art-configuration":"Art",
+    "sport-configuration":"Sport",
+    "geography-configuration":"Geography"
 }
\ No newline at end of file
diff --git a/webapp/public/locales/es/translation.json b/webapp/public/locales/es/translation.json
index 00e27fbd..cf8aaa60 100644
--- a/webapp/public/locales/es/translation.json
+++ b/webapp/public/locales/es/translation.json
@@ -6,5 +6,14 @@
     "welcome-home":"Bienvenido a",
     "hello-home": "Holaaa",
     "quickGame-home": "Partida Rápida",
-    "chaosMode-home": "Modo Caos"
+    "chaosMode-home": "Modo Caos",
+    "title-configuration": "Configuración de la partida",
+    "numberQuestions-configuration": "Número de preguntas:",
+    "time-configuration": "Tiempo:",
+    "play-configuration":"Jugar",
+    "history-configuration":"Historia",
+    "science-configuration":"Ciencia",
+    "art-configuration":"Arte",
+    "sport-configuration":"Deportes",
+    "geography-configuration":"Geografía"
 }
\ No newline at end of file
diff --git a/webapp/src/components/home/Configuration.js b/webapp/src/components/home/Configuration.js
index f0e72ea8..b1931a24 100644
--- a/webapp/src/components/home/Configuration.js
+++ b/webapp/src/components/home/Configuration.js
@@ -3,11 +3,15 @@ import { Button, Dropdown } from "react-bootstrap";
 import "bootstrap/dist/css/bootstrap.min.css";
 import { red } from "@mui/material/colors";
 import { GoXCircle } from "react-icons/go";
+import { useTranslation } from "react-i18next";
+import i18n from "../../i18n/i18next";
 
 const Configuration = ({ onClose }) => {
   const [questions, setQuestions] = useState(30);
   const [time, setTime] = useState(120);
 
+  const { t } = useTranslation();
+
   const handleClose = () => {
     onClose();  
   };
@@ -26,9 +30,9 @@ const Configuration = ({ onClose }) => {
           cursor: 'pointer'     
         }} 
       />
-        <h2 className="mb-3">Configuración de la Partida </h2>
+        <h2 className="mb-3">{t("title-configuration")}</h2>
         <div className="mb-3 d-flex align-items-center justify-content-between">
-          <label className="me-2">Número de Preguntas:</label>
+          <label className="me-2">{t("numberQuestions-configuration")}</label>
           <Dropdown onSelect={(value) => setQuestions(Number(value))}>
             <Dropdown.Toggle variant="light">{questions}</Dropdown.Toggle>
             <Dropdown.Menu>
@@ -39,7 +43,7 @@ const Configuration = ({ onClose }) => {
           </Dropdown>
         </div>
         <div className="mb-3 d-flex align-items-center justify-content-between">
-          <label className="me-2">Tiempo:</label>
+          <label className="me-2">{t("time-configuration")}</label>
           <Dropdown onSelect={(value) => setTime(Number(value))}>
             <Dropdown.Toggle variant="light">{time}s</Dropdown.Toggle>
             <Dropdown.Menu>
@@ -52,14 +56,14 @@ const Configuration = ({ onClose }) => {
         <div className="mb-3">
           <label className="d-block">Topics</label>
           <div className="d-flex flex-wrap justify-content-center gap-2">
-          <Button className="px-3 py-1 text-white" style={{ backgroundColor: "purple", border: "none", fontSize: "0.8rem" }}>Historia</Button>
-            <Button className="px-3 py-1 text-white" style={{ backgroundColor: "green", border: "none", fontSize: "0.8rem" }}>Ciencia</Button>
-            <Button className="px-3 py-1 text-white" style={{ backgroundColor: "red", border: "none", fontSize: "0.8rem" }}>Arte</Button>
-            <Button className="px-3 py-1 text-white" style={{ backgroundColor: "orange", border: "none", fontSize: "0.8rem" }}>Deportes</Button>
-            <Button className="px-3 py-1 text-white" style={{ backgroundColor: "blue", border: "none", fontSize: "0.8rem" }}>Geografía</Button>
+          <Button className="px-3 py-1 text-white" style={{ backgroundColor: "purple", border: "none", fontSize: "0.8rem" }}>{t("history-configuration")}</Button>
+            <Button className="px-3 py-1 text-white" style={{ backgroundColor: "green", border: "none", fontSize: "0.8rem" }}>{t("science-configuration")}</Button>
+            <Button className="px-3 py-1 text-white" style={{ backgroundColor: "red", border: "none", fontSize: "0.8rem" }}>{t("art-configuration")}</Button>
+            <Button className="px-3 py-1 text-white" style={{ backgroundColor: "orange", border: "none", fontSize: "0.8rem" }}>{t("sport-configuration")}</Button>
+            <Button className="px-3 py-1 text-white" style={{ backgroundColor: "blue", border: "none", fontSize: "0.8rem" }}>{t("geography-configuration")}</Button>
           </div>
         </div>
-        <Button variant="primary" className="w-100">Jugar</Button>
+        <Button variant="primary" className="w-100">{t("play-configuration")}</Button>
       </div>
     </div>
   );

From 7bf2dbe87fe5598627165657601bd9b5e9784ffe Mon Sep 17 00:00:00 2001
From: uo287543 <uo287543@uniovi.es>
Date: Wed, 26 Feb 2025 13:50:51 +0100
Subject: [PATCH 08/21] =?UTF-8?q?barra=20navegaci=C3=B3n=20extraida=20a=20?=
 =?UTF-8?q?componentes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 webapp/src/components/NavBar.js    | 43 ++++++++++++++++++++++++++++++
 webapp/src/components/home/Home.js | 37 +++----------------------
 2 files changed, 47 insertions(+), 33 deletions(-)
 create mode 100644 webapp/src/components/NavBar.js

diff --git a/webapp/src/components/NavBar.js b/webapp/src/components/NavBar.js
new file mode 100644
index 00000000..595529a3
--- /dev/null
+++ b/webapp/src/components/NavBar.js
@@ -0,0 +1,43 @@
+import React from "react";
+import { Navbar, Nav, Container, Dropdown } from "react-bootstrap";
+import { VscAccount, VscArrowRight } from "react-icons/vsc";
+import i18n from "../i18n/i18next";
+import { useTranslation } from "react-i18next";
+
+
+const NavBar = () => {
+  const { t } = useTranslation();
+
+  const changeLanguage = (lang) => {
+    i18n.changeLanguage(lang);
+  };
+
+  return (
+    <Navbar bg="light" expand="lg" fixed="top" className="w-100">
+      <Container>
+        <Nav className="ms-auto">
+          {/* Dropdown de idioma */}
+          <Dropdown align="end">
+            <Dropdown.Toggle
+              variant="link"
+              id="dropdown-language"
+              style={{ fontSize: "20px", color: "rgb(0 0 0 / 65%)", textDecoration: "none" }}
+            >
+              {t("language-menu")}
+            </Dropdown.Toggle>
+            <Dropdown.Menu>
+              <Dropdown.Item onClick={() => changeLanguage("es")}>{t("spanish-menu")}</Dropdown.Item>
+              <Dropdown.Item onClick={() => changeLanguage("en")}>{t("english-menu")}</Dropdown.Item>
+            </Dropdown.Menu>
+          </Dropdown>
+
+          <Nav.Link href="#" style={{ fontSize: "20px" }}>{t("rules-menu")}</Nav.Link>
+          <Nav.Link href="#"><VscAccount size={30} /></Nav.Link>
+          <Nav.Link href="#"><VscArrowRight size={30} /></Nav.Link>
+        </Nav>
+      </Container>
+    </Navbar>
+  );
+};
+
+export default NavBar;
diff --git a/webapp/src/components/home/Home.js b/webapp/src/components/home/Home.js
index 7eaa2995..2f4ccd51 100644
--- a/webapp/src/components/home/Home.js
+++ b/webapp/src/components/home/Home.js
@@ -1,56 +1,27 @@
 import React, { useState } from "react";
-import { Navbar, Nav, Container, Dropdown } from "react-bootstrap";
 import Button from "react-bootstrap/Button";
 import "bootstrap/dist/css/bootstrap.min.css";
-import { VscAccount, VscArrowRight } from "react-icons/vsc";
 import Configuration from "./Configuration";
 import { useTranslation } from "react-i18next";
-import i18n from "../../i18n/i18next";
+import NavBar from "../NavBar";
 
 const Home = () => {
   const [showConfig, setShowConfig] = useState(false);
   const { t } = useTranslation();
 
-  const changeLanguage = (lang) => {
-    i18n.changeLanguage(lang);
-  };
-
   return (
     <div className="d-flex flex-column align-items-center justify-content-center vh-100 bg-white">
       {/* NavBar */}
-      <Navbar bg="light" expand="lg" fixed="top" className="w-100">
-        <Container>
-          <Nav className="ms-auto">
-            {/* Dropdown de idioma */}
-            <Dropdown align="end">
-              <Dropdown.Toggle
-                variant="link"
-                id="dropdown-language"
-                style={{ fontSize: "20px", color: "rgb(0 0 0 / 65%)", textDecoration: "none" }}
-              >
-               {t("language-menu")}
-              </Dropdown.Toggle>
-              <Dropdown.Menu>
-                <Dropdown.Item onClick={() => changeLanguage("es")}>{t("spanish-menu")}</Dropdown.Item>
-                <Dropdown.Item onClick={() => changeLanguage("en")}>{t("english-menu")}</Dropdown.Item>
-              </Dropdown.Menu>
-            </Dropdown>
-            
-            <Nav.Link href="#" style={{ fontSize: "20px" }}>{t("rules-menu")}</Nav.Link>
-            <Nav.Link href="#"><VscAccount size={30} /></Nav.Link>
-            <Nav.Link href="#"><VscArrowRight size={30} /></Nav.Link>
-          </Nav>
-        </Container>
-      </Navbar>
+      <NavBar />
 
       {/* Contenido Principal */}
       <h1 className="text-center fw-bold mt-5">
-      {t("welcome-home")} <span className="text-dark">WiChat</span>
+        {t("welcome-home")} <span className="text-dark">WiChat</span>
       </h1>
       <p className="text-secondary">{t("hello-home")}</p>
       <div className="mt-3 d-flex flex-column gap-3">
         <Button variant="primary" size="lg" onClick={() => setShowConfig(true)}>
-        {t("quickGame-home")}
+          {t("quickGame-home")}
         </Button>
         <Button variant="primary" size="lg">{t("chaosMode-home")}</Button>
       </div>

From d58d724c1ddb06435d62c806450369eff22417ab Mon Sep 17 00:00:00 2001
From: uo287543 <uo287543@uniovi.es>
Date: Wed, 26 Feb 2025 16:11:08 +0100
Subject: [PATCH 09/21] =?UTF-8?q?estilo=20aplicado=20a=20la=20barra=20de?=
 =?UTF-8?q?=20navegaci=C3=B3n?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 webapp/src/components/NavBar.js     | 11 ++++++-----
 webapp/src/components/home/Home.js  |  1 -
 webapp/src/components/home/home.css |  0
 webapp/src/components/nav.css       | 23 +++++++++++++++++++++++
 4 files changed, 29 insertions(+), 6 deletions(-)
 create mode 100644 webapp/src/components/home/home.css
 create mode 100644 webapp/src/components/nav.css

diff --git a/webapp/src/components/NavBar.js b/webapp/src/components/NavBar.js
index 595529a3..72396be3 100644
--- a/webapp/src/components/NavBar.js
+++ b/webapp/src/components/NavBar.js
@@ -3,6 +3,7 @@ import { Navbar, Nav, Container, Dropdown } from "react-bootstrap";
 import { VscAccount, VscArrowRight } from "react-icons/vsc";
 import i18n from "../i18n/i18next";
 import { useTranslation } from "react-i18next";
+import "./nav.css";
 
 
 const NavBar = () => {
@@ -13,7 +14,7 @@ const NavBar = () => {
   };
 
   return (
-    <Navbar bg="light" expand="lg" fixed="top" className="w-100">
+    <Navbar expand="lg" fixed="top" className="navbar-custom w-100">
       <Container>
         <Nav className="ms-auto">
           {/* Dropdown de idioma */}
@@ -21,7 +22,7 @@ const NavBar = () => {
             <Dropdown.Toggle
               variant="link"
               id="dropdown-language"
-              style={{ fontSize: "20px", color: "rgb(0 0 0 / 65%)", textDecoration: "none" }}
+              className="dropdown-language"
             >
               {t("language-menu")}
             </Dropdown.Toggle>
@@ -31,9 +32,9 @@ const NavBar = () => {
             </Dropdown.Menu>
           </Dropdown>
 
-          <Nav.Link href="#" style={{ fontSize: "20px" }}>{t("rules-menu")}</Nav.Link>
-          <Nav.Link href="#"><VscAccount size={30} /></Nav.Link>
-          <Nav.Link href="#"><VscArrowRight size={30} /></Nav.Link>
+          <Nav.Link href="#" className="rules-menu">{t("rules-menu")}</Nav.Link>
+          <Nav.Link href="#" className="icon-menu"><VscAccount size={30} /></Nav.Link>
+          <Nav.Link href="#" className="icon-menu"><VscArrowRight size={30} /></Nav.Link>
         </Nav>
       </Container>
     </Navbar>
diff --git a/webapp/src/components/home/Home.js b/webapp/src/components/home/Home.js
index 2f4ccd51..e0ed76c1 100644
--- a/webapp/src/components/home/Home.js
+++ b/webapp/src/components/home/Home.js
@@ -1,6 +1,5 @@
 import React, { useState } from "react";
 import Button from "react-bootstrap/Button";
-import "bootstrap/dist/css/bootstrap.min.css";
 import Configuration from "./Configuration";
 import { useTranslation } from "react-i18next";
 import NavBar from "../NavBar";
diff --git a/webapp/src/components/home/home.css b/webapp/src/components/home/home.css
new file mode 100644
index 00000000..e69de29b
diff --git a/webapp/src/components/nav.css b/webapp/src/components/nav.css
new file mode 100644
index 00000000..cbf8671b
--- /dev/null
+++ b/webapp/src/components/nav.css
@@ -0,0 +1,23 @@
+.navbar-custom {
+    background-color: #5D6C89;
+}
+
+
+.dropdown-language, .rules-menu{
+    font-size: 20px;
+    color: #FBF6F3;
+    text-decoration: none ;
+}
+
+.dropdown-language:hover, .rules-menu:hover{
+    color: #FEB06A;
+}
+
+.icon-menu {
+    size: 80px;
+    color: #FBF6F3;
+}
+
+.icon-menu:hover{
+    color: #FEB06A;
+}

From 1ab7fd9dd3168aa29419a459bf7c50532eece79b Mon Sep 17 00:00:00 2001
From: uo287543 <uo287543@uniovi.es>
Date: Wed, 26 Feb 2025 16:48:12 +0100
Subject: [PATCH 10/21] css aplicado a home

---
 webapp/src/components/home/Configuration.js  |  2 --
 webapp/src/components/home/Home.js           | 15 ++++----
 webapp/src/components/home/configuration.css |  0
 webapp/src/components/home/home.css          | 38 ++++++++++++++++++++
 webapp/src/components/nav.css                | 12 ++-----
 5 files changed, 49 insertions(+), 18 deletions(-)
 create mode 100644 webapp/src/components/home/configuration.css

diff --git a/webapp/src/components/home/Configuration.js b/webapp/src/components/home/Configuration.js
index b1931a24..9b66a9d2 100644
--- a/webapp/src/components/home/Configuration.js
+++ b/webapp/src/components/home/Configuration.js
@@ -1,10 +1,8 @@
 import React, { useState } from "react";
 import { Button, Dropdown } from "react-bootstrap";
 import "bootstrap/dist/css/bootstrap.min.css";
-import { red } from "@mui/material/colors";
 import { GoXCircle } from "react-icons/go";
 import { useTranslation } from "react-i18next";
-import i18n from "../../i18n/i18next";
 
 const Configuration = ({ onClose }) => {
   const [questions, setQuestions] = useState(30);
diff --git a/webapp/src/components/home/Home.js b/webapp/src/components/home/Home.js
index e0ed76c1..bcc337e4 100644
--- a/webapp/src/components/home/Home.js
+++ b/webapp/src/components/home/Home.js
@@ -3,26 +3,29 @@ import Button from "react-bootstrap/Button";
 import Configuration from "./Configuration";
 import { useTranslation } from "react-i18next";
 import NavBar from "../NavBar";
+import './home.css';
 
 const Home = () => {
   const [showConfig, setShowConfig] = useState(false);
   const { t } = useTranslation();
 
   return (
-    <div className="d-flex flex-column align-items-center justify-content-center vh-100 bg-white">
+    <div className="home-container">
       {/* NavBar */}
       <NavBar />
 
       {/* Contenido Principal */}
-      <h1 className="text-center fw-bold mt-5">
+      <h1 className="home-heading">
         {t("welcome-home")} <span className="text-dark">WiChat</span>
       </h1>
-      <p className="text-secondary">{t("hello-home")}</p>
-      <div className="mt-3 d-flex flex-column gap-3">
-        <Button variant="primary" size="lg" onClick={() => setShowConfig(true)}>
+      <p className="home-subheading">{t("hello-home")}</p>
+      <div className="home-buttons">
+        <Button size="lg" className="game-options" onClick={() => setShowConfig(true)}>
           {t("quickGame-home")}
         </Button>
-        <Button variant="primary" size="lg">{t("chaosMode-home")}</Button>
+        <Button size="lg" className="game-options" onClick={() => setShowConfig(true)}>
+          {t("chaosMode-home")}
+        </Button>
       </div>
 
       {showConfig && <Configuration onClose={() => setShowConfig(false)} />}
diff --git a/webapp/src/components/home/configuration.css b/webapp/src/components/home/configuration.css
new file mode 100644
index 00000000..e69de29b
diff --git a/webapp/src/components/home/home.css b/webapp/src/components/home/home.css
index e69de29b..cd1ff928 100644
--- a/webapp/src/components/home/home.css
+++ b/webapp/src/components/home/home.css
@@ -0,0 +1,38 @@
+/* Estilos para home */
+.home-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+  }
+  
+  .home-heading {
+    text-align: center;
+    font-weight: bold;
+    margin-top: 2rem;
+  }
+  
+  .home-subheading {
+    color: #6c757d; /* Estilo de texto secundario */
+  }
+  
+  .home-buttons {
+    margin-top: 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .game-options{
+    background-color: #5D6C89;
+    color: #FBF6F3;
+    border: none;
+  }
+  
+  .game-options:hover{
+    background-color: #36D6E7;
+    color: #FBF6F3;
+    border: none;
+  }
+
diff --git a/webapp/src/components/nav.css b/webapp/src/components/nav.css
index cbf8671b..309bd7da 100644
--- a/webapp/src/components/nav.css
+++ b/webapp/src/components/nav.css
@@ -3,21 +3,13 @@
 }
 
 
-.dropdown-language, .rules-menu{
+.dropdown-language, .rules-menu, .icon-menu{
     font-size: 20px;
     color: #FBF6F3;
     text-decoration: none ;
 }
 
-.dropdown-language:hover, .rules-menu:hover{
+.dropdown-language:hover, .rules-menu:hover, .icon-menu.hover{
     color: #FEB06A;
 }
 
-.icon-menu {
-    size: 80px;
-    color: #FBF6F3;
-}
-
-.icon-menu:hover{
-    color: #FEB06A;
-}

From 360dc8703879aca7c3c0fa789c443bcfcc6355ea Mon Sep 17 00:00:00 2001
From: uo287543 <uo287543@uniovi.es>
Date: Wed, 26 Feb 2025 20:06:49 +0100
Subject: [PATCH 11/21] =?UTF-8?q?correci=C3=B3n=20desplegable=20idioma=20e?=
 =?UTF-8?q?n=20el=20men=C3=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 webapp/src/components/NavBar.js |  5 ++--
 webapp/src/components/nav.css   | 53 +++++++++++++++++++++++++++++----
 2 files changed, 49 insertions(+), 9 deletions(-)

diff --git a/webapp/src/components/NavBar.js b/webapp/src/components/NavBar.js
index 72396be3..a842d200 100644
--- a/webapp/src/components/NavBar.js
+++ b/webapp/src/components/NavBar.js
@@ -17,7 +17,6 @@ const NavBar = () => {
     <Navbar expand="lg" fixed="top" className="navbar-custom w-100">
       <Container>
         <Nav className="ms-auto">
-          {/* Dropdown de idioma */}
           <Dropdown align="end">
             <Dropdown.Toggle
               variant="link"
@@ -27,8 +26,8 @@ const NavBar = () => {
               {t("language-menu")}
             </Dropdown.Toggle>
             <Dropdown.Menu>
-              <Dropdown.Item onClick={() => changeLanguage("es")}>{t("spanish-menu")}</Dropdown.Item>
-              <Dropdown.Item onClick={() => changeLanguage("en")}>{t("english-menu")}</Dropdown.Item>
+              <Dropdown.Item className="language-options" onClick={() => changeLanguage("es")}>{t("spanish-menu")}</Dropdown.Item>
+              <Dropdown.Item className="language-options" onClick={() => changeLanguage("en")}>{t("english-menu")}</Dropdown.Item>
             </Dropdown.Menu>
           </Dropdown>
 
diff --git a/webapp/src/components/nav.css b/webapp/src/components/nav.css
index 309bd7da..b6e2bd0f 100644
--- a/webapp/src/components/nav.css
+++ b/webapp/src/components/nav.css
@@ -1,15 +1,56 @@
 .navbar-custom {
     background-color: #5D6C89;
-}
-
-
-.dropdown-language, .rules-menu, .icon-menu{
+  }
+  
+  .dropdown-language, .rules-menu {
     font-size: 20px;
     color: #FBF6F3;
-    text-decoration: none ;
+    text-decoration: none;
+  }
+  
+  .dropdown-language:hover, .rules-menu:hover {
+    color: #FEB06A;
+  }
+  
+  .icon-menu {
+    font-size: 20px;
+    color: #FBF6F3;
+    text-decoration: none;
+    transition: color 0.3s ease-in-out;
+  }
+  
+  .icon-menu:hover {
+    color: #FEB06A;
+  }
+  
+  .language-options:active, 
+  .language-options:hover, 
+  .language-options:focus {
+    background-color: #FEB06A;
+    color: #FBF6F3;
+  }
+  
+  /* Color blanco por defecto */
+#dropdown-language {
+    color: #FBF6F3;
+    transition: color 0.3s ease-in-out;
 }
 
-.dropdown-language:hover, .rules-menu:hover, .icon-menu.hover{
+/* Al pasar el ratón, se pone naranja */
+#dropdown-language:hover {
     color: #FEB06A;
 }
 
+/* Cuando el dropdown está abierto, se mantiene naranja */
+#dropdown-language.show {
+    color: #FEB06A;
+}
+
+/* Cuando el dropdown se cierra, vuelve a blanco */
+#dropdown-language:not(.show):not(:hover) {
+    color: #FBF6F3;
+}
+
+
+
+  
\ No newline at end of file

From f48029a2d6c5c8a023a6f9ba262a718726bad7d9 Mon Sep 17 00:00:00 2001
From: uo287543 <uo287543@uniovi.es>
Date: Wed, 26 Feb 2025 20:36:48 +0100
Subject: [PATCH 12/21] =?UTF-8?q?cambio=20t=C3=ADtulo=20Home.js?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 webapp/src/components/home/Home.js  |  2 +-
 webapp/src/components/home/home.css |  7 ++++++-
 webapp/src/components/nav.css       | 11 ++++++-----
 3 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/webapp/src/components/home/Home.js b/webapp/src/components/home/Home.js
index bcc337e4..7b385a91 100644
--- a/webapp/src/components/home/Home.js
+++ b/webapp/src/components/home/Home.js
@@ -16,7 +16,7 @@ const Home = () => {
 
       {/* Contenido Principal */}
       <h1 className="home-heading">
-        {t("welcome-home")} <span className="text-dark">WiChat</span>
+        {t("welcome-home")} <span className="app-name">WiChat</span>
       </h1>
       <p className="home-subheading">{t("hello-home")}</p>
       <div className="home-buttons">
diff --git a/webapp/src/components/home/home.css b/webapp/src/components/home/home.css
index cd1ff928..2d5e10f8 100644
--- a/webapp/src/components/home/home.css
+++ b/webapp/src/components/home/home.css
@@ -11,10 +11,15 @@
     text-align: center;
     font-weight: bold;
     margin-top: 2rem;
+    color: #5D6C89;
   }
   
   .home-subheading {
-    color: #6c757d; /* Estilo de texto secundario */
+    color: #5D6C89; 
+  }
+
+  .app-name{
+    color: #5D6C89; 
   }
   
   .home-buttons {
diff --git a/webapp/src/components/nav.css b/webapp/src/components/nav.css
index b6e2bd0f..c3bfc5fd 100644
--- a/webapp/src/components/nav.css
+++ b/webapp/src/components/nav.css
@@ -11,6 +11,11 @@
   .dropdown-language:hover, .rules-menu:hover {
     color: #FEB06A;
   }
+
+  .dropdown-language:active, .rules-menu:active {
+    color: #FEB06A;
+  }
+  
   
   .icon-menu {
     font-size: 20px;
@@ -30,27 +35,23 @@
     color: #FBF6F3;
   }
   
-  /* Color blanco por defecto */
+
 #dropdown-language {
     color: #FBF6F3;
     transition: color 0.3s ease-in-out;
 }
 
-/* Al pasar el ratón, se pone naranja */
 #dropdown-language:hover {
     color: #FEB06A;
 }
 
-/* Cuando el dropdown está abierto, se mantiene naranja */
 #dropdown-language.show {
     color: #FEB06A;
 }
 
-/* Cuando el dropdown se cierra, vuelve a blanco */
 #dropdown-language:not(.show):not(:hover) {
     color: #FBF6F3;
 }
 
 
-
   
\ No newline at end of file

From ca53b55d58704d7408013bc9c470997838c96201 Mon Sep 17 00:00:00 2001
From: uo287543 <uo287543@uniovi.es>
Date: Mon, 3 Mar 2025 12:51:59 +0100
Subject: [PATCH 13/21] =?UTF-8?q?css=20aplicado=20a=20ventana=20de=20confi?=
 =?UTF-8?q?guraci=C3=B3n?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 webapp/src/components/home/Configuration.js  | 50 +++++-----
 webapp/src/components/home/configuration.css | 98 ++++++++++++++++++++
 webapp/src/components/home/home.css          | 68 +++++++-------
 3 files changed, 153 insertions(+), 63 deletions(-)

diff --git a/webapp/src/components/home/Configuration.js b/webapp/src/components/home/Configuration.js
index 9b66a9d2..60f0b662 100644
--- a/webapp/src/components/home/Configuration.js
+++ b/webapp/src/components/home/Configuration.js
@@ -3,34 +3,24 @@ import { Button, Dropdown } from "react-bootstrap";
 import "bootstrap/dist/css/bootstrap.min.css";
 import { GoXCircle } from "react-icons/go";
 import { useTranslation } from "react-i18next";
+import "./configuration.css";
 
 const Configuration = ({ onClose }) => {
   const [questions, setQuestions] = useState(30);
   const [time, setTime] = useState(120);
-
   const { t } = useTranslation();
 
   const handleClose = () => {
-    onClose();  
+    onClose();
   };
 
   return (
-    <div className="position-fixed top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center bg-dark bg-opacity-50">
-      <div className="bg-white p-4 rounded shadow-lg text-center position-relative" style={{ width: "325px" }}>
-      <GoXCircle 
-        onClick={handleClose} 
-        style={{
-          position: 'absolute', 
-          top: '10px',           
-          left: '10px',          
-          color: 'red',          
-          fontSize: '30px',      
-          cursor: 'pointer'     
-        }} 
-      />
-        <h2 className="mb-3">{t("title-configuration")}</h2>
-        <div className="mb-3 d-flex align-items-center justify-content-between">
-          <label className="me-2">{t("numberQuestions-configuration")}</label>
+    <div className="overlay">
+      <div className="config-container">
+        <GoXCircle onClick={handleClose} className="close-icon" />
+        <h2 className="title">{t("title-configuration")}</h2>
+        <div className="config-option">
+          <label>{t("numberQuestions-configuration")}</label>
           <Dropdown onSelect={(value) => setQuestions(Number(value))}>
             <Dropdown.Toggle variant="light">{questions}</Dropdown.Toggle>
             <Dropdown.Menu>
@@ -40,8 +30,8 @@ const Configuration = ({ onClose }) => {
             </Dropdown.Menu>
           </Dropdown>
         </div>
-        <div className="mb-3 d-flex align-items-center justify-content-between">
-          <label className="me-2">{t("time-configuration")}</label>
+        <div className="config-option">
+          <label>{t("time-configuration")}</label>
           <Dropdown onSelect={(value) => setTime(Number(value))}>
             <Dropdown.Toggle variant="light">{time}s</Dropdown.Toggle>
             <Dropdown.Menu>
@@ -51,17 +41,19 @@ const Configuration = ({ onClose }) => {
             </Dropdown.Menu>
           </Dropdown>
         </div>
-        <div className="mb-3">
-          <label className="d-block">Topics</label>
-          <div className="d-flex flex-wrap justify-content-center gap-2">
-          <Button className="px-3 py-1 text-white" style={{ backgroundColor: "purple", border: "none", fontSize: "0.8rem" }}>{t("history-configuration")}</Button>
-            <Button className="px-3 py-1 text-white" style={{ backgroundColor: "green", border: "none", fontSize: "0.8rem" }}>{t("science-configuration")}</Button>
-            <Button className="px-3 py-1 text-white" style={{ backgroundColor: "red", border: "none", fontSize: "0.8rem" }}>{t("art-configuration")}</Button>
-            <Button className="px-3 py-1 text-white" style={{ backgroundColor: "orange", border: "none", fontSize: "0.8rem" }}>{t("sport-configuration")}</Button>
-            <Button className="px-3 py-1 text-white" style={{ backgroundColor: "blue", border: "none", fontSize: "0.8rem" }}>{t("geography-configuration")}</Button>
+        <div className="topics-section">
+          <label className="topics-label">Topics</label>
+          <div className="topics-container">
+            <button className="topic-button purple">{t("history-configuration")}</button>
+            <button className="topic-button green">{t("science-configuration")}</button>
+            <button className="topic-button red">{t("art-configuration")}</button>
+            <div>
+              <button className="topic-button orange">{t("sport-configuration")}</button>
+              <button className="topic-button blue">{t("geography-configuration")}</button>
+            </div>
           </div>
         </div>
-        <Button variant="primary" className="w-100">{t("play-configuration")}</Button>
+        <Button className="play-button">{t("play-configuration")}</Button>
       </div>
     </div>
   );
diff --git a/webapp/src/components/home/configuration.css b/webapp/src/components/home/configuration.css
index e69de29b..61827425 100644
--- a/webapp/src/components/home/configuration.css
+++ b/webapp/src/components/home/configuration.css
@@ -0,0 +1,98 @@
+h2{
+    font-size: 33px;
+}
+
+.overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: rgba(0, 0, 0, 0.5);
+}
+  
+.config-container {
+    background: white;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
+    text-align: center;
+    position: relative;
+    width: 325px;
+}
+  
+.close-icon {
+    position: absolute;
+    top: 10px; 
+    left: 8px;
+    color: red;
+    font-size: 28px;
+    cursor: pointer;
+}
+  
+.title {
+    margin-bottom: 15px;
+}
+  
+.config-option {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 15px;
+}
+  
+.topics-section {
+    margin-bottom: 15px;
+}
+  
+.topics-label {
+    display: block;
+    margin-bottom: 5px;
+}
+  
+.topics-container {
+    display: grid;
+    grid-template-columns: repeat(3, auto);
+    justify-content: center;
+    gap: 8px;
+}
+  
+.topics-container div {
+    grid-column: span 3;
+    display: flex;
+    justify-content: center;
+    gap: 8px;
+}
+  
+.topic-button {
+    padding: 5px 10px;
+    font-size: 0.8rem;
+    border: none;
+    color: white;
+    transition: background-color 0.3s;
+}
+  
+.topic-button:hover, .topic-button:active {
+    background-color: #36D6E7;
+}
+  
+.purple { background-color: purple; }
+.green { background-color: green; }
+.red { background-color: red; }
+.orange { background-color: orange; }
+.blue { background-color: blue; }
+  
+.play-button {
+    width: 100%;
+    background-color: #5D6C89 ;
+    border: none;
+    transition: background-color 0.3s;
+}
+  
+.play-button:hover, .play-button:active {
+    background-color: #36D6E7;
+}
+  
\ No newline at end of file
diff --git a/webapp/src/components/home/home.css b/webapp/src/components/home/home.css
index 2d5e10f8..147d5920 100644
--- a/webapp/src/components/home/home.css
+++ b/webapp/src/components/home/home.css
@@ -1,43 +1,43 @@
 /* Estilos para home */
 .home-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    height: 100vh;
-  }
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+}
   
-  .home-heading {
-    text-align: center;
-    font-weight: bold;
-    margin-top: 2rem;
-    color: #5D6C89;
-  }
+.home-heading {
+  text-align: center;
+  font-weight: bold;
+  margin-top: 2rem;
+  color: #5D6C89;
+}
   
-  .home-subheading {
-    color: #5D6C89; 
-  }
+.home-subheading {
+  color: #5D6C89; 
+}
 
-  .app-name{
-    color: #5D6C89; 
-  }
+.app-name{
+  color: #5D6C89; 
+}
   
-  .home-buttons {
-    margin-top: 1rem;
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-  }
+.home-buttons {
+  margin-top: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
 
-  .game-options{
-    background-color: #5D6C89;
-    color: #FBF6F3;
-    border: none;
-  }
+.game-options{
+  background-color: #5D6C89;
+  color: #FBF6F3;
+  border: none;
+}
   
-  .game-options:hover{
-    background-color: #36D6E7;
-    color: #FBF6F3;
-    border: none;
-  }
+.game-options:hover{
+  background-color: #36D6E7;
+  color: #FBF6F3;
+  border: none;
+}
 

From dc4000a8fb16a35e790088e9c5a398bdc0ecaa65 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adriana=20Herrero=20Gonz=C3=A1lez?= <UO287543@uniovi.es>
Date: Tue, 4 Mar 2025 13:52:20 +0100
Subject: [PATCH 14/21] cambiar mensaje esperado en el test

---
 webapp/src/App.test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/src/App.test.js b/webapp/src/App.test.js
index d418d5c3..ef7342f7 100644
--- a/webapp/src/App.test.js
+++ b/webapp/src/App.test.js
@@ -3,7 +3,7 @@ import App from './App';
 
 test('renders welcome message', () => {
   render(<App />);
-  const welcomeMessage = screen.getByText(/Welcome to the 2025 edition of the Software Architecture course/i);
+  const welcomeMessage = screen.getByText(/Bienvenido a WiChat/i);
   expect(welcomeMessage).toBeInTheDocument();
 });
 

From 2033ec3d483883df148de688dfda3aadaf847b61 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adriana=20Herrero=20Gonz=C3=A1lez?= <UO287543@uniovi.es>
Date: Tue, 4 Mar 2025 15:00:11 +0100
Subject: [PATCH 15/21] =?UTF-8?q?cambios=20aplicados=20a=20los=20botones?=
 =?UTF-8?q?=20de=20configuraci=C3=B3n?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 webapp/src/App.test.js                       |  2 +-
 webapp/src/components/home/Configuration.js  | 31 +++++--
 webapp/src/components/home/configuration.css | 90 ++++++++++----------
 3 files changed, 67 insertions(+), 56 deletions(-)

diff --git a/webapp/src/App.test.js b/webapp/src/App.test.js
index ef7342f7..d418d5c3 100644
--- a/webapp/src/App.test.js
+++ b/webapp/src/App.test.js
@@ -3,7 +3,7 @@ import App from './App';
 
 test('renders welcome message', () => {
   render(<App />);
-  const welcomeMessage = screen.getByText(/Bienvenido a WiChat/i);
+  const welcomeMessage = screen.getByText(/Welcome to the 2025 edition of the Software Architecture course/i);
   expect(welcomeMessage).toBeInTheDocument();
 });
 
diff --git a/webapp/src/components/home/Configuration.js b/webapp/src/components/home/Configuration.js
index 60f0b662..2d67736c 100644
--- a/webapp/src/components/home/Configuration.js
+++ b/webapp/src/components/home/Configuration.js
@@ -4,6 +4,8 @@ import "bootstrap/dist/css/bootstrap.min.css";
 import { GoXCircle } from "react-icons/go";
 import { useTranslation } from "react-i18next";
 import "./configuration.css";
+import ToggleButton from 'react-bootstrap/ToggleButton';
+import ToggleButtonGroup from 'react-bootstrap/ToggleButtonGroup';
 
 const Configuration = ({ onClose }) => {
   const [questions, setQuestions] = useState(30);
@@ -43,15 +45,26 @@ const Configuration = ({ onClose }) => {
         </div>
         <div className="topics-section">
           <label className="topics-label">Topics</label>
-          <div className="topics-container">
-            <button className="topic-button purple">{t("history-configuration")}</button>
-            <button className="topic-button green">{t("science-configuration")}</button>
-            <button className="topic-button red">{t("art-configuration")}</button>
-            <div>
-              <button className="topic-button orange">{t("sport-configuration")}</button>
-              <button className="topic-button blue">{t("geography-configuration")}</button>
-            </div>
-          </div>
+
+          <ToggleButtonGroup type="checkbox" defaultValue={[1, 3]} className="buttonGroup">
+          <ToggleButton id="history" value={1} className="toggle-btn-history">
+            Historia
+          </ToggleButton>
+          <ToggleButton id="science" value={2} className="toggle-btn-science">
+            Ciencia
+          </ToggleButton>
+          <ToggleButton id="art" value={3} className="toggle-btn-art">
+            Arte
+          </ToggleButton>
+          <br />
+          <ToggleButton id="sport" value={1} className="toggle-btn-sport">
+            Deportes
+          </ToggleButton>
+          <ToggleButton id="geography" value={2} className="toggle-btn-geography">
+            Geografía
+          </ToggleButton>
+          </ToggleButtonGroup>
+
         </div>
         <Button className="play-button">{t("play-configuration")}</Button>
       </div>
diff --git a/webapp/src/components/home/configuration.css b/webapp/src/components/home/configuration.css
index 61827425..5ca9bf6b 100644
--- a/webapp/src/components/home/configuration.css
+++ b/webapp/src/components/home/configuration.css
@@ -1,4 +1,4 @@
-h2{
+h2 {
     font-size: 33px;
 }
 
@@ -13,7 +13,7 @@ h2{
     justify-content: center;
     background-color: rgba(0, 0, 0, 0.5);
 }
-  
+
 .config-container {
     background: white;
     padding: 20px;
@@ -23,76 +23,74 @@ h2{
     position: relative;
     width: 325px;
 }
-  
+
 .close-icon {
     position: absolute;
-    top: 10px; 
+    top: 10px;
     left: 8px;
     color: red;
     font-size: 28px;
     cursor: pointer;
 }
-  
+
 .title {
     margin-bottom: 15px;
 }
-  
+
 .config-option {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 15px;
 }
-  
-.topics-section {
-    margin-bottom: 15px;
-}
-  
-.topics-label {
-    display: block;
-    margin-bottom: 5px;
+
+
+.toggle-btn-history {
+    background-color: #9b59b6 !important;
+    color: white;
+    border: none;
 }
-  
-.topics-container {
-    display: grid;
-    grid-template-columns: repeat(3, auto);
-    justify-content: center;
-    gap: 8px;
+.toggle-btn-science {
+    background-color: #2ecc71 !important;
+    color: white;
+    border: none;
 }
-  
-.topics-container div {
-    grid-column: span 3;
-    display: flex;
-    justify-content: center;
-    gap: 8px;
+.toggle-btn-art {
+    background-color: #e74c3c !important;
+    color: white;
+    border: none;
 }
-  
-.topic-button {
-    padding: 5px 10px;
-    font-size: 0.8rem;
+.toggle-btn-sport {
+    background-color: #FEB06A !important;
+    color: white;
     border: none;
+}
+.toggle-btn-geography {
+    background-color: blue !important;
     color: white;
-    transition: background-color 0.3s;
+    border: none;
 }
-  
-.topic-button:hover, .topic-button:active {
-    background-color: #36D6E7;
+
+.buttonGroup {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+}
+
+.toggle-btn-history, .toggle-btn-science, .toggle-btn-art, .toggle-btn-sport, .toggle-btn-geography {
+    margin: 2%;
+    width:30%;
 }
-  
-.purple { background-color: purple; }
-.green { background-color: green; }
-.red { background-color: red; }
-.orange { background-color: orange; }
-.blue { background-color: blue; }
-  
+
+
+
 .play-button {
     width: 100%;
-    background-color: #5D6C89 ;
+    background-color: #5D6C89;
     border: none;
     transition: background-color 0.3s;
 }
-  
-.play-button:hover, .play-button:active {
+
+.play-button:hover {
     background-color: #36D6E7;
-}
-  
\ No newline at end of file
+}
\ No newline at end of file

From ea352f20f4c37eb36a68e6afe0e502f74c9c58a9 Mon Sep 17 00:00:00 2001
From: uo287543 <uo287543@uniovi.es>
Date: Tue, 4 Mar 2025 17:55:16 +0100
Subject: [PATCH 16/21] =?UTF-8?q?distribuci=C3=B3n=20botones=20correcta?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 webapp/src/components/home/Configuration.js  | 36 +++++++++-------
 webapp/src/components/home/Home.js           |  2 +-
 webapp/src/components/home/configuration.css | 44 ++++++++++++++++----
 3 files changed, 56 insertions(+), 26 deletions(-)

diff --git a/webapp/src/components/home/Configuration.js b/webapp/src/components/home/Configuration.js
index 2d67736c..427ce1a9 100644
--- a/webapp/src/components/home/Configuration.js
+++ b/webapp/src/components/home/Configuration.js
@@ -47,24 +47,28 @@ const Configuration = ({ onClose }) => {
           <label className="topics-label">Topics</label>
 
           <ToggleButtonGroup type="checkbox" defaultValue={[1, 3]} className="buttonGroup">
-          <ToggleButton id="history" value={1} className="toggle-btn-history">
-            Historia
-          </ToggleButton>
-          <ToggleButton id="science" value={2} className="toggle-btn-science">
-            Ciencia
-          </ToggleButton>
-          <ToggleButton id="art" value={3} className="toggle-btn-art">
-            Arte
-          </ToggleButton>
-          <br />
-          <ToggleButton id="sport" value={1} className="toggle-btn-sport">
-            Deportes
-          </ToggleButton>
-          <ToggleButton id="geography" value={2} className="toggle-btn-geography">
-            Geografía
-          </ToggleButton>
+            <div className="first-row">
+              <ToggleButton id="history" value={1} className="toggle-btn-history">
+              {t("history-configuration")}
+              </ToggleButton>
+              <ToggleButton id="science" value={2} className="toggle-btn-science">
+              {t("science-configuration")}
+              </ToggleButton>
+              <ToggleButton id="art" value={3} className="toggle-btn-art">
+              {t("art-configuration")}
+              </ToggleButton>
+            </div>
+            <div className="second-row">
+              <ToggleButton id="sport" value={4} className="toggle-btn-sport">
+              {t("sport-configuration")}
+              </ToggleButton>
+              <ToggleButton id="geography" value={5} className="toggle-btn-geography">
+              {t("geography-configuration")}
+              </ToggleButton>
+            </div>
           </ToggleButtonGroup>
 
+
         </div>
         <Button className="play-button">{t("play-configuration")}</Button>
       </div>
diff --git a/webapp/src/components/home/Home.js b/webapp/src/components/home/Home.js
index 7b385a91..8b97f609 100644
--- a/webapp/src/components/home/Home.js
+++ b/webapp/src/components/home/Home.js
@@ -33,4 +33,4 @@ const Home = () => {
   );
 };
 
-export default Home;
+export default Home;
\ No newline at end of file
diff --git a/webapp/src/components/home/configuration.css b/webapp/src/components/home/configuration.css
index 5ca9bf6b..d6967e0c 100644
--- a/webapp/src/components/home/configuration.css
+++ b/webapp/src/components/home/configuration.css
@@ -50,39 +50,64 @@ h2 {
     color: white;
     border: none;
 }
+
 .toggle-btn-science {
     background-color: #2ecc71 !important;
     color: white;
     border: none;
 }
+
 .toggle-btn-art {
     background-color: #e74c3c !important;
     color: white;
     border: none;
 }
+
 .toggle-btn-sport {
     background-color: #FEB06A !important;
     color: white;
     border: none;
 }
+
 .toggle-btn-geography {
     background-color: blue !important;
     color: white;
     border: none;
 }
 
-.buttonGroup {
-    display: flex;
-    justify-content: center;
-    flex-wrap: wrap;
-}
+.toggle-btn-history:hover,
+.toggle-btn-science:hover,
+.toggle-btn-art:hover, 
+.toggle-btn-sport:hover, 
+.toggle-btn-geography:hover {
+    background-color: #36D6E7 !important;
 
-.toggle-btn-history, .toggle-btn-science, .toggle-btn-art, .toggle-btn-sport, .toggle-btn-geography {
-    margin: 2%;
-    width:30%;
 }
 
 
+.buttonGroup {
+    display: flex;
+    flex-direction: column;
+    align-items: center; 
+  }
+  
+  .buttonGroup > div {
+    display: flex;
+    justify-content: center;
+    gap: 10px; 
+    width: 100%;
+  }
+  
+  .first-row {
+    justify-content: flex-start; 
+  }
+  
+  .second-row {
+    justify-content: center; 
+    margin-top: 15px; 
+    margin-bottom: 15px;
+  }
+  
 
 .play-button {
     width: 100%;
@@ -93,4 +118,5 @@ h2 {
 
 .play-button:hover {
     background-color: #36D6E7;
-}
\ No newline at end of file
+}
+

From 04868e3242c19f49b15865f248e855c97a202c09 Mon Sep 17 00:00:00 2001
From: uo287543 <uo287543@uniovi.es>
Date: Tue, 4 Mar 2025 20:51:25 +0100
Subject: [PATCH 17/21] botones configuracion correctos

---
 webapp/src/components/home/Configuration.js  | 65 +++++++++++++++-----
 webapp/src/components/home/configuration.css | 31 +++++-----
 2 files changed, 67 insertions(+), 29 deletions(-)

diff --git a/webapp/src/components/home/Configuration.js b/webapp/src/components/home/Configuration.js
index 427ce1a9..0d2f9416 100644
--- a/webapp/src/components/home/Configuration.js
+++ b/webapp/src/components/home/Configuration.js
@@ -4,18 +4,27 @@ import "bootstrap/dist/css/bootstrap.min.css";
 import { GoXCircle } from "react-icons/go";
 import { useTranslation } from "react-i18next";
 import "./configuration.css";
-import ToggleButton from 'react-bootstrap/ToggleButton';
-import ToggleButtonGroup from 'react-bootstrap/ToggleButtonGroup';
+import ToggleButton from "react-bootstrap/ToggleButton";
+import ToggleButtonGroup from "react-bootstrap/ToggleButtonGroup";
 
 const Configuration = ({ onClose }) => {
   const [questions, setQuestions] = useState(30);
   const [time, setTime] = useState(120);
   const { t } = useTranslation();
+  const [selectedButtons, setSelectedButtons] = useState([]); // Estado para controlar los botones seleccionados
 
   const handleClose = () => {
     onClose();
   };
 
+  const handleButtonClick = (value) => {
+    setSelectedButtons((prevSelected) =>
+      prevSelected.includes(value)
+        ? prevSelected.filter((item) => item !== value) // Si ya está, lo quita
+        : [...prevSelected, value] // Si no está, lo agrega
+    );
+  };
+
   return (
     <div className="overlay">
       <div className="config-container">
@@ -46,29 +55,55 @@ const Configuration = ({ onClose }) => {
         <div className="topics-section">
           <label className="topics-label">Topics</label>
 
-          <ToggleButtonGroup type="checkbox" defaultValue={[1, 3]} className="buttonGroup">
+          <ToggleButtonGroup
+            type="checkbox"
+            className="buttonGroup"
+          >
             <div className="first-row">
-              <ToggleButton id="history" value={1} className="toggle-btn-history">
-              {t("history-configuration")}
+              <ToggleButton
+                id="history"
+                value={1}
+                className={`toggle-btn-history ${selectedButtons.includes(1) ? "selected" : ""}`}
+                onClick={() => handleButtonClick(1)}
+              >
+                {t("history-configuration")}
               </ToggleButton>
-              <ToggleButton id="science" value={2} className="toggle-btn-science">
-              {t("science-configuration")}
+              <ToggleButton
+                id="science"
+                value={2}
+                className={`toggle-btn-science ${selectedButtons.includes(2) ? "selected" : ""}`}
+                onClick={() => handleButtonClick(2)}
+              >
+                {t("science-configuration")}
               </ToggleButton>
-              <ToggleButton id="art" value={3} className="toggle-btn-art">
-              {t("art-configuration")}
+              <ToggleButton
+                id="art"
+                value={3}
+                className={`toggle-btn-art ${selectedButtons.includes(3) ? "selected" : ""}`}
+                onClick={() => handleButtonClick(3)}
+              >
+                {t("art-configuration")}
               </ToggleButton>
             </div>
             <div className="second-row">
-              <ToggleButton id="sport" value={4} className="toggle-btn-sport">
-              {t("sport-configuration")}
+              <ToggleButton
+                id="sport"
+                value={4}
+                className={`toggle-btn-sport ${selectedButtons.includes(4) ? "selected" : ""}`}
+                onClick={() => handleButtonClick(4)}
+              >
+                {t("sport-configuration")}
               </ToggleButton>
-              <ToggleButton id="geography" value={5} className="toggle-btn-geography">
-              {t("geography-configuration")}
+              <ToggleButton
+                id="geography"
+                value={5}
+                className={`toggle-btn-geography ${selectedButtons.includes(5) ? "selected" : ""}`}
+                onClick={() => handleButtonClick(5)}
+              >
+                {t("geography-configuration")}
               </ToggleButton>
             </div>
           </ToggleButtonGroup>
-
-
         </div>
         <Button className="play-button">{t("play-configuration")}</Button>
       </div>
diff --git a/webapp/src/components/home/configuration.css b/webapp/src/components/home/configuration.css
index d6967e0c..fed605cb 100644
--- a/webapp/src/components/home/configuration.css
+++ b/webapp/src/components/home/configuration.css
@@ -44,7 +44,6 @@ h2 {
     margin-bottom: 15px;
 }
 
-
 .toggle-btn-history {
     background-color: #9b59b6 !important;
     color: white;
@@ -75,39 +74,44 @@ h2 {
     border: none;
 }
 
+/* 🔹 Cuando un botón es seleccionado, se cambia permanentemente a #36D6E7 */
+.selected {
+    background-color: #36D6E7 !important;
+}
+
+/* Efecto hover para todos los botones */
 .toggle-btn-history:hover,
 .toggle-btn-science:hover,
 .toggle-btn-art:hover, 
 .toggle-btn-sport:hover, 
 .toggle-btn-geography:hover {
     background-color: #36D6E7 !important;
-
 }
 
 
+
 .buttonGroup {
     display: flex;
     flex-direction: column;
     align-items: center; 
-  }
-  
-  .buttonGroup > div {
+}
+
+.buttonGroup > div {
     display: flex;
     justify-content: center;
     gap: 10px; 
     width: 100%;
-  }
-  
-  .first-row {
+}
+
+.first-row {
     justify-content: flex-start; 
-  }
-  
-  .second-row {
+}
+
+.second-row {
     justify-content: center; 
     margin-top: 15px; 
     margin-bottom: 15px;
-  }
-  
+}
 
 .play-button {
     width: 100%;
@@ -119,4 +123,3 @@ h2 {
 .play-button:hover {
     background-color: #36D6E7;
 }
-

From beddb999a0ae79acbd0054000a1519318e66ad3b Mon Sep 17 00:00:00 2001
From: uo287543 <uo287543@uniovi.es>
Date: Tue, 4 Mar 2025 21:01:43 +0100
Subject: [PATCH 18/21] =?UTF-8?q?barra=20navegaci=C3=B3n=20correcta?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 webapp/src/components/home/Configuration.js  |   6 +-
 webapp/src/components/home/configuration.css |   2 -
 webapp/src/components/nav.css                | 113 ++++++++++++-------
 3 files changed, 74 insertions(+), 47 deletions(-)

diff --git a/webapp/src/components/home/Configuration.js b/webapp/src/components/home/Configuration.js
index 0d2f9416..5ac4f824 100644
--- a/webapp/src/components/home/Configuration.js
+++ b/webapp/src/components/home/Configuration.js
@@ -11,7 +11,7 @@ const Configuration = ({ onClose }) => {
   const [questions, setQuestions] = useState(30);
   const [time, setTime] = useState(120);
   const { t } = useTranslation();
-  const [selectedButtons, setSelectedButtons] = useState([]); // Estado para controlar los botones seleccionados
+  const [selectedButtons, setSelectedButtons] = useState([]); 
 
   const handleClose = () => {
     onClose();
@@ -20,8 +20,8 @@ const Configuration = ({ onClose }) => {
   const handleButtonClick = (value) => {
     setSelectedButtons((prevSelected) =>
       prevSelected.includes(value)
-        ? prevSelected.filter((item) => item !== value) // Si ya está, lo quita
-        : [...prevSelected, value] // Si no está, lo agrega
+        ? prevSelected.filter((item) => item !== value) 
+        : [...prevSelected, value] 
     );
   };
 
diff --git a/webapp/src/components/home/configuration.css b/webapp/src/components/home/configuration.css
index fed605cb..5987d053 100644
--- a/webapp/src/components/home/configuration.css
+++ b/webapp/src/components/home/configuration.css
@@ -74,12 +74,10 @@ h2 {
     border: none;
 }
 
-/* 🔹 Cuando un botón es seleccionado, se cambia permanentemente a #36D6E7 */
 .selected {
     background-color: #36D6E7 !important;
 }
 
-/* Efecto hover para todos los botones */
 .toggle-btn-history:hover,
 .toggle-btn-science:hover,
 .toggle-btn-art:hover, 
diff --git a/webapp/src/components/nav.css b/webapp/src/components/nav.css
index c3bfc5fd..94e116ab 100644
--- a/webapp/src/components/nav.css
+++ b/webapp/src/components/nav.css
@@ -1,57 +1,86 @@
 .navbar-custom {
-    background-color: #5D6C89;
-  }
-  
-  .dropdown-language, .rules-menu {
-    font-size: 20px;
-    color: #FBF6F3;
-    text-decoration: none;
-  }
-  
-  .dropdown-language:hover, .rules-menu:hover {
-    color: #FEB06A;
-  }
-
-  .dropdown-language:active, .rules-menu:active {
-    color: #FEB06A;
-  }
-  
-  
-  .icon-menu {
-    font-size: 20px;
-    color: #FBF6F3;
-    text-decoration: none;
-    transition: color 0.3s ease-in-out;
-  }
-  
-  .icon-menu:hover {
-    color: #FEB06A;
-  }
-  
-  .language-options:active, 
-  .language-options:hover, 
-  .language-options:focus {
-    background-color: #FEB06A;
-    color: #FBF6F3;
-  }
-  
+  background-color: #5D6C89;
+}
+
+.dropdown-language, .rules-menu {
+  font-size: 20px;
+  color: #FBF6F3;
+  text-decoration: none;
+  transition: color 0.3s ease-in-out;
+}
+
+.dropdown-language:hover, .rules-menu:hover {
+  color: #FEB06A;
+}
+
+.dropdown-language:active, .rules-menu:active {
+  color: #FEB06A;
+}
+
+.icon-menu {
+  font-size: 20px;
+  color: #FBF6F3;
+  text-decoration: none;
+  transition: color 0.3s ease-in-out;
+}
+
+.icon-menu:hover {
+  color: #FEB06A;
+}
+
+.language-options:active, 
+.language-options:hover, 
+.language-options:focus {
+  background-color: #FEB06A;
+  color: #FBF6F3;
+}
 
 #dropdown-language {
-    color: #FBF6F3;
-    transition: color 0.3s ease-in-out;
+  color: #FBF6F3;
+  transition: color 0.3s ease-in-out;
 }
 
 #dropdown-language:hover {
-    color: #FEB06A;
+  color: #FEB06A;
 }
 
 #dropdown-language.show {
-    color: #FEB06A;
+  color: #FEB06A;
 }
 
 #dropdown-language:not(.show):not(:hover) {
-    color: #FBF6F3;
+  color: #FBF6F3;
 }
 
+.rules-menu:focus, .icon-menu:focus {
+  outline: none !important;
+  box-shadow: none !important;
+}
+
+.icon-menu svg {
+  fill: #FBF6F3 !important;
+  transition: fill 0.3s ease-in-out;
+}
+
+.icon-menu:hover svg {
+  fill: #FEB06A !important;
+}
+
+.rules-menu {
+  color: #FBF6F3 !important; 
+  text-decoration: none;
+  transition: color 0.3s ease-in-out;
+}
+
+.rules-menu:hover {
+  color: #FEB06A !important; 
+}
 
-  
\ No newline at end of file
+.rules-menu:focus {
+  outline: none !important; 
+  box-shadow: none !important;
+}
+
+.rules-menu:active {
+  color: #FEB06A !important; 
+}

From 821388f28d8062cee7146af9ff7f65806bf2c94c Mon Sep 17 00:00:00 2001
From: uo287543 <uo287543@uniovi.es>
Date: Tue, 4 Mar 2025 22:59:49 +0100
Subject: [PATCH 19/21] mensaje prueba1

---
 webapp/src/App.test.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/webapp/src/App.test.js b/webapp/src/App.test.js
index d418d5c3..5972628d 100644
--- a/webapp/src/App.test.js
+++ b/webapp/src/App.test.js
@@ -3,8 +3,6 @@ import App from './App';
 
 test('renders welcome message', () => {
   render(<App />);
-  const welcomeMessage = screen.getByText(/Welcome to the 2025 edition of the Software Architecture course/i);
+  const welcomeMessage = screen.getByText(/Bienvenido a WiChat/i);
   expect(welcomeMessage).toBeInTheDocument();
 });
-
-

From bf8adbe0a70f12b20839cee6ff4cdfea2a2c6fc8 Mon Sep 17 00:00:00 2001
From: uo287543 <uo287543@uniovi.es>
Date: Tue, 4 Mar 2025 23:09:31 +0100
Subject: [PATCH 20/21] prueba test mensaje2

---
 webapp/src/App.test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/src/App.test.js b/webapp/src/App.test.js
index 5972628d..923e670b 100644
--- a/webapp/src/App.test.js
+++ b/webapp/src/App.test.js
@@ -3,6 +3,6 @@ import App from './App';
 
 test('renders welcome message', () => {
   render(<App />);
-  const welcomeMessage = screen.getByText(/Bienvenido a WiChat/i);
+  const welcomeMessage = screen.getByText(/Bienvenido a/i);
   expect(welcomeMessage).toBeInTheDocument();
 });

From 4f01d29215c18f11a47b59f33c16b61e165718e2 Mon Sep 17 00:00:00 2001
From: uo287543 <uo287543@uniovi.es>
Date: Tue, 4 Mar 2025 23:42:05 +0100
Subject: [PATCH 21/21] =?UTF-8?q?cambio=20icono=20salir=20barra=20navegaci?=
 =?UTF-8?q?=C3=B3n?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 webapp/src/App.test.js          | 4 +++-
 webapp/src/components/NavBar.js | 5 +++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/webapp/src/App.test.js b/webapp/src/App.test.js
index 923e670b..d418d5c3 100644
--- a/webapp/src/App.test.js
+++ b/webapp/src/App.test.js
@@ -3,6 +3,8 @@ import App from './App';
 
 test('renders welcome message', () => {
   render(<App />);
-  const welcomeMessage = screen.getByText(/Bienvenido a/i);
+  const welcomeMessage = screen.getByText(/Welcome to the 2025 edition of the Software Architecture course/i);
   expect(welcomeMessage).toBeInTheDocument();
 });
+
+
diff --git a/webapp/src/components/NavBar.js b/webapp/src/components/NavBar.js
index a842d200..24760ffa 100644
--- a/webapp/src/components/NavBar.js
+++ b/webapp/src/components/NavBar.js
@@ -1,6 +1,7 @@
 import React from "react";
 import { Navbar, Nav, Container, Dropdown } from "react-bootstrap";
-import { VscAccount, VscArrowRight } from "react-icons/vsc";
+import { VscAccount } from "react-icons/vsc";
+import { GoSignOut } from "react-icons/go";
 import i18n from "../i18n/i18next";
 import { useTranslation } from "react-i18next";
 import "./nav.css";
@@ -33,7 +34,7 @@ const NavBar = () => {
 
           <Nav.Link href="#" className="rules-menu">{t("rules-menu")}</Nav.Link>
           <Nav.Link href="#" className="icon-menu"><VscAccount size={30} /></Nav.Link>
-          <Nav.Link href="#" className="icon-menu"><VscArrowRight size={30} /></Nav.Link>
+          <Nav.Link href="#" className="icon-menu"><GoSignOut size={30} /></Nav.Link>
         </Nav>
       </Container>
     </Navbar>