diff --git a/i18n/en.pot b/i18n/en.pot
index cae303cf0b..543de3f299 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: 2024-08-10T10:42:21.141Z\n"
-"PO-Revision-Date: 2024-08-10T10:42:21.141Z\n"
+"POT-Creation-Date: 2024-09-02T13:49:55.522Z\n"
+"PO-Revision-Date: 2024-09-02T13:49:55.522Z\n"
 
 msgid "Choose one or more dates..."
 msgstr "Choose one or more dates..."
@@ -598,15 +598,6 @@ msgstr "Program doesn't exist"
 msgid "Selected program is invalid for selected organisation unit"
 msgstr "Selected program is invalid for selected organisation unit"
 
-msgid "Online"
-msgstr "Online"
-
-msgid "Offline"
-msgstr "Offline"
-
-msgid "Syncing"
-msgstr "Syncing"
-
 msgid "Add note"
 msgstr "Add note"
 
diff --git a/src/core_modules/capture-core/components/FeedbackBar/FeedbackBar.component.js b/src/core_modules/capture-core/components/FeedbackBar/FeedbackBar.component.js
index f4406742cc..166a351e1d 100644
--- a/src/core_modules/capture-core/components/FeedbackBar/FeedbackBar.component.js
+++ b/src/core_modules/capture-core/components/FeedbackBar/FeedbackBar.component.js
@@ -1,11 +1,8 @@
 // @flow
-import * as React from 'react';
-import SnackBar from '@material-ui/core/Snackbar';
+import React, { type Node } from 'react';
 import { withStyles } from '@material-ui/core/styles';
-import { IconButton } from 'capture-ui';
-import { IconCross24, Button, Modal, ModalTitle, ModalContent, ModalActions } from '@dhis2/ui';
+import { Button, Modal, ModalTitle, ModalContent, ModalActions, AlertStack, AlertBar } from '@dhis2/ui';
 import i18n from '@dhis2/d2-i18n';
