diff --git a/frontend/src/app/components/transaction/transaction-details/transaction-details.component.html b/frontend/src/app/components/transaction/transaction-details/transaction-details.component.html
index d86d32a50..7311bf8f4 100644
--- a/frontend/src/app/components/transaction/transaction-details/transaction-details.component.html
+++ b/frontend/src/app/components/transaction/transaction-details/transaction-details.component.html
@@ -267,7 +267,7 @@
             }
           </div>
           @if (hasCpfp) {
-            <button type="button" class="btn btn-outline-info btn-sm btn-small-height float-right" (click)="showCpfpDetails = !showCpfpDetails">CPFP <fa-icon [icon]="['fas', 'info-circle']" [fixedWidth]="true"></fa-icon></button>
+            <button type="button" class="btn btn-outline-info btn-sm btn-small-height float-right" (click)="toggleCpfp()">CPFP <fa-icon [icon]="['fas', 'info-circle']" [fixedWidth]="true"></fa-icon></button>
           }
         </td>
       </tr>
diff --git a/frontend/src/app/components/transaction/transaction-details/transaction-details.component.ts b/frontend/src/app/components/transaction/transaction-details/transaction-details.component.ts
index 59770d97e..fad607ffb 100644
--- a/frontend/src/app/components/transaction/transaction-details/transaction-details.component.ts
+++ b/frontend/src/app/components/transaction/transaction-details/transaction-details.component.ts
@@ -41,6 +41,7 @@ export class TransactionDetailsComponent implements OnInit {
   @Input() ETA$: Observable<ETA>;
 
   @Output() accelerateClicked = new EventEmitter<boolean>();
+  @Output() toggleCpfp$ = new EventEmitter<void>();
 
   constructor() {}
 
@@ -49,4 +50,8 @@ export class TransactionDetailsComponent implements OnInit {
   onAccelerateClicked(): void {
     this.accelerateClicked.emit(true);
   }
+
+    toggleCpfp(): void {
+    this.toggleCpfp$.emit();
+  }
 }