diff --git a/webapp/package-lock.json b/webapp/package-lock.json
index 5b8a3e86..5027553c 100644
--- a/webapp/package-lock.json
+++ b/webapp/package-lock.json
@@ -20,6 +20,7 @@
         "react": "^18.2.0",
         "react-bootstrap": "^2.10.1",
         "react-dom": "^18.2.0",
+        "react-icons": "^5.0.1",
         "react-router-dom": "^6.22.3",
         "react-scripts": "5.0.1",
         "web-vitals": "^3.5.1"
@@ -23552,6 +23553,14 @@
         }
       }
     },
+    "node_modules/react-icons": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.0.1.tgz",
+      "integrity": "sha512-WqLZJ4bLzlhmsvme6iFdgO8gfZP17rfjYEJ2m9RsZjZ+cc4k1hTzknEz63YS1MeT50kVzoa1Nz36f4BEx+Wigw==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
diff --git a/webapp/package.json b/webapp/package.json
index 92dd07b9..bf5957f3 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -15,6 +15,7 @@
     "react": "^18.2.0",
     "react-bootstrap": "^2.10.1",
     "react-dom": "^18.2.0",
+    "react-icons": "^5.0.1",
     "react-router-dom": "^6.22.3",
     "react-scripts": "5.0.1",
     "web-vitals": "^3.5.1"
diff --git a/webapp/public/favicon.ico b/webapp/public/favicon.ico
index a11777cc..edb3375f 100644
Binary files a/webapp/public/favicon.ico and b/webapp/public/favicon.ico differ
diff --git a/webapp/public/faviconReact.ico b/webapp/public/faviconReact.ico
new file mode 100644
index 00000000..a11777cc
Binary files /dev/null and b/webapp/public/faviconReact.ico differ
diff --git a/webapp/public/logoGitHub.png b/webapp/public/logoGitHub.png
new file mode 100644
index 00000000..1b6499e0
Binary files /dev/null and b/webapp/public/logoGitHub.png differ
diff --git a/webapp/src/App.js b/webapp/src/App.js
index da6dc6ff..7d2fddce 100644
--- a/webapp/src/App.js
+++ b/webapp/src/App.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useState,useEffect} from 'react';
 import Navbar from './components/navbar/NavBar';
 import AddUser from './components/adduser/AddUser';
 import Login from './components/login/Login';
@@ -8,8 +8,7 @@ import StartButton from './components/startbutton/StartButton';
 import Game from './components/game/Game';
 import Home from './components/home/Home';
 import Footer from './components/footer/Footer';
-import { ChakraProvider } from '@chakra-ui/react';
-
+import { ChakraProvider } from "@chakra-ui/react";
 import AuthenticatedLayout from './components/authenticationLayout';
 import GuestLayout from './components/GuestLayout';
 import Logout from './components/logout/Logout';
@@ -17,11 +16,25 @@ import History from './components/history/History';
 import {BasicGameMode } from './components/game/gameModes/basicGameMode';
 import {GameProvider} from './components/game/GameContext';
 import PrincipalView from './components/principalView/PrincipalView';
