diff --git a/x-pack/plugins/ml/public/application/_index.scss b/x-pack/plugins/ml/public/application/_index.scss
index 95fbbf4cb112..029a422afaa9 100644
--- a/x-pack/plugins/ml/public/application/_index.scss
+++ b/x-pack/plugins/ml/public/application/_index.scss
@@ -5,7 +5,6 @@
 // SASSTODO: Prefix ml selectors instead
 .ml-app {
   // Sub applications
-  @import 'data_frame_analytics/index';
   @import 'explorer/index'; // SASSTODO: This file needs to be rewritten
 
   // Components
@@ -16,4 +15,4 @@
   @import 'components/job_selector/index';
   @import 'components/rule_editor/index'; // SASSTODO: This file overwrites EUI directly
 
-}
+}
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/_index.scss b/x-pack/plugins/ml/public/application/data_frame_analytics/_index.scss
deleted file mode 100644
index 9b97275417d5..000000000000
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/_index.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-@import 'pages/job_map/components/index';
-@import 'pages/analytics_management/components/analytics_list/index';
-@import 'pages/analytics_creation/components/index';
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/_index.scss b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/_index.scss
deleted file mode 100644
index 28d0928eb4d3..000000000000
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/_index.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.dfAnalyticsCreationWizard__card {
-  width: 300px;
-}
diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/back_to_list_panel/back_to_list_panel.tsx b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/back_to_list_panel/back_to_list_panel.tsx
index 93d7fddeea36..291d0d1881b1 100644
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/back_to_list_panel/back_to_list_panel.tsx
+++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/back_to_list_panel/back_to_list_panel.tsx
@@ -20,7 +20,7 @@ export const BackToListPanel: FC = () => {
   return (
     <Fragment>
       <EuiCard
-        className="dfAnalyticsCreationWizard__card"
+        css={{ width: '300px' }}
         icon={<EuiIcon size="xxl" type="list" />}
         title={i18n.translate('xpack.ml.dataframe.analytics.create.analyticsListCardTitle', {
           defaultMessage: 'Data Frame Analytics',
diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/view_results_panel/view_results_panel.tsx b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/view_results_panel/view_results_panel.tsx
index a6b88e13ef69..94ed7e6f9d79 100644
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/view_results_panel/view_results_panel.tsx
+++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/view_results_panel/view_results_panel.tsx
@@ -7,7 +7,7 @@
 
 import type { FC } from 'react';
 import React, { Fragment } from 'react';
-import { EuiCard, EuiIcon } from '@elastic/eui';
+import { EuiCard, EuiIcon, useEuiTheme } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import type { DataFrameAnalysisConfigType } from '@kbn/ml-data-frame-analytics-utils';
 import { useMlLink } from '../../../../../contexts/kibana';
@@ -26,10 +26,14 @@ export const ViewResultsPanel: FC<Props> = ({ jobId, analysisType }) => {
     },
   });
 
+  const {
+    euiTheme: { size },
+  } = useEuiTheme();
+
   return (
     <Fragment>
       <EuiCard
-        className="dfAnalyticsCreationWizard__card"
+        css={{ width: `calc(${size.xxl} * 7.5)` }}
         icon={<EuiIcon size="xxl" type="visTable" />}
         title={i18n.translate('xpack.ml.dataframe.analytics.create.viewResultsCardTitle', {
           defaultMessage: 'View Results',
diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/_analytics_table.scss b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/_analytics_table.scss
deleted file mode 100644
index e0c746545a54..000000000000
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/_analytics_table.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-.mlAnalyticsTable {
-  // Using an override as a last resort because we cannot set custom classes on
-  // nested upstream components. The opening animation limits the height
-  // of the expanded row to 1000px which turned out to be not predictable.
-  // The animation could also result in flickering with expanded rows
-  // where the inner content would result in the DOM changing the height.
-  .euiTableRow-isExpandedRow .euiTableCellContent {
-    animation: none !important;
-    .euiTableCellContent__text {
-      width: 100%;
-    }
-  }
-  // Another override: Because an update to the table replaces the DOM, the same
-  // icon would still again fade in with an animation. If the table refreshes with
-  // e.g. 1s this would result in a blinking icon effect.
-  .euiIcon[data-is-loaded] {
-    animation: none !important;
-  }
-}
-
-.mlTaskStateBadge, .mlTaskModeBadge {
-  max-width: 100px;
-}
diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/_index.scss b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/_index.scss
deleted file mode 100644
index 8e8837b878a9..000000000000
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import 'analytics_table';
diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row_details_pane.tsx b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row_details_pane.tsx
index 2c9a79fbc1c0..a2d759d21e77 100644
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row_details_pane.tsx
+++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row_details_pane.tsx
@@ -42,16 +42,17 @@ export const OverallDetails: FC<{
 }> = ({ overallDetails }) => (
   <EuiFlexGroup alignItems="center" wrap data-test-subj={overallDetails.dataTestSubj}>
     {overallDetails.items.map((item) => {
+      const key = item.title;
       if (item.title === 'badge') {
         return (
-          <EuiFlexItem grow={false}>
+          <EuiFlexItem grow={false} key={key}>
             <EuiBetaBadge label={item.description} color="subdued" title={item.title} />
           </EuiFlexItem>
         );
       }
 
       return (
-        <EuiFlexItem grow={false}>
+        <EuiFlexItem grow={false} key={key}>
           <EuiFlexGroup gutterSize="xs">
             <EuiFlexItem grow={false}>
               <EuiDescriptionListDescription className="descriptionListTitle">
@@ -82,7 +83,7 @@ export const Stats = ({ section }: { section: SectionConfig }) => (
     <EuiFlexItem grow={false}>
       <EuiFlexGroup>
         {section.items.map((item) => (
-          <EuiFlexItem grow={false}>
+          <EuiFlexItem grow={false} key={item.title}>
             <EuiDescriptionListDescription className="descriptionListTitle">
               <EuiText size="xs">{item.title}</EuiText>
             </EuiDescriptionListDescription>
@@ -200,10 +201,10 @@ export const ExpandedRowDetailsPane: FC<ExpandedRowDetailsPaneProps> = ({
               </EuiTitle>
               <EuiSpacer size="xs" />
               {progress.items.map((item) => (
-                <>
+                <span key={item.title}>
                   {item.description}
                   <EuiSpacer size="s" />
-                </>
+                </span>
               ))}
             </EuiFlexItem>
             <EuiFlexItem grow={3}>
diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row_messages_pane.scss b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row_messages_pane.scss
deleted file mode 100644
index 9a169f6856f3..000000000000
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row_messages_pane.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-.mlExpandedRowJobMessages {
-  padding: 0 $euiSizeS $euiSizeS $euiSizeS;
-}
-
-/* override ML legacy class "job-messages-table" */
-.mlExpandedRowJobMessages .euiTable, .mlExpandedRowJobMessages .euiTableRowCell {
-  background-color: transparent !important;
-}
diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row_messages_pane.tsx b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row_messages_pane.tsx
index ed16443cff7b..8b0a2177e50c 100644
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row_messages_pane.tsx
+++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/expanded_row_messages_pane.tsx
@@ -5,11 +5,11 @@
  * 2.0.
  */
 
-import './expanded_row_messages_pane.scss';
-
 import type { FC } from 'react';
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
+import { useEuiTheme } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
+import { css } from '@emotion/react';
 import { useMlApi } from '../../../../../contexts/kibana';
 import { useRefreshAnalyticsList } from '../../../../common';
 import { JobMessages } from '../../../../../components/job_messages';
@@ -23,6 +23,21 @@ interface Props {
 
 export const ExpandedRowMessagesPane: FC<Props> = ({ analyticsId, dataTestSubj }) => {
   const mlApi = useMlApi();
+  const {
+    euiTheme: { size },
+  } = useEuiTheme();
+
+  const cssOverride = useMemo(
+    () =>
+      css({
+        padding: `0 ${size.s} ${size.s} ${size.s}`,
+        '.euiTable': {
+          backgroundColor: 'transparent',
+        },
+      }),
+    [size.s]
+  );
+
   const [messages, setMessages] = useState<JobMessage[]>([]);
   const [isLoading, setIsLoading] = useState(false);
   const [errorMessage, setErrorMessage] = useState('');
@@ -63,7 +78,7 @@ export const ExpandedRowMessagesPane: FC<Props> = ({ analyticsId, dataTestSubj }
   useRefreshAnalyticsList({ onRefresh: getMessages });
 
   return (
-    <div className="mlExpandedRowJobMessages" data-test-subj={dataTestSubj}>
+    <div data-test-subj={dataTestSubj} css={cssOverride}>
       <JobMessages
         messages={messages}
         loading={isLoading}
diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/use_columns.tsx b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/use_columns.tsx
index fb9731c347ac..8429f3861632 100644
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/use_columns.tsx
+++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/use_columns.tsx
@@ -49,6 +49,10 @@ enum TASK_STATE_COLOR {
   stopping = 'hollow',
 }
 
+const badgeStyle = {
+  maxWidth: '100px',
+};
+
 export const getTaskStateBadge = (
   state: DataFrameAnalyticsStats['state'],
   failureReason?: DataFrameAnalyticsStats['failure_reason']
@@ -58,7 +62,7 @@ export const getTaskStateBadge = (
   if (isDataFrameAnalyticsFailed(state) && failureReason !== undefined) {
     return (
       <EuiToolTip content={failureReason}>
-        <EuiBadge className="mlTaskStateBadge" color={color}>
+        <EuiBadge css={badgeStyle} color={color}>
           {state}
         </EuiBadge>
       </EuiToolTip>
@@ -66,14 +70,14 @@ export const getTaskStateBadge = (
   }
 
   return (
-    <EuiBadge className="mlTaskStateBadge" color={color}>
+    <EuiBadge css={badgeStyle} color={color}>
       {state}
     </EuiBadge>
   );
 };
 
 export const getJobTypeBadge = (jobType: string) => (
-  <EuiBadge className="mlTaskStateBadge" color="hollow">
+  <EuiBadge css={badgeStyle} color="hollow">
     {jobType}
   </EuiBadge>
 );
diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/job_map/components/_index.scss b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/job_map/components/_index.scss
deleted file mode 100644
index 2bcc91f34d38..000000000000
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/job_map/components/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import 'legend';
diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/job_map/components/_legend.scss b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/job_map/components/_legend.scss
deleted file mode 100644
index 7e7168595a44..000000000000
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/job_map/components/_legend.scss
+++ /dev/null
@@ -1,56 +0,0 @@
-.mlJobMapLegend__container {
-  background-color: '#FFFFFF';
-}
-
-.mlJobMapLegend__indexPattern {
-  height: $euiSizeM;
-  width: $euiSizeM;
-  background-color: $euiColorGhost;
-  border: $euiBorderWidthThick solid $euiColorVis2;
-  transform: rotate(45deg);
-  display: 'inline-block';
-}
-
-.mlJobMapLegend__ingestPipeline {
-  height: $euiSizeM;
-  width: $euiSizeM;
-  background-color: $euiColorGhost;
-  border: $euiBorderWidthThick solid $euiColorVis7;
-  border-radius: $euiBorderRadiusSmall;
-  display: 'inline-block';
-}
-
-.mlJobMapLegend__transform {
-  height: $euiSizeM;
-  width: $euiSizeM;
-  background-color: $euiColorGhost;
-  border: $euiBorderWidthThick solid $euiColorVis1;
-  display: 'inline-block';
-}
-
-.mlJobMapLegend__analytics {
-  height: $euiSizeM;
-  width: $euiSizeM;
-  background-color: $euiColorGhost;
-  border: $euiBorderWidthThick solid $euiColorVis0;
-  border-radius: 50%;
-  display: 'inline-block';
-}
-
-.mlJobMapLegend__analyticsMissing {
-  height: $euiSizeM;
-  width: $euiSizeM;
-  background-color: $euiColorGhost;
-  border: $euiBorderWidthThick solid $euiColorFullShade;
-  border-radius: 50%;
-  display: 'inline-block';
-}
-
-.mlJobMapLegend__sourceNode {
-  height: $euiSizeM;
-  width: $euiSizeM;
-  background-color: $euiColorWarning;
-  border: $euiBorderThin;
-  border-radius: $euiBorderRadius;
-  display: 'inline-block';
-}
\ No newline at end of file
diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/job_map/components/legend.tsx b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/job_map/components/legend.tsx
index 8496e97382f6..cf22e9a3f275 100644
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/job_map/components/legend.tsx
+++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/job_map/components/legend.tsx
@@ -6,7 +6,7 @@
  */
 
 import type { FC } from 'react';
-import React, { useState } from 'react';
+import React, { useState, useMemo } from 'react';
 import { i18n } from '@kbn/i18n';
 import {
   EuiButtonIcon,
@@ -38,17 +38,41 @@ export const JobMapLegend: FC<{ hasMissingJobNode: boolean; theme: EuiThemeType
   theme,
 }) => {
   const [showJobTypes, setShowJobTypes] = useState<boolean>(false);
+  const {
+    euiSizeM,
+    euiSizeS,
+    euiColorGhost,
+    euiColorWarning,
+    euiBorderThin,
+    euiBorderRadius,
+    euiBorderRadiusSmall,
+    euiBorderWidthThick,
+  } = theme;
+
+  const cssOverrideBase = useMemo(
+    () => ({
+      height: euiSizeM,
+      width: euiSizeM,
+      backgroundColor: euiColorGhost,
+      display: 'inline-block',
+    }),
+    [euiSizeM, euiColorGhost]
+  );
 
   return (
-    <EuiFlexGroup
-      className="mlJobMapLegend__container"
-      alignItems="center"
-      data-test-subj="mlPageDataFrameAnalyticsMapLegend"
-    >
+    <EuiFlexGroup alignItems="center" data-test-subj="mlPageDataFrameAnalyticsMapLegend">
       <EuiFlexItem grow={false}>
         <EuiFlexGroup gutterSize="xs" alignItems="center">
           <EuiFlexItem grow={false}>
-            <span className="mlJobMapLegend__sourceNode" />
+            <span
+              data-test-subj="mlJobMapLegend__sourceNode"
+              css={{
+                ...cssOverrideBase,
+                backgroundColor: euiColorWarning,
+                border: euiBorderThin,
+                borderRadius: euiBorderRadius,
+              }}
+            />
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
             <EuiText size="xs" color="subdued">
@@ -63,7 +87,14 @@ export const JobMapLegend: FC<{ hasMissingJobNode: boolean; theme: EuiThemeType
       <EuiFlexItem grow={false}>
         <EuiFlexGroup gutterSize="xs" alignItems="center">
           <EuiFlexItem grow={false}>
-            <span className="mlJobMapLegend__indexPattern" />
+            <span
+              data-test-subj="mlJobMapLegend__indexPattern"
+              css={{
+                ...cssOverrideBase,
+                border: `${euiBorderWidthThick} solid ${theme.euiColorVis2}`,
+                transform: 'rotate(45deg)',
+              }}
+            />
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
             <EuiText size="xs" color="subdued">
@@ -78,7 +109,14 @@ export const JobMapLegend: FC<{ hasMissingJobNode: boolean; theme: EuiThemeType
       <EuiFlexItem grow={false}>
         <EuiFlexGroup gutterSize="xs" alignItems="center">
           <EuiFlexItem grow={false}>
-            <span className="mlJobMapLegend__ingestPipeline" />
+            <span
+              data-test-subj="mlJobMapLegend__ingestPipeline"
+              css={{
+                ...cssOverrideBase,
+                border: `${euiBorderWidthThick} solid ${theme.euiColorVis7}`,
+                borderRadius: euiBorderRadiusSmall,
+              }}
+            />
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
             <EuiText size="xs" color="subdued">
@@ -93,7 +131,13 @@ export const JobMapLegend: FC<{ hasMissingJobNode: boolean; theme: EuiThemeType
       <EuiFlexItem grow={false}>
         <EuiFlexGroup gutterSize="xs" alignItems="center">
           <EuiFlexItem grow={false}>
-            <span className="mlJobMapLegend__transform" />
+            <span
+              data-test-subj="mlJobMapLegend__transform"
+              css={{
+                ...cssOverrideBase,
+                border: `${euiBorderWidthThick} solid ${theme.euiColorVis1}`,
+              }}
+            />
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
             <EuiText size="xs" color="subdued">
@@ -110,9 +154,9 @@ export const JobMapLegend: FC<{ hasMissingJobNode: boolean; theme: EuiThemeType
                 display: 'inline-block',
                 width: '0px',
                 height: '0px',
-                borderLeft: `${theme.euiSizeS} solid ${theme.euiPageBackgroundColor}`,
-                borderRight: `${theme.euiSizeS} solid ${theme.euiPageBackgroundColor}`,
-                borderBottom: `${theme.euiSizeM} solid ${theme.euiColorVis3}`,
+                borderLeft: `${euiSizeS} solid ${theme.euiPageBackgroundColor}`,
+                borderRight: `${euiSizeS} solid ${theme.euiPageBackgroundColor}`,
+                borderBottom: `${euiSizeM} solid ${theme.euiColorVis3}`,
               }}
             />
           </EuiFlexItem>
@@ -130,7 +174,14 @@ export const JobMapLegend: FC<{ hasMissingJobNode: boolean; theme: EuiThemeType
         <EuiFlexItem grow={false}>
           <EuiFlexGroup gutterSize="xs" alignItems="center">
             <EuiFlexItem grow={false}>
-              <span className="mlJobMapLegend__analyticsMissing" />
+              <span
+                data-test-subj="mlJobMapLegend__analyticsMissing"
+                css={{
+                  ...cssOverrideBase,
+                  border: `${euiBorderWidthThick} solid ${theme.euiColorFullShade}`,
+                  borderRadius: '50%',
+                }}
+              />
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
               <EuiText size="xs" color="subdued">
@@ -146,7 +197,14 @@ export const JobMapLegend: FC<{ hasMissingJobNode: boolean; theme: EuiThemeType
       <EuiFlexItem grow={false}>
         <EuiFlexGroup gutterSize="xs" alignItems="center">
           <EuiFlexItem grow={false}>
-            <span className="mlJobMapLegend__analytics" />
+            <span
+              data-test-subj="mlJobMapLegend__analytics"
+              css={{
+                ...cssOverrideBase,
+                border: `${euiBorderWidthThick} solid ${theme.euiColorVis0}`,
+                borderRadius: '50%',
+              }}
+            />
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
             <EuiFlexGroup gutterSize="xs" alignItems="center">
diff --git a/x-pack/plugins/ml/public/application/overview/components/analytics_panel/table.tsx b/x-pack/plugins/ml/public/application/overview/components/analytics_panel/table.tsx
index 5e24dd230ae8..e37357930a9b 100644
--- a/x-pack/plugins/ml/public/application/overview/components/analytics_panel/table.tsx
+++ b/x-pack/plugins/ml/public/application/overview/components/analytics_panel/table.tsx
@@ -110,7 +110,6 @@ export const AnalyticsTable: FC<Props> = ({ items }) => {
   return (
     <EuiInMemoryTable<DataFrameAnalyticsListRow>
       allowNeutralSort={false}
-      className="mlAnalyticsTable"
       columns={columns}
       items={items}
       itemId={DataFrameAnalyticsListColumn.id}