diff --git a/docs/images/06-generateQuestion.png b/docs/images/06-generateQuestion.png
new file mode 100644
index 00000000..503be755
Binary files /dev/null and b/docs/images/06-generateQuestion.png differ
diff --git a/docs/images/06-loginSecuencia.png b/docs/images/06-loginSecuencia.png
index 38478165..62cc2636 100644
Binary files a/docs/images/06-loginSecuencia.png and b/docs/images/06-loginSecuencia.png differ
diff --git a/docs/images/06-nextQuestion.png b/docs/images/06-nextQuestion.png
deleted file mode 100644
index 8b4ea2c5..00000000
Binary files a/docs/images/06-nextQuestion.png and /dev/null differ
diff --git a/docs/images/06-registerSecuencia.png b/docs/images/06-registerSecuencia.png
index b98e49b6..082e9ad5 100644
Binary files a/docs/images/06-registerSecuencia.png and b/docs/images/06-registerSecuencia.png differ
diff --git a/docs/images/07-diagramaDespliegue.png b/docs/images/07-diagramaDespliegue.png
index 9bb7a0bf..8f5847b1 100644
Binary files a/docs/images/07-diagramaDespliegue.png and b/docs/images/07-diagramaDespliegue.png differ
diff --git "a/docs/images/Sin t\303\255tulo.png" "b/docs/images/Sin t\303\255tulo.png"
deleted file mode 100644
index 6f99ad3f..00000000
Binary files "a/docs/images/Sin t\303\255tulo.png" and /dev/null differ
diff --git a/docs/src/06_runtime_view.adoc b/docs/src/06_runtime_view.adoc
index ad9ee1dc..76534968 100644
--- a/docs/src/06_runtime_view.adoc
+++ b/docs/src/06_runtime_view.adoc
@@ -32,13 +32,10 @@ image::06-loginSecuencia.png["Login secuence diagram image"]
 
 === Request a question
 
-image::06-nextQuestion.png["NextQuestion secuence diagram image"] 
-
-1. The user asks for a new question
-2. The app redirects that request to the QuestionGenerator
-3. The QuestionGenerator generates a heather for the question
-4. The QuestionGenerator requests the correct answer to WikiData
-5. WikiData sends that answer data
-6. The QuestionGenerator builds the question with the answer and wrong options
-7. The built question is sent to the app
-8. The app shows the question to the User
\ No newline at end of file
+image::06-generateQuestion.png["NextQuestion secuence diagram image"] 
+
+1. The QuestionService wants to generate a question
+2. It requests all the necesary info to build a question to WikiData
+3. WikiData responds with the requested data
+4. The QuestionService builds the question with the data recieved
+5. Finally the QuestionService writes the new question in the QuestionsDB
\ No newline at end of file
diff --git a/docs/src/07_deployment_view.adoc b/docs/src/07_deployment_view.adoc
index 04efab78..1d380c5d 100644
--- a/docs/src/07_deployment_view.adoc
+++ b/docs/src/07_deployment_view.adoc
@@ -6,11 +6,11 @@ ifndef::imagesdir[:imagesdir: ../images]
 == Deployment View
 
 
-image::07-diagramaDespliegue.png["Building Block general diagram"] 
+image::07-diagramaDespliegue.PNG["Building Block general diagram"] 
 
 Basically when a user wants to use the application, using his web browser