-import isDefined from 'd2-utilizr/lib/isDefined';
 
 const styles = () => ({
     closeButton: {
@@ -17,110 +14,43 @@ const styles = () => ({
 });
 
 type Feedback = {
-    message: string | { title: string, content: string},
-    action?: ?React.Node,
-    displayType?: ?string,
+    message: string | { title: string, content: string },
+    action?: Node,
+    displayType?: 'alert' | 'dialog',
 };
 
 type Props = {
     feedback: Feedback,
     onClose: () => void,
-    classes: Object,
 };
 
-class Index extends React.Component<Props> {
-    static defaultProps = {
-        feedback: {},
-    };
-
-    constructor(props: Props) {
-        super(props);
-        this.handleClose = this.handleClose.bind(this);
-    }
-    static CLICKAWAY_KEY = 'clickaway';
-
-    static ANCHOR_ORIGIN = {
-        vertical: 'bottom',
-        horizontal: 'center',
-    };
-
-    handleClose = (event?: ?Object, reason?: ?string) => {
-        if (reason !== Index.CLICKAWAY_KEY) {
-            this.props.onClose();
-        }
-    }
-
-    getAction() {
-        const { feedback, classes } = this.props;
-
-        return (
-            <>
-                {
-                    (() => {
-                        if (!feedback.action) {
-                            return null;
-                        }
-
-                        return (
-                            <span
-                                className={classes.actionContainer}
-                            >
-                                {feedback.action}
-                            </span>
-                        );
-                    })()
-                }
-                <IconButton
-                    className={classes.closeButton}
-                    onClick={this.handleClose}
-                >
-                    <IconCross24 />
-                </IconButton>
-            </>
-        );
-    }
-
-    render() {
-        const { feedback } = this.props;
-        const { message, displayType } = feedback;
-        const isSnackBarOpen = isDefined(message) && !displayType;
-        const isDialogOpen = isDefined(message) && displayType === 'dialog';
-        return (
-            <React.Fragment>
-                <SnackBar
-                    open={isSnackBarOpen}
-                    anchorOrigin={Index.ANCHOR_ORIGIN}
-                    autoHideDuration={5000}
-                    onClose={this.handleClose}
-                    // $FlowFixMe[incompatible-type] automated comment
-                    message={<span>{message}</span>}
-                    action={this.getAction()}
-                />
-                {isDialogOpen && (
-                    <Modal
-                        hide={!isDialogOpen}
-                    >
-                        <ModalTitle>
-                            {
-                            // $FlowFixMe[prop-missing] automated comment
-                                isDialogOpen ? message && message.title : ''}
-                        </ModalTitle>
-                        <ModalContent>
-                            {
-                            // $FlowFixMe[prop-missing] automated comment
-                                isDialogOpen ? message && message.content : ''}
-                        </ModalContent>
-                        <ModalActions>
-                            <Button onClick={this.handleClose} primary>
-                                {i18n.t('Close')}
-                            </Button>
-                        </ModalActions>
-                    </Modal>
+const FeedbackBarComponentPlain = ({ feedback = {}, onClose }: Props) => {
+    const { message, displayType } = feedback;
+    const isAlertBarOpen = typeof message === 'string' && !displayType;
+    const isDialogOpen = typeof message === 'object' && displayType === 'dialog';
+
+    return (
+        <>
+            <AlertStack>
+                {isAlertBarOpen && (
+                    <AlertBar duration={5000}>
+                        {message}
+                    </AlertBar>
                 )}
-            </React.Fragment>
-        );
-    }
-}
-Index.displayName = 'FeedbackBar';
+            </AlertStack>
+            {isDialogOpen && (
+                <Modal hide={!isDialogOpen}>
+                    <ModalTitle>{message?.title || ''}</ModalTitle>
+                    <ModalContent>{message?.content || ''}</ModalContent>
+                    <ModalActions>
+                        <Button onClick={onClose} primary>
+                            {i18n.t('Close')}
+                        </Button>
+                    </ModalActions>
+                </Modal>
+            )}
+        </>
+    );
+};
 
-export const FeedbackBarComponent = withStyles(styles)(Index);
+export const FeedbackBarComponent = withStyles(styles)(FeedbackBarComponentPlain);
diff --git a/src/core_modules/capture-core/components/FormFields/UserField/SearchSuggestion.component.js b/src/core_modules/capture-core/components/FormFields/UserField/SearchSuggestion.component.js
index 754b3a464e..6ebff0dea1 100644
--- a/src/core_modules/capture-core/components/FormFields/UserField/SearchSuggestion.component.js
+++ b/src/core_modules/capture-core/components/FormFields/UserField/SearchSuggestion.component.js
@@ -1,7 +1,7 @@
 // @flow
 import * as React from 'react';
 import parse from 'autosuggest-highlight/parse';
-import MenuItem from '@material-ui/core/MenuItem';
+import { MenuItem } from '@dhis2/ui';
 import classNames from 'classnames';
 import { SearchContext } from './Search.context';
 import defaultClasses from './searchSuggestion.module.css';
@@ -96,7 +96,6 @@ export const SearchSuggestion = (props: Props) => {
             onExitSearch();
         }
     }, [onExitSearch, suggestionName, inputName]);
-
     return (
         <div
             name={suggestionName}
@@ -109,23 +108,24 @@ export const SearchSuggestion = (props: Props) => {
             onBlur={handleBlur}
         >
             <MenuItem
-                selected={isHighlighted}
-                component="div"
-            >
-                <div>
-                    {parts.map((part, index) => (part.highlight ? (
-                        // eslint-disable-next-line react/no-array-index-key
-                        <span key={String(index)} style={{ fontWeight: 500 }}>
-                            {part.text}
-                        </span>
-                    ) : (
-                        // eslint-disable-next-line react/no-array-index-key
-                        <strong key={String(index)} style={{ fontWeight: 300 }}>
-                            {part.text}
-                        </strong>
-                    )))}
-                </div>
-            </MenuItem>
+                active={isHighlighted}
+                label={(
+                    <div>
+                        {parts.map((part, index) => (part.highlight ? (
+                            // eslint-disable-next-line react/no-array-index-key
+                            <span key={String(index)} style={{ fontWeight: 500 }}>
+                                {part.text}
+                            </span>
+                        ) : (
+                            // eslint-disable-next-line react/no-array-index-key
+                            <strong key={String(index)} style={{ fontWeight: 300 }}>
+                                {part.text}
+                            </strong>
+                        )))}
+                    </div>
+                )}
+            />
+
         </div>
     );
 };
diff --git a/src/core_modules/capture-core/components/IncompleteSelectionsMessage/index.js b/src/core_modules/capture-core/components/IncompleteSelectionsMessage/index.js
index 6c206f72b6..411539110b 100644
--- a/src/core_modules/capture-core/components/IncompleteSelectionsMessage/index.js
+++ b/src/core_modules/capture-core/components/IncompleteSelectionsMessage/index.js
@@ -1,29 +1,23 @@
 import React from 'react';
-import Paper from '@material-ui/core/Paper/Paper';
-import { withStyles } from '@material-ui/core';
 import { colors } from '@dhis2/ui';
 
-const StyledPaper = withStyles({
-    root: {
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        background: colors.grey200,
-        color: colors.grey700,
-        padding: '12px 16px',
-    },
-})(Paper);
-
 const containerStyle = {
     display: 'flex',
     justifyContent: 'center',
-    width: '100%',
+};
+
+const messageBoxStyle = {
+    alignItems: 'center',
+    background: colors.grey200,
+    color: colors.grey700,
+    padding: '12px 16px',
+    borderRadius: '4px',
 };
 
 export const IncompleteSelectionsMessage = ({ children, dataTest = 'informative-paper' }) => (
     <div style={containerStyle}>
-        <StyledPaper data-test={dataTest} elevation={0}>
+        <div style={messageBoxStyle} data-test={dataTest}>
             {children}
-        </StyledPaper>
+        </div>
     </div>
 );
diff --git a/src/core_modules/capture-core/components/ListView/Filters/FilterButton/ActiveFilterButton.component.js b/src/core_modules/capture-core/components/ListView/Filters/FilterButton/ActiveFilterButton.component.js
index f9fa85838f..fddd32eb76 100644
--- a/src/core_modules/capture-core/components/ListView/Filters/FilterButton/ActiveFilterButton.component.js
+++ b/src/core_modules/capture-core/components/ListView/Filters/FilterButton/ActiveFilterButton.component.js
@@ -1,16 +1,20 @@
 // @flow
 import * as React from 'react';
 import { withStyles } from '@material-ui/core/styles';
-import createSvgIcon from '@material-ui/icons/utils/createSvgIcon';
 import { Tooltip, Button } from '@dhis2/ui';
 import i18n from '@dhis2/d2-i18n';
 import classNames from 'classnames';
 
-const ClearIcon = createSvgIcon(
-    <React.Fragment>
+const ClearIcon = ({ className, ...props }) => (
+    <svg
+        className={className}
+        {...props}
+        viewBox="0 0 24 24"
+        width={24}
+        height={24}
+    >
         <path d="M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z" />
-    </React.Fragment>,
-    'CloseCircle',
+    </svg>
 );
 
 const getStyles = (theme: Theme) => ({
diff --git a/src/core_modules/capture-core/components/ListView/Filters/FilterButton/FilterButtonMain.component.js b/src/core_modules/capture-core/components/ListView/Filters/FilterButton/FilterButtonMain.component.js
index 8a1c83ddd1..d36a05fa58 100644
--- a/src/core_modules/capture-core/components/ListView/Filters/FilterButton/FilterButtonMain.component.js
+++ b/src/core_modules/capture-core/components/ListView/Filters/FilterButton/FilterButtonMain.component.js
@@ -1,9 +1,9 @@
 // @flow
 import React, { Component } from 'react';
 import { withStyles } from '@material-ui/core/styles';
-import Popover from '@material-ui/core/Popover';
-import { IconChevronDown16, IconChevronUp16, Button } from '@dhis2/ui';
+import { Button, Popover } from '@dhis2/ui';
 import { ConditionalTooltip } from 'capture-core/components/Tooltips/ConditionalTooltip';
+import { ChevronDown, ChevronUp } from 'capture-ui/Icons';
 import { ActiveFilterButton } from './ActiveFilterButton.component';
 import { FilterSelectorContents } from '../Contents';
 import type { UpdateFilter, ClearFilter, RemoveFilter } from '../../types';
@@ -11,8 +11,9 @@ import type { FilterData, Options } from '../../../FiltersForTypes';
 
 const getStyles = (theme: Theme) => ({
     icon: {
-        fontSize: theme.typography.pxToRem(20),
-        paddingLeft: theme.typography.pxToRem(5),
+        paddingLeft: theme.typography.pxToRem(12),
+        display: 'flex',
+        alignItems: 'center',
     },
     inactiveFilterButton: {
         backgroundColor: '#f5f5f5',
@@ -22,15 +23,6 @@ const getStyles = (theme: Theme) => ({
     },
 });
 
-const POPOVER_ANCHOR_ORIGIN = {
-    vertical: 'bottom',
-    horizontal: 'left',
-};
-const POPOVER_TRANSFORM_ORIGIN = {
-    vertical: 'top',
-    horizontal: 'left',
-};
-
 type Props = {
     itemId: string,
     type: string,
@@ -142,11 +134,11 @@ class FilterButtonMainPlain extends Component<Props, State> {
 
         const arrowIconElement = selectorVisible ? (
             <span className={classes.icon}>
-                <IconChevronUp16 />
+                <ChevronUp />
             </span>
         ) : (
             <span className={classes.icon}>
-                <IconChevronDown16 />
+                <ChevronDown />
             </span>
         );
 
@@ -178,7 +170,7 @@ class FilterButtonMainPlain extends Component<Props, State> {
                 >
                     {title}
                     <span className={classes.icon}>
-                        {selectorVisible ? <IconChevronUp16 /> : <IconChevronDown16 />}
+                        {selectorVisible ? <ChevronUp /> : <ChevronDown />}
                     </span>
                 </Button>
             </ConditionalTooltip>
@@ -199,22 +191,23 @@ class FilterButtonMainPlain extends Component<Props, State> {
                 >
                     {button}
                 </div>
-                <Popover
-                    open={selectorVisible && isMounted}
-                    anchorEl={this.anchorRef.current}
-                    onClose={this.closeFilterSelector}
-                    anchorOrigin={POPOVER_ANCHOR_ORIGIN}
-                    transformOrigin={POPOVER_TRANSFORM_ORIGIN}
-                >
-                    {
-                        (() => {
-                            if (selectorVisible) {
-                                return this.renderSelectorContents();
-                            }
-                            return null;
-                        })()
-                    }
-                </Popover>
+                {(selectorVisible && isMounted) && (
+                    <Popover
+                        reference={this.anchorRef.current}
+                        arrow={false}
+                        placement="bottom-start"
+                        onClickOutside={this.closeFilterSelector}
+                    >
+                        {
+                            (() => {
+                                if (selectorVisible) {
+                                    return this.renderSelectorContents();
+                                }
+                                return null;
+                            })()
+                        }
+                    </Popover>
+                )}
             </React.Fragment>
         );
     }
diff --git a/src/core_modules/capture-core/components/ListView/Filters/FilterRestMenu/FilterRestMenu.component.js b/src/core_modules/capture-core/components/ListView/Filters/FilterRestMenu/FilterRestMenu.component.js
index 97ca1b48e8..598911c49c 100644
--- a/src/core_modules/capture-core/components/ListView/Filters/FilterRestMenu/FilterRestMenu.component.js
+++ b/src/core_modules/capture-core/components/ListView/Filters/FilterRestMenu/FilterRestMenu.component.js
@@ -1,203 +1,52 @@
 // @flow
-import React from 'react';
-import { withStyles } from '@material-ui/core/styles';
-import { Card, IconChevronDown16, IconChevronUp16, Button, Layer } from '@dhis2/ui';
-
-import { Manager, Popper, Reference } from 'react-popper';
-import Grow from '@material-ui/core/Grow';
-import MenuList from '@material-ui/core/MenuList';
-import MenuItem from '@material-ui/core/MenuItem';
+import React, { useState, useCallback } from 'react';
+import { FlyoutMenu, MenuItem, DropdownButton } from '@dhis2/ui';
 import i18n from '@dhis2/d2-i18n';
-
-import type { Column } from '../../types';
-
-const getStyles = (theme: Theme) => ({
-    icon: {
-        fontSize: theme.typography.pxToRem(20),
-        paddingLeft: theme.typography.pxToRem(5),
-    },
-    restMenuButton: {
-        backgroundColor: '#f5f5f5',
-    },
-    restMenuButtonLabel: {
-        textTransform: 'none',
-    },
-    menuPaper: {
-        maxHeight: 280,
-        overflowY: 'auto',
-    },
-    menuItemRoot: {
-        padding: 6,
-        paddingLeft: 24,
-        paddingRight: 24,
-        fontSize: theme.typography.pxToRem(14),
-    },
-    popperContainerHidden: {
-        display: 'none',
-    },
-    popper: {
-        zIndex: 1,
-    },
-});
+import type { Column, FilterOnly } from '../../types';
 
 type Props = {
-    columns: Array<Column>,
+    columns: Array<Column | FilterOnly>,
     onItemSelected: (id: string) => void,
-    classes: {
-        icon: string,
-        restMenuButton: string,
-        restMenuButtonLabel: string,
-        menuPaper: string,
-        menuItemRoot: string,
-        popperContainerHidden: string,
-    },
-};
-
-type State = {
-    filterSelectorOpen: boolean,
 };
 
-class FilterRestMenuPlain extends React.Component<Props, State> {
-    menuClasses: Object;
-    menuItemClasses: Object;
-    managerRef: any;
-    menuReferenceInstance: ?HTMLDivElement;
-    constructor(props: Props) {
-        super(props);
-        this.state = {
-            filterSelectorOpen: false,
-        };
-        this.setClassesOnMount();
-    }
-
-    setClassesOnMount() {
-        const classes = this.props.classes;
-        this.menuClasses = {
-            paper: classes.menuPaper,
-        };
-
-        this.menuItemClasses = {
-            root: classes.menuItemRoot,
-        };
-    }
-    closeMenu() {
-        this.setState({
-            filterSelectorOpen: false,
-        });
-    }
-
-    toggleMenu() {
-        this.setState({
-            filterSelectorOpen: !this.state.filterSelectorOpen,
-        });
-    }
-
-    handleMenuButtonClick = () => {
-        this.toggleMenu();
-    }
-
-    handleClickAway = (event: any) => {
-        if (this.menuReferenceInstance && this.menuReferenceInstance.contains(event.target)) {
-            return;
-        }
-        this.closeMenu();
-    }
-
-    handleItemSelected = (id: string) => {
-        this.closeMenu();
-        this.props.onItemSelected(id);
-    }
-
-    renderMenuItems() {
-        const columns = this.props.columns;
-        return columns
-            .map(column => (
-                <MenuItem
-                    key={column.id}
-                    onClick={() => { this.handleItemSelected(column.id); }}
-                    classes={this.menuItemClasses}
+export const FilterRestMenu = ({ columns, onItemSelected }: Props) => {
+    const [filterSelectorOpen, setFilterSelectorOpen] = useState(false);
+
+    const toggleMenu = useCallback(() => {
+        setFilterSelectorOpen(prevState => !prevState);
+    }, []);
+
+    const handleItemSelected = useCallback((id: string) => {
+        setFilterSelectorOpen(false);
+        onItemSelected(id);
+    }, [onItemSelected]);
+
+    const renderMenuItems = useCallback(() => (
+        columns.map(column => (
+            <MenuItem
+                key={column.id}
+                onClick={() => handleItemSelected(column.id)}
+                label={column.header}
+            />
+        ))
+    ), [columns, handleItemSelected]);
+
+    return (
+        <DropdownButton
+            dataTest="more-filters"
+            onClick={toggleMenu}
+            open={filterSelectorOpen}
+            component={
+                <FlyoutMenu
+                    role="menu"
+                    dataTest="more-filters-menu"
+                    maxHeight="300px"
                 >
-                    {column.header}
-                </MenuItem>
-            ));
-    }
-
-    handleReferenceInstanceRetrieved = (instance) => {
-        this.managerRef(instance);
-        this.menuReferenceInstance = instance;
-    }
-
-    render() {
-        const { classes } = this.props;
-
-        return (
-            <Manager>
-                <Reference>
-                    {
-                        ({ ref }) => {
-                            this.managerRef = ref;
-                            return (
-                                <div
-                                    ref={this.handleReferenceInstanceRetrieved}
-                                >
-                                    <Button
-                                        dataTest="more-filters"
-                                        variant="outlined"
-                                        color="default"
-                                        size="small"
-                                        classes={{ button: classes.restMenuButton }}
-                                        muiClasses={{ label: classes.restMenuButtonLabel }}
-                                        onClick={this.handleMenuButtonClick}
-                                    >
-                                        {i18n.t('More filters')}
-                                        {this.state.filterSelectorOpen ? (
-                                            <span className={classes.icon}>
-                                                <IconChevronUp16 />
-                                            </span>
-                                        ) : (
-                                            <span className={classes.icon}>
-                                                <IconChevronDown16 />
-                                            </span>
-                                        )}
-                                    </Button>
-                                </div>
-                            );
-                        }
-                    }
-                </Reference>
-                {this.state.filterSelectorOpen &&
-                <Layer onBackdropClick={this.handleClickAway} dataTest="more-filters-menu">
-                    <Popper
-                        placement="bottom-start"
-                    >
-                        {
-                            ({ ref, style, placement }) => (
-                                <div
-                                    ref={ref}
-                                    style={{ ...style, zIndex: 1 }}
-                                    data-placement={placement}
-                                >
-                                    <Grow
-                                        in={!!this.state.filterSelectorOpen}
-                                        id="menu-list-grow"
-                                        style={{ transformOrigin: '0 0 0' }}
-                                        timeout={{ exit: 0, enter: 200 }}
-                                    >
-                                        <Card className={classes.menuPaper}>
-                                            <MenuList role="menu">
-                                                {this.renderMenuItems()}
-                                            </MenuList>
-                                        </Card>
-                                    </Grow>
-                                </div>
-                            )
-                        }
-                    </Popper>
-                </Layer>
-                }
-            </Manager>
-        );
-    }
-}
-
-export const FilterRestMenu = withStyles(getStyles)(FilterRestMenuPlain);
+                    {renderMenuItems()}
+                </FlyoutMenu>
+            }
+        >
+            {i18n.t('More filters')}
+        </DropdownButton>
+    );
+};
diff --git a/src/core_modules/capture-core/components/ListView/Menu/ListViewMenu.component.js b/src/core_modules/capture-core/components/ListView/Menu/ListViewMenu.component.js
index 07611adc28..8acb2bcf59 100644
--- a/src/core_modules/capture-core/components/ListView/Menu/ListViewMenu.component.js
+++ b/src/core_modules/capture-core/components/ListView/Menu/ListViewMenu.component.js
@@ -1,11 +1,9 @@
 // @flow
-import React, { useCallback, memo, type ComponentType } from 'react';
+import React, { useState, useRef, memo, useCallback, type ComponentType } from 'react';
 import { IconButton } from 'capture-ui';
-import { withStyles } from '@material-ui/core/styles';
-import { Divider, IconMore24, Card } from '@dhis2/ui';
-import { MenuList, MenuItem } from '@material-ui/core';
+import { MenuItem, Layer, Popper, IconMore24, FlyoutMenu, Divider } from '@dhis2/ui';
+import { withStyles } from '@material-ui/core';
 
-import { MenuPopper } from '../../Popper/Popper.component';
 import type { Props } from './listViewMenu.types';
 
 const getStyles = () => ({
@@ -31,16 +29,15 @@ const getStyles = () => ({
 });
 
 const ListViewMenuPlain = ({ customMenuContents = [], classes }: Props) => {
-    const renderPopperAction = useCallback((togglePopper: Function) => (
-        <IconButton
-            dataTest="list-view-menu-button"
-            onClick={togglePopper}
-        >
-            <IconMore24 />
-        </IconButton>
-    ), []);
+    const anchorRef = useRef(null);
+    const [actionsIsOpen, setActionsIsOpen] = useState(false);
 
-    const renderMenuItems = useCallback((togglePopper: Function) =>
+    const toggle = () => {
+        setActionsIsOpen(prev => !prev);
+    };
+
+
+    const renderMenuItems = useCallback(() =>
         customMenuContents
             .map((content) => {
                 if (content.subHeader) {
@@ -70,40 +67,42 @@ const ListViewMenuPlain = ({ customMenuContents = [], classes }: Props) => {
                             if (!content.clickHandler) {
                                 return;
                             }
-                            togglePopper();
+                            setActionsIsOpen(false);
                             // $FlowFixMe Using exact types, in my book this should work. Please tell me what I'm missing.
                             content.clickHandler();
                         }}
                         // $FlowFixMe Using exact types, in my book this should work. Please tell me what I'm missing.
                         disabled={!content.clickHandler}
-                    >
-                        {
-                            // $FlowFixMe Using exact types, in my book this should work. Please tell me what I'm missing.
-                            content.element}
-                    </MenuItem>
+                        // $FlowFixMe Using exact types, in my book this should work. Please tell me what I'm missing.
+                        label={content.element}
+                    />
                 );
             })
             .flat(1), [customMenuContents, classes]);
 
-    const renderPopperContent = useCallback((togglePopper: Function) => (
-        <Card>
-            <MenuList role="menu">
-                {renderMenuItems(togglePopper)}
-            </MenuList>
-        </Card>
-    ), [renderMenuItems]);
-
-    if (!customMenuContents.length) {
-        return null;
-    }
-
     return (
-        <MenuPopper
-            getPopperAction={renderPopperAction}
-            getPopperContent={renderPopperContent}
-        />
+        <div ref={anchorRef} style={{ display: 'inline-block', position: 'relative' }}>
+            <IconButton
+                onClick={toggle}
+                dataTest="list-view-menu-button"
+            >
+                <IconMore24 />
+            </IconButton>
+            {actionsIsOpen && (
+                <Layer onBackdropClick={() => setActionsIsOpen(false)} transparent>
+                    <Popper
+                        placement="bottom-end"
+                        reference={anchorRef}
+                    >
+                        <FlyoutMenu role="menu">
+                            {renderMenuItems()}
+                        </FlyoutMenu>
+                    </Popper>
+                </Layer>
+            )}
+        </div>
     );
 };
 
 export const ListViewMenu: ComponentType<$Diff<Props, CssClasses>> =
-    memo<$Diff<Props, CssClasses>>(withStyles(getStyles)(ListViewMenuPlain));
+    memo < $Diff<Props, CssClasses>>(withStyles(getStyles)(ListViewMenuPlain));
diff --git a/src/core_modules/capture-core/components/ListView/types/listView.types.js b/src/core_modules/capture-core/components/ListView/types/listView.types.js
index 011d70d6fb..8cfe806ceb 100644
--- a/src/core_modules/capture-core/components/ListView/types/listView.types.js
+++ b/src/core_modules/capture-core/components/ListView/types/listView.types.js
@@ -1,5 +1,4 @@
 // @flow
-
 import { typeof dataElementTypes } from '../../../metaData';
 import type {
     FilterData,
@@ -60,7 +59,8 @@ export type CustomMenuContents = Array<CustomMenuContent>;
 export type CustomRowMenuContent = {|
     key: string,
     clickHandler?: ?(rowData: DataSourceItem) => any,
-    element: React$Node,
+    icon: React$Node,
+    label: string,
 |};
 export type CustomRowMenuContents = Array<CustomRowMenuContent>;
 
diff --git a/src/core_modules/capture-core/components/ListView/withEndColumnMenu/RowMenu.component.js b/src/core_modules/capture-core/components/ListView/withEndColumnMenu/RowMenu.component.js
index 1ba6d043c5..68d0706fce 100644
--- a/src/core_modules/capture-core/components/ListView/withEndColumnMenu/RowMenu.component.js
+++ b/src/core_modules/capture-core/components/ListView/withEndColumnMenu/RowMenu.component.js
@@ -1,160 +1,58 @@
 // @flow
-import * as React from 'react';
-import { Manager, Popper, Reference } from 'react-popper';
-import { Card, spacers, IconMore24, colors, Layer } from '@dhis2/ui';
-import Grow from '@material-ui/core/Grow';
-import MenuList from '@material-ui/core/MenuList';
-import MenuItem from '@material-ui/core/MenuItem';
-import withStyles from '@material-ui/core/styles/withStyles';
-import type { Props, State } from './rowMenu.types';
-
-const styles = theme => ({
-    deleteIcon: {
-        fill: theme.palette.error.main,
-    },
-    menuList: {
-        padding: 0,
-    },
-    popperContainer: {
-        zIndex: 100,
-    },
-    iconButton: {
-        display: 'flex',
-        borderRadius: '50%',
-        border: 'none',
-        cursor: 'pointer',
-        background: 'transparent',
-        padding: spacers.dp12,
-        marginTop: `-${spacers.dp12}`,
-        marginBottom: `-${spacers.dp12}`,
-        color: colors.grey600,
-        '&:hover': {
-            background: colors.grey400,
-        },
-    },
-});
-
-class Index extends React.Component<Props, State> {
-    managerRef: any;
-    menuReferenceInstance: ?HTMLDivElement;
-
-    constructor(props: Props) {
-        super(props);
-        this.state = { menuOpen: false };
-    }
-
-    handleReferenceInstanceRetrieved = (instance) => {
-        this.managerRef(instance);
-        this.menuReferenceInstance = instance;
-    }
-
-    toggleMenu = (event: any) => {
-        this.setState({
-            menuOpen: !this.state.menuOpen,
-        });
-        event.stopPropagation();
-    }
-
-    closeMenu = () => {
-        this.setState({
-            menuOpen: false,
-        });
-    }
-
-    handleClickAway = (event: any) => {
-        if (this.menuReferenceInstance && this.menuReferenceInstance.contains(event.target)) {
-            return;
-        }
-        this.closeMenu();
-    }
-
-    renderMenuItems = () => {
-        const { customRowMenuContents = [], row, classes } = this.props;
-
-        const menuItems = customRowMenuContents
-            .map(content => (
-                <MenuItem
-                    key={content.key}
-                    data-test={`menu-item-${content.key}`}
-                    onClick={(event: SyntheticEvent<any>) => {
-                        if (!content.clickHandler) {
-                            return;
-                        }
-                        this.closeMenu();
-                        // $FlowFixMe common flow, I checked this 4 lines up
-                        content.clickHandler(row);
-                        event.stopPropagation();
-                    }}
-                    disabled={!content.clickHandler}
-                >
-                    {content.element}
-                </MenuItem>
-            ));
-
-        return (
-            <MenuList role="menu" className={classes.menuList}>
-                {menuItems}
-            </MenuList>
-        );
-    }
-
-    render() {
-        const { classes } = this.props;
-        return (
-            <Manager>
-                <Reference>
-                    {
-                        ({ ref }) => {
-                            this.managerRef = ref;
-                            return (
-                                <div
-                                    ref={this.handleReferenceInstanceRetrieved}
-                                >
-                                    <button
-                                        data-test="event-content-menu"
-                                        onClick={this.toggleMenu}
-                                        className={classes.iconButton}
-                                    >
-                                        <IconMore24 />
-                                    </button>
-                                </div>
-                            );
-                        }
-                    }
-                </Reference>
-                {this.state.menuOpen &&
-                <Layer onBackdropClick={this.handleClickAway} >
+import React, { useState, useRef } from 'react';
+import { IconButton } from 'capture-ui';
+import { MenuItem, Layer, Popper, IconMore24, FlyoutMenu } from '@dhis2/ui';
+import type { Props } from './rowMenu.types';
+
+export const RowMenu = (props: Props) => {
+    const { customRowMenuContents = [], row } = props;
+
+    const anchorRef = useRef(null);
+    const [actionsIsOpen, setActionsIsOpen] = useState(false);
+
+    const toggle = () => {
+        setActionsIsOpen(prev => !prev);
+    };
+
+    const renderMenuItems = () => customRowMenuContents.map(content => (
+        <MenuItem
+            key={content.key}
+            data-test={`menu-item-${content.key}`}
+            onClick={() => {
+                if (!content.clickHandler) {
+                    return;
+                }
+                setActionsIsOpen(false);
+                // $FlowFixMe common flow, I checked this 4 lines up
+                content.clickHandler(row);
+            }}
+            disabled={!content.clickHandler}
+            label={content.label}
+            icon={content.icon}
+        />
+    ));
+
+    return (
+        <div ref={anchorRef} style={{ display: 'inline-block', position: 'relative' }}>
+            <IconButton
+                onClick={toggle}
+                data-test="row-menu-toggle"
+            >
+                <IconMore24 />
+            </IconButton>
+            {actionsIsOpen && (
+                <Layer onBackdropClick={() => setActionsIsOpen(false)} transparent>
                     <Popper
-                        placement="bottom-end"
-                        strategy={'fixed'}
+                        placement="right"
+                        reference={anchorRef}
+                        data-test="row-menu-popper"
                     >
-                        {
-                            ({ ref, style, placement }) => (
-                                <div
-                                    ref={ref}
-                                    style={style}
-                                    className={classes.popperContainer}
-                                    data-placement={placement}
-                                >
-                                    <Grow
-                                        in={!!this.state.menuOpen}
-                                        id="menu-list-grow"
-                                        style={{ transformOrigin: '0 0 0' }}
-                                        timeout={{ exit: 0, enter: 200 }}
-                                    >
-                                        <Card>
-                                            {this.renderMenuItems()}
-                                        </Card>
-                                    </Grow>
-                                </div>
-                            )
-                        }
+                        <FlyoutMenu role="menu">
+                            {renderMenuItems()}
+                        </FlyoutMenu>
                     </Popper>
                 </Layer>
-                }
-            </Manager>
-        );
-    }
-}
-
-export const RowMenu = withStyles(styles)(Index);
+            )}
+        </div>
+    );
+};
diff --git a/src/core_modules/capture-core/components/NetworkStatusBadge/NetworkStatusBadge.component.js b/src/core_modules/capture-core/components/NetworkStatusBadge/NetworkStatusBadge.component.js
deleted file mode 100644
index 2cdd4be23f..0000000000
--- a/src/core_modules/capture-core/components/NetworkStatusBadge/NetworkStatusBadge.component.js
+++ /dev/null
@@ -1,155 +0,0 @@
-import { connect } from 'react-redux';
-import React, { PureComponent } from 'react';
-import { IconSynk16 } from '@dhis2/ui';
-import Grow from '@material-ui/core/Grow';
-import { withStyles } from '@material-ui/core/styles';
-import moment from 'moment';
-import i18n from '@dhis2/d2-i18n';
-
-const styles = () => ({
-    offlineIcon: {
-        backgroundColor: '#9e9e9e',
-        width: '8px',
-        height: '8px',
-        borderRadius: '4px',
-        display: 'inline-block',
-        marginRight: '6px',
-    },
-    onlineIcon: {
-        backgroundColor: '#48a999',
-        width: '8px',
-        height: '8px',
-        borderRadius: '4px',
-        display: 'inline-block',
-        marginRight: '6px',
-    },
-    badgeContainer: {
-        backgroundColor: '#16486e',
-        color: 'white',
-        borderRadius: '4px',
-        whiteSpace: 'nowrap',
-    },
-    badgeSection: {
-        padding: '8px',
-    },
-    badgeSeparator: {
-        borderRight: '1px solid #0b3b60',
-    },
-    flex: {
-        display: 'flex',
-        flexWrap: 'nowrap',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-    },
-    icon: {
-        animationName: 'Sync-spin',
-        animationDuration: '1.5s',
-        animationIterationCount: 'infinite',
-        animationDelay: '250ms',
-        animationDirection: 'reverse',
-        width: '16px',
-        height: '16px',
-    },
-    text: {
-        margin: 0,
-        padding: 0,
-    },
-    smallText: {
-        fontSize: '14px',
-    },
-    '@keyframes Sync-spin': {
-        from: { transform: 'rotate(0deg)' },
-        to: { transform: 'rotate(360deg)' },
-    },
-});
-
-const RightSection = props =>
-    (<div className={`${props.classes.flex} ${props.classes.badgeSection}`}>
-        <OnlineIcon status={props.status ? props.classes.onlineIcon : props.classes.offlineIcon} />
-        <p className={props.classes.text}>{ props.status ? i18n.t('Online') : i18n.t('Offline') }</p>
-    </div>);
-
-class LeftSection extends PureComponent {
-    constructor(props) {
-        super(props);
-        this.state = { offlineTimer: moment(Date.now()).fromNow() };
-    }
-
-    componentDidUpdate() {
-        if (this.props.statusTimer === 0) {
-            clearInterval(this.timer);
-            this.timer = null;
-            // todo (eslint)
-            // eslint-disable-next-line react/no-did-update-set-state
-            this.setState({ offlineTimer: moment(Date.now()).fromNow() });
-            return;
-        }
-
-        if (this.props.statusTimer > 0 && !this.timer) {
-            this.timer = setInterval(() => {
-                const t1 = moment(this.props.statusTimer).fromNow();
-                this.setState({ offlineTimer: t1 });
-            }, 60 * 1000);
-        }
-    }
-
-    render() {
-        const props = this.props;
-        let content;
-
-        if (props.status && props.syncList.length === 0) {
-            return null;
-        }
-
-        if (props.status && props.syncList.length > 0) {
-            content = (
-                <div className={props.classes.flex}>
-                    <span className={props.classes.icon} >
-                        <IconSynk16 />
-                    </span>
-                    <p className={props.classes.text}>{i18n.t('Syncing')}</p>
-                </div>
-            );
-        }
-
-        if (!props.status) {
-            content = <span>{props.syncList.length} {i18n.t('offline events. Last synced:')} {this.state.offlineTimer}</span>;
-        }
-
-        const show = !!content;
-
-        return (
-            <Grow in={show} style={{ transformOrigin: 'right 50%' }}>
-                <div className={`${props.classes.badgeSection} ${props.classes.smallText} ${props.classes.badgeSeparator}`} style={props.style}>
-                    {content}
-                </div>
-            </Grow>
-        );
-    }
-}
-
-const OnlineIcon = props => <span className={props.status} />;
-
-// eslint-disable-next-line react/no-multi-comp
-class NetworkStatusBadgePlain extends PureComponent {
-    render() {
-        const status = this.props.offline || {};
-        const classes = this.props.classes;
-
-        const itemsToSync = status.outbox;
-
-        return (
-            <div className={`${classes.flex} ${classes.badgeContainer}`}>
-                <LeftSection status={status.online} syncList={itemsToSync} classes={classes} statusTimer={this.props.networkStatus.offlineSince} />
-                <RightSection status={status.online} syncList={itemsToSync} classes={classes} />
-            </div>
-        );
-    }
-}
-
-const mapStateToProps = state => ({
-    offline: state.offline,
-    networkStatus: state.networkStatus,
-});
-
-export const NetworkStatusBadge = connect(mapStateToProps)(withStyles(styles)(NetworkStatusBadgePlain));
diff --git a/src/core_modules/capture-core/components/Pages/ViewEvent/Section/ViewEventSection.component.js b/src/core_modules/capture-core/components/Pages/ViewEvent/Section/ViewEventSection.component.js
index 36db5aebae..1968dd4577 100644
--- a/src/core_modules/capture-core/components/Pages/ViewEvent/Section/ViewEventSection.component.js
+++ b/src/core_modules/capture-core/components/Pages/ViewEvent/Section/ViewEventSection.component.js
@@ -1,8 +1,8 @@
 // @flow
 
 import * as React from 'react';
-import { withStyles, IconButton } from '@material-ui/core';
-import { IconChevronDown24, IconChevronUp24, colors } from '@dhis2/ui';
+import { withStyles } from '@material-ui/core';
+import { IconChevronDown24, IconChevronUp24, colors, Button } from '@dhis2/ui';
 
 const getStyles = (theme: Theme) => ({
     container: {
@@ -21,6 +21,10 @@ const getStyles = (theme: Theme) => ({
     },
     toggleCollapseButton: {
         padding: 4,
+        border: 'none !important',
+        borderRadius: '50% !important',
+        width: theme.typography.pxToRem(28),
+        marginLeft: theme.typography.pxToRem(2),
     },
     contentContainer: {
         padding: theme.typography.pxToRem(10),
@@ -64,15 +68,16 @@ class ViewEventSectionPlain extends React.Component<Props, State> {
 
     renderCollapsable = () => {
         const classes = this.props.classes;
+        const icon = this.state.collapsed ? <IconChevronDown24 /> : <IconChevronUp24 />;
 
         return (
-            <IconButton className={classes.toggleCollapseButton} onClick={this.toggleCollapse}>
-                {this.state.collapsed ?
-                    <IconChevronDown24 /> :
-                    <IconChevronUp24 />
-                }
-            </IconButton>
-
+            <Button
+                icon={icon}
+                onClick={this.toggleCollapse}
+                className={classes.toggleCollapseButton}
+                small
+                secondary
+            />
         );
     }
 
diff --git a/src/core_modules/capture-core/components/Popper/Popper.component.js b/src/core_modules/capture-core/components/Popper/Popper.component.js
deleted file mode 100644
index 832de14135..0000000000
--- a/src/core_modules/capture-core/components/Popper/Popper.component.js
+++ /dev/null
@@ -1,107 +0,0 @@
-// @flow
-import * as React from 'react';
-import { Manager, Popper, Reference } from 'react-popper';
-import type { Placement } from '@popperjs/core/lib';
-import { Layer } from '@dhis2/ui';
-import Grow from '@material-ui/core/Grow';
-
-type Props = {
-    getPopperAction: (togglePopper: () => void) => React.Node,
-    getPopperContent: (togglePopper: Function) => React.Node,
-    placement: Placement,
-    classes?: ?Object,
-}
-
-type State = {
-    popperOpen: ?boolean,
-}
-
-export class MenuPopper extends React.Component<Props, State> {
-    managerRef: any;
-    menuReferenceInstance: ?HTMLDivElement;
-
-    static defaultProps = {
-        placement: 'bottom-end',
-    }
-
-    constructor(props: Props) {
-        super(props);
-        this.state = { popperOpen: false };
-    }
-
-    handleReferenceInstanceRetrieved = (instance: any) => {
-        this.managerRef(instance);
-        this.menuReferenceInstance = instance;
-    }
-
-    toggleMenu = (event?: any) => {
-        this.setState({
-            popperOpen: !this.state.popperOpen,
-        });
-        event && event.stopPropagation();
-    }
-
-    closeMenu = () => {
-        this.setState({
-            popperOpen: false,
-        });
-    }
-
-    handleClickAway = (event: any) => {
-        if (this.menuReferenceInstance && this.menuReferenceInstance.contains(event.target)) {
-            return;
-        }
-        this.closeMenu();
-    }
-
-    render() {
-        const { classes, getPopperAction, getPopperContent } = this.props;
-
-        return (
-            <Manager>
-                <Reference>
-                    {
-                        ({ ref }) => {
-                            this.managerRef = ref;
-                            return (
-                                <div
-                                    ref={this.handleReferenceInstanceRetrieved}
-                                >
-                                    {getPopperAction(this.toggleMenu)}
-                                </div>
-                            );
-                        }
-                    }
-                </Reference>
-                {this.state.popperOpen &&
-                <Layer onBackdropClick={this.handleClickAway} >
-                    <Popper
-                        placement={this.props.placement}
-                    >
-                        {
-                            ({ ref, style, placement }) => (
-                                <div
-                                    ref={ref}
-                                    style={{ ...style, zIndex: 1 }}
-                                    className={classes ? classes.popperContainer : ''}
-                                    data-placement={placement}
-                                >
-                                    <Grow
-                                        in={!!this.state.popperOpen}
-                                        id="menu-list-grow"
-                                        style={{ transformOrigin: '0 0 0' }}
-                                        timeout={{ exit: 0, enter: 200 }}
-                                    >
-                                        <React.Fragment>
-                                            {getPopperContent(this.toggleMenu)}
-                                        </React.Fragment>
-                                    </Grow>
-                                </div>
-                            )
-                        }
-                    </Popper>
-                </Layer>}
-            </Manager>
-        );
-    }
-}
diff --git a/src/core_modules/capture-core/components/Relationships/Relationships.component.js b/src/core_modules/capture-core/components/Relationships/Relationships.component.js
index 5e4b38fbf1..e85cf95ff5 100644
--- a/src/core_modules/capture-core/components/Relationships/Relationships.component.js
+++ b/src/core_modules/capture-core/components/Relationships/Relationships.component.js
@@ -3,8 +3,8 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import i18n from '@dhis2/d2-i18n';
-import { IconButton, withStyles } from '@material-ui/core';
-import { IconArrowRight16, IconCross24, Button } from '@dhis2/ui';
+import { withStyles } from '@material-ui/core';
+import { IconArrowRight16, IconCross24, Button, colors } from '@dhis2/ui';
 import { ConditionalTooltip } from 'capture-core/components/Tooltips/ConditionalTooltip';
 import type { RelationshipType } from '../../metaData';
 import type { Relationship, Entity } from './relationships.types';
@@ -23,7 +23,7 @@ const getStyles = (theme: Theme) => ({
     relationshipTypeName: {
         fontSize: 14,
         fontWeight: 600,
-        color: 'rgba(0,0,0,0.7)',
+        color: colors.grey700,
     },
     relationshipsContainer: {
     },
@@ -45,6 +45,10 @@ const getStyles = (theme: Theme) => ({
     relationshipActions: {
         padding: 7,
     },
+    deleteButton: {
+        border: 'none !important',
+        borderRadius: '50% !important',
+    },
     addButtonContainer: {
         display: 'inline-block',
     },
@@ -84,6 +88,7 @@ type Props = {
         relationshipActions: string,
         relationshipHighlight: string,
         tooltip: string,
+        deleteButton: string,
         addButtonContainer: string,
     },
     relationships: Array<Relationship>,
@@ -144,13 +149,14 @@ class RelationshipsPlain extends React.Component<Props> {
                         enabled={!canDelete}
                         wrapperClassName={classes.tooltip}
                     >
-                        <IconButton
+                        <Button
                             data-test="delete-relationship-button"
                             onClick={() => { onRemoveRelationship(relationship.clientId); }}
                             disabled={!canDelete}
-                        >
-                            <IconCross24 />
-                        </IconButton>
+                            icon={<IconCross24 />}
+                            secondary
+                            className={classes.deleteButton}
+                        />
                     </ConditionalTooltip>
                 </div>
             </div>
@@ -203,6 +209,7 @@ class RelationshipsPlain extends React.Component<Props> {
                                 disabled={!canCreate}
                                 small={smallMainButton}
                                 dataTest="add-relationship-button"
+                                secondary
                             >
                                 {i18n.t('Add relationship')}
                             </Button>
diff --git a/src/core_modules/capture-core/components/WidgetErrorAndWarning/WidgetError/WidgetErrorHeader.js b/src/core_modules/capture-core/components/WidgetErrorAndWarning/WidgetError/WidgetErrorHeader.js
index 1544fb4057..defa892c94 100644
--- a/src/core_modules/capture-core/components/WidgetErrorAndWarning/WidgetError/WidgetErrorHeader.js
+++ b/src/core_modules/capture-core/components/WidgetErrorAndWarning/WidgetError/WidgetErrorHeader.js
@@ -1,8 +1,7 @@
 // @flow
 import React from 'react';
 import { withStyles } from '@material-ui/core';
-import { ErrorRounded } from '@material-ui/icons';
-import { spacers, colors } from '@dhis2/ui';
+import { spacers, colors, IconErrorFilled24 } from '@dhis2/ui';
 import i18n from '@dhis2/d2-i18n';
 
 const styles = {
@@ -20,7 +19,7 @@ const styles = {
 
 const WidgetErrorHeaderPlain = ({ classes }) => (
     <span className={classes.container}>
-        <ErrorRounded />
+        <IconErrorFilled24 />
         <p className={classes.label}>{i18n.t('Error')}</p>
     </span>
 );
diff --git a/src/core_modules/capture-core/components/WidgetErrorAndWarning/WidgetWarning/WidgetWarningHeader.js b/src/core_modules/capture-core/components/WidgetErrorAndWarning/WidgetWarning/WidgetWarningHeader.js
index 25eca6d680..9483be440f 100644
--- a/src/core_modules/capture-core/components/WidgetErrorAndWarning/WidgetWarning/WidgetWarningHeader.js
+++ b/src/core_modules/capture-core/components/WidgetErrorAndWarning/WidgetWarning/WidgetWarningHeader.js
@@ -1,7 +1,6 @@
 // @flow
 
-import { colors, spacers } from '@dhis2/ui';
-import { WarningRounded } from '@material-ui/icons';
+import { colors, spacers, IconWarningFilled24 } from '@dhis2/ui';
 import i18n from '@dhis2/d2-i18n';
 import React from 'react';
 import { withStyles } from '@material-ui/core';
@@ -20,7 +19,7 @@ const styles = {
 
 const WidgetWarningHeaderPlain = ({ classes }) => (
     <span className={classes.container}>
-        <WarningRounded />
+        <IconWarningFilled24 />
         <p className={classes.label}>{i18n.t('Warning')}</p>
     </span>
 );
diff --git a/src/core_modules/capture-core/components/WidgetStagesAndEvents/Stages/Stage/StageOverview/StageOverview.component.js b/src/core_modules/capture-core/components/WidgetStagesAndEvents/Stages/Stage/StageOverview/StageOverview.component.js
index c2e7731421..651d77db08 100644
--- a/src/core_modules/capture-core/components/WidgetStagesAndEvents/Stages/Stage/StageOverview/StageOverview.component.js
+++ b/src/core_modules/capture-core/components/WidgetStagesAndEvents/Stages/Stage/StageOverview/StageOverview.component.js
@@ -114,7 +114,7 @@ export const StageOverviewPlain = ({ title, icon, description, events, classes }
             { description &&
             <Tooltip
                 content={description}
-                openDelay="100"
+                openDelay={100}
             >
                 <div className={classes.descriptionIcon}>
                     <IconInfo16 />
diff --git a/src/core_modules/capture-core/components/WorkingLists/EventWorkingLists/RowMenuSetup/EventWorkingListsRowMenuSetup.component.js b/src/core_modules/capture-core/components/WorkingLists/EventWorkingLists/RowMenuSetup/EventWorkingListsRowMenuSetup.component.js
index 7044885784..fadcccb965 100644
--- a/src/core_modules/capture-core/components/WorkingLists/EventWorkingLists/RowMenuSetup/EventWorkingListsRowMenuSetup.component.js
+++ b/src/core_modules/capture-core/components/WorkingLists/EventWorkingLists/RowMenuSetup/EventWorkingListsRowMenuSetup.component.js
@@ -1,32 +1,19 @@
 // @flow
-import React, { useMemo, type ComponentType } from 'react';
+import React, { useMemo } from 'react';
 import i18n from '@dhis2/d2-i18n';
-import { withStyles } from '@material-ui/core/styles';
 import { IconDelete24, colors } from '@dhis2/ui';
 import { EventWorkingListsUpdateTrigger } from '../UpdateTrigger';
 import type { CustomRowMenuContents } from '../../WorkingListsBase';
 import type { Props } from './eventWorkingListsRowMenuSetup.types';
 
-const getStyles = () => ({
-    deleteContainer: {
-        display: 'flex',
-    },
-});
 
-export const EventWorkingListsRowMenuSetupPlain = ({ onDeleteEvent, classes, ...passOnProps }: Props) => {
+export const EventWorkingListsRowMenuSetup = ({ onDeleteEvent, ...passOnProps }: Props) => {
     const customRowMenuContents: CustomRowMenuContents = useMemo(() => [{
         key: 'deleteEventItem',
         clickHandler: ({ id }) => onDeleteEvent(id),
-        element: (
-            <span
-                data-test="delete-event-button"
-                className={classes.deleteContainer}
-            >
-                <IconDelete24 color={colors.red400} />
-                {i18n.t('Delete event')}
-            </span>
-        ),
-    }], [onDeleteEvent, classes.deleteContainer]);
+        icon: <IconDelete24 color={colors.red400} />,
+        label: i18n.t('Delete event'),
+    }], [onDeleteEvent]);
 
     return (
         <EventWorkingListsUpdateTrigger
@@ -35,6 +22,3 @@ export const EventWorkingListsRowMenuSetupPlain = ({ onDeleteEvent, classes, ...
         />
     );
 };
-
-export const EventWorkingListsRowMenuSetup: ComponentType<$Diff<Props, CssClasses>> =
-    withStyles(getStyles)(EventWorkingListsRowMenuSetupPlain);
diff --git a/src/core_modules/capture-core/components/WorkingLists/EventWorkingLists/RowMenuSetup/eventWorkingListsRowMenuSetup.types.js b/src/core_modules/capture-core/components/WorkingLists/EventWorkingLists/RowMenuSetup/eventWorkingListsRowMenuSetup.types.js
index 28331c6f0d..efd37756d4 100644
--- a/src/core_modules/capture-core/components/WorkingLists/EventWorkingLists/RowMenuSetup/eventWorkingListsRowMenuSetup.types.js
+++ b/src/core_modules/capture-core/components/WorkingLists/EventWorkingLists/RowMenuSetup/eventWorkingListsRowMenuSetup.types.js
@@ -4,7 +4,6 @@ import type { CustomRowMenuContents } from '../../WorkingListsBase';
 
 type ExtractedProps = $ReadOnly<{|
     onDeleteEvent: Function,
-    classes: Object,
 |}>;
 
 type RestProps = $Rest<EventWorkingListsViewMenuSetupOutputProps, ExtractedProps>;
diff --git a/src/core_modules/capture-ui/Icons/DropdownChevron.component.js b/src/core_modules/capture-ui/Icons/DropdownChevron.component.js
new file mode 100644
index 0000000000..d02d85e2d5
--- /dev/null
+++ b/src/core_modules/capture-ui/Icons/DropdownChevron.component.js
@@ -0,0 +1,35 @@
+// @flow
+import React from 'react';
+
+type Props = {
+  className?: string,
+};
+
+export function ChevronDown({ className }: Props) {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 12 12"
+            className={className}
+            style={{ fill: 'inherit', height: '12px', width: '12px', verticalAlign: 'middle', pointerEvents: 'none' }}
+        >
+            <path d="m5.29289 8.7071c.39053.3905 1.02369.3905 1.41422 0l2.99999-2.99999c.3905-.39053.3905-1.02369 0-1.41422-.3905-.39052-1.0237-.39052-1.4142 0l-2.2929 2.2929-2.29289-2.2929c-.39053-.39052-1.02369-.39052-1.41422 0-.39052.39053-.39052 1.02369 0 1.41422z" />
+        </svg>
+    );
+}
+
+export function ChevronUp({ className }: Props) {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 12 12"
+            className={className}
+            style={{ fill: 'inherit', height: '12px', width: '12px', verticalAlign: 'middle', pointerEvents: 'none' }}
+        >
+            <path
+                d="m5.29289 8.7071c.39053.3905 1.02369.3905 1.41422 0l2.99999-2.99999c.3905-.39053.3905-1.02369 0-1.41422-.3905-.39052-1.0237-.39052-1.4142 0l-2.2929 2.2929-2.29289-2.2929c-.39053-.39052-1.02369-.39052-1.41422 0-.39052.39053-.39052 1.02369 0 1.41422z"
+                transform="matrix(1 0 0 -1 0 12.999974)"
+            />
+        </svg>
+    );
+}
diff --git a/src/core_modules/capture-ui/Icons/index.js b/src/core_modules/capture-ui/Icons/index.js
index 1f4dfc1f82..0bada9e901 100644
--- a/src/core_modules/capture-ui/Icons/index.js
+++ b/src/core_modules/capture-ui/Icons/index.js
@@ -6,5 +6,6 @@ export { MultiSelectionUncheckedIcon } from './MultiSelectionUncheckedIcon.compo
 export { SingleSelectionCheckedIcon } from './SingleSelectionCheckedIcon.component';
 export { SingleSelectionUncheckedIcon } from './SingleSelectionUncheckedIcon.component';
 export { BookmarkAddIcon } from './BookmarkAddIcon.component';
+export { ChevronDown, ChevronUp } from './DropdownChevron.component';
 export { ChevronIcon } from './ChevronIcon.component';