diff --git a/packages/web/src/components/nav/mobile/ConnectedNavBar.tsx b/packages/web/src/components/nav/mobile/ConnectedNavBar.tsx
index 4c427f55d62..562c8dcbe7f 100644
--- a/packages/web/src/components/nav/mobile/ConnectedNavBar.tsx
+++ b/packages/web/src/components/nav/mobile/ConnectedNavBar.tsx
@@ -19,7 +19,7 @@ import { push, goBack } from 'utils/navigation'
 
 import NavBar from './NavBar'
 
-const { NOTIFICATION_PAGE, SETTINGS_PAGE, REWARDS_PAGE } = route
+const { NOTIFICATION_PAGE } = route
 
 type ConnectedNavBarProps = ReturnType<typeof mapStateToProps> &
   ReturnType<typeof mapDispatchToProps> &
@@ -56,20 +56,10 @@ const ConnectedNavBar = ({
     record(make(Name.NOTIFICATIONS_OPEN, { source: 'button' }))
   }, [goToRoute, setStackReset, setSlideDirection, record])
 
-  const goToSettingsPage = useCallback(() => {
-    setStackReset(true)
-    setImmediate(() => goToRoute(SETTINGS_PAGE))
-  }, [goToRoute, setStackReset])
-
   const signUp = useCallback(() => {
     setStackReset(true)
   }, [setStackReset])
 
