diff --git a/src/assets/icons/icon-image-broken.svg b/src/assets/icons/icon-image-broken.svg
deleted file mode 100644
index d014b37cf6..0000000000
--- a/src/assets/icons/icon-image-broken.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
-  <g fill="none" fill-rule="evenodd" transform="translate(0 2)">
-    <rect width="32" height="28" fill="#FDD5D5" rx="2"/>
-    <path fill="#F52D2D" d="M24,20 L13,15 L19.2902805,8.70971949 C19.6822478,8.31775224 20.3203148,8.32031476 20.7062149,8.7062149 L29,17 L24,20 Z"/>
-    <path fill="#F52D2D" d="M0,22 L6.29028051,15.7097195 C6.68224776,15.3177522 7.31387329,15.3138733 7.70591205,15.7059121 L11,19 L15.0233154,14.9766846 L24,19 L27.2486572,17.2486572 L32,22 L32,26.0020869 C32,27.1055038 31.1107383,28 29.9982567,28 L2.00174332,28 C0.89621101,28 0,27.1017394 0,26.0020869 L0,22 Z"/>
-    <circle cx="8" cy="7" r="3" fill="#FFFFFF"/>
-    <path stroke="#FDD5D5" d="M11,18.3000031 L5.5,23.8000031 L11,18.3000031 Z" stroke-linecap="round" stroke-linejoin="round"/>
-    <polyline stroke="#FFFFFF" stroke-width="2" points="0 17 8 13 24 20 32 16" stroke-linecap="round" stroke-linejoin="round"/>
-  </g>
-</svg>
diff --git a/src/components/Error/ErrorComponent.jsx b/src/components/Error/ErrorComponent.jsx
deleted file mode 100644
index 79bc56bd1e..0000000000
--- a/src/components/Error/ErrorComponent.jsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from 'react'
-
-import Empty from 'cozy-ui/transpiled/react/Empty'
-import Button from 'cozy-ui/transpiled/react/deprecated/Button'
-import { translate } from 'cozy-ui/transpiled/react/providers/I18n'
-
-import EmptyIcon from '../../photos/assets/icons/icon-image-broken.svg'
-
-export const ErrorComponent = ({ t, errorType }) => {
-  return (
-    <Empty title={t(`Error.${errorType}_title`)} icon={EmptyIcon}>
-      <Button
-        onClick={() => window.location.reload()}
-        label={t('Error.refresh')}
-      />
-    </Empty>
-  )
-}
-
-const TranslatedError = translate()(ErrorComponent)
-
-// eslint-disable-next-line
-export const withError = (onError, type, BaseComponent) => props =>
-  onError(props) ? (
-    <TranslatedError errorType={type} />
-  ) : (
-    <BaseComponent {...props} />
-  )
-
-export default TranslatedError
diff --git a/src/components/Error/Oops.jsx b/src/components/Error/Oops.jsx
index 4e78ce55f8..7adc757018 100644
--- a/src/components/Error/Oops.jsx
+++ b/src/components/Error/Oops.jsx
@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 
+import Button from 'cozy-ui/transpiled/react/Buttons'
 import Empty from 'cozy-ui/transpiled/react/Empty'
-import Button from 'cozy-ui/transpiled/react/deprecated/Button'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
 import styles from './oops.styl'
diff --git a/src/components/FilesViewerLoading.jsx b/src/components/FilesViewerLoading.jsx
index cdbc8dcb1b..02419f8c42 100644
--- a/src/components/FilesViewerLoading.jsx
+++ b/src/components/FilesViewerLoading.jsx
@@ -1,12 +1,12 @@
 import React from 'react'
 
+import Backdrop from 'cozy-ui/transpiled/react/Backdrop'
 import Spinner from 'cozy-ui/transpiled/react/Spinner'
-import Overlay from 'cozy-ui/transpiled/react/deprecated/Overlay'
 
 const FilesViewerLoading = () => (
-  <Overlay>
+  <Backdrop isOver open>
     <Spinner size="xxlarge" middle noMargin color="var(--white)" />
-  </Overlay>
+  </Backdrop>
 )
 
 export { FilesViewerLoading }
diff --git a/src/components/FolderPicker/FolderPickerHeader.tsx b/src/components/FolderPicker/FolderPickerHeader.tsx
index 081ab0804d..a0d5e2cc80 100644
--- a/src/components/FolderPicker/FolderPickerHeader.tsx
+++ b/src/components/FolderPicker/FolderPickerHeader.tsx
@@ -2,7 +2,6 @@ import React from 'react'
 
 import Card from 'cozy-ui/transpiled/react/Card'
 import Typography from 'cozy-ui/transpiled/react/Typography'
