diff --git a/gatewayservice/gateway-service.js b/gatewayservice/gateway-service.js
index c8de682a..29dbe2a9 100644
--- a/gatewayservice/gateway-service.js
+++ b/gatewayservice/gateway-service.js
@@ -2,7 +2,9 @@ const express = require("express");
 const axios = require("axios");
 const cors = require("cors");
 const promBundle = require("express-prom-bundle");
-
+const YAML = require('yaml');
+const fs = require("fs");
+const swaggerUi = require('swagger-ui-express'); 
 const app = express();
 const port = 8000;
 
@@ -155,6 +157,21 @@ app.get("/ranking", async (req, res) => {
   }
 });
 
+openapiPath='./openapi.yaml'
+if (fs.existsSync(openapiPath)) {
+  const file = fs.readFileSync(openapiPath, 'utf8');
+
+  // Parse the YAML content into a JavaScript object representing the Swagger document
+  const swaggerDocument = YAML.parse(file);
+
+  // Serve the Swagger UI documentation at the '/api-doc' endpoint
+  // This middleware serves the Swagger UI files and sets up the Swagger UI page
+  // It takes the parsed Swagger document as input
+  app.use('/api-doc', swaggerUi.serve, swaggerUi.setup(swaggerDocument));
+} else {
+  console.log("Not configuring OpenAPI. Configuration file not present.")
+}
+
 // Start the gateway service
 const server = app.listen(port, () => {
   console.log(`Gateway Service listening at http://localhost:${port}`);
diff --git a/gatewayservice/openapi.yaml b/gatewayservice/openapi.yaml
new file mode 100644
index 00000000..f997dde0
--- /dev/null
+++ b/gatewayservice/openapi.yaml
@@ -0,0 +1,367 @@
+openapi: 3.0.0
+info:
+  title: Gateway Service API
+  version: 1.0.0
+  description: API gateway for managing authentication, user information, game statistics, and questions.
+
+servers:
+  - url: http://localhost:8000
+    description: Local development server
+
+paths:
+  /health:
+    get:
+      summary: Health Check
+      responses:
+        '200':
+          description: OK
+          content:
+            application/json:
+              schema:
+                type: object
+                properties:
+                  status:
+                    type: string
+                    example: OK
+
+  /login:
+    post:
+      summary: Authenticate User
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/LoginRequest'
+      responses:
+        '200':
+          description: Successful authentication
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/AuthResponse'
+        '400':
+          description: Invalid request
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/Error'
+        '403':
+          description: Forbidden
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/Error'
+
+  /adduser:
+    post:
+      summary: Add User
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/User'
+      responses:
+        '200':
+          description: User added successfully
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/User'
+        '400':
+          description: Invalid request
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/Error'
+        '403':
+          description: Forbidden
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/Error'
+
+  /userInfo:
+    get:
+      summary: Get User Information
+      parameters:
+        - in: query
+          name: userId
+          schema:
+            type: string
+          description: ID of the user to retrieve information for
+      responses:
+        '200':
+          description: User information retrieved successfully
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/UserInfo'
+        '400':
+          description: Invalid request
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/Error'
+        '403':
+          description: Forbidden
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/Error'
+
+  /saveGameList:
+    post:
+      summary: Save Game List
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/GameList'
+      responses:
+        '200':
+          description: Game list saved successfully
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/SuccessMessage'
+        '400':
+          description: Invalid request
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/Error'
+        '403':
+          description: Forbidden
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/Error'
+
+  /questions:
+    get:
+      summary: Get Questions
+      parameters:
+        - in: query
+          name: category
+          schema:
+            type: string
+          description: Category of questions to retrieve
+      responses:
+        '200':
+          description: Questions retrieved successfully
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/QuestionList'
+        '400':
+          description: Invalid request
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/Error'
+        '403':
+          description: Forbidden
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/Error'
+
+    post:
+      summary: Add Question
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/Question'
+      responses:
+        '200':
+          description: Question added successfully
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/SuccessMessage'
+        '400':
+          description: Invalid request
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/Error'
+        '403':
+          description: Forbidden
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/Error'
+
+  /stats:
+    get:
+      summary: Get Statistics
+      parameters:
+        - in: query
+          name: userId
+          schema:
+            type: string
+          description: ID of the user to retrieve statistics for
+      responses:
+        '200':
+          description: Statistics retrieved successfully
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/Stats'
+        '400':
+          description: Invalid request
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/Error'
+        '403':
+          description: Forbidden
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/Error'
+
+  /saveGame:
+    post:
+      summary: Save Game
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/Game'
+      responses:
+        '200':
+          description: Game saved successfully
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/SuccessMessage'
+        '400':
+          description: Invalid request
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/Error'
+        '403':
+          description: Forbidden
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/Error'
+
+  /ranking:
+    get:
+      summary: Get Ranking
+      parameters:
+        - in: query
+          name: category
+          schema:
+            type: string
+          description: Category to filter the ranking
+      responses:
+        '200':
+          description: Ranking retrieved successfully
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RankingList'
+        '400':
+          description: Invalid request
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/Error'
+        '403':
+          description: Forbidden
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/Error'
+
+components:
+  schemas:
+    LoginRequest:
+      type: object
+      properties:
+        username:
+          type: string
+        password:
+          type: string
+
+    AuthResponse:
+      type: object
+      properties:
+        token:
+          type: string
+
+    User:
+      type: object
+      properties:
+        username:
+          type: string
+        password:
+          type: string
+        createdAt:
+          type: string
+          format: date-time
+        games:
+          $ref: '#/components/schemas/GameList'
+
+    UserInfo:
+      type: object
+      properties:
+        username:
+          type: string
+        createdAt:
+          type: string
+          format: date-time
+        games:
+          $ref: '#/components/schemas/GameList'
+
+    GameList:
+      type: object
+      properties:
+        games:
+          type: array
+          items:
+            type: object
+
+    QuestionList:
+      type: array
+      items:
+        type: object
+
+    Question:
+      type: object
+      properties:
+
+    Stats:
+      type: object
+      properties:
+
+    Game:
+      type: object
+      properties:
+
+    SuccessMessage:
+      type: object
+      properties:
+        message:
+          type: string
+
+    RankingList:
+      type: array
+      items:
+        type: object
+
+    Error:
+      type: object
+      properties:
+        error:
+          type: string
diff --git a/gatewayservice/package-lock.json b/gatewayservice/package-lock.json
index fc5f2d60..17be91a7 100644
--- a/gatewayservice/package-lock.json
+++ b/gatewayservice/package-lock.json
@@ -12,7 +12,9 @@
                 "axios": "^1.6.5",
                 "cors": "^2.8.5",
                 "express": "^4.18.2",
-                "express-prom-bundle": "^7.0.0"
+                "express-prom-bundle": "^7.0.0",
+                "swagger-ui-express": "^5.0.0",
+                "yaml": "^2.4.1"
             },
             "devDependencies": {
                 "jest": "^29.7.0",
@@ -4389,6 +4391,25 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
+        "node_modules/swagger-ui-dist": {
+            "version": "5.12.3",
+            "resolved": "https://registry.npmjs.org/swagger-ui-dist/-/swagger-ui-dist-5.12.3.tgz",
+            "integrity": "sha512-UAFxQSzxVkY/yfmipeMLj4LwH6I/ZGcfezwSquPm2U9CqOiHp8L6fD7TcyPDYfCZuHFaPw5y4io+fny37Ov9NQ=="
+        },
+        "node_modules/swagger-ui-express": {
+            "version": "5.0.0",
+            "resolved": "https://registry.npmjs.org/swagger-ui-express/-/swagger-ui-express-5.0.0.tgz",
+            "integrity": "sha512-tsU9tODVvhyfkNSvf03E6FAk+z+5cU3lXAzMy6Pv4av2Gt2xA0++fogwC4qo19XuFf6hdxevPuVCSKFuMHJhFA==",
+            "dependencies": {
+                "swagger-ui-dist": ">=5.0.0"
+            },
+            "engines": {
+                "node": ">= v0.10.32"
+            },
+            "peerDependencies": {
+                "express": ">=4.0.0 || >=5.0.0-beta"
+            }
+        },
         "node_modules/tdigest": {
             "version": "0.1.2",
             "resolved": "https://registry.npmjs.org/tdigest/-/tdigest-0.1.2.tgz",
@@ -4636,6 +4657,17 @@
             "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
             "dev": true
         },
+        "node_modules/yaml": {
+            "version": "2.4.1",
+            "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.4.1.tgz",
+            "integrity": "sha512-pIXzoImaqmfOrL7teGUBt/T7ZDnyeGBWyXQBvOVhLkWLN37GXv8NMLK406UY6dS51JfcQHsmcW5cJ441bHg6Lg==",
+            "bin": {
+                "yaml": "bin.mjs"
+            },
+            "engines": {
+                "node": ">= 14"
+            }
+        },
         "node_modules/yargs": {
             "version": "17.7.2",
             "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
diff --git a/gatewayservice/package.json b/gatewayservice/package.json
index cb57ef13..46723ad7 100644
--- a/gatewayservice/package.json
+++ b/gatewayservice/package.json
@@ -21,7 +21,9 @@
         "axios": "^1.6.5",
         "cors": "^2.8.5",
         "express": "^4.18.2",
-        "express-prom-bundle": "^7.0.0"
+        "express-prom-bundle": "^7.0.0",
+        "swagger-ui-express": "^5.0.0",
+        "yaml": "^2.4.1"
     },
     "devDependencies": {
         "jest": "^29.7.0",
diff --git a/webapp/src/components/Nav/Nav.js b/webapp/src/components/Nav/Nav.js
index 8c62a3a7..ab1083ed 100644
--- a/webapp/src/components/Nav/Nav.js
+++ b/webapp/src/components/Nav/Nav.js
@@ -22,7 +22,7 @@ const Nav = () => {
   };
 
   return (
-    <Box as="nav" display="flex" alignItems="center" justifyContent="space-between" p={4} bg={bgColor}>
+    <Box as="nav" display="flex" alignItems="center" justifyContent="space-between" p={4} bg={bgColor} width="100%">
       <Box textAlign="center" ml={3}>
         <Heading as="h1" size="xl" color={textColor}>WIQ</Heading>
       </Box>
@@ -50,6 +50,7 @@ const Nav = () => {
         <Button variant="link" color={textColor} mr={4} onClick={() => handleNavigate("/perfil")}>Perfil</Button>
       </Flex>
       <Flex className="rightItems" alignItems="center">
+        <Button variant="link" color={textColor} mr={4} onClick={() => handleNavigate("/sobre")}>Sobre nosotros</Button>
         <Button variant="link" color={textColor} mr={4} onClick={() => handleConfig()}>Opciones</Button>
         <Button variant="link" color={textColor} onClick={() => logout()}>Desconectarse</Button>
         <Switch isChecked={isDarkTheme} onChange={toggleColorMode} ml={4} />
diff --git a/webapp/src/pages/Perfil/Perfil.js b/webapp/src/pages/Perfil/Perfil.js
index 3c5f4219..4578fccd 100644
--- a/webapp/src/pages/Perfil/Perfil.js
+++ b/webapp/src/pages/Perfil/Perfil.js
@@ -8,7 +8,7 @@ const Perfil = () => {
   const gatewayUrl = process.env.GATEWAY_SERVICE_URL || "http://localhost:8000";
   const [userData, setUserData] = useState(null);
   const [loading, setLoading] = useState(true);
-  const [username,setUsername]=useState(localStorage.username);
+  const [username,setUsername]=useState(localStorage.username || 'error');
   const [error, setError] = useState(null);
 
   useEffect(() => {
@@ -27,61 +27,69 @@ const Perfil = () => {
 
   return (
     <>
-    <Nav/>
-    <Center py={8}>
-      <Box w="xl" borderWidth="1px" borderRadius="lg" overflow="hidden" boxShadow="lg">
-        <VStack p={8} align="start" spacing={6}>
-          <Heading as="h1" size="lg">
-            Detalles del Usuario
-          </Heading>
-          {loading ? (
-            <Center>
-              <Spinner />
-            </Center>
-          ) : (
-            <>
-              <Text>
-                <strong>Nombre de Usuario:</strong> {userData.username}
-              </Text>
-              <Text>
-                <strong>Fecha de creación de la cuenta:</strong>{" "}
-                {new Date(userData.createdAt).toLocaleString()}
-              </Text>
-              <Heading as="h2" size="md">
-                Partidas Recientes
-              </Heading>
-              {userData.games.length > 0 ? (
-                <Table variant="simple">
-                  <Thead>
-                    <Tr>
-                      <Th>Modo de Juego</Th>
-                      <Th>Respuestas Correctas</Th>
-                      <Th>Respuestas Incorrectas</Th>
-                      <Th>Puntos</Th>
-                      <Th>Tiempo Promedio</Th>
-                    </Tr>
-                  </Thead>
-                  <Tbody>
-                    {userData.games.slice(0, 10).map((game, index) => (
-                      <Tr key={index}>
-                        <Td>{game.gamemode}</Td>
-                        <Td>{game.correctAnswers}</Td>
-                        <Td>{game.incorrectAnswers}</Td>
-                        <Td>{game.points}</Td>
-                        <Td>{game.avgTime} segundos</Td>
-                      </Tr>
-                    ))}
-                  </Tbody>
-                </Table>
-              ) : (
-                <Text>No hay partidas recientes.</Text>
-              )}
-            </>
-          )}
-        </VStack>
-      </Box>
-    </Center>
-    <Footer/>
+      <Nav />
+      <Center py={8}>
+        <Box w="xl" borderWidth="1px" borderRadius="lg" overflow="hidden" boxShadow="lg" width="100%">
+          <VStack p={8} align="start" spacing={6}>
+            <Heading as="h1" size="lg">
+              Perfil del usuario
+            </Heading>
+            {loading ? (
+              <Center>
+                <Spinner />
+              </Center>
+            ) : error ? (
+              <Text>Error: {error}</Text>
+            ) : (
+              <>
+                {userData && (
+                  <>
+                    <Text>
+                      <strong>Nombre de usuario:</strong> {userData.username}
+                    </Text>
+                    <Text>
+                      <strong>Fecha de creación de la cuenta:</strong>{" "}
+                      {new Date(userData.createdAt).toLocaleString()}
+                    </Text>
+                    <Heading as="h2" size="md">
+                      Partidas Recientes
+                    </Heading>
+                    <div style={{ width: '100%' }}>
+                      {userData.games.length > 0 ? (
+                        <Table variant="simple">
+                          <Thead>
+                            <Tr>
+                              <Th>Modo de juego</Th>
+                              <Th>Respuestas correctas</Th>
+                              <Th>Respuestas incorrectas</Th>
+                              <Th>Puntos</Th>
+                              <Th>Tiempo promedio</Th>
+                            </Tr>
+                          </Thead>
+                          <Tbody>
+                            {userData.games.slice(0, 10).map((game, index) => (
+                              <Tr key={index}>
+                                <Td>{game.gamemode}</Td>
+                                <Td>{game.correctAnswers}</Td>
+                                <Td>{game.incorrectAnswers}</Td>
+                                <Td>{game.points}</Td>
+                                <Td>{game.avgTime} segundos</Td>
+                              </Tr>
+                            ))}
+                          </Tbody>
+                        </Table>
+                      ) : (
+                        <Text>No hay partidas recientes.</Text>
+                      )}
+                    </div>
+                  </>
+                )}
+              </>
+            )}
+          </VStack>
+        </Box>
+      </Center>
+      <Footer />
     </>
   );
 };
diff --git a/webapp/src/pages/Perfil/Perfil.test.js b/webapp/src/pages/Perfil/Perfil.test.js
new file mode 100644
index 00000000..ba00ad8c
--- /dev/null
+++ b/webapp/src/pages/Perfil/Perfil.test.js
@@ -0,0 +1,74 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import Perfil from './Perfil';
+
+describe('Perfil Component', () => {
+
+  test('renders user profile data after loading', async () => {
+    const mockUserData = {
+      username: 'testUser',
+      createdAt: new Date(),
+      games: [
+        { gamemode: 'clasico', correctAnswers: 5, incorrectAnswers: 2, points: 20, avgTime: 10 },
+        { gamemode: 'bateria', correctAnswers: 8, incorrectAnswers: 3, points: 35, avgTime: 15 }
+      ]
+    };
+
+    jest.spyOn(global, 'fetch').mockResolvedValueOnce({
+      json: jest.fn().mockResolvedValueOnce(mockUserData),
+    });
+
+    render(
+      <MemoryRouter>
+        <Perfil />
+      </MemoryRouter>
+    );
+    await waitFor(() => {
+      expect(screen.getByText('testUser')).toBeInTheDocument();
+      expect(screen.getByText(/Fecha de creación de la cuenta:/i)).toBeInTheDocument();
+      expect(screen.getByText('Partidas Recientes')).toBeInTheDocument();
+      expect(screen.getByText('clasico')).toBeInTheDocument();
+      expect(screen.getByText('5')).toBeInTheDocument();
+      expect(screen.getByText('2')).toBeInTheDocument();
+      expect(screen.getByText('35')).toBeInTheDocument();
+    });
+  });
+
+  test('displays an error message when profile loading fails', async () => {
+    jest.spyOn(global, 'fetch').mockRejectedValueOnce(new Error('Failed to fetch'));
+  
+    render(
+      <MemoryRouter>
+        <Perfil />
+      </MemoryRouter>
+    );
+  
+    await waitFor(() => {
+      expect(screen.getByText('Error: Failed to fetch')).toBeInTheDocument();
+    });
+  });
+
+  test('displays a message when there are no recent games', async () => {
+    const mockUserData = {
+      username: 'testUser',
+      createdAt: new Date(),
+      games: []
+    };
+  
+    jest.spyOn(global, 'fetch').mockResolvedValueOnce({
+      json: jest.fn().mockResolvedValueOnce(mockUserData),
+    });
+  
+    render(
+      <MemoryRouter>
+        <Perfil />
+      </MemoryRouter>
+    );
+  
+    await waitFor(() => {
+      expect(screen.getByText('No hay partidas recientes.')).toBeInTheDocument();
+    });
+  });
+  
+  
+});
\ No newline at end of file
diff --git a/webapp/src/pages/Ranking/Ranking.js b/webapp/src/pages/Ranking/Ranking.js
index 9d4dedd9..3b9e8eeb 100644
--- a/webapp/src/pages/Ranking/Ranking.js
+++ b/webapp/src/pages/Ranking/Ranking.js
@@ -108,7 +108,7 @@ const Ranking = () => {
     <>
     <Nav/>
     <div>
-      <Heading as="h2">Ranking - Modo {getModeName()}</Heading>
+      <Heading as="h2">Ranking - modo {getModeName()}</Heading>
       <Select id="displaySelector" onChange={handleDisplayChange}>
         {displayOptions.map(option => (
           <option key={option.value} value={option.value}>{option.label}</option>
diff --git a/webapp/src/pages/Ranking/Ranking.test.js b/webapp/src/pages/Ranking/Ranking.test.js
new file mode 100644
index 00000000..4938293e
--- /dev/null
+++ b/webapp/src/pages/Ranking/Ranking.test.js
@@ -0,0 +1,103 @@
+import React from 'react';
+import { render, fireEvent, waitFor, screen } from '@testing-library/react';
+import { BrowserRouter as Router } from 'react-router-dom';
+import '@testing-library/jest-dom/extend-expect';
+import Ranking from './Ranking';
+
+describe('Ranking component', () => {
+  test('renders loading state initially', () => {
+    render(
+      <Router>
+        <Ranking />
+      </Router>
+    );
+    expect(screen.getByText('Cargando ...')).toBeInTheDocument();
+  });
+
+  test('renders error message if fetching fails', async () => {
+    // Mock fetch function to simulate failure
+    jest.spyOn(global, 'fetch').mockImplementation(() =>
+      Promise.reject(new Error('Failed to fetch'))
+    );
+
+    render(
+      <Router>
+        <Ranking />
+      </Router>
+    );
+
+    // Wait for error message to be displayed
+    await waitFor(() => {
+      expect(screen.getByText('Error: Failed to fetch')).toBeInTheDocument();
+    });
+
+    // Restore fetch
+    global.fetch.mockRestore();
+  });
+
+  test('renders ranking table with data after successful fetch', async () => {
+    // Mock successful fetch response
+    const mockData = [{ username: 'user1', avgPoints: 50 }, { username: 'user2', avgPoints: 60 }];
+    jest.spyOn(global, 'fetch').mockImplementation(() =>
+      Promise.resolve({
+        json: () => Promise.resolve(mockData),
+      })
+    );
+  
+    render(
+      <Router>
+        <Ranking />
+      </Router>
+    );
+  
+    // Wait for table to be rendered with data
+    await waitFor(() => {
+      expect(screen.getByText('Usuario')).toBeInTheDocument();
+      expect(screen.getAllByText('Puntos promedio')[1]).toBeInTheDocument();
+      expect(screen.getByText('user1')).toBeInTheDocument();
+      expect(screen.getByText('50')).toBeInTheDocument();
+      expect(screen.getByText('user2')).toBeInTheDocument();
+      expect(screen.getByText('60')).toBeInTheDocument();
+    });
+  
+    // Restore fetch
+    global.fetch.mockRestore();
+  });
+  
+
+  test('changes gamemode when clicking on mode buttons', async () => {
+    const mockData = [{ username: 'user1', avgPoints: 50 }, { username: 'user2', avgPoints: 60 }];
+    jest.spyOn(global, 'fetch').mockImplementation(() =>
+      Promise.resolve({
+        json: () => Promise.resolve(mockData),
+      })
+    );
+  
+    render(
+        <Router>
+          <Ranking />
+        </Router>
+      );
+    
+      // Esperar a que se renderice la tabla con los datos
+      await waitFor(() => {
+        expect(screen.getByText('Usuario')).toBeInTheDocument();
+        expect(screen.getAllByText('Puntos promedio')[1]).toBeInTheDocument(); 
+        expect(screen.getByText('user1')).toBeInTheDocument();
+        expect(screen.getByText('50')).toBeInTheDocument();
+        expect(screen.getByText('user2')).toBeInTheDocument();
+        expect(screen.getByText('60')).toBeInTheDocument();
+      });
+    
+      const bateriaButton = screen.getByRole('button', { name: 'Batería de sabios' });
+    
+      fireEvent.click(bateriaButton);
+    
+      await waitFor(() => {
+        expect(screen.getByText('Ranking - modo Batería de sabios')).toBeInTheDocument();
+      });
+    
+      // Restaurar fetch
+      global.fetch.mockRestore();
+  });
+});
diff --git a/webapp/src/pages/Sobre/Sobre.js b/webapp/src/pages/Sobre/Sobre.js
index b6c934f0..663cb7ee 100644
--- a/webapp/src/pages/Sobre/Sobre.js
+++ b/webapp/src/pages/Sobre/Sobre.js
@@ -1,4 +1,5 @@
 import React from "react";
+import { Box, Table, Thead, Tbody, Tr, Th, Td, Link, Center, Heading } from "@chakra-ui/react";
 import Nav from '../../components/Nav/Nav.js';
 import Footer from '../../components/Footer/Footer.js';
 
@@ -12,31 +13,31 @@ const Sobre = () => {
   return (
     <>
       <Nav />
-      <div className="sobre-container">
-        <h1>Equipo WIQ_es1a</h1>
-        <h2>Nuestro equipo de desarrollo</h2>
-        <table className="designers-table">
-          <thead>
-            <tr>
-              <th>Nombre</th>
-              <th>UO</th>
-              <th>GitHub</th>
-            </tr>
-          </thead>
-          <tbody>
+      <Box className="sobre-container">
+        <Heading as="h1">Equipo WIQ_es1a</Heading>
+        <Heading as="h2" size="md">Nuestro equipo de desarrollo</Heading>
+        <Table className="designers-table">
+          <Thead>
+            <Tr>
+              <Th>Nombre</Th>
+              <Th>UO</Th>
+              <Th>GitHub</Th>
+            </Tr>
+          </Thead>
+          <Tbody>
             {designers.map((designer, index) => (
-              <tr key={index}>
-                <td>{designer.name}</td>
-                <td>{designer.id}</td>
-                <td><a href={designer.github} target="_blank" rel="noopener noreferrer">Mi GitHub</a></td>
-              </tr>
+              <Tr key={index}>
+                <Td>{designer.name}</Td>
+                <Td>{designer.id}</Td>
+                <Td><Link href={designer.github} isExternal>Mi GitHub</Link></Td>
+              </Tr>
             ))}
-          </tbody>
-        </table>
-      </div>
+          </Tbody>
+        </Table>
+      </Box>
       <Footer />
     </>
   );
 };
 
-export default Sobre;
\ No newline at end of file
+export default Sobre;
diff --git a/webapp/src/pages/Stats/Stats.js b/webapp/src/pages/Stats/Stats.js
index fcd07af5..1ed03d73 100644
--- a/webapp/src/pages/Stats/Stats.js
+++ b/webapp/src/pages/Stats/Stats.js
@@ -6,11 +6,12 @@ import Footer from "../../components/Footer/Footer.js";
 const Stats = () => {
   const gatewayUrl = process.env.GATEWAY_SERVICE_URL || "http://localhost:8000";
 
-  const [username, setUsername] = useState(localStorage.username);
+  const [username, setUsername] = useState(localStorage.username || 'error');
   const [stats, setStats] = useState(null);
   const [gamemode, setGamemode] = useState("clasico");
-  const [isLoading, setIsLoading] = useState(true);
+  const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState(null);
+  const [fetched,setFetched] = useState(false);
 
   const fetchStats = () => {
     setIsLoading(true);
@@ -28,11 +29,11 @@ const Stats = () => {
   };
   
   useEffect(() => {
-    const delayDebounceFn = setTimeout(() => {
+    if(!fetched){
       fetchStats();
-      },2000);
-  
-      return () => clearTimeout(delayDebounceFn);
+      setFetched(true);
+    }
+      
   }, [username, gamemode]);
 
   const handleUsernameChange = (event) => {
@@ -45,6 +46,10 @@ const Stats = () => {
     fetchStats();
   };
 
+  const handleSearch = () => {
+    fetchStats();
+  };
+
   const getModeName = () => {
     if(gamemode=="clasico"){
       return "Clásico";    
@@ -76,6 +81,7 @@ const Stats = () => {
             onChange={handleUsernameChange}
             data-testid="usernameInput"
           />
+          <Button onClick={handleSearch}>Buscar</Button>
           <Heading as="h2">Error: {error}</Heading>
           <p>
             Por favor compruebe si los valores del formulario son correctos e
@@ -91,7 +97,7 @@ const Stats = () => {
     <>
     <Nav />
     <div>
-      <label htmlFor="usernameInput"> <strong>Nombre de Usuario: </strong></label>
+      <label htmlFor="usernameInput"> <strong>Nombre de usuario: </strong></label>
       <Input
             type="text"
             id="usernameInput"
@@ -99,6 +105,7 @@ const Stats = () => {
             onChange={handleUsernameChange}
             data-testid="usernameInput"
           />
+          <Button onClick={handleSearch}>Buscar</Button>
       <div>
         <Button
           className={gamemode === "clasico" ? "active" : ""}
@@ -120,14 +127,8 @@ const Stats = () => {
         )}
         {stats && (
           <div>
-            <Heading as="h2">Estadísticas de usuario - Modo {getModeName()}</Heading>
+            <Heading as="h2">Estadísticas de {stats.username} - modo {getModeName()}</Heading>
             <Table>
-            <Thead>
-              <Tr>
-                <Th><strong>Usuario</strong></Th>
-                <Th>{stats.username}</Th>
-              </Tr>
-            </Thead>
             <Tbody>
               <Tr>
                 <Td><strong>Partidas jugadas</strong></Td>
diff --git a/webapp/src/pages/Stats/Stats.test.js b/webapp/src/pages/Stats/Stats.test.js
index 94ac902a..78f856f2 100644
--- a/webapp/src/pages/Stats/Stats.test.js
+++ b/webapp/src/pages/Stats/Stats.test.js
@@ -1,66 +1,187 @@
 import React from 'react';
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import Stats from './Stats';
-
-jest.mock('axios', () => ({
-  get: jest.fn(() =>
-    Promise.resolve({
-      data: {
-        username: 'testUser',
-        nGamesPlayed: 5,
-        avgPoints: 20,
-        totalPoints: 100,
-        totalCorrectQuestions: 30,
-        totalIncorrectQuestions: 10,
-        ratioCorrectToIncorrect: 3,
-        avgTime: 10,
-      },
-    })
-  ),
-}));
+import { BrowserRouter as Router } from 'react-router-dom';
+import userEvent from '@testing-library/user-event';
 
 describe('Stats component', () => {
-  it('renders username input field', () => {
-    render(<Stats />);
-    expect(screen.getByLabelText('Nombre de Usuario:')).toBeInTheDocument();
+  beforeEach(() => {
+    // Limpiamos el localStorage antes de cada prueba
+    localStorage.clear();
   });
 
-  it('renders loading message initially', () => {
-    render(<Stats />);
-    expect(screen.getByText(/Cargando .../i)).toBeInTheDocument();
+  test('renders user statistics', async () => {
+    render(
+      <Router>
+        <Stats />
+      </Router>
+    );
+
+    // Espera hasta que el texto "Cargando ..." desaparezca
+    await waitFor(() => {
+      expect(screen.queryByText('Cargando ...')).not.toBeInTheDocument();
+    });
+
+    // Ahora, realiza las aserciones sobre las estadísticas
+    const statisticWordArray = screen.getAllByText(/Estadísticas/i);
+    statisticWordArray.forEach(statisticWord => {
+      expect(statisticWord).toBeInTheDocument();
+    });
   });
 
-  it('fetches stats on search button click', async () => {
-    render(<Stats />);
-    const searchButton = screen.getByRole('button', { name: /Buscar/i });
-    fireEvent.click(searchButton);
-    await waitFor(() => expect(screen.getByText(/Usuario: testUser/i)).toBeInTheDocument());
+  test('fetches user statistics and displays them', async () => {
+    const userData = {
+      username: 'testUser',
+      nGamesPlayed: 10,
+      avgPoints: 7,
+      totalPoints: 70,
+      totalCorrectQuestions: 20,
+      totalIncorrectQuestions: 5,
+      ratioCorrect: 80,
+      avgTime: 15
+    };
+  
+    // Simulamos el usuario almacenado en localStorage
+    localStorage.setItem('username', 'testUser'); // Establecer el nombre de usuario aquí
+  
+    // Mock de la respuesta de la API
+    global.fetch = jest.fn().mockResolvedValue({
+      json: jest.fn().mockResolvedValue(userData)
+    });
+  
+    // Renderizamos el componente
+    render(
+      <Router>
+        <Stats />
+      </Router>
+    );
+  
+
+    // Verificamos que se muestre una tabla
+    const table = await screen.findByRole('table');
+    expect(table).toBeInTheDocument();
+
+    // Verificar que la tabla contiene las columnas esperadas
+    const columnHeaders = ['Partidas jugadas', 'Puntos por partida', 'Puntos totales', 'Preguntas correctas totales', 'Preguntas incorrectas totales', 'Porcentaje de aciertos', 'Tiempo por pregunta (s):'];
+    columnHeaders.forEach(headerText => {
+      const headerElement = screen.getByText(headerText);
+      expect(headerElement).toBeInTheDocument();
+    });
+
+    // Verificar que la tabla contiene los datos esperados
+    expect(screen.getByText(userData.nGamesPlayed.toString())).toBeInTheDocument();
+    expect(screen.getByText(userData.avgPoints.toFixed(2))).toBeInTheDocument();
+    expect(screen.getByText(userData.totalPoints.toString())).toBeInTheDocument();
+    expect(screen.getByText(userData.totalCorrectQuestions.toString())).toBeInTheDocument();
+    expect(screen.getByText(userData.totalIncorrectQuestions.toString())).toBeInTheDocument();
+    expect(screen.getByText(userData.ratioCorrect.toFixed(2) + '%')).toBeInTheDocument();
+    expect(screen.getByText(userData.avgTime.toFixed(2))).toBeInTheDocument();
   });
 
-  it('handles error correctly', async () => {
-    // Mocking axios.get to simulate an error
-    jest.spyOn(console, 'error').mockImplementation(() => {});
-    jest.spyOn(console, 'log').mockImplementation(() => {});
-    jest.mock('axios', () => ({
-      get: jest.fn(() => Promise.reject(new Error('Request failed'))),
-    }));
-
-    render(<Stats />);
-    const searchButton = screen.getByRole('button', { name: /Buscar/i });
-    fireEvent.click(searchButton);
-    await waitFor(() => expect(screen.getByText(/Error: Request failed/i)).toBeInTheDocument());
+  test('displays an error message when fetching statistics fails', async () => {
+    // Simulamos el usuario almacenado en localStorage
+    const userId = 'testUser';
+    localStorage.setItem('username', userId);
+
+    // Mock de la respuesta de la API para simular un error
+    global.fetch = jest.fn().mockRejectedValue(new Error('Failed to fetch'));
+
+    // Renderizamos el componente
+    render(
+      <Router>
+        <Stats />
+      </Router>
+    );
+
+    // Verificamos que se muestre el mensaje de error
+    await screen.findByText("Error: Failed to fetch");
   });
 
-  it('displays stats correctly', async () => {
-    render(<Stats />);
-    const searchButton = screen.getByRole('button', { name: /Buscar/i });
-    fireEvent.click(searchButton);
-    await waitFor(() => expect(screen.getByText(/Juegos Jugados: 5/i)).toBeInTheDocument());
-    expect(screen.getByText(/Promedio de Puntos: 20/i)).toBeInTheDocument();
-    expect(screen.getByText(/Puntos Totales: 100/i)).toBeInTheDocument();
-    expect(screen.getByText(/Preguntas Correctas Totales: 30/i)).toBeInTheDocument();
-    expect(screen.getByText(/Preguntas Incorrectas Totales: 10/i)).toBeInTheDocument();
-    expect(screen.getByText(/Ratio Correctas\/Incorrectas: 3/i)).toBeInTheDocument();
-    expect(screen.getByText(/Tiempo por pregunta \(s\): 10/i)).toBeInTheDocument();
+  test('updates user statistics when username changes', async () => {
+    const userData = {
+      username: 'testUser',
+      nGamesPlayed: 10,
+      avgPoints: 7,
+      totalPoints: 70,
+      totalCorrectQuestions: 20,
+      totalIncorrectQuestions: 5,
+      ratioCorrect: 80,
+      avgTime: 15
+    };
+  
+    // Simulamos el usuario almacenado en localStorage
+    localStorage.setItem('username', 'testUser');
+  
+    // Mock de la respuesta de la API
+    global.fetch = jest.fn().mockResolvedValue({
+      json: jest.fn().mockResolvedValue(userData)
+    });
+  
+    // Renderizamos el componente
+    render(
+      <Router>
+        <Stats />
+      </Router>
+    );
+
+    await screen.findByRole('table');
+  
+    const newUsername = 'newUser';
+    localStorage.setItem('username', newUsername);
+
+    const searchbutton=await screen.findByText('Buscar');
+    userEvent.click(searchbutton);
+  
+    render(
+      <Router>
+        <Stats />
+      </Router>
+    );
+  
+    expect(fetch).toHaveBeenCalledWith(expect.stringContaining(newUsername));
+  });
+  
+  test('updates user statistics when game mode changes', async () => {
+    const userData = {
+      username: 'testUser',
+      nGamesPlayed: 10,
+      avgPoints: 7,
+      totalPoints: 70,
+      totalCorrectQuestions: 20,
+      totalIncorrectQuestions: 5,
+      ratioCorrect: 80,
+      avgTime: 15
+    };
+  
+    // Simulamos el usuario almacenado en localStorage
+    localStorage.setItem('username', 'testUser');
+  
+    // Mock de la respuesta de la API
+    global.fetch = jest.fn().mockResolvedValue({
+      json: jest.fn().mockResolvedValue(userData)
+    });
+  
+    // Renderizamos el componente
+    render(
+      <Router>
+        <Stats />
+      </Router>
+    );
+    await screen.findByRole('table');
+    const modeButton = screen.getByRole('button', { name: /Batería de sabios/i });
+    userEvent.click(modeButton);
+  
+    render(
+      <Router>
+        <Stats />
+      </Router>
+    );
+  
+    await waitFor(() => {
+      expect(screen.queryByText('Estadísticas de testUser - modo Batería de sabios')).toBeInTheDocument();
+    });
+
   });
 });
+
+