diff --git a/web/src/app/home/monitoring/components/ExportDropdown.tsx b/web/src/app/home/monitoring/components/ExportDropdown.tsx
index 4efabd43..b0a537e0 100644
--- a/web/src/app/home/monitoring/components/ExportDropdown.tsx
+++ b/web/src/app/home/monitoring/components/ExportDropdown.tsx
@@ -98,12 +98,9 @@ export function ExportDropdown({ filterState }: ExportDropdownProps) {
         });
       }
 
-      // Use backendClient's instance to get the auth token
-      const response = await backendClient.instance.get(
+      // Use backendClient's downloadFile method for blob response
+      const response = await backendClient.downloadFile(
         `/api/v1/monitoring/export?${params.toString()}`,
-        {
-          responseType: 'blob',
-        },
       );
 
       // Get filename from content-disposition header
diff --git a/web/src/app/infra/http/BaseHttpClient.ts b/web/src/app/infra/http/BaseHttpClient.ts
index c90e95d6..e4191330 100644
--- a/web/src/app/infra/http/BaseHttpClient.ts
+++ b/web/src/app/infra/http/BaseHttpClient.ts
@@ -206,4 +206,19 @@ export abstract class BaseHttpClient {
       ...config,
     });
   }
+
+  public async downloadFile(
+    url: string,
+    config?: RequestConfig,
+  ): Promise<AxiosResponse<Blob>> {
+    try {
+      const response = await this.instance.get<Blob>(url, {
+        responseType: 'blob',
+        ...config,
+      });
+      return response;
+    } catch (error) {
+      return this.handleError(error as object);
+    }
+  }
 }
diff --git a/web/tsconfig.json b/web/tsconfig.json
index b575f7da..5d606a9f 100644
--- a/web/tsconfig.json
+++ b/web/tsconfig.json
@@ -15,7 +15,7 @@
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "react-jsx",
+    "jsx": "preserve",
     "incremental": true,
     "plugins": [
       {