diff --git a/users/userservice/user-service.js b/users/userservice/user-service.js
index 531ec5da..d5d6a973 100644
--- a/users/userservice/user-service.js
+++ b/users/userservice/user-service.js
@@ -297,7 +297,8 @@ app.post('/group/add', async (req, res) => {
       }
 
       const newGroup = new Group({ name: name,
-         members: [username] });
+         members: [username],
+          createdAt:Date.now() });
       await newGroup.save();
 
       res.json({ message: 'Group created successfully' });
diff --git a/webapp/src/locales/en.json b/webapp/src/locales/en.json
index 5b23eddc..f609cabe 100644
--- a/webapp/src/locales/en.json
+++ b/webapp/src/locales/en.json
@@ -221,7 +221,7 @@
       "errorPrefix": "Error: ",
       "joinable": "Groups you can join",
       "join": "Join group",
-      "noGroups": "There are no groups available to join."
+      "nogroups": "There are no groups available to join."
     },
     "groupsTable": {
       "groupName": "Group name",
diff --git a/webapp/src/locales/es.json b/webapp/src/locales/es.json
index 9b050c38..77ef1f57 100644
--- a/webapp/src/locales/es.json
+++ b/webapp/src/locales/es.json
@@ -221,7 +221,7 @@
       "errorPrefix": "Error: ",
       "joinable": "Grupos a los que puedes unirte",
       "join": "Unirse al grupo",
-      "noGroups": "No hay grupos disponibles para unirse."
+      "nogroups": "No hay grupos a los que puedas unirte."
     },
     "groupsTable": {
       "groupName": "Nombre del grupo",
diff --git a/webapp/src/pages/Social/GroupDetails.js b/webapp/src/pages/Social/GroupDetails.js
index d3c3b3be..ab566a5a 100644
--- a/webapp/src/pages/Social/GroupDetails.js
+++ b/webapp/src/pages/Social/GroupDetails.js
@@ -1,6 +1,5 @@
 import React, { useState, useEffect } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
-import axios from 'axios';
 import { Container, Box, Text, Heading, Table, Thead, Tbody, Tr, Th, Td, Avatar, Link } from '@chakra-ui/react';
 import Nav from "../../components/Nav/Nav.js";
 import Footer from "../../components/Footer/Footer.js";
@@ -9,39 +8,71 @@ import { useTranslation } from "react-i18next";
 const GroupDetails = () => {
   const { t } = useTranslation();
   const [group, setGroup] = useState(null);
+  const [error, setError] = useState(null);
   const { groupName } = useParams();
   const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
   const navigate = useNavigate();
 
   useEffect(() => {
-    const fetchGroupDetails = async () => {
-      try {
-        const response = await axios.get(`${apiEndpoint}/group/${encodeURIComponent(groupName)}`);
-        setGroup(response.data.group);
-      } catch (error) {
-        console.error('Error fetching group details:', error);
-      }
-    };
-
     fetchGroupDetails();
-  }, [groupName]);
+  }, []);
+
+  const fetchGroupDetails = async () => {
+    try {
+      const response = await fetch(`${apiEndpoint}/group/${encodeURIComponent(groupName)}`);
+      if (!response.ok) {
+        throw new Error('Network response was not ok');
+      }
+      const data = await response.json();
+      setGroup(data.group);
+      setError(null);
+    } catch (error) {
+      setError(error);
+      console.error("Error al obtener los detalles del grupo:", error);
+    }
+  };
+  
 
   const redirectToProfile = (username) => {
     navigate(`/perfil?user=${username}`);
   };
 
