diff --git a/packages/server/src/services/PaymentLinks/PaymentLinksApplication.ts b/packages/server/src/services/PaymentLinks/PaymentLinksApplication.ts
index 2ba46dd8a..4e152535f 100644
--- a/packages/server/src/services/PaymentLinks/PaymentLinksApplication.ts
+++ b/packages/server/src/services/PaymentLinks/PaymentLinksApplication.ts
@@ -43,9 +43,9 @@ export class PaymentLinksApplication {
    * Retrieves the sale invoice pdf of the given payment link id.
    * @param {number} tenantId
    * @param {number} paymentLinkId
-   * @returns
+   * @returns {Promise<Buffer> }
    */
-  public getPaymentLinkInvoicePdf(paymentLinkId: string) {
+  public getPaymentLinkInvoicePdf(paymentLinkId: string): Promise<Buffer> {
     return this.getPaymentLinkInvoicePdfService.getPaymentLinkInvoicePdf(
       paymentLinkId
     );
diff --git a/packages/webapp/src/containers/PaymentPortal/PaymentPortal.tsx b/packages/webapp/src/containers/PaymentPortal/PaymentPortal.tsx
index 94b633af0..b11aa632b 100644
--- a/packages/webapp/src/containers/PaymentPortal/PaymentPortal.tsx
+++ b/packages/webapp/src/containers/PaymentPortal/PaymentPortal.tsx
@@ -33,7 +33,11 @@ export function PaymentPortal() {
   const handleInvoiceDownloadBtnClick = () => {
     generatePaymentLinkInvoice({ paymentLinkId: linkId })
       .then((data) => {
-        downloadFile(data, `Invoice ${sharableLinkMeta?.invoiceNo}.pdf`);
+        downloadFile(
+          data,
+          `Invoice ${sharableLinkMeta?.invoiceNo}`,
+          'application/pdf',
+        );
       })
       .catch(() => {
         AppToaster.show({
diff --git a/packages/webapp/src/hooks/query/payment-link.ts b/packages/webapp/src/hooks/query/payment-link.ts
index f1e10f0fc..9cd373c2c 100644
--- a/packages/webapp/src/hooks/query/payment-link.ts
+++ b/packages/webapp/src/hooks/query/payment-link.ts
@@ -200,7 +200,10 @@ export const useGeneratePaymentLinkInvoicePdf = (
   >(
     (values: GeneratePaymentLinkInvoicePdfValues) => {
       return apiRequest
-        .get(`/payment-links/${values.paymentLinkId}/invoice/pdf`)
+        .get(`/payment-links/${values.paymentLinkId}/invoice/pdf`, {
+          responseType: 'blob',
+          headers: { accept: 'application/pdf' },
+        })
         .then((res) => res?.data);
     },
     { ...options },
@@ -217,7 +220,10 @@ export const useGetPaymentLinkInvoicePdf = (
     [GetPaymentLinkInvoicePdf, invoiceId],
     () =>
       apiRequest
-        .get(`/payment-links/${invoiceId}/invoice/pdf`)
+        .get(`/payment-links/${invoiceId}/invoice/pdf`, {
+          responseType: 'blob',
+          headers: { accept: 'application/pdf' },
+        })
         .then((res) => res.data),
     {
       ...options,