diff --git a/webapp/src/App.css b/webapp/src/App.css
index 625dd1c8..1b3fda63 100644
--- a/webapp/src/App.css
+++ b/webapp/src/App.css
@@ -64,3 +64,12 @@ a:hover {
   -webkit-box-shadow: 0 0 0 0 #000, 0 0 0 2px var(--shadow);
   box-shadow: 0 0 0 0 #000, 0 0 0 2px var(--shadow);
 }
+
+.logo {
+  font-family: oswald, sans-serif;
+  width: 100%;
+  font-size: 3rem;
+  font-weight: 700;
+  margin: 0;
+  text-shadow: 4px 4px 0 var(--shadow);
+}
\ No newline at end of file
diff --git a/webapp/src/components/Footer/Footer.css b/webapp/src/components/Footer/Footer.css
index e69de29b..70abad02 100644
--- a/webapp/src/components/Footer/Footer.css
+++ b/webapp/src/components/Footer/Footer.css
@@ -0,0 +1,4 @@
+.footer{
+    border-top: 3px solid var(--borders);
+    width: 100%;
+}
\ No newline at end of file
diff --git a/webapp/src/components/Footer/Footer.js b/webapp/src/components/Footer/Footer.js
index 0c26bd60..08d6d45a 100644
--- a/webapp/src/components/Footer/Footer.js
+++ b/webapp/src/components/Footer/Footer.js
@@ -3,7 +3,7 @@ import './Footer.css';
 
 const Footer = () => {
     return(
-        <footer>
+        <footer className="footer">
             <h2>WIQ!</h2>
             <p>Copyright 2024 ® Grupo 1A de Arquitectura del Software</p>
         </footer>
diff --git a/webapp/src/components/Login/Login.css b/webapp/src/components/Login/Login.css
index c73fe721..b0942aff 100644
--- a/webapp/src/components/Login/Login.css
+++ b/webapp/src/components/Login/Login.css
@@ -1,7 +1,13 @@
+.main .logo{
+    margin-top: 3rem;
+}
+
 .login-container {
     display: grid;
     grid-template-columns: 1fr;
     gap: 1rem;
+    justify-content: center;
+    margin: auto 0;
 }
 
 .login-container h1{
diff --git a/webapp/src/components/Login/Login.js b/webapp/src/components/Login/Login.js
index 1704fd7a..1f89d808 100644
--- a/webapp/src/components/Login/Login.js
+++ b/webapp/src/components/Login/Login.js
@@ -1,81 +1,75 @@
 // src/components/Login.js
-import React, { useState } from 'react';
-import axios from 'axios';
-import {useNavigate} from "react-router-dom";
-import './Login.css';
-
+import React, { useState } from "react";
+import axios from "axios";
+import { useNavigate } from "react-router-dom";
+import "./Login.css";
 
 const Login = () => {
-  const [username, setUsername] = useState('');
-  const [password, setPassword] = useState('');
-  const [error, setError] = useState('');
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
   const [loginSuccess, setLoginSuccess] = useState(false);
   //const [createdAt, setCreatedAt] = useState('');
   const [openSnackbar, setOpenSnackbar] = useState(false);
   const navigate = useNavigate();
 
-  const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
+  const apiEndpoint =
+    process.env.REACT_APP_API_ENDPOINT || "http://localhost:8000";
 
   const loginUser = async () => {
-    try {
-      const response = await axios.post(`${apiEndpoint}/login`, { username, password });
-      console.log(response);
-      // Extract data from the response
-      //const { createdAt: userCreatedAt } = response.data;
-      const token = response.data;
-
-      //setCreatedAt(userCreatedAt);
-      setLoginSuccess(true);
+    await axios
+      .post(`${apiEndpoint}/login`, { username, password })
+      .then((response) => {
+        const token = response.data;
 
-      setOpenSnackbar(true);
-      localStorage.setItem('token', token);
+        setLoginSuccess(true);
 
-      localStorage.setItem('username', username);
+        setOpenSnackbar(true);
+        localStorage.setItem("token", token);
 
-    } catch (error) {
-      //console.log(error);
-      setError(error.response.data.error);
-    }
+        localStorage.setItem("username", username);
+      })
+      .catch((err) => {
+        setError(err.message);
+      });
   };
 
   return (
-    <div className="login-container">
-      {loginSuccess ? (
-        navigate("/home")
-      ) : (
-        <>
-          <h1 className="login-header">Login</h1>
-          <input
-            className="login-input"
-            type="text"
-            placeholder="Username"
-            value={username}
-            onChange={(e) => setUsername(e.target.value)}
-          />
-          <input
-            className="login-input"
-            type="password"
-            placeholder="Password"
-            value={password}
-            onChange={(e) => setPassword(e.target.value)}
-          />
-          <button className="login-button" onClick={loginUser}>
-            Login
-          </button>
-          {openSnackbar && (
-            <div className="login-snackbar">
-              Login successful
-            </div>
-          )}
-          {error && (
-            <div className="login-error">
-              Error: {error}
-            </div>
-          )}
-        </>
-      )}
+    <div className="main">
+      <div className="login-container">
+        {loginSuccess ? (
+          navigate("/home")
+        ) : (
+          <>
+            <h1 className="login-header">Identifícate</h1>
+            <label for="login-username">Introduce tu nombre:</label>
+            <input
+              className="login-input"
+              type="text"
+              placeholder="Username"
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+            />
+            <label for="login-password">Introduce tu contraseña:</label>
+            <input
+              className="login-input"
+              type="password"
+              placeholder="Password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+            />
+            <button className="login-button" onClick={loginUser}>
+              Login
+            </button>
+            {openSnackbar && (
+              <div className="login-snackbar">Login successful</div>
+            )}
+            {error && <div className="login-error">Error: {error}</div>}
+          </>
+        )}
       </div>
-    )
-}  
+    </div>
+  );
+};
 
 export default Login;
diff --git a/webapp/src/components/Nav/Nav.css b/webapp/src/components/Nav/Nav.css
index e7665032..8f00fcb1 100644
--- a/webapp/src/components/Nav/Nav.css
+++ b/webapp/src/components/Nav/Nav.css
@@ -1,43 +1,42 @@
-.logo {
-  font-family: oswald, sans-serif;
-  width: 100%;
-  font-size: 5rem;
-  font-weight: 700;
-  margin: 0;
-  text-shadow: 4px 4px 0 var(--shadow);
+nav .logo{
+  margin-left: 3rem;
 }
 
 nav {
-  width: 80vw;
-  display: flex;
-  flex-wrap: wrap;
-  border: 3px solid var(--borders);
-  border-radius: 1rem;
-  padding: 1rem;
+  width: 100%;
+  display: grid;
+  grid-auto-flow: column;
+  border-bottom: 3px solid var(--borders);
+  justify-content: space-between;
+  align-items: center;
+}
+
+nav * {
   margin: 1rem;
-  justify-content: center;
-  -webkit-box-shadow: 10px 10px 5px 0px var(--shadow);
-  -moz-box-shadow: 10px 10px 5px 0px var(--shadow);
-  box-shadow: 10px 10px 5px 0px var(--shadow);
 }
 
-nav ul {
-  display: flex;
-  justify-content: center;
-  flex-direction: row;
+.menuItems *, .rightItems * {
+  height: 100%;
 }
 
-nav li {
-  display: flex;
-  flex-direction: row;
+.rightItems{
+  display: grid;
+  grid-auto-flow: column;
+  column-gap: 2rem;
+  align-items: center;
+}
+
+.disconnect{
+  margin-left: auto;
 }
 
 .theme-toggle{
-  width: 5%;
-  height: 10%;
-  margin-left: 90%;
+  background-size: contain;
 }
 
-.disconnect{
-  margin-left: 70%;
+.progressBar{
+  background-color: var(--shadow);
+  height: 1rem;
+  border-radius: 1rem;
+  margin-top: 0.5rem;
 }
\ No newline at end of file
diff --git a/webapp/src/components/Nav/Nav.js b/webapp/src/components/Nav/Nav.js
index 2acbaae5..a44a6b74 100644
--- a/webapp/src/components/Nav/Nav.js
+++ b/webapp/src/components/Nav/Nav.js
@@ -5,11 +5,10 @@ import "./Nav.css";
 const Nav = () => {
   // Definimos el estado para controlar el tema actual
   const [isDarkTheme, setIsDarkTheme] = useState(false);
-  const navigate = useNavigate()
-  
+  const navigate = useNavigate();
+
   // Función para alternar entre temas claro y oscuro
   const toggleTheme = () => {
-    
     const root = document.getElementById("root");
     const currentTheme = root.getAttribute("data-theme");
     const newTheme = currentTheme === "light" ? "dark" : "light";
@@ -19,31 +18,35 @@ const Nav = () => {
 
   const Logout = () => {
     localStorage.removeItem("token");
-    navigate("/")
+    navigate("/");
   };
 
   return (
     <nav>
-      <input
-        type="checkbox"
-        class="theme-toggle"
-        onChange={toggleTheme}
-        checked={isDarkTheme}
-        value="Texto dentro del input"
-      />
       <h1 className="logo">WIQ!</h1>
-      <ul>
-        <li>
-          <Link to="/home">Home</Link>
-        </li>
-        <li>
-          <Link to="/sobre">Sobre nosotros</Link>
-        </li>
-        <li>
-          <Link to="/stats">Stats</Link>
-        </li>
-      </ul>
-      <button class="disconnect" onClick={() => Logout()}>Desconectarse</button>
+      <div className="menuItems">
+        <Link to="/home">Home</Link>
+        <Link to="/sobre">Sobre nosotros</Link>
+        <Link to="/stats">Stats</Link>
+        <Link to="/ranking">Ránking</Link>
+      </div>
+      <div className="rightItems">
+        <input
+          type="checkbox"
+          class="theme-toggle"
+          onChange={toggleTheme}
+          checked={isDarkTheme}
+        />
+        <button className="profile">
+          Perfil
+        </button>
+        <button className="profile">
+          Opciones
+        </button>
+        <button className="disconnect" onClick={() => Logout()}>
+          Desconectarse
+        </button>
+      </div>
     </nav>
   );
 };
diff --git a/webapp/src/components/Register/Register.css b/webapp/src/components/Register/Register.css
new file mode 100644
index 00000000..ee1f0322
--- /dev/null
+++ b/webapp/src/components/Register/Register.css
@@ -0,0 +1,15 @@
+.register-container{
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 1rem;
+    justify-content: center;
+    align-items: center;
+}
+
+.register-container label{
+    margin-top: 1rem;
+}
+
+.register-button{
+    box-shadow: none;
+}
\ No newline at end of file
diff --git a/webapp/src/components/Register/Register.js b/webapp/src/components/Register/Register.js
index 2b9e7742..5e96cc78 100644
--- a/webapp/src/components/Register/Register.js
+++ b/webapp/src/components/Register/Register.js
@@ -1,61 +1,64 @@
-// src/components/AddUser.js
-import React, { useState } from 'react';
-import axios from 'axios';
-import { Container, Typography, TextField, Button, Snackbar } from '@mui/material';
+import React, { useState } from "react";
+import axios from "axios";
+import "./Register.css";
 
-const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
+const apiEndpoint =
+  process.env.REACT_APP_API_ENDPOINT || "http://localhost:8000";
 
 const AddUser = () => {
-  const [username, setUsername] = useState('');
-  const [password, setPassword] = useState('');
-  const [error, setError] = useState('');
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [passwordR, setPasswordR] = useState("");
+  const [error, setError] = useState("");
   const [openSnackbar, setOpenSnackbar] = useState(false);
 
-  const addUser = async () => {
-    try {
-      await axios.post(`${apiEndpoint}/adduser`, { username, password });
-      setOpenSnackbar(true);
-    } catch (error) {
-      setError(error.response.data.error);
+  const handleRegister = () => {
+    if (password !== passwordR) {
+      setError("Las contraseñas no coinciden");
+      return;
     }
-  };
-
-  const handleCloseSnackbar = () => {
-    setOpenSnackbar(false);
+    axios
+      .post(`${apiEndpoint}/adduser`, { username, password })
+      .then(() => setOpenSnackbar(true))
+      .catch((error) => setError(error.message));
   };
 
   return (
-    <Container component="main" maxWidth="xs" sx={{ marginTop: 4 }}>
-      <Typography component="h1" variant="h5">
-        Add User
-      </Typography>
-      <TextField
-        name="username"
-        margin="normal"
-        fullWidth
-        label="Username"
-        placeholder="Username"
+    <div className="register-container">
+      <h1 className="register-header">Regístrate</h1>
+      <label for="register-username">Introduce tu nombre:</label>
+      <input
+        id="register-username"
+        className="register-input"
+        type="text"
+        placeholder="Nombre de usuario"
         value={username}
         onChange={(e) => setUsername(e.target.value)}
       />
-      <TextField
-        name="password"
-        margin="normal"
-        fullWidth
-        label="Password"
+      <label for="register-password">Introduce tu contraseña:</label>
+      <input
+        className="register-password"
         type="password"
-        placeholder="Password"
+        placeholder="Contraseña"
         value={password}
         onChange={(e) => setPassword(e.target.value)}
       />
-      <Button variant="contained" color="primary" onClick={addUser}>
-        Add User
-      </Button>
-      <Snackbar open={openSnackbar} autoHideDuration={6000} onClose={handleCloseSnackbar} message="User added successfully"/>
-      {error && (
-        <Snackbar open={!!error} autoHideDuration={6000} onClose={() => setError('')} message={`Error: ${error}`} />
+      <label for="register-pass2">Vuelve a introducir la contraseña:</label>
+      <input
+        className="register-pass2"
+        type="password"
+        placeholder="Repetir contraseña"
+        value={passwordR}
+        onChange={(e) => setPasswordR(e.target.value)}
+      />
+      <button className="register-button" onClick={handleRegister}>
+        Registrarse
+      </button>
+      {openSnackbar && (
+        <div className="register-snackbar">Usuario registrado exitosamente</div>
       )}
-    </Container>
+      {error && <div className="login-error">Error: {error}</div>}
+    </div>
   );
 };
 
diff --git a/webapp/src/pages/Authenticate/Authenticate.css b/webapp/src/pages/Authenticate/Authenticate.css
new file mode 100644
index 00000000..e1c7f780
--- /dev/null
+++ b/webapp/src/pages/Authenticate/Authenticate.css
@@ -0,0 +1,17 @@
+.gotoregister,
+.gotologin {
+  box-shadow: none;
+  border: none;
+  text-decoration: underline;
+  padding: 0.2rem;
+  margin-top: 1rem;
+}
+
+.main{
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 100%;
+  height: 100%;
+}
diff --git a/webapp/src/pages/Authenticate/Authenticate.js b/webapp/src/pages/Authenticate/Authenticate.js
index 6517775d..e6408b8d 100644
--- a/webapp/src/pages/Authenticate/Authenticate.js
+++ b/webapp/src/pages/Authenticate/Authenticate.js
@@ -1,11 +1,8 @@
-import React, { useState } from 'react';
-import AddUser from '../../components/Register/Register';
-import Login from '../../components/Login/Login';
-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 Footer from '../../components/Footer/Footer.js';
+import React, { useState } from "react";
+import AddUser from "../../components/Register/Register";
+import Login from "../../components/Login/Login";
+import Footer from "../../components/Footer/Footer.js";
+import "./Authenticate.css";
 
 function Authenticate() {
   const [showLogin, setShowLogin] = useState(true);
@@ -15,25 +12,24 @@ function Authenticate() {
   };
 
   return (
-    <Container component="main" maxWidth="xs">
-      <CssBaseline />
-      <Typography component="h1" variant="h5" align="center" sx={{ marginTop: 2 }}>
-        Bienvenido a WIQ
-      </Typography>
-      {showLogin ? <Login /> : <AddUser />}
-      <Typography component="div" align="center" sx={{ marginTop: 2 }}>
-        {showLogin ? (
-          <Link name="gotoregister" component="button" variant="body2" onClick={handleToggleView}>
-            ¿No tienes cuenta? Regístrate.
-          </Link>
-        ) : (
-          <Link component="button" variant="body2" onClick={handleToggleView}>
-            Ya tienes cuenta? Inicia sesión.
-          </Link>
-        )}
-      </Typography>
+    <div className="main">
+      <h1 className="logo">WIQ</h1>
+      <div>
+        {showLogin ? <Login /> : <AddUser />}
+        <div>
+          {showLogin ? (
+            <button className="gotoregister" onClick={handleToggleView}>
+              ¿No tienes cuenta? Regístrate.
+            </button>
+          ) : (
+            <button className="gotologin" onClick={handleToggleView}>
+              Ya tienes cuenta? Inicia sesión.
+            </button>
+          )}
+        </div>
+      </div>
       <Footer />
-    </Container>
+    </div>
   );
 }
 
diff --git a/webapp/src/pages/Bateria/Bateria.js b/webapp/src/pages/Bateria/Bateria.js
index 7cea9b1e..5474b919 100644
--- a/webapp/src/pages/Bateria/Bateria.js
+++ b/webapp/src/pages/Bateria/Bateria.js
@@ -6,13 +6,16 @@ import { Link, useNavigate } from "react-router-dom";
 
 const JuegoPreguntas = () => {
   const URL = process.env.REACT_APP_API_ENDPOINT || "http://localhost:8000"
+  const TIME = 180;
+
   const [isLoading, setIsLoading] = useState(true);
   const [indicePregunta, setIndicePregunta] = useState(0);
   const [puntuacion, setPuntuacion] = useState(0);
-  const [tiempoRestante, setTiempoRestante] = useState(180);
+  const [tiempoRestante, setTiempoRestante] = useState(TIME);
   const [juegoTerminado, setJuegoTerminado] = useState(false);
   const [preguntas, setPreguntas] = useState([]);
   const [preguntaActual, setPreguntaActual] = useState(null);
+  const [progressPercent, setProgressPercent] = useState(100);
   const navigate = useNavigate();
 
   useEffect(() => {
@@ -46,6 +49,16 @@ const JuegoPreguntas = () => {
     return () => clearInterval(timer);
   }, [tiempoRestante]);
 
+  useEffect(() => {
+    setProgressPercent(tiempoRestante / TIME * 100);
+  
+    const timer = setInterval(() => {
+      setTiempoRestante(prevTiempo => (prevTiempo <= 0 ? 0 : prevTiempo - 0.01));
+    }, 10); 
+  
+    return () => clearInterval(timer);
+  }, [tiempoRestante]);
+
   const handleSiguientePregunta = (respuesta) => {
     if (respuesta === preguntaActual.correcta) {
       setPuntuacion(puntuacion + 1);
@@ -102,8 +115,14 @@ const JuegoPreguntas = () => {
               </button>
             ))}
           </div>
-          <div className="timer">Tiempo restante: {tiempoRestante}</div>
+          <div className="timer">Tiempo restante: {Math.floor(tiempoRestante)}</div>
           <div className="points">Puntuación: {puntuacion}</div>
+          <div className="progressBarContainer">
+            <div
+              className="progressBar"
+              style={{ width: `${progressPercent}%` }}
+            ></div>
+          </div>
         </div>
       )}
       <Footer />
diff --git a/webapp/src/pages/Clasico/Clasico.js b/webapp/src/pages/Clasico/Clasico.js
index 8b8b81be..75aac968 100644
--- a/webapp/src/pages/Clasico/Clasico.js
+++ b/webapp/src/pages/Clasico/Clasico.js
@@ -6,17 +6,19 @@ import Footer from "../../components/Footer/Footer.js";
 
 const JuegoPreguntas = () => {
   const URL = process.env.REACT_APP_API_ENDPOINT || "http://localhost:8000"
+  const SECS_PER_QUESTION = 10
 
   const [isLoading, setIsLoading] = useState(true);
   const [indicePregunta, setIndicePregunta] = useState(0);
   const [puntuacion, setPuntuacion] = useState(0);
   const [respuestaSeleccionada, setRespuestaSeleccionada] = useState(null);
-  const [tiempoRestante, setTiempoRestante] = useState(10);
+  const [tiempoRestante, setTiempoRestante] = useState(SECS_PER_QUESTION);
   const [juegoTerminado, setJuegoTerminado] = useState(false);
   const [preguntaTerminada, setPreguntaTerminada] = useState(false);
   const [mostrarMenu, setMostrarMenu] = useState(false); // Estado para mostrar el menú al finalizar el juego
   const [preguntas, setPreguntas] = useState([]);
   const [preguntaActual, setPreguntaActual] = useState("");
+  const [progressPercent, setProgressPercent] = useState(100);
   const navigate = useNavigate();
 
   //Used for user stats
@@ -46,6 +48,16 @@ const JuegoPreguntas = () => {
       // eslint-disable-next-line
   },[]);
 
+  useEffect(() => {
+    setProgressPercent(tiempoRestante / SECS_PER_QUESTION * 100);
+  
+    const timer = setInterval(() => {
+      setTiempoRestante(prevTiempo => (prevTiempo <= 0 ? 0 : prevTiempo - 0.01));
+    }, 10); 
+  
+    return () => clearInterval(timer);
+  }, [tiempoRestante]);
+
   useEffect(() => {
     if (tiempoRestante === 0) {
       setPreguntaTerminada(true);
@@ -101,6 +113,8 @@ const JuegoPreguntas = () => {
 
     setRespuestaSeleccionada(null);
     setTiempoRestante(10);
+    setProgressPercent(100);
+
     if (indicePregunta + 1 < preguntas.length) {
       setIndicePregunta(indicePregunta + 1);
       setPreguntaActual(preguntas[indicePregunta + 1]);
@@ -194,8 +208,14 @@ const JuegoPreguntas = () => {
               </button>
             ))}
           </div>
-          <div className="timer">Tiempo restante: {tiempoRestante}</div>
+          <div className="timer">Tiempo restante: {Math.floor(tiempoRestante)}</div>
           <div className="points">Puntuación: {puntuacion}</div>
+          <div className="progressBarContainer">
+            <div
+              className="progressBar"
+              style={{ width: `${progressPercent}%` }}
+            ></div>
+          </div>
         </div>
       )}
       <Footer />
diff --git a/webapp/src/pages/WrongRoute/WrongRoute.css b/webapp/src/pages/WrongRoute/WrongRoute.css
index 219fa1e9..ba335fd1 100644
--- a/webapp/src/pages/WrongRoute/WrongRoute.css
+++ b/webapp/src/pages/WrongRoute/WrongRoute.css
@@ -41,7 +41,7 @@
     transform: translateY(50%);
     height: 160px;
     width: 10rem;
-    background-color: orange
+    background-color: var(--shadow)
 }
 
 @keyframes drop {
@@ -92,7 +92,7 @@
     font-size: 188px;
     font-weight: 700;
     margin: 0;
-    text-shadow: 4px 4px 0 orange;
+    text-shadow: 4px 4px 0 var(--shadow);
 }
 
 .notfound h2 {
@@ -117,17 +117,17 @@
     display: inline-block;
     font-weight: 400;
     text-transform: uppercase;
-    -webkit-box-shadow: 0 0 0 2px #000,2px 2px 0 2px orange;
-    box-shadow: 0 0 0 2px #000,2px 2px 0 2px orange;
+    -webkit-box-shadow: 0 0 0 2px #000,2px 2px 0 2px var(--shadow);
+    box-shadow: 0 0 0 2px #000,2px 2px 0 2px var(--shadow);
     text-decoration: none;
     -webkit-transition: .2s all;
     transition: .2s all
 }
 
 .notfound a:hover {
-    background-color: orange;
-    -webkit-box-shadow: 0 0 0 0 #000,0 0 0 2px orange;
-    box-shadow: 0 0 0 0 #000,0 0 0 2px orange;
+    background-color: var(--shadow);
+    -webkit-box-shadow: 0 0 0 0 #000,0 0 0 2px var(--shadow);
+    box-shadow: 0 0 0 0 #000,0 0 0 2px var(--shadow);
 }
 
 .notfound-social {
@@ -143,9 +143,9 @@
 }
 
 .notfound-social>a:hover {
-    background-color: orange;
-    -webkit-box-shadow: 0 0 0 0 #000,0 0 0 2px orange;
-    box-shadow: 0 0 0 0 #000,0 0 0 2px orange;
+    background-color: var(--shadow);
+    -webkit-box-shadow: 0 0 0 0 #000,0 0 0 2px var(--shadow);
+    box-shadow: 0 0 0 0 #000,0 0 0 2px var(--shadow);
 }
 
 @media only screen and (max-width: 480px) {
diff --git a/webapp/src/pages/WrongRoute/WrongRoute.js b/webapp/src/pages/WrongRoute/WrongRoute.js
index d8dacad9..96b25bfb 100644
--- a/webapp/src/pages/WrongRoute/WrongRoute.js
+++ b/webapp/src/pages/WrongRoute/WrongRoute.js
@@ -19,7 +19,7 @@ const WrongRoute = () => {
         <p>
           La página que estabas buscando no está disponible
         </p>
-        <Link to="/login">Página principal</Link>
+        <Link to="/home">Página principal</Link>
       </div>
     </div>
   );