diff --git a/APP/src/app/features/expense/pages/my-reimbursements-page/my-reimbursements-page.component.html b/APP/src/app/features/expense/pages/my-reimbursements-page/my-reimbursements-page.component.html
index 5231ce1..6e44d17 100644
--- a/APP/src/app/features/expense/pages/my-reimbursements-page/my-reimbursements-page.component.html
+++ b/APP/src/app/features/expense/pages/my-reimbursements-page/my-reimbursements-page.component.html
@@ -23,10 +23,10 @@
       <ng-template kendoGridCellTemplate let-dataItem>
         <ng-container *ngIf="canEdit(dataItem)">
           <button kendoButton themeColor="primary" fillMode="flat" (click)="submit(dataItem)">Submit</button>
-          <button kendoButton fillMode="flat"
-            (click)="confirm('Delete this reimbursement?') && remove(dataItem)">Delete</button>
+          <button kendoButton fillMode="flat" (click)="remove(dataItem)">Delete</button>
         </ng-container>
-        <a *ngIf="dataItem.hasReceipt" [href]="receiptUrl(dataItem.id)" target="_blank" class="receipt-link">Receipt</a>
+        <button *ngIf="dataItem.hasReceipt" kendoButton fillMode="flat"
+          (click)="openReceipt(dataItem.id)" class="receipt-link">Receipt</button>
       </ng-template>
     </kendo-grid-column>
   </kendo-grid>
diff --git a/APP/src/app/features/expense/pages/my-reimbursements-page/my-reimbursements-page.component.ts b/APP/src/app/features/expense/pages/my-reimbursements-page/my-reimbursements-page.component.ts
index 071ea41..3338edb 100644
--- a/APP/src/app/features/expense/pages/my-reimbursements-page/my-reimbursements-page.component.ts
+++ b/APP/src/app/features/expense/pages/my-reimbursements-page/my-reimbursements-page.component.ts
@@ -42,11 +42,21 @@ export class MyReimbursementsPageComponent implements OnInit {
   }
 
   submit(row: ExpenseListItemDto): void { this.api.submit(row.id).subscribe(() => this.load()); }
-  remove(row: ExpenseListItemDto): void { this.api.delete(row.id).subscribe(() => this.load()); }
+  remove(row: ExpenseListItemDto): void {
+    if (!confirm('Delete this reimbursement?')) return;
+    this.api.delete(row.id).subscribe(() => this.load());
+  }
+
+  openReceipt(id: number): void {
+    this.api.downloadReceipt(id).subscribe(blob => {
+      const url = URL.createObjectURL(blob);
+      window.open(url, '_blank');
+      setTimeout(() => URL.revokeObjectURL(url), 60_000);
+    });
+  }
 
   canEdit(row: ExpenseListItemDto): boolean { return row.status === 'Draft'; }
   statusClass(status: string): string {
     return ({ Draft: 'badge-draft', PendingApproval: 'badge-pending', Approved: 'badge-approved', Paid: 'badge-paid', Rejected: 'badge-rejected' } as Record<string, string>)[status] ?? '';
   }
-  receiptUrl(id: number): string { return this.api.receiptUrl(id); }
 }
diff --git a/APP/src/app/features/expense/services/expense-api.service.ts b/APP/src/app/features/expense/services/expense-api.service.ts
index de4c40a..07f2c5a 100644
--- a/APP/src/app/features/expense/services/expense-api.service.ts
+++ b/APP/src/app/features/expense/services/expense-api.service.ts
@@ -41,5 +41,12 @@ export class ExpenseApiService {
     const form = new FormData(); form.append('file', file);
     return this.http.post<void>(`${this.endpoint}/${id}/receipt`, form);
   }
-  receiptUrl(id: number): string { return `${this.endpoint}/${id}/receipt`; }
+  /**
+   * Fetches the receipt as a Blob via HttpClient so the auth interceptor attaches
+   * the JWT. A plain <a href> / window.open on the API URL would be an unauthenticated
+   * browser navigation and the API's [Authorize] would reject it with 401.
+   */
+  downloadReceipt(id: number): Observable<Blob> {
+    return this.http.get(`${this.endpoint}/${id}/receipt`, { responseType: 'blob' });
+  }
 }