diff --git a/packages/kbn-babel-preset/styled_components_files.js b/packages/kbn-babel-preset/styled_components_files.js
index 7d001d18563e4..4b5db911e65a7 100644
--- a/packages/kbn-babel-preset/styled_components_files.js
+++ b/packages/kbn-babel-preset/styled_components_files.js
@@ -177,19 +177,10 @@ module.exports = {
     /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]and_or_badge[\/\\]rounded_badge_antenna.test.tsx/,
     /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]and_or_badge[\/\\]rounded_badge_antenna.tsx/,
     /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]auto_download[\/\\]auto_download.tsx/,
-    /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]charts[\/\\]barchart.tsx/,
-    /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]charts[\/\\]chart_place_holder.tsx/,
-    /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]charts[\/\\]common.tsx/,
-    /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]charts[\/\\]donutchart.tsx/,
-    /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]charts[\/\\]draggable_legend.tsx/,
-    /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]charts[\/\\]draggable_legend_item.tsx/,
-    /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]charts[\/\\]legend_item.tsx/,
     /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]conditions_table[\/\\]index.stories.tsx/,
-    /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]conditions_table[\/\\]index.tsx/,
     /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]drag_and_drop[\/\\]draggable_wrapper.tsx/,
     /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]drag_and_drop[\/\\]droppable_wrapper.tsx/,
     /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]drag_and_drop[\/\\]provider_container.tsx/,
-    /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]empty_page[\/\\]index.tsx/,
     /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]empty_value[\/\\]empty_value.test.tsx/,
     /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]empty_value[\/\\]index.tsx/,
     /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]endpoint[\/\\]agents[\/\\]agent_status[\/\\]agent_status.tsx/,
@@ -197,22 +188,14 @@ module.exports = {
     /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]events_viewer[\/\\]summary_view_select[\/\\]index.tsx/,
     /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]field_selection[\/\\]index.tsx/,
     /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]filters_global[\/\\]filters_global.tsx/,
-    /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]guided_onboarding_tour[\/\\]tour_step.tsx/,
     /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]header_actions[\/\\]actions.tsx/,
-    /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]header_page[\/\\]index.tsx/,
-    /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]header_page[\/\\]title.tsx/,
-    /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]header_section[\/\\]index.tsx/,
     /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]health_truncate_text[\/\\]index.tsx/,
     /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]hover_visibility_container[\/\\]index.tsx/,
-    /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]inspect[\/\\]modal.tsx/,
     /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]item_details_card[\/\\]index.stories.tsx/,
     /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]item_details_card[\/\\]index.tsx/,
     /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]line_clamp[\/\\]index.tsx/,
     /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]link_icon[\/\\]index.tsx/,
-    /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]links[\/\\]helpers.tsx/,
     /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]loader[\/\\]index.tsx/,
-    /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]matrix_histogram[\/\\]index.tsx/,
-    /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]matrix_histogram[\/\\]matrix_loader.tsx/,
     /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]ml[\/\\]score[\/\\]anomaly_score.tsx/,
     /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]ml[\/\\]score[\/\\]create_description_list.tsx/,
     /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]ml[\/\\]tables[\/\\]basic_table.tsx/,
@@ -222,16 +205,12 @@ module.exports = {
     /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]ml_popover[\/\\]jobs_table[\/\\]showing_count.tsx/,
     /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]ml_popover[\/\\]ml_popover.tsx/,
     /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]ml_popover[\/\\]upgrade_contents.tsx/,
-    /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]news_feed[\/\\]post[\/\\]index.tsx/,
     /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]no_privileges[\/\\]no_privileges.tsx/,
-    /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]page[\/\\]index.tsx/,
-    /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]page_wrapper[\/\\]index.tsx/,
     /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]panel[\/\\]index.tsx/,
     /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]popover_items[\/\\]index.tsx/,
     /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]progress_inline[\/\\]index.tsx/,
     /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]selectable_text[\/\\]index.tsx/,
     /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]subtitle[\/\\]index.tsx/,
-    /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]tables[\/\\]helpers.tsx/,
     /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]text_field_value[\/\\]index.stories.tsx/,
     /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]threat_match[\/\\]and_badge.test.tsx/,
     /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]threat_match[\/\\]and_badge.tsx/,
@@ -247,13 +226,9 @@ module.exports = {
     /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]toasters[\/\\]modal_all_errors.tsx/,
     /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]toolbar[\/\\]bulk_actions[\/\\]index.tsx/,
     /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]toolbar[\/\\]unit[\/\\]styles.tsx/,
-    /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]top_n[\/\\]top_n.tsx/,
     /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]truncatable_text[\/\\]truncatable_text.tsx/,
     /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]utility_bar[\/\\]styles.tsx/,
     /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]utility_bar[\/\\]utility_bar_action.tsx/,
-    /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]visualization_actions[\/\\]actions.tsx/,
-    /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]visualization_actions[\/\\]lens_embeddable.tsx/,
-    /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]components[\/\\]visualization_actions[\/\\]visualization_embeddable.tsx/,
     /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]mock[\/\\]storybook_providers.tsx/,
     /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]common[\/\\]mock[\/\\]test_providers.tsx/,
     /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]detection_engine[\/\\]rule_creation[\/\\]components[\/\\]eql_query_edit[\/\\]eql_overview_link.tsx/,
diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/barchart.tsx b/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/barchart.tsx
index 526261d13bca6..42a98a0b743db 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/barchart.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/barchart.tsx
@@ -13,7 +13,7 @@ import { Chart, BarSeries, Axis, Position, ScaleType, Settings } from '@elastic/
 import { getOr, get, isNumber } from 'lodash/fp';
 import deepmerge from 'deepmerge';
 import { v4 as uuidv4 } from 'uuid';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import deepEqual from 'fast-deep-equal';
 
 import { escapeDataProviderId } from '../drag_and_drop/helpers';
diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/chart_place_holder.tsx b/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/chart_place_holder.tsx
index bce7146d3c1db..a3938242c910e 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/chart_place_holder.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/chart_place_holder.tsx
@@ -7,7 +7,7 @@
 
 import React from 'react';
 import { EuiFlexItem, EuiText, EuiFlexGroup } from '@elastic/eui';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import type { ChartSeriesData } from './common';
 import { checkIfAllValuesAreZero } from './common';
 import * as i18n from './translation';
diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/common.test.tsx b/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/common.test.tsx
index f600eb501d189..5652d1337020c 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/common.test.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/common.test.tsx
@@ -5,9 +5,12 @@
  * 2.0.
  */
 
-import { shallow } from 'enzyme';
+import { mount } from 'enzyme';
 import React from 'react';
 import { renderHook } from '@testing-library/react';
+import { matchers } from '@emotion/jest';
+
+expect.extend(matchers);
 
 import { useDarkMode } from '../../lib/kibana';
 import type { ChartSeriesData } from './common';
@@ -25,12 +28,12 @@ jest.mock('../../lib/kibana');
 
 describe('WrappedByAutoSizer', () => {
   it('should render correct default height', () => {
-    const wrapper = shallow(<WrappedByAutoSizer />);
+    const wrapper = mount(<WrappedByAutoSizer />);
     expect(wrapper).toHaveStyleRule('height', defaultChartHeight);
   });
 
   it('should render correct given height', () => {
-    const wrapper = shallow(<WrappedByAutoSizer height="100px" />);
+    const wrapper = mount(<WrappedByAutoSizer height="100px" />);
     expect(wrapper).toHaveStyleRule('height', '100px');
   });
 });
diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/common.tsx b/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/common.tsx
index 120fb6977b0de..feb683c681418 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/common.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/common.tsx
@@ -20,7 +20,7 @@ import type {
 import { LEGACY_DARK_THEME, LEGACY_LIGHT_THEME, Position } from '@elastic/charts';
 import { EuiFlexGroup } from '@elastic/eui';
 import React from 'react';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 import { useDarkMode } from '../../lib/kibana';
 
diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/donutchart.tsx b/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/donutchart.tsx
index 2d5dcafc77df5..de711b6d086b3 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/donutchart.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/donutchart.tsx
@@ -5,11 +5,11 @@
  * 2.0.
  */
 
-import type { EuiFlexGroupProps } from '@elastic/eui';
 import { EuiFlexGroup, EuiFlexItem, EuiText, EuiToolTip, useEuiTheme } from '@elastic/eui';
 import React, { useCallback, useMemo } from 'react';
 
 import type { Datum, NodeColorAccessor, PartialTheme, ElementClickListener } from '@elastic/charts';
+import type { SerializedStyles } from '@emotion/react';
 import {
   Chart,
   Partition,
@@ -18,10 +18,9 @@ import {
   defaultPartitionValueFormatter,
 } from '@elastic/charts';
 import { isEmpty } from 'lodash';
-import type { FlattenSimpleInterpolation } from 'styled-components';
-import styled from 'styled-components';
 
 import { i18n } from '@kbn/i18n';
+import { css } from '@emotion/react';
 import { useThemes } from './common';
 import { DraggableLegend } from './draggable_legend';
 import type { LegendItem } from './draggable_legend_item';
@@ -63,36 +62,34 @@ export interface DonutChartWrapperProps {
   children?: React.ReactElement;
   dataExists: boolean;
   donutTextWrapperClassName?: string;
-  donutTextWrapperStyles?: FlattenSimpleInterpolation;
+  donutTextWrapperStyles?: SerializedStyles;
   isChartEmbeddablesEnabled?: boolean;
   label?: React.ReactElement | string;
   title: React.ReactElement | string | number | null;
 }
 
-/* Make this position absolute in order to overlap the text onto the donut */
-export const DonutTextWrapper = styled(EuiFlexGroup)<
-  EuiFlexGroupProps & {
-    $dataExists?: boolean;
-    $donutTextWrapperStyles?: FlattenSimpleInterpolation;
-    $isChartEmbeddablesEnabled?: boolean;
-    className?: string;
-  }
->`
-  top: ${({ $isChartEmbeddablesEnabled, $dataExists }) =>
-    $isChartEmbeddablesEnabled && !$dataExists ? `66%` : `34%;`};
-  width: 100%;
-  max-width: 77px;
-  position: absolute;
-  z-index: 1;
-
-  ${({ className, $donutTextWrapperStyles }) =>
-    className && $donutTextWrapperStyles ? `&.${className} {${$donutTextWrapperStyles}}` : ''}
-`;
-
-export const StyledEuiFlexItem = styled(EuiFlexItem)`
-  position: relative;
-  align-items: center;
-`;
+const getStyles = (
+  dataExists: boolean,
+  isChartEmbeddablesEnabled?: boolean,
+  donutTextWrapperStyles?: SerializedStyles,
+  className?: string
+) => {
+  return {
+    donutTextWrapper: css`
+      top: ${isChartEmbeddablesEnabled && !dataExists ? '66%' : '34%'};
+      width: 100%;
+      max-width: 77px;
+      position: absolute; // Make this position absolute in order to overlap the text onto the donut
+      z-index: 1;
+
+      ${className && donutTextWrapperStyles ? `&.${className} {${donutTextWrapperStyles}}` : ''}
+    `,
+    flexItem: css`
+      position: relative;
+      align-items: center;
+    `,
+  };
+};
 
 const DonutChartWrapperComponent: React.FC<DonutChartWrapperProps> = ({
   children,
@@ -104,6 +101,12 @@ const DonutChartWrapperComponent: React.FC<DonutChartWrapperProps> = ({
   title,
 }) => {
   const { euiTheme } = useEuiTheme();
+  const styles = getStyles(
+    dataExists,
+    isChartEmbeddablesEnabled,
+    donutTextWrapperStyles,
+    donutTextWrapperClassName
+  );
   const emptyLabelStyle = useMemo(
     () => ({
       color: euiTheme.colors.textSubdued,
@@ -120,11 +123,9 @@ const DonutChartWrapperComponent: React.FC<DonutChartWrapperProps> = ({
       gutterSize="l"
       data-test-subj="donut-chart"
     >
-      <StyledEuiFlexItem grow={isChartEmbeddablesEnabled}>
-        <DonutTextWrapper
-          $dataExists={dataExists}
-          $donutTextWrapperStyles={donutTextWrapperStyles}
-          $isChartEmbeddablesEnabled={isChartEmbeddablesEnabled}
+      <EuiFlexItem css={styles.flexItem} grow={isChartEmbeddablesEnabled}>
+        <EuiFlexGroup
+          css={styles.donutTextWrapper}
           alignItems="center"
           className={donutTextWrapperClassName}
           direction="column"
@@ -145,9 +146,9 @@ const DonutChartWrapperComponent: React.FC<DonutChartWrapperProps> = ({
               </EuiToolTip>
             </EuiFlexItem>
           )}
-        </DonutTextWrapper>
+        </EuiFlexGroup>
         {children}
-      </StyledEuiFlexItem>
+      </EuiFlexItem>
     </EuiFlexGroup>
   );
 };
diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/draggable_legend.test.tsx b/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/draggable_legend.test.tsx
index c79a158d4d1ef..f437c1671c381 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/draggable_legend.test.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/draggable_legend.test.tsx
@@ -5,9 +5,11 @@
  * 2.0.
  */
 
-import type { ReactWrapper } from 'enzyme';
-import { mount } from 'enzyme';
+import { screen, render } from '@testing-library/react';
 import React from 'react';
+import { matchers } from '@emotion/jest';
+
+expect.extend(matchers);
 
 import '../../mock/react_beautiful_dnd';
 import { TestProviders } from '../../mock';
@@ -61,102 +63,102 @@ const legendItems: LegendItem[] = [
 
 describe('DraggableLegend', () => {
   const height = 400;
-  describe('rendering', () => {
-    let wrapper: ReactWrapper;
-
-    beforeEach(() => {
-      wrapper = mount(
-        <TestProviders>
-          <DraggableLegend height={height} legendItems={legendItems} />
-        </TestProviders>
-      );
-    });
-
-    it(`renders a container with the specified non-zero 'height'`, () => {
-      expect(wrapper.find('[data-test-subj="draggable-legend"]').first()).toHaveStyleRule(
-        'height',
-        `${height}px`
-      );
-    });
-
-    it(`renders a container with the default 'min-width'`, () => {
-      expect(wrapper.find('[data-test-subj="draggable-legend"]').first()).toHaveStyleRule(
-        'min-width',
-        `${DEFAULT_WIDTH}px`
-      );
-    });
-
-    it(`renders a container with the specified 'min-width'`, () => {
-      const width = 1234;
-
-      wrapper = mount(
-        <TestProviders>
-          <DraggableLegend height={height} legendItems={legendItems} minWidth={width} />
-        </TestProviders>
-      );
-
-      expect(wrapper.find('[data-test-subj="draggable-legend"]').first()).toHaveStyleRule(
-        'min-width',
-        `${width}px`
-      );
-    });
-
-    it('scrolls when necessary', () => {
-      expect(wrapper.find('[data-test-subj="draggable-legend"]').first()).toHaveStyleRule(
-        'overflow',
-        'auto'
-      );
-    });
-
-    it('renders the legend items', () => {
-      legendItems.forEach((item) =>
-        expect(
-          wrapper.find(`[data-test-subj="legend-item-${item.dataProviderId}"]`).first().text()
-        ).toEqual(item.value)
-      );
-    });
-
-    it('renders a spacer for every legend item', () => {
-      expect(wrapper.find('[data-test-subj="draggable-legend-spacer"]').hostNodes().length).toEqual(
-        legendItems.length
-      );
-    });
+
+  it(`renders a container with the specified non-zero 'height'`, () => {
+    render(
+      <TestProviders>
+        <DraggableLegend height={height} legendItems={legendItems} />
+      </TestProviders>
+    );
+    expect(screen.getByTestId('draggable-legend')).toHaveStyleRule('height', `${height}px`);
+  });
+
+  it("renders a container with the default 'min-width'", () => {
+    render(
+      <TestProviders>
+        <DraggableLegend height={height} legendItems={legendItems} />
+      </TestProviders>
+    );
+    expect(screen.getByTestId('draggable-legend')).toHaveStyleRule(
+      'min-width',
+      `${DEFAULT_WIDTH}px`
+    );
+  });
+
+  it(`renders a container with the specified 'min-width'`, () => {
+    const width = 1234;
+
+    render(
+      <TestProviders>
+        <DraggableLegend height={height} legendItems={legendItems} minWidth={width} />
+      </TestProviders>
+    );
+
+    expect(screen.getByTestId('draggable-legend')).toHaveStyleRule('min-width', `${width}px`);
   });
 
-  it('does NOT render the legend when an empty collection of legendItems is provided', () => {
-    const wrapper = mount(
+  it('scrolls when necessary', () => {
+    render(
+      <TestProviders>
+        <DraggableLegend height={height} legendItems={legendItems} />
+      </TestProviders>
+    );
+    expect(screen.getByTestId('draggable-legend')).toHaveStyleRule('overflow', 'auto');
+  });
+
+  it('renders the legend items', () => {
+    const { container } = render(
+      <TestProviders>
+        <DraggableLegend height={height} legendItems={legendItems} />
+      </TestProviders>
+    );
+
+    legendItems.forEach((item) =>
+      expect(
+        container.querySelector(`[data-provider-id="draggableId.content.${item.dataProviderId}"]`)
+      ).toHaveTextContent(item.value.toString())
+    );
+  });
+
+  it('renders a spacer for every legend item', () => {
+    render(
+      <TestProviders>
+        <DraggableLegend height={height} legendItems={legendItems} />
+      </TestProviders>
+    );
+    expect(screen.getAllByTestId('draggable-legend-spacer').length).toEqual(legendItems.length);
+  });
+
+  it('does NOT render the legend when an empty collection of legendItems is provided', async () => {
+    render(
       <TestProviders>
         <DraggableLegend height={height} legendItems={[]} />
       </TestProviders>
     );
 
-    expect(wrapper.find('[data-test-subj="draggable-legend"]').exists()).toBe(false);
+    expect(screen.queryByTestId('draggable-legend')).toBeNull();
   });
 
   it(`renders a legend with the minimum height when 'height' is zero`, () => {
-    const wrapper = mount(
+    render(
       <TestProviders>
         <DraggableLegend height={0} legendItems={legendItems} />
       </TestProviders>
     );
 
-    expect(wrapper.find('[data-test-subj="draggable-legend"]').first()).toHaveStyleRule(
+    expect(screen.getByTestId('draggable-legend')).toHaveStyleRule(
       'height',
       `${MIN_LEGEND_HEIGHT}px`
     );
   });
 
   it('renders a legend with specified class names', () => {
-    const wrapper = mount(
+    render(
       <TestProviders>
         <DraggableLegend className="foo bar baz" height={0} legendItems={legendItems} />
       </TestProviders>
     );
 
-    expect(wrapper.find('[data-test-subj="draggable-legend"]').first().getDOMNode()).toHaveClass(
-      'foo',
-      'bar',
-      'baz'
-    );
+    expect(screen.getByTestId('draggable-legend')).toHaveClass('foo', 'bar', 'baz');
   });
 });
diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/draggable_legend.tsx b/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/draggable_legend.tsx
index 6c22e648426eb..b1716773a0e3b 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/draggable_legend.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/draggable_legend.tsx
@@ -5,10 +5,10 @@
  * 2.0.
  */
 
-import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText, useEuiTheme } from '@elastic/eui';
 import { rgba } from 'polished';
 import React from 'react';
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 
 import type { LegendItem } from './draggable_legend_item';
 import { DraggableLegendItem } from './draggable_legend_item';
@@ -16,32 +16,40 @@ import { DraggableLegendItem } from './draggable_legend_item';
 export const MIN_LEGEND_HEIGHT = 175;
 export const DEFAULT_WIDTH = 165; // px
 
-const DraggableLegendContainer = styled.div<{ height: number; $minWidth: number }>`
-  height: ${({ height }) => `${height}px`};
-  overflow: auto;
-  scrollbar-width: thin;
-  width: 100%;
-  @media only screen and (min-width: ${({ theme }) => theme.eui.euiBreakpoints.m}) {
-    width: 165px;
-  }
-  min-width: ${({ $minWidth }) => `${$minWidth}px`};
+const useStyles = (height: number, minWidth: number) => {
+  const { euiTheme } = useEuiTheme();
 
-  &::-webkit-scrollbar {
-    height: ${({ theme }) => theme.eui.euiScrollBar};
-    width: ${({ theme }) => theme.eui.euiScrollBar};
-  }
+  return {
+    draggableLegendContainer: css`
+      height: ${height}px;
+      overflow: auto;
+      scrollbar-width: thin;
+      width: 100%;
 
-  &::-webkit-scrollbar-thumb {
-    background-clip: content-box;
-    background-color: ${({ theme }) => rgba(theme.eui.euiColorDarkShade, 0.5)};
-    border: ${({ theme }) => theme.eui.euiScrollBarCorner} solid transparent;
-  }
+      @media only screen and (min-width: ${euiTheme.breakpoint.m}) {
+        width: 165px;
+      }
 
-  &::-webkit-scrollbar-corner,
-  &::-webkit-scrollbar-track {
-    background-color: transparent;
-  }
-`;
+      min-width: ${minWidth}px;
+
+      &::-webkit-scrollbar {
+        height: ${euiTheme.size.base};
+        width: ${euiTheme.size.base};
+      }
+
+      &::-webkit-scrollbar-thumb {
+        background-clip: content-box;
+        background-color: ${rgba(euiTheme.colors.darkShade, 0.5)};
+        border: ${euiTheme.border.radius.small} solid transparent;
+      }
+
+      &::-webkit-scrollbar-corner,
+      &::-webkit-scrollbar-track {
+        background-color: transparent;
+      }
+    `,
+  };
+};
 
 const DraggableLegendComponent: React.FC<{
   className?: string;
@@ -56,16 +64,17 @@ const DraggableLegendComponent: React.FC<{
   minWidth = DEFAULT_WIDTH,
   isInlineActions = false,
 }) => {
+  const styles = useStyles(height === 0 ? MIN_LEGEND_HEIGHT : height, minWidth);
+
   if (legendItems.length === 0) {
     return null;
   }
 
   return (
-    <DraggableLegendContainer
+    <div
+      css={styles.draggableLegendContainer}
       className={className}
       data-test-subj="draggable-legend"
-      height={height === 0 ? MIN_LEGEND_HEIGHT : height}
-      $minWidth={minWidth}
     >
       <EuiText size="xs">
         <EuiFlexGroup direction="column" gutterSize="none">
@@ -77,7 +86,7 @@ const DraggableLegendComponent: React.FC<{
           ))}
         </EuiFlexGroup>
       </EuiText>
-    </DraggableLegendContainer>
+    </div>
   );
 };
 
diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/draggable_legend_item.tsx b/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/draggable_legend_item.tsx
index 331fe9c0c8a74..4aa0c06f964da 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/draggable_legend_item.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/draggable_legend_item.tsx
@@ -8,7 +8,7 @@
 import { EuiFlexGroup, EuiFlexItem, EuiHealth, EuiText } from '@elastic/eui';
 import numeral from '@elastic/numeral';
 import React, { useMemo } from 'react';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 import { DEFAULT_NUMBER_FORMAT } from '../../../../common/constants';
 import { DefaultDraggable } from '../draggables';
@@ -24,7 +24,7 @@ import {
 import { getSourcererScopeId } from '../../../helpers';
 
 const CountFlexItem = styled(EuiFlexItem)`
-  ${({ theme }) => `margin-right: ${theme.eui.euiSizeS};`}
+  ${({ theme }) => `margin-right: ${theme.euiTheme.size.s};`}
 `;
 
 export interface LegendItem {
diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/legend_item.tsx b/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/legend_item.tsx
index 45dbe5c7f7162..3104d121026c6 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/legend_item.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/charts/legend_item.tsx
@@ -7,7 +7,7 @@
 
 import { EuiFlexGroup, EuiFlexItem, EuiHealth, EuiText } from '@elastic/eui';
 import React from 'react';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 import { EMPTY_VALUE_LABEL } from './translation';
 import { hasValueToDisplay } from '../../utils/validators';
diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/conditions_table/__snapshots__/index.test.tsx.snap b/x-pack/solutions/security/plugins/security_solution/public/common/components/conditions_table/__snapshots__/index.test.tsx.snap
index 9f25007a5cb90..6b8688994fbdb 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/common/components/conditions_table/__snapshots__/index.test.tsx.snap
+++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/conditions_table/__snapshots__/index.test.tsx.snap
@@ -13,14 +13,14 @@ exports[`conditions_table ConditionsTable should render multi item table with an
       ]
     }
   >
-    <Styled(EuiFlexItem)
+    <conditions_table--AndOrBadgeContainer
       grow={false}
     >
       <AndOrBadge
         includeAntennas={true}
         type="and"
       />
-    </Styled(EuiFlexItem)>
+    </conditions_table--AndOrBadgeContainer>
   </EuiHideFor>
   <EuiFlexItem
     grow={1}
@@ -83,14 +83,14 @@ exports[`conditions_table ConditionsTable should render multi item table with or
       ]
     }
   >
-    <Styled(EuiFlexItem)
+    <conditions_table--AndOrBadgeContainer
       grow={false}
     >
       <AndOrBadge
         includeAntennas={true}
         type="or"
       />
-    </Styled(EuiFlexItem)>
+    </conditions_table--AndOrBadgeContainer>
   </EuiHideFor>
   <EuiFlexItem
     grow={1}
diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/conditions_table/index.tsx b/x-pack/solutions/security/plugins/security_solution/public/common/components/conditions_table/index.tsx
index ace749933d389..95bdf1c958f4a 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/common/components/conditions_table/index.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/conditions_table/index.tsx
@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import type { EuiBasicTableProps } from '@elastic/eui';
 import { EuiBasicTable, EuiFlexGroup, EuiFlexItem, EuiHideFor } from '@elastic/eui';
 
@@ -14,8 +14,8 @@ import type { AndOr } from '../and_or_badge';
 import { AndOrBadge } from '../and_or_badge';
 
 const AndOrBadgeContainer = styled(EuiFlexItem)`
-  padding-top: ${({ theme }) => theme.eui.euiSizeXL};
-  padding-bottom: ${({ theme }) => theme.eui.euiSizeS};
+  padding-top: ${({ theme }) => theme.euiTheme.size.xl};
+  padding-bottom: ${({ theme }) => theme.euiTheme.size.s};
 `;
 
 type ConditionsTableProps<T extends object> = EuiBasicTableProps<T> & {
diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/empty_page/index.tsx b/x-pack/solutions/security/plugins/security_solution/public/common/components/empty_page/index.tsx
index 7a15e17bffc13..00abf7905b392 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/common/components/empty_page/index.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/empty_page/index.tsx
@@ -16,7 +16,7 @@ import {
 } from '@elastic/eui';
 import type { MouseEventHandler, ReactNode } from 'react';
 import React, { useMemo } from 'react';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 const EmptyPrompt = styled(EuiEmptyPrompt)`
   align-self: center; /* Corrects horizontal centering in IE11 */
diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/guided_onboarding_tour/tour_step.tsx b/x-pack/solutions/security/plugins/security_solution/public/common/components/guided_onboarding_tour/tour_step.tsx
index 8fec6e25f5169..1bf7c61d44825 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/common/components/guided_onboarding_tour/tour_step.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/guided_onboarding_tour/tour_step.tsx
@@ -11,7 +11,7 @@ import type { EuiTourStepProps } from '@elastic/eui';
 import { EuiButtonEmpty, EuiImage, EuiSpacer, EuiText, EuiTourStep } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { useShallowEqualSelector } from '../../hooks/use_selector';
 import { TimelineId } from '../../../../common/types';
 import { timelineDefaults } from '../../../timelines/store/defaults';
diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/header_page/__snapshots__/index.test.tsx.snap b/x-pack/solutions/security/plugins/security_solution/public/common/components/header_page/__snapshots__/index.test.tsx.snap
index ba7e8f8ef4fce..8cd4da9a40747 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/common/components/header_page/__snapshots__/index.test.tsx.snap
+++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/header_page/__snapshots__/index.test.tsx.snap
@@ -5,7 +5,9 @@ exports[`HeaderPage it renders 1`] = `
   <EuiPageHeader
     alignItems="center"
   >
-    <HeaderSection>
+    <EuiPageHeaderSection
+      css="unknown styles"
+    >
       <Memo(TitleComponent)
         badgeOptions={
           Object {
@@ -23,7 +25,7 @@ exports[`HeaderPage it renders 1`] = `
         data-test-subj="header-page-subtitle"
         items="Test subtitle"
       />
-    </HeaderSection>
+    </EuiPageHeaderSection>
     <EuiPageHeaderSection
       data-test-subj="header-page-supplements"
     >
diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/header_page/index.test.tsx b/x-pack/solutions/security/plugins/security_solution/public/common/components/header_page/index.test.tsx
index 4e95954e70dee..3adf4f79e263e 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/common/components/header_page/index.test.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/header_page/index.test.tsx
@@ -5,7 +5,6 @@
  * 2.0.
  */
 
-import { euiDarkVars } from '@kbn/ui-theme';
 import { shallow } from 'enzyme';
 import React from 'react';
 
@@ -123,21 +122,6 @@ describe('HeaderPage', () => {
     expect(wrapper.find('[data-test-subj="header-page-supplements"]').first().exists()).toBe(false);
   });
 
-  test('it DOES NOT apply border styles when border is false', () => {
-    const wrapper = mount(
-      <TestProviders>
-        <HeaderPage title="Test title" />
-      </TestProviders>
-    );
-    const securitySolutionHeaderPage = wrapper.find('.securitySolutionHeaderPage').first();
-
-    expect(securitySolutionHeaderPage).not.toHaveStyleRule(
-      'border-bottom',
-      euiDarkVars.euiBorderThin
-    );
-    expect(securitySolutionHeaderPage).not.toHaveStyleRule('padding-bottom', euiDarkVars.euiSizeL);
-  });
-
   test('it renders the right side items', () => {
     const wrapper = mount(
       <TestProviders>
diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/header_page/index.tsx b/x-pack/solutions/security/plugins/security_solution/public/common/components/header_page/index.tsx
index 21f310f5344c9..8027ff625ace6 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/common/components/header_page/index.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/header_page/index.tsx
@@ -11,10 +11,10 @@ import {
   EuiPageHeaderSection,
   EuiSpacer,
   useEuiTheme,
+  euiFontSize,
 } from '@elastic/eui';
 import React from 'react';
 import { css } from '@emotion/react';
-import styled, { css as styleCss } from 'styled-components';
 
 import type { LinkIconProps } from '../link_icon';
 import { LinkIcon } from '../link_icon';
@@ -30,25 +30,6 @@ interface HeaderProps {
   isLoading?: boolean;
 }
 
-const LinkBack = styled.div.attrs({
-  className: 'securitySolutionHeaderPage__linkBack',
-})`
-  ${({ theme }) => styleCss`
-    font-size: ${theme.eui.euiFontSizeXS};
-    line-height: ${theme.eui.euiLineHeight};
-    margin-bottom: ${theme.eui.euiSizeS};
-  `}
-`;
-LinkBack.displayName = 'LinkBack';
-
-const HeaderSection = styled(EuiPageHeaderSection)`
-  // Without  min-width: 0, as a flex child, it wouldn't shrink properly
-  // and could overflow its parent.
-  min-width: 0;
-  max-width: 100%;
-`;
-HeaderSection.displayName = 'HeaderSection';
-
 function Divider(): JSX.Element {
   const { euiTheme } = useEuiTheme();
 
@@ -81,14 +62,30 @@ export interface HeaderPageProps extends HeaderProps {
   titleNode?: React.ReactElement;
 }
 
+const useHeaderLinkBackStyles = () => {
+  const euiThemeContext = useEuiTheme();
+  const fontSizeXs = euiFontSize(euiThemeContext, 'xs').fontSize;
+  const lineHeightS = euiFontSize(euiThemeContext, 's').lineHeight;
+  const { euiTheme } = euiThemeContext;
+
+  return {
+    linkBack: css`
+      font-size: ${fontSizeXs};
+      line-height: ${lineHeightS};
+      margin-bottom: ${euiTheme.size.s};
+    `,
+  };
+};
+
 export const HeaderLinkBack: React.FC<{ backOptions: BackOptions }> = React.memo(
   ({ backOptions }) => {
+    const styles = useHeaderLinkBackStyles();
     const { navigateToUrl } = useKibana().services.application;
     const { formatUrl } = useFormatUrl(backOptions.pageId);
 
     const backUrl = formatUrl(backOptions.path ?? '');
     return (
-      <LinkBack>
+      <div css={styles.linkBack} className="securitySolutionHeaderPage__linkBack">
         <LinkIcon
           dataTestSubj={backOptions.dataTestSubj ?? 'link-back'}
           onClick={(ev: Event) => {
@@ -100,12 +97,21 @@ export const HeaderLinkBack: React.FC<{ backOptions: BackOptions }> = React.memo
         >
           {backOptions.text}
         </LinkIcon>
-      </LinkBack>
+      </div>
     );
   }
 );
 HeaderLinkBack.displayName = 'HeaderLinkBack';
 
+const headerPageStyles = {
+  // Without  min-width: 0, as a flex child, it wouldn't shrink properly
+  // and could overflow its parent.
+  headerSection: css`
+    min-width: 0;
+    max-width: 100%;
+  `,
+};
+
 const HeaderPageComponent: React.FC<HeaderPageProps> = ({
   backOptions,
   backComponent,
@@ -121,7 +127,7 @@ const HeaderPageComponent: React.FC<HeaderPageProps> = ({
 }) => (
   <>
     <EuiPageHeader alignItems="center" rightSideItems={rightSideItems}>
-      <HeaderSection>
+      <EuiPageHeaderSection css={headerPageStyles.headerSection}>
         {backOptions && <HeaderLinkBack backOptions={backOptions} />}
         {!backOptions && backComponent && <>{backComponent}</>}
 
@@ -134,7 +140,7 @@ const HeaderPageComponent: React.FC<HeaderPageProps> = ({
           </>
         )}
         {border && isLoading && <EuiProgress size="xs" color="accent" />}
-      </HeaderSection>
+      </EuiPageHeaderSection>
 
       {children && (
         <EuiPageHeaderSection data-test-subj="header-page-supplements">
diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/header_page/title.tsx b/x-pack/solutions/security/plugins/security_solution/public/common/components/header_page/title.tsx
index 2da771d0163bd..14bf4dfe7fada 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/common/components/header_page/title.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/header_page/title.tsx
@@ -7,7 +7,7 @@
 
 import React from 'react';
 import { EuiBetaBadge, EuiBadge, EuiTitle } from '@elastic/eui';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 import type { BadgeOptions, TitleProp } from './types';
 import { TruncatableText } from '../truncatable_text';
diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/header_section/__snapshots__/index.test.tsx.snap b/x-pack/solutions/security/plugins/security_solution/public/common/components/header_section/__snapshots__/index.test.tsx.snap
index 3ef2ecf88449b..24ce833a307c8 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/common/components/header_section/__snapshots__/index.test.tsx.snap
+++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/header_section/__snapshots__/index.test.tsx.snap
@@ -1,9 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`HeaderSection it renders 1`] = `
-<Header
-  $hideSubtitle={false}
-  className="toggle-expand siemHeaderSection"
+<header
+  css="unknown styles"
   data-test-subj="header-section"
 >
   <EuiFlexGroup
@@ -62,5 +61,5 @@ exports[`HeaderSection it renders 1`] = `
       />
     </EuiFlexItem>
   </EuiFlexGroup>
-</Header>
+</header>
 `;
diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/header_section/index.test.tsx b/x-pack/solutions/security/plugins/security_solution/public/common/components/header_section/index.test.tsx
index 4f4a15695b216..5f4fa2528aba9 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/common/components/header_section/index.test.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/header_section/index.test.tsx
@@ -5,13 +5,17 @@
  * 2.0.
  */
 
-import { euiDarkVars } from '@kbn/ui-theme';
 import { mount, shallow } from 'enzyme';
 import React from 'react';
+import { matchers } from '@emotion/jest';
+
+expect.extend(matchers);
 
 import { TestProviders } from '../../mock';
 import { getHeaderAlignment, HeaderSection } from '.';
 import { ModalInspectQuery } from '../inspect/modal';
+import { renderHook } from '@testing-library/react';
+import { useEuiTheme } from '@elastic/eui';
 
 jest.mock('../inspect/modal', () => {
   const actual = jest.requireActual('../inspect/modal');
@@ -118,8 +122,12 @@ describe('HeaderSection', () => {
     );
     const siemHeaderSection = wrapper.find('.siemHeaderSection').first();
 
-    expect(siemHeaderSection).toHaveStyleRule('border-bottom', euiDarkVars.euiBorderThin);
-    expect(siemHeaderSection).toHaveStyleRule('padding-bottom', euiDarkVars.euiSizeL);
+    expect(siemHeaderSection.exists()).toBe(true);
+
+    const { result } = renderHook(() => useEuiTheme());
+
+    expect(siemHeaderSection).toHaveStyleRule('border-bottom', result.current.euiTheme.border.thin);
+    expect(siemHeaderSection).toHaveStyleRule('padding-bottom', result.current.euiTheme.size.l);
   });
 
   test('it DOES NOT apply border styles when border is false', () => {
@@ -130,8 +138,13 @@ describe('HeaderSection', () => {
     );
     const siemHeaderSection = wrapper.find('.siemHeaderSection').first();
 
-    expect(siemHeaderSection).not.toHaveStyleRule('border-bottom', euiDarkVars.euiBorderThin);
-    expect(siemHeaderSection).not.toHaveStyleRule('padding-bottom', euiDarkVars.euiSizeL);
+    const { result } = renderHook(() => useEuiTheme());
+
+    expect(siemHeaderSection).not.toHaveStyleRule(
+      'border-bottom',
+      result.current.euiTheme.border.thin
+    );
+    expect(siemHeaderSection).not.toHaveStyleRule('padding-bottom', result.current.euiTheme.size.l);
   });
 
   test('it splits the title and supplement areas evenly when split is true', () => {
diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/header_section/index.tsx b/x-pack/solutions/security/plugins/security_solution/public/common/components/header_section/index.tsx
index 75cd089a87e36..fd3854eb27a45 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/common/components/header_section/index.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/header_section/index.tsx
@@ -6,9 +6,16 @@
  */
 
 import type { EuiTitleSize } from '@elastic/eui';
-import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiIconTip, EuiTitle } from '@elastic/eui';
+import {
+  EuiButtonIcon,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiIconTip,
+  EuiTitle,
+  useEuiTheme,
+} from '@elastic/eui';
 import React, { useCallback } from 'react';
-import styled, { css } from 'styled-components';
+import { css } from '@emotion/react';
 
 import classnames from 'classnames';
 import { InspectButton } from '../inspect';
@@ -16,46 +23,35 @@ import { InspectButton } from '../inspect';
 import { Subtitle } from '../subtitle';
 import * as i18n from '../../containers/query_toggle/translations';
 
-interface HeaderProps {
-  border?: boolean;
-  height?: number;
-  className?: string; // eslint-disable-line react/no-unused-prop-types
-  $hideSubtitle?: boolean; // eslint-disable-line react/no-unused-prop-types
-}
-
-const Header = styled.header<HeaderProps>`
-  &.toggle-expand {
-    margin-bottom: ${({ theme }) => theme.eui.euiSizeL};
-  }
-
-  .no-margin {
-    margin-top: 0 !important;
-    margin-bottom: 0 !important;
-  }
-
-  ${({ height }) =>
-    height &&
-    css`
-      height: ${height}px;
-    `}
-  margin-bottom: 0;
-  user-select: text;
-
-  ${({ border }) =>
-    border &&
-    css`
-      border-bottom: ${({ theme }) => theme.eui.euiBorderThin};
-      padding-bottom: ${({ theme }) => theme.eui.euiSizeL};
-    `}
-`;
-Header.displayName = 'Header';
+const useStyles = (border?: boolean, height?: number) => {
+  const { euiTheme } = useEuiTheme();
+
+  return {
+    header: css`
+      margin-bottom: 0;
+      user-select: text;
+      ${height ? `height: ${height}px;` : ''}
+      ${border ? `border-bottom: ${euiTheme.border.thin}; padding-bottom: ${euiTheme.size.l};` : ''}
+
+      &.toggle-expand {
+        margin-bottom: ${euiTheme.size.l};
+      }
+
+      .no-margin {
+        margin-top: 0 !important;
+        margin-bottom: 0 !important;
+      }
+    `,
+  };
+};
 
-export interface HeaderSectionProps extends HeaderProps {
+export interface HeaderSectionProps {
   alignHeader?: 'center' | 'baseline' | 'stretch' | 'flexStart' | 'flexEnd';
   children?: React.ReactNode;
   outerDirection?: 'row' | 'rowReverse' | 'column' | 'columnReverse' | undefined;
   growLeftSplit?: boolean;
   headerFilters?: string | React.ReactNode;
+  border?: boolean;
   height?: number;
   hideSubtitle?: boolean;
   id?: string;
@@ -114,6 +110,7 @@ const HeaderSectionComponent: React.FC<HeaderSectionProps> = ({
   tooltip,
   tooltipTitle,
 }) => {
+  const styles = useStyles(border, height);
   const toggle = useCallback(() => {
     if (toggleQuery) {
       toggleQuery(!toggleStatus);
@@ -125,13 +122,7 @@ const HeaderSectionComponent: React.FC<HeaderSectionProps> = ({
     siemHeaderSection: true,
   });
   return (
-    <Header
-      data-test-subj="header-section"
-      border={border}
-      height={height}
-      className={classNames}
-      $hideSubtitle={hideSubtitle}
-    >
+    <header css={styles.header} data-test-subj="header-section" className={classNames}>
       <EuiFlexGroup
         data-test-subj="headerSectionOuterFlexGroup"
         direction={outerDirection}
@@ -221,7 +212,7 @@ const HeaderSectionComponent: React.FC<HeaderSectionProps> = ({
           </EuiFlexItem>
         )}
       </EuiFlexGroup>
-    </Header>
+    </header>
   );
 };
 
diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/inspect/modal.tsx b/x-pack/solutions/security/plugins/security_solution/public/common/components/inspect/modal.tsx
index bb0a20b7736b0..3598ec8ff33ab 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/common/components/inspect/modal.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/inspect/modal.tsx
@@ -21,7 +21,7 @@ import {
 import numeral from '@elastic/numeral';
 import type { ReactNode } from 'react';
 import React, { useMemo, Fragment } from 'react';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 import { useLocation } from 'react-router-dom';
 import type { InputsModelId } from '../../store/inputs/constants';
diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/links/helpers.tsx b/x-pack/solutions/security/plugins/security_solution/public/common/components/links/helpers.tsx
index 5aed35ccb4b4c..9a7a4fd2038d7 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/common/components/links/helpers.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/links/helpers.tsx
@@ -21,7 +21,7 @@ import {
   EuiLink,
   EuiPopover,
 } from '@elastic/eui';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { defaultToEmptyTag } from '../empty_value';
 export interface ReputationLinkSetting {
diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/matrix_histogram/index.tsx b/x-pack/solutions/security/plugins/security_solution/public/common/components/matrix_histogram/index.tsx
index bcc98f089cf62..e773527a1b545 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/common/components/matrix_histogram/index.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/matrix_histogram/index.tsx
@@ -6,7 +6,7 @@
  */
 
 import React, { useState, useEffect, useCallback, useMemo } from 'react';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 import { EuiFlexGroup, EuiFlexItem, EuiSelect, EuiSpacer } from '@elastic/eui';
 import type { AggregationsTermsAggregateBase } from '@elastic/elasticsearch/lib/api/types';
diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/matrix_histogram/matrix_loader.tsx b/x-pack/solutions/security/plugins/security_solution/public/common/components/matrix_histogram/matrix_loader.tsx
index 8eca508a4b74b..e8b703f34c7cc 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/common/components/matrix_histogram/matrix_loader.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/matrix_histogram/matrix_loader.tsx
@@ -7,7 +7,7 @@
 
 import React from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner } from '@elastic/eui';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 const StyledEuiFlexGroup = styled(EuiFlexGroup)`
   flex: 1;
diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/news_feed/post/index.tsx b/x-pack/solutions/security/plugins/security_solution/public/common/components/news_feed/post/index.tsx
index cc9332cb1c2a0..f2d910343b0ff 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/common/components/news_feed/post/index.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/news_feed/post/index.tsx
@@ -7,7 +7,7 @@
 
 import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText } from '@elastic/eui';
 import React from 'react';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 import { PreferenceFormattedP1DTDate } from '../../formatted_date';
 import { showNewsItem } from '../helpers';
diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/page/index.tsx b/x-pack/solutions/security/plugins/security_solution/public/common/components/page/index.tsx
index dd0af06904ef9..cc5e30351df92 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/common/components/page/index.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/page/index.tsx
@@ -5,8 +5,12 @@
  * 2.0.
  */
 
-import { EuiBadge, EuiDescriptionList, EuiFlexGroup, EuiIcon } from '@elastic/eui';
-import styled, { createGlobalStyle, css } from 'styled-components';
+import React, { memo } from 'react';
+import type { ComponentProps, FC } from 'react';
+import type { UseEuiTheme } from '@elastic/eui';
+import { EuiBadge, EuiDescriptionList, EuiFlexGroup, EuiIcon, useEuiFontSize } from '@elastic/eui';
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 
 export const SecuritySolutionAppWrapper = styled.div`
   display: flex;
@@ -22,7 +26,7 @@ SecuritySolutionAppWrapper.displayName = 'SecuritySolutionAppWrapper';
  * components, that position themselves just below the kibana header, are displayed correctly
  * when shown above content that is set to `full screen`.
  */
-export const FULL_SCREEN_CONTENT_OVERRIDES_CSS_STYLESHEET = () => css`
+export const FULL_SCREEN_CONTENT_OVERRIDES_CSS_STYLESHEET = `
   .euiOverlayMask[data-relative-to-header='below'] {
     top: 0 !important;
   }
@@ -34,12 +38,10 @@ export const FULL_SCREEN_CONTENT_OVERRIDES_CSS_STYLESHEET = () => css`
 `;
 
 /*
-  SIDE EFFECT: the following `createGlobalStyle` overrides default styling in angular code that was not theme-friendly
+  SIDE EFFECT: the following `appGlobalStyles` overrides default styling in angular code that was not theme-friendly
   and `EuiPopover`, `EuiToolTip` global styles
 */
-export const AppGlobalStyle = createGlobalStyle<{
-  theme: { eui: { euiColorPrimary: string; euiColorLightShade: string; euiSizeS: string } };
-}>`
+export const appGlobalStyles = ({ euiTheme }: UseEuiTheme): string => `
   /*
     overrides the default styling of EuiDataGrid expand popover footer to
     make it a column of actions instead of the default actions row
@@ -69,8 +71,8 @@ export const AppGlobalStyle = createGlobalStyle<{
     }
 
     .euiText + .euiPopoverFooter {
-      border-top: 1px solid ${({ theme }) => theme.eui.euiColorLightShade};
-      margin-top: ${({ theme }) => theme.eui.euiSizeS};
+      border-top: 1px solid ${euiTheme.colors.lightShade};
+      margin-top: ${euiTheme.size.s};
     }
   }
 
@@ -107,20 +109,24 @@ export const AppGlobalStyle = createGlobalStyle<{
   }
 `;
 
-export const DescriptionListStyled = styled(EuiDescriptionList)`
-  ${({ theme }) => `
-    word-break: break-word;
-    dt {
-      font-size: ${theme.eui.euiFontSizeXS} !important;
-    }
-    dd {
-      width: fit-content;
-    }
-    dd > div {
-      width: fit-content;
-    }
-  `}
-`;
+export const DescriptionListStyled: FC<ComponentProps<typeof EuiDescriptionList>> = memo(
+  ({ css: cssProp, ...props }) => {
+    const baseStyles = css`
+      word-break: break-word;
+      dt {
+        font-size: ${useEuiFontSize('xs').fontSize} !important;
+      }
+      dd {
+        width: fit-content;
+      }
+      dd > div {
+        width: fit-content;
+      }
+    `;
+
+    return <EuiDescriptionList css={[baseStyles, cssProp]} {...props} />;
+  }
+);
 
 DescriptionListStyled.displayName = 'DescriptionListStyled';
 
@@ -153,7 +159,7 @@ export const OverviewWrapper = styled(EuiFlexGroup)`
 
   .euiButtonIcon {
     position: absolute;
-    right: ${(props) => props.theme.eui.euiSizeM};
+    right: ${({ theme }) => theme.euiTheme.size.m};
     top: 6px;
     z-index: 2;
   }
diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/page_wrapper/index.tsx b/x-pack/solutions/security/plugins/security_solution/public/common/components/page_wrapper/index.tsx
index acedbe669f36a..65b2ee7bdab59 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/common/components/page_wrapper/index.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/page_wrapper/index.tsx
@@ -7,11 +7,12 @@
 
 import classNames from 'classnames';
 import React, { useEffect } from 'react';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
+import { Global } from '@emotion/react';
 import type { CommonProps } from '@elastic/eui';
 
 import { useGlobalFullScreen } from '../../containers/use_full_screen';
-import { AppGlobalStyle } from '../page';
+import { appGlobalStyles } from '../page';
 
 const Wrapper = styled.div`
   &.securitySolutionWrapper--fullHeight {
@@ -55,7 +56,7 @@ const SecuritySolutionPageWrapperComponent: React.FC<
   return (
     <Wrapper className={classes} style={style} {...otherProps}>
       {children}
-      <AppGlobalStyle />
+      <Global styles={appGlobalStyles} />
     </Wrapper>
   );
 };
diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/tables/__snapshots__/helpers.test.tsx.snap b/x-pack/solutions/security/plugins/security_solution/public/common/components/tables/__snapshots__/helpers.test.tsx.snap
index c91ece7818df0..e3b4f43293c23 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/common/components/tables/__snapshots__/helpers.test.tsx.snap
+++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/tables/__snapshots__/helpers.test.tsx.snap
@@ -23,11 +23,7 @@ exports[`Table Helpers #RowItemOverflow it returns correctly against snapshot 1`
       />
     </EuiText>
     <EuiFlexGroup
-      css={
-        Object {
-          "paddingTop": "12px",
-        }
-      }
+      css="unknown styles"
       data-test-subj="popover-additional-overflow"
     >
       <EuiFlexItem>
diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/tables/helpers.tsx b/x-pack/solutions/security/plugins/security_solution/public/common/components/tables/helpers.tsx
index 2c21ffa8cbd70..14edb569ca401 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/common/components/tables/helpers.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/tables/helpers.tsx
@@ -6,7 +6,7 @@
  */
 import React, { useCallback, useMemo, useState } from 'react';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { euiThemeVars } from '@kbn/ui-theme';
+import { css } from '@emotion/react';
 import {
   EuiLink,
   EuiPopover,
@@ -15,18 +15,15 @@ import {
   EuiTextColor,
   EuiFlexGroup,
   EuiFlexItem,
+  useEuiFontSize,
+  useEuiTheme,
 } from '@elastic/eui';
-import styled from 'styled-components';
 import { SecurityCellActions, CellActionsMode, SecurityCellActionsTrigger } from '../cell_actions';
 import { escapeDataProviderId } from '../drag_and_drop/helpers';
 import { defaultToEmptyTag, getEmptyTagValue } from '../empty_value';
 import { MoreRowItems } from '../page';
 import { MoreContainer } from '../../../timelines/components/field_renderers/more_container';
 
-const Subtext = styled.div`
-  font-size: ${(props) => props.theme.eui.euiFontSizeXS};
-`;
-
 interface GetRowItemsWithActionsParams {
   values: string[] | null | undefined;
   fieldName: string;
@@ -98,6 +95,7 @@ export const RowItemOverflowComponent: React.FC<RowItemOverflowProps> = ({
   overflowIndexStart = 5,
   maxOverflowItems = 5,
 }) => {
+  const { euiTheme } = useEuiTheme();
   const maxVisibleValues = useMemo(
     () => values.slice(0, maxOverflowItems + 1),
     [values, maxOverflowItems]
@@ -117,7 +115,7 @@ export const RowItemOverflowComponent: React.FC<RowItemOverflowProps> = ({
           </EuiText>
           {values.length > overflowIndexStart + maxOverflowItems && (
             <EuiFlexGroup
-              css={{ paddingTop: euiThemeVars.euiSizeM }}
+              css={{ paddingTop: euiTheme.size.m }}
               data-test-subj="popover-additional-overflow"
             >
               <EuiFlexItem>
@@ -148,14 +146,23 @@ interface PopoverComponentProps {
   idPrefix: string;
 }
 
+const useStyles = () => {
+  return {
+    subtext: css`
+      font-size: ${useEuiFontSize('xs').fontSize};
+    `,
+  };
+};
+
 const PopoverComponent: React.FC<PopoverComponentProps> = ({ children, count, idPrefix }) => {
+  const styles = useStyles();
   const [isOpen, setIsOpen] = useState(false);
   const onButtonClick = useCallback(() => {
     setIsOpen(!isOpen);
   }, [isOpen]);
 
   return (
-    <Subtext>
+    <div css={styles.subtext}>
       <EuiPopover
         button={
           <EuiLink onClick={onButtonClick} data-test-subj="overflow-button">
@@ -174,7 +181,7 @@ const PopoverComponent: React.FC<PopoverComponentProps> = ({ children, count, id
       >
         {children}
       </EuiPopover>
-    </Subtext>
+    </div>
   );
 };
 
diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/top_n/top_n.test.tsx b/x-pack/solutions/security/plugins/security_solution/public/common/components/top_n/top_n.test.tsx
index 73086e2d584be..4067827e6de98 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/common/components/top_n/top_n.test.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/top_n/top_n.test.tsx
@@ -8,7 +8,7 @@
 import type { ReactWrapper } from 'enzyme';
 import { mount } from 'enzyme';
 import React from 'react';
-import { waitFor } from '@testing-library/react';
+import { screen, render, waitFor, fireEvent } from '@testing-library/react';
 
 import { TestProviders, mockDataViewSpec } from '../../mock';
 
@@ -116,9 +116,8 @@ describe('TopN', () => {
     toggleTopN,
   };
   describe('common functionality', () => {
-    let wrapper: ReactWrapper;
     beforeEach(() => {
-      wrapper = mount(
+      render(
         <TestProviders>
           <TopN {...testProps} />
         </TestProviders>
@@ -126,8 +125,7 @@ describe('TopN', () => {
     });
 
     test('it invokes the toggleTopN function when the close button is clicked', () => {
-      wrapper.find('[data-test-subj="close"]').first().simulate('click');
-      wrapper.update();
+      fireEvent.click(screen.getByTestId('close'));
 
       expect(toggleTopN).toHaveBeenCalled();
     });
diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/top_n/top_n.tsx b/x-pack/solutions/security/plugins/security_solution/public/common/components/top_n/top_n.tsx
index 5c3cecfe3fce3..7b21dcd945d8d 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/common/components/top_n/top_n.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/top_n/top_n.tsx
@@ -5,9 +5,9 @@
  * 2.0.
  */
 
-import { EuiButtonIcon, EuiSuperSelect } from '@elastic/eui';
+import { EuiButtonIcon, EuiSuperSelect, useEuiTheme } from '@elastic/eui';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 
 import type { Filter, Query } from '@kbn/es-query';
 import type { DataViewSpec } from '@kbn/data-plugin/common';
@@ -21,28 +21,31 @@ import { getSourcererScopeName, removeIgnoredAlertFilters } from './helpers';
 import * as i18n from './translations';
 import type { AlertsStackByField } from '../../../detections/components/alerts_kpis/common/types';
 
-const TopNContainer = styled.div`
-  min-width: 600px;
-`;
-
-const CloseButton = styled(EuiButtonIcon)`
-  position: absolute;
-  right: 4px;
-  top: 4px;
-`;
-
-const ViewSelect = styled(EuiSuperSelect<string>)`
-  width: 170px;
-`;
-
-const TopNContent = styled.div`
-  margin-top: 4px;
-  margin-right: ${({ theme }) => theme.eui.euiSizeXS};
-
-  .euiPanel {
-    border: none;
-  }
-`;
+const useStyles = () => {
+  const { euiTheme } = useEuiTheme();
+
+  return {
+    topNContainer: css`
+      min-width: 600px;
+    `,
+    closeButton: css`
+      position: absolute;
+      right: 4px;
+      top: 4px;
+    `,
+    viewSelect: css`
+      width: 170px;
+    `,
+    topNContent: css`
+      margin-top: 4px;
+      margin-right: ${euiTheme.size.xs};
+
+      .euiPanel {
+        border: none;
+      }
+    `,
+  };
+};
 
 export interface Props extends Pick<GlobalTimeArgs, 'from' | 'to' | 'deleteQuery' | 'setQuery'> {
   filterQuery?: string;
@@ -78,6 +81,7 @@ const TopNComponent: React.FC<Props> = ({
   toggleTopN,
   applyGlobalQueriesAndFilters,
 }) => {
+  const styles = useStyles();
   const [view, setView] = useState<TimelineEventsType>(defaultView);
   const onViewSelected = useCallback(
     (value: string) => setView(value as TimelineEventsType),
@@ -91,7 +95,8 @@ const TopNComponent: React.FC<Props> = ({
 
   const headerChildren = useMemo(
     () => (
-      <ViewSelect
+      <EuiSuperSelect<string>
+        css={styles.viewSelect}
         data-test-subj="view-select"
         disabled={options.length === 1}
         onChange={onViewSelected}
@@ -99,7 +104,7 @@ const TopNComponent: React.FC<Props> = ({
         valueOfSelected={view}
       />
     ),
-    [onViewSelected, options, view]
+    [onViewSelected, options, styles.viewSelect, view]
   );
 
   // alert workflow statuses (e.g. open | closed) and other alert-specific
@@ -110,8 +115,8 @@ const TopNComponent: React.FC<Props> = ({
   );
 
   return (
-    <TopNContainer data-test-subj="topN-container">
-      <TopNContent>
+    <div css={styles.topNContainer} data-test-subj="topN-container">
+      <div css={styles.topNContent}>
         {view === 'raw' || view === 'all' ? (
           <EventsByDataset
             filterQuery={filterQuery}
@@ -142,15 +147,16 @@ const TopNComponent: React.FC<Props> = ({
             hideQueryToggle
           />
         )}
-      </TopNContent>
+      </div>
 
-      <CloseButton
+      <EuiButtonIcon
+        css={styles.closeButton}
         aria-label={i18n.CLOSE}
         data-test-subj="close"
         iconType="cross"
         onClick={toggleTopN}
       />
-    </TopNContainer>
+    </div>
   );
 };
 
diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/actions.test.tsx b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/actions.test.tsx
index 7557d4bc76820..f836484efb454 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/actions.test.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/actions.test.tsx
@@ -29,7 +29,7 @@ jest.mock('@elastic/eui', () => {
   const original = jest.requireActual('@elastic/eui');
   return {
     ...original,
-    EuiContextMenu: jest.fn().mockReturnValue(<div data-test-subj="viz-actions-menu" />),
+    EuiContextMenu: jest.fn(() => <div data-test-subj="viz-actions-menu" />),
   };
 });
 
diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/actions.tsx b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/actions.tsx
index bcdb9d163164c..61eea9fa57b94 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/actions.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/actions.tsx
@@ -8,7 +8,7 @@ import { EuiButtonIcon, EuiContextMenu, EuiPopover } from '@elastic/eui';
 import { buildContextMenuForActions } from '@kbn/ui-actions-plugin/public';
 
 import React, { useCallback, useMemo, useState } from 'react';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 import useAsync from 'react-use/lib/useAsync';
 import { InputsModelId } from '../../store/inputs/constants';
@@ -31,7 +31,7 @@ const Wrapper = styled.div`
     z-index: 1;
   }
   &.histogram-viz-actions {
-    padding: ${({ theme }) => theme.eui.euiSizeS};
+    padding: ${({ theme }) => theme.euiTheme.size.s};
   }
 `;
 
diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_embeddable.tsx b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_embeddable.tsx
index 871750d5ad00f..e4124e826b083 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_embeddable.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_embeddable.tsx
@@ -10,7 +10,6 @@ import { useDispatch } from 'react-redux';
 
 import { FormattedMessage } from '@kbn/i18n-react';
 import { ViewMode } from '@kbn/embeddable-plugin/public';
-import styled from 'styled-components';
 import { EuiEmptyPrompt, EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
 import type { RangeFilterParams } from '@kbn/es-query';
 import type { ClickTriggerEvent, MultiClickTriggerEvent } from '@kbn/charts-plugin/public';
@@ -19,6 +18,7 @@ import type {
   TypedLensByValueInput,
   XYState,
 } from '@kbn/lens-plugin/public';
+import { css } from '@emotion/react';
 import { setAbsoluteRangeDatePicker } from '../../store/inputs/actions';
 import { useKibana } from '../../lib/kibana';
 import { useLensAttributes } from './use_lens_attributes';
@@ -35,20 +35,20 @@ import { useInspect } from '../inspect/use_inspect';
 
 const DISABLED_ACTIONS = ['ACTION_CUSTOMIZE_PANEL'];
 
-const LensComponentWrapper = styled.div<{
-  $height?: number;
-  width?: string | number;
-}>`
-  height: ${({ $height }) => ($height ? `${$height}px` : 'auto')};
-  width: ${({ width }) => width ?? 'auto'};
-
-  .expExpressionRenderer__expression {
-    padding: 2px 0 0 0 !important;
-  }
-  .legacyMtrVis__container {
-    padding: 0;
-  }
-`;
+const getStyles = (width?: string | number, height?: number) => {
+  return {
+    lensComponentWrapper: css({
+      height: height ? `${height}px` : 'auto',
+      width: width ?? 'auto',
+      '.expExpressionRenderer__expression': {
+        padding: '2px 0 0 0 !important',
+      },
+      '.legacyMtrVis__container': {
+        padding: 0,
+      },
+    }),
+  };
+};
 
 const LensEmbeddableComponent: React.FC<LensEmbeddableComponentProps> = ({
   applyGlobalQueriesAndFilters = true,
@@ -71,7 +71,12 @@ const LensEmbeddableComponent: React.FC<LensEmbeddableComponentProps> = ({
   disableOnClickFilter = false,
   casesAttachmentMetadata,
 }) => {
-  const style = useMemo(
+  const styles = useMemo(
+    () => getStyles(wrapperWidth, wrapperHeight),
+    [wrapperWidth, wrapperHeight]
+  );
+
+  const lensComponentStyle = useMemo(
     () => ({
       height: wrapperHeight ?? '100%',
       minWidth: '100px',
@@ -79,6 +84,7 @@ const LensEmbeddableComponent: React.FC<LensEmbeddableComponentProps> = ({
     }),
     [wrapperHeight, wrapperWidth]
   );
+
   const {
     lens,
     data: {
@@ -240,7 +246,7 @@ const LensEmbeddableComponent: React.FC<LensEmbeddableComponentProps> = ({
   return (
     <>
       {attributes && searchSessionId && (
-        <LensComponentWrapper $height={wrapperHeight} width={wrapperWidth}>
+        <div css={styles.lensComponentWrapper}>
           <LensComponent
             attributes={attributes}
             disabledActions={DISABLED_ACTIONS}
@@ -252,14 +258,14 @@ const LensEmbeddableComponent: React.FC<LensEmbeddableComponentProps> = ({
             overrides={overrides}
             searchSessionId={searchSessionId}
             showInspector={false}
-            style={style}
+            style={lensComponentStyle}
             syncCursor={false}
             syncTooltips={false}
             timeRange={timerange}
             viewMode={ViewMode.VIEW}
             withDefaultActions={false}
           />
-        </LensComponentWrapper>
+        </div>
       )}
       {isShowingModal && request != null && response != null && (
         <ModalInspectQuery
diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/visualization_embeddable.tsx b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/visualization_embeddable.tsx
index d197501e24d70..94f22b527dcbf 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/visualization_embeddable.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/visualization_embeddable.tsx
@@ -7,7 +7,8 @@
 
 import React, { useCallback, useEffect, useRef, useMemo } from 'react';
 import { useDispatch } from 'react-redux';
-import { css } from 'styled-components';
+import { css } from '@emotion/react';
+
 import { ChartLabel } from '../../../overview/components/detection_response/alerts_by_status/chart_label';
 import { useDeepEqualSelector } from '../../hooks/use_selector';
 import { inputsActions, inputsSelectors } from '../../store/inputs';
diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/jest.config.js b/x-pack/solutions/security/plugins/security_solution/public/common/jest.config.js
index de509516f5538..1d2995ebe76ab 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/common/jest.config.js
+++ b/x-pack/solutions/security/plugins/security_solution/public/common/jest.config.js
@@ -5,6 +5,9 @@
  * 2.0.
  */
 
+// eslint-disable-next-line import/no-extraneous-dependencies
+const rootConfig = require('@kbn/test/jest-preset');
+
 module.exports = {
   preset: '@kbn/test',
   rootDir: '../../../../../../..',
@@ -16,4 +19,9 @@ module.exports = {
     '<rootDir>/x-pack/solutions/security/plugins/security_solution/public/common/**/*.{ts,tsx}',
   ],
   moduleNameMapper: require('../../server/__mocks__/module_name_map'),
+  transform: {
+    ...rootConfig.transform,
+    '^.+\\.(js|tsx?)$':
+      '<rootDir>/x-pack/solutions/security/plugins/security_solution/jest/babel-transformer.js',
+  },
 };
diff --git a/x-pack/solutions/security/plugins/security_solution/public/explore/components/authentication/__snapshots__/authentications_host_table.test.tsx.snap b/x-pack/solutions/security/plugins/security_solution/public/explore/components/authentication/__snapshots__/authentications_host_table.test.tsx.snap
index 45a1e70d9ba81..fe13a71198890 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/explore/components/authentication/__snapshots__/authentications_host_table.test.tsx.snap
+++ b/x-pack/solutions/security/plugins/security_solution/public/explore/components/authentication/__snapshots__/authentications_host_table.test.tsx.snap
@@ -1,53 +1,36 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Authentication Host Table Component rendering it renders the host authentication table 1`] = `
-.c2 .siemSubtitle__item {
+.c1 .siemSubtitle__item {
   color: #7a7f89;
   font-size: 12px;
   line-height: 1.5;
 }
 
-.c1 {
-  margin-bottom: 0;
-  -webkit-user-select: text;
-  -moz-user-select: text;
-  -ms-user-select: text;
-  user-select: text;
-}
-
-.c1.toggle-expand {
-  margin-bottom: 24px;
-}
-
-.c1 .no-margin {
-  margin-top: 0 !important;
-  margin-bottom: 0 !important;
-}
-
 .c0 {
   position: relative;
 }
 
-.c3 tbody th,
-.c3 tbody td {
+.c2 tbody th,
+.c2 tbody td {
   vertical-align: top;
 }
 
-.c3 tbody .euiTableCellContent {
+.c2 tbody .euiTableCellContent {
   display: block;
 }
 
-.c4 {
+.c3 {
   margin-top: 4px;
 }
 
 @media only screen and (min-width:575px) {
-  .c2 .siemSubtitle__item {
+  .c1 .siemSubtitle__item {
     display: inline-block;
     margin-right: 16px;
   }
 
-  .c2 .siemSubtitle__item:last-child {
+  .c1 .siemSubtitle__item:last-child {
     margin-right: 0;
   }
 }
@@ -57,7 +40,8 @@ exports[`Authentication Host Table Component rendering it renders the host authe
   data-test-subj="authentications-host-table-loading-false"
 >
   <header
-    class="c1 toggle-expand siemHeaderSection"
+    class="toggle-expand siemHeaderSection"
+    css="You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop)."
     data-test-subj="header-section"
   >
     <div
@@ -144,7 +128,7 @@ exports[`Authentication Host Table Component rendering it renders the host authe
         class="euiFlexItem emotion-euiFlexItem-grow-1"
       >
         <div
-          class="c2 siemSubtitle"
+          class="c1 siemSubtitle"
         >
           <p
             class="siemSubtitle__item siemSubtitle__item--text"
@@ -157,7 +141,7 @@ exports[`Authentication Host Table Component rendering it renders the host authe
     </div>
   </header>
   <div
-    class="euiBasicTable c3"
+    class="euiBasicTable c2"
     data-test-subj="paginated-basic-table"
   >
     <table
@@ -352,7 +336,7 @@ exports[`Authentication Host Table Component rendering it renders the host authe
     </table>
   </div>
   <div
-    class="euiFlexGroup c4 emotion-euiFlexGroup-l-spaceBetween-center-row"
+    class="euiFlexGroup c3 emotion-euiFlexGroup-l-spaceBetween-center-row"
   >
     <div
       class="euiFlexItem emotion-euiFlexItem-growZero"
diff --git a/x-pack/solutions/security/plugins/security_solution/public/explore/components/authentication/__snapshots__/authentications_user_table.test.tsx.snap b/x-pack/solutions/security/plugins/security_solution/public/explore/components/authentication/__snapshots__/authentications_user_table.test.tsx.snap
index 89e1867f64f69..4a033bee3b070 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/explore/components/authentication/__snapshots__/authentications_user_table.test.tsx.snap
+++ b/x-pack/solutions/security/plugins/security_solution/public/explore/components/authentication/__snapshots__/authentications_user_table.test.tsx.snap
@@ -1,53 +1,36 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Authentication User Table Component rendering it renders the user authentication table 1`] = `
-.c2 .siemSubtitle__item {
+.c1 .siemSubtitle__item {
   color: #7a7f89;
   font-size: 12px;
   line-height: 1.5;
 }
 
-.c1 {
-  margin-bottom: 0;
-  -webkit-user-select: text;
-  -moz-user-select: text;
-  -ms-user-select: text;
-  user-select: text;
-}
-
-.c1.toggle-expand {
-  margin-bottom: 24px;
-}
-
-.c1 .no-margin {
-  margin-top: 0 !important;
-  margin-bottom: 0 !important;
-}
-
 .c0 {
   position: relative;
 }
 
-.c3 tbody th,
-.c3 tbody td {
+.c2 tbody th,
+.c2 tbody td {
   vertical-align: top;
 }
 
-.c3 tbody .euiTableCellContent {
+.c2 tbody .euiTableCellContent {
   display: block;
 }
 
-.c4 {
+.c3 {
   margin-top: 4px;
 }
 
 @media only screen and (min-width:575px) {
-  .c2 .siemSubtitle__item {
+  .c1 .siemSubtitle__item {
     display: inline-block;
     margin-right: 16px;
   }
 
-  .c2 .siemSubtitle__item:last-child {
+  .c1 .siemSubtitle__item:last-child {
     margin-right: 0;
   }
 }
@@ -57,7 +40,8 @@ exports[`Authentication User Table Component rendering it renders the user authe
   data-test-subj="table-users-authentications-loading-false"
 >
   <header
-    class="c1 toggle-expand siemHeaderSection"
+    class="toggle-expand siemHeaderSection"
+    css="You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop)."
     data-test-subj="header-section"
   >
     <div
@@ -144,7 +128,7 @@ exports[`Authentication User Table Component rendering it renders the user authe
         class="euiFlexItem emotion-euiFlexItem-grow-1"
       >
         <div
-          class="c2 siemSubtitle"
+          class="c1 siemSubtitle"
         >
           <p
             class="siemSubtitle__item siemSubtitle__item--text"
@@ -157,7 +141,7 @@ exports[`Authentication User Table Component rendering it renders the user authe
     </div>
   </header>
   <div
-    class="euiBasicTable c3"
+    class="euiBasicTable c2"
     data-test-subj="paginated-basic-table"
   >
     <table
@@ -352,7 +336,7 @@ exports[`Authentication User Table Component rendering it renders the user authe
     </table>
   </div>
   <div
-    class="euiFlexGroup c4 emotion-euiFlexGroup-l-spaceBetween-center-row"
+    class="euiFlexGroup c3 emotion-euiFlexGroup-l-spaceBetween-center-row"
   >
     <div
       class="euiFlexItem emotion-euiFlexItem-growZero"
diff --git a/x-pack/solutions/security/plugins/security_solution/public/timelines/components/netflow/__snapshots__/index.test.tsx.snap b/x-pack/solutions/security/plugins/security_solution/public/timelines/components/netflow/__snapshots__/index.test.tsx.snap
index f364f82fa88bf..4ec820c968476 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/timelines/components/netflow/__snapshots__/index.test.tsx.snap
+++ b/x-pack/solutions/security/plugins/security_solution/public/timelines/components/netflow/__snapshots__/index.test.tsx.snap
@@ -10,16 +10,11 @@ exports[`Netflow renders correctly against snapshot 1`] = `
   display: inline-block;
 }
 
-.c3 svg {
-  position: relative;
-  top: -1px;
-}
-
-.c5 {
+.c4 {
   margin-right: 5px;
 }
 
-.c4 {
+.c3 {
   margin-right: 5px;
 }
 
@@ -519,7 +514,7 @@ exports[`Netflow renders correctly against snapshot 1`] = `
                                         class="euiFlexItem emotion-euiFlexItem-growZero"
                                       >
                                         <div
-                                          class="c3"
+                                          class="css-ggf2mo"
                                         >
                                           <a
                                             class="euiLink emotion-euiLink-primary"
@@ -985,7 +980,7 @@ exports[`Netflow renders correctly against snapshot 1`] = `
                                         class="euiFlexItem emotion-euiFlexItem-growZero"
                                       >
                                         <div
-                                          class="c3"
+                                          class="css-ggf2mo"
                                         >
                                           <a
                                             class="euiLink emotion-euiLink-primary"
@@ -1215,7 +1210,7 @@ exports[`Netflow renders correctly against snapshot 1`] = `
                       class="euiBadge__text emotion-euiBadge__text"
                     >
                       <span
-                        class="c4"
+                        class="c3"
                       >
                         ja3
                       </span>
@@ -1275,7 +1270,7 @@ exports[`Netflow renders correctly against snapshot 1`] = `
                       class="euiBadge__text emotion-euiBadge__text"
                     >
                       <span
-                        class="c5"
+                        class="c4"
                       >
                         client cert
                       </span>
@@ -1335,7 +1330,7 @@ exports[`Netflow renders correctly against snapshot 1`] = `
                       class="euiBadge__text emotion-euiBadge__text"
                     >
                       <span
-                        class="c5"
+                        class="c4"
                       >
                         server cert
                       </span>
diff --git a/x-pack/solutions/security/plugins/security_solution/public/timelines/components/timeline/body/renderers/netflow/__snapshots__/netflow_row_renderer.test.tsx.snap b/x-pack/solutions/security/plugins/security_solution/public/timelines/components/timeline/body/renderers/netflow/__snapshots__/netflow_row_renderer.test.tsx.snap
index 9f3f775516d91..9130545c7dfb1 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/timelines/components/timeline/body/renderers/netflow/__snapshots__/netflow_row_renderer.test.tsx.snap
+++ b/x-pack/solutions/security/plugins/security_solution/public/timelines/components/timeline/body/renderers/netflow/__snapshots__/netflow_row_renderer.test.tsx.snap
@@ -24,16 +24,11 @@ exports[`netflowRowRenderer renders correctly against snapshot 1`] = `
   display: inline-block;
 }
 
-.c5 svg {
-  position: relative;
-  top: -1px;
-}
-
-.c7 {
+.c6 {
   margin-right: 5px;
 }
 
-.c6 {
+.c5 {
   margin-right: 5px;
 }
 
@@ -543,7 +538,7 @@ exports[`netflowRowRenderer renders correctly against snapshot 1`] = `
                                             class="euiFlexItem emotion-euiFlexItem-growZero"
                                           >
                                             <div
-                                              class="c5"
+                                              class="css-ggf2mo"
                                             >
                                               <a
                                                 class="euiLink emotion-euiLink-primary"
@@ -1009,7 +1004,7 @@ exports[`netflowRowRenderer renders correctly against snapshot 1`] = `
                                             class="euiFlexItem emotion-euiFlexItem-growZero"
                                           >
                                             <div
-                                              class="c5"
+                                              class="css-ggf2mo"
                                             >
                                               <a
                                                 class="euiLink emotion-euiLink-primary"
@@ -1239,7 +1234,7 @@ exports[`netflowRowRenderer renders correctly against snapshot 1`] = `
                           class="euiBadge__text emotion-euiBadge__text"
                         >
                           <span
-                            class="c6"
+                            class="c5"
                           >
                             ja3
                           </span>
@@ -1299,7 +1294,7 @@ exports[`netflowRowRenderer renders correctly against snapshot 1`] = `
                           class="euiBadge__text emotion-euiBadge__text"
                         >
                           <span
-                            class="c7"
+                            class="c6"
                           >
                             client cert
                           </span>
@@ -1359,7 +1354,7 @@ exports[`netflowRowRenderer renders correctly against snapshot 1`] = `
                           class="euiBadge__text emotion-euiBadge__text"
                         >
                           <span
-                            class="c7"
+                            class="c6"
                           >
                             server cert
                           </span>