diff --git a/src/plugins/data/common/constants.ts b/src/plugins/data/common/constants.ts
index 863877322ad9..1de7ae5df034 100644
--- a/src/plugins/data/common/constants.ts
+++ b/src/plugins/data/common/constants.ts
@@ -63,4 +63,5 @@ export const UI_SETTINGS = {
   QUERY_ENHANCEMENTS_ENABLED: 'query:enhancements:enabled',
   QUERY_DATAFRAME_HYDRATION_STRATEGY: 'query:dataframe:hydrationStrategy',
   SEARCH_QUERY_LANGUAGE_BLOCKLIST: 'search:queryLanguageBlocklist',
+  NEW_HOME_PAGE: 'home:useNewHomePage',
 } as const;
diff --git a/src/plugins/data/public/ui/filter_bar/_global_filter_group.scss b/src/plugins/data/public/ui/filter_bar/_global_filter_group.scss
index b3bf36830ab7..e9300b9f6e79 100644
--- a/src/plugins/data/public/ui/filter_bar/_global_filter_group.scss
+++ b/src/plugins/data/public/ui/filter_bar/_global_filter_group.scss
@@ -55,3 +55,12 @@
     margin-top: $euiSize * -1;
   }
 }
+
+.globalFilterGroup__removeAllFilters {
+  color: $euiColorDangerText;
+}
+
+.globalFilterGroup__filterPrefix {
+  padding-top: 10px;
+  padding-right: 10px;
+}
diff --git a/src/plugins/data/public/ui/filter_bar/filter_bar.tsx b/src/plugins/data/public/ui/filter_bar/filter_bar.tsx
index 964b1fe82fb7..ec27369abe31 100644
--- a/src/plugins/data/public/ui/filter_bar/filter_bar.tsx
+++ b/src/plugins/data/public/ui/filter_bar/filter_bar.tsx
@@ -35,6 +35,7 @@ import {
   EuiFlexItem,
   EuiPopover,
   EuiResizeObserver,
+  EuiText,
 } from '@elastic/eui';
 import { FormattedMessage, InjectedIntl, injectI18n } from '@osd/i18n/react';
 import classNames from 'classnames';
@@ -43,20 +44,10 @@ import { stringify } from '@osd/std';
 
 import { FilterEditor } from './filter_editor';
 import { FilterItem } from './filter_item';
-import { FilterOptions } from './filter_options';
 import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public';
 import { IIndexPattern } from '../..';
