diff --git a/webapp/channels/src/components/dot_menu/post_reminder_submenu.tsx b/webapp/channels/src/components/dot_menu/post_reminder_submenu.tsx
index 6eb08fc94e2..8d1a94aab5b 100644
--- a/webapp/channels/src/components/dot_menu/post_reminder_submenu.tsx
+++ b/webapp/channels/src/components/dot_menu/post_reminder_submenu.tsx
@@ -159,13 +159,15 @@ function PostReminderSubmenu(props: Props) {
             leadingElement={<ClockOutlineIcon size={18}/>}
             trailingElements={<span className={'dot-menu__item-trailing-icon'}><ChevronRightIcon size={16}/></span>}
             menuId={`remind_post_${props.post.id}-menu`}
-        >
-            <h5 className={'dot-menu__post-reminder-menu-header'}>
+            subMenuHeader={<h5 className={'dot-menu__post-reminder-menu-header'}>
                 {formatMessage(
-                    {id: 'post_info.post_reminder.sub_menu.header',
-                        defaultMessage: 'Set a reminder for:'},
+                    {
+                        id: 'post_info.post_reminder.sub_menu.header',
+                        defaultMessage: 'Set a reminder for:',
+                    },
                 )}
-            </h5>
+            </h5>}
+        >
             {postReminderSubMenuItems}
         </Menu.SubMenu>
     );