+  if (error) {
+    return (
+      <>
+        <Nav />
+        <Box>
+          <Heading as="h2">Error: {error.message}</Heading>
+        </Box>
+        <Footer />
+      </>
+    );
+  }
+
+  if (!group) {
+    return (
+      <>
+        <Nav />
+        <Box>
+          <Heading as="h2">Cargando...</Heading>
+        </Box>
+        <Footer />
+      </>
+    );
+  }
+
   return (
-    <>
-      <Nav/>
-      <Container maxW="md" mt="5">
-        <Heading as="h1" mb="5">{t('pages.groupdetails.details')} {groupName}</Heading>
-        {group ? (
+    group && (
+      <>
+        <Nav/>
+        <Container maxW="md" mt="5">
+          <Heading as="h1" mb="5">{t('pages.groupdetails.details')} {group.name}</Heading>
           <Box>
             <Text fontSize="lg" fontWeight="bold" mb="4">
-            {t('pages.groupdetails.createdBy')} {group.members.length > 0 ? group.members[0] : ''} 
-            {t('pages.groupdetails.when')} {new Date(group.createdAt).toLocaleDateString()}
+              {t('pages.groupdetails.createdBy')} {group.members.length > 0 ? group.members[0] : ''} 
+              {t('pages.groupdetails.when')} {new Date(group.createdAt).toLocaleDateString()}
             </Text>
-  
+    
             <Text fontSize="lg" fontWeight="bold" mb="2">{t('pages.groupdetails.participants')} ({group.members.length}) :</Text>
             <Table variant="striped">
               <Thead>
@@ -55,23 +86,21 @@ const GroupDetails = () => {
                 {group.members.map((member, index) => (
                   <Tr key={index}>
                     <Td>
-                      <Avatar size="sm" name={member} />
+                      <Avatar size="sm" name={member}  data-testid={`user-avatar-${member}`}/>
                     </Td>
                     <Td>{member}</Td>
                     <Td>
-                      <Link color="blue.500" onClick={() => redirectToProfile(member)}>{t('pages.groupdetails.viewProfile')}</Link>
+                      <Link data-testid={`view-profile-button-${member}`} color="blue.500" onClick={() => redirectToProfile(member)}>{t('pages.groupdetails.viewProfile')}</Link>
                     </Td>
                   </Tr>
                 ))}
               </Tbody>
             </Table>
           </Box>
-        ) : (
-          <Text>{t('pages.groupdetails.loading')}</Text>
-        )}
-      </Container>
-      <Footer/>
-    </>
+        </Container>
+        <Footer/>
+      </>
+    )
   );
 };
 
