diff --git a/x-pack/plugins/spaces/public/management/edit_space/customize_space/customize_space.tsx b/x-pack/plugins/spaces/public/management/edit_space/customize_space/customize_space.tsx
index 4bbad58b5d139c1..1fa42eacd2bee69 100644
--- a/x-pack/plugins/spaces/public/management/edit_space/customize_space/customize_space.tsx
+++ b/x-pack/plugins/spaces/public/management/edit_space/customize_space/customize_space.tsx
@@ -5,42 +5,32 @@
  * 2.0.
  */
 
-import type { EuiPopoverProps } from '@elastic/eui';
 import {
   EuiDescribedFormGroup,
   EuiFieldText,
   EuiFormRow,
-  EuiLoadingSpinner,
-  EuiPopover,
-  EuiSpacer,
   EuiTextArea,
   EuiTitle,
 } from '@elastic/eui';
 import type { ChangeEvent } from 'react';
-import React, { Component, Fragment, lazy, Suspense } from 'react';
+import React, { Component } from 'react';
 
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
-import type { Space } from 'src/plugins/spaces_oss/common';
 
-import { isReservedSpace } from '../../../../common';
-import { getSpaceAvatarComponent } from '../../../space_avatar';
+import { getSpaceColor, getSpaceInitials } from '../../../space_avatar';
 import type { SpaceValidator } from '../../lib';
 import { toSpaceIdentifier } from '../../lib';
+import type { FormValues } from '../manage_space_page';
 import { SectionPanel } from '../section_panel';
 import { CustomizeSpaceAvatar } from './customize_space_avatar';
 import { SpaceIdentifier } from './space_identifier';
 
