diff --git a/packages/core/admin/admin/src/content-manager/components/DynamicZone/components/Component/index.js b/packages/core/admin/admin/src/content-manager/components/DynamicZone/components/Component/index.js
index 599d01a1e4..d46055b96d 100644
--- a/packages/core/admin/admin/src/content-manager/components/DynamicZone/components/Component/index.js
+++ b/packages/core/admin/admin/src/content-manager/components/DynamicZone/components/Component/index.js
@@ -14,10 +14,12 @@ import { Loader } from '@strapi/design-system/Loader';
 import Trash from '@strapi/icons/Trash';
 import ArrowDown from '@strapi/icons/ArrowDown';
 import ArrowUp from '@strapi/icons/ArrowUp';
+import { useCMEditViewDataManager } from '@strapi/helper-plugin';
 import { useContentTypeLayout } from '../../../../hooks';
 import { getTrad } from '../../../../utils';
 import FieldComponent from '../../../FieldComponent';
 import Rectangle from './Rectangle';
+import useMainValue from './util';
 
 const ActionStack = styled(Stack)`
   svg {
@@ -58,6 +60,21 @@ const Component = ({
 }) => {
   const { formatMessage } = useIntl();
   const { getComponentLayout } = useContentTypeLayout();
+  const { modifiedData } = useCMEditViewDataManager();
+  const componentLayoutData = useMemo(() => {
+    const layout = getComponentLayout(componentUid);
+
+    console.log('DZone/Component componentLayoutData', {
+      componentUid,
+      layout,
+      name,
+      index,
+      modifiedData,
+    });
+
+    return layout;
+  }, [componentUid, getComponentLayout, index, name, modifiedData]);
+  const mainValue = useMainValue(componentLayoutData, `${name}.${index}`);
   const { icon, friendlyName } = useMemo(() => {
     const {
       info: { icon, displayName },
@@ -144,7 +161,7 @@ const Component = ({
                 )}
               </ActionStack>
             }
-            title={friendlyName}
+            title={`${friendlyName} - ${mainValue}`}
             togglePosition="left"
           />
           <AccordionContent>
diff --git a/packages/core/admin/admin/src/content-manager/components/DynamicZone/components/Component/util.js b/packages/core/admin/admin/src/content-manager/components/DynamicZone/components/Component/util.js
new file mode 100644
index 0000000000..202f957dcb
--- /dev/null
+++ b/packages/core/admin/admin/src/content-manager/components/DynamicZone/components/Component/util.js
@@ -0,0 +1,16 @@
+import { useMemo } from 'react';
+import { get, toString } from 'lodash';
+import { useCMEditViewDataManager } from '@strapi/helper-plugin';
+
+function useMainValue(schema, componentFieldName) {
+  const { modifiedData } = useCMEditViewDataManager();
+
+  const mainField = useMemo(() => get(schema, ['settings', 'mainField'], 'id'), [schema]);
+  const displayedValue = toString(
+    get(modifiedData, [...componentFieldName.split('.'), mainField], '')
+  );
+
+  return displayedValue;
+}
+
+export default useMainValue;