diff --git a/packages/ui-components/src/__tests__/OrderDetail.test.svelte b/packages/ui-components/src/__tests__/OrderDetail.test.svelte
index db5b7d727..98a5b6426 100644
--- a/packages/ui-components/src/__tests__/OrderDetail.test.svelte
+++ b/packages/ui-components/src/__tests__/OrderDetail.test.svelte
@@ -9,8 +9,13 @@
 	import type { Readable } from 'svelte/store';
 	import { Button } from 'flowbite-svelte';
 	import DepositOrWithdrawButtons from '../lib/components/detail/DepositOrWithdrawButtons.svelte';
+	import Refresh from '$lib/components/icon/Refresh.svelte';
+	import { useQueryClient } from '@tanstack/svelte-query';
 	import type { OrderRemoveModalProps } from '../lib/types/modal';
 	import type { Hex } from 'viem';
+	import { invalidateIdQuery } from '$lib/queries/queryClient';
+
+	const queryClient = useQueryClient();
 
 	export let walletAddressMatchesOrBlank: Readable<(address: string) => boolean> | undefined =
 		undefined;
@@ -51,6 +56,11 @@
 				Remove
 			</Button>
 		{/if}
+
+		<Refresh
+			on:click={async () => await invalidateIdQuery(queryClient, id)}
+			spin={$orderDetailQuery.isLoading || $orderDetailQuery.isFetching}
+		/>
 	</svelte:fragment>
 
 	<svelte:fragment slot="card" let:data>
diff --git a/packages/ui-components/src/__tests__/OrderDetail.test.ts b/packages/ui-components/src/__tests__/OrderDetail.test.ts
index b7dad943a..70dd7459a 100644
--- a/packages/ui-components/src/__tests__/OrderDetail.test.ts
+++ b/packages/ui-components/src/__tests__/OrderDetail.test.ts
@@ -4,6 +4,7 @@ import { describe, it, vi, type Mock } from 'vitest';
 import { expect } from '../lib/test/matchers';
 import OrderDetail from './OrderDetail.test.svelte';
 import type { OrderSubgraph, Vault } from '@rainlanguage/orderbook/js_api';
+import userEvent from '@testing-library/user-event';
 import type { Config } from 'wagmi';
 
 const { mockWalletAddressMatchesOrBlankStore } = await vi.hoisted(
@@ -217,4 +218,50 @@ describe('OrderDetail Component', () => {
 			expect(screen.getByText('Input & output vaults')).toBeInTheDocument();
 		});
 	});
+
+	it('refresh button triggers query invalidation when clicked', async () => {
+		const mockQuery = vi.mocked(await import('@tanstack/svelte-query'));
+		const mockInvalidateQueries = vi.fn();
+
+		// Mock the createQuery as in other tests
+		mockQuery.createQuery = vi.fn((__options, _queryClient) => ({
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any
+			subscribe: (fn: (value: any) => void) => {
+				fn({
+					data: { order: mockOrder, vaults: new Map() },
+					status: 'success',
+					isFetching: false,
+					refetch: () => {}
+				});
+				return { unsubscribe: () => {} };
+			}
+		})) as Mock;
+
+		// Mock the useQueryClient hook
+		mockQuery.useQueryClient = vi.fn(() => ({
+			invalidateQueries: mockInvalidateQueries
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		})) as any;
+
+		render(OrderDetail, {
+			props: {
+				id: 'mockId',
+				subgraphUrl: 'https://example.com',
+				walletAddressMatchesOrBlank: mockWalletAddressMatchesOrBlankStore,
+				chainId,
+				orderbookAddress
+			}
+		});
+
+		const refreshButton = screen.getByTestId('refresh-button');
+		await userEvent.click(refreshButton);
+
+		await waitFor(() => {
+			expect(mockInvalidateQueries).toHaveBeenCalledWith({
+				queryKey: ['mockId'],
+				refetchType: 'all',
+				exact: false
+			});
+		});
+	});
 });
diff --git a/packages/ui-components/src/__tests__/TanstackAppTable.test.svelte b/packages/ui-components/src/__tests__/TanstackAppTable.test.svelte
index cae33b3d1..2667fbc8a 100644
--- a/packages/ui-components/src/__tests__/TanstackAppTable.test.svelte
+++ b/packages/ui-components/src/__tests__/TanstackAppTable.test.svelte
@@ -4,9 +4,10 @@
 	export let emptyMessage: string;
 	export let title: string;
 	export let head: string;
+	export let queryKey: string;
 </script>
 
-<TanstackAppTable {query} {emptyMessage} rowHoverable>
+<TanstackAppTable {query} {emptyMessage} rowHoverable {queryKey}>
 	<svelte:fragment slot="title">
 		<h2>{title}</h2>
 	</svelte:fragment>
