diff --git a/src/components/AllowedComponentsContainer.tsx b/src/components/AllowedComponentsContainer.tsx
index 73fcd83d..a58be5e2 100644
--- a/src/components/AllowedComponentsContainer.tsx
+++ b/src/components/AllowedComponentsContainer.tsx
@@ -28,8 +28,7 @@ type Props = {
 const AllowedComponentsContainer = (props: Props): JSX.Element => {
   const { placeholderClassNames = '', allowedComponents, title } = props;
   const { components } = allowedComponents;
-  const emptyLabel = Texts.EMPTY_LABEL;
-  const listLabel = components && components.length > 0 ? title : emptyLabel;
+  const listLabel = components && components.length > 0 ? title : Texts.EMPTY_LABEL;
 
   return (
     <div className={`${ClassNames.ALLOWED_LIST_PLACEHOLDER} ${ClassNames.NEW_SECTION} ${placeholderClassNames}`}>
@@ -38,7 +37,7 @@ const AllowedComponentsContainer = (props: Props): JSX.Element => {
         <div
           data-cq-data-path={component.path}
           key={component.path}
-          data-emptytext={emptyLabel}
+          data-emptytext={component.title ? component.title : Texts.EMPTY_COMPONENT_TITLE}
           className={ClassNames.ALLOWED_COMPONENT_PLACEHOLDER}
         />
       ))}
diff --git a/src/constants/texts.ts b/src/constants/texts.ts
index b96158c5..c1f3f247 100644
--- a/src/constants/texts.ts
+++ b/src/constants/texts.ts
@@ -18,4 +18,5 @@ export const Texts = Object.freeze({
    * The label to be displayed when no components are allowed in AllowedComponentsContainer
    */
   EMPTY_LABEL: 'No allowed components',
+  EMPTY_COMPONENT_TITLE: '–',
 });
diff --git a/test/components/AllowedComponentsContainer.test.tsx b/test/components/AllowedComponentsContainer.test.tsx
index 6105514e..02b371a2 100644
--- a/test/components/AllowedComponentsContainer.test.tsx
+++ b/test/components/AllowedComponentsContainer.test.tsx
@@ -14,6 +14,7 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import AllowedComponentsContainer from '../../src/components/AllowedComponentsContainer';
 import { AllowedComponentList } from '../../src/types/AEMModel';
+import { Texts } from '../../src/constants';
 
 describe('AllowedComponentsContainer ->', () => {
   const DEFAULT_TITLE = 'Layout Container';
@@ -84,4 +85,36 @@ describe('AllowedComponentsContainer ->', () => {
       expect(allowedComponentsContainer.querySelectorAll(ALLOWED_COMPONENT_PLACEHOLDER_SELECTOR).length).toEqual(2);
     });
   });
+
+  describe('AllowedComponentPlaceholder ->', () => {
+    const renderAllowedComponentPlaceholder = ({ title = null, path = '' }) => {
+      const allowedComponents: AllowedComponentList = {
+        applicable: true,
+        components: [
+          {
+            path,
+            title,
+          },
+        ],
+      };
+      render(generateAllowedComponentsContainer(allowedComponents));
+      const node = screen.getByTestId('testcontainer');
+      return node.querySelector(ALLOWED_COMPONENT_PLACEHOLDER_SELECTOR) as HTMLElement;
+    };
+
+    it('should contain title', () => {
+      const placeholder = renderAllowedComponentPlaceholder({ title: COMPONENT_TEXT_TITLE });
+      expect(placeholder.dataset.emptytext).toEqual(COMPONENT_TEXT_TITLE);
+    });
+
+    it('should contain empty title when none provided', () => {
+      const placeholder = renderAllowedComponentPlaceholder({});
+      expect(placeholder.dataset.emptytext).toEqual(Texts.EMPTY_COMPONENT_TITLE);
+    });
+
+    it('should contain path', () => {
+      const placeholder = renderAllowedComponentPlaceholder({ path: COMPONENT_TEXT_PATH });
+      expect(placeholder.dataset.cqDataPath).toEqual(COMPONENT_TEXT_PATH);
+    });
+  });
 });