diff --git a/docs/development/core/public/kibana-plugin-core-public.doclinksstart.links.md b/docs/development/core/public/kibana-plugin-core-public.doclinksstart.links.md
index 2f82ab9098fa3..f39f9909d3c3c 100644
--- a/docs/development/core/public/kibana-plugin-core-public.doclinksstart.links.md
+++ b/docs/development/core/public/kibana-plugin-core-public.doclinksstart.links.md
@@ -136,6 +136,7 @@ readonly links: {
         readonly upgradeAssistant: {
             readonly overview: string;
             readonly batchReindex: string;
+            readonly remoteReindex: string;
         };
         readonly rollupJobs: string;
         readonly elasticsearch: Record<string, string>;
diff --git a/src/core/public/doc_links/doc_links_service.ts b/src/core/public/doc_links/doc_links_service.ts
index 784bb38f503fb..c1bf9f9d5e567 100644
--- a/src/core/public/doc_links/doc_links_service.ts
+++ b/src/core/public/doc_links/doc_links_service.ts
@@ -159,6 +159,7 @@ export class DocLinksService {
         upgradeAssistant: {
           overview: `${KIBANA_DOCS}upgrade-assistant.html`,
           batchReindex: `${KIBANA_DOCS}batch-start-resume-reindex.html`,
+          remoteReindex: `${ELASTICSEARCH_DOCS}docs-reindex.html#reindex-from-remote`,
         },
         rollupJobs: `${KIBANA_DOCS}data-rollups.html`,
         elasticsearch: {
@@ -646,6 +647,7 @@ export interface DocLinksStart {
     readonly upgradeAssistant: {
       readonly overview: string;
       readonly batchReindex: string;
+      readonly remoteReindex: string;
     };
     readonly rollupJobs: string;
     readonly elasticsearch: Record<string, string>;
diff --git a/src/core/public/public.api.md b/src/core/public/public.api.md
index 4f9b65dcd83a5..951a3c5172d3c 100644
--- a/src/core/public/public.api.md
+++ b/src/core/public/public.api.md
@@ -605,6 +605,7 @@ export interface DocLinksStart {
         readonly upgradeAssistant: {
             readonly overview: string;
             readonly batchReindex: string;
+            readonly remoteReindex: string;
         };
         readonly rollupJobs: string;
         readonly elasticsearch: Record<string, string>;
diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
index 4220e024856f3..27ee3538d52b0 100644
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/x-pack/plugins/translations/translations/ja-JP.json
@@ -25347,8 +25347,6 @@
     "xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.continueButtonLabel": "再インデックスを続ける",
     "xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.insufficientPrivilegeCallout.calloutTitle": "このインデックスを再インデックスするための権限がありません",
     "xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.readonlyCallout.backgroundResumeDetail": "再インデックスはバックグラウンドで継続しますが、Kibana がシャットダウンまたは再起動した場合、このページに戻り再インデックスを再開させる必要があります。",
-    "xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.readonlyCallout.calloutTitle": "インデックスは再インデックス中にドキュメントを投入、更新、または削除できません",
-    "xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.readonlyCallout.cantStopDetail": "ドキュメントの更新を停止できない場合、または新しいクラスターに再インデックスする必要がある場合は、異なるアップグレード方法をお勧めします。",
     "xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexButton.reindexingLabel": "再インデックス中…",
     "xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexButton.resumeLabel": "再開",
     "xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexButton.runReindexLabel": "再インデックスを実行",
diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
index 6cc4f112b5f72..6c7330360563b 100644
--- a/x-pack/plugins/translations/translations/zh-CN.json
+++ b/x-pack/plugins/translations/translations/zh-CN.json
@@ -25779,8 +25779,6 @@
     "xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.continueButtonLabel": "继续重新索引",
     "xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.insufficientPrivilegeCallout.calloutTitle": "您没有足够的权限来重新索引此索引",
     "xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.readonlyCallout.backgroundResumeDetail": "重新索引将在后台继续，但如果 Kibana 关闭或重新启动，您将需要返回此页，才能恢复重新索引。",
-    "xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.readonlyCallout.calloutTitle": "在重新索引时，索引无法采集、更新或删除文档",
-    "xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.readonlyCallout.cantStopDetail": "如果您无法停止文档更新或需要重新索引到新的集群中，请考虑使用不同的升级策略。",
     "xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexButton.reindexingLabel": "正在重新索引……",
     "xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexButton.resumeLabel": "恢复",
     "xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexButton.runReindexLabel": "运行重新索引",
diff --git a/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/reindex/flyout/__snapshots__/checklist_step.test.tsx.snap b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/reindex/flyout/__snapshots__/checklist_step.test.tsx.snap
index ff2559ecd8302..f3a1723c9c6ea 100644
--- a/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/reindex/flyout/__snapshots__/checklist_step.test.tsx.snap
+++ b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/reindex/flyout/__snapshots__/checklist_step.test.tsx.snap
@@ -3,35 +3,34 @@
 exports[`ChecklistFlyout renders 1`] = `
 <Fragment>
   <EuiFlyoutBody>
-    <EuiCallOut
-      color="warning"
-      iconType="alert"
-      title={
-        <FormattedMessage
-          defaultMessage="Index is unable to ingest, update, or delete documents while reindexing"
-          id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.readonlyCallout.calloutTitle"
-          values={Object {}}
-        />
-      }
-    >
+    <EuiText>
       <p>
         <FormattedMessage
-          defaultMessage="If you can’t stop document updates or need to reindex into a new cluster, consider using a different upgrade strategy."
-          id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.readonlyCallout.cantStopDetail"
-          values={Object {}}
+          defaultMessage="The index will be read-only during reindexing. You won't be able to add, update, or delete documents until reindexing is complete. If you need to reindex to a new cluster, use the reindex API. {docsLink}"
+          id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexDescription"
+          values={
+            Object {
+              "docsLink": <EuiLink
+                href="https://www.elastic.co/guide/en/elasticsearch/reference/mocked-test-branch/docs-reindex.html#reindex-from-remote"
+                target="_blank"
+              >
+                Learn more
+              </EuiLink>,
+            }
+          }
         />
       </p>
       <p>
         <FormattedMessage
-          defaultMessage="Reindexing will continue in the background, but if Kibana shuts down or restarts you will need to return to this page to resume reindexing."
+          defaultMessage="Reindexing is performed in the background. You can return to the Upgrade Assistant to view progress or resume reindexing after a Kibana restart."
           id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.readonlyCallout.backgroundResumeDetail"
           values={Object {}}
         />
       </p>
-    </EuiCallOut>
+    </EuiText>
     <EuiSpacer />
     <ReindexProgress
-      cancelReindex={[Function]}
+      cancelReindex={[MockFunction]}
       reindexState={
         Object {
           "errorMessage": null,
@@ -73,10 +72,10 @@ exports[`ChecklistFlyout renders 1`] = `
           disabled={false}
           fill={true}
           isLoading={false}
-          onClick={[Function]}
+          onClick={[MockFunction]}
         >
           <FormattedMessage
-            defaultMessage="Run reindex"
+            defaultMessage="Start reindexing"
             id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexButton.runReindexLabel"
             values={Object {}}
           />
diff --git a/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/reindex/flyout/__snapshots__/warning_step.test.tsx.snap b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/reindex/flyout/__snapshots__/warning_step.test.tsx.snap
index bec337087e534..2f68d35b67505 100644
--- a/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/reindex/flyout/__snapshots__/warning_step.test.tsx.snap
+++ b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/reindex/flyout/__snapshots__/warning_step.test.tsx.snap
@@ -2,40 +2,7 @@
 
 exports[`WarningsFlyoutStep renders 1`] = `
 <Fragment>
-  <EuiFlyoutBody>
-    <EuiCallOut
-      color="danger"
-      iconType="alert"
-      title={
-        <FormattedMessage
-          defaultMessage="This index requires destructive changes that cannot be reversed"
-          id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.warningsStep.destructiveCallout.calloutTitle"
-          values={Object {}}
-        />
-      }
-    >
-      <p>
-        <FormattedMessage
-          defaultMessage="Back up the index before continuing. To proceed with the reindex, accept each change."
-          id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.warningsStep.destructiveCallout.calloutDetail"
-          values={Object {}}
-        />
-      </p>
-    </EuiCallOut>
-    <EuiSpacer />
-    <EuiTitle
-      size="s"
-    >
-      <h3>
-        <FormattedMessage
-          defaultMessage="Accept changes"
-          id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.warningsStep.acceptChangesTitle"
-          values={Object {}}
-        />
-      </h3>
-    </EuiTitle>
-    <EuiSpacer />
-  </EuiFlyoutBody>
+  <EuiFlyoutBody />
   <EuiFlyoutFooter>
     <EuiFlexGroup
       justifyContent="spaceBetween"
@@ -45,11 +12,11 @@ exports[`WarningsFlyoutStep renders 1`] = `
       >
         <EuiButtonEmpty
           flush="left"
-          iconType="cross"
+          iconType="arrowLeft"
           onClick={[MockFunction]}
         >
           <FormattedMessage
-            defaultMessage="Cancel"
+            defaultMessage="Back"
             id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.cancelButtonLabel"
             values={Object {}}
           />
@@ -59,13 +26,13 @@ exports[`WarningsFlyoutStep renders 1`] = `
         grow={false}
       >
         <EuiButton
-          color="danger"
+          color="primary"
           disabled={false}
           fill={true}
           onClick={[MockFunction]}
         >
           <FormattedMessage
-            defaultMessage="Continue with reindex"
+            defaultMessage="Continue reindexing"
             id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.continueButtonLabel"
             values={Object {}}
           />
diff --git a/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/reindex/flyout/checklist_step.test.tsx b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/reindex/flyout/checklist_step.test.tsx
index a4cc5bd89aae9..c68f580494b29 100644
--- a/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/reindex/flyout/checklist_step.test.tsx
+++ b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/reindex/flyout/checklist_step.test.tsx
@@ -14,6 +14,24 @@ import { LoadingState } from '../../../../types';
 import type { ReindexState } from '../use_reindex_state';
 import { ChecklistFlyoutStep } from './checklist_step';
 
+jest.mock('../../../../../app_context', () => {
+  const { docLinksServiceMock } = jest.requireActual(
+    '../../../../../../../../../../src/core/public/doc_links/doc_links_service.mock'
+  );
+
+  return {
+    useAppContext: () => {
+      return {
+        services: {
+          core: {
+            docLinks: docLinksServiceMock.createStartContract(),
+          },
+        },
+      };
+    },
+  };
+});
+
 describe('ChecklistFlyout', () => {
   const defaultProps = {
     indexName: 'myIndex',
diff --git a/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/reindex/flyout/checklist_step.tsx b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/reindex/flyout/checklist_step.tsx
index 91f687eba767b..e0b9b25d73235 100644
--- a/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/reindex/flyout/checklist_step.tsx
+++ b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/reindex/flyout/checklist_step.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { Fragment, useCallback } from 'react';
+import React, { Fragment } from 'react';
 
 import {
   EuiButton,
@@ -15,20 +15,18 @@ import {
   EuiFlexItem,
   EuiFlyoutBody,
   EuiFlyoutFooter,
+  EuiLink,
   EuiSpacer,
+  EuiText,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { METRIC_TYPE } from '@kbn/analytics';
+import { i18n } from '@kbn/i18n';
 
 import { ReindexStatus } from '../../../../../../../common/types';
-import {
-  uiMetricService,
-  UIM_REINDEX_START_CLICK,
-  UIM_REINDEX_STOP_CLICK,
-} from '../../../../../lib/ui_metric';
 import { LoadingState } from '../../../../types';
 import type { ReindexState } from '../use_reindex_state';
 import { ReindexProgress } from './progress';
+import { useAppContext } from '../../../../../app_context';
 
 const buttonLabel = (status?: ReindexStatus) => {
   switch (status) {
@@ -50,21 +48,21 @@ const buttonLabel = (status?: ReindexStatus) => {
       return (
         <FormattedMessage
           id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexButton.resumeLabel"
-          defaultMessage="Resume"
+          defaultMessage="Resume reindexing"
         />
       );
     case ReindexStatus.cancelled:
       return (
         <FormattedMessage
           id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexButton.restartLabel"
-          defaultMessage="Restart reindex"
+          defaultMessage="Restart reindexing"
         />
       );
     default:
       return (
         <FormattedMessage
           id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexButton.runReindexLabel"
-          defaultMessage="Run reindex"
+          defaultMessage="Start reindexing"
         />
       );
   }
@@ -79,22 +77,18 @@ export const ChecklistFlyoutStep: React.FunctionComponent<{
   startReindex: () => void;
   cancelReindex: () => void;
 }> = ({ closeFlyout, reindexState, startReindex, cancelReindex }) => {
+  const {
+    services: {
+      core: { docLinks },
+    },
+  } = useAppContext();
+
   const { loadingState, status, hasRequiredPrivileges } = reindexState;
   const loading = loadingState === LoadingState.Loading || status === ReindexStatus.inProgress;
   const isCompleted = status === ReindexStatus.completed;
   const hasFetchFailed = status === ReindexStatus.fetchFailed;
   const hasReindexingFailed = status === ReindexStatus.failed;
 
-  const onStartReindex = useCallback(() => {
-    uiMetricService.trackUiMetric(METRIC_TYPE.CLICK, UIM_REINDEX_START_CLICK);
-    startReindex();
-  }, [startReindex]);
-
-  const onStopReindex = useCallback(() => {
-    uiMetricService.trackUiMetric(METRIC_TYPE.CLICK, UIM_REINDEX_STOP_CLICK);
-    cancelReindex();
-  }, [cancelReindex]);
-
   return (
     <Fragment>
       <EuiFlyoutBody>
@@ -138,33 +132,34 @@ export const ChecklistFlyoutStep: React.FunctionComponent<{
             </EuiCallOut>
           </>
         )}
-        <EuiCallOut
-          title={
-            <FormattedMessage
-              id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.readonlyCallout.calloutTitle"
-              defaultMessage="Index is unable to ingest, update, or delete documents while reindexing"
-            />
-          }
-          color="warning"
-          iconType="alert"
-        >
+        <EuiText>
           <p>
             <FormattedMessage
-              id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.readonlyCallout.cantStopDetail"
-              defaultMessage="If you can’t stop document updates or need to reindex into a new cluster,
-                consider using a different upgrade strategy."
+              id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexDescription"
+              defaultMessage="The index will be read-only during reindexing. You won't be able to add, update, or delete documents until reindexing is complete. If you need to reindex to a new cluster, use the reindex API. {docsLink}"
+              values={{
+                docsLink: (
+                  <EuiLink target="_blank" href={docLinks.links.upgradeAssistant.remoteReindex}>
+                    {i18n.translate(
+                      'xpack.upgradeAssistant.checkupTab.reindexing.flyout.learnMoreLinkLabel',
+                      {
+                        defaultMessage: 'Learn more',
+                      }
+                    )}
+                  </EuiLink>
+                ),
+              }}
             />
           </p>
           <p>
             <FormattedMessage
               id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.readonlyCallout.backgroundResumeDetail"
-              defaultMessage="Reindexing will continue in the background, but if Kibana shuts down or restarts you will
-                need to return to this page to resume reindexing."
+              defaultMessage="Reindexing is performed in the background. You can return to the Upgrade Assistant to view progress or resume reindexing after a Kibana restart."
             />
           </p>
-        </EuiCallOut>
+        </EuiText>
         <EuiSpacer />
-        <ReindexProgress reindexState={reindexState} cancelReindex={onStopReindex} />
+        <ReindexProgress reindexState={reindexState} cancelReindex={cancelReindex} />
       </EuiFlyoutBody>
       <EuiFlyoutFooter>
         <EuiFlexGroup justifyContent="spaceBetween">
@@ -182,7 +177,7 @@ export const ChecklistFlyoutStep: React.FunctionComponent<{
                 fill
                 color={status === ReindexStatus.paused ? 'warning' : 'primary'}
                 iconType={status === ReindexStatus.paused ? 'play' : undefined}
-                onClick={onStartReindex}
+                onClick={startReindex}
                 isLoading={loading}
                 disabled={loading || !hasRequiredPrivileges}
                 data-test-subj="startReindexingButton"
diff --git a/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/reindex/flyout/container.tsx b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/reindex/flyout/container.tsx
index 78647e9a51eb0..82d0f57c22a55 100644
--- a/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/reindex/flyout/container.tsx
+++ b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/reindex/flyout/container.tsx
@@ -5,9 +5,10 @@
  * 2.0.
  */
 
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { EuiFlyoutHeader, EuiSpacer, EuiTitle } from '@elastic/eui';
+import { METRIC_TYPE } from '@kbn/analytics';
 
 import { EnrichedDeprecationInfo, ReindexStatus } from '../../../../../../../common/types';
 
@@ -15,11 +16,11 @@ import type { ReindexStateContext } from '../context';
 import { ChecklistFlyoutStep } from './checklist_step';
 import { WarningsFlyoutStep } from './warnings_step';
 import { DeprecationBadge } from '../../../../shared';
-
-enum ReindexFlyoutStep {
-  reindexWarnings,
-  checklist,
-}
+import {
+  UIM_REINDEX_START_CLICK,
+  UIM_REINDEX_STOP_CLICK,
+  uiMetricService,
+} from '../../../../../lib/ui_metric';
 
 export interface ReindexFlyoutProps extends ReindexStateContext {
   deprecation: EnrichedDeprecationInfo;
@@ -36,45 +37,54 @@ export const ReindexFlyout: React.FunctionComponent<ReindexFlyoutProps> = ({
   const { status, reindexWarnings } = reindexState;
   const { index } = deprecation;
 
-  // If there are any warnings and we haven't started reindexing, show the warnings step first.
-  const [currentFlyoutStep, setCurrentFlyoutStep] = useState<ReindexFlyoutStep>(
-    reindexWarnings && reindexWarnings.length > 0 && status === undefined
-      ? ReindexFlyoutStep.reindexWarnings
-      : ReindexFlyoutStep.checklist
-  );
+  const [showWarningsStep, setShowWarningsStep] = useState(false);
 
-  let flyoutContents: React.ReactNode;
+  const onStartReindex = useCallback(() => {
+    uiMetricService.trackUiMetric(METRIC_TYPE.CLICK, UIM_REINDEX_START_CLICK);
+    startReindex();
+  }, [startReindex]);
 
-  switch (currentFlyoutStep) {
-    case ReindexFlyoutStep.reindexWarnings:
-      flyoutContents = (
-        <WarningsFlyoutStep
-          closeFlyout={closeFlyout}
-          warnings={reindexState.reindexWarnings!}
-          advanceNextStep={() => setCurrentFlyoutStep(ReindexFlyoutStep.checklist)}
-        />
-      );
-      break;
-    case ReindexFlyoutStep.checklist:
-      flyoutContents = (
-        <ChecklistFlyoutStep
-          closeFlyout={closeFlyout}
-          reindexState={reindexState}
-          startReindex={startReindex}
-          cancelReindex={cancelReindex}
-        />
-      );
-      break;
-    default:
-      throw new Error(`Invalid flyout step: ${currentFlyoutStep}`);
-  }
+  const onStopReindex = useCallback(() => {
+    uiMetricService.trackUiMetric(METRIC_TYPE.CLICK, UIM_REINDEX_STOP_CLICK);
+    cancelReindex();
+  }, [cancelReindex]);
+
+  const startReindexWithWarnings = () => {
+    if (
+      reindexWarnings &&
+      reindexWarnings.length > 0 &&
+      status !== ReindexStatus.inProgress &&
+      status !== ReindexStatus.completed
+    ) {
+      setShowWarningsStep(true);
+    } else {
+      onStartReindex();
+    }
+  };
+  const flyoutContents = showWarningsStep ? (
+    <WarningsFlyoutStep
+      warnings={reindexState.reindexWarnings ?? []}
+      hideWarningsStep={() => setShowWarningsStep(false)}
+      continueReindex={() => {
+        setShowWarningsStep(false);
+        onStartReindex();
+      }}
+    />
+  ) : (
+    <ChecklistFlyoutStep
+      closeFlyout={closeFlyout}
+      startReindex={startReindexWithWarnings}
+      reindexState={reindexState}
+      cancelReindex={onStopReindex}
+    />
+  );
 
   return (
     <>
       <EuiFlyoutHeader hasBorder>
         <DeprecationBadge
           isCritical={deprecation.isCritical}
-          isResolved={reindexState.status === ReindexStatus.completed}
+          isResolved={status === ReindexStatus.completed}
         />
         <EuiSpacer size="s" />
         <EuiTitle size="s" data-test-subj="flyoutTitle">
@@ -87,6 +97,7 @@ export const ReindexFlyout: React.FunctionComponent<ReindexFlyoutProps> = ({
           </h2>
         </EuiTitle>
       </EuiFlyoutHeader>
+
       {flyoutContents}
     </>
   );
diff --git a/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/reindex/flyout/progress.test.tsx b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/reindex/flyout/progress.test.tsx
index 971ea9d550e01..1ee4cf2453bdc 100644
--- a/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/reindex/flyout/progress.test.tsx
+++ b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/reindex/flyout/progress.test.tsx
@@ -52,15 +52,15 @@ describe('ReindexProgress', () => {
               Object {
                 "status": "inProgress",
                 "title": <FormattedMessage
-                  defaultMessage="Setting old index to read-only"
-                  id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexingChecklist.readonlyStepTitle"
+                  defaultMessage="Setting original index to read-only."
+                  id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexingChecklist.inProgress.readonlyStepTitle"
                   values={Object {}}
                 />,
               },
               Object {
                 "status": "incomplete",
                 "title": <FormattedMessage
-                  defaultMessage="Creating new index"
+                  defaultMessage="Create new index."
                   id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexingChecklist.createIndexStepTitle"
                   values={Object {}}
                 />,
@@ -82,7 +82,7 @@ describe('ReindexProgress', () => {
               Object {
                 "status": "incomplete",
                 "title": <FormattedMessage
-                  defaultMessage="Swapping original index with alias"
+                  defaultMessage="Swap original index with alias."
                   id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexingChecklist.aliasSwapStepTitle"
                   values={Object {}}
                 />,
diff --git a/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/reindex/flyout/progress.tsx b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/reindex/flyout/progress.tsx
index f5dc04783b031..cf32a8bb3ab65 100644
--- a/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/reindex/flyout/progress.tsx
+++ b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/reindex/flyout/progress.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React from 'react';
+import React, { ReactNode } from 'react';
 
 import { EuiCallOut, EuiFlexGroup, EuiFlexItem, EuiLink, EuiText, EuiTitle } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
@@ -42,11 +42,18 @@ const ReindexingDocumentsStepTitle: React.FunctionComponent<{
       <>
         <FormattedMessage
           id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexingChecklist.cancelledTitle"
-          defaultMessage="Reindexing cancelled"
+          defaultMessage="Reindexing cancelled."
         />
       </>
     );
   }
+
+  // step is in progress after the new index is created and while it's not completed yet
+  const stepInProgress =
+    status === ReindexStatus.inProgress &&
+    (lastCompletedStep === ReindexStep.newIndexCreated ||
+      lastCompletedStep === ReindexStep.reindexStarted);
+  // but the reindex can only be cancelled after it has started
   const showCancelLink =
     status === ReindexStatus.inProgress && lastCompletedStep === ReindexStep.reindexStarted;
 
@@ -89,10 +96,17 @@ const ReindexingDocumentsStepTitle: React.FunctionComponent<{
   return (
     <EuiFlexGroup component="span">
       <EuiFlexItem grow={false}>
-        <FormattedMessage
-          id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexingChecklist.reindexingDocumentsStepTitle"
-          defaultMessage="Reindexing documents"
-        />
+        {stepInProgress ? (
+          <FormattedMessage
+            id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexingChecklist.inProgress.reindexingDocumentsStepTitle"
+            defaultMessage="Reindexing documents."
+          />
+        ) : (
+          <FormattedMessage
+            id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexingChecklist.reindexingDocumentsStepTitle"
+            defaultMessage="Reindex documents."
+          />
+        )}
       </EuiFlexItem>
       {showCancelLink && (
         <EuiFlexItem>
@@ -110,6 +124,47 @@ const ReindexingDocumentsStepTitle: React.FunctionComponent<{
 };
 
 const orderedSteps = Object.values(ReindexStep).sort() as number[];
+const getStepTitle = (step: ReindexStep, inProgress?: boolean): ReactNode => {
+  if (step === ReindexStep.readonly) {
+    return inProgress ? (
+      <FormattedMessage
+        id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexingChecklist.inProgress.readonlyStepTitle"
+        defaultMessage="Setting original index to read-only."
+      />
+    ) : (
+      <FormattedMessage
+        id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexingChecklist.readonlyStepTitle"
+        defaultMessage="Set original index to read-only."
+      />
+    );
+  }
+  if (step === ReindexStep.newIndexCreated) {
+    return inProgress ? (
+      <FormattedMessage
+        id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexingChecklist.inProgress.createIndexStepTitle"
+        defaultMessage="Creating new index."
+      />
+    ) : (
+      <FormattedMessage
+        id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexingChecklist.createIndexStepTitle"
+        defaultMessage="Create new index."
+      />
+    );
+  }
+  if (step === ReindexStep.aliasCreated) {
+    return inProgress ? (
+      <FormattedMessage
+        id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexingChecklist.inProgress.aliasSwapStepTitle"
+        defaultMessage="Swapping original index with alias."
+      />
+    ) : (
+      <FormattedMessage
+        id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexingChecklist.aliasSwapStepTitle"
+        defaultMessage="Swap original index with alias."
+      />
+    );
+  }
+};
 
 /**
  * Displays a list of steps in the reindex operation, the current status, a progress bar,
@@ -125,33 +180,39 @@ export const ReindexProgress: React.FunctionComponent<{
     status,
     reindexTaskPercComplete,
   } = props.reindexState;
-  const stepDetails = (thisStep: ReindexStep): Pick<StepProgressStep, 'status' | 'children'> => {
+  const getProgressStep = (thisStep: ReindexStep): StepProgressStep => {
     const previousStep = orderedSteps[orderedSteps.indexOf(thisStep) - 1];
 
     if (status === ReindexStatus.failed && lastCompletedStep === previousStep) {
       return {
+        title: getStepTitle(thisStep),
         status: 'failed',
         children: <ErrorCallout {...{ errorMessage }} />,
       };
     } else if (status === ReindexStatus.paused && lastCompletedStep === previousStep) {
       return {
+        title: getStepTitle(thisStep),
         status: 'paused',
         children: <PausedCallout />,
       };
     } else if (status === ReindexStatus.cancelled && lastCompletedStep === previousStep) {
       return {
+        title: getStepTitle(thisStep),
         status: 'cancelled',
       };
     } else if (status === undefined || lastCompletedStep < previousStep) {
       return {
+        title: getStepTitle(thisStep),
         status: 'incomplete',
       };
     } else if (lastCompletedStep === previousStep) {
       return {
+        title: getStepTitle(thisStep, true),
         status: 'inProgress',
       };
     } else {
       return {
+        title: getStepTitle(thisStep),
         status: 'complete',
       };
     }
@@ -194,34 +255,10 @@ export const ReindexProgress: React.FunctionComponent<{
   }
 
   const steps = [
-    {
-      title: (
-        <FormattedMessage
-          id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexingChecklist.readonlyStepTitle"
-          defaultMessage="Setting old index to read-only"
-        />
-      ),
-      ...stepDetails(ReindexStep.readonly),
-    },
-    {
-      title: (
-        <FormattedMessage
-          id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexingChecklist.createIndexStepTitle"
-          defaultMessage="Creating new index"
-        />
-      ),
-      ...stepDetails(ReindexStep.newIndexCreated),
-    },
+    getProgressStep(ReindexStep.readonly),
+    getProgressStep(ReindexStep.newIndexCreated),
     reindexingDocsStep,
-    {
-      title: (
-        <FormattedMessage
-          id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.reindexingChecklist.aliasSwapStepTitle"
-          defaultMessage="Swapping original index with alias"
-        />
-      ),
-      ...stepDetails(ReindexStep.aliasCreated),
-    },
+    getProgressStep(ReindexStep.aliasCreated),
   ];
 
   return (
diff --git a/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/reindex/flyout/warning_step.test.tsx b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/reindex/flyout/warning_step.test.tsx
index 287048d8f257e..11caed5e03a66 100644
--- a/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/reindex/flyout/warning_step.test.tsx
+++ b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/reindex/flyout/warning_step.test.tsx
@@ -43,10 +43,9 @@ jest.mock('../../../../../app_context', () => {
 
 describe('WarningsFlyoutStep', () => {
   const defaultProps = {
-    advanceNextStep: jest.fn(),
     warnings: [] as ReindexWarning[],
-    closeFlyout: jest.fn(),
-    renderGlobalCallouts: jest.fn(),
+    hideWarningsStep: jest.fn(),
+    continueReindex: jest.fn(),
   };
 
   it('renders', () => {
@@ -80,7 +79,7 @@ describe('WarningsFlyoutStep', () => {
       const button = wrapper.find('EuiButton');
 
       button.simulate('click');
-      expect(defaultPropsWithWarnings.advanceNextStep).not.toHaveBeenCalled();
+      expect(defaultPropsWithWarnings.continueReindex).not.toHaveBeenCalled();
 
       // first warning (customTypeName)
       wrapper.find(`input#${idForWarning(0)}`).simulate('change');
@@ -88,7 +87,7 @@ describe('WarningsFlyoutStep', () => {
       wrapper.find(`input#${idForWarning(1)}`).simulate('change');
       button.simulate('click');
 
-      expect(defaultPropsWithWarnings.advanceNextStep).toHaveBeenCalled();
+      expect(defaultPropsWithWarnings.continueReindex).toHaveBeenCalled();
     });
   }
 });
diff --git a/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/reindex/flyout/warnings_step.tsx b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/reindex/flyout/warnings_step.tsx
index 0596c692a9f38..d8909d4ea039f 100644
--- a/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/reindex/flyout/warnings_step.tsx
+++ b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecation_types/reindex/flyout/warnings_step.tsx
@@ -41,9 +41,9 @@ const warningToComponentMap: {
 
 export const idForWarning = (id: number) => `reindexWarning-${id}`;
 interface WarningsConfirmationFlyoutProps {
-  closeFlyout: () => void;
+  hideWarningsStep: () => void;
+  continueReindex: () => void;
   warnings: ReindexWarning[];
-  advanceNextStep: () => void;
 }
 
 /**
@@ -52,8 +52,8 @@ interface WarningsConfirmationFlyoutProps {
  */
 export const WarningsFlyoutStep: React.FunctionComponent<WarningsConfirmationFlyoutProps> = ({
   warnings,
-  closeFlyout,
-  advanceNextStep,
+  hideWarningsStep,
+  continueReindex,
 }) => {
   const {
     services: {
@@ -86,64 +86,66 @@ export const WarningsFlyoutStep: React.FunctionComponent<WarningsConfirmationFly
   return (
     <>
       <EuiFlyoutBody>
-        <EuiCallOut
-          title={
-            <FormattedMessage
-              id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.warningsStep.destructiveCallout.calloutTitle"
-              defaultMessage="This index requires destructive changes that cannot be reversed"
-            />
-          }
-          color="danger"
-          iconType="alert"
-        >
-          <p>
-            <FormattedMessage
-              id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.warningsStep.destructiveCallout.calloutDetail"
-              defaultMessage="Back up the index before continuing. To proceed with the reindex, accept each change."
-            />
-          </p>
-        </EuiCallOut>
-
-        <EuiSpacer />
-        <EuiTitle size="s">
-          <h3>
-            <FormattedMessage
-              id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.warningsStep.acceptChangesTitle"
-              defaultMessage="Accept changes"
-            />
-          </h3>
-        </EuiTitle>
-        <EuiSpacer />
-
-        {warnings.map((warning, index) => {
-          const WarningCheckbox = warningToComponentMap[warning.warningType];
-          return (
-            <WarningCheckbox
-              key={idForWarning(index)}
-              isChecked={checkedIds[idForWarning(index)]}
-              onChange={onChange}
-              docLinks={links}
-              id={idForWarning(index)}
-              meta={warning.meta}
-            />
-          );
-        })}
+        {warnings.length > 0 && (
+          <>
+            <EuiCallOut
+              title={
+                <FormattedMessage
+                  id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.warningsStep.destructiveCallout.calloutTitle"
+                  defaultMessage="This index requires destructive changes that cannot be reversed"
+                />
+              }
+              color="warning"
+              iconType="alert"
+            >
+              <p>
+                <FormattedMessage
+                  id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.warningsStep.destructiveCallout.calloutDetail"
+                  defaultMessage="Back up the index before continuing. To proceed with the reindex, accept each change."
+                />
+              </p>
+            </EuiCallOut>
+            <EuiSpacer />
+            <EuiTitle size="s">
+              <h3>
+                <FormattedMessage
+                  id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.warningsStep.acceptChangesTitle"
+                  defaultMessage="Accept changes"
+                />
+              </h3>
+            </EuiTitle>
+            <EuiSpacer />
+            {warnings.map((warning, index) => {
+              const WarningCheckbox = warningToComponentMap[warning.warningType];
+              return (
+                <WarningCheckbox
+                  key={idForWarning(index)}
+                  isChecked={checkedIds[idForWarning(index)]}
+                  onChange={onChange}
+                  docLinks={links}
+                  id={idForWarning(index)}
+                  meta={warning.meta}
+                />
+              );
+            })}
+          </>
+        )}
       </EuiFlyoutBody>
       <EuiFlyoutFooter>
         <EuiFlexGroup justifyContent="spaceBetween">
           <EuiFlexItem grow={false}>
-            <EuiButtonEmpty iconType="cross" onClick={closeFlyout} flush="left">
+            <EuiButtonEmpty iconType="arrowLeft" onClick={hideWarningsStep} flush="left">
               <FormattedMessage
                 id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.cancelButtonLabel"
-                defaultMessage="Cancel"
+                defaultMessage="Back"
               />
             </EuiButtonEmpty>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <EuiButton fill color="danger" onClick={advanceNextStep} disabled={blockAdvance}>
+            <EuiButton fill color="primary" onClick={continueReindex} disabled={blockAdvance}>
               <FormattedMessage
                 id="xpack.upgradeAssistant.checkupTab.reindexing.flyout.checklistStep.continueButtonLabel"
-                defaultMessage="Continue with reindex"
+                defaultMessage="Continue reindexing"
               />
             </EuiButton>
           </EuiFlexItem>