diff --git a/cypress/elements/fileMenu/index.js b/cypress/elements/fileMenu/index.js
index db31dfaa09..cec32b8baf 100644
--- a/cypress/elements/fileMenu/index.js
+++ b/cypress/elements/fileMenu/index.js
@@ -1,9 +1,7 @@
-import { clickMenuBarFileButton } from '../menuBar.js'
+import { clickMenuBarFileButton, menubarEl } from '../menuBar.js'
 
 const deleteModalEl = 'file-menu-delete-modal'
 const fileMenuContainerEl = 'file-menu-container'
-const fileMenuToggleEl = 'file-menu-toggle'
-const fileMenuToggleLayerEl = 'file-menu-toggle-layer'
 
 export const FILE_MENU_BUTTON_NEW = 'New'
 export const FILE_MENU_BUTTON_OPEN = 'Open…'
@@ -16,12 +14,11 @@ export const FILE_MENU_BUTTON_SHARE = 'Share…'
 export const FILE_MENU_BUTTON_GETLINK = 'Get link…'
 export const FILE_MENU_BUTTON_DELETE = 'Delete'
 
-export const closeFileMenuWithClick = () =>
-    cy.getBySel(fileMenuToggleLayerEl).click('topLeft')
+export const closeFileMenuWithClick = () => cy.get('body').click()
 
 export const closeFileMenuWithEsc = () =>
-    cy.getBySel(fileMenuToggleEl).type('{esc}', { force: true })
-// use force as the element that's being typed into is hidden
+    // use force as the element that's being typed into is hidden
+    cy.getBySel(menubarEl).contains('File').type('{esc}', { force: true })
 
 export const clickFileMenuButton = (buttonName) =>
     cy.getBySel(fileMenuContainerEl).contains(buttonName).click()
diff --git a/cypress/elements/menuBar.js b/cypress/elements/menuBar.js
index 22bf72f3e0..4811c77b56 100644
--- a/cypress/elements/menuBar.js
+++ b/cypress/elements/menuBar.js
@@ -1,4 +1,4 @@
-const menubarEl = 'app-menubar'
+export const menubarEl = 'dhis2-analytics-hovermenubar'
 const updateButton = 'app-menubar-update-button'
 const optionsButton = 'app-menubar-options-button'
 
@@ -7,5 +7,11 @@ export const clickMenuBarUpdateButton = () => cy.getBySel(updateButton).click()
 export const clickMenuBarFileButton = () =>
     cy.getBySel(menubarEl).contains('File').click()
 
-export const clickMenuBarOptionsButton = () =>
-    cy.getBySel(optionsButton).click()
+export function clickMenuBarOptionsButton() {
+    return cy.getBySel(optionsButton).click()
+}
+
+export const openOptionsModal = (section = 'Data') => {
+    clickMenuBarOptionsButton()
+    return cy.getBySel('options-menu-list').contains(section).click()
+}
diff --git a/cypress/integration/options/axes.cy.js b/cypress/integration/options/axes.cy.js
index 6ca92a3144..8b42ce1868 100644
--- a/cypress/integration/options/axes.cy.js
+++ b/cypress/integration/options/axes.cy.js
@@ -8,7 +8,7 @@ import {
     clickDimensionModalUpdateButton,
 } from '../../elements/dimensionModal/index.js'
 import { openDimension } from '../../elements/dimensionsPanel.js'
