diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/index.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/index.js
index 185a3b7599..fe7bce2346 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/index.js
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/index.js
@@ -5,7 +5,7 @@ import { HeaderLayout, Layout, ContentLayout } from '@strapi/design-system/Layou
 import { Main } from '@strapi/design-system/Main';
 import { Box } from '@strapi/design-system/Box';
 import { Grid, GridItem } from '@strapi/design-system/Grid';
-import { H3, Text, TableLabel } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 
 import { Stack } from '@strapi/design-system/Stack';
 import { Link } from '@strapi/design-system/Link';
@@ -43,38 +43,38 @@ const ApplicationInfosPage = () => {
             paddingLeft={6}
           >
             <Stack size={5}>
-              <H3>
+              <Typography variant="delta">
                 {formatMessage({
                   id: 'Settings.application.information',
                   defaultMessage: 'Information',
                 })}
-              </H3>
+              </Typography>
 
               <Grid paddingTop={1}>
                 <GridItem col={6} s={12}>
-                  <TableLabel textColor="neutral600">
+                  <Typography variant="sigma" textColor="neutral600">
                     {formatMessage({
                       id: 'Settings.application.details',
                       defaultMessage: 'details',
                     })}
-                  </TableLabel>
-                  <Text as="p">v{strapiVersion}</Text>
+                  </Typography>
+                  <Typography as="p">v{strapiVersion}</Typography>
                 </GridItem>
                 <GridItem col={6} s={12}>
-                  <TableLabel textColor="neutral600">
+                  <Typography variant="sigma" textColor="neutral600">
                     {formatMessage({
                       id: 'Settings.application.edition-title',
                       defaultMessage: 'current plan',
                     })}
-                  </TableLabel>
-                  <Text as="p">
+                  </Typography>
+                  <Typography as="p">
                     {formatMessage({
                       id: currentPlan,
                       defaultMessage: `${
                         appInfos.communityEdition ? 'Community Edition' : 'Enterprise Edition'
                       }`,
                     })}
-                  </Text>
+                  </Typography>
                 </GridItem>
               </Grid>
 
@@ -103,13 +103,13 @@ const ApplicationInfosPage = () => {
               </Grid>
 
               <Box paddingTop={1}>
-                <TableLabel textColor="neutral600">
+                <Typography variant="sigma" textColor="neutral600">
                   {formatMessage({
                     id: 'Settings.application.node-version',
                     defaultMessage: 'node version',
                   })}
-                </TableLabel>
-                <Text as="p">{appInfos.nodeVersion}</Text>
+                </Typography>
+                <Typography as="p">{appInfos.nodeVersion}</Typography>
               </Box>
             </Stack>
           </Box>
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/tests/index.test.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/tests/index.test.js
index cf70eb329c..e59171dac7 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/tests/index.test.js
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/tests/index.test.js
@@ -43,7 +43,7 @@ describe('Application page', () => {
         box-shadow: 0px 1px 4px rgba(33,33,52,0.1);
       }
 
-      .c23 {
+      .c22 {
         padding-top: 4px;
       }
 
@@ -66,33 +66,6 @@ describe('Application page', () => {
         margin-top: 20px;
       }
 
-      .c16 {
-        color: #666687;
-        font-size: 0.875rem;
-        line-height: 1.43;
-      }
-
-      .c12 {
-        font-weight: 500;
-        font-size: 1rem;
-        line-height: 1.25;
-        color: #32324d;
-      }
-
-      .c18 {
-        font-weight: 400;
-        font-size: 0.875rem;
-        line-height: 1.43;
-        color: #32324d;
-      }
-
-      .c17 {
-        font-weight: 600;
-        font-size: 0.6875rem;
-        line-height: 1.45;
-        text-transform: uppercase;
-      }
-
       .c1 {
         padding-bottom: 56px;
       }
@@ -182,7 +155,28 @@ describe('Application page', () => {
         grid-column: span 6;
       }
 
-      .c20 {
+      .c12 {
+        color: #32324d;
+        font-weight: 500;
+        font-size: 1rem;
+        line-height: 1.25;
+      }
+
+      .c16 {
+        color: #666687;
+        font-weight: 600;
+        font-size: 0.6875rem;
+        line-height: 1.45;
+        text-transform: uppercase;
+      }
+
+      .c17 {
+        color: #32324d;
+        font-size: 0.875rem;
+        line-height: 1.43;
+      }
+
+      .c19 {
         color: #4945ff;
         font-weight: 600;
         font-size: 0.6875rem;
@@ -190,11 +184,11 @@ describe('Application page', () => {
         text-transform: uppercase;
       }
 
-      .c21 {
+      .c20 {
         padding-left: 8px;
       }
 
-      .c19 {
+      .c18 {
         display: -webkit-inline-box;
         display: -webkit-inline-flex;
         display: -ms-inline-flexbox;
@@ -210,15 +204,15 @@ describe('Application page', () => {
         outline: none;
       }
 
-      .c19 svg path {
+      .c18 svg path {
         fill: #4945ff;
       }
 
-      .c19 svg {
+      .c18 svg {
         font-size: 0.625rem;
       }
 
-      .c19:after {
+      .c18:after {
         -webkit-transition-property: all;
         transition-property: all;
         -webkit-transition-duration: 0.2s;
@@ -233,11 +227,11 @@ describe('Application page', () => {
         border: 2px solid transparent;
       }
 
-      .c19:focus-visible {
+      .c18:focus-visible {
         outline: none;
       }
 
-      .c19:focus-visible:after {
+      .c18:focus-visible:after {
         border-radius: 8px;
         content: '';
         position: absolute;
@@ -248,7 +242,7 @@ describe('Application page', () => {
         border: 2px solid #4945ff;
       }
 
-      .c22 {
+      .c21 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -315,11 +309,11 @@ describe('Application page', () => {
                 <div
                   class="c11"
                 >
-                  <h3
+                  <span
                     class="c12"
                   >
                     Information
-                  </h3>
+                  </span>
                   <div
                     class="c13 c14"
                   >
@@ -330,12 +324,12 @@ describe('Application page', () => {
                         class=""
                       >
                         <span
-                          class="c16 c17"
+                          class="c16"
                         >
                           details
                         </span>
                         <p
-                          class="c18"
+                          class="c17"
                         >
                           v
                           4.0.0
@@ -349,12 +343,12 @@ describe('Application page', () => {
                         class=""
                       >
                         <span
-                          class="c16 c17"
+                          class="c16"
                         >
                           current plan
                         </span>
                         <p
-                          class="c18"
+                          class="c17"
                         >
                           Enterprise Edition
                         </p>
@@ -371,19 +365,19 @@ describe('Application page', () => {
                         class=""
                       >
                         <a
-                          class="c19"
+                          class="c18"
                           href="https://github.com/strapi/strapi/releases/tag/v3.6.8"
                           rel="noreferrer noopener"
                           target="_blank"
                         >
                           <span
-                            class="c20"
+                            class="c19"
                           >
                             Upgrade your admin panel
                           </span>
                           <span
                             aria-hidden="true"
-                            class="c21 c22"
+                            class="c20 c21"
                           >
                             <svg
                               fill="none"
@@ -408,19 +402,19 @@ describe('Application page', () => {
                         class=""
                       >
                         <a
-                          class="c19"
+                          class="c18"
                           href="https://strapi.io/pricing-self-hosted"
                           rel="noreferrer noopener"
                           target="_blank"
                         >
                           <span
-                            class="c20"
+                            class="c19"
                           >
                             See all pricing
                           </span>
                           <span
                             aria-hidden="true"
-                            class="c21 c22"
+                            class="c20 c21"
                           >
                             <svg
                               fill="none"
@@ -440,15 +434,15 @@ describe('Application page', () => {
                     </div>
                   </div>
                   <div
-                    class="c23"
+                    class="c22"
                   >
                     <span
-                      class="c16 c17"
+                      class="c16"
                     >
                       node version
                     </span>
                     <p
-                      class="c18"
+                      class="c17"
                     />
                   </div>
                 </div>