diff --git a/gatewayservice/gateway-service.js b/gatewayservice/gateway-service.js
index 213dd5a1..d1fef78b 100644
--- a/gatewayservice/gateway-service.js
+++ b/gatewayservice/gateway-service.js
@@ -90,6 +90,68 @@ app.post("/saveGameList", async (req, res) => {
   }
 });
 
+app.get("/friends", async (req, res) => {
+  try {
+    // Forward the question request to the user service
+    const userResponse = await axios.get(
+      userServiceUrl + "/friends",
+      { params: req.query }
+    );
+    res.json(userResponse.data);
+  } catch (error) {
+    returnError(res, error);
+  }
+});
+
+app.post("/group/add", async (req, res) => {
+  try {
+    // Forward the save game request to the stats service
+    const gameResponse = await axios.post(
+      userServiceUrl + "/group/add",
+      req.body
+    );
+    res.json(gameResponse.data);
+  } catch (error) {
+    returnError(res, error);
+  }
+});
+
+app.post("/group/join", async (req, res) => {
+  try {
+    // Forward the save game request to the stats service
+    const gameResponse = await axios.post(
+      userServiceUrl + "/group/join",
+      req.body
+    );
+    res.json(gameResponse.data);
+  } catch (error) {
+    returnError(res, error);
+  }
+});
+
+app.get("/group/list", async (req, res) => {
+  try {
+    // Forward the question request to the user service
+    const userResponse = await axios.get(
+      userServiceUrl + "/group/list",
+      { params: req.query }
+    );
+    res.json(userResponse.data);
+  } catch (error) {
+    returnError(res, error);
+  }
+});
+
+app.get('/group/:groupName', async (req, res) => {
+  try {
+    const groupName = req.params.groupName;
+    const userResponse = await axios.get(`${userServiceUrl}/group/${groupName}`);
+    res.json(userResponse.data);
+  } catch (error) {
+    res.status(400).json({ error: error.message });
+  }
+});
+
 app.get("/users/search", async (req, res) => {
   try {
     // Forward the question request to the user service
diff --git a/users/userservice/user-model.js b/users/userservice/user-model.js
index a1c047e7..ae347c9a 100644
--- a/users/userservice/user-model.js
+++ b/users/userservice/user-model.js
@@ -50,24 +50,14 @@ const groupSchema = new mongoose.Schema({
       type: Date,
       default: Date.now
   },
+  members: [{
+    type: String,
+    required: true
+  }]
 });
 
 const Group = mongoose.model('Group', groupSchema);
 
-// Modelo para la relación entre usuarios y grupos
-const userGroupSchema = new mongoose.Schema({
-  user: {
-      type: mongoose.Schema.Types.ObjectId,
-      ref: 'User',
-      required: true
-  },
-  group: {
-      type: mongoose.Schema.Types.ObjectId,
-      ref: 'Group',
-      required: true
-  },
-});
 
-const UserGroup = mongoose.model('UserGroup', userGroupSchema);
 
-module.exports = { User, Group, UserGroup };
\ No newline at end of file
+module.exports = { User, Group };
\ No newline at end of file
diff --git a/users/userservice/user-service.js b/users/userservice/user-service.js
index 5a0e5de3..531ec5da 100644
--- a/users/userservice/user-service.js
+++ b/users/userservice/user-service.js
@@ -4,7 +4,7 @@ const mongoose = require("mongoose");
 const bcrypt = require("bcrypt");
 const bodyParser = require("body-parser");
 const jwt = require("jsonwebtoken");
-const { User } = require("./user-model");
+const { User, Group } = require("./user-model");
 
 const app = express();
 const port = 8001;
@@ -246,14 +246,96 @@ app.post("/saveGameList", async (req, res) => {
 
     res.json({ message: "Partida guardada exitosamente" });
   } catch (error) {
-    res
-      .status(400)
-      .json({
-        error: "Error al guardar partida en la lista: " + error.message,
-      });
+    res.status(400).json({ error: "Error al guardar partida en la lista: " + error.message });
   }
 });
 
+app.get('/group/list', async (req, res) => {
+  try {
+      const allGroups = await Group.find();
+      res.json({ groups: allGroups });
+  } catch (error) {
+      res.status(500).json({ error: 'Internal Server Error' });
+  }
+});
+
+// Obtener un grupo por su nombre
+app.get('/group/:groupName', async (req, res) => {
+  try {
+      const groupName = req.params.groupName;
+      const group = await Group.findOne({ name: groupName });
+
+      if (!group) {
+          return res.status(404).json({ error: 'Group not found' });
+      }
+
+      res.json({ group });
+  } catch (error) {
+      res.status(400).json({ error: error.message });
+  }
+});
+
+
+// Crear un nuevo grupo
+app.post('/group/add', async (req, res) => {
+  try {
+      const name= req.body.name;
+      const username= req.body.username;
+
+      if (!name) {
+        return res.status(400).json({ error: 'Group name cannot be empty' });
+      }
+
+      const existingGroup = await Group.findOne({ name: name });
+      if (existingGroup) {
+        return res.status(400).json({ error: 'Group name already exists' });
+      }
+
+      const user = await User.findOne({ username:username });
+      if (!user) {
+          return res.status(404).json({ error: 'User not found' });
+      }
+
+      const newGroup = new Group({ name: name,
+         members: [username] });
+      await newGroup.save();
+
+      res.json({ message: 'Group created successfully' });
+  } catch (error) {
+      res.status(400).json({ error: error.message });
+  }
+});
+
+// Unirse a un grupo existente
+app.post('/group/join', async (req, res) => {
+  try {
+      const groupId=req.body.groupId;
+      const username=req.body.username;
+
+      const user = await User.findOne({ username });
+      if (!user) {
+          return res.status(404).json({ error: 'User not found' });
+      }
+
+      const group = await Group.findById(groupId);
+      if (!group) {
+          return res.status(404).json({ error: 'Group not found' });
+      }
+
+      if (group.members.includes(username)) {
+          return res.status(400).json({ error: 'User already a member of this group' });
+      }
+
+      group.members.push(username);
+      await group.save();
+
+      res.json({ message: 'User joined the group successfully' });
+  } catch (error) {
+      res.status(400).json({ error: error.message });
+  }
+});
+
+
 const server = app.listen(port, () => {
   console.log(`User Service listening at http://localhost:${port}`);
 });
diff --git a/webapp/src/App.js b/webapp/src/App.js
index cf723fb7..3c7c44ac 100644
--- a/webapp/src/App.js
+++ b/webapp/src/App.js
@@ -16,8 +16,12 @@ import Perfil from "./pages/Perfil/Perfil.js";
 import CalculadoraHumana from "./pages/Calculadora/Calculadora.js";
 import UsersPage from "./pages/Social/UsersPage.js";
 import FriendList from "./pages/Social/FriendsList.js";
+import Groups from "./pages/Social/Groups.js";
+import UserGroups from "./pages/Social/UserGroups.js";
+import GroupDetails from "./pages/Social/GroupDetails.js";
 import History from "./pages/History/History.js";
 
+
 function App() {
   useEffect(() => {
     document.title = "WIQ!";
@@ -40,6 +44,10 @@ function App() {
           <Route path="/ranking" element={<Ranking />} />
           <Route path="/social/usuarios" element={<UsersPage />} />
           <Route path="/social/amigos" element={<FriendList />} />
+          <Route path="/social/grupos" element={<Groups />} />
+          <Route path="/social/misgrupos" element={<UserGroups />} />
+          <Route path="/social/grupo/:groupName" element={<GroupDetails />} />
+
           <Route path="/perfil" element={<Perfil />} />
           <Route path="/history" element={<History />} />
           <Route path="/config" element={<Config />} />
diff --git a/webapp/src/components/Nav/Nav.js b/webapp/src/components/Nav/Nav.js
index 182fec81..ebf626c9 100644
--- a/webapp/src/components/Nav/Nav.js
+++ b/webapp/src/components/Nav/Nav.js
@@ -178,6 +178,22 @@ const Nav = () => {
                 >
                   {t("components.nav.friends")}
                 </Text>
+                <Text
+                  data-testid="groups"
+                  cursor="pointer"
+                  onClick={() => handleNavigate("/social/grupos")}
+                  color={textColor}
+                >
+                  Grupos
+                </Text>
+                <Text
+                  data-testid="mygroups"
+                  cursor="pointer"
+                  onClick={() => handleNavigate("/social/misgrupos")}
+                  color={textColor}
+                >
+                  Mis grupos
+                </Text>
               </PopoverBody>
             </PopoverContent>
           </Popover>
diff --git a/webapp/src/pages/Social/GroupDetails.js b/webapp/src/pages/Social/GroupDetails.js
new file mode 100644
index 00000000..cba5e34b
--- /dev/null
+++ b/webapp/src/pages/Social/GroupDetails.js
@@ -0,0 +1,76 @@
+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";
+
+const GroupDetails = () => {
+  const [group, setGroup] = 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 redirectToProfile = (username) => {
+    navigate(`/perfil?user=${username}`);
+  };
+
+  return (
+    <>
+      <Nav/>
+      <Container maxW="md" mt="5">
+        <Heading as="h1" mb="5">Detalles del grupo: {groupName}</Heading>
+        {group ? (
+          <Box>
+            <Text fontSize="lg" fontWeight="bold" mb="4">
+              Creado por {group.members.length > 0 ? group.members[0] : ''} el {new Date(group.createdAt).toLocaleDateString()}
+            </Text>
+  
+            <Text fontSize="lg" fontWeight="bold" mb="2">Participantes ({group.members.length}) :</Text>
+            <Table variant="striped">
+              <Thead>
+                <Tr>
+                  <Th>Avatar</Th>
+                  <Th>Nombre</Th>
+                  <Th>Ver perfil</Th>
+                </Tr>
+              </Thead>
+              <Tbody>
+                {group.members.map((member, index) => (
+                  <Tr key={index}>
+                    <Td>
+                      <Avatar size="sm" name={member} />
+                    </Td>
+                    <Td>{member}</Td>
+                    <Td>
+                      <Link color="blue.500" onClick={() => redirectToProfile(member)}>Ver perfil</Link>
+                    </Td>
+                  </Tr>
+                ))}
+              </Tbody>
+            </Table>
+          </Box>
+        ) : (
+          <Text>Loading...</Text>
+        )}
+      </Container>
+      <Footer/>
+    </>
+  );
+};
+
+export default GroupDetails;
+
diff --git a/webapp/src/pages/Social/GroupDetails.test.js b/webapp/src/pages/Social/GroupDetails.test.js
new file mode 100644
index 00000000..e69de29b
diff --git a/webapp/src/pages/Social/Groups.js b/webapp/src/pages/Social/Groups.js
new file mode 100644
index 00000000..fec56044
--- /dev/null
+++ b/webapp/src/pages/Social/Groups.js
@@ -0,0 +1,125 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import { Box, Container, Text, Button, Input, InputGroup, InputRightElement, Alert, Table, Thead, Tbody, Tr, Th, Td } from '@chakra-ui/react';
+import Nav from "../../components/Nav/Nav.js";
+import Footer from "../../components/Footer/Footer.js";
+
+const Groups = () => {
+  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 apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
+
+  useEffect(() => {
+    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 addGroup = async () => {
+    try {
+      await axios.post(`${apiEndpoint}/group/add`, {
+        name: name,
+        username: username
+      });
+      setAlertMessage('Group created successfully');
+      setOpenAlert(true);
+    } catch (error) {
+      setError(error.response.data.error);
+    }
+  };
+
+  const handleJoinGroup = (groupId) => {
+    fetch(`${apiEndpoint}/group/join`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        groupId: groupId,
+        username: localStorage.getItem('username')
+      })
+    })
+    .then(response => {
+      if (!response.ok) {
+        throw new Error('Failed to join group');
+      }
+      
+      setGroups(prevGroups => prevGroups.filter(group => group._id !== groupId));
+    })
+    .catch(error => {
+      console.error('Error joining group:', error);
+    });
+  };
+
+  return (
+    <>
+      <Nav />
+      <Container maxW="md" mt="5">
+        <Box mb="5">
+          <Text fontSize="2xl" fontWeight="bold" mb="4">Crea un grupo</Text>
+          <Box display="flex" alignItems="center">
+            <InputGroup flex="1" mr="4">
+              <Input
+                name="name"
+                placeholder="Nombre"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+              />
+            </InputGroup>
+            <Button colorScheme="blue" onClick={addGroup}>Crear</Button>
+          </Box>
+          {error && (
+            <Alert status="error" variant="subtle" mt="2">
+              {`Error: ${error}`}
+            </Alert>
+          )}
+        </Box>
+  
+        <Box mt="4">
+          <Text fontSize="3xl" fontWeight="bold" mb="4">Grupos a los que puedes unirte</Text>
+          <Table variant="simple">
+            <Thead>
+              <Tr>
+                <Th>Nombre del grupo</Th>
+                <Th>Fecha de creación</Th>
+                <Th>Creador</Th>
+                <Th>Unirse al grupo</Th>
+              </Tr>
+            </Thead>
+            <Tbody>
+              {groups.map((group) => (
+                <Tr key={group._id}>
+                  <Td>{group.name}</Td>
+                  <Td>{new Date(group.createdAt).toLocaleDateString()}</Td>
+                  <Td>{group.members.length > 0 ? group.members[0] : ''}</Td>
+                  <Td>
+                    <Button colorScheme="blue" onClick={() => handleJoinGroup(group._id)}>Unirme</Button>
+                  </Td>
+                </Tr>
+              ))}
+            </Tbody>
+          </Table>
+        </Box>
+      </Container>
+      <Footer />
+    </>
+  );
+  
+};
+
+export default Groups;
+
+
diff --git a/webapp/src/pages/Social/Groups.test.js b/webapp/src/pages/Social/Groups.test.js
new file mode 100644
index 00000000..e69de29b
diff --git a/webapp/src/pages/Social/UserGroups.js b/webapp/src/pages/Social/UserGroups.js
new file mode 100644
index 00000000..e20457b4
--- /dev/null
+++ b/webapp/src/pages/Social/UserGroups.js
@@ -0,0 +1,76 @@
+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 Nav from "../../components/Nav/Nav.js";
+import Footer from "../../components/Footer/Footer.js";
+import { useNavigate } from "react-router-dom";
+
+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();
+
+  const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';
+
+  useEffect(() => {
+    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 seeGroupDetails = (groupName) => {
+    navigate(`/social/grupo/${encodeURIComponent(groupName)}`);
+  };
+  
+
+  return (
+    <>
+      <Nav />
+      <Container maxW="xs" mt="5" textAlign="center">
+        <Box mt="5">
+          <Text fontSize="3xl" fontWeight="bold" mb="4">Tus grupos</Text>
+          <Table variant="simple" mx="auto">
+            <Thead>
+              <Tr>
+                <Th>Nombre del grupo</Th>
+                <Th>Creador</Th>
+                <Th>Fecha de creación</Th>
+                <Th>Ver grupo</Th>
+              </Tr>
+            </Thead>
+            <Tbody>
+              {groups.map((group) => (
+                <Tr key={group._id}>
+                  <Td>{group.name}</Td>
+                  <Td>{group.members.length > 0 ? group.members[0] : ''}</Td>
+                  <Td>{new Date(group.createdAt).toLocaleDateString()}</Td>
+                  <Td>
+                    <Button colorScheme="blue" onClick={() => seeGroupDetails(group.name)}>Ver grupo</Button>
+                  </Td>
+                </Tr>
+              ))}
+            </Tbody>
+          </Table>
+        </Box>
+      </Container>
+      <Footer />
+    </>
+  );
+  
+  
+  
+};
+
+export default UserGroups;
diff --git a/webapp/src/pages/Social/UserGroups.test.js b/webapp/src/pages/Social/UserGroups.test.js
new file mode 100644
index 00000000..e69de29b