-import { clickMenuBarOptionsButton } from '../../elements/menuBar.js'
+import { openOptionsModal } from '../../elements/menuBar.js'
 import {
     clickOptionsModalUpdateButton,
     clickOptionsTab,
@@ -57,8 +57,7 @@ describe('Options - Vertical axis', () => {
     })
     describe('title', () => {
         it('opens Options -> Axes', () => {
-            clickMenuBarOptionsButton()
-            clickOptionsTab(OPTIONS_TAB_AXES)
+            openOptionsModal(OPTIONS_TAB_AXES)
         })
         it("sets axis title to 'Custom'", () => {
             setAxisTitleTextModeTo('Custom')
@@ -76,8 +75,7 @@ describe('Options - Vertical axis', () => {
     })
     describe('range', () => {
         it('opens Options -> Axes', () => {
-            clickMenuBarOptionsButton()
-            clickOptionsTab(OPTIONS_TAB_AXES)
+            openOptionsModal(OPTIONS_TAB_AXES)
         })
         it('sets min value', () => {
             setAxisRangeMinValue(TEST_AXIS, TEST_MIN_VALUE)
@@ -111,8 +109,7 @@ describe('Options - Vertical axis', () => {
     })
     describe('options modal keeps changes when reopening', () => {
         it('opens Options -> Axes', () => {
-            clickMenuBarOptionsButton()
-            clickOptionsTab(OPTIONS_TAB_AXES)
+            openOptionsModal(OPTIONS_TAB_AXES)
         })
         it(`title is "${TEST_TITLE}"`, () => {
             expectAxisTitleToBeValue(TEST_AXIS, TEST_TITLE)
@@ -141,8 +138,7 @@ describe('Options - Horizontal axis', () => {
     })
     describe('title', () => {
         it('opens Options -> Axes', () => {
-            clickMenuBarOptionsButton()
-            clickOptionsTab(OPTIONS_TAB_AXES)
+            openOptionsModal(OPTIONS_TAB_AXES)
         })
         it(`switches to '${TEST_TAB}' tab`, () => {
             switchAxesTabTo(TEST_TAB)
@@ -163,8 +159,7 @@ describe('Options - Horizontal axis', () => {
     })
     describe('options modal keeps changes when reopening', () => {
         it('opens Options -> Axes', () => {
-            clickMenuBarOptionsButton()
-            clickOptionsTab(OPTIONS_TAB_AXES)
+            openOptionsModal(OPTIONS_TAB_AXES)
         })
         it(`switches to '${TEST_TAB}' tab`, () => {
             switchAxesTabTo(TEST_TAB)
@@ -185,8 +180,7 @@ describe('Options - Auto-generated axis title', () => {
     })
     describe('Single item - single axis', () => {
         it('opens Options -> Axes', () => {
-            clickMenuBarOptionsButton()
-            clickOptionsTab(OPTIONS_TAB_AXES)
+            openOptionsModal(OPTIONS_TAB_AXES)
         })
         it("sets axis title to 'Auto generated'", () => {
             setAxisTitleTextModeTo('Auto generated')
@@ -238,8 +232,7 @@ describe('Options - Auto-generated axis title', () => {
             expectVisualizationToBeVisible(VIS_TYPE_COLUMN)
         })
         it('opens Options -> Series', () => {
-            clickMenuBarOptionsButton()
-            clickOptionsTab(OPTIONS_TAB_SERIES)
+            openOptionsModal(OPTIONS_TAB_SERIES)
         })
         it('enables multi axis', () => {
             setItemToAxis(1, 2)
diff --git a/cypress/integration/options/fontStyles.cy.js b/cypress/integration/options/fontStyles.cy.js
index 4f445c95d9..15408d334f 100644
--- a/cypress/integration/options/fontStyles.cy.js
+++ b/cypress/integration/options/fontStyles.cy.js
@@ -9,11 +9,10 @@ import {
     clickDimensionModalUpdateButton,
 } from '../../elements/dimensionModal/index.js'
 import { openDimension } from '../../elements/dimensionsPanel.js'
-import { clickMenuBarOptionsButton } from '../../elements/menuBar.js'
+import { openOptionsModal } from '../../elements/menuBar.js'
 import {
     changeFontSizeOption,
     clickOptionsModalUpdateButton,
-    clickOptionsTab,
     changeTextAlignOption,
     clickBoldButton,
     clickItalicButton,
@@ -129,8 +128,7 @@ describe('Options - Font styles', () => {
             expectWindowConfigTitleToBeValue(CONFIG_DEFAULT_TITLE)
         })
         it('opens Options -> Style', () => {
-            clickMenuBarOptionsButton()
-            clickOptionsTab(OPTIONS_TAB_STYLE)
+            openOptionsModal(OPTIONS_TAB_STYLE)
         })
         setFontStyleOptions({
             fontSize: TEST_FONT_SIZE_OPTION.input,
@@ -174,8 +172,7 @@ describe('Options - Font styles', () => {
             expectWindowConfigSubtitleToBeValue(CONFIG_DEFAULT_SUBTITLE)
         })
         it('opens Options -> Style', () => {
-            clickMenuBarOptionsButton()
-            clickOptionsTab(OPTIONS_TAB_STYLE)
+            openOptionsModal(OPTIONS_TAB_STYLE)
         })
         it('sets a custom subtitle', () => {
             setCustomSubtitle(TEST_SUBTITLE_TEXT)
@@ -220,8 +217,7 @@ describe('Options - Font styles', () => {
         const prefix = TARGET_LINE_PREFIX
 
         it('opens Options -> Data', () => {
-            clickMenuBarOptionsButton()
-            clickOptionsTab(OPTIONS_TAB_DATA)
+            openOptionsModal(OPTIONS_TAB_DATA)
         })
         it('sets target line', () => {
             cy.log(`Test value: ${TEST_VALUE}`)
@@ -280,8 +276,7 @@ describe('Options - Font styles', () => {
         const prefix = BASE_LINE_PREFIX
 
         it('opens Options -> Data', () => {
-            clickMenuBarOptionsButton()
-            clickOptionsTab(OPTIONS_TAB_DATA)
+            openOptionsModal(OPTIONS_TAB_DATA)
         })
         it('sets base line', () => {
             cy.log(`Test value: ${TEST_VALUE}`)
@@ -338,8 +333,7 @@ describe('Options - Font styles', () => {
         const prefix = SERIES_KEY_PREFIX
 
         it('opens Options -> Style', () => {
-            clickMenuBarOptionsButton()
-            clickOptionsTab(OPTIONS_TAB_STYLE)
+            openOptionsModal(OPTIONS_TAB_STYLE)
         })
         setFontStyleOptions({
             fontSize: TEST_FONT_SIZE_OPTION.input,
@@ -375,8 +369,7 @@ describe('Options - Font styles', () => {
         const prefix = VERTICAL_AXIS_LABELS_PREFIX
 
         it('opens Options -> Axes', () => {
-            clickMenuBarOptionsButton()
-            clickOptionsTab(OPTIONS_TAB_AXES)
+            openOptionsModal(OPTIONS_TAB_AXES)
         })
         setFontStyleOptions({
             fontSize: TEST_FONT_SIZE_OPTION.input,
@@ -410,8 +403,7 @@ describe('Options - Font styles', () => {
         const prefix = HORIZONTAL_AXIS_LABELS_PREFIX
 
         it('opens Options -> Axes', () => {
-            clickMenuBarOptionsButton()
-            clickOptionsTab(OPTIONS_TAB_AXES)
+            openOptionsModal(OPTIONS_TAB_AXES)
             switchAxesTabTo('Horizontal (x) axis')
         })
         setFontStyleOptions({
@@ -451,8 +443,7 @@ describe('Options - Font styles', () => {
         const prefix = HORIZONTAL_AXIS_TITLE_PREFIX
 
         it('opens Options -> Axes', () => {
-            clickMenuBarOptionsButton()
-            clickOptionsTab(OPTIONS_TAB_AXES)
+            openOptionsModal(OPTIONS_TAB_AXES)
         })
         it(`sets horizontal axis title to "${TEST_TITLE}"`, () => {
             switchAxesTabTo('Horizontal (x) axis')
@@ -500,8 +491,7 @@ describe('Options - Font styles', () => {
         const prefix = VERTICAL_AXIS_TITLE_PREFIX
 
         it('opens Options -> Axes', () => {
-            clickMenuBarOptionsButton()
-            clickOptionsTab(OPTIONS_TAB_AXES)
+            openOptionsModal(OPTIONS_TAB_AXES)
         })
         it(`sets vertical axis title to "${TEST_TITLE}"`, () => {
             setAxisTitleTextModeTo('Custom')
diff --git a/cypress/integration/options/icon.cy.js b/cypress/integration/options/icon.cy.js
index 66b8942338..541e586eac 100644
--- a/cypress/integration/options/icon.cy.js
+++ b/cypress/integration/options/icon.cy.js
@@ -27,7 +27,7 @@ import {
     unselectAllItemsByButton,
 } from '../../elements/dimensionModal/index.js'
 import { openDimension } from '../../elements/dimensionsPanel.js'
-import { clickMenuBarOptionsButton } from '../../elements/menuBar.js'
+import { openOptionsModal } from '../../elements/menuBar.js'
 import {
     OPTIONS_TAB_LEGEND,
     OPTIONS_TAB_STYLE,
@@ -97,8 +97,7 @@ describe('Icon', () => {
     TEST_TYPES.forEach((type) => {
         it(`icon shows when option is enabled for ${type}`, () => {
             // enable the icon
-            clickMenuBarOptionsButton()
-            clickOptionsTab(OPTIONS_TAB_STYLE)
+            openOptionsModal(OPTIONS_TAB_STYLE)
             clickCheckbox('option-show-data-item-icon')
             clickOptionsModalHideButton()
 
@@ -129,8 +128,7 @@ describe('Icon', () => {
     // TODO: Skipped because of the same reason as the commented out tests above
     it.skip('icon gets correct color when a legend is in use', () => {
         // enable the icon
-        clickMenuBarOptionsButton()
-        clickOptionsTab(OPTIONS_TAB_STYLE)
+        openOptionsModal(OPTIONS_TAB_STYLE)
         clickCheckbox('option-show-data-item-icon')
 
         // enable the legend
@@ -176,8 +174,7 @@ describe('Icon', () => {
         expectSingleValueToHaveIconColor('#ffffff')
 
         // switch to apply legend color to text
-        clickMenuBarOptionsButton()
-        clickOptionsTab(OPTIONS_TAB_LEGEND)
+        openOptionsModal(OPTIONS_TAB_LEGEND)
         changeDisplayStyleToText()
         clickOptionsModalUpdateButton()
 
diff --git a/cypress/integration/options/legend.cy.js b/cypress/integration/options/legend.cy.js
index 022ea9e717..4b1d67b9cd 100644
--- a/cypress/integration/options/legend.cy.js
+++ b/cypress/integration/options/legend.cy.js
@@ -31,15 +31,14 @@ import {
     openDimension,
 } from '../../elements/layout.js'
 import {
-    clickMenuBarOptionsButton,
     clickMenuBarUpdateButton,
+    openOptionsModal,
 } from '../../elements/menuBar.js'
 import {
     changeDisplayStrategyToFixed,
     changeDisplayStyleToText,
     changeFixedLegendSet,
     clickOptionsModalUpdateButton,
-    clickOptionsTab,
     toggleLegend,
     expectFixedLegendSetToBe,
     expectLegendDisplayStrategyToBeByDataItem,
@@ -102,8 +101,7 @@ describe('Options - Legend', () => {
             expectVisualizationToBeVisible(VIS_TYPE_COLUMN)
         })
         it('enables legend', () => {
-            clickMenuBarOptionsButton()
-            clickOptionsTab(OPTIONS_TAB_LEGEND)
+            openOptionsModal(OPTIONS_TAB_LEGEND)
             toggleLegend()
             expectLegendToBeEnabled()
             expectLegendDisplayStrategyToBeByDataItem()
@@ -119,8 +117,7 @@ describe('Options - Legend', () => {
             )
         })
         it(`changes legend display strategy to fixed (${TEST_LEGEND_SET})`, () => {
-            clickMenuBarOptionsButton()
-            clickOptionsTab(OPTIONS_TAB_LEGEND)
+            openOptionsModal(OPTIONS_TAB_LEGEND)
             expectLegendDisplayStrategyToBeByDataItem()
             changeDisplayStrategyToFixed()
             expectLegendDisplayStrategyToBeFixed()
@@ -140,8 +137,7 @@ describe('Options - Legend', () => {
             expectLegendKeyToBeHidden()
         })
         it('verifies that options are persisted', () => {
-            clickMenuBarOptionsButton()
-            clickOptionsTab(OPTIONS_TAB_LEGEND)
+            openOptionsModal(OPTIONS_TAB_LEGEND)
             expectLegendDisplayStrategyToBeFixed()
             expectFixedLegendSetToBe(TEST_LEGEND_SET)
         })
@@ -180,8 +176,7 @@ describe('Options - Legend', () => {
             expectSingleValueToNotHaveBackgroundColor()
         })
         it('enables legend', () => {
-            clickMenuBarOptionsButton()
-            clickOptionsTab(OPTIONS_TAB_LEGEND)
+            openOptionsModal(OPTIONS_TAB_LEGEND)
             toggleLegend()
             expectLegendToBeEnabled()
             expectLegendDisplayStrategyToBeByDataItem()
@@ -197,8 +192,7 @@ describe('Options - Legend', () => {
             expectSVSubtitleToHaveColor(EXPECTED_STANDARD_SUBTITLE_COLOR)
         })
         it('changes legend display style to text color', () => {
-            clickMenuBarOptionsButton()
-            clickOptionsTab(OPTIONS_TAB_LEGEND)
+            openOptionsModal(OPTIONS_TAB_LEGEND)
             expectLegendDisplayStrategyToBeByDataItem()
             expectLegendDisplayStyleToBeFill()
             changeDisplayStyleToText()
@@ -214,8 +208,7 @@ describe('Options - Legend', () => {
             expectSVSubtitleToHaveColor(EXPECTED_STANDARD_SUBTITLE_COLOR)
         })
         it(`changes legend display strategy to fixed (${TEST_LEGEND_SET_WITH_CONTRAST})`, () => {
-            clickMenuBarOptionsButton()
-            clickOptionsTab(OPTIONS_TAB_LEGEND)
+            openOptionsModal(OPTIONS_TAB_LEGEND)
             expectLegendDisplayStyleToBeText()
             expectLegendDisplayStrategyToBeByDataItem()
             changeDisplayStrategyToFixed()
@@ -232,8 +225,7 @@ describe('Options - Legend', () => {
             expectSVSubtitleToHaveColor(EXPECTED_STANDARD_SUBTITLE_COLOR)
         })
         it('changes legend display style to background color', () => {
-            clickMenuBarOptionsButton()
-            clickOptionsTab(OPTIONS_TAB_LEGEND)
+            openOptionsModal(OPTIONS_TAB_LEGEND)
             expectLegendDisplayStrategyToBeFixed()
             expectLegendDisplayStyleToBeText()
             changeDisplayStyleToFill()
@@ -249,8 +241,7 @@ describe('Options - Legend', () => {
             expectSVSubtitleToHaveColor(EXPECTED_CONTRAST_TEXT_COLOR)
         })
         it(`changes title and subtitle colors`, () => {
-            clickMenuBarOptionsButton()
-            clickOptionsTab(OPTIONS_TAB_STYLE)
+            openOptionsModal(OPTIONS_TAB_STYLE)
             changeColor('option-chart-title', EXPECTED_CUSTOM_TITLE_COLOR)
             changeColor('option-chart-subtitle', EXPECTED_CUSTOM_SUBTITLE_COLOR)
             clickOptionsModalUpdateButton()
@@ -263,8 +254,7 @@ describe('Options - Legend', () => {
             expectSVSubtitleToHaveColor(EXPECTED_CUSTOM_SUBTITLE_COLOR)
         })
         it('changes legend display style to text color', () => {
-            clickMenuBarOptionsButton()
-            clickOptionsTab(OPTIONS_TAB_LEGEND)
+            openOptionsModal(OPTIONS_TAB_LEGEND)
             expectLegendDisplayStrategyToBeFixed()
             expectLegendDisplayStyleToBeFill()
             changeDisplayStyleToText()
@@ -280,8 +270,7 @@ describe('Options - Legend', () => {
             expectSVSubtitleToHaveColor(EXPECTED_CUSTOM_SUBTITLE_COLOR)
         })
         it(`changes legend display strategy to by data item`, () => {
-            clickMenuBarOptionsButton()
-            clickOptionsTab(OPTIONS_TAB_LEGEND)
+            openOptionsModal(OPTIONS_TAB_LEGEND)
             expectLegendDisplayStyleToBeText()
             expectLegendDisplayStrategyToBeFixed()
             changeDisplayStrategyToByDataItem()
@@ -297,8 +286,7 @@ describe('Options - Legend', () => {
             expectSVSubtitleToHaveColor(EXPECTED_CUSTOM_SUBTITLE_COLOR)
         })
         it('changes legend display style to background color', () => {
-            clickMenuBarOptionsButton()
-            clickOptionsTab(OPTIONS_TAB_LEGEND)
+            openOptionsModal(OPTIONS_TAB_LEGEND)
             changeDisplayStrategyToByDataItem()
             expectLegendDisplayStyleToBeText()
             changeDisplayStyleToFill()
@@ -317,8 +305,7 @@ describe('Options - Legend', () => {
             expectLegendKeyToBeHidden()
         })
         it('enables legend key option', () => {
-            clickMenuBarOptionsButton()
-            clickOptionsTab(OPTIONS_TAB_LEGEND)
+            openOptionsModal(OPTIONS_TAB_LEGEND)
             toggleLegendKeyOption()
             expectLegendKeyOptionToBeEnabled()
             clickOptionsModalUpdateButton()
@@ -342,8 +329,7 @@ describe('Options - Legend', () => {
             expectVisualizationToBeVisible(VIS_TYPE_GAUGE)
         })
         it('enables legend', () => {
-            clickMenuBarOptionsButton()
-            clickOptionsTab(OPTIONS_TAB_LEGEND)
+            openOptionsModal(OPTIONS_TAB_LEGEND)
             toggleLegend()
             expectLegendToBeEnabled()
             expectLegendDisplayStrategyToBeByDataItem()
@@ -355,8 +341,7 @@ describe('Options - Legend', () => {
             expectWindowConfigYAxisToHaveColor(EXPECTED_BY_DATA_COLOR)
         })
         it(`changes legend display strategy to fixed (${TEST_LEGEND_SET})`, () => {
-            clickMenuBarOptionsButton()
-            clickOptionsTab(OPTIONS_TAB_LEGEND)
+            openOptionsModal(OPTIONS_TAB_LEGEND)
             expectLegendDisplayStrategyToBeByDataItem()
             expectLegendDisplayStyleToBeFill()
             changeDisplayStrategyToFixed()
@@ -369,8 +354,7 @@ describe('Options - Legend', () => {
             expectWindowConfigYAxisToHaveColor(EXPECTED_FIXED_COLOR)
         })
         it('changes legend display style to text color', () => {
-            clickMenuBarOptionsButton()
-            clickOptionsTab(OPTIONS_TAB_LEGEND)
+            openOptionsModal(OPTIONS_TAB_LEGEND)
             expectLegendDisplayStrategyToBeFixed()
             expectFixedLegendSetToBe(TEST_LEGEND_SET)
             expectLegendDisplayStyleToBeFill()
@@ -389,8 +373,7 @@ describe('Options - Legend', () => {
             expectLegendKeyToBeHidden()
         })
         it('verifies that options are persisted', () => {
-            clickMenuBarOptionsButton()
-            clickOptionsTab(OPTIONS_TAB_LEGEND)
+            openOptionsModal(OPTIONS_TAB_LEGEND)
             expectLegendDisplayStrategyToBeFixed()
             expectFixedLegendSetToBe(TEST_LEGEND_SET)
         })
@@ -415,8 +398,7 @@ describe('Options - Legend', () => {
             expectVisualizationToBeVisible(VIS_TYPE_STACKED_COLUMN)
         })
         it('enables legend', () => {
-            clickMenuBarOptionsButton()
-            clickOptionsTab(OPTIONS_TAB_LEGEND)
+            openOptionsModal(OPTIONS_TAB_LEGEND)
             toggleLegend()
             expectLegendToBeEnabled()
             expectLegendDisplayStrategyToBeByDataItem()
@@ -432,8 +414,7 @@ describe('Options - Legend', () => {
             )
         })
         it(`changes legend display strategy to fixed (${TEST_LEGEND_SET})`, () => {
-            clickMenuBarOptionsButton()
-            clickOptionsTab(OPTIONS_TAB_LEGEND)
+            openOptionsModal(OPTIONS_TAB_LEGEND)
             expectLegendDisplayStrategyToBeByDataItem()
             changeDisplayStrategyToFixed()
             expectLegendDisplayStrategyToBeFixed()
@@ -453,8 +434,7 @@ describe('Options - Legend', () => {
             expectLegendKeyToBeHidden()
         })
         it('verifies that options are persisted', () => {
-            clickMenuBarOptionsButton()
-            clickOptionsTab(OPTIONS_TAB_LEGEND)
+            openOptionsModal(OPTIONS_TAB_LEGEND)
             expectLegendDisplayStrategyToBeFixed()
             expectFixedLegendSetToBe(TEST_LEGEND_SET)
         })
@@ -490,8 +470,7 @@ describe('Options - Legend', () => {
             })
         })
         it('enables legend', () => {
-            clickMenuBarOptionsButton()
-            clickOptionsTab(OPTIONS_TAB_LEGEND)
+            openOptionsModal(OPTIONS_TAB_LEGEND)
             toggleLegend()
             expectLegendToBeEnabled()
             expectLegendDisplayStrategyToBeByDataItem()
@@ -508,8 +487,7 @@ describe('Options - Legend', () => {
             })
         })
         it('changes legend display style to text color', () => {
-            clickMenuBarOptionsButton()
-            clickOptionsTab(OPTIONS_TAB_LEGEND)
+            openOptionsModal(OPTIONS_TAB_LEGEND)
             expectLegendDisplayStrategyToBeByDataItem()
             expectLegendDisplayStyleToBeFill()
             changeDisplayStyleToText()
@@ -529,8 +507,7 @@ describe('Options - Legend', () => {
             expectLegendKeyToBeHidden()
         })
         it('verifies that options are persisted', () => {
-            clickMenuBarOptionsButton()
-            clickOptionsTab(OPTIONS_TAB_LEGEND)
+            openOptionsModal(OPTIONS_TAB_LEGEND)
             expectLegendDisplayStrategyToBeByDataItem()
         })
         it('enables legend key option', () => {
@@ -558,8 +535,7 @@ describe('Options - Legend', () => {
             expectVisualizationToBeVisible(VIS_TYPE_PIVOT_TABLE)
         })
         it('enables legend', () => {
-            clickMenuBarOptionsButton()
-            clickOptionsTab(OPTIONS_TAB_LEGEND)
+            openOptionsModal(OPTIONS_TAB_LEGEND)
             toggleLegend()
             expectLegendToBeEnabled()
             expectLegendDisplayStrategyToBeByDataItem()
@@ -592,8 +568,7 @@ describe('Options - Legend', () => {
             )
         })
         it('verifies that options are persisted', () => {
-            clickMenuBarOptionsButton()
-            clickOptionsTab(OPTIONS_TAB_LEGEND)
+            openOptionsModal(OPTIONS_TAB_LEGEND)
             expectLegendDisplayStyleToBeText()
             expectLegendDisplayStrategyToBeFixed()
         })
@@ -613,8 +588,7 @@ describe('Options - Legend', () => {
             expectVisualizationToBeVisible(VIS_TYPE_PIVOT_TABLE)
         })
         it('enables legend', () => {
-            clickMenuBarOptionsButton()
-            clickOptionsTab(OPTIONS_TAB_LEGEND)
+            openOptionsModal(OPTIONS_TAB_LEGEND)
             toggleLegend()
             expectLegendToBeEnabled()
             expectLegendDisplayStrategyToBeByDataItem()
@@ -643,8 +617,7 @@ describe('Options - Legend', () => {
             expectSingleValueToHaveBackgroundColor(EXPECTED_FIXED_COLOR)
         })
         it('verifies that options are persisted', () => {
-            clickMenuBarOptionsButton()
-            clickOptionsTab(OPTIONS_TAB_LEGEND)
+            openOptionsModal(OPTIONS_TAB_LEGEND)
             expectLegendDisplayStyleToBeFill()
             expectLegendDisplayStrategyToBeFixed()
         })
@@ -658,8 +631,7 @@ describe('Options - Legend', () => {
             expectVisualizationToBeVisible()
         })
         it('enables legend (Column)', () => {
-            clickMenuBarOptionsButton()
-            clickOptionsTab(OPTIONS_TAB_LEGEND)
+            openOptionsModal(OPTIONS_TAB_LEGEND)
             toggleLegend()
             expectLegendToBeEnabled()
             clickOptionsModalUpdateButton()
@@ -669,8 +641,7 @@ describe('Options - Legend', () => {
             expectLegendKeyToBeHidden()
         })
         it('enables legend key option (Column)', () => {
-            clickMenuBarOptionsButton()
-            clickOptionsTab(OPTIONS_TAB_LEGEND)
+            openOptionsModal(OPTIONS_TAB_LEGEND)
             toggleLegendKeyOption()
             expectLegendKeyOptionToBeEnabled()
             clickOptionsModalUpdateButton()
@@ -690,8 +661,7 @@ describe('Options - Legend', () => {
             expectLegedKeyItemAmountToBe(TEST_ITEMS.length)
         })
         it('disables legend key option (Pivot table)', () => {
-            clickMenuBarOptionsButton()
-            clickOptionsTab(OPTIONS_TAB_LEGEND)
+            openOptionsModal(OPTIONS_TAB_LEGEND)
             toggleLegendKeyOption()
             expectLegendKeyOptionToBeDisabled()
             clickOptionsModalUpdateButton()
@@ -709,8 +679,7 @@ describe('Options - Legend', () => {
             expectLegendKeyToBeHidden()
         })
         it('enables legend key option (Gauge)', () => {
-            clickMenuBarOptionsButton()
-            clickOptionsTab(OPTIONS_TAB_LEGEND)
+            openOptionsModal(OPTIONS_TAB_LEGEND)
             toggleLegendKeyOption()
             expectLegendKeyOptionToBeEnabled()
             clickOptionsModalUpdateButton()
@@ -730,8 +699,7 @@ describe('Options - Legend', () => {
             expectLegedKeyItemAmountToBe(1)
         })
         it('disables legend key option (Single value)', () => {
-            clickMenuBarOptionsButton()
-            clickOptionsTab(OPTIONS_TAB_LEGEND)
+            openOptionsModal(OPTIONS_TAB_LEGEND)
             toggleLegendKeyOption()
             expectLegendKeyOptionToBeDisabled()
             clickOptionsModalUpdateButton()
@@ -750,8 +718,7 @@ describe('Options - Legend', () => {
             expectVisualizationToBeVisible(VIS_TYPE_COLUMN)
         })
         it('enables legend', () => {
-            clickMenuBarOptionsButton()
-            clickOptionsTab(OPTIONS_TAB_LEGEND)
+            openOptionsModal(OPTIONS_TAB_LEGEND)
             toggleLegend()
             expectLegendToBeEnabled()
             expectLegendDisplayStrategyToBeByDataItem()
@@ -777,7 +744,7 @@ describe('Options - Legend', () => {
             )
         })
         it('legend options are not available', () => {
-            clickMenuBarOptionsButton()
+            openOptionsModal()
             expectOptionsTabToBeHidden(OPTIONS_TAB_LEGEND)
             clickOptionsModalHideButton()
         })
@@ -803,7 +770,7 @@ describe('Options - Legend', () => {
             )
         })
         it('legend options are not available', () => {
-            clickMenuBarOptionsButton()
+            openOptionsModal()
             expectOptionsTabToBeHidden(OPTIONS_TAB_LEGEND)
         })
         it('legend key is hidden', () => {
@@ -825,8 +792,7 @@ describe('Options - Legend', () => {
             expectSeriesKeyToHaveSeriesKeyItems(2)
         })
         it('enables legend', () => {
-            clickMenuBarOptionsButton()
-            clickOptionsTab(OPTIONS_TAB_LEGEND)
+            openOptionsModal(OPTIONS_TAB_LEGEND)
             toggleLegend()
             expectLegendToBeEnabled()
             expectLegendDisplayStrategyToBeByDataItem()
@@ -834,8 +800,7 @@ describe('Options - Legend', () => {
             expectChartTitleToBeVisible()
         })
         it(`changes legend display strategy to fixed (${TEST_ITEMS[1].legendSet})`, () => {
-            clickMenuBarOptionsButton()
-            clickOptionsTab(OPTIONS_TAB_LEGEND)
+            openOptionsModal(OPTIONS_TAB_LEGEND)
             expectLegendDisplayStrategyToBeByDataItem()
             changeDisplayStrategyToFixed()
             expectLegendDisplayStrategyToBeFixed()
@@ -852,8 +817,7 @@ describe('Options - Legend', () => {
             selectIndicators([TEST_ITEM.name])
             clickDimensionModalUpdateButton()
             expectVisualizationToBeVisible(VIS_TYPE_COLUMN)
-            clickMenuBarOptionsButton()
-            clickOptionsTab(OPTIONS_TAB_LEGEND)
+            openOptionsModal(OPTIONS_TAB_LEGEND)
             toggleLegend()
             expectLegendToBeEnabled()
             expectLegendDisplayStrategyToBeByDataItem()
@@ -895,8 +859,7 @@ describe('Options - Legend', () => {
             expectLegendKeyToBeHidden()
         })
         it(`changes legend display strategy to fixed (${TEST_ITEMS[1].legendSet})`, () => {
-            clickMenuBarOptionsButton()
-            clickOptionsTab(OPTIONS_TAB_LEGEND)
+            openOptionsModal(OPTIONS_TAB_LEGEND)
             expectLegendDisplayStrategyToBeByDataItem()
             changeDisplayStrategyToFixed()
             expectLegendDisplayStrategyToBeFixed()
@@ -924,8 +887,7 @@ describe('Options - Legend', () => {
             selectIndicators(TEST_ITEMS.map((item) => item.name))
             clickDimensionModalUpdateButton()
             expectVisualizationToBeVisible(VIS_TYPE_COLUMN)
-            clickMenuBarOptionsButton()
-            clickOptionsTab(OPTIONS_TAB_LEGEND)
+            openOptionsModal(OPTIONS_TAB_LEGEND)
             toggleLegend()
             expectLegendToBeEnabled()
             expectLegendDisplayStrategyToBeByDataItem()
@@ -943,8 +905,7 @@ describe('Options - Legend', () => {
             )
         })
         it(`changes all items to type ${VIS_TYPE_LINE}`, () => {
-            clickMenuBarOptionsButton()
-            clickOptionsTab(OPTIONS_TAB_SERIES)
+            openOptionsModal(OPTIONS_TAB_SERIES)
             TEST_ITEMS.forEach((item, index) =>
                 setItemToType(index, VIS_TYPE_LINE)
             )
@@ -964,8 +925,7 @@ describe('Options - Legend', () => {
             expectSeriesKeyToHaveSeriesKeyItems(2)
         })
         it(`changes first item (${TEST_ITEMS[0].name}) to type ${VIS_TYPE_COLUMN}`, () => {
-            clickMenuBarOptionsButton()
-            clickOptionsTab(OPTIONS_TAB_SERIES)
+            openOptionsModal(OPTIONS_TAB_SERIES)
             setItemToType(0, VIS_TYPE_COLUMN)
             clickOptionsModalUpdateButton()
             expectVisualizationToBeVisible()
@@ -995,8 +955,7 @@ describe('Options - Legend', () => {
             selectIndicators([TEST_ITEM.name])
             clickDimensionModalUpdateButton()
             expectVisualizationToBeVisible(VIS_TYPE_COLUMN)
-            clickMenuBarOptionsButton()
-            clickOptionsTab(OPTIONS_TAB_SERIES)
+            openOptionsModal(OPTIONS_TAB_SERIES)
             setItemToType(2, VIS_TYPE_LINE)
             clickOptionsModalUpdateButton()
             expectVisualizationToBeVisible()
diff --git a/cypress/integration/options/lines.cy.js b/cypress/integration/options/lines.cy.js
index 839925efe5..ea8fef0357 100644
--- a/cypress/integration/options/lines.cy.js
+++ b/cypress/integration/options/lines.cy.js
@@ -8,10 +8,9 @@ import {
     clickDimensionModalUpdateButton,
 } from '../../elements/dimensionModal/index.js'
 import { openDimension } from '../../elements/dimensionsPanel.js'
-import { clickMenuBarOptionsButton } from '../../elements/menuBar.js'
+import { openOptionsModal } from '../../elements/menuBar.js'
 import {
     clickOptionsModalUpdateButton,
-    clickOptionsTab,
     clickTrendLineCheckbox,
     OPTIONS_TAB_DATA,
     selectTrendLineType,
@@ -51,8 +50,7 @@ describe('Options - Lines', () => {
         trendLineTypes.forEach((trendLineType, index) => {
             describe(trendLineType.name, () => {
                 it('opens Options -> Data', () => {
-                    clickMenuBarOptionsButton()
-                    clickOptionsTab(OPTIONS_TAB_DATA)
+                    openOptionsModal(OPTIONS_TAB_DATA)
                 })
                 if (index === 0) {
                     it('enables trendline', () => {
@@ -79,7 +77,7 @@ describe('Options - Lines', () => {
             })
         })
     })
-    /*  TODO: 
+    /*  TODO:
         - Test base line and target line like trend line (above)
         - Pie, PT, SV shouldn't have the lines section in options
         - Gauge should only display base and target line (no trend line)
diff --git a/cypress/integration/visTypes/scatter.cy.js b/cypress/integration/visTypes/scatter.cy.js
index 88dea58ccd..6fba12f094 100644
--- a/cypress/integration/visTypes/scatter.cy.js
+++ b/cypress/integration/visTypes/scatter.cy.js
@@ -36,12 +36,11 @@ import {
     openDimensionOnAxis,
 } from '../../elements/layout.js'
 import {
-    clickMenuBarOptionsButton,
     clickMenuBarUpdateButton,
+    openOptionsModal,
 } from '../../elements/menuBar.js'
 import {
     clickOptionsModalUpdateButton,
-    clickOptionsTab,
     clickOutliersCheckbox,
     OPTIONS_TAB_AXES,
     OPTIONS_TAB_OUTLIERS,
@@ -166,8 +165,7 @@ describe('using a Scatter chart', () => {
                 max: 200,
             },
         ]
-        clickMenuBarOptionsButton()
-        clickOptionsTab(OPTIONS_TAB_AXES)
+        openOptionsModal(OPTIONS_TAB_AXES)
         TEST_AXES.forEach((test) => {
             switchAxesTabTo(test.label)
             setAxisRangeMinValue(test.axis, test.min)
@@ -181,8 +179,7 @@ describe('using a Scatter chart', () => {
         expectWindowConfigXAxisToHaveRangeMaxValue(TEST_AXES[1].max)
     })
     it('Options -> Outliers -> enables outliers', () => {
-        clickMenuBarOptionsButton()
-        clickOptionsTab(OPTIONS_TAB_OUTLIERS)
+        openOptionsModal(OPTIONS_TAB_OUTLIERS)
         clickOutliersCheckbox()
         // TODO: Set more outlier options
         clickOptionsModalUpdateButton()
diff --git a/i18n/en.pot b/i18n/en.pot
index e739fac14c..148b9e9dcb 100644
--- a/i18n/en.pot
+++ b/i18n/en.pot
@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2023-03-07T12:07:38.393Z\n"
-"PO-Revision-Date: 2023-03-07T12:07:38.393Z\n"
+"POT-Creation-Date: 2023-05-30T12:32:59.044Z\n"
+"PO-Revision-Date: 2023-05-30T12:32:59.044Z\n"
 
 msgid "All items"
 msgstr "All items"
@@ -210,9 +210,6 @@ msgstr "Select a period"
 msgid "Select years"
 msgstr "Select years"
 
-msgid "Interpretations"
-msgstr "Interpretations"
-
 msgid ""
 "This visualization can't be deleted because it is used on one or more "
 "dashboards"
diff --git a/package.json b/package.json
index 24b19270ee..d647189afb 100644
--- a/package.json
+++ b/package.json
@@ -39,7 +39,7 @@
         "start-server-and-test": "^2.0.0"
     },
     "dependencies": {
-        "@dhis2/analytics": "^25.1.11",
+        "@dhis2/analytics": "^26.0.7",
         "@dhis2/app-runtime": "^3.7.0",
         "@dhis2/app-runtime-adapter-d2": "^1.1.0",
         "@dhis2/app-service-datastore": "^1.0.0-beta.3",
diff --git a/src/components/App.css b/src/components/App.css
index 8aea36a21f..9508d24b08 100644
--- a/src/components/App.css
+++ b/src/components/App.css
@@ -37,22 +37,6 @@ body {
     height: 48px;
 }
 
-/* Toolbar */
-
-.section-toolbar {
-    height: 39px;
-}
-
-.toolbar-type {
-    width: 260px;
-    border-right: 1px solid var(--colors-grey400);
-    border-bottom: 1px solid var(--colors-grey400);
-}
-
-.toolbar-menubar {
-    background-color: var(--colors-grey400);
-}
-
 /* Main */
 .section-main {
     overflow: hidden;
diff --git a/src/components/App.js b/src/components/App.js
index 7e67b30a06..f268ab0f4c 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -1,4 +1,4 @@
-import { apiFetchOrganisationUnitLevels } from '@dhis2/analytics'
+import { apiFetchOrganisationUnitLevels, Toolbar } from '@dhis2/analytics'
 import { useSetting } from '@dhis2/app-service-datastore'
 import i18n from '@dhis2/d2-i18n'
 import {
@@ -233,17 +233,13 @@ export class UnconnectedApp extends Component {
         return (
             <>
                 <div className="data-visualizer-app flex-ct flex-dir-col">
-                    <div className="section-toolbar flex-ct">
-                        <div className="toolbar-type">
-                            <VisualizationTypeSelector />
-                        </div>
-                        <div className="toolbar-menubar flex-grow-1">
-                            <MenuBar
-                                apiObjectName={this.apiObjectName}
-                                dataTest={'app-menubar'}
-                            />
-                        </div>
-                    </div>
+                    <Toolbar>
+                        <VisualizationTypeSelector />
+                        <MenuBar
+                            apiObjectName={this.apiObjectName}
+                            dataTest={'app-menubar'}
+                        />
+                    </Toolbar>
                     <div className="section-main flex-grow-1 flex-ct">
                         <DndContext>
                             <div className="main-left">
diff --git a/src/components/DownloadMenu/AdvancedSubMenu.js b/src/components/DownloadMenu/AdvancedSubMenu.js
index bf447da4f0..0f536d3aaf 100644
--- a/src/components/DownloadMenu/AdvancedSubMenu.js
+++ b/src/components/DownloadMenu/AdvancedSubMenu.js
@@ -1,3 +1,4 @@
+import { HoverMenuListItem } from '@dhis2/analytics'
 import i18n from '@dhis2/d2-i18n'
 import { MenuItem, MenuSectionHeader } from '@dhis2/ui'
 import PropTypes from 'prop-types'
@@ -10,53 +11,69 @@ import {
     FILE_FORMAT_SQL,
 } from './constants.js'
 
-export const AdvancedSubMenu = ({ onDownload, label, ...menuItemProps }) => (
-    <MenuItem label={label} {...menuItemProps}>
-        <MenuSectionHeader label={i18n.t('Data value set')} />
-        <MenuItem
-            label={i18n.t('JSON')}
-            onClick={() =>
-                onDownload({
-                    type: DOWNLOAD_TYPE_PLAIN,
-                    format: FILE_FORMAT_JSON,
-                    path: 'dataValueSet',
-                })
-            }
-        />
-        <MenuItem
-            label={i18n.t('XML')}
-            onClick={() =>
-                onDownload({
-                    type: DOWNLOAD_TYPE_PLAIN,
-                    format: FILE_FORMAT_XML,
-                    path: 'dataValueSet',
-                })
-            }
-        />
-        <MenuSectionHeader label={i18n.t('Other formats')} />
-        <MenuItem
-            label={i18n.t('JRXML')}
-            onClick={() =>
-                onDownload({
-                    type: DOWNLOAD_TYPE_PLAIN,
-                    format: FILE_FORMAT_JRXML,
-                })
-            }
-        />
-        <MenuItem
-            label={i18n.t('Raw data SQL')}
-            onClick={() =>
-                onDownload({
-                    type: DOWNLOAD_TYPE_PLAIN,
-                    format: FILE_FORMAT_SQL,
-                    path: 'debug/sql',
-                })
-            }
-        />
-    </MenuItem>
-)
+export const AdvancedSubMenu = ({
+    hoverable,
+    onDownload,
+    label,
+    ...menuItemProps
+}) => {
+    const MenuItemComponent = hoverable ? HoverMenuListItem : MenuItem
+
+    return (
+        <MenuItemComponent label={label} {...menuItemProps}>
+            <MenuSectionHeader
+                label={i18n.t('Data value set')}
+                dense={hoverable}
+            />
+            <MenuItemComponent
+                label={i18n.t('JSON')}
+                onClick={() =>
+                    onDownload({
+                        type: DOWNLOAD_TYPE_PLAIN,
+                        format: FILE_FORMAT_JSON,
+                        path: 'dataValueSet',
+                    })
+                }
+            />
+            <MenuItemComponent
+                label={i18n.t('XML')}
+                onClick={() =>
+                    onDownload({
+                        type: DOWNLOAD_TYPE_PLAIN,
+                        format: FILE_FORMAT_XML,
+                        path: 'dataValueSet',
+                    })
+                }
+            />
+            <MenuSectionHeader
+                label={i18n.t('Other formats')}
+                dense={hoverable}
+            />
+            <MenuItemComponent
+                label={i18n.t('JRXML')}
+                onClick={() =>
+                    onDownload({
+                        type: DOWNLOAD_TYPE_PLAIN,
+                        format: FILE_FORMAT_JRXML,
+                    })
+                }
+            />
+            <MenuItemComponent
+                label={i18n.t('Raw data SQL')}
+                onClick={() =>
+                    onDownload({
+                        type: DOWNLOAD_TYPE_PLAIN,
+                        format: FILE_FORMAT_SQL,
+                        path: 'debug/sql',
+                    })
+                }
+            />
+        </MenuItemComponent>
+    )
+}
 
 AdvancedSubMenu.propTypes = {
     label: PropTypes.string.isRequired,
     onDownload: PropTypes.func.isRequired,
+    hoverable: PropTypes.bool,
 }
diff --git a/src/components/DownloadMenu/DownloadMenu.js b/src/components/DownloadMenu/DownloadMenu.js
index b1c01fc11f..bc7f5320a1 100644
--- a/src/components/DownloadMenu/DownloadMenu.js
+++ b/src/components/DownloadMenu/DownloadMenu.js
@@ -1,4 +1,4 @@
-import { VIS_TYPE_PIVOT_TABLE } from '@dhis2/analytics'
+import { VIS_TYPE_PIVOT_TABLE, HoverMenuList } from '@dhis2/analytics'
 import i18n from '@dhis2/d2-i18n'
 import { FlyoutMenu, MenuSectionHeader } from '@dhis2/ui'
 import PropTypes from 'prop-types'
@@ -14,45 +14,66 @@ import { GraphicsMenu } from './GraphicsMenu.js'
 import { PlainDataSourceSubMenu } from './PlainDataSourceSubMenu.js'
 import { TableMenu } from './TableMenu.js'
 
-const DownloadMenu = ({ visType, onDownloadData, onDownloadImage }) => (
-    <FlyoutMenu>
-        {visType === VIS_TYPE_PIVOT_TABLE ? (
-            <TableMenu onDownload={onDownloadData} />
-        ) : (
-            <GraphicsMenu onDownload={onDownloadImage} />
-        )}
-        <MenuSectionHeader label={i18n.t('Plain data source')} />
-        <PlainDataSourceSubMenu
-            onDownload={onDownloadData}
-            label={i18n.t('JSON')}
-            format={FILE_FORMAT_JSON}
-        />
-        <PlainDataSourceSubMenu
-            onDownload={onDownloadData}
-            label={i18n.t('XML')}
-            format={FILE_FORMAT_XML}
-        />
-        <PlainDataSourceSubMenu
-            onDownload={onDownloadData}
-            label={i18n.t('Microsoft Excel')}
-            format={FILE_FORMAT_XLS}
-        />
-        <PlainDataSourceSubMenu
-            onDownload={onDownloadData}
-            label={i18n.t('CSV')}
-            format={FILE_FORMAT_CSV}
-        />
-        <AdvancedSubMenu
-            onDownload={onDownloadData}
-            label={i18n.t('Advanced')}
-        />
-    </FlyoutMenu>
-)
+const DownloadMenu = ({
+    visType,
+    onDownloadData,
+    onDownloadImage,
+    hoverable,
+}) => {
+    const MenuComponent = hoverable ? HoverMenuList : FlyoutMenu
+
+    return (
+        <MenuComponent>
+            {visType === VIS_TYPE_PIVOT_TABLE ? (
+                <TableMenu hoverable={hoverable} onDownload={onDownloadData} />
+            ) : (
+                <GraphicsMenu
+                    hoverable={hoverable}
+                    onDownload={onDownloadImage}
+                />
+            )}
+            <MenuSectionHeader
+                label={i18n.t('Plain data source')}
+                dense={hoverable}
+            />
+            <PlainDataSourceSubMenu
+                hoverable={hoverable}
+                onDownload={onDownloadData}
+                label={i18n.t('JSON')}
+                format={FILE_FORMAT_JSON}
+            />
+            <PlainDataSourceSubMenu
+                hoverable={hoverable}
+                onDownload={onDownloadData}
+                label={i18n.t('XML')}
+                format={FILE_FORMAT_XML}
+            />
+            <PlainDataSourceSubMenu
+                hoverable={hoverable}
+                onDownload={onDownloadData}
+                label={i18n.t('Microsoft Excel')}
+                format={FILE_FORMAT_XLS}
+            />
+            <PlainDataSourceSubMenu
+                hoverable={hoverable}
+                onDownload={onDownloadData}
+                label={i18n.t('CSV')}
+                format={FILE_FORMAT_CSV}
+            />
+            <AdvancedSubMenu
+                hoverable={hoverable}
+                onDownload={onDownloadData}
+                label={i18n.t('Advanced')}
+            />
+        </MenuComponent>
+    )
+}
 
 DownloadMenu.propTypes = {
     visType: PropTypes.string.isRequired,
     onDownloadData: PropTypes.func.isRequired,
     onDownloadImage: PropTypes.func.isRequired,
+    hoverable: PropTypes.bool,
 }
 
 export { DownloadMenu }
diff --git a/src/components/DownloadMenu/GraphicsMenu.js b/src/components/DownloadMenu/GraphicsMenu.js
index 3fe856aa82..83537ebf52 100644
--- a/src/components/DownloadMenu/GraphicsMenu.js
+++ b/src/components/DownloadMenu/GraphicsMenu.js
@@ -1,3 +1,4 @@
+import { HoverMenuListItem } from '@dhis2/analytics'
 import i18n from '@dhis2/d2-i18n'
 import {
     MenuItem,
@@ -10,27 +11,34 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import { FILE_FORMAT_PDF, FILE_FORMAT_PNG } from './constants.js'
 
-export const GraphicsMenu = ({ onDownload }) =>
-    React.Children.toArray([
-        <MenuSectionHeader
-            key="graphics-header"
-            label={i18n.t('Graphics')}
-            hideDivider
-        />,
-        <MenuItem
-            key="png"
-            icon={<IconImage24 color={colors.grey600} />}
-            label={i18n.t('Image (.png)')}
-            onClick={() => onDownload({ format: FILE_FORMAT_PNG })}
-        />,
-        <MenuItem
-            key="pdf"
-            icon={<IconFileDocument24 color={colors.grey600} />}
-            label={i18n.t('PDF (.pdf)')}
-            onClick={() => onDownload({ format: FILE_FORMAT_PDF })}
-        />,
-    ])
+export const GraphicsMenu = ({ hoverable, onDownload }) => {
+    const MenuItemComponent = hoverable ? HoverMenuListItem : MenuItem
+
+    return (
+        <>
+            <MenuSectionHeader
+                key="graphics-header"
+                label={i18n.t('Graphics')}
+                hideDivider
+                dense={hoverable}
+            />
+            <MenuItemComponent
+                key="png"
+                icon={<IconImage24 color={colors.grey600} />}
+                label={i18n.t('Image (.png)')}
+                onClick={() => onDownload({ format: FILE_FORMAT_PNG })}
+            />
+            <MenuItemComponent
+                key="pdf"
+                icon={<IconFileDocument24 color={colors.grey600} />}
+                label={i18n.t('PDF (.pdf)')}
+                onClick={() => onDownload({ format: FILE_FORMAT_PDF })}
+            />
+        </>
+    )
+}
 
 GraphicsMenu.propTypes = {
     onDownload: PropTypes.func.isRequired,
+    hoverable: PropTypes.bool,
 }
diff --git a/src/components/DownloadMenu/ModalDownloadDropdown.js b/src/components/DownloadMenu/ModalDownloadDropdown.js
index 421962a1c0..47ba771802 100644
--- a/src/components/DownloadMenu/ModalDownloadDropdown.js
+++ b/src/components/DownloadMenu/ModalDownloadDropdown.js
@@ -1,28 +1,40 @@
 import i18n from '@dhis2/d2-i18n'
 import { DropdownButton } from '@dhis2/ui'
 import PropTypes from 'prop-types'
-import React from 'react'
+import React, { useCallback, useState } from 'react'
 import { DownloadMenu } from './DownloadMenu.js'
 import styles from './ModalDownloadDropdown.module.css'
-import { useDownloadMenu } from './useDownloadMenu.js'
+import { useDownload } from './useDownload.js'
 
 const ModalDownloadDropdown = ({ relativePeriodDate }) => {
-    const {
-        isOpen,
-        toggleOpen,
-        disabled,
-        doDownloadData,
-        doDownloadImage,
-        visType,
-    } = useDownloadMenu(relativePeriodDate)
+    const { disabled, doDownloadData, doDownloadImage, visType } =
+        useDownload(relativePeriodDate)
+    const [isOpen, setIsOpen] = useState(false)
+    const toggleOpen = useCallback(() => {
+        setIsOpen((currentIsOpen) => !currentIsOpen)
+    }, [])
+    const onDownloadData = useCallback(
+        (payload) => {
+            doDownloadData(payload)
+            setIsOpen(false)
+        },
+        [doDownloadData]
+    )
+    const onDownloadImage = useCallback(
+        (payload) => {
+            doDownloadImage(payload)
+            setIsOpen(false)
+        },
+        [doDownloadImage]
+    )
 
     return (
         <div className={styles.container}>
             <DropdownButton
                 component={
                     <DownloadMenu
-                        onDownloadData={doDownloadData}
-                        onDownloadImage={doDownloadImage}
+                        onDownloadData={onDownloadData}
+                        onDownloadImage={onDownloadImage}
                         visType={visType}
                     />
                 }
diff --git a/src/components/DownloadMenu/PlainDataSourceSubMenu.js b/src/components/DownloadMenu/PlainDataSourceSubMenu.js
index aaa8f06ac5..3f790e3a59 100644
--- a/src/components/DownloadMenu/PlainDataSourceSubMenu.js
+++ b/src/components/DownloadMenu/PlainDataSourceSubMenu.js
@@ -1,3 +1,4 @@
+import { HoverMenuListItem } from '@dhis2/analytics'
 import i18n from '@dhis2/d2-i18n'
 import { MenuItem, MenuSectionHeader } from '@dhis2/ui'
 import PropTypes from 'prop-types'
@@ -12,46 +13,56 @@ import {
 export const PlainDataSourceSubMenu = ({
     onDownload,
     format,
+    hoverable,
     label,
     ...menuItemProps
-}) => (
-    <MenuItem label={label} {...menuItemProps}>
-        <MenuSectionHeader label={i18n.t('Metadata ID scheme')} />
-        <MenuItem
-            label={i18n.t('ID')}
-            onClick={() =>
-                onDownload({
-                    type: DOWNLOAD_TYPE_PLAIN,
-                    format,
-                    idScheme: ID_SCHEME_UID,
-                })
-            }
-        />
-        <MenuItem
-            label={i18n.t('Code')}
-            onClick={() =>
-                onDownload({
-                    type: DOWNLOAD_TYPE_PLAIN,
-                    format,
-                    idScheme: ID_SCHEME_CODE,
-                })
-            }
-        />
-        <MenuItem
-            label={i18n.t('Name')}
-            onClick={() =>
-                onDownload({
-                    type: DOWNLOAD_TYPE_PLAIN,
-                    format,
-                    idScheme: ID_SCHEME_NAME,
-                })
-            }
-        />
-    </MenuItem>
-)
+}) => {
+    const MenuItemComponent = hoverable ? HoverMenuListItem : MenuItem
+
+    return (
+        <MenuItemComponent label={label} {...menuItemProps}>
+            <MenuSectionHeader
+                label={i18n.t('Metadata ID scheme')}
+                hideDivider
+                dense={hoverable}
+            />
+            <MenuItemComponent
+                label={i18n.t('ID')}
+                onClick={() =>
+                    onDownload({
+                        type: DOWNLOAD_TYPE_PLAIN,
+                        format,
+                        idScheme: ID_SCHEME_UID,
+                    })
+                }
+            />
+            <MenuItemComponent
+                label={i18n.t('Code')}
+                onClick={() =>
+                    onDownload({
+                        type: DOWNLOAD_TYPE_PLAIN,
+                        format,
+                        idScheme: ID_SCHEME_CODE,
+                    })
+                }
+            />
+            <MenuItemComponent
+                label={i18n.t('Name')}
+                onClick={() =>
+                    onDownload({
+                        type: DOWNLOAD_TYPE_PLAIN,
+                        format,
+                        idScheme: ID_SCHEME_NAME,
+                    })
+                }
+            />
+        </MenuItemComponent>
+    )
+}
 
 PlainDataSourceSubMenu.propTypes = {
     format: PropTypes.string.isRequired,
     label: PropTypes.string.isRequired,
     onDownload: PropTypes.func.isRequired,
+    hoverable: PropTypes.bool,
 }
diff --git a/src/components/DownloadMenu/TableMenu.js b/src/components/DownloadMenu/TableMenu.js
index 1d73292836..b2b3227e70 100644
--- a/src/components/DownloadMenu/TableMenu.js
+++ b/src/components/DownloadMenu/TableMenu.js
@@ -1,3 +1,4 @@
+import { HoverMenuListItem } from '@dhis2/analytics'
 import i18n from '@dhis2/d2-i18n'
 import { MenuItem, MenuSectionHeader } from '@dhis2/ui'
 import PropTypes from 'prop-types'
@@ -9,45 +10,52 @@ import {
     FILE_FORMAT_HTML_CSS,
 } from './constants.js'
 
-export const TableMenu = ({ onDownload }) =>
-    React.Children.toArray([
-        <MenuSectionHeader
-            key="table-header"
-            label={i18n.t('Table layout')}
-            hideDivider
-        />,
-        <MenuItem
-            key="xls"
-            label={i18n.t('Excel (.xls)')}
-            onClick={() =>
-                onDownload({
-                    type: DOWNLOAD_TYPE_TABLE,
-                    format: FILE_FORMAT_XLS,
-                })
-            }
-        />,
-        <MenuItem
-            key="csv"
-            label={i18n.t('CSV (.csv)')}
-            onClick={() =>
-                onDownload({
-                    type: DOWNLOAD_TYPE_TABLE,
-                    format: FILE_FORMAT_CSV,
-                })
-            }
-        />,
-        <MenuItem
-            key="html"
-            label={i18n.t('HTML (.html)')}
-            onClick={() =>
-                onDownload({
-                    type: DOWNLOAD_TYPE_TABLE,
-                    format: FILE_FORMAT_HTML_CSS,
-                })
-            }
-        />,
-    ])
+export const TableMenu = ({ hoverable, onDownload }) => {
+    const MenuItemComponent = hoverable ? HoverMenuListItem : MenuItem
+
+    return (
+        <>
+            <MenuSectionHeader
+                key="table-header"
+                label={i18n.t('Table layout')}
+                hideDivider
+                dense={hoverable}
+            />
+            <MenuItemComponent
+                key="xls"
+                label={i18n.t('Excel (.xls)')}
+                onClick={() =>
+                    onDownload({
+                        type: DOWNLOAD_TYPE_TABLE,
+                        format: FILE_FORMAT_XLS,
+                    })
+                }
+            />
+            <MenuItemComponent
+                key="csv"
+                label={i18n.t('CSV (.csv)')}
+                onClick={() =>
+                    onDownload({
+                        type: DOWNLOAD_TYPE_TABLE,
+                        format: FILE_FORMAT_CSV,
+                    })
+                }
+            />
+            <MenuItemComponent
+                key="html"
+                label={i18n.t('HTML (.html)')}
+                onClick={() =>
+                    onDownload({
+                        type: DOWNLOAD_TYPE_TABLE,
+                        format: FILE_FORMAT_HTML_CSS,
+                    })
+                }
+            />
+        </>
+    )
+}
 
 TableMenu.propTypes = {
     onDownload: PropTypes.func.isRequired,
+    hoverable: PropTypes.bool,
 }
diff --git a/src/components/DownloadMenu/ToolbarDownloadDropdown.js b/src/components/DownloadMenu/ToolbarDownloadDropdown.js
index bdff72784e..5dcbae0948 100644
--- a/src/components/DownloadMenu/ToolbarDownloadDropdown.js
+++ b/src/components/DownloadMenu/ToolbarDownloadDropdown.js
@@ -1,42 +1,21 @@
+import { HoverMenuDropdown } from '@dhis2/analytics'
 import i18n from '@dhis2/d2-i18n'
-import { Layer, Popper } from '@dhis2/ui'
-import React, { useRef } from 'react'
-import MenuButton from '../MenuButton/MenuButton.js'
+import React from 'react'
 import { DownloadMenu } from './DownloadMenu.js'
-import { useDownloadMenu } from './useDownloadMenu.js'
+import { useDownload } from './useDownload.js'
 
 const ToolbarDownloadDropdown = () => {
-    const buttonRef = useRef()
-    const {
-        isOpen,
-        toggleOpen,
-        disabled,
-        doDownloadData,
-        doDownloadImage,
-        visType,
-    } = useDownloadMenu()
+    const { disabled, doDownloadData, doDownloadImage, visType } = useDownload()
 
     return (
-        <>
-            <MenuButton
-                ref={buttonRef}
-                onClick={toggleOpen}
-                disabled={disabled}
-            >
-                {i18n.t('Download')}
-            </MenuButton>
-            {isOpen && (
-                <Layer onClick={toggleOpen}>
-                    <Popper reference={buttonRef} placement="bottom-start">
-                        <DownloadMenu
-                            onDownloadData={doDownloadData}
-                            onDownloadImage={doDownloadImage}
-                            visType={visType}
-                        />
-                    </Popper>
-                </Layer>
-            )}
-        </>
+        <HoverMenuDropdown label={i18n.t('Download')} disabled={disabled}>
+            <DownloadMenu
+                hoverable
+                onDownloadData={doDownloadData}
+                onDownloadImage={doDownloadImage}
+                visType={visType}
+            />
+        </HoverMenuDropdown>
     )
 }
 
diff --git a/src/components/DownloadMenu/useDownloadMenu.js b/src/components/DownloadMenu/useDownload.js
similarity index 95%
rename from src/components/DownloadMenu/useDownloadMenu.js
rename to src/components/DownloadMenu/useDownload.js
index 3b6fb60afa..07a32c8357 100644
--- a/src/components/DownloadMenu/useDownloadMenu.js
+++ b/src/components/DownloadMenu/useDownload.js
@@ -1,6 +1,6 @@
 import { Analytics } from '@dhis2/analytics'
 import { useConfig, useDataEngine, useDataMutation } from '@dhis2/app-runtime'
-import { useState, useCallback } from 'react'
+import { useCallback } from 'react'
 import { useSelector } from 'react-redux'
 import { sGetChart } from '../../reducers/chart.js'
 import { sGetCurrent } from '../../reducers/current.js'
@@ -53,7 +53,7 @@ const addCommonParameters = (req, visualization, options) => {
     return req
 }
 
-const useDownloadMenu = (relativePeriodDate) => {
+const useDownload = (relativePeriodDate) => {
     const visualization = useSelector(sGetCurrent)
     const visType = useSelector(sGetUiType)
     const chart = useSelector(sGetChart)
@@ -62,7 +62,6 @@ const useDownloadMenu = (relativePeriodDate) => {
     const { baseUrl } = useConfig()
     const dataEngine = useDataEngine()
     const analyticsEngine = Analytics.getAnalytics(dataEngine)
-    const [isOpen, setIsOpen] = useState(false)
 
     const openDownloadedFileInBlankTab = useCallback((blob) => {
         const url = URL.createObjectURL(blob)
@@ -94,8 +93,6 @@ const useDownloadMenu = (relativePeriodDate) => {
             format === FILE_FORMAT_PNG
                 ? getPng({ formData })
                 : getPdf({ formData })
-
-            setIsOpen(false)
         },
         [chart, getPdf, getPng, visualization]
     )
@@ -177,7 +174,6 @@ const useDownloadMenu = (relativePeriodDate) => {
             )
 
             window.open(url, target)
-            setIsOpen(false)
         },
         [
             analyticsEngine,
@@ -190,8 +186,6 @@ const useDownloadMenu = (relativePeriodDate) => {
     )
 
     return {
-        isOpen,
-        toggleOpen: () => setIsOpen(!isOpen),
         disabled: !visualization,
         doDownloadData,
         doDownloadImage,
@@ -199,4 +193,4 @@ const useDownloadMenu = (relativePeriodDate) => {
     }
 }
 
-export { useDownloadMenu }
+export { useDownload }
diff --git a/src/components/MenuBar/InterpretationsButton.js b/src/components/MenuBar/InterpretationsButton.js
index e39e1fbe55..41fd8b3203 100644
--- a/src/components/MenuBar/InterpretationsButton.js
+++ b/src/components/MenuBar/InterpretationsButton.js
@@ -1,45 +1,24 @@
-import i18n from '@dhis2/d2-i18n'
-import { IconChevronRight24, IconChevronLeft24 } from '@dhis2/ui'
-import PropTypes from 'prop-types'
+import { InterpretationsAndDetailsToggler } from '@dhis2/analytics'
 import React from 'react'
-import { connect } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 import { acToggleUiRightSidebarOpen } from '../../actions/ui.js'
 import { sGetCurrent } from '../../reducers/current.js'
 import { sGetUiRightSidebarOpen } from '../../reducers/ui.js'
-import MenuButton from '../MenuButton/MenuButton.js'
-import styles from './styles/InterpretationsButton.module.css'
 
-export const UnconnectedInterpretationsButton = (props) => (
-    <MenuButton disabled={!props.id} onClick={props.onClick}>
-        {props.rightSidebarOpen ? (
-            <div className={styles.iconWrapper}>
-                <IconChevronRight24 />
-            </div>
-        ) : (
-            <div className={styles.iconWrapper}>
-                <IconChevronLeft24 />
-            </div>
-        )}
-        {i18n.t('Interpretations')}
-    </MenuButton>
-)
+export const InterpretationsButton = () => {
+    const isShowing = useSelector(sGetUiRightSidebarOpen)
+    const current = useSelector(sGetCurrent)
+    const isDisabled = !current?.id
+    const dispatch = useDispatch()
+    const onClick = () => {
+        dispatch(acToggleUiRightSidebarOpen())
+    }
 
-UnconnectedInterpretationsButton.propTypes = {
-    id: PropTypes.string,
-    rightSidebarOpen: PropTypes.bool,
-    onClick: PropTypes.func,
+    return (
+        <InterpretationsAndDetailsToggler
+            disabled={isDisabled}
+            onClick={onClick}
+            isShowing={isShowing}
+        />
+    )
 }
-
-const mapStateToProps = (state) => ({
-    rightSidebarOpen: sGetUiRightSidebarOpen(state),
-    id: (sGetCurrent(state) || {}).id,
-})
-
-const mapDispatchToProps = (dispatch) => ({
-    onClick: () => dispatch(acToggleUiRightSidebarOpen()),
-})
-
-export const InterpretationsButton = connect(
-    mapStateToProps,
-    mapDispatchToProps
-)(UnconnectedInterpretationsButton)
diff --git a/src/components/MenuBar/MenuBar.js b/src/components/MenuBar/MenuBar.js
index 7e1c93b6b6..75a23f20b5 100644
--- a/src/components/MenuBar/MenuBar.js
+++ b/src/components/MenuBar/MenuBar.js
@@ -1,7 +1,9 @@
 import {
     FileMenu,
+    HoverMenuBar,
     VIS_TYPE_GROUP_ALL,
     VIS_TYPE_GROUP_CHARTS,
+    UpdateButton,
 } from '@dhis2/analytics'
 import i18n from '@dhis2/d2-i18n'
 import PropTypes from 'prop-types'
@@ -13,11 +15,9 @@ import history from '../../modules/history.js'
 import { visTypes } from '../../modules/visualization.js'
 import { sGetCurrent } from '../../reducers/current.js'
 import { ToolbarDownloadDropdown } from '../DownloadMenu/ToolbarDownloadDropdown.js'
-import UpdateButton from '../UpdateButton/UpdateButton.js'
 import UpdateVisualizationContainer from '../UpdateButton/UpdateVisualizationContainer.js'
 import VisualizationOptionsManager from '../VisualizationOptions/VisualizationOptionsManager.js'
 import { InterpretationsButton } from './InterpretationsButton.js'
-import styles from './styles/MenuBar.module.css'
 
 const onOpen = (id) => {
     const path = `/${id}`
@@ -51,38 +51,36 @@ const filterVisTypes = [
 ]
 
 const UnconnectedMenuBar = ({ dataTest, ...props }, context) => (
-    <div className={styles.menuBar} data-test={dataTest}>
+    <>
         <UpdateVisualizationContainer
             renderComponent={(handler) => (
                 <UpdateButton
-                    className={styles.updateButton}
-                    small
                     onClick={handler}
                     dataTest={`${dataTest}-update-button`}
                 />
             )}
         />
-        <FileMenu
-            currentUser={context.d2.currentUser}
-            fileType={props.apiObjectName}
-            fileObject={props.current}
-            filterVisTypes={filterVisTypes}
-            defaultFilterVisType={VIS_TYPE_GROUP_ALL}
-            onOpen={onOpen}
-            onNew={onNew}
-            onRename={getOnRename(props)}
-            onSave={getOnSave(props)}
-            onSaveAs={getOnSaveAs(props)}
-            onDelete={getOnDelete(props)}
-            onError={getOnError(props)}
-        />
-        <VisualizationOptionsManager />
-
-        <ToolbarDownloadDropdown />
+        <HoverMenuBar>
+            <FileMenu
+                currentUser={context.d2.currentUser}
+                fileType={props.apiObjectName}
+                fileObject={props.current}
+                filterVisTypes={filterVisTypes}
+                defaultFilterVisType={VIS_TYPE_GROUP_ALL}
+                onOpen={onOpen}
+                onNew={onNew}
+                onRename={getOnRename(props)}
+                onSave={getOnSave(props)}
+                onSaveAs={getOnSaveAs(props)}
+                onDelete={getOnDelete(props)}
+                onError={getOnError(props)}
+            />
+            <VisualizationOptionsManager />
 
-        <div className={styles.grow} />
+            <ToolbarDownloadDropdown />
+        </HoverMenuBar>
         <InterpretationsButton />
-    </div>
+    </>
 )
 
 UnconnectedMenuBar.propTypes = {
diff --git a/src/components/MenuBar/styles/InterpretationsButton.module.css b/src/components/MenuBar/styles/InterpretationsButton.module.css
deleted file mode 100644
index 35a769f317..0000000000
--- a/src/components/MenuBar/styles/InterpretationsButton.module.css
+++ /dev/null
@@ -1,4 +0,0 @@
-.iconWrapper {
-    display: flex;
-    margin-right: var(--spacers-dp4);
-}
diff --git a/src/components/MenuBar/styles/MenuBar.module.css b/src/components/MenuBar/styles/MenuBar.module.css
deleted file mode 100644
index 1ff0da6243..0000000000
--- a/src/components/MenuBar/styles/MenuBar.module.css
+++ /dev/null
@@ -1,13 +0,0 @@
-.menuBar {
-    background: var(--colors-white);
-    display: flex;
-    align-items: center;
-    padding: 0 var(--spacers-dp8);
-    height: 38px;
-}
-.updateButton {
-    margin-right: var(--spacers-dp8);
-}
-.grow {
-    flex: 1 1 0%;
-}
diff --git a/src/components/MenuButton/MenuButton.js b/src/components/MenuButton/MenuButton.js
deleted file mode 100644
index a8f7291cab..0000000000
--- a/src/components/MenuButton/MenuButton.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import PropTypes from 'prop-types'
-import React, { forwardRef } from 'react'
-import styles from './styles/MenuButton.module.css'
-
-const MenuButton = forwardRef(
-    ({ children, dataTest, disabled, name, onBlur, onClick, onFocus }, ref) => (
-        <button
-            ref={ref}
-            className={styles.menuButton}
-            data-test={dataTest}
-            disabled={disabled}
-            name={name}
-            onBlur={onBlur}
-            onClick={onClick}
-            onFocus={onFocus}
-        >
-            {children}
-        </button>
-    )
-)
-
-MenuButton.displayName = 'MenuButton'
-
-MenuButton.propTypes = {
-    children: PropTypes.node,
-    dataTest: PropTypes.string,
-    disabled: PropTypes.bool,
-    name: PropTypes.string,
-    onBlur: PropTypes.func,
-    onClick: PropTypes.func,
-    onFocus: PropTypes.func,
-}
-
-export default MenuButton
diff --git a/src/components/MenuButton/styles/MenuButton.module.css b/src/components/MenuButton/styles/MenuButton.module.css
deleted file mode 100644
index 1ec3474a61..0000000000
--- a/src/components/MenuButton/styles/MenuButton.module.css
+++ /dev/null
@@ -1,47 +0,0 @@
-.menuButton {
-    display: inline-flex;
-    position: relative;
-    align-items: center;
-    justify-content: center;
-    font-size: 14px;
-    font-weight: 400;
-    text-transform: none;
-    padding: 6px var(--spacers-dp12);
-    border-radius: 3px;
-    color: var(--colors-grey900);
-    box-sizing: border-box;
-    line-height: 1.75;
-    background: none;
-    border: none;
-    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-    cursor: pointer;
-}
-
-.menuButton:hover:enabled {
-    background-color: var(--colors-grey200);
-}
-
-.menuButton:disabled {
-    color: var(--colors-grey400);
-    cursor: not-allowed;
-}
-
-.menuButton:active {
-    background-color: var(--colors-grey300);
-}
-
-.menuButton:focus {
-    outline: 2px solid var(--colors-blue600);
-}
-
-.menuButton:focus:not(:focus-visible) {
-    outline: none;
-}
-
-.menuButton svg {
-    color: var(--colors-grey600);
-}
-
-.menuButton:disabled svg {
-    color: var(--colors-grey400);
-}
diff --git a/src/components/VisualizationOptions/VisualizationOptionsManager.js b/src/components/VisualizationOptions/VisualizationOptionsManager.js
index c3ee80f567..3bc6608ef0 100644
--- a/src/components/VisualizationOptions/VisualizationOptionsManager.js
+++ b/src/components/VisualizationOptions/VisualizationOptionsManager.js
@@ -4,6 +4,9 @@ import {
     hasCustomAxes,
     hasRelativeItems,
     isDualAxisType,
+    HoverMenuDropdown,
+    HoverMenuList,
+    HoverMenuListItem,
     VisualizationOptions,
 } from '@dhis2/analytics'
 import i18n from '@dhis2/d2-i18n'
@@ -17,7 +20,6 @@ import {
     sGetDimensionItemsByAxis,
     sGetUiLayout,
 } from '../../reducers/ui.js'
-import MenuButton from '../MenuButton/MenuButton.js'
 import UpdateVisualizationContainer from '../UpdateButton/UpdateVisualizationContainer.js'
 
 const VisualizationOptionsManager = ({
@@ -27,19 +29,10 @@ const VisualizationOptionsManager = ({
     columns,
     series,
 }) => {
-    const [dialogIsOpen, setDialogIsOpen] = useState(false)
-
-    const onClick = (handler) => () => {
+    const [selectedOptionConfigKey, setSelectedOptionConfigKey] = useState(null)
+    const onOptionsUpdate = (handler) => {
         handler()
-        onClose()
-    }
-
-    const onClose = () => {
-        toggleVisualizationOptionsDialog()
-    }
-
-    const toggleVisualizationOptionsDialog = () => {
-        setDialogIsOpen(!dialogIsOpen)
+        setSelectedOptionConfigKey(null)
     }
 
     const filteredSeries = series.filter((seriesItem) =>
@@ -65,19 +58,30 @@ const VisualizationOptionsManager = ({
 
     return (
         <>
-            <MenuButton
+            <HoverMenuDropdown
+                label={i18n.t('Options')}
                 dataTest={'app-menubar-options-button'}
-                onClick={toggleVisualizationOptionsDialog}
             >
-                {i18n.t('Options')}
-            </MenuButton>
-            {dialogIsOpen && (
+                <HoverMenuList dataTest="options-menu-list">
+                    {optionsConfig.map(({ label, key }) => (
+                        <HoverMenuListItem
+                            key={key}
+                            label={label}
+                            onClick={() => {
+                                setSelectedOptionConfigKey(key)
+                            }}
+                        />
+                    ))}
+                </HoverMenuList>
+            </HoverMenuDropdown>
+            {selectedOptionConfigKey && (
                 <UpdateVisualizationContainer
                     renderComponent={(handler) => (
                         <VisualizationOptions
                             optionsConfig={optionsConfig}
-                            onUpdate={onClick(handler)}
-                            onClose={onClose}
+                            onUpdate={() => onOptionsUpdate(handler)}
+                            onClose={() => setSelectedOptionConfigKey(null)}
+                            initiallyActiveTabKey={selectedOptionConfigKey}
                         />
                     )}
                 />
diff --git a/src/components/VisualizationTypeSelector/VisualizationTypeSelector.js b/src/components/VisualizationTypeSelector/VisualizationTypeSelector.js
index 757e629e51..44c89e2aed 100644
--- a/src/components/VisualizationTypeSelector/VisualizationTypeSelector.js
+++ b/src/components/VisualizationTypeSelector/VisualizationTypeSelector.js
@@ -1,7 +1,8 @@
-import { visTypeDisplayNames } from '@dhis2/analytics'
+import { visTypeDisplayNames, ToolbarSidebar } from '@dhis2/analytics'
 import { useSetting } from '@dhis2/app-service-datastore'
 import i18n from '@dhis2/d2-i18n'
 import { Divider, Popper, Layer } from '@dhis2/ui'
+import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React, { useState, createRef } from 'react'
 import { connect } from 'react-redux'
@@ -97,20 +98,31 @@ const UnconnectedVisualizationTypeSelector = (
 
     return (
         <>
-            <div
-                onClick={toggleList}
-                ref={buttonRef}
-                className={styles.button}
-                data-test={'visualization-type-selector-button'}
-            >
-                <ListItemIcon iconType={visualizationType} />
-                <span data-test="visualization-type-selector-currently-selected-text">
-                    {visTypeDisplayNames[visualizationType]}
-                </span>
-                <span className={styles.arrowIcon}>
-                    <ArrowDown />
-                </span>
-            </div>
+            <ToolbarSidebar isHidden={false}>
+                <div
+                    onClick={toggleList}
+                    ref={buttonRef}
+                    className={cx(styles.button, {
+                        [styles.listIsOpen]: listIsOpen,
+                    })}
+                    data-test={'visualization-type-selector-button'}
+                >
+                    <ListItemIcon iconType={visualizationType} />
+                    <span
+                        className={styles.selectedVizTypeLabel}
+                        data-test="visualization-type-selector-currently-selected-text"
+                    >
+                        {visTypeDisplayNames[visualizationType]}
+                    </span>
+                    <span
+                        className={cx(styles.arrowIcon, {
+                            [styles.listIsOpen]: listIsOpen,
+                        })}
+                    >
+                        <ArrowDown />
+                    </span>
+                </div>
+            </ToolbarSidebar>
             {listIsOpen && (
                 <Layer onClick={toggleList}>
                     <Popper reference={buttonRef} placement="bottom-start">
diff --git a/src/components/VisualizationTypeSelector/styles/VisualizationTypeSelector.module.css b/src/components/VisualizationTypeSelector/styles/VisualizationTypeSelector.module.css
index f87c1ce885..cdbcfef3ba 100644
--- a/src/components/VisualizationTypeSelector/styles/VisualizationTypeSelector.module.css
+++ b/src/components/VisualizationTypeSelector/styles/VisualizationTypeSelector.module.css
@@ -3,6 +3,10 @@
     margin-left: auto;
 }
 
+.arrowIcon.listIsOpen {
+    transform: rotate(180deg);
+}
+
 .button {
     padding: 7px var(--spacers-dp8);
     display: flex;
@@ -10,10 +14,18 @@
     justify-content: flex-start;
     background-color: var(--colors-white);
     cursor: pointer;
+    flex-grow: 1
+}
+
+.button:hover,
+.button.listIsOpen {
+    background-color: var(--colors-grey200);
 }
 
-.button > span {
+.button > .selectedVizTypeLabel {
     font-size: 14px;
+    padding-top: 1px;
+    user-select: none;
 }
 
 .cardContainer {
diff --git a/yarn.lock b/yarn.lock
index 56897e9412..a8e4d4e0b9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2028,10 +2028,10 @@
     classnames "^2.3.1"
     prop-types "^15.7.2"
 
-"@dhis2/analytics@^25.1.11":
-  version "25.1.11"
-  resolved "https://registry.yarnpkg.com/@dhis2/analytics/-/analytics-25.1.11.tgz#04c1990798f1c33bebd16849dff4a81523d9e1ce"
-  integrity sha512-+aLYTbcVsxt5ZVLROJgvljFoLWK31jsS6xWzhwzWTQi+7WGVt5ONRUS45rZBYJas4FQj+SqPhCF6nXCssx7huA==
+"@dhis2/analytics@^26.0.7":
+  version "26.0.7"
+  resolved "https://registry.yarnpkg.com/@dhis2/analytics/-/analytics-26.0.7.tgz#d0883c74fc909359d1ce01e82c267ba99e8186a5"
+  integrity sha512-NJ//FeWWn6yy1bDK3lcMPdwOWVhLBQyh1vmj+S0/k86iKRfF+8tmZwinZLVLebzV3DRjSoWSPCzwU6zVDedjWg==
   dependencies:
     "@dhis2/d2-ui-rich-text" "^7.4.0"
     "@dhis2/multi-calendar-dates" "1.0.0"