diff --git a/views/chat.php b/views/chat.php
index a54bf9d..bc13423 100644
--- a/views/chat.php
+++ b/views/chat.php
@@ -17,18 +17,20 @@
 </script>
 <style>
     .message {
-        padding: -10px;
-        border-radius: 25px;
-        margin-bottom: 4px;
+        padding: 5px !important;
+        border-radius: 5px !important;
+        margin-bottom: 4px !important;
+        vertical-align: text-bottom !important;
+        position:relative !important;
     }
 
     .other-message {
-        background: red;
-        color: aliceblue;
+        background: #adacb2ff;
+        color: black;
     }
 
     .my-message {
-        background: blue;
+        background: #a21858ff;
         color: aliceblue;
     }
 
@@ -39,27 +41,53 @@
     }
 
     .header1 {
-        background: gray;
+        background: #b2003eff;
         padding-right: 0;
         position: sticky;
         border-radius: 20px;
         top: 0;
         left: 0;
         width: 100%;
-        z-index: 10;
+        z-index: 20;
         text-align: center;
+        color: #ffffff;
     }
 
     .footer {
-        background: gray;
-        color: #ffffff;
+        background: transparent;
+        /* color: #ffffff; */
         font-size: 13px;
         bottom: 0px;
         position: sticky;
         left: 0px;
         width: 100%;
         z-index: 10;
-        border-top: 3px solid #ffffff;
+        /*  border-top: 3px solid #ffffff; */
+    }
+
+    .footer2 {
+        position: sticky;
+        bottom: 0px;
+    }
+
+    .size-t {
+        font-size: 26px !important;
+    }
+
+    .size-22 {
+        font-size: 22px !important;
+    }
+
+    .color-primary {
+        color: #fafafa;
+        background: #b2003eff;
+    }
+
+    .color-p {
+        color: #b2003eff !important;
+    }
+    .color-s {
+        color: #adacb2ff !important;
     }
 </style>
 <script>
