diff --git a/packages/ui-components/src/__tests__/BadgeActive.test.ts b/packages/ui-components/src/__tests__/BadgeActive.test.ts
new file mode 100644
index 000000000..2ced71d9b
--- /dev/null
+++ b/packages/ui-components/src/__tests__/BadgeActive.test.ts
@@ -0,0 +1,27 @@
+import { render, screen } from '@testing-library/svelte';
+import BadgeActive from '../lib/components/BadgeActive.svelte';
+import { describe, it, expect } from 'vitest';
+
+describe('BadgeActive', () => {
+	it('shows "Active" text when active is true', () => {
+		render(BadgeActive, { props: { active: true } });
+		expect(screen.getByText('Active')).toBeInTheDocument();
+	});
+
+	it('shows "Inactive" text when active is false', () => {
+		render(BadgeActive, { props: { active: false } });
+		expect(screen.getByText('Inactive')).toBeInTheDocument();
+	});
+
+	it('uses green color for active state', () => {
+		render(BadgeActive, { props: { active: true } });
+		const badge = screen.getByText('Active');
+		expect(badge.className).toContain('bg-green');
+	});
+
+	it('uses yellow color for inactive state', () => {
+		render(BadgeActive, { props: { active: false } });
+		const badge = screen.getByText('Inactive');
+		expect(badge.className).toContain('bg-yellow');
+	});
+});
diff --git a/packages/ui-components/src/__tests__/ButtonVaultLink.test.ts b/packages/ui-components/src/__tests__/ButtonVaultLink.test.ts
new file mode 100644
index 000000000..3078e7668
--- /dev/null
+++ b/packages/ui-components/src/__tests__/ButtonVaultLink.test.ts
@@ -0,0 +1,37 @@
+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 type { Vault } from '../lib/typeshare/subgraphTypes';
+
+// Mock the $app/navigation module
+vi.mock('$app/navigation', () => ({
+	goto: vi.fn()
+}));
+
+describe('ButtonVaultLink', () => {
+	const mockVault = {
+		id: '123',
+		vaultId: '1000',
+		balance: '1000000000000000000',
+		token: {
+			name: 'Test Token',
+			symbol: 'TEST',
+			decimals: '18'
+		}
+	};
+
+	it('should navigate to vault details page when clicked', async () => {
+		render(ButtonVaultLink, {
+			props: {
+				tokenVault: mockVault as unknown as Vault
+			}
+		});
+
+		const vaultLink = screen.getByTestId('vault-link');
+		expect(vaultLink).toBeTruthy();
+		await userEvent.click(vaultLink);
+		expect(navigation.goto).toHaveBeenCalledWith(`/vaults/${mockVault.id}`);
+	});
+});
diff --git a/packages/ui-components/src/lib/components/BadgeActive.svelte b/packages/ui-components/src/lib/components/BadgeActive.svelte
new file mode 100644
index 000000000..d8cd2c148
--- /dev/null
+++ b/packages/ui-components/src/lib/components/BadgeActive.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+	import { Badge } from 'flowbite-svelte';
+	export let active: boolean;
+</script>
+
+{#if active}
+	<Badge color="green" {...$$props}>Active</Badge>
+{:else}
+	<Badge color="yellow" {...$$props}>Inactive</Badge>
+{/if}
diff --git a/packages/ui-components/src/lib/components/ButtonVaultLink.svelte b/packages/ui-components/src/lib/components/ButtonVaultLink.svelte
new file mode 100644
index 000000000..81293ed34
--- /dev/null
+++ b/packages/ui-components/src/lib/components/ButtonVaultLink.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import type { Vault } from '../typeshare/subgraphTypes';
+	import { bigintStringToHex } from '../utils/hex';
+	import { Tooltip } from 'flowbite-svelte';
+	import { formatUnits } from 'viem';
+
+	export let tokenVault: Vault;
+</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/${tokenVault.id}`)}
+>
+	<div class="flex flex-col space-y-2">
+		<div class="flex items-center justify-between">
+			<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>
+			<span class="text-sm text-gray-500 dark:text-gray-400">
+				{formatUnits(BigInt(tokenVault.balance), parseInt(tokenVault.token.decimals || '18'))}
+			</span>
+		</div>
+	</div>
+</div>
diff --git a/packages/ui-components/src/lib/index.ts b/packages/ui-components/src/lib/index.ts
index 7cdc37870..9ae4584b1 100644
--- a/packages/ui-components/src/lib/index.ts
+++ b/packages/ui-components/src/lib/index.ts
@@ -16,6 +16,8 @@ export { default as ListViewOrderbookFilters } from './components/ListViewOrderb
 export { default as OrdersListTable } from './components/tables/OrdersListTable.svelte';
 export { default as VaultsListTable } from './components/tables/VaultsListTable.svelte';
 export { default as PageHeader } from './components/PageHeader.svelte';
+export { default as BadgeActive } from './components/BadgeActive.svelte';
+export { default as ButtonVaultLink } from './components/ButtonVaultLink.svelte';
 export { default as Checkbox } from './components/checkbox/Checkbox.svelte';
 
 //Types
diff --git a/tauri-app/src/lib/components/BadgeActive.svelte b/tauri-app/src/lib/components/BadgeActive.svelte
deleted file mode 100644
index ac032729b..000000000
--- a/tauri-app/src/lib/components/BadgeActive.svelte
+++ /dev/null
@@ -1,10 +0,0 @@
-<script lang="ts">
-  import { Badge } from 'flowbite-svelte';
-  export let active: boolean;
-</script>
-
-{#if active}
-  <Badge color="green" {...$$props}>Active</Badge>
-{:else}
-  <Badge color="yellow" {...$$props}>Inactive</Badge>
-{/if}
diff --git a/tauri-app/src/lib/components/ButtonVaultLink.svelte b/tauri-app/src/lib/components/ButtonVaultLink.svelte
deleted file mode 100644
index 2249f538c..000000000
--- a/tauri-app/src/lib/components/ButtonVaultLink.svelte
+++ /dev/null
@@ -1,31 +0,0 @@
-<script lang="ts">
-  import { goto } from '$app/navigation';
-  import type { Vault } from '$lib/typeshare/subgraphTypes';
-  import { bigintStringToHex } from '@rainlanguage/ui-components';
-  import { Tooltip } from 'flowbite-svelte';
-  import { formatUnits } from 'viem';
-
-  export let tokenVault: Vault;
-</script>
-
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<div
-  class="cursor-pointer rounded-lg"
-  id="token-info"
-  on:click={() => goto(`/vaults/${tokenVault.id}`)}
->
-  <div class="flex flex-col space-y-2">
-    <div class="flex items-center justify-between">
-      <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>
-      <span class="text-sm text-gray-500 dark:text-gray-400">
-        {formatUnits(BigInt(tokenVault.balance), parseInt(tokenVault.token.decimals || '18'))}
-      </span>
-    </div>
-  </div>
-</div>
diff --git a/tauri-app/src/lib/components/detail/OrderDetail.svelte b/tauri-app/src/lib/components/detail/OrderDetail.svelte
index 9b360251e..b80701e7a 100644
--- a/tauri-app/src/lib/components/detail/OrderDetail.svelte
+++ b/tauri-app/src/lib/components/detail/OrderDetail.svelte
@@ -2,9 +2,9 @@
   import CardProperty from './../../../lib/components/CardProperty.svelte';
   import { Button, TabItem, Tabs } from 'flowbite-svelte';
   import { walletAddressMatchesOrBlank } from '$lib/stores/wallets';
-  import BadgeActive from '$lib/components/BadgeActive.svelte';
+  import { BadgeActive } from '@rainlanguage/ui-components';
   import { formatTimestampSecondsAsLocal } from '@rainlanguage/ui-components';
-  import ButtonVaultLink from '$lib/components/ButtonVaultLink.svelte';
+  import { ButtonVaultLink } from '@rainlanguage/ui-components';
   import { Hash, HashType } from '@rainlanguage/ui-components';
 
   import CodeMirrorRainlang from '$lib/components/CodeMirrorRainlang.svelte';