diff --git a/components/brave_wallet_ui/components/desktop/account-list-item/index.tsx b/components/brave_wallet_ui/components/desktop/account-list-item/index.tsx
index 89376597e3c2..6b45f250a9fd 100644
--- a/components/brave_wallet_ui/components/desktop/account-list-item/index.tsx
+++ b/components/brave_wallet_ui/components/desktop/account-list-item/index.tsx
@@ -28,9 +28,6 @@ import {
 import { getLocale } from '../../../../common/locale'
 import { getEntitiesListFromEntityState } from '../../../utils/entities.utils'
 
-// hooks
-import { useOnClickOutside } from '../../../common/hooks/useOnClickOutside'
-
 // Selectors
 import { UISelectors } from '../../../common/selectors'
 import { useSafeUISelector } from '../../../common/hooks/use-safe-selector'
@@ -73,9 +70,6 @@ import { RewardsLogin } from '../rewards_login/rewards_login'
 import {
   StyledWrapper,
   NameAndIcon,
-  AccountMenuWrapper,
-  AccountMenuButton,
-  AccountMenuIcon,
   AccountBalanceText,
   AccountDescription,
   AccountNameWrapper,
@@ -128,19 +122,6 @@ export const AccountListItem = ({
     } = emptyRewardsInfo
   } = useGetRewardsInfoQuery()
 
-  // state
-  const [showAccountMenu, setShowAccountMenu] = React.useState<boolean>(false)
-
-  // refs
-  const accountMenuRef = React.useRef<HTMLDivElement>(null)
-
-  // hooks
-  useOnClickOutside(
-    accountMenuRef,
-    () => setShowAccountMenu(false),
-    showAccountMenu
-  )
-
   // methods
   const onSelectAccount = React.useCallback(() => {
     onClick(account)
@@ -398,25 +379,16 @@ export const AccountListItem = ({
         </AccountButton>
 
         {!isDisconnectedRewardsAccount && (
-          <AccountMenuWrapper ref={accountMenuRef}>
-            <AccountMenuButton
-              onClick={() => setShowAccountMenu((prev) => !prev)}
-            >
-              <AccountMenuIcon />
-            </AccountMenuButton>
-            {showAccountMenu && (
-              <>
-                {isRewardsAccount ? (
-                  <RewardsMenu />
-                ) : (
-                  <AccountActionsMenu
-                    onClick={onClickButtonOption}
-                    options={buttonOptions}
-                  />
-                )}
-              </>
+          <>
+            {isRewardsAccount ? (
+              <RewardsMenu />
+            ) : (
+              <AccountActionsMenu
+                onClick={onClickButtonOption}
+                options={buttonOptions}
+              />
             )}
-          </AccountMenuWrapper>
+          </>
         )}
       </Row>
       {isDisconnectedRewardsAccount && (
diff --git a/components/brave_wallet_ui/components/desktop/account-list-item/style.ts b/components/brave_wallet_ui/components/desktop/account-list-item/style.ts
index 5d1125f45fa3..67c0bb4fa210 100644
--- a/components/brave_wallet_ui/components/desktop/account-list-item/style.ts
+++ b/components/brave_wallet_ui/components/desktop/account-list-item/style.ts
@@ -63,10 +63,6 @@ export const NameAndIcon = styled.div`
   flex-direction: row;
 `
 
-export const AccountMenuWrapper = styled.div`
-  position: relative;
-`
-
 export const ButtonIcon = styled(Icon)`
   --leo-icon-size: 14px;
   color: ${leo.color.icon.default};
@@ -97,26 +93,6 @@ export const OvalButtonText = styled.span`
   font-weight: 600;
 `
 
-export const AccountMenuButton = styled(WalletButton)`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  outline: none;
-  background: none;
-  pointer-events: auto;
-  border: none;
-  margin: 0px;
-  padding: 0px;
-`
-
-export const AccountMenuIcon = styled(Icon).attrs({
-  name: 'more-vertical'
-})`
-  --leo-icon-size: 24px;
-  color: ${leo.color.icon.default};
-`
-
 export const AccountBalanceText = styled(Text)`
   color: ${leo.color.text.primary};
   margin-right: 12px;
diff --git a/components/brave_wallet_ui/components/desktop/card-headers/account-details-header.tsx b/components/brave_wallet_ui/components/desktop/card-headers/account-details-header.tsx
index 58fafbd4c98c..3f98eebecd4f 100644
--- a/components/brave_wallet_ui/components/desktop/card-headers/account-details-header.tsx
+++ b/components/brave_wallet_ui/components/desktop/card-headers/account-details-header.tsx
@@ -49,9 +49,6 @@ import {
 } from '../../../common/slices/entities/token-balance.entity'
 import { querySubscriptionOptions60s } from '../../../common/slices/constants'
 
-// Hooks
-import { useOnClickOutside } from '../../../common/hooks/useOnClickOutside'
-
 // Components
 import {
   CreateAccountIcon //
@@ -71,7 +68,6 @@ import {
 import {
   MenuButton,
   ButtonIcon,
-  MenuWrapper,
   HorizontalDivider
 } from './shared-card-headers.style'
 import { Row, Column, HorizontalSpace } from '../../shared/style'
@@ -82,9 +78,11 @@ interface Props {
   tokenBalancesRegistry: TokenBalancesRegistry | undefined | null
 }
 
-export const AccountDetailsHeader = (props: Props) => {
-  const { account, onClickMenuOption, tokenBalancesRegistry } = props
-
+export const AccountDetailsHeader = ({
+  account,
+  onClickMenuOption,
+  tokenBalancesRegistry
+}: Props) => {
   // routing
   const history = useHistory()
 
@@ -99,20 +97,6 @@ export const AccountDetailsHeader = (props: Props) => {
   })
   const { data: defaultFiatCurrency } = useGetDefaultFiatCurrencyQuery()
 
-  // state
-  const [showAccountDetailsMenu, setShowAccountDetailsMenu] =
-    React.useState<boolean>(false)
-
-  // refs
-  const accountDetailsMenuRef = React.useRef<HTMLDivElement>(null)
-
-  // hooks
-  useOnClickOutside(
-    accountDetailsMenuRef,
-    () => setShowAccountDetailsMenu(false),
-    showAccountDetailsMenu
-  )
-
   // Memos
   const accountsFungibleTokens = React.useMemo(() => {
     return userVisibleTokensInfo
@@ -208,10 +192,12 @@ export const AccountDetailsHeader = (props: Props) => {
     return options
   }, [account])
 
+  // methods
   const goBack = React.useCallback(() => {
     history.push(WalletRoutes.Accounts)
   }, [history])
 
+  // render
   return (
     <Row
       padding={isPanel ? '16px' : '24px 0px'}
@@ -280,19 +266,11 @@ export const AccountDetailsHeader = (props: Props) => {
             <HorizontalSpace space='16px' />
           </>
         )}
-        <MenuWrapper ref={accountDetailsMenuRef}>
-          <MenuButton
-            onClick={() => setShowAccountDetailsMenu((prev) => !prev)}
-          >
-            <ButtonIcon name='more-vertical' />
-          </MenuButton>
-          {showAccountDetailsMenu && (
-            <AccountDetailsMenu
-              options={menuOptions}
-              onClickMenuOption={onClickMenuOption}
-            />
-          )}
-        </MenuWrapper>
+
+        <AccountDetailsMenu
+          options={menuOptions}
+          onClickMenuOption={onClickMenuOption}
+        />
       </Row>
     </Row>
   )
diff --git a/components/brave_wallet_ui/components/desktop/card-headers/accounts-header.tsx b/components/brave_wallet_ui/components/desktop/card-headers/accounts-header.tsx
index 3643b7ab23e8..044e41f798ca 100644
--- a/components/brave_wallet_ui/components/desktop/card-headers/accounts-header.tsx
+++ b/components/brave_wallet_ui/components/desktop/card-headers/accounts-header.tsx
@@ -18,38 +18,19 @@ import { DefaultPanelHeader } from './default-panel-header'
 import { getLocale } from '../../../../common/locale'
 
 // Hooks
-import { useOnClickOutside } from '../../../common/hooks/useOnClickOutside'
 import { useSafeUISelector } from '../../../common/hooks/use-safe-selector'
 
 import { AccountsMenu } from '../wallet-menus/accounts-menu'
 
 // Styled Components
-import {
-  HeaderTitle,
-  MenuButton,
-  ButtonIcon,
-  MenuWrapper
-} from './shared-card-headers.style'
+import { HeaderTitle } from './shared-card-headers.style'
 import { Row } from '../../shared/style'
 
 export const AccountsHeader = () => {
   // UI Selectors (safe)
   const isPanel = useSafeUISelector(UISelectors.isPanel)
 
-  // State
-  const [showPortfolioOverviewMenu, setShowPortfolioOverviewMenu] =
-    React.useState<boolean>(false)
-
-  // Refs
-  const portfolioOverviewMenuRef = React.useRef<HTMLDivElement>(null)
-
-  // Hooks
-  useOnClickOutside(
-    portfolioOverviewMenuRef,
-    () => setShowPortfolioOverviewMenu(false),
-    showPortfolioOverviewMenu
-  )
-
+  // render
   return isPanel ? (
     <DefaultPanelHeader
       title={getLocale('braveWalletTopNavAccounts')}
@@ -61,14 +42,7 @@ export const AccountsHeader = () => {
       justifyContent='space-between'
     >
       <HeaderTitle>{getLocale('braveWalletTopNavAccounts')}</HeaderTitle>
-      <MenuWrapper ref={portfolioOverviewMenuRef}>
-        <MenuButton
-          onClick={() => setShowPortfolioOverviewMenu((prev) => !prev)}
-        >
-          <ButtonIcon name='plus-add' />
-        </MenuButton>
-        {showPortfolioOverviewMenu && <AccountsMenu />}
-      </MenuWrapper>
+      <AccountsMenu />
     </Row>
   )
 }
diff --git a/components/brave_wallet_ui/components/desktop/card-headers/asset-details-header.tsx b/components/brave_wallet_ui/components/desktop/card-headers/asset-details-header.tsx
index 1a6c3a08b916..0ab69967f05c 100644
--- a/components/brave_wallet_ui/components/desktop/card-headers/asset-details-header.tsx
+++ b/components/brave_wallet_ui/components/desktop/card-headers/asset-details-header.tsx
@@ -36,7 +36,6 @@ import {
 import { querySubscriptionOptions60s } from '../../../common/slices/constants'
 
 // Hooks
-import { useOnClickOutside } from '../../../common/hooks/useOnClickOutside'
 import useExplorer from '../../../common/hooks/explorer'
 
 // Components
@@ -48,7 +47,6 @@ import { CreateNetworkIcon } from '../../shared/create-network-icon'
 import {
   MenuButton,
   ButtonIcon,
-  MenuWrapper,
   HorizontalDivider
 } from './shared-card-headers.style'
 import {
@@ -99,36 +97,20 @@ export const AssetDetailsHeader = (props: Props) => {
     useGetNetworkQuery(selectedAsset ?? skipToken)
   const { data: defaultFiatCurrency } = useGetDefaultFiatCurrencyQuery()
 
-  // state
-  const [showAssetDetailsMenu, setShowAssetDetailsMenu] =
-    React.useState<boolean>(false)
-
-  // refs
-  const assetDetailsMenuRef = React.useRef<HTMLDivElement>(null)
-
   // hooks
-  useOnClickOutside(
-    assetDetailsMenuRef,
-    () => setShowAssetDetailsMenu(false),
-    showAssetDetailsMenu
-  )
-
   const openExplorer = useExplorer(selectedAssetsNetwork)
 
   // methods
   const handleOnClickHideToken = React.useCallback(() => {
-    setShowAssetDetailsMenu(false)
     onClickHideToken()
   }, [onClickHideToken])
 
   const handleOnClickTokenDetails = React.useCallback(() => {
-    setShowAssetDetailsMenu(false)
     onClickTokenDetails()
   }, [onClickTokenDetails])
 
   const handleOnClickEditToken = React.useCallback(() => {
     if (onClickEditToken) {
-      setShowAssetDetailsMenu(false)
       onClickEditToken()
     }
   }, [onClickEditToken])
@@ -283,22 +265,14 @@ export const AssetDetailsHeader = (props: Props) => {
               <HorizontalSpace space='16px' />
               <HorizontalDivider />
               <HorizontalSpace space='16px' />
-              <MenuWrapper ref={assetDetailsMenuRef}>
-                <MenuButton
-                  onClick={() => setShowAssetDetailsMenu((prev) => !prev)}
-                >
-                  <ButtonIcon name='more-vertical' />
-                </MenuButton>
-                {showAssetDetailsMenu && (
-                  <AssetDetailsMenu
-                    assetSymbol={selectedAsset?.symbol ?? ''}
-                    onClickHideToken={handleOnClickHideToken}
-                    onClickTokenDetails={handleOnClickTokenDetails}
-                    onClickViewOnExplorer={onClickViewOnExplorer}
-                    onClickEditToken={handleOnClickEditToken}
-                  />
-                )}
-              </MenuWrapper>
+
+              <AssetDetailsMenu
+                assetSymbol={selectedAsset?.symbol ?? ''}
+                onClickHideToken={handleOnClickHideToken}
+                onClickTokenDetails={handleOnClickTokenDetails}
+                onClickViewOnExplorer={onClickViewOnExplorer}
+                onClickEditToken={handleOnClickEditToken}
+              />
             </>
           )}
       </Row>
diff --git a/components/brave_wallet_ui/components/desktop/card-headers/default-panel-header.tsx b/components/brave_wallet_ui/components/desktop/card-headers/default-panel-header.tsx
index 047bdfc7a939..663dd9fa893e 100644
--- a/components/brave_wallet_ui/components/desktop/card-headers/default-panel-header.tsx
+++ b/components/brave_wallet_ui/components/desktop/card-headers/default-panel-header.tsx
@@ -8,9 +8,6 @@ import * as React from 'react'
 // Types
 import { WalletRoutes } from '../../../constants/types'
 
-// Hooks
-import { useOnClickOutside } from '../../../common/hooks/useOnClickOutside'
-
 // Utils
 import { openWalletRouteTab } from '../../../utils/routes-utils'
 
@@ -24,10 +21,9 @@ import {
 import {
   Button,
   ButtonIcon,
-  LeftRightContainer,
-  ClickAwayArea
+  LeftRightContainer
 } from './shared-panel-headers.style'
-import { HeaderTitle, MenuWrapper } from './shared-card-headers.style'
+import { HeaderTitle } from './shared-card-headers.style'
 import { Row } from '../../shared/style'
 
 interface Props {
@@ -38,19 +34,6 @@ interface Props {
 export const DefaultPanelHeader = (props: Props) => {
   const { title, expandRoute } = props
 
-  // State
-  const [showSettingsMenu, setShowSettingsMenu] = React.useState<boolean>(false)
-
-  // Refs
-  const settingsMenuRef = React.useRef<HTMLDivElement>(null)
-
-  // Hooks
-  useOnClickOutside(
-    settingsMenuRef,
-    () => setShowSettingsMenu(false),
-    showSettingsMenu
-  )
-
   // Methods
   const onClickExpand = React.useCallback(() => {
     if (expandRoute) {
@@ -79,14 +62,8 @@ export const DefaultPanelHeader = (props: Props) => {
         justifyContent='flex-end'
       >
         <DAppConnectionSettings />
-        <MenuWrapper ref={settingsMenuRef}>
-          <Button onClick={() => setShowSettingsMenu((prev) => !prev)}>
-            <ButtonIcon name='more-vertical' />
-          </Button>
-          {showSettingsMenu && <WalletSettingsMenu />}
-        </MenuWrapper>
+        <WalletSettingsMenu />
       </LeftRightContainer>
-      {showSettingsMenu && <ClickAwayArea />}
     </Row>
   )
 }
diff --git a/components/brave_wallet_ui/components/desktop/card-headers/shared-card-headers.style.ts b/components/brave_wallet_ui/components/desktop/card-headers/shared-card-headers.style.ts
index 41798b9696c4..98089063b4cc 100644
--- a/components/brave_wallet_ui/components/desktop/card-headers/shared-card-headers.style.ts
+++ b/components/brave_wallet_ui/components/desktop/card-headers/shared-card-headers.style.ts
@@ -25,10 +25,12 @@ export const HeaderTitle = styled.span<{
   word-break: break-all;
 `
 
+// TODO: delete
 export const MenuWrapper = styled.div`
   position: relative;
 `
 
+// TODO: delete
 export const MenuButton = styled(WalletButton)<{
   marginRight?: number
 }>`
diff --git a/components/brave_wallet_ui/components/desktop/card-headers/shared-panel-headers.style.ts b/components/brave_wallet_ui/components/desktop/card-headers/shared-panel-headers.style.ts
index c958573df985..900bee6fcfaf 100644
--- a/components/brave_wallet_ui/components/desktop/card-headers/shared-panel-headers.style.ts
+++ b/components/brave_wallet_ui/components/desktop/card-headers/shared-panel-headers.style.ts
@@ -27,6 +27,7 @@ export const LeftRightContainer = styled(Row)`
   min-width: 35%;
 `
 
+// TODO: delete
 export const ClickAwayArea = styled.div`
   left: 0;
   right: 0;
diff --git a/components/brave_wallet_ui/components/desktop/portfolio-asset-item/index.tsx b/components/brave_wallet_ui/components/desktop/portfolio-asset-item/index.tsx
index ab3a954a084d..1777e700205e 100644
--- a/components/brave_wallet_ui/components/desktop/portfolio-asset-item/index.tsx
+++ b/components/brave_wallet_ui/components/desktop/portfolio-asset-item/index.tsx
@@ -64,9 +64,6 @@ import {
   Spacer,
   NetworkDescriptionText,
   Button,
-  AssetMenuWrapper,
-  AssetMenuButton,
-  AssetMenuButtonIcon,
   Wrapper,
   InfoBar,
   LoadingRing,
@@ -112,18 +109,15 @@ export const PortfolioAssetItem = ({
     )
 
   // state
-  const [showAssetMenu, setShowAssetMenu] = React.useState<boolean>(false)
   const [showBalanceDetailsModal, setShowBalanceDetailsModal] =
     React.useState<boolean>(false)
   const [showEditTokenModal, setShowEditTokenModal] =
     React.useState<boolean>(false)
 
   // refs
-  const assetMenuRef = React.useRef<HTMLDivElement>(null)
   const balanceDetailsRef = React.useRef<HTMLDivElement>(null)
 
   // hooks
-  useOnClickOutside(assetMenuRef, () => setShowAssetMenu(false), showAssetMenu)
   useOnClickOutside(
     balanceDetailsRef,
     () => setShowBalanceDetailsModal(false),
@@ -307,31 +301,21 @@ export const PortfolioAssetItem = ({
                 </WithHideBalancePlaceholder>
               </BalanceColumn>
             </Button>
-            <AssetMenuWrapper ref={assetMenuRef}>
-              <AssetMenuButton
-                onClick={() => setShowAssetMenu((prev) => !prev)}
-              >
-                <AssetMenuButtonIcon />
-              </AssetMenuButton>
-              {showAssetMenu && (
-                <>
-                  {isRewardsToken ? (
-                    <RewardsMenu />
-                  ) : (
-                    <AssetItemMenu
-                      assetBalance={assetBalance}
-                      asset={token}
-                      account={account}
-                      onClickEditToken={
-                        token.contractAddress !== ''
-                          ? () => setShowEditTokenModal(true)
-                          : undefined
-                      }
-                    />
-                  )}
-                </>
-              )}
-            </AssetMenuWrapper>
+
+            {isRewardsToken ? (
+              <RewardsMenu />
+            ) : (
+              <AssetItemMenu
+                assetBalance={assetBalance}
+                asset={token}
+                account={account}
+                onClickEditToken={
+                  token.contractAddress !== ''
+                    ? () => setShowEditTokenModal(true)
+                    : undefined
+                }
+              />
+            )}
           </HoverArea>
         )}
         {showBalanceInfo && (
diff --git a/components/brave_wallet_ui/components/desktop/portfolio-asset-item/style.ts b/components/brave_wallet_ui/components/desktop/portfolio-asset-item/style.ts
index f1bcb294e65a..97f35c638746 100644
--- a/components/brave_wallet_ui/components/desktop/portfolio-asset-item/style.ts
+++ b/components/brave_wallet_ui/components/desktop/portfolio-asset-item/style.ts
@@ -4,7 +4,6 @@
 // you can obtain one at https://mozilla.org/MPL/2.0/.
 import styled from 'styled-components'
 import * as leo from '@brave/leo/tokens/css/variables'
-import Icon from '@brave/leo/react/icon'
 import ProgressRing from '@brave/leo/react/progressRing'
 
 // Shared Styles
@@ -116,30 +115,6 @@ export const NetworkDescriptionText = styled(Text)`
   color: ${leo.color.text.secondary};
 `
 
-export const AssetMenuWrapper = styled.div`
-  position: relative;
-`
-
-export const AssetMenuButton = styled(WalletButton)`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  outline: none;
-  background: none;
-  pointer-events: auto;
-  border: none;
-  margin: 0px;
-  padding: 0px;
-`
-
-export const AssetMenuButtonIcon = styled(Icon).attrs({
-  name: 'more-vertical'
-})`
-  --leo-icon-size: 24px;
-  color: ${leo.color.icon.default};
-`
-
 export const Wrapper = styled(Column)<{
   showBorder?: boolean
   isGrouped?: boolean
diff --git a/components/brave_wallet_ui/components/desktop/wallet-menus/account-actions-menu.tsx b/components/brave_wallet_ui/components/desktop/wallet-menus/account-actions-menu.tsx
index f900e3e7bbc4..50cb1136b82c 100644
--- a/components/brave_wallet_ui/components/desktop/wallet-menus/account-actions-menu.tsx
+++ b/components/brave_wallet_ui/components/desktop/wallet-menus/account-actions-menu.tsx
@@ -16,11 +16,13 @@ import {
 
 // Styled Components
 import {
-  StyledWrapper,
   PopupButton,
-  PopupButtonText,
-  ButtonIcon
-} from './wellet-menus.style'
+  MenuItemIcon,
+  ButtonMenu,
+  MenuItemRow,
+  MoreVerticalIcon,
+  MenuButton
+} from './wallet_menus.style'
 import { VerticalDivider, VerticalSpace } from '../../shared/style'
 
 export interface Props {
@@ -28,18 +30,27 @@ export interface Props {
   onClick: (id: AccountModalTypes) => void
 }
 
-export const AccountActionsMenu = (props: Props) => {
-  const { options, onClick } = props
-
+export const AccountActionsMenu = ({ options, onClick }: Props) => {
+  // render
   return (
-    <StyledWrapper yPosition={26}>
+    <ButtonMenu>
+      <div slot='anchor-content'>
+        <MenuButton
+          kind='plain-faint'
+          padding='0px'
+        >
+          <MoreVerticalIcon />
+        </MenuButton>
+      </div>
       {options.slice(0, 2).map((option) => (
         <PopupButton
           key={option.id}
           onClick={() => onClick(option.id)}
         >
-          <ButtonIcon name={option.icon} />
-          <PopupButtonText>{getLocale(option.name)}</PopupButtonText>
+          <MenuItemRow>
+            <MenuItemIcon name={option.icon} />
+            {getLocale(option.name)}
+          </MenuItemRow>
         </PopupButton>
       ))}
       <VerticalDivider />
@@ -49,11 +60,13 @@ export const AccountActionsMenu = (props: Props) => {
           key={option.id}
           onClick={() => onClick(option.id)}
         >
-          <ButtonIcon name={option.icon} />
-          <PopupButtonText>{getLocale(option.name)}</PopupButtonText>
+          <MenuItemRow>
+            <MenuItemIcon name={option.icon} />
+            {getLocale(option.name)}
+          </MenuItemRow>
         </PopupButton>
       ))}
-    </StyledWrapper>
+    </ButtonMenu>
   )
 }
 
diff --git a/components/brave_wallet_ui/components/desktop/wallet-menus/account-details-menu.stories.tsx b/components/brave_wallet_ui/components/desktop/wallet-menus/account-details-menu.stories.tsx
new file mode 100644
index 000000000000..099b191a96b9
--- /dev/null
+++ b/components/brave_wallet_ui/components/desktop/wallet-menus/account-details-menu.stories.tsx
@@ -0,0 +1,40 @@
+// Copyright (c) 2024 The Brave Authors. All rights reserved.
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this file,
+// You can obtain one at https://mozilla.org/MPL/2.0/.
+
+import * as React from 'react'
+import { Meta, StoryObj } from '@storybook/react'
+
+// options
+import {
+  AccountDetailsMenuOptions //
+} from '../../../options/account-details-menu-options'
+
+// components
+import {
+  WalletPanelStory //
+} from '../../../stories/wrappers/wallet-panel-story-wrapper'
+import { AccountDetailsMenu } from './account-details-menu'
+
+const meta: Meta<typeof AccountDetailsMenu> = {
+  component: AccountDetailsMenu,
+  args: {},
+  render: (args) => {
+    return (
+      <WalletPanelStory>
+        <AccountDetailsMenu
+          onClickMenuOption={(option) => {
+            alert(option)
+          }}
+          options={AccountDetailsMenuOptions}
+        />
+      </WalletPanelStory>
+    )
+  }
+} satisfies Meta<typeof AccountDetailsMenu>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const _AccountDetailsMenu: Story = {} satisfies Story
diff --git a/components/brave_wallet_ui/components/desktop/wallet-menus/account-details-menu.tsx b/components/brave_wallet_ui/components/desktop/wallet-menus/account-details-menu.tsx
index 1a13e7726aed..12f293131d0a 100644
--- a/components/brave_wallet_ui/components/desktop/wallet-menus/account-details-menu.tsx
+++ b/components/brave_wallet_ui/components/desktop/wallet-menus/account-details-menu.tsx
@@ -16,23 +16,32 @@ import { getLocale } from '../../../../common/locale'
 
 // Styled Components
 import {
-  StyledWrapper,
   PopupButton,
-  PopupButtonText,
-  ButtonIcon
-} from './wellet-menus.style'
+  MenuItemIcon,
+  ButtonMenu,
+  MenuItemRow,
+  INTERACTIVE_ICON_COLOR
+} from './wallet_menus.style'
 import { VerticalDivider, VerticalSpace } from '../../shared/style'
+import { MenuButton } from '../card-headers/shared-card-headers.style'
 
 interface Props {
   options: AccountButtonOptionsObjectType[]
   onClickMenuOption: (option: AccountModalTypes) => void
 }
 
-export const AccountDetailsMenu = (props: Props) => {
-  const { options, onClickMenuOption } = props
-
+export const AccountDetailsMenu = ({ options, onClickMenuOption }: Props) => {
+  // render
   return (
-    <StyledWrapper yPosition={42}>
+    <ButtonMenu>
+      <div slot='anchor-content'>
+        <MenuButton>
+          <MenuItemIcon
+            name='more-vertical'
+            color={INTERACTIVE_ICON_COLOR}
+          />
+        </MenuButton>
+      </div>
       {options.map((option) => (
         <React.Fragment key={option.id}>
           {option.id === 'privateKey' && (
@@ -42,11 +51,13 @@ export const AccountDetailsMenu = (props: Props) => {
             </>
           )}
           <PopupButton onClick={() => onClickMenuOption(option.id)}>
-            <ButtonIcon name={option.icon} />
-            <PopupButtonText>{getLocale(option.name)}</PopupButtonText>
+            <MenuItemRow>
+              <MenuItemIcon name={option.icon} />
+              {getLocale(option.name)}
+            </MenuItemRow>
           </PopupButton>
         </React.Fragment>
       ))}
-    </StyledWrapper>
+    </ButtonMenu>
   )
 }
diff --git a/components/brave_wallet_ui/components/desktop/wallet-menus/account_actions_menu.stories.tsx b/components/brave_wallet_ui/components/desktop/wallet-menus/account_actions_menu.stories.tsx
new file mode 100644
index 000000000000..fdc09549b169
--- /dev/null
+++ b/components/brave_wallet_ui/components/desktop/wallet-menus/account_actions_menu.stories.tsx
@@ -0,0 +1,38 @@
+// Copyright (c) 2024 The Brave Authors. All rights reserved.
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this file,
+// You can obtain one at https://mozilla.org/MPL/2.0/.
+
+import * as React from 'react'
+import { Meta, StoryObj } from '@storybook/react'
+
+// options
+import {
+  AccountButtonOptions //
+} from '../../../options/account-list-button-options'
+
+// components
+import { AccountActionsMenu } from './account-actions-menu'
+import {
+  WalletPanelStory //
+} from '../../../stories/wrappers/wallet-panel-story-wrapper'
+
+const meta: Meta<typeof AccountActionsMenu> = {
+  component: AccountActionsMenu,
+  args: {},
+  render: (args) => {
+    return (
+      <WalletPanelStory>
+        <AccountActionsMenu
+          onClick={() => alert('clicked')}
+          options={AccountButtonOptions}
+        />
+      </WalletPanelStory>
+    )
+  }
+} satisfies Meta<typeof AccountActionsMenu>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const _AccountActionsMenu: Story = {} satisfies Story
diff --git a/components/brave_wallet_ui/components/desktop/wallet-menus/accounts-menu.tsx b/components/brave_wallet_ui/components/desktop/wallet-menus/accounts-menu.tsx
index 1f0bca190771..631fb55f7d9b 100644
--- a/components/brave_wallet_ui/components/desktop/wallet-menus/accounts-menu.tsx
+++ b/components/brave_wallet_ui/components/desktop/wallet-menus/accounts-menu.tsx
@@ -15,33 +15,54 @@ import { getLocale } from '../../../../common/locale'
 
 // Styled Components
 import {
-  StyledWrapper,
   PopupButton,
-  PopupButtonText,
-  ButtonIcon
-} from './wellet-menus.style'
+  MenuItemIcon,
+  MenuItemRow,
+  ButtonMenu,
+  INTERACTIVE_ICON_COLOR,
+  AddIcon,
+  MenuButton
+} from './wallet_menus.style'
 
 export const AccountsMenu = () => {
   // routing
   const history = useHistory()
 
+  // computed
   const isAndroid = loadTimeData.getBoolean('isAndroid') || false
+
+  // render
   return (
-    <StyledWrapper yPosition={42}>
-      {CreateAccountOptions.filter(option => (
-        // Filter out hardware wallet item on Android.
-        !isAndroid || option.name !== 'braveWalletConnectHardwareWallet'
-      )).map((option) => (
+    <ButtonMenu>
+      <div slot='anchor-content'>
+        <MenuButton
+          kind='outline'
+          padding='1px 0px'
+          size='small'
+        >
+          <AddIcon
+            size='18px'
+            color={INTERACTIVE_ICON_COLOR}
+          />
+        </MenuButton>
+      </div>
+      {CreateAccountOptions.filter(
+        (option) =>
+          // Filter out hardware wallet item on Android.
+          !isAndroid || option.name !== 'braveWalletConnectHardwareWallet'
+      ).map((option) => (
         <PopupButton
           key={option.name}
           onClick={() => history.push(option.route)}
           minWidth={240}
         >
-          <ButtonIcon name={option.icon} />
-          <PopupButtonText>{getLocale(option.name)}</PopupButtonText>
+          <MenuItemRow>
+            <MenuItemIcon name={option.icon} />
+            {getLocale(option.name)}
+          </MenuItemRow>
         </PopupButton>
       ))}
-    </StyledWrapper>
+    </ButtonMenu>
   )
 }
 
diff --git a/components/brave_wallet_ui/components/desktop/wallet-menus/accounts_menu.stories.tsx b/components/brave_wallet_ui/components/desktop/wallet-menus/accounts_menu.stories.tsx
new file mode 100644
index 000000000000..0f977e85f115
--- /dev/null
+++ b/components/brave_wallet_ui/components/desktop/wallet-menus/accounts_menu.stories.tsx
@@ -0,0 +1,30 @@
+// Copyright (c) 2024 The Brave Authors. All rights reserved.
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this file,
+// You can obtain one at https://mozilla.org/MPL/2.0/.
+
+import * as React from 'react'
+import { Meta, StoryObj } from '@storybook/react'
+
+// components
+import {
+  WalletPanelStory //
+} from '../../../stories/wrappers/wallet-panel-story-wrapper'
+import { AccountsMenu } from './accounts-menu'
+
+const meta: Meta<typeof AccountsMenu> = {
+  component: AccountsMenu,
+  args: {},
+  render: (args) => {
+    return (
+      <WalletPanelStory>
+        <AccountsMenu />
+      </WalletPanelStory>
+    )
+  }
+} satisfies Meta<typeof AccountsMenu>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const _AccountsMenu: Story = {} satisfies Story
diff --git a/components/brave_wallet_ui/components/desktop/wallet-menus/asset-details-menu.tsx b/components/brave_wallet_ui/components/desktop/wallet-menus/asset-details-menu.tsx
index d3bccafeb335..ffcfbed91507 100644
--- a/components/brave_wallet_ui/components/desktop/wallet-menus/asset-details-menu.tsx
+++ b/components/brave_wallet_ui/components/desktop/wallet-menus/asset-details-menu.tsx
@@ -4,16 +4,19 @@
 // You can obtain one at https://mozilla.org/MPL/2.0/.
 
 import * as React from 'react'
+import ButtonMenu from '@brave/leo/react/buttonMenu'
 
+// utils
 import { getLocale } from '../../../../common/locale'
 
 // Styled Components
 import {
-  StyledWrapper,
   PopupButton,
-  PopupButtonText,
-  ButtonIcon
-} from './wellet-menus.style'
+  MenuItemIcon,
+  MenuButton,
+  INTERACTIVE_ICON_COLOR,
+  MenuItemRow
+} from './wallet_menus.style'
 
 interface Props {
   assetSymbol: string
@@ -23,46 +26,57 @@ interface Props {
   onClickEditToken?: () => void
 }
 
-export const AssetDetailsMenu = (props: Props) => {
-  const {
-    assetSymbol,
-    onClickTokenDetails,
-    onClickViewOnExplorer,
-    onClickHideToken,
-    onClickEditToken
-  } = props
-
+export const AssetDetailsMenu = ({
+  assetSymbol,
+  onClickTokenDetails,
+  onClickViewOnExplorer,
+  onClickHideToken,
+  onClickEditToken
+}: Props) => {
+  // render
   return (
-    <StyledWrapper yPosition={42}>
+    <ButtonMenu>
+      <div slot='anchor-content'>
+        <MenuButton
+          kind='outline'
+          padding='1px 4px'
+        >
+          <MenuItemIcon
+            name='more-vertical'
+            color={INTERACTIVE_ICON_COLOR}
+          />
+        </MenuButton>
+      </div>
+
       <PopupButton onClick={onClickTokenDetails}>
-        <ButtonIcon name='info-outline' />
-        <PopupButtonText>
+        <MenuItemRow>
+          <MenuItemIcon name='info-outline' />
           {getLocale('braveWalletPortfolioTokenDetailsMenuLabel')}
-        </PopupButtonText>
+        </MenuItemRow>
       </PopupButton>
       {onClickEditToken && (
         <PopupButton onClick={onClickEditToken}>
-          <ButtonIcon name='edit-pencil' />
-          <PopupButtonText>
+          <MenuItemRow>
+            <MenuItemIcon name='edit-pencil' />
             {getLocale('braveWalletAllowSpendEditButton')}
-          </PopupButtonText>
+          </MenuItemRow>
         </PopupButton>
       )}
       <PopupButton onClick={onClickViewOnExplorer}>
-        <ButtonIcon name='launch' />
-        <PopupButtonText>
+        <MenuItemRow>
+          <MenuItemIcon name='launch' />
           {getLocale('braveWalletPortfolioViewOnExplorerMenuLabel')}
-        </PopupButtonText>
+        </MenuItemRow>
       </PopupButton>
       <PopupButton onClick={onClickHideToken}>
-        <ButtonIcon name='trash' />
-        <PopupButtonText>
+        <MenuItemRow>
+          <MenuItemIcon name='trash' />
           {getLocale('braveWalletPortfolioHideTokenMenuLabel').replace(
             '$1',
             assetSymbol
           )}
-        </PopupButtonText>
+        </MenuItemRow>
       </PopupButton>
-    </StyledWrapper>
+    </ButtonMenu>
   )
 }
diff --git a/components/brave_wallet_ui/components/desktop/wallet-menus/asset-item-menu.tsx b/components/brave_wallet_ui/components/desktop/wallet-menus/asset-item-menu.tsx
index 30a45cb0562a..75eb66fac5a9 100644
--- a/components/brave_wallet_ui/components/desktop/wallet-menus/asset-item-menu.tsx
+++ b/components/brave_wallet_ui/components/desktop/wallet-menus/asset-item-menu.tsx
@@ -38,11 +38,13 @@ import {
 
 // Styled Components
 import {
-  StyledWrapper,
   PopupButton,
-  PopupButtonText,
-  ButtonIcon
-} from './wellet-menus.style'
+  MenuItemIcon,
+  MoreVerticalIcon,
+  ButtonMenu,
+  MenuButton,
+  MenuItemRow
+} from './wallet_menus.style'
 
 const coinSupportsSwap = (coin: BraveWallet.CoinType) => {
   return [BraveWallet.CoinType.ETH, BraveWallet.CoinType.SOL].includes(coin)
@@ -148,51 +150,69 @@ export const AssetItemMenu = (props: Props) => {
   }, [updateUserAssetVisible, asset])
 
   return (
-    <StyledWrapper yPosition={42}>
+    <ButtonMenu>
+      <div slot='anchor-content'>
+        <MenuButton
+          kind='plain-faint'
+          padding='0px'
+        >
+          <MoreVerticalIcon />
+        </MenuButton>
+      </div>
+
       {isBuySupported && (
         <PopupButton onClick={onClickBuy}>
-          <ButtonIcon name='coins-alt1' />
-          <PopupButtonText>{getLocale('braveWalletBuy')}</PopupButtonText>
+          <MenuItemRow>
+            <MenuItemIcon name='coins-alt1' />
+            {getLocale('braveWalletBuy')}
+          </MenuItemRow>
         </PopupButton>
       )}
       {!isAssetsBalanceZero && (
         <PopupButton onClick={onClickSend}>
-          <ButtonIcon name='send' />
-          <PopupButtonText>{getLocale('braveWalletSend')}</PopupButtonText>
+          <MenuItemRow>
+            <MenuItemIcon name='send' />
+            {getLocale('braveWalletSend')}
+          </MenuItemRow>
         </PopupButton>
       )}
       {isSwapSupported && !isAssetsBalanceZero && (
         <PopupButton onClick={onClickSwap}>
-          <ButtonIcon name='currency-exchange' />
-          <PopupButtonText>{getLocale('braveWalletSwap')}</PopupButtonText>
+          <MenuItemRow>
+            <MenuItemIcon name='currency-exchange' />
+            {getLocale('braveWalletSwap')}
+          </MenuItemRow>
         </PopupButton>
       )}
       <PopupButton onClick={onClickDeposit}>
-        <ButtonIcon name='money-bag-coins' />
-        <PopupButtonText>
+        <MenuItemRow>
+          <MenuItemIcon name='money-bag-coins' />
           {getLocale('braveWalletAccountsDeposit')}
-        </PopupButtonText>
+        </MenuItemRow>
       </PopupButton>
       {isSellSupported && (
         <PopupButton onClick={onClickSell}>
-          <ButtonIcon name='usd-circle' />
-          <PopupButtonText>{getLocale('braveWalletSell')}</PopupButtonText>
+          <MenuItemRow>
+            <MenuItemIcon name='usd-circle' />
+            {getLocale('braveWalletSell')}
+          </MenuItemRow>
         </PopupButton>
       )}
       {onClickEditToken && (
         <PopupButton onClick={onClickEditToken}>
-          <ButtonIcon name='edit-pencil' />
-          <PopupButtonText>
+          <MenuItemRow>
+            <MenuItemIcon name='edit-pencil' />
             {getLocale('braveWalletAllowSpendEditButton')}
-          </PopupButtonText>
+          </MenuItemRow>
         </PopupButton>
       )}
       <PopupButton onClick={onClickHide}>
-        <ButtonIcon name='eye-off' />
-        <PopupButtonText>
+        <MenuItemRow>
+          <MenuItemIcon name='eye-off' />
           {getLocale('braveWalletConfirmHidingToken')}
-        </PopupButtonText>
+        </MenuItemRow>
       </PopupButton>
+
       {showSellModal && selectedSellAsset && (
         <SellAssetModal
           selectedAsset={selectedSellAsset}
@@ -205,6 +225,6 @@ export const AssetItemMenu = (props: Props) => {
           sellAssetBalance={assetBalance}
         />
       )}
-    </StyledWrapper>
+    </ButtonMenu>
   )
 }
diff --git a/components/brave_wallet_ui/components/desktop/wallet-menus/asset_details_menu.stories.tsx b/components/brave_wallet_ui/components/desktop/wallet-menus/asset_details_menu.stories.tsx
new file mode 100644
index 000000000000..815ba7620384
--- /dev/null
+++ b/components/brave_wallet_ui/components/desktop/wallet-menus/asset_details_menu.stories.tsx
@@ -0,0 +1,45 @@
+// Copyright (c) 2024 The Brave Authors. All rights reserved.
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this file,
+// You can obtain one at https://mozilla.org/MPL/2.0/.
+
+import * as React from 'react'
+import { Meta, StoryObj } from '@storybook/react'
+
+// Components
+import {
+  WalletPanelStory //
+} from '../../../stories/wrappers/wallet-panel-story-wrapper'
+import { AssetDetailsMenu } from './asset-details-menu'
+import { mockBasicAttentionToken } from '../../../stories/mock-data/mock-asset-options'
+
+const meta: Meta<typeof AssetDetailsMenu> = {
+  component: AssetDetailsMenu,
+  args: {},
+  render: (args) => {
+    return (
+      <WalletPanelStory>
+        <AssetDetailsMenu
+          assetSymbol={mockBasicAttentionToken.symbol}
+          onClickHideToken={() => {
+            alert('HideToken')
+          }}
+          onClickTokenDetails={() => {
+            alert('TokenDetails')
+          }}
+          onClickViewOnExplorer={() => {
+            alert('ViewOnExplorer')
+          }}
+          onClickEditToken={() => {
+            alert('EditToken')
+          }}
+        />
+      </WalletPanelStory>
+    )
+  }
+} satisfies Meta<typeof AssetDetailsMenu>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const _AssetDetailsMenu: Story = {} satisfies Story
diff --git a/components/brave_wallet_ui/components/desktop/wallet-menus/asset_item_menu.stories.tsx b/components/brave_wallet_ui/components/desktop/wallet-menus/asset_item_menu.stories.tsx
new file mode 100644
index 000000000000..ebe17351037d
--- /dev/null
+++ b/components/brave_wallet_ui/components/desktop/wallet-menus/asset_item_menu.stories.tsx
@@ -0,0 +1,37 @@
+// Copyright (c) 2024 The Brave Authors. All rights reserved.
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this file,
+// You can obtain one at https://mozilla.org/MPL/2.0/.
+
+import * as React from 'react'
+import { Meta, StoryObj } from '@storybook/react'
+
+// components
+import {
+  WalletPanelStory //
+} from '../../../stories/wrappers/wallet-panel-story-wrapper'
+import { AssetItemMenu } from './asset-item-menu'
+import { mockBasicAttentionToken } from '../../../stories/mock-data/mock-asset-options'
+import { mockAccount } from '../../../common/constants/mocks'
+
+const meta: Meta<typeof AssetItemMenu> = {
+  component: AssetItemMenu,
+  args: {},
+  render: (args) => {
+    return (
+      <WalletPanelStory>
+        <AssetItemMenu
+          asset={mockBasicAttentionToken}
+          assetBalance='1000'
+          account={mockAccount}
+          onClickEditToken={() => alert('edit')}
+        />
+      </WalletPanelStory>
+    )
+  }
+} satisfies Meta<typeof AssetItemMenu>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const _AssetItemMenu: Story = {} satisfies Story
diff --git a/components/brave_wallet_ui/components/desktop/wallet-menus/line-chart-controls-menu.tsx b/components/brave_wallet_ui/components/desktop/wallet-menus/line-chart-controls-menu.tsx
index 2200bd26a7c9..3eb8bf37ab9c 100644
--- a/components/brave_wallet_ui/components/desktop/wallet-menus/line-chart-controls-menu.tsx
+++ b/components/brave_wallet_ui/components/desktop/wallet-menus/line-chart-controls-menu.tsx
@@ -19,7 +19,7 @@ import {
   LineChartWrapper,
   LineChartButton,
   PopupButtonText
-} from './wellet-menus.style'
+} from './wallet_menus.style'
 
 export interface Props {
   onClick: (id: BraveWallet.AssetPriceTimeframe) => void
diff --git a/components/brave_wallet_ui/components/desktop/wallet-menus/portfolio-account-menu.tsx b/components/brave_wallet_ui/components/desktop/wallet-menus/portfolio-account-menu.tsx
index 2ed725ee07a9..cecfc3b785c2 100644
--- a/components/brave_wallet_ui/components/desktop/wallet-menus/portfolio-account-menu.tsx
+++ b/components/brave_wallet_ui/components/desktop/wallet-menus/portfolio-account-menu.tsx
@@ -13,7 +13,7 @@ import {
   PopupButton,
   PopupButtonText,
   ButtonIcon
-} from './wellet-menus.style'
+} from './wallet_menus.style'
 
 interface Props {
   onClickDeposit: () => void
diff --git a/components/brave_wallet_ui/components/desktop/wallet-menus/portfolio_actions_more_menu.tsx b/components/brave_wallet_ui/components/desktop/wallet-menus/portfolio_actions_more_menu.tsx
index b389a4aece4c..9fd1d695cc69 100644
--- a/components/brave_wallet_ui/components/desktop/wallet-menus/portfolio_actions_more_menu.tsx
+++ b/components/brave_wallet_ui/components/desktop/wallet-menus/portfolio_actions_more_menu.tsx
@@ -20,7 +20,7 @@ import {
   PopupButton,
   PopupButtonText,
   ButtonIcon
-} from './wellet-menus.style'
+} from './wallet_menus.style'
 
 interface Props {
   onClick: (option: NavOption) => void
diff --git a/components/brave_wallet_ui/components/desktop/wallet-menus/rewards_menu.stories.tsx b/components/brave_wallet_ui/components/desktop/wallet-menus/rewards_menu.stories.tsx
new file mode 100644
index 000000000000..c862a3dc568d
--- /dev/null
+++ b/components/brave_wallet_ui/components/desktop/wallet-menus/rewards_menu.stories.tsx
@@ -0,0 +1,30 @@
+// Copyright (c) 2024 The Brave Authors. All rights reserved.
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this file,
+// You can obtain one at https://mozilla.org/MPL/2.0/.
+
+import * as React from 'react'
+import { Meta, StoryObj } from '@storybook/react'
+
+// components
+import {
+  WalletPanelStory //
+} from '../../../stories/wrappers/wallet-panel-story-wrapper'
+import { RewardsMenu } from './rewards_menu'
+
+const meta: Meta<typeof RewardsMenu> = {
+  component: RewardsMenu,
+  args: {},
+  render: (args) => {
+    return (
+      <WalletPanelStory>
+        <RewardsMenu />
+      </WalletPanelStory>
+    )
+  }
+} satisfies Meta<typeof RewardsMenu>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const _RewardsMenu: Story = {} satisfies Story
diff --git a/components/brave_wallet_ui/components/desktop/wallet-menus/rewards_menu.tsx b/components/brave_wallet_ui/components/desktop/wallet-menus/rewards_menu.tsx
index b7e1f5d080c2..f83fb8fd4ed3 100644
--- a/components/brave_wallet_ui/components/desktop/wallet-menus/rewards_menu.tsx
+++ b/components/brave_wallet_ui/components/desktop/wallet-menus/rewards_menu.tsx
@@ -16,11 +16,13 @@ import { getLocale } from '../../../../common/locale'
 
 // Styled Components
 import {
-  StyledWrapper,
   PopupButton,
-  PopupButtonText,
-  ButtonIcon
-} from './wellet-menus.style'
+  MenuItemIcon,
+  ButtonMenu,
+  MenuButton,
+  MoreVerticalIcon,
+  MenuItemRow
+} from './wallet_menus.style'
 
 const onClickRewardsSettings = () => {
   chrome.tabs.create(
@@ -67,17 +69,27 @@ export const RewardsMenu = () => {
   }
 
   return (
-    <StyledWrapper yPosition={26}>
+    <ButtonMenu>
+      <div slot='anchor-content'>
+        <MenuButton
+          kind='plain-faint'
+          padding='0px'
+        >
+          <MoreVerticalIcon />
+        </MenuButton>
+      </div>
       <PopupButton onClick={onClickOnProviderAccount}>
-        <ButtonIcon name='launch' />
-        <PopupButtonText>{providerButtonText}</PopupButtonText>
+        <MenuItemRow>
+          <MenuItemIcon name='launch' />
+          {providerButtonText}
+        </MenuItemRow>
       </PopupButton>
       <PopupButton onClick={onClickRewardsSettings}>
-        <ButtonIcon name='product-bat-outline' />
-        <PopupButtonText>
+        <MenuItemRow>
+          <MenuItemIcon name='product-bat-outline' />
           {getLocale('braveWalletRewardsSettings')}
-        </PopupButtonText>
+        </MenuItemRow>
       </PopupButton>
-    </StyledWrapper>
+    </ButtonMenu>
   )
 }
diff --git a/components/brave_wallet_ui/components/desktop/wallet-menus/wellet-menus.style.ts b/components/brave_wallet_ui/components/desktop/wallet-menus/wallet_menus.style.ts
similarity index 64%
rename from components/brave_wallet_ui/components/desktop/wallet-menus/wellet-menus.style.ts
rename to components/brave_wallet_ui/components/desktop/wallet-menus/wallet_menus.style.ts
index deba9157ba5d..1418e5346d34 100644
--- a/components/brave_wallet_ui/components/desktop/wallet-menus/wellet-menus.style.ts
+++ b/components/brave_wallet_ui/components/desktop/wallet-menus/wallet_menus.style.ts
@@ -5,14 +5,35 @@
 
 import styled from 'styled-components'
 import * as leo from '@brave/leo/tokens/css/variables'
-import Icon from '@brave/leo/react/icon'
-import { WalletButton, Row } from '../../shared/style'
+import NalaButtonMenu from '@brave/leo/react/buttonMenu'
+
+// components
+import { Icon } from '../../nala/icon'
+import { Button } from '../../nala/button'
+
+// shared styles
+import { Row } from '../../shared/style'
 import {
   layoutPanelWidth,
   layoutSmallWidth
 } from '../wallet-page-wrapper/wallet-page-wrapper.style'
 
-export const StyledWrapper = styled.div<{
+export const ButtonMenu = styled(NalaButtonMenu)`
+  --leo-menu-control-min-width: 220px;
+`
+
+export const MoreVerticalIcon = styled(Icon).attrs({
+  name: 'more-vertical',
+  size: '24px',
+  color: leo.color.icon.default
+})``
+
+export const AddIcon = styled(Icon).attrs({ name: 'plus-add' })``
+
+export const MenuButton = Button
+
+// TODO: delete
+export const SStyledWrapper = styled.div<{
   yPosition?: number
   right?: number
   padding?: string
@@ -32,28 +53,25 @@ export const StyledWrapper = styled.div<{
   z-index: 20;
 `
 
-export const PopupButton = styled(WalletButton)<{
-  minWidth?: number
-}>`
+export const PopupButton = styled('leo-menu-item')<{
+  minWidth?: number // TODO: delete
+}>``
+
+export const MenuItemRow = styled.div`
   display: flex;
-  align-items: center;
   justify-content: flex-start;
-  text-align: left;
-  cursor: pointer;
-  min-width: ${(p) => (p.minWidth !== undefined ? p.minWidth : 220)}px;
-  border-radius: 8px;
-  outline: none;
-  border: none;
-  background: none;
-  padding: 12px 8px;
-  margin: 0px 0px 8px 0px;
-  background-color: transparent;
-  width: 100%;
-  &:hover {
-    background-color: ${leo.color.divider.subtle};
-  }
+  align-items: center;
+  gap: 16px;
+`
+
+export const MenuOptionRow = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 16px;
 `
 
+// TODO: delete
 export const PopupButtonText = styled.span`
   flex: 1;
   font-family: Poppins;
@@ -64,24 +82,15 @@ export const PopupButtonText = styled.span`
   color: ${leo.color.text.primary};
 `
 
-export const ButtonIcon = styled(Icon)`
-  --leo-icon-size: 18px;
-  color: ${leo.color.icon.default};
-  margin-right: 16px;
-`
+export const MenuItemIcon = styled(Icon).attrs({ size: '18px' })``
 
-export const ToggleRow = styled.label`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  cursor: pointer;
-  width: 220px;
-  padding: 12px 8px;
-  margin: 0px 0px 8px 0px;
-  background-color: transparent;
-`
+export const INTERACTIVE_ICON_COLOR = leo.color.icon.interactive
+
+export const ToggleRow = styled('leo-option').attrs({
+  'data-is-interactive': true
+})``
 
-export const LineChartWrapper = styled(StyledWrapper)`
+export const LineChartWrapper = styled(SStyledWrapper)`
   padding: 4px;
   gap: 4px;
   @media screen and (max-width: ${layoutSmallWidth}px) {
diff --git a/components/brave_wallet_ui/components/desktop/wallet-menus/wallet_settings_menu.stories.tsx b/components/brave_wallet_ui/components/desktop/wallet-menus/wallet_settings_menu.stories.tsx
new file mode 100644
index 000000000000..33178150343e
--- /dev/null
+++ b/components/brave_wallet_ui/components/desktop/wallet-menus/wallet_settings_menu.stories.tsx
@@ -0,0 +1,30 @@
+// Copyright (c) 2024 The Brave Authors. All rights reserved.
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this file,
+// You can obtain one at https://mozilla.org/MPL/2.0/.
+
+import * as React from 'react'
+import { Meta, StoryObj } from '@storybook/react'
+
+// components
+import {
+  WalletPanelStory //
+} from '../../../stories/wrappers/wallet-panel-story-wrapper'
+import { WalletSettingsMenu } from './wallet_settings_menu'
+
+const meta: Meta<typeof WalletSettingsMenu> = {
+  component: WalletSettingsMenu,
+  args: {},
+  render: (args) => {
+    return (
+      <WalletPanelStory>
+        <WalletSettingsMenu anchorButtonKind='filled' />
+      </WalletPanelStory>
+    )
+  }
+} satisfies Meta<typeof WalletSettingsMenu>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const _WalletSettingsMenu: Story = {} satisfies Story
diff --git a/components/brave_wallet_ui/components/desktop/wallet-menus/wallet_settings_menu.tsx b/components/brave_wallet_ui/components/desktop/wallet-menus/wallet_settings_menu.tsx
index 0909d8cbca42..a66ea1951b54 100644
--- a/components/brave_wallet_ui/components/desktop/wallet-menus/wallet_settings_menu.tsx
+++ b/components/brave_wallet_ui/components/desktop/wallet-menus/wallet_settings_menu.tsx
@@ -6,6 +6,7 @@
 import * as React from 'react'
 import { useLocation, useHistory } from 'react-router-dom'
 import Toggle from '@brave/leo/react/toggle'
+import * as leo from '@brave/leo/tokens/css/variables'
 
 // Selectors
 import { UISelectors } from '../../../common/selectors'
@@ -36,24 +37,39 @@ import { openWalletSettings } from '../../../utils/routes-utils'
 import { useSyncedLocalStorage } from '../../../common/hooks/use_local_storage'
 
 // Styled Components
+import { VerticalDivider } from '../../shared/style'
 import {
-  StyledWrapper,
+  MenuItemIcon,
+  ButtonMenu,
+  MenuButton,
+  MenuItemRow,
+  MenuOptionRow,
+  MoreVerticalIcon,
   PopupButton,
-  PopupButtonText,
-  ButtonIcon,
-  ToggleRow,
-  SectionLabel
-} from './wellet-menus.style'
-import { VerticalDivider, Row, Column } from '../../shared/style'
+  SectionLabel,
+  ToggleRow
+} from './wallet_menus.style'
 
 export interface Props {
-  onClosePopup?: () => void
-  yPosition?: number
+  anchorButtonKind?: 'filled' | 'plain-faint'
 }
 
-export const WalletSettingsMenu = (props: Props) => {
-  const { onClosePopup, yPosition } = props
+const onClickHelpCenter = () => {
+  chrome.tabs.create(
+    {
+      url: 'https://support.brave.com/hc/en-us/categories/360001059151-Brave-Wallet'
+    },
+    () => {
+      if (chrome.runtime.lastError) {
+        console.error('tabs.create failed: ' + chrome.runtime.lastError.message)
+      }
+    }
+  )
+}
 
+export const WalletSettingsMenu = ({
+  anchorButtonKind = 'plain-faint'
+}: Props) => {
   // Selectors
   const isPanel = useSafeUISelector(UISelectors.isPanel)
 
@@ -93,35 +109,7 @@ export const WalletSettingsMenu = (props: Props) => {
         console.error('tabs.create failed: ' + chrome.runtime.lastError.message)
       }
     })
-    if (onClosePopup) {
-      onClosePopup()
-    }
-  }, [selectedNetwork, onClosePopup])
-
-  const onClickHelpCenter = React.useCallback(() => {
-    chrome.tabs.create(
-      {
-        url: 'https://support.brave.com/hc/en-us/categories/360001059151-Brave-Wallet'
-      },
-      () => {
-        if (chrome.runtime.lastError) {
-          console.error(
-            'tabs.create failed: ' + chrome.runtime.lastError.message
-          )
-        }
-      }
-    )
-    if (onClosePopup) {
-      onClosePopup()
-    }
-  }, [onClosePopup])
-
-  const onClickSettings = React.useCallback(() => {
-    openWalletSettings()
-    if (onClosePopup) {
-      onClosePopup()
-    }
-  }, [onClosePopup])
+  }, [selectedNetwork])
 
   // Methods
   const onToggleHideGraph = React.useCallback(() => {
@@ -173,141 +161,131 @@ export const WalletSettingsMenu = (props: Props) => {
   }
 
   return (
-    <StyledWrapper
-      yPosition={yPosition}
-      padding='0px'
-    >
-      <Column
-        fullWidth={true}
-        padding='8px 8px 0px 8px'
-      >
-        <PopupButton
-          onClick={async () => {
-            await lockWallet()
-          }}
+    <ButtonMenu>
+      <div slot='anchor-content'>
+        <MenuButton
+          kind={anchorButtonKind}
+          padding={anchorButtonKind === 'filled' ? '1px 2px' : '0px'}
+          buttonColor={leo.color.container.background}
         >
-          <ButtonIcon name='lock' />
-          <PopupButtonText>
-            {getLocale('braveWalletWalletPopupLock')}
-          </PopupButtonText>
-        </PopupButton>
-
-        <PopupButton onClick={onClickBackup}>
-          <ButtonIcon name='safe' />
-          <PopupButtonText>
-            {getLocale('braveWalletBackupButton')}
-          </PopupButtonText>
-        </PopupButton>
-
-        {(selectedNetwork?.coin === BraveWallet.CoinType.ETH ||
-          selectedNetwork?.coin === BraveWallet.CoinType.SOL) && (
-          <PopupButton onClick={onClickConnectedSites}>
-            <ButtonIcon name='link-normal' />
-            <PopupButtonText>
-              {getLocale('braveWalletWalletPopupConnectedSites')}
-            </PopupButtonText>
-          </PopupButton>
-        )}
-
-        <PopupButton onClick={onClickSettings}>
-          <ButtonIcon name='settings' />
-          <PopupButtonText>
-            {getLocale('braveWalletWalletPopupSettings')}
-          </PopupButtonText>
+          <MoreVerticalIcon />
+        </MenuButton>
+      </div>
+      <PopupButton
+        onClick={async () => {
+          await lockWallet()
+        }}
+      >
+        <MenuItemRow>
+          <MenuItemIcon name='lock' />
+          {getLocale('braveWalletWalletPopupLock')}
+        </MenuItemRow>
+      </PopupButton>
+
+      <PopupButton onClick={onClickBackup}>
+        <MenuItemRow>
+          <MenuItemIcon name='safe' />
+          {getLocale('braveWalletBackupButton')}
+        </MenuItemRow>
+      </PopupButton>
+
+      {(selectedNetwork?.coin === BraveWallet.CoinType.ETH ||
+        selectedNetwork?.coin === BraveWallet.CoinType.SOL) && (
+        <PopupButton onClick={onClickConnectedSites}>
+          <MenuItemRow>
+            <MenuItemIcon name='link-normal' />
+            {getLocale('braveWalletWalletPopupConnectedSites')}
+          </MenuItemRow>
         </PopupButton>
-      </Column>
-
-      {(walletLocation === WalletRoutes.PortfolioNFTs ||
-        walletLocation === WalletRoutes.PortfolioAssets) && (
-        <>
-          <SectionLabel justifyContent='flex-start'>
-            {getLocale('braveWalletPortfolioSettings')}
-          </SectionLabel>
-          <Column
-            fullWidth={true}
-            padding='8px 8px 0px 8px'
-          >
-            <ToggleRow onClick={onToggleHideBalances}>
-              <Row>
-                <ButtonIcon name='eye-on' />
-                <PopupButtonText>
-                  {getLocale('braveWalletWalletPopupHideBalances')}
-                </PopupButtonText>
-                <Toggle
-                  checked={!hidePortfolioBalances}
-                  onChange={onToggleHideBalances}
-                  size='small'
-                />
-              </Row>
-            </ToggleRow>
-
-            <ToggleRow onClick={onToggleHideGraph}>
-              <Row>
-                <ButtonIcon name='graph' />
-                <PopupButtonText>
-                  {getLocale('braveWalletWalletPopupShowGraph')}
-                </PopupButtonText>
-              </Row>
-              <Toggle
-                checked={!hidePortfolioGraph}
-                onChange={onToggleHideGraph}
-                size='small'
-              />
-            </ToggleRow>
-
-            <ToggleRow onClick={onToggleHideNFTsTab}>
-              <Row>
-                <ButtonIcon name='nft' />
-                <PopupButtonText>
-                  {getLocale('braveWalletWalletNFTsTab')}
-                </PopupButtonText>
-              </Row>
-              <Toggle
-                checked={!hidePortfolioNFTsTab}
-                onChange={onToggleHideNFTsTab}
-                size='small'
-              />
-            </ToggleRow>
-          </Column>
-        </>
       )}
 
+      <PopupButton onClick={openWalletSettings}>
+        <MenuItemRow>
+          <MenuItemIcon name='settings' />
+          {getLocale('braveWalletWalletPopupSettings')}
+        </MenuItemRow>
+      </PopupButton>
+
+      {/* {(walletLocation === WalletRoutes.PortfolioNFTs ||
+        walletLocation === WalletRoutes.PortfolioAssets) && ( */}
+      <>
+        <SectionLabel justifyContent='flex-start'>
+          {getLocale('braveWalletPortfolioSettings')}
+        </SectionLabel>
+
+        <ToggleRow>
+          <MenuOptionRow onClick={onToggleHideBalances}>
+            <MenuItemRow>
+              <MenuItemIcon name='eye-on' />
+              {getLocale('braveWalletWalletPopupHideBalances')}
+            </MenuItemRow>
+            <Toggle
+              checked={!hidePortfolioBalances}
+              onChange={onToggleHideBalances}
+              size='small'
+            />
+          </MenuOptionRow>
+        </ToggleRow>
+
+        <ToggleRow>
+          <MenuOptionRow onClick={onToggleHideGraph}>
+            <MenuItemRow>
+              <MenuItemIcon name='graph' />
+              {getLocale('braveWalletWalletPopupShowGraph')}
+            </MenuItemRow>
+            <Toggle
+              checked={!hidePortfolioGraph}
+              onChange={onToggleHideGraph}
+              size='small'
+            />
+          </MenuOptionRow>
+        </ToggleRow>
+
+        <ToggleRow>
+          <MenuOptionRow onClick={onToggleHideNFTsTab}>
+            <MenuItemRow>
+              <MenuItemIcon name='nft' />
+              {getLocale('braveWalletWalletNFTsTab')}
+            </MenuItemRow>
+            <Toggle
+              checked={!hidePortfolioNFTsTab}
+              onChange={onToggleHideNFTsTab}
+              size='small'
+            />
+          </MenuOptionRow>
+        </ToggleRow>
+      </>
+      {/* )} */}
+
       {walletLocation === WalletRoutes.Accounts && isPanel && (
         <>
           <SectionLabel justifyContent='flex-start'>
             {getLocale('braveWalletAccountSettings')}
           </SectionLabel>
-          <Column
-            fullWidth={true}
-            padding='8px 8px 0px 8px'
-          >
-            {CreateAccountOptions.map((option) => (
-              <PopupButton
-                key={option.name}
-                onClick={() => onClickRoute(option.route)}
-                minWidth={240}
-              >
-                <ButtonIcon name={option.icon} />
-                <PopupButtonText>{getLocale(option.name)}</PopupButtonText>
-              </PopupButton>
-            ))}
-          </Column>
+
+          {CreateAccountOptions.map((option) => (
+            <PopupButton
+              key={option.name}
+              onClick={() => onClickRoute(option.route)}
+              minWidth={240}
+            >
+              <MenuItemRow>
+                <MenuItemIcon name={option.icon} />
+                {getLocale(option.name)}
+              </MenuItemRow>
+            </PopupButton>
+          ))}
         </>
       )}
 
       <VerticalDivider />
 
-      <Column
-        fullWidth={true}
-        padding='8px 8px 0px 8px'
-      >
-        <PopupButton onClick={onClickHelpCenter}>
-          <ButtonIcon name='help-outline' />
-          <PopupButtonText>
-            {getLocale('braveWalletHelpCenter')}
-          </PopupButtonText>
-        </PopupButton>
-      </Column>
-    </StyledWrapper>
+      <PopupButton onClick={onClickHelpCenter}>
+        <MenuItemRow>
+          <MenuItemIcon name='help-outline' />
+          {getLocale('braveWalletHelpCenter')}
+        </MenuItemRow>
+      </PopupButton>
+    </ButtonMenu>
   )
 }
diff --git a/components/brave_wallet_ui/components/nala/button.tsx b/components/brave_wallet_ui/components/nala/button.tsx
new file mode 100644
index 000000000000..9d5a50e2091a
--- /dev/null
+++ b/components/brave_wallet_ui/components/nala/button.tsx
@@ -0,0 +1,21 @@
+// Copyright (c) 2024 The Brave Authors. All rights reserved.
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this file,
+// You can obtain one at https://mozilla.org/MPL/2.0/.
+
+import styled from 'styled-components'
+import NalaButton, { ButtonProps } from '@brave/leo/react/button'
+
+type CustomButtonType = React.ComponentType<
+  React.PropsWithChildren<
+    ButtonProps<undefined, boolean> & {
+      padding?: string
+      buttonColor?: string
+    }
+  >
+>
+
+export const Button = styled<CustomButtonType>(NalaButton)`
+  --leo-button-padding: ${(p) => p.padding || 'unset'};
+  --leo-button-color: ${(p) => p.buttonColor || 'unset'};
+`
diff --git a/components/brave_wallet_ui/components/nala/icon.tsx b/components/brave_wallet_ui/components/nala/icon.tsx
new file mode 100644
index 000000000000..b82cb891fba8
--- /dev/null
+++ b/components/brave_wallet_ui/components/nala/icon.tsx
@@ -0,0 +1,21 @@
+// Copyright (c) 2024 The Brave Authors. All rights reserved.
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this file,
+// You can obtain one at https://mozilla.org/MPL/2.0/.
+
+import styled from 'styled-components'
+import NalaIcon, { IconProps } from '@brave/leo/react/icon'
+
+type CustomIconType = React.ComponentType<
+  React.PropsWithChildren<
+    IconProps & {
+      size?: string
+      color?: string
+    }
+  >
+>
+
+export const Icon = styled<CustomIconType>(NalaIcon)`
+  --leo-icon-size: ${(p) => p.size || 'unset'};
+  --leo-icon-color: ${(p) => p.color || 'unset'};
+`
diff --git a/components/brave_wallet_ui/page/screens/shared-screen-components/tab-header/tab-header.style.ts b/components/brave_wallet_ui/page/screens/shared-screen-components/tab-header/tab-header.style.ts
index bc4af1ba9b6f..81d763a285d8 100644
--- a/components/brave_wallet_ui/page/screens/shared-screen-components/tab-header/tab-header.style.ts
+++ b/components/brave_wallet_ui/page/screens/shared-screen-components/tab-header/tab-header.style.ts
@@ -4,15 +4,13 @@
 // You can obtain one at https://mozilla.org/MPL/2.0/.
 
 import styled from 'styled-components'
-import * as leo from '@brave/leo/tokens/css/variables'
-import Icon from '@brave/leo/react/icon'
 
 // Assets
 import BraveLogoLight from '../../send/assets/brave-logo-light.svg'
 import BraveLogoDark from '../../send/assets/brave-logo-dark.svg'
 
 // Shared Styles
-import { StyledDiv, StyledButton } from '../../send/shared.styles'
+import { StyledDiv } from '../../send/shared.styles'
 
 export const HeaderWrapper = styled.div`
   display: flex;
@@ -40,26 +38,3 @@ export const BraveLogo = styled(StyledDiv)`
     background-image: url(${BraveLogoDark});
   }
 `
-
-export const SettingsWrapper = styled(StyledDiv)`
-  position: relative;
-`
-
-export const SettingsButton = styled(StyledButton)`
-  background-color: ${leo.color.container.background};
-  border-radius: 12px;
-  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05);
-  height: 40px;
-  width: 40px;
-  &:hover {
-    background-color: ${leo.color.container.interactive};
-  }
-  @media (prefers-color-scheme: dark) {
-    box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.36);
-  }
-`
-
-export const SettingsIcon = styled(Icon)`
-  --leo-icon-size: 20px;
-  color: ${leo.color.icon.default};
-`
diff --git a/components/brave_wallet_ui/page/screens/shared-screen-components/tab-header/tab-header.tsx b/components/brave_wallet_ui/page/screens/shared-screen-components/tab-header/tab-header.tsx
index 48623508dc46..bb21db163c43 100644
--- a/components/brave_wallet_ui/page/screens/shared-screen-components/tab-header/tab-header.tsx
+++ b/components/brave_wallet_ui/page/screens/shared-screen-components/tab-header/tab-header.tsx
@@ -5,17 +5,8 @@
 
 import * as React from 'react'
 
-// Hooks
-import { useOnClickOutside } from '../../../../common/hooks/useOnClickOutside'
-
 // Styled Components
-import {
-  HeaderWrapper,
-  BraveLogo,
-  SettingsButton,
-  SettingsIcon,
-  SettingsWrapper
-} from './tab-header.style'
+import { HeaderWrapper, BraveLogo } from './tab-header.style'
 import { Row } from '../../send/shared.styles'
 
 // Components
@@ -30,19 +21,6 @@ export interface Props {
 export const TabHeader = (props: Props) => {
   const { hideHeaderMenu } = props
 
-  // State
-  const [showSettings, setShowSettings] = React.useState<boolean>(false)
-
-  // Refs
-  const settingsModalRef = React.useRef<HTMLDivElement>(null)
-
-  // Hooks
-  useOnClickOutside(
-    settingsModalRef,
-    () => setShowSettings(false),
-    showSettings
-  )
-
   // render
   return (
     <HeaderWrapper>
@@ -52,19 +30,7 @@ export const TabHeader = (props: Props) => {
       >
         <BraveLogo />
       </Row>
-      {!hideHeaderMenu && (
-        <SettingsWrapper ref={settingsModalRef}>
-          <SettingsButton onClick={() => setShowSettings((prev) => !prev)}>
-            <SettingsIcon name='more-vertical' />
-          </SettingsButton>
-          {showSettings && (
-            <WalletSettingsMenu
-              onClosePopup={() => setShowSettings(false)}
-              yPosition={50}
-            />
-          )}
-        </SettingsWrapper>
-      )}
+      {!hideHeaderMenu && <WalletSettingsMenu anchorButtonKind='filled' />}
     </HeaderWrapper>
   )
 }
diff --git a/package-lock.json b/package-lock.json
index 272b0bb3d43f..7b883fffd13c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,7 @@
       "license": "MPL-2.0",
       "dependencies": {
         "@brave/brave-ui": "0.40.6",
-        "@brave/leo": "github:brave/leo#63e98a1bb14cf87dcb8cbd4436e9e38615840447",
+        "@brave/leo": "github:brave/leo#button-menu-fixes",
         "@brave/leo-sf-symbols": "github:brave/leo-sf-symbols#8685eec0851afa96d23dd424cd152854476e585d",
         "@brave/wallet-standard-brave": "0.0.13",
         "@dnd-kit/core": "6.0.5",
@@ -2214,8 +2214,7 @@
     },
     "node_modules/@brave/leo": {
       "version": "0.0.1",
-      "resolved": "git+ssh://git@github.com/brave/leo.git#63e98a1bb14cf87dcb8cbd4436e9e38615840447",
-      "integrity": "sha512-iAz07aMlTfMeL1qC1BmgjBLyUGciTY+mWKhiSA4MlxifbmhTslmz/oIiJD3/ulxB3jSnuvYuhBvQuHpCjAQKKA==",
+      "resolved": "git+ssh://git@github.com/brave/leo.git#5af67cb8fceea3a2661723ed21044e888f9a2624",
       "dependencies": {
         "@storybook/test": "8.1.11",
         "svelte": "4.2.18",
@@ -29789,9 +29788,8 @@
       }
     },
     "@brave/leo": {
-      "version": "git+ssh://git@github.com/brave/leo.git#63e98a1bb14cf87dcb8cbd4436e9e38615840447",
-      "integrity": "sha512-iAz07aMlTfMeL1qC1BmgjBLyUGciTY+mWKhiSA4MlxifbmhTslmz/oIiJD3/ulxB3jSnuvYuhBvQuHpCjAQKKA==",
-      "from": "@brave/leo@github:brave/leo#63e98a1bb14cf87dcb8cbd4436e9e38615840447",
+      "version": "git+ssh://git@github.com/brave/leo.git#5af67cb8fceea3a2661723ed21044e888f9a2624",
+      "from": "@brave/leo@github:brave/leo#button-menu-fixes",
       "requires": {
         "@storybook/test": "8.1.11",
         "svelte": "4.2.18",
diff --git a/package.json b/package.json
index 1b7d294edf22..873611714fc0 100644
--- a/package.json
+++ b/package.json
@@ -174,7 +174,7 @@
   },
   "dependencies": {
     "@brave/brave-ui": "0.40.6",
-    "@brave/leo": "github:brave/leo#63e98a1bb14cf87dcb8cbd4436e9e38615840447",
+    "@brave/leo": "github:brave/leo#button-menu-fixes",
     "@brave/leo-sf-symbols": "github:brave/leo-sf-symbols#8685eec0851afa96d23dd424cd152854476e585d",
     "@brave/wallet-standard-brave": "0.0.13",
     "@dnd-kit/core": "6.0.5",