diff --git a/src/platform/plugins/private/vis_types/timeseries/public/application/components/_series_editor.scss b/src/platform/plugins/private/vis_types/timeseries/public/application/components/_series_editor.scss
deleted file mode 100644
index 521855ddc9307..0000000000000
--- a/src/platform/plugins/private/vis_types/timeseries/public/application/components/_series_editor.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-.tvbSeriesEditor__container {
-  padding: $euiSize;
-}
-
-.tvbSeriesEditor {
-  margin-bottom: $euiSize;
-  padding: $euiSizeS;
-}
-
-.tvbSeries__body {
-  margin-left: $euiSizeXL;
-  margin-top: $euiSizeS;
-}
diff --git a/src/platform/plugins/private/vis_types/timeseries/public/application/components/_series_editor.ts b/src/platform/plugins/private/vis_types/timeseries/public/application/components/_series_editor.ts
new file mode 100644
index 0000000000000..870f07f1fece8
--- /dev/null
+++ b/src/platform/plugins/private/vis_types/timeseries/public/application/components/_series_editor.ts
@@ -0,0 +1,26 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import { type UseEuiTheme, useEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/react';
+import { useMemo } from 'react';
+
+const seriesBodyStyles = ({ euiTheme }: UseEuiTheme) =>
+  css({
+    marginLeft: euiTheme.size.xl,
+    marginTop: euiTheme.size.s,
+  });
+
+export const useSeriesBodyStyles = () => {
+  const euiThemeContext = useEuiTheme();
+  const styles = useMemo(() => {
+    return seriesBodyStyles(euiThemeContext);
+  }, [euiThemeContext]);
+  return styles;
+};
diff --git a/src/platform/plugins/private/vis_types/timeseries/public/application/components/series_editor.js b/src/platform/plugins/private/vis_types/timeseries/public/application/components/series_editor.js
index 15527614caed2..10703b742148c 100644
--- a/src/platform/plugins/private/vis_types/timeseries/public/application/components/series_editor.js
+++ b/src/platform/plugins/private/vis_types/timeseries/public/application/components/series_editor.js
@@ -16,11 +16,15 @@ import { handleAdd, handleDelete, handleChange } from './lib/collection_actions'
 import { newSeriesFn } from './lib/new_series_fn';
 import { EuiDragDropContext, EuiDroppable, EuiDraggable } from '@elastic/eui';
 import { reorder } from './lib/reorder';
-
-import './_series_editor.scss';
+import { css } from '@emotion/react';
 
 const DROPPABLE_ID = 'series_editor_dnd';
 
+const styles = ({ euiTheme }) => css`
+  margin-bottom: ${euiTheme.size.base};
+  padding: ${euiTheme.size.s};
+`;
+
 export class SeriesEditor extends Component {
   handleClone = (series) => {
     const newSeries = reIdSeries(series);
@@ -89,6 +93,7 @@ export class SeriesEditor extends Component {
               {(provided) => (
                 <Series
                   className="tvbSeriesEditor"
+                  css={styles}
                   colorPicker={colorPicker}
                   disableAdd={model[name].length >= limit}
                   disableDelete={model[name].length < 2}
diff --git a/src/platform/plugins/private/vis_types/timeseries/public/application/components/vis_types/gauge/series.js b/src/platform/plugins/private/vis_types/timeseries/public/application/components/vis_types/gauge/series.js
index 8fde7d01e9459..c1c75bf278763 100644
--- a/src/platform/plugins/private/vis_types/timeseries/public/application/components/vis_types/gauge/series.js
+++ b/src/platform/plugins/private/vis_types/timeseries/public/application/components/vis_types/gauge/series.js
@@ -27,6 +27,7 @@ import { SeriesDragHandler } from '../../series_drag_handler';
 import { createTextHandler } from '../../lib/create_text_handler';
 import { Aggs } from '../../aggs/aggs';
 import { tsvbEditorRowStyles, aggRowSplitStyles } from '../../../styles/common.styles';
+import { useSeriesBodyStyles } from '../../_series_editor';
 
 function GaugeSeriesUi(props) {
   const {
@@ -45,6 +46,7 @@ function GaugeSeriesUi(props) {
   } = props;
 
   const { euiTheme } = useEuiTheme();
+  const seriesBodyStyles = useSeriesBodyStyles();
 
   const defaults = { label: '' };
   const model = { ...defaults, ...props.model };
@@ -92,7 +94,7 @@ function GaugeSeriesUi(props) {
       );
     }
     body = (
-      <div className="tvbSeries__body">
+      <div className="tvbSeries__body" css={seriesBodyStyles}>
         <EuiTabs size="s">
           <EuiTab isSelected={selectedTab === 'metrics'} onClick={() => props.switchTab('metrics')}>
             <FormattedMessage
diff --git a/src/platform/plugins/private/vis_types/timeseries/public/application/components/vis_types/markdown/series.js b/src/platform/plugins/private/vis_types/timeseries/public/application/components/vis_types/markdown/series.js
index 767be6e1cfe3c..0893a8dab0890 100644
--- a/src/platform/plugins/private/vis_types/timeseries/public/application/components/vis_types/markdown/series.js
+++ b/src/platform/plugins/private/vis_types/timeseries/public/application/components/vis_types/markdown/series.js
@@ -26,6 +26,7 @@ import { createTextHandler } from '../../lib/create_text_handler';
 import { Aggs } from '../../aggs/aggs';
 import { SeriesDragHandler } from '../../series_drag_handler';
 import { tsvbEditorRowStyles, aggRowSplitStyles } from '../../../styles/common.styles';
+import { useSeriesBodyStyles } from '../../_series_editor';
 
 function MarkdownSeriesUi(props) {
   const {
@@ -44,6 +45,7 @@ function MarkdownSeriesUi(props) {
   } = props;
 
   const { euiTheme } = useEuiTheme();
+  const seriesBodyStyles = useSeriesBodyStyles();
 
   const defaults = { label: '', var_name: '' };
   const model = { ...defaults, ...props.model };
@@ -91,7 +93,7 @@ function MarkdownSeriesUi(props) {
       );
     }
     body = (
-      <div className="tvbSeries__body">
+      <div className="tvbSeries__body" css={seriesBodyStyles}>
         <EuiTabs size="s">
           <EuiTab isSelected={selectedTab === 'metrics'} onClick={() => props.switchTab('metrics')}>
             <FormattedMessage
diff --git a/src/platform/plugins/private/vis_types/timeseries/public/application/components/vis_types/metric/series.js b/src/platform/plugins/private/vis_types/timeseries/public/application/components/vis_types/metric/series.js
index 5bd5b22c71abc..554416e9ad2f6 100644
--- a/src/platform/plugins/private/vis_types/timeseries/public/application/components/vis_types/metric/series.js
+++ b/src/platform/plugins/private/vis_types/timeseries/public/application/components/vis_types/metric/series.js
@@ -27,6 +27,7 @@ import { Split } from '../../split';
 import { SeriesDragHandler } from '../../series_drag_handler';
 import { createTextHandler } from '../../lib/create_text_handler';
 import { Aggs } from '../../aggs/aggs';
+import { useSeriesBodyStyles } from '../../_series_editor';
 
 function MetricSeriesUi(props) {
   const {
@@ -45,6 +46,7 @@ function MetricSeriesUi(props) {
   } = props;
 
   const { euiTheme } = useEuiTheme();
+  const seriesBodyStyles = useSeriesBodyStyles();
 
   const defaults = { label: '' };
   const model = { ...defaults, ...props.model };
@@ -92,7 +94,7 @@ function MetricSeriesUi(props) {
       );
     }
     body = (
-      <div className="tvbSeries__body">
+      <div className="tvbSeries__body" css={seriesBodyStyles}>
         <EuiTabs size="s">
           <EuiTab isSelected={selectedTab === 'metrics'} onClick={() => props.switchTab('metrics')}>
             <FormattedMessage
diff --git a/src/platform/plugins/private/vis_types/timeseries/public/application/components/vis_types/table/series.js b/src/platform/plugins/private/vis_types/timeseries/public/application/components/vis_types/table/series.js
index 8e4dd0c5f01ab..c8f9d3b81642c 100644
--- a/src/platform/plugins/private/vis_types/timeseries/public/application/components/vis_types/table/series.js
+++ b/src/platform/plugins/private/vis_types/timeseries/public/application/components/vis_types/table/series.js
@@ -23,6 +23,7 @@ import {
 import { createTextHandler } from '../../lib/create_text_handler';
 import { FormattedMessage, injectI18n } from '@kbn/i18n-react';
 import { Aggs } from '../../aggs/aggs';
+import { useSeriesBodyStyles } from '../../_series_editor';
 
 function TableSeriesUI(props) {
   const {
@@ -41,6 +42,8 @@ function TableSeriesUI(props) {
     uiRestrictions,
   } = props;
 
+  const seriesBodyStyles = useSeriesBodyStyles();
+
   const handleChange = createTextHandler(onChange);
 
   let caretIcon = 'arrowDown';
@@ -76,7 +79,7 @@ function TableSeriesUI(props) {
       );
     }
     body = (
-      <div className="tvbSeries__body">
+      <div className="tvbSeries__body" css={seriesBodyStyles}>
         <EuiTabs size="s">
           <EuiTab isSelected={selectedTab === 'metrics'} onClick={() => props.switchTab('metrics')}>
             <FormattedMessage
diff --git a/src/platform/plugins/private/vis_types/timeseries/public/application/components/vis_types/timeseries/series.js b/src/platform/plugins/private/vis_types/timeseries/public/application/components/vis_types/timeseries/series.js
index 81cf97c6d8aca..2c9a77751f688 100644
--- a/src/platform/plugins/private/vis_types/timeseries/public/application/components/vis_types/timeseries/series.js
+++ b/src/platform/plugins/private/vis_types/timeseries/public/application/components/vis_types/timeseries/series.js
@@ -27,6 +27,7 @@ import { SeriesDragHandler } from '../../series_drag_handler';
 import { Split } from '../../split';
 import { createTextHandler } from '../../lib/create_text_handler';
 import { tsvbEditorRowStyles, aggRowSplitStyles } from '../../../styles/common.styles';
+import { useSeriesBodyStyles } from '../../_series_editor';
 
 const TimeseriesSeriesUI = injectI18n(function (props) {
   const {
@@ -46,6 +47,7 @@ const TimeseriesSeriesUI = injectI18n(function (props) {
   } = props;
 
   const { euiTheme } = useEuiTheme();
+  const seriesBodyStyles = useSeriesBodyStyles();
 
   const defaults = {
     label: '',
@@ -98,7 +100,7 @@ const TimeseriesSeriesUI = injectI18n(function (props) {
       );
     }
     body = (
-      <div className="tvbSeries__body">
+      <div className="tvbSeries__body" css={seriesBodyStyles}>
         <EuiTabs size="s">
           <EuiTab isSelected={selectedTab === 'metrics'} onClick={() => props.switchTab('metrics')}>
             <FormattedMessage
diff --git a/src/platform/plugins/private/vis_types/timeseries/public/application/components/vis_types/top_n/series.js b/src/platform/plugins/private/vis_types/timeseries/public/application/components/vis_types/top_n/series.js
index 09ee92d94553f..aa538779e1b4b 100644
--- a/src/platform/plugins/private/vis_types/timeseries/public/application/components/vis_types/top_n/series.js
+++ b/src/platform/plugins/private/vis_types/timeseries/public/application/components/vis_types/top_n/series.js
@@ -27,6 +27,7 @@ import { SeriesDragHandler } from '../../series_drag_handler';
 import { createTextHandler } from '../../lib/create_text_handler';
 import { Aggs } from '../../aggs/aggs';
 import { tsvbEditorRowStyles, aggRowSplitStyles } from '../../../styles/common.styles';
+import { useSeriesBodyStyles } from '../../_series_editor';
 
 export const TopNSeries = injectI18n(function (props) {
   const {
@@ -46,6 +47,7 @@ export const TopNSeries = injectI18n(function (props) {
   } = props;
 
   const { euiTheme } = useEuiTheme();
+  const seriesBodyStyles = useSeriesBodyStyles();
 
   const handleChange = createTextHandler(onChange);
 
@@ -90,7 +92,7 @@ export const TopNSeries = injectI18n(function (props) {
       );
     }
     body = (
-      <div className="tvbSeries__body">
+      <div className="tvbSeries__body" css={seriesBodyStyles}>
         <EuiTabs size="s">
           <EuiTab isSelected={selectedTab === 'metrics'} onClick={() => props.switchTab('metrics')}>
             <FormattedMessage