+
 const App = () => {
+
+  const [darkMode, setDarkMode] = useState(false);
+
+  useEffect(() => {
+    if (darkMode) {
+      document.body.classList.add('dark-mode');
+      console.log('dark mode');
+    } else {
+      document.body.classList.remove('dark-mode');
+      console.log('light mode');
+    }
+  }, [darkMode]);
+
   return (
     <AuthProvider>
       <Router>
-        <Navbar />
+      <Navbar setDarkMode={setDarkMode}/>
         <GameProvider gameMode={new BasicGameMode()}>
 
         <Routes>
@@ -37,7 +50,7 @@ const App = () => {
           } />
           <Route path="/game" element={
             <AuthenticatedLayout>
-              <ChakraProvider><Game />  </ChakraProvider>
+              <ChakraProvider><Game darkMode={darkMode}/>  </ChakraProvider>
             </AuthenticatedLayout>
           } />
            <Route path="/history" element={
diff --git a/webapp/src/components/footer/Footer.css b/webapp/src/components/footer/Footer.css
index 8c429395..3fc8d69f 100644
--- a/webapp/src/components/footer/Footer.css
+++ b/webapp/src/components/footer/Footer.css
@@ -24,3 +24,9 @@
     text-decoration: underline; /* Subraya enlaces al pasar el ratón */
   }
 
+  .sec-footer {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+  }
+
diff --git a/webapp/src/components/footer/Footer.js b/webapp/src/components/footer/Footer.js
index 07726004..d8ac9d42 100644
--- a/webapp/src/components/footer/Footer.js
+++ b/webapp/src/components/footer/Footer.js
@@ -3,14 +3,18 @@ import './Footer.css'; // Asegúrate de importar tu archivo de estilos si es nec
 
 const Footer = () => (
   <footer className="footer">
+    <div className="sec-footer">
     <p>Trabajo de Arquitectura del Software</p>
-    <p>
+    </div>
+    <div className="sec-footer">
+      <img src="/logoGitHub.png" alt="Github" style={{ width: '20px', marginRight: '5px' }} />
       <a href="https://github.com/Arquisoft/wiq_es04c" target="_blank" rel="noopener noreferrer">
         Github del Proyecto
       </a>
-    </p>
-    <p>
-        <a href="https://ingenieriainformatica.uniovi.es" target="_blank"rel="noopener noreferrer">Escuela de Ingeniería Informática</a></p>
+    </div>
+      <div className="sec-footer">
+      <a href="https://ingenieriainformatica.uniovi.es" target="_blank"rel="noopener noreferrer">Escuela de Ingeniería Informática</a>
+    </div>
   </footer>
 );
 
diff --git a/webapp/src/components/game/AnswerButton.jsx b/webapp/src/components/game/AnswerButton.jsx
index 97ce1cb8..bed20d97 100644
--- a/webapp/src/components/game/AnswerButton.jsx
+++ b/webapp/src/components/game/AnswerButton.jsx
@@ -1,11 +1,13 @@
 import {Button} from '@chakra-ui/react'
 
-export function AnswerButton({text, colorFondo, onClick}){
+export function AnswerButton({darkMode,text, colorFondo, onClick}){
+
+    let textColor = darkMode.darkMode? "#FCFAF0" : "#08313A";
 
     return(
         <Button 
         bg={colorFondo}
-        color="#FCFAF0"
+        color={textColor}
         display="flex"
         fontSize="1.3em"
         borderRadius="15px"
diff --git a/webapp/src/components/game/AnswersBlock.jsx b/webapp/src/components/game/AnswersBlock.jsx
index 96c12e75..6052089a 100644
--- a/webapp/src/components/game/AnswersBlock.jsx
+++ b/webapp/src/components/game/AnswersBlock.jsx
@@ -2,14 +2,15 @@ import { Box } from "@chakra-ui/react";
 import React, { useEffect, useState } from 'react';
 import { AnswerButton } from './AnswerButton.jsx';
 //onAnswerSelect es la funcion de QuestionArea que se ejecuta al hacer click en boton 
-export function AnswersBlock({ respuestas, correcta ,onAnswerSelect,isGameEnded}){
+export function AnswersBlock({ respuestas, correcta ,onAnswerSelect,isGameEnded, darkMode}){
 
     const [respuestasAleatorizadas, setRespuestasAleatorizadas] = useState([]);
 
     let respuestasCopy = respuestas;
 
     //Colores de los botones para que tengan orden random
-    const colorsArray = ["#FFD743","#D773A2","#07BB9C","#A06AB4"];
+    console.log("En asnblock "+darkMode.darkMode);
+    const colorsArray= darkMode.darkMode? ["#FFD743","#D773A2","#07BB9C","#A06AB4"] : ["#E3C7E0","#BAE5C0","#84C7F2","#E8F7FF"];
     //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));
@@ -40,7 +41,7 @@ export function AnswersBlock({ respuestas, correcta ,onAnswerSelect,isGameEnded}
     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={colorsArray[index]} onClick={() => handleButtonClick(respuesta)} />
+                <AnswerButton darkMode={darkMode} key={index} text={respuesta} colorFondo={colorsArray[index]} onClick={() => handleButtonClick(respuesta)} />
             ))}
         </Box>
     );
diff --git a/webapp/src/components/game/EnunciadoBlock.jsx b/webapp/src/components/game/EnunciadoBlock.jsx
index d70d23c5..20c257d9 100644
--- a/webapp/src/components/game/EnunciadoBlock.jsx
+++ b/webapp/src/components/game/EnunciadoBlock.jsx
@@ -1,11 +1,13 @@
 import {Center } from "@chakra-ui/react";
 
 
-export function EnunciadoBlock({pregunta}){
+export function EnunciadoBlock({darkMode, pregunta}){
+
+    let textColor = darkMode.darkMode? "#FCFAF0" : "#08313A";
 
     return(
         <Center fontSize="1.5em" 
-        color="#FCFAF0" fontWeight="bolder"flex="2">
+        color={textColor} fontWeight="bolder"flex="2">
             {pregunta}
         </Center>
     )
diff --git a/webapp/src/components/game/Game.js b/webapp/src/components/game/Game.js
index 01368d61..e0e3cda6 100644
--- a/webapp/src/components/game/Game.js
+++ b/webapp/src/components/game/Game.js
@@ -1,5 +1,5 @@
 import { QuestionArea } from './QuestionArea';
-import { useEffect, useState,useContext } from 'react';
+import { useEffect, useState,useContext, useRef } from 'react';
 import { CircularProgress } from "@mui/material";
 import {GameContext} from './GameContext';
 import {useNavigate} from 'react-router-dom';
@@ -7,7 +7,7 @@ import { Box, AlertDialog, AlertDialogBody, AlertDialogFooter, AlertDialogHeader
 
 /*
 recibe el obj gameMode que contieene las preguntas para ese modo de juego */
-function Game() {
+function Game(darkMode) {
   const apiEndpoint = process.env.REACT_APP_API_URI ||'http://localhost:8000';
 
   const { startGame, questions, isLoading } = useContext(GameContext);
@@ -18,6 +18,7 @@ function Game() {
   const [incorrectAnswers, setIncorrectAnswers] = useState(0);
   const [finished, setFinished] = useState(false);
   const navigate = useNavigate();
+  const timeToAnswer = 20000;//Aquí podemos definir el tiempo para responder
 
 
   useEffect(() => {
@@ -48,16 +49,22 @@ function Game() {
     setIsOpen(false);
     navigate('/home');
   }
+  //Colores chakra dark - light
+  console.log("En game"+darkMode.darkMode);
+  let backgroundColorFirst= darkMode.darkMode? '#08313A' : '#FFFFF5';
+  let backgroundColorSecond= darkMode.darkMode? '#107869' : '#FDF4E3';
+  //#08313A, #107869
+
   return (
     <Box minH="100vh" minW="100vw" 
-      bgGradient="linear(to-t, #08313A, #107869)"
+      bgGradient={`linear(to-t, ${backgroundColorFirst}, ${backgroundColorSecond})`}
       display="flex" justifyContent="center" alignItems="center">
       {isLoading ? (
          <CircularProgress color="inherit" />
 
       ) : (
-        <QuestionArea data-testid="question-area" questions={questions}       setTotalCorrectAnswers={setCorrectAnswers}
-        setTotalIncorrectAnswers={setIncorrectAnswers} setFinished={setFinished}/>
+        <QuestionArea darkMode={darkMode} data-testid="question-area" questions={questions} setTotalCorrectAnswers={setCorrectAnswers}
+        setTotalIncorrectAnswers={setIncorrectAnswers} setFinished={setFinished} timeToAnswer={timeToAnswer}/>
       )}
       <AlertDialog isOpen={isOpen} onClose={onClose}>
       <AlertDialogOverlay>
diff --git a/webapp/src/components/game/QuestionArea.jsx b/webapp/src/components/game/QuestionArea.jsx
index 3809a742..60efdba3 100644
--- a/webapp/src/components/game/QuestionArea.jsx
+++ b/webapp/src/components/game/QuestionArea.jsx
@@ -2,13 +2,14 @@ import { useEffect, useState,useRef  } from 'react';
 import { Box } from "@chakra-ui/react";
 import { AnswersBlock } from './AnswersBlock.jsx';
 import { EnunciadoBlock } from './EnunciadoBlock.jsx';
-import { Timer } from './Timer';
+import { Timer } from './timers/Timer';
+import { GameTimer } from './timers/GameTimer.jsx';
 
 /*
 *maneja la logica general del juego  reincia el contador del timepo salta de pregunas etc,
 cuando el juego termina actualiza las respuestas correctas e incorrectas y se las apsas a game con prop Drilling */
 
-export function QuestionArea({questions,setTotalCorrectAnswers, setTotalIncorrectAnswers,setFinished}){
+export function QuestionArea({darkMode, questions,setTotalCorrectAnswers, setTotalIncorrectAnswers,setFinished, timeToAnswer=30000}){
   const [questionIndex, setQuestionIndex] = useState(0); // Nuevo estado para el índice de la pregunta
   // Estado para almacenar los datos de la pregunta
   const [questionData, setQuestionData] = useState(null); // Estado para almacenar los datosS de la pregunta
@@ -19,6 +20,8 @@ export function QuestionArea({questions,setTotalCorrectAnswers, setTotalIncorrec
   const [open, setOpen] = useState(false); // Nuevo estado para controlar si el diálogo está abierto o cerrado
   const [correctAnswers, setCorrectAnswers] = useState(0); // Nuevo estado para llevar la cuenta de las respuestas correctas
   const [incorrectAnswers, setIncorrectAnswers] = useState(0); // Nuevo estado para llevar la cuenta de las respuestas incorrectas
+  const [totalTime, setTotalTime] = useState(0);
+
 
   const[isGameEnded, setIsGameEnded] = useState(false); // Nuevo estado para controlar si el juego ha terminado o no
   const resetTimer = useRef(null); // Ref para almacenar la función resetTimer
@@ -112,14 +115,11 @@ export function QuestionArea({questions,setTotalCorrectAnswers, setTotalIncorrec
         maxH="80vh" maxW="70vW" minH="70vh" minW="60vW">
           
                   <Box display="flex" borderBottom="0.1em solid #000">
-                  <Timer onTimeout={handleTimeout} resetTimer={resetTimer} timeout={30000} />
-                    <EnunciadoBlock pregunta={questionData?.pregunta} />
+                    <Timer darkMode={darkMode} onTimeout={handleTimeout} resetTimer={resetTimer} timeout={timeToAnswer} />
+                    <EnunciadoBlock darkMode={darkMode} pregunta={questionData?.pregunta} />
+                    <GameTimer darkMode={darkMode} isGameEnded={isGameEnded} setTotalTime={setTotalTime}/>
                   </Box>
-                  <AnswersBlock respuestas={respuestas} correcta={correcta} onAnswerSelect={handleAnswerSelect} isGameEnded={isGameEnded} />
-                 
-              
-       
-           
+                  <AnswersBlock darkMode={darkMode} respuestas={respuestas} correcta={correcta} onAnswerSelect={handleAnswerSelect} isGameEnded={isGameEnded}/>
         </Box>
     )
 }
\ No newline at end of file
diff --git a/webapp/src/components/game/timers/GameTimer.jsx b/webapp/src/components/game/timers/GameTimer.jsx
new file mode 100644
index 00000000..2e324cf6
--- /dev/null
+++ b/webapp/src/components/game/timers/GameTimer.jsx
@@ -0,0 +1,33 @@
+import { useEffect, useState } from 'react';
+import { Box, Text } from '@chakra-ui/react';
+import { FaRegClock } from 'react-icons/fa';
+
+
+
+export function GameTimer({darkMode, isGameEnded, setTotalTime }) {
+  const [seconds, setSeconds] = useState(0);
+
+  useEffect(() => {
+    if (isGameEnded) {
+      setTotalTime(seconds);
+      return;
+    }
+
+    const intervalId = setInterval(() => {
+      setSeconds(seconds => seconds + 1);
+    }, 1000);
+
+    return () => clearInterval(intervalId);
+  }, [isGameEnded, seconds, setTotalTime]);
+
+  let textColor = darkMode.darkMode? "#FCFAF0" : "#08313A";
+
+  return (
+    <Box display="flex" alignItems="baseline">
+        <Box display="flex" alignItems="center" margin="1em">
+            <FaRegClock style={{ marginRight: "1em", color:{textColor}}} size="2em" />
+            <Text color={textColor} fontSize="1.3em"> {seconds} </Text>
+        </Box>
+    </Box>
+  );
+}
\ No newline at end of file
diff --git a/webapp/src/components/game/timers/Timer.jsx b/webapp/src/components/game/timers/Timer.jsx
new file mode 100644
index 00000000..e8f318a8
--- /dev/null
+++ b/webapp/src/components/game/timers/Timer.jsx
@@ -0,0 +1,59 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { CircularProgress, CircularProgressLabel, useColorModeValue } from '@chakra-ui/react';
+import { Box } from "@chakra-ui/react";
+
+export const Timer = React.memo(({darkMode,  onTimeout, timeout = 30000, resetTimer }) => {
+    const [progress, setProgress] = useState(100); // Inicia el progreso en 100%
+    const intervalRef = useRef(null);
+
+    useEffect(() => {
+        resetTimer.current = resetTimerFunction;
+    }, []);
+
+    useEffect(() => {
+        const startTime = Date.now();
+        intervalRef.current = setInterval(() => {
+            const elapsedTime = Date.now() - startTime;
+            const remainingTime = timeout - elapsedTime;
+            const remainingProgress = (remainingTime / timeout) * 100;
+            setProgress(remainingProgress > 0 ? remainingProgress : 0);
+            if (remainingProgress <= 0) {
+                clearInterval(intervalRef.current);
+                onTimeout();
+            }
+        }, 1000); // Actualiza el progreso cada segundo
+
+        return () => clearInterval(intervalRef.current);
+    }, [timeout, onTimeout]);
+
+    const resetTimerFunction = () => {
+        clearInterval(intervalRef.current);
+        setProgress(100);
+        const startTime = Date.now();
+        intervalRef.current = setInterval(() => {
+            const elapsedTime = Date.now() - startTime;
+            const remainingTime = timeout - elapsedTime;
+            const remainingProgress = (remainingTime / timeout) * 100;
+            setProgress(remainingProgress > 0 ? remainingProgress : 0);
+            if (remainingProgress <= 0) {
+                clearInterval(intervalRef.current);
+                onTimeout();
+            }
+        }, 1000); // Actualiza el progreso cada segundo
+    };
+
+    const color = useColorModeValue(
+        progress > 66.6 ? "green.400" : progress > 33.3 ? "orange.400" : "red.400",
+        progress > 66.6 ? "green.500" : progress > 33.3 ? "orange.500" : "red.500"
+    );
+
+    let textColor = darkMode.darkMode? "#FCFAF0" : "#08313A";
+
+    return (
+        <Box marginLeft="2em" marginTop="1em" marginBottom="1em">
+            <CircularProgress value={progress} size="120px" color={color}>
+                <CircularProgressLabel color={textColor}>{Math.ceil(progress / 100 * timeout / 1000)}s</CircularProgressLabel>
+            </CircularProgress>
+        </Box>
+    );
+});
diff --git a/webapp/src/components/navbar/NavBar.js b/webapp/src/components/navbar/NavBar.js
index dcaad239..e444da8d 100644
--- a/webapp/src/components/navbar/NavBar.js
+++ b/webapp/src/components/navbar/NavBar.js
@@ -1,9 +1,26 @@
 import React, { useContext, useState } from 'react';
-import { AppBar, Toolbar, Button, IconButton, Avatar, Menu, MenuItem, Typography,ListItem } from '@mui/material';
+import { AppBar, Toolbar, Button, IconButton, Avatar, Menu, MenuItem, Typography,ListItem, Switch } from '@mui/material';
+import { styled } from '@mui/system';
 import { Link } from 'react-router-dom';
 import { AuthContext } from '../authcontext';
 
-const NavBar = () => {
+
+const CustomSwitch = styled(Switch)({
+  '& .MuiSwitch-switchBase.Mui-checked': {
+    color: 'white', // Color del thumb cuando el switch está activado
+  },
+  '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': {
+    backgroundColor: 'white', // Color del track cuando el switch está activado
+  },
+  '& .MuiSwitch-switchBase': {
+    color: 'black', // Color del thumb cuando el switch está desactivado
+  },
+  '& .MuiSwitch-track': {
+    backgroundColor: 'black', // Color del track cuando el switch está desactivado
+  },
+});
+
+const NavBar = ({ setDarkMode }) => {
   const { isLoggedIn,username } = useContext(AuthContext);
   const [anchorEl, setAnchorEl] = useState(null);
 
@@ -15,6 +32,10 @@ const NavBar = () => {
     setAnchorEl(null);
   };
 
+  const handleToggle = () => {
+    setDarkMode(prevDarkMode => !prevDarkMode);
+  };
+
   console.log('isLoggedIn', isLoggedIn);
   return (
     <AppBar position="static">
@@ -23,6 +44,7 @@ const NavBar = () => {
           Home
         </Button>
         <Typography variant="h6" component="div" sx={{ flexGrow: 1 }} />
+        <CustomSwitch onChange={handleToggle} />
         {isLoggedIn() ? (
          <>
          <IconButton onClick={handleClick}>
diff --git a/webapp/src/index.js b/webapp/src/index.js
index 3ea19f16..29d225c0 100644
--- a/webapp/src/index.js
+++ b/webapp/src/index.js
@@ -3,10 +3,12 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import { ColorModeScript } from "@chakra-ui/react";
+
 
 ReactDOM.render(
   <React.StrictMode>
-    
+    <ColorModeScript initialColorMode="light" />
     <App />
     
   </React.StrictMode>,