diff --git a/src/__test__/components/data-exploration/differential-expression-tool/DiffExprResults.test.jsx b/src/__test__/components/data-exploration/differential-expression-tool/DiffExprResults.test.jsx
index ffe797a724..d6ad5d268c 100644
--- a/src/__test__/components/data-exploration/differential-expression-tool/DiffExprResults.test.jsx
+++ b/src/__test__/components/data-exploration/differential-expression-tool/DiffExprResults.test.jsx
@@ -385,8 +385,7 @@ describe('DiffExprResults', () => {
 
     // Adding a filter and applying it
     const dropdown = component.find('Dropdown');
-    const menuInstance = shallow(dropdown.props().overlay);
-    menuInstance.at(0).simulate('click');
+    dropdown.simulate('click', 'Up-regulated');
     await waitForActions(withResultStore, [DIFF_EXPR_ORDERING_SET, DIFF_EXPR_LOADING, DIFF_EXPR_LOADED]);
 
     // closing the modal
diff --git a/src/__test__/components/data-exploration/heatmap/HeatmapGroupBySettings.test.jsx b/src/__test__/components/data-exploration/heatmap/HeatmapGroupBySettings.test.jsx
index c7655db855..343e5b2d1f 100644
--- a/src/__test__/components/data-exploration/heatmap/HeatmapGroupBySettings.test.jsx
+++ b/src/__test__/components/data-exploration/heatmap/HeatmapGroupBySettings.test.jsx
@@ -113,18 +113,17 @@ describe('HeatmapGroupBySettings', () => {
 
     // there's a dropdown
     const dropdown = component.find(Dropdown);
-    const submenu = shallow(<div>{dropdown.prop('overlay')}</div>);
-    const subMenuItems = submenu.find('MenuItem');
+    const menuItems = dropdown.props().menu.items;
 
     // With two items.
-    expect(subMenuItems.length).toEqual(2);
+    expect(menuItems.length).toEqual(2);
 
     // each of which should have the right names.
-    expect(subMenuItems.at(0).find('div').text()).toEqual('louvain clusters');
-    expect(subMenuItems.at(1).find('div').text()).toEqual('Sample');
+    expect(menuItems[0].label.props.children[1]).toEqual('louvain clusters');
+    expect(menuItems[1].label.props.children[1]).toEqual('Sample');
   });
 
-  test('interacting with the groupby add/remove options will trigger the appropriate actions', async () => {
+  it('interacting with the groupby add/remove options will trigger the appropriate actions', async () => {
     const store = mockStore({
       ...initialState,
     });
@@ -139,12 +138,11 @@ describe('HeatmapGroupBySettings', () => {
     expect(component.find('HeatmapGroupBySettings').length).toEqual(1);
 
     const dropdown = component.find(Dropdown);
-    const submenu = shallow(<div>{dropdown.prop('overlay')}</div>);
-    const subMenuItems = submenu.find('MenuItem');
+    const menuItems = dropdown.props().menu.items;
 
     // When the other group by is clicked...
-    const buttons = subMenuItems.find(Button);
-    act(() => { buttons.at(0).simulate('click'); });
+    const buttons = menuItems[0].label.props.children;
+    act(() => { buttons[0].props.onClick() });
     component.update();
 
     await waitForActions(store, [UPDATE_CONFIG]);
@@ -170,7 +168,7 @@ describe('HeatmapGroupBySettings', () => {
     expect(groupByItems.at(1).text()).toEqual('louvain clusters');
 
     // when the groupby is clicked again
-    act(() => { buttons.at(0).simulate('click'); });
+    act(() => { buttons[0].props.onClick() });
     component.update();
 
     await waitForActions(store, [UPDATE_CONFIG]);
@@ -189,7 +187,7 @@ describe('HeatmapGroupBySettings', () => {
     expect(groupByItems.at(0).text()).toEqual('Sample');
   });
 
-  test('interacting with the groupby reorder options will trigger the appropriate actions', async () => {
+  it('interacting with the groupby reorder options will trigger the appropriate actions', async () => {
     const store = mockStore({
       ...initialState,
     });
@@ -204,12 +202,11 @@ describe('HeatmapGroupBySettings', () => {
     expect(component.find('HeatmapGroupBySettings').length).toEqual(1);
 
     const dropdown = component.find(Dropdown);
-    const submenu = shallow(<div>{dropdown.prop('overlay')}</div>);
-    const subMenuItems = submenu.find('MenuItem');
+    const menuItems = dropdown.props().menu.items;
 
     // Add a louvain group by
-    const addButtons = subMenuItems.find(Button);
-    act(() => { addButtons.at(0).simulate('click'); });
+    const addButtons = menuItems[0].label.props.children;
+    act(() => { addButtons[0].props.onClick() });
 
     await waitForActions(store, [UPDATE_CONFIG]);
     component.update();
diff --git a/src/components/data-exploration/cell-sets-tool/CellSetsTool.jsx b/src/components/data-exploration/cell-sets-tool/CellSetsTool.jsx
index 489cb05f9c..1f9f0ac681 100644
--- a/src/components/data-exploration/cell-sets-tool/CellSetsTool.jsx
+++ b/src/components/data-exploration/cell-sets-tool/CellSetsTool.jsx
@@ -170,14 +170,12 @@ const CellSetsTool = (props) => {
       );
     }
 
-    return (
-      <Space direction='vertical'>
-        <Tabs
-          size='small'
-          activeKey={activeTab}
-          onChange={(key) => setActiveTab(key)}
-        >
-          <Tabs.TabPane tab='Cell sets' key='cellSets'>
+    const tabItems = [
+      {
+        key: 'cellSets',
+        label: 'Cell sets',
+        children: (
+          <>
             {operations}
             <HierarchicalTree
               experimentId={experimentId}
@@ -190,14 +188,29 @@ const CellSetsTool = (props) => {
               showHideButton
               checkedKeys={selectedCellSetKeys}
             />
-          </Tabs.TabPane>
-          <Tabs.TabPane tab='Annotate clusters' key='annotateClusters'>
-            <AnnotateClustersTool
-              experimentId={experimentId}
-              onRunAnnotation={() => { setActiveTab('cellSets'); }}
-            />
-          </Tabs.TabPane>
-        </Tabs>
+          </>
+        ),
+      },
+      {
+        key: 'annotateClusters',
+        label: 'Annotate clusters',
+        children: (
+          <AnnotateClustersTool
+            experimentId={experimentId}
+            onRunAnnotation={() => { setActiveTab('cellSets'); }}
+          />
+        ),
+      },
+    ];
+
+    return (
+      <Space direction='vertical'>
+        <Tabs
+          size='small'
+          activeKey={activeTab}
+          onChange={(key) => setActiveTab(key)}
+          items={tabItems}
+        />
       </Space>
     );
   };
diff --git a/src/components/data-exploration/differential-expression-tool/AdvancedFilteringModal.jsx b/src/components/data-exploration/differential-expression-tool/AdvancedFilteringModal.jsx
index 30907eef44..a861ccd44a 100644
--- a/src/components/data-exploration/differential-expression-tool/AdvancedFilteringModal.jsx
+++ b/src/components/data-exploration/differential-expression-tool/AdvancedFilteringModal.jsx
@@ -79,20 +79,16 @@ const AdvancedFilteringModal = (props) => {
     setAvailableCriteriaOptions(filteredCriteriaOptions);
   }, [availableColumns.length]);
 
-  const renderPresetFilters = (add) => (
-    <Menu
-      onClick={(e) => {
-        const selectedFilter = availablePresetFilters.find((filter) => filter.label === e.key);
-        add(selectedFilter);
-      }}
-    >
-      {availablePresetFilters.map((filter) => (
-        <Menu.Item key={filter.label}>
-          {filter.label}
-        </Menu.Item>
-      ))}
-    </Menu>
-  );
+
+  const onClickPresetFilter = (add, e) => {
+    const selectedFilter = availablePresetFilters.find((filter) => filter.label === e.key);
+    add(selectedFilter);
+  }
+
+  const presetFilterItems = availablePresetFilters.map((filter) => ({
+    label: filter.label,
+    key: filter.label,
+  }));
 
   const applyFilters = (filters) => {
     const filtersDataToRun = filters.map(({ columnName, comparison, value }) => ({
@@ -104,7 +100,7 @@ const AdvancedFilteringModal = (props) => {
 
   return (
     <Modal
-      visible
+      open
       title='Advanced filters'
       onCancel={onCancel}
       footer={null}
@@ -169,7 +165,12 @@ const AdvancedFilteringModal = (props) => {
                   <Button onClick={add} icon={<PlusOutlined />}>
                     Add custom filter
                   </Button>
-                  <Dropdown overlay={renderPresetFilters(add)}>
+                  <Dropdown
+                    menu={{
+                      items: presetFilterItems,
+                      onClick: (e) => onClickPresetFilter(add, e)
+                    }}
+                  >
                     <Button icon={<PlusOutlined />}>
                       Add preset filter
                     </Button>
@@ -188,7 +189,7 @@ const AdvancedFilteringModal = (props) => {
           )}
         </Form.List>
       </Form>
-    </Modal>
+    </Modal >
   );
 };
 
diff --git a/src/components/data-exploration/heatmap/HeatmapCellInfo.jsx b/src/components/data-exploration/heatmap/HeatmapCellInfo.jsx
index 74c7ba0adb..9b23d5d8db 100644
--- a/src/components/data-exploration/heatmap/HeatmapCellInfo.jsx
+++ b/src/components/data-exploration/heatmap/HeatmapCellInfo.jsx
@@ -77,7 +77,10 @@ HeatmapCellInfo.propTypes = {
   containerHeight: PropTypes.number.isRequired,
   cellId: PropTypes.string.isRequired,
   geneName: PropTypes.string.isRequired,
-  geneExpression: PropTypes.number.isRequired,
+  geneExpression: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.number),
+    PropTypes.oneOf([undefined, null])
+  ]),
   coordinates: PropTypes.object.isRequired,
 };
 
diff --git a/src/components/data-exploration/heatmap/HeatmapGroupBySettings.jsx b/src/components/data-exploration/heatmap/HeatmapGroupBySettings.jsx
index 08b59e4a1c..9ef0d036a8 100644
--- a/src/components/data-exploration/heatmap/HeatmapGroupBySettings.jsx
+++ b/src/components/data-exploration/heatmap/HeatmapGroupBySettings.jsx
@@ -7,7 +7,7 @@ import {
 } from '@ant-design/icons';
 import 'antd/dist/antd.css';
 import {
-  Button, Space, Menu, Dropdown,
+  Button, Space, Dropdown,
 } from 'antd';
 import PropTypes from 'prop-types';
 import { ClipLoader } from 'react-spinners';
@@ -80,47 +80,41 @@ const HeatmapGroupBySettings = (props) => {
 
   // This is so that a click on + or - buttons doesn't close the menu
   const stopPropagationEvent = (e) => e.stopPropagation();
-  const menu = (
-    <Menu>
-      {
-        allCellSetsGroupBys
-          .map((cellSet, indx) => {
-            const positionInCellSetOrder = indexOfCellSet(cellSet);
-
-            return (
-              // eslint-disable-next-line react/no-array-index-key
-              <Menu.Item key={indx} size='small'>
-                <div onClick={stopPropagationEvent} onKeyDown={stopPropagationEvent}>
-                  <Button
-                    shape='square'
-                    size='small'
-                    style={{ marginRight: '5px' }}
-                    icon={positionInCellSetOrder > -1 ? <MinusOutlined /> : <PlusOutlined />}
-                    onClick={() => {
-                      const newCellSetsOrder = [...cellSetsOrder];
-                      if (positionInCellSetOrder > -1) {
-                        // If the cell is included in the cellSet, we have to remove it
-                        newCellSetsOrder.splice(positionInCellSetOrder, 1);
-                      } else {
-                        // If the cell is not included in the cellSet, we have to add it
-                        newCellSetsOrder.push(cellSet);
-                      }
-                      setCellSetsOrder(newCellSetsOrder);
-                    }}
-                  />
-                  {cellSet.name}
-                </div>
-              </Menu.Item>
-            );
-          })
-      }
-    </Menu>
-  );
+  const menuItems =
+    allCellSetsGroupBys
+      .map((cellSet, indx) => {
+        const positionInCellSetOrder = indexOfCellSet(cellSet);
+
+        return {
+          label: (
+            <div onClick={stopPropagationEvent} onKeyDown={stopPropagationEvent}>
+              <Button
+                shape='square'
+                size='small'
+                style={{ marginRight: '5px' }}
+                icon={positionInCellSetOrder > -1 ? <MinusOutlined /> : <PlusOutlined />}
+                onClick={() => {
+                  const newCellSetsOrder = [...cellSetsOrder];
+                  if (positionInCellSetOrder > -1) {
+                    newCellSetsOrder.splice(positionInCellSetOrder, 1);
+                  } else {
+                    newCellSetsOrder.push(cellSet);
+                  }
+                  setCellSetsOrder(newCellSetsOrder);
+                }}
+              />
+              {cellSet.name}
+            </div>
+          ),
+          key: indx.toString(),
+        };
+      });
+
 
   return (
     <div style={{ padding: '5px' }} key='dropdown'>
       <Space direction='vertical'>
-        <Dropdown overlay={menu} trigger='click hover'>
+        <Dropdown menu={{ items: menuItems }} trigger='click hover'>
           <div style={{ padding: '7px', border: '1px solid rgb(238,238,238)' }}>
             Select the parameters to group by
             <DownOutlined style={{ marginLeft: '5px' }} />
diff --git a/src/components/data-exploration/heatmap/HeatmapSettings.jsx b/src/components/data-exploration/heatmap/HeatmapSettings.jsx
index fd29d42539..ca128009a0 100644
--- a/src/components/data-exploration/heatmap/HeatmapSettings.jsx
+++ b/src/components/data-exploration/heatmap/HeatmapSettings.jsx
@@ -3,49 +3,53 @@ import {
   SettingOutlined,
 } from '@ant-design/icons';
 import {
-  Button, Dropdown, Menu, Tooltip,
+  Button, Dropdown, Tooltip
 } from 'antd';
 
 import PropTypes from 'prop-types';
 import HeatmapMetadataTrackSettings from 'components/data-exploration/heatmap/HeatmapMetadataTrackSettings';
 import HeatmapGroupBySettings from 'components/data-exploration/heatmap/HeatmapGroupBySettings';
 
-import NoStyleAntdMenuItem from 'components/NoStyleAntdMenuItem';
-
-import styles from 'utils/css/no-style-menu-item.module.css';
-
-const { SubMenu } = Menu;
-
 const HeatmapSettings = (props) => {
   const { componentType } = props;
 
-  const renderMenu = () => (
-    <Menu size='small'>
-      <SubMenu key='metadataTracks' title='Metadata tracks' icon={<></>} popupClassName={styles['no-style-menu-item']}>
-        <NoStyleAntdMenuItem>
-          <HeatmapMetadataTrackSettings componentType={componentType} />
-        </NoStyleAntdMenuItem>
-      </SubMenu>
-      <SubMenu key='groupBy' title='Group by' icon={<></>}>
-        <NoStyleAntdMenuItem>
-          <HeatmapGroupBySettings componentType={componentType} />
-        </NoStyleAntdMenuItem>
-      </SubMenu>
-    </Menu>
-  );
+  const menuItems = [
+    {
+      label: 'Metadata tracks', key: 'metadataTracks', children: [
+        {
+          label: (<HeatmapMetadataTrackSettings componentType={componentType} />),
+          key: "metadataTracksChild",
+        }
+      ]
+    },
+    {
+      label: 'Group by', key: 'groupBy', children: [
+        {
+          label: (<HeatmapGroupBySettings componentType={componentType} />),
+          key: "groupByChild",
+        }
+      ]
+    },
+  ];
 
   return (
-    <Dropdown arrow type='link' size='small' overlay={renderMenu()} trigger={['click']}>
-      <Tooltip title='Settings'>
-        <Button
-          type='text'
-          icon={<SettingOutlined />}
-          // these classes are added so that the settings button
-          // is the same style as the remove button
-          className='bp3-button bp3-minimal'
-        />
-      </Tooltip>
-    </Dropdown>
+    <>
+      <Dropdown
+        arrow
+        type='link'
+        size='small'
+        menu={{ items: menuItems }}
+        trigger={['click']}
+      >
+        <Tooltip title='Settings'>
+          <Button
+            type='text'
+            icon={<SettingOutlined />}
+            className='bp3-button bp3-minimal'
+          />
+        </Tooltip>
+      </Dropdown>
+    </>
   );
 };
 
diff --git a/src/components/data-management/AddMetadataButton.jsx b/src/components/data-management/AddMetadataButton.jsx
index 70f06f1f98..cf456fdd5c 100644
--- a/src/components/data-management/AddMetadataButton.jsx
+++ b/src/components/data-management/AddMetadataButton.jsx
@@ -1,7 +1,7 @@
 /* eslint-disable no-param-reassign */
 import React, { useState } from 'react';
 import {
-  Menu, Dropdown, Button, Tooltip,
+  Dropdown, Button, Tooltip,
 } from 'antd';
 import PropTypes from 'prop-types';
 
@@ -67,38 +67,43 @@ const AddMetadataButton = ({ samplesTableRef }) => {
   return (
     <>
       <Dropdown
-        overlay={() => (
-          <Menu>
-            <Menu.SubMenu title='Sample level' key='sample-level'>
-              <Menu.Item
-                key='add-metadata-column'
-                data-testid='create-track-option'
-                onClick={() => samplesTableRef.current.createMetadataColumn()}
-              >
-                Create track
-              </Menu.Item>
-              <Menu.Item
-                key='upload-metadata-file'
-                onClick={() => {
-                  setTrackUploadModalVisible(true);
-                }}
-              >
-                Upload file
-              </Menu.Item>
-            </Menu.SubMenu>
-            <Tooltip title='Feature coming soon!'>
-              <div>
-                <Menu.Item
-                  key='cell-level'
-                  onClick={() => setCellLevelUploadVisible(true)}
-                  disabled
-                >
+        menu={{
+          items: [
+            {
+              key: 'sample-level',
+              label: 'Sample level',
+              children: [
+                {
+                  label: 'Create track',
+                  key: 'add-metadata-column',
+                  'data-testid': 'create-track-option',
+                  onClick: () => {
+                    samplesTableRef.current.createMetadataColumn();
+                  }
+                },
+                {
+                  label: 'Upload file',
+                  key: 'upload-metadata-file',
+                  onClick: () => {
+                    setTrackUploadModalVisible(true);
+                  }
+                }
+              ]
+            },
+            {
+              key: 'cell-level',
+              label: (<Tooltip title='Feature coming soon!'>
+                <div>
                   Cell level
-                </Menu.Item>
-              </div>
-            </Tooltip>
-          </Menu>
-        )}
+                </div>
+              </Tooltip>),
+              disabled: true,
+              onClick: () => {
+                setCellLevelUploadVisible(true);
+              }
+            }
+          ]
+        }}
         trigger={['click']}
         placement='bottomRight'
         disabled={activeExperiment.sampleIds?.length === 0 || isSubsetted || selectedTech === sampleTech.SEURAT}
diff --git a/src/components/data-management/DownloadDataButton.jsx b/src/components/data-management/DownloadDataButton.jsx
index 5e3002e996..4356ee03a4 100644
--- a/src/components/data-management/DownloadDataButton.jsx
+++ b/src/components/data-management/DownloadDataButton.jsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import _ from 'lodash';
 import {
-  Menu, Tooltip, Dropdown, Button, Space,
+  Tooltip, Dropdown, Button, Space,
 } from 'antd';
 
 import { useSelector, useDispatch } from 'react-redux';
@@ -79,64 +79,64 @@ const DownloadDataButton = () => {
     }
   };
 
+  const menuItems = [
+    {
+      key: 'download-processed-seurat',
+      disabled: !pipelineHasRun || backendLoading,
+      onClick: (e) => {
+        e.domEvent.stopPropagation();
+        downloadExperimentData('processed-matrix');
+      },
+      label: (
+        <Tooltip
+          title={
+            pipelineHasRun
+              ? 'With Data Processing filters and settings applied'
+              : 'Launch analysis to process data'
+          }
+          placement='left'
+        >
+          <Space>
+            Processed Seurat object (.rds)
+            {downloadingProcessedSeurat && <ClipLoader size={20} color='#8f0b10' />}
+          </Space>
+        </Tooltip>
+      )
+    },
+    {
+      key: 'download-processing-settings',
+      disabled: !allSamplesAnalysed || backendLoading,
+      onClick: () => {
+        const config = _.omit(experimentSettings.processing, ['meta']);
+        const filteredConfig = filterQCParameters(
+          config, activeExperiment.sampleIds, samples,
+        );
+        const blob = exportQCParameters(filteredConfig);
+        saveAs(blob, `${activeExperimentId.split('-')[0]}_settings.txt`);
+      },
+      label: (
+        allSamplesAnalysed
+          ? 'Data Processing settings (.txt)'
+          : (
+            <Tooltip title='One or more of your samples has yet to be analysed' placement='left'>
+              Data Processing settings (.txt)
+            </Tooltip>
+          )
+      )
+    }
+  ]
+
   return (
     <Dropdown
-      visible={dropdownExpanded}
-      onVisibleChange={(visible) => setDropdownExpanded(visible)}
+      open={dropdownExpanded}
+      onOpenChange={(visible) => setDropdownExpanded(visible)}
       trigger={['click']}
-      overlay={() => (
-        <Menu
-          onClick={(e) => {
-            if (e.key !== 'download-processed-seurat') setDropdownExpanded(false);
-          }}
-        >
-          <Menu.Item
-            key='download-processed-seurat'
-            disabled={!pipelineHasRun || backendLoading}
-            onClick={(e) => {
-              e.domEvent.stopPropagation();
-
-              downloadExperimentData('processed-matrix');
-            }}
-          >
-            <Tooltip
-              title={
-                pipelineHasRun
-                  ? 'With Data Processing filters and settings applied'
-                  : 'Launch analysis to process data'
-              }
-              placement='left'
-            >
-              <Space>
-                Processed Seurat object (.rds)
-                {downloadingProcessedSeurat && <ClipLoader size={20} color='#8f0b10' />}
-              </Space>
-            </Tooltip>
-          </Menu.Item>
-          <Menu.Item
-            disabled={!allSamplesAnalysed || backendLoading}
-            key='download-processing-settings'
-            onClick={() => {
-              const config = _.omit(experimentSettings.processing, ['meta']);
-              const filteredConfig = filterQCParameters(
-                config, activeExperiment.sampleIds, samples,
-              );
-              const blob = exportQCParameters(filteredConfig);
-              saveAs(blob, `${activeExperimentId.split('-')[0]}_settings.txt`);
-            }}
-          >
-            {
-              allSamplesAnalysed
-                ? 'Data Processing settings (.txt)'
-                : (
-                  <Tooltip title='One or more of your samples has yet to be analysed' placement='left'>
-                    Data Processing settings (.txt)
-                  </Tooltip>
-                )
-            }
-          </Menu.Item>
-        </Menu>
-      )}
+      menu={{
+        items: menuItems,
+        onClick: (e) => {
+          if (e.key !== 'download-processed-seurat') setDropdownExpanded(false);
+        }
+      }}
       placement='bottomRight'
       disabled={
         experiments.ids.length === 0
diff --git a/src/components/data-management/ProjectsListContainer.jsx b/src/components/data-management/ProjectsListContainer.jsx
index 9681ff11e8..78955bafd7 100644
--- a/src/components/data-management/ProjectsListContainer.jsx
+++ b/src/components/data-management/ProjectsListContainer.jsx
@@ -19,25 +19,23 @@ const ProjectsListContainer = (props) => {
   const { navigateTo } = useAppRouter();
   const [filterParam, setFilterParam] = useState(new RegExp('.*', 'i'));
 
+  const menuItems = [
+    {
+      label: 'Upload Project',
+      key: 'upload_project',
+      onClick: () => onCreateNewProject(),
+    },
+    {
+      label: 'Select from Dataset Repository',
+      key: 'copy_from_repository',
+      onClick: () => { navigateTo(modules.REPOSITORY); },
+    },
+  ]
+
   return (
     <Space direction='vertical' style={{ width: '100%' }}>
       <Dropdown
-        overlay={() => (
-          <Menu>
-            <Menu.Item
-              key='upload_project'
-              onClick={() => onCreateNewProject()}
-            >
-              Upload Project
-            </Menu.Item>
-            <Menu.Item
-              key='copy_from_repository'
-              onClick={() => { navigateTo(modules.REPOSITORY); }}
-            >
-              Select from Dataset Repository
-            </Menu.Item>
-          </Menu>
-        )}
+        menu={{ items: menuItems }}
         trigger={['click']}
         placement='bottomRight'
       >
diff --git a/src/components/data-processing/StatusIndicator.jsx b/src/components/data-processing/StatusIndicator.jsx
index 8d89238d70..512cf42618 100644
--- a/src/components/data-processing/StatusIndicator.jsx
+++ b/src/components/data-processing/StatusIndicator.jsx
@@ -115,38 +115,32 @@ const StatusIndicator = (props) => {
     },
   };
 
-  const renderOverlay = () => {
-    const renderOverlayContent = () => {
-      if (loadingBackendStatus) { return (<Text>Loading run status...</Text>); }
-      if (errorLoadingBackendStatus) {
-        return (<Text>Failed loading run status. Please refresh the page.</Text>);
-      }
-
-      return (
-        <>
-          <Paragraph>
-            <Text strong>
-              Your data processing is
-              {' '}
-              {statusIndicators[status].title}
-              .
-            </Text>
-          </Paragraph>
-          <Paragraph>
-            <Text>{`${completedSteps.length} of ${allSteps.length} steps complete`}</Text>
-          </Paragraph>
-          <Paragraph>
-            {statusIndicators[status]?.description}
-          </Paragraph>
-        </>
-      );
-    };
+  const getMenuComponent = () => {
+    if (loadingBackendStatus) {
+      return (<Text>Loading run status...</Text>);
+    }
+    if (errorLoadingBackendStatus) {
+      return (<Text>Failed loading run status. Please refresh the page.</Text>);
+    }
 
     return (
-      <Card style={{ width: 300, padding: 16 }}>
-        {renderOverlayContent()}
-      </Card>
-    );
+      <>
+        <Paragraph>
+          <Text strong>
+            Your data processing is
+            {' '}
+            {statusIndicators[status]?.title || 'loading'}
+            .
+          </Text>
+        </Paragraph>
+        <Paragraph>
+          <Text>{`${completedSteps.length} of ${allSteps.length} steps complete`}</Text>
+        </Paragraph>
+        <Paragraph>
+          {statusIndicators[status]?.description}
+        </Paragraph>
+      </>
+    );;
   };
 
   const renderIndicator = () => {
@@ -169,7 +163,18 @@ const StatusIndicator = (props) => {
   };
 
   return (
-    <Dropdown overlay={renderOverlay}>
+    <Dropdown menu={{
+      items: [
+        {
+          label: (
+            <Card style={{ width: 300, padding: 16 }}>
+              {getMenuComponent()}
+            </Card>
+          ),
+          key: 'status-indicator',
+        }
+      ]
+    }}>
       <Button
         type='text'
         style={{ paddingTop: '1px' }}
diff --git a/src/components/header/FeedbackButton.jsx b/src/components/header/FeedbackButton.jsx
index c5b14b8c14..606b1dc8e9 100644
--- a/src/components/header/FeedbackButton.jsx
+++ b/src/components/header/FeedbackButton.jsx
@@ -105,37 +105,40 @@ const FeedbackButton = () => {
     }
   };
 
-  const overlay = () => (
-    <div>
-      <Card size='small'>
-        <Space direction='vertical' style={{ width: '100%' }}>
-          <TextArea
-            value={feedbackText}
-            onChange={(e) => {
-              setFeedbackText(e.target.value);
-            }}
-            rows={4}
-            placeholder='Please write your message here to provide feedback or report issues on Cellenics. A member of our team will get back to you as soon as possible.'
-            bordered={false}
-            ref={(ref) => { if (ref) { ref.focus(); } }}
-            style={{
-              resize: 'none', width: 300, border: 'none', outline: 'none',
-            }}
-          />
-          <Space>
-            <Button size='small' onClick={() => setVisible(false)}>Cancel</Button>
-            <Button size='small' type='primary' onClick={submitFeedback}>Send</Button>
+  const menuItems = [
+    {
+      label: (
+        <Card size='small'>
+          <Space direction='vertical' style={{ width: '100%' }}>
+            <TextArea
+              value={feedbackText}
+              onChange={(e) => {
+                setFeedbackText(e.target.value);
+              }}
+              rows={4}
+              placeholder='Please write your message here to provide feedback or report issues on Cellenics. A member of our team will get back to you as soon as possible.'
+              bordered={false}
+              ref={(ref) => { if (ref) { ref.focus(); } }}
+              style={{
+                resize: 'none', width: 300, border: 'none', outline: 'none',
+              }}
+            />
+            <Space>
+              <Button size='small' onClick={() => setVisible(false)}>Cancel</Button>
+              <Button size='small' type='primary' onClick={submitFeedback}>Send</Button>
+            </Space>
           </Space>
-        </Space>
-      </Card>
-    </div>
-  );
+        </Card>
+      ),
+      key: 'feedback-button-contents'
+    }
+  ]
 
   return (
     <Dropdown
-      visible={visible}
-      onVisibleChange={(v) => setVisible(v)}
-      overlay={overlay}
+      open={visible}
+      onOpenChange={(v) => setVisible(v)}
+      menu={{ items: menuItems }}
       placement='bottomRight'
       trigger='click'
     >
diff --git a/src/components/header/HelpButton.jsx b/src/components/header/HelpButton.jsx
index 5ecaa5ff28..2754c7ae50 100644
--- a/src/components/header/HelpButton.jsx
+++ b/src/components/header/HelpButton.jsx
@@ -5,17 +5,22 @@ import getDomainSpecificContent from 'utils/getDomainSpecificContent';
 
 const HelpButton = () => {
   const [visible, setVisible] = useState(false);
-  const overlay = () => (
-    <Card size='small' style={{ padding: '1em', width: '265px' }}>
-      {getDomainSpecificContent('HelpButton')}
-    </Card>
-  );
+  const menuItems = [
+    {
+      label: (
+        <Card size='small' style={{ padding: '1em', width: '265px' }}>
+          {getDomainSpecificContent('HelpButton')}
+        </Card>
+      ),
+      key: 'help-button-contents'
+    }
+  ]
 
   return (
     <Dropdown
-      visible={visible}
-      onVisibleChange={(v) => setVisible(v)}
-      overlay={overlay}
+      open={visible}
+      onOpenChange={(v) => setVisible(v)}
+      menu={{ items: menuItems }}
       placement='bottomRight'
       trigger='click'
     >
diff --git a/src/components/header/ReferralButton.jsx b/src/components/header/ReferralButton.jsx
index 3ffd355bcb..f9d853ffc2 100644
--- a/src/components/header/ReferralButton.jsx
+++ b/src/components/header/ReferralButton.jsx
@@ -117,50 +117,53 @@ const ReferralButton = () => {
     }
   };
 
-  const overlay = () => (
-    <div>
-      <Card size='small'>
-        <Space direction='vertical' style={{ width: '100%' }}>
-          <Input
-            addonBefore='To: '
-            label='Email'
-            onChange={(e) => {
-              const { isValid } = validateInput(e.target.value, rules.VALID_EMAIL);
+  const menuItems = [
+    {
+      label: (
+        <Card size='small'>
+          <Space direction='vertical' style={{ width: '100%' }}>
+            <Input
+              addonBefore='To: '
+              label='Email'
+              onChange={(e) => {
+                const { isValid } = validateInput(e.target.value, rules.VALID_EMAIL);
 
-              setIsEmailValid(isValid);
-              setEmail(e.target.value);
-            }}
-            placeholder={'Your friend\'s email address'}
-          />
-          <TextArea
-            value={customMessage}
-            label='Custom message'
-            onChange={(e) => {
-              setCustomMessage(e.target.value);
-            }}
-            rows={4}
-            style={{
-              resize: 'none', width: 300, outline: 'none',
-            }}
-          />
-          <Space>
-            <Button size='small' onClick={() => setVisible(false)}>Cancel</Button>
-            <Tooltip
-              title={!isEmailValid ? 'Please enter a valid email address' : ''}
-            >
-              <Button size='small' type='primary' disabled={!isEmailValid} onClick={submitReferral}>Send invite</Button>
-            </Tooltip>
+                setIsEmailValid(isValid);
+                setEmail(e.target.value);
+              }}
+              placeholder={'Your friend\'s email address'}
+            />
+            <TextArea
+              value={customMessage}
+              label='Custom message'
+              onChange={(e) => {
+                setCustomMessage(e.target.value);
+              }}
+              rows={4}
+              style={{
+                resize: 'none', width: 300, outline: 'none',
+              }}
+            />
+            <Space>
+              <Button size='small' onClick={() => setVisible(false)}>Cancel</Button>
+              <Tooltip
+                title={!isEmailValid ? 'Please enter a valid email address' : ''}
+              >
+                <Button size='small' type='primary' disabled={!isEmailValid} onClick={submitReferral}>Send invite</Button>
+              </Tooltip>
+            </Space>
           </Space>
-        </Space>
-      </Card>
-    </div>
-  );
+        </Card>
+      ),
+      key: 'referral-button-contents',
+    }
+  ]
 
   return (
     <Dropdown
-      visible={visible}
-      onVisibleChange={(v) => setVisible(v)}
-      overlay={overlay}
+      open={visible}
+      onOpenChange={(v) => setVisible(v)}
+      menu={{ items: menuItems }}
       placement='bottomRight'
       trigger='click'
     >
diff --git a/src/components/header/UserButton.jsx b/src/components/header/UserButton.jsx
index f31793940c..7e89dd0760 100644
--- a/src/components/header/UserButton.jsx
+++ b/src/components/header/UserButton.jsx
@@ -39,24 +39,37 @@ const UserButton = () => {
     });
   }, []);
 
-  const content = () => (
-    <Menu>
-      <Menu.ItemGroup key='g1' title={`Signed in as ${user?.attributes.name}`} />
-      <Menu.Item key='profile' disabled>Your profile</Menu.Item>
-      <Menu.Item key='settings'>
+  const menuItems = [
+    {
+      type: 'group',
+      label: `Signed in as ${user?.attributes.name}`,
+      key: 'singed-in-username'
+    },
+    {
+      disabled: true,
+      label: 'Your profile',
+      key: 'user-profile'
+    },
+    {
+      label: (
         <Link href='/settings/profile'>
           Settings
         </Link>
-      </Menu.Item>
-      <Menu.Divider />
-      <Menu.Item key='logout' onClick={async () => Auth.signOut()}>Sign out</Menu.Item>
-    </Menu>
-  );
+      ),
+      key: 'user-settings'
+    },
+    {
+      type: 'divider',
+    },
+    {
+      label: 'Sign out',
+      key: 'user-signout',
+      onClick: async () => { Auth.signOut() },
+    }
+  ]
 
-  // This eventually needs to become a Dropdown with a menu.
-  // For now, we can just put the login stuff direclty into the popover.
   return user ? (
-    <Dropdown overlay={content()} trigger={['click']}>
+    <Dropdown menu={{ items: menuItems }} trigger={['click']} >
       <Button
         aria-label='User settings'
         type='text'
@@ -76,7 +89,7 @@ const UserButton = () => {
           </Avatar>
         )}
       />
-    </Dropdown>
+    </Dropdown >
   ) : (
     <Button
       type='dashed'