diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/hooks/use_intra_app_state.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/hooks/use_intra_app_state.tsx
index 565c5b364893c..7bccd3a4b1f58 100644
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/hooks/use_intra_app_state.tsx
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/hooks/use_intra_app_state.tsx
@@ -28,10 +28,11 @@ export const IntraAppStateProvider = memo<{
 }>(({ kibanaScopedHistory, children }) => {
   const internalAppToAppState = useMemo<IntraAppState>(() => {
     return {
-      forRoute: kibanaScopedHistory.location.hash.substr(1),
+      forRoute: new URL(`${kibanaScopedHistory.location.hash.substr(1)}`, 'http://localhost')
+        .pathname,
       routeState: kibanaScopedHistory.location.state as AnyIntraAppRouteState,
     };
-  }, [kibanaScopedHistory.location.hash, kibanaScopedHistory.location.state]);
+  }, [kibanaScopedHistory.location.state, kibanaScopedHistory.location.hash]);
   return (
     <IntraAppStateContext.Provider value={internalAppToAppState}>
       {children}
@@ -57,6 +58,7 @@ export function useIntraAppState<S = AnyIntraAppRouteState>():
     // once so that it does not impact navigation to the page from within the
     // ingest app. side affect is that the browser back button would not work
     // consistently either.
+
     if (location.pathname === intraAppState.forRoute && !wasHandled.has(intraAppState)) {
       wasHandled.add(intraAppState);
       return intraAppState.routeState as S;
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/components/actions_menu.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/components/actions_menu.tsx
index 39fe090e5008c..86d191d4ff904 100644
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/components/actions_menu.tsx
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/components/actions_menu.tsx
@@ -3,7 +3,7 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import React, { memo, useState } from 'react';
+import React, { memo, useState, useMemo } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { EuiContextMenuItem, EuiPortal } from '@elastic/eui';
 import { AgentConfig } from '../../../types';
@@ -17,86 +17,106 @@ export const AgentConfigActionMenu = memo<{
   config: AgentConfig;
   onCopySuccess?: (newAgentConfig: AgentConfig) => void;
   fullButton?: boolean;
-}>(({ config, onCopySuccess, fullButton = false }) => {
-  const hasWriteCapabilities = useCapabilities().write;
-  const [isYamlFlyoutOpen, setIsYamlFlyoutOpen] = useState<boolean>(false);
-  const [isEnrollmentFlyoutOpen, setIsEnrollmentFlyoutOpen] = useState<boolean>(false);
+  enrollmentFlyoutOpenByDefault?: boolean;
+  onCancelEnrollment?: () => void;
+}>(
+  ({
+    config,
+    onCopySuccess,
+    fullButton = false,
+    enrollmentFlyoutOpenByDefault = false,
+    onCancelEnrollment,
+  }) => {
+    const hasWriteCapabilities = useCapabilities().write;
+    const [isYamlFlyoutOpen, setIsYamlFlyoutOpen] = useState<boolean>(false);
+    const [isEnrollmentFlyoutOpen, setIsEnrollmentFlyoutOpen] = useState<boolean>(
+      enrollmentFlyoutOpenByDefault
+    );
 
-  return (
-    <AgentConfigCopyProvider>
-      {(copyAgentConfigPrompt) => {
-        return (
-          <>
-            {isYamlFlyoutOpen ? (
-              <EuiPortal>
-                <ConfigYamlFlyout configId={config.id} onClose={() => setIsYamlFlyoutOpen(false)} />
-              </EuiPortal>
-            ) : null}
-            {isEnrollmentFlyoutOpen && (
-              <EuiPortal>
-                <AgentEnrollmentFlyout
-                  agentConfigs={[config]}
-                  onClose={() => setIsEnrollmentFlyoutOpen(false)}
-                />
-              </EuiPortal>
-            )}
-            <ContextMenuActions
-              button={
-                fullButton
-                  ? {
-                      props: {
-                        iconType: 'arrowDown',
-                        iconSide: 'right',
-                      },
-                      children: (
-                        <FormattedMessage
-                          id="xpack.ingestManager.agentConfigActionMenu.buttonText"
-                          defaultMessage="Actions"
-                        />
-                      ),
-                    }
-                  : undefined
-              }
-              items={[
-                <EuiContextMenuItem
-                  disabled={!hasWriteCapabilities}
-                  icon="plusInCircle"
-                  onClick={() => setIsEnrollmentFlyoutOpen(true)}
-                  key="enrollAgents"
-                >
-                  <FormattedMessage
-                    id="xpack.ingestManager.agentConfigActionMenu.enrollAgentActionText"
-                    defaultMessage="Enroll agent"
-                  />
-                </EuiContextMenuItem>,
-                <EuiContextMenuItem
-                  icon="inspect"
-                  onClick={() => setIsYamlFlyoutOpen(!isYamlFlyoutOpen)}
-                  key="viewConfig"
-                >
-                  <FormattedMessage
-                    id="xpack.ingestManager.agentConfigActionMenu.viewConfigText"
-                    defaultMessage="View config"
-                  />
-                </EuiContextMenuItem>,
-                <EuiContextMenuItem
-                  disabled={!hasWriteCapabilities}
-                  icon="copy"
-                  onClick={() => {
-                    copyAgentConfigPrompt(config, onCopySuccess);
-                  }}
-                  key="copyConfig"
-                >
-                  <FormattedMessage
-                    id="xpack.ingestManager.agentConfigActionMenu.copyConfigActionText"
-                    defaultMessage="Copy config"
+    const onClose = useMemo(() => {
+      if (onCancelEnrollment) {
+        return onCancelEnrollment;
+      } else {
+        return () => setIsEnrollmentFlyoutOpen(false);
+      }
+    }, [onCancelEnrollment, setIsEnrollmentFlyoutOpen]);
+
+    return (
+      <AgentConfigCopyProvider>
+        {(copyAgentConfigPrompt) => {
+          return (
+            <>
+              {isYamlFlyoutOpen ? (
+                <EuiPortal>
+                  <ConfigYamlFlyout
+                    configId={config.id}
+                    onClose={() => setIsYamlFlyoutOpen(false)}
                   />
-                </EuiContextMenuItem>,
-              ]}
-            />
-          </>
-        );
-      }}
-    </AgentConfigCopyProvider>
-  );
-});
+                </EuiPortal>
+              ) : null}
+              {isEnrollmentFlyoutOpen && (
+                <EuiPortal>
+                  <AgentEnrollmentFlyout agentConfigs={[config]} onClose={onClose} />
+                </EuiPortal>
+              )}
+              <ContextMenuActions
+                button={
+                  fullButton
+                    ? {
+                        props: {
+                          iconType: 'arrowDown',
+                          iconSide: 'right',
+                        },
+                        children: (
+                          <FormattedMessage
+                            id="xpack.ingestManager.agentConfigActionMenu.buttonText"
+                            defaultMessage="Actions"
+                          />
+                        ),
+                      }
+                    : undefined
+                }
+                items={[
+                  <EuiContextMenuItem
+                    disabled={!hasWriteCapabilities}
+                    icon="plusInCircle"
+                    onClick={() => setIsEnrollmentFlyoutOpen(true)}
+                    key="enrollAgents"
+                  >
+                    <FormattedMessage
+                      id="xpack.ingestManager.agentConfigActionMenu.enrollAgentActionText"
+                      defaultMessage="Enroll agent"
+                    />
+                  </EuiContextMenuItem>,
+                  <EuiContextMenuItem
+                    icon="inspect"
+                    onClick={() => setIsYamlFlyoutOpen(!isYamlFlyoutOpen)}
+                    key="viewConfig"
+                  >
+                    <FormattedMessage
+                      id="xpack.ingestManager.agentConfigActionMenu.viewConfigText"
+                      defaultMessage="View config"
+                    />
+                  </EuiContextMenuItem>,
+                  <EuiContextMenuItem
+                    disabled={!hasWriteCapabilities}
+                    icon="copy"
+                    onClick={() => {
+                      copyAgentConfigPrompt(config, onCopySuccess);
+                    }}
+                    key="copyConfig"
+                  >
+                    <FormattedMessage
+                      id="xpack.ingestManager.agentConfigActionMenu.copyConfigActionText"
+                      defaultMessage="Copy config"
+                    />
+                  </EuiContextMenuItem>,
+                ]}
+              />
+            </>
+          );
+        }}
+      </AgentConfigCopyProvider>
+    );
+  }
+);
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/details_page/index.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/details_page/index.tsx
index 410c0fcb2d140..eaa161d57bbe4 100644
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/details_page/index.tsx
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/details_page/index.tsx
@@ -3,8 +3,8 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import React, { useMemo, useState } from 'react';
-import { Redirect, useRouteMatch, Switch, Route, useHistory } from 'react-router-dom';
+import React, { useMemo, useState, useCallback } from 'react';
+import { Redirect, useRouteMatch, Switch, Route, useHistory, useLocation } from 'react-router-dom';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage, FormattedDate } from '@kbn/i18n/react';
 import {
@@ -21,14 +21,15 @@ import {
 } from '@elastic/eui';
 import { Props as EuiTabProps } from '@elastic/eui/src/components/tabs/tab';
 import styled from 'styled-components';
-import { AgentConfig } from '../../../types';
+import { AgentConfig, AgentConfigDetailsDeployAgentAction } from '../../../types';
 import { PAGE_ROUTING_PATHS } from '../../../constants';
-import { useGetOneAgentConfig, useLink, useBreadcrumbs } from '../../../hooks';
+import { useGetOneAgentConfig, useLink, useBreadcrumbs, useCore } from '../../../hooks';
 import { Loading } from '../../../components';
 import { WithHeaderLayout } from '../../../layouts';
 import { ConfigRefreshContext, useGetAgentStatus, AgentStatusRefreshContext } from './hooks';
 import { LinkedAgentCount, AgentConfigActionMenu } from '../components';
 import { ConfigDatasourcesView, ConfigSettingsView } from './components';
+import { useIntraAppState } from '../../../hooks/use_intra_app_state';
 
 const Divider = styled.div`
   width: 0;
@@ -48,7 +49,13 @@ export const AgentConfigDetailsPage: React.FunctionComponent = () => {
   const [redirectToAgentConfigList] = useState<boolean>(false);
   const agentStatusRequest = useGetAgentStatus(configId);
   const { refreshAgentStatus } = agentStatusRequest;
+  const {
+    application: { navigateToApp },
+  } = useCore();
+  const routeState = useIntraAppState<AgentConfigDetailsDeployAgentAction>();
   const agentStatus = agentStatusRequest.data?.results;
+  const queryParams = new URLSearchParams(useLocation().search);
+  const openEnrollmentFlyoutOpenByDefault = queryParams.get('openEnrollmentFlyout') === 'true';
 
   const headerLeftContent = useMemo(
     () => (
@@ -95,6 +102,12 @@ export const AgentConfigDetailsPage: React.FunctionComponent = () => {
     [getHref, agentConfig, configId]
   );
 
+  const enrollmentCancelClickHandler = useCallback(() => {
+    if (routeState && routeState.onDoneNavigateTo) {
+      navigateToApp(routeState.onDoneNavigateTo[0], routeState.onDoneNavigateTo[1]);
+    }
+  }, [routeState, navigateToApp]);
+
   const headerRightContent = useMemo(
     () => (
       <EuiFlexGroup justifyContent={'flexEnd'} direction="row">
@@ -155,6 +168,12 @@ export const AgentConfigDetailsPage: React.FunctionComponent = () => {
                 onCopySuccess={(newAgentConfig: AgentConfig) => {
                   history.push(getPath('configuration_details', { configId: newAgentConfig.id }));
                 }}
+                enrollmentFlyoutOpenByDefault={openEnrollmentFlyoutOpenByDefault}
+                onCancelEnrollment={
+                  routeState && routeState.onDoneNavigateTo
+                    ? enrollmentCancelClickHandler
+                    : undefined
+                }
               />
             ),
           },
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/types/intra_app_route_state.ts b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/types/intra_app_route_state.ts
index 6e85d12f71891..b2948686ff6e5 100644
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/types/intra_app_route_state.ts
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/types/intra_app_route_state.ts
@@ -21,7 +21,17 @@ export interface CreateDatasourceRouteState {
   onCancelUrl?: string;
 }
 
+/**
+ * Supported routing state for the agent config details page routes with deploy agents action
+ */
+export interface AgentConfigDetailsDeployAgentAction {
+  /** On done, navigate to the given app */
+  onDoneNavigateTo?: Parameters<ApplicationStart['navigateToApp']>;
+}
+
 /**
  * All possible Route states.
  */
-export type AnyIntraAppRouteState = CreateDatasourceRouteState;
+export type AnyIntraAppRouteState =
+  | CreateDatasourceRouteState
+  | AgentConfigDetailsDeployAgentAction;
diff --git a/x-pack/plugins/security_solution/public/management/components/management_empty_state.tsx b/x-pack/plugins/security_solution/public/management/components/management_empty_state.tsx
new file mode 100644
index 0000000000000..5dd47d4e88028
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/management/components/management_empty_state.tsx
@@ -0,0 +1,277 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { useMemo, MouseEvent, CSSProperties } from 'react';
+import {
+  EuiText,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSpacer,
+  EuiButton,
+  EuiSteps,
+  EuiTitle,
+  EuiSelectable,
+  EuiSelectableMessage,
+  EuiSelectableProps,
+  EuiLoadingSpinner,
+} from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
+
+const TEXT_ALIGN_CENTER: CSSProperties = Object.freeze({
+  textAlign: 'center',
+});
+
+interface ManagementStep {
+  title: string;
+  children: JSX.Element;
+}
+
+const PolicyEmptyState = React.memo<{
+  loading: boolean;
+  onActionClick: (event: MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => void;
+  actionDisabled?: boolean;
+}>(({ loading, onActionClick, actionDisabled }) => {
+  const policySteps = useMemo(
+    () => [
+      {
+        title: i18n.translate('xpack.securitySolution.endpoint.policyList.stepOneTitle', {
+          defaultMessage: 'Head over to Ingest Manager.',
+        }),
+        children: (
+          <EuiText color="subdued" size="xs">
+            <FormattedMessage
+              id="xpack.securitySolution.endpoint.policyList.stepOne"
+              defaultMessage="Here, you’ll add the Elastic Endpoint Security Integration to your Agent Configuration."
+            />
+          </EuiText>
+        ),
+      },
+      {
+        title: i18n.translate('xpack.securitySolution.endpoint.policyList.stepTwoTitle', {
+          defaultMessage: 'We’ll create a recommended security policy for you.',
+        }),
+        children: (
+          <EuiText color="subdued" size="xs">
+            <FormattedMessage
+              id="xpack.securitySolution.endpoint.policyList.stepTwo"
+              defaultMessage="You can edit this policy in the “Policies” tab after you’ve added the Elastic Endpoint integration."
+            />
+          </EuiText>
+        ),
+      },
+      {
+        title: i18n.translate('xpack.securitySolution.endpoint.policyList.stepThreeTitle', {
+          defaultMessage: 'Enroll your agents through Fleet.',
+        }),
+        children: (
+          <EuiText color="subdued" size="xs">
+            <FormattedMessage
+              id="xpack.securitySolution.endpoint.policyList.stepThree"
+              defaultMessage="If you haven’t already, enroll your agents through Fleet using the same agent configuration."
+            />
+          </EuiText>
+        ),
+      },
+    ],
+    []
+  );
+
+  return (
+    <ManagementEmptyState
+      loading={loading}
+      onActionClick={onActionClick}
+      actionDisabled={actionDisabled}
+      dataTestSubj="emptyPolicyTable"
+      steps={policySteps}
+      headerComponent={
+        <FormattedMessage
+          id="xpack.securitySolution.endpoint.policyList.noPolicyPrompt"
+          defaultMessage="Looks like you're not using the Elastic Endpoint"
+        />
+      }
+      bodyComponent={
+        <FormattedMessage
+          id="xpack.securitySolution.endpoint.policyList.noPolicyInstructions"
+          defaultMessage="Elastic Endpoint Security gives you the power to keep your endpoints safe from attack, as well as unparalleled visibility into any threat in your environment."
+        />
+      }
+    />
+  );
+});
+
+const EndpointsEmptyState = React.memo<{
+  loading: boolean;
+  onActionClick: (event: MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => void;
+  actionDisabled: boolean;
+  handleSelectableOnChange: (o: EuiSelectableProps['options']) => void;
+  selectionOptions: EuiSelectableProps['options'];
+}>(({ loading, onActionClick, actionDisabled, handleSelectableOnChange, selectionOptions }) => {
+  const policySteps = useMemo(
+    () => [
+      {
+        title: i18n.translate('xpack.securitySolution.endpoint.endpointList.stepOneTitle', {
+          defaultMessage: 'Select a policy you created from the list below.',
+        }),
+        children: (
+          <>
+            <EuiText color="subdued" size="xs">
+              <FormattedMessage
+                id="xpack.securitySolution.endpoint.endpointList.stepOne"
+                defaultMessage="These are existing policies."
+              />
+            </EuiText>
+            <EuiSpacer size="m" />
+            <EuiSelectable
+              options={selectionOptions}
+              singleSelection="always"
+              isLoading={loading}
+              height={100}
+              listProps={{ bordered: true, singleSelection: true }}
+              onChange={handleSelectableOnChange}
+              data-test-subj="onboardingPolicySelect"
+            >
+              {(list) => {
+                return loading ? (
+                  <EuiSelectableMessage>
+                    <FormattedMessage
+                      id="xpack.securitySolution.endpoint.endpointList.loadingPolicies"
+                      defaultMessage="Loading policy configs"
+                    />
+                  </EuiSelectableMessage>
+                ) : selectionOptions.length ? (
+                  list
+                ) : (
+                  <FormattedMessage
+                    id="xpack.securitySolution.endpoint.endpointList.noPolicies"
+                    defaultMessage="There are no policies."
+                  />
+                );
+              }}
+            </EuiSelectable>
+          </>
+        ),
+      },
+      {
+        title: i18n.translate('xpack.securitySolution.endpoint.endpointList.stepTwoTitle', {
+          defaultMessage:
+            'Head over to Ingest to deploy your Agent with Endpoint Security enabled.',
+        }),
+        children: (
+          <EuiText color="subdued" size="xs">
+            <FormattedMessage
+              id="xpack.securitySolution.endpoint.endpointList.stepTwo"
+              defaultMessage="You'll be given a command in Ingest to get you started."
+            />
+          </EuiText>
+        ),
+      },
+    ],
+    [selectionOptions, handleSelectableOnChange, loading]
+  );
+
+  return (
+    <ManagementEmptyState
+      loading={loading}
+      onActionClick={onActionClick}
+      actionDisabled={actionDisabled}
+      dataTestSubj="emptyEndpointsTable"
+      steps={policySteps}
+      headerComponent={
+        <FormattedMessage
+          id="xpack.securitySolution.endpoint.endpointList.noEndpointsPrompt"
+          defaultMessage="You have a policy, but no Endpoints are deployed!"
+        />
+      }
+      bodyComponent={
+        <FormattedMessage
+          id="xpack.securitySolution.endpoint.endpointList.noEndpointsInstructions"
+          defaultMessage="Elastic Endpoint Security gives you the power to keep your endpoints safe from attack, as well as unparalleled visibility into any threat in your environment."
+        />
+      }
+    />
+  );
+});
+
+const ManagementEmptyState = React.memo<{
+  loading: boolean;
+  onActionClick?: (event: MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => void;
+  actionDisabled?: boolean;
+  actionButton?: JSX.Element;
+  dataTestSubj: string;
+  steps?: ManagementStep[];
+  headerComponent: JSX.Element;
+  bodyComponent: JSX.Element;
+}>(
+  ({
+    loading,
+    onActionClick,
+    actionDisabled,
+    dataTestSubj,
+    steps,
+    actionButton,
+    headerComponent,
+    bodyComponent,
+  }) => {
+    return (
+      <div data-test-subj={dataTestSubj}>
+        {loading ? (
+          <EuiFlexGroup alignItems="center" justifyContent="center">
+            <EuiFlexItem grow={false}>
+              <EuiLoadingSpinner size="xl" className="essentialAnimation" />
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        ) : (
+          <>
+            <EuiSpacer size="xxl" />
+            <EuiTitle size="m">
+              <h2 style={TEXT_ALIGN_CENTER}>{headerComponent}</h2>
+            </EuiTitle>
+            <EuiSpacer size="xxl" />
+            <EuiText textAlign="center" color="subdued" size="s">
+              {bodyComponent}
+            </EuiText>
+            <EuiSpacer size="xxl" />
+            {steps && (
+              <EuiFlexGroup alignItems="center" justifyContent="center">
+                <EuiFlexItem grow={false}>
+                  <EuiSteps steps={steps} data-test-subj={'onboardingSteps'} />
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            )}
+            <EuiFlexGroup alignItems="center" justifyContent="center">
+              <EuiFlexItem grow={false}>
+                <>
+                  {actionButton ? (
+                    actionButton
+                  ) : (
+                    <EuiButton
+                      fill
+                      onClick={onActionClick}
+                      isDisabled={actionDisabled}
+                      data-test-subj="onboardingStartButton"
+                    >
+                      <FormattedMessage
+                        id="xpack.securitySolution.endpoint.policyList.emptyCreateNewButton"
+                        defaultMessage="Click here to get started"
+                      />
+                    </EuiButton>
+                  )}
+                </>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </>
+        )}
+      </div>
+    );
+  }
+);
+
+PolicyEmptyState.displayName = 'PolicyEmptyState';
+EndpointsEmptyState.displayName = 'EndpointsEmptyState';
+ManagementEmptyState.displayName = 'ManagementEmptyState';
+
+export { PolicyEmptyState, EndpointsEmptyState, ManagementEmptyState };
diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/action.ts b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/action.ts
index 62a2d9e3205c2..4c01b3644cf63 100644
--- a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/action.ts
+++ b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/action.ts
@@ -10,6 +10,8 @@ import {
   GetHostPolicyResponse,
 } from '../../../../../common/endpoint/types';
 import { ServerApiError } from '../../../../common/types';
+import { GetPolicyListResponse } from '../../policy/types';
+import { GetPackagesResponse } from '../../../../../../ingest_manager/common';
 
 interface ServerReturnedHostList {
   type: 'serverReturnedHostList';
@@ -41,10 +43,48 @@ interface ServerFailedToReturnHostPolicyResponse {
   payload: ServerApiError;
 }
 
+interface ServerReturnedPoliciesForOnboarding {
+  type: 'serverReturnedPoliciesForOnboarding';
+  payload: {
+    policyItems: GetPolicyListResponse['items'];
+  };
+}
+
+interface ServerFailedToReturnPoliciesForOnboarding {
+  type: 'serverFailedToReturnPoliciesForOnboarding';
+  payload: ServerApiError;
+}
+
+interface UserSelectedEndpointPolicy {
+  type: 'userSelectedEndpointPolicy';
+  payload: {
+    selectedPolicyId: string;
+  };
+}
+
+interface ServerCancelledHostListLoading {
+  type: 'serverCancelledHostListLoading';
+}
+
+interface ServerCancelledPolicyItemsLoading {
+  type: 'serverCancelledPolicyItemsLoading';
+}
+
+interface ServerReturnedEndpointPackageInfo {
+  type: 'serverReturnedEndpointPackageInfo';
+  payload: GetPackagesResponse['response'][0];
+}
+
 export type HostAction =
   | ServerReturnedHostList
   | ServerFailedToReturnHostList
   | ServerReturnedHostDetails
   | ServerFailedToReturnHostDetails
   | ServerReturnedHostPolicyResponse
-  | ServerFailedToReturnHostPolicyResponse;
+  | ServerFailedToReturnHostPolicyResponse
+  | ServerReturnedPoliciesForOnboarding
+  | ServerFailedToReturnPoliciesForOnboarding
+  | UserSelectedEndpointPolicy
+  | ServerCancelledHostListLoading
+  | ServerCancelledPolicyItemsLoading
+  | ServerReturnedEndpointPackageInfo;
diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/index.test.ts b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/index.test.ts
index 71452993abf07..f2c205661b32c 100644
--- a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/index.test.ts
+++ b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/index.test.ts
@@ -46,6 +46,10 @@ describe('HostList store concerns', () => {
         policyResponseLoading: false,
         policyResponseError: undefined,
         location: undefined,
+        policyItems: [],
+        selectedPolicyId: undefined,
+        policyItemsLoading: false,
+        endpointPackageInfo: undefined,
       });
     });
 
diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/middleware.ts b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/middleware.ts
index 85667c9f9fc37..ce164318fdadc 100644
--- a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/middleware.ts
+++ b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/middleware.ts
@@ -5,9 +5,20 @@
  */
 
 import { HostResultList } from '../../../../../common/endpoint/types';
+import { GetPolicyListResponse } from '../../policy/types';
 import { ImmutableMiddlewareFactory } from '../../../../common/store';
-import { isOnHostPage, hasSelectedHost, uiQueryParams, listData } from './selectors';
+import {
+  isOnHostPage,
+  hasSelectedHost,
+  uiQueryParams,
+  listData,
+  endpointPackageInfo,
+} from './selectors';
 import { HostState } from '../types';
+import {
+  sendGetEndpointSpecificDatasources,
+  sendGetEndpointSecurityPackage,
+} from '../../policy/store/policy_list/services/ingest';
 
 export const hostMiddlewareFactory: ImmutableMiddlewareFactory<HostState> = (coreStart) => {
   return ({ getState, dispatch }) => (next) => async (action) => {
@@ -18,17 +29,34 @@ export const hostMiddlewareFactory: ImmutableMiddlewareFactory<HostState> = (cor
       isOnHostPage(state) &&
       hasSelectedHost(state) !== true
     ) {
+      if (!endpointPackageInfo(state)) {
+        sendGetEndpointSecurityPackage(coreStart.http)
+          .then((packageInfo) => {
+            dispatch({
+              type: 'serverReturnedEndpointPackageInfo',
+              payload: packageInfo,
+            });
+          })
+          .catch((error) => {
+            // eslint-disable-next-line no-console
+            console.error(error);
+          });
+      }
+
       const { page_index: pageIndex, page_size: pageSize } = uiQueryParams(state);
+      let hostResponse;
+
       try {
-        const response = await coreStart.http.post<HostResultList>('/api/endpoint/metadata', {
+        hostResponse = await coreStart.http.post<HostResultList>('/api/endpoint/metadata', {
           body: JSON.stringify({
             paging_properties: [{ page_index: pageIndex }, { page_size: pageSize }],
           }),
         });
-        response.request_page_index = Number(pageIndex);
+        hostResponse.request_page_index = Number(pageIndex);
+
         dispatch({
           type: 'serverReturnedHostList',
-          payload: response,
+          payload: hostResponse,
         });
       } catch (error) {
         dispatch({
@@ -36,8 +64,45 @@ export const hostMiddlewareFactory: ImmutableMiddlewareFactory<HostState> = (cor
           payload: error,
         });
       }
+
+      // No hosts, so we should check to see if there are policies for onboarding
+      if (hostResponse && hostResponse.hosts.length === 0) {
+        const http = coreStart.http;
+        try {
+          const policyDataResponse: GetPolicyListResponse = await sendGetEndpointSpecificDatasources(
+            http,
+            {
+              query: {
+                perPage: 50, // Since this is an oboarding flow, we'll cap at 50 policies.
+                page: 1,
+              },
+            }
+          );
+
+          dispatch({
+            type: 'serverReturnedPoliciesForOnboarding',
+            payload: {
+              policyItems: policyDataResponse.items,
+            },
+          });
+        } catch (error) {
+          dispatch({
+            type: 'serverFailedToReturnPoliciesForOnboarding',
+            payload: error.body ?? error,
+          });
+          return;
+        }
+      } else {
+        dispatch({
+          type: 'serverCancelledPolicyItemsLoading',
+        });
+      }
     }
     if (action.type === 'userChangedUrl' && hasSelectedHost(state) === true) {
+      dispatch({
+        type: 'serverCancelledPolicyItemsLoading',
+      });
+
       // If user navigated directly to a host details page, load the host list
       if (listData(state).length === 0) {
         const { page_index: pageIndex, page_size: pageSize } = uiQueryParams(state);
@@ -59,6 +124,10 @@ export const hostMiddlewareFactory: ImmutableMiddlewareFactory<HostState> = (cor
           });
           return;
         }
+      } else {
+        dispatch({
+          type: 'serverCancelledHostListLoading',
+        });
       }
 
       // call the host details api
diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/reducer.ts b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/reducer.ts
index 23682544ec423..993267cf1a704 100644
--- a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/reducer.ts
+++ b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/reducer.ts
@@ -24,8 +24,13 @@ export const initialHostListState: Immutable<HostState> = {
   policyResponseLoading: false,
   policyResponseError: undefined,
   location: undefined,
+  policyItems: [],
+  selectedPolicyId: undefined,
+  policyItemsLoading: false,
+  endpointPackageInfo: undefined,
 };
 
+/* eslint-disable-next-line complexity */
 export const hostListReducer: ImmutableReducer<HostState, AppAction> = (
   state = initialHostListState,
   action
@@ -65,6 +70,18 @@ export const hostListReducer: ImmutableReducer<HostState, AppAction> = (
       detailsError: action.payload,
       detailsLoading: false,
     };
+  } else if (action.type === 'serverReturnedPoliciesForOnboarding') {
+    return {
+      ...state,
+      policyItems: action.payload.policyItems,
+      policyItemsLoading: false,
+    };
+  } else if (action.type === 'serverFailedToReturnPoliciesForOnboarding') {
+    return {
+      ...state,
+      error: action.payload,
+      policyItemsLoading: false,
+    };
   } else if (action.type === 'serverReturnedHostPolicyResponse') {
     return {
       ...state,
@@ -78,6 +95,27 @@ export const hostListReducer: ImmutableReducer<HostState, AppAction> = (
       policyResponseError: action.payload,
       policyResponseLoading: false,
     };
+  } else if (action.type === 'userSelectedEndpointPolicy') {
+    return {
+      ...state,
+      selectedPolicyId: action.payload.selectedPolicyId,
+      policyResponseLoading: false,
+    };
+  } else if (action.type === 'serverCancelledHostListLoading') {
+    return {
+      ...state,
+      loading: false,
+    };
+  } else if (action.type === 'serverCancelledPolicyItemsLoading') {
+    return {
+      ...state,
+      policyItemsLoading: false,
+    };
+  } else if (action.type === 'serverReturnedEndpointPackageInfo') {
+    return {
+      ...state,
+      endpointPackageInfo: action.payload,
+    };
   } else if (action.type === 'userChangedUrl') {
     const newState: Immutable<HostState> = {
       ...state,
@@ -95,6 +133,7 @@ export const hostListReducer: ImmutableReducer<HostState, AppAction> = (
           ...state,
           location: action.payload,
           loading: true,
+          policyItemsLoading: true,
           error: undefined,
           detailsError: undefined,
         };
@@ -122,6 +161,7 @@ export const hostListReducer: ImmutableReducer<HostState, AppAction> = (
           error: undefined,
           detailsError: undefined,
           policyResponseError: undefined,
+          policyItemsLoading: true,
         };
       }
     }
diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/selectors.ts b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/selectors.ts
index 20365b3fe100b..e75d2129f61a5 100644
--- a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/selectors.ts
+++ b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/selectors.ts
@@ -37,6 +37,19 @@ export const detailsLoading = (state: Immutable<HostState>): boolean => state.de
 
 export const detailsError = (state: Immutable<HostState>) => state.detailsError;
 
+export const policyItems = (state: Immutable<HostState>) => state.policyItems;
+
+export const policyItemsLoading = (state: Immutable<HostState>) => state.policyItemsLoading;
+
+export const selectedPolicyId = (state: Immutable<HostState>) => state.selectedPolicyId;
+
+export const endpointPackageInfo = (state: Immutable<HostState>) => state.endpointPackageInfo;
+
+export const endpointPackageVersion = createSelector(
+  endpointPackageInfo,
+  (info) => info?.version ?? undefined
+);
+
 /**
  * Returns the full policy response from the endpoint after a user modifies a policy.
  */
diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/types.ts b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/types.ts
index 4881342c06573..a5f37a0b49e8f 100644
--- a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/types.ts
+++ b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/types.ts
@@ -10,8 +10,10 @@ import {
   HostMetadata,
   HostPolicyResponse,
   AppLocation,
+  PolicyData,
 } from '../../../../common/endpoint/types';
 import { ServerApiError } from '../../../common/types';
+import { GetPackagesResponse } from '../../../../../ingest_manager/common';
 
 export interface HostState {
   /** list of host **/
@@ -40,6 +42,14 @@ export interface HostState {
   policyResponseError?: ServerApiError;
   /** current location info */
   location?: Immutable<AppLocation>;
+  /** policies */
+  policyItems: PolicyData[];
+  /** policies are loading */
+  policyItemsLoading: boolean;
+  /** the selected policy ID in the onboarding flow */
+  selectedPolicyId?: string;
+  /** Endpoint package info */
+  endpointPackageInfo?: GetPackagesResponse['response'][0];
 }
 
 /**
diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.test.tsx b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.test.tsx
index 7bc101b891477..9690ac5c1b9bf 100644
--- a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.test.tsx
@@ -40,12 +40,60 @@ describe('when on the hosts page', () => {
     expect(timelineFlyout).toBeNull();
   });
 
-  it('should show a table', async () => {
+  it('should show the empty state when there are no hosts or polices', async () => {
     const renderResult = render();
-    const table = await renderResult.findByTestId('hostListTable');
+    // Initially, there are no endpoints or policies, so we prompt to add policies first.
+    const table = await renderResult.findByTestId('emptyPolicyTable');
     expect(table).not.toBeNull();
   });
 
+  describe('when there are policies, but no hosts', () => {
+    beforeEach(() => {
+      reactTestingLibrary.act(() => {
+        const hostListData = mockHostResultList({ total: 0 });
+        coreStart.http.get.mockReturnValue(Promise.resolve(hostListData));
+        const hostAction: AppAction = {
+          type: 'serverReturnedHostList',
+          payload: hostListData,
+        };
+        store.dispatch(hostAction);
+
+        jest.clearAllMocks();
+
+        const policyListData = mockPolicyResultList({ total: 3 });
+        coreStart.http.get.mockReturnValue(Promise.resolve(policyListData));
+        const policyAction: AppAction = {
+          type: 'serverReturnedPoliciesForOnboarding',
+          payload: {
+            policyItems: policyListData.items,
+          },
+        };
+        store.dispatch(policyAction);
+      });
+    });
+    afterEach(() => {
+      jest.clearAllMocks();
+    });
+
+    it('should show the no hosts empty state', async () => {
+      const renderResult = render();
+      const emptyEndpointsTable = await renderResult.findByTestId('emptyEndpointsTable');
+      expect(emptyEndpointsTable).not.toBeNull();
+    });
+
+    it('should display the onboarding steps', async () => {
+      const renderResult = render();
+      const onboardingSteps = await renderResult.findByTestId('onboardingSteps');
+      expect(onboardingSteps).not.toBeNull();
+    });
+
+    it('should show policy selection', async () => {
+      const renderResult = render();
+      const onboardingPolicySelect = await renderResult.findByTestId('onboardingPolicySelect');
+      expect(onboardingPolicySelect).not.toBeNull();
+    });
+  });
+
   describe('when there is no selected host in the url', () => {
     it('should not show the flyout', () => {
       const renderResult = render();
diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.tsx b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.tsx
index 45a33f76ee0c5..3601b8db5ee59 100644
--- a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.tsx
@@ -13,12 +13,13 @@ import {
   EuiLink,
   EuiHealth,
   EuiToolTip,
+  EuiSelectableProps,
 } from '@elastic/eui';
 import { useHistory } from 'react-router-dom';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { createStructuredSelector } from 'reselect';
-
+import { useDispatch } from 'react-redux';
 import { HostDetailsFlyout } from './details';
 import * as selectors from '../store/selectors';
 import { useHostSelector } from './hooks';
@@ -32,7 +33,13 @@ import { CreateStructuredSelector } from '../../../../common/store';
 import { Immutable, HostInfo } from '../../../../../common/endpoint/types';
 import { SpyRoute } from '../../../../common/utils/route/spy_routes';
 import { ManagementPageView } from '../../../components/management_page_view';
+import { PolicyEmptyState, EndpointsEmptyState } from '../../../components/management_empty_state';
 import { FormattedDate } from '../../../../common/components/formatted_date';
+import { useNavigateToAppEventHandler } from '../../../../common/hooks/endpoint/use_navigate_to_app_event_handler';
+import {
+  CreateDatasourceRouteState,
+  AgentConfigDetailsDeployAgentAction,
+} from '../../../../../../ingest_manager/public';
 import { SecurityPageName } from '../../../../app/types';
 import {
   getEndpointListPath,
@@ -40,6 +47,7 @@ import {
   getPolicyDetailPath,
 } from '../../../common/routing';
 import { useFormatUrl } from '../../../../common/components/link_to';
+import { HostAction } from '../store/action';
 
 const HostListNavLink = memo<{
   name: string;
@@ -75,9 +83,15 @@ export const HostList = () => {
     listError,
     uiQueryParams: queryParams,
     hasSelectedHost,
+    policyItems,
+    selectedPolicyId,
+    policyItemsLoading,
+    endpointPackageVersion,
   } = useHostSelector(selector);
   const { formatUrl, search } = useFormatUrl(SecurityPageName.management);
 
+  const dispatch = useDispatch<(a: HostAction) => void>();
+
   const paginationSetup = useMemo(() => {
     return {
       pageIndex,
@@ -104,6 +118,67 @@ export const HostList = () => {
     [history, queryParams]
   );
 
+  const handleCreatePolicyClick = useNavigateToAppEventHandler<CreateDatasourceRouteState>(
+    'ingestManager',
+    {
+      path: `#/integrations${
+        endpointPackageVersion ? `/endpoint-${endpointPackageVersion}/add-datasource` : ''
+      }`,
+      state: {
+        onCancelNavigateTo: [
+          'securitySolution:management',
+          { path: getEndpointListPath({ name: 'endpointList' }) },
+        ],
+        onCancelUrl: formatUrl(getEndpointListPath({ name: 'endpointList' })),
+        onSaveNavigateTo: [
+          'securitySolution:management',
+          { path: getEndpointListPath({ name: 'endpointList' }) },
+        ],
+      },
+    }
+  );
+
+  const handleDeployEndpointsClick = useNavigateToAppEventHandler<
+    AgentConfigDetailsDeployAgentAction
+  >('ingestManager', {
+    path: `#/configs/${selectedPolicyId}?openEnrollmentFlyout=true`,
+    state: {
+      onDoneNavigateTo: [
+        'securitySolution:management',
+        { path: getEndpointListPath({ name: 'endpointList' }) },
+      ],
+    },
+  });
+
+  const selectionOptions = useMemo<EuiSelectableProps['options']>(() => {
+    return policyItems.map((item) => {
+      return {
+        key: item.config_id,
+        label: item.name,
+        checked: selectedPolicyId === item.config_id ? 'on' : undefined,
+      };
+    });
+  }, [policyItems, selectedPolicyId]);
+
+  const handleSelectableOnChange = useCallback<(o: EuiSelectableProps['options']) => void>(
+    (changedOptions) => {
+      return changedOptions.some((option) => {
+        if ('checked' in option && option.checked === 'on') {
+          dispatch({
+            type: 'userSelectedEndpointPolicy',
+            payload: {
+              selectedPolicyId: option.key as string,
+            },
+          });
+          return true;
+        } else {
+          return false;
+        }
+      });
+    },
+    [dispatch]
+  );
+
   const columns: Array<EuiBasicTableColumn<Immutable<HostInfo>>> = useMemo(() => {
     const lastActiveColumnName = i18n.translate('xpack.securitySolution.endpointList.lastActive', {
       defaultMessage: 'Last Active',
@@ -252,6 +327,49 @@ export const HostList = () => {
     ];
   }, [formatUrl, queryParams, search]);
 
+  const renderTableOrEmptyState = useMemo(() => {
+    if (!loading && listData && listData.length > 0) {
+      return (
+        <EuiBasicTable
+          data-test-subj="hostListTable"
+          items={[...listData]}
+          columns={columns}
+          error={listError?.message}
+          pagination={paginationSetup}
+          onChange={onTableChange}
+        />
+      );
+    } else if (!policyItemsLoading && policyItems && policyItems.length > 0) {
+      return (
+        <EndpointsEmptyState
+          loading={loading}
+          onActionClick={handleDeployEndpointsClick}
+          actionDisabled={selectedPolicyId === undefined}
+          handleSelectableOnChange={handleSelectableOnChange}
+          selectionOptions={selectionOptions}
+        />
+      );
+    } else {
+      return (
+        <PolicyEmptyState loading={policyItemsLoading} onActionClick={handleCreatePolicyClick} />
+      );
+    }
+  }, [
+    listData,
+    policyItems,
+    columns,
+    loading,
+    paginationSetup,
+    onTableChange,
+    listError?.message,
+    handleCreatePolicyClick,
+    handleDeployEndpointsClick,
+    handleSelectableOnChange,
+    selectedPolicyId,
+    selectionOptions,
+    policyItemsLoading,
+  ]);
+
   return (
     <ManagementPageView
       viewType="list"
@@ -261,23 +379,19 @@ export const HostList = () => {
       })}
     >
       {hasSelectedHost && <HostDetailsFlyout />}
-      <EuiText color="subdued" size="xs" data-test-subj="hostListTableTotal">
-        <FormattedMessage
-          id="xpack.securitySolution.endpointList.totalCount"
-          defaultMessage="{totalItemCount, plural, one {# Host} other {# Hosts}}"
-          values={{ totalItemCount }}
-        />
-      </EuiText>
-      <EuiHorizontalRule margin="xs" />
-      <EuiBasicTable
-        data-test-subj="hostListTable"
-        items={useMemo(() => [...listData], [listData])}
-        columns={columns}
-        loading={loading}
-        error={listError?.message}
-        pagination={paginationSetup}
-        onChange={onTableChange}
-      />
+      {listData && listData.length > 0 && (
+        <>
+          <EuiText color="subdued" size="xs" data-test-subj="hostListTableTotal">
+            <FormattedMessage
+              id="xpack.securitySolution.endpointList.totalCount"
+              defaultMessage="{totalItemCount, plural, one {# Host} other {# Hosts}}"
+              values={{ totalItemCount }}
+            />
+          </EuiText>
+          <EuiHorizontalRule margin="xs" />
+        </>
+      )}
+      {renderTableOrEmptyState}
       <SpyRoute pageName={SecurityPageName.management} />
     </ManagementPageView>
   );
