diff --git a/x-pack/plugins/apm/public/components/app/ServiceMap/index.tsx b/x-pack/plugins/apm/public/components/app/ServiceMap/index.tsx
index 7ef3cbca3ad2f..b338d1e4ab03d 100644
--- a/x-pack/plugins/apm/public/components/app/ServiceMap/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/ServiceMap/index.tsx
@@ -19,7 +19,7 @@ import { useLicenseContext } from '../../../context/license/use_license_context'
 import { useTheme } from '../../../hooks/use_theme';
 import { useUrlParams } from '../../../context/url_params_context/use_url_params';
 import { DatePicker } from '../../shared/DatePicker';
-import { LicensePrompt } from '../../shared/LicensePrompt';
+import { LicensePrompt } from '../../shared/license_prompt';
 import { Controls } from './Controls';
 import { Cytoscape } from './Cytoscape';
 import { getCytoscapeDivStyle } from './cytoscape_options';
diff --git a/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CreateEditCustomLinkFlyout/LinkPreview.tsx b/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CreateEditCustomLinkFlyout/LinkPreview.tsx
deleted file mode 100644
index 0312b802df173..0000000000000
--- a/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CreateEditCustomLinkFlyout/LinkPreview.tsx
+++ /dev/null
@@ -1,133 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import React, { useEffect, useState } from 'react';
-import {
-  EuiPanel,
-  EuiText,
-  EuiSpacer,
-  EuiLink,
-  EuiToolTip,
-  EuiIcon,
-  EuiFlexGroup,
-  EuiFlexItem,
-} from '@elastic/eui';
-import { i18n } from '@kbn/i18n';
-import { debounce } from 'lodash';
-import { Filter } from '../../../../../../../common/custom_link/custom_link_types';
-import { Transaction } from '../../../../../../../typings/es_schemas/ui/transaction';
-import { callApmApi } from '../../../../../../services/rest/createCallApmApi';
-import { replaceTemplateVariables, convertFiltersToQuery } from './helper';
-
-interface Props {
-  label: string;
-  url: string;
-  filters: Filter[];
-}
-
-const fetchTransaction = debounce(
-  async (filters: Filter[], callback: (transaction: Transaction) => void) => {
-    const transaction = await callApmApi({
-      signal: null,
-      endpoint: 'GET /api/apm/settings/custom_links/transaction',
-      params: { query: convertFiltersToQuery(filters) },
-    });
-    callback(transaction);
-  },
-  1000
-);
-
-const getTextColor = (value?: string) => (value ? 'default' : 'subdued');
-
-export function LinkPreview({ label, url, filters }: Props) {
-  const [transaction, setTransaction] = useState<Transaction | undefined>();
-
-  useEffect(() => {
-    /*
-      React throwns "Can't perform a React state update on an unmounted component"
-      It happens when the Custom Link flyout is closed before the return of the api request.
-      To avoid such case, sets the isUnmounted to true when component unmount and check its value before update the transaction.
-    */
-    let isUnmounted = false;
-    fetchTransaction(filters, (_transaction: Transaction) => {
-      if (!isUnmounted) {
-        setTransaction(_transaction);
-      }
-    });
-    return () => {
-      isUnmounted = true;
-    };
-  }, [filters]);
-
-  const { formattedUrl, error } = replaceTemplateVariables(url, transaction);
-
-  return (
-    <EuiPanel betaBadgeLabel="Preview" paddingSize="l">
-      <EuiText
-        size="s"
-        color={getTextColor(label)}
-        className="eui-textBreakWord"
-        data-test-subj="preview-label"
-      >
-        {label
-          ? label
-          : i18n.translate(
-              'xpack.apm.settings.customizeUI.customLink.default.label',
-              { defaultMessage: 'Elastic.co' }
-            )}
-      </EuiText>
-
-      <EuiText
-        size="s"
-        color={getTextColor(url)}
-        className="eui-textBreakWord"
-        data-test-subj="preview-url"
-      >
-        {url ? (
-          <EuiLink
-            href={formattedUrl}
-            target="_blank"
-            data-test-subj="preview-link"
-          >
-            {formattedUrl}
-          </EuiLink>
-        ) : (
-          i18n.translate(
-            'xpack.apm.settings.customizeUI.customLink.default.url',
-            { defaultMessage: 'https://www.elastic.co' }
-          )
-        )}
-      </EuiText>
-      <EuiSpacer />
-      <EuiFlexGroup justifyContent="spaceBetween">
-        <EuiFlexItem grow={false}>
-          <EuiText size="s" color="subdued">
-            {i18n.translate(
-              'xpack.apm.settings.customizeUI.customLink.linkPreview.descrition',
-              {
-                defaultMessage:
-                  'Test your link with values from an example transaction document based on the filters above.',
-              }
-            )}
-          </EuiText>
-        </EuiFlexItem>
-
-        <EuiFlexItem grow={false}>
-          {error && (
-            <EuiToolTip position="top" content={error}>
-              <EuiIcon
-                type="alert"
-                color="warning"
-                data-test-subj="preview-warning"
-              />
-            </EuiToolTip>
-          )}
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    </EuiPanel>
-  );
-}
diff --git a/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CreateEditCustomLinkFlyout/index.tsx b/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CreateEditCustomLinkFlyout/index.tsx
index ccd2b0d425743..dfe768735d19b 100644
--- a/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CreateEditCustomLinkFlyout/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CreateEditCustomLinkFlyout/index.tsx
@@ -22,7 +22,7 @@ import { FiltersSection } from './FiltersSection';
 import { FlyoutFooter } from './FlyoutFooter';
 import { LinkSection } from './LinkSection';
 import { saveCustomLink } from './saveCustomLink';
