From e0792e28f5004316628077e27af20e17bc37505b Mon Sep 17 00:00:00 2001
From: Julie Plantey <julie.plantey@gmail.com>
Date: Sun, 31 Jul 2022 14:50:35 +0200
Subject: [PATCH 1/9] ds beta update

---
 .../pages/EditView/Header/tests/index.test.js |   2 +-
 .../pages/NoContentType/tests/index.test.js   |  97 ++---
 .../pages/NoPermissions/tests/index.test.js   |  33 +-
 .../InternalErrorPage/tests/index.test.js     |  97 ++---
 .../pages/NotFoundPage/tests/index.test.js    |  97 ++---
 .../tests/__snapshots__/index.test.js.snap    | 397 +++++++++---------
 .../SettingsNav/tests/index.test.js           |   2 +-
 .../tests/__snapshots__/index.test.js.snap    |   8 +-
 .../tests/__snapshots__/index.test.js.snap    |   4 +-
 .../tests/__snapshots__/index.test.js.snap    |   2 +-
 .../src/pages/UseCasePage/tests/index.test.js |   2 +-
 .../tests/__snapshots__/index.test.js.snap    |   4 +-
 packages/core/admin/package.json              |   4 +-
 .../tests/__snapshots__/index.test.js.snap    |   4 +-
 .../PaginationURLQuery/tests/index.test.js    |   2 +-
 packages/core/helper-plugin/package.json      |   4 +-
 .../tests/__snapshots__/index.test.js.snap    |   2 +-
 .../__snapshots__/BulkMoveDialog.test.js.snap |   4 +-
 .../EditAssetDialog.test.js.snap              |   6 +-
 .../tests/__snapshots__/index.test.js.snap    |   6 +-
 .../EditFolderDialog.test.js.snap             |   4 +-
 .../__snapshots__/SelectTree.test.js.snap     |   2 +-
 .../tests/FromComputerForm.test.js            |   4 +-
 .../PendingAssetStep.test.js.snap             |   4 +-
 .../UploadAssetDialog.test.js.snap            |   8 +-
 .../AdvancedSettings/tests/index.test.js      | 323 +++++++-------
 .../pages/EmailTemplates/tests/index.test.js  | 169 ++++----
 .../src/pages/Providers/tests/index.test.js   |  23 +-
 .../Roles/CreatePage/tests/index.test.js      | 185 ++++----
 .../pages/Roles/EditPage/tests/index.test.js  | 185 ++++----
 yarn.lock                                     |  25 ++
 31 files changed, 860 insertions(+), 849 deletions(-)

diff --git a/packages/core/admin/admin/src/content-manager/pages/EditView/Header/tests/index.test.js b/packages/core/admin/admin/src/content-manager/pages/EditView/Header/tests/index.test.js
index f2647750a0..990cbe2e7c 100644
--- a/packages/core/admin/admin/src/content-manager/pages/EditView/Header/tests/index.test.js
+++ b/packages/core/admin/admin/src/content-manager/pages/EditView/Header/tests/index.test.js
@@ -125,7 +125,7 @@ describe('CONTENT MANAGER | EditView | Header', () => {
         border: 1px solid #4945ff;
       }
 
-      .c12 .sc-ezHhwS {
+      .c12 .sc-gJbFto {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
diff --git a/packages/core/admin/admin/src/content-manager/pages/NoContentType/tests/index.test.js b/packages/core/admin/admin/src/content-manager/pages/NoContentType/tests/index.test.js
index 2ccf4dd812..7b24469a2a 100644
--- a/packages/core/admin/admin/src/content-manager/pages/NoContentType/tests/index.test.js
+++ b/packages/core/admin/admin/src/content-manager/pages/NoContentType/tests/index.test.js
@@ -30,29 +30,29 @@ describe('CONTENT MANAGER | pages | NoContentType', () => {
     );
 
     expect(firstChild).toMatchInlineSnapshot(`
-      .c12 {
+      .c11 {
         color: #666687;
         font-weight: 500;
         font-size: 1rem;
         line-height: 1.25;
       }
 
-      .c7 {
+      .c6 {
         background: #ffffff;
         padding: 64px;
         border-radius: 4px;
         box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
       }
 
-      .c9 {
+      .c8 {
         padding-bottom: 24px;
       }
 
-      .c11 {
+      .c10 {
         padding-bottom: 16px;
       }
 
-      .c8 {
+      .c7 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -67,22 +67,22 @@ describe('CONTENT MANAGER | pages | NoContentType', () => {
         text-align: center;
       }
 
-      .c10 svg {
+      .c9 svg {
         height: 5.5rem;
       }
 
-      .c18 {
+      .c17 {
         font-weight: 600;
         color: #32324d;
         font-size: 0.75rem;
         line-height: 1.33;
       }
 
-      .c16 {
+      .c15 {
         padding-right: 8px;
       }
 
-      .c13 {
+      .c12 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -96,21 +96,21 @@ describe('CONTENT MANAGER | pages | NoContentType', () => {
         outline: none;
       }
 
-      .c13 svg {
+      .c12 svg {
         height: 12px;
         width: 12px;
       }
 
-      .c13 svg > g,
-      .c13 svg path {
+      .c12 svg > g,
+      .c12 svg path {
         fill: #ffffff;
       }
 
-      .c13[aria-disabled='true'] {
+      .c12[aria-disabled='true'] {
         pointer-events: none;
       }
 
-      .c13:after {
+      .c12:after {
         -webkit-transition-property: all;
         transition-property: all;
         -webkit-transition-duration: 0.2s;
@@ -125,11 +125,11 @@ describe('CONTENT MANAGER | pages | NoContentType', () => {
         border: 2px solid transparent;
       }
 
-      .c13:focus-visible {
+      .c12:focus-visible {
         outline: none;
       }
 
-      .c13:focus-visible:after {
+      .c12:focus-visible:after {
         border-radius: 8px;
         content: '';
         position: absolute;
@@ -140,7 +140,7 @@ describe('CONTENT MANAGER | pages | NoContentType', () => {
         border: 2px solid #4945ff;
       }
 
-      .c14 {
+      .c13 {
         padding: 8px 16px;
         background: #4945ff;
         border: 1px solid #4945ff;
@@ -155,7 +155,7 @@ describe('CONTENT MANAGER | pages | NoContentType', () => {
         text-decoration: none;
       }
 
-      .c14 .c15 {
+      .c13 .c14 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -166,62 +166,62 @@ describe('CONTENT MANAGER | pages | NoContentType', () => {
         align-items: center;
       }
 
-      .c14 .c17 {
+      .c13 .c16 {
         color: #ffffff;
       }
 
-      .c14[aria-disabled='true'] {
+      .c13[aria-disabled='true'] {
         border: 1px solid #dcdce4;
         background: #eaeaef;
       }
 
-      .c14[aria-disabled='true'] .c17 {
+      .c13[aria-disabled='true'] .c16 {
         color: #666687;
       }
 
-      .c14[aria-disabled='true'] svg > g,
-      .c14[aria-disabled='true'] svg path {
+      .c13[aria-disabled='true'] svg > g,
+      .c13[aria-disabled='true'] svg path {
         fill: #666687;
       }
 
-      .c14[aria-disabled='true']:active {
+      .c13[aria-disabled='true']:active {
         border: 1px solid #dcdce4;
         background: #eaeaef;
       }
 
-      .c14[aria-disabled='true']:active .c17 {
+      .c13[aria-disabled='true']:active .c16 {
         color: #666687;
       }
 
-      .c14[aria-disabled='true']:active svg > g,
-      .c14[aria-disabled='true']:active svg path {
+      .c13[aria-disabled='true']:active svg > g,
+      .c13[aria-disabled='true']:active svg path {
         fill: #666687;
       }
 
-      .c14:hover {
+      .c13:hover {
         background-color: #ffffff;
       }
 
-      .c14:active {
+      .c13:active {
         background-color: #ffffff;
         border: 1px solid #4945ff;
       }
 
-      .c14:active .c17 {
+      .c13:active .c16 {
         color: #4945ff;
       }
 
-      .c14:active svg > g,
-      .c14:active svg path {
+      .c13:active svg > g,
+      .c13:active svg path {
         fill: #4945ff;
       }
 
-      .c14 .c17 {
+      .c13 .c16 {
         color: #271fe0;
       }
 
-      .c14 svg > g,
-      .c14 svg path {
+      .c13 svg > g,
+      .c13 svg path {
         fill: #271fe0;
       }
 
@@ -237,7 +237,7 @@ describe('CONTENT MANAGER | pages | NoContentType', () => {
         padding-left: 56px;
       }
 
-      .c6 {
+      .c5 {
         padding-right: 56px;
         padding-left: 56px;
       }
@@ -281,12 +281,6 @@ describe('CONTENT MANAGER | pages | NoContentType', () => {
         line-height: 1.25;
       }
 
-      .c5 {
-        color: #666687;
-        font-size: 1rem;
-        line-height: 1.5;
-      }
-
       <main
         aria-labelledby="main-content-title"
         class="c0"
@@ -313,20 +307,17 @@ describe('CONTENT MANAGER | pages | NoContentType', () => {
                 </h1>
               </div>
             </div>
-            <p
-              class="c5"
-            />
           </div>
         </div>
         <div
-          class="c6"
+          class="c5"
         >
           <div
-            class="c7 c8"
+            class="c6 c7"
           >
             <div
               aria-hidden="true"
-              class="c9 c10"
+              class="c8 c9"
             >
               <svg
                 fill="none"
@@ -392,23 +383,23 @@ describe('CONTENT MANAGER | pages | NoContentType', () => {
               </svg>
             </div>
             <div
-              class="c11"
+              class="c10"
             >
               <p
-                class="c12"
+                class="c11"
               >
                 You don't have any content yet, we recommend you to create your first Content-Type.
               </p>
             </div>
             <a
               aria-disabled="false"
-              class="c13 c14"
+              class="c12 c13"
               href="/plugins/content-type-builder/content-types/create-content-type"
               variant="secondary"
             >
               <div
                 aria-hidden="true"
-                class="c15 c16"
+                class="c14 c15"
               >
                 <svg
                   fill="none"
@@ -424,7 +415,7 @@ describe('CONTENT MANAGER | pages | NoContentType', () => {
                 </svg>
               </div>
               <span
-                class="c17 c18"
+                class="c16 c17"
               >
                 Create your first Content-type
               </span>
diff --git a/packages/core/admin/admin/src/content-manager/pages/NoPermissions/tests/index.test.js b/packages/core/admin/admin/src/content-manager/pages/NoPermissions/tests/index.test.js
index cb27b22f5a..5115a18ff3 100644
--- a/packages/core/admin/admin/src/content-manager/pages/NoPermissions/tests/index.test.js
+++ b/packages/core/admin/admin/src/content-manager/pages/NoPermissions/tests/index.test.js
@@ -32,29 +32,29 @@ describe('<NoPermissions />', () => {
     );
 
     expect(firstChild).toMatchInlineSnapshot(`
-      .c12 {
+      .c11 {
         color: #666687;
         font-weight: 500;
         font-size: 1rem;
         line-height: 1.25;
       }
 
-      .c7 {
+      .c6 {
         background: #ffffff;
         padding: 64px;
         border-radius: 4px;
         box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
       }
 
-      .c9 {
+      .c8 {
         padding-bottom: 24px;
       }
 
-      .c11 {
+      .c10 {
         padding-bottom: 16px;
       }
 
-      .c8 {
+      .c7 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -69,7 +69,7 @@ describe('<NoPermissions />', () => {
         text-align: center;
       }
 
-      .c10 svg {
+      .c9 svg {
         height: 5.5rem;
       }
 
@@ -85,7 +85,7 @@ describe('<NoPermissions />', () => {
         padding-left: 56px;
       }
 
-      .c6 {
+      .c5 {
         padding-right: 56px;
         padding-left: 56px;
       }
@@ -129,12 +129,6 @@ describe('<NoPermissions />', () => {
         line-height: 1.25;
       }
 
-      .c5 {
-        color: #666687;
-        font-size: 1rem;
-        line-height: 1.5;
-      }
-
       <main
         aria-labelledby="main-content-title"
         class="c0"
@@ -161,20 +155,17 @@ describe('<NoPermissions />', () => {
                 </h1>
               </div>
             </div>
-            <p
-              class="c5"
-            />
           </div>
         </div>
         <div
-          class="c6"
+          class="c5"
         >
           <div
-            class="c7 c8"
+            class="c6 c7"
           >
             <div
               aria-hidden="true"
-              class="c9 c10"
+              class="c8 c9"
             >
               <svg
                 fill="none"
@@ -250,10 +241,10 @@ describe('<NoPermissions />', () => {
               </svg>
             </div>
             <div
-              class="c11"
+              class="c10"
             >
               <p
-                class="c12"
+                class="c11"
               >
                 You don't have the permissions to access that content
               </p>
diff --git a/packages/core/admin/admin/src/pages/InternalErrorPage/tests/index.test.js b/packages/core/admin/admin/src/pages/InternalErrorPage/tests/index.test.js
index 218217f490..bf309e1a9e 100644
--- a/packages/core/admin/admin/src/pages/InternalErrorPage/tests/index.test.js
+++ b/packages/core/admin/admin/src/pages/InternalErrorPage/tests/index.test.js
@@ -25,29 +25,29 @@ describe('InternalErrorPage', () => {
     } = render(App);
 
     expect(firstChild).toMatchInlineSnapshot(`
-      .c12 {
+      .c11 {
         color: #666687;
         font-weight: 500;
         font-size: 1rem;
         line-height: 1.25;
       }
 
-      .c7 {
+      .c6 {
         background: #ffffff;
         padding: 64px;
         border-radius: 4px;
         box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
       }
 
-      .c9 {
+      .c8 {
         padding-bottom: 24px;
       }
 
-      .c11 {
+      .c10 {
         padding-bottom: 16px;
       }
 
-      .c8 {
+      .c7 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -62,22 +62,22 @@ describe('InternalErrorPage', () => {
         text-align: center;
       }
 
-      .c10 svg {
+      .c9 svg {
         height: 5.5rem;
       }
 
-      .c16 {
+      .c15 {
         font-weight: 600;
         color: #32324d;
         font-size: 0.75rem;
         line-height: 1.33;
       }
 
-      .c18 {
+      .c17 {
         padding-left: 8px;
       }
 
-      .c13 {
+      .c12 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -91,21 +91,21 @@ describe('InternalErrorPage', () => {
         outline: none;
       }
 
-      .c13 svg {
+      .c12 svg {
         height: 12px;
         width: 12px;
       }
 
-      .c13 svg > g,
-      .c13 svg path {
+      .c12 svg > g,
+      .c12 svg path {
         fill: #ffffff;
       }
 
-      .c13[aria-disabled='true'] {
+      .c12[aria-disabled='true'] {
         pointer-events: none;
       }
 
-      .c13:after {
+      .c12:after {
         -webkit-transition-property: all;
         transition-property: all;
         -webkit-transition-duration: 0.2s;
@@ -120,11 +120,11 @@ describe('InternalErrorPage', () => {
         border: 2px solid transparent;
       }
 
-      .c13:focus-visible {
+      .c12:focus-visible {
         outline: none;
       }
 
-      .c13:focus-visible:after {
+      .c12:focus-visible:after {
         border-radius: 8px;
         content: '';
         position: absolute;
@@ -135,7 +135,7 @@ describe('InternalErrorPage', () => {
         border: 2px solid #4945ff;
       }
 
-      .c14 {
+      .c13 {
         padding: 8px 16px;
         background: #4945ff;
         border: 1px solid #4945ff;
@@ -150,7 +150,7 @@ describe('InternalErrorPage', () => {
         text-decoration: none;
       }
 
-      .c14 .c17 {
+      .c13 .c16 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -161,62 +161,62 @@ describe('InternalErrorPage', () => {
         align-items: center;
       }
 
-      .c14 .c15 {
+      .c13 .c14 {
         color: #ffffff;
       }
 
-      .c14[aria-disabled='true'] {
+      .c13[aria-disabled='true'] {
         border: 1px solid #dcdce4;
         background: #eaeaef;
       }
 
-      .c14[aria-disabled='true'] .c15 {
+      .c13[aria-disabled='true'] .c14 {
         color: #666687;
       }
 
-      .c14[aria-disabled='true'] svg > g,
-      .c14[aria-disabled='true'] svg path {
+      .c13[aria-disabled='true'] svg > g,
+      .c13[aria-disabled='true'] svg path {
         fill: #666687;
       }
 
-      .c14[aria-disabled='true']:active {
+      .c13[aria-disabled='true']:active {
         border: 1px solid #dcdce4;
         background: #eaeaef;
       }
 
-      .c14[aria-disabled='true']:active .c15 {
+      .c13[aria-disabled='true']:active .c14 {
         color: #666687;
       }
 
-      .c14[aria-disabled='true']:active svg > g,
-      .c14[aria-disabled='true']:active svg path {
+      .c13[aria-disabled='true']:active svg > g,
+      .c13[aria-disabled='true']:active svg path {
         fill: #666687;
       }
 
-      .c14:hover {
+      .c13:hover {
         background-color: #ffffff;
       }
 
-      .c14:active {
+      .c13:active {
         background-color: #ffffff;
         border: 1px solid #4945ff;
       }
 
-      .c14:active .c15 {
+      .c13:active .c14 {
         color: #4945ff;
       }
 
-      .c14:active svg > g,
-      .c14:active svg path {
+      .c13:active svg > g,
+      .c13:active svg path {
         fill: #4945ff;
       }
 
-      .c14 .c15 {
+      .c13 .c14 {
         color: #271fe0;
       }
 
-      .c14 svg > g,
-      .c14 svg path {
+      .c13 svg > g,
+      .c13 svg path {
         fill: #271fe0;
       }
 
@@ -232,7 +232,7 @@ describe('InternalErrorPage', () => {
         padding-left: 56px;
       }
 
-      .c6 {
+      .c5 {
         padding-right: 56px;
         padding-left: 56px;
       }
@@ -276,12 +276,6 @@ describe('InternalErrorPage', () => {
         line-height: 1.25;
       }
 
-      .c5 {
-        color: #666687;
-        font-size: 1rem;
-        line-height: 1.5;
-      }
-
       <main
         aria-labelledby="title"
         class="c0"
@@ -309,20 +303,17 @@ describe('InternalErrorPage', () => {
                 </h1>
               </div>
             </div>
-            <p
-              class="c5"
-            />
           </div>
         </div>
         <div
-          class="c6"
+          class="c5"
         >
           <div
-            class="c7 c8"
+            class="c6 c7"
           >
             <div
               aria-hidden="true"
-              class="c9 c10"
+              class="c8 c9"
             >
               <svg
                 fill="none"
@@ -401,10 +392,10 @@ describe('InternalErrorPage', () => {
               </svg>
             </div>
             <div
-              class="c11"
+              class="c10"
             >
               <p
-                class="c12"
+                class="c11"
               >
                 An error occured
               </p>
@@ -412,18 +403,18 @@ describe('InternalErrorPage', () => {
             <a
               aria-current="page"
               aria-disabled="false"
-              class="c13 c14 active"
+              class="c12 c13 active"
               href="/"
               variant="secondary"
             >
               <span
-                class="c15 c16"
+                class="c14 c15"
               >
                 Back to homepage
               </span>
               <div
                 aria-hidden="true"
-                class="c17 c18"
+                class="c16 c17"
               >
                 <svg
                   fill="none"
diff --git a/packages/core/admin/admin/src/pages/NotFoundPage/tests/index.test.js b/packages/core/admin/admin/src/pages/NotFoundPage/tests/index.test.js
index 96ad3d6e29..3913dab124 100644
--- a/packages/core/admin/admin/src/pages/NotFoundPage/tests/index.test.js
+++ b/packages/core/admin/admin/src/pages/NotFoundPage/tests/index.test.js
@@ -25,29 +25,29 @@ describe('NotFoundPage', () => {
     } = render(App);
 
     expect(firstChild).toMatchInlineSnapshot(`
-      .c12 {
+      .c11 {
         color: #666687;
         font-weight: 500;
         font-size: 1rem;
         line-height: 1.25;
       }
 
-      .c7 {
+      .c6 {
         background: #ffffff;
         padding: 64px;
         border-radius: 4px;
         box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
       }
 
-      .c9 {
+      .c8 {
         padding-bottom: 24px;
       }
 
-      .c11 {
+      .c10 {
         padding-bottom: 16px;
       }
 
-      .c8 {
+      .c7 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -62,22 +62,22 @@ describe('NotFoundPage', () => {
         text-align: center;
       }
 
-      .c10 svg {
+      .c9 svg {
         height: 5.5rem;
       }
 
-      .c16 {
+      .c15 {
         font-weight: 600;
         color: #32324d;
         font-size: 0.75rem;
         line-height: 1.33;
       }
 
-      .c18 {
+      .c17 {
         padding-left: 8px;
       }
 
-      .c13 {
+      .c12 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -91,21 +91,21 @@ describe('NotFoundPage', () => {
         outline: none;
       }
 
-      .c13 svg {
+      .c12 svg {
         height: 12px;
         width: 12px;
       }
 
-      .c13 svg > g,
-      .c13 svg path {
+      .c12 svg > g,
+      .c12 svg path {
         fill: #ffffff;
       }
 
-      .c13[aria-disabled='true'] {
+      .c12[aria-disabled='true'] {
         pointer-events: none;
       }
 
-      .c13:after {
+      .c12:after {
         -webkit-transition-property: all;
         transition-property: all;
         -webkit-transition-duration: 0.2s;
@@ -120,11 +120,11 @@ describe('NotFoundPage', () => {
         border: 2px solid transparent;
       }
 
-      .c13:focus-visible {
+      .c12:focus-visible {
         outline: none;
       }
 
-      .c13:focus-visible:after {
+      .c12:focus-visible:after {
         border-radius: 8px;
         content: '';
         position: absolute;
@@ -135,7 +135,7 @@ describe('NotFoundPage', () => {
         border: 2px solid #4945ff;
       }
 
-      .c14 {
+      .c13 {
         padding: 8px 16px;
         background: #4945ff;
         border: 1px solid #4945ff;
@@ -150,7 +150,7 @@ describe('NotFoundPage', () => {
         text-decoration: none;
       }
 
-      .c14 .c17 {
+      .c13 .c16 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -161,62 +161,62 @@ describe('NotFoundPage', () => {
         align-items: center;
       }
 
-      .c14 .c15 {
+      .c13 .c14 {
         color: #ffffff;
       }
 
-      .c14[aria-disabled='true'] {
+      .c13[aria-disabled='true'] {
         border: 1px solid #dcdce4;
         background: #eaeaef;
       }
 
-      .c14[aria-disabled='true'] .c15 {
+      .c13[aria-disabled='true'] .c14 {
         color: #666687;
       }
 
-      .c14[aria-disabled='true'] svg > g,
-      .c14[aria-disabled='true'] svg path {
+      .c13[aria-disabled='true'] svg > g,
+      .c13[aria-disabled='true'] svg path {
         fill: #666687;
       }
 
-      .c14[aria-disabled='true']:active {
+      .c13[aria-disabled='true']:active {
         border: 1px solid #dcdce4;
         background: #eaeaef;
       }
 
-      .c14[aria-disabled='true']:active .c15 {
+      .c13[aria-disabled='true']:active .c14 {
         color: #666687;
       }
 
-      .c14[aria-disabled='true']:active svg > g,
-      .c14[aria-disabled='true']:active svg path {
+      .c13[aria-disabled='true']:active svg > g,
+      .c13[aria-disabled='true']:active svg path {
         fill: #666687;
       }
 
-      .c14:hover {
+      .c13:hover {
         background-color: #ffffff;
       }
 
-      .c14:active {
+      .c13:active {
         background-color: #ffffff;
         border: 1px solid #4945ff;
       }
 
-      .c14:active .c15 {
+      .c13:active .c14 {
         color: #4945ff;
       }
 
-      .c14:active svg > g,
-      .c14:active svg path {
+      .c13:active svg > g,
+      .c13:active svg path {
         fill: #4945ff;
       }
 
-      .c14 .c15 {
+      .c13 .c14 {
         color: #271fe0;
       }
 
-      .c14 svg > g,
-      .c14 svg path {
+      .c13 svg > g,
+      .c13 svg path {
         fill: #271fe0;
       }
 
@@ -232,7 +232,7 @@ describe('NotFoundPage', () => {
         padding-left: 56px;
       }
 
-      .c6 {
+      .c5 {
         padding-right: 56px;
         padding-left: 56px;
       }
@@ -276,12 +276,6 @@ describe('NotFoundPage', () => {
         line-height: 1.25;
       }
 
-      .c5 {
-        color: #666687;
-        font-size: 1rem;
-        line-height: 1.5;
-      }
-
       <main
         aria-labelledby="title"
         class="c0"
@@ -309,20 +303,17 @@ describe('NotFoundPage', () => {
                 </h1>
               </div>
             </div>
-            <p
-              class="c5"
-            />
           </div>
         </div>
         <div
-          class="c6"
+          class="c5"
         >
           <div
-            class="c7 c8"
+            class="c6 c7"
           >
             <div
               aria-hidden="true"
-              class="c9 c10"
+              class="c8 c9"
             >
               <svg
                 fill="none"
@@ -401,10 +392,10 @@ describe('NotFoundPage', () => {
               </svg>
             </div>
             <div
-              class="c11"
+              class="c10"
             >
               <p
-                class="c12"
+                class="c11"
               >
                 Oops! We can't seem to find the page you're looging for...
               </p>
@@ -412,18 +403,18 @@ describe('NotFoundPage', () => {
             <a
               aria-current="page"
               aria-disabled="false"
-              class="c13 c14 active"
+              class="c12 c13 active"
               href="/"
               variant="secondary"
             >
               <span
-                class="c15 c16"
+                class="c14 c15"
               >
                 Back to homepage
               </span>
               <div
                 aria-hidden="true"
-                class="c17 c18"
+                class="c16 c17"
               >
                 <svg
                   fill="none"
diff --git a/packages/core/admin/admin/src/pages/ProfilePage/tests/__snapshots__/index.test.js.snap b/packages/core/admin/admin/src/pages/ProfilePage/tests/__snapshots__/index.test.js.snap
index 92b9087073..16192db9ce 100644
--- a/packages/core/admin/admin/src/pages/ProfilePage/tests/__snapshots__/index.test.js.snap
+++ b/packages/core/admin/admin/src/pages/ProfilePage/tests/__snapshots__/index.test.js.snap
@@ -1,11 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
-.c13 {
+.c12 {
   padding-bottom: 56px;
 }
 
-.c17 {
+.c16 {
   background: #ffffff;
   padding-top: 24px;
   padding-right: 32px;
@@ -156,7 +156,7 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
   fill: #ffffff;
 }
 
-.c34 {
+.c33 {
   border: none;
   background: transparent;
   font-size: 1.6rem;
@@ -172,7 +172,7 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
   align-items: center;
 }
 
-.c44 {
+.c43 {
   position: absolute;
   left: 0;
   right: 0;
@@ -183,24 +183,24 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
   border: none;
 }
 
-.c44:focus {
+.c43:focus {
   outline: none;
 }
 
-.c44[aria-disabled='true'] {
+.c43[aria-disabled='true'] {
   cursor: not-allowed;
 }
 
-.c47 {
+.c46 {
   padding-right: 16px;
   padding-left: 16px;
 }
 
-.c50 {
+.c49 {
   padding-left: 12px;
 }
 
-.c39 {
+.c38 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -214,7 +214,7 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
   flex-direction: column;
 }
 
-.c42 {
+.c41 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -228,7 +228,7 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
   flex-direction: row;
 }
 
-.c45 {
+.c44 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -246,14 +246,14 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
   justify-content: space-between;
 }
 
-.c41 {
+.c40 {
   font-weight: 600;
   color: #32324d;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c48 {
+.c47 {
   color: #32324d;
   display: block;
   white-space: nowrap;
@@ -263,22 +263,22 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
   line-height: 1.43;
 }
 
-.c52 {
+.c51 {
   color: #666687;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c40 > * {
+.c39 > * {
   margin-top: 0;
   margin-bottom: 0;
 }
 
-.c40 > * + * {
+.c39 > * + * {
   margin-top: 4px;
 }
 
-.c43 {
+.c42 {
   position: relative;
   border: 1px solid #dcdce4;
   padding-right: 12px;
@@ -294,28 +294,28 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
   transition-duration: 0.2s;
 }
 
-.c43:focus-within {
+.c42:focus-within {
   border: 1px solid #4945ff;
   box-shadow: #4945ff 0px 0px 0px 2px;
 }
 
-.c49 {
+.c48 {
   background: transparent;
   border: none;
   position: relative;
   z-index: 1;
 }
 
-.c49 svg {
+.c48 svg {
   height: 0.6875rem;
   width: 0.6875rem;
 }
 
-.c49 svg path {
+.c48 svg path {
   fill: #666687;
 }
 
-.c51 {
+.c50 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -324,15 +324,15 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
   border: none;
 }
 
-.c51 svg {
+.c50 svg {
   width: 0.375rem;
 }
 
-.c46 {
+.c45 {
   width: 100%;
 }
 
-.c15 {
+.c14 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -346,39 +346,39 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
   flex-direction: column;
 }
 
-.c16 > * {
+.c15 > * {
   margin-top: 0;
   margin-bottom: 0;
 }
 
-.c16 > * + * {
+.c15 > * + * {
   margin-top: 24px;
 }
 
-.c18 > * {
+.c17 > * {
   margin-top: 0;
   margin-bottom: 0;
 }
 
-.c18 > * + * {
+.c17 > * + * {
   margin-top: 16px;
 }
 
-.c36 > * {
+.c35 > * {
   margin-top: 0;
   margin-bottom: 0;
 }
 
-.c36 > * + * {
+.c35 > * + * {
   margin-top: 4px;
 }
 
-.c33 {
+.c32 {
   padding-right: 12px;
   padding-left: 8px;
 }
 
-.c22 {
+.c21 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -392,7 +392,7 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
   flex-direction: column;
 }
 
-.c25 {
+.c24 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -406,7 +406,7 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
   flex-direction: row;
 }
 
-.c28 {
+.c27 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -424,29 +424,73 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
   justify-content: space-between;
 }
 
-.c24 {
+.c23 {
   font-weight: 600;
   color: #32324d;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c26 {
+.c25 {
   color: #d02b20;
   font-size: 0.875rem;
   line-height: 1.43;
 }
 
-.c27 {
+.c26 {
   line-height: 0;
 }
 
+.c29 {
+  border: none;
+  border-radius: 4px;
+  padding-bottom: 0.65625rem;
+  padding-left: 16px;
+  padding-right: 16px;
+  padding-top: 0.65625rem;
+  color: #32324d;
+  font-weight: 400;
+  font-size: 0.875rem;
+  display: block;
+  width: 100%;
+  background: inherit;
+}
+
+.c29::-webkit-input-placeholder {
+  color: #8e8ea9;
+  opacity: 1;
+}
+
+.c29::-moz-placeholder {
+  color: #8e8ea9;
+  opacity: 1;
+}
+
+.c29:-ms-input-placeholder {
+  color: #8e8ea9;
+  opacity: 1;
+}
+
+.c29::placeholder {
+  color: #8e8ea9;
+  opacity: 1;
+}
+
+.c29[aria-disabled='true'] {
+  color: inherit;
+}
+
+.c29:focus {
+  outline: none;
+  box-shadow: none;
+}
+
 .c30 {
   border: none;
   border-radius: 4px;
   padding-bottom: 0.65625rem;
   padding-left: 16px;
-  padding-right: 16px;
+  padding-right: 0;
   padding-top: 0.65625rem;
   color: #32324d;
   font-weight: 400;
@@ -485,51 +529,7 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
   box-shadow: none;
 }
 
-.c31 {
-  border: none;
-  border-radius: 4px;
-  padding-bottom: 0.65625rem;
-  padding-left: 16px;
-  padding-right: 0;
-  padding-top: 0.65625rem;
-  color: #32324d;
-  font-weight: 400;
-  font-size: 0.875rem;
-  display: block;
-  width: 100%;
-  background: inherit;
-}
-
-.c31::-webkit-input-placeholder {
-  color: #8e8ea9;
-  opacity: 1;
-}
-
-.c31::-moz-placeholder {
-  color: #8e8ea9;
-  opacity: 1;
-}
-
-.c31:-ms-input-placeholder {
-  color: #8e8ea9;
-  opacity: 1;
-}
-
-.c31::placeholder {
-  color: #8e8ea9;
-  opacity: 1;
-}
-
-.c31[aria-disabled='true'] {
-  color: inherit;
-}
-
-.c31:focus {
-  outline: none;
-  box-shadow: none;
-}
-
-.c29 {
+.c28 {
   border: 1px solid #dcdce4;
   border-radius: 4px;
   background: #ffffff;
@@ -541,28 +541,28 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
   transition-duration: 0.2s;
 }
 
-.c29:focus-within {
+.c28:focus-within {
   border: 1px solid #4945ff;
   box-shadow: #4945ff 0px 0px 0px 2px;
 }
 
-.c23 > * {
+.c22 > * {
   margin-top: 0;
   margin-bottom: 0;
 }
 
-.c23 > * + * {
+.c22 > * + * {
   margin-top: 4px;
 }
 
-.c19 {
+.c18 {
   color: #32324d;
   font-weight: 500;
   font-size: 1rem;
   line-height: 1.25;
 }
 
-.c37 {
+.c36 {
   color: #32324d;
   font-size: 0.875rem;
   line-height: 1.43;
@@ -580,7 +580,7 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
   padding-left: 56px;
 }
 
-.c14 {
+.c13 {
   padding-right: 56px;
   padding-left: 56px;
 }
@@ -624,48 +624,42 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
   line-height: 1.25;
 }
 
-.c12 {
-  color: #666687;
-  font-size: 1rem;
-  line-height: 1.5;
-}
-
-.c20 {
+.c19 {
   display: grid;
   grid-template-columns: repeat(12,1fr);
   gap: 20px;
 }
 
-.c21 {
+.c20 {
   grid-column: span 6;
   max-width: 100%;
 }
 
-.c38 {
+.c37 {
   color: #4945ff;
 }
 
-.c32::-ms-reveal {
+.c31::-ms-reveal {
   display: none;
 }
 
-.c35 svg {
+.c34 svg {
   height: 1rem;
   width: 1rem;
 }
 
-.c35 svg path {
+.c34 svg path {
   fill: #666687;
 }
 
 @media (max-width:68.75rem) {
-  .c21 {
+  .c20 {
     grid-column: span 12;
   }
 }
 
 @media (max-width:34.375rem) {
-  .c21 {
+  .c20 {
     grid-column: span;
   }
 }
@@ -729,38 +723,35 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
             </span>
           </button>
         </div>
-        <p
-          class="c12"
-        />
       </div>
     </div>
     <div
-      class="c13"
+      class="c12"
     >
       <div
-        class="c14"
+        class="c13"
       >
         <div
-          class="c15 c16"
+          class="c14 c15"
           spacing="6"
         >
           <div
-            class="c17"
+            class="c16"
           >
             <div
-              class="c15 c18"
+              class="c14 c17"
               spacing="4"
             >
               <h2
-                class="c19"
+                class="c18"
               >
                 Profile
               </h2>
               <div
-                class="c20"
+                class="c19"
               >
                 <div
-                  class="c21"
+                  class="c20"
                 >
                   <div
                     class=""
@@ -768,32 +759,32 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
                     <div>
                       <div>
                         <div
-                          class="c22 c23"
+                          class="c21 c22"
                           spacing="1"
                         >
                           <label
-                            class="c24"
+                            class="c23"
                             for="firstname"
                             required=""
                           >
                             <div
-                              class="c25"
+                              class="c24"
                             >
                               First name
                               <span
-                                class="c26 c27"
+                                class="c25 c26"
                               >
                                 *
                               </span>
                             </div>
                           </label>
                           <div
-                            class="c28 c29"
+                            class="c27 c28"
                           >
                             <input
                               aria-disabled="false"
                               aria-invalid="false"
-                              class="c30"
+                              class="c29"
                               id="firstname"
                               name="firstname"
                               placeholder=""
@@ -807,7 +798,7 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
                   </div>
                 </div>
                 <div
-                  class="c21"
+                  class="c20"
                 >
                   <div
                     class=""
@@ -815,26 +806,26 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
                     <div>
                       <div>
                         <div
-                          class="c22 c23"
+                          class="c21 c22"
                           spacing="1"
                         >
                           <label
-                            class="c24"
+                            class="c23"
                             for="lastname"
                           >
                             <div
-                              class="c25"
+                              class="c24"
                             >
                               Last name
                             </div>
                           </label>
                           <div
-                            class="c28 c29"
+                            class="c27 c28"
                           >
                             <input
                               aria-disabled="false"
                               aria-invalid="false"
-                              class="c30"
+                              class="c29"
                               id="lastname"
                               name="lastname"
                               placeholder=""
@@ -848,7 +839,7 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
                   </div>
                 </div>
                 <div
-                  class="c21"
+                  class="c20"
                 >
                   <div
                     class=""
@@ -856,32 +847,32 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
                     <div>
                       <div>
                         <div
-                          class="c22 c23"
+                          class="c21 c22"
                           spacing="1"
                         >
                           <label
-                            class="c24"
+                            class="c23"
                             for="email"
                             required=""
                           >
                             <div
-                              class="c25"
+                              class="c24"
                             >
                               Email
                               <span
-                                class="c26 c27"
+                                class="c25 c26"
                               >
                                 *
                               </span>
                             </div>
                           </label>
                           <div
-                            class="c28 c29"
+                            class="c27 c28"
                           >
                             <input
                               aria-disabled="false"
                               aria-invalid="false"
-                              class="c30"
+                              class="c29"
                               id="email"
                               name="email"
                               placeholder=""
@@ -895,7 +886,7 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
                   </div>
                 </div>
                 <div
-                  class="c21"
+                  class="c20"
                 >
                   <div
                     class=""
@@ -903,26 +894,26 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
                     <div>
                       <div>
                         <div
-                          class="c22 c23"
+                          class="c21 c22"
                           spacing="1"
                         >
                           <label
-                            class="c24"
+                            class="c23"
                             for="username"
                           >
                             <div
-                              class="c25"
+                              class="c24"
                             >
                               Username
                             </div>
                           </label>
                           <div
-                            class="c28 c29"
+                            class="c27 c28"
                           >
                             <input
                               aria-disabled="false"
                               aria-invalid="false"
-                              class="c30"
+                              class="c29"
                               id="username"
                               name="username"
                               placeholder=""
@@ -939,22 +930,22 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
             </div>
           </div>
           <div
-            class="c17"
+            class="c16"
           >
             <div
-              class="c15 c18"
+              class="c14 c17"
               spacing="4"
             >
               <h2
-                class="c19"
+                class="c18"
               >
                 Change password
               </h2>
               <div
-                class="c20"
+                class="c19"
               >
                 <div
-                  class="c21"
+                  class="c20"
                 >
                   <div
                     class=""
@@ -962,37 +953,37 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
                     <div>
                       <div>
                         <div
-                          class="c22 c23"
+                          class="c21 c22"
                           spacing="1"
                         >
                           <label
-                            class="c24"
+                            class="c23"
                             for="textinput-1"
                           >
                             <div
-                              class="c25"
+                              class="c24"
                             >
                               Current Password
                             </div>
                           </label>
                           <div
-                            class="c28 c29"
+                            class="c27 c28"
                           >
                             <input
                               aria-disabled="false"
                               aria-invalid="false"
-                              class="c31 c32"
+                              class="c30 c31"
                               id="textinput-1"
                               name="currentPassword"
                               type="password"
                               value=""
                             />
                             <div
-                              class="c33"
+                              class="c32"
                             >
                               <button
                                 aria-label="Hide password"
-                                class="c34 c35"
+                                class="c33 c34"
                                 type="button"
                               >
                                 <svg
@@ -1017,10 +1008,10 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
                 </div>
               </div>
               <div
-                class="c20"
+                class="c19"
               >
                 <div
-                  class="c21"
+                  class="c20"
                 >
                   <div
                     class=""
@@ -1028,38 +1019,38 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
                     <div>
                       <div>
                         <div
-                          class="c22 c23"
+                          class="c21 c22"
                           spacing="1"
                         >
                           <label
-                            class="c24"
+                            class="c23"
                             for="textinput-2"
                           >
                             <div
-                              class="c25"
+                              class="c24"
                             >
                               Password
                             </div>
                           </label>
                           <div
-                            class="c28 c29"
+                            class="c27 c28"
                           >
                             <input
                               aria-disabled="false"
                               aria-invalid="false"
                               autocomplete="new-password"
-                              class="c31 c32"
+                              class="c30 c31"
                               id="textinput-2"
                               name="password"
                               type="password"
                               value=""
                             />
                             <div
-                              class="c33"
+                              class="c32"
                             >
                               <button
                                 aria-label="Hide password"
-                                class="c34 c35"
+                                class="c33 c34"
                                 type="button"
                               >
                                 <svg
@@ -1083,7 +1074,7 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
                   </div>
                 </div>
                 <div
-                  class="c21"
+                  class="c20"
                 >
                   <div
                     class=""
@@ -1091,38 +1082,38 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
                     <div>
                       <div>
                         <div
-                          class="c22 c23"
+                          class="c21 c22"
                           spacing="1"
                         >
                           <label
-                            class="c24"
+                            class="c23"
                             for="textinput-3"
                           >
                             <div
-                              class="c25"
+                              class="c24"
                             >
                               Password confirmation
                             </div>
                           </label>
                           <div
-                            class="c28 c29"
+                            class="c27 c28"
                           >
                             <input
                               aria-disabled="false"
                               aria-invalid="false"
                               autocomplete="new-password"
-                              class="c31 c32"
+                              class="c30 c31"
                               id="textinput-3"
                               name="confirmPassword"
                               type="password"
                               value=""
                             />
                             <div
-                              class="c33"
+                              class="c32"
                             >
                               <button
                                 aria-label="Hide password"
-                                class="c34 c35"
+                                class="c33 c34"
                                 type="button"
                               >
                                 <svg
@@ -1149,27 +1140,27 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
             </div>
           </div>
           <div
-            class="c17"
+            class="c16"
           >
             <div
-              class="c15 c18"
+              class="c14 c17"
               spacing="4"
             >
               <div
-                class="c15 c36"
+                class="c14 c35"
                 spacing="1"
               >
                 <h2
-                  class="c19"
+                  class="c18"
                 >
                   Experience
                 </h2>
                 <span
-                  class="c37"
+                  class="c36"
                 >
                   Preference changes will apply only to you. More information is available 
                   <a
-                    class="c38"
+                    class="c37"
                     href="https://docs.strapi.io/developer-docs/latest/development/admin-customization.html#locales"
                     rel="noopener noreferrer"
                     target="_blank"
@@ -1180,32 +1171,32 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
                 </span>
               </div>
               <div
-                class="c20"
+                class="c19"
               >
                 <div
-                  class="c21"
+                  class="c20"
                 >
                   <div
                     class=""
                   >
                     <div>
                       <div
-                        class="c39 c40"
+                        class="c38 c39"
                         spacing="1"
                       >
                         <span
-                          class="c41"
+                          class="c40"
                           for="select-1"
                           id="select-1-label"
                         >
                           <div
-                            class="c42"
+                            class="c41"
                           >
                             Interface language
                           </div>
                         </span>
                         <div
-                          class="c42 c43"
+                          class="c41 c42"
                         >
                           <button
                             aria-describedby="select-1-hint"
@@ -1213,21 +1204,21 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
                             aria-expanded="false"
                             aria-haspopup="listbox"
                             aria-labelledby="select-1-label select-1-content"
-                            class="c44"
+                            class="c43"
                             id="select-1"
                             type="button"
                           />
                           <div
-                            class="c45 c46"
+                            class="c44 c45"
                           >
                             <div
-                              class="c42"
+                              class="c41"
                             >
                               <div
-                                class="c47"
+                                class="c46"
                               >
                                 <span
-                                  class="c48"
+                                  class="c47"
                                   id="select-1-content"
                                 >
                                   Select
@@ -1235,12 +1226,12 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
                               </div>
                             </div>
                             <div
-                              class="c42"
+                              class="c41"
                             >
                               <button
                                 aria-disabled="false"
                                 aria-label="Clear the interface language selected"
-                                class="c49"
+                                class="c48"
                                 type="button"
                               >
                                 <svg
@@ -1258,7 +1249,7 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
                               </button>
                               <button
                                 aria-hidden="true"
-                                class="c50 c49 c51"
+                                class="c49 c48 c50"
                                 tabindex="-1"
                                 type="button"
                               >
@@ -1281,7 +1272,7 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
                           </div>
                         </div>
                         <p
-                          class="c52"
+                          class="c51"
                           id="select-1-hint"
                         >
                           This will only display your own interface in the chosen language.
@@ -1291,29 +1282,29 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
                   </div>
                 </div>
                 <div
-                  class="c21"
+                  class="c20"
                 >
                   <div
                     class=""
                   >
                     <div>
                       <div
-                        class="c39 c40"
+                        class="c38 c39"
                         spacing="1"
                       >
                         <span
-                          class="c41"
+                          class="c40"
                           for="select-2"
                           id="select-2-label"
                         >
                           <div
-                            class="c42"
+                            class="c41"
                           >
                             Interface mode
                           </div>
                         </span>
                         <div
-                          class="c42 c43"
+                          class="c41 c42"
                         >
                           <button
                             aria-describedby="select-2-hint"
@@ -1321,21 +1312,21 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
                             aria-expanded="false"
                             aria-haspopup="listbox"
                             aria-labelledby="select-2-label select-2-content"
-                            class="c44"
+                            class="c43"
                             id="select-2"
                             type="button"
                           />
                           <div
-                            class="c45 c46"
+                            class="c44 c45"
                           >
                             <div
-                              class="c42"
+                              class="c41"
                             >
                               <div
-                                class="c47"
+                                class="c46"
                               >
                                 <span
-                                  class="c48"
+                                  class="c47"
                                   id="select-2-content"
                                 >
                                   Light mode
@@ -1343,11 +1334,11 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
                               </div>
                             </div>
                             <div
-                              class="c42"
+                              class="c41"
                             >
                               <button
                                 aria-hidden="true"
-                                class="c50 c49 c51"
+                                class="c49 c48 c50"
                                 tabindex="-1"
                                 type="button"
                               >
@@ -1370,7 +1361,7 @@ exports[`ADMIN | Pages | Profile page renders and matches the snapshot 1`] = `
                           </div>
                         </div>
                         <p
-                          class="c52"
+                          class="c51"
                           id="select-2-hint"
                         >
                           Displays your interface in the chosen mode.
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/components/SettingsNav/tests/index.test.js b/packages/core/admin/admin/src/pages/SettingsPage/components/SettingsNav/tests/index.test.js
index 0b1a2fbb1d..c6bc9687dd 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/components/SettingsNav/tests/index.test.js
+++ b/packages/core/admin/admin/src/pages/SettingsPage/components/SettingsNav/tests/index.test.js
@@ -424,7 +424,7 @@ describe('SettingsPage || components || SettingsNav', () => {
                         </div>
                       </div>
                       <div
-                        class="c15 sc-fkJVfC c24"
+                        class="c15 sc-eBTqsU c24"
                       >
                         <svg
                           class="c25"
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoInput/tests/__snapshots__/index.test.js.snap b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoInput/tests/__snapshots__/index.test.js.snap
index f8eb873c89..bc07fbe5bb 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoInput/tests/__snapshots__/index.test.js.snap
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoInput/tests/__snapshots__/index.test.js.snap
@@ -853,7 +853,7 @@ exports[`ApplicationsInfosPage || LogoInput from computer should render upload m
   border: 1px solid #4945ff;
 }
 
-.c29 .sc-aaqME {
+.c29 .sc-eZhRLC {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -923,7 +923,7 @@ exports[`ApplicationsInfosPage || LogoInput from computer should render upload m
   background: #ffffff;
 }
 
-.c37 .sc-aaqME {
+.c37 .sc-eZhRLC {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1980,7 +1980,7 @@ exports[`ApplicationsInfosPage || LogoInput from url should render upload modal
   border: 1px solid #4945ff;
 }
 
-.c33 .sc-aaqME {
+.c33 .sc-eZhRLC {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2050,7 +2050,7 @@ exports[`ApplicationsInfosPage || LogoInput from url should render upload modal
   background: #ffffff;
 }
 
-.c30 .sc-aaqME {
+.c30 .sc-eZhRLC {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/tests/__snapshots__/index.test.js.snap b/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/tests/__snapshots__/index.test.js.snap
index ce20ded28f..e3af79974c 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/tests/__snapshots__/index.test.js.snap
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/Roles/EditPage/tests/__snapshots__/index.test.js.snap
@@ -102,7 +102,7 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
   border: 1px solid #4945ff;
 }
 
-.c13 .sc-ezHhwS {
+.c13 .sc-gJbFto {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -172,7 +172,7 @@ exports[`<EditPage /> renders and matches the snapshot 1`] = `
   background: #f0f0ff;
 }
 
-.c25 .sc-ezHhwS {
+.c25 .sc-gJbFto {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/Users/ListPage/PaginationFooter/tests/__snapshots__/index.test.js.snap b/packages/core/admin/admin/src/pages/SettingsPage/pages/Users/ListPage/PaginationFooter/tests/__snapshots__/index.test.js.snap
index 96d04c5d06..55cc3330b5 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/Users/ListPage/PaginationFooter/tests/__snapshots__/index.test.js.snap
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/Users/ListPage/PaginationFooter/tests/__snapshots__/index.test.js.snap
@@ -466,7 +466,7 @@ exports[`DynamicTable renders and matches the snapshot 1`] = `
       </div>
       <nav
         aria-label="pagination"
-        class="sc-czWrlN"
+        class="sc-cKVNtL"
       >
         <ul
           class="c17 c18"
diff --git a/packages/core/admin/admin/src/pages/UseCasePage/tests/index.test.js b/packages/core/admin/admin/src/pages/UseCasePage/tests/index.test.js
index 9b63962bd8..68163bb1f8 100644
--- a/packages/core/admin/admin/src/pages/UseCasePage/tests/index.test.js
+++ b/packages/core/admin/admin/src/pages/UseCasePage/tests/index.test.js
@@ -171,7 +171,7 @@ describe('Admin | UseCasePage', () => {
         width: 100%;
       }
 
-      .c35 .sc-iseIHH {
+      .c35 .sc-kBzgEd {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
diff --git a/packages/core/admin/ee/admin/pages/SettingsPage/pages/Roles/CreatePage/tests/__snapshots__/index.test.js.snap b/packages/core/admin/ee/admin/pages/SettingsPage/pages/Roles/CreatePage/tests/__snapshots__/index.test.js.snap
index 2ca4c4c734..1383d6ad51 100644
--- a/packages/core/admin/ee/admin/pages/SettingsPage/pages/Roles/CreatePage/tests/__snapshots__/index.test.js.snap
+++ b/packages/core/admin/ee/admin/pages/SettingsPage/pages/Roles/CreatePage/tests/__snapshots__/index.test.js.snap
@@ -97,7 +97,7 @@ exports[`<CreatePage /> renders and matches the snapshot 1`] = `
   background: #f0f0ff;
 }
 
-.c13 .sc-ezHhwS {
+.c13 .sc-gJbFto {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -177,7 +177,7 @@ exports[`<CreatePage /> renders and matches the snapshot 1`] = `
   border: 1px solid #4945ff;
 }
 
-.c16 .sc-ezHhwS {
+.c16 .sc-gJbFto {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
diff --git a/packages/core/admin/package.json b/packages/core/admin/package.json
index 1035cd798a..d17d3d8b0d 100644
--- a/packages/core/admin/package.json
+++ b/packages/core/admin/package.json
@@ -52,9 +52,9 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@pmmmwh/react-refresh-webpack-plugin": "0.5.7",
     "@strapi/babel-plugin-switch-ee-ce": "4.3.0",
-    "@strapi/design-system": "1.2.0",
+    "@strapi/design-system": "1.2.1-beta.0",
     "@strapi/helper-plugin": "4.3.0",
-    "@strapi/icons": "1.2.0",
+    "@strapi/icons": "1.2.1-beta.0",
     "@strapi/typescript-utils": "4.3.0",
     "@strapi/utils": "4.3.0",
     "axios": "0.24.0",
diff --git a/packages/core/helper-plugin/lib/src/components/PaginationURLQuery/tests/__snapshots__/index.test.js.snap b/packages/core/helper-plugin/lib/src/components/PaginationURLQuery/tests/__snapshots__/index.test.js.snap
index fb76e2bdc1..2a5320721f 100644
--- a/packages/core/helper-plugin/lib/src/components/PaginationURLQuery/tests/__snapshots__/index.test.js.snap
+++ b/packages/core/helper-plugin/lib/src/components/PaginationURLQuery/tests/__snapshots__/index.test.js.snap
@@ -171,7 +171,7 @@ exports[`<PaginationURLQuery /> should display the dots correctly 1`] = `
 
 <nav
   aria-label="pagination"
-  class="sc-eBTqsU"
+  class="sc-ezHhwS"
 >
   <ul
     class="c0 c1"
@@ -544,7 +544,7 @@ exports[`<PaginationURLQuery /> should work when the pageCount is inferior or eq
 
 <nav
   aria-label="pagination"
-  class="sc-eBTqsU"
+  class="sc-ezHhwS"
 >
   <ul
     class="c0 c1"
diff --git a/packages/core/helper-plugin/lib/src/components/PaginationURLQuery/tests/index.test.js b/packages/core/helper-plugin/lib/src/components/PaginationURLQuery/tests/index.test.js
index 39edc6509b..c3b905da01 100644
--- a/packages/core/helper-plugin/lib/src/components/PaginationURLQuery/tests/index.test.js
+++ b/packages/core/helper-plugin/lib/src/components/PaginationURLQuery/tests/index.test.js
@@ -190,7 +190,7 @@ describe('<PaginationURLQuery />', () => {
 
       <nav
         aria-label="pagination"
-        class="sc-eBTqsU"
+        class="sc-ezHhwS"
       >
         <ul
           class="c0 c1"
diff --git a/packages/core/helper-plugin/package.json b/packages/core/helper-plugin/package.json
index a01741759a..63c078806a 100644
--- a/packages/core/helper-plugin/package.json
+++ b/packages/core/helper-plugin/package.json
@@ -74,8 +74,8 @@
     "@storybook/builder-webpack5": "6.5.9",
     "@storybook/manager-webpack5": "6.4.10",
     "@storybook/react": "^6.3.7",
-    "@strapi/design-system": "1.2.0",
-    "@strapi/icons": "1.2.0",
+    "@strapi/design-system": "1.2.1-beta.0",
+    "@strapi/icons": "1.2.1-beta.0",
     "babel-loader": "^8.2.5",
     "cross-env": "^7.0.3",
     "date-fns": "2.28.0",
diff --git a/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/tests/__snapshots__/index.test.js.snap b/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/tests/__snapshots__/index.test.js.snap
index 9ad14caf88..c46ff03d8e 100644
--- a/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/tests/__snapshots__/index.test.js.snap
+++ b/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/tests/__snapshots__/index.test.js.snap
@@ -1336,7 +1336,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
       </div>
       <nav
         aria-label="pagination"
-        class="sc-PDIEN"
+        class="sc-ivsNig"
       >
         <ul
           class="c20 c67"
diff --git a/packages/core/upload/admin/src/components/BulkMoveDialog/tests/__snapshots__/BulkMoveDialog.test.js.snap b/packages/core/upload/admin/src/components/BulkMoveDialog/tests/__snapshots__/BulkMoveDialog.test.js.snap
index 0cb6d07493..9386cc8884 100644
--- a/packages/core/upload/admin/src/components/BulkMoveDialog/tests/__snapshots__/BulkMoveDialog.test.js.snap
+++ b/packages/core/upload/admin/src/components/BulkMoveDialog/tests/__snapshots__/BulkMoveDialog.test.js.snap
@@ -94,7 +94,7 @@ exports[`BulkMoveDialog renders and matches the snapshot 1`] = `
   background: #ffffff;
 }
 
-.c25 .sc-iseIHH {
+.c25 .sc-kBzgEd {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -164,7 +164,7 @@ exports[`BulkMoveDialog renders and matches the snapshot 1`] = `
   border: 1px solid #4945ff;
 }
 
-.c28 .sc-iseIHH {
+.c28 .sc-kBzgEd {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
diff --git a/packages/core/upload/admin/src/components/EditAssetDialog/tests/__snapshots__/EditAssetDialog.test.js.snap b/packages/core/upload/admin/src/components/EditAssetDialog/tests/__snapshots__/EditAssetDialog.test.js.snap
index 67050122a1..6be3fd8d8c 100644
--- a/packages/core/upload/admin/src/components/EditAssetDialog/tests/__snapshots__/EditAssetDialog.test.js.snap
+++ b/packages/core/upload/admin/src/components/EditAssetDialog/tests/__snapshots__/EditAssetDialog.test.js.snap
@@ -110,7 +110,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   background: #ffffff;
 }
 
-.c49 .sc-iseIHH {
+.c49 .sc-kBzgEd {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -182,7 +182,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   background: #f0f0ff;
 }
 
-.c52 .sc-iseIHH {
+.c52 .sc-kBzgEd {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -262,7 +262,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   border: 1px solid #4945ff;
 }
 
-.c53 .sc-iseIHH {
+.c53 .sc-kBzgEd {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
diff --git a/packages/core/upload/admin/src/components/EditAssetDialog/tests/__snapshots__/index.test.js.snap b/packages/core/upload/admin/src/components/EditAssetDialog/tests/__snapshots__/index.test.js.snap
index 67050122a1..6be3fd8d8c 100644
--- a/packages/core/upload/admin/src/components/EditAssetDialog/tests/__snapshots__/index.test.js.snap
+++ b/packages/core/upload/admin/src/components/EditAssetDialog/tests/__snapshots__/index.test.js.snap
@@ -110,7 +110,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   background: #ffffff;
 }
 
-.c49 .sc-iseIHH {
+.c49 .sc-kBzgEd {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -182,7 +182,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   background: #f0f0ff;
 }
 
-.c52 .sc-iseIHH {
+.c52 .sc-kBzgEd {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -262,7 +262,7 @@ exports[`<EditAssetDialog /> renders and matches the snapshot 1`] = `
   border: 1px solid #4945ff;
 }
 
-.c53 .sc-iseIHH {
+.c53 .sc-kBzgEd {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
diff --git a/packages/core/upload/admin/src/components/EditFolderDialog/tests/__snapshots__/EditFolderDialog.test.js.snap b/packages/core/upload/admin/src/components/EditFolderDialog/tests/__snapshots__/EditFolderDialog.test.js.snap
index efa6386de2..5ef70956f5 100644
--- a/packages/core/upload/admin/src/components/EditFolderDialog/tests/__snapshots__/EditFolderDialog.test.js.snap
+++ b/packages/core/upload/admin/src/components/EditFolderDialog/tests/__snapshots__/EditFolderDialog.test.js.snap
@@ -94,7 +94,7 @@ exports[`EditFolderDialog renders and matches the snapshot 1`] = `
   background: #ffffff;
 }
 
-.c32 .sc-iseIHH {
+.c32 .sc-kBzgEd {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -164,7 +164,7 @@ exports[`EditFolderDialog renders and matches the snapshot 1`] = `
   border: 1px solid #4945ff;
 }
 
-.c37 .sc-iseIHH {
+.c37 .sc-kBzgEd {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
diff --git a/packages/core/upload/admin/src/components/SelectTree/tests/__snapshots__/SelectTree.test.js.snap b/packages/core/upload/admin/src/components/SelectTree/tests/__snapshots__/SelectTree.test.js.snap
index 012969ed80..c24c993384 100644
--- a/packages/core/upload/admin/src/components/SelectTree/tests/__snapshots__/SelectTree.test.js.snap
+++ b/packages/core/upload/admin/src/components/SelectTree/tests/__snapshots__/SelectTree.test.js.snap
@@ -146,7 +146,7 @@ Object {
           class=" css-1hb7zxy-IndicatorsContainer"
         >
           <button
-            class="sc-iuqRDJ sc-cVEUmN sc-ksDcAU cuYSdT gplmCH cPFMHe"
+            class="sc-iseIHH sc-bJcRwn sc-jgaZKu iQNAGU foslXt eaSjfN"
             type="button"
           >
             <svg
diff --git a/packages/core/upload/admin/src/components/UploadAssetDialog/AddAssetStep/tests/FromComputerForm.test.js b/packages/core/upload/admin/src/components/UploadAssetDialog/AddAssetStep/tests/FromComputerForm.test.js
index feb846f340..bb8638fdf8 100644
--- a/packages/core/upload/admin/src/components/UploadAssetDialog/AddAssetStep/tests/FromComputerForm.test.js
+++ b/packages/core/upload/admin/src/components/UploadAssetDialog/AddAssetStep/tests/FromComputerForm.test.js
@@ -145,7 +145,7 @@ describe('FromComputerForm', () => {
         border: 1px solid #4945ff;
       }
 
-      .c13 .sc-iseIHH {
+      .c13 .sc-kBzgEd {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -215,7 +215,7 @@ describe('FromComputerForm', () => {
         background: #ffffff;
       }
 
-      .c21 .sc-iseIHH {
+      .c21 .sc-kBzgEd {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
diff --git a/packages/core/upload/admin/src/components/UploadAssetDialog/PendingAssetStep/tests/__snapshots__/PendingAssetStep.test.js.snap b/packages/core/upload/admin/src/components/UploadAssetDialog/PendingAssetStep/tests/__snapshots__/PendingAssetStep.test.js.snap
index 44627a2ba2..7bef3756af 100644
--- a/packages/core/upload/admin/src/components/UploadAssetDialog/PendingAssetStep/tests/__snapshots__/PendingAssetStep.test.js.snap
+++ b/packages/core/upload/admin/src/components/UploadAssetDialog/PendingAssetStep/tests/__snapshots__/PendingAssetStep.test.js.snap
@@ -92,7 +92,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   border: 1px solid #4945ff;
 }
 
-.c15 .sc-iseIHH {
+.c15 .sc-kBzgEd {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -162,7 +162,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   background: #ffffff;
 }
 
-.c57 .sc-iseIHH {
+.c57 .sc-kBzgEd {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
diff --git a/packages/core/upload/admin/src/components/UploadAssetDialog/tests/__snapshots__/UploadAssetDialog.test.js.snap b/packages/core/upload/admin/src/components/UploadAssetDialog/tests/__snapshots__/UploadAssetDialog.test.js.snap
index 54d09f5084..f34a95479a 100644
--- a/packages/core/upload/admin/src/components/UploadAssetDialog/tests/__snapshots__/UploadAssetDialog.test.js.snap
+++ b/packages/core/upload/admin/src/components/UploadAssetDialog/tests/__snapshots__/UploadAssetDialog.test.js.snap
@@ -130,7 +130,7 @@ exports[`UploadAssetDialog from computer snapshots the component 1`] = `
   border: 1px solid #4945ff;
 }
 
-.c32 .sc-iseIHH {
+.c32 .sc-kBzgEd {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -200,7 +200,7 @@ exports[`UploadAssetDialog from computer snapshots the component 1`] = `
   background: #ffffff;
 }
 
-.c38 .sc-iseIHH {
+.c38 .sc-kBzgEd {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -922,7 +922,7 @@ exports[`UploadAssetDialog from url snapshots the component 1`] = `
   border: 1px solid #4945ff;
 }
 
-.c34 .sc-iseIHH {
+.c34 .sc-kBzgEd {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -992,7 +992,7 @@ exports[`UploadAssetDialog from url snapshots the component 1`] = `
   background: #ffffff;
 }
 
-.c31 .sc-iseIHH {
+.c31 .sc-kBzgEd {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
diff --git a/packages/plugins/users-permissions/admin/src/pages/AdvancedSettings/tests/index.test.js b/packages/plugins/users-permissions/admin/src/pages/AdvancedSettings/tests/index.test.js
index 94590adda0..5ee1669dd6 100644
--- a/packages/plugins/users-permissions/admin/src/pages/AdvancedSettings/tests/index.test.js
+++ b/packages/plugins/users-permissions/admin/src/pages/AdvancedSettings/tests/index.test.js
@@ -62,7 +62,7 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
     });
 
     expect(container.firstChild).toMatchInlineSnapshot(`
-      .c14 {
+      .c13 {
         background: #ffffff;
         padding-top: 24px;
         padding-right: 32px;
@@ -213,7 +213,7 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
         fill: #ffffff;
       }
 
-      .c25 {
+      .c24 {
         position: absolute;
         left: 0;
         right: 0;
@@ -224,24 +224,24 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
         border: none;
       }
 
-      .c25:focus {
+      .c24:focus {
         outline: none;
       }
 
-      .c25[aria-disabled='true'] {
+      .c24[aria-disabled='true'] {
         cursor: not-allowed;
       }
 
-      .c28 {
+      .c27 {
         padding-right: 16px;
         padding-left: 16px;
       }
 
-      .c30 {
+      .c29 {
         padding-left: 12px;
       }
 
-      .c20 {
+      .c19 {
         -webkit-align-items: stretch;
         -webkit-box-align: stretch;
         -ms-flex-align: stretch;
@@ -255,7 +255,7 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
         flex-direction: column;
       }
 
-      .c23 {
+      .c22 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -269,7 +269,7 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
         flex-direction: row;
       }
 
-      .c26 {
+      .c25 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -287,14 +287,14 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
         justify-content: space-between;
       }
 
-      .c22 {
+      .c21 {
         font-weight: 600;
         color: #32324d;
         font-size: 0.75rem;
         line-height: 1.33;
       }
 
-      .c29 {
+      .c28 {
         color: #32324d;
         display: block;
         white-space: nowrap;
@@ -304,22 +304,22 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
         line-height: 1.43;
       }
 
-      .c33 {
+      .c32 {
         color: #666687;
         font-size: 0.75rem;
         line-height: 1.33;
       }
 
-      .c21 > * {
+      .c20 > * {
         margin-top: 0;
         margin-bottom: 0;
       }
 
-      .c21 > * + * {
+      .c20 > * + * {
         margin-top: 4px;
       }
 
-      .c24 {
+      .c23 {
         position: relative;
         border: 1px solid #dcdce4;
         padding-right: 12px;
@@ -335,28 +335,28 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
         transition-duration: 0.2s;
       }
 
-      .c24:focus-within {
+      .c23:focus-within {
         border: 1px solid #4945ff;
         box-shadow: #4945ff 0px 0px 0px 2px;
       }
 
-      .c31 {
+      .c30 {
         background: transparent;
         border: none;
         position: relative;
         z-index: 1;
       }
 
-      .c31 svg {
+      .c30 svg {
         height: 0.6875rem;
         width: 0.6875rem;
       }
 
-      .c31 svg path {
+      .c30 svg path {
         fill: #666687;
       }
 
-      .c32 {
+      .c31 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -365,15 +365,15 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
         border: none;
       }
 
-      .c32 svg {
+      .c31 svg {
         width: 0.375rem;
       }
 
-      .c27 {
+      .c26 {
         width: 100%;
       }
 
-      .c15 {
+      .c14 {
         -webkit-align-items: stretch;
         -webkit-box-align: stretch;
         -ms-flex-align: stretch;
@@ -387,16 +387,16 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
         flex-direction: column;
       }
 
-      .c16 > * {
+      .c15 > * {
         margin-top: 0;
         margin-bottom: 0;
       }
 
-      .c16 > * + * {
+      .c15 > * + * {
         margin-top: 16px;
       }
 
-      .c52 {
+      .c51 {
         -webkit-align-items: stretch;
         -webkit-box-align: stretch;
         -ms-flex-align: stretch;
@@ -410,7 +410,7 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
         flex-direction: column;
       }
 
-      .c55 {
+      .c54 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -424,7 +424,7 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
         flex-direction: row;
       }
 
-      .c56 {
+      .c55 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -442,20 +442,20 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
         justify-content: space-between;
       }
 
-      .c54 {
+      .c53 {
         font-weight: 600;
         color: #32324d;
         font-size: 0.75rem;
         line-height: 1.33;
       }
 
-      .c59 {
+      .c58 {
         color: #666687;
         font-size: 0.75rem;
         line-height: 1.33;
       }
 
-      .c58 {
+      .c57 {
         border: none;
         border-radius: 4px;
         padding-bottom: 0.65625rem;
@@ -470,36 +470,36 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
         background: inherit;
       }
 
-      .c58::-webkit-input-placeholder {
+      .c57::-webkit-input-placeholder {
         color: #8e8ea9;
         opacity: 1;
       }
 
-      .c58::-moz-placeholder {
+      .c57::-moz-placeholder {
         color: #8e8ea9;
         opacity: 1;
       }
 
-      .c58:-ms-input-placeholder {
+      .c57:-ms-input-placeholder {
         color: #8e8ea9;
         opacity: 1;
       }
 
-      .c58::placeholder {
+      .c57::placeholder {
         color: #8e8ea9;
         opacity: 1;
       }
 
-      .c58[aria-disabled='true'] {
+      .c57[aria-disabled='true'] {
         color: inherit;
       }
 
-      .c58:focus {
+      .c57:focus {
         outline: none;
         box-shadow: none;
       }
 
-      .c61 {
+      .c60 {
         border: none;
         border-radius: 4px;
         padding-bottom: 0.65625rem;
@@ -515,36 +515,36 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
         background: inherit;
       }
 
-      .c61::-webkit-input-placeholder {
+      .c60::-webkit-input-placeholder {
         color: #8e8ea9;
         opacity: 1;
       }
 
-      .c61::-moz-placeholder {
+      .c60::-moz-placeholder {
         color: #8e8ea9;
         opacity: 1;
       }
 
-      .c61:-ms-input-placeholder {
+      .c60:-ms-input-placeholder {
         color: #8e8ea9;
         opacity: 1;
       }
 
-      .c61::placeholder {
+      .c60::placeholder {
         color: #8e8ea9;
         opacity: 1;
       }
 
-      .c61[aria-disabled='true'] {
+      .c60[aria-disabled='true'] {
         color: inherit;
       }
 
-      .c61:focus {
+      .c60:focus {
         outline: none;
         box-shadow: none;
       }
 
-      .c57 {
+      .c56 {
         border: 1px solid #dcdce4;
         border-radius: 4px;
         background: #ffffff;
@@ -556,12 +556,12 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
         transition-duration: 0.2s;
       }
 
-      .c57:focus-within {
+      .c56:focus-within {
         border: 1px solid #4945ff;
         box-shadow: #4945ff 0px 0px 0px 2px;
       }
 
-      .c60 {
+      .c59 {
         border: 1px solid #dcdce4;
         border-radius: 4px;
         background: #ffffff;
@@ -575,21 +575,21 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
         background: #eaeaef;
       }
 
-      .c60:focus-within {
+      .c59:focus-within {
         border: 1px solid #4945ff;
         box-shadow: #4945ff 0px 0px 0px 2px;
       }
 
-      .c53 > * {
+      .c52 > * {
         margin-top: 0;
         margin-bottom: 0;
       }
 
-      .c53 > * + * {
+      .c52 > * + * {
         margin-top: 4px;
       }
 
-      .c42 {
+      .c41 {
         background: #f6f6f9;
         padding: 4px;
         border-radius: 4px;
@@ -602,13 +602,13 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
         display: inline-flex;
       }
 
-      .c44 {
+      .c43 {
         padding-right: 32px;
         padding-left: 32px;
         border-radius: 4px;
       }
 
-      .c36 {
+      .c35 {
         -webkit-align-items: stretch;
         -webkit-box-align: stretch;
         -ms-flex-align: stretch;
@@ -622,7 +622,7 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
         flex-direction: column;
       }
 
-      .c38 {
+      .c37 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -636,14 +636,14 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
         flex-direction: row;
       }
 
-      .c39 {
+      .c38 {
         font-weight: 600;
         color: #32324d;
         font-size: 0.75rem;
         line-height: 1.33;
       }
 
-      .c46 {
+      .c45 {
         font-weight: 600;
         color: #b72b1a;
         text-transform: uppercase;
@@ -651,7 +651,7 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
         line-height: 1.33;
       }
 
-      .c48 {
+      .c47 {
         font-weight: 600;
         color: #666687;
         text-transform: uppercase;
@@ -659,22 +659,22 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
         line-height: 1.33;
       }
 
-      .c50 {
+      .c49 {
         color: #666687;
         font-size: 0.75rem;
         line-height: 1.33;
       }
 
-      .c37 > * {
+      .c36 > * {
         margin-top: 0;
         margin-bottom: 0;
       }
 
-      .c37 > * + * {
+      .c36 > * + * {
         margin-top: 4px;
       }
 
-      .c41 {
+      .c40 {
         border: 0;
         -webkit-clip: rect(0 0 0 0);
         clip: rect(0 0 0 0);
@@ -686,12 +686,12 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
         width: 1px;
       }
 
-      .c40 {
+      .c39 {
         position: relative;
         display: inline-block;
       }
 
-      .c43 {
+      .c42 {
         height: 2.5rem;
         overflow: hidden;
         outline: none;
@@ -702,12 +702,12 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
         transition-duration: 0.2s;
       }
 
-      .c43:focus-within {
+      .c42:focus-within {
         border: 1px solid #4945ff;
         box-shadow: #4945ff 0px 0px 0px 2px;
       }
 
-      .c45 {
+      .c44 {
         background-color: #ffffff;
         border: 1px solid #dcdce4;
         position: relative;
@@ -718,7 +718,7 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
         z-index: 2;
       }
 
-      .c47 {
+      .c46 {
         background-color: transparent;
         border: 1px solid #f6f6f9;
         position: relative;
@@ -729,7 +729,7 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
         z-index: 2;
       }
 
-      .c49 {
+      .c48 {
         height: 100%;
         left: 0;
         opacity: 0;
@@ -739,13 +739,13 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
         width: 100%;
       }
 
-      .c35 {
+      .c34 {
         width: -webkit-fit-content;
         width: -moz-fit-content;
         width: fit-content;
       }
 
-      .c17 {
+      .c16 {
         color: #32324d;
         font-weight: 500;
         font-size: 1rem;
@@ -764,7 +764,7 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
         padding-left: 56px;
       }
 
-      .c13 {
+      .c12 {
         padding-right: 56px;
         padding-left: 56px;
       }
@@ -808,65 +808,59 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
         line-height: 1.25;
       }
 
-      .c12 {
-        color: #666687;
-        font-size: 1rem;
-        line-height: 1.5;
-      }
-
-      .c18 {
+      .c17 {
         display: grid;
         grid-template-columns: repeat(12,1fr);
         gap: 24px;
       }
 
-      .c19 {
+      .c18 {
         grid-column: span 6;
         max-width: 100%;
       }
 
-      .c34 {
+      .c33 {
         grid-column: span 12;
         max-width: 100%;
       }
 
-      .c51 {
+      .c50 {
         grid-column: span 6;
         max-width: 100%;
       }
 
       @media (max-width:68.75rem) {
-        .c19 {
+        .c18 {
           grid-column: span 12;
         }
       }
 
       @media (max-width:34.375rem) {
-        .c19 {
+        .c18 {
           grid-column: span;
         }
       }
 
       @media (max-width:68.75rem) {
-        .c34 {
+        .c33 {
           grid-column: span;
         }
       }
 
       @media (max-width:34.375rem) {
-        .c34 {
+        .c33 {
           grid-column: span 12;
         }
       }
 
       @media (max-width:68.75rem) {
-        .c51 {
+        .c50 {
           grid-column: span;
         }
       }
 
       @media (max-width:34.375rem) {
-        .c51 {
+        .c50 {
           grid-column: span 12;
         }
       }
@@ -930,53 +924,50 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
                   </span>
                 </button>
               </div>
-              <p
-                class="c12"
-              />
             </div>
           </div>
           <div
-            class="c13"
+            class="c12"
           >
             <div
-              class="c14"
+              class="c13"
             >
               <div
-                class="c15 c16"
+                class="c14 c15"
                 spacing="4"
               >
                 <h2
-                  class="c17"
+                  class="c16"
                 >
                   Settings
                 </h2>
                 <div
-                  class="c18"
+                  class="c17"
                 >
                   <div
-                    class="c19"
+                    class="c18"
                   >
                     <div
                       class=""
                     >
                       <div>
                         <div
-                          class="c20 c21"
+                          class="c19 c20"
                           spacing="1"
                         >
                           <span
-                            class="c22"
+                            class="c21"
                             for="select-1"
                             id="select-1-label"
                           >
                             <div
-                              class="c23"
+                              class="c22"
                             >
                               Default role for authenticated users
                             </div>
                           </span>
                           <div
-                            class="c23 c24"
+                            class="c22 c23"
                           >
                             <button
                               aria-describedby="select-1-hint"
@@ -984,21 +975,21 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
                               aria-expanded="false"
                               aria-haspopup="listbox"
                               aria-labelledby="select-1-label select-1-content"
-                              class="c25"
+                              class="c24"
                               id="select-1"
                               type="button"
                             />
                             <div
-                              class="c26 c27"
+                              class="c25 c26"
                             >
                               <div
-                                class="c23"
+                                class="c22"
                               >
                                 <div
-                                  class="c28"
+                                  class="c27"
                                 >
                                   <span
-                                    class="c29"
+                                    class="c28"
                                     id="select-1-content"
                                   >
                                     Authenticated
@@ -1006,11 +997,11 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
                                 </div>
                               </div>
                               <div
-                                class="c23"
+                                class="c22"
                               >
                                 <button
                                   aria-hidden="true"
-                                  class="c30 c31 c32"
+                                  class="c29 c30 c31"
                                   tabindex="-1"
                                   type="button"
                                 >
@@ -1033,7 +1024,7 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
                             </div>
                           </div>
                           <p
-                            class="c33"
+                            class="c32"
                             id="select-1-hint"
                           >
                             It will attach the new authenticated user to the selected role.
@@ -1043,67 +1034,67 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
                     </div>
                   </div>
                   <div
-                    class="c34"
+                    class="c33"
                   >
                     <div
                       class=""
                     >
                       <div
-                        class="c35"
+                        class="c34"
                       >
                         <div
-                          class="c36 c37"
+                          class="c35 c36"
                           spacing="1"
                         >
                           <div
-                            class="c38"
+                            class="c37"
                           >
                             <label
-                              class="c39"
+                              class="c38"
                               for="toggleinput-1"
                             >
                               <div
-                                class="c38"
+                                class="c37"
                               >
                                 One account per email address
                               </div>
                             </label>
                           </div>
                           <label
-                            class="c40"
+                            class="c39"
                           >
                             <div
-                              class="c41"
+                              class="c40"
                             >
                               One account per email address
                             </div>
                             <div
-                              class="c42 c43"
+                              class="c41 c42"
                               display="inline-flex"
                             >
                               <div
                                 aria-hidden="true"
-                                class="c44 c38 c45"
+                                class="c43 c37 c44"
                               >
                                 <span
-                                  class="c46"
+                                  class="c45"
                                 >
                                   False
                                 </span>
                               </div>
                               <div
                                 aria-hidden="true"
-                                class="c44 c38 c47"
+                                class="c43 c37 c46"
                               >
                                 <span
-                                  class="c48"
+                                  class="c47"
                                 >
                                   True
                                 </span>
                               </div>
                               <input
                                 aria-disabled="false"
-                                class="c49"
+                                class="c48"
                                 id="toggleinput-1"
                                 name="unique_email"
                                 type="checkbox"
@@ -1111,7 +1102,7 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
                             </div>
                           </label>
                           <p
-                            class="c50"
+                            class="c49"
                             id="toggleinput-1-hint"
                           >
                             Disallow the user to create multiple accounts using the same email address with different authentication providers.
@@ -1121,67 +1112,67 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
                     </div>
                   </div>
                   <div
-                    class="c34"
+                    class="c33"
                   >
                     <div
                       class=""
                     >
                       <div
-                        class="c35"
+                        class="c34"
                       >
                         <div
-                          class="c36 c37"
+                          class="c35 c36"
                           spacing="1"
                         >
                           <div
-                            class="c38"
+                            class="c37"
                           >
                             <label
-                              class="c39"
+                              class="c38"
                               for="toggleinput-2"
                             >
                               <div
-                                class="c38"
+                                class="c37"
                               >
                                 Enable sign-ups
                               </div>
                             </label>
                           </div>
                           <label
-                            class="c40"
+                            class="c39"
                           >
                             <div
-                              class="c41"
+                              class="c40"
                             >
                               Enable sign-ups
                             </div>
                             <div
-                              class="c42 c43"
+                              class="c41 c42"
                               display="inline-flex"
                             >
                               <div
                                 aria-hidden="true"
-                                class="c44 c38 c45"
+                                class="c43 c37 c44"
                               >
                                 <span
-                                  class="c46"
+                                  class="c45"
                                 >
                                   False
                                 </span>
                               </div>
                               <div
                                 aria-hidden="true"
-                                class="c44 c38 c47"
+                                class="c43 c37 c46"
                               >
                                 <span
-                                  class="c48"
+                                  class="c47"
                                 >
                                   True
                                 </span>
                               </div>
                               <input
                                 aria-disabled="false"
-                                class="c49"
+                                class="c48"
                                 id="toggleinput-2"
                                 name="allow_register"
                                 type="checkbox"
@@ -1189,7 +1180,7 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
                             </div>
                           </label>
                           <p
-                            class="c50"
+                            class="c49"
                             id="toggleinput-2-hint"
                           >
                             When disabled (OFF), the registration process is forbidden. No one can subscribe anymore no matter the used provider.
@@ -1199,7 +1190,7 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
                     </div>
                   </div>
                   <div
-                    class="c51"
+                    class="c50"
                   >
                     <div
                       class=""
@@ -1207,27 +1198,27 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
                       <div>
                         <div>
                           <div
-                            class="c52 c53"
+                            class="c51 c52"
                             spacing="1"
                           >
                             <label
-                              class="c54"
+                              class="c53"
                               for="email_reset_password"
                             >
                               <div
-                                class="c55"
+                                class="c54"
                               >
                                 Reset password page
                               </div>
                             </label>
                             <div
-                              class="c56 c57"
+                              class="c55 c56"
                             >
                               <input
                                 aria-describedby="email_reset_password-hint"
                                 aria-disabled="false"
                                 aria-invalid="false"
-                                class="c58"
+                                class="c57"
                                 id="email_reset_password"
                                 name="email_reset_password"
                                 placeholder="ex: https://youtfrontend.com/reset-password"
@@ -1236,7 +1227,7 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
                               />
                             </div>
                             <p
-                              class="c59"
+                              class="c58"
                               id="email_reset_password-hint"
                             >
                               URL of your application's reset password page.
@@ -1247,67 +1238,67 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
                     </div>
                   </div>
                   <div
-                    class="c34"
+                    class="c33"
                   >
                     <div
                       class=""
                     >
                       <div
-                        class="c35"
+                        class="c34"
                       >
                         <div
-                          class="c36 c37"
+                          class="c35 c36"
                           spacing="1"
                         >
                           <div
-                            class="c38"
+                            class="c37"
                           >
                             <label
-                              class="c39"
+                              class="c38"
                               for="toggleinput-3"
                             >
                               <div
-                                class="c38"
+                                class="c37"
                               >
                                 Enable email confirmation
                               </div>
                             </label>
                           </div>
                           <label
-                            class="c40"
+                            class="c39"
                           >
                             <div
-                              class="c41"
+                              class="c40"
                             >
                               Enable email confirmation
                             </div>
                             <div
-                              class="c42 c43"
+                              class="c41 c42"
                               display="inline-flex"
                             >
                               <div
                                 aria-hidden="true"
-                                class="c44 c38 c45"
+                                class="c43 c37 c44"
                               >
                                 <span
-                                  class="c46"
+                                  class="c45"
                                 >
                                   False
                                 </span>
                               </div>
                               <div
                                 aria-hidden="true"
-                                class="c44 c38 c47"
+                                class="c43 c37 c46"
                               >
                                 <span
-                                  class="c48"
+                                  class="c47"
                                 >
                                   True
                                 </span>
                               </div>
                               <input
                                 aria-disabled="false"
-                                class="c49"
+                                class="c48"
                                 id="toggleinput-3"
                                 name="email_confirmation"
                                 type="checkbox"
@@ -1315,7 +1306,7 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
                             </div>
                           </label>
                           <p
-                            class="c50"
+                            class="c49"
                             id="toggleinput-3-hint"
                           >
                             When enabled (ON), new registered users receive a confirmation email.
@@ -1325,7 +1316,7 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
                     </div>
                   </div>
                   <div
-                    class="c51"
+                    class="c50"
                   >
                     <div
                       class=""
@@ -1333,28 +1324,28 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
                       <div>
                         <div>
                           <div
-                            class="c52 c53"
+                            class="c51 c52"
                             spacing="1"
                           >
                             <label
-                              class="c54"
+                              class="c53"
                               for="email_confirmation_redirection"
                             >
                               <div
-                                class="c55"
+                                class="c54"
                               >
                                 Redirection url
                               </div>
                             </label>
                             <div
-                              class="c56 c60"
+                              class="c55 c59"
                               disabled=""
                             >
                               <input
                                 aria-describedby="email_confirmation_redirection-hint"
                                 aria-disabled="true"
                                 aria-invalid="false"
-                                class="c61"
+                                class="c60"
                                 id="email_confirmation_redirection"
                                 name="email_confirmation_redirection"
                                 placeholder="ex: https://youtfrontend.com/email-confirmation"
@@ -1363,7 +1354,7 @@ describe('ADMIN | Pages | Settings | Advanced Settings', () => {
                               />
                             </div>
                             <p
-                              class="c59"
+                              class="c58"
                               id="email_confirmation_redirection-hint"
                             >
                               After you confirmed your email, choose where you will be redirected.
diff --git a/packages/plugins/users-permissions/admin/src/pages/EmailTemplates/tests/index.test.js b/packages/plugins/users-permissions/admin/src/pages/EmailTemplates/tests/index.test.js
index 414b8b5365..c160cd1d83 100644
--- a/packages/plugins/users-permissions/admin/src/pages/EmailTemplates/tests/index.test.js
+++ b/packages/plugins/users-permissions/admin/src/pages/EmailTemplates/tests/index.test.js
@@ -65,15 +65,15 @@ describe('ADMIN | Pages | Settings | Email Templates', () => {
     });
 
     expect(container.firstChild).toMatchInlineSnapshot(`
-      .c22 {
+      .c21 {
         color: #666687;
       }
 
-      .c23 path {
+      .c22 path {
         fill: #666687;
       }
 
-      .c25 {
+      .c24 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -87,21 +87,21 @@ describe('ADMIN | Pages | Settings | Email Templates', () => {
         outline: none;
       }
 
-      .c25 svg {
+      .c24 svg {
         height: 12px;
         width: 12px;
       }
 
-      .c25 svg > g,
-      .c25 svg path {
+      .c24 svg > g,
+      .c24 svg path {
         fill: #ffffff;
       }
 
-      .c25[aria-disabled='true'] {
+      .c24[aria-disabled='true'] {
         pointer-events: none;
       }
 
-      .c25:after {
+      .c24:after {
         -webkit-transition-property: all;
         transition-property: all;
         -webkit-transition-duration: 0.2s;
@@ -116,11 +116,11 @@ describe('ADMIN | Pages | Settings | Email Templates', () => {
         border: 2px solid transparent;
       }
 
-      .c25:focus-visible {
+      .c24:focus-visible {
         outline: none;
       }
 
-      .c25:focus-visible:after {
+      .c24:focus-visible:after {
         border-radius: 8px;
         content: '';
         position: absolute;
@@ -131,7 +131,7 @@ describe('ADMIN | Pages | Settings | Email Templates', () => {
         border: 2px solid #4945ff;
       }
 
-      .c26 {
+      .c25 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -149,59 +149,59 @@ describe('ADMIN | Pages | Settings | Email Templates', () => {
         border: none;
       }
 
-      .c26 svg > g,
-      .c26 svg path {
+      .c25 svg > g,
+      .c25 svg path {
         fill: #8e8ea9;
       }
 
-      .c26:hover svg > g,
-      .c26:hover svg path {
+      .c25:hover svg > g,
+      .c25:hover svg path {
         fill: #666687;
       }
 
-      .c26:active svg > g,
-      .c26:active svg path {
+      .c25:active svg > g,
+      .c25:active svg path {
         fill: #a5a5ba;
       }
 
-      .c26[aria-disabled='true'] {
+      .c25[aria-disabled='true'] {
         background-color: #eaeaef;
       }
 
-      .c26[aria-disabled='true'] svg path {
+      .c25[aria-disabled='true'] svg path {
         fill: #666687;
       }
 
-      .c7 {
+      .c6 {
         background: #ffffff;
         border-radius: 4px;
         box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
       }
 
-      .c10 {
+      .c9 {
         padding-right: 24px;
         padding-left: 24px;
       }
 
-      .c15 {
+      .c14 {
         width: 1%;
       }
 
-      .c8 {
+      .c7 {
         overflow: hidden;
         border: 1px solid #eaeaef;
       }
 
-      .c12 {
+      .c11 {
         width: 100%;
         white-space: nowrap;
       }
 
-      .c9 {
+      .c8 {
         position: relative;
       }
 
-      .c9:before {
+      .c8:before {
         background: linear-gradient(90deg,#c0c0cf 0%,rgba(0,0,0,0) 100%);
         opacity: 0.2;
         position: absolute;
@@ -211,7 +211,7 @@ describe('ADMIN | Pages | Settings | Email Templates', () => {
         left: 0;
       }
 
-      .c9:after {
+      .c8:after {
         background: linear-gradient(270deg,#c0c0cf 0%,rgba(0,0,0,0) 100%);
         opacity: 0.2;
         position: absolute;
@@ -222,39 +222,39 @@ describe('ADMIN | Pages | Settings | Email Templates', () => {
         top: 0;
       }
 
-      .c11 {
+      .c10 {
         overflow-x: auto;
       }
 
-      .c21 tr:last-of-type {
+      .c20 tr:last-of-type {
         border-bottom: none;
       }
 
+      .c12 {
+        border-bottom: 1px solid #eaeaef;
+      }
+
       .c13 {
         border-bottom: 1px solid #eaeaef;
       }
 
-      .c14 {
-        border-bottom: 1px solid #eaeaef;
-      }
-
-      .c14 td,
-      .c14 th {
+      .c13 td,
+      .c13 th {
         padding: 16px;
       }
 
-      .c14 td:first-of-type,
-      .c14 th:first-of-type {
+      .c13 td:first-of-type,
+      .c13 th:first-of-type {
         padding: 0 4px;
       }
 
-      .c14 th {
+      .c13 th {
         padding-top: 0;
         padding-bottom: 0;
         height: 3.5rem;
       }
 
-      .c17 {
+      .c16 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -268,22 +268,22 @@ describe('ADMIN | Pages | Settings | Email Templates', () => {
         flex-direction: row;
       }
 
-      .c16 {
+      .c15 {
         vertical-align: middle;
         text-align: left;
         color: #666687;
         outline-offset: -4px;
       }
 
-      .c16 input {
+      .c15 input {
         vertical-align: sub;
       }
 
-      .c19 svg {
+      .c18 svg {
         height: 0.25rem;
       }
 
-      .c20 {
+      .c19 {
         color: #666687;
         font-weight: 600;
         font-size: 0.6875rem;
@@ -291,13 +291,13 @@ describe('ADMIN | Pages | Settings | Email Templates', () => {
         text-transform: uppercase;
       }
 
-      .c24 {
+      .c23 {
         color: #32324d;
         font-size: 0.875rem;
         line-height: 1.43;
       }
 
-      .c18 {
+      .c17 {
         border: 0;
         -webkit-clip: rect(0 0 0 0);
         clip: rect(0 0 0 0);
@@ -321,7 +321,7 @@ describe('ADMIN | Pages | Settings | Email Templates', () => {
         padding-left: 56px;
       }
 
-      .c6 {
+      .c5 {
         padding-right: 56px;
         padding-left: 56px;
       }
@@ -365,12 +365,6 @@ describe('ADMIN | Pages | Settings | Email Templates', () => {
         line-height: 1.25;
       }
 
-      .c5 {
-        color: #666687;
-        font-size: 1rem;
-        line-height: 1.5;
-      }
-
       <main
         aria-busy="false"
         aria-labelledby="main-content-title"
@@ -398,108 +392,105 @@ describe('ADMIN | Pages | Settings | Email Templates', () => {
                 </h1>
               </div>
             </div>
-            <p
-              class="c5"
-            />
           </div>
         </div>
         <div
-          class="c6"
+          class="c5"
         >
           <div
-            class="c7 c8"
+            class="c6 c7"
           >
             <div
-              class="c9"
+              class="c8"
             >
               <div
-                class="c10 c11"
+                class="c9 c10"
               >
                 <table
                   aria-colcount="3"
                   aria-rowcount="3"
-                  class="c12"
+                  class="c11"
                 >
                   <thead
-                    class="c13"
+                    class="c12"
                   >
                     <tr
                       aria-rowindex="1"
-                      class="c14"
+                      class="c13"
                     >
                       <th
                         aria-colindex="1"
-                        class="c15 c16"
+                        class="c14 c15"
                         tabindex="0"
                         width="1%"
                       >
                         <div
-                          class="c17"
+                          class="c16"
                         >
                           <div
-                            class="c18"
+                            class="c17"
                           >
                             icon
                           </div>
                           <span
-                            class="c19"
+                            class="c18"
                           />
                         </div>
                       </th>
                       <th
                         aria-colindex="2"
-                        class="c16"
+                        class="c15"
                         tabindex="-1"
                       >
                         <div
-                          class="c17"
+                          class="c16"
                         >
                           <span
-                            class="c20"
+                            class="c19"
                           >
                             name
                           </span>
                           <span
-                            class="c19"
+                            class="c18"
                           />
                         </div>
                       </th>
                       <th
                         aria-colindex="3"
-                        class="c15 c16"
+                        class="c14 c15"
                         tabindex="-1"
                         width="1%"
                       >
                         <div
-                          class="c17"
+                          class="c16"
                         >
                           <div
-                            class="c18"
+                            class="c17"
                           >
                             action
                           </div>
                           <span
-                            class="c19"
+                            class="c18"
                           />
                         </div>
                       </th>
                     </tr>
                   </thead>
                   <tbody
-                    class="c21"
+                    class="c20"
                   >
                     <tr
                       aria-rowindex="2"
-                      class="c14"
+                      class="c13"
                       style="cursor: pointer;"
                     >
                       <td
                         aria-colindex="1"
-                        class="c16"
+                        class="c15"
                         tabindex="-1"
                       >
                         <div
-                          class="c22 c23"
+                          class="c21 c22"
                         >
                           <svg
                             aria-label="Reset password"
@@ -520,11 +511,11 @@ describe('ADMIN | Pages | Settings | Email Templates', () => {
                       </td>
                       <td
                         aria-colindex="2"
-                        class="c16"
+                        class="c15"
                         tabindex="-1"
                       >
                         <span
-                          class="c24"
+                          class="c23"
                         >
                           Reset password
                         </span>
@@ -532,14 +523,14 @@ describe('ADMIN | Pages | Settings | Email Templates', () => {
                       <td
                         aria-colindex="3"
                         aria-hidden="true"
-                        class="c16"
+                        class="c15"
                         role="button"
                       >
                         <span>
                           <button
                             aria-disabled="false"
                             aria-labelledby="tooltip-1"
-                            class="c25 c26"
+                            class="c24 c25"
                             tabindex="-1"
                             type="button"
                           >
@@ -563,16 +554,16 @@ describe('ADMIN | Pages | Settings | Email Templates', () => {
                     </tr>
                     <tr
                       aria-rowindex="3"
-                      class="c14"
+                      class="c13"
                       style="cursor: pointer;"
                     >
                       <td
                         aria-colindex="1"
-                        class="c16"
+                        class="c15"
                         tabindex="-1"
                       >
                         <div
-                          class="c22 c23"
+                          class="c21 c22"
                         >
                           <svg
                             aria-label="Email address confirmation"
@@ -591,11 +582,11 @@ describe('ADMIN | Pages | Settings | Email Templates', () => {
                       </td>
                       <td
                         aria-colindex="2"
-                        class="c16"
+                        class="c15"
                         tabindex="-1"
                       >
                         <span
-                          class="c24"
+                          class="c23"
                         >
                           Email address confirmation
                         </span>
@@ -603,14 +594,14 @@ describe('ADMIN | Pages | Settings | Email Templates', () => {
                       <td
                         aria-colindex="3"
                         aria-hidden="true"
-                        class="c16"
+                        class="c15"
                         role="button"
                       >
                         <span>
                           <button
                             aria-disabled="false"
                             aria-labelledby="tooltip-3"
-                            class="c25 c26"
+                            class="c24 c25"
                             tabindex="-1"
                             type="button"
                           >
diff --git a/packages/plugins/users-permissions/admin/src/pages/Providers/tests/index.test.js b/packages/plugins/users-permissions/admin/src/pages/Providers/tests/index.test.js
index d11c5b21ac..a0f7ece910 100644
--- a/packages/plugins/users-permissions/admin/src/pages/Providers/tests/index.test.js
+++ b/packages/plugins/users-permissions/admin/src/pages/Providers/tests/index.test.js
@@ -55,7 +55,7 @@ describe('Admin | containers | ProvidersPage', () => {
     } = render(App);
 
     expect(firstChild).toMatchInlineSnapshot(`
-      .c9 {
+      .c8 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -73,7 +73,7 @@ describe('Admin | containers | ProvidersPage', () => {
         justify-content: space-around;
       }
 
-      .c11 {
+      .c10 {
         border: 0;
         -webkit-clip: rect(0 0 0 0);
         clip: rect(0 0 0 0);
@@ -85,12 +85,12 @@ describe('Admin | containers | ProvidersPage', () => {
         width: 1px;
       }
 
-      .c12 {
+      .c11 {
         -webkit-animation: gzYjWD 1s infinite linear;
         animation: gzYjWD 1s infinite linear;
       }
 
-      .c10 {
+      .c9 {
         height: 100vh;
       }
 
@@ -154,12 +154,6 @@ describe('Admin | containers | ProvidersPage', () => {
         line-height: 1.25;
       }
 
-      .c8 {
-        color: #666687;
-        font-size: 1rem;
-        line-height: 1.5;
-      }
-
       .c3:focus-visible {
         outline: none;
       }
@@ -196,13 +190,10 @@ describe('Admin | containers | ProvidersPage', () => {
                     </h1>
                   </div>
                 </div>
-                <p
-                  class="c8"
-                />
               </div>
             </div>
             <div
-              class="c9 c10"
+              class="c8 c9"
               data-testid="loader"
             >
               <div
@@ -210,13 +201,13 @@ describe('Admin | containers | ProvidersPage', () => {
                 role="alert"
               >
                 <div
-                  class="c11"
+                  class="c10"
                 >
                   Loading content.
                 </div>
                 <img
                   aria-hidden="true"
-                  class="c12"
+                  class="c11"
                   src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjMiIGhlaWdodD0iNjMiIHZpZXdCb3g9IjAgMCA2MyA2MyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTQyLjU1NjMgMTEuOTgxNkMzOS40ODQgMTAuMzA3MSAzNS44NTc1IDkuMjkwOTcgMzIuMzM1NCA5LjEzNTIxQzI4LjY0NDMgOC45Mjg4OCAyNC44Mjk1IDkuNzIzMTggMjEuMzMzNiAxMS40MTI5QzIwLjkxMjMgMTEuNTkwMSAyMC41Mzc2IDExLjgxMDEgMjAuMTcyMiAxMi4wMjQ5TDIwLjAxMDggMTIuMTE3OUMxOS44Nzc0IDEyLjE5NTEgMTkuNzQ0MSAxMi4yNzI0IDE5LjYwOCAxMi4zNTM2QzE5LjMyNTMgMTIuNTE0NiAxOS4wNDkyIDEyLjY3NDQgMTguNzU0NCAxMi44NzkyQzE4LjU0NjMgMTMuMDMyOSAxOC4zMzk1IDEzLjE3NTkgMTguMTMwMSAxMy4zMjNDMTcuNTY1OCAxMy43MjA4IDE2Ljk4NjggMTQuMTMxNyAxNi40OTgzIDE0LjU5NzlDMTQuODQ3NiAxNS45NTI0IDEzLjU1NzEgMTcuNjA3NSAxMi42MDcxIDE4LjkyMTRDMTAuNDM2NSAyMi4xNTY2IDkuMDg2MjIgMjUuOTU2NyA4LjgwNzAyIDI5LjYxNDNMOC43NzY0IDMwLjE1ODhDOC43MzMyOCAzMC45MTk2IDguNjg0NzYgMzEuNzA1NyA4Ljc1MzUzIDMyLjQ1NTVDOC43NjY0OCAzMi42MDg0IDguNzY2MSAzMi43NjM4IDguNzc1MDYgMzIuOTE0QzguNzg4OTUgMzMuMjI5IDguODAxNTIgMzMuNTM3MyA4Ljg0NiAzMy44NjcyTDkuMDczOTYgMzUuNDIyMUM5LjA5NzU2IDM1LjU3NjQgOS4xMTk4IDM1Ljc0MTMgOS4xNjMzIDM1LjkyNjNMOS42NTkxOSAzNy45MjcyTDEwLjEzOCAzOS4yODIzQzEwLjI3MjkgMzkuNjY3MyAxMC40MTU4IDQwLjA3NTEgMTAuNiA0MC40M0MxMi4wMjkyIDQzLjYzNyAxNC4xNDI1IDQ2LjQ1NzggMTYuNzA2MyA0OC41ODVDMTkuMDUwOCA1MC41Mjk2IDIxLjgyNCA1Mi4wMDIzIDI0Ljc0OTEgNTIuODQ1MkwyNi4yMzcxIDUzLjIzNzZDMjYuMzc4MSA1My4yNjkzIDI2LjQ5MjYgNTMuMjg4OSAyNi42MDMxIDUzLjMwNThMMjYuNzc3NSA1My4zMzExQzI3LjAwNTIgNTMuMzYzNiAyNy4yMTk1IDUzLjM5ODYgMjcuNDQ0NSA1My40MzVDMjcuODU5OCA1My41MDc2IDI4LjI2NzIgNTMuNTc0OCAyOC43MDc5IDUzLjYxODNMMzAuNTY0MSA1My43MjI5QzMwLjk1MTYgNTMuNzI0OSAzMS4zMzUyIDUzLjcwNjggMzEuNzA4MSA1My42ODc0QzMxLjkwMzkgNTMuNjgxIDMyLjA5ODQgNTMuNjY4MSAzMi4zMjg4IDUzLjY2MkMzNC41MjUzIDUzLjQ3NzIgMzYuNTEwNiA1My4wNjM0IDM4LjA1MTYgNTIuNDY1MkMzOC4xNzY5IDUyLjQxNzEgMzguMzAwOCA1Mi4zNzk2IDM4LjQyMzQgNTIuMzM1NUMzOC42NzI3IDUyLjI0OTkgMzguOTI1OSA1Mi4xNjcgMzkuMTQzMiA1Mi4wNTk5TDQwLjg1OTEgNTEuMjYyNkw0Mi41NzAyIDUwLjI2NkM0Mi45MDA5IDUwLjA2ODIgNDMuMDIwNSA0OS42NDE0IDQyLjgyODIgNDkuMjk4NEM0Mi42MzIgNDguOTUyNiA0Mi4yMDM0IDQ4LjgzMDggNDEuODYzNCA0OS4wMTY2TDQwLjE3OTIgNDkuOTIxOEwzOC40OTk1IDUwLjYyMjRDMzguMzE2OSA1MC42OTUzIDM4LjEyMSA1MC43NTM0IDM3LjkyMjQgNTAuODE1NUMzNy43ODM4IDUwLjg0ODkgMzcuNjUxOCA1MC44OTgzIDM3LjUwMTIgNTAuOTQwOEMzNi4wNzExIDUxLjQzNSAzNC4yNDQ1IDUxLjc0MjUgMzIuMjQ0IDUxLjgzNDZDMzIuMDQ0MiA1MS44MzgzIDMxLjg0NzEgNTEuODM3OSAzMS42NTQgNTEuODQwM0MzMS4zMDUxIDUxLjg0MTQgMzAuOTYwMiA1MS44NDUxIDMwLjYzOTIgNTEuODMwNUwyOC45MTc3IDUxLjY3MjVDMjguNTQ3NiA1MS42MTkgMjguMTY5NSA1MS41NDI3IDI3Ljc4NDggNTEuNDY3OEMyNy41NjM5IDUxLjQxNjcgMjcuMzM3NiA1MS4zNzM3IDI3LjEyOTkgNTEuMzM3NEwyNi45NTI5IDUxLjI5ODdDMjYuODcwNCA1MS4yODM0IDI2Ljc3NzIgNTEuMjY2NyAyNi43MzMzIDUxLjI1NDNMMjUuMzQ2NiA1MC44MzIyQzIyLjc2NTEgNDkuOTc4OSAyMC4zMyA0OC41NzI5IDE4LjI5NDIgNDYuNzU1N0MxNi4xMDU2IDQ0Ljc5NTEgMTQuMzMzOSA0Mi4yMzM1IDEzLjE3NDIgMzkuMzU4MkMxMi4wMjc2IDM2LjYwMTMgMTEuNTk4OCAzMy4yNzkyIDExLjk3MTYgMzAuMDA3NkMxMi4zMTQ1IDI3LjAyMTMgMTMuMzk0OCAyNC4xNjM1IDE1LjE4NTggMjEuNTA4M0MxNS4zMDM0IDIxLjMzMzkgMTUuNDIxIDIxLjE1OTYgMTUuNTIxMiAyMS4wMTk2QzE2LjQzMDkgMTkuODY4OCAxNy41NDA4IDE4LjU1ODkgMTguOTQ4MyAxNy40OTZDMTkuMzM2NyAxNy4xNTI1IDE5Ljc4NjIgMTYuODU2IDIwLjI2MTEgMTYuNTQ3OEMyMC40ODc4IDE2LjQwMDkgMjAuNzA3OSAxNi4yNTUzIDIwLjg5MDcgMTYuMTMwNkMyMS4wOTc0IDE2LjAwNDggMjEuMzE4OCAxNS44ODMxIDIxLjUzNDggMTUuNzY5NEMyMS42NzYxIDE1LjY5NzUgMjEuODE2MiAxNS42MTkgMjEuOTM4OCAxNS41NTc2TDIyLjEwMDIgMTUuNDY0NkMyMi40MDAyIDE1LjMwMzcgMjIuNjc0OSAxNS4xNTQ2IDIyLjk5MDggMTUuMDM5TDI0LjExODYgMTQuNTcxNUMyNC4zMzk5IDE0LjQ4NDQgMjQuNTcxOCAxNC40MTU5IDI0Ljc5OTcgMTQuMzQ0N0MyNC45NTMgMTQuMjk4MiAyNS4wOTgyIDE0LjI2MzUgMjUuMjYzNSAxNC4yMDc4QzI1Ljc4NiAxNC4wMTgyIDI2LjMyODMgMTMuOTExMiAyNi45MTA1IDEzLjc5NjVDMjcuMTE3IDEzLjc1NzEgMjcuMzMwMiAxMy43MTYzIDI3LjU2MDggMTMuNjU4NUMyNy43NTUzIDEzLjYxMSAyNy45NzM3IDEzLjU5NjkgMjguMjA4MiAxMy41NzYyQzI4LjM2NCAxMy41NjAzIDI4LjUxNzIgMTMuNTQ4MyAyOC42MzE4IDEzLjUzMzNDMjguNzg3NiAxMy41MTczIDI4LjkzNDIgMTMuNTA2NiAyOS4wOTI3IDEzLjQ4NjdDMjkuMzI4NSAxMy40NTU1IDI5LjU0NTYgMTMuNDM0NyAyOS43NDk0IDEzLjQzMzdDMzAuMDIzNyAxMy40NCAzMC4yOTk0IDEzLjQzNTcgMzAuNTc3NyAxMy40Mjc0QzMxLjA4MTEgMTMuNDIxIDMxLjU1NzkgMTMuNDE5NyAzMi4wMzE4IDEzLjQ5MTRDMzQuOTY2NCAxMy43MzUyIDM3LjcxNDQgMTQuNjA4NSA0MC4yMDUyIDE2LjA4NjhDNDIuMzQ4OSAxNy4zNjU1IDQ0LjI3MTYgMTkuMTUyNSA0NS43NjA3IDIxLjI2NEM0Ny4wMjU1IDIzLjA2MjggNDcuOTc1NiAyNS4wNTI4IDQ4LjQ5MjggMjcuMDM5M0M0OC41NzIgMjcuMzE3NiA0OC42Mjk5IDI3LjU5MzEgNDguNjgzOSAyNy44NjU5QzQ4LjcxNTQgMjguMDQyOCA0OC43NTYzIDI4LjIxNDUgNDguNzg5MiAyOC4zNjM2QzQ4LjgwMzcgMjguNDU0MSA0OC44MjA4IDI4LjU0MDYgNDguODQ0NSAyOC42MjU4QzQ4Ljg3NDkgMjguNzQ0MyA0OC44OTg2IDI4Ljg2NCA0OC45MTE2IDI4Ljk2NTFMNDguOTc5MyAyOS42MDQ3QzQ4Ljk5MjIgMjkuNzc0OCA0OS4wMTMyIDI5LjkzMzEgNDkuMDMwMSAzMC4wODg3QzQ5LjA2NjggMzAuMzI2OCA0OS4wODg5IDMwLjU2MDggNDkuMDk2NCAzMC43NTYxTDQ5LjEwODMgMzEuOTAwMUM0OS4xMzEyIDMyLjMzMDcgNDkuMDg5IDMyLjcxMTYgNDkuMDUyMiAzMy4wNjczQzQ5LjAzODQgMzMuMjU5OCA0OS4wMTI2IDMzLjQ0NDMgNDkuMDEyMyAzMy41ODI0QzQ4Ljk5NjEgMzMuNjkyNiA0OC45OTE4IDMzLjc5MzUgNDguOTgzNiAzMy44OTE3QzQ4Ljk3NTMgMzQuMDA3MiA0OC45NzI0IDM0LjExNDggNDguOTQxNCAzNC4yNTU0TDQ4LjU0NDkgMzYuMzA1OUM0OC4zMTM0IDM3Ljg2MjMgNDkuMzc5MyAzOS4zMzY1IDUwLjk0ODggMzkuNTgyMkM1Mi4wNDE3IDM5Ljc2MDEgNTMuMTUzNiAzOS4yODE5IDUzLjc3MTEgMzguMzY2NEM1NC4wMDYzIDM4LjAxNzYgNTQuMTYwNCAzNy42MjU3IDU0LjIyMjcgMzcuMjA2NEw1NC41MjE3IDM1LjI1NzRDNTQuNTUxNCAzNS4wNzU2IDU0LjU3MiAzNC44MyA1NC41ODQ2IDM0LjU3OTFMNTQuNjAyOCAzNC4yMzM4QzU0LjYwOTggMzQuMDU5OCA1NC42MjIzIDMzLjg3NzkgNTQuNjM0NyAzMy42Nzg4QzU0LjY3MzQgMzMuMTA1MiA1NC43MTYzIDMyLjQ0NzkgNTQuNjYxOSAzMS44MDU4TDU0LjU4NjcgMzAuNDI4OUM1NC41NjIyIDMwLjA5NTIgNTQuNTA5NyAyOS43NiA1NC40NTU5IDI5LjQxODFDNTQuNDMxIDI5LjI1NzIgNTQuNDA0OCAyOS4wODk2IDU0LjM4MjYgMjguOTA3NEw1NC4yNjg3IDI4LjEwNEM1NC4yMzMyIDI3LjkyNDQgNTQuMTgwNCAyNy43MjczIDU0LjEzMjkgMjcuNTM5Nkw1NC4wNjQzIDI3LjI0NTRDNTQuMDE5NSAyNy4wNzEgNTMuOTc3MyAyNi44OTI3IDUzLjkzMzggMjYuNzA3NkM1My44NDU1IDI2LjMzMDkgNTMuNzQ3OSAyNS45NDIyIDUzLjYxMyAyNS41NTcxQzUyLjg0IDIzLjAyOTIgNTEuNTM4MyAyMC41MTk0IDQ5LjgzMzggMTguMjc5OUM0Ny44NTQ0IDE1LjY4MiA0NS4zMzMzIDEzLjUwODcgNDIuNTU2MyAxMS45ODE2WiIgZmlsbD0iIzQ5NDVGRiIvPgo8L3N2Zz4K"
                 />
               </div>
diff --git a/packages/plugins/users-permissions/admin/src/pages/Roles/CreatePage/tests/index.test.js b/packages/plugins/users-permissions/admin/src/pages/Roles/CreatePage/tests/index.test.js
index 102705ae64..af9f17783e 100644
--- a/packages/plugins/users-permissions/admin/src/pages/Roles/CreatePage/tests/index.test.js
+++ b/packages/plugins/users-permissions/admin/src/pages/Roles/CreatePage/tests/index.test.js
@@ -621,7 +621,7 @@ describe('Admin | containers | RoleCreatePage', () => {
         padding-left: 32px;
       }
 
-      .c63 {
+      .c64 {
         background: #eaeaef;
         padding-top: 24px;
         padding-right: 32px;
@@ -651,25 +651,29 @@ describe('Admin | containers | RoleCreatePage', () => {
         max-width: 100%;
       }
 
-      .c62 {
+      .c63 {
         grid-column: span 5;
         max-width: 100%;
       }
 
-      .c54 {
+      .c56 {
         color: #4945ff;
         font-size: 0.75rem;
         line-height: 1.33;
       }
 
-      .c55 {
+      .c57 {
         color: #4a4a6a;
+        display: block;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
         font-weight: 500;
         font-size: 1rem;
         line-height: 1.25;
       }
 
-      .c56 {
+      .c58 {
         color: #666687;
         font-size: 0.875rem;
         line-height: 1.43;
@@ -681,26 +685,39 @@ describe('Admin | containers | RoleCreatePage', () => {
 
       .c46 {
         background: #f6f6f9;
+        padding-top: 24px;
         padding-right: 24px;
+        padding-bottom: 24px;
         padding-left: 24px;
       }
 
       .c49 {
+        max-width: 100%;
         -webkit-flex: 1;
         -ms-flex: 1;
         flex: 1;
       }
 
-      .c58 {
+      .c52 {
+        min-width: 0px;
+        -webkit-flex: 1;
+        -ms-flex: 1;
+        flex: 1;
+      }
+
+      .c59 {
         background: #dcdce4;
         border-radius: 50%;
         cursor: pointer;
         width: 2rem;
         height: 2rem;
+        -webkit-flex-shrink: 0;
+        -ms-flex-negative: 0;
+        flex-shrink: 0;
         cursor: pointer;
       }
 
-      .c60 {
+      .c61 {
         color: #666687;
         width: 0.6875rem;
       }
@@ -737,7 +754,7 @@ describe('Admin | containers | RoleCreatePage', () => {
         flex-direction: row;
       }
 
-      .c59 {
+      .c60 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -749,6 +766,9 @@ describe('Admin | containers | RoleCreatePage', () => {
         -webkit-flex-direction: row;
         -ms-flex-direction: row;
         flex-direction: row;
+        -webkit-flex-shrink: 0;
+        -ms-flex-negative: 0;
+        flex-shrink: 0;
         -webkit-box-pack: center;
         -webkit-justify-content: center;
         -ms-flex-pack: center;
@@ -763,11 +783,11 @@ describe('Admin | containers | RoleCreatePage', () => {
         border: 1px solid #4945ff;
       }
 
-      .c44:hover:not([aria-disabled='true']) .sc-eHtaVP {
+      .c44:hover:not([aria-disabled='true']) .sc-uWCef {
         color: #271fe0;
       }
 
-      .c44:hover:not([aria-disabled='true']) .c53 {
+      .c44:hover:not([aria-disabled='true']) .c55 {
         color: #4945ff;
       }
 
@@ -779,22 +799,22 @@ describe('Admin | containers | RoleCreatePage', () => {
         background: #d9d8ff;
       }
 
-      .c51 {
+      .c53 {
         background: transparent;
         border: none;
         position: relative;
         outline: none;
       }
 
-      .c51[aria-disabled='true'] {
+      .c53[aria-disabled='true'] {
         pointer-events: none;
       }
 
-      .c51[aria-disabled='true'] svg path {
+      .c53[aria-disabled='true'] svg path {
         fill: #666687;
       }
 
-      .c51 svg {
+      .c53 svg {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -802,11 +822,11 @@ describe('Admin | containers | RoleCreatePage', () => {
         font-size: 0.625rem;
       }
 
-      .c51 svg path {
+      .c53 svg path {
         fill: #4945ff;
       }
 
-      .c51:after {
+      .c53:after {
         -webkit-transition-property: all;
         transition-property: all;
         -webkit-transition-duration: 0.2s;
@@ -821,11 +841,11 @@ describe('Admin | containers | RoleCreatePage', () => {
         border: 2px solid transparent;
       }
 
-      .c51:focus-visible {
+      .c53:focus-visible {
         outline: none;
       }
 
-      .c51:focus-visible:after {
+      .c53:focus-visible:after {
         border-radius: 8px;
         content: '';
         position: absolute;
@@ -836,34 +856,38 @@ describe('Admin | containers | RoleCreatePage', () => {
         border: 2px solid #4945ff;
       }
 
-      .c57 > * {
+      .c51 > * {
         margin-left: 0;
         margin-right: 0;
       }
 
-      .c57 > * + * {
+      .c51 > * + * {
         margin-left: 12px;
       }
 
-      .c61 path {
+      .c62 path {
         fill: #666687;
       }
 
-      .c52 {
+      .c54 {
         text-align: left;
       }
 
-      .c52 svg {
+      .c54 > span {
+        max-width: 100%;
+      }
+
+      .c54 svg {
         width: 0.875rem;
         height: 0.875rem;
       }
 
-      .c52 svg path {
+      .c54 svg path {
         fill: #8e8ea9;
       }
 
       .c48 {
-        height: 5.5rem;
+        min-height: 5.5rem;
         border-radius: 4px;
       }
 
@@ -896,13 +920,13 @@ describe('Admin | containers | RoleCreatePage', () => {
       }
 
       @media (max-width:68.75rem) {
-        .c62 {
+        .c63 {
           grid-column: span;
         }
       }
 
       @media (max-width:34.375rem) {
-        .c62 {
+        .c63 {
           grid-column: span;
         }
       }
@@ -1120,60 +1144,65 @@ describe('Admin | containers | RoleCreatePage', () => {
                             class="c45 c46 c47 c48"
                             cursor=""
                           >
-                            <button
-                              aria-controls="accordion-content-accordion-1"
-                              aria-disabled="false"
-                              aria-expanded="false"
-                              aria-labelledby="accordion-label-accordion-1"
-                              class="c45 c49 c50 c51 c52"
-                              data-strapi-accordion-toggle="true"
-                              type="button"
-                            >
-                              <span
-                                class="c53 c54"
-                              >
-                                <span
-                                  class="c53 c55"
-                                  id="accordion-label-accordion-1"
-                                >
-                                  Address
-                                </span>
-                                <p
-                                  class="c53 c56"
-                                  id="accordion-desc-accordion-1"
-                                >
-                                  Define all allowed actions for the api::address plugin.
-                                </p>
-                              </span>
-                            </button>
                             <div
-                              class="c45 c50 c57"
+                              class="c45 c49 c50 c51"
                               spacing="3"
                             >
-                              <span
-                                aria-hidden="true"
-                                class="c45 c58 c59"
-                                cursor="pointer"
-                                data-strapi-dropdown="true"
-                                height="2rem"
-                                width="2rem"
+                              <button
+                                aria-controls="accordion-content-accordion-1"
+                                aria-disabled="false"
+                                aria-expanded="false"
+                                aria-labelledby="accordion-label-accordion-1"
+                                class="c45 c52 c50 c53 c54"
+                                data-strapi-accordion-toggle="true"
+                                type="button"
                               >
-                                <svg
-                                  class="c60 c61"
-                                  fill="none"
-                                  height="1em"
-                                  viewBox="0 0 14 8"
-                                  width="0.6875rem"
-                                  xmlns="http://www.w3.org/2000/svg"
+                                <span
+                                  class="c55 c56"
                                 >
-                                  <path
-                                    clip-rule="evenodd"
-                                    d="M14 .889a.86.86 0 01-.26.625L7.615 7.736A.834.834 0 017 8a.834.834 0 01-.615-.264L.26 1.514A.861.861 0 010 .889c0-.24.087-.45.26-.625A.834.834 0 01.875 0h12.25c.237 0 .442.088.615.264a.86.86 0 01.26.625z"
-                                    fill="#32324D"
-                                    fill-rule="evenodd"
-                                  />
-                                </svg>
-                              </span>
+                                  <span
+                                    class="c55 sc-uWCef c57"
+                                    id="accordion-label-accordion-1"
+                                  >
+                                    Address
+                                  </span>
+                                  <p
+                                    class="c55 c58"
+                                    id="accordion-desc-accordion-1"
+                                  >
+                                    Define all allowed actions for the api::address plugin.
+                                  </p>
+                                </span>
+                              </button>
+                              <div
+                                class="c45 c50 c51"
+                                spacing="3"
+                              >
+                                <span
+                                  aria-hidden="true"
+                                  class="c45 c59 c60"
+                                  cursor="pointer"
+                                  data-strapi-dropdown="true"
+                                  height="2rem"
+                                  width="2rem"
+                                >
+                                  <svg
+                                    class="c61 c62"
+                                    fill="none"
+                                    height="1em"
+                                    viewBox="0 0 14 8"
+                                    width="0.6875rem"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      clip-rule="evenodd"
+                                      d="M14 .889a.86.86 0 01-.26.625L7.615 7.736A.834.834 0 017 8a.834.834 0 01-.615-.264L.26 1.514A.861.861 0 010 .889c0-.24.087-.45.26-.625A.834.834 0 01.875 0h12.25c.237 0 .442.088.615.264a.86.86 0 01.26.625z"
+                                      fill="#32324D"
+                                      fill-rule="evenodd"
+                                    />
+                                  </svg>
+                                </span>
+                              </div>
                             </div>
                           </div>
                         </div>
@@ -1182,10 +1211,10 @@ describe('Admin | containers | RoleCreatePage', () => {
                   </div>
                 </div>
                 <div
-                  class="c62"
+                  class="c63"
                 >
                   <div
-                    class="c63"
+                    class="c64"
                     style="min-height: 100%;"
                   >
                     <div
diff --git a/packages/plugins/users-permissions/admin/src/pages/Roles/EditPage/tests/index.test.js b/packages/plugins/users-permissions/admin/src/pages/Roles/EditPage/tests/index.test.js
index 0ba5bd9a0d..d4f8f06120 100644
--- a/packages/plugins/users-permissions/admin/src/pages/Roles/EditPage/tests/index.test.js
+++ b/packages/plugins/users-permissions/admin/src/pages/Roles/EditPage/tests/index.test.js
@@ -689,7 +689,7 @@ describe('Admin | containers | RoleEditPage', () => {
         padding-left: 32px;
       }
 
-      .c68 {
+      .c69 {
         background: #eaeaef;
         padding-top: 24px;
         padding-right: 32px;
@@ -719,25 +719,29 @@ describe('Admin | containers | RoleEditPage', () => {
         max-width: 100%;
       }
 
-      .c67 {
+      .c68 {
         grid-column: span 5;
         max-width: 100%;
       }
 
-      .c59 {
+      .c61 {
         color: #4945ff;
         font-size: 0.75rem;
         line-height: 1.33;
       }
 
-      .c60 {
+      .c62 {
         color: #4a4a6a;
+        display: block;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
         font-weight: 500;
         font-size: 1rem;
         line-height: 1.25;
       }
 
-      .c61 {
+      .c63 {
         color: #666687;
         font-size: 0.875rem;
         line-height: 1.43;
@@ -749,26 +753,39 @@ describe('Admin | containers | RoleEditPage', () => {
 
       .c51 {
         background: #f6f6f9;
+        padding-top: 24px;
         padding-right: 24px;
+        padding-bottom: 24px;
         padding-left: 24px;
       }
 
       .c54 {
+        max-width: 100%;
         -webkit-flex: 1;
         -ms-flex: 1;
         flex: 1;
       }
 
-      .c63 {
+      .c57 {
+        min-width: 0px;
+        -webkit-flex: 1;
+        -ms-flex: 1;
+        flex: 1;
+      }
+
+      .c64 {
         background: #dcdce4;
         border-radius: 50%;
         cursor: pointer;
         width: 2rem;
         height: 2rem;
+        -webkit-flex-shrink: 0;
+        -ms-flex-negative: 0;
+        flex-shrink: 0;
         cursor: pointer;
       }
 
-      .c65 {
+      .c66 {
         color: #666687;
         width: 0.6875rem;
       }
@@ -805,7 +822,7 @@ describe('Admin | containers | RoleEditPage', () => {
         flex-direction: row;
       }
 
-      .c64 {
+      .c65 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -817,6 +834,9 @@ describe('Admin | containers | RoleEditPage', () => {
         -webkit-flex-direction: row;
         -ms-flex-direction: row;
         flex-direction: row;
+        -webkit-flex-shrink: 0;
+        -ms-flex-negative: 0;
+        flex-shrink: 0;
         -webkit-box-pack: center;
         -webkit-justify-content: center;
         -ms-flex-pack: center;
@@ -831,11 +851,11 @@ describe('Admin | containers | RoleEditPage', () => {
         border: 1px solid #4945ff;
       }
 
-      .c49:hover:not([aria-disabled='true']) .sc-eHtaVP {
+      .c49:hover:not([aria-disabled='true']) .sc-uWCef {
         color: #271fe0;
       }
 
-      .c49:hover:not([aria-disabled='true']) .c58 {
+      .c49:hover:not([aria-disabled='true']) .c60 {
         color: #4945ff;
       }
 
@@ -847,22 +867,22 @@ describe('Admin | containers | RoleEditPage', () => {
         background: #d9d8ff;
       }
 
-      .c56 {
+      .c58 {
         background: transparent;
         border: none;
         position: relative;
         outline: none;
       }
 
-      .c56[aria-disabled='true'] {
+      .c58[aria-disabled='true'] {
         pointer-events: none;
       }
 
-      .c56[aria-disabled='true'] svg path {
+      .c58[aria-disabled='true'] svg path {
         fill: #666687;
       }
 
-      .c56 svg {
+      .c58 svg {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -870,11 +890,11 @@ describe('Admin | containers | RoleEditPage', () => {
         font-size: 0.625rem;
       }
 
-      .c56 svg path {
+      .c58 svg path {
         fill: #4945ff;
       }
 
-      .c56:after {
+      .c58:after {
         -webkit-transition-property: all;
         transition-property: all;
         -webkit-transition-duration: 0.2s;
@@ -889,11 +909,11 @@ describe('Admin | containers | RoleEditPage', () => {
         border: 2px solid transparent;
       }
 
-      .c56:focus-visible {
+      .c58:focus-visible {
         outline: none;
       }
 
-      .c56:focus-visible:after {
+      .c58:focus-visible:after {
         border-radius: 8px;
         content: '';
         position: absolute;
@@ -904,34 +924,38 @@ describe('Admin | containers | RoleEditPage', () => {
         border: 2px solid #4945ff;
       }
 
-      .c62 > * {
+      .c56 > * {
         margin-left: 0;
         margin-right: 0;
       }
 
-      .c62 > * + * {
+      .c56 > * + * {
         margin-left: 12px;
       }
 
-      .c66 path {
+      .c67 path {
         fill: #666687;
       }
 
-      .c57 {
+      .c59 {
         text-align: left;
       }
 
-      .c57 svg {
+      .c59 > span {
+        max-width: 100%;
+      }
+
+      .c59 svg {
         width: 0.875rem;
         height: 0.875rem;
       }
 
-      .c57 svg path {
+      .c59 svg path {
         fill: #8e8ea9;
       }
 
       .c53 {
-        height: 5.5rem;
+        min-height: 5.5rem;
         border-radius: 4px;
       }
 
@@ -964,13 +988,13 @@ describe('Admin | containers | RoleEditPage', () => {
       }
 
       @media (max-width:68.75rem) {
-        .c67 {
+        .c68 {
           grid-column: span;
         }
       }
 
       @media (max-width:34.375rem) {
-        .c67 {
+        .c68 {
           grid-column: span;
         }
       }
@@ -1222,60 +1246,65 @@ describe('Admin | containers | RoleEditPage', () => {
                             class="c50 c51 c52 c53"
                             cursor=""
                           >
-                            <button
-                              aria-controls="accordion-content-accordion-1"
-                              aria-disabled="false"
-                              aria-expanded="false"
-                              aria-labelledby="accordion-label-accordion-1"
-                              class="c50 c54 c55 c56 c57"
-                              data-strapi-accordion-toggle="true"
-                              type="button"
-                            >
-                              <span
-                                class="c58 c59"
-                              >
-                                <span
-                                  class="c58 c60"
-                                  id="accordion-label-accordion-1"
-                                >
-                                  Address
-                                </span>
-                                <p
-                                  class="c58 c61"
-                                  id="accordion-desc-accordion-1"
-                                >
-                                  Define all allowed actions for the api::address plugin.
-                                </p>
-                              </span>
-                            </button>
                             <div
-                              class="c50 c55 c62"
+                              class="c50 c54 c55 c56"
                               spacing="3"
                             >
-                              <span
-                                aria-hidden="true"
-                                class="c50 c63 c64"
-                                cursor="pointer"
-                                data-strapi-dropdown="true"
-                                height="2rem"
-                                width="2rem"
+                              <button
+                                aria-controls="accordion-content-accordion-1"
+                                aria-disabled="false"
+                                aria-expanded="false"
+                                aria-labelledby="accordion-label-accordion-1"
+                                class="c50 c57 c55 c58 c59"
+                                data-strapi-accordion-toggle="true"
+                                type="button"
                               >
-                                <svg
-                                  class="c65 c66"
-                                  fill="none"
-                                  height="1em"
-                                  viewBox="0 0 14 8"
-                                  width="0.6875rem"
-                                  xmlns="http://www.w3.org/2000/svg"
+                                <span
+                                  class="c60 c61"
                                 >
-                                  <path
-                                    clip-rule="evenodd"
-                                    d="M14 .889a.86.86 0 01-.26.625L7.615 7.736A.834.834 0 017 8a.834.834 0 01-.615-.264L.26 1.514A.861.861 0 010 .889c0-.24.087-.45.26-.625A.834.834 0 01.875 0h12.25c.237 0 .442.088.615.264a.86.86 0 01.26.625z"
-                                    fill="#32324D"
-                                    fill-rule="evenodd"
-                                  />
-                                </svg>
-                              </span>
+                                  <span
+                                    class="c60 sc-uWCef c62"
+                                    id="accordion-label-accordion-1"
+                                  >
+                                    Address
+                                  </span>
+                                  <p
+                                    class="c60 c63"
+                                    id="accordion-desc-accordion-1"
+                                  >
+                                    Define all allowed actions for the api::address plugin.
+                                  </p>
+                                </span>
+                              </button>
+                              <div
+                                class="c50 c55 c56"
+                                spacing="3"
+                              >
+                                <span
+                                  aria-hidden="true"
+                                  class="c50 c64 c65"
+                                  cursor="pointer"
+                                  data-strapi-dropdown="true"
+                                  height="2rem"
+                                  width="2rem"
+                                >
+                                  <svg
+                                    class="c66 c67"
+                                    fill="none"
+                                    height="1em"
+                                    viewBox="0 0 14 8"
+                                    width="0.6875rem"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                  >
+                                    <path
+                                      clip-rule="evenodd"
+                                      d="M14 .889a.86.86 0 01-.26.625L7.615 7.736A.834.834 0 017 8a.834.834 0 01-.615-.264L.26 1.514A.861.861 0 010 .889c0-.24.087-.45.26-.625A.834.834 0 01.875 0h12.25c.237 0 .442.088.615.264a.86.86 0 01.26.625z"
+                                      fill="#32324D"
+                                      fill-rule="evenodd"
+                                    />
+                                  </svg>
+                                </span>
+                              </div>
                             </div>
                           </div>
                         </div>
@@ -1284,10 +1313,10 @@ describe('Admin | containers | RoleEditPage', () => {
                   </div>
                 </div>
                 <div
-                  class="c67"
+                  class="c68"
                 >
                   <div
-                    class="c68"
+                    class="c69"
                     style="min-height: 100%;"
                   >
                     <div
diff --git a/yarn.lock b/yarn.lock
index 6681188cd0..b21d5622f2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2576,6 +2576,13 @@
   dependencies:
     "@babel/runtime" "^7.6.2"
 
+"@internationalized/number@^3.1.1":
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/@internationalized/number/-/number-3.1.1.tgz#160584316741de4381689ab759001603ee17b595"
+  integrity sha512-dBxCQKIxvsZvW2IBt3KsqrCfaw2nV6o6a8xsloJn/hjW0ayeyhKuiiMtTwW3/WGNPP7ZRyDbtuiUEjMwif1ENQ==
+  dependencies:
+    "@babel/runtime" "^7.6.2"
+
 "@isaacs/string-locale-compare@^1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@isaacs/string-locale-compare/-/string-locale-compare-1.1.0.tgz#291c227e93fd407a96ecd59879a35809120e432b"
@@ -6187,6 +6194,15 @@
     compute-scroll-into-view "^1.0.17"
     prop-types "^15.7.2"
 
+"@strapi/design-system@1.2.1-beta.0":
+  version "1.2.1-beta.0"
+  resolved "https://registry.yarnpkg.com/@strapi/design-system/-/design-system-1.2.1-beta.0.tgz#65e7ef08907378ac7cb17a31b7b388ba866c45b6"
+  integrity sha512-Sjr+KaEaQ5gGCeabQop6WqgktN1F88KOLC4+SqTiHpviLsSD0XsqCHaO6E5ZgSyNlGq0FEXFEIGNg69ZwOUp/A==
+  dependencies:
+    "@internationalized/number" "^3.1.1"
+    compute-scroll-into-view "^1.0.17"
+    prop-types "^15.7.2"
+
 "@strapi/generate-new@4.2.2":
   version "4.2.2"
   resolved "https://registry.yarnpkg.com/@strapi/generate-new/-/generate-new-4.2.2.tgz#046868784d982645e6c3ab23ab15d564bcd961f6"
@@ -6276,6 +6292,13 @@
   dependencies:
     rimraf "^3.0.2"
 
+"@strapi/icons@1.2.1-beta.0":
+  version "1.2.1-beta.0"
+  resolved "https://registry.yarnpkg.com/@strapi/icons/-/icons-1.2.1-beta.0.tgz#f04c4f3bbe4f2dbf6e7d9b51e5ba5f08c623a681"
+  integrity sha512-ndU0xMPGg6GIjlP0SWOYtNaeJm4csNeXO64w0FzT2ZKPp8d5jaFvijJpZOggp7/MFI5XDy0CNrFCHHfIQnKfvQ==
+  dependencies:
+    rimraf "^3.0.2"
+
 "@strapi/logger@4.2.2":
   version "4.2.2"
   resolved "https://registry.yarnpkg.com/@strapi/logger/-/logger-4.2.2.tgz#143969dbc194908759e46317245bcf02fae5903d"
@@ -20253,6 +20276,8 @@ path-case@^2.1.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/path-case/-/path-case-2.1.1.tgz#94b8037c372d3fe2906e465bb45e25d226e8eea5"
   integrity sha1-lLgDfDctP+KQbkZbtF4l0ibo7qU=
+  dependencies:
+    no-case "^2.2.0"
 
 path-dirname@^1.0.0:
   version "1.0.2"

From e1dc2b863479d0014c7738e4a4bab554b3db7b8a Mon Sep 17 00:00:00 2001
From: Julie Plantey <julie.plantey@gmail.com>
Date: Sun, 31 Jul 2022 14:56:09 +0200
Subject: [PATCH 2/9] list.asset.load translation refacto

---
 packages/core/upload/admin/src/components/AssetDialog/index.js  | 2 +-
 .../admin/src/components/BulkMoveDialog/BulkMoveDialog.js       | 2 +-
 .../core/upload/admin/src/components/EditAssetDialog/index.js   | 2 +-
 .../admin/src/components/EditFolderDialog/EditFolderDialog.js   | 2 +-
 packages/core/upload/admin/src/translations/ca.json             | 2 +-
 packages/core/upload/admin/src/translations/de.json             | 2 +-
 packages/core/upload/admin/src/translations/dk.json             | 2 +-
 packages/core/upload/admin/src/translations/en.json             | 2 +-
 packages/core/upload/admin/src/translations/es.json             | 2 +-
 packages/core/upload/admin/src/translations/ko.json             | 2 +-
 packages/core/upload/admin/src/translations/pl.json             | 2 +-
 11 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/packages/core/upload/admin/src/components/AssetDialog/index.js b/packages/core/upload/admin/src/components/AssetDialog/index.js
index b11567c659..f4d13c42cf 100644
--- a/packages/core/upload/admin/src/components/AssetDialog/index.js
+++ b/packages/core/upload/admin/src/components/AssetDialog/index.js
@@ -111,7 +111,7 @@ export const AssetDialog = ({
         <LoadingBody justifyContent="center" paddingTop={4} paddingBottom={4}>
           <Loader>
             {formatMessage({
-              id: getTrad('list.asset.load'),
+              id: getTrad('content.isLoading'),
               defaultMessage: 'Content is loading.',
             })}
           </Loader>
diff --git a/packages/core/upload/admin/src/components/BulkMoveDialog/BulkMoveDialog.js b/packages/core/upload/admin/src/components/BulkMoveDialog/BulkMoveDialog.js
index 5f8a183f07..223f99e7f8 100644
--- a/packages/core/upload/admin/src/components/BulkMoveDialog/BulkMoveDialog.js
+++ b/packages/core/upload/admin/src/components/BulkMoveDialog/BulkMoveDialog.js
@@ -62,7 +62,7 @@ export const BulkMoveDialog = ({ onClose, selected, currentFolder }) => {
           <Flex justifyContent="center" paddingTop={4} paddingBottom={4}>
             <Loader>
               {formatMessage({
-                id: getTrad('list.asset.load'),
+                id: getTrad('content.isLoading'),
                 defaultMessage: 'Content is loading.',
               })}
             </Loader>
diff --git a/packages/core/upload/admin/src/components/EditAssetDialog/index.js b/packages/core/upload/admin/src/components/EditAssetDialog/index.js
index adf343895e..babb1a8807 100644
--- a/packages/core/upload/admin/src/components/EditAssetDialog/index.js
+++ b/packages/core/upload/admin/src/components/EditAssetDialog/index.js
@@ -146,7 +146,7 @@ export const EditAssetDialog = ({
         <LoadingBody minHeight="60vh" justifyContent="center" paddingTop={4} paddingBottom={4}>
           <Loader>
             {formatMessage({
-              id: getTrad('list.asset.load'),
+              id: getTrad('content.isLoading'),
               defaultMessage: 'Content is loading.',
             })}
           </Loader>
diff --git a/packages/core/upload/admin/src/components/EditFolderDialog/EditFolderDialog.js b/packages/core/upload/admin/src/components/EditFolderDialog/EditFolderDialog.js
index edacc10c2f..4d7622ca37 100644
--- a/packages/core/upload/admin/src/components/EditFolderDialog/EditFolderDialog.js
+++ b/packages/core/upload/admin/src/components/EditFolderDialog/EditFolderDialog.js
@@ -130,7 +130,7 @@ export const EditFolderDialog = ({ onClose, folder, location, parentFolderId })
           <Flex justifyContent="center" paddingTop={4} paddingBottom={4}>
             <Loader>
               {formatMessage({
-                id: getTrad('list.asset.load'),
+                id: getTrad('content.isLoading'),
                 defaultMessage: 'Content is loading.',
               })}
             </Loader>
diff --git a/packages/core/upload/admin/src/translations/ca.json b/packages/core/upload/admin/src/translations/ca.json
index ac49c17716..c0fbc8eead 100644
--- a/packages/core/upload/admin/src/translations/ca.json
+++ b/packages/core/upload/admin/src/translations/ca.json
@@ -3,6 +3,7 @@
     "button.next": "Següent",
     "checkControl.crop-duplicate": "Duplica i retalla l'imatge",
     "checkControl.crop-original": "Retalla l'imatge original",
+    "content.isLoading": "S'està carregant la llista de fitxers.",
     "control-card.add": "Afegeix",
     "control-card.cancel": "Cancel·lar",
     "control-card.copy-link": "Copia l'enllaç",
@@ -35,7 +36,6 @@
     "input.url.description": "Separeu els vostres enllaços URL mitjançant un retorn de carro.",
     "input.url.label": "URL",
     "list.asset.at.finished": "Els fitxers s'han acabat de carregar.",
-    "list.asset.load": "S'està carregant la llista de fitxers.",
     "list.assets-empty.search": "No s'ha trobat cap resultat",
     "list.assets-empty.subtitle": "Afegiu-ne un a la llista.",
     "list.assets-empty.title": "Encara no hi ha fitxers",
diff --git a/packages/core/upload/admin/src/translations/de.json b/packages/core/upload/admin/src/translations/de.json
index 0d5e361073..dac21742c6 100644
--- a/packages/core/upload/admin/src/translations/de.json
+++ b/packages/core/upload/admin/src/translations/de.json
@@ -3,6 +3,7 @@
   "button.next": "Weiter",
   "checkControl.crop-duplicate": "Duplizieren & zuschneiden",
   "checkControl.crop-original": "Orginal zuschneiden",
+  "content.isLoading": "Lade die Datei-Liste.",
   "control-card.add": "Hinzufügen",
   "control-card.cancel": "Abbrechen",
   "control-card.copy-link": "Link kopieren",
@@ -34,7 +35,6 @@
   "input.url.description": "Eine URL pro Zeile.",
   "input.url.label": "URL",
   "list.asset.at.finished": "Die Datei-Liste wurde geladen.",
-  "list.asset.load": "Lade die Datei-Liste.",
   "list.assets-empty.search": "Keine Ergebnisse gefunden",
   "list.assets-empty.subtitle": "Füge welche der Liste hinzu.",
   "list.assets-empty.title": "Keine Dateien vorhanden.",
diff --git a/packages/core/upload/admin/src/translations/dk.json b/packages/core/upload/admin/src/translations/dk.json
index 2c1e77ce17..4d84541d80 100644
--- a/packages/core/upload/admin/src/translations/dk.json
+++ b/packages/core/upload/admin/src/translations/dk.json
@@ -3,6 +3,7 @@
   "button.next": "Næste",
   "checkControl.crop-duplicate": "Duplikér og beskær",
   "checkControl.crop-original": "Beskær originalen",
+  "content.isLoading": "Henter medieliste",
   "control-card.add": "Tilføj",
   "control-card.cancel": "Annuller",
   "control-card.copy-link": "Kopier link",
@@ -32,7 +33,6 @@
   "input.url.description": "Adskil dine URL links med enter.",
   "input.url.label": "URL",
   "list.asset.at.finished": "Mediet er færdigt med at loade.",
-  "list.asset.load": "Henter medieliste",
   "list.assets-empty.search": "Ingen resultater fundet",
   "list.assets-empty.subtitle": "Tilføj en til listen.",
   "list.assets-empty.title": "Der er ingen medier endnu",
diff --git a/packages/core/upload/admin/src/translations/en.json b/packages/core/upload/admin/src/translations/en.json
index 440658908c..594702c3e8 100644
--- a/packages/core/upload/admin/src/translations/en.json
+++ b/packages/core/upload/admin/src/translations/en.json
@@ -4,6 +4,7 @@
   "button.next": "Next",
   "checkControl.crop-duplicate": "Duplicate & crop the asset",
   "checkControl.crop-original": "Crop the original asset",
+  "content.isLoading": "Content is loading.",
   "control-card.add": "Add",
   "control-card.cancel": "Cancel",
   "control-card.copy-link": "Copy link",
@@ -38,7 +39,6 @@
   "input.url.label": "URL",
   "list.assets.title": "Assets",
   "list.asset.at.finished": "The assets have finished loading.",
-  "list.asset.load": "Content is loading.",
   "list.assets-empty.search": "No result found",
   "list.assets-empty.subtitle": "Add one to the list.",
   "list.assets-empty.title": "There are no assets yet",
diff --git a/packages/core/upload/admin/src/translations/es.json b/packages/core/upload/admin/src/translations/es.json
index a020249d5b..da1617d51e 100644
--- a/packages/core/upload/admin/src/translations/es.json
+++ b/packages/core/upload/admin/src/translations/es.json
@@ -3,6 +3,7 @@
   "button.next": "Siguiente",
   "checkControl.crop-duplicate": "Duplicar y cortar el recurso",
   "checkControl.crop-original": "Recortar el recurso original",
+  "content.isLoading": "Cargando la lista de recursos.",
   "control-card.add": "Añadir",
   "control-card.cancel": "Cancelar",
   "control-card.copy-link": "Copiar link",
@@ -32,7 +33,6 @@
   "input.url.description": "Separe sus enlaces URL con un salto de línea.",
   "input.url.label": "URL",
   "list.asset.at.finished": "Los recursos han terminado de cargarse.",
-  "list.asset.load": "Cargando la lista de recursos.",
   "list.assets-empty.search": "No se han encontrado resultados",
   "list.assets-empty.subtitle": "Agrega uno a la lista.",
   "list.assets-empty.title": "Todavía no hay recursos",
diff --git a/packages/core/upload/admin/src/translations/ko.json b/packages/core/upload/admin/src/translations/ko.json
index 7b2bc52be7..dbb4411b0c 100644
--- a/packages/core/upload/admin/src/translations/ko.json
+++ b/packages/core/upload/admin/src/translations/ko.json
@@ -3,6 +3,7 @@
   "button.next": "다음",
   "checkControl.crop-duplicate": "에셋 복제 & 자르기",
   "checkControl.crop-original": "원본 에셋 자르기",
+  "content.isLoading": "에셋을 불러오고 있습니다.",
   "control-card.add": "추가",
   "control-card.cancel": "취소",
   "control-card.copy-link": "링크 복사",
@@ -33,7 +34,6 @@
   "input.url.description": "URL 링크를 캐리지 리턴(줄바꿈)으로 구분합니다.",
   "input.url.label": "URL",
   "list.asset.at.finished": "에셋 로딩이 완료되었습니다.",
-  "list.asset.load": "에셋을 불러오고 있습니다.",
   "list.assets-empty.search": "결과를 찾을 수 없습니다.",
   "list.assets-empty.subtitle": "Add one to the list.",
   "list.assets-empty.title": "에셋이 없습니다.",
diff --git a/packages/core/upload/admin/src/translations/pl.json b/packages/core/upload/admin/src/translations/pl.json
index 65b387e489..ce043f67bc 100644
--- a/packages/core/upload/admin/src/translations/pl.json
+++ b/packages/core/upload/admin/src/translations/pl.json
@@ -3,6 +3,7 @@
   "button.next": "Dalej",
   "checkControl.crop-duplicate": "Duplikuj i przytnij",
   "checkControl.crop-original": "Przytnij",
+  "content.isLoading": "Ładowanie listy.",
   "control-card.add": "Dodaj",
   "control-card.cancel": "Anuluj",
   "control-card.copy-link": "Kopiuj link",
@@ -32,7 +33,6 @@
   "input.url.description": "Oddziel swoje linki URL umieszczając je w nowych liniach.",
   "input.url.label": "URL",
   "list.asset.at.finished": "Załadowano.",
-  "list.asset.load": "Ładowanie listy.",
   "list.assets-empty.search": "Brak wyników wyszukiwania",
   "list.assets-empty.subtitle": "Dodaj jeden do listy.",
   "list.assets-empty.title": "Nie ma jeszcze żadnych zasobów",

From 2774384c8961ffcf588798a07729d2dab5ea8514 Mon Sep 17 00:00:00 2001
From: Julie Plantey <julie.plantey@gmail.com>
Date: Sun, 31 Jul 2022 16:39:47 +0200
Subject: [PATCH 3/9] breadcrumbs in upload page

---
 .../src/components/Breadcrumbs/Breadcrumbs.js |  48 +++++++
 .../Breadcrumbs/CrumbSimpleMenuAsync.js       |  67 +++++++++
 .../admin/src/components/Breadcrumbs/index.js |   1 +
 .../Breadcrumbs/tests/index.test.js           |  71 ++++++++++
 packages/core/upload/admin/src/constants.js   |  16 ++-
 .../src/hooks/__mocks__/useFolderStructure.js |   8 +-
 .../admin/src/hooks/tests/useFolder.test.js   |   4 +-
 .../core/upload/admin/src/hooks/useFolder.js  |   4 +-
 .../admin/src/pages/App/MediaLibrary.js       |  38 ++---
 .../admin/src/pages/App/components/Header.js  |  30 ++--
 .../src/pages/App/tests/MediaLibrary.test.js  | 130 +++++-------------
 .../admin/src/utils/getBreadcrumbData.js      |  34 +++++
 .../admin/src/utils/getFolderParents.js       |  24 ++++
 .../upload/admin/src/utils/getFolderURL.js    |  18 +++
 packages/core/upload/admin/src/utils/index.js |   3 +
 .../src/utils/tests/getBreadcrumbData.test.js |  99 +++++++++++++
 .../src/utils/tests/getFolderParents.test.js  |  69 ++++++++++
 .../src/utils/tests/getFolderURL.test.js      |  31 +++++
 18 files changed, 562 insertions(+), 133 deletions(-)
 create mode 100644 packages/core/upload/admin/src/components/Breadcrumbs/Breadcrumbs.js
 create mode 100644 packages/core/upload/admin/src/components/Breadcrumbs/CrumbSimpleMenuAsync.js
 create mode 100644 packages/core/upload/admin/src/components/Breadcrumbs/index.js
 create mode 100644 packages/core/upload/admin/src/components/Breadcrumbs/tests/index.test.js
 create mode 100644 packages/core/upload/admin/src/utils/getBreadcrumbData.js
 create mode 100644 packages/core/upload/admin/src/utils/getFolderParents.js
 create mode 100644 packages/core/upload/admin/src/utils/getFolderURL.js
 create mode 100644 packages/core/upload/admin/src/utils/tests/getBreadcrumbData.test.js
 create mode 100644 packages/core/upload/admin/src/utils/tests/getFolderParents.test.js
 create mode 100644 packages/core/upload/admin/src/utils/tests/getFolderURL.test.js

diff --git a/packages/core/upload/admin/src/components/Breadcrumbs/Breadcrumbs.js b/packages/core/upload/admin/src/components/Breadcrumbs/Breadcrumbs.js
new file mode 100644
index 0000000000..86448a6bd8
--- /dev/null
+++ b/packages/core/upload/admin/src/components/Breadcrumbs/Breadcrumbs.js
@@ -0,0 +1,48 @@
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+
+import {
+  Crumb,
+  CrumbLink,
+  Breadcrumbs as BaseBreadcrumbs,
+} from '@strapi/design-system/v2/Breadcrumbs';
+import { CrumbSimpleMenuAsync } from './CrumbSimpleMenuAsync';
+import { BreadcrumbsDefinition } from '../../constants';
+
+export const Breadcrumbs = ({ breadcrumbs, ...props }) => (
+  <BaseBreadcrumbs {...props}>
+    {breadcrumbs.map((crumb, index) => {
+      if (Array.isArray(crumb)) {
+        return (
+          <CrumbSimpleMenuAsync
+            parentsToOmit={[...breadcrumbs]
+              .splice(index + 1, breadcrumbs.length - 1)
+              .map(parent => parent.id)}
+            key={`breadcrumb-${crumb?.id ?? 'menu'}`}
+          />
+        );
+      }
+
+      if (crumb.href) {
+        return (
+          <CrumbLink key={`breadcrumb-${crumb?.id ?? 'root'}`} as={NavLink} to={crumb.href}>
+            {crumb.label}
+          </CrumbLink>
+        );
+      }
+
+      return (
+        <Crumb
+          key={`breadcrumb-${crumb?.id ?? 'root'}`}
+          isCurrent={index + 1 === breadcrumbs.length}
+        >
+          {crumb.label}
+        </Crumb>
+      );
+    })}
+  </BaseBreadcrumbs>
+);
+
+Breadcrumbs.propTypes = {
+  breadcrumbs: BreadcrumbsDefinition.isRequired,
+};
diff --git a/packages/core/upload/admin/src/components/Breadcrumbs/CrumbSimpleMenuAsync.js b/packages/core/upload/admin/src/components/Breadcrumbs/CrumbSimpleMenuAsync.js
new file mode 100644
index 0000000000..75e01fe59e
--- /dev/null
+++ b/packages/core/upload/admin/src/components/Breadcrumbs/CrumbSimpleMenuAsync.js
@@ -0,0 +1,67 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { NavLink, useLocation } from 'react-router-dom';
+import { useIntl } from 'react-intl';
+
+import { useQueryParams } from '@strapi/helper-plugin';
+import { CrumbSimpleMenu } from '@strapi/design-system/v2/Breadcrumbs';
+import { MenuItem } from '@strapi/design-system/v2/SimpleMenu';
+import { Loader } from '@strapi/design-system/Loader';
+import { useFolderStructure } from '../../hooks/useFolderStructure';
+import { getFolderParents, getFolderURL, getTrad } from '../../utils';
+
+export const CrumbSimpleMenuAsync = ({ parentsToOmit }) => {
+  const [shouldFetch, setShouldFetch] = useState(false);
+  const { data, isLoading } = useFolderStructure({ enabled: shouldFetch });
+  const { pathname } = useLocation();
+  const [{ query }] = useQueryParams();
+  const { formatMessage } = useIntl();
+
+  const allAscendants = data && getFolderParents(data, Number(query?.folder));
+  const filteredAscendants =
+    allAscendants &&
+    allAscendants.filter(
+      ascendant => !parentsToOmit.includes(ascendant.id) && ascendant.id !== null
+    );
+
+  return (
+    <CrumbSimpleMenu
+      onOpen={() => setShouldFetch(true)}
+      onClose={() => setShouldFetch(false)}
+      aria-label={formatMessage({
+        id: getTrad('header.breadcrumbs.menu.label'),
+        defaultMessage: 'Get more ascendants folders',
+      })}
+      label="..."
+    >
+      {isLoading && (
+        <MenuItem>
+          <Loader small>
+            {formatMessage({
+              id: getTrad('content.isLoading'),
+              defaultMessage: 'Content is loading.',
+            })}
+          </Loader>
+        </MenuItem>
+      )}
+      {filteredAscendants &&
+        filteredAscendants.map(ascendant => {
+          const url = getFolderURL(pathname, query, ascendant);
+
+          return (
+            <MenuItem isLink as={NavLink} to={url} key={ascendant.id}>
+              {ascendant.label}
+            </MenuItem>
+          );
+        })}
+    </CrumbSimpleMenu>
+  );
+};
+
+CrumbSimpleMenuAsync.defaultProps = {
+  parentsToOmit: [],
+};
+
+CrumbSimpleMenuAsync.propTypes = {
+  parentsToOmit: PropTypes.arrayOf(PropTypes.number),
+};
diff --git a/packages/core/upload/admin/src/components/Breadcrumbs/index.js b/packages/core/upload/admin/src/components/Breadcrumbs/index.js
new file mode 100644
index 0000000000..28140a257f
--- /dev/null
+++ b/packages/core/upload/admin/src/components/Breadcrumbs/index.js
@@ -0,0 +1 @@
+export { Breadcrumbs } from './Breadcrumbs';
diff --git a/packages/core/upload/admin/src/components/Breadcrumbs/tests/index.test.js b/packages/core/upload/admin/src/components/Breadcrumbs/tests/index.test.js
new file mode 100644
index 0000000000..65e52017ae
--- /dev/null
+++ b/packages/core/upload/admin/src/components/Breadcrumbs/tests/index.test.js
@@ -0,0 +1,71 @@
+import React from 'react';
+import { render as renderTL, screen, fireEvent, waitFor } from '@testing-library/react';
+import { QueryClientProvider, QueryClient } from 'react-query';
+import { MemoryRouter } from 'react-router-dom';
+import { IntlProvider } from 'react-intl';
+
+import { ThemeProvider, lightTheme } from '@strapi/design-system';
+import { Breadcrumbs } from '../index';
+
+jest.mock('../../../hooks/useFolderStructure');
+
+jest.mock('@strapi/helper-plugin', () => ({
+  ...jest.requireActual('@strapi/helper-plugin'),
+  useQueryParams: jest.fn().mockReturnValue([{ query: { folder: 22 } }]),
+}));
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+      refetchOnWindowFocus: false,
+    },
+  },
+});
+
+const defaultBreadcrumbs = [
+  {
+    href: '/',
+    id: null,
+    label: 'Media Library',
+  },
+  [],
+  { href: '/', id: 21, label: 'parent folder' },
+  { id: 22, label: 'current folder' },
+];
+
+const setup = props =>
+  renderTL(
+    <QueryClientProvider client={queryClient}>
+      <MemoryRouter>
+        <IntlProvider locale="en" messages={{}}>
+          <ThemeProvider theme={lightTheme}>
+            <Breadcrumbs breadcrumbs={defaultBreadcrumbs} as="nav" {...props} />
+          </ThemeProvider>
+        </IntlProvider>
+      </MemoryRouter>
+    </QueryClientProvider>
+  );
+
+describe('Media Library | Breadcrumbs', () => {
+  test('should render and match snapshot', () => {
+    const { container } = setup();
+
+    expect(container.querySelector('nav')).toBeInTheDocument();
+    expect(screen.getByText('parent folder')).toBeInTheDocument();
+    expect(screen.getByText('current folder')).toBeInTheDocument();
+    expect(screen.getByText('Media Library')).toBeInTheDocument();
+    expect(container).toMatchSnapshot();
+  });
+
+  test('should store other ascendants in simple menu', async () => {
+    const { getByRole } = setup();
+
+    const simpleMenuButton = getByRole('button', { name: /get more ascendants folders/i });
+    fireEvent.mouseDown(simpleMenuButton);
+
+    await waitFor(() => {
+      expect(screen.getByText('second child')).toBeInTheDocument();
+    });
+  });
+});
diff --git a/packages/core/upload/admin/src/constants.js b/packages/core/upload/admin/src/constants.js
index 175926c550..50e661495b 100644
--- a/packages/core/upload/admin/src/constants.js
+++ b/packages/core/upload/admin/src/constants.js
@@ -21,6 +21,8 @@ const ParentFolderDefinition = PropTypes.shape({
   path: PropTypes.string.isRequired,
 });
 
+ParentFolderDefinition.parent = PropTypes.shape(ParentFolderDefinition);
+
 export const FolderDefinition = PropTypes.shape({
   id: PropTypes.number.isRequired,
   children: PropTypes.shape({
@@ -32,7 +34,7 @@ export const FolderDefinition = PropTypes.shape({
     count: PropTypes.number.isRequired,
   }),
   name: PropTypes.string.isRequired,
-  parent: PropTypes.oneOf([ParentFolderDefinition, PropTypes.number]),
+  parent: PropTypes.oneOfType([ParentFolderDefinition, PropTypes.number]),
   updatedAt: PropTypes.string.isRequired,
   updatedBy: PropTypes.shape(),
   pathId: PropTypes.number.isRequired,
@@ -72,3 +74,15 @@ export const AssetDefinition = PropTypes.shape({
     }),
   }),
 });
+
+export const CrumbDefinition = PropTypes.shape({
+  id: PropTypes.number,
+  label: PropTypes.string.isRequired,
+  href: PropTypes.string,
+});
+
+export const CrumbMenuDefinition = PropTypes.arrayOf(CrumbDefinition);
+
+export const BreadcrumbsDefinition = PropTypes.arrayOf(
+  PropTypes.oneOfType([CrumbDefinition, CrumbMenuDefinition])
+);
diff --git a/packages/core/upload/admin/src/hooks/__mocks__/useFolderStructure.js b/packages/core/upload/admin/src/hooks/__mocks__/useFolderStructure.js
index b3f60e89c6..3b016ffdf1 100644
--- a/packages/core/upload/admin/src/hooks/__mocks__/useFolderStructure.js
+++ b/packages/core/upload/admin/src/hooks/__mocks__/useFolderStructure.js
@@ -19,7 +19,13 @@ export const useFolderStructure = jest.fn().mockReturnValue({
             {
               value: 21,
               name: 'first child of the second child',
-              children: [],
+              children: [
+                {
+                  value: 22,
+                  name: 'another child',
+                  children: [],
+                },
+              ],
             },
           ],
         },
diff --git a/packages/core/upload/admin/src/hooks/tests/useFolder.test.js b/packages/core/upload/admin/src/hooks/tests/useFolder.test.js
index 719e092cf3..cf7090c45e 100644
--- a/packages/core/upload/admin/src/hooks/tests/useFolder.test.js
+++ b/packages/core/upload/admin/src/hooks/tests/useFolder.test.js
@@ -81,7 +81,9 @@ describe('useFolder', () => {
     await waitFor(() => result.current.isSuccess);
     await waitForNextUpdate();
 
-    expect(axiosInstance.get).toBeCalledWith(`/upload/folders/1?populate=parent`);
+    expect(axiosInstance.get).toBeCalledWith(
+      '/upload/folders/1?populate[parent][populate][parent]=*'
+    );
   });
 
   test('it does not fetch, if enabled is set to false', async () => {
diff --git a/packages/core/upload/admin/src/hooks/useFolder.js b/packages/core/upload/admin/src/hooks/useFolder.js
index 3cce2b7134..753e408c05 100644
--- a/packages/core/upload/admin/src/hooks/useFolder.js
+++ b/packages/core/upload/admin/src/hooks/useFolder.js
@@ -10,7 +10,9 @@ export const useFolder = (id, { enabled = true }) => {
 
   const fetchFolder = async () => {
     try {
-      const { data } = await axiosInstance.get(`${dataRequestURL}/${id}?populate=parent`);
+      const { data } = await axiosInstance.get(
+        `${dataRequestURL}/${id}?populate[parent][populate][parent]=*`
+      );
 
       return data.data;
     } catch (err) {
diff --git a/packages/core/upload/admin/src/pages/App/MediaLibrary.js b/packages/core/upload/admin/src/pages/App/MediaLibrary.js
index b37dbc2c27..09b4709a07 100644
--- a/packages/core/upload/admin/src/pages/App/MediaLibrary.js
+++ b/packages/core/upload/admin/src/pages/App/MediaLibrary.js
@@ -2,7 +2,6 @@ import React, { useState, useRef } from 'react'; // useState
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
 import { useLocation, useHistory } from 'react-router-dom';
-import { stringify } from 'qs';
 import {
   LoadingIndicatorPage,
   useFocusWhenNavigate,
@@ -34,7 +33,7 @@ import { FolderList } from '../../components/FolderList';
 import SortPicker from '../../components/SortPicker';
 import { useAssets } from '../../hooks/useAssets';
 import { useFolders } from '../../hooks/useFolders';
-import { getTrad, containsAssetFilter } from '../../utils';
+import { getTrad, containsAssetFilter, getBreadcrumbData, getFolderURL } from '../../utils';
 import { PaginationFooter } from '../../components/PaginationFooter';
 import { useMediaLibraryPermissions } from '../../hooks/useMediaLibraryPermissions';
 import { useFolder } from '../../hooks/useFolder';
@@ -151,8 +150,9 @@ export const MediaLibrary = () => {
     <Layout>
       <Main aria-busy={isLoading}>
         <Header
-          assetCount={assetCount}
-          folderCount={folderCount}
+          breadcrumbs={
+            !isCurrentFolderLoading && getBreadcrumbData(currentFolder, { pathname, query })
+          }
           canCreate={canCreate}
           onToggleEditFolderDialog={toggleEditFolderDialog}
           onToggleUploadAssetDialog={toggleUploadAssetDialog}
@@ -261,10 +261,13 @@ export const MediaLibrary = () => {
                 <FolderList
                   title={
                     (((isFiltering && assetCount > 0) || !isFiltering) &&
-                      formatMessage({
-                        id: getTrad('list.folders.title'),
-                        defaultMessage: 'Folders',
-                      })) ||
+                      formatMessage(
+                        {
+                          id: getTrad('list.folders.title'),
+                          defaultMessage: 'Folders ({count})',
+                        },
+                        { count: folderCount }
+                      )) ||
                     ''
                   }
                 >
@@ -274,13 +277,7 @@ export const MediaLibrary = () => {
                       currentFolder => currentFolder.id === folder.id
                     );
 
-                    // Search query will always fetch the same results
-                    // we remove it here to allow navigating in a folder and see the result of this navigation
-                    const { _q, ...queryParamsWithoutQ } = query;
-                    const url = `${pathname}?${stringify({
-                      ...queryParamsWithoutQ,
-                      folder: folder.id,
-                    })}`;
+                    const url = getFolderURL(pathname, query, folder);
 
                     return (
                       <GridItem col={3} key={`folder-${folder.id}`}>
@@ -365,10 +362,13 @@ export const MediaLibrary = () => {
                     title={
                       ((!isFiltering || (isFiltering && folderCount > 0)) &&
                         assetsData?.pagination?.page === 1 &&
-                        formatMessage({
-                          id: getTrad('list.assets.title'),
-                          defaultMessage: 'Assets',
-                        })) ||
+                        formatMessage(
+                          {
+                            id: getTrad('list.assets.title'),
+                            defaultMessage: 'Assets ({count})',
+                          },
+                          { count: assetCount }
+                        )) ||
                       ''
                     }
                   />
diff --git a/packages/core/upload/admin/src/pages/App/components/Header.js b/packages/core/upload/admin/src/pages/App/components/Header.js
index 6c975aff69..b87fd63c57 100644
--- a/packages/core/upload/admin/src/pages/App/components/Header.js
+++ b/packages/core/upload/admin/src/pages/App/components/Header.js
@@ -11,15 +11,15 @@ import { Link } from '@strapi/design-system/Link';
 import ArrowLeft from '@strapi/icons/ArrowLeft';
 import Plus from '@strapi/icons/Plus';
 import { getTrad } from '../../../utils';
-import { FolderDefinition } from '../../../constants';
+import { FolderDefinition, BreadcrumbsDefinition } from '../../../constants';
+import { Breadcrumbs } from '../../../components/Breadcrumbs';
 
 export const Header = ({
+  breadcrumbs,
   canCreate,
   onToggleEditFolderDialog,
   onToggleUploadAssetDialog,
   folder,
-  assetCount,
-  folderCount,
 }) => {
   const { formatMessage } = useIntl();
   const { pathname } = useLocation();
@@ -36,14 +36,18 @@ export const Header = ({
         id: getTrad('plugin.name'),
         defaultMessage: `Media Library`,
       })}${name ? ` - ${name}` : ''}`}
-      subtitle={formatMessage(
-        {
-          id: getTrad('header.content.assets'),
-          defaultMessage:
-            '{numberFolders, plural, one {1 folder} other {# folders}} - {numberAssets, plural, one {1 asset} other {# assets}}',
-        },
-        { numberAssets: assetCount, numberFolders: folderCount }
-      )}
+      subtitle={
+        breadcrumbs && (
+          <Breadcrumbs
+            as="nav"
+            label={formatMessage({
+              id: getTrad('header.breadcrumbs.nav.label'),
+              defaultMessage: 'Folders navigation',
+            })}
+            breadcrumbs={breadcrumbs}
+          />
+        )
+      }
       navigationAction={
         folder && (
           <Link
@@ -81,14 +85,14 @@ export const Header = ({
 };
 
 Header.defaultProps = {
+  breadcrumbs: false,
   folder: null,
 };
 
 Header.propTypes = {
-  assetCount: PropTypes.number.isRequired,
+  breadcrumbs: PropTypes.oneOfType([BreadcrumbsDefinition, PropTypes.bool]),
   canCreate: PropTypes.bool.isRequired,
   folder: FolderDefinition,
-  folderCount: PropTypes.number.isRequired,
   onToggleEditFolderDialog: PropTypes.func.isRequired,
   onToggleUploadAssetDialog: PropTypes.func.isRequired,
 };
diff --git a/packages/core/upload/admin/src/pages/App/tests/MediaLibrary.test.js b/packages/core/upload/admin/src/pages/App/tests/MediaLibrary.test.js
index 90c57ee72a..fa3b594825 100644
--- a/packages/core/upload/admin/src/pages/App/tests/MediaLibrary.test.js
+++ b/packages/core/upload/admin/src/pages/App/tests/MediaLibrary.test.js
@@ -4,12 +4,12 @@ import { QueryClientProvider, QueryClient } from 'react-query';
 import { render as renderTL, screen, waitFor, fireEvent } from '@testing-library/react';
 import { useSelectionState, useQueryParams, TrackingContext } from '@strapi/helper-plugin';
 import { MemoryRouter } from 'react-router-dom';
+import { IntlProvider } from 'react-intl';
 
 import { useMediaLibraryPermissions } from '../../../hooks/useMediaLibraryPermissions';
 import { useFolders } from '../../../hooks/useFolders';
 import { useAssets } from '../../../hooks/useAssets';
 import { MediaLibrary } from '../MediaLibrary';
-import en from '../../../translations/en.json';
 
 const FIXTURE_ASSET_PAGINATION = {
   pageCount: 1,
@@ -56,7 +56,6 @@ jest.mock('../../../hooks/useMediaLibraryPermissions');
 jest.mock('../../../hooks/useFolders');
 jest.mock('../../../hooks/useFolder');
 jest.mock('../../../hooks/useAssets');
-
 jest.mock('@strapi/helper-plugin', () => ({
   ...jest.requireActual('@strapi/helper-plugin'),
   useRBAC: jest.fn(),
@@ -66,17 +65,11 @@ jest.mock('@strapi/helper-plugin', () => ({
     .fn()
     .mockReturnValue([[], { selectOne: jest.fn(), selectAll: jest.fn() }]),
 }));
-
 jest.mock('../../../utils', () => ({
   ...jest.requireActual('../../../utils'),
   getTrad: x => x,
 }));
 
-jest.mock('react-intl', () => ({
-  FormattedMessage: ({ id }) => id,
-  useIntl: () => ({ formatMessage: jest.fn(({ id }) => en[id] || id) }),
-}));
-
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
@@ -89,13 +82,15 @@ const queryClient = new QueryClient({
 const renderML = () =>
   renderTL(
     <QueryClientProvider client={queryClient}>
-      <TrackingContext.Provider value={{ uuid: false, telemetryProperties: undefined }}>
-        <ThemeProvider theme={lightTheme}>
-          <MemoryRouter>
-            <MediaLibrary />
-          </MemoryRouter>
-        </ThemeProvider>
-      </TrackingContext.Provider>
+      <IntlProvider locale="en" messages={{}}>
+        <TrackingContext.Provider value={{ uuid: false, telemetryProperties: undefined }}>
+          <ThemeProvider theme={lightTheme}>
+            <MemoryRouter>
+              <MediaLibrary />
+            </MemoryRouter>
+          </ThemeProvider>
+        </TrackingContext.Provider>
+      </IntlProvider>
     </QueryClientProvider>
   );
 
@@ -107,7 +102,6 @@ describe('Media library homepage', () => {
   describe('navigation', () => {
     it('focuses the title when mounting the component', () => {
       renderML();
-
       expect(screen.getByRole('main')).toHaveFocus();
     });
   });
@@ -119,27 +113,21 @@ describe('Media library homepage', () => {
         canCreate: false,
         canRead: false,
       });
-
       renderML();
-
       expect(screen.getByRole('main').getAttribute('aria-busy')).toBe('true');
       expect(screen.getByText('Loading content.')).toBeInTheDocument();
     });
 
     it('shows a loader while resolving assets', () => {
       useAssets.mockReturnValueOnce({ isLoading: true });
-
       renderML();
-
       expect(screen.getByRole('main').getAttribute('aria-busy')).toBe('true');
       expect(screen.getByText('Loading content.')).toBeInTheDocument();
     });
 
     it('shows a loader while resolving folders', () => {
       useFolders.mockReturnValueOnce({ isLoading: true });
-
       renderML();
-
       expect(screen.getByRole('main').getAttribute('aria-busy')).toBe('true');
       expect(screen.getByText('Loading content.')).toBeInTheDocument();
     });
@@ -150,7 +138,7 @@ describe('Media library homepage', () => {
       it('shows the filters dropdown when the user is allowed to read', () => {
         renderML();
 
-        expect(screen.getByText('app.utils.filters')).toBeInTheDocument();
+        expect(screen.getByText('Filters')).toBeInTheDocument();
       });
 
       it('hides the filters dropdown when the user is not allowed to read', () => {
@@ -159,9 +147,7 @@ describe('Media library homepage', () => {
           canRead: false,
           canCreate: false,
         });
-
         renderML();
-
         expect(screen.queryByText('app.utils.filters')).not.toBeInTheDocument();
       });
     });
@@ -169,7 +155,6 @@ describe('Media library homepage', () => {
     describe('sort by', () => {
       it('shows the sort by dropdown when the user is allowed to read', () => {
         renderML();
-
         expect(screen.getByText('Sort by')).toBeInTheDocument();
       });
 
@@ -179,30 +164,28 @@ describe('Media library homepage', () => {
           canRead: false,
           canCreate: false,
         });
-
         renderML();
-
         expect(screen.queryByText('Sort by')).not.toBeInTheDocument();
       });
 
       [
-        ['Most recent uploads', 'createdAt:DESC'],
-        ['Oldest uploads', 'createdAt:ASC'],
-        ['Alphabetical order (A to Z)', 'name:ASC'],
-        ['Reverse alphabetical order (Z to A)', 'name:DESC'],
-        ['Most recent updates', 'updatedAt:DESC'],
-        ['Oldest updates', 'updatedAt:ASC'],
-      ].forEach(([label, sortKey]) => {
-        it(`modifies the URL with the according params: ${label} ${sortKey}`, async () => {
+        'createdAt:DESC',
+        'createdAt:ASC',
+        'name:ASC',
+        'name:DESC',
+        'updatedAt:DESC',
+        'updatedAt:ASC',
+      ].forEach(sortKey => {
+        it(`modifies the URL with the according params: ${sortKey}`, async () => {
           const setQueryMock = jest.fn();
           useQueryParams.mockReturnValueOnce([{ rawQuery: '', query: {} }, setQueryMock]);
 
           renderML();
 
           fireEvent.mouseDown(screen.getByText('Sort by'));
-          await waitFor(() => expect(screen.getByText(label)).toBeInTheDocument());
-          fireEvent.mouseDown(screen.getByText(label));
-          await waitFor(() => expect(screen.queryByText(label)).not.toBeInTheDocument());
+          await waitFor(() => expect(screen.getByText(sortKey)).toBeInTheDocument());
+          fireEvent.mouseDown(screen.getByText(sortKey));
+          await waitFor(() => expect(screen.queryByText(sortKey)).not.toBeInTheDocument());
 
           expect(setQueryMock).toBeCalledWith({ sort: sortKey });
         });
@@ -210,28 +193,10 @@ describe('Media library homepage', () => {
     });
 
     describe('select all', () => {
-      it('is not visible if there are not folders and assets', () => {
-        useAssets.mockReturnValueOnce({
-          isLoading: false,
-          error: null,
-          data: {},
-        });
-        useFolders.mockReturnValueOnce({
-          data: [],
-          isLoading: false,
-          error: null,
-        });
-        renderML();
-
-        expect(
-          screen.queryByText('There are no elements with the applied filters')
-        ).not.toBeInTheDocument();
-      });
-
       it('shows the select all button when the user is allowed to update', () => {
         renderML();
 
-        expect(screen.getByLabelText('Select all assets')).toBeInTheDocument();
+        expect(screen.getByLabelText('Select all folders & assets')).toBeInTheDocument();
       });
 
       it('hides the select all button when the user is not allowed to update', () => {
@@ -241,9 +206,7 @@ describe('Media library homepage', () => {
           canCreate: true,
           canUpdate: false,
         });
-
         renderML();
-
         expect(screen.queryByLabelText('Select all assets')).not.toBeInTheDocument();
       });
     });
@@ -255,9 +218,7 @@ describe('Media library homepage', () => {
           canRead: false,
           canCreate: false,
         });
-
         renderML();
-
         await waitFor(() => expect(screen.queryByText(`Add new assets`)).not.toBeInTheDocument());
       });
 
@@ -267,9 +228,7 @@ describe('Media library homepage', () => {
           canRead: true,
           canCreate: true,
         });
-
         renderML();
-
         await waitFor(() => expect(screen.getByText(`Add new assets`)).toBeInTheDocument());
       });
     });
@@ -277,7 +236,6 @@ describe('Media library homepage', () => {
     describe('create folder', () => {
       it('shows the create button if the user has create permissions', () => {
         renderML();
-
         expect(screen.getByText('Add new folder')).toBeInTheDocument();
       });
 
@@ -286,9 +244,7 @@ describe('Media library homepage', () => {
           isLoading: false,
           canCreate: false,
         });
-
         renderML();
-
         expect(screen.queryByText('Add new folder')).not.toBeInTheDocument();
       });
     });
@@ -301,13 +257,13 @@ describe('Media library homepage', () => {
         isLoading: false,
         error: null,
       });
+
       useAssets.mockReturnValueOnce({
         isLoading: false,
         error: null,
         data: {},
       });
       renderML();
-
       expect(screen.queryByText('Upload your first assets...')).toBeInTheDocument();
     });
 
@@ -324,7 +280,6 @@ describe('Media library homepage', () => {
       });
       useQueryParams.mockReturnValueOnce([{ rawQuery: '', query: { _q: 'true' } }, jest.fn()]);
       renderML();
-
       expect(
         screen.queryByText('There are no elements with the applied filters')
       ).toBeInTheDocument();
@@ -338,7 +293,6 @@ describe('Media library homepage', () => {
       });
       useQueryParams.mockReturnValueOnce([{ rawQuery: '', query: { _q: 'true' } }, jest.fn()]);
       renderML();
-
       expect(screen.queryByText('Assets')).not.toBeInTheDocument();
     });
 
@@ -350,15 +304,14 @@ describe('Media library homepage', () => {
       });
       useQueryParams.mockReturnValueOnce([{ rawQuery: '', query: { _q: 'true' } }, jest.fn()]);
       renderML();
-
       expect(screen.queryByText('Folders')).not.toBeInTheDocument();
     });
 
     it('displays folders and folders title', () => {
       renderML();
 
-      expect(screen.queryByText('Folders')).toBeInTheDocument();
-      expect(screen.getByText('Folder 1')).toBeInTheDocument();
+      expect(screen.getByText('Folders (1)')).toBeInTheDocument();
+      expect(screen.getByText('1 folder, 1 asset')).toBeInTheDocument();
     });
 
     it('displays folder with checked checkbox when is selected', () => {
@@ -379,13 +332,11 @@ describe('Media library homepage', () => {
         { selectOne: jest.fn(), selectAll: jest.fn() },
       ]);
       renderML();
-
       expect(screen.getByTestId('folder-checkbox-1')).toBeChecked();
     });
 
     it('doest not displays folder with checked checkbox when is not selected', () => {
       renderML();
-
       expect(screen.getByTestId('folder-checkbox-1')).not.toBeChecked();
     });
 
@@ -398,8 +349,8 @@ describe('Media library homepage', () => {
 
       renderML();
 
-      expect(screen.queryByText('list.folders.title')).not.toBeInTheDocument();
-      expect(screen.queryByText('Folder 1')).not.toBeInTheDocument();
+      expect(screen.queryByText('1 folder, 1 asset')).not.toBeInTheDocument();
+      expect(screen.queryByText('Folders (1)')).not.toBeInTheDocument();
     });
 
     it('does display folders if a search is performed', () => {
@@ -407,17 +358,17 @@ describe('Media library homepage', () => {
 
       renderML();
 
-      expect(screen.queryByText('Folders')).toBeInTheDocument();
-      expect(screen.queryByText('Folder 1')).toBeInTheDocument();
+      expect(screen.queryByText('1 folder, 1 asset')).toBeInTheDocument();
+      expect(screen.queryByText('Folders (1)')).toBeInTheDocument();
     });
 
-    it('does not display folders if the media library is being filtered', () => {
+    it('does display folders if the media library is being filtered', () => {
       useQueryParams.mockReturnValueOnce([{ rawQuery: '', query: { filters: 'true' } }, jest.fn()]);
 
       renderML();
 
-      expect(screen.queryByText('Folders')).toBeInTheDocument();
-      expect(screen.queryByText('Folder 1')).toBeInTheDocument();
+      expect(screen.queryByText('1 folder, 1 asset')).toBeInTheDocument();
+      expect(screen.queryByText('Folders (1)')).toBeInTheDocument();
     });
 
     it('does not fetch folders if the current page !== 1', () => {
@@ -434,9 +385,7 @@ describe('Media library homepage', () => {
         },
       });
       useQueryParams.mockReturnValueOnce([{ rawQuery: '', query: { _q: 'true' } }, jest.fn()]);
-
       renderML();
-
       expect(useFolders).toHaveBeenCalledWith(expect.objectContaining({ enabled: false }));
     });
 
@@ -457,15 +406,12 @@ describe('Media library homepage', () => {
         { rawQuery: '', query: { _q: '', filters: { $and: { mime: 'audio' } } } },
         jest.fn(),
       ]);
-
       renderML();
-
       expect(useFolders).toHaveBeenCalledWith(expect.objectContaining({ enabled: false }));
     });
 
     it('displays assets', () => {
       renderML();
-
       expect(screen.getByText('3874873.jpg')).toBeInTheDocument();
     });
 
@@ -475,9 +421,7 @@ describe('Media library homepage', () => {
         canRead: false,
         canCreate: false,
       });
-
       renderML();
-
       expect(screen.queryByText('3874873.jpg')).not.toBeInTheDocument();
     });
 
@@ -489,14 +433,11 @@ describe('Media library homepage', () => {
           results: [],
         },
       });
-
       useFolders.mockReturnValueOnce({
         isLoading: false,
         data: [],
       });
-
       renderML();
-
       expect(screen.queryByText('Upload your first assets...')).toBeInTheDocument();
     });
 
@@ -514,9 +455,7 @@ describe('Media library homepage', () => {
           results: FIXTURE_ASSETS,
         },
       });
-
       renderML();
-
       expect(screen.queryByText('header.actions.add-assets')).not.toBeInTheDocument();
     });
 
@@ -530,15 +469,12 @@ describe('Media library homepage', () => {
           results: [],
         },
       });
-
       useFolders.mockReturnValueOnce({
         isLoading: false,
         error: null,
         data: [],
       });
-
       renderML();
-
       expect(
         screen.queryByText('There are no elements with the applied filters')
       ).toBeInTheDocument();
diff --git a/packages/core/upload/admin/src/utils/getBreadcrumbData.js b/packages/core/upload/admin/src/utils/getBreadcrumbData.js
new file mode 100644
index 0000000000..1f3f737b8c
--- /dev/null
+++ b/packages/core/upload/admin/src/utils/getBreadcrumbData.js
@@ -0,0 +1,34 @@
+import getFolderURL from './getFolderURL';
+
+const getBreadcrumbData = (folder, { pathname, query }) => {
+  let data = [
+    {
+      id: null,
+      label: 'Media Library',
+      href: folder ? getFolderURL(pathname, query) : undefined,
+    },
+  ];
+
+  if (folder?.parent?.parent) {
+    data.push([]);
+  }
+
+  if (folder?.parent) {
+    data.push({
+      id: folder.parent.id,
+      label: folder.parent.name,
+      href: getFolderURL(pathname, query, folder.parent),
+    });
+  }
+
+  if (folder) {
+    data.push({
+      id: folder.id,
+      label: folder.name,
+    });
+  }
+
+  return data;
+};
+
+export default getBreadcrumbData;
diff --git a/packages/core/upload/admin/src/utils/getFolderParents.js b/packages/core/upload/admin/src/utils/getFolderParents.js
new file mode 100644
index 0000000000..273206e7fb
--- /dev/null
+++ b/packages/core/upload/admin/src/utils/getFolderParents.js
@@ -0,0 +1,24 @@
+import flattenTree from '../components/SelectTree/utils/flattenTree';
+
+const getFolderParents = (folders, currentFolderId) => {
+  const parents = [];
+  const flatFolders = flattenTree(folders);
+  const currentFolder = flatFolders.find(folder => folder.value === currentFolderId);
+
+  if (!currentFolder) {
+    return [];
+  }
+
+  let { parent } = currentFolder;
+
+  while (parent !== undefined) {
+    // eslint-disable-next-line no-loop-func
+    let parentToStore = flatFolders.find(({ value }) => value === parent);
+    parents.push({ id: parentToStore.value, label: parentToStore.label });
+    parent = parentToStore.parent;
+  }
+
+  return parents.reverse();
+};
+
+export default getFolderParents;
diff --git a/packages/core/upload/admin/src/utils/getFolderURL.js b/packages/core/upload/admin/src/utils/getFolderURL.js
new file mode 100644
index 0000000000..0f5f4c10b9
--- /dev/null
+++ b/packages/core/upload/admin/src/utils/getFolderURL.js
@@ -0,0 +1,18 @@
+import { stringify } from 'qs';
+
+const getFolderURL = (pathname, query, folder) => {
+  const { _q, ...queryParamsWithoutQ } = query;
+  const queryParamsString = stringify(
+    {
+      ...queryParamsWithoutQ,
+      folder: folder?.id,
+    },
+    { encode: false }
+  );
+
+  // Search query will always fetch the same results
+  // we remove it here to allow navigating in a folder and see the result of this navigation
+  return `${pathname}${queryParamsString ? `?${queryParamsString}` : ''}`;
+};
+
+export default getFolderURL;
diff --git a/packages/core/upload/admin/src/utils/index.js b/packages/core/upload/admin/src/utils/index.js
index 8b45a3d87f..a46dde72dd 100644
--- a/packages/core/upload/admin/src/utils/index.js
+++ b/packages/core/upload/admin/src/utils/index.js
@@ -5,4 +5,7 @@ export { default as getTrad } from './getTrad';
 export { default as findRecursiveFolderByValue } from './findRecursiveFolderByValue';
 export { default as findRecursiveFolderMetadatas } from './findRecursiveFolderMetadatas';
 export { default as containsAssetFilter } from './containsAssetFilter';
+export { default as getBreadcrumbData } from './getBreadcrumbData';
+export { default as getFolderURL } from './getFolderURL';
+export { default as getFolderParents } from './getFolderParents';
 export * from './formatDuration';
diff --git a/packages/core/upload/admin/src/utils/tests/getBreadcrumbData.test.js b/packages/core/upload/admin/src/utils/tests/getBreadcrumbData.test.js
new file mode 100644
index 0000000000..c5e8c84eee
--- /dev/null
+++ b/packages/core/upload/admin/src/utils/tests/getBreadcrumbData.test.js
@@ -0,0 +1,99 @@
+import { getBreadcrumbData } from '..';
+
+const FIXTURE_PATHNAME = '/media-library';
+const FIXTURE_QUERY = {
+  _q: 'search',
+  some: 'thing',
+};
+const FIXTURE_FOLDER = {
+  id: 1,
+  name: 'first-level',
+};
+
+describe('getBreadcrumData', () => {
+  test('return one item at the root of the media library', () => {
+    expect(
+      getBreadcrumbData(null, { pathname: FIXTURE_PATHNAME, query: FIXTURE_QUERY })
+    ).toStrictEqual([
+      {
+        href: undefined,
+        id: null,
+        label: 'Media Library',
+      },
+    ]);
+  });
+
+  test('returns two items for the first level of the media library', () => {
+    expect(
+      getBreadcrumbData(FIXTURE_FOLDER, { pathname: FIXTURE_PATHNAME, query: FIXTURE_QUERY })
+    ).toStrictEqual([
+      {
+        href: '/media-library?some=thing',
+        id: null,
+        label: 'Media Library',
+      },
+
+      {
+        id: 1,
+        label: 'first-level',
+      },
+    ]);
+  });
+
+  test('returns three items for the second level of the media library', () => {
+    expect(
+      getBreadcrumbData(
+        { ...FIXTURE_FOLDER, parent: { id: 2, name: 'second-level' } },
+        { pathname: FIXTURE_PATHNAME, query: FIXTURE_QUERY }
+      )
+    ).toStrictEqual([
+      {
+        id: null,
+        label: 'Media Library',
+        href: '/media-library?some=thing',
+      },
+
+      {
+        id: 2,
+        label: 'second-level',
+        href: '/media-library?some=thing&folder=2',
+      },
+
+      {
+        id: 1,
+        label: 'first-level',
+      },
+    ]);
+  });
+
+  test('returns four items for the third level of the media library', () => {
+    expect(
+      getBreadcrumbData(
+        {
+          ...FIXTURE_FOLDER,
+          parent: { id: 2, name: 'second-level', parent: { id: 3, name: 'third-level' } },
+        },
+        { pathname: FIXTURE_PATHNAME, query: FIXTURE_QUERY }
+      )
+    ).toStrictEqual([
+      {
+        id: null,
+        label: 'Media Library',
+        href: '/media-library?some=thing',
+      },
+
+      [],
+
+      {
+        id: 2,
+        label: 'second-level',
+        href: '/media-library?some=thing&folder=2',
+      },
+
+      {
+        id: 1,
+        label: 'first-level',
+      },
+    ]);
+  });
+});
diff --git a/packages/core/upload/admin/src/utils/tests/getFolderParents.test.js b/packages/core/upload/admin/src/utils/tests/getFolderParents.test.js
new file mode 100644
index 0000000000..d8f17cc2bf
--- /dev/null
+++ b/packages/core/upload/admin/src/utils/tests/getFolderParents.test.js
@@ -0,0 +1,69 @@
+import getFolderParents from '../getFolderParents';
+
+const FIXTURE_FOLDER_STRUCTURE = [
+  {
+    value: null,
+    label: 'Media Library',
+    children: [
+      {
+        value: 1,
+        label: 'First folder',
+        children: [
+          {
+            value: 2,
+            label: 'Second folder',
+            children: [
+              {
+                value: 3,
+                label: 'Third folder',
+                children: [
+                  {
+                    value: 5,
+                    label: 'Fourth folder',
+                    children: [],
+                  },
+                ],
+              },
+              {
+                value: 4,
+                label: 'Second folder sibling',
+                children: [],
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+];
+
+describe('getFolderParents', () => {
+  test('should return ascendants', () => {
+    const result = getFolderParents(FIXTURE_FOLDER_STRUCTURE, 3);
+    const expected = [
+      { id: null, label: 'Media Library' },
+      { id: 1, label: 'First folder' },
+      { id: 2, label: 'Second folder' },
+    ];
+
+    expect(result).toEqual(expected);
+  });
+
+  test('should not return parent siblings', () => {
+    const result = getFolderParents(FIXTURE_FOLDER_STRUCTURE, 5);
+    const expected = [
+      { id: null, label: 'Media Library' },
+      { id: 1, label: 'First folder' },
+      { id: 2, label: 'Second folder' },
+      { id: 3, label: 'Third folder' },
+    ];
+
+    expect(result).toEqual(expected);
+  });
+
+  test('should return array if current folder id not found', () => {
+    const result = getFolderParents(FIXTURE_FOLDER_STRUCTURE, 8);
+
+    expect(result).toEqual([]);
+  });
+});
diff --git a/packages/core/upload/admin/src/utils/tests/getFolderURL.test.js b/packages/core/upload/admin/src/utils/tests/getFolderURL.test.js
new file mode 100644
index 0000000000..4c464c37bf
--- /dev/null
+++ b/packages/core/upload/admin/src/utils/tests/getFolderURL.test.js
@@ -0,0 +1,31 @@
+import { getFolderURL } from '..';
+
+const FIXTURE_PATHNAME = '/media-library';
+const FIXTURE_QUERY = {};
+const FIXTURE_FOLDER = {
+  id: 1,
+};
+
+describe('getFolderURL', () => {
+  test('returns a path for the root of the media library', () => {
+    expect(getFolderURL(FIXTURE_PATHNAME, FIXTURE_QUERY)).toStrictEqual(FIXTURE_PATHNAME);
+  });
+
+  test('returns a path for a folder', () => {
+    expect(getFolderURL(FIXTURE_PATHNAME, FIXTURE_QUERY, FIXTURE_FOLDER)).toStrictEqual(
+      `${FIXTURE_PATHNAME}?folder=${FIXTURE_FOLDER.id}`
+    );
+  });
+
+  test('removes _q query parameter', () => {
+    expect(
+      getFolderURL(FIXTURE_PATHNAME, { ...FIXTURE_QUERY, _q: 'search' }, FIXTURE_FOLDER)
+    ).toStrictEqual(`${FIXTURE_PATHNAME}?folder=${FIXTURE_FOLDER.id}`);
+  });
+
+  test('keeps and stringifies query parameter', () => {
+    expect(
+      getFolderURL(FIXTURE_PATHNAME, { ...FIXTURE_QUERY, some: 'thing' }, FIXTURE_FOLDER)
+    ).toStrictEqual(`${FIXTURE_PATHNAME}?some=thing&folder=${FIXTURE_FOLDER.id}`);
+  });
+});

From 110317b6b1abbf1bfa0cb9045b127bb7298b4ae8 Mon Sep 17 00:00:00 2001
From: Julie Plantey <julie.plantey@gmail.com>
Date: Sun, 31 Jul 2022 16:51:09 +0200
Subject: [PATCH 4/9] updated snapshots

---
 .../tests/__snapshots__/index.test.js.snap    | 381 ++++++++++++++++++
 .../tests/__snapshots__/Header.test.js.snap   |  15 +-
 2 files changed, 383 insertions(+), 13 deletions(-)
 create mode 100644 packages/core/upload/admin/src/components/Breadcrumbs/tests/__snapshots__/index.test.js.snap

diff --git a/packages/core/upload/admin/src/components/Breadcrumbs/tests/__snapshots__/index.test.js.snap b/packages/core/upload/admin/src/components/Breadcrumbs/tests/__snapshots__/index.test.js.snap
new file mode 100644
index 0000000000..75332c293b
--- /dev/null
+++ b/packages/core/upload/admin/src/components/Breadcrumbs/tests/__snapshots__/index.test.js.snap
@@ -0,0 +1,381 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Media Library | Breadcrumbs should render and match snapshot 1`] = `
+.c14 {
+  border: 0;
+  -webkit-clip: rect(0 0 0 0);
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+.c5 {
+  padding-right: 4px;
+  padding-left: 4px;
+}
+
+.c12 {
+  padding-left: 8px;
+}
+
+.c7 {
+  color: #8e8ea9;
+  font-size: 0.75rem;
+  line-height: 1.33;
+}
+
+.c11 {
+  font-weight: 600;
+  color: #32324d;
+  font-size: 0.75rem;
+  line-height: 1.33;
+}
+
+.c4 {
+  border-radius: 4px;
+  color: #666687;
+  font-size: 0.75rem;
+  line-height: 1.43;
+  padding: 4px 8px;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c4:hover,
+.c4:focus {
+  background-color: #f6f6f9;
+  color: #4a4a6a;
+}
+
+.c1 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+
+.c3 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+
+.c8 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  cursor: pointer;
+  padding: 8px;
+  border-radius: 4px;
+  background: #ffffff;
+  border: 1px solid #dcdce4;
+  position: relative;
+  outline: none;
+}
+
+.c8 svg {
+  height: 12px;
+  width: 12px;
+}
+
+.c8 svg > g,
+.c8 svg path {
+  fill: #ffffff;
+}
+
+.c8[aria-disabled='true'] {
+  pointer-events: none;
+}
+
+.c8:after {
+  -webkit-transition-property: all;
+  transition-property: all;
+  -webkit-transition-duration: 0.2s;
+  transition-duration: 0.2s;
+  border-radius: 8px;
+  content: '';
+  position: absolute;
+  top: -4px;
+  bottom: -4px;
+  left: -4px;
+  right: -4px;
+  border: 2px solid transparent;
+}
+
+.c8:focus-visible {
+  outline: none;
+}
+
+.c8:focus-visible:after {
+  border-radius: 8px;
+  content: '';
+  position: absolute;
+  top: -5px;
+  bottom: -5px;
+  left: -5px;
+  right: -5px;
+  border: 2px solid #4945ff;
+}
+
+.c9 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  padding: 8px 16px;
+  background: #4945ff;
+  border: 1px solid #4945ff;
+  border: 1px solid transparent;
+  background: transparent;
+}
+
+.c9 .c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c9 .c6 {
+  color: #ffffff;
+}
+
+.c9[aria-disabled='true'] {
+  border: 1px solid #dcdce4;
+  background: #eaeaef;
+}
+
+.c9[aria-disabled='true'] .c6 {
+  color: #666687;
+}
+
+.c9[aria-disabled='true'] svg > g,
+.c9[aria-disabled='true'] svg path {
+  fill: #666687;
+}
+
+.c9[aria-disabled='true']:active {
+  border: 1px solid #dcdce4;
+  background: #eaeaef;
+}
+
+.c9[aria-disabled='true']:active .c6 {
+  color: #666687;
+}
+
+.c9[aria-disabled='true']:active svg > g,
+.c9[aria-disabled='true']:active svg path {
+  fill: #666687;
+}
+
+.c9:hover {
+  background-color: #f6f6f9;
+}
+
+.c9:active {
+  border: 1px solid undefined;
+  background: undefined;
+}
+
+.c9 .c6 {
+  color: #32324d;
+}
+
+.c9 svg > g,
+.c9 svg path {
+  fill: #8e8ea9;
+}
+
+.c13 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.c13 svg {
+  height: 4px;
+  width: 6px;
+}
+
+.c10 {
+  padding: 4px 12px;
+}
+
+.c2:first-child {
+  margin-left: calc(-1*8px);
+}
+
+<div>
+  <nav
+    class="c0 "
+  >
+    <ol
+      class="c0 c1 c2"
+    >
+      <li
+        class="c0 c3"
+      >
+        <a
+          aria-current="page"
+          class="c4 active"
+          href="/"
+        >
+          Media Library
+        </a>
+        <div
+          aria-hidden="true"
+          class="c0 c5"
+        >
+          <span
+            class="c6 c7"
+          >
+            /
+          </span>
+        </div>
+      </li>
+      <li
+        class="c0 c3"
+      >
+        <div>
+          <button
+            aria-controls="simplemenu-3"
+            aria-disabled="false"
+            aria-expanded="false"
+            aria-haspopup="true"
+            aria-label="Get more ascendants folders"
+            class="c8 c9 c10"
+            label="..."
+            type="button"
+          >
+            <span
+              class="c6 c11"
+            >
+              ...
+            </span>
+            <div
+              aria-hidden="true"
+              class="c0 c12"
+            >
+              <span
+                class="c13"
+              >
+                <svg
+                  aria-hidden="true"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 14 8"
+                  width="1em"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    clip-rule="evenodd"
+                    d="M14 .889a.86.86 0 01-.26.625L7.615 7.736A.834.834 0 017 8a.834.834 0 01-.615-.264L.26 1.514A.861.861 0 010 .889c0-.24.087-.45.26-.625A.834.834 0 01.875 0h12.25c.237 0 .442.088.615.264a.86.86 0 01.26.625z"
+                    fill="#32324D"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </span>
+            </div>
+          </button>
+        </div>
+        <div
+          aria-hidden="true"
+          class="c0 c5"
+        >
+          <span
+            class="c6 c7"
+          >
+            /
+          </span>
+        </div>
+      </li>
+      <li
+        class="c0 c3"
+      >
+        <a
+          aria-current="page"
+          class="c4 active"
+          href="/"
+        >
+          parent folder
+        </a>
+        <div
+          aria-hidden="true"
+          class="c0 c5"
+        >
+          <span
+            class="c6 c7"
+          >
+            /
+          </span>
+        </div>
+      </li>
+      <li
+        class="c0 c3"
+      >
+        <div
+          class="c0 c5"
+        >
+          <span
+            aria-current="true"
+            class="c6 c11"
+          >
+            current folder
+          </span>
+        </div>
+      </li>
+    </ol>
+  </nav>
+  <div
+    class="c14"
+  >
+    <p
+      aria-live="polite"
+      aria-relevant="all"
+      id="live-region-log"
+      role="log"
+    />
+    <p
+      aria-live="polite"
+      aria-relevant="all"
+      id="live-region-status"
+      role="status"
+    />
+    <p
+      aria-live="assertive"
+      aria-relevant="all"
+      id="live-region-alert"
+      role="alert"
+    />
+  </div>
+</div>
+`;
diff --git a/packages/core/upload/admin/src/pages/App/tests/__snapshots__/Header.test.js.snap b/packages/core/upload/admin/src/pages/App/tests/__snapshots__/Header.test.js.snap
index 1d3d517e9a..180d116397 100644
--- a/packages/core/upload/admin/src/pages/App/tests/__snapshots__/Header.test.js.snap
+++ b/packages/core/upload/admin/src/pages/App/tests/__snapshots__/Header.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Header renders 1`] = `
-.c20 {
+.c19 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -310,12 +310,6 @@ exports[`Header renders 1`] = `
   line-height: 1.25;
 }
 
-.c19 {
-  color: #666687;
-  font-size: 1rem;
-  line-height: 1.5;
-}
-
 .c5 {
   color: #4945ff;
   font-size: 0.75rem;
@@ -500,15 +494,10 @@ exports[`Header renders 1`] = `
           </button>
         </div>
       </div>
-      <p
-        class="c19"
-      >
-        2 folders - 2 assets
-      </p>
     </div>
   </div>
   <div
-    class="c20"
+    class="c19"
   >
     <p
       aria-live="polite"

From bdc0454cd73c9037fb0c24e7fcf97534e5035d4d Mon Sep 17 00:00:00 2001
From: Julie Plantey <julie.plantey@gmail.com>
Date: Sun, 31 Jul 2022 17:43:42 +0200
Subject: [PATCH 5/9] breadcrumbs in ML modal - CM

---
 .../AssetDialog/BrowseStep/index.js           | 165 ++--
 .../tests/__snapshots__/index.test.js.snap    | 901 +++++++++---------
 .../BrowseStep/tests/index.test.js            |  79 +-
 .../components/AssetDialog/DialogHeader.js    |  91 --
 .../admin/src/components/AssetDialog/index.js |  57 +-
 .../AssetDialog/tests/DialogHeader.test.js    |  96 --
 .../src/components/Breadcrumbs/Breadcrumbs.js |  24 +-
 .../Breadcrumbs/CrumbSimpleMenuAsync.js       |  22 +-
 .../Breadcrumbs/tests/index.test.js           |   4 +-
 .../admin/src/pages/App/MediaLibrary.js       |   4 +-
 .../admin/src/pages/App/components/Header.js  |   3 +-
 .../admin/src/utils/getBreadcrumbDataCM.js    |  30 +
 ...eadcrumbData.js => getBreadcrumbDataML.js} |   4 +-
 packages/core/upload/admin/src/utils/index.js |   3 +-
 ...ta.test.js => getBreadcrumbDataCM.test.js} |  12 +-
 15 files changed, 740 insertions(+), 755 deletions(-)
 delete mode 100644 packages/core/upload/admin/src/components/AssetDialog/DialogHeader.js
 delete mode 100644 packages/core/upload/admin/src/components/AssetDialog/tests/DialogHeader.test.js
 create mode 100644 packages/core/upload/admin/src/utils/getBreadcrumbDataCM.js
 rename packages/core/upload/admin/src/utils/{getBreadcrumbData.js => getBreadcrumbDataML.js} (84%)
 rename packages/core/upload/admin/src/utils/tests/{getBreadcrumbData.test.js => getBreadcrumbDataCM.test.js} (85%)

diff --git a/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/index.js b/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/index.js
index 876241a35a..26beec4ecd 100644
--- a/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/index.js
+++ b/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/index.js
@@ -4,7 +4,6 @@ import styled from 'styled-components';
 import { useIntl } from 'react-intl';
 import { Button } from '@strapi/design-system/Button';
 import { Flex } from '@strapi/design-system/Flex';
-import { Stack } from '@strapi/design-system/Stack';
 import { Box } from '@strapi/design-system/Box';
 import { Divider } from '@strapi/design-system/Divider';
 import { BaseCheckbox } from '@strapi/design-system/BaseCheckbox';
@@ -17,11 +16,14 @@ import PlusIcon from '@strapi/icons/Plus';
 
 import { FolderDefinition, AssetDefinition } from '../../../constants';
 import getTrad from '../../../utils/getTrad';
+import { getBreadcrumbDataCM } from '../../../utils';
 import getAllowedFiles from '../../../utils/getAllowedFiles';
 import { AssetList } from '../../AssetList';
 import { FolderList } from '../../FolderList';
 import { EmptyAssets } from '../../EmptyAssets';
+import { Breadcrumbs } from '../../Breadcrumbs';
 import SortPicker from '../../SortPicker';
+import { useFolder } from '../../../hooks/useFolder';
 import { FolderCard, FolderCardBody, FolderCardBodyAction } from '../../FolderCard';
 import { Filters } from './Filters';
 import PaginationFooter from './PaginationFooter';
@@ -32,7 +34,6 @@ const StartBlockActions = styled(Flex)`
   & > * + * {
     margin-left: ${({ theme }) => theme.spaces[2]};
   }
-
   margin-left: ${({ pullRight }) => (pullRight ? 'auto' : undefined)};
 `;
 
@@ -48,6 +49,7 @@ export const BrowseStep = ({
   allowedTypes,
   assets,
   canCreate,
+  canRead,
   folders,
   multiple,
   onAddAsset,
@@ -66,6 +68,16 @@ export const BrowseStep = ({
   selectedAssets,
 }) => {
   const { formatMessage } = useIntl();
+
+  const { data: currentFolder, isLoading: isCurrentFolderLoading } = useFolder(
+    queryObject?.folder,
+    {
+      enabled: canRead && !!queryObject?.folder,
+    }
+  );
+
+  const breadcrumbs = !isCurrentFolderLoading && getBreadcrumbDataCM(currentFolder);
+
   const allAllowedAsset = getAllowedFiles(allowedTypes, assets);
   const areAllAssetSelected =
     allAllowedAsset.every(
@@ -79,7 +91,6 @@ export const BrowseStep = ({
   const isSearchingOrFiltering = isSearching || isFiltering;
   const assetCount = assets.length;
   const folderCount = folders.length;
-
   const handleClickFolderCard = (...args) => {
     // Search query will always fetch the same results
     // we remove it here to allow navigating in a folder and see the result of this navigation
@@ -88,48 +99,58 @@ export const BrowseStep = ({
   };
 
   return (
-    <Stack spacing={4}>
+    <Box>
       {onSelectAllAsset && (
         <Box>
-          <Box paddingBottom={4}>
-            <Flex justifyContent="space-between" alignItems="flex-start">
-              {(assetCount > 0 || folderCount > 0 || isFiltering) && (
-                <StartBlockActions wrap="wrap">
-                  {multiple && (
-                    <Flex
-                      paddingLeft={2}
-                      paddingRight={2}
-                      background="neutral0"
-                      hasRadius
-                      borderColor="neutral200"
-                      height={`${32 / 16}rem`}
-                    >
-                      <BaseCheckbox
-                        aria-label={formatMessage({
-                          id: getTrad('bulk.select.label'),
-                          defaultMessage: 'Select all assets',
-                        })}
-                        indeterminate={!areAllAssetSelected && hasSomeAssetSelected}
-                        value={areAllAssetSelected}
-                        onChange={onSelectAllAsset}
-                      />
-                    </Flex>
-                  )}
-                  <SortPicker onChangeSort={onChangeSort} />
-                  <Filters
-                    appliedFilters={queryObject?.filters?.$and}
-                    onChangeFilters={onChangeFilters}
-                  />
-                </StartBlockActions>
-              )}
+          <Flex justifyContent="space-between" alignItems="flex-start">
+            {(assetCount > 0 || folderCount > 0 || isFiltering) && (
+              <StartBlockActions wrap="wrap">
+                {multiple && (
+                  <Flex
+                    paddingLeft={2}
+                    paddingRight={2}
+                    background="neutral0"
+                    hasRadius
+                    borderColor="neutral200"
+                    height={`${32 / 16}rem`}
+                  >
+                    <BaseCheckbox
+                      aria-label={formatMessage({
+                        id: getTrad('bulk.select.label'),
+                        defaultMessage: 'Select all assets',
+                      })}
+                      indeterminate={!areAllAssetSelected && hasSomeAssetSelected}
+                      value={areAllAssetSelected}
+                      onChange={onSelectAllAsset}
+                    />
+                  </Flex>
+                )}
+                <SortPicker onChangeSort={onChangeSort} />
+                <Filters
+                  appliedFilters={queryObject?.filters?.$and}
+                  onChangeFilters={onChangeFilters}
+                />
+              </StartBlockActions>
+            )}
 
-              {(assetCount > 0 || folderCount > 0 || isSearching) && (
-                <EndBlockActions pullRight>
-                  <SearchAsset onChangeSearch={onChangeSearch} queryValue={queryObject._q || ''} />
-                </EndBlockActions>
-              )}
-            </Flex>
-          </Box>
+            {(assetCount > 0 || folderCount > 0 || isSearching) && (
+              <EndBlockActions pullRight>
+                <SearchAsset onChangeSearch={onChangeSearch} queryValue={queryObject._q || ''} />
+              </EndBlockActions>
+            )}
+          </Flex>
+        </Box>
+      )}
+
+      {canRead && !isCurrentFolderLoading && (
+        <Box paddingTop={3}>
+          <Breadcrumbs
+            onChangeFolder={onChangeFolder}
+            as="nav"
+            label="hello"
+            breadcrumbs={breadcrumbs}
+            currentFolderId={queryObject?.folder}
+          />
         </Box>
       )}
 
@@ -175,10 +196,13 @@ export const BrowseStep = ({
         <FolderList
           title={
             (((isSearchingOrFiltering && assetCount > 0) || !isSearchingOrFiltering) &&
-              formatMessage({
-                id: getTrad('list.folders.title'),
-                defaultMessage: 'Folders',
-              })) ||
+              formatMessage(
+                {
+                  id: getTrad('list.folders.title'),
+                  defaultMessage: 'Folders ({count})',
+                },
+                { count: folderCount }
+              )) ||
             ''
           }
         >
@@ -209,7 +233,6 @@ export const BrowseStep = ({
                           {folder.name}
                           <VisuallyHidden>:</VisuallyHidden>
                         </TypographyMaxWidth>
-
                         <TypographyMaxWidth as="span" textColor="neutral600" variant="pi" ellipsis>
                           {formatMessage(
                             {
@@ -234,33 +257,38 @@ export const BrowseStep = ({
       )}
 
       {assetCount > 0 && folderCount > 0 && (
-        <Box paddingTop={2}>
+        <Box paddingTop={6}>
           <Divider />
         </Box>
       )}
 
       {assetCount > 0 && (
-        <AssetList
-          allowedTypes={allowedTypes}
-          size="S"
-          assets={assets}
-          onSelectAsset={onSelectAsset}
-          selectedAssets={selectedAssets}
-          onEditAsset={onEditAsset}
-          title={
-            ((!isSearchingOrFiltering || (isSearchingOrFiltering && folderCount > 0)) &&
-              queryObject.page === 1 &&
-              formatMessage({
-                id: getTrad('list.assets.title'),
-                defaultMessage: 'Assets',
-              })) ||
-            ''
-          }
-        />
+        <Box paddingTop={6}>
+          <AssetList
+            allowedTypes={allowedTypes}
+            size="S"
+            assets={assets}
+            onSelectAsset={onSelectAsset}
+            selectedAssets={selectedAssets}
+            onEditAsset={onEditAsset}
+            title={
+              ((!isSearchingOrFiltering || (isSearchingOrFiltering && folderCount > 0)) &&
+                queryObject.page === 1 &&
+                formatMessage(
+                  {
+                    id: getTrad('list.assets.title'),
+                    defaultMessage: 'Assets ({count})',
+                  },
+                  { count: assetCount }
+                )) ||
+              ''
+            }
+          />
+        </Box>
       )}
 
       {pagination.pageCount > 0 && (
-        <Flex justifyContent="space-between">
+        <Flex justifyContent="space-between" paddingTop={4}>
           <PageSize pageSize={queryObject.pageSize} onChangePageSize={onChangePageSize} />
           <PaginationFooter
             activePage={queryObject.page}
@@ -269,7 +297,7 @@ export const BrowseStep = ({
           />
         </Flex>
       )}
-    </Stack>
+    </Box>
   );
 };
 
@@ -281,11 +309,11 @@ BrowseStep.defaultProps = {
   onEditAsset: undefined,
   onEditFolder: undefined,
 };
-
 BrowseStep.propTypes = {
   allowedTypes: PropTypes.arrayOf(PropTypes.string),
   assets: PropTypes.arrayOf(AssetDefinition).isRequired,
   canCreate: PropTypes.bool.isRequired,
+  canRead: PropTypes.bool.isRequired,
   folders: PropTypes.arrayOf(FolderDefinition),
   multiple: PropTypes.bool,
   onAddAsset: PropTypes.func.isRequired,
@@ -304,6 +332,7 @@ BrowseStep.propTypes = {
     page: PropTypes.number.isRequired,
     pageSize: PropTypes.number.isRequired,
     _q: PropTypes.string,
+    folder: PropTypes.number,
   }).isRequired,
   pagination: PropTypes.shape({ pageCount: PropTypes.number.isRequired }).isRequired,
   selectedAssets: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
diff --git a/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/tests/__snapshots__/index.test.js.snap b/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/tests/__snapshots__/index.test.js.snap
index c46ff03d8e..faa5f1ef33 100644
--- a/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/tests/__snapshots__/index.test.js.snap
+++ b/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/tests/__snapshots__/index.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`BrowseStep renders and match snapshot 1`] = `
-.c74 {
+.c78 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -13,18 +13,50 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   width: 1px;
 }
 
-.c19 {
+.c22 {
+  padding-top: 12px;
+}
+
+.c28 {
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+
+.c32 {
+  position: relative;
+}
+
+.c37 {
+  background: #eaf5ff;
+  color: #66b7f1;
+  padding-top: 8px;
+  padding-right: 12px;
+  padding-bottom: 8px;
+  padding-left: 12px;
+  border-radius: 4px;
+}
+
+.c42 {
+  padding: 4px;
+  max-width: 100%;
+}
+
+.c69 {
+  padding-left: 8px;
+}
+
+.c16 {
   font-weight: 600;
   color: #32324d;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c16 {
+.c13 {
   padding-right: 8px;
 }
 
-.c13 {
+.c10 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -38,21 +70,21 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   outline: none;
 }
 
-.c13 svg {
+.c10 svg {
   height: 12px;
   width: 12px;
 }
 
-.c13 svg > g,
-.c13 svg path {
+.c10 svg > g,
+.c10 svg path {
   fill: #ffffff;
 }
 
-.c13[aria-disabled='true'] {
+.c10[aria-disabled='true'] {
   pointer-events: none;
 }
 
-.c13:after {
+.c10:after {
   -webkit-transition-property: all;
   transition-property: all;
   -webkit-transition-duration: 0.2s;
@@ -67,11 +99,11 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   border: 2px solid transparent;
 }
 
-.c13:focus-visible {
+.c10:focus-visible {
   outline: none;
 }
 
-.c13:focus-visible:after {
+.c10:focus-visible:after {
   border-radius: 8px;
   content: '';
   position: absolute;
@@ -82,11 +114,11 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   border: 2px solid #4945ff;
 }
 
-.c17 {
+.c14 {
   height: 100%;
 }
 
-.c14 {
+.c11 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -98,7 +130,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   background: #ffffff;
 }
 
-.c14 .c15 {
+.c11 .c12 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -109,66 +141,70 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   align-items: center;
 }
 
-.c14 .c18 {
+.c11 .c15 {
   color: #ffffff;
 }
 
-.c14[aria-disabled='true'] {
+.c11[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c14[aria-disabled='true'] .c18 {
+.c11[aria-disabled='true'] .c15 {
   color: #666687;
 }
 
-.c14[aria-disabled='true'] svg > g,
-.c14[aria-disabled='true'] svg path {
+.c11[aria-disabled='true'] svg > g,
+.c11[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c14[aria-disabled='true']:active {
+.c11[aria-disabled='true']:active {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c14[aria-disabled='true']:active .c18 {
+.c11[aria-disabled='true']:active .c15 {
   color: #666687;
 }
 
-.c14[aria-disabled='true']:active svg > g,
-.c14[aria-disabled='true']:active svg path {
+.c11[aria-disabled='true']:active svg > g,
+.c11[aria-disabled='true']:active svg path {
   fill: #666687;
 }
 
-.c14:hover {
+.c11:hover {
   background-color: #f6f6f9;
 }
 
-.c14:active {
+.c11:active {
   background-color: #eaeaef;
 }
 
-.c14 .c18 {
+.c11 .c15 {
   color: #32324d;
 }
 
-.c14 svg > g,
-.c14 svg path {
+.c11 svg > g,
+.c11 svg path {
   fill: #32324d;
 }
 
-.c36 {
+.c39 {
   position: relative;
   overflow: hidden;
   max-width: 100%;
 }
 
-.c41 {
+.c44 {
   max-width: 100%;
 }
 
-.c3 {
+.c55 {
+  padding-top: 16px;
+}
+
+.c0 {
   -webkit-align-items: flex-start;
   -webkit-box-align: flex-start;
   -ms-flex-align: flex-start;
@@ -186,7 +222,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   justify-content: space-between;
 }
 
-.c4 {
+.c1 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -203,7 +239,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   flex-wrap: wrap;
 }
 
-.c20 {
+.c17 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -217,7 +253,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   flex-direction: row;
 }
 
-.c37 {
+.c40 {
   -webkit-align-items: flex-start;
   -webkit-box-align: flex-start;
   -ms-flex-align: flex-start;
@@ -231,7 +267,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   flex-direction: column;
 }
 
-.c42 {
+.c45 {
   -webkit-align-items: start;
   -webkit-box-align: start;
   -ms-flex-align: start;
@@ -245,7 +281,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   flex-direction: column;
 }
 
-.c52 {
+.c56 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -263,162 +299,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   justify-content: space-between;
 }
 
-.c31 {
-  background: #ffffff;
-  padding: 12px;
-  border-radius: 4px;
-  border-style: solid;
-  border-width: 1px;
-  border-color: #eaeaef;
-  box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
-  cursor: pointer;
-  cursor: pointer;
-}
-
-.c0 {
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-
-.c32 {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c1 > * {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.c1 > * + * {
-  margin-top: 16px;
-}
-
-.c33 > * {
-  margin-left: 0;
-  margin-right: 0;
-}
-
-.c33 > * + * {
-  margin-left: 8px;
-}
-
-.c2 {
-  padding-bottom: 16px;
-}
-
-.c25 {
-  padding-top: 8px;
-  padding-bottom: 8px;
-}
-
-.c29 {
-  position: relative;
-}
-
-.c34 {
-  background: #eaf5ff;
-  color: #66b7f1;
-  padding-top: 8px;
-  padding-right: 12px;
-  padding-bottom: 8px;
-  padding-left: 12px;
-  border-radius: 4px;
-}
-
-.c39 {
-  padding: 4px;
-  max-width: 100%;
-}
-
-.c65 {
-  padding-left: 8px;
-}
-
-.c27 {
-  display: grid;
-  grid-template-columns: repeat(12,1fr);
-  gap: 16px;
-}
-
-.c28 {
-  grid-column: span 3;
-  max-width: 100%;
-}
-
-.c26 {
-  font-weight: 500;
-  color: #32324d;
-  font-weight: 500;
-  font-size: 1rem;
-  line-height: 1.25;
-}
-
-.c43 {
-  font-weight: 500;
-  color: #32324d;
-  display: block;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-size: 0.875rem;
-  line-height: 1.43;
-}
-
-.c46 {
-  color: #666687;
-  display: block;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-size: 0.75rem;
-  line-height: 1.33;
-}
-
-.c66 {
-  color: #666687;
-  font-size: 0.875rem;
-  line-height: 1.43;
-}
-
-.c72 {
-  font-weight: 600;
-  color: #32324d;
-  font-size: 0.75rem;
-  line-height: 1.33;
-}
-
-.c45 {
-  border: 0;
-  -webkit-clip: rect(0 0 0 0);
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-}
-
-.c23 {
+.c20 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -432,21 +313,21 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   outline: none;
 }
 
-.c23 svg {
+.c20 svg {
   height: 12px;
   width: 12px;
 }
 
-.c23 svg > g,
-.c23 svg path {
+.c20 svg > g,
+.c20 svg path {
   fill: #ffffff;
 }
 
-.c23[aria-disabled='true'] {
+.c20[aria-disabled='true'] {
   pointer-events: none;
 }
 
-.c23:after {
+.c20:after {
   -webkit-transition-property: all;
   transition-property: all;
   -webkit-transition-duration: 0.2s;
@@ -461,11 +342,11 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   border: 2px solid transparent;
 }
 
-.c23:focus-visible {
+.c20:focus-visible {
   outline: none;
 }
 
-.c23:focus-visible:after {
+.c20:focus-visible:after {
   border-radius: 8px;
   content: '';
   position: absolute;
@@ -476,7 +357,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   border: 2px solid #4945ff;
 }
 
-.c24 {
+.c21 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -493,30 +374,30 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   width: 2rem;
 }
 
-.c24 svg > g,
-.c24 svg path {
+.c21 svg > g,
+.c21 svg path {
   fill: #8e8ea9;
 }
 
-.c24:hover svg > g,
-.c24:hover svg path {
+.c21:hover svg > g,
+.c21:hover svg path {
   fill: #666687;
 }
 
-.c24:active svg > g,
-.c24:active svg path {
+.c21:active svg > g,
+.c21:active svg path {
   fill: #a5a5ba;
 }
 
-.c24[aria-disabled='true'] {
+.c21[aria-disabled='true'] {
   background-color: #eaeaef;
 }
 
-.c24[aria-disabled='true'] svg path {
+.c21[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c57 {
+.c61 {
   position: absolute;
   left: 0;
   right: 0;
@@ -527,24 +408,24 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   border: none;
 }
 
-.c57:focus {
+.c61:focus {
   outline: none;
 }
 
-.c57[aria-disabled='true'] {
+.c61[aria-disabled='true'] {
   cursor: not-allowed;
 }
 
-.c60 {
+.c64 {
   padding-right: 16px;
   padding-left: 16px;
 }
 
-.c62 {
+.c66 {
   padding-left: 12px;
 }
 
-.c53 {
+.c57 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -558,7 +439,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   flex-direction: column;
 }
 
-.c55 {
+.c59 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -572,7 +453,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   flex-direction: row;
 }
 
-.c58 {
+.c62 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -590,7 +471,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   justify-content: space-between;
 }
 
-.c61 {
+.c65 {
   color: #32324d;
   display: block;
   white-space: nowrap;
@@ -600,12 +481,12 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   line-height: 1.43;
 }
 
-.c54 > * {
+.c58 > * {
   margin-top: 0;
   margin-bottom: 0;
 }
 
-.c56 {
+.c60 {
   position: relative;
   border: 1px solid #dcdce4;
   padding-right: 12px;
@@ -621,28 +502,28 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   transition-duration: 0.2s;
 }
 
-.c56:focus-within {
+.c60:focus-within {
   border: 1px solid #4945ff;
   box-shadow: #4945ff 0px 0px 0px 2px;
 }
 
-.c63 {
+.c67 {
   background: transparent;
   border: none;
   position: relative;
   z-index: 1;
 }
 
-.c63 svg {
+.c67 svg {
   height: 0.6875rem;
   width: 0.6875rem;
 }
 
-.c63 svg path {
+.c67 svg path {
   fill: #666687;
 }
 
-.c64 {
+.c68 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -651,19 +532,27 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   border: none;
 }
 
-.c64 svg {
+.c68 svg {
   width: 0.375rem;
 }
 
-.c59 {
+.c63 {
   width: 100%;
 }
 
-.c48 {
-  right: 16px;
+.c34 {
+  background: #ffffff;
+  padding: 12px;
+  border-radius: 4px;
+  border-style: solid;
+  border-width: 1px;
+  border-color: #eaeaef;
+  box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
+  cursor: pointer;
+  cursor: pointer;
 }
 
-.c49 {
+.c35 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -677,32 +566,168 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   flex-direction: row;
 }
 
-.c50 > * {
+.c36 > * {
   margin-left: 0;
   margin-right: 0;
 }
 
-.c50 > * + * {
+.c36 > * + * {
   margin-left: 8px;
 }
 
-.c51 {
-  position: absolute;
-  top: 12px;
+.c29 {
+  font-weight: 500;
+  color: #32324d;
+  font-weight: 500;
+  font-size: 1rem;
+  line-height: 1.25;
 }
 
-.c9 {
+.c46 {
+  font-weight: 500;
+  color: #32324d;
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 0.875rem;
+  line-height: 1.43;
+}
+
+.c49 {
+  color: #666687;
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 0.75rem;
+  line-height: 1.33;
+}
+
+.c70 {
+  color: #666687;
+  font-size: 0.875rem;
+  line-height: 1.43;
+}
+
+.c76 {
   font-weight: 600;
   color: #32324d;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c11 {
-  padding-left: 8px;
+.c48 {
+  border: 0;
+  -webkit-clip: rect(0 0 0 0);
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+.c30 {
+  display: grid;
+  grid-template-columns: repeat(12,1fr);
+  gap: 16px;
+}
+
+.c31 {
+  grid-column: span 3;
+  max-width: 100%;
+}
+
+.c51 {
+  right: 16px;
+}
+
+.c52 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+
+.c53 > * {
+  margin-left: 0;
+  margin-right: 0;
+}
+
+.c53 > * + * {
+  margin-left: 8px;
+}
+
+.c54 {
+  position: absolute;
+  top: 12px;
+}
+
+.c26 {
+  padding-right: 4px;
+  padding-left: 4px;
+}
+
+.c27 {
+  font-weight: 600;
+  color: #32324d;
+  font-size: 0.75rem;
+  line-height: 1.33;
+}
+
+.c23 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+
+.c25 {
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+
+.c24:first-child {
+  margin-left: calc(-1*8px);
 }
 
 .c6 {
+  font-weight: 600;
+  color: #32324d;
+  font-size: 0.75rem;
+  line-height: 1.33;
+}
+
+.c8 {
+  padding-left: 8px;
+}
+
+.c3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -716,21 +741,21 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   outline: none;
 }
 
-.c6 svg {
+.c3 svg {
   height: 12px;
   width: 12px;
 }
 
-.c6 svg > g,
-.c6 svg path {
+.c3 svg > g,
+.c3 svg path {
   fill: #ffffff;
 }
 
-.c6[aria-disabled='true'] {
+.c3[aria-disabled='true'] {
   pointer-events: none;
 }
 
-.c6:after {
+.c3:after {
   -webkit-transition-property: all;
   transition-property: all;
   -webkit-transition-duration: 0.2s;
@@ -745,11 +770,11 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   border: 2px solid transparent;
 }
 
-.c6:focus-visible {
+.c3:focus-visible {
   outline: none;
 }
 
-.c6:focus-visible:after {
+.c3:focus-visible:after {
   border-radius: 8px;
   content: '';
   position: absolute;
@@ -760,7 +785,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   border: 2px solid #4945ff;
 }
 
-.c7 {
+.c4 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -772,7 +797,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   background: #ffffff;
 }
 
-.c7 .c10 {
+.c4 .c7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -783,56 +808,56 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   align-items: center;
 }
 
-.c7 .c8 {
+.c4 .c5 {
   color: #ffffff;
 }
 
-.c7[aria-disabled='true'] {
+.c4[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c7[aria-disabled='true'] .c8 {
+.c4[aria-disabled='true'] .c5 {
   color: #666687;
 }
 
-.c7[aria-disabled='true'] svg > g,
-.c7[aria-disabled='true'] svg path {
+.c4[aria-disabled='true'] svg > g,
+.c4[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c7[aria-disabled='true']:active {
+.c4[aria-disabled='true']:active {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c7[aria-disabled='true']:active .c8 {
+.c4[aria-disabled='true']:active .c5 {
   color: #666687;
 }
 
-.c7[aria-disabled='true']:active svg > g,
-.c7[aria-disabled='true']:active svg path {
+.c4[aria-disabled='true']:active svg > g,
+.c4[aria-disabled='true']:active svg path {
   fill: #666687;
 }
 
-.c7:hover {
+.c4:hover {
   background-color: #f6f6f9;
 }
 
-.c7:active {
+.c4:active {
   background-color: #eaeaef;
 }
 
-.c7 .c8 {
+.c4 .c5 {
   color: #32324d;
 }
 
-.c7 svg > g,
-.c7 svg path {
+.c4 svg > g,
+.c4 svg path {
   fill: #32324d;
 }
 
-.c12 {
+.c9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -843,12 +868,12 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   align-items: center;
 }
 
-.c12 svg {
+.c9 svg {
   height: 4px;
   width: 6px;
 }
 
-.c30 {
+.c33 {
   height: 100%;
   left: 0;
   position: absolute;
@@ -857,41 +882,41 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   width: 100%;
 }
 
-.c30:hover,
-.c30:focus {
+.c33:hover,
+.c33:focus {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.c35 path {
+.c38 path {
   fill: currentColor;
 }
 
-.c47 {
+.c50 {
   display: none;
 }
 
-.c38 {
+.c41 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
 }
 
-.c40:focus {
+.c43:focus {
   outline: 2px solid #4945ff;
   outline-offset: -2px;
 }
 
-.c67 > * + * {
+.c71 > * + * {
   margin-left: 4px;
 }
 
-.c73 {
+.c77 {
   line-height: revert;
 }
 
-.c68 {
+.c72 {
   padding: 12px;
   border-radius: 4px;
   -webkit-text-decoration: none;
@@ -904,7 +929,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   outline: none;
 }
 
-.c68:after {
+.c72:after {
   -webkit-transition-property: all;
   transition-property: all;
   -webkit-transition-duration: 0.2s;
@@ -919,11 +944,11 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   border: 2px solid transparent;
 }
 
-.c68:focus-visible {
+.c72:focus-visible {
   outline: none;
 }
 
-.c68:focus-visible:after {
+.c72:focus-visible:after {
   border-radius: 8px;
   content: '';
   position: absolute;
@@ -934,7 +959,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   border: 2px solid #4945ff;
 }
 
-.c70 {
+.c74 {
   padding: 12px;
   border-radius: 4px;
   box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
@@ -948,7 +973,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   outline: none;
 }
 
-.c70:after {
+.c74:after {
   -webkit-transition-property: all;
   transition-property: all;
   -webkit-transition-duration: 0.2s;
@@ -963,11 +988,11 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   border: 2px solid transparent;
 }
 
-.c70:focus-visible {
+.c74:focus-visible {
   outline: none;
 }
 
-.c70:focus-visible:after {
+.c74:focus-visible:after {
   border-radius: 8px;
   content: '';
   position: absolute;
@@ -978,226 +1003,248 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   border: 2px solid #4945ff;
 }
 
-.c71 {
+.c75 {
   color: #271fe0;
   background: #ffffff;
 }
 
-.c71:hover {
+.c75:hover {
   box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
 }
 
-.c69 {
+.c73 {
   font-size: 0.7rem;
   pointer-events: none;
 }
 
-.c69 svg path {
+.c73 svg path {
   fill: #c0c0cf;
 }
 
-.c69:focus svg path,
-.c69:hover svg path {
+.c73:focus svg path,
+.c73:hover svg path {
   fill: #c0c0cf;
 }
 
-.c5 > * + * {
+.c2 > * + * {
   margin-left: 8px;
 }
 
-.c21 {
+.c18 {
   margin-left: auto;
 }
 
-.c21 > * + * {
+.c18 > * + * {
   margin-left: 8px;
 }
 
-.c22 {
+.c19 {
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c44 {
+.c47 {
   max-width: 100%;
 }
 
 @media (max-width:68.75rem) {
-  .c28 {
+  .c31 {
     grid-column: span;
   }
 }
 
 @media (max-width:34.375rem) {
-  .c28 {
+  .c31 {
     grid-column: span;
   }
 }
 
 <div>
   <div
-    class="c0 c1"
-    spacing="4"
+    class=""
   >
     <div
       class=""
     >
       <div
-        class="c2"
+        class="c0"
       >
         <div
-          class="c3"
+          class="c1 c2"
+          wrap="wrap"
         >
-          <div
-            class="c4 c5"
-            wrap="wrap"
-          >
-            <div>
-              <button
-                aria-controls="simplemenu-1"
-                aria-disabled="false"
-                aria-expanded="false"
-                aria-haspopup="true"
-                class="c6 c7"
-                label="Sort by"
-                type="button"
-              >
-                <span
-                  class="c8 c9"
-                >
-                  Sort by
-                </span>
-                <div
-                  aria-hidden="true"
-                  class="c10 c11"
-                >
-                  <span
-                    class="c12"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      fill="none"
-                      height="1em"
-                      viewBox="0 0 14 8"
-                      width="1em"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        clip-rule="evenodd"
-                        d="M14 .889a.86.86 0 01-.26.625L7.615 7.736A.834.834 0 017 8a.834.834 0 01-.615-.264L.26 1.514A.861.861 0 010 .889c0-.24.087-.45.26-.625A.834.834 0 01.875 0h12.25c.237 0 .442.088.615.264a.86.86 0 01.26.625z"
-                        fill="#32324D"
-                        fill-rule="evenodd"
-                      />
-                    </svg>
-                  </span>
-                </div>
-              </button>
-            </div>
+          <div>
             <button
+              aria-controls="simplemenu-1"
               aria-disabled="false"
-              class="c13 c14"
+              aria-expanded="false"
+              aria-haspopup="true"
+              class="c3 c4"
+              label="Sort by"
               type="button"
             >
+              <span
+                class="c5 c6"
+              >
+                Sort by
+              </span>
               <div
                 aria-hidden="true"
-                class="c15 c16 c17"
+                class="c7 c8"
               >
-                <svg
-                  fill="none"
-                  height="1em"
-                  viewBox="0 0 24 24"
-                  width="1em"
-                  xmlns="http://www.w3.org/2000/svg"
+                <span
+                  class="c9"
                 >
-                  <path
-                    clip-rule="evenodd"
-                    d="M0 4a2 2 0 012-2h20a2 2 0 110 4H2a2 2 0 01-2-2zm4 8a2 2 0 012-2h12a2 2 0 110 4H6a2 2 0 01-2-2zm6 6a2 2 0 100 4h4a2 2 0 100-4h-4z"
-                    fill="#32324D"
-                    fill-rule="evenodd"
-                  />
-                </svg>
+                  <svg
+                    aria-hidden="true"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 14 8"
+                    width="1em"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      clip-rule="evenodd"
+                      d="M14 .889a.86.86 0 01-.26.625L7.615 7.736A.834.834 0 017 8a.834.834 0 01-.615-.264L.26 1.514A.861.861 0 010 .889c0-.24.087-.45.26-.625A.834.834 0 01.875 0h12.25c.237 0 .442.088.615.264a.86.86 0 01.26.625z"
+                      fill="#32324D"
+                      fill-rule="evenodd"
+                    />
+                  </svg>
+                </span>
               </div>
-              <span
-                class="c18 c19"
-              >
-                Filters
-              </span>
             </button>
           </div>
-          <div
-            class="c20 c21 c22"
+          <button
+            aria-disabled="false"
+            class="c10 c11"
+            type="button"
           >
-            <span>
-              <button
-                aria-disabled="false"
-                aria-labelledby="tooltip-1"
-                class="c23 c24"
-                tabindex="0"
-                type="button"
+            <div
+              aria-hidden="true"
+              class="c12 c13 c14"
+            >
+              <svg
+                fill="none"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
               >
-                <svg
-                  fill="none"
-                  height="1em"
-                  viewBox="0 0 24 24"
-                  width="1em"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    clip-rule="evenodd"
-                    d="M23.813 20.163l-5.3-5.367a9.792 9.792 0 001.312-4.867C19.825 4.455 15.375 0 9.913 0 4.45 0 0 4.455 0 9.929c0 5.473 4.45 9.928 9.912 9.928a9.757 9.757 0 005.007-1.4l5.275 5.35a.634.634 0 00.913 0l2.706-2.737a.641.641 0 000-.907zM9.91 3.867c3.338 0 6.05 2.718 6.05 6.061s-2.712 6.061-6.05 6.061c-3.337 0-6.05-2.718-6.05-6.06 0-3.344 2.713-6.062 6.05-6.062z"
-                    fill="#32324D"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-              </button>
+                <path
+                  clip-rule="evenodd"
+                  d="M0 4a2 2 0 012-2h20a2 2 0 110 4H2a2 2 0 01-2-2zm4 8a2 2 0 012-2h12a2 2 0 110 4H6a2 2 0 01-2-2zm6 6a2 2 0 100 4h4a2 2 0 100-4h-4z"
+                  fill="#32324D"
+                  fill-rule="evenodd"
+                />
+              </svg>
+            </div>
+            <span
+              class="c15 c16"
+            >
+              Filters
             </span>
-          </div>
+          </button>
+        </div>
+        <div
+          class="c17 c18 c19"
+        >
+          <span>
+            <button
+              aria-disabled="false"
+              aria-labelledby="tooltip-1"
+              class="c20 c21"
+              tabindex="0"
+              type="button"
+            >
+              <svg
+                fill="none"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  clip-rule="evenodd"
+                  d="M23.813 20.163l-5.3-5.367a9.792 9.792 0 001.312-4.867C19.825 4.455 15.375 0 9.913 0 4.45 0 0 4.455 0 9.929c0 5.473 4.45 9.928 9.912 9.928a9.757 9.757 0 005.007-1.4l5.275 5.35a.634.634 0 00.913 0l2.706-2.737a.641.641 0 000-.907zM9.91 3.867c3.338 0 6.05 2.718 6.05 6.061s-2.712 6.061-6.05 6.061c-3.337 0-6.05-2.718-6.05-6.06 0-3.344 2.713-6.062 6.05-6.062z"
+                  fill="#32324D"
+                  fill-rule="evenodd"
+                />
+              </svg>
+            </button>
+          </span>
         </div>
       </div>
     </div>
+    <div
+      class="c22"
+    >
+      <nav
+        aria-label="hello"
+        class=""
+      >
+        <ol
+          class="c23 c24"
+        >
+          <li
+            class="c25"
+          >
+            <div
+              class="c26"
+            >
+              <span
+                aria-current="true"
+                class="c27"
+              >
+                Media Library
+              </span>
+            </div>
+          </li>
+        </ol>
+      </nav>
+    </div>
     <div
       class=""
     >
       <div
-        class="c25"
+        class="c28"
       >
         <h2
-          class="c26"
+          class="c29"
         >
-          Folders
+          Folders (1)
         </h2>
       </div>
       <div
-        class="c27"
+        class="c30"
       >
         <div
-          class="c28"
+          class="c31"
         >
           <div
             class=""
           >
             <div
-              class="c29 "
+              class="c32 "
               tabindex="0"
             >
               <button
                 aria-hidden="true"
                 aria-label="Folder 1"
-                class="c30"
+                class="c33"
                 tabindex="-1"
                 type="button"
               />
               <div
-                class="c31 c32 c33"
+                class="c34 c35 c36"
                 cursor="pointer"
                 spacing="2"
               >
                 <div
-                  class="c34"
+                  class="c37"
                 >
                   <svg
-                    class="c35"
+                    class="c38"
                     fill="none"
                     height="1.5rem"
                     viewBox="0 0 24 24"
@@ -1211,29 +1258,29 @@ exports[`BrowseStep renders and match snapshot 1`] = `
                   </svg>
                 </div>
                 <div
-                  class="c36 c37 c38"
+                  class="c39 c40 c41"
                   id="folder-1-1-title"
                   overflow="hidden"
                 >
                   <button
-                    class="c39 c40"
+                    class="c42 c43"
                     type="button"
                   >
                     <h2
-                      class="c41 c42"
+                      class="c44 c45"
                     >
                       <span
-                        class="c43 c44"
+                        class="c46 c47"
                       >
                         Folder 1
                         <div
-                          class="c45"
+                          class="c48"
                         >
                           :
                         </div>
                       </span>
                       <span
-                        class="c46 c44"
+                        class="c49 c47"
                       >
                         1 folder, 1 asset
                       </span>
@@ -1241,10 +1288,10 @@ exports[`BrowseStep renders and match snapshot 1`] = `
                   </button>
                 </div>
                 <div
-                  class="c47"
+                  class="c50"
                 >
                   <div
-                    class="c48 c49 c50 c51"
+                    class="c51 c52 c53 c54"
                     spacing="2"
                   />
                 </div>
@@ -1255,17 +1302,17 @@ exports[`BrowseStep renders and match snapshot 1`] = `
       </div>
     </div>
     <div
-      class="c52"
+      class="c55 c56"
     >
       <div
-        class="c20"
+        class="c17"
       >
         <div>
           <div
-            class="c53 c54"
+            class="c57 c58"
           >
             <div
-              class="c55 c56"
+              class="c59 c60"
             >
               <button
                 aria-disabled="false"
@@ -1273,21 +1320,21 @@ exports[`BrowseStep renders and match snapshot 1`] = `
                 aria-haspopup="listbox"
                 aria-label="Entries per page"
                 aria-labelledby="select-1-label select-1-content"
-                class="c57"
+                class="c61"
                 id="select-1"
                 type="button"
               />
               <div
-                class="c58 c59"
+                class="c62 c63"
               >
                 <div
-                  class="c55"
+                  class="c59"
                 >
                   <div
-                    class="c60"
+                    class="c64"
                   >
                     <span
-                      class="c61"
+                      class="c65"
                       id="select-1-content"
                     >
                       10
@@ -1295,11 +1342,11 @@ exports[`BrowseStep renders and match snapshot 1`] = `
                   </div>
                 </div>
                 <div
-                  class="c55"
+                  class="c59"
                 >
                   <button
                     aria-hidden="true"
-                    class="c62 c63 c64"
+                    class="c66 c67 c68"
                     tabindex="-1"
                     type="button"
                   >
@@ -1324,10 +1371,10 @@ exports[`BrowseStep renders and match snapshot 1`] = `
           </div>
         </div>
         <div
-          class="c65"
+          class="c69"
         >
           <label
-            class="c66"
+            class="c70"
             for="page-size"
           >
             Entries per page
@@ -1336,20 +1383,20 @@ exports[`BrowseStep renders and match snapshot 1`] = `
       </div>
       <nav
         aria-label="pagination"
-        class="sc-ivsNig"
+        class="sc-fMfAsl"
       >
         <ul
-          class="c20 c67"
+          class="c17 c71"
         >
           <li>
             <button
               aria-disabled="true"
-              class="c68 c69"
+              class="c72 c73"
               tabindex="-1"
               type="button"
             >
               <div
-                class="c45"
+                class="c48"
               >
                 Go to previous page
               </div>
@@ -1370,17 +1417,17 @@ exports[`BrowseStep renders and match snapshot 1`] = `
           </li>
           <li>
             <button
-              class="c70 c71"
+              class="c74 c75"
               type="button"
             >
               <div
-                class="c45"
+                class="c48"
               >
                 Go to page 1
               </div>
               <span
                 aria-hidden="true"
-                class="c72 c73"
+                class="c76 c77"
               >
                 1
               </span>
@@ -1389,12 +1436,12 @@ exports[`BrowseStep renders and match snapshot 1`] = `
           <li>
             <button
               aria-disabled="true"
-              class="c68 c69"
+              class="c72 c73"
               tabindex="-1"
               type="button"
             >
               <div
-                class="c45"
+                class="c48"
               >
                 Go to next page
               </div>
@@ -1418,7 +1465,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
     </div>
   </div>
   <div
-    class="c74"
+    class="c78"
   >
     <p
       aria-live="polite"
diff --git a/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/tests/index.test.js b/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/tests/index.test.js
index c16b7eda07..6dd4a07baf 100644
--- a/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/tests/index.test.js
+++ b/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/tests/index.test.js
@@ -2,7 +2,9 @@ import React from 'react';
 import { IntlProvider } from 'react-intl';
 import { ThemeProvider, lightTheme } from '@strapi/design-system';
 import { render, fireEvent, screen } from '@testing-library/react';
+import { NotificationsProvider } from '@strapi/helper-plugin';
 import { MemoryRouter } from 'react-router-dom';
+import { QueryClientProvider, QueryClient } from 'react-query';
 
 import { BrowseStep } from '..';
 
@@ -62,38 +64,50 @@ const FIXTURE_FOLDERS = [
   },
 ];
 
+const client = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+    },
+  },
+});
+
 const ComponentFixture = props => {
   return (
-    <ThemeProvider theme={lightTheme}>
-      <MemoryRouter>
-        <IntlProvider messages={{}} locale="en">
-          <BrowseStep
-            assets={[]}
-            canCreate
-            folders={FIXTURE_FOLDERS}
-            onAddAsset={jest.fn()}
-            onChangeFilters={jest.fn()}
-            onChangePage={jest.fn()}
-            onChangePageSize={jest.fn()}
-            onChangeSearch={jest.fn()}
-            onChangeSort={jest.fn()}
-            onChangeFolder={jest.fn()}
-            onEditAsset={jest.fn()}
-            onSelectAllAsset={jest.fn()}
-            onSelectAsset={jest.fn()}
-            pagination={{ pageCount: 1 }}
-            queryObject={{ page: 1, pageSize: 10, filters: { $and: [] } }}
-            selectedAssets={[]}
-            {...props}
-          />
-        </IntlProvider>
-      </MemoryRouter>
-    </ThemeProvider>
+    <QueryClientProvider client={client}>
+      <ThemeProvider theme={lightTheme}>
+        <MemoryRouter>
+          <IntlProvider messages={{}} locale="en">
+            <NotificationsProvider toggleNotification={() => {}}>
+              <BrowseStep
+                assets={[]}
+                canCreate
+                canRead
+                folders={FIXTURE_FOLDERS}
+                onAddAsset={jest.fn()}
+                onChangeFilters={jest.fn()}
+                onChangePage={jest.fn()}
+                onChangePageSize={jest.fn()}
+                onChangeSearch={jest.fn()}
+                onChangeSort={jest.fn()}
+                onChangeFolder={jest.fn()}
+                onEditAsset={jest.fn()}
+                onSelectAllAsset={jest.fn()}
+                onSelectAsset={jest.fn()}
+                pagination={{ pageCount: 1 }}
+                queryObject={{ page: 1, pageSize: 10, filters: { $and: [] } }}
+                selectedAssets={[]}
+                {...props}
+              />
+            </NotificationsProvider>
+          </IntlProvider>
+        </MemoryRouter>
+      </ThemeProvider>
+    </QueryClientProvider>
   );
 };
 
 const setup = props => render(<ComponentFixture {...props} />);
-
 describe('BrowseStep', () => {
   afterEach(() => {
     jest.clearAllMocks();
@@ -101,14 +115,12 @@ describe('BrowseStep', () => {
 
   it('renders and match snapshot', () => {
     const { container } = setup();
-
     expect(container).toMatchSnapshot();
   });
 
   it('calls onAddAsset callback', () => {
     const spy = jest.fn();
     const { getByText } = setup({ onAddAsset: spy, folders: [] });
-
     fireEvent.click(getByText('Add new assets'));
     expect(spy).toHaveBeenCalled();
   });
@@ -116,19 +128,16 @@ describe('BrowseStep', () => {
   it('calls onChangeFolder callback', () => {
     const spy = jest.fn();
     const { getByRole } = setup({ onChangeFolder: spy });
-
     fireEvent.click(
       getByRole('button', {
         name: /folder 1 : 1 folder, 1 asset/i,
       })
     );
-
     expect(spy).toHaveBeenCalled();
   });
 
   it('does display empty state upload first assets if no folder or assets', () => {
     setup({ folders: [], assets: [] });
-
     expect(screen.getByText('Upload your first assets...')).toBeInTheDocument();
   });
 
@@ -138,7 +147,6 @@ describe('BrowseStep', () => {
       assets: [],
       queryObject: { page: 1, pageSize: 10, filters: { $and: [] }, _q: 'true' },
     });
-
     expect(screen.getByText('There are no assets with the applied filters')).toBeInTheDocument();
   });
 
@@ -148,7 +156,6 @@ describe('BrowseStep', () => {
       assets: [],
       queryObject: { page: 1, pageSize: 10, filters: { $and: [{ mime: 'audio' }] }, _q: '' },
     });
-
     expect(screen.getByText('Filters')).toBeInTheDocument();
   });
 
@@ -158,7 +165,6 @@ describe('BrowseStep', () => {
       assets: FIXTURE_ASSETS,
       queryObject: { page: 1, pageSize: 10, filters: { $and: [] }, _q: 'true' },
     });
-
     expect(screen.queryByText('Assets')).not.toBeInTheDocument();
   });
 
@@ -166,7 +172,6 @@ describe('BrowseStep', () => {
     setup({
       queryObject: { page: 1, pageSize: 10, filters: { $and: [] }, _q: 'true' },
     });
-
     expect(screen.queryByText('Folders')).not.toBeInTheDocument();
   });
 
@@ -175,7 +180,7 @@ describe('BrowseStep', () => {
       assets: FIXTURE_ASSETS,
     });
 
-    expect(screen.getByText('Folders')).toBeInTheDocument();
-    expect(screen.getByText('Assets')).toBeInTheDocument();
+    expect(screen.getByText('Folders (1)')).toBeInTheDocument();
+    expect(screen.getByText('Assets (1)')).toBeInTheDocument();
   });
 });
diff --git a/packages/core/upload/admin/src/components/AssetDialog/DialogHeader.js b/packages/core/upload/admin/src/components/AssetDialog/DialogHeader.js
deleted file mode 100644
index 2c1726d011..0000000000
--- a/packages/core/upload/admin/src/components/AssetDialog/DialogHeader.js
+++ /dev/null
@@ -1,91 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
-import { Breadcrumbs, Crumb } from '@strapi/design-system/Breadcrumbs';
-import { ModalHeader } from '@strapi/design-system/ModalLayout';
-import { Stack } from '@strapi/design-system/Stack';
-import { Icon } from '@strapi/design-system/Icon';
-import ArrowLeft from '@strapi/icons/ArrowLeft';
-import { findRecursiveFolderMetadatas, getTrad } from '../../utils';
-import { useFolderStructure } from '../../hooks/useFolderStructure';
-
-const BackButton = styled.button`
-  height: ${({ theme }) => theme.spaces[4]};
-  color: ${({ theme }) => theme.colors.neutral500};
-
-  &:hover,
-  &:focus {
-    color: ${({ theme }) => theme.colors.neutral600};
-  }
-`;
-
-const BackIcon = styled(Icon)`
-  path {
-    fill: currentColor;
-  }
-`;
-
-export const DialogHeader = ({ currentFolder, onChangeFolder, canRead }) => {
-  const { formatMessage } = useIntl();
-
-  const { data, isLoading } = useFolderStructure({
-    enabled: canRead,
-  });
-
-  const folderMetadatas =
-    !isLoading && Array.isArray(data) && findRecursiveFolderMetadatas(data[0], currentFolder);
-  const folderLabel =
-    folderMetadatas?.currentFolderLabel &&
-    (folderMetadatas.currentFolderLabel.length > 60
-      ? `${folderMetadatas.currentFolderLabel.slice(0, 60)}...`
-      : folderMetadatas.currentFolderLabel);
-
-  return (
-    <ModalHeader>
-      <Stack horizontal spacing={4}>
-        {currentFolder && (
-          <BackButton
-            aria-label={formatMessage({ id: 'modal.header.go-back', defaultMessage: 'Go back' })}
-            type="button"
-            onClick={() => onChangeFolder(folderMetadatas?.parentId)}
-          >
-            <BackIcon height="100%" as={ArrowLeft} />
-          </BackButton>
-        )}
-        <Breadcrumbs
-          label={`${formatMessage({
-            id: getTrad('header.actions.add-assets'),
-            defaultMessage: 'Add new assets',
-          })}${
-            folderLabel
-              ? `, ${folderLabel} ${formatMessage({
-                  id: 'header.actions.add-assets.folder',
-                  defaultMessage: 'folder',
-                })}`
-              : ''
-          }`}
-        >
-          <Crumb>
-            {formatMessage({
-              id: getTrad('header.actions.add-assets'),
-              defaultMessage: 'Add new assets',
-            })}
-          </Crumb>
-          {folderLabel && <Crumb>{folderLabel}</Crumb>}
-        </Breadcrumbs>
-      </Stack>
-    </ModalHeader>
-  );
-};
-
-DialogHeader.defaultProps = {
-  currentFolder: undefined,
-  onChangeFolder: undefined,
-};
-
-DialogHeader.propTypes = {
-  canRead: PropTypes.bool.isRequired,
-  currentFolder: PropTypes.number,
-  onChangeFolder: PropTypes.func,
-};
diff --git a/packages/core/upload/admin/src/components/AssetDialog/index.js b/packages/core/upload/admin/src/components/AssetDialog/index.js
index f4d13c42cf..d27c7cadae 100644
--- a/packages/core/upload/admin/src/components/AssetDialog/index.js
+++ b/packages/core/upload/admin/src/components/AssetDialog/index.js
@@ -1,17 +1,17 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { ModalLayout, ModalBody } from '@strapi/design-system/ModalLayout';
+import { useIntl } from 'react-intl';
+import { ModalLayout, ModalBody, ModalHeader } from '@strapi/design-system/ModalLayout';
 import { Flex } from '@strapi/design-system/Flex';
 import { Button } from '@strapi/design-system/Button';
 import { Divider } from '@strapi/design-system/Divider';
-import { useIntl } from 'react-intl';
+import { Typography } from '@strapi/design-system/Typography';
 import { Tabs, Tab, TabGroup, TabPanels, TabPanel } from '@strapi/design-system/Tabs';
 import { Badge } from '@strapi/design-system/Badge';
 import { Loader } from '@strapi/design-system/Loader';
 import { Stack } from '@strapi/design-system/Stack';
 import { NoPermissions, AnErrorOccurred, useSelectionState, pxToRem } from '@strapi/helper-plugin';
-
 import { getTrad, containsAssetFilter } from '../../utils';
 import { SelectedStep } from './SelectedStep';
 import { BrowseStep } from './BrowseStep';
@@ -21,7 +21,6 @@ import { useFolders } from '../../hooks/useFolders';
 import useModalQueryParams from '../../hooks/useModalQueryParams';
 import { AssetDefinition } from '../../constants';
 import getAllowedFiles from '../../utils/getAllowedFiles';
-import { DialogHeader } from './DialogHeader';
 import { DialogFooter } from './DialogFooter';
 import { EditAssetDialog } from '../EditAssetDialog';
 import { moveElement } from '../../utils/moveElement';
@@ -55,6 +54,7 @@ export const AssetDialog = ({
     canCopyLink,
     canDownload,
   } = useMediaLibraryPermissions();
+
   const [
     { queryObject },
     {
@@ -66,11 +66,13 @@ export const AssetDialog = ({
       onChangeFolder: onChangeFolderParam,
     },
   ] = useModalQueryParams({ folder: folderId });
+
   const {
     data: { pagination, results: assets } = {},
     isLoading: isLoadingAssets,
     error: errorAssets,
   } = useAssets({ skipWhen: !canRead, query: queryObject });
+
   const { data: folders, isLoading: isLoadingFolders, error: errorFolders } = useFolders({
     enabled: canRead && !containsAssetFilter(queryObject) && pagination?.page === 1,
     query: queryObject,
@@ -84,6 +86,7 @@ export const AssetDialog = ({
   const [initialSelectedTabIndex, setInitialSelectedTabIndex] = useState(
     selectedAssets.length > 0 ? 1 : 0
   );
+
   const handleSelectAllAssets = () => {
     const hasAllAssets = assets.every(
       asset => selectedAssets.findIndex(curr => curr.id === asset.id) !== -1
@@ -97,6 +100,7 @@ export const AssetDialog = ({
 
     return multiple ? selectAll(allowedAssets) : undefined;
   };
+
   const handleSelectAsset = asset => {
     return multiple ? selectOne(asset) : selectOnly(asset);
   };
@@ -107,7 +111,14 @@ export const AssetDialog = ({
   if (isLoading) {
     return (
       <ModalLayout onClose={onClose} labelledBy="asset-dialog-title" aria-busy>
-        <DialogHeader canRead={canRead} />
+        <ModalHeader>
+          <Typography fontWeight="bold">
+            {formatMessage({
+              id: getTrad('header.actions.add-assets'),
+              defaultMessage: 'Add new assets',
+            })}
+          </Typography>
+        </ModalHeader>
         <LoadingBody justifyContent="center" paddingTop={4} paddingBottom={4}>
           <Loader>
             {formatMessage({
@@ -124,7 +135,14 @@ export const AssetDialog = ({
   if (hasError) {
     return (
       <ModalLayout onClose={onClose} labelledBy="asset-dialog-title">
-        <DialogHeader canRead={canRead} />
+        <ModalHeader>
+          <Typography fontWeight="bold">
+            {formatMessage({
+              id: getTrad('header.actions.add-assets'),
+              defaultMessage: 'Add new assets',
+            })}
+          </Typography>
+        </ModalHeader>
         <AnErrorOccurred />
         <DialogFooter onClose={onClose} />
       </ModalLayout>
@@ -134,7 +152,14 @@ export const AssetDialog = ({
   if (!canRead) {
     return (
       <ModalLayout onClose={onClose} labelledBy="asset-dialog-title">
-        <DialogHeader canRead={canRead} />
+        <ModalHeader fontWeight="bold">
+          <Typography>
+            {formatMessage({
+              id: getTrad('header.actions.add-assets'),
+              defaultMessage: 'Add new assets',
+            })}
+          </Typography>
+        </ModalHeader>
         <NoPermissions />
         <DialogFooter onClose={onClose} />
       </ModalLayout>
@@ -168,7 +193,6 @@ export const AssetDialog = ({
     const offset = destIndex - hoverIndex;
     const orderedAssetsClone = selectedAssets.slice();
     const nextAssets = moveElement(orderedAssetsClone, hoverIndex, offset);
-
     setSelections(nextAssets);
   };
 
@@ -179,11 +203,14 @@ export const AssetDialog = ({
 
   return (
     <ModalLayout onClose={onClose} labelledBy="asset-dialog-title" aria-busy={isLoading}>
-      <DialogHeader
-        currentFolder={queryObject?.folder}
-        onChangeFolder={handleFolderChange}
-        canRead={canRead}
-      />
+      <ModalHeader>
+        <Typography fontWeight="bold">
+          {formatMessage({
+            id: getTrad('header.actions.add-assets'),
+            defaultMessage: 'Add new assets',
+          })}
+        </Typography>
+      </ModalHeader>
 
       <TabGroup
         label={formatMessage({
@@ -210,7 +237,6 @@ export const AssetDialog = ({
               <Badge marginLeft={2}>{selectedAssets.length}</Badge>
             </Tab>
           </Tabs>
-
           <Stack horizontal spacing={2}>
             <Button
               variant="secondary"
@@ -221,7 +247,6 @@ export const AssetDialog = ({
                 defaultMessage: 'Add folder',
               })}
             </Button>
-
             <Button onClick={() => onAddAsset({ folderId: queryObject?.folder })}>
               {formatMessage({
                 id: getTrad('modal.upload-list.sub-header.button'),
@@ -238,6 +263,7 @@ export const AssetDialog = ({
                 allowedTypes={allowedTypes}
                 assets={assets}
                 canCreate={canCreate}
+                canRead={canRead}
                 folders={folders}
                 onSelectAsset={handleSelectAsset}
                 selectedAssets={selectedAssets}
@@ -268,7 +294,6 @@ export const AssetDialog = ({
           </TabPanel>
         </TabPanels>
       </TabGroup>
-
       <DialogFooter onClose={onClose} onValidate={() => onValidate(selectedAssets)} />
     </ModalLayout>
   );
diff --git a/packages/core/upload/admin/src/components/AssetDialog/tests/DialogHeader.test.js b/packages/core/upload/admin/src/components/AssetDialog/tests/DialogHeader.test.js
deleted file mode 100644
index 1cb6f66993..0000000000
--- a/packages/core/upload/admin/src/components/AssetDialog/tests/DialogHeader.test.js
+++ /dev/null
@@ -1,96 +0,0 @@
-import React from 'react';
-import { ThemeProvider, lightTheme } from '@strapi/design-system';
-import { IntlProvider } from 'react-intl';
-import { QueryClientProvider, QueryClient } from 'react-query';
-import { fireEvent, render, screen } from '@testing-library/react';
-import { useFolderStructure } from '../../../hooks/useFolderStructure';
-import { DialogHeader } from '../DialogHeader';
-
-jest.mock('../../../hooks/useFolderStructure');
-
-const setup = props => {
-  const withDefaults = {
-    canRead: true,
-    currentFolder: null,
-    onChangeFolder: jest.fn(),
-    ...props,
-  };
-
-  const queryClient = new QueryClient({
-    defaultOptions: {
-      queries: {
-        retry: false,
-        refetchOnWindowFocus: false,
-      },
-    },
-  });
-
-  return render(
-    <QueryClientProvider client={queryClient}>
-      <ThemeProvider theme={lightTheme}>
-        <IntlProvider locale="en" messages={{}}>
-          <DialogHeader {...withDefaults} />
-        </IntlProvider>
-      </ThemeProvider>
-    </QueryClientProvider>
-  );
-};
-
-describe('Upload || components || DialogHeader', () => {
-  it('should render folder name and back button', () => {
-    const handleChangeFolderSpy = jest.fn();
-    const { queryByText } = setup({ currentFolder: 2, onChangeFolder: handleChangeFolderSpy });
-
-    expect(queryByText('second child')).toBeInTheDocument();
-
-    const goBackButton = screen.getByLabelText('Go back');
-    expect(goBackButton).toBeInTheDocument();
-
-    fireEvent.click(goBackButton);
-    expect(handleChangeFolderSpy).toHaveBeenCalled();
-  });
-
-  it('should truncate long folder name', () => {
-    useFolderStructure.mockReturnValueOnce({
-      isLoading: false,
-      error: null,
-      data: [
-        {
-          value: null,
-          label: 'Media Library',
-          children: [
-            {
-              value: 1,
-              label: 'This is a really really long folder name that should be truncated',
-              children: [],
-            },
-          ],
-        },
-      ],
-    });
-    const { queryByText } = setup({ currentFolder: 1 });
-
-    expect(
-      queryByText('This is a really really long folder name that should be trun...')
-    ).toBeInTheDocument();
-  });
-
-  it('should not render folder name and back button if the current folder is root', () => {
-    const { queryByText } = setup();
-
-    expect(queryByText('Cats')).not.toBeInTheDocument();
-    expect(screen.queryByLabelText('Go back')).not.toBeInTheDocument();
-  });
-
-  it('should not attempt to fetch the folder structure, if the user does not have permissions', () => {
-    const spy = jest.fn().mockReturnValueOnce({
-      isLoading: false,
-      error: null,
-    });
-    useFolderStructure.mockImplementation(spy);
-
-    setup({ canRead: false });
-
-    expect(spy).toHaveBeenCalledWith({ enabled: false });
-  });
-});
diff --git a/packages/core/upload/admin/src/components/Breadcrumbs/Breadcrumbs.js b/packages/core/upload/admin/src/components/Breadcrumbs/Breadcrumbs.js
index 86448a6bd8..868a4dccef 100644
--- a/packages/core/upload/admin/src/components/Breadcrumbs/Breadcrumbs.js
+++ b/packages/core/upload/admin/src/components/Breadcrumbs/Breadcrumbs.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { NavLink } from 'react-router-dom';
 
 import {
@@ -9,7 +10,7 @@ import {
 import { CrumbSimpleMenuAsync } from './CrumbSimpleMenuAsync';
 import { BreadcrumbsDefinition } from '../../constants';
 
-export const Breadcrumbs = ({ breadcrumbs, ...props }) => (
+export const Breadcrumbs = ({ breadcrumbs, onChangeFolder, currentFolderId, ...props }) => (
   <BaseBreadcrumbs {...props}>
     {breadcrumbs.map((crumb, index) => {
       if (Array.isArray(crumb)) {
@@ -19,13 +20,23 @@ export const Breadcrumbs = ({ breadcrumbs, ...props }) => (
               .splice(index + 1, breadcrumbs.length - 1)
               .map(parent => parent.id)}
             key={`breadcrumb-${crumb?.id ?? 'menu'}`}
+            currentFolderId={currentFolderId}
+            onChangeFolder={onChangeFolder}
           />
         );
       }
 
-      if (crumb.href) {
+      const isCurrentFolderMediaLibrary = crumb.id === null && currentFolderId === undefined;
+
+      if (currentFolderId !== crumb.id && !isCurrentFolderMediaLibrary) {
         return (
-          <CrumbLink key={`breadcrumb-${crumb?.id ?? 'root'}`} as={NavLink} to={crumb.href}>
+          <CrumbLink
+            key={`breadcrumb-${crumb?.id ?? 'root'}`}
+            as={onChangeFolder ? 'button' : NavLink}
+            type={onChangeFolder && 'button'}
+            to={onChangeFolder ? undefined : crumb.href}
+            onClick={onChangeFolder && (() => onChangeFolder(crumb.id))}
+          >
             {crumb.label}
           </CrumbLink>
         );
@@ -43,6 +54,13 @@ export const Breadcrumbs = ({ breadcrumbs, ...props }) => (
   </BaseBreadcrumbs>
 );
 
+Breadcrumbs.defaultProps = {
+  currentFolderId: undefined,
+  onChangeFolder: undefined,
+};
+
 Breadcrumbs.propTypes = {
   breadcrumbs: BreadcrumbsDefinition.isRequired,
+  currentFolderId: PropTypes.number,
+  onChangeFolder: PropTypes.func,
 };
diff --git a/packages/core/upload/admin/src/components/Breadcrumbs/CrumbSimpleMenuAsync.js b/packages/core/upload/admin/src/components/Breadcrumbs/CrumbSimpleMenuAsync.js
index 75e01fe59e..80e5b57d1b 100644
--- a/packages/core/upload/admin/src/components/Breadcrumbs/CrumbSimpleMenuAsync.js
+++ b/packages/core/upload/admin/src/components/Breadcrumbs/CrumbSimpleMenuAsync.js
@@ -2,7 +2,6 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { NavLink, useLocation } from 'react-router-dom';
 import { useIntl } from 'react-intl';
-
 import { useQueryParams } from '@strapi/helper-plugin';
 import { CrumbSimpleMenu } from '@strapi/design-system/v2/Breadcrumbs';
 import { MenuItem } from '@strapi/design-system/v2/SimpleMenu';
@@ -10,14 +9,14 @@ import { Loader } from '@strapi/design-system/Loader';
 import { useFolderStructure } from '../../hooks/useFolderStructure';
 import { getFolderParents, getFolderURL, getTrad } from '../../utils';
 
-export const CrumbSimpleMenuAsync = ({ parentsToOmit }) => {
+export const CrumbSimpleMenuAsync = ({ parentsToOmit, currentFolderId, onChangeFolder }) => {
   const [shouldFetch, setShouldFetch] = useState(false);
   const { data, isLoading } = useFolderStructure({ enabled: shouldFetch });
   const { pathname } = useLocation();
   const [{ query }] = useQueryParams();
   const { formatMessage } = useIntl();
 
-  const allAscendants = data && getFolderParents(data, Number(query?.folder));
+  const allAscendants = data && getFolderParents(data, currentFolderId);
   const filteredAscendants =
     allAscendants &&
     allAscendants.filter(
@@ -46,6 +45,19 @@ export const CrumbSimpleMenuAsync = ({ parentsToOmit }) => {
       )}
       {filteredAscendants &&
         filteredAscendants.map(ascendant => {
+          if (onChangeFolder) {
+            return (
+              <MenuItem
+                as="button"
+                type="button"
+                onClick={() => onChangeFolder(ascendant.id)}
+                key={ascendant.id}
+              >
+                {ascendant.label}
+              </MenuItem>
+            );
+          }
+
           const url = getFolderURL(pathname, query, ascendant);
 
           return (
@@ -59,9 +71,13 @@ export const CrumbSimpleMenuAsync = ({ parentsToOmit }) => {
 };
 
 CrumbSimpleMenuAsync.defaultProps = {
+  currentFolderId: undefined,
+  onChangeFolder: undefined,
   parentsToOmit: [],
 };
 
 CrumbSimpleMenuAsync.propTypes = {
+  currentFolderId: PropTypes.number,
+  onChangeFolder: PropTypes.func,
   parentsToOmit: PropTypes.arrayOf(PropTypes.number),
 };
diff --git a/packages/core/upload/admin/src/components/Breadcrumbs/tests/index.test.js b/packages/core/upload/admin/src/components/Breadcrumbs/tests/index.test.js
index 65e52017ae..32ce79bfef 100644
--- a/packages/core/upload/admin/src/components/Breadcrumbs/tests/index.test.js
+++ b/packages/core/upload/admin/src/components/Breadcrumbs/tests/index.test.js
@@ -49,7 +49,7 @@ const setup = props =>
 
 describe('Media Library | Breadcrumbs', () => {
   test('should render and match snapshot', () => {
-    const { container } = setup();
+    const { container } = setup({ currentFolderId: 22 });
 
     expect(container.querySelector('nav')).toBeInTheDocument();
     expect(screen.getByText('parent folder')).toBeInTheDocument();
@@ -59,7 +59,7 @@ describe('Media Library | Breadcrumbs', () => {
   });
 
   test('should store other ascendants in simple menu', async () => {
-    const { getByRole } = setup();
+    const { getByRole } = setup({ currentFolderId: 22 });
 
     const simpleMenuButton = getByRole('button', { name: /get more ascendants folders/i });
     fireEvent.mouseDown(simpleMenuButton);
diff --git a/packages/core/upload/admin/src/pages/App/MediaLibrary.js b/packages/core/upload/admin/src/pages/App/MediaLibrary.js
index 09b4709a07..ac2f4d5fae 100644
--- a/packages/core/upload/admin/src/pages/App/MediaLibrary.js
+++ b/packages/core/upload/admin/src/pages/App/MediaLibrary.js
@@ -33,7 +33,7 @@ import { FolderList } from '../../components/FolderList';
 import SortPicker from '../../components/SortPicker';
 import { useAssets } from '../../hooks/useAssets';
 import { useFolders } from '../../hooks/useFolders';
-import { getTrad, containsAssetFilter, getBreadcrumbData, getFolderURL } from '../../utils';
+import { getTrad, containsAssetFilter, getBreadcrumbDataML, getFolderURL } from '../../utils';
 import { PaginationFooter } from '../../components/PaginationFooter';
 import { useMediaLibraryPermissions } from '../../hooks/useMediaLibraryPermissions';
 import { useFolder } from '../../hooks/useFolder';
@@ -151,7 +151,7 @@ export const MediaLibrary = () => {
       <Main aria-busy={isLoading}>
         <Header
           breadcrumbs={
-            !isCurrentFolderLoading && getBreadcrumbData(currentFolder, { pathname, query })
+            !isCurrentFolderLoading && getBreadcrumbDataML(currentFolder, { pathname, query })
           }
           canCreate={canCreate}
           onToggleEditFolderDialog={toggleEditFolderDialog}
diff --git a/packages/core/upload/admin/src/pages/App/components/Header.js b/packages/core/upload/admin/src/pages/App/components/Header.js
index b87fd63c57..afb68dfcae 100644
--- a/packages/core/upload/admin/src/pages/App/components/Header.js
+++ b/packages/core/upload/admin/src/pages/App/components/Header.js
@@ -17,9 +17,9 @@ import { Breadcrumbs } from '../../../components/Breadcrumbs';
 export const Header = ({
   breadcrumbs,
   canCreate,
+  folder,
   onToggleEditFolderDialog,
   onToggleUploadAssetDialog,
-  folder,
 }) => {
   const { formatMessage } = useIntl();
   const { pathname } = useLocation();
@@ -45,6 +45,7 @@ export const Header = ({
               defaultMessage: 'Folders navigation',
             })}
             breadcrumbs={breadcrumbs}
+            currentFolderId={folder?.id}
           />
         )
       }
diff --git a/packages/core/upload/admin/src/utils/getBreadcrumbDataCM.js b/packages/core/upload/admin/src/utils/getBreadcrumbDataCM.js
new file mode 100644
index 0000000000..6ca26c1698
--- /dev/null
+++ b/packages/core/upload/admin/src/utils/getBreadcrumbDataCM.js
@@ -0,0 +1,30 @@
+const getBreadcrumbDataML = folder => {
+  let data = [
+    {
+      id: null,
+      label: 'Media Library',
+    },
+  ];
+
+  if (folder?.parent?.parent) {
+    data.push([]);
+  }
+
+  if (folder?.parent) {
+    data.push({
+      id: folder.parent.id,
+      label: folder.parent.name,
+    });
+  }
+
+  if (folder) {
+    data.push({
+      id: folder.id,
+      label: folder.name,
+    });
+  }
+
+  return data;
+};
+
+export default getBreadcrumbDataML;
diff --git a/packages/core/upload/admin/src/utils/getBreadcrumbData.js b/packages/core/upload/admin/src/utils/getBreadcrumbDataML.js
similarity index 84%
rename from packages/core/upload/admin/src/utils/getBreadcrumbData.js
rename to packages/core/upload/admin/src/utils/getBreadcrumbDataML.js
index 1f3f737b8c..f653145d42 100644
--- a/packages/core/upload/admin/src/utils/getBreadcrumbData.js
+++ b/packages/core/upload/admin/src/utils/getBreadcrumbDataML.js
@@ -1,6 +1,6 @@
 import getFolderURL from './getFolderURL';
 
-const getBreadcrumbData = (folder, { pathname, query }) => {
+const getBreadcrumbDataML = (folder, { pathname, query }) => {
   let data = [
     {
       id: null,
@@ -31,4 +31,4 @@ const getBreadcrumbData = (folder, { pathname, query }) => {
   return data;
 };
 
-export default getBreadcrumbData;
+export default getBreadcrumbDataML;
diff --git a/packages/core/upload/admin/src/utils/index.js b/packages/core/upload/admin/src/utils/index.js
index a46dde72dd..94fe1b40ec 100644
--- a/packages/core/upload/admin/src/utils/index.js
+++ b/packages/core/upload/admin/src/utils/index.js
@@ -5,7 +5,8 @@ export { default as getTrad } from './getTrad';
 export { default as findRecursiveFolderByValue } from './findRecursiveFolderByValue';
 export { default as findRecursiveFolderMetadatas } from './findRecursiveFolderMetadatas';
 export { default as containsAssetFilter } from './containsAssetFilter';
-export { default as getBreadcrumbData } from './getBreadcrumbData';
+export { default as getBreadcrumbDataML } from './getBreadcrumbDataML';
+export { default as getBreadcrumbDataCM } from './getBreadcrumbDataCM';
 export { default as getFolderURL } from './getFolderURL';
 export { default as getFolderParents } from './getFolderParents';
 export * from './formatDuration';
diff --git a/packages/core/upload/admin/src/utils/tests/getBreadcrumbData.test.js b/packages/core/upload/admin/src/utils/tests/getBreadcrumbDataCM.test.js
similarity index 85%
rename from packages/core/upload/admin/src/utils/tests/getBreadcrumbData.test.js
rename to packages/core/upload/admin/src/utils/tests/getBreadcrumbDataCM.test.js
index c5e8c84eee..0506effa1e 100644
--- a/packages/core/upload/admin/src/utils/tests/getBreadcrumbData.test.js
+++ b/packages/core/upload/admin/src/utils/tests/getBreadcrumbDataCM.test.js
@@ -1,4 +1,4 @@
-import { getBreadcrumbData } from '..';
+import { getBreadcrumbDataML } from '..';
 
 const FIXTURE_PATHNAME = '/media-library';
 const FIXTURE_QUERY = {
@@ -10,10 +10,10 @@ const FIXTURE_FOLDER = {
   name: 'first-level',
 };
 
-describe('getBreadcrumData', () => {
+describe('getBreadcrumbDataML', () => {
   test('return one item at the root of the media library', () => {
     expect(
-      getBreadcrumbData(null, { pathname: FIXTURE_PATHNAME, query: FIXTURE_QUERY })
+      getBreadcrumbDataML(null, { pathname: FIXTURE_PATHNAME, query: FIXTURE_QUERY })
     ).toStrictEqual([
       {
         href: undefined,
@@ -25,7 +25,7 @@ describe('getBreadcrumData', () => {
 
   test('returns two items for the first level of the media library', () => {
     expect(
-      getBreadcrumbData(FIXTURE_FOLDER, { pathname: FIXTURE_PATHNAME, query: FIXTURE_QUERY })
+      getBreadcrumbDataML(FIXTURE_FOLDER, { pathname: FIXTURE_PATHNAME, query: FIXTURE_QUERY })
     ).toStrictEqual([
       {
         href: '/media-library?some=thing',
@@ -42,7 +42,7 @@ describe('getBreadcrumData', () => {
 
   test('returns three items for the second level of the media library', () => {
     expect(
-      getBreadcrumbData(
+      getBreadcrumbDataML(
         { ...FIXTURE_FOLDER, parent: { id: 2, name: 'second-level' } },
         { pathname: FIXTURE_PATHNAME, query: FIXTURE_QUERY }
       )
@@ -68,7 +68,7 @@ describe('getBreadcrumData', () => {
 
   test('returns four items for the third level of the media library', () => {
     expect(
-      getBreadcrumbData(
+      getBreadcrumbDataML(
         {
           ...FIXTURE_FOLDER,
           parent: { id: 2, name: 'second-level', parent: { id: 3, name: 'third-level' } },

From c8242300927e92a4aaccf20f63a892cbf8039066 Mon Sep 17 00:00:00 2001
From: Julie Plantey <julie.plantey@gmail.com>
Date: Mon, 1 Aug 2022 12:05:18 +0200
Subject: [PATCH 6/9] added test for getBreadcrumbDataCM

---
 .../utils/tests/getBreadcrumbDataCM.test.js   | 43 ++------
 .../utils/tests/getBreadcrumbDataML.test.js   | 99 +++++++++++++++++++
 2 files changed, 108 insertions(+), 34 deletions(-)
 create mode 100644 packages/core/upload/admin/src/utils/tests/getBreadcrumbDataML.test.js

diff --git a/packages/core/upload/admin/src/utils/tests/getBreadcrumbDataCM.test.js b/packages/core/upload/admin/src/utils/tests/getBreadcrumbDataCM.test.js
index 0506effa1e..6d03bfa3f2 100644
--- a/packages/core/upload/admin/src/utils/tests/getBreadcrumbDataCM.test.js
+++ b/packages/core/upload/admin/src/utils/tests/getBreadcrumbDataCM.test.js
@@ -1,22 +1,14 @@
-import { getBreadcrumbDataML } from '..';
+import { getBreadcrumbDataCM } from '..';
 
-const FIXTURE_PATHNAME = '/media-library';
-const FIXTURE_QUERY = {
-  _q: 'search',
-  some: 'thing',
-};
 const FIXTURE_FOLDER = {
   id: 1,
   name: 'first-level',
 };
 
-describe('getBreadcrumbDataML', () => {
+describe('getBreadcrumbDataCM', () => {
   test('return one item at the root of the media library', () => {
-    expect(
-      getBreadcrumbDataML(null, { pathname: FIXTURE_PATHNAME, query: FIXTURE_QUERY })
-    ).toStrictEqual([
+    expect(getBreadcrumbDataCM(null)).toStrictEqual([
       {
-        href: undefined,
         id: null,
         label: 'Media Library',
       },
@@ -24,15 +16,11 @@ describe('getBreadcrumbDataML', () => {
   });
 
   test('returns two items for the first level of the media library', () => {
-    expect(
-      getBreadcrumbDataML(FIXTURE_FOLDER, { pathname: FIXTURE_PATHNAME, query: FIXTURE_QUERY })
-    ).toStrictEqual([
+    expect(getBreadcrumbDataCM(FIXTURE_FOLDER)).toStrictEqual([
       {
-        href: '/media-library?some=thing',
         id: null,
         label: 'Media Library',
       },
-
       {
         id: 1,
         label: 'first-level',
@@ -42,21 +30,16 @@ describe('getBreadcrumbDataML', () => {
 
   test('returns three items for the second level of the media library', () => {
     expect(
-      getBreadcrumbDataML(
-        { ...FIXTURE_FOLDER, parent: { id: 2, name: 'second-level' } },
-        { pathname: FIXTURE_PATHNAME, query: FIXTURE_QUERY }
-      )
+      getBreadcrumbDataCM({ ...FIXTURE_FOLDER, parent: { id: 2, name: 'second-level' } })
     ).toStrictEqual([
       {
         id: null,
         label: 'Media Library',
-        href: '/media-library?some=thing',
       },
 
       {
         id: 2,
         label: 'second-level',
-        href: '/media-library?some=thing&folder=2',
       },
 
       {
@@ -68,28 +51,20 @@ describe('getBreadcrumbDataML', () => {
 
   test('returns four items for the third level of the media library', () => {
     expect(
-      getBreadcrumbDataML(
-        {
-          ...FIXTURE_FOLDER,
-          parent: { id: 2, name: 'second-level', parent: { id: 3, name: 'third-level' } },
-        },
-        { pathname: FIXTURE_PATHNAME, query: FIXTURE_QUERY }
-      )
+      getBreadcrumbDataCM({
+        ...FIXTURE_FOLDER,
+        parent: { id: 2, name: 'second-level', parent: { id: 3, name: 'third-level' } },
+      })
     ).toStrictEqual([
       {
         id: null,
         label: 'Media Library',
-        href: '/media-library?some=thing',
       },
-
       [],
-
       {
         id: 2,
         label: 'second-level',
-        href: '/media-library?some=thing&folder=2',
       },
-
       {
         id: 1,
         label: 'first-level',
diff --git a/packages/core/upload/admin/src/utils/tests/getBreadcrumbDataML.test.js b/packages/core/upload/admin/src/utils/tests/getBreadcrumbDataML.test.js
new file mode 100644
index 0000000000..0506effa1e
--- /dev/null
+++ b/packages/core/upload/admin/src/utils/tests/getBreadcrumbDataML.test.js
@@ -0,0 +1,99 @@
+import { getBreadcrumbDataML } from '..';
+
+const FIXTURE_PATHNAME = '/media-library';
+const FIXTURE_QUERY = {
+  _q: 'search',
+  some: 'thing',
+};
+const FIXTURE_FOLDER = {
+  id: 1,
+  name: 'first-level',
+};
+
+describe('getBreadcrumbDataML', () => {
+  test('return one item at the root of the media library', () => {
+    expect(
+      getBreadcrumbDataML(null, { pathname: FIXTURE_PATHNAME, query: FIXTURE_QUERY })
+    ).toStrictEqual([
+      {
+        href: undefined,
+        id: null,
+        label: 'Media Library',
+      },
+    ]);
+  });
+
+  test('returns two items for the first level of the media library', () => {
+    expect(
+      getBreadcrumbDataML(FIXTURE_FOLDER, { pathname: FIXTURE_PATHNAME, query: FIXTURE_QUERY })
+    ).toStrictEqual([
+      {
+        href: '/media-library?some=thing',
+        id: null,
+        label: 'Media Library',
+      },
+
+      {
+        id: 1,
+        label: 'first-level',
+      },
+    ]);
+  });
+
+  test('returns three items for the second level of the media library', () => {
+    expect(
+      getBreadcrumbDataML(
+        { ...FIXTURE_FOLDER, parent: { id: 2, name: 'second-level' } },
+        { pathname: FIXTURE_PATHNAME, query: FIXTURE_QUERY }
+      )
+    ).toStrictEqual([
+      {
+        id: null,
+        label: 'Media Library',
+        href: '/media-library?some=thing',
+      },
+
+      {
+        id: 2,
+        label: 'second-level',
+        href: '/media-library?some=thing&folder=2',
+      },
+
+      {
+        id: 1,
+        label: 'first-level',
+      },
+    ]);
+  });
+
+  test('returns four items for the third level of the media library', () => {
+    expect(
+      getBreadcrumbDataML(
+        {
+          ...FIXTURE_FOLDER,
+          parent: { id: 2, name: 'second-level', parent: { id: 3, name: 'third-level' } },
+        },
+        { pathname: FIXTURE_PATHNAME, query: FIXTURE_QUERY }
+      )
+    ).toStrictEqual([
+      {
+        id: null,
+        label: 'Media Library',
+        href: '/media-library?some=thing',
+      },
+
+      [],
+
+      {
+        id: 2,
+        label: 'second-level',
+        href: '/media-library?some=thing&folder=2',
+      },
+
+      {
+        id: 1,
+        label: 'first-level',
+      },
+    ]);
+  });
+});

From 9fa0adeb8e2fc6169164ae33f82232c99a3dadee Mon Sep 17 00:00:00 2001
From: Julie Plantey <julie.plantey@gmail.com>
Date: Mon, 1 Aug 2022 15:41:56 +0200
Subject: [PATCH 7/9] feedback fixes

---
 .../AssetDialog/BrowseStep/index.js           |   2 +-
 .../tests/__snapshots__/index.test.js.snap    | 359 ++++++++++--------
 .../BrowseStep/tests/index.test.js            |  15 +
 3 files changed, 226 insertions(+), 150 deletions(-)

diff --git a/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/index.js b/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/index.js
index 26beec4ecd..0301688af3 100644
--- a/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/index.js
+++ b/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/index.js
@@ -142,7 +142,7 @@ export const BrowseStep = ({
         </Box>
       )}
 
-      {canRead && !isCurrentFolderLoading && (
+      {canRead && breadcrumbs?.length > 0 && (
         <Box paddingTop={3}>
           <Breadcrumbs
             onChangeFolder={onChangeFolder}
diff --git a/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/tests/__snapshots__/index.test.js.snap b/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/tests/__snapshots__/index.test.js.snap
index faa5f1ef33..e5684f1979 100644
--- a/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/tests/__snapshots__/index.test.js.snap
+++ b/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/tests/__snapshots__/index.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`BrowseStep renders and match snapshot 1`] = `
-.c78 {
+.c80 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -17,16 +17,16 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   padding-top: 12px;
 }
 
-.c28 {
+.c30 {
   padding-top: 8px;
   padding-bottom: 8px;
 }
 
-.c32 {
+.c34 {
   position: relative;
 }
 
-.c37 {
+.c39 {
   background: #eaf5ff;
   color: #66b7f1;
   padding-top: 8px;
@@ -36,12 +36,12 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   border-radius: 4px;
 }
 
-.c42 {
+.c44 {
   padding: 4px;
   max-width: 100%;
 }
 
-.c69 {
+.c71 {
   padding-left: 8px;
 }
 
@@ -190,17 +190,17 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   fill: #32324d;
 }
 
-.c39 {
+.c41 {
   position: relative;
   overflow: hidden;
   max-width: 100%;
 }
 
-.c44 {
+.c46 {
   max-width: 100%;
 }
 
-.c55 {
+.c57 {
   padding-top: 16px;
 }
 
@@ -253,7 +253,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   flex-direction: row;
 }
 
-.c40 {
+.c42 {
   -webkit-align-items: flex-start;
   -webkit-box-align: flex-start;
   -ms-flex-align: flex-start;
@@ -267,7 +267,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   flex-direction: column;
 }
 
-.c45 {
+.c47 {
   -webkit-align-items: start;
   -webkit-box-align: start;
   -ms-flex-align: start;
@@ -281,7 +281,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   flex-direction: column;
 }
 
-.c56 {
+.c58 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -397,7 +397,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   fill: #666687;
 }
 
-.c61 {
+.c63 {
   position: absolute;
   left: 0;
   right: 0;
@@ -408,24 +408,24 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   border: none;
 }
 
-.c61:focus {
+.c63:focus {
   outline: none;
 }
 
-.c61[aria-disabled='true'] {
+.c63[aria-disabled='true'] {
   cursor: not-allowed;
 }
 
-.c64 {
+.c66 {
   padding-right: 16px;
   padding-left: 16px;
 }
 
-.c66 {
+.c68 {
   padding-left: 12px;
 }
 
-.c57 {
+.c59 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
   -ms-flex-align: stretch;
@@ -439,7 +439,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   flex-direction: column;
 }
 
-.c59 {
+.c61 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -453,7 +453,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   flex-direction: row;
 }
 
-.c62 {
+.c64 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -471,7 +471,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   justify-content: space-between;
 }
 
-.c65 {
+.c67 {
   color: #32324d;
   display: block;
   white-space: nowrap;
@@ -481,12 +481,12 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   line-height: 1.43;
 }
 
-.c58 > * {
+.c60 > * {
   margin-top: 0;
   margin-bottom: 0;
 }
 
-.c60 {
+.c62 {
   position: relative;
   border: 1px solid #dcdce4;
   padding-right: 12px;
@@ -502,28 +502,28 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   transition-duration: 0.2s;
 }
 
-.c60:focus-within {
+.c62:focus-within {
   border: 1px solid #4945ff;
   box-shadow: #4945ff 0px 0px 0px 2px;
 }
 
-.c67 {
+.c69 {
   background: transparent;
   border: none;
   position: relative;
   z-index: 1;
 }
 
-.c67 svg {
+.c69 svg {
   height: 0.6875rem;
   width: 0.6875rem;
 }
 
-.c67 svg path {
+.c69 svg path {
   fill: #666687;
 }
 
-.c68 {
+.c70 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -532,15 +532,15 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   border: none;
 }
 
-.c68 svg {
+.c70 svg {
   width: 0.375rem;
 }
 
-.c63 {
+.c65 {
   width: 100%;
 }
 
-.c34 {
+.c36 {
   background: #ffffff;
   padding: 12px;
   border-radius: 4px;
@@ -552,7 +552,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   cursor: pointer;
 }
 
-.c35 {
+.c37 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -566,16 +566,16 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   flex-direction: row;
 }
 
-.c36 > * {
+.c38 > * {
   margin-left: 0;
   margin-right: 0;
 }
 
-.c36 > * + * {
+.c38 > * + * {
   margin-left: 8px;
 }
 
-.c29 {
+.c31 {
   font-weight: 500;
   color: #32324d;
   font-weight: 500;
@@ -583,7 +583,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   line-height: 1.25;
 }
 
-.c46 {
+.c48 {
   font-weight: 500;
   color: #32324d;
   display: block;
@@ -594,7 +594,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   line-height: 1.43;
 }
 
-.c49 {
+.c51 {
   color: #666687;
   display: block;
   white-space: nowrap;
@@ -604,20 +604,20 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   line-height: 1.33;
 }
 
-.c70 {
+.c72 {
   color: #666687;
   font-size: 0.875rem;
   line-height: 1.43;
 }
 
-.c76 {
+.c78 {
   font-weight: 600;
   color: #32324d;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
-.c48 {
+.c50 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -629,22 +629,22 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   width: 1px;
 }
 
-.c30 {
+.c32 {
   display: grid;
   grid-template-columns: repeat(12,1fr);
   gap: 16px;
 }
 
-.c31 {
+.c33 {
   grid-column: span 3;
   max-width: 100%;
 }
 
-.c51 {
+.c53 {
   right: 16px;
 }
 
-.c52 {
+.c54 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -658,16 +658,16 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   flex-direction: row;
 }
 
-.c53 > * {
+.c55 > * {
   margin-left: 0;
   margin-right: 0;
 }
 
-.c53 > * + * {
+.c55 > * + * {
   margin-left: 8px;
 }
 
-.c54 {
+.c56 {
   position: absolute;
   top: 12px;
 }
@@ -678,12 +678,33 @@ exports[`BrowseStep renders and match snapshot 1`] = `
 }
 
 .c27 {
-  font-weight: 600;
   color: #32324d;
   font-size: 0.75rem;
   line-height: 1.33;
 }
 
+.c28 {
+  color: #8e8ea9;
+  font-size: 0.75rem;
+  line-height: 1.33;
+}
+
+.c29 {
+  border-radius: 4px;
+  color: #666687;
+  font-size: 0.75rem;
+  line-height: 1.43;
+  padding: 4px 8px;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c29:hover,
+.c29:focus {
+  background-color: #f6f6f9;
+  color: #4a4a6a;
+}
+
 .c23 {
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -873,7 +894,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   width: 6px;
 }
 
-.c33 {
+.c35 {
   height: 100%;
   left: 0;
   position: absolute;
@@ -882,87 +903,43 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   width: 100%;
 }
 
-.c33:hover,
-.c33:focus {
+.c35:hover,
+.c35:focus {
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.c38 path {
+.c40 path {
   fill: currentColor;
 }
 
-.c50 {
+.c52 {
   display: none;
 }
 
-.c41 {
+.c43 {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
 }
 
-.c43:focus {
+.c45:focus {
   outline: 2px solid #4945ff;
   outline-offset: -2px;
 }
 
-.c71 > * + * {
+.c73 > * + * {
   margin-left: 4px;
 }
 
-.c77 {
+.c79 {
   line-height: revert;
 }
 
-.c72 {
-  padding: 12px;
-  border-radius: 4px;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  position: relative;
-  outline: none;
-}
-
-.c72:after {
-  -webkit-transition-property: all;
-  transition-property: all;
-  -webkit-transition-duration: 0.2s;
-  transition-duration: 0.2s;
-  border-radius: 8px;
-  content: '';
-  position: absolute;
-  top: -4px;
-  bottom: -4px;
-  left: -4px;
-  right: -4px;
-  border: 2px solid transparent;
-}
-
-.c72:focus-visible {
-  outline: none;
-}
-
-.c72:focus-visible:after {
-  border-radius: 8px;
-  content: '';
-  position: absolute;
-  top: -5px;
-  bottom: -5px;
-  left: -5px;
-  right: -5px;
-  border: 2px solid #4945ff;
-}
-
 .c74 {
   padding: 12px;
   border-radius: 4px;
-  box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
   -webkit-text-decoration: none;
   text-decoration: none;
   display: -webkit-box;
@@ -1003,26 +980,70 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   border: 2px solid #4945ff;
 }
 
-.c75 {
+.c76 {
+  padding: 12px;
+  border-radius: 4px;
+  box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+  outline: none;
+}
+
+.c76:after {
+  -webkit-transition-property: all;
+  transition-property: all;
+  -webkit-transition-duration: 0.2s;
+  transition-duration: 0.2s;
+  border-radius: 8px;
+  content: '';
+  position: absolute;
+  top: -4px;
+  bottom: -4px;
+  left: -4px;
+  right: -4px;
+  border: 2px solid transparent;
+}
+
+.c76:focus-visible {
+  outline: none;
+}
+
+.c76:focus-visible:after {
+  border-radius: 8px;
+  content: '';
+  position: absolute;
+  top: -5px;
+  bottom: -5px;
+  left: -5px;
+  right: -5px;
+  border: 2px solid #4945ff;
+}
+
+.c77 {
   color: #271fe0;
   background: #ffffff;
 }
 
-.c75:hover {
+.c77:hover {
   box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
 }
 
-.c73 {
+.c75 {
   font-size: 0.7rem;
   pointer-events: none;
 }
 
-.c73 svg path {
+.c75 svg path {
   fill: #c0c0cf;
 }
 
-.c73:focus svg path,
-.c73:hover svg path {
+.c75:focus svg path,
+.c75:hover svg path {
   fill: #c0c0cf;
 }
 
@@ -1044,18 +1065,18 @@ exports[`BrowseStep renders and match snapshot 1`] = `
   flex-shrink: 0;
 }
 
-.c47 {
+.c49 {
   max-width: 100%;
 }
 
 @media (max-width:68.75rem) {
-  .c31 {
+  .c33 {
     grid-column: span;
   }
 }
 
 @media (max-width:34.375rem) {
-  .c31 {
+  .c33 {
     grid-column: span;
   }
 }
@@ -1193,12 +1214,52 @@ exports[`BrowseStep renders and match snapshot 1`] = `
               class="c26"
             >
               <span
-                aria-current="true"
+                aria-current="false"
                 class="c27"
               >
                 Media Library
               </span>
             </div>
+            <div
+              aria-hidden="true"
+              class="c26"
+            >
+              <span
+                class="c28"
+              >
+                /
+              </span>
+            </div>
+          </li>
+          <li
+            class="c25"
+          >
+            <button
+              class="c29"
+              type="button"
+            >
+              Folder 2
+            </button>
+            <div
+              aria-hidden="true"
+              class="c26"
+            >
+              <span
+                class="c28"
+              >
+                /
+              </span>
+            </div>
+          </li>
+          <li
+            class="c25"
+          >
+            <button
+              class="c29"
+              type="button"
+            >
+              Folder 1
+            </button>
           </li>
         </ol>
       </nav>
@@ -1207,44 +1268,44 @@ exports[`BrowseStep renders and match snapshot 1`] = `
       class=""
     >
       <div
-        class="c28"
+        class="c30"
       >
         <h2
-          class="c29"
+          class="c31"
         >
           Folders (1)
         </h2>
       </div>
       <div
-        class="c30"
+        class="c32"
       >
         <div
-          class="c31"
+          class="c33"
         >
           <div
             class=""
           >
             <div
-              class="c32 "
+              class="c34 "
               tabindex="0"
             >
               <button
                 aria-hidden="true"
                 aria-label="Folder 1"
-                class="c33"
+                class="c35"
                 tabindex="-1"
                 type="button"
               />
               <div
-                class="c34 c35 c36"
+                class="c36 c37 c38"
                 cursor="pointer"
                 spacing="2"
               >
                 <div
-                  class="c37"
+                  class="c39"
                 >
                   <svg
-                    class="c38"
+                    class="c40"
                     fill="none"
                     height="1.5rem"
                     viewBox="0 0 24 24"
@@ -1258,29 +1319,29 @@ exports[`BrowseStep renders and match snapshot 1`] = `
                   </svg>
                 </div>
                 <div
-                  class="c39 c40 c41"
+                  class="c41 c42 c43"
                   id="folder-1-1-title"
                   overflow="hidden"
                 >
                   <button
-                    class="c42 c43"
+                    class="c44 c45"
                     type="button"
                   >
                     <h2
-                      class="c44 c45"
+                      class="c46 c47"
                     >
                       <span
-                        class="c46 c47"
+                        class="c48 c49"
                       >
                         Folder 1
                         <div
-                          class="c48"
+                          class="c50"
                         >
                           :
                         </div>
                       </span>
                       <span
-                        class="c49 c47"
+                        class="c51 c49"
                       >
                         1 folder, 1 asset
                       </span>
@@ -1288,10 +1349,10 @@ exports[`BrowseStep renders and match snapshot 1`] = `
                   </button>
                 </div>
                 <div
-                  class="c50"
+                  class="c52"
                 >
                   <div
-                    class="c51 c52 c53 c54"
+                    class="c53 c54 c55 c56"
                     spacing="2"
                   />
                 </div>
@@ -1302,17 +1363,17 @@ exports[`BrowseStep renders and match snapshot 1`] = `
       </div>
     </div>
     <div
-      class="c55 c56"
+      class="c57 c58"
     >
       <div
         class="c17"
       >
         <div>
           <div
-            class="c57 c58"
+            class="c59 c60"
           >
             <div
-              class="c59 c60"
+              class="c61 c62"
             >
               <button
                 aria-disabled="false"
@@ -1320,21 +1381,21 @@ exports[`BrowseStep renders and match snapshot 1`] = `
                 aria-haspopup="listbox"
                 aria-label="Entries per page"
                 aria-labelledby="select-1-label select-1-content"
-                class="c61"
+                class="c63"
                 id="select-1"
                 type="button"
               />
               <div
-                class="c62 c63"
+                class="c64 c65"
               >
                 <div
-                  class="c59"
+                  class="c61"
                 >
                   <div
-                    class="c64"
+                    class="c66"
                   >
                     <span
-                      class="c65"
+                      class="c67"
                       id="select-1-content"
                     >
                       10
@@ -1342,11 +1403,11 @@ exports[`BrowseStep renders and match snapshot 1`] = `
                   </div>
                 </div>
                 <div
-                  class="c59"
+                  class="c61"
                 >
                   <button
                     aria-hidden="true"
-                    class="c66 c67 c68"
+                    class="c68 c69 c70"
                     tabindex="-1"
                     type="button"
                   >
@@ -1371,10 +1432,10 @@ exports[`BrowseStep renders and match snapshot 1`] = `
           </div>
         </div>
         <div
-          class="c69"
+          class="c71"
         >
           <label
-            class="c70"
+            class="c72"
             for="page-size"
           >
             Entries per page
@@ -1386,17 +1447,17 @@ exports[`BrowseStep renders and match snapshot 1`] = `
         class="sc-fMfAsl"
       >
         <ul
-          class="c17 c71"
+          class="c17 c73"
         >
           <li>
             <button
               aria-disabled="true"
-              class="c72 c73"
+              class="c74 c75"
               tabindex="-1"
               type="button"
             >
               <div
-                class="c48"
+                class="c50"
               >
                 Go to previous page
               </div>
@@ -1417,17 +1478,17 @@ exports[`BrowseStep renders and match snapshot 1`] = `
           </li>
           <li>
             <button
-              class="c74 c75"
+              class="c76 c77"
               type="button"
             >
               <div
-                class="c48"
+                class="c50"
               >
                 Go to page 1
               </div>
               <span
                 aria-hidden="true"
-                class="c76 c77"
+                class="c78 c79"
               >
                 1
               </span>
@@ -1436,12 +1497,12 @@ exports[`BrowseStep renders and match snapshot 1`] = `
           <li>
             <button
               aria-disabled="true"
-              class="c72 c73"
+              class="c74 c75"
               tabindex="-1"
               type="button"
             >
               <div
-                class="c48"
+                class="c50"
               >
                 Go to next page
               </div>
@@ -1465,7 +1526,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
     </div>
   </div>
   <div
-    class="c78"
+    class="c80"
   >
     <p
       aria-live="polite"
diff --git a/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/tests/index.test.js b/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/tests/index.test.js
index 6dd4a07baf..de6b4181de 100644
--- a/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/tests/index.test.js
+++ b/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/tests/index.test.js
@@ -6,8 +6,11 @@ import { NotificationsProvider } from '@strapi/helper-plugin';
 import { MemoryRouter } from 'react-router-dom';
 import { QueryClientProvider, QueryClient } from 'react-query';
 
+import { useFolder } from '../../../../hooks/useFolder';
 import { BrowseStep } from '..';
 
+jest.mock('../../../../hooks/useFolder');
+
 jest.mock('@strapi/helper-plugin', () => ({
   ...jest.requireActual('@strapi/helper-plugin'),
   useTracking: jest.fn(() => ({ trackUsage: jest.fn() })),
@@ -118,6 +121,18 @@ describe('BrowseStep', () => {
     expect(container).toMatchSnapshot();
   });
 
+  it('should not fetch folder if the user does not have the permission', () => {
+    const spy = jest.fn().mockReturnValueOnce({ isLoading: false });
+    useFolder.mockImplementationOnce(spy);
+
+    setup({
+      canRead: false,
+      queryObject: { folder: 1, page: 1, pageSize: 10, filters: { $and: [] } },
+    });
+
+    expect(spy).toHaveBeenCalledWith(1, { enabled: false });
+  });
+
   it('calls onAddAsset callback', () => {
     const spy = jest.fn();
     const { getByText } = setup({ onAddAsset: spy, folders: [] });

From 324b1628f6de4eb91c6eb79dddef7c62cdb4727a Mon Sep 17 00:00:00 2001
From: Julie Plantey <julie.plantey@gmail.com>
Date: Thu, 4 Aug 2022 15:15:55 +0200
Subject: [PATCH 8/9] fixed translations

---
 .../AssetDialog/BrowseStep/index.js           |  5 +-
 .../src/components/Breadcrumbs/Breadcrumbs.js | 79 ++++++++++---------
 .../admin/src/utils/getBreadcrumbDataCM.js    |  4 +-
 .../admin/src/utils/getBreadcrumbDataML.js    |  3 +-
 4 files changed, 51 insertions(+), 40 deletions(-)

diff --git a/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/index.js b/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/index.js
index 0301688af3..5530163a19 100644
--- a/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/index.js
+++ b/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/index.js
@@ -147,7 +147,10 @@ export const BrowseStep = ({
           <Breadcrumbs
             onChangeFolder={onChangeFolder}
             as="nav"
-            label="hello"
+            label={formatMessage({
+              id: getTrad('header.breadcrumbs.nav.label'),
+              defaultMessage: 'Folders navigation',
+            })}
             breadcrumbs={breadcrumbs}
             currentFolderId={queryObject?.folder}
           />
diff --git a/packages/core/upload/admin/src/components/Breadcrumbs/Breadcrumbs.js b/packages/core/upload/admin/src/components/Breadcrumbs/Breadcrumbs.js
index 868a4dccef..067ea8e67c 100644
--- a/packages/core/upload/admin/src/components/Breadcrumbs/Breadcrumbs.js
+++ b/packages/core/upload/admin/src/components/Breadcrumbs/Breadcrumbs.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { NavLink } from 'react-router-dom';
+import { useIntl } from 'react-intl';
 
 import {
   Crumb,
@@ -10,49 +11,53 @@ import {
 import { CrumbSimpleMenuAsync } from './CrumbSimpleMenuAsync';
 import { BreadcrumbsDefinition } from '../../constants';
 
-export const Breadcrumbs = ({ breadcrumbs, onChangeFolder, currentFolderId, ...props }) => (
-  <BaseBreadcrumbs {...props}>
-    {breadcrumbs.map((crumb, index) => {
-      if (Array.isArray(crumb)) {
-        return (
-          <CrumbSimpleMenuAsync
-            parentsToOmit={[...breadcrumbs]
-              .splice(index + 1, breadcrumbs.length - 1)
-              .map(parent => parent.id)}
-            key={`breadcrumb-${crumb?.id ?? 'menu'}`}
-            currentFolderId={currentFolderId}
-            onChangeFolder={onChangeFolder}
-          />
-        );
-      }
+export const Breadcrumbs = ({ breadcrumbs, onChangeFolder, currentFolderId, ...props }) => {
+  const { formatMessage } = useIntl();
 
-      const isCurrentFolderMediaLibrary = crumb.id === null && currentFolderId === undefined;
+  return (
+    <BaseBreadcrumbs {...props}>
+      {breadcrumbs.map((crumb, index) => {
+        if (Array.isArray(crumb)) {
+          return (
+            <CrumbSimpleMenuAsync
+              parentsToOmit={[...breadcrumbs]
+                .splice(index + 1, breadcrumbs.length - 1)
+                .map(parent => parent.id)}
+              key={`breadcrumb-${crumb?.id ?? 'menu'}`}
+              currentFolderId={currentFolderId}
+              onChangeFolder={onChangeFolder}
+            />
+          );
+        }
+
+        const isCurrentFolderMediaLibrary = crumb.id === null && currentFolderId === undefined;
+
+        if (currentFolderId !== crumb.id && !isCurrentFolderMediaLibrary) {
+          return (
+            <CrumbLink
+              key={`breadcrumb-${crumb?.id ?? 'root'}`}
+              as={onChangeFolder ? 'button' : NavLink}
+              type={onChangeFolder && 'button'}
+              to={onChangeFolder ? undefined : crumb.href}
+              onClick={onChangeFolder && (() => onChangeFolder(crumb.id))}
+            >
+              {crumb.label?.id ? formatMessage(crumb.label) : crumb.label}
+            </CrumbLink>
+          );
+        }
 
-      if (currentFolderId !== crumb.id && !isCurrentFolderMediaLibrary) {
         return (
-          <CrumbLink
+          <Crumb
             key={`breadcrumb-${crumb?.id ?? 'root'}`}
-            as={onChangeFolder ? 'button' : NavLink}
-            type={onChangeFolder && 'button'}
-            to={onChangeFolder ? undefined : crumb.href}
-            onClick={onChangeFolder && (() => onChangeFolder(crumb.id))}
+            isCurrent={index + 1 === breadcrumbs.length}
           >
-            {crumb.label}
-          </CrumbLink>
+            {crumb.label?.id ? formatMessage(crumb.label) : crumb.label}
+          </Crumb>
         );
-      }
-
-      return (
-        <Crumb
-          key={`breadcrumb-${crumb?.id ?? 'root'}`}
-          isCurrent={index + 1 === breadcrumbs.length}
-        >
-          {crumb.label}
-        </Crumb>
-      );
-    })}
-  </BaseBreadcrumbs>
-);
+      })}
+    </BaseBreadcrumbs>
+  );
+};
 
 Breadcrumbs.defaultProps = {
   currentFolderId: undefined,
diff --git a/packages/core/upload/admin/src/utils/getBreadcrumbDataCM.js b/packages/core/upload/admin/src/utils/getBreadcrumbDataCM.js
index 6ca26c1698..1abfc75d7f 100644
--- a/packages/core/upload/admin/src/utils/getBreadcrumbDataCM.js
+++ b/packages/core/upload/admin/src/utils/getBreadcrumbDataCM.js
@@ -1,8 +1,10 @@
+import getTrad from './getTrad';
+
 const getBreadcrumbDataML = folder => {
   let data = [
     {
       id: null,
-      label: 'Media Library',
+      label: { id: getTrad('plugin.name'), defaultMessage: 'MediaLibrary' },
     },
   ];
 
diff --git a/packages/core/upload/admin/src/utils/getBreadcrumbDataML.js b/packages/core/upload/admin/src/utils/getBreadcrumbDataML.js
index f653145d42..45c114a72e 100644
--- a/packages/core/upload/admin/src/utils/getBreadcrumbDataML.js
+++ b/packages/core/upload/admin/src/utils/getBreadcrumbDataML.js
@@ -1,10 +1,11 @@
+import getTrad from './getTrad';
 import getFolderURL from './getFolderURL';
 
 const getBreadcrumbDataML = (folder, { pathname, query }) => {
   let data = [
     {
       id: null,
-      label: 'Media Library',
+      label: { id: getTrad('plugin.name'), defaultMessage: 'MediaLibrary' },
       href: folder ? getFolderURL(pathname, query) : undefined,
     },
   ];

From ffde4d4b58916155617b0bd179d8be3eb1c22d9f Mon Sep 17 00:00:00 2001
From: Julie Plantey <julie.plantey@gmail.com>
Date: Thu, 4 Aug 2022 16:25:50 +0200
Subject: [PATCH 9/9] hide breadcrumbs if in root of ML + added tests

---
 .../AssetDialog/BrowseStep/index.js           |  2 +-
 .../tests/__snapshots__/index.test.js.snap    |  2 +-
 .../BrowseStep/tests/index.test.js            | 13 ++++++++
 .../admin/src/pages/App/components/Header.js  |  8 ++---
 .../admin/src/pages/App/tests/Header.test.js  |  9 ------
 .../src/pages/App/tests/MediaLibrary.test.js  | 31 +++++++++++++++++++
 .../tests/__snapshots__/Header.test.js.snap   |  2 +-
 .../admin/src/utils/getBreadcrumbDataCM.js    |  2 +-
 .../admin/src/utils/getBreadcrumbDataML.js    |  2 +-
 .../utils/tests/getBreadcrumbDataCM.test.js   | 20 +++++++++---
 .../utils/tests/getBreadcrumbDataML.test.js   | 20 +++++++++---
 11 files changed, 85 insertions(+), 26 deletions(-)

diff --git a/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/index.js b/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/index.js
index 5530163a19..00d06a5949 100644
--- a/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/index.js
+++ b/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/index.js
@@ -142,7 +142,7 @@ export const BrowseStep = ({
         </Box>
       )}
 
-      {canRead && breadcrumbs?.length > 0 && (
+      {canRead && breadcrumbs?.length > 0 && currentFolder && (
         <Box paddingTop={3}>
           <Breadcrumbs
             onChangeFolder={onChangeFolder}
diff --git a/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/tests/__snapshots__/index.test.js.snap b/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/tests/__snapshots__/index.test.js.snap
index 8a4d512ae7..e508a4201b 100644
--- a/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/tests/__snapshots__/index.test.js.snap
+++ b/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/tests/__snapshots__/index.test.js.snap
@@ -1208,7 +1208,7 @@ exports[`BrowseStep renders and match snapshot 1`] = `
       class="c22"
     >
       <nav
-        aria-label="hello"
+        aria-label="Folders navigation"
         class=""
       >
         <ol
diff --git a/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/tests/index.test.js b/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/tests/index.test.js
index de6b4181de..150fcbc3ff 100644
--- a/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/tests/index.test.js
+++ b/packages/core/upload/admin/src/components/AssetDialog/BrowseStep/tests/index.test.js
@@ -133,6 +133,19 @@ describe('BrowseStep', () => {
     expect(spy).toHaveBeenCalledWith(1, { enabled: false });
   });
 
+  it('should show breadcrumbs navigation', () => {
+    setup();
+
+    expect(screen.queryByLabelText('Folders navigation')).toBeInTheDocument();
+  });
+
+  it('should hide breadcrumbs navigation if in root folder', () => {
+    useFolder.mockReturnValueOnce({ isLoading: false, data: undefined });
+    setup();
+
+    expect(screen.queryByLabelText('Folders navigation')).not.toBeInTheDocument();
+  });
+
   it('calls onAddAsset callback', () => {
     const spy = jest.fn();
     const { getByText } = setup({ onAddAsset: spy, folders: [] });
diff --git a/packages/core/upload/admin/src/pages/App/components/Header.js b/packages/core/upload/admin/src/pages/App/components/Header.js
index afb68dfcae..b1ea8736f3 100644
--- a/packages/core/upload/admin/src/pages/App/components/Header.js
+++ b/packages/core/upload/admin/src/pages/App/components/Header.js
@@ -28,16 +28,16 @@ export const Header = ({
     ...query,
     folder: folder?.parent?.id ?? undefined,
   };
-  const name = folder?.name?.length > 30 ? `${folder.name.slice(0, 30)}...` : folder?.name;
 
   return (
     <HeaderLayout
-      title={`${formatMessage({
+      title={formatMessage({
         id: getTrad('plugin.name'),
         defaultMessage: `Media Library`,
-      })}${name ? ` - ${name}` : ''}`}
+      })}
       subtitle={
-        breadcrumbs && (
+        breadcrumbs &&
+        folder && (
           <Breadcrumbs
             as="nav"
             label={formatMessage({
diff --git a/packages/core/upload/admin/src/pages/App/tests/Header.test.js b/packages/core/upload/admin/src/pages/App/tests/Header.test.js
index 6e3c14d140..c81eaa7ef0 100644
--- a/packages/core/upload/admin/src/pages/App/tests/Header.test.js
+++ b/packages/core/upload/admin/src/pages/App/tests/Header.test.js
@@ -85,15 +85,6 @@ describe('Header', () => {
     expect(container).toMatchSnapshot();
   });
 
-  test('truncates long folder lavels', () => {
-    useQueryParams.mockReturnValueOnce([{ rawQuery: '', query: { folder: 2 } }, jest.fn()]);
-
-    const { queryByText } = setup({
-      folder: { ...FIXTURE_FOLDER, name: 'The length of this label exceeds the maximum length' },
-    });
-    expect(queryByText('Media Library - The length of this label excee...')).toBeInTheDocument();
-  });
-
   test('does not render a back button at the root level of the media library', () => {
     const { queryByText } = setup({ folder: null });
 
diff --git a/packages/core/upload/admin/src/pages/App/tests/MediaLibrary.test.js b/packages/core/upload/admin/src/pages/App/tests/MediaLibrary.test.js
index fa3b594825..2ca695235c 100644
--- a/packages/core/upload/admin/src/pages/App/tests/MediaLibrary.test.js
+++ b/packages/core/upload/admin/src/pages/App/tests/MediaLibrary.test.js
@@ -9,6 +9,7 @@ import { IntlProvider } from 'react-intl';
 import { useMediaLibraryPermissions } from '../../../hooks/useMediaLibraryPermissions';
 import { useFolders } from '../../../hooks/useFolders';
 import { useAssets } from '../../../hooks/useAssets';
+import { useFolder } from '../../../hooks/useFolder';
 import { MediaLibrary } from '../MediaLibrary';
 
 const FIXTURE_ASSET_PAGINATION = {
@@ -199,6 +200,23 @@ describe('Media library homepage', () => {
         expect(screen.getByLabelText('Select all folders & assets')).toBeInTheDocument();
       });
 
+      it('hides the select all if there are not folders and assets', () => {
+        useAssets.mockReturnValueOnce({
+          isLoading: false,
+          error: null,
+          data: {},
+        });
+        useFolders.mockReturnValueOnce({
+          data: [],
+          isLoading: false,
+          error: null,
+        });
+
+        renderML();
+
+        expect(screen.queryByLabelText('Select all assets')).not.toBeInTheDocument();
+      });
+
       it('hides the select all button when the user is not allowed to update', () => {
         useMediaLibraryPermissions.mockReturnValue({
           isLoading: false,
@@ -251,6 +269,19 @@ describe('Media library homepage', () => {
   });
 
   describe('content', () => {
+    it('should show breadcrumbs navigation', () => {
+      renderML();
+
+      expect(screen.queryByLabelText('Folders navigation')).toBeInTheDocument();
+    });
+
+    it('should hide breadcrumbs navigation if in root folder', () => {
+      useFolder.mockReturnValueOnce({ isLoading: false, data: undefined });
+      renderML();
+
+      expect(screen.queryByLabelText('Folders navigation')).not.toBeInTheDocument();
+    });
+
     it('does display empty state upload first assets if no folder or assets', () => {
       useFolders.mockReturnValueOnce({
         data: [],
diff --git a/packages/core/upload/admin/src/pages/App/tests/__snapshots__/Header.test.js.snap b/packages/core/upload/admin/src/pages/App/tests/__snapshots__/Header.test.js.snap
index 180d116397..c61d161f2b 100644
--- a/packages/core/upload/admin/src/pages/App/tests/__snapshots__/Header.test.js.snap
+++ b/packages/core/upload/admin/src/pages/App/tests/__snapshots__/Header.test.js.snap
@@ -429,7 +429,7 @@ exports[`Header renders 1`] = `
           <h1
             class="c8"
           >
-            Media Library - Folder 1
+            Media Library
           </h1>
         </div>
         <div
diff --git a/packages/core/upload/admin/src/utils/getBreadcrumbDataCM.js b/packages/core/upload/admin/src/utils/getBreadcrumbDataCM.js
index 1abfc75d7f..4326266637 100644
--- a/packages/core/upload/admin/src/utils/getBreadcrumbDataCM.js
+++ b/packages/core/upload/admin/src/utils/getBreadcrumbDataCM.js
@@ -4,7 +4,7 @@ const getBreadcrumbDataML = folder => {
   let data = [
     {
       id: null,
-      label: { id: getTrad('plugin.name'), defaultMessage: 'MediaLibrary' },
+      label: { id: getTrad('plugin.name'), defaultMessage: 'Media Library' },
     },
   ];
 
diff --git a/packages/core/upload/admin/src/utils/getBreadcrumbDataML.js b/packages/core/upload/admin/src/utils/getBreadcrumbDataML.js
index 45c114a72e..507261dae0 100644
--- a/packages/core/upload/admin/src/utils/getBreadcrumbDataML.js
+++ b/packages/core/upload/admin/src/utils/getBreadcrumbDataML.js
@@ -5,7 +5,7 @@ const getBreadcrumbDataML = (folder, { pathname, query }) => {
   let data = [
     {
       id: null,
-      label: { id: getTrad('plugin.name'), defaultMessage: 'MediaLibrary' },
+      label: { id: getTrad('plugin.name'), defaultMessage: 'Media Library' },
       href: folder ? getFolderURL(pathname, query) : undefined,
     },
   ];
diff --git a/packages/core/upload/admin/src/utils/tests/getBreadcrumbDataCM.test.js b/packages/core/upload/admin/src/utils/tests/getBreadcrumbDataCM.test.js
index 6d03bfa3f2..28cc719c39 100644
--- a/packages/core/upload/admin/src/utils/tests/getBreadcrumbDataCM.test.js
+++ b/packages/core/upload/admin/src/utils/tests/getBreadcrumbDataCM.test.js
@@ -10,7 +10,10 @@ describe('getBreadcrumbDataCM', () => {
     expect(getBreadcrumbDataCM(null)).toStrictEqual([
       {
         id: null,
-        label: 'Media Library',
+        label: {
+          id: 'upload.plugin.name',
+          defaultMessage: 'Media Library',
+        },
       },
     ]);
   });
@@ -19,7 +22,10 @@ describe('getBreadcrumbDataCM', () => {
     expect(getBreadcrumbDataCM(FIXTURE_FOLDER)).toStrictEqual([
       {
         id: null,
-        label: 'Media Library',
+        label: {
+          id: 'upload.plugin.name',
+          defaultMessage: 'Media Library',
+        },
       },
       {
         id: 1,
@@ -34,7 +40,10 @@ describe('getBreadcrumbDataCM', () => {
     ).toStrictEqual([
       {
         id: null,
-        label: 'Media Library',
+        label: {
+          id: 'upload.plugin.name',
+          defaultMessage: 'Media Library',
+        },
       },
 
       {
@@ -58,7 +67,10 @@ describe('getBreadcrumbDataCM', () => {
     ).toStrictEqual([
       {
         id: null,
-        label: 'Media Library',
+        label: {
+          id: 'upload.plugin.name',
+          defaultMessage: 'Media Library',
+        },
       },
       [],
       {
diff --git a/packages/core/upload/admin/src/utils/tests/getBreadcrumbDataML.test.js b/packages/core/upload/admin/src/utils/tests/getBreadcrumbDataML.test.js
index 0506effa1e..20b6ee534e 100644
--- a/packages/core/upload/admin/src/utils/tests/getBreadcrumbDataML.test.js
+++ b/packages/core/upload/admin/src/utils/tests/getBreadcrumbDataML.test.js
@@ -18,7 +18,10 @@ describe('getBreadcrumbDataML', () => {
       {
         href: undefined,
         id: null,
-        label: 'Media Library',
+        label: {
+          id: 'upload.plugin.name',
+          defaultMessage: 'Media Library',
+        },
       },
     ]);
   });
@@ -30,7 +33,10 @@ describe('getBreadcrumbDataML', () => {
       {
         href: '/media-library?some=thing',
         id: null,
-        label: 'Media Library',
+        label: {
+          id: 'upload.plugin.name',
+          defaultMessage: 'Media Library',
+        },
       },
 
       {
@@ -49,7 +55,10 @@ describe('getBreadcrumbDataML', () => {
     ).toStrictEqual([
       {
         id: null,
-        label: 'Media Library',
+        label: {
+          id: 'upload.plugin.name',
+          defaultMessage: 'Media Library',
+        },
         href: '/media-library?some=thing',
       },
 
@@ -78,7 +87,10 @@ describe('getBreadcrumbDataML', () => {
     ).toStrictEqual([
       {
         id: null,
-        label: 'Media Library',
+        label: {
+          id: 'upload.plugin.name',
+          defaultMessage: 'Media Library',
+        },
         href: '/media-library?some=thing',
       },