diff --git a/packages/kbn-babel-preset/styled_components_files.js b/packages/kbn-babel-preset/styled_components_files.js
index b72eba6793f3f..38d5335a4abb7 100644
--- a/packages/kbn-babel-preset/styled_components_files.js
+++ b/packages/kbn-babel-preset/styled_components_files.js
@@ -25,7 +25,6 @@ module.exports = {
     /x-pack[\/\\]solutions[\/\\]observability[\/\\]plugins[\/\\]synthetics[\/\\]/,
     /x-pack[\/\\]solutions[\/\\]observability[\/\\]plugins[\/\\]uptime[\/\\]/,
     /x-pack[\/\\]solutions[\/\\]observability[\/\\]plugins[\/\\]ux[\/\\]/,
-    /x-pack[\/\\]solutions[\/\\]security[\/\\]packages[\/\\]ecs_data_quality_dashboard[\/\\]/,
     /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]lists[\/\\]/,
     /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]/,
     /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]timelines[\/\\]/,
diff --git a/packages/kbn-test/src/jest/transforms/babel.js b/packages/kbn-test/src/jest/transforms/babel.js
index 9e9a064ce6ca9..d9c54ca16751a 100644
--- a/packages/kbn-test/src/jest/transforms/babel.js
+++ b/packages/kbn-test/src/jest/transforms/babel.js
@@ -21,5 +21,11 @@ module.exports = babelJest.default.createTransformer({
         },
       },
     ],
+    [
+      require.resolve('@emotion/babel-preset-css-prop'),
+      {
+        labelFormat: '[filename]--[local]',
+      },
+    ],
   ],
 });
diff --git a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/actions/add_to_new_case/index.tsx b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/actions/add_to_new_case/index.tsx
index 93d5b7ba7e20b..7c0688f4736cc 100644
--- a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/actions/add_to_new_case/index.tsx
+++ b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/actions/add_to_new_case/index.tsx
@@ -10,7 +10,7 @@ import { EuiIcon, EuiLink } from '@elastic/eui';
 
 import { useDataQualityContext } from '../../data_quality_context';
 import { useAddToNewCase } from './hooks/use_add_to_new_case';
-import { StyledLinkText } from '../styles';
+import { linkTextCss } from '../styles';
 import { ADD_TO_NEW_CASE } from '../../translations';
 
 interface Props {
@@ -42,10 +42,10 @@ const AddToNewCaseActionComponent: React.FC<Props> = ({ markdownComment }) => {
       disabled={addToNewCaseDisabled || disableAll}
       onClick={addToNewCaseContextMenuOnClick}
     >
-      <StyledLinkText>
+      <span css={linkTextCss}>
         <EuiIcon type="listAdd" />
         {ADD_TO_NEW_CASE}
-      </StyledLinkText>
+      </span>
     </EuiLink>
   );
 };
diff --git a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/actions/chat/index.tsx b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/actions/chat/index.tsx
index 51c4b26f6255c..02953da399d03 100644
--- a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/actions/chat/index.tsx
+++ b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/actions/chat/index.tsx
@@ -7,7 +7,8 @@
 
 import React, { FC, useCallback } from 'react';
 import { NewChat } from '@kbn/elastic-assistant';