diff --git a/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_list.tsx b/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_list.tsx
index 26b6ecb540cd9..8a760334c53af 100644
--- a/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_list.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_list.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { useCallback, useEffect, useMemo, CSSProperties, useState, MouseEvent } from 'react';
+import React, { useCallback, useEffect, useMemo, CSSProperties, useState } from 'react';
 import {
   EuiBasicTable,
   EuiText,
@@ -22,9 +22,6 @@ import {
   EuiCallOut,
   EuiSpacer,
   EuiButton,
-  EuiSteps,
-  EuiTitle,
-  EuiProgress,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
@@ -41,6 +38,7 @@ import { Immutable, PolicyData } from '../../../../../common/endpoint/types';
 import { useNavigateByRouterEventHandler } from '../../../../common/hooks/endpoint/use_navigate_by_router_event_handler';
 import { LinkToApp } from '../../../../common/components/endpoint/link_to_app';
 import { ManagementPageView } from '../../../components/management_page_view';
+import { PolicyEmptyState } from '../../../components/management_empty_state';
 import { SpyRoute } from '../../../../common/utils/route/spy_routes';
 import { FormattedDateAndTime } from '../../../../common/components/endpoint/formatted_date_time';
 import { SecurityPageName } from '../../../../app/types';
@@ -65,10 +63,6 @@ const NO_WRAP_TRUNCATE_STYLE: CSSProperties = Object.freeze({
   whiteSpace: 'nowrap',
 });
 
-const TEXT_ALIGN_CENTER: CSSProperties = Object.freeze({
-  textAlign: 'center',
-});
-
 const DangerEuiContextMenuItem = styled(EuiContextMenuItem)`
   color: ${(props) => props.theme.eui.textColors.danger};
 `;
@@ -437,12 +431,7 @@ export const PolicyList = React.memo(() => {
                   hasActions={false}
                 />
               ) : (
-                <EmptyPolicyTable
-                  loading={loading}
-                  onActionClick={handleCreatePolicyClick}
-                  actionDisabled={false}
-                  dataTestSubj="emptyPolicyTable"
-                />
+                <PolicyEmptyState loading={loading} onActionClick={handleCreatePolicyClick} />
               )}
             </>
           );
@@ -462,107 +451,6 @@ export const PolicyList = React.memo(() => {
 
 PolicyList.displayName = 'PolicyList';
 
-const EmptyPolicyTable = React.memo<{
-  loading: boolean;
-  onActionClick: (event: MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => void;
-  actionDisabled: boolean;
-  dataTestSubj: string;
-}>(({ loading, onActionClick, actionDisabled, dataTestSubj }) => {
-  const policySteps = useMemo(
-    () => [
-      {
-        title: i18n.translate('xpack.securitySolution.endpoint.policyList.stepOneTitle', {
-          defaultMessage: 'Head over to Ingest Manager.',
-        }),
-        children: (
-          <EuiText color="subdued" size="xs">
-            <FormattedMessage
-              id="xpack.securitySolution.endpoint.policyList.stepOne"
-              defaultMessage="Here, you’ll add the Elastic Endpoint Security Integration to your Agent Configuration."
-            />
-          </EuiText>
-        ),
-      },
-      {
-        title: i18n.translate('xpack.securitySolution.endpoint.policyList.stepTwoTitle', {
-          defaultMessage: 'We’ll create a recommended security policy for you.',
-        }),
-        children: (
-          <EuiText color="subdued" size="xs">
-            <FormattedMessage
-              id="xpack.securitySolution.endpoint.policyList.stepTwo"
-              defaultMessage="You can edit this policy in the “Policies” tab after you’ve added the Elastic Endpoint integration."
-            />
-          </EuiText>
-        ),
-      },
-      {
-        title: i18n.translate('xpack.securitySolution.endpoint.policyList.stepThreeTitle', {
-          defaultMessage: 'Enroll your agents through Fleet.',
-        }),
-        children: (
-          <EuiText color="subdued" size="xs">
-            <FormattedMessage
-              id="xpack.securitySolution.endpoint.policyList.stepThree"
-              defaultMessage="If you haven’t already, enroll your agents through Fleet using the same agent configuration."
-            />
-          </EuiText>
-        ),
-      },
-    ],
-    []
-  );
-  return (
-    <div data-test-subj={dataTestSubj}>
-      {loading ? (
-        <EuiProgress size="xs" color="accent" className="essentialAnimation" />
-      ) : (
-        <>
-          <EuiSpacer size="xxl" />
-          <EuiTitle size="m">
-            <h2 style={TEXT_ALIGN_CENTER}>
-              <FormattedMessage
-                id="xpack.securitySolution.endpoint.policyList.noPoliciesPrompt"
-                defaultMessage="Looks like you're not using Elastic Endpoint"
-              />
-            </h2>
-          </EuiTitle>
-          <EuiSpacer size="xxl" />
-          <EuiText textAlign="center" color="subdued" size="s">
-            <FormattedMessage
-              id="xpack.securitySolution.endpoint.policyList.noPoliciesInstructions"
-              defaultMessage="Elastic Endpoint Security gives you the power to keep your endpoints safe from attack, as well as unparalleled visibility into any threat in your environment."
-            />
-          </EuiText>
-          <EuiSpacer size="xxl" />
-          <EuiFlexGroup alignItems="center" justifyContent="center">
-            <EuiFlexItem grow={false}>
-              <EuiSteps steps={policySteps} data-test-subj={'onboardingSteps'} />
-            </EuiFlexItem>
-          </EuiFlexGroup>
-          <EuiFlexGroup alignItems="center" justifyContent="center">
-            <EuiFlexItem grow={false}>
-              <EuiButton
-                fill
-                onClick={onActionClick}
-                isDisabled={actionDisabled}
-                data-test-subj="onboardingStartButton"
-              >
-                <FormattedMessage
-                  id="xpack.securitySolution.endpoint.policyList.emptyCreateNewButton"
-                  defaultMessage="Click here to get started"
-                />
-              </EuiButton>
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        </>
-      )}
-    </div>
-  );
-});
-
-EmptyPolicyTable.displayName = 'EmptyPolicyTable';
-
 const ConfirmDelete = React.memo<{
   hostCount: number;
   isDeleting: boolean;