diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRefreshInterval_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRefreshInterval_Playground.png
index 90b57c8c021..b89d7fae227 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRefreshInterval_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRefreshInterval_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Quick_Select_Panel.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Quick_Select_Panel.png
index 94a83b4771c..0ed7e06c6d5 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Quick_Select_Panel.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Quick_Select_Panel.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Playground.png
index 94a83b4771c..0ed7e06c6d5 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRefreshInterval_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRefreshInterval_Playground.png
index 6f44f42f1ad..4eff6fb0bb5 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRefreshInterval_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRefreshInterval_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Quick_Select_Panel.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Quick_Select_Panel.png
index 05460196756..fa3393a4c64 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Quick_Select_Panel.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Quick_Select_Panel.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Playground.png
index 05460196756..fa3393a4c64 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Playground.png differ
diff --git a/packages/eui/changelogs/upcoming/7909.md b/packages/eui/changelogs/upcoming/7909.md
new file mode 100644
index 00000000000..4856688794e
--- /dev/null
+++ b/packages/eui/changelogs/upcoming/7909.md
@@ -0,0 +1,3 @@
+**CSS-in-JS conversions**
+
+- Converted `EuiSuperDatePicker`'s quick select to Emotion
diff --git a/packages/eui/src/components/date_picker/_index.scss b/packages/eui/src/components/date_picker/_index.scss
index 08789b2448c..8054cc5308d 100644
--- a/packages/eui/src/components/date_picker/_index.scss
+++ b/packages/eui/src/components/date_picker/_index.scss
@@ -1,3 +1,2 @@
 // The react-date-picker overrides exists in the global_styling folder
 // to easily style differently between default and Amsterdam theme
-@import 'super_date_picker/index';
diff --git a/packages/eui/src/components/date_picker/auto_refresh/refresh_interval.tsx b/packages/eui/src/components/date_picker/auto_refresh/refresh_interval.tsx
index 9de28b0775e..9ace43ef5f0 100644
--- a/packages/eui/src/components/date_picker/auto_refresh/refresh_interval.tsx
+++ b/packages/eui/src/components/date_picker/auto_refresh/refresh_interval.tsx
@@ -11,15 +11,18 @@ import React, {
   ChangeEventHandler,
   KeyboardEventHandler,
 } from 'react';
+
+import { htmlIdGenerator } from '../../../services';
 import { EuiI18n } from '../../i18n';
 import { EuiFlexGroup, EuiFlexItem } from '../../flex';
 import { EuiSelect, EuiFieldNumber, EuiFormLabel, EuiSwitch } from '../../form';
-import { htmlIdGenerator } from '../../../services';
 import { EuiScreenReaderOnly } from '../../accessibility';
+
 import {
   RenderI18nTimeOptions,
   TimeOptions,
 } from '../super_date_picker/time_options';
+import { EuiQuickSelectPanel } from '../super_date_picker/quick_select_popover/quick_select_panel';
 import {
   Milliseconds,
   RefreshUnitsOptions,
@@ -127,7 +130,6 @@ export class EuiRefreshInterval extends Component<
   };
 
   generateId = htmlIdGenerator();
