diff --git a/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/contacts/components/ActivitiesChartTimeline.tsx b/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/contacts/components/ActivitiesChartTimeline.tsx
index 8634a20464f0b9..6ce9d0517ff3b9 100644
--- a/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/contacts/components/ActivitiesChartTimeline.tsx
+++ b/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/contacts/components/ActivitiesChartTimeline.tsx
@@ -154,7 +154,7 @@ const ActivitiesChartTimeline: React.FC<IActivitiesChartTimelineProps> = ({
 			{!!history.length && (
 				<div className='selected-info'>
 					<div className='d-flex align-items-baseline'>
-						<h4>{sub(activitiesLabel, [date])}</h4>
+						<div className='h4'>{sub(activitiesLabel, [date])}</div>
 
 						{hasSelectedPoint && (
 							<ClayButton
diff --git a/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/contacts/components/distribution-card/AddPropertyForm.jsx b/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/contacts/components/distribution-card/AddPropertyForm.jsx
index 2a687533f149b6..d41c5835e9cb1e 100644
--- a/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/contacts/components/distribution-card/AddPropertyForm.jsx
+++ b/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/contacts/components/distribution-card/AddPropertyForm.jsx
@@ -103,11 +103,11 @@ const AddPropertyForm = ({
 			<div className='row d-flex flex-column flex-grow-1'>
 				<div className='col-xl-5 d-flex flex-column flex-grow-1'>
 					<div className='description'>
-						<h4>
+						<div className='h4'>
 							{Liferay.Language.get(
 								'add-a-breakdown-by-individual-attribute'
 							)}
-						</h4>
+						</div>
 
 						<p>
 							{Liferay.Language.get(
diff --git a/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/contacts/hoc/segment/WithBaseEdit.jsx b/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/contacts/hoc/segment/WithBaseEdit.jsx
index c1a4939ea8570e..2cd726d0d7b7d4 100644
--- a/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/contacts/hoc/segment/WithBaseEdit.jsx
+++ b/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/contacts/hoc/segment/WithBaseEdit.jsx
@@ -74,11 +74,11 @@ export default WrappedComponent => {
 			open(modalTypes.CONFIRMATION_MODAL, {
 				message: (
 					<div>
-						<h4 className='text-secondary'>
+						<div className='h4 text-secondary'>
 							{Liferay.Language.get(
 								'are-you-sure-you-want-to-delete-this-segment'
 							)}
-						</h4>
+						</div>
 
 						<p>
 							{Liferay.Language.get(
diff --git a/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/contacts/pages/BaseInterestDetails.tsx b/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/contacts/pages/BaseInterestDetails.tsx
index 086e2cb6197bce..3aaeed1b3da9a0 100644
--- a/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/contacts/pages/BaseInterestDetails.tsx
+++ b/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/contacts/pages/BaseInterestDetails.tsx
@@ -223,13 +223,13 @@ const BaseInterestDetails: React.FC<IBaseInterestDetailsProps> = ({
 						{navigationItems.map(({active, href, label}) => (
 							<ClayNavigationBar.Item active={active} key={label}>
 								<ClayLink href={href}>
-									<h4>{label}</h4>
+									<div className='h4'>{label}</div>
 								</ClayLink>
 							</ClayNavigationBar.Item>
 						))}
 					</ClayNavigationBar>
 
-					<h4 className='list-title'>
+					<div className='h4 list-title'>
 						{tabId === tabIds.INDIVIDUALS
 							? sub(
 									Liferay.Language.get(
@@ -248,7 +248,7 @@ const BaseInterestDetails: React.FC<IBaseInterestDetailsProps> = ({
 									),
 									[interestName]
 							  )}
-					</h4>
+					</div>
 				</Card.Header>
 
 				<InterestDetailsList
diff --git a/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/event-analysis/hocs/EventAnalysisListCard.tsx b/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/event-analysis/hocs/EventAnalysisListCard.tsx
index ae2318d96c83ae..82b39000877720 100644
--- a/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/event-analysis/hocs/EventAnalysisListCard.tsx
+++ b/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/event-analysis/hocs/EventAnalysisListCard.tsx
@@ -91,7 +91,7 @@ const EventAnalysisListCard: React.FC<PropsFromRedux> = ({
 
 		const message = (
 			<div>
-				<h4 className='text-secondary'>
+				<div className='h4 text-secondary'>
 					{getPluralMessage(
 						Liferay.Language.get(
 							'are-you-sure-you-want-to-delete-this-analysis'
@@ -101,7 +101,7 @@ const EventAnalysisListCard: React.FC<PropsFromRedux> = ({
 						),
 						eventAnalysisIds.length
 					)}
-				</h4>
+				</div>
 
 				<p>
 					{getPluralMessage(
diff --git a/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/experiments/components/summary-card/SummaryDraftCard.tsx b/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/experiments/components/summary-card/SummaryDraftCard.tsx
index 220b94ca341d3d..816fb23fd6436d 100644
--- a/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/experiments/components/summary-card/SummaryDraftCard.tsx
+++ b/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/experiments/components/summary-card/SummaryDraftCard.tsx
@@ -117,7 +117,7 @@ export const SummaryDraftCard = ({
 										)}
 									>
 										<Card.Body>
-											<h4>{title}</h4>
+											<div className='h4'>{title}</div>
 
 											<Description className='analytics-summary-card-step-content-description' />
 										</Card.Body>
diff --git a/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/individual/profile/components/DetailsCard.jsx b/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/individual/profile/components/DetailsCard.jsx
index d2c88fc1dee638..0ff9c051351833 100644
--- a/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/individual/profile/components/DetailsCard.jsx
+++ b/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/individual/profile/components/DetailsCard.jsx
@@ -39,7 +39,7 @@ export default class DetailsCard extends React.PureComponent {
 				<Card.Body>
 					<Avatar circle entity={individual} size='xl' />
 
-					{name && <h4>{name}</h4>}
+					{name && <div className='h4'>{name}</div>}
 
 					{jobTitle && <div className='job-title'>{jobTitle}</div>}
 
diff --git a/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/individual/profile/components/ProfileCard.tsx b/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/individual/profile/components/ProfileCard.tsx
index ba7e6bf2f7e8d9..ad08640a40944e 100644
--- a/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/individual/profile/components/ProfileCard.tsx
+++ b/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/individual/profile/components/ProfileCard.tsx
@@ -272,7 +272,7 @@ const ProfileCard: React.FC<IProfileCardProps> = ({
 
 					<div className='selected-info'>
 						<div className='activities-date d-flex align-items-baseline'>
-							<h4>
+							<div className='h4'>
 								{activityHistory?.length
 									? sub(
 											Liferay.Language.get(
@@ -283,7 +283,7 @@ const ProfileCard: React.FC<IProfileCardProps> = ({
 									: Liferay.Language.get(
 											'individuals-events'
 									  )}
-							</h4>
+							</div>
 
 							{selected && (
 								<ClayButton
diff --git a/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/segment/components/Growth.tsx b/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/segment/components/Growth.tsx
index f176635a4d8880..84157817f05142 100644
--- a/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/segment/components/Growth.tsx
+++ b/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/segment/components/Growth.tsx
@@ -544,7 +544,7 @@ export const SegmentGrowthChart: React.FC<ISegmentGrowthChartProps> = ({
 
 export const SelectedPointInfo: React.FC = () => (
 	<div className='selected-point-info'>
-		<h4>{Liferay.Language.get('known-members')}</h4>
+		<div className='h4'>{Liferay.Language.get('known-members')}</div>
 	</div>
 );
 
diff --git a/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/segment/pages/List.tsx b/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/segment/pages/List.tsx
index 4f8c3e2b2e990e..b25c1a487b3b94 100644
--- a/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/segment/pages/List.tsx
+++ b/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/segment/pages/List.tsx
@@ -214,11 +214,11 @@ export const List: React.FC<IListProps> = ({
 		open(modalTypes.CONFIRMATION_MODAL, {
 			message: (
 				<div>
-					<h4 className='text-secondary'>
+					<div className='h4 text-secondary'>
 						{Liferay.Language.get(
 							'are-you-sure-you-want-to-delete-this-segment'
 						)}
-					</h4>
+					</div>
 
 					<p>
 						{Liferay.Language.get(
diff --git a/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/settings/apis/components/GenerateTokenCard.tsx b/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/settings/apis/components/GenerateTokenCard.tsx
index 358356eb3f8b53..4d07c999358898 100644
--- a/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/settings/apis/components/GenerateTokenCard.tsx
+++ b/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/settings/apis/components/GenerateTokenCard.tsx
@@ -45,7 +45,9 @@ const GenerateTokenCard: React.FC<IGenerateTokenCardProps> = ({
 	return (
 		<Card>
 			<Card.Body>
-				<h4>{Liferay.Language.get('create-new-access-token')}</h4>
+				<div className='h4'>
+					{Liferay.Language.get('create-new-access-token')}
+				</div>
 				<div className='col-md-5 mt-2 pl-0'>
 					<Form.Group>
 						<label htmlFor='picker' id='picker-label'>
diff --git a/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/settings/apis/pages/AccessTokenList.tsx b/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/settings/apis/pages/AccessTokenList.tsx
index 950f3c4442b2a5..197c7c5661bfcd 100644
--- a/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/settings/apis/pages/AccessTokenList.tsx
+++ b/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/settings/apis/pages/AccessTokenList.tsx
@@ -115,9 +115,9 @@ const TokenList: React.FC<
 			<Card>
 				<Card.Body>
 					<div className='align-items-start d-flex flex-column justify-content-between'>
-						<h4 className='mb-4'>
+						<div className='h4 mb-4'>
 							{Liferay.Language.get('token-information')}
-						</h4>
+						</div>
 
 						<h5>{Liferay.Language.get('root-endpoint')}</h5>
 
diff --git a/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/settings/components/DeleteDataSource.jsx b/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/settings/components/DeleteDataSource.jsx
index 1fdab6831c42a7..d718f3f7033200 100644
--- a/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/settings/components/DeleteDataSource.jsx
+++ b/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/settings/components/DeleteDataSource.jsx
@@ -180,9 +180,9 @@ export class DeleteDataSource extends React.Component {
 		open(modalTypes.CONFIRMATION_MODAL, {
 			message: (
 				<div>
-					<h4 className='text-secondary'>
+					<div className='h4 text-secondary'>
 						{pageActionConfirmationText}
-					</h4>
+					</div>
 
 					<b>
 						{Liferay.Language.get(
@@ -291,7 +291,7 @@ export class DeleteDataSource extends React.Component {
 								<div>{deleteMessage}</div>
 
 								<div className='copy-container'>
-									<h4>
+									<div className='h4'>
 										{sub(
 											Liferay.Language.get(
 												'copy-the-following-x'
@@ -306,7 +306,7 @@ export class DeleteDataSource extends React.Component {
 											],
 											false
 										)}
-									</h4>
+									</div>
 								</div>
 
 								<Form.Input
diff --git a/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/settings/components/SelectDataSource.tsx b/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/settings/components/SelectDataSource.tsx
index a0e834a87967b8..5838afc6c77561 100644
--- a/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/settings/components/SelectDataSource.tsx
+++ b/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/settings/components/SelectDataSource.tsx
@@ -25,7 +25,7 @@ const SelectDataSource: React.FC<ISelectDataSourceProps> = ({
 	<div className={getCN('select-data-source-root', className)}>
 		{sections.map(({dataSources, title}) => (
 			<section key={title}>
-				<h4 className='text-uppercase section-title'>{title}</h4>
+				<div className='h4 text-uppercase section-title'>{title}</div>
 
 				<div className='section-items'>
 					{dataSources.map(
@@ -47,7 +47,7 @@ const SelectDataSource: React.FC<ISelectDataSourceProps> = ({
 
 									<div className='details'>
 										<div className='title'>
-											<h4>{name}</h4>
+											<div className='h4'>{name}</div>
 										</div>
 
 										<div className='subtitle'>
@@ -71,7 +71,7 @@ const SelectDataSource: React.FC<ISelectDataSourceProps> = ({
 
 									<div className='details'>
 										<div className='title'>
-											<h4>{name}</h4>
+											<div className='h4'>{name}</div>
 										</div>
 
 										<div className='subtitle'>
diff --git a/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/settings/components/data-source/BaseFieldMappingView.jsx b/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/settings/components/data-source/BaseFieldMappingView.jsx
index a7e9bc4285e969..945a65498826ad 100644
--- a/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/settings/components/data-source/BaseFieldMappingView.jsx
+++ b/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/settings/components/data-source/BaseFieldMappingView.jsx
@@ -173,7 +173,7 @@ export default class BaseFieldMappingView extends React.Component {
 				<Sheet>
 					<Sheet.Header>
 						<Sheet.Section>
-							<h4>{title}</h4>
+							<div className='h4'>{title}</div>
 
 							<Sheet.Text>{details}</Sheet.Text>
 						</Sheet.Section>
diff --git a/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/settings/components/data-source/BaseTabsPage.jsx b/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/settings/components/data-source/BaseTabsPage.jsx
index 2670cfcbe05cf1..e81bb6100b97e6 100644
--- a/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/settings/components/data-source/BaseTabsPage.jsx
+++ b/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/settings/components/data-source/BaseTabsPage.jsx
@@ -96,7 +96,9 @@ export default class BaseTabsPage extends React.Component {
 										: toRoute(addRoute, routeOptions)
 								}
 							>
-								<h4>{Liferay.Language.get('authorization')}</h4>
+								<div className='h4'>
+									{Liferay.Language.get('authorization')}
+								</div>
 							</Nav.Item>
 
 							<Nav.Item
@@ -115,11 +117,11 @@ export default class BaseTabsPage extends React.Component {
 										: '#'
 								}
 							>
-								<h4>
+								<div className='h4'>
 									{Liferay.Language.get(
 										'configure-data-source'
 									)}
-								</h4>
+								</div>
 
 								{!!id &&
 									getPendingConfigurationSticker(
diff --git a/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/settings/components/liferay/Overview.tsx b/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/settings/components/liferay/Overview.tsx
index 65b25a6e56e3f5..2fada8ce5a8b69 100644
--- a/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/settings/components/liferay/Overview.tsx
+++ b/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/settings/components/liferay/Overview.tsx
@@ -272,7 +272,7 @@ class LiferayOverview extends React.Component<ILiferayOverviewProps> {
 						}: ConfigurationItem) => (
 							<Sheet.Section key={title} lastChildMargin>
 								<div className='mb-1 d-flex align-items-center'>
-									<h4 className='mb-0 mr-2'>{title}</h4>
+									<div className='h4 mb-0 mr-2'>{title}</div>
 
 									{getStatusLabel(
 										getConfigurationStatus(dataSource)
diff --git a/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/settings/data-privacy/pages/Overview.tsx b/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/settings/data-privacy/pages/Overview.tsx
index 63902905b3e482..f72d04ddebd332 100644
--- a/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/settings/data-privacy/pages/Overview.tsx
+++ b/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/settings/data-privacy/pages/Overview.tsx
@@ -176,11 +176,11 @@ export const Overview: React.FC<IOverviewProps> = ({close, groupId, open}) => {
 							<div className='container'>
 								<div className='row justify-content-between'>
 									<div className='col-lg-8'>
-										<h4>
+										<div className='h4'>
 											{Liferay.Language.get(
 												'retention-period'
 											)}
-										</h4>
+										</div>
 
 										<p className='text-secondary'>
 											{Liferay.Language.get(
@@ -217,11 +217,11 @@ export const Overview: React.FC<IOverviewProps> = ({close, groupId, open}) => {
 
 								<div className='row mt-3 justify-content-between'>
 									<div className='col-lg-8'>
-										<h4>
+										<div className='h4'>
 											{Liferay.Language.get(
 												'request-log'
 											)}
-										</h4>
+										</div>
 
 										<p className='text-secondary'>
 											{Liferay.Language.get(
@@ -259,11 +259,11 @@ export const Overview: React.FC<IOverviewProps> = ({close, groupId, open}) => {
 
 								<div className='row mt-3 justify-content-between'>
 									<div className='col-lg-8'>
-										<h4>
+										<div className='h4'>
 											{Liferay.Language.get(
 												'suppressed-users'
 											)}
-										</h4>
+										</div>
 
 										<p className='text-secondary'>
 											{Liferay.Language.get(
diff --git a/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/settings/definitions/pages/InterestTopics.tsx b/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/settings/definitions/pages/InterestTopics.tsx
index e8494ccc424b79..c6a293d1f7c47f 100644
--- a/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/settings/definitions/pages/InterestTopics.tsx
+++ b/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/settings/definitions/pages/InterestTopics.tsx
@@ -304,7 +304,9 @@ const InterestTopics: React.FC<IInterestTopicsProps> = ({
 				)}
 			</p>
 
-			<h4>{Liferay.Language.get('keywords-blocklist')}</h4>
+			<div className='h4'>
+				{Liferay.Language.get('keywords-blocklist')}
+			</div>
 			<p>
 				{Liferay.Language.get(
 					'keywords-can-be-excluded-by-adding-them-to-a-blocklist-manage-the-keywords-that-you-dont-want-listed-in-liferay-analytics-cloud-and-dont-want-them-to-be-used-to-generate-content-recommendation-in-liferay-dxp'
diff --git a/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/settings/recommendations/hocs/RecommendationList.tsx b/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/settings/recommendations/hocs/RecommendationList.tsx
index d40970ec7a5ac2..cf58786b5b1779 100644
--- a/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/settings/recommendations/hocs/RecommendationList.tsx
+++ b/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/settings/recommendations/hocs/RecommendationList.tsx
@@ -190,9 +190,9 @@ const RecommendationList: React.FC<IRecommendationListProps> = ({
 									open(modalTypes.CONFIRMATION_MODAL, {
 										message: (
 											<div>
-												<h4 className='text-secondary'>
+												<div className='h4 text-secondary'>
 													{confirmationMessage}
-												</h4>
+												</div>
 
 												<p>
 													{singleSelectedItem
diff --git a/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/settings/recommendations/pages/View.tsx b/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/settings/recommendations/pages/View.tsx
index 315633b6c4c5ad..c3809251b6e92f 100644
--- a/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/settings/recommendations/pages/View.tsx
+++ b/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/settings/recommendations/pages/View.tsx
@@ -168,14 +168,14 @@ const View: React.FC<IViewProps> = ({addAlert, close, history, job, open}) => {
 												{
 													message: (
 														<div>
-															<h4 className='text-secondary'>
+															<div className='h4 text-secondary'>
 																{sub(
 																	Liferay.Language.get(
 																		'delete-x-and-its-historical-training-output-data'
 																	),
 																	[name]
 																)}
-															</h4>
+															</div>
 
 															<p>
 																{Liferay.Language.get(
diff --git a/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/shared/components/NoResultsDisplay.tsx b/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/shared/components/NoResultsDisplay.tsx
index 1824f95d0e46da..edb4020db7ed68 100644
--- a/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/shared/components/NoResultsDisplay.tsx
+++ b/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/shared/components/NoResultsDisplay.tsx
@@ -69,7 +69,7 @@ const NoResultsDisplay: React.FC<INoResultsDisplayProps> = ({
 			<div className={getCN('no-results-content', {spacer})}>
 				{icon && <NoResultsDisplayIcon {...icon} />}
 
-				{title && <h4 className='no-results-title'>{title}</h4>}
+				{title && <div className='h4 no-results-title'>{title}</div>}
 
 				{description && (
 					<div className='no-results-description'>{description}</div>
diff --git a/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/shared/components/Sheet.jsx b/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/shared/components/Sheet.jsx
index d0b4490e0a6be0..b8ba2f636e9c5f 100644
--- a/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/shared/components/Sheet.jsx
+++ b/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/shared/components/Sheet.jsx
@@ -97,9 +97,9 @@ class TertiaryTitle extends React.Component {
 		const {children, className} = this.props;
 
 		return (
-			<h4 className={getCN('sheet-tertiary-title', className)}>
+			<div className={getCN('h4 sheet-tertiary-title', className)}>
 				{children}
-			</h4>
+			</div>
 		);
 	}
 }
diff --git a/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/shared/components/audience-report/AudienceReport.tsx b/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/shared/components/audience-report/AudienceReport.tsx
index 42dec1d67555b1..19c38cfc8f68d0 100644
--- a/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/shared/components/audience-report/AudienceReport.tsx
+++ b/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/shared/components/audience-report/AudienceReport.tsx
@@ -15,7 +15,7 @@ import {useQuery} from '@apollo/react-hooks';
 
 const AudienceReportTitle: React.FC<IInfoPopoverProps> = ({content, title}) => (
 	<div className='d-inline-flex gap'>
-		<h4 className='mb-3 text-center text-secondary title'>{title}</h4>
+		<div className='h4 mb-3 text-center text-secondary title'>{title}</div>
 
 		{content && <InfoPopover content={content} title={title} />}
 	</div>
diff --git a/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/shared/components/list-group/ItemTitle.jsx b/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/shared/components/list-group/ItemTitle.jsx
index e420f12e7430c1..3a05de6e402ee4 100644
--- a/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/shared/components/list-group/ItemTitle.jsx
+++ b/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/shared/components/list-group/ItemTitle.jsx
@@ -5,14 +5,14 @@ export default class ItemTitle extends React.Component {
 		const {children, className, ...otherProps} = this.props;
 
 		return (
-			<h4
+			<div
 				{...otherProps}
-				className={`list-group-title${
+				className={`h4 list-group-title${
 					className ? ` ${className}` : ''
 				}`}
 			>
 				{children}
-			</h4>
+			</div>
 		);
 	}
 }
diff --git a/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/shared/components/modal/Header.tsx b/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/shared/components/modal/Header.tsx
index 353bcd04cceeaf..da8a716e626bcd 100644
--- a/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/shared/components/modal/Header.tsx
+++ b/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/shared/components/modal/Header.tsx
@@ -20,7 +20,7 @@ const Header: React.FC<IHeaderProps> = ({
 }) => (
 	<div className={getCN('modal-header', className, {border})}>
 		{title && (
-			<h4 className='modal-title'>
+			<div className='h4 modal-title'>
 				{iconSymbol && (
 					<ClayIcon
 						className='icon-root modal-title-indicator'
@@ -29,7 +29,7 @@ const Header: React.FC<IHeaderProps> = ({
 				)}
 
 				{title}
-			</h4>
+			</div>
 		)}
 
 		{!!onClose && (
diff --git a/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/shared/components/modals/ExportLogModal.tsx b/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/shared/components/modals/ExportLogModal.tsx
index fdd1e973611bf3..e287a1926ec72a 100644
--- a/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/shared/components/modals/ExportLogModal.tsx
+++ b/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/shared/components/modals/ExportLogModal.tsx
@@ -46,7 +46,9 @@ const ExportLogModal: React.FC<IExportLogModalProps> = ({
 			<Modal.Body>
 				<p className='text-secondary'>{description}</p>
 
-				<h4>{Liferay.Language.get('request-date-range')}</h4>
+				<div className='h4'>
+					{Liferay.Language.get('request-date-range')}
+				</div>
 
 				<div className='d-flex'>
 					<DateRangeInput
diff --git a/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/shared/components/modals/NewRequestModal.tsx b/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/shared/components/modals/NewRequestModal.tsx
index 87932e47ffc783..6e3a83aaa09087 100644
--- a/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/shared/components/modals/NewRequestModal.tsx
+++ b/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/shared/components/modals/NewRequestModal.tsx
@@ -210,7 +210,9 @@ const NewRequestModal: React.FC<INewRequestModalProps> = ({
 							</p>
 
 							<Form.Group>
-								<h4>{Liferay.Language.get('job-type')}</h4>
+								<div className='h4'>
+									{Liferay.Language.get('job-type')}
+								</div>
 
 								<Form.GroupItem>
 									<Form.Checkbox
@@ -258,9 +260,9 @@ const NewRequestModal: React.FC<INewRequestModalProps> = ({
 							</Form.Group>
 
 							<Form.Group>
-								<h4>
+								<div className='h4'>
 									{Liferay.Language.get('data-subject-id')}
-								</h4>
+								</div>
 
 								<Form.GroupItem>
 									<Form.RadioGroup name='subjectIdType'>
diff --git a/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/shared/components/modals/TestModal.tsx b/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/shared/components/modals/TestModal.tsx
index eab137e95add0e..19351b244751aa 100644
--- a/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/shared/components/modals/TestModal.tsx
+++ b/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/shared/components/modals/TestModal.tsx
@@ -11,7 +11,7 @@ const TestModal: React.FC<{onClose: () => void; title: string}> = ({
 		<Modal.Header onClose={() => onClose} title={title} />
 
 		<Modal.Body inlineScroller>
-			<h4>{'Modal Body'}</h4>
+			<div className='h4'>{'Modal Body'}</div>
 		</Modal.Body>
 
 		<Modal.Footer>
diff --git a/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/shared/components/modals/onboarding-modal/InvitePeople.tsx b/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/shared/components/modals/onboarding-modal/InvitePeople.tsx
index aafcffab78693d..4a85f56ff9575b 100644
--- a/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/shared/components/modals/onboarding-modal/InvitePeople.tsx
+++ b/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/shared/components/modals/onboarding-modal/InvitePeople.tsx
@@ -82,11 +82,11 @@ const InvitePeople: React.FC<IInvitePeopleProps> = ({
 
 				{sent ? (
 					<div className='description text-center'>
-						<h4>
+						<div className='h4'>
 							{Liferay.Language.get(
 								'you-can-see-the-new-members-invitation-status-and-role-permissions-under-user-management-in-settings'
 							)}
-						</h4>
+						</div>
 					</div>
 				) : (
 					<div className='add-emails'>
diff --git a/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/shared/components/modals/onboarding-modal/ReadyToGo.tsx b/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/shared/components/modals/onboarding-modal/ReadyToGo.tsx
index 8f10eb7f3b4f81..0e960eaacf0750 100644
--- a/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/shared/components/modals/onboarding-modal/ReadyToGo.tsx
+++ b/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/shared/components/modals/onboarding-modal/ReadyToGo.tsx
@@ -18,21 +18,21 @@ const ReadyToGo: React.FC<IReadyToGoProps> = ({onClose}) => (
 			</span>
 
 			<div className='d-flex description flex-column text-center'>
-				<h4 className='pb-3'>
+				<div className='h4 pb-3'>
 					{Liferay.Language.get('your-workspace-is-all-set-up')}
-				</h4>
+				</div>
 
-				<h4 className='pb-3'>
+				<div className='h4 pb-3'>
 					{Liferay.Language.get(
 						'tracking-will-start-immediately-however-it-may-take-some-time-for-data-to-appear-in-your-workspace'
 					)}
-				</h4>
+				</div>
 
-				<h4>
+				<div className='h4'>
 					{Liferay.Language.get(
 						'make-sure-to-set-your-time-period-to-last-24-hours-to-see-if-your-data-is-coming-in-correctly'
 					)}
-				</h4>
+				</div>
 			</div>
 		</Modal.Body>
 
diff --git a/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/shared/components/table/Cell.tsx b/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/shared/components/table/Cell.tsx
index f6d2c18e08a12b..035c6757375a8f 100644
--- a/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/shared/components/table/Cell.tsx
+++ b/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/shared/components/table/Cell.tsx
@@ -9,7 +9,7 @@ interface ICellProps {
 const Cell: React.FC<ICellProps> = ({children, className, title}) => (
 	<td className={className}>
 		{title ? (
-			<h4 className='table-title text-truncate'>{children}</h4>
+			<div className='h4 table-title text-truncate'>{children}</div>
 		) : (
 			children
 		)}
diff --git a/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/sites/touchpoints/components/FilterBySegment.tsx b/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/sites/touchpoints/components/FilterBySegment.tsx
index b8ae75732cb8d9..6be768d5241518 100644
--- a/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/sites/touchpoints/components/FilterBySegment.tsx
+++ b/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/sites/touchpoints/components/FilterBySegment.tsx
@@ -225,11 +225,11 @@ const Dropdown = ({channelId, groupId, items, loading, onFilterChange}) => {
 								className='d-flex flex-column justify-content-center'
 								style={{minHeight: 240}}
 							>
-								<h4 className='no-results-title'>
+								<div className='h4 no-results-title'>
 									{Liferay.Language.get(
 										'there-are-no-results-found'
 									)}
-								</h4>
+								</div>
 
 								{Liferay.Language.get(
 									'please-try-a-different-search-term'
@@ -249,11 +249,11 @@ const Dropdown = ({channelId, groupId, items, loading, onFilterChange}) => {
 								className='d-flex flex-column justify-content-center'
 								style={{minHeight: 240}}
 							>
-								<h4 className='no-results-title'>
+								<div className='h4 no-results-title'>
 									{Liferay.Language.get(
 										'there-are-no-segments'
 									)}
-								</h4>
+								</div>
 
 								{Liferay.Language.get(
 									'start-by-creating-a-segment'
diff --git a/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/ui-kit/pages/StickerKit.jsx b/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/ui-kit/pages/StickerKit.jsx
index 0f71ac723bb26d..bce1e1ffcc7d34 100644
--- a/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/ui-kit/pages/StickerKit.jsx
+++ b/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/ui-kit/pages/StickerKit.jsx
@@ -6,7 +6,7 @@ class StickerKit extends React.Component {
 	render() {
 		return (
 			<div>
-				<h4>{'Displays'}</h4>
+				<div className='h4'>{'Displays'}</div>
 
 				<Row>
 					{Sticker.DISPLAYS.map((display, index) => (
@@ -16,7 +16,7 @@ class StickerKit extends React.Component {
 					))}
 				</Row>
 
-				<h4>{'Sizes'}</h4>
+				<div className='h4'>{'Sizes'}</div>
 
 				<Row className='align-items-center'>
 					{Sticker.SIZES.map((size, index) => (
diff --git a/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/ui-kit/pages/TableKit.jsx b/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/ui-kit/pages/TableKit.jsx
index 80f3a3558b5f00..bf30504b0a46e9 100644
--- a/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/ui-kit/pages/TableKit.jsx
+++ b/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/ui-kit/pages/TableKit.jsx
@@ -87,7 +87,7 @@ class CustomRenderer extends React.Component {
 					this.props.className ? ` ${this.props.className}` : ''
 				}`}
 			>
-				<h4 className='table-title'>{name}</h4>
+				<div className='h4 table-title'>{name}</div>
 
 				{properties.jobTitle}
 			</td>
diff --git a/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/ui-kit/pages/index.jsx b/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/ui-kit/pages/index.jsx
index a2a2b1e14d8a40..351f0a4a713022 100644
--- a/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/ui-kit/pages/index.jsx
+++ b/modules/dxp/apps/osb/osb-faro/osb-faro-web/src/main/js/ui-kit/pages/index.jsx
@@ -83,7 +83,9 @@ export default class UIKit extends React.Component {
 											/>
 										</form>
 
-										<h4>{'Component List'}</h4>
+										<div className='h4'>
+											{'Component List'}
+										</div>
 
 										<div className='active-item-header'>
 											{'Now Showing: '}