diff --git a/src/platform/plugins/private/vis_types/timeseries/public/application/components/_annotations_editor.scss b/src/platform/plugins/private/vis_types/timeseries/public/application/components/_annotations_editor.scss
deleted file mode 100644
index 686de89e9db6e..0000000000000
--- a/src/platform/plugins/private/vis_types/timeseries/public/application/components/_annotations_editor.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-.tvbAnnotationsEditor__container {
-  padding: $euiSize;
-  background-color: $euiColorLightestShade;
-}
-
-.tvbAnnotationsEditor {
-  margin-bottom: $euiSize;
-  padding: $euiSizeS;
-}
diff --git a/src/platform/plugins/private/vis_types/timeseries/public/application/components/annotation_row.tsx b/src/platform/plugins/private/vis_types/timeseries/public/application/components/annotation_row.tsx
index 75cc813dec1ca..f0fc5d9b346d2 100644
--- a/src/platform/plugins/private/vis_types/timeseries/public/application/components/annotation_row.tsx
+++ b/src/platform/plugins/private/vis_types/timeseries/public/application/components/annotation_row.tsx
@@ -24,6 +24,7 @@ import { FormattedMessage } from '@kbn/i18n-react';
 
 import type { Query } from '@kbn/es-query';
 import { KBN_FIELD_TYPES } from '@kbn/data-plugin/public';
+import { css } from '@emotion/react';
 import { getDataViewsStart } from '../../services';
 
 import { AddDeleteButtons } from './add_delete_buttons';
@@ -49,6 +50,17 @@ const RESTRICT_FIELDS = [KBN_FIELD_TYPES.DATE];
 const INDEX_PATTERN_KEY = 'index_pattern';
 const TIME_FIELD_KEY = 'time_field';
 
+const useEditorStyles = () => {
+  const { euiTheme } = useEuiTheme();
+  const styles = useMemo(() => {
+    return css({
+      marginBottom: euiTheme.size.base,
+      padding: euiTheme.size.s,
+    });
+  }, [euiTheme]);
+  return styles;
+};
+
 export interface AnnotationRowProps {
   annotation: Annotation;
   fields: VisFields;
@@ -77,6 +89,7 @@ export const AnnotationRow = ({
   const [fetchedIndex, setFetchedIndex] = useState<IndexPatternSelectProps['fetchedIndex']>(null);
 
   const { euiTheme } = useEuiTheme();
+  const editorStyles = useEditorStyles();
 
   useEffect(() => {
     const updateFetchedIndex = async (index: IndexPatternValue) => {
@@ -133,7 +146,7 @@ export const AnnotationRow = ({
   );
 
   return (
-    <div className="tvbAnnotationsEditor" key={model.id}>
+    <div className="tvbAnnotationsEditor" key={model.id} css={editorStyles}>
       <EuiFlexGroup responsive={false}>
         <EuiFlexItem grow={false}>
           <ColorPicker disableTrash={true} onChange={onChange} name="color" value={model.color} />
diff --git a/src/platform/plugins/private/vis_types/timeseries/public/application/components/annotations_editor.tsx b/src/platform/plugins/private/vis_types/timeseries/public/application/components/annotations_editor.tsx
index 8ab3eceb9e95a..0c8fa0f354521 100644
--- a/src/platform/plugins/private/vis_types/timeseries/public/application/components/annotations_editor.tsx
+++ b/src/platform/plugins/private/vis_types/timeseries/public/application/components/annotations_editor.tsx
@@ -7,19 +7,29 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { v4 as uuidv4 } from 'uuid';
-import { EuiSpacer, EuiTitle, EuiButton, EuiText } from '@elastic/eui';
+import { EuiSpacer, EuiTitle, EuiButton, EuiText, useEuiTheme } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import type { DataView } from '@kbn/data-views-plugin/public';
 
+import { css } from '@emotion/react';
 import { AnnotationRow } from './annotation_row';
 import { collectionActions, CollectionActionsProps } from './lib/collection_actions';
 
 import type { Panel, Annotation } from '../../../common/types';
 import type { VisFields } from '../lib/fetch_fields';
 
-import './_annotations_editor.scss';
+const useContainerStyles = () => {
+  const { euiTheme } = useEuiTheme();
+  const styles = useMemo(() => {
+    return css({
+      padding: euiTheme.size.base,
+      backgroundColor: euiTheme.colors.lightestShade,
+    });
+  }, [euiTheme]);
+  return styles;
+};
 
 interface AnnotationsEditorProps {
   fields: VisFields;
@@ -65,6 +75,8 @@ const getCollectionActionsProps = (props: AnnotationsEditorProps) =>
 export const AnnotationsEditor = (props: AnnotationsEditorProps) => {
   const { annotations } = props.model;
 
+  const containerStyles = useContainerStyles();
+
   const handleAdd = useCallback(
     () =>
       collectionActions.handleAdd(
@@ -92,7 +104,7 @@ export const AnnotationsEditor = (props: AnnotationsEditorProps) => {
   );
 
   return (
-    <div className="tvbAnnotationsEditor__container">
+    <div className="tvbAnnotationsEditor__container" css={containerStyles}>
       {annotations?.length ? (
         <div>
           <EuiTitle size="s">