diff --git a/webapp/public/saber-ganar-logo.png b/webapp/public/saber-ganar-logo.png
new file mode 100644
index 00000000..6c7718f3
Binary files /dev/null and b/webapp/public/saber-ganar-logo.png differ
diff --git a/webapp/src/components/Home.css b/webapp/src/components/Home.css
new file mode 100644
index 00000000..0f1ebd67
--- /dev/null
+++ b/webapp/src/components/Home.css
@@ -0,0 +1,37 @@
+.home{
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: flex-start;
+    height: 94vh;
+    background-image: linear-gradient(to top, rgba(255, 0, 0, 0), #ee0e5173);
+}
+
+.tituloHome{
+    padding-bottom: 2vh;
+}
+
+.tituloHome_h1{
+    padding-bottom: 2vh;
+    font-weight: 800!important;
+    font-size: 3em!important;
+}
+
+.botonHome{
+    background-color: var(--rosa) !important;
+}
+
+.boxHome{
+    display: flex;
+    flex-direction: column;
+    background-color: #ffffff7a;
+    padding-bottom: 1.5em;
+    border-radius: 1em;
+    padding-right: 50px;
+    padding-left: 50px;
+}
+
+.imagenHome{
+    padding-top: 10vh;
+    padding-bottom: 10vh;
+}
\ No newline at end of file
diff --git a/webapp/src/components/Home.js b/webapp/src/components/Home.js
index 59be3d50..97dfb872 100644
--- a/webapp/src/components/Home.js
+++ b/webapp/src/components/Home.js
@@ -3,22 +3,31 @@ import CssBaseline from '@mui/material/CssBaseline';
 import Container from '@mui/material/Container';
 import Typography from '@mui/material/Typography';
 import Button from '@mui/material/Button';
+import "./Home.css";
 
 function Home() {
 
   return (
-    
-    <Container component="home" maxWidth="xs">
+    <div className="home">
 
+      <img className="imagenHome" src="/saber-ganar-logo.png" alt="Logo" />
 
-      <CssBaseline />
-      <Typography component="h1" variant="h5" align="center" sx={{ marginTop: 2 }}>
-        HOME
-      </Typography>
-      <Button variant="contained" color="primary" fullWidth onClick={() => { window.location.href = '/game'; }}>
-        Go to Game
-      </Button>
-    </Container>
+      <Container className="boxHome" maxWidth="xs">
+        <CssBaseline />
+
+        <Typography className="tituloHome_h1" component="h1" variant="h5" align="center" sx={{ marginTop: 2 }}>
+          BIENVENIDO
+        </Typography>
+
+        <Typography className="tituloHome" component="h2" variant="h5" align="center" sx={{ marginTop: 2 }}>
+        PULSA EL BOTÓN PARA JUGAR
+        </Typography>
+        <Button className="botonHome" variant="contained" color="primary" fullWidth onClick={() => { window.location.href = '/game'; }}>
+          JUGAR
+        </Button>
+      </Container>
+      
+    </div>
   );
 }
 
diff --git a/webapp/src/components/Home.test.js b/webapp/src/components/Home.test.js
new file mode 100644
index 00000000..0ab637a3
--- /dev/null
+++ b/webapp/src/components/Home.test.js
@@ -0,0 +1,30 @@
+import { render, screen } from '@testing-library/react';
+import Home from './Home';
+import userEvent from '@testing-library/user-event';
+import {BrowserRouter} from 'react-router-dom';
+
+let assignMock = jest.fn();
+
+delete window.location;
+window.location = { assign: assignMock };
+
+afterEach(() => {
+  assignMock.mockClear();
+});
+
+
+test('iniciar', () => {
+  render(<Home />);
+  const linkElement = screen.getByText(/BIENVENIDO/i);
+  expect(linkElement).toBeInTheDocument();
+  expect(screen.getByText(/PULSA EL BOTÓN PARA JUGAR/i)).toBeInTheDocument();
+});
+
+test('jugar', async () => {
+    render(<Home />, {wrapper: BrowserRouter});
+    const user = userEvent.setup()
+    const jugarButton = screen.getByRole('button', { name: /JUGAR/i });
+    await user.click(jugarButton);
+    //expect(screen.getByText(/Loading questions.../i)).toBeInTheDocument()
+
+});
\ No newline at end of file
diff --git a/webapp/src/components/Navbar.css b/webapp/src/components/Navbar.css
index 027c6eee..df319c5b 100644
--- a/webapp/src/components/Navbar.css
+++ b/webapp/src/components/Navbar.css
@@ -26,6 +26,6 @@
   }
   
   .nav-menu a.active {
-    background-color: #04AA6D;
+    background-color: var(--rosa);
     color: white;
   }
