diff --git a/src/components/Modal/component.stories.tsx b/src/components/Modal/component.stories.tsx
index 731eb33..9477286 100644
--- a/src/components/Modal/component.stories.tsx
+++ b/src/components/Modal/component.stories.tsx
@@ -195,6 +195,15 @@ export const Default: Story = {
   render: (args) => <ModalStory {...args}><ModalBody /></ModalStory>,
 };
 
+/** Long unbroken title that wraps while the close button stays inside the modal. */
+export const LongTitle: Story = {
+  args: {
+    ...Default.args,
+    title: 'Averyveryveryveryveryveryveryveryveryverylongwordwithoutspaces',
+  },
+  render: (args) => <ModalStory {...args}><ModalBody /></ModalStory>,
+};
+
 /** Modal without a header close button, for mandatory-action or externally-controlled flows. */
 export const HideCloseButton: Story = {
   args: {
diff --git a/src/components/Modal/component.tsx b/src/components/Modal/component.tsx
index 6376cf1..d7b3146 100644
--- a/src/components/Modal/component.tsx
+++ b/src/components/Modal/component.tsx
@@ -1,7 +1,6 @@
 import React, { useCallback } from 'react';
 import ReactModal from 'react-modal';
 import * as Styled from './styles';
-import { BBBTypography } from '../Typography';
 import { MdClose } from 'react-icons/md';
 import { BBBDivider } from '../Divider';
 import { ModalProps } from './types';
@@ -61,11 +60,11 @@ const Modal: React.FC<ModalProps> = ({
       testId={testId}
     >
       <Styled.ModalHeader>
-        <BBBTypography
+        <Styled.ModalTitle
           variant="header"
         >
           {title}
-        </BBBTypography>
+        </Styled.ModalTitle>
         {!hideCloseButton && (
           <BBButton
             layout="circle"
diff --git a/src/components/Modal/styles.ts b/src/components/Modal/styles.ts
index 1002ac9..af03f09 100644
--- a/src/components/Modal/styles.ts
+++ b/src/components/Modal/styles.ts
@@ -3,6 +3,7 @@ import { Styles } from 'react-modal';
 import * as React from 'react';
 import { spacingLarge, spacingMedium, spacingSmallMedium, borderRadiusDefault } from '../../stylesheets/sizing';
 import { colorWhite, colorOverlay } from '../../stylesheets/palette';
+import { BBBTypography } from '../Typography';
 import { StyledModalBodyProps, StyledModalFooterProps } from './types';
 
 export const modalStyles: Styles = {
@@ -43,6 +44,13 @@ export const ModalHeader = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
+  gap: ${spacingMedium};
+`;
+
+export const ModalTitle = styled(BBBTypography)`
+  flex: 1;
+  min-width: 0;
+  overflow-wrap: anywhere;
 `;
 
 export const ModalScrollArea = styled.div<StyledModalBodyProps>`