diff --git a/assets/css/scss/_social.scss b/assets/css/scss/_social.scss
index 04eb718cdf..678e0e3cae 100644
--- a/assets/css/scss/_social.scss
+++ b/assets/css/scss/_social.scss
@@ -246,6 +246,12 @@
 }
 
 .social-groups {
+  .group-image {
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    object-fit: cover;
+  }
 
   .search-header {
     display: flex;
diff --git a/assets/vue/components/social/GroupInfoCard.vue b/assets/vue/components/social/GroupInfoCard.vue
index 9d480ca8ad..ae068cd363 100644
--- a/assets/vue/components/social/GroupInfoCard.vue
+++ b/assets/vue/components/social/GroupInfoCard.vue
@@ -12,11 +12,60 @@
         :label="t('Edit this group')"
         type="primary"
         class="mt-4"
-        @click="editGroup"
+        @click="showEditGroupDialog = true"
         icon="edit"
       />
     </div>
   </BaseCard>
+
+  <Dialog header="Edit Group" v-model:visible="showEditGroupDialog" :modal="true" :closable="true">
+    <form @submit.prevent="submitGroupEdit">
+      <div class="p-fluid">
+        <BaseInputTextWithVuelidate
+          v-model="editGroupForm.name"
+          label="Name*"
+          :vuelidate-property="v$.editGroupForm.name"
+        />
+
+        <BaseInputTextWithVuelidate
+          v-model="editGroupForm.description"
+          label="Description"
+          :vuelidate-property="v$.editGroupForm.description"
+          as="textarea"
+          rows="3"
+        />
+
+        <BaseInputTextWithVuelidate
+          v-model="editGroupForm.url"
+          label="URL"
+          :vuelidate-property="v$.editGroupForm.url"
+        />
+
+        <BaseFileUpload
+          :label="t('Add a picture')"
+          accept="image"
+          size="small"
+          @file-selected="selectedFile = $event"
+        />
+
+        <div class="p-field mt-2">
+          <label for="groupPermissions">Group Permissions</label>
+          <Dropdown id="groupPermissions" v-model="editGroupForm.permissions" :options="permissionsOptions" optionLabel="label" placeholder="Select Permission" />
+        </div>
+
+        <div class="p-field-checkbox mt-2">
+          <BaseCheckbox
+            id="leaveGroup"
+            v-model="editGroupForm.allowLeave"
+            :label="$t('Allow members to leave group')"
+            name="leaveGroup"
+          />
+        </div>
+      </div>
+      <Button label="Save" icon="pi pi-check" class="p-button-rounded p-button-text" @click="submitGroupEdit" />
+      <Button label="Close" class="p-button-text" @click="closeEditDialog" />
+    </form>
+  </Dialog>
 </template>
 
 <script setup>
@@ -25,15 +74,87 @@ import { useStore } from 'vuex'
 import BaseCard from "../basecomponents/BaseCard.vue"
 import BaseButton from "../basecomponents/BaseButton.vue"
 import { useI18n } from "vue-i18n"
-import { useRoute } from "vue-router"
+import { useRoute, useRouter } from "vue-router"
+import BaseInputTextWithVuelidate from "../basecomponents/BaseInputTextWithVuelidate.vue"
+import BaseCheckbox from "../basecomponents/BaseCheckbox.vue"
+import BaseFileUpload from "../basecomponents/BaseFileUpload.vue"
+import useVuelidate from "@vuelidate/core"
+import { required } from '@vuelidate/validators'
+import axios from "axios"
+import { ENTRYPOINT } from "../../config/entrypoint"
 
 const { t } = useI18n()
 const store = useStore()
 const route = useRoute()
+const router = useRouter()
 const groupInfo = inject('group-info')
 const isGroup = inject('is-group')
 
-const editGroup = () => {
-  window.location = "/account/edit"
+const showEditGroupDialog = ref(false)
+const selectedFile = ref(null)
+
+const permissionsOptions = [
+  { label: 'Open', value: 1 },
+  { label: 'Closed', value: 2 },
+]
+
+const editGroupForm = ref({
+  name: groupInfo.value.title,
+  description: groupInfo.value.description,
+  url: groupInfo.value.url,
+  permissions: permissionsOptions.find(option => option.value === groupInfo.value.visibility),
+  allowLeave: Boolean(groupInfo.value.allowMembersToLeaveGroup),
+})
+
+const v$ = useVuelidate({
+  editGroupForm: {
+    name: { required },
+    description: {},
+    url: {},
+    permissions: { required },
+  }
+}, { editGroupForm })
+
+const submitGroupEdit = () => {
+  v$.value.$touch()
+  if (!v$.value.$invalid) {
+    const updatedGroupData = {
+      title: editGroupForm.value.name,
+      description: editGroupForm.value.description,
+      url: editGroupForm.value.url,
+      visibility: String(editGroupForm.value.permissions.value),
+      allowMembersToLeaveGroup: editGroupForm.value.allowLeave ? 1 : 0,
+    }
+
+    axios.put(`${ENTRYPOINT}usergroups/${groupInfo.value.id}`, updatedGroupData, {
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    })
+    .then((response) => {
+      if (selectedFile.value && response.data && response.data.id) {
+        const formData = new FormData()
+        formData.append('picture', selectedFile.value)
+        return axios.post(`/social-network/upload-group-picture/${response.data.id}`, formData, {
+          headers: {
+            'Content-Type': 'multipart/form-data',
+          },
+        })
+      }
+    })
+    .then(() => {
+      showEditGroupDialog.value = false
+      router.push('/dummy').then(() => {
+        router.go(-1)
+      })
+    })
+    .catch((error) => {
+      console.error('Error updating group:', error)
+    })
+  }
+}
+
+const closeEditDialog = () => {
+  showEditGroupDialog.value = false
 }
 </script>
diff --git a/assets/vue/components/social/SocialGroupMenu.vue b/assets/vue/components/social/SocialGroupMenu.vue
index 5c076bd990..1bcccd14da 100644
--- a/assets/vue/components/social/SocialGroupMenu.vue
+++ b/assets/vue/components/social/SocialGroupMenu.vue
@@ -25,13 +25,12 @@
             {{ t("Invite friends") }}
           </router-link>
         </li>
-        <li class="menu-item">
+        <li class="menu-item" v-if="groupInfo.isAllowedToLeave">
           <button @click="leaveGroup">
             <i class="mdi mdi-exit-to-app" aria-hidden="true"></i>
             {{ t("Leave group") }}
           </button>
         </li>
-
       </ul>
       <ul v-else>
         <li class="menu-item">
diff --git a/assets/vue/views/usergroup/List.vue b/assets/vue/views/usergroup/List.vue
index b79ecb8b4b..85893651a6 100644
--- a/assets/vue/views/usergroup/List.vue
+++ b/assets/vue/views/usergroup/List.vue
@@ -9,11 +9,12 @@
         <TabPanel header="Newest" headerClass="tab-header" :class="{ 'active-tab': activeTab === 'Newest' }">
           <div class="group-list">
             <div class="group-item" v-for="group in newestGroups" :key="group['@id']">
-              <i class="mdi mdi-account-group-outline group-icon"></i>
+              <img v-if="group.pictureUrl" :src="group.pictureUrl" class="group-image" alt="Group Image" />
+              <i v-else class="mdi mdi-account-group-outline group-icon"></i>
               <div class="group-details">
                 <a :href="`/resources/usergroups/show/${extractGroupId(group)}`" class="group-title">{{ group.title }}</a>
                 <div class="group-info">
-                  <span class="group-member-count">{{ group.memberCount }} Member</span>
+                  <span class="group-member-count">{{ group.memberCount }} {{ t('Member') }}</span>
                   <span class="group-description">{{ group.description }}</span>
                 </div>
               </div>
@@ -23,11 +24,12 @@
         <TabPanel header="Popular" headerClass="tab-header" :class="{ 'active-tab': activeTab === 'Popular' }">
           <div class="group-list">
             <div class="group-item" v-for="group in popularGroups" :key="group['@id']">
-              <i class="mdi mdi-account-group-outline group-icon"></i>
+              <img v-if="group.pictureUrl" :src="group.pictureUrl" class="group-image" alt="Group Image" />
+              <i v-else class="mdi mdi-account-group-outline group-icon"></i>
               <div class="group-details">
                 <a :href="`/resources/usergroups/show/${extractGroupId(group)}`" class="group-title">{{ group.title }}</a>
                 <div class="group-info">
-                  <span class="group-member-count">{{ group.memberCount }} Member</span>
+                  <span class="group-member-count">{{ group.memberCount }} {{ t('Member') }}</span>
                   <span class="group-description">{{ group.description }}</span>
                 </div>
               </div>
@@ -36,11 +38,12 @@
         <TabPanel header="My groups" headerClass="tab-header" :class="{ 'active-tab': activeTab === 'My groups' }">
           <div class="group-list">
             <div class="group-item" v-for="group in myGroups" :key="group['@id']">
-              <i class="mdi mdi-account-group-outline group-icon"></i>
+              <img v-if="group.pictureUrl" :src="group.pictureUrl" class="group-image" alt="Group Image" />
+              <i v-else class="mdi mdi-account-group-outline group-icon"></i>
               <div class="group-details">
                 <a :href="`/resources/usergroups/show/${extractGroupId(group)}`" class="group-title">{{ group.title }}</a>
                 <div class="group-info">
-                  <span class="group-member-count">{{ group.memberCount }} Member</span>
+                  <span class="group-member-count">{{ group.memberCount }} {{ t('Member') }}</span>
                   <span class="group-description">{{ group.description }}</span>
                 </div>
               </div>
@@ -51,7 +54,7 @@
     </div>
   </div>
 
-  <Dialog header="Add" :visible="showCreateGroupDialog" :modal="true" :closable="true" @hide="showCreateGroupDialog = false">
+  <Dialog header="Add" v-model:visible="showCreateGroupDialog" modal="true" closable="true">
     <form @submit.prevent="createGroup">
       <div class="p-fluid">
         <BaseInputTextWithVuelidate
@@ -94,6 +97,7 @@
 
       </div>
       <Button label="Add" icon="pi pi-check" class="p-button-rounded p-button-text" @click="createGroup" />
+      <Button label="Close" class="p-button-text" @click="showCreateGroupDialog = false" />
     </form>
   </Dialog>
 </template>
@@ -154,7 +158,8 @@ const createGroup = async () => {
           'Content-Type': 'application/json',
         },
       })
-      /*if (selectedFile.value && response.data && response.data.id) {
+
+      if (selectedFile.value && response.data && response.data.id) {
         const formData = new FormData()
         formData.append('picture', selectedFile.value)
         await axios.post(`/social-network/upload-group-picture/${response.data.id}`, formData, {
@@ -162,9 +167,10 @@ const createGroup = async () => {
             'Content-Type': 'multipart/form-data',
           },
         })
-      }*/
+      }
 
       showCreateGroupDialog.value = false
