diff --git a/x-pack/packages/security/plugin_types_public/src/privileges/privileges_api_client.ts b/x-pack/packages/security/plugin_types_public/src/privileges/privileges_api_client.ts
index e3a97398db7a3..25d768cb7b1ac 100644
--- a/x-pack/packages/security/plugin_types_public/src/privileges/privileges_api_client.ts
+++ b/x-pack/packages/security/plugin_types_public/src/privileges/privileges_api_client.ts
@@ -15,7 +15,7 @@ export interface PrivilegesAPIClientGetAllArgs {
    */
   respectLicenseLevel: boolean;
 }
-// TODO: Eyo include the proper return types for contract
+
 export abstract class PrivilegesAPIClientPublicContract {
   abstract getAll(args: PrivilegesAPIClientGetAllArgs): Promise<RawKibanaPrivileges>;
 }
diff --git a/x-pack/packages/security/plugin_types_public/src/roles/roles_api_client.ts b/x-pack/packages/security/plugin_types_public/src/roles/roles_api_client.ts
index b5c45c5160fde..a936741ad806e 100644
--- a/x-pack/packages/security/plugin_types_public/src/roles/roles_api_client.ts
+++ b/x-pack/packages/security/plugin_types_public/src/roles/roles_api_client.ts
@@ -16,4 +16,5 @@ export interface RolesAPIClient {
   getRole: (roleName: string) => Promise<Role>;
   deleteRole: (roleName: string) => Promise<void>;
   saveRole: (payload: RolePutPayload) => Promise<void>;
+  bulkUpdateRoles: (payload: { rolesUpdate: Role[] }) => Promise<void>;
 }
diff --git a/x-pack/packages/security/plugin_types_public/tsconfig.json b/x-pack/packages/security/plugin_types_public/tsconfig.json
index 5c97e25656ecf..305d4411b42e5 100644
--- a/x-pack/packages/security/plugin_types_public/tsconfig.json
+++ b/x-pack/packages/security/plugin_types_public/tsconfig.json
@@ -14,6 +14,6 @@
     "@kbn/core-user-profile-common",
     "@kbn/security-plugin-types-common",
     "@kbn/core-security-common",
-    "@kbn/security-authorization-core"
+    "@kbn/security-authorization-core",
   ]
 }
diff --git a/x-pack/packages/security/ui_components/src/kibana_privilege_table/feature_table.test.tsx b/x-pack/packages/security/ui_components/src/kibana_privilege_table/feature_table.test.tsx
index 83a0da2e26815..2380088dd713f 100644
--- a/x-pack/packages/security/ui_components/src/kibana_privilege_table/feature_table.test.tsx
+++ b/x-pack/packages/security/ui_components/src/kibana_privilege_table/feature_table.test.tsx
@@ -15,10 +15,10 @@ import {
   kibanaFeatures,
 } from '@kbn/security-role-management-model/src/__fixtures__';
 import { findTestSubject, mountWithIntl } from '@kbn/test-jest-helpers';
+import type { Role } from '@kbn/security-plugin-types-common';
 
 import { getDisplayedFeaturePrivileges } from './__fixtures__';
 import { FeatureTable } from './feature_table';
