diff --git a/ee/app/assets/javascripts/pages/admin/application_settings/roles_and_permissions/index.js b/ee/app/assets/javascripts/pages/admin/application_settings/roles_and_permissions/index.js
index 6788140c19839b841cdc789b76dc9df7ac3cd00d..a36c2808700e45927860e6b89d9ef25b21f59ca7 100644
--- a/ee/app/assets/javascripts/pages/admin/application_settings/roles_and_permissions/index.js
+++ b/ee/app/assets/javascripts/pages/admin/application_settings/roles_and_permissions/index.js
@@ -1,7 +1,3 @@
 import { initRolesAndPermissions } from 'ee/roles_and_permissions';
-import { s__ } from '~/locale';
 
-initRolesAndPermissions({
-  emptyText: s__(`MemberRole|To add a new role select a group and then 'Add new role'.`),
-  showGroupSelector: true,
-});
+initRolesAndPermissions();
diff --git a/ee/app/assets/javascripts/pages/groups/settings/roles_and_permissions/index.js b/ee/app/assets/javascripts/pages/groups/settings/roles_and_permissions/index.js
index b7f090b22965297daf94aac7b8e5d3e2a545a36e..a36c2808700e45927860e6b89d9ef25b21f59ca7 100644
--- a/ee/app/assets/javascripts/pages/groups/settings/roles_and_permissions/index.js
+++ b/ee/app/assets/javascripts/pages/groups/settings/roles_and_permissions/index.js
@@ -1,7 +1,3 @@
 import { initRolesAndPermissions } from 'ee/roles_and_permissions';
-import { s__ } from '~/locale';
 