-he can connect to the application server where the web app will use some
-services also alocated there such as the QuestionGenerator or the LoginManager.
-Also these services make use of the WikiData API and database and also of 
-a database unique for the application to save things as player statistics
-or info of them.
\ No newline at end of file
+he can connect to the application server that is a VM in hosted in Azure
+orientated to microservices. That means that all the modules inside it
+are dockerized in a container. The QuestionGenerator interacts with WikiData
+throught their API and we have also two MongoDB databases one for users
+and another to store questions.
\ No newline at end of file
diff --git a/webapp/src/components/AnswersBlock.jsx b/webapp/src/components/AnswersBlock.jsx
index e031e002..701843df 100644
--- a/webapp/src/components/AnswersBlock.jsx
+++ b/webapp/src/components/AnswersBlock.jsx
@@ -8,6 +8,14 @@ export function AnswersBlock({ respuestas, correcta }){
 
     let respuestasCopy = respuestas;
 
+    //Colores de los botones para que tengan orden random
+    const colorsArray = ["#FFD743","#D773A2","#07BB9C","#A06AB4"];
+    //Baraja con algoritmo de Fisher-Yates los colores
+    for (let i = colorsArray.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [colorsArray[i], colorsArray[j]] = [colorsArray[j], colorsArray[i]];
+    }
+
     useEffect(() => {
         //Baraja con algoritmo de Fisher-Yates
         for (let i = respuestasCopy.length - 1; i > 0; i--) {
@@ -30,7 +38,7 @@ export function AnswersBlock({ respuestas, correcta }){
     return (
         <Box display="grid" flex="1" gridTemplateColumns="repeat(2,1fr)" gridColumnGap="2em" padding="4em" alignItems="center">
             {respuestasAleatorizadas.map((respuesta, index) => (
-                <AnswerButton key={index} text={respuesta} colorFondo={"#A06AB4"} onClick={() => handleButtonClick(respuesta)} />
+                <AnswerButton key={index} text={respuesta} colorFondo={colorsArray[index]} onClick={() => handleButtonClick(respuesta)} />
             ))}
         </Box>
     );
diff --git a/webapp/src/components/Login.js b/webapp/src/components/Login.js
index 3e29764a..a281a6a1 100644
--- a/webapp/src/components/Login.js
+++ b/webapp/src/components/Login.js
@@ -86,6 +86,9 @@ const Login = ({ startGame }) => {
               {error && (
                 <Snackbar open={!!error} autoHideDuration={6000} onClose={() => setError('')} message={`Error: ${error}`} />
               )}
+              <Button variant="contained" color="primary" onClick={handleButtonClick}>
+                Empieza el juego
+              </Button>
             </div>
           )}
         </Container>
diff --git a/webapp/src/components/QuestionArea.jsx b/webapp/src/components/QuestionArea.jsx
index 5281df2b..d9d274b5 100644
--- a/webapp/src/components/QuestionArea.jsx
+++ b/webapp/src/components/QuestionArea.jsx
@@ -13,7 +13,7 @@ export function QuestionArea(){
   const [respuestas, setRespuestas] = useState([]);
   // Estado que almacena la correcta
   const [correcta, setCorrecta] = useState();
-/**
+
     // Función para llamar al servicio y obtener los datos de la pregunta
   const fetchQuestionData = async () => {
       try {          
@@ -21,7 +21,8 @@ export function QuestionArea(){
           const response = await axios.get(`${apiEndpoint}/getQuestion`);
           const data = response.data;
           setQuestionData(data); // Actualizar el estado con los datos de la pregunta obtenidos del servicio
-
+          //Meto la correcta
+          setCorrecta(data.correcta);
           //calcular respuestas 
           const respuestasArray = [data.correcta, data.respuestasIncorrecta1, data.respuestasIncorrecta2, data.respuestasIncorrecta3];
           setRespuestas(respuestasArray);
@@ -35,8 +36,8 @@ export function QuestionArea(){
       useEffect(() => {
         fetchQuestionData();
     }, []); // El array vacío asegura que esto solo se ejecute una vez al montar el componente
-*/
 
+/** PARA DEPURACIÓN Y LOCAL
 useEffect(() => {
   const dataDev = {
     "pregunta": "What is the capital of France?",
@@ -56,9 +57,7 @@ useEffect(() => {
   setRespuestas(respuestasDev);
   setCorrecta(correctaDev);
 }, []);
-
-    //const respuestas = [questionJson.correcta,questionJson.respuestasIncorrecta1,questionJson.respuestasIncorrecta2,questionJson.respuestasIncorrecta3];
-
+*/
 
     return(
         <Box alignContent="center" bg="#0000004d" display="flex" flexDir="column"