-import type { Role } from '@kbn/security-plugin-types-common';
 import { PrivilegeFormCalculator } from '../privilege_form_calculator';
 
 const createRole = (kibana: Role['kibana'] = []): Role => {
diff --git a/x-pack/packages/security/ui_components/src/kibana_privilege_table/feature_table_expanded_row.test.tsx b/x-pack/packages/security/ui_components/src/kibana_privilege_table/feature_table_expanded_row.test.tsx
index 3b787f01cdf92..5e4f4ce021d44 100644
--- a/x-pack/packages/security/ui_components/src/kibana_privilege_table/feature_table_expanded_row.test.tsx
+++ b/x-pack/packages/security/ui_components/src/kibana_privilege_table/feature_table_expanded_row.test.tsx
@@ -12,10 +12,10 @@ import {
   createKibanaPrivileges,
   kibanaFeatures,
 } from '@kbn/security-role-management-model/src/__fixtures__';
+import type { Role } from '@kbn/security-plugin-types-common';
 import { findTestSubject, mountWithIntl } from '@kbn/test-jest-helpers';
 
 import { FeatureTableExpandedRow } from './feature_table_expanded_row';
-import type { Role } from '@kbn/security-plugin-types-common';
 import { PrivilegeFormCalculator } from '../privilege_form_calculator';
 
 const createRole = (kibana: Role['kibana'] = []): Role => {
diff --git a/x-pack/packages/security/ui_components/src/kibana_privilege_table/sub_feature_form.tsx b/x-pack/packages/security/ui_components/src/kibana_privilege_table/sub_feature_form.tsx
index 9155d8ae52835..2797e4d64a35e 100644
--- a/x-pack/packages/security/ui_components/src/kibana_privilege_table/sub_feature_form.tsx
+++ b/x-pack/packages/security/ui_components/src/kibana_privilege_table/sub_feature_form.tsx
@@ -21,7 +21,6 @@ import type {
   SubFeaturePrivilege,
   SubFeaturePrivilegeGroup,
 } from '@kbn/security-role-management-model';
-
 import { NO_PRIVILEGE_VALUE } from '../constants';
 import type { PrivilegeFormCalculator } from '../privilege_form_calculator';
 
diff --git a/x-pack/packages/security/ui_components/src/privilege_form_calculator/privilege_form_calculator.test.ts b/x-pack/packages/security/ui_components/src/privilege_form_calculator/privilege_form_calculator.test.ts
index 0281605f00f34..e61134b816ffa 100644
--- a/x-pack/packages/security/ui_components/src/privilege_form_calculator/privilege_form_calculator.test.ts
+++ b/x-pack/packages/security/ui_components/src/privilege_form_calculator/privilege_form_calculator.test.ts
@@ -9,9 +9,9 @@ import {
   createKibanaPrivileges,
   kibanaFeatures,
 } from '@kbn/security-role-management-model/src/__fixtures__';
+import type { Role } from '@kbn/security-plugin-types-common';
 
 import { PrivilegeFormCalculator } from './privilege_form_calculator';
-import type { Role } from '@kbn/security-plugin-types-common';
 
 const createRole = (kibana: Role['kibana'] = []): Role => {
   return {
diff --git a/x-pack/plugins/security/public/authentication/index.mock.ts b/x-pack/plugins/security/public/authentication/index.mock.ts
index 166583b1274cb..f30d47af3f701 100644
--- a/x-pack/plugins/security/public/authentication/index.mock.ts
+++ b/x-pack/plugins/security/public/authentication/index.mock.ts
@@ -31,6 +31,7 @@ export const authorizationMock = {
       getRole: jest.fn(),
       deleteRole: jest.fn(),
       saveRole: jest.fn(),
+      bulkUpdateRoles: jest.fn(),
     },
     privileges: {
       getAll: jest.fn(),
@@ -43,6 +44,7 @@ export const authorizationMock = {
       getRole: jest.fn(),
       deleteRole: jest.fn(),
       saveRole: jest.fn(),
+      bulkUpdateRoles: jest.fn(),
     },
     privileges: {
       getAll: jest.fn(),
diff --git a/x-pack/plugins/security/public/authorization/authorization_service.ts b/x-pack/plugins/security/public/authorization/authorization_service.ts
index c650d381be1af..4fbae4fb54e6a 100644
--- a/x-pack/plugins/security/public/authorization/authorization_service.ts
+++ b/x-pack/plugins/security/public/authorization/authorization_service.ts
@@ -29,6 +29,7 @@ export class AuthorizationService {
         getRole: rolesAPIClient.getRole,
         deleteRole: rolesAPIClient.deleteRole,
         saveRole: rolesAPIClient.saveRole,
+        bulkUpdateRoles: rolesAPIClient.bulkUpdateRoles,
       },
       privileges: {
         getAll: privilegesAPIClient.getAll.bind(privilegesAPIClient),
diff --git a/x-pack/plugins/security/public/management/roles/edit_role/edit_role_page.tsx b/x-pack/plugins/security/public/management/roles/edit_role/edit_role_page.tsx
index e867bf0c418cc..074fe5639cd29 100644
--- a/x-pack/plugins/security/public/management/roles/edit_role/edit_role_page.tsx
+++ b/x-pack/plugins/security/public/management/roles/edit_role/edit_role_page.tsx
@@ -14,6 +14,7 @@ import {
   EuiFlexItem,
   EuiForm,
   EuiFormRow,
+  EuiIconTip,
   EuiPanel,
   EuiSpacer,
   EuiText,
@@ -555,30 +556,27 @@ export const EditRolePage: FunctionComponent<Props> = ({
 
   const getElasticsearchPrivileges = () => {
     return (
-      <div>
-        <EuiSpacer />
-        <ElasticsearchPrivileges
-          role={role}
-          editable={!isRoleReadOnly}
-          indicesAPIClient={indicesAPIClient}
-          onChange={onRoleChange}
-          runAsUsers={runAsUsers}
-          validator={validator}
-          indexPatterns={indexPatternsTitles}
-          remoteClusters={remoteClustersState.value}
-          builtinESPrivileges={builtInESPrivileges}
-          license={license}
-          docLinks={docLinks}
-          canUseRemoteIndices={
-            buildFlavor === 'traditional' && featureCheckState.value?.canUseRemoteIndices
-          }
-          canUseRemoteClusters={
-            buildFlavor === 'traditional' && featureCheckState.value?.canUseRemoteClusters
-          }
-          isDarkMode={isDarkMode}
-          buildFlavor={buildFlavor}
-        />
-      </div>
+      <ElasticsearchPrivileges
+        role={role}
+        editable={!isRoleReadOnly}
+        indicesAPIClient={indicesAPIClient}
+        onChange={onRoleChange}
+        runAsUsers={runAsUsers}
+        validator={validator}
+        indexPatterns={indexPatternsTitles}
+        remoteClusters={remoteClustersState.value}
+        builtinESPrivileges={builtInESPrivileges}
+        license={license}
+        docLinks={docLinks}
+        canUseRemoteIndices={
+          buildFlavor === 'traditional' && featureCheckState.value?.canUseRemoteIndices
+        }
+        canUseRemoteClusters={
+          buildFlavor === 'traditional' && featureCheckState.value?.canUseRemoteClusters
+        }
+        isDarkMode={isDarkMode}
+        buildFlavor={buildFlavor}
+      />
     );
   };
 
@@ -586,21 +584,18 @@ export const EditRolePage: FunctionComponent<Props> = ({
 
   const getKibanaPrivileges = () => {
     return (
-      <div>
-        <EuiSpacer />
-        <KibanaPrivilegesRegion
-          kibanaPrivileges={new KibanaPrivileges(kibanaPrivileges, features)}
-          spaces={spaces.list}
-          spacesEnabled={spaces.enabled}
-          uiCapabilities={uiCapabilities}
-          canCustomizeSubFeaturePrivileges={license.getFeatures().allowSubFeaturePrivileges}
-          editable={!isRoleReadOnly}
-          role={role}
-          onChange={onRoleChange}
-          validator={validator}
-          spacesApiUi={spacesApiUi}
-        />
-      </div>
+      <KibanaPrivilegesRegion
+        kibanaPrivileges={new KibanaPrivileges(kibanaPrivileges, features)}
+        spaces={spaces.list}
+        spacesEnabled={spaces.enabled}
+        uiCapabilities={uiCapabilities}
+        canCustomizeSubFeaturePrivileges={license.getFeatures().allowSubFeaturePrivileges}
+        editable={!isRoleReadOnly}
+        role={role}
+        onChange={onRoleChange}
+        validator={validator}
+        spacesApiUi={spacesApiUi}
+      />
     );
   };
 
@@ -799,44 +794,89 @@ export const EditRolePage: FunctionComponent<Props> = ({
 
   return (
     <div className="editRolePage">
-      <EuiForm {...formError}>
-        {getFormTitle()}
-        <EuiSpacer />
-        <EuiText size="s">
-          <FormattedMessage
-            id="xpack.security.management.editRole.setPrivilegesToKibanaSpacesDescription"
-            defaultMessage="Set privileges on your Elasticsearch data and control access to your Project spaces."
-          />
-        </EuiText>
-        {isRoleReserved && (
-          <Fragment>
-            <EuiSpacer size="s" />
-            <EuiText size="s" color="subdued">
-              <p id="reservedRoleDescription" tabIndex={0}>
+      <EuiForm {...formError} fullWidth>
+        <EuiFlexGroup direction="column">
+          <EuiFlexItem>
+            {getFormTitle()}
+            <EuiSpacer />
+            <EuiText size="s">
+              <FormattedMessage
+                id="xpack.security.management.editRole.setPrivilegesToKibanaSpacesDescription"
+                defaultMessage="Set privileges on your Elasticsearch data and control access to your Project spaces."
+              />
+            </EuiText>
+          </EuiFlexItem>
+          <EuiFlexItem>
+            {isRoleReserved && (
+              <Fragment>
+                <EuiText size="s" color="subdued">
+                  <p id="reservedRoleDescription" tabIndex={0}>
+                    <FormattedMessage
+                      id="xpack.security.management.editRole.modifyingReversedRolesDescription"
+                      defaultMessage="Reserved roles are built-in and cannot be removed or modified."
+                    />
+                  </p>
+                </EuiText>
+              </Fragment>
+            )}
+          </EuiFlexItem>
+          <EuiFlexItem>
+            {isDeprecatedRole && (
+              <Fragment>
+                <EuiSpacer size="s" />
+                <EuiCallOut
+                  title={getExtendedRoleDeprecationNotice(role)}
+                  color="warning"
+                  iconType="warning"
+                />
+              </Fragment>
+            )}
+          </EuiFlexItem>
+          <EuiFlexItem>{getRoleNameAndDescription()}</EuiFlexItem>
+          <EuiFlexItem>
+            <EuiFormRow
+              label={
                 <FormattedMessage
-                  id="xpack.security.management.editRole.modifyingReversedRolesDescription"
-                  defaultMessage="Reserved roles are built-in and cannot be removed or modified."
+                  id="xpack.security.management.editRole.dataLayerLabel"
+                  defaultMessage="Data Layer"
                 />
-              </p>
-            </EuiText>
-          </Fragment>
-        )}
-        {isDeprecatedRole && (
-          <Fragment>
-            <EuiSpacer size="s" />
-            <EuiCallOut
-              title={getExtendedRoleDeprecationNotice(role)}
-              color="warning"
-              iconType="warning"
-            />
-          </Fragment>
-        )}
-        <EuiSpacer />
-        {getRoleNameAndDescription()}
-        {getElasticsearchPrivileges()}
-        {getKibanaPrivileges()}
-        <EuiSpacer />
-        {getFormButtons()}
+              }
+            >
+              {getElasticsearchPrivileges()}
+            </EuiFormRow>
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <EuiFormRow
+              label={
+                <EuiFlexGroup gutterSize="s" alignItems="center" responsive={false}>
+                  <EuiFlexItem grow={false}>
+                    <FormattedMessage
+                      id="xpack.security.management.editRole.appLayerLabel"
+                      defaultMessage="Application layer"
+                    />
+                  </EuiFlexItem>
+                  <EuiFlexItem grow={false}>
+                    <EuiIconTip
+                      type="iInCircle"
+                      color="subdued"
+                      content={
+                        <FormattedMessage
+                          id="xpack.security.management.editRole.appLayerTooltipText"
+                          defaultMessage="Feature access is granted on a per space basis for all features. Feature visibility is set on the space. Both must be enabled for this role to use a feature"
+                        />
+                      }
+                    />
+                  </EuiFlexItem>
+                </EuiFlexGroup>
+              }
+            >
+              {getKibanaPrivileges()}
+            </EuiFormRow>
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <EuiFormRow fullWidth={false}>{getFormButtons()}</EuiFormRow>
+          </EuiFlexItem>
+        </EuiFlexGroup>
       </EuiForm>
     </div>
   );
diff --git a/x-pack/plugins/security/public/management/roles/edit_role/privileges/kibana/space_aware_privilege_section/privilege_space_form.tsx b/x-pack/plugins/security/public/management/roles/edit_role/privileges/kibana/space_aware_privilege_section/privilege_space_form.tsx
index a37fd799a035e..8275a7b1203ab 100644
--- a/x-pack/plugins/security/public/management/roles/edit_role/privileges/kibana/space_aware_privilege_section/privilege_space_form.tsx
+++ b/x-pack/plugins/security/public/management/roles/edit_role/privileges/kibana/space_aware_privilege_section/privilege_space_form.tsx
@@ -107,10 +107,18 @@ export class PrivilegeSpaceForm extends Component<Props, State> {
             <h2>
               <FormattedMessage
                 id="xpack.security.management.editRole.spacePrivilegeForm.modalTitle"
-                defaultMessage="Kibana privileges"
+                defaultMessage="Assign role to space"
               />
             </h2>
           </EuiTitle>
+          <EuiText size="s">
+            <p>
+              <FormattedMessage
+                id="xpack.security.management.editRole.spacePrivilegeForm.modalHeadline"
+                defaultMessage="This role will be granted access to the following spaces"
+              />
+            </p>
+          </EuiText>
         </EuiFlyoutHeader>
         <EuiFlyoutBody>
           <EuiErrorBoundary>{this.getForm()}</EuiErrorBoundary>
diff --git a/x-pack/plugins/security/public/management/roles/edit_role/privileges/kibana/space_aware_privilege_section/space_aware_privilege_section.tsx b/x-pack/plugins/security/public/management/roles/edit_role/privileges/kibana/space_aware_privilege_section/space_aware_privilege_section.tsx
index e5a4cb1494d77..2bb3292932870 100644
--- a/x-pack/plugins/security/public/management/roles/edit_role/privileges/kibana/space_aware_privilege_section/space_aware_privilege_section.tsx
+++ b/x-pack/plugins/security/public/management/roles/edit_role/privileges/kibana/space_aware_privilege_section/space_aware_privilege_section.tsx
@@ -206,7 +206,7 @@ export class SpaceAwarePrivilegeSection extends Component<Props, State> {
         >
           <FormattedMessage
             id="xpack.security.management.editRole.spacePrivilegeSection.addSpacePrivilegeButton"
-            defaultMessage="Add Kibana privilege"
+            defaultMessage="Assign to space"
           />
         </EuiButton>
       );
diff --git a/x-pack/plugins/security/public/management/roles/roles_api_client.mock.ts b/x-pack/plugins/security/public/management/roles/roles_api_client.mock.ts
index 0e756e87c081c..5f868fda093a4 100644
--- a/x-pack/plugins/security/public/management/roles/roles_api_client.mock.ts
+++ b/x-pack/plugins/security/public/management/roles/roles_api_client.mock.ts
@@ -11,5 +11,6 @@ export const rolesAPIClientMock = {
     getRole: jest.fn(),
     deleteRole: jest.fn(),
     saveRole: jest.fn(),
+    bulkUpdateRoles: jest.fn(),
   }),
 };
diff --git a/x-pack/plugins/security/public/management/roles/roles_api_client.ts b/x-pack/plugins/security/public/management/roles/roles_api_client.ts
index c870f99e24dd3..5bf58244a969a 100644
--- a/x-pack/plugins/security/public/management/roles/roles_api_client.ts
+++ b/x-pack/plugins/security/public/management/roles/roles_api_client.ts
@@ -32,6 +32,17 @@ export class RolesAPIClient {
     });
   };
 
+  public bulkUpdateRoles = async ({ rolesUpdate }: { rolesUpdate: Role[] }) => {
+    await this.http.post('/api/security/roles', {
+      body: JSON.stringify({
+        roles: rolesUpdate.reduce((transformed, value) => {
+          transformed[value.name] = this.transformRoleForSave(copyRole(value));
+          return transformed;
+        }, {} as Record<string, ReturnType<typeof this.transformRoleForSave>>),
+      }),
+    });
+  };
+
   private transformRoleForSave = (role: Role) => {
     // Remove any placeholder index privileges
     const isPlaceholderPrivilege = (
diff --git a/x-pack/plugins/security/public/plugin.test.tsx b/x-pack/plugins/security/public/plugin.test.tsx
index 336a42a1fd324..e58539bf2bc8f 100644
--- a/x-pack/plugins/security/public/plugin.test.tsx
+++ b/x-pack/plugins/security/public/plugin.test.tsx
@@ -137,6 +137,7 @@ describe('Security Plugin', () => {
               "getAll": [Function],
             },
             "roles": Object {
+              "bulkUpdateRoles": [Function],
               "deleteRole": [Function],
               "getRole": [Function],
               "getRoles": [Function],
diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_response_actions/get_supported_response_actions.ts b/x-pack/plugins/security_solution/public/detection_engine/rule_response_actions/get_supported_response_actions.ts
index 95fc300a3fe57..fdce9f4d1e682 100644
--- a/x-pack/plugins/security_solution/public/detection_engine/rule_response_actions/get_supported_response_actions.ts
+++ b/x-pack/plugins/security_solution/public/detection_engine/rule_response_actions/get_supported_response_actions.ts
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import type { EnabledFeatures } from '@kbn/spaces-plugin/public/management/edit_space/enabled_features';
+import type { EnabledFeatures } from '@kbn/spaces-plugin/public/management/components/enabled_features';
 import {
   ResponseActionTypes,
   ResponseActionTypesEnum,
diff --git a/x-pack/plugins/spaces/public/management/edit_space/confirm_alter_active_space_modal/__snapshots__/confirm_alter_active_space_modal.test.tsx.snap b/x-pack/plugins/spaces/public/management/components/confirm_alter_active_space_modal/__snapshots__/confirm_alter_active_space_modal.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/spaces/public/management/edit_space/confirm_alter_active_space_modal/__snapshots__/confirm_alter_active_space_modal.test.tsx.snap
rename to x-pack/plugins/spaces/public/management/components/confirm_alter_active_space_modal/__snapshots__/confirm_alter_active_space_modal.test.tsx.snap
diff --git a/x-pack/plugins/spaces/public/management/edit_space/confirm_alter_active_space_modal/confirm_alter_active_space_modal.test.tsx b/x-pack/plugins/spaces/public/management/components/confirm_alter_active_space_modal/confirm_alter_active_space_modal.test.tsx
similarity index 100%
rename from x-pack/plugins/spaces/public/management/edit_space/confirm_alter_active_space_modal/confirm_alter_active_space_modal.test.tsx
rename to x-pack/plugins/spaces/public/management/components/confirm_alter_active_space_modal/confirm_alter_active_space_modal.test.tsx
diff --git a/x-pack/plugins/spaces/public/management/edit_space/confirm_alter_active_space_modal/confirm_alter_active_space_modal.tsx b/x-pack/plugins/spaces/public/management/components/confirm_alter_active_space_modal/confirm_alter_active_space_modal.tsx
similarity index 100%
rename from x-pack/plugins/spaces/public/management/edit_space/confirm_alter_active_space_modal/confirm_alter_active_space_modal.tsx
rename to x-pack/plugins/spaces/public/management/components/confirm_alter_active_space_modal/confirm_alter_active_space_modal.tsx
diff --git a/x-pack/plugins/spaces/public/management/edit_space/confirm_alter_active_space_modal/index.ts b/x-pack/plugins/spaces/public/management/components/confirm_alter_active_space_modal/index.ts
similarity index 100%
rename from x-pack/plugins/spaces/public/management/edit_space/confirm_alter_active_space_modal/index.ts
rename to x-pack/plugins/spaces/public/management/components/confirm_alter_active_space_modal/index.ts
diff --git a/x-pack/plugins/spaces/public/management/edit_space/customize_space/__snapshots__/customize_space.test.tsx.snap b/x-pack/plugins/spaces/public/management/components/customize_space/__snapshots__/customize_space.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/spaces/public/management/edit_space/customize_space/__snapshots__/customize_space.test.tsx.snap
rename to x-pack/plugins/spaces/public/management/components/customize_space/__snapshots__/customize_space.test.tsx.snap
diff --git a/x-pack/plugins/spaces/public/management/edit_space/customize_space/__snapshots__/customize_space_avatar.test.tsx.snap b/x-pack/plugins/spaces/public/management/components/customize_space/__snapshots__/customize_space_avatar.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/spaces/public/management/edit_space/customize_space/__snapshots__/customize_space_avatar.test.tsx.snap
rename to x-pack/plugins/spaces/public/management/components/customize_space/__snapshots__/customize_space_avatar.test.tsx.snap
diff --git a/x-pack/plugins/spaces/public/management/edit_space/customize_space/customize_space.test.tsx b/x-pack/plugins/spaces/public/management/components/customize_space/customize_space.test.tsx
similarity index 100%
rename from x-pack/plugins/spaces/public/management/edit_space/customize_space/customize_space.test.tsx
rename to x-pack/plugins/spaces/public/management/components/customize_space/customize_space.test.tsx
diff --git a/x-pack/plugins/spaces/public/management/edit_space/customize_space/customize_space.tsx b/x-pack/plugins/spaces/public/management/components/customize_space/customize_space.tsx
similarity index 99%
rename from x-pack/plugins/spaces/public/management/edit_space/customize_space/customize_space.tsx
rename to x-pack/plugins/spaces/public/management/components/customize_space/customize_space.tsx
index 33113f3338960..1d0e04694604b 100644
--- a/x-pack/plugins/spaces/public/management/edit_space/customize_space/customize_space.tsx
+++ b/x-pack/plugins/spaces/public/management/components/customize_space/customize_space.tsx
@@ -22,9 +22,9 @@ import { FormattedMessage } from '@kbn/i18n-react';
 
 import { CustomizeSpaceAvatar } from './customize_space_avatar';
 import { getSpaceAvatarComponent, getSpaceColor, getSpaceInitials } from '../../../space_avatar';
+import type { FormValues } from '../../create_space';
 import type { SpaceValidator } from '../../lib';
 import { toSpaceIdentifier } from '../../lib';
-import type { FormValues } from '../manage_space_page';
 import { SectionPanel } from '../section_panel';
 
 // No need to wrap LazySpaceAvatar in an error boundary, because it is one of the first chunks loaded when opening Kibana.
diff --git a/x-pack/plugins/spaces/public/management/edit_space/customize_space/customize_space_avatar.test.tsx b/x-pack/plugins/spaces/public/management/components/customize_space/customize_space_avatar.test.tsx
similarity index 100%
rename from x-pack/plugins/spaces/public/management/edit_space/customize_space/customize_space_avatar.test.tsx
rename to x-pack/plugins/spaces/public/management/components/customize_space/customize_space_avatar.test.tsx
diff --git a/x-pack/plugins/spaces/public/management/edit_space/customize_space/customize_space_avatar.tsx b/x-pack/plugins/spaces/public/management/components/customize_space/customize_space_avatar.tsx
similarity index 99%
rename from x-pack/plugins/spaces/public/management/edit_space/customize_space/customize_space_avatar.tsx
rename to x-pack/plugins/spaces/public/management/components/customize_space/customize_space_avatar.tsx
index 827ef592459f7..185a90532c126 100644
--- a/x-pack/plugins/spaces/public/management/edit_space/customize_space/customize_space_avatar.tsx
+++ b/x-pack/plugins/spaces/public/management/components/customize_space/customize_space_avatar.tsx
@@ -19,8 +19,8 @@ import { i18n } from '@kbn/i18n';
 
 import { MAX_SPACE_INITIALS } from '../../../../common';
 import { encode, imageTypes } from '../../../../common/lib/dataurl';
+import type { FormValues } from '../../create_space';
 import type { SpaceValidator } from '../../lib';
-import type { FormValues } from '../manage_space_page';
 
 interface Props {
   space: FormValues;
diff --git a/x-pack/plugins/spaces/public/management/edit_space/customize_space/index.ts b/x-pack/plugins/spaces/public/management/components/customize_space/index.ts
similarity index 100%
rename from x-pack/plugins/spaces/public/management/edit_space/customize_space/index.ts
rename to x-pack/plugins/spaces/public/management/components/customize_space/index.ts
diff --git a/x-pack/plugins/spaces/public/management/edit_space/delete_spaces_button.test.tsx b/x-pack/plugins/spaces/public/management/components/delete_spaces_button.test.tsx
similarity index 100%
rename from x-pack/plugins/spaces/public/management/edit_space/delete_spaces_button.test.tsx
rename to x-pack/plugins/spaces/public/management/components/delete_spaces_button.test.tsx
diff --git a/x-pack/plugins/spaces/public/management/edit_space/delete_spaces_button.tsx b/x-pack/plugins/spaces/public/management/components/delete_spaces_button.tsx
similarity index 97%
rename from x-pack/plugins/spaces/public/management/edit_space/delete_spaces_button.tsx
rename to x-pack/plugins/spaces/public/management/components/delete_spaces_button.tsx
index 1395867d724d0..99c65eb5aafa8 100644
--- a/x-pack/plugins/spaces/public/management/edit_space/delete_spaces_button.tsx
+++ b/x-pack/plugins/spaces/public/management/components/delete_spaces_button.tsx
@@ -13,9 +13,9 @@ import type { NotificationsStart } from '@kbn/core/public';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 
+import { ConfirmDeleteModal } from './confirm_delete_modal';
 import type { Space } from '../../../common';
 import type { SpacesManager } from '../../spaces_manager';
-import { ConfirmDeleteModal } from '../components/confirm_delete_modal';
 
 interface Props {
   style?: 'button' | 'icon';
diff --git a/x-pack/plugins/spaces/public/management/edit_space/enabled_features/__snapshots__/enabled_features.test.tsx.snap b/x-pack/plugins/spaces/public/management/components/enabled_features/__snapshots__/enabled_features.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/spaces/public/management/edit_space/enabled_features/__snapshots__/enabled_features.test.tsx.snap
rename to x-pack/plugins/spaces/public/management/components/enabled_features/__snapshots__/enabled_features.test.tsx.snap
diff --git a/x-pack/plugins/spaces/public/management/edit_space/enabled_features/enabled_features.test.tsx b/x-pack/plugins/spaces/public/management/components/enabled_features/enabled_features.test.tsx
similarity index 100%
rename from x-pack/plugins/spaces/public/management/edit_space/enabled_features/enabled_features.test.tsx
rename to x-pack/plugins/spaces/public/management/components/enabled_features/enabled_features.test.tsx
diff --git a/x-pack/plugins/spaces/public/management/edit_space/enabled_features/enabled_features.tsx b/x-pack/plugins/spaces/public/management/components/enabled_features/enabled_features.tsx
similarity index 100%
rename from x-pack/plugins/spaces/public/management/edit_space/enabled_features/enabled_features.tsx
rename to x-pack/plugins/spaces/public/management/components/enabled_features/enabled_features.tsx
diff --git a/x-pack/plugins/spaces/public/management/edit_space/enabled_features/feature_table.tsx b/x-pack/plugins/spaces/public/management/components/enabled_features/feature_table.tsx
similarity index 100%
rename from x-pack/plugins/spaces/public/management/edit_space/enabled_features/feature_table.tsx
rename to x-pack/plugins/spaces/public/management/components/enabled_features/feature_table.tsx
diff --git a/x-pack/plugins/spaces/public/management/edit_space/enabled_features/index.ts b/x-pack/plugins/spaces/public/management/components/enabled_features/index.ts
similarity index 100%
rename from x-pack/plugins/spaces/public/management/edit_space/enabled_features/index.ts
rename to x-pack/plugins/spaces/public/management/components/enabled_features/index.ts
diff --git a/x-pack/plugins/spaces/public/management/edit_space/enabled_features/toggle_all_features.scss b/x-pack/plugins/spaces/public/management/components/enabled_features/toggle_all_features.scss
similarity index 100%
rename from x-pack/plugins/spaces/public/management/edit_space/enabled_features/toggle_all_features.scss
rename to x-pack/plugins/spaces/public/management/components/enabled_features/toggle_all_features.scss
diff --git a/x-pack/plugins/spaces/public/management/edit_space/enabled_features/toggle_all_features.tsx b/x-pack/plugins/spaces/public/management/components/enabled_features/toggle_all_features.tsx
similarity index 100%
rename from x-pack/plugins/spaces/public/management/edit_space/enabled_features/toggle_all_features.tsx
rename to x-pack/plugins/spaces/public/management/components/enabled_features/toggle_all_features.tsx
diff --git a/x-pack/plugins/spaces/public/management/edit_space/section_panel/__snapshots__/section_panel.test.tsx.snap b/x-pack/plugins/spaces/public/management/components/section_panel/__snapshots__/section_panel.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/spaces/public/management/edit_space/section_panel/__snapshots__/section_panel.test.tsx.snap
rename to x-pack/plugins/spaces/public/management/components/section_panel/__snapshots__/section_panel.test.tsx.snap
diff --git a/x-pack/plugins/spaces/public/management/edit_space/section_panel/index.ts b/x-pack/plugins/spaces/public/management/components/section_panel/index.ts
similarity index 100%
rename from x-pack/plugins/spaces/public/management/edit_space/section_panel/index.ts
rename to x-pack/plugins/spaces/public/management/components/section_panel/index.ts
diff --git a/x-pack/plugins/spaces/public/management/edit_space/section_panel/section_panel.scss b/x-pack/plugins/spaces/public/management/components/section_panel/section_panel.scss
similarity index 100%
rename from x-pack/plugins/spaces/public/management/edit_space/section_panel/section_panel.scss
rename to x-pack/plugins/spaces/public/management/components/section_panel/section_panel.scss
diff --git a/x-pack/plugins/spaces/public/management/edit_space/section_panel/section_panel.test.tsx b/x-pack/plugins/spaces/public/management/components/section_panel/section_panel.test.tsx
similarity index 100%
rename from x-pack/plugins/spaces/public/management/edit_space/section_panel/section_panel.test.tsx
rename to x-pack/plugins/spaces/public/management/components/section_panel/section_panel.test.tsx
diff --git a/x-pack/plugins/spaces/public/management/edit_space/section_panel/section_panel.tsx b/x-pack/plugins/spaces/public/management/components/section_panel/section_panel.tsx
similarity index 100%
rename from x-pack/plugins/spaces/public/management/edit_space/section_panel/section_panel.tsx
rename to x-pack/plugins/spaces/public/management/components/section_panel/section_panel.tsx
diff --git a/x-pack/plugins/spaces/public/management/edit_space/solution_view/index.ts b/x-pack/plugins/spaces/public/management/components/solution_view/index.ts
similarity index 100%
rename from x-pack/plugins/spaces/public/management/edit_space/solution_view/index.ts
rename to x-pack/plugins/spaces/public/management/components/solution_view/index.ts
diff --git a/x-pack/plugins/spaces/public/management/edit_space/solution_view/solution_view.tsx b/x-pack/plugins/spaces/public/management/components/solution_view/solution_view.tsx
similarity index 100%
rename from x-pack/plugins/spaces/public/management/edit_space/solution_view/solution_view.tsx
rename to x-pack/plugins/spaces/public/management/components/solution_view/solution_view.tsx
diff --git a/x-pack/plugins/spaces/public/management/edit_space/manage_space_page.test.tsx b/x-pack/plugins/spaces/public/management/create_space/create_space_page.test.tsx
similarity index 97%
rename from x-pack/plugins/spaces/public/management/edit_space/manage_space_page.test.tsx
rename to x-pack/plugins/spaces/public/management/create_space/create_space_page.test.tsx
index ac60902920fa9..801601d9f9f4e 100644
--- a/x-pack/plugins/spaces/public/management/edit_space/manage_space_page.test.tsx
+++ b/x-pack/plugins/spaces/public/management/create_space/create_space_page.test.tsx
@@ -18,13 +18,13 @@ import { KibanaFeature } from '@kbn/features-plugin/public';
 import { featuresPluginMock } from '@kbn/features-plugin/public/mocks';
 import { findTestSubject, mountWithIntl } from '@kbn/test-jest-helpers';
 
-import { ConfirmAlterActiveSpaceModal } from './confirm_alter_active_space_modal';
-import { EnabledFeatures } from './enabled_features';
-import { ManageSpacePage } from './manage_space_page';
+import { CreateSpacePage } from './create_space_page';
 import type { SolutionView, Space } from '../../../common/types/latest';
 import { EventTracker } from '../../analytics';
 import type { SpacesManager } from '../../spaces_manager';
 import { spacesManagerMock } from '../../spaces_manager/mocks';
+import { ConfirmAlterActiveSpaceModal } from '../components/confirm_alter_active_space_modal';
+import { EnabledFeatures } from '../components/enabled_features';
 
 // To be resolved by EUI team.
 // https://github.com/elastic/eui/issues/3712
@@ -70,7 +70,7 @@ describe('ManageSpacePage', () => {
     spacesManager.getActiveSpace = jest.fn().mockResolvedValue(space);
 
     const wrapper = mountWithIntl(
-      <ManageSpacePage
+      <CreateSpacePage
         spacesManager={spacesManager as unknown as SpacesManager}
         getFeatures={featuresStart.getFeatures}
         notifications={notificationServiceMock.createStartContract()}
@@ -122,7 +122,7 @@ describe('ManageSpacePage', () => {
     spacesManager.getActiveSpace = jest.fn().mockResolvedValue(space);
 
     const wrapper = mountWithIntl(
-      <ManageSpacePage
+      <CreateSpacePage
         spacesManager={spacesManager as unknown as SpacesManager}
         getFeatures={featuresStart.getFeatures}
         notifications={notificationServiceMock.createStartContract()}
@@ -190,7 +190,7 @@ describe('ManageSpacePage', () => {
     spacesManager.getActiveSpace = jest.fn().mockResolvedValue(space);
 
     const wrapper = mountWithIntl(
-      <ManageSpacePage
+      <CreateSpacePage
         spacesManager={spacesManager as unknown as SpacesManager}
         getFeatures={featuresStart.getFeatures}
         notifications={notificationServiceMock.createStartContract()}
@@ -221,7 +221,7 @@ describe('ManageSpacePage', () => {
     spacesManager.getActiveSpace = jest.fn().mockResolvedValue(space);
 
     const wrapper = mountWithIntl(
-      <ManageSpacePage
+      <CreateSpacePage
         spacesManager={spacesManager as unknown as SpacesManager}
         getFeatures={featuresStart.getFeatures}
         notifications={notificationServiceMock.createStartContract()}
@@ -252,7 +252,7 @@ describe('ManageSpacePage', () => {
     spacesManager.getActiveSpace = jest.fn().mockResolvedValue(space);
 
     const wrapper = mountWithIntl(
-      <ManageSpacePage
+      <CreateSpacePage
         spacesManager={spacesManager as unknown as SpacesManager}
         getFeatures={featuresStart.getFeatures}
         notifications={notificationServiceMock.createStartContract()}
@@ -283,7 +283,7 @@ describe('ManageSpacePage', () => {
     spacesManager.getActiveSpace = jest.fn().mockResolvedValue(space);
 
     const wrapper = mountWithIntl(
-      <ManageSpacePage
+      <CreateSpacePage
         spacesManager={spacesManager as unknown as SpacesManager}
         getFeatures={featuresStart.getFeatures}
         notifications={notificationServiceMock.createStartContract()}
@@ -312,7 +312,7 @@ describe('ManageSpacePage', () => {
     const spacesManager = spacesManagerMock.create();
 
     const wrapper = mountWithIntl(
-      <ManageSpacePage
+      <CreateSpacePage
         spacesManager={spacesManager}
         getFeatures={featuresStart.getFeatures}
         notifications={notificationServiceMock.createStartContract()}
@@ -373,7 +373,7 @@ describe('ManageSpacePage', () => {
     const onLoadSpace = jest.fn();
 
     const wrapper = mountWithIntl(
-      <ManageSpacePage
+      <CreateSpacePage
         spaceId={'existing-space'}
         spacesManager={spacesManager as unknown as SpacesManager}
         onLoadSpace={onLoadSpace}
@@ -451,7 +451,7 @@ describe('ManageSpacePage', () => {
     const onLoadSpace = jest.fn();
 
     const wrapper = mountWithIntl(
-      <ManageSpacePage
+      <CreateSpacePage
         spaceId={'existing-space'}
         spacesManager={spacesManager as unknown as SpacesManager}
         onLoadSpace={onLoadSpace}
@@ -504,7 +504,7 @@ describe('ManageSpacePage', () => {
     const notifications = notificationServiceMock.createStartContract();
 
     const wrapper = mountWithIntl(
-      <ManageSpacePage
+      <CreateSpacePage
         spacesManager={spacesManager as unknown as SpacesManager}
         getFeatures={() => Promise.reject(error)}
         notifications={notifications}
@@ -542,7 +542,7 @@ describe('ManageSpacePage', () => {
     spacesManager.getActiveSpace = jest.fn().mockResolvedValue(space);
 
     const wrapper = mountWithIntl(
-      <ManageSpacePage
+      <CreateSpacePage
         spaceId={'my-space'}
         spacesManager={spacesManager as unknown as SpacesManager}
         getFeatures={featuresStart.getFeatures}
@@ -605,7 +605,7 @@ describe('ManageSpacePage', () => {
     spacesManager.getActiveSpace = jest.fn().mockResolvedValue(space);
 
     const wrapper = mountWithIntl(
-      <ManageSpacePage
+      <CreateSpacePage
         spaceId={'my-space'}
         spacesManager={spacesManager as unknown as SpacesManager}
         getFeatures={featuresStart.getFeatures}
diff --git a/x-pack/plugins/spaces/public/management/edit_space/manage_space_page.tsx b/x-pack/plugins/spaces/public/management/create_space/create_space_page.tsx
similarity index 97%
rename from x-pack/plugins/spaces/public/management/edit_space/manage_space_page.tsx
rename to x-pack/plugins/spaces/public/management/create_space/create_space_page.tsx
index 4f45b55fb1630..a6aa4f37eb517 100644
--- a/x-pack/plugins/spaces/public/management/edit_space/manage_space_page.tsx
+++ b/x-pack/plugins/spaces/public/management/create_space/create_space_page.tsx
@@ -26,11 +26,6 @@ import type { FeaturesPluginStart, KibanaFeature } from '@kbn/features-plugin/pu
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 
-import { ConfirmAlterActiveSpaceModal } from './confirm_alter_active_space_modal';
-import { CustomizeSpace } from './customize_space';
-import { DeleteSpacesButton } from './delete_spaces_button';
-import { EnabledFeatures } from './enabled_features';
-import { SolutionView } from './solution_view';
 import type { Space } from '../../../common';
 import { isReservedSpace } from '../../../common';
 import type { EventTracker } from '../../analytics';
@@ -38,6 +33,11 @@ import { getSpacesFeatureDescription } from '../../constants';
 import { getSpaceColor, getSpaceInitials } from '../../space_avatar';
 import type { SpacesManager } from '../../spaces_manager';
 import { UnauthorizedPrompt } from '../components';
+import { ConfirmAlterActiveSpaceModal } from '../components/confirm_alter_active_space_modal';
+import { CustomizeSpace } from '../components/customize_space';
+import { DeleteSpacesButton } from '../components/delete_spaces_button';
+import { EnabledFeatures } from '../components/enabled_features';
+import { SolutionView } from '../components/solution_view';
 import { toSpaceIdentifier } from '../lib';
 import { SpaceValidator } from '../lib/validate_space';
 
@@ -77,7 +77,7 @@ interface State {
   };
 }
 
-export class ManageSpacePage extends Component<Props, State> {
+export class CreateSpacePage extends Component<Props, State> {
   private readonly validator: SpaceValidator;
 
   constructor(props: Props) {
diff --git a/x-pack/plugins/spaces/public/management/create_space/index.ts b/x-pack/plugins/spaces/public/management/create_space/index.ts
new file mode 100644
index 0000000000000..16705209eb450
--- /dev/null
+++ b/x-pack/plugins/spaces/public/management/create_space/index.ts
@@ -0,0 +1,9 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export type { FormValues } from './create_space_page';
+export { CreateSpacePage } from './create_space_page';
diff --git a/x-pack/plugins/spaces/public/management/edit_space/constants.ts b/x-pack/plugins/spaces/public/management/edit_space/constants.ts
new file mode 100644
index 0000000000000..21e10c547800f
--- /dev/null
+++ b/x-pack/plugins/spaces/public/management/edit_space/constants.ts
@@ -0,0 +1,10 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export const TAB_ID_CONTENT = 'content';
+export const TAB_ID_ROLES = 'roles';
+export const TAB_ID_GENERAL = 'general';
diff --git a/x-pack/plugins/spaces/public/management/edit_space/edit_space.tsx b/x-pack/plugins/spaces/public/management/edit_space/edit_space.tsx
new file mode 100644
index 0000000000000..a2b4cc9cd65d1
--- /dev/null
+++ b/x-pack/plugins/spaces/public/management/edit_space/edit_space.tsx
@@ -0,0 +1,278 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import {
+  EuiBadge,
+  EuiButton,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiLoadingSpinner,
+  EuiSpacer,
+  EuiTab,
+  EuiTabs,
+  EuiText,
+  EuiTitle,
+} from '@elastic/eui';
+import React, { lazy, Suspense, useEffect, useState } from 'react';
+import type { FC } from 'react';
+
+import type { ScopedHistory } from '@kbn/core/public';
+import type { FeaturesPluginStart, KibanaFeature } from '@kbn/features-plugin/public';
+import { FormattedMessage } from '@kbn/i18n-react';
+import { reactRouterNavigate } from '@kbn/kibana-react-plugin/public';
+import type { Role } from '@kbn/security-plugin-types-common';
+
+import { TAB_ID_CONTENT, TAB_ID_GENERAL, TAB_ID_ROLES } from './constants';
+import { useTabs } from './hooks/use_tabs';
+import { useEditSpaceServices, useEditSpaceStore } from './provider';
+import { addSpaceIdToPath, ENTER_SPACE_PATH, type Space } from '../../../common';
+import { getSpaceAvatarComponent } from '../../space_avatar';
+import { SpaceSolutionBadge } from '../../space_solution_badge';
+
+// No need to wrap LazySpaceAvatar in an error boundary, because it is one of the first chunks loaded when opening Kibana.
+const LazySpaceAvatar = lazy(() =>
+  getSpaceAvatarComponent().then((component) => ({ default: component }))
+);
+
+const getSelectedTabId = (canUserViewRoles: boolean, selectedTabId?: string) => {
+  // Validation of the selectedTabId routing parameter, default to the Content tab
+  return selectedTabId &&
+    [TAB_ID_CONTENT, canUserViewRoles ? TAB_ID_ROLES : null].filter(Boolean).includes(selectedTabId)
+    ? selectedTabId
+    : TAB_ID_GENERAL;
+};
+
+interface PageProps {
+  spaceId?: string;
+  history: ScopedHistory;
+  selectedTabId?: string;
+  getFeatures: FeaturesPluginStart['getFeatures'];
+  onLoadSpace: (space: Space) => void;
+  allowFeatureVisibility: boolean;
+  allowSolutionVisibility: boolean;
+}
+
+const handleApiError = (error: Error) => {
+  // eslint-disable-next-line no-console
+  console.error(error);
+  throw error;
+};
+
+export const EditSpace: FC<PageProps> = ({
+  spaceId,
+  getFeatures,
+  history,
+  onLoadSpace,
+  selectedTabId: _selectedTabId,
+  ...props
+}) => {
+  const { state, dispatch } = useEditSpaceStore();
+  const { invokeClient } = useEditSpaceServices();
+  const { spacesManager, capabilities, serverBasePath } = useEditSpaceServices();
+  const [space, setSpace] = useState<Space | null>(null);
+  const [userActiveSpace, setUserActiveSpace] = useState<Space | null>(null);
+  const [features, setFeatures] = useState<KibanaFeature[] | null>(null);
+  const [isLoadingSpace, setIsLoadingSpace] = useState(true);
+  const [isLoadingFeatures, setIsLoadingFeatures] = useState(true);
+  const [isLoadingRoles, setIsLoadingRoles] = useState(true);
+  const selectedTabId = getSelectedTabId(Boolean(capabilities?.roles?.view), _selectedTabId);
+  const [tabs, selectedTabContent] = useTabs({
+    space,
+    features,
+    rolesCount: state.roles.size,
+    capabilities,
+    history,
+    currentSelectedTabId: selectedTabId,
+    ...props,
+  });
+
+  useEffect(() => {
+    if (!spaceId) {
+      return;
+    }
+
+    const getSpaceInfo = async () => {
+      const [activeSpace, currentSpace] = await Promise.all([
+        spacesManager.getActiveSpace(),
+        spacesManager.getSpace(spaceId),
+      ]);
+
+      setSpace(currentSpace);
+      setUserActiveSpace(activeSpace);
+      setIsLoadingSpace(false);
+    };
+
+    getSpaceInfo().catch(handleApiError);
+  }, [spaceId, spacesManager]);
+
+  useEffect(() => {
+    if (!spaceId) {
+      return;
+    }
+
+    const getRoles = async () => {
+      await invokeClient(async (clients) => {
+        let result: Role[] = [];
+        try {
+          result = await clients.spacesManager.getRolesForSpace(spaceId);
+
+          dispatch({ type: 'update_roles', payload: result });
+        } catch (error) {
+          const message = error?.body?.message ?? error.toString();
+          const statusCode = error?.body?.statusCode ?? null;
+          if (statusCode === 403) {
+            // eslint-disable-next-line no-console
+            console.log('Insufficient permissions to get list of roles for the space');
+            // eslint-disable-next-line no-console
+            console.log(message);
+          } else {
+            // eslint-disable-next-line no-console
+            console.error('Encountered error while getting list of roles for space!');
+            // eslint-disable-next-line no-console
+            console.error(error);
+            throw error;
+          }
+        }
+      });
+
+      setIsLoadingRoles(false);
+    };
+
+    if (!state.roles.size) {
+      // maybe we do not make this call if user can't view roles? 🤔
+      getRoles().catch(handleApiError);
+    }
+  }, [dispatch, invokeClient, spaceId, state.roles]);
+
+  useEffect(() => {
+    const _getFeatures = async () => {
+      const result = await getFeatures();
+      setFeatures(result);
+      setIsLoadingFeatures(false);
+    };
+    _getFeatures().catch(handleApiError);
+  }, [getFeatures]);
+
+  useEffect(() => {
+    if (space) {
+      onLoadSpace?.(space);
+    }
+  }, [onLoadSpace, space]);
+
+  if (!space) {
+    return null;
+  }
+
+  if (isLoadingSpace || isLoadingFeatures || isLoadingRoles) {
+    return (
+      <EuiFlexGroup justifyContent="spaceAround">
+        <EuiFlexItem grow={false}>
+          <EuiLoadingSpinner size="xxl" />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    );
+  }
+
+  const HeaderAvatar = () => {
+    return (
+      <Suspense fallback={<EuiLoadingSpinner />}>
+        <LazySpaceAvatar space={space} size="xl" />
+      </Suspense>
+    );
+  };
+
+  const { id, solution: spaceSolution } = space;
+  const solution = spaceSolution ?? 'classic';
+  const shouldShowSolutionBadge = props.allowSolutionVisibility || solution !== 'classic';
+
+  return (
+    <div data-test-subj="spaces-view-page">
+      <EuiFlexGroup data-test-subj="spaceDetailsHeader" alignItems="flexStart">
+        <EuiFlexItem grow={false}>
+          <HeaderAvatar />
+        </EuiFlexItem>
+        <EuiFlexItem grow={true}>
+          <EuiTitle size="l">
+            <h1 data-test-subj="spaceTitle">
+              {space.name}
+              {shouldShowSolutionBadge ? (
+                <>
+                  {' '}
+                  <SpaceSolutionBadge
+                    solution={solution}
+                    data-test-subj={`space-solution-badge-${solution}`}
+                  />
+                </>
+              ) : null}
+              {userActiveSpace?.id === id ? (
+                <>
+                  {' '}
+                  <EuiBadge color="primary">
+                    <FormattedMessage
+                      id="xpack.spaces.management.spaceDetails.space.badge.isCurrent"
+                      description="Text for a badge shown in the Space details page when the particular Space currently active."
+                      defaultMessage="Current"
+                    />
+                  </EuiBadge>
+                </>
+              ) : null}
+            </h1>
+          </EuiTitle>
+
+          <EuiText size="s">
+            <p>
+              {space.description ?? (
+                <FormattedMessage
+                  id="xpack.spaces.management.spaceDetails.space.description"
+                  defaultMessage="Organize your saved objects and show related features for creating new content."
+                />
+              )}
+            </p>
+          </EuiText>
+        </EuiFlexItem>
+        {userActiveSpace?.id !== id ? (
+          <EuiFlexItem grow={false}>
+            <EuiButton
+              iconType="merge"
+              href={addSpaceIdToPath(
+                serverBasePath,
+                id,
+                `${ENTER_SPACE_PATH}?next=/app/management/kibana/spaces/edit/${id}`
+              )}
+              data-test-subj="spaceSwitcherButton"
+            >
+              <FormattedMessage
+                id="xpack.spaces.management.spaceDetails.space.switchToSpaceButton.label"
+                defaultMessage="Switch to this space"
+              />
+            </EuiButton>
+          </EuiFlexItem>
+        ) : null}
+      </EuiFlexGroup>
+
+      <EuiSpacer />
+
+      <EuiFlexGroup direction="column">
+        <EuiFlexItem>
+          <EuiTabs>
+            {tabs.map((tab, index) => (
+              <EuiTab
+                key={index}
+                isSelected={tab.id === selectedTabId}
+                append={tab.append}
+                {...reactRouterNavigate(history, `/edit/${encodeURIComponent(id)}/${tab.id}`)}
+              >
+                {tab.name}
+              </EuiTab>
+            ))}
+          </EuiTabs>
+        </EuiFlexItem>
+        <EuiFlexItem>{selectedTabContent ?? null}</EuiFlexItem>
+      </EuiFlexGroup>
+    </div>
+  );
+};
diff --git a/x-pack/plugins/spaces/public/management/edit_space/edit_space_content_tab.tsx b/x-pack/plugins/spaces/public/management/edit_space/edit_space_content_tab.tsx
new file mode 100644
index 0000000000000..dcb7b17d26e06
--- /dev/null
+++ b/x-pack/plugins/spaces/public/management/edit_space/edit_space_content_tab.tsx
@@ -0,0 +1,125 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import type { EuiBasicTableColumn, EuiTableFieldDataColumnType } from '@elastic/eui';
+import {
+  EuiBasicTable,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiIcon,
+  EuiLink,
+  EuiLoadingSpinner,
+} from '@elastic/eui';
+import { capitalize } from 'lodash';
+import type { FC } from 'react';
+import React, { useEffect, useState } from 'react';
+
+import { useEditSpaceServices } from './provider';
+import { addSpaceIdToPath, ENTER_SPACE_PATH, type Space } from '../../../common';
+import type { SpaceContentTypeSummaryItem } from '../../types';
+
+const handleApiError = (error: Error) => {
+  // eslint-disable-next-line no-console
+  console.error(error);
+  throw error;
+};
+
+export const EditSpaceContentTab: FC<{ space: Space }> = ({ space }) => {
+  const { id: spaceId } = space;
+  const { spacesManager, serverBasePath } = useEditSpaceServices();
+  const [isLoading, setIsLoading] = useState(true);
+  const [items, setItems] = useState<SpaceContentTypeSummaryItem[] | null>(null);
+
+  const columns: Array<EuiBasicTableColumn<SpaceContentTypeSummaryItem>> = [
+    {
+      field: 'type',
+      name: 'Type',
+      render: (_value: string, item: SpaceContentTypeSummaryItem) => {
+        const { icon, displayName } = item;
+        return (
+          <EuiFlexGroup gutterSize="m" alignItems="center">
+            <EuiFlexItem grow={false}>
+              <EuiIcon type={icon ?? 'gear'} size="m" />
+            </EuiFlexItem>
+            <EuiFlexItem grow={true}>{capitalize(displayName)}</EuiFlexItem>
+          </EuiFlexGroup>
+        );
+      },
+    },
+    {
+      field: 'count',
+      name: 'Count',
+      render: (value: string, item: SpaceContentTypeSummaryItem) => {
+        const uriComponent = encodeURIComponent(
+          `/app/management/kibana/objects?initialQuery=type:(${item.type})`
+        );
+        const href = addSpaceIdToPath(
+          serverBasePath,
+          space.id,
+          `${ENTER_SPACE_PATH}?next=${uriComponent}`
+        );
+        return <EuiLink href={href}>{value}</EuiLink>;
+      },
+    },
+  ];
+
+  const getRowProps = (item: SpaceContentTypeSummaryItem) => {
+    const { type } = item;
+    return {
+      'data-test-subj': `space-content-row-${type}`,
+      onClick: () => {},
+    };
+  };
+
+  const getCellProps = (
+    item: SpaceContentTypeSummaryItem,
+    column: EuiTableFieldDataColumnType<SpaceContentTypeSummaryItem>
+  ) => {
+    const { type } = item;
+    const { field } = column;
+    return {
+      'data-test-subj': `space-content-cell-${type}-${String(field)}`,
+      textOnly: true,
+    };
+  };
+
+  useEffect(() => {
+    const getItems = async () => {
+      const result = await spacesManager.getContentForSpace(spaceId);
+      const { summary } = result;
+      setItems(summary);
+      setIsLoading(false);
+    };
+
+    getItems().catch(handleApiError);
+  }, [spaceId, spacesManager]);
+
+  if (isLoading) {
+    return (
+      <EuiFlexGroup justifyContent="spaceAround">
+        <EuiFlexItem grow={false}>
+          <EuiLoadingSpinner size="xxl" />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    );
+  }
+
+  if (!items) {
+    return null;
+  }
+
+  return (
+    <EuiBasicTable
+      tableCaption="Demo of EuiBasicTable"
+      items={items}
+      rowHeader="firstName"
+      columns={columns}
+      rowProps={getRowProps}
+      cellProps={getCellProps}
+    />
+  );
+};
diff --git a/x-pack/plugins/spaces/public/management/edit_space/edit_space_features_tab.tsx b/x-pack/plugins/spaces/public/management/edit_space/edit_space_features_tab.tsx
new file mode 100644
index 0000000000000..eacb29c1a098d
--- /dev/null
+++ b/x-pack/plugins/spaces/public/management/edit_space/edit_space_features_tab.tsx
@@ -0,0 +1,77 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { EuiFlexGroup, EuiFlexItem, EuiLink, EuiSpacer, EuiText, EuiTitle } from '@elastic/eui';
+import type { FC } from 'react';
+import React from 'react';
+
+import type { KibanaFeature } from '@kbn/features-plugin/common';
+import { FormattedMessage } from '@kbn/i18n-react';
+
+import { useEditSpaceServices } from './provider';
+import type { Space } from '../../../common';
+import { FeatureTable } from '../components/enabled_features/feature_table';
+import { SectionPanel } from '../components/section_panel';
+
+interface Props {
+  space: Partial<Space>;
+  features: KibanaFeature[];
+  onChange: (updatedSpace: Partial<Space>) => void;
+}
+
+export const EditSpaceEnabledFeatures: FC<Props> = ({ features, space, onChange }) => {
+  const { capabilities, getUrlForApp } = useEditSpaceServices();
+  const canManageRoles = capabilities.management?.security?.roles === true;
+
+  if (!features) {
+    return null;
+  }
+
+  return (
+    <SectionPanel dataTestSubj="enabled-features-panel">
+      <EuiFlexGroup>
+        <EuiFlexItem>
+          <EuiTitle size="xs">
+            <h3>
+              <FormattedMessage
+                id="xpack.spaces.management.editSpaceFeatures.featuresVisibility"
+                defaultMessage="Set features visibility"
+              />
+            </h3>
+          </EuiTitle>
+          <EuiSpacer size="s" />
+          <EuiText size="s" color="subdued">
+            <p>
+              <FormattedMessage
+                id="xpack.spaces.management.editSpaceFeatures.notASecurityMechanismMessage"
+                defaultMessage="Hidden features are removed from the user interface, but not disabled. To secure access to features, {manageRolesLink}."
+                values={{
+                  manageRolesLink: canManageRoles ? (
+                    <EuiLink href={getUrlForApp('management', { path: '/security/roles' })}>
+                      <FormattedMessage
+                        id="xpack.spaces.management.editSpaceFeatures.manageRolesLinkText"
+                        defaultMessage="manage security roles"
+                      />
+                    </EuiLink>
+                  ) : (
+                    <FormattedMessage
+                      id="xpack.spaces.management.editSpaceFeatures.manageRolesLinkText"
+                      defaultMessage="manage security roles"
+                    />
+                  ),
+                }}
+              />
+            </p>
+          </EuiText>
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <FeatureTable features={features} space={space} onChange={onChange} />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </SectionPanel>
+  );
+};
diff --git a/x-pack/plugins/spaces/public/management/edit_space/edit_space_general_tab.test.tsx b/x-pack/plugins/spaces/public/management/edit_space/edit_space_general_tab.test.tsx
new file mode 100644
index 0000000000000..b1518c197c247
--- /dev/null
+++ b/x-pack/plugins/spaces/public/management/edit_space/edit_space_general_tab.test.tsx
@@ -0,0 +1,400 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import React from 'react';
+
+import {
+  httpServiceMock,
+  i18nServiceMock,
+  notificationServiceMock,
+  overlayServiceMock,
+  scopedHistoryMock,
+  themeServiceMock,
+} from '@kbn/core/public/mocks';
+import { DEFAULT_APP_CATEGORIES } from '@kbn/core-application-common';
+import { KibanaFeature } from '@kbn/features-plugin/common';
+import { __IntlProvider as IntlProvider } from '@kbn/i18n-react';
+
+import { EditSpaceSettingsTab } from './edit_space_general_tab';
+import { EditSpaceProvider } from './provider/view_space_provider';
+import type { SolutionView } from '../../../common';
+import { spacesManagerMock } from '../../spaces_manager/spaces_manager.mock';
+import { getPrivilegeAPIClientMock } from '../privilege_api_client.mock';
+import { getRolesAPIClientMock } from '../roles_api_client.mock';
+
+const space = { id: 'default', name: 'Default', disabledFeatures: [], _reserved: true };
+const history = scopedHistoryMock.create();
+const getUrlForApp = (appId: string) => appId;
+const navigateToUrl = jest.fn();
+const spacesManager = spacesManagerMock.create();
+const getRolesAPIClient = getRolesAPIClientMock;
+const getPrivilegeAPIClient = getPrivilegeAPIClientMock;
+const reloadWindow = jest.fn();
+
+const http = httpServiceMock.createStartContract();
+const notifications = notificationServiceMock.createStartContract();
+const overlays = overlayServiceMock.createStartContract();
+const theme = themeServiceMock.createStartContract();
+const i18n = i18nServiceMock.createStartContract();
+
+const navigateSpy = jest.spyOn(history, 'push').mockImplementation(() => {});
+const updateSpaceSpy = jest
+  .spyOn(spacesManager, 'updateSpace')
+  .mockImplementation(() => Promise.resolve());
+const deleteSpaceSpy = jest
+  .spyOn(spacesManager, 'deleteSpace')
+  .mockImplementation(() => Promise.resolve());
+
+describe('EditSpaceSettings', () => {
+  beforeEach(() => {
+    navigateSpy.mockReset();
+    updateSpaceSpy.mockReset();
+    deleteSpaceSpy.mockReset();
+  });
+
+  const TestComponent: React.FC = ({ children }) => {
+    return (
+      <IntlProvider locale="en">
+        <EditSpaceProvider
+          capabilities={{
+            navLinks: {},
+            management: {},
+            catalogue: {},
+            spaces: { manage: true },
+          }}
+          getUrlForApp={getUrlForApp}
+          navigateToUrl={navigateToUrl}
+          serverBasePath=""
+          spacesManager={spacesManager}
+          getRolesAPIClient={getRolesAPIClient}
+          http={http}
+          notifications={notifications}
+          overlays={overlays}
+          getPrivilegesAPIClient={getPrivilegeAPIClient}
+          theme={theme}
+          i18n={i18n}
+        >
+          {children}
+        </EditSpaceProvider>
+      </IntlProvider>
+    );
+  };
+
+  it('should render controls for initial state of editing a space', () => {
+    render(
+      <TestComponent>
+        <EditSpaceSettingsTab
+          space={space}
+          history={history}
+          features={[]}
+          allowFeatureVisibility={false}
+          allowSolutionVisibility={false}
+          reloadWindow={reloadWindow}
+        />
+      </TestComponent>
+    );
+
+    expect(screen.getByTestId('addSpaceName')).toBeInTheDocument();
+    expect(screen.getByTestId('descriptionSpaceText')).toBeInTheDocument();
+    expect(screen.getByTestId('spaceLetterInitial')).toBeInTheDocument();
+    expect(screen.getByTestId('euiColorPickerAnchor')).toBeInTheDocument();
+
+    expect(screen.queryByTestId('solutionViewSelect')).not.toBeInTheDocument(); // hides solution view when not not set to visible
+    expect(screen.queryByTestId('enabled-features-panel')).not.toBeInTheDocument(); // hides navigation features table when not set to visible
+  });
+
+  it('shows solution view select when visible', async () => {
+    render(
+      <TestComponent>
+        <EditSpaceSettingsTab
+          space={space}
+          history={history}
+          features={[]}
+          allowFeatureVisibility={false}
+          allowSolutionVisibility={true}
+          reloadWindow={reloadWindow}
+        />
+      </TestComponent>
+    );
+
+    expect(screen.getByTestId('solutionViewSelect')).toBeInTheDocument();
+    expect(screen.queryByTestId('enabled-features-panel')).not.toBeInTheDocument(); // hides navigation features table when not set to visible
+  });
+
+  it('shows feature visibility controls when allowed', async () => {
+    const features = [
+      new KibanaFeature({
+        id: 'feature-1',
+        name: 'feature 1',
+        app: [],
+        category: DEFAULT_APP_CATEGORIES.kibana,
+        privileges: null,
+      }),
+    ];
+
+    render(
+      <TestComponent>
+        <EditSpaceSettingsTab
+          space={space}
+          history={history}
+          features={features}
+          allowFeatureVisibility={true}
+          allowSolutionVisibility={false}
+          reloadWindow={reloadWindow}
+        />
+      </TestComponent>
+    );
+
+    expect(screen.getByTestId('enabled-features-panel')).toBeInTheDocument();
+    expect(screen.queryByTestId('solutionViewSelect')).not.toBeInTheDocument(); // hides solution view when not not set to visible
+  });
+
+  it('allows a space to be updated', async () => {
+    const spaceToUpdate = {
+      id: 'existing-space',
+      name: 'Existing Space',
+      description: 'hey an existing space',
+      color: '#aabbcc',
+      initials: 'AB',
+      disabledFeatures: [],
+      solution: 'es' as SolutionView,
+    };
+
+    render(
+      <TestComponent>
+        <EditSpaceSettingsTab
+          space={spaceToUpdate}
+          history={history}
+          features={[]}
+          allowFeatureVisibility={false}
+          allowSolutionVisibility={false}
+          reloadWindow={reloadWindow}
+        />
+      </TestComponent>
+    );
+
+    await act(async () => {
+      // update the space name
+      const nameInput = screen.getByTestId('addSpaceName');
+      fireEvent.change(nameInput, { target: { value: 'Updated Name Of Space' } });
+
+      expect(screen.queryByTestId('userImpactWarning')).not.toBeInTheDocument();
+      expect(screen.queryByTestId('confirmModalTitleText')).not.toBeInTheDocument();
+
+      const updateButton = await screen.findByTestId('save-space-button'); // appears via re-render
+      fireEvent.click(updateButton);
+
+      expect(updateSpaceSpy).toHaveBeenCalledWith({
+        ...spaceToUpdate,
+        name: 'Updated Name Of Space',
+        initials: 'UN',
+        color: '#D6BF57',
+      });
+    });
+
+    expect(navigateSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it('allows space to be deleted', async () => {
+    const spaceToDelete = {
+      id: 'delete-me-space',
+      name: 'Delete Me Space',
+      description: 'This is a very nice space... for me to DELETE!',
+      color: '#aabbcc',
+      initials: 'XX',
+      disabledFeatures: [],
+    };
+
+    render(
+      <TestComponent>
+        <EditSpaceSettingsTab
+          space={spaceToDelete}
+          history={history}
+          features={[]}
+          allowFeatureVisibility={false}
+          allowSolutionVisibility={false}
+          reloadWindow={reloadWindow}
+        />
+      </TestComponent>
+    );
+
+    await act(async () => {
+      const deleteButton = screen.getByTestId('delete-space-button');
+      fireEvent.click(deleteButton);
+
+      const confirmButton = await screen.findByTestId('confirmModalConfirmButton'); // click delete confirm
+      fireEvent.click(confirmButton);
+
+      expect(deleteSpaceSpy).toHaveBeenCalledWith(spaceToDelete);
+    });
+  });
+
+  it('sets calculated fields for existing spaces', async () => {
+    // The Spaces plugin provides functions to calculate the initials and color of a space if they have not been customized. The new space
+    // management page explicitly sets these fields when a new space is created, but it should also handle existing "legacy" spaces that do
+    // not already have these fields set.
+    const spaceToUpdate = {
+      id: 'existing-space',
+      name: 'Existing Space',
+      description: 'hey an existing space',
+      color: undefined,
+      initials: undefined,
+      imageUrl: undefined,
+      disabledFeatures: [],
+    };
+
+    render(
+      <TestComponent>
+        <EditSpaceSettingsTab
+          space={spaceToUpdate}
+          history={history}
+          features={[]}
+          allowFeatureVisibility={false}
+          allowSolutionVisibility={false}
+          reloadWindow={reloadWindow}
+        />
+      </TestComponent>
+    );
+
+    await act(async () => {
+      // update the space name
+      const nameInput = screen.getByTestId('addSpaceName');
+      fireEvent.change(nameInput, { target: { value: 'Updated Existing Space' } });
+
+      const updateButton = await screen.findByTestId('save-space-button'); // appears via re-render
+      fireEvent.click(updateButton);
+
+      expect(updateSpaceSpy).toHaveBeenCalledWith({
+        ...spaceToUpdate,
+        name: 'Updated Existing Space',
+        color: '#D6BF57',
+        initials: 'UE',
+      });
+    });
+  });
+
+  it('warns when updating solution view', async () => {
+    const spaceToUpdate = {
+      id: 'existing-space',
+      name: 'Existing Space',
+      description: 'hey an existing space',
+      color: '#aabbcc',
+      initials: 'AB',
+      disabledFeatures: [],
+      solution: undefined,
+    };
+
+    render(
+      <TestComponent>
+        <EditSpaceSettingsTab
+          space={spaceToUpdate}
+          history={history}
+          features={[]}
+          allowFeatureVisibility={false}
+          allowSolutionVisibility={true}
+          reloadWindow={reloadWindow}
+        />
+      </TestComponent>
+    );
+
+    // update the space solution view
+    await act(async () => {
+      const solutionViewPicker = screen.getByTestId('solutionViewSelect');
+      fireEvent.click(solutionViewPicker);
+
+      const esSolutionOption = await screen.findByTestId('solutionViewEsOption'); // appears via re-render
+      fireEvent.click(esSolutionOption);
+
+      expect(screen.getByTestId('userImpactWarning')).toBeInTheDocument();
+      expect(screen.queryByTestId('confirmModalTitleText')).not.toBeInTheDocument();
+
+      const updateButton = screen.getByTestId('save-space-button');
+      fireEvent.click(updateButton);
+
+      expect(screen.getByTestId('confirmModalTitleText')).toBeInTheDocument();
+
+      const confirmButton = screen.getByTestId('confirmModalConfirmButton');
+      fireEvent.click(confirmButton);
+
+      await waitFor(() => {
+        expect(updateSpaceSpy).toHaveBeenCalledWith({
+          ...spaceToUpdate,
+          solution: 'es',
+        });
+      });
+    });
+
+    expect(navigateSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it('warns when updating features in the active space', async () => {
+    const features = [
+      new KibanaFeature({
+        id: 'feature-1',
+        name: 'feature 1',
+        app: [],
+        category: DEFAULT_APP_CATEGORIES.kibana,
+        privileges: null,
+      }),
+    ];
+
+    const spaceToUpdate = {
+      id: 'existing-space',
+      name: 'Existing Space',
+      description: 'hey an existing space',
+      color: '#aabbcc',
+      initials: 'AB',
+      disabledFeatures: [],
+      solution: 'classic' as SolutionView,
+    };
+
+    render(
+      <TestComponent>
+        <EditSpaceSettingsTab
+          space={spaceToUpdate}
+          history={history}
+          features={features}
+          allowFeatureVisibility={true}
+          allowSolutionVisibility={true}
+          reloadWindow={reloadWindow}
+        />
+      </TestComponent>
+    );
+
+    // update the space visible features
+    await act(async () => {
+      const feature1Checkbox = screen.getByTestId('featureCheckbox_feature-1');
+      expect(feature1Checkbox).toBeChecked();
+
+      fireEvent.click(feature1Checkbox);
+      await waitFor(() => {
+        expect(feature1Checkbox).not.toBeChecked();
+      });
+
+      expect(screen.getByTestId('userImpactWarning')).toBeInTheDocument();
+      expect(screen.queryByTestId('confirmModalTitleText')).not.toBeInTheDocument();
+
+      const updateButton = screen.getByTestId('save-space-button');
+      fireEvent.click(updateButton);
+
+      expect(screen.getByTestId('confirmModalTitleText')).toBeInTheDocument();
+
+      const confirmButton = screen.getByTestId('confirmModalConfirmButton');
+      fireEvent.click(confirmButton);
+
+      await waitFor(() => {
+        expect(updateSpaceSpy).toHaveBeenCalledWith({
+          ...spaceToUpdate,
+          disabledFeatures: ['feature-1'],
+        });
+      });
+    });
+
+    expect(navigateSpy).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/x-pack/plugins/spaces/public/management/edit_space/edit_space_general_tab.tsx b/x-pack/plugins/spaces/public/management/edit_space/edit_space_general_tab.tsx
new file mode 100644
index 0000000000000..42b5250e6222e
--- /dev/null
+++ b/x-pack/plugins/spaces/public/management/edit_space/edit_space_general_tab.tsx
@@ -0,0 +1,259 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { EuiCallOut, EuiSpacer } from '@elastic/eui';
+import React, { useCallback, useState } from 'react';
+
+import type { ScopedHistory } from '@kbn/core-application-browser';
+import type { KibanaFeature } from '@kbn/features-plugin/common';
+import { i18n } from '@kbn/i18n';
+import { useUnsavedChangesPrompt } from '@kbn/unsaved-changes-prompt';
+
+import { EditSpaceEnabledFeatures } from './edit_space_features_tab';
+import { EditSpaceTabFooter } from './footer';
+import { useEditSpaceServices } from './provider';
+import type { Space } from '../../../common';
+import { ConfirmDeleteModal } from '../components';
+import { ConfirmAlterActiveSpaceModal } from '../components/confirm_alter_active_space_modal';
+import { CustomizeSpace } from '../components/customize_space';
+import { SolutionView } from '../components/solution_view';
+import type { FormValues } from '../create_space';
+import { SpaceValidator } from '../lib';
+
+interface Props {
+  space: Space;
+  history: ScopedHistory;
+  features: KibanaFeature[];
+  allowFeatureVisibility: boolean;
+  allowSolutionVisibility: boolean;
+  reloadWindow: () => void;
+}
+
+export const EditSpaceSettingsTab: React.FC<Props> = ({ space, features, history, ...props }) => {
+  const [spaceSettings, setSpaceSettings] = useState<Partial<Space>>(space);
+  const [isDirty, setIsDirty] = useState(false); // track if unsaved changes have been made
+  const [isLoading, setIsLoading] = useState(false); // track if user has just clicked the Update button
+  const [showUserImpactWarning, setShowUserImpactWarning] = useState(false);
+  const [showAlteringActiveSpaceDialog, setShowAlteringActiveSpaceDialog] = useState(false);
+  const [showConfirmDeleteModal, setShowConfirmDeleteModal] = useState(false);
+  const { http, overlays, notifications, navigateToUrl, spacesManager } = useEditSpaceServices();
+
+  const [solution, setSolution] = useState<typeof space.solution | undefined>(space.solution);
+
+  useUnsavedChangesPrompt({
+    hasUnsavedChanges: isDirty,
+    http,
+    openConfirm: overlays.openConfirm,
+    navigateToUrl,
+    history,
+  });
+
+  const onChangeSpaceSettings = useCallback(
+    (formValues: FormValues & Partial<Space>) => {
+      const {
+        customIdentifier,
+        avatarType,
+        customAvatarInitials,
+        customAvatarColor,
+        ...updatedSpace
+      } = formValues;
+      setSpaceSettings({ ...spaceSettings, ...updatedSpace });
+      setIsDirty(true);
+    },
+    [spaceSettings]
+  );
+
+  const onChangeFeatures = useCallback(
+    (updatedSpace: Partial<Space>) => {
+      setSpaceSettings({ ...spaceSettings, ...updatedSpace });
+      setIsDirty(true);
+      setShowUserImpactWarning(true);
+    },
+    [spaceSettings]
+  );
+
+  const onSolutionViewChange = useCallback(
+    (updatedSpace: Partial<Space>) => {
+      setSolution(updatedSpace.solution);
+      onChangeFeatures(updatedSpace);
+    },
+    [onChangeFeatures]
+  );
+
+  const backToSpacesList = useCallback(() => {
+    history.push('/');
+  }, [history]);
+
+  const onClickCancel = useCallback(() => {
+    setShowAlteringActiveSpaceDialog(false);
+    setShowUserImpactWarning(false);
+    backToSpacesList();
+  }, [backToSpacesList]);
+
+  const onClickDeleteSpace = useCallback(() => {
+    setShowConfirmDeleteModal(true);
+  }, []);
+
+  const performSave = useCallback(
+    async ({ requiresReload = false }) => {
+      const { id, name, disabledFeatures } = spaceSettings;
+      if (!id) {
+        throw new Error(`Can not update space without id field!`);
+      }
+      if (!name) {
+        throw new Error(`Can not update space without name field!`);
+      }
+
+      setIsLoading(true);
+
+      try {
+        await spacesManager.updateSpace({
+          id,
+          name,
+          disabledFeatures: disabledFeatures ?? [],
+          ...spaceSettings,
+        });
+
+        notifications.toasts.addSuccess(
+          i18n.translate(
+            'xpack.spaces.management.spaceDetails.spaceSuccessfullySavedNotificationMessage',
+            {
+              defaultMessage: 'Space "{name}" was saved.',
+              values: { name },
+            }
+          )
+        );
+
+        setIsDirty(false);
+        backToSpacesList();
+        if (requiresReload) {
+          props.reloadWindow();
+        }
+      } catch (error) {
+        const message = error?.body?.message ?? error.toString();
+        notifications.toasts.addDanger(
+          i18n.translate('xpack.spaces.management.spaceDetails.errorSavingSpaceTitle', {
+            defaultMessage: 'Error saving space: {message}',
+            values: { message },
+          })
+        );
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [backToSpacesList, notifications.toasts, spaceSettings, spacesManager, props]
+  );
+
+  const onClickSubmit = useCallback(() => {
+    if (showUserImpactWarning) {
+      setShowAlteringActiveSpaceDialog(true);
+    } else {
+      performSave({ requiresReload: false });
+    }
+  }, [performSave, showUserImpactWarning]);
+
+  const doShowAlteringActiveSpaceDialog = () => {
+    return (
+      showAlteringActiveSpaceDialog && (
+        <ConfirmAlterActiveSpaceModal
+          onConfirm={() => performSave({ requiresReload: true })}
+          onCancel={() => {
+            setShowAlteringActiveSpaceDialog(false);
+          }}
+        />
+      )
+    );
+  };
+
+  const doShowConfirmDeleteSpaceDialog = () => {
+    return (
+      showConfirmDeleteModal && (
+        <ConfirmDeleteModal
+          space={space}
+          spacesManager={spacesManager}
+          onCancel={() => {
+            setShowConfirmDeleteModal(false);
+          }}
+          onSuccess={() => {
+            setShowConfirmDeleteModal(false);
+            backToSpacesList();
+          }}
+        />
+      )
+    );
+  };
+
+  // Show if user has changed disabled features
+  // Show if user has changed solution view
+  const doShowUserImpactWarning = () => {
+    return (
+      showUserImpactWarning && (
+        <>
+          <EuiSpacer />
+          <EuiCallOut
+            color="warning"
+            iconType="help"
+            title="Warning"
+            data-test-subj="userImpactWarning"
+          >
+            The changes made will impact all users in the space.
+          </EuiCallOut>
+        </>
+      )
+    );
+  };
+
+  const validator = new SpaceValidator();
+
+  return (
+    <>
+      {doShowAlteringActiveSpaceDialog()}
+      {doShowConfirmDeleteSpaceDialog()}
+
+      <CustomizeSpace
+        space={spaceSettings}
+        onChange={onChangeSpaceSettings}
+        editingExistingSpace={true}
+        validator={validator}
+      />
+
+      {props.allowSolutionVisibility && (
+        <>
+          <EuiSpacer />
+          <SolutionView
+            space={spaceSettings}
+            onChange={onSolutionViewChange}
+            validator={validator}
+            isEditing={true}
+          />
+        </>
+      )}
+
+      {props.allowFeatureVisibility && (solution == null || solution === 'classic') && (
+        <>
+          <EuiSpacer />
+          <EditSpaceEnabledFeatures
+            features={features}
+            space={spaceSettings}
+            onChange={onChangeFeatures}
+          />
+        </>
+      )}
+
+      {doShowUserImpactWarning()}
+
+      <EuiSpacer />
+      <EditSpaceTabFooter
+        isDirty={isDirty}
+        isLoading={isLoading}
+        onClickCancel={onClickCancel}
+        onClickSubmit={onClickSubmit}
+        onClickDeleteSpace={onClickDeleteSpace}
+      />
+    </>
+  );
+};
diff --git a/x-pack/plugins/spaces/public/management/edit_space/edit_space_page.tsx b/x-pack/plugins/spaces/public/management/edit_space/edit_space_page.tsx
new file mode 100644
index 0000000000000..882301d36459a
--- /dev/null
+++ b/x-pack/plugins/spaces/public/management/edit_space/edit_space_page.tsx
@@ -0,0 +1,40 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import type { ComponentProps, PropsWithChildren } from 'react';
+
+import { EditSpace } from './edit_space';
+import { EditSpaceProvider, type EditSpaceProviderProps } from './provider';
+
+type EditSpacePageProps = ComponentProps<typeof EditSpace> & EditSpaceProviderProps;
+
+export function EditSpacePage({
+  spaceId,
+  getFeatures,
+  history,
+  onLoadSpace,
+  selectedTabId,
+  allowFeatureVisibility,
+  allowSolutionVisibility,
+  children,
+  ...editSpaceServicesProps
+}: PropsWithChildren<EditSpacePageProps>) {
+  return (
+    <EditSpaceProvider {...editSpaceServicesProps}>
+      <EditSpace
+        spaceId={spaceId}
+        getFeatures={getFeatures}
+        history={history}
+        onLoadSpace={onLoadSpace}
+        selectedTabId={selectedTabId}
+        allowFeatureVisibility={allowFeatureVisibility}
+        allowSolutionVisibility={allowSolutionVisibility}
+      />
+    </EditSpaceProvider>
+  );
+}
diff --git a/x-pack/plugins/spaces/public/management/edit_space/edit_space_roles_tab.tsx b/x-pack/plugins/spaces/public/management/edit_space/edit_space_roles_tab.tsx
new file mode 100644
index 0000000000000..64381d5c1bd5b
--- /dev/null
+++ b/x-pack/plugins/spaces/public/management/edit_space/edit_space_roles_tab.tsx
@@ -0,0 +1,160 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { EuiFlexGroup, EuiFlexItem, EuiLink, EuiText } from '@elastic/eui';
+import type { FC } from 'react';
+import React, { useCallback } from 'react';
+
+import type { KibanaFeature } from '@kbn/features-plugin/common';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n-react';
+import { toMountPoint } from '@kbn/react-kibana-mount';
+import type { Role } from '@kbn/security-plugin-types-common';
+
+import { useEditSpaceServices, useEditSpaceStore } from './provider';
+import { PrivilegesRolesForm } from './roles/component/space_assign_role_privilege_form';
+import { SpaceAssignedRolesTable } from './roles/component/space_assigned_roles_table';
+import type { Space } from '../../../common';
+
+interface Props {
+  space: Space;
+  features: KibanaFeature[];
+  isReadOnly: boolean;
+}
+
+export const EditSpaceAssignedRolesTab: FC<Props> = ({ space, features, isReadOnly }) => {
+  const { dispatch, state } = useEditSpaceStore();
+  const {
+    getUrlForApp,
+    overlays,
+    theme,
+    i18n: i18nStart,
+    notifications,
+    invokeClient,
+  } = useEditSpaceServices();
+
+  const showRolesPrivilegeEditor = useCallback(
+    (defaultSelected?: Role[]) => {
+      const overlayRef = overlays.openFlyout(
+        toMountPoint(
+          <PrivilegesRolesForm
+            {...{
+              space,
+              features,
+              onSaveCompleted: () => {
+                notifications.toasts.addSuccess(
+                  i18n.translate(
+                    'xpack.spaces.management.spaceDetails.roles.assignmentSuccessMsg',
+                    {
+                      defaultMessage: `Selected roles have been assigned to the {spaceName} space`,
+                      values: {
+                        spaceName: space.name,
+                      },
+                    }
+                  )
+                );
+                overlayRef.close();
+              },
+              closeFlyout: () => overlayRef.close(),
+              defaultSelected,
+              storeDispatch: dispatch,
+              spacesClientsInvocator: invokeClient,
+            }}
+          />,
+          { theme, i18n: i18nStart }
+        ),
+        {
+          size: 's',
+        }
+      );
+    },
+    [dispatch, features, i18nStart, invokeClient, notifications.toasts, overlays, space, theme]
+  );
+
+  const removeRole = useCallback(
+    async (payload: Role[]) => {
+      const updateDoc = structuredClone(payload).map((roleDef) => {
+        roleDef.kibana = roleDef.kibana.filter(({ spaces }) => {
+          let spaceIdIndex: number;
+
+          if (spaces.length && (spaceIdIndex = spaces.indexOf(space.id)) > -1) {
+            if (spaces.length > 1) {
+              spaces.splice(spaceIdIndex, 1);
+              return true;
+            } else {
+              return false;
+            }
+          }
+          return true;
+        });
+
+        return roleDef;
+      });
+
+      await invokeClient((clients) => {
+        return clients.rolesClient.bulkUpdateRoles({ rolesUpdate: updateDoc }).then(() =>
+          notifications.toasts.addSuccess(
+            i18n.translate('xpack.spaces.management.spaceDetails.roles.removalSuccessMsg', {
+              defaultMessage:
+                'Removed {count, plural, one {role} other {{count} roles}} from {spaceName} space',
+              values: {
+                spaceName: space.name,
+                count: updateDoc.length,
+              },
+            })
+          )
+        );
+      });
+
+      dispatch({ type: 'remove_roles', payload: updateDoc });
+    },
+    [dispatch, invokeClient, notifications.toasts, space.id, space.name]
+  );
+
+  return (
+    <React.Fragment>
+      <EuiFlexGroup direction="column">
+        <EuiFlexItem>
+          <EuiText>
+            <FormattedMessage
+              id="xpack.spaces.management.spaceDetails.roles.heading"
+              defaultMessage="Assign roles to this space so that users with those roles are able to access it. You can create and edit them in {linkToRolesPage}."
+              values={{
+                linkToRolesPage: (
+                  <EuiLink href={getUrlForApp('management', { deepLinkId: 'roles' })}>
+                    {i18n.translate(
+                      'xpack.spaces.management.spaceDetails.roles.rolesPageAnchorText',
+                      { defaultMessage: 'Roles' }
+                    )}
+                  </EuiLink>
+                ),
+              }}
+            />
+          </EuiText>
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <SpaceAssignedRolesTable
+            isReadOnly={isReadOnly}
+            currentSpace={space}
+            assignedRoles={state.roles}
+            onClickBulkEdit={showRolesPrivilegeEditor}
+            onClickRowEditAction={(rowRecord) => showRolesPrivilegeEditor([rowRecord])}
+            onClickBulkRemove={async (selectedRoles) => {
+              await removeRole(selectedRoles);
+            }}
+            onClickRowRemoveAction={async (rowRecord) => {
+              await removeRole([rowRecord]);
+            }}
+            onClickAssignNewRole={async () => {
+              showRolesPrivilegeEditor();
+            }}
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </React.Fragment>
+  );
+};
diff --git a/x-pack/plugins/spaces/public/management/edit_space/edit_space_tabs.tsx b/x-pack/plugins/spaces/public/management/edit_space/edit_space_tabs.tsx
new file mode 100644
index 0000000000000..176df46f42deb
--- /dev/null
+++ b/x-pack/plugins/spaces/public/management/edit_space/edit_space_tabs.tsx
@@ -0,0 +1,125 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { EuiNotificationBadge } from '@elastic/eui';
+import React from 'react';
+
+import type { Capabilities, ScopedHistory } from '@kbn/core/public';
+import type { KibanaFeature } from '@kbn/features-plugin/common';
+import { i18n } from '@kbn/i18n';
+import { withSuspense } from '@kbn/shared-ux-utility';
+
+import { TAB_ID_CONTENT, TAB_ID_GENERAL, TAB_ID_ROLES } from './constants';
+import type { Space } from '../../../common';
+
+export interface EditSpaceTab {
+  id: string;
+  name: string;
+  content: JSX.Element;
+  append?: JSX.Element;
+  href?: string;
+}
+
+export interface GetTabsProps {
+  space: Space;
+  rolesCount: number;
+  features: KibanaFeature[];
+  history: ScopedHistory;
+  capabilities: Capabilities & {
+    roles?: { view: boolean; save: boolean };
+  };
+  allowFeatureVisibility: boolean;
+  allowSolutionVisibility: boolean;
+}
+
+const SuspenseEditSpaceSettingsTab = withSuspense(
+  React.lazy(() =>
+    import('./edit_space_general_tab').then(({ EditSpaceSettingsTab }) => ({
+      default: EditSpaceSettingsTab,
+    }))
+  )
+);
+
+const SuspenseEditSpaceAssignedRolesTab = withSuspense(
+  React.lazy(() =>
+    import('./edit_space_roles_tab').then(({ EditSpaceAssignedRolesTab }) => ({
+      default: EditSpaceAssignedRolesTab,
+    }))
+  )
+);
+
+const SuspenseEditSpaceContentTab = withSuspense(
+  React.lazy(() =>
+    import('./edit_space_content_tab').then(({ EditSpaceContentTab }) => ({
+      default: EditSpaceContentTab,
+    }))
+  )
+);
+
+export const getTabs = ({
+  space,
+  features,
+  history,
+  capabilities,
+  rolesCount,
+  ...props
+}: GetTabsProps): EditSpaceTab[] => {
+  const canUserViewRoles = Boolean(capabilities?.roles?.view);
+  const canUserModifyRoles = Boolean(capabilities?.roles?.save);
+  const reloadWindow = () => {
+    window.location.reload();
+  };
+
+  const tabsDefinition: EditSpaceTab[] = [
+    {
+      id: TAB_ID_GENERAL,
+      name: i18n.translate('xpack.spaces.management.spaceDetails.contentTabs.general.heading', {
+        defaultMessage: 'General settings',
+      }),
+      content: (
+        <SuspenseEditSpaceSettingsTab
+          space={space}
+          features={features}
+          history={history}
+          reloadWindow={reloadWindow}
+          {...props}
+        />
+      ),
+    },
+  ];
+
+  if (canUserViewRoles) {
+    tabsDefinition.push({
+      id: TAB_ID_ROLES,
+      name: i18n.translate('xpack.spaces.management.spaceDetails.contentTabs.roles.heading', {
+        defaultMessage: 'Assigned roles',
+      }),
+      append: (
+        <EuiNotificationBadge className="eui-alignCenter" color="subdued" size="m">
+          {rolesCount}
+        </EuiNotificationBadge>
+      ),
+      content: (
+        <SuspenseEditSpaceAssignedRolesTab
+          space={space}
+          features={features}
+          isReadOnly={!canUserModifyRoles}
+        />
+      ),
+    });
+  }
+
+  tabsDefinition.push({
+    id: TAB_ID_CONTENT,
+    name: i18n.translate('xpack.spaces.management.spaceDetails.contentTabs.content.heading', {
+      defaultMessage: 'Content',
+    }),
+    content: <SuspenseEditSpaceContentTab space={space} />,
+  });
+
+  return tabsDefinition;
+};
diff --git a/x-pack/plugins/spaces/public/management/edit_space/footer.tsx b/x-pack/plugins/spaces/public/management/edit_space/footer.tsx
new file mode 100644
index 0000000000000..ab66706f83cee
--- /dev/null
+++ b/x-pack/plugins/spaces/public/management/edit_space/footer.tsx
@@ -0,0 +1,76 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import {
+  EuiButton,
+  EuiButtonEmpty,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiLoadingSpinner,
+} from '@elastic/eui';
+import React from 'react';
+
+interface Props {
+  isDirty: boolean;
+  isLoading: boolean;
+  onClickCancel: () => void;
+  onClickSubmit: () => void;
+  onClickDeleteSpace: () => void;
+}
+
+export const EditSpaceTabFooter: React.FC<Props> = ({
+  isDirty,
+  isLoading,
+  onClickCancel,
+  onClickSubmit,
+  onClickDeleteSpace,
+}) => {
+  return (
+    <>
+      {isLoading && (
+        <EuiFlexGroup justifyContent="spaceAround">
+          <EuiFlexItem grow={false}>
+            <EuiLoadingSpinner />
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      )}
+      {!isLoading && (
+        <EuiFlexGroup>
+          <EuiFlexItem grow={false}>
+            <EuiButtonEmpty
+              onClick={onClickDeleteSpace}
+              color="danger"
+              data-test-subj="delete-space-button"
+            >
+              Delete space
+            </EuiButtonEmpty>
+          </EuiFlexItem>
+          <EuiFlexItem grow={true} />
+
+          <EuiFlexItem grow={false}>
+            <EuiButtonEmpty onClick={onClickCancel} data-test-subj="cancel-space-button">
+              Cancel
+            </EuiButtonEmpty>
+          </EuiFlexItem>
+
+          {isDirty && (
+            <EuiFlexItem grow={false}>
+              <EuiButton
+                color="primary"
+                fill
+                onClick={onClickSubmit}
+                data-test-subj="save-space-button"
+              >
+                Update space
+              </EuiButton>
+            </EuiFlexItem>
+          )}
+        </EuiFlexGroup>
+      )}
+    </>
+  );
+};
diff --git a/x-pack/plugins/spaces/public/management/edit_space/hooks/use_tabs.ts b/x-pack/plugins/spaces/public/management/edit_space/hooks/use_tabs.ts
new file mode 100644
index 0000000000000..fc583e54b0693
--- /dev/null
+++ b/x-pack/plugins/spaces/public/management/edit_space/hooks/use_tabs.ts
@@ -0,0 +1,41 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { useMemo } from 'react';
+
+import type { ScopedHistory } from '@kbn/core-application-browser';
+import type { KibanaFeature } from '@kbn/features-plugin/public';
+
+import type { Space } from '../../../../common';
+import { type EditSpaceTab, getTabs, type GetTabsProps } from '../edit_space_tabs';
+
+type UseTabsProps = Pick<GetTabsProps, 'capabilities' | 'rolesCount'> & {
+  space: Space | null;
+  features: KibanaFeature[] | null;
+  currentSelectedTabId: string;
+  history: ScopedHistory;
+  allowFeatureVisibility: boolean;
+  allowSolutionVisibility: boolean;
+};
+
+export const useTabs = ({
+  space,
+  features,
+  currentSelectedTabId,
+  ...getTabsArgs
+}: UseTabsProps): [EditSpaceTab[], JSX.Element | undefined] => {
+  const [tabs, selectedTabContent] = useMemo(() => {
+    if (space === null || features === null) {
+      return [[]];
+    }
+
+    const _tabs = space != null ? getTabs({ space, features, ...getTabsArgs }) : [];
+    return [_tabs, _tabs.find((obj) => obj.id === currentSelectedTabId)?.content];
+  }, [space, features, getTabsArgs, currentSelectedTabId]);
+
+  return [tabs, selectedTabContent];
+};
diff --git a/x-pack/plugins/spaces/public/management/edit_space/index.ts b/x-pack/plugins/spaces/public/management/edit_space/index.ts
index 78c3b0fc42e04..c85e8f1c2e499 100644
--- a/x-pack/plugins/spaces/public/management/edit_space/index.ts
+++ b/x-pack/plugins/spaces/public/management/edit_space/index.ts
@@ -5,4 +5,4 @@
  * 2.0.
  */
 
-export { ManageSpacePage } from './manage_space_page';
+export { EditSpacePage } from './edit_space_page';
diff --git a/x-pack/plugins/spaces/public/management/edit_space/provider/index.ts b/x-pack/plugins/spaces/public/management/edit_space/provider/index.ts
new file mode 100644
index 0000000000000..8f70d38f27d44
--- /dev/null
+++ b/x-pack/plugins/spaces/public/management/edit_space/provider/index.ts
@@ -0,0 +1,13 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export { EditSpaceProvider, useEditSpaceServices, useEditSpaceStore } from './view_space_provider';
+export type {
+  EditSpaceProviderProps,
+  EditSpaceServices,
+  EditSpaceStore,
+} from './view_space_provider';
diff --git a/x-pack/plugins/spaces/public/management/edit_space/provider/reducers/index.ts b/x-pack/plugins/spaces/public/management/edit_space/provider/reducers/index.ts
new file mode 100644
index 0000000000000..f640ef95c7147
--- /dev/null
+++ b/x-pack/plugins/spaces/public/management/edit_space/provider/reducers/index.ts
@@ -0,0 +1,53 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { type Reducer } from 'react';
+
+import type { Role } from '@kbn/security-plugin-types-common';
+
+export type IDispatchAction =
+  | {
+      /** @description  updates a single role record */
+      type: 'update_roles' | 'remove_roles';
+      payload: Role[];
+    }
+  | {
+      type: 'string';
+      payload: any;
+    };
+
+export interface IEditSpaceStoreState {
+  /** roles assigned to current space */
+  roles: Map<Role['name'], Role>;
+}
+
+export const createSpaceRolesReducer: Reducer<IEditSpaceStoreState, IDispatchAction> = (
+  state,
+  action
+) => {
+  const _state = structuredClone(state);
+
+  switch (action.type) {
+    case 'update_roles': {
+      action.payload.forEach((role) => {
+        _state.roles.set(role.name, role);
+      });
+
+      return _state;
+    }
+    case 'remove_roles': {
+      action.payload.forEach((role) => {
+        _state.roles.delete(role.name);
+      });
+
+      return _state;
+    }
+    default: {
+      return _state;
+    }
+  }
+};
diff --git a/x-pack/plugins/spaces/public/management/edit_space/provider/view_space_provider.test.tsx b/x-pack/plugins/spaces/public/management/edit_space/provider/view_space_provider.test.tsx
new file mode 100644
index 0000000000000..2d06ddb23fadd
--- /dev/null
+++ b/x-pack/plugins/spaces/public/management/edit_space/provider/view_space_provider.test.tsx
@@ -0,0 +1,110 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { renderHook } from '@testing-library/react-hooks';
+import type { PropsWithChildren } from 'react';
+import React from 'react';
+
+import {
+  httpServiceMock,
+  i18nServiceMock,
+  notificationServiceMock,
+  overlayServiceMock,
+  themeServiceMock,
+} from '@kbn/core/public/mocks';
+import type { ApplicationStart } from '@kbn/core-application-browser';
+import { __IntlProvider as IntlProvider } from '@kbn/i18n-react';
+
+import { EditSpaceProvider, useEditSpaceServices, useEditSpaceStore } from './view_space_provider';
+import { spacesManagerMock } from '../../../spaces_manager/spaces_manager.mock';
+import { getPrivilegeAPIClientMock } from '../../privilege_api_client.mock';
+import { getRolesAPIClientMock } from '../../roles_api_client.mock';
+
+const http = httpServiceMock.createStartContract();
+const notifications = notificationServiceMock.createStartContract();
+const overlays = overlayServiceMock.createStartContract();
+const theme = themeServiceMock.createStartContract();
+const i18n = i18nServiceMock.createStartContract();
+
+const spacesManager = spacesManagerMock.create();
+
+const SUTProvider = ({
+  children,
+  capabilities = {
+    navLinks: {},
+    management: {},
+    catalogue: {},
+    spaces: { manage: true },
+  },
+}: PropsWithChildren<Partial<Pick<ApplicationStart, 'capabilities'>>>) => {
+  return (
+    <IntlProvider locale="en">
+      <EditSpaceProvider
+        {...{
+          i18n,
+          http,
+          theme,
+          overlays,
+          notifications,
+          spacesManager,
+          serverBasePath: '',
+          getUrlForApp: (_) => _,
+          getRolesAPIClient: getRolesAPIClientMock,
+          getPrivilegesAPIClient: getPrivilegeAPIClientMock,
+          navigateToUrl: jest.fn(),
+          capabilities,
+        }}
+      >
+        {children}
+      </EditSpaceProvider>
+    </IntlProvider>
+  );
+};
+
+describe('EditSpaceProvider', () => {
+  describe('useEditSpaceServices', () => {
+    it('returns an object of predefined properties', () => {
+      const { result } = renderHook(useEditSpaceServices, { wrapper: SUTProvider });
+
+      expect(result.current).toEqual(
+        expect.objectContaining({
+          invokeClient: expect.any(Function),
+        })
+      );
+    });
+
+    it('throws when the hook is used within a tree that does not have the provider', () => {
+      const { result } = renderHook(useEditSpaceServices);
+      expect(result.error).toBeDefined();
+      expect(result.error?.message).toEqual(
+        expect.stringMatching('EditSpaceService Context is missing.')
+      );
+    });
+  });
+
+  describe('useEditSpaceStore', () => {
+    it('returns an object of predefined properties', () => {
+      const { result } = renderHook(useEditSpaceStore, { wrapper: SUTProvider });
+
+      expect(result.current).toEqual(
+        expect.objectContaining({
+          state: expect.objectContaining({ roles: expect.any(Map) }),
+          dispatch: expect.any(Function),
+        })
+      );
+    });
+
+    it('throws when the hook is used within a tree that does not have the provider', () => {
+      const { result } = renderHook(useEditSpaceStore);
+
+      expect(result.error).toBeDefined();
+      expect(result.error?.message).toEqual(
+        expect.stringMatching('EditSpaceStore Context is missing.')
+      );
+    });
+  });
+});
diff --git a/x-pack/plugins/spaces/public/management/edit_space/provider/view_space_provider.tsx b/x-pack/plugins/spaces/public/management/edit_space/provider/view_space_provider.tsx
new file mode 100644
index 0000000000000..8de7b96dcc6d2
--- /dev/null
+++ b/x-pack/plugins/spaces/public/management/edit_space/provider/view_space_provider.tsx
@@ -0,0 +1,151 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { once } from 'lodash';
+import React, {
+  createContext,
+  type Dispatch,
+  type PropsWithChildren,
+  useCallback,
+  useContext,
+  useEffect,
+  useReducer,
+  useRef,
+} from 'react';
+
+import type { ApplicationStart } from '@kbn/core-application-browser';
+import type { CoreStart } from '@kbn/core-lifecycle-browser';
+import type {
+  PrivilegesAPIClientPublicContract,
+  RolesAPIClient,
+} from '@kbn/security-plugin-types-public';
+
+import {
+  createSpaceRolesReducer,
+  type IDispatchAction,
+  type IEditSpaceStoreState,
+} from './reducers';
+import type { SpacesManager } from '../../../spaces_manager';
+
+export interface EditSpaceProviderProps
+  extends Pick<CoreStart, 'theme' | 'i18n' | 'overlays' | 'http' | 'notifications'> {
+  capabilities: ApplicationStart['capabilities'];
+  getUrlForApp: ApplicationStart['getUrlForApp'];
+  navigateToUrl: ApplicationStart['navigateToUrl'];
+  serverBasePath: string;
+  spacesManager: SpacesManager;
+  getRolesAPIClient: () => Promise<RolesAPIClient>;
+  getPrivilegesAPIClient: () => Promise<PrivilegesAPIClientPublicContract>;
+}
+
+export interface EditSpaceServices
+  extends Omit<EditSpaceProviderProps, 'getRolesAPIClient' | 'getPrivilegesAPIClient'> {
+  invokeClient<R extends unknown>(arg: (clients: EditSpaceClients) => Promise<R>): Promise<R>;
+}
+
+interface EditSpaceClients {
+  spacesManager: EditSpaceProviderProps['spacesManager'];
+  rolesClient: RolesAPIClient;
+  privilegesClient: PrivilegesAPIClientPublicContract;
+}
+
+export interface EditSpaceStore {
+  state: IEditSpaceStoreState;
+  dispatch: Dispatch<IDispatchAction>;
+}
+
+const createSpaceRolesContext = once(() => createContext<EditSpaceStore | null>(null));
+
+const createEditSpaceServicesContext = once(() => createContext<EditSpaceServices | null>(null));
+
+export const EditSpaceProvider = ({
+  children,
+  getRolesAPIClient,
+  getPrivilegesAPIClient,
+  ...services
+}: PropsWithChildren<EditSpaceProviderProps>) => {
+  const EditSpaceStoreContext = createSpaceRolesContext();
+  const EditSpaceServicesContext = createEditSpaceServicesContext();
+
+  const clients = useRef(Promise.all([getRolesAPIClient(), getPrivilegesAPIClient()]));
+  const rolesAPIClientRef = useRef<RolesAPIClient>();
+  const privilegesClientRef = useRef<PrivilegesAPIClientPublicContract>();
+
+  const initialStoreState = useRef<IEditSpaceStoreState>({
+    roles: new Map(),
+  });
+
+  const resolveAPIClients = useCallback(async () => {
+    try {
+      [rolesAPIClientRef.current, privilegesClientRef.current] = await clients.current;
+    } catch {
+      // handle errors
+    }
+  }, []);
+
+  useEffect(() => {
+    resolveAPIClients();
+  }, [resolveAPIClients]);
+
+  const createInitialState = useCallback((state: IEditSpaceStoreState) => {
+    return state;
+  }, []);
+
+  const [state, dispatch] = useReducer(
+    createSpaceRolesReducer,
+    initialStoreState.current,
+    createInitialState
+  );
+
+  const invokeClient: EditSpaceServices['invokeClient'] = useCallback(
+    async (...args) => {
+      await resolveAPIClients();
+
+      return args[0]({
+        spacesManager: services.spacesManager,
+        rolesClient: rolesAPIClientRef.current!,
+        privilegesClient: privilegesClientRef.current!,
+      });
+    },
+    [resolveAPIClients, services.spacesManager]
+  );
+
+  return (
+    <EditSpaceServicesContext.Provider value={{ ...services, invokeClient }}>
+      <EditSpaceStoreContext.Provider value={{ state, dispatch }}>
+        {children}
+      </EditSpaceStoreContext.Provider>
+    </EditSpaceServicesContext.Provider>
+  );
+};
+
+export const useEditSpaceServices = (): EditSpaceServices => {
+  const context = useContext(createEditSpaceServicesContext());
+  if (!context) {
+    throw new Error(
+      'EditSpaceService Context is missing. Ensure the component or React root is wrapped with EditSpaceProvider'
+    );
+  }
+
+  return context;
+};
+
+export const useEditSpaceStore = () => {
+  const context = useContext(createSpaceRolesContext());
+  if (!context) {
+    throw new Error(
+      'EditSpaceStore Context is missing. Ensure the component or React root is wrapped with EditSpaceProvider'
+    );
+  }
+
+  return context;
+};
+
+export const useEditSpaceStoreDispatch = () => {
+  const { dispatch } = useEditSpaceStore();
+  return dispatch;
+};
diff --git a/x-pack/plugins/spaces/public/management/edit_space/roles/component/space_assign_role_privilege_form.test.tsx b/x-pack/plugins/spaces/public/management/edit_space/roles/component/space_assign_role_privilege_form.test.tsx
new file mode 100644
index 0000000000000..f3d6d06c4d643
--- /dev/null
+++ b/x-pack/plugins/spaces/public/management/edit_space/roles/component/space_assign_role_privilege_form.test.tsx
@@ -0,0 +1,204 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import crypto from 'crypto';
+import React from 'react';
+
+import { __IntlProvider as IntlProvider } from '@kbn/i18n-react';
+import type { Role } from '@kbn/security-plugin-types-common';
+import {
+  createRawKibanaPrivileges,
+  kibanaFeatures,
+} from '@kbn/security-role-management-model/src/__fixtures__';
+
+import { PrivilegesRolesForm } from './space_assign_role_privilege_form';
+import type { Space } from '../../../../../common';
+import { createPrivilegeAPIClientMock } from '../../../privilege_api_client.mock';
+import { createRolesAPIClientMock } from '../../../roles_api_client.mock';
+
+const rolesAPIClient = createRolesAPIClientMock();
+const privilegeAPIClient = createPrivilegeAPIClientMock();
+
+const createRole = (roleName: string, kibana: Role['kibana'] = []): Role => {
+  return {
+    name: roleName,
+    elasticsearch: { cluster: [], run_as: [], indices: [] },
+    kibana,
+  };
+};
+
+const space: Space = {
+  id: crypto.randomUUID(),
+  name: 'Odyssey',
+  description: 'Journey vs. Destination',
+  disabledFeatures: [],
+};
+
+const spacesClientsInvocatorMock = jest.fn((fn) =>
+  fn({
+    rolesClient: rolesAPIClient,
+    privilegesClient: privilegeAPIClient,
+  })
+);
+const dispatchMock = jest.fn();
+const onSaveCompleted = jest.fn();
+const closeFlyout = jest.fn();
+
+const renderPrivilegeRolesForm = ({
+  preSelectedRoles,
+}: {
+  preSelectedRoles?: Role[];
+} = {}) => {
+  return render(
+    <IntlProvider locale="en">
+      <PrivilegesRolesForm
+        {...{
+          space,
+          features: kibanaFeatures,
+          closeFlyout,
+          defaultSelected: preSelectedRoles,
+          onSaveCompleted,
+          storeDispatch: dispatchMock,
+          spacesClientsInvocator: spacesClientsInvocatorMock,
+        }}
+      />
+    </IntlProvider>
+  );
+};
+
+describe('PrivilegesRolesForm', () => {
+  let getRolesSpy: jest.SpiedFunction<ReturnType<typeof createRolesAPIClientMock>['getRoles']>;
+  let getAllKibanaPrivilegeSpy: jest.SpiedFunction<
+    ReturnType<typeof createPrivilegeAPIClientMock>['getAll']
+  >;
+
+  beforeAll(() => {
+    getRolesSpy = jest.spyOn(rolesAPIClient, 'getRoles');
+    getAllKibanaPrivilegeSpy = jest.spyOn(privilegeAPIClient, 'getAll');
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders the privilege permission selector disabled when no role is selected', async () => {
+    getRolesSpy.mockResolvedValue([]);
+    getAllKibanaPrivilegeSpy.mockResolvedValue(createRawKibanaPrivileges(kibanaFeatures));
+
+    renderPrivilegeRolesForm();
+
+    await waitFor(() => null);
+
+    ['all', 'read', 'custom'].forEach((privilege) => {
+      expect(screen.getByTestId(`${privilege}-privilege-button`)).toBeDisabled();
+    });
+  });
+
+  it('preselects the privilege of the selected role when one is provided', async () => {
+    getRolesSpy.mockResolvedValue([]);
+    getAllKibanaPrivilegeSpy.mockResolvedValue(createRawKibanaPrivileges(kibanaFeatures));
+
+    const privilege = 'all';
+
+    renderPrivilegeRolesForm({
+      preSelectedRoles: [
+        createRole('test_role_1', [{ base: [privilege], feature: {}, spaces: [space.id] }]),
+      ],
+    });
+
+    await waitFor(() => null);
+
+    expect(screen.getByTestId(`${privilege}-privilege-button`)).toHaveAttribute(
+      'aria-pressed',
+      String(true)
+    );
+  });
+
+  it('displays a warning message when roles with different privilege levels are selected', async () => {
+    getRolesSpy.mockResolvedValue([]);
+    getAllKibanaPrivilegeSpy.mockResolvedValue(createRawKibanaPrivileges(kibanaFeatures));
+
+    const roles: Role[] = [
+      createRole('test_role_1', [{ base: ['all'], feature: {}, spaces: [space.id] }]),
+      createRole('test_role_2', [{ base: ['read'], feature: {}, spaces: [space.id] }]),
+    ];
+
+    renderPrivilegeRolesForm({
+      preSelectedRoles: roles,
+    });
+
+    await waitFor(() => null);
+
+    expect(screen.getByTestId('privilege-conflict-callout')).toBeInTheDocument();
+  });
+
+  describe('applying custom privileges', () => {
+    it('displays the privilege customization form, when custom privilege button is selected', async () => {
+      getRolesSpy.mockResolvedValue([]);
+      getAllKibanaPrivilegeSpy.mockResolvedValue(createRawKibanaPrivileges(kibanaFeatures));
+
+      const roles: Role[] = [
+        createRole('test_role_1', [{ base: ['all'], feature: {}, spaces: [space.id] }]),
+      ];
+
+      renderPrivilegeRolesForm({
+        preSelectedRoles: roles,
+      });
+
+      await waitFor(() => null);
+
+      expect(screen.queryByTestId('rolePrivilegeCustomizationForm')).not.toBeInTheDocument();
+
+      userEvent.click(screen.getByTestId('custom-privilege-button'));
+
+      expect(screen.getByTestId('rolePrivilegeCustomizationForm')).toBeInTheDocument();
+    });
+
+    it('for a selection of roles pre-assigned to a space, the first encountered privilege with a custom privilege is used as the starting point', async () => {
+      getRolesSpy.mockResolvedValue([]);
+      getAllKibanaPrivilegeSpy.mockResolvedValue(createRawKibanaPrivileges(kibanaFeatures));
+
+      const featureIds: string[] = kibanaFeatures.map((kibanaFeature) => kibanaFeature.id);
+
+      const roles: Role[] = [
+        createRole('test_role_1', [{ base: ['all'], feature: {}, spaces: [space.id] }]),
+        createRole('test_role_2', [
+          { base: [], feature: { [featureIds[0]]: ['all'] }, spaces: [space.id] },
+        ]),
+        createRole('test_role_3', [{ base: ['read'], feature: {}, spaces: [space.id] }]),
+        createRole('test_role_4', [{ base: ['read'], feature: {}, spaces: [space.id] }]),
+        createRole('test_role_5', [
+          { base: [], feature: { [featureIds[0]]: ['read'] }, spaces: [space.id] },
+        ]),
+      ];
+
+      renderPrivilegeRolesForm({
+        preSelectedRoles: roles,
+      });
+
+      await waitFor(() => null);
+
+      expect(screen.queryByTestId('rolePrivilegeCustomizationForm')).not.toBeInTheDocument();
+
+      userEvent.click(screen.getByTestId('custom-privilege-button'));
+
+      expect(screen.getByTestId('rolePrivilegeCustomizationForm')).toBeInTheDocument();
+
+      expect(screen.queryByTestId(`${featureIds[0]}_read`)).not.toHaveAttribute(
+        'aria-pressed',
+        String(true)
+      );
+
+      expect(screen.getByTestId(`${featureIds[0]}_all`)).toHaveAttribute(
+        'aria-pressed',
+        String(true)
+      );
+    });
+  });
+});
diff --git a/x-pack/plugins/spaces/public/management/edit_space/roles/component/space_assign_role_privilege_form.tsx b/x-pack/plugins/spaces/public/management/edit_space/roles/component/space_assign_role_privilege_form.tsx
new file mode 100644
index 0000000000000..a8081d29350f7
--- /dev/null
+++ b/x-pack/plugins/spaces/public/management/edit_space/roles/component/space_assign_role_privilege_form.tsx
@@ -0,0 +1,495 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import {
+  EuiButton,
+  EuiButtonEmpty,
+  EuiButtonGroup,
+  EuiCallOut,
+  EuiComboBox,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiFlyoutBody,
+  EuiFlyoutFooter,
+  EuiFlyoutHeader,
+  EuiForm,
+  EuiFormRow,
+  EuiLoadingSpinner,
+  EuiSpacer,
+  EuiText,
+  EuiTitle,
+} from '@elastic/eui';
+import type { EuiComboBoxOptionOption } from '@elastic/eui';
+import type { FC } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+
+import type { KibanaFeature, KibanaFeatureConfig } from '@kbn/features-plugin/common';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n-react';
+import { type RawKibanaPrivileges } from '@kbn/security-authorization-core';
+import type { Role } from '@kbn/security-plugin-types-common';
+import { KibanaPrivileges } from '@kbn/security-role-management-model';
+import { KibanaPrivilegeTable, PrivilegeFormCalculator } from '@kbn/security-ui-components';
+
+import type { Space } from '../../../../../common';
+import type { EditSpaceServices, EditSpaceStore } from '../../provider';
+
+type KibanaRolePrivilege = keyof NonNullable<KibanaFeatureConfig['privileges']> | 'custom';
+
+interface PrivilegesRolesFormProps {
+  space: Space;
+  features: KibanaFeature[];
+  closeFlyout: () => void;
+  onSaveCompleted: () => void;
+  defaultSelected?: Role[];
+  storeDispatch: EditSpaceStore['dispatch'];
+  spacesClientsInvocator: EditSpaceServices['invokeClient'];
+}
+
+const createRolesComboBoxOptions = (roles: Role[]): Array<EuiComboBoxOptionOption<Role>> =>
+  roles.map((role) => ({
+    label: role.name,
+    value: role,
+  }));
+
+export const PrivilegesRolesForm: FC<PrivilegesRolesFormProps> = (props) => {
+  const {
+    space,
+    onSaveCompleted,
+    closeFlyout,
+    features,
+    defaultSelected = [],
+    spacesClientsInvocator,
+    storeDispatch,
+  } = props;
+  const [assigningToRole, setAssigningToRole] = useState(false);
+  const [fetchingDataDeps, setFetchingDataDeps] = useState(false);
+  const [kibanaPrivileges, setKibanaPrivileges] = useState<RawKibanaPrivileges | null>(null);
+  const [spaceUnallocatedRoles, setSpaceUnallocatedRole] = useState<Role[]>([]);
+  const [selectedRoles, setSelectedRoles] = useState<ReturnType<typeof createRolesComboBoxOptions>>(
+    createRolesComboBoxOptions(defaultSelected)
+  );
+  const [roleCustomizationAnchor, setRoleCustomizationAnchor] = useState(() => {
+    // support instance where the form is opened with roles already preselected
+    const defaultAnchor = selectedRoles?.[0]?.value;
+    const privilegeIndex = defaultAnchor?.kibana.findIndex(({ spaces }) =>
+      spaces.includes(space.id!)
+    );
+
+    return {
+      value: defaultAnchor,
+      privilegeIndex: (privilegeIndex || -1) >= 0 ? privilegeIndex : 0,
+    };
+  });
+
+  const selectedRolesCombinedPrivileges = useMemo(() => {
+    const combinedPrivilege = new Set(
+      selectedRoles.reduce((result, selectedRole) => {
+        let match: KibanaRolePrivilege[] = [];
+        for (let i = 0; i < selectedRole.value!.kibana.length; i++) {
+          const { spaces, base } = selectedRole.value!.kibana[i];
+          if (spaces.includes(space.id!)) {
+            match = (base.length ? base : ['custom']) as [KibanaRolePrivilege];
+            break;
+          }
+        }
+
+        return result.concat(match);
+      }, [] as KibanaRolePrivilege[])
+    );
+
+    return Array.from(combinedPrivilege);
+  }, [selectedRoles, space.id]);
+
+  const [roleSpacePrivilege, setRoleSpacePrivilege] = useState<KibanaRolePrivilege>(
+    !selectedRoles.length || !selectedRolesCombinedPrivileges.length
+      ? 'read'
+      : selectedRolesCombinedPrivileges[0]
+  );
+
+  useEffect(() => {
+    async function fetchRequiredData(spaceId: string) {
+      setFetchingDataDeps(true);
+
+      const [systemRoles, _kibanaPrivileges] = await spacesClientsInvocator((clients) =>
+        Promise.all([
+          clients.rolesClient.getRoles(),
+          clients.privilegesClient.getAll({ includeActions: true, respectLicenseLevel: false }),
+        ])
+      );
+
+      // exclude roles that are already assigned to this space
+      setSpaceUnallocatedRole(
+        systemRoles.filter(
+          (role) =>
+            !role.metadata?._reserved &&
+            (!role.kibana.length ||
+              role.kibana.every((rolePrivileges) => {
+                return !(
+                  rolePrivileges.spaces.includes(spaceId) || rolePrivileges.spaces.includes('*')
+                );
+              }))
+        )
+      );
+
+      setKibanaPrivileges(_kibanaPrivileges);
+    }
+
+    fetchRequiredData(space.id!).finally(() => setFetchingDataDeps(false));
+  }, [space.id, spacesClientsInvocator]);
+
+  const computeRoleCustomizationAnchor = useCallback(
+    (spaceId: string, _selectedRoles: ReturnType<typeof createRolesComboBoxOptions>) => {
+      let anchor: typeof roleCustomizationAnchor | null = null;
+
+      for (let i = 0; i < _selectedRoles.length; i++) {
+        let role;
+
+        if ((role = _selectedRoles[i].value)) {
+          for (let j = 0; j < _selectedRoles[i].value!.kibana.length; j++) {
+            let privilegeIterationIndexValue;
+
+            if ((privilegeIterationIndexValue = role.kibana[j])) {
+              const { spaces, base } = privilegeIterationIndexValue;
+              /*
+               * check to see if current role already has a custom privilege, if it does we use that as the starting point for all customizations
+               * that will happen to all the other selected roles and exit
+               */
+              if (spaces.includes(spaceId) && !base.length) {
+                anchor = {
+                  value: structuredClone(role),
+                  privilegeIndex: j,
+                };
+
+                break;
+              }
+            }
+          }
+        }
+
+        if (anchor) break;
+
+        // provide a fallback anchor if no suitable anchor was discovered, and we have reached the end of selected roles iteration
+        if (!anchor && role && i === _selectedRoles.length - 1) {
+          const fallbackRole = structuredClone(role);
+
+          const spacePrivilegeIndex = fallbackRole.kibana.findIndex(({ spaces }) =>
+            spaces.includes(spaceId)
+          );
+
+          anchor = {
+            value: fallbackRole,
+            privilegeIndex:
+              (spacePrivilegeIndex || -1) >= 0
+                ? spacePrivilegeIndex
+                : (fallbackRole?.kibana?.push?.({
+                    spaces: [spaceId],
+                    base: [],
+                    feature: {},
+                  }) || 0) - 1,
+          };
+        }
+      }
+
+      return anchor;
+    },
+    []
+  );
+
+  const onRoleSpacePrivilegeChange = useCallback(
+    (spacePrivilege: KibanaRolePrivilege) => {
+      if (spacePrivilege === 'custom') {
+        const _roleCustomizationAnchor = computeRoleCustomizationAnchor(space.id, selectedRoles);
+        if (_roleCustomizationAnchor) setRoleCustomizationAnchor(_roleCustomizationAnchor);
+      }
+
+      // persist selected privilege for UI
+      setRoleSpacePrivilege(spacePrivilege);
+    },
+    [computeRoleCustomizationAnchor, selectedRoles, space.id]
+  );
+
+  const assignRolesToSpace = useCallback(async () => {
+    try {
+      setAssigningToRole(true);
+
+      const newPrivileges = {
+        base: roleSpacePrivilege === 'custom' ? [] : [roleSpacePrivilege],
+        feature:
+          roleSpacePrivilege === 'custom'
+            ? roleCustomizationAnchor.value?.kibana[roleCustomizationAnchor.privilegeIndex!]
+                .feature!
+            : {},
+      };
+
+      const updatedRoles = structuredClone(selectedRoles).map((selectedRole) => {
+        let found = false;
+
+        for (let i = 0; i < selectedRole.value!.kibana.length; i++) {
+          const { spaces } = selectedRole.value!.kibana[i];
+
+          if (spaces.includes(space.id!)) {
+            if (spaces.length > 1) {
+              // space belongs to a collection of other spaces that share the same privileges,
+              // so we have to assign the new privilege to apply only to the specific space
+              // hence we remove the space from the shared privilege
+              spaces.splice(i, 1);
+            } else {
+              Object.assign(selectedRole.value!.kibana[i], newPrivileges);
+              found = true;
+            }
+
+            break;
+          }
+        }
+
+        if (!found) {
+          selectedRole.value?.kibana.push(Object.assign({ spaces: [space.id] }, newPrivileges));
+        }
+
+        return selectedRole.value!;
+      });
+
+      await spacesClientsInvocator((clients) =>
+        clients.rolesClient
+          .bulkUpdateRoles({ rolesUpdate: updatedRoles })
+          .then(setAssigningToRole.bind(null, false))
+      );
+
+      storeDispatch({
+        type: 'update_roles',
+        payload: updatedRoles,
+      });
+
+      onSaveCompleted();
+    } catch (err) {
+      // Handle resulting error
+    }
+  }, [
+    selectedRoles,
+    spacesClientsInvocator,
+    storeDispatch,
+    onSaveCompleted,
+    space.id,
+    roleSpacePrivilege,
+    roleCustomizationAnchor,
+  ]);
+
+  const getForm = () => {
+    return (
+      <EuiForm component="form" fullWidth>
+        <EuiFormRow label="Select a role(s)">
+          <EuiComboBox
+            data-test-subj="roleSelectionComboBox"
+            aria-label={i18n.translate('xpack.spaces.management.spaceDetails.roles.selectRoles', {
+              defaultMessage: 'Select role to assign to the {spaceName} space',
+              values: { spaceName: space.name },
+            })}
+            isLoading={fetchingDataDeps}
+            placeholder={i18n.translate(
+              'xpack.spaces.management.spaceDetails.roles.selectRolesPlaceholder',
+              {
+                defaultMessage: 'Select roles',
+              }
+            )}
+            options={createRolesComboBoxOptions(spaceUnallocatedRoles)}
+            selectedOptions={selectedRoles}
+            onChange={(value) => setSelectedRoles(value)}
+            fullWidth
+          />
+        </EuiFormRow>
+        <>
+          {selectedRolesCombinedPrivileges.length > 1 && (
+            <EuiFormRow>
+              <EuiCallOut
+                color="warning"
+                iconType="iInCircle"
+                data-test-subj="privilege-conflict-callout"
+                title={i18n.translate(
+                  'xpack.spaces.management.spaceDetails.roles.assign.privilegeConflictMsg.title',
+                  {
+                    defaultMessage: 'Selected roles have different privileges granted',
+                  }
+                )}
+              >
+                {i18n.translate(
+                  'xpack.spaces.management.spaceDetails.roles.assign.privilegeConflictMsg.description',
+                  {
+                    defaultMessage:
+                      'Updating the settings here in a bulk will override current individual settings.',
+                  }
+                )}
+              </EuiCallOut>
+            </EuiFormRow>
+          )}
+        </>
+        <EuiFormRow
+          helpText={i18n.translate(
+            'xpack.spaces.management.spaceDetails.roles.assign.privilegesHelpText',
+            {
+              defaultMessage:
+                'Assign the privilege you wish to grant to all present and future features across this space',
+            }
+          )}
+        >
+          <EuiButtonGroup
+            data-test-subj="privilegeSelectionSwitch"
+            legend="select the privilege for the features enabled in this space"
+            isDisabled={!Boolean(selectedRoles.length)}
+            options={[
+              {
+                id: 'all',
+                label: i18n.translate(
+                  'xpack.spaces.management.spaceDetails.roles.assign.privileges.all',
+                  {
+                    defaultMessage: 'All',
+                  }
+                ),
+              },
+              {
+                id: 'read',
+                label: i18n.translate(
+                  'xpack.spaces.management.spaceDetails.roles.assign.privileges.read',
+                  { defaultMessage: 'Read' }
+                ),
+              },
+              {
+                id: 'custom',
+                label: i18n.translate(
+                  'xpack.spaces.management.spaceDetails.roles.assign.privileges.custom',
+                  { defaultMessage: 'Customize' }
+                ),
+              },
+            ].map((privilege) => ({
+              ...privilege,
+              'data-test-subj': `${privilege.id}-privilege-button`,
+            }))}
+            color="primary"
+            idSelected={roleSpacePrivilege}
+            onChange={(id) => onRoleSpacePrivilegeChange(id as KibanaRolePrivilege)}
+            buttonSize="compressed"
+            isFullWidth
+          />
+        </EuiFormRow>
+        {roleSpacePrivilege === 'custom' && (
+          <EuiFormRow
+            data-test-subj="rolePrivilegeCustomizationForm"
+            label={i18n.translate(
+              'xpack.spaces.management.spaceDetails.roles.assign.privileges.customizeLabelText',
+              { defaultMessage: 'Customize by feature' }
+            )}
+          >
+            <>
+              <EuiText size="xs">
+                <p>
+                  <FormattedMessage
+                    id="xpack.spaces.management.spaceDetails.roles.assign.privileges.customizeDescriptionText"
+                    defaultMessage="Increase privilege levels per feature basis. Some features might be hidden by the
+                    space or affected by a global space privilege"
+                  />
+                </p>
+              </EuiText>
+              <EuiSpacer />
+              <React.Fragment>
+                {!kibanaPrivileges ? (
+                  <EuiLoadingSpinner size="l" />
+                ) : (
+                  <KibanaPrivilegeTable
+                    role={roleCustomizationAnchor.value!}
+                    privilegeIndex={roleCustomizationAnchor.privilegeIndex}
+                    onChange={(featureId, selectedPrivileges) => {
+                      // apply selected changes only to customization anchor, this way we delay reconciling the intending privileges
+                      // of the selected roles till we decide to commit the changes chosen
+                      setRoleCustomizationAnchor(({ value, privilegeIndex }) => {
+                        let privilege;
+
+                        if ((privilege = value!.kibana?.[privilegeIndex!])) {
+                          privilege.feature[featureId] = selectedPrivileges;
+                        }
+
+                        return { value, privilegeIndex };
+                      });
+                    }}
+                    onChangeAll={(privilege) => {
+                      // dummy function we wouldn't be using this
+                    }}
+                    kibanaPrivileges={new KibanaPrivileges(kibanaPrivileges, features)}
+                    privilegeCalculator={
+                      new PrivilegeFormCalculator(
+                        new KibanaPrivileges(kibanaPrivileges, features),
+                        roleCustomizationAnchor.value!
+                      )
+                    }
+                    allSpacesSelected={false}
+                    canCustomizeSubFeaturePrivileges={false}
+                  />
+                )}
+              </React.Fragment>
+            </>
+          </EuiFormRow>
+        )}
+      </EuiForm>
+    );
+  };
+
+  const getSaveButton = () => {
+    return (
+      <EuiButton
+        fill
+        isLoading={assigningToRole}
+        onClick={() => assignRolesToSpace()}
+        data-test-subj={'createRolesPrivilegeButton'}
+      >
+        {i18n.translate('xpack.spaces.management.spaceDetails.roles.assignRoleButton', {
+          defaultMessage: 'Assign roles',
+        })}
+      </EuiButton>
+    );
+  };
+
+  return (
+    <React.Fragment>
+      <EuiFlyoutHeader hasBorder>
+        <EuiTitle size="m">
+          <h2>
+            {i18n.translate('xpack.spaces.management.spaceDetails.roles.assign.privileges.custom', {
+              defaultMessage: 'Assign role to {spaceName}',
+              values: { spaceName: space.name },
+            })}
+          </h2>
+        </EuiTitle>
+        <EuiSpacer size="s" />
+        <EuiText size="s">
+          <p>
+            <FormattedMessage
+              id="xpack.spaces.management.spaceDetails.privilegeForm.heading"
+              defaultMessage="Roles will be granted access to the current space according to their default privileges. Use the &lsquo;Customize&rsquo; option to override default privileges."
+            />
+          </p>
+        </EuiText>
+      </EuiFlyoutHeader>
+      <EuiFlyoutBody>{getForm()}</EuiFlyoutBody>
+      <EuiFlyoutFooter>
+        <EuiFlexGroup justifyContent="spaceBetween">
+          <EuiFlexItem grow={false}>
+            <EuiButtonEmpty
+              iconType="cross"
+              onClick={closeFlyout}
+              flush="left"
+              data-test-subj={'cancelRolesPrivilegeButton'}
+            >
+              {i18n.translate('xpack.spaces.management.spaceDetails.roles.cancelRoleButton', {
+                defaultMessage: 'Cancel',
+              })}
+            </EuiButtonEmpty>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>{getSaveButton()}</EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiFlyoutFooter>
+    </React.Fragment>
+  );
+};
diff --git a/x-pack/plugins/spaces/public/management/edit_space/roles/component/space_assigned_roles_table.tsx b/x-pack/plugins/spaces/public/management/edit_space/roles/component/space_assigned_roles_table.tsx
new file mode 100644
index 0000000000000..df6cdcd7d3e91
--- /dev/null
+++ b/x-pack/plugins/spaces/public/management/edit_space/roles/component/space_assigned_roles_table.tsx
@@ -0,0 +1,486 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import {
+  EuiBadge,
+  EuiButton,
+  EuiButtonEmpty,
+  EuiContextMenu,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiHorizontalRule,
+  EuiIcon,
+  EuiInMemoryTable,
+  EuiPopover,
+  EuiText,
+  EuiTextColor,
+} from '@elastic/eui';
+import type {
+  CriteriaWithPagination,
+  EuiBasicTableColumn,
+  EuiInMemoryTableProps,
+  EuiSearchBarProps,
+  EuiTableFieldDataColumnType,
+  EuiTableSelectionType,
+} from '@elastic/eui';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+
+import { i18n } from '@kbn/i18n';
+import type { Role } from '@kbn/security-plugin-types-common';
+
+import type { Space } from '../../../../../common';
+
+interface ISpaceAssignedRolesTableProps {
+  isReadOnly: boolean;
+  currentSpace: Space;
+  assignedRoles: Map<Role['name'], Role>;
+  onClickAssignNewRole: () => Promise<void>;
+  onClickBulkEdit: (selectedRoles: Role[]) => void;
+  onClickBulkRemove: (selectedRoles: Role[]) => void;
+  onClickRowEditAction: (role: Role) => void;
+  onClickRowRemoveAction: (role: Role) => void;
+}
+
+/**
+ * @description checks if the passed role qualifies as one that can
+ * be edited by a user with sufficient permissions
+ */
+export const isEditableRole = (role: Role) => {
+  return !(
+    role.metadata?._reserved ||
+    role.kibana.reduce((acc, cur) => {
+      return cur.spaces.includes('*') || acc;
+    }, false)
+  );
+};
+
+const getTableColumns = ({
+  isReadOnly,
+  currentSpace,
+  onClickRowEditAction,
+  onClickRowRemoveAction,
+}: Pick<
+  ISpaceAssignedRolesTableProps,
+  'isReadOnly' | 'onClickRowEditAction' | 'onClickRowRemoveAction' | 'currentSpace'
+>) => {
+  const columns: Array<EuiBasicTableColumn<Role>> = [
+    {
+      field: 'name',
+      name: i18n.translate('xpack.spaces.management.spaceDetails.rolesTable.column.name.title', {
+        defaultMessage: 'Role',
+      }),
+    },
+    {
+      field: 'privileges',
+      name: i18n.translate(
+        'xpack.spaces.management.spaceDetails.rolesTable.column.privileges.title',
+        {
+          defaultMessage: 'Privileges',
+        }
+      ),
+      render: (_, record) => {
+        const uniquePrivilege = new Set(
+          record.kibana.reduce((privilegeBaseTuple, kibanaPrivilege) => {
+            if (
+              kibanaPrivilege.spaces.includes(currentSpace.id) ||
+              kibanaPrivilege.spaces.includes('*')
+            ) {
+              if (!kibanaPrivilege.base.length) {
+                privilegeBaseTuple.push(
+                  i18n.translate(
+                    'xpack.spaces.management.spaceDetails.rolesTable.column.privileges.customPrivilege',
+                    {
+                      defaultMessage: 'custom',
+                    }
+                  )
+                );
+              } else {
+                return privilegeBaseTuple.concat(kibanaPrivilege.base);
+              }
+            }
+
+            return privilegeBaseTuple;
+          }, [] as string[])
+        );
+
+        return Array.from(uniquePrivilege).join(',');
+      },
+    },
+    {
+      field: 'metadata',
+      name: i18n.translate(
+        'xpack.spaces.management.spaceDetails.rolesTable.column.roleType.title',
+        {
+          defaultMessage: 'Role type',
+        }
+      ),
+      render: (_value: Role['metadata']) => {
+        return React.createElement(EuiBadge, {
+          children: _value?._reserved
+            ? i18n.translate(
+                'xpack.spaces.management.spaceDetails.rolesTable.column.roleType.reserved',
+                {
+                  defaultMessage: 'Reserved',
+                }
+              )
+            : i18n.translate(
+                'xpack.spaces.management.spaceDetails.rolesTable.column.roleType.custom',
+                {
+                  defaultMessage: 'Custom',
+                }
+              ),
+          color: _value?._reserved ? undefined : 'success',
+        });
+      },
+    },
+  ];
+
+  if (!isReadOnly) {
+    columns.push({
+      name: 'Actions',
+      actions: [
+        {
+          type: 'icon',
+          icon: 'lock',
+          href: '#',
+          target: '_self',
+          name: i18n.translate(
+            'xpack.spaces.management.spaceDetails.rolesTable.column.actions.reservedIndictor.title',
+            {
+              defaultMessage: 'Reserved',
+            }
+          ),
+          description: i18n.translate(
+            'xpack.spaces.management.spaceDetails.rolesTable.column.actions.reservedIndictor.description',
+            {
+              defaultMessage: 'No action to perform, this role is reserved',
+            }
+          ),
+          isPrimary: true,
+          enabled: () => false,
+          available: (rowRecord) => !isEditableRole(rowRecord),
+        },
+        {
+          type: 'icon',
+          icon: 'pencil',
+          name: i18n.translate(
+            'xpack.spaces.management.spaceDetails.rolesTable.column.actions.edit.title',
+            {
+              defaultMessage: 'Remove from space',
+            }
+          ),
+          isPrimary: true,
+          description: i18n.translate(
+            'xpack.spaces.management.spaceDetails.rolesTable.column.actions.edit.description',
+            {
+              defaultMessage:
+                'Click this action to edit the role privileges of this user for this space.',
+            }
+          ),
+          showOnHover: true,
+          available: (rowRecord) => isEditableRole(rowRecord),
+          onClick: onClickRowEditAction,
+        },
+        {
+          isPrimary: true,
+          type: 'icon',
+          icon: 'trash',
+          color: 'danger',
+          name: i18n.translate(
+            'xpack.spaces.management.spaceDetails.rolesTable.column.actions.remove.title',
+            {
+              defaultMessage: 'Remove from space',
+            }
+          ),
+          description: i18n.translate(
+            'xpack.spaces.management.spaceDetails.rolesTable.column.actions.edit.description',
+            {
+              defaultMessage: 'Click this action to remove the user from this space.',
+            }
+          ),
+          showOnHover: true,
+          available: (rowRecord) => isEditableRole(rowRecord),
+          onClick: onClickRowRemoveAction,
+        },
+      ],
+    });
+  }
+
+  return columns;
+};
+
+const getRowProps = (item: Role) => {
+  const { name } = item;
+  return {
+    'data-test-subj': `space-role-row-${name}`,
+    onClick: () => {},
+  };
+};
+
+const getCellProps = (item: Role, column: EuiTableFieldDataColumnType<Role>) => {
+  const { name } = item;
+  const { field } = column;
+  return {
+    'data-test-subj': `space-role-cell-${name}-${String(field)}`,
+    textOnly: true,
+  };
+};
+
+export const SpaceAssignedRolesTable = ({
+  isReadOnly,
+  assignedRoles,
+  currentSpace,
+  onClickAssignNewRole,
+  onClickBulkEdit,
+  onClickBulkRemove,
+  onClickRowEditAction,
+  onClickRowRemoveAction,
+}: ISpaceAssignedRolesTableProps) => {
+  const tableColumns = useMemo(
+    () =>
+      getTableColumns({ isReadOnly, onClickRowEditAction, onClickRowRemoveAction, currentSpace }),
+    [currentSpace, isReadOnly, onClickRowEditAction, onClickRowRemoveAction]
+  );
+  const [rolesInView, setRolesInView] = useState<Role[]>([]);
+  const [selectedRoles, setSelectedRoles] = useState<Role[]>([]);
+  const [isBulkActionContextOpen, setBulkActionContextOpen] = useState(false);
+  const [pagination, setPagination] = useState<CriteriaWithPagination<Role>['page']>({
+    index: 0,
+    size: 10,
+  });
+
+  useEffect(() => {
+    setRolesInView(Array.from(assignedRoles.values()));
+  }, [assignedRoles]);
+
+  const onSearchQueryChange = useCallback<NonNullable<NonNullable<EuiSearchBarProps['onChange']>>>(
+    ({ query }) => {
+      const _assignedRolesTransformed = Array.from(assignedRoles.values());
+
+      if (query?.text) {
+        setRolesInView(
+          _assignedRolesTransformed.filter((role) => role.name.includes(query.text.toLowerCase()))
+        );
+      } else {
+        setRolesInView(_assignedRolesTransformed);
+      }
+    },
+    [assignedRoles]
+  );
+
+  const searchElementDefinition = useMemo<EuiSearchBarProps>(() => {
+    return {
+      box: {
+        incremental: true,
+        placeholder: i18n.translate(
+          'xpack.spaces.management.spaceDetails.roles.searchField.placeholder',
+          { defaultMessage: 'Search' }
+        ),
+      },
+      onChange: onSearchQueryChange,
+      toolsRight: (
+        <>
+          {!isReadOnly && (
+            <EuiFlexItem grow={false} color="primary">
+              <EuiButton iconType="plusInCircle" onClick={onClickAssignNewRole}>
+                {i18n.translate('xpack.spaces.management.spaceDetails.roles.assign', {
+                  defaultMessage: 'Assign role',
+                })}
+              </EuiButton>
+            </EuiFlexItem>
+          )}
+        </>
+      ),
+    };
+  }, [isReadOnly, onClickAssignNewRole, onSearchQueryChange]);
+
+  const tableHeader = useMemo<EuiInMemoryTableProps<Role>['childrenBetween']>(() => {
+    const pageSize = pagination.size;
+    const pageIndex = pagination.index;
+
+    const selectableRoles = rolesInView.filter((role) => isEditableRole(role));
+
+    return (
+      <EuiFlexGroup direction="column" gutterSize="xs">
+        <EuiFlexItem>
+          <EuiFlexGroup justifyContent="flexStart" alignItems="center">
+            <EuiFlexItem grow={false}>
+              <EuiText size="s">
+                <span>
+                  <EuiTextColor color="subdued">
+                    {i18n.translate(
+                      'xpack.spaces.management.spaceDetails.rolesTable.selectedStatusInfo',
+                      {
+                        defaultMessage:
+                          'Showing: {pageItemLength} of {rolesInViewCount} | Selected: {selectedCount} roles',
+                        values: {
+                          pageItemLength: Math.floor(
+                            rolesInView.length / (pageSize * (pageIndex + 1))
+                          )
+                            ? pageSize * (pageIndex + 1)
+                            : rolesInView.length % pageSize,
+                          rolesInViewCount: rolesInView.length,
+                          selectedCount: selectedRoles.length,
+                        },
+                      }
+                    )}
+                  </EuiTextColor>
+                </span>
+              </EuiText>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiPopover
+                isOpen={isBulkActionContextOpen}
+                closePopover={setBulkActionContextOpen.bind(null, false)}
+                anchorPosition="downCenter"
+                button={
+                  <EuiButtonEmpty
+                    size="s"
+                    iconSide="right"
+                    iconType="arrowDown"
+                    disabled={!selectedRoles.length}
+                    onClick={setBulkActionContextOpen.bind(null, true)}
+                  >
+                    {i18n.translate(
+                      'xpack.spaces.management.spaceDetails.rolesTable.bulkActions.contextMenuOpener',
+                      {
+                        defaultMessage: 'Bulk actions',
+                      }
+                    )}
+                  </EuiButtonEmpty>
+                }
+              >
+                <EuiContextMenu
+                  size="s"
+                  initialPanelId={0}
+                  panels={[
+                    {
+                      id: 0,
+                      size: 's',
+                      width: 180,
+                      items: [
+                        {
+                          icon: <EuiIcon type="pencil" />,
+                          name: i18n.translate(
+                            'xpack.spaces.management.spaceDetails.rolesTable.bulkActions.editPrivilege',
+                            {
+                              defaultMessage: 'Edit privileges',
+                            }
+                          ),
+                          onClick: async () => {
+                            onClickBulkEdit(selectedRoles);
+                            setBulkActionContextOpen(false);
+                          },
+                        },
+                        {
+                          icon: <EuiIcon type="trash" color="danger" />,
+                          name: (
+                            <EuiTextColor color="danger">
+                              {i18n.translate(
+                                'xpack.spaces.management.spaceDetails.rolesTable.bulkActions.remove',
+                                { defaultMessage: 'Remove from space' }
+                              )}
+                            </EuiTextColor>
+                          ),
+                          onClick: async () => {
+                            onClickBulkRemove(selectedRoles);
+                            setBulkActionContextOpen(false);
+                          },
+                        },
+                      ],
+                    },
+                  ]}
+                />
+              </EuiPopover>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              {Boolean(selectableRoles.length) &&
+                React.createElement(EuiButtonEmpty, {
+                  size: 's',
+                  ...(Boolean(selectedRoles.length)
+                    ? {
+                        iconType: 'crossInCircle',
+                        onClick: setSelectedRoles.bind(null, []),
+                        children: i18n.translate(
+                          'xpack.spaces.management.spaceDetails.rolesTable.clearRolesSelection',
+                          {
+                            defaultMessage: 'Clear selection',
+                          }
+                        ),
+                      }
+                    : {
+                        iconType: 'pagesSelect',
+                        onClick: setSelectedRoles.bind(null, selectableRoles),
+                        children: i18n.translate(
+                          'xpack.spaces.management.spaceDetails.rolesTable.selectAllRoles',
+                          {
+                            defaultMessage:
+                              'Select {count, plural, one {role} other {all {count} roles}}',
+                            values: {
+                              count: selectableRoles.length,
+                            },
+                          }
+                        ),
+                      }),
+                })}
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiHorizontalRule margin="none" style={{ height: 1 }} />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    );
+  }, [
+    isBulkActionContextOpen,
+    onClickBulkEdit,
+    onClickBulkRemove,
+    pagination.index,
+    pagination.size,
+    rolesInView,
+    selectedRoles,
+  ]);
+
+  const onTableChange = ({ page }: CriteriaWithPagination<Role>) => {
+    setPagination(page);
+  };
+
+  const onSelectionChange = (selection: Role[]) => {
+    setSelectedRoles(selection);
+  };
+
+  const selection: EuiTableSelectionType<Role> = {
+    selected: selectedRoles,
+    selectable: (role: Role) => isEditableRole(role),
+    selectableMessage: (selectable: boolean, role: Role) =>
+      !selectable ? `${role.name} is reserved` : `Select ${role.name}`,
+    onSelectionChange,
+  };
+
+  return (
+    <EuiFlexGroup direction="column" gutterSize="none">
+      <EuiFlexItem>
+        <EuiInMemoryTable<Role>
+          search={searchElementDefinition}
+          childrenBetween={tableHeader}
+          itemId="name"
+          columns={tableColumns}
+          items={rolesInView}
+          rowProps={getRowProps}
+          cellProps={getCellProps}
+          selection={selection}
+          pagination={{
+            pageSize: pagination.size,
+            pageIndex: pagination.index,
+            pageSizeOptions: [50, 25, 10],
+          }}
+          onChange={onTableChange}
+        />
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};
diff --git a/x-pack/plugins/spaces/public/management/lib/validate_space.ts b/x-pack/plugins/spaces/public/management/lib/validate_space.ts
index 9a9ae0cbe98fd..002db631c155c 100644
--- a/x-pack/plugins/spaces/public/management/lib/validate_space.ts
+++ b/x-pack/plugins/spaces/public/management/lib/validate_space.ts
@@ -11,7 +11,7 @@ import { i18n } from '@kbn/i18n';
 
 import { isValidSpaceIdentifier } from './space_identifier_utils';
 import { isReservedSpace } from '../../../common/is_reserved_space';
-import type { FormValues } from '../edit_space/manage_space_page';
+import type { FormValues } from '../create_space';
 
 interface SpaceValidatorOptions {
   shouldValidate?: boolean;
diff --git a/x-pack/plugins/spaces/public/management/privilege_api_client.mock.ts b/x-pack/plugins/spaces/public/management/privilege_api_client.mock.ts
new file mode 100644
index 0000000000000..a8351e2d88ad5
--- /dev/null
+++ b/x-pack/plugins/spaces/public/management/privilege_api_client.mock.ts
@@ -0,0 +1,18 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import type { PrivilegesAPIClientPublicContract } from '@kbn/security-plugin-types-public';
+
+export const createPrivilegeAPIClientMock = (): PrivilegesAPIClientPublicContract => {
+  return {
+    getAll: jest.fn(),
+  };
+};
+
+export const getPrivilegeAPIClientMock = jest
+  .fn()
+  .mockResolvedValue(createPrivilegeAPIClientMock());
diff --git a/x-pack/plugins/spaces/public/management/roles_api_client.mock.ts b/x-pack/plugins/spaces/public/management/roles_api_client.mock.ts
index dd996814f9e51..66a356b3fdb75 100644
--- a/x-pack/plugins/spaces/public/management/roles_api_client.mock.ts
+++ b/x-pack/plugins/spaces/public/management/roles_api_client.mock.ts
@@ -13,6 +13,7 @@ export const createRolesAPIClientMock = (): RolesAPIClient => {
     getRole: jest.fn(),
     saveRole: jest.fn(),
     deleteRole: jest.fn(),
+    bulkUpdateRoles: jest.fn(),
   };
 };
 
diff --git a/x-pack/plugins/spaces/public/management/spaces_grid/spaces_grid_page.tsx b/x-pack/plugins/spaces/public/management/spaces_grid/spaces_grid_page.tsx
index 95ef9a563162f..f85fef1d04a6d 100644
--- a/x-pack/plugins/spaces/public/management/spaces_grid/spaces_grid_page.tsx
+++ b/x-pack/plugins/spaces/public/management/spaces_grid/spaces_grid_page.tsx
@@ -251,6 +251,9 @@ export class SpacesGridPage extends Component<Props, State> {
   };
 
   public getColumnConfig() {
+    const { activeSpace, features } = this.state;
+    const { solution: activeSolution } = activeSpace ?? {};
+
     const config: Array<EuiBasicTableColumn<Space>> = [
       {
         field: 'initials',
@@ -284,7 +287,7 @@ export class SpacesGridPage extends Component<Props, State> {
                 {value}
               </EuiLink>
             </EuiFlexItem>
-            {this.state.activeSpace?.name === rowRecord.name && (
+            {activeSpace?.name === rowRecord.name && (
               <EuiFlexItem grow={false}>
                 <EuiBadge color="primary" data-test-subj={`spacesListCurrentBadge-${rowRecord.id}`}>
                   {i18n.translate('xpack.spaces.management.spacesGridPage.currentSpaceMarkerText', {
@@ -306,17 +309,21 @@ export class SpacesGridPage extends Component<Props, State> {
         truncateText: true,
         width: '30%',
       },
-      {
+    ];
+
+    const shouldShowFeaturesColumn = !activeSolution || activeSolution === 'classic';
+    if (shouldShowFeaturesColumn) {
+      config.push({
         field: 'disabledFeatures',
         name: i18n.translate('xpack.spaces.management.spacesGridPage.featuresColumnName', {
           defaultMessage: 'Features visible',
         }),
         sortable: (space: Space) => {
-          return getEnabledFeatures(this.state.features, space).length;
+          return getEnabledFeatures(features, space).length;
         },
         render: (_disabledFeatures: string[], rowRecord: Space) => {
-          const enabledFeatureCount = getEnabledFeatures(this.state.features, rowRecord).length;
-          if (enabledFeatureCount === this.state.features.length) {
+          const enabledFeatureCount = getEnabledFeatures(features, rowRecord).length;
+          if (enabledFeatureCount === features.length) {
             return (
               <FormattedMessage
                 id="xpack.spaces.management.spacesGridPage.allFeaturesEnabled"
@@ -326,7 +333,7 @@ export class SpacesGridPage extends Component<Props, State> {
           }
           if (enabledFeatureCount === 0) {
             return (
-              <EuiText color={'danger'}>
+              <EuiText color={'danger'} size="s">
                 <FormattedMessage
                   id="xpack.spaces.management.spacesGridPage.noFeaturesEnabled"
                   defaultMessage="No features visible"
@@ -340,26 +347,27 @@ export class SpacesGridPage extends Component<Props, State> {
               defaultMessage="{enabledFeatureCount} / {totalFeatureCount}"
               values={{
                 enabledFeatureCount,
-                totalFeatureCount: this.state.features.length,
+                totalFeatureCount: features.length,
               }}
             />
           );
         },
+      });
+    }
+
+    config.push({
+      field: 'id',
+      name: i18n.translate('xpack.spaces.management.spacesGridPage.identifierColumnName', {
+        defaultMessage: 'Identifier',
+      }),
+      sortable: true,
+      render(id: string) {
+        if (id === DEFAULT_SPACE_ID) {
+          return '';
+        }
+        return id;
       },
-      {
-        field: 'id',
-        name: i18n.translate('xpack.spaces.management.spacesGridPage.identifierColumnName', {
-          defaultMessage: 'Identifier',
-        }),
-        sortable: true,
-        render(id: string) {
-          if (id === DEFAULT_SPACE_ID) {
-            return '';
-          }
-          return id;
-        },
-      },
-    ];
+    });
 
     if (this.props.allowSolutionVisibility) {
       config.push({
@@ -404,7 +412,7 @@ export class SpacesGridPage extends Component<Props, State> {
             defaultMessage: 'Switch',
           }),
           description: (rowRecord) =>
-            this.state.activeSpace?.name !== rowRecord.name
+            activeSpace?.name !== rowRecord.name
               ? i18n.translate(
                   'xpack.spaces.management.spacesGridPage.switchSpaceActionDescription',
                   {
@@ -428,7 +436,7 @@ export class SpacesGridPage extends Component<Props, State> {
               rowRecord.id,
               `${ENTER_SPACE_PATH}?next=/app/management/kibana/spaces/`
             ),
-          enabled: (rowRecord) => this.state.activeSpace?.name !== rowRecord.name,
+          enabled: (rowRecord) => activeSpace?.name !== rowRecord.name,
           'data-test-subj': (rowRecord) => `${rowRecord.name}-switchSpace`,
         },
         {
diff --git a/x-pack/plugins/spaces/public/management/spaces_management_app.test.tsx b/x-pack/plugins/spaces/public/management/spaces_management_app.test.tsx
index 61619c499181c..85a79d761dc3f 100644
--- a/x-pack/plugins/spaces/public/management/spaces_management_app.test.tsx
+++ b/x-pack/plugins/spaces/public/management/spaces_management_app.test.tsx
@@ -9,8 +9,17 @@ jest.mock('./spaces_grid', () => ({
   SpacesGridPage: (props: any) => `Spaces Page: ${JSON.stringify(props)}`,
 }));
 
+jest.mock('./create_space', () => ({
+  CreateSpacePage: (props: any) => {
+    if (props.spacesManager && props.onLoadSpace) {
+      props.spacesManager.getSpace().then((space: any) => props.onLoadSpace(space));
+    }
+    return `Spaces Create Page: ${JSON.stringify(props)}`;
+  },
+}));
+
 jest.mock('./edit_space', () => ({
-  ManageSpacePage: (props: any) => {
+  EditSpacePage: (props: any) => {
     if (props.spacesManager && props.onLoadSpace) {
       props.spacesManager.getSpace().then((space: any) => props.onLoadSpace(space));
     }
@@ -133,7 +142,7 @@ describe('spacesManagementApp', () => {
           css="You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop)."
           data-test-subj="kbnRedirectAppLink"
         >
-          Spaces Edit Page: {"capabilities":{"catalogue":{},"management":{},"navLinks":{}},"notifications":{"toasts":{}},"spacesManager":{"onActiveSpaceChange$":{}},"history":{"action":"PUSH","length":1,"location":{"pathname":"/create","search":"","hash":""}},"allowFeatureVisibility":true,"allowSolutionVisibility":true,"eventTracker":{"analytics":{}}}
+          Spaces Create Page: {"capabilities":{"catalogue":{},"management":{},"navLinks":{}},"notifications":{"toasts":{}},"spacesManager":{"onActiveSpaceChange$":{}},"history":{"action":"PUSH","length":1,"location":{"pathname":"/create","search":"","hash":""}},"allowFeatureVisibility":true,"allowSolutionVisibility":true,"eventTracker":{"analytics":{}}}
         </div>
       </div>
     `);
@@ -156,7 +165,7 @@ describe('spacesManagementApp', () => {
     expect(setBreadcrumbs).toHaveBeenCalledTimes(1);
     expect(setBreadcrumbs).toHaveBeenCalledWith([
       { href: `/`, text: 'Spaces' },
-      { text: `space with id some-space` },
+      { text: `Edit space with id some-space` },
     ]);
     expect(docTitle.change).toHaveBeenCalledWith('Spaces');
     expect(docTitle.reset).not.toHaveBeenCalled();
@@ -166,7 +175,7 @@ describe('spacesManagementApp', () => {
           css="You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop)."
           data-test-subj="kbnRedirectAppLink"
         >
-          Spaces Edit Page: {"capabilities":{"catalogue":{},"management":{},"navLinks":{}},"notifications":{"toasts":{}},"spacesManager":{"onActiveSpaceChange$":{}},"spaceId":"some-space","history":{"action":"PUSH","length":1,"location":{"pathname":"/edit/some-space","search":"","hash":""}},"allowFeatureVisibility":true,"allowSolutionVisibility":true,"eventTracker":{"analytics":{}}}
+          Spaces Edit Page: {"capabilities":{"catalogue":{},"management":{},"navLinks":{}},"serverBasePath":"","http":{"basePath":{"basePath":"","serverBasePath":"","assetsHrefBase":""},"anonymousPaths":{},"externalUrl":{},"staticAssets":{}},"overlays":{"banners":{}},"notifications":{"toasts":{}},"theme":{"theme$":{}},"i18n":{},"spacesManager":{"onActiveSpaceChange$":{}},"spaceId":"some-space","history":{"action":"PUSH","length":1,"location":{"pathname":"/edit/some-space","search":"","hash":""}},"allowFeatureVisibility":true,"allowSolutionVisibility":true}
         </div>
       </div>
     `);
diff --git a/x-pack/plugins/spaces/public/management/spaces_management_app.tsx b/x-pack/plugins/spaces/public/management/spaces_management_app.tsx
index 40532a7259521..1a442e5b36262 100644
--- a/x-pack/plugins/spaces/public/management/spaces_management_app.tsx
+++ b/x-pack/plugins/spaces/public/management/spaces_management_app.tsx
@@ -38,7 +38,14 @@ interface CreateParams {
 
 export const spacesManagementApp = Object.freeze({
   id: 'spaces',
-  create({ getStartServices, spacesManager, config, eventTracker }: CreateParams) {
+  create({
+    getStartServices,
+    spacesManager,
+    config,
+    eventTracker,
+    getRolesAPIClient,
+    getPrivilegesAPIClient,
+  }: CreateParams) {
     const title = i18n.translate('xpack.spaces.displayName', {
       defaultMessage: 'Spaces',
     });
@@ -49,14 +56,23 @@ export const spacesManagementApp = Object.freeze({
       title,
 
       async mount({ element, setBreadcrumbs, history }) {
-        const [[coreStart, { features }], { SpacesGridPage }, { ManageSpacePage }] =
-          await Promise.all([getStartServices(), import('./spaces_grid'), import('./edit_space')]);
+        const [
+          [coreStart, { features }],
+          { SpacesGridPage },
+          { CreateSpacePage },
+          { EditSpacePage },
+        ] = await Promise.all([
+          getStartServices(),
+          import('./spaces_grid'),
+          import('./create_space'),
+          import('./edit_space'),
+        ]);
 
         const spacesFirstBreadcrumb = {
           text: title,
           href: `/`,
         };
-        const { notifications, application, chrome, http } = coreStart;
+        const { notifications, application, chrome, http, overlays, theme } = coreStart;
 
         chrome.docTitle.change(title);
 
@@ -88,7 +104,7 @@ export const spacesManagementApp = Object.freeze({
           ]);
 
           return (
-            <ManageSpacePage
+            <CreateSpacePage
               capabilities={application.capabilities}
               getFeatures={features.getFeatures}
               notifications={notifications}
@@ -102,29 +118,47 @@ export const spacesManagementApp = Object.freeze({
         };
 
         const EditSpacePageWithBreadcrumbs = () => {
-          const { spaceId } = useParams<{ spaceId: string }>();
+          const { spaceId, selectedTabId } = useParams<{
+            spaceId: string;
+            selectedTabId?: string;
+          }>();
+
+          const breadcrumbText = (space: Space) =>
+            i18n.translate('xpack.spaces.management.editSpaceBreadcrumb', {
+              defaultMessage: 'Edit {space}',
+              values: { space: space.name },
+            });
 
           const onLoadSpace = (space: Space) => {
             setBreadcrumbs([
               spacesFirstBreadcrumb,
               {
-                text: space.name,
+                text: breadcrumbText(space),
               },
             ]);
           };
 
           return (
-            <ManageSpacePage
+            <EditSpacePage
               capabilities={application.capabilities}
+              getUrlForApp={application.getUrlForApp}
+              navigateToUrl={application.navigateToUrl}
+              serverBasePath={http.basePath.serverBasePath}
               getFeatures={features.getFeatures}
+              http={http}
+              overlays={overlays}
               notifications={notifications}
+              theme={theme}
+              i18n={coreStart.i18n}
               spacesManager={spacesManager}
               spaceId={spaceId}
               onLoadSpace={onLoadSpace}
               history={history}
+              selectedTabId={selectedTabId}
+              getRolesAPIClient={getRolesAPIClient}
               allowFeatureVisibility={config.allowFeatureVisibility}
               allowSolutionVisibility={config.allowSolutionVisibility}
-              eventTracker={eventTracker}
+              getPrivilegesAPIClient={getPrivilegesAPIClient}
             />
           );
         };
@@ -141,7 +175,7 @@ export const spacesManagementApp = Object.freeze({
                     <Route path="/create">
                       <CreateSpacePageWithBreadcrumbs />
                     </Route>
-                    <Route path="/edit/:spaceId">
+                    <Route path={['/edit/:spaceId', '/edit/:spaceId/:selectedTabId']} exact>
                       <EditSpacePageWithBreadcrumbs />
                     </Route>
                   </Routes>
diff --git a/x-pack/plugins/spaces/public/spaces_manager/spaces_manager.mock.ts b/x-pack/plugins/spaces/public/spaces_manager/spaces_manager.mock.ts
index 61ac8da35d3ae..e4194ccdb8291 100644
--- a/x-pack/plugins/spaces/public/spaces_manager/spaces_manager.mock.ts
+++ b/x-pack/plugins/spaces/public/spaces_manager/spaces_manager.mock.ts
@@ -26,6 +26,8 @@ function createSpacesManagerMock() {
     updateSavedObjectsSpaces: jest.fn().mockResolvedValue(undefined),
     resolveCopySavedObjectsErrors: jest.fn().mockResolvedValue(undefined),
     getShareSavedObjectPermissions: jest.fn().mockResolvedValue(undefined),
+    getContentForSpace: jest.fn().mockResolvedValue([]),
+    getRolesForSpace: jest.fn().mockResolvedValue([]),
     redirectToSpaceSelector: jest.fn().mockResolvedValue(undefined),
   } as unknown as jest.Mocked<SpacesManager>;
 }
diff --git a/x-pack/plugins/spaces/public/spaces_manager/spaces_manager.ts b/x-pack/plugins/spaces/public/spaces_manager/spaces_manager.ts
index 7762158a4379b..962f02ca2bd79 100644
--- a/x-pack/plugins/spaces/public/spaces_manager/spaces_manager.ts
+++ b/x-pack/plugins/spaces/public/spaces_manager/spaces_manager.ts
@@ -11,9 +11,11 @@ import { BehaviorSubject, skipWhile } from 'rxjs';
 import type { HttpSetup } from '@kbn/core/public';
 import type { SavedObjectsCollectMultiNamespaceReferencesResponse } from '@kbn/core-saved-objects-api-server';
 import type { LegacyUrlAliasTarget } from '@kbn/core-saved-objects-common';
+import type { Role } from '@kbn/security-plugin-types-common';
 
 import type { GetAllSpacesOptions, GetSpaceResult, Space } from '../../common';
 import type { CopySavedObjectsToSpaceResponse } from '../copy_saved_objects_to_space/types';
+import type { SpaceContentTypeSummaryItem } from '../types';
 
 interface SavedObjectTarget {
   type: string;
@@ -192,4 +194,14 @@ export class SpacesManager {
   private isAnonymousPath() {
     return this.http.anonymousPaths.isAnonymous(window.location.pathname);
   }
+
+  public getContentForSpace(
+    id: string
+  ): Promise<{ summary: SpaceContentTypeSummaryItem[]; total: number }> {
+    return this.http.get(`/internal/spaces/${id}/content_summary`);
+  }
+
+  public getRolesForSpace(id: string): Promise<Role[]> {
+    return this.http.get(`/internal/security/roles/${id}`);
+  }
 }
diff --git a/x-pack/plugins/spaces/public/types.ts b/x-pack/plugins/spaces/public/types.ts
index 1ab253262c3c1..76efeead6abf3 100644
--- a/x-pack/plugins/spaces/public/types.ts
+++ b/x-pack/plugins/spaces/public/types.ts
@@ -61,3 +61,10 @@ export interface SpacesApi {
    */
   ui: SpacesApiUi;
 }
+
+export interface SpaceContentTypeSummaryItem {
+  displayName: string;
+  icon?: string;
+  count: number;
+  type: string;
+}
diff --git a/x-pack/plugins/spaces/tsconfig.json b/x-pack/plugins/spaces/tsconfig.json
index ba13f984ef66d..bde909653702d 100644
--- a/x-pack/plugins/spaces/tsconfig.json
+++ b/x-pack/plugins/spaces/tsconfig.json
@@ -37,7 +37,18 @@
     "@kbn/utility-types-jest",
     "@kbn/security-plugin-types-public",
     "@kbn/cloud-plugin",
-    "@kbn/core-analytics-browser"
+    "@kbn/core-analytics-browser",
+    "@kbn/core-analytics-browser",
+    "@kbn/security-plugin-types-common",
+    "@kbn/core-application-browser",
+    "@kbn/unsaved-changes-prompt",
+    "@kbn/core-lifecycle-browser",
+    "@kbn/security-role-management-model",
+    "@kbn/security-ui-components",
+    "@kbn/react-kibana-mount",
+    "@kbn/shared-ux-utility",
+    "@kbn/core-application-common",
+    "@kbn/security-authorization-core",
   ],
   "exclude": [
     "target/**/*",
diff --git a/x-pack/test/functional/apps/spaces/create_edit_space.ts b/x-pack/test/functional/apps/spaces/create_edit_space.ts
index cfffc752cca0c..6b0166b4c77fa 100644
--- a/x-pack/test/functional/apps/spaces/create_edit_space.ts
+++ b/x-pack/test/functional/apps/spaces/create_edit_space.ts
@@ -5,14 +5,18 @@
  * 2.0.
  */
 
+import expect from '@kbn/expect';
+import { faker } from '@faker-js/faker';
 import { FtrProviderContext } from '../../ftr_provider_context';
 
 export default function ({ getPageObjects, getService }: FtrProviderContext) {
   const kibanaServer = getService('kibanaServer');
   const PageObjects = getPageObjects(['common', 'settings', 'security', 'spaceSelector']);
   const testSubjects = getService('testSubjects');
+  const spacesServices = getService('spaces');
+  const log = getService('log');
 
-  describe('edit space', () => {
+  describe('Spaces Management: Create and Edit', () => {
     before(async () => {
       await kibanaServer.savedObjects.cleanStandardList();
     });
@@ -21,15 +25,75 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
       await kibanaServer.savedObjects.cleanStandardList();
     });
 
+    describe('create space', () => {
+      const spaceName = `${faker.word.adjective()} space`;
+      const spaceId = spaceName.replace(' ', '-');
+
+      before(async () => {
+        await PageObjects.common.navigateToApp('spacesManagement');
+        await testSubjects.existOrFail('spaces-grid-page');
+
+        await PageObjects.spaceSelector.clickCreateSpace();
+        await testSubjects.existOrFail('spaces-edit-page');
+      });
+
+      after(async () => {
+        await spacesServices.delete(spaceId);
+      });
+
+      it('create a space with a given name', async () => {
+        await PageObjects.spaceSelector.addSpaceName(spaceName);
+        await PageObjects.spaceSelector.clickSaveSpaceCreation();
+        await testSubjects.existOrFail(`spacesListTableRow-${spaceId}`);
+      });
+    });
+
+    describe('edit space', () => {
+      const spaceName = `${faker.word.adjective()} space`;
+      const spaceId = spaceName.replace(' ', '-');
+
+      before(async () => {
+        log.debug(`Creating space named "${spaceName}" with ID "${spaceId}"`);
+
+        await spacesServices.create({
+          id: spaceId,
+          name: spaceName,
+          disabledFeatures: [],
+          color: '#AABBCC',
+        });
+
+        await PageObjects.common.navigateToApp('spacesManagement');
+        await testSubjects.existOrFail('spaces-grid-page');
+      });
+
+      after(async () => {
+        await spacesServices.delete(spaceId);
+      });
+
+      it('allows changing space initials', async () => {
+        const spaceInitials = faker.string.alpha(2);
+
+        await testSubjects.click(`${spaceId}-hyperlink`);
+        await testSubjects.existOrFail('spaces-view-page > generalPanel');
+
+        await testSubjects.setValue('spaceLetterInitial', spaceInitials);
+        await testSubjects.click('save-space-button');
+
+        await testSubjects.existOrFail('spaces-grid-page'); // wait for grid page to reload
+        await testSubjects.existOrFail(`space-avatar-${spaceId}`);
+        expect(await testSubjects.getVisibleText(`space-avatar-${spaceId}`)).to.be(spaceInitials);
+      });
+    });
+
     describe('solution view', () => {
       it('does not show solution view panel', async () => {
         await PageObjects.common.navigateToUrl('management', 'kibana/spaces/edit/default', {
           shouldUseHashForSubUrl: false,
         });
 
-        await testSubjects.existOrFail('spaces-edit-page');
-        await testSubjects.existOrFail('spaces-edit-page > generalPanel');
-        await testSubjects.missingOrFail('spaces-edit-page > navigationPanel');
+        await testSubjects.existOrFail('spaces-view-page');
+        await testSubjects.existOrFail('spaces-view-page > generalPanel');
+        await testSubjects.missingOrFail('spaces-view-page > navigationPanel'); // xpack.spaces.allowSolutionVisibility is not enabled, so the solution view picker should not appear
       });
     });
   });
diff --git a/x-pack/test/functional/apps/spaces/feature_controls/spaces_security.ts b/x-pack/test/functional/apps/spaces/feature_controls/spaces_security.ts
index be03af7c896a0..ee4fab8458b78 100644
--- a/x-pack/test/functional/apps/spaces/feature_controls/spaces_security.ts
+++ b/x-pack/test/functional/apps/spaces/feature_controls/spaces_security.ts
@@ -102,7 +102,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
           shouldUseHashForSubUrl: false,
         });
 
-        await testSubjects.existOrFail('spaces-edit-page');
+        await testSubjects.existOrFail('spaces-view-page');
       });
     });
 
diff --git a/x-pack/test/functional/apps/spaces/solution_view_flag_enabled/create_edit_space.ts b/x-pack/test/functional/apps/spaces/solution_view_flag_enabled/create_edit_space.ts
index 3f00dda32c878..6a4b001e8ad7f 100644
--- a/x-pack/test/functional/apps/spaces/solution_view_flag_enabled/create_edit_space.ts
+++ b/x-pack/test/functional/apps/spaces/solution_view_flag_enabled/create_edit_space.ts
@@ -28,9 +28,9 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
           shouldUseHashForSubUrl: false,
         });
 
-        await testSubjects.existOrFail('spaces-edit-page');
-        await testSubjects.existOrFail('spaces-edit-page > generalPanel');
-        await testSubjects.existOrFail('spaces-edit-page > navigationPanel');
+        await testSubjects.existOrFail('spaces-view-page');
+        await testSubjects.existOrFail('spaces-view-page > generalPanel');
+        await testSubjects.existOrFail('spaces-view-page > navigationPanel');
       });
 
       it('changes the space solution and updates the side navigation', async () => {
diff --git a/x-pack/test/functional/apps/spaces/spaces_grid.ts b/x-pack/test/functional/apps/spaces/spaces_grid.ts
index 62363802db98a..e2c8695649717 100644
--- a/x-pack/test/functional/apps/spaces/spaces_grid.ts
+++ b/x-pack/test/functional/apps/spaces/spaces_grid.ts
@@ -5,43 +5,119 @@
  * 2.0.
  */
 
-import { FtrProviderContext } from '../../ftr_provider_context';
+import crypto from 'crypto';
+import expect from '@kbn/expect';
+import { type FtrProviderContext } from '../../ftr_provider_context';
 
-export default function enterSpaceFunctionalTests({
+export default function spaceDetailsViewFunctionalTests({
   getService,
   getPageObjects,
 }: FtrProviderContext) {
-  const kibanaServer = getService('kibanaServer');
-  const PageObjects = getPageObjects(['security', 'spaceSelector', 'common']);
+  const PageObjects = getPageObjects(['common', 'settings', 'spaceSelector']);
   const spacesService = getService('spaces');
   const testSubjects = getService('testSubjects');
+  const find = getService('find');
+  const retry = getService('retry');
 
-  const anotherSpace = {
-    id: 'space2',
-    name: 'space2',
-    disabledFeatures: [],
-  };
+  const testSpacesIds = [
+    'odyssey',
+    // this number is chosen intentionally to not exceed the default 10 items displayed by spaces table
+    ...Array.from(new Array(5)).map((_) => `space-${crypto.randomUUID()}`),
+  ];
 
-  describe('Spaces grid', function () {
+  describe('Spaces Management: List of Spaces', function () {
     before(async () => {
-      await spacesService.create(anotherSpace);
+      for (const testSpaceId of testSpacesIds) {
+        await spacesService.create({ id: testSpaceId, name: `${testSpaceId}-name` });
+      }
+
+      await PageObjects.settings.navigateTo();
+      await testSubjects.existOrFail('spaces');
+    });
+
+    beforeEach(async () => {
+      await PageObjects.common.navigateToUrl('management', 'kibana/spaces', {
+        ensureCurrentUrl: false,
+        shouldLoginIfPrompted: false,
+        shouldUseHashForSubUrl: false,
+      });
 
-      await PageObjects.common.navigateToApp('spacesManagement');
       await testSubjects.existOrFail('spaces-grid-page');
     });
 
     after(async () => {
-      await spacesService.delete('another-space');
-      await kibanaServer.savedObjects.cleanStandardList();
+      for (const testSpaceId of testSpacesIds) {
+        await spacesService.delete(testSpaceId);
+      }
+    });
+
+    it('should list all the spaces populated', async () => {
+      const renderedSpaceRow = await find.allByCssSelector('[data-test-subj*=spacesListTableRow-]');
+
+      expect(renderedSpaceRow.length).to.equal(testSpacesIds.length + 1);
     });
 
-    it('can switch to a space from the row in the grid', async () => {
-      // use the "current" badge confirm that Default is the current space
-      await testSubjects.existOrFail('spacesListCurrentBadge-default');
-      // click the switch button of "another space"
-      await PageObjects.spaceSelector.clickSwitchSpaceButton('space2');
-      // use the "current" badge confirm that "Another Space" is now the current space
-      await testSubjects.existOrFail('spacesListCurrentBadge-space2');
+    it('does not display the space switcher button when viewing the details page for the current selected space', async () => {
+      const currentSpaceTitle = (
+        await PageObjects.spaceSelector.currentSelectedSpaceTitle()
+      )?.toLowerCase();
+
+      expect(currentSpaceTitle).to.equal('default');
+
+      await testSubjects.click('default-hyperlink');
+      await testSubjects.existOrFail('spaceDetailsHeader');
+      expect(
+        (await testSubjects.getVisibleText('spaceDetailsHeader')).toLowerCase().includes('default')
+      ).to.be(true);
+      await testSubjects.missingOrFail('spaceSwitcherButton');
+    });
+
+    it("displays the space switcher button when viewing the details page of the space that's not the current selected one", async () => {
+      const testSpaceId = testSpacesIds[Math.floor(Math.random() * testSpacesIds.length)];
+
+      const currentSpaceTitle = (
+        await PageObjects.spaceSelector.currentSelectedSpaceTitle()
+      )?.toLowerCase();
+
+      expect(currentSpaceTitle).to.equal('default');
+
+      await testSubjects.click(`${testSpaceId}-hyperlink`);
+      await testSubjects.existOrFail('spaceDetailsHeader');
+      expect(
+        (await testSubjects.getVisibleText('spaceDetailsHeader'))
+          .toLowerCase()
+          .includes(`${testSpaceId}-name`)
+      ).to.be(true);
+      await testSubjects.existOrFail('spaceSwitcherButton');
+    });
+
+    it('switches to a new space using the space switcher button', async () => {
+      const currentSpaceTitle = (
+        await PageObjects.spaceSelector.currentSelectedSpaceTitle()
+      )?.toLowerCase();
+
+      expect(currentSpaceTitle).to.equal('default');
+
+      const testSpaceId = testSpacesIds[Math.floor(Math.random() * testSpacesIds.length)];
+
+      await testSubjects.click(`${testSpaceId}-hyperlink`);
+      await testSubjects.click('spaceSwitcherButton');
+
+      await retry.try(async () => {
+        const detailsTitle = (
+          await testSubjects.getVisibleText('spaceDetailsHeader')
+        ).toLowerCase();
+
+        const currentSwitchSpaceTitle = (
+          await PageObjects.spaceSelector.currentSelectedSpaceTitle()
+        )?.toLocaleLowerCase();
+
+        return (
+          currentSwitchSpaceTitle &&
+          currentSwitchSpaceTitle === `${testSpaceId}-name` &&
+          detailsTitle.includes(currentSwitchSpaceTitle)
+        );
+      });
     });
   });
 }
diff --git a/x-pack/test/functional/page_objects/space_selector_page.ts b/x-pack/test/functional/page_objects/space_selector_page.ts
index 5dce6ed2d7c94..c8a766de536f5 100644
--- a/x-pack/test/functional/page_objects/space_selector_page.ts
+++ b/x-pack/test/functional/page_objects/space_selector_page.ts
@@ -288,4 +288,9 @@ export class SpaceSelectorPageObject extends FtrService {
     );
     expect(await msgElem.getVisibleText()).to.be('no spaces found');
   }
+
+  async currentSelectedSpaceTitle() {
+    const spacesNavSelector = await this.find.byCssSelector('[data-test-subj="spacesNavSelector"]');
+    return spacesNavSelector.getAttribute('title');
+  }
 }