@@ -102,13 +130,13 @@
             } else {
                 var html = "";
                 inicio = `
-                    <div style="height: 200px;">
-                        <div class="text-center" style="margin-top: 30%; ">
-                            <h4>Bienvenido al chat grupal del equipo `+nameGroup+`</h4>
+                    <div style="height: 100px;">
+                        <div class="text-center" style="margin-top: 20%; ">
+                            <h4 class="size-22" >Bienvenido al chat grupal del equipo ` + nameGroup + `</h4>
                         </div>
                     </div>
                     `;
-                    html+=inicio;
+                html += inicio;
                 messages.data.messages.forEach(msj => {
                     var fecha = (new Date(msj.date));
                     var fechaOld = (new Date(msj.dateOld));
@@ -116,9 +144,10 @@
                     var item1 = "";
                     if (fecha.toDateString() != fechaOld.toDateString()) {
                         item1 = `
-              <div class="row">
+                        
+                        <div class="row">
                 <div class="col-12">
-                  <p class="text-center">` + fecha.toLocaleDateString() + `</p>
+                  <p class="text-center color-p">` + fecha.toLocaleDateString() + `</p>
                 </div>
               </div>
               `;
@@ -128,9 +157,9 @@
                     if (msj.name != myName) {
                         item +=
                             `
-                <div class="col-9 message other-message">
-                  <b>` + msj.name + `</b><br>
-                  <span>` + msj.content + `</span>
+                <div class="col-11 message other-message">
+                  <b class="color-p">` + msj.name + `</b><br>
+                  <span class="text-justify">` + msj.content + `</span>
                   <div class="time" text-right>
                     ` + fecha.toLocaleTimeString() + `
                   </div>
@@ -140,8 +169,8 @@
                         item +=
                             `
                 <div class="col-3"></div>
-                <div class="col-9 message my-message "">
-                  <b>T&uacute;</b><br>
+                <div class="col-9 message my-message">
+                  <b class="color-s">T&uacute;</b><br>
                   <span>` + msj.content + `</span>
                   <div class="time" text-right>
                     ` + fecha.toLocaleTimeString() + `
@@ -162,7 +191,7 @@
       </div>
     </div>
         `;
-                    
+
                     html += msjHtml;
                 });
                 document.getElementById('titulo').innerText = "Equipo " + nameGroup;
@@ -206,16 +235,16 @@
 
 <div id="main">
     <div class="header1">
-    <h1  id="titulo"></h1>
+        <h1 class="size-t" id="titulo"></h1>
     </div>
-    
+    <br>
     <div id="contenedor"></div>
-    
 
-    <div class="footer" id="footer">
+
+    <div class="footer2" id="footer">
         <div class="input-group">
             <input class="form-control" type="text" placeholder="Escribe el mensaje aquí ..." id="text" value="">
-            <button class="btn btn-info" id="btn_send" onclick="sendMsj()">Enviar</button>
+            <button class="btn color-primary" id="btn_send" onclick="sendMsj()">Enviar</button>
         </div>
 
     </div>

diff --git a/views/chat.php b/views/chat.php
index a54bf9d..bc13423 100644
--- a/views/chat.php
+++ b/views/chat.php
@@ -17,18 +17,20 @@
 </script>
 <style>
     .message {
-        padding: -10px;
-        border-radius: 25px;
-        margin-bottom: 4px;
+        padding: 5px !important;
+        border-radius: 5px !important;
+        margin-bottom: 4px !important;
+        vertical-align: text-bottom !important;
+        position:relative !important;
     }
 
     .other-message {
-        background: red;
-        color: aliceblue;
+        background: #adacb2ff;
+        color: black;
     }
 
     .my-message {
-        background: blue;
+        background: #a21858ff;
         color: aliceblue;
     }
 
@@ -39,27 +41,53 @@
     }
 
     .header1 {
-        background: gray;
+        background: #b2003eff;
         padding-right: 0;
         position: sticky;
         border-radius: 20px;
         top: 0;
         left: 0;
         width: 100%;
-        z-index: 10;
+        z-index: 20;
         text-align: center;
+        color: #ffffff;
     }
 
     .footer {
-        background: gray;
-        color: #ffffff;
+        background: transparent;
+        /* color: #ffffff; */
         font-size: 13px;
         bottom: 0px;
         position: sticky;
         left: 0px;
         width: 100%;
         z-index: 10;
-        border-top: 3px solid #ffffff;
+        /*  border-top: 3px solid #ffffff; */
+    }
+
+    .footer2 {
+        position: sticky;
+        bottom: 0px;
+    }
+
+    .size-t {
+        font-size: 26px !important;
+    }
+
+    .size-22 {
+        font-size: 22px !important;
+    }
+
+    .color-primary {
+        color: #fafafa;
+        background: #b2003eff;
+    }
+
+    .color-p {
+        color: #b2003eff !important;
+    }
+    .color-s {
+        color: #adacb2ff !important;
     }
 </style>
 <script>
@@ -102,13 +130,13 @@
             } else {
                 var html = "";
                 inicio = `
-                    <div style="height: 200px;">
-                        <div class="text-center" style="margin-top: 30%; ">
-                            <h4>Bienvenido al chat grupal del equipo `+nameGroup+`</h4>
+                    <div style="height: 100px;">
+                        <div class="text-center" style="margin-top: 20%; ">
+                            <h4 class="size-22" >Bienvenido al chat grupal del equipo ` + nameGroup + `</h4>
                         </div>
                     </div>
                     `;
-                    html+=inicio;
+                html += inicio;
                 messages.data.messages.forEach(msj => {
                     var fecha = (new Date(msj.date));
                     var fechaOld = (new Date(msj.dateOld));
@@ -116,9 +144,10 @@
                     var item1 = "";
                     if (fecha.toDateString() != fechaOld.toDateString()) {
                         item1 = `
-              <div class="row">
+                        
+                        <div class="row">
                 <div class="col-12">
-                  <p class="text-center">` + fecha.toLocaleDateString() + `</p>
+                  <p class="text-center color-p">` + fecha.toLocaleDateString() + `</p>
                 </div>
               </div>
               `;
@@ -128,9 +157,9 @@
                     if (msj.name != myName) {
                         item +=
                             `
-                <div class="col-9 message other-message">
-                  <b>` + msj.name + `</b><br>
-                  <span>` + msj.content + `</span>
+                <div class="col-11 message other-message">
+                  <b class="color-p">` + msj.name + `</b><br>
+                  <span class="text-justify">` + msj.content + `</span>
                   <div class="time" text-right>
                     ` + fecha.toLocaleTimeString() + `
                   </div>
@@ -140,8 +169,8 @@
                         item +=
                             `
                 <div class="col-3"></div>
-                <div class="col-9 message my-message "">
-                  <b>T&uacute;</b><br>
+                <div class="col-9 message my-message">
+                  <b class="color-s">T&uacute;</b><br>
                   <span>` + msj.content + `</span>
                   <div class="time" text-right>
                     ` + fecha.toLocaleTimeString() + `
@@ -162,7 +191,7 @@
       </div>
     </div>
         `;
-                    
+
                     html += msjHtml;
                 });
                 document.getElementById('titulo').innerText = "Equipo " + nameGroup;
@@ -206,16 +235,16 @@
 
 <div id="main">
     <div class="header1">
-    <h1  id="titulo"></h1>
+        <h1 class="size-t" id="titulo"></h1>
     </div>
-    
+    <br>
     <div id="contenedor"></div>
-    
 
-    <div class="footer" id="footer">
+
+    <div class="footer2" id="footer">
         <div class="input-group">
             <input class="form-control" type="text" placeholder="Escribe el mensaje aquí ..." id="text" value="">
-            <button class="btn btn-info" id="btn_send" onclick="sendMsj()">Enviar</button>
+            <button class="btn color-primary" id="btn_send" onclick="sendMsj()">Enviar</button>
         </div>
 
     </div>
diff --git a/views/juego.php b/views/juego.php
index eeb4624..5d1dd8e 100644
--- a/views/juego.php
+++ b/views/juego.php
@@ -3,7 +3,35 @@
         background-size: cover;
         background-position: center;
         background-attachment: fixed;
-        background-image: url(<?php echo $url; ?>/img/img_wd/bg_dia.png);
+        /* background-image: url(<?php echo $url; ?>/img/img_wd/bg_dia.png); */
+    }
+
+    .text-j {
+        text-align: justify !important;
+    }
+
+    .color-p {
+        color: #b2003eff !important;
+    }
+
+    .color-s {
+        color: #adacb2ff !important;
+    }
+
+    .pie {
+        float: right;
+        font-size: 15px;
+    }
+
+    .btn-send {
+        border-radius: 30px;
+        margin-bottom: 15px;
+        padding: 10px 30px;
+        color: #fafafa;
+        font-size: 20px;
+        background-color: #b2003eff;
+        border: 0;
+        font-family: S-Core-CoreSansBold;
     }
 </style>
 
@@ -20,9 +48,9 @@
 $juego = mysqli_fetch_array($query);
 
 $moderador = true;
-if ($data['rol'] == "JUGADOR") {
+/* if ($data['rol'] == "JUGADOR") {
     $moderador = false;
-}
+} */
 
 if ($moderador) {
     if (isset($_POST["btn_form"])) {
@@ -55,14 +83,14 @@
             echo "<script>console.log($insertar);</script>";
             if ($insertar) {
 
-                echo "<script>alert('Archivo Subido Correctamente.')</script>";
+                echo "<script>alert('El archivo se subió correctamente.')</script>";
             } else {
                 print_r($insertar);
                 echo "<script>alert('Ha fallado la subida, reintente nuevamente.')</script>";
             }
             // Sie el usuario no selecciona ninguna imagen
         } else {
-            echo "<script>alert('Por favor seleccione imagen a subir.')</script>";
+            echo "<script>alert('Por favor seleccione la imagen a subir.')</script>";
         }
     }
 }
@@ -74,11 +102,35 @@
 
 
     <div class="row">
-        <div class="col-<?php echo $moderador ? 8 : 4; ?>" style="height: 500px;overflow: scroll; overflow-x: hidden;">
-            <h2><?php echo $juego['nombre']; ?> </h2>
-            <span> <?php echo $juego['descripcion']; ?> </span><br>
-            <b>visita a:</b> <?php echo $juego['lugar']; ?>
-            <h3>Preguntas</h3>
+        <div class="col-<?php echo $moderador ? 6 : 3; ?>" style="height: 500px; overflow-x: hidden;">
+            <h2 class="text-center color-p"><?php echo $juego['nombre']; ?> </h2>
+            <span style="text-align: justify;"> <?php echo $juego['descripcion']; ?> </span>
+            <br>
+            <br>
+            <b class="pie text-right color-p">Visita a: <?php echo $juego['lugar']; ?></b>
+        </div>
+        <?php
+        if (!$moderador) {
+        ?>
+
+            <div class="col-6">
+                <!-- <iframe width="100%" height="500px" style="border:0" loading="lazy" allowfullscreen src="https://www.google.com/maps/embed/v1/place?key=AIzaSyAw_VEeJAY7R9kuABvgz9e9CiKogTW3MFc&q=<?php echo $juego['lugar']; ?>">
+                </iframe> -->
+
+                <?php include("mapa.php"); ?>
+            </div>
+        <?php
+        }
+        ?>
+        <div class="col-<?php echo $moderador ? 6 : 3; ?>" style="height: 500px; overflow: scroll; overflow-x: hidden;">
+            <?php include("chat.php"); ?>
+        </div>
+
+    </div>
+    <br>
+    <div class="row">
+        <div class="col-6" style="padding-left: 40px;">
+            <h3 class="color-p text-center">Preguntas</h3>
             <form action="" method="post" enctype="multipart/form-data">
                 <div class="row">
                     <?php
@@ -90,7 +142,7 @@
 
 
 
-                        echo "<b>" . $pregunta['pregunta'] . "</b><br>";
+                        echo '<b class="text-center">' . $pregunta['pregunta'] . "</b><br>";
                         if ($moderador) {
                     ?>
                             <div class="form-check">
@@ -161,34 +213,16 @@
                 ?>
             </form>
         </div>
-        <?php
-        if (!$moderador) {
-        ?>
+        <div class="col-6">
+            <iframe width="560" height="315" src="https://www.youtube.com/embed/sfp1kPXpa-o" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowautoplay allowfullscreen></iframe>
 
-            <div class="col-4">
-                <!-- <iframe width="100%" height="500px" style="border:0" loading="lazy" allowfullscreen src="https://www.google.com/maps/embed/v1/place?key=AIzaSyAw_VEeJAY7R9kuABvgz9e9CiKogTW3MFc&q=<?php echo $juego['lugar']; ?>">
-                </iframe> -->
-
-                <?php include("mapa.php"); ?>
-            </div>
-        <?php
-        }
-        ?>
-        <div class="col-4" style="height: 500px; overflow: scroll; overflow-x: hidden;">
-            <?php include("chat.php"); ?>
         </div>
 
-        <div>
-        <iframe width="560" height="315" src="https://www.youtube.com/embed/sfp1kPXpa-o" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"  allowautoplay allowfullscreen></iframe>
-        </div>
-
-
-
     </div>
     <div style="text-align: right; margin-top: 5px;">
         <!-- <a href="<?php echo $url . '/juego/' . ($id + 1); ?>"> -->
-        <button type="button" onclick="avanzar(<?php echo $id; ?>)" class="btn btn-warning " style="border-radius: 30px; margin-bottom: 15px; padding: 10px 30px; color: #d91e49; font-size: 20px; background-color: #ffea00; border: 0; font-family: S-Core-CoreSansBold;">
-            Siguiente Juego
+        <button type="button" onclick="avanzar(<?php echo $id; ?>)" class="btn-send">
+            Siguiente juego
         </button>
         <!-- </a> -->
     </div>
@@ -204,7 +238,7 @@
         <?php
         } else {
         ?>
-            alert('No se ha terminado de responder esta seccion');
+            alert('No se ha terminado de responder esta sección');
         <?php
         }
         ?>

diff --git a/views/chat.php b/views/chat.php
index a54bf9d..bc13423 100644
--- a/views/chat.php
+++ b/views/chat.php
@@ -17,18 +17,20 @@
 </script>
 <style>
     .message {
-        padding: -10px;
-        border-radius: 25px;
-        margin-bottom: 4px;
+        padding: 5px !important;
+        border-radius: 5px !important;
+        margin-bottom: 4px !important;
+        vertical-align: text-bottom !important;
+        position:relative !important;
     }
 
     .other-message {
-        background: red;
-        color: aliceblue;
+        background: #adacb2ff;
+        color: black;
     }
 
     .my-message {
-        background: blue;
+        background: #a21858ff;
         color: aliceblue;
     }
 
@@ -39,27 +41,53 @@
     }
 
     .header1 {
-        background: gray;
+        background: #b2003eff;
         padding-right: 0;
         position: sticky;
         border-radius: 20px;
         top: 0;
         left: 0;
         width: 100%;
-        z-index: 10;
+        z-index: 20;
         text-align: center;
+        color: #ffffff;
     }
 
     .footer {
-        background: gray;
-        color: #ffffff;
+        background: transparent;
+        /* color: #ffffff; */
         font-size: 13px;
         bottom: 0px;
         position: sticky;
         left: 0px;
         width: 100%;
         z-index: 10;
-        border-top: 3px solid #ffffff;
+        /*  border-top: 3px solid #ffffff; */
+    }
+
+    .footer2 {
+        position: sticky;
+        bottom: 0px;
+    }
+
+    .size-t {
+        font-size: 26px !important;
+    }
+
+    .size-22 {
+        font-size: 22px !important;
+    }
+
+    .color-primary {
+        color: #fafafa;
+        background: #b2003eff;
+    }
+
+    .color-p {
+        color: #b2003eff !important;
+    }
+    .color-s {
+        color: #adacb2ff !important;
     }
 </style>
 <script>
@@ -102,13 +130,13 @@
             } else {
                 var html = "";
                 inicio = `
-                    <div style="height: 200px;">
-                        <div class="text-center" style="margin-top: 30%; ">
-                            <h4>Bienvenido al chat grupal del equipo `+nameGroup+`</h4>
+                    <div style="height: 100px;">
+                        <div class="text-center" style="margin-top: 20%; ">
+                            <h4 class="size-22" >Bienvenido al chat grupal del equipo ` + nameGroup + `</h4>
                         </div>
                     </div>
                     `;
-                    html+=inicio;
+                html += inicio;
                 messages.data.messages.forEach(msj => {
                     var fecha = (new Date(msj.date));
                     var fechaOld = (new Date(msj.dateOld));
@@ -116,9 +144,10 @@
                     var item1 = "";
                     if (fecha.toDateString() != fechaOld.toDateString()) {
                         item1 = `
-              <div class="row">
+                        
+                        <div class="row">
                 <div class="col-12">
-                  <p class="text-center">` + fecha.toLocaleDateString() + `</p>
+                  <p class="text-center color-p">` + fecha.toLocaleDateString() + `</p>
                 </div>
               </div>
               `;
@@ -128,9 +157,9 @@
                     if (msj.name != myName) {
                         item +=
                             `
-                <div class="col-9 message other-message">
-                  <b>` + msj.name + `</b><br>
-                  <span>` + msj.content + `</span>
+                <div class="col-11 message other-message">
+                  <b class="color-p">` + msj.name + `</b><br>
+                  <span class="text-justify">` + msj.content + `</span>
                   <div class="time" text-right>
                     ` + fecha.toLocaleTimeString() + `
                   </div>
@@ -140,8 +169,8 @@
                         item +=
                             `
                 <div class="col-3"></div>
-                <div class="col-9 message my-message "">
-                  <b>T&uacute;</b><br>
+                <div class="col-9 message my-message">
+                  <b class="color-s">T&uacute;</b><br>
                   <span>` + msj.content + `</span>
                   <div class="time" text-right>
                     ` + fecha.toLocaleTimeString() + `
@@ -162,7 +191,7 @@
       </div>
     </div>
         `;
-                    
+
                     html += msjHtml;
                 });
                 document.getElementById('titulo').innerText = "Equipo " + nameGroup;
@@ -206,16 +235,16 @@
 
 <div id="main">
     <div class="header1">
-    <h1  id="titulo"></h1>
+        <h1 class="size-t" id="titulo"></h1>
     </div>
-    
+    <br>
     <div id="contenedor"></div>
-    
 
-    <div class="footer" id="footer">
+
+    <div class="footer2" id="footer">
         <div class="input-group">
             <input class="form-control" type="text" placeholder="Escribe el mensaje aquí ..." id="text" value="">
-            <button class="btn btn-info" id="btn_send" onclick="sendMsj()">Enviar</button>
+            <button class="btn color-primary" id="btn_send" onclick="sendMsj()">Enviar</button>
         </div>
 
     </div>
diff --git a/views/juego.php b/views/juego.php
index eeb4624..5d1dd8e 100644
--- a/views/juego.php
+++ b/views/juego.php
@@ -3,7 +3,35 @@
         background-size: cover;
         background-position: center;
         background-attachment: fixed;
-        background-image: url(<?php echo $url; ?>/img/img_wd/bg_dia.png);
+        /* background-image: url(<?php echo $url; ?>/img/img_wd/bg_dia.png); */
+    }
+
+    .text-j {
+        text-align: justify !important;
+    }
+
+    .color-p {
+        color: #b2003eff !important;
+    }
+
+    .color-s {
+        color: #adacb2ff !important;
+    }
+
+    .pie {
+        float: right;
+        font-size: 15px;
+    }
+
+    .btn-send {
+        border-radius: 30px;
+        margin-bottom: 15px;
+        padding: 10px 30px;
+        color: #fafafa;
+        font-size: 20px;
+        background-color: #b2003eff;
+        border: 0;
+        font-family: S-Core-CoreSansBold;
     }
 </style>
 
@@ -20,9 +48,9 @@
 $juego = mysqli_fetch_array($query);
 
 $moderador = true;
-if ($data['rol'] == "JUGADOR") {
+/* if ($data['rol'] == "JUGADOR") {
     $moderador = false;
-}
+} */
 
 if ($moderador) {
     if (isset($_POST["btn_form"])) {
@@ -55,14 +83,14 @@
             echo "<script>console.log($insertar);</script>";
             if ($insertar) {
 
-                echo "<script>alert('Archivo Subido Correctamente.')</script>";
+                echo "<script>alert('El archivo se subió correctamente.')</script>";
             } else {
                 print_r($insertar);
                 echo "<script>alert('Ha fallado la subida, reintente nuevamente.')</script>";
             }
             // Sie el usuario no selecciona ninguna imagen
         } else {
-            echo "<script>alert('Por favor seleccione imagen a subir.')</script>";
+            echo "<script>alert('Por favor seleccione la imagen a subir.')</script>";
         }
     }
 }
@@ -74,11 +102,35 @@
 
 
     <div class="row">
-        <div class="col-<?php echo $moderador ? 8 : 4; ?>" style="height: 500px;overflow: scroll; overflow-x: hidden;">
-            <h2><?php echo $juego['nombre']; ?> </h2>
-            <span> <?php echo $juego['descripcion']; ?> </span><br>
-            <b>visita a:</b> <?php echo $juego['lugar']; ?>
-            <h3>Preguntas</h3>
+        <div class="col-<?php echo $moderador ? 6 : 3; ?>" style="height: 500px; overflow-x: hidden;">
+            <h2 class="text-center color-p"><?php echo $juego['nombre']; ?> </h2>
+            <span style="text-align: justify;"> <?php echo $juego['descripcion']; ?> </span>
+            <br>
+            <br>
+            <b class="pie text-right color-p">Visita a: <?php echo $juego['lugar']; ?></b>
+        </div>
+        <?php
+        if (!$moderador) {
+        ?>
+
+            <div class="col-6">
+                <!-- <iframe width="100%" height="500px" style="border:0" loading="lazy" allowfullscreen src="https://www.google.com/maps/embed/v1/place?key=AIzaSyAw_VEeJAY7R9kuABvgz9e9CiKogTW3MFc&q=<?php echo $juego['lugar']; ?>">
+                </iframe> -->
+
+                <?php include("mapa.php"); ?>
+            </div>
+        <?php
+        }
+        ?>
+        <div class="col-<?php echo $moderador ? 6 : 3; ?>" style="height: 500px; overflow: scroll; overflow-x: hidden;">
+            <?php include("chat.php"); ?>
+        </div>
+
+    </div>
+    <br>
+    <div class="row">
+        <div class="col-6" style="padding-left: 40px;">
+            <h3 class="color-p text-center">Preguntas</h3>
             <form action="" method="post" enctype="multipart/form-data">
                 <div class="row">
                     <?php
@@ -90,7 +142,7 @@
 
 
 
-                        echo "<b>" . $pregunta['pregunta'] . "</b><br>";
+                        echo '<b class="text-center">' . $pregunta['pregunta'] . "</b><br>";
                         if ($moderador) {
                     ?>
                             <div class="form-check">
@@ -161,34 +213,16 @@
                 ?>
             </form>
         </div>
-        <?php
-        if (!$moderador) {
-        ?>
+        <div class="col-6">
+            <iframe width="560" height="315" src="https://www.youtube.com/embed/sfp1kPXpa-o" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowautoplay allowfullscreen></iframe>
 
-            <div class="col-4">
-                <!-- <iframe width="100%" height="500px" style="border:0" loading="lazy" allowfullscreen src="https://www.google.com/maps/embed/v1/place?key=AIzaSyAw_VEeJAY7R9kuABvgz9e9CiKogTW3MFc&q=<?php echo $juego['lugar']; ?>">
-                </iframe> -->
-
-                <?php include("mapa.php"); ?>
-            </div>
-        <?php
-        }
-        ?>
-        <div class="col-4" style="height: 500px; overflow: scroll; overflow-x: hidden;">
-            <?php include("chat.php"); ?>
         </div>
 
-        <div>
-        <iframe width="560" height="315" src="https://www.youtube.com/embed/sfp1kPXpa-o" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"  allowautoplay allowfullscreen></iframe>
-        </div>
-
-
-
     </div>
     <div style="text-align: right; margin-top: 5px;">
         <!-- <a href="<?php echo $url . '/juego/' . ($id + 1); ?>"> -->
-        <button type="button" onclick="avanzar(<?php echo $id; ?>)" class="btn btn-warning " style="border-radius: 30px; margin-bottom: 15px; padding: 10px 30px; color: #d91e49; font-size: 20px; background-color: #ffea00; border: 0; font-family: S-Core-CoreSansBold;">
-            Siguiente Juego
+        <button type="button" onclick="avanzar(<?php echo $id; ?>)" class="btn-send">
+            Siguiente juego
         </button>
         <!-- </a> -->
     </div>
@@ -204,7 +238,7 @@
         <?php
         } else {
         ?>
-            alert('No se ha terminado de responder esta seccion');
+            alert('No se ha terminado de responder esta sección');
         <?php
         }
         ?>
diff --git a/views/menu.php b/views/menu.php
index 929e5e4..fd078aa 100644
--- a/views/menu.php
+++ b/views/menu.php
@@ -44,7 +44,8 @@
                         <?php if (isset($_SESSION['imagen'])) { ?>
                             <img class="img-avatar" src="<?php echo $_SESSION['imagen']; ?>" alt="">
                         <?php } ?>
-                        <?php echo $_SESSION['name_user']; ?>
+                        <span class="color-s"><?php echo $_SESSION['name_user']; ?></span>
+                        
                     </div>
                     <a href="<?php echo $url; ?>/lobby">
                         <button type="button" class="btn btn_item_menu" id="bt_inicio">
@@ -174,6 +175,12 @@
     .img-avatar {
         width: 35px;
     }
+    .color-p{
+        color: #b2003eff !important;
+    }
+    .color-s {
+        color: #adacb2ff !important;
+    }
 </style>
 
 <!-- MENU MOVIL -->

diff --git a/views/chat.php b/views/chat.php
index a54bf9d..bc13423 100644
--- a/views/chat.php
+++ b/views/chat.php
@@ -17,18 +17,20 @@
 </script>
 <style>
     .message {
-        padding: -10px;
-        border-radius: 25px;
-        margin-bottom: 4px;
+        padding: 5px !important;
+        border-radius: 5px !important;
+        margin-bottom: 4px !important;
+        vertical-align: text-bottom !important;
+        position:relative !important;
     }
 
     .other-message {
-        background: red;
-        color: aliceblue;
+        background: #adacb2ff;
+        color: black;
     }
 
     .my-message {
-        background: blue;
+        background: #a21858ff;
         color: aliceblue;
     }
 
@@ -39,27 +41,53 @@
     }
 
     .header1 {
-        background: gray;
+        background: #b2003eff;
         padding-right: 0;
         position: sticky;
         border-radius: 20px;
         top: 0;
         left: 0;
         width: 100%;
-        z-index: 10;
+        z-index: 20;
         text-align: center;
+        color: #ffffff;
     }
 
     .footer {
-        background: gray;
-        color: #ffffff;
+        background: transparent;
+        /* color: #ffffff; */
         font-size: 13px;
         bottom: 0px;
         position: sticky;
         left: 0px;
         width: 100%;
         z-index: 10;
-        border-top: 3px solid #ffffff;
+        /*  border-top: 3px solid #ffffff; */
+    }
+
+    .footer2 {
+        position: sticky;
+        bottom: 0px;
+    }
+
+    .size-t {
+        font-size: 26px !important;
+    }
+
+    .size-22 {
+        font-size: 22px !important;
+    }
+
+    .color-primary {
+        color: #fafafa;
+        background: #b2003eff;
+    }
+
+    .color-p {
+        color: #b2003eff !important;
+    }
+    .color-s {
+        color: #adacb2ff !important;
     }
 </style>
 <script>
@@ -102,13 +130,13 @@
             } else {
                 var html = "";
                 inicio = `
-                    <div style="height: 200px;">
-                        <div class="text-center" style="margin-top: 30%; ">
-                            <h4>Bienvenido al chat grupal del equipo `+nameGroup+`</h4>
+                    <div style="height: 100px;">
+                        <div class="text-center" style="margin-top: 20%; ">
+                            <h4 class="size-22" >Bienvenido al chat grupal del equipo ` + nameGroup + `</h4>
                         </div>
                     </div>
                     `;
-                    html+=inicio;
+                html += inicio;
                 messages.data.messages.forEach(msj => {
                     var fecha = (new Date(msj.date));
                     var fechaOld = (new Date(msj.dateOld));
@@ -116,9 +144,10 @@
                     var item1 = "";
                     if (fecha.toDateString() != fechaOld.toDateString()) {
                         item1 = `
-              <div class="row">
+                        
+                        <div class="row">
                 <div class="col-12">
-                  <p class="text-center">` + fecha.toLocaleDateString() + `</p>
+                  <p class="text-center color-p">` + fecha.toLocaleDateString() + `</p>
                 </div>
               </div>
               `;
@@ -128,9 +157,9 @@
                     if (msj.name != myName) {
                         item +=
                             `
-                <div class="col-9 message other-message">
-                  <b>` + msj.name + `</b><br>
-                  <span>` + msj.content + `</span>
+                <div class="col-11 message other-message">
+                  <b class="color-p">` + msj.name + `</b><br>
+                  <span class="text-justify">` + msj.content + `</span>
                   <div class="time" text-right>
                     ` + fecha.toLocaleTimeString() + `
                   </div>
@@ -140,8 +169,8 @@
                         item +=
                             `
                 <div class="col-3"></div>
-                <div class="col-9 message my-message "">
-                  <b>T&uacute;</b><br>
+                <div class="col-9 message my-message">
+                  <b class="color-s">T&uacute;</b><br>
                   <span>` + msj.content + `</span>
                   <div class="time" text-right>
                     ` + fecha.toLocaleTimeString() + `
@@ -162,7 +191,7 @@
       </div>
     </div>
         `;
-                    
+
                     html += msjHtml;
                 });
                 document.getElementById('titulo').innerText = "Equipo " + nameGroup;
@@ -206,16 +235,16 @@
 
 <div id="main">
     <div class="header1">
-    <h1  id="titulo"></h1>
+        <h1 class="size-t" id="titulo"></h1>
     </div>
-    
+    <br>
     <div id="contenedor"></div>
-    
 
-    <div class="footer" id="footer">
+
+    <div class="footer2" id="footer">
         <div class="input-group">
             <input class="form-control" type="text" placeholder="Escribe el mensaje aquí ..." id="text" value="">
-            <button class="btn btn-info" id="btn_send" onclick="sendMsj()">Enviar</button>
+            <button class="btn color-primary" id="btn_send" onclick="sendMsj()">Enviar</button>
         </div>
 
     </div>
diff --git a/views/juego.php b/views/juego.php
index eeb4624..5d1dd8e 100644
--- a/views/juego.php
+++ b/views/juego.php
@@ -3,7 +3,35 @@
         background-size: cover;
         background-position: center;
         background-attachment: fixed;
-        background-image: url(<?php echo $url; ?>/img/img_wd/bg_dia.png);
+        /* background-image: url(<?php echo $url; ?>/img/img_wd/bg_dia.png); */
+    }
+
+    .text-j {
+        text-align: justify !important;
+    }
+
+    .color-p {
+        color: #b2003eff !important;
+    }
+
+    .color-s {
+        color: #adacb2ff !important;
+    }
+
+    .pie {
+        float: right;
+        font-size: 15px;
+    }
+
+    .btn-send {
+        border-radius: 30px;
+        margin-bottom: 15px;
+        padding: 10px 30px;
+        color: #fafafa;
+        font-size: 20px;
+        background-color: #b2003eff;
+        border: 0;
+        font-family: S-Core-CoreSansBold;
     }
 </style>
 
@@ -20,9 +48,9 @@
 $juego = mysqli_fetch_array($query);
 
 $moderador = true;
-if ($data['rol'] == "JUGADOR") {
+/* if ($data['rol'] == "JUGADOR") {
     $moderador = false;
-}
+} */
 
 if ($moderador) {
     if (isset($_POST["btn_form"])) {
@@ -55,14 +83,14 @@
             echo "<script>console.log($insertar);</script>";
             if ($insertar) {
 
-                echo "<script>alert('Archivo Subido Correctamente.')</script>";
+                echo "<script>alert('El archivo se subió correctamente.')</script>";
             } else {
                 print_r($insertar);
                 echo "<script>alert('Ha fallado la subida, reintente nuevamente.')</script>";
             }
             // Sie el usuario no selecciona ninguna imagen
         } else {
-            echo "<script>alert('Por favor seleccione imagen a subir.')</script>";
+            echo "<script>alert('Por favor seleccione la imagen a subir.')</script>";
         }
     }
 }
@@ -74,11 +102,35 @@
 
 
     <div class="row">
-        <div class="col-<?php echo $moderador ? 8 : 4; ?>" style="height: 500px;overflow: scroll; overflow-x: hidden;">
-            <h2><?php echo $juego['nombre']; ?> </h2>
-            <span> <?php echo $juego['descripcion']; ?> </span><br>
-            <b>visita a:</b> <?php echo $juego['lugar']; ?>
-            <h3>Preguntas</h3>
+        <div class="col-<?php echo $moderador ? 6 : 3; ?>" style="height: 500px; overflow-x: hidden;">
+            <h2 class="text-center color-p"><?php echo $juego['nombre']; ?> </h2>
+            <span style="text-align: justify;"> <?php echo $juego['descripcion']; ?> </span>
+            <br>
+            <br>
+            <b class="pie text-right color-p">Visita a: <?php echo $juego['lugar']; ?></b>
+        </div>
+        <?php
+        if (!$moderador) {
+        ?>
+
+            <div class="col-6">
+                <!-- <iframe width="100%" height="500px" style="border:0" loading="lazy" allowfullscreen src="https://www.google.com/maps/embed/v1/place?key=AIzaSyAw_VEeJAY7R9kuABvgz9e9CiKogTW3MFc&q=<?php echo $juego['lugar']; ?>">
+                </iframe> -->
+
+                <?php include("mapa.php"); ?>
+            </div>
+        <?php
+        }
+        ?>
+        <div class="col-<?php echo $moderador ? 6 : 3; ?>" style="height: 500px; overflow: scroll; overflow-x: hidden;">
+            <?php include("chat.php"); ?>
+        </div>
+
+    </div>
+    <br>
+    <div class="row">
+        <div class="col-6" style="padding-left: 40px;">
+            <h3 class="color-p text-center">Preguntas</h3>
             <form action="" method="post" enctype="multipart/form-data">
                 <div class="row">
                     <?php
@@ -90,7 +142,7 @@
 
 
 
-                        echo "<b>" . $pregunta['pregunta'] . "</b><br>";
+                        echo '<b class="text-center">' . $pregunta['pregunta'] . "</b><br>";
                         if ($moderador) {
                     ?>
                             <div class="form-check">
@@ -161,34 +213,16 @@
                 ?>
             </form>
         </div>
-        <?php
-        if (!$moderador) {
-        ?>
+        <div class="col-6">
+            <iframe width="560" height="315" src="https://www.youtube.com/embed/sfp1kPXpa-o" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowautoplay allowfullscreen></iframe>
 
-            <div class="col-4">
-                <!-- <iframe width="100%" height="500px" style="border:0" loading="lazy" allowfullscreen src="https://www.google.com/maps/embed/v1/place?key=AIzaSyAw_VEeJAY7R9kuABvgz9e9CiKogTW3MFc&q=<?php echo $juego['lugar']; ?>">
-                </iframe> -->
-
-                <?php include("mapa.php"); ?>
-            </div>
-        <?php
-        }
-        ?>
-        <div class="col-4" style="height: 500px; overflow: scroll; overflow-x: hidden;">
-            <?php include("chat.php"); ?>
         </div>
 
-        <div>
-        <iframe width="560" height="315" src="https://www.youtube.com/embed/sfp1kPXpa-o" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"  allowautoplay allowfullscreen></iframe>
-        </div>
-
-
-
     </div>
     <div style="text-align: right; margin-top: 5px;">
         <!-- <a href="<?php echo $url . '/juego/' . ($id + 1); ?>"> -->
-        <button type="button" onclick="avanzar(<?php echo $id; ?>)" class="btn btn-warning " style="border-radius: 30px; margin-bottom: 15px; padding: 10px 30px; color: #d91e49; font-size: 20px; background-color: #ffea00; border: 0; font-family: S-Core-CoreSansBold;">
-            Siguiente Juego
+        <button type="button" onclick="avanzar(<?php echo $id; ?>)" class="btn-send">
+            Siguiente juego
         </button>
         <!-- </a> -->
     </div>
@@ -204,7 +238,7 @@
         <?php
         } else {
         ?>
-            alert('No se ha terminado de responder esta seccion');
+            alert('No se ha terminado de responder esta sección');
         <?php
         }
         ?>
diff --git a/views/menu.php b/views/menu.php
index 929e5e4..fd078aa 100644
--- a/views/menu.php
+++ b/views/menu.php
@@ -44,7 +44,8 @@
                         <?php if (isset($_SESSION['imagen'])) { ?>
                             <img class="img-avatar" src="<?php echo $_SESSION['imagen']; ?>" alt="">
                         <?php } ?>
-                        <?php echo $_SESSION['name_user']; ?>
+                        <span class="color-s"><?php echo $_SESSION['name_user']; ?></span>
+                        
                     </div>
                     <a href="<?php echo $url; ?>/lobby">
                         <button type="button" class="btn btn_item_menu" id="bt_inicio">
@@ -174,6 +175,12 @@
     .img-avatar {
         width: 35px;
     }
+    .color-p{
+        color: #b2003eff !important;
+    }
+    .color-s {
+        color: #adacb2ff !important;
+    }
 </style>
 
 <!-- MENU MOVIL -->
diff --git a/views/stand.php b/views/stand.php
index a2aaff0..ed6125a 100644
--- a/views/stand.php
+++ b/views/stand.php
@@ -112,7 +112,7 @@
     <div class="modal-dialog">
         <div class="modal-content">
             <div class="modal-header">
-                <h5 class="modal-title" id="exampleModalLabel">Chat en Línea</h5>
+                <h5 class="modal-title" id="exampleModalLabel">Chat en línea</h5>
                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                     <span aria-hidden="true">&times;</span>
                 </button>