diff --git a/webapp/src/pages/Social/GroupDetails.test.js b/webapp/src/pages/Social/GroupDetails.test.js
index e69de29b..bf6b5bb8 100644
--- a/webapp/src/pages/Social/GroupDetails.test.js
+++ b/webapp/src/pages/Social/GroupDetails.test.js
@@ -0,0 +1,110 @@
+import React from 'react';
+import { render, screen, waitFor, fireEvent } from "@testing-library/react";
+import { MemoryRouter } from 'react-router-dom';
+import GroupDetails from './GroupDetails';
+import { I18nextProvider } from "react-i18next";
+import i18n from "../../i18n.js";
+
+const renderComponentWithRouter = async () => {
+    render(
+      <I18nextProvider i18n={i18n}>
+        <MemoryRouter >
+          <GroupDetails />
+      </MemoryRouter>
+      </I18nextProvider>
+    );
+    localStorage.setItem("username", "user1");
+  };
+
+let originalFetch;
+
+beforeEach(() => {
+  originalFetch = global.fetch;
+  global.fetch = jest.fn();
+});
+
+afterEach(() => {
+  global.fetch = originalFetch;
+  jest.restoreAllMocks();
+});
+
+const groupData = {
+    name: 'exampleGroup',
+    members: ['user1', 'user2'],
+    createdAt: '2024-04-11T12:00:00Z',
+  };
+
+const mockNavigate = jest.fn();
+    jest.mock('react-router-dom', () => ({
+    ...jest.requireActual('react-router-dom'),
+    useNavigate: () => mockNavigate,
+  }));
+
+describe('GroupDetails', () => {
+  beforeEach(() => {
+    localStorage.clear();
+  });
+
+  afterEach(() => {
+    global.fetch.mockRestore();
+  });
+  
+
+    it('renders loading text when group data is not yet fetched', () => {
+      jest.spyOn(global, "fetch").mockResolvedValue({
+        json: jest.fn().mockResolvedValueOnce(groupData),
+      });
+      renderComponentWithRouter();
+      expect(screen.getByText('Cargando...')).toBeInTheDocument();
+    });
+
+    it('renders group details when data is fetched', async () => {
+      
+      jest.spyOn(global, "fetch").mockResolvedValue({
+        ok: true,
+        json: jest.fn().mockResolvedValueOnce(groupData),
+      });
+
+      renderComponentWithRouter();
+      
+      await waitFor(() => {
+        expect(screen.getByText('Detalles del grupo exampleGroup')).toBeInTheDocument();
+        expect(screen.getByText('Avatar')).toBeInTheDocument();
+        expect(screen.getByText('Nombre')).toBeInTheDocument();
+        const viewProfile = screen.getAllByText('Ver perfil');
+          expect(viewProfile).toHaveLength(3);
+        expect(screen.getByTestId('user-avatar-user1')).toBeInTheDocument();
+        expect(screen.getByTestId('user-avatar-user2')).toBeInTheDocument();
+        expect(screen.getByText('user1')).toBeInTheDocument();
+        expect(screen.getByText('user2')).toBeInTheDocument();
+      });
+    });
+
+    it('redirects to user profile when view profile link is clicked', async () => {
+
+      jest.spyOn(global, "fetch").mockResolvedValue({
+        ok: true,
+        json: jest.fn().mockResolvedValueOnce(groupData),
+      });
+
+      renderComponentWithRouter();
+
+      await waitFor(() => {
+        expect(screen.getByText('Detalles del grupo exampleGroup')).toBeInTheDocument();
+        expect(screen.getByText('Avatar')).toBeInTheDocument();
+        expect(screen.getByText('Nombre')).toBeInTheDocument();
+        const viewProfile = screen.getAllByText('Ver perfil');
+          expect(viewProfile).toHaveLength(3);
+        expect(screen.getByTestId('user-avatar-user1')).toBeInTheDocument();
+        expect(screen.getByTestId('user-avatar-user2')).toBeInTheDocument();
+        expect(screen.getByText('user1')).toBeInTheDocument();
+        expect(screen.getByText('user2')).toBeInTheDocument();
+      });
+
+      const viewProfileButtons = screen.getByTestId('view-profile-button-user1');
+
+      fireEvent.click(viewProfileButtons);
+      expect(mockNavigate).toHaveBeenCalledWith('/perfil?user=user1');
+    });
+});
+
diff --git a/webapp/src/pages/Social/Groups.js b/webapp/src/pages/Social/Groups.js
index 5b9ad6b7..68d822f0 100644
--- a/webapp/src/pages/Social/Groups.js
+++ b/webapp/src/pages/Social/Groups.js
@@ -21,26 +21,42 @@ const Groups = () => {
   }, []);
 
   const fetchData = async () => {
-    try {
-      const response = await axios.get(`${apiEndpoint}/group/list`);
-      const userGroups = response.data.groups.filter(group => !group.members.includes(username));
-      setGroups(userGroups);
-    } catch (error) {
-      console.error('Error fetching data:', error);
-    }
+    fetch(`${apiEndpoint}/group/list`)
+      .then(response => response.json())
+      .then(data => {
+        const userGroups = data.groups.filter(group => !group.members.includes(username));
+        setGroups(userGroups);
+      })
+      .catch(error => {
+        console.error('Error fetching data:', error);
+      });
   };
 
