diff --git a/src/components/Drawer.jsx b/src/components/Drawer.jsx
index afb83dc7..fd81844d 100644
--- a/src/components/Drawer.jsx
+++ b/src/components/Drawer.jsx
@@ -3,6 +3,9 @@ import { connect } from 'react-redux'
 import Hammer from 'hammerjs'
 import PropTypes from 'prop-types'
 
+import Divider from 'cozy-ui/transpiled/react/Divider'
+import List from 'cozy-ui/transpiled/react/List'
+import Paper from 'cozy-ui/transpiled/react/Paper'
 import AppsContent from 'components/Apps/AppsContent'
 import SettingsContent from 'components/Settings/SettingsContent'
 import { fetchSettingsData } from 'lib/reducers'
@@ -166,9 +169,13 @@ class Drawer extends Component {
               isInvertedTheme={isInvertedTheme}
             />
           </nav>
-          <hr className="coz-sep-flex" />
+          <Divider />
           <nav className="coz-drawer--settings">
-            <SettingsContent isDrawer onLogOut={onLogOut} />
+            <Paper elevation={0} square>
+              <List>
+                <SettingsContent isDrawer onLogOut={onLogOut} />
+              </List>
+            </Paper>
           </nav>
         </aside>
       </div>
diff --git a/src/components/Settings/SettingsContent.jsx b/src/components/Settings/SettingsContent.jsx
index 430ecd38..0667ac35 100644
--- a/src/components/Settings/SettingsContent.jsx
+++ b/src/components/Settings/SettingsContent.jsx
@@ -1,226 +1,74 @@
-import React, { useCallback } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
-import flag from 'cozy-flags'
 
-import { isFlagshipApp } from 'cozy-device-helper'
-import { useClient, useInstanceInfo, generateWebLink } from 'cozy-client'
+import { useInstanceInfo } from 'cozy-client'
 import {
-  hasAnOffer,
-  shouldDisplayOffers,
-  buildPremiumLink
-} from 'cozy-client/dist/models/instance'
-import { useWebviewIntent } from 'cozy-intent'
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import OpenwithIcon from 'cozy-ui/transpiled/react/Icons/Openwith'
-import PeopleIcon from 'cozy-ui/transpiled/react/Icons/People'
-import PaletteIcon from 'cozy-ui/transpiled/react/Icons/Palette'
-import GraphCircleIcon from 'cozy-ui/transpiled/react/Icons/GraphCircle'
-import CozyCircleIcon from 'cozy-ui/transpiled/react/Icons/CozyCircle'
-import HandIcon from 'cozy-ui/transpiled/react/Icons/Hand'
-import DevicesIcon from 'cozy-ui/transpiled/react/Icons/Devices'
-import GlobeIcon from 'cozy-ui/transpiled/react/Icons/Globe'
-import LogoutIcon from 'cozy-ui/transpiled/react/Icons/Logout'
-import HelpIcon from 'cozy-ui/transpiled/react/Icons/Help'
-import EmailIcon from 'cozy-ui/transpiled/react/Icons/Email'
+  makeActions,
+  divider
+} from 'cozy-ui/transpiled/react/ActionsMenu/Actions'
+import ActionsMenu from 'cozy-ui/transpiled/react/ActionsMenu'
+import ActionsItems from 'cozy-ui/transpiled/react/ActionsMenu/ActionsItems'
 
-import { getSettingsLink } from 'components/Settings/helper'
-import StorageData from 'components/Settings/StorageData'
+import {
+  profile,
+  appearance,
+  plans,
+  storage,
+  permissions,
+  connectedDevices,
+  connections,
+  help,
+  contact,
+  logout
+} from 'components/Settings/actions'
 import useI18n from 'components/useI18n'
 
