diff --git a/workspace/apps/pidp/src/app/features/auth/pages/login/banner-find.response.model.ts b/workspace/apps/pidp/src/app/features/auth/pages/login/banner-find.response.model.ts
new file mode 100644
index 000000000..caff46adf
--- /dev/null
+++ b/workspace/apps/pidp/src/app/features/auth/pages/login/banner-find.response.model.ts
@@ -0,0 +1,6 @@
+export interface BannerFindResponse {
+  component: string;
+  status: string;
+  header: string;
+  body: string;
+}
diff --git a/workspace/apps/pidp/src/app/features/auth/pages/login/login-resource.service.spec.ts b/workspace/apps/pidp/src/app/features/auth/pages/login/login-resource.service.spec.ts
new file mode 100644
index 000000000..f76ae5c3d
--- /dev/null
+++ b/workspace/apps/pidp/src/app/features/auth/pages/login/login-resource.service.spec.ts
@@ -0,0 +1,23 @@
+import { TestBed } from '@angular/core/testing';
+
+import { provideAutoSpy } from 'jest-auto-spies';
+
+import { ApiHttpClient } from '@app/core/resources/api-http-client.service';
+
+import { LoginResource } from './login-resource.service';
+
+describe('LoginResource', () => {
+  let service: LoginResource;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [provideAutoSpy(ApiHttpClient)],
+    });
+
+    service = TestBed.inject(LoginResource);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/workspace/apps/pidp/src/app/features/auth/pages/login/login-resource.service.ts b/workspace/apps/pidp/src/app/features/auth/pages/login/login-resource.service.ts
new file mode 100644
index 000000000..abf6d53e6
--- /dev/null
+++ b/workspace/apps/pidp/src/app/features/auth/pages/login/login-resource.service.ts
@@ -0,0 +1,20 @@
+import { Injectable } from '@angular/core';
+
+import { Observable } from 'rxjs';
+
+import { ApiHttpClient } from '@app/core/resources/api-http-client.service';
+
+import { BannerFindResponse } from './banner-find.response.model';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class LoginResource {
+  public constructor(private apiResource: ApiHttpClient) {}
+
+  public findBanners(component: string): Observable<BannerFindResponse[]> {
+    return this.apiResource.get<BannerFindResponse[]>(
+      `banners?component=${component}`,
+    );
+  }
+}
diff --git a/workspace/apps/pidp/src/app/features/auth/pages/login/login.constants.ts b/workspace/apps/pidp/src/app/features/auth/pages/login/login.constants.ts
new file mode 100644
index 000000000..db83331f6
--- /dev/null
+++ b/workspace/apps/pidp/src/app/features/auth/pages/login/login.constants.ts
@@ -0,0 +1 @@
+export const component = 'login';
diff --git a/workspace/apps/pidp/src/app/features/auth/pages/login/login.page.html b/workspace/apps/pidp/src/app/features/auth/pages/login/login.page.html
index 60af524eb..8eb42d633 100644
--- a/workspace/apps/pidp/src/app/features/auth/pages/login/login.page.html
+++ b/workspace/apps/pidp/src/app/features/auth/pages/login/login.page.html
@@ -12,34 +12,8 @@
 
       <section class="welcome-section">
         <div class="welcome-section-container">
-          <div class="welcome-container">
-            <div class="title-content-container">
-              <h1 class="title">
-                <span class="title-text">
-                  <strong>OneHealthID Service</strong>
-                </span>
-              </h1>
-              <section class="title-site-description">
-                <p>
-                  A suite of identity-related products and services for
-                  healthcare providers in BC.
-                </p>
-              </section>
-            </div>
-            <ng-container *ngTemplateOutlet="login"></ng-container>
-          </div>
-          <div class="links">
-            <app-need-help
-              customClass="need-help-large"
-              [showIcon]="true"></app-need-help>
-            <div class="about">
-              <a
-                uiAnchor
-                href="https://www2.gov.bc.ca/gov/content/health/practitioner-professional-resources/onehealthid-service">
-                About, FAQs, Guides
-                <i class="material-icons-outlined">arrow_circle_right</i>
-              </a>
-            </div>
+          <div *ngIf="banners.length > 0; else welcomesection">
+            <app-banner [banners]="banners"></app-banner>
           </div>
         </div>
       </section>
