diff --git a/changelog/unreleased/enhancement-admin-settings-groups-add-members-panel b/changelog/unreleased/enhancement-admin-settings-groups-add-members-panel
new file mode 100644
index 00000000000..a95356ca04c
--- /dev/null
+++ b/changelog/unreleased/enhancement-admin-settings-groups-add-members-panel
@@ -0,0 +1,6 @@
+Enhancement: Admin settings groups members panel
+
+We've added the members panel to the groups page in admin settings.
+
+https://github.com/owncloud/web/pull/8826
+https://github.com/owncloud/web/issues/8596
diff --git a/packages/web-app-admin-settings/src/components/Groups/SideBar/MembersPanel.vue b/packages/web-app-admin-settings/src/components/Groups/SideBar/MembersPanel.vue
new file mode 100644
index 00000000000..0ea5b6e7f1c
--- /dev/null
+++ b/packages/web-app-admin-settings/src/components/Groups/SideBar/MembersPanel.vue
@@ -0,0 +1,81 @@
+<template>
+  <div class="oc-ml-s">
+    <oc-text-input
+      v-model="filterTerm"
+      class="oc-text-truncate oc-mr-s oc-mt-m"
+      :label="$gettext('Filter members')"
+    />
+    <div ref="membersListRef" data-testid="space-members">
+      <div v-if="!filteredGroupMembers.length">
+        <h3 class="oc-text-bold oc-text-medium" v-text="$gettext('No members found')" />
+      </div>
+      <div v-if="filteredGroupMembers.length" class="oc-mb-m" data-testid="group-members">
+        <h3 class="oc-text-bold oc-text-medium" v-text="$gettext('Members')" />
+        <members-role-section :group-members="filteredGroupMembers" />
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { computed, defineComponent, inject, ref, watch, unref, Ref } from 'vue'
+import MembersRoleSection from '../../Groups/SideBar/MembersRoleSection.vue'
+import Fuse from 'fuse.js'
+import Mark from 'mark.js'
+import { Group } from 'web-client/src/generated'
+
+export default defineComponent({
+  name: 'GroupsMembersPanel',
+  components: { MembersRoleSection },
+  setup() {
+    const group = inject<Ref<Group>>('group')
+    const filterTerm = ref('')
+    const markInstance = ref(null)
+    const membersListRef = ref(null)
+
+    const filterMembers = (collection, term) => {
+      if (!(term || '').trim()) {
+        return collection
+      }
+
+      const searchEngine = new Fuse(collection, {
+        includeScore: false,
+        useExtendedSearch: true,
+        threshold: 0.1,
+        keys: ['displayName']
+      })
+
+      return searchEngine.search(term).map((r) => r.item)
+    }
+
+    const members = computed(() => {
+      if (group) {
+        return unref(group).members.sort((a, b) => a.displayName.localeCompare(b.displayName))
+      }
+      return []
+    })
+
+    const filteredGroupMembers = computed(() => {
+      return filterMembers(unref(members), unref(filterTerm))
+    })
+
+    watch(filterTerm, () => {
+      if (unref(membersListRef)) {
+        markInstance.value = new Mark(unref(membersListRef))
+        unref(markInstance).unmark()
+        const searchTermRegex = unref(filterTerm)
+        unref(markInstance).mark(searchTermRegex, {
+          element: 'span',
+          className: 'highlight-mark'
+        })
+      }
+    })
+
+    return {
+      filterTerm,
+      membersListRef,
+      members,
+      filteredGroupMembers
+    }
+  }
+})
+</script>
diff --git a/packages/web-app-admin-settings/src/components/Groups/SideBar/MembersRoleSection.vue b/packages/web-app-admin-settings/src/components/Groups/SideBar/MembersRoleSection.vue
new file mode 100644
index 00000000000..d9aaeee2ed8
--- /dev/null
+++ b/packages/web-app-admin-settings/src/components/Groups/SideBar/MembersRoleSection.vue
@@ -0,0 +1,27 @@
+<template>
+  <ul class="oc-list">
+    <li
+      v-for="(member, index) in groupMembers"
+      :key="index"
+      class="oc-flex oc-flex-middle oc-mb-s"
+      data-testid="group-members-list"
+    >
+      <oc-avatar :user-name="member.displayName" :width="36" class="oc-mr-s" />
+      <span>{{ member.displayName }}</span>
+    </li>
+  </ul>
+</template>
+<script lang="ts">
+import { defineComponent, PropType } from 'vue'
+import { User } from 'web-client/src/helpers'
+
+export default defineComponent({
+  name: 'MembersRoleSection',
+  props: {
+    groupMembers: {
+      type: Array as PropType<User[]>,
+      required: false
+    }
+  }
+})
+</script>
diff --git a/packages/web-app-admin-settings/src/views/Groups.vue b/packages/web-app-admin-settings/src/views/Groups.vue
index 29937f35210..965531d2db1 100644
--- a/packages/web-app-admin-settings/src/views/Groups.vue
+++ b/packages/web-app-admin-settings/src/views/Groups.vue
@@ -84,6 +84,7 @@ import { useClientService, useStore } from 'web-pkg/src/composables'
 import AppTemplate from '../components/AppTemplate.vue'
 import { useSideBar } from 'web-pkg/src/composables/sideBar'
 import { useGroupActionsDelete } from '../composables/actions/groups'
