diff --git a/packages/gridproxy_client/src/builders/abstract_builder.ts b/packages/gridproxy_client/src/builders/abstract_builder.ts
index 1c32e312df..50fd55b404 100644
--- a/packages/gridproxy_client/src/builders/abstract_builder.ts
+++ b/packages/gridproxy_client/src/builders/abstract_builder.ts
@@ -40,13 +40,23 @@ export abstract class AbstractBuilder<T> {
     }
   }
 
-  public async build(path: string, timeout = 10000): Promise<Response> {
+  public async build(path: string, timeout = 10000, signal?: AbortSignal): Promise<Response> {
     assertString(path);
     assertPattern(path, /^\//);
 
     const controller = new AbortController();
     const timeoutId = setTimeout(() => controller.abort(), timeout);
 
+    // Combine external signal with timeout signal
+    if (signal) {
+      // If signal is already aborted, abort immediately
+      if (signal.aborted) {
+        controller.abort();
+      } else {
+        signal.addEventListener("abort", () => controller.abort());
+      }
+    }
+
     try {
       const out: string[] = [];
 
diff --git a/packages/gridproxy_client/src/modules/farms.ts b/packages/gridproxy_client/src/modules/farms.ts
index fe51c861b3..392aede40b 100644
--- a/packages/gridproxy_client/src/modules/farms.ts
+++ b/packages/gridproxy_client/src/modules/farms.ts
@@ -30,8 +30,8 @@ export class FarmsClient extends AbstractClient<FarmsBuilder, FarmsQuery> {
     });
   }
 
-  public async list(queries: Partial<FarmsQuery> = {}) {
-    const res = await this.builder(queries).build("/farms");
+  public async list(queries: Partial<FarmsQuery> = {}, signal?: AbortSignal) {
+    const res = await this.builder(queries).build("/farms", 10000, signal);
     return resolvePaginator<Farm[]>(res);
   }
 
diff --git a/packages/gridproxy_client/src/modules/nodes.ts b/packages/gridproxy_client/src/modules/nodes.ts
index ef6bf4d69c..a3c4eb47b9 100644
--- a/packages/gridproxy_client/src/modules/nodes.ts
+++ b/packages/gridproxy_client/src/modules/nodes.ts
@@ -32,22 +32,28 @@ export class NodesClient extends AbstractClient<NodesBuilder, NodesQuery> {
     this.setTwin = this.setTwin.bind(this);
   }
 
-  public async list(queries: Partial<NodesQuery> = {}, extraOptions: NodesExtractOptions = {}) {
-    const res = await this.builder(queries).build("/nodes");
+  public async list(queries: Partial<NodesQuery> = {}, extraOptions: NodesExtractOptions = {}, signal?: AbortSignal) {
+    const res = await this.builder(queries).build("/nodes", 10000, signal);
     const nodes = await resolvePaginator<GridNode[]>(res);
 
     if (extraOptions.loadFarm) {
-      await this.loadFarms(nodes.data.map(n => n.farmId));
+      await this.loadFarms(
+        nodes.data.map(n => n.farmId),
+        signal,
+      );
       nodes.data = nodes.data.map(this.setFarm);
     }
 
     if (extraOptions.loadTwin) {
-      await this.loadTwins(nodes.data.map(n => n.twinId));
+      await this.loadTwins(
+        nodes.data.map(n => n.twinId),
+        signal,
+      );
       nodes.data = nodes.data.map(this.setTwin);
     }
 
     if (extraOptions.loadStats) {
-      const nodesStats = await Promise.all(nodes.data.map(n => this.statsById(n.nodeId)));
+      const nodesStats = await Promise.all(nodes.data.map(n => this.statsById(n.nodeId, signal)));
       nodes.data = nodes.data.map((n, index) => {
         n.stats = nodesStats[index];
         return n;
@@ -57,8 +63,8 @@ export class NodesClient extends AbstractClient<NodesBuilder, NodesQuery> {
     return nodes;
   }
 
-  public async byId(nodeId: number, extraOptions: NodesExtractOptions = {}): Promise<GridNode> {
-    const res = await this.builder({}).build(`/nodes/${nodeId}`);
+  public async byId(nodeId: number, extraOptions: NodesExtractOptions = {}, signal?: AbortSignal): Promise<GridNode> {
+    const res = await this.builder({}).build(`/nodes/${nodeId}`, 10000, signal);
     let node: GridNode = await res.json();
 
     const capacity = Reflect.get(node, "capacity");
@@ -68,37 +74,37 @@ export class NodesClient extends AbstractClient<NodesBuilder, NodesQuery> {
     }
 
     if (extraOptions.loadFarm && node) {
-      await this.loadFarms([node.farmId]);
+      await this.loadFarms([node.farmId], signal);
       node = this.setFarm(node);
     }
 
     if (extraOptions.loadTwin) {
-      await this.loadTwins([node.twinId]);
+      await this.loadTwins([node.twinId], signal);
       node = this.setTwin(node);
     }
 
     if (extraOptions.loadStats) {
-      node.stats = await this.statsById(node.nodeId);
+      node.stats = await this.statsById(node.nodeId, signal);
     }
 
     return node;
   }
 
-  public async statsById(nodeId: number): Promise<NodeStats> {
-    const res = await this.builder({}).build(`/nodes/${nodeId}/statistics`);
+  public async statsById(nodeId: number, signal?: AbortSignal): Promise<NodeStats> {
+    const res = await this.builder({}).build(`/nodes/${nodeId}/statistics`, 10000, signal);
     return res.json();
   }
 
-  public async gpuById(nodeId: number): Promise<GPUCard[] | null | { error: string }> {
-    const res = await this.builder({}).build(`/nodes/${nodeId}/gpu`);
+  public async gpuById(nodeId: number, signal?: AbortSignal): Promise<GPUCard[] | null | { error: string }> {
+    const res = await this.builder({}).build(`/nodes/${nodeId}/gpu`, 10000, signal);
     return res.json();
   }
 
-  private async loadFarms(farmIds: number[]): Promise<void> {
+  private async loadFarms(farmIds: number[], signal?: AbortSignal): Promise<void> {
     farmIds = farmIds.filter(id => !this.farms.has(id));
     const ids = Array.from(new Set(farmIds));
     if (!ids.length) return;
-    const farms = await Promise.all(ids.map(farmId => this.__farmsClient.list({ farmId })));
+    const farms = await Promise.all(ids.map(farmId => this.__farmsClient.list({ farmId }, signal)));
     for (const { data } of farms) {
       const [farm] = data;
       this.farms = this.farms.set(farm.farmId, farm);
@@ -124,11 +130,11 @@ export class NodesClient extends AbstractClient<NodesBuilder, NodesQuery> {
     };
   }
 
-  private async loadTwins(twinIds: number[]): Promise<void> {
+  private async loadTwins(twinIds: number[], signal?: AbortSignal): Promise<void> {
     twinIds = twinIds.filter(id => !this.twins.has(id));
     const ids = Array.from(new Set(twinIds));
     if (!ids.length) return;
-    const twins = await Promise.all(ids.map(twinId => this.__twinsClient.list({ twinId })));
+    const twins = await Promise.all(ids.map(twinId => this.__twinsClient.list({ twinId }, signal)));
     for (const { data } of twins) {
       const [twin] = data;
       this.twins = this.twins.set(twin.twinId, twin);
diff --git a/packages/gridproxy_client/src/modules/stats.ts b/packages/gridproxy_client/src/modules/stats.ts
index 569a49789c..dbb196cb50 100644
--- a/packages/gridproxy_client/src/modules/stats.ts
+++ b/packages/gridproxy_client/src/modules/stats.ts
@@ -28,8 +28,8 @@ export class StatsClient extends AbstractClient<StatsBuilder, StatsQuery> {
     });
   }
 
-  public async get(queries: Partial<StatsQuery> = {}): Promise<Stats> {
-    const res = await this.builder(queries).build("/stats");
+  public async get(queries: Partial<StatsQuery> = {}, signal?: AbortSignal): Promise<Stats> {
+    const res = await this.builder(queries).build("/stats", 10000, signal);
     return res.json();
   }
 }
diff --git a/packages/gridproxy_client/src/modules/twins.ts b/packages/gridproxy_client/src/modules/twins.ts
index 67cc99fc92..0e788f5861 100644
--- a/packages/gridproxy_client/src/modules/twins.ts
+++ b/packages/gridproxy_client/src/modules/twins.ts
@@ -21,8 +21,8 @@ export class TwinsClient extends AbstractClient<TwinsBuilder, TwinsQuery> {
     });
   }
 
-  public async list(queries: Partial<TwinsQuery> = {}) {
-    const res = await this.builder(queries).build("/twins");
+  public async list(queries: Partial<TwinsQuery> = {}, signal?: AbortSignal) {
+    const res = await this.builder(queries).build("/twins", 10000, signal);
     return resolvePaginator<Twin[]>(res);
   }
 
diff --git a/packages/playground/package.json b/packages/playground/package.json
index f771a8423b..252e2a6d26 100644
--- a/packages/playground/package.json
+++ b/packages/playground/package.json
@@ -6,7 +6,7 @@
     "dev": "vite",
     "build": "run-p type-check build-only",
     "preview": "vite preview",
-    "test:unit": "vitest",
+    "test:unit": "vitest --run",
     "build-only": "vite build",
     "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false"
   },
diff --git a/packages/playground/src/components/app_info.vue b/packages/playground/src/components/app_info.vue
index 5147ddae27..a083f2fa50 100644
--- a/packages/playground/src/components/app_info.vue
+++ b/packages/playground/src/components/app_info.vue
@@ -27,9 +27,7 @@
 
       <v-divider class="mb-2" />
       <v-card-actions class="d-flex justify-end">
-        <v-btn color="anchor" class="mr-2 my-1" @click="setOpenInfo(false)">
-          Close
-        </v-btn>
+        <v-btn color="anchor" class="mr-2 my-1" @click="setOpenInfo(false)"> Close </v-btn>
       </v-card-actions>
     </v-card>
   </v-dialog>
@@ -41,6 +39,7 @@ import { marked } from "marked";
 import { computed, type ComputedRef, ref } from "vue";
 import { useRoute } from "vue-router";
 
+import { isAbortError, useFetch } from "../hooks/useAbortController";
 import type { InfoMeta } from "../router";
 
 export interface InfoFileMeta {
@@ -59,22 +58,29 @@ export default {
     const title = ref("");
     const subtitle = ref("");
     const html = ref("");
+    const fetchWithAbort = useFetch();
 
     async function setOpenInfo(value: boolean) {
       openInfo.value = value;
 
       if (value) {
         loading.value = true;
-        const res = await fetch(import.meta.env.BASE_URL + info.value.page);
-        const markdown = await res.text();
-
-        const { attributes, body } = fm<InfoFileMeta>(markdown);
-
-        title.value = attributes.title || "";
-        subtitle.value = attributes.subtitle || "";
-        html.value = await marked.parse(body);
-
-        loading.value = false;
+        try {
+          const res = await fetchWithAbort(import.meta.env.BASE_URL + info.value.page);
+          const markdown = await res.text();
+
+          const { attributes, body } = fm<InfoFileMeta>(markdown);
+
+          title.value = attributes.title || "";
+          subtitle.value = attributes.subtitle || "";
+          html.value = await marked.parse(body);
+
+          loading.value = false;
+        } catch (error) {
+          if (isAbortError(error)) return;
+          loading.value = false;
+          throw error;
+        }
       }
     }
 
diff --git a/packages/playground/src/dashboard/components/user_nodes.vue b/packages/playground/src/dashboard/components/user_nodes.vue
index a9a741ad61..baea4a720b 100644
--- a/packages/playground/src/dashboard/components/user_nodes.vue
+++ b/packages/playground/src/dashboard/components/user_nodes.vue
@@ -1,9 +1,7 @@
 <template v-if="nodes">
   <div class="my-6">
     <v-card color="primary rounded-0">
-      <v-card-title class="py-1 text-subtitle-1 text-center">
-        Your Nodes
-      </v-card-title>
+      <v-card-title class="py-1 text-subtitle-1 text-center"> Your Nodes </v-card-title>
     </v-card>
     <v-data-table-server
       v-model:page="page"
@@ -46,9 +44,7 @@
 
             <v-card class="mt-4">
               <v-alert class="pa-5" style="height: 20px">
-                <h4 class="text-center font-weight-medium">
-                  Resource Units Reserved
-                </h4>
+                <h4 class="text-center font-weight-medium">Resource Units Reserved</h4>
               </v-alert>
               <v-card-text class="pb-8">
                 <NodeResources :node="item" />
@@ -57,9 +53,7 @@
 
             <v-card v-if="network == 'main'" class="mt-4" focusable single model-value>
               <v-alert class="pa-5" style="height: 20px">
-                <h4 class="text-center font-weight-medium">
-                  Node Statistics
-                </h4>
+                <h4 class="text-center font-weight-medium">Node Statistics</h4>
               </v-alert>
               <v-card-item>
                 <NodeMintingDetails :node="item" />
@@ -107,6 +101,7 @@ import CardDetails from "@/components/node_details_cards/card_details.vue";
 import { useProfileManager } from "@/stores";
 import type { NodeDetailsCard } from "@/types";
 import { createCustomToast, ToastType } from "@/utils/custom_toast";
+import { useAbortController, useWithAbortSignal } from "@/hooks/useAbortController";
 import { getNodeStatusColor } from "@/utils/get_nodes";
 import { calculateUptime, getNodeAvailability, getNodeMintingFixupReceipts, type NodeInterface } from "@/utils/node";
 
@@ -126,6 +121,8 @@ export default {
   },
   setup() {
     const profileManager = useProfileManager();
+    const getReceiptsWithAbort = useWithAbortSignal(getNodeMintingFixupReceipts);
+    const signal = useAbortController();
     const loading = ref(false);
     const page = ref<number>(1);
     const pageSize = ref(10);
@@ -187,12 +184,16 @@ export default {
         loading.value = true;
         const twinId = profileManager.profile!.twinId;
 
-        const { data, count } = await gridProxyClient.nodes.list({
-          retCount: true,
-          page: page.value,
-          size: pageSize.value,
-          ownedBy: twinId as number,
-        });
+        const { data, count } = await gridProxyClient.nodes.list(
+          {
+            retCount: true,
+            page: page.value,
+            size: pageSize.value,
+            ownedBy: twinId as number,
+          },
+          {},
+          signal,
+        );
 
         const _nodes = data as unknown as NodeInterface[];
         nodesCount.value = count ?? 0;
@@ -201,7 +202,7 @@ export default {
             const network = process.env.NETWORK || (window as any).env.NETWORK;
             node.receipts = [];
             try {
-              if (network == "main") node.receipts = await getNodeMintingFixupReceipts(node.nodeId);
+              if (network == "main") node.receipts = await getReceiptsWithAbort(node.nodeId);
             } catch {
               createCustomToast(`Failed to get node ${node.nodeId} minting receipts!`, ToastType.danger);
             }
diff --git a/packages/playground/src/hooks/useAbortController.ts b/packages/playground/src/hooks/useAbortController.ts
new file mode 100644
index 0000000000..f603d989b5
--- /dev/null
+++ b/packages/playground/src/hooks/useAbortController.ts
@@ -0,0 +1,68 @@
+import { onUnmounted } from "vue";
+
+/**
+ * Composable that provides an AbortController that automatically aborts on component unmount.
+ * @returns AbortController signal
+ */
+export function useAbortController() {
+  const abortController = new AbortController();
+
+  onUnmounted(() => {
+    abortController.abort();
+  });
+
+  return abortController.signal;
+}
+
+/**
+ * Type guard to detect AbortError in catch blocks.
+ */
+export function isAbortError(error: unknown): error is Error {
+  return error instanceof Error && error.name === "AbortError";
+}
+
+/**
+ * Composable that wraps fetch calls with automatic abort signal.
+ * Reduces boilerplate by automatically injecting signal.
+ */
+export function useFetch() {
+  const signal = useAbortController();
+
+  return async (url: string, options?: RequestInit) => {
+    return fetch(url, { ...options, signal });
+  };
+}
+
+/**
+ * Composable that wraps API utility functions with automatic abort signal.
+ * Automatically appends abort signal as the last parameter.
+ * Creates a fresh signal for each component instance that aborts on unmount.
+ *
+ * Usage:
+ * - const getNodesWithSignal = useWithAbortSignal(requestNodes);
+ * - const listWithSignal = useWithAbortSignal((q, opts) => gridProxyClient.nodes.list(q, opts));
+ */
+export function useWithAbortSignal<T extends (...args: any[]) => Promise<any>>(
+  fn: T,
+): (...args: Parameters<T>) => Promise<ReturnType<T>> {
+  // Get the signal that will be aborted when component unmounts
+  // This creates a NEW signal each time setup() runs (on each mount)
+  const signal = useAbortController();
+
+  return async (...args: Parameters<T>) => {
+    // Check if signal is already aborted (component unmounted)
+    if (signal.aborted) {
+      const error = new Error("Request aborted");
+      error.name = "AbortError";
+      throw error;
+    }
+
+    // Check if last argument is already an AbortSignal
+    const lastArg = args[args.length - 1];
+    if (lastArg instanceof AbortSignal) {
+      return fn(...args);
+    }
+    // Append signal as last parameter
+    return fn(...args, signal as any);
+  };
+}
diff --git a/packages/playground/src/hooks/useAsync.ts b/packages/playground/src/hooks/useAsync.ts
index 6b4f380107..bba0b1cac1 100644
--- a/packages/playground/src/hooks/useAsync.ts
+++ b/packages/playground/src/hooks/useAsync.ts
@@ -1,6 +1,8 @@
 import noop from "lodash/fp/noop.js";
 import { computed, type ComputedRef, onMounted, type Ref, ref } from "vue";
 
+import { isAbortError } from "./useAbortController";
+
 export type AsyncTask<T, A extends any[]> = (...args: A) => Promise<T>;
 export interface TaskResult<T, E, A extends any[]> {
   run(...args: A): Promise<void>;
@@ -103,6 +105,10 @@ export function useAsync<T, E = Error, A extends any[] = []>(
       }
       return true;
     } catch (err) {
+      // Ignore abort errors - component unmounted
+      if (isAbortError(err)) {
+        return false;
+      }
       if (taskId === taskIdCounter) {
         data.value = _options.default;
         error.value = err as E;
diff --git a/packages/playground/src/utils/contracts.ts b/packages/playground/src/utils/contracts.ts
index a4e473bf26..b5e76519d9 100644
--- a/packages/playground/src/utils/contracts.ts
+++ b/packages/playground/src/utils/contracts.ts
@@ -107,8 +107,7 @@ export function formatConsumption(value: number): string {
   return normalizeBalance(value) + " TFT/hour";
 }
 
-export async function getNodeInfo(nodeIDs: number[], requestedNodes: number[]) {
-  // Ensure we have unique node IDs
+export async function getNodeInfo(nodeIDs: number[], requestedNodes: number[], signal?: AbortSignal) {
   const uniqueNodeIDs = Array.from(new Set(nodeIDs));
   const uniqueRequestedNodes = new Set(requestedNodes);
 
@@ -118,8 +117,7 @@ export async function getNodeInfo(nodeIDs: number[], requestedNodes: number[]) {
 
   const resultPromises = nodeIDsToRequest.map(async nodeId => {
     if (typeof nodeId !== "number") return {};
-    const nodeInfo = await gridProxyClient.nodes.byId(nodeId);
-    // Store result in cache
+    const nodeInfo = await gridProxyClient.nodes.byId(nodeId, {}, signal);
     NODE_INFO_CACHE[nodeId] = { status: nodeInfo.status, farmId: nodeInfo.farmId };
     return { [nodeId]: NODE_INFO_CACHE[nodeId] };
   });
diff --git a/packages/playground/src/utils/get_nodes.ts b/packages/playground/src/utils/get_nodes.ts
index aa089ac61c..71859e7b41 100644
--- a/packages/playground/src/utils/get_nodes.ts
+++ b/packages/playground/src/utils/get_nodes.ts
@@ -11,6 +11,7 @@ import { byCountry } from "country-code-lookup";
 import { ref } from "vue";
 
 import { gridProxyClient } from "@/clients";
+import { isAbortError } from "@/hooks/useAbortController";
 import type { NodeHealthColor, NodeStatusColor, NodeTypeColor } from "@/types";
 const requestPageNumber = ref<number>(1);
 const offlineNodes = ref<NodeInfo[]>([]);
@@ -137,10 +138,10 @@ export const getNodeHealthColor = (health: string): NodeHealthColor => {
 export async function requestNodes(
   options: Partial<NodesQuery>,
   config: NodesExtractOptions,
+  signal?: AbortSignal,
 ): Promise<Pagination<GridNode[]>> {
   try {
-    const nodes: Pagination<GridNode[]> = await gridProxyClient.nodes.list(options, config);
-    return nodes;
+    return await gridProxyClient.nodes.list(options, config, signal);
   } catch (error) {
     console.error("An error occurred while requesting nodes:", error);
     throw error;
@@ -152,16 +153,15 @@ export async function requestNodes(
  * @param {number} nodeId - The node id.
  * @returns {Promise<NodeStats>} - A promise that resolves to an object containing the node stats details.
  */
-export async function getNodeStates(nodeId: number): Promise<NodeStats> {
+export async function getNodeStates(nodeId: number, signal?: AbortSignal): Promise<NodeStats> {
   if (typeof nodeId !== "number" || isNaN(nodeId)) {
     throw new Error("Invalid nodeId");
   }
-  const nodeStats: NodeStats = await gridProxyClient.nodes.statsById(nodeId);
-  if (nodeStats.system) {
-    return nodeStats;
-  } else {
+  const nodeStats: NodeStats = await gridProxyClient.nodes.statsById(nodeId, signal);
+  if (!nodeStats.system) {
     throw new Error(`Failed to retrieve node stats`);
   }
+  return nodeStats;
 }
 
 /**
@@ -170,7 +170,7 @@ export async function getNodeStates(nodeId: number): Promise<NodeStats> {
  * @param {NodesExtractOptions} config - The configuration for the node request.
  * @returns {Promise<GridNode>} - A promise that resolves to an object containing the node details.
  */
-export async function getNode(nodeId: number, config?: NodesExtractOptions): Promise<GridNode> {
+export async function getNode(nodeId: number, config?: NodesExtractOptions, signal?: AbortSignal): Promise<GridNode> {
   if (typeof nodeId !== "number" || nodeId <= 0) {
     throw new Error("Invalid nodeId. Expected a positive integer.");
   }
@@ -180,9 +180,9 @@ export async function getNode(nodeId: number, config?: NodesExtractOptions): Pro
   }
 
   try {
-    const node: GridNode = await gridProxyClient.nodes.byId(nodeId, config);
-    return node;
+    return await gridProxyClient.nodes.byId(nodeId, config, signal);
   } catch (error: any) {
+    if (isAbortError(error)) throw error;
     throw new Error(`Failed to get node: ${error.message}`);
   }
 }
diff --git a/packages/playground/src/utils/mintings.ts b/packages/playground/src/utils/mintings.ts
index 2401bf1f5a..4cd68f78f9 100644
--- a/packages/playground/src/utils/mintings.ts
+++ b/packages/playground/src/utils/mintings.ts
@@ -46,18 +46,10 @@ export interface Fixup extends Receipt {
   minted_reward: Reward;
 }
 
-export async function getMintingData(hash: number) {
-  const mintingURL = window.env.MINTING_URL ? window.env.MINTING_URL : "https://alpha.minting.tfchain.grid.tf";
-  const hashReceipts = await fetch(`${mintingURL}/api/v1/receipt/${hash}`).then(async res => {
-    if (res.ok) {
-      const receipt = await res.json();
-      if (receipt.Minting) {
-        return receipt as unknown as Minting;
-      } else {
-        return receipt as unknown as Fixup;
-      }
-    } else throw new Error(`Receipt with hash  "${hash}" not found`);
-  });
-
-  return hashReceipts;
+export async function getMintingData(hash: number, signal?: AbortSignal) {
+  const mintingURL = window.env.MINTING_URL || "https://alpha.minting.tfchain.grid.tf";
+  const res = await fetch(`${mintingURL}/api/v1/receipt/${hash}`, { signal });
+  if (!res.ok) throw new Error(`Receipt with hash "${hash}" not found`);
+  const receipt = await res.json();
+  return receipt.Minting ? (receipt as unknown as Minting) : (receipt as unknown as Fixup);
 }
diff --git a/packages/playground/src/utils/node.ts b/packages/playground/src/utils/node.ts
index 54730e7a63..6bf2ddfca0 100644
--- a/packages/playground/src/utils/node.ts
+++ b/packages/playground/src/utils/node.ts
@@ -276,45 +276,44 @@ export async function generateReceipt(doc: jsPDF, node: NodeInterface) {
   return doc;
 }
 
-export async function getNodeMintingFixupReceipts(nodeId: number) {
+export async function getNodeMintingFixupReceipts(nodeId: number, signal?: AbortSignal) {
   let nodeReceipts: receiptInterface[] = [];
-  await axios.get(`${window.env.MINTING_URL}/api/v1/node/${nodeId}`).then(res =>
-    res.data.map(
-      (rec: {
-        hash: any;
-        receipt: {
-          Minting: Minting;
-          Fixup: Fixup;
-        };
-      }) => {
-        if (rec.receipt.Minting) {
-          nodeReceipts.push({
-            type: "MINTING",
-            hash: rec.hash,
-            cloud_units: rec.receipt.Minting.cloud_units,
-            mintingStart: rec.receipt.Minting.period.start * 1000,
-            mintingEnd: rec.receipt.Minting.period.end * 1000,
-            tft: rec.receipt.Minting.reward.tft / 1e7,
-            startPeriodTimestamp: rec.receipt.Minting.period.start,
-            endPeriodTimestamp: rec.receipt.Minting.period.end,
-          });
-        } else {
-          nodeReceipts.push({
-            type: "FIXUP",
-            hash: rec.hash,
-            cloud_units: rec.receipt.Fixup.minted_cloud_units,
-            fixup_cloud_units: rec.receipt.Fixup.fixup_cloud_units,
-            correct_cloud_units: rec.receipt.Fixup.correct_cloud_units,
-            fixupStart: rec.receipt.Fixup.period.start * 1000 || 0,
-            fixupEnd: rec.receipt.Fixup.period.end * 1000 || 0,
-            startPeriodTimestamp: rec.receipt.Fixup.period.start,
-            endPeriodTimestamp: rec.receipt.Fixup.period.end,
-            tft: rec.receipt.Fixup.minted_reward.tft / 1e7,
-            fixupReward: rec.receipt.Fixup.fixup_reward.tft / 1e7,
-          });
-        }
-      },
-    ),
+  const res = await axios.get(`${window.env.MINTING_URL}/api/v1/node/${nodeId}`, { signal });
+  res.data.map(
+    (rec: {
+      hash: any;
+      receipt: {
+        Minting: Minting;
+        Fixup: Fixup;
+      };
+    }) => {
+      if (rec.receipt.Minting) {
+        nodeReceipts.push({
+          type: "MINTING",
+          hash: rec.hash,
+          cloud_units: rec.receipt.Minting.cloud_units,
+          mintingStart: rec.receipt.Minting.period.start * 1000,
+          mintingEnd: rec.receipt.Minting.period.end * 1000,
+          tft: rec.receipt.Minting.reward.tft / 1e7,
+          startPeriodTimestamp: rec.receipt.Minting.period.start,
+          endPeriodTimestamp: rec.receipt.Minting.period.end,
+        });
+      } else {
+        nodeReceipts.push({
+          type: "FIXUP",
+          hash: rec.hash,
+          cloud_units: rec.receipt.Fixup.minted_cloud_units,
+          fixup_cloud_units: rec.receipt.Fixup.fixup_cloud_units,
+          correct_cloud_units: rec.receipt.Fixup.correct_cloud_units,
+          fixupStart: rec.receipt.Fixup.period.start * 1000 || 0,
+          fixupEnd: rec.receipt.Fixup.period.end * 1000 || 0,
+          startPeriodTimestamp: rec.receipt.Fixup.period.start,
+          endPeriodTimestamp: rec.receipt.Fixup.period.end,
+          tft: rec.receipt.Fixup.minted_reward.tft / 1e7,
+          fixupReward: rec.receipt.Fixup.fixup_reward.tft / 1e7,
+        });
+      }
+    },
   );
 
   // sort based on the start date
diff --git a/packages/playground/src/views/nodes.vue b/packages/playground/src/views/nodes.vue
index 765f7ee0a5..5d9d402eae 100644
--- a/packages/playground/src/views/nodes.vue
+++ b/packages/playground/src/views/nodes.vue
@@ -487,6 +487,7 @@ import NodeDetails from "@/components/node_details.vue";
 import NodesTable from "@/components/nodes_table.vue";
 import router from "@/router";
 import { useProfileManager } from "@/stores";
+import { isAbortError, useWithAbortSignal } from "@/hooks/useAbortController";
 import { requestNodes } from "@/utils/get_nodes";
 import { convertToBytes } from "@/utils/get_nodes";
 
@@ -523,6 +524,7 @@ export default {
   },
   setup() {
     const profileManager = useProfileManager();
+    const requestNodesWithAbort = useWithAbortSignal(requestNodes);
     const size = ref(window.env.PAGE_SIZE);
     const error = ref(false);
     const page = ref(1);
@@ -592,7 +594,7 @@ export default {
       error.value = false;
       if (retCount) page.value = 1;
       try {
-        const { count, data } = await requestNodes(
+        const { count, data } = await requestNodesWithAbort(
           {
             page: page.value,
             size: size.value,
@@ -632,6 +634,8 @@ export default {
         _nodes.value = data;
         if (retCount) nodesCount.value = count ?? 0;
       } catch (err) {
+        // Ignore abort errors - component unmounted
+        if (isAbortError(err)) return;
         console.log(err);
         error.value = true;
       } finally {
diff --git a/packages/playground/src/weblets/tf_contracts_list.vue b/packages/playground/src/weblets/tf_contracts_list.vue
index 598481f348..f5f705e317 100644
--- a/packages/playground/src/weblets/tf_contracts_list.vue
+++ b/packages/playground/src/weblets/tf_contracts_list.vue
@@ -260,6 +260,8 @@ import { type Contract, ContractState, NodeStatus, SortByContracts, SortOrder }
 import { DeploymentKeyDeletionError } from "@threefold/types";
 import { computed, defineComponent, onMounted, type Ref, ref } from "vue";
 
+import { isAbortError, useWithAbortSignal } from "@/hooks/useAbortController";
+
 import ContractsTable from "@/components/contracts_list/contracts_table.vue";
 import { useProfileManagerController } from "@/components/profile_manager_controller.vue";
 import { useProfileManager } from "@/stores/profile_manager";
@@ -320,6 +322,8 @@ const nodeIDs = computed(() => {
 });
 // To avoid multiple requests
 const cachedNodeIDs = ref<number[]>([]);
+const getNodeInfoWithAbort = useWithAbortSignal(getNodeInfo);
+
 onMounted(() => {
   loadContracts();
 });
@@ -415,9 +419,10 @@ async function loadContracts(type?: ContractType, options?: { sort: { key: strin
     contracts.value = [...nodeContracts.value, ...nameContracts.value, ...rentContracts.value];
     if (!type) await getTotalCost();
     // Get the node info e.g. node status.
-    nodeInfo.value = await getNodeInfo(nodeIDs.value, cachedNodeIDs.value);
+    nodeInfo.value = await getNodeInfoWithAbort(nodeIDs.value, cachedNodeIDs.value);
     cachedNodeIDs.value.push(...nodeIDs.value);
   } catch (error: any) {
+    if (isAbortError(error)) return;
     loadingErrorMessage.value = `Error while loading contracts: ${error.message}`;
     createCustomToast(loadingErrorMessage.value, ToastType.danger, {});
   } finally {
diff --git a/packages/playground/tests/hooks/useAbortController.test.ts b/packages/playground/tests/hooks/useAbortController.test.ts
new file mode 100644
index 0000000000..9623e4c96e
--- /dev/null
+++ b/packages/playground/tests/hooks/useAbortController.test.ts
@@ -0,0 +1,199 @@
+import { mount } from "@vue/test-utils";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { defineComponent, onMounted } from "vue";
+
+import { useAbortController, useFetch, useWithAbortSignal } from "../../src/hooks/useAbortController";
+
+// Clean up any pending timers after each test
+afterEach(() => {
+  vi.clearAllTimers();
+});
+
+describe("useAbortController", () => {
+  it("should create an AbortSignal", () => {
+    const TestComponent = defineComponent({
+      setup() {
+        const signal = useAbortController();
+        expect(signal).toBeInstanceOf(AbortSignal);
+        expect(signal.aborted).toBe(false);
+        return {};
+      },
+      template: "<div>Test</div>",
+    });
+
+    mount(TestComponent);
+  });
+
+  it("should abort signal when component unmounts", async () => {
+    let signal: AbortSignal | null = null;
+
+    const TestComponent = defineComponent({
+      setup() {
+        signal = useAbortController();
+        expect(signal.aborted).toBe(false);
+        return {};
+      },
+      template: "<div>Test</div>",
+    });
+
+    const wrapper = mount(TestComponent);
+    expect(signal?.aborted).toBe(false);
+
+    wrapper.unmount();
+    // Wait for Vue to process the unmount
+    await new Promise(resolve => setTimeout(resolve, 0));
+
+    expect(signal?.aborted).toBe(true);
+  });
+
+  it("should abort fetch request when component unmounts", async () => {
+    const fetchSpy = vi.spyOn(global, "fetch").mockResolvedValue(
+      new Response(JSON.stringify({ data: "test" }), {
+        status: 200,
+        headers: { "Content-Type": "application/json" },
+      }),
+    );
+
+    const TestComponent = defineComponent({
+      setup() {
+        const fetchWithSignal = useFetch();
+        onMounted(async () => {
+          await fetchWithSignal("https://example.com/api");
+        });
+        return {};
+      },
+      template: "<div>Test</div>",
+    });
+
+    const wrapper = mount(TestComponent);
+    await new Promise(resolve => setTimeout(resolve, 10));
+
+    // Verify fetch was called with signal
+    expect(fetchSpy).toHaveBeenCalled();
+    const fetchCall = fetchSpy.mock.calls[0][1] as RequestInit;
+    expect(fetchCall?.signal).toBeInstanceOf(AbortSignal);
+    expect(fetchCall?.signal?.aborted).toBe(false);
+
+    // Unmount component
+    wrapper.unmount();
+    await new Promise(resolve => setTimeout(resolve, 0));
+
+    // Signal should be aborted
+    expect(fetchCall?.signal?.aborted).toBe(true);
+
+    fetchSpy.mockRestore();
+  });
+
+  it("should wrap function with abort signal", async () => {
+    const mockFn = vi.fn().mockResolvedValue({ data: "test" });
+    let wrappedFn: ReturnType<typeof useWithAbortSignal<typeof mockFn>>;
+
+    const TestComponent = defineComponent({
+      setup() {
+        wrappedFn = useWithAbortSignal(mockFn);
+        return {};
+      },
+      template: "<div>Test</div>",
+    });
+
+    const wrapper = mount(TestComponent);
+    await new Promise(resolve => setTimeout(resolve, 0));
+
+    // Call the wrapped function
+    await wrappedFn!("arg1", "arg2");
+
+    // Verify function was called with signal appended
+    expect(mockFn).toHaveBeenCalledWith("arg1", "arg2", expect.any(AbortSignal));
+
+    wrapper.unmount();
+  });
+
+  it("should not append signal if last argument is already AbortSignal", async () => {
+    const mockFn = vi.fn().mockResolvedValue({ data: "test" });
+    const existingController = new AbortController();
+    const existingSignal = existingController.signal;
+    let wrappedFn: ReturnType<typeof useWithAbortSignal<typeof mockFn>>;
+
+    const TestComponent = defineComponent({
+      setup() {
+        wrappedFn = useWithAbortSignal(mockFn);
+        return {};
+      },
+      template: "<div>Test</div>",
+    });
+
+    const wrapper = mount(TestComponent);
+    await new Promise(resolve => setTimeout(resolve, 0));
+
+    // Call with existing signal
+    await wrappedFn!("arg1", existingSignal);
+
+    // Verify function was called with existing signal, not a new one
+    expect(mockFn).toHaveBeenCalledWith("arg1", existingSignal);
+
+    wrapper.unmount();
+  });
+
+  it("should handle abort error gracefully", async () => {
+    let timeoutId: ReturnType<typeof setTimeout> | null = null;
+
+    const fetchSpy = vi.spyOn(global, "fetch").mockImplementation(
+      (url, options) =>
+        new Promise((resolve, reject) => {
+          const signal = (options as RequestInit)?.signal as AbortSignal;
+          if (signal) {
+            signal.addEventListener("abort", () => {
+              if (timeoutId) {
+                clearTimeout(timeoutId);
+                timeoutId = null;
+              }
+              const error = new Error("Request aborted");
+              error.name = "AbortError";
+              reject(error);
+            });
+          }
+          // Simulate slow request
+          timeoutId = setTimeout(() => {
+            timeoutId = null;
+            resolve(new Response());
+          }, 1000);
+        }) as Promise<Response>,
+    );
+
+    let errorCaught: Error | null = null;
+
+    const TestComponent = defineComponent({
+      setup() {
+        const fetchWithSignal = useFetch();
+        onMounted(async () => {
+          try {
+            await fetchWithSignal("https://example.com/api");
+          } catch (error) {
+            errorCaught = error as Error;
+          }
+        });
+        return {};
+      },
+      template: "<div>Test</div>",
+    });
+
+    const wrapper = mount(TestComponent);
+    await new Promise(resolve => setTimeout(resolve, 10));
+
+    // Unmount immediately to trigger abort
+    wrapper.unmount();
+    await new Promise(resolve => setTimeout(resolve, 50));
+
+    // Clean up any remaining timeout
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+      timeoutId = null;
+    }
+
+    // Should have caught AbortError
+    expect(errorCaught).toBeInstanceOf(Error);
+    expect(errorCaught?.name).toBe("AbortError");
+
+    fetchSpy.mockRestore();
+  });
+});