diff --git a/packages/react-components/src/components/Avatar/index.ts b/packages/react-components/src/components/Avatar/index.ts
index d3fb6dfa7..4a3dd72a4 100644
--- a/packages/react-components/src/components/Avatar/index.ts
+++ b/packages/react-components/src/components/Avatar/index.ts
@@ -1 +1,2 @@
 export { Avatar } from './Avatar';
+export type { AvatarProps } from './Avatar';
diff --git a/packages/react-components/src/components/Modal/Modal.module.scss b/packages/react-components/src/components/Modal/Modal.module.scss
index f90d8e758..eb367202f 100644
--- a/packages/react-components/src/components/Modal/Modal.module.scss
+++ b/packages/react-components/src/components/Modal/Modal.module.scss
@@ -13,7 +13,6 @@
 
   &--full-space {
     padding: 0;
-    overflow: hidden;
   }
 
   &__overlay {
diff --git a/packages/react-components/src/components/Modal/Modal.stories.css b/packages/react-components/src/components/Modal/Modal.stories.css
index b2f9c00fb..e4c5e5817 100644
--- a/packages/react-components/src/components/Modal/Modal.stories.css
+++ b/packages/react-components/src/components/Modal/Modal.stories.css
@@ -24,6 +24,11 @@
   width: 100%;
 }
 
+.full-space-wrapper img {
+  border-top-left-radius: var(--radius-3);
+  border-top-right-radius: var(--radius-3);
+}
+
 .full-space-content {
   display: flex;
   flex-direction: column;
diff --git a/packages/react-components/src/components/Modal/Modal.stories.tsx b/packages/react-components/src/components/Modal/Modal.stories.tsx
index b9ce6ab2d..6bcbdff81 100644
--- a/packages/react-components/src/components/Modal/Modal.stories.tsx
+++ b/packages/react-components/src/components/Modal/Modal.stories.tsx
@@ -23,6 +23,7 @@ import {
 export default {
   title: 'Components/Modal',
   component: ModalComponent,
+  subcomponents: { ModalHeader },
   parameters: {
     viewMode: 'story',
     previewTabs: {
@@ -96,6 +97,19 @@ ModalWithLabeledHeader.args = {
 export const ModalWithFullSpaceContent = StoryTemplate.bind({});
 ModalWithFullSpaceContent.args = {
   ...defaultModalProps,
+  labelHeading: (
+    <ModalHeader
+      title="Modal Header"
+      avatarProps={{
+        type: 'image',
+        size: 'small',
+        src: 'https://cdn-labs.livechat-files.com/api/file/lc/img/100019504/df59da4b5b0cdb6030efb08787fd255d.jpg',
+      }}
+    >
+      {' '}
+      Modal description{' '}
+    </ModalHeader>
+  ),
   children: <ModalFullSpaceContent />,
   fullSpaceContent: true,
   footer: null,
diff --git a/packages/react-components/src/components/Modal/Modal.tsx b/packages/react-components/src/components/Modal/Modal.tsx
index 669cd52cf..c03649375 100644
--- a/packages/react-components/src/components/Modal/Modal.tsx
+++ b/packages/react-components/src/components/Modal/Modal.tsx
@@ -94,11 +94,7 @@ export const Modal: React.FC<ModalProps> = ({
       )}
       <div
         data-testid="modal-body"
-        className={cx(
-          styles[`${baseClass}__body`],
-          fullSpaceContent && styles[`${baseClass}__body--full-space`],
-          contentClassName
-        )}
+        className={cx(styles[`${baseClass}__body`], contentClassName)}
       >
         {isTextContent ? <Text as="div">{children}</Text> : children}
       </div>
diff --git a/packages/react-components/src/components/Modal/components/ModalHeader.module.scss b/packages/react-components/src/components/Modal/components/ModalHeader.module.scss
index 0e38b8849..1251b7351 100644
--- a/packages/react-components/src/components/Modal/components/ModalHeader.module.scss
+++ b/packages/react-components/src/components/Modal/components/ModalHeader.module.scss
@@ -1,8 +1,9 @@
 .modal-header {
   display: flex;
+  align-items: center;
   justify-content: flex-start;
 
-  &__heading-icon {
+  &__heading-left-node {
     margin-right: 12px;
   }
 
diff --git a/packages/react-components/src/components/Modal/components/ModalHeader.tsx b/packages/react-components/src/components/Modal/components/ModalHeader.tsx
index 2dce7b71f..071ee809b 100644
--- a/packages/react-components/src/components/Modal/components/ModalHeader.tsx
+++ b/packages/react-components/src/components/Modal/components/ModalHeader.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 
 import { cx } from '@emotion/css';
 
+import { Avatar, AvatarProps } from '../../Avatar';
 import { Icon, IconProps } from '../../Icon';
 import { Heading, Text } from '../../Typography';
 
@@ -10,15 +11,32 @@ import styles from './ModalHeader.module.scss';
 const baseClass = 'modal-header';
 
 export interface ModalHeaderProps {
+  /**
+   * Set the header title
+   */
   title?: React.ReactNode;
+  /**
+   * Set to display the icon
+   */
   iconProps?: IconProps;
+  /**
+   * Set to display avatar
+   */
+  avatarProps?: AvatarProps;
+  /**
+   * Children element
+   */
   children?: React.ReactNode;
+  /**
+   * Define class name for container
+   */
   className?: 'string';
 }
 
 export const ModalHeader: React.FC<ModalHeaderProps> = ({
   title,
   iconProps,
+  avatarProps,
   children,
   className = '',
 }) => {
@@ -27,7 +45,16 @@ export const ModalHeader: React.FC<ModalHeaderProps> = ({
   return (
     <div className={mergedClassNames}>
       {iconProps && (
-        <Icon className={styles[`${baseClass}__heading-icon`]} {...iconProps} />
+        <Icon
+          className={styles[`${baseClass}__heading-left-node`]}
+          {...iconProps}
+        />
+      )}
+      {avatarProps && (
+        <Avatar
+          className={styles[`${baseClass}__heading-left-node`]}
+          {...avatarProps}
+        />
       )}
       <div className={styles[`${baseClass}__heading-body`]}>
         <Heading