-const MenuIcon = ({ icon }) => {
-  return <Icon className="u-mr-1" color="var(--iconTextColor)" icon={icon} />
-}
-
-const ExternalLinkIcon = () => {
-  return (
-    <Icon
-      className="coz-nav-settings-item-btn-external-icon"
-      color="var(--iconTextColor)"
-      icon={OpenwithIcon}
-    />
-  )
-}
-
-const NavGroup = ({ children }) => {
-  return <ul className="coz-nav-group">{children}</ul>
-}
-
-const NavItem = ({ children }) => {
-  return <li className="coz-nav-settings-item">{children}</li>
-}
-
-const SettingsContent = ({ instanceInfo, onLogOut, isDrawer }) => {
+const SettingsContent = ({
+  anchorRef,
+  instanceInfo,
+  onLogOut,
+  isDrawer,
+  onClose
+}) => {
   const { t } = useI18n()
-  const client = useClient()
-  const webviewIntent = useWebviewIntent()
-  const hasSubscription = flag('settings.subscription')
-
-  const shouldDisplayViewOfferButton =
-    shouldDisplayOffers(instanceInfo) || hasAnOffer(instanceInfo)
-
-  const managerUrlPremiumLink =
-    hasSubscription && client
-      ? generateWebLink({
-          cozyUrl: client.getStackClient().uri,
-          hash: '/subscription',
-          pathname: '/',
-          slug: 'settings',
-          subDomainType: client.getInstanceOptions().subdomain
-        })
-      : buildPremiumLink(instanceInfo)
-
-  const logOut = useCallback(async () => {
-    await client.logout()
-
-    return isFlagshipApp() && webviewIntent
-      ? webviewIntent.call('logout')
-      : window.location.reload()
-  }, [client, webviewIntent])
 
-  const handleLogout = async () => {
-    if (onLogOut && typeof onLogOut === 'function') {
-      const res = onLogOut()
-      if (res instanceof Promise) {
-        await res
-      }
-    } else {
-      logOut()
+  const actions = makeActions(
+    [
+      profile,
+      appearance,
+      plans,
+      storage,
+      permissions,
+      divider,
+      connectedDevices,
+      connections,
+      divider,
+      help,
+      contact,
+      logout
+    ],
+    {
+      t,
+      instanceInfo,
+      onLogOut
     }
-  }
-
-  return (
-    <div className="coz-nav-pop-content">
-      {isDrawer && <hr />}
+  )
 
-      <NavGroup>
-        <NavItem>
-          <a
-            role="menuitem"
-            href={getSettingsLink({ client, hash: 'profile' })}
-            target="_self"
-            title={t('profile')}
-          >
-            <MenuIcon icon={PeopleIcon} />
-            {t('profile')}
-          </a>
-        </NavItem>
-        {flag('ui.darkmode.enabled') && (
-          <NavItem>
-            <a
-              role="menuitem"
-              href={getSettingsLink({ client, hash: 'appearance' })}
-              target="_self"
-              title={t('appearance')}
-            >
-              <MenuIcon icon={PaletteIcon} />
-              {t('appearance')}
-            </a>
-          </NavItem>
-        )}
-        {shouldDisplayViewOfferButton && (
-          <NavItem>
-            <a
-              role="menuitem"
-              href={managerUrlPremiumLink}
-              target="_self"
-              title={t('plans')}
-            >
-              <MenuIcon icon={CozyCircleIcon} />
-              {t('plans')}
-              {!flag('settings.subscription') && <ExternalLinkIcon />}
-            </a>
-          </NavItem>
-        )}
-        <NavItem>
-          <a
-            role="menuitem"
-            target="_self"
-            title={t('storage')}
-            href={getSettingsLink({ client, hash: 'storage' })}
-          >
-            <MenuIcon icon={GraphCircleIcon} />
-            <span>
-              {t('storage')}
-              <StorageData />
-            </span>
-          </a>
-        </NavItem>
-      </NavGroup>
-      <NavGroup>
-        {flag('settings.permissions-dashboard') && (
-          <NavItem>
-            <a
-              role="menuitem"
-              href={getSettingsLink({ client, hash: 'permissions/slug' })}
-              target="_self"
-              title={t('permissions')}
-            >
-              <MenuIcon icon={HandIcon} />
-              {t('permissions')}
-            </a>
-          </NavItem>
-        )}
-        <NavItem>
-          <a
-            role="menuitem"
-            href={getSettingsLink({ client, hash: 'connectedDevices' })}
-            target="_self"
-            title={t('connectedDevices')}
-          >
-            <MenuIcon icon={DevicesIcon} />
-            {t('connectedDevices')}
-          </a>
-        </NavItem>
-        <NavItem>
-          <a
-            role="menuitem"
-            href={getSettingsLink({ client, hash: 'sessions' })}
-            target="_self"
-            title={t('connections')}
-          >
-            <MenuIcon icon={GlobeIcon} />
-            {t('connections')}
-          </a>
-        </NavItem>
-      </NavGroup>
-      <NavGroup>
-        <NavItem>
-          <a
-            role="menuitem"
-            target="_blank"
-            rel="noopener noreferrer"
-            href="https://support.cozy.io/"
-            title={t('help')}
-          >
-            <MenuIcon icon={HelpIcon} />
-            {t('help')}
-            <ExternalLinkIcon />
-          </a>
-        </NavItem>
-        <NavItem>
-          <a
-            role="menuitem"
-            href={getSettingsLink({ client, hash: 'support' })}
-            target="_self"
-            title={t('contact')}
-          >
-            <MenuIcon icon={EmailIcon} />
-            {t('contact')}
-          </a>
-        </NavItem>
+  if (isDrawer) return <ActionsItems actions={actions} />
 
-        <NavItem>
-          <button
-            type="button"
-            role="menuitem"
-            onClick={handleLogout}
-            title={t('logout')}
-          >
-            <MenuIcon icon={LogoutIcon} /> {t('logout')}
-          </button>
-        </NavItem>
-      </NavGroup>
-    </div>
+  return (
+    <ActionsMenu
+      ref={anchorRef}
+      open={true}
+      docs={[]}
+      actions={actions}
+      anchorOrigin={{
+        vertical: 'bottom',
+        horizontal: 'right'
+      }}
+      autoClose
+      onClose={onClose}
+    />
   )
 }
 
diff --git a/src/components/Settings/StorageData.jsx b/src/components/Settings/StorageData.jsx
index b5d5f9ba..6b40112c 100644
--- a/src/components/Settings/StorageData.jsx
+++ b/src/components/Settings/StorageData.jsx
@@ -2,40 +2,36 @@ import React from 'react'
 
 import { useInstanceInfo } from 'cozy-client'
 import { makeDiskInfos } from 'cozy-client/dist/models/instance'
+import { LinearProgress } from 'cozy-ui/transpiled/react/Progress'
 
 import useI18n from 'components/useI18n'
 
 const StorageData = () => {
   const { t } = useI18n()
-  const { isLoaded, ...instanceInfo } = useInstanceInfo()
+  const { isLoaded, diskUsage } = useInstanceInfo()
 
   if (!isLoaded) return null
 
   // we used this default quota set in getStorageData, we just reuse it here
   const storageData = makeDiskInfos(
-    instanceInfo.diskUsage.data.attributes.used,
-    instanceInfo.diskUsage.data.attributes.quota ||
-      Math.max(
-        10 ** 12,
-        10 * parseInt(instanceInfo.diskUsage.data.attributes.used, 10)
-      )
+    diskUsage.data.attributes.used,
+    diskUsage.data.attributes.quota ||
+      Math.max(10 ** 12, 10 * parseInt(diskUsage.data.attributes.used, 10))
   )
 
   return (
-    <div className="coz-nav-storage">
-      <p className="coz-nav-storage-text">
-        {t('storage_phrase', {
-          diskUsage: storageData.humanDiskUsage,
-          diskQuota: storageData.humanDiskQuota
-        })}
-      </p>
-      <progress
-        className="cozy-nav-storage-bar"
-        value={storageData.humanDiskUsage}
-        max={storageData.humanDiskQuota}
-        min="0"
+    <>
+      {t('storage_phrase', {
+        diskUsage: storageData.humanDiskUsage,
+        diskQuota: storageData.humanDiskQuota
+      })}
+      <LinearProgress
+        style={{ width: '85%' }}
+        className="u-mt-half"
+        variant="determinate"
+        value={parseInt(storageData.percentUsage)}
       />
-    </div>
+    </>
   )
 }
 
diff --git a/src/components/Settings/index.jsx b/src/components/Settings/index.jsx
index 42c77257..addb45c9 100644
--- a/src/components/Settings/index.jsx
+++ b/src/components/Settings/index.jsx
@@ -5,7 +5,6 @@ import { useInstanceInfo } from 'cozy-client'
 import Button from 'cozy-ui/transpiled/react/Buttons'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import GearIcon from 'cozy-ui/transpiled/react/Icons/Gear'
-import ClickAwayListener from 'cozy-ui/transpiled/react/ClickAwayListener'
 
 import SettingsContent from 'components/Settings/SettingsContent'
 import useI18n from 'components/useI18n'
@@ -17,28 +16,26 @@ const Settings = ({ onLogOut }) => {
   const { isLoaded } = useInstanceInfo()
 
   return (
-    <ClickAwayListener onClickAway={() => setOpen(false)}>
-      <div className="coz-nav coz-nav-settings" ref={rootRef}>
-        <Button
-          variant="text"
-          aria-controls="coz-nav-pop--settings"
-          color="default"
-          busy={!isLoaded}
-          startIcon={<Icon icon={GearIcon} />}
-          label={t('menu.settings')}
-          onClick={() => setOpen(v => !v)}
+    <>
+      <Button
+        ref={rootRef}
+        variant="text"
+        aria-controls="simple-menu"
+        aria-haspopup="true"
+        color="default"
+        busy={!isLoaded}
+        startIcon={<Icon icon={GearIcon} />}
+        label={t('menu.settings')}
+        onClick={() => setOpen(v => !v)}
+      />
+      {isOpen && (
+        <SettingsContent
+          anchorRef={rootRef}
+          onLogOut={onLogOut}
+          onClose={() => setOpen(false)}
         />
-        {isLoaded && (
-          <div
-            className="coz-nav-pop coz-nav-pop--settings"
-            id="coz-nav-pop--settings"
-            aria-hidden={!isOpen}
-          >
-            <SettingsContent onLogOut={onLogOut} />
-          </div>
-        )}
-      </div>
-    </ClickAwayListener>
+      )}
+    </>
   )
 }
 
diff --git a/src/styles/drawer.css b/src/styles/drawer.css
index 500ccb3c..6a13950d 100644
--- a/src/styles/drawer.css
+++ b/src/styles/drawer.css
@@ -65,16 +65,6 @@
   list-style-type: none;
 }
 
-[role=banner] .coz-drawer-wrapper nav hr {
-  margin: 0;
-  border: none;
-  border-bottom: solid 1px var(--borderMainColor);
-}
-
-[role=banner] .coz-drawer-wrapper .coz-nav-icon {
-  margin-right: .5em;
-}
-
 [role=banner] .coz-drawer--apps {
   flex: 0 1 100%;
   /* IMPORTANT: on Chrome, the `overflow-y: scroll` property on .coz-drawer--apps prevented
diff --git a/src/styles/index.styl b/src/styles/index.styl
index b36cbfcf..ce9bda58 100644
--- a/src/styles/index.styl
+++ b/src/styles/index.styl
@@ -6,7 +6,6 @@
 @import './navigation_item.css'
 @import './apps.css'
 @import './settings.css'
-@import './storage.css'
 @import './drawer.css'
 
 @import './theme.styl'
diff --git a/src/styles/settings.css b/src/styles/settings.css
index 79324f33..d4a614ab 100644
--- a/src/styles/settings.css
+++ b/src/styles/settings.css
@@ -1,7 +1,3 @@
-[role=banner] .coz-nav-pop--settings {
-  right: 0;
-}
-
 [role=banner] .coz-nav-settings-item [role=menuitem] {
   display: flex;
   box-sizing: border-box;
diff --git a/src/styles/storage.css b/src/styles/storage.css
deleted file mode 100644
index f02b028a..00000000
--- a/src/styles/storage.css
+++ /dev/null
@@ -1,22 +0,0 @@
-[role=banner] [role=menuitem][data-icon=icon-storage] {
-  background-position: 1.5em calc(.8em + 1px);
-}
-
-[role=banner] .coz-nav-storage {
-  display: flex;
-  flex-direction: column;
-  align-items: left;
-  padding-top: .5em;
-  color: var(--secondaryTextColor);
-}
-
-[role=banner] .coz-nav-storage-text {
-  margin: 0 0 .1em 0;
-  font-weight: normal;
-  font-size: .875em;
-}
-
-[role=banner] .cozy-nav-storage-bar {
-    height: .5em;
-    margin: .2em 0 .1em 0;
-}