diff --git a/packages/web/components/templates/SettingsLayout.tsx b/packages/web/components/templates/SettingsLayout.tsx
index b0b3fab46..865bf7592 100644
--- a/packages/web/components/templates/SettingsLayout.tsx
+++ b/packages/web/components/templates/SettingsLayout.tsx
@@ -11,6 +11,7 @@ import { PageMetaData } from '../patterns/PageMetaData'
 import { DEFAULT_HEADER_HEIGHT } from './homeFeed/HeaderSpacer'
 import { logout } from '../../lib/logout'
 import { SettingsMenu } from './navMenu/SettingsMenu'
+import { SettingsDropdown } from './navMenu/SettingsDropdown'
 
 type SettingsLayoutProps = {
   title?: string
@@ -50,8 +51,23 @@ export function SettingsLayout(props: SettingsLayoutProps): JSX.Element {
         <Box
           css={{
             height: DEFAULT_HEADER_HEIGHT,
+            '@mdDown': {
+              display: 'none',
+            },
           }}
         ></Box>
+        <Box
+          css={{
+            p: '15px',
+            display: 'none',
+            height: DEFAULT_HEADER_HEIGHT,
+            '@mdDown': {
+              display: 'flex',
+            },
+          }}
+        >
+          <SettingsDropdown />
+        </Box>
         <HStack css={{ width: '100%', height: '100%' }} distribution="start">
           <SettingsMenu />
           {props.children}
diff --git a/packages/web/components/templates/navMenu/SettingsDropdown.tsx b/packages/web/components/templates/navMenu/SettingsDropdown.tsx
new file mode 100644
index 000000000..d893ace40
--- /dev/null
+++ b/packages/web/components/templates/navMenu/SettingsDropdown.tsx
@@ -0,0 +1,38 @@
+import { DropdownMenu } from '@radix-ui/react-dropdown-menu'
+import { SETTINGS_SECTION_1, SETTINGS_SECTION_2 } from './SettingsMenu'
+import {
+  Dropdown,
+  DropdownOption,
+  DropdownSeparator,
+} from '../../elements/DropdownElements'
+import { useRouter } from 'next/router'
+import { List } from 'phosphor-react'
+
+export const SettingsDropdown = (): JSX.Element => {
+  const router = useRouter()
+
+  return (
+    <Dropdown triggerElement={<List size={30} />}>
+      <DropdownOption onSelect={() => router.push('/home')} title="Home" />
+      {SETTINGS_SECTION_1.map((item) => {
+        return (
+          <DropdownOption
+            onSelect={() => router.push(item.destination)}
+            title={item.name}
+          />
+        )
+      })}
+
+      <DropdownSeparator />
+
+      {SETTINGS_SECTION_2.map((item) => {
+        return (
+          <DropdownOption
+            onSelect={() => router.push(item.destination)}
+            title={item.name}
+          />
+        )
+      })}
+    </Dropdown>
+  )
+}
diff --git a/packages/web/components/templates/navMenu/SettingsMenu.tsx b/packages/web/components/templates/navMenu/SettingsMenu.tsx
index c9b0bac7a..e0bd60c5e 100644
--- a/packages/web/components/templates/navMenu/SettingsMenu.tsx
+++ b/packages/web/components/templates/navMenu/SettingsMenu.tsx
@@ -9,6 +9,23 @@ import { ArrowSquareUpRight } from 'phosphor-react'
 import { useRouter } from 'next/router'
 import { NavMenuFooter } from './Footer'
 
+export const SETTINGS_SECTION_1 = [
+  { name: 'Account', destination: '/settings/account' },
+  { name: 'API Keys', destination: '/settings/api' },
+  { name: 'Emails', destination: '/settings/emails' },
+  { name: 'Feeds', destination: '/settings/feeds' },
+  { name: 'Subscriptions', destination: '/settings/subscriptions' },
+  { name: 'Labels', destination: '/settings/labels' },
+  { name: 'Shortcuts', destination: '/settings/shortcuts' },
+  { name: 'Saved Searches', destination: '/settings/saved-searches' },
+  { name: 'Pinned Searches', destination: '/settings/pinned-searches' },
+]
+
+export const SETTINGS_SECTION_2 = [
+  { name: 'Integrations', destination: '/settings/integrations' },
+  { name: 'Install', destination: '/settings/installation' },
+]
+
 const HorizontalDivider = styled(SpanBox, {
   width: '100%',
   height: '1px',
@@ -81,22 +98,6 @@ function ExternalLink(props: ExternalLinkProps): JSX.Element {
 }
 
 export function SettingsMenu(): JSX.Element {
-  const section1 = [
-    { name: 'Account', destination: '/settings/account' },
-    { name: 'API Keys', destination: '/settings/api' },
-    { name: 'Emails', destination: '/settings/emails' },
-    { name: 'Feeds', destination: '/settings/feeds' },
-    { name: 'Subscriptions', destination: '/settings/subscriptions' },
-    { name: 'Labels', destination: '/settings/labels' },
-    { name: 'Shortcuts', destination: '/settings/shortcuts' },
-    { name: 'Saved Searches', destination: '/settings/saved-searches' },
-    { name: 'Pinned Searches', destination: '/settings/pinned-searches' },
-  ]
-
-  const section2 = [
-    { name: 'Integrations', destination: '/settings/integrations' },
-    { name: 'Install', destination: '/settings/installation' },
-  ]
   return (
     <>
       <Box
@@ -124,7 +125,7 @@ export function SettingsMenu(): JSX.Element {
           css={{
             width: '100%',
             px: '25px',
-            pb: '50px',
+            pb: '25px',
             pt: '4.5px',
             lineHeight: '1',
           }}
@@ -136,15 +137,17 @@ export function SettingsMenu(): JSX.Element {
           css={{
             gap: '10px',
             width: '100%',
+            overflowY: 'scroll',
+            paddingBottom: '120px',
           }}
           distribution="start"
           alignment="start"
         >
-          {section1.map((item) => {
+          {SETTINGS_SECTION_1.map((item) => {
             return <SettingsButton key={item.name} {...item} />
           })}
           <HorizontalDivider />
-          {section2.map((item) => {
+          {SETTINGS_SECTION_2.map((item) => {
             return <SettingsButton key={item.name} {...item} />
           })}
           <HorizontalDivider />
@@ -176,8 +179,8 @@ export function SettingsMenu(): JSX.Element {
             destination="https://docs.omnivore.app"
             title="Documentation"
           />
-          <NavMenuFooter />
         </VStack>
+        <NavMenuFooter />
       </Box>
       {/* This spacer pushes library content to the right of 
       the fixed left side menu. */}