diff --git a/src/api/groups.service.ts b/src/api/groups.service.ts
index 97715d03..34bd03f9 100644
--- a/src/api/groups.service.ts
+++ b/src/api/groups.service.ts
@@ -5,18 +5,24 @@ import type {
   AddGroupMembers,
   RemoveGroupMember,
   PostGroupProjects,
-  RemoveGroupProject,
   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'
 
 // HIERARCHY
 
-export async function getHierarchyGroups(org: string) {
-  return await useAPI(`organization/${org}/people-groups-hierarchy/`, {}) //.data.value
+export function getHierarchyGroups(organizationCode: string, config = {}) {
+  return useAPI<HierarchyGroupModel>(
+    `organization/${organizationCode}/people-groups-hierarchy/`,
+    config
+  )
 }
 
 export async function getPeopleGroupsHierarchy(org_code, params) {
@@ -46,57 +52,62 @@ export async function postGroup(org: string, groupData: PostGroupData) {
 
 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
 }
 
-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: string,
+  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',
+  }) //.data.value
 }
 
 // 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 function getGroupMember(organizationCode: string, groupId: number, config = {}) {
+  return 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
@@ -104,10 +115,11 @@ export async function removeGroupMember(
 
 // 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 function getGroupProject(organizationCode: string, groupId: number, config = {}) {
+  return useAPI<PaginationResult<ProjectModel>>(
+    `organization/${organizationCode}/people-group/${groupId}/project/`,
+    config
+  )
 }
 
 export async function postGroupProjects(
@@ -124,7 +136,7 @@ export async function postGroupProjects(
 export async function removeGroupProject(
   org: string,
   group_id: number,
-  projectsData: RemoveGroupProject
+  projectsData: PostGroupProjects
 ) {
   return await useAPI(`organization/${org}/people-group/${group_id}/project/remove/`, {
     body: projectsData,
diff --git a/src/api/v2/group.service.ts b/src/api/v2/group.service.ts
new file mode 100644
index 00000000..37198cd7
--- /dev/null
+++ b/src/api/v2/group.service.ts
@@ -0,0 +1,91 @@
+import {
+  getGroup as fetchGetGroup,
+  getGroupProject as fetchGetGroupProject,
+  getHierarchyGroups as fetchGetHierarchyGroups,
+  getGroupMember as fetchGetGroupMember,
+} 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, TranslatedGroupMember } 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']>) => {
+  const key = computed(() => `${unref(organizationCode)}::group::hierarchy`)
+
+  return useAsyncAPI(
+    key,
+    () => fetchGetHierarchyGroups(unref(organizationCode), { ...DEFAULT_CONFIG }),
+    {
+      watch: onlyRefs([organizationCode]),
+    }
+  )
+}
+
+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 { translateUsers } = useAutoTranslate()
+  const key = computed(() => `${unref(organizationCode)}::group::${unref(groupId)}::members`)
+
+  return useAsyncPaginationAPI(
+    key,
+    ({ config }) =>
+      fetchGetGroupMember(unref(organizationCode), unref(groupId), {
+        ...DEFAULT_CONFIG,
+        ...config,
+      }),
+    {
+      translate: (data) => translateUsers<TranslatedGroupMember>(data),
+      watch: onlyRefs([organizationCode, groupId]),
+      ...config,
+    }
+  )
+}
diff --git a/src/app/router.options.ts b/src/app/router.options.ts
index 8c831cd4..1db0c37e 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 f40ae039..d5a963d1 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 a88bc5b4..5c04bc56 100644
--- a/src/app/useGroupPagesRoutes.ts
+++ b/src/app/useGroupPagesRoutes.ts
@@ -15,12 +15,12 @@ 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'),
         },
         // retro compat
         {
@@ -36,17 +36,17 @@ 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'),
         },
       ],
       props: true,
