diff --git a/packages/core/upload/admin/src/components/AssetCard/AssetCardBase.js b/packages/core/upload/admin/src/components/AssetCard/AssetCardBase.js
index 2b04521bbc2..1ab68aaf5b6 100644
--- a/packages/core/upload/admin/src/components/AssetCard/AssetCardBase.js
+++ b/packages/core/upload/admin/src/components/AssetCard/AssetCardBase.js
@@ -13,6 +13,7 @@ import {
   CardTitle,
   CardSubtitle,
 } from '@strapi/design-system/Card';
+import { Flex } from '@strapi/design-system/Flex';
 import { IconButton } from '@strapi/design-system/IconButton';
 import Pencil from '@strapi/icons/Pencil';
 import Trash from '@strapi/icons/Trash';
@@ -116,12 +117,14 @@ export const AssetCardBase = ({
             {subtitle}
           </CardSubtitle>
         </CardContent>
-        <CardBadge>
-          {formatMessage({
-            id: getTrad(`settings.section.${variant.toLowerCase()}.label`),
-            defaultMessage: variant,
-          })}
-        </CardBadge>
+        <Flex paddingTop={1} grow={1}>
+          <CardBadge>
+            {formatMessage({
+              id: getTrad(`settings.section.${variant.toLowerCase()}.label`),
+              defaultMessage: variant,
+            })}
+          </CardBadge>
+        </Flex>
       </CardBody>
     </CardContainer>
   );
diff --git a/packages/core/upload/admin/src/components/AssetCard/UploadingAssetCard.js b/packages/core/upload/admin/src/components/AssetCard/UploadingAssetCard.js
index cab6826c930..f2c54b4ec65 100644
--- a/packages/core/upload/admin/src/components/AssetCard/UploadingAssetCard.js
+++ b/packages/core/upload/admin/src/components/AssetCard/UploadingAssetCard.js
@@ -15,6 +15,7 @@ import {
 import { Typography } from '@strapi/design-system/Typography';
 import { Stack } from '@strapi/design-system/Stack';
 import { Box } from '@strapi/design-system/Box';
+import { Flex } from '@strapi/design-system/Flex';
 
 import { getTrad } from '../../utils';
 import { AssetType } from '../../constants';
@@ -40,7 +41,10 @@ export const UploadingAssetCard = ({
   const { upload, cancel, error, progress, status } = useUpload();
   const { formatMessage } = useIntl();
 
-  let badgeContent;
+  let badgeContent = formatMessage({
+    id: getTrad('settings.section.doc.label'),
+    defaultMessage: 'Doc',
+  });
 
   if (asset.type === AssetType.Image) {
     badgeContent = formatMessage({
@@ -57,11 +61,6 @@ export const UploadingAssetCard = ({
       id: getTrad('settings.section.audio.label'),
       defaultMessage: 'Audio',
     });
-  } else {
-    badgeContent = formatMessage({
-      id: getTrad('settings.section.doc.label'),
-      defaultMessage: 'Doc',
-    });
   }
 
   useEffect(() => {
@@ -88,7 +87,7 @@ export const UploadingAssetCard = ({
 
   return (
     <Stack spacing={1}>
-      <Card borderColor={error ? 'danger600' : undefined}>
+      <Card borderColor={error ? 'danger600' : 'neutral150'}>
         <CardHeader>
           <UploadProgressWrapper>
             <UploadProgress error={error} onCancel={handleCancel} progress={progress} />
@@ -103,7 +102,9 @@ export const UploadingAssetCard = ({
               <Extension>{asset.ext}</Extension>
             </CardSubtitle>
           </CardContent>
-          <CardBadge>{badgeContent}</CardBadge>
+          <Flex paddingTop={1} grow={1}>
+            <CardBadge>{badgeContent}</CardBadge>
+          </Flex>
         </CardBody>
       </Card>
       {error ? (
diff --git a/packages/core/upload/admin/src/components/AssetCard/tests/DocAssetCard.test.js b/packages/core/upload/admin/src/components/AssetCard/tests/DocAssetCard.test.js
index 45e2b12d893..a1daa0d7de9 100644
--- a/packages/core/upload/admin/src/components/AssetCard/tests/DocAssetCard.test.js
+++ b/packages/core/upload/admin/src/components/AssetCard/tests/DocAssetCard.test.js
@@ -29,7 +29,7 @@ describe('DocAssetCard', () => {
     );
 
     expect(container).toMatchInlineSnapshot(`
-      .c31 {
+      .c32 {
         border: 0;
         -webkit-clip: rect(0 0 0 0);
         clip: rect(0 0 0 0);
@@ -75,7 +75,15 @@ describe('DocAssetCard', () => {
         padding-top: 4px;
       }
 
-      .c27 {
+      .c26 {
+        padding-top: 4px;
+        -webkit-box-flex: 1;
+        -webkit-flex-grow: 1;
+        -ms-flex-positive: 1;
+        flex-grow: 1;
+      }
+
+      .c28 {
         background: #f6f6f9;
         padding: 4px;
         border-radius: 4px;
@@ -128,7 +136,7 @@ describe('DocAssetCard', () => {
         flex-direction: row;
       }
 
-      .c28 {
+      .c29 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -171,7 +179,7 @@ describe('DocAssetCard', () => {
         color: #666687;
       }
 
-      .c30 {
+      .c31 {
         font-weight: 600;
         font-size: 0.6875rem;
         line-height: 1.45;
@@ -366,14 +374,14 @@ describe('DocAssetCard', () => {
         right: 12px;
       }
 
-      .c26 {
+      .c27 {
         margin-left: auto;
         -webkit-flex-shrink: 0;
         -ms-flex-negative: 0;
         flex-shrink: 0;
       }
 
-      .c29 {
+      .c30 {
         margin-left: 4px;
       }
 
@@ -535,23 +543,27 @@ describe('DocAssetCard', () => {
                 </div>
               </div>
               <div
-                class="c26"
+                class="c26 c5"
               >
                 <div
-                  class="c27 c28 c29"
+                  class="c27"
                 >
-                  <span
-                    class="c30"
+                  <div
+                    class="c28 c29 c30"
                   >
-                    Doc
-                  </span>
+                    <span
+                      class="c31"
+                    >
+                      Doc
+                    </span>
+                  </div>
                 </div>
               </div>
             </div>
           </div>
         </article>
         <div
-          class="c31"
+          class="c32"
         >
           <p
             aria-live="polite"
diff --git a/packages/core/upload/admin/src/components/AssetCard/tests/ImageAssetCard.test.js b/packages/core/upload/admin/src/components/AssetCard/tests/ImageAssetCard.test.js
index 3ebf2070a83..9c016a164f6 100644
--- a/packages/core/upload/admin/src/components/AssetCard/tests/ImageAssetCard.test.js
+++ b/packages/core/upload/admin/src/components/AssetCard/tests/ImageAssetCard.test.js
@@ -32,7 +32,7 @@ describe('ImageAssetCard', () => {
     );
 
     expect(container).toMatchInlineSnapshot(`
-      .c30 {
+      .c31 {
         border: 0;
         -webkit-clip: rect(0 0 0 0);
         clip: rect(0 0 0 0);
@@ -73,7 +73,15 @@ describe('ImageAssetCard', () => {
         padding-top: 4px;
       }
 
-      .c26 {
+      .c25 {
+        padding-top: 4px;
+        -webkit-box-flex: 1;
+        -webkit-flex-grow: 1;
+        -ms-flex-positive: 1;
+        flex-grow: 1;
+      }
+
+      .c27 {
         background: #f6f6f9;
         padding: 4px;
         border-radius: 4px;
@@ -126,7 +134,7 @@ describe('ImageAssetCard', () => {
         flex-direction: row;
       }
 
-      .c27 {
+      .c28 {
         -webkit-align-items: center;
         -webkit-box-align: center;
         -ms-flex-align: center;
@@ -202,7 +210,7 @@ describe('ImageAssetCard', () => {
         color: #666687;
       }
 
-      .c29 {
+      .c30 {
         font-weight: 600;
         font-size: 0.6875rem;
         line-height: 1.45;
@@ -210,14 +218,14 @@ describe('ImageAssetCard', () => {
         color: #666687;
       }
 
-      .c25 {
+      .c26 {
         margin-left: auto;
         -webkit-flex-shrink: 0;
         -ms-flex-negative: 0;
         flex-shrink: 0;
       }
 
-      .c28 {
+      .c29 {
         margin-left: 4px;
       }
 
@@ -533,23 +541,27 @@ describe('ImageAssetCard', () => {
                 </div>
               </div>
               <div
-                class="c25"
+                class="c25 c5"
               >
                 <div
-                  class="c26 c27 c28"
+                  class="c26"
                 >
-                  <span
-                    class="c29"
+                  <div
+                    class="c27 c28 c29"
                   >
-                    Image
-                  </span>
+                    <span
+                      class="c30"
+                    >
+                      Image
+                    </span>
+                  </div>
                 </div>
               </div>
             </div>
           </div>
         </article>
         <div
-          class="c30"
+          class="c31"
         >
           <p
             aria-live="polite"
diff --git a/packages/core/upload/admin/src/components/AssetList/tests/__snapshots__/AssetList.test.js.snap b/packages/core/upload/admin/src/components/AssetList/tests/__snapshots__/AssetList.test.js.snap
index e8018d67c17..f3f368a88e6 100644
--- a/packages/core/upload/admin/src/components/AssetList/tests/__snapshots__/AssetList.test.js.snap
+++ b/packages/core/upload/admin/src/components/AssetList/tests/__snapshots__/AssetList.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`MediaLibrary / AssetList snapshots the asset list 1`] = `
-.c34 {
+.c35 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -42,21 +42,29 @@ exports[`MediaLibrary / AssetList snapshots the asset list 1`] = `
   padding-top: 4px;
 }
 
-.c22 {
+.c21 {
+  padding-top: 4px;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+
+.c23 {
   background: #f6f6f9;
   padding: 4px;
   border-radius: 4px;
   min-width: 20px;
 }
 
-.c28 {
+.c29 {
   background: #32324d;
   color: #ffffff;
   padding: 4px;
   border-radius: 4px;
 }
 
-.c31 {
+.c32 {
   width: 100%;
   height: 10.25rem;
 }
@@ -85,7 +93,7 @@ exports[`MediaLibrary / AssetList snapshots the asset list 1`] = `
   color: #666687;
 }
 
-.c25 {
+.c26 {
   font-weight: 600;
   font-size: 0.6875rem;
   line-height: 1.45;
@@ -93,13 +101,13 @@ exports[`MediaLibrary / AssetList snapshots the asset list 1`] = `
   color: #666687;
 }
 
-.c30 {
+.c31 {
   font-size: 0.75rem;
   line-height: 1.33;
   color: #ffffff;
 }
 
-.c27 {
+.c28 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -157,7 +165,7 @@ exports[`MediaLibrary / AssetList snapshots the asset list 1`] = `
   flex-direction: row;
 }
 
-.c23 {
+.c24 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -282,14 +290,14 @@ exports[`MediaLibrary / AssetList snapshots the asset list 1`] = `
   border-top-right-radius: 4px;
 }
 
-.c21 {
+.c22 {
   margin-left: auto;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c24 {
+.c25 {
   margin-left: 4px;
 }
 
@@ -302,7 +310,7 @@ exports[`MediaLibrary / AssetList snapshots the asset list 1`] = `
   border-bottom: 1px solid #eaeaef;
 }
 
-.c29 {
+.c30 {
   position: absolute;
   bottom: 4px;
   right: 4px;
@@ -320,18 +328,18 @@ exports[`MediaLibrary / AssetList snapshots the asset list 1`] = `
   opacity: 1;
 }
 
-.c26 canvas,
-.c26 video {
+.c27 canvas,
+.c27 video {
   display: block;
   max-width: 100%;
   max-height: 10.25rem;
 }
 
-.c33 svg {
+.c34 svg {
   font-size: 3rem;
 }
 
-.c32 {
+.c33 {
   border-radius: 4px 4px 0 0;
   background: linear-gradient(180deg,#ffffff 0%,#f6f6f9 121.48%);
 }
@@ -430,16 +438,20 @@ exports[`MediaLibrary / AssetList snapshots the asset list 1`] = `
                   </div>
                 </div>
                 <div
-                  class="c21"
+                  class="c21 c8"
                 >
                   <div
-                    class="c22 c23 c24"
+                    class="c22"
                   >
-                    <span
-                      class="c25"
+                    <div
+                      class="c23 c24 c25"
                     >
-                      Image
-                    </span>
+                      <span
+                        class="c26"
+                      >
+                        Image
+                      </span>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -487,7 +499,7 @@ exports[`MediaLibrary / AssetList snapshots the asset list 1`] = `
                   class="c8"
                 >
                   <div
-                    class="c26"
+                    class="c27"
                   >
                     <figure
                       class=""
@@ -501,7 +513,7 @@ exports[`MediaLibrary / AssetList snapshots the asset list 1`] = `
                         />
                       </video>
                       <figcaption
-                        class="c27"
+                        class="c28"
                       >
                         mov_bbb.mp4
                       </figcaption>
@@ -510,10 +522,10 @@ exports[`MediaLibrary / AssetList snapshots the asset list 1`] = `
                 </div>
               </div>
               <time
-                class="c28 c29"
+                class="c29 c30"
               >
                 <span
-                  class="c30"
+                  class="c31"
                 >
                   ...
                 </span>
@@ -550,16 +562,20 @@ exports[`MediaLibrary / AssetList snapshots the asset list 1`] = `
                   </div>
                 </div>
                 <div
-                  class="c21"
+                  class="c21 c8"
                 >
                   <div
-                    class="c22 c23 c24"
+                    class="c22"
                   >
-                    <span
-                      class="c25"
+                    <div
+                      class="c23 c24 c25"
                     >
-                      Video
-                    </span>
+                      <span
+                        class="c26"
+                      >
+                        Video
+                      </span>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -601,12 +617,12 @@ exports[`MediaLibrary / AssetList snapshots the asset list 1`] = `
                 </div>
               </div>
               <div
-                class="c31 c5 c32"
+                class="c32 c5 c33"
                 height="10.25rem"
                 width="100%"
               >
                 <span
-                  class="c33"
+                  class="c34"
                 >
                   <svg
                     aria-label="CARTE MARIAGE AVS - Printemps.pdf"
@@ -661,16 +677,20 @@ exports[`MediaLibrary / AssetList snapshots the asset list 1`] = `
                   </div>
                 </div>
                 <div
-                  class="c21"
+                  class="c21 c8"
                 >
                   <div
-                    class="c22 c23 c24"
+                    class="c22"
                   >
-                    <span
-                      class="c25"
+                    <div
+                      class="c23 c24 c25"
                     >
-                      Doc
-                    </span>
+                      <span
+                        class="c26"
+                      >
+                        Doc
+                      </span>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -681,7 +701,7 @@ exports[`MediaLibrary / AssetList snapshots the asset list 1`] = `
     </div>
   </div>
   <div
-    class="c34"
+    class="c35"
   >
     <p
       aria-live="polite"
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 d02234a732b..ff415d8c071 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
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
-.c52 {
+.c53 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -62,19 +62,27 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   padding-top: 4px;
 }
 
-.c38 {
+.c37 {
+  padding-top: 4px;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+
+.c39 {
   background: #f6f6f9;
   padding: 4px;
   border-radius: 4px;
   min-width: 20px;
 }
 
-.c42 {
+.c43 {
   width: 100%;
   height: 5.5rem;
 }
 
-.c46 {
+.c47 {
   background: #32324d;
   color: #ffffff;
   padding: 4px;
@@ -159,7 +167,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   flex-direction: row;
 }
 
-.c39 {
+.c40 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -205,7 +213,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   color: #32324d;
 }
 
-.c41 {
+.c42 {
   font-weight: 600;
   font-size: 0.6875rem;
   line-height: 1.45;
@@ -213,7 +221,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   color: #666687;
 }
 
-.c48 {
+.c49 {
   font-size: 0.75rem;
   line-height: 1.33;
   color: #ffffff;
@@ -370,7 +378,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   fill: #ffffff;
 }
 
-.c51 {
+.c52 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -384,7 +392,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   background: #ffffff;
 }
 
-.c51 .c0 {
+.c52 .c0 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -395,52 +403,52 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   align-items: center;
 }
 
-.c51 .c4 {
+.c52 .c4 {
   color: #ffffff;
 }
 
-.c51[aria-disabled='true'] {
+.c52[aria-disabled='true'] {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c51[aria-disabled='true'] .c4 {
+.c52[aria-disabled='true'] .c4 {
   color: #666687;
 }
 
-.c51[aria-disabled='true'] svg > g,
-.c51[aria-disabled='true'] svg path {
+.c52[aria-disabled='true'] svg > g,
+.c52[aria-disabled='true'] svg path {
   fill: #666687;
 }
 
-.c51[aria-disabled='true']:active {
+.c52[aria-disabled='true']:active {
   border: 1px solid #dcdce4;
   background: #eaeaef;
 }
 
-.c51[aria-disabled='true']:active .c4 {
+.c52[aria-disabled='true']:active .c4 {
   color: #666687;
 }
 
-.c51[aria-disabled='true']:active svg > g,
-.c51[aria-disabled='true']:active svg path {
+.c52[aria-disabled='true']:active svg > g,
+.c52[aria-disabled='true']:active svg path {
   fill: #666687;
 }
 
-.c51:hover {
+.c52:hover {
   background-color: #f6f6f9;
 }
 
-.c51:active {
+.c52:active {
   background-color: #eaeaef;
 }
 
-.c51 .c4 {
+.c52 .c4 {
   color: #32324d;
 }
 
-.c51 svg > g,
-.c51 svg path {
+.c52 svg > g,
+.c52 svg path {
   fill: #32324d;
 }
 
@@ -489,12 +497,12 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   border-bottom: 1px solid #eaeaef;
 }
 
-.c49 {
+.c50 {
   border-radius: 0 0 4px 4px;
   border-top: 1px solid #eaeaef;
 }
 
-.c50 > * + * {
+.c51 > * + * {
   margin-left: 8px;
 }
 
@@ -544,14 +552,14 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   border-top-right-radius: 4px;
 }
 
-.c37 {
+.c38 {
   margin-left: auto;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
 }
 
-.c40 {
+.c41 {
   margin-left: 4px;
 }
 
@@ -564,7 +572,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   border-bottom: 1px solid #eaeaef;
 }
 
-.c47 {
+.c48 {
   position: absolute;
   bottom: 4px;
   right: 4px;
@@ -590,18 +598,18 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
   opacity: 1;
 }
 
-.c45 canvas,
-.c45 video {
+.c46 canvas,
+.c46 video {
   display: block;
   max-width: 100%;
   max-height: 5.5rem;
 }
 
-.c44 svg {
+.c45 svg {
   font-size: 3rem;
 }
 
-.c43 {
+.c44 {
   border-radius: 4px 4px 0 0;
   background: linear-gradient(180deg,#ffffff 0%,#f6f6f9 121.48%);
 }
@@ -824,16 +832,20 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
                         </div>
                       </div>
                       <div
-                        class="c37"
+                        class="c0 c37 c25"
                       >
                         <div
-                          class="c0 c38 c39 c40"
+                          class="c38"
                         >
-                          <span
-                            class="c4 c41"
+                          <div
+                            class="c0 c39 c40 c41"
                           >
-                            Image
-                          </span>
+                            <span
+                              class="c4 c42"
+                            >
+                              Image
+                            </span>
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -923,12 +935,12 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
                       </span>
                     </div>
                     <div
-                      class="c0 c42 c22 c43"
+                      class="c0 c43 c22 c44"
                       height="5.5rem"
                       width="100%"
                     >
                       <span
-                        class="c44"
+                        class="c45"
                       >
                         <svg
                           aria-label="something.pdf"
@@ -983,16 +995,20 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
                         </div>
                       </div>
                       <div
-                        class="c37"
+                        class="c0 c37 c25"
                       >
                         <div
-                          class="c0 c38 c39 c40"
+                          class="c38"
                         >
-                          <span
-                            class="c4 c41"
+                          <div
+                            class="c0 c39 c40 c41"
                           >
-                            Doc
-                          </span>
+                            <span
+                              class="c4 c42"
+                            >
+                              Doc
+                            </span>
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -1088,7 +1104,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
                         class="c0 c25"
                       >
                         <div
-                          class="c0 c45"
+                          class="c0 c46"
                         >
                           <figure
                             class="c0 "
@@ -1111,10 +1127,10 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
                       </div>
                     </div>
                     <time
-                      class="c0 c46 c47"
+                      class="c0 c47 c48"
                     >
                       <span
-                        class="c4 c48"
+                        class="c4 c49"
                       >
                         ...
                       </span>
@@ -1151,16 +1167,20 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
                         </div>
                       </div>
                       <div
-                        class="c37"
+                        class="c0 c37 c25"
                       >
                         <div
-                          class="c0 c38 c39 c40"
+                          class="c38"
                         >
-                          <span
-                            class="c4 c41"
+                          <div
+                            class="c0 c39 c40 c41"
                           >
-                            Video
-                          </span>
+                            <span
+                              class="c4 c42"
+                            >
+                              Video
+                            </span>
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -1173,17 +1193,17 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
       </div>
     </div>
     <div
-      class="c0 c1 c49"
+      class="c0 c1 c50"
     >
       <div
         class="c0 c3"
       >
         <div
-          class="c0 c25 c50"
+          class="c0 c25 c51"
         >
           <button
             aria-disabled="false"
-            class="c6 c51"
+            class="c6 c52"
             type="button"
           >
             <span
@@ -1194,7 +1214,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
           </button>
         </div>
         <div
-          class="c0 c25 c50"
+          class="c0 c25 c51"
         >
           <button
             aria-disabled="false"
@@ -1212,7 +1232,7 @@ exports[`PendingAssetStep snapshots the component with valid cards 1`] = `
     </div>
   </form>
   <div
-    class="c52"
+    class="c53"
   >
     <p
       aria-live="polite"
diff --git a/packages/core/upload/admin/src/components/UploadProgress/index.js b/packages/core/upload/admin/src/components/UploadProgress/index.js
index 641578fbdf4..ba789f6744a 100644
--- a/packages/core/upload/admin/src/components/UploadProgress/index.js
+++ b/packages/core/upload/admin/src/components/UploadProgress/index.js
@@ -3,15 +3,15 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import Cross from '@strapi/icons/Cross';
 import { Typography } from '@strapi/design-system/Typography';
-import { Box } from '@strapi/design-system/Box';
 import { Flex } from '@strapi/design-system/Flex';
+import { Stack } from '@strapi/design-system/Stack';
 import { ProgressBar } from '@strapi/design-system/ProgressBar';
 import { useIntl } from 'react-intl';
 
 const BoxWrapper = styled(Flex)`
+  border-radius: ${({ theme }) => `${theme.borderRadius} ${theme.borderRadius} 0 0`};
   width: 100%;
   height: 100%;
-  flex-direction: column;
 
   svg {
     path {
@@ -23,16 +23,21 @@ const BoxWrapper = styled(Flex)`
 const CancelButton = styled.button`
   border: none;
   background: none;
-  display: flex;
-  align-items: center;
+  width: min-content;
+  color: ${({ theme }) => theme.colors.neutral600};
 
-  svg {
-    path {
-      fill: ${({ theme }) => theme.colors.neutral200};
-    }
+  &:hover,
+  &:focus {
+    color: ${({ theme }) => theme.colors.neutral700};
+  }
 
+  svg {
     height: 10px;
     width: 10px;
+
+    path {
+      fill: currentColor;
+    }
   }
 `;
 
@@ -40,34 +45,26 @@ export const UploadProgress = ({ onCancel, progress, error }) => {
   const { formatMessage } = useIntl();
 
   return (
-    <BoxWrapper
-      background={error ? 'danger100' : 'neutral700'}
-      justifyContent="center"
-      error={error}
-      hasRadius
-    >
+    <BoxWrapper alignItems="center" background={error ? 'danger100' : 'neutral150'} error={error}>
       {error ? (
         <Cross aria-label={error?.message} />
       ) : (
-        <>
-          <Box paddingBottom={2}>
-            <ProgressBar value={progress} size="S">
-              {`${progress}/100%`}
-            </ProgressBar>
-          </Box>
+        <Stack alignItems="center" spacing={2} width="100%">
+          <ProgressBar value={progress}>{`${progress}/100%`}</ProgressBar>
 
           <CancelButton type="button" onClick={onCancel}>
-            <Typography variant="pi" as="span" textColor="neutral200">
-              {formatMessage({
-                id: 'app.components.Button.cancel',
-                defaultMessage: 'Cancel',
-              })}
-            </Typography>
-            <Box as="span" paddingLeft={2} aria-hidden>
-              <Cross />
-            </Box>
+            <Stack horizontal spacing={2}>
+              <Typography variant="pi" as="span" textColor="inherit">
+                {formatMessage({
+                  id: 'app.components.Button.cancel',
+                  defaultMessage: 'Cancel',
+                })}
+              </Typography>
+
+              <Cross aria-hidden />
+            </Stack>
           </CancelButton>
-        </>
+        </Stack>
       )}
     </BoxWrapper>
   );
diff --git a/packages/core/upload/admin/src/components/UploadProgress/tests/index.test.js b/packages/core/upload/admin/src/components/UploadProgress/tests/index.test.js
index e974cf0b65c..c2ee5296c41 100644
--- a/packages/core/upload/admin/src/components/UploadProgress/tests/index.test.js
+++ b/packages/core/upload/admin/src/components/UploadProgress/tests/index.test.js
@@ -49,31 +49,25 @@ describe('<UploadProgress />', () => {
     } = renderCompo();
 
     expect(firstChild).toMatchInlineSnapshot(`
-      .c7 {
+      .c10 {
         font-size: 0.75rem;
         line-height: 1.33;
-        color: #dcdce4;
       }
 
       .c0 {
-        background: #4a4a6a;
-        border-radius: 4px;
+        background: #eaeaef;
       }
 
       .c3 {
-        padding-bottom: 8px;
+        width: 100%;
       }
 
-      .c4 {
+      .c6 {
         background: #666687;
         border-radius: 4px;
         position: relative;
-        width: 78px;
-        height: 4px;
-      }
-
-      .c8 {
-        padding-left: 8px;
+        width: 102px;
+        height: 8px;
       }
 
       .c1 {
@@ -88,13 +82,41 @@ describe('<UploadProgress />', () => {
         -webkit-flex-direction: row;
         -ms-flex-direction: row;
         flex-direction: row;
-        -webkit-box-pack: center;
-        -webkit-justify-content: center;
-        -ms-flex-pack: center;
-        justify-content: center;
       }
 
-      .c5:before {
+      .c4 {
+        -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: column;
+        -ms-flex-direction: column;
+        flex-direction: column;
+      }
+
+      .c5 > * {
+        margin-top: 0;
+        margin-bottom: 0;
+      }
+
+      .c5 > * + * {
+        margin-top: 8px;
+      }
+
+      .c9 > * {
+        margin-left: 0;
+        margin-right: 0;
+      }
+
+      .c9 > * + * {
+        margin-left: 8px;
+      }
+
+      .c7:before {
         background-color: #ffffff;
         border-radius: 4px;
         bottom: 0;
@@ -105,80 +127,82 @@ describe('<UploadProgress />', () => {
       }
 
       .c2 {
+        border-radius: 4px 4px 0 0;
         width: 100%;
         height: 100%;
-        -webkit-flex-direction: column;
-        -ms-flex-direction: column;
-        flex-direction: column;
       }
 
-      .c6 {
+      .c8 {
         border: none;
         background: none;
-        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;
+        width: -webkit-min-content;
+        width: -moz-min-content;
+        width: min-content;
+        color: #666687;
       }
 
-      .c6 svg {
+      .c8:hover,
+      .c8:focus {
+        color: #4a4a6a;
+      }
+
+      .c8 svg {
         height: 10px;
         width: 10px;
       }
 
-      .c6 svg path {
-        fill: #dcdce4;
+      .c8 svg path {
+        fill: currentColor;
       }
 
       <div
         class="c0 c1 c2"
       >
         <div
-          class="c3"
+          class="c3 c4 c5"
+          spacing="2"
+          width="100%"
         >
           <div
             aria-label="0/100%"
             aria-valuemax="100"
             aria-valuemin="0"
             aria-valuenow="0"
-            class="c4 c5"
-            height="1"
+            class="c6 c7"
+            height="2"
             role="progressbar"
             value="0"
-            width="78px"
+            width="102px"
           />
-        </div>
-        <button
-          class="c6"
-          type="button"
-        >
-          <span
-            class="c7"
-          >
-            Cancel
-          </span>
-          <span
-            aria-hidden="true"
+          <button
             class="c8"
+            type="button"
           >
-            <svg
-              fill="none"
-              height="1em"
-              viewBox="0 0 24 24"
-              width="1em"
-              xmlns="http://www.w3.org/2000/svg"
+            <div
+              class="c1 c9"
+              spacing="2"
             >
-              <path
-                d="M24 2.417L21.583 0 12 9.583 2.417 0 0 2.417 9.583 12 0 21.583 2.417 24 12 14.417 21.583 24 24 21.583 14.417 12 24 2.417z"
-                fill="#212134"
-              />
-            </svg>
-          </span>
-        </button>
+              <span
+                class="c10"
+              >
+                Cancel
+              </span>
+              <svg
+                aria-hidden="true"
+                fill="none"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M24 2.417L21.583 0 12 9.583 2.417 0 0 2.417 9.583 12 0 21.583 2.417 24 12 14.417 21.583 24 24 21.583 14.417 12 24 2.417z"
+                  fill="#212134"
+                />
+              </svg>
+            </div>
+          </button>
+        </div>
       </div>
     `);
   });
@@ -191,7 +215,6 @@ describe('<UploadProgress />', () => {
     expect(firstChild).toMatchInlineSnapshot(`
       .c0 {
         background: #fcecea;
-        border-radius: 4px;
       }
 
       .c1 {
@@ -206,18 +229,12 @@ describe('<UploadProgress />', () => {
         -webkit-flex-direction: row;
         -ms-flex-direction: row;
         flex-direction: row;
-        -webkit-box-pack: center;
-        -webkit-justify-content: center;
-        -ms-flex-pack: center;
-        justify-content: center;
       }
 
       .c2 {
+        border-radius: 4px 4px 0 0;
         width: 100%;
         height: 100%;
-        -webkit-flex-direction: column;
-        -ms-flex-direction: column;
-        flex-direction: column;
       }
 
       .c2 svg path {