diff --git a/x-pack/legacy/plugins/graph/public/_mixins.scss b/x-pack/legacy/plugins/graph/public/_mixins.scss
new file mode 100644
index 00000000000000..fb1ef7c8b7bd46
--- /dev/null
+++ b/x-pack/legacy/plugins/graph/public/_mixins.scss
@@ -0,0 +1,5 @@
+@mixin gphFieldBadgeSize {
+  height: $euiSizeL;
+  // Subtract 2 for the border
+  line-height: $euiSizeL - 2px;
+}
diff --git a/x-pack/legacy/plugins/graph/public/components/field_manager/_field_editor.scss b/x-pack/legacy/plugins/graph/public/components/field_manager/_field_editor.scss
index 8b349f93de4435..381d4778cf13b9 100644
--- a/x-pack/legacy/plugins/graph/public/components/field_manager/_field_editor.scss
+++ b/x-pack/legacy/plugins/graph/public/components/field_manager/_field_editor.scss
@@ -1,32 +1,18 @@
-.gphFieldEditorBadge {
-  // 3px to line up with a badge with visible border (gphFieldPickerButton)
-  padding: 3px $euiSizeM 3px 0;
+.gphFieldEditor__badge {
+  @include gphFieldBadgeSize;
 }
 
-.gphFieldEditorBadge--disabled {
+.gphFieldEditor__badge--disabled,
+.gphFieldEditor__badge--disabled:focus {
   opacity: 0.7;
   text-decoration: line-through;
 }
 
-.gphFieldEditorBadge__icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-
-  margin: $euiSizeXS;
-  padding: 0;
-
-  text-align: center;
-}
-
-.gphFieldEditorBadge__icon--dark {
-  color: $euiColorEmptyShade;
-}
-
-.gphFieldEditorBadge__icon--light {
-  color: $euiColorDarkestShade;
+.gphFieldEditor__badgeIcon {
+  width: auto;
+  margin-right: $euiSizeXS;
 }
 
 .gphFieldEditor__displayForm {
-  padding: $euiSizeL;
+  padding: $euiSizeS;
 }
diff --git a/x-pack/legacy/plugins/graph/public/components/field_manager/_field_picker.scss b/x-pack/legacy/plugins/graph/public/components/field_manager/_field_picker.scss
index 2f456a23140fbf..5cda02e3cc8239 100644
--- a/x-pack/legacy/plugins/graph/public/components/field_manager/_field_picker.scss
+++ b/x-pack/legacy/plugins/graph/public/components/field_manager/_field_picker.scss
@@ -1,10 +1,13 @@
-.gphFieldPickerList {
+.gphFieldPicker__popoverPanel {
   width: 350px;
+  padding: $euiSizeXS;
 }
 
-.gphFieldPickerButton {
+.gphFieldPicker__selectableList {
+  margin: 0 (-$euiSizeXS) (-$euiSizeXS);
+}
+
+.gphFieldPicker__button {
+  @include gphFieldBadgeSize;
   color: $euiColorPrimary;
-  background-color: $euiColorEmptyShade;
-  border: 1px solid $euiColorLightShade;
-  padding: $euiSizeXS $euiSizeM;
-}
\ No newline at end of file
+}
diff --git a/x-pack/legacy/plugins/graph/public/components/field_manager/field_editor.tsx b/x-pack/legacy/plugins/graph/public/components/field_manager/field_editor.tsx
index 49e9aa5e6dc106..b9de9b9c628a04 100644
--- a/x-pack/legacy/plugins/graph/public/components/field_manager/field_editor.tsx
+++ b/x-pack/legacy/plugins/graph/public/components/field_manager/field_editor.tsx
@@ -12,8 +12,6 @@ import {
   EuiComboBox,
   EuiColorPicker,
   EuiFieldNumber,
-  isColorDark,
-  hexToRgb,
   // @ts-ignore
   EuiHighlight,
   EuiContextMenu,
@@ -23,6 +21,8 @@ import {
   EuiButtonEmpty,
   EuiButton,
   EuiKeyboardAccessible,
+  EuiForm,
+  EuiSpacer,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import classNames from 'classnames';
@@ -59,8 +59,6 @@ export function FieldEditor({
 
   const isDisabled = initialField.hopSize === 0;
 
-  const darkColor = isColorDark(...hexToRgb(color));
-
   // update local field copy if changed from the outside
   useEffect(() => {
     if (currentField !== initialField) {
@@ -122,11 +120,9 @@ export function FieldEditor({
         <EuiBadge
           color={initialField.color}
           iconSide="right"
-          className={classNames('gphFieldEditorBadge', {
-            'gphFieldEditorBadge--disabled': isDisabled,
+          className={classNames('gphFieldEditor__badge', {
+            'gphFieldEditor__badge--disabled': isDisabled,
           })}
-          iconOnClick={() => {}}
-          iconOnClickAriaLabel=""
           onClickAriaLabel={badgeDescription}
           title=""
           onClick={e => {
@@ -137,13 +133,7 @@ export function FieldEditor({
             }
           }}
         >
-          <LegacyIcon
-            className={classNames('gphFieldEditorBadge__icon', {
-              'gphFieldEditorBadge__icon--dark': darkColor,
-              'gphFieldEditorBadge__icon--light': !darkColor,
-            })}
-            icon={initialField.icon}
-          />
+          <LegacyIcon className={'gphFieldEditor__badgeIcon'} icon={initialField.icon} />
           {initialField.name}
         </EuiBadge>
       }
@@ -191,147 +181,148 @@ export function FieldEditor({
             title: i18n.translate('xpack.graph.fieldManager.displayFormTitle', {
               defaultMessage: 'Edit',
             }),
-            width: 400,
+            width: 280,
             content: (
-              <EuiFlexGroup
-                direction="column"
-                gutterSize="m"
-                className="gphFieldEditor__displayForm"
-              >
+              <EuiForm className="gphFieldEditor__displayForm">
                 {/* This is a workaround to prevent the field combo box from being focussed when opening the panel. */}
                 <EuiKeyboardAccessible>
                   <span style={{ opacity: 0 }} onClick={() => {}} onKeyPress={() => {}} />
                 </EuiKeyboardAccessible>
-                <EuiFlexItem>
-                  <EuiFormRow
-                    display="columnCompressed"
-                    label={i18n.translate('xpack.graph.fieldManager.fieldLabel', {
-                      defaultMessage: 'Field',
-                    })}
-                  >
-                    <EuiComboBox
-                      onChange={choices => {
-                        // value is always defined because it's an unclearable single selection
-                        const newFieldName = choices[0].value!;
+                <EuiFormRow
+                  display="columnCompressed"
+                  label={i18n.translate('xpack.graph.fieldManager.fieldLabel', {
+                    defaultMessage: 'Field',
+                  })}
+                >
+                  <EuiComboBox
+                    onChange={choices => {
+                      // value is always defined because it's an unclearable single selection
+                      const newFieldName = choices[0].value!;
 
-                        updateProp('name', newFieldName);
-                      }}
-                      singleSelection={{ asPlainText: true }}
-                      isClearable={false}
-                      options={toOptions(allFields, initialField)}
-                      selectedOptions={[
-                        {
-                          value: currentField.name,
-                          label: currentField.name,
-                          type: currentField.type,
-                        },
-                      ]}
-                      renderOption={(option, searchValue, contentClassName) => {
-                        const { type, label } = option;
-                        return (
-                          <span className={contentClassName}>
-                            <FieldIcon type={type!} />{' '}
-                            <EuiHighlight search={searchValue}>{label}</EuiHighlight>
-                          </span>
-                        );
-                      }}
-                    />
-                  </EuiFormRow>
+                      updateProp('name', newFieldName);
+                    }}
+                    singleSelection={{ asPlainText: true }}
+                    isClearable={false}
+                    options={toOptions(allFields, initialField)}
+                    selectedOptions={[
+                      {
+                        value: currentField.name,
+                        label: currentField.name,
+                        type: currentField.type,
+                      },
+                    ]}
+                    renderOption={(option, searchValue, contentClassName) => {
+                      const { type, label } = option;
+                      return (
+                        <span className={contentClassName}>
+                          <FieldIcon type={type!} />{' '}
+                          <EuiHighlight search={searchValue}>{label}</EuiHighlight>
+                        </span>
+                      );
+                    }}
+                    compressed
+                  />
+                </EuiFormRow>
 
-                  <EuiFormRow
-                    display="columnCompressed"
-                    label={i18n.translate('xpack.graph.fieldManager.colorLabel', {
-                      defaultMessage: 'Color',
-                    })}
-                  >
-                    <EuiColorPicker
-                      color={color}
-                      onChange={newColor => {
-                        updateProp('color', newColor);
-                      }}
-                    />
-                  </EuiFormRow>
+                <EuiFormRow
+                  display="columnCompressed"
+                  label={i18n.translate('xpack.graph.fieldManager.colorLabel', {
+                    defaultMessage: 'Color',
+                  })}
+                >
+                  <EuiColorPicker
+                    color={color}
+                    onChange={newColor => {
+                      updateProp('color', newColor);
+                    }}
+                    compressed
+                  />
+                </EuiFormRow>
 
-                  <EuiFormRow
-                    display="columnCompressed"
-                    label={i18n.translate('xpack.graph.fieldManager.iconLabel', {
-                      defaultMessage: 'Icon',
-                    })}
-                  >
-                    <EuiComboBox
-                      fullWidth
-                      singleSelection={{ asPlainText: true }}
-                      isClearable={false}
-                      renderOption={(option, searchValue, contentClassName) => {
-                        const { label, value } = option;
-                        return (
-                          <span className={contentClassName}>
-                            <LegacyIcon icon={value!} />{' '}
-                            <EuiHighlight search={searchValue}>{label}</EuiHighlight>
-                          </span>
-                        );
-                      }}
-                      options={iconChoices.map(currentIcon => ({
-                        label: currentIcon.label,
-                        value: currentIcon,
-                      }))}
-                      selectedOptions={[
-                        {
-                          label: icon.label,
-                          value: icon,
-                        },
-                      ]}
-                      onChange={choices => {
-                        updateProp('icon', choices[0].value!);
-                      }}
-                    />
-                  </EuiFormRow>
+                <EuiFormRow
+                  display="columnCompressed"
+                  label={i18n.translate('xpack.graph.fieldManager.iconLabel', {
+                    defaultMessage: 'Icon',
+                  })}
+                >
+                  <EuiComboBox
+                    fullWidth
+                    singleSelection={{ asPlainText: true }}
+                    isClearable={false}
+                    renderOption={(option, searchValue, contentClassName) => {
+                      const { label, value } = option;
+                      return (
+                        <span className={contentClassName}>
+                          <LegacyIcon icon={value!} />{' '}
+                          <EuiHighlight search={searchValue}>{label}</EuiHighlight>
+                        </span>
+                      );
+                    }}
+                    options={iconChoices.map(currentIcon => ({
+                      label: currentIcon.label,
+                      value: currentIcon,
+                    }))}
+                    selectedOptions={[
+                      {
+                        label: icon.label,
+                        value: icon,
+                      },
+                    ]}
+                    onChange={choices => {
+                      updateProp('icon', choices[0].value!);
+                    }}
+                    compressed
+                  />
+                </EuiFormRow>
+
+                <EuiFormRow
+                  display="columnCompressed"
+                  label={i18n.translate('xpack.graph.fieldManager.maxHopsLabel', {
+                    defaultMessage: 'Max hops',
+                  })}
+                >
+                  <EuiFieldNumber
+                    step={1}
+                    min={1}
+                    value={isDisabled ? lastValidHopSize : hopSize}
+                    onChange={({ target: { valueAsNumber } }) => {
+                      const updatedHopSize = Number.isNaN(valueAsNumber) ? 1 : valueAsNumber;
+                      updateProp(isDisabled ? 'lastValidHopSize' : 'hopSize', updatedHopSize);
+                    }}
+                    compressed
+                  />
+                </EuiFormRow>
+
+                <EuiSpacer size="s" />
 
-                  <EuiFormRow
-                    display="columnCompressed"
-                    label={i18n.translate('xpack.graph.fieldManager.maxHopsLabel', {
-                      defaultMessage: 'Maximum hops',
-                    })}
-                  >
-                    <EuiFieldNumber
-                      step={1}
-                      min={1}
-                      value={isDisabled ? lastValidHopSize : hopSize}
-                      onChange={({ target: { valueAsNumber } }) => {
-                        const updatedHopSize = Number.isNaN(valueAsNumber) ? 1 : valueAsNumber;
-                        updateProp(isDisabled ? 'lastValidHopSize' : 'hopSize', updatedHopSize);
+                <EuiFlexGroup direction="row" justifyContent="flexEnd">
+                  <EuiFlexItem grow={false}>
+                    <EuiButtonEmpty
+                      size="s"
+                      onClick={() => {
+                        setCurrentField(initialField);
+                        setOpen(false);
                       }}
-                    />
-                  </EuiFormRow>
-                </EuiFlexItem>
-                <EuiFlexItem>
-                  <EuiFlexGroup direction="row" justifyContent="flexEnd">
-                    <EuiFlexItem grow={false}>
-                      <EuiButtonEmpty
-                        onClick={() => {
-                          setCurrentField(initialField);
-                          setOpen(false);
-                        }}
-                      >
-                        {i18n.translate('xpack.graph.fieldManager.cancelLabel', {
-                          defaultMessage: 'Cancel',
-                        })}
-                      </EuiButtonEmpty>
-                    </EuiFlexItem>
-                    <EuiFlexItem grow={false}>
-                      <EuiButton
-                        fill
-                        disabled={isEqual(initialField, currentField)}
-                        onClick={updateField}
-                      >
-                        {i18n.translate('xpack.graph.fieldManager.updateLabel', {
-                          defaultMessage: 'Update',
-                        })}
-                      </EuiButton>
-                    </EuiFlexItem>
-                  </EuiFlexGroup>
-                </EuiFlexItem>
-              </EuiFlexGroup>
+                    >
+                      {i18n.translate('xpack.graph.fieldManager.cancelLabel', {
+                        defaultMessage: 'Cancel',
+                      })}
+                    </EuiButtonEmpty>
+                  </EuiFlexItem>
+                  <EuiFlexItem grow={false}>
+                    <EuiButton
+                      size="s"
+                      fill
+                      disabled={isEqual(initialField, currentField)}
+                      onClick={updateField}
+                    >
+                      {i18n.translate('xpack.graph.fieldManager.updateLabel', {
+                        defaultMessage: 'Update',
+                      })}
+                    </EuiButton>
+                  </EuiFlexItem>
+                </EuiFlexGroup>
+              </EuiForm>
             ),
           },
         ]}
diff --git a/x-pack/legacy/plugins/graph/public/components/field_manager/field_manager.tsx b/x-pack/legacy/plugins/graph/public/components/field_manager/field_manager.tsx
index 55590e33444e37..7f89b555c9f7a0 100644
--- a/x-pack/legacy/plugins/graph/public/components/field_manager/field_manager.tsx
+++ b/x-pack/legacy/plugins/graph/public/components/field_manager/field_manager.tsx
@@ -42,7 +42,7 @@ export function FieldManager({ state, dispatch }: FieldManagerProps) {
 
   return (
     <I18nProvider>
-      <EuiFlexGroup gutterSize="s" className="gphFieldManager" alignItems="center">
+      <EuiFlexGroup gutterSize="s" className="gphFieldManager" alignItems="center" wrap>
         {selectedFields.map(field => (
           <EuiFlexItem key={field.name} grow={false}>
             <FieldEditor allFields={allFields} {...actionCreators} field={field} />
diff --git a/x-pack/legacy/plugins/graph/public/components/field_manager/field_picker.tsx b/x-pack/legacy/plugins/graph/public/components/field_manager/field_picker.tsx
index 7d220e1640b94e..796d8d57419125 100644
--- a/x-pack/legacy/plugins/graph/public/components/field_manager/field_picker.tsx
+++ b/x-pack/legacy/plugins/graph/public/components/field_manager/field_picker.tsx
@@ -5,7 +5,7 @@
  */
 
 import React, { useState, useEffect, ReactNode } from 'react';
-import { EuiPopover, EuiSelectable, EuiBadge, EuiIcon } from '@elastic/eui';
+import { EuiPopover, EuiSelectable, EuiBadge } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { WorkspaceField } from '../../types';
 
@@ -51,19 +51,19 @@ export function FieldPicker({ fieldMap, selectField, deselectField }: FieldPicke
       panelPaddingSize="none"
       button={
         <EuiBadge
-          className="gphFieldPickerButton"
+          className="gphFieldPicker__button"
+          color="hollow"
+          iconType="plusInCircleFilled"
           onClick={() => setOpen(true)}
-          iconOnClick={() => {}}
-          iconOnClickAriaLabel=""
           onClickAriaLabel={badgeDescription}
           title=""
         >
-          <EuiIcon type="plusInCircleFilled" /> {badgeDescription}
+          {badgeDescription}
         </EuiBadge>
       }
       isOpen={open}
       closePopover={() => setOpen(false)}
-      panelClassName="gphFieldPickerList"
+      panelClassName="gphFieldPicker__popoverPanel"
     >
       {open && (
         <EuiSelectable
@@ -71,6 +71,10 @@ export function FieldPicker({ fieldMap, selectField, deselectField }: FieldPicke
             placeholder: i18n.translate('xpack.graph.fieldManager.fieldSearchPlaceholder', {
               defaultMessage: 'Filter fields',
             }),
+            compressed: true,
+          }}
+          listProps={{
+            className: 'gphFieldPicker__selectableList',
           }}
           searchable
           options={fieldOptions}
diff --git a/x-pack/legacy/plugins/graph/public/index.scss b/x-pack/legacy/plugins/graph/public/index.scss
index d53a702833ea51..067b2c300626df 100644
--- a/x-pack/legacy/plugins/graph/public/index.scss
+++ b/x-pack/legacy/plugins/graph/public/index.scss
@@ -10,7 +10,8 @@
 //   gphChart__legend--small
 //   gphChart__legend-isLoading
 
+@import './mixins';
+
 @import './main';
 @import './angular/templates/index';
-
 @import './components/index';