diff --git a/x-pack/plugins/security_solution/public/detections/pages/alert_details/index.tsx b/x-pack/plugins/security_solution/public/detections/pages/alert_details/index.tsx
index 52d28e58a1d5c..01c515e89646a 100644
--- a/x-pack/plugins/security_solution/public/detections/pages/alert_details/index.tsx
+++ b/x-pack/plugins/security_solution/public/detections/pages/alert_details/index.tsx
@@ -29,6 +29,7 @@ import { AlertDetailsLoadingPage } from './components/loading_page';
 import { AlertDetailsErrorPage } from './components/error_page';
 import { AlertDetailsHeader } from './components/header';
 import { DetailsSummaryTab } from './tabs/summary';
+import { AlertDetailsVisualizeTab } from './tabs/visualize';
 
 export const AlertDetailsPage = memo(() => {
   const { detailName: eventId } = useParams<{ detailName: string }>();
@@ -84,6 +85,9 @@ export const AlertDetailsPage = memo(() => {
                 sourcererDataView={sourcererDataView}
               />
             </Route>
+            <Route exact path={getAlertDetailsTabUrl(eventId, AlertDetailRouteType.visualize)}>
+              <AlertDetailsVisualizeTab data={detailsData} id={eventId} searchHit={searchHit} />
+            </Route>
           </Switch>
         </>
       )}
diff --git a/x-pack/plugins/security_solution/public/detections/pages/alert_details/tabs/visualize/index.tsx b/x-pack/plugins/security_solution/public/detections/pages/alert_details/tabs/visualize/index.tsx
new file mode 100644
index 0000000000000..d6eef4c64c29a
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/detections/pages/alert_details/tabs/visualize/index.tsx
@@ -0,0 +1,109 @@
+/*
+ * 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, { useState } from 'react';
+import { EuiSpacer, EuiFlexGroup, EuiButtonGroup, EuiTitle } from '@elastic/eui';
+import type { TimelineEventsDetailsItem } from '@kbn/timelines-plugin/common';
+import type { SearchHit } from '../../../../../../common/search_strategy';
+import { useTimelineDataFilters } from '../../../../../timelines/containers/use_timeline_data_filters';
+import { Resolver } from '../../../../../resolver/view';
+import { useSourcererDataView } from '../../../../../common/containers/sourcerer';
+import { JsonView } from '../../../../../common/components/event_details/json_view';
+import { EventFieldsBrowser } from '../../../../../common/components/event_details/event_fields_browser';
+import { SourcererScopeName } from '../../../../../common/store/sourcerer/model';
+import { TimelineId } from '@kbn/security-solution-plugin/common/types';
+
+export const AlertDetailsVisualizeTab = React.memo(
+  ({
+    data,
+    searchHit,
+    id,
+  }: {
+    data: TimelineEventsDetailsItem[] | null;
+    searchHit?: SearchHit;
+    id: string;
+  }) => {
+    const { browserFields } = useSourcererDataView(SourcererScopeName.detections);
+    const { from, to, shouldUpdate, selectedPatterns } = useTimelineDataFilters(false);
+    const [visiblePage, setVisiblePage] = useState('event');
+    const toggleButtons = [
+      {
+        id: 'event',
+        label: 'Event data',
+      },
+      {
+        id: 'analyzer',
+        label: 'Analyzer graph',
+      },
+      {
+        id: 'json',
+        label: 'JSON',
+      },
+    ];
+    const onChange = (optionId: string) => {
+      setVisiblePage(optionId);
+    };
+
+    return (
+      <>
+        {data && (
+          <>
+            <EuiSpacer size="m" />
+            <EuiButtonGroup
+              color="primary"
+              idSelected={visiblePage}
+              legend="Visualization pages"
+              onChange={onChange}
+              options={toggleButtons}
+            />
+            <EuiSpacer size="xl" />
+            <EuiFlexGroup direction="column">
+              {visiblePage === 'event' && (
+                <>
+                  <EuiSpacer size="m" />
+                  <EuiTitle size="m">
+                    <h2>{'All fields'}</h2>
+                  </EuiTitle>
+                  <EuiSpacer size="m" />
+                  <EventFieldsBrowser
+                    browserFields={browserFields}
+                    data={data}
+                    eventId={id}
+                    isDraggable={false}
+                    scopeId={TimelineId.detectionsAlertDetailsPage}
+                    timelineTabType="flyout"
+                    isReadOnly={false}
+                  />
+                </>
+              )}
+              {visiblePage === 'json' && (
+                <>
+                  <EuiSpacer size="m" />
+                  <JsonView rawEventData={searchHit} />
+                </>
+              )}
+              {visiblePage === 'analyzer' && (
+                <>
+                  <EuiSpacer size="m" />
+                  <Resolver
+                    databaseDocumentID={id}
+                    resolverComponentInstanceID={TimelineId.active}
+                    indices={selectedPatterns}
+                    shouldUpdate={shouldUpdate}
+                    filters={{ from, to }}
+                  />
+                </>
+              )}
+            </EuiFlexGroup>
+          </>
+        )}
+      </>
+    );
+  }
+);
+
+AlertDetailsVisualizeTab.displayName = 'AlertDetailsVisualizeTab';
diff --git a/x-pack/plugins/security_solution/public/detections/pages/alert_details/translations.ts b/x-pack/plugins/security_solution/public/detections/pages/alert_details/translations.ts
index cc95a183cb5ac..e59de6b3f7591 100644
--- a/x-pack/plugins/security_solution/public/detections/pages/alert_details/translations.ts
+++ b/x-pack/plugins/security_solution/public/detections/pages/alert_details/translations.ts
@@ -14,6 +14,13 @@ export const SUMMARY_PAGE_TITLE = i18n.translate(
   }
 );
 
+export const VISUALIZE_PAGE_TITLE = i18n.translate(
+  'xpack.securitySolution.alerts.alertDetails.navigation.visualize',
+  {
+    defaultMessage: 'Visualize',
+  }
+);
+
 export const BACK_TO_ALERTS_LINK = i18n.translate(
   'xpack.securitySolution.alerts.alertDetails.header.backToAlerts',
   {
diff --git a/x-pack/plugins/security_solution/public/detections/pages/alert_details/types.ts b/x-pack/plugins/security_solution/public/detections/pages/alert_details/types.ts
index 3b4138a9d3d7d..0ebfbe36adfd1 100644
--- a/x-pack/plugins/security_solution/public/detections/pages/alert_details/types.ts
+++ b/x-pack/plugins/security_solution/public/detections/pages/alert_details/types.ts
@@ -9,6 +9,7 @@ import type { NavTab } from '../../../common/components/navigation/types';
 
 export enum AlertDetailRouteType {
   summary = 'summary',
+  visualize = 'visualize',
 }
 
 export type AlertDetailNavTabs = Record<`${AlertDetailRouteType}`, NavTab>;
diff --git a/x-pack/plugins/security_solution/public/detections/pages/alert_details/utils/breadcrumbs.ts b/x-pack/plugins/security_solution/public/detections/pages/alert_details/utils/breadcrumbs.ts
index 632c40816476b..d9a0dafe966f3 100644
--- a/x-pack/plugins/security_solution/public/detections/pages/alert_details/utils/breadcrumbs.ts
+++ b/x-pack/plugins/security_solution/public/detections/pages/alert_details/utils/breadcrumbs.ts
@@ -15,6 +15,7 @@ import * as i18n from '../translations';
 
 const TabNameMappedToI18nKey: Record<AlertDetailRouteType, string> = {
   [AlertDetailRouteType.summary]: i18n.SUMMARY_PAGE_TITLE,
+  [AlertDetailRouteType.visualize]: i18n.VISUALIZE_PAGE_TITLE,
 };
 
 export const getTrailingBreadcrumbs = (
diff --git a/x-pack/plugins/security_solution/public/detections/pages/alert_details/utils/navigation.ts b/x-pack/plugins/security_solution/public/detections/pages/alert_details/utils/navigation.ts
index 540cd99ad9bde..652721b7d2d03 100644
--- a/x-pack/plugins/security_solution/public/detections/pages/alert_details/utils/navigation.ts
+++ b/x-pack/plugins/security_solution/public/detections/pages/alert_details/utils/navigation.ts
@@ -20,4 +20,10 @@ export const getAlertDetailsNavTabs = (alertId: string): AlertDetailNavTabs => (
     href: getAlertDetailsTabUrl(alertId, AlertDetailRouteType.summary),
     disabled: false,
   },
+  [AlertDetailRouteType.visualize]: {
+    id: AlertDetailRouteType.visualize,
+    name: i18n.VISUALIZE_PAGE_TITLE,
+    href: getAlertDetailsTabUrl(alertId, AlertDetailRouteType.visualize),
+    disabled: false,
+  },
 });
diff --git a/x-pack/plugins/security_solution/public/detections/pages/alerts/index.tsx b/x-pack/plugins/security_solution/public/detections/pages/alerts/index.tsx
index d9ac9813ec72e..8fe8b12761fe2 100644
--- a/x-pack/plugins/security_solution/public/detections/pages/alerts/index.tsx
+++ b/x-pack/plugins/security_solution/public/detections/pages/alerts/index.tsx
@@ -45,6 +45,7 @@ const AlertsContainerComponent: React.FC = () => {
           {/* Redirect to the summary page if only the detail name is provided  */}
           <Route
             path={`${ALERTS_PATH}/:detailName`}
+            exact
             render={({
               match: {
                 params: { detailName },