+import MembersPanel from '../components/Groups/SideBar/MembersPanel.vue'
 
 export default defineComponent({
   components: {
@@ -93,6 +94,11 @@ export default defineComponent({
     CreateGroupModal,
     ContextActions
   },
+  provide() {
+    return {
+      group: computed(() => this.selectedGroups[0])
+    }
+  },
   setup() {
     const store = useStore()
     const groups = ref([])
@@ -192,6 +198,14 @@ export default defineComponent({
             group: this.selectedGroups.length === 1 ? this.selectedGroups[0] : null,
             onConfirm: this.editGroup
           }
+        },
+        {
+          app: 'GroupMembers',
+          icon: 'group',
+          title: this.$gettext('Members'),
+          component: MembersPanel,
+          default: false,
+          enabled: this.selectedGroups.length === 1
         }
       ].filter((p) => p.enabled)
     }
diff --git a/packages/web-app-admin-settings/tests/unit/components/Groups/SideBar/MembersPanel.spec.ts b/packages/web-app-admin-settings/tests/unit/components/Groups/SideBar/MembersPanel.spec.ts
new file mode 100644
index 00000000000..c566816b524
--- /dev/null
+++ b/packages/web-app-admin-settings/tests/unit/components/Groups/SideBar/MembersPanel.spec.ts
@@ -0,0 +1,47 @@
+import MembersPanel from '../../../../../src/components/Groups/SideBar/MembersPanel.vue'
+import { defaultPlugins, shallowMount } from 'web-test-helpers'
+import { mock } from 'jest-mock-extended'
+import { Group } from 'web-client/src/generated'
+
+const groupMock = mock<Group>({
+  id: '1',
+  groupTypes: [],
+  members: [{ displayName: 'Albert Einstein' }]
+})
+const selectors = {
+  membersRolePanelStub: 'members-role-section-stub'
+}
+
+describe('MembersPanel', () => {
+  it('should render all members accordingly to their role assignments', () => {
+    const { wrapper } = getWrapper()
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+  it('should filter members accordingly to the entered search term', async () => {
+    const { wrapper } = getWrapper()
+    wrapper.vm.filterTerm = 'ein'
+    await wrapper.vm.$nextTick
+    expect(wrapper.findAll(selectors.membersRolePanelStub).length).toBe(1)
+    expect(
+      wrapper.findComponent<any>(selectors.membersRolePanelStub).props().groupMembers[0].displayName
+    ).toEqual('Albert Einstein')
+  })
+  it('should display an empty result if no matching members found', async () => {
+    const { wrapper } = getWrapper()
+    wrapper.vm.filterTerm = 'no-match'
+    await wrapper.vm.$nextTick
+    expect(wrapper.findAll(selectors.membersRolePanelStub).length).toBe(0)
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+})
+
+function getWrapper({ group = groupMock } = {}) {
+  return {
+    wrapper: shallowMount(MembersPanel, {
+      global: {
+        plugins: [...defaultPlugins()],
+        provide: { group: group }
+      }
+    })
+  }
+}
diff --git a/packages/web-app-admin-settings/tests/unit/components/Groups/SideBar/__snapshots__/MembersPanel.spec.ts.snap b/packages/web-app-admin-settings/tests/unit/components/Groups/SideBar/__snapshots__/MembersPanel.spec.ts.snap
new file mode 100644
index 00000000000..2d09187d029
--- /dev/null
+++ b/packages/web-app-admin-settings/tests/unit/components/Groups/SideBar/__snapshots__/MembersPanel.spec.ts.snap
@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MembersPanel should display an empty result if no matching members found 1`] = `
+<div class="oc-ml-s">
+  <oc-text-input-stub class="oc-text-truncate oc-mr-s oc-mt-m" clearbuttonaccessiblelabel="" clearbuttonenabled="false" disabled="false" fixmessageline="false" id="oc-textinput-3" label="Filter members" modelvalue="no-match" type="text"></oc-text-input-stub>
+  <div>
+    <div>
+      <h3 class="oc-text-bold oc-text-medium">No members found</h3>
+    </div>
+    <!--v-if-->
+  </div>
+</div>
+`;
+
+exports[`MembersPanel should render all members accordingly to their role assignments 1`] = `
+<div class="oc-ml-s">
+  <oc-text-input-stub class="oc-text-truncate oc-mr-s oc-mt-m" clearbuttonaccessiblelabel="" clearbuttonenabled="false" disabled="false" fixmessageline="false" id="oc-textinput-1" label="Filter members" modelvalue="" type="text"></oc-text-input-stub>
+  <div>
+    <!--v-if-->
+    <div class="oc-mb-m">
+      <h3 class="oc-text-bold oc-text-medium">Members</h3>
+      <members-role-section-stub groupmembers="undefined"></members-role-section-stub>
+    </div>
+  </div>
+</div>
+`;