diff --git a/src/components/base/BasicCard.vue b/src/components/base/BasicCard.vue
index f843e2f2..5e1dd99c 100644
--- a/src/components/base/BasicCard.vue
+++ b/src/components/base/BasicCard.vue
@@ -75,7 +75,7 @@ defineEmits<{ click: [] }>()
 }
 
 :deep(.picture) {
-  $picture-width: 72px;
+  $picture-width: 90px;
 
   display: flex;
   width: pxToRem($picture-width);
diff --git a/src/components/base/CardList.vue b/src/components/base/CardList.vue
index e150f22b..dffc6642 100644
--- a/src/components/base/CardList.vue
+++ b/src/components/base/CardList.vue
@@ -1,12 +1,12 @@
 <template>
   <div v-if="switchableDisplay" class="diplay-switcher">
-    <GroupButton v-model="mode" :options="displayModes" :has-icon="false" size="s-small" />
+    <GroupButton v-model="mode" :options="displayMode" :has-icon="false" size="s-small" />
   </div>
 
   <ProjectListSkeleton
     v-if="isLoading"
     class="card-list"
-    :min-gap="gridGap"
+    :min-gap="GRID_GAP"
     :limit="limit"
     :mode="mode"
   />
@@ -18,88 +18,67 @@
       </slot>
     </template>
     <div v-else class="card-container">
-      <DynamicGrid :min-gap="gridGap" class="card-list" :mode="mode">
+      <DynamicGrid :min-gap="GRID_GAP" class="card-list" :mode="mode">
         <slot v-for="item in items" :key="item.id" :item="item" :mode="mode" />
       </DynamicGrid>
     </div>
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
 import ProjectListSkeleton from '@/components/project/ProjectListSkeleton.vue'
 import DynamicGrid from '@/components/base/DynamicGrid.vue'
 
-export default {
-  name: 'CardList',
+const props = withDefaults(
+  defineProps<{
+    items?: any[]
+    isLoading?: boolean
+    limit?: number
+    switchableDisplay?: boolean
+  }>(),
+  {
+    items: () => [],
+    isLoading: false,
+    limit: 12,
+    switchableDisplay: false,
+  }
+)
 
-  components: {
-    ProjectListSkeleton,
-    DynamicGrid,
-  },
+const { t } = useNuxtI18n()
 
-  props: {
-    items: {
-      type: Array,
-      default: () => [],
-    },
-
-    isLoading: {
-      type: Boolean,
-      default: false,
-    },
+const GRID_GAP = 24
+const mode = ref<'card' | 'list'>('card')
+const isEmpty = computed(() => !props.isLoading && !props.items.length)
 
-    limit: {
-      type: Number,
-      default: 12,
+const displayMode = computed(() => {
+  return [
+    {
+      label: t('card-list.grid'),
+      iconName: 'Card',
+      value: 'card',
     },
-
-    switchableDisplay: {
-      type: Boolean,
-      default: false,
+    {
+      label: t('card-list.list'),
+      iconName: 'List',
+      value: 'list',
     },
-  },
+  ]
+})
 
-  data() {
-    return {
-      gridGap: 24,
+watch(mode, (newMODE, oldMODE) => {
+  if (props.switchableDisplay && newMODE !== oldMODE) {
+    localStorage?.setItem('card-list-MODE', newMODE)
+  }
+})
 
-      mode: 'card', // 'list' or 'grid'
+onMounted(() => {
+  if (props.switchableDisplay) {
+    const storageMode = localStorage?.getItem('card-list-MODE')
+    if (['card', 'list'].includes(storageMode)) {
+      mode.value = storageMode as 'card' | 'list'
     }
-  },
-  computed: {
-    isEmpty() {
-      return !this.isLoading && !this.items.length
-    },
-
-    displayModes() {
-      return [
-        {
-          label: this.$t('card-list.grid'),
-          iconName: 'Card',
-          value: 'card',
-        },
-        {
-          label: this.$t('card-list.list'),
-          iconName: 'List',
-          value: 'list',
-        },
-      ]
-    },
-  },
-  watch: {
-    mode(newMode, oldMode) {
-      if (this.switchableDisplay && newMode !== oldMode) {
-        localStorage?.setItem('card-list-mode', newMode)
-      }
-    },
-  },
-
-  mounted() {
-    if (this.switchableDisplay) {
-      this.mode = localStorage?.getItem('card-list-mode') || 'card'
-    }
-  },
-}
+  }
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/base/FetchLoader.vue b/src/components/base/FetchLoader.vue
index f872f619..28ec3d57 100644
--- a/src/components/base/FetchLoader.vue
+++ b/src/components/base/FetchLoader.vue
@@ -38,8 +38,9 @@ const props = withDefaults(
     status: AsyncDataRequestStatus | AsyncDataRequestStatus[]
     label?: string
     withData?: boolean
+    onlyError?: boolean
   }>(),
-  { withData: false, label: null }
+  { withData: false, label: null, onlyError: false }
 )
 
 const actualStatus = computed(() => {
@@ -61,7 +62,7 @@ const actualStatus = computed(() => {
 
 const loading = computed(() => {
   // if data already set, dont add loading
-  if (props.withData === true) {
+  if (props.withData === true || props.onlyError) {
     return false
   }
   return ['pending', 'idle'].includes(actualStatus.value)
diff --git a/src/components/group/GroupCard.vue b/src/components/group/GroupCard.vue
index 6866870c..54280b67 100644
--- a/src/components/group/GroupCard.vue
+++ b/src/components/group/GroupCard.vue
@@ -111,9 +111,7 @@ export default {
     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 } }
+      return this.hasAddIcon ? null : { name: 'Group', params: { groupId: this.group.id } }
     },
   },
 
diff --git a/src/components/group/GroupForm/GroupTeamSection.vue b/src/components/group/GroupForm/GroupTeamSection.vue
index 33ca36e7..47fdbf11 100644
--- a/src/components/group/GroupForm/GroupTeamSection.vue
+++ b/src/components/group/GroupForm/GroupTeamSection.vue
@@ -153,6 +153,7 @@ export default {
       return null
     },
     openDrawer(mode) {
+      console.log(this.teamModalMode)
       this.teamModalMode = mode
       this.teamModalVisible = true
     },
diff --git a/src/components/group/GroupPageInnerV2.vue b/src/components/group/GroupPageInnerV2.vue
deleted file mode 100644
index c04c5491..00000000
--- 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/GroupsElement/GroupsElement.vue b/src/components/group/GroupsElement/GroupsElement.vue
index afe1bb49..69ec3bd6 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/SubGroups/SubGroups.vue b/src/components/group/SubGroups/SubGroups.vue
index 62221b3d..003aab67 100644
--- a/src/components/group/SubGroups/SubGroups.vue
+++ b/src/components/group/SubGroups/SubGroups.vue
@@ -6,7 +6,7 @@
     <NuxtLink
       v-for="(subgroup, index) in subgroups"
       :key="index"
-      :to="{ name: 'Group', params: { groupId: subgroup.slug || subgroup.id } }"
+      :to="{ name: 'Group', params: { groupId: subgroup.id } }"
       class="subgroups-item"
     >
       <div class="vector" />
diff --git a/src/components/people/Researcher/ResearcherDocumentSimilars.vue b/src/components/people/Researcher/ResearcherDocumentSimilars.vue
index f181209c..5a474af1 100644
--- a/src/components/people/Researcher/ResearcherDocumentSimilars.vue
+++ b/src/components/people/Researcher/ResearcherDocumentSimilars.vue
@@ -71,7 +71,7 @@ const getDocuments = (query) => {
     })
 }
 
-watch(pagination.query, (query) => getDocuments(query))
+watch(pagination.query, (query) => props.document && getDocuments(query))
 watch(
   () => props.document,
   (doc) => doc && getDocuments(pagination.query()),
diff --git a/src/components/project/ProjectListSkeleton.vue b/src/components/project/ProjectListSkeleton.vue
index 87078755..cba5f51a 100644
--- a/src/components/project/ProjectListSkeleton.vue
+++ b/src/components/project/ProjectListSkeleton.vue
@@ -18,30 +18,14 @@
   </DynamicGrid>
 </template>
 
-<script>
+<script setup lang="ts">
 import DynamicGrid from '@/components/base/DynamicGrid.vue'
-export default {
-  name: 'ProjectListSkeleton',
-
-  components: {
-    DynamicGrid,
-  },
-
-  props: {
-    limit: {
-      type: Number,
-      default: 12,
-    },
-    minGap: {
-      type: Number,
-      default: 0,
-    },
-    mode: {
-      type: String,
-      default: 'card', // 'card' or 'list'
-    },
-  },
-}
+
+withDefaults(defineProps<{ limit?: number; minGap?: number; mode?: 'card' | 'list' }>(), {
+  limit: 12,
+  minGap: 0,
+  mode: 'card',
+})
 </script>
 
 <style lang="scss" scoped>
@@ -56,30 +40,49 @@ export default {
   &.card .skeleton-text {
     padding-top: $space-m;
     width: 100%;
+    align-items: center;
   }
 
   &.list .skeleton-text {
     width: 100%;
+    justify-content: center;
+    height: 100%;
+  }
+
+  .skeleton-text {
+    display: flex;
+    align-content: center;
+    flex-direction: column;
+    gap: 0.4rem;
   }
 
   .image-placeholder {
-    width: pxToRem(72px);
-    height: pxToRem(72px);
+    width: pxToRem(90px);
+    height: pxToRem(90px);
     background: $lighter-gray;
     margin-bottom: $space-l;
-    border-radius: $border-radius-xs;
+    border-radius: 50%;
     animation: skeleton-loading 1s linear infinite alternate;
   }
 
+  .project-picture {
+    box-shadow: none !important;
+  }
+
   .text-placeholder {
     background: $lighter-gray;
     border-radius: $border-radius-xs;
-    width: 100%;
+    width: 80%;
     height: pxToRem(16px);
-    margin-bottom: pxToRem(16px);
     animation: skeleton-loading 1s linear infinite alternate;
   }
 
+  &.list {
+    .text-placeholder:first-child {
+      width: 20%;
+    }
+  }
+
   .subtext {
     margin-bottom: $space-s;
   }
diff --git a/src/composables/useAPI.ts b/src/composables/useAPI.ts
index cc44234c..1b453515 100644
--- a/src/composables/useAPI.ts
+++ b/src/composables/useAPI.ts
@@ -9,9 +9,12 @@ export const defaultOptions = () => {
   const localStorage = _localStorage
   const runtimeConfig = useRuntimeConfig()
   const usersStore = useUsers()
+  const headers = useRequestHeaders(['cookie'])
+
   return {
     baseURL: runtimeConfig.public.appApiUrl + runtimeConfig.public.appApiDefaultVersion + '/',
     method: 'GET',
+    headers,
     onRequest({ options }) {
       if (import.meta.client) {
         const accessToken = usersStore.accessToken // localStorage?.getItem('ACCESS_TOKEN')
diff --git a/src/composables/useAPI2.ts b/src/composables/useAPI2.ts
index 971faef7..3ebad4ae 100644
--- a/src/composables/useAPI2.ts
+++ b/src/composables/useAPI2.ts
@@ -1,11 +1,19 @@
 import { merge } from 'es-toolkit'
 import { defaultOptions } from '@/composables/useAPI'
+import useLoadingFromStatus from '@/composables/useLoadingFromStatus'
 
 type Params = Parameters<typeof useFetch>
 
 const useAPI2 = <DataT>(url: Params[0], options: Params[1] = {}) => {
   const _options = merge(defaultOptions(), options)
-  return useFetch<DataT>(url, _options as any)
+  const { status, ...rest } = useFetch<DataT>(url, _options as any)
+  const loading = useLoadingFromStatus(status)
+
+  return {
+    ...rest,
+    status,
+    loading,
+  }
 }
 
 export default useAPI2
diff --git a/src/composables/useAsyncAPI.ts b/src/composables/useAsyncAPI.ts
new file mode 100644
index 00000000..ef7bbdff
--- /dev/null
+++ b/src/composables/useAsyncAPI.ts
@@ -0,0 +1,58 @@
+import useLoadingFromStatus from '@/composables/useLoadingFromStatus'
+
+export type AsyncConfig<ResDataT, DataT, Result> = Parameters<
+  typeof useAsyncData<ResDataT, unknown, DataT>
+>['2'] & {
+  translate?: (data: DataT) => Result
+}
+
+export type AsyncParameters<ResDataT, DataT, Result> = [
+  Parameters<typeof useAsyncData<ResDataT, unknown, DataT>>['0'],
+  Parameters<typeof useAsyncData<ResDataT, unknown, DataT>>['1'],
+  AsyncConfig<ResDataT, DataT, Result>?,
+]
+
+type AsyncReturn<ResDataT, DataT, Result> = Omit<
+  ReturnType<typeof useAsyncData<ResDataT, unknown, DataT>>,
+  'data'
+> & {
+  data: Result extends undefined
+    ? ReturnType<typeof useAsyncData<ResDataT, unknown, DataT>>['data']
+    : Result
+  isLoading: ComputedRef<boolean>
+}
+
+/**
+ * wrapper around useAsyncData (for watch local change TODO !)
+ *
+ * @constant
+ * @name useAsyncAPI
+ * @kind variable
+ * @exports
+ */
+export default function useAsyncAPI<ResDataT, DataT = ResDataT, Result = undefined>(
+  ...params: AsyncParameters<ResDataT, DataT, Result>
+): AsyncReturn<ResDataT, DataT, Result> {
+  /*
+  TODO: this code refresh request when local change (no more send)
+        multiple value for same keys like "title_en", "title_es", "title_fr" ..ect
+  const { locale } = useNuxtI18n()
+  params[2] ??= {}
+  params[2].watch = [...(params[2].watch || []), locale]
+  */
+
+  const { status, data, ...res } = useAsyncData<ResDataT, unknown, DataT>(...params)
+  const isLoading = useLoadingFromStatus(status)
+
+  // @ts-expect-error 2345 todo check why
+  const dataWrapped = params[2]?.translate?.(data) || data
+
+  const results = {
+    ...res,
+    status,
+    isLoading,
+    data: dataWrapped,
+  }
+  // @ts-expect-error 2322 todo check why
+  return results
+}
diff --git a/src/composables/useAsyncPaginationAPI.ts b/src/composables/useAsyncPaginationAPI.ts
new file mode 100644
index 00000000..a89c51da
--- /dev/null
+++ b/src/composables/useAsyncPaginationAPI.ts
@@ -0,0 +1,88 @@
+import {
+  PaginationResult,
+  paginationConfig,
+  PaginationQuery,
+  usePagination,
+} from '@/composables/usePagination'
+import { omit } from 'es-toolkit'
+
+import type { AsyncConfig } from './useAsyncAPI'
+import useAsyncAPI from './useAsyncAPI'
+
+type AsyncPaginationHandler = {
+  ctx?: Parameters<Parameters<typeof useAsyncData>['1']>[0]
+  config: {
+    query: PaginationQuery
+  }
+}
+
+type AsyncPaginationConfig<ResDataT, DataT, Result> = Omit<
+  AsyncConfig<ResDataT, DataT, Result>,
+  'transform'
+> & {
+  // default configuration of paginations
+  paginationConfig?: paginationConfig
+  // method to transform data
+  transform?: (data: DataT) => DataT
+}
+
+type AsyncPaginationParameters<ResDataT, DataT, Result> = [
+  Parameters<typeof useAsyncData<ResDataT, unknown, DataT>>['0'],
+  (
+    obj: AsyncPaginationHandler
+  ) => ReturnType<Parameters<typeof useAsyncData<ResDataT, unknown, DataT>>['1']>,
+  AsyncPaginationConfig<ResDataT, DataT, Result>?,
+]
+
+/**
+ * you can change/set page automaticlym and the request auto refresh it
+ * a wrapped composable under useAsyncData and usePagination
+ *
+ * @constant
+ * @name useAsyncPaginationAPI
+ * @kind variable
+ * @exports
+ */
+export default function useAsyncPaginationAPI<DataT, Result = undefined>(
+  ...params: AsyncPaginationParameters<PaginationResult<DataT>, DataT[], Result>
+) {
+  const paginationData = useState<PaginationResult>()
+  const pagination = usePagination(paginationData, params[2]?.paginationConfig)
+  // add paginations in query
+  const key = computed(
+    () => `${unref(params[0])}::${pagination.limit.value}::${pagination.offset.value}`
+  )
+
+  const rest = useAsyncAPI(
+    key,
+    (ctx) => {
+      return params[1]({
+        ctx,
+        config: {
+          query: pagination.query(),
+        },
+      })
+    },
+    {
+      ...((omit(params[2] ?? {}, ['transform']) ?? {}) as AsyncConfig<
+        PaginationResult<DataT>,
+        DataT[],
+        Result
+      >),
+      watch: [...(params[2]?.watch || []), pagination.current, pagination.limit],
+      default() {
+        return params[2]?.default?.() || []
+      },
+      transform(dataApi) {
+        paginationData.value = dataApi
+        const results = dataApi.results
+        return params[2]?.transform?.(results) || results
+      },
+    }
+  )
+
+  return {
+    ...rest,
+    pagination,
+  }
+}
diff --git a/src/composables/useAutoTranslate.ts b/src/composables/useAutoTranslate.ts
index 01adf591..4c986479 100644
--- a/src/composables/useAutoTranslate.ts
+++ b/src/composables/useAutoTranslate.ts
@@ -1,3 +1,7 @@
+import { 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'
 
@@ -65,7 +69,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 +78,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)
@@ -122,8 +127,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 +151,21 @@ export default function useAutoTranslate() {
   // -----------------
   // groups
   const translateGroup = (group) =>
-    translateEntity(group, ['name', 'description', 'short_description'])
-  const translateGroups = (groups) => translateEntities(groups, translateGroup)
+    translateEntity<TranslatedPeopleGroupModel>(group, ['name', 'description', 'short_description'])
+  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)
diff --git a/src/composables/useForm.ts b/src/composables/useForm.ts
index 18eea374..0e7180f2 100644
--- a/src/composables/useForm.ts
+++ b/src/composables/useForm.ts
@@ -1,18 +1,18 @@
 import useValidate from '@vuelidate/core'
 import { debounce } from 'es-toolkit'
 
-type OptionsForm = {
-  default?: object
+type OptionsForm<T, CleanResult> = {
+  default?: T
   rules?: object
   validateTimeout?: number
-  onClean: (data: object) => object
+  onClean: (data: T) => CleanResult
 }
 
-type UseFormResult = {
-  form: Ref<object>
+type UseFormResult<T, CleanResult> = {
+  form: Ref<T>
   isValid: Ref<boolean>
   errors: Ref<object>
-  cleanedData: null | Ref<object>
+  cleanedData: null | Ref<CleanResult>
 }
 
 const onClean = (d) => d
@@ -26,14 +26,15 @@ const onClean = (d) => d
  * @param {OptionsForm} options?
  * @returns {UseFormResult}
  */
-const useForm = (options: OptionsForm = { onClean }): UseFormResult => {
-  const form = ref<object>({ ...(options.default ?? {}) })
+const useForm = <T, CleanResult = T>(
+  options: OptionsForm<T, CleanResult> = { onClean }
+): UseFormResult<T, CleanResult> => {
+  const form = ref<T>({ ...(options.default ?? {}) } as T) as Ref<T>
   const _onClean = options.onClean ?? onClean
 
   const isValid = ref<boolean>(false)
   const v$ = useValidate(options.rules ?? {}, form)
 
-  // debounce validate to optimize check
   const validate = () => v$.value.$validate().then((v) => (isValid.value = v))
   const debounceValidate = debounce(validate, options.validateTimeout ?? 200)
   watch(form, () => debounceValidate(), { deep: true, immediate: true })
@@ -48,8 +49,7 @@ const useForm = (options: OptionsForm = { onClean }): UseFormResult => {
     return err
   })
 
-  // clean data (before send to backend)
-  const cleanedData = computed(() => {
+  const cleanedData = computed<CleanResult>(() => {
     if (!isValid.value) {
       return null
     }
diff --git a/src/composables/useGroupMembersUpdate.ts b/src/composables/useGroupMembersUpdate.ts
index 606e67ae..4d4e69e2 100644
--- a/src/composables/useGroupMembersUpdate.ts
+++ b/src/composables/useGroupMembersUpdate.ts
@@ -96,8 +96,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 8a66abe3..790cfeae 100644
--- a/src/composables/useGroupProjectsUpdate.ts
+++ b/src/composables/useGroupProjectsUpdate.ts
@@ -47,6 +47,11 @@ 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 }
diff --git a/src/composables/useLoadingFromStatus.ts b/src/composables/useLoadingFromStatus.ts
new file mode 100644
index 00000000..4753e5e9
--- /dev/null
+++ b/src/composables/useLoadingFromStatus.ts
@@ -0,0 +1,16 @@
+/**
+ * convert status from useFetch to boolean
+ *
+ * @function
+ * @name useLoadingFromStatus
+ * @kind variable
+ * @param {any} status
+ * @returns {globalThis.ComputedRef<boolean>}
+ */
+const useLoadingFromStatus = (status: Ref<'pending' | 'error' | 'success' | 'idle'>) => {
+  const loading = computed(() => ['idle', 'pending'].includes(status.value))
+
+  return loading
+}
+
+export default useLoadingFromStatus
diff --git a/src/composables/useLpiHead.ts b/src/composables/useLpiHead.ts
index 572ad511..565d7c9a 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/composables/useOrganizationCode.ts b/src/composables/useOrganizationCode.ts
index f65fcf8e..e75de7ae 100644
--- a/src/composables/useOrganizationCode.ts
+++ b/src/composables/useOrganizationCode.ts
@@ -1,7 +1,15 @@
 import { useRuntimeConfig } from '#imports'
 import useOrganizationsStore from '@/stores/useOrganizations'
 
-const useOrganizationCode = () => {
+/**
+ * return current organizationCode
+ *
+ * @function
+ * @name useOrganizationCode
+ * @kind variable
+ * @returns {string}
+ */
+const useOrganizationCode = (): string => {
   const store = useOrganizationsStore()
   // If no organization set in the param use default one
   // TODO check why rootState.organizations.current is sometimes null
diff --git a/src/composables/usePagination.ts b/src/composables/usePagination.ts
index babf9bc7..df987752 100644
--- a/src/composables/usePagination.ts
+++ b/src/composables/usePagination.ts
@@ -37,7 +37,7 @@ export type PaginationQuery = {
   offset?: number
 }
 
-const DEFAULT_Pagination_LIMIT = 100
+const DEFAULT_PAGINATION_LIMIT = 10
 export type paginationConfig = {
   limit?: number
   offset?: number
@@ -45,6 +45,8 @@ export type paginationConfig = {
 
 export type Pagination = {
   current: Ref<number>
+  limit: Ref<number>
+  offset: ComputedRef<number>
   total: Ref<number>
   count: Ref<number>
   setPage: (page: number) => boolean
@@ -68,12 +70,13 @@ export const usePagination = (
   const current = ref(1)
   const total = ref(0)
   const count = ref(0)
-  const limit = paginationConfig.limit ?? DEFAULT_Pagination_LIMIT
+  const limit = ref(paginationConfig.limit ?? DEFAULT_PAGINATION_LIMIT)
+  const offset = computed(() => Math.max((current.value - 1) * limit.value, 0))
 
   watch(
     results,
     () => {
-      current.value = results.value?.current_page ?? 0
+      current.value = results.value?.current_page ?? 1
       total.value = results.value?.total_page ?? 0
       count.value = results.value?.count ?? 0
     },
@@ -115,15 +118,16 @@ export const usePagination = (
 
   const query = (): PaginationQuery => {
     // page - 1 for first page
-    const offset = (current.value - 1) * limit
     return {
-      offset,
-      limit,
+      offset: offset.value,
+      limit: limit.value,
     }
   }
 
   return {
     current,
+    limit,
+    offset,
     setPage,
     total,
     count,
diff --git a/src/functs/onlyRefs.ts b/src/functs/onlyRefs.ts
new file mode 100644
index 00000000..d7c8ee81
--- /dev/null
+++ b/src/functs/onlyRefs.ts
@@ -0,0 +1,15 @@
+import { RefOrRaw } from '@/interfaces/utils'
+
+/**
+ * filter only ref/computed vars
+ * @function
+ * @name onlyRef
+ * @kind variable
+ * @param {string | globalThis.Ref<any} values_0
+ * @param {any} any> | globalThis.ComputedRef<any>
+ * @returns {[Ref | ComputedRef]}
+ * @exports
+ */
+export const onlyRefs = (values: (RefOrRaw<string> | RefOrRaw<number>)[]): [Ref | ComputedRef] => {
+  return values.filter((v) => isRef(v) || isReactive(v)) as [Ref | ComputedRef]
+}
diff --git a/src/interfaces/utils.ts b/src/interfaces/utils.ts
new file mode 100644
index 00000000..6fbbb639
--- /dev/null
+++ b/src/interfaces/utils.ts
@@ -0,0 +1 @@
+export type RefOrRaw<T> = Ref<T> | ComputedRef<T> | T
diff --git a/src/models/group.model.ts b/src/models/group.model.ts
index d065e0e0..2693d70e 100644
--- a/src/models/group.model.ts
+++ b/src/models/group.model.ts
@@ -1,4 +1,5 @@
-import { UserFromJWTModel } from '@/models/user.model'
+import { TranslatedPeopleGroupModel } from '@/models/invitation.model'
+import { UserFromJWTModel, UserModel } from '@/models/user.model'
 
 /**
  * @name GroupModel
@@ -12,6 +13,12 @@ export interface GroupModel {
   users: Array<UserFromJWTModel>
 }
 
+export type GroupMember = UserModel & {
+  is_manager: boolean
+}
+
+export type TranslatedGroupMember = TranslatedPeopleGroupModel & GroupMember
+
 export interface HierarchyGroupModel {
   id: number
   name: string
@@ -77,7 +84,3 @@ export interface RemoveGroupMember {
 export interface PostGroupProjects {
   featured_projects: Array<string>
 }
-
-export interface RemoveGroupProject {
-  project: string
-}
diff --git a/src/models/image.model.ts b/src/models/image.model.ts
index 45246bdd..7a101232 100644
--- a/src/models/image.model.ts
+++ b/src/models/image.model.ts
@@ -20,6 +20,17 @@ export type ImageModel = BaseModel &
     }
   }
 
+export type Image = ImageModel &
+  ImageSizesFromApi & {
+    variations: {
+      full: string
+      large: string
+      medium: string
+      small: string
+      original: string
+    }
+  }
+
 export type ImageOutput = Required<ImageModel>
 
 export type ImageOrganizationOutput = Partial<ImageModel> & {
diff --git a/src/models/invitation.model.ts b/src/models/invitation.model.ts
index 084c34c1..63cc8971 100644
--- a/src/models/invitation.model.ts
+++ b/src/models/invitation.model.ts
@@ -1,13 +1,32 @@
+import { Translated } from '@/interfaces/translated'
+import { Image } from '@/models/image.model'
+import { OrganizationModel } from '@/models/organization.model'
+
 // 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: any[]
+  hierarchy: any
+  modules: {
+    members: number
+    featured_projects: number
+  }
 }
 
+export type TranslatedPeopleGroupModel = Translated<
+  PeopleGroupModel,
+  'name' | 'description' | 'short_description'
+>
+
 export interface ProfilePictureVariationsModel {
   full: string
   large: string
diff --git a/src/models/organization.model.ts b/src/models/organization.model.ts
index 6fee4a40..1ee9db01 100644
--- a/src/models/organization.model.ts
+++ b/src/models/organization.model.ts
@@ -3,6 +3,8 @@ import { FaqModel } from '@/models/faq.model'
 import { LanguageType } from '@/models/types'
 import { OrganizationDirectoryModel } from '@/models/organization-directory.model'
 import { TagModel } from './tag.model'
+import { Translated } from '@/interfaces/translated'
+import { ImageModel } from '@/models/image.model'
 
 /**
  * @name OrganizationModel
@@ -25,12 +27,15 @@ export interface TermsAndConditions {
   id: number
   version: number
   content: string
+  displayed_version: number
+  displayed_content: string
+  displayed_updated_at: number
 }
 
 export interface OrganizationModel extends BaseModel {
   id: number
   background_color: string
-  banner_image: string
+  banner_image: ImageModel
   code: string
   contact_email: string
   dashboard_title: string
@@ -43,9 +48,14 @@ export interface OrganizationModel extends BaseModel {
   website_url: string
   faq: FaqModel
   children: string[]
-  enabled_projects_tag_classifications: object[] // TODO: define this type
-  enabled_skills_tag_classifications: object[] // TODO: define this type
+  enabled_projects_tag_classifications: any[] // TODO: define this type
+  enabled_skills_tag_classifications: any[] // TODO: define this type
   terms_and_conditions: TermsAndConditions | null
+  description: string
+  chat_button_text: string
+  auto_translate_content: boolean
+  onboarding_enabled: boolean
+  chat_url?: string
 }
 
 export type OrganizationPatchInput = Partial<OrganizationModel> & {
@@ -61,3 +71,8 @@ export type OrganizationOutput = BaseModel &
     access_request_enabled?: boolean
     languages?: string[]
   }
+
+export type TranslatedOrganizationModel = Translated<
+  OrganizationOutput,
+  'name' | 'dashboard_title' | 'dashboard_subtitle' | 'description' | 'chat_button_text'
+>
diff --git a/src/models/people.model.ts b/src/models/people.model.ts
index 851041f2..d360d513 100644
--- a/src/models/people.model.ts
+++ b/src/models/people.model.ts
@@ -1,3 +1,5 @@
+import { Translated } from '@/interfaces/translated'
+
 /**
  * @name PeopleModel
  * @description user data from people
@@ -34,6 +36,11 @@ export interface PeopleModel {
   twitter?: string
 }
 
+export type TranslatedPeopleModel = Translated<
+  PeopleModel,
+  'description' | 'short_description' | 'job'
+>
+
 export interface UserPostData {
   email: string
   given_name: string
diff --git a/src/pages/GroupPageV2/GroupPage.vue b/src/pages/GroupPageV2/GroupPage.vue
index 4d6557c8..c51a563c 100644
--- a/src/pages/GroupPageV2/GroupPage.vue
+++ b/src/pages/GroupPageV2/GroupPage.vue
@@ -1,27 +1,241 @@
-<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" only-error>
+        <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="group?.email"
+              :can-edit-group="canEditGroup"
+              :is-editing="isEditing"
+              class="slide-panel"
+              @navigated="collapseIfUnderBreakpoint"
+              @toggle-editing="toggleEditing"
+            />
+          </template>
+          <template v-if="currentTab" #content>
+            <SubPageTitle :title-prefix="group.$t?.name" :current-tab="currentTab" />
+            <NuxtPage v-bind="currentTab.props" />
+          </template>
+        </NavPanelLayout>
+      </FetchLoader>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { getGroup } from '@/api/v2/group.service'
+import { useLpiHead2 } from '@/composables/useLpiHead'
+
+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)
+
+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 ?? {
+      members: 0,
+      featured_projects: 0,
+    }
+)
+
+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: isLoading.value,
+      },
+      condition: true,
+      noTitle: true,
+      icon: 'Home',
+    },
+    {
+      isEditing: false,
+      key: 'group-members',
+      dataTest: 'group-members',
+      label: t('group.members'),
+      view: `/group/${route.params.groupId}/members`,
+      altView: `/group/${route.params.groupId}/members/edit`,
+      props: {
+        group: group.value,
+        isLoading: isLoading.value,
+      },
+      condition: groupModules.value.members,
+      icon: 'Users',
+    },
+    {
+      isEditing: false,
+      key: 'group-projects',
+      dataTest: 'group-projects',
+      label: t('group.projects'),
+      view: `/group/${route.params.groupId}/projects`,
+      altView: `/group/${route.params.groupId}/projects/edit`,
+      props: {
+        group: group.value,
+        isLoading: isLoading.value,
+      },
+      condition: groupModules.value.featured_projects,
+      icon: 'Archive',
+    },
+  ]
+})
+
+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: isLoading.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: isLoading.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: isLoading.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;
+}
+</style>
diff --git a/src/pages/GroupPageV2/Tabs/BaseGroupPreview.vue b/src/pages/GroupPageV2/Tabs/BaseGroupPreview.vue
new file mode 100644
index 00000000..03ea9e9b
--- /dev/null
+++ b/src/pages/GroupPageV2/Tabs/BaseGroupPreview.vue
@@ -0,0 +1,25 @@
+<template>
+  <div class="group">
+    <div class="group-header">
+      <h2 class="title">{{ title }} ( {{ total }} )</h2>
+      <SeeMoreArrow v-if="!loading" class="see-more-button" :to="seeMore" />
+    </div>
+
+    <div class="group-container">
+      <slot v-if="loading" name="skeleton" />
+      <slot v-else name="content" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    title: string
+    total: number
+    seeMore: any
+    loading?: boolean
+  }>(),
+  { loading: false }
+)
+</script>
diff --git a/src/pages/CreateEditGroupPage/CreateEditGroupPage.vue b/src/pages/GroupPageV2/Tabs/GroupEditTab.vue
similarity index 81%
rename from src/pages/CreateEditGroupPage/CreateEditGroupPage.vue
rename to src/pages/GroupPageV2/Tabs/GroupEditTab.vue
index 8a5bf6cf..303f6404 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,
+  group: {
+    type: Object,
+    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()
@@ -98,17 +96,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.group?.id)
+// 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({
@@ -117,11 +109,11 @@ const redirectTo404 = () => {
   })
 }
 const cancel = () => {
-  if (props.groupId) {
+  if (props.group.id) {
     router.push(
       props.postCancelRouteFactory
-        ? props.postCancelRouteFactory(props.groupId)
-        : { name: 'Group', params: { groupId: props.groupId } }
+        ? props.postCancelRouteFactory(props.group.id)
+        : { name: 'Group', params: { groupId: props.group.id } }
     )
   } else {
     router.push(
@@ -130,12 +122,8 @@ const cancel = () => {
   }
 }
 
-const { setProjectsData, updateGroupProjects } = useGroupProjectsUpdate(
-  orgCode,
-  props.groupId,
-  form
-)
-const { setMembersData, updateGroupMembers } = useGroupMembersUpdate(orgCode, props.groupId, form)
+const { setProjectsData } = useGroupProjectsUpdate(orgCode, props.group.id, form)
+const { setMembersData } = useGroupMembersUpdate(orgCode, props.group.id, form)
 
 const updateHeader = async (groupId) => {
   // check if header has changed
@@ -150,12 +138,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}`)
     }
   }
 }
@@ -201,10 +191,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,19 +221,16 @@ const updateGroup = async () => {
   isSaving.value = true
   try {
     const payload = buildPayload()
-    payload.id = props.groupId
+    // @ts-expect-error 2339
+    payload.id = props.group.id
     payload.type = form.value.type
 
-    await patchGroup(orgCode.value, props.groupId, payload)
+    await patchGroup(orgCode.value, props.group.id, payload)
 
     // save header
-    await updateHeader(props.groupId)
+    await updateHeader(props.group.id)
 
-    // save members
-    await updateGroupMembers(props.groupId)
-
-    //save featured projects
-    await updateGroupProjects(props.groupId)
+    await refreshNuxtData(`${organizationCode}::group::${groupData.value.id}`)
 
     startEditWatcher()
 
@@ -253,8 +242,8 @@ const updateGroup = async () => {
 
     router.push(
       props.postUpdateRouteFactory
-        ? props.postUpdateRouteFactory(props.groupId)
-        : { name: 'Group', params: { groupId: props.groupId } }
+        ? props.postUpdateRouteFactory(props.group.id)
+        : { name: 'Group', params: { groupId: props.group.id } }
     )
   } catch (error) {
     toaster.pushError(`${t('toasts.group-edit.error')} (${error})`)
@@ -279,7 +268,7 @@ const submit = async () => {
 
 onMounted(async () => {
   stopEditWatcher()
-  if (!props.groupId) {
+  if (!props.group.id) {
     peopleGroupsStore.currentId = null
     // check right to create (if no grouip id passed) or edit (if group id passed)
     // and 404 if not allowed
@@ -291,14 +280,13 @@ onMounted(async () => {
     // load data
     // general data
     try {
-      const _groupData = await getGroup(orgCode.value, props.groupId)
-
+      const _groupData = await getGroup(orgCode.value, props.group.id)
       // now we can get the real id (not slug)
       peopleGroupsStore.currentId = _groupData.id
       if (!canEditGroup.value) {
         router.push({
           name: 'Group',
-          params: { groupId: props.groupId },
+          params: { groupId: props.group.id },
         })
         return
       }
@@ -314,6 +302,7 @@ onMounted(async () => {
       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 +321,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">
@@ -356,7 +334,7 @@ try {
         ref="groupForm"
         v-model="form"
         :validation="v$"
-        :is-add-mode="!groupId"
+        :is-add-mode="!group.id"
         :is-reduced-mode="isReducedMode"
         @close="$emit('close')"
       />
diff --git a/src/pages/GroupPageV2/Tabs/GroupMembersEditTab.vue b/src/pages/GroupPageV2/Tabs/GroupMembersEditTab.vue
deleted file mode 100644
index 91a67ac7..00000000
--- 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 4c89984f..00000000
--- 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 fb87c49a..00000000
--- 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 e9e6aac0..00000000
--- 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 989748f1..c3eb567c 100644
--- a/src/pages/GroupPageV2/Tabs/GroupSnapshotTab.vue
+++ b/src/pages/GroupPageV2/Tabs/GroupSnapshotTab.vue
@@ -1,204 +1,54 @@
 <template>
   <div class="group-snapshot">
     <GroupHeaderV2
-      :title="groupName"
-      :image="groupImage"
-      :visibility="groupVisibility"
-      :email="groupEmail"
-      :short-description="groupShortDescription"
+      :title="group.$t.name"
+      :image="group.header_image"
+      :visibility="group.publication_status"
+      :email="group.email"
+      :short-description="group.$t.short_description"
       :is-loading="isLoading"
     />
-    <SubGroups v-if="groupChildren.length > 0" :subgroups="groupChildren" :is-loading="isLoading" />
-    <div v-if="!isLoading" class="description">
+    <SubGroups v-if="group.children?.length" :subgroups="group.children" :is-loading="isLoading" />
+    <div class="description">
       <DescriptionExpandable
-        :description="description"
+        :description="group.$t.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 },
-          }"
+      <!-- add new modules Here -->
+      <div data-test="group-modules">
+        <GroupProjectsPreview
+          v-if="groupModules.featured_projects"
+          :group="group"
+          :is-loading="isLoading"
         />
-      </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>
+        <GroupMembersPreview v-if="groupModules.members" :group="group" :is-loading="isLoading" />
       </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: '',
-    },
+<script setup lang="ts">
+import { TranslatedPeopleGroupModel } from '@/models/invitation.model'
+import GroupProjectsPreview from '@/pages/GroupPageV2/Tabs/Projects/GroupProjectsPreview.vue'
+import GroupMembersPreview from '@/pages/GroupPageV2/Tabs/Members/GroupMembersPreview.vue'
 
-    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)
+defineOptions({ name: 'GroupSnapshotTab' })
+const props = defineProps<{
+  group: TranslatedPeopleGroupModel
+  isLoading: boolean
+}>()
 
+// filters only modules with upper than zero elements
+const groupModules = computed(() => {
+  if (!props.group || !props.group.modules) {
     return {
-      members,
-      membersCount,
-      projects,
-      projectsCount,
+      featured_projects: 0,
+      members: 0,
     }
-  },
-
-  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
-    },
-  },
-}
+  }
+  return props.group.modules
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/pages/GroupPageV2/Tabs/GroupTabs.vue b/src/pages/GroupPageV2/Tabs/GroupTabs.vue
deleted file mode 100644
index 238399ad..00000000
--- 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/Members/GroupMembersEditTab.vue b/src/pages/GroupPageV2/Tabs/Members/GroupMembersEditTab.vue
new file mode 100644
index 00000000..c4dd7c94
--- /dev/null
+++ b/src/pages/GroupPageV2/Tabs/Members/GroupMembersEditTab.vue
@@ -0,0 +1,62 @@
+<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>
+
+<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>
diff --git a/src/pages/GroupPageV2/Tabs/Members/GroupMembersPreview.vue b/src/pages/GroupPageV2/Tabs/Members/GroupMembersPreview.vue
new file mode 100644
index 00000000..7f28d6d3
--- /dev/null
+++ b/src/pages/GroupPageV2/Tabs/Members/GroupMembersPreview.vue
@@ -0,0 +1,73 @@
+<template>
+  <BaseGroupPreview
+    :title="$t('group.members')"
+    :total="group.modules.members"
+    :loading="loading"
+    :see-more="{ name: 'groupMembers', params: { groupId: group.id } }"
+  >
+    <template #skeleton>
+      <MemberListSkeleton :min-gap="90" :desktop-columns-number="3" :limit="limitSkeletons" />
+    </template>
+    <template #content>
+      <FetchLoader :status="status">
+        <DynamicGrid :min-gap="90" class="members-container">
+          <GroupMemberItem
+            v-for="member in data"
+            :key="member.id"
+            :user="member"
+            :is-manager="member.is_manager"
+            class="cursor-pointer shadow-drop"
+            @user-click="openProfile"
+            @close="closeProfile"
+          />
+        </DynamicGrid>
+      </FetchLoader>
+      <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>
+    </template>
+  </BaseGroupPreview>
+</template>
+
+<script setup lang="ts">
+import { getGroupMember } from '@/api/v2/group.service'
+import { TranslatedPeopleGroupModel } from '@/models/invitation.model'
+import BaseGroupPreview from '@/pages/GroupPageV2/Tabs/BaseGroupPreview.vue'
+const LIMIT = 6
+
+const props = defineProps<{
+  group: TranslatedPeopleGroupModel
+  isLoading: boolean
+}>()
+
+const organizationCode = useOrganizationCode()
+const limitSkeletons = computed(() => Math.min(props.group.modules?.members ?? LIMIT, LIMIT))
+
+const {
+  status,
+  data,
+  isLoading: isLoadingMember,
+} = getGroupMember(organizationCode, props.group.id, {
+  paginationConfig: {
+    limit: LIMIT,
+  },
+})
+const loading = computed(() => props.isLoading || isLoadingMember.value)
+
+const userIdDrawer = ref<number | null>()
+const openProfile = (user) => (userIdDrawer.value = user.id)
+const closeProfile = () => (userIdDrawer.value = null)
+</script>
diff --git a/src/pages/GroupPageV2/Tabs/Members/GroupMembersTab.vue b/src/pages/GroupPageV2/Tabs/Members/GroupMembersTab.vue
new file mode 100644
index 00000000..ad17ff64
--- /dev/null
+++ b/src/pages/GroupPageV2/Tabs/Members/GroupMembersTab.vue
@@ -0,0 +1,115 @@
+<template>
+  <div class="group-members">
+    <FetchLoader :status="status" only-error>
+      <div class="members">
+        <div class="members-header">
+          <h2 class="title">
+            {{ $t('group.group-members') }}
+            <span v-show="countElement">( {{ countElement }} )</span>
+          </h2>
+        </div>
+        <MemberListSkeleton v-if="isLoading" :min-gap="90" :limit="limitSkeletons" />
+        <DynamicGrid v-else :min-gap="90" class="members-container">
+          <GroupMemberItem
+            v-for="member in data"
+            :key="member.id"
+            :user="member"
+            class="cursor-pointer shadow-drop"
+            @user-click="openProfile"
+          />
+        </DynamicGrid>
+      </div>
+      <div v-if="!isLoading && total > 1" class="pagination-container">
+        <PaginationButtons2 :pagination="pagination" />
+      </div>
+      <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>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { getGroupMember } from '@/api/v2/group.service'
+import { TranslatedPeopleGroupModel } from '@/models/invitation.model'
+
+defineOptions({ name: 'GroupMembersTab' })
+
+const props = defineProps<{
+  group: TranslatedPeopleGroupModel
+}>()
+
+const LIMIT = 10
+const organizationCode = useOrganizationCode()
+const limitSkeletons = computed(() => Math.min(props.group.modules?.members ?? LIMIT, LIMIT))
+
+const { data, isLoading, pagination, status } = getGroupMember(organizationCode, props.group.id, {
+  paginationConfig: {
+    limit: LIMIT,
+  },
+})
+const { total, count } = pagination
+
+const userIdDrawer = ref<number | null>()
+const openProfile = (user) => (userIdDrawer.value = user.id)
+const closeProfile = () => (userIdDrawer.value = null)
+
+const countElement = computed<number>(
+  () => (isLoading.value ? props.group.modules?.members : count.value) ?? count.value
+)
+</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/Projects/GroupProjectsEditTab.vue b/src/pages/GroupPageV2/Tabs/Projects/GroupProjectsEditTab.vue
new file mode 100644
index 00000000..9cb7ce2f
--- /dev/null
+++ b/src/pages/GroupPageV2/Tabs/Projects/GroupProjectsEditTab.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { getGroupProject } from '@/api/v2/group.service'
+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 { data, status } = getGroupProject(organizationCode, props.group.id, {
+  paginatedConfig: { limit: 999 },
+})
+
+const form = ref({
+  featuredProjects: [],
+})
+
+const { groupProjectData, setProjectsData, updateGroupProjects, isSaving } = 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>
+
+<template>
+  <div class="group-projects">
+    <FetchLoader :status="status">
+      <FormPanel
+        :confirm-action-name="$t('common.save')"
+        :asyncing="isSaving"
+        @close="redirect(data.length)"
+        @confirm="save"
+      >
+        <ProjectSection v-model="form.featuredProjects" />
+      </FormPanel>
+    </FetchLoader>
+  </div>
+</template>
diff --git a/src/pages/GroupPageV2/Tabs/Projects/GroupProjectsPreview.vue b/src/pages/GroupPageV2/Tabs/Projects/GroupProjectsPreview.vue
new file mode 100644
index 00000000..e2c41a16
--- /dev/null
+++ b/src/pages/GroupPageV2/Tabs/Projects/GroupProjectsPreview.vue
@@ -0,0 +1,45 @@
+<template>
+  <BaseGroupPreview
+    :title="$t('group.projects')"
+    :total="group.modules.featured_projects"
+    :see-more="{
+      name: 'groupProjects',
+      params: { groupId: group.id },
+    }"
+  >
+    <template #content>
+      <FetchLoader :status="status" only-error>
+        <CardList :is-loading="loading" :items="data" :limit="limitSkeletons">
+          <template #default="projectListSlotProps">
+            <ProjectCard :horizontal-display="true" :project="projectListSlotProps.item" />
+          </template>
+        </CardList>
+      </FetchLoader>
+    </template>
+  </BaseGroupPreview>
+</template>
+
+<script setup lang="ts">
+import { getGroupProject } from '@/api/v2/group.service'
+import { TranslatedPeopleGroupModel } from '@/models/invitation.model'
+import BaseGroupPreview from '@/pages/GroupPageV2/Tabs/BaseGroupPreview.vue'
+
+const props = defineProps<{
+  group: TranslatedPeopleGroupModel
+  isLoading: boolean
+}>()
+
+const LIMIT = 6
+const limitSkeletons = computed(() =>
+  Math.min(props.group.modules?.featured_projects ?? LIMIT, LIMIT)
+)
+
+const organizationCode = useOrganizationCode()
+
+const {
+  status,
+  data,
+  isLoading: isLoadingProject,
+} = getGroupProject(organizationCode, props.group.id, { paginationConfig: { limit: LIMIT } })
+const loading = computed(() => props.isLoading || isLoadingProject.value)
+</script>
diff --git a/src/pages/GroupPageV2/Tabs/Projects/GroupProjectsTab.vue b/src/pages/GroupPageV2/Tabs/Projects/GroupProjectsTab.vue
new file mode 100644
index 00000000..1d6435d1
--- /dev/null
+++ b/src/pages/GroupPageV2/Tabs/Projects/GroupProjectsTab.vue
@@ -0,0 +1,85 @@
+<template>
+  <div class="group-projects">
+    <div class="projects">
+      <div class="projects-header">
+        <h2 class="title">
+          {{ $t('group.group-projects') }}
+          <span v-show="count">( {{ countElement }} )</span>
+        </h2>
+      </div>
+      <div class="projects-container">
+        <FetchLoader :status="status" only-error>
+          <CardList :is-loading="isLoading" :items="data" :limit="limitSkeletons">
+            <template #default="projectListSlotProps">
+              <ProjectCard :project="projectListSlotProps.item" />
+            </template>
+          </CardList>
+          <div v-if="total > 1" class="pagination-container">
+            <PaginationButtons2 :pagination="pagination" />
+          </div>
+        </FetchLoader>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { getGroupProject } from '@/api/v2/group.service'
+import CardList from '@/components/base/CardList.vue'
+import FetchLoader from '@/components/base/FetchLoader.vue'
+import ProjectCard from '@/components/project/ProjectCard.vue'
+
+import { TranslatedPeopleGroupModel } from '@/models/invitation.model'
+
+const props = defineProps<{
+  group: TranslatedPeopleGroupModel
+}>()
+
+const MAX_SKELETONS = 10
+const limitSkeletons = computed(() =>
+  Math.min(props.group.modules?.featured_projects ?? MAX_SKELETONS, MAX_SKELETONS)
+)
+const organizationCode = useOrganizationCode()
+const { data, isLoading, pagination, status } = getGroupProject(organizationCode, props.group.id)
+const { total, count } = pagination
+
+const countElement = computed(
+  () => (isLoading.value ? props.group.modules?.featured_projects : count) ?? count
+)
+</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/GroupsPage/GroupsPage.vue b/src/pages/GroupsPage/GroupsPage.vue
index 9ce8a665..e0f37cf4 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">
diff --git a/src/stores/useOrganizations.ts b/src/stores/useOrganizations.ts
index 955452c6..14787f90 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 c8481edd..86740401 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 a926f8d3..b5f3c485 100644
--- a/tests/factories/group.factory.ts
+++ b/tests/factories/group.factory.ts
@@ -1,6 +1,9 @@
 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'
 
 export const groupFactory = createFactory<GroupModel>((faker) => ({
   ...BaseFactory.generate(),
@@ -13,3 +16,32 @@ 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,
+  },
+  hierarchy: null,
+}))
+
+export const groupTranslatedFactory = createFactory<TranslatedPeopleGroupModel>((faker) => ({
+  ...peopleGroupFactory.generate(),
+  $t: {
+    name: faker.name.title(),
+    description: faker.lorem.text(100),
+    short_description: faker.lorem.text(20),
+  },
+}))
diff --git a/tests/factories/organization.factory.ts b/tests/factories/organization.factory.ts
index 43932542..a37a144b 100644
--- a/tests/factories/organization.factory.ts
+++ b/tests/factories/organization.factory.ts
@@ -9,12 +9,13 @@ import BaseFactory from './base.factory'
 import FaqFactory from './faq.factory'
 import OrganizationDirectoryFactory from './organization-directory.factory'
 import TagFactory from './tag.factory'
+import { ImageFactory } from './image.factory'
 
 const OrganizationFactory = createFactory<OrganizationModel>((faker) => ({
   ...BaseFactory.generate(),
   id: faker.datatype.number(),
   background_color: faker.datatype.string(),
-  banner_image: faker.image.image(),
+  banner_image: ImageFactory.generate(),
   code: faker.datatype.string(),
   contact_email: faker.internet.email(),
   dashboard_title: faker.lorem.sentence(),
@@ -41,14 +42,19 @@ const OrganizationFactory = createFactory<OrganizationModel>((faker) => ({
   enabled_projects_tag_classifications: [], // TODO: define this type
   enabled_skills_tag_classifications: [], // TODO: define this type
   terms_and_conditions: null,
+  auto_translate_content: false,
+  description: '',
+  chat_button_text: '',
+  onboarding_enabled: false,
 }))
 
-export const OrganizationOutputFactory = createFactory<OrganizationOutput>(() => ({
+export const OrganizationOutputFactory = createFactory<OrganizationOutput>((faker) => ({
   ...OrganizationFactory.generate(),
   faq: FaqFactory.generate(),
   organization_directory: OrganizationDirectoryFactory.generate(),
   tags: TagFactory.generateMany(2),
   children: [],
+  chat_url: faker.internet.url(),
 }))
 
 export const OrganizationPatchInputFactory = createFactory<OrganizationPatchInput>(() => ({
diff --git a/tests/unit/pages/GroupPage/GroupPageInnerV2.spec.ts b/tests/unit/pages/GroupPage/GroupPageInnerV2.spec.ts
index 6dc15e27..6d6d3f2a 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 3d1331b6..757c8bc2 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 fc3da1a8..8a8d4267 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 ecb57311..3efe07ec 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)
   })
 })