diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/tabs/query/header/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/tabs/query/header/index.tsx
index c2dc6793f66efc9..a8abf4e9f9f1ee5 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/tabs/query/header/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/tabs/query/header/index.tsx
@@ -146,11 +146,6 @@ const QueryTabHeaderComponent: React.FC<Props> = ({
             </EuiFlexGroup>
           </TabHeaderContainer>
         </EuiFlexItem>
-        {/* TODO: This is a temporary solution to hide the KPIs until lens components play nicely with timelines */}
-        {/* https://github.com/elastic/kibana/issues/17156 */}
-        {/* <EuiFlexItem grow={false}> */}
-        {/*   <TimelineKpi timelineId={timelineId} /> */}
-        {/* </EuiFlexItem> */}
       </EuiFlexGroup>
     </StyledEuiFlyoutHeader>
   );
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.tsx
index a3f458841550348..ba9935cda424292 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/index.tsx
@@ -13,6 +13,8 @@ import type { UnifiedDataTableProps } from '@kbn/unified-data-table';
 import { UnifiedDataTable, DataLoadingState } from '@kbn/unified-data-table';
 import type { DataView } from '@kbn/data-views-plugin/public';
 import type { EuiDataGridCustomBodyProps, EuiDataGridProps } from '@elastic/eui';
+import { useExpandableFlyoutApi } from '@kbn/expandable-flyout';
+import { useIsExperimentalFeatureEnabled } from '../../../../../common/hooks/use_experimental_features';
 import { selectTimelineById } from '../../../../store/selectors';
 import { RowRendererCount } from '../../../../../../common/api/timeline';
 import { EmptyComponent } from '../../../../../common/lib/cell_actions/helpers';
@@ -20,7 +22,7 @@ import { withDataView } from '../../../../../common/components/with_data_view';
 import { StatefulEventContext } from '../../../../../common/components/events_viewer/stateful_event_context';
 import type { ExpandedDetailTimeline, ExpandedDetailType } from '../../../../../../common/types';
 import type { TimelineItem } from '../../../../../../common/search_strategy';
-import { useKibana } from '../../../../../common/lib/kibana';
+import { useKibana, useUiSetting$ } from '../../../../../common/lib/kibana';
 import type {
   ColumnHeaderOptions,
   OnChangePage,
@@ -43,6 +45,8 @@ import { transformTimelineItemToUnifiedRows } from '../utils';
 import { TimelineEventDetailRow } from './timeline_event_detail_row';
 import { CustomTimelineDataGridBody } from './custom_timeline_data_grid_body';
 import { TIMELINE_EVENT_DETAIL_ROW_ID } from '../../body/constants';
+import { ENABLE_EXPANDABLE_FLYOUT_SETTING } from '../../../../../../common/constants';
+import { DocumentDetailsRightPanelKey } from '../../../../../flyout/document_details/right';
 
 export const SAMPLE_SIZE_SETTING = 500;
 const DataGridMemoized = React.memo(UnifiedDataTable);
@@ -101,6 +105,13 @@ export const TimelineDataTableComponent: React.FC<DataTableProps> = memo(
   }) {
     const dispatch = useDispatch();
 
+    const expandableTimelineFlyoutEnabled = useIsExperimentalFeatureEnabled(
+      'expandableTimelineFlyoutEnabled'
+    );
+
+    const { openFlyout } = useExpandableFlyoutApi();
+    const [isSecurityFlyoutEnabled] = useUiSetting$<boolean>(ENABLE_EXPANDABLE_FLYOUT_SETTING);
+
     // Store context in state rather than creating object in provider value={} to prevent re-renders caused by a new object being created
     const [activeStatefulEventContext] = useState({
       timelineID: timelineId,
@@ -139,26 +150,48 @@ export const TimelineDataTableComponent: React.FC<DataTableProps> = memo(
 
     const handleOnEventDetailPanelOpened = useCallback(
       (eventData: DataTableRecord & TimelineItem) => {
+        console.log("EVENT DATA: ", eventData);
         const updatedExpandedDetail: ExpandedDetailType = {
           panelView: 'eventDetail',
           params: {
             eventId: eventData.id,
-            indexName: eventData._index ?? '', // TODO: fix type error
+            indexName: eventData.raw._index ?? '', // TODO: fix type error
             refetch,
           },
         };
 
-        dispatch(
-          timelineActions.toggleDetailPanel({
-            ...updatedExpandedDetail,
-            tabType: activeTab,
-            id: timelineId,
-          })
-        );
-
-        activeTimeline.toggleExpandedDetail({ ...updatedExpandedDetail });
+        if (isSecurityFlyoutEnabled && expandableTimelineFlyoutEnabled) {
+          openFlyout({
+            right: {
+              id: DocumentDetailsRightPanelKey,
+              params: {
+                id: eventData._id,
+                indexName: eventData.raw._index ?? '',
+                scopeId: timelineId,
+              },
+            },
+          });
+        } else {
+          dispatch(
+            timelineActions.toggleDetailPanel({
+              ...updatedExpandedDetail,
+              tabType: activeTab,
+              id: timelineId,
+            })
+          );
+
+          activeTimeline.toggleExpandedDetail({ ...updatedExpandedDetail });
+        }
       },
-      [activeTab, dispatch, refetch, timelineId]
+      [
+        activeTab,
+        dispatch,
+        expandableTimelineFlyoutEnabled,
+        isSecurityFlyoutEnabled,
+        openFlyout,
+        refetch,
+        timelineId,
+      ]
     );
 
     const handleOnPanelClosed = useCallback(() => {