-import { LinkPreview } from './LinkPreview';
+import { LinkPreview } from './link_preview';
 import { Documentation } from './Documentation';
 
 interface Props {
diff --git a/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CreateEditCustomLinkFlyout/link_preview.stories.tsx b/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CreateEditCustomLinkFlyout/link_preview.stories.tsx
new file mode 100644
index 0000000000000..3bf17a733bf8a
--- /dev/null
+++ b/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CreateEditCustomLinkFlyout/link_preview.stories.tsx
@@ -0,0 +1,39 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { ComponentProps } from 'react';
+import { CoreStart } from 'kibana/public';
+import { createCallApmApi } from '../../../../../../services/rest/createCallApmApi';
+import { LinkPreview } from './link_preview';
+
+export default {
+  title:
+    'app/Settings/CustomizeUI/CustomLink/CreateEditCustomLinkFlyout/LinkPreview',
+  component: LinkPreview,
+};
+
+export function Example({
+  filters,
+  label,
+  url,
+}: ComponentProps<typeof LinkPreview>) {
+  const coreMock = ({
+    http: {
+      get: async () => ({ transaction: { id: '0' } }),
+    },
+    uiSettings: { get: () => false },
+  } as unknown) as CoreStart;
+
+  createCallApmApi(coreMock);
+
+  return <LinkPreview filters={filters} label={label} url={url} />;
+}
+Example.args = {
+  filters: [],
+  label: 'Example label',
+  url: 'https://example.com',
+} as ComponentProps<typeof LinkPreview>;
diff --git a/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CreateEditCustomLinkFlyout/link_preview.test.tsx b/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CreateEditCustomLinkFlyout/link_preview.test.tsx
index 6348157104287..6a6db40892e10 100644
--- a/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CreateEditCustomLinkFlyout/link_preview.test.tsx
+++ b/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CreateEditCustomLinkFlyout/link_preview.test.tsx
@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import { LinkPreview } from '../CreateEditCustomLinkFlyout/LinkPreview';
+import { LinkPreview } from '../CreateEditCustomLinkFlyout/link_preview';
 import {
   render,
   getNodeText,
diff --git a/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CreateEditCustomLinkFlyout/link_preview.tsx b/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CreateEditCustomLinkFlyout/link_preview.tsx
new file mode 100644
index 0000000000000..726d4ba0d65ee
--- /dev/null
+++ b/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/CreateEditCustomLinkFlyout/link_preview.tsx
@@ -0,0 +1,147 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { useEffect, useState } from 'react';
+import {
+  EuiPanel,
+  EuiText,
+  EuiSpacer,
+  EuiLink,
+  EuiToolTip,
+  EuiIcon,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiTitle,
+} from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { debounce } from 'lodash';
+import { Filter } from '../../../../../../../common/custom_link/custom_link_types';
+import { Transaction } from '../../../../../../../typings/es_schemas/ui/transaction';
+import { callApmApi } from '../../../../../../services/rest/createCallApmApi';
+import { replaceTemplateVariables, convertFiltersToQuery } from './helper';
+
+export interface LinkPreviewProps {
+  label: string;
+  url: string;
+  filters: Filter[];
+}
+
+const fetchTransaction = debounce(
+  async (filters: Filter[], callback: (transaction: Transaction) => void) => {
+    const transaction = await callApmApi({
+      signal: null,
+      endpoint: 'GET /api/apm/settings/custom_links/transaction',
+      params: { query: convertFiltersToQuery(filters) },
+    });
+    callback(transaction);
+  },
+  1000
+);
+
+const getTextColor = (value?: string) => (value ? 'default' : 'subdued');
+
+export function LinkPreview({ label, url, filters }: LinkPreviewProps) {
+  const [transaction, setTransaction] = useState<Transaction | undefined>();
+
+  useEffect(() => {
+    /*
+      React throwns "Can't perform a React state update on an unmounted component"
+      It happens when the Custom Link flyout is closed before the return of the api request.
+      To avoid such case, sets the isUnmounted to true when component unmount and check its value before update the transaction.
+    */
+    let isUnmounted = false;
+    fetchTransaction(filters, (_transaction: Transaction) => {
+      if (!isUnmounted) {
+        setTransaction(_transaction);
+      }
+    });
+    return () => {
+      isUnmounted = true;
+    };
+  }, [filters]);
+
+  const { formattedUrl, error } = replaceTemplateVariables(url, transaction);
+
+  return (
+    <>
+      <EuiTitle size="xs">
+        <h3>
+          {i18n.translate(
+            'xpack.apm.settings.customizeUI.customLink.previewSectionTitle',
+            {
+              defaultMessage: 'Preview',
+            }
+          )}
+        </h3>
+      </EuiTitle>
+      <EuiSpacer size="s" />
+      <EuiPanel paddingSize="l">
+        <EuiText
+          size="s"
+          color={getTextColor(label)}
+          className="eui-textBreakWord"
+          data-test-subj="preview-label"
+        >
+          {label
+            ? label
+            : i18n.translate(
+                'xpack.apm.settings.customizeUI.customLink.default.label',
+                { defaultMessage: 'Elastic.co' }
+              )}
+        </EuiText>
+
+        <EuiText
+          size="s"
+          color={getTextColor(url)}
+          className="eui-textBreakWord"
+          data-test-subj="preview-url"
+        >
+          {url ? (
+            <EuiLink
+              href={formattedUrl}
+              target="_blank"
+              data-test-subj="preview-link"
+            >
+              {formattedUrl}
+            </EuiLink>
+          ) : (
+            i18n.translate(
+              'xpack.apm.settings.customizeUI.customLink.default.url',
+              { defaultMessage: 'https://www.elastic.co' }
+            )
+          )}
+        </EuiText>
+        <EuiSpacer />
+        <EuiFlexGroup justifyContent="spaceBetween">
+          <EuiFlexItem grow={false}>
+            <EuiText size="s" color="subdued">
+              {i18n.translate(
+                'xpack.apm.settings.customizeUI.customLink.linkPreview.descrition',
+                {
+                  defaultMessage:
+                    'Test your link with values from an example transaction document based on the filters above.',
+                }
+              )}
+            </EuiText>
+          </EuiFlexItem>
+
+          <EuiFlexItem grow={false}>
+            {error && (
+              <EuiToolTip position="top" content={error}>
+                <EuiIcon
+                  type="alert"
+                  color="warning"
+                  data-test-subj="preview-warning"
+                />
+              </EuiToolTip>
+            )}
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiPanel>
+    </>
+  );
+}
diff --git a/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/index.tsx b/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/index.tsx
index 49fa3eab47862..ab18a31e76917 100644
--- a/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/index.tsx
@@ -20,7 +20,7 @@ import { INVALID_LICENSE } from '../../../../../../common/custom_link';
 import { CustomLink } from '../../../../../../common/custom_link/custom_link_types';
 import { FETCH_STATUS, useFetcher } from '../../../../../hooks/use_fetcher';
 import { useLicenseContext } from '../../../../../context/license/use_license_context';
-import { LicensePrompt } from '../../../../shared/LicensePrompt';
+import { LicensePrompt } from '../../../../shared/license_prompt';
 import { CreateCustomLinkButton } from './CreateCustomLinkButton';
 import { CreateEditCustomLinkFlyout } from './CreateEditCustomLinkFlyout';
 import { CustomLinkTable } from './CustomLinkTable';
diff --git a/x-pack/plugins/apm/public/components/app/Settings/anomaly_detection/index.tsx b/x-pack/plugins/apm/public/components/app/Settings/anomaly_detection/index.tsx
index 72f0249f07bf6..62b39664cf63d 100644
--- a/x-pack/plugins/apm/public/components/app/Settings/anomaly_detection/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/Settings/anomaly_detection/index.tsx
@@ -14,7 +14,7 @@ import { useApmPluginContext } from '../../../../context/apm_plugin/use_apm_plug
 import { JobsList } from './jobs_list';
 import { AddEnvironments } from './add_environments';
 import { useFetcher } from '../../../../hooks/use_fetcher';
-import { LicensePrompt } from '../../../shared/LicensePrompt';
+import { LicensePrompt } from '../../../shared/license_prompt';
 import { useLicenseContext } from '../../../../context/license/use_license_context';
 import { APIReturnType } from '../../../../services/rest/createCallApmApi';
 
diff --git a/x-pack/plugins/apm/public/components/app/correlations/index.tsx b/x-pack/plugins/apm/public/components/app/correlations/index.tsx
index e0651edbeb79b..62c547aa69e0d 100644
--- a/x-pack/plugins/apm/public/components/app/correlations/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/correlations/index.tsx
@@ -34,7 +34,7 @@ import {
 } from '../../../../../observability/public';
 import { isActivePlatinumLicense } from '../../../../common/license_check';
 import { useLicenseContext } from '../../../context/license/use_license_context';
-import { LicensePrompt } from '../../shared/LicensePrompt';
+import { LicensePrompt } from '../../shared/license_prompt';
 import { IUrlParams } from '../../../context/url_params_context/types';
 
 const latencyTab = {
diff --git a/x-pack/plugins/apm/public/components/shared/LicensePrompt/index.tsx b/x-pack/plugins/apm/public/components/shared/LicensePrompt/index.tsx
deleted file mode 100644
index 97a48a61e47cc..0000000000000
--- a/x-pack/plugins/apm/public/components/shared/LicensePrompt/index.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import { EuiButton, EuiEmptyPrompt, EuiPanel } from '@elastic/eui';
-import React from 'react';
-import { i18n } from '@kbn/i18n';
-import { useKibanaUrl } from '../../../hooks/useKibanaUrl';
-
-interface Props {
-  text: string;
-  showBetaBadge?: boolean;
-}
-
-export function LicensePrompt({ text, showBetaBadge = false }: Props) {
-  const licensePageUrl = useKibanaUrl(
-    '/app/management/stack/license_management'
-  );
-
-  const renderLicenseBody = (
-    <EuiEmptyPrompt
-      iconType="iInCircle"
-      iconColor="subdued"
-      title={
-        <h2>
-          {i18n.translate('xpack.apm.license.title', {
-            defaultMessage: 'Start free 30-day trial',
-          })}
-        </h2>
-      }
-      body={<p>{text}</p>}
-      actions={
-        <EuiButton fill={true} href={licensePageUrl}>
-          {i18n.translate('xpack.apm.license.button', {
-            defaultMessage: 'Start trial',
-          })}
-        </EuiButton>
-      }
-    />
-  );
-
-  const renderWithBetaBadge = (
-    <EuiPanel
-      betaBadgeLabel={i18n.translate('xpack.apm.license.betaBadge', {
-        defaultMessage: 'Beta',
-      })}
-      betaBadgeTooltipContent={i18n.translate(
-        'xpack.apm.license.betaTooltipMessage',
-        {
-          defaultMessage:
-            'This feature is currently in beta. If you encounter any bugs or have feedback, please open an issue or visit our discussion forum.',
-        }
-      )}
-    >
-      {renderLicenseBody}
-    </EuiPanel>
-  );
-
-  return <>{showBetaBadge ? renderWithBetaBadge : renderLicenseBody}</>;
-}
diff --git a/x-pack/plugins/apm/public/components/shared/license_prompt/index.tsx b/x-pack/plugins/apm/public/components/shared/license_prompt/index.tsx
new file mode 100644
index 0000000000000..0950cff5127fc
--- /dev/null
+++ b/x-pack/plugins/apm/public/components/shared/license_prompt/index.tsx
@@ -0,0 +1,59 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { EuiButton, EuiCard, EuiTextColor } from '@elastic/eui';
+import React from 'react';
+import { i18n } from '@kbn/i18n';
+import { useKibanaUrl } from '../../../hooks/useKibanaUrl';
+
+export interface LicensePromptProps {
+  text: string;
+  showBetaBadge?: boolean;
+}
+
+export function LicensePrompt({
+  text,
+  showBetaBadge = false,
+}: LicensePromptProps) {
+  const licensePageUrl = useKibanaUrl(
+    '/app/management/stack/license_management'
+  );
+
+  return (
+    <EuiCard
+      display={showBetaBadge ? undefined : 'plain'}
+      paddingSize="l"
+      betaBadgeLabel={
+        showBetaBadge
+          ? i18n.translate('xpack.apm.license.betaBadge', {
+              defaultMessage: 'Beta',
+            })
+          : undefined
+      }
+      betaBadgeTooltipContent={
+        showBetaBadge
+          ? i18n.translate('xpack.apm.license.betaTooltipMessage', {
+              defaultMessage:
+                'This feature is currently in beta. If you encounter any bugs or have feedback, please open an issue or visit our discussion forum.',
+            })
+          : undefined
+      }
+      title={i18n.translate('xpack.apm.license.title', {
+        defaultMessage: 'Start free 30-day trial',
+      })}
+      titleElement="h2"
+      description={<EuiTextColor color="subdued">{text}</EuiTextColor>}
+      footer={
+        <EuiButton fill={true} href={licensePageUrl}>
+          {i18n.translate('xpack.apm.license.button', {
+            defaultMessage: 'Start trial',
+          })}
+        </EuiButton>
+      }
+    />
+  );
+}
diff --git a/x-pack/plugins/apm/public/components/shared/LicensePrompt/LicensePrompt.stories.tsx b/x-pack/plugins/apm/public/components/shared/license_prompt/license_prompt.stories.tsx
similarity index 61%
rename from x-pack/plugins/apm/public/components/shared/LicensePrompt/LicensePrompt.stories.tsx
rename to x-pack/plugins/apm/public/components/shared/license_prompt/license_prompt.stories.tsx
index 57f782a020082..35e22b50306d9 100644
--- a/x-pack/plugins/apm/public/components/shared/LicensePrompt/LicensePrompt.stories.tsx
+++ b/x-pack/plugins/apm/public/components/shared/license_prompt/license_prompt.stories.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { ComponentType } from 'react';
+import React, { ComponentProps, ComponentType } from 'react';
 import { LicensePrompt } from '.';
 import {
   ApmPluginContext,
@@ -17,19 +17,25 @@ const contextMock = ({
 } as unknown) as ApmPluginContextValue;
 
 export default {
-  title: 'app/LicensePrompt',
+  title: 'shared/LicensePrompt',
   component: LicensePrompt,
   decorators: [
     (Story: ComponentType) => (
       <ApmPluginContext.Provider value={contextMock}>
-        <Story />{' '}
+        <Story />
       </ApmPluginContext.Provider>
     ),
   ],
 };
 
-export function Example() {
-  return (
-    <LicensePrompt text="To create Feature name, you must be subscribed to an Elastic X license or above." />
-  );
+export function Example({
+  showBetaBadge,
+  text,
+}: ComponentProps<typeof LicensePrompt>) {
+  return <LicensePrompt showBetaBadge={showBetaBadge} text={text} />;
 }
+Example.args = {
+  showBetaBadge: false,
+  text:
+    'To create Feature name, you must be subscribed to an Elastic X license or above.',
+} as ComponentProps<typeof LicensePrompt>;
diff --git a/x-pack/plugins/observability/public/components/app/fleet_panel/index.tsx b/x-pack/plugins/observability/public/components/app/fleet_panel/index.tsx
index b1ca3c614fc70..fce1cde38f587 100644
--- a/x-pack/plugins/observability/public/components/app/fleet_panel/index.tsx
+++ b/x-pack/plugins/observability/public/components/app/fleet_panel/index.tsx
@@ -5,53 +5,38 @@
  * 2.0.
  */
 
-import React from 'react';
-import { EuiPanel } from '@elastic/eui';
-import { EuiFlexGroup } from '@elastic/eui';
-import { EuiFlexItem } from '@elastic/eui';
-import { EuiTitle } from '@elastic/eui';
+import { EuiCard, EuiLink, EuiTextColor } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { EuiText } from '@elastic/eui';
-import { EuiLink } from '@elastic/eui';
+import React from 'react';
 import { usePluginContext } from '../../../hooks/use_plugin_context';
 
 export function FleetPanel() {
   const { core } = usePluginContext();
 
   return (
-    <EuiPanel
+    <EuiCard
       paddingSize="l"
-      hasShadow
       betaBadgeLabel={i18n.translate('xpack.observability.fleet.beta', {
         defaultMessage: 'Beta',
       })}
-    >
-      <EuiFlexGroup alignItems="center" direction="column">
-        <EuiFlexItem grow={false}>
-          <EuiTitle size="s">
-            <h4>
-              {i18n.translate('xpack.observability.fleet.title', {
-                defaultMessage: 'Have you seen our new Fleet?',
-              })}
-            </h4>
-          </EuiTitle>
-        </EuiFlexItem>
-        <EuiFlexItem>
-          <EuiText size="s" color="subdued" style={{ maxWidth: '700px' }}>
-            {i18n.translate('xpack.observability.fleet.text', {
-              defaultMessage:
-                'The Elastic Agent provides a simple, unified way to add monitoring for logs, metrics, and other types of data to your hosts. You no longer need to install multiple Beats and other agents, making it easier and faster to deploy configurations across your infrastructure.',
-            })}
-          </EuiText>
-        </EuiFlexItem>
-        <EuiFlexItem>
-          <EuiLink href={core.http.basePath.prepend('/app/fleet#/')}>
-            {i18n.translate('xpack.observability.fleet.button', {
-              defaultMessage: 'Try Fleet Beta',
-            })}
-          </EuiLink>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    </EuiPanel>
+      description={
+        <EuiTextColor color="subdued">
+          {i18n.translate('xpack.observability.fleet.text', {
+            defaultMessage:
+              'The Elastic Agent provides a simple, unified way to add monitoring for logs, metrics, and other types of data to your hosts. You no longer need to install multiple Beats and other agents, making it easier and faster to deploy configurations across your infrastructure.',
+          })}
+        </EuiTextColor>
+      }
+      footer={
+        <EuiLink href={core.http.basePath.prepend('/app/fleet#/')}>
+          {i18n.translate('xpack.observability.fleet.button', {
+            defaultMessage: 'Try Fleet Beta',
+          })}
+        </EuiLink>
+      }
+      title={i18n.translate('xpack.observability.fleet.title', {
+        defaultMessage: 'Have you seen our new Fleet?',
+      })}
+    />
   );
 }
diff --git a/x-pack/plugins/observability/public/pages/landing/landing.stories.tsx b/x-pack/plugins/observability/public/pages/landing/landing.stories.tsx
new file mode 100644
index 0000000000000..86922b045c742
--- /dev/null
+++ b/x-pack/plugins/observability/public/pages/landing/landing.stories.tsx
@@ -0,0 +1,41 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { ComponentType } from 'react';
+import { EuiThemeProvider } from '../../../../../../src/plugins/kibana_react/common';
+import { PluginContext, PluginContextValue } from '../../context/plugin_context';
+import { LandingPage } from './';
+
+export default {
+  title: 'app/Landing',
+  component: LandingPage,
+  decorators: [
+    (Story: ComponentType) => {
+      const pluginContextValue = ({
+        appMountParameters: { setHeaderActionMenu: () => {} },
+        core: {
+          http: {
+            basePath: {
+              prepend: () => '',
+            },
+          },
+        },
+      } as unknown) as PluginContextValue;
+      return (
+        <PluginContext.Provider value={pluginContextValue}>
+          <EuiThemeProvider>
+            <Story />
+          </EuiThemeProvider>
+        </PluginContext.Provider>
+      );
+    },
+  ],
+};
+
+export function Example() {
+  return <LandingPage />;
+}