-  const addGroup = async () => {
-    try {
-      await axios.post(`${apiEndpoint}/group/add`, {
+  const addGroup = () => {
+    fetch(`${apiEndpoint}/group/add`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
         name: name,
         username: username
-      });
+      })
+    })
+    .then(response => {
+      if (!response.ok) {
+        throw new Error('Failed to create group');
+      }
+      return response.json();
+    })
+    .then(() => {
       setAlertMessage('Group created successfully');
       setOpenAlert(true);
-    } catch (error) {
-      setError(error.response.data.error);
-    }
+      setName('');
+    })
+    .catch(error => {
+      setError(error.message);
+    });
   };
 
   const handleJoinGroup = (groupId) => {
@@ -88,10 +104,18 @@ const Groups = () => {
               {`Error: ${error}`}
             </Alert>
           )}
+          {alertMessage && (
+          <Alert status="success" variant="subtle" mt="2">
+            {alertMessage}
+          </Alert>
+        )}
         </Box>
   
         <Box mt="4">
-          <Text fontSize="3xl" fontWeight="bold" mb="4">{t('pages.groups.joinable')}</Text>
+        <Text fontSize="3xl" fontWeight="bold" mb="4">{t('pages.groups.joinable')}</Text>
+        {groups.length === 0 ? (
+          <Text>{t('pages.groups.nogroups')}</Text>
+        ) : (
           <Table variant="simple">
             <Thead>
               <Tr>
@@ -102,6 +126,7 @@ const Groups = () => {
               </Tr>
             </Thead>
             <Tbody>
+              
               {groups.map((group) => (
                 <Tr key={group._id}>
                   <Td>{group.name}</Td>
@@ -114,7 +139,8 @@ const Groups = () => {
               ))}
             </Tbody>
           </Table>
-        </Box>
+        )}
+      </Box>
       </Container>
       <Footer />
     </>
diff --git a/webapp/src/pages/Social/Groups.test.js b/webapp/src/pages/Social/Groups.test.js
index e69de29b..26783d28 100644
--- a/webapp/src/pages/Social/Groups.test.js
+++ b/webapp/src/pages/Social/Groups.test.js
@@ -0,0 +1,132 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { MemoryRouter } from 'react-router-dom';
+import { I18nextProvider } from "react-i18next";
+import i18n from "../../i18n.js";
+import Groups from './Groups';
+
+const mockedGroups = [
+  {
+    _id: '1',
+    name: 'Group 1',
+    createdAt: '2024-04-11T12:00:00.000Z',
+    members: ['user1', 'user2']
+  },
+  { 
+    _id: '2',
+    name: 'Group 2',
+    createdAt: '2024-04-10T12:00:00.000Z',
+    members: ['user3', 'user4']
+  }
+];
+
+global.fetch = jest.fn();
+
+const renderComponentWithRouter = () => {
+  render(
+    <I18nextProvider i18n={i18n}>
+      <MemoryRouter>
+        <Groups />
+      </MemoryRouter>
+    </I18nextProvider>
+  );
+};
+
+describe('Groups component', () => {
+    beforeEach(() => {
+        localStorage.clear();
+        jest.clearAllMocks();
+    });
+
+    test('fetches and displays joinable groups', async () => {
+        localStorage.setItem('username', 'testUser');
+
+        fetch.mockResolvedValueOnce({
+            json: async () => ({ groups: mockedGroups })
+        });
+
+        renderComponentWithRouter();
+
+        await waitFor(() => {
+        expect(screen.getByText('Group 1')).toBeInTheDocument();
+        expect(screen.getByText('Group 2')).toBeInTheDocument();
+        });
+    });
+
+    test('displays error message on group creation failure', async () => {
+        localStorage.setItem('username', 'testUser');
+
+        fetch.mockResolvedValueOnce({
+            json: async () => ({ groups: mockedGroups })
+        });
+
+        fetch.mockResolvedValueOnce({
+            ok: false
+        });
+
+        renderComponentWithRouter();
+
+        const addButton = screen.getByRole('button', { name: 'Crear' });
+        userEvent.click(addButton);
+
+        await waitFor(() => {
+        expect(screen.getByText('Error: Failed to create group')).toBeInTheDocument();
+        });
+    });
+
+    test('successfully joins a group', async () => {
+        localStorage.setItem('username', 'testUser');
+
+        fetch.mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({ groups: mockedGroups })
+        });
+        fetch.mockResolvedValueOnce({ ok: true});
+
+        renderComponentWithRouter();
+
+        await waitFor(() => {
+        expect(screen.getByText('Group 1')).toBeInTheDocument();
+        });
+
+        const joinButton = screen.getByText('Group 1').closest('tr').querySelector('button');
+        userEvent.click(joinButton);
+
+        await waitFor(() => {
+        expect(screen.queryByText('Group 1')).not.toBeInTheDocument();
+        });
+    });
+
+    test('successfully joins both groups', async () => {
+        localStorage.setItem('username', 'testUser');
+
+        fetch.mockResolvedValueOnce({
+            ok: true,
+            json: async () => ({ groups: mockedGroups })
+        });
+        fetch.mockResolvedValueOnce({ ok: true});
+        fetch.mockResolvedValueOnce({ ok: true});
+
+        renderComponentWithRouter();
+
+        await waitFor(() => {
+        expect(screen.getByText('Group 1')).toBeInTheDocument();
+        });
+
+        var joinButton = screen.getByText('Group 1').closest('tr').querySelector('button');
+        userEvent.click(joinButton);
+
+        await waitFor(() => {
+        expect(screen.queryByText('Group 1')).not.toBeInTheDocument();
+        });
+
+        joinButton = screen.getByText('Group 2').closest('tr').querySelector('button');
+        userEvent.click(joinButton);
+
+        await waitFor(() => {
+        expect(screen.queryByText('Group 2')).not.toBeInTheDocument();
+        });
+    });
+
+});
diff --git a/webapp/src/pages/Social/UserGroups.js b/webapp/src/pages/Social/UserGroups.js
index edc8a2a9..0b2d044f 100644
--- a/webapp/src/pages/Social/UserGroups.js
+++ b/webapp/src/pages/Social/UserGroups.js
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import axios from 'axios';
-import { Box, Container, Text, Button, Table, Thead, Tbody, Tr, Th, Td } from '@chakra-ui/react';
+import { Alert, Box, Container, Text, Button, Table, Thead, Tbody, Tr, Th, Td } from '@chakra-ui/react';
 import Nav from "../../components/Nav/Nav.js";
 import Footer from "../../components/Footer/Footer.js";
 import { useNavigate } from "react-router-dom";
