diff --git a/packages/strapi-helper-plugin/lib/src/components/LeftMenuList/index.js b/packages/strapi-helper-plugin/lib/src/components/LeftMenuList/index.js
index 74253e06d5..8e6f51944f 100644
--- a/packages/strapi-helper-plugin/lib/src/components/LeftMenuList/index.js
+++ b/packages/strapi-helper-plugin/lib/src/components/LeftMenuList/index.js
@@ -94,6 +94,8 @@ function LeftMenuList({ customLink, links, title, searchable }) {
     title: formatTitleWithIntl(title),
   };
 
+  // TODO refacto this component
+
   return (
     <Wrapper>
       <div className="list-header">
diff --git a/packages/strapi-plugin-content-type-builder/admin/src/components/RelationTargetPicker/Item.js b/packages/strapi-plugin-content-type-builder/admin/src/components/RelationTargetPicker/Item.js
new file mode 100644
index 0000000000..e85e255aa7
--- /dev/null
+++ b/packages/strapi-plugin-content-type-builder/admin/src/components/RelationTargetPicker/Item.js
@@ -0,0 +1,62 @@
+import React, { memo } from 'react';
+import { DropdownItem } from 'reactstrap';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import PropTypes from 'prop-types';
+import { Text } from '@buffetjs/core';
+
+const Item = ({
+  onChange,
+  oneThatIsCreatingARelationWithAnother,
+  plugin,
+  restrictRelationsTo,
+  title,
+  uid,
+}) => {
+  const handleChange = () => {
+    const selectedContentTypeFriendlyName = plugin ? `${plugin}_${title}` : title;
+
+    onChange({
+      target: {
+        name: 'target',
+        value: uid,
+        type: 'relation',
+        oneThatIsCreatingARelationWithAnother,
+        selectedContentTypeFriendlyName,
+        targetContentTypeAllowedRelations: restrictRelationsTo,
+      },
+    });
+  };
+
+  return (
+    <DropdownItem key={uid} onClick={handleChange}>
+      <p>
+        <FontAwesomeIcon
+          icon={['far', 'caret-square-right']}
+          style={{ fontSize: 12, marginTop: '-3px' }}
+        />
+        {title}
+        {plugin && (
+          <Text as="span" fontStyle="italic" textTransform="none" color="rgba(50,55,64,0.75)">
+            &nbsp; (from: {plugin})
+          </Text>
+        )}
+      </p>
+    </DropdownItem>
+  );
+};
+
+Item.defaultProps = {
+  plugin: null,
+  restrictRelationsTo: null,
+};
+
+Item.propTypes = {
+  onChange: PropTypes.func.isRequired,
+  oneThatIsCreatingARelationWithAnother: PropTypes.string.isRequired,
+  plugin: PropTypes.string,
+  restrictRelationsTo: PropTypes.array,
+  title: PropTypes.string.isRequired,
+  uid: PropTypes.string.isRequired,
+};
+
+export default memo(Item);
diff --git a/packages/strapi-plugin-content-type-builder/admin/src/components/RelationTargetPicker/index.js b/packages/strapi-plugin-content-type-builder/admin/src/components/RelationTargetPicker/index.js
index 8bc9a3aefc..cfaa91dce8 100644
--- a/packages/strapi-plugin-content-type-builder/admin/src/components/RelationTargetPicker/index.js
+++ b/packages/strapi-plugin-content-type-builder/admin/src/components/RelationTargetPicker/index.js
@@ -2,9 +2,10 @@ import React, { useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { get } from 'lodash';
-import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
+import { Dropdown, DropdownToggle, DropdownMenu } from 'reactstrap';
 
 import useDataManager from '../../hooks/useDataManager';
+import Item from './Item';
 import Wrapper from './Wrapper';
 
 const RelationTargetPicker = ({ onChange, oneThatIsCreatingARelationWithAnother, target }) => {
@@ -61,37 +62,15 @@ const RelationTargetPicker = ({ onChange, oneThatIsCreatingARelationWithAnother,
         <DropdownMenu style={{ paddingTop: '3px' }}>
           {allowedContentTypesForRelation.map(({ uid, title, restrictRelationsTo, plugin }) => {
             return (
-              <DropdownItem
+              <Item
                 key={uid}
-                onClick={() => {
-                  // Change the target
-                  const selectedContentTypeFriendlyName = plugin ? `${plugin}_${title}` : title;
-
-                  onChange({
-                    target: {
-                      name: 'target',
-                      value: uid,
-                      type: 'relation',
-                      oneThatIsCreatingARelationWithAnother,
-                      selectedContentTypeFriendlyName,
-                      targetContentTypeAllowedRelations: restrictRelationsTo,
-                    },
-                  });
-                }}
-              >
-                <p>
-                  <FontAwesomeIcon
-                    icon={['far', 'caret-square-right']}
-                    style={{ fontSize: 12, marginTop: '-3px' }}
-                  />
-                  {title}
-                  {plugin && (
-                    <span style={{ fontStyle: 'italic', textTransform: 'none' }}>
-                      &nbsp; (from: {plugin})
-                    </span>
-                  )}
-                </p>
-              </DropdownItem>
+                uid={uid}
+                title={title}
+                restrictRelationsTo={restrictRelationsTo}
+                plugin={plugin}
+                onChange={onChange}
+                oneThatIsCreatingARelationWithAnother={oneThatIsCreatingARelationWithAnother}
+              />
             );
           })}
         </DropdownMenu>
diff --git a/packages/strapi-plugin-content-type-builder/admin/src/containers/LeftMenu/index.js b/packages/strapi-plugin-content-type-builder/admin/src/containers/LeftMenu/index.js
index c43b3c6227..6862f62fb7 100644
--- a/packages/strapi-plugin-content-type-builder/admin/src/containers/LeftMenu/index.js
+++ b/packages/strapi-plugin-content-type-builder/admin/src/containers/LeftMenu/index.js
@@ -9,6 +9,7 @@ import PropTypes from 'prop-types';
 import { sortBy, camelCase, upperFirst } from 'lodash';
 import { useHistory } from 'react-router-dom';
 import { LeftMenuList, useGlobalContext } from 'strapi-helper-plugin';
+import { Text } from '@buffetjs/core';
 import pluginId from '../../pluginId';
 import getTrad from '../../utils/getTrad';
 import CustomLink from '../../components/CustomLink';
@@ -117,9 +118,15 @@ function LeftMenu({ wait }) {
             Component: () => (
               <p style={{ justifyContent: 'normal' }}>
                 {obj.title}&nbsp;
-                <span style={{ fontStyle: 'italic', textTransform: 'none' }}>
+                <Text
+                  as="span"
+                  // This is needed here
+                  style={{ fontStyle: 'italic' }}
+                  fontWeight="inherit"
+                  lineHeight="inherit"
+                >
                   ({formatMessage({ id: getTrad('from') })}: {obj.plugin})
-                </span>
+                </Text>
               </p>
             ),
           };