diff --git a/src/app/shared/components/popup-alert/popup-alert.component.html b/src/app/shared/components/popup-alert/popup-alert.component.html
index 31223bf7bb..4dd9051ea9 100644
--- a/src/app/shared/components/popup-alert/popup-alert.component.html
+++ b/src/app/shared/components/popup-alert/popup-alert.component.html
@@ -5,6 +5,30 @@
     </div>
   </ion-header>
 
+  <div class="popup-alert--card-details-container" *ngIf="cardsList?.successfulCards?.length > 0">
+    <div class="popup-alert--content-container">
+      <div class="popup-alert--success-tick-container">
+        <ion-icon class="popup-alert--success-tick" src="/assets/svg/check.svg"></ion-icon>
+      </div>
+      <div>
+        <div class="popup-alert--content-header">Successfully connected</div>
+        <div class="popup-alert--card-numbers">
+          {{ cardsList?.successfulCards?.join() }}
+        </div>
+      </div>
+    </div>
+    <div class="popup-alert--content-container">
+      <div class="popup-alert--error-tick-container">
+        <ion-icon class="popup-alert--error-icon" src="/assets/svg/error-outlined.svg"></ion-icon>
+      </div>
+      <div>
+        <div class="popup-alert--content-header">Failed Connecting</div>
+        <div class="popup-alert--card-numbers">
+          {{ cardsList?.failedCards?.join(', ') }}
+        </div>
+      </div>
+    </div>
+  </div>
   <div class="popup-alert--body ion-text-center" [innerHtml]="message"></div>
 
   <div class="popup-alert--info-container" *ngIf="flaggedExpensesCount">
diff --git a/src/app/shared/components/popup-alert/popup-alert.component.scss b/src/app/shared/components/popup-alert/popup-alert.component.scss
index 5287a791d6..7d64099f53 100644
--- a/src/app/shared/components/popup-alert/popup-alert.component.scss
+++ b/src/app/shared/components/popup-alert/popup-alert.component.scss
@@ -54,4 +54,73 @@ $small-screen: 700px;
       background: $red;
     }
   }
+
+  &--success-tick-container {
+    border-radius: 4px;
+    background: $success-bg;
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &--success-tick {
+    height: 14px;
+    width: 14px;
+    fill: $green;
+  }
+
+  &--success-tick-container {
+    border-radius: 4px;
+    background: $success-bg;
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &--success-tick {
+    height: 14px;
+    width: 14px;
+    fill: $green;
+  }
+
+  &--error-tick-container {
+    border-radius: 4px;
+    background: $pale-pink;
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &--error-icon {
+    height: 14px;
+    width: 14px;
+    fill: $red;
+  }
+
+  &--content-container {
+    display: flex;
+    padding: 12px;
+    align-items: flex-start;
+    gap: 12px;
+    align-self: stretch;
+    border-radius: 4px;
+    border: 1px solid $border-tertiary;
+    padding: 12px;
+    margin-bottom: 16px;
+  }
+
+  &--content-header {
+    color: $black;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 1.4;
+    margin-bottom: 6px;
+  }
 }
diff --git a/src/app/shared/components/popup-alert/popup-alert.component.ts b/src/app/shared/components/popup-alert/popup-alert.component.ts
index 0557ce2c58..38329ef83c 100644
--- a/src/app/shared/components/popup-alert/popup-alert.component.ts
+++ b/src/app/shared/components/popup-alert/popup-alert.component.ts
@@ -1,5 +1,7 @@
 import { Component, Input } from '@angular/core';
 import { PopoverController } from '@ionic/angular';
+import { CardNetworkType } from 'src/app/core/enums/card-network-type';
+import { PopoverCardsList } from 'src/app/core/models/popover-cards-list.model';
 @Component({
   selector: 'app-popup-alert',
   templateUrl: './popup-alert.component.html',
@@ -16,9 +18,11 @@ export class PopupAlertComponent {
 
   @Input() flaggedExpensesCount = 0;
 
+  @Input() cardsList: PopoverCardsList;
+
   constructor(private popoverController: PopoverController) {}
 
-  ctaClickedEvent(action) {
+  ctaClickedEvent(action: string): void {
     this.popoverController.dismiss({
       action,
     });
diff --git a/src/assets/svg/check.svg b/src/assets/svg/check.svg
index de0694d770..a07b976734 100644
--- a/src/assets/svg/check.svg
+++ b/src/assets/svg/check.svg
@@ -1,3 +1,3 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M20.7803 6.21967C21.0732 6.51256 21.0732 6.98744 20.7803 7.28033L10.2803 17.7803C9.98744 18.0732 9.51256 18.0732 9.21967 17.7803L3.96967 12.5303C3.67678 12.2374 3.67678 11.7626 3.96967 11.4697C4.26256 11.1768 4.73744 11.1768 5.03033 11.4697L9.75 16.1893L19.7197 6.21967C20.0126 5.92678 20.4874 5.92678 20.7803 6.21967Z" fill="currentColor"/>
 </svg>