@@ -11,8 +11,6 @@ const UserGroups = () => {
   const [groups, setGroups] = useState([]);
   const [name, setName] = useState('');
   const [error, setError] = useState('');
-  const [openAlert, setOpenAlert] = useState(false);
-  const [alertMessage, setAlertMessage] = useState('');
   const username = localStorage.getItem('username');
   const navigate = useNavigate();
 
@@ -22,15 +20,24 @@ const UserGroups = () => {
     fetchData();
   }, []);
 
-  const fetchData = async () => {
-    try {
-      const response = await axios.get(`${apiEndpoint}/group/list`);
-      const userGroups = response.data.groups.filter(group => group.members.includes(username));
-      setGroups(userGroups);
-    } catch (error) {
-      console.error('Error fetching data:', error);
-    }
+  const fetchData = () => {
+    fetch(`${apiEndpoint}/group/list`)
+      .then(response => response.json())
+      .then(data => {
+        if (data) {
+          const userGroups = data.groups.filter(group => group.members.includes(username));
+          setGroups(userGroups);
+        } else {
+          setError('Error fetching data: Invalid response format');
+        }
+      })
+      .catch(error => {
+        console.error('Error fetching data:', error);
+        setError('Error fetching data: ' + error.message);
+      });
   };
+  
+  
 
   const seeGroupDetails = (groupName) => {
     navigate(`/social/grupo/${encodeURIComponent(groupName)}`);
@@ -43,6 +50,11 @@ const UserGroups = () => {
       <Container maxW="xs" mt="5" textAlign="center">
         <Box mt="5">
           <Text fontSize="3xl" fontWeight="bold" mb="4">{t('pages.usergroups.title')}</Text>
+          {error && (
+            <Alert status="error" variant="subtle" mt="2">
+              {`Error: ${error}`}
+            </Alert>
+          )}
           <Table variant="simple" mx="auto">
             <Thead>
               <Tr>
diff --git a/webapp/src/pages/Social/UserGroups.test.js b/webapp/src/pages/Social/UserGroups.test.js
index e69de29b..fd4d9ef2 100644
--- a/webapp/src/pages/Social/UserGroups.test.js
+++ b/webapp/src/pages/Social/UserGroups.test.js
@@ -0,0 +1,89 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { MemoryRouter } from 'react-router-dom';
+import { I18nextProvider } from "react-i18next";
+import i18n from "../../i18n.js";
+import UserGroups from './UserGroups';
+
+global.fetch = jest.fn();
+
+const mockedGroups = [
+  {
+    _id: '1',
+    name: 'Group 1',
+    createdAt: '2024-04-11T12:00:00.000Z',
+    members: ['testuser','user1', 'user2']
+  },
+  { 
+    _id: '2',
+    name: 'Group 2',
+    createdAt: '2024-04-10T12:00:00.000Z',
+    members: ['testuser','user3', 'user4']
+  }
+];
+
+describe('UserGroups component', () => {
+
+    beforeEach(() => {
+        localStorage.clear();
+    });
+
+    test('renders component', async () => {
+        localStorage.setItem('username', 'testuser');
+        fetch.mockResolvedValueOnce({ json: async () => ({ groups: [] }) });
+
+        render(
+        <I18nextProvider i18n={i18n}>
+            <MemoryRouter>
+            <UserGroups />
+            </MemoryRouter>
+        </I18nextProvider>
+        );
+
+        await waitFor(() => {
+        expect(screen.getByText('Nombre del grupo')).toBeInTheDocument();
+        expect(screen.getByText('Fecha de creación')).toBeInTheDocument();
+        expect(screen.getByText('Creador')).toBeInTheDocument();
+        expect(screen.getByText('Ver grupo')).toBeInTheDocument();
+        });
+    });
+
+    test('fetches and displays user groups', async () => {
+        localStorage.setItem('username', 'testuser');
+        fetch.mockResolvedValueOnce({ json: async () => ({ groups: mockedGroups }) });
+
+        render(
+        <I18nextProvider i18n={i18n}>
+            <MemoryRouter>
+            <UserGroups />
+            </MemoryRouter>
+        </I18nextProvider>
+        );
+
+        await waitFor(() => {
+        expect(screen.getByText('Group 1')).toBeInTheDocument();
+        expect(screen.getByText('Group 2')).toBeInTheDocument();
+        });
+    });
+
+    test('navigates to group details on click', async () => {
+        localStorage.setItem('username', 'testuser');
+        fetch.mockResolvedValueOnce({ json: async () => ({ groups: mockedGroups }) });
+
+        render(
+        <I18nextProvider i18n={i18n}>
+            <MemoryRouter>
+            <UserGroups />
+            </MemoryRouter>
+        </I18nextProvider>
+        );
+
+        await waitFor(() => {
+        const groupLink = screen.getByText('Group 1');
+        userEvent.click(groupLink);
+        });
+
+    });
+});
+
diff --git a/webapp/src/pages/Stats/Stats.js b/webapp/src/pages/Stats/Stats.js
index 8b83b0e7..617ce0e6 100644
--- a/webapp/src/pages/Stats/Stats.js
+++ b/webapp/src/pages/Stats/Stats.js
@@ -19,8 +19,7 @@ const Stats = () => {
     process.env.REACT_APP_API_ENDPOINT || "http://localhost:8000";
 
   const { t } = useTranslation();
-
-  const [username, setUsername] = useState(localStorage.username || "error");
+  const [username, setUsername] = useState(localStorage.username);
   const [stats, setStats] = useState(null);
   const [gamemode, setGamemode] = useState("clasico");
   const [isLoading, setIsLoading] = useState(false);