diff --git a/crates/js_api/src/subgraph/order.rs b/crates/js_api/src/subgraph/order.rs
index 1c23ffffb..edfb80060 100644
--- a/crates/js_api/src/subgraph/order.rs
+++ b/crates/js_api/src/subgraph/order.rs
@@ -1,12 +1,23 @@
+use std::collections::{HashMap, HashSet};
+
 use cynic::Id;
-use rain_orderbook_bindings::wasm_traits::prelude::*;
+use rain_orderbook_bindings::{impl_all_wasm_traits, wasm_traits::prelude::*};
 use rain_orderbook_common::types::OrderDetailExtended;
 use rain_orderbook_subgraph_client::{
-    types::common::{Order, OrdersListFilterArgs},
+    types::common::{Order, OrdersListFilterArgs, Vault},
     MultiOrderbookSubgraphClient, MultiSubgraphArgs, OrderbookSubgraphClient,
     OrderbookSubgraphClientError, PaginationArgs,
 };
 use reqwest::Url;
+use serde::{Deserialize, Serialize};
+
+#[derive(Serialize, Deserialize, Clone, Tsify)]
+pub struct OrderWithSortedVaults {
+    #[tsify(type = "OrderSubgraph")]
+    pub order: Order,
+    pub vaults: HashMap<String, Vec<Vault>>,
+}
+impl_all_wasm_traits!(OrderWithSortedVaults);
 
 /// Internal function to fetch a single order
 /// Returns the Order struct
@@ -29,12 +40,48 @@ pub async fn get_orders(
     Ok(to_value(&orders)?)
 }
 
+fn sort_vaults(order: &Order) -> HashMap<String, Vec<Vault>> {
+    let mut sorted_vaults: HashMap<String, Vec<Vault>> = HashMap::new();
+
+    let input_ids: HashSet<_> = order.inputs.iter().map(|v| &v.id).collect();
+    let output_ids: HashSet<_> = order.outputs.iter().map(|v| &v.id).collect();
+
+    sorted_vaults.insert("inputs".to_string(), Vec::new());
+    sorted_vaults.insert("outputs".to_string(), Vec::new());
+    sorted_vaults.insert("inputs_outputs".to_string(), Vec::new());
+
+    for vault in &order.inputs {
+        if output_ids.contains(&vault.id) {
+            sorted_vaults
+                .get_mut("inputs_outputs")
+                .unwrap()
+                .push(vault.clone());
+        } else {
+            sorted_vaults.get_mut("inputs").unwrap().push(vault.clone());
+        }
+    }
+
+    for vault in &order.outputs {
+        if !input_ids.contains(&vault.id) {
+            sorted_vaults
+                .get_mut("outputs")
+                .unwrap()
+                .push(vault.clone());
+        }
+    }
+
+    sorted_vaults
+}
+
 /// Fetch a single order
-/// Returns the Order struct
+/// Returns the Order struct with sorted vaults
 #[wasm_bindgen(js_name = "getOrder")]
 pub async fn get_order(url: &str, id: &str) -> Result<JsValue, OrderbookSubgraphClientError> {
     let order = get_sg_order(url, id).await?;
-    Ok(to_value(&order)?)
+    Ok(to_value(&OrderWithSortedVaults {
+        order: order.clone(),
+        vaults: sort_vaults(&order),
+    })?)
 }
 
 /// Extend an order to include Rainlang string
diff --git a/packages/orderbook/test/js_api/order.test.ts b/packages/orderbook/test/js_api/order.test.ts
index 037efe826..dda2643c0 100644
--- a/packages/orderbook/test/js_api/order.test.ts
+++ b/packages/orderbook/test/js_api/order.test.ts
@@ -1,7 +1,13 @@
 import assert from 'assert';
 import { getLocal } from 'mockttp';
 import { describe, it, beforeEach, afterEach } from 'vitest';
