diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phase_icon/phase_icon.scss b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phase_icon/phase_icon.scss
index 5bd6790dda572..361c5caf37b9a 100644
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phase_icon/phase_icon.scss
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phase_icon/phase_icon.scss
@@ -7,9 +7,9 @@
   border-radius: 50%;
   background-color: $euiColorLightestShade;
   &--disabled {
-    margin-top: $euiSizeS;
     width: $euiSize;
     height: $euiSize;
+    margin: $euiSizeS 0;
   }
   &--delete {
     background-color: $euiColorLightShade;
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/delete_phase/delete_phase.scss b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/delete_phase/delete_phase.scss
deleted file mode 100644
index 60a39c7f1e9a6..0000000000000
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/delete_phase/delete_phase.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.ilmDeletePhase {
-  .euiCommentEvent {
-    &__header {
-      padding: $euiSize;
-      background-color: $euiColorEmptyShade;
-    }
-    &__body {
-      padding: $euiSize;
-    }
-  }
-}
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/delete_phase/delete_phase.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/delete_phase/delete_phase.tsx
index 75c94961b9ff3..874b98361de40 100644
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/delete_phase/delete_phase.tsx
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/delete_phase/delete_phase.tsx
@@ -6,85 +6,9 @@
  */
 
 import React, { FunctionComponent } from 'react';
-import { get } from 'lodash';
-import {
-  EuiFlexItem,
-  EuiFlexGroup,
-  EuiTitle,
-  EuiButtonEmpty,
-  EuiSpacer,
-  EuiText,
-  EuiComment,
-} from '@elastic/eui';
-
-import { FormattedMessage } from '@kbn/i18n-react';
-
-import { useFormData } from '../../../../../../shared_imports';
-import { i18nTexts } from '../../../i18n_texts';
-import { usePhaseTimings, globalFields } from '../../../form';
-import { PhaseIcon } from '../../phase_icon';
-import { MinAgeField, SnapshotPoliciesField } from '../shared_fields';
-import { PhaseErrorIndicator } from '../phase/phase_error_indicator';
-
-import './delete_phase.scss';
-
-const formFieldPaths = {
-  enabled: globalFields.deleteEnabled.path,
-};
+import { Phase } from '../phase';
+import { SnapshotPoliciesField } from '../shared_fields';
 
 export const DeletePhase: FunctionComponent = () => {
-  const { setDeletePhaseEnabled } = usePhaseTimings();
-  const [formData] = useFormData({
-    watch: formFieldPaths.enabled,
-  });
-
-  const enabled = get(formData, formFieldPaths.enabled);
-
-  if (!enabled) {
-    return null;
-  }
-  const phaseTitle = (
-    <EuiFlexGroup alignItems="center" gutterSize={'s'} wrap>
-      <EuiFlexItem grow={false}>
-        <EuiTitle size={'s'}>
-          <h2>{i18nTexts.editPolicy.titles.delete}</h2>
-        </EuiTitle>
-      </EuiFlexItem>
-
-      <EuiFlexItem>
-        <EuiButtonEmpty
-          onClick={() => setDeletePhaseEnabled(false)}
-          data-test-subj={'disableDeletePhaseButton'}
-        >
-          <FormattedMessage
-            id="xpack.indexLifecycleMgmt.editPolicy.deletePhase.removeDeletePhaseButtonLabel"
-            defaultMessage="Remove"
-          />
-        </EuiButtonEmpty>
-      </EuiFlexItem>
-
-      <EuiFlexItem grow={false}>
-        <PhaseErrorIndicator phase={'delete'} />
-      </EuiFlexItem>
-    </EuiFlexGroup>
-  );
-
-  return (
-    <>
-      <EuiSpacer />
-      <EuiComment
-        data-test-subj="delete-phase"
-        username={phaseTitle}
-        actions={<MinAgeField phase={'delete'} />}
-        className="ilmDeletePhase ilmPhase"
-        timelineIcon={<PhaseIcon enabled={enabled} phase={'delete'} />}
-      >
-        <EuiText color="subdued" size={'s'} style={{ maxWidth: '50%' }}>
-          {i18nTexts.editPolicy.descriptions.delete}
-        </EuiText>
-        <EuiSpacer />
-        <SnapshotPoliciesField />
-      </EuiComment>
-    </>
-  );
+  return <Phase phase="delete" topLevelSettings={<SnapshotPoliciesField />} />;
 };
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/phase/phase.scss b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/phase/phase.scss
index 75d25c0bffa50..f9d38e499d6fa 100644
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/phase/phase.scss
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/phase/phase.scss
@@ -1,28 +1,7 @@
-.ilmPhase {
-  .euiCommentEvent {
-    &__header {
-      padding: $euiSize;
-    }
-    &__body {
-      padding: $euiSize;
-    }
-  }
+.ilmSettingsAccordion {
   .ilmSettingsButton {
     color: $euiColorPrimary;
     padding-top: $euiSizeS;
     padding-bottom: $euiSizeS;
   }
-  .euiCommentTimeline {
-    padding-top: $euiSize;
-    &::before {
-      height: calc(100% + #{$euiSizeXXL});
-    }
-  }
-  &--enabled {
-    .euiCommentEvent {
-      &__header {
-        background-color: $euiColorEmptyShade;
-      }
-    }
-  }
 }
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/phase/phase.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/phase/phase.tsx
index d458c6ed9e3f9..f79b3a7a9cbc8 100644
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/phase/phase.tsx
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/phase/phase.tsx
@@ -10,30 +10,28 @@ import React, { FunctionComponent } from 'react';
 import {
   EuiFlexGroup,
   EuiFlexItem,
-  EuiTitle,
   EuiText,
-  EuiComment,
   EuiAccordion,
   EuiSpacer,
-  EuiBadge,
+  EuiTimelineItem,
+  EuiSplitPanel,
+  EuiHorizontalRule,
 } from '@elastic/eui';
 import { get } from 'lodash';
 import { FormattedMessage } from '@kbn/i18n-react';
 
-import { PhaseExceptDelete } from '../../../../../../../common/types';
-import { ToggleField, useFormData } from '../../../../../../shared_imports';
+import { Phase as PhaseType } from '../../../../../../../common/types';
+import { useFormData } from '../../../../../../shared_imports';
 import { i18nTexts } from '../../../i18n_texts';
 import { FormInternal } from '../../../types';
-import { UseField } from '../../../form';
-import { MinAgeField } from '../shared_fields';
 import { PhaseIcon } from '../../phase_icon';
 import { PhaseFooter } from '../../phase_footer';
-import { PhaseErrorIndicator } from './phase_error_indicator';
 
 import './phase.scss';
+import { PhaseTitle } from './phase_title';
 
 interface Props {
-  phase: PhaseExceptDelete;
+  phase: PhaseType;
   /**
    * Settings that should always be visible on the phase when it is enabled.
    */
@@ -47,96 +45,71 @@ export const Phase: FunctionComponent<Props> = ({ children, topLevelSettings, ph
   });
 
   const isHotPhase = phase === 'hot';
+  const isDeletePhase = phase === 'delete';
   // hot phase is always enabled
   const enabled = get(formData, enabledPath) || isHotPhase;
 
-  const phaseTitle = (
-    <EuiFlexGroup alignItems="center" gutterSize={'s'} wrap>
-      {!isHotPhase && (
-        <EuiFlexItem grow={false}>
-          <UseField
-            path={enabledPath}
-            component={ToggleField}
-            componentProps={{
-              euiFieldProps: {
-                'data-test-subj': `enablePhaseSwitch-${phase}`,
-                showLabel: false,
-              },
-            }}
-          />
-        </EuiFlexItem>
-      )}
-      <EuiFlexItem grow={false}>
-        <EuiTitle size={'s'}>
-          <h2>{i18nTexts.editPolicy.titles[phase]}</h2>
-        </EuiTitle>
-      </EuiFlexItem>
-      {isHotPhase && (
-        <EuiFlexItem grow={false}>
-          <EuiBadge>
-            <FormattedMessage
-              id="xpack.indexLifecycleMgmt.editPolicy.phaseTitle.requiredBadge"
-              defaultMessage="Required"
-            />
-          </EuiBadge>
-        </EuiFlexItem>
-      )}
-      <EuiFlexItem grow={false}>
-        <PhaseErrorIndicator phase={phase} />
-      </EuiFlexItem>
-    </EuiFlexGroup>
-  );
-
-  // @ts-ignore
-  const minAge = !isHotPhase && enabled ? <MinAgeField phase={phase} /> : null;
+  // delete phase is hidden when disabled
+  if (isDeletePhase && !enabled) {
+    return null;
+  }
 
   return (
-    <EuiComment
-      username={phaseTitle}
-      actions={minAge}
-      timelineIcon={<PhaseIcon enabled={enabled} phase={phase} />}
-      className={`ilmPhase ${enabled ? 'ilmPhase--enabled' : ''}`}
+    <EuiTimelineItem
+      icon={<PhaseIcon enabled={enabled} phase={phase} />}
+      verticalAlign="top"
       data-test-subj={`${phase}-phase`}
     >
-      <EuiText color="subdued" size={'s'} style={{ maxWidth: '50%' }}>
-        {i18nTexts.editPolicy.descriptions[phase]}
-      </EuiText>
+      <EuiSplitPanel.Outer color="transparent" hasBorder grow>
+        <EuiSplitPanel.Inner color={enabled ? 'transparent' : 'subdued'}>
+          <PhaseTitle phase={phase} />
+        </EuiSplitPanel.Inner>
+        <EuiHorizontalRule margin="none" />
+        <EuiSplitPanel.Inner>
+          <EuiText color="subdued" size="s" style={{ maxWidth: '50%' }}>
+            {i18nTexts.editPolicy.descriptions[phase]}
+          </EuiText>
 
-      {enabled && (
-        <>
-          {!!topLevelSettings ? (
+          {enabled && (
             <>
-              <EuiSpacer />
-              {topLevelSettings}
-            </>
-          ) : (
-            <EuiSpacer size="m" />
-          )}
+              {!!topLevelSettings ? (
+                <>
+                  <EuiSpacer />
+                  {topLevelSettings}
+                </>
+              ) : (
+                <EuiSpacer size="m" />
+              )}
 
-          {children ? (
-            <EuiAccordion
-              id={`${phase}-settingsSwitch`}
-              buttonContent={
-                <FormattedMessage
-                  id="xpack.indexLifecycleMgmt.editPolicy.phaseSettings.buttonLabel"
-                  defaultMessage="Advanced settings"
-                />
-              }
-              buttonClassName="ilmSettingsButton"
-              extraAction={<PhaseFooter phase={phase} />}
-            >
-              <EuiSpacer />
-              {children}
-            </EuiAccordion>
-          ) : (
-            <EuiFlexGroup justifyContent="flexEnd">
-              <EuiFlexItem grow={false}>
-                <PhaseFooter phase={phase} />
-              </EuiFlexItem>
-            </EuiFlexGroup>
+              {children ? (
+                <EuiAccordion
+                  id={`${phase}-settingsSwitch`}
+                  className="ilmSettingsAccordion"
+                  buttonContent={
+                    <FormattedMessage
+                      id="xpack.indexLifecycleMgmt.editPolicy.phaseSettings.buttonLabel"
+                      defaultMessage="Advanced settings"
+                    />
+                  }
+                  buttonClassName="ilmSettingsButton"
+                  extraAction={!isDeletePhase && <PhaseFooter phase={phase} />}
+                >
+                  <EuiSpacer />
+                  {children}
+                </EuiAccordion>
+              ) : (
+                !isDeletePhase && (
+                  <EuiFlexGroup justifyContent="flexEnd">
+                    <EuiFlexItem grow={false}>
+                      <PhaseFooter phase={phase} />
+                    </EuiFlexItem>
+                  </EuiFlexGroup>
+                )
+              )}
+            </>
           )}
-        </>
-      )}
-    </EuiComment>
+        </EuiSplitPanel.Inner>
+      </EuiSplitPanel.Outer>
+    </EuiTimelineItem>
   );
 };
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/phase/phase_error_indicator.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/phase/phase_error_indicator.tsx
deleted file mode 100644
index 647f12669cf77..0000000000000
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/phase/phase_error_indicator.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-/*
- * 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 { i18n } from '@kbn/i18n';
-import React, { FunctionComponent, memo } from 'react';
-import { EuiIconTip } from '@elastic/eui';
-
-import { Phases } from '../../../../../../../common/types';
-import { useFormErrorsContext } from '../../../form';
-
-interface Props {
-  phase: string & keyof Phases;
-}
-
-const i18nTexts = {
-  toolTipContent: i18n.translate('xpack.indexLifecycleMgmt.phaseErrorIcon.tooltipDescription', {
-    defaultMessage: 'This phase contains errors.',
-  }),
-};
-
-/**
- * This component hooks into the form state and updates whenever new form data is inputted.
- */
-export const PhaseErrorIndicator: FunctionComponent<Props> = memo(({ phase }) => {
-  const { errors } = useFormErrorsContext();
-
-  if (Object.keys(errors[phase]).length) {
-    return (
-      <div data-test-subj={`phaseErrorIndicator-${phase}`}>
-        <EuiIconTip type="alert" color="danger" content={i18nTexts.toolTipContent} />
-      </div>
-    );
-  }
-
-  return null;
-});
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/phase/phase_title.scss b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/phase/phase_title.scss
new file mode 100644
index 0000000000000..8b33e672a7371
--- /dev/null
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/phase/phase_title.scss
@@ -0,0 +1,8 @@
+
+.ilmPhaseRequiredBadge {
+  max-width: 150px;
+}
+
+.ilmPhaseTitle {
+  min-width: 100px;
+}
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/phase/phase_title.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/phase/phase_title.tsx
new file mode 100644
index 0000000000000..5c86546951098
--- /dev/null
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/phase/phase_title.tsx
@@ -0,0 +1,119 @@
+/*
+ * 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, { FunctionComponent } from 'react';
+import { get } from 'lodash';
+
+import {
+  EuiBadge,
+  EuiButtonEmpty,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiIconTip,
+  EuiTitle,
+} from '@elastic/eui';
+
+import { FormattedMessage } from '@kbn/i18n-react';
+
+import { Phase } from '../../../../../../../common/types';
+import { ToggleField, useFormData } from '../../../../../../shared_imports';
+import { i18nTexts } from '../../../i18n_texts';
+import { FormInternal } from '../../../types';
+import { UseField, useFormErrorsContext, usePhaseTimings } from '../../../form';
+import { MinAgeField } from '../shared_fields';
+
+import './phase_title.scss';
+
+interface Props {
+  phase: Phase;
+}
+
+export const PhaseTitle: FunctionComponent<Props> = ({ phase }) => {
+  const enabledPath = `_meta.${phase}.enabled`;
+  const [formData] = useFormData<FormInternal>({
+    watch: [enabledPath],
+  });
+
+  const isHotPhase = phase === 'hot';
+  const isDeletePhase = phase === 'delete';
+  const { setDeletePhaseEnabled } = usePhaseTimings();
+  // hot phase is always enabled
+  const enabled = get(formData, enabledPath) || isHotPhase;
+
+  const { errors } = useFormErrorsContext();
+  const hasErrors = Object.keys(errors[phase]).length > 0;
+
+  return (
+    <EuiFlexGroup alignItems="center" gutterSize="s" justifyContent="spaceBetween">
+      <EuiFlexItem grow={true}>
+        <EuiFlexGroup alignItems="center" gutterSize="s" wrap>
+          {!isHotPhase && !isDeletePhase && (
+            <EuiFlexItem grow={false}>
+              <UseField
+                path={enabledPath}
+                component={ToggleField}
+                componentProps={{
+                  euiFieldProps: {
+                    'data-test-subj': `enablePhaseSwitch-${phase}`,
+                    showLabel: false,
+                  },
+                }}
+              />
+            </EuiFlexItem>
+          )}
+          <EuiFlexItem grow={false} className="ilmPhaseTitle">
+            <EuiTitle size="s">
+              <h2>{i18nTexts.editPolicy.titles[phase]}</h2>
+            </EuiTitle>
+          </EuiFlexItem>
+          {isHotPhase && (
+            <EuiFlexItem grow={false}>
+              <EuiBadge className="ilmPhaseRequiredBadge">
+                <FormattedMessage
+                  id="xpack.indexLifecycleMgmt.editPolicy.phaseTitle.requiredBadge"
+                  defaultMessage="Required"
+                />
+              </EuiBadge>
+            </EuiFlexItem>
+          )}
+          {isDeletePhase && (
+            <EuiFlexItem grow={false}>
+              <EuiButtonEmpty
+                onClick={() => setDeletePhaseEnabled(false)}
+                data-test-subj={'disableDeletePhaseButton'}
+              >
+                <FormattedMessage
+                  id="xpack.indexLifecycleMgmt.editPolicy.deletePhase.removeDeletePhaseButtonLabel"
+                  defaultMessage="Remove"
+                />
+              </EuiButtonEmpty>
+            </EuiFlexItem>
+          )}
+          {hasErrors && (
+            <EuiFlexItem grow={false} data-test-subj={`phaseErrorIndicator-${phase}`}>
+              <EuiIconTip
+                type="alert"
+                color="danger"
+                content={
+                  <FormattedMessage
+                    id="xpack.indexLifecycleMgmt.phaseErrorIcon.tooltipDescription"
+                    defaultMessage="This phase contains errors."
+                  />
+                }
+              />
+            </EuiFlexItem>
+          )}
+        </EuiFlexGroup>
+      </EuiFlexItem>
+      {!isHotPhase && enabled && (
+        <EuiFlexItem grow={false}>
+          <MinAgeField phase={phase} />
+        </EuiFlexItem>
+      )}
+    </EuiFlexGroup>
+  );
+};
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/edit_policy.scss b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/edit_policy.scss
new file mode 100644
index 0000000000000..9263db386d012
--- /dev/null
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/edit_policy.scss
@@ -0,0 +1,7 @@
+// offset the vertical line and the phase icons to align with the phase toggle
+.ilmPhases [class*='euiTimelineItemIcon-top'] {
+  padding-top: $euiSize;
+}
+.ilmPhases [class*='euiTimelineItemIcon-top']::before {
+  top: $euiSizeL;
+}
diff --git a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/edit_policy.tsx b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/edit_policy.tsx
index e7042e4a26223..b63f0b595a540 100644
--- a/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/edit_policy.tsx
+++ b/x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/edit_policy.tsx
@@ -12,6 +12,8 @@ import { get } from 'lodash';
 
 import { useHistory } from 'react-router-dom';
 
+import './edit_policy.scss';
+
 import {
   EuiButton,
   EuiButtonEmpty,
@@ -22,6 +24,7 @@ import {
   EuiSpacer,
   EuiSwitch,
   EuiPageHeader,
+  EuiTimeline,
 } from '@elastic/eui';
 
 import { TextField, useForm, useFormData, useKibana } from '../../../shared_imports';
@@ -235,27 +238,17 @@ export const EditPolicy: React.FunctionComponent = () => {
 
         <EuiSpacer size="l" />
 
-        <div>
+        <EuiTimeline className="ilmPhases">
           <HotPhase />
 
-          <EuiSpacer />
           <WarmPhase />
 
-          <EuiSpacer />
           <ColdPhase />
 
-          {isAllowedByLicense && (
-            <>
-              <EuiSpacer />
-              <FrozenPhase />
-            </>
-          )}
+          {isAllowedByLicense && <FrozenPhase />}
 
-          {/* We can't add the <EuiSpacer /> here as it breaks the layout
-              and makes the connecting line go further that it needs to.
-              There is an issue in EUI to fix this (https://github.com/elastic/eui/issues/4492) */}
           <DeletePhase />
-        </div>
+        </EuiTimeline>
 
         <EuiHorizontalRule />