diff --git a/packages/ui-components/src/__tests__/ButtonVaultLink.test.ts b/packages/ui-components/src/__tests__/OrderVaultInfo.test.ts
similarity index 50%
rename from packages/ui-components/src/__tests__/ButtonVaultLink.test.ts
rename to packages/ui-components/src/__tests__/OrderVaultInfo.test.ts
index db251ca94..76bfec5b1 100644
--- a/packages/ui-components/src/__tests__/ButtonVaultLink.test.ts
+++ b/packages/ui-components/src/__tests__/OrderVaultInfo.test.ts
@@ -1,15 +1,13 @@
 import { describe, it, expect, vi } from 'vitest';
 import { render, screen } from '@testing-library/svelte';
-import ButtonVaultLink from '../lib/components/ButtonVaultLink.svelte';
-import * as navigation from '$app/navigation';
-import { userEvent } from '@testing-library/user-event';
+import OrderVaultInfo from '../lib/components/OrderVaultInfo.svelte';
 import type { Vault } from '@rainlanguage/orderbook/js_api';
 // Mock the $app/navigation module
 vi.mock('$app/navigation', () => ({
 	goto: vi.fn()
 }));
 
-describe('ButtonVaultLink', () => {
+describe('OrderVaultInfo', () => {
 	const mockVault = {
 		id: '123',
 		vaultId: '1000',
@@ -21,17 +19,15 @@ describe('ButtonVaultLink', () => {
 		}
 	} as unknown as Vault;
 
-	it('should navigate to vault details page when clicked', async () => {
-		render(ButtonVaultLink, {
+	it('should display vault name and address', () => {
+		render(OrderVaultInfo, {
 			props: {
 				tokenVault: mockVault,
 				subgraphName: 'test'
 			}
 		});
 
-		const vaultLink = screen.getByTestId('vault-link');
-		expect(vaultLink).toBeTruthy();
-		await userEvent.click(vaultLink);
-		expect(navigation.goto).toHaveBeenCalledWith(`/vaults/test-${mockVault.id}`);
+		expect(screen.getByText('Test Token (TEST)')).toBeInTheDocument();
+		expect(screen.getByText('1')).toBeInTheDocument();
 	});
 });
diff --git a/packages/ui-components/src/lib/components/ButtonVaultLink.svelte b/packages/ui-components/src/lib/components/ButtonVaultLink.svelte
deleted file mode 100644
index 8e1a532c7..000000000
--- a/packages/ui-components/src/lib/components/ButtonVaultLink.svelte
+++ /dev/null
@@ -1,38 +0,0 @@
-<script lang="ts">
-	import { goto } from '$app/navigation';
-	import type { Vault } from '@rainlanguage/orderbook/js_api';
-	import { bigintStringToHex } from '../utils/hex';
-	import { Tooltip } from 'flowbite-svelte';
-	import { formatUnits } from 'viem';
-
-	export let tokenVault: Vault;
-	export let subgraphName: string;
-</script>
-
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<div
-	class="cursor-pointer rounded-lg"
-	id="token-info"
-	data-testid="vault-link"
-	on:click={() => goto(`/vaults/${subgraphName}-${tokenVault.id}`)}
->
-	<div class="flex flex-col space-y-2">
-		<div class="flex flex-col items-start justify-between lg:flex-row lg:items-center">
-			<Tooltip triggeredBy="#token-info" class="w-96">
-				ID: <span class="font-mono">{bigintStringToHex(tokenVault.vaultId)}</span>
-			</Tooltip>
-			<span class="font-medium">
-				{tokenVault.token.name} ({tokenVault.token.symbol})
-			</span>
-			<div class="flex w-full justify-between md:w-auto">
-				<div class="mb-2 flex justify-end text-sm text-gray-500 md:hidden dark:text-gray-400">
-					<span>Balance</span>
-				</div>
-				<span class="text-sm text-gray-500 dark:text-gray-400">
-					{formatUnits(BigInt(tokenVault.balance), parseInt(tokenVault.token.decimals || '18'))}
-				</span>
-			</div>
-		</div>
-	</div>
-</div>
diff --git a/packages/ui-components/src/lib/components/OrderOrVaultHash.svelte b/packages/ui-components/src/lib/components/OrderOrVaultHash.svelte
index 3c0a38d76..b3f8861bc 100644
--- a/packages/ui-components/src/lib/components/OrderOrVaultHash.svelte
+++ b/packages/ui-components/src/lib/components/OrderOrVaultHash.svelte
@@ -9,7 +9,8 @@
 	export let orderOrVault: OrderOrVault;
 	export let type: 'orders' | 'vaults';
 	export let network: string;
-	export let updateActiveNetworkAndOrderbook: (subgraphName: string) => void;
+	export let updateActiveNetworkAndOrderbook: ((subgraphName: string) => void) | undefined =
+		undefined;
 
 	let hash;
 
@@ -20,12 +21,12 @@
 </script>
 
 <Button
-	class="mr-1 mt-1 px-2 py-1 text-sm"
+	class="mr-1 mt-1 w-fit px-2 py-1 text-sm"
 	color={isActive ? 'green' : 'yellow'}
 	data-testid="vault-order-input"
 	data-id={slug}
 	on:click={() => {
-		updateActiveNetworkAndOrderbook(network);
+		updateActiveNetworkAndOrderbook?.(network);
 		goto(`/${type}/${network}-${slug}`);
 	}}><Hash type={HashType.Identifier} value={hash} copyOnClick={false} /></Button
 >
diff --git a/packages/ui-components/src/lib/components/OrderVaultInfo.svelte b/packages/ui-components/src/lib/components/OrderVaultInfo.svelte
new file mode 100644
index 000000000..b453e44d0
--- /dev/null
+++ b/packages/ui-components/src/lib/components/OrderVaultInfo.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { Vault } from '@rainlanguage/orderbook/js_api';
+	import { formatUnits } from 'viem';
+	import OrderOrVaultHash from './OrderOrVaultHash.svelte';
+
+	export let tokenVault: Vault;
+	export let subgraphName: string;
+</script>
+
+<div class="flex w-full flex-row justify-between">
+	<div class="flex flex-col gap-2">
+		<span class="font-medium">
+			{tokenVault.token.name} ({tokenVault.token.symbol})
+		</span>
+		<OrderOrVaultHash orderOrVault={tokenVault} type="vaults" network={subgraphName} />
+	</div>
+	<div class="flex flex-col gap-2">
+		<span>Balance</span>
+		<span class="text-right text-sm text-gray-500 dark:text-gray-400">
+			{formatUnits(BigInt(tokenVault.balance), parseInt(tokenVault.token.decimals || '18'))}
+		</span>
+	</div>
+</div>
diff --git a/packages/ui-components/src/lib/components/detail/OrderDetail.svelte b/packages/ui-components/src/lib/components/detail/OrderDetail.svelte
index 21f550cb4..a5d160686 100644
--- a/packages/ui-components/src/lib/components/detail/OrderDetail.svelte
+++ b/packages/ui-components/src/lib/components/detail/OrderDetail.svelte
@@ -7,7 +7,6 @@
 	import TanstackPageContentDetail from './TanstackPageContentDetail.svelte';
 	import CardProperty from '../CardProperty.svelte';
 	import { formatTimestampSecondsAsLocal } from '../../utils/time';
-	import ButtonVaultLink from '../ButtonVaultLink.svelte';
 	import OrderVaultsVolTable from '../tables/OrderVaultsVolTable.svelte';
 	import { QKEY_ORDER } from '../../queries/keys';
 	import CodeMirrorRainlang from '../CodeMirrorRainlang.svelte';
@@ -21,6 +20,7 @@
 	import { page } from '$app/stores';
 	import DepositOrWithdrawButtons from './DepositOrWithdrawButtons.svelte';
 	import type { Config } from 'wagmi';
+	import OrderVaultInfo from '../OrderVaultInfo.svelte';
 
 	export let walletAddressMatchesOrBlank: Readable<(address: string) => boolean> | undefined =
 		undefined;
@@ -133,12 +133,9 @@
 			<CardProperty>
 				<svelte:fragment slot="key">Input vaults</svelte:fragment>
 				<svelte:fragment slot="value">
-					<div class="mb-2 hidden justify-end md:flex">
-						<span>Balance</span>
-					</div>
 					<div class="space-y-2">
 						{#each data.inputs || [] as vault}
-							<ButtonVaultLink tokenVault={vault} {subgraphName} />
+							<OrderVaultInfo tokenVault={vault} {subgraphName} />
 							{#if handleDepositOrWithdrawModal && $signerAddress === vault.owner && chainId}
 								<DepositOrWithdrawButtons
 									{vault}
@@ -156,12 +153,9 @@
 			<CardProperty>
 				<svelte:fragment slot="key">Output vaults</svelte:fragment>
 				<svelte:fragment slot="value">
-					<div class="mb-2 flex justify-end">
-						<span>Balance</span>
-					</div>
 					<div class="space-y-2">
 						{#each data.outputs || [] as vault}
-							<ButtonVaultLink tokenVault={vault} {subgraphName} />
+							<OrderVaultInfo tokenVault={vault} {subgraphName} />
 							{#if handleDepositOrWithdrawModal && $wagmiConfig && $signerAddress === vault.owner && chainId}
 								<DepositOrWithdrawButtons
 									{vault}
diff --git a/packages/ui-components/src/lib/index.ts b/packages/ui-components/src/lib/index.ts
index 87396d207..1ecccc21c 100644
--- a/packages/ui-components/src/lib/index.ts
+++ b/packages/ui-components/src/lib/index.ts
@@ -18,7 +18,7 @@ export { default as VaultsListTable } from './components/tables/VaultsListTable.
 export { default as PageHeader } from './components/PageHeader.svelte';
 export { default as CodeMirrorRainlang } from './components/CodeMirrorRainlang.svelte';
 export { default as BadgeActive } from './components/BadgeActive.svelte';
-export { default as ButtonVaultLink } from './components/ButtonVaultLink.svelte';
+export { default as OrderVaultInfo } from './components/OrderVaultInfo.svelte';
 export { default as ButtonTab } from './components/ButtonTab.svelte';
 export { default as ChartTimeFilters } from './components/charts/ChartTimeFilters.svelte';
 export { default as LightweightChart } from './components/charts/LightweightChart.svelte';