\ No newline at end of file
diff --git a/webapp/src/components/QuizGame.test.js b/webapp/src/components/QuizGame.test.js
new file mode 100644
index 00000000..11998be6
--- /dev/null
+++ b/webapp/src/components/QuizGame.test.js
@@ -0,0 +1,27 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import QuizGame from './QuizGame';
+import axios from 'axios';
+import MockAdapter from 'axios-mock-adapter';
+
+const mockAxios = new MockAdapter(axios);
+
+beforeEach(() => {
+    mockAxios.reset();
+  });
+
+test('Pregunta correcta', () => {
+    mockAxios.onGet('http://localhost:8000/generate-question').reply(200, {
+    question: "pregunta",
+  correctAnswer: "correcta",
+  allAnswers: ["correcta","no1","no2","no3"]});
+
+  render(<QuizGame />);
+  expect(screen.getByText(/Loading questions.../i)).toBeInTheDocument();
+
+  
+
+  const correcta = screen.getByRole('button', { name: /correcta/i });
+  fireEvent.click(correcta);
+
+  
+});
\ No newline at end of file
diff --git a/webapp/src/components/login/Login.css b/webapp/src/components/login/Login.css
index d5330508..aa74e13f 100644
--- a/webapp/src/components/login/Login.css
+++ b/webapp/src/components/login/Login.css
@@ -9,16 +9,16 @@
   }
 
   .text{
-    margin-top: 20ev;
+    margin-top: 20px;
     text-align: center;
-    font-size: 20ev;
+    font-size: 20px;
     font-weight: bold;
     font-display: 'Fira Sans', sans-serif;
   }
   
   .underline{
     width: 20%;
-    margin-top: 7ev;
+    margin-top: 7px;
     height: 0.5em;
     border-radius: 9em;
     background: #EE0E51;
diff --git a/webapp/src/components/login/Login.js b/webapp/src/components/login/Login.js
index 5e832a54..e11e3b88 100644
--- a/webapp/src/components/login/Login.js
+++ b/webapp/src/components/login/Login.js
@@ -3,7 +3,6 @@ import React, { useState, useEffect  } from 'react';
 import axios from 'axios';
 import { Container, Typography, TextField, Button, Snackbar } from '@mui/material';
 import './Login.css';
-import Link from '@mui/material/Link';
 import logo from '../logo.png'
 
 const Login = () => {
diff --git a/webapp/src/components/login/Login.test.js b/webapp/src/components/login/Login.test.js
index af102dcf..101c8673 100644
--- a/webapp/src/components/login/Login.test.js
+++ b/webapp/src/components/login/Login.test.js
@@ -29,8 +29,8 @@ describe('Login component', () => {
       });
 
     // Verify that the user information is displayed
-    expect(screen.getByText(/Hello testUser!/i)).toBeInTheDocument();
-    expect(screen.getByText(/Your account was created on 1\/1\/2024/i)).toBeInTheDocument();
+    expect(screen.getByText(/Login successful/i)).toBeInTheDocument();
+    //expect(screen.getByText(/Your account was created on 1\/1\/2024/i)).toBeInTheDocument();
   });
 
   it('should handle error when logging in', async () => {
diff --git a/webapp/src/components/register/AddUser.css b/webapp/src/components/register/AddUser.css
index 1fee2b12..0ef4bdb3 100644
--- a/webapp/src/components/register/AddUser.css
+++ b/webapp/src/components/register/AddUser.css
@@ -8,16 +8,16 @@
   }
 
 .text{
-  margin-top: 20ev;
+  margin-top: 20px;
   text-align: center;
-  font-size: 20ev;
+  font-size: 20px;
   font-weight: bold;
   font-display: 'Fira Sans', sans-serif;
 }
 
 .underline{
   width: 20%;
-  margin-top: 7ev;
+  margin-top: 7px;
   height: 0.5em;
   border-radius: 9px;
   background: #EE0E51;
diff --git a/webapp/src/index.css b/webapp/src/index.css
index ec2585e8..cde4af60 100644
--- a/webapp/src/index.css
+++ b/webapp/src/index.css
@@ -11,3 +11,7 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+:root {
+  --rosa: #EE0E51;
+}
\ No newline at end of file