diff --git a/packages/core/content-type-builder/admin/src/components/DynamicZoneList/index.js b/packages/core/content-type-builder/admin/src/components/DynamicZoneList/index.js
index a88db852b0..aaa55df08d 100644
--- a/packages/core/content-type-builder/admin/src/components/DynamicZoneList/index.js
+++ b/packages/core/content-type-builder/admin/src/components/DynamicZoneList/index.js
@@ -11,7 +11,7 @@ import { pxToRem } from '@strapi/helper-plugin';
 import Plus from '@strapi/icons/Plus';
 import { Box } from '@strapi/design-system/Box';
 import { Stack } from '@strapi/design-system/Stack';
-import { Text } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
 import useDataManager from '../../hooks/useDataManager';
@@ -80,12 +80,12 @@ function DynamicZoneList({ customRowComponent, components, addComponent, name, t
               <button type="button" onClick={handleClickAdd}>
                 <ComponentStack size={1}>
                   <StyledAddIcon />
-                  <Text small bold textColor="primary600">
+                  <Typography varian="pi" fontWeight="bold" textColor="primary600">
                     {formatMessage({
                       id: getTrad('button.component.add'),
                       formatMessage: 'Add a component',
                     })}
-                  </Text>
+                  </Typography>
                 </ComponentStack>
               </button>
             )}
diff --git a/packages/core/content-type-builder/admin/src/components/FormModal/index.js b/packages/core/content-type-builder/admin/src/components/FormModal/index.js
index 5a0f2e4c9d..934f390c60 100644
--- a/packages/core/content-type-builder/admin/src/components/FormModal/index.js
+++ b/packages/core/content-type-builder/admin/src/components/FormModal/index.js
@@ -17,7 +17,7 @@ import { Box } from '@strapi/design-system/Box';
 import { Button } from '@strapi/design-system/Button';
 import { Divider } from '@strapi/design-system/Divider';
 import { ModalLayout, ModalBody, ModalFooter } from '@strapi/design-system/ModalLayout';
-import { H2 } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import { Tabs, Tab, TabGroup, TabPanels, TabPanel } from '@strapi/design-system/Tabs';
 import { Flex } from '@strapi/design-system/Flex';
 import { Stack } from '@strapi/design-system/Stack';
@@ -922,7 +922,7 @@ const FormModal = () => {
                 }}
               >
                 <Flex justifyContent="space-between">
-                  <H2>
+                  <Typography as="h2" variant="beta">
                     {formatMessage(
                       {
                         id: getModalTitleSubHeader({
@@ -944,7 +944,7 @@ const FormModal = () => {
                         step,
                       }
                     )}
-                  </H2>
+                  </Typography>
                   <Tabs>
                     <Tab hasError={doesBaseFormHasError}>
                       {formatMessage({
diff --git a/packages/core/content-type-builder/admin/src/components/FormModalHeader/index.js b/packages/core/content-type-builder/admin/src/components/FormModalHeader/index.js
index 7eecf161d4..501384dd01 100644
--- a/packages/core/content-type-builder/admin/src/components/FormModalHeader/index.js
+++ b/packages/core/content-type-builder/admin/src/components/FormModalHeader/index.js
@@ -13,7 +13,7 @@ import { ModalHeader } from '@strapi/design-system/ModalLayout';
 import { Box } from '@strapi/design-system/Box';
 import { Flex } from '@strapi/design-system/Flex';
 import { Stack } from '@strapi/design-system/Stack';
-import { ButtonText } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import useDataManager from '../../hooks/useDataManager';
 import getTrad from '../../utils/getTrad';
 import AttributeIcon from '../AttributeIcon';
@@ -66,9 +66,9 @@ const FormModalHeader = ({
             <AttributeIcon type={icon} />
           </Box>
           <Box paddingLeft={3}>
-            <ButtonText textColor="neutral800" as="h2" id="title">
+            <Typography fontWeight="bold" textColor="neutral800" as="h2" id="title">
               {formatMessage({ id: headerId }, { name: displayName })}
-            </ButtonText>
+            </Typography>
           </Box>
         </Flex>
       </ModalHeader>
diff --git a/packages/core/content-type-builder/admin/src/components/List/index.js b/packages/core/content-type-builder/admin/src/components/List/index.js
index c94b9a63db..8ecd9ab109 100644
--- a/packages/core/content-type-builder/admin/src/components/List/index.js
+++ b/packages/core/content-type-builder/admin/src/components/List/index.js
@@ -10,7 +10,7 @@ import PropTypes from 'prop-types';
 import { EmptyBodyTable, useTracking } from '@strapi/helper-plugin';
 import { Box } from '@strapi/design-system/Box';
 import { Button } from '@strapi/design-system/Button';
-import { TableLabel } from '@strapi/design-system/Text';
+import { Typography } from '@strapi/design-system/Typography';
 import { Table, Thead, Tr, Th, TFooter } from '@strapi/design-system/Table';
 import Plus from '@strapi/icons/Plus';
 import { useIntl } from 'react-intl';
@@ -55,14 +55,14 @@ function List({
         <Thead>
           <Tr>
             <Th>
-              <TableLabel textColor="neutral600">
+              <Typography variant="sigma" textColor="neutral600">
                 {formatMessage({ id: 'table.headers.name', defaultMessage: 'Name' })}
-              </TableLabel>
+              </Typography>
             </Th>
             <Th>
-              <TableLabel textColor="neutral600">
+              <Typography variant="sigma" textColor="neutral600">
                 {formatMessage({ id: 'table.headers.type', defaultMessage: 'Type' })}
-              </TableLabel>
+              </Typography>
             </Th>
           </Tr>
         </Thead>
@@ -83,14 +83,14 @@ function List({
         <Thead>
           <Tr>
             <Th>
-              <TableLabel textColor="neutral600">
+              <Typography variant="sigma" textColor="neutral600">
                 {formatMessage({ id: 'table.headers.name', defaultMessage: 'Name' })}
-              </TableLabel>
+              </Typography>
             </Th>
             <Th>
-              <TableLabel textColor="neutral600">
+              <Typography variant="sigma" textColor="neutral600">
                 {formatMessage({ id: 'table.headers.type', defaultMessage: 'Type' })}
-              </TableLabel>
+              </Typography>
             </Th>
           </Tr>
         </Thead>
@@ -133,14 +133,14 @@ function List({
               <thead>
                 <tr>
                   <th>
-                    <TableLabel textColor="neutral600">
+                    <Typography variant="sigma" textColor="neutral600">
                       {formatMessage({ id: 'table.headers.name', defaultMessage: 'Name' })}
-                    </TableLabel>
+                    </Typography>
                   </th>
                   <th colSpan="2">
-                    <TableLabel textColor="neutral600">
+                    <Typography variant="sigma" textColor="neutral600">
                       {formatMessage({ id: 'table.headers.type', defaultMessage: 'Type' })}
-                    </TableLabel>
+                    </Typography>
                   </th>
                 </tr>
               </thead>