-  legendId = this.generateId();
   refreshSelectionId = this.generateId();
 
   onValueChange: ChangeEventHandler<HTMLInputElement> = (event) => {
@@ -247,66 +249,84 @@ export class EuiRefreshInterval extends Component<
     const { value, units, min } = this.state;
 
     return (
-      <RenderI18nTimeOptions>
-        {({ refreshUnitsOptions }) => (
-          <fieldset className="euiQuickSelectPopover__panel">
-            <EuiFlexGroup
-              alignItems="center"
-              gutterSize="s"
-              responsive={false}
-              wrap
-            >
-              <EuiFlexItem grow={false}>
-                <EuiSwitch
-                  data-test-subj="superDatePickerToggleRefreshButton"
-                  aria-describedby={this.refreshSelectionId}
-                  checked={!isPaused}
-                  onChange={this.toggleRefresh}
-                  compressed
-                  label={
-                    <EuiFormLabel type="legend" id={this.legendId}>
-                      <EuiI18n
-                        token="euiRefreshInterval.legend"
-                        default="Refresh every"
-                      />
-                    </EuiFormLabel>
-                  }
-                />
-              </EuiFlexItem>
-              <EuiFlexItem style={{ minWidth: 60 }}>
-                <EuiFieldNumber
-                  compressed
-                  fullWidth
-                  value={value}
-                  min={min}
-                  onChange={this.onValueChange}
-                  onKeyDown={this.handleKeyDown}
-                  isInvalid={!isPaused && (value === '' || value <= 0)}
-                  disabled={isPaused}
-                  aria-label="Refresh interval value"
-                  aria-describedby={`${this.refreshSelectionId} ${this.legendId}`}
-                  data-test-subj="superDatePickerRefreshIntervalInput"
-                />
-              </EuiFlexItem>
-              <EuiFlexItem style={{ minWidth: 100 }} grow={2}>
-                <EuiSelect
-                  compressed
-                  fullWidth
-                  aria-label="Refresh interval units"
-                  aria-describedby={`${this.refreshSelectionId} ${this.legendId}`}
-                  value={units}
-                  disabled={isPaused}
-                  options={refreshUnitsOptions}
-                  onChange={this.onUnitsChange}
-                  onKeyDown={this.handleKeyDown}
-                  data-test-subj="superDatePickerRefreshIntervalUnitsSelect"
-                />
-              </EuiFlexItem>
-            </EuiFlexGroup>
-            {this.renderScreenReaderText(refreshUnitsOptions)}
-          </fieldset>
+      <EuiI18n
+        tokens={[
+          'euiRefreshInterval.toggleLabel',
+          'euiRefreshInterval.toggleAriaLabel',
+          'euiRefreshInterval.valueAriaLabel',
+          'euiRefreshInterval.unitsAriaLabel',
+        ]}
+        defaults={[
+          'Refresh every',
+          'Toggle refresh',
+          'Refresh interval value',
+          'Refresh interval units',
+        ]}
+      >
+        {([
+          toggleLabel,
+          toggleAriaLabel,
+          valueAriaLabel,
+          unitsAriaLabel,
+        ]: string[]) => (
+          <RenderI18nTimeOptions>
+            {({ refreshUnitsOptions }) => (
+              <EuiQuickSelectPanel>
+                <EuiFlexGroup
+                  alignItems="center"
+                  gutterSize="s"
+                  responsive={false}
+                  wrap
+                >
+                  <EuiFlexItem grow={false}>
+                    <EuiSwitch
+                      data-test-subj="superDatePickerToggleRefreshButton"
+                      checked={!isPaused}
+                      onChange={this.toggleRefresh}
+                      compressed
+                      // The IDs attached to this visible label are unused - we override with our own aria-label
+                      label={<EuiFormLabel>{toggleLabel}</EuiFormLabel>}
+                      aria-label={toggleAriaLabel}
+                      aria-labelledby={undefined}
+                      aria-describedby={this.refreshSelectionId}
+                    />
+                  </EuiFlexItem>
+                  <EuiFlexItem style={{ minWidth: 60 }}>
+                    <EuiFieldNumber
+                      compressed
+                      fullWidth
+                      value={value}
+                      min={min}
+                      onChange={this.onValueChange}
+                      onKeyDown={this.handleKeyDown}
+                      isInvalid={!isPaused && (value === '' || value <= 0)}
+                      disabled={isPaused}
+                      aria-label={valueAriaLabel}
+                      aria-describedby={this.refreshSelectionId}
+                      data-test-subj="superDatePickerRefreshIntervalInput"
+                    />
+                  </EuiFlexItem>
+                  <EuiFlexItem style={{ minWidth: 100 }} grow={2}>
+                    <EuiSelect
+                      compressed
+                      fullWidth
+                      aria-label={unitsAriaLabel}
+                      aria-describedby={this.refreshSelectionId}
+                      value={units}
+                      disabled={isPaused}
+                      options={refreshUnitsOptions}
+                      onChange={this.onUnitsChange}
+                      onKeyDown={this.handleKeyDown}
+                      data-test-subj="superDatePickerRefreshIntervalUnitsSelect"
+                    />
+                  </EuiFlexItem>
+                </EuiFlexGroup>
+                {this.renderScreenReaderText(refreshUnitsOptions)}
+              </EuiQuickSelectPanel>
+            )}
+          </RenderI18nTimeOptions>
         )}
-      </RenderI18nTimeOptions>
+      </EuiI18n>
     );
   }
 }
diff --git a/packages/eui/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap b/packages/eui/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap
index 1abdff6c019..14166d5664d 100644
--- a/packages/eui/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap
+++ b/packages/eui/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap
@@ -13,13 +13,13 @@ exports[`EuiSuperDatePicker props accepts data-test-subj and passes to EuiFormCo
     >
       <button
         aria-label="Date quick select"
-        class="euiButtonEmpty euiFormControlLayout__prepend emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary"
+        class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary-euiQuickSelectPopoverButton"
         data-test-subj="superDatePickerToggleQuickMenuButton"
         title="Date quick select"
         type="button"
       >
         <span
-          class="euiButtonEmpty__content euiQuickSelectPopover__buttonContent emotion-euiButtonDisplayContent"
+          class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiQuickSelectPopoverButton__content"
         >
           <span
             class="eui-textTruncate euiButtonEmpty__text"
@@ -82,13 +82,13 @@ exports[`EuiSuperDatePicker props compressed is rendered 1`] = `
     >
       <button
         aria-label="Date quick select"
-        class="euiButtonEmpty euiFormControlLayout__prepend emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary"
+        class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary-euiQuickSelectPopoverButton"
         data-test-subj="superDatePickerToggleQuickMenuButton"
         title="Date quick select"
         type="button"
       >
         <span
-          class="euiButtonEmpty__content euiQuickSelectPopover__buttonContent emotion-euiButtonDisplayContent"
+          class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiQuickSelectPopoverButton__content"
         >
           <span
             class="eui-textTruncate euiButtonEmpty__text"
@@ -266,14 +266,14 @@ exports[`EuiSuperDatePicker props isDisabled true 1`] = `
     >
       <button
         aria-label="Date quick select"
-        class="euiButtonEmpty euiFormControlLayout__prepend emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-disabled-isDisabled"
+        class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-disabled-isDisabled-euiQuickSelectPopoverButton"
         data-test-subj="superDatePickerToggleQuickMenuButton"
         disabled=""
         title="Date quick select"
         type="button"
       >
         <span
-          class="euiButtonEmpty__content euiQuickSelectPopover__buttonContent emotion-euiButtonDisplayContent"
+          class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiQuickSelectPopoverButton__content"
         >
           <span
             class="eui-textTruncate euiButtonEmpty__text"
@@ -338,13 +338,13 @@ exports[`EuiSuperDatePicker props isQuickSelectOnly is rendered 1`] = `
     >
       <button
         aria-label="Date quick select"
-        class="euiButtonEmpty euiFormControlLayout__prepend emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary"
+        class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary-euiQuickSelectPopoverButton"
         data-test-subj="superDatePickerToggleQuickMenuButton"
         title="Date quick select"
         type="button"
       >
         <span
-          class="euiButtonEmpty__content euiQuickSelectPopover__buttonContent emotion-euiButtonDisplayContent"
+          class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiQuickSelectPopoverButton__content"
         >
           <span
             class="eui-textTruncate euiButtonEmpty__text"
@@ -399,13 +399,13 @@ exports[`EuiSuperDatePicker props showUpdateButton can be false 1`] = `
     >
       <button
         aria-label="Date quick select"
-        class="euiButtonEmpty euiFormControlLayout__prepend emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary"
+        class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary-euiQuickSelectPopoverButton"
         data-test-subj="superDatePickerToggleQuickMenuButton"
         title="Date quick select"
         type="button"
       >
         <span
-          class="euiButtonEmpty__content euiQuickSelectPopover__buttonContent emotion-euiButtonDisplayContent"
+          class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiQuickSelectPopoverButton__content"
         >
           <span
             class="eui-textTruncate euiButtonEmpty__text"
@@ -448,13 +448,13 @@ exports[`EuiSuperDatePicker props showUpdateButton can be iconOnly 1`] = `
     >
       <button
         aria-label="Date quick select"
-        class="euiButtonEmpty euiFormControlLayout__prepend emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary"
+        class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary-euiQuickSelectPopoverButton"
         data-test-subj="superDatePickerToggleQuickMenuButton"
         title="Date quick select"
         type="button"
       >
         <span
-          class="euiButtonEmpty__content euiQuickSelectPopover__buttonContent emotion-euiButtonDisplayContent"
+          class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiQuickSelectPopoverButton__content"
         >
           <span
             class="eui-textTruncate euiButtonEmpty__text"
@@ -520,13 +520,13 @@ exports[`EuiSuperDatePicker props width can be auto 1`] = `
     >
       <button
         aria-label="Date quick select"
-        class="euiButtonEmpty euiFormControlLayout__prepend emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary"
+        class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary-euiQuickSelectPopoverButton"
         data-test-subj="superDatePickerToggleQuickMenuButton"
         title="Date quick select"
         type="button"
       >
         <span
-          class="euiButtonEmpty__content euiQuickSelectPopover__buttonContent emotion-euiButtonDisplayContent"
+          class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiQuickSelectPopoverButton__content"
         >
           <span
             class="eui-textTruncate euiButtonEmpty__text"
@@ -589,13 +589,13 @@ exports[`EuiSuperDatePicker props width can be full 1`] = `
     >
       <button
         aria-label="Date quick select"
-        class="euiButtonEmpty euiFormControlLayout__prepend emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary"
+        class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary-euiQuickSelectPopoverButton"
         data-test-subj="superDatePickerToggleQuickMenuButton"
         title="Date quick select"
         type="button"
       >
         <span
-          class="euiButtonEmpty__content euiQuickSelectPopover__buttonContent emotion-euiButtonDisplayContent"
+          class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiQuickSelectPopoverButton__content"
         >
           <span
             class="eui-textTruncate euiButtonEmpty__text"
@@ -659,13 +659,13 @@ exports[`EuiSuperDatePicker renders 1`] = `
     >
       <button
         aria-label="Date quick select"
-        class="euiButtonEmpty euiFormControlLayout__prepend emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary"
+        class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary-euiQuickSelectPopoverButton"
         data-test-subj="superDatePickerToggleQuickMenuButton"
         title="Date quick select"
         type="button"
       >
         <span
-          class="euiButtonEmpty__content euiQuickSelectPopover__buttonContent emotion-euiButtonDisplayContent"
+          class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiQuickSelectPopoverButton__content"
         >
           <span
             class="eui-textTruncate euiButtonEmpty__text"
@@ -732,13 +732,13 @@ exports[`EuiSuperDatePicker renders an EuiDatePickerRange 1`] = `
       >
         <button
           aria-label="Date quick select"
-          class="euiButtonEmpty euiFormControlLayout__prepend emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary"
+          class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary-euiQuickSelectPopoverButton"
           data-test-subj="superDatePickerToggleQuickMenuButton"
           title="Date quick select"
           type="button"
         >
           <span
-            class="euiButtonEmpty__content euiQuickSelectPopover__buttonContent emotion-euiButtonDisplayContent"
+            class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiQuickSelectPopoverButton__content"
           >
             <span
               class="eui-textTruncate euiButtonEmpty__text"
diff --git a/packages/eui/src/components/date_picker/super_date_picker/_index.scss b/packages/eui/src/components/date_picker/super_date_picker/_index.scss
deleted file mode 100644
index 06a7ba3c66d..00000000000
--- a/packages/eui/src/components/date_picker/super_date_picker/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import 'quick_select_popover/index';
diff --git a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select.test.tsx.snap b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select.test.tsx.snap
index c7327d56c9b..add990fea69 100644
--- a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select.test.tsx.snap
+++ b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select.test.tsx.snap
@@ -2,250 +2,434 @@
 
 exports[`EuiQuickSelect is rendered 1`] = `
 <fieldset
-  className="euiQuickSelectPopover__panel"
+  aria-describedby="generated-id"
+  class="emotion-euiQuickSelectPanel-render"
 >
-  <EuiI18n
-    default="Quick select a time range"
-    token="euiQuickSelect.legendText"
+  <legend
+    class="euiTitle emotion-euiQuickSelectPanel__title-euiTitle-xxxs"
+    id="generated-id"
   >
-    <Component />
-  </EuiI18n>
-  <EuiFlexGroup
-    alignItems="center"
-    gutterSize="s"
-    justifyContent="spaceBetween"
-    responsive={false}
+    Quick select
+  </legend>
+  <div
+    class="emotion-euiQuickSelectPanel__section"
   >
-    <EuiFlexItem
-      grow={false}
+    <div
+      class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-center-row-render"
     >
-      <EuiI18n
-        default="Quick select"
-        token="euiQuickSelect.quickSelectTitle"
+      <div
+        class="euiFlexItem emotion-euiFlexItem-growZero"
       >
-        <Component />
-      </EuiI18n>
-    </EuiFlexItem>
-    <EuiFlexItem
-      grow={false}
-    >
-      <EuiFlexGroup
-        alignItems="center"
-        gutterSize="s"
-        responsive={false}
-      >
-        <EuiFlexItem
-          grow={false}
+        <span
+          class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
         >
-          <EuiI18n
-            default="Previous time window"
-            token="euiQuickSelect.previousLabel"
+          <button
+            aria-label="Previous time window"
+            class="euiButtonIcon emotion-euiButtonIcon-xs-empty-primary"
+            type="button"
           >
-            <Component />
-          </EuiI18n>
-        </EuiFlexItem>
-        <EuiFlexItem
-          grow={false}
+            <span
+              aria-hidden="true"
+              class="euiButtonIcon__icon"
+              color="inherit"
+              data-euiicon-type="arrowLeft"
+            />
+          </button>
+        </span>
+      </div>
+      <div
+        class="euiFlexItem emotion-euiFlexItem-growZero"
+      >
+        <span
+          class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
         >
-          <EuiI18n
-            default="Next time window"
-            token="euiQuickSelect.nextLabel"
+          <button
+            aria-label="Next time window"
+            class="euiButtonIcon emotion-euiButtonIcon-xs-empty-primary"
+            type="button"
           >
-            <Component />
-          </EuiI18n>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    </EuiFlexItem>
-  </EuiFlexGroup>
-  <EuiSpacer
-    size="s"
-  />
-  <EuiFlexGroup
-    gutterSize="s"
-    responsive={false}
-  >
-    <EuiFlexItem>
-      <EuiI18n
-        default="Time tense"
-        token="euiQuickSelect.tenseLabel"
+            <span
+              aria-hidden="true"
+              class="euiButtonIcon__icon"
+              color="inherit"
+              data-euiicon-type="arrowRight"
+            />
+          </button>
+        </span>
+      </div>
+    </div>
+    <div
+      class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-stretch-row"
+    >
+      <div
+        class="euiFlexItem emotion-euiFlexItem-grow-1"
       >
-        <Component />
-      </EuiI18n>
-    </EuiFlexItem>
-    <EuiFlexItem>
-      <EuiI18n
-        default="Time value"
-        token="euiQuickSelect.valueLabel"
+        <div
+          class="euiFormControlLayout euiFormControlLayout--compressed"
+        >
+          <div
+            class="euiFormControlLayout__childrenWrapper"
+            style="--euiFormControlRightIconsCount: 1;"
+          >
+            <select
+              aria-describedby="generated-id generated-id"
+              aria-label="Time tense"
+              class="euiSelect emotion-euiSelect-compressed"
+            >
+              <option
+                value="last"
+              >
+                Last
+              </option>
+              <option
+                value="next"
+              >
+                Next
+              </option>
+            </select>
+            <div
+              class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
+            >
+              <span
+                class="euiFormControlLayoutCustomIcon"
+              >
+                <span
+                  aria-hidden="true"
+                  class="euiFormControlLayoutCustomIcon__icon"
+                  data-euiicon-type="arrowDown"
+                />
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="euiFlexItem emotion-euiFlexItem-grow-1"
       >
-        <Component />
-      </EuiI18n>
-    </EuiFlexItem>
-    <EuiFlexItem>
-      <EuiI18n
-        default="Time unit"
-        token="euiQuickSelect.unitLabel"
+        <div
+          class="euiFormControlLayout euiFormControlLayout--compressed"
+        >
+          <div
+            class="euiFormControlLayout__childrenWrapper"
+          >
+            <input
+              aria-describedby="generated-id generated-id"
+              aria-label="Time value"
+              class="euiFieldNumber emotion-euiFieldNumber-compressed"
+              step="any"
+              type="number"
+              value="15"
+            />
+          </div>
+        </div>
+      </div>
+      <div
+        class="euiFlexItem emotion-euiFlexItem-grow-1"
       >
-        <Component />
-      </EuiI18n>
-    </EuiFlexItem>
-    <EuiFlexItem
-      grow={false}
-    >
-      <EuiButton
-        aria-describedby="generated-id generated-id"
-        className="euiQuickSelect__applyButton"
-        disabled={false}
-        onClick={[Function]}
-        size="s"
+        <div
+          class="euiFormControlLayout euiFormControlLayout--compressed"
+        >
+          <div
+            class="euiFormControlLayout__childrenWrapper"
+            style="--euiFormControlRightIconsCount: 1;"
+          >
+            <select
+              aria-describedby="generated-id generated-id"
+              aria-label="Time unit"
+              class="euiSelect emotion-euiSelect-compressed"
+            >
+              <option
+                value="s"
+              >
+                Seconds
+              </option>
+              <option
+                value="m"
+              >
+                Minutes
+              </option>
+              <option
+                value="h"
+              >
+                Hours
+              </option>
+              <option
+                value="d"
+              >
+                Days
+              </option>
+              <option
+                value="w"
+              >
+                Weeks
+              </option>
+              <option
+                value="M"
+              >
+                Months
+              </option>
+              <option
+                value="y"
+              >
+                Years
+              </option>
+            </select>
+            <div
+              class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
+            >
+              <span
+                class="euiFormControlLayoutCustomIcon"
+              >
+                <span
+                  aria-hidden="true"
+                  class="euiFormControlLayoutCustomIcon__icon"
+                  data-euiicon-type="arrowDown"
+                />
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="euiFlexItem emotion-euiFlexItem-growZero"
       >
-        <EuiI18n
-          default="Apply"
-          token="euiQuickSelect.applyButton"
-        />
-      </EuiButton>
-    </EuiFlexItem>
-  </EuiFlexGroup>
-  <EuiScreenReaderOnly>
+        <button
+          aria-describedby="generated-id generated-id"
+          class="euiButton emotion-euiButtonDisplay-s-base-primary"
+          data-test-subj="superDatePickerQuickSelectApplyButton"
+          type="button"
+        >
+          <span
+            class="emotion-euiButtonDisplayContent"
+          >
+            Apply
+          </span>
+        </button>
+      </div>
+    </div>
     <p
+      class="emotion-euiScreenReaderOnly"
       id="generated-id"
     >
-      <EuiI18n
-        default="Currently set to {timeTense} {timeValue} {timeUnit}."
-        token="euiQuickSelect.fullDescription"
-        values={
-          {
-            "timeTense": "last",
-            "timeUnit": "Minutes",
-            "timeValue": 15,
-          }
-        }
-      />
+      Currently set to last 15 Minutes.
     </p>
-  </EuiScreenReaderOnly>
+  </div>
 </fieldset>
 `;
 
 exports[`EuiQuickSelect prevQuickSelect 1`] = `
 <fieldset
-  className="euiQuickSelectPopover__panel"
+  aria-describedby="generated-id"
+  class="emotion-euiQuickSelectPanel-render"
 >
-  <EuiI18n
-    default="Quick select a time range"
-    token="euiQuickSelect.legendText"
+  <legend
+    class="euiTitle emotion-euiQuickSelectPanel__title-euiTitle-xxxs"
+    id="generated-id"
   >
-    <Component />
-  </EuiI18n>
-  <EuiFlexGroup
-    alignItems="center"
-    gutterSize="s"
-    justifyContent="spaceBetween"
-    responsive={false}
+    Quick select
+  </legend>
+  <div
+    class="emotion-euiQuickSelectPanel__section"
   >
-    <EuiFlexItem
-      grow={false}
+    <div
+      class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-center-row-render"
     >
-      <EuiI18n
-        default="Quick select"
-        token="euiQuickSelect.quickSelectTitle"
+      <div
+        class="euiFlexItem emotion-euiFlexItem-growZero"
       >
-        <Component />
-      </EuiI18n>
-    </EuiFlexItem>
-    <EuiFlexItem
-      grow={false}
-    >
-      <EuiFlexGroup
-        alignItems="center"
-        gutterSize="s"
-        responsive={false}
-      >
-        <EuiFlexItem
-          grow={false}
+        <span
+          class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
         >
-          <EuiI18n
-            default="Previous time window"
-            token="euiQuickSelect.previousLabel"
+          <button
+            aria-label="Previous time window"
+            class="euiButtonIcon emotion-euiButtonIcon-xs-empty-primary"
+            type="button"
           >
-            <Component />
-          </EuiI18n>
-        </EuiFlexItem>
-        <EuiFlexItem
-          grow={false}
+            <span
+              aria-hidden="true"
+              class="euiButtonIcon__icon"
+              color="inherit"
+              data-euiicon-type="arrowLeft"
+            />
+          </button>
+        </span>
+      </div>
+      <div
+        class="euiFlexItem emotion-euiFlexItem-growZero"
+      >
+        <span
+          class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
         >
-          <EuiI18n
-            default="Next time window"
-            token="euiQuickSelect.nextLabel"
+          <button
+            aria-label="Next time window"
+            class="euiButtonIcon emotion-euiButtonIcon-xs-empty-primary"
+            type="button"
           >
-            <Component />
-          </EuiI18n>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    </EuiFlexItem>
-  </EuiFlexGroup>
-  <EuiSpacer
-    size="s"
-  />
-  <EuiFlexGroup
-    gutterSize="s"
-    responsive={false}
-  >
-    <EuiFlexItem>
-      <EuiI18n
-        default="Time tense"
-        token="euiQuickSelect.tenseLabel"
+            <span
+              aria-hidden="true"
+              class="euiButtonIcon__icon"
+              color="inherit"
+              data-euiicon-type="arrowRight"
+            />
+          </button>
+        </span>
+      </div>
+    </div>
+    <div
+      class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-stretch-row"
+    >
+      <div
+        class="euiFlexItem emotion-euiFlexItem-grow-1"
       >
-        <Component />
-      </EuiI18n>
-    </EuiFlexItem>
-    <EuiFlexItem>
-      <EuiI18n
-        default="Time value"
-        token="euiQuickSelect.valueLabel"
+        <div
+          class="euiFormControlLayout euiFormControlLayout--compressed"
+        >
+          <div
+            class="euiFormControlLayout__childrenWrapper"
+            style="--euiFormControlRightIconsCount: 1;"
+          >
+            <select
+              aria-describedby="generated-id generated-id"
+              aria-label="Time tense"
+              class="euiSelect emotion-euiSelect-compressed"
+            >
+              <option
+                value="last"
+              >
+                Last
+              </option>
+              <option
+                value="next"
+              >
+                Next
+              </option>
+            </select>
+            <div
+              class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
+            >
+              <span
+                class="euiFormControlLayoutCustomIcon"
+              >
+                <span
+                  aria-hidden="true"
+                  class="euiFormControlLayoutCustomIcon__icon"
+                  data-euiicon-type="arrowDown"
+                />
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="euiFlexItem emotion-euiFlexItem-grow-1"
       >
-        <Component />
-      </EuiI18n>
-    </EuiFlexItem>
-    <EuiFlexItem>
-      <EuiI18n
-        default="Time unit"
-        token="euiQuickSelect.unitLabel"
+        <div
+          class="euiFormControlLayout euiFormControlLayout--compressed"
+        >
+          <div
+            class="euiFormControlLayout__childrenWrapper"
+          >
+            <input
+              aria-describedby="generated-id generated-id"
+              aria-label="Time value"
+              class="euiFieldNumber emotion-euiFieldNumber-compressed"
+              step="any"
+              type="number"
+              value="32"
+            />
+          </div>
+        </div>
+      </div>
+      <div
+        class="euiFlexItem emotion-euiFlexItem-grow-1"
       >
-        <Component />
-      </EuiI18n>
-    </EuiFlexItem>
-    <EuiFlexItem
-      grow={false}
-    >
-      <EuiButton
-        aria-describedby="generated-id generated-id"
-        className="euiQuickSelect__applyButton"
-        disabled={false}
-        onClick={[Function]}
-        size="s"
+        <div
+          class="euiFormControlLayout euiFormControlLayout--compressed"
+        >
+          <div
+            class="euiFormControlLayout__childrenWrapper"
+            style="--euiFormControlRightIconsCount: 1;"
+          >
+            <select
+              aria-describedby="generated-id generated-id"
+              aria-label="Time unit"
+              class="euiSelect emotion-euiSelect-compressed"
+            >
+              <option
+                value="s"
+              >
+                Seconds
+              </option>
+              <option
+                value="m"
+              >
+                Minutes
+              </option>
+              <option
+                value="h"
+              >
+                Hours
+              </option>
+              <option
+                value="d"
+              >
+                Days
+              </option>
+              <option
+                value="w"
+              >
+                Weeks
+              </option>
+              <option
+                value="M"
+              >
+                Months
+              </option>
+              <option
+                value="y"
+              >
+                Years
+              </option>
+            </select>
+            <div
+              class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
+            >
+              <span
+                class="euiFormControlLayoutCustomIcon"
+              >
+                <span
+                  aria-hidden="true"
+                  class="euiFormControlLayoutCustomIcon__icon"
+                  data-euiicon-type="arrowDown"
+                />
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="euiFlexItem emotion-euiFlexItem-growZero"
       >
-        <EuiI18n
-          default="Apply"
-          token="euiQuickSelect.applyButton"
-        />
-      </EuiButton>
-    </EuiFlexItem>
-  </EuiFlexGroup>
-  <EuiScreenReaderOnly>
+        <button
+          aria-describedby="generated-id generated-id"
+          class="euiButton emotion-euiButtonDisplay-s-base-primary"
+          data-test-subj="superDatePickerQuickSelectApplyButton"
+          type="button"
+        >
+          <span
+            class="emotion-euiButtonDisplayContent"
+          >
+            Apply
+          </span>
+        </button>
+      </div>
+    </div>
     <p
+      class="emotion-euiScreenReaderOnly"
       id="generated-id"
     >
-      <EuiI18n
-        default="Currently set to {timeTense} {timeValue} {timeUnit}."
-        token="euiQuickSelect.fullDescription"
-        values={
-          {
-            "timeTense": "Next",
-            "timeUnit": "Months",
-            "timeValue": 32,
-          }
-        }
-      />
+      Currently set to Next 32 Months.
     </p>
-  </EuiScreenReaderOnly>
+  </div>
 </fieldset>
 `;
diff --git a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.tsx.snap b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.tsx.snap
index 6b094158912..3a24fd3038c 100644
--- a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.tsx.snap
+++ b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.tsx.snap
@@ -2,249 +2,234 @@
 
 exports[`EuiQuickSelectPanels customQuickSelectPanels should render custom panels 1`] = `
 <div
-  class="euiQuickSelectPopover__content"
+  class="euiQuickSelectPopover emotion-euiQuickSelectPopover"
   data-test-subj="superDatePickerQuickMenu"
 >
   <fieldset
-    class="euiQuickSelectPopover__panel"
+    aria-describedby="generated-id"
+    class="emotion-euiQuickSelectPanel-render"
   >
     <legend
-      class="euiFormLabel emotion-euiScreenReaderOnly"
+      class="euiTitle emotion-euiQuickSelectPanel__title-euiTitle-xxxs"
       id="generated-id"
     >
-      Quick select a time range
+      Quick select
     </legend>
     <div
-      class="euiFlexGroup emotion-euiFlexGroup-s-spaceBetween-center-row"
+      class="emotion-euiQuickSelectPanel__section"
     >
       <div
-        class="euiFlexItem emotion-euiFlexItem-growZero"
+        class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-center-row-render"
       >
         <div
-          aria-hidden="true"
-          class="euiFormLabel"
+          class="euiFlexItem emotion-euiFlexItem-growZero"
         >
-          Quick select
+          <span
+            class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
+          >
+            <button
+              aria-label="Previous time window"
+              class="euiButtonIcon emotion-euiButtonIcon-xs-empty-primary"
+              type="button"
+            >
+              <span
+                aria-hidden="true"
+                class="euiButtonIcon__icon"
+                color="inherit"
+                data-euiicon-type="arrowLeft"
+              />
+            </button>
+          </span>
         </div>
-      </div>
-      <div
-        class="euiFlexItem emotion-euiFlexItem-growZero"
-      >
         <div
-          class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-center-row"
+          class="euiFlexItem emotion-euiFlexItem-growZero"
         >
-          <div
-            class="euiFlexItem emotion-euiFlexItem-growZero"
-          >
-            <span
-              class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
-            >
-              <button
-                aria-label="Previous time window"
-                class="euiButtonIcon emotion-euiButtonIcon-xs-empty-primary"
-                type="button"
-              >
-                <span
-                  aria-hidden="true"
-                  class="euiButtonIcon__icon"
-                  color="inherit"
-                  data-euiicon-type="arrowLeft"
-                />
-              </button>
-            </span>
-          </div>
-          <div
-            class="euiFlexItem emotion-euiFlexItem-growZero"
+          <span
+            class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
           >
-            <span
-              class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
+            <button
+              aria-label="Next time window"
+              class="euiButtonIcon emotion-euiButtonIcon-xs-empty-primary"
+              type="button"
             >
-              <button
-                aria-label="Next time window"
-                class="euiButtonIcon emotion-euiButtonIcon-xs-empty-primary"
-                type="button"
-              >
-                <span
-                  aria-hidden="true"
-                  class="euiButtonIcon__icon"
-                  color="inherit"
-                  data-euiicon-type="arrowRight"
-                />
-              </button>
-            </span>
-          </div>
+              <span
+                aria-hidden="true"
+                class="euiButtonIcon__icon"
+                color="inherit"
+                data-euiicon-type="arrowRight"
+              />
+            </button>
+          </span>
         </div>
       </div>
-    </div>
-    <div
-      class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
-    />
-    <div
-      class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-stretch-row"
-    >
       <div
-        class="euiFlexItem emotion-euiFlexItem-grow-1"
+        class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-stretch-row"
       >
         <div
-          class="euiFormControlLayout euiFormControlLayout--compressed"
+          class="euiFlexItem emotion-euiFlexItem-grow-1"
         >
           <div
-            class="euiFormControlLayout__childrenWrapper"
-            style="--euiFormControlRightIconsCount: 1;"
+            class="euiFormControlLayout euiFormControlLayout--compressed"
           >
-            <select
-              aria-describedby="generated-id generated-id"
-              aria-label="Time tense"
-              class="euiSelect emotion-euiSelect-compressed"
-            >
-              <option
-                value="last"
-              >
-                Last
-              </option>
-              <option
-                value="next"
-              >
-                Next
-              </option>
-            </select>
             <div
-              class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
+              class="euiFormControlLayout__childrenWrapper"
+              style="--euiFormControlRightIconsCount: 1;"
             >
-              <span
-                class="euiFormControlLayoutCustomIcon"
+              <select
+                aria-describedby="generated-id generated-id"
+                aria-label="Time tense"
+                class="euiSelect emotion-euiSelect-compressed"
+              >
+                <option
+                  value="last"
+                >
+                  Last
+                </option>
+                <option
+                  value="next"
+                >
+                  Next
+                </option>
+              </select>
+              <div
+                class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
               >
                 <span
-                  aria-hidden="true"
-                  class="euiFormControlLayoutCustomIcon__icon"
-                  data-euiicon-type="arrowDown"
-                />
-              </span>
+                  class="euiFormControlLayoutCustomIcon"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="euiFormControlLayoutCustomIcon__icon"
+                    data-euiicon-type="arrowDown"
+                  />
+                </span>
+              </div>
             </div>
           </div>
         </div>
-      </div>
-      <div
-        class="euiFlexItem emotion-euiFlexItem-grow-1"
-      >
         <div
-          class="euiFormControlLayout euiFormControlLayout--compressed"
+          class="euiFlexItem emotion-euiFlexItem-grow-1"
         >
           <div
-            class="euiFormControlLayout__childrenWrapper"
+            class="euiFormControlLayout euiFormControlLayout--compressed"
           >
-            <input
-              aria-describedby="generated-id generated-id"
-              aria-label="Time value"
-              class="euiFieldNumber emotion-euiFieldNumber-compressed"
-              step="any"
-              type="number"
-              value="15"
-            />
+            <div
+              class="euiFormControlLayout__childrenWrapper"
+            >
+              <input
+                aria-describedby="generated-id generated-id"
+                aria-label="Time value"
+                class="euiFieldNumber emotion-euiFieldNumber-compressed"
+                step="any"
+                type="number"
+                value="15"
+              />
+            </div>
           </div>
         </div>
-      </div>
-      <div
-        class="euiFlexItem emotion-euiFlexItem-grow-1"
-      >
         <div
-          class="euiFormControlLayout euiFormControlLayout--compressed"
+          class="euiFlexItem emotion-euiFlexItem-grow-1"
         >
           <div
-            class="euiFormControlLayout__childrenWrapper"
-            style="--euiFormControlRightIconsCount: 1;"
+            class="euiFormControlLayout euiFormControlLayout--compressed"
           >
-            <select
-              aria-describedby="generated-id generated-id"
-              aria-label="Time unit"
-              class="euiSelect emotion-euiSelect-compressed"
-            >
-              <option
-                value="s"
-              >
-                Seconds
-              </option>
-              <option
-                value="m"
-              >
-                Minutes
-              </option>
-              <option
-                value="h"
-              >
-                Hours
-              </option>
-              <option
-                value="d"
-              >
-                Days
-              </option>
-              <option
-                value="w"
-              >
-                Weeks
-              </option>
-              <option
-                value="M"
-              >
-                Months
-              </option>
-              <option
-                value="y"
-              >
-                Years
-              </option>
-            </select>
             <div
-              class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
+              class="euiFormControlLayout__childrenWrapper"
+              style="--euiFormControlRightIconsCount: 1;"
             >
-              <span
-                class="euiFormControlLayoutCustomIcon"
+              <select
+                aria-describedby="generated-id generated-id"
+                aria-label="Time unit"
+                class="euiSelect emotion-euiSelect-compressed"
+              >
+                <option
+                  value="s"
+                >
+                  Seconds
+                </option>
+                <option
+                  value="m"
+                >
+                  Minutes
+                </option>
+                <option
+                  value="h"
+                >
+                  Hours
+                </option>
+                <option
+                  value="d"
+                >
+                  Days
+                </option>
+                <option
+                  value="w"
+                >
+                  Weeks
+                </option>
+                <option
+                  value="M"
+                >
+                  Months
+                </option>
+                <option
+                  value="y"
+                >
+                  Years
+                </option>
+              </select>
+              <div
+                class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
               >
                 <span
-                  aria-hidden="true"
-                  class="euiFormControlLayoutCustomIcon__icon"
-                  data-euiicon-type="arrowDown"
-                />
-              </span>
+                  class="euiFormControlLayoutCustomIcon"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="euiFormControlLayoutCustomIcon__icon"
+                    data-euiicon-type="arrowDown"
+                  />
+                </span>
+              </div>
             </div>
           </div>
         </div>
-      </div>
-      <div
-        class="euiFlexItem emotion-euiFlexItem-growZero"
-      >
-        <button
-          aria-describedby="generated-id generated-id"
-          class="euiButton euiQuickSelect__applyButton emotion-euiButtonDisplay-s-defaultMinWidth-base-primary"
-          type="button"
+        <div
+          class="euiFlexItem emotion-euiFlexItem-growZero"
         >
-          <span
-            class="emotion-euiButtonDisplayContent"
+          <button
+            aria-describedby="generated-id generated-id"
+            class="euiButton emotion-euiButtonDisplay-s-base-primary"
+            data-test-subj="superDatePickerQuickSelectApplyButton"
+            type="button"
           >
-            Apply
-          </span>
-        </button>
+            <span
+              class="emotion-euiButtonDisplayContent"
+            >
+              Apply
+            </span>
+          </button>
+        </div>
       </div>
+      <p
+        class="emotion-euiScreenReaderOnly"
+        id="generated-id"
+      >
+        Currently set to last 15 Minutes.
+      </p>
     </div>
-    <p
-      class="emotion-euiScreenReaderOnly"
-      id="generated-id"
-    >
-      Currently set to last 15 Minutes.
-    </p>
   </fieldset>
   <fieldset
-    class="euiQuickSelectPopover__panel"
+    class="emotion-euiQuickSelectPanel"
   >
     <legend
-      class="euiTitle euiQuickSelectPopover__panelTitle emotion-euiTitle-xxxs"
+      class="euiTitle emotion-euiQuickSelectPanel__title-euiTitle-xxxs"
       id="generated-id"
     >
       Commonly used
     </legend>
     <div
-      class="euiQuickSelectPopover__section"
+      class="emotion-euiQuickSelectPanel__section"
     >
       <ul
         aria-labelledby="generated-id"
@@ -252,7 +237,7 @@ exports[`EuiQuickSelectPanels customQuickSelectPanels should render custom panel
         style="grid-template-rows: repeat(1, 1fr);"
       >
         <li
-          class="euiFlexItem euiQuickSelectPopover__sectionItem emotion-euiFlexItem-grow-1"
+          class="euiFlexItem emotion-euiFlexItem-grow-1"
         >
           <button
             class="euiLink emotion-euiLink-primary"
@@ -266,20 +251,22 @@ exports[`EuiQuickSelectPanels customQuickSelectPanels should render custom panel
     </div>
   </fieldset>
   <fieldset
-    class="euiQuickSelectPopover__panel"
+    class="emotion-euiQuickSelectPanel"
   >
     <legend
-      class="euiTitle euiQuickSelectPopover__panelTitle emotion-euiTitle-xxxs"
+      class="euiTitle emotion-euiQuickSelectPanel__title-euiTitle-xxxs"
       id="generated-id"
     >
       Recently used date ranges
     </legend>
     <div
-      class="euiQuickSelectPopover__section"
+      class="emotion-euiQuickSelectPanel__section"
     >
-      <ul>
+      <ul
+        class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-stretch-column"
+      >
         <li
-          class="euiQuickSelectPopover__sectionItem euiQuickSelectPopover__sectionItem--recentlyUsed"
+          class="euiFlexItem emotion-euiFlexItem-grow-1"
         >
           <button
             class="euiLink emotion-euiLink-primary"
@@ -291,8 +278,8 @@ exports[`EuiQuickSelectPanels customQuickSelectPanels should render custom panel
       </ul>
     </div>
   </fieldset>
-  <fieldset
-    class="euiQuickSelectPopover__panel"
+  <div
+    class="emotion-euiQuickSelectPanel"
   >
     <div
       class="euiFlexGroup emotion-euiFlexGroup-wrap-s-flexStart-center-row"
@@ -306,7 +293,7 @@ exports[`EuiQuickSelectPanels customQuickSelectPanels should render custom panel
           <button
             aria-checked="false"
             aria-describedby="generated-id"
-            aria-labelledby="generated-id"
+            aria-label="Toggle refresh"
             class="euiSwitch__button"
             data-test-subj="superDatePickerToggleRefreshButton"
             id="generated-id"
@@ -328,12 +315,11 @@ exports[`EuiQuickSelectPanels customQuickSelectPanels should render custom panel
             class="euiSwitch__label"
             id="generated-id"
           >
-            <legend
+            <label
               class="euiFormLabel"
-              id="generated-id"
             >
               Refresh every
-            </legend>
+            </label>
           </span>
         </div>
       </div>
@@ -348,7 +334,7 @@ exports[`EuiQuickSelectPanels customQuickSelectPanels should render custom panel
             class="euiFormControlLayout__childrenWrapper"
           >
             <input
-              aria-describedby="generated-id generated-id"
+              aria-describedby="generated-id"
               aria-label="Refresh interval value"
               class="euiFieldNumber emotion-euiFieldNumber-compressed-fullWidth"
               data-test-subj="superDatePickerRefreshIntervalInput"
@@ -372,7 +358,7 @@ exports[`EuiQuickSelectPanels customQuickSelectPanels should render custom panel
             class="euiFormControlLayout__childrenWrapper"
           >
             <select
-              aria-describedby="generated-id generated-id"
+              aria-describedby="generated-id"
               aria-label="Refresh interval units"
               class="euiSelect emotion-euiSelect-compressed-fullWidth"
               data-test-subj="superDatePickerRefreshIntervalUnitsSelect"
@@ -404,17 +390,17 @@ exports[`EuiQuickSelectPanels customQuickSelectPanels should render custom panel
     >
       Refresh is off, interval set to 0 Seconds.
     </p>
-  </fieldset>
+  </div>
   <div
-    class="euiQuickSelectPopover__panel"
+    class="emotion-euiQuickSelectPanel"
   >
     <span
-      class="euiTitle emotion-euiTitle-xxxs"
+      class="euiTitle emotion-euiQuickSelectPanel__title-euiTitle-xxxs"
     >
       My custom panel
     </span>
     <div
-      class="euiText euiQuickSelectPopover__section emotion-euiText-s"
+      class="emotion-euiQuickSelectPanel__section"
     >
       <button
         class="euiLink emotion-euiLink-primary"
@@ -434,13 +420,13 @@ exports[`EuiQuickSelectPopover is rendered 1`] = `
 >
   <button
     aria-label="Date quick select"
-    class="euiButtonEmpty euiFormControlLayout__prepend emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary"
+    class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary-euiQuickSelectPopoverButton"
     data-test-subj="superDatePickerToggleQuickMenuButton"
     title="Date quick select"
     type="button"
   >
     <span
-      class="euiButtonEmpty__content euiQuickSelectPopover__buttonContent emotion-euiButtonDisplayContent"
+      class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiQuickSelectPopoverButton__content"
     >
       <span
         class="eui-textTruncate euiButtonEmpty__text"
diff --git a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/_index.scss b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/_index.scss
deleted file mode 100644
index 4fc081c561d..00000000000
--- a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/_index.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-@import 'quick_select_popover';
-@import 'quick_select';
-@import 'refresh_interval';
diff --git a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select.scss b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select.scss
deleted file mode 100644
index fa7907252c4..00000000000
--- a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.euiQuickSelect__applyButton {
-  // Allow the button to shrink
-  min-width: 0;
-}
diff --git a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select_popover.scss b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select_popover.scss
deleted file mode 100644
index e103f641d38..00000000000
--- a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select_popover.scss
+++ /dev/null
@@ -1,41 +0,0 @@
-.euiQuickSelectPopover__content {
-  width: $euiFormMaxWidth;
-  max-width: 100%;
-
-  .euiQuickSelectPopover__panel {
-    &:not(:first-child) {
-      border-top: $euiBorderThin;
-      padding-top: $euiSizeM;
-      margin-top: $euiSizeM;
-    }
-
-    .euiQuickSelectPopover__panelTitle {
-      float: left;
-      margin-bottom: $euiSizeM;
-    }
-  }
-}
-
-.euiQuickSelectPopover__section {
-  @include euiScrollBar;
-  max-height: $euiSizeM * 11;
-  overflow: hidden;
-  overflow-y: auto;
-  margin: $euiSizeS 0 0;
-  clear: both;
-}
-
-.euiQuickSelectPopover__buttonContent {
-  gap: $euiSizeXS;
-}
-
-.euiQuickSelectPopover__sectionItem {
-  font-size: $euiFontSizeS;
-  line-height: $euiFontSizeS;
-
-  &--recentlyUsed {
-    &:not(:last-of-type) {
-      margin-bottom: $euiSizeS;
-    }
-  }
-}
diff --git a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/_refresh_interval.scss b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/_refresh_interval.scss
deleted file mode 100644
index e002eddc4ca..00000000000
--- a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/_refresh_interval.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.euiRefreshInterval__startButton {
-  // Just enough to keep it the same size for "Start" and "Stop"
-  min-width: 90px;
-}
diff --git a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/commonly_used_time_ranges.tsx b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/commonly_used_time_ranges.tsx
index 7d12ceaaef5..7176609365d 100644
--- a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/commonly_used_time_ranges.tsx
+++ b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/commonly_used_time_ranges.tsx
@@ -7,12 +7,14 @@
  */
 
 import React, { FunctionComponent } from 'react';
-import { EuiI18n } from '../../../i18n';
+
+import { useGeneratedHtmlId } from '../../../../services';
+import { useEuiI18n } from '../../../i18n';
 import { EuiFlexGrid, EuiFlexItem } from '../../../flex';
-import { EuiTitle } from '../../../title';
 import { EuiLink } from '../../../link';
-import { useGeneratedHtmlId } from '../../../../services';
+
 import { DurationRange, ApplyTime } from '../../types';
+import { EuiQuickSelectPanel } from './quick_select_panel';
 
 export interface EuiCommonlyUsedTimeRangesProps {
   applyTime: ApplyTime;
@@ -22,7 +24,9 @@ export interface EuiCommonlyUsedTimeRangesProps {
 export const EuiCommonlyUsedTimeRanges: FunctionComponent<
   EuiCommonlyUsedTimeRangesProps
 > = ({ applyTime, commonlyUsedRanges }) => {
+  const title = useEuiI18n('euiCommonlyUsedTimeRanges.legend', 'Commonly used');
   const legendId = useGeneratedHtmlId();
+
   const links = commonlyUsedRanges.map(({ start, end, label }) => {
     const applyCommonlyUsed = () => {
       applyTime({ start, end });
@@ -31,11 +35,7 @@ export const EuiCommonlyUsedTimeRanges: FunctionComponent<
       ? `superDatePickerCommonlyUsed_${label.replace(' ', '_')}`
       : undefined;
     return (
-      <EuiFlexItem
-        key={label}
-        component="li"
-        className="euiQuickSelectPopover__sectionItem"
-      >
+      <EuiFlexItem key={label} component="li">
         <EuiLink onClick={applyCommonlyUsed} data-test-subj={dataTestSubj}>
           {label}
         </EuiLink>
@@ -44,28 +44,18 @@ export const EuiCommonlyUsedTimeRanges: FunctionComponent<
   });
 
   return (
-    <fieldset className="euiQuickSelectPopover__panel">
-      <EuiTitle size="xxxs">
-        <legend id={legendId} className="euiQuickSelectPopover__panelTitle">
-          <EuiI18n
-            token="euiCommonlyUsedTimeRanges.legend"
-            default="Commonly used"
-          />
-        </legend>
-      </EuiTitle>
-      <div className="euiQuickSelectPopover__section">
-        <EuiFlexGrid
-          aria-labelledby={legendId}
-          gutterSize="s"
-          columns={2}
-          direction="column"
-          responsive={false}
-          component="ul"
-        >
-          {links}
-        </EuiFlexGrid>
-      </div>
-    </fieldset>
+    <EuiQuickSelectPanel component="fieldset" titleId={legendId} title={title}>
+      <EuiFlexGrid
+        aria-labelledby={legendId}
+        gutterSize="s"
+        columns={2}
+        direction="column"
+        responsive={false}
+        component="ul"
+      >
+        {links}
+      </EuiFlexGrid>
+    </EuiQuickSelectPanel>
   );
 };
 
diff --git a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select.test.tsx b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select.test.tsx
index 7299ea14330..d8c23146bda 100644
--- a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select.test.tsx
+++ b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select.test.tsx
@@ -7,10 +7,10 @@
  */
 
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render } from '../../../../test/rtl';
+import { RenderI18nTimeOptions } from '../time_options';
 
 import { EuiQuickSelect } from './quick_select';
-import { RenderI18nTimeOptions } from '../time_options';
 
 const noop = () => {};
 const defaultProps = {
@@ -21,19 +21,19 @@ const defaultProps = {
 
 describe('EuiQuickSelect', () => {
   test('is rendered', () => {
-    const component = shallow(
+    const { container } = render(
       <RenderI18nTimeOptions>
         {(timeOptions) => (
           <EuiQuickSelect {...defaultProps} timeOptions={timeOptions} />
         )}
       </RenderI18nTimeOptions>
-    ).dive();
+    );
 
-    expect(component).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
 
   test('prevQuickSelect', () => {
-    const component = shallow(
+    const { container } = render(
       <RenderI18nTimeOptions>
         {(timeOptions) => (
           <EuiQuickSelect
@@ -47,8 +47,8 @@ describe('EuiQuickSelect', () => {
           />
         )}
       </RenderI18nTimeOptions>
-    ).dive();
+    );
 
-    expect(component).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
 });
diff --git a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select.tsx b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select.tsx
index 74c973701fc..722bd063e66 100644
--- a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select.tsx
+++ b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select.tsx
@@ -13,17 +13,19 @@ import React, {
 } from 'react';
 import moment from 'moment';
 import dateMath from '@elastic/datemath';
+
 import { htmlIdGenerator } from '../../../../services';
+import { EuiI18n } from '../../../i18n';
+import { EuiScreenReaderOnly } from '../../../accessibility';
 import { EuiButton, EuiButtonIcon } from '../../../button';
 import { EuiFlexGroup, EuiFlexItem } from '../../../flex';
-import { EuiSpacer } from '../../../spacer';
 import { EuiSelect, EuiFieldNumber } from '../../../form';
 import { EuiToolTip } from '../../../tool_tip';
-import { EuiI18n } from '../../../i18n';
-import { EuiScreenReaderOnly } from '../../../accessibility';
+
 import { ApplyTime, QuickSelect, TimeUnitId } from '../../types';
 import { TimeOptions, NEXT } from '../time_options';
 import { parseTimeParts } from './quick_select_utils';
+import { EuiQuickSelectPanel } from './quick_select_panel';
 
 type EuiQuickSelectState = QuickSelect;
 
@@ -158,77 +160,63 @@ export class EuiQuickSelect extends Component<
     const timeUnit = matchedTimeUnit ? matchedTimeUnit.text : '';
 
     return (
-      <fieldset className="euiQuickSelectPopover__panel">
-        <EuiI18n
-          token="euiQuickSelect.legendText"
-          default="Quick select a time range"
-        >
-          {(legendText: string) => (
-            // Legend needs to be the first thing in a fieldset, but we want the visible title within the flex.
-            // So we hide it, but allow screen readers to see it
-            <EuiScreenReaderOnly>
-              <legend id={this.legendId} className="euiFormLabel">
-                {legendText}
-              </legend>
-            </EuiScreenReaderOnly>
-          )}
-        </EuiI18n>
+      <EuiQuickSelectPanel
+        component="fieldset"
+        title={
+          <EuiI18n
+            token="euiQuickSelect.quickSelectTitle"
+            default="Quick select"
+          />
+        }
+        titleId={this.legendId}
+        aria-describedby={this.timeSelectionId}
+        css={{ '> div': { position: 'relative', overflow: 'visible' } }}
+      >
+        {/* Absolutely position the prev/next arrows in the top right hand corner */}
         <EuiFlexGroup
-          responsive={false}
+          css={{
+            position: 'absolute',
+            right: '0',
+            bottom: '100%',
+            transform: 'translateY(-33%)',
+          }}
           alignItems="center"
-          justifyContent="spaceBetween"
           gutterSize="s"
+          responsive={false}
         >
           <EuiFlexItem grow={false}>
             <EuiI18n
-              token="euiQuickSelect.quickSelectTitle"
-              default="Quick select"
+              token="euiQuickSelect.previousLabel"
+              default="Previous time window"
             >
-              {(quickSelectTitle: string) => (
-                <div aria-hidden className="euiFormLabel">
-                  {quickSelectTitle}
-                </div>
+              {(previousLabel: string) => (
+                <EuiToolTip content={previousLabel}>
+                  <EuiButtonIcon
+                    aria-label={previousLabel}
+                    iconType="arrowLeft"
+                    onClick={this.stepBackward}
+                  />
+                </EuiToolTip>
               )}
             </EuiI18n>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
-              <EuiFlexItem grow={false}>
-                <EuiI18n
-                  token="euiQuickSelect.previousLabel"
-                  default="Previous time window"
-                >
-                  {(previousLabel: string) => (
-                    <EuiToolTip content={previousLabel}>
-                      <EuiButtonIcon
-                        aria-label={previousLabel}
-                        iconType="arrowLeft"
-                        onClick={this.stepBackward}
-                      />
-                    </EuiToolTip>
-                  )}
-                </EuiI18n>
-              </EuiFlexItem>
-              <EuiFlexItem grow={false}>
-                <EuiI18n
-                  token="euiQuickSelect.nextLabel"
-                  default="Next time window"
-                >
-                  {(nextLabel: string) => (
-                    <EuiToolTip content={nextLabel}>
-                      <EuiButtonIcon
-                        aria-label={nextLabel}
-                        iconType="arrowRight"
-                        onClick={this.stepForward}
-                      />
-                    </EuiToolTip>
-                  )}
-                </EuiI18n>
-              </EuiFlexItem>
-            </EuiFlexGroup>
+            <EuiI18n
+              token="euiQuickSelect.nextLabel"
+              default="Next time window"
+            >
+              {(nextLabel: string) => (
+                <EuiToolTip content={nextLabel}>
+                  <EuiButtonIcon
+                    aria-label={nextLabel}
+                    iconType="arrowRight"
+                    onClick={this.stepForward}
+                  />
+                </EuiToolTip>
+              )}
+            </EuiI18n>
           </EuiFlexItem>
         </EuiFlexGroup>
-        <EuiSpacer size="s" />
         <EuiFlexGroup gutterSize="s" responsive={false}>
           <EuiFlexItem>
             <EuiI18n token="euiQuickSelect.tenseLabel" default="Time tense">
@@ -277,7 +265,8 @@ export class EuiQuickSelect extends Component<
           <EuiFlexItem grow={false}>
             <EuiButton
               aria-describedby={`${this.timeSelectionId} ${this.legendId}`}
-              className="euiQuickSelect__applyButton"
+              data-test-subj="superDatePickerQuickSelectApplyButton"
+              minWidth={0} // Allow the button to shrink
               size="s"
               onClick={this.applyQuickSelect}
               disabled={timeValue <= 0}
@@ -299,7 +288,7 @@ export class EuiQuickSelect extends Component<
             />
           </p>
         </EuiScreenReaderOnly>
-      </fieldset>
+      </EuiQuickSelectPanel>
     );
   }
 }
diff --git a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_panel.styles.ts b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_panel.styles.ts
new file mode 100644
index 00000000000..9540419cb7d
--- /dev/null
+++ b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_panel.styles.ts
@@ -0,0 +1,48 @@
+/*
+ * 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 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 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+
+import { UseEuiTheme } from '../../../../services';
+import {
+  euiFontSize,
+  euiScrollBarStyles,
+  logicalCSS,
+  logicalCSSWithFallback,
+  mathWithUnits,
+} from '../../../../global_styling';
+
+export const euiQuickSelectPanelStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
+
+  return {
+    euiQuickSelectPanel: css`
+      &:not(:first-child) {
+        ${logicalCSS('border-top', euiTheme.border.thin)}
+        ${logicalCSS('padding-top', euiTheme.size.m)}
+        ${logicalCSS('margin-top', euiTheme.size.m)}
+      }
+    `,
+    euiQuickSelectPanel__title: css`
+      float: left; /* Required for fieldset/legend elements */
+      ${logicalCSS('margin-bottom', euiTheme.size.m)}
+    `,
+    euiQuickSelectPanel__section: css`
+      clear: both; /* Required for fieldset/legend elements */
+      ${logicalCSS('margin-top', euiTheme.size.s)}
+      ${logicalCSS(
+        'max-height',
+        mathWithUnits(euiTheme.size.m, (x) => x * 12)
+      )}
+      overflow: hidden;
+      ${logicalCSSWithFallback('overflow-y', 'auto')}
+      ${euiScrollBarStyles(euiThemeContext)}
+      ${euiFontSize(euiThemeContext, 's')}
+    `,
+  };
+};
diff --git a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_panel.tsx b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_panel.tsx
new file mode 100644
index 00000000000..4553ae7cc34
--- /dev/null
+++ b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_panel.tsx
@@ -0,0 +1,51 @@
+/*
+ * 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 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 or the Server
+ * Side Public License, v 1.
+ */
+
+import React, { FunctionComponent, ReactNode } from 'react';
+
+import { useEuiMemoizedStyles } from '../../../../services';
+import { EuiTitle } from '../../../title';
+import type { CommonProps } from '../../../common';
+
+import { euiQuickSelectPanelStyles } from './quick_select_panel.styles';
+
+type EuiQuickSelectPanelProps = CommonProps & {
+  component?: 'div' | 'fieldset';
+  title?: ReactNode;
+  titleId?: string;
+  children?: ReactNode;
+};
+
+export const EuiQuickSelectPanel: FunctionComponent<
+  EuiQuickSelectPanelProps
+> = ({ component: Component = 'div', title, titleId, children, ...rest }) => {
+  const isFieldset = Component === 'fieldset';
+  const TitleComponent = isFieldset ? 'legend' : 'span';
+
+  const styles = useEuiMemoizedStyles(euiQuickSelectPanelStyles);
+
+  return (
+    <Component css={styles.euiQuickSelectPanel} {...rest}>
+      {title ? (
+        <>
+          <EuiTitle size="xxxs">
+            <TitleComponent
+              id={titleId}
+              css={styles.euiQuickSelectPanel__title}
+            >
+              {title}
+            </TitleComponent>
+          </EuiTitle>
+          <div css={styles.euiQuickSelectPanel__section}>{children}</div>
+        </>
+      ) : (
+        children
+      )}
+    </Component>
+  );
+};
diff --git a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.styles.ts b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.styles.ts
new file mode 100644
index 00000000000..144a67a0d21
--- /dev/null
+++ b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.styles.ts
@@ -0,0 +1,37 @@
+/*
+ * 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 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 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+
+import { UseEuiTheme } from '../../../../services';
+import { logicalCSS } from '../../../../global_styling';
+import { euiFormVariables } from '../../../form/form.styles';
+
+export const euiQuickSelectPopoverStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
+  const { maxWidth } = euiFormVariables(euiThemeContext);
+
+  return {
+    euiQuickSelectPopover: css`
+      ${logicalCSS('width', maxWidth)}
+      ${logicalCSS('max-width', '100%')}
+    `,
+    euiQuickSelectPopoverButton: css`
+      ${logicalCSS('border-top-right-radius', 0)}
+      ${logicalCSS('border-bottom-right-radius', 0)}
+
+      /* Adds slightly more width between the calendar icon and the dropdown arrow */
+      .euiIcon {
+        ${logicalCSS('width', euiTheme.size.base)}
+      }
+    `,
+    euiQuickSelectPopoverButton__content: css`
+      gap: ${euiTheme.size.xs};
+    `,
+  };
+};
diff --git a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.test.tsx b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.test.tsx
index c2da25261b6..1b1203a263e 100644
--- a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.test.tsx
+++ b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.test.tsx
@@ -7,9 +7,9 @@
  */
 
 import React from 'react';
-import { shallow } from 'enzyme';
 import { render } from '../../../../test/rtl';
 
+import { EuiLink } from '../../../link';
 import { RenderI18nTimeOptions } from '../time_options';
 import {
   EuiQuickSelectPopover,
@@ -17,13 +17,6 @@ import {
   EuiQuickSelectPanels,
 } from './quick_select_popover';
 
-import { EuiLink } from '../../../link';
-
-import { EuiQuickSelect } from './quick_select';
-import { EuiCommonlyUsedTimeRanges } from './commonly_used_time_ranges';
-import { EuiRecentlyUsed } from './recently_used';
-import { EuiRefreshInterval } from '../../auto_refresh/refresh_interval';
-
 const noop = () => {};
 
 const defaultProps: Omit<EuiQuickSelectPopoverProps, 'timeOptions'> = {
@@ -87,7 +80,7 @@ describe('EuiQuickSelectPanels', () => {
 
   describe('customQuickSelectRender', () => {
     it('should render Quick Select sections in default order when customQuickSelectRender is not present', () => {
-      const component = shallow(
+      const { getByTestSubject } = render(
         <RenderI18nTimeOptions>
           {(timeOptions) => (
             <EuiQuickSelectPanels
@@ -97,22 +90,19 @@ describe('EuiQuickSelectPanels', () => {
             />
           )}
         </RenderI18nTimeOptions>
-      ).dive();
-
-      const menu = component.find(
-        '[data-test-subj="superDatePickerQuickMenu"]'
       );
-
-      expect(menu.children()).toHaveLength(5);
-      expect(menu.children().at(0).is(EuiQuickSelect)).toBeTruthy();
-      expect(menu.children().at(1).is(EuiCommonlyUsedTimeRanges)).toBeTruthy();
-      expect(menu.children().at(2).is(EuiRecentlyUsed)).toBeTruthy();
-      expect(menu.children().at(3).is(EuiRefreshInterval)).toBeTruthy();
-      expect(menu.children().at(4).is('div')).toBeTruthy();
+      const menu = getByTestSubject('superDatePickerQuickMenu');
+
+      expect(menu.childElementCount).toEqual(5);
+      expect(menu.children[0].textContent).toContain('Quick select');
+      expect(menu.children[1].textContent).toContain('Commonly used');
+      expect(menu.children[2].textContent).toContain('Recently used');
+      expect(menu.children[3].textContent).toContain('Refresh every');
+      expect(menu.children[4].textContent).toContain('My custom panel');
     });
 
     it('should render Quick Select sections in a custom order customQuickSelectRender is present', () => {
-      const component = shallow(
+      const { getByTestSubject } = render(
         <RenderI18nTimeOptions>
           {(timeOptions) => (
             <EuiQuickSelectPanels
@@ -137,18 +127,15 @@ describe('EuiQuickSelectPanels', () => {
             />
           )}
         </RenderI18nTimeOptions>
-      ).dive();
-
-      const menu = component.find(
-        '[data-test-subj="superDatePickerQuickMenu"]'
       );
-
-      expect(menu.children()).toHaveLength(5);
-      expect(menu.children().at(0).is('div')).toBeTruthy();
-      expect(menu.children().at(1).is(EuiRefreshInterval)).toBeTruthy();
-      expect(menu.children().at(2).is(EuiQuickSelect)).toBeTruthy();
-      expect(menu.children().at(3).is(EuiCommonlyUsedTimeRanges)).toBeTruthy();
-      expect(menu.children().at(4).is(EuiRecentlyUsed)).toBeTruthy();
+      const menu = getByTestSubject('superDatePickerQuickMenu');
+
+      expect(menu.childElementCount).toEqual(5);
+      expect(menu.children[0].textContent).toContain('My custom panel');
+      expect(menu.children[1].textContent).toContain('Refresh every');
+      expect(menu.children[2].textContent).toContain('Quick select');
+      expect(menu.children[3].textContent).toContain('Commonly used');
+      expect(menu.children[4].textContent).toContain('Recently used');
     });
   });
 });
diff --git a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.tsx b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.tsx
index 72370d74240..b34326e509c 100644
--- a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.tsx
+++ b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.tsx
@@ -15,13 +15,14 @@ import React, {
   ReactElement,
 } from 'react';
 
+import { useEuiMemoizedStyles } from '../../../../services';
+import { useEuiI18n } from '../../../i18n';
 import { EuiButtonEmpty } from '../../../button';
 import { EuiIcon } from '../../../icon';
 import { EuiPopover } from '../../../popover';
-import { EuiTitle } from '../../../title';
-import { EuiText } from '../../../text';
-import { useEuiI18n } from '../../../i18n';
 
+import { euiQuickSelectPopoverStyles } from './quick_select_popover.styles';
+import { EuiQuickSelectPanel } from './quick_select_panel';
 import { EuiQuickSelect } from './quick_select';
 import { EuiCommonlyUsedTimeRanges } from './commonly_used_time_ranges';
 import { EuiRecentlyUsed } from './recently_used';
@@ -91,10 +92,12 @@ export const EuiQuickSelectPopover: FunctionComponent<
     'Date quick select'
   );
 
+  const styles = useEuiMemoizedStyles(euiQuickSelectPopoverStyles);
+
   const quickSelectButton = (
     <EuiButtonEmpty
-      className="euiFormControlLayout__prepend"
-      contentProps={{ className: 'euiQuickSelectPopover__buttonContent' }}
+      css={styles.euiQuickSelectPopoverButton}
+      contentProps={{ css: styles.euiQuickSelectPopoverButton__content }}
       onClick={togglePopover}
       aria-label={buttonlabel}
       title={buttonlabel}
@@ -145,6 +148,8 @@ export const EuiQuickSelectPanels: FunctionComponent<
   applyTime,
   prevQuickSelect,
 }) => {
+  const styles = useEuiMemoizedStyles(euiQuickSelectPopoverStyles);
+
   const quickSelectElement = (
     <EuiQuickSelect
       applyTime={applyTime}
@@ -187,21 +192,17 @@ export const EuiQuickSelectPanels: FunctionComponent<
     }
     return customQuickSelectPanels.map(({ title, content }) => {
       return (
-        <div key={title} className="euiQuickSelectPopover__panel">
-          <EuiTitle size="xxxs">
-            <span>{title}</span>
-          </EuiTitle>
-          <EuiText size="s" className="euiQuickSelectPopover__section">
-            {React.cloneElement(content, { applyTime })}
-          </EuiText>
-        </div>
+        <EuiQuickSelectPanel key={title} title={title}>
+          {React.cloneElement(content, { applyTime })}
+        </EuiQuickSelectPanel>
       );
     });
   }, [customQuickSelectPanels, applyTime]);
 
   return (
     <div
-      className="euiQuickSelectPopover__content"
+      css={styles.euiQuickSelectPopover}
+      className="euiQuickSelectPopover"
       data-test-subj="superDatePickerQuickMenu"
     >
       {customQuickSelectRender ? (
diff --git a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/recently_used.tsx b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/recently_used.tsx
index 1734c9582b5..afce2eb881a 100644
--- a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/recently_used.tsx
+++ b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/recently_used.tsx
@@ -7,13 +7,15 @@
  */
 
 import React, { FunctionComponent } from 'react';
-import { PrettyDuration } from '../pretty_duration';
 
-import { EuiI18n } from '../../../i18n';
 import { useGeneratedHtmlId } from '../../../../services';
-import { EuiTitle } from '../../../title';
+import { useEuiI18n } from '../../../i18n';
+import { EuiFlexGroup, EuiFlexItem } from '../../../flex';
 import { EuiLink } from '../../../link';
+
 import { DurationRange, ApplyTime } from '../../types';
+import { PrettyDuration } from '../pretty_duration';
+import { EuiQuickSelectPanel } from './quick_select_panel';
 
 export interface EuiRecentlyUsedProps {
   applyTime: ApplyTime;
@@ -28,6 +30,10 @@ export const EuiRecentlyUsed: FunctionComponent<EuiRecentlyUsedProps> = ({
   dateFormat,
   recentlyUsedRanges = [],
 }) => {
+  const title = useEuiI18n(
+    'euiRecentlyUsed.legend',
+    'Recently used date ranges'
+  );
   const legendId = useGeneratedHtmlId();
 
   if (recentlyUsedRanges.length === 0) {
@@ -39,10 +45,7 @@ export const EuiRecentlyUsed: FunctionComponent<EuiRecentlyUsedProps> = ({
       applyTime({ start, end });
     };
     return (
-      <li
-        className="euiQuickSelectPopover__sectionItem euiQuickSelectPopover__sectionItem--recentlyUsed"
-        key={`${start}-${end}`}
-      >
+      <EuiFlexItem component="li" key={`${start}-${end}`}>
         <EuiLink onClick={applyRecentlyUsed}>
           <PrettyDuration
             timeFrom={start}
@@ -51,24 +54,16 @@ export const EuiRecentlyUsed: FunctionComponent<EuiRecentlyUsedProps> = ({
             dateFormat={dateFormat}
           />
         </EuiLink>
-      </li>
+      </EuiFlexItem>
     );
   });
 
   return (
-    <fieldset className="euiQuickSelectPopover__panel">
-      <EuiTitle size="xxxs">
-        <legend id={legendId} className="euiQuickSelectPopover__panelTitle">
-          <EuiI18n
-            token="euiRecentlyUsed.legend"
-            default="Recently used date ranges"
-          />
-        </legend>
-      </EuiTitle>
-      <div className="euiQuickSelectPopover__section">
-        <ul>{links}</ul>
-      </div>
-    </fieldset>
+    <EuiQuickSelectPanel component="fieldset" titleId={legendId} title={title}>
+      <EuiFlexGroup component="ul" gutterSize="s" direction="column">
+        {links}
+      </EuiFlexGroup>
+    </EuiQuickSelectPanel>
   );
 };
 
diff --git a/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.a11y.tsx b/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.a11y.tsx
index 8742f127480..afb50029634 100644
--- a/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.a11y.tsx
+++ b/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.a11y.tsx
@@ -63,7 +63,7 @@ describe('EuiSuperDatePicker', () => {
     });
 
     it('has zero violations when quick select menu is open', () => {
-      cy.get('button.euiFormControlLayout__prepend').click();
+      cy.get('[data-test-subj="superDatePickerToggleQuickMenuButton"]').click();
       cy.get('div.euiPanel').contains('Quick select').should('exist');
       cy.checkAxe();
     });