diff --git a/packages/core/admin/admin/src/content-manager/components/DynamicTable/CellContent/Media.js b/packages/core/admin/admin/src/content-manager/components/DynamicTable/CellContent/Media.js
index 87c43dbaba..76e676976c 100644
--- a/packages/core/admin/admin/src/content-manager/components/DynamicTable/CellContent/Media.js
+++ b/packages/core/admin/admin/src/content-manager/components/DynamicTable/CellContent/Media.js
@@ -12,7 +12,6 @@ const FileWrapper = styled(Row)`
   border-radius: 50%;
   width: 26px;
   height: 26px;
-  // TODO
   background: ${({ theme }) => theme.colors.neutral100};
 `;
 
diff --git a/packages/core/admin/admin/src/content-manager/components/MediaPreviewList/StyledMediaPreviewList.js b/packages/core/admin/admin/src/content-manager/components/MediaPreviewList/StyledMediaPreviewList.js
deleted file mode 100644
index 2407db19eb..0000000000
--- a/packages/core/admin/admin/src/content-manager/components/MediaPreviewList/StyledMediaPreviewList.js
+++ /dev/null
@@ -1,171 +0,0 @@
-import styled, { css } from 'styled-components';
-
-const sizes = {
-  small: '35px',
-  big: '127px',
-  margin: '20px',
-};
-const max = 4;
-
-const StyledMediaPreviewList = styled.div`
-  position: relative;
-  height: ${sizes.small};
-  > div {
-    position: absolute;
-    top: 0;
-    ${createCSS()};
-  }
-`;
-
-function createCSS() {
-  let styles = '';
-
-  for (let i = 0; i <= max; i += 1) {
-    styles += `
-      &:nth-of-type(${i}) {
-        left: calc( ${sizes.margin} * ${i - 1});
-        z-index: ${i};
-      }
-    `;
-  }
-
-  return css`
-    ${styles}
-  `;
-}
-
-const MediaPreviewItem = styled.div`
-  width: ${sizes.small};
-  height: ${sizes.small};
-  div {
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    border-radius: calc(${sizes.small} / 2);
-    background-color: #f3f3f4;
-    border: 1px solid #f3f3f4;
-  }
-  &.hoverable {
-    :hover {
-      z-index: ${max + 1};
-    }
-  }
-`;
-
-const MediaPreviewFile = styled(MediaPreviewItem)`
-  span {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  div {
-    position: relative;
-    background-color: #f3f3f4;
-    color: #333740;
-    text-align: center;
-    line-height: ${sizes.small};
-    border: 1px solid white;
-    span {
-      display: block;
-      padding: 0 3px;
-      text-transform: uppercase;
-      font-size: 10px;
-      font-weight: 600;
-    }
-    i,
-    svg {
-      position: absolute;
-      left: 1px;
-      top: -1px;
-      font-size: 15px;
-      width: 100%;
-      height: 100%;
-      &:before {
-        width: 100%;
-        height: 100%;
-        padding: 10px;
-        line-height: 35px;
-        background: #f3f3f4;
-      }
-    }
-  }
-  div + span {
-    display: none;
-    position: absolute;
-    left: 120%;
-    bottom: -10px;
-    max-width: 150px;
-    color: #333740;
-  }
-  &.hoverable {
-    :hover {
-      div + span {
-        display: block;
-      }
-    }
-  }
-`;
-
-const MediaPreviewText = styled(MediaPreviewItem)`
-  div {
-    font-size: 13px;
-    color: #333740;
-    text-align: center;
-    line-height: ${sizes.small};
-    font-weight: 600;
-  }
-`;
-
-const MediaPreviewImage = styled(MediaPreviewItem)`
-  img {
-    display: block;
-    object-fit: cover;
-    background-color: #fafafb;
-  }
-  div {
-    position: relative;
-    &::before {
-      content: '-';
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      background: white;
-      color: transparent;
-      opacity: 0;
-    }
-    img {
-      width: 100%;
-      height: 100%;
-    }
-  }
-  div + img {
-    display: none;
-    width: ${sizes.big};
-    height: ${sizes.big};
-    border-radius: calc(${sizes.big} / 2);
-    margin-top: calc(${`-${sizes.big}`} - ${sizes.small} - 5px);
-    margin-left: calc((${sizes.small} - ${sizes.big}) / 2);
-    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
-  }
-
-  &.hoverable {
-    :hover {
-      div {
-        &::before {
-          opacity: 0.6;
-        }
-      }
-      div + img {
-        display: block;
-      }
-    }
-  }
-`;
-
-export {
-  MediaPreviewFile,
-  MediaPreviewImage,
-  MediaPreviewItem,
-  MediaPreviewText,
-  StyledMediaPreviewList,
-};
diff --git a/packages/core/admin/admin/src/content-manager/components/MediaPreviewList/index.js b/packages/core/admin/admin/src/content-manager/components/MediaPreviewList/index.js
deleted file mode 100644
index 3cb564faad..0000000000
--- a/packages/core/admin/admin/src/content-manager/components/MediaPreviewList/index.js
+++ /dev/null
@@ -1,110 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { get, isArray, includes, isEmpty } from 'lodash';
-import { getFileExtension, prefixFileUrlWithBackendUrl } from '@strapi/helper-plugin';
-import DefaultIcon from '../../icons/Na';
-import {
-  StyledMediaPreviewList,
-  MediaPreviewFile,
-  MediaPreviewImage,
-  MediaPreviewItem,
-  MediaPreviewText,
-} from './StyledMediaPreviewList';
-
-const IMAGE_PREVIEW_COUNT = 3;
-
-function MediaPreviewList({ hoverable, files }) {
-  const renderImage = image => {
-    const { name, size, url } = image;
-    const thumbnail = get(image, ['formats', 'thumbnail', 'url'], null);
-    const fileUrl = thumbnail || url;
-
-    if (!thumbnail && size > 20000) {
-      return renderFile(image);
-    }
-
-    return (
-      <MediaPreviewImage className={hoverable ? 'hoverable' : ''}>
-        <div>
-          <img src={prefixFileUrlWithBackendUrl(fileUrl)} alt={`${name}`} />
-        </div>
-        <img src={prefixFileUrlWithBackendUrl(fileUrl)} alt={`${name}`} />
-      </MediaPreviewImage>
-    );
-  };
-
-  const renderFile = file => {
-    const { ext, name } = file;
-    const fileExtension = getFileExtension(ext);
-
-    return (
-      <MediaPreviewFile className={hoverable ? 'hoverable' : ''}>
-        {fileExtension ? (
-          <div>
-            <span>{fileExtension}</span>
-          </div>
-        ) : (
-          <MediaPreviewItem>
-            <DefaultIcon />
-          </MediaPreviewItem>
-        )}
-
-        <span>{name}</span>
-      </MediaPreviewFile>
-    );
-  };
-
-  const renderItem = file => {
-    const { mime } = file;
-
-    return (
-      <React.Fragment key={JSON.stringify(file)}>
-        {includes(mime, 'image') ? renderImage(file) : renderFile(file)}
-      </React.Fragment>
-    );
-  };
-
-  const renderText = count => {
-    return (
-      <MediaPreviewText>
-        <div>
-          <span>+{count}</span>
-        </div>
-      </MediaPreviewText>
-    );
-  };
-
-  const renderMultipleItems = files => {
-    return files.map((file, index) => {
-      return (
-        <React.Fragment key={JSON.stringify(file)}>
-          {index === IMAGE_PREVIEW_COUNT && files.length > IMAGE_PREVIEW_COUNT + 1
-            ? renderText(files.length - IMAGE_PREVIEW_COUNT)
-            : renderItem(file)}
-        </React.Fragment>
-      );
-    });
-  };
-
-  return !!files && !isEmpty(files) ? (
-    <StyledMediaPreviewList>
-      {!isArray(files) ? renderItem(files) : renderMultipleItems(files)}
-    </StyledMediaPreviewList>
-  ) : (
-    <MediaPreviewItem>
-      <DefaultIcon />
-    </MediaPreviewItem>
-  );
-}
-
-MediaPreviewList.defaultProps = {
-  hoverable: true,
-  files: null,
-};
-
-MediaPreviewList.propTypes = {
-  hoverable: PropTypes.bool,
-  files: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
-};
-
-export default MediaPreviewList;
diff --git a/packages/core/admin/admin/src/content-manager/components/RelationPreviewList/CountWrapper.js b/packages/core/admin/admin/src/content-manager/components/RelationPreviewList/CountWrapper.js
deleted file mode 100644
index 377a6c860e..0000000000
--- a/packages/core/admin/admin/src/content-manager/components/RelationPreviewList/CountWrapper.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import styled from 'styled-components';
-
-const CountWrapper = styled.div`
-  padding-top: 0.3rem;
-`;
-
-export default CountWrapper;
diff --git a/packages/core/admin/admin/src/content-manager/components/RelationPreviewList/RelationPreviewTooltip.js b/packages/core/admin/admin/src/content-manager/components/RelationPreviewList/RelationPreviewTooltip.js
deleted file mode 100644
index 52519fe400..0000000000
--- a/packages/core/admin/admin/src/content-manager/components/RelationPreviewList/RelationPreviewTooltip.js
+++ /dev/null
@@ -1,123 +0,0 @@
-import React, { useState, useEffect, useCallback, useRef, useLayoutEffect } from 'react';
-import { Text, Padded } from '@buffetjs/core';
-import { LoadingIndicator, Tooltip } from '@buffetjs/styles';
-import PropTypes from 'prop-types';
-import axios from 'axios';
-import { axiosInstance } from '../../../core/utils';
-import { getDisplayedValue, getRequestUrl } from '../../utils';
-
-const RelationPreviewTooltip = ({
-  tooltipId,
-  rowId,
-  mainField,
-  name,
-  queryInfos: { endPoint },
-  size,
-}) => {
-  const [isLoading, setIsLoading] = useState(true);
-  const [relationData, setRelationData] = useState([]);
-  const tooltipRef = useRef();
-
-  const fetchRelationData = useCallback(
-    async source => {
-      const requestURL = getRequestUrl(`${endPoint}/${rowId}/${name}`);
-
-      try {
-        const {
-          data: { results },
-        } = await axiosInstance.get(requestURL, { cancelToken: source.token });
-
-        setRelationData(results);
-        setIsLoading(false);
-      } catch (err) {
-        if (axios.isCancel(err)) {
-          return;
-        }
-
-        console.error({ err });
-        setIsLoading(false);
-      }
-    },
-    [endPoint, name, rowId]
-  );
-
-  useEffect(() => {
-    const CancelToken = axios.CancelToken;
-    const source = CancelToken.source();
-
-    const timeout = setTimeout(() => {
-      fetchRelationData(source);
-    }, 500);
-
-    return () => {
-      clearTimeout(timeout);
-
-      source.cancel('Operation canceled by the user.');
-    };
-  }, [fetchRelationData]);
-
-  const getValueToDisplay = useCallback(
-    item => {
-      return getDisplayedValue(mainField.schema.type, item[mainField.name], mainField.name);
-    },
-    [mainField]
-  );
-
-  // Used to update the position after the loader
-  useLayoutEffect(() => {
-    if (!isLoading && tooltipRef.current) {
-      // A react-tooltip uncaught error is triggered when updatePosition is called in firefox.
-      // https://github.com/wwayne/react-tooltip/issues/619
-      try {
-        tooltipRef.current.updatePosition();
-      } catch (err) {
-        console.log(err);
-      }
-    }
-  }, [isLoading]);
-
-  return (
-    <Tooltip ref={tooltipRef} id={tooltipId}>
-      <div>
-        {isLoading ? (
-          <Padded left right size="sm">
-            <LoadingIndicator borderWidth="3px" size="2rem" />
-          </Padded>
-        ) : (
-          <>
-            {relationData.map(item => (
-              <Padded key={item.id} top bottom size="xs">
-                <Text ellipsis color="white">
-                  {getValueToDisplay(item)}
-                </Text>
-              </Padded>
-            ))}
-            {size > 10 && (
-              <Padded top size="xs">
-                <Text color="white">[...]</Text>
-              </Padded>
-            )}
-          </>
-        )}
-      </div>
-    </Tooltip>
-  );
-};
-
-RelationPreviewTooltip.propTypes = {
-  tooltipId: PropTypes.string.isRequired,
-  mainField: PropTypes.exact({
-    name: PropTypes.string.isRequired,
-    schema: PropTypes.shape({
-      type: PropTypes.string.isRequired,
-    }).isRequired,
-  }).isRequired,
-  name: PropTypes.string.isRequired,
-  size: PropTypes.number.isRequired,
-  rowId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-  queryInfos: PropTypes.shape({
-    endPoint: PropTypes.string.isRequired,
-  }).isRequired,
-};
-
-export default RelationPreviewTooltip;
diff --git a/packages/core/admin/admin/src/content-manager/components/RelationPreviewList/index.js b/packages/core/admin/admin/src/content-manager/components/RelationPreviewList/index.js
deleted file mode 100644
index 0d006e4d2b..0000000000
--- a/packages/core/admin/admin/src/content-manager/components/RelationPreviewList/index.js
+++ /dev/null
@@ -1,111 +0,0 @@
-import React, { memo, useState, useMemo } from 'react';
-import PropTypes from 'prop-types';
-import { Flex, Padded, Count } from '@buffetjs/core';
-import { Tooltip } from '@buffetjs/styles';
-import { useIntl } from 'react-intl';
-
-import { getTrad } from '../../utils';
-import Truncate from '../Truncate';
-import Truncated from '../Truncated';
-import CountWrapper from './CountWrapper';
-import RelationPreviewTooltip from './RelationPreviewTooltip';
-
-const RelationPreviewList = ({
-  options: {
-    metadatas: { mainField },
-    relationType,
-    value,
-    rowId,
-    cellId,
-    name,
-    queryInfos,
-  },
-}) => {
-  const { formatMessage } = useIntl();
-  const [tooltipIsDisplayed, setDisplayTooltip] = useState(false);
-  const isSingle = ['oneWay', 'oneToOne', 'manyToOne'].includes(relationType);
-  const tooltipId = useMemo(() => `${rowId}-${cellId}`, [rowId, cellId]);
-  const valueToDisplay = value ? value[mainField.name] : '-';
-
-  if (value === undefined) {
-    return (
-      <Truncate>
-        <Truncated>-</Truncated>
-      </Truncate>
-    );
-  }
-
-  if (isSingle) {
-    return (
-      <Truncate>
-        <Truncated>
-          <span data-for={tooltipId} data-tip={valueToDisplay}>
-            {valueToDisplay}
-          </span>
-        </Truncated>
-        <Tooltip id={tooltipId} />
-      </Truncate>
-    );
-  }
-
-  const size = value ? value.count : 0;
-
-  const handleTooltipToggle = () => {
-    setDisplayTooltip(prev => !prev);
-  };
-
-  return (
-    <Truncate style={{ maxWidth: 'fit-content' }}>
-      <Flex
-        // This is useful to avoid the render of every tooltips of the list at the same time.
-        // https://github.com/wwayne/react-tooltip/issues/524
-        onMouseEnter={handleTooltipToggle}
-        onMouseLeave={handleTooltipToggle}
-        data-for={tooltipId}
-        data-tip={JSON.stringify(value)}
-      >
-        <CountWrapper>
-          <Count count={size} />
-        </CountWrapper>
-        <Padded left size="xs" />
-        <Truncated>
-          {formatMessage({
-            id: getTrad(
-              size > 1 ? 'containers.ListPage.items.plural' : 'containers.ListPage.items.singular'
-            ),
-          })}
-        </Truncated>
-      </Flex>
-      {size > 0 && tooltipIsDisplayed && (
-        <RelationPreviewTooltip
-          name={name}
-          rowId={rowId}
-          tooltipId={tooltipId}
-          value={value}
-          mainField={mainField}
-          queryInfos={queryInfos}
-          size={size}
-        />
-      )}
-    </Truncate>
-  );
-};
-
-RelationPreviewList.propTypes = {
-  options: PropTypes.shape({
-    cellId: PropTypes.string.isRequired,
-    metadatas: PropTypes.shape({
-      mainField: PropTypes.object.isRequired,
-    }).isRequired,
-    name: PropTypes.string.isRequired,
-    relationType: PropTypes.string,
-    rowId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-    type: PropTypes.string,
-    queryInfos: PropTypes.shape({
-      endPoint: PropTypes.string.isRequired,
-    }).isRequired,
-    value: PropTypes.any,
-  }).isRequired,
-};
-
-export default memo(RelationPreviewList);
diff --git a/packages/core/admin/admin/src/content-manager/components/Truncate/index.js b/packages/core/admin/admin/src/content-manager/components/Truncate/index.js
deleted file mode 100644
index 55957ef74d..0000000000
--- a/packages/core/admin/admin/src/content-manager/components/Truncate/index.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import styled from 'styled-components';
-
-const Truncate = styled.div``;
-
-export default Truncate;
diff --git a/packages/core/admin/admin/src/content-manager/components/Truncated/index.js b/packages/core/admin/admin/src/content-manager/components/Truncated/index.js
deleted file mode 100644
index 349955139f..0000000000
--- a/packages/core/admin/admin/src/content-manager/components/Truncated/index.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import styled from 'styled-components';
-
-const Truncated = styled.p`
-  overflow-x: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  margin-bottom: 0;
-`;
-
-export default Truncated;