diff --git a/webapp/channels/src/components/menu/menu.test.tsx b/webapp/channels/src/components/menu/menu.test.tsx
index b0b06108ebf..4b27c7e9163 100644
--- a/webapp/channels/src/components/menu/menu.test.tsx
+++ b/webapp/channels/src/components/menu/menu.test.tsx
@@ -140,7 +140,7 @@ describe('menu click handlers', () => {
             expect(screen.getByText('Open modal from submenu')).toBeInTheDocument();
 
             // Press the down arrow once to focus first submenu item and then twice more to select the one we want
-            userEvent.keyboard('{arrowdown}{arrowdown}{arrowdown}');
+            userEvent.keyboard('{arrowdown}{arrowdown}');
 
             expect(screen.getByText('Open modal from submenu').closest('li')).toHaveFocus();
 
diff --git a/webapp/channels/src/components/menu/menu_styled.tsx b/webapp/channels/src/components/menu/menu_styled.tsx
index 47fe3c504be..454b71c3873 100644
--- a/webapp/channels/src/components/menu/menu_styled.tsx
+++ b/webapp/channels/src/components/menu/menu_styled.tsx
@@ -3,26 +3,42 @@
 
 import MuiMenu from '@mui/material/Menu';
 import type {MenuProps as MuiMenuProps} from '@mui/material/Menu';
+import MuiPopover from '@mui/material/Popover';
+import type {PopoverProps as MuiPopoverProps} from '@mui/material/Popover';
 import {styled} from '@mui/material/styles';
 
-interface Props extends MuiMenuProps {
-    asSubMenu?: boolean;
+interface PopoverProps extends MuiPopoverProps {
+    width?: string;
+}
+
+interface MenuProps extends MuiMenuProps {
     width?: string;
 }
 
 /**
- * A styled version of the Material-UI Menu component with few overrides.
- * @warning This component is meant to be only used inside of the Menu component directory.
+ * A styled version of the Material-UI Popover component with few overrides.
+ * @warning This component is meant to be only used inside of the SubMenu component directory.
  */
-export const MuiMenuStyled = styled(MuiMenu, {
-    shouldForwardProp: (prop) => prop !== 'asSubMenu',
-})<Props>(
-    ({asSubMenu, width}) => ({
+export const MuiPopoverStyled = styled(MuiPopover)<PopoverProps>(
+    ({width}) => ({
+        '& .MuiPaper-root': {
+            paddingTop: '4px',
+            paddingBottom: '4px',
+            backgroundColor: 'var(--center-channel-bg)',
+            boxShadow: 'var(--elevation - 5), 0 0 0 1px rgba(var(--center-channel-color-rgb), 0.12) inset',
+            minWidth: '114px',
+            maxWidth: '496px',
+            maxHeight: '80vh',
+            width,
+        },
+    }),
+);
+
+export const MuiMenuStyled = styled(MuiMenu)<MenuProps>(
+    ({width}) => ({
         '& .MuiPaper-root': {
             backgroundColor: 'var(--center-channel-bg)',
-            boxShadow: `${
-                asSubMenu ? 'var(--elevation-5)' : 'var(--elevation-4)'
-            }, 0 0 0 1px rgba(var(--center-channel-color-rgb), 0.12) inset`,
+            boxShadow: 'var(--elevation-4), 0 0 0 1px rgba(var(--center-channel-color-rgb), 0.12) inset',
             minWidth: '114px',
             maxWidth: '496px',
             maxHeight: '80vh',
diff --git a/webapp/channels/src/components/menu/sub_menu.tsx b/webapp/channels/src/components/menu/sub_menu.tsx
index 26e3e182c12..d02ad5c898d 100644
--- a/webapp/channels/src/components/menu/sub_menu.tsx
+++ b/webapp/channels/src/components/menu/sub_menu.tsx
@@ -31,7 +31,7 @@ import {isKeyPressed} from 'utils/keyboard';
 import {SubMenuContext, useMenuContextValue} from './menu_context';
 import {MenuItem} from './menu_item';
 import type {Props as MenuItemProps} from './menu_item';
-import {MuiMenuStyled} from './menu_styled';
+import {MuiPopoverStyled} from './menu_styled';
 
 import './sub_menu.scss';
 
@@ -47,6 +47,7 @@ interface Props {
     menuAriaLabel?: string;
     forceOpenOnLeft?: boolean; // Most of the times this is not needed, since submenu position is calculated and placed
 
+    subMenuHeader?: ReactNode;
     children: ReactNode;
 }
 
@@ -61,6 +62,7 @@ export function SubMenu(props: Props) {
         menuAriaLabel,
         forceOpenOnLeft,
         children,
+        subMenuHeader,
         ...rest
     } = props;
 
@@ -134,6 +136,7 @@ export function SubMenu(props: Props) {
                 menuId,
                 menuAriaLabel,
                 children,
+                subMenuHeader,
             },
         }));
     }
@@ -163,34 +166,28 @@ export function SubMenu(props: Props) {
             onMouseLeave={handleMouseLeave}
             onKeyDown={handleKeyDown}
         >
-            <MuiMenuStyled
-                anchorEl={anchorElement}
-                open={isSubMenuOpen}
-                asSubMenu={true}
-                anchorOrigin={originOfAnchorAndTransform.anchorOrigin}
-                transformOrigin={originOfAnchorAndTransform.transformOrigin}
-                sx={{pointerEvents: 'none'}}
-            >
-                {/* This component is needed here to re enable pointer events for the submenu items which we had to disable above as */}
-                {/* pointer turns to default as soon as it leaves the parent menu */}
-                {/* Notice we dont use the below component in menu.tsx  */}
-                <MuiMenuList
-                    id={menuId}
-                    component='ul'
-                    aria-label={menuAriaLabel}
-                    className={A11yClassNames.POPUP}
-                    onKeyDown={handleSubMenuKeyDown}
-                    sx={{
-                        pointerEvents: 'auto', // reset pointer events to default from here on
-                        paddingTop: 0,
-                        paddingBottom: 0,
-                    }}
+            <SubMenuContext.Provider value={providerValue}>
+                <MuiPopoverStyled
+                    anchorEl={anchorElement}
+                    open={isSubMenuOpen}
+                    anchorOrigin={originOfAnchorAndTransform.anchorOrigin}
+                    transformOrigin={originOfAnchorAndTransform.transformOrigin}
                 >
-                    <SubMenuContext.Provider value={providerValue}>
+                    {subMenuHeader}
+                    <MuiMenuList
+                        id={menuId}
+                        aria-label={menuAriaLabel}
+                        className={A11yClassNames.POPUP}
+                        onKeyDown={handleSubMenuKeyDown}
+                        autoFocusItem={true}
+                        sx={{
+                            py: 0,
+                        }}
+                    >
                         {children}
-                    </SubMenuContext.Provider>
-                </MuiMenuList>
-            </MuiMenuStyled>
+                    </MuiMenuList>
+                </MuiPopoverStyled>
+            </SubMenuContext.Provider>
         </MenuItem>
     );
 }
@@ -199,6 +196,7 @@ interface SubMenuModalProps {
     menuId: Props['menuId'];
     menuAriaLabel?: Props['menuAriaLabel'];
     children: Props['children'];
+    subMenuHeader?: ReactNode;
 }
 
 function SubMenuModal(props: SubMenuModalProps) {
@@ -220,9 +218,11 @@ function SubMenuModal(props: SubMenuModalProps) {
                 className='menuModal'
             >
                 <MuiMenuList
+                    component={'div'}
                     aria-hidden={true}
                     onClick={handleModalClose}
                 >
+                    {props.subMenuHeader}
                     {props.children}
                 </MuiMenuList>
             </GenericModal>