diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/overlapping-connections-banner/overlapping-connections-banner.component.html b/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/overlapping-connections-banner/overlapping-connections-banner.component.html
index 40760dfdcc59..4f52b25aee85 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/overlapping-connections-banner/overlapping-connections-banner.component.html
+++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/overlapping-connections-banner/overlapping-connections-banner.component.html
@@ -16,12 +16,11 @@
   -->
 
 @if (overlappingGroups().length > 0) {
-    <div class="overlapping-connections-banner flex flex-col gap-1.5 px-4 py-3 rounded-sm text-sm">
-        <div class="flex items-center gap-2">
-            <i class="fa fa-warning caution-color"></i>
-            <span class="font-medium"> {{ overlappingGroups().length }} overlapping connection group(s) detected </span>
-        </div>
-        <span>
+    <status-banner variant="caution" [allowDismiss]="false">
+        <span statusBannerTitle>
+            {{ overlappingGroups().length }} overlapping connection group(s) detected
+        </span>
+        <span statusBannerDescription>
             Overlapping connections with no bend points appear as a single connection. Add a bend point to separate
             them.
         </span>
@@ -32,5 +31,5 @@
                 </a>
             }
         </div>
-    </div>
+    </status-banner>
 }
diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/overlapping-connections-banner/overlapping-connections-banner.component.scss b/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/overlapping-connections-banner/overlapping-connections-banner.component.scss
index 1354f4227ce6..fd7e7773747f 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/overlapping-connections-banner/overlapping-connections-banner.component.scss
+++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/overlapping-connections-banner/overlapping-connections-banner.component.scss
@@ -20,20 +20,12 @@
     font-size: 13px;
 }
 
-.overlapping-connections-banner {
-    background-color: var(--mat-sys-surface-container);
-    border: 1px solid var(--mat-sys-outline-variant);
-    // !important needed to override the global *:not([class^=mat-])... border-color reset in material.scss
-    border-left: 4px solid var(--nf-caution-default) !important;
-    color: var(--mat-sys-on-surface);
+.overlap-link {
+    color: var(--mat-sys-primary);
+    cursor: pointer;
+    text-decoration: underline;
 
-    .overlap-link {
-        color: var(--mat-sys-primary);
-        cursor: pointer;
-        text-decoration: underline;
-
-        &:hover {
-            opacity: 0.6;
-        }
+    &:hover {
+        opacity: 0.6;
     }
 }
diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/overlapping-connections-banner/overlapping-connections-banner.component.spec.ts b/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/overlapping-connections-banner/overlapping-connections-banner.component.spec.ts
index 7e7c5c421d25..e09fb2391833 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/overlapping-connections-banner/overlapping-connections-banner.component.spec.ts
+++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/overlapping-connections-banner/overlapping-connections-banner.component.spec.ts
@@ -16,6 +16,8 @@
  */
 
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { StatusBanner } from '@nifi/shared';
 import { OverlappingConnectionsBannerComponent } from './overlapping-connections-banner.component';
 import { OverlappingConnectionGroup } from '../overlap-detection.utils';
 
@@ -50,8 +52,7 @@ describe('OverlappingConnectionsBannerComponent', () => {
     describe('rendering', () => {
         it('should not render when there are no overlapping groups', async () => {
             const { fixture } = await setup({ overlappingGroups: [] });
-            const banner = fixture.nativeElement.querySelector('.overlapping-connections-banner');
-            expect(banner).toBeNull();
+            expect(fixture.debugElement.query(By.directive(StatusBanner))).toBeNull();
         });
 
         it('should render when there are overlapping groups', async () => {
@@ -59,8 +60,9 @@ describe('OverlappingConnectionsBannerComponent', () => {
                 { sourceComponentId: 'a', destinationComponentId: 'b', connectionIds: ['c1', 'c2'] }
             ];
             const { fixture } = await setup({ overlappingGroups: groups });
-            const banner = fixture.nativeElement.querySelector('.overlapping-connections-banner');
-            expect(banner).toBeTruthy();
+            const statusBanner = fixture.debugElement.query(By.directive(StatusBanner));
+            expect(statusBanner).toBeTruthy();
+            expect(statusBanner.componentInstance.variant).toBe('caution');
         });
 
         it('should display the correct count of overlap groups', async () => {
@@ -69,8 +71,8 @@ describe('OverlappingConnectionsBannerComponent', () => {
                 { sourceComponentId: 'c', destinationComponentId: 'd', connectionIds: ['c3', 'c4'] }
             ];
             const { fixture } = await setup({ overlappingGroups: groups });
-            const banner = fixture.nativeElement.querySelector('.overlapping-connections-banner');
-            expect(banner.textContent).toContain('2 overlapping connection group(s) detected');
+            expect(fixture.debugElement.query(By.directive(StatusBanner))).toBeTruthy();
+            expect(fixture.nativeElement.textContent).toContain('2 overlapping connection group(s) detected');
         });
 
         it('should render a link for each overlap group', async () => {
diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/overlapping-connections-banner/overlapping-connections-banner.component.ts b/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/overlapping-connections-banner/overlapping-connections-banner.component.ts
index ca7cae1d36d7..fdabe931e3eb 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/overlapping-connections-banner/overlapping-connections-banner.component.ts
+++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/overlapping-connections-banner/overlapping-connections-banner.component.ts
@@ -16,12 +16,17 @@
  */
 
 import { Component, input, output } from '@angular/core';
+import {
+    StatusBanner,
+    StatusBannerDescriptionDirective,
+    StatusBannerTitleDirective
+} from '@nifi/shared';
 import { OverlappingConnectionGroup } from '../overlap-detection.utils';
 
 @Component({
     selector: 'overlapping-connections-banner',
     standalone: true,
-    imports: [],
+    imports: [StatusBanner, StatusBannerTitleDirective, StatusBannerDescriptionDirective],
     templateUrl: './overlapping-connections-banner.component.html',
     styleUrls: ['./overlapping-connections-banner.component.scss']
 })