+      resetForm()
       await updateGroupsList()
     } catch (error) {
       console.error('Failed to create group or upload picture:', error.response.data)
@@ -202,4 +208,20 @@ const redirectToGroupDetails = (groupId) => {
 onMounted(async () => {
   await updateGroupsList()
 })
+
+const closeDialog = () => {
+  showCreateGroupDialog.value = false
+}
+const resetForm = () => {
+  groupForm.value = {
+    name: '',
+    description: '',
+    url: '',
+    picture: null,
+    permissions: '',
+    allowLeave: false,
+  }
+  selectedFile.value = null
+  v$.value.$reset()
+}
 </script>
diff --git a/assets/vue/views/usergroup/Show.vue b/assets/vue/views/usergroup/Show.vue
index 5fcffac11f..5538d4893f 100644
--- a/assets/vue/views/usergroup/Show.vue
+++ b/assets/vue/views/usergroup/Show.vue
@@ -1,37 +1,75 @@
 <template>
-  <div v-if="!isLoading && groupInfo.isMember" class="social-group-show">
+
+  <div v-if="!isLoading && !groupInfo.isMember" class="social-group-show">
+    <div class="social-group-details-info">
+      <p v-if="groupInfo.visibility === 1" class="text-center">
+        {{ t('This is an open group') }}
+      </p>
+      <p v-else>
+        {{ t('This is a closed group') }}
+      </p>
+    </div>
+  </div>
+
+  <div class="social-group-show group-info text-center">
     <div class="group-header">
       <h1 class="group-title">{{ groupInfo?.title || '...' }}</h1>
       <p class="group-description">{{ groupInfo?.description }}</p>
     </div>
+  </div>
 
-    <ul class="tabs">
-      <li :class="{ active: activeTab === 'discussions' }" @click="activeTab = 'discussions'">{{ t('Discussions') }}</li>
-      <li :class="{ active: activeTab === 'members' }" @click="activeTab = 'members'">{{ t('Members') }}</li>
-    </ul>
-
-    <div class="tab-content">
-      <GroupDiscussions v-if="activeTab === 'discussions'" :group-id="groupInfo.id" />
-      <GroupMembers v-if="activeTab === 'members'" :group-id="groupInfo.id" />
+  <div v-if="!isLoading && (groupInfo.isMember || groupInfo.visibility === 1)" class="social-group-show">
+    <div v-if="!groupInfo.isMember" class="text-center">
+      <div v-if="![4, 3].includes(groupInfo.role)">
+        <BaseButton
+          :label="t('Join to group')"
+          type="primary"
+          class="mt-4"
+          @click="joinGroup"
+          icon="join-group"
+        />
+      </div>
+      <div v-else-if="groupInfo.role === 3">
+        <BaseButton
+          :label="t('You have been invited to join this group')"
+          type="primary"
+          class="mt-4"
+          @click="joinGroup"
+          icon="email-unread"
+        />
+      </div>
+    </div>
+    <div v-if="groupInfo.isMember" class="text-center">
+      <ul class="tabs">
+        <li :class="{ active: activeTab === 'discussions' }" @click="activeTab = 'discussions'">{{ t('Discussions') }}</li>
+        <li :class="{ active: activeTab === 'members' }" @click="activeTab = 'members'">{{ t('Members') }}</li>
+      </ul>
+      <div class="tab-content">
+        <GroupDiscussions v-if="activeTab === 'discussions'" :group-id="groupInfo.id" />
+        <GroupMembers v-if="activeTab === 'members'" :group-id="groupInfo.id" />
+      </div>
     </div>
   </div>
 
-  <div v-if="!isLoading && !groupInfo.isMember" class="text-center">
-    <div class="group-header">
-      <h1 class="group-title">{{ groupInfo?.title || '...' }}</h1>
-      <p class="group-description">{{ groupInfo?.description }}</p>
+  <div v-if="!isLoading && !(groupInfo.isMember || groupInfo.visibility === 1)" class="text-center">
+    <div v-if="![4, 3].includes(groupInfo.role)">
+      <BaseButton
+        :label="t('Join to group')"
+        type="primary"
+        class="mt-4"
+        @click="joinGroup"
+        icon="join-group"
+      />
+    </div>
+    <div v-else-if="groupInfo.role === 3">
+      <BaseButton
+        :label="t('You have been invited to join this group')"
+        type="primary"
+        class="mt-4"
+        @click="joinGroup"
+        icon="email-unread"
+      />
     </div>
-    <p v-if="groupInfo.visibility === 2">{{ t('This is a closed group.') }}</p>
-    <p v-if="groupInfo.role === 3">{{ t('You already sent an invitation') }}</p>
-    <p v-else>{{ t('Join this group to see the content.') }}</p>
-    <BaseButton
-      v-if="groupInfo.visibility === 1 && groupInfo.role !== 3"
-      :label="t('Join to group')"
-      type="primary"
-      class="mt-4"
-      @click="joinGroup"
-      icon="mdi-account-multiple-plus"
-    />
   </div>
 </template>
 
@@ -48,27 +86,24 @@ import BaseButton from "../../components/basecomponents/BaseButton.vue"
 const { t } = useI18n()
 const route = useRoute()
 const activeTab = ref('discussions')
-const { user, groupInfo, isGroup, loadGroup, isLoading } = useSocialInfo();
-
+const { user, groupInfo, isGroup, loadGroup, isLoading } = useSocialInfo()
 const joinGroup = async () => {
   try {
     const response = await axios.post('/social-network/group-action', {
       userId: user.value.id,
       groupId: groupInfo.value.id,
       action: 'join'
-    });
-
+    })
     if (response.data.success) {
-      await loadGroup(groupInfo.value.id);
+      await loadGroup(groupInfo.value.id)
     }
   } catch (error) {
-    console.error('Error joining the group:', error);
+    console.error('Error joining the group:', error)
   }
-};
-
+}
 onMounted(async () => {
   if (route.params.group_id) {
-    await loadGroup(route.params.group_id);
+    await loadGroup(route.params.group_id)
   }
-});
+})
 </script>