-import styled from 'styled-components';
+import { css } from '@emotion/react';
+import { useEuiTheme } from '@elastic/eui';
 
 import { AssistantIcon } from '@kbn/ai-assistant-icon';
 import {
@@ -19,10 +20,16 @@ import {
 import { useDataQualityContext } from '../../data_quality_context';
 import { ASK_ASSISTANT } from './translations';
 
-const StyledLinkText = styled.span`
-  display: flex;
-  gap: ${({ theme }) => theme.eui.euiSizeXS};
-`;
+const useStyles = () => {
+  const { euiTheme } = useEuiTheme();
+
+  return {
+    linkText: css({
+      display: 'flex',
+      gap: euiTheme.size.xs,
+    }),
+  };
+};
 
 interface Props {
   markdownComment: string;
@@ -30,8 +37,10 @@ interface Props {
 }
 
 const ChatActionComponent: FC<Props> = ({ indexName, markdownComment }) => {
+  const styles = useStyles();
   const { isAssistantEnabled } = useDataQualityContext();
   const getPromptContext = useCallback(async () => markdownComment, [markdownComment]);
+
   return (
     <NewChat
       asLink={true}
@@ -44,10 +53,10 @@ const ChatActionComponent: FC<Props> = ({ indexName, markdownComment }) => {
       isAssistantEnabled={isAssistantEnabled}
       iconType={null}
     >
-      <StyledLinkText>
+      <span css={styles.linkText}>
         <AssistantIcon />
         {ASK_ASSISTANT}
-      </StyledLinkText>
+      </span>
     </NewChat>
   );
 };
diff --git a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/actions/copy_to_clipboard/index.tsx b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/actions/copy_to_clipboard/index.tsx
index 23df7dd8ad88e..ea332ddd5950d 100644
--- a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/actions/copy_to_clipboard/index.tsx
+++ b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/actions/copy_to_clipboard/index.tsx
@@ -10,7 +10,7 @@ import { EuiIcon, EuiLink, copyToClipboard } from '@elastic/eui';
 
 import { useDataQualityContext } from '../../data_quality_context';
 import { COPIED_RESULTS_TOAST_TITLE, COPY_TO_CLIPBOARD } from '../../translations';
-import { StyledLinkText } from '../styles';
+import { linkTextCss } from '../styles';
 
 interface Props {
   markdownComment: string;
@@ -33,10 +33,10 @@ const CopyToClipboardActionComponent: React.FC<Props> = ({ markdownComment }) =>
       disabled={ilmPhases.length === 0}
       onClick={onCopy}
     >
-      <StyledLinkText>
+      <span css={linkTextCss}>
         <EuiIcon type="copyClipboard" />
         {COPY_TO_CLIPBOARD}
-      </StyledLinkText>
+      </span>
     </EuiLink>
   );
 };
diff --git a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/actions/styles.tsx b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/actions/styles.tsx
index 4319efa6b1304..3458166a8cd75 100644
--- a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/actions/styles.tsx
+++ b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/actions/styles.tsx
@@ -5,9 +5,10 @@
  * 2.0.
  */
 
-import styled from 'styled-components';
+import { UseEuiTheme } from '@elastic/eui';
+import { CSSObject } from '@emotion/react';
 
-export const StyledLinkText = styled.span`
-  display: flex;
-  gap: ${({ theme }) => theme.eui.euiSizeS};
-`;
+export const linkTextCss = ({ euiTheme }: UseEuiTheme): CSSObject => ({
+  display: 'flex',
+  gap: euiTheme.size.s,
+});
diff --git a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/ilm_phases_empty_prompt/index.tsx b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/ilm_phases_empty_prompt/index.tsx
index fe5c4cf59e8a8..bb57e2811192b 100644
--- a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/ilm_phases_empty_prompt/index.tsx
+++ b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/ilm_phases_empty_prompt/index.tsx
@@ -5,9 +5,9 @@
  * 2.0.
  */
 
-import { EuiEmptyPrompt, EuiSpacer, EuiText, EuiTitle } from '@elastic/eui';
+import { EuiEmptyPrompt, EuiSpacer, EuiText, EuiTitle, useEuiTheme } from '@elastic/eui';
 import React, { useMemo } from 'react';
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 
 import {
   COLD_DESCRIPTION,
@@ -23,16 +23,21 @@ import {
 } from '../../translations';
 import * as i18n from './translations';
 
-const Ul = styled.ul`
-  text-align: left;
-`;
-
-const Li = styled.ul`
-  margin-bottom: ${({ theme }) => theme.eui.euiSizeS};
-  text-align: left;
-`;
+const useStyles = () => {
+  const { euiTheme } = useEuiTheme();
+  return {
+    ul: css({
+      textAlign: 'left',
+    }),
+    li: css({
+      marginBottom: euiTheme.size.s,
+      textAlign: 'left',
+    }),
+  };
+};
 
 const IlmPhasesEmptyPromptComponent: React.FC = () => {
+  const styles = useStyles();
   const title = useMemo(() => <h2>{i18n.TITLE}</h2>, []);
   const body = useMemo(() => <p>{i18n.BODY}</p>, []);
   const footer = useMemo(
@@ -44,23 +49,23 @@ const IlmPhasesEmptyPromptComponent: React.FC = () => {
 
         <EuiSpacer size="s" />
 
-        <Ul>
-          <Li>
+        <ul css={styles.ul}>
+          <li css={styles.li}>
             <strong>{HOT}</strong>
             {': '}
             {HOT_DESCRIPTION}
-          </Li>
-          <Li>
+          </li>
+          <li css={styles.li}>
             <strong>{WARM}</strong>
             {': '}
             {WARM_DESCRIPTION}
-          </Li>
-          <Li>
+          </li>
+          <li css={styles.li}>
             <strong>{UNMANAGED}</strong>
             {': '}
             {UNMANAGED_DESCRIPTION}
-          </Li>
-        </Ul>
+          </li>
+        </ul>
 
         <EuiSpacer size="m" />
 
@@ -74,21 +79,21 @@ const IlmPhasesEmptyPromptComponent: React.FC = () => {
 
         <EuiSpacer size="s" />
 
-        <Ul>
-          <Li>
+        <ul css={styles.ul}>
+          <li css={styles.li}>
             <strong>{COLD}</strong>
             {': '}
             {COLD_DESCRIPTION}
-          </Li>
-          <Li>
+          </li>
+          <li css={styles.li}>
             <strong>{FROZEN}</strong>
             {': '}
             {FROZEN_DESCRIPTION}
-          </Li>
-        </Ul>
+          </li>
+        </ul>
       </div>
     ),
-    []
+    [styles.li, styles.ul]
   );
 
   return <EuiEmptyPrompt body={body} footer={footer} title={title} />;
diff --git a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/index.tsx b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/index.tsx
index b3b708291a983..5a6f8dffea3c2 100644
--- a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/index.tsx
+++ b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/index.tsx
@@ -5,9 +5,9 @@
  * 2.0.
  */
 
-import { EuiFlexItem } from '@elastic/eui';
+import { EuiFlexItem, useEuiTheme } from '@elastic/eui';
 import React, { useState, useCallback, useEffect } from 'react';
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 
 import { useResultsRollupContext } from '../../contexts/results_rollup_context';
 import { Pattern } from './pattern';
@@ -15,13 +15,18 @@ import { SelectedIndex } from '../../types';
 import { useDataQualityContext } from '../../data_quality_context';
 import { useIsHistoricalResultsTourActive } from './hooks/use_is_historical_results_tour_active';
 
-const StyledPatternWrapperFlexItem = styled(EuiFlexItem)`
-  margin-bottom: ${({ theme }) => theme.eui.euiSize};
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-`;
+const useStyles = () => {
+  const { euiTheme } = useEuiTheme();
+
+  return {
+    patternWrapperFlexItem: css({
+      marginBottom: euiTheme.size.base,
+      ':last-child': {
+        marginBottom: 0,
+      },
+    }),
+  };
+};
 
 export interface Props {
   chartSelectedIndex: SelectedIndex | null;
@@ -32,6 +37,7 @@ const IndicesDetailsComponent: React.FC<Props> = ({
   chartSelectedIndex,
   setChartSelectedIndex,
 }) => {
+  const styles = useStyles();
   const { patternRollups, patternIndexNames } = useResultsRollupContext();
   const { patterns } = useDataQualityContext();
 
@@ -73,7 +79,7 @@ const IndicesDetailsComponent: React.FC<Props> = ({
   return (
     <div data-test-subj="indicesDetails">
       {patterns.map((pattern) => (
-        <StyledPatternWrapperFlexItem grow={false} key={pattern}>
+        <EuiFlexItem css={styles.patternWrapperFlexItem} grow={false} key={pattern}>
           <Pattern
             indexNames={patternIndexNames[pattern]}
             pattern={pattern}
@@ -91,7 +97,7 @@ const IndicesDetailsComponent: React.FC<Props> = ({
             // when surrounding accordions get toggled and affect the layout
             {...(pattern === firstOpenNonEmptyPattern && { openPatternsUpdatedAt })}
           />
-        </StyledPatternWrapperFlexItem>
+        </EuiFlexItem>
       ))}
     </div>
   );
diff --git a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/historical_results_tour/index.tsx b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/historical_results_tour/index.tsx
index c35dce5da868e..6b78be1d0d0e1 100644
--- a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/historical_results_tour/index.tsx
+++ b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/historical_results_tour/index.tsx
@@ -7,7 +7,7 @@
 
 import React, { FC, useEffect, useState } from 'react';
 import { EuiButton, EuiButtonEmpty, EuiText, EuiTourStep } from '@elastic/eui';
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 
 import { HISTORICAL_RESULTS_TOUR_SELECTOR_KEY } from '../constants';
 import { CLOSE, INTRODUCING_DATA_QUALITY_HISTORY, TRY_IT, VIEW_PAST_RESULTS } from './translations';
@@ -20,9 +20,11 @@ export interface Props {
   zIndex?: number;
 }
 
-const StyledText = styled(EuiText)`
-  margin-block-start: -10px;
-`;
+const styles = {
+  text: css({
+    marginBlockStart: '-10px',
+  }),
+};
 
 export const HistoricalResultsTour: FC<Props> = ({
   anchorSelectorValue,
@@ -52,9 +54,9 @@ export const HistoricalResultsTour: FC<Props> = ({
   return (
     <EuiTourStep
       content={
-        <StyledText size="s">
+        <EuiText css={styles.text} size="s">
           <p>{VIEW_PAST_RESULTS}</p>
-        </StyledText>
+        </EuiText>
       }
       data-test-subj="historicalResultsTour"
       isStepOpen={isOpen}
diff --git a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index.tsx b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index.tsx
index fd0100bc1192e..e19e9a77a6369 100644
--- a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index.tsx
+++ b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { EuiSpacer, useGeneratedHtmlId } from '@elastic/eui';
+import { EuiAccordion, EuiSpacer, useGeneratedHtmlId } from '@elastic/eui';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { ErrorEmptyPrompt } from './error_empty_prompt';
@@ -21,7 +21,7 @@ import type { PatternRollup, SelectedIndex, SortConfig } from '../../../types';
 import { useIlmExplain } from './hooks/use_ilm_explain';
 import { useStats } from './hooks/use_stats';
 import { useDataQualityContext } from '../../../data_quality_context';
-import { PatternAccordion, PatternAccordionChildren } from './styles';
+import { patternAccordionChildrenCss, patternAccordionCss } from './styles';
 import { IndexCheckFlyout } from './index_check_flyout';
 import { useResultsRollupContext } from '../../../contexts/results_rollup_context';
 import { useIndicesCheckContext } from '../../../contexts/indices_check_context';
@@ -318,7 +318,8 @@ const PatternComponent: React.FC<Props> = ({
   return (
     <div data-test-subj={`${pattern}PatternPanel`}>
       <HistoricalResultsContext.Provider value={historicalResultsContextValue}>
-        <PatternAccordion
+        <EuiAccordion
+          css={patternAccordionCss}
           id={patternComponentAccordionId}
           forceState={isAccordionOpen ? 'open' : 'closed'}
           onToggle={handleAccordionToggle}
@@ -337,7 +338,7 @@ const PatternComponent: React.FC<Props> = ({
             />
           }
         >
-          <PatternAccordionChildren>
+          <div css={patternAccordionChildrenCss}>
             {!loading && pattern.includes(':') && (
               <>
                 <RemoteClustersCallout />
@@ -404,8 +405,8 @@ const PatternComponent: React.FC<Props> = ({
                 />
               </div>
             )}
-          </PatternAccordionChildren>
-        </PatternAccordion>
+          </div>
+        </EuiAccordion>
         {isFlyoutVisible ? (
           <IndexCheckFlyout
             pattern={pattern}
diff --git a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/check_fields_tabs/index.tsx b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/check_fields_tabs/index.tsx
index b492d98aa7b7a..45eb101f328c9 100644
--- a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/check_fields_tabs/index.tsx
+++ b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/check_fields_tabs/index.tsx
@@ -14,24 +14,26 @@ import {
   EuiSpacer,
   EuiToolTip,
 } from '@elastic/eui';
-import styled, { StyledComponent } from 'styled-components';
+import { css } from '@emotion/react';
 
 import { CheckFieldsTab, CheckFieldsTabId } from './types';
 
-const StyledTabFlexGroup = styled(EuiFlexGroup)`
-  width: 100%;
-`;
-
-const StyledTabFlexItem = styled.div`
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-`;
-
-const StyledBadge = styled(EuiBadge)`
-  text-align: right;
-  cursor: pointer;
-`;
+const styles = {
+  tabFlexGroup: css({
+    width: '100%',
+  }),
+
+  tabFlexItem: css({
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+  }),
+
+  badge: css({
+    textAlign: 'right',
+    cursor: 'pointer',
+  }),
+};
 
 interface CheckFieldsSingleButtonGroupProps {
   onChange: (id: string) => void;
@@ -46,10 +48,7 @@ export interface Props {
   tabs: CheckFieldsTab[];
   renderButtonGroup: (
     props: CheckFieldsSingleButtonGroupProps
-  ) => React.ReactElement<
-    EuiButtonGroupProps,
-    StyledComponent<typeof EuiButtonGroup, {}, {}, never> | typeof EuiButtonGroup
-  >;
+  ) => React.ReactElement<EuiButtonGroupProps, typeof EuiButtonGroup>;
 }
 
 const CheckFieldsTabsComponent: React.FC<Props> = ({ tabs, renderButtonGroup }) => {
@@ -58,7 +57,11 @@ const CheckFieldsTabsComponent: React.FC<Props> = ({ tabs, renderButtonGroup })
       tabs.map((tab) => ({
         id: tab.id,
         name: tab.name,
-        append: <StyledBadge color={tab.badgeColor ?? 'hollow'}>{tab.badgeCount ?? 0}</StyledBadge>,
+        append: (
+          <EuiBadge css={styles.badge} color={tab.badgeColor ?? 'hollow'}>
+            {tab.badgeCount ?? 0}
+          </EuiBadge>
+        ),
         content: tab.content ?? null,
         disabled: Boolean(tab.disabled),
         ...(tab.disabled && { disabledReason: tab.disabledReason }),
@@ -72,16 +75,17 @@ const CheckFieldsTabsComponent: React.FC<Props> = ({ tabs, renderButtonGroup })
     () =>
       checkFieldsTabs.map((tab) => {
         let label = (
-          <StyledTabFlexGroup
+          <EuiFlexGroup
+            css={styles.tabFlexGroup}
             responsive={false}
             justifyContent="center"
             gutterSize="s"
             alignItems="center"
             title={tab.name}
           >
-            <StyledTabFlexItem>{tab.name}</StyledTabFlexItem>
+            <div css={styles.tabFlexItem}>{tab.name}</div>
             {tab.append}
-          </StyledTabFlexGroup>
+          </EuiFlexGroup>
         );
 
         if (tab.disabled && tab.disabledReason) {
diff --git a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/ecs_allowed_values/index.tsx b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/ecs_allowed_values/index.tsx
index 69c46bba6a211..648ef03e1ff52 100644
--- a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/ecs_allowed_values/index.tsx
+++ b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/ecs_allowed_values/index.tsx
@@ -9,7 +9,7 @@ import { EuiCode, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import React from 'react';
 
 import { EMPTY_PLACEHOLDER } from '../../../../../constants';
-import { CodeSuccess } from '../../../../../styles';
+import { codeSuccessCss } from '../../../../../styles';
 import type { AllowedValue } from '../../../../../types';
 
 interface Props {
@@ -23,7 +23,7 @@ const EcsAllowedValuesComponent: React.FC<Props> = ({ allowedValues }) =>
     <EuiFlexGroup data-test-subj="ecsAllowedValues" direction="row" wrap={true} gutterSize="xs">
       {allowedValues.map((x, i) => (
         <EuiFlexItem grow={false} key={`${x.name}_${i}`}>
-          <CodeSuccess>{x.name}</CodeSuccess>
+          <EuiCode css={codeSuccessCss}>{x.name}</EuiCode>
         </EuiFlexItem>
       ))}
     </EuiFlexGroup>
diff --git a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/historical_results/historical_results_list/historical_result/historical_check_fields/index.tsx b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/historical_results/historical_results_list/historical_result/historical_check_fields/index.tsx
index a8f206dec39a6..d799418d54666 100644
--- a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/historical_results/historical_results_list/historical_result/historical_check_fields/index.tsx
+++ b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/historical_results/historical_results_list/historical_result/historical_check_fields/index.tsx
@@ -6,6 +6,7 @@
  */
 
 import React, { useMemo } from 'react';
+import { EuiButtonGroup } from '@elastic/eui';
 
 import type { NonLegacyHistoricalResult } from '../../../../../../../../types';
 import { getIncompatibleStatBadgeColor } from '../../../../../../../../utils/get_incompatible_stat_badge_color';
@@ -15,7 +16,7 @@ import { getIncompatibleAndSameFamilyFieldsFromHistoricalResult } from './utils/
 import { IncompatibleTab } from '../../../../incompatible_tab';
 import { SameFamilyTab } from '../../../../same_family_tab';
 import { CheckFieldsTabs } from '../../../../check_fields_tabs';
-import { StyledHistoricalResultsCheckFieldsButtonGroup } from '../styles';
+import { historicalResultsCheckFieldsButtonGroupCss } from '../styles';
 
 export interface Props {
   indexName: string;
@@ -101,7 +102,9 @@ const HistoricalCheckFieldsComponent: React.FC<Props> = ({ indexName, historical
     <div data-test-subj="historicalCheckFields">
       <CheckFieldsTabs
         tabs={tabs}
-        renderButtonGroup={(props) => <StyledHistoricalResultsCheckFieldsButtonGroup {...props} />}
+        renderButtonGroup={(props) => (
+          <EuiButtonGroup css={historicalResultsCheckFieldsButtonGroupCss} {...props} />
+        )}
       />
     </div>
   );
diff --git a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/historical_results/historical_results_list/historical_result/legacy_historical_check_fields/index.test.tsx b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/historical_results/historical_results_list/historical_result/legacy_historical_check_fields/index.test.tsx
index d232db88e5a64..7de7bbb78c0ed 100644
--- a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/historical_results/historical_results_list/historical_result/legacy_historical_check_fields/index.test.tsx
+++ b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/historical_results/historical_results_list/historical_result/legacy_historical_check_fields/index.test.tsx
@@ -113,7 +113,7 @@ describe('LegacyHistoricalCheckFields', () => {
             <TestExternalProviders>
               <EuiMarkdownFormat>{tablesMarkdown}</EuiMarkdownFormat>
             </TestExternalProviders>
-          ).container.innerHTML
+          ).container.children[0].innerHTML
         );
 
         expect(screen.getByTestId('incompatibleTablesMarkdown')).toBeInTheDocument();
diff --git a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/historical_results/historical_results_list/historical_result/legacy_historical_check_fields/index.tsx b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/historical_results/historical_results_list/historical_result/legacy_historical_check_fields/index.tsx
index 177ba83110852..c4fd94ed4702b 100644
--- a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/historical_results/historical_results_list/historical_result/legacy_historical_check_fields/index.tsx
+++ b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/historical_results/historical_results_list/historical_result/legacy_historical_check_fields/index.tsx
@@ -6,7 +6,7 @@
  */
 
 import React, { FC, memo, useMemo } from 'react';
-import { EuiMarkdownFormat, EuiSpacer } from '@elastic/eui';
+import { EuiButtonGroup, EuiMarkdownFormat, EuiSpacer } from '@elastic/eui';
 
 import { INCOMPATIBLE_FIELDS, SAME_FAMILY } from '../../../../../../../../translations';
 import { Actions } from '../../../../../../../../actions';
@@ -16,7 +16,7 @@ import { CheckSuccessEmptyPrompt } from '../../../../check_success_empty_prompt'
 import { INCOMPATIBLE_TAB_ID, SAME_FAMILY_TAB_ID } from '../../../../constants';
 import { getIncompatibleStatBadgeColor } from '../../../../../../../../utils/get_incompatible_stat_badge_color';
 import { CheckFieldsTabs } from '../../../../check_fields_tabs';
-import { StyledHistoricalResultsCheckFieldsButtonGroup } from '../styles';
+import { historicalResultsCheckFieldsButtonGroupCss } from '../styles';
 import { NOT_INCLUDED_IN_HISTORICAL_RESULTS } from './translations';
 
 interface Props {
@@ -88,7 +88,9 @@ const LegacyHistoricalCheckFieldsComponent: FC<Props> = ({ indexName, historical
     <div data-test-subj="legacyHistoricalCheckFields">
       <CheckFieldsTabs
         tabs={tabs}
-        renderButtonGroup={(props) => <StyledHistoricalResultsCheckFieldsButtonGroup {...props} />}
+        renderButtonGroup={(props) => (
+          <EuiButtonGroup css={historicalResultsCheckFieldsButtonGroupCss} {...props} />
+        )}
       />
     </div>
   );
diff --git a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/historical_results/historical_results_list/historical_result/styles.tsx b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/historical_results/historical_results_list/historical_result/styles.tsx
index 8ae6a86dda62c..aa4d2245a2a6a 100644
--- a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/historical_results/historical_results_list/historical_result/styles.tsx
+++ b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/historical_results/historical_results_list/historical_result/styles.tsx
@@ -5,17 +5,16 @@
  * 2.0.
  */
 
-import styled from 'styled-components';
-import { EuiButtonGroup } from '@elastic/eui';
+import { css } from '@emotion/react';
 
 import { INCOMPATIBLE_TAB_ID, SAME_FAMILY_TAB_ID } from '../../../constants';
 
-export const StyledHistoricalResultsCheckFieldsButtonGroup = styled(EuiButtonGroup)`
-  min-width: 50%;
-  button[data-test-subj='${INCOMPATIBLE_TAB_ID}'] {
-    flex-grow: 1;
-  }
-  button[data-test-subj='${SAME_FAMILY_TAB_ID}'] {
-    flex-grow: 1;
-  }
-`;
+export const historicalResultsCheckFieldsButtonGroupCss = css({
+  minWidth: '50%',
+  [`button[data-test-subj='${INCOMPATIBLE_TAB_ID}']`]: {
+    flexGrow: 1,
+  },
+  [`button[data-test-subj='${SAME_FAMILY_TAB_ID}']`]: {
+    flexGrow: 1,
+  },
+});
diff --git a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/historical_results/historical_results_list/index.tsx b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/historical_results/historical_results_list/index.tsx
index 4032f72389d58..bcacc6aa0c686 100644
--- a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/historical_results/historical_results_list/index.tsx
+++ b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/historical_results/historical_results_list/index.tsx
@@ -7,6 +7,7 @@
 
 import React, { FC, Fragment, memo, useState } from 'react';
 import {
+  EuiAccordion,
   EuiEmptyPrompt,
   EuiFlexGroup,
   EuiFlexItem,
@@ -18,11 +19,10 @@ import {
 
 import { useDataQualityContext } from '../../../../../../data_quality_context';
 import { useHistoricalResultsContext } from '../../../contexts/historical_results_context';
-import { StyledAccordion } from './styles';
+import { accordionCss } from './styles';
 import { getFormattedCheckTime } from '../../utils/get_formatted_check_time';
 import { IndexResultBadge } from '../../../index_result_badge';
 import { HistoricalResult } from './historical_result';
-import { StyledText } from '../styles';
 import { getCheckTextColor } from '../../../utils/get_check_text_color';
 import {
   CHANGE_YOUR_SEARCH_CRITERIA_OR_RUN,
@@ -30,6 +30,7 @@ import {
   NO_RESULTS_MATCH_YOUR_SEARCH_CRITERIA,
   TOGGLE_HISTORICAL_RESULT_CHECKED_AT,
 } from './translations';
+import { textCss } from '../styles';
 
 interface Props {
   indexName: string;
@@ -51,7 +52,8 @@ export const HistoricalResultsListComponent: FC<Props> = ({ indexName }) => {
           {results.map((result) => (
             <Fragment key={result.checkedAt}>
               <EuiSpacer size="m" />
-              <StyledAccordion
+              <EuiAccordion
+                css={accordionCss}
                 id={historicalResultsAccordionId}
                 buttonProps={{
                   'aria-label': TOGGLE_HISTORICAL_RESULT_CHECKED_AT(
@@ -71,7 +73,9 @@ export const HistoricalResultsListComponent: FC<Props> = ({ indexName }) => {
                       <IndexResultBadge incompatible={result.incompatibleFieldCount} />
                     </EuiFlexItem>
                     <EuiFlexItem grow={true}>
-                      <StyledText size="s">{getFormattedCheckTime(result.checkedAt)}</StyledText>
+                      <EuiText css={textCss} size="s">
+                        {getFormattedCheckTime(result.checkedAt)}
+                      </EuiText>
                     </EuiFlexItem>
                     {!accordionState[result.checkedAt] && (
                       <EuiFlexItem grow={false}>
@@ -87,7 +91,7 @@ export const HistoricalResultsListComponent: FC<Props> = ({ indexName }) => {
                 }
               >
                 <HistoricalResult indexName={indexName} historicalResult={result} />
-              </StyledAccordion>
+              </EuiAccordion>
             </Fragment>
           ))}
         </>
diff --git a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/historical_results/historical_results_list/styles.tsx b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/historical_results/historical_results_list/styles.tsx
index 7109a1efa07bf..95d7862748744 100644
--- a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/historical_results/historical_results_list/styles.tsx
+++ b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/historical_results/historical_results_list/styles.tsx
@@ -5,19 +5,18 @@
  * 2.0.
  */
 
-import { EuiAccordion } from '@elastic/eui';
-import styled from 'styled-components';
+import { UseEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/react';
 
-export const StyledAccordion = styled(EuiAccordion)`
-  padding: 14px ${({ theme }) => theme.eui.euiSize};
-  border: 1px solid ${({ theme }) => theme.eui.euiBorderColor};
-  border-radius: ${({ theme }) => theme.eui.euiBorderRadius};
-
-  .euiAccordion__button:is(:hover, :focus) {
-    text-decoration: none;
-  }
-
-  .euiAccordion__buttonContent {
-    flex-grow: 1;
-  }
-`;
+export const accordionCss = ({ euiTheme }: UseEuiTheme) =>
+  css({
+    padding: `14px ${euiTheme.size.base}`,
+    border: `1px solid ${euiTheme.border.color}`,
+    borderRadius: euiTheme.border.radius.medium,
+    '.euiAccordion__button:is(:hover, :focus)': {
+      textDecoration: 'none',
+    },
+    '.euiAccordion__buttonContent': {
+      flexGrow: 1,
+    },
+  });
diff --git a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/historical_results/index.tsx b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/historical_results/index.tsx
index 3e12768efe39d..2fcec02786dc7 100644
--- a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/historical_results/index.tsx
+++ b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/historical_results/index.tsx
@@ -13,7 +13,9 @@ import {
   EuiSpacer,
   EuiSuperDatePicker,
   EuiTablePagination,
+  EuiText,
 } from '@elastic/eui';
+import { css } from '@emotion/react';
 import React, { FC, useMemo, useReducer } from 'react';
 import { useDataQualityContext } from '../../../../../data_quality_context';
 import { useHistoricalResultsContext } from '../../contexts/historical_results_context';
@@ -25,7 +27,6 @@ import { fetchHistoricalResultsQueryReducer } from './reducers/fetch_historical_
 import { FetchHistoricalResultsQueryState } from '../types';
 import { LoadingEmptyPrompt } from '../../loading_empty_prompt';
 import { ErrorEmptyPrompt } from '../../error_empty_prompt';
-import { StyledFilterGroupFlexItem, StyledText } from './styles';
 import {
   ALL,
   ERROR_LOADING_HISTORICAL_RESULTS,
@@ -39,9 +40,16 @@ import { useHistoricalResultsPagination } from './hooks/use_historical_results_p
 import { FAIL, PASS } from '../../translations';
 import { useHistoricalResultsOutcomeFilter } from './hooks/use_historical_results_outcome_filter';
 import { useHistoricalResultsDatePicker } from './hooks/use_historical_results_date_picker';
+import { textCss } from './styles';
 
 const historicalResultsListId = 'historicalResultsList';
 
+const styles = {
+  filterGroupFlexItem: css({
+    flexBasis: '17%',
+  }),
+};
+
 export const initialFetchHistoricalResultsQueryState: FetchHistoricalResultsQueryState = {
   startDate: DEFAULT_HISTORICAL_RESULTS_START_DATE,
   endDate: DEFAULT_HISTORICAL_RESULTS_END_DATE,
@@ -111,7 +119,7 @@ export const HistoricalResultsComponent: FC<Props> = ({ indexName }) => {
   return (
     <div data-test-subj="historicalResults">
       <EuiFlexGroup justifyContent="spaceBetween">
-        <StyledFilterGroupFlexItem grow={false}>
+        <EuiFlexItem css={styles.filterGroupFlexItem} grow={false}>
           <EuiFilterGroup
             data-test-subj="historicalResultsOutcomeFilterGroup"
             role="radiogroup"
@@ -145,7 +153,7 @@ export const HistoricalResultsComponent: FC<Props> = ({ indexName }) => {
               {FAIL}
             </EuiFilterButton>
           </EuiFilterGroup>
-        </StyledFilterGroupFlexItem>
+        </EuiFlexItem>
         <EuiFlexItem>
           <EuiSuperDatePicker
             width="full"
@@ -157,7 +165,8 @@ export const HistoricalResultsComponent: FC<Props> = ({ indexName }) => {
         </EuiFlexItem>
       </EuiFlexGroup>
       <EuiSpacer />
-      <StyledText
+      <EuiText
+        css={textCss}
         size="s"
         role="status"
         aria-live="polite"
@@ -167,7 +176,7 @@ export const HistoricalResultsComponent: FC<Props> = ({ indexName }) => {
         aria-describedby={historicalResultsListId}
       >
         {totalChecksText}
-      </StyledText>
+      </EuiText>
       <div id={historicalResultsListId}>
         <HistoricalResultsList indexName={indexName} />
       </div>
diff --git a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/historical_results/styles.tsx b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/historical_results/styles.tsx
index 5c8baef905ec2..484d135268b8a 100644
--- a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/historical_results/styles.tsx
+++ b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/historical_results/styles.tsx
@@ -5,13 +5,10 @@
  * 2.0.
  */
 
-import { EuiFlexItem, EuiText } from '@elastic/eui';
-import styled from 'styled-components';
+import { UseEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/react';
 
-export const StyledFilterGroupFlexItem = styled(EuiFlexItem)`
-  flex-basis: 17%;
-`;
-
-export const StyledText = styled(EuiText)`
-  font-weight: ${({ theme }) => theme.eui.euiFontWeightSemiBold};
-`;
+export const textCss = ({ euiTheme }: UseEuiTheme) =>
+  css({
+    fontWeight: euiTheme.font.weight.semiBold,
+  });
diff --git a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/incompatible_callout/index.tsx b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/incompatible_callout/index.tsx
index e0a647872edfc..b500de3dce435 100644
--- a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/incompatible_callout/index.tsx
+++ b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/incompatible_callout/index.tsx
@@ -17,7 +17,7 @@ import {
   MAPPINGS_THAT_CONFLICT_WITH_ECS,
   PAGES_MAY_NOT_DISPLAY_EVENTS,
 } from '../../../../../translations';
-import { CalloutItem } from '../styles';
+import { calloutItemCss } from '../styles';
 
 export interface Props {
   incompatibleFieldCount?: number;
@@ -41,15 +41,15 @@ const IncompatibleCalloutComponent: React.FC<Props> = ({
     >
       <div data-test-subj="fieldsAreIncompatible">{INCOMPATIBLE_CALLOUT(ecsVersion)}</div>
       <EuiSpacer size="xs" />
-      <CalloutItem data-test-subj="rulesMayNotMatch">
+      <div css={calloutItemCss} data-test-subj="rulesMayNotMatch">
         {DETECTION_ENGINE_RULES_MAY_NOT_MATCH}
-      </CalloutItem>
-      <CalloutItem data-test-subj="pagesMayNotDisplayEvents">
+      </div>
+      <div css={calloutItemCss} data-test-subj="pagesMayNotDisplayEvents">
         {PAGES_MAY_NOT_DISPLAY_EVENTS}
-      </CalloutItem>
-      <CalloutItem data-test-subj="mappingsThatDontComply">
+      </div>
+      <div css={calloutItemCss} data-test-subj="mappingsThatDontComply">
         {MAPPINGS_THAT_CONFLICT_WITH_ECS}
-      </CalloutItem>
+      </div>
     </EuiCallOut>
   );
 };
diff --git a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/incompatible_tab/utils/get_incompatible_table_columns.tsx b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/incompatible_tab/utils/get_incompatible_table_columns.tsx
index c39b29d0a6597..ae587734eda1b 100644
--- a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/incompatible_tab/utils/get_incompatible_table_columns.tsx
+++ b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/incompatible_tab/utils/get_incompatible_table_columns.tsx
@@ -6,9 +6,9 @@
  */
 
 import React from 'react';
-import { EuiTableFieldDataColumnType } from '@elastic/eui';
+import { EuiCode, EuiTableFieldDataColumnType } from '@elastic/eui';
 
-import { CodeDanger, CodeSuccess } from '../../../../../../styles';
+import { codeDangerCss, codeSuccessCss } from '../../../../../../styles';
 import {
   AllowedValue,
   IncompatibleFieldMetadata,
@@ -77,7 +77,11 @@ export const getIncompatibleMappingsTableColumns = (): Array<
   {
     field: 'type',
     name: ECS_MAPPING_TYPE_EXPECTED,
-    render: (type: string) => <CodeSuccess data-test-subj="codeSuccess">{type}</CodeSuccess>,
+    render: (type: string) => (
+      <EuiCode css={codeSuccessCss} data-test-subj="codeSuccess">
+        {type}
+      </EuiCode>
+    ),
     sortable: true,
     truncateText: false,
     width: '25%',
@@ -86,7 +90,9 @@ export const getIncompatibleMappingsTableColumns = (): Array<
     field: 'indexFieldType',
     name: INDEX_MAPPING_TYPE_ACTUAL,
     render: (indexFieldType: string, x) => (
-      <CodeDanger data-test-subj="codeDanger">{indexFieldType}</CodeDanger>
+      <EuiCode css={codeDangerCss} data-test-subj="codeDanger">
+        {indexFieldType}
+      </EuiCode>
     ),
     sortable: true,
     truncateText: false,
diff --git a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/index_invalid_values/index.tsx b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/index_invalid_values/index.tsx
index 812e369d4039f..1989c61a1e731 100644
--- a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/index_invalid_values/index.tsx
+++ b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/index_invalid_values/index.tsx
@@ -7,14 +7,14 @@
 
 import { EuiCode, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import React from 'react';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 import { EMPTY_PLACEHOLDER } from '../../../../../constants';
-import { CodeDanger } from '../../../../../styles';
+import { codeDangerCss } from '../../../../../styles';
 import type { UnallowedValueCount } from '../../../../../types';
 
 const IndexInvalidValueFlexItem = styled(EuiFlexItem)`
-  margin-bottom: ${({ theme }) => theme.eui.euiSizeXS};
+  margin-bottom: ${({ theme }) => theme.euiTheme.size.xs};
 `;
 
 interface Props {
@@ -29,7 +29,7 @@ const IndexInvalidValuesComponent: React.FC<Props> = ({ indexInvalidValues }) =>
       {indexInvalidValues.map(({ fieldName, count }, i) => (
         <IndexInvalidValueFlexItem grow={false} key={`${fieldName}_${i}`}>
           <div>
-            <CodeDanger>{fieldName}</CodeDanger>{' '}
+            <EuiCode css={codeDangerCss}>{fieldName}</EuiCode>{' '}
             <span>
               {'('}
               {count}
diff --git a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/index_stats_panel/index.tsx b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/index_stats_panel/index.tsx
index 7f8598839fd0c..7f67ec5a5b0b8 100644
--- a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/index_stats_panel/index.tsx
+++ b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/index_stats_panel/index.tsx
@@ -5,9 +5,16 @@
  * 2.0.
  */
 
-import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiSpacer } from '@elastic/eui';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiPanel,
+  EuiSpacer,
+  useEuiFontSize,
+  useEuiTheme,
+} from '@elastic/eui';
 import React from 'react';
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 
 import { useDataQualityContext } from '../../../../../data_quality_context';
 import {
@@ -21,31 +28,40 @@ import {
 import { Stat } from '../../../../../stat';
 import { getIlmPhaseDescription } from '../../../../../utils/get_ilm_phase_description';
 
-const StyledFlexItem = styled(EuiFlexItem)`
-  justify-content: space-between;
-  border-right: 1px solid ${({ theme }) => theme.eui.euiBorderColor};
-  font-size: ${({ theme }) => theme.eui.euiFontSizeXS};
+const useStyles = () => {
+  const { euiTheme } = useEuiTheme();
+  const { fontSize } = useEuiFontSize('xs');
 
-  margin-bottom: 2px;
+  const baseFlexItem = css`
+    justify-content: space-between;
+    border-right: 1px solid ${euiTheme.border.color};
+    font-size: ${fontSize};
 
-  &:last-child {
-    border-right: none;
-  }
+    &:last-child {
+      border-right: none;
+    }
 
-  strong {
-    text-transform: capitalize;
-  }
-`;
+    strong {
+      text-transform: capitalize;
+    }
+  `;
 
-const UnpaddedStyledFlexItem = styled(StyledFlexItem)`
-  margin-bottom: 0;
-`;
+  return {
+    flexItem: css`
+      ${baseFlexItem}
+      margin-bottom: 2px;
+    `,
+    unpaddedFlexItem: css`
+      ${baseFlexItem}
+      margin-bottom: 0;
+    `,
+  };
+};
 
 export interface Props {
   docsCount: number;
   ilmPhase?: string;
   sizeInBytes?: number;
-  sameFamilyFieldsCount?: number;
   ecsCompliantFieldsCount?: number;
   customFieldsCount?: number;
   allFieldsCount?: number;
@@ -55,22 +71,22 @@ export const IndexStatsPanelComponent: React.FC<Props> = ({
   docsCount,
   ilmPhase,
   sizeInBytes,
-  sameFamilyFieldsCount,
   customFieldsCount,
   ecsCompliantFieldsCount,
   allFieldsCount,
 }) => {
+  const styles = useStyles();
   const { formatBytes, formatNumber } = useDataQualityContext();
   return (
     <EuiPanel data-test-subj="indexStatsPanel" paddingSize="s" hasShadow={false} hasBorder={true}>
       <EuiFlexGroup gutterSize="m">
-        <StyledFlexItem>
+        <EuiFlexItem css={styles.flexItem}>
           <strong>{DOCS}</strong>
           <EuiSpacer />
           {formatNumber(docsCount)}
-        </StyledFlexItem>
+        </EuiFlexItem>
         {ilmPhase && (
-          <UnpaddedStyledFlexItem>
+          <EuiFlexItem css={styles.unpaddedFlexItem}>
             <strong>{ILM_PHASE}</strong>
             <EuiSpacer />
             <Stat
@@ -78,33 +94,33 @@ export const IndexStatsPanelComponent: React.FC<Props> = ({
               tooltipText={getIlmPhaseDescription(ilmPhase)}
               badgeProps={{ 'data-test-subj': 'ilmPhase' }}
             />
-          </UnpaddedStyledFlexItem>
+          </EuiFlexItem>
         )}
-        <StyledFlexItem>
+        <EuiFlexItem css={styles.flexItem}>
           <strong>{SIZE}</strong>
           <EuiSpacer />
           {formatBytes(sizeInBytes ?? 0)}
-        </StyledFlexItem>
+        </EuiFlexItem>
         {customFieldsCount != null && (
-          <StyledFlexItem>
+          <EuiFlexItem css={styles.flexItem}>
             <strong>{CUSTOM_FIELDS}</strong>
             <EuiSpacer />
             {formatNumber(customFieldsCount)}
-          </StyledFlexItem>
+          </EuiFlexItem>
         )}
         {ecsCompliantFieldsCount != null && (
-          <StyledFlexItem>
+          <EuiFlexItem css={styles.flexItem}>
             <strong>{ECS_COMPLIANT_FIELDS}</strong>
             <EuiSpacer />
             {formatNumber(ecsCompliantFieldsCount)}
-          </StyledFlexItem>
+          </EuiFlexItem>
         )}
         {allFieldsCount != null && (
-          <StyledFlexItem>
+          <EuiFlexItem css={styles.flexItem}>
             <strong>{ALL_FIELDS}</strong>
             <EuiSpacer />
             {formatNumber(allFieldsCount)}
-          </StyledFlexItem>
+          </EuiFlexItem>
         )}
       </EuiFlexGroup>
     </EuiPanel>
diff --git a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/latest_results/latest_check_fields/all_tab/utils/get_all_table_columns.tsx b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/latest_results/latest_check_fields/all_tab/utils/get_all_table_columns.tsx
index 386582e5a4fe9..4d9195b557b67 100644
--- a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/latest_results/latest_check_fields/all_tab/utils/get_all_table_columns.tsx
+++ b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/latest_results/latest_check_fields/all_tab/utils/get_all_table_columns.tsx
@@ -24,7 +24,7 @@ import {
 } from '../../../../../../../../translations';
 import { EcsAllowedValues } from '../../../../ecs_allowed_values';
 import { IndexInvalidValues } from '../../../../index_invalid_values';
-import { CodeDanger, CodeSuccess } from '../../../../../../../../styles';
+import { codeDangerCss, codeSuccessCss } from '../../../../../../../../styles';
 import type {
   AllowedValue,
   EnrichedFieldMetadata,
@@ -45,9 +45,9 @@ export const getAllTableColumns = (): Array<EuiTableFieldDataColumnType<Enriched
     field: 'type',
     name: ECS_MAPPING_TYPE_EXPECTED,
     render: (type: string | undefined) => (
-      <CodeSuccess data-test-subj="codeSuccess">
+      <EuiCode css={codeSuccessCss} data-test-subj="codeSuccess">
         {type != null ? type : EMPTY_PLACEHOLDER}
-      </CodeSuccess>
+      </EuiCode>
     ),
     sortable: true,
     truncateText: false,
@@ -59,21 +59,31 @@ export const getAllTableColumns = (): Array<EuiTableFieldDataColumnType<Enriched
     render: (_, x) => {
       // if custom field or ecs based field with mapping match
       if (isCustomFieldMetadata(x) || isEcsCompliantFieldMetadata(x)) {
-        return <CodeSuccess data-test-subj="codeSuccess">{x.indexFieldType}</CodeSuccess>;
+        return (
+          <EuiCode css={codeSuccessCss} data-test-subj="codeSuccess">
+            {x.indexFieldType}
+          </EuiCode>
+        );
       }
 
       // mapping mismatch due to same family
       if (isSameFamilyFieldMetadata(x)) {
         return (
           <div>
-            <CodeSuccess data-test-subj="codeSuccess">{x.indexFieldType}</CodeSuccess>
+            <EuiCode css={codeSuccessCss} data-test-subj="codeSuccess">
+              {x.indexFieldType}
+            </EuiCode>
             <SameFamily />
           </div>
         );
       }
 
       // mapping mismatch
-      return <CodeDanger data-test-subj="codeDanger">{x.indexFieldType}</CodeDanger>;
+      return (
+        <EuiCode css={codeDangerCss} data-test-subj="codeDanger">
+          {x.indexFieldType}
+        </EuiCode>
+      );
     },
     sortable: true,
     truncateText: false,
diff --git a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/latest_results/latest_check_fields/ecs_compliant_tab/index.tsx b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/latest_results/latest_check_fields/ecs_compliant_tab/index.tsx
index e2ad16b73c647..76a4d3c2d8eaf 100644
--- a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/latest_results/latest_check_fields/ecs_compliant_tab/index.tsx
+++ b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/latest_results/latest_check_fields/ecs_compliant_tab/index.tsx
@@ -9,7 +9,7 @@ import { EcsVersion } from '@elastic/ecs';
 
 import { EuiCallOut, EuiEmptyPrompt, EuiSpacer } from '@elastic/eui';
 import React, { useMemo } from 'react';
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 
 import { CompareFieldsTable } from '../../../compare_fields_table';
 import { EmptyPromptBody } from '../../../empty_prompt_body';
@@ -17,7 +17,7 @@ import { EmptyPromptTitle } from '../../../empty_prompt_title';
 import type { EcsCompliantFieldMetadata } from '../../../../../../../types';
 import { isTimestampFieldMissing } from '../utils/is_timestamp_field_missing';
 import { getEcsCompliantTableColumns } from './utils/get_ecs_compliant_table_columns';
-import { CalloutItem } from '../../../styles';
+import { calloutItemCss } from '../../../styles';
 import {
   CUSTOM_DETECTION_ENGINE_RULES_WORK,
   ECS_COMPLIANT_CALLOUT,
@@ -30,9 +30,11 @@ import {
   PRE_BUILT_DETECTION_ENGINE_RULES_WORK,
 } from '../../../translations';
 
-const EmptyPromptContainer = styled.div`
-  width: 100%;
-`;
+const styles = {
+  emptyPromptContainer: css({
+    width: '100%',
+  }),
+};
 
 interface Props {
   indexName: string;
@@ -54,11 +56,11 @@ const EcsCompliantTabComponent: React.FC<Props> = ({ indexName, ecsCompliantFiel
                 version: EcsVersion,
               })}
             </p>
-            <CalloutItem>{PRE_BUILT_DETECTION_ENGINE_RULES_WORK}</CalloutItem>
-            <CalloutItem>{CUSTOM_DETECTION_ENGINE_RULES_WORK}</CalloutItem>
-            <CalloutItem>{PAGES_DISPLAY_EVENTS}</CalloutItem>
-            <CalloutItem>{OTHER_APP_CAPABILITIES_WORK_PROPERLY}</CalloutItem>
-            <CalloutItem>{ECS_COMPLIANT_MAPPINGS_ARE_FULLY_SUPPORTED}</CalloutItem>
+            <div css={calloutItemCss}>{PRE_BUILT_DETECTION_ENGINE_RULES_WORK}</div>
+            <div css={calloutItemCss}>{CUSTOM_DETECTION_ENGINE_RULES_WORK}</div>
+            <div css={calloutItemCss}>{PAGES_DISPLAY_EVENTS}</div>
+            <div css={calloutItemCss}>{OTHER_APP_CAPABILITIES_WORK_PROPERLY}</div>
+            <div css={calloutItemCss}>{ECS_COMPLIANT_MAPPINGS_ARE_FULLY_SUPPORTED}</div>
           </EuiCallOut>
           <EuiSpacer />
           <CompareFieldsTable
@@ -68,7 +70,7 @@ const EcsCompliantTabComponent: React.FC<Props> = ({ indexName, ecsCompliantFiel
           />
         </>
       ) : (
-        <EmptyPromptContainer>
+        <div css={styles.emptyPromptContainer}>
           <EuiEmptyPrompt
             body={emptyPromptBody}
             iconType="cross"
@@ -76,7 +78,7 @@ const EcsCompliantTabComponent: React.FC<Props> = ({ indexName, ecsCompliantFiel
             title={title}
             titleSize="s"
           />
-        </EmptyPromptContainer>
+        </div>
       )}
     </div>
   );
diff --git a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/latest_results/latest_check_fields/ecs_compliant_tab/utils/get_ecs_compliant_table_columns.tsx b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/latest_results/latest_check_fields/ecs_compliant_tab/utils/get_ecs_compliant_table_columns.tsx
index 65e81477a1b63..e43e9b87727f3 100644
--- a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/latest_results/latest_check_fields/ecs_compliant_tab/utils/get_ecs_compliant_table_columns.tsx
+++ b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/latest_results/latest_check_fields/ecs_compliant_tab/utils/get_ecs_compliant_table_columns.tsx
@@ -6,9 +6,9 @@
  */
 
 import React from 'react';
-import { EuiTableFieldDataColumnType } from '@elastic/eui';
+import { EuiCode, EuiTableFieldDataColumnType } from '@elastic/eui';
 
-import { CodeSuccess } from '../../../../../../../../styles';
+import { codeSuccessCss } from '../../../../../../../../styles';
 import { AllowedValue, EcsCompliantFieldMetadata } from '../../../../../../../../types';
 import { FIELD } from '../../../../../../../../translations';
 import { EcsAllowedValues } from '../../../../ecs_allowed_values';
@@ -28,7 +28,11 @@ export const getEcsCompliantTableColumns = (): Array<
   {
     field: 'type',
     name: ECS_MAPPING_TYPE,
-    render: (type: string) => <CodeSuccess data-test-subj="type">{type}</CodeSuccess>,
+    render: (type: string) => (
+      <EuiCode css={codeSuccessCss} data-test-subj="type">
+        {type}
+      </EuiCode>
+    ),
     sortable: true,
     truncateText: false,
     width: '25%',
diff --git a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/latest_results/latest_check_fields/index.tsx b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/latest_results/latest_check_fields/index.tsx
index 918d85e3b5d60..2f05ede7cbe0b 100644
--- a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/latest_results/latest_check_fields/index.tsx
+++ b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/latest_results/latest_check_fields/index.tsx
@@ -7,7 +7,6 @@
 
 import React, { useMemo } from 'react';
 import { EuiButtonGroup } from '@elastic/eui';
-import styled from 'styled-components';
 
 import {
   ALL_FIELDS,
@@ -37,14 +36,16 @@ import { AllTab } from './all_tab';
 import { getEcsCompliantBadgeColor } from './utils/get_ecs_compliant_badge_color';
 import { CheckFieldsTabs } from '../../check_fields_tabs';
 
-const StyledButtonGroup = styled(EuiButtonGroup)`
-  button[data-test-subj='${INCOMPATIBLE_TAB_ID}'] {
-    flex-grow: 1.2;
-  }
-  button[data-test-subj='${ECS_COMPLIANT_TAB_ID}'] {
-    flex-grow: 1.4;
-  }
-`;
+const styles = {
+  buttonGroup: {
+    [`button[data-test-subj='${INCOMPATIBLE_TAB_ID}']`]: {
+      flexGrow: 1.2,
+    },
+    [`button[data-test-subj='${ECS_COMPLIANT_TAB_ID}']`]: {
+      flexGrow: 1.4,
+    },
+  },
+};
 
 export interface Props {
   indexName: string;
@@ -185,7 +186,9 @@ const LatestCheckFieldsComponent: React.FC<Props> = ({
     <div data-test-subj="latestCheckFields">
       <CheckFieldsTabs
         tabs={tabs}
-        renderButtonGroup={(props) => <StyledButtonGroup {...props} isFullWidth />}
+        renderButtonGroup={(props) => (
+          <EuiButtonGroup css={styles.buttonGroup} {...props} isFullWidth />
+        )}
       />
     </div>
   );
diff --git a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/latest_results/latest_check_fields/sticky_actions/index.tsx b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/latest_results/latest_check_fields/sticky_actions/index.tsx
index 64d7ab337f35d..1664719fd6a4b 100644
--- a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/latest_results/latest_check_fields/sticky_actions/index.tsx
+++ b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/latest_results/latest_check_fields/sticky_actions/index.tsx
@@ -6,15 +6,11 @@
  */
 
 import React, { FC } from 'react';
-import { EuiButtonEmpty } from '@elastic/eui';
-import styled from 'styled-components';
+import { useEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/react';
 
 import { Actions } from '../../../../../../../actions';
 
-export const CopyToClipboardButton = styled(EuiButtonEmpty)`
-  margin-left: ${({ theme }) => theme.eui.euiSizeXS};
-`;
-
 interface Props {
   markdownComment: string;
   showAddToNewCaseAction?: boolean;
@@ -23,15 +19,21 @@ interface Props {
   indexName?: string;
 }
 
-const StyledStickyContainer = styled.div`
-  padding: ${({ theme }) => theme.eui.euiSizeL} 0;
-  background: ${({ theme }) => theme.eui.euiColorEmptyShade};
-  position: sticky;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  border-top: 1px solid ${({ theme }) => theme.eui.euiBorderColor};
-`;
+const useStyles = () => {
+  const { euiTheme } = useEuiTheme();
+
+  return {
+    stickyContainer: css({
+      padding: `${euiTheme.size.l} 0`,
+      background: euiTheme.colors.emptyShade,
+      position: 'sticky',
+      bottom: 0,
+      left: 0,
+      right: 0,
+      borderTop: `1px solid ${euiTheme.border.color}`,
+    }),
+  };
+};
 
 const StickyActionsComponent: FC<Props> = ({
   indexName,
@@ -40,8 +42,10 @@ const StickyActionsComponent: FC<Props> = ({
   showAddToNewCaseAction,
   showChatAction,
 }) => {
+  const styles = useStyles();
+
   return (
-    <StyledStickyContainer>
+    <div css={styles.stickyContainer}>
       <Actions
         indexName={indexName}
         markdownComment={markdownComment}
@@ -49,7 +53,7 @@ const StickyActionsComponent: FC<Props> = ({
         showCopyToClipboardAction={showCopyToClipboardAction}
         showAddToNewCaseAction={showAddToNewCaseAction}
       />
-    </StyledStickyContainer>
+    </div>
   );
 };
 
diff --git a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/same_family/index.tsx b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/same_family/index.tsx
index afef2c045d05f..f8ffdeb8a122c 100644
--- a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/same_family/index.tsx
+++ b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/same_family/index.tsx
@@ -5,21 +5,29 @@
  * 2.0.
  */
 
-import { EuiBadge } from '@elastic/eui';
+import { EuiBadge, useEuiTheme } from '@elastic/eui';
 import React from 'react';
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 
 import { SAME_FAMILY_BADGE_LABEL } from '../../../../../translations';
 
-const SameFamilyBadge = styled(EuiBadge)`
-  margin: ${({ theme }) => `0 ${theme.eui.euiSizeXS}`};
-`;
+const useStyles = () => {
+  const { euiTheme } = useEuiTheme();
+  return {
+    sameFamilyBadge: css({
+      margin: `0 ${euiTheme.size.xs}`,
+    }),
+  };
+};
 
-const SameFamilyComponent: React.FC = () => (
-  <SameFamilyBadge data-test-subj="sameFamily" color="warning">
-    {SAME_FAMILY_BADGE_LABEL}
-  </SameFamilyBadge>
-);
+const SameFamilyComponent: React.FC = () => {
+  const styles = useStyles();
+  return (
+    <EuiBadge css={styles.sameFamilyBadge} data-test-subj="sameFamily" color="warning">
+      {SAME_FAMILY_BADGE_LABEL}
+    </EuiBadge>
+  );
+};
 
 SameFamilyComponent.displayName = 'SameFamilyComponent';
 
diff --git a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/same_family_tab/utils/get_same_family_table_columns.tsx b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/same_family_tab/utils/get_same_family_table_columns.tsx
index 713f55c604034..ca864e8ddd3fb 100644
--- a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/same_family_tab/utils/get_same_family_table_columns.tsx
+++ b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/same_family_tab/utils/get_same_family_table_columns.tsx
@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import { EuiTableFieldDataColumnType } from '@elastic/eui';
+import { EuiCode, EuiTableFieldDataColumnType } from '@elastic/eui';
 
 import { SameFamilyFieldMetadata } from '../../../../../../types';
 import {
@@ -14,7 +14,7 @@ import {
   FIELD,
   INDEX_MAPPING_TYPE_ACTUAL,
 } from '../../../../../../translations';
-import { CodeSuccess } from '../../../../../../styles';
+import { codeSuccessCss } from '../../../../../../styles';
 import { SameFamily } from '../../same_family';
 import { ECS_DESCRIPTION } from '../../translations';
 
@@ -31,7 +31,11 @@ export const getSameFamilyTableColumns = (): Array<
   {
     field: 'type',
     name: ECS_MAPPING_TYPE_EXPECTED,
-    render: (type: string) => <CodeSuccess data-test-subj="codeSuccess">{type}</CodeSuccess>,
+    render: (type: string) => (
+      <EuiCode css={codeSuccessCss} data-test-subj="codeSuccess">
+        {type}
+      </EuiCode>
+    ),
     sortable: true,
     truncateText: false,
     width: '25%',
@@ -41,7 +45,9 @@ export const getSameFamilyTableColumns = (): Array<
     name: INDEX_MAPPING_TYPE_ACTUAL,
     render: (indexFieldType: string) => (
       <div>
-        <CodeSuccess data-test-subj="codeSuccess">{indexFieldType}</CodeSuccess>
+        <EuiCode css={codeSuccessCss} data-test-subj="codeSuccess">
+          {indexFieldType}
+        </EuiCode>
         <SameFamily />
       </div>
     ),
diff --git a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/styles.tsx b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/styles.tsx
index f899d42026178..bf99eb99b9a68 100644
--- a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/styles.tsx
+++ b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_check_flyout/styles.tsx
@@ -5,8 +5,10 @@
  * 2.0.
  */
 
-import styled from 'styled-components';
+import { UseEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/react';
 
-export const CalloutItem = styled.div`
-  margin-left: ${({ theme }) => theme.eui.euiSizeS};
-`;
+export const calloutItemCss = ({ euiTheme }: UseEuiTheme) =>
+  css({
+    marginLeft: euiTheme.size.s,
+  });
diff --git a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_result_badge/index.tsx b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_result_badge/index.tsx
index 979445bca8af7..420860146fc8d 100644
--- a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_result_badge/index.tsx
+++ b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index_result_badge/index.tsx
@@ -7,21 +7,22 @@
 
 import { EuiBadge, EuiToolTip } from '@elastic/eui';
 import React from 'react';
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 
 import { getIndexResultToolTip } from '../utils/get_index_result_tooltip';
 import { getCheckTextColor } from '../utils/get_check_text_color';
 import { FAIL, PASS } from '../translations';
 
-const StyledBadge = styled(EuiBadge)`
-  width: 44px;
-  text-align: center;
-  padding-inline: 0;
-
-  .euiBadge__content {
-    justify-content: center;
-  }
-`;
+const styles = {
+  badge: css({
+    width: 44,
+    textAlign: 'center',
+    paddingInline: 0,
+    '.euiBadge__content': {
+      justifyContent: 'center',
+    },
+  }),
+};
 
 export type Props = React.ComponentProps<typeof EuiBadge> & {
   incompatible: number;
@@ -35,13 +36,14 @@ export const IndexResultBadgeComponent: React.FC<Props> = ({
 }) => {
   return (
     <EuiToolTip content={tooltipText ?? getIndexResultToolTip(incompatible)}>
-      <StyledBadge
+      <EuiBadge
+        css={styles.badge}
         data-test-subj="indexResultBadge"
         color={getCheckTextColor(incompatible)}
         {...props}
       >
         {incompatible > 0 ? FAIL : PASS}
-      </StyledBadge>
+      </EuiBadge>
     </EuiToolTip>
   );
 };
diff --git a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/pattern_summary/pattern_label/ilm_phase_counts/index.tsx b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/pattern_summary/pattern_label/ilm_phase_counts/index.tsx
index c1d1ead5e7891..eab5458302513 100644
--- a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/pattern_summary/pattern_label/ilm_phase_counts/index.tsx
+++ b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/pattern_summary/pattern_label/ilm_phase_counts/index.tsx
@@ -7,14 +7,16 @@
 
 import { EuiBadge, EuiFlexGroup, EuiFlexItem, EuiToolTip } from '@elastic/eui';
 import React from 'react';
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 
 import type { IlmExplainPhaseCounts, IlmPhase } from '../../../../../../types';
 import { getPatternIlmPhaseDescription } from './utils/get_pattern_ilm_phase_description';
 
-const PhaseCountsFlexGroup = styled(EuiFlexGroup)`
-  display: inline-flex;
-`;
+const styles = {
+  phaseCounts: css({
+    display: 'inline-flex',
+  }),
+};
 
 export const phases: IlmPhase[] = ['hot', 'unmanaged', 'warm', 'cold', 'frozen'];
 
@@ -24,7 +26,7 @@ interface Props {
 }
 
 const IlmPhaseCountsComponent: React.FC<Props> = ({ ilmExplainPhaseCounts, pattern }) => (
-  <PhaseCountsFlexGroup data-test-subj="ilmPhaseCounts" gutterSize="s">
+  <EuiFlexGroup css={styles.phaseCounts} data-test-subj="ilmPhaseCounts" gutterSize="s">
     {phases.map((phase) =>
       ilmExplainPhaseCounts[phase] != null && ilmExplainPhaseCounts[phase] > 0 ? (
         <EuiFlexItem key={phase} grow={false}>
@@ -40,7 +42,7 @@ const IlmPhaseCountsComponent: React.FC<Props> = ({ ilmExplainPhaseCounts, patte
         </EuiFlexItem>
       ) : null
     )}
-  </PhaseCountsFlexGroup>
+  </EuiFlexGroup>
 );
 
 IlmPhaseCountsComponent.displayName = 'IlmPhaseCountsComponent';
diff --git a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/styles.tsx b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/styles.tsx
index d2b2e7d1b4934..2e04f59e229cd 100644
--- a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/styles.tsx
+++ b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/styles.tsx
@@ -5,31 +5,29 @@
  * 2.0.
  */
 
-import { EuiAccordion } from '@elastic/eui';
-import styled from 'styled-components';
+import { UseEuiTheme } from '@elastic/eui';
+import { CSSObject } from '@emotion/react';
 
-export const PatternAccordion = styled(EuiAccordion)`
-  .euiAccordion__triggerWrapper {
-    padding: 14px ${({ theme }) => theme.eui.euiSize};
-    border: 1px solid ${({ theme }) => theme.eui.euiBorderColor};
-    border-radius: ${({ theme }) => theme.eui.euiBorderRadius};
-  }
+export const patternAccordionCss = ({ euiTheme }: UseEuiTheme): CSSObject => ({
+  '.euiAccordion__triggerWrapper': {
+    padding: `14px ${euiTheme.size.base}`,
+    border: `1px solid ${euiTheme.border.color}`,
+    borderRadius: euiTheme.border.radius.medium,
+  },
+  '.euiAccordion__button:is(:hover, :focus)': {
+    textDecoration: 'none',
+  },
+  '.euiAccordion__buttonContent': {
+    flexGrow: 1,
+  },
+});
 
-  .euiAccordion__button:is(:hover, :focus) {
-    text-decoration: none;
-  }
-
-  .euiAccordion__buttonContent {
-    flex-grow: 1;
-  }
-`;
-
-export const PatternAccordionChildren = styled.div`
-  padding: ${({ theme }) => theme.eui.euiSize};
-  padding-bottom: 0;
-  border: 1px solid ${({ theme }) => theme.eui.euiBorderColor};
-  border-radius: 0 0 ${({ theme }) => `${theme.eui.euiBorderRadius} ${theme.eui.euiBorderRadius}`};
-  border-top: none;
-  width: calc(100% - ${({ theme }) => theme.eui.euiSizeS} * 2);
-  margin: auto;
-`;
+export const patternAccordionChildrenCss = ({ euiTheme }: UseEuiTheme): CSSObject => ({
+  padding: euiTheme.size.s,
+  paddingBottom: 0,
+  border: `1px solid ${euiTheme.border.color}`,
+  borderRadius: `0 0 ${euiTheme.border.radius.medium} ${euiTheme.border.radius.medium}`,
+  borderTop: 'none',
+  width: `calc(100% - ${euiTheme.size.s} * 2)`,
+  margin: 'auto',
+});
diff --git a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/summary_table/utils/columns.tsx b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/summary_table/utils/columns.tsx
index 4e9bcf641ac16..ab59a84b76406 100644
--- a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/summary_table/utils/columns.tsx
+++ b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/summary_table/utils/columns.tsx
@@ -15,7 +15,7 @@ import {
 } from '@elastic/eui';
 import React from 'react';
 import moment from 'moment';
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 
 import { euiThemeVars } from '@kbn/ui-theme';
 import { getDocsCountPercent } from '../../../../../utils/stats';
@@ -39,9 +39,11 @@ import { getIndexResultToolTip } from '../../utils/get_index_result_tooltip';
 import { CHECK_NOW } from '../../translations';
 import { HISTORICAL_RESULTS_TOUR_SELECTOR_KEY } from '../../constants';
 
-const ProgressContainer = styled.div`
-  width: 150px;
-`;
+const styles = {
+  progressContainer: css({
+    width: '150px',
+  }),
+};
 
 export const getSummaryTableILMPhaseColumn = (
   isILMAvailable: boolean
@@ -186,7 +188,7 @@ export const getSummaryTableColumns = ({
     field: 'docsCount',
     name: DOCS,
     render: (_, { docsCount, patternDocsCount }) => (
-      <ProgressContainer>
+      <div css={styles.progressContainer}>
         <EuiProgress
           data-test-subj="docsCount"
           label={formatNumber(docsCount)}
@@ -195,7 +197,7 @@ export const getSummaryTableColumns = ({
           value={docsCount}
           valueText={getDocsCountPercent({ docsCount, patternDocsCount })}
         />
-      </ProgressContainer>
+      </div>
     ),
     sortable: true,
     truncateText: false,
diff --git a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/storage_details/storage_treemap/chart_legend_item/index.tsx b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/storage_details/storage_treemap/chart_legend_item/index.tsx
index 3264696e59ddd..607b7fc282a19 100644
--- a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/storage_details/storage_treemap/chart_legend_item/index.tsx
+++ b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/storage_details/storage_treemap/chart_legend_item/index.tsx
@@ -7,19 +7,21 @@
 
 import { EuiFlexGroup, EuiFlexItem, EuiHealth, EuiLink, EuiText, EuiToolTip } from '@elastic/eui';
 import React from 'react';
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 
 const DEFAULT_DATA_TEST_SUBJ = 'chartLegendItem';
 
-export const ChartLegendLink = styled(EuiLink)`
-  width: 100%;
-`;
-export const FixedWidthLegendText = styled(EuiText)<{
-  $width: number | undefined;
-}>`
-  text-align: left;
-  ${({ $width }) => ($width != null ? `width: ${$width}px;` : '')}
-`;
+const getStyles = (width?: number) => {
+  return {
+    chartLegendLink: css({
+      width: '100%',
+    }),
+    fixedWidthLegendText: css({
+      textAlign: 'left',
+      ...(width != null ? { width: `${width}px` } : {}),
+    }),
+  };
+};
 
 interface Props {
   color: string | null;
@@ -37,36 +39,40 @@ const ChartLegendItemComponent: React.FC<Props> = ({
   onClick,
   text,
   textWidth,
-}) => (
-  <ChartLegendLink
-    color="text"
-    data-test-subj={dataTestSubj}
-    disabled={onClick == null}
-    onClick={onClick}
-  >
-    <EuiFlexGroup alignItems="center" gutterSize="none" justifyContent="spaceBetween">
-      <EuiFlexItem grow={false}>
-        <EuiToolTip content={text}>
-          {color != null ? (
-            <EuiHealth color={color}>
-              <FixedWidthLegendText className="eui-textTruncate" size="xs" $width={textWidth}>
+}) => {
+  const styles = getStyles(textWidth);
+  return (
+    <EuiLink
+      css={styles.chartLegendLink}
+      color="text"
+      data-test-subj={dataTestSubj}
+      disabled={onClick == null}
+      onClick={onClick}
+    >
+      <EuiFlexGroup alignItems="center" gutterSize="none" justifyContent="spaceBetween">
+        <EuiFlexItem grow={false}>
+          <EuiToolTip content={text}>
+            {color != null ? (
+              <EuiHealth color={color}>
+                <EuiText css={styles.fixedWidthLegendText} className="eui-textTruncate" size="xs">
+                  {text}
+                </EuiText>
+              </EuiHealth>
+            ) : (
+              <EuiText css={styles.fixedWidthLegendText} className="eui-textTruncate" size="xs">
                 {text}
-              </FixedWidthLegendText>
-            </EuiHealth>
-          ) : (
-            <FixedWidthLegendText className="eui-textTruncate" size="xs" $width={textWidth}>
-              {text}
-            </FixedWidthLegendText>
-          )}
-        </EuiToolTip>
-      </EuiFlexItem>
+              </EuiText>
+            )}
+          </EuiToolTip>
+        </EuiFlexItem>
 
-      <EuiFlexItem grow={false}>
-        <EuiText size="xs">{count}</EuiText>
-      </EuiFlexItem>
-    </EuiFlexGroup>
-  </ChartLegendLink>
-);
+        <EuiFlexItem grow={false}>
+          <EuiText size="xs">{count}</EuiText>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiLink>
+  );
+};
 
 ChartLegendItemComponent.displayName = 'ChartLegendItemComponent';
 
diff --git a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/storage_details/storage_treemap/index.test.tsx b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/storage_details/storage_treemap/index.test.tsx
index 9ed31d89c37af..d367cfb7ac208 100644
--- a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/storage_details/storage_treemap/index.test.tsx
+++ b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/storage_details/storage_treemap/index.test.tsx
@@ -85,7 +85,7 @@ describe('StorageTreemap', () => {
     });
 
     test('it renders the legend with the expected overflow-y style', () => {
-      expect(screen.getByTestId('legend')).toHaveClass('eui-yScroll');
+      expect(screen.getByTestId('legend')).toHaveClass('eui-scrollBar');
     });
 
     test('it uses a theme with the expected `minFontSize` to show more labels at various screen resolutions', () => {
diff --git a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/storage_details/storage_treemap/index.tsx b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/storage_details/storage_treemap/index.tsx
index 469f42b648ba2..01e7e61766d32 100644
--- a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/storage_details/storage_treemap/index.tsx
+++ b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/storage_details/storage_treemap/index.tsx
@@ -18,10 +18,10 @@ import type {
   XYChartElementEvent,
 } from '@elastic/charts';
 import { Chart, Partition, PartitionLayout, Settings } from '@elastic/charts';
-import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, useEuiTheme } from '@elastic/eui';
 import React, { useCallback, useMemo } from 'react';
 import { i18n } from '@kbn/i18n';
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 
 import { ChartLegendItem } from './chart_legend_item';
 import { NoData } from './no_data';
@@ -32,24 +32,32 @@ import { getPathToFlattenedBucketMap } from './utils/get_path_to_flattened_bucke
 import { getLayersMultiDimensional } from './utils/get_layers_multi_dimensional';
 import { getLegendItems } from './utils/get_legend_items';
 
-export const ChartFlexItem = styled(EuiFlexItem)<{
-  $maxChartHeight: number | undefined;
-  $minChartHeight: number;
-}>`
-  ${({ $maxChartHeight }) => ($maxChartHeight != null ? `max-height: ${$maxChartHeight}px;` : '')}
-  min-height: ${({ $minChartHeight }) => `${$minChartHeight}px`};
-`;
-
-export const LegendContainer = styled.div<{
-  $height?: number;
-  $width?: number;
-}>`
-  margin-left: ${({ theme }) => theme.eui.euiSizeM};
-  margin-top: ${({ theme }) => theme.eui.euiSizeM};
-  ${({ $height }) => ($height != null ? `height: ${$height}px;` : '')}
-  scrollbar-width: thin;
-  ${({ $width }) => ($width != null ? `width: ${$width}px;` : '')}
-`;
+interface StyleProps {
+  maxChartHeight?: number;
+  minChartHeight: number;
+  height?: number;
+  width?: number;
+}
+
+const useStyles = ({ maxChartHeight, minChartHeight, height, width }: StyleProps) => {
+  const { euiTheme } = useEuiTheme();
+
+  return {
+    chart: css({
+      ...(maxChartHeight != null && { maxHeight: `${maxChartHeight}px` }),
+      minHeight: `${minChartHeight}px`,
+    }),
+
+    legendContainer: css({
+      marginLeft: euiTheme.size.m,
+      marginTop: euiTheme.size.m,
+      overflowY: 'auto',
+      ...(height != null && { height: `${height}px` }),
+      scrollbarWidth: 'thin',
+      ...(width != null && { width: `${width}px` }),
+    }),
+  };
+};
 
 export const DEFAULT_MIN_CHART_HEIGHT = 240; // px
 export const LEGEND_WIDTH = 220; // px
@@ -107,6 +115,12 @@ const StorageTreemapComponent: React.FC<Props> = ({
   patternRollups,
   valueFormatter,
 }: Props) => {
+  const styles = useStyles({
+    maxChartHeight,
+    minChartHeight,
+    height: maxChartHeight,
+    width: LEGEND_WIDTH,
+  });
   const { theme, baseTheme, patterns } = useDataQualityContext();
   const fillColor = useMemo(
     () => theme?.background?.color ?? baseTheme.background.color,
@@ -163,7 +177,7 @@ const StorageTreemapComponent: React.FC<Props> = ({
 
   return (
     <EuiFlexGroup data-test-subj="storageTreemap" gutterSize="none">
-      <ChartFlexItem grow={true} $maxChartHeight={maxChartHeight} $minChartHeight={minChartHeight}>
+      <EuiFlexItem css={styles.chart} grow={true}>
         {flattenedBuckets.length === 0 ? (
           <NoData />
         ) : (
@@ -185,15 +199,10 @@ const StorageTreemapComponent: React.FC<Props> = ({
             />
           </Chart>
         )}
-      </ChartFlexItem>
+      </EuiFlexItem>
 
       <EuiFlexItem grow={false}>
-        <LegendContainer
-          data-test-subj="legend"
-          $height={maxChartHeight}
-          className="eui-yScroll"
-          $width={LEGEND_WIDTH}
-        >
+        <div css={styles.legendContainer} data-test-subj="legend" className="eui-scrollBar">
           {legendItems.map(({ color, ilmPhase, index, pattern, sizeInBytes, docsCount }) => (
             <ChartLegendItem
               color={color}
@@ -211,7 +220,7 @@ const StorageTreemapComponent: React.FC<Props> = ({
               textWidth={LEGEND_TEXT_WITH}
             />
           ))}
-        </LegendContainer>
+        </div>
       </EuiFlexItem>
     </EuiFlexGroup>
   );
diff --git a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/storage_details/storage_treemap/no_data/index.tsx b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/storage_details/storage_treemap/no_data/index.tsx
index 4e5e8a46e62fd..3ccecba279d5c 100644
--- a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/storage_details/storage_treemap/no_data/index.tsx
+++ b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_details/storage_details/storage_treemap/no_data/index.tsx
@@ -5,44 +5,57 @@
  * 2.0.
  */
 
-import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText, useEuiTheme } from '@elastic/eui';
 import React from 'react';
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 
 import * as i18n from '../translations';
 
-const NoDataLabel = styled(EuiText)`
-  text-align: center;
-`;
+const useStyles = () => {
+  const { euiTheme } = useEuiTheme();
+
+  return {
+    noDataLabel: css({
+      textAlign: 'center',
+    }),
+    container: css({
+      padding: `${euiTheme.size.m} 0`,
+    }),
+  };
+};
 
 interface Props {
   reason?: string;
 }
 
-const StyledContainer = styled.div`
-  padding: ${({ theme }) => theme.eui.euiSizeM} 0;
-`;
-
-const NoDataComponent: React.FC<Props> = ({ reason }) => (
-  <EuiFlexGroup alignItems="center" gutterSize="none">
-    <EuiFlexItem grow>
-      <StyledContainer>
-        <NoDataLabel color="subdued" data-test-subj="noDataLabel" size="xs">
-          {i18n.NO_DATA_LABEL}
-        </NoDataLabel>
-
-        {reason != null && (
-          <>
-            <EuiSpacer size="s" />
-            <NoDataLabel color="subdued" data-test-subj="reasonLabel" size="xs">
-              {reason}
-            </NoDataLabel>
-          </>
-        )}
-      </StyledContainer>
-    </EuiFlexItem>
-  </EuiFlexGroup>
-);
+const NoDataComponent: React.FC<Props> = ({ reason }) => {
+  const styles = useStyles();
+  return (
+    <EuiFlexGroup alignItems="center" gutterSize="none">
+      <EuiFlexItem grow>
+        <div css={styles.container}>
+          <EuiText css={styles.noDataLabel} color="subdued" data-test-subj="noDataLabel" size="xs">
+            {i18n.NO_DATA_LABEL}
+          </EuiText>
+
+          {reason != null && (
+            <>
+              <EuiSpacer size="s" />
+              <EuiText
+                css={styles.noDataLabel}
+                color="subdued"
+                data-test-subj="reasonLabel"
+                size="xs"
+              >
+                {reason}
+              </EuiText>
+            </>
+          )}
+        </div>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};
 
 NoDataComponent.displayName = 'NoDataComponent';
 
diff --git a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_summary/ilm_phase_filter/index.tsx b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_summary/ilm_phase_filter/index.tsx
index cd7148d38b3aa..085dc9fc388bb 100644
--- a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_summary/ilm_phase_filter/index.tsx
+++ b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_summary/ilm_phase_filter/index.tsx
@@ -8,6 +8,7 @@
 import {
   EuiComboBox,
   EuiComboBoxOptionOption,
+  EuiFormControlLayout,
   EuiFormLabel,
   EuiToolTip,
   useGeneratedHtmlId,
@@ -22,17 +23,17 @@ import {
   SELECT_ONE_OR_MORE_ILM_PHASES,
 } from '../../translations';
 import { useDataQualityContext } from '../../data_quality_context';
-import { StyledFormControlLayout, StyledOption, StyledOptionLabel } from './styles';
+import { formControlLayoutCss, optionCss, optionLabelCss } from './styles';
 
 const renderOption = (
   option: EuiComboBoxOptionOption<string | number | string[] | undefined>
 ): React.ReactNode => (
   <EuiToolTip content={`${option.label}: ${getIlmPhaseDescription(option.label)}`}>
-    <StyledOption>
-      <StyledOptionLabel>{`${option.label}`}</StyledOptionLabel>
+    <div css={optionCss}>
+      <span css={optionLabelCss}>{`${option.label}`}</span>
       {': '}
       <span>{getIlmPhaseDescription(option.label)}</span>
-    </StyledOption>
+    </div>
   </EuiToolTip>
 );
 
@@ -53,7 +54,7 @@ const IlmPhaseFilterComponent: React.FC = () => {
 
   return (
     <EuiToolTip display="block" content={INDEX_LIFECYCLE_MANAGEMENT_PHASES}>
-      <StyledFormControlLayout fullWidth={true} prepend={ilmFormLabel}>
+      <EuiFormControlLayout css={formControlLayoutCss} fullWidth={true} prepend={ilmFormLabel}>
         <EuiComboBox
           id={labelInputId}
           data-test-subj="selectIlmPhases"
@@ -64,7 +65,7 @@ const IlmPhaseFilterComponent: React.FC = () => {
           options={ilmPhaseOptionsStatic}
           onChange={handleSetSelectedOptions}
         />
-      </StyledFormControlLayout>
+      </EuiFormControlLayout>
     </EuiToolTip>
   );
 };
diff --git a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_summary/ilm_phase_filter/styles.tsx b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_summary/ilm_phase_filter/styles.tsx
index f2ff23d441165..141cee87c7c79 100644
--- a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_summary/ilm_phase_filter/styles.tsx
+++ b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_summary/ilm_phase_filter/styles.tsx
@@ -5,24 +5,23 @@
  * 2.0.
  */
 
-import { EuiFormControlLayout } from '@elastic/eui';
-import styled from 'styled-components';
+import { UseEuiTheme } from '@elastic/eui';
+import { CSSObject, css } from '@emotion/react';
 
-export const StyledOption = styled.div`
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  width: 100%;
-`;
+export const optionCss = css({
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  width: '100%',
+});
 
-export const StyledOptionLabel = styled.span`
-  font-weight: ${({ theme }) => theme.eui.euiFontWeightBold};
-`;
+export const optionLabelCss = ({ euiTheme }: UseEuiTheme): CSSObject => ({
+  fontWeight: euiTheme.font.weight.bold,
+});
 
-export const StyledFormControlLayout = styled(EuiFormControlLayout)`
-  height: 42px;
-
-  .euiFormControlLayout__childrenWrapper {
-    overflow: visible;
-  }
-`;
+export const formControlLayoutCss = css({
+  height: 42,
+  '.euiFormControlLayout__childrenWrapper': {
+    overflow: 'visible',
+  },
+});
diff --git a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_summary/index.tsx b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_summary/index.tsx
index 09c98c1a84197..ee90d2b9e78d0 100644
--- a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_summary/index.tsx
+++ b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_summary/index.tsx
@@ -5,9 +5,9 @@
  * 2.0.
  */
 
-import { EuiFlexGroup, EuiFlexItem, EuiPanel } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiPanel, useEuiTheme } from '@elastic/eui';
 import React from 'react';
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 
 import { StatsRollup } from '../stats_rollup';
 import { SummaryActions } from './summary_actions';
@@ -18,53 +18,57 @@ import { useResultsRollupContext } from '../contexts/results_rollup_context';
 const MAX_SUMMARY_ACTIONS_CONTAINER_WIDTH = 400;
 const MIN_SUMMARY_ACTIONS_CONTAINER_WIDTH = 235;
 
-const StyledFlexGroup = styled(EuiFlexGroup)`
-  min-height: calc(174px - ${({ theme }) => theme.eui.euiSizeL} * 2);
-`;
+const useStyles = () => {
+  const { euiTheme } = useEuiTheme();
 
-const StyledFlexItem = styled(EuiFlexItem)`
-  gap: ${({ theme }) => theme.eui.euiSizeL};
-`;
-
-const SummaryActionsContainerFlexItem = styled(EuiFlexItem)`
-  max-width: ${MAX_SUMMARY_ACTIONS_CONTAINER_WIDTH}px;
-  min-width: ${MIN_SUMMARY_ACTIONS_CONTAINER_WIDTH}px;
-`;
-
-const StyledIlmPhaseFilterContainer = styled.div`
-  width: 100%;
-  max-width: 432px;
-  align-self: flex-end;
-`;
-
-const StyledRollupContainer = styled.div`
-  margin-top: auto;
-`;
+  return {
+    flexGroup: css({
+      minHeight: `calc(174px - ${euiTheme.size.l} * 2)`,
+    }),
+    flexItem: css({
+      gap: euiTheme.size.l,
+    }),
+    summaryActionsContainer: css({
+      maxWidth: MAX_SUMMARY_ACTIONS_CONTAINER_WIDTH,
+      minWidth: MIN_SUMMARY_ACTIONS_CONTAINER_WIDTH,
+    }),
+    ilmPhaseFilterContainer: css({
+      width: '100%',
+      maxWidth: 432,
+      alignSelf: 'flex-end',
+    }),
+    rollupContainer: css({
+      marginTop: 'auto',
+    }),
+  };
+};
 
 const DataQualitySummaryComponent: React.FC = () => {
+  const styles = useStyles();
   const { isILMAvailable } = useDataQualityContext();
   const { totalIndices, totalDocsCount, totalIndicesChecked, totalIncompatible, totalSizeInBytes } =
     useResultsRollupContext();
 
   return (
     <EuiPanel paddingSize="l" data-test-subj="dataQualitySummary" hasShadow={true}>
-      <StyledFlexGroup
+      <EuiFlexGroup
+        css={styles.flexGroup}
         alignItems="stretch"
         gutterSize="none"
         justifyContent="spaceBetween"
         wrap={true}
       >
-        <SummaryActionsContainerFlexItem grow={false}>
+        <EuiFlexItem css={styles.summaryActionsContainer} grow={false}>
           <SummaryActions />
-        </SummaryActionsContainerFlexItem>
+        </EuiFlexItem>
 
-        <StyledFlexItem grow={false}>
+        <EuiFlexItem css={styles.flexItem} grow={false}>
           {isILMAvailable && (
-            <StyledIlmPhaseFilterContainer>
+            <div css={styles.ilmPhaseFilterContainer}>
               <IlmPhaseFilter />
-            </StyledIlmPhaseFilterContainer>
+            </div>
           )}
-          <StyledRollupContainer>
+          <div css={styles.rollupContainer}>
             <StatsRollup
               docsCount={totalDocsCount}
               incompatible={totalIncompatible}
@@ -72,9 +76,9 @@ const DataQualitySummaryComponent: React.FC = () => {
               indicesChecked={totalIndicesChecked}
               sizeInBytes={totalSizeInBytes}
             />
-          </StyledRollupContainer>
-        </StyledFlexItem>
-      </StyledFlexGroup>
+          </div>
+        </EuiFlexItem>
+      </EuiFlexGroup>
     </EuiPanel>
   );
 };
diff --git a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_summary/summary_actions/check_all/index.tsx b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_summary/summary_actions/check_all/index.tsx
index 7f8405845714e..c7b15a9e43a0a 100644
--- a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_summary/summary_actions/check_all/index.tsx
+++ b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_summary/summary_actions/check_all/index.tsx
@@ -7,7 +7,7 @@
 
 import { EuiButton } from '@elastic/eui';
 import React, { useCallback, useEffect, useState } from 'react';
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 import { v4 as uuidv4 } from 'uuid';
 
 import { getAllIndicesToCheck } from './utils/get_all_indices_to_check';
@@ -18,9 +18,11 @@ import * as i18n from '../../../translations';
 import type { IndexToCheck } from '../../../types';
 import { useAbortControllerRef } from '../../../hooks/use_abort_controller_ref';
 
-const CheckAllButton = styled(EuiButton)`
-  width: 112px;
-`;
+const styles = {
+  checkAllButton: css({
+    width: '112px',
+  }),
+};
 
 async function wait(ms: number) {
   const delay = () =>
@@ -150,7 +152,8 @@ const CheckAllComponent: React.FC<Props> = ({
   const disabled = isILMAvailable && ilmPhases.length === 0;
 
   return (
-    <CheckAllButton
+    <EuiButton
+      css={styles.checkAllButton}
       aria-label={isRunning ? i18n.CANCEL : i18n.CHECK_ALL}
       data-test-subj="checkAll"
       disabled={disabled}
@@ -158,7 +161,7 @@ const CheckAllComponent: React.FC<Props> = ({
       onClick={onClick}
     >
       {isRunning ? i18n.CANCEL : i18n.CHECK_ALL}
-    </CheckAllButton>
+    </EuiButton>
   );
 };
 
diff --git a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_summary/summary_actions/check_status/errors_popover/errors_viewer/index.tsx b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_summary/summary_actions/check_status/errors_popover/errors_viewer/index.tsx
index 363127e4f919c..5c5b49ad9ac06 100644
--- a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_summary/summary_actions/check_status/errors_popover/errors_viewer/index.tsx
+++ b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_summary/summary_actions/check_status/errors_popover/errors_viewer/index.tsx
@@ -7,7 +7,7 @@
 
 import { EuiInMemoryTable } from '@elastic/eui';
 import React, { useMemo } from 'react';
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 
 import {
   ERRORS_CONTAINER_MAX_WIDTH,
@@ -16,10 +16,12 @@ import {
 } from './helpers';
 import type { ErrorSummary } from '../../../../../types';
 
-const ErrorsViewerContainer = styled.div`
-  max-width: ${ERRORS_CONTAINER_MAX_WIDTH}px;
-  min-width: ${ERRORS_CONTAINER_MIN_WIDTH}px;
-`;
+const styles = {
+  errorsViewerContainer: css({
+    maxWidth: ERRORS_CONTAINER_MAX_WIDTH,
+    minWidth: ERRORS_CONTAINER_MIN_WIDTH,
+  }),
+};
 
 interface Props {
   errorSummary: ErrorSummary[];
@@ -29,7 +31,7 @@ const ErrorsViewerComponent: React.FC<Props> = ({ errorSummary }) => {
   const columns = useMemo(() => getErrorsViewerTableColumns(), []);
 
   return (
-    <ErrorsViewerContainer data-test-subj="errorsViewer">
+    <div css={styles.errorsViewerContainer} data-test-subj="errorsViewer">
       <EuiInMemoryTable
         columns={columns}
         compressed={true}
@@ -37,7 +39,7 @@ const ErrorsViewerComponent: React.FC<Props> = ({ errorSummary }) => {
         sorting={false}
         pagination={true}
       />
-    </ErrorsViewerContainer>
+    </div>
   );
 };
 
diff --git a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_summary/summary_actions/check_status/errors_popover/index.tsx b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_summary/summary_actions/check_status/errors_popover/index.tsx
index 18824bd310ac7..e3f18247e210d 100644
--- a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_summary/summary_actions/check_status/errors_popover/index.tsx
+++ b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_summary/summary_actions/check_status/errors_popover/index.tsx
@@ -14,7 +14,7 @@ import {
   EuiSpacer,
 } from '@elastic/eui';
 import React, { useCallback, useMemo, useState } from 'react';
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 
 import {
   COPY_TO_CLIPBOARD,
@@ -35,9 +35,11 @@ import { getErrorsMarkdownTable, getErrorsMarkdownTableRows } from '../../utils/
 import { ERROR, ERRORS, PATTERN } from '../../translations';
 import { COPIED_ERRORS_TOAST_TITLE, VIEW_ERRORS } from './translations';
 
-const CallOut = styled(EuiCallOut)`
-  max-width: ${ERRORS_CONTAINER_MAX_WIDTH}px;
-`;
+const styles = {
+  callout: css({
+    maxWidth: `${ERRORS_CONTAINER_MAX_WIDTH}px`,
+  }),
+};
 
 interface Props {
   addSuccessToast: (toast: { title: string }) => void;
@@ -89,7 +91,13 @@ const ErrorsPopoverComponent: React.FC<Props> = ({ addSuccessToast, errorSummary
       isOpen={isPopoverOpen}
       panelPaddingSize="s"
     >
-      <CallOut color="danger" data-test-subj="callout" size="s" title={ERRORS}>
+      <EuiCallOut
+        css={styles.callout}
+        color="danger"
+        data-test-subj="callout"
+        size="s"
+        title={ERRORS}
+      >
         <p>{ERRORS_CALLOUT_SUMMARY}</p>
 
         <p>{ERRORS_MAY_OCCUR}</p>
@@ -116,7 +124,7 @@ const ErrorsPopoverComponent: React.FC<Props> = ({ addSuccessToast, errorSummary
         >
           {COPY_TO_CLIPBOARD}
         </EuiButtonEmpty>
-      </CallOut>
+      </EuiCallOut>
 
       <EuiSpacer />
 
diff --git a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_summary/summary_actions/index.tsx b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_summary/summary_actions/index.tsx
index e155bfadea07d..9f7bc94eadcd7 100644
--- a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_summary/summary_actions/index.tsx
+++ b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/data_quality_summary/summary_actions/index.tsx
@@ -8,7 +8,7 @@
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { sortBy } from 'lodash/fp';
 import React, { useCallback, useMemo, useState } from 'react';
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 
 import { CheckAll } from './check_all';
 import { CheckStatus } from './check_status';
@@ -30,10 +30,12 @@ import { getSummaryTableMarkdownHeader, getSummaryTableMarkdownRow } from '../..
 import { ERROR, ERRORS, PATTERN } from './translations';
 import { INDEX } from '../../translations';
 
-const StyledActionsContainerFlexItem = styled(EuiFlexItem)`
-  margin-top: auto;
-  padding-bottom: 3px;
-`;
+const styles = {
+  actionsContainer: css({
+    marginTop: 'auto',
+    paddingBottom: '3px',
+  }),
+};
 
 export const getResultsSortedByDocsCount = (
   results: Record<string, DataQualityCheckResult> | undefined
@@ -218,13 +220,13 @@ const SummaryActionsComponent: React.FC = () => {
           />
         </EuiFlexItem>
 
-        <StyledActionsContainerFlexItem grow={false}>
+        <EuiFlexItem css={styles.actionsContainer} grow={false}>
           <Actions
             showAddToNewCaseAction={true}
             showCopyToClipboardAction={true}
             markdownComment={markdownComment}
           />
-        </StyledActionsContainerFlexItem>
+        </EuiFlexItem>
       </EuiFlexGroup>
     </>
   );
diff --git a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/mock/test_providers/test_providers.tsx b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/mock/test_providers/test_providers.tsx
index e0220d26e8690..cc769b011a52c 100644
--- a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/mock/test_providers/test_providers.tsx
+++ b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/mock/test_providers/test_providers.tsx
@@ -9,14 +9,15 @@ import { actionTypeRegistryMock } from '@kbn/triggers-actions-ui-plugin/public/a
 import { httpServiceMock } from '@kbn/core-http-browser-mocks';
 import { notificationServiceMock } from '@kbn/core-notifications-browser-mocks';
 import { AssistantAvailability, AssistantProvider } from '@kbn/elastic-assistant';
-import { I18nProvider } from '@kbn/i18n-react';
-import { euiDarkVars } from '@kbn/ui-theme';
 import React from 'react';
-import { ThemeProvider } from 'styled-components';
+import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Theme } from '@elastic/charts';
-
+import { coreMock } from '@kbn/core/public/mocks';
 import { UserProfileService } from '@kbn/core/public';
+import { I18nProvider } from '@kbn/i18n-react';
+import { EuiThemeProvider } from '@elastic/eui';
+
 import { DataQualityProvider, DataQualityProviderProps } from '../../data_quality_context';
 import { ResultsRollupContext } from '../../contexts/results_rollup_context';
 import { IndicesCheckContext } from '../../contexts/indices_check_context';
@@ -66,30 +67,32 @@ const TestExternalProvidersComponent: React.FC<TestExternalProvidersProps> = ({
   });
 
   return (
-    <I18nProvider>
-      <ThemeProvider theme={() => ({ eui: euiDarkVars, darkMode: true })}>
-        <QueryClientProvider client={queryClient}>
-          <AssistantProvider
-            actionTypeRegistry={actionTypeRegistry}
-            assistantAvailability={mockAssistantAvailability}
-            augmentMessageCodeBlocks={jest.fn()}
-            basePath={'https://localhost:5601/kbn'}
-            docLinks={{
-              ELASTIC_WEBSITE_URL: 'https://www.elastic.co/',
-              DOC_LINK_VERSION: 'current',
-            }}
-            getComments={mockGetComments}
-            http={mockHttp}
-            baseConversations={{}}
-            navigateToApp={mockNavigateToApp}
-            currentAppId={'securitySolutionUI'}
-            userProfileService={jest.fn() as unknown as UserProfileService}
-          >
-            {children}
-          </AssistantProvider>
-        </QueryClientProvider>
-      </ThemeProvider>
-    </I18nProvider>
+    <KibanaRenderContextProvider {...coreMock.createStart()}>
+      <I18nProvider>
+        <EuiThemeProvider>
+          <QueryClientProvider client={queryClient}>
+            <AssistantProvider
+              actionTypeRegistry={actionTypeRegistry}
+              assistantAvailability={mockAssistantAvailability}
+              augmentMessageCodeBlocks={jest.fn()}
+              basePath={'https://localhost:5601/kbn'}
+              docLinks={{
+                ELASTIC_WEBSITE_URL: 'https://www.elastic.co/',
+                DOC_LINK_VERSION: 'current',
+              }}
+              getComments={mockGetComments}
+              http={mockHttp}
+              baseConversations={{}}
+              navigateToApp={mockNavigateToApp}
+              currentAppId={'securitySolutionUI'}
+              userProfileService={jest.fn() as unknown as UserProfileService}
+            >
+              {children}
+            </AssistantProvider>
+          </QueryClientProvider>
+        </EuiThemeProvider>
+      </I18nProvider>
+    </KibanaRenderContextProvider>
   );
 };
 
diff --git a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/stat/index.tsx b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/stat/index.tsx
index a7d9286561a5b..be0f713872e7d 100644
--- a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/stat/index.tsx
+++ b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/stat/index.tsx
@@ -6,17 +6,22 @@
  */
 
 import React from 'react';
-import { EuiBadge, EuiText, EuiToolTip } from '@elastic/eui';
-import styled from 'styled-components';
+import { EuiBadge, EuiText, EuiToolTip, useEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/react';
 
-const StyledText = styled(EuiText)`
-  white-space: nowrap;
-`;
+const useStyles = () => {
+  const { euiTheme } = useEuiTheme();
 
-const StyledDescription = styled.span`
-  margin-right: ${({ theme }) => theme.eui.euiSizeS};
-  vertical-align: baseline;
-`;
+  return {
+    text: css({
+      whiteSpace: 'nowrap',
+    }),
+    description: css({
+      marginRight: euiTheme.size.s,
+      verticalAlign: 'baseline',
+    }),
+  };
+};
 
 export interface Props {
   badgeText: string;
@@ -33,14 +38,15 @@ const StatComponent: React.FC<Props> = ({
   children,
   badgeProps,
 }) => {
+  const styles = useStyles();
   return (
     <EuiToolTip content={tooltipText}>
-      <StyledText data-test-subj="stat" size={'xs'}>
-        {children && <StyledDescription>{children}</StyledDescription>}
+      <EuiText css={styles.text} data-test-subj="stat" size={'xs'}>
+        {children && <span css={styles.description}>{children}</span>}
         <EuiBadge color={badgeColor} {...badgeProps}>
           {badgeText}
         </EuiBadge>
-      </StyledText>
+      </EuiText>
     </EuiToolTip>
   );
 };
diff --git a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/stats_rollup/index.tsx b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/stats_rollup/index.tsx
index 7a0fb2deaf5bb..95b2836981558 100644
--- a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/stats_rollup/index.tsx
+++ b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/stats_rollup/index.tsx
@@ -5,9 +5,9 @@
  * 2.0.
  */
 
-import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, useEuiTheme } from '@elastic/eui';
 import React from 'react';
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 
 import { EMPTY_STAT } from '../constants';
 import { useDataQualityContext } from '../data_quality_context';
@@ -15,19 +15,25 @@ import * as i18n from '../stat_label/translations';
 import { Stat } from '../stat';
 import { getIncompatibleStatBadgeColor } from '../utils/get_incompatible_stat_badge_color';
 
-const StyledStatWrapperFlexItem = styled(EuiFlexItem)`
-  padding: 0 ${({ theme }) => theme.eui.euiSize};
-  border-right: ${({ theme }) => theme.eui.euiBorderThin};
-  border-color: ${({ theme }) => theme.eui.euiBorderColor};
+const useStyles = () => {
+  const { euiTheme } = useEuiTheme();
 
-  &:last-child {
-    padding-right: 0;
-    border-right: none;
-  }
-  &:first-child {
-    padding-left: 0;
-  }
-`;
+  return {
+    statWrapper: css({
+      padding: `0 ${euiTheme.size.base}`,
+      borderRight: euiTheme.border.thin,
+      borderColor: euiTheme.border.color,
+
+      '&:last-child': {
+        paddingRight: 0,
+        borderRight: 'none',
+      },
+      '&:first-child': {
+        paddingLeft: 0,
+      },
+    }),
+  };
+};
 
 interface Props {
   docsCount?: number;
@@ -46,6 +52,7 @@ const StatsRollupComponent: React.FC<Props> = ({
   pattern,
   sizeInBytes,
 }) => {
+  const styles = useStyles();
   const { formatNumber, formatBytes } = useDataQualityContext();
 
   return (
@@ -55,7 +62,7 @@ const StatsRollupComponent: React.FC<Props> = ({
       gutterSize="none"
       justifyContent="flexEnd"
     >
-      <StyledStatWrapperFlexItem grow={false}>
+      <EuiFlexItem css={styles.statWrapper} grow={false}>
         <Stat
           tooltipText={
             pattern != null
@@ -67,9 +74,9 @@ const StatsRollupComponent: React.FC<Props> = ({
         >
           {i18n.INCOMPATIBLE_FIELDS}
         </Stat>
-      </StyledStatWrapperFlexItem>
+      </EuiFlexItem>
 
-      <StyledStatWrapperFlexItem grow={false}>
+      <EuiFlexItem css={styles.statWrapper} grow={false}>
         <Stat
           tooltipText={
             pattern != null
@@ -80,9 +87,9 @@ const StatsRollupComponent: React.FC<Props> = ({
         >
           {i18n.INDICES_CHECKED}
         </Stat>
-      </StyledStatWrapperFlexItem>
+      </EuiFlexItem>
 
-      <StyledStatWrapperFlexItem grow={false}>
+      <EuiFlexItem css={styles.statWrapper} grow={false}>
         <Stat
           tooltipText={
             pattern != null ? i18n.TOTAL_INDICES_PATTERN_TOOL_TIP : i18n.TOTAL_INDICES_TOOL_TIP
@@ -91,10 +98,10 @@ const StatsRollupComponent: React.FC<Props> = ({
         >
           {i18n.INDICES}
         </Stat>
-      </StyledStatWrapperFlexItem>
+      </EuiFlexItem>
 
       {sizeInBytes != null && (
-        <StyledStatWrapperFlexItem grow={false}>
+        <EuiFlexItem css={styles.statWrapper} grow={false}>
           <Stat
             tooltipText={
               pattern != null ? i18n.TOTAL_SIZE_PATTERN_TOOL_TIP : i18n.TOTAL_SIZE_TOOL_TIP
@@ -103,10 +110,10 @@ const StatsRollupComponent: React.FC<Props> = ({
           >
             {i18n.SIZE}
           </Stat>
-        </StyledStatWrapperFlexItem>
+        </EuiFlexItem>
       )}
 
-      <StyledStatWrapperFlexItem grow={false}>
+      <EuiFlexItem css={styles.statWrapper} grow={false}>
         <Stat
           tooltipText={
             pattern != null ? i18n.TOTAL_DOCS_PATTERN_TOOL_TIP : i18n.TOTAL_DOCS_TOOL_TIP
@@ -115,7 +122,7 @@ const StatsRollupComponent: React.FC<Props> = ({
         >
           {i18n.DOCS}
         </Stat>
-      </StyledStatWrapperFlexItem>
+      </EuiFlexItem>
     </EuiFlexGroup>
   );
 };
diff --git a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/styles.tsx b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/styles.tsx
index d54ea9d6316e2..899f1060ac8cc 100644
--- a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/styles.tsx
+++ b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/styles.tsx
@@ -5,19 +5,14 @@
  * 2.0.
  */
 
-import { EuiCode } from '@elastic/eui';
-import { euiThemeVars } from '@kbn/ui-theme';
+import { UseEuiTheme } from '@elastic/eui';
 
-import styled from 'styled-components';
+import { CSSObject } from '@emotion/react';
 
-export const CodeDanger = styled(EuiCode)`
-  color: ${euiThemeVars.euiColorDanger};
-`;
+export const codeDangerCss = ({ euiTheme }: UseEuiTheme): CSSObject => ({
+  color: euiTheme.colors.danger,
+});
 
-export const CodeSuccess = styled(EuiCode)`
-  color: ${euiThemeVars.euiColorSuccess};
-`;
-
-export const CodeWarning = styled(EuiCode)`
-  color: ${euiThemeVars.euiColorWarning};
-`;
+export const codeSuccessCss = ({ euiTheme }: UseEuiTheme): CSSObject => ({
+  color: euiTheme.colors.success,
+});
diff --git a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/tsconfig.json b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/tsconfig.json
index 95cb9be72b6ce..9366cb7a478c9 100644
--- a/x-pack/solutions/security/packages/ecs_data_quality_dashboard/tsconfig.json
+++ b/x-pack/solutions/security/packages/ecs_data_quality_dashboard/tsconfig.json
@@ -5,16 +5,13 @@
     "types": [
       "jest",
       "node",
-      "react"
+      "react",
+      "@emotion/react/types/css-prop",
+      "../../../../../typings/emotion.d.ts"
     ]
   },
-  "include": [
-    "**/*.ts",
-    "**/*.tsx",
-  ],
-  "exclude": [
-    "target/**/*"
-  ],
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["target/**/*"],
   "kbn_references": [
     "@kbn/i18n",
     "@kbn/i18n-react",
@@ -26,6 +23,6 @@
     "@kbn/core",
     "@kbn/core-notifications-browser",
     "@kbn/core-notifications-browser-mocks",
-    "@kbn/ai-assistant-icon",
+    "@kbn/ai-assistant-icon"
   ]
 }