diff --git a/packages/ui-components/src/__tests__/TanstackAppTable.test.ts b/packages/ui-components/src/__tests__/TanstackAppTable.test.ts
index d55017655..55ac51517 100644
--- a/packages/ui-components/src/__tests__/TanstackAppTable.test.ts
+++ b/packages/ui-components/src/__tests__/TanstackAppTable.test.ts
@@ -2,176 +2,167 @@ import { render, screen, waitFor } from '@testing-library/svelte';
 import { test, expect } from 'vitest';
 import TanstackAppTableTest from './TanstackAppTable.test.svelte';
 import userEvent from '@testing-library/user-event';
-import { createResolvableInfiniteQuery } from '../lib/__mocks__/queries';
-import { writable } from 'svelte/store';
+import { writable, get } from 'svelte/store';
 import type { CreateInfiniteQueryResult, InfiniteData } from '@tanstack/svelte-query';
 
-test('shows head and title', async () => {
-	const { query, resolve } = createResolvableInfiniteQuery((pageParam) => {
-		return ['page' + pageParam];
-	});
-
-	render(TanstackAppTableTest, {
-		query,
+vi.mock('@tanstack/svelte-query', () => ({
+	useQueryClient: () => ({})
+}));
+
+const mockInvalidateIdQuery = vi.fn();
+vi.mock('$lib/queries/queryClient', () => ({
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	invalidateIdQuery: (queryClient: any, queryKey: string) =>
+		mockInvalidateIdQuery(queryClient, queryKey)
+}));
+
+// Helper function to create base pages
+const createPages = (pageData: unknown[] = ['page0']) =>
+	writable({
+		pages: [pageData],
+		pageParams: [0]
+	});
+
+// Helper function to create base mock query
+const createMockQuery = (pages: ReturnType<typeof createPages>, overrides = {}) => {
+	return writable({
+		data: get(pages),
+		isLoading: false,
+		isFetching: false,
+		isFetchingNextPage: false,
+		hasNextPage: true,
+		status: 'success' as const,
+		fetchStatus: 'idle' as const,
+		fetchNextPage: vi.fn(),
+		...overrides
+	});
+};
+
+// Helper function for common render props
+const renderTable = (query: ReturnType<typeof createMockQuery>) => {
+	return render(TanstackAppTableTest, {
+		query: query as unknown as CreateInfiniteQueryResult<InfiniteData<unknown[], unknown>, Error>,
 		emptyMessage: 'No rows',
 		title: 'Test Table',
-		head: 'Test head'
+		head: 'Test head',
+		queryKey: 'test'
 	});
+};
 
-	resolve();
+test('shows head and title', async () => {
+	const pages = createPages();
+	const mockQuery = createMockQuery(pages);
+	renderTable(mockQuery);
 
 	await waitFor(() => expect(screen.getByTestId('head')).toHaveTextContent('Test head'));
 	expect(screen.getByTestId('title')).toHaveTextContent('Test Table');
 });
 
 test('renders rows', async () => {
-	const { query, resolve } = createResolvableInfiniteQuery((pageParam) => {
-		return ['page' + pageParam];
-	});
+	const pages = createPages();
+	const mockQuery = createMockQuery(pages);
+	renderTable(mockQuery);
 
-	render(TanstackAppTableTest, {
-		query,
-		emptyMessage: 'No rows',
-		title: 'Test Table',
-		head: 'Test head'
-	});
-
-	resolve();
 	await waitFor(() => expect(screen.getByTestId('bodyRow')).toHaveTextContent('page0'));
 });
 
 test('shows empty message', async () => {
-	const { query, resolve } = createResolvableInfiniteQuery(() => {
-		return [];
-	});
-
-	render(TanstackAppTableTest, {
-		query,
-		emptyMessage: 'No rows',
-		title: 'Test Table',
-		head: 'Test head'
-	});
-
-	resolve();
+	const pages = createPages([]);
+	const mockQuery = createMockQuery(pages);
+	renderTable(mockQuery);
 
 	await waitFor(() => expect(screen.getByTestId('emptyMessage')).toHaveTextContent('No rows'));
 });
 
 test('loads more rows', async () => {
-	const { query, resolve } = createResolvableInfiniteQuery((pageParam) => {
-		return ['page' + pageParam];
-	});
-
-	render(TanstackAppTableTest, {
-		query,
-		emptyMessage: 'No rows',
-		title: 'Test Table',
-		head: 'Test head'
-	});
-
-	resolve();
+	const pages = createPages();
+	const mockQuery = createMockQuery(pages, {
+		fetchNextPage: async () => {
+			mockQuery.update((q) => ({ ...q, isFetchingNextPage: true }));
+			await new Promise((resolve) => setTimeout(resolve, 0));
+			pages.update((data) => ({
+				pages: [...data.pages, [`page${data.pages.length}`]],
+				pageParams: [...data.pageParams, data.pageParams.length]
+			}));
+			mockQuery.update((q) => ({
+				...q,
+				data: get(pages),
+				isFetchingNextPage: false
+			}));
+		}
+	});
+	renderTable(mockQuery);
 
 	await waitFor(() => expect(screen.getByTestId('bodyRow')).toHaveTextContent('page0'));
 
-	// loading more rows
 	const loadMoreButton = screen.getByTestId('loadMoreButton');
 	await userEvent.click(loadMoreButton);
 
-	resolve();
-
 	await waitFor(() => {
 		expect(screen.getAllByTestId('bodyRow')).toHaveLength(2);
 	});
 
 	let rows = screen.getAllByTestId('bodyRow');
-
-	expect(rows).toHaveLength(2);
 	expect(rows[0]).toHaveTextContent('page0');
 	expect(rows[1]).toHaveTextContent('page1');
 
-	// loading more rows
 	await userEvent.click(loadMoreButton);
 
-	resolve();
-
 	await waitFor(() => {
 		expect(screen.getAllByTestId('bodyRow')).toHaveLength(3);
 	});
 
 	rows = screen.getAllByTestId('bodyRow');
-
-	expect(rows).toHaveLength(3);
 	expect(rows[0]).toHaveTextContent('page0');
 	expect(rows[1]).toHaveTextContent('page1');
 	expect(rows[2]).toHaveTextContent('page2');
 });
 
 test('load more button message changes when loading', async () => {
-	const { query, resolve } = createResolvableInfiniteQuery((pageParam) => {
-		return ['page' + pageParam];
-	});
-
-	render(TanstackAppTableTest, {
-		query,
-		emptyMessage: 'No rows',
-		title: 'Test Table',
-		head: 'Test head'
+	const pages = createPages();
+	const mockQuery = createMockQuery(pages, {
+		fetchNextPage: async () => {
+			mockQuery.update((q) => ({ ...q, isFetchingNextPage: true }));
+			await new Promise((resolve) => setTimeout(resolve, 100));
+			mockQuery.update((q) => ({ ...q, isFetchingNextPage: false }));
+		}
 	});
-
-	resolve();
+	renderTable(mockQuery);
 
 	expect(await screen.findByTestId('loadMoreButton')).toHaveTextContent('Load More');
 
-	// loading more rows
 	const loadMoreButton = screen.getByTestId('loadMoreButton');
 	await userEvent.click(loadMoreButton);
 
 	expect(await screen.findByTestId('loadMoreButton')).toHaveTextContent('Loading more...');
 
-	resolve();
-
 	await waitFor(() => {
 		expect(screen.getByTestId('loadMoreButton')).toHaveTextContent('Load More');
 	});
 });
 
 test('shows refresh icon', async () => {
-	const { query, resolve } = createResolvableInfiniteQuery((pageParam) => {
-		return ['page' + pageParam];
-	});
-
-	render(TanstackAppTableTest, {
-		query,
-		emptyMessage: 'No rows',
-		title: 'Test Table',
-		head: 'Test head'
-	});
-
-	resolve();
+	const pages = createPages();
+	const mockQuery = createMockQuery(pages);
+	renderTable(mockQuery);
 
 	await waitFor(() => expect(screen.getByTestId('refreshButton')).toBeInTheDocument());
 });
 
 test('refetches data when refresh button is clicked', async () => {
 	const mockRefetch = vi.fn();
-	const mockQuery = writable({
+	const mockQuery = createMockQuery(createPages(), {
 		status: 'success',
 		fetchStatus: 'idle',
+		isLoading: false,
+		isFetching: false,
 		refetch: mockRefetch
 	});
-
-	render(TanstackAppTableTest, {
-		query: mockQuery as unknown as CreateInfiniteQueryResult<
-			InfiniteData<unknown[], unknown>,
-			Error
-		>,
-		emptyMessage: 'No rows',
-		title: 'Test Table',
-		head: 'Test head'
-	});
+	renderTable(mockQuery);
 
 	const refreshButton = screen.getByTestId('refreshButton');
 	await userEvent.click(refreshButton);
 
 	expect(mockRefetch).toHaveBeenCalled();
+	expect(mockInvalidateIdQuery).toHaveBeenCalledWith(expect.anything(), 'test');
 });
diff --git a/packages/ui-components/src/__tests__/TanstackOrderQuote.test.ts b/packages/ui-components/src/__tests__/TanstackOrderQuote.test.ts
index 0ce408abf..8813b44cd 100644
--- a/packages/ui-components/src/__tests__/TanstackOrderQuote.test.ts
+++ b/packages/ui-components/src/__tests__/TanstackOrderQuote.test.ts
@@ -102,7 +102,7 @@ test('refreshes the quote when the refresh icon is clicked', async () => {
 		}
 	]);
 
-	const refreshButton = screen.getByTestId('refreshButton');
+	const refreshButton = screen.getByTestId('refresh-button');
 	fireEvent.click(refreshButton);
 
 	await waitFor(() => {
diff --git a/packages/ui-components/src/__tests__/VaultDetail.test.ts b/packages/ui-components/src/__tests__/VaultDetail.test.ts
index a4c2c5014..1ac9fdedb 100644
--- a/packages/ui-components/src/__tests__/VaultDetail.test.ts
+++ b/packages/ui-components/src/__tests__/VaultDetail.test.ts
@@ -6,6 +6,7 @@ import VaultDetail from '../lib/components/detail/VaultDetail.svelte';
 import { readable, writable } from 'svelte/store';
 import { darkChartTheme } from '../lib/utils/lightweightChartsThemes';
 import type { Config } from 'wagmi';
+import userEvent from '@testing-library/user-event';
 
 // Mock the js_api getVault function
 vi.mock('@rainlanguage/orderbook/js_api', () => ({
@@ -177,3 +178,68 @@ test('shows deposit/withdraw buttons when signerAddress matches owner', async ()
 		expect(screen.getAllByTestId('depositOrWithdrawButton')).toHaveLength(2);
 	});
 });
+
+test('refresh button triggers query invalidation when clicked', async () => {
+	const mockData = {
+		id: '1',
+		vaultId: '0xabc',
+		owner: '0x123',
+		token: {
+			id: '0x456',
+			address: '0x456',
+			name: 'USDC coin',
+			symbol: 'USDC',
+			decimals: '6'
+		},
+		balance: '100000000000',
+		ordersAsInput: [
+			{
+				id: '1',
+				owner: '0x123'
+			}
+		],
+		ordersAsOutput: [
+			{
+				id: '2',
+				owner: '0x123'
+			}
+		],
+		balanceChanges: [],
+		orderbook: {
+			id: '0x00'
+		}
+	};
+
+	const { getVault } = await import('@rainlanguage/orderbook/js_api');
+	vi.mocked(getVault).mockResolvedValue(mockData);
+	const queryClient = new QueryClient();
+	const invalidateQueries = vi.spyOn(queryClient, 'invalidateQueries');
+
+	const mockWagmiConfig = writable({} as Config);
+	const mockSignerAddress = writable('0x123'); // Same as owner address
+
+	render(VaultDetail, {
+		props: {
+			id: '100',
+			network: 'mainnet',
+			activeNetworkRef: writable('mainnet'),
+			activeOrderbookRef: writable('0x00'),
+			settings: mockSettings,
+			lightweightChartsTheme: readable(darkChartTheme),
+			wagmiConfig: mockWagmiConfig,
+			signerAddress: mockSignerAddress,
+			handleDepositOrWithdrawModal: vi.fn()
+		},
+		context: new Map([['$$_queryClient', queryClient]])
+	});
+
+	await waitFor(async () => {
+		const refreshButton = await screen.findAllByTestId('refresh-button');
+		await userEvent.click(refreshButton[0]);
+		expect(invalidateQueries).toHaveBeenCalledWith({
+			queryKey: ['100'],
+			refetchType: 'all',
+			exact: false
+		});
+	});
+});
diff --git a/packages/ui-components/src/lib/components/TanstackAppTable.svelte b/packages/ui-components/src/lib/components/TanstackAppTable.svelte
index d713081db..cb5760a8a 100644
--- a/packages/ui-components/src/lib/components/TanstackAppTable.svelte
+++ b/packages/ui-components/src/lib/components/TanstackAppTable.svelte
@@ -1,12 +1,16 @@
 <script lang="ts" generics="T">
+	import { invalidateIdQuery } from '$lib/queries/queryClient';
 	import Refresh from './icon/Refresh.svelte';
-
 	import type { CreateInfiniteQueryResult, InfiniteData } from '@tanstack/svelte-query';
 	import { Button, Table, TableBody, TableBodyRow, TableHead } from 'flowbite-svelte';
 	import { createEventDispatcher } from 'svelte';
+	import { useQueryClient } from '@tanstack/svelte-query';
+
+	const queryClient = useQueryClient();
 
 	const dispatch = createEventDispatcher();
 
+	export let queryKey: string | undefined;
 	// eslint-disable-next-line no-undef
 	export let query: CreateInfiniteQueryResult<InfiniteData<T[], unknown>, Error>;
 	export let emptyMessage: string = 'None found';
@@ -18,10 +22,13 @@
 	<slot name="timeFilter" />
 	<slot name="title" />
 	<Refresh
-		data-testid="refreshButton"
 		class="ml-2 h-8 w-5 cursor-pointer text-gray-400 dark:text-gray-400"
+		data-testid="refreshButton"
 		spin={$query.isLoading || $query.isFetching}
-		on:click={() => {
+		on:click={async () => {
+			if (queryKey) {
+				await invalidateIdQuery(queryClient, queryKey);
+			}
 			$query.refetch();
 		}}
 	/>
diff --git a/packages/ui-components/src/lib/components/charts/LightweightChart.svelte b/packages/ui-components/src/lib/components/charts/LightweightChart.svelte
index 8713fd332..09d7e8bf8 100644
--- a/packages/ui-components/src/lib/components/charts/LightweightChart.svelte
+++ b/packages/ui-components/src/lib/components/charts/LightweightChart.svelte
@@ -99,15 +99,16 @@
 
 	function setupChart() {
 		if (chartElement === undefined) return;
-
 		chart = createChart(chartElement);
 		series = createSeries(chart);
 		setOptions();
+		updateNewDataPoints();
 	}
 
 	$: if (data || series) updateNewDataPoints();
 	$: if (timeDelta) setTimeScale();
 	$: if ($lightweightChartsTheme) setOptions();
+	$: if (chartElement && data.length > 0 && !chart) setupChart();
 
 	onMount(() => {
 		setupChart();
diff --git a/packages/ui-components/src/lib/components/detail/OrderDetail.svelte b/packages/ui-components/src/lib/components/detail/OrderDetail.svelte
index 66dadb7d9..827ded2f6 100644
--- a/packages/ui-components/src/lib/components/detail/OrderDetail.svelte
+++ b/packages/ui-components/src/lib/components/detail/OrderDetail.svelte
@@ -11,9 +11,8 @@
 	import OrderVaultsVolTable from '../tables/OrderVaultsVolTable.svelte';
 	import { QKEY_ORDER } from '../../queries/keys';
 	import CodeMirrorRainlang from '../CodeMirrorRainlang.svelte';
-	import { queryClient } from '../../stores/queryClient';
 	import { getOrder, type OrderWithSortedVaults } from '@rainlanguage/orderbook/js_api';
-	import { createQuery } from '@tanstack/svelte-query';
+	import { createQuery, useQueryClient } from '@tanstack/svelte-query';
 	import { Button, TabItem, Tabs } from 'flowbite-svelte';
 	import { onDestroy } from 'svelte';
 	import type { Writable } from 'svelte/store';
@@ -28,6 +27,9 @@
 		QuoteDebugModalHandler,
 		DebugTradeModalHandler
 	} from '../../types/modal';
+	import Refresh from '../icon/Refresh.svelte';
+	import { invalidateIdQuery } from '$lib/queries/queryClient';
+
 	export let handleDepositOrWithdrawModal:
 		| ((props: DepositOrWithdrawModalProps) => void)
 		| undefined = undefined;
@@ -48,6 +50,8 @@
 	let codeMirrorDisabled = true;
 	let codeMirrorStyles = {};
 
+	const queryClient = useQueryClient();
+
 	$: orderDetailQuery = createQuery<OrderWithSortedVaults>({
 		queryKey: [id, QKEY_ORDER + id],
 		queryFn: () => {
@@ -57,14 +61,8 @@
 	});
 
 	const interval = setInterval(async () => {
-		// This invalidate function invalidates
-		// both order detail and order trades list queries
-		await queryClient.invalidateQueries({
-			queryKey: [id],
-			refetchType: 'active',
-			exact: false
-		});
-	}, 5000);
+		await invalidateIdQuery(queryClient, id);
+	}, 10000);
 
 	onDestroy(() => {
 		clearInterval(interval);
@@ -76,33 +74,43 @@
 <TanstackPageContentDetail query={orderDetailQuery} emptyMessage="Order not found">
 	<svelte:fragment slot="top" let:data>
 		<div
-			class="flex w-full flex-wrap justify-between gap-4 text-3xl font-medium lg:justify-normal dark:text-white"
+			class="flex w-full flex-wrap items-center justify-between gap-4 text-3xl font-medium lg:justify-between dark:text-white"
 		>
-			<div class="flex gap-x-2">
-				<span class="font-light">Order</span>
-				<Hash shorten value={data.order.orderHash} />
+			<div class="flex items-center gap-x-2">
+				<div class="flex gap-x-2">
+					<span class="font-light">Order</span>
+					<Hash shorten value={data.order.orderHash} />
+				</div>
+
+				<BadgeActive active={data.order.active} large />
+			</div>
+
+			<div class="flex items-center gap-2">
+				{#if data && $signerAddress === data.order.owner && data.order.active && handleOrderRemoveModal && $wagmiConfig && chainId && orderbookAddress}
+					<Button
+						data-testid="remove-button"
+						color="dark"
+						on:click={() =>
+							handleOrderRemoveModal({
+								open: true,
+								args: {
+									order: data.order,
+									onRemove: $orderDetailQuery.refetch,
+									chainId,
+									orderbookAddress,
+									subgraphUrl
+								}
+							})}
+						disabled={!handleOrderRemoveModal}
+					>
+						Remove
+					</Button>
+				{/if}
+				<Refresh
+					on:click={async () => await invalidateIdQuery(queryClient, id)}
+					spin={$orderDetailQuery.isLoading || $orderDetailQuery.isFetching}
+				/>
 			</div>
-			<BadgeActive active={data.order.active} large />
-			{#if data && $signerAddress === data.order.owner && data.order.active && handleOrderRemoveModal && $wagmiConfig && chainId && orderbookAddress}
-				<Button
-					data-testid="remove-button"
-					color="dark"
-					on:click={() =>
-						handleOrderRemoveModal({
-							open: true,
-							args: {
-								order: data.order,
-								onRemove: $orderDetailQuery.refetch,
-								chainId,
-								orderbookAddress,
-								subgraphUrl
-							}
-						})}
-					disabled={!handleOrderRemoveModal}
-				>
-					Remove
-				</Button>
-			{/if}
 		</div>
 	</svelte:fragment>
 	<svelte:fragment slot="card" let:data>
diff --git a/packages/ui-components/src/lib/components/detail/TanstackOrderQuote.svelte b/packages/ui-components/src/lib/components/detail/TanstackOrderQuote.svelte
index 684916537..027d961c8 100644
--- a/packages/ui-components/src/lib/components/detail/TanstackOrderQuote.svelte
+++ b/packages/ui-components/src/lib/components/detail/TanstackOrderQuote.svelte
@@ -1,11 +1,12 @@
 <script lang="ts" generics="T">
+	import { invalidateIdQuery } from '$lib/queries/queryClient';
 	import Refresh from '../icon/Refresh.svelte';
 	import EditableSpan from '../EditableSpan.svelte';
 	import { getOrderQuote, type BatchOrderQuotesResponse } from '@rainlanguage/orderbook/quote';
 	import { QKEY_ORDER_QUOTE } from '../../queries/keys';
 	import { formatUnits, hexToNumber, isHex } from 'viem';
 	import type { Hex } from 'viem';
-	import { createQuery } from '@tanstack/svelte-query';
+	import { createQuery, useQueryClient } from '@tanstack/svelte-query';
 	import type { OrderSubgraph } from '@rainlanguage/orderbook/js_api';
 	import {
 		Table,
@@ -36,15 +37,16 @@
 
 	let enabled = true;
 
-	const refreshQuotes = () => {
-		$orderQuoteQuery.refetch();
+	const queryClient = useQueryClient();
+
+	const refreshQuotes = async () => {
+		await invalidateIdQuery(queryClient, id);
 	};
 
 	$: orderQuoteQuery = createQuery<BatchOrderQuotesResponse[]>({
-		queryKey: [QKEY_ORDER_QUOTE + id, id],
+		queryKey: [id, QKEY_ORDER_QUOTE + id],
 		queryFn: () => getOrderQuote([order], rpcUrl),
-		enabled: !!id && enabled,
-		refetchInterval: 10000
+		enabled: !!id && enabled
 	});
 
 	let blockNumber: number | undefined;
@@ -70,7 +72,6 @@
 			{/if}
 			<span></span>
 			<Refresh
-				data-testid="refreshButton"
 				class="h-8 w-5 cursor-pointer text-gray-400 dark:text-gray-400"
 				on:click={refreshQuotes}
 				spin={$orderQuoteQuery.isLoading || $orderQuoteQuery.isFetching}
diff --git a/packages/ui-components/src/lib/components/detail/VaultDetail.svelte b/packages/ui-components/src/lib/components/detail/VaultDetail.svelte
index 6c7a0b953..1b0bb524d 100644
--- a/packages/ui-components/src/lib/components/detail/VaultDetail.svelte
+++ b/packages/ui-components/src/lib/components/detail/VaultDetail.svelte
@@ -14,7 +14,7 @@
 
 	import { onDestroy } from 'svelte';
 	import type { Readable, Writable } from 'svelte/store';
-	import { queryClient } from '../../queries/queryClient';
+	import { useQueryClient } from '@tanstack/svelte-query';
 
 	import { ArrowDownOutline, ArrowUpOutline } from 'flowbite-svelte-icons';
 	import type { Vault } from '@rainlanguage/orderbook/js_api';
@@ -22,7 +22,9 @@
 	import type { AppStoresInterface } from '../../types/appStores';
 	import type { Config } from 'wagmi';
 	import DepositOrWithdrawButtons from './DepositOrWithdrawButtons.svelte';
+	import Refresh from '../icon/Refresh.svelte';
 	import type { DepositOrWithdrawModalProps } from '../../types/modal';
+	import { invalidateIdQuery } from '$lib/queries/queryClient';
 
 	export let handleDepositOrWithdrawModal:
 		| ((args: DepositOrWithdrawModalProps) => void)
@@ -47,6 +49,7 @@
 	const subgraphUrl = $settings?.subgraphs?.[network] || '';
 	const chainId = $settings?.networks?.[network]?.['chain-id'] || 0;
 	const rpcUrl = $settings?.networks?.[network]?.['rpc'] || '';
+	const queryClient = useQueryClient();
 
 	$: vaultDetailQuery = createQuery({
 		queryKey: [id, QKEY_VAULT + id],
@@ -84,7 +87,7 @@
 		>
 			{data.token.name}
 		</div>
-		<div>
+		<div class="flex items-center gap-2">
 			{#if $wagmiConfig && handleDepositOrWithdrawModal && $signerAddress === data.owner}
 				<DepositOrWithdrawButtons
 					vault={data}
@@ -108,6 +111,11 @@
 					><ArrowUpOutline size="xs" class="mr-2" />Withdraw</Button
 				>
 			{/if}
+
+			<Refresh
+				on:click={async () => await invalidateIdQuery(queryClient, id)}
+				spin={$vaultDetailQuery.isLoading || $vaultDetailQuery.isFetching}
+			/>
 		</div>
 	</svelte:fragment>
 	<svelte:fragment slot="card" let:data>
diff --git a/packages/ui-components/src/lib/components/icon/Refresh.svelte b/packages/ui-components/src/lib/components/icon/Refresh.svelte
index c07425d76..d1bc27dab 100644
--- a/packages/ui-components/src/lib/components/icon/Refresh.svelte
+++ b/packages/ui-components/src/lib/components/icon/Refresh.svelte
@@ -19,10 +19,16 @@
 </script>
 
 <svg
+	data-testid="refresh-button"
 	xmlns="http://www.w3.org/2000/svg"
 	fill="none"
 	{...$$restProps}
-	class={twMerge('shrink-0', sizes[size], $$props.class, spin ? 'animate-spin' : '')}
+	class={twMerge(
+		'shrink-0 cursor-pointer outline-none',
+		sizes[size],
+		$$props.class,
+		spin ? 'animate-spin ease-out' : ''
+	)}
 	{role}
 	aria-label={ariaLabel}
 	viewBox="0 0 24 24"
diff --git a/packages/ui-components/src/lib/components/tables/OrderAPY.svelte b/packages/ui-components/src/lib/components/tables/OrderAPY.svelte
index 0e7ad287f..218e34ee3 100644
--- a/packages/ui-components/src/lib/components/tables/OrderAPY.svelte
+++ b/packages/ui-components/src/lib/components/tables/OrderAPY.svelte
@@ -34,7 +34,12 @@
 	});
 </script>
 
-<TanstackAppTable query={orderPerformance} emptyMessage="APY Unavailable" rowHoverable={false}>
+<TanstackAppTable
+	query={orderPerformance}
+	emptyMessage="APY Unavailable"
+	rowHoverable={false}
+	queryKey={id}
+>
 	<svelte:fragment slot="timeFilter">
 		<ApyTimeFilters bind:startTimestamp bind:endTimestamp />
 	</svelte:fragment>
diff --git a/packages/ui-components/src/lib/components/tables/OrderTradesListTable.svelte b/packages/ui-components/src/lib/components/tables/OrderTradesListTable.svelte
index 04d58d0a4..302f73aac 100644
--- a/packages/ui-components/src/lib/components/tables/OrderTradesListTable.svelte
+++ b/packages/ui-components/src/lib/components/tables/OrderTradesListTable.svelte
@@ -57,7 +57,12 @@
 	});
 </script>
 
-<TanstackAppTable query={orderTradesQuery} emptyMessage="No trades found" rowHoverable={false}>
+<TanstackAppTable
+	query={orderTradesQuery}
+	emptyMessage="No trades found"
+	rowHoverable={false}
+	queryKey={id}
+>
 	<svelte:fragment slot="info">
 		{#if tradesCount !== undefined}
 			<div class="px-2">{tradesCount} Trades</div>
diff --git a/packages/ui-components/src/lib/components/tables/OrderVaultsVolTable.svelte b/packages/ui-components/src/lib/components/tables/OrderVaultsVolTable.svelte
index e94ec9817..f73ea0350 100644
--- a/packages/ui-components/src/lib/components/tables/OrderVaultsVolTable.svelte
+++ b/packages/ui-components/src/lib/components/tables/OrderVaultsVolTable.svelte
@@ -27,7 +27,12 @@
 	});
 </script>
 
-<TanstackAppTable query={vaultsVol} emptyMessage="No trades found" rowHoverable={false}>
+<TanstackAppTable
+	query={vaultsVol}
+	emptyMessage="No trades found"
+	rowHoverable={false}
+	queryKey={id}
+>
 	<svelte:fragment slot="timeFilter">
 		<TableTimeFilters bind:startTimestamp bind:endTimestamp />
 	</svelte:fragment>
diff --git a/packages/ui-components/src/lib/components/tables/OrdersListTable.svelte b/packages/ui-components/src/lib/components/tables/OrdersListTable.svelte
index 4f81f0916..6b532d52f 100644
--- a/packages/ui-components/src/lib/components/tables/OrdersListTable.svelte
+++ b/packages/ui-components/src/lib/components/tables/OrdersListTable.svelte
@@ -105,6 +105,7 @@
 
 <AppTable
 	{query}
+	queryKey={undefined}
 	emptyMessage="No Orders Found"
 	on:clickRow={(e) => {
 		activeNetworkRef.set(e.detail.item.subgraphName);
diff --git a/packages/ui-components/src/lib/components/tables/VaultBalanceChangesTable.svelte b/packages/ui-components/src/lib/components/tables/VaultBalanceChangesTable.svelte
index ecf61eb4f..dbb7ed687 100644
--- a/packages/ui-components/src/lib/components/tables/VaultBalanceChangesTable.svelte
+++ b/packages/ui-components/src/lib/components/tables/VaultBalanceChangesTable.svelte
@@ -38,6 +38,7 @@
 
 <AppTable
 	query={balanceChangesQuery}
+	queryKey={undefined}
 	emptyMessage="No deposits or withdrawals found"
 	rowHoverable={false}
 >
diff --git a/packages/ui-components/src/lib/components/tables/VaultsListTable.svelte b/packages/ui-components/src/lib/components/tables/VaultsListTable.svelte
index 59892b75a..5a1586669 100644
--- a/packages/ui-components/src/lib/components/tables/VaultsListTable.svelte
+++ b/packages/ui-components/src/lib/components/tables/VaultsListTable.svelte
@@ -113,6 +113,7 @@
 	/>
 	<AppTable
 		{query}
+		queryKey={undefined}
 		emptyMessage="No Vaults Found"
 		on:clickRow={(e) => {
 			updateActiveNetworkAndOrderbook(e.detail.item.subgraphName);
diff --git a/packages/ui-components/src/lib/queries/queryClient.ts b/packages/ui-components/src/lib/queries/queryClient.ts
index 60268f25e..bec18dd28 100644
--- a/packages/ui-components/src/lib/queries/queryClient.ts
+++ b/packages/ui-components/src/lib/queries/queryClient.ts
@@ -8,3 +8,11 @@ export const queryClient = new QueryClient({
 		}
 	}
 });
+
+export const invalidateIdQuery = async (queryClient: QueryClient, id: string) => {
+	await queryClient.invalidateQueries({
+		queryKey: [id],
+		refetchType: 'all',
+		exact: false
+	});
+};
diff --git a/packages/ui-components/src/lib/stores/queryClient.ts b/packages/ui-components/src/lib/stores/queryClient.ts
deleted file mode 100644
index 60268f25e..000000000
--- a/packages/ui-components/src/lib/stores/queryClient.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { browser } from '$app/environment';
-import { QueryClient } from '@tanstack/svelte-query';
-
-export const queryClient = new QueryClient({
-	defaultOptions: {
-		queries: {
-			enabled: browser
-		}
-	}
-});
diff --git a/packages/webapp/src/routes/orders/[network]-[id]/+page.svelte b/packages/webapp/src/routes/orders/[network]-[id]/+page.svelte
index 5bc355f4f..4ef0325d7 100644
--- a/packages/webapp/src/routes/orders/[network]-[id]/+page.svelte
+++ b/packages/webapp/src/routes/orders/[network]-[id]/+page.svelte
@@ -38,7 +38,9 @@
 
 	$: if ($transactionStore.status === TransactionStatus.SUCCESS) {
 		queryClient.invalidateQueries({
-			queryKey: [$page.params.id]
+			queryKey: [$page.params.id],
+			refetchType: 'all',
+			exact: false
 		});
 		triggerToast();
 	}
diff --git a/packages/webapp/src/routes/vaults/[network]-[id]/+page.svelte b/packages/webapp/src/routes/vaults/[network]-[id]/+page.svelte
index 39b7adecc..fa27487f0 100644
--- a/packages/webapp/src/routes/vaults/[network]-[id]/+page.svelte
+++ b/packages/webapp/src/routes/vaults/[network]-[id]/+page.svelte
@@ -29,7 +29,9 @@
 
 	$: if ($transactionStore.status === TransactionStatus.SUCCESS) {
 		queryClient.invalidateQueries({
-			queryKey: [$page.params.id]
+			queryKey: [$page.params.id],
+			refetchType: 'all',
+			exact: false
 		});
 		triggerToast();
 	}