@@ -47,6 +21,38 @@ <h1 class="title">
   </div>
 </ui-layout-header-footer>
 
+<ng-template #welcomesection>
+  <div class="welcome-container">
+    <div class="title-content-container">
+      <h1 class="title">
+        <span class="title-text">
+          <strong>OneHealthID Service</strong>
+        </span>
+      </h1>
+      <section class="title-site-description">
+        <p>
+          A suite of identity-related products and services for healthcare
+          providers in BC.
+        </p>
+      </section>
+    </div>
+    <ng-container *ngTemplateOutlet="login"></ng-container>
+  </div>
+  <div class="links">
+    <app-need-help
+      customClass="need-help-large"
+      [showIcon]="true"></app-need-help>
+    <div class="about">
+      <a
+        uiAnchor
+        href="https://www2.gov.bc.ca/gov/content/health/practitioner-professional-resources/onehealthid-service">
+        About, FAQs, Guides
+        <i class="material-icons-outlined">arrow_circle_right</i>
+      </a>
+    </div>
+  </div>
+</ng-template>
+
 <ng-template #login>
   <div class="login-container">
     <div class="login-container-app-button">
diff --git a/workspace/apps/pidp/src/app/features/auth/pages/login/login.page.scss b/workspace/apps/pidp/src/app/features/auth/pages/login/login.page.scss
index b4b9b45db..c0d565ee6 100644
--- a/workspace/apps/pidp/src/app/features/auth/pages/login/login.page.scss
+++ b/workspace/apps/pidp/src/app/features/auth/pages/login/login.page.scss
@@ -14,6 +14,9 @@ button.pidp-btn-link {
 }
 .viewport-all {
   & .welcome-section {
+    display: flex;
+    justify-content: center;
+
     & .title-content-container {
       display: flex;
       flex-direction: column;
diff --git a/workspace/apps/pidp/src/app/features/auth/pages/login/login.page.spec.ts b/workspace/apps/pidp/src/app/features/auth/pages/login/login.page.spec.ts
index 90d222b7a..129048123 100644
--- a/workspace/apps/pidp/src/app/features/auth/pages/login/login.page.spec.ts
+++ b/workspace/apps/pidp/src/app/features/auth/pages/login/login.page.spec.ts
@@ -21,9 +21,11 @@ import {
   MicrosoftLogLevel,
 } from '@app/core/services/client-logs.service';
 import { DocumentService } from '@app/core/services/document.service';
+import { LoggerService } from '@app/core/services/logger.service';
 
 import { IdentityProvider } from '../../enums/identity-provider.enum';
 import { AuthService } from '../../services/auth.service';
+import { LoginResource } from './login-resource.service';
 import { LoginPage, LoginPageRouteData } from './login.page';
 
 describe('LoginPage', () => {
@@ -32,7 +34,7 @@ describe('LoginPage', () => {
   let clientLogsServiceSpy: Spy<ClientLogsService>;
   let authServiceSpy: Spy<AuthService>;
   let matDialogSpy: Spy<MatDialog>;
-
+  let loginResourceSpy: Spy<LoginResource>;
   let mockActivatedRoute: {
     snapshot: {
       queryParamMap?: ParamMap;
@@ -70,6 +72,8 @@ describe('LoginPage', () => {
         provideAutoSpy(ClientLogsService),
         provideAutoSpy(DocumentService),
         provideAutoSpy(MatDialog),
+        provideAutoSpy(LoginResource),
+        provideAutoSpy(LoggerService),
         ViewportService,
       ],
     }).compileComponents();
@@ -79,6 +83,18 @@ describe('LoginPage', () => {
     clientLogsServiceSpy = TestBed.inject<any>(ClientLogsService);
     authServiceSpy = TestBed.inject<any>(AuthService);
     matDialogSpy = TestBed.inject<any>(MatDialog);
+    loginResourceSpy = TestBed.inject<any>(LoginResource);
+
+    loginResourceSpy.findBanners.mockReturnValue(
+      of([
+        {
+          header: 'test',
+          body: 'test',
+          component: 'test',
+          status: '2',
+        },
+      ]),
+    );
   });
 
   describe('INIT', () => {
diff --git a/workspace/apps/pidp/src/app/features/auth/pages/login/login.page.ts b/workspace/apps/pidp/src/app/features/auth/pages/login/login.page.ts
index 705563309..1f216b36f 100644
--- a/workspace/apps/pidp/src/app/features/auth/pages/login/login.page.ts
+++ b/workspace/apps/pidp/src/app/features/auth/pages/login/login.page.ts
@@ -4,6 +4,7 @@ import {
   NgTemplateOutlet,
   UpperCasePipe,
 } from '@angular/common';
+import { HttpErrorResponse } from '@angular/common/http';
 import { Component, Inject, OnInit } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialog } from '@angular/material/dialog';
@@ -29,11 +30,16 @@ import {
   MicrosoftLogLevel,
 } from '@app/core/services/client-logs.service';
 import { DocumentService } from '@app/core/services/document.service';
+import { LoggerService } from '@app/core/services/logger.service';
 import { AdminRoutes } from '@app/features/admin/admin.routes';
+import { BannerComponent } from '@app/shared/components/banner/banner.component';
 import { NeedHelpComponent } from '@app/shared/components/need-help/need-help.component';
 
 import { IdentityProvider } from '../../enums/identity-provider.enum';
 import { AuthService } from '../../services/auth.service';
+import { BannerFindResponse } from './banner-find.response.model';
+import { LoginResource } from './login-resource.service';
+import { component } from './login.constants';
 
 export interface LoginPageRouteData {
   title: string;
@@ -55,6 +61,7 @@ export interface LoginPageRouteData {
     NgOptimizedImage,
     NgTemplateOutlet,
     UpperCasePipe,
+    BannerComponent,
   ],
 })
 export class LoginPage implements OnInit {
@@ -65,6 +72,7 @@ export class LoginPage implements OnInit {
   public showOtherLoginOptions: boolean;
   public IdentityProvider = IdentityProvider;
   public providerIdentitySupport: string;
+  public banners: Array<{ header: string; body: string; status: string }> = [];
 
   public viewport = PidpViewport.xsmall;
   public isMobileTitleVisible = this.viewport === PidpViewport.xsmall;
@@ -83,6 +91,8 @@ export class LoginPage implements OnInit {
     private dialog: MatDialog,
     private documentService: DocumentService,
     private viewportService: ViewportService,
+    private loginResource: LoginResource,
+    private logger: LoggerService,
   ) {
     const routeSnapshot = this.route.snapshot;
 
@@ -111,6 +121,18 @@ export class LoginPage implements OnInit {
         })
         .subscribe();
     }
+
+    this.loginResource.findBanners(component).subscribe(
+      (data: BannerFindResponse[]) => {
+        this.banners = data;
+      },
+      (err: HttpErrorResponse) => {
+        this.logger.error(
+          '[LoginResource::findBanners] error has occurred: ',
+          err,
+        );
+      },
+    );
   }
 
   private onViewportChange(viewport: PidpViewport): void {
diff --git a/workspace/apps/pidp/src/app/shared/components/banner/banner.component.html b/workspace/apps/pidp/src/app/shared/components/banner/banner.component.html
new file mode 100644
index 000000000..9d7f1409a
--- /dev/null
+++ b/workspace/apps/pidp/src/app/shared/components/banner/banner.component.html
@@ -0,0 +1,15 @@
+<div class="banner-container" uiPidpInjectViewportCss>
+  <div class="banners-box">
+    <div *ngFor="let banner of banners">
+      <div class="card-styles card-header-icon banner-detail-box">
+        <h2>
+          <img src="/assets/images/icons/icon-warning.svg" alt="banner-logo" />
+          <span>{{ banner.header }}</span>
+        </h2>
+        <div class="banner-detail-content">
+          {{ banner.body }}
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/workspace/apps/pidp/src/app/shared/components/banner/banner.component.scss b/workspace/apps/pidp/src/app/shared/components/banner/banner.component.scss
new file mode 100644
index 000000000..04ab8323a
--- /dev/null
+++ b/workspace/apps/pidp/src/app/shared/components/banner/banner.component.scss
@@ -0,0 +1,43 @@
+.viewport-all {
+  & .banners-box {
+    margin-top: 20%;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    border: 2px solid rgba(255, 166, 0, 0.55);
+
+    & .card-styles {
+      background: rgba(255, 166, 0, 0.2);
+      box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
+      width: 27rem;
+      padding: 0.75rem;
+
+      h2 {
+        color: #036;
+        font-size: 1rem;
+        font-weight: 700;
+        padding-top: 0.25rem;
+        margin-bottom: 0;
+        span {
+          padding-left: 10px;
+        }
+      }
+      & .banner-detail-box {
+        & .banner-detail-content {
+          padding-left: 34px;
+        }
+      }
+    }
+  }
+}
+
+.viewport-xsmall {
+  & .banners-box {
+    width: 18rem;
+    margin-left: 15px;
+    margin-right: 15px;
+    & .card-styles {
+      width: 17.9rem;
+    }
+  }
+}
diff --git a/workspace/apps/pidp/src/app/shared/components/banner/banner.component.spec.ts b/workspace/apps/pidp/src/app/shared/components/banner/banner.component.spec.ts
new file mode 100644
index 000000000..0448abc69
--- /dev/null
+++ b/workspace/apps/pidp/src/app/shared/components/banner/banner.component.spec.ts
@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BannerComponent } from './banner.component';
+
+describe('BannerComponent', () => {
+  let component: BannerComponent;
+  let fixture: ComponentFixture<BannerComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [BannerComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(BannerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/workspace/apps/pidp/src/app/shared/components/banner/banner.component.ts b/workspace/apps/pidp/src/app/shared/components/banner/banner.component.ts
new file mode 100644
index 000000000..6f6231325
--- /dev/null
+++ b/workspace/apps/pidp/src/app/shared/components/banner/banner.component.ts
@@ -0,0 +1,21 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+
+import { InjectViewportCssClassDirective } from '@bcgov/shared/ui';
+
+@Component({
+  selector: 'app-banner',
+  templateUrl: './banner.component.html',
+  styleUrl: './banner.component.scss',
+  standalone: true,
+  imports: [CommonModule, InjectViewportCssClassDirective],
+})
+export class BannerComponent {
+  @Input() public banners: Array<{
+    header: string;
+    body: string;
+    status: string;
+  }> = [];
+
+  public constructor() {}
+}
diff --git a/workspace/apps/pidp/src/assets/images/icons/icon-warning.svg b/workspace/apps/pidp/src/assets/images/icons/icon-warning.svg
new file mode 100644
index 000000000..ed4c3448a
--- /dev/null
+++ b/workspace/apps/pidp/src/assets/images/icons/icon-warning.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.8351 15.0312C18.3351 15.9062 17.7101 17 16.6788 17H3.33511C2.30386 17 1.67886 15.9062 2.14761 15.0312L8.83511 3.65625C9.11636 3.21875 9.55386 3 10.0226 3C10.4601 3 10.8976 3.21875 11.1789 3.65625L17.8351 15.0312ZM3.64761 15.5H16.3664L9.99136 4.65625L3.64761 15.5ZM10.0226 12.5625C10.5539 12.5625 10.9914 13 10.9914 13.5312C10.9914 14.0625 10.5539 14.5 10.0226 14.5C9.46011 14.5 9.02261 14.0625 9.02261 13.5312C9.02261 13 9.46011 12.5625 10.0226 12.5625ZM9.27261 7.75C9.27261 7.34375 9.58511 7 10.0226 7C10.4289 7 10.7726 7.34375 10.7726 7.75V10.75C10.7726 11.1875 10.4289 11.5 10.0226 11.5C9.58511 11.5 9.27261 11.1875 9.27261 10.75V7.75Z" fill="#F8BB47"/>
+</svg>