diff --git a/src/admin/components/elements/ReactSelect/MultiValue/index.scss b/src/admin/components/elements/ReactSelect/MultiValue/index.scss
index 8ac2748d35..02c112e61c 100644
--- a/src/admin/components/elements/ReactSelect/MultiValue/index.scss
+++ b/src/admin/components/elements/ReactSelect/MultiValue/index.scss
@@ -12,14 +12,4 @@
       cursor: grab;
     }
   }
-
-  .rs__multi-value__remove {
-    padding: 0 base(.125);
-    cursor: pointer;
-
-    &:hover {
-      color: var(--theme-elevation-800);
-      background: var(--theme-error-150);
-    }
-  }
 }
diff --git a/src/admin/components/elements/ReactSelect/MultiValueLabel/index.scss b/src/admin/components/elements/ReactSelect/MultiValueLabel/index.scss
index 14186f57d1..87113ecffb 100644
--- a/src/admin/components/elements/ReactSelect/MultiValueLabel/index.scss
+++ b/src/admin/components/elements/ReactSelect/MultiValueLabel/index.scss
@@ -1,16 +1,15 @@
 @import '../../../../scss/styles.scss';
 
 .multi-value-label {
+  @extend %small;
   display: flex;
+  align-items: center;
+  padding: 0 base(.125) 0 base(.25);
+  max-width: 150px;
+  color: currentColor;
 
-  &__label {
-    padding: 0 base(.125) 0 base(.25);
-    max-width: 150px;
-    color: currentColor;
-
-    > * {
-      text-overflow: ellipsis;
-      overflow: hidden;
-    }
+  &__text {
+    text-overflow: ellipsis;
+    overflow: hidden;
   }
 }
diff --git a/src/admin/components/elements/ReactSelect/MultiValueLabel/index.tsx b/src/admin/components/elements/ReactSelect/MultiValueLabel/index.tsx
index 6df6f78ef5..032591f288 100644
--- a/src/admin/components/elements/ReactSelect/MultiValueLabel/index.tsx
+++ b/src/admin/components/elements/ReactSelect/MultiValueLabel/index.tsx
@@ -14,14 +14,13 @@ export const MultiValueLabel: React.FC<MultiValueProps<Option>> = (props) => {
 
   return (
     <div className={baseClass}>
-      <div className={`${baseClass}__label`}>
-        <SelectComponents.MultiValueLabel
-          {...props}
-          innerProps={{
-            ...draggableProps || {},
-          }}
-        />
-      </div>
+      <SelectComponents.MultiValueLabel
+        {...props}
+        innerProps={{
+          className: `${baseClass}__text`,
+          ...draggableProps || {},
+        }}
+      />
     </div>
   );
 };
diff --git a/src/admin/components/elements/ReactSelect/MultiValueRemove/index.scss b/src/admin/components/elements/ReactSelect/MultiValueRemove/index.scss
new file mode 100644
index 0000000000..d93c8824ed
--- /dev/null
+++ b/src/admin/components/elements/ReactSelect/MultiValueRemove/index.scss
@@ -0,0 +1,24 @@
+@import '../../../../scss/styles.scss';
+
+.multi-value-remove {
+  cursor: pointer;
+  width: base(.75);
+  height: base(.75);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  background-color: transparent;
+  border: none;
+  padding: 0;
+
+  &:hover {
+    color: var(--theme-elevation-800);
+    background: var(--theme-error-150);
+  }
+
+  &__icon {
+    width: 100%;
+    height: 100%;
+  }
+}
diff --git a/src/admin/components/elements/ReactSelect/MultiValueRemove/index.tsx b/src/admin/components/elements/ReactSelect/MultiValueRemove/index.tsx
new file mode 100644
index 0000000000..f017959e8c
--- /dev/null
+++ b/src/admin/components/elements/ReactSelect/MultiValueRemove/index.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { MultiValueRemoveProps } from 'react-select/src/components/MultiValue';
+import X from '../../../icons/X';
+import Tooltip from '../../Tooltip';
+import { Option as OptionType } from '../types';
+import './index.scss';
+
+const baseClass = 'multi-value-remove';
+
+export const MultiValueRemove: React.FC<MultiValueRemoveProps<OptionType>> = (props) => {
+  const {
+    innerProps,
+  } = props;
+  const [showTooltip, setShowTooltip] = React.useState(false);
+  const { t } = useTranslation('general');
+
+  return (
+    <button
+      {...innerProps}
+      type="button"
+      className={baseClass}
+      onMouseEnter={() => setShowTooltip(true)}
+      onMouseLeave={() => setShowTooltip(false)}
+      onClick={(e) => {
+        setShowTooltip(false);
+        innerProps.onClick(e);
+      }}
+    >
+      <Tooltip
+        className={`${baseClass}__tooltip`}
+        show={showTooltip}
+        delay={350}
+      >
+        {t('remove')}
+      </Tooltip>
+      <X className={`${baseClass}__icon`} />
+    </button>
+  );
+};
diff --git a/src/admin/components/elements/ReactSelect/ValueContainer/index.scss b/src/admin/components/elements/ReactSelect/ValueContainer/index.scss
index 0cac212a3d..41bc946078 100644
--- a/src/admin/components/elements/ReactSelect/ValueContainer/index.scss
+++ b/src/admin/components/elements/ReactSelect/ValueContainer/index.scss
@@ -6,6 +6,7 @@
   .rs__value-container {
     padding: base(.25) 0;
     min-height: base(1.5);
+    overflow: visible;
 
     > * {
       margin: 0;
@@ -15,11 +16,17 @@
 
     &--is-multi {
       margin-left: - base(0.25);
+      width: calc(100% + base(0.5));
       padding-top: base(0.25);
       padding-bottom: base(0.25);
+      padding-left: base(0.25);
 
       .rs__multi-value {
-        margin: base(.125);
+        margin: calc(#{base(.125)} - #{$style-stroke-width-s * 2});
+      }
+
+      &.rs__value-container--has-value {
+        padding-left: 0;
       }
     }
   }
diff --git a/src/admin/components/elements/ReactSelect/index.scss b/src/admin/components/elements/ReactSelect/index.scss
index 0ff2b8e8c7..2fb544d262 100644
--- a/src/admin/components/elements/ReactSelect/index.scss
+++ b/src/admin/components/elements/ReactSelect/index.scss
@@ -1,7 +1,7 @@
 @import '../../../scss/styles';
 
-div.react-select {
-  div.rs__control {
+.react-select {
+  .rs__control {
     @include formInput;
     height: auto;
     padding-top: base(.25);
diff --git a/src/admin/components/elements/ReactSelect/index.tsx b/src/admin/components/elements/ReactSelect/index.tsx
index 10f0e37f3c..63816e1de7 100644
--- a/src/admin/components/elements/ReactSelect/index.tsx
+++ b/src/admin/components/elements/ReactSelect/index.tsx
@@ -24,6 +24,7 @@ import { MultiValue } from './MultiValue';
 import { SingleValue } from '../../forms/field-types/Relationship/select-components/SingleValue';
 import { ValueContainer } from './ValueContainer';
 import { ClearIndicator } from './ClearIndicator';
+import { MultiValueRemove } from './MultiValueRemove';
 import { Control } from './Control';
 import './index.scss';
 
@@ -79,6 +80,7 @@ const SelectAdapter: React.FC<Props> = (props) => {
         SingleValue,
         MultiValue,
         MultiValueLabel,
+        MultiValueRemove,
         DropdownIndicator: Chevron,
         ClearIndicator,
         Control,
diff --git a/src/admin/components/forms/field-types/Relationship/AddNew/index.tsx b/src/admin/components/forms/field-types/Relationship/AddNew/index.tsx
index 4eb2018591..1f65125643 100644
--- a/src/admin/components/forms/field-types/Relationship/AddNew/index.tsx
+++ b/src/admin/components/forms/field-types/Relationship/AddNew/index.tsx
@@ -106,11 +106,13 @@ export const AddNewRelation: React.FC<Props> = ({ path, hasMany, relationTo, val
               onMouseEnter={() => setShowTooltip(true)}
               onMouseLeave={() => setShowTooltip(false)}
             >
-              {showTooltip && (
-                <Tooltip className={`${baseClass}__tooltip`}>
-                  {t('addNewLabel', { label: relatedCollections[0].labels.singular })}
-                </Tooltip>
-              )}
+              <Tooltip
+                className={`${baseClass}__tooltip`}
+                show={showTooltip}
+                delay={350}
+              >
+                {t('addNewLabel', { label: relatedCollections[0].labels.singular })}
+              </Tooltip>
               <Plus />
             </DocumentDrawerToggler>
             <DocumentDrawer onSave={onSave} />
diff --git a/src/admin/components/forms/field-types/Relationship/select-components/MultiValueLabel/index.scss b/src/admin/components/forms/field-types/Relationship/select-components/MultiValueLabel/index.scss
index d0abce67c7..0ab236ee20 100644
--- a/src/admin/components/forms/field-types/Relationship/select-components/MultiValueLabel/index.scss
+++ b/src/admin/components/forms/field-types/Relationship/select-components/MultiValueLabel/index.scss
@@ -1,9 +1,24 @@
 @import '../../../../../../scss/styles.scss';
 
-.multi-value-label {
+.relationship--multi-value-label {
   display: flex;
 
+  &__content {
+    @extend %small;
+    padding: 0 base(.125) 0 base(.25);
+    max-width: 150px;
+    color: currentColor;
+    display: flex;
+    align-items: center;
+  }
+
+  &__text {
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
   &__drawer-toggler {
+    position: relative;
     background: none;
     border: none;
     cursor: pointer;
@@ -22,15 +37,4 @@
       background-color: var(--theme-elevation-100);
     }
   }
-
-  &__label {
-    padding: 0 base(.125) 0 base(.25);
-    max-width: 150px;
-    color: currentColor;
-
-    > * {
-      text-overflow: ellipsis;
-      overflow: hidden;
-    }
-  }
 }
diff --git a/src/admin/components/forms/field-types/Relationship/select-components/MultiValueLabel/index.tsx b/src/admin/components/forms/field-types/Relationship/select-components/MultiValueLabel/index.tsx
index fa547bbf51..0c932f9c6e 100644
--- a/src/admin/components/forms/field-types/Relationship/select-components/MultiValueLabel/index.tsx
+++ b/src/admin/components/forms/field-types/Relationship/select-components/MultiValueLabel/index.tsx
@@ -1,12 +1,14 @@
-import React, { Fragment, useEffect } from 'react';
+import React, { Fragment, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { components, MultiValueProps } from 'react-select';
 import { useDocumentDrawer } from '../../../../../elements/DocumentDrawer';
+import Tooltip from '../../../../../elements/Tooltip';
 import Edit from '../../../../../icons/Edit';
 import { useAuth } from '../../../../../utilities/Auth';
 import { Option } from '../../types';
 import './index.scss';
 
-const baseClass = 'multi-value-label';
+const baseClass = 'relationship--multi-value-label';
 
 export const MultiValueLabel: React.FC<MultiValueProps<Option>> = (props) => {
   const {
@@ -22,6 +24,8 @@ export const MultiValueLabel: React.FC<MultiValueProps<Option>> = (props) => {
   } = props;
 
   const { permissions } = useAuth();
+  const [showTooltip, setShowTooltip] = useState(false);
+  const { t } = useTranslation('general');
   const hasReadPermission = Boolean(permissions?.collections?.[relationTo]?.read?.permission);
 
   const [DocumentDrawer, DocumentDrawerToggler, { isDrawerOpen }] = useDocumentDrawer({
@@ -35,10 +39,11 @@ export const MultiValueLabel: React.FC<MultiValueProps<Option>> = (props) => {
 
   return (
     <div className={baseClass}>
-      <div className={`${baseClass}__label`}>
+      <div className={`${baseClass}__content`}>
         <components.MultiValueLabel
           {...props}
           innerProps={{
+            className: `${baseClass}__text`,
             ...draggableProps || {},
           }}
         />
@@ -48,7 +53,17 @@ export const MultiValueLabel: React.FC<MultiValueProps<Option>> = (props) => {
           <DocumentDrawerToggler
             className={`${baseClass}__drawer-toggler`}
             aria-label={`Edit ${label}`}
+            onMouseEnter={() => setShowTooltip(true)}
+            onMouseLeave={() => setShowTooltip(false)}
+            onClick={() => setShowTooltip(false)}
           >
+            <Tooltip
+              className={`${baseClass}__tooltip`}
+              show={showTooltip}
+              delay={350}
+            >
+              {t('editLabel', { label: '' })}
+            </Tooltip>
             <Edit />
           </DocumentDrawerToggler>
           <DocumentDrawer />
diff --git a/src/admin/components/forms/field-types/Relationship/select-components/SingleValue/index.scss b/src/admin/components/forms/field-types/Relationship/select-components/SingleValue/index.scss
index 837d8cd40c..2cb33faa41 100644
--- a/src/admin/components/forms/field-types/Relationship/select-components/SingleValue/index.scss
+++ b/src/admin/components/forms/field-types/Relationship/select-components/SingleValue/index.scss
@@ -9,9 +9,11 @@
     max-width: unset;
     display: flex;
     align-items: center;
+    overflow: visible;
   }
 
   &__drawer-toggler {
+    position: relative;
     background: none;
     border: none;
     cursor: pointer;
diff --git a/src/admin/components/forms/field-types/Relationship/select-components/SingleValue/index.tsx b/src/admin/components/forms/field-types/Relationship/select-components/SingleValue/index.tsx
index 90ce8fb045..73185b672c 100644
--- a/src/admin/components/forms/field-types/Relationship/select-components/SingleValue/index.tsx
+++ b/src/admin/components/forms/field-types/Relationship/select-components/SingleValue/index.tsx
@@ -1,6 +1,8 @@
-import React, { Fragment, useEffect } from 'react';
+import React, { Fragment, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { components as SelectComponents, SingleValueProps } from 'react-select';
 import { useDocumentDrawer } from '../../../../../elements/DocumentDrawer';
+import Tooltip from '../../../../../elements/Tooltip';
 import Edit from '../../../../../icons/Edit';
 import { useAuth } from '../../../../../utilities/Auth';
 import { Option } from '../../types';
@@ -23,6 +25,8 @@ export const SingleValue: React.FC<SingleValueProps<Option>> = (props) => {
     },
   } = props;
 
+  const [showTooltip, setShowTooltip] = useState(false);
+  const { t } = useTranslation('general');
   const { permissions } = useAuth();
   const hasReadPermission = Boolean(permissions?.collections?.[relationTo]?.read?.permission);
 
@@ -46,7 +50,17 @@ export const SingleValue: React.FC<SingleValueProps<Option>> = (props) => {
                 className={`${baseClass}__drawer-toggler`}
                 aria-label={`Edit ${label}`}
                 onMouseDown={(e) => e.stopPropagation()} // prevents react-select dropdown from opening
+                onMouseEnter={() => setShowTooltip(true)}
+                onMouseLeave={() => setShowTooltip(false)}
+                onClick={() => setShowTooltip(false)}
               >
+                <Tooltip
+                  className={`${baseClass}__tooltip`}
+                  show={showTooltip}
+                  delay={350}
+                >
+                  {t('editLabel', { label: '' })}
+                </Tooltip>
                 <Edit />
               </DocumentDrawerToggler>
             </Fragment>
diff --git a/src/admin/scss/type.scss b/src/admin/scss/type.scss
index 4d94425cc8..499b22f2f3 100644
--- a/src/admin/scss/type.scss
+++ b/src/admin/scss/type.scss
@@ -79,7 +79,7 @@
 
 %small {
   margin: 0;
-  font-size: base(.4);
+  font-size: 11px;
   line-height: 1.5;
 }