-import { Media, Img, Bd } from 'cozy-ui/transpiled/react/deprecated/Media'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
 import { FolderPickerHeaderIllustration } from 'components/FolderPicker/FolderPickerHeaderIllustration'
@@ -19,7 +18,10 @@ const specificCardStyle: React.CSSProperties = {
   marginRight: '4rem',
   marginTop: '1rem',
   marginBottom: '1rem',
-  background: 'var(--contrastBackgroundColor)'
+  background: 'var(--contrastBackgroundColor)',
+  display: 'flex',
+  alignItems: 'center',
+  gap: '1rem'
 }
 
 const FolderPickerHeader: React.FC<FolderPickerHeaderProps> = ({
@@ -35,19 +37,15 @@ const FolderPickerHeader: React.FC<FolderPickerHeaderProps> = ({
 
   return (
     <Card inset style={specificCardStyle}>
-      <Media>
-        <Img className="u-mr-1">
-          <FolderPickerHeaderIllustration entries={entries} />
-        </Img>
-        <Bd>
-          <Typography variant="h6" noWrap>
-            {entries.length !== 1 ? titleToUse : entries[0].name}
-          </Typography>
-          <Typography variant="caption" color="textSecondary" noWrap>
-            {subTitleToUse}
-          </Typography>
-        </Bd>
-      </Media>
+      <FolderPickerHeaderIllustration entries={entries} />
+      <div>
+        <Typography variant="h6" noWrap>
+          {entries.length !== 1 ? titleToUse : entries[0].name}
+        </Typography>
+        <Typography variant="caption" color="textSecondary" noWrap>
+          {subTitleToUse}
+        </Typography>
+      </div>
     </Card>
   )
 }
diff --git a/src/components/pushClient/Banner.jsx b/src/components/pushClient/Banner.jsx
index f48bd5c2ea..a1ba51fccc 100644
--- a/src/components/pushClient/Banner.jsx
+++ b/src/components/pushClient/Banner.jsx
@@ -7,11 +7,11 @@ import React, { Component } from 'react'
 
 import { withClient } from 'cozy-client'
 import Banner from 'cozy-ui/transpiled/react/Banner'
+import Button from 'cozy-ui/transpiled/react/Buttons'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import DeviceLaptopIcon from 'cozy-ui/transpiled/react/Icons/DeviceLaptop'
 import DevicePhoneIcon from 'cozy-ui/transpiled/react/Icons/DevicePhone'
 import DownloadIcon from 'cozy-ui/transpiled/react/Icons/Download'
-import Button, { ButtonLink } from 'cozy-ui/transpiled/react/deprecated/Button'
 import { translate } from 'cozy-ui/transpiled/react/providers/I18n'
 
 import {
@@ -82,21 +82,20 @@ class BannerClient extends Component {
           text={t(text)}
           bgcolor="var(--contrastBackgroundColor)"
           buttonOne={
-            <ButtonLink
-              href={t(link)}
-              theme="text"
-              icon={DownloadIcon}
+            <Button
+              component="a"
+              variant="text"
               label={t('Nav.banner-btn-client')}
               onClick={() => this.markAsSeen('banner')}
+              startIcon={<Icon icon={DownloadIcon} />}
+              href={t(link)}
             />
           }
           buttonTwo={
             <Button
-              theme="text"
+              variant="text"
               label={t('SelectionBar.close')}
-              onClick={() => {
-                this.markAsSeen('close')
-              }}
+              onClick={() => this.markAsSeen('close')}
             />
           }
         />
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 59b5a9c861..14c8ff38dd 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -221,7 +221,7 @@
     "share_accepted": "Le partage sera arrêté. Ainsi, les contacts suivant conserveront une copie mais vos changements ne seront plus synchronisés :",
     "share_waiting": "Le partage sera arrêté. Ainsi, les contacts suivant ne pourront donc plus accepter le partage et ne pourront plus accéder aux contenus partagés :",
     "share_both": "Le partage sera arrêté. Ainsi, les contacts ayant stocké les fichiers dans leur Cozy conserveront une copie, les autres contacts ne pourront plus accéder aux contenus partagés :",
-    "link": "Le partage par lien ne sera plus actif",
+    "link": "Le partage par lien ne sera plus actif.",
     "referenced": "Des photos de la sélection sont dans un album. Elles seront retirées de l'album si vous confirmez.",
     "cancel": "Annuler",
     "delete": "Supprimer"
diff --git a/src/modules/drive/DeleteConfirm.jsx b/src/modules/drive/DeleteConfirm.jsx
index e29b32a258..a449730fe2 100644
--- a/src/modules/drive/DeleteConfirm.jsx
+++ b/src/modules/drive/DeleteConfirm.jsx
@@ -3,11 +3,11 @@ import React, { useCallback, useEffect, useState } from 'react'
 import { useClient } from 'cozy-client'
 import { splitFilename } from 'cozy-client/dist/models/file'
 import { SharedDocument, SharedRecipientsList } from 'cozy-sharing'
+import Button from 'cozy-ui/transpiled/react/Buttons'
 import { ConfirmDialog } from 'cozy-ui/transpiled/react/CozyDialogs'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import Stack from 'cozy-ui/transpiled/react/Stack'
-import Button from 'cozy-ui/transpiled/react/deprecated/Button'
-import { Media, Img, Bd } from 'cozy-ui/transpiled/react/deprecated/Media'
+import Typography from 'cozy-ui/transpiled/react/Typography'
 import { useAlert } from 'cozy-ui/transpiled/react/providers/Alert'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
@@ -17,17 +17,21 @@ import { trashFiles } from 'modules/actions/utils'
 import { buildAlbumByIdQuery } from 'queries'
 
 const Message = ({ type, fileCount }) => {
-  const ico =
-    type === 'referenced' ? 'album' : type === 'shared' ? 'share' : type
+  const icon =
+    type === 'referenced' ? 'album' : type.includes('share') ? 'people' : type
 
   const { t } = useI18n()
   return (
-    <Media>
-      <Img>
-        <Icon icon={ico} color="var(--iconTextColor)" />
-      </Img>
-      <Bd className="u-pl-1-half">{t(`DeleteConfirm.${type}`, fileCount)}</Bd>
-    </Media>
+    <div className="u-flex u-flex-items-center">
+      <Icon
+        icon={icon}
+        className="u-flex-shrink-0"
+        color="var(--iconTextColor)"
+      />
+      <Typography className="u-pl-1-half">
+        {t(`DeleteConfirm.${type}`, fileCount)}
+      </Typography>
+    </div>
   )
 }
 
@@ -107,15 +111,16 @@ export const DeleteConfirm = ({
       actions={
         <>
           <Button
-            theme="secondary"
+            variant="secondary"
             onClick={onClose}
             label={t('DeleteConfirm.cancel')}
           />
           <Button
-            busy={isDeleting}
-            theme="danger"
-            label={t('DeleteConfirm.delete')}
+            variant="primary"
             onClick={onDelete}
+            label={t('DeleteConfirm.delete')}
+            color="error"
+            busy={isDeleting}
           />
         </>
       }
@@ -152,7 +157,10 @@ const DeleteConfirmWithSharingContext = ({ files, ...rest }) =>
               <Message type={shareMessageType} fileCount={files.length} />
             ) : null}
             {isSharedByMe && recipients.length > 0 ? (
-              <SharedRecipientsList className="u-ml-1" docId={files[0].id} />
+              <SharedRecipientsList
+                className="u-ml-2-half"
+                docId={files[0].id}
+              />
             ) : null}
           </DeleteConfirm>
         )
diff --git a/src/modules/drive/Toolbar/components/ShortcutCreationModal.jsx b/src/modules/drive/Toolbar/components/ShortcutCreationModal.jsx
index 3f61fe51f8..facddbff07 100644
--- a/src/modules/drive/Toolbar/components/ShortcutCreationModal.jsx
+++ b/src/modules/drive/Toolbar/components/ShortcutCreationModal.jsx
@@ -3,11 +3,11 @@ import React, { useCallback, useEffect, useState } from 'react'
 
 import { useClient } from 'cozy-client'
 import { isIOS } from 'cozy-device-helper'
+import Button from 'cozy-ui/transpiled/react/Buttons'
 import { FixedDialog } from 'cozy-ui/transpiled/react/CozyDialogs'
 import InputAdornment from 'cozy-ui/transpiled/react/InputAdornment'
 import Stack from 'cozy-ui/transpiled/react/Stack'
 import TextField from 'cozy-ui/transpiled/react/TextField'
-import Button from 'cozy-ui/transpiled/react/deprecated/Button'
 import useBrowserOffline from 'cozy-ui/transpiled/react/hooks/useBrowserOffline'
 import { useAlert } from 'cozy-ui/transpiled/react/providers/Alert'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
@@ -162,12 +162,12 @@ const ShortcutCreationModal = ({ onClose, onCreated }) => {
       actions={
         <>
           <Button
-            theme="secondary"
+            variant="secondary"
             onClick={onClose}
             label={t('Shortcut.cancel')}
           />
           <Button
-            theme="primary"
+            variant="primary"
             label={t('Shortcut.create')}
             onClick={createShortcut}
           />
diff --git a/src/modules/filelist/FileListHeaderMobile.jsx b/src/modules/filelist/FileListHeaderMobile.jsx
index d1a76c3008..bc0a436fff 100644
--- a/src/modules/filelist/FileListHeaderMobile.jsx
+++ b/src/modules/filelist/FileListHeaderMobile.jsx
@@ -1,8 +1,8 @@
 import cx from 'classnames'
 import React, { useState, useCallback } from 'react'
 
+import Button from 'cozy-ui/transpiled/react/Buttons'
 import Icon from 'cozy-ui/transpiled/react/Icon'
-import Button from 'cozy-ui/transpiled/react/deprecated/Button'
 import {
   TableHead,
   TableHeader,
@@ -66,20 +66,16 @@ const FileListHeaderMobile = ({
           )}
         >
           <Button
-            theme="action"
+            variant="text"
             onClick={() => {
               toggleThumbnailSize()
             }}
-            label={t('table.head_thumbnail_size')}
-            extension="narrow"
-            icon={
+            label={
               <Icon
                 icon={thumbnailSizeBig ? iconListMin : iconList}
                 size={17}
-                label={t('table.head_thumbnail_size')}
               />
             }
-            iconOnly
           />
         </TableHeader>
       </TableRow>
diff --git a/src/modules/filelist/FilenameInput.jsx b/src/modules/filelist/FilenameInput.jsx
index 5043b12fd3..8e0bc66b50 100644
--- a/src/modules/filelist/FilenameInput.jsx
+++ b/src/modules/filelist/FilenameInput.jsx
@@ -3,9 +3,9 @@ import { CozyFile } from 'models'
 import React, { Component } from 'react'
 
 import { isDirectory } from 'cozy-client/dist/models/file'
+import Button from 'cozy-ui/transpiled/react/Buttons'
 import { Dialog } from 'cozy-ui/transpiled/react/CozyDialogs'
 import Spinner from 'cozy-ui/transpiled/react/Spinner'
-import Button from 'cozy-ui/transpiled/react/deprecated/Button'
 import { translate } from 'cozy-ui/transpiled/react/providers/I18n'
 
 import styles from 'styles/filenameinput.styl'
@@ -157,14 +157,13 @@ class FilenameInput extends Component {
           content={t('RenameModal.description')}
           actions={
             <>
-              {' '}
               <Button
-                theme="secondary"
+                variant="secondary"
                 onClick={this.abort}
                 label={t('RenameModal.cancel')}
               />
               <Button
-                theme="primary"
+                variant="primary"
                 label={t('RenameModal.continue')}
                 onClick={this.save}
               />
diff --git a/src/modules/navigation/duck/actions.jsx b/src/modules/navigation/duck/actions.jsx
index e46c12ff7e..402dd92e8d 100644
--- a/src/modules/navigation/duck/actions.jsx
+++ b/src/modules/navigation/duck/actions.jsx
@@ -2,6 +2,7 @@ import React from 'react'
 import { showModal } from 'react-cozy-helpers'
 
 import { isDirectory } from 'cozy-client/dist/models/file'
+import { QuotaPaywall } from 'cozy-ui/transpiled/react/Paywall'
 
 import { MAX_PAYLOAD_SIZE_IN_GB } from 'constants/config'
 import { createEncryptedDir } from 'lib/encryption'
@@ -9,8 +10,6 @@ import { getEntriesTypeTranslated } from 'lib/entries'
 import logger from 'lib/logger'
 import { getFolderContent } from 'modules/selectors'
 import { addToUploadQueue } from 'modules/upload'
-import QuotaAlert from 'modules/upload/QuotaAlert'
-
 export const SORT_FOLDER = 'SORT_FOLDER'
 
 const HTTP_CODE_CONFLICT = 409
@@ -99,7 +98,7 @@ const uploadQueueProcessed =
     if (quotas.length > 0) {
       logger.warn(`Upload module triggers a quota alert: ${quotas}`)
       // quota errors have their own modal instead of a notification
-      dispatch(showModal(<QuotaAlert />))
+      dispatch(showModal(<QuotaPaywall />))
     } else if (networkErrors.length > 0) {
       logger.warn(`Upload module triggers a network error: ${networkErrors}`)
       showAlert({
diff --git a/src/modules/trash/components/DestroyConfirm.tsx b/src/modules/trash/components/DestroyConfirm.tsx
index bfc95fc28a..6ccaf4bda4 100644
--- a/src/modules/trash/components/DestroyConfirm.tsx
+++ b/src/modules/trash/components/DestroyConfirm.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
 
 import { splitFilename } from 'cozy-client/dist/models/file'
+import Button from 'cozy-ui/transpiled/react/Buttons'
 import { ConfirmDialog } from 'cozy-ui/transpiled/react/CozyDialogs'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import ForbiddenIcon from 'cozy-ui/transpiled/react/Icons/Forbidden'
@@ -9,7 +10,6 @@ import List from 'cozy-ui/transpiled/react/List'
 import ListItem from 'cozy-ui/transpiled/react/ListItem'
 import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
 import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
-import Button from 'cozy-ui/transpiled/react/deprecated/Button'
 import { useAlert } from 'cozy-ui/transpiled/react/providers/Alert'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
@@ -95,15 +95,16 @@ const DestroyConfirm: React.FC<DestroyConfirmProps> = ({
       actions={
         <>
           <Button
-            theme="secondary"
+            variant="secondary"
             onClick={onClose}
             label={t('DestroyConfirm.cancel')}
           />
           <Button
-            theme="danger"
+            variant="primary"
+            onClick={handleDestroy}
             label={t('DestroyConfirm.delete')}
+            color="error"
             busy={isBusy}
-            onClick={handleDestroy}
           />
         </>
       }
diff --git a/src/modules/trash/components/EmptyTrashConfirm.tsx b/src/modules/trash/components/EmptyTrashConfirm.tsx
index 744ecb913f..c292fcb4d0 100644
--- a/src/modules/trash/components/EmptyTrashConfirm.tsx
+++ b/src/modules/trash/components/EmptyTrashConfirm.tsx
@@ -1,5 +1,6 @@
 import React, { useCallback, useState } from 'react'
 
+import Button from 'cozy-ui/transpiled/react/Buttons'
 import { ConfirmDialog } from 'cozy-ui/transpiled/react/CozyDialogs'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import ForbiddenIcon from 'cozy-ui/transpiled/react/Icons/Forbidden'
@@ -8,7 +9,6 @@ import List from 'cozy-ui/transpiled/react/List'
 import ListItem from 'cozy-ui/transpiled/react/ListItem'
 import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
 import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
-import Button from 'cozy-ui/transpiled/react/deprecated/Button'
 import { useAlert } from 'cozy-ui/transpiled/react/providers/Alert'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
@@ -73,15 +73,16 @@ const EmptyTrashConfirm: React.FC<EmptyTrashConfirmProps> = ({
       actions={
         <>
           <Button
-            theme="secondary"
+            variant="secondary"
             onClick={onClose}
             label={t('EmptyTrashConfirm.cancel')}
           />
           <Button
-            theme="danger"
+            variant="primary"
+            onClick={handleConfirm}
             label={t('EmptyTrashConfirm.delete')}
+            color="error"
             busy={isBusy}
-            onClick={handleConfirm}
           />
         </>
       }
diff --git a/src/modules/upload/QuotaAlert.jsx b/src/modules/upload/QuotaAlert.jsx
deleted file mode 100644
index 56bb8af610..0000000000
--- a/src/modules/upload/QuotaAlert.jsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react'
-
-import { default as UIQuotaAlert } from 'cozy-ui/transpiled/react/deprecated/QuotaAlert'
-
-const QuotaAlert = ({ onClose }) => {
-  return <UIQuotaAlert onClose={onClose} />
-}
-
-export default QuotaAlert
diff --git a/src/styles/filelist.styl b/src/styles/filelist.styl
index a1152d2b4a..5b4945cd75 100644
--- a/src/styles/filelist.styl
+++ b/src/styles/filelist.styl
@@ -364,15 +364,9 @@ column-width-thumbnail-bigger = 7rem
         flex 1 1 auto
 
     .fil-content-header-action
-        padding 0
-        margin-right 1em
-
     .fil-content-file-action
         padding-right .2rem
-        margin-right 1em
-
-    .fil-content-header-action
-    .fil-content-file-action
+        margin-right 1rem
         flex 0
         box-sizing content-box
         width 100%