-// 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 }))
-);
-
 interface Props {
   validator: SpaceValidator;
-  space: Partial<Space>;
+  space: FormValues;
   editingExistingSpace: boolean;
-  onChange: (space: Partial<Space>) => void;
+  onChange: (space: FormValues) => void;
 }
 
 interface State {
@@ -60,14 +50,10 @@ export class CustomizeSpace extends Component<Props, State> {
     const panelTitle = i18n.translate(
       'xpack.spaces.management.manageSpacePage.customizeSpaceTitle',
       {
-        defaultMessage: 'Customize your space',
+        defaultMessage: 'General',
       }
     );
 
-    const extraPopoverProps: Partial<EuiPopoverProps> = {
-      initialFocus: 'input[name="spaceInitials"]',
-    };
-
     return (
       <SectionPanel title={panelTitle} description={panelTitle}>
         <EuiDescribedFormGroup
@@ -76,12 +62,14 @@ export class CustomizeSpace extends Component<Props, State> {
               <h3>
                 <FormattedMessage
                   id="xpack.spaces.management.manageSpacePage.customizeSpacePanelDescription"
-                  defaultMessage="Name your space and customize its avatar."
+                  defaultMessage="Describe this space"
                 />
               </h3>
             </EuiTitle>
           }
-          description={this.getPanelDescription()}
+          description={i18n.translate('xpack.spaces.management.manageSpacePage.nameFormRowLabel', {
+            defaultMessage: 'Give your space a name and description for easy identification.',
+          })}
           fullWidth
         >
           <EuiFormRow
@@ -94,43 +82,25 @@ export class CustomizeSpace extends Component<Props, State> {
             <EuiFieldText
               name="name"
               data-test-subj="addSpaceName"
-              placeholder={i18n.translate(
-                'xpack.spaces.management.manageSpacePage.awesomeSpacePlaceholder',
-                {
-                  defaultMessage: 'Awesome space',
-                }
-              )}
               value={name}
               onChange={this.onNameChange}
+              isInvalid={validator.validateSpaceName(this.props.space).isInvalid}
               fullWidth
             />
           </EuiFormRow>
 
-          <EuiSpacer />
-
-          {this.props.space && isReservedSpace(this.props.space) ? null : (
-            <Fragment>
-              <SpaceIdentifier
-                space={this.props.space}
-                editable={!editingExistingSpace}
-                onChange={this.onSpaceIdentifierChange}
-                validator={validator}
-              />
-            </Fragment>
-          )}
-
           <EuiFormRow
             data-test-subj="optionalDescription"
             label={i18n.translate(
               'xpack.spaces.management.manageSpacePage.spaceDescriptionFormRowLabel',
               {
-                defaultMessage: 'Description (optional)',
+                defaultMessage: 'Description',
               }
             )}
             helpText={i18n.translate(
               'xpack.spaces.management.manageSpacePage.spaceDescriptionHelpText',
               {
-                defaultMessage: 'The description appears on the Space selection screen.',
+                defaultMessage: 'The description appears on the space selection screen.',
               }
             )}
             {...validator.validateSpaceDescription(this.props.space)}
@@ -141,78 +111,48 @@ export class CustomizeSpace extends Component<Props, State> {
               name="description"
               value={description}
               onChange={this.onDescriptionChange}
+              isInvalid={validator.validateSpaceDescription(this.props.space).isInvalid}
               fullWidth
               rows={2}
             />
           </EuiFormRow>
 
-          <EuiFormRow
-            label={i18n.translate('xpack.spaces.management.manageSpacePage.avatarFormRowLabel', {
-              defaultMessage: 'Avatar',
-            })}
-          >
-            <EuiPopover
-              id="customizeAvatarPopover"
-              button={
-                <button
-                  title={i18n.translate(
-                    'xpack.spaces.management.manageSpacePage.clickToCustomizeTooltip',
-                    {
-                      defaultMessage: 'Click to customize this space avatar',
-                    }
-                  )}
-                  onClick={this.togglePopover}
-                >
-                  <Suspense fallback={<EuiLoadingSpinner />}>
-                    <LazySpaceAvatar space={this.props.space} size="l" />
-                  </Suspense>
-                </button>
-              }
-              closePopover={this.closePopover}
-              {...extraPopoverProps}
-              ownFocus={true}
-              isOpen={this.state.customizingAvatar}
-            >
-              <div style={{ maxWidth: 240 }}>
-                <CustomizeSpaceAvatar space={this.props.space} onChange={this.onAvatarChange} />
-              </div>
-            </EuiPopover>
-          </EuiFormRow>
+          {editingExistingSpace ? null : (
+            <SpaceIdentifier
+              space={this.props.space}
+              editable={!editingExistingSpace}
+              onChange={this.onSpaceIdentifierChange}
+              validator={validator}
+            />
+          )}
+        </EuiDescribedFormGroup>
+
+        <EuiDescribedFormGroup
+          title={
+            <EuiTitle size="xs">
+              <h3>
+                <FormattedMessage
+                  id="xpack.spaces.management.manageSpacePage.avatarTitle"
+                  defaultMessage="Customize avatar for this space"
+                />
+              </h3>
+            </EuiTitle>
+          }
+          description={i18n.translate('xpack.spaces.management.manageSpacePage.avatarDescription', {
+            defaultMessage: 'Choose how you wish your space’s avatar to appear across Kibana.',
+          })}
+          fullWidth
+        >
+          <CustomizeSpaceAvatar
+            space={this.props.space}
+            onChange={this.onAvatarChange}
+            validator={validator}
+          />
         </EuiDescribedFormGroup>
       </SectionPanel>
     );
   }
 
-  public togglePopover = () => {
-    this.setState({
-      customizingAvatar: !this.state.customizingAvatar,
-    });
-  };
-
-  public closePopover = () => {
-    this.setState({
-      customizingAvatar: false,
-    });
-  };
-
-  public getPanelDescription = () => {
-    return this.props.editingExistingSpace ? (
-      <p>
-        <FormattedMessage
-          id="xpack.spaces.management.manageSpacePage.customizeSpacePanelUrlIdentifierNotEditable"
-          defaultMessage="The url identifier cannot be changed."
-        />
-      </p>
-    ) : (
-      <p>
-        <FormattedMessage
-          id="xpack.spaces.management.manageSpacePage.customizeSpacePanelUrlIdentifierEditable"
-          defaultMessage="Note the URL identifier. You cannot change it after you create the space."
-        />
-      </p>
-    );
-  };
-
   public onNameChange = (e: ChangeEvent<HTMLInputElement>) => {
     if (!this.props.space) {
       return;
@@ -230,6 +170,12 @@ export class CustomizeSpace extends Component<Props, State> {
       ...this.props.space,
       name: e.target.value,
       id,
+      initials: this.props.space.customAvatarInitials
+        ? this.props.space.initials
+        : getSpaceInitials({ name: e.target.value }),
+      color: this.props.space.customAvatarColor
+        ? this.props.space.color
+        : getSpaceColor({ name: e.target.value }),
     });
   };
 
@@ -252,7 +198,7 @@ export class CustomizeSpace extends Component<Props, State> {
     });
   };
 
-  public onAvatarChange = (space: Partial<Space>) => {
+  public onAvatarChange = (space: FormValues) => {
     this.props.onChange(space);
   };
 }
diff --git a/x-pack/plugins/spaces/public/management/edit_space/customize_space/customize_space_avatar.tsx b/x-pack/plugins/spaces/public/management/edit_space/customize_space/customize_space_avatar.tsx
index 96cd094c146458c..49a85d150f6cf31 100644
--- a/x-pack/plugins/spaces/public/management/edit_space/customize_space/customize_space_avatar.tsx
+++ b/x-pack/plugins/spaces/public/management/edit_space/customize_space/customize_space_avatar.tsx
@@ -6,28 +6,35 @@
  */
 
 import {
-  EuiButton,
+  EuiAvatar,
   EuiColorPicker,
   EuiFieldText,
   EuiFilePicker,
+  EuiFlexGroup,
   EuiFlexItem,
   EuiFormRow,
+  EuiIcon,
+  EuiKeyPadMenu,
+  EuiKeyPadMenuItem,
+  EuiLoadingSpinner,
   EuiSpacer,
-  isValidHex,
 } from '@elastic/eui';
-import type { ChangeEvent } from 'react';
-import React, { Component } from 'react';
+import type { ChangeEvent, FunctionComponent } from 'react';
+import React, { Component, lazy, Suspense } from 'react';
 
 import { i18n } from '@kbn/i18n';
-import type { Space } from 'src/plugins/spaces_oss/common';
+import { euiThemeVars } from '@kbn/ui-shared-deps/theme';
 
 import { MAX_SPACE_INITIALS } from '../../../../common';
 import { encode, imageTypes } from '../../../../common/lib/dataurl';
-import { getSpaceColor, getSpaceInitials } from '../../../space_avatar';
+import { getSpaceAvatarComponent, getSpaceInitials } from '../../../space_avatar';
+import type { SpaceValidator } from '../../lib';
+import type { FormValues } from '../manage_space_page';
 
 interface Props {
-  space: Partial<Space>;
-  onChange: (space: Partial<Space>) => void;
+  space: FormValues;
+  onChange: (space: FormValues) => void;
+  validator: SpaceValidator;
 }
 
 interface State {
@@ -35,6 +42,11 @@ interface State {
   pendingInitials?: string | null;
 }
 
+// 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 }))
+);
+
 export class CustomizeSpaceAvatar extends Component<Props, State> {
   private initialsRef: HTMLInputElement | null = null;
 
@@ -106,93 +118,186 @@ export class CustomizeSpaceAvatar extends Component<Props, State> {
   public render() {
     const { space } = this.props;
 
-    const { initialsHasFocus, pendingInitials } = this.state;
-
-    const spaceColor = getSpaceColor(space);
-    const isInvalidSpaceColor = !isValidHex(spaceColor) && spaceColor !== '';
-
     return (
       <form onSubmit={() => false}>
         <EuiFormRow
           label={i18n.translate(
-            'xpack.spaces.management.customizeSpaceAvatar.initialItemsFormRowLabel',
+            'xpack.spaces.management.customizeSpaceAvatar.avatarTypeFormRowLabel',
             {
-              defaultMessage: 'Initials (2 max)',
+              defaultMessage: 'Avatar type',
             }
           )}
+          fullWidth
         >
-          <EuiFieldText
-            inputRef={this.initialsInputRef}
-            data-test-subj="spaceLetterInitial"
-            name="spaceInitials"
-            // allows input to be cleared or otherwise invalidated while user is editing the initials,
-            // without defaulting to the derived initials provided by `getSpaceInitials`
-            value={initialsHasFocus ? pendingInitials || '' : getSpaceInitials(space)}
-            onChange={this.onInitialsChange}
-            disabled={this.props.space.imageUrl && this.props.space.imageUrl !== '' ? true : false}
-          />
+          <EuiKeyPadMenu role="radiogroup" aria-labelledby="rg1_label">
+            <EuiKeyPadMenuItem
+              label="Initials"
+              role="radio"
+              aria-checked={space.avatarType !== 'image'}
+              onClick={() =>
+                this.props.onChange({
+                  ...space,
+                  avatarType: 'initials',
+                })
+              }
+              style={{
+                border:
+                  space.avatarType !== 'image'
+                    ? `1px solid ${euiThemeVars.euiLinkColor}`
+                    : `1px solid ${euiThemeVars.euiBorderColor}`,
+                color: space.avatarType !== 'image' ? euiThemeVars.euiLinkColor : undefined,
+              }}
+            >
+              <InitialsIcon />
+            </EuiKeyPadMenuItem>
+            <EuiKeyPadMenuItem
+              label={i18n.translate(
+                'xpack.spaces.management.customizeSpaceAvatar.initialItemsFormRowLabel',
+                {
+                  defaultMessage: 'Image',
+                }
+              )}
+              role="radio"
+              aria-checked={space.avatarType === 'image'}
+              onClick={() =>
+                this.props.onChange({
+                  ...space,
+                  avatarType: 'image',
+                })
+              }
+              style={{
+                marginLeft: euiThemeVars.spacerSizes.s,
+                border:
+                  space.avatarType === 'image'
+                    ? `1px solid ${euiThemeVars.euiLinkColor}`
+                    : `1px solid ${euiThemeVars.euiBorderColor}`,
+                color: space.avatarType === 'image' ? euiThemeVars.euiLinkColor : undefined,
+              }}
+            >
+              <EuiIcon type="image" size="l" />
+            </EuiKeyPadMenuItem>
+          </EuiKeyPadMenu>
         </EuiFormRow>
-        <EuiSpacer size="m" />
-        <EuiFormRow
-          label={i18n.translate('xpack.spaces.management.customizeSpaceAvatar.colorFormRowLabel', {
-            defaultMessage: 'Color',
-          })}
-          isInvalid={isInvalidSpaceColor}
-        >
-          <EuiColorPicker
-            color={spaceColor}
-            onChange={this.onColorChange}
-            isInvalid={isInvalidSpaceColor}
-          />
+        <EuiFormRow fullWidth>
+          <EuiFlexGroup gutterSize="m">
+            {space.avatarType !== 'image' ? (
+              <>
+                <EuiFlexItem>
+                  <EuiFormRow
+                    label={i18n.translate(
+                      'xpack.spaces.management.customizeSpaceAvatar.initialItemsFormRowLabel',
+                      {
+                        defaultMessage: 'Initials',
+                      }
+                    )}
+                    helpText={i18n.translate(
+                      'xpack.spaces.management.customizeSpaceAvatar.initialItemsFormRowLabel',
+                      {
+                        defaultMessage: 'Enter a maximum of two characters.',
+                      }
+                    )}
+                    {...this.props.validator.validateAvatarInitials(space)}
+                    fullWidth
+                  >
+                    <EuiFieldText
+                      data-test-subj="spaceLetterInitial"
+                      name="spaceInitials"
+                      value={space.initials ?? ''}
+                      onChange={this.onInitialsChange}
+                      isInvalid={this.props.validator.validateAvatarInitials(space).isInvalid}
+                      fullWidth
+                    />
+                  </EuiFormRow>
+                </EuiFlexItem>
+                <EuiFlexItem>
+                  <EuiFormRow
+                    label={i18n.translate(
+                      'xpack.spaces.management.customizeSpaceAvatar.colorFormRowLabel',
+                      {
+                        defaultMessage: 'Color',
+                      }
+                    )}
+                    {...this.props.validator.validateAvatarColor(space)}
+                    fullWidth
+                  >
+                    <EuiColorPicker
+                      color={space.color ?? ''}
+                      onChange={this.onColorChange}
+                      isInvalid={this.props.validator.validateAvatarColor(space).isInvalid}
+                      fullWidth
+                    />
+                  </EuiFormRow>
+                </EuiFlexItem>
+              </>
+            ) : (
+              <EuiFlexItem>
+                <EuiFormRow
+                  label={i18n.translate('xpack.spaces.management.customizeSpaceAvatar.imageUrl', {
+                    defaultMessage: 'Image',
+                  })}
+                  {...this.props.validator.validateAvatarImage(space)}
+                  fullWidth
+                >
+                  <EuiFilePicker
+                    display="default"
+                    data-test-subj="uploadCustomImageFile"
+                    initialPromptText={i18n.translate(
+                      'xpack.spaces.management.customizeSpaceAvatar.selectImageUrl',
+                      {
+                        defaultMessage: 'Select image file',
+                      }
+                    )}
+                    onChange={this.onFileUpload}
+                    accept={imageTypes.join(',')}
+                    isInvalid={this.props.validator.validateAvatarImage(space).isInvalid}
+                    fullWidth
+                  />
+                </EuiFormRow>
+              </EuiFlexItem>
+            )}
+            <EuiFlexItem grow={false}>
+              <EuiSpacer size="m" />
+              <EuiSpacer size="xs" />
+              {space.avatarType === 'image' && space.imageUrl ? (
+                <Suspense fallback={<EuiLoadingSpinner />}>
+                  <LazySpaceAvatar
+                    space={{
+                      ...space,
+                      initials: undefined,
+                      name: undefined,
+                    }}
+                    size="l"
+                  />
+                </Suspense>
+              ) : space.avatarType !== 'image' && (space.name || space.initials) ? (
+                <Suspense fallback={<EuiLoadingSpinner />}>
+                  <LazySpaceAvatar
+                    space={{
+                      ...space,
+                      imageUrl: undefined,
+                    }}
+                    size="l"
+                  />
+                </Suspense>
+              ) : (
+                <EuiAvatar
+                  type="space"
+                  name="?"
+                  size="l"
+                  color={null}
+                  style={{
+                    background: euiThemeVars.euiColorLightShade,
+                    color: euiThemeVars.euiTextSubduedColor,
+                  }}
+                />
+              )}
+            </EuiFlexItem>
+          </EuiFlexGroup>
         </EuiFormRow>
-        <EuiSpacer size="m" />
-        {this.filePickerOrImage()}
       </form>
     );
   }
 
-  private removeImageUrl() {
-    this.props.onChange({
-      ...this.props.space,
-      imageUrl: '',
-    });
-  }
-
-  public filePickerOrImage() {
-    if (!this.props.space.imageUrl) {
-      return (
-        <EuiFormRow
-          label={i18n.translate('xpack.spaces.management.customizeSpaceAvatar.imageUrl', {
-            defaultMessage: 'Custom image',
-          })}
-        >
-          <EuiFilePicker
-            display="default"
-            data-test-subj="uploadCustomImageFile"
-            initialPromptText={i18n.translate(
-              'xpack.spaces.management.customizeSpaceAvatar.selectImageUrl',
-              {
-                defaultMessage: 'Select image file',
-              }
-            )}
-            onChange={this.onFileUpload}
-            accept={imageTypes.join(',')}
-          />
-        </EuiFormRow>
-      );
-    } else {
-      return (
-        <EuiFlexItem grow={true}>
-          <EuiButton onClick={() => this.removeImageUrl()} color="danger" iconType="trash">
-            {i18n.translate('xpack.spaces.management.customizeSpaceAvatar.removeImage', {
-              defaultMessage: 'Remove custom image',
-            })}
-          </EuiButton>
-        </EuiFlexItem>
-      );
-    }
-  }
-
   public initialsInputRef = (ref: HTMLInputElement) => {
     if (ref) {
       this.initialsRef = ref;
@@ -230,6 +335,7 @@ export class CustomizeSpaceAvatar extends Component<Props, State> {
 
     this.props.onChange({
       ...this.props.space,
+      customAvatarInitials: true,
       initials,
     });
   };
@@ -237,7 +343,24 @@ export class CustomizeSpaceAvatar extends Component<Props, State> {
   public onColorChange = (color: string) => {
     this.props.onChange({
       ...this.props.space,
+      customAvatarColor: true,
       color,
     });
   };
 }
+
+const InitialsIcon: FunctionComponent = () => (
+  <svg
+    width="15"
+    height="10"
+    viewBox="0 0 15 10"
+    className="euiIcon euiIcon--large"
+    focusable="false"
+    role="img"
+    aria-hidden="true"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M1.97923 8.99998L2.85707 6.52839H6.38548L7.26332 8.99998H8.37128L5.16673 0.272705H4.07582L0.871277 8.99998H1.97923ZM3.18946 5.59089L4.58719 1.65339H4.65537L6.0531 5.59089H3.18946Z" />
+    <path d="M11.5204 9.15339C12.6625 9.15339 13.2591 8.53975 13.4636 8.11361H13.5147V8.99998H14.5204V4.68748C14.5204 2.60793 12.9352 2.3693 12.1 2.3693C11.1113 2.3693 9.98633 2.71021 9.47497 3.90339L10.4295 4.2443C10.6511 3.76702 11.1753 3.25566 12.1341 3.25566C13.0588 3.25566 13.5147 3.74572 13.5147 4.58521V4.6193C13.5147 5.10509 13.0204 5.06248 11.8272 5.21589C10.6128 5.37356 9.28747 5.64202 9.28747 7.14202C9.28747 8.42043 10.2761 9.15339 11.5204 9.15339ZM11.6738 8.24998C10.8727 8.24998 10.2932 7.89202 10.2932 7.19316C10.2932 6.42611 10.992 6.18748 11.7761 6.08521C12.2022 6.03407 13.3443 5.91475 13.5147 5.71021V6.63066C13.5147 7.44884 12.867 8.24998 11.6738 8.24998Z" />
+  </svg>
+);
diff --git a/x-pack/plugins/spaces/public/management/edit_space/customize_space/space_identifier.tsx b/x-pack/plugins/spaces/public/management/edit_space/customize_space/space_identifier.tsx
index bc863e4add2cc31..b69222d3aa17ab9 100644
--- a/x-pack/plugins/spaces/public/management/edit_space/customize_space/space_identifier.tsx
+++ b/x-pack/plugins/spaces/public/management/edit_space/customize_space/space_identifier.tsx
@@ -5,66 +5,52 @@
  * 2.0.
  */
 
-import { EuiFieldText, EuiFormRow, EuiLink } from '@elastic/eui';
+import { EuiFieldText, EuiFormRow } from '@elastic/eui';
 import type { ChangeEvent } from 'react';
 import React, { Component, Fragment } from 'react';
 
-import type { InjectedIntl } from '@kbn/i18n/react';
-import { FormattedMessage, injectI18n } from '@kbn/i18n/react';
+import { FormattedMessage } from '@kbn/i18n/react';
 import type { Space } from 'src/plugins/spaces_oss/common';
 
 import type { SpaceValidator } from '../../lib';
-import { toSpaceIdentifier } from '../../lib';
 
 interface Props {
   space: Partial<Space>;
   editable: boolean;
   validator: SpaceValidator;
-  intl: InjectedIntl;
   onChange: (updatedIdentifier: string) => void;
 }
 
-interface State {
-  editing: boolean;
-}
-
-class SpaceIdentifierUI extends Component<Props, State> {
-  private textFieldRef: HTMLInputElement | null = null;
-
-  constructor(props: Props) {
-    super(props);
-    this.state = {
-      editing: false,
-    };
-  }
-
+export class SpaceIdentifier extends Component<Props> {
   public render() {
-    const { intl } = this.props;
     const { id = '' } = this.props.space;
 
     return (
       <Fragment>
         <EuiFormRow
-          label={this.getLabel()}
-          helpText={this.getHelpText(id)}
+          label={
+            <FormattedMessage
+              id="xpack.spaces.management.spaceIdentifier.urlIdentifierTitle"
+              defaultMessage="URL identifier"
+            />
+          }
+          helpText={
+            <FormattedMessage
+              id="xpack.spaces.management.spaceIdentifier.kibanaURLForSpaceIdentifierDescription"
+              defaultMessage="The URL identifier can't be changed once created."
+              values={{
+                spaceIdentifier: <strong>/s/{id}</strong>,
+              }}
+            />
+          }
           {...this.props.validator.validateURLIdentifier(this.props.space)}
           fullWidth
         >
           <EuiFieldText
-            readOnly={!this.state.editing}
             data-test-subj="spaceURLDisplay"
-            placeholder={
-              this.state.editing || !this.props.editable
-                ? undefined
-                : intl.formatMessage({
-                    id:
-                      'xpack.spaces.management.spaceIdentifier.urlIdentifierGeneratedFromSpaceNameTooltip',
-                    defaultMessage: 'awesome-space',
-                  })
-            }
             value={id}
             onChange={this.onChange}
-            inputRef={(ref) => (this.textFieldRef = ref)}
+            isInvalid={this.props.validator.validateURLIdentifier(this.props.space).isInvalid}
             fullWidth
           />
         </EuiFormRow>
@@ -72,106 +58,7 @@ class SpaceIdentifierUI extends Component<Props, State> {
     );
   }
 
-  public getLabel = () => {
-    if (!this.props.editable) {
-      return (
-        <p>
-          <FormattedMessage
-            id="xpack.spaces.management.spaceIdentifier.urlIdentifierTitle"
-            defaultMessage="URL identifier"
-          />
-        </p>
-      );
-    }
-
-    const editLinkText = this.state.editing ? (
-      <FormattedMessage
-        id="xpack.spaces.management.spaceIdentifier.resetSpaceNameLinkText"
-        defaultMessage="[reset]"
-      />
-    ) : (
-      <FormattedMessage
-        id="xpack.spaces.management.spaceIdentifier.customizeSpaceLinkText"
-        defaultMessage="[customize]"
-      />
-    );
-
-    const editLinkLabel = this.state.editing
-      ? this.props.intl.formatMessage({
-          id: 'xpack.spaces.management.spaceIdentifier.resetSpaceNameLinkLabel',
-          defaultMessage: 'Reset the URL identifier',
-        })
-      : this.props.intl.formatMessage({
-          id: 'xpack.spaces.management.spaceIdentifier.customizeSpaceNameLinkLabel',
-          defaultMessage: 'Customize the URL identifier',
-        });
-
-    return (
-      <p>
-        <FormattedMessage
-          id="xpack.spaces.management.spaceIdentifier.urlIdentifierLabel"
-          defaultMessage="URL identifier "
-        />
-        <EuiLink
-          data-test-subj="CustomizeOrReset"
-          onClick={this.onEditClick}
-          aria-label={editLinkLabel}
-        >
-          {editLinkText}
-        </EuiLink>
-      </p>
-    );
-  };
-
-  public getHelpText = (
-    identifier: string = this.props.intl.formatMessage({
-      id: 'xpack.spaces.management.spaceIdentifier.emptySpaceIdentifierText',
-      defaultMessage: 'awesome-space',
-    })
-  ) => {
-    return (
-      <p className="eui-textBreakAll">
-        <FormattedMessage
-          id="xpack.spaces.management.spaceIdentifier.kibanaURLForSpaceIdentifierDescription"
-          defaultMessage="Example: https://my-kibana.example{spaceIdentifier}/app/kibana."
-          values={{
-            spaceIdentifier: <strong>/s/{identifier}</strong>,
-          }}
-        />
-      </p>
-    );
-  };
-
-  public onEditClick = () => {
-    const currentlyEditing = this.state.editing;
-    if (currentlyEditing) {
-      // "Reset" clicked. Create space identifier based on the space name.
-      const resetIdentifier = toSpaceIdentifier(this.props.space.name);
-
-      this.setState({
-        editing: false,
-      });
-      this.props.onChange(resetIdentifier);
-    } else {
-      this.setState(
-        {
-          editing: true,
-        },
-        () => {
-          if (this.textFieldRef) {
-            this.textFieldRef.focus();
-          }
-        }
-      );
-    }
-  };
-
   public onChange = (e: ChangeEvent<HTMLInputElement>) => {
-    if (!this.state.editing) {
-      return;
-    }
     this.props.onChange(e.target.value);
   };
 }
-
-export const SpaceIdentifier = injectI18n(SpaceIdentifierUI);
diff --git a/x-pack/plugins/spaces/public/management/edit_space/enabled_features/enabled_features.tsx b/x-pack/plugins/spaces/public/management/edit_space/enabled_features/enabled_features.tsx
index 667878df3254a56..0b2d5dd37bd4bf1 100644
--- a/x-pack/plugins/spaces/public/management/edit_space/enabled_features/enabled_features.tsx
+++ b/x-pack/plugins/spaces/public/management/edit_space/enabled_features/enabled_features.tsx
@@ -6,8 +6,8 @@
  */
 
 import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText, EuiTitle } from '@elastic/eui';
-import type { ReactNode } from 'react';
-import React, { Component, Fragment } from 'react';
+import type { FunctionComponent } from 'react';
+import React from 'react';
 
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
@@ -15,7 +15,6 @@ import type { ApplicationStart } from 'src/core/public';
 import type { Space } from 'src/plugins/spaces_oss/common';
 
 import type { KibanaFeatureConfig } from '../../../../../features/public';
-import { getEnabledFeatures } from '../../lib/feature_utils';
 import { SectionPanel } from '../section_panel';
 import { FeatureTable } from './feature_table';
 
@@ -26,114 +25,42 @@ interface Props {
   getUrlForApp: ApplicationStart['getUrlForApp'];
 }
 
-export class EnabledFeatures extends Component<Props, {}> {
-  public render() {
-    const description = i18n.translate(
+export const EnabledFeatures: FunctionComponent<Props> = (props) => (
+  <SectionPanel
+    title={i18n.translate('xpack.spaces.management.manageSpacePage.customizeVisibleFeatures', {
+      defaultMessage: 'Features',
+    })}
+    description={i18n.translate(
       'xpack.spaces.management.manageSpacePage.customizeVisibleFeatures',
       {
         defaultMessage: 'Customize visible features',
       }
-    );
-
-    return (
-      <SectionPanel
-        title={this.getPanelTitle()}
-        description={description}
-        data-test-subj="enabled-features-panel"
-      >
-        <EuiFlexGroup>
-          <EuiFlexItem>
-            <EuiTitle size="xs">
-              <h3>
-                <FormattedMessage
-                  id="xpack.spaces.management.enabledSpaceFeatures.enableFeaturesInSpaceMessage"
-                  defaultMessage="Set feature visibility for this space"
-                />
-              </h3>
-            </EuiTitle>
-            <EuiSpacer size="s" />
-            {this.getDescription()}
-          </EuiFlexItem>
-          <EuiFlexItem>
-            <FeatureTable
-              features={this.props.features}
-              space={this.props.space}
-              onChange={this.props.onChange}
-            />
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </SectionPanel>
-    );
-  }
-
-  private getPanelTitle = () => {
-    const featureCount = this.props.features.length;
-    const enabledCount = getEnabledFeatures(this.props.features, this.props.space).length;
-
-    let details: null | ReactNode = null;
-
-    if (enabledCount === featureCount) {
-      details = (
-        <EuiText size={'s'} style={{ display: 'inline-block' }}>
-          <em>
-            <FormattedMessage
-              id="xpack.spaces.management.enabledSpaceFeatures.allFeaturesEnabledMessage"
-              defaultMessage="(all features visible)"
-            />
-          </em>
-        </EuiText>
-      );
-    } else if (enabledCount === 0) {
-      details = (
-        <EuiText color="danger" size={'s'} style={{ display: 'inline-block' }}>
-          <em>
+    )}
+    data-test-subj="enabled-features-panel"
+  >
+    <EuiFlexGroup>
+      <EuiFlexItem>
+        <EuiTitle size="xs">
+          <h3>
             <FormattedMessage
-              id="xpack.spaces.management.enabledSpaceFeatures.noFeaturesEnabledMessage"
-              defaultMessage="(no features visible)"
+              id="xpack.spaces.management.enabledSpaceFeatures.enableFeaturesInSpaceMessage"
+              defaultMessage="Set feature visibility for this space"
             />
-          </em>
-        </EuiText>
-      );
-    } else {
-      details = (
-        <EuiText size={'s'} style={{ display: 'inline-block' }}>
-          <em>
-            <FormattedMessage
-              id="xpack.spaces.management.enabledSpaceFeatures.someFeaturesEnabledMessage"
-              defaultMessage="({enabledCount} / {featureCount} features visible)"
-              values={{
-                enabledCount,
-                featureCount,
-              }}
-            />
-          </em>
-        </EuiText>
-      );
-    }
-
-    return (
-      <span>
-        <FormattedMessage
-          id="xpack.spaces.management.enabledSpaceFeatures.enabledFeaturesSectionMessage"
-          defaultMessage="Features"
-        />{' '}
-        {details}
-      </span>
-    );
-  };
-
-  private getDescription = () => {
-    return (
-      <Fragment>
+          </h3>
+        </EuiTitle>
+        <EuiSpacer size="s" />
         <EuiText size="s" color="subdued">
           <p>
             <FormattedMessage
               id="xpack.spaces.management.enabledSpaceFeatures.notASecurityMechanismMessage"
-              defaultMessage="The feature is hidden in the UI, but is not disabled."
+              defaultMessage="Hidden features will be obscured from the user interface, but will not be disabled. If you wish to secure access to features, manage security roles."
             />
           </p>
         </EuiText>
-      </Fragment>
-    );
-  };
-}
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <FeatureTable features={props.features} space={props.space} onChange={props.onChange} />
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  </SectionPanel>
+);
diff --git a/x-pack/plugins/spaces/public/management/edit_space/enabled_features/feature_table.scss b/x-pack/plugins/spaces/public/management/edit_space/enabled_features/feature_table.scss
index 35b9dc1d45661b3..20828c4b832d44e 100644
--- a/x-pack/plugins/spaces/public/management/edit_space/enabled_features/feature_table.scss
+++ b/x-pack/plugins/spaces/public/management/edit_space/enabled_features/feature_table.scss
@@ -1,4 +1,4 @@
 .spcFeatureTableAccordionContent {
   // Align accordion content with the feature category logo in the accordion's buttonContent
-  padding-left: $euiSizeXL;
+  padding-left: $euiSizeL;
 }
diff --git a/x-pack/plugins/spaces/public/management/edit_space/enabled_features/feature_table.tsx b/x-pack/plugins/spaces/public/management/edit_space/enabled_features/feature_table.tsx
index 2c9eaf4563d05bf..5fb00700683f340 100644
--- a/x-pack/plugins/spaces/public/management/edit_space/enabled_features/feature_table.tsx
+++ b/x-pack/plugins/spaces/public/management/edit_space/enabled_features/feature_table.tsx
@@ -10,13 +10,13 @@ import './feature_table.scss';
 import type { EuiCheckboxProps } from '@elastic/eui';
 import {
   EuiAccordion,
+  EuiButtonEmpty,
   EuiCallOut,
   EuiCheckbox,
   EuiFlexGroup,
   EuiFlexItem,
   EuiHorizontalRule,
   EuiIcon,
-  EuiLink,
   EuiSpacer,
   EuiText,
   EuiTitle,
@@ -88,9 +88,9 @@ export class FeatureTable extends Component<Props, {}> {
       const buttonContent = (
         <EuiFlexGroup
           data-test-subj={`featureCategoryButton_${category.id}`}
-          alignItems={'center'}
+          alignItems="center"
           responsive={false}
-          gutterSize="m"
+          gutterSize="s"
           onClick={() => {
             if (!canExpandCategory) {
               const isChecked = enabledCount > 0;
@@ -110,22 +110,22 @@ export class FeatureTable extends Component<Props, {}> {
             </EuiFlexItem>
           ) : null}
           <EuiFlexItem grow={1}>
-            <EuiTitle size="xs">
-              <h4 className="eui-displayInlineBlock">{category.label}</h4>
+            <EuiTitle size="xxs">
+              <h4>{category.label}</h4>
             </EuiTitle>
           </EuiFlexItem>
         </EuiFlexGroup>
       );
 
       const label: string = i18n.translate('xpack.spaces.management.featureAccordionSwitchLabel', {
-        defaultMessage: '{enabledCount} / {featureCount} features visible',
+        defaultMessage: '{enabledCount}/{featureCount} features visible',
         values: {
           enabledCount,
           featureCount,
         },
       });
       const extraAction = (
-        <EuiText size="s" aria-hidden="true" color={'subdued'}>
+        <EuiText size="xs" aria-hidden="true" color="subdued">
           {label}
         </EuiText>
       );
@@ -143,13 +143,13 @@ export class FeatureTable extends Component<Props, {}> {
           extraAction={canExpandCategory ? extraAction : undefined}
         >
           <div className="spcFeatureTableAccordionContent">
-            <EuiSpacer size="s" />
+            <EuiSpacer size="m" />
             {helpText && (
               <>
                 <EuiCallOut iconType="iInCircle" size="s">
                   {helpText}
                 </EuiCallOut>
-                <EuiSpacer size="s" />
+                <EuiSpacer size="m" />
               </>
             )}
             {featuresInCategory.map((feature) => {
@@ -188,30 +188,34 @@ export class FeatureTable extends Component<Props, {}> {
     const controls = [];
     if (enabledCount < featureCount) {
       controls.push(
-        <EuiLink onClick={() => this.showAll()} data-test-subj="showAllFeaturesLink">
-          <EuiText size="xs">
-            {i18n.translate('xpack.spaces.management.selectAllFeaturesLink', {
-              defaultMessage: 'Select all',
-            })}
-          </EuiText>
-        </EuiLink>
+        <EuiButtonEmpty
+          onClick={() => this.showAll()}
+          size="xs"
+          data-test-subj="showAllFeaturesLink"
+        >
+          {i18n.translate('xpack.spaces.management.selectAllFeaturesLink', {
+            defaultMessage: 'Show all',
+          })}
+        </EuiButtonEmpty>
       );
     }
     if (enabledCount > 0) {
       controls.push(
-        <EuiLink onClick={() => this.hideAll()} data-test-subj="hideAllFeaturesLink">
-          <EuiText size="xs">
-            {i18n.translate('xpack.spaces.management.deselectAllFeaturesLink', {
-              defaultMessage: 'Deselect all',
-            })}
-          </EuiText>
-        </EuiLink>
+        <EuiButtonEmpty
+          onClick={() => this.hideAll()}
+          size="xs"
+          data-test-subj="hideAllFeaturesLink"
+        >
+          {i18n.translate('xpack.spaces.management.deselectAllFeaturesLink', {
+            defaultMessage: 'Hide all',
+          })}
+        </EuiButtonEmpty>
       );
     }
 
     return (
       <div>
-        <EuiFlexGroup alignItems={'flexEnd'}>
+        <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
           <EuiFlexItem>
             <EuiText size="xs">
               <b>
@@ -227,10 +231,10 @@ export class FeatureTable extends Component<Props, {}> {
             </EuiFlexItem>
           ))}
         </EuiFlexGroup>
-        <EuiHorizontalRule margin={'m'} />
+        <EuiHorizontalRule margin="m" />
         {accordions.flatMap((a, idx) => [
           a.element,
-          <EuiHorizontalRule key={`accordion-hr-${idx}`} margin={'m'} />,
+          <EuiHorizontalRule key={`accordion-hr-${idx}`} margin="m" />,
         ])}
       </div>
     );
diff --git a/x-pack/plugins/spaces/public/management/edit_space/manage_space_page.tsx b/x-pack/plugins/spaces/public/management/edit_space/manage_space_page.tsx
index d00ee0bb26a3e59..f6a2667f1d84e45 100644
--- a/x-pack/plugins/spaces/public/management/edit_space/manage_space_page.tsx
+++ b/x-pack/plugins/spaces/public/management/edit_space/manage_space_page.tsx
@@ -13,7 +13,6 @@ import {
   EuiLoadingSpinner,
   EuiPageContentBody,
   EuiSpacer,
-  EuiText,
   EuiTitle,
 } from '@elastic/eui';
 import _ from 'lodash';
@@ -31,6 +30,7 @@ import type { Space } from 'src/plugins/spaces_oss/common';
 
 import type { FeaturesPluginStart, KibanaFeature } from '../../../../features/public';
 import { isReservedSpace } from '../../../common';
+import { getSpaceColor, getSpaceInitials } from '../../space_avatar';
 import type { SpacesManager } from '../../spaces_manager';
 import { UnauthorizedPrompt } from '../components';
 import { toSpaceIdentifier } from '../lib';
@@ -41,6 +41,13 @@ import { DeleteSpacesButton } from './delete_spaces_button';
 import { EnabledFeatures } from './enabled_features';
 import { ReservedSpaceBadge } from './reserved_space_badge';
 
+export interface FormValues extends Partial<Space> {
+  customIdentifier?: boolean;
+  avatarType?: 'initials' | 'image';
+  customAvatarInitials?: boolean;
+  customAvatarColor?: boolean;
+}
+
 interface Props {
   getFeatures: FeaturesPluginStart['getFeatures'];
   notifications: NotificationsStart;
@@ -53,7 +60,7 @@ interface Props {
 }
 
 interface State {
-  space: Partial<Space>;
+  space: FormValues;
   features: KibanaFeature[];
   originalSpace?: Partial<Space>;
   showAlteringActiveSpaceDialog: boolean;
@@ -75,7 +82,9 @@ export class ManageSpacePage extends Component<Props, State> {
       isLoading: true,
       showAlteringActiveSpaceDialog: false,
       saveInProgress: false,
-      space: {},
+      space: {
+        color: getSpaceColor({}),
+      },
       features: [],
     };
   }
@@ -121,7 +130,7 @@ export class ManageSpacePage extends Component<Props, State> {
 
   public getLoadingIndicator = () => (
     <div>
-      <EuiLoadingSpinner size={'xl'} />{' '}
+      <EuiLoadingSpinner size={'xl'} />
       <EuiTitle>
         <h1>Loading...</h1>
       </EuiTitle>
@@ -139,15 +148,6 @@ export class ManageSpacePage extends Component<Props, State> {
       <div data-test-subj="spaces-edit-page">
         {this.getFormHeading()}
 
-        <EuiSpacer size={'s'} />
-
-        <EuiText size="s">
-          <FormattedMessage
-            id="xpack.spaces.management.manageSpacePage.manageDescription"
-            defaultMessage="Organize your saved objects into meaningful categories."
-          />
-        </EuiText>
-
         <EuiSpacer />
 
         <CustomizeSpace
@@ -186,7 +186,7 @@ export class ManageSpacePage extends Component<Props, State> {
     <EuiFlexGroup alignItems="center" gutterSize="s">
       <EuiFlexItem grow={false}>
         <EuiTitle size="m">
-          <h1 className="eui-displayInlineBlock">{this.getTitle()}</h1>
+          <h1>{this.getTitle()}</h1>
         </EuiTitle>
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
@@ -197,12 +197,17 @@ export class ManageSpacePage extends Component<Props, State> {
 
   public getTitle = () => {
     if (this.editingExistingSpace()) {
-      return `Edit space`;
+      return (
+        <FormattedMessage
+          id="xpack.spaces.management.manageSpacePage.editSpaceTitle"
+          defaultMessage="Edit space"
+        />
+      );
     }
     return (
       <FormattedMessage
         id="xpack.spaces.management.manageSpacePage.createSpaceTitle"
-        defaultMessage="Create a space"
+        defaultMessage="Create space"
       />
     );
   };
@@ -271,7 +276,7 @@ export class ManageSpacePage extends Component<Props, State> {
     return null;
   };
 
-  public onSpaceChange = (updatedSpace: Partial<Space>) => {
+  public onSpaceChange = (updatedSpace: FormValues) => {
     this.setState({
       space: updatedSpace,
     });
@@ -280,7 +285,9 @@ export class ManageSpacePage extends Component<Props, State> {
   public saveSpace = () => {
     this.validator.enableValidation();
 
-    const result = this.validator.validateForSave(this.state.space as Space);
+    const originalSpace: Space = this.state.originalSpace as Space;
+    const space: Space = this.state.space as Space;
+    const result = this.validator.validateForSave(space);
     if (result.isInvalid) {
       this.setState({
         formError: result,
@@ -292,9 +299,6 @@ export class ManageSpacePage extends Component<Props, State> {
     if (this.editingExistingSpace()) {
       const { spacesManager } = this.props;
 
-      const originalSpace: Space = this.state.originalSpace as Space;
-      const space: Space = this.state.space as Space;
-
       spacesManager.getActiveSpace().then((activeSpace) => {
         const editingActiveSpace = activeSpace.id === originalSpace.id;
 
@@ -330,7 +334,14 @@ export class ManageSpacePage extends Component<Props, State> {
         }
 
         this.setState({
-          space,
+          space: {
+            ...space,
+            avatarType: space.imageUrl ? 'image' : 'initials',
+            initials: space.initials || getSpaceInitials(space),
+            customIdentifier: false,
+            customAvatarInitials: getSpaceInitials({ name: space.name }) !== space.initials,
+            customAvatarColor: getSpaceColor({ name: space.name }) !== space.color,
+          },
           features,
           originalSpace: space,
           isLoading: false,
@@ -362,16 +373,17 @@ export class ManageSpacePage extends Component<Props, State> {
       color,
       disabledFeatures = [],
       imageUrl,
+      avatarType,
     } = this.state.space;
 
     const params = {
       name,
       id,
       description,
-      initials,
+      initials: avatarType !== 'image' ? initials : '',
       color,
       disabledFeatures,
-      imageUrl,
+      imageUrl: avatarType === 'image' ? imageUrl : '',
     };
 
     let action;
diff --git a/x-pack/plugins/spaces/public/management/edit_space/section_panel/section_panel.tsx b/x-pack/plugins/spaces/public/management/edit_space/section_panel/section_panel.tsx
index 68de71bda83b34d..ef568c1db935927 100644
--- a/x-pack/plugins/spaces/public/management/edit_space/section_panel/section_panel.tsx
+++ b/x-pack/plugins/spaces/public/management/edit_space/section_panel/section_panel.tsx
@@ -30,7 +30,7 @@ export class SectionPanel extends Component<Props, {}> {
     return (
       <EuiFlexGroup alignItems={'baseline'} gutterSize="s" responsive={false}>
         <EuiFlexItem grow={false}>
-          <EuiTitle size="m">
+          <EuiTitle size="s">
             <h2>
               {this.props.iconType && (
                 <Fragment>
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 157e990ef66cad0..ea69a8698e2fd6d 100644
--- a/x-pack/plugins/spaces/public/management/lib/validate_space.ts
+++ b/x-pack/plugins/spaces/public/management/lib/validate_space.ts
@@ -5,10 +5,14 @@
  * 2.0.
  */
 
+import { isValidHex } from '@elastic/eui';
+
 import { i18n } from '@kbn/i18n';
 import type { Space } from 'src/plugins/spaces_oss/common';
 
 import { isReservedSpace } from '../../../common/is_reserved_space';
+import { getSpaceAvatarComponent, getSpaceColor, getSpaceInitials } from '../../space_avatar';
+import type { FormValues } from '../edit_space/manage_space_page';
 import { isValidSpaceIdentifier } from './space_identifier_utils';
 
 interface SpaceValidatorOptions {
@@ -30,7 +34,7 @@ export class SpaceValidator {
     this.shouldValidate = false;
   }
 
-  public validateSpaceName(space: Partial<Space>) {
+  public validateSpaceName(space: FormValues) {
     if (!this.shouldValidate) {
       return valid();
     }
@@ -54,7 +58,7 @@ export class SpaceValidator {
     return valid();
   }
 
-  public validateSpaceDescription(space: Partial<Space>) {
+  public validateSpaceDescription(space: FormValues) {
     if (!this.shouldValidate) {
       return valid();
     }
@@ -70,7 +74,7 @@ export class SpaceValidator {
     return valid();
   }
 
-  public validateURLIdentifier(space: Partial<Space>) {
+  public validateURLIdentifier(space: FormValues) {
     if (!this.shouldValidate) {
       return valid();
     }
@@ -102,17 +106,86 @@ export class SpaceValidator {
     return valid();
   }
 
-  public validateEnabledFeatures(space: Partial<Space>) {
+  public validateAvatarInitials(space: FormValues) {
+    if (!this.shouldValidate) {
+      return valid();
+    }
+
+    if (space.avatarType !== 'image' && !space.initials) {
+      return invalid(
+        i18n.translate('xpack.spaces.management.validateSpace.describeMaxLengthErrorMessage', {
+          defaultMessage: 'Enter initials.',
+        })
+      );
+    }
+
+    return valid();
+  }
+
+  public validateAvatarColor(space: FormValues) {
+    if (!this.shouldValidate) {
+      return valid();
+    }
+
+    if (space.avatarType !== 'image') {
+      if (!space.color) {
+        return invalid(
+          i18n.translate('xpack.spaces.management.validateSpace.describeMaxLengthErrorMessage', {
+            defaultMessage: 'Select a color.',
+          })
+        );
+      }
+
+      if (!isValidHex(space.color)) {
+        return invalid(
+          i18n.translate('xpack.spaces.management.validateSpace.describeMaxLengthErrorMessage', {
+            defaultMessage: 'Enter a valid HEX color code.',
+          })
+        );
+      }
+    }
+
+    return valid();
+  }
+
+  public validateAvatarImage(space: FormValues) {
+    if (!this.shouldValidate) {
+      return valid();
+    }
+
+    if (space.avatarType === 'image' && !space.imageUrl) {
+      return invalid(
+        i18n.translate('xpack.spaces.management.validateSpace.describeMaxLengthErrorMessage', {
+          defaultMessage: 'Upload an image.',
+        })
+      );
+    }
+
+    return valid();
+  }
+
+  public validateEnabledFeatures(space: FormValues) {
     return valid();
   }
 
-  public validateForSave(space: Space) {
+  public validateForSave(space: FormValues) {
     const { isInvalid: isNameInvalid } = this.validateSpaceName(space);
     const { isInvalid: isDescriptionInvalid } = this.validateSpaceDescription(space);
     const { isInvalid: isIdentifierInvalid } = this.validateURLIdentifier(space);
+    const { isInvalid: isAvatarInitialsInvalid } = this.validateAvatarInitials(space);
+    const { isInvalid: isAvatarColorInvalid } = this.validateAvatarColor(space);
+    const { isInvalid: isAvatarImageInvalid } = this.validateAvatarImage(space);
     const { isInvalid: areFeaturesInvalid } = this.validateEnabledFeatures(space);
 
-    if (isNameInvalid || isDescriptionInvalid || isIdentifierInvalid || areFeaturesInvalid) {
+    if (
+      isNameInvalid ||
+      isDescriptionInvalid ||
+      isIdentifierInvalid ||
+      isAvatarInitialsInvalid ||
+      isAvatarColorInvalid ||
+      isAvatarImageInvalid ||
+      areFeaturesInvalid
+    ) {
       return invalid();
     }
 
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 a4f797e441ab5ed..c4b6610b34f952a 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
@@ -158,7 +158,7 @@ export class SpacesGridPage extends Component<Props, State> {
       >
         <FormattedMessage
           id="xpack.spaces.management.spacesGridPage.createSpaceButtonLabel"
-          defaultMessage="Create a space"
+          defaultMessage="Create space"
         />
       </EuiButton>
     );
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 c97ec5fbcc227fd..00d9dd8b18a67fa 100644
--- a/x-pack/plugins/spaces/public/management/spaces_management_app.tsx
+++ b/x-pack/plugins/spaces/public/management/spaces_management_app.tsx
@@ -80,6 +80,7 @@ export const spacesManagementApp = Object.freeze({
               text: i18n.translate('xpack.spaces.management.createSpaceBreadcrumb', {
                 defaultMessage: 'Create',
               }),
+              href: '/create',
             },
           ]);