diff --git a/src/analytics/location.analytic.ts b/src/analytics/location.analytic.ts
index 52de3fb08..eb6d9829e 100644
--- a/src/analytics/location.analytic.ts
+++ b/src/analytics/location.analytic.ts
@@ -1,15 +1,11 @@
 import analytics from '@/analytics/index'
-import { LocationType } from '@/models/types'
+import { ProjectLocationForm } from '@/models/location.model'
 
 export interface LocationAnalytic {
   project: {
     id: string
   }
-  location: {
-    lat: number
-    lng: number
-    type: LocationType
-  }
+  location: ProjectLocationForm
 }
 
 export default {
diff --git a/src/api/crisalid.service.ts b/src/api/crisalid.service.ts
new file mode 100644
index 000000000..b14a013e1
--- /dev/null
+++ b/src/api/crisalid.service.ts
@@ -0,0 +1,66 @@
+import {
+  Document,
+  DocumentType,
+  Researcher,
+  ResearcherDocumentAnalytics,
+} from '@/interfaces/researcher'
+import { PeopleGroupModel } from '@/models/invitation.model'
+
+export async function getOwnResearchDocument(
+  organisationCode: string,
+  researchId: Researcher['id'],
+  documentType: DocumentType,
+  config = {}
+) {
+  return await useAPI<PaginationResult<Document>>(
+    `crisalid/organization/${organisationCode}/researcher/${researchId}/${documentType}/`,
+    config
+  )
+}
+
+export async function getGroupResearchDocument(
+  organisationCode: string,
+  groupId: PeopleGroupModel['id'],
+  documentType: DocumentType,
+  config = {}
+) {
+  return await useAPI<PaginationResult<Document>>(
+    `crisalid/organization/${organisationCode}/people-group/${groupId}/${documentType}/`,
+    config
+  )
+}
+
+export async function getOwnResearchDocumentAnalytics(
+  organisationCode: string,
+  researchId: Researcher['id'],
+  documentType: DocumentType,
+  config = {}
+) {
+  return await useAPI<ResearcherDocumentAnalytics>(
+    `crisalid/organization/${organisationCode}/researcher/${researchId}/${documentType}/analytics/`,
+    config
+  )
+}
+
+export async function getGroupResearchDocumentAnalytics(
+  organisationCode: string,
+  groupId: PeopleGroupModel['id'],
+  documentType: DocumentType,
+  config = {}
+) {
+  return await useAPI<ResearcherDocumentAnalytics>(
+    `crisalid/organization/${organisationCode}/people-group/${groupId}/${documentType}/analytics/`,
+    config
+  )
+}
+
+export async function getResearchDocumentSimilars(
+  organisationCode: string,
+  documentId: Document['id'],
+  config = {}
+) {
+  return await useAPI<PaginationResult<Document>>(
+    `crisalid/organization/${organisationCode}/document/${documentId}/similars/`,
+    config
+  )
+}
diff --git a/src/api/follows.service.ts b/src/api/follows.service.ts
index 52b9643b9..ab91ae67e 100644
--- a/src/api/follows.service.ts
+++ b/src/api/follows.service.ts
@@ -1,6 +1,7 @@
 import type {
   AddManyFollowedProject,
   FollowInput,
+  FollowProjectOutput,
   // FollowOutput,
   // FollowOutputList,
 } from '@/models/follow.model'
@@ -16,7 +17,10 @@ export async function getUserFollows(body: FollowInput, params) {
 }
 
 export async function postFollow(follow: FollowInput) {
-  return await useAPI(`project/${follow.project_id}/follow/`, { body: follow, method: 'POST' })
+  return await useAPI<FollowProjectOutput>(`project/${follow.project_id}/follow/`, {
+    body: follow,
+    method: 'POST',
+  })
   //.data.value
 }
 
diff --git a/src/api/groups.service.ts b/src/api/groups.service.ts
index 2f75e1604..f502b910d 100644
--- a/src/api/groups.service.ts
+++ b/src/api/groups.service.ts
@@ -1,31 +1,35 @@
 import type {
-  // GroupModel,
-  // GroupOuput,
   PostGroupData,
   AddGroupMembers,
   RemoveGroupMember,
   PostGroupProjects,
   AddParentGroupModelInput,
+  GroupMember,
+  HierarchyGroupModel,
 } from '@/models/group.model'
-// import type { HierarchyGroupModel } from '@/models/group.model'
-// import type { APIResponseList } from '@/api/types'
 import { _adaptParamsToGetQuery } from '@/api/utils.service'
 import useAPI from '@/composables/useAPI'
+import { ProjectModel } from '@/models/project.model'
+import { PeopleGroupModel } from '@/models/invitation.model'
+import { LocationModel } from '@/models/location.model'
+import { ImageModel } from '@/models/image.model'
 
 // HIERARCHY
-
-export async function getHierarchyGroups(org: string) {
-  return await useAPI(`organization/${org}/people-groups-hierarchy/`, {}) //.data.value
+export async function getHierarchyGroups(organizationCode: string, config = {}) {
+  return await useAPI<PaginationResult<HierarchyGroupModel>>(
+    `organization/${organizationCode}/people-groups-hierarchy/`,
+    config
+  )
 }
 
 export async function getPeopleGroupsHierarchy(org_code, params) {
   return await useAPI(`organization/${org_code}/people-groups-hierarchy/`, {
     ..._adaptParamsToGetQuery(params),
-  }) //.data.value
+  })
 }
 
 export async function getGroups(org_id) {
-  return await useAPI(`organization/${org_id}/people-group/`, {}) //.data.value
+  return await useAPI(`organization/${org_id}/people-group/`, {})
 }
 
 // ALL GROUPS
@@ -33,80 +37,85 @@ export async function getGroups(org_id) {
 export async function getPeopleGroups(org_code, params) {
   return await useAPI(`organization/${org_code}/people-group/`, {
     ..._adaptParamsToGetQuery(params),
-  }) //.data.value
+  })
 }
 
 export async function postGroup(org: string, groupData: PostGroupData) {
   return await useAPI(`organization/${org}/people-group/`, { body: groupData, method: 'POST' })
-  //.data.value
 }
 
 // GROUP
 
 export async function addParentGroup(
   orgId: string,
-  groupId: string,
+  groupId: number,
   body: AddParentGroupModelInput
 ) {
-  return await useAPI(`organization/${orgId}/people-group/${groupId}/`, { body, method: 'PATCH' }) //.data.value
+  return await useAPI(`organization/${orgId}/people-group/${groupId}/`, { body, method: 'PATCH' })
 }
 
-export async function getGroup(org: string, groupId: string, noError: boolean = false) {
-  return await useAPI(
-    `/organization/${org}/people-group/${groupId}/`,
-    { noError: noError } // TODO nuxt check error silenced
-  ) //.data.value
+export function getGroup(organizationCode: string, groupId: number, config = {}) {
+  return useAPI<PeopleGroupModel>(
+    `organization/${organizationCode}/people-group/${groupId}/`,
+    config
+  )
 }
 
-export async function patchGroup(org: string, group_id: number, groupData: Partial<PostGroupData>) {
-  return await useAPI(`organization/${org}/people-group/${group_id}/`, {
+export async function patchGroup(
+  organizationCode: string,
+  groupName: number,
+  groupData: Partial<PostGroupData>
+) {
+  return await useAPI(`organization/${organizationCode}/people-group/${groupName}/`, {
     body: groupData,
     method: 'PATCH',
-  }) //.data.value
+  })
 }
 
-export async function deleteGroup(org_code, group_id) {
-  return await useAPI(`organization/${org_code}/people-group/${group_id}/`, { method: 'DELETE' }) //.data.value
+export async function deleteGroup(organizationCode: string, groupName: string) {
+  return await useAPI(`organization/${organizationCode}/people-group/${groupName}/`, {
+    method: 'DELETE',
+  })
 }
 
 // GROUP MEMBERS
 
-export async function getGroupMember(org: string, groupId: string, noError: boolean = false) {
-  return (
-    // TODO nuxt check error silenced
-    await useAPI(`organization/${org}/people-group/${groupId}/member/`, { noError: noError })
-    //.data.value
+export async function getGroupMember(organizationCode: string, groupId: number, config = {}) {
+  return await useAPI<PaginationResult<GroupMember>>(
+    `organization/${organizationCode}/people-group/${groupId}/member/`,
+    config
   )
 }
 
 export async function postGroupMembers(
-  org: string,
-  group_id: number,
+  organizationCode: string,
+  groupId: number,
   membersData: AddGroupMembers
 ) {
-  return await useAPI(`organization/${org}/people-group/${group_id}/member/add/`, {
+  return await useAPI(`organization/${organizationCode}/people-group/${groupId}/member/add/`, {
     body: membersData,
     method: 'POST',
-  }) //.data.value
+  })
 }
 
 export async function removeGroupMember(
-  org: string,
-  group_id: number,
+  organizationCode: string,
+  groupId: number,
   membersData: RemoveGroupMember
 ) {
-  return await useAPI(`organization/${org}/people-group/${group_id}/member/remove/`, {
+  return await useAPI(`organization/${organizationCode}/people-group/${groupId}/member/remove/`, {
     body: membersData,
     method: 'POST',
-  }) //.data.value
+  })
 }
 
 // GROUP PROJECTS
 
-export async function getGroupProject(org: string, groupId: string, noError: boolean = false) {
-  return await useAPI(`organization/${org}/people-group/${groupId}/project/`, {
-    noError: noError,
-  }) //.data.value
+export async function getGroupProject(organizationCode: string, groupId: number, config = {}) {
+  return await useAPI<PaginationResult<ProjectModel>>(
+    `organization/${organizationCode}/people-group/${groupId}/project/`,
+    config
+  )
 }
 
 export async function postGroupProjects(
@@ -117,14 +126,18 @@ export async function postGroupProjects(
   return await useAPI(`organization/${org}/people-group/${group_id}/project/add/`, {
     body: projectsData,
     method: 'POST',
-  }) //.data.value
+  })
 }
 
-export async function removeGroupProject(org: string, group_id: number, projectsData: any) {
+export async function removeGroupProject(
+  org: string,
+  group_id: number,
+  projectsData: PostGroupProjects
+) {
   return await useAPI(`organization/${org}/people-group/${group_id}/project/remove/`, {
     body: projectsData,
     method: 'POST',
-  }) //.data.value
+  })
 }
 
 // GROUP HEADER
@@ -133,12 +146,70 @@ export async function postGroupHeader(org: string, group_id: number, headerData:
   return await useAPI(`organization/${org}/people-group/${group_id}/header/`, {
     body: headerData,
     method: 'POST',
-  }) //.data.value
+  })
 }
 
 export async function patchGroupHeader(org: string, group_id: number, headerData: FormData) {
   return await useAPI(`organization/${org}/people-group/${group_id}/header/`, {
     body: headerData,
     method: 'PATCH',
-  }) //.data.value
+  })
+}
+
+export async function getGroupSimilar(organizationCode: string, groupId: number, config = {}) {
+  return await useAPI<PaginationResult<PeopleGroupModel>>(
+    `organization/${organizationCode}/people-group/${groupId}/similars/`,
+    config
+  )
+}
+
+export async function getSubGroup(organizationCode: string, groupId: number, config = {}) {
+  return await useAPI<PaginationResult<PeopleGroupModel>>(
+    `organization/${organizationCode}/people-group/${groupId}/subgroups/`,
+    config
+  )
+}
+
+export async function getGroupLocation(organizationCode: string, groupId: number, config = {}) {
+  return await useAPI<PaginationResult<LocationModel>>(
+    `organization/${organizationCode}/people-group/${groupId}/locations/`,
+    config
+  )
+}
+
+export function getGroupGallery(organizationCode: string, groupId: number, config = {}) {
+  return useAPI<PaginationResult<ImageModel>>(
+    `organization/${organizationCode}/people-group/${groupId}/gallery/`,
+    {
+      ...config,
+    }
+  )
+}
+
+export function deleteGroupGallery(
+  organizationCode: string,
+  groupId: number,
+  imageId: number,
+  config = {}
+) {
+  return useAPI<ImageModel>(
+    `organization/${organizationCode}/people-group/${groupId}/gallery/${imageId}/`,
+    {
+      ...config,
+      method: 'DELETE',
+    }
+  )
+}
+
+export function postGroupGallery(
+  organizationCode: string,
+  groupId: number,
+  body: FormData,
+  config = {}
+) {
+  return useAPI<ImageModel>(`organization/${organizationCode}/people-group/${groupId}/gallery/`, {
+    ...config,
+    body,
+    method: 'POST',
+  })
 }
diff --git a/src/api/locations.services.ts b/src/api/locations.services.ts
index a4300637a..88a69acec 100644
--- a/src/api/locations.services.ts
+++ b/src/api/locations.services.ts
@@ -1,6 +1,5 @@
 import type { LocationModel, ProjectLocationForm } from '@/models/location.model'
 import useAPI from '@/composables/useAPI'
-import utils from '@/functs/functions'
 import { Locations } from '@/interfaces/maps'
 
 export async function getProjectLocations(projectId: number) {
@@ -11,13 +10,8 @@ export async function getProjectLocation(projectId: string, locationId: number)
   return await useAPI<LocationModel>(`project/${projectId}/location/${locationId}/`)
 }
 
-export async function getLocations(params, next) {
-  if (next) {
-    // TODO: nuxt check next works
-    return await useAPI<Locations>(next, {}) //.data.value
-  }
-
-  return await useAPI<Locations>(`location/`, { ...utils.adaptParam(params) }) //.data.value
+export async function getLocations(organizationCode: string, config = {}) {
+  return await useAPI<Locations>(`organization/${organizationCode}/location/`, config)
 }
 
 export async function postLocations(projectId: string, body: ProjectLocationForm) {
diff --git a/src/api/sanitizes/researcher.ts b/src/api/sanitizes/researcher.ts
index 24ca84bfe..c7a7435a0 100644
--- a/src/api/sanitizes/researcher.ts
+++ b/src/api/sanitizes/researcher.ts
@@ -44,7 +44,8 @@ type AnalyticsYears = {
  * @exports
  */
 export const sanitizeResearcherDocumentAnalyticsYears = (
-  data: ResearcherDocumentAnalytics['years']
+  data: ResearcherDocumentAnalytics['years'],
+  limit?: number
 ): AnalyticsYears => {
   const info: AnalyticsYears = {
     minYear: null,
@@ -52,12 +53,6 @@ export const sanitizeResearcherDocumentAnalyticsYears = (
     bar: [],
   }
   data.forEach((o) => {
-    if (info.minYear == null || info.minYear > o.year) {
-      info.minYear = o.year
-    }
-    if (info.maxYear == null || info.maxYear < o.year) {
-      info.maxYear = o.year
-    }
     info.bar.push({
       count: o.total,
       year: o.year,
@@ -65,13 +60,18 @@ export const sanitizeResearcherDocumentAnalyticsYears = (
     })
   })
 
+  info.bar = info.bar.toSorted((a, b) => a.year - b.year)
+  if (limit) {
+    info.bar = info.bar.slice(-limit)
+  }
+  info.minYear = info.bar.at(0).year
+  info.maxYear = info.bar.at(-1).year
+
   const maxCount = Math.max(...info.bar.map((el) => el.count))
   info.bar.forEach((obj) => {
     obj.height = (obj.count / maxCount) * 100
   })
 
-  info.bar = info.bar.reverse()
-
   return info
 }
 
diff --git a/src/api/v2/crisalid.service.ts b/src/api/v2/crisalid.service.ts
new file mode 100644
index 000000000..22e652244
--- /dev/null
+++ b/src/api/v2/crisalid.service.ts
@@ -0,0 +1,152 @@
+import {
+  getOwnResearchDocument as fetchOwnResearchDocument,
+  getGroupResearchDocument as fetchGroupResearchDocument,
+  getResearchDocumentSimilars as fetchResearchDocumentSimilars,
+  getOwnResearchDocumentAnalytics as fetchOwnResearchDocumentAnalytics,
+  getGroupResearchDocumentAnalytics as fetchGroupResearchDocumentAnalytics,
+} from '@/api/crisalid.service'
+import useAsyncAPI from '@/composables/useAsyncAPI'
+import useAsyncPaginationAPI from '@/composables/useAsyncPaginationAPI'
+import { onlyRefs } from '@/functs/onlyRefs'
+import { Document, DocumentType, Researcher } from '@/interfaces/researcher'
+import { RefOrRaw } from '@/interfaces/utils'
+import { GroupModel } from '@/models/group.model'
+import { PeopleGroupModel } from '@/models/invitation.model'
+import { OrganizationModel } from '@/models/organization.model'
+
+const DEFAULT_CONFIG = {}
+
+export const getOwnResearchDocument = (
+  organizationCode: RefOrRaw<OrganizationModel['code']>,
+  researcherId: RefOrRaw<Researcher['id']>,
+  documenType: DocumentType,
+  config = {}
+) => {
+  const { translateResearcherDocuments } = useAutoTranslate()
+  const key = computed(
+    () => `${unref(organizationCode)}::researcher::${unref(researcherId)}::${documenType}`
+  )
+
+  return useAsyncPaginationAPI(
+    key,
+    ({ config }) =>
+      fetchOwnResearchDocument(unref(organizationCode), unref(researcherId), unref(documenType), {
+        ...DEFAULT_CONFIG,
+        ...config,
+      }),
+    {
+      translate: (data) => translateResearcherDocuments(data),
+      watch: onlyRefs([organizationCode, researcherId]),
+      ...config,
+    }
+  )
+}
+
+export const getGroupResearchDocument = (
+  organizationCode: RefOrRaw<OrganizationModel['code']>,
+  groupId: RefOrRaw<PeopleGroupModel['id']>,
+  documenType: DocumentType,
+  config = {}
+) => {
+  const { translateResearcherDocuments } = useAutoTranslate()
+  const key = computed(() => `${unref(organizationCode)}::group::${unref(groupId)}::${documenType}`)
+
+  return useAsyncPaginationAPI(
+    key,
+    ({ config }) =>
+      fetchGroupResearchDocument(unref(organizationCode), unref(groupId), unref(documenType), {
+        ...DEFAULT_CONFIG,
+        ...config,
+      }),
+    {
+      translate: (data) => translateResearcherDocuments(data),
+      watch: onlyRefs([organizationCode, groupId]),
+      ...config,
+    }
+  )
+}
+
+export const getOwnResearchDocumentAnalytics = (
+  organizationCode: RefOrRaw<OrganizationModel['code']>,
+  researcherId: RefOrRaw<Researcher['id']>,
+  documenType: DocumentType,
+  config = {}
+) => {
+  const key = computed(
+    () =>
+      `${unref(organizationCode)}::researcher::${unref(researcherId)}::${documenType}::analytics`
+  )
+
+  return useAsyncAPI(
+    key,
+    ({ config }) =>
+      fetchOwnResearchDocumentAnalytics(
+        unref(organizationCode),
+        unref(researcherId),
+        unref(documenType),
+        {
+          ...DEFAULT_CONFIG,
+          ...config,
+        }
+      ),
+    {
+      watch: onlyRefs([organizationCode, researcherId]),
+      ...config,
+    }
+  )
+}
+
+export const getGroupResearchDocumentAnalytics = (
+  organizationCode: RefOrRaw<OrganizationModel['code']>,
+  groupId: RefOrRaw<GroupModel['id']>,
+  documenType: DocumentType,
+  config = {}
+) => {
+  const key = computed(
+    () => `${unref(organizationCode)}::group::${unref(groupId)}::${documenType}::analytics`
+  )
+
+  return useAsyncAPI(
+    key,
+    ({ config }) =>
+      fetchGroupResearchDocumentAnalytics(
+        unref(organizationCode),
+        unref(groupId),
+        unref(documenType),
+        {
+          ...DEFAULT_CONFIG,
+          ...config,
+        }
+      ),
+    {
+      watch: onlyRefs([organizationCode, groupId]),
+      ...config,
+    }
+  )
+}
+
+export const getResearchDocumentSimilars = (
+  organizationCode: RefOrRaw<OrganizationModel['code']>,
+  documentId: RefOrRaw<Document['id']>,
+  config = {}
+) => {
+  const { translateResearcherDocuments } = useAutoTranslate()
+  const key = computed(
+    () => `${unref(organizationCode)}::crisalid::document::${unref(documentId)}::similars`
+  )
+
+  return useAsyncPaginationAPI(
+    key,
+    ({ config }) =>
+      fetchResearchDocumentSimilars(unref(organizationCode), unref(documentId), {
+        ...DEFAULT_CONFIG,
+        ...config,
+      }),
+    {
+      translate: (data) => translateResearcherDocuments(data),
+      watch: onlyRefs([organizationCode, documentId]),
+      checkArgs: true,
+      ...config,
+    }
+  )
+}
diff --git a/src/api/v2/group.service.ts b/src/api/v2/group.service.ts
new file mode 100644
index 000000000..c1ad4619e
--- /dev/null
+++ b/src/api/v2/group.service.ts
@@ -0,0 +1,191 @@
+import {
+  getGroup as fetchGetGroup,
+  getGroupProject as fetchGetGroupProject,
+  getHierarchyGroups as fetchGetHierarchyGroups,
+  getGroupMember as fetchGetGroupMember,
+  getGroupSimilar as fetchGetGroupSimilar,
+  getSubGroup as fetchGetSubGroup,
+  getGroupLocation as fetchLocationsGroup,
+  getGroupGallery as fetchGroupGallery,
+} from '@/api/groups.service'
+import useAsyncAPI from '@/composables/useAsyncAPI'
+import useAsyncPaginationAPI from '@/composables/useAsyncPaginationAPI'
+import { onlyRefs } from '@/functs/onlyRefs'
+import { RefOrRaw } from '@/interfaces/utils'
+import { GroupModel } from '@/models/group.model'
+import { OrganizationModel } from '@/models/organization.model'
+
+const DEFAULT_CONFIG = {}
+
+export const getGroup = (
+  organizationCode: RefOrRaw<OrganizationModel['code']>,
+  groupId: RefOrRaw<GroupModel['id']>,
+  config = {}
+) => {
+  const { translateGroup } = useAutoTranslate()
+  const key = computed(() => `${unref(organizationCode)}::group::${unref(groupId)}`)
+
+  return useAsyncAPI(
+    key,
+    () => fetchGetGroup(unref(organizationCode), unref(groupId), { ...DEFAULT_CONFIG }),
+    {
+      translate: translateGroup,
+      watch: onlyRefs([organizationCode, groupId]),
+      ...config,
+    }
+  )
+}
+
+export const getHierarchyGroups = (
+  organizationCode: RefOrRaw<OrganizationModel['code']>,
+  config = {}
+) => {
+  const { translateGroup } = useAutoTranslate()
+  const key = computed(() => `${unref(organizationCode)}::hierarchy-groups`)
+
+  return useAsyncAPI(
+    key,
+    ({ config }) =>
+      fetchGetHierarchyGroups(unref(organizationCode), { ...DEFAULT_CONFIG, ...config }),
+    {
+      translate: translateGroup,
+      watch: onlyRefs([organizationCode]),
+      ...config,
+    }
+  )
+}
+
+export const getGroupProject = (
+  organizationCode: RefOrRaw<OrganizationModel['code']>,
+  groupId: RefOrRaw<GroupModel['id']>,
+  config = {}
+) => {
+  const { translateProjects } = useAutoTranslate()
+  const key = computed(() => `${unref(organizationCode)}::group::${unref(groupId)}::projects`)
+
+  return useAsyncPaginationAPI(
+    key,
+    ({ config }) =>
+      fetchGetGroupProject(unref(organizationCode), unref(groupId), {
+        ...DEFAULT_CONFIG,
+        ...config,
+      }),
+    {
+      translate: translateProjects,
+      watch: onlyRefs([organizationCode, groupId]),
+      ...config,
+    }
+  )
+}
+
+export const getGroupMember = (
+  organizationCode: RefOrRaw<OrganizationModel['code']>,
+  groupId: RefOrRaw<GroupModel['id']>,
+  config = {}
+) => {
+  const key = computed(() => `${unref(organizationCode)}::group::${unref(groupId)}::members`)
+
+  return useAsyncPaginationAPI(
+    key,
+    ({ config }) =>
+      fetchGetGroupMember(unref(organizationCode), unref(groupId), {
+        ...DEFAULT_CONFIG,
+        ...config,
+      }),
+    {
+      watch: onlyRefs([organizationCode, groupId]),
+      ...config,
+    }
+  )
+}
+
+export const getGroupSimilar = (
+  organizationCode: RefOrRaw<OrganizationModel['code']>,
+  groupId: RefOrRaw<GroupModel['id']>,
+  config = {}
+) => {
+  const { translateGroups } = useAutoTranslate()
+  const key = computed(() => `${unref(organizationCode)}::group::${unref(groupId)}::similars`)
+
+  return useAsyncPaginationAPI(
+    key,
+    ({ config }) =>
+      fetchGetGroupSimilar(unref(organizationCode), unref(groupId), {
+        ...DEFAULT_CONFIG,
+        ...config,
+      }),
+    {
+      translate: translateGroups,
+      watch: onlyRefs([organizationCode, groupId]),
+      ...config,
+    }
+  )
+}
+
+export const getSubGroup = (
+  organizationCode: RefOrRaw<OrganizationModel['code']>,
+  groupId: RefOrRaw<GroupModel['id']>,
+  config = {}
+) => {
+  const { translateGroups } = useAutoTranslate()
+  const key = computed(() => `${unref(organizationCode)}::group::${unref(groupId)}::subgroup`)
+
+  return useAsyncPaginationAPI(
+    key,
+    ({ config }) =>
+      fetchGetSubGroup(unref(organizationCode), unref(groupId), {
+        ...DEFAULT_CONFIG,
+        ...config,
+      }),
+    {
+      translate: translateGroups,
+      watch: onlyRefs([organizationCode, groupId]),
+      ...config,
+    }
+  )
+}
+
+export const getGroupLocation = (
+  organizationCode: RefOrRaw<OrganizationModel['code']>,
+  groupId: RefOrRaw<GroupModel['id']>,
+  config = {}
+) => {
+  const { translateProjectLocations } = useAutoTranslate()
+  const key = computed(() => `${unref(organizationCode)}::group::${unref(groupId)}::locations`)
+
+  return useAsyncAPI(
+    key,
+    ({ config }) =>
+      fetchLocationsGroup(unref(organizationCode), unref(groupId), {
+        ...DEFAULT_CONFIG,
+        ...config,
+      }),
+    {
+      translate: translateProjectLocations,
+      watch: onlyRefs([organizationCode, groupId]),
+      ...config,
+    }
+  )
+}
+
+export const getGroupGallery = (
+  organizationCode: RefOrRaw<OrganizationModel['code']>,
+  groupId: RefOrRaw<GroupModel['id']>,
+  config = {}
+) => {
+  const key = computed(() => `${unref(organizationCode)}::group::${unref(groupId)}::gallery`)
+
+  return useAsyncPaginationAPI(
+    key,
+    async ({ config }) => {
+      return fetchGroupGallery(unref(organizationCode), unref(groupId), {
+        ...DEFAULT_CONFIG,
+        ...config,
+      })
+    },
+    {
+      watch: onlyRefs([organizationCode, groupId]),
+      ...config,
+    }
+  )
+}
diff --git a/src/api/v2/location.service.ts b/src/api/v2/location.service.ts
new file mode 100644
index 000000000..606b7ec6f
--- /dev/null
+++ b/src/api/v2/location.service.ts
@@ -0,0 +1,31 @@
+import { getLocations as fetchGetLocations } from '@/api/locations.services'
+import useAsyncAPI from '@/composables/useAsyncAPI'
+import { onlyRefs } from '@/functs/onlyRefs'
+import { Locations } from '@/interfaces/maps'
+import { RefOrRaw } from '@/interfaces/utils'
+import { OrganizationModel } from '@/models/organization.model'
+
+const DEFAULT_CONFIG = {}
+
+export const getLocations = (
+  organizationCode: RefOrRaw<OrganizationModel['code']>,
+  config = {}
+) => {
+  const { translatePeopleGroupLocations, translateProjectLocations } = useAutoTranslate()
+  const key = computed(() => `${unref(organizationCode)}::locations`)
+
+  const translateAllModel = (data: ComputedRef<Locations>) => {
+    return computed(() => {
+      return {
+        groups: unref(translatePeopleGroupLocations(data.value?.groups)),
+        projects: unref(translateProjectLocations(data.value?.projects)),
+      }
+    })
+  }
+
+  return useAsyncAPI(key, () => fetchGetLocations(unref(organizationCode), { ...DEFAULT_CONFIG }), {
+    translate: translateAllModel,
+    watch: onlyRefs([organizationCode]),
+    ...config,
+  })
+}
diff --git a/src/app/fixLeaflet.ts b/src/app/fixLeaflet.ts
index 48778ee25..6637b8113 100644
--- a/src/app/fixLeaflet.ts
+++ b/src/app/fixLeaflet.ts
@@ -2,7 +2,7 @@ import { Icon } from 'leaflet'
 
 export default function fixLeaflet() {
   // Resolves an issue where the markers would not appear
-  // @ts-expect-error error typing
+  // @ts-expect-error ignore prototype error
   delete Icon.Default.prototype._getIconUrl
   Icon.Default.mergeOptions({
     iconRetinaUrl: 'leaflet/dist/images/marker-icon-2x.png',
diff --git a/src/app/router.options.ts b/src/app/router.options.ts
index df939e34a..02a9b8b2f 100644
--- a/src/app/router.options.ts
+++ b/src/app/router.options.ts
@@ -223,7 +223,7 @@ const routes = ({
   {
     path: '/create-group',
     name: 'createGroup',
-    component: () => import('../pages/CreateEditGroupPage/CreateEditGroupPage.vue'),
+    component: () => import('../pages/GroupPageV2/Tabs/GroupEditTab.vue'),
 
     meta: {
       resetScroll: true,
diff --git a/src/app/useAdminPagesRoutes.ts b/src/app/useAdminPagesRoutes.ts
index f40ae039f..d5a963d19 100644
--- a/src/app/useAdminPagesRoutes.ts
+++ b/src/app/useAdminPagesRoutes.ts
@@ -103,7 +103,7 @@ export default function useAdminPagesRoutes() {
             {
               path: 'create',
               name: 'adminCreateGroup',
-              component: () => import('../pages/CreateEditGroupPage/CreateEditGroupPage.vue'),
+              component: () => import('../pages/GroupPageV2/Tabs/GroupEditTab.vue'),
               props: {
                 postCancelRouteFactory: () => ({ name: 'groupsList' }),
                 postCreateRouteFactory: () => ({ name: 'groupsList' }),
@@ -120,7 +120,7 @@ export default function useAdminPagesRoutes() {
                 postCreateRouteFactory: () => ({ name: 'groupsList' }),
                 postUpdateRouteFactory: () => ({ name: 'groupsList' }),
               }),
-              component: () => import('../pages/CreateEditGroupPage/CreateEditGroupPage.vue'),
+              component: () => import('../pages/GroupPageV2/Tabs/GroupEditTab.vue'),
             },
           ],
         },
diff --git a/src/app/useGroupPagesRoutes.ts b/src/app/useGroupPagesRoutes.ts
index a88bc5b46..efaa2934a 100644
--- a/src/app/useGroupPagesRoutes.ts
+++ b/src/app/useGroupPagesRoutes.ts
@@ -15,12 +15,38 @@ export default function useGroupPagesRoutes() {
         {
           path: 'members',
           name: 'groupMembers',
-          component: () => import('../pages/GroupPageV2/Tabs/GroupMembersTab.vue'),
+          component: () => import('../pages/GroupPageV2/Tabs/Members/GroupMembersTab.vue'),
         },
         {
           path: 'projects',
           name: 'groupProjects',
-          component: () => import('../pages/GroupPageV2/Tabs/GroupProjectsTab.vue'),
+          component: () => import('../pages/GroupPageV2/Tabs/Projects/GroupProjectsTab.vue'),
+        },
+        {
+          path: 'publications',
+          name: 'groupPublications',
+          component: () => import('../pages/GroupPageV2/Tabs/Documents/GroupDocumentsTab.vue'),
+          props: () => ({
+            documentType: 'publications',
+          }),
+        },
+        {
+          path: 'conferences',
+          name: 'groupConferences',
+          component: () => import('../pages/GroupPageV2/Tabs/Documents/GroupDocumentsTab.vue'),
+          props: () => ({
+            documentType: 'conferences',
+          }),
+        },
+        {
+          path: 'locations',
+          name: 'groupLocations',
+          component: () => import('../pages/GroupPageV2/Tabs/Locations/GroupLocationsTab.vue'),
+        },
+        {
+          path: 'gallery',
+          name: 'groupGallery',
+          component: () => import('../pages/GroupPageV2/Tabs/Gallery/GroupGalleryTab.vue'),
         },
         // retro compat
         {
@@ -36,17 +62,22 @@ export default function useGroupPagesRoutes() {
             isReducedMode: true,
             groupId: route.params.groupId,
           }),
-          component: () => import('../pages/CreateEditGroupPage/CreateEditGroupPage.vue'),
+          component: () => import('../pages/GroupPageV2/Tabs/GroupEditTab.vue'),
         },
         {
           path: 'members/edit',
           name: 'groupMembersEdit',
-          component: () => import('../pages/GroupPageV2/Tabs/GroupMembersEditTab.vue'),
+          component: () => import('../pages/GroupPageV2/Tabs/Members/GroupMembersEditTab.vue'),
         },
         {
           path: 'projects/edit',
           name: 'groupProjectsEdit',
-          component: () => import('../pages/GroupPageV2/Tabs/GroupProjectsEditTab.vue'),
+          component: () => import('../pages/GroupPageV2/Tabs/Projects/GroupProjectsEditTab.vue'),
+        },
+        {
+          path: 'gallery/edit',
+          name: 'groupGalleryEdit',
+          component: () => import('../pages/GroupPageV2/Tabs/Gallery/GroupGalleryTab.vue'),
         },
       ],
       props: true,
diff --git a/src/components/base/form/TextInput.vue b/src/components/base/form/TextInput.vue
index 9a1dd23be..d8e67722c 100644
--- a/src/components/base/form/TextInput.vue
+++ b/src/components/base/form/TextInput.vue
@@ -29,6 +29,7 @@
         :disabled="disabled"
         :data-test="dataTest"
         :maxlength="maxLength"
+        @change="$emit('change', $event)"
         @keydown.enter="$emit('enter')"
         @focus="$emit('focus', $event)"
         @blur="$emit('blur', $event)"
@@ -122,7 +123,7 @@ export default {
     },
   },
 
-  emits: ['update:modelValue', 'enter', 'focus', 'blur'],
+  emits: ['update:modelValue', 'enter', 'focus', 'blur', 'change'],
 
   data() {
     return {
diff --git a/src/components/base/gallery/GalleryDeleteModal.vue b/src/components/base/gallery/GalleryDeleteModal.vue
new file mode 100644
index 000000000..d360366b8
--- /dev/null
+++ b/src/components/base/gallery/GalleryDeleteModal.vue
@@ -0,0 +1,31 @@
+<template>
+  <ConfirmModal
+    :title="$t('gallery.delete')"
+    :asyncing="loading"
+    @close="$emit('close')"
+    @submit="$emit('submit')"
+  >
+    <div class="gallery-container">
+      <span class="m-auto">{{ $t('gallery.confirm-delete') }}</span>
+      <GalleryItem :image="image" class="pointer-events-none" size="full" />
+    </div>
+  </ConfirmModal>
+</template>
+
+<script setup lang="ts">
+import GalleryItem from '@/components/base/gallery/GalleryItem.vue'
+import ConfirmModal from '@/components/base/modal/ConfirmModal.vue'
+import { ImageModel } from '@/models/image.model'
+
+defineProps<{ image: ImageModel; loading?: boolean }>()
+defineEmits(['close', 'submit'])
+</script>
+
+<style lang="scss">
+.gallery-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+}
+</style>
diff --git a/src/components/base/gallery/GalleryDrawer.vue b/src/components/base/gallery/GalleryDrawer.vue
new file mode 100644
index 000000000..c5666acd1
--- /dev/null
+++ b/src/components/base/gallery/GalleryDrawer.vue
@@ -0,0 +1,196 @@
+<template>
+  <BaseDrawer
+    :is-opened="isOpened"
+    :title="$t('gallery.title')"
+    class="full transparent"
+    no-footer
+    @close="$emit('close')"
+  >
+    <template #header_clear>
+      <span class="gallery-info">{{ selectedIndex + 1 }} / {{ pagination.count.value }}</span>
+    </template>
+    <FetchLoader :status="status" class-loading="loader-text" class-error="loader-text">
+      <div class="gallery-switch">
+        <div class="gallery-button">
+          <LpiButton
+            v-show="canPrev"
+            class="skeletons-background"
+            btn-icon="ArrowLeft"
+            :aria-label="$t('pagination.previous')"
+            :disabled="!canPrev"
+            @click="prev"
+          />
+        </div>
+        <div class="container">
+          <Transition appear :name="transition">
+            <GalleryItem
+              :key="localindex"
+              :image="imageSelected"
+              class="gallery-item"
+              size="original"
+            />
+          </Transition>
+        </div>
+        <div class="gallery-button">
+          <LpiButton
+            v-show="canNext"
+            class="skeletons-background"
+            btn-icon="ArrowRight"
+            :aria-label="$t('pagination.next')"
+            :disabled="!canNext"
+            @click="next"
+          />
+        </div>
+      </div>
+    </FetchLoader>
+  </BaseDrawer>
+</template>
+
+<script setup lang="ts">
+import LpiButton from '@/components/base/button/LpiButton.vue'
+import GalleryItem from '@/components/base/gallery/GalleryItem.vue'
+import { DEFAULT_IMAGE_PATATOID, usePatatoid } from '@/composables/usePatatoids'
+import { urlToImageModel } from '@/functs/imageSizesUtils'
+import { ImageModel } from '@/models/image.model'
+import { AsyncDataRequestStatus } from 'nuxt/app'
+
+const props = withDefaults(
+  defineProps<{
+    isOpened: boolean
+    images?: ImageModel[]
+    pagination: Pagination
+    selected?: ImageModel
+    status?: AsyncDataRequestStatus
+  }>(),
+  {
+    status: 'success',
+    images: () => [],
+    selected: null,
+  }
+)
+
+defineEmits(['close'])
+
+const localindex = ref(null)
+const transition = ref('')
+
+watch(
+  () => props.isOpened,
+  () => {
+    if (!props.isOpened) {
+      localindex.value = false
+    } else {
+      const selected = toRaw(props.selected)
+      localindex.value = props.images.findIndex((el) => el === selected)
+    }
+  }
+)
+
+const DEFAULT_IMAGE = urlToImageModel(usePatatoid(DEFAULT_IMAGE_PATATOID))
+const imageSelected = computed(() => props.images[localindex.value] ?? DEFAULT_IMAGE)
+const selectedIndex = computed(() => props.pagination.offset.value + localindex.value)
+
+watch(
+  selectedIndex,
+  (newIndex, oldIndex) => {
+    if (newIndex < oldIndex) {
+      transition.value = 'slide-left'
+    } else {
+      transition.value = 'slide-right'
+    }
+  },
+  { flush: 'pre', immediate: true }
+)
+
+const canPrev = computed(() => {
+  return selectedIndex.value !== 0
+})
+const prev = () => {
+  if (localindex.value === 0) {
+    props.pagination.prev()
+    localindex.value = props.pagination.limit.value - 1
+  } else {
+    localindex.value -= 1
+  }
+}
+const canNext = computed(() => {
+  return selectedIndex.value + 1 < props.pagination.count.value
+})
+const next = () => {
+  if (localindex.value + 1 === props.pagination.limit.value) {
+    props.pagination.next()
+    localindex.value = 0
+  } else {
+    localindex.value += 1
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.gallery-switch {
+  display: grid;
+  grid-template-columns: pxToRem(40px) 1fr pxToRem(40px);
+  margin: 0 auto;
+  width: 100%;
+  height: calc(100% - 64px);
+}
+
+.gallery-info {
+  color: white;
+  font-weight: bold;
+  padding: 0 1rem;
+  font-style: italic;
+  font-size: small;
+  opacity: 0.4;
+}
+
+.gallery-button {
+  margin: 0 auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.gallery-item {
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.slide-right-leave-active,
+.slide-right-enter-active,
+.slide-left-leave-active,
+.slide-left-enter-active {
+  transition: transform 0.2s;
+  transform: translateX(0);
+}
+
+.slide-left-enter-from,
+.slide-right-leave-to {
+  transform: translateX(-100vw);
+}
+
+.slide-left-leave-to,
+.slide-right-enter-from {
+  transform: translateX(100vw);
+}
+
+.container {
+  position: relative;
+}
+</style>
+
+<style lang="scss">
+.loader-text {
+  color: white;
+
+  .loading {
+    opacity: 0.9;
+  }
+
+  svg {
+    fill: white;
+  }
+}
+</style>
diff --git a/src/components/base/gallery/GalleryForm.vue b/src/components/base/gallery/GalleryForm.vue
new file mode 100644
index 000000000..64c3cb4ca
--- /dev/null
+++ b/src/components/base/gallery/GalleryForm.vue
@@ -0,0 +1,211 @@
+<template>
+  <DialogModal
+    :confirm-button-label="$t('common.save')"
+    :cancel-button-label="$t('common.cancel')"
+    :asyncing="loading"
+    :disabled="loading || !isValid"
+    :no-second-button="!!status"
+    @close="$emit('close')"
+    @submit="submit"
+  >
+    <template #header>
+      <h3>
+        {{ $t('gallery.add') }}
+        <span v-if="form.files?.length" class="gallery-length">({{ form.files.length }})</span>
+      </h3>
+    </template>
+
+    <template #body>
+      <div v-if="images.length" class="gallery-image-editor">
+        <GalleryList v-slot="{ image }" :images="images" :editable="!loading">
+          <div
+            class="pointer-events-none"
+            :class="{
+              'gallery-uploading': status,
+            }"
+          >
+            <GalleryItem
+              :key="image.url"
+              :image="image"
+              class="gallery-uploading-image"
+              :style-img="{ objectFit: 'cover' }"
+              :editable="!loading && !status"
+              @delete="deleteImage"
+            />
+            <div v-if="status" class="gallery-uploading-status">
+              <LoaderSimple v-if="status.get(image.url) === 'pending'" />
+              <IconImage
+                v-else-if="status.get(image.url) === 'success'"
+                name="Check"
+                class="success"
+              />
+              <IconImage v-else-if="status.get(image.url) === 'error'" name="Close" class="error" />
+              <IconImage v-else name="Alert" class="warning" />
+            </div>
+          </div>
+        </GalleryList>
+      </div>
+      <EmptyLabel v-else :label="$t('gallery.add-picture')" />
+    </template>
+
+    <template #extra-buttons>
+      <ImageInput v-if="!status" :label="$t('common.add')" multiple @upload-images="uploadImages" />
+    </template>
+  </DialogModal>
+</template>
+
+<script setup lang="ts">
+import DialogModal from '@/components/base/modal/DialogModal.vue'
+import { useGalleryImageForm } from '@/form/gallery'
+import GalleryList from '@/components/base/gallery/GalleryList.vue'
+import { ImageGalleryForm } from '@/interfaces/gallery'
+import EmptyLabel from '@/components/base/EmptyLabel.vue'
+import { urlToImageModel } from '@/functs/imageSizesUtils'
+import GalleryItem from '@/components/base/gallery/GalleryItem.vue'
+import { AsyncDataRequestStatus } from 'nuxt/app'
+
+const props = withDefaults(
+  defineProps<{
+    loading?: boolean
+    status?: Map<string, AsyncDataRequestStatus>
+  }>(),
+  {
+    loading: false,
+    status: null,
+  }
+)
+const emit = defineEmits<{
+  close: []
+  submit: [ImageGalleryForm]
+}>()
+const { form, isValid, cleanedData } = useGalleryImageForm()
+
+// create temporary uploaded pictures preview
+const images = computed(() => (form.value.files ?? []).map((el) => urlToImageModel(el.url)))
+
+const uploadImages = (pictures: File[]) => {
+  const fillers = pictures.map((file) => {
+    // optimize to not create new "objectUrl", if is already exists, return exist
+    const exists = (form.value.files ?? []).find((el) => el.file === file)
+    if (exists) {
+      return exists
+    }
+    return {
+      file,
+      url: URL.createObjectURL(file),
+    }
+  })
+  form.value.files = fillers
+}
+
+// remove "uploaded selected picture"
+const deleteImage = (image) => {
+  const index = images.value.findIndex((el) => el === image)
+  const pictures = form.value.files
+  pictures.splice(index, 1)
+}
+
+const submit = () => {
+  if (props.status) return
+  emit('submit', toRaw(cleanedData.value))
+}
+</script>
+
+<style lang="scss" scoped>
+.new-coords {
+  text-align: center;
+  font-style: italic;
+  font-weight: normal;
+}
+
+.description-input {
+  margin-top: $space-m;
+}
+
+.gallery-type-ctn {
+  margin: $space-m 0;
+
+  .gallery-type-label {
+    font-size: $font-size-s;
+    color: $primary-dark;
+    font-weight: bold;
+    margin-bottom: $space-2xs;
+  }
+}
+
+.delete-button {
+  color: $white;
+  border-color: $salmon;
+  background: $salmon;
+}
+
+.gallery-length {
+  font-style: italic;
+  opacity: 0.4;
+  font-size: small;
+}
+
+.gallery-uploading {
+  position: relative;
+
+  .gallery-uploading-image {
+    opacity: 0.6;
+  }
+
+  .gallery-uploading-status {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    border-radius: 5px;
+    background-color: color-mix(in srgb, $modal-background, transparent 10%);
+
+    & > * {
+      margin: auto;
+      width: 25%;
+
+      &.pending {
+        fill: $primary-lighter;
+      }
+
+      &.success {
+        fill: $primary;
+      }
+
+      &.error {
+        fill: $red;
+      }
+
+      &.warning {
+        fill: $salmon;
+      }
+    }
+  }
+}
+</style>
+
+<style>
+.gallery-map-ctn .map-recap {
+  height: 250px;
+}
+</style>
+
+<style lang="scss">
+.gallery-image-editor {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  gap: 0.5rem;
+
+  .gallery-grid {
+    grid-template-columns: repeat(4, 1fr);
+
+    > * {
+      height: pxToRem(130px);
+    }
+  }
+}
+</style>
diff --git a/src/components/base/gallery/GalleryItem.vue b/src/components/base/gallery/GalleryItem.vue
new file mode 100644
index 000000000..bcd3aba78
--- /dev/null
+++ b/src/components/base/gallery/GalleryItem.vue
@@ -0,0 +1,80 @@
+<template>
+  <button
+    class="reset-btn gallery-button shadow-box skeletons-background"
+    :class="editable ? 'pointer-events-none' : ''"
+    type="button"
+    rel="noopener"
+    :aria-label="$t('gallery.view')"
+    @click.stop="$emit('click', image)"
+  >
+    <img :src="src" :alt="image.name" :style="styleImg" class="gallery-item" @error="onError" />
+    <LpiButton
+      v-if="editable"
+      btn-icon="Close"
+      :aria-label="$t('common.delete')"
+      class="gallery-item-delete"
+      @click.stop="$emit('delete', image)"
+    />
+  </button>
+</template>
+
+<script setup lang="ts">
+import LpiButton from '@/components/base/button/LpiButton.vue'
+import { DEFAULT_IMAGE_PATATOID, usePatatoid } from '@/composables/usePatatoids'
+import { ImageModel } from '@/models/image.model'
+import { StyleValue } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    image: ImageModel
+    editable?: boolean
+    styleImg?: StyleValue
+    size?: keyof ImageModel['variations']
+  }>(),
+  { editable: false, styleImg: null, size: 'medium' }
+)
+
+defineEmits<{
+  click: [ImageModel]
+  delete: [ImageModel]
+}>()
+
+const defaultPicture = usePatatoid(DEFAULT_IMAGE_PATATOID)
+
+const error = ref(false)
+const onError = () => (error.value = true)
+
+const src = computed(() => {
+  if (error.value) {
+    return defaultPicture
+  }
+  return props.image.variations[props.size]
+})
+</script>
+
+<style lang="scss">
+.gallery-button {
+  cursor: pointer;
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.gallery-item {
+  width: 100%;
+  max-height: 100%;
+  height: 100%;
+  object-fit: contain;
+  border-radius: 5px;
+}
+
+.gallery-item-delete {
+  position: absolute;
+  pointer-events: all;
+  top: 0;
+  right: 0;
+  margin: -5px;
+  height: 30px !important;
+  width: 30px !important;
+}
+</style>
diff --git a/src/components/base/gallery/GalleryList.vue b/src/components/base/gallery/GalleryList.vue
new file mode 100644
index 000000000..6578618ce
--- /dev/null
+++ b/src/components/base/gallery/GalleryList.vue
@@ -0,0 +1,58 @@
+<template>
+  <div class="gallery-grid">
+    <template v-for="image in images">
+      <slot :image="image">
+        <GalleryItem
+          :key="image.url"
+          :image="image"
+          :editable="editable"
+          :size="imageSize"
+          :style-img="{ objectFit: 'cover' }"
+          @delete="$emit('delete', image)"
+          @click="$emit('click', image)"
+        />
+      </slot>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import GalleryItem from '@/components/base/gallery/GalleryItem.vue'
+import { ImageModel } from '@/models/image.model'
+
+withDefaults(
+  defineProps<{
+    images: ImageModel[]
+    editable?: boolean
+    imageSize?: keyof ImageModel['variations']
+  }>(),
+  { editable: false, imageSize: null }
+)
+
+defineEmits<{
+  click: [ImageModel]
+  delete: [ImageModel]
+}>()
+</script>
+
+<style lang="scss">
+.gallery-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 0.5rem;
+  width: 100%;
+  height: 100%;
+
+  > * {
+    height: pxToRem(130px);
+  }
+
+  @media screen and (min-width: $min-desktop) {
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+  }
+
+  @media screen and (max-width: $min-tablet) {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+</style>
diff --git a/src/components/group/GroupCard.vue b/src/components/group/GroupCard.vue
index 6866870cd..d61f93bb3 100644
--- a/src/components/group/GroupCard.vue
+++ b/src/components/group/GroupCard.vue
@@ -4,6 +4,7 @@
     :to-link="toLink"
     :data-test="`group-card-${group.name}`"
     :mode="mode"
+    :line-clamp="lineClamp"
     @click="toGroupPage"
   >
     <template #actions-right>
@@ -19,119 +20,102 @@
 
     <CroppedApiImage
       :alt="`${group.name} image`"
-      class="picture picture-group"
+      class="picture picture-group skeletons-image"
       :picture-data="group.header_image"
       picture-size="medium"
       :default-picture="DEFAULT_USER_PATATOID"
     />
 
     <div class="text text-limit">
-      <div v-if="group.members_count !== undefined" class="group-count">
+      <div v-if="modules.members" class="group-count skeletons-background">
         <IconImage name="MultiplePerson" class="icon" />
-        {{ group.members_count }}
+        {{ modules.members }}
       </div>
-      <div class="card-type">
+      <div class="card-type skeletons-text">
         {{ translatedName }}
       </div>
-      <p v-html="translatedShortDescription" />
+      <p class="skeletons-text" v-html="translatedShortDescription" />
     </div>
 
-    <template v-if="hasSubGroupsLink" #footer>
-      <div class="subgroups-link" @click.prevent="gotoSubgroup(group)">
-        {{ $t('group.see-subgroups', group.children.length) }}
+    <template v-if="modules.subgroups" #footer>
+      <NuxtLink
+        :to="{
+          name: 'Groups',
+          params: { groupId: group.id },
+        }"
+        class="subgroups-link"
+      >
+        {{ $t('group.see-subgroups', modules.subgroups) }}
         <IconImage class="arrow" name="ArrowRight" />
-      </div>
+      </NuxtLink>
     </template>
   </BasicCard>
 </template>
 
-<script>
+<script setup lang="ts">
 import BasicCard from '@/components/base/BasicCard.vue'
 import IconImage from '@/components/base/media/IconImage.vue'
 import CroppedApiImage from '@/components/base/media/CroppedApiImage.vue'
 import { DEFAULT_USER_PATATOID } from '@/composables/usePatatoids'
+import { TranslatedPeopleGroupModel } from '@/models/invitation.model'
+
+const props = withDefaults(
+  defineProps<{
+    group: TranslatedPeopleGroupModel
+    hasAddIcon?: boolean
+    hasCloseIcon?: boolean
+    mode?: 'card' | 'list'
+  }>(),
+  {
+    hasAddIcon: false,
+    hasCloseIcon: false,
+    mode: 'card',
+  }
+)
+
+const emit = defineEmits<{
+  add: []
+  unselect: [TranslatedPeopleGroupModel]
+  click: [TranslatedPeopleGroupModel]
+  'navigated-away': []
+}>()
+
+const translatedName = computed(() => props.group.$t?.name ?? props.group.name)
+const translatedShortDescription = computed(
+  () => props.group.$t?.short_description ?? props.group.short_description
+)
+
+const showAddButton = computed(() => props.hasAddIcon)
+const showCloseButton = computed(() => props.hasCloseIcon)
+const toLink = computed(() => {
+  // a to-link attribute make the basic card a NuxtLink
+  // witch we dont want when just selecting project
+  return showAddButton.value ? null : { name: 'Group', params: { groupId: props.group.id } }
+})
+
+const modules = computed(() => props.group.modules ?? ({} as TranslatedPeopleGroupModel['modules']))
+
+// calculate lineClamp description
+const lineClamp = computed(() => {
+  let defaultLineClamp = 6
+  if (modules.value.subgroups) {
+    defaultLineClamp -= 2
+  }
+  if (modules.value.members) {
+    defaultLineClamp -= 1
+  }
+
+  return defaultLineClamp
+})
 
-export default {
-  name: 'GroupCard',
-
-  components: {
-    BasicCard,
-    IconImage,
-    CroppedApiImage,
-  },
-
-  props: {
-    group: {
-      type: Object,
-      required: true,
-    },
-
-    hasAddIcon: {
-      type: Boolean,
-      default: false,
-    },
-
-    hasCloseIcon: {
-      type: Boolean,
-      default: false,
-    },
-    hasSubGroupsLink: {
-      type: Boolean,
-      default: false,
-    },
-    mode: {
-      type: String,
-      default: 'card', // 'card' or 'list'
-    },
-  },
-
-  emits: ['add', 'unselect', 'click', 'navigated-away'],
-
-  setup(props) {
-    const { getTranslatableField } = useAutoTranslate()
-    const translatedName = getTranslatableField(props.group, 'name')
-    const translatedShortDescription = getTranslatableField(props.group, 'short_description')
-
-    return {
-      translatedName,
-      translatedShortDescription,
-      DEFAULT_USER_PATATOID,
-    }
-  },
-
-  computed: {
-    showAddButton() {
-      return this.hasAddIcon
-    },
-
-    showCloseButton() {
-      return this.hasCloseIcon
-    },
-
-    toLink() {
-      // a to-link attribute make the basic card a NuxtLink
-      // witch we dont want when just selecting project
-      return this.hasAddIcon
-        ? null
-        : { name: 'Group', params: { groupId: this.group.slug || this.group.id } }
-    },
-  },
-
-  methods: {
-    mailTo() {
-      document.location.href = `mailto:${this.group.email}`
-    },
-
-    toGroupPage() {
-      // this is a quick and dirty fix to make whole card clickable for selection
-      if (this.hasAddIcon) this.$emit('add')
-      else this.$emit('navigated-away')
-    },
-
-    gotoSubgroup(group) {
-      this.$router.push({ name: 'Groups', params: { groupId: group.id } })
-    },
-  },
+const mailTo = () => (document.location.href = `mailto:${props.group.email}`)
+const toGroupPage = () => {
+  // this is a quick and dirty fix to make whole card clickable for selection
+  if (showAddButton.value) {
+    emit('add')
+  } else {
+    emit('navigated-away')
+  }
 }
 </script>
 
diff --git a/src/components/group/GroupForm/GroupForm.vue b/src/components/group/GroupForm/GroupForm.vue
index 76a3435a0..f57fe6aad 100644
--- a/src/components/group/GroupForm/GroupForm.vue
+++ b/src/components/group/GroupForm/GroupForm.vue
@@ -60,15 +60,11 @@
       />
     </div>
 
-    <div class="spacer" />
-
     <!-- Description -->
     <div class="description">
       <label>
         {{ $t('group.form.description-label') }}
-
         <LpiButton
-          v-if="!form.description || isAddMode"
           class="add-btn"
           :btn-icon="form.description ? 'Pen' : 'Plus'"
           data-test="add-description"
@@ -82,7 +78,67 @@
       </div>
     </div>
 
-    <div class="spacer" />
+    <!-- tags -->
+    <div class="description">
+      <label>
+        {{ $t('group.form.tags') }}
+        <LpiButton
+          class="add-btn"
+          :btn-icon="form.tags?.length ? 'Pen' : 'Plus'"
+          data-test="add-sdgs"
+          :label="$t(form.tags?.length ? 'group.form.edit' : 'group.form.add')"
+          @click="openTags = true"
+        />
+      </label>
+      <TagsFilterSummary v-model="form.tags" />
+      <TagsDrawer v-model="form.tags" :is-opened="openTags" @close="openTags = false" />
+    </div>
+
+    <!-- Sdg -->
+    <div class="description">
+      <label>
+        {{ $t('group.form.sdg-label') }}
+        <LpiButton
+          class="add-btn"
+          :btn-icon="form.sdgs?.length ? 'Pen' : 'Plus'"
+          data-test="add-sdgs"
+          :label="$t(form.sdgs?.length ? 'group.form.edit' : 'group.form.add')"
+          @click="openSdg = true"
+        />
+      </label>
+      <SdgList :sdgs="form.sdgs" />
+      <SdgsDrawer v-model="form.sdgs" :is-opened="openSdg" @close="openSdg = false" />
+    </div>
+
+    <!-- location -->
+    <div class="description">
+      <label>
+        {{ $t('group.form.location') }}
+        <LpiButton
+          class="add-btn"
+          :btn-icon="form.location ? 'Pen' : 'Plus'"
+          data-test="add-location"
+          :label="$t(form.location ? 'group.form.edit' : 'group.form.add')"
+          @click="openModal()"
+        />
+      </label>
+      <LocationItem
+        v-if="form.location"
+        :location="form.location"
+        :focus="false"
+        show-location-type
+        :default-title="$t('location.default-title')"
+      />
+      <LocationDrawer
+        :is-opened="stateModal"
+        :locations="form.location ? [form.location] : []"
+        editable
+        :location-types="['address']"
+        @close="closeModal('location')"
+        @submit="submitLocation"
+        @delete="removeLocation"
+      />
+    </div>
 
     <template v-if="!isReducedMode">
       <!-- Team -->
@@ -90,22 +146,16 @@
         <GroupTeamSection v-model="form.members" />
       </div>
 
-      <div class="spacer" />
-
       <!-- Featured projects -->
       <div class="project">
         <ProjectSection v-model="form.featuredProjects" />
       </div>
-
-      <div class="spacer" />
     </template>
     <!-- Parent group -->
     <div class="parent-group">
       <ParentGroupSection v-model="form.parentGroup" :groups="groups" />
     </div>
 
-    <div class="spacer" />
-
     <!-- Visibility -->
     <div class="visibility">
       <label>{{ $t('group.form.visibility.title') }}</label>
@@ -170,9 +220,25 @@ import { deleteGroup, getHierarchyGroups } from '@/api/groups.service.ts'
 import useOrganizationsStore from '@/stores/useOrganizations.ts'
 import { useRuntimeConfig } from '#imports'
 import { usePatatoids } from '@/composables/usePatatoids'
+import SdgsDrawer from '@/components/sdgs/SdgsDrawer.vue'
+import SdgList from '@/components/sdgs/SdgList.vue'
+import TagsDrawer from '@/components/tags/TagsDrawer.vue'
+import TagsFilterSummary from '@/components/search/Filters/TagsFilterSummary.vue'
+import LocationDrawer from '@/components/map/LocationDrawer.vue'
+import LocationItem from '@/components/map/LocationItem.vue'
+
 export default {
   name: 'GroupForm',
 
+  components: {
+    SdgList,
+    SdgsDrawer,
+    TagsDrawer,
+    TagsFilterSummary,
+    LocationDrawer,
+    LocationItem,
+  },
+
   props: {
     isAddMode: {
       type: Boolean,
@@ -198,15 +264,21 @@ export default {
     const organizationsStore = useOrganizationsStore()
     const runtimeConfig = useRuntimeConfig()
     const defaultPictures = usePatatoids()
+    const { stateModal, openModal, closeModal } = useModal()
     return {
       organizationsStore,
       runtimeConfig,
       defaultPictures,
+      stateModal,
+      openModal,
+      closeModal,
     }
   },
 
   data() {
     return {
+      openSdg: false,
+      openTags: false,
       loading: false,
       currentPatatoidIndex: 1,
       visibilities: [
@@ -235,6 +307,9 @@ export default {
         parentGroup: null, // group object
         organization: '',
         members: [],
+        sdgs: [],
+        tags: [],
+        location: null,
         featuredProjects: [],
         header_image: null,
         imageSizes: null,
@@ -319,6 +394,14 @@ export default {
         name: 'HomeRoot',
       })
     },
+    removeLocation() {
+      this.form.location = null
+      this.closeModal()
+    },
+    submitLocation(location) {
+      this.form.location = { ...location }
+      this.closeModal()
+    },
   },
 }
 </script>
@@ -352,7 +435,8 @@ export default {
 
   .team,
   .parent-group,
-  .project {
+  .project,
+  .location {
     margin-bottom: $space-xl;
   }
 
@@ -533,9 +617,11 @@ export default {
     display: block;
   }
 
-  .spacer {
+  > *::after {
     border-top: 1px solid $lighter-gray;
-    margin-bottom: 34px;
+    margin: 34px 0;
+    content: '';
+    display: block;
   }
 }
 </style>
diff --git a/src/components/group/GroupForm/GroupTeamSection.vue b/src/components/group/GroupForm/GroupTeamSection.vue
index 33ca36e79..5b1f8ce1c 100644
--- a/src/components/group/GroupForm/GroupTeamSection.vue
+++ b/src/components/group/GroupForm/GroupTeamSection.vue
@@ -37,9 +37,8 @@
         v-for="user in showFullList ? modelValue : shortList"
         :key="user.id"
         icon="Close"
-        :role-label="roleLabel(user)"
-        :user="user"
-        @user-clicked="removeUser(user)"
+        :member="user"
+        @click="removeUser(user)"
       />
     </div>
     <div class="show-more">
@@ -143,16 +142,8 @@ export default {
       const team = this.modelValue.filter((member) => user.id !== member.id)
       this.$emit('update:model-value', team)
     },
-    roleLabel(user) {
-      if (user) {
-        if (user.is_leader && user.is_manager) return 'group.role.leaders-managers.label'
-        else if (user.is_manager) return 'group.role.managers.label'
-        else if (user.is_leader) return 'group.role.leaders.label'
-        else return 'group.role.members.label'
-      }
-      return null
-    },
     openDrawer(mode) {
+      console.log(this.teamModalMode)
       this.teamModalMode = mode
       this.teamModalVisible = true
     },
diff --git a/src/components/group/GroupForm/ParentGroupSection.vue b/src/components/group/GroupForm/ParentGroupSection.vue
index dd79d2390..dfb4a1de9 100644
--- a/src/components/group/GroupForm/ParentGroupSection.vue
+++ b/src/components/group/GroupForm/ParentGroupSection.vue
@@ -7,56 +7,49 @@
 
       <LpiButton
         class="add-parent-group-card"
-        :btn-icon="modelValue ? 'Pen' : 'Plus'"
-        :label="t(modelValue ? 'group.form.edit' : 'group.form.add')"
+        :btn-icon="model ? 'Pen' : 'Plus'"
+        :label="t(model ? 'group.form.edit' : 'group.form.add')"
         data-test="add-parent-group-card"
-        @click="drawerIsOpen = true"
+        @click="openModal()"
       />
     </label>
 
-    <div v-if="modelValue" class="group-grid">
-      <GroupCard :group="modelValue" />
+    <div v-if="model" class="group-grid">
+      <GroupCard :group="model" mode="list" />
     </div>
 
     <PickGroupDrawer
       :drawer-title="t('group.form.add-parent-group')"
       :subtitle="t('admin.groups.subtitle-edit-child')"
-      :is-opened="drawerIsOpen"
+      :is-opened="stateModal"
       :groups="groups"
-      :initial-group="modelValue"
-      :forbidden-ids="forbiddenIds"
+      :initial-group="model"
       :rooted="true"
-      @close="closeDrawer"
+      @close="closeModal()"
       @confirm="confirmGroup"
     />
   </div>
 </template>
 
-<script setup>
-defineOptions({ name: 'ParentGroupSection' })
+<script setup lang="ts">
+import { TranslatedPeopleGroupModel } from '@/models/invitation.model'
 
-defineProps({
-  modelValue: {
-    type: [Object, null],
-    default: null,
-  },
-  groups: {
-    type: Array,
-    default: () => [],
-  },
-})
+withDefaults(
+  defineProps<{
+    groups?: TranslatedPeopleGroupModel[]
+  }>(),
+  {
+    groups: () => [],
+  }
+)
+const model = defineModel<TranslatedPeopleGroupModel | null>()
 
-const emit = defineEmits(['update:modelValue'])
 const { t } = useNuxtI18n()
-const drawerIsOpen = ref(false)
-const forbiddenIds = ref([])
+const { closeModal, openModal, stateModal } = useModal()
 
-const closeDrawer = () => {
-  drawerIsOpen.value = false
-}
 const confirmGroup = (group) => {
-  emit('update:modelValue', group)
-  closeDrawer()
+  model.value = group
+  closeModal()
 }
 </script>
 
@@ -80,7 +73,7 @@ const confirmGroup = (group) => {
 
   .group-grid {
     display: grid;
-    grid-template-columns: 1fr 1fr;
+    grid-template-columns: 1fr;
     justify-items: stretch;
     gap: $space-l;
   }
diff --git a/src/components/group/GroupForm/ProjectSection.vue b/src/components/group/GroupForm/ProjectSection.vue
index 46b86026f..d17369531 100644
--- a/src/components/group/GroupForm/ProjectSection.vue
+++ b/src/components/group/GroupForm/ProjectSection.vue
@@ -15,14 +15,18 @@
     </label>
 
     <div v-if="modelValue.length" class="team-grid">
-      <ProjectCard
+      <ProjectPreview
         v-for="project in showFullList ? modelValue : shortList"
         :key="project.id"
-        :has-close-icon="true"
         :project="project"
-        class="selected-card"
-        @unselect="onRemoveProject(project)"
-      />
+        @click="onRemoveProject(project)"
+      >
+        <template #action>
+          <div class="close-icon">
+            <IconImage name="Close" @click="onRemoveProject(project)" />
+          </div>
+        </template>
+      </ProjectPreview>
     </div>
     <div class="show-more">
       <LinkButton
@@ -45,6 +49,8 @@
 </template>
 
 <script setup>
+import ProjectPreview from '@/components/project/ProjectPreview.vue'
+
 defineOptions({ name: 'ProjectSection' })
 
 const props = defineProps({
@@ -119,4 +125,10 @@ const onRemoveProject = (project) => {
     margin-top: $space-l;
   }
 }
+
+.close-icon {
+  width: 2rem;
+  fill: var(--primary-dark);
+  cursor: pointer;
+}
 </style>
diff --git a/src/components/group/GroupHeader/GroupHeaderSkeleton.vue b/src/components/group/GroupHeader/GroupHeaderSkeleton.vue
deleted file mode 100644
index 8c04231f1..000000000
--- a/src/components/group/GroupHeader/GroupHeaderSkeleton.vue
+++ /dev/null
@@ -1,75 +0,0 @@
-<template>
-  <div class="group">
-    <SkeletonComponent class="image" />
-    <div class="infos">
-      <SkeletonComponent width="50%" height="25px" />
-      <SkeletonComponent width="30%" height="20px" />
-    </div>
-    <div class="options">
-      <SkeletonComponent class="item" />
-      <SkeletonComponent class="item" />
-    </div>
-  </div>
-</template>
-
-<script setup>
-import SkeletonComponent from '@/components/base/loader/SkeletonComponent.vue'
-defineOptions({ name: 'GroupHeaderSkeleton' })
-</script>
-
-<style lang="scss" scoped>
-.group {
-  background: $primary-lighter;
-  padding: calc($space-2xs * 5) calc($space-s * 5);
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  border-radius: $border-radius-l;
-  gap: calc($space-s * 5);
-  margin-bottom: pxToRem(30px);
-
-  .image {
-    width: 100px;
-    height: 100px;
-    border-radius: 50%;
-    border: 5px solid $white;
-    flex-shrink: 0;
-  }
-
-  .infos {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: calc($space-2xs * 5);
-  }
-
-  .options {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: $space-m;
-
-    .item {
-      height: 30px;
-      width: 30px;
-      border-radius: $border-radius-s;
-    }
-  }
-}
-
-@media screen and (max-width: $med-tablet) {
-  .group {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: calc($space-2xs * 5);
-    padding: calc($space-2xs * 5);
-
-    .image {
-      width: 200px;
-      height: 200px;
-      align-self: center;
-    }
-  }
-}
-</style>
diff --git a/src/components/group/GroupHeader/GroupHeaderV2.vue b/src/components/group/GroupHeader/GroupHeaderV2.vue
deleted file mode 100644
index 2fbdace4d..000000000
--- a/src/components/group/GroupHeader/GroupHeaderV2.vue
+++ /dev/null
@@ -1,166 +0,0 @@
-<template>
-  <div v-if="!isLoading" class="header-group">
-    <div class="header-group-image">
-      <CroppedApiImage
-        :alt="`${title} image`"
-        :picture-data="image"
-        picture-size="medium"
-        :default-picture="DEFAULT_USER_PATATOID"
-      />
-    </div>
-    <div class="header-group-infos">
-      <h1 class="header-group-infos__title">
-        {{ title }}
-      </h1>
-      <p v-if="shortDescription" class="short-description" v-html="shortDescription" />
-      <div class="header-group-infos__visibility">
-        <p>
-          <span class="icon">
-            <IconImage :name="groupVisibilityIcon" />
-          </span>
-          <span>
-            {{ groupVisibilityLabel }}
-          </span>
-        </p>
-      </div>
-    </div>
-  </div>
-  <GroupHeaderSkeleton v-else />
-</template>
-
-<script setup lang="ts">
-import { DEFAULT_USER_PATATOID } from '@/composables/usePatatoids'
-import { ImageModel } from '@/models/image.model'
-
-defineOptions({ name: 'GroupHeaderV2' })
-const props = withDefaults(
-  defineProps<{
-    title: string
-    image: ImageModel | null
-    visibility: string
-    isLoading?: boolean
-    shortDescription?: string
-  }>(),
-  { isLoading: false, shortDescription: null }
-)
-
-const { t } = useNuxtI18n()
-
-const groupVisibilityLabel = computed(() => {
-  if (props.visibility === 'public') {
-    return t('group.visibility-public')
-  } else if (props.visibility === 'private') {
-    return t('group.visibility-private')
-  }
-  return t('group.visibility-org')
-})
-
-const groupVisibilityIcon = computed(() => (props.visibility === 'public' ? 'Eye' : 'EyeSlash'))
-</script>
-
-<style lang="scss" scoped>
-.header-group {
-  background: $primary-lighter;
-  padding: calc($space-2xs * 5) calc($space-s * 5);
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  border-radius: $border-radius-l;
-  gap: calc($space-s * 5);
-  margin-bottom: pxToRem(30px);
-
-  &-image {
-    position: relative;
-    width: 100px;
-    height: 100px;
-    border-radius: 50%;
-    border: 5px solid $white;
-    overflow: hidden;
-    flex-shrink: 0;
-
-    .cropped-image {
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-  &-infos {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: calc($space-2xs * 5);
-
-    &__title {
-      font-weight: 700;
-      font-size: clamp(2rem, 3vw, 3rem);
-      line-height: $line-height-tight;
-      color: $black;
-    }
-
-    &__visibility {
-      p {
-        font-weight: 700;
-        font-size: $font-size-xs;
-        color: $primary-dark;
-        display: flex;
-        align-items: center;
-        gap: $space-s;
-
-        .icon svg {
-          fill: $primary-dark;
-          width: $layout-size-xl;
-          height: $layout-size-m;
-        }
-      }
-    }
-  }
-
-  &-options {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: $space-m;
-
-    .share-ctn button {
-      border: none;
-      background: white;
-    }
-
-    .share-ctn {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: $space-m;
-      z-index: 1;
-
-      svg {
-        width: 24px;
-        fill: $primary-dark;
-        cursor: pointer;
-      }
-    }
-  }
-}
-
-.short-description {
-  font-weight: 400;
-  font-size: $font-size-m;
-  margin-bottom: $space-l;
-}
-
-@media screen and (max-width: $med-tablet) {
-  .header-group {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: calc($space-2xs * 5);
-    padding: calc($space-2xs * 5);
-
-    &-image {
-      width: 200px;
-      height: 200px;
-      align-self: center;
-    }
-  }
-}
-</style>
diff --git a/src/components/group/GroupPageInnerV2.vue b/src/components/group/GroupPageInnerV2.vue
deleted file mode 100644
index c04c54918..000000000
--- a/src/components/group/GroupPageInnerV2.vue
+++ /dev/null
@@ -1,399 +0,0 @@
-<template>
-  <div
-    :key="groupId"
-    class="group-layout"
-    :class="{
-      'can-edit-group': canEditGroup,
-      'group-edit-layout': isEditing,
-      'group-display-layout': !isEditing,
-    }"
-  >
-    <div v-if="groupData" class="page-section-extra-wide">
-      <NavPanelLayout
-        :is-loading="isLoading"
-        :is-nav-collapsed="isNavCollapsed"
-        :breadcrumbs="groupHierarchy || []"
-        @toggle-nav-panel="toggleNavPanel"
-        @collapse-nav-panel="isNavCollapsed = true"
-      >
-        <template #nav-panel>
-          <LazyGroupNavPanel
-            v-if="!isLoading && !isNavCollapsed"
-            :class="{ collapsed: isNavCollapsed }"
-            :group-tabs="groupTabs"
-            :current-tab="currentTab"
-            :email="groupEmail"
-            :can-edit-group="canEditGroup"
-            :is-editing="isEditing"
-            class="slide-panel"
-            @navigated="onNavigated"
-            @toggle-editing="toggleEditing"
-          />
-        </template>
-        <template v-if="currentTab" #content>
-          <SubPageTitle :title-prefix="groupName" :current-tab="currentTab" />
-          <NuxtPage v-bind="currentTab.props" />
-        </template>
-      </NavPanelLayout>
-    </div>
-
-    <NavPanelLoader v-else />
-    <!--div class="page-section-extra-wide tabs-wrapper">
-      <GroupTabs
-        :description="groupDescription"
-        :projects-initial-request="projectsInitialRequest"
-        :is-projects-loading="isProjectsLoading"
-        :members-initial-request="membersInitialRequest"
-        :is-members-loading="isMembersLoading"
-        :is-loading="isLoading"
-        :align-left="true"
-        :border="false"
-      />
-    </div-->
-  </div>
-</template>
-
-<script>
-import { getGroup, getGroupMember, getGroupProject } from '@/api/groups.service'
-import usePeopleGroupsStore from '@/stores/usePeopleGroups'
-import useOrganizationsStore from '@/stores/useOrganizations.ts'
-export default {
-  name: 'GroupPageInnerV2',
-  props: {
-    groupId: {
-      type: String,
-      required: true,
-    },
-  },
-  setup() {
-    const peopleGroupsStore = usePeopleGroupsStore()
-    const organizationsStore = useOrganizationsStore()
-    const { canEditGroup } = usePermissions()
-    const uniqueId = 'group-nav-panel'
-    const { isNavCollapsed, toggleNavPanel, collapseIfUnderBreakpoint } =
-      useToggleableNavPanel(uniqueId)
-
-    const onNavigated = collapseIfUnderBreakpoint
-    const { translateGroup } = useAutoTranslate()
-    const rawGroupData = ref({})
-    const groupData = translateGroup(rawGroupData)
-    return {
-      peopleGroupsStore,
-      organizationsStore,
-      canEditGroup,
-      isNavCollapsed,
-      rawGroupData,
-      groupData,
-      toggleNavPanel,
-      onNavigated,
-    }
-  },
-
-  data() {
-    return {
-      membersInitialRequest: {},
-      projectsInitialRequest: {},
-      isLoading: true,
-      isProjectsLoading: true,
-      isMembersLoading: true,
-    }
-  },
-
-  computed: {
-    groupName() {
-      return this.groupData?.$t?.name
-    },
-    groupImage() {
-      return this.groupData?.header_image
-    },
-    groupEmail() {
-      return this.groupData?.email
-    },
-    groupVisibility() {
-      return this.groupData?.publication_status
-    },
-    // groupSlug() {
-    //   return this.groupData?.slug
-    // },
-
-    groupDescription() {
-      return this.groupData?.$t?.description
-    },
-    groupShortDescription() {
-      return this.groupData?.$t?.short_description
-    },
-
-    groupHierarchy() {
-      const root = {
-        name: this.$t('common.groups'),
-        route: { name: 'Groups' },
-      }
-      if (!this.groupData) return [root]
-      return [
-        root,
-        ...(this.groupData?.hierarchy || []).map((group) => ({
-          name: group.name,
-          route: { name: 'Group', params: { groupId: group.slug || group.id } },
-        })),
-      ]
-    },
-    groupChildren() {
-      return this.groupData?.children
-    },
-
-    groupTabsDisplay() {
-      return [
-        {
-          key: 'group-snapshot',
-          dataTest: 'group-snapshot',
-          label: this.$t('group.snapshot'),
-          view: `/group/${this.$route.params.groupId}/snapshot`,
-          altView: `/group/${this.$route.params.groupId}/snapshot/edit`,
-          props: {
-            description: this.groupDescription,
-            projectsInitialRequest: this.projectsInitialRequest,
-            isProjectsLoading: this.isProjectsLoading,
-            membersInitialRequest: this.membersInitialRequest,
-            isMembersLoading: this.isMembersLoading,
-            isLoading: this.isLoading,
-            groupName: this.groupName,
-            groupImage: this.groupImage,
-            groupVisibility: this.groupVisibility,
-            groupShortDescription: this.groupShortDescription,
-            groupChildren: this.groupChildren,
-          },
-          condition: true,
-          noTitle: true,
-          icon: 'Home',
-        },
-        {
-          key: 'group-members',
-          dataTest: 'group-members',
-          label: this.$t('group.members'),
-          view: `/group/${this.$route.params.groupId}/members`,
-          altView: `/group/${this.$route.params.groupId}/members/edit`,
-          props: {
-            membersInitialRequest: this.membersInitialRequest,
-            isMembersLoading: this.isMembersLoading,
-          },
-          condition: true,
-          icon: 'Users',
-        },
-        {
-          key: 'group-projects',
-          dataTest: 'group-projects',
-          label: this.$t('group.projects'),
-          view: `/group/${this.$route.params.groupId}/projects`,
-          altView: `/group/${this.$route.params.groupId}/projects/edit`,
-          props: {
-            projectsInitialRequest: this.projectsInitialRequest,
-            isProjectsLoading: this.isProjectsLoading,
-          },
-          condition: true,
-          icon: 'Archive',
-        },
-      ]
-    },
-
-    groupTabsDisplayFiltered() {
-      return this.groupTabsDisplay.filter((tab) => tab.condition)
-    },
-
-    groupTabsEdit() {
-      return [
-        {
-          key: 'group-snapshot-edit',
-          dataTest: 'group-snapshot-edit',
-          label: this.$t('group.snapshot'),
-          view: `/group/${this.$route.params.groupId}/snapshot/edit`,
-          altView: `/group/${this.$route.params.groupId}/snapshot`,
-          props: {
-            isInEditingMode: true,
-            description: this.groupDescription,
-            projectsInitialRequest: this.projectsInitialRequest,
-            isProjectsLoading: this.isProjectsLoading,
-            membersInitialRequest: this.membersInitialRequest,
-            isMembersLoading: this.isMembersLoading,
-            isLoading: this.isLoading,
-            groupName: this.groupName,
-            groupImage: this.groupImage,
-            groupVisibility: this.groupVisibility,
-            groupShortDescription: this.groupShortDescription,
-            groupChildren: this.groupChildren,
-            onReloadGroup: this.loadGroup,
-          },
-          condition: true,
-          noTitle: true,
-          icon: 'Home',
-        },
-        {
-          key: 'groups-members-edit',
-          dataTest: 'groups-members-edit',
-          label: this.$t('group.members'),
-          view: `/group/${this.$route.params.groupId}/members/edit`,
-          altView: `/group/${this.$route.params.groupId}/members`,
-          props: {
-            isInEditingMode: true,
-            groupData: this.groupData,
-            onReloadGroupMembers: this.loadGroupMembers,
-          },
-          condition: this.groupData,
-          icon: 'Users',
-        },
-        {
-          key: 'group-projects-edit',
-          dataTest: 'group-projects-edit',
-          label: this.$t('group.projects'),
-          view: `/group/${this.$route.params.groupId}/projects/edit`,
-          altView: `/group/${this.$route.params.groupId}/projects`,
-          props: {
-            groupId: this.groupId,
-            isInEditingMode: true,
-            groupData: this.groupData,
-            onReloadGroupProjects: this.loadGroupProjects,
-          },
-          condition: this.groupData,
-          icon: 'Archive',
-        },
-      ].map((entry) => ({
-        ...entry,
-        isEditing: true,
-        actionIcon: 'Pen',
-      }))
-    },
-
-    groupTabsEditFiltered() {
-      return this.groupTabsEdit.filter((tab) => tab.condition)
-    },
-
-    groupTabs() {
-      return this.isEditing ? this.groupTabsEditFiltered : this.groupTabsDisplayFiltered
-    },
-
-    allGroupsTabs() {
-      return [...this.groupTabsDisplay, ...this.groupTabsEdit]
-    },
-
-    currentTab() {
-      return this.allGroupsTabs.find((tab) => this.$route.fullPath === tab.view)
-    },
-
-    currentOrganizationCode() {
-      return this.organizationsStore.current.code
-    },
-
-    isEditing() {
-      return this.currentTab?.isEditing || false
-    },
-  },
-  watch: {
-    groupId: {
-      handler: function (neo, old) {
-        if (neo && neo != old) {
-          this.load()
-        }
-      },
-      immediate: true,
-    },
-
-    canEditGroup: {
-      handler: function (neo /*, old*/) {
-        if (!neo && /*neo !== old && */ this.isEditing) {
-          if (import.meta.client) this.$router.push(this.currentTab.altView)
-        }
-      },
-      immediate: true,
-    },
-
-    isEditing: {
-      handler: function (neo /*, old*/) {
-        if (neo && /* neo !== old && */ !this.canEditGroup) {
-          if (import.meta.client) this.$router.push(this.currentTab.altView)
-        }
-      },
-      immediate: true,
-    },
-  },
-
-  methods: {
-    toggleEditing() {
-      this.$router.push(this.currentTab.altView)
-    },
-    async load() {
-      if (!import.meta.client) return
-      this.isLoading = true
-      this.isProjectsLoading = true
-      this.isMembersLoading = true
-
-      this.peopleGroupsStore.currentId = this.groupId
-      try {
-        await Promise.all([this.loadGroup(), this.loadGroupMembers(), this.loadGroupProjects()])
-      } catch {
-        console.error("group data couldn't be loaded")
-      }
-
-      this.isLoading = false
-    },
-
-    async loadGroup() {
-      try {
-        this.isLoading = true
-        this.rawGroupData = await getGroup(
-          this.currentOrganizationCode,
-          this.groupId,
-          /*no error*/ true
-        )
-
-        // we can't use "this.groupId" because it might be a slug and not an id....
-        this.peopleGroupsStore.currentId = this.groupData.id
-      } catch {
-        this.$router.replace({
-          name: 'page404',
-          params: { pathMatch: this.$route.path.substring(1).split('/') },
-        })
-      } finally {
-        this.isLoading = false
-      }
-    },
-
-    async loadGroupMembers() {
-      try {
-        const groupMemberData = await getGroupMember(
-          this.currentOrganizationCode,
-          this.groupId,
-          /*no error*/ true
-        )
-        this.membersInitialRequest = groupMemberData
-      } finally {
-        // no catch / log because it might be a permission denied
-        this.isMembersLoading = false
-      }
-    },
-
-    async loadGroupProjects() {
-      try {
-        const groupProjectData = await getGroupProject(
-          this.currentOrganizationCode,
-          this.groupId,
-          /*no error*/ true
-        )
-        this.projectsInitialRequest = groupProjectData
-      } finally {
-        // no catch / log because it might be a permission denied
-        this.isProjectsLoading = false
-      }
-    },
-  },
-}
-</script>
-
-<style lang="scss" scoped>
-.group-layout,
-.group-edit-layout {
-  margin-top: pxToRem(48px);
-}
-
-.recommandations {
-  margin-top: $space-2xl;
-}
-</style>
diff --git a/src/components/group/GroupSelectDrawer/GroupSelectDrawer.vue b/src/components/group/GroupSelectDrawer/GroupSelectDrawer.vue
index 5436cd9bf..2d63c407e 100644
--- a/src/components/group/GroupSelectDrawer/GroupSelectDrawer.vue
+++ b/src/components/group/GroupSelectDrawer/GroupSelectDrawer.vue
@@ -32,7 +32,7 @@
         v-for="group in listGroups"
         :key="group.id"
         :group="group"
-        :has-add-icon="true"
+        has-add-icon
         :data-test="`drawer-group-card-${group.id}`"
         @add="selectGroup(group)"
       />
diff --git a/src/components/group/GroupsElement/GroupsElement.vue b/src/components/group/GroupsElement/GroupsElement.vue
index afe1bb497..69ec3bd6b 100644
--- a/src/components/group/GroupsElement/GroupsElement.vue
+++ b/src/components/group/GroupsElement/GroupsElement.vue
@@ -72,7 +72,7 @@ const showChild = ref(false)
 
 const showChildren = () => (showChild.value = !showChild.value)
 const goTo = (group) => {
-  router.push({ name: 'Group', params: { groupId: group.slug || group.id } })
+  router.push({ name: 'Group', params: { groupId: group.id } })
 }
 const addGroup = (group) => emit('add', group)
 const editGroup = (group) => emit('edit', group)
diff --git a/src/components/group/Map/GroupLocationToolTip.vue b/src/components/group/Map/GroupLocationToolTip.vue
new file mode 100644
index 000000000..370b73cb7
--- /dev/null
+++ b/src/components/group/Map/GroupLocationToolTip.vue
@@ -0,0 +1,26 @@
+<template>
+  <CardLocationTooltip
+    :location="location"
+    :label="$t('group.view')"
+    :to="{ name: 'Group', params: { groupId: group.id } }"
+    :image="group.header_image"
+    :default-picture="DEFAULT_GROUP_PATATOID"
+    :title="group.$t.name"
+    :description="group.$t.short_description ?? group.$t.description"
+  />
+</template>
+
+<script setup lang="ts">
+import { AnyTranslatedLocation } from '@/models/location.model'
+import { TranslatedPeopleGroupModel } from '@/models/invitation.model'
+import { DEFAULT_GROUP_PATATOID } from '@/composables/usePatatoids'
+import CardLocationTooltip from '@/components/map/CardLocationTooltip.vue'
+
+const props = defineProps<{ location: AnyTranslatedLocation; group: TranslatedPeopleGroupModel }>()
+
+watch(
+  () => props.group,
+  () => console.log(props.group),
+  { immediate: true }
+)
+</script>
diff --git a/src/components/group/Modules/BaseGroupPreview.vue b/src/components/group/Modules/BaseGroupPreview.vue
new file mode 100644
index 000000000..bb9157ce0
--- /dev/null
+++ b/src/components/group/Modules/BaseGroupPreview.vue
@@ -0,0 +1,88 @@
+<template>
+  <div class="group shadowed-box">
+    <div class="group-header">
+      <div class="title-container">
+        <IconImage v-if="icon" :name="icon" class="icon" />
+        <h2 class="title">
+          {{ title }}
+          <span v-if="!isNil(total)">( {{ total }} )</span>
+        </h2>
+      </div>
+      <slot v-if="!loading" name="header">
+        <SeeMoreArrow
+          v-if="seeMore && seeMorePosition === 'top'"
+          class="see-more-button"
+          :to="seeMore"
+        />
+      </slot>
+    </div>
+
+    <div class="group-container">
+      <slot v-if="loading" name="skeleton" />
+      <slot v-else name="content" />
+    </div>
+    <slot v-if="!loading" name="footer">
+      <SeeMoreArrow
+        v-if="seeMore && seeMorePosition === 'bottom'"
+        class="see-more-button"
+        :to="seeMore"
+      />
+    </slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import IconImage from '@/components/base/media/IconImage.vue'
+import { IconImageChoice } from '@/functs/IconImage'
+import { isNil } from 'es-toolkit'
+
+withDefaults(
+  defineProps<{
+    title: string
+    total?: number
+    seeMore?: any
+    loading?: boolean
+    icon?: IconImageChoice
+    seeMorePosition?: 'bottom' | 'top'
+  }>(),
+  { loading: false, icon: null, total: null, seeMore: null, seeMorePosition: 'top' }
+)
+</script>
+
+<style lang="scss" scoped>
+.group {
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  background-color: white;
+  border-radius: 0.5rem;
+  padding: 1.5rem;
+}
+
+.group-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  text-transform: uppercase;
+}
+
+.group-container {
+  margin-top: 2rem;
+}
+
+.title-container {
+  color: $primary-dark;
+  fill: $primary-dark;
+  display: flex;
+  align-items: center;
+
+  .icon {
+    display: inline-block;
+    width: 1.5rem;
+    margin: 0 0.3rem;
+  }
+
+  .title {
+    display: inline-block;
+  }
+}
+</style>
diff --git a/src/components/group/Modules/Documents/GroupDocumentsPreview.vue b/src/components/group/Modules/Documents/GroupDocumentsPreview.vue
new file mode 100644
index 000000000..360c697e4
--- /dev/null
+++ b/src/components/group/Modules/Documents/GroupDocumentsPreview.vue
@@ -0,0 +1,43 @@
+<template>
+  <BaseGroupPreview
+    :id="documentType"
+    :title="$t(`group.${documentType}`)"
+    :total="group.modules[documentType]"
+    :see-more="{
+      name: routeName,
+      params: { groupId: group.id },
+    }"
+    icon="Article"
+  >
+    <template #content>
+      <GroupResearcherDocumentsList
+        preview
+        :doc-type="documentType"
+        :group="group"
+        :limit="LIMIT"
+      />
+    </template>
+  </BaseGroupPreview>
+</template>
+
+<script setup lang="ts">
+import GroupResearcherDocumentsList from '@/components/people/Researcher/GroupResearcherDocumentsList.vue'
+import { DocumentType } from '@/interfaces/researcher'
+import { TranslatedPeopleGroupModel } from '@/models/invitation.model'
+import BaseGroupPreview from '@/components/group/Modules/BaseGroupPreview.vue'
+
+const props = defineProps<{
+  documentType: DocumentType
+  group: TranslatedPeopleGroupModel
+}>()
+
+const routeName = computed(() => {
+  if (props.documentType === 'conferences') {
+    return 'groupConferences'
+  } else if (props.documentType === 'publications') {
+    return 'groupPublications'
+  }
+})
+
+const LIMIT = 3
+</script>
diff --git a/src/components/group/Modules/Extras/GroupDescriptionPreview.vue b/src/components/group/Modules/Extras/GroupDescriptionPreview.vue
new file mode 100644
index 000000000..4e80a73d9
--- /dev/null
+++ b/src/components/group/Modules/Extras/GroupDescriptionPreview.vue
@@ -0,0 +1,18 @@
+<template>
+  <BaseGroupPreview :title="$t('group.presentation')" icon="Article">
+    <template #content>
+      <DescriptionExpandable
+        :description="group.$t.description"
+        :height-limit="400"
+        class="description-content"
+      />
+    </template>
+  </BaseGroupPreview>
+</template>
+
+<script setup lang="ts">
+import { TranslatedPeopleGroupModel } from '@/models/invitation.model'
+import BaseGroupPreview from '@/components/group/Modules/BaseGroupPreview.vue'
+
+defineProps<{ group: TranslatedPeopleGroupModel }>()
+</script>
diff --git a/src/components/group/Modules/Extras/GroupRecapPreview.vue b/src/components/group/Modules/Extras/GroupRecapPreview.vue
new file mode 100644
index 000000000..5f93f07f0
--- /dev/null
+++ b/src/components/group/Modules/Extras/GroupRecapPreview.vue
@@ -0,0 +1,97 @@
+<template>
+  <div class="group-recap">
+    <component
+      :is="is"
+      v-for="module in modulesArray"
+      :key="module.name"
+      class="group-recap-element"
+      :class="{
+        'reset-btn shadow-box': isLink,
+      }"
+      @click="isLink && scrollToHash(module.key)"
+    >
+      <IconImage :name="module.icon" />
+      <span class="group-recap-title">
+        {{ module.count }}
+        {{ module.name }}
+      </span>
+    </component>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { scrollToHash } from '@/composables/useScrollToTab'
+import {
+  GroupModuleIcon,
+  GroupModuleTitle,
+  PeopleGroupModulesKeys,
+  TranslatedPeopleGroupModel,
+} from '@/models/invitation.model'
+
+const props = withDefaults(
+  defineProps<{
+    group: TranslatedPeopleGroupModel
+    noTitle?: boolean
+    modules?: PeopleGroupModulesKeys[]
+    isLink?: boolean
+  }>(),
+  { noTitle: false, modules: null, isLink: false }
+)
+
+const { t } = useNuxtI18n()
+
+const is = computed(() => (props.isLink ? 'button' : 'div'))
+
+const modulesArray = computed(() => {
+  return (
+    Object.entries(props.group.modules)
+      // remove modules with 0 elements
+      .filter(([name, count]) => {
+        return (
+          count > 0 &&
+          (props.modules === null || props.modules.includes(name as PeopleGroupModulesKeys))
+        )
+      })
+      .map(([name, count]) => {
+        const obj = {
+          key: name,
+          name: props.noTitle ? '' : t(GroupModuleTitle[name], count),
+          count,
+          icon: GroupModuleIcon[name],
+        }
+        return obj
+      })
+  )
+})
+</script>
+
+<style lang="scss" scoped>
+.group-recap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 1rem;
+  padding: 1rem 0;
+}
+
+.group-recap-element {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: $primary-dark;
+  gap: 0.4rem;
+  cursor: pointer;
+  border-radius: 10px;
+  padding: 0.4rem 0.8rem;
+
+  svg {
+    width: 32px;
+    fill: $primary;
+  }
+}
+
+.group-recap-title {
+  font-weight: bold;
+}
+</style>
diff --git a/src/components/group/Modules/Extras/GroupSimilarDrawer.vue b/src/components/group/Modules/Extras/GroupSimilarDrawer.vue
new file mode 100644
index 000000000..d988249c8
--- /dev/null
+++ b/src/components/group/Modules/Extras/GroupSimilarDrawer.vue
@@ -0,0 +1,69 @@
+<template>
+  <BaseDrawer
+    :is-opened="!!group"
+    data-test="add-default-skills-drawer"
+    :title="`${t(`group.similars`)} (${count})`"
+    class="medium"
+    @close="emit('close')"
+  >
+    <FetchLoader :status="status" only-error skeleton>
+      <div class="groups-list-similars">
+        <GroupCard v-for="groupSimilar in groups" :key="groupSimilar.id" :group="groupSimilar" />
+      </div>
+    </FetchLoader>
+
+    <template #footer>
+      <div class="groups-paginations">
+        <PaginationButtonsV2 :pagination="pagination" />
+      </div>
+    </template>
+  </BaseDrawer>
+</template>
+
+<script setup lang="ts">
+import { getGroupSimilar } from '@/api/v2/group.service'
+import BaseDrawer from '@/components/base/BaseDrawer.vue'
+import FetchLoader from '@/components/base/FetchLoader.vue'
+import PaginationButtonsV2 from '@/components/base/navigation/PaginationButtonsV2.vue'
+import { TranslatedPeopleGroupModel } from '@/models/invitation.model'
+import { factoryPagination } from '@/skeletons/base.skeletons'
+import { groupSkeleton } from '@/skeletons/group.skeletons'
+
+const { t } = useNuxtI18n()
+const emit = defineEmits(['close'])
+const props = withDefaults(
+  defineProps<{
+    group?: TranslatedPeopleGroupModel
+  }>(),
+  { group: null }
+)
+
+const organizationCode = useOrganizationCode()
+const groupId = computed(() => props.group?.id)
+const {
+  status,
+  pagination,
+  data: groups,
+} = getGroupSimilar(organizationCode, groupId, {
+  default: () => factoryPagination(groupSkeleton),
+})
+const { count } = pagination
+</script>
+
+<style lang="scss">
+$profile-groups: 1rem;
+
+.groups-list-similars {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+.groups-paginations {
+  display: flex;
+  justify-content: center;
+  margin-top: 1rem;
+}
+</style>
diff --git a/src/components/group/Modules/Extras/GroupSimilarsPreview.vue b/src/components/group/Modules/Extras/GroupSimilarsPreview.vue
new file mode 100644
index 000000000..78886aca1
--- /dev/null
+++ b/src/components/group/Modules/Extras/GroupSimilarsPreview.vue
@@ -0,0 +1,115 @@
+<template>
+  <BaseGroupPreview
+    id="similars"
+    :title="$t(GroupModuleTitle.similars)"
+    :total="group.modules.similars"
+  >
+    <template #header>
+      <SeeMoreArrow is="button" class="see-more-btn reset-btn header" @click="onClick" />
+    </template>
+    <template #content>
+      <FetchLoader :status="status" only-error skeleton>
+        <div class="group-similars">
+          <div class="group-similars-list">
+            <GroupCard
+              v-for="groupSimilar in groups"
+              :key="groupSimilar.id"
+              :group="groupSimilar"
+              :mode="mode"
+            />
+          </div>
+        </div>
+      </FetchLoader>
+    </template>
+    <template #footer>
+      <SeeMoreArrow is="button" class="see-more-btn reset-btn footer" @click="onClick" />
+      <GroupSimilarDrawer :group="showMore ? group : null" @close="onClose" />
+    </template>
+  </BaseGroupPreview>
+</template>
+
+<script setup lang="ts">
+import { getGroupSimilar } from '@/api/v2/group.service'
+import SeeMoreArrow from '@/components/base/button/SeeMoreArrow.vue'
+import GroupCard from '@/components/group/GroupCard.vue'
+import { GroupModuleTitle, TranslatedPeopleGroupModel } from '@/models/invitation.model'
+import BaseGroupPreview from '@/components/group/Modules/BaseGroupPreview.vue'
+import { maxSkeleton, factoryPagination } from '@/skeletons/base.skeletons'
+import { groupSkeleton } from '@/skeletons/group.skeletons'
+import GroupSimilarDrawer from '@/components/group/Modules/Extras/GroupSimilarDrawer.vue'
+import { onMediaChange } from '@/composables/onResize'
+
+const props = withDefaults(defineProps<{ group: TranslatedPeopleGroupModel; limit?: number }>(), {
+  limit: null,
+})
+
+const limitSkeletons = computed(() => maxSkeleton(props.group?.modules?.similars, props.limit))
+
+const organizationCode = useOrganizationCode()
+const groupId = computed(() => props.group?.id)
+const { status, data: groups } = getGroupSimilar(organizationCode, groupId, {
+  paginationConfig: {
+    limit: props.limit,
+  },
+  default: () => factoryPagination(groupSkeleton, limitSkeletons.value),
+})
+
+const mode = ref<'card' | 'list'>('card')
+
+const showMore = ref(false)
+const onClick = () => (showMore.value = true)
+const onClose = () => (showMore.value = false)
+
+onMediaChange(
+  '(min-width: 1200px)',
+  (matches) => {
+    mode.value = matches ? 'card' : 'list'
+  },
+  { immediate: true }
+)
+</script>
+
+<style lang="scss" scoped>
+.group-similars {
+  .group-similars-list {
+    padding: 1rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 1rem;
+  }
+}
+
+.see-more-btn.footer {
+  display: none;
+}
+
+.see-more-btn.header {
+  display: block;
+}
+
+@media screen and (min-width: $min-desktop) {
+  .see-more-btn.footer {
+    display: block;
+  }
+
+  .see-more-btn.header {
+    display: none;
+  }
+}
+</style>
+
+<style lang="scss">
+@media screen and (max-width: $min-desktop) {
+  .group-similars {
+    .group-similars-list {
+      width: 100%;
+
+      > * {
+        width: 100%;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/group/Modules/Gallery/BaseGroupGallery.vue b/src/components/group/Modules/Gallery/BaseGroupGallery.vue
new file mode 100644
index 000000000..d81910b03
--- /dev/null
+++ b/src/components/group/Modules/Gallery/BaseGroupGallery.vue
@@ -0,0 +1,170 @@
+<template>
+  <div class="gallery-container">
+    <!-- editable button -->
+    <LpiButton
+      v-if="editable"
+      btn-icon="Plus"
+      :label="$t('group.form.add')"
+      class="edit-btn"
+      @click="openModals('create')"
+    />
+
+    <FetchLoader :status="status" skeleton only-error>
+      <GalleryList
+        :images="data"
+        :editable="editable"
+        :image-size="preview ? 'small' : 'medium'"
+        @click="onView"
+        @delete="onDelete"
+      />
+      <EmptyLabel v-if="data.length === 0" :label="$t('gallery.empty')" />
+      <PaginationButtonsV2 v-if="!preview" :pagination="pagination" />
+    </FetchLoader>
+
+    <GalleryDeleteModal
+      v-if="stateModals.delete"
+      :loading="loading"
+      :image="selected"
+      @close="closeModals('delete')"
+      @submit="deleteImage"
+    />
+    <GalleryDrawer
+      :is-opened="stateModals.gallery"
+      :status="status"
+      :images="data"
+      :selected="selected"
+      :pagination="pagination"
+      @close="closeModals('gallery')"
+    />
+    <GalleryForm
+      v-if="stateModals.create"
+      :loading="loading"
+      :status="imagesStatusUploading"
+      @close="closeForm"
+      @submit="createImage"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { deleteGroupGallery, postGroupGallery } from '@/api/groups.service'
+import { getGroupGallery } from '@/api/v2/group.service'
+import EmptyLabel from '@/components/base/EmptyLabel.vue'
+import FetchLoader from '@/components/base/FetchLoader.vue'
+import GalleryDeleteModal from '@/components/base/gallery/GalleryDeleteModal.vue'
+import GalleryDrawer from '@/components/base/gallery/GalleryDrawer.vue'
+import GalleryForm from '@/components/base/gallery/GalleryForm.vue'
+import GalleryList from '@/components/base/gallery/GalleryList.vue'
+import PaginationButtonsV2 from '@/components/base/navigation/PaginationButtonsV2.vue'
+import { useModals } from '@/composables/useModal'
+import { ImageGalleryForm } from '@/interfaces/gallery'
+import { TranslatedPeopleGroupModel } from '@/models/invitation.model'
+import { factoryPagination, maxSkeleton } from '@/skeletons/base.skeletons'
+import { imageGallerySkeleton } from '@/skeletons/gallery.skeletons'
+import useToasterStore from '@/stores/useToaster'
+import { AsyncDataRequestStatus } from 'nuxt/app'
+
+const props = withDefaults(
+  defineProps<{
+    group: TranslatedPeopleGroupModel
+    preview?: boolean
+    limit?: number
+    editable?: boolean
+  }>(),
+  { preview: false, editable: false, limit: null }
+)
+const { t } = useNuxtI18n()
+const loading = ref(false)
+const selected = ref(null)
+const toaster = useToasterStore()
+const { stateModals, closeModals, openModals } = useModals({
+  delete: false,
+  gallery: false,
+  create: false,
+  status: false,
+})
+
+const limitSkeletons = computed(() => maxSkeleton(props.group?.modules?.gallery, props.limit))
+const organizationCode = useOrganizationCode()
+const groupId = computed(() => props.group.id)
+const { pagination, data, status, refresh } = getGroupGallery(organizationCode, groupId, {
+  paginationConfig: {
+    limit: props.limit,
+  },
+  default: () => factoryPagination(imageGallerySkeleton, limitSkeletons.value),
+})
+
+const onView = (image) => {
+  selected.value = image
+  openModals('gallery')
+}
+const onDelete = (image) => {
+  selected.value = image
+  openModals('delete')
+}
+
+const deleteImage = () => {
+  loading.value = true
+  deleteGroupGallery(organizationCode, groupId.value, selected.value.id)
+    .then(() => {
+      toaster.pushSuccess(t('gallery.success-delete'))
+      refreshNuxtData(`${organizationCode}::group::${groupId.value}`)
+      refresh()
+    })
+    .catch(() => toaster.pushError(t('gallery.error-delete')))
+    .finally(() => {
+      loading.value = false
+      closeModals('delete')
+    })
+}
+
+const imagesStatusUploading = ref<Map<string, AsyncDataRequestStatus>>(null)
+const createImage = (form: ImageGalleryForm) => {
+  loading.value = true
+  imagesStatusUploading.value = new Map()
+  openModals('status')
+
+  Promise.all(
+    form.files.map((el) => {
+      const body = new FormData()
+      body.append('file', el.file)
+
+      imagesStatusUploading.value.set(el.url, 'pending')
+      return postGroupGallery(organizationCode, groupId.value, body)
+        .then(() => {
+          imagesStatusUploading.value.set(el.url, 'success')
+        })
+        .catch((err) => {
+          imagesStatusUploading.value.set(el.url, 'error')
+          throw err
+        })
+    })
+  )
+    .then(() => {
+      toaster.pushSuccess(t('gallery.success-create'))
+      // refetch new datas
+      refreshNuxtData(`${organizationCode}::group::${groupId.value}`)
+      refresh()
+    })
+    .catch(() => toaster.pushError(t('gallery.error-create')))
+    .finally(() => (loading.value = false))
+}
+
+const closeForm = () => {
+  imagesStatusUploading.value = null
+  closeModals('create')
+}
+</script>
+
+<style lang="scss">
+.gallery-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+}
+
+.edit-btn {
+  align-self: end;
+}
+</style>
diff --git a/src/components/group/Modules/Gallery/GroupGalleryPreview.vue b/src/components/group/Modules/Gallery/GroupGalleryPreview.vue
new file mode 100644
index 000000000..4d573b5e3
--- /dev/null
+++ b/src/components/group/Modules/Gallery/GroupGalleryPreview.vue
@@ -0,0 +1,32 @@
+<template>
+  <BaseGroupPreview
+    id="gallery"
+    :title="$t(GroupModuleTitle.gallery)"
+    :total="group.modules.gallery"
+    :icon="GroupModuleIcon.locations"
+  >
+    <template #header>
+      <SeeMoreArrow
+        :to="{
+          name: 'groupGallery',
+          params: { groupId: group.id },
+        }"
+      />
+    </template>
+    <template #content>
+      <BaseGroupGallery :group="group" preview :limit="6" />
+    </template>
+  </BaseGroupPreview>
+</template>
+
+<script setup lang="ts">
+import {
+  GroupModuleIcon,
+  GroupModuleTitle,
+  TranslatedPeopleGroupModel,
+} from '@/models/invitation.model'
+import BaseGroupPreview from '@/components/group/Modules/BaseGroupPreview.vue'
+import BaseGroupGallery from '@/components/group/Modules/Gallery/BaseGroupGallery.vue'
+
+defineProps<{ group: TranslatedPeopleGroupModel }>()
+</script>
diff --git a/src/components/group/Modules/GroupHeader.vue b/src/components/group/Modules/GroupHeader.vue
new file mode 100644
index 000000000..6f630c922
--- /dev/null
+++ b/src/components/group/Modules/GroupHeader.vue
@@ -0,0 +1,255 @@
+<template>
+  <BaseGroupPreview :loading="isLoading" title="">
+    <template #header>
+      <div class="group-visibility">
+        <p>
+          <span class="icon">
+            <IconImage :name="groupVisibilityIcon" />
+          </span>
+          <span>
+            {{ groupVisibilityLabel }}
+          </span>
+        </p>
+      </div>
+    </template>
+    <template #content>
+      <div class="group-info-container">
+        <div class="group-image">
+          <CroppedApiImage
+            :alt="`${group.$t.name} image`"
+            :picture-data="group.header_image"
+            picture-size="medium"
+            :default-picture="DEFAULT_GROUP_PATATOID"
+          />
+        </div>
+        <!-- infos -->
+        <div class="group-infos list-divider">
+          <h1 class="group-title skeleton-block">
+            {{ group.$t.name }}
+          </h1>
+          <p
+            v-if="group.$t.short_description"
+            class="short-description"
+            v-html="group.$t.short_description"
+          />
+          <FetchLoader :status="status" only-error skeleton>
+            <div class="group-leaders">
+              <GroupMemberItem
+                v-for="member in leaders"
+                :key="member.id"
+                :member="member"
+                role-label=""
+                mode="list"
+              />
+            </div>
+          </FetchLoader>
+          <TagsList
+            v-if="group.tags.length"
+            :tags="group.tags"
+            :to="{
+              name: 'GroupSearch',
+              query: {
+                sections: 'groups',
+              },
+            }"
+          />
+        </div>
+      </div>
+      <div v-if="hasExtras" class="group-info-extras">
+        <div v-if="hasLinks" class="group-info-links">
+          <button
+            v-if="group.location"
+            class="group-recap-element group-location reset-btn"
+            @click="openModal()"
+          >
+            <IconImage name="MapMarker" />
+            <span class="group-recap-title">{{ t('group.location') }}</span>
+          </button>
+        </div>
+        <SdgList
+          class="group-info-sdgs"
+          :sdgs="group.sdgs"
+          :to="{
+            name: 'Search',
+            query: {
+              section: 'groups',
+              page: 1,
+            },
+          }"
+        />
+      </div>
+      <!-- drawer views -->
+      <LocationDrawer
+        v-if="group.location"
+        :is-opened="stateModal"
+        :locations="[group.location]"
+        @close="closeModal()"
+      />
+    </template>
+  </BaseGroupPreview>
+</template>
+
+<script setup lang="ts">
+import { DEFAULT_GROUP_PATATOID } from '@/composables/usePatatoids'
+import { TranslatedPeopleGroupModel } from '@/models/invitation.model'
+import BaseGroupPreview from '@/components/group/Modules/BaseGroupPreview.vue'
+import SdgList from '@/components/sdgs/SdgList.vue'
+import TagsList from '@/components/tags/TagsList.vue'
+import LocationDrawer from '@/components/map/LocationDrawer.vue'
+import { getGroupMember } from '@/api/v2/group.service'
+import GroupMemberItem from '@/components/group/Modules/Members/GroupMemberItem.vue'
+import FetchLoader from '@/components/base/FetchLoader.vue'
+import { memberSkeleton } from '@/skeletons/group.skeletons'
+import { factoryPagination } from '@/skeletons/base.skeletons'
+
+const props = withDefaults(
+  defineProps<{
+    group: TranslatedPeopleGroupModel
+    isLoading?: boolean
+  }>(),
+  { isLoading: false }
+)
+
+const { t } = useNuxtI18n()
+const { openModal, closeModal, stateModal } = useModal()
+const organizationCode = useOrganizationCode()
+const groupId = computed(() => props.group.id)
+
+const { data: members, status } = getGroupMember(organizationCode, groupId, {
+  query: { limit: 5 },
+  default: () => factoryPagination(() => memberSkeleton({ is_leader: true }), 2),
+})
+const leaders = computed(() => members.value?.filter((item) => item.is_leader))
+
+const groupVisibilityLabel = computed(() => {
+  if (props.group.publication_status === 'public') {
+    return t('group.visibility-public')
+  } else if (props.group.publication_status === 'private') {
+    return t('group.visibility-private')
+  }
+  return t('group.visibility-org')
+})
+
+const groupVisibilityIcon = computed(() =>
+  props.group.publication_status === 'public' ? 'Eye' : 'EyeSlash'
+)
+
+const hasLinks = computed(() => {
+  return props.group.location
+})
+const hasExtras = computed(() => {
+  return props.group.sdgs.length || hasLinks.value
+})
+</script>
+
+<style lang="scss" scoped>
+.group-info-container {
+  display: grid;
+  grid-template-columns: 240px 1fr;
+}
+
+.group-infos {
+  padding: 1rem;
+  gap: 0.3rem;
+  display: flex;
+  flex-direction: column;
+}
+
+.group-title {
+  font-size: xx-large;
+}
+
+.group-image {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.group-visibility {
+  p {
+    font-weight: 700;
+    font-size: $font-size-xs;
+    color: $primary-dark;
+    display: flex;
+    align-items: center;
+    gap: $space-s;
+
+    .icon svg {
+      fill: $primary-dark;
+      width: $layout-size-xl;
+      height: $layout-size-m;
+    }
+  }
+}
+
+.group-info-extras {
+  padding: 1rem;
+  border-radius: 5px;
+  border: 1px solid $primary;
+  height: auto;
+  margin-top: 1rem;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+
+  & > *:only-child {
+    grid-column: span 2;
+  }
+}
+
+.group-info-links {
+  display: flex;
+  justify-content: flex-start;
+  align-items: start;
+  flex-wrap: wrap;
+}
+
+.group-info-sdgs {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.group-recap-element {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: $primary-dark;
+  gap: 0.4rem;
+
+  svg {
+    width: 32px;
+    fill: $primary;
+  }
+}
+
+.group-recap-title {
+  font-weight: bold;
+}
+
+.group-location {
+  cursor: pointer;
+}
+</style>
+
+<style lang="scss">
+.group-leaders {
+  display: flex;
+  justify-content: start;
+  flex-wrap: wrap;
+  gap: 0.2rem;
+
+  > * {
+    pointer-events: none;
+
+    // width: 100%;
+    height: unset !important;
+    border: none !important;
+
+    .picture-user {
+      width: 2.5rem !important;
+      height: 2.5rem !important;
+    }
+  }
+}
+</style>
diff --git a/src/components/group/Modules/GroupSub/GroupSubDrawer.vue b/src/components/group/Modules/GroupSub/GroupSubDrawer.vue
new file mode 100644
index 000000000..5437b6c46
--- /dev/null
+++ b/src/components/group/Modules/GroupSub/GroupSubDrawer.vue
@@ -0,0 +1,29 @@
+<template>
+  <BaseDrawer
+    :is-opened="!!group"
+    data-test="group-sub-drawer"
+    :title="`${t(GroupModuleTitle.subgroups)} (${count})`"
+    class="medium"
+    no-footer
+    @close="emit('close')"
+  >
+    <GroupSubList :group="group" />
+  </BaseDrawer>
+</template>
+
+<script setup lang="ts">
+import BaseDrawer from '@/components/base/BaseDrawer.vue'
+import GroupSubList from '@/components/group/Modules/GroupSub/GroupSubList.vue'
+import { GroupModuleTitle, TranslatedPeopleGroupModel } from '@/models/invitation.model'
+
+const { t } = useNuxtI18n()
+const emit = defineEmits(['close'])
+const props = withDefaults(
+  defineProps<{
+    group?: TranslatedPeopleGroupModel
+  }>(),
+  { group: null }
+)
+
+const count = computed(() => props.group?.modules?.subgroups ?? 0)
+</script>
diff --git a/src/components/group/Modules/GroupSub/GroupSubList.vue b/src/components/group/Modules/GroupSub/GroupSubList.vue
new file mode 100644
index 000000000..903f3e597
--- /dev/null
+++ b/src/components/group/Modules/GroupSub/GroupSubList.vue
@@ -0,0 +1,57 @@
+<template>
+  <FetchLoader :status="status" only-error skeleton>
+    <div class="subgroup-list">
+      <GroupSubTeamItem
+        v-for="sub in groups"
+        :key="sub.id"
+        :group="sub"
+        :with-pagination="withPagination"
+        :limit-members="limitMembers"
+      />
+      <PaginationButtonsV2 v-if="withPagination" class="m-auto" :pagination="pagination" />
+    </div>
+  </FetchLoader>
+</template>
+
+<script setup lang="ts">
+import { getSubGroup } from '@/api/v2/group.service'
+import { TranslatedPeopleGroupModel } from '@/models/invitation.model'
+import { maxSkeleton, factoryPagination } from '@/skeletons/base.skeletons'
+import { groupSkeleton } from '@/skeletons/group.skeletons'
+import GroupSubTeamItem from '@/components/group/Modules/GroupSub/GroupSubTeamItem.vue'
+import PaginationButtonsV2 from '@/components/base/navigation/PaginationButtonsV2.vue'
+
+const props = withDefaults(
+  defineProps<{
+    group: TranslatedPeopleGroupModel
+    limit?: number
+    limitMembers?: number
+    withPagination?: boolean
+  }>(),
+  { limit: null, withPagination: true, limitMembers: null }
+)
+
+const organizationCode = useOrganizationCode()
+const groupId = computed(() => props.group?.id)
+
+const limitSkeletons = computed(() => maxSkeleton(props.group?.modules?.subgroups, props.limit))
+
+const {
+  status,
+  data: groups,
+  pagination,
+} = getSubGroup(organizationCode, groupId, {
+  paginationConfig: {
+    limit: props.limit,
+  },
+  default: () => factoryPagination(groupSkeleton, limitSkeletons.value),
+})
+</script>
+
+<style lang="scss" scoped>
+.subgroup-list {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+</style>
diff --git a/src/components/group/Modules/GroupSub/GroupSubPreview.vue b/src/components/group/Modules/GroupSub/GroupSubPreview.vue
new file mode 100644
index 000000000..99a9d989d
--- /dev/null
+++ b/src/components/group/Modules/GroupSub/GroupSubPreview.vue
@@ -0,0 +1,34 @@
+<template>
+  <BaseGroupPreview
+    id="subgroups"
+    :title="t(GroupModuleTitle.subgroups, group.modules.subgroups)"
+    :total="group.modules.subgroups"
+    :icon="GroupModuleIcon.subgroups"
+  >
+    <template #header>
+      <SeeMoreArrow is="button" class="see-more-btn reset-btn" @click="onMore" />
+    </template>
+    <template #content>
+      <GroupSubList :group="group" :limit="2" :limit-members="6" :with-pagination="false" />
+      <GroupSubDrawer :group="selectedGroup" @close="onClose" />
+    </template>
+  </BaseGroupPreview>
+</template>
+
+<script setup lang="ts">
+import {
+  GroupModuleIcon,
+  GroupModuleTitle,
+  TranslatedPeopleGroupModel,
+} from '@/models/invitation.model'
+import BaseGroupPreview from '@/components/group/Modules/BaseGroupPreview.vue'
+import GroupSubList from '@/components/group/Modules/GroupSub/GroupSubList.vue'
+import GroupSubDrawer from '@/components/group/Modules/GroupSub/GroupSubDrawer.vue'
+
+const props = defineProps<{ group: TranslatedPeopleGroupModel }>()
+
+const { t } = useNuxtI18n()
+const selectedGroup = ref<TranslatedPeopleGroupModel | null>(null)
+const onMore = () => (selectedGroup.value = props.group)
+const onClose = () => (selectedGroup.value = null)
+</script>
diff --git a/src/components/group/Modules/GroupSub/GroupSubTeamItem.vue b/src/components/group/Modules/GroupSub/GroupSubTeamItem.vue
new file mode 100644
index 000000000..1ec52e8a2
--- /dev/null
+++ b/src/components/group/Modules/GroupSub/GroupSubTeamItem.vue
@@ -0,0 +1,88 @@
+<template>
+  <ToolTip :hover="true" offset-distance="5" :disabled="disableToolTip" placement="top">
+    <template #custom-content>
+      {{ $t('common.see-more') }}
+    </template>
+    <div ref="groupItem" class="subgroup-element shadow-box-transition no-transform">
+      <NuxtLink
+        :to="{
+          name: 'Group',
+          params: { groupId: group.id },
+        }"
+        class="subgroup-header border-primary skeletons-text"
+        @mouseover.prevent="onMouseover"
+        @mouseout.prevent="onMouseout"
+      >
+        <h4>{{ group.$t.name }}</h4>
+        <div>
+          <GroupRecapPreview :group="group" no-title :modules="['members', 'subgroups']" />
+        </div>
+      </NuxtLink>
+      <BaseGroupMembersList
+        v-if="group.modules.members"
+        :group="group"
+        class="subgroup-members"
+        :with-pagination="withPagination"
+        :limit="limitMembers"
+        focus-leader
+      />
+    </div>
+  </ToolTip>
+</template>
+
+<script setup lang="ts">
+import GroupRecapPreview from '@/components/group/Modules/Extras/GroupRecapPreview.vue'
+import BaseGroupMembersList from '@/components/group/Modules/Members/BaseGroupMembersList.vue'
+import { TranslatedPeopleGroupModel } from '@/models/invitation.model'
+
+withDefaults(
+  defineProps<{
+    group: TranslatedPeopleGroupModel
+    withPagination?: boolean
+    limitMembers?: number
+  }>(),
+  { withPagination: true, limitMembers: null }
+)
+
+const disableToolTip = ref(false)
+const groupItem = useTemplateRef('groupItem')
+const onMouseover = () => {
+  groupItem.value?.classList.add('shadow-box-transform')
+  disableToolTip.value = false
+}
+const onMouseout = () => {
+  groupItem.value?.classList.remove('shadow-box-transform')
+  disableToolTip.value = true
+}
+</script>
+
+<style lang="scss" scoped>
+.no-transform:not(.shadow-box-transform) {
+  transform: unset !important;
+}
+
+.subgroup-element {
+  display: grid;
+  grid-template-rows: 1fr;
+  width: 100%;
+  gap: 1rem;
+  min-height: pxToRem(85px);
+
+  .subgroup-header {
+    padding: 1rem 1.5rem;
+    background-color: color-mix(in srgb, $primary, transparent 90%);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+}
+
+.subgroup-members {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  width: calc(100% - 2rem);
+  gap: 1rem;
+  padding: 0 1rem;
+  min-height: pxToRem(85px);
+}
+</style>
diff --git a/src/components/group/Modules/Locations/GroupLocationBase.vue b/src/components/group/Modules/Locations/GroupLocationBase.vue
new file mode 100644
index 000000000..e938f24e6
--- /dev/null
+++ b/src/components/group/Modules/Locations/GroupLocationBase.vue
@@ -0,0 +1,59 @@
+<template>
+  <FetchLoader :status="status" skeleton only-error>
+    <MapRecap ref="map" :locations="locations" expand :editable="isEdit" @expand="opened = true">
+      <template #tooltip="{ location }">
+        <ProjectLocationTooltip
+          :location="location as TranslatedLocation"
+          :project="location.project"
+        />
+      </template>
+    </MapRecap>
+    <LocationDrawer
+      :is-opened="opened"
+      :editable="isEdit"
+      :locations="locations"
+      :use-cluster="true"
+      @close="opened = false"
+    />
+    <LocationList
+      v-if="!props.preview"
+      :editable="isEdit"
+      :locations="locations"
+      @focus="onFocus"
+    />
+  </FetchLoader>
+</template>
+
+<script setup lang="ts">
+import { getGroupLocation } from '@/api/v2/group.service'
+import LocationDrawer from '@/components/map/LocationDrawer.vue'
+import LocationList from '@/components/map/LocationList.vue'
+import MapRecap from '@/components/map/MapRecap.vue'
+import ProjectLocationTooltip from '@/components/project/map/ProjectLocationTooltip.vue'
+import { TranslatedPeopleGroupModel } from '@/models/invitation.model'
+import { TranslatedLocation } from '@/models/location.model'
+
+const props = withDefaults(
+  defineProps<{
+    group: TranslatedPeopleGroupModel
+    editable?: boolean
+    preview?: boolean
+  }>(),
+  {
+    editable: false,
+    preview: false,
+  }
+)
+
+const isEdit = computed(() => props.editable && !props.preview)
+const opened = ref(false)
+const organizationCode = useOrganizationCode()
+const groupId = computed(() => props.group.id)
+
+const mapRef = useTemplateRef('map')
+const onFocus = (location) => mapRef.value?.map?.flyTo(location)
+
+const { status, data: locations } = getGroupLocation(organizationCode, groupId, {
+  default: () => [],
+})
+</script>
diff --git a/src/components/group/Modules/Locations/GroupLocationPreview.vue b/src/components/group/Modules/Locations/GroupLocationPreview.vue
new file mode 100644
index 000000000..66edcd615
--- /dev/null
+++ b/src/components/group/Modules/Locations/GroupLocationPreview.vue
@@ -0,0 +1,33 @@
+<template>
+  <BaseGroupPreview
+    id="locations"
+    :title="$t(GroupModuleTitle.locations)"
+    :total="group.modules.locations"
+    :icon="GroupModuleIcon.locations"
+  >
+    <template #header>
+      <SeeMoreArrow
+        class="see-more-btn reset-btn"
+        :to="{
+          name: 'groupLocations',
+          params: { groupId: group.id },
+        }"
+      />
+    </template>
+    <template #content>
+      <GroupLocationBase :group="group" preview />
+    </template>
+  </BaseGroupPreview>
+</template>
+
+<script setup lang="ts">
+import {
+  GroupModuleIcon,
+  GroupModuleTitle,
+  TranslatedPeopleGroupModel,
+} from '@/models/invitation.model'
+import BaseGroupPreview from '@/components/group/Modules/BaseGroupPreview.vue'
+import GroupLocationBase from '@/components/group/Modules/Locations/GroupLocationBase.vue'
+
+defineProps<{ group: TranslatedPeopleGroupModel }>()
+</script>
diff --git a/src/components/group/Modules/Members/BaseGroupMembersList.vue b/src/components/group/Modules/Members/BaseGroupMembersList.vue
new file mode 100644
index 000000000..231c28390
--- /dev/null
+++ b/src/components/group/Modules/Members/BaseGroupMembersList.vue
@@ -0,0 +1,85 @@
+<template>
+  <FetchLoader :status="status" only-error skeleton>
+    <GroupMemberItem
+      v-for="member in data"
+      :key="member.id"
+      :member="member"
+      :class="{
+        'focus-leader': focusLeader && member.is_leader,
+      }"
+      role-label=""
+      @click="openProfile"
+    />
+    <PaginationButtonsV2
+      v-if="withPagination"
+      hide-empty
+      class="pagination-span"
+      :pagination="pagination"
+      :disable="isLoading"
+    />
+    <BaseDrawer
+      no-footer
+      :is-opened="!!userIdDrawer"
+      :title="$t('profile.drawer_title')"
+      @close="closeProfile"
+      @confirm="closeProfile"
+    >
+      <UserProfileV2
+        v-if="!!userIdDrawer"
+        ref="profile-user"
+        :can-edit="false"
+        :user-id="userIdDrawer"
+        is-preview
+        @close="closeProfile"
+      />
+    </BaseDrawer>
+  </FetchLoader>
+</template>
+
+<script setup lang="ts">
+import { getGroupMember } from '@/api/v2/group.service'
+import PaginationButtonsV2 from '@/components/base/navigation/PaginationButtonsV2.vue'
+import GroupMemberItem from '@/components/group/Modules/Members/GroupMemberItem.vue'
+import { TranslatedPeopleGroupModel } from '@/models/invitation.model'
+import { maxSkeleton, factoryPagination } from '@/skeletons/base.skeletons'
+import { memberSkeleton } from '@/skeletons/group.skeletons'
+
+const props = withDefaults(
+  defineProps<{
+    group: TranslatedPeopleGroupModel
+    withPagination?: boolean
+    limit?: number
+    focusLeader?: boolean
+  }>(),
+  { withPagination: true, limit: null, focusLeader: false }
+)
+
+const organizationCode = useOrganizationCode()
+const limitSkeletons = computed(() => maxSkeleton(props.group?.modules?.members, props.limit))
+
+const groupId = computed(() => props.group?.id)
+
+const { status, data, pagination, isLoading } = getGroupMember(organizationCode, groupId, {
+  paginationConfig: {
+    limit: props.limit,
+  },
+  default: () => factoryPagination(memberSkeleton, limitSkeletons.value),
+})
+
+const userIdDrawer = ref<number | null>()
+const openProfile = (user) => (userIdDrawer.value = user.id)
+const closeProfile = () => (userIdDrawer.value = null)
+</script>
+
+<style lang="scss" scoped>
+.pagination-span {
+  grid-column: span 2;
+  margin: auto;
+}
+</style>
+
+<style lang="scss">
+.focus-leader {
+  grid-column: span 2;
+}
+</style>
diff --git a/src/components/group/Modules/Members/GroupMemberItem.vue b/src/components/group/Modules/Members/GroupMemberItem.vue
new file mode 100644
index 000000000..f99e2dab3
--- /dev/null
+++ b/src/components/group/Modules/Members/GroupMemberItem.vue
@@ -0,0 +1,131 @@
+<template>
+  <UserCard
+    :user="member"
+    :role="roleLabel"
+    :mode="mode"
+    class="cursor-pointer shadow-drop border-primary"
+    @click="click"
+  >
+    <template #actions>
+      <slot name="actions">
+        <span class="d-none" />
+      </slot>
+    </template>
+  </UserCard>
+</template>
+
+<script setup lang="ts">
+import { isAnonymousUser } from '@/functs/users'
+
+import UserCard from '@/components/people/UserCard.vue'
+
+defineOptions({ name: 'GroupMemberItem' })
+
+const props = withDefaults(
+  defineProps<{
+    member: any
+    roleLabel?: string
+    mode?: 'list' | 'card'
+  }>(),
+  { mode: 'list', roleLabel: undefined }
+)
+
+const { t } = useNuxtI18n()
+
+const emit = defineEmits(['click'])
+
+const isAnonymous = computed(() => isAnonymousUser(props.member))
+
+const roleLabel = computed(() => {
+  if (props.roleLabel !== undefined) {
+    return props.roleLabel
+  }
+  if (props.member) {
+    if (props.member.is_leader && props.member.is_manager)
+      return t('group.role.leaders-managers.label')
+    else if (props.member.is_manager) return t('group.role.managers.label')
+    else if (props.member.is_leader) return t('group.role.leaders.label')
+    else return t('group.role.members.label')
+  }
+  return null
+})
+
+const click = () => {
+  if (isAnonymous.value) {
+    return
+  }
+  emit('click', props.member)
+}
+</script>
+
+<style lang="scss" scoped>
+.user {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: min-content;
+
+  .picture {
+    width: pxToRem(120px);
+    height: pxToRem(120px);
+    object-fit: cover;
+    object-position: top center;
+    border-radius: 50%;
+  }
+
+  .badge {
+    background: $primary-dark;
+    font-weight: 400;
+    font-size: $font-size-s;
+    margin-top: $space-s;
+    padding: $space-2xs;
+    color: $white;
+  }
+
+  .user-name {
+    text-transform: capitalize;
+  }
+
+  .name-ctn {
+    display: flex;
+    align-items: center;
+    margin-top: $space-s;
+    text-align: center;
+
+    h4 {
+      margin: 0;
+      font-weight: 700;
+      font-size: $font-size-m;
+      line-height: $line-height-tight;
+    }
+
+    svg {
+      height: 16px;
+      width: 16px;
+      fill: $primary-dark;
+      cursor: pointer;
+      margin-left: $space-s;
+    }
+  }
+
+  .job {
+    margin-top: $space-s;
+    text-align: center;
+    font-size: $font-size-s;
+  }
+}
+
+.user.anonymous,
+.user.anonymous:hover {
+  opacity: 0.6;
+  filter: unset !important;
+  transform: unset !important;
+  text-shadow: unset !important;
+  cursor: not-allowed !important;
+  pointer-events: none;
+
+  svg {
+    cursor: not-allowed !important;
+  }
+}
+</style>
diff --git a/src/components/group/Modules/Members/GroupMembersPreview.vue b/src/components/group/Modules/Members/GroupMembersPreview.vue
new file mode 100644
index 000000000..ba0aa6595
--- /dev/null
+++ b/src/components/group/Modules/Members/GroupMembersPreview.vue
@@ -0,0 +1,40 @@
+<template>
+  <BaseGroupPreview
+    id="members"
+    :title="$t('group.members')"
+    :total="group.modules.members"
+    icon="Users"
+    :see-more="{ name: 'groupMembers', params: { groupId: group.id } }"
+  >
+    <template #content>
+      <div class="group-members">
+        <BaseGroupMembersList
+          :group="group"
+          :is-loading="isLoading"
+          class="contents"
+          :with-pagination="false"
+          focus-leader
+        />
+      </div>
+    </template>
+  </BaseGroupPreview>
+</template>
+
+<script setup lang="ts">
+import { TranslatedPeopleGroupModel } from '@/models/invitation.model'
+import BaseGroupPreview from '@/components/group/Modules/BaseGroupPreview.vue'
+import BaseGroupMembersList from '@/components/group/Modules/Members/BaseGroupMembersList.vue'
+
+defineProps<{
+  group: TranslatedPeopleGroupModel
+  isLoading: boolean
+}>()
+</script>
+
+<style lang="scss" scoped>
+.group-members {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+}
+</style>
diff --git a/src/components/group/Modules/Projects/BaseGroupProjectsList.vue b/src/components/group/Modules/Projects/BaseGroupProjectsList.vue
new file mode 100644
index 000000000..d301db62b
--- /dev/null
+++ b/src/components/group/Modules/Projects/BaseGroupProjectsList.vue
@@ -0,0 +1,36 @@
+<template>
+  <FetchLoader :status="status" only-error skeleton>
+    <ul class="project-list list-divider">
+      <li v-for="project in data" :key="project.id">
+        <ProjectPreview :project="project" />
+      </li>
+    </ul>
+  </FetchLoader>
+</template>
+
+<script setup lang="ts">
+import { getGroupProject } from '@/api/v2/group.service'
+import ProjectPreview from '@/components/project/ProjectPreview.vue'
+import { TranslatedPeopleGroupModel } from '@/models/invitation.model'
+import { factoryPagination, maxSkeleton } from '@/skeletons/base.skeletons'
+import { projectSkeleton } from '@/skeletons/project.skeletons'
+
+const props = withDefaults(
+  defineProps<{
+    group: TranslatedPeopleGroupModel
+    limit?: number
+  }>(),
+  { limit: null }
+)
+
+const limitSkeletons = computed(() =>
+  maxSkeleton(props.group?.modules?.featured_projects, props.limit)
+)
+const organizationCode = useOrganizationCode()
+const groupId = computed(() => props.group?.id)
+
+const { status, data } = getGroupProject(organizationCode, groupId, {
+  paginationConfig: { limit: props.limit },
+  default: () => factoryPagination(projectSkeleton, limitSkeletons.value),
+})
+</script>
diff --git a/src/components/group/Modules/Projects/GroupProjectsPreview.vue b/src/components/group/Modules/Projects/GroupProjectsPreview.vue
new file mode 100644
index 000000000..c1ccfe084
--- /dev/null
+++ b/src/components/group/Modules/Projects/GroupProjectsPreview.vue
@@ -0,0 +1,34 @@
+<template>
+  <BaseGroupPreview
+    id="featured_projects"
+    :title="$t('group.projects')"
+    :total="group.modules.featured_projects"
+    icon="Briefcase"
+    :see-more="{
+      name: 'groupProjects',
+      params: { groupId: group.id },
+    }"
+  >
+    <template #content>
+      <BaseGroupProjectsList :group="group" :limit="6" />
+    </template>
+  </BaseGroupPreview>
+</template>
+
+<script setup lang="ts">
+import { TranslatedPeopleGroupModel } from '@/models/invitation.model'
+import BaseGroupPreview from '@/components/group/Modules/BaseGroupPreview.vue'
+import BaseGroupProjectsList from '@/components/group/Modules/Projects/BaseGroupProjectsList.vue'
+
+defineProps<{
+  group: TranslatedPeopleGroupModel
+}>()
+</script>
+
+<style lang="scss" scoped>
+.project-list {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+</style>
diff --git a/src/components/group/SubGroups/SubGroups.vue b/src/components/group/SubGroups/SubGroups.vue
deleted file mode 100644
index 62221b3dc..000000000
--- a/src/components/group/SubGroups/SubGroups.vue
+++ /dev/null
@@ -1,103 +0,0 @@
-<template>
-  <div v-if="subgroups.length > 0 && !isLoading" class="subgroups">
-    <div class="subgroups-title">
-      <span class="name">{{ t('group.subgroups') }} :</span>
-    </div>
-    <NuxtLink
-      v-for="(subgroup, index) in subgroups"
-      :key="index"
-      :to="{ name: 'Group', params: { groupId: subgroup.slug || subgroup.id } }"
-      class="subgroups-item"
-    >
-      <div class="vector" />
-      <span class="name">{{ subgroup.name }}</span>
-    </NuxtLink>
-  </div>
-  <SubGroupsSkeleton v-else-if="isLoading" />
-  <div v-else class="empty-subgroups" />
-</template>
-
-<script setup>
-import SubGroupsSkeleton from '@/components/group/SubGroups/SubGroupsSkeleton.vue'
-
-defineOptions({ name: 'SubGroups' })
-defineProps({
-  subgroups: {
-    type: Array,
-    required: true,
-  },
-  isLoading: {
-    type: Boolean,
-    default: false,
-    required: false,
-  },
-})
-const { t } = useNuxtI18n()
-</script>
-
-<style lang="scss" scoped>
-.empty-subgroups {
-  margin-bottom: calc(pxToRem(30px) - 1rem);
-}
-
-.subgroups {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: $space-s;
-  margin-bottom: pxToRem(30px);
-
-  &-title {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: $space-m;
-    background: $primary-lighter;
-    border: $border-width-s solid $primary;
-    border-radius: $border-radius-30;
-
-    .name {
-      font-weight: 400;
-      font-size: $font-size-xs;
-      display: flex;
-      align-items: center;
-      text-align: center;
-      text-transform: uppercase;
-      color: $primary-dark;
-    }
-  }
-
-  &-item {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: $space-xs;
-    padding: $space-2xs calc($space-2xl / 5) $space-2xs $space-2xs;
-    border: $border-width-s solid $primary;
-    border-radius: $border-radius-30;
-    transition: 0.3s;
-
-    &:hover {
-      cursor: pointer;
-      background: $primary-lighter;
-    }
-
-    .vector {
-      width: 28px;
-      height: 28px;
-      background: $salmon;
-      border-radius: 50%;
-    }
-
-    .name {
-      font-weight: 400;
-      font-size: $font-size-xs;
-      display: flex;
-      align-items: center;
-      text-align: center;
-      text-transform: uppercase;
-      color: $primary-dark;
-    }
-  }
-}
-</style>
diff --git a/src/components/group/SubGroups/SubGroupsSkeleton.vue b/src/components/group/SubGroups/SubGroupsSkeleton.vue
deleted file mode 100644
index fa3f72971..000000000
--- a/src/components/group/SubGroups/SubGroupsSkeleton.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<template>
-  <div class="group">
-    <SkeletonComponent width="50px" class="item" />
-    <SkeletonComponent width="120px" class="item" />
-    <SkeletonComponent width="100px" class="item" />
-    <SkeletonComponent width="200px" class="item" />
-  </div>
-</template>
-
-<script setup>
-import SkeletonComponent from '@/components/base/loader/SkeletonComponent.vue'
-defineOptions({ name: 'SubGroupsSkeleton' })
-</script>
-
-<style lang="scss" scoped>
-.group {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  gap: $space-s;
-  margin-bottom: calc(pxToRem(30px) - 1rem);
-
-  .item {
-    height: 30px;
-    border-radius: $border-radius-30;
-  }
-}
-</style>
diff --git a/src/components/home/HomeButtons/HomeButtons.vue b/src/components/home/HomeButtons/HomeButtons.vue
index f4bdfd7ff..a974e5d9d 100644
--- a/src/components/home/HomeButtons/HomeButtons.vue
+++ b/src/components/home/HomeButtons/HomeButtons.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="home-buttons" v-if="canCreateProject || hasChatButton">
+  <div v-if="canCreateProject || hasChatButton" class="home-buttons">
     <div class="home-btn-container">
       <LpiButton
         v-if="canCreateProject"
diff --git a/src/components/map/CardLocationTooltip.vue b/src/components/map/CardLocationTooltip.vue
index b70ea9d63..c084a91fa 100644
--- a/src/components/map/CardLocationTooltip.vue
+++ b/src/components/map/CardLocationTooltip.vue
@@ -66,6 +66,10 @@ const description = computed(() => cropIfTooLong(props.description, 85))
     background-color: color-mix(in srgb, $location-impact, transparent 90%);
   }
 
+  &.address {
+    background-color: color-mix(in srgb, $location-address, transparent 90%);
+  }
+
   &.team {
     background-color: color-mix(in srgb, $location-team, transparent 90%);
   }
diff --git a/src/components/map/GeneralMap.vue b/src/components/map/GeneralMap.vue
index 23a759115..513798eda 100644
--- a/src/components/map/GeneralMap.vue
+++ b/src/components/map/GeneralMap.vue
@@ -4,7 +4,16 @@
       <BaseMap ref="map" :config="CONFIG" use-cluster>
         <template #default="slotProps">
           <MapPointer
-            v-for="location in locations"
+            v-for="location in locations.groups"
+            :key="location.id"
+            :location="location"
+            @mounted="slotProps.addPointer"
+            @unmounted="slotProps.removePointer"
+          >
+            <GroupLocationToolTip :location="location" :group="location.group" />
+          </MapPointer>
+          <MapPointer
+            v-for="location in locations.projects"
             :key="location.id"
             :location="location"
             @mounted="slotProps.addPointer"
@@ -19,6 +28,7 @@
 </template>
 
 <script setup lang="ts">
+import GroupLocationToolTip from '@/components/group/Map/GroupLocationToolTip.vue'
 import BaseMap from '@/components/map/BaseMap.vue'
 import MapPointer from '@/components/map/MapPointer.vue'
 import ProjectLocationTooltip from '@/components/project/map/ProjectLocationTooltip.vue'
diff --git a/src/components/map/LocationForm.vue b/src/components/map/LocationForm.vue
index 0efec98a5..92186e755 100644
--- a/src/components/map/LocationForm.vue
+++ b/src/components/map/LocationForm.vue
@@ -78,6 +78,10 @@ const locationTypeOptions = computed(() => {
       value: 'impact',
       label: t('location.impact'),
     },
+    {
+      value: 'address',
+      label: t('location.address'),
+    },
   ]
   if (props.locationTypes) {
     return arr.filter(({ value }) => props.locationTypes.includes(value))
diff --git a/src/components/map/LocationRecap.vue b/src/components/map/LocationRecap.vue
new file mode 100644
index 000000000..356d79099
--- /dev/null
+++ b/src/components/map/LocationRecap.vue
@@ -0,0 +1 @@
+<template>icicicii</template>
diff --git a/src/components/map/LocationTooltip.vue b/src/components/map/LocationTooltip.vue
index 39cdb65de..58f6ea061 100644
--- a/src/components/map/LocationTooltip.vue
+++ b/src/components/map/LocationTooltip.vue
@@ -57,6 +57,10 @@ const closePopUp = inject('closePopUp')
     border-color: $location-team;
   }
 
+  &.address {
+    border-color: $location-address;
+  }
+
   > * {
     padding: 0 1rem;
   }
diff --git a/src/components/map/LocationType.vue b/src/components/map/LocationType.vue
index 058961fc8..8b6c14874 100644
--- a/src/components/map/LocationType.vue
+++ b/src/components/map/LocationType.vue
@@ -23,6 +23,8 @@ const typeLabel = computed(() => {
       return t('location.impact')
     case 'team':
       return t('location.team')
+    case 'address':
+      return t('location.address')
   }
 })
 
@@ -48,6 +50,10 @@ const pointerIcon = computed(() => IconMapLocationType(props.locationType))
     &.team {
       background-color: $location-team;
     }
+
+    &.address {
+      background-color: $location-address;
+    }
   }
 
   .location-title {
diff --git a/src/components/map/MapSuggestion.vue b/src/components/map/MapSuggestion.vue
deleted file mode 100644
index 3d94d7d15..000000000
--- a/src/components/map/MapSuggestion.vue
+++ /dev/null
@@ -1,127 +0,0 @@
-<template>
-  <div class="wrapper">
-    <div ref="marker" class="map-pointer">
-      <div class="badge" @click="emit('pick-location', location)">
-        <div :class="location.type" class="badge__dot" />
-        <div class="badge__label">
-          {{ location.label }}
-        </div>
-      </div>
-
-      <div class="line" />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-defineOptions({ name: 'MapSuggestion' })
-
-const props = withDefaults(defineProps<{ location?: any }>(), { location: null })
-
-const emit = defineEmits<{
-  mounted: [any]
-  unmounted: [any]
-  'pick-location': [any]
-}>()
-
-const markerRef = useTemplateRef('marker')
-onMounted(() => {
-  emit('mounted', {
-    location: props.location,
-    markerContent: markerRef.value,
-  })
-})
-
-onUnmounted(() => {
-  emit('unmounted', props.location)
-})
-</script>
-
-<style lang="scss" scoped>
-.wrapper {
-  display: none;
-}
-
-.leaflet-marker-icon {
-  position: relative;
-}
-
-.map-pointer {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  position: absolute;
-  bottom: 0;
-  left: 50%;
-  transform: translate(-50%, 0);
-
-  .badge {
-    background: $white;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: $space-m;
-    height: auto;
-    box-sizing: border-box;
-    border: $border-width-s solid $primary-dark;
-    border-radius: $border-radius-l;
-    cursor: pointer;
-    transition:
-      height 0.15s ease-in-out,
-      width 0.15s ease-in-out;
-
-    &__dot {
-      width: 16px;
-      height: 16px;
-      border-radius: 50%;
-      margin-right: $space-s;
-
-      &.impact {
-        background: $violet;
-      }
-
-      &.team {
-        background: $primary;
-      }
-    }
-
-    &__label {
-      color: $primary-dark;
-      font-size: $font-size-xs;
-      text-transform: uppercase;
-      font-weight: 700;
-    }
-  }
-
-  .line {
-    width: 3px;
-    height: 35px;
-    background: $primary-dark;
-    position: relative;
-
-    &::after {
-      content: '';
-      width: 10px;
-      height: 10px;
-      position: absolute;
-      bottom: 0;
-      left: 50%;
-      transform: translateX(-50%);
-      background: $primary-dark;
-      border-radius: 50%;
-    }
-  }
-}
-
-.actions {
-  display: flex;
-  position: absolute;
-  top: 0;
-  right: 0;
-  left: 0;
-  justify-content: flex-end;
-  gap: $space-xs;
-  z-index: 10;
-  transform: translate(0, -50%);
-}
-</style>
diff --git a/src/components/map/ProjectTooltip.vue b/src/components/map/ProjectTooltip.vue
deleted file mode 100644
index 6f1de402d..000000000
--- a/src/components/map/ProjectTooltip.vue
+++ /dev/null
@@ -1,163 +0,0 @@
-<template>
-  <div class="project-tooltip">
-    <div class="project-tooltip__header">
-      <div :class="location.type" class="project-tooltip__header--dot" />
-      <h2 class="project-tooltip__header--title">
-        {{ typeLabel }}
-      </h2>
-    </div>
-
-    <div class="project-tooltip__location">
-      <h3 class="project-tooltip__location--title">
-        {{ capitalize(location.title) }}
-      </h3>
-      <p class="project-tooltip__location--description">
-        {{ capitalize(location.description) }}
-      </p>
-
-      <LinkButton
-        :label="$t('project.view')"
-        class="project-tooltip__button"
-        btn-icon="ArrowRight"
-        :to="{ name: 'pageProject', params: { slugOrId: project.slug || project.id } }"
-      />
-    </div>
-
-    <div class="project-tooltip__content">
-      <img
-        :alt="project.header_image?.name"
-        loading="lazy"
-        :src="project.header_image?.variations?.small"
-        class="project-tooltip__image"
-      />
-      <div>
-        <h3 class="project-title">
-          {{ title }}
-        </h3>
-        <p class="project-purpose">
-          {{ purpose }}
-        </p>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { capitalize } from '@/functs/string'
-
-import LinkButton from '@/components/base/button/LinkButton.vue'
-import { cropIfTooLong } from '@/functs/string'
-
-defineOptions({ name: 'ProjectTooltip' })
-
-const props = withDefaults(defineProps<{ location?: any }>(), {
-  location: () => ({}),
-})
-
-const { t } = useNuxtI18n()
-const project = computed(() => props.location.project)
-const typeLabel = computed(() => {
-  return props.location.type === 'impact' ? t('project.impact') : t('team.team')
-})
-const title = computed(() => cropIfTooLong(project.value.title, 45))
-const purpose = computed(() => cropIfTooLong(project.value.purpose, 85))
-</script>
-
-<style lang="scss" scoped>
-.project-tooltip {
-  overflow: hidden;
-  display: flex;
-  width: 100%;
-  height: 100%;
-  transition: opacity 0.15s ease-in-out;
-  flex-direction: column;
-
-  &__header {
-    display: flex;
-    justify-content: flex-start;
-    padding: $space-s;
-
-    &--title {
-      color: $primary-dark;
-      font-weight: 700;
-      font-size: $font-size-s;
-    }
-
-    &--dot {
-      width: pxToRem(16px);
-      height: pxToRem(16px);
-      border-radius: 50%;
-      margin-right: $space-s;
-
-      &.impact {
-        background: $violet;
-      }
-
-      &.team {
-        background: $primary;
-      }
-    }
-  }
-
-  &__location {
-    padding: $space-s;
-
-    &--title {
-      font-weight: 500;
-      font-size: $font-size-xl;
-    }
-
-    &--description {
-      font-weight: 400;
-      font-size: $font-size-m;
-    }
-  }
-
-  &__button {
-    padding: initial;
-    margin-top: $space-m;
-  }
-
-  &__image {
-    width: pxToRem(72px);
-    flex-basis: pxToRem(72px);
-    flex-shrink: 0;
-    height: pxToRem(72px);
-    background-position: center center;
-    background-size: cover;
-    border-radius: $border-radius-xs;
-    object-fit: cover;
-    object-position: 50% 50%;
-    margin-right: $space-m;
-  }
-
-  &__content {
-    flex-basis: 60%;
-    padding: $space-s;
-    background: $primary-lighter;
-    display: flex;
-    justify-content: space-between;
-
-    .project-title {
-      font-size: $font-size-m;
-      font-weight: 700;
-    }
-
-    .project-purpose {
-      font-size: $font-size-s;
-      margin: $space-s 0;
-    }
-  }
-}
-
-.icon {
-  width: pxToRem(18px);
-  height: pxToRem(18px);
-
-  &--close {
-    background: $primary-dark;
-    fill: $white;
-    border-radius: 50%;
-  }
-}
-</style>
diff --git a/src/components/people/GroupMemberItem/GroupMemberItem.vue b/src/components/people/GroupMemberItem/GroupMemberItem.vue
deleted file mode 100644
index d10e00afb..000000000
--- a/src/components/people/GroupMemberItem/GroupMemberItem.vue
+++ /dev/null
@@ -1,143 +0,0 @@
-<template>
-  <div :class="['user', isAnonymous ? 'anonymous' : '']" @click="click">
-    <CroppedApiImage
-      :alt="user.id ? `${user.given_name} ${user.family_name} image` : `${user.name} image`"
-      class="picture"
-      :picture-data="user.profile_picture"
-      picture-size="medium"
-      :default-picture="DEFAULT_USER_PATATOID"
-    />
-    <span v-if="roleLabel" class="badge" data-test="leader-badge">
-      {{ $t(roleLabel) }}
-    </span>
-
-    <div v-if="isNotGroup(user)" class="name-ctn">
-      <h4 class="user-name">
-        {{ userName }}
-      </h4>
-    </div>
-
-    <!--        TODO: ask Api to send information-->
-    <div v-if="isNotGroup(user)" class="job">
-      {{ user?.$t?.job }}
-    </div>
-
-    <div v-if="isGroup(user)" class="name-ctn">
-      <h4 class="user-name">
-        {{ user.name }}
-      </h4>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { isNotGroup, isGroup, isAnonymousUser } from '@/functs/users'
-
-import CroppedApiImage from '@/components/base/media/CroppedApiImage.vue'
-import { DEFAULT_USER_PATATOID } from '@/composables/usePatatoids'
-
-defineOptions({ name: 'GroupMemberItem' })
-
-const props = defineProps({
-  user: {
-    type: Object,
-    default: () => {},
-  },
-})
-
-const emit = defineEmits(['user-click'])
-
-const isAnonymous = computed(() => isAnonymousUser(props.user))
-
-const userName = computed(() => {
-  return `${props.user.given_name?.toLowerCase()} ${props.user.family_name?.toLowerCase()}`
-})
-const roleLabel = computed(() => {
-  if (props.user) {
-    if (props.user.is_leader && props.user.is_manager) return 'group.role.leaders-managers.label'
-    else if (props.user.is_manager) return 'group.role.managers.label'
-    else if (props.user.is_leader) return 'group.role.leaders.label'
-    else return 'group.role.members.label'
-  }
-  return null
-})
-
-const click = () => {
-  if (isAnonymous.value) {
-    return
-  }
-  emit('user-click', props.user)
-}
-</script>
-
-<style lang="scss" scoped>
-.user {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: min-content;
-
-  .picture {
-    width: pxToRem(120px);
-    height: pxToRem(120px);
-    object-fit: cover;
-    object-position: top center;
-    border-radius: 50%;
-  }
-
-  .badge {
-    background: $primary-dark;
-    font-weight: 400;
-    font-size: $font-size-s;
-    margin-top: $space-s;
-    padding: $space-2xs;
-    color: $white;
-  }
-
-  .user-name {
-    text-transform: capitalize;
-  }
-
-  .name-ctn {
-    display: flex;
-    align-items: center;
-    margin-top: $space-s;
-    text-align: center;
-
-    h4 {
-      margin: 0;
-      font-weight: 700;
-      font-size: $font-size-m;
-      line-height: $line-height-tight;
-    }
-
-    svg {
-      height: 16px;
-      width: 16px;
-      fill: $primary-dark;
-      cursor: pointer;
-      margin-left: $space-s;
-    }
-  }
-
-  .job {
-    margin-top: $space-s;
-    text-align: center;
-    font-size: $font-size-s;
-  }
-}
-
-.user.anonymous,
-.user.anonymous:hover {
-  opacity: 0.6;
-  filter: unset !important;
-  transform: unset !important;
-  text-shadow: unset !important;
-  cursor: not-allowed !important;
-  pointer-events: none;
-
-  svg {
-    cursor: not-allowed !important;
-  }
-}
-</style>
diff --git a/src/components/people/Researcher/GroupResearcherDocumentsList.vue b/src/components/people/Researcher/GroupResearcherDocumentsList.vue
new file mode 100644
index 000000000..3711edb6c
--- /dev/null
+++ b/src/components/people/Researcher/GroupResearcherDocumentsList.vue
@@ -0,0 +1,269 @@
+<template>
+  <FetchLoader :status="[status, statusAnalytics]" :with-data="!!documents" skeleton>
+    <ResearcherDocumentsListBase
+      :preview="preview"
+      :pagination="pagination"
+      :doc-type="docType"
+      :documents="documents"
+      :documents-analytics="documentAnalytics"
+      @on-filter="onFilter"
+    />
+  </FetchLoader>
+</template>
+
+<script setup lang="ts">
+import {
+  getGroupResearchDocument,
+  getGroupResearchDocumentAnalytics,
+} from '@/api/v2/crisalid.service'
+import ResearcherDocumentsListBase from '@/components/people/Researcher/ResearcherDocumentsListBase.vue'
+import { DocumentType } from '@/interfaces/researcher'
+import { TranslatedPeopleGroupModel } from '@/models/invitation.model'
+import { factoryPagination } from '@/skeletons/base.skeletons'
+import { documentAnalyticsSkeleton, researchDocumentSkeleton } from '@/skeletons/crisalid.skeletons'
+
+const props = withDefaults(
+  defineProps<{
+    preview?: boolean
+    limit?: number
+    group: TranslatedPeopleGroupModel
+    docType: DocumentType
+  }>(),
+  { preview: false, limit: null }
+)
+const orgaCode = useOrganizationCode()
+
+const groupId = computed(() => props.group.id)
+const query = ref({})
+const onFilter = (filters) => (query.value = { ...filters })
+
+const { data: documentAnalytics, status: statusAnalytics } = getGroupResearchDocumentAnalytics(
+  orgaCode,
+  groupId,
+  props.docType,
+  {
+    query,
+    default: () => documentAnalyticsSkeleton(),
+  }
+)
+const {
+  pagination,
+  data: documents,
+  status,
+} = getGroupResearchDocument(orgaCode, groupId, props.docType, {
+  query,
+  paginationConfig: {
+    limit: props.limit,
+  },
+  default: () => factoryPagination(researchDocumentSkeleton, props.limit),
+})
+</script>
+
+<style lang="scss" scoped>
+$profile-documents: 1rem;
+
+.profile-documents-container {
+  display: flex;
+  flex-direction: column;
+  justify-items: start;
+  gap: $profile-documents;
+}
+
+.documents-list > *:not(:last-child)::after {
+  content: '';
+  display: inline-block;
+  width: 100%;
+  height: 1.5px;
+  opacity: 0.7;
+  background-color: #d4d4d4;
+}
+
+.profile-info-container {
+  display: grid;
+  grid-template-columns: 50% 50%;
+  grid-template-rows: auto auto;
+}
+
+.profile-info-container:not(.preview) {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+
+  .doc-year-container > h5 {
+    text-align: center;
+  }
+}
+
+@media screen and (width <=pxToRem(1000px)) {
+  .profile-info-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem;
+
+    .doc-year-container > h5 {
+      text-align: center;
+    }
+  }
+}
+
+.doc-year-container {
+  display: inline-flex;
+  justify-content: start;
+  align-items: baseline;
+  flex-direction: column;
+  gap: 1rem;
+
+  & > h5 {
+    opacity: 0.7;
+    font-size: 0.8rem;
+    width: 100%;
+  }
+}
+
+.doc-year {
+  display: flex;
+  justify-content: end;
+  gap: 2rem;
+}
+
+.doc-year-info-minyear {
+  align-self: baseline;
+}
+
+.doc-year-info-maxyear {
+  align-self: flex-end;
+}
+
+.doc-year-bar {
+  border: none;
+  margin: 0 1px;
+
+  --max-bar-height: 60;
+  --min-bar-height: 5;
+
+  width: 12.5px;
+  display: inline-block;
+  background-color: $primary-dark;
+  height: calc((var(--max-bar-height) * (var(--bar-count) / 100) + var(--min-bar-height)) * 1px);
+  transition: all 0.4s;
+  transform-origin: bottom;
+  border-radius: 20px;
+
+  & > span {
+    display: none;
+  }
+
+  &:not(.preview) {
+    cursor: pointer;
+    transform: translateZ(0);
+
+    &:hover:not(.selected) {
+      transform: translateZ(0) scale(120%);
+    }
+
+    &.selected:hover {
+      transform: translateZ(0) scale(105%);
+    }
+
+    &:not(:hover).disabled {
+      opacity: 0.5;
+    }
+
+    &.selected {
+      width: 4rem;
+      min-height: 1.5rem;
+      display: inline-flex;
+      vertical-align: bottom;
+
+      & > span {
+        color: white;
+        font-weight: bold;
+        text-align: center;
+        margin: auto;
+        display: block;
+      }
+    }
+  }
+}
+
+.doc-year-info {
+  display: flex;
+  width: 100%;
+  gap: 1rem;
+  align-items: baseline;
+  font-weight: bold;
+}
+
+.doc-numbers-container {
+  display: inline-flex;
+  justify-content: end;
+  gap: 2rem;
+}
+
+.doc-numbers {
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  border-radius: 12px;
+  border: none;
+  padding: 0.2rem 0.5rem;
+  transition: all 0.2s;
+
+  &:not(.preview) {
+    cursor: pointer;
+
+    &:hover,
+    &.selected {
+      background-color: $primary-dark;
+      color: white;
+
+      & :first-child {
+        color: white;
+      }
+    }
+
+    &.disabled {
+      opacity: 0.6;
+    }
+  }
+
+  & :first-child {
+    color: $primary-dark;
+    font-size: 2rem;
+  }
+
+  & :last-child {
+    opacity: 0.6;
+    text-transform: capitalize;
+  }
+}
+
+.m-auto {
+  margin: auto;
+}
+
+.documents-loading,
+.documents-empty {
+  width: 100%;
+  text-align: center;
+  opacity: 0.5;
+  font-style: italic;
+  font-weight: bold;
+}
+
+.doc-roles {
+  margin: 0;
+  border: 0;
+  background-color: unset;
+
+  > :not(.preview) {
+    cursor: pointer;
+
+    &.disaled {
+      opacity: 0.4;
+    }
+  }
+}
+</style>
diff --git a/src/components/people/Researcher/OwnResearcherDocumentsList.vue b/src/components/people/Researcher/OwnResearcherDocumentsList.vue
new file mode 100644
index 000000000..9ac3f2f17
--- /dev/null
+++ b/src/components/people/Researcher/OwnResearcherDocumentsList.vue
@@ -0,0 +1,261 @@
+<template>
+  <FetchLoader :status="[status, statusAnalytics]" :with-data="!!documents" skeleton>
+    <ResearcherDocumentsListBase
+      :preview="preview"
+      :pagination="pagination"
+      :doc-type="docType"
+      :documents="documents"
+      :documents-analytics="documentAnalytics"
+      @on-filter="onFilter"
+    />
+  </FetchLoader>
+</template>
+
+<script setup lang="ts">
+import { getOwnResearchDocument, getOwnResearchDocumentAnalytics } from '@/api/v2/crisalid.service'
+import ResearcherDocumentsListBase from '@/components/people/Researcher/ResearcherDocumentsListBase.vue'
+import { DocumentType } from '@/interfaces/researcher'
+import { UserModel } from '@/models/user.model'
+import { factoryPagination } from '@/skeletons/base.skeletons'
+import { researchDocumentSkeleton, documentAnalyticsSkeleton } from '@/skeletons/crisalid.skeletons'
+
+const props = withDefaults(
+  defineProps<{ preview?: boolean; limit?: number; user: UserModel; docType: DocumentType }>(),
+  { preview: false, limit: null }
+)
+const orgaCode = useOrganizationCode()
+
+const researchId = computed(() => props.user.researcher.id)
+const query = ref({})
+const onFilter = (filters) => (query.value = { ...filters })
+
+const { data: documentAnalytics, status: statusAnalytics } = getOwnResearchDocumentAnalytics(
+  orgaCode,
+  researchId,
+  props.docType,
+  {
+    query,
+    default: () => documentAnalyticsSkeleton(),
+  }
+)
+const {
+  pagination,
+  data: documents,
+  status,
+} = getOwnResearchDocument(orgaCode, researchId, props.docType, {
+  query,
+  paginationConfig: {
+    limit: props.limit,
+  },
+  default: () => factoryPagination(researchDocumentSkeleton, props.limit),
+})
+</script>
+
+<style lang="scss" scoped>
+$profile-documents: 1rem;
+
+.profile-documents-container {
+  display: flex;
+  flex-direction: column;
+  justify-items: start;
+  gap: $profile-documents;
+}
+
+.documents-list > *:not(:last-child)::after {
+  content: '';
+  display: inline-block;
+  width: 100%;
+  height: 1.5px;
+  opacity: 0.7;
+  background-color: #d4d4d4;
+}
+
+.profile-info-container {
+  display: grid;
+  grid-template-columns: 50% 50%;
+  grid-template-rows: auto auto;
+}
+
+.profile-info-container:not(.preview) {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+
+  .doc-year-container > h5 {
+    text-align: center;
+  }
+}
+
+@media screen and (width <= pxToRem(1000px)) {
+  .profile-info-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem;
+
+    .doc-year-container > h5 {
+      text-align: center;
+    }
+  }
+}
+
+.doc-year-container {
+  display: inline-flex;
+  justify-content: start;
+  align-items: baseline;
+  flex-direction: column;
+  gap: 1rem;
+
+  & > h5 {
+    opacity: 0.7;
+    font-size: 0.8rem;
+    width: 100%;
+  }
+}
+
+.doc-year {
+  display: flex;
+  justify-content: end;
+  gap: 2rem;
+}
+
+.doc-year-info-minyear {
+  align-self: baseline;
+}
+
+.doc-year-info-maxyear {
+  align-self: flex-end;
+}
+
+.doc-year-bar {
+  border: none;
+  margin: 0 1px;
+
+  --max-bar-height: 60;
+  --min-bar-height: 5;
+
+  width: 12.5px;
+  display: inline-block;
+  background-color: $primary-dark;
+  height: calc((var(--max-bar-height) * (var(--bar-count) / 100) + var(--min-bar-height)) * 1px);
+  transition: all 0.4s;
+  transform-origin: bottom;
+  border-radius: 20px;
+
+  & > span {
+    display: none;
+  }
+
+  &:not(.preview) {
+    cursor: pointer;
+    transform: translateZ(0);
+
+    &:hover:not(.selected) {
+      transform: translateZ(0) scale(120%);
+    }
+
+    &.selected:hover {
+      transform: translateZ(0) scale(105%);
+    }
+
+    &:not(:hover).disabled {
+      opacity: 0.5;
+    }
+
+    &.selected {
+      width: 4rem;
+      min-height: 1.5rem;
+      display: inline-flex;
+      vertical-align: bottom;
+
+      & > span {
+        color: white;
+        font-weight: bold;
+        text-align: center;
+        margin: auto;
+        display: block;
+      }
+    }
+  }
+}
+
+.doc-year-info {
+  display: flex;
+  width: 100%;
+  gap: 1rem;
+  align-items: baseline;
+  font-weight: bold;
+}
+
+.doc-numbers-container {
+  display: inline-flex;
+  justify-content: end;
+  gap: 2rem;
+}
+
+.doc-numbers {
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  border-radius: 12px;
+  border: none;
+  padding: 0.2rem 0.5rem;
+  transition: all 0.2s;
+
+  &:not(.preview) {
+    cursor: pointer;
+
+    &:hover,
+    &.selected {
+      background-color: $primary-dark;
+      color: white;
+
+      & :first-child {
+        color: white;
+      }
+    }
+
+    &.disabled {
+      opacity: 0.6;
+    }
+  }
+
+  & :first-child {
+    color: $primary-dark;
+    font-size: 2rem;
+  }
+
+  & :last-child {
+    opacity: 0.6;
+    text-transform: capitalize;
+  }
+}
+
+.m-auto {
+  margin: auto;
+}
+
+.documents-loading,
+.documents-empty {
+  width: 100%;
+  text-align: center;
+  opacity: 0.5;
+  font-style: italic;
+  font-weight: bold;
+}
+
+.doc-roles {
+  margin: 0;
+  border: 0;
+  background-color: unset;
+
+  > :not(.preview) {
+    cursor: pointer;
+
+    &.disaled {
+      opacity: 0.4;
+    }
+  }
+}
+</style>
diff --git a/src/components/people/Researcher/ResearcherDocument.vue b/src/components/people/Researcher/ResearcherDocument.vue
index e02e08cbb..1653936f2 100644
--- a/src/components/people/Researcher/ResearcherDocument.vue
+++ b/src/components/people/Researcher/ResearcherDocument.vue
@@ -1,11 +1,11 @@
 <template>
   <article class="profile-documents">
-    <span class="icon-container">
+    <span class="icon-container skeletons-text">
       <PushPinSvg />
       {{ t(`researcher.document_types.${sanitizeTranslateKeys(document.document_type)}`) }}
     </span>
-    <h2>{{ document.$t.title }}</h2>
-    <div>
+    <h2 class="skeletons-text">{{ document.$t.title }}</h2>
+    <div class="skeletons-text">
       <span v-for="(author, idx) in document.contributors" :key="author.id">
         <!-- if author.user isa projectsUser, create a nuxtlink to go to the user -->
         <NuxtLink
@@ -35,10 +35,10 @@
         </span>
       </span>
     </div>
-    <p class="profile-document-description" :class="{ preview: preview }">
+    <p class="profile-document-description skeletons-text" :class="{ preview: preview }">
       {{ document.$t.description }}
     </p>
-    <span v-if="document.publication_date">
+    <span v-if="document.publication_date" class="skeletons-text">
       {{
         new Date(document.publication_date).toLocaleDateString(locale, {
           year: 'numeric',
@@ -54,7 +54,7 @@
         :title="`${t('common.link-to')} ${identifier.harvester}`"
         target="_blank"
         rel="referer,noopener"
-        class="doc-sources"
+        class="doc-sources skeletons-background"
       >
         <IconHarvester :harvester="identifier.harvester" height="1.3rem" />
       </a>
@@ -77,8 +77,6 @@ import PushPinSvg from '@/assets/svg/pushpin.svg'
 import { sanitizeTranslateKeys } from '@/api/sanitizes/researcher'
 import SeeMoreArrow from '@/components/base/button/SeeMoreArrow.vue'
 
-defineOptions({ name: 'ResearcherDocument' })
-
 const { t, locale } = useNuxtI18n()
 const emit = defineEmits(['similar'])
 
diff --git a/src/components/people/Researcher/ResearcherDocumentSimilars.vue b/src/components/people/Researcher/ResearcherDocumentSimilars.vue
index 209ef3fc1..045bd25b1 100644
--- a/src/components/people/Researcher/ResearcherDocumentSimilars.vue
+++ b/src/components/people/Researcher/ResearcherDocumentSimilars.vue
@@ -4,13 +4,12 @@
     data-test="add-default-skills-drawer"
     :title="`${t(`profile.${docType}-similars`)} (${count})`"
     class="medium"
-    no-footer
     @close="emit('close')"
   >
-    <FetchLoader :status="status">
+    <FetchLoader :status="status" only-error skeleton>
       <div class="documents-list-similars">
         <ResearcherDocument
-          v-for="doc in documentsTranslated"
+          v-for="doc in documents"
           :key="doc.id"
           :document="doc"
           :doc-type="docType"
@@ -21,63 +20,46 @@
         <PaginationButtonsV2 :pagination="pagination" />
       </div>
     </FetchLoader>
+    <template #footer>
+      <div class="documents-paginations">
+        <PaginationButtonsV2 :pagination="pagination" />
+      </div>
+    </template>
   </BaseDrawer>
 </template>
 
 <script setup lang="ts">
-import { sanitizeResearcherDocuments } from '@/api/sanitizes/researcher'
+import { getResearchDocumentSimilars } from '@/api/v2/crisalid.service'
 import BaseDrawer from '@/components/base/BaseDrawer.vue'
 import FetchLoader from '@/components/base/FetchLoader.vue'
 import PaginationButtonsV2 from '@/components/base/navigation/PaginationButtonsV2.vue'
-import { PaginationResult, usePagination } from '@/composables/usePagination'
-import { Document, TranslatedDocument } from '@/interfaces/researcher'
-import { UserModel } from '@/models/user.model'
-import { AsyncDataRequestStatus } from 'nuxt/app'
+import { TranslatedDocument } from '@/interfaces/researcher'
+import { factoryPagination } from '@/skeletons/base.skeletons'
+import { researchDocumentSkeleton } from '@/skeletons/crisalid.skeletons'
 
 defineOptions({ name: 'ResearcherDocumentSimilars' })
 
 const { t } = useNuxtI18n()
 const emit = defineEmits(['close'])
 const props = defineProps<{
-  document?: Document
+  document?: TranslatedDocument
   docType: string
-  user: UserModel
 }>()
 
-const status = ref<AsyncDataRequestStatus>('pending')
-const documents = ref<PaginationResult<Document>>()
-const pagination = usePagination(documents, { limit: 10 })
+const organizationCode = useOrganizationCode()
+const documentId = computed(() => props.document?.id)
+const LIMIT = 10
+const {
+  status,
+  pagination,
+  data: documents,
+} = getResearchDocumentSimilars(organizationCode, documentId, {
+  paginationConfig: {
+    limit: LIMIT,
+  },
+  default: () => factoryPagination(researchDocumentSkeleton, LIMIT),
+})
 const { count } = pagination
-const { translateResearcherDocuments } = useAutoTranslate()
-const orgaCode = useOrganizationCode()
-
-// get results list from paginated response
-const results = computed<Document[] | undefined>(() => documents.value?.results)
-const documentsTranslated: ComputedRef<TranslatedDocument[]> = translateResearcherDocuments(results)
-
-const getDocuments = (query) => {
-  status.value = 'pending'
-  useAPI(
-    `crisalid/organization/${orgaCode}/researcher/${props.user.researcher.id}/${props.docType}/${props.document.id}/similars/`,
-    {
-      query,
-    }
-  )
-    .then((data) => {
-      documents.value = sanitizeResearcherDocuments(data)
-      status.value = 'success'
-    })
-    .catch(() => {
-      status.value = 'error'
-    })
-}
-
-watch(pagination.query, (query) => getDocuments(query))
-watch(
-  () => props.document,
-  (doc) => doc && getDocuments(pagination.query()),
-  { immediate: true }
-)
 </script>
 
 <style lang="scss">
diff --git a/src/components/people/Researcher/ResearcherDocumentsList.vue b/src/components/people/Researcher/ResearcherDocumentsList.vue
deleted file mode 100644
index 2f32c5b4a..000000000
--- a/src/components/people/Researcher/ResearcherDocumentsList.vue
+++ /dev/null
@@ -1,455 +0,0 @@
-<template>
-  <FetchLoader :status="status" :with-data="!!documents">
-    <div v-if="documentsTranslated?.length" class="profile-documents-container">
-      <div class="profile-info-container" :class="{ preview: preview }">
-        <div class="doc-year-container">
-          <h5>
-            {{ t('profile.research-output-year') }}
-            {{ query.year ? `${query.year} (${documents.count})` : '' }}
-          </h5>
-          <div class="doc-year-info">
-            <span class="doc-year-info-minyear">{{ yearsInfo.minYear }}</span>
-            <div>
-              <component
-                :is="preview ? 'button' : 'div'"
-                v-for="obj in yearsInfo.bar"
-                :key="obj.year"
-                class="doc-year-bar"
-                :class="{
-                  disabled: query.year && query.year !== obj.year,
-                  selected: query.year === obj.year,
-                  preview: preview,
-                }"
-                :title="`${t(`profile.${docType}`)} ${obj.year} (${obj.count})`"
-                :style="{ '--bar-count': obj.height }"
-                @click="!preview && toggleQuery('year', obj.year)"
-              >
-                <span>{{ obj.year }}</span>
-              </component>
-            </div>
-            <span class="doc-year-info-maxyear">{{ yearsInfo.maxYear }}</span>
-          </div>
-        </div>
-        <div class="doc-numbers-container">
-          <component
-            :is="preview ? 'div' : 'button'"
-            v-for="[name, count] in documentTypeInfos"
-            :key="name"
-            class="doc-numbers"
-            :class="{
-              disabled: query.document_type !== undefined && query.document_type !== (name ?? ''),
-              selected: query.document_type === (name ?? ''),
-              preview: preview,
-            }"
-            @click="!preview && toggleQuery('document_type', name ?? '')"
-          >
-            <span>{{ count }}</span>
-            <span>
-              {{
-                (name && t(`researcher.document_types.${sanitizeTranslateKeys(name)}`)) ??
-                t('common.other')
-              }}
-            </span>
-          </component>
-        </div>
-        <div v-if="!preview && documentsRoleInfos.length" class="doc-roles-container">
-          <!-- change button to div only if we are in preview (from summary page) -->
-          <button
-            v-for="[role, count] in documentsRoleInfos"
-            :key="role"
-            class="doc-roles"
-            @click="toggleQuery('roles', role)"
-          >
-            <BadgeItem
-              :class="{
-                disabled: query.roles !== null && query.roles !== role,
-                selected: query.roles === role,
-                preview: preview,
-              }"
-              :label="`${t(`researcher.relators.${sanitizeTranslateKeys(role)}`)} ${count}`"
-            />
-          </button>
-        </div>
-        <div v-if="!preview" class="doc-roles-container">
-          <!-- change button to div only if we are in preview (from summary page) -->
-          <button
-            class="doc-roles"
-            @click="
-              setQuery(
-                'ordering',
-                query.ordering === SORTING_DEFAULT ? 'publication_date' : '-publication_date'
-              )
-            "
-          >
-            <BadgeItem
-              :label="SORTING_RESULTS[query.ordering]"
-              :icon-name="query.ordering === SORTING_DEFAULT ? 'SortDesc' : 'SortAsc'"
-            />
-          </button>
-        </div>
-      </div>
-      <div class="documents-list">
-        <ResearcherDocument
-          v-for="doc in documentsTranslated"
-          :key="doc.id"
-          :document="doc"
-          :doc-type="docType"
-          :preview="preview"
-          @similar="documentSelected = doc"
-        />
-      </div>
-      <PaginationButtonsV2 v-if="props.preview === false" class="m-auto" :pagination="pagination" />
-    </div>
-    <div v-else class="documents-empty">
-      {{ t(`profile.${docType}-empty`) }}
-    </div>
-    <ResearcherDocumentSimilars
-      :document="documentSelected"
-      :doc-type="docType"
-      :user="user"
-      @close="documentSelected = null"
-    />
-  </FetchLoader>
-</template>
-
-<script setup lang="ts">
-import {
-  sanitizeResearcherDocuments,
-  sanitizeTranslateKeys,
-  sanitizeResearcherDocumentAnalyticsYears,
-} from '@/api/sanitizes/researcher'
-import PaginationButtonsV2 from '@/components/base/navigation/PaginationButtonsV2.vue'
-import ResearcherDocument from '@/components/people/Researcher/ResearcherDocument.vue'
-import ResearcherDocumentSimilars from '@/components/people/Researcher/ResearcherDocumentSimilars.vue'
-import { PaginationResult, usePagination } from '@/composables/usePagination'
-import { useQuery } from '@/composables/useQuery'
-import {
-  Document,
-  QueryFilterDocument,
-  ResearcherDocumentAnalytics,
-  TranslatedDocument,
-} from '@/interfaces/researcher'
-import { UserModel } from '@/models/user.model'
-import { AsyncDataRequestStatus } from 'nuxt/app'
-
-defineOptions({ name: 'ResearcherDocumentsList' })
-
-const props = withDefaults(
-  defineProps<{ preview?: boolean; limit?: number; user: UserModel; docType: string }>(),
-  { preview: false, limit: null }
-)
-const { t } = useNuxtI18n()
-const { translateResearcherDocuments } = useAutoTranslate()
-const orgaCode = useOrganizationCode()
-
-// when we click to "show similars documents"
-const documentSelected = ref<Document>()
-
-const documents = ref<PaginationResult<Document>>()
-
-// get results list from paginated response
-const results = computed<Document[] | undefined>(() => documents.value?.results)
-const documentsTranslated: ComputedRef<TranslatedDocument[]> = translateResearcherDocuments(results)
-
-const pagination = usePagination(documents, { limit: props.limit ?? 10 })
-const status = ref<AsyncDataRequestStatus>('pending')
-
-const documentsAnalytics = ref<ResearcherDocumentAnalytics>({
-  document_types: {},
-  years: [],
-  roles: {},
-})
-
-const SORTING_RESULTS = {
-  publication_date: $t('common.order-asc'),
-  '-publication_date': $t('common.order-desc'),
-}
-const SORTING_DEFAULT = '-publication_date'
-// filter backend query
-const { query, toggleQuery, setQuery } = useQuery<QueryFilterDocument>({
-  ordering: SORTING_DEFAULT,
-})
-
-const getDocuments = () => {
-  status.value = 'pending'
-  useAPI(
-    `crisalid/organization/${orgaCode}/researcher/${props.user.researcher.id}/${props.docType}/`,
-    {
-      query: {
-        ...query,
-        ...pagination.query(),
-      },
-    }
-  )
-    .then((data) => {
-      documents.value = sanitizeResearcherDocuments(data)
-      status.value = 'success'
-    })
-    .catch(() => {
-      status.value = 'error'
-    })
-}
-
-const getDocumentsInfo = () => {
-  useAPI(
-    `crisalid/organization/${orgaCode}/researcher/${props.user.researcher.id}/${props.docType}/analytics/`,
-    {
-      query: {
-        ...query,
-        // add only limit for preview (used to show only X year bar graph)
-        ...(props.preview ? { limit: 5 } : {}),
-      },
-    }
-  ).then((data) => {
-    documentsAnalytics.value = data
-  })
-}
-
-watch(pagination.query, () => {
-  getDocuments()
-  getDocumentsInfo()
-})
-
-watch(query, () => {
-  if (!pagination.first()) {
-    getDocuments()
-    getDocumentsInfo()
-  }
-})
-
-// when components is mounted, getch
-onMounted(() => {
-  getDocuments()
-  getDocumentsInfo()
-})
-
-// this create years graph
-const yearsInfo = computed(() =>
-  sanitizeResearcherDocumentAnalyticsYears(documentsAnalytics.value.years)
-)
-
-// convert object key/number to array sorted by DESC and sliced from preview limit
-const sortInfos = (
-  data: ResearcherDocumentAnalytics['document_types'] | ResearcherDocumentAnalytics['roles']
-) => {
-  const dataEntries = Object.entries(data)
-    .toSorted(([, lenA], [, lenB]) => lenA - lenB)
-    .reverse()
-  if (props.limit) {
-    return dataEntries.slice(0, props.limit)
-  }
-  return dataEntries
-}
-
-const documentTypeInfos = computed(() => sortInfos(documentsAnalytics.value.document_types))
-const documentsRoleInfos = computed(() => sortInfos(documentsAnalytics.value.roles))
-</script>
-
-<style lang="scss" scoped>
-$profile-documents: 1rem;
-
-.profile-documents-container {
-  display: flex;
-  flex-direction: column;
-  justify-items: start;
-  gap: $profile-documents;
-}
-
-.documents-list > *:not(:last-child)::after {
-  content: '';
-  display: inline-block;
-  width: 100%;
-  height: 1.5px;
-  opacity: 0.7;
-  background-color: #d4d4d4;
-}
-
-.profile-info-container {
-  display: grid;
-  grid-template-columns: 50% 50%;
-  grid-template-rows: auto auto;
-}
-
-.profile-info-container:not(.preview) {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 1rem;
-
-  .doc-year-container > h5 {
-    text-align: center;
-  }
-}
-
-@media screen and (width <= pxToRem(1000px)) {
-  .profile-info-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 1rem;
-
-    .doc-year-container > h5 {
-      text-align: center;
-    }
-  }
-}
-
-.doc-year-container {
-  display: inline-flex;
-  justify-content: start;
-  align-items: baseline;
-  flex-direction: column;
-  gap: 1rem;
-
-  & > h5 {
-    opacity: 0.7;
-    font-size: 0.8rem;
-    width: 100%;
-  }
-}
-
-.doc-year {
-  display: flex;
-  justify-content: end;
-  gap: 2rem;
-}
-
-.doc-year-info-minyear {
-  align-self: baseline;
-}
-
-.doc-year-info-maxyear {
-  align-self: flex-end;
-}
-
-.doc-year-bar {
-  border: none;
-  margin: 0 1px;
-
-  --max-bar-height: 60;
-  --min-bar-height: 5;
-
-  width: 12.5px;
-  display: inline-block;
-  background-color: $primary-dark;
-  height: calc((var(--max-bar-height) * (var(--bar-count) / 100) + var(--min-bar-height)) * 1px);
-  transition: all 0.4s;
-  transform-origin: bottom;
-  border-radius: 20px;
-
-  & > span {
-    display: none;
-  }
-
-  &:not(.preview) {
-    cursor: pointer;
-    transform: translateZ(0);
-
-    &:hover:not(.selected) {
-      transform: translateZ(0) scale(120%);
-    }
-
-    &.selected:hover {
-      transform: translateZ(0) scale(105%);
-    }
-
-    &:not(:hover).disabled {
-      opacity: 0.5;
-    }
-
-    &.selected {
-      width: 4rem;
-      min-height: 1.5rem;
-      display: inline-flex;
-      vertical-align: bottom;
-
-      & > span {
-        color: white;
-        font-weight: bold;
-        text-align: center;
-        margin: auto;
-        display: block;
-      }
-    }
-  }
-}
-
-.doc-year-info {
-  display: flex;
-  width: 100%;
-  gap: 1rem;
-  align-items: baseline;
-  font-weight: bold;
-}
-
-.doc-numbers-container {
-  display: inline-flex;
-  justify-content: end;
-  gap: 2rem;
-}
-
-.doc-numbers {
-  display: flex;
-  flex-direction: column;
-  text-align: center;
-  border-radius: 12px;
-  border: none;
-  padding: 0.2rem 0.5rem;
-  transition: all 0.2s;
-
-  &:not(.preview) {
-    cursor: pointer;
-
-    &:hover,
-    &.selected {
-      background-color: $primary-dark;
-      color: white;
-
-      & :first-child {
-        color: white;
-      }
-    }
-
-    &.disabled {
-      opacity: 0.6;
-    }
-  }
-
-  & :first-child {
-    color: $primary-dark;
-    font-size: 2rem;
-  }
-
-  & :last-child {
-    opacity: 0.6;
-    text-transform: capitalize;
-  }
-}
-
-.m-auto {
-  margin: auto;
-}
-
-.documents-loading,
-.documents-empty {
-  width: 100%;
-  text-align: center;
-  opacity: 0.5;
-  font-style: italic;
-  font-weight: bold;
-}
-
-.doc-roles {
-  margin: 0;
-  border: 0;
-  background-color: unset;
-
-  > :not(.preview) {
-    cursor: pointer;
-
-    &.disaled {
-      opacity: 0.4;
-    }
-  }
-}
-</style>
diff --git a/src/components/people/Researcher/ResearcherDocumentsListBase.vue b/src/components/people/Researcher/ResearcherDocumentsListBase.vue
new file mode 100644
index 000000000..ad69ab34d
--- /dev/null
+++ b/src/components/people/Researcher/ResearcherDocumentsListBase.vue
@@ -0,0 +1,400 @@
+<template>
+  <div v-if="documents?.length" class="profile-documents-container">
+    <div class="profile-info-container" :class="{ preview: preview }">
+      <div class="doc-year-container">
+        <h5>
+          <span class="skeletons-text">
+            {{ t('profile.research-output-year') }}
+            {{ query.year ? `${query.year} (${paginationCount})` : '' }}
+          </span>
+        </h5>
+        <div v-if="yearsInfo" class="doc-year-info">
+          <span class="doc-year-info-minyear skeletons-text">{{ yearsInfo.minYear }}</span>
+          <div>
+            <component
+              :is="preview ? 'button' : 'div'"
+              v-for="obj in yearsInfo.bar"
+              :key="obj.year"
+              class="doc-year-bar skeletons-background"
+              :class="{
+                disabled: query.year && query.year !== obj.year,
+                selected: query.year === obj.year,
+                preview: preview,
+              }"
+              :title="`${t(`profile.${docType}`)} ${obj.year} (${obj.count})`"
+              :style="{ '--bar-count': obj.height }"
+              @click="!preview && toggleQuery('year', obj.year)"
+            >
+              <span>{{ obj.year }}</span>
+            </component>
+          </div>
+          <span class="doc-year-info-maxyear skeletons-text">{{ yearsInfo.maxYear }}</span>
+        </div>
+      </div>
+      <div class="doc-numbers-container">
+        <component
+          :is="preview ? 'div' : 'button'"
+          v-for="[name, count] in documentTypeInfos"
+          :key="name"
+          class="doc-numbers skeletons-background"
+          :class="{
+            disabled: query.document_type !== undefined && query.document_type !== (name ?? ''),
+            selected: query.document_type === (name ?? ''),
+            preview: preview,
+          }"
+          @click="!preview && toggleQuery('document_type', name ?? '')"
+        >
+          <span>{{ count }}</span>
+          <span>
+            {{
+              (name && t(`researcher.document_types.${sanitizeTranslateKeys(name)}`)) ??
+              t('common.other')
+            }}
+          </span>
+        </component>
+      </div>
+      <div v-if="!preview && documentsRoleInfos.length" class="doc-roles-container">
+        <!-- change button to div only if we are in preview (from summary page) -->
+        <button
+          v-for="[role, count] in documentsRoleInfos"
+          :key="role"
+          class="doc-roles"
+          @click="toggleQuery('roles', role)"
+        >
+          <BadgeItem
+            :class="{
+              disabled: query.roles !== null && query.roles !== role,
+              selected: query.roles === role,
+              preview: preview,
+            }"
+            :label="`${t(`researcher.relators.${sanitizeTranslateKeys(role)}`)} ${count}`"
+          />
+        </button>
+      </div>
+      <div v-if="!preview" class="doc-roles-container">
+        <!-- change button to div only if we are in preview (from summary page) -->
+        <button
+          class="doc-roles"
+          @click="
+            setQuery(
+              'ordering',
+              query.ordering === SORTING_DEFAULT ? 'publication_date' : '-publication_date'
+            )
+          "
+        >
+          <BadgeItem
+            :label="SORTING_RESULTS[query.ordering]"
+            :icon-name="query.ordering === SORTING_DEFAULT ? 'SortDesc' : 'SortAsc'"
+          />
+        </button>
+      </div>
+    </div>
+    <div class="documents-list">
+      <ResearcherDocument
+        v-for="doc in documents"
+        :key="doc.id"
+        :document="doc"
+        :doc-type="docType"
+        :preview="preview"
+        @similar="documentSelected = doc"
+      />
+    </div>
+    <PaginationButtonsV2 v-if="props.preview === false" class="m-auto" :pagination="pagination" />
+  </div>
+  <div v-else class="documents-empty">
+    {{ t(`profile.${docType}-empty`) }}
+  </div>
+  <ResearcherDocumentSimilars
+    :document="documentSelected"
+    :doc-type="docType"
+    @close="documentSelected = null"
+  />
+</template>
+
+<script setup lang="ts">
+import {
+  sanitizeTranslateKeys,
+  sanitizeResearcherDocumentAnalyticsYears,
+} from '@/api/sanitizes/researcher'
+import PaginationButtonsV2 from '@/components/base/navigation/PaginationButtonsV2.vue'
+import ResearcherDocument from '@/components/people/Researcher/ResearcherDocument.vue'
+import ResearcherDocumentSimilars from '@/components/people/Researcher/ResearcherDocumentSimilars.vue'
+import { Pagination as PaginationType } from '@/composables/usePagination'
+import { useQuery } from '@/composables/useQuery'
+import {
+  QueryFilterDocument,
+  ResearcherDocumentAnalytics,
+  TranslatedDocument,
+} from '@/interfaces/researcher'
+
+const props = withDefaults(
+  defineProps<{
+    documents: TranslatedDocument[]
+    documentsAnalytics: ResearcherDocumentAnalytics
+    pagination?: PaginationType
+    preview?: boolean
+    docType: string
+  }>(),
+  { preview: false, pagination: null }
+)
+const { t } = useNuxtI18n()
+
+const { count: paginationCount } = props.pagination
+
+// when we click to "show similars documents"
+const documentSelected = ref<TranslatedDocument>()
+
+const SORTING_RESULTS = {
+  publication_date: $t('common.order-asc'),
+  '-publication_date': $t('common.order-desc'),
+}
+const SORTING_DEFAULT = '-publication_date'
+// filter backend query
+const { query, toggleQuery, setQuery } = useQuery<QueryFilterDocument>({
+  ordering: SORTING_DEFAULT,
+})
+
+const emit = defineEmits<{
+  onFilter: [QueryFilterDocument]
+}>()
+
+watch(query, (n) => {
+  emit('onFilter', toRaw(n))
+})
+
+// this create years graph
+const yearsInfo = computed(() => {
+  if (!props.documentsAnalytics) {
+    return null
+  }
+  return sanitizeResearcherDocumentAnalyticsYears(
+    props.documentsAnalytics.years,
+    props.preview ? 5 : null
+  )
+})
+
+// convert object key/number to array sorted by DESC and sliced from preview limit
+const sortInfos = (
+  data: ResearcherDocumentAnalytics['document_types'] | ResearcherDocumentAnalytics['roles']
+) => {
+  const dataEntries = Object.entries(data ?? {})
+    .toSorted(([, lenA], [, lenB]) => lenA - lenB)
+    .reverse()
+  if (props.pagination.limit.value) {
+    return dataEntries.slice(0, props.pagination.limit.value)
+  }
+  return dataEntries
+}
+
+const documentTypeInfos = computed(() => sortInfos(props.documentsAnalytics?.document_types))
+const documentsRoleInfos = computed(() => sortInfos(props.documentsAnalytics?.roles))
+</script>
+
+<style lang="scss" scoped>
+$profile-documents: 1rem;
+
+.profile-documents-container {
+  display: flex;
+  flex-direction: column;
+  justify-items: start;
+  gap: $profile-documents;
+}
+
+.documents-list > *:not(:last-child)::after {
+  content: '';
+  display: inline-block;
+  width: 100%;
+  height: 1.5px;
+  opacity: 0.7;
+  background-color: #d4d4d4;
+}
+
+.profile-info-container {
+  display: grid;
+  grid-template-columns: 50% 50%;
+  grid-template-rows: auto auto;
+}
+
+.profile-info-container:not(.preview) {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+
+  .doc-year-container > h5 {
+    text-align: center;
+  }
+}
+
+@media screen and (width <=pxToRem(1000px)) {
+  .profile-info-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem;
+
+    .doc-year-container > h5 {
+      text-align: center;
+    }
+  }
+}
+
+.doc-year-container {
+  display: inline-flex;
+  justify-content: start;
+  align-items: baseline;
+  flex-direction: column;
+  gap: 1rem;
+
+  & > h5 {
+    opacity: 0.7;
+    font-size: 0.8rem;
+    width: 100%;
+  }
+}
+
+.doc-year {
+  display: flex;
+  justify-content: end;
+  gap: 2rem;
+}
+
+.doc-year-info-minyear {
+  align-self: baseline;
+}
+
+.doc-year-info-maxyear {
+  align-self: flex-end;
+}
+
+.doc-year-bar {
+  border: none;
+  margin: 0 1px;
+
+  --max-bar-height: 60;
+  --min-bar-height: 5;
+
+  width: 12.5px;
+  display: inline-block;
+  background-color: $primary-dark;
+  height: calc((var(--max-bar-height) * (var(--bar-count) / 100) + var(--min-bar-height)) * 1px);
+  transition: all 0.4s;
+  transform-origin: bottom;
+  border-radius: 20px;
+
+  & > span {
+    display: none;
+  }
+
+  &:not(.preview) {
+    cursor: pointer;
+    transform: translateZ(0);
+
+    &:hover:not(.selected) {
+      transform: translateZ(0) scale(120%);
+    }
+
+    &.selected:hover {
+      transform: translateZ(0) scale(105%);
+    }
+
+    &:not(:hover).disabled {
+      opacity: 0.5;
+    }
+
+    &.selected {
+      width: 4rem;
+      min-height: 1.5rem;
+      display: inline-flex;
+      vertical-align: bottom;
+
+      & > span {
+        color: white;
+        font-weight: bold;
+        text-align: center;
+        margin: auto;
+        display: block;
+      }
+    }
+  }
+}
+
+.doc-year-info {
+  display: flex;
+  width: 100%;
+  gap: 1rem;
+  align-items: baseline;
+  font-weight: bold;
+}
+
+.doc-numbers-container {
+  display: inline-flex;
+  justify-content: end;
+  gap: 2rem;
+}
+
+.doc-numbers {
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  border-radius: 12px;
+  border: none;
+  padding: 0.2rem 0.5rem;
+  transition: all 0.2s;
+
+  &:not(.preview) {
+    cursor: pointer;
+
+    &:hover,
+    &.selected {
+      background-color: $primary-dark;
+      color: white;
+
+      & :first-child {
+        color: white;
+      }
+    }
+
+    &.disabled {
+      opacity: 0.6;
+    }
+  }
+
+  & :first-child {
+    color: $primary-dark;
+    font-size: 2rem;
+  }
+
+  & :last-child {
+    opacity: 0.6;
+    text-transform: capitalize;
+  }
+}
+
+.m-auto {
+  margin: auto;
+}
+
+.documents-loading,
+.documents-empty {
+  width: 100%;
+  text-align: center;
+  opacity: 0.5;
+  font-style: italic;
+  font-weight: bold;
+}
+
+.doc-roles {
+  margin: 0;
+  border: 0;
+  background-color: unset;
+
+  > :not(.preview) {
+    cursor: pointer;
+
+    &.disaled {
+      opacity: 0.4;
+    }
+  }
+}
+</style>
diff --git a/src/components/people/TeamCard/TeamCardInline.vue b/src/components/people/TeamCard/TeamCardInline.vue
index 5fe0f1670..e5163c48b 100644
--- a/src/components/people/TeamCard/TeamCardInline.vue
+++ b/src/components/people/TeamCard/TeamCardInline.vue
@@ -1,85 +1,42 @@
 <template>
-  <div
-    class="team-card-small"
-    :class="{ passive: !iconName }"
-    :data-test="`user-card-${user.id}`"
-    @click="iconName ? emit('user-clicked') : null"
-  >
-    <div class="user-container">
-      <CroppedApiImage
-        :alt="
-          user.keycloack_id ? `${user.given_name} ${user.family_name} image` : `${user.name} image`
-        "
-        class="img-container"
-        :picture-data="user.profile_picture"
-        picture-size="medium"
-        :default-picture="DEFAULT_USER_PATATOID"
-      />
-
-      <div class="user-info">
-        <div v-if="isNotGroup(user)" class="name">
-          {{ capitalize(user.given_name) }}
-          {{ capitalize(user.family_name) }}
-        </div>
-        <div v-else class="name">
-          {{ capitalize(user.name) }}
-        </div>
-        <div v-if="roleLabel" class="role">
-          {{ t(roleLabel) }}
-        </div>
-
-        <div v-if="user.job" class="title">
-          {{ user.job }}
-        </div>
+  <GroupMemberItem :member="user" :role-label="roleLabel" @click="removeMember">
+    <template #actions>
+      <div v-if="iconName" class="icon">
+        <IconImage :name="iconName" @click="removeMember" />
       </div>
-    </div>
-
-    <div v-if="iconName" class="icon">
-      <IconImage :name="iconName" @click="emit('user-clicked')" />
-    </div>
-  </div>
+    </template>
+  </GroupMemberItem>
 </template>
 
-<script setup>
-import { capitalize } from '@/functs/string'
-import { isNotGroup } from '@/functs/users'
-
+<script setup lang="ts">
 import IconImage from '@/components/base/media/IconImage.vue'
-import CroppedApiImage from '@/components/base/media/CroppedApiImage.vue'
-import useUsersStore from '@/stores/useUsers.ts'
-import { DEFAULT_USER_PATATOID } from '@/composables/usePatatoids'
-
-defineOptions({ name: 'TeamCardInline' })
-
-const props = defineProps({
-  user: {
-    type: Object,
-    required: true,
-  },
-
-  roleLabel: {
-    type: [String, null],
-    default: null,
-  },
-
-  icon: {
-    type: String,
-    default: null,
-  },
-})
-
-const emit = defineEmits(['user-clicked'])
-const { t } = useNuxtI18n()
+import useUsersStore from '@/stores/useUsers'
+import GroupMemberItem from '@/components/group/Modules/Members/GroupMemberItem.vue'
+import { GroupMember } from '@/models/group.model'
+import { IconImageChoice } from '@/functs/IconImage'
+
+const props = withDefaults(
+  defineProps<{
+    user: GroupMember
+    icon?: IconImageChoice
+    roleLabel?: string
+  }>(),
+  { icon: null, roleLabel: undefined }
+)
+
+const emit = defineEmits(['click'])
 const usersStore = useUsersStore()
 
-const currentUser = computed(() => {
-  return usersStore.userFromApi
-})
-
 const iconName = computed(() => {
   if (props.icon) return props.icon
-  return props.user.id !== currentUser.value.id ? 'Close' : null
+  return props.user.id !== usersStore.userFromApi.id ? 'Close' : null
 })
+
+const removeMember = () => {
+  if (props.icon) {
+    emit('click')
+  }
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/people/UserCard.vue b/src/components/people/UserCard.vue
index fa678d43a..96a83a63d 100644
--- a/src/components/people/UserCard.vue
+++ b/src/components/people/UserCard.vue
@@ -12,17 +12,17 @@
     </template>
     <CroppedApiImage
       :alt="`${user.given_name} ${user.family_name} image`"
-      class="picture picture-user"
+      class="picture picture-user skeletons-image"
       :picture-data="user.profile_picture"
       picture-size="medium"
       :default-picture="DEFAULT_USER_PATATOID"
     />
     <div class="text text-limit">
-      <div class="card-type">
-        {{ userGroups }}
+      <div v-if="role" class="card-type badge w-fit skeletons-text">
+        {{ role }}
       </div>
-      <div class="card-title">{{ user.given_name }} {{ user.family_name }}</div>
-      <div class="card-description">
+      <div class="card-title skeletons-text">{{ user.given_name }} {{ user.family_name }}</div>
+      <div class="card-description skeletons-text">
         {{ translatedJob }}
       </div>
     </div>
@@ -46,6 +46,10 @@ const props = defineProps({
     type: [String, Object],
     default: null,
   },
+  role: {
+    type: String,
+    default: '',
+  },
   mode: {
     type: String,
     default: 'card', // 'card' or 'list'
@@ -60,11 +64,6 @@ const isPrivateUser = computed(() => {
   // Private users do not return an iD from API call
   return !props.user?.id
 })
-const userGroups = computed(() => {
-  // TODO: use first group name plus groups number (ex: "Staff (+4)")
-  // when data will be available in api
-  return ''
-})
 
 const mailTo = () => {
   document.location.href = 'mailto:' + props.user.email
@@ -82,4 +81,14 @@ const userAction = (event) => {
 .card-title {
   text-transform: capitalize;
 }
+
+.badge {
+  background: $primary-dark;
+  font-weight: 400;
+  font-size: $font-size-s;
+  margin-top: $space-s;
+  padding: $space-2xs;
+  color: $white;
+  border-radius: 10px;
+}
 </style>
diff --git a/src/components/project/ProjectHeader.vue b/src/components/project/ProjectHeader.vue
deleted file mode 100644
index a15a7400d..000000000
--- a/src/components/project/ProjectHeader.vue
+++ /dev/null
@@ -1,1372 +0,0 @@
-<template>
-  <div class="whole-content">
-    <div class="top-ctn">
-      <div class="breadcrumbs-ctn">
-        <BreadCrumbs :breadcrumbs="categoryHierarchy || []" />
-      </div>
-      <LinkButton
-        v-if="!loading && canEditProject"
-        :label="$t('project.edit')"
-        btn-icon="Pen"
-        data-test="header-project-button"
-        class="edit-btn"
-        @click="editProject"
-      />
-    </div>
-    <div :class="{ loading, moreInfo }" class="project-header-ctn">
-      <div class="img-position">
-        <div class="img-mobile-ctn">
-          <SkeletonComponent v-if="loading" height="100%" width="100%" />
-
-          <CroppedApiImage
-            v-if="!loading && project?.header_image?.variations"
-            ref="projectImg"
-            :picture-data="project.header_image"
-            picture-size="medium"
-            default-picture="/placeholders/header_placeholder.png"
-          />
-        </div>
-      </div>
-      <div class="content-ctn">
-        <div :class="{ 'has-sdg': sdgs?.length }" class="main-info-ctn">
-          <div class="img-block">
-            <div class="img-ctn">
-              <SkeletonComponent v-if="loading" height="100%" width="100%" />
-
-              <CroppedApiImage
-                v-if="!loading && project?.header_image?.variations"
-                ref="projectImg"
-                :picture-data="project.header_image"
-                picture-size="medium"
-                default-picture="/placeholders/header_placeholder.png"
-                :alt="`${project.title} image`"
-              />
-            </div>
-          </div>
-          <div class="text-content">
-            <SkeletonComponent v-if="loading" class="skeleton-block" height="42px" tag="h1" />
-            <div v-else class="title-block">
-              <h1 v-if="project && project.title" id="project-title" class="title">
-                {{ capitalizedTitle }}
-              </h1>
-              <IconImage
-                v-if="showFullTitleIcon"
-                class="icon title-chevron"
-                name="ChevronDown"
-                @click="showFullTitle = !showFullTitle"
-              />
-              <div v-if="project && project.title && showFullTitle" class="full-title-block">
-                <h1 v-if="project && project.title" class="full-title">
-                  {{ capitalizedTitle }}
-                </h1>
-
-                <IconImage
-                  class="icon icon-open title-chevron"
-                  name="ChevronUp"
-                  @click="showFullTitle = !showFullTitle"
-                />
-              </div>
-            </div>
-
-            <div class="tag-list-desktop">
-              <div v-if="loading" class="tag-ctn-skeleton">
-                <SkeletonComponent height="19px" width="50px" />
-                <SkeletonComponent height="19px" width="50px" />
-                <SkeletonComponent height="19px" width="50px" />
-              </div>
-
-              <TagsList
-                v-else-if="project?.tags?.length"
-                :tags="project.tags"
-                class="tag-list"
-                prefix="desktop"
-                :to="{
-                  name: 'ProjectSearch',
-                  query: {
-                    section: 'projects',
-                  },
-                }"
-              />
-            </div>
-            <SkeletonComponent v-if="loading" class="skeleton-block" height="24px" />
-            <div v-else-if="showPurposeWithEmptyContent" class="purpose-block">
-              <h4 v-if="project && project.purpose" id="project-purpose" class="purpose">
-                {{ capitalizedPurpose }}
-              </h4>
-              <IconImage
-                v-if="showFullPurposeIcon"
-                class="icon purpose-chevron"
-                name="ChevronDown"
-                @click="showFullPurpose = !showFullPurpose"
-              />
-              <div v-if="project && project.purpose && showFullPurpose" class="full-title-block">
-                <h4 v-if="project && project.purpose" class="full-purpose">
-                  {{ capitalizedPurpose }}
-                </h4>
-
-                <IconImage
-                  class="icon icon--open purpose-chevron"
-                  name="ChevronUp"
-                  @click="showFullPurpose = !showFullPurpose"
-                />
-              </div>
-            </div>
-            <div v-if="mobileScreen" class="tag-list-mobile">
-              <div v-if="loading" class="tag-ctn-skeleton">
-                <SkeletonComponent height="44px" width="100%" />
-              </div>
-
-              <TagsList
-                v-else-if="project?.tags?.length"
-                :tags="project.tags"
-                class="tag-list"
-                prefix="mobile"
-              />
-            </div>
-
-            <div class="visibility-desktop">
-              <div v-if="project && project.publication_status" class="visibility">
-                <InfoSentence
-                  :data="visibility"
-                  :no-centered="true"
-                  :all-plain="true"
-                  :black="true"
-                  size="medium"
-                  button-size="mbutton"
-                  :inline="true"
-                />
-              </div>
-            </div>
-
-            <div v-if="loading" class="sdg-ctn">
-              <SkeletonComponent border-radius="50%" height="30px" width="30px" />
-            </div>
-
-            <div v-show="!loading && sdgs?.length" class="sdg-ctn">
-              <TransitionGroup name="sdg" tag="div">
-                <NuxtLink
-                  v-for="sdg in sdgs || []"
-                  :key="sdg"
-                  :to="browseProjectsWithQuery('sdgs', sdg)"
-                  class="sdg-link"
-                >
-                  <img
-                    :alt="sdg"
-                    :src="`${runtimeConfig.public.appPublicBinariesPrefix}/sdgs/logo/SDG-${sdg}.svg`"
-                    class="sdg"
-                  />
-                </NuxtLink>
-              </TransitionGroup>
-            </div>
-
-            <div class="visibility-mobile">
-              <div v-if="project && project.publication_status" class="visibility">
-                <InfoSentence
-                  :data="visibility"
-                  :no-centered="true"
-                  :all-bold="true"
-                  size="medium"
-                  button-size="mbutton"
-                  :inline="true"
-                />
-              </div>
-            </div>
-          </div>
-
-          <div v-if="!loading" class="project-actions-ctn">
-            <div class="end-buttons">
-              <ExternalLabelButton
-                v-if="usersStore.isConnected"
-                class="space-button bg-on-hover"
-                :label="followed ? $t('project.followed') : $t('project.follow')"
-                :btn-icon="followed ? 'BookmarkFill' : 'BookmarkLine'"
-                vertical-layout
-                @click="toggleFollow"
-              />
-              <ExternalLabelButton
-                v-if="announcements?.length"
-                class="space-button article-button bg-on-hover"
-                :label="$t('group.news')"
-                btn-icon="Article"
-                vertical-layout
-                :nb-button="announcements.length.toString()"
-                @click="$emit('show-project-announcements')"
-              />
-              <ExternalLabelButton
-                class="space-button bg-on-hover"
-                :label="$t('comment.comment-verb')"
-                btn-icon="ChatBubble"
-                vertical-layout
-                @click="goToCommentView"
-              />
-              <ToolTip class="share-tip shadowed" placement="bottom" trigger="clickToOpen">
-                <template #custom-content>
-                  <div class="share-ctn">
-                    <button @click="facebookShare">
-                      <IconImage name="Facebook" />
-                    </button>
-                    <button @click="linkedinShare">
-                      <IconImage name="Linkedin" />
-                    </button>
-                  </div>
-                </template>
-                <ExternalLabelButton
-                  class="space-button bg-on-hover"
-                  :label="$t('group.share')"
-                  btn-icon="Share"
-                  vertical-layout
-                />
-              </ToolTip>
-              <ExternalLabelButton
-                v-if="moreInfo"
-                class="space-button bg-on-hover"
-                :label="$t('group.less')"
-                btn-icon="ChevronUp"
-                @click="displayLessInfo"
-              />
-              <ExternalLabelButton
-                v-else
-                id="more-info-btn"
-                class="space-button bg-on-hover"
-                :label="$t('group.more')"
-                btn-icon="ChevronDown"
-                @click="displayMoreInfo"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-      <div v-if="moreInfo" class="more-info-block">
-        <div class="vertical-line">
-          <InfoSentence
-            v-for="(info, index) in infoArray"
-            :key="index"
-            :data="info"
-            size="medium"
-            button-size="mbutton"
-            @similar="info.link"
-          />
-        </div>
-        <ExternalLabelButton
-          class="close-button"
-          :label="$t('header.close')"
-          btn-icon="Close"
-          reverse
-          @click="displayLessInfo"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { capitalize } from '@/functs/string'
-
-import SkeletonComponent from '@/components/base/loader/SkeletonComponent.vue'
-import LinkButton from '@/components/base/button/LinkButton.vue'
-import ExternalLabelButton from '@/components/base/button/ExternalLabelButton.vue'
-import IconImage from '@/components/base/media/IconImage.vue'
-import ToolTip from '@/components/base/ToolTip.vue'
-import CroppedApiImage from '@/components/base/media/CroppedApiImage.vue'
-import InfoSentence from '@/components/project/InfoSentence.vue'
-import followUtils from '@/functs/followUtils.ts'
-import BreadCrumbs from '@/components/base/navigation/BreadCrumbs.vue'
-import useOrganizationsStore from '@/stores/useOrganizations.ts'
-import useUsersStore from '@/stores/useUsers.ts'
-import TagsList from '@/components/tags/TagsList.vue'
-
-export default {
-  name: 'ProjectHeader',
-
-  components: {
-    SkeletonComponent,
-    ExternalLabelButton,
-    IconImage,
-    ToolTip,
-    TagsList,
-    CroppedApiImage,
-    InfoSentence,
-    LinkButton,
-    BreadCrumbs,
-  },
-
-  inject: ['projectLayoutToggleAddModal', 'projectLayoutGoToTab'],
-  props: {
-    project: {
-      type: Object,
-      default: () => ({}),
-    },
-
-    sdgs: {
-      type: Array,
-      default: () => [],
-    },
-
-    similarProjects: {
-      type: Array,
-      default: () => [],
-    },
-    loading: {
-      type: Boolean,
-      default: true,
-    },
-    announcements: {
-      type: Array,
-      default: () => [],
-    },
-    follow: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-
-  emits: ['show-project-announcements', 'update-follow'],
-  setup() {
-    const organizationsStore = useOrganizationsStore()
-    const usersStore = useUsersStore()
-    const runtimeConfig = useRuntimeConfig()
-    const { canEditProject } = usePermissions()
-    return {
-      organizationsStore,
-      usersStore,
-      runtimeConfig,
-      canEditProject,
-      capitalize,
-    }
-  },
-
-  data() {
-    return {
-      sharedUrl: window?.location?.origin,
-      imageAlertDismissed: false,
-      showFullTitle: false,
-      showFullPurpose: false,
-      showFullTitleIcon: false,
-      showFullPurposeIcon: false,
-      moreInfo: false,
-      plusButton: 0,
-    }
-  },
-
-  computed: {
-    showPurposeWithEmptyContent() {
-      return this.project && this.project.purpose !== '   ' && this.project.purpose.length !== 0
-    },
-
-    categoryForCurrentOrganization() {
-      return this.project?.categories?.find(
-        (category) => category.organization === this.organizationsStore.current.code
-      )
-    },
-
-    categoryHierarchy() {
-      return [
-        {
-          name: this.$t('home.home'),
-          route: { name: 'HomeRoot' },
-        },
-        {
-          name: this.$t('category.title'),
-          route: { name: 'Categories' },
-        },
-        ...(this.categoryForCurrentOrganization?.hierarchy || []).map((cat) => ({
-          name: cat.name,
-          route: { name: 'Category', params: { slugOrId: cat.slug || cat.id } },
-        })),
-        ...(this.categoryForCurrentOrganization
-          ? [
-              {
-                name: this.categoryForCurrentOrganization.name,
-                route: {
-                  name: 'Category',
-                  params: {
-                    slugOrId:
-                      this.categoryForCurrentOrganization.slug ||
-                      this.categoryForCurrentOrganization.id,
-                  },
-                },
-              },
-            ]
-          : []),
-      ]
-    },
-    similarProjectStr() {
-      let nb = this.similarProjects ? this.similarProjects.length : 0
-      let similarProjectsStr = ''
-      if (nb > 1) {
-        similarProjectsStr = 'header.similar-projects'
-      } else {
-        similarProjectsStr = 'header.similar-project'
-      }
-      let infos = ''
-      if (nb) {
-        infos = this.constructString(this.similarProjects, 'title', '/projects/', 'slug')
-      }
-
-      return {
-        icon: 'projects.svg',
-        number: nb + ' ',
-        title: similarProjectsStr,
-        info: infos,
-        cloud: true,
-        internal: true,
-        badge: true,
-      }
-    },
-
-    portals() {
-      let nb = this.project.organizations ? this.project.organizations.length : 0
-      let portalStrStart = 'header.portals-start'
-      let portalStrEnd = ''
-      if (nb > 1) {
-        portalStrEnd = 'header.portals-end-plural'
-      } else {
-        portalStrEnd = 'header.portals-end-singular'
-      }
-      let infos = null
-      if (this.project.organizations.length) {
-        infos = this.constructString(this.project.organizations, 'name', '', 'website_url')
-      }
-
-      return {
-        icon: 'Earth',
-        title: portalStrEnd,
-        number: ' ' + nb + ' ',
-        preTitle: portalStrStart,
-        info: infos,
-        internal: false,
-        badge: true,
-      }
-    },
-
-    views() {
-      let viewField = 'header.views'
-      let nbViews = this.project.views
-      let creationDate = 'header.creation'
-      let info2 = this.$d(new Date(this.project.created_at))
-      let updatedDate = 'header.update'
-      let info3 = this.$d(new Date(this.project.updated_at))
-      return {
-        icon: 'Poll',
-        title: viewField,
-        info1: [nbViews],
-        title2: creationDate,
-        info2: info2,
-        title3: updatedDate,
-        info3: info3,
-        type: 'views',
-        badge: false,
-      }
-    },
-    infoArray() {
-      let array = []
-      array.push(this.similarProjectStr)
-      array.push(this.portals)
-      array.push(this.views)
-      return array
-    },
-    visibility() {
-      let ret = ''
-      if (this.project.publication_status) {
-        let visibilityIcon = this.visibilityIcon()
-        let visibilityTitle = 'header.' + this.project.publication_status
-        ret = { icon: visibilityIcon, title: visibilityTitle }
-      }
-      return ret
-    },
-    screenWidth() {
-      return window?.innerWidth
-    },
-    mobileScreen() {
-      return this.screenWidth <= 768
-    },
-    capitalizedTitle() {
-      if (this.project && this.project.title) {
-        return this.project.title[0].toUpperCase() + this.project.title.slice(1)
-      }
-      return null
-    },
-    capitalizedPurpose() {
-      if (this.project && this.project.purpose) {
-        return this.project.purpose[0].toUpperCase() + this.project.purpose.slice(1)
-      }
-      return null
-    },
-    followed() {
-      return this.follow && this.follow.is_followed
-    },
-  },
-  watch: {
-    loading() {
-      this.setToggleIcon()
-    },
-  },
-
-  mounted() {
-    window.addEventListener('resize', this.setToggleIcon)
-    window.addEventListener('click', this.onClick)
-  },
-
-  unmounted() {
-    window.removeEventListener('resize', this.setToggleIcon)
-    window.removeEventListener('click', this.onClick)
-  },
-
-  methods: {
-    // TODO: wtf ?
-    onClick(e) {
-      if (this.plusButton > 0) {
-        this.plusButton += 1
-      }
-      let moreInfo = document.querySelector('.more-info-block')
-      if (
-        this.moreInfo &&
-        this.plusButton > 2 &&
-        moreInfo &&
-        (!moreInfo.contains(e.target) ||
-          (!e.target.closest('.tag-elt-show-more') &&
-            (e.target.closest('.tag-elt') || e.target.closest('.extra-tag-elt'))))
-      ) {
-        this.moreInfo = false
-        this.plusButton = 0
-      }
-    },
-    editProject() {
-      this.projectLayoutToggleAddModal('project')
-    },
-
-    setToggleIcon() {
-      this.$nextTick(() => {
-        const title = document.getElementById('project-title')
-        const purpose = document.getElementById('project-purpose')
-
-        this.showFullTitleIcon = title
-          ? title.scrollHeight > title.clientHeight || title.scrollHeight > title.clientHeight
-          : false
-
-        this.showFullPurposeIcon = purpose
-          ? purpose.scrollHeight > purpose.clientHeight ||
-            purpose.scrollHeight > purpose.clientHeight
-          : false
-      })
-    },
-
-    browseProjectsWithQuery(queryField, queryValue) {
-      return {
-        name: 'ProjectSearch',
-        query: {
-          [queryField]: queryValue,
-          section: 'projects',
-        },
-      }
-    },
-
-    async toggleFollow() {
-      try {
-        if (this.follow && this.follow.is_followed) {
-          await followUtils.unfollow({
-            follower_id: this.follow.follow_id,
-            project_id: this.project.id,
-          })
-          this.$emit('update-follow', { is_followed: false })
-        } else {
-          await followUtils.follow({
-            follower_id: this.usersStore.id,
-            project_id: this.project.id,
-          })
-          this.$emit('update-follow', {
-            follower_id: this.usersStore.id,
-            is_followed: true,
-          })
-        }
-      } catch (error) {
-        console.error('Error updating follow', error)
-      }
-    },
-
-    goToCommentView() {
-      this.projectLayoutGoToTab('comments')
-    },
-
-    displayMoreInfo() {
-      this.moreInfo = true
-      this.plusButton = 1
-    },
-
-    displayLessInfo() {
-      this.moreInfo = false
-      this.plusButton = 0
-    },
-
-    facebookShare() {
-      window?.open(`https://www.facebook.com/sharer/sharer.php?u=${this.sharedUrl}`)
-    },
-    // twitterShare() {
-    //     window?.open(`https://twitter.com/intent/tweet?url=${this.sharedUrl}&text=`)
-    // },
-    linkedinShare() {
-      window?.open(`https://www.linkedin.com/shareArticle?mini=true&url=${this.sharedUrl}`)
-    },
-
-    /* TODO: Put this back once we figured out to who are we supposed to write to */
-    // mailTo() {
-    //     window?.open('mailto:projects.platform@learningplanetinstitute.org')
-    // },
-
-    constructString(infos, field, prefix = '', link = null) {
-      let ret = []
-      for (let i = 0; i < infos.length; i++) {
-        let name = infos[i][field]
-        if (link) {
-          let direction = prefix.concat(infos[i][link])
-          ret.push({
-            name: name,
-            direction: direction,
-          })
-        } else {
-          ret.push(name)
-        }
-      }
-      return ret
-    },
-    visibilityIcon() {
-      const map = {
-        public: 'Eye',
-        private: 'EyeSlash',
-        org: 'PeopleGroup',
-      }
-      return map[this.project.publication_status] || ''
-    },
-  },
-}
-</script>
-
-<style lang="scss" scoped>
-:deep(.share-tip > div) {
-  display: flex;
-  justify-content: center;
-}
-
-:deep(.share-tip .trigger) {
-  text-align: right;
-}
-
-.whole-content {
-  display: block !important;
-}
-
-.top-ctn {
-  margin-top: $space-l;
-  padding-bottom: $space-l;
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-
-  @media screen and (max-width: $min-tablet) {
-    margin-bottom: $space-l;
-    margin-top: unset;
-  }
-
-  .edit-btn {
-    margin-left: auto;
-  }
-}
-
-.project-header-ctn {
-  position: relative;
-
-  .title-block,
-  .purpose-block {
-    display: flex;
-    flex-direction: row;
-    align-items: flex-end;
-    position: relative;
-  }
-
-  .title-block {
-    margin-top: pxToRem(16px);
-  }
-
-  .purpose-block {
-    margin-bottom: pxToRem(16px);
-  }
-
-  @media screen and (min-width: $min-tablet) {
-    .title-block {
-      margin-top: 10px;
-    }
-  }
-
-  @media screen and (max-width: $min-tablet) {
-    .title-block,
-    .purpose-block {
-      margin-top: 0;
-    }
-
-    .purpose-block {
-      margin-bottom: $space-l;
-    }
-
-    .close-button {
-      display: none;
-    }
-  }
-
-  .full-title-block {
-    position: absolute;
-    top: 0;
-    left: 0;
-    background-color: $white;
-    box-shadow: 0 0 6px rgb(0 0 0 / 15%);
-    border-radius: 16px;
-    padding: $space-m;
-    min-height: 90%;
-    display: flex;
-    align-items: center;
-    min-width: 100%;
-    z-index: 1;
-
-    .full-title {
-      font-weight: 700;
-      font-size: $font-size-xl;
-      line-height: $line-height-tight;
-    }
-  }
-
-  .full-purpose {
-    font-weight: 400;
-    font-size: $font-size-m;
-  }
-
-  .breadcrumb {
-    font-weight: 700;
-    font-size: 14px;
-    line-height: $line-height-compact;
-    color: $primary-dark;
-  }
-
-  .visibility {
-    font-weight: 700;
-    font-size: 14px;
-    line-height: $line-height-compact;
-    color: $primary-dark;
-  }
-
-  .visibility-desktop {
-    margin-bottom: 20px;
-  }
-
-  @media screen and (max-width: $min-tablet) {
-    .breadcrumb {
-      margin-bottom: 14px;
-    }
-
-    .visibility {
-      color: $primary-dark;
-    }
-  }
-
-  .img-block {
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: pxToRem(40px);
-
-    @media screen and (max-width: $min-tablet) {
-      padding: 0;
-    }
-  }
-
-  .img-mobile-ctn {
-    width: 260px;
-    height: 260px; // yes width of viewport so we get a square
-    margin-top: 30px;
-    margin-bottom: 30px;
-    background-color: $white;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    .cropped-image {
-      width: 100%;
-      height: 100%;
-      border-radius: $border-radius-l;
-    }
-
-    .organizations-grid {
-      position: absolute;
-      bottom: pxToRem(64px);
-      left: pxToRem(15px);
-    }
-  }
-
-  .img-ctn {
-    border-radius: $border-radius-l;
-    overflow: hidden;
-    height: 260px;
-    width: 260px;
-    background-color: $white;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    .cropped-image {
-      width: 100%;
-      height: 100%;
-    }
-
-    .organizations-grid {
-      position: absolute;
-      bottom: pxToRem(64px);
-      left: pxToRem(15px);
-    }
-  }
-
-  @media screen and (min-width: $min-tablet) {
-    .content-ctn .main-info-ctn {
-      display: flex;
-    }
-  }
-
-  @media screen and (min-width: $min-tablet) {
-    &:not(.loading) {
-      .content-ctn .main-info-ctn {
-        height: 100%;
-      }
-    }
-
-    .img-ctn {
-      display: flex;
-    }
-
-    .img-position,
-    .tag-list-mobile,
-    .more-info-block-mobile,
-    .visibility-mobile {
-      display: none;
-    }
-
-    .tag-list-desktop,
-    .more-info-block-desktop,
-    .visibility-desktop {
-      display: block;
-    }
-
-    .close-button {
-      display: inline-flex;
-    }
-  }
-
-  @media screen and (max-width: $min-tablet) {
-    .visibility-mobile {
-      display: block;
-    }
-  }
-
-  .content-ctn {
-    position: relative;
-    height: 100%;
-    width: 100%;
-
-    .main-info-ctn {
-      position: relative;
-      background: $white;
-
-      .text-content {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        flex-grow: 1;
-        padding-right: pxToRem(40px);
-
-        @media screen and (max-width: $min-tablet) {
-          padding: 0 pxToRem(40px);
-        }
-      }
-
-      @media screen and (min-width: $min-tablet) {
-        &.has-sdg {
-          padding-bottom: 0;
-        }
-      }
-
-      @media screen and (min-width: $min-tablet) {
-        border: $border-width-s solid $primary;
-        border-radius: $border-radius-l;
-      }
-
-      @media screen and (max-width: $min-tablet) {
-        border: none;
-      }
-
-      @media screen and (max-width: $min-tablet) {
-        padding-top: 0;
-      }
-
-      .overflowing-badges {
-        position: absolute;
-        top: pxToRem(-18px);
-        left: 50%;
-        transform: translateX(-50%);
-        display: flex;
-        align-items: center;
-
-        .quantity-text-badge {
-          border: $border-width-s solid $primary;
-          border-radius: $border-radius-l;
-          background: $white;
-          margin-left: pxToRem(20px);
-          display: flex;
-          align-items: center;
-          overflow: hidden;
-          color: $primary-dark;
-          font-weight: bold;
-          font-size: $font-size-xs;
-          text-transform: uppercase;
-          height: 37px;
-          box-sizing: border-box;
-
-          &.cursor-pointer {
-            cursor: pointer;
-          }
-
-          .quantity {
-            background: $primary;
-            color: $white;
-            height: 100%;
-            border-right: $border-width-s solid $primary;
-            padding: $space-xs $space-unit;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-          }
-
-          span {
-            padding: $space-xs $space-s;
-            white-space: nowrap;
-          }
-        }
-
-        .announcement-badge {
-          cursor: pointer;
-        }
-      }
-
-      .top-elements {
-        display: flex;
-        color: $primary-dark;
-        font-weight: 700;
-        font-size: $font-size-xs;
-
-        > div:not(:first-of-type) {
-          margin-left: 15px;
-        }
-      }
-
-      .title {
-        font-weight: 700;
-        font-size: $font-size-5xl;
-        line-height: $line-height-tight;
-        display: -webkit-box;
-        -webkit-line-clamp: 2;
-        -webkit-box-orient: vertical;
-        overflow: hidden;
-        width: 100%;
-      }
-
-      .purpose {
-        font-weight: 400;
-        font-size: $font-size-l;
-        display: -webkit-box;
-        -webkit-line-clamp: 3;
-        -webkit-box-orient: vertical;
-        overflow: hidden;
-        width: 100%;
-      }
-
-      .tag-ctn-skeleton {
-        margin: 0;
-        margin-top: $space-l;
-        display: flex;
-        flex-wrap: nowrap;
-        gap: $space-2xs;
-        overflow: hidden;
-      }
-
-      $sdg-size: pxToRem(38px);
-
-      .sdg-link {
-        width: $sdg-size;
-        height: $sdg-size;
-        display: inline-block;
-        transition: all 0.2s ease-in-out;
-
-        @media screen and (max-width: $min-tablet) {
-          margin-bottom: $space-l;
-        }
-
-        &:hover {
-          transform: translateZ(0) scale(1.2);
-        }
-      }
-
-      .sdg {
-        width: 100%;
-        height: 100%;
-      }
-
-      .sdg-enter-active,
-      .sdg-leave-active {
-        transition: transform 0.4s ease;
-        transform-origin: center center;
-        transform: translateZ(0) scale(1);
-      }
-
-      .sdg-enter-from,
-      .sdg-leave-to {
-        transform: translateZ(0) scale(0) translateY(200%);
-      }
-
-      .tag-list {
-        margin-top: $space-l;
-        margin-bottom: $space-l;
-
-        @media screen and (max-width: $min-tablet) {
-          margin-top: 0;
-          margin-bottom: 0;
-        }
-      }
-
-      .tag-list + .sdg-ctn {
-        margin-top: $space-l;
-      }
-
-      .sdg-ctn a:not(:first-of-type) {
-        margin-left: $space-m;
-      }
-    }
-
-    .project-actions-ctn {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      background: $primary-lighter;
-      border-radius: 0 $border-radius-l $border-radius-l 0;
-
-      @media screen and (max-width: $min-tablet) {
-        margin: 0 pxToRem(5px);
-      }
-
-      @media screen and (min-width: $min-tablet) {
-        align-items: center;
-      }
-
-      .end-buttons {
-        display: flex;
-        flex-direction: column;
-        justify-content: space-evenly;
-
-        .space-button {
-          margin-top: 15px;
-          margin-bottom: 15px;
-          width: 100%;
-        }
-
-        @media screen and (max-width: $min-tablet) {
-          margin-block: 0;
-        }
-
-        .article-button {
-          height: 50px;
-        }
-      }
-
-      button {
-        border: none;
-        background: none;
-      }
-
-      .share-ctn {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: $space-m;
-        z-index: 1;
-
-        svg {
-          width: 24px;
-          fill: $primary-dark;
-          cursor: pointer;
-        }
-      }
-    }
-
-    @media screen and (max-width: $min-tablet) {
-      .project-actions-ctn {
-        position: static;
-        flex-direction: row;
-        top: 0;
-        transform: translateY(0);
-        margin-top: 40px;
-        height: auto;
-        align-items: center;
-        border-radius: $border-radius-l;
-        border: $border-width-s solid $primary;
-        padding-inline: $space-l;
-        margin-bottom: $space-m;
-
-        .end-buttons {
-          flex-direction: row;
-          display: grid;
-          grid-template-columns: repeat(4, 1fr);
-
-          @media screen and (max-width: $max-mobile) {
-            grid-template-columns: repeat(2, 1fr);
-          }
-
-          width: 100%;
-
-          .space-button {
-            margin-right: 15px;
-            margin-left: 15px;
-          }
-
-          @media screen and (max-width: $min-tablet) {
-            .space-button {
-              margin-right: 5px;
-              margin-left: 5px;
-            }
-          }
-        }
-      }
-    }
-
-    @media screen and (min-width: $min-tablet) {
-      .project-actions-ctn {
-        padding-inline: 15px;
-      }
-    }
-
-    .contact-ctn {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      margin-top: $space-m;
-      padding-left: pxToRem(150px);
-
-      .right {
-        display: flex;
-        align-items: center;
-
-        .social-icon-ctn {
-          display: flex;
-          align-items: center;
-
-          > * {
-            height: 17px;
-            margin-right: 15px;
-            fill: $primary-dark;
-            cursor: pointer;
-          }
-        }
-      }
-
-      button {
-        text-transform: uppercase;
-      }
-    }
-  }
-}
-
-@media screen and (min-width: $min-tablet) {
-  .project-header-ctn {
-    z-index: 1;
-
-    &:not(.moreInfo) {
-      padding-bottom: $space-2xl;
-    }
-
-    .main-info-ctn {
-      .edit-btn-desktop {
-        display: flex;
-        position: absolute;
-        top: pxToRem(-15px);
-        right: pxToRem(20px);
-        z-index: 1;
-        background-color: $primary-dark;
-      }
-
-      .edit-btn-mobile {
-        display: none;
-      }
-    }
-  }
-}
-
-@media screen and (max-width: $min-tablet) {
-  .project-header-ctn {
-    .img-position {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-    }
-
-    .main-info-ctn {
-      .edit-btn-desktop {
-        display: none;
-      }
-
-      .edit-btn-mobile {
-        display: flex;
-        position: absolute;
-        top: pxToRem(-15px);
-        right: pxToRem(20px);
-        z-index: 1;
-        background-color: $primary-dark;
-      }
-    }
-  }
-}
-
-@media screen and (max-width: $min-tablet) {
-  .project-header-ctn {
-    .organizations-grid,
-    .content-ctn .main-info-ctn .overflowing-badges .quantity-text-badge,
-    .creation-date,
-    .content-ctn .contact-ctn .right .social-icon-ctn,
-    .tag-list-desktop,
-    .img-ctn,
-    .visibility-desktop {
-      display: none;
-    }
-
-    .content-ctn .main-info-ctn > h1 {
-      font-size: $font-size-4xl;
-    }
-
-    .tag-list-mobile {
-      display: block;
-      margin-bottom: $space-l;
-    }
-
-    .img-position {
-      display: flex;
-    }
-
-    .content-ctn {
-      left: 0;
-      padding: 0;
-      display: flex;
-      flex-flow: column wrap;
-      align-items: center;
-      margin-top: 0;
-
-      .main-info-ctn {
-        width: 100%;
-        box-sizing: border-box;
-        display: block;
-      }
-
-      .contact-ctn {
-        padding-left: 0;
-        justify-content: center;
-
-        .right {
-          margin-left: pxToRem(10px);
-        }
-      }
-    }
-  }
-}
-
-@media screen and (min-width: $min-tablet) {
-  h4.skeleton {
-    width: 400px;
-  }
-}
-
-@media screen and (min-width: $min-tablet) {
-  h4.skeleton {
-    width: 500px;
-  }
-}
-
-@media screen and (min-width: $min-desktop) {
-  h4.skeleton {
-    width: 700px;
-  }
-}
-
-.icon {
-  width: 24px;
-  fill: $white;
-  cursor: pointer;
-  border: 1px solid $primary-dark;
-  border-radius: 50%;
-  background-color: $primary-dark;
-
-  &--open {
-    position: absolute;
-    bottom: 8px;
-    right: 8px;
-  }
-
-  &.title-chevron {
-    margin-bottom: 10px;
-  }
-
-  &.purpose-chevron {
-    margin-bottom: 3px;
-  }
-}
-
-.skeleton-block {
-  margin-top: 12px;
-}
-
-.more-info-block {
-  background-color: $primary-lighter;
-  margin-top: -20px;
-  padding-top: 40px;
-  padding-left: 40px;
-  padding-bottom: 30px;
-  display: flex;
-  border-bottom-left-radius: $border-radius-l;
-  border-bottom-right-radius: $border-radius-l;
-
-  .vertical-line {
-    border-left: 6px solid $primary-dark;
-    display: flex;
-    flex-direction: column;
-    padding-left: 20px;
-    padding-right: 50px;
-    width: 80%;
-  }
-
-  .close-button {
-    height: 100%;
-    width: 20%;
-    padding-right: 25px;
-  }
-}
-
-@media screen and (max-width: $min-tablet) {
-  .more-info-block {
-    padding-inline: 20px;
-    width: 100%;
-    margin-bottom: 0;
-
-    .vertical-line {
-      padding-right: 0;
-      width: 100%;
-    }
-  }
-}
-
-@media screen and (min-width: $max-tablet) {
-  .tag-list-desktop {
-    display: block;
-  }
-}
-</style>
diff --git a/src/components/group/ProjectMemberSection/ProjectMemberSection.vue b/src/components/project/ProjectMemberSection/ProjectMemberSection.vue
similarity index 100%
rename from src/components/group/ProjectMemberSection/ProjectMemberSection.vue
rename to src/components/project/ProjectMemberSection/ProjectMemberSection.vue
diff --git a/src/components/project/ProjectPreview.vue b/src/components/project/ProjectPreview.vue
new file mode 100644
index 000000000..1cd6e3fa3
--- /dev/null
+++ b/src/components/project/ProjectPreview.vue
@@ -0,0 +1,114 @@
+<template>
+  <div class="project-preview">
+    <NuxtLink
+      class="project-link"
+      :to="{
+        name: 'projectSummary',
+        params: {
+          slugOrId: project.slug,
+        },
+      }"
+    >
+      <CroppedApiImage
+        :alt="`${project.$t.title} image`"
+        :picture-data="project.header_image"
+        picture-size="small"
+        class="skeletons-image"
+        :default-picture="DEFAULT_PROJECT_PATATOID"
+      />
+
+      <div class="project-info">
+        <h3 class="skeletons-text">{{ project.$t.title }}</h3>
+        <pre class="skeletons-text">{{ purpose }}</pre>
+        <TagsList
+          :tags="tags"
+          :to="{
+            name: 'ProjectSearch',
+            query: {
+              section: 'projects',
+            },
+          }"
+        />
+      </div>
+    </NuxtLink>
+    <div v-if="extra" class="project-extra">
+      <slot name="action">
+        <ProjectFollowIcon
+          class="icon skeletons-image"
+          :project="project"
+          @follow="emit('refresh')"
+          @unfollow="emit('refresh')"
+        />
+        <time class="skeletons-text" :datetime="project.updated_at">
+          {{ lastUpdated }}
+        </time>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import ProjectFollowIcon from '@/components/project/ProjectFollowIcon.vue'
+import TagsList from '@/components/tags/TagsList.vue'
+import { DEFAULT_PROJECT_PATATOID } from '@/composables/usePatatoids'
+import { cropIfTooLong } from '@/functs/string'
+import { TranslatedProject } from '@/models/project.model'
+
+const props = withDefaults(
+  defineProps<{
+    project: TranslatedProject
+    extra?: boolean
+  }>(),
+  { extra: false }
+)
+
+const emit = defineEmits(['refresh'])
+
+const { locale } = useNuxtI18n()
+const purpose = computed(() => cropIfTooLong(props.project.$t.purpose, 50))
+const tags = computed(() => (props.project.tags ?? []).slice(0, 3))
+const lastUpdated = computed(() => {
+  return new Date(props.project.updated_at).toLocaleDateString(locale.value)
+})
+</script>
+
+<style lang="scss" scoped>
+.project-preview {
+  display: grid;
+  grid-template-columns: 1fr 87px;
+  column-gap: 1rem;
+}
+
+.project-link {
+  display: grid;
+  grid-template-columns: 87px 1fr;
+  column-gap: 1rem;
+  transition: transform 0.2s;
+
+  &:hover {
+    transform: scale(102%);
+  }
+}
+
+.cropped-image {
+  border-radius: 10px;
+  height: 87px;
+}
+
+.project-info {
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+}
+
+.project-extra {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.icon {
+  width: 30px;
+}
+</style>
diff --git a/src/components/project/TeamSection.vue b/src/components/project/TeamSection.vue
index 3cccdf7f4..46b53f74b 100644
--- a/src/components/project/TeamSection.vue
+++ b/src/components/project/TeamSection.vue
@@ -21,8 +21,8 @@
         v-for="user in projectUsers"
         :key="user?.user.id"
         :role-label="roleLabel(user.role)"
-        :user="user.user"
-        @user-clicked="removeUser(user)"
+        :member="user.user"
+        @click="removeUser(user)"
       />
     </div>
 
@@ -133,12 +133,12 @@ export default {
 
     roleLabel(role) {
       if (role) {
-        if (role === 'owners') return 'role.editor'
-        else if (role === 'members') return 'role.teammate'
-        else if (role === 'reviewers') return 'role.reviewer'
-        else if (role === 'owner_groups') return 'role.editor-groups'
-        else if (role === 'reviewer_groups') return 'role.reviewer-groups'
-        else if (role === 'member_groups') return 'role.teammate-groups'
+        if (role === 'owners') return this.$t('role.editor')
+        else if (role === 'members') return this.$t('role.teammate')
+        else if (role === 'reviewers') return this.$t('role.reviewer')
+        else if (role === 'owner_groups') return this.$t('role.editor-groups')
+        else if (role === 'reviewer_groups') return this.$t('role.reviewer-groups')
+        else if (role === 'member_groups') return this.$t('role.teammate-groups')
       }
       return null
     },
diff --git a/src/composables/pdf-helpers/usePdfFooter.ts b/src/composables/pdf-helpers/usePdfFooter.ts
index 4c3d4f0ee..1b812e3a3 100644
--- a/src/composables/pdf-helpers/usePdfFooter.ts
+++ b/src/composables/pdf-helpers/usePdfFooter.ts
@@ -49,7 +49,7 @@ export default async function usePdfFooter(url?: string, title?: string) {
             height: 2cm;
             width: auto;
           }
- 
+
           .lpi-logo {
             right: .1cm;
             top: .1cm;
diff --git a/src/composables/project-pdf-components/addResourceSectionFactory.ts b/src/composables/project-pdf-components/addResourceSectionFactory.ts
index 223511c67..95e5a630a 100644
--- a/src/composables/project-pdf-components/addResourceSectionFactory.ts
+++ b/src/composables/project-pdf-components/addResourceSectionFactory.ts
@@ -60,7 +60,7 @@ export default async function addResourceSectionFactory(
             justify-content: stretch;
             break-inside: avoid;
           }
-          
+
           .resource-qr-code-ctn {
             width: 2cm;
             height: 2cm;
@@ -77,7 +77,7 @@ export default async function addResourceSectionFactory(
             width: 2cm;
             height: auto;
           }
-        
+
           .resource-wrapper .content {
             font-size:  1rem;
             flex-grow: 1;
diff --git a/src/composables/useAsyncPaginationAPI.ts b/src/composables/useAsyncPaginationAPI.ts
index d2a5dc0ce..854164296 100644
--- a/src/composables/useAsyncPaginationAPI.ts
+++ b/src/composables/useAsyncPaginationAPI.ts
@@ -59,7 +59,6 @@ export default function useAsyncPaginationAPI<DataT, Result = undefined>(
 ): AsyncPaginationcReturn<PaginationResult<DataT>, PaginationResult<DataT>, Result> {
   const paginationData = ref<PaginationResult>()
   const pagination = usePagination(paginationData, params[2]?.paginationConfig)
-
   // add paginations in query
   const key = computed(
     () => `${unref(params[0])}::${pagination.current.value}::${pagination.limit.value}`
diff --git a/src/composables/useAutoTranslate.ts b/src/composables/useAutoTranslate.ts
index 01adf5917..585c4b997 100644
--- a/src/composables/useAutoTranslate.ts
+++ b/src/composables/useAutoTranslate.ts
@@ -1,5 +1,11 @@
+import { GeneralLocationPeopleGroup, TranslatedPeopleGroupModel } from '@/models/invitation.model'
+import { TranslatedOrganizationModel } from '@/models/organization.model'
+import { TranslatedPeopleModel } from '@/models/people.model'
+import { TranslatedProject } from '@/models/project.model'
 import { AttachmentFileModel, TranslatedAttachmentFile } from '@/models/attachment-file.model'
 import { AttachmentLinkModel, TranslatedAttachmentLink } from '@/models/attachment-link.model'
+import { TranslatedDocument } from '@/interfaces/researcher'
+import { TranslatedLocation } from '@/models/location.model'
 
 // type can be computed or object
 type RefOrRaw<DataT> = ComputedRef<DataT> | Ref<DataT> | DataT
@@ -65,7 +71,7 @@ export default function useAutoTranslate() {
   // --------------------
   // Projects
   const translateProject = (project) => {
-    return computed(() => {
+    return computed<TranslatedProject>(() => {
       const unrefProject = unref(project)
       if (!unrefProject) return project
       return {
@@ -74,7 +80,8 @@ export default function useAutoTranslate() {
       }
     })
   }
-  const translateProjects = (projects) => translateEntities(projects, translateProject)
+  const translateProjects = (projects) =>
+    translateEntities<TranslatedProject>(projects, translateProject)
 
   const translateComment = (comment) => {
     const _comment = unref(comment)
@@ -113,8 +120,38 @@ export default function useAutoTranslate() {
   const translateGoal = (goal) => translateEntity(goal, ['title', 'description'])
   const translateGoals = (goals) => translateEntities(goals, translateGoal)
 
-  const translateLocation = (location) => translateEntity(location, ['title', 'description'])
-  const translateLocations = (locations) => translateEntities(locations, translateLocation)
+  const translateLocation = (location) =>
+    translateEntity<TranslatedLocation>(location, ['title', 'description'])
+  const translateLocations = (locations) =>
+    translateEntities<TranslatedLocation>(locations, translateLocation)
+
+  const translateProjectLocation = (location) => {
+    return computed<TranslatedLocation>(() => {
+      if (!location) {
+        return location
+      }
+      return {
+        ...unref(translateLocation(location)),
+        project: unref(translateProject(location.project)),
+      }
+    })
+  }
+  const translateProjectLocations = (Locations) =>
+    translateEntities<TranslatedLocation>(Locations, translateProjectLocation)
+
+  const translatePeopleGroupLocation = (location) => {
+    return computed<GeneralLocationPeopleGroup>(() => {
+      if (!location) {
+        return location
+      }
+      return {
+        ...unref(translateLocation(location)),
+        group: unref(translateGroup(location.group)),
+      }
+    })
+  }
+  const translatePeopleGroupLocations = (Locations) =>
+    translateEntities<GeneralLocationPeopleGroup>(Locations, translatePeopleGroupLocation)
 
   const translateProjectMessage = (message) => translateEntity(message, ['content'])
   const translateProjectMessages = (messages) =>
@@ -122,8 +159,10 @@ export default function useAutoTranslate() {
 
   // --------------------
   // People
-  const translateUser = (user) => translateEntity(user, ['description', 'short_description', 'job'])
-  const translateUsers = (users) => translateEntities(users, translateUser)
+  const translateUser = <Model = TranslatedPeopleModel>(user) =>
+    translateEntity<Model>(user, ['description', 'short_description', 'job'])
+  const translateUsers = <Model = TranslatedPeopleModel>(users) =>
+    translateEntities<Model>(users, translateUser)
 
   const translateTeam = (team) =>
     computed(() => {
@@ -144,19 +183,33 @@ export default function useAutoTranslate() {
   // -----------------
   // groups
   const translateGroup = (group) =>
-    translateEntity(group, ['name', 'description', 'short_description'])
-  const translateGroups = (groups) => translateEntities(groups, translateGroup)
+    computed(() => {
+      const _group = unref(
+        translateEntity<TranslatedPeopleGroupModel>(group, [
+          'name',
+          'description',
+          'short_description',
+        ])
+      )
+      return {
+        ..._group,
+        location: _group?.location ? unref(translateLocation(_group.location)) : null,
+      }
+    })
+  const translateGroups = (groups) =>
+    translateEntities<TranslatedPeopleGroupModel>(groups, translateGroup)
 
   // orgs
   const translateOrganization = (org) =>
-    translateEntity(org, [
+    translateEntity<TranslatedOrganizationModel>(org, [
       'name',
       'dashboard_title',
       'dashboard_subtitle',
       'description',
       'chat_button_text',
     ])
-  const translateOrganizations = (orgs) => translateEntities(orgs, translateOrganization)
+  const translateOrganizations = (orgs) =>
+    translateEntities<TranslatedOrganizationModel>(orgs, translateOrganization)
 
   const translateTemplate = (template) => {
     const _template = unref(template)
@@ -237,9 +290,10 @@ export default function useAutoTranslate() {
     researcher document
   */
 
-  const translateResearcherDocument = (data) => translateEntity(data, ['title', 'description'])
+  const translateResearcherDocument = (data) =>
+    translateEntity<TranslatedDocument>(data, ['title', 'description'])
   const translateResearcherDocuments = (datas) =>
-    translateEntities(datas, translateResearcherDocument)
+    translateEntities<TranslatedDocument>(datas, translateResearcherDocument)
 
   return {
     isAutoTranslateActivated,
@@ -268,6 +322,9 @@ export default function useAutoTranslate() {
     translateProjectMessage,
     translateProjectMessages,
 
+    translateProjectLocation,
+    translateProjectLocations,
+
     // people
     translateUser,
     translateUsers,
@@ -279,6 +336,8 @@ export default function useAutoTranslate() {
     // groups
     translateGroup,
     translateGroups,
+    translatePeopleGroupLocation,
+    translatePeopleGroupLocations,
 
     // org
     translateOrganization,
diff --git a/src/composables/useGroupMembersUpdate.ts b/src/composables/useGroupMembersUpdate.ts
index b4bece57a..a0091388a 100644
--- a/src/composables/useGroupMembersUpdate.ts
+++ b/src/composables/useGroupMembersUpdate.ts
@@ -95,8 +95,12 @@ export default function useGroupMembersUpdate(orgCode, groupId, form) {
       }
       await postGroupMembers(orgCode.value, groupId, payloadMembers)
     }
-
     isSaving.value = false
+
+    return {
+      removed: membersToRemove.length + leadersToRemove.length + managersToRemove.length,
+      added: membersToAdd.length + leadersToAdd.length + managersToAdd.length,
+    }
   }
 
   return { groupMemberData, isSaving, setMembersData, updateGroupMembers }
diff --git a/src/composables/useGroupProjectsUpdate.ts b/src/composables/useGroupProjectsUpdate.ts
index 8a66abe30..17b52fc83 100644
--- a/src/composables/useGroupProjectsUpdate.ts
+++ b/src/composables/useGroupProjectsUpdate.ts
@@ -4,12 +4,20 @@ export default function useGroupProjectsUpdate(orgCode, groupId, form) {
   const groupProjectData = ref(null)
 
   const isSaving = ref(false)
+  const isLoading = ref(false)
+
+  const { translateProjects } = useAutoTranslate()
 
   const setProjectsData = async () => {
+    isLoading.value = true
     const _groupProjectData = (await getGroupProject(orgCode.value, groupId)).results
+    const _translatedGroupProjectData = translateProjects(_groupProjectData)
 
-    groupProjectData.value = _groupProjectData.map((project) => ({ ...project })) // mapping and destructiring to avoid updating both arrays/object at the same time
-    form.value.featuredProjects = _groupProjectData.map((project) => ({ ...project })) // this.groupProjectData  will serve as reference for add/delete ops
+    groupProjectData.value = _translatedGroupProjectData.value.map((project) => ({ ...project })) // mapping and destructiring to avoid updating both arrays/object at the same time
+    form.value.featuredProjects = _translatedGroupProjectData.value.map((project) => ({
+      ...project,
+    })) // this.groupProjectData  will serve as reference for add/delete ops
+    isLoading.value = false
   }
 
   const updateGroupProjects = async () => {
@@ -47,7 +55,12 @@ export default function useGroupProjectsUpdate(orgCode, groupId, form) {
       await removeGroupProject(orgCode.value, groupId, payloadProjects as any)
     }
     isSaving.value = false
+
+    return {
+      removed: projectsToRemove.length,
+      added: projectsToAdd.length,
+    }
   }
 
-  return { groupProjectData, isSaving, setProjectsData, updateGroupProjects }
+  return { groupProjectData, isSaving, setProjectsData, updateGroupProjects, isLoading }
 }
diff --git a/src/composables/useLpiHead.ts b/src/composables/useLpiHead.ts
index 572ad5117..565d7c9ae 100644
--- a/src/composables/useLpiHead.ts
+++ b/src/composables/useLpiHead.ts
@@ -1,6 +1,9 @@
 import useNuxtI18n from '@/composables/useNuxtI18n'
+import { RefOrRaw } from '@/interfaces/utils'
+import { Image } from '@/models/image.model'
+import useOrganizationsStore from '@/stores/useOrganizations'
 
-export default (url, _title, _description, image, dimensions = null) => {
+const useLpiHead = (url, _title, _description, image, dimensions = null) => {
   const runtimeConfig = useRuntimeConfig()
   const { locale } = useNuxtI18n()
 
@@ -115,3 +118,49 @@ export default (url, _title, _description, image, dimensions = null) => {
 
   watch(() => [locale.value], setHead)
 }
+
+export default useLpiHead
+
+type OptionsHead = {
+  url?: RefOrRaw<string>
+  title?: RefOrRaw<string>
+  image?: Image
+  description?: RefOrRaw<string>
+}
+
+/**
+ * default value for useLpiHead
+ *
+ * @function
+ * @name useLpiHead2
+ * @kind variable
+ * @param {OptionsHead} options
+ * @returns {void}
+ * @exports
+ */
+export const useLpiHead2 = async (options: OptionsHead) => {
+  // TODO(remi): remove try/catch
+
+  const store = useOrganizationsStore()
+  try {
+    const organization = await store.getOrFetchOrganization()
+    const url = options.url ?? useRequestURL().toString()
+    const title = options.title ?? organization?.$t.name ?? ''
+    const description = options.description ?? organization?.$t.description ?? ''
+
+    let [image, dimensions] = [null, null]
+    if (typeof options.image === 'object') {
+      const tmp = useImageAndDimension(options.image, 'medium')
+      image = tmp.image
+      dimensions = tmp.dimensions
+    } else {
+      const tmp = useImageAndDimension(organization?.banner_image, 'medium')
+      image = tmp.image
+      dimensions = tmp.dimensions
+    }
+
+    useLpiHead(url, title, description, image, dimensions)
+  } catch (e) {
+    console.error(e)
+  }
+}
diff --git a/src/design/scss/map.scss b/src/design/scss/map.scss
index f42470ce0..c58aa3a12 100644
--- a/src/design/scss/map.scss
+++ b/src/design/scss/map.scss
@@ -51,6 +51,10 @@
       border-color: $location-team;
     }
 
+    &.address {
+      border-color: $location-address;
+    }
+
     &__dot {
       width: 20px;
       height: 20px;
@@ -65,6 +69,10 @@
       &.team {
         background: $location-team;
       }
+
+      &.address {
+        background: $location-address;
+      }
     }
 
     &__label {
@@ -130,6 +138,10 @@
       &.team {
         background: $location-team;
       }
+
+      &.address {
+        background: $location-address;
+      }
     }
   }
 
@@ -277,6 +289,10 @@
         background-color: $location-impact;
       }
 
+      &.address svg {
+        background-color: $location-address;
+      }
+
       &:last-child {
         margin-right: 0.4rem;
       }
diff --git a/src/design/scss/variables.scss b/src/design/scss/variables.scss
index f3b919e79..9fc2e4ca1 100644
--- a/src/design/scss/variables.scss
+++ b/src/design/scss/variables.scss
@@ -114,6 +114,7 @@ $card_height: pxToRem(260px);
 // LOCATION
 $location-impact: $primary;
 $location-team: $violet;
+$location-address: $blue;
 
 :root {
   --primary: #{$primary};
diff --git a/src/form/gallery.ts b/src/form/gallery.ts
new file mode 100644
index 000000000..97a4997cc
--- /dev/null
+++ b/src/form/gallery.ts
@@ -0,0 +1,20 @@
+import { required } from '@vuelidate/validators'
+import useForm from '@/composables/useForm'
+import { clone } from 'es-toolkit'
+import { ImageGalleryForm } from '@/interfaces/gallery'
+
+const DEFAULT_FORM: ImageGalleryForm = {
+  files: null,
+}
+
+const RULES = {
+  files: { required },
+}
+
+export const useGalleryImageForm = (options = {}) => {
+  return useForm<ImageGalleryForm>({
+    default: clone(DEFAULT_FORM),
+    rules: clone(RULES),
+    ...options,
+  })
+}
diff --git a/src/form/location.ts b/src/form/location.ts
index d7aa4a0f8..f7a642a22 100644
--- a/src/form/location.ts
+++ b/src/form/location.ts
@@ -6,7 +6,7 @@ import { LocationForm } from '@/models/location.model'
 const DEFAULT_FORM: LocationForm = {
   lat: null,
   lng: null,
-  type: 'team',
+  type: 'address',
   title: '',
   description: '',
 }
diff --git a/src/functs/IconImage.ts b/src/functs/IconImage.ts
index 62cec3161..fff15c3ef 100644
--- a/src/functs/IconImage.ts
+++ b/src/functs/IconImage.ts
@@ -100,10 +100,13 @@ export const ICONS = {
   Upload: `<path d="M9,16V10H5L12,3L19,10H15V16H9M5,20V18H19V20H5Z" />`,
   Users: `<path d="M12,5.5A3.5,3.5 0 0,1 15.5,9A3.5,3.5 0 0,1 12,12.5A3.5,3.5 0 0,1 8.5,9A3.5,3.5 0 0,1 12,5.5M5,8C5.56,8 6.08,8.15 6.53,8.42C6.38,9.85 6.8,11.27 7.66,12.38C7.16,13.34 6.16,14 5,14A3,3 0 0,1 2,11A3,3 0 0,1 5,8M19,8A3,3 0 0,1 22,11A3,3 0 0,1 19,14C17.84,14 16.84,13.34 16.34,12.38C17.2,11.27 17.62,9.85 17.47,8.42C17.92,8.15 18.44,8 19,8M5.5,18.25C5.5,16.18 8.41,14.5 12,14.5C15.59,14.5 18.5,16.18 18.5,18.25V20H5.5V18.25M0,20V18.5C0,17.11 1.89,15.94 4.45,15.6C3.86,16.28 3.5,17.22 3.5,18.25V20H0M24,20H20.5V18.25C20.5,17.22 20.14,16.28 19.55,15.6C22.11,15.94 24,17.11 24,18.5V20Z" />`,
   VipCrownLine: `<path d="M2.00488 19H22.0049V21H2.00488V19ZM2.00488 5L7.00488 8.5L12.0049 2L17.0049 8.5L22.0049 5V17H2.00488V5ZM4.00488 8.84131V15H20.0049V8.84131L16.5854 11.2349L12.0049 5.28024L7.42435 11.2349L4.00488 8.84131Z" />`,
+  nodeTree: `<path d="M10 2C10.5523 2 11 2.44772 11 3V7C11 7.55228 10.5523 8 10 8H8V10H13V9C13 8.44772 13.4477 8 14 8H20C20.5523 8 21 8.44772 21 9V13C21 13.5523 20.5523 14 20 14H14C13.4477 14 13 13.5523 13 13V12H8V18H13V17C13 16.4477 13.4477 16 14 16H20C20.5523 16 21 16.4477 21 17V21C21 21.5523 20.5523 22 20 22H14C13.4477 22 13 21.5523 13 21V20H7C6.44772 20 6 19.5523 6 19V8H4C3.44772 8 3 7.55228 3 7V3C3 2.44772 3.44772 2 4 2H10ZM19 18H15V20H19V18ZM19 10H15V12H19V10ZM9 4H5V6H9V4Z"></path>`,
   CurrentPosition: `<path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 1a1 1 0 0 1 1 1v1.055a9.004 9.004 0 0 1 7.946 7.945h1.054a1 1 0 0 1 0 2h-1.055a9.004 9.004 0 0 1 -7.944 7.945l-.001 1.055a1 1 0 0 1 -2 0v-1.055a9.004 9.004 0 0 1 -7.945 -7.944l-1.055 -.001a1 1 0 0 1 0 -2h1.055a9.004 9.004 0 0 1 7.945 -7.945v-1.055a1 1 0 0 1 1 -1m0 4a7 7 0 1 0 0 14a7 7 0 0 0 0 -14m0 3a4 4 0 1 1 -4 4l.005 -.2a4 4 0 0 1 3.995 -3.8" />`,
   Sun: '<path d="M12 18C8.68629 18 6 15.3137 6 12C6 8.68629 8.68629 6 12 6C15.3137 6 18 8.68629 18 12C18 15.3137 15.3137 18 12 18ZM12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16ZM11 1H13V4H11V1ZM11 20H13V23H11V20ZM3.51472 4.92893L4.92893 3.51472L7.05025 5.63604L5.63604 7.05025L3.51472 4.92893ZM16.9497 18.364L18.364 16.9497L20.4853 19.0711L19.0711 20.4853L16.9497 18.364ZM19.0711 3.51472L20.4853 4.92893L18.364 7.05025L16.9497 5.63604L19.0711 3.51472ZM5.63604 16.9497L7.05025 18.364L4.92893 20.4853L3.51472 19.0711L5.63604 16.9497ZM23 11V13H20V11H23ZM4 11V13H1V11H4Z"></path>',
   HandClick:
     '<path d="M9.49983 0.5C10.8804 0.500214 11.9998 1.61942 11.9998 3V6.80273C12.555 6.60536 13.1777 6.56765 13.8026 6.74121L18.8026 8.12988C20.1008 8.49069 20.9998 9.67301 20.9998 11.0205V15.501C20.9994 19.6427 17.6415 23.0008 13.4998 23.001C11.0416 23.001 9.17132 22.3082 7.68342 21.002C6.23362 19.7289 5.22494 17.938 4.33381 15.9014C3.40397 13.7762 2.88937 12.4806 2.6092 11.7236C2.25279 10.7598 2.7463 9.41299 4.08577 9.31934L4.33381 9.30859C5.38149 9.29414 6.27675 9.66016 6.99983 10.2598V3C6.99983 1.61929 8.11912 0.5 9.49983 0.5ZM9.49983 2.5C9.22369 2.5 8.99983 2.72386 8.99983 3V14H8.00471L7.01936 14.1973C6.67148 12.4577 5.68476 11.4506 4.59748 11.3252C4.88153 12.0703 5.36224 13.2629 6.16584 15.0996C7.02454 17.0621 7.89139 18.5224 9.00374 19.499C10.0782 20.4421 11.4587 21.001 13.4998 21.001C16.537 21.0008 18.9994 18.538 18.9998 15.501V11.0205C18.9998 10.5714 18.7001 10.177 18.2674 10.0566L13.2674 8.66797C12.6304 8.49101 12.0001 8.96976 11.9998 9.63086V11H9.99983V3C9.99983 2.72397 9.77581 2.50019 9.49983 2.5Z"></path>',
+  Gallery:
+    '<path d="M7 3C6.44772 3 6 3.44772 6 4V7H3C2.44772 7 2 7.44772 2 8V20C2 20.5523 2.44772 21 3 21H17C17.5523 21 18 20.5523 18 20V17H21C21.5523 17 22 16.5523 22 16V4C22 3.44772 21.5523 3 21 3H7ZM17 7H8V5H20V15H18V8C18 7.44772 17.5523 7 17 7ZM16 9V15.7394L11.4911 11.6404L4 18.6321V9H16ZM11.5089 14.3596L16 18.4424V19H6.53702L11.5089 14.3596ZM7 13.5C7.82843 13.5 8.5 12.8284 8.5 12C8.5 11.1716 7.82843 10.5 7 10.5C6.17157 10.5 5.5 11.1716 5.5 12C5.5 12.8284 6.17157 13.5 7 13.5Z"></path>',
 } as const
 
 export type IconImageChoice = keyof typeof ICONS
diff --git a/src/functs/followUtils.ts b/src/functs/followUtils.ts
index 6b0660ba1..e75ea07f0 100644
--- a/src/functs/followUtils.ts
+++ b/src/functs/followUtils.ts
@@ -3,7 +3,6 @@ import {
   FollowOutput,
   FollowCategoryInput,
   UnfollowCategoryInput,
-  FollowProjectOutput,
 } from '@/models/follow.model'
 import { deleteFollow, postFollow, postFollowMany } from '@/api/follows.service'
 import {
@@ -13,7 +12,7 @@ import {
 } from '@/api/project-categories.service'
 import analytics from '@/analytics'
 
-async function follow(follow: FollowInput): Promise<FollowProjectOutput> {
+async function follow(follow: FollowInput) {
   const result = await postFollow(follow)
 
   analytics.follow.follow({
diff --git a/src/functs/imageSizesUtils.ts b/src/functs/imageSizesUtils.ts
index 1c2ec9a31..ce4f7d955 100644
--- a/src/functs/imageSizesUtils.ts
+++ b/src/functs/imageSizesUtils.ts
@@ -1,3 +1,5 @@
+import { ImageModel } from '@/models/image.model'
+
 export type ImageSizes = {
   scaleX: number
   scaleY: number
@@ -87,3 +89,48 @@ export function imageSizesFormDataPost(formData: FormData, imageSizes: ImageSize
   }
   _imageSizesFormData(formData, imageSizes, keyMap)
 }
+
+/**
+ * convert url object to imageModel
+ *
+ * @function
+ * @name urlToImageModel
+ * @kind variable
+ * @param {File} file
+ * @returns {ImageModel}
+ * @exports
+ */
+export const urlToImageModel = (url: string): ImageModel => {
+  return {
+    url,
+    name: '',
+    file: null,
+    variations: {
+      large: url,
+      full: url,
+      medium: url,
+      small: url,
+      original: url,
+    },
+    scale_x: 0,
+    scale_y: 0,
+    left: 0,
+    top: 0,
+    natural_ratio: 0,
+  }
+}
+
+/**
+ * convert file object (from input) to imageModel
+ *
+ * @function
+ * @name fileToImageModel
+ * @kind variable
+ * @param {File} file
+ * @returns {ImageModel}
+ * @exports
+ */
+export const fileToImageModel = (file: File): ImageModel => {
+  const url = URL.createObjectURL(file)
+  return urlToImageModel(url)
+}
diff --git a/src/functs/maps.ts b/src/functs/maps.ts
index 8e3bc03ef..dde25a1d7 100644
--- a/src/functs/maps.ts
+++ b/src/functs/maps.ts
@@ -7,5 +7,7 @@ export const IconMapLocationType = (locationType: LocationType): IconImageChoice
       return 'Sun'
     case 'team':
       return 'Users'
+    case 'address':
+      return 'Home'
   }
 }
diff --git a/src/i18n/locales/ca.json b/src/i18n/locales/ca.json
index 40468be64..fa0b011cd 100644
--- a/src/i18n/locales/ca.json
+++ b/src/i18n/locales/ca.json
@@ -1006,7 +1006,14 @@
         "label": "Editor",
         "help": "Editor"
       }
-    }
+    },
+    "view": "Visualitza el grup",
+    "conferences": "Conferèncias",
+    "publications": "Publicacions",
+    "similars": "Grups similars",
+    "locations": "Ubicacions",
+    "presentation": "Presentació",
+    "location": "Adreça"
   },
   "header": {
     "private": "Privat: només visible per als membres de l' equip",
@@ -1060,13 +1067,13 @@
   },
   "location": {
     "loading": "S' estan carregant les localitzacions",
-    "impact": "Impacte",
-    "team": "Equip",
-    "address": "Adreça",
     "focus-on-map": "Centra't en el mapa",
     "expand-map": "Augmenta el mapa",
     "edit-location-point": "Edita el punt de localització",
     "location-type-label": "Tipus d' emplaçament",
+    "impact": "Impacte",
+    "team": "Equip",
+    "address": "Adreça",
     "edit-map": "Edita geolocalització",
     "map": "Geolocalització",
     "add-location": "Afegeix una ubicació",
@@ -3139,6 +3146,19 @@
     "approve-title": "Si us plau, aprova els Termes i Condicions",
     "approve-button": "Accepto"
   },
+  "gallery": {
+    "title": "Galeria",
+    "view": "Veure la galeria.",
+    "delete": "Esborra la imatge.",
+    "add": "Afegeix fotografies",
+    "add-picture": "Seleccioneu una o més fotos a enviar.",
+    "confirm-delete": "Esteu segur que voleu esborrar aquesta imatge?",
+    "success-delete": "S' ha esborrat la imatge.",
+    "error-delete": "Hi ha hagut un error en esborrar la imatge.",
+    "success-create": "Imatge creada.",
+    "error-create": "S' ha creat un error.",
+    "empty": "No hi ha fotos fixades."
+  },
   "pagination": {
     "previous": "Pàgina anterior",
     "next": "Pàgina següent",
diff --git a/src/i18n/locales/de.json b/src/i18n/locales/de.json
index 7b9f7406c..065b57f90 100644
--- a/src/i18n/locales/de.json
+++ b/src/i18n/locales/de.json
@@ -1006,7 +1006,14 @@
         "label": "Herausgeber",
         "help": "Teammitglieder"
       }
-    }
+    },
+    "view": "Gruppe anzeigen",
+    "conferences": "Konferenzen",
+    "publications": "Veröffentlichungen",
+    "similars": "Gruppen ähnliche",
+    "locations": "Standorte",
+    "presentation": "Präsentation",
+    "location": "Anschrift"
   },
   "header": {
     "private": "Private: nur für Teammitglieder sichtbar",
@@ -1064,19 +1071,19 @@
     "expand-map": "Karte vergrößern",
     "edit-location-point": "Standortpunkt bearbeiten",
     "location-type-label": "Standort",
+    "impact": "Auswirkungen",
+    "team": "Team",
+    "address": "Anschrift",
     "edit-map": "Geolokation bearbeiten",
     "map": "Standort",
     "add-location": "Standort hinzufügen",
     "add-location-point": "Einen Ortspunkt hinzufügen",
-    "default-title": "Standort",
-    "impact": "Auswirkungen",
-    "team": "Team",
-    "address": "Anschrift"
+    "default-title": "Standort"
   },
   "map": {
-    "empty": "Nichts hier noch... Die Mitarbeiter haben noch keine Projekte lokalisiert.",
     "page-title": "Landkarte",
-    "projects": "Projekte Landkarte"
+    "projects": "Projekte Landkarte",
+    "empty": "Noch nichts hier... Die Mitarbeiter haben noch keine Punkte lokalisiert."
   },
   "me": {
     "follow": "Projekte, die ich folge",
@@ -3139,6 +3146,19 @@
     "approve-title": "Bitte akzeptieren Sie die Nutzungsbedingungen",
     "approve-button": "Ich akzeptiere"
   },
+  "gallery": {
+    "title": "Galerie",
+    "view": "Galerie anzeigen.",
+    "delete": "Bild löschen.",
+    "add": "Bilder hinzufügen",
+    "add-picture": "Bitte wählen Sie ein oder mehrere Fotos, um zu senden.",
+    "confirm-delete": "Sind Sie sicher, dass Sie dieses Bild löschen möchten?",
+    "success-delete": "Bild gelöscht.",
+    "error-delete": "Ein Fehler beim Löschen des Bildes.",
+    "success-create": "Bild erstellt.",
+    "error-create": "Ein Fehler wurde erstellt.",
+    "empty": "Keine Bilder."
+  },
   "pagination": {
     "previous": "Vorherige Seite",
     "next": "Nächste Seite",
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index 218cd27e0..1dae19d03 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -919,16 +919,23 @@
     "is-other-org": "This group belongs to another platform",
     "contact": "Contact",
     "edit-group": "Edit group",
+    "presentation": "Presentation",
     "see-more-people-button": "See {users} more",
     "see-subgroups": "See {count} subgroup | See {count} subgroups",
+    "subgroups": "Subgroup | Subgroups",
+    "conferences": "Conferences",
+    "publications": "Publications",
+    "similars": "Groups similars",
+    "locations": "Locations",
+    "location": "Address",
     "share": "Share",
     "the-team": "The team ({users})",
     "news": "Announcements",
     "more": "More",
     "less": "Less",
+    "view": "View group",
     "see-more": "See more",
     "see-less": "See less",
-    "subgroups": "SUBGROUPS",
     "snapshot": "Snapshot",
     "members": "Members",
     "projects": "Projects",
@@ -1078,6 +1085,19 @@
     "page-title": "Map",
     "projects": "projects map"
   },
+  "gallery": {
+    "title": "Gallery",
+    "view": "View gallery.",
+    "delete": "Delete picture.",
+    "add": "Add pictures",
+    "empty": "No pictures set.",
+    "add-picture": "Please select one or more photos to send.",
+    "confirm-delete": "Are you sure you want to delete this picture?",
+    "success-delete": "Picture deleted.",
+    "error-delete": "An error occured deleting picture.",
+    "success-create": "Picture created.",
+    "error-create": "An error occured created picture."
+  },
   "me": {
     "follow": "Projects I follow",
     "follow-category": "Categories I follow",
diff --git a/src/i18n/locales/es.json b/src/i18n/locales/es.json
index 093ece6a5..513e8d730 100644
--- a/src/i18n/locales/es.json
+++ b/src/i18n/locales/es.json
@@ -1006,7 +1006,14 @@
         "label": "Editor",
         "help": "Editor"
       }
-    }
+    },
+    "view": "Ver grupo",
+    "conferences": "Conferencias",
+    "publications": "Publicaciones",
+    "similars": "Grupos similares",
+    "locations": "Lugares",
+    "presentation": "Presentación",
+    "location": "Dirección"
   },
   "header": {
     "private": "Privada: visible sólo a los miembros del equipo",
@@ -3139,6 +3146,19 @@
     "approve-title": "Por favor, apruebe los Términos y Condiciones",
     "approve-button": "Acepto"
   },
+  "gallery": {
+    "title": "Galería",
+    "view": "Ver galería.",
+    "delete": "Borrar la imagen.",
+    "add": "Agregar fotos",
+    "add-picture": "Por favor, seleccione una o más fotos para enviar.",
+    "confirm-delete": "¿Seguro que quieres borrar esta foto?",
+    "success-delete": "Imagen borrada.",
+    "error-delete": "Se produjo un error borrando la imagen.",
+    "success-create": "Imagen creada.",
+    "error-create": "Un error ocurrió imagen creada.",
+    "empty": "No hay fotos."
+  },
   "pagination": {
     "previous": "Página anterior",
     "next": "Página siguiente",
diff --git a/src/i18n/locales/et.json b/src/i18n/locales/et.json
index 0b0334025..0daf07f99 100644
--- a/src/i18n/locales/et.json
+++ b/src/i18n/locales/et.json
@@ -1006,7 +1006,14 @@
         "label": "Toimetaja",
         "help": "Toimetaja"
       }
-    }
+    },
+    "view": "Vaade grupp",
+    "conferences": "Konverentsid",
+    "publications": "Trükised",
+    "similars": "Rühmad sarnased",
+    "locations": "Asukohad",
+    "presentation": "Esitlus",
+    "location": "Aadress"
   },
   "header": {
     "private": "Privaatne: nähtav ainult meeskonnaliikmetele",
@@ -3139,6 +3146,19 @@
     "approve-title": "Palun kinnitage teenusetingimused",
     "approve-button": "Nõustun"
   },
+  "gallery": {
+    "title": "galeriis",
+    "view": "Vaata galeriid.",
+    "delete": "Kustuta pilt.",
+    "add": "Lisa pilte",
+    "add-picture": "Palun valige üks või mitu fotot, mida saata.",
+    "confirm-delete": "Kas tõesti kustutada see pilt?",
+    "success-delete": "Pilt kustutatud.",
+    "error-delete": "Tekkis viga pildi kustutamisel.",
+    "success-create": "Pilt loodud.",
+    "error-create": "Tekkis viga loodud pildis.",
+    "empty": "Pilte pole tehtud."
+  },
   "pagination": {
     "previous": "Eelmine leht",
     "next": "Järgmine",
diff --git a/src/i18n/locales/fr.json b/src/i18n/locales/fr.json
index 47860c3c9..556bbb915 100644
--- a/src/i18n/locales/fr.json
+++ b/src/i18n/locales/fr.json
@@ -1006,7 +1006,14 @@
         "label": "Editeur",
         "help": "Editeur"
       }
-    }
+    },
+    "view": "Voir le groupe",
+    "conferences": "Conférences",
+    "publications": "Publications",
+    "similars": "Groupes similaires",
+    "locations": "Emplacements",
+    "presentation": "Présentation",
+    "location": "Adresse"
   },
   "header": {
     "private": "Privée: visible uniquement par les membres de l’équipe",
@@ -2756,7 +2763,7 @@
       "country": "Pays",
       "other": "Autre"
     },
-    "current-position": "Position actuelle"
+    "current-position": "position actuelle"
   },
   "card-list": {
     "list": "Liste",
@@ -3139,6 +3146,24 @@
     "approve-title": "Veuillez approuver les conditions générales d'utilisation",
     "approve-button": "J'accepte"
   },
+  "gallery": {
+    "title": "Galerie",
+    "view": "Voir la galerie.",
+    "delete": "Supprimer l'image.",
+    "add": "Ajouter des images",
+    "add-picture": "Veuillez sélectionner une ou plusieurs photos à envoyer.",
+    "confirm-delete": "Voulez-vous vraiment supprimer cette image ?",
+    "success-delete": "Image supprimée.",
+    "error-delete": "Une erreur s'est produite en supprimant l'image.",
+    "success-create": "Photo créée.",
+    "error-create": "Une erreur s'est produite image créée.",
+    "empty": "Pas de photos."
+  },
+  "pagination": {
+    "previous": "Page précédente",
+    "next": "Page suivante",
+    "page": "Page"
+  },
   "pdf": {
     "blog-entries-limited-warning": "Seuls les {max} premiers articles de blog sont inclus dans l'export PDF (sur un total de {total}).",
     "download-pdf": "PDF",
diff --git a/src/i18n/locales/nl.json b/src/i18n/locales/nl.json
index 60c047319..9ca6336d1 100644
--- a/src/i18n/locales/nl.json
+++ b/src/i18n/locales/nl.json
@@ -1006,7 +1006,14 @@
         "label": "Editor",
         "help": "Editor"
       }
-    }
+    },
+    "view": "Beeldgroep",
+    "conferences": "Conferenties",
+    "publications": "Publicaties",
+    "similars": "Groepen vergelijkbaar",
+    "locations": "Locaties",
+    "presentation": "Presentatie",
+    "location": "Adres"
   },
   "header": {
     "private": "Privé: alleen zichtbaar voor teamleden",
@@ -3139,6 +3146,19 @@
     "approve-title": "Gelieve de servicevoorwaarden goed te keuren",
     "approve-button": "Ik accepteer"
   },
+  "gallery": {
+    "title": "Galerij",
+    "view": "Galerie bekijken.",
+    "delete": "Foto verwijderen.",
+    "add": "Foto's toevoegen",
+    "add-picture": "Selecteer een of meer foto's om te versturen.",
+    "confirm-delete": "Weet u zeker dat u deze foto wilt verwijderen?",
+    "success-delete": "Foto verwijderd.",
+    "error-delete": "Er is een fout opgetreden bij het verwijderen van afbeelding.",
+    "success-create": "Foto gemaakt.",
+    "error-create": "Er is een fout opgetreden bij het maken van een foto.",
+    "empty": "Geen foto's gezet."
+  },
   "pagination": {
     "previous": "Vorige pagina",
     "next": "Volgende pagina",
diff --git a/src/interfaces/gallery.ts b/src/interfaces/gallery.ts
new file mode 100644
index 000000000..9d656fa4e
--- /dev/null
+++ b/src/interfaces/gallery.ts
@@ -0,0 +1,6 @@
+export type ImageGalleryForm = {
+  files: {
+    file: File
+    url: string
+  }[]
+}
diff --git a/src/interfaces/maps.ts b/src/interfaces/maps.ts
index ae9cc84b6..de6b8991f 100644
--- a/src/interfaces/maps.ts
+++ b/src/interfaces/maps.ts
@@ -1,3 +1,4 @@
+import { GeneralLocationPeopleGroup, PeopleGroupModel } from '@/models/invitation.model'
 import {
   AnyLocation,
   BaseLocationModel,
@@ -15,6 +16,12 @@ export type MapPointerOption = {
   tooltip?: HTMLElement
 }
 
-export type Locations = LocationModel[]
+export type Locations = {
+  groups: PeopleGroupModel[]
+  projects: LocationModel[]
+}
 
-export type TranslatedLocations = TranslatedLocation[]
+export type TranslatedLocations = {
+  groups: GeneralLocationPeopleGroup[]
+  projects: TranslatedLocation[]
+}
diff --git a/src/models/invitation.model.ts b/src/models/invitation.model.ts
index 084c34c1b..c4d28d068 100644
--- a/src/models/invitation.model.ts
+++ b/src/models/invitation.model.ts
@@ -1,11 +1,77 @@
+import { IconImageChoice } from '@/functs/IconImage'
+import { Translated } from '@/interfaces/translated'
+import { Image } from '@/models/image.model'
+import { BaseLocationModel, BaseTranslatedLocationModel } from '@/models/location.model'
+import { OrganizationModel } from '@/models/organization.model'
+import { TagModel } from '@/models/tag.model'
+
+export type SubGroup = {
+  id: number
+  name: string
+}
+
 // TODO remove once merged with group PR
 export interface PeopleGroupModel {
   id: number
+  slug: string
   name: string
   description: string
+  short_description: string
   email: string
   type: string
-  header_image: string
+  header_image: Image
+  publication_status: string
+  organization: OrganizationModel
+  children: SubGroup[]
+  hierarchy: any
+  sdgs: number[]
+  tags: TagModel[]
+  location: BaseLocationModel | null
+  modules: {
+    members: number
+    featured_projects: number
+    publications: number
+    conferences: number
+    similars: number
+    subgroups: number
+    locations: number
+    gallery: number
+  }
+}
+
+export type PeopleGroupModulesKeys = keyof PeopleGroupModel['modules']
+
+export type TranslatedPeopleGroupModel = Omit<
+  Translated<PeopleGroupModel, 'name' | 'description' | 'short_description'>,
+  'location'
+> & {
+  location: BaseTranslatedLocationModel | null
+}
+
+export type GeneralLocationPeopleGroup = BaseTranslatedLocationModel & {
+  group: TranslatedPeopleGroupModel
+}
+
+export const GroupModuleIcon: { [key in PeopleGroupModulesKeys]: IconImageChoice } = {
+  conferences: 'Article',
+  featured_projects: 'Briefcase',
+  publications: 'Article',
+  members: 'Users',
+  similars: 'PeopleGroup',
+  subgroups: 'nodeTree',
+  locations: 'Map',
+  gallery: 'Gallery',
+}
+
+export const GroupModuleTitle: { [key in PeopleGroupModulesKeys]: string } = {
+  conferences: 'group.conferences',
+  featured_projects: 'group.projects',
+  publications: 'group.publications',
+  members: 'group.members',
+  similars: 'group.similars',
+  subgroups: 'group.subgroups',
+  locations: 'group.locations',
+  gallery: 'gallery.title',
 }
 
 export interface ProfilePictureVariationsModel {
diff --git a/src/models/types.ts b/src/models/types.ts
index 1adc739c8..6846c1dd2 100644
--- a/src/models/types.ts
+++ b/src/models/types.ts
@@ -10,4 +10,4 @@ export type ProjectMemberRoleType = 'owners' | 'members' | 'reviewers'
 
 export type StatusType = 'na' | 'ongoing' | 'complete' | 'cancel'
 
-export type LocationType = 'team' | 'impact'
+export type LocationType = 'team' | 'impact' | 'address'
diff --git a/src/pages/GroupPageV2/GroupPage.vue b/src/pages/GroupPageV2/GroupPage.vue
index 4d6557c8a..1da867c8e 100644
--- a/src/pages/GroupPageV2/GroupPage.vue
+++ b/src/pages/GroupPageV2/GroupPage.vue
@@ -1,27 +1,367 @@
-<script setup>
-import { getGroup } from '@/api/groups.service'
-const props = defineProps({
-  groupId: {
-    type: String,
-    required: true,
-  },
-})
-
-// onBeforeRouteUpdate(useGuardFromPendingEdit)
-// onBeforeRouteLeave(useGuardFromPendingEdit)
-// useGuardFromPendingEdit()
-try {
-  const runtimeConfig = useRuntimeConfig()
-
-  const group = await getGroup(runtimeConfig.public.appApiOrgCode, props.groupId, /*no error*/ true)
-  const { image, dimensions } = useImageAndDimension(group?.header_image, 'medium')
-
-  useLpiHead(useRequestURL().toString(), group?.name, group?.description, image, dimensions)
-} catch (err) {
-  console.log(err)
+<template>
+  <div
+    :key="groupId"
+    class="group-layout"
+    :class="{
+      'can-edit-group': canEditGroup,
+      'group-edit-layout': isEditing,
+      'group-display-layout': !isEditing,
+    }"
+  >
+    <div class="page-section-extra-wide">
+      <FetchLoader :status="status" :with-data="!!group.id">
+        <NavPanelLayout
+          :is-loading="groupLoading"
+          :is-nav-collapsed="isNavCollapsed"
+          :breadcrumbs="groupHierarchy || []"
+          @toggle-nav-panel="toggleNavPanel"
+          @collapse-nav-panel="isNavCollapsed = true"
+        >
+          <template #nav-panel>
+            <LazyGroupNavPanel
+              v-if="!groupLoading && !isNavCollapsed"
+              :class="{ collapsed: isNavCollapsed }"
+              :group-tabs="groupTabs"
+              :current-tab="currentTab"
+              :email="group?.email"
+              :can-edit-group="canEditGroup"
+              :is-editing="isEditing"
+              class="slide-panel"
+              @navigated="collapseIfUnderBreakpoint"
+              @toggle-editing="toggleEditing"
+            />
+          </template>
+          <template v-if="currentTab" #content>
+            <div class="group-content">
+              <SubPageTitle :title-prefix="group.$t?.name" :current-tab="currentTab" />
+              <NuxtPage v-bind="currentTab.props" />
+            </div>
+          </template>
+        </NavPanelLayout>
+      </FetchLoader>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { getGroup } from '@/api/v2/group.service'
+import { useLpiHead2 } from '@/composables/useLpiHead'
+import { GroupModuleIcon, GroupModuleTitle } from '@/models/invitation.model'
+import { groupSkeleton } from '@/skeletons/group.skeletons'
+
+const uniqueId = 'group-nav-panel'
+const { canEditGroup } = usePermissions()
+const { isNavCollapsed, toggleNavPanel, collapseIfUnderBreakpoint } =
+  useToggleableNavPanel(uniqueId)
+const organizationCode = useOrganizationCode()
+
+const router = useRouter()
+const route = useRoute()
+const { t } = useNuxtI18n()
+const groupId = computed(() => parseInt(route.params.groupId.toString(), 10))
+
+const { data: group, isLoading, status } = getGroup(organizationCode, groupId)
+
+const groupLoading = computed(() => isLoading.value && !group.value?.id)
+
+watchEffect(() => {
+  useLpiHead2({
+    title: group.value?.name,
+    description: group.value?.description,
+    image: group.value?.header_image,
+  })
+})
+
+const groupHierarchy = computed(() => {
+  const root = {
+    name: t('common.groups'),
+    route: { name: 'Groups' },
+  }
+  if (!group.value) return [root]
+  return [
+    root,
+    ...(group.value?.hierarchy || []).map((group) => ({
+      name: group.name,
+      route: { name: 'Group', params: { groupId: group.id } },
+    })),
+  ]
+})
+
+const groupModules = computed(() => group.value?.modules ?? groupSkeleton()['modules'])
+
+const groupTabsDisplay = computed(() => {
+  return [
+    {
+      isEditing: false,
+      key: 'group-snapshot',
+      dataTest: 'group-snapshot',
+      label: t('group.snapshot'),
+      view: `/group/${route.params.groupId}/snapshot`,
+      altView: `/group/${route.params.groupId}/snapshot/edit`,
+      props: {
+        group: group.value,
+        isLoading: groupLoading.value,
+      },
+      condition: true,
+      noTitle: true,
+      icon: 'Home',
+    },
+    {
+      isEditing: false,
+      key: 'group-members',
+      dataTest: 'group-members',
+      label: t(GroupModuleTitle.members),
+      view: `/group/${route.params.groupId}/members`,
+      altView: `/group/${route.params.groupId}/members/edit`,
+      props: {
+        group: group.value,
+        isLoading: groupLoading.value,
+      },
+      condition: groupModules.value.members,
+      icon: GroupModuleIcon.members,
+    },
+    {
+      isEditing: false,
+      key: 'group-projects',
+      dataTest: 'group-projects',
+      label: t(GroupModuleTitle.featured_projects),
+      view: `/group/${route.params.groupId}/projects`,
+      altView: `/group/${route.params.groupId}/projects/edit`,
+      props: {
+        group: group.value,
+        isLoading: groupLoading.value,
+      },
+      condition: groupModules.value.featured_projects,
+      icon: GroupModuleIcon.featured_projects,
+    },
+    {
+      isEditing: false,
+      key: 'group-publications',
+      dataTest: 'group-publications',
+      label: t(GroupModuleTitle.publications),
+      view: `/group/${route.params.groupId}/publications`,
+      altView: `/group/${route.params.groupId}/publications/edit`,
+      props: {
+        documentType: 'publications',
+        group: group.value,
+        isLoading: groupLoading.value,
+      },
+      condition: groupModules.value.publications,
+      icon: GroupModuleIcon.publications,
+    },
+    {
+      isEditing: false,
+      key: 'group-conferences',
+      dataTest: 'group-conferences',
+      label: t(GroupModuleTitle.conferences),
+      view: `/group/${route.params.groupId}/conferences`,
+      altView: `/group/${route.params.groupId}/conferences/edit`,
+      props: {
+        documentType: 'conferences',
+        group: group.value,
+        isLoading: groupLoading.value,
+      },
+      condition: groupModules.value.conferences,
+      icon: GroupModuleIcon.conferences,
+    },
+    {
+      isEditing: false,
+      key: 'group-locations',
+      dataTest: 'group-locations',
+      label: t(GroupModuleTitle.locations),
+      view: `/group/${route.params.groupId}/locations`,
+      altView: `/group/${route.params.groupId}/locations/edit`,
+      props: {
+        group: group.value,
+        isLoading: groupLoading.value,
+      },
+      condition: groupModules.value.locations,
+      icon: GroupModuleIcon.locations,
+    },
+    {
+      isEditing: false,
+      key: 'group-gallery',
+      dataTest: 'group-gallery',
+      label: t(GroupModuleTitle.gallery),
+      view: `/group/${route.params.groupId}/gallery`,
+      altView: `/group/${route.params.groupId}/gallery/edit`,
+      props: {
+        group: group.value,
+        isLoading: groupLoading.value,
+      },
+      condition: groupModules.value.gallery,
+      icon: GroupModuleIcon.gallery,
+    },
+  ]
+})
+
+const groupTabsEdit = computed(() => {
+  return [
+    {
+      isEditing: true,
+      key: 'group-snapshot-edit',
+      dataTest: 'group-snapshot-edit',
+      label: t('group.snapshot'),
+      view: `/group/${route.params.groupId}/snapshot/edit`,
+      altView: `/group/${route.params.groupId}/snapshot`,
+      props: {
+        isInEditingMode: true,
+        group: group.value,
+        isLoading: groupLoading.value,
+      },
+      condition: true,
+      noTitle: true,
+      icon: 'Pen',
+    },
+    {
+      isEditing: true,
+      key: 'groups-members-edit',
+      dataTest: 'groups-members-edit',
+      label: t('group.members'),
+      view: `/group/${route.params.groupId}/members/edit`,
+      altView: `/group/${route.params.groupId}/members`,
+      props: {
+        isInEditingMode: true,
+        group: group.value,
+        isLoading: groupLoading.value,
+      },
+      condition: true,
+      icon: 'Pen',
+    },
+    {
+      isEditing: true,
+      key: 'group-projects-edit',
+      dataTest: 'group-projects-edit',
+      label: t('group.projects'),
+      view: `/group/${route.params.groupId}/projects/edit`,
+      altView: `/group/${route.params.groupId}/projects`,
+      props: {
+        isInEditingMode: true,
+        group: group.value,
+        isLoading: groupLoading.value,
+      },
+      condition: true,
+      icon: 'Pen',
+    },
+    {
+      isEditing: true,
+      key: 'group-publications-edit',
+      dataTest: 'group-publications-edit',
+      label: t('group.publications'),
+      view: `/group/${route.params.groupId}/publications/edit`,
+      altView: `/group/${route.params.groupId}/publications`,
+      props: {
+        documentType: 'publications',
+        isInEditingMode: true,
+        group: group.value,
+        isLoading: groupLoading.value,
+      },
+      condition: false,
+      icon: 'Pen',
+    },
+    {
+      isEditing: true,
+      key: 'group-conferences-edit',
+      dataTest: 'group-conferences-edit',
+      label: t('group.conferences'),
+      view: `/group/${route.params.groupId}/conferences/edit`,
+      altView: `/group/${route.params.groupId}/conferences`,
+      props: {
+        documentType: 'conferences',
+        isInEditingMode: true,
+        group: group.value,
+        isLoading: groupLoading.value,
+      },
+      condition: false,
+      icon: 'Pen',
+    },
+    {
+      isEditing: true,
+      key: 'group-locations-edit',
+      dataTest: 'group-locations-edit',
+      label: t(GroupModuleTitle.locations),
+      view: `/group/${route.params.groupId}/locations/edit`,
+      altView: `/group/${route.params.groupId}/locations`,
+      props: {
+        isInEditingMode: true,
+        group: group.value,
+        isLoading: groupLoading.value,
+      },
+      condition: false,
+      icon: 'Pen',
+    },
+    {
+      isEditing: true,
+      key: 'group-gallery-edit',
+      dataTest: 'group-gallery-edit',
+      label: t(GroupModuleTitle.gallery),
+      view: `/group/${route.params.groupId}/gallery/edit`,
+      altView: `/group/${route.params.groupId}/gallery`,
+      props: {
+        isInEditingMode: true,
+        group: group.value,
+        isLoading: groupLoading.value,
+      },
+      condition: true,
+      icon: 'Pen',
+    },
+  ]
+})
+
+const groupTabsDisplayFiltered = computed(() => {
+  return groupTabsDisplay.value.filter((tab) => tab.condition)
+})
+
+const groupTabsEditFiltered = computed(() => {
+  return groupTabsEdit.value.filter((tab) => tab.condition)
+})
+
+const currentTab = computed(() => {
+  return allGroupsTabs.value.find((tab) => route.fullPath === tab.view)
+})
+
+const isEditing = computed(() => currentTab.value?.isEditing || false)
+
+const groupTabs = computed(() => {
+  return isEditing.value ? groupTabsEditFiltered.value : groupTabsDisplayFiltered.value
+})
+
+const allGroupsTabs = computed(() => [...groupTabsDisplay.value, ...groupTabsEdit.value])
+
+const toggleEditing = () => {
+  const nextTab = allGroupsTabs.value.find((tab) => tab.view === currentTab.value.altView)
+  // if altview exists and is active, go to the page
+  if (nextTab && nextTab.condition) {
+    router.push(currentTab.value.altView)
+  } else {
+    // else we go to "home" page of edit/show tabs directly
+    const tabHome = isEditing.value ? groupTabsDisplay.value[0] : groupTabsEdit.value[0]
+    router.push(tabHome.view)
+  }
+}
+
+if (import.meta.client) {
+  watchEffect(() => {
+    if (isEditing.value && !canEditGroup.value) {
+      toggleEditing()
+    }
+  })
 }
 </script>
 
-<template>
-  <LazyGroupPageInnerV2 :key="groupId" :group-id="groupId" />
-</template>
+<style lang="scss" scoped>
+.group-layout,
+.group-edit-layout {
+  margin-top: pxToRem(48px);
+}
+
+.recommandations {
+  margin-top: $space-2xl;
+}
+
+.group-content {
+  //   background-color: #f0f3f5;
+  //   padding: 1rem;
+  //   border-radius: 0.5rem;
+}
+</style>
diff --git a/src/pages/GroupPageV2/Tabs/BaseGroupTab.vue b/src/pages/GroupPageV2/Tabs/BaseGroupTab.vue
new file mode 100644
index 000000000..996d87df8
--- /dev/null
+++ b/src/pages/GroupPageV2/Tabs/BaseGroupTab.vue
@@ -0,0 +1,55 @@
+<template>
+  <div class="basegroup-card">
+    <div class="basegroup">
+      <div class="basegroup-header">
+        <h2 v-if="header" class="title">
+          {{ title }}
+          <span v-show="count">( {{ count }} )</span>
+        </h2>
+      </div>
+      <div class="basegroup-container">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    title?: string
+    count?: number
+    header?: boolean
+  }>(),
+  { header: true, title: '', count: 0 }
+)
+</script>
+
+<style lang="scss" scoped>
+.basegroup-card {
+  .basegroup {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+
+    &-header {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      width: 100%;
+      gap: $space-l;
+
+      .title {
+        font-weight: 700;
+        font-size: $font-size-l;
+        color: $primary-dark;
+        margin-bottom: 1rem;
+      }
+    }
+
+    &-container {
+      width: 100%;
+    }
+  }
+}
+</style>
diff --git a/src/pages/GroupPageV2/Tabs/Documents/GroupDocumentsTab.vue b/src/pages/GroupPageV2/Tabs/Documents/GroupDocumentsTab.vue
new file mode 100644
index 000000000..f4a654cfd
--- /dev/null
+++ b/src/pages/GroupPageV2/Tabs/Documents/GroupDocumentsTab.vue
@@ -0,0 +1,20 @@
+<template>
+  <BaseGroupTab :title="$t(GroupModuleTitle[documentType])" :count="countElement">
+    <GroupResearcherDocumentsList :doc-type="documentType" :group="group" />
+  </BaseGroupTab>
+</template>
+
+<script setup lang="ts">
+import GroupResearcherDocumentsList from '@/components/people/Researcher/GroupResearcherDocumentsList.vue'
+import { DocumentType } from '@/interfaces/researcher'
+
+import { GroupModuleTitle, TranslatedPeopleGroupModel } from '@/models/invitation.model'
+import BaseGroupTab from '@/pages/GroupPageV2/Tabs/BaseGroupTab.vue'
+
+const props = defineProps<{
+  documentType: DocumentType
+  group: TranslatedPeopleGroupModel
+}>()
+
+const countElement = computed(() => props.group.modules?.[props.documentType] ?? 0)
+</script>
diff --git a/src/pages/GroupPageV2/Tabs/Gallery/GroupGalleryTab.vue b/src/pages/GroupPageV2/Tabs/Gallery/GroupGalleryTab.vue
new file mode 100644
index 000000000..6a2559041
--- /dev/null
+++ b/src/pages/GroupPageV2/Tabs/Gallery/GroupGalleryTab.vue
@@ -0,0 +1,23 @@
+<template>
+  <BaseGroupTab :title="$t(GroupModuleTitle.gallery)" :count="countElement">
+    <div class="">
+      <BaseGroupGallery :group="group" :editable="isInEditingMode" />
+    </div>
+  </BaseGroupTab>
+</template>
+
+<script setup lang="ts">
+import BaseGroupGallery from '@/components/group/Modules/Gallery/BaseGroupGallery.vue'
+import { GroupModuleTitle, TranslatedPeopleGroupModel } from '@/models/invitation.model'
+import BaseGroupTab from '@/pages/GroupPageV2/Tabs/BaseGroupTab.vue'
+
+const props = withDefaults(
+  defineProps<{
+    group: TranslatedPeopleGroupModel
+    isInEditingMode?: boolean
+  }>(),
+  { isInEditingMode: false }
+)
+
+const countElement = computed<number>(() => props.group.modules?.gallery)
+</script>
diff --git a/src/pages/CreateEditGroupPage/CreateEditGroupPage.vue b/src/pages/GroupPageV2/Tabs/GroupEditTab.vue
similarity index 86%
rename from src/pages/CreateEditGroupPage/CreateEditGroupPage.vue
rename to src/pages/GroupPageV2/Tabs/GroupEditTab.vue
index 8a5bf6cfc..788f1c222 100644
--- a/src/pages/CreateEditGroupPage/CreateEditGroupPage.vue
+++ b/src/pages/GroupPageV2/Tabs/GroupEditTab.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import {
   postGroup,
   postGroupHeader,
@@ -8,19 +8,17 @@ import {
 } from '@/api/groups.service'
 import useValidate from '@vuelidate/core'
 import { required, maxLength, helpers, email } from '@vuelidate/validators'
-import { imageSizesFormData, pictureApiToImageSizes } from '@/functs/imageSizesUtils.ts'
+import { imageSizesFormData, pictureApiToImageSizes } from '@/functs/imageSizesUtils'
 import { isEqual } from 'es-toolkit'
-import useToasterStore from '@/stores/useToaster.ts'
+import useToasterStore from '@/stores/useToaster'
 import usePeopleGroupsStore from '@/stores/usePeopleGroups'
-import useUsersStore from '@/stores/useUsers.ts'
-import useOrganizationsStore from '@/stores/useOrganizations.ts'
-import { getOrganizationByCode } from '@/api/organizations.service'
+import useUsersStore from '@/stores/useUsers'
+import { useLpiHead2 } from '@/composables/useLpiHead'
 
 const props = defineProps({
   groupId: {
-    // watch out : this can be a slug or an id
-    type: [String, null],
-    default: null,
+    type: [Number, null],
+    required: true,
   },
   postCancelRouteFactory: {
     type: [Function, null],
@@ -46,7 +44,7 @@ const props = defineProps({
 const emit = defineEmits(['close', 'reload-group'])
 const toaster = useToasterStore()
 const peopleGroupsStore = usePeopleGroupsStore()
-const organizationsStore = useOrganizationsStore()
+const organizationCode = useOrganizationCode()
 const usersStore = useUsersStore()
 const { canCreateGroup, canEditGroup } = usePermissions()
 const route = useRoute()
@@ -64,6 +62,9 @@ const form = ref({
   parentGroup: null, // group object
   organization: '',
   members: [],
+  sdgs: [],
+  tags: [],
+  location: null,
   featuredProjects: [],
   header_image: null,
   imageSizes: null,
@@ -98,17 +99,11 @@ const rules = computed(() => ({
 
 const v$ = useValidate(rules, { form })
 
-const formIsInvalid = computed(() => {
-  return v$.value.$invalid
-})
-const isEdit = computed(() => {
-  return !!props.groupId
-})
-const orgCode = computed(() => {
-  // use group's org code if availabe
-  // to allow edition of groups on the meta portal (PROJ-1032)
-  return groupData.value ? groupData.value.organization : organizationsStore.current.code
-})
+const formIsInvalid = computed(() => v$.value.$invalid)
+const isEdit = computed(() => !!props.groupId)
+// use group's org code if availabe
+// to allow edition of groups on the meta portal (PROJ-1032)
+const orgCode = computed(() => groupData.value?.organization ?? organizationCode)
 
 const redirectTo404 = () => {
   router.replace({
@@ -150,12 +145,14 @@ const updateHeader = async (groupId) => {
       payloadHeader.append('file', form.value.header_image, form.value.header_image.name)
 
       await postGroupHeader(orgCode.value, groupId, payloadHeader)
+      await refreshNuxtData(`${organizationCode}::group::${groupData.value.id}`)
 
       // TODO: make this in POST when backend allows it
       payloadHeader.delete('file')
     } else if (form.value.imageSizes) {
       // TODO else ?
       await patchGroupHeader(orgCode.value, groupId, payloadHeader)
+      await refreshNuxtData(`${organizationCode}::group::${groupData.value.id}`)
     }
   }
 }
@@ -186,7 +183,10 @@ const buildPayload = () => {
     short_description: form.value.short_description,
     email: form.value.email,
     type: 'group', // this.form.type, // TODO ??? club | group
+    sdgs: form.value.sdgs,
+    tags: form.value.tags.map((tag) => tag.id),
     parent: form.value.parentGroup?.id || null, // undefined ,
+    location: form.value.location,
     organization: orgCode.value,
     publication_status: form.value.publication_status,
     team,
@@ -201,10 +201,12 @@ const createGroup = async () => {
   try {
     const payload = buildPayload()
 
-    const newGroupId = (await postGroup(orgCode.value, payload)).id
+    const newGroup = await postGroup(orgCode.value, payload)
+    const newGroupId = newGroup.id
 
     // save header
     await updateHeader(newGroupId)
+    await refreshNuxtData(`${organizationCode}::group::${newGroup.id}`)
 
     startEditWatcher()
 
@@ -229,6 +231,7 @@ const updateGroup = async () => {
   isSaving.value = true
   try {
     const payload = buildPayload()
+    // @ts-expect-error 2339
     payload.id = props.groupId
     payload.type = form.value.type
 
@@ -238,10 +241,12 @@ const updateGroup = async () => {
     await updateHeader(props.groupId)
 
     // save members
-    await updateGroupMembers(props.groupId)
+    await updateGroupMembers()
 
     //save featured projects
-    await updateGroupProjects(props.groupId)
+    await updateGroupProjects()
+
+    await refreshNuxtData(`${organizationCode}::group::${groupData.value.id}`)
 
     startEditWatcher()
 
@@ -292,7 +297,6 @@ onMounted(async () => {
     // general data
     try {
       const _groupData = await getGroup(orgCode.value, props.groupId)
-
       // now we can get the real id (not slug)
       peopleGroupsStore.currentId = _groupData.id
       if (!canEditGroup.value) {
@@ -308,12 +312,17 @@ onMounted(async () => {
       form.value.description = _groupData.description
       form.value.short_description = _groupData.short_description
       form.value.email = _groupData.email
+      form.value.location = _groupData.location
+
+      form.value.sdgs = [..._groupData.sdgs]
+      form.value.tags = structuredClone(_groupData.tags)
       // first group in hierarchy is always org group
       // witch is not diplayed and considered null parent for the form and api purpose
       // parent group is always the last group in hierarchy
       form.value.parentGroup = _groupData.hierarchy?.length
         ? _groupData.hierarchy[_groupData.hierarchy.length - 1]
         : null
+      // @ts-expect-error 2322
       form.value.organization = _groupData.organization
       form.value.type = _groupData.type
       form.value.publication_status = _groupData.publication_status
@@ -332,20 +341,9 @@ onMounted(async () => {
   }
 })
 
-try {
-  const runtimeConfig = useRuntimeConfig()
-  const organization = await getOrganizationByCode(runtimeConfig.public.appApiOrgCode)
-  const { image, dimensions } = useImageAndDimension(organization?.banner_image, 'medium')
-  useLpiHead(
-    useRequestURL().toString(),
-    computed(() => (isEdit.value ? t('group.edit.title') : t('group.create.title'))),
-    organization?.dashboard_subtitle,
-    image,
-    dimensions
-  )
-} catch (err) {
-  console.log(err)
-}
+useLpiHead2({
+  title: computed(() => (isEdit.value ? t('group.edit.title') : t('group.create.title'))),
+})
 </script>
 <template>
   <div class="create-group">
diff --git a/src/pages/GroupPageV2/Tabs/GroupMembersEditTab.vue b/src/pages/GroupPageV2/Tabs/GroupMembersEditTab.vue
deleted file mode 100644
index 91a67ac76..000000000
--- a/src/pages/GroupPageV2/Tabs/GroupMembersEditTab.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<script setup>
-import useOrganizationsStore from '@/stores/useOrganizations.ts'
-
-const props = defineProps({ groupData: { type: Object, required: true } })
-
-const emit = defineEmits('reload-group-members')
-
-const organizationsStore = useOrganizationsStore()
-const orgCode = computed(() => {
-  // use group's org code if availabe
-  // to allow edition of groups on the meta portal (PROJ-1032)
-  return props.groupData?.organization || organizationsStore.current.code
-})
-
-const form = ref({
-  members: [],
-})
-
-const { setMembersData, updateGroupMembers, isSaving } = useGroupMembersUpdate(
-  orgCode,
-  props.groupData?.id,
-  form
-)
-
-const { startEditWatcher } = useEditWatcher(form)
-
-const save = async () => {
-  try {
-    await updateGroupMembers()
-    startEditWatcher()
-    emit('reload-group-members')
-  } catch (e) {
-    console.log(e)
-  }
-}
-
-onMounted(async () => {
-  await setMembersData()
-  startEditWatcher()
-})
-</script>
-
-<template>
-  <div class="team">
-    <ClientOnly>
-      <FormPanel
-        :confirm-action-name="$t('common.save')"
-        :asyncing="isSaving"
-        @close="
-          $router.push({
-            name: 'groupMembers',
-            params: { groupId: groupData.slug || groupData.id },
-          })
-        "
-        @confirm="save"
-      >
-        <GroupTeamSection v-model="form.members" />
-      </FormPanel>
-    </ClientOnly>
-  </div>
-</template>
diff --git a/src/pages/GroupPageV2/Tabs/GroupMembersTab.vue b/src/pages/GroupPageV2/Tabs/GroupMembersTab.vue
deleted file mode 100644
index 4c89984f7..000000000
--- a/src/pages/GroupPageV2/Tabs/GroupMembersTab.vue
+++ /dev/null
@@ -1,189 +0,0 @@
-<template>
-  <div class="group-members">
-    <div class="members">
-      <div class="members-header">
-        <h2 class="title">
-          {{ $t('group.group-members') }}
-          <span v-if="!isLoading">( {{ membersCount }} )</span>
-        </h2>
-      </div>
-      <MemberListSkeleton v-if="isLoading" :min-gap="90" />
-      <DynamicGrid v-else :min-gap="90" class="members-container">
-        <GroupMemberItem
-          v-for="member in members"
-          :key="member.id"
-          :user="member"
-          class="cursor-pointer shadow-drop"
-          @user-click="openProfileDrawer"
-        />
-      </DynamicGrid>
-    </div>
-    <div v-if="!isLoading && pagination.total > 1" class="pagination-container">
-      <PaginationButtons
-        :current="pagination.currentPage"
-        :pagination="pagination"
-        :total="pagination.total"
-        @update-pagination="onClickPagination"
-      />
-    </div>
-  </div>
-  <BaseDrawer
-    :v-if="profileDrawer.isOpened"
-    no-footer
-    :is-opened="profileDrawer.isOpened"
-    :title="$t('profile.drawer_title')"
-    @close="closeProfileDrawer"
-    @confirm="closeProfileDrawer"
-  >
-    <UserProfileV2
-      v-if="profileDrawer.isOpened"
-      ref="profile-user"
-      :can-edit="false"
-      :user-id="profileDrawer.user_id"
-      is-preview
-      @close="closeProfileDrawer"
-    />
-  </BaseDrawer>
-</template>
-
-<script>
-import useAPI from '@/composables/useAPI.ts'
-
-export default {
-  name: 'GroupMembersTab',
-
-  props: {
-    membersInitialRequest: {
-      type: Object,
-      default: () => {},
-    },
-    isMembersLoading: {
-      type: Boolean,
-      default: true,
-    },
-  },
-
-  setup(props) {
-    const style = ref({})
-    const profileDrawer = ref({
-      isOpened: false,
-      user_id: null,
-    })
-    const pagination = ref({
-      currentPage: 1,
-      total: 1,
-      previous: undefined,
-      next: undefined,
-      first: undefined,
-      last: undefined,
-    })
-    const membersRequest = ref(props.membersInitialRequest)
-
-    const isPaginationLoading = ref(false)
-    const rawMembers = computed(() => membersRequest.value?.results || [])
-    const { translateUsers } = useAutoTranslate()
-    const members = translateUsers(rawMembers)
-    const membersCount = computed(() => membersRequest.value?.count || 0)
-
-    const isLoading = computed(() => props.isMembersLoading || isPaginationLoading.value)
-    return {
-      style,
-      profileDrawer,
-      pagination,
-      membersRequest,
-      isPaginationLoading,
-      members,
-      membersCount,
-      isLoading,
-    }
-  },
-
-  watch: {
-    membersRequest: {
-      handler: function (response) {
-        if (response) this.updatePagination(response)
-      },
-      immediate: true,
-    },
-
-    membersInitialRequest: {
-      handler: function (membersInitialRequest) {
-        if (membersInitialRequest) this.membersRequest = membersInitialRequest
-      },
-      immediate: true,
-    },
-  },
-
-  methods: {
-    async openProfileDrawer(user) {
-      this.profileDrawer.user_id = user.id
-      this.profileDrawer.isOpened = true
-    },
-
-    closeProfileDrawer() {
-      this.isEditMode = false
-      this.profileDrawer.isOpened = false
-      this.profileDrawer.user_id = null
-    },
-
-    async onClickPagination(requestedPage) {
-      this.isPaginationLoading = true
-      this.membersRequest = await useAPI(requestedPage, {})
-      this.isPaginationLoading = false
-      const el = document.querySelector('.group-members .members-header')
-      if (el) el.scrollIntoView({ behavior: 'smooth' })
-    },
-
-    updatePagination(response) {
-      this.pagination.currentPage = response.current_page
-      this.pagination.total = response.total_page
-      this.pagination.previous = response.previous
-      this.pagination.next = response.next
-      this.pagination.first = response.first
-      this.pagination.last = response.last
-    },
-  },
-}
-</script>
-
-<style lang="scss" scoped>
-.group-members {
-  .members {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: $space-xl;
-
-    &-header {
-      display: flex;
-      justify-content: flex-start;
-      align-items: center;
-      width: 100%;
-      gap: $space-l;
-
-      .title {
-        font-weight: 700;
-        font-size: $font-size-l;
-        color: $primary-dark;
-      }
-    }
-
-    &-container {
-      width: 100%;
-      justify-content: space-between;
-
-      .cursor-pointer {
-        cursor: pointer;
-      }
-    }
-  }
-
-  .pagination-container {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding-top: $space-xl;
-  }
-}
-</style>
diff --git a/src/pages/GroupPageV2/Tabs/GroupProjectsEditTab.vue b/src/pages/GroupPageV2/Tabs/GroupProjectsEditTab.vue
deleted file mode 100644
index fb87c49ad..000000000
--- a/src/pages/GroupPageV2/Tabs/GroupProjectsEditTab.vue
+++ /dev/null
@@ -1,64 +0,0 @@
-<script setup>
-import useOrganizationsStore from '@/stores/useOrganizations.ts'
-
-const props = defineProps({
-  groupId: { type: Number, required: true },
-  groupData: { type: Object, required: true },
-})
-
-const emit = defineEmits('reload-group-projects')
-
-const organizationsStore = useOrganizationsStore()
-const orgCode = computed(() => {
-  // use group's org code if availabe
-  // to allow edition of groups on the meta portal (PROJ-1032)
-  return props.groupData?.organization || organizationsStore.current.code
-})
-
-const form = ref({
-  featuredProjects: [],
-})
-
-const { setProjectsData, updateGroupProjects, isSaving } = useGroupProjectsUpdate(
-  orgCode,
-  props.groupId,
-  form
-)
-
-const { startEditWatcher } = useEditWatcher(form)
-
-const save = async () => {
-  try {
-    await updateGroupProjects()
-    startEditWatcher()
-    emit('reload-group-projects')
-  } catch (e) {
-    console.log(e)
-  }
-}
-
-onMounted(async () => {
-  await setProjectsData()
-  startEditWatcher()
-})
-</script>
-
-<template>
-  <div class="group-projects">
-    <ClientOnly>
-      <FormPanel
-        :confirm-action-name="$t('common.save')"
-        :asyncing="isSaving"
-        @close="
-          $router.push({
-            name: 'groupMembers',
-            params: { groupId: groupData.slug || groupData.id },
-          })
-        "
-        @confirm="save"
-      >
-        <ProjectSection v-model="form.featuredProjects" />
-      </FormPanel>
-    </ClientOnly>
-  </div>
-</template>
diff --git a/src/pages/GroupPageV2/Tabs/GroupProjectsTab.vue b/src/pages/GroupPageV2/Tabs/GroupProjectsTab.vue
deleted file mode 100644
index e9e6aac05..000000000
--- a/src/pages/GroupPageV2/Tabs/GroupProjectsTab.vue
+++ /dev/null
@@ -1,155 +0,0 @@
-<template>
-  <div class="group-projects">
-    <div class="projects">
-      <div class="projects-header">
-        <h2 class="title">
-          {{ $t('group.group-projects') }}
-          <span v-if="!isLoading">( {{ projectsCount }} )</span>
-        </h2>
-      </div>
-      <div class="projects-container">
-        <CardList :is-loading="isLoading" :items="projects">
-          <template #default="projectListSlotProps">
-            <ProjectCard :project="projectListSlotProps.item" />
-          </template>
-        </CardList>
-      </div>
-      <div v-if="!isLoading && pagination.total > 1" class="pagination-container">
-        <PaginationButtons
-          :current="pagination.currentPage"
-          :pagination="pagination"
-          :total="pagination.total"
-          @update-pagination="onClickPagination"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import CardList from '@/components/base/CardList.vue'
-import ProjectCard from '@/components/project/ProjectCard.vue'
-import PaginationButtons from '@/components/base/navigation/PaginationButtons.vue'
-import useAPI from '@/composables/useAPI.ts'
-
-export default {
-  name: 'GroupProjectsTab',
-
-  components: {
-    CardList,
-    ProjectCard,
-    PaginationButtons,
-  },
-
-  props: {
-    projectsInitialRequest: {
-      type: Object,
-      default: () => ({}),
-    },
-
-    isProjectsLoading: {
-      type: Boolean,
-      default: true,
-    },
-  },
-
-  setup(props) {
-    const style = ref({})
-    const pagination = ref({
-      currentPage: 1,
-      total: 1,
-      previous: undefined,
-      next: undefined,
-      first: undefined,
-      last: undefined,
-    })
-    const projectsRequest = ref(props.projectsInitialRequest)
-    const isPaginationLoading = ref(false)
-    const { translateProjects } = useAutoTranslate()
-    const rawProjects = computed(() => projectsRequest.value?.results || [])
-    const projects = translateProjects(rawProjects)
-    const projectsCount = computed(() => projectsRequest.value?.count || 0)
-    const isLoading = computed(() => props.isProjectsLoading || isPaginationLoading.value)
-
-    return {
-      style,
-      pagination,
-      projectsRequest,
-      isPaginationLoading,
-      projects,
-      projectsCount,
-      isLoading,
-    }
-  },
-
-  watch: {
-    projectsRequest: {
-      handler: function (response) {
-        if (response) this.updatePagination(response)
-      },
-      immediate: true,
-    },
-
-    projectsInitialRequest: {
-      handler: function (projectsInitialRequest) {
-        if (projectsInitialRequest) this.projectsRequest = projectsInitialRequest
-      },
-      immediate: true,
-    },
-  },
-  methods: {
-    async onClickPagination(requestedPage) {
-      this.isPaginationLoading = true
-      this.projectsRequest = await useAPI(requestedPage, {})
-      this.isPaginationLoading = false
-      const el = document.querySelector('.group-projects .projects-header')
-      if (el) el.scrollIntoView({ behavior: 'smooth' })
-    },
-
-    updatePagination(response) {
-      this.pagination.currentPage = response.current_page
-      this.pagination.total = response.total_page
-      this.pagination.previous = response.previous
-      this.pagination.next = response.next
-      this.pagination.first = response.first
-      this.pagination.last = response.last
-    },
-  },
-}
-</script>
-
-<style lang="scss" scoped>
-.group-projects {
-  .projects {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-
-    &-header {
-      display: flex;
-      justify-content: flex-start;
-      align-items: center;
-      width: 100%;
-      gap: $space-l;
-
-      .title {
-        font-weight: 700;
-        font-size: $font-size-l;
-        color: $primary-dark;
-      }
-    }
-
-    &-container {
-      width: 100%;
-    }
-  }
-
-  .pagination-container {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding-top: $space-xl;
-  }
-}
-</style>
diff --git a/src/pages/GroupPageV2/Tabs/GroupSnapshotTab.vue b/src/pages/GroupPageV2/Tabs/GroupSnapshotTab.vue
index 989748f18..b4860f4bf 100644
--- a/src/pages/GroupPageV2/Tabs/GroupSnapshotTab.vue
+++ b/src/pages/GroupPageV2/Tabs/GroupSnapshotTab.vue
@@ -1,270 +1,76 @@
 <template>
-  <div class="group-snapshot">
-    <GroupHeaderV2
-      :title="groupName"
-      :image="groupImage"
-      :visibility="groupVisibility"
-      :email="groupEmail"
-      :short-description="groupShortDescription"
+  <!-- add new modules Here -->
+  <div class="group-modules-list" data-test="group-modules">
+    <GroupHeader :group="group" :is-loading="isLoading" />
+    <GroupRecapPreview :group="group" is-link />
+    <div class="group-infos">
+      <GroupDescriptionPreview v-if="group.$t.description" :group="group" />
+      <GroupSimilarsPreview v-if="group.modules.similars" :group="group" :limit="2" />
+    </div>
+    <GroupMembersPreview v-if="group.modules.members" :group="group" :is-loading="isLoading" />
+    <GroupGalleryPreview v-if="group.modules.gallery" :group="group" :is-loading="isLoading" />
+    <GroupSubPreview v-if="group.modules.subgroups" :group="group" :is-loading="isLoading" />
+    <GroupProjectsPreview
+      v-if="group.modules.featured_projects"
+      :group="group"
+      :is-loading="isLoading"
+    />
+    <GroupLocationPreview v-if="group.modules.locations" :group="group" :is-loading="isLoading" />
+    <GroupDocumentsPreview
+      v-if="group.modules.publications"
+      document-type="publications"
+      :group="group"
+      :is-loading="isLoading"
+    />
+    <GroupDocumentsPreview
+      v-if="group.modules.conferences"
+      document-type="publications"
+      :group="group"
       :is-loading="isLoading"
     />
-    <SubGroups v-if="groupChildren.length > 0" :subgroups="groupChildren" :is-loading="isLoading" />
-    <div v-if="!isLoading" class="description">
-      <DescriptionExpandable
-        :description="description"
-        :height-limit="400"
-        class="description-content"
-      />
-    </div>
-    <div v-else class="skeleton">
-      <SkeletonComponent width="60%" height="25px" border-radius="10px" />
-      <SkeletonComponent width="80%" height="20px" border-radius="10px" />
-      <SkeletonComponent width="45%" height="20px" border-radius="10px" />
-      <SkeletonComponent width="100%" height="15px" border-radius="10px" />
-      <SkeletonComponent width="90%" height="15px" border-radius="10px" />
-      <SkeletonComponent width="95%" height="15px" border-radius="10px" />
-    </div>
-
-    <div v-if="membersCount > 0 || isMembersLoading" class="members">
-      <div class="members-header">
-        <h2 class="title">
-          {{ $t('group.members') }}
-          <span v-if="membersCount">( {{ membersCount }} )</span>
-        </h2>
-
-        <SeeMoreArrow
-          v-if="!isMembersLoading"
-          class="see-more-button"
-          :to="{ name: 'groupMembers', params: { groupId: $route.params.groupId } }"
-        />
-      </div>
-
-      <div v-if="isMembersLoading" class="members-container">
-        <MemberListSkeleton :min-gap="90" :desktop-columns-number="6" />
-      </div>
-      <DynamicGrid v-else :min-gap="90" class="members-container">
-        <GroupMemberItem
-          v-for="member in members.slice(0, totalDisplayed)"
-          :key="member.id"
-          :user="member"
-          :is-manager="member.is_manager"
-          class="cursor-pointer shadow-drop"
-          @user-click="openProfileDrawer"
-          @close="closeProfileDrawer"
-        />
-      </DynamicGrid>
-    </div>
-
-    <div v-if="projectsCount > 0 || isProjectsLoading" class="projects">
-      <div class="projects-header">
-        <h2 class="title">
-          {{ $t('group.projects') }}
-          <span v-if="projectsCount">( {{ projectsCount }} )</span>
-        </h2>
-        <SeeMoreArrow
-          v-if="!isProjectsLoading"
-          class="see-more-button"
-          :to="{
-            name: 'groupProjects',
-            params: { groupId: $route.params.groupId },
-          }"
-        />
-      </div>
-      <div class="projects-container">
-        <CardList :is-loading="isProjectsLoading" :items="projects.slice(0, totalDisplayed)">
-          <template #default="projectListSlotProps">
-            <ProjectCard :horizontal-display="true" :project="projectListSlotProps.item" />
-          </template>
-        </CardList>
-      </div>
-    </div>
-    <BaseDrawer
-      no-footer
-      :is-opened="profileDrawer.isOpened"
-      :title="$t('profile.drawer_title')"
-      @close="closeProfileDrawer"
-      @confirm="closeProfileDrawer"
-    >
-      <UserProfileV2
-        v-if="profileDrawer.isOpened"
-        ref="profile-user"
-        :can-edit="false"
-        :user-id="profileDrawer.user_id"
-        is-preview
-        @close="closeProfileDrawer"
-      />
-    </BaseDrawer>
   </div>
 </template>
 
-<script>
-export default {
-  name: 'GroupSnapshotTab',
-
-  props: {
-    description: {
-      type: String,
-      default: '',
-    },
-
-    projectsInitialRequest: {
-      type: Object,
-      default: () => ({}),
-    },
-
-    isProjectsLoading: {
-      type: Boolean,
-      default: true,
-    },
-
-    membersInitialRequest: {
-      type: Object,
-      default: () => ({}),
-    },
-
-    isMembersLoading: {
-      type: Boolean,
-      default: true,
-    },
-
-    isLoading: {
-      type: Boolean,
-      default: true,
-    },
-    groupName: {
-      type: String,
-      default: '',
-    },
-    groupImage: {
-      type: [Object, null],
-      default: null,
-    },
-    groupEmail: {
-      type: String,
-      default: '',
-    },
-    groupVisibility: {
-      type: String,
-      default: '',
-    },
-    groupShortDescription: {
-      type: String,
-      default: '',
-    },
-    groupChildren: {
-      type: Array,
-      default: () => [],
-    },
-  },
-
-  setup(props) {
-    const { translateUsers, translateProjects } = useAutoTranslate()
-    const rawMembers = computed(() => props.membersInitialRequest.results || [])
-    const members = translateUsers(rawMembers)
-    const membersCount = computed(() => props.membersInitialRequest.count || 0)
-
-    const rawProjects = computed(() => props.projectsInitialRequest.results || [])
-    const projects = translateProjects(rawProjects)
-    const projectsCount = computed(() => props.projectsInitialRequest.count || 0)
-
-    return {
-      members,
-      membersCount,
-      projects,
-      projectsCount,
-    }
-  },
-
-  data() {
-    return {
-      style: {},
-      totalDisplayed: 12,
-      profileDrawer: {
-        isOpened: false,
-        user_id: null,
-      },
-    }
-  },
-
-  methods: {
-    async openProfileDrawer(user) {
-      this.profileDrawer.user_id = user.id
-      this.profileDrawer.isOpened = true
-    },
-
-    closeProfileDrawer() {
-      this.isEditMode = false
-      this.profileDrawer.isOpened = false
-      this.profileDrawer.user_id = null
-    },
-  },
-}
+<script setup lang="ts">
+import { TranslatedPeopleGroupModel } from '@/models/invitation.model'
+import GroupSubPreview from '@/components/group/Modules/GroupSub/GroupSubPreview.vue'
+import GroupRecapPreview from '@/components/group/Modules/Extras/GroupRecapPreview.vue'
+import GroupDescriptionPreview from '@/components/group/Modules/Extras/GroupDescriptionPreview.vue'
+import GroupSimilarsPreview from '@/components/group/Modules/Extras/GroupSimilarsPreview.vue'
+import GroupMembersPreview from '@/components/group/Modules/Members/GroupMembersPreview.vue'
+import GroupProjectsPreview from '@/components/group/Modules/Projects/GroupProjectsPreview.vue'
+import GroupDocumentsPreview from '@/components/group/Modules/Documents/GroupDocumentsPreview.vue'
+import GroupHeader from '@/components/group/Modules/GroupHeader.vue'
+import GroupLocationPreview from '@/components/group/Modules/Locations/GroupLocationPreview.vue'
+import GroupGalleryPreview from '@/components/group/Modules/Gallery/GroupGalleryPreview.vue'
+
+defineProps<{
+  group: TranslatedPeopleGroupModel
+  isLoading: boolean
+}>()
 </script>
 
 <style lang="scss" scoped>
-.members {
-  margin-top: $space-xl;
+.group-modules-list {
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
-  gap: $space-xl;
-
-  &-header {
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    width: 100%;
-    gap: $space-l;
-
-    .title {
-      font-weight: 700;
-      font-size: $font-size-l;
-      color: $primary-dark;
-    }
-  }
-
-  &-container {
-    width: 100%;
-    justify-content: space-between;
-
-    .cursor-pointer {
-      cursor: pointer;
-    }
-  }
+  gap: 1rem;
 }
 
-.skeleton {
-  margin: $space-xl 0;
+.group-infos {
+  display: grid;
+  grid-template-columns: 3fr 1fr;
+  gap: 1rem;
 }
 
-.projects {
-  margin-top: $space-2xl;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-
-  &-header {
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    width: 100%;
-    gap: $space-l;
-
-    .title {
-      font-weight: 700;
-      font-size: $font-size-l;
-      color: $primary-dark;
-    }
-  }
-
-  &-container {
-    width: 100%;
-  }
+// merge all cols if only one child
+.group-infos:has(> :only-child) {
+  grid-template-columns: 1fr;
 }
 
-@media screen and (max-width: $med-mobile) {
-  .description {
-    padding: $space-m $space-m 0 $space-m;
+@media screen and (max-width: $min-desktop) {
+  .group-infos {
+    grid-template-columns: 1fr;
   }
 }
 </style>
diff --git a/src/pages/GroupPageV2/Tabs/GroupTabs.vue b/src/pages/GroupPageV2/Tabs/GroupTabs.vue
deleted file mode 100644
index 238399ada..000000000
--- a/src/pages/GroupPageV2/Tabs/GroupTabs.vue
+++ /dev/null
@@ -1,128 +0,0 @@
-<template>
-  <div class="group-tabs">
-    <TabsLayout :align-left="true" :border="false" :tabs="groupTabs" router-view />
-  </div>
-</template>
-
-<script>
-import TabsLayout from '@/components/base/navigation/TabsLayout.vue'
-
-export default {
-  name: 'GroupTabs',
-  components: { TabsLayout },
-  props: {
-    description: {
-      type: String,
-      default: '',
-    },
-    projectsInitialRequest: {
-      type: Object,
-      default: () => ({}),
-    },
-    isProjectsLoading: {
-      type: Boolean,
-      default: true,
-    },
-    membersInitialRequest: {
-      type: Object,
-      default: () => ({}),
-    },
-    isMembersLoading: {
-      type: Boolean,
-      default: true,
-    },
-    isLoading: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  data() {
-    return {
-      addToProjectMenuVisible: false,
-    }
-  },
-  computed: {
-    groupTabs() {
-      return [
-        {
-          key: 'snapshot',
-          label: this.$t('group.snapshot'),
-          view: `/group/${this.$route.params.groupId}/snapshot`,
-          props: {
-            description: this.description,
-            projectsInitialRequest: this.projectsInitialRequest,
-            isProjectsLoading: this.isProjectsLoading,
-            membersInitialRequest: this.membersInitialRequest,
-            isMembersLoading: this.isMembersLoading,
-            isLoading: this.isLoading,
-          },
-          condition: true,
-        },
-        {
-          key: 'members',
-          label: this.$t('group.members'),
-          view: `/group/${this.$route.params.groupId}/members`,
-          props: {
-            membersInitialRequest: this.membersInitialRequest,
-            isMembersLoading: this.isMembersLoading,
-          },
-          condition: true,
-        },
-        {
-          key: 'projects',
-          label: this.$t('group.projects'),
-          view: `/group/${this.$route.params.groupId}/projects`,
-          props: {
-            projectsInitialRequest: this.projectsInitialRequest,
-            isProjectsLoading: this.isProjectsLoading,
-          },
-          condition: true,
-        },
-      ].filter((tab) => tab.condition)
-    },
-  },
-}
-</script>
-
-<style lang="scss" scoped>
-.group-tabs {
-  .dropdown-ctn {
-    position: relative;
-
-    .add-to-project-button:hover,
-    .project-config-button:hover {
-      opacity: 1 !important;
-    }
-
-    .add-to-project-button.active,
-    .project-config-button.active {
-      background-color: $white !important;
-      color: $primary-dark !important;
-
-      svg {
-        fill: $primary-dark;
-      }
-    }
-
-    .add-to-project,
-    .project-config {
-      position: absolute;
-      z-index: $zindex-toast;
-    }
-
-    .add-to-project {
-      top: 43px;
-      right: 1px;
-    }
-
-    .project-config {
-      top: 42px;
-      right: 0;
-    }
-  }
-
-  > div:nth-child(2) {
-    margin: 0 pxToRem(10px) 0 pxToRem(20px);
-  }
-}
-</style>
diff --git a/src/pages/GroupPageV2/Tabs/Locations/GroupLocationsTab.vue b/src/pages/GroupPageV2/Tabs/Locations/GroupLocationsTab.vue
new file mode 100644
index 000000000..e2b197058
--- /dev/null
+++ b/src/pages/GroupPageV2/Tabs/Locations/GroupLocationsTab.vue
@@ -0,0 +1,17 @@
+<template>
+  <BaseGroupTab :title="$t(GroupModuleTitle.locations)" :count="countElement">
+    <GroupLocationBase :group="group" />
+  </BaseGroupTab>
+</template>
+
+<script setup lang="ts">
+import GroupLocationBase from '@/components/group/Modules/Locations/GroupLocationBase.vue'
+import { GroupModuleTitle, TranslatedPeopleGroupModel } from '@/models/invitation.model'
+import BaseGroupTab from '@/pages/GroupPageV2/Tabs/BaseGroupTab.vue'
+
+const props = defineProps<{
+  group: TranslatedPeopleGroupModel
+}>()
+
+const countElement = computed<number>(() => props.group.modules?.locations)
+</script>
diff --git a/src/pages/GroupPageV2/Tabs/Members/GroupMembersEditTab.vue b/src/pages/GroupPageV2/Tabs/Members/GroupMembersEditTab.vue
new file mode 100644
index 000000000..ebe571d86
--- /dev/null
+++ b/src/pages/GroupPageV2/Tabs/Members/GroupMembersEditTab.vue
@@ -0,0 +1,62 @@
+<template>
+  <div class="team">
+    <ClientOnly>
+      <FormPanel
+        :confirm-action-name="$t('common.save')"
+        :asyncing="isSaving"
+        @close="redirect(groupMemberData)"
+        @confirm="save"
+      >
+        <GroupTeamSection v-model="form.members" />
+      </FormPanel>
+    </ClientOnly>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { TranslatedPeopleGroupModel } from '@/models/invitation.model'
+
+const props = defineProps<{ group: TranslatedPeopleGroupModel }>()
+const router = useRouter()
+
+// use group's org code if availabe
+// to allow edition of groups on the meta portal (PROJ-1032)
+const originalOrganizationCode = useOrganizationCode()
+const organizationCode = computed(() => props.group?.organization.code || originalOrganizationCode)
+
+const form = ref({
+  members: [],
+})
+
+const { setMembersData, updateGroupMembers, isSaving, groupMemberData } = useGroupMembersUpdate(
+  organizationCode,
+  props.group?.id,
+  form
+)
+
+const { startEditWatcher, stopEditWatcher } = useEditWatcher(form)
+
+const redirect = (numberMembers) => {
+  router.push({
+    name: numberMembers ? 'groupMembers' : 'groupSnapshot',
+    params: { groupId: props.group.id },
+  })
+}
+
+const save = async () => {
+  try {
+    const { removed, added } = await updateGroupMembers()
+    stopEditWatcher()
+    // refresh group parent info
+    await refreshNuxtData(`${organizationCode.value}::group::${props.group.id}`)
+    redirect(groupMemberData.value.length - removed + added)
+  } catch (e) {
+    console.error(e)
+  }
+}
+
+onMounted(async () => {
+  await setMembersData()
+  startEditWatcher()
+})
+</script>
diff --git a/src/pages/GroupPageV2/Tabs/Members/GroupMembersTab.vue b/src/pages/GroupPageV2/Tabs/Members/GroupMembersTab.vue
new file mode 100644
index 000000000..d904a81cf
--- /dev/null
+++ b/src/pages/GroupPageV2/Tabs/Members/GroupMembersTab.vue
@@ -0,0 +1,30 @@
+<template>
+  <BaseGroupTab :title="$t(GroupModuleTitle.members)" :count="countElement">
+    <div class="container">
+      <BaseGroupMembersList :group="group" />
+    </div>
+  </BaseGroupTab>
+</template>
+
+<script setup lang="ts">
+import BaseGroupMembersList from '@/components/group/Modules/Members/BaseGroupMembersList.vue'
+import { GroupModuleTitle, TranslatedPeopleGroupModel } from '@/models/invitation.model'
+import BaseGroupTab from '@/pages/GroupPageV2/Tabs/BaseGroupTab.vue'
+
+defineOptions({ name: 'GroupMembersTab' })
+
+const props = defineProps<{
+  group: TranslatedPeopleGroupModel
+}>()
+
+const countElement = computed<number>(() => props.group.modules?.members)
+</script>
+
+<style lang="scss" scoped>
+.container {
+  width: 100%;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+}
+</style>
diff --git a/src/pages/GroupPageV2/Tabs/Projects/GroupProjectsEditTab.vue b/src/pages/GroupPageV2/Tabs/Projects/GroupProjectsEditTab.vue
new file mode 100644
index 000000000..b7743364a
--- /dev/null
+++ b/src/pages/GroupPageV2/Tabs/Projects/GroupProjectsEditTab.vue
@@ -0,0 +1,59 @@
+<template>
+  <div class="group-projects">
+    <FetchLoader :status="isLoading ? 'pending' : 'success'">
+      <FormPanel
+        :confirm-action-name="$t('common.save')"
+        :asyncing="isSaving"
+        @close="redirect(groupProjectData.length)"
+        @confirm="save"
+      >
+        <ProjectSection v-model="form.featuredProjects" />
+      </FormPanel>
+    </FetchLoader>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { TranslatedPeopleGroupModel } from '@/models/invitation.model'
+
+// use group's org code if availabe
+// to allow edition of groups on the meta portal (PROJ-1032)
+const originalOrganizationCode = useOrganizationCode()
+const organizationCode = computed(() => props.group.organization?.code || originalOrganizationCode)
+const props = defineProps<{ group: TranslatedPeopleGroupModel }>()
+const router = useRouter()
+
+const form = ref({
+  featuredProjects: [],
+})
+
+const { groupProjectData, setProjectsData, updateGroupProjects, isSaving, isLoading } =
+  useGroupProjectsUpdate(organizationCode, props.group.id, form)
+
+const { startEditWatcher, stopEditWatcher } = useEditWatcher(form)
+
+// redirect to projects page only if the group still has projects
+const redirect = (numberProject: number) => {
+  router.push({
+    name: numberProject ? 'groupProjects' : 'groupSnapshot',
+    params: { groupId: props.group.id },
+  })
+}
+
+const save = async () => {
+  try {
+    const { removed, added } = await updateGroupProjects()
+    stopEditWatcher()
+    // refresh group parent info
+    await refreshNuxtData(`${organizationCode.value}::group::${props.group.id}`)
+    redirect(groupProjectData.value.length - removed + added)
+  } catch (e) {
+    console.error(e)
+  }
+}
+
+onMounted(async () => {
+  await setProjectsData()
+  startEditWatcher()
+})
+</script>
diff --git a/src/pages/GroupPageV2/Tabs/Projects/GroupProjectsTab.vue b/src/pages/GroupPageV2/Tabs/Projects/GroupProjectsTab.vue
new file mode 100644
index 000000000..fbc4fc0a5
--- /dev/null
+++ b/src/pages/GroupPageV2/Tabs/Projects/GroupProjectsTab.vue
@@ -0,0 +1,18 @@
+<template>
+  <BaseGroupTab :title="$t(GroupModuleTitle.featured_projects)" :count="countElement">
+    <BaseGroupProjectsList :group="group" />
+  </BaseGroupTab>
+</template>
+
+<script setup lang="ts">
+import BaseGroupProjectsList from '@/components/group/Modules/Projects/BaseGroupProjectsList.vue'
+
+import { GroupModuleTitle, TranslatedPeopleGroupModel } from '@/models/invitation.model'
+import BaseGroupTab from '@/pages/GroupPageV2/Tabs/BaseGroupTab.vue'
+
+const props = defineProps<{
+  group: TranslatedPeopleGroupModel
+}>()
+
+const countElement = computed(() => props.group.modules?.featured_projects)
+</script>
diff --git a/src/pages/GroupsPage/GroupsPage.vue b/src/pages/GroupsPage/GroupsPage.vue
index 9ce8a6652..21cb5ce93 100644
--- a/src/pages/GroupsPage/GroupsPage.vue
+++ b/src/pages/GroupsPage/GroupsPage.vue
@@ -1,29 +1,47 @@
-<script setup>
-import { getHierarchyGroups } from '@/api/groups.service.ts'
-import useOrganizationsStore from '@/stores/useOrganizations.ts'
-import { getOrganizationByCode } from '@/api/organizations.service'
-
-const props = defineProps({
-  groupId: {
-    type: String,
-    default: '',
-  },
-})
+<script setup lang="ts">
+import { getHierarchyGroups } from '@/api/v2/group.service'
+import { useLpiHead2 } from '@/composables/useLpiHead'
 
-const organizationsStore = useOrganizationsStore()
+const router = useRouter()
+const props = withDefaults(defineProps<{ groupId?: string }>(), { groupId: '' })
+const organizationCode = useOrganizationCode()
 
 const { searchFromQuery } = useSearch('groups')
-
 const { t } = useNuxtI18n()
 
-// ???
-// const permissions = usePermissions()
+const { data, isLoading } = getHierarchyGroups(organizationCode)
+const rootId = computed(() => data.value?.id)
+// const isLoading = true
+const groupsIndex = computed(() => {
+  const groups = data.value
+  const index = {}
+  const iterate = (subgroups, hierarchy) => {
+    subgroups.forEach((group) => {
+      const route = {
+        name: 'Groups',
+        params: {},
+      }
+      if (hierarchy.length !== 0) {
+        route.params = {
+          groupId: group.id,
+        }
+      }
+      index[group.id] = {
+        ...group,
+        hierarchy: [...hierarchy],
+        route,
+        children: group.children?.map((g) => g.id) || [],
+      }
+      // use group id in hierachy an rehydrate when needed
+      // to avoid self reference hell
+      if (group.children && group.children.length) iterate(group.children, [...hierarchy, group.id])
+    })
+  }
 
-const router = useRouter()
+  iterate(groups ? [groups] : [], [])
 
-const isLoading = ref(true)
-const groupsIndex = ref(null)
-const rootId = ref(null)
+  return index
+})
 
 const currentGroup = computed(() => {
   if (!groupsIndex.value) return null
@@ -46,9 +64,7 @@ const hierarchy = computed(() => {
   return (currentGroup.value?.hierarchy || []).map((groupId) => groupsIndex.value[groupId])
 })
 
-const hasSearch = computed(() => {
-  return !!searchFromQuery.value.search
-})
+const hasSearch = computed(() => !!searchFromQuery.value.search)
 
 const fixedSearch = computed(() => {
   return {
@@ -71,67 +87,12 @@ watchEffect(() => {
   }
 })
 
-const buildIndex = (groups) => {
-  const index = {}
-  const iterate = (subgroups, hierarchy) => {
-    subgroups.forEach((group) => {
-      const route = {
-        name: 'Groups',
-      }
-      if (hierarchy.length !== 0) {
-        route.params = {
-          groupId: group.id,
-        }
-      }
-      index[group.id] = {
-        ...group,
-        hierarchy: [...hierarchy],
-        route,
-        children: group.children?.map((g) => g.id) || [],
-      }
-      // use group id in hierachy an rehydrate when needed
-      // to avoid self reference hell
-      if (group.children && group.children.length) iterate(group.children, [...hierarchy, group.id])
-    })
-  }
-
-  iterate(groups ? [groups] : [], [])
-
-  groupsIndex.value = index
-}
-
-const loadGroups = async () => {
-  isLoading.value = true
-  const groups = await getHierarchyGroups(organizationsStore.current.code)
-  rootId.value = groups.id
-  buildIndex(groups)
-  isLoading.value = false
-}
-
-const showGroups = () => {
-  navigateTo({ query: {} })
-}
-
-onMounted(async () => {
-  await loadGroups()
+const showGroups = () => navigateTo({ query: {} })
+useLpiHead2({
+  title: computed(() => t('common.groups')),
 })
-
-try {
-  const runtimeConfig = useRuntimeConfig()
-  const organization = await getOrganizationByCode(runtimeConfig.public.appApiOrgCode)
-  const { image, dimensions } = useImageAndDimension(organization?.banner_image, 'medium')
-  useLpiHead(
-    useRequestURL().toString(),
-    computed(() => t('common.groups')),
-    organization?.dashboard_subtitle,
-    image,
-    dimensions
-  )
-} catch (err) {
-  // DGAF
-  console.log(err)
-}
 </script>
+
 <template>
   <div class="page-section-extra-wide groups-layout page-top">
     <h1 class="page-title">
@@ -177,11 +138,7 @@ try {
             switchable-display
           >
             <template #default="cardListSlotProps">
-              <GroupCard
-                :group="cardListSlotProps.item"
-                :has-sub-groups-link="!!cardListSlotProps.item?.children?.length"
-                :mode="cardListSlotProps.mode"
-              />
+              <GroupCard :group="cardListSlotProps.item" :mode="cardListSlotProps.mode" />
             </template>
           </CardList>
         </div>
diff --git a/src/pages/MapPage/MapPage.vue b/src/pages/MapPage/MapPage.vue
index bf57f7848..d1a9bfd9b 100755
--- a/src/pages/MapPage/MapPage.vue
+++ b/src/pages/MapPage/MapPage.vue
@@ -1,76 +1,44 @@
+<template>
+  <div id="projects-map">
+    <Transition name="fade">
+      <div v-if="isLoading" class="map-loader">
+        <LoaderComplex :label="$t('location.loading')" />
+      </div>
+    </Transition>
+    <GeneralMap :locations="data" :loading="isLoading" />
+    <div v-if="!isLoading && isEmpty" class="empty-map">
+      {{ $t('map.empty') }}
+    </div>
+  </div>
+</template>
+
 <script setup lang="ts">
-import { getLocations } from '@/api/locations.services'
-import useOrganizationsStore from '@/stores/useOrganizations'
-import { getOrganizationByCode } from '@/api/organizations.service'
+import { getLocations } from '@/api/v2/location.service'
+import GeneralMap from '@/components/map/GeneralMap.vue'
+import { useLpiHead2 } from '@/composables/useLpiHead'
 
-const isClient = import.meta.client
-const organizationsStore = useOrganizationsStore()
+const organizationCode = useOrganizationCode()
 const { t } = useNuxtI18n()
 
-const projectLocations = ref([])
-const loading = ref(true)
-
-const loadLocations = async (page = null) => {
-  loading.value = true
-  const locations = await getLocations({ organizations: [organizationsStore.current.code] }, page)
-  projectLocations.value.push(...locations)
-  // if (
-  //     locations.total_page > 1 &&
-  //     !!locations.next_page &&
-  //     locations.current_page < locations.total_page // weird backend bug: if no location we still get a next page
-  // ) {
-  //     await this.loadLocations(locations.next)
-  // } else
-  // if (this.$refs && this.$refs.map) this.$refs.map.centerMap()
-  /*
-   ** The previous line checks if the refs are still set, in case the user leaves the page to fast
-   ** Not checking this might create an error after the API calls are done.
-   */
-  loading.value = false
-}
+const { isLoading, data } = getLocations(organizationCode)
+
+watch(data, () => console.log(data))
+
+const isEmpty = computed(() => data.value.groups.length + data.value.projects.length === 0)
 
 onBeforeUnmount(() => {
-  document.getElementsByTagName('body')[0].classList.remove('map-no-scroll')
+  document.body.classList.remove('map-no-scroll')
 })
 
 onMounted(async () => {
-  document.getElementsByTagName('body')[0].classList.add('map-no-scroll')
-  await loadLocations()
+  document.body.classList.add('map-no-scroll')
 })
 
-try {
-  const runtimeConfig = useRuntimeConfig()
-  const organization = await getOrganizationByCode(runtimeConfig.public.appApiOrgCode)
-  const { image, dimensions } = useImageAndDimension(organization?.banner_image, 'medium')
-  useLpiHead(
-    useRequestURL().toString(),
-    computed(() => t('map.page-title')),
-    computed(() => t('map.page-title')),
-    image,
-    dimensions
-  )
-} catch (err) {
-  console.log(err)
-}
+useLpiHead2({
+  title: computed(() => t('map.page-title')),
+  description: computed(() => t('map.page-title')),
+})
 </script>
-<template>
-  <div id="projects-map">
-    <Transition name="fade">
-      <div v-if="loading" class="map-loader">
-        <LoaderComplex :label="$t('location.loading')" />
-      </div>
-    </Transition>
-    <LazyGeneralMap v-if="isClient" :locations="projectLocations" :loading="loading" />
-    <div v-if="!loading && !projectLocations.length" class="empty-map">
-      {{ $t('map.empty') }}
-    </div>
-  </div>
-</template>
-
-<style lang="scss">
-// do NOT scope this style, it will break the map
-@import '@/design/scss/map';
-</style>
 
 <style lang="scss" scoped>
 #projects-map {
@@ -133,8 +101,4 @@ try {
     }
   }
 }
-
-body.map-no-scroll {
-  overflow: hidden;
-}
 </style>
diff --git a/src/pages/UserProfilePageV2/Tabs/ProfileGroupsEditTab.vue b/src/pages/UserProfilePageV2/Tabs/ProfileGroupsEditTab.vue
index d6c760673..d694cb46e 100644
--- a/src/pages/UserProfilePageV2/Tabs/ProfileGroupsEditTab.vue
+++ b/src/pages/UserProfilePageV2/Tabs/ProfileGroupsEditTab.vue
@@ -18,7 +18,6 @@
                   v-if="cardListSlotProps.item"
                   :class="{ 'is-other-org': groupIsOtherOrg(cardListSlotProps.item) }"
                   :group="cardListSlotProps.item"
-                  :title="groupIsOtherOrg(cardListSlotProps.item) ? t('group.is-other-org') : ''"
                   @click.capture="cancelIfOtherOrg($event, cardListSlotProps.item)"
                 />
               </template>
diff --git a/src/pages/UserProfilePageV2/Tabs/ProfileGroupsTab.vue b/src/pages/UserProfilePageV2/Tabs/ProfileGroupsTab.vue
index 4d42148ad..225fe3af6 100644
--- a/src/pages/UserProfilePageV2/Tabs/ProfileGroupsTab.vue
+++ b/src/pages/UserProfilePageV2/Tabs/ProfileGroupsTab.vue
@@ -18,7 +18,6 @@
                 v-if="cardListSlotProps.item"
                 :class="{ 'is-other-org': groupIsOtherOrg(cardListSlotProps.item) }"
                 :group="cardListSlotProps.item"
-                :title="groupIsOtherOrg(cardListSlotProps.item) ? t('group.is-other-org') : ''"
                 @navigated-away="emit('close')"
                 @click.capture="cancelIfOtherOrg($event, cardListSlotProps.item)"
               />
diff --git a/src/pages/UserProfilePageV2/Tabs/ProfileSummaryTab.vue b/src/pages/UserProfilePageV2/Tabs/ProfileSummaryTab.vue
index 0b768f24e..f265b7f9b 100644
--- a/src/pages/UserProfilePageV2/Tabs/ProfileSummaryTab.vue
+++ b/src/pages/UserProfilePageV2/Tabs/ProfileSummaryTab.vue
@@ -26,7 +26,7 @@
               :to="{ name: 'ResearcherPublicationsOther', params: { userId: user.id } }"
             />
           </div>
-          <ResearcherDocumentsList
+          <OwnResearcherDocumentsList
             doc-type="publications"
             preview
             :limit="documentsLimit"
@@ -47,7 +47,7 @@
               :to="{ name: 'ResearcherConferencesOther', params: { userId: user.id } }"
             />
           </div>
-          <ResearcherDocumentsList
+          <OwnResearcherDocumentsList
             doc-type="conferences"
             preview
             :limit="documentsLimit"
@@ -160,7 +160,7 @@ import UserDescriptions from '@/components/people/UserDescriptions.vue'
 import SkillSummary from '@/components/people/skill/SkillSummary.vue'
 import useUsersStore from '@/stores/useUsers.ts'
 import SeeMoreArrow from '@/components/base/button/SeeMoreArrow.vue'
-import ResearcherDocumentsList from '@/components/people/Researcher/ResearcherDocumentsList.vue'
+import OwnResearcherDocumentsList from '@/components/people/Researcher/OwnResearcherDocumentsList.vue'
 
 export default {
   name: 'ProfileSummaryTab',
@@ -171,7 +171,7 @@ export default {
     UserDescriptions,
     SkillSummary,
     SeeMoreArrow,
-    ResearcherDocumentsList,
+    OwnResearcherDocumentsList,
   },
 
   inject: {
diff --git a/src/pages/UserProfilePageV2/Tabs/ResearcherDocumentsTab.vue b/src/pages/UserProfilePageV2/Tabs/ResearcherDocumentsTab.vue
index a98156477..419144250 100644
--- a/src/pages/UserProfilePageV2/Tabs/ResearcherDocumentsTab.vue
+++ b/src/pages/UserProfilePageV2/Tabs/ResearcherDocumentsTab.vue
@@ -5,7 +5,7 @@
         {{ title }}
         <span>({{ documentsCount }})</span>
       </h4>
-      <ResearcherDocumentsList v-if="documentsCount > 0" :doc-type="docType" :user="user" />
+      <OwnResearcherDocumentsList v-if="documentsCount > 0" :doc-type="docType" :user="user" />
       <div v-else class="document-tab-empty">
         {{ documentEmpty }}
       </div>
@@ -14,14 +14,15 @@
 </template>
 
 <script setup lang="ts">
-import ResearcherDocumentsList from '@/components/people/Researcher/ResearcherDocumentsList.vue'
+import OwnResearcherDocumentsList from '@/components/people/Researcher/OwnResearcherDocumentsList.vue'
+import { DocumentType } from '@/interfaces/researcher'
 import { UserModel } from '@/models/user.model'
 
 defineOptions({ name: 'ResearcherDocumentsTab' })
 
 const { t } = useNuxtI18n()
 
-const props = defineProps<{ docType: string; user: UserModel }>()
+const props = defineProps<{ docType: DocumentType; user: UserModel }>()
 
 const title = computed(() => t(`me.${props.docType}`))
 const documentEmpty = computed(() => t(`you.no-${props.docType}`))
diff --git a/src/server/routes/geocoding.ts b/src/server/routes/geocoding.ts
index 34d7ef2c3..d1dbf4144 100644
--- a/src/server/routes/geocoding.ts
+++ b/src/server/routes/geocoding.ts
@@ -24,7 +24,7 @@ async function fetchFromPhoton(address, locale, runtimeConfig) {
         lat,
         lng,
         description: '',
-        type: 'team',
+        type: 'address',
       } satisfies Geocoding
     })
 
@@ -55,7 +55,7 @@ async function fetchFromGoogle(address, locale, runtimeConfig) {
         lat,
         lng,
         description: '',
-        type: 'team',
+        type: 'address',
       } satisfies Geocoding
     })
   return suggestedLocations
diff --git a/src/skeletons/base.skeletons.ts b/src/skeletons/base.skeletons.ts
new file mode 100644
index 000000000..b01fd84fb
--- /dev/null
+++ b/src/skeletons/base.skeletons.ts
@@ -0,0 +1,22 @@
+import { DEFAULT_PAGINATION_LIMIT, PaginationResult } from '@/composables/usePagination'
+
+export const maxSkeleton = (elementCount: number, limit: number | null): number => {
+  const sanLimit = limit ?? DEFAULT_PAGINATION_LIMIT
+  return Math.min(elementCount ?? sanLimit, sanLimit)
+}
+
+export const factoriesSkeleton = <T>(element: () => T, number: number): T[] => {
+  return Array.from(Array(maxSkeleton(number, DEFAULT_PAGINATION_LIMIT))).map(() => element())
+}
+
+export const factoryPagination = <T>(
+  element: () => T,
+  number: number = DEFAULT_PAGINATION_LIMIT
+): PaginationResult<T> => {
+  const results = factoriesSkeleton(element, number)
+
+  return {
+    count: results.length,
+    results,
+  }
+}
diff --git a/src/skeletons/crisalid.skeletons.ts b/src/skeletons/crisalid.skeletons.ts
new file mode 100644
index 000000000..1f40d715c
--- /dev/null
+++ b/src/skeletons/crisalid.skeletons.ts
@@ -0,0 +1,46 @@
+import { Document, Identifier, ResearcherDocumentAnalytics } from '@/interfaces/researcher'
+import { factoriesSkeleton } from '@/skeletons/base.skeletons'
+import { randomInt } from 'es-toolkit'
+
+export const documentAnalyticsSkeleton = (
+  def?: Partial<ResearcherDocumentAnalytics>
+): ResearcherDocumentAnalytics => ({
+  document_types: {
+    Book: randomInt(10),
+    Grant: randomInt(10),
+    Note: randomInt(10),
+  },
+  years: [
+    { year: 2020, total: randomInt(10) },
+    { year: 2021, total: randomInt(10) },
+    { year: 2022, total: randomInt(10) },
+    { year: 2023, total: randomInt(10) },
+    { year: 2024, total: randomInt(10) },
+    { year: 2025, total: randomInt(10) },
+    { year: 2026, total: randomInt(10) },
+  ],
+  roles: {
+    actor: randomInt(10),
+    client: randomInt(10),
+    funder: randomInt(10),
+  },
+  ...(def || {}),
+})
+
+export const identifierSkeleton = (def?: Partial<Identifier>): Omit<Identifier, 'id'> => ({
+  value: 'lorem',
+  harvester: 'hal',
+  ...(def || {}),
+})
+
+export const researchDocumentSkeleton = (def?: Partial<Document>): Omit<Document, 'id'> => ({
+  title: 'Ipsum nostrud officia dolor esse exercitation mollit.',
+  description: 'Ipsum nostrud officia dolor esse exercitation mollit.',
+  document_type: 'Book',
+  contributors: [],
+  // @ts-expect-error ignore not id
+  identifiers: factoriesSkeleton(identifierSkeleton, randomInt(5)),
+  publication_date: null,
+  similars: 0,
+  ...(def || {}),
+})
diff --git a/src/skeletons/gallery.skeletons.ts b/src/skeletons/gallery.skeletons.ts
new file mode 100644
index 000000000..d706c74fc
--- /dev/null
+++ b/src/skeletons/gallery.skeletons.ts
@@ -0,0 +1,23 @@
+import { ImageModel } from '@/models/image.model'
+
+export const imageGallerySkeleton = (def?: Partial<ImageModel>): Omit<ImageModel, 'id'> => {
+  const url = ''
+  return {
+    url,
+    name: 'lorem',
+    file: null,
+    variations: {
+      large: url,
+      full: url,
+      medium: url,
+      small: url,
+      original: url,
+    },
+    scale_x: 0,
+    scale_y: 0,
+    left: 0,
+    top: 0,
+    natural_ratio: 0,
+    ...(def || {}),
+  }
+}
diff --git a/src/skeletons/group.skeletons.ts b/src/skeletons/group.skeletons.ts
new file mode 100644
index 000000000..25f4c2622
--- /dev/null
+++ b/src/skeletons/group.skeletons.ts
@@ -0,0 +1,53 @@
+import { GroupMember } from '@/models/group.model'
+import { PeopleGroupModel } from '@/models/invitation.model'
+
+export const groupSkeleton = (def?: Partial<PeopleGroupModel>): Omit<PeopleGroupModel, 'id'> => ({
+  slug: 'slug',
+  name: 'name',
+  description: 'Esse culpa qui quis ea aliqua commodo reprehenderit minim elit dolore amet Lorem.',
+  short_description:
+    'Esse culpa qui quis ea aliqua commodo reprehenderit minim elit dolore amet Lorem.',
+  email: '',
+  type: 'type',
+  header_image: null,
+  publication_status: 'public',
+  organization: null,
+  hierarchy: [],
+  sdgs: [],
+  tags: [],
+  location: null,
+  children: [],
+  modules: {
+    members: 0,
+    featured_projects: 0,
+    publications: 0,
+    conferences: 0,
+    similars: 0,
+    subgroups: 0,
+    locations: 0,
+    gallery: 0,
+  },
+  ...(def || {}),
+})
+
+export const memberSkeleton = (def?: Partial<GroupMember>): Omit<GroupMember, 'id'> => ({
+  name: {
+    firstname: 'firstname',
+    lastname: 'lastname',
+  },
+  slug: 'string',
+  email: 'email@email.fr',
+  roles: [],
+  orgs: [],
+  given_name: 'given_name',
+  family_name: 'family_name',
+  permissions: [],
+  description: 'description',
+  resources: {
+    files: 0,
+    links: 0,
+  },
+  is_manager: false,
+  is_leader: false,
+  ...(def || {}),
+})
diff --git a/src/skeletons/project.skeletons.ts b/src/skeletons/project.skeletons.ts
new file mode 100644
index 000000000..d6d4cce0a
--- /dev/null
+++ b/src/skeletons/project.skeletons.ts
@@ -0,0 +1,44 @@
+import { ProjectModel } from '@/models/project.model'
+import { TagModel } from '@/models/tag.model'
+import { factoriesSkeleton } from '@/skeletons/base.skeletons'
+import { randomInt } from 'es-toolkit'
+
+export const tagSkeleton = (def?: Partial<ProjectModel>): Omit<TagModel, 'id'> => ({
+  title: 'Occaecat',
+  title_fr: 'Occaecat',
+  title_en: 'Occaecat',
+  description: 'Adipisicing magna qui est esse do ipsum nostrud ut dolor.',
+  description_en: 'Anim cupidatat nulla deserunt aliqua magna enim occaecat quis cupidatat Lorem.',
+  description_fr:
+    'Velit id fugiat sint occaecat ad laborum reprehenderit eu minim ut Lorem pariatur nulla voluptate.',
+  ...(def || {}),
+})
+
+export const projectSkeleton = (def?: Partial<ProjectModel>): Omit<ProjectModel, 'id'> => ({
+  title: 'title',
+  description: 'Elit veniam consectetur sunt officia.',
+  header_image: null,
+  is_locked: false,
+  is_shareable: false,
+  purpose: 'Elit veniam consectetur sunt officia.',
+  language: 'fr',
+  locations: [],
+  publication_status: 'public',
+  life_status: 'completed',
+  reviews: [],
+  // @ts-expect-error no id in tags
+  tags: factoriesSkeleton(tagSkeleton, randomInt(3)),
+  is_followed: {
+    is_followed: false,
+    follow_id: null,
+  },
+  follows: [],
+  links: [],
+  files: [],
+  announcements: [],
+  blog_entries: [],
+  goals: [],
+  slug: 'slug',
+  updated_at: '',
+  ...(def || {}),
+})
diff --git a/src/stores/useOrganizations.ts b/src/stores/useOrganizations.ts
index 955452c6a..14787f904 100644
--- a/src/stores/useOrganizations.ts
+++ b/src/stores/useOrganizations.ts
@@ -79,6 +79,14 @@ const useOrganizationsStore = defineStore('organizations', () => {
     }
   }
 
+  async function getOrFetchOrganization() {
+    if (!current.value) {
+      const runtimeConfig = useRuntimeConfig()
+      await getCurrentOrganization(runtimeConfig.public.appApiOrgCode)
+    }
+    return current.value
+  }
+
   async function getAllOrganizations(): Promise<APIResponseList<OrganizationOutput>> {
     try {
       const response = await getOrganizations()
@@ -121,6 +129,7 @@ const useOrganizationsStore = defineStore('organizations', () => {
     termsUpdatedAt,
     // actions
     getCurrentOrganization,
+    getOrFetchOrganization,
     getAllOrganizations,
     updateCurrentOrganization,
     // needed in unit test, shouldn't be used anywhere else
diff --git a/src/stores/useProjects.ts b/src/stores/useProjects.ts
index c8481edd5..867404017 100644
--- a/src/stores/useProjects.ts
+++ b/src/stores/useProjects.ts
@@ -1,9 +1,9 @@
 import { defineStore } from 'pinia'
-import { ProjectOutput, ProjectPatchInput } from '@/models/project.model'
+import { ProjectOutput, ProjectPatchInput, TranslatedProject } from '@/models/project.model'
 import { getProject, patchProject, lockUnlockProject } from '@/api/projects.service'
 
 export interface ProjectState {
-  project: ProjectOutput
+  project: ProjectOutput | TranslatedProject
 }
 
 const useProjectsStore = defineStore('projects', {
diff --git a/tests/factories/group.factory.ts b/tests/factories/group.factory.ts
index a926f8d37..e80875b71 100644
--- a/tests/factories/group.factory.ts
+++ b/tests/factories/group.factory.ts
@@ -1,6 +1,10 @@
 import { createFactory } from 'faker-create-factory'
 import BaseFactory from './base.factory'
 import { GroupModel, GroupModelInput } from '@/models/group.model'
+import { PeopleGroupModel, TranslatedPeopleGroupModel } from '@/models/invitation.model'
+import { ImageFactory } from './image.factory'
+import { OrganizationOutputFactory } from './organization.factory'
+import { BaseTranslatedLocationFactory } from './location.factory'
 
 export const groupFactory = createFactory<GroupModel>((faker) => ({
   ...BaseFactory.generate(),
@@ -13,3 +17,42 @@ export const groupFactory = createFactory<GroupModel>((faker) => ({
 export const groupInputFactory = createFactory<GroupModelInput>((faker) => ({
   user_ids: [],
 }))
+
+export const peopleGroupFactory = createFactory<PeopleGroupModel>((faker) => ({
+  ...BaseFactory.generate(),
+  id: faker.datatype.number(),
+  slug: faker.name.title(),
+  name: faker.name.title(),
+  description: faker.lorem.text(100),
+  short_description: faker.lorem.text(20),
+  email: faker.internet.email(),
+  type: faker.datatype.string(),
+  header_image: ImageFactory.generate(),
+  publication_status: faker.datatype.string(),
+  organization: OrganizationOutputFactory.generate(),
+  children: [],
+  modules: {
+    members: 0,
+    featured_projects: 0,
+    publications: 0,
+    conferences: 0,
+    subgroups: 0,
+    similars: 0,
+    locations: 0,
+    gallery: 0,
+  },
+  sdgs: [],
+  tags: [],
+  location: null,
+  hierarchy: null,
+}))
+
+export const groupTranslatedFactory = createFactory<TranslatedPeopleGroupModel>((faker) => ({
+  ...peopleGroupFactory.generate(),
+  location: BaseTranslatedLocationFactory.generate(),
+  $t: {
+    name: faker.name.title(),
+    description: faker.lorem.text(100),
+    short_description: faker.lorem.text(20),
+  },
+}))
diff --git a/tests/factories/location.factory.ts b/tests/factories/location.factory.ts
index 1f791e483..ddc30c6ed 100644
--- a/tests/factories/location.factory.ts
+++ b/tests/factories/location.factory.ts
@@ -1,6 +1,6 @@
 import { createFactory } from 'faker-create-factory'
 
-import { LocationModel } from '@/models/location.model'
+import { BaseTranslatedLocationModel, LocationModel } from '@/models/location.model'
 import BaseFactory from './base.factory'
 
 const LocationFactory = createFactory<LocationModel>((faker) => ({
@@ -14,4 +14,21 @@ const LocationFactory = createFactory<LocationModel>((faker) => ({
   project: null,
 }))
 
+export const BaseTranslatedLocationFactory = createFactory<BaseTranslatedLocationModel>(
+  (faker) => ({
+    ...BaseFactory.generate(),
+    id: faker.datatype.number(),
+    title: faker.lorem.text(),
+    description: faker.lorem.text(),
+    lat: Number(faker.address.latitude()),
+    lng: Number(faker.address.longitude()),
+    type: 'team',
+    project: null,
+    $t: {
+      title: faker.lorem.text(),
+      description: faker.lorem.text(),
+    },
+  })
+)
+
 export default LocationFactory
diff --git a/tests/unit/components/group/GroupHeader/GroupHeaderSkeleton.spec.ts b/tests/unit/components/group/GroupHeader/GroupHeaderSkeleton.spec.ts
deleted file mode 100644
index a939e3aea..000000000
--- a/tests/unit/components/group/GroupHeader/GroupHeaderSkeleton.spec.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { lpiMount } from '@/../tests/helpers/LpiMount'
-import english from '@/i18n/locales/en.json'
-import GroupHeaderSkeleton from '@/components/group/GroupHeader/GroupHeaderSkeleton.vue'
-import { beforeEach, describe, expect, it } from 'vitest'
-
-const i18n = {
-  locale: 'en',
-  fallbackLocale: 'en',
-  messages: {
-    en: english,
-  },
-}
-
-describe('GroupHeader.vue', () => {
-  let wrapper
-  let defaultParams
-
-  beforeEach(() => {
-    defaultParams = {
-      i18n,
-    }
-  })
-
-  it('should render GroupHeader component', () => {
-    wrapper = lpiMount(GroupHeaderSkeleton, defaultParams)
-    expect(wrapper.exists()).toBe(true)
-  })
-})
diff --git a/tests/unit/components/group/GroupHeader/GroupHeaderV2.spec.ts b/tests/unit/components/group/GroupHeader/GroupHeaderV2.spec.ts
index bea1bad4a..0f192e595 100644
--- a/tests/unit/components/group/GroupHeader/GroupHeaderV2.spec.ts
+++ b/tests/unit/components/group/GroupHeader/GroupHeaderV2.spec.ts
@@ -1,6 +1,6 @@
 import { lpiMount } from '@/../tests/helpers/LpiMount'
+import GroupHeader from '@/components/group/Modules/GroupHeader.vue'
 import english from '@/i18n/locales/en.json'
-import GroupHeaderV2 from '@/components/group/GroupHeader/GroupHeaderV2.vue'
 import { beforeEach, describe, expect, it } from 'vitest'
 
 const i18n = {
@@ -38,7 +38,7 @@ describe('GroupHeaderV2.vue', () => {
   })
 
   it('should render GroupHeaderV2 component', () => {
-    wrapper = lpiMount(GroupHeaderV2, defaultParams)
+    wrapper = lpiMount(GroupHeader, defaultParams)
     expect(wrapper.exists()).toBe(true)
   })
 })
diff --git a/tests/unit/components/group/ProjectMemberSection/ProjectMemberSection.spec.ts b/tests/unit/components/group/ProjectMemberSection/ProjectMemberSection.spec.ts
index 88e07ba7f..6a37b30f8 100644
--- a/tests/unit/components/group/ProjectMemberSection/ProjectMemberSection.spec.ts
+++ b/tests/unit/components/group/ProjectMemberSection/ProjectMemberSection.spec.ts
@@ -1,8 +1,8 @@
 import { lpiMount } from '@/../tests/helpers/LpiMount'
 import english from '@/i18n/locales/en.json'
-import ProjectMemberSection from '@/components/group/ProjectMemberSection/ProjectMemberSection.vue'
 import { beforeEach, describe, expect, it } from 'vitest'
 import { GroupMemberFactory } from '@/../tests/factories/group-member.factory'
+import ProjectMemberSection from '@/components/project/ProjectMemberSection/ProjectMemberSection.vue'
 
 const i18n = {
   locale: 'en',
diff --git a/tests/unit/components/people/GroupMemberItem/GroupMemberItem.spec.ts b/tests/unit/components/people/GroupMemberItem/GroupMemberItem.spec.ts
index 1b132c092..0bc7dcdb6 100644
--- a/tests/unit/components/people/GroupMemberItem/GroupMemberItem.spec.ts
+++ b/tests/unit/components/people/GroupMemberItem/GroupMemberItem.spec.ts
@@ -1,8 +1,8 @@
 import { lpiMount, lpiShallowMount } from '@/../tests/helpers/LpiMount'
 import english from '@/i18n/locales/en.json'
-import GroupMemberItem from '@/components/people/GroupMemberItem/GroupMemberItem.vue'
 import { beforeEach, describe, expect, it } from 'vitest'
 import GroupMemberFactory from '@/../tests/factories/group-member.factory'
+import GroupMemberItem from '@/components/group/Modules/Members/GroupMemberItem.vue'
 
 const i18n = {
   locale: 'en',
diff --git a/tests/unit/components/project/ProjectHeader.spec.ts b/tests/unit/components/project/ProjectHeader.spec.ts
index ab90d15ad..b633f8bc4 100644
--- a/tests/unit/components/project/ProjectHeader.spec.ts
+++ b/tests/unit/components/project/ProjectHeader.spec.ts
@@ -1,6 +1,6 @@
 import { lpiShallowMount } from '@/../tests/helpers/LpiMount'
 import english from '@/i18n/locales/en.json'
-import ProjectHeader from '@/components/project/ProjectHeader.vue'
+import ProjectHeader from '@/components/project/ProjectHeaderV2.vue'
 import { ProjectFactory, ProjectOutputFactory } from '@/../tests/factories/project.factory'
 import MockComponent from '@/../tests/helpers/MockComponent.vue'
 
diff --git a/tests/unit/pages/GroupPage/GroupPageInnerV2.spec.ts b/tests/unit/pages/GroupPage/GroupPageInnerV2.spec.ts
index 6dc15e277..6d6d3f2a8 100644
--- a/tests/unit/pages/GroupPage/GroupPageInnerV2.spec.ts
+++ b/tests/unit/pages/GroupPage/GroupPageInnerV2.spec.ts
@@ -1,191 +1,42 @@
-import GroupPageInnerV2 from '@/components/group/GroupPageInnerV2.vue'
-import { lpiShallowMount } from '@/../tests/helpers/LpiMount'
-import { loadLocaleMessages } from '@/../tests/helpers/loadLocaleMessages'
-import { flushPromises } from '@vue/test-utils'
-
-import MockComponent from '@/../tests/helpers/MockComponent.vue'
-import { getGroup, getGroupMember, getGroupProject } from '@/api/groups.service'
-
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import type { Mock } from 'vitest'
-
-import pinia from '@/stores'
-import usePeopleGroupsStore from '@/stores/usePeopleGroups'
-import useOrganizationsStore from '@/stores/useOrganizations'
-import useUsersStore from '@/stores/useUsers'
-
-import useGroupPagesRoutes from '@/app/useGroupPagesRoutes'
-
-import { OrganizationOutput, OrganizationPatchInput } from '@/models/organization.model'
-
-vi.mock('@/api/groups.service', () => ({
-  getGroup: vi.fn().mockResolvedValue({
-    id: 123,
-    permissions: [], // TODO: remove from model
-    users: [], // TODO: remove from model
-    name: 'string',
-    description: 'string',
-    email: 'group@test.com',
-    type: 'group',
-    organization: 'TEST',
-    managers: [],
-    members: [],
-    hierarchy: [],
-    children: [],
-    projects: [],
-    header_image: { variations: { medium: 'string.jpeg' } },
-    logo_image: null,
-    publication_status: 'public',
-  }),
-  getGroupMember: vi.fn().mockResolvedValue({ results: [] }),
-  getGroupProject: vi.fn().mockResolvedValue({ results: [] }),
-}))
-
-const i18n = {
-  locale: 'en',
-  fallbackLocale: 'en',
-  messages: loadLocaleMessages(),
-}
-
-const router = useGroupPagesRoutes()
-
-const route = {
-  name: 'groupSnapshot',
+import { lpiMount } from '@/../tests/helpers/LpiMount'
+import { describe, expect, it } from 'vitest'
+import { mockNuxtImport, registerEndpoint } from '@nuxt/test-utils/runtime'
+import GroupPage from '@/pages/GroupPageV2/GroupPage.vue'
+import { peopleGroupFactory } from '../../../factories/group.factory'
+
+const group = peopleGroupFactory.generate()
+mockNuxtImport('useRoute', () => () => ({
   params: {
-    groupId: 123,
-  },
-}
-
-const buildParams = (groupId) => ({
-  i18n,
-  router: [
-    { path: '/', name: 'home', component: MockComponent },
-    { path: '/page404', name: 'page404', component: MockComponent },
-  ],
-  props: {
-    groupId,
-  },
-  global: {
-    mocks: {
-      $route: route,
-    },
+    groupId: group.id,
   },
-})
-
-describe('GroupPageInnerV2', () => {
-  let usersStore
-  beforeEach(() => {
-    usePeopleGroupsStore(pinia)
-    const organizationsStore = useOrganizationsStore(pinia)
-    organizationsStore._current = { code: 'TEST' } as unknown as OrganizationOutput
-
-    usersStore = useUsersStore(pinia)
-    usersStore.id = 123
-    usersStore.userFromApi = {}
-    usersStore.permissions = {}
-    usersStore.getUser = vi.fn()
-  })
-  afterEach(() => {
-    // usersStore.$reset()
-  })
-  it('should render GroupPageInnerV2 component', () => {
-    let wrapper = lpiShallowMount(GroupPageInnerV2, buildParams('123'))
-
-    expect(wrapper.exists()).toBeTruthy()
-  })
+}))
 
-  it('should load group data', async () => {
-    let wrapper = lpiShallowMount(GroupPageInnerV2, buildParams('123'))
-    let vm: any = wrapper.vm
-    expect(vm.isLoading).toBe(true)
-    await flushPromises()
-    expect(getGroup).toHaveBeenCalled()
-    expect(getGroupMember).toHaveBeenCalled()
-    expect(getGroupProject).toHaveBeenCalled()
-    expect(vm.isLoading).toBe(false)
-  })
-  // TODO: Fix this test since migrating people group store to pinia
-  // it('should display a 404 if no group found', async () => {
-  //     vi.mocked(getGroup).mockRejectedValueOnce({ response: { status: 404 } })
-  //     let wrapper = lpiShallowMount(GroupPageInnerV2, buildParams('123'))
-  //     await (wrapper.vm as any).$nextTick() // Wait for component to be fully mounted
-  //     vi.spyOn((wrapper.vm as any).$router, 'replace')
-  //     await flushPromises()
-  //     expect((wrapper.vm as any).$router.replace).toHaveBeenCalledWith({
-  //         name: 'page404',
-  //         params: {
-  //             pathMatch: [''],
-  //         },
-  //     })
-  // })
+describe('GroupProjectsTab', () => {
+  const orgaCode = useOrganizationCode()
 
-  it('should not display a edit button button if not allowed', async () => {
-    let wrapper = lpiShallowMount(GroupPageInnerV2, buildParams('123'))
+  it('Render', async () => {
+    registerEndpoint(`organization/${orgaCode}/people-group/${group.id}/`, () => group)
+    const wrapper = lpiMount(GroupPage, {
+      props: {
+        group,
+        isLoading: false,
+      },
+    })
 
-    let vm = wrapper.vm
-    await flushPromises()
-    expect(wrapper.find('.can-edit-group').exists()).toBe(false)
+    expect(wrapper.exists()).toBe(true)
   })
 
-  it('should display a edit button button if allowed', async () => {
-    usersStore.permissions = {
-      'organizations.change_peoplegroup': true,
-    }
-    let wrapper = lpiShallowMount(GroupPageInnerV2, buildParams('123'))
-    let vm = wrapper.vm
-    await flushPromises()
-    expect(wrapper.find('.can-edit-group').exists()).toBe(true)
+  it('Error fetch', async () => {
+    registerEndpoint(`organization/${orgaCode}/people-group/${group.id}/`, () => {
+      throw createError({ status: 500 })
+    })
+    const wrapper = lpiMount(GroupPage, {
+      props: {
+        group,
+        isLoading: false,
+      },
+    })
+    // @ts-expect-error TS2349
+    await expect.poll(() => wrapper.text()).includes('An error occured')
   })
-  // TODO: test somewhere else (navpanel ?)
-  // it('should display a breadcrumb if group has parents', async () => {
-  //   vi.mocked(getGroup).mockResolvedValue({
-  //     id: 123,
-  //     permissions: [], // TODO: remove from model
-  //     users: [], // TODO: remove from model
-  //     name: 'string',
-  //     description: 'string',
-  //     email: 'group@test.com',
-  //     type: 'group',
-  //     organization: 'TEST',
-  //     managers: [],
-  //     members: [],
-  //     hierarchy: [{ id: 1, name: 'parent', children: [] }],
-  //     children: [],
-  //     projects: [],
-  //     header_image: { variations: { medium: 'string.jpeg' } },
-  //     logo_image: null,
-  //     publication_status: 'public',
-  //   })
-
-  //   let wrapper = lpiShallowMount(GroupPageInnerV2, buildParams('123'))
-
-  //   await flushPromises()
-  //   expect(wrapper.find('bread-crumbs-stub').exists()).toBe(true)
-  // })
-
-  // TODO: test somewhere else (groupsbapshotab ?)
-  // it('should display subgroups if group has children', async () => {
-  //   vi.mocked(getGroup).mockResolvedValue({
-  //     id: 123,
-  //     permissions: [], // TODO: remove from model
-  //     users: [], // TODO: remove from model
-  //     name: 'string',
-  //     description: 'string',
-  //     email: 'group@test.com',
-  //     type: 'group',
-  //     organization: 'TEST',
-  //     managers: [],
-  //     members: [],
-  //     hierarchy: [],
-  //     children: [{ id: 1, name: 'child', children: [] }],
-  //     projects: [],
-  //     header_image: { variations: { medium: 'string.jpeg' } },
-  //     logo_image: null,
-  //     publication_status: 'public',
-  //   })
-  //   let wrapper = lpiShallowMount(GroupPageInnerV2, buildParams('123'))
-
-  //   await flushPromises()
-  //   expect(wrapper.find('sub-groups-stub').exists()).toBe(true)
-  // })
 })
diff --git a/tests/unit/pages/GroupPage/Tabs/GroupMembersTab.spec.ts b/tests/unit/pages/GroupPage/Tabs/GroupMembersTab.spec.ts
index 3d1331b63..757c8bc20 100644
--- a/tests/unit/pages/GroupPage/Tabs/GroupMembersTab.spec.ts
+++ b/tests/unit/pages/GroupPage/Tabs/GroupMembersTab.spec.ts
@@ -1,76 +1,66 @@
-import GroupMembersTab from '@/pages/GroupPageV2/Tabs/GroupMembersTab.vue'
-import { lpiShallowMount } from '@/../tests/helpers/LpiMount'
+import GroupMembersTab from '@/pages/GroupPageV2/Tabs/Members/GroupMembersTab.vue'
+import { lpiMount, lpiShallowMount } from '@/../tests/helpers/LpiMount'
 import { loadLocaleMessages } from '@/../tests/helpers/loadLocaleMessages'
-import { DOMWrapper, flushPromises } from '@vue/test-utils'
-import MockComponent from '@/../tests/helpers/MockComponent.vue'
 
-import pinia from '@/stores'
-import useOrganizationsStore from '@/stores/useOrganizations'
-import useUsersStore from '@/stores/useUsers'
-
-import { OrganizationOutput, OrganizationPatchInput } from '@/models/organization.model'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import type { Mock } from 'vitest'
-
+import { groupTranslatedFactory } from '../../../../factories/group.factory'
+import { flushPromises } from '@vue/test-utils'
+import { register } from 'mixpanel-browser'
+import { registerEndpoint } from '@nuxt/test-utils/runtime'
+import GroupMemberFactory from '../../../../factories/group-member.factory'
+import { ProjectFactory } from '../../../../factories/project.factory'
+import nitroError from '@/server/plugins/nitroError'
+import { PaginationsFactory } from '../../../../factories/paginations.factory'
 const i18n = {
   locale: 'en',
   fallbackLocale: 'en',
   messages: loadLocaleMessages(),
 }
 
-const protoPropsLoading = () => ({
-  membersInitialRequest: {},
-
-  isMembersLoading: true,
-})
-
-const protoPropsLoaded = (members = []) => ({
-  membersInitialRequest: { count: members.length, results: members },
-
-  isMembersLoading: false,
-})
-
-const buildParams = (props) => ({
-  i18n,
-  router: [
-    { path: '/', name: 'home', component: MockComponent },
-    { path: '/page404', name: 'page404', component: MockComponent },
-  ],
-  props,
-})
-
-describe('GroupMembersTab', () => {
-  beforeEach(() => {
-    const usersStore = useUsersStore(pinia)
-    usersStore.$patch({
-      id: 123,
-      userFromApi: {},
-      permissions: {},
-      getUser: vi.fn(),
-    } as any)
-    const organizationsStore = useOrganizationsStore(pinia)
-    organizationsStore._current = { code: 'TEST' } as unknown as OrganizationOutput
+describe('GroupProjectsTab', () => {
+  const orgaCode = useOrganizationCode()
+
+  it('Render', async () => {
+    const group = groupTranslatedFactory.generate()
+    registerEndpoint(`organization/${orgaCode}/people-group/${group.id}/member/`, () => {
+      return PaginationsFactory.generate({
+        results: [
+          GroupMemberFactory.generate(),
+          GroupMemberFactory.generate(),
+          GroupMemberFactory.generate(),
+          GroupMemberFactory.generate(),
+        ],
+      })
+    })
+
+    const wrapper = lpiMount(GroupMembersTab, {
+      props: {
+        group,
+        isLoading: false,
+      },
+    })
+
+    // 4 number of factory
+    await flushPromises()
+    await flushPromises()
+    console.log(wrapper.html())
+    await expect.poll(() => wrapper.findAll('.user').length).toBe(4)
   })
 
-  it('should render GroupMembersTab component', () => {
-    let wrapper = lpiShallowMount(GroupMembersTab, buildParams(protoPropsLoading()))
-
-    expect(wrapper.exists()).toBeTruthy()
-  })
-
-  it('should display memeber count when loaded', async () => {
-    let wrapper = lpiShallowMount(GroupMembersTab, buildParams(protoPropsLoading()))
-
-    expect(wrapper.find('.members-header .title span').exists()).toBe(false)
-
-    wrapper.setProps(protoPropsLoaded([{ id: 1 }, { id: 2 }]))
-
-    await wrapper.vm.$nextTick()
-
-    let counter = wrapper.find('.members-header .title span')
-
-    expect(counter.exists()).toBe(true)
-
-    expect(counter.html()).toContain('2')
+  it('Error fetch', async () => {
+    const group = groupTranslatedFactory.generate()
+    registerEndpoint(`organization/${orgaCode}/people-group/${group.id}/member/`, () => {
+      throw createError({ statusCode: 500 })
+    })
+
+    const wrapper = lpiMount(GroupMembersTab, {
+      props: {
+        group,
+        isLoading: false,
+      },
+    })
+
+    // @ts-expect-error TS2349
+    await expect.poll(() => wrapper.text()).includes('An error occured')
   })
 })
diff --git a/tests/unit/pages/GroupPage/Tabs/GroupProjectsTab.spec.ts b/tests/unit/pages/GroupPage/Tabs/GroupProjectsTab.spec.ts
index fc3da1a83..8a8d4267d 100644
--- a/tests/unit/pages/GroupPage/Tabs/GroupProjectsTab.spec.ts
+++ b/tests/unit/pages/GroupPage/Tabs/GroupProjectsTab.spec.ts
@@ -1,77 +1,63 @@
-import GroupProjectsTab from '@/pages/GroupPageV2/Tabs/GroupProjectsTab.vue'
-import { lpiShallowMount } from '@/../tests/helpers/LpiMount'
+import GroupProjectsTab from '@/pages/GroupPageV2/Tabs/Projects/GroupProjectsTab.vue'
+import { lpiMount, lpiShallowMount } from '@/../tests/helpers/LpiMount'
 import { loadLocaleMessages } from '@/../tests/helpers/loadLocaleMessages'
-import { DOMWrapper, flushPromises } from '@vue/test-utils'
-import MockComponent from '@/../tests/helpers/MockComponent.vue'
 
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import type { Mock } from 'vitest'
-
-import pinia from '@/stores'
-import useOrganizationsStore from '@/stores/useOrganizations'
-import useUsersStore from '@/stores/useUsers'
-
-import { OrganizationOutput, OrganizationPatchInput } from '@/models/organization.model'
+import { groupTranslatedFactory } from '../../../../factories/group.factory'
+import { flushPromises } from '@vue/test-utils'
+import { register } from 'mixpanel-browser'
+import { registerEndpoint } from '@nuxt/test-utils/runtime'
+import GroupMemberFactory from '../../../../factories/group-member.factory'
+import { ProjectFactory } from '../../../../factories/project.factory'
+import nitroError from '@/server/plugins/nitroError'
+import { PaginationsFactory } from '../../../../factories/paginations.factory'
 const i18n = {
   locale: 'en',
   fallbackLocale: 'en',
   messages: loadLocaleMessages(),
 }
 
-const protoPropsLoading = () => ({
-  projectsInitialRequest: {},
-
-  isProjectsLoading: true,
-})
-
-const protoPropsLoaded = (projects = []) => ({
-  projectsInitialRequest: { count: projects.length, results: projects },
-
-  isProjectsLoading: false,
-})
-
-const buildParams = (props) => ({
-  i18n,
-  router: [
-    { path: '/', name: 'home', component: MockComponent },
-    { path: '/page404', name: 'page404', component: MockComponent },
-  ],
-  props,
-})
-
 describe('GroupProjectsTab', () => {
-  beforeEach(() => {
-    const usersStore = useUsersStore(pinia)
-    usersStore.$patch({
-      id: 123,
-      userFromApi: {},
-      permissions: {},
-      getUser: vi.fn(),
-    } as any)
-    const organizationsStore = useOrganizationsStore(pinia)
-    organizationsStore.$patch({
-      current: { code: 'TEST' } as unknown as OrganizationOutput,
-    } as any)
-  })
-  it('should render GroupProjectsTab component', () => {
-    let wrapper = lpiShallowMount(GroupProjectsTab, buildParams(protoPropsLoading()))
-
-    expect(wrapper.exists()).toBeTruthy()
+  const orgaCode = useOrganizationCode()
+
+  it('Render', async () => {
+    const group = groupTranslatedFactory.generate()
+    registerEndpoint(`organization/${orgaCode}/people-group/${group.id}/project/`, () => {
+      return PaginationsFactory.generate({
+        results: [
+          ProjectFactory.generate(),
+          ProjectFactory.generate(),
+          ProjectFactory.generate(),
+          ProjectFactory.generate(),
+        ],
+      })
+    })
+
+    const wrapper = lpiMount(GroupProjectsTab, {
+      props: {
+        group,
+        isLoading: false,
+      },
+    })
+
+    // 4 number of factory
+    await expect.poll(() => wrapper.findAll("[data-test^='project-card-']").length).toBe(4)
   })
 
-  it('should display project count when loaded', async () => {
-    let wrapper = lpiShallowMount(GroupProjectsTab, buildParams(protoPropsLoading()))
-
-    expect(wrapper.find('.projects-header .title span').exists()).toBe(false)
-
-    wrapper.setProps(protoPropsLoaded([{ id: 1 }, { id: 2 }]))
-
-    await wrapper.vm.$nextTick()
-
-    let counter = wrapper.find('.projects-header .title span')
-
-    expect(counter.exists()).toBe(true)
-
-    expect(counter.html()).toContain('2')
+  it('Error fetch', async () => {
+    const group = groupTranslatedFactory.generate()
+    registerEndpoint(`organization/${orgaCode}/people-group/${group.id}/project/`, () => {
+      throw createError({ statusCode: 500 })
+    })
+
+    const wrapper = lpiMount(GroupProjectsTab, {
+      props: {
+        group,
+        isLoading: false,
+      },
+    })
+
+    // @ts-expect-error TS2349
+    await expect.poll(() => wrapper.text()).includes('An error occured')
   })
 })
diff --git a/tests/unit/pages/GroupPage/Tabs/GroupSnapshotTab.spec.ts b/tests/unit/pages/GroupPage/Tabs/GroupSnapshotTab.spec.ts
index ecb57311b..3efe07ec4 100644
--- a/tests/unit/pages/GroupPage/Tabs/GroupSnapshotTab.spec.ts
+++ b/tests/unit/pages/GroupPage/Tabs/GroupSnapshotTab.spec.ts
@@ -1,102 +1,45 @@
 import GroupSnapshotTab from '@/pages/GroupPageV2/Tabs/GroupSnapshotTab.vue'
-import { lpiShallowMount } from '@/../tests/helpers/LpiMount'
+import { lpiMount, lpiShallowMount } from '@/../tests/helpers/LpiMount'
 import { loadLocaleMessages } from '@/../tests/helpers/loadLocaleMessages'
 import { flushPromises } from '@vue/test-utils'
 import MockComponent from '@/../tests/helpers/MockComponent.vue'
 
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import type { Mock } from 'vitest'
-
-import pinia from '@/stores'
-import useOrganizationsStore from '@/stores/useOrganizations'
-import useUsersStore from '@/stores/useUsers'
-
-import { OrganizationOutput, OrganizationPatchInput } from '@/models/organization.model'
-const i18n = {
-  locale: 'en',
-  fallbackLocale: 'en',
-  messages: loadLocaleMessages(),
-}
-
-const protoPropsLoading = () => ({
-  description: '',
-
-  projectsInitialRequest: {},
-
-  membersInitialRequest: {},
-
-  isProjectsLoading: true,
-
-  isMembersLoading: true,
-
-  isLoading: true,
-})
-
-const protoPropsLoaded = (members = [], projects = []) => ({
-  description: '<p>lorem ipsum</p>',
-
-  projectsInitialRequest: { count: projects.length, results: projects },
-
-  membersInitialRequest: { count: members.length, results: members },
-
-  isProjectsLoading: false,
-
-  isMembersLoading: false,
-
-  isLoading: false,
-})
-
-const buildParams = (props) => ({
-  i18n,
-  router: [
-    { path: '/', name: 'home', component: MockComponent },
-    { path: '/page404', name: 'page404', component: MockComponent },
-  ],
-  props,
-})
+import { groupTranslatedFactory } from '../../../../factories/group.factory'
 
 describe('GroupSnapshotTab', () => {
-  beforeEach(() => {
-    const usersStore = useUsersStore(pinia)
-    usersStore.$patch({
-      id: 123,
-      userFromApi: {},
-      permissions: {},
-      getUser: vi.fn(),
-    } as any)
-
-    const organizationsStore = useOrganizationsStore(pinia)
-    organizationsStore.$patch({
-      current: { code: 'TEST' } as unknown as OrganizationOutput,
-    } as any)
-  })
-  it('should render GroupSnapshotTab component', () => {
-    let wrapper = lpiShallowMount(GroupSnapshotTab, buildParams(protoPropsLoading()))
+  it('should render without modules', () => {
+    const group = groupTranslatedFactory.generate()
+    const wrapper = lpiShallowMount(GroupSnapshotTab, {
+      props: {
+        group,
+        isLoading: false,
+      },
+    })
 
     expect(wrapper.exists()).toBeTruthy()
+    // no modules set
+    expect(wrapper.find("[data-test='group-modules']").element.childElementCount).toBe(0)
   })
+  it('should render with modules', () => {
+    const group = groupTranslatedFactory.generate()
+    const wrapper = lpiMount(GroupSnapshotTab, {
+      props: {
+        group: {
+          ...group,
+          modules: {
+            featured_projects: 100,
+            members: 2,
+          },
+        },
+        isLoading: false,
+      },
+    })
 
-  it('should display loading state then render', async () => {
-    let wrapper = lpiShallowMount(GroupSnapshotTab, buildParams(protoPropsLoading()))
-
-    expect(wrapper.find('.skeleton').exists()).toBe(true)
-    expect(wrapper.find('.projects .see-more-button').exists()).toBe(false)
-    expect(wrapper.find('.members .see-more-button').exists()).toBe(false)
-
-    wrapper.setProps(protoPropsLoaded([{ id: 1 }], [{ id: 2 }]))
-
-    await wrapper.vm.$nextTick()
-
-    expect(wrapper.find('.skeleton').exists()).toBe(false)
-    expect(wrapper.find('.projects .see-more-button').exists()).toBe(true)
-    expect(wrapper.find('.members .see-more-button').exists()).toBe(true)
-  })
-
-  it("should not display list section when there's no project or member", async () => {
-    let wrapper = lpiShallowMount(GroupSnapshotTab, buildParams(protoPropsLoaded([], [])))
-
-    expect(wrapper.find('.skeleton').exists()).toBe(false)
-    expect(wrapper.find('.projects').exists()).toBe(false)
-    expect(wrapper.find('.members').exists()).toBe(false)
+    expect(wrapper.exists()).toBeTruthy()
+    // no modules set
+    console.log(wrapper.html())
+    expect(wrapper.find("[data-test='group-modules']").element.childElementCount).toBe(2)
   })
 })