diff --git a/public/components/common/search/date_picker.tsx b/public/components/common/search/date_picker.tsx
index 95837ebe38..3ee3f2f787 100644
--- a/public/components/common/search/date_picker.tsx
+++ b/public/components/common/search/date_picker.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiSuperDatePicker } from '@elastic/eui';
+import { EuiCompressedSuperDatePicker } from '@elastic/eui';
 import React from 'react';
 import { uiSettingsService } from '../../../../common/utils';
 import { IDatePickerProps } from './search';
@@ -14,7 +14,7 @@ export function DatePicker(props: IDatePickerProps) {
   const handleTimeChange = (e: any) => handleTimePickerChange([e.start, e.end]);
 
   return (
-    <EuiSuperDatePicker
+    <EuiCompressedSuperDatePicker
       data-test-subj="pplSearchDatePicker"
       start={startTime}
       end={endTime}
diff --git a/public/components/custom_panels/custom_panel_view.tsx b/public/components/custom_panels/custom_panel_view.tsx
index 2944fec21a..5b74bc0556 100644
--- a/public/components/custom_panels/custom_panel_view.tsx
+++ b/public/components/custom_panels/custom_panel_view.tsx
@@ -20,7 +20,7 @@ import {
   EuiPageHeaderSection,
   EuiPopover,
   EuiSpacer,
-  EuiSuperDatePicker,
+  EuiCompressedSuperDatePicker,
   EuiTitle,
   OnTimeChangeProps,
   ShortDate,
@@ -683,7 +683,7 @@ export const CustomPanelView = (props: CustomPanelViewProps) => {
                 />
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
-                <EuiSuperDatePicker
+                <EuiCompressedSuperDatePicker
                   dateFormat={uiSettingsService.get('dateFormat')}
                   start={startTime}
                   end={endTime}
diff --git a/public/components/custom_panels/custom_panel_view_so.tsx b/public/components/custom_panels/custom_panel_view_so.tsx
index 4e50cca0e6..62f4efde0b 100644
--- a/public/components/custom_panels/custom_panel_view_so.tsx
+++ b/public/components/custom_panels/custom_panel_view_so.tsx
@@ -21,7 +21,7 @@ import {
   EuiPageHeaderSection,
   EuiPopover,
   EuiSpacer,
-  EuiSuperDatePicker,
+  EuiCompressedSuperDatePicker,
   EuiTitle,
   OnTimeChangeProps,
   ShortDate,
@@ -634,7 +634,7 @@ export const CustomPanelViewSO = (props: CustomPanelViewProps) => {
                 />
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
-                <EuiSuperDatePicker
+                <EuiCompressedSuperDatePicker
                   dateFormat={uiSettingsService.get('dateFormat')}
                   start={panel.timeRange.from}
                   end={panel.timeRange.to}
diff --git a/public/components/metrics/top_menu/top_menu.tsx b/public/components/metrics/top_menu/top_menu.tsx
index 43094fb7c9..92c7adf89d 100644
--- a/public/components/metrics/top_menu/top_menu.tsx
+++ b/public/components/metrics/top_menu/top_menu.tsx
@@ -8,7 +8,7 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiCompressedSelect,
-  EuiSuperDatePicker,
+  EuiCompressedSuperDatePicker,
 } from '@elastic/eui';
 import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
@@ -53,8 +53,7 @@ export const TopMenu = () => {
           <EuiFlexItem grow={false}>
             <EuiFlexGroup gutterSize="s">
               <EuiFlexItem grow={false} className="metrics-search-bar-datepicker">
-                <EuiSuperDatePicker
-                  compressed={true}
+                <EuiCompressedSuperDatePicker
                   dateFormat={uiSettingsService.get('dateFormat')}
                   start={dateSpanFilter.start}
                   end={dateSpanFilter.end}