-initRolesAndPermissions({
-  emptyText: s__(`MemberRole|To add a new role select 'Add new role'.`),
-  showGroupSelector: false,
-});
+initRolesAndPermissions();
diff --git a/ee/app/assets/javascripts/roles_and_permissions/components/create_member_role.vue b/ee/app/assets/javascripts/roles_and_permissions/components/create_member_role.vue
index 54f6c8a107fb59c3c59ea325ca9c958482b579dd..59b7f448b1e43adf074859099c26200aaed1743c 100644
--- a/ee/app/assets/javascripts/roles_and_permissions/components/create_member_role.vue
+++ b/ee/app/assets/javascripts/roles_and_permissions/components/create_member_role.vue
@@ -13,7 +13,8 @@ import {
 import { createAlert } from '~/alert';
 import { sprintf, s__ } from '~/locale';
 import { ACCESS_LEVEL_GUEST_INTEGER, ACCESS_LEVEL_LABELS } from '~/access_level/constants';
-import memberRolesQuery from 'ee/invite_members/graphql/queries/group_member_roles.query.graphql';
+import groupMemberRolesQuery from 'ee/invite_members/graphql/queries/group_member_roles.query.graphql';
+import instanceMemberRolesQuery from '../graphql/instance_member_roles.query.graphql';
 import createMemberRoleMutation from '../graphql/create_member_role.mutation.graphql';
 
 // Base roles with Guest access or higher.
@@ -39,7 +40,8 @@ export default {
   props: {
     groupFullPath: {
       type: String,
-      required: true,
+      required: false,
+      default: null,
     },
     availablePermissions: {
       type: Array,
@@ -63,6 +65,9 @@ export default {
     baseRoleUppercase() {
       return ACCESS_LEVEL_LABELS[this.baseRole].toUpperCase();
     },
+    refetchMemberRolesQuery() {
+      return this.groupFullPath ? groupMemberRolesQuery : instanceMemberRolesQuery;
+    },
   },
   methods: {
     validateFields() {
@@ -88,7 +93,7 @@ export default {
           mutation: createMemberRoleMutation,
           refetchQueries: [
             {
-              query: memberRolesQuery,
+              query: this.refetchMemberRolesQuery,
               variables: { fullPath: this.groupFullPath },
             },
           ],
diff --git a/ee/app/assets/javascripts/roles_and_permissions/components/list_member_roles.vue b/ee/app/assets/javascripts/roles_and_permissions/components/list_member_roles.vue
index e044836c92cf37ed806cc55f818ca745081d3ff4..90351f67213c85fa8e3082de38d950ad163f64df 100644
--- a/ee/app/assets/javascripts/roles_and_permissions/components/list_member_roles.vue
+++ b/ee/app/assets/javascripts/roles_and_permissions/components/list_member_roles.vue
@@ -5,7 +5,8 @@ import { createAlert } from '~/alert';
 import { sprintf, s__, __ } from '~/locale';
 import { TYPENAME_MEMBER_ROLE } from '~/graphql_shared/constants';
 import { convertToGraphQLId, getIdFromGraphQLId } from '~/graphql_shared/utils';
-import memberRolesQuery from 'ee/invite_members/graphql/queries/group_member_roles.query.graphql';
+import groupMemberRolesQuery from 'ee/invite_members/graphql/queries/group_member_roles.query.graphql';
+import instanceMemberRolesQuery from '../graphql/instance_member_roles.query.graphql';
 import memberRolePermissionsQuery from '../graphql/member_role_permissions.query.graphql';
 import deleteMemberRoleMutation from '../graphql/delete_member_role.mutation.graphql';
 import CreateMemberRole from './create_member_role.vue';
@@ -23,14 +24,14 @@ export default {
     addNewRole: s__('MemberRole|Add new role'),
     cardTitle: s__('MemberRole|Custom roles'),
     deleteRole: s__('MemberRole|Delete role'),
-    emptyTitle: s__('MemberRole|No custom roles for this group'),
+    emptyTitle: s__('MemberRole|No custom roles found'),
+    emptyDescription: s__(`MemberRole|To add a new role select 'Add new role'.`),
     fetchRolesError: s__('MemberRole|Failed to fetch roles: %{message}'),
     fetchPermissionsError: s__('MemberRole|Could not fetch available permissions: %{message}'),
     deleteSuccess: s__('MemberRole|Role successfully deleted.'),
     deleteError: s__('MemberRole|Failed to delete the role.'),
     deleteErrorWithReason: s__('MemberRole|Failed to delete the role: %{message}'),
     createSuccess: s__('MemberRole|Role successfully created.'),
-    licenseError: s__('MemberRole|Make sure the group is in the Ultimate tier.'),
   },
   components: {
     CreateMemberRole,
@@ -42,11 +43,6 @@ export default {
     GlTable,
   },
   props: {
-    emptyText: {
-      type: String,
-      required: false,
-      default: null,
-    },
     groupFullPath: {
       type: String,
       required: false,
@@ -64,14 +60,20 @@ export default {
   },
   apollo: {
     memberRoles: {
-      query: memberRolesQuery,
+      query() {
+        return this.fetchMemberRolesQuery;
+      },
       variables() {
         return {
           fullPath: this.groupFullPath,
         };
       },
       update(data) {
-        const memberRoles = data?.namespace?.memberRoles?.nodes || [];
+        const nodes = this.groupFullPath
+          ? data?.namespace?.memberRoles?.nodes
+          : data?.memberRoles?.nodes;
+
+        const memberRoles = nodes || [];
 
         return memberRoles.map(({ id, name, baseAccessLevel, enabledPermissions }) => ({
           name,
@@ -85,9 +87,6 @@ export default {
           message: sprintf(this.$options.i18n.fetchRolesError, { message }),
         });
       },
-      skip() {
-        return !this.groupFullPath;
-      },
     },
     availablePermissions: {
       query: memberRolePermissionsQuery,
@@ -102,6 +101,9 @@ export default {
     },
   },
   computed: {
+    fetchMemberRolesQuery() {
+      return this.groupFullPath ? groupMemberRolesQuery : instanceMemberRolesQuery;
+    },
     isLoading() {
       return (
         this.$apollo.queries.memberRoles.loading ||
@@ -112,11 +114,6 @@ export default {
       return this.memberRoleToDelete !== null;
     },
   },
-  watch: {
-    groupFullPath() {
-      this.$apollo.queries.memberRoles.refetch();
-    },
-  },
   methods: {
     async deleteMemberRole() {
       this.alert?.dismiss();
@@ -124,7 +121,7 @@ export default {
       this.$apollo
         .mutate({
           mutation: deleteMemberRoleMutation,
-          refetchQueries: [memberRolesQuery],
+          refetchQueries: [this.fetchMemberRolesQuery],
           variables: {
             input: {
               id: convertToGraphQLId(TYPENAME_MEMBER_ROLE, this.memberRoleToDelete),
@@ -187,7 +184,11 @@ export default {
 </script>
 
 <template>
-  <gl-card header-class="gl-new-card-header" body-class="gl-new-card-body gl-px-0 gl-bg-gray-10">
+  <gl-card
+    header-class="gl-new-card-header"
+    body-class="gl-new-card-body gl-px-0 gl-bg-gray-10"
+    class="gl-mt-5"
+  >
     <template #header>
       <div class="gl-new-card-title-wrapper">
         <h3 class="gl-new-card-title" data-testid="card-title">
@@ -197,7 +198,6 @@ export default {
       </div>
       <div class="gl-new-card-actions">
         <gl-button
-          :disabled="!groupFullPath"
           :loading="isLoading"
           size="small"
           data-testid="add-role"
@@ -220,7 +220,7 @@ export default {
     <gl-empty-state
       v-if="memberRoles.length === 0 && !showCreateMemberForm"
       :title="$options.i18n.emptyTitle"
-      :description="emptyText"
+      :description="$options.i18n.emptyDescription"
     />
 
     <gl-table v-else :fields="$options.FIELDS" :items="memberRoles" :busy="isLoading" stacked="sm">
diff --git a/ee/app/assets/javascripts/roles_and_permissions/components/roles_and_permissions.vue b/ee/app/assets/javascripts/roles_and_permissions/components/roles_and_permissions.vue
deleted file mode 100644
index 569e01e18ccf0d2fce0b0b175f603b35ec1f9606..0000000000000000000000000000000000000000
--- a/ee/app/assets/javascripts/roles_and_permissions/components/roles_and_permissions.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<script>
-import GroupSelect from '~/vue_shared/components/entity_select/group_select.vue';
-import ListMemberRoles from './list_member_roles.vue';
-
-export default {
-  components: {
-    GroupSelect,
-    ListMemberRoles,
-  },
-  props: {
-    showGroupSelector: {
-      type: Boolean,
-      required: true,
-    },
-    groupFullPath: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    emptyText: {
-      type: String,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      selectedGroupPath: this.groupFullPath,
-    };
-  },
-  methods: {
-    updateGroup({ full_path: fullPath }) {
-      this.selectedGroupPath = fullPath;
-    },
-  },
-  apiParams: { top_level_only: '1' },
-};
-</script>
-
-<template>
-  <div class="col">
-    <group-select
-      v-if="showGroupSelector"
-      input-id="group-selector"
-      input-name="group-selector"
-      :api-params="$options.apiParams"
-      @input="updateGroup"
-    />
-    <list-member-roles
-      class="gl-mt-5"
-      :group-full-path="selectedGroupPath"
-      :empty-text="emptyText"
-    />
-  </div>
-</template>
diff --git a/ee/app/assets/javascripts/roles_and_permissions/graphql/instance_member_roles.query.graphql b/ee/app/assets/javascripts/roles_and_permissions/graphql/instance_member_roles.query.graphql
new file mode 100644
index 0000000000000000000000000000000000000000..1e0ad7f352e3b01a704efcf419d410fcf5bc0207
--- /dev/null
+++ b/ee/app/assets/javascripts/roles_and_permissions/graphql/instance_member_roles.query.graphql
@@ -0,0 +1,7 @@
+#import "ee/invite_members/graphql/fragments/member_roles.fragment.graphql"
+
+query getInstanceMemberRoles {
+  memberRoles {
+    ...MemberRoles
+  }
+}
diff --git a/ee/app/assets/javascripts/roles_and_permissions/index.js b/ee/app/assets/javascripts/roles_and_permissions/index.js
index fa48bdae26adb9746a15e3416bb0b32818db44da..c5c254d0a5cbac01c2a204abab3b524193b925a6 100644
--- a/ee/app/assets/javascripts/roles_and_permissions/index.js
+++ b/ee/app/assets/javascripts/roles_and_permissions/index.js
@@ -2,12 +2,12 @@ import { GlToast } from '@gitlab/ui';
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import createDefaultClient from '~/lib/graphql';
-import RolesAndPermissions from './components/roles_and_permissions.vue';
+import ListMemberRoles from './components/list_member_roles.vue';
 
 Vue.use(GlToast);
 Vue.use(VueApollo);
 
-export const initRolesAndPermissions = ({ emptyText, showGroupSelector }) => {
+export const initRolesAndPermissions = () => {
   const apolloProvider = new VueApollo({
     defaultClient: createDefaultClient(),
   });
@@ -23,8 +23,8 @@ export const initRolesAndPermissions = ({ emptyText, showGroupSelector }) => {
     apolloProvider,
     name: 'RolesAndPermissionsRoot',
     render(h) {
-      return h(RolesAndPermissions, {
-        props: { groupFullPath: el.dataset.groupFullPath, emptyText, showGroupSelector },
+      return h(ListMemberRoles, {
+        props: { groupFullPath: el.dataset.groupFullPath },
       });
     },
   });
diff --git a/ee/spec/frontend/roles_and_permissions/components/create_member_role_spec.js b/ee/spec/frontend/roles_and_permissions/components/create_member_role_spec.js
index 560f6e30bde83187fb00bf83bd1525157c79856a..2171e38653ae116f13540b7b19f746be27f877d4 100644
--- a/ee/spec/frontend/roles_and_permissions/components/create_member_role_spec.js
+++ b/ee/spec/frontend/roles_and_permissions/components/create_member_role_spec.js
@@ -3,13 +3,14 @@ import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
 import { createAlert, VARIANT_DANGER } from '~/alert';
 import createMockApollo from 'helpers/mock_apollo_helper';
-import memberRolesQuery from 'ee/invite_members/graphql/queries/group_member_roles.query.graphql';
+import groupMemberRolesQuery from 'ee/invite_members/graphql/queries/group_member_roles.query.graphql';
+import instanceMemberRolesQuery from 'ee/roles_and_permissions/graphql/instance_member_roles.query.graphql';
 import createMemberRoleMutation from 'ee/roles_and_permissions/graphql/create_member_role.mutation.graphql';
 import CreateMemberRole from 'ee/roles_and_permissions/components/create_member_role.vue';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import { stubComponent } from 'helpers/stub_component';
-import { mockDefaultPermissions, mockMemberRoles } from '../mock_data';
+import { mockDefaultPermissions, mockMemberRoles, mockInstanceMemberRoles } from '../mock_data';
 
 Vue.use(VueApollo);
 
@@ -26,11 +27,14 @@ describe('CreateMemberRole', () => {
   const mutationSuccessHandler = jest
     .fn()
     .mockResolvedValue({ data: { memberRoleCreate: { errors: null, memberRole: { id: '1' } } } });
-  const rolesSuccessQueryHandler = jest.fn().mockResolvedValue(mockMemberRoles);
+
+  const groupRolesQueryHandler = jest.fn().mockResolvedValue(mockMemberRoles);
+  const instanceRolesQueryHandler = jest.fn().mockResolvedValue(mockInstanceMemberRoles);
 
   const createMockApolloProvider = (resolverMock) => {
     return createMockApollo([
-      [memberRolesQuery, rolesSuccessQueryHandler],
+      [groupMemberRolesQuery, groupRolesQueryHandler],
+      [instanceMemberRolesQuery, instanceRolesQueryHandler],
       [createMemberRoleMutation, resolverMock],
     ]);
   };
@@ -39,11 +43,13 @@ describe('CreateMemberRole', () => {
     availablePermissions = mockDefaultPermissions,
     stubs = {},
     mutationMock = mutationSuccessHandler,
+    props = {},
   } = {}) => {
     wrapper = mountExtended(CreateMemberRole, {
       propsData: {
         groupFullPath: 'test-group',
         availablePermissions,
+        ...props,
       },
       stubs,
       apolloProvider: createMockApolloProvider(mutationMock),
@@ -144,7 +150,7 @@ describe('CreateMemberRole', () => {
     });
   });
 
-  describe('when successful submission', () => {
+  describe('when a group-level member-role is created successfully', () => {
     beforeEach(() => {
       createComponent();
       fillForm();
@@ -173,6 +179,51 @@ describe('CreateMemberRole', () => {
 
       expect(wrapper.emitted('success')).toHaveLength(1);
     });
+
+    it('refetches roles', async () => {
+      findButtonSubmit().trigger('submit');
+      await waitForPromises();
+
+      expect(groupRolesQueryHandler).toHaveBeenCalled();
+    });
+  });
+
+  describe('when an instance-level member-role is created successfully', () => {
+    beforeEach(() => {
+      createComponent({ props: { groupFullPath: null } });
+      fillForm();
+    });
+
+    it('sends the correct data', async () => {
+      findButtonSubmit().trigger('submit');
+      await waitForPromises();
+
+      expect(mutationSuccessHandler).toHaveBeenCalledWith({
+        input: {
+          baseAccessLevel: 'GUEST',
+          name: 'My role name',
+          description: 'My description',
+          permissions: ['READ_CODE'],
+          groupPath: null,
+        },
+      });
+    });
+
+    it('emits success event', async () => {
+      expect(wrapper.emitted('success')).toBeUndefined();
+
+      findButtonSubmit().trigger('submit');
+      await waitForPromises();
+
+      expect(wrapper.emitted('success')).toHaveLength(1);
+    });
+
+    it('refetches roles', async () => {
+      findButtonSubmit().trigger('submit');
+      await waitForPromises();
+
+      expect(instanceRolesQueryHandler).toHaveBeenCalled();
+    });
   });
 
   describe('when there is an error creating the role', () => {
diff --git a/ee/spec/frontend/roles_and_permissions/components/list_member_roles_spec.js b/ee/spec/frontend/roles_and_permissions/components/list_member_roles_spec.js
index 7d4a0417ace7d90f7b848f839045894aa64dc7c9..a8153030addbfdc8d8de1efd2bff1c93c4324f64 100644
--- a/ee/spec/frontend/roles_and_permissions/components/list_member_roles_spec.js
+++ b/ee/spec/frontend/roles_and_permissions/components/list_member_roles_spec.js
@@ -3,14 +3,20 @@ import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
 import { createAlert } from '~/alert';
 import createMockApollo from 'helpers/mock_apollo_helper';
-import memberRolesQuery from 'ee/invite_members/graphql/queries/group_member_roles.query.graphql';
+import groupMemberRolesQuery from 'ee/invite_members/graphql/queries/group_member_roles.query.graphql';
+import instanceMemberRolesQuery from 'ee/roles_and_permissions/graphql/instance_member_roles.query.graphql';
 import memberRolePermissionsQuery from 'ee/roles_and_permissions/graphql/member_role_permissions.query.graphql';
 import deleteMemberRoleMutation from 'ee/roles_and_permissions/graphql/delete_member_role.mutation.graphql';
 import CreateMemberRole from 'ee/roles_and_permissions/components/create_member_role.vue';
 import ListMemberRoles from 'ee/roles_and_permissions/components/list_member_roles.vue';
 import { mountExtended, shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
-import { mockDefaultPermissions, mockPermissions, mockMemberRoles } from '../mock_data';
+import {
+  mockDefaultPermissions,
+  mockPermissions,
+  mockMemberRoles,
+  mockInstanceMemberRoles,
+} from '../mock_data';
 
 Vue.use(VueApollo);
 
@@ -26,7 +32,8 @@ describe('ListMemberRoles', () => {
   let wrapper;
 
   const mockToastShow = jest.fn();
-  const rolesSuccessQueryHandler = jest.fn().mockResolvedValue(mockMemberRoles);
+  const groupRolesSuccessQueryHandler = jest.fn().mockResolvedValue(mockMemberRoles);
+  const instanceRolesSuccessQueryHandler = jest.fn().mockResolvedValue(mockInstanceMemberRoles);
   const permissionsSuccessQueryHandler = jest.fn().mockResolvedValue(mockPermissions);
   const deleteMutationSuccessHandler = jest
     .fn()
@@ -36,19 +43,22 @@ describe('ListMemberRoles', () => {
 
   const createComponent = ({
     mountFn = shallowMountExtended,
-    rolesQueryHandler = rolesSuccessQueryHandler,
+    groupRolesQueryHandler = groupRolesSuccessQueryHandler,
+    instanceRolesQueryHandler = instanceRolesSuccessQueryHandler,
     permissionsQueryHandler = permissionsSuccessQueryHandler,
     deleteMutationHandler = deleteMutationSuccessHandler,
+    props = {},
   } = {}) => {
     wrapper = mountFn(ListMemberRoles, {
       apolloProvider: createMockApollo([
-        [memberRolesQuery, rolesQueryHandler],
+        [groupMemberRolesQuery, groupRolesQueryHandler],
+        [instanceMemberRolesQuery, instanceRolesQueryHandler],
         [memberRolePermissionsQuery, permissionsQueryHandler],
         [deleteMemberRoleMutation, deleteMutationHandler],
       ]),
       propsData: {
-        emptyText: 'mock text',
         groupFullPath: 'test-group',
+        ...props,
       },
       stubs: { GlCard, GlTable },
       mocks: {
@@ -86,11 +96,6 @@ describe('ListMemberRoles', () => {
 
       expect(findAddRoleButton().props('disabled')).toBe(false);
 
-      expect(findEmptyState().props()).toMatchObject({
-        description: 'mock text',
-        title: 'No custom roles for this group',
-      });
-
       expect(findCreateMemberRole().exists()).toBe(false);
     });
 
@@ -102,7 +107,7 @@ describe('ListMemberRoles', () => {
     });
   });
 
-  describe('member roles', () => {
+  describe('group-level member roles', () => {
     beforeEach(() => {
       createComponent();
     });
@@ -110,34 +115,43 @@ describe('ListMemberRoles', () => {
     it('fetches member roles', async () => {
       await waitForPromises();
 
-      expect(rolesSuccessQueryHandler).toHaveBeenCalledWith({
+      expect(groupRolesSuccessQueryHandler).toHaveBeenCalledWith({
         fullPath: 'test-group',
       });
     });
 
-    describe('when groupFullPath is updated', () => {
+    describe('when there is an error fetching roles', () => {
       beforeEach(() => {
-        wrapper.setProps({ groupFullPath: 'another-test-group' });
-      });
-
-      it('sets the `busy` attribute on the table to true', () => {
-        expect(findTable().attributes('busy')).toBe('true');
+        createComponent({ groupRolesQueryHandler: failedQueryHandler });
       });
 
-      it('refetches member roles', async () => {
+      it('shows alert when there is an error', async () => {
         await waitForPromises();
 
-        expect(rolesSuccessQueryHandler).toHaveBeenCalledWith({
-          fullPath: 'another-test-group',
+        expect(createAlert).toHaveBeenCalledWith({
+          message: 'Failed to fetch roles: GraphQL error',
         });
-
-        expect(findTable().attributes('busy')).toBeUndefined();
       });
     });
+  });
+
+  describe('instance-level member roles', () => {
+    beforeEach(() => {
+      createComponent({ props: { groupFullPath: null } });
+    });
+
+    it('fetches member roles', async () => {
+      await waitForPromises();
+
+      expect(instanceRolesSuccessQueryHandler).toHaveBeenCalled();
+    });
 
     describe('when there is an error fetching roles', () => {
       beforeEach(() => {
-        createComponent({ rolesQueryHandler: failedQueryHandler });
+        createComponent({
+          props: { groupFullPath: null },
+          instanceRolesQueryHandler: failedQueryHandler,
+        });
       });
 
       it('shows alert when there is an error', async () => {
@@ -246,7 +260,40 @@ describe('ListMemberRoles', () => {
       });
 
       it('refetches roles', () => {
-        expect(rolesSuccessQueryHandler).toHaveBeenCalled();
+        expect(groupRolesSuccessQueryHandler).toHaveBeenCalledTimes(2);
+      });
+    });
+
+    describe('deleting instance-level member role', () => {
+      beforeEach(() => {
+        createComponent({ mountFn: mountExtended, props: { groupFullPath: null } });
+        return waitForPromises();
+      });
+
+      describe('when the role is deleted successfully', () => {
+        beforeEach(async () => {
+          findButtonByText('Delete role').trigger('click');
+          await nextTick();
+
+          findModal().vm.$emit('primary');
+          await waitForPromises();
+        });
+
+        it('delete the role', () => {
+          expect(deleteMutationSuccessHandler).toHaveBeenCalledWith({
+            input: {
+              id: 'gid://gitlab/MemberRole/2',
+            },
+          });
+        });
+
+        it('shows toast', () => {
+          expect(mockToastShow).toHaveBeenCalledWith('Role successfully deleted.');
+        });
+
+        it('refetches roles', () => {
+          expect(instanceRolesSuccessQueryHandler).toHaveBeenCalledTimes(2);
+        });
       });
     });
 
diff --git a/ee/spec/frontend/roles_and_permissions/components/roles_and_permissions_spec.js b/ee/spec/frontend/roles_and_permissions/components/roles_and_permissions_spec.js
deleted file mode 100644
index 23fceeeafe56562bc625afc6259cc43efdba1dbf..0000000000000000000000000000000000000000
--- a/ee/spec/frontend/roles_and_permissions/components/roles_and_permissions_spec.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import { nextTick } from 'vue';
-import GroupSelect from '~/vue_shared/components/entity_select/group_select.vue';
-import ListMemberRoles from 'ee/roles_and_permissions/components/list_member_roles.vue';
-import RolesAndPermissions from 'ee/roles_and_permissions/components/roles_and_permissions.vue';
-
-describe('RolesAndPermissionsSaas', () => {
-  let wrapper;
-  const createComponent = ({ showGroupSelector = true } = {}) => {
-    wrapper = shallowMount(RolesAndPermissions, {
-      propsData: { groupFullPath: 'test-group', emptyText: 'empty', showGroupSelector },
-    });
-  };
-
-  const findGroupSelect = () => wrapper.findComponent(GroupSelect);
-  const findListMemberRoles = () => wrapper.findComponent(ListMemberRoles);
-
-  it.each([true, false])(
-    'shows/hides the group selector when showGroupSelector is %s',
-    (showGroupSelector) => {
-      createComponent({ showGroupSelector });
-
-      expect(findGroupSelect().exists()).toBe(showGroupSelector);
-    },
-  );
-
-  it('updates the group ID when group selector is changed', async () => {
-    createComponent();
-
-    expect(findListMemberRoles().props('groupFullPath')).toBe('test-group');
-
-    findGroupSelect().vm.$emit('input', { full_path: 'another-test-group' });
-    await nextTick();
-
-    expect(findListMemberRoles().props('groupFullPath')).toBe('another-test-group');
-  });
-
-  it('shows the ListMemberRoles component with the expected props', () => {
-    createComponent();
-
-    expect(findListMemberRoles().props()).toMatchObject({
-      groupFullPath: 'test-group',
-      emptyText: 'empty',
-    });
-  });
-});
diff --git a/ee/spec/frontend/roles_and_permissions/mock_data.js b/ee/spec/frontend/roles_and_permissions/mock_data.js
index 6496847e18f6d3da7758e0872ceb6ca2149cb421..8dd553a0dddff3fe9ca619d33471a1194837381c 100644
--- a/ee/spec/frontend/roles_and_permissions/mock_data.js
+++ b/ee/spec/frontend/roles_and_permissions/mock_data.js
@@ -47,3 +47,31 @@ export const mockMemberRoles = {
     },
   },
 };
+
+export const mockInstanceMemberRoles = {
+  data: {
+    memberRoles: {
+      nodes: [
+        {
+          baseAccessLevel: {
+            integerValue: 10,
+            stringValue: 'GUEST',
+            __typename: 'AccessLevel',
+          },
+          id: 'gid://gitlab/MemberRole/2',
+          name: 'Instance Test',
+          enabledPermissions: {
+            nodes: [
+              {
+                name: 'Admin group',
+                value: 'ADMIN_GROUP',
+              },
+            ],
+          },
+          __typename: 'MemberRole',
+        },
+      ],
+      __typename: 'MemberRoleConnection',
+    },
+  },
+};
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index e262305d5be860901cab33bbbc6822d1617515e2..b28e994cc703502d8d3a816066ce91ba8c7a680b 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -30035,13 +30035,10 @@ msgstr ""
 msgid "MemberRole|Incident manager"
 msgstr ""
 
-msgid "MemberRole|Make sure the group is in the Ultimate tier."
-msgstr ""
-
 msgid "MemberRole|Name"
 msgstr ""
 
-msgid "MemberRole|No custom roles for this group"
+msgid "MemberRole|No custom roles found"
 msgstr ""
 
 msgid "MemberRole|Permissions"
@@ -30065,9 +30062,6 @@ msgstr ""
 msgid "MemberRole|To add a new role select 'Add new role'."
 msgstr ""
 
-msgid "MemberRole|To add a new role select a group and then 'Add new role'."
-msgstr ""
-
 msgid "MemberRole|To delete the custom role make sure no group member has this custom role"
 msgstr ""