diff --git a/frontend/src/pages/AlertDetails/AlertDetails.tsx b/frontend/src/pages/AlertDetails/AlertDetails.tsx
index 373f2fb359c..5ee95dfce24 100644
--- a/frontend/src/pages/AlertDetails/AlertDetails.tsx
+++ b/frontend/src/pages/AlertDetails/AlertDetails.tsx
@@ -8,7 +8,7 @@ import RouteTab from 'components/RouteTab';
 import Spinner from 'components/Spinner';
 import ROUTES from 'constants/routes';
 import history from 'lib/history';
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
 
@@ -36,12 +36,12 @@ function AlertDetailsStatusRenderer({
 	return <AlertHeader alertDetails={alertRuleDetails} />;
 }
 
-export function BreadCrumbItem({
+function BreadCrumbItem({
 	title,
 	isLast,
 	route,
 }: {
-	title: string | React.ReactNode | null;
+	title: string | null;
 	isLast?: boolean;
 	route?: string;
 }): JSX.Element {
diff --git a/frontend/src/pages/Integrations/CloudIntegrationPage/CloudIntegrationPage.style.scss b/frontend/src/pages/Integrations/CloudIntegrationPage/CloudIntegrationPage.style.scss
index 0d0c3abee51..56f052275c5 100644
--- a/frontend/src/pages/Integrations/CloudIntegrationPage/CloudIntegrationPage.style.scss
+++ b/frontend/src/pages/Integrations/CloudIntegrationPage/CloudIntegrationPage.style.scss
@@ -41,70 +41,3 @@
 		cursor: pointer;
 	}
 }
-
-.hero-section {
-	height: 308px;
-	padding: 26px 16px;
-	display: flex;
-	gap: 24px;
-	position: relative;
-	overflow: hidden;
-	background-position: right;
-	background-size: contain;
-	background-repeat: no-repeat;
-	border-bottom: 1px solid var(--bg-slate-500);
-
-	&__icon {
-		height: fit-content;
-		background-color: var(--bg-ink-400);
-		padding: 12px;
-		border: 1px solid var(--bg-ink-300);
-		border-radius: 6px;
-		width: 60px;
-		height: 60px;
-		display: flex;
-		align-items: center;
-		img {
-			width: 100%;
-		}
-	}
-
-	&__details {
-		display: flex;
-		flex-direction: column;
-		gap: 12px;
-
-		.title {
-			color: var(--bg-vanilla-100);
-			font-size: 24px;
-			font-weight: 500;
-			line-height: 20px; /* 83.333% */
-			letter-spacing: -0.12px;
-		}
-
-		.description {
-			color: var(--bg-vanilla-400);
-			font-size: 12px;
-			font-weight: 400;
-			line-height: 18px; /* 150% */
-		}
-
-		.hero-section__buttons {
-			margin-top: 12px;
-		}
-
-		.hero-section__button {
-			font-family: 'Inter';
-			background: var(--bg-robin-500);
-			border: none;
-			padding: 8px 17px;
-			color: var(--bg-vanilla-100);
-			border-radius: 2px;
-			cursor: pointer;
-			color: var(--Vanilla-100, #fff);
-			font-size: 12px;
-			font-weight: 500;
-			line-height: 16px;
-		}
-	}
-}
diff --git a/frontend/src/pages/Integrations/CloudIntegrationPage/HeroSection/HeroSection.style.scss b/frontend/src/pages/Integrations/CloudIntegrationPage/HeroSection/HeroSection.style.scss
new file mode 100644
index 00000000000..42882521a00
--- /dev/null
+++ b/frontend/src/pages/Integrations/CloudIntegrationPage/HeroSection/HeroSection.style.scss
@@ -0,0 +1,66 @@
+.hero-section {
+	height: 308px;
+	padding: 26px 16px;
+	display: flex;
+	gap: 24px;
+	position: relative;
+	overflow: hidden;
+	background-position: right;
+	background-size: contain;
+	background-repeat: no-repeat;
+	border-bottom: 1px solid var(--bg-slate-500);
+
+	&__icon {
+		height: fit-content;
+		background-color: var(--bg-ink-400);
+		padding: 12px;
+		border: 1px solid var(--bg-ink-300);
+		border-radius: 6px;
+		width: 60px;
+		height: 60px;
+		display: flex;
+		align-items: center;
+		img {
+			width: 100%;
+		}
+	}
+
+	&__details {
+		display: flex;
+		flex-direction: column;
+		gap: 12px;
+
+		.title {
+			color: var(--bg-vanilla-100);
+			font-size: 24px;
+			font-weight: 500;
+			line-height: 20px; /* 83.333% */
+			letter-spacing: -0.12px;
+		}
+
+		.description {
+			color: var(--bg-vanilla-400);
+			font-size: 12px;
+			font-weight: 400;
+			line-height: 18px; /* 150% */
+		}
+
+		.hero-section__buttons {
+			margin-top: 12px;
+		}
+
+		.hero-section__button {
+			font-family: 'Inter';
+			background: var(--bg-robin-500);
+			border: none;
+			padding: 8px 17px;
+			color: var(--bg-vanilla-100);
+			border-radius: 2px;
+			cursor: pointer;
+			color: var(--Vanilla-100, #fff);
+			font-size: 12px;
+			font-weight: 500;
+			line-height: 16px;
+		}
+	}
+}
diff --git a/frontend/src/pages/Integrations/CloudIntegrationPage/HeroSection/HeroSection.tsx b/frontend/src/pages/Integrations/CloudIntegrationPage/HeroSection/HeroSection.tsx
index d000697ffa3..3361b802ef9 100644
--- a/frontend/src/pages/Integrations/CloudIntegrationPage/HeroSection/HeroSection.tsx
+++ b/frontend/src/pages/Integrations/CloudIntegrationPage/HeroSection/HeroSection.tsx
@@ -1,3 +1,5 @@
+import './HeroSection.style.scss';
+
 function HeroSection(): JSX.Element {
 	return (
 		<div