diff --git a/packages/ui-components/src/__tests__/OrderOrVaultHash.test.ts b/packages/ui-components/src/__tests__/OrderOrVaultHash.test.ts
new file mode 100644
index 000000000..9e81894ba
--- /dev/null
+++ b/packages/ui-components/src/__tests__/OrderOrVaultHash.test.ts
@@ -0,0 +1,71 @@
+import { render, fireEvent } from '@testing-library/svelte';
+import { describe, it, expect, vi } from 'vitest';
+import OrderOrVaultHash from '../lib/components/OrderOrVaultHash.svelte';
+import { goto } from '$app/navigation';
+
+vi.mock('$app/navigation', () => ({
+	goto: vi.fn()
+}));
+
+describe('OrderOrVaultHash', () => {
+	const mockOrder = {
+		id: '123',
+		orderHash: '0x123abc',
+		active: true
+	};
+
+	const mockInactiveOrder = {
+		...mockOrder,
+		active: false
+	};
+
+	const mockSubgraphName = 'test-subgraph';
+	const mockUpdateFn = vi.fn();
+
+	it('renders with active order', () => {
+		const { getByTestId } = render(OrderOrVaultHash, {
+			props: {
+				type: 'orders',
+				orderOrVault: mockOrder,
+				network: mockSubgraphName,
+				updateActiveNetworkAndOrderbook: mockUpdateFn
+			}
+		});
+
+		const button = getByTestId('vault-order-input');
+		expect(button).toBeTruthy();
+		expect(button.classList.toString()).toContain('text-white bg-green');
+		expect(button.getAttribute('data-id')).toBe('123');
+	});
+
+	it('renders with inactive order', () => {
+		const { getByTestId } = render(OrderOrVaultHash, {
+			props: {
+				type: 'orders',
+				orderOrVault: mockInactiveOrder,
+				network: mockSubgraphName,
+				updateActiveNetworkAndOrderbook: mockUpdateFn
+			}
+		});
+
+		const button = getByTestId('vault-order-input');
+		expect(button.classList.toString()).toContain('text-white bg-yellow');
+	});
+
+	it('handles click event correctly', async () => {
+		const { getByTestId } = render(OrderOrVaultHash, {
+			props: {
+				type: 'orders',
+				orderOrVault: mockOrder,
+				network: mockSubgraphName,
+				updateActiveNetworkAndOrderbook: mockUpdateFn
+			}
+		});
+
+		const button = getByTestId('vault-order-input');
+		await fireEvent.click(button);
+
+		expect(mockUpdateFn).toHaveBeenCalledWith(mockSubgraphName);
+		expect(goto).toHaveBeenCalledWith(`/orders/${mockSubgraphName}-${mockOrder.id}`);
+	});
+});
diff --git a/packages/ui-components/src/__tests__/VaultDetail.test.ts b/packages/ui-components/src/__tests__/VaultDetail.test.ts
index 1dd3538d0..21b8c2393 100644
--- a/packages/ui-components/src/__tests__/VaultDetail.test.ts
+++ b/packages/ui-components/src/__tests__/VaultDetail.test.ts
@@ -34,12 +34,12 @@ test('calls the vault detail query fn with the correct vault id', async () => {
 
 	render(VaultDetail, {
 		props: {
+			activeNetworkRef: writable('mainnet'),
+			activeOrderbookRef: writable('0x00'),
 			id: '100',
 			network: 'mainnet',
 			settings: mockSettings,
-			lightweightChartsTheme: readable(darkChartTheme),
-			activeNetworkRef: writable('mainnet'),
-			activeOrderbookRef: writable('0x00')
+			lightweightChartsTheme: readable(darkChartTheme)
 		},
 		context: new Map([['$$_queryClient', queryClient]])
 	});
@@ -57,10 +57,10 @@ test('shows the correct empty message when the query returns no data', async ()
 		props: {
 			id: '100',
 			network: 'mainnet',
-			settings: mockSettings,
-			lightweightChartsTheme: readable(darkChartTheme),
 			activeNetworkRef: writable('mainnet'),
-			activeOrderbookRef: writable('0x00')
+			activeOrderbookRef: writable('0x00'),
+			settings: mockSettings,
+			lightweightChartsTheme: readable(darkChartTheme)
 		},
 		context: new Map([['$$_queryClient', queryClient]])
 	});
@@ -100,10 +100,10 @@ test('shows the correct data when the query returns data', async () => {
 		props: {
 			id: '100',
 			network: 'mainnet',
-			settings: mockSettings,
-			lightweightChartsTheme: readable(darkChartTheme),
 			activeNetworkRef: writable('mainnet'),
-			activeOrderbookRef: writable('0x00')
+			activeOrderbookRef: writable('0x00'),
+			settings: mockSettings,
+			lightweightChartsTheme: readable(darkChartTheme)
 		},
 		context: new Map([['$$_queryClient', queryClient]])
 	});
diff --git a/packages/ui-components/src/lib/components/OrderOrVaultHash.svelte b/packages/ui-components/src/lib/components/OrderOrVaultHash.svelte
new file mode 100644
index 000000000..3c0a38d76
--- /dev/null
+++ b/packages/ui-components/src/lib/components/OrderOrVaultHash.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { Button } from 'flowbite-svelte';
+	import Hash, { HashType } from './Hash.svelte';
+	import { goto } from '$app/navigation';
+	import type { OrderAsIO, OrderSubgraph, Vault } from '@rainlanguage/orderbook/js_api';
+
+	type OrderOrVault = OrderSubgraph | OrderAsIO | Vault;
+
+	export let orderOrVault: OrderOrVault;
+	export let type: 'orders' | 'vaults';
+	export let network: string;
+	export let updateActiveNetworkAndOrderbook: (subgraphName: string) => void;
+
+	let hash;
+
+	$: isOrder = 'orderHash' in (orderOrVault || {});
+	$: slug = isOrder ? (orderOrVault as OrderSubgraph).id : (orderOrVault as Vault)?.id;
+	$: hash = isOrder ? (orderOrVault as OrderSubgraph).id : (orderOrVault as Vault)?.id || '';
+	$: isActive = isOrder ? (orderOrVault as OrderAsIO).active : false;
+</script>
+
+<Button
+	class="mr-1 mt-1 px-2 py-1 text-sm"
+	color={isActive ? 'green' : 'yellow'}
+	data-testid="vault-order-input"
+	data-id={slug}
+	on:click={() => {
+		updateActiveNetworkAndOrderbook(network);
+		goto(`/${type}/${network}-${slug}`);
+	}}><Hash type={HashType.Identifier} value={hash} copyOnClick={false} /></Button
+>
diff --git a/packages/ui-components/src/lib/components/detail/VaultDetail.svelte b/packages/ui-components/src/lib/components/detail/VaultDetail.svelte
index 8b321af98..9a7ae57dd 100644
--- a/packages/ui-components/src/lib/components/detail/VaultDetail.svelte
+++ b/packages/ui-components/src/lib/components/detail/VaultDetail.svelte
@@ -9,7 +9,6 @@
 	import { QKEY_VAULT } from '../../queries/keys';
 	import { getVault } from '@rainlanguage/orderbook/js_api';
 	import type { ChartTheme } from '../../utils/lightweightChartsThemes';
-	import { goto } from '$app/navigation';
 	import { formatUnits } from 'viem';
 	import { createQuery } from '@tanstack/svelte-query';
 
@@ -19,6 +18,7 @@
 
 	import { ArrowDownOutline, ArrowUpOutline } from 'flowbite-svelte-icons';
 	import type { Vault } from '@rainlanguage/orderbook/js_api';
+	import OrderOrVaultHash from '../OrderOrVaultHash.svelte';
 	import type { AppStoresInterface } from '../../types/appStores';
 
 	export let id: string;
@@ -33,6 +33,7 @@
 	export let activeNetworkRef: AppStoresInterface['activeNetworkRef'];
 	export let activeOrderbookRef: AppStoresInterface['activeOrderbookRef'];
 	export let settings;
+
 	const subgraphUrl = $settings?.subgraphs?.[network] || '';
 
 	$: vaultDetailQuery = createQuery({
@@ -63,10 +64,7 @@
 	});
 </script>
 
-tauri-app/src/lib/components/detail/VaultDetail.svelte<TanstackPageContentDetail
-	query={vaultDetailQuery}
-	emptyMessage="Vault not found"
->
+<TanstackPageContentDetail query={vaultDetailQuery} emptyMessage="Vault not found">
 	<svelte:fragment slot="top" let:data>
 		<div
 			data-testid="vaultDetailTokenName"
@@ -132,18 +130,12 @@ tauri-app/src/lib/components/detail/VaultDetail.svelte<TanstackPageContentDetail
 				<p data-testid="vaultDetailOrdersAsInput" class="flex flex-wrap justify-start">
 					{#if data.ordersAsInput && data.ordersAsInput.length > 0}
 						{#each data.ordersAsInput as order}
-							<Button
-								class={'mr-1 mt-1 px-1 py-0' + (!order.active ? ' opacity-50' : '')}
-								color={order.active ? 'green' : 'yellow'}
-								data-order={order.id}
-								data-testid={'vaultDetailOrderAsInputOrder' + order.id}
-								on:click={() => {
-									updateActiveNetworkAndOrderbook(order.subgraphName);
-									goto(`/orders/${order.id}`);
-								}}
-							>
-								<Hash type={HashType.Identifier} value={order.orderHash} copyOnClick={false} />
-							</Button>
+							<OrderOrVaultHash
+								type="orders"
+								orderOrVault={order}
+								{network}
+								{updateActiveNetworkAndOrderbook}
+							/>
 						{/each}
 					{:else}
 						None
@@ -158,18 +150,12 @@ tauri-app/src/lib/components/detail/VaultDetail.svelte<TanstackPageContentDetail
 				<p data-testid="vaulDetailOrdersAsOutput" class="flex flex-wrap justify-start">
 					{#if data.ordersAsOutput && data.ordersAsOutput.length > 0}
 						{#each data.ordersAsOutput as order}
-							<Button
-								class={'mr-1 mt-1 px-1 py-0' + (!order.active ? ' opacity-50' : '')}
-								color={order.active ? 'green' : 'yellow'}
-								data-order={order.id}
-								data-testid={'vaultDetailOrderAsOutputOrder' + order.id}
-								on:click={() => {
-									updateActiveNetworkAndOrderbook(order.subgraphName);
-									goto(`/orders/${order.id}`);
-								}}
-							>
-								<Hash type={HashType.Identifier} value={order.orderHash} copyOnClick={false} />
-							</Button>
+							<OrderOrVaultHash
+								type="orders"
+								orderOrVault={order}
+								{network}
+								{updateActiveNetworkAndOrderbook}
+							/>
 						{/each}
 					{:else}
 						None
diff --git a/packages/ui-components/src/lib/components/tables/VaultsListTable.svelte b/packages/ui-components/src/lib/components/tables/VaultsListTable.svelte
index 8df4726f2..b70e0ce29 100644
--- a/packages/ui-components/src/lib/components/tables/VaultsListTable.svelte
+++ b/packages/ui-components/src/lib/components/tables/VaultsListTable.svelte
@@ -5,6 +5,7 @@
 	import { createInfiniteQuery } from '@tanstack/svelte-query';
 	import TanstackAppTable from '../TanstackAppTable.svelte';
 	import ListViewOrderbookFilters from '../ListViewOrderbookFilters.svelte';
+	import OrderOrVaultHash from '../OrderOrVaultHash.svelte';
 	import Hash, { HashType } from '../Hash.svelte';
 	import { DEFAULT_PAGE_SIZE, DEFAULT_REFRESH_INTERVAL } from '../../queries/constants';
 	import { vaultBalanceDisplay } from '../../utils/vault';
@@ -165,18 +166,12 @@
 				{#if item.vault.ordersAsInput.length > 0}
 					<div data-testid="vault-order-inputs" class="flex flex-wrap items-end justify-start">
 						{#each item.vault.ordersAsInput.slice(0, 3) as order}
-							<Button
-								class="mr-1 mt-1 px-1 py-0"
-								color={order.active ? 'green' : 'yellow'}
-								data-testid="vault-order-input"
-								data-order-id={order.id}
-								on:click={() => {
-									updateActiveNetworkAndOrderbook(item.subgraphName);
-									goto(`/orders/${order.id}`);
-								}}
-							>
-								<Hash type={HashType.Identifier} value={order.orderHash} copyOnClick={false} />
-							</Button>
+							<OrderOrVaultHash
+								type="orders"
+								orderOrVault={order}
+								network={item.subgraphName}
+								{updateActiveNetworkAndOrderbook}
+							/>
 						{/each}
 						{#if item.vault.ordersAsInput.length > 3}...{/if}
 					</div>
@@ -186,18 +181,12 @@
 				{#if item.vault.ordersAsOutput.length > 0}
 					<div data-testid="vault-order-outputs" class="flex flex-wrap items-end justify-start">
 						{#each item.vault.ordersAsOutput.slice(0, 3) as order}
-							<Button
-								class="mr-1 mt-1 px-1 py-0"
-								color={order.active ? 'green' : 'yellow'}
-								data-order-id={order.id}
-								data-testid="vault-order-output"
-								on:click={() => {
-									updateActiveNetworkAndOrderbook(item.subgraphName);
-									goto(`/orders/${order.id}`);
-								}}
-							>
-								<Hash type={HashType.Identifier} value={order.orderHash} copyOnClick={false} />
-							</Button>
+							<OrderOrVaultHash
+								type="orders"
+								orderOrVault={order}
+								network={item.subgraphName}
+								{updateActiveNetworkAndOrderbook}
+							/>
 						{/each}
 						{#if item.vault.ordersAsOutput.length > 3}...{/if}
 					</div>
diff --git a/packages/ui-components/src/lib/index.ts b/packages/ui-components/src/lib/index.ts
index d57913e5b..3d12c8eba 100644
--- a/packages/ui-components/src/lib/index.ts
+++ b/packages/ui-components/src/lib/index.ts
@@ -58,6 +58,7 @@ export { default as VaultBalanceChart } from './components/charts/VaultBalanceCh
 export { default as VaultDetail } from './components/detail/VaultDetail.svelte';
 export { default as InputToken } from './components/input/InputToken.svelte';
 export { default as CodeMirrorDotrain } from './components/CodeMirrorDotrain.svelte';
+export { default as OrderOrVaultHash } from './components/OrderOrVaultHash.svelte';
 export { default as License } from './components/License.svelte';
 export { default as ButtonDarkMode } from './components/ButtonDarkMode.svelte';
 export { default as InputHex } from './components/input/InputHex.svelte';
diff --git a/tauri-app/src/routes/vaults/[network]-[id]/+page.svelte b/tauri-app/src/routes/vaults/[network]-[id]/+page.svelte
index efbf8b951..e9e2fdaa6 100644
--- a/tauri-app/src/routes/vaults/[network]-[id]/+page.svelte
+++ b/tauri-app/src/routes/vaults/[network]-[id]/+page.svelte
@@ -3,9 +3,9 @@
   import { PageHeader } from '@rainlanguage/ui-components';
   import { page } from '$app/stores';
   import { VaultDetail } from '@rainlanguage/ui-components';
-  import { settings, activeNetworkRef, activeOrderbookRef } from '$lib/stores/settings';
   import { lightweightChartsTheme } from '$lib/stores/darkMode';
   import { handleDepositModal, handleWithdrawModal } from '$lib/services/modal';
+  import { settings, activeNetworkRef, activeOrderbookRef } from '$lib/stores/settings';
 </script>
 
 <PageHeader title="Vault" pathname={$page.url.pathname} />