diff --git a/statservice/stat-service.test.js b/statservice/stat-service.test.js
index e477721..14e1816 100644
--- a/statservice/stat-service.test.js
+++ b/statservice/stat-service.test.js
@@ -49,4 +49,9 @@ describe('Stat Service', () => {
     const response = await request(app).get('/user-stats');
     expect(response.status).toBe(200);
   });
+
+  it('should get stats on GET /ranking', async () => {
+    const response = await request(app).get('/ranking');
+    expect(response.status).toBe(200);
+  });
 });
diff --git a/users/userservice/user-service.test.js b/users/userservice/user-service.test.js
index 0ec1d6e..ff47961 100644
--- a/users/userservice/user-service.test.js
+++ b/users/userservice/user-service.test.js
@@ -245,6 +245,11 @@ describe('User Service', () => {
     expect(response.status).toBe(200);
   });
 
+  it('should get the user on GET /user', async () => {
+    const response = await request(app).get('/user');
+    expect(response.status).toBe(200);
+  });
+
   it('should get the user on GET /current-user', async () => {
     const response = await request(app).get('/current-user');
     expect(response.status).toBe(200);
diff --git a/webapp/src/assets/wrappers/RankingContainer.js b/webapp/src/assets/wrappers/RankingContainer.js
index 2f449b1..52aef23 100644
--- a/webapp/src/assets/wrappers/RankingContainer.js
+++ b/webapp/src/assets/wrappers/RankingContainer.js
@@ -6,19 +6,19 @@ const Wrapper = styled.div`
   text-align: center;
   align-items: center;
   padding: 1rem;
-  max-width: 700px;
   box-shadow: var(--shadow-2);
 
   .header-container {
     display: flex;
+    justify-content: center;
     text-align: center;
     gap: 1rem;
     margin-bottom: 1.5rem;
   }
 
   .star-icon {
-    color: #f1ee24; /* Cambiar el color a amarillo */
-    font-size: 24px; /* Ajustar el tamaño del ícono si es necesario */
+    color: #f1ee24;
+    font-size: 24px;
   }
 
   & > h5 {
diff --git a/webapp/src/components/StatsContainer.jsx b/webapp/src/components/StatsContainer.jsx
index 4744c07..f3b16df 100644
--- a/webapp/src/components/StatsContainer.jsx
+++ b/webapp/src/components/StatsContainer.jsx
@@ -36,14 +36,14 @@ const StatsContainer = ({ userStats }) => {
       count: userStats?.correctAnswers || 0,
       icon: <FaCheckCircle />,
       color: '#1fb41f',
-      bcg: '#e0e8f9',
+      bcg: '#fef3c7',
     },
     {
       title: 'incorrect answers',
       count: userStats?.wrongAnswers || 0,
       icon: <FaBug />,
       color: '#d66a6a',
-      bcg: '#ffeeee',
+      bcg: '#fef3c7',
     },
   ];
 
diff --git a/webapp/src/pages/Ranking.jsx b/webapp/src/pages/Ranking.jsx
index 0b1902c..ec85ff5 100644
--- a/webapp/src/pages/Ranking.jsx
+++ b/webapp/src/pages/Ranking.jsx
@@ -1,6 +1,7 @@
 import { useLoaderData } from 'react-router-dom';
 import axios from 'axios';
 import RankingContainer from '../components/RankingContainer';
+import Wrapper from '../assets/wrappers/MenuContainer';
 
 const apiEndpoint =
   process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
@@ -43,7 +44,11 @@ export const loader = async () => {
 
 const Ranking = () => {
   const ranking = useLoaderData();
-  return <RankingContainer ranking={ranking} />;
+  return (
+    <Wrapper>
+      <RankingContainer ranking={ranking} />
+    </Wrapper>
+  );
 };
 
 export default Ranking;
diff --git a/webapp/src/tests/pages/Ranking.test.js b/webapp/src/tests/pages/Ranking.test.js
index 8964781..406df70 100644
--- a/webapp/src/tests/pages/Ranking.test.js
+++ b/webapp/src/tests/pages/Ranking.test.js
@@ -9,7 +9,7 @@ jest.mock('react-router-dom', () => ({
 
 jest.mock('../../App', () => () => <div>Mock App</div>);
 
-test('renders the Ranking page heading', () => {
+describe('Ranking Page', () => {
   const mockRankingData = [
     {
       gameId: 'a4acc100-52d6-46ab-8ce2-b0acccf93c03',
@@ -27,12 +27,41 @@ test('renders the Ranking page heading', () => {
     },
   ];
 
-  // Mock de useLoaderData para devolver los datos mockeados
-  useLoaderData.mockReturnValue(mockRankingData);
+  beforeEach(() => {
+    useLoaderData.mockReturnValue(mockRankingData);
+  });
 
-  render(<Ranking />);
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
 
-  // Busca el elemento con el texto "Ranking Page"
-  expect(screen.getByText(/hall of fame/i)).toBeInTheDocument();
-  expect(screen.getByText(/user/i)).toBeInTheDocument();
+  test('renders the Ranking page heading', () => {
+    render(<Ranking />);
+
+    expect(screen.getByText(/hall of fame/i)).toBeInTheDocument();
+    expect(screen.getByText(/User/i)).toBeInTheDocument();
+    expect(screen.getByText(/Score/i)).toBeInTheDocument();
+    expect(screen.getByText(/Time/i)).toBeInTheDocument();
+  });
+
+  test('renders the list of users and their ranking data', () => {
+    render(<Ranking />);
+
+    // Verificar que los datos del ranking aparecen
+    expect(screen.getByText(2600)).toBeInTheDocument();
+    expect(screen.getByText(`49 s`)).toBeInTheDocument();
+  });
+
+  test('renders an error message when data loading fails', () => {
+    // Mock de datos de error
+    useLoaderData.mockReturnValue({
+      error: true,
+      message: 'Failed to load ranking data',
+    });
+
+    render(<Ranking />);
+
+    // Verificar que se muestra el mensaje de error
+    expect(screen.getByText(/No ranking data available/i)).toBeInTheDocument();
+  });
 });