diff --git a/assets/vue/views/userreluser/Invitations.vue b/assets/vue/views/userreluser/Invitations.vue
index 88c6386f34..101238859c 100644
--- a/assets/vue/views/userreluser/Invitations.vue
+++ b/assets/vue/views/userreluser/Invitations.vue
@@ -105,10 +105,39 @@ const denyInvitation = async (invitationId) => {
     console.error('Error denying invitation:', error)
   }
 }
-const acceptGroupInvitation = (groupId) => {
-  console.log(`Accepted group invitation with ID: ${groupId}`)
+const acceptGroupInvitation = async (groupId) => {
+  try {
+    const response = await axios.post('/social-network/group-action', {
+      userId: user.value.id,
+      groupId: groupId,
+      action: 'accept',
+    });
+    if (response.data.success) {
+      console.log('Group invitation accepted successfully');
+      await fetchInvitations(user.value.id)
+    } else {
+      console.error('Failed to accept group invitation');
+    }
+  } catch (error) {
+    console.error('Error accepting group invitation:', error);
+  }
 }
-const denyGroupInvitation = (groupId) => {
-  console.log(`Denied group invitation with ID: ${groupId}`)
+
+const denyGroupInvitation = async (groupId) => {
+  try {
+    const response = await axios.post('/social-network/group-action', {
+      userId: user.value.id,
+      groupId: groupId,
+      action: 'deny',
+    });
+    if (response.data.success) {
+      console.log('Group invitation denied successfully');
+      await fetchInvitations(user.value.id)
+    } else {
+      console.error('Failed to deny group invitation');
+    }
+  } catch (error) {
+    console.error('Error denying group invitation:', error);
+  }
 }
 </script>
diff --git a/src/CoreBundle/Controller/SocialController.php b/src/CoreBundle/Controller/SocialController.php
index f8edbc0efd..9a119f7a1e 100644
--- a/src/CoreBundle/Controller/SocialController.php
+++ b/src/CoreBundle/Controller/SocialController.php
@@ -28,6 +28,7 @@ use Exception;
 use ExtraFieldValue;
 use MessageManager;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\File\UploadedFile;
 use Symfony\Component\HttpFoundation\JsonResponse;
 use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\HttpFoundation\RequestStack;
@@ -457,7 +458,8 @@ class SocialController extends AbstractController
         int $userId,
         MessageRepository $messageRepository,
         UsergroupRepository $usergroupRepository,
-        UserRepository $userRepository
+        UserRepository $userRepository,
+        TranslatorInterface $translator
     ): JsonResponse {
         $user = $this->getUser();
         if ($userId !== $user->getId()) {
@@ -500,15 +502,19 @@ class SocialController extends AbstractController
 
         $pendingGroupInvitations = [];
         $pendingGroups = $usergroupRepository->getGroupsByUser($userId, Usergroup::GROUP_USER_PERMISSION_PENDING_INVITATION);
+
+        /* @var Usergroup $group */
         foreach ($pendingGroups as $group) {
+            $isGroupVisible = (int) $group->getVisibility() === 1;
+            $infoVisibility = !$isGroupVisible ? ' - '.$translator->trans('This group is closed.') : '';
             $pendingGroupInvitations[] = [
                 'id' => $group->getId(),
                 'itemId' => $group->getId(),
-                'itemName' => $group->getTitle(),
+                'itemName' => $group->getTitle().$infoVisibility,
                 'itemPicture' => $usergroupRepository->getUsergroupPicture($group->getId()),
                 'content' => $group->getDescription(),
                 'date' => $group->getCreatedAt()->format('Y-m-d H:i:s'),
-                'canAccept' => true,
+                'canAccept' => $isGroupVisible,
                 'canDeny' => true,
             ];
         }
@@ -612,12 +618,15 @@ class SocialController extends AbstractController
             'id' => $group->getId(),
             'title' => $group->getTitle(),
             'description' => $group->getDescription(),
+            'url' => $group->getUrl(),
             'image' => $usergroupRepository->getUsergroupPicture($group->getId()),
+            'visibility' => (int) $group->getVisibility(),
+            'allowMembersToLeaveGroup' => $group->getAllowMembersToLeaveGroup(),
             'isMember' => $isMember,
             'isModerator' => $isModerator,
             'role' => $role,
             'isUserOnline' => $isUserOnline,
-            'visibility' => (int) $group->getVisibility(),
+            'isAllowedToLeave' => $group->getAllowMembersToLeaveGroup() === 1,
         ];
 
         return $this->json($groupDetails);
@@ -638,11 +647,26 @@ class SocialController extends AbstractController
 
         try {
             switch ($action) {
+                case 'accept':
+                    $userRole = $usergroupRepository->getUserGroupRole($groupId, $userId);
+                    if (in_array(
+                        $userRole,
+                        [
+                            Usergroup::GROUP_USER_PERMISSION_PENDING_INVITATION_SENT_BY_USER,
+                            Usergroup::GROUP_USER_PERMISSION_PENDING_INVITATION,
+                        ]
+                    )) {
+                        $usergroupRepository->updateUserRole($userId, $groupId, Usergroup::GROUP_USER_PERMISSION_READER);
+                    }
+
+                    break;
+
                 case 'join':
                     $usergroupRepository->addUserToGroup($userId, $groupId);
 
                     break;
 
+                case 'deny':
                 case 'leave':
                     $usergroupRepository->removeUserFromGroup($userId, $groupId);
 
@@ -753,6 +777,22 @@ class SocialController extends AbstractController
         return $this->json($onlineStatuses);
     }
 
+    #[Route('/upload-group-picture/{groupId}', name: 'chamilo_core_social_upload_group_picture')]
+    public function uploadGroupPicture(
+        Request $request,
+        int $groupId,
+        UsergroupRepository $usergroupRepository,
+        IllustrationRepository $illustrationRepository
+    ): JsonResponse {
+        $file = $request->files->get('picture');
+        if ($file instanceof UploadedFile) {
+            $userGroup = $usergroupRepository->find($groupId);
+            $illustrationRepository->addIllustration($userGroup, $this->getUser(), $file);
+        }
+
+        return new JsonResponse(['success' => 'Group and image saved successfully'], Response::HTTP_OK);
+    }
+
     /**
      * Checks the relationship between the current user and another user.
      *
diff --git a/src/CoreBundle/Entity/Usergroup.php b/src/CoreBundle/Entity/Usergroup.php
index dbff3255ea..7b82a3b03e 100644
--- a/src/CoreBundle/Entity/Usergroup.php
+++ b/src/CoreBundle/Entity/Usergroup.php
@@ -41,25 +41,29 @@ use Symfony\Component\Validator\Constraints as Assert;
             uriTemplate: '/usergroup/list/my',
             normalizationContext: ['groups' => ['usergroup:read']],
             security: "is_granted('ROLE_USER')",
-            name: 'get_my_usergroups'
+            name: 'get_my_usergroups',
+            provider: UsergroupDataProvider::class
         ),
         new GetCollection(
             uriTemplate: '/usergroup/list/newest',
             normalizationContext: ['groups' => ['usergroup:read']],
             security: "is_granted('ROLE_USER')",
-            name: 'get_newest_usergroups'
+            name: 'get_newest_usergroups',
+            provider: UsergroupDataProvider::class
         ),
         new GetCollection(
             uriTemplate: '/usergroup/list/popular',
             normalizationContext: ['groups' => ['usergroup:read']],
             security: "is_granted('ROLE_USER')",
-            name: 'get_popular_usergroups'
+            name: 'get_popular_usergroups',
+            provider: UsergroupDataProvider::class
         ),
         new GetCollection(
             uriTemplate: '/usergroups/search',
             normalizationContext: ['groups' => ['usergroup:read']],
             security: "is_granted('ROLE_USER')",
-            name: 'search_usergroups'
+            name: 'search_usergroups',
+            provider: UsergroupDataProvider::class
         ),
         new GetCollection(
             uriTemplate: '/usergroups/{id}/members',
@@ -80,7 +84,6 @@ use Symfony\Component\Validator\Constraints as Assert;
         'groups' => ['usergroup:write'],
     ],
     security: "is_granted('ROLE_USER')",
-    provider: UsergroupDataProvider::class
 )]
 #[ORM\Table(name: 'usergroup')]
 #[ORM\Entity(repositoryClass: UsergroupRepository::class)]
@@ -101,6 +104,7 @@ class Usergroup extends AbstractResource implements ResourceInterface, ResourceI
     public const GROUP_PERMISSION_OPEN = 1;
     public const GROUP_PERMISSION_CLOSED = 2;
 
+    #[Groups(['usergroup:read'])]
     #[ORM\Column(name: 'id', type: 'integer', nullable: false)]
     #[ORM\Id]
     #[ORM\GeneratedValue]
@@ -165,7 +169,7 @@ class Usergroup extends AbstractResource implements ResourceInterface, ResourceI
     #[Groups(['usergroup:read'])]
     private ?int $memberCount = null;
 
-    #[Groups(['usergroup:read'])]
+    #[Groups(['usergroup:read', 'usergroup:write'])]
     private ?string $pictureUrl = '';
 
     public function __construct()
@@ -371,7 +375,7 @@ class Usergroup extends AbstractResource implements ResourceInterface, ResourceI
 
     public function getPictureUrl(): ?string
     {
-        return $this->picture;
+        return $this->pictureUrl;
     }
 
     public function setPictureUrl(?string $pictureUrl): self
diff --git a/src/CoreBundle/Repository/Node/UsergroupRepository.php b/src/CoreBundle/Repository/Node/UsergroupRepository.php
index 1ca2dbb655..616e7ea3cc 100644
--- a/src/CoreBundle/Repository/Node/UsergroupRepository.php
+++ b/src/CoreBundle/Repository/Node/UsergroupRepository.php
@@ -73,7 +73,7 @@ class UsergroupRepository extends ResourceRepository
         return (int) $qb->getQuery()->getSingleScalarResult();
     }
 
-    public function getNewestGroups(int $limit = 6, string $query = ''): array
+    public function getNewestGroups(int $limit = 30, string $query = ''): array
     {
         $qb = $this->createQueryBuilder('g')
             ->select('g, COUNT(gu) AS HIDDEN memberCount')
@@ -102,7 +102,7 @@ class UsergroupRepository extends ResourceRepository
         return $qb->getQuery()->getResult();
     }
 
-    public function getPopularGroups(int $limit = 6): array
+    public function getPopularGroups(int $limit = 30): array
     {
         $qb = $this->createQueryBuilder('g')
             ->select('g, COUNT(gu) as HIDDEN memberCount')
@@ -187,6 +187,10 @@ class UsergroupRepository extends ResourceRepository
             throw new Exception('Group or User not found');
         }
 
+        if (Usergroup::GROUP_PERMISSION_CLOSED === (int) $group->getVisibility()) {
+            $relationType = Usergroup::GROUP_USER_PERMISSION_PENDING_INVITATION;
+        }
+
         $existingRelation = $this->_em->getRepository(UsergroupRelUser::class)->findOneBy([
             'usergroup' => $group,
             'user' => $user,
@@ -198,16 +202,41 @@ class UsergroupRepository extends ResourceRepository
             $existingRelation->setUser($user);
         }
 
-        if (Usergroup::GROUP_PERMISSION_CLOSED === $group->getVisibility()) {
-            $relationType = Usergroup::GROUP_USER_PERMISSION_PENDING_INVITATION;
-        }
-
         $existingRelation->setRelationType($relationType);
 
         $this->_em->persist($existingRelation);
         $this->_em->flush();
     }
 
+    public function updateUserRole($userId, $groupId, $relationType = Usergroup::GROUP_USER_PERMISSION_READER)
+    {
+        $qb = $this->createQueryBuilder('g');
+        $qb->delete(UsergroupRelUser::class, 'gu')
+            ->where('gu.usergroup = :groupId')
+            ->andWhere('gu.user = :userId')
+            ->setParameter('groupId', $groupId)
+            ->setParameter('userId', $userId);
+
+        $query = $qb->getQuery();
+        $query->execute();
+
+        $group = $this->find($groupId);
+        $user = $this->_em->getRepository(User::class)->find($userId);
+
+        if (!$group || !$user) {
+            throw new Exception('Group or User not found');
+        }
+
+        $usergroupRelUser = new UsergroupRelUser();
+        $usergroupRelUser->setUsergroup($group);
+        $usergroupRelUser->setUser($user);
+        $usergroupRelUser->setRelationType($relationType);
+
+        $this->_em->persist($usergroupRelUser);
+        $this->_em->flush();
+    }
+
+
     public function removeUserFromGroup(int $userId, int $groupId): bool
     {
         /** @var Usergroup $group */
@@ -345,8 +374,9 @@ class UsergroupRepository extends ResourceRepository
             ->where('g.id = :groupId AND gu.user = :userId')
             ->setParameter('groupId', $groupId)
             ->setParameter('userId', $userId)
+            ->orderBy('gu.id', 'DESC')
             ->select('gu.relationType')
-        ;
+            ->setMaxResults(1);
 
         $result = $qb->getQuery()->getOneOrNullResult();
 
diff --git a/src/CoreBundle/Security/Authorization/Voter/UsergroupVoter.php b/src/CoreBundle/Security/Authorization/Voter/UsergroupVoter.php
new file mode 100644
index 0000000000..e53f7dd80e
--- /dev/null
+++ b/src/CoreBundle/Security/Authorization/Voter/UsergroupVoter.php
@@ -0,0 +1,73 @@
+<?php
+
+/* For licensing terms, see /license.txt */
+
+declare(strict_types=1);
+
+namespace Chamilo\CoreBundle\Security\Authorization\Voter;
+
+use Chamilo\CoreBundle\Entity\Usergroup;
+use Chamilo\CoreBundle\Repository\Node\UsergroupRepository;
+use Symfony\Component\Security\Core\Authentication\Token\TokenInterface;
+use Symfony\Component\Security\Core\Authorization\Voter\Voter;
+use Symfony\Component\Security\Core\Security;
+use Symfony\Component\Security\Core\User\UserInterface;
+
+class UsergroupVoter extends Voter
+{
+    public const CREATE = 'CREATE';
+    public const VIEW = 'VIEW';
+    public const EDIT = 'EDIT';
+    public const DELETE = 'DELETE';
+
+    public function __construct(
+        private Security            $security,
+        private UsergroupRepository $usergroupRepository
+    ) {}
+
+    protected function supports(string $attribute, $subject): bool
+    {
+        $options = [
+            self::CREATE,
+            self::VIEW,
+            self::EDIT,
+            self::DELETE,
+        ];
+
+        // if the attribute isn't one we support, return false
+        if (!\in_array($attribute, $options, true)) {
+            return false;
+        }
+
+        // only vote on Post objects inside this voter
+        return $subject instanceof Usergroup;
+    }
+
+
+    protected function voteOnAttribute(string $attribute, $subject, TokenInterface $token): bool
+    {
+        $currentUser = $token->getUser();
+        if (!$currentUser instanceof UserInterface) {
+            return false;
+        }
+
+        if ($this->security->isGranted('ROLE_ADMIN')) {
+            return true;
+        }
+
+        /** @var Usergroup $usergroup */
+        $usergroup = $subject;
+
+        switch ($attribute) {
+            case self::EDIT:
+                return $this->canEdit($usergroup, $currentUser);
+        }
+
+        return false;
+    }
+
+    private function canEdit(Usergroup $usergroup, $currentUser): bool
+    {
+        return $this->usergroupRepository->isGroupModerator($usergroup->getId(), $currentUser->getId());
+    }
+}