-import { Order, OrderPerformance, OrderWithSubgraphName, Trade } from '../../dist/types/js_api.js';
+import {
+	OrderPerformance,
+	OrderSubgraph,
+	OrderWithSortedVaults,
+	OrderWithSubgraphName,
+	Trade
+} from '../../dist/types/js_api.js';
 import {
 	getOrders,
 	getOrder,
@@ -19,7 +25,7 @@ const order1 = {
 	owner: '0x0000000000000000000000000000000000000000',
 	outputs: [
 		{
-			id: '0x0000000000000000000000000000000000000000',
+			id: '0x0000000000000000000000000000000000000001',
 			token: {
 				id: '0x0000000000000000000000000000000000000000',
 				address: '0x0000000000000000000000000000000000000000',
@@ -28,7 +34,7 @@ const order1 = {
 				decimals: '0'
 			},
 			balance: '0',
-			vaultId: '0',
+			vaultId: '0x1',
 			owner: '0x0000000000000000000000000000000000000000',
 			ordersAsOutput: [],
 			ordersAsInput: [],
@@ -40,7 +46,7 @@ const order1 = {
 	],
 	inputs: [
 		{
-			id: '0x0000000000000000000000000000000000000000',
+			id: '0x0000000000000000000000000000000000000002',
 			token: {
 				id: '0x0000000000000000000000000000000000000000',
 				address: '0x0000000000000000000000000000000000000000',
@@ -49,7 +55,7 @@ const order1 = {
 				decimals: '0'
 			},
 			balance: '0',
-			vaultId: '0',
+			vaultId: '0x2',
 			owner: '0x0000000000000000000000000000000000000000',
 			ordersAsOutput: [],
 			ordersAsInput: [],
@@ -77,7 +83,7 @@ const order1 = {
 	},
 	trades: []
 };
-const order2: Order = {
+const order2 = {
 	id: 'order2',
 	orderBytes:
 		'0x0000000000000000000000000000000000000000000000000000000000000020000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000a0000000000000000000000000000000000000000000000000000000000000012000000000000000000000000000000000000000000000000000000000000001a00000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000060000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000010000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000001000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000',
@@ -142,7 +148,7 @@ const order2: Order = {
 		id: '0x0000000000000000000000000000000000000000'
 	},
 	trades: []
-} as unknown as Order;
+} as unknown as OrderSubgraph;
 
 export const order3 = {
 	id: 'order1',
@@ -372,8 +378,8 @@ describe('Rain Orderbook JS API Package Bindgen Tests - Order', async function (
 		await mockServer.forPost('/sg1').thenReply(200, JSON.stringify({ data: { order: order1 } }));
 
 		try {
-			const result: Order = await getOrder(mockServer.url + '/sg1', order1.id);
-			assert.equal(result.id, order1.id);
+			const result: OrderWithSortedVaults = await getOrder(mockServer.url + '/sg1', order1.id);
+			assert.equal(result.order.id, order1.id);
 		} catch (e) {
 			console.log(e);
 			assert.fail('expected to resolve, but failed' + (e instanceof Error ? e.message : String(e)));
@@ -617,4 +623,114 @@ describe('Rain Orderbook JS API Package Bindgen Tests - Order', async function (
 		mockServer.stop();
 		assert.deepEqual(result, expected);
 	});
+
+	it('should return vaults sorted by inputs, outputs and inputs and outputs', async () => {
+		const inputs = [
+			{
+				id: '0x0000000000000000000000000000000000000001',
+				token: {
+					id: '0x0000000000000000000000000000000000000000',
+					address: '0x0000000000000000000000000000000000000000',
+					name: 'T2',
+					symbol: 'T2',
+					decimals: '0'
+				},
+				balance: '0',
+				vaultId: '0x1',
+				owner: '0x0000000000000000000000000000000000000000',
+				ordersAsOutput: [],
+				ordersAsInput: [],
+				balanceChanges: [],
+				orderbook: {
+					id: '0x0000000000000000000000000000000000000000'
+				}
+			},
+			{
+				id: '0x0000000000000000000000000000000000000003',
+				token: {
+					id: '0x0000000000000000000000000000000000000000',
+					address: '0x0000000000000000000000000000000000000000',
+					name: 'T3',
+					symbol: 'T3',
+					decimals: '0'
+				},
+				balance: '0',
+				vaultId: '0x3',
+				owner: '0x0000000000000000000000000000000000000000',
+				ordersAsOutput: [],
+				ordersAsInput: [],
+				balanceChanges: [],
+				orderbook: {
+					id: '0x0000000000000000000000000000000000000000'
+				}
+			}
+		];
+		const outputs = [
+			{
+				id: '0x0000000000000000000000000000000000000002',
+				token: {
+					id: '0x0000000000000000000000000000000000000000',
+					address: '0x0000000000000000000000000000000000000000',
+					name: 'T2',
+					symbol: 'T2',
+					decimals: '0'
+				},
+				balance: '0',
+				vaultId: '0x2',
+				owner: '0x0000000000000000000000000000000000000000',
+				ordersAsOutput: [],
+				ordersAsInput: [],
+				balanceChanges: [],
+				orderbook: {
+					id: '0x0000000000000000000000000000000000000000'
+				}
+			},
+			{
+				id: '0x0000000000000000000000000000000000000003',
+				token: {
+					id: '0x0000000000000000000000000000000000000000',
+					address: '0x0000000000000000000000000000000000000000',
+					name: 'T3',
+					symbol: 'T3',
+					decimals: '0'
+				},
+				balance: '0',
+				vaultId: '0x3',
+				owner: '0x0000000000000000000000000000000000000000',
+				ordersAsOutput: [],
+				ordersAsInput: [],
+				balanceChanges: [],
+				orderbook: {
+					id: '0x0000000000000000000000000000000000000000'
+				}
+			}
+		];
+		await mockServer
+			.forPost('/sg1')
+			.once()
+			.thenReply(200, JSON.stringify({ data: { order: { ...order1, inputs, outputs } } }));
+
+		try {
+			const result: OrderWithSortedVaults = await getOrder(mockServer.url + '/sg1', order1.id);
+
+			const inputs = result.vaults.get('inputs');
+			const outputs = result.vaults.get('outputs');
+			const inputsOutputs = result.vaults.get('inputs_outputs');
+
+			if (!inputs || !outputs || !inputsOutputs) {
+				assert.fail('inputs, outputs or inputsOutputs should not be null');
+			}
+
+			assert.equal(inputs.length, 1);
+			assert.equal(outputs.length, 1);
+			assert.equal(inputsOutputs.length, 1);
+
+			assert.equal(inputs[0].id, '0x0000000000000000000000000000000000000001');
+			assert.equal(outputs[0].id, '0x0000000000000000000000000000000000000002');
+			assert.equal(inputsOutputs[0].id, '0x0000000000000000000000000000000000000003');
+		} catch (e) {
+			console.log(e);
+			assert.fail('expected to resolve, but failed' + (e instanceof Error ? e.message : String(e)));
+		}
+	});
 });
diff --git a/packages/ui-components/src/__tests__/OrderDetail.test.svelte b/packages/ui-components/src/__tests__/OrderDetail.test.svelte
index 2cace9b7b..284198db7 100644
--- a/packages/ui-components/src/__tests__/OrderDetail.test.svelte
+++ b/packages/ui-components/src/__tests__/OrderDetail.test.svelte
@@ -1,11 +1,14 @@
 <script lang="ts">
 	import TanstackPageContentDetail from '../lib/components/detail/TanstackPageContentDetail.svelte';
+	import CardProperty from '../lib/components/CardProperty.svelte';
+	import ButtonVaultLink from '../lib/components/ButtonVaultLink.svelte';
 	import { createQuery } from '@tanstack/svelte-query';
-	import type { OrderSubgraph } from '@rainlanguage/orderbook/js_api';
+	import type { OrderSubgraph, OrderWithSortedVaults } from '@rainlanguage/orderbook/js_api';
 	import { getOrder } from '@rainlanguage/orderbook/js_api';
 	import { QKEY_ORDER } from '../lib/queries/keys';
 	import type { Readable } from 'svelte/store';
 	import { Button } from 'flowbite-svelte';
+	import DepositOrWithdrawButtons from '../lib/components/detail/DepositOrWithdrawButtons.svelte';
 
 	export let walletAddressMatchesOrBlank: Readable<(address: string) => boolean> | undefined =
 		undefined;
@@ -15,7 +18,7 @@
 	export let id: string;
 	export let subgraphUrl: string;
 
-	$: orderDetailQuery = createQuery<OrderSubgraph>({
+	$: orderDetailQuery = createQuery<OrderWithSortedVaults>({
 		queryKey: [id, QKEY_ORDER + id],
 		queryFn: () => getOrder(subgraphUrl, id),
 		enabled: !!subgraphUrl && !!id
@@ -24,12 +27,12 @@
 
 <TanstackPageContentDetail query={orderDetailQuery} emptyMessage="Order not found">
 	<svelte:fragment slot="top" let:data>
-		<div>Order {data.orderHash}</div>
-		{#if data && $walletAddressMatchesOrBlank?.(data.owner) && data.active && handleOrderRemoveModal}
+		<div>Order {data.order.orderHash}</div>
+		{#if data && $walletAddressMatchesOrBlank?.(data.order.owner) && data.order.active && handleOrderRemoveModal}
 			<Button
 				data-testid="remove-button"
 				color="dark"
-				on:click={() => handleOrderRemoveModal(data, $orderDetailQuery.refetch)}
+				on:click={() => handleOrderRemoveModal(data.order, $orderDetailQuery.refetch)}
 				disabled={!handleOrderRemoveModal}
 			>
 				Remove
@@ -38,7 +41,32 @@
 	</svelte:fragment>
 
 	<svelte:fragment slot="card" let:data>
-		<div>Owner: {data.owner}</div>
+		<div>Owner: {data.order.owner}</div>
+
+		{#each [{ key: 'Input vaults', type: 'inputs' }, { key: 'Output vaults', type: 'outputs' }, { key: 'Input & output vaults', type: 'inputs_outputs' }] as { key, type }}
+			{#if data.vaults.get(type)?.length !== 0}
+				<CardProperty>
+					<svelte:fragment slot="key">{key}</svelte:fragment>
+					<svelte:fragment slot="value">
+						<div class="mt-2 space-y-2">
+							{#each data.vaults.get(type) || [] as vault}
+								<ButtonVaultLink tokenVault={vault} subgraphName="subgraphName">
+									<svelte:fragment slot="buttons">
+										<DepositOrWithdrawButtons
+											{vault}
+											chainId={1}
+											rpcUrl="https://example.com"
+											query={orderDetailQuery}
+											handleDepositOrWithdrawModal={() => {}}
+										/>
+									</svelte:fragment>
+								</ButtonVaultLink>
+							{/each}
+						</div>
+					</svelte:fragment>
+				</CardProperty>
+			{/if}
+		{/each}
 	</svelte:fragment>
 
 	<svelte:fragment slot="chart">
@@ -46,6 +74,6 @@
 	</svelte:fragment>
 
 	<svelte:fragment slot="below" let:data>
-		<div>Below content: {data.id}</div>
+		<div>Below content: {data.order.id}</div>
 	</svelte:fragment>
 </TanstackPageContentDetail>
diff --git a/packages/ui-components/src/__tests__/OrderDetail.test.ts b/packages/ui-components/src/__tests__/OrderDetail.test.ts
index 14499d209..a00f20a9a 100644
--- a/packages/ui-components/src/__tests__/OrderDetail.test.ts
+++ b/packages/ui-components/src/__tests__/OrderDetail.test.ts
@@ -3,7 +3,7 @@ import { render, screen, waitFor } from '@testing-library/svelte';
 import { describe, it, vi, type Mock } from 'vitest';
 import { expect } from '../lib/test/matchers';
 import OrderDetail from './OrderDetail.test.svelte';
-import type { OrderSubgraph } from '@rainlanguage/orderbook/js_api';
+import type { OrderSubgraph, Vault } from '@rainlanguage/orderbook/js_api';
 
 const { mockWalletAddressMatchesOrBlankStore } = await vi.hoisted(
 	() => import('../lib/__mocks__/stores')
@@ -55,7 +55,7 @@ describe('OrderDetail Component', () => {
 			// eslint-disable-next-line @typescript-eslint/no-explicit-any
 			subscribe: (fn: (value: any) => void) => {
 				fn({
-					data: mockOrder,
+					data: { order: mockOrder, vaults: new Map() },
 					status: 'success',
 					isFetching: false,
 					refetch: () => {}
@@ -97,4 +97,104 @@ describe('OrderDetail Component', () => {
 			expect(screen.queryByText('Remove')).not.toBeInTheDocument();
 		});
 	});
+
+	it('correctly categorizes and displays vaults in input, output, and shared categories', async () => {
+		const vault1 = {
+			id: '1',
+			vaultId: '0xabc',
+			owner: '0x123',
+			token: {
+				id: '0x456',
+				address: '0x456',
+				name: 'USDC coin',
+				symbol: 'USDC',
+				decimals: '6'
+			},
+			balance: '100000000000',
+			ordersAsInput: [],
+			ordersAsOutput: [],
+			balanceChanges: [],
+			orderbook: {
+				id: '0x00'
+			}
+		} as unknown as Vault;
+		const vault2 = {
+			id: '2',
+			vaultId: '0xbcd',
+			owner: '0x123',
+			token: {
+				id: '0x456',
+				address: '0x456',
+				name: 'USDC coin',
+				symbol: 'USDC',
+				decimals: '6'
+			},
+			balance: '100000000000',
+			ordersAsInput: [],
+			ordersAsOutput: [],
+			balanceChanges: [],
+			orderbook: {
+				id: '0x00'
+			}
+		} as unknown as Vault;
+		const vault3 = {
+			id: '3',
+			vaultId: '0xdef',
+			owner: '0x123',
+			token: {
+				id: '0x456',
+				address: '0x456',
+				name: 'USDC coin',
+				symbol: 'USDC',
+				decimals: '6'
+			},
+			balance: '100000000000',
+			ordersAsInput: [],
+			ordersAsOutput: [],
+			balanceChanges: [],
+			orderbook: {
+				id: '0x00'
+			}
+		} as unknown as Vault;
+		const mockOrderWithVaults: OrderSubgraph = {
+			...mockOrder,
+			inputs: [vault1, vault2],
+			outputs: [vault2, vault3]
+		} as unknown as OrderSubgraph;
+		const sortedVaults = new Map([
+			['inputs', [vault1]],
+			['outputs', [vault3]],
+			['inputs_outputs', [vault2]]
+		]);
+
+		const mockQuery = vi.mocked(await import('@tanstack/svelte-query'));
+		mockQuery.createQuery = vi.fn((__options, _queryClient) => ({
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any
+			subscribe: (fn: (value: any) => void) => {
+				fn({
+					data: {
+						order: mockOrderWithVaults,
+						vaults: sortedVaults
+					},
+					status: 'success',
+					isFetching: false
+				});
+				return { unsubscribe: () => {} };
+			}
+		})) as Mock;
+		mockWalletAddressMatchesOrBlankStore.mockSetSubscribeValue(() => true);
+		render(OrderDetail, {
+			props: {
+				id: mockOrderWithVaults.id,
+				subgraphUrl: 'https://example.com',
+				walletAddressMatchesOrBlank: mockWalletAddressMatchesOrBlankStore
+			}
+		});
+
+		await waitFor(() => {
+			expect(screen.getByText('Input vaults')).toBeInTheDocument();
+			expect(screen.getByText('Output vaults')).toBeInTheDocument();
+			expect(screen.getByText('Input & output vaults')).toBeInTheDocument();
+		});
+	});
 });
diff --git a/packages/ui-components/src/lib/components/detail/OrderDetail.svelte b/packages/ui-components/src/lib/components/detail/OrderDetail.svelte
index 890c3aeaf..d5241bd0c 100644
--- a/packages/ui-components/src/lib/components/detail/OrderDetail.svelte
+++ b/packages/ui-components/src/lib/components/detail/OrderDetail.svelte
@@ -12,7 +12,12 @@
 	import { QKEY_ORDER } from '../../queries/keys';
 	import CodeMirrorRainlang from '../CodeMirrorRainlang.svelte';
 	import { queryClient } from '../../stores/queryClient';
-	import { getOrder, type OrderSubgraph, type Vault } from '@rainlanguage/orderbook/js_api';
+	import {
+		getOrder,
+		type OrderSubgraph,
+		type OrderWithSortedVaults,
+		type Vault
+	} from '@rainlanguage/orderbook/js_api';
 	import { createQuery } from '@tanstack/svelte-query';
 	import { Button, TabItem, Tabs } from 'flowbite-svelte';
 	import { onDestroy } from 'svelte';
@@ -66,7 +71,7 @@
 	let codeMirrorDisabled = true;
 	let codeMirrorStyles = {};
 
-	$: orderDetailQuery = createQuery<OrderSubgraph>({
+	$: orderDetailQuery = createQuery<OrderWithSortedVaults>({
 		queryKey: [id, QKEY_ORDER + id],
 		queryFn: () => getOrder(subgraphUrl, id),
 		enabled: !!subgraphUrl
@@ -96,16 +101,16 @@
 		>
 			<div class="flex gap-x-2">
 				<span class="font-light">Order</span>
-				<Hash shorten value={data.orderHash} />
+				<Hash shorten value={data.order.orderHash} />
 			</div>
-			<BadgeActive active={data.active} large />
-			{#if data && $signerAddress === data.owner && data.active && handleOrderRemoveModal && $wagmiConfig && chainId && orderbookAddress}
+			<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({
-							order: data,
+							order: data.order,
 							onRemove: $orderDetailQuery.refetch,
 							wagmiConfig: $wagmiConfig,
 							chainId,
@@ -123,76 +128,63 @@
 			<CardProperty>
 				<svelte:fragment slot="key">Orderbook</svelte:fragment>
 				<svelte:fragment slot="value">
-					<Hash type={HashType.Identifier} shorten={false} value={data.orderbook.id} />
+					<Hash type={HashType.Identifier} shorten={false} value={data.order.orderbook.id} />
 				</svelte:fragment>
 			</CardProperty>
 
 			<CardProperty>
 				<svelte:fragment slot="key">Owner</svelte:fragment>
 				<svelte:fragment slot="value">
-					<Hash type={HashType.Wallet} shorten={false} value={data.owner} />
+					<Hash type={HashType.Wallet} shorten={false} value={data.order.owner} />
 				</svelte:fragment>
 			</CardProperty>
 
 			<CardProperty>
 				<svelte:fragment slot="key">Created</svelte:fragment>
 				<svelte:fragment slot="value">
-					{formatTimestampSecondsAsLocal(BigInt(data.timestampAdded))}
+					{formatTimestampSecondsAsLocal(BigInt(data.order.timestampAdded))}
 				</svelte:fragment>
 			</CardProperty>
 
-			<CardProperty>
-				<svelte:fragment slot="key">Input vaults</svelte:fragment>
-				<svelte:fragment slot="value">
-					<div class="mt-2 space-y-2">
-						{#each data.inputs || [] as vault}
-							<ButtonVaultLink tokenVault={vault} {subgraphName}>
-								<svelte:fragment slot="buttons">
-									{#if handleDepositOrWithdrawModal && $signerAddress === vault.owner && chainId}
-										<DepositOrWithdrawButtons
-											{vault}
-											{chainId}
-											{rpcUrl}
-											query={orderDetailQuery}
-											{handleDepositOrWithdrawModal}
-										/>
-									{/if}
-								</svelte:fragment>
-							</ButtonVaultLink>
-						{/each}
-					</div>
-				</svelte:fragment>
-			</CardProperty>
-
-			<CardProperty>
-				<svelte:fragment slot="key">Output vaults</svelte:fragment>
-				<svelte:fragment slot="value">
-					<div class="mt-2 space-y-2">
-						{#each data.outputs || [] as vault}
-							<ButtonVaultLink tokenVault={vault} {subgraphName}>
-								<svelte:fragment slot="buttons">
-									{#if handleDepositOrWithdrawModal && $wagmiConfig && $signerAddress === vault.owner && chainId}
-										<DepositOrWithdrawButtons
-											{vault}
-											{chainId}
-											{rpcUrl}
-											query={orderDetailQuery}
-											{handleDepositOrWithdrawModal}
-										/>
-									{/if}
-								</svelte:fragment>
-							</ButtonVaultLink>
-						{/each}
-					</div>
-				</svelte:fragment>
-			</CardProperty>
+			{#each [{ key: 'Input vaults', type: 'inputs' }, { key: 'Output vaults', type: 'outputs' }, { key: 'Input & output vaults', type: 'inputs_outputs' }] as { key, type }}
+				{#if data.vaults.get(type)?.length !== 0}
+					<CardProperty>
+						<svelte:fragment slot="key">{key}</svelte:fragment>
+						<svelte:fragment slot="value">
+							<div class="mt-2 space-y-2">
+								{#each data.vaults.get(type) || [] as vault}
+									<ButtonVaultLink tokenVault={vault} {subgraphName}>
+										<svelte:fragment slot="buttons">
+											{#if handleDepositOrWithdrawModal && $signerAddress === vault.owner && chainId}
+												<DepositOrWithdrawButtons
+													{vault}
+													{chainId}
+													{rpcUrl}
+													query={orderDetailQuery}
+													{handleDepositOrWithdrawModal}
+												/>
+											{/if}
+										</svelte:fragment>
+									</ButtonVaultLink>
+								{/each}
+							</div>
+						</svelte:fragment>
+					</CardProperty>
+				{/if}
+			{/each}
 		</div>
 	</svelte:fragment>
 	<svelte:fragment slot="chart">
 		<OrderTradesChart {id} {subgraphUrl} {lightweightChartsTheme} {colorTheme} />
 	</svelte:fragment>
 	<svelte:fragment slot="below" let:data>
-		<TanstackOrderQuote {id} order={data} {rpcUrl} {orderbookAddress} {handleQuoteDebugModal} />
+		<TanstackOrderQuote
+			{id}
+			order={data.order}
+			{rpcUrl}
+			{orderbookAddress}
+			{handleQuoteDebugModal}
+		/>
 		<Tabs
 			style="underline"
 			contentClass="mt-4"
@@ -201,7 +193,7 @@
 			<TabItem title="Rainlang source">
 				<div class="mb-8 overflow-hidden rounded-lg border dark:border-none">
 					<CodeMirrorRainlang
-						order={data}
+						order={data.order}
 						codeMirrorTheme={$codeMirrorTheme}
 						{codeMirrorDisabled}
 						{codeMirrorStyles}