-import {
-  buildEmptyFilter,
-  Filter,
-  enableFilter,
-  disableFilter,
-  pinFilter,
-  toggleFilterDisabled,
-  toggleFilterNegated,
-  unpinFilter,
-  UI_SETTINGS,
-} from '../../../common';
+import { buildEmptyFilter, Filter, UI_SETTINGS } from '../../../common';
+import { FilterOptions } from './filter_options';
 
 interface Props {
   filters: Filter[];
@@ -74,6 +65,7 @@ function FilterBarUI(props: Props) {
   const [filterWidth, setFilterWidth] = useState(maxFilterWidth);
 
   const uiSettings = opensearchDashboards.services.uiSettings;
+  const useNewHeader = Boolean(uiSettings!.get(UI_SETTINGS.NEW_HOME_PAGE));
   if (!uiSettings) return null;
 
   function onFiltersUpdated(filters: Filter[]) {
@@ -177,40 +169,6 @@ function FilterBarUI(props: Props) {
     onFiltersUpdated(filters);
   }
 
-  function onEnableAll() {
-    const filters = props.filters.map(enableFilter);
-    onFiltersUpdated(filters);
-  }
-
-  function onDisableAll() {
-    const filters = props.filters.map(disableFilter);
-    onFiltersUpdated(filters);
-  }
-
-  function onPinAll() {
-    const filters = props.filters.map(pinFilter);
-    onFiltersUpdated(filters);
-  }
-
-  function onUnpinAll() {
-    const filters = props.filters.map(unpinFilter);
-    onFiltersUpdated(filters);
-  }
-
-  function onToggleAllNegated() {
-    const filters = props.filters.map(toggleFilterNegated);
-    onFiltersUpdated(filters);
-  }
-
-  function onToggleAllDisabled() {
-    const filters = props.filters.map(toggleFilterDisabled);
-    onFiltersUpdated(filters);
-  }
-
-  function onRemoveAll() {
-    onFiltersUpdated([]);
-  }
-
   const classes = classNames('globalFilterBar', props.className);
 
   return (
@@ -221,15 +179,18 @@ function FilterBarUI(props: Props) {
       responsive={false}
     >
       <EuiFlexItem className="globalFilterGroup__branch" grow={false}>
-        <FilterOptions
-          onEnableAll={onEnableAll}
-          onDisableAll={onDisableAll}
-          onPinAll={onPinAll}
-          onUnpinAll={onUnpinAll}
-          onToggleAllNegated={onToggleAllNegated}
-          onToggleAllDisabled={onToggleAllDisabled}
-          onRemoveAll={onRemoveAll}
-        />
+        {useNewHeader ? (
+          <EuiText size="s" className="globalFilterGroup__filterPrefix">
+            Filters:
+          </EuiText>
+        ) : (
+          <FilterOptions
+            filters={props.filters!}
+            onFiltersUpdated={props.onFiltersUpdated}
+            intl={props.intl}
+            indexPatterns={props.indexPatterns}
+          />
+        )}
       </EuiFlexItem>
 
       <EuiFlexItem className="globalFilterGroup__filterFlexItem">
diff --git a/src/plugins/data/public/ui/filter_bar/filter_options.tsx b/src/plugins/data/public/ui/filter_bar/filter_options.tsx
index b61bc1804dc3..c565fd90e44e 100644
--- a/src/plugins/data/public/ui/filter_bar/filter_options.tsx
+++ b/src/plugins/data/public/ui/filter_bar/filter_options.tsx
@@ -29,177 +29,391 @@
  */
 
 import {
-  EuiSmallButtonIcon,
   EuiContextMenu,
   EuiPopover,
-  EuiPopoverTitle,
   EuiToolTip,
+  EuiButton,
+  EuiPopoverFooter,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSmallButtonEmpty,
+  EuiIcon,
+  EuiResizeObserver,
+  EuiContextMenuPanel,
 } from '@elastic/eui';
-import { FormattedMessage, InjectedIntl, injectI18n } from '@osd/i18n/react';
-import { Component } from 'react';
+import { stringify } from '@osd/std';
+import { InjectedIntl, injectI18n } from '@osd/i18n/react';
+import { i18n } from '@osd/i18n';
 import React from 'react';
+import {
+  buildEmptyFilter,
+  Filter,
+  enableFilter,
+  disableFilter,
+  pinFilter,
+  toggleFilterDisabled,
+  toggleFilterNegated,
+  unpinFilter,
+  UI_SETTINGS,
+  IIndexPattern,
+} from '../../../common';
+import { FilterEditor } from './filter_editor';
+import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public';
+import { SavedQueryManagementComponent } from '../saved_query_management';
+import { SavedQuery, SavedQueryService } from '../../query';
 
 interface Props {
-  onEnableAll: () => void;
-  onDisableAll: () => void;
-  onPinAll: () => void;
-  onUnpinAll: () => void;
-  onToggleAllNegated: () => void;
-  onToggleAllDisabled: () => void;
-  onRemoveAll: () => void;
   intl: InjectedIntl;
+  filters: Filter[];
+  indexPatterns: IIndexPattern[];
+  savedQueryService: SavedQueryService;
+  // Show when user has privileges to save
+  showSaveQuery?: boolean;
+  onSave: () => void;
+  onSaveAsNew: () => void;
+  onLoad: (savedQuery: SavedQuery) => void;
+  onClearSavedQuery: () => void;
+  onFiltersUpdated?: (filters: Filter[]) => void;
+  loadedSavedQuery?: SavedQuery;
+  useSaveQueryMenu: boolean;
 }
+const maxFilterWidth = 600;
 
-interface State {
-  isPopoverOpen: boolean;
-}
+const FilterOptionsUI = (props: Props) => {
+  const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);
+  const [renderedComponent, setRenderedComponent] = React.useState('menu');
+  const [filterWidth, setFilterWidth] = React.useState(maxFilterWidth);
+  const [showSaveQueryButton, setShowSaveQueryButton] = React.useState(true);
+  const opensearchDashboards = useOpenSearchDashboards();
+  const uiSettings = opensearchDashboards.services.uiSettings;
+  const isPinned = uiSettings!.get(UI_SETTINGS.FILTERS_PINNED_BY_DEFAULT);
+  const useNewHeader = Boolean(uiSettings!.get(UI_SETTINGS.NEW_HOME_PAGE));
+  const [indexPattern] = props.indexPatterns;
+  const index = indexPattern && indexPattern.id;
+  const newFilter = buildEmptyFilter(isPinned, index);
 
-class FilterOptionsUI extends Component<Props, State> {
-  public state: State = {
-    isPopoverOpen: false,
+  const togglePopover = () => {
+    setRenderedComponent('menu');
+    setShowSaveQueryButton(true);
+    setIsPopoverOpen((prevState) => !prevState);
   };
 
-  public togglePopover = () => {
-    this.setState((prevState) => ({
-      isPopoverOpen: !prevState.isPopoverOpen,
-    }));
+  const closePopover = () => {
+    setIsPopoverOpen(false);
   };
 
-  public closePopover = () => {
-    this.setState({ isPopoverOpen: false });
+  function onFiltersUpdated(filters: Filter[]) {
+    if (props.onFiltersUpdated) {
+      props.onFiltersUpdated(filters);
+    }
+  }
+
+  function onEnableAll() {
+    const filters = props.filters.map(enableFilter);
+    onFiltersUpdated(filters);
+  }
+
+  function onDisableAll() {
+    const filters = props.filters.map(disableFilter);
+    onFiltersUpdated(filters);
+  }
+
+  function onPinAll() {
+    const filters = props.filters.map(pinFilter);
+    onFiltersUpdated(filters);
+  }
+
+  function onUnpinAll() {
+    const filters = props.filters.map(unpinFilter);
+    onFiltersUpdated(filters);
+  }
+
+  function onToggleAllNegated() {
+    const filters = props.filters.map(toggleFilterNegated);
+    onFiltersUpdated(filters);
+  }
+
+  function onToggleAllDisabled() {
+    const filters = props.filters.map(toggleFilterDisabled);
+    onFiltersUpdated(filters);
+  }
+
+  function onRemoveAll() {
+    onFiltersUpdated([]);
+  }
+
+  function onAdd(filter: Filter) {
+    setIsPopoverOpen(false);
+    const filters = [...props.filters, filter];
+    onFiltersUpdated(filters);
+  }
+
+  function onResize(dimensions: { height: number; width: number }) {
+    setFilterWidth(dimensions.width);
+  }
+
+  const addFilterPanelItem = {
+    name: props.intl.formatMessage({
+      id: 'data.filter.options.addFiltersButtonLabel',
+      defaultMessage: 'Add filters',
+    }),
+    icon: 'plusInCircle',
+    onClick: () => {
+      setRenderedComponent('addFilter');
+      setShowSaveQueryButton(false);
+    },
+    'data-test-subj': 'addFilters',
+    disabled: false,
   };
 
-  public render() {
-    const panelTree = {
+  const disableMenuOption = props.filters.length === 0 && useNewHeader;
+
+  const panelTree = [
+    {
       id: 0,
+      title: 'Filters',
       items: [
         {
-          name: this.props.intl.formatMessage({
+          name: props.intl.formatMessage({
             id: 'data.filter.options.enableAllFiltersButtonLabel',
             defaultMessage: 'Enable all',
           }),
           icon: 'eye',
           onClick: () => {
-            this.closePopover();
-            this.props.onEnableAll();
+            closePopover();
+            onEnableAll();
           },
           'data-test-subj': 'enableAllFilters',
+          disabled: disableMenuOption,
         },
         {
-          name: this.props.intl.formatMessage({
+          name: props.intl.formatMessage({
             id: 'data.filter.options.disableAllFiltersButtonLabel',
             defaultMessage: 'Disable all',
           }),
           icon: 'eyeClosed',
           onClick: () => {
-            this.closePopover();
-            this.props.onDisableAll();
+            closePopover();
+            onDisableAll();
           },
           'data-test-subj': 'disableAllFilters',
+          disabled: disableMenuOption,
         },
         {
-          name: this.props.intl.formatMessage({
+          name: props.intl.formatMessage({
             id: 'data.filter.options.pinAllFiltersButtonLabel',
             defaultMessage: 'Pin all',
           }),
           icon: 'pin',
           onClick: () => {
-            this.closePopover();
-            this.props.onPinAll();
+            closePopover();
+            onPinAll();
           },
           'data-test-subj': 'pinAllFilters',
+          disabled: disableMenuOption,
         },
         {
-          name: this.props.intl.formatMessage({
+          name: props.intl.formatMessage({
             id: 'data.filter.options.unpinAllFiltersButtonLabel',
             defaultMessage: 'Unpin all',
           }),
           icon: 'pin',
           onClick: () => {
-            this.closePopover();
-            this.props.onUnpinAll();
+            closePopover();
+            onUnpinAll();
           },
           'data-test-subj': 'unpinAllFilters',
+          disabled: disableMenuOption,
         },
         {
-          name: this.props.intl.formatMessage({
+          name: props.intl.formatMessage({
             id: 'data.filter.options.invertNegatedFiltersButtonLabel',
             defaultMessage: 'Invert inclusion',
           }),
           icon: 'invert',
           onClick: () => {
-            this.closePopover();
-            this.props.onToggleAllNegated();
+            closePopover();
+            onToggleAllNegated();
           },
           'data-test-subj': 'invertInclusionAllFilters',
+          disabled: disableMenuOption,
         },
         {
-          name: this.props.intl.formatMessage({
+          name: props.intl.formatMessage({
             id: 'data.filter.options.invertDisabledFiltersButtonLabel',
             defaultMessage: 'Invert enabled/disabled',
           }),
           icon: 'eye',
           onClick: () => {
-            this.closePopover();
-            this.props.onToggleAllDisabled();
+            closePopover();
+            onToggleAllDisabled();
           },
           'data-test-subj': 'invertEnableDisableAllFilters',
+          disabled: disableMenuOption,
         },
         {
-          name: this.props.intl.formatMessage({
+          name: props.intl.formatMessage({
             id: 'data.filter.options.deleteAllFiltersButtonLabel',
             defaultMessage: 'Remove all',
           }),
           icon: 'trash',
           onClick: () => {
-            this.closePopover();
-            this.props.onRemoveAll();
+            closePopover();
+            onRemoveAll();
           },
           'data-test-subj': 'removeAllFilters',
+          disabled: disableMenuOption,
+          className: useNewHeader ? 'globalFilterGroup__removeAllFilters' : '',
         },
       ],
-    };
-
-    return (
-      <EuiPopover
-        id="popoverForAllFilters"
-        className="globalFilterGroup__allFiltersPopover"
-        isOpen={this.state.isPopoverOpen}
-        closePopover={this.closePopover}
-        button={
-          <EuiToolTip
-            content={this.props.intl.formatMessage({
-              id: 'data.filter.options.changeAllFiltersButtonLabel',
-              defaultMessage: 'Change all filters',
-            })}
-            delay="long"
-            position="bottom"
-          >
-            <EuiSmallButtonIcon
-              onClick={this.togglePopover}
-              iconType="filter"
-              aria-label={this.props.intl.formatMessage({
-                id: 'data.filter.options.changeAllFiltersButtonLabel',
-                defaultMessage: 'Change all filters',
-              })}
-              data-test-subj="showFilterActions"
-            />
-          </EuiToolTip>
-        }
-        anchorPosition="rightUp"
-        panelPaddingSize="none"
-        repositionOnScroll
-      >
-        <EuiPopoverTitle paddingSize="s">
-          <FormattedMessage
-            id="data.filter.searchBar.changeAllFiltersTitle"
-            defaultMessage="Change all filters"
-          />
-        </EuiPopoverTitle>
-        <EuiContextMenu initialPanelId={0} panels={[panelTree]} size="s" />
-      </EuiPopover>
-    );
+    },
+  ];
+
+  const handleSave = () => {
+    if (props.onSave) {
+      props.onSave();
+    }
+    setIsPopoverOpen(false);
+  };
+
+  const saveQueryPanel = (
+    <EuiContextMenuPanel
+      items={[
+        <SavedQueryManagementComponent
+          showSaveQuery={props.showSaveQuery}
+          loadedSavedQuery={props.loadedSavedQuery}
+          onSave={handleSave}
+          onSaveAsNew={props.onSaveAsNew!}
+          onLoad={props.onLoad!}
+          savedQueryService={props.savedQueryService!}
+          onClearSavedQuery={props.onClearSavedQuery!}
+          closeMenuPopover={() => {
+            setIsPopoverOpen(false);
+          }}
+        />,
+      ]}
+    />
+  );
+
+  const menuPanel = <EuiContextMenu initialPanelId={0} panels={panelTree} size="s" />;
+  const addFilterPanel = (
+    <EuiContextMenuPanel
+      items={[
+        <EuiResizeObserver onResize={onResize}>
+          {(resizeRef) => (
+            <div style={{ width: maxFilterWidth, maxWidth: '100%' }} ref={resizeRef}>
+              <EuiFlexItem style={{ width: filterWidth }} grow={false}>
+                <FilterEditor
+                  filter={newFilter}
+                  indexPatterns={props.indexPatterns}
+                  onSubmit={onAdd}
+                  onCancel={() => setIsPopoverOpen(false)}
+                  key={stringify(newFilter)}
+                />
+              </EuiFlexItem>
+            </div>
+          )}
+        </EuiResizeObserver>,
+      ]}
+    />
+  );
+  const renderComponent = () => {
+    switch (renderedComponent) {
+      case 'menu':
+        return menuPanel;
+      case 'addFilter':
+        return addFilterPanel;
+      case 'saveQuery':
+        return saveQueryPanel;
+    }
+  };
+
+  if (useNewHeader) {
+    panelTree[0].items.unshift(addFilterPanelItem);
   }
-}
+
+  const label = i18n.translate('data.search.searchBar.savedQueryPopoverButtonText', {
+    defaultMessage: 'See saved queries',
+  });
+
+  const savedQueryPopoverButton = (
+    <EuiSmallButtonEmpty
+      onClick={togglePopover}
+      aria-label={label}
+      data-test-subj="saved-query-management-popover-button"
+      className="osdSavedQueryManagement__popoverButton"
+      title={label}
+    >
+      <EuiIcon type="save" className="euiQuickSelectPopover__buttonText" />
+    </EuiSmallButtonEmpty>
+  );
+
+  const filterPopoverButton = (
+    <EuiToolTip
+      content={props.intl.formatMessage({
+        id: 'data.filter.options.changeAllFiltersButtonLabel',
+        defaultMessage: 'Change all filters',
+      })}
+      delay="long"
+      position="bottom"
+    >
+      <EuiSmallButtonEmpty
+        onClick={togglePopover}
+        aria-label={props.intl.formatMessage({
+          id: 'data.filter.options.changeAllFiltersButtonLabel',
+          defaultMessage: 'Change all filters',
+        })}
+        data-test-subj="showFilterActions"
+      >
+        <EuiIcon type="filter" className="euiQuickSelectPopover__buttonText" />
+        {useNewHeader && <EuiIcon type="arrowDown" />}
+      </EuiSmallButtonEmpty>
+    </EuiToolTip>
+  );
+
+  return (
+    <EuiPopover
+      id="popoverForAllFilters"
+      className="globalFilterGroup__allFiltersPopover"
+      isOpen={isPopoverOpen}
+      closePopover={closePopover}
+      button={props.useSaveQueryMenu ? savedQueryPopoverButton : filterPopoverButton}
+      anchorPosition="downLeft"
+      panelPaddingSize="none"
+      ownFocus
+      buffer={-8}
+      repositionOnScroll
+    >
+      {useNewHeader ? renderComponent() : props.useSaveQueryMenu ? saveQueryPanel : menuPanel}
+      {useNewHeader && showSaveQueryButton && (
+        <EuiPopoverFooter>
+          <EuiFlexGroup justifyContent="spaceAround">
+            <EuiFlexItem>
+              <EuiButton
+                size="s"
+                fill={false}
+                aria-label={i18n.translate(
+                  'data.search.searchBar.savedQueryPopoverSaveButtonAriaLabel',
+                  {
+                    defaultMessage: 'Save a new saved query',
+                  }
+                )}
+                data-test-subj="saved-query-management-save-button"
+                onClick={() => {
+                  setRenderedComponent('saveQuery');
+                  setShowSaveQueryButton(false);
+                }}
+              >
+                {i18n.translate('data.search.searchBar.savedQueryPopoverSaveButtonText', {
+                  defaultMessage: 'Save query',
+                })}
+              </EuiButton>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiPopoverFooter>
+      )}
+    </EuiPopover>
+  );
+};
 
 export const FilterOptions = injectI18n(FilterOptionsUI);
diff --git a/src/plugins/data/public/ui/saved_query_management/__snapshots__/saved_query_management_component.test.tsx.snap b/src/plugins/data/public/ui/saved_query_management/__snapshots__/saved_query_management_component.test.tsx.snap
deleted file mode 100644
index 4656759e60de..000000000000
--- a/src/plugins/data/public/ui/saved_query_management/__snapshots__/saved_query_management_component.test.tsx.snap
+++ /dev/null
@@ -1,68 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Saved query management component has a popover button 1`] = `
-<EuiPopover
-  anchorPosition="downLeft"
-  buffer={-8}
-  button={
-    <EuiSmallButtonEmpty
-      aria-label="See saved queries"
-      className="osdSavedQueryManagement__popoverButton"
-      data-test-subj="saved-query-management-popover-button"
-      onClick={[Function]}
-      title="See saved queries"
-    >
-      <EuiIcon
-        className="euiQuickSelectPopover__buttonText"
-        type="save"
-      />
-    </EuiSmallButtonEmpty>
-  }
-  closePopover={[Function]}
-  display="inlineBlock"
-  hasArrow={true}
-  id="savedQueryPopover"
-  isOpen={false}
-  ownFocus={true}
-  panelPaddingSize="none"
-  repositionOnScroll={true}
->
-  <div
-    className="osdSavedQueryManagement__popover"
-    data-test-subj="saved-query-management-popover"
-  >
-    <EuiPopoverTitle
-      id="savedQueryManagementPopoverTitle"
-    >
-      Saved Queries
-    </EuiPopoverTitle>
-    <EuiText
-      className="osdSavedQueryManagement__text"
-      color="subdued"
-      size="s"
-    >
-      <p>
-        There are no saved queries. Save query text and filters that you want to use again.
-      </p>
-    </EuiText>
-    <EuiSpacer
-      size="s"
-    />
-    <EuiPopoverFooter>
-      <EuiFlexGroup
-        alignItems="center"
-        direction="rowReverse"
-        gutterSize="s"
-        justifyContent="flexEnd"
-        responsive={false}
-        wrap={true}
-      >
-        <EuiFlexItem />
-        <EuiFlexItem
-          grow={false}
-        />
-      </EuiFlexGroup>
-    </EuiPopoverFooter>
-  </div>
-</EuiPopover>
-`;
diff --git a/src/plugins/data/public/ui/saved_query_management/saved_query_management_component.test.tsx b/src/plugins/data/public/ui/saved_query_management/saved_query_management_component.test.tsx
index a7cdb6c57bbb..2345f0b94afc 100644
--- a/src/plugins/data/public/ui/saved_query_management/saved_query_management_component.test.tsx
+++ b/src/plugins/data/public/ui/saved_query_management/saved_query_management_component.test.tsx
@@ -6,6 +6,8 @@
 import React from 'react';
 import { SavedQueryManagementComponent } from './saved_query_management_component';
 import { shallowWithIntl } from 'test_utils/enzyme_helpers';
+import { Query } from 'src/plugins/data/common';
+import { SavedQueryAttributes } from '../../query';
 
 const mockProps = () => ({
   savedQueryService: {
@@ -20,15 +22,52 @@ const mockProps = () => ({
   onSaveAsNew: jest.fn(),
   onLoad: jest.fn(),
   onClearSavedQuery: jest.fn(),
+  showSaveQuery: true,
+  loadedSavedQuery: {
+    id: '1',
+    attributes: {
+      name: 'Test Query',
+      title: '',
+      description: '',
+      query: { query: '', language: 'kuery' } as Query,
+    } as SavedQueryAttributes,
+  },
 });
 
 describe('Saved query management component', () => {
-  it('has a popover button', () => {
-    const props = {
-      ...mockProps(),
-    };
-    const component = shallowWithIntl(<SavedQueryManagementComponent {...props} />);
-    const savedQueryPopoverButton = component.find('#savedQueryPopover');
-    expect(savedQueryPopoverButton).toMatchSnapshot();
+  it('should render without errors', () => {
+    const props = mockProps();
+    const wrapper = shallowWithIntl(<SavedQueryManagementComponent {...props} />);
+    expect(wrapper.exists()).toBe(true);
+  });
+
+  it('should call onSave when save button is clicked', () => {
+    const props = mockProps();
+    const wrapper = shallowWithIntl(<SavedQueryManagementComponent {...props} />);
+    const saveButton = wrapper
+      .find('[data-test-subj="saved-query-management-save-changes-button"]')
+      .at(0);
+    saveButton.simulate('click');
+    expect(props.onSave).toHaveBeenCalled();
+  });
+
+  it('should call onSaveAsNew when save as new button is clicked', () => {
+    const props = mockProps();
+    const wrapper = shallowWithIntl(<SavedQueryManagementComponent {...props} />);
+    const saveAsNewButton = wrapper
+      .find('[data-test-subj="saved-query-management-save-as-new-button"]')
+      .at(0);
+    saveAsNewButton.simulate('click');
+    expect(props.onSaveAsNew).toHaveBeenCalled();
+  });
+
+  it('should call onClearSavedQuery when clear saved query button is clicked', () => {
+    const props = mockProps();
+    const wrapper = shallowWithIntl(<SavedQueryManagementComponent {...props} />);
+    const clearSavedQueryButton = wrapper.find(
+      '[data-test-subj="saved-query-management-clear-button"]'
+    );
+    clearSavedQueryButton.simulate('click');
+    expect(props.onClearSavedQuery).toHaveBeenCalled();
   });
 });
diff --git a/src/plugins/data/public/ui/saved_query_management/saved_query_management_component.tsx b/src/plugins/data/public/ui/saved_query_management/saved_query_management_component.tsx
index 8504ec858b0d..0ec90f61ae09 100644
--- a/src/plugins/data/public/ui/saved_query_management/saved_query_management_component.tsx
+++ b/src/plugins/data/public/ui/saved_query_management/saved_query_management_component.tsx
@@ -29,10 +29,8 @@
  */
 
 import {
-  EuiPopover,
   EuiPopoverTitle,
   EuiPopoverFooter,
-  EuiSmallButtonEmpty,
   EuiButtonEmpty,
   EuiButton,
   EuiFlexGroup,
@@ -41,7 +39,6 @@ import {
   EuiPagination,
   EuiText,
   EuiSpacer,
-  EuiIcon,
 } from '@elastic/eui';
 
 import { i18n } from '@osd/i18n';
@@ -59,6 +56,7 @@ interface Props {
   onSaveAsNew: () => void;
   onLoad: (savedQuery: SavedQuery) => void;
   onClearSavedQuery: () => void;
+  closeMenuPopover?: () => void;
 }
 
 export function SavedQueryManagementComponent({
@@ -69,8 +67,9 @@ export function SavedQueryManagementComponent({
   onLoad,
   onClearSavedQuery,
   savedQueryService,
+  closeMenuPopover,
 }: Props) {
-  const [isOpen, setIsOpen] = useState(false);
+  const [isOpen, setIsOpen] = useState(true);
   const [savedQueries, setSavedQueries] = useState([] as SavedQuery[]);
   const [count, setTotalCount] = useState(0);
   const [activePage, setActivePage] = useState(0);
@@ -100,11 +99,12 @@ export function SavedQueryManagementComponent({
     }
   }, [isOpen, activePage, savedQueryService]);
 
-  const handleTogglePopover = useCallback(() => setIsOpen((currentState) => !currentState), [
-    setIsOpen,
-  ]);
-
-  const handleClosePopover = useCallback(() => setIsOpen(false), []);
+  const handleClosePopover = useCallback(() => {
+    setIsOpen(false);
+    if (closeMenuPopover) {
+      closeMenuPopover();
+    }
+  }, [closeMenuPopover]);
 
   const handleSave = useCallback(() => {
     handleClosePopover();
@@ -170,21 +170,6 @@ export function SavedQueryManagementComponent({
   const goToPage = (pageNumber: number) => {
     setActivePage(pageNumber);
   };
-  const label = i18n.translate('data.search.searchBar.savedQueryPopoverButtonText', {
-    defaultMessage: 'See saved queries',
-  });
-
-  const savedQueryPopoverButton = (
-    <EuiSmallButtonEmpty
-      onClick={handleTogglePopover}
-      aria-label={label}
-      data-test-subj="saved-query-management-popover-button"
-      className="osdSavedQueryManagement__popoverButton"
-      title={label}
-    >
-      <EuiIcon type="save" className="euiQuickSelectPopover__buttonText" />
-    </EuiSmallButtonEmpty>
-  );
 
   const savedQueryRows = () => {
     const savedQueriesWithoutCurrent = savedQueries.filter((savedQuery) => {
@@ -208,150 +193,130 @@ export function SavedQueryManagementComponent({
   };
 
   return (
-    <Fragment>
-      <EuiPopover
-        id="savedQueryPopover"
-        button={savedQueryPopoverButton}
-        isOpen={isOpen}
-        closePopover={handleClosePopover}
-        anchorPosition="downLeft"
-        panelPaddingSize="none"
-        buffer={-8}
-        ownFocus
-        repositionOnScroll
-      >
-        <div
-          className="osdSavedQueryManagement__popover"
-          data-test-subj="saved-query-management-popover"
+    <div
+      className="osdSavedQueryManagement__popover"
+      data-test-subj="saved-query-management-popover"
+    >
+      <EuiPopoverTitle id={'savedQueryManagementPopoverTitle'}>
+        {savedQueryPopoverTitleText}
+      </EuiPopoverTitle>
+      {savedQueries.length > 0 ? (
+        <Fragment>
+          <EuiText size="s" color="subdued" className="osdSavedQueryManagement__text">
+            <p>{savedQueryDescriptionText}</p>
+          </EuiText>
+          <div className="osdSavedQueryManagement__listWrapper">
+            <EuiListGroup
+              flush={true}
+              className="osdSavedQueryManagement__list"
+              aria-labelledby={'savedQueryManagementPopoverTitle'}
+            >
+              {savedQueryRows()}
+            </EuiListGroup>
+          </div>
+          <EuiPagination
+            className="osdSavedQueryManagement__pagination"
+            pageCount={Math.ceil(count / perPage)}
+            activePage={activePage}
+            onPageClick={goToPage}
+          />
+        </Fragment>
+      ) : (
+        <Fragment>
+          <EuiText size="s" color="subdued" className="osdSavedQueryManagement__text">
+            <p>{noSavedQueriesDescriptionText}</p>
+          </EuiText>
+          <EuiSpacer size="s" />
+        </Fragment>
+      )}
+      <EuiPopoverFooter>
+        <EuiFlexGroup
+          direction="rowReverse"
+          gutterSize="s"
+          alignItems="center"
+          justifyContent="flexEnd"
+          responsive={false}
+          wrap={true}
         >
-          <EuiPopoverTitle id={'savedQueryManagementPopoverTitle'}>
-            {savedQueryPopoverTitleText}
-          </EuiPopoverTitle>
-          {savedQueries.length > 0 ? (
+          {showSaveQuery && loadedSavedQuery && (
             <Fragment>
-              <EuiText size="s" color="subdued" className="osdSavedQueryManagement__text">
-                <p>{savedQueryDescriptionText}</p>
-              </EuiText>
-              <div className="osdSavedQueryManagement__listWrapper">
-                <EuiListGroup
-                  flush={true}
-                  className="osdSavedQueryManagement__list"
-                  aria-labelledby={'savedQueryManagementPopoverTitle'}
+              <EuiFlexItem grow={false}>
+                <EuiButton
+                  size="s"
+                  fill
+                  onClick={handleSave}
+                  aria-label={i18n.translate(
+                    'data.search.searchBar.savedQueryPopoverSaveChangesButtonAriaLabel',
+                    {
+                      defaultMessage: 'Save changes to {title}',
+                      values: { title: loadedSavedQuery.attributes.title },
+                    }
+                  )}
+                  data-test-subj="saved-query-management-save-changes-button"
                 >
-                  {savedQueryRows()}
-                </EuiListGroup>
-              </div>
-              <EuiPagination
-                className="osdSavedQueryManagement__pagination"
-                pageCount={Math.ceil(count / perPage)}
-                activePage={activePage}
-                onPageClick={goToPage}
-              />
-            </Fragment>
-          ) : (
-            <Fragment>
-              <EuiText size="s" color="subdued" className="osdSavedQueryManagement__text">
-                <p>{noSavedQueriesDescriptionText}</p>
-              </EuiText>
-              <EuiSpacer size="s" />
+                  {i18n.translate('data.search.searchBar.savedQueryPopoverSaveChangesButtonText', {
+                    defaultMessage: 'Save changes',
+                  })}
+                </EuiButton>
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <EuiButton
+                  size="s"
+                  onClick={handleSaveAsNew}
+                  aria-label={i18n.translate(
+                    'data.search.searchBar.savedQueryPopoverSaveAsNewButtonAriaLabel',
+                    {
+                      defaultMessage: 'Save as new saved query',
+                    }
+                  )}
+                  data-test-subj="saved-query-management-save-as-new-button"
+                >
+                  {i18n.translate('data.search.searchBar.savedQueryPopoverSaveAsNewButtonText', {
+                    defaultMessage: 'Save as new',
+                  })}
+                </EuiButton>
+              </EuiFlexItem>
             </Fragment>
           )}
-          <EuiPopoverFooter>
-            <EuiFlexGroup
-              direction="rowReverse"
-              gutterSize="s"
-              alignItems="center"
-              justifyContent="flexEnd"
-              responsive={false}
-              wrap={true}
-            >
-              {showSaveQuery && loadedSavedQuery && (
-                <Fragment>
-                  <EuiFlexItem grow={false}>
-                    <EuiButton
-                      size="s"
-                      fill
-                      onClick={handleSave}
-                      aria-label={i18n.translate(
-                        'data.search.searchBar.savedQueryPopoverSaveChangesButtonAriaLabel',
-                        {
-                          defaultMessage: 'Save changes to {title}',
-                          values: { title: loadedSavedQuery.attributes.title },
-                        }
-                      )}
-                      data-test-subj="saved-query-management-save-changes-button"
-                    >
-                      {i18n.translate(
-                        'data.search.searchBar.savedQueryPopoverSaveChangesButtonText',
-                        {
-                          defaultMessage: 'Save changes',
-                        }
-                      )}
-                    </EuiButton>
-                  </EuiFlexItem>
-                  <EuiFlexItem grow={false}>
-                    <EuiButton
-                      size="s"
-                      onClick={handleSaveAsNew}
-                      aria-label={i18n.translate(
-                        'data.search.searchBar.savedQueryPopoverSaveAsNewButtonAriaLabel',
-                        {
-                          defaultMessage: 'Save as new saved query',
-                        }
-                      )}
-                      data-test-subj="saved-query-management-save-as-new-button"
-                    >
-                      {i18n.translate(
-                        'data.search.searchBar.savedQueryPopoverSaveAsNewButtonText',
-                        {
-                          defaultMessage: 'Save as new',
-                        }
-                      )}
-                    </EuiButton>
-                  </EuiFlexItem>
-                </Fragment>
-              )}
-              {showSaveQuery && !loadedSavedQuery && (
-                <EuiFlexItem grow={false}>
-                  <EuiButton
-                    size="s"
-                    fill
-                    onClick={handleSave}
-                    aria-label={i18n.translate(
-                      'data.search.searchBar.savedQueryPopoverSaveButtonAriaLabel',
-                      { defaultMessage: 'Save a new saved query' }
-                    )}
-                    data-test-subj="saved-query-management-save-button"
-                  >
-                    {i18n.translate('data.search.searchBar.savedQueryPopoverSaveButtonText', {
-                      defaultMessage: 'Save current query',
-                    })}
-                  </EuiButton>
-                </EuiFlexItem>
-              )}
-              <EuiFlexItem />
-              <EuiFlexItem grow={false}>
-                {loadedSavedQuery && (
-                  <EuiButtonEmpty
-                    size="s"
-                    flush="left"
-                    onClick={onClearSavedQuery}
-                    aria-label={i18n.translate(
-                      'data.search.searchBar.savedQueryPopoverClearButtonAriaLabel',
-                      { defaultMessage: 'Clear current saved query' }
-                    )}
-                    data-test-subj="saved-query-management-clear-button"
-                  >
-                    {i18n.translate('data.search.searchBar.savedQueryPopoverClearButtonText', {
-                      defaultMessage: 'Clear',
-                    })}
-                  </EuiButtonEmpty>
+          {showSaveQuery && !loadedSavedQuery && (
+            <EuiFlexItem grow={false}>
+              <EuiButton
+                size="s"
+                fill
+                onClick={handleSave}
+                aria-label={i18n.translate(
+                  'data.search.searchBar.savedQueryPopoverSaveButtonAriaLabel',
+                  { defaultMessage: 'Save a new saved query' }
                 )}
-              </EuiFlexItem>
-            </EuiFlexGroup>
-          </EuiPopoverFooter>
-        </div>
-      </EuiPopover>
-    </Fragment>
+                data-test-subj="saved-query-management-save-button"
+              >
+                {i18n.translate('data.search.searchBar.savedQueryPopoverSaveButtonText', {
+                  defaultMessage: 'Save current query',
+                })}
+              </EuiButton>
+            </EuiFlexItem>
+          )}
+          <EuiFlexItem />
+          <EuiFlexItem grow={false}>
+            {loadedSavedQuery && (
+              <EuiButtonEmpty
+                size="s"
+                flush="left"
+                onClick={onClearSavedQuery}
+                aria-label={i18n.translate(
+                  'data.search.searchBar.savedQueryPopoverClearButtonAriaLabel',
+                  { defaultMessage: 'Clear current saved query' }
+                )}
+                data-test-subj="saved-query-management-clear-button"
+              >
+                {i18n.translate('data.search.searchBar.savedQueryPopoverClearButtonText', {
+                  defaultMessage: 'Clear',
+                })}
+              </EuiButtonEmpty>
+            )}
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiPopoverFooter>
+    </div>
   );
 }
diff --git a/src/plugins/data/public/ui/search_bar/search_bar.tsx b/src/plugins/data/public/ui/search_bar/search_bar.tsx
index 3a83af415f59..3db269074015 100644
--- a/src/plugins/data/public/ui/search_bar/search_bar.tsx
+++ b/src/plugins/data/public/ui/search_bar/search_bar.tsx
@@ -33,7 +33,6 @@ import classNames from 'classnames';
 import { compact, get, isEqual } from 'lodash';
 import React, { Component } from 'react';
 import ResizeObserver from 'resize-observer-polyfill';
-import { DataSource } from '../..';
 import {
   OpenSearchDashboardsReactContextValue,
   withOpenSearchDashboards,
@@ -45,8 +44,8 @@ import { FilterBar } from '../filter_bar/filter_bar';
 import { QueryEditorTopRow } from '../query_editor';
 import QueryBarTopRow from '../query_string_input/query_bar_top_row';
 import { SavedQueryMeta, SaveQueryForm } from '../saved_query_form';
-import { SavedQueryManagementComponent } from '../saved_query_management';
 import { Settings } from '../types';
+import { FilterOptions } from '../filter_bar/filter_options';
 
 interface SearchBarInjectedDeps {
   opensearchDashboards: OpenSearchDashboardsReactContextValue<IDataPluginServices>;
@@ -123,6 +122,7 @@ class SearchBarUI extends Component<SearchBarProps, State> {
   private savedQueryService = this.services.data.query.savedQueries;
   public filterBarRef: Element | null = null;
   public filterBarWrapperRef: Element | null = null;
+  private useNewHeader = Boolean(this.services.uiSettings.get(UI_SETTINGS.NEW_HOME_PAGE));
 
   public static getDerivedStateFromProps(nextProps: SearchBarProps, prevState: State) {
     if (isEqual(prevState.currentProps, nextProps)) {
@@ -233,6 +233,7 @@ class SearchBarUI extends Component<SearchBarProps, State> {
     return (
       this.props.showFilterBar &&
       this.props.filters &&
+      (!this.useNewHeader || this.props.filters.length > 0) &&
       this.props.indexPatterns &&
       compact(this.props.indexPatterns).length > 0 &&
       (this.props.settings?.getQueryEnhancements(this.state.query?.language!)?.searchBar
@@ -412,17 +413,27 @@ class SearchBarUI extends Component<SearchBarProps, State> {
     );
     this.props.settings?.setUserQueryEnhancementsEnabled(isEnhancementsEnabledOverride);
 
-    const savedQueryManagement = this.state.query && this.props.onClearSavedQuery && (
-      <SavedQueryManagementComponent
-        showSaveQuery={this.props.showSaveQuery}
-        loadedSavedQuery={this.props.savedQuery}
-        onSave={this.onInitiateSave}
-        onSaveAsNew={this.onInitiateSaveNew}
-        onLoad={this.onLoadSavedQuery}
-        savedQueryService={this.savedQueryService}
-        onClearSavedQuery={this.props.onClearSavedQuery}
-      />
-    );
+    const searchBarMenu = (useSaveQueryMenu: boolean = false) => {
+      return (
+        this.state.query &&
+        this.props.onClearSavedQuery && (
+          <FilterOptions
+            filters={this.props.filters!}
+            onFiltersUpdated={this.props.onFiltersUpdated}
+            intl={this.props.intl}
+            indexPatterns={this.props.indexPatterns!}
+            showSaveQuery={this.props.showSaveQuery}
+            loadedSavedQuery={this.props.savedQuery}
+            onSave={this.onInitiateSave}
+            onSaveAsNew={this.onInitiateSaveNew}
+            onLoad={this.onLoadSavedQuery}
+            savedQueryService={this.savedQueryService}
+            onClearSavedQuery={this.props.onClearSavedQuery}
+            useSaveQueryMenu={useSaveQueryMenu}
+          />
+        )
+      );
+    };
 
     let filterBar;
     if (this.shouldRenderFilterBar()) {
@@ -464,7 +475,7 @@ class SearchBarUI extends Component<SearchBarProps, State> {
           onSubmit={this.onQueryBarSubmit}
           indexPatterns={this.props.indexPatterns}
           isLoading={this.props.isLoading}
-          prepend={this.props.showFilterBar ? savedQueryManagement : undefined}
+          prepend={this.props.showFilterBar ? searchBarMenu(!this.useNewHeader) : undefined}
           showDatePicker={this.props.showDatePicker}
           dateRangeFrom={this.state.dateRangeFrom}
           dateRangeTo={this.state.dateRangeTo}
@@ -498,7 +509,7 @@ class SearchBarUI extends Component<SearchBarProps, State> {
           onSubmit={this.onQueryBarSubmit}
           indexPatterns={this.props.indexPatterns}
           isLoading={this.props.isLoading}
-          prepend={this.props.showFilterBar ? savedQueryManagement : undefined}
+          prepend={this.props.showFilterBar ? searchBarMenu(!this.useNewHeader) : undefined}
           showDatePicker={this.props.showDatePicker}
           dateRangeFrom={this.state.dateRangeFrom}
           dateRangeTo={this.state.dateRangeTo}