-  const goToRewardsPage = useCallback(() => {
-    setStackReset(true)
-    setImmediate(() => goToRoute(REWARDS_PAGE))
-  }, [goToRoute, setStackReset])
-
   return (
     <NavBar
       isSignedIn={hasAccount}
@@ -77,11 +67,9 @@ const ConnectedNavBar = ({
       signUp={signUp}
       rewardsCount={rewardsCount}
       goToNotificationPage={goToNotificationPage}
-      goToSettingsPage={goToSettingsPage}
       search={search}
       goBack={goBack}
       history={history}
-      goToRewardsPage={goToRewardsPage}
     />
   )
 }
diff --git a/packages/web/src/components/nav/mobile/NavBar.tsx b/packages/web/src/components/nav/mobile/NavBar.tsx
index 696b762fc72..35af646074a 100644
--- a/packages/web/src/components/nav/mobile/NavBar.tsx
+++ b/packages/web/src/components/nav/mobile/NavBar.tsx
@@ -1,17 +1,15 @@
 import { useState, useContext, useCallback, useEffect } from 'react'
 
 import { useNotificationUnreadCount } from '@audius/common/api'
-import { Status } from '@audius/common/models'
 import { formatCount, route } from '@audius/common/utils'
 import {
   IconAudiusLogoHorizontal,
-  IconSettings,
   IconCaretLeft,
   IconClose,
   IconNotificationOn,
   IconButton,
-  IconGift,
-  Flex
+  Flex,
+  IconKebabHorizontal
 } from '@audius/harmony'
 import cn from 'classnames'
 import { History } from 'history'
@@ -19,7 +17,6 @@ import { Link } from 'react-router-dom'
 // eslint-disable-next-line no-restricted-imports -- TODO: migrate to @react-spring/web
 import { useTransition, animated } from 'react-spring'
 
-import { useHistoryContext } from 'app/HistoryProvider'
 import {
   RouterContext,
   SlideDirection
@@ -29,10 +26,10 @@ import NavContext, {
   CenterPreset,
   RightPreset
 } from 'components/nav/mobile/NavContext'
-import SearchBar from 'components/search-bar/SearchBar'
 import { getIsIOS } from 'utils/browser'
 
 import styles from './NavBar.module.css'
+import { NavBarActionDrawer } from './NavBarActionDrawer'
 
 const { SIGN_UP_PAGE, TRENDING_PAGE } = route
 
@@ -42,8 +39,6 @@ interface NavBarProps {
   rewardsCount: number
   signUp: () => void
   goToNotificationPage: () => void
-  goToSettingsPage: () => void
-  goToRewardsPage: () => void
   search: (term: string) => void
   goBack: () => void
   history: History<any>
@@ -61,25 +56,19 @@ const NavBar = ({
   search,
   signUp,
   goToNotificationPage,
-  goToSettingsPage,
   goBack,
-  goToRewardsPage,
   history: {
     location: { pathname }
   }
 }: NavBarProps) => {
-  const { history } = useHistoryContext()
   const { leftElement, centerElement, rightElement } = useContext(NavContext)!
   const { data: notificationCount = 0 } = useNotificationUnreadCount()
 
   const [isSearching, setIsSearching] = useState(false)
-  const [searchValue, setSearchValue] = useState('')
 
   const { setStackReset } = useContext(RouterContext)
-  const beginSearch = useCallback(() => {
-    setStackReset(true)
-    setImmediate(() => search(searchValue))
-  }, [setStackReset, search, searchValue])
+
+  const [isActionDrawerOpen, setIsActionDrawerOpen] = useState(false)
 
   useEffect(() => {
     const splitPath = pathname.split('/')
@@ -87,15 +76,6 @@ const NavBar = ({
     setIsSearching(isSearch)
   }, [pathname])
 
-  const handleOpenSearch = useCallback(() => {
-    history.push(`/explore`)
-  }, [history])
-
-  const onCloseSearch = () => {
-    setIsSearching(false)
-    setSearchValue('')
-  }
-
   const logoTransitions = useTransition(!isSearching, null, {
     from: {
       opacity: 0,
@@ -194,74 +174,25 @@ const NavBar = ({
             </Flex>
           )}
         </Flex>
-        <Flex>
-          <IconButton
-            aria-label='audio rewards'
-            color={rewardsCount > 0 ? 'warning' : 'subdued'}
-            icon={IconGift}
-            onClick={goToRewardsPage}
-          />
-          {rewardsCount > 0 && (
-            <Flex
-              css={{
-                position: 'absolute',
-                top: 0,
-                right: 6,
-                backgroundColor: 'var(--harmony-red)',
-                color: 'var(--harmony-white)',
-                fontSize: '11px',
-                fontWeight: 'bold',
-                letterSpacing: '0.07px',
-                lineHeight: '14px',
-                textTransform: 'uppercase',
-                padding: '0px 6px',
-                transform: 'translateX(50%)',
-                borderRadius: '8px'
-              }}
-            >
-              {formatCount(rewardsCount)}
-            </Flex>
-          )}
-        </Flex>
       </Flex>
     )
-  } else if (leftElement === LeftPreset.SETTINGS && isSignedIn) {
-    left = (
-      <>
-        <IconButton
-          aria-label='settings'
-          color='subdued'
-          icon={IconSettings}
-          onClick={goToSettingsPage}
-        />
-        <IconButton
-          aria-label='audio rewards'
-          color={rewardsCount > 0 ? 'warning' : 'subdued'}
-          icon={IconGift}
-          onClick={goToRewardsPage}
-        />
-        {rewardsCount > 0 && (
-          <div className={styles.iconTag}>{formatCount(rewardsCount)}</div>
-        )}
-      </>
-    )
   } else {
     left = leftElement
   }
 
   return (
-    <div
+    <Flex
       className={cn(styles.container, {
         [styles.containerNoBorder]: isSearching
       })}
     >
-      <div
+      <Flex
         className={cn(styles.leftElement, {
           [styles.isLoading]: isLoading
         })}
       >
         {left}
-      </div>
+      </Flex>
       {centerElement === CenterPreset.LOGO ? (
         <Link to={TRENDING_PAGE} className={styles.logo}>
           {logoTransitions.map(({ item, props, key }) =>
@@ -279,36 +210,31 @@ const NavBar = ({
       ) : null}
       {typeof centerElement === 'string' &&
         !Object.values(CenterPreset).includes(centerElement as any) && (
-          <div className={styles.centerText}> {centerElement} </div>
+          <Flex className={styles.centerText}> {centerElement} </Flex>
         )}
-      <div
+      <Flex
         className={cn(styles.rightElement, {
           [styles.isLoading]: isLoading
         })}
       >
-        {rightElement === RightPreset.SEARCH ? (
-          <SearchBar
-            open={isSearching}
-            onOpen={handleOpenSearch}
-            onClose={onCloseSearch}
-            value={searchValue}
-            onSearch={setSearchValue}
-            placeholder={messages.searchPlaceholderV2}
-            showHeader={false}
-            className={cn(
-              styles.searchBar,
-              { [styles.searchBarClosed]: !isSearching },
-              { [styles.searchBarClosedSignedOut]: !isSearching && !isSignedIn }
-            )}
-            iconClassname={styles.searchIcon}
-            beginSearch={beginSearch}
-            status={isSearching ? Status.LOADING : Status.IDLE}
-          />
+        {rightElement === RightPreset.KEBAB ? (
+          <Flex mr='s'>
+            <IconButton
+              aria-label='menu'
+              icon={IconKebabHorizontal}
+              color-='subdued'
+              onClick={() => setIsActionDrawerOpen(true)}
+            />
+          </Flex>
         ) : (
           rightElement
         )}
-      </div>
-    </div>
+      </Flex>
+      <NavBarActionDrawer
+        isOpen={isActionDrawerOpen}
+        onClose={() => setIsActionDrawerOpen(false)}
+      />
+    </Flex>
   )
 }
 
diff --git a/packages/web/src/components/nav/mobile/NavBarActionDrawer.tsx b/packages/web/src/components/nav/mobile/NavBarActionDrawer.tsx
new file mode 100644
index 00000000000..b878540343c
--- /dev/null
+++ b/packages/web/src/components/nav/mobile/NavBarActionDrawer.tsx
@@ -0,0 +1,73 @@
+import { useCallback, useContext, useMemo } from 'react'
+
+import { WALLET_PAGE } from '@audius/common/src/utils/route'
+import { route } from '@audius/common/utils'
+import { useDispatch } from 'react-redux'
+
+import ActionDrawer from 'components/action-drawer/ActionDrawer'
+import { RouterContext } from 'components/animated-switch/RouterContextProvider'
+import { push } from 'utils/navigation'
+
+const { SETTINGS_PAGE, REWARDS_PAGE } = route
+
+type NavBarActionDrawerProps = {
+  isOpen: boolean
+  onClose: () => void
+}
+
+const messages = {
+  wallet: 'Wallet',
+  rewards: 'Rewards',
+  settings: 'Settings'
+}
+
+export const NavBarActionDrawer = ({
+  isOpen,
+  onClose
+}: NavBarActionDrawerProps) => {
+  const dispatch = useDispatch()
+  const { setStackReset } = useContext(RouterContext)
+
+  const goToRoute = useCallback(
+    (route: string) => {
+      dispatch(push(route))
+    },
+    [dispatch]
+  )
+
+  const goToWalletPage = useCallback(() => {
+    setImmediate(() => goToRoute(WALLET_PAGE))
+    onClose()
+  }, [goToRoute, onClose])
+
+  const goToSettingsPage = useCallback(() => {
+    setStackReset(true)
+    setImmediate(() => goToRoute(SETTINGS_PAGE))
+    onClose()
+  }, [goToRoute, onClose, setStackReset])
+
+  const goToRewardsPage = useCallback(() => {
+    setImmediate(() => goToRoute(REWARDS_PAGE))
+    onClose()
+  }, [goToRoute, onClose])
+
+  const actions = useMemo(
+    () => [
+      {
+        text: messages.wallet,
+        onClick: goToWalletPage
+      },
+      {
+        text: messages.rewards,
+        onClick: goToRewardsPage
+      },
+      {
+        text: messages.settings,
+        onClick: goToSettingsPage
+      }
+    ],
+    [goToRewardsPage, goToSettingsPage, goToWalletPage]
+  )
+
+  return <ActionDrawer actions={actions} onClose={onClose} isOpen={isOpen} />
+}
diff --git a/packages/web/src/components/nav/mobile/NavContext.tsx b/packages/web/src/components/nav/mobile/NavContext.tsx
index d2139fa0452..b524cf19c1d 100644
--- a/packages/web/src/components/nav/mobile/NavContext.tsx
+++ b/packages/web/src/components/nav/mobile/NavContext.tsx
@@ -33,7 +33,7 @@ export enum CenterPreset {
 }
 
 export enum RightPreset {
-  SEARCH = 'SEARCH'
+  KEBAB = 'KEBAB'
 }
 
 type LeftElement = LeftPreset | ReactNode | null
@@ -46,13 +46,13 @@ const NavContext = createContext<NavContextProps>({
   setRight: () => {},
   leftElement: LeftPreset.NOTIFICATION,
   centerElement: CenterPreset.LOGO,
-  rightElement: RightPreset.SEARCH
+  rightElement: RightPreset.KEBAB
 })
 
 const useNavContext = () => {
   const [leftElement, setLeft] = useState<LeftElement>(LeftPreset.NOTIFICATION)
   const [centerElement, setCenter] = useState<CenterElement>(CenterPreset.LOGO)
-  const [rightElement, setRight] = useState<RightElement>(RightPreset.SEARCH)
+  const [rightElement, setRight] = useState<RightElement>(RightPreset.KEBAB)
   return {
     leftElement,
     setLeft,
@@ -85,7 +85,7 @@ export const useMainPageHeader = () => {
   useEffect(() => {
     setLeft(LeftPreset.NOTIFICATION)
     setCenter(CenterPreset.LOGO)
-    setRight(RightPreset.SEARCH)
+    setRight(RightPreset.KEBAB)
   }, [setLeft, setCenter, setRight])
 }
 
@@ -98,7 +98,7 @@ export const useSubPageHeader = () => {
   useEffect(() => {
     setLeft(LeftPreset.BACK)
     setCenter(CenterPreset.LOGO)
-    setRight(RightPreset.SEARCH)
+    setRight(RightPreset.KEBAB)
   }, [setLeft, setCenter, setRight])
 }
 
diff --git a/packages/web/src/pages/audio-page/AudioPage.tsx b/packages/web/src/pages/audio-page/AudioPage.tsx
index 27cfced3169..af344aa93d4 100644
--- a/packages/web/src/pages/audio-page/AudioPage.tsx
+++ b/packages/web/src/pages/audio-page/AudioPage.tsx
@@ -85,7 +85,7 @@ const useMobileNavContext = () => {
   const { setLeft, setRight } = useContext(NavContext)!
   useEffect(() => {
     setLeft(LeftPreset.BACK)
-    setRight(RightPreset.SEARCH)
+    setRight(RightPreset.KEBAB)
   }, [setLeft, setRight])
 }
 
diff --git a/packages/web/src/pages/collection-page/components/mobile/CollectionPage.tsx b/packages/web/src/pages/collection-page/components/mobile/CollectionPage.tsx
index 65392b0c5ca..bf07936a862 100644
--- a/packages/web/src/pages/collection-page/components/mobile/CollectionPage.tsx
+++ b/packages/web/src/pages/collection-page/components/mobile/CollectionPage.tsx
@@ -123,7 +123,7 @@ const CollectionPage = ({
         return
       }
       setLeft(LeftPreset.BACK)
-      setRight(RightPreset.SEARCH)
+      setRight(RightPreset.KEBAB)
       setCenter(CenterPreset.LOGO)
     }
   }, [setLeft, setCenter, setRight, metadata])
diff --git a/packages/web/src/pages/deactivate-account-page/components/mobile/DeactivateAccountPage.tsx b/packages/web/src/pages/deactivate-account-page/components/mobile/DeactivateAccountPage.tsx
index 9d27e473e3f..b87f5f4de55 100644
--- a/packages/web/src/pages/deactivate-account-page/components/mobile/DeactivateAccountPage.tsx
+++ b/packages/web/src/pages/deactivate-account-page/components/mobile/DeactivateAccountPage.tsx
@@ -25,7 +25,7 @@ const useMobileNavContext = () => {
   const { setLeft, setRight } = useContext(NavContext)!
   useEffect(() => {
     setLeft(LeftPreset.CLOSE)
-    setRight(RightPreset.SEARCH)
+    setRight(RightPreset.KEBAB)
   }, [setLeft, setRight])
 }
 
diff --git a/packages/web/src/pages/not-found-page/NotFoundPage.tsx b/packages/web/src/pages/not-found-page/NotFoundPage.tsx
index 17ef838502d..614bfa1a7f3 100644
--- a/packages/web/src/pages/not-found-page/NotFoundPage.tsx
+++ b/packages/web/src/pages/not-found-page/NotFoundPage.tsx
@@ -43,7 +43,7 @@ export const NotFoundPage = () => {
     if (isMobile) {
       const { setLeft, setCenter, setRight } = navContext
       setLeft(null)
-      setRight(RightPreset.SEARCH)
+      setRight(RightPreset.KEBAB)
       setCenter(CenterPreset.LOGO)
     }
   }, [isMobile, navContext])
diff --git a/packages/web/src/pages/rewards-page/RewardsPage.tsx b/packages/web/src/pages/rewards-page/RewardsPage.tsx
index ac8abec9bcb..833278053bb 100644
--- a/packages/web/src/pages/rewards-page/RewardsPage.tsx
+++ b/packages/web/src/pages/rewards-page/RewardsPage.tsx
@@ -70,7 +70,7 @@ const useMobileNavContext = () => {
   const { setLeft, setRight } = useContext(NavContext)!
   useEffect(() => {
     setLeft(LeftPreset.BACK)
-    setRight(RightPreset.SEARCH)
+    setRight(RightPreset.KEBAB)
   }, [setLeft, setRight])
 }
 
diff --git a/packages/web/src/pages/search-page/SearchPage.tsx b/packages/web/src/pages/search-page/SearchPage.tsx
index b6b4060e811..9cc278b4eed 100644
--- a/packages/web/src/pages/search-page/SearchPage.tsx
+++ b/packages/web/src/pages/search-page/SearchPage.tsx
@@ -33,7 +33,7 @@ export const SearchPage = () => {
   useEffect(() => {
     setLeft(LeftPreset.BACK)
     setCenter(CenterPreset.LOGO)
-    setRight(RightPreset.SEARCH)
+    setRight(RightPreset.KEBAB)
   }, [setLeft, setCenter, setRight])
 
   const header = <SearchHeader />
diff --git a/packages/web/src/pages/track-page/components/mobile/TrackPage.tsx b/packages/web/src/pages/track-page/components/mobile/TrackPage.tsx
index 9d73298809e..7f2bdac1f19 100644
--- a/packages/web/src/pages/track-page/components/mobile/TrackPage.tsx
+++ b/packages/web/src/pages/track-page/components/mobile/TrackPage.tsx
@@ -74,7 +74,7 @@ const TrackPage = ({
   useEffect(() => {
     setLeft(LeftPreset.BACK)
     setCenter(CenterPreset.LOGO)
-    setRight(RightPreset.SEARCH)
+    setRight(RightPreset.KEBAB)
   }, [setLeft, setCenter, setRight])
 
   const { setHeader } = useContext(HeaderContext)
diff --git a/packages/web/src/pages/trending-page/components/mobile/TrendingPageContent.tsx b/packages/web/src/pages/trending-page/components/mobile/TrendingPageContent.tsx
index edcc72e3247..e1f3ede29b1 100644
--- a/packages/web/src/pages/trending-page/components/mobile/TrendingPageContent.tsx
+++ b/packages/web/src/pages/trending-page/components/mobile/TrendingPageContent.tsx
@@ -71,7 +71,7 @@ const TrendingPageMobileContent = ({
   const { setLeft, setCenter, setRight } = useContext(NavContext)!
   useEffect(() => {
     setLeft(LeftPreset.NOTIFICATION)
-    setRight(RightPreset.SEARCH)
+    setRight(RightPreset.KEBAB)
     setCenter(CenterPreset.LOGO)
   }, [setLeft, setCenter, setRight])
 
diff --git a/packages/web/src/pages/wallet-page/WalletPage.tsx b/packages/web/src/pages/wallet-page/WalletPage.tsx
index de8279967fa..dc3e25a983d 100644
--- a/packages/web/src/pages/wallet-page/WalletPage.tsx
+++ b/packages/web/src/pages/wallet-page/WalletPage.tsx
@@ -1,9 +1,12 @@
+import { useContext, useEffect } from 'react'
+
 import { Flex, IconWallet } from '@audius/harmony'
 import { useTheme } from '@emotion/react'
 
 import { Header } from 'components/header/desktop/Header'
 import { useMobileHeader } from 'components/header/mobile/hooks'
 import MobilePageContainer from 'components/mobile-page-container/MobilePageContainer'
+import NavContext, { LeftPreset } from 'components/nav/mobile/NavContext'
 import Page from 'components/page/Page'
 import { useIsMobile } from 'hooks/useIsMobile'
 import { CashWallet } from 'pages/pay-and-earn-page/components/CashWallet'
@@ -17,6 +20,11 @@ export const WalletPage = () => {
   const isMobile = useIsMobile()
   const { spacing } = useTheme()
 
+  const { setLeft } = useContext(NavContext)!
+  useEffect(() => {
+    setLeft(LeftPreset.BACK)
+  }, [setLeft])
+
   // Set up mobile header with icon
   useMobileHeader({
     title: messages.title