diff --git a/packages/console/src/components/ModalLayout/index.module.scss b/packages/console/src/components/ModalLayout/index.module.scss
index e1cf2cd39..0f255bb68 100644
--- a/packages/console/src/components/ModalLayout/index.module.scss
+++ b/packages/console/src/components/ModalLayout/index.module.scss
@@ -17,6 +17,12 @@
     flex-shrink: 0;
     margin-bottom: _.unit(6);
 
+    .iconAndTitle {
+      display: flex;
+      flex-direction: column;
+      gap: _.unit(3);
+    }
+
     .closeIcon {
       color: var(--color-text-secondary);
     }
diff --git a/packages/console/src/components/ModalLayout/index.tsx b/packages/console/src/components/ModalLayout/index.tsx
index f7b32463c..f865f2b8b 100644
--- a/packages/console/src/components/ModalLayout/index.tsx
+++ b/packages/console/src/components/ModalLayout/index.tsx
@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import type { ReactNode } from 'react';
+import { type ReactElement, type ReactNode } from 'react';
 
 import Close from '@/assets/images/close.svg';
 
@@ -16,6 +16,7 @@ type Props = {
   onClose?: () => void;
   className?: string;
   size?: 'medium' | 'large' | 'xlarge';
+  headerIcon?: ReactElement;
 } & Pick<CardTitleProps, 'learnMoreLink' | 'title' | 'subtitle' | 'isWordWrapEnabled'>;
 
 function ModalLayout({
@@ -24,12 +25,16 @@ function ModalLayout({
   onClose,
   className,
   size = 'medium',
+  headerIcon,
   ...cardTitleProps
 }: Props) {
   return (
     <Card className={classNames(styles.container, styles[size])}>
       <div className={styles.header}>
-        <CardTitle {...cardTitleProps} />
+        <div className={styles.iconAndTitle}>
+          {headerIcon}
+          <CardTitle {...cardTitleProps} />
+        </div>
         {onClose && (
           <IconButton
             onClick={() => {