diff --git a/packages/ui-components/src/__tests__/DeploymentSteps.test.ts b/packages/ui-components/src/__tests__/DeploymentSteps.test.ts
index 22ea3012e..dde93dbf2 100644
--- a/packages/ui-components/src/__tests__/DeploymentSteps.test.ts
+++ b/packages/ui-components/src/__tests__/DeploymentSteps.test.ts
@@ -1,12 +1,19 @@
 import { describe, it, expect, vi, beforeEach, type Mock } from 'vitest';
-import { render, screen, fireEvent, waitFor } from '@testing-library/svelte';
+import { render, screen, waitFor } from '@testing-library/svelte';
 import DeploymentSteps from '../lib/components/deployment/DeploymentSteps.svelte';
 import { DotrainOrderGui } from '@rainlanguage/orderbook/js_api';
-import userEvent from '@testing-library/user-event';
+
+import type { ComponentProps } from 'svelte';
+import { writable } from 'svelte/store';
+import type { AppKit } from '@reown/appkit';
+const { mockWagmiConfigStore, mockConnectedStore } = await vi.hoisted(
+	() => import('../lib/__mocks__/stores')
+);
+
+export type DeploymentStepsProps = ComponentProps<DeploymentSteps>;
 
 vi.mock('@rainlanguage/orderbook/js_api', () => ({
 	DotrainOrderGui: {
-		getDeploymentKeys: vi.fn(),
 		chooseDeployment: vi.fn()
 	}
 }));
@@ -566,115 +573,147 @@ describe('DeploymentSteps', () => {
 		vi.clearAllMocks();
 	});
 
-	it('renders strategy URL input and load button initially', () => {
-		render(DeploymentSteps);
-		expect(screen.getByPlaceholderText('Enter URL to .rain file')).toBeInTheDocument();
-		const loadButton = screen.getByText('Load Strategy');
-		expect(loadButton).toBeInTheDocument();
-		expect(loadButton).toBeDisabled();
-	});
+	it('shows deployment details when provided', async () => {
+		(DotrainOrderGui.chooseDeployment as Mock).mockResolvedValue({
+			getSelectTokens: () => []
+		});
 
-	it('enables load button when URL is entered', async () => {
-		render(DeploymentSteps);
-		const urlInput = screen.getByPlaceholderText('Enter URL to .rain file');
-		const loadButton = screen.getByText('Load Strategy');
+		const deploymentDetails = {
+			name: 'SFLR<>WFLR on Flare',
+			description: 'Rotate sFLR (Sceptre staked FLR) and WFLR on Flare.'
+		};
+
+		render(DeploymentSteps, {
+			props: {
+				dotrain,
+				deployment: 'flare-sflr-wflr',
+				deploymentDetails,
+				wagmiConfig: mockWagmiConfigStore,
+				wagmiConnected: mockConnectedStore,
+				appKitModal: writable({} as AppKit),
+				handleDeployModal: vi.fn()
+			}
+		});
 
-		await userEvent.type(urlInput, 'https://example.com/strategy.rain');
 		await waitFor(() => {
-			expect(loadButton).not.toBeDisabled();
+			expect(screen.getByText('SFLR<>WFLR on Flare')).toBeInTheDocument();
+			expect(
+				screen.getByText('Rotate sFLR (Sceptre staked FLR) and WFLR on Flare.')
+			).toBeInTheDocument();
 		});
 	});
 
-	it('loads strategy from URL when button is clicked', async () => {
-		global.fetch = vi.fn().mockResolvedValue({
-			ok: true,
-			text: () => Promise.resolve(JSON.stringify(dotrain))
+	it('shows select tokens section when tokens need to be selected', async () => {
+		const mockSelectTokens = ['token1', 'token2'];
+		(DotrainOrderGui.chooseDeployment as Mock).mockResolvedValue({
+			getSelectTokens: () => mockSelectTokens
 		});
 
-		render(DeploymentSteps);
-		const urlInput = screen.getByPlaceholderText('Enter URL to .rain file');
-		const loadButton = screen.getByText('Load Strategy');
-		await userEvent.clear(urlInput);
-		await fireEvent.input(urlInput, { target: { value: 'https://example.com/strategy.rain' } });
-		await userEvent.click(loadButton);
+		render(DeploymentSteps, {
+			props: {
+				dotrain,
+				deployment: 'flare-sflr-wflr',
+				deploymentDetails: { name: 'Deployment 1', description: 'Description 1' },
+				wagmiConfig: mockWagmiConfigStore,
+				wagmiConnected: mockConnectedStore,
+				appKitModal: writable({} as AppKit),
+				handleDeployModal: vi.fn()
+			}
+		});
 
 		await waitFor(() => {
-			expect(global.fetch).toHaveBeenCalledWith('https://example.com/strategy.rain');
+			expect(screen.getByText('Select Tokens')).toBeInTheDocument();
+			expect(
+				screen.getByText('Select the tokens that you want to use in your order.')
+			).toBeInTheDocument();
 		});
 	});
 
-	it('shows deployments dropdown after strategy is loaded', async () => {
-		global.fetch = vi.fn().mockResolvedValue({
-			ok: true,
-			text: () => Promise.resolve(JSON.stringify(dotrain))
+	it('shows error message when GUI initialization fails', async () => {
+		(DotrainOrderGui.chooseDeployment as Mock).mockRejectedValue(
+			new Error('Failed to initialize GUI')
+		);
+
+		render(DeploymentSteps, {
+			props: {
+				dotrain,
+				deployment: 'flare-sflr-wflr',
+				deploymentDetails: { name: 'Deployment 1', description: 'Description 1' },
+				wagmiConfig: mockWagmiConfigStore,
+				wagmiConnected: mockConnectedStore,
+				appKitModal: writable({} as AppKit),
+				handleDeployModal: vi.fn()
+			}
 		});
 
-		const mockDeployments = [
-			{ key: 'deployment1', label: 'Deployment 1' },
-			{ key: 'deployment2', label: 'Deployment 2' }
-		];
-
-		(DotrainOrderGui.getDeploymentKeys as Mock).mockResolvedValue(mockDeployments);
-
-		render(DeploymentSteps);
-		const urlInput = screen.getByPlaceholderText('Enter URL to .rain file');
-		const loadButton = screen.getByText('Load Strategy');
-
-		await userEvent.type(urlInput, 'https://example.com/strategy.rain');
-		await userEvent.click(loadButton);
-
 		await waitFor(() => {
-			expect(screen.getByText('Select Deployment')).toBeInTheDocument();
-			expect(screen.getByText('Select a deployment')).toBeInTheDocument();
+			expect(screen.getByText('Error loading GUI')).toBeInTheDocument();
+			expect(screen.getByText('Failed to initialize GUI')).toBeInTheDocument();
 		});
 	});
 
-	it('handles URL fetch errors', async () => {
-		global.fetch = vi.fn().mockRejectedValue(new Error('Failed to fetch'));
-
-		render(DeploymentSteps);
-		const urlInput = screen.getByPlaceholderText('Enter URL to .rain file');
-		const loadButton = screen.getByText('Load Strategy');
+	it('shows deploy strategy button when all required fields are filled', async () => {
+		mockConnectedStore.mockSetSubscribeValue(true);
+		(DotrainOrderGui.chooseDeployment as Mock).mockResolvedValue({
+			getSelectTokens: () => [],
+			getCurrentDeployment: () => ({
+				deployment: {
+					order: {
+						inputs: [],
+						outputs: []
+					}
+				},
+				deposits: []
+			}),
+			getAllFieldDefinitions: () => []
+		});
 
-		await userEvent.type(urlInput, 'https://example.com/strategy.rain');
-		await userEvent.click(loadButton);
+		render(DeploymentSteps, {
+			props: {
+				dotrain,
+				deployment: 'flare-sflr-wflr',
+				deploymentDetails: { name: 'Deployment 1', description: 'Description 1' },
+				wagmiConfig: mockWagmiConfigStore,
+				wagmiConnected: mockConnectedStore,
+				appKitModal: writable({} as AppKit),
+				handleDeployModal: vi.fn()
+			}
+		});
 
 		await waitFor(() => {
-			expect(screen.getByText('No valid strategy exists at this URL')).toBeInTheDocument();
+			expect(screen.getByText('Deploy Strategy')).toBeInTheDocument();
 		});
 	});
-
-	it('initializes GUI when deployment is selected', async () => {
-		global.fetch = vi.fn().mockResolvedValue({
-			ok: true,
-			text: () => Promise.resolve(JSON.stringify(dotrain))
+	it('shows connect wallet button when not connected', async () => {
+		mockConnectedStore.mockSetSubscribeValue(false);
+		(DotrainOrderGui.chooseDeployment as Mock).mockResolvedValue({
+			getSelectTokens: () => [],
+			getCurrentDeployment: () => ({
+				deployment: {
+					order: {
+						inputs: [],
+						outputs: []
+					}
+				},
+				deposits: []
+			}),
+			getAllFieldDefinitions: () => []
 		});
 
-		const mockDeployments: string[] = ['deployment1', 'deployment2'];
-
-		(DotrainOrderGui.getDeploymentKeys as Mock).mockResolvedValue(mockDeployments);
-
-		render(DeploymentSteps);
-		const urlInput = screen.getByPlaceholderText('Enter URL to .rain file');
-		const loadButton = screen.getByText('Load Strategy');
-
-		await userEvent.type(urlInput, 'https://example.com/strategy.rain');
-		await userEvent.click(loadButton);
-
-		await waitFor(() => {
-			expect(screen.getByText('Select Deployment')).toBeInTheDocument();
-			expect(screen.getByText('Select a deployment')).toBeInTheDocument();
+		render(DeploymentSteps, {
+			props: {
+				dotrain,
+				deployment: 'flare-sflr-wflr',
+				deploymentDetails: { name: 'Deployment 1', description: 'Description 1' },
+				wagmiConfig: mockWagmiConfigStore,
+				wagmiConnected: mockConnectedStore,
+				appKitModal: writable({} as AppKit),
+				handleDeployModal: vi.fn()
+			}
 		});
 
-		const dropdownButton = screen.getByTestId('dropdown-button');
-		await userEvent.click(dropdownButton);
-		const dropdown = screen.getByTestId('dropdown');
-		await userEvent.click(dropdown);
-		const deploymentOption = screen.getByText('deployment1');
-		await userEvent.click(deploymentOption);
-
 		await waitFor(() => {
-			expect(DotrainOrderGui.chooseDeployment).toHaveBeenCalled();
+			expect(screen.getByText('Connect Wallet')).toBeInTheDocument();
 		});
 	});
 });
diff --git a/packages/ui-components/src/__tests__/DeploymentTile.test.ts b/packages/ui-components/src/__tests__/DeploymentTile.test.ts
new file mode 100644
index 000000000..c871020ac
--- /dev/null
+++ b/packages/ui-components/src/__tests__/DeploymentTile.test.ts
@@ -0,0 +1,34 @@
+import { render, screen } from '@testing-library/svelte';
+import { describe, it, expect, vi } from 'vitest';
+import { goto } from '$app/navigation';
+import DeploymentTile from '../lib/components/deployment/DeploymentTile.svelte';
+
+// Mock the goto function
+vi.mock('$app/navigation', () => ({
+	goto: vi.fn()
+}));
+
+describe('DeploymentTile', () => {
+	const mockProps = {
+		strategyName: 'test-strategy',
+		key: 'test-key',
+		name: 'Test Deployment',
+		description: 'This is a test deployment description'
+	};
+
+	it('renders the deployment name and description', () => {
+		render(DeploymentTile, mockProps);
+
+		expect(screen.getByText('Test Deployment')).toBeInTheDocument();
+		expect(screen.getByText('This is a test deployment description')).toBeInTheDocument();
+	});
+
+	it('navigates to the correct URL when clicked', async () => {
+		const { getByRole } = render(DeploymentTile, mockProps);
+
+		const button = getByRole('button');
+		await button.click();
+
+		expect(goto).toHaveBeenCalledWith('/deploy/test-strategy/test-key');
+	});
+});
diff --git a/packages/ui-components/src/__tests__/DeploymentsSection.test.ts b/packages/ui-components/src/__tests__/DeploymentsSection.test.ts
new file mode 100644
index 000000000..e0b81e838
--- /dev/null
+++ b/packages/ui-components/src/__tests__/DeploymentsSection.test.ts
@@ -0,0 +1,71 @@
+import { render, screen } from '@testing-library/svelte';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import DeploymentsSection from '../lib/components/deployment/DeploymentsSection.svelte';
+import { DotrainOrderGui } from '@rainlanguage/orderbook/js_api';
+
+// Mock the DotrainOrderGui
+vi.mock('@rainlanguage/orderbook/js_api', () => ({
+	DotrainOrderGui: {
+		getDeploymentDetails: vi.fn()
+	}
+}));
+
+describe('DeploymentsSection', () => {
+	beforeEach(() => {
+		vi.clearAllMocks();
+	});
+
+	it('should render deployments when data is available', async () => {
+		const mockDeployments = new Map([
+			['key1', { name: 'Deployment 1', description: 'Description 1' }],
+			['key2', { name: 'Deployment 2', description: 'Description 2' }]
+		]);
+
+		vi.mocked(DotrainOrderGui.getDeploymentDetails).mockResolvedValue(mockDeployments);
+
+		render(DeploymentsSection, {
+			props: {
+				dotrain: 'test-dotrain',
+				strategyName: 'Test Strategy'
+			}
+		});
+
+		// Wait for deployments to load
+		const deployment1 = await screen.findByText('Deployment 1');
+		const deployment2 = await screen.findByText('Deployment 2');
+
+		expect(deployment1).toBeInTheDocument();
+		expect(deployment2).toBeInTheDocument();
+	});
+
+	it('should handle error when fetching deployments fails', async () => {
+		vi.mocked(DotrainOrderGui.getDeploymentDetails).mockRejectedValue(new Error('API Error'));
+
+		render(DeploymentsSection, {
+			props: {
+				dotrain: 'test-dotrain',
+				strategyName: 'Test Strategy'
+			}
+		});
+
+		const errorMessage = await screen.findByText(
+			'Error loading deployments: Error getting deployments.'
+		);
+		expect(errorMessage).toBeInTheDocument();
+	});
+
+	it('should fetch deployments when dotrain prop changes', async () => {
+		const { rerender } = render(DeploymentsSection, {
+			props: {
+				dotrain: '',
+				strategyName: 'Test Strategy'
+			}
+		});
+
+		expect(DotrainOrderGui.getDeploymentDetails).not.toHaveBeenCalled();
+
+		await rerender({ dotrain: 'new-dotrain', strategyName: 'Test Strategy' });
+
+		expect(DotrainOrderGui.getDeploymentDetails).toHaveBeenCalledWith('new-dotrain');
+	});
+});
diff --git a/packages/ui-components/src/__tests__/StrategySection.test.ts b/packages/ui-components/src/__tests__/StrategySection.test.ts
new file mode 100644
index 000000000..cf5476af0
--- /dev/null
+++ b/packages/ui-components/src/__tests__/StrategySection.test.ts
@@ -0,0 +1,94 @@
+import { render, screen, waitFor } from '@testing-library/svelte';
+import StrategySection from '../lib/components/deployment/StrategySection.svelte';
+import { DotrainOrderGui } from '@rainlanguage/orderbook/js_api';
+import { vi, describe, it, expect, beforeEach } from 'vitest';
+
+// Mock fetch
+const mockFetch = vi.fn();
+vi.stubGlobal('fetch', mockFetch);
+
+// Mock DotrainOrderGui
+vi.mock('@rainlanguage/orderbook/js_api', () => ({
+	DotrainOrderGui: {
+		getStrategyDetails: vi.fn(),
+		getDeploymentDetails: vi.fn()
+	}
+}));
+
+describe('StrategySection', () => {
+	beforeEach(() => {
+		vi.clearAllMocks();
+	});
+
+	it('renders strategy details successfully', async () => {
+		const mockDotrain = 'mock dotrain content';
+		const mockStrategyDetails = {
+			name: 'Test Strategy',
+			description: 'Test Description'
+		};
+
+		// Mock fetch response
+		mockFetch.mockResolvedValueOnce({
+			text: () => Promise.resolve(mockDotrain)
+		});
+
+		// Mock DotrainOrderGui methods
+		vi.mocked(DotrainOrderGui.getStrategyDetails).mockResolvedValueOnce(mockStrategyDetails);
+
+		render(StrategySection, {
+			props: {
+				strategyUrl: 'http://example.com/strategy',
+				strategyName: 'TestStrategy'
+			}
+		});
+
+		await waitFor(() => {
+			expect(screen.getByText('Test Strategy')).toBeInTheDocument();
+			expect(screen.getByText('Test Description')).toBeInTheDocument();
+		});
+	});
+
+	it('displays error message when strategy details fail', async () => {
+		const mockDotrain = 'mock dotrain content';
+		const mockError = new Error('Failed to get strategy details');
+
+		// Mock fetch response
+		mockFetch.mockResolvedValueOnce({
+			text: () => Promise.resolve(mockDotrain)
+		});
+
+		// Mock DotrainOrderGui methods
+		vi.mocked(DotrainOrderGui.getStrategyDetails).mockRejectedValueOnce(mockError);
+
+		render(StrategySection, {
+			props: {
+				strategyUrl: 'http://example.com/strategy',
+				strategyName: 'TestStrategy'
+			}
+		});
+
+		await waitFor(() => {
+			expect(screen.getByText('Error getting strategy details')).toBeInTheDocument();
+			expect(screen.getByText('Failed to get strategy details')).toBeInTheDocument();
+		});
+	});
+
+	it('handles fetch failure', async () => {
+		const mockError = new Error('Failed to fetch');
+
+		// Mock fetch to reject
+		mockFetch.mockRejectedValueOnce(mockError);
+
+		render(StrategySection, {
+			props: {
+				strategyUrl: 'http://example.com/strategy',
+				strategyName: 'TestStrategy'
+			}
+		});
+
+		await waitFor(() => {
+			expect(screen.getByText('Error fetching strategy')).toBeInTheDocument();
+			expect(screen.getByText('Failed to fetch')).toBeInTheDocument();
+		});
+	});
+});
diff --git a/packages/webapp/src/lib/__tests__/WalletConnect.test.ts b/packages/ui-components/src/__tests__/WalletConnect.test.ts
similarity index 68%
rename from packages/webapp/src/lib/__tests__/WalletConnect.test.ts
rename to packages/ui-components/src/__tests__/WalletConnect.test.ts
index 5466547cc..8e77f053a 100644
--- a/packages/webapp/src/lib/__tests__/WalletConnect.test.ts
+++ b/packages/ui-components/src/__tests__/WalletConnect.test.ts
@@ -1,16 +1,18 @@
 import { render, screen } from '@testing-library/svelte';
-import WalletConnect from '../components/WalletConnect.svelte';
+import WalletConnect from '../lib/components/wallet/WalletConnect.svelte';
 import { describe, it, vi, beforeEach, expect } from 'vitest';
+import { writable, type Writable } from 'svelte/store';
+import type { AppKit } from '@reown/appkit';
 
-const { mockSignerAddressStore, mockConnectedStore, mockAppKitModalStore } = await vi.hoisted(
-	() => import('../__mocks__/stores')
+const { mockSignerAddressStore, mockConnectedStore } = await vi.hoisted(
+	() => import('$lib/__mocks__/stores')
 );
 
 vi.mock('$lib/stores/wagmi', async (importOriginal) => {
 	const original = (await importOriginal()) as object;
 	return {
 		...original,
-		appKitModal: mockAppKitModalStore,
+		appKitModal: writable({} as AppKit),
 		connected: mockConnectedStore
 	};
 });
@@ -35,7 +37,12 @@ describe('WalletConnect component', () => {
 		mockSignerAddressStore.mockSetSubscribeValue('0x123');
 		mockConnectedStore.mockSetSubscribeValue(true);
 
-		render(WalletConnect);
+		render(WalletConnect, {
+			props: {
+				connected: mockConnectedStore as Writable<boolean>,
+				appKitModal: writable({} as AppKit)
+			}
+		});
 
 		expect(screen.getByText('Connected')).toBeInTheDocument();
 	});
diff --git a/packages/ui-components/src/__tests__/transactionStore.test.ts b/packages/ui-components/src/__tests__/transactionStore.test.ts
new file mode 100644
index 000000000..849424504
--- /dev/null
+++ b/packages/ui-components/src/__tests__/transactionStore.test.ts
@@ -0,0 +1,217 @@
+import { describe, it, expect, vi, beforeEach, afterAll, type Mock } from 'vitest';
+import { get } from 'svelte/store';
+import transactionStore, {
+	TransactionStatus,
+	TransactionErrorMessage
+} from '../lib/stores/transactionStore';
+import { waitForTransactionReceipt, sendTransaction, switchChain, type Config } from '@wagmi/core';
+
+vi.mock('@wagmi/core', () => ({
+	waitForTransactionReceipt: vi.fn(),
+	sendTransaction: vi.fn(),
+	switchChain: vi.fn()
+}));
+
+describe('transactionStore', () => {
+	const mockConfig = {} as Config;
+	const mockOrderbookAddress = '0xabcdef1234567890';
+
+	const {
+		reset,
+		checkingWalletAllowance,
+		handleDeploymentTransaction,
+		awaitWalletConfirmation,
+		awaitApprovalTx,
+		transactionSuccess,
+		transactionError
+	} = transactionStore;
+
+	beforeEach(() => {
+		vi.resetAllMocks();
+		reset();
+	});
+
+	afterAll(() => {
+		vi.clearAllMocks();
+	});
+
+	it('should initialize with the correct default state', () => {
+		expect(get(transactionStore)).toEqual({
+			status: TransactionStatus.IDLE,
+			error: '',
+			hash: '',
+			data: null,
+			functionName: '',
+			message: ''
+		});
+	});
+
+	it('should update status to CHECKING_ALLOWANCE', () => {
+		checkingWalletAllowance('Checking allowance...');
+		expect(get(transactionStore).status).toBe(TransactionStatus.CHECKING_ALLOWANCE);
+		expect(get(transactionStore).message).toBe('Checking allowance...');
+	});
+
+	it('should update status to PENDING_WALLET', () => {
+		awaitWalletConfirmation('Waiting for wallet...');
+		expect(get(transactionStore).status).toBe(TransactionStatus.PENDING_WALLET);
+		expect(get(transactionStore).message).toBe('Waiting for wallet...');
+	});
+
+	it('should update status to PENDING_APPROVAL', () => {
+		awaitApprovalTx('mockHash', 'TEST');
+		expect(get(transactionStore).status).toBe(TransactionStatus.PENDING_APPROVAL);
+		expect(get(transactionStore).hash).toBe('mockHash');
+		expect(get(transactionStore).message).toBe('Approving TEST spend...');
+	});
+
+	it('should update status to SUCCESS', () => {
+		transactionSuccess('mockHash', 'Transaction successful');
+		expect(get(transactionStore).status).toBe(TransactionStatus.SUCCESS);
+		expect(get(transactionStore).hash).toBe('mockHash');
+		expect(get(transactionStore).message).toBe('Transaction successful');
+	});
+
+	it('should update status to ERROR', () => {
+		transactionError(TransactionErrorMessage.DEPLOY_FAILED, 'mockHash');
+		expect(get(transactionStore).status).toBe(TransactionStatus.ERROR);
+		expect(get(transactionStore).error).toBe(TransactionErrorMessage.DEPLOY_FAILED);
+		expect(get(transactionStore).hash).toBe('mockHash');
+	});
+
+	it('should handle successful deployment transaction', async () => {
+		const mockApprovals = [
+			{ token: '0xtoken1', calldata: '0xapproval1' },
+			{ token: '0xtoken2', calldata: '0xapproval2' }
+		];
+		const mockDeploymentCalldata = '0xdeployment';
+
+		(sendTransaction as Mock).mockResolvedValueOnce('approvalHash1');
+		(sendTransaction as Mock).mockResolvedValueOnce('approvalHash2');
+		(sendTransaction as Mock).mockResolvedValueOnce('deployHash');
+		(waitForTransactionReceipt as Mock).mockResolvedValue({});
+		(switchChain as Mock).mockResolvedValue({});
+
+		await handleDeploymentTransaction({
+			config: mockConfig,
+			approvals: mockApprovals,
+			deploymentCalldata: mockDeploymentCalldata,
+			orderbookAddress: mockOrderbookAddress as `0x${string}`,
+			chainId: 1
+		});
+
+		expect(get(transactionStore).status).toBe(TransactionStatus.SUCCESS);
+		expect(get(transactionStore).hash).toBe('deployHash');
+	});
+
+	it('should handle chain switch failure', async () => {
+		(switchChain as Mock).mockRejectedValue(new Error('Switch failed'));
+
+		await handleDeploymentTransaction({
+			config: mockConfig,
+			approvals: [],
+			deploymentCalldata: '0x',
+			orderbookAddress: mockOrderbookAddress as `0x${string}`,
+			chainId: 1
+		});
+
+		expect(get(transactionStore).status).toBe(TransactionStatus.ERROR);
+		expect(get(transactionStore).error).toBe(TransactionErrorMessage.SWITCH_CHAIN_FAILED);
+	});
+
+	it('should handle user rejection of approval transaction', async () => {
+		const mockApprovals = [{ token: '0xtoken1', calldata: '0xapproval1' }];
+
+		(switchChain as Mock).mockResolvedValue({});
+		(sendTransaction as Mock).mockRejectedValue(new Error('User rejected'));
+
+		await handleDeploymentTransaction({
+			config: mockConfig,
+			approvals: mockApprovals,
+			deploymentCalldata: '0x',
+			orderbookAddress: mockOrderbookAddress as `0x${string}`,
+			chainId: 1
+		});
+
+		expect(get(transactionStore).status).toBe(TransactionStatus.ERROR);
+		expect(get(transactionStore).error).toBe(TransactionErrorMessage.USER_REJECTED_APPROVAL);
+	});
+
+	it('should handle approval transaction receipt failure', async () => {
+		const mockApprovals = [{ token: '0xtoken1', calldata: '0xapproval1' }];
+
+		(switchChain as Mock).mockResolvedValue({});
+		(sendTransaction as Mock).mockResolvedValue('approvalHash');
+		(waitForTransactionReceipt as Mock).mockRejectedValue(new Error('Receipt failed'));
+
+		await handleDeploymentTransaction({
+			config: mockConfig,
+			approvals: mockApprovals,
+			deploymentCalldata: '0x',
+			orderbookAddress: mockOrderbookAddress as `0x${string}`,
+			chainId: 1
+		});
+
+		expect(get(transactionStore).status).toBe(TransactionStatus.ERROR);
+		expect(get(transactionStore).error).toBe(TransactionErrorMessage.APPROVAL_FAILED);
+	});
+
+	it('should handle user rejection of deployment transaction', async () => {
+		(switchChain as Mock).mockResolvedValue({});
+		(sendTransaction as Mock).mockRejectedValue(new Error('User rejected'));
+
+		await handleDeploymentTransaction({
+			config: mockConfig,
+			approvals: [],
+			deploymentCalldata: '0x',
+			orderbookAddress: mockOrderbookAddress as `0x${string}`,
+			chainId: 1
+		});
+
+		expect(get(transactionStore).status).toBe(TransactionStatus.ERROR);
+		expect(get(transactionStore).error).toBe(TransactionErrorMessage.USER_REJECTED_TRANSACTION);
+	});
+
+	it('should handle deployment transaction receipt failure', async () => {
+		(switchChain as Mock).mockResolvedValue({});
+		(sendTransaction as Mock).mockResolvedValue('deployHash');
+		(waitForTransactionReceipt as Mock).mockRejectedValue(new Error('Receipt failed'));
+
+		await handleDeploymentTransaction({
+			config: mockConfig,
+			approvals: [],
+			deploymentCalldata: '0x',
+			orderbookAddress: mockOrderbookAddress as `0x${string}`,
+			chainId: 1
+		});
+
+		expect(get(transactionStore).status).toBe(TransactionStatus.ERROR);
+		expect(get(transactionStore).error).toBe(TransactionErrorMessage.DEPLOYMENT_FAILED);
+	});
+
+	it('should handle multiple approvals successfully', async () => {
+		const mockApprovals = [
+			{ token: '0xtoken1', calldata: '0xapproval1' },
+			{ token: '0xtoken2', calldata: '0xapproval2' }
+		];
+
+		(switchChain as Mock).mockResolvedValue({});
+		(sendTransaction as Mock)
+			.mockResolvedValueOnce('approvalHash1')
+			.mockResolvedValueOnce('approvalHash2')
+			.mockResolvedValueOnce('deployHash');
+		(waitForTransactionReceipt as Mock).mockResolvedValue({});
+
+		await handleDeploymentTransaction({
+			config: mockConfig,
+			approvals: mockApprovals,
+			deploymentCalldata: '0x',
+			orderbookAddress: mockOrderbookAddress as `0x${string}`,
+			chainId: 1
+		});
+
+		expect(sendTransaction).toHaveBeenCalledTimes(3); // 2 approvals + 1 deployment
+		expect(get(transactionStore).status).toBe(TransactionStatus.SUCCESS);
+		expect(get(transactionStore).message).toBe('Strategy deployed successfully!');
+	});
+});
diff --git a/packages/ui-components/src/lib/__mocks__/mockTransactionStore.ts b/packages/ui-components/src/lib/__mocks__/mockTransactionStore.ts
new file mode 100644
index 000000000..ad9213895
--- /dev/null
+++ b/packages/ui-components/src/lib/__mocks__/mockTransactionStore.ts
@@ -0,0 +1,81 @@
+import { writable } from 'svelte/store';
+import { TransactionStatus, TransactionErrorMessage } from '../stores/transactionStore';
+
+type MockTransactionStoreState = {
+	status: TransactionStatus;
+	error: string;
+	hash: string;
+	data: null;
+	functionName: string;
+	message: string;
+};
+
+const initialState: MockTransactionStoreState = {
+	status: TransactionStatus.IDLE,
+	error: '',
+	hash: '',
+	data: null,
+	functionName: '',
+	message: ''
+};
+
+const mockTransactionWritable = writable<MockTransactionStoreState>(initialState);
+
+export const mockTransactionStore = {
+	subscribe: mockTransactionWritable.subscribe,
+	set: mockTransactionWritable.set,
+	reset: () => mockTransactionWritable.set(initialState),
+
+	handleDeploymentTransaction: async () => {
+		mockTransactionWritable.update((state) => ({
+			...state,
+			status: TransactionStatus.SUCCESS,
+			message: 'Strategy deployed successfully!',
+			hash: '0x123'
+		}));
+	},
+
+	checkingWalletAllowance: (message: string = '') =>
+		mockTransactionWritable.update((state) => ({
+			...state,
+			status: TransactionStatus.CHECKING_ALLOWANCE,
+			message
+		})),
+
+	awaitWalletConfirmation: (message: string = '') =>
+		mockTransactionWritable.update((state) => ({
+			...state,
+			status: TransactionStatus.PENDING_WALLET,
+			message
+		})),
+
+	awaitApprovalTx: (hash: string) =>
+		mockTransactionWritable.update((state) => ({
+			...state,
+			hash,
+			status: TransactionStatus.PENDING_APPROVAL,
+			message: ''
+		})),
+
+	transactionSuccess: (hash: string, message: string = '') =>
+		mockTransactionWritable.update((state) => ({
+			...state,
+			status: TransactionStatus.SUCCESS,
+			hash,
+			message
+		})),
+
+	transactionError: (error: TransactionErrorMessage, hash: string = '') =>
+		mockTransactionWritable.update((state) => ({
+			...state,
+			status: TransactionStatus.ERROR,
+			error,
+			hash
+		})),
+
+	mockSetSubscribeValue: (value: Partial<MockTransactionStoreState>) =>
+		mockTransactionWritable.update((state) => ({
+			...state,
+			...value
+		}))
+};
diff --git a/packages/ui-components/src/lib/__mocks__/stores.ts b/packages/ui-components/src/lib/__mocks__/stores.ts
index fa1b9b39c..dd4553101 100644
--- a/packages/ui-components/src/lib/__mocks__/stores.ts
+++ b/packages/ui-components/src/lib/__mocks__/stores.ts
@@ -112,11 +112,13 @@ export const mockChainIdStore = {
 export const mockConnectedStore = {
 	subscribe: mockConnectedWritable.subscribe,
 	set: mockConnectedWritable.set,
+	update: mockConnectedWritable.update,
 	mockSetSubscribeValue: (value: boolean): void => mockConnectedWritable.set(value)
 };
 
 export const mockWagmiConfigStore = {
 	subscribe: mockWagmiConfigWritable.subscribe,
 	set: mockWagmiConfigWritable.set,
+	update: mockWagmiConfigWritable.update,
 	mockSetSubscribeValue: (value: Config): void => mockWagmiConfigWritable.set(value)
 };
diff --git a/packages/ui-components/src/lib/components/deployment/DeploymentPage.svelte b/packages/ui-components/src/lib/components/deployment/DeploymentPage.svelte
new file mode 100644
index 000000000..0018c3c21
--- /dev/null
+++ b/packages/ui-components/src/lib/components/deployment/DeploymentPage.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+	import type { Writable } from 'svelte/store';
+	import DeploymentSteps from './DeploymentSteps.svelte';
+	import type { Config } from 'wagmi';
+	import type { AppKit } from '@reown/appkit';
+	import type {
+		ApprovalCalldataResult,
+		DepositAndAddOrderCalldataResult
+	} from '@rainlanguage/orderbook/js_api';
+	import type { Hex } from 'viem';
+
+	export let dotrain: string;
+	export let key: string;
+	export let name: string;
+	export let description: string;
+	export let wagmiConfig: Writable<Config | undefined>;
+	export let wagmiConnected: Writable<boolean>;
+	export let appKitModal: Writable<AppKit>;
+	export let handleDeployModal: (args: {
+		approvals: ApprovalCalldataResult;
+		deploymentCalldata: DepositAndAddOrderCalldataResult;
+		orderbookAddress: Hex;
+		chainId: number;
+	}) => void;
+</script>
+
+<DeploymentSteps
+	{dotrain}
+	deployment={key}
+	deploymentDetails={{ name, description }}
+	{wagmiConfig}
+	{wagmiConnected}
+	{appKitModal}
+	{handleDeployModal}
+/>
diff --git a/packages/ui-components/src/lib/components/deployment/DeploymentSectionHeader.svelte b/packages/ui-components/src/lib/components/deployment/DeploymentSectionHeader.svelte
index b94a6e94d..dbe0866e3 100644
--- a/packages/ui-components/src/lib/components/deployment/DeploymentSectionHeader.svelte
+++ b/packages/ui-components/src/lib/components/deployment/DeploymentSectionHeader.svelte
@@ -4,8 +4,8 @@
 </script>
 
 <div class="max-w-2xl text-left">
-	<h1 class="mb-4 text-2xl font-bold text-gray-900 lg:text-4xl dark:text-white">{title}</h1>
-	<p class="text-xl text-gray-600 dark:text-gray-400">
+	<h1 class="break-words text-2xl font-bold text-gray-900 lg:text-3xl dark:text-white">{title}</h1>
+	<p class="lg:text-2xltext-gray-600 break-words text-xl dark:text-gray-400">
 		{description}
 	</p>
 </div>
diff --git a/packages/ui-components/src/lib/components/deployment/DeploymentSteps.svelte b/packages/ui-components/src/lib/components/deployment/DeploymentSteps.svelte
index a30638766..22456274d 100644
--- a/packages/ui-components/src/lib/components/deployment/DeploymentSteps.svelte
+++ b/packages/ui-components/src/lib/components/deployment/DeploymentSteps.svelte
@@ -3,24 +3,24 @@
 	import DepositInput from './DepositInput.svelte';
 	import SelectToken from './SelectToken.svelte';
 	import TokenInputOrOutput from './TokenInputOrOutput.svelte';
-	import DropdownRadio from '../dropdown/DropdownRadio.svelte';
 	import DeploymentSectionHeader from './DeploymentSectionHeader.svelte';
+	import WalletConnect from '../wallet/WalletConnect.svelte';
 	import {
 		DotrainOrderGui,
-		type DeploymentKeys,
-		type ApprovalCalldataResult,
-		type DepositAndAddOrderCalldataResult,
 		type GuiDeposit,
 		type GuiFieldDefinition,
 		type NameAndDescription,
 		type GuiDeployment,
-		type OrderIO
+		type OrderIO,
+		type ApprovalCalldataResult,
+		type DepositAndAddOrderCalldataResult
 	} from '@rainlanguage/orderbook/js_api';
-	import { Button, Input, Spinner } from 'flowbite-svelte';
-	import { type Chain } from 'viem';
-	import { base, flare, arbitrum, polygon, bsc, mainnet, linea } from 'viem/chains';
-	import { getAccount, sendTransaction, type Config } from '@wagmi/core';
+	import { fade } from 'svelte/transition';
+	import { Button } from 'flowbite-svelte';
+	import { getAccount, type Config } from '@wagmi/core';
 	import { type Writable } from 'svelte/store';
+	import type { AppKit } from '@reown/appkit';
+	import type { Hex } from 'viem';
 
 	enum DeploymentStepErrors {
 		NO_GUI = 'Error loading GUI',
@@ -36,117 +36,57 @@
 		ADD_ORDER_FAILED = 'Failed to add order'
 	}
 
-	const chains: Record<number, Chain> = {
-		[base.id]: base,
-		[flare.id]: flare,
-		[arbitrum.id]: arbitrum,
-		[polygon.id]: polygon,
-		[bsc.id]: bsc,
-		[mainnet.id]: mainnet,
-		[linea.id]: linea
-	};
+	export let dotrain: string;
+	export let deployment: string;
+	export let deploymentDetails: NameAndDescription;
+	export let handleDeployModal: (args: {
+		approvals: ApprovalCalldataResult;
+		deploymentCalldata: DepositAndAddOrderCalldataResult;
+		orderbookAddress: Hex;
+		chainId: number;
+	}) => void;
 
-	let dotrain = '';
-	let isLoading = false;
 	let error: DeploymentStepErrors | null = null;
 	let errorDetails: string | null = null;
-	let strategyUrl = '';
 	let selectTokens: string[] | null = null;
 	let allDepositFields: GuiDeposit[] = [];
 	let allTokenOutputs: OrderIO[] = [];
 	let allFieldDefinitions: GuiFieldDefinition[] = [];
 	let allTokensSelected: boolean = false;
-	let guiDetails: NameAndDescription;
 	let inputVaultIds: string[] = [];
 	let outputVaultIds: string[] = [];
-	let addOrderError: string | null = null;
-	let addOrderErrorDetails: string | null = null;
-
-	export let wagmiConfig: Writable<Config> | null = null;
-	export let wagmiConnected: Writable<boolean> | null = null;
-
-	async function loadStrategyFromUrl() {
-		isLoading = true;
-		error = null;
-		errorDetails = null;
-
-		try {
-			const response = await fetch(strategyUrl);
-			if (!response.ok) {
-				error = DeploymentStepErrors.NO_STRATEGY;
-				errorDetails = `HTTP error - status: ${response.status}`;
-			}
-			dotrain = await response.text();
-		} catch (e) {
-			error = DeploymentStepErrors.NO_STRATEGY;
-			errorDetails = e instanceof Error ? e.message : 'Unknown error';
-		} finally {
-			isLoading = false;
-		}
-	}
 
 	let gui: DotrainOrderGui | null = null;
-	let availableDeployments: Record<string, { label: string }> = {};
+	let addOrderError: DeploymentStepErrors | null = null;
+	let addOrderErrorDetails: string | null = null;
+	export let wagmiConfig: Writable<Config | undefined>;
+	export let wagmiConnected: Writable<boolean>;
+	export let appKitModal: Writable<AppKit>;
 
-	async function initialize() {
-		try {
-			let deployments: DeploymentKeys = await DotrainOrderGui.getDeploymentKeys(dotrain);
-			availableDeployments = Object.fromEntries(
-				deployments.map((deployment) => [
-					deployment,
-					{
-						label: deployment
-					}
-				])
-			);
-		} catch (e: unknown) {
-			error = DeploymentStepErrors.NO_GUI;
-			errorDetails = e instanceof Error ? e.message : 'Unknown error';
-		}
+	$: if (deployment) {
+		handleDeploymentChange(deployment);
 	}
 
-	$: if (dotrain) {
-		isLoading = true;
+	async function handleDeploymentChange(deployment: string) {
+		if (!deployment || !dotrain) return;
 		error = null;
 		errorDetails = null;
-		gui = null;
-		initialize();
-		isLoading = false;
-	}
-
-	let selectedDeployment: string | undefined = undefined;
-	async function handleDeploymentChange(deployment: string) {
-		isLoading = true;
-		gui = null;
-		if (!deployment) return;
 
 		try {
 			gui = await DotrainOrderGui.chooseDeployment(dotrain, deployment);
-			try {
-				selectTokens = gui.getSelectTokens();
-				getGuiDetails();
-			} catch (e) {
-				error = DeploymentStepErrors.NO_SELECT_TOKENS;
-				errorDetails = e instanceof Error ? e.message : 'Unknown error';
+
+			if (gui) {
+				try {
+					selectTokens = await gui.getSelectTokens();
+					return selectTokens;
+				} catch (e) {
+					error = DeploymentStepErrors.NO_SELECT_TOKENS;
+					return (errorDetails = e instanceof Error ? e.message : 'Unknown error');
+				}
 			}
 		} catch (e) {
 			error = DeploymentStepErrors.NO_GUI;
-			errorDetails = e instanceof Error ? e.message : 'Unknown error';
-		}
-		isLoading = false;
-	}
-
-	$: if (selectedDeployment) {
-		handleDeploymentChange(selectedDeployment as string);
-	}
-
-	async function getGuiDetails() {
-		if (!gui) return;
-		try {
-			guiDetails = await DotrainOrderGui.getStrategyDetails(dotrain);
-		} catch (e) {
-			error = DeploymentStepErrors.NO_GUI_DETAILS;
-			errorDetails = e instanceof Error ? e.message : 'Unknown error';
+			return (errorDetails = e instanceof Error ? e.message : 'Unknown error');
 		}
 	}
 
@@ -196,41 +136,51 @@
 	}
 
 	$: if (selectTokens?.length === 0 || allTokensSelected) {
-		error = null;
-		initializeVaultIdArrays();
-		getAllDepositFields();
-		getAllFieldDefinitions();
-		getAllTokenInputs();
-		getAllTokenOutputs();
+		updateFields();
 	}
 
-	export function getChainById(chainId: number): Chain {
-		const chain = chains[chainId];
-		if (!chain) {
-			error = DeploymentStepErrors.NO_CHAIN;
-			errorDetails = `Unsupported chain ID: ${chainId}`;
+	async function updateFields() {
+		try {
+			error = null;
+			errorDetails = null;
+			initializeVaultIdArrays();
+			getAllDepositFields();
+			getAllFieldDefinitions();
+			getAllTokenInputs();
+			getAllTokenOutputs();
+		} catch (e) {
+			error = DeploymentStepErrors.NO_GUI;
+			errorDetails = e instanceof Error ? e.message : 'Unknown error';
 		}
-		return chain;
 	}
 
-	async function handleAddOrderWagmi() {
+	async function handleAddOrder() {
 		try {
 			if (!gui || !$wagmiConfig) return;
 			const { address } = getAccount($wagmiConfig);
 			if (!address) return;
-			const approvals: ApprovalCalldataResult = await gui.generateApprovalCalldatas(address);
-			for (const approval of approvals) {
-				await sendTransaction($wagmiConfig, {
-					to: approval.token as `0x${string}`,
-					data: approval.calldata as `0x${string}`
-				});
-			}
-			const calldata: DepositAndAddOrderCalldataResult =
-				await gui.generateDepositAndAddOrderCalldatas();
-			await sendTransaction($wagmiConfig, {
-				// @ts-expect-error orderbook is not typed
-				to: gui.getCurrentDeployment().deployment.order.orderbook.address as `0x${string}`,
-				data: calldata as `0x${string}`
+			let approvals = await gui.generateApprovalCalldatas(address);
+			const deploymentCalldata = await gui.generateDepositAndAddOrderCalldatas();
+			const chainId = gui.getCurrentDeployment().deployment.order.network['chain-id'] as number;
+			// @ts-expect-error orderbook is not typed
+			const orderbookAddress = gui.getCurrentDeployment().deployment.order.orderbook.address;
+			const outputTokenInfos = await Promise.all(
+				allTokenOutputs.map((token) => gui?.getTokenInfo(token.token?.key as string))
+			);
+
+			approvals = approvals.map((approval) => {
+				const token = outputTokenInfos.find((token) => token?.address === approval.token);
+				return {
+					...approval,
+					symbol: token?.symbol
+				};
+			});
+
+			handleDeployModal({
+				approvals,
+				deploymentCalldata,
+				orderbookAddress,
+				chainId
 			});
 		} catch (e) {
 			addOrderError = DeploymentStepErrors.ADD_ORDER_FAILED;
@@ -246,140 +196,105 @@
 	}
 </script>
 
-<div class="mb-4">
-	<div class="flex flex-col gap-4 md:flex-row">
-		<div class="flex-1">
-			<Input
-				id="strategy-url"
-				type="url"
-				placeholder="Enter URL to .rain file"
-				bind:value={strategyUrl}
-				size="lg"
-			/>
-		</div>
-		<Button on:click={loadStrategyFromUrl} disabled={!strategyUrl} size="lg">Load Strategy</Button>
-	</div>
-</div>
-
-{#if error}
-	<p class="text-red-500">{error}</p>
-{/if}
-{#if errorDetails}
-	<p class="text-red-500">{errorDetails}</p>
-{/if}
-{#if dotrain}
-	<DeploymentSectionHeader title="Select Deployment" />
-	<DropdownRadio options={availableDeployments} bind:value={selectedDeployment}>
-		<svelte:fragment slot="content" let:selectedOption let:selectedRef>
-			{#if selectedRef === undefined}
-				<span>Select a deployment</span>
-			{:else if selectedOption?.label}
-				<span>{selectedOption.label}</span>
-			{:else}
-				<span>{selectedRef}</span>
-			{/if}
-		</svelte:fragment>
-
-		<svelte:fragment slot="option" let:option let:ref>
-			<div class="w-full overflow-hidden overflow-ellipsis">
-				<div class="text-md break-word">{option.label ? option.label : ref}</div>
-			</div>
-		</svelte:fragment>
-	</DropdownRadio>
-
-	{#if isLoading}
-		<Spinner />
+<div>
+	{#if error}
+		<p class="text-red-500">{error}</p>
 	{/if}
-	{#if gui}
-		<div class="flex max-w-2xl flex-col gap-24">
-			{#if guiDetails}
-				<div class="mt-16 flex max-w-2xl flex-col gap-6 text-start">
-					<h1 class="mb-6 text-4xl font-semibold text-gray-900 lg:text-8xl dark:text-white">
-						{guiDetails.name}
-					</h1>
-					<p class="text-xl text-gray-600 dark:text-gray-400">
-						{guiDetails.description}
-					</p>
-				</div>
-			{/if}
-
-			{#if selectTokens && selectTokens.length > 0}
-				<div class="flex w-full flex-col gap-6">
-					<DeploymentSectionHeader
-						title="Select Tokens"
-						description="Select the tokens that you want to use in your order."
-					/>
-					<div class="flex w-full flex-col gap-4">
-						{#each selectTokens as tokenKey}
-							<SelectToken {tokenKey} bind:gui bind:selectTokens bind:allTokensSelected />
-						{/each}
-					</div>
-				</div>
-			{/if}
-
-			{#if allTokensSelected || selectTokens?.length === 0}
-				{#if allFieldDefinitions.length > 0}
-					<div class="flex w-full flex-col items-center gap-24">
-						{#each allFieldDefinitions as fieldDefinition}
-							<FieldDefinitionInput {fieldDefinition} {gui} />
-						{/each}
+	{#if errorDetails}
+		<p class="text-red-500">{errorDetails}</p>
+	{/if}
+	{#if dotrain}
+		{#if gui}
+			<div class="flex max-w-2xl flex-col gap-24" in:fade>
+				{#if deploymentDetails}
+					<div class="mt-16 flex max-w-2xl flex-col gap-4 text-start">
+						<h1 class=" text-4xl font-semibold text-gray-900 lg:text-8xl dark:text-white">
+							{deploymentDetails.name}
+						</h1>
+						<p class="text-2xl text-gray-600 lg:text-3xl dark:text-gray-400">
+							{deploymentDetails.description}
+						</p>
 					</div>
 				{/if}
 
-				{#if allDepositFields.length > 0}
-					<div class="flex w-full flex-col items-center gap-24">
-						{#each allDepositFields as deposit}
-							<DepositInput bind:deposit bind:gui />
-						{/each}
-					</div>
-				{/if}
-				{#if allTokenInputs.length > 0 && allTokenOutputs.length > 0}
+				{#if selectTokens && selectTokens.length > 0}
 					<div class="flex w-full flex-col gap-6">
 						<DeploymentSectionHeader
-							title={'Input/Output Vaults'}
-							description={'The vault addresses for the input and output tokens.'}
+							title="Select Tokens"
+							description="Select the tokens that you want to use in your order."
 						/>
-						{#if allTokenInputs.length > 0}
-							{#each allTokenInputs as input, i}
-								<TokenInputOrOutput
-									{i}
-									label="Input"
-									vault={input}
-									vaultIds={inputVaultIds}
-									{gui}
-								/>
-							{/each}
-						{/if}
-
-						{#if allTokenOutputs.length > 0}
-							{#each allTokenOutputs as output, i}
-								<TokenInputOrOutput
-									{i}
-									label="Output"
-									vault={output}
-									vaultIds={outputVaultIds}
-									{gui}
-								/>
+						<div class="flex w-full flex-col gap-4">
+							{#each selectTokens as tokenKey}
+								<SelectToken {tokenKey} bind:gui bind:selectTokens bind:allTokensSelected />
 							{/each}
-						{/if}
+						</div>
 					</div>
 				{/if}
-				<div class="flex flex-col gap-2">
-					{#if $wagmiConnected}
-						<Button size="lg" on:click={handleAddOrderWagmi}>Deploy Strategy with Wagmi</Button>
-					{:else}
-						<slot name="wallet-connect" />
+
+				{#if allTokensSelected || selectTokens?.length === 0}
+					{#if allFieldDefinitions.length > 0}
+						<div class="flex w-full flex-col items-center gap-24">
+							{#each allFieldDefinitions as fieldDefinition}
+								<FieldDefinitionInput {fieldDefinition} {gui} />
+							{/each}
+						</div>
 					{/if}
-					<div class="flex flex-col">
-						{#if addOrderError}
-							<p class="text-red-500">{addOrderError}</p>
-						{/if}
-						{#if addOrderErrorDetails}
-							<p class="text-red-500">{addOrderErrorDetails}</p>
+
+					{#if allDepositFields.length > 0}
+						<div class="flex w-full flex-col items-center gap-24">
+							{#each allDepositFields as deposit}
+								<DepositInput bind:deposit bind:gui />
+							{/each}
+						</div>
+					{/if}
+					{#if allTokenInputs.length > 0 && allTokenOutputs.length > 0}
+						<div class="flex w-full flex-col gap-6">
+							<DeploymentSectionHeader
+								title={'Input/Output Vaults'}
+								description={'The vault addresses for the input and output tokens.'}
+							/>
+							{#if allTokenInputs.length > 0}
+								{#each allTokenInputs as input, i}
+									<TokenInputOrOutput
+										{i}
+										label="Input"
+										vault={input}
+										vaultIds={inputVaultIds}
+										{gui}
+									/>
+								{/each}
+							{/if}
+
+							{#if allTokenOutputs.length > 0}
+								{#each allTokenOutputs as output, i}
+									<TokenInputOrOutput
+										{i}
+										label="Output"
+										vault={output}
+										vaultIds={outputVaultIds}
+										{gui}
+									/>
+								{/each}
+							{/if}
+						</div>
+					{/if}
+					<div class="flex flex-col gap-2">
+						{#if $wagmiConnected}
+							<Button size="lg" on:click={handleAddOrder}>Deploy Strategy</Button>
+						{:else}
+							<WalletConnect {appKitModal} connected={wagmiConnected} />
 						{/if}
+						<div class="flex flex-col">
+							{#if addOrderError}
+								<p class="text-red-500">{addOrderError}</p>
+							{/if}
+							{#if addOrderErrorDetails}
+								<p class="text-red-500">{addOrderErrorDetails}</p>
+							{/if}
+						</div>
 					</div>
-				</div>
-			{/if}
-		</div>
+				{/if}
+			</div>
+		{/if}
 	{/if}
-{/if}
+</div>
diff --git a/packages/ui-components/src/lib/components/deployment/DeploymentTile.svelte b/packages/ui-components/src/lib/components/deployment/DeploymentTile.svelte
new file mode 100644
index 000000000..cbb0f32fc
--- /dev/null
+++ b/packages/ui-components/src/lib/components/deployment/DeploymentTile.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	export let strategyName: string;
+	export let key: string;
+	export let name: string;
+	export let description: string;
+</script>
+
+<button
+	on:click={() => goto(`/deploy/${strategyName}/${key}`)}
+	class="block max-w-sm cursor-pointer rounded-lg border border-gray-200 bg-white p-4 text-left shadow hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700"
+>
+	<h1 class="text-2xl font-semibold text-gray-900 dark:text-white">{name}</h1>
+	<p class="text-gray-600 dark:text-gray-400">{description}</p>
+</button>
diff --git a/packages/ui-components/src/lib/components/deployment/DeploymentsSection.svelte b/packages/ui-components/src/lib/components/deployment/DeploymentsSection.svelte
new file mode 100644
index 000000000..25cf1cea3
--- /dev/null
+++ b/packages/ui-components/src/lib/components/deployment/DeploymentsSection.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+	import { DotrainOrderGui } from '@rainlanguage/orderbook/js_api';
+	import DeploymentTile from './DeploymentTile.svelte';
+
+	export let dotrain: string;
+	export let strategyName: string;
+	let deployments: { key: string; name: string; description: string }[] = [];
+	let error: string = '';
+	let errorDetails: string = '';
+
+	const getDeployments = async () => {
+		try {
+			const deploymentsWithDetails = await DotrainOrderGui.getDeploymentDetails(dotrain);
+			deployments = Array.from(deploymentsWithDetails, ([key, details]) => ({
+				key,
+				...details
+			}));
+		} catch (e: unknown) {
+			error = 'Error getting deployments.';
+			errorDetails = e instanceof Error ? e.message : 'Unknown error';
+		}
+	};
+
+	$: if (dotrain) {
+		getDeployments();
+	}
+</script>
+
+{#if deployments.length > 0}
+	<section class="flex flex-col gap-6">
+		<div class="container grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+			{#each deployments as { key, name, description }}
+				<DeploymentTile {name} {description} {key} {strategyName} />
+			{/each}
+		</div>
+	</section>
+{:else if error}
+	<p class="text-red-500">Error loading deployments: {error}</p>
+{:else}
+	<p class="text-gray-500">{errorDetails}</p>
+{/if}
diff --git a/packages/ui-components/src/lib/components/deployment/StrategySection.svelte b/packages/ui-components/src/lib/components/deployment/StrategySection.svelte
new file mode 100644
index 000000000..c1759bfe5
--- /dev/null
+++ b/packages/ui-components/src/lib/components/deployment/StrategySection.svelte
@@ -0,0 +1,52 @@
+<script lang="ts">
+	import { fade } from 'svelte/transition';
+	import { DotrainOrderGui, type NameAndDescription } from '@rainlanguage/orderbook/js_api';
+	import DeploymentsSection from './DeploymentsSection.svelte';
+
+	export let strategyUrl: string;
+	export let strategyName: string;
+	let strategyDetails: NameAndDescription;
+	let dotrain: string;
+	let error: string;
+	let errorDetails: string;
+
+	const getStrategy = async () => {
+		try {
+			const response = await fetch(strategyUrl);
+			const data = await response.text();
+			dotrain = data;
+			try {
+				strategyDetails = await DotrainOrderGui.getStrategyDetails(dotrain);
+			} catch (e: unknown) {
+				error = 'Error getting strategy details';
+				errorDetails = e instanceof Error ? e.message : 'Unknown error';
+			}
+		} catch (e: unknown) {
+			error = 'Error fetching strategy';
+			errorDetails = e instanceof Error ? e.message : 'Unknown error';
+		}
+	};
+
+	$: getStrategy();
+</script>
+
+{#if dotrain && strategyDetails}
+	<div>
+		<div in:fade class="flex flex-col gap-12">
+			<div class="flex max-w-2xl flex-col gap-6 text-start">
+				<h1 class="mb-6 text-4xl font-semibold text-gray-900 lg:text-8xl dark:text-white">
+					{strategyDetails.name}
+				</h1>
+				<p class="text-xl text-gray-600 dark:text-gray-400">
+					{strategyDetails.description}
+				</p>
+			</div>
+			<DeploymentsSection {dotrain} {strategyName} />
+		</div>
+	</div>
+{:else if error}
+	<div>
+		<p>{error}</p>
+		<p>{errorDetails}</p>
+	</div>
+{/if}
diff --git a/packages/ui-components/src/lib/components/deployment/TokenInputOrOutput.svelte b/packages/ui-components/src/lib/components/deployment/TokenInputOrOutput.svelte
index 1b14acfb8..8a2d1faad 100644
--- a/packages/ui-components/src/lib/components/deployment/TokenInputOrOutput.svelte
+++ b/packages/ui-components/src/lib/components/deployment/TokenInputOrOutput.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { Input, Label } from 'flowbite-svelte';
-	import type { OrderIO, TokenInfo } from '@rainlanguage/orderbook/js_api';
-	import type { DotrainOrderGui } from '@rainlanguage/orderbook/js_api';
+	import type { OrderIO, TokenInfo, DotrainOrderGui } from '@rainlanguage/orderbook/js_api';
 	import { CloseCircleSolid } from 'flowbite-svelte-icons';
 
 	export let i: number;
diff --git a/packages/webapp/src/lib/components/WalletConnect.svelte b/packages/ui-components/src/lib/components/wallet/WalletConnect.svelte
similarity index 75%
rename from packages/webapp/src/lib/components/WalletConnect.svelte
rename to packages/ui-components/src/lib/components/wallet/WalletConnect.svelte
index 782f5e4aa..3fdf2335b 100644
--- a/packages/webapp/src/lib/components/WalletConnect.svelte
+++ b/packages/ui-components/src/lib/components/wallet/WalletConnect.svelte
@@ -1,8 +1,10 @@
 <script lang="ts">
 	import { Button } from 'flowbite-svelte';
-	import { appKitModal, connected } from '$lib/stores/wagmi';
 	import { CheckCircleOutline } from 'flowbite-svelte-icons';
-
+	import type { Writable } from 'svelte/store';
+	import type { AppKit } from '@reown/appkit';
+	export let appKitModal: Writable<AppKit>;
+	export let connected: Writable<boolean>;
 	function handleClick() {
 		$appKitModal.open();
 	}
diff --git a/packages/ui-components/src/lib/index.ts b/packages/ui-components/src/lib/index.ts
index 3d12c8eba..c1b70d1e3 100644
--- a/packages/ui-components/src/lib/index.ts
+++ b/packages/ui-components/src/lib/index.ts
@@ -51,7 +51,6 @@ export { default as DepositInput } from './components/deployment/DepositInput.sv
 export { default as DeploymentSteps } from './components/deployment/DeploymentSteps.svelte';
 export { default as TokenOutput } from './components/deployment/TokenInputOrOutput.svelte';
 export { default as SelectToken } from './components/deployment/SelectToken.svelte';
-
 export { default as TokenInputOrOutput } from './components/deployment/TokenInputOrOutput.svelte';
 export { default as VaultBalanceChangesTable } from './components/tables/VaultBalanceChangesTable.svelte';
 export { default as VaultBalanceChart } from './components/charts/VaultBalanceChart.svelte';
@@ -61,11 +60,19 @@ export { default as CodeMirrorDotrain } from './components/CodeMirrorDotrain.sve
 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 StrategySection } from './components/deployment/StrategySection.svelte';
+export { default as DeploymentPage } from './components/deployment/DeploymentPage.svelte';
 export { default as InputHex } from './components/input/InputHex.svelte';
+export { default as WalletConnect } from './components/wallet/WalletConnect.svelte';
 
 //Types
 export type { AppStoresInterface } from './types/appStores.ts';
 export type { ConfigSource, OrderbookConfigSource, OrderbookRef } from './typeshare/config';
+export {
+	TransactionStatus,
+	TransactionErrorMessage,
+	type TransactionState
+} from './stores/transactionStore';
 
 // Functions
 export { createResolvableQuery, createResolvableInfiniteQuery } from './__mocks__/queries';
@@ -99,6 +106,8 @@ export { lightCodeMirrorTheme, darkCodeMirrorTheme } from './utils/codeMirrorThe
 // Stores
 export { mockConfigSource } from './__mocks__/settings';
 export { mockSettingsStore } from './__mocks__/settings';
+export { default as transactionStore } from './stores/transactionStore';
+export { mockTransactionStore } from './__mocks__/mockTransactionStore';
 
 // Assets
 export { default as logoLight } from './assets/logo-light.svg';
diff --git a/packages/ui-components/src/lib/stores/transactionStore.ts b/packages/ui-components/src/lib/stores/transactionStore.ts
new file mode 100644
index 000000000..7d4de1915
--- /dev/null
+++ b/packages/ui-components/src/lib/stores/transactionStore.ts
@@ -0,0 +1,182 @@
+import { writable } from 'svelte/store';
+import type { Hex } from 'viem';
+import type { Config } from '@wagmi/core';
+import { sendTransaction, switchChain, waitForTransactionReceipt } from '@wagmi/core';
+import type {
+	ApprovalCalldata,
+	DepositAndAddOrderCalldataResult
+} from '@rainlanguage/orderbook/js_api';
+
+export const ADDRESS_ZERO = '0x0000000000000000000000000000000000000000';
+export const ONE = BigInt('1000000000000000000');
+
+export enum TransactionStatus {
+	IDLE = 'Idle',
+	CHECKING_ALLOWANCE = 'Checking your allowance...',
+	PENDING_WALLET = 'Waiting for wallet confirmation...',
+	PENDING_APPROVAL = 'Approving token spend...',
+	PENDING_DEPLOYMENT = 'Deploying your strategy...',
+	SUCCESS = 'Success! Transaction confirmed',
+	ERROR = 'Something went wrong'
+}
+
+export enum TransactionErrorMessage {
+	BAD_CALLLDATA = 'Bad calldata.',
+	DEPLOY_FAILED = 'Lock transaction failed.',
+	TIMEOUT = 'Transaction timed out.',
+	APPROVAL_FAILED = 'Approval transaction failed.',
+	USER_REJECTED_APPROVAL = 'User rejected approval transaction.',
+	USER_REJECTED_TRANSACTION = 'User rejected the transaction.',
+	DEPLOYMENT_FAILED = 'Deployment transaction failed.',
+	SWITCH_CHAIN_FAILED = 'Failed to switch chain.'
+}
+
+type ExtendedApprovalCalldata = ApprovalCalldata & { symbol?: string };
+
+export type DeploymentTransactionArgs = {
+	config: Config;
+	approvals: ExtendedApprovalCalldata[];
+	deploymentCalldata: DepositAndAddOrderCalldataResult;
+	orderbookAddress: Hex;
+	chainId: number;
+};
+
+export type TransactionState = {
+	status: TransactionStatus;
+	error: string;
+	hash: string;
+	data: null;
+	functionName: string;
+	message: string;
+};
+
+export type TransactionStore = {
+	subscribe: (run: (value: TransactionState) => void) => () => void;
+	reset: () => void;
+	handleDeploymentTransaction: (args: DeploymentTransactionArgs) => Promise<void>;
+	checkingWalletAllowance: (message?: string) => void;
+	awaitWalletConfirmation: (message?: string) => void;
+	awaitApprovalTx: (hash: string) => void;
+	transactionSuccess: (hash: string, message?: string) => void;
+	transactionError: (message: TransactionErrorMessage, hash?: string) => void;
+};
+
+const initialState: TransactionState = {
+	status: TransactionStatus.IDLE,
+	error: '',
+	hash: '',
+	data: null,
+	functionName: '',
+	message: ''
+};
+
+const transactionStore = () => {
+	const { subscribe, set, update } = writable(initialState);
+	const reset = () => set(initialState);
+
+	const checkingWalletAllowance = (message?: string) =>
+		update((state) => ({
+			...state,
+			status: TransactionStatus.CHECKING_ALLOWANCE,
+			message: message || ''
+		}));
+	const awaitWalletConfirmation = (message?: string) =>
+		update((state) => ({
+			...state,
+			status: TransactionStatus.PENDING_WALLET,
+			message: message || ''
+		}));
+	const awaitApprovalTx = (hash: string, symbol: string | undefined) =>
+		update((state) => ({
+			...state,
+			hash: hash,
+			status: TransactionStatus.PENDING_APPROVAL,
+			message: `Approving ${symbol || 'token'} spend...`
+		}));
+	const awaitDeployTx = (hash: string) =>
+		update((state) => ({
+			...state,
+			hash: hash,
+			status: TransactionStatus.PENDING_DEPLOYMENT,
+			message: ''
+		}));
+	const transactionSuccess = (hash: string, message?: string) =>
+		update((state) => ({
+			...state,
+			status: TransactionStatus.SUCCESS,
+			hash: hash,
+			message: message || ''
+		}));
+	const transactionError = (message: TransactionErrorMessage, hash?: string) =>
+		update((state) => ({
+			...state,
+			status: TransactionStatus.ERROR,
+			error: message,
+			hash: hash || ''
+		}));
+
+	const handleDeploymentTransaction = async ({
+		config,
+		approvals,
+		deploymentCalldata,
+		orderbookAddress,
+		chainId
+	}: DeploymentTransactionArgs) => {
+		try {
+			await switchChain(config, { chainId });
+		} catch {
+			return transactionError(TransactionErrorMessage.SWITCH_CHAIN_FAILED);
+		}
+		for (const approval of approvals) {
+			let approvalHash: Hex;
+			try {
+				awaitWalletConfirmation(
+					`Please approve ${approval.symbol || approval.token} spend in your wallet...`
+				);
+				approvalHash = await sendTransaction(config, {
+					to: approval.token as `0x${string}`,
+					data: approval.calldata as `0x${string}`
+				});
+			} catch {
+				return transactionError(TransactionErrorMessage.USER_REJECTED_APPROVAL);
+			}
+			try {
+				awaitApprovalTx(approvalHash, approval.symbol);
+				await waitForTransactionReceipt(config, { hash: approvalHash });
+			} catch {
+				return transactionError(TransactionErrorMessage.APPROVAL_FAILED);
+			}
+		}
+
+		let hash: Hex;
+		try {
+			awaitWalletConfirmation('Please confirm deployment in your wallet...');
+			hash = await sendTransaction(config, {
+				to: orderbookAddress as `0x${string}`,
+				data: deploymentCalldata as `0x${string}`
+			});
+		} catch {
+			return transactionError(TransactionErrorMessage.USER_REJECTED_TRANSACTION);
+		}
+		try {
+			awaitDeployTx(hash);
+			await waitForTransactionReceipt(config, { hash });
+			return transactionSuccess(hash, 'Strategy deployed successfully!');
+		} catch {
+			return transactionError(TransactionErrorMessage.DEPLOYMENT_FAILED);
+		}
+	};
+
+	return {
+		subscribe,
+		reset,
+		handleDeploymentTransaction,
+		checkingWalletAllowance,
+		awaitWalletConfirmation,
+		awaitApprovalTx,
+		transactionSuccess,
+		transactionError
+	};
+};
+
+export default transactionStore();
diff --git a/packages/ui-components/src/lib/types/transaction.ts b/packages/ui-components/src/lib/types/transaction.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/webapp/src/__tests__/DeployModal.test.ts b/packages/webapp/src/__tests__/DeployModal.test.ts
new file mode 100644
index 000000000..f42f444e6
--- /dev/null
+++ b/packages/webapp/src/__tests__/DeployModal.test.ts
@@ -0,0 +1,59 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render } from '@testing-library/svelte';
+import DeployModal from '../lib/components/DeployModal.svelte';
+import { transactionStore } from '@rainlanguage/ui-components';
+import type { ComponentProps } from 'svelte';
+import { get } from 'svelte/store';
+
+export type DeployModalProps = ComponentProps<DeployModal>;
+const { mockTransactionStore } = await vi.hoisted(() => import('@rainlanguage/ui-components'));
+const { mockWagmiConfigStore } = await vi.hoisted(() => import('$lib/__mocks__/stores'));
+vi.mock('@rainlanguage/ui-components', async (importOriginal) => {
+	return {
+		...(await importOriginal()),
+		transactionStore: mockTransactionStore
+	};
+});
+
+vi.mock('$lib/stores/wagmi', () => {
+	return {
+		wagmiConfig: mockWagmiConfigStore
+	};
+});
+
+describe('DeployModal', () => {
+	const mockProps = {
+		open: true,
+		approvals: {
+			approvalCalldata: '0x',
+			token: '0x',
+			spender: '0x'
+		},
+		deploymentCalldata: {
+			calldata: '0x',
+			value: 0n
+		},
+		orderbookAddress: '0x123' as const,
+		chainId: 1
+	} as unknown as DeployModalProps;
+
+	beforeEach(() => {
+		vi.clearAllMocks();
+	});
+
+	it('renders and initiates transaction handling', () => {
+		const config = get(mockWagmiConfigStore);
+		const handleDeploymentTransactionSpy = vi.spyOn(
+			transactionStore,
+			'handleDeploymentTransaction'
+		);
+		render(DeployModal, { props: mockProps });
+		expect(handleDeploymentTransactionSpy).toHaveBeenCalledWith({
+			config: config,
+			approvals: mockProps.approvals,
+			deploymentCalldata: mockProps.deploymentCalldata,
+			orderbookAddress: mockProps.orderbookAddress,
+			chainId: mockProps.chainId
+		});
+	});
+});
diff --git a/packages/webapp/src/tests/Sidebar.test.ts b/packages/webapp/src/__tests__/Sidebar.test.ts
similarity index 97%
rename from packages/webapp/src/tests/Sidebar.test.ts
rename to packages/webapp/src/__tests__/Sidebar.test.ts
index d48f8bed7..c7ff736fe 100644
--- a/packages/webapp/src/tests/Sidebar.test.ts
+++ b/packages/webapp/src/__tests__/Sidebar.test.ts
@@ -10,7 +10,8 @@ vi.mock('@rainlanguage/ui-components', async () => {
 		logoLight: 'mock-logo-light.svg',
 		logoDark: 'mock-logo-dark.svg',
 		IconTelegram: MockComponent,
-		IconExternalLink: MockComponent
+		IconExternalLink: MockComponent,
+		WalletConnect: MockComponent
 	};
 });
 
diff --git a/packages/webapp/src/__tests__/TransactionModal.test.ts b/packages/webapp/src/__tests__/TransactionModal.test.ts
new file mode 100644
index 000000000..b05df31c1
--- /dev/null
+++ b/packages/webapp/src/__tests__/TransactionModal.test.ts
@@ -0,0 +1,133 @@
+import { render, screen, waitFor } from '@testing-library/svelte';
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import TransactionModal from '../lib/components/TransactionModal.svelte';
+import { TransactionStatus } from '@rainlanguage/ui-components';
+import userEvent from '@testing-library/user-event';
+
+// Add hoisted mock import
+const { mockTransactionStore } = await vi.hoisted(() => import('@rainlanguage/ui-components'));
+
+// Mock the transaction store
+vi.mock('@rainlanguage/ui-components', async (importOriginal) => {
+	return {
+		...((await importOriginal()) as object),
+		transactionStore: mockTransactionStore
+	};
+});
+
+describe('TransactionModal Component', () => {
+	const messages = {
+		success: 'Transaction Successful',
+		error: 'Transaction Failed',
+		pending: 'Transaction Pending'
+	};
+	const resetSpy = vi.spyOn(mockTransactionStore, 'reset');
+
+	beforeEach(() => {
+		resetSpy.mockClear();
+		mockTransactionStore.reset();
+	});
+
+	it('should render correctly in IDLE state', async () => {
+		render(TransactionModal, { props: { open: true, messages } });
+		expect(screen.queryByTestId('transaction-modal')).toBeInTheDocument();
+		// In IDLE state, modal should be empty
+		expect(screen.queryByText(messages.pending)).not.toBeInTheDocument();
+		expect(screen.queryByText(messages.success)).not.toBeInTheDocument();
+		expect(screen.queryByText(messages.error)).not.toBeInTheDocument();
+	});
+
+	it('should display an error when transaction fails', async () => {
+		const errorMessage = 'Transaction failed';
+		mockTransactionStore.mockSetSubscribeValue({
+			status: TransactionStatus.ERROR,
+			error: errorMessage,
+			hash: '0xMockTransactionHash'
+		});
+
+		render(TransactionModal, { props: { open: true, messages } });
+
+		await waitFor(() => {
+			expect(screen.getByTestId('error-icon')).toBeInTheDocument();
+			expect(screen.getByText(messages.error)).toBeInTheDocument();
+			expect(screen.getByText(errorMessage)).toBeInTheDocument();
+		});
+
+		// Test modal close behavior
+		const dismissButton = screen.getByText('DISMISS');
+		await userEvent.click(dismissButton);
+		expect(resetSpy).toHaveBeenCalled();
+	});
+
+	it('should display success message when transaction succeeds', async () => {
+		const successMessage = 'Transaction succeeded';
+		mockTransactionStore.mockSetSubscribeValue({
+			status: TransactionStatus.SUCCESS,
+			message: successMessage,
+			hash: '0xMockTransactionHash'
+		});
+
+		render(TransactionModal, { props: { open: true, messages } });
+
+		await waitFor(() => {
+			expect(screen.getByText('✅')).toBeInTheDocument();
+			expect(screen.getByText(messages.success)).toBeInTheDocument();
+			expect(screen.getByText(successMessage)).toBeInTheDocument();
+		});
+
+		const dismissButton = screen.getByText('DISMISS');
+		await userEvent.click(dismissButton);
+		expect(resetSpy).toHaveBeenCalled();
+	});
+
+	it('should display pending state with a spinner for pending transactions', async () => {
+		const pendingMessage = 'Waiting for wallet confirmation...';
+		mockTransactionStore.mockSetSubscribeValue({
+			status: TransactionStatus.PENDING_WALLET,
+			message: pendingMessage
+		});
+
+		render(TransactionModal, { props: { open: true, messages } });
+
+		await waitFor(() => {
+			expect(screen.getByText(messages.pending)).toBeInTheDocument();
+			expect(screen.getByText(pendingMessage)).toBeInTheDocument();
+			expect(document.querySelector('[role="status"]')).toBeInTheDocument();
+		});
+	});
+
+	it('should handle multiple statuses like CHECKING_ALLOWANCE and PENDING_APPROVAL', async () => {
+		const checkingMessage = 'Checking your allowance...';
+		mockTransactionStore.mockSetSubscribeValue({
+			status: TransactionStatus.CHECKING_ALLOWANCE,
+			message: checkingMessage
+		});
+
+		render(TransactionModal, { props: { open: true, messages } });
+
+		await waitFor(() => {
+			expect(screen.getByText(messages.pending)).toBeInTheDocument();
+			expect(screen.getByText(checkingMessage)).toBeInTheDocument();
+		});
+
+		const approvalMessage = 'Approving token spend...';
+		mockTransactionStore.mockSetSubscribeValue({
+			status: TransactionStatus.PENDING_APPROVAL,
+			message: approvalMessage
+		});
+
+		await waitFor(() => {
+			expect(screen.getByText(messages.pending)).toBeInTheDocument();
+			expect(screen.getByText(approvalMessage)).toBeInTheDocument();
+		});
+	});
+
+	it('should reset transaction store when modal is closed', async () => {
+		render(TransactionModal, { props: { open: true, messages } });
+
+		// Simulate closing the modal by changing the prop
+		await render(TransactionModal, { props: { open: false, messages } });
+
+		expect(resetSpy).toHaveBeenCalled();
+	});
+});
diff --git a/packages/webapp/src/lib/components/DeployModal.svelte b/packages/webapp/src/lib/components/DeployModal.svelte
new file mode 100644
index 000000000..c7017ed44
--- /dev/null
+++ b/packages/webapp/src/lib/components/DeployModal.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { transactionStore } from '@rainlanguage/ui-components';
+	import type { Hex } from 'viem';
+	import type {
+		ApprovalCalldataResult,
+		DepositAndAddOrderCalldataResult
+	} from '@rainlanguage/orderbook/js_api';
+	import { wagmiConfig } from '$lib/stores/wagmi';
+	import TransactionModal from './TransactionModal.svelte';
+
+	export let open: boolean;
+	export let approvals: ApprovalCalldataResult;
+	export let deploymentCalldata: DepositAndAddOrderCalldataResult;
+	export let orderbookAddress: Hex;
+	export let chainId: number;
+
+	const messages = {
+		success: 'Your strategy was successfully deployed.',
+		pending: 'Deploying your strategy...',
+		error: 'Could not deploy strategy.'
+	};
+
+	transactionStore.handleDeploymentTransaction({
+		config: $wagmiConfig,
+		approvals,
+		deploymentCalldata,
+		orderbookAddress,
+		chainId
+	});
+</script>
+
+<TransactionModal bind:open {messages} />
diff --git a/packages/webapp/src/lib/components/Sidebar.svelte b/packages/webapp/src/lib/components/Sidebar.svelte
index c436c9ad4..732c04bfb 100644
--- a/packages/webapp/src/lib/components/Sidebar.svelte
+++ b/packages/webapp/src/lib/components/Sidebar.svelte
@@ -20,13 +20,15 @@
 		IconTelegram,
 		IconExternalLink,
 		logoDark,
-		logoLight
+		logoLight,
+		WalletConnect
 	} from '@rainlanguage/ui-components';
-	import WalletConnect from './WalletConnect.svelte';
 
 	import { onMount } from 'svelte';
+	import { connected, appKitModal } from '$lib/stores/wagmi';
 	export let colorTheme;
 	export let page;
+
 	let sideBarHidden: boolean = false;
 	let breakPoint: number = 1024;
 	let width: number;
@@ -102,7 +104,7 @@
 				</SidebarItem>
 			</SidebarGroup>
 			<SidebarGroup border>
-				<WalletConnect />
+				<WalletConnect {appKitModal} {connected} />
 			</SidebarGroup>
 			<SidebarGroup border>
 				<SidebarItem
diff --git a/packages/webapp/src/lib/components/TransactionModal.svelte b/packages/webapp/src/lib/components/TransactionModal.svelte
new file mode 100644
index 000000000..0adfb3e0c
--- /dev/null
+++ b/packages/webapp/src/lib/components/TransactionModal.svelte
@@ -0,0 +1,83 @@
+<script lang="ts">
+	import { Modal, Spinner, Button } from 'flowbite-svelte';
+	import { TransactionStatus } from '@rainlanguage/ui-components';
+	import { transactionStore } from '@rainlanguage/ui-components';
+
+	export let open: boolean;
+	export let messages: {
+		success: string;
+		error: string;
+		pending: string;
+	};
+
+	function handleClose() {
+		open = false;
+	}
+
+	$: if (!open) {
+		transactionStore.reset();
+	}
+</script>
+
+<Modal size="sm" class="bg-opacity-90 backdrop-blur-sm" bind:open data-testid="transaction-modal">
+	{#if $transactionStore.status !== TransactionStatus.IDLE}
+		<div class="flex flex-col items-center justify-center gap-2 p-4">
+			{#if $transactionStore.status === TransactionStatus.ERROR}
+				<div
+					class="mb-4 flex h-16 w-16 items-center justify-center rounded-full border-2 border-red-400 bg-red-100 dark:bg-red-900"
+					data-testid="error-icon"
+				>
+					<h1 class="text-lg md:text-2xl">❌</h1>
+				</div>
+				<p
+					class="w-full whitespace-pre-wrap break-words text-center text-lg font-semibold text-gray-900 dark:text-white"
+				>
+					{messages.error}
+				</p>
+				<p
+					class="w-full whitespace-pre-wrap break-words text-center font-normal text-gray-900 dark:text-white"
+				>
+					{$transactionStore.error}
+				</p>
+				<Button on:click={handleClose} class="mt-4">DISMISS</Button>
+			{:else if $transactionStore.status === TransactionStatus.SUCCESS}
+				<div
+					class="mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-green-100 dark:bg-green-900"
+				>
+					<h1 class="text-lg md:text-2xl">✅</h1>
+				</div>
+				<div class="flex flex-col gap-4 text-center">
+					<p
+						class="w-full whitespace-pre-wrap break-words text-center text-lg font-semibold text-gray-900 dark:text-white"
+					>
+						{messages.success}
+					</p>
+					{#if $transactionStore.message}
+						<p
+							class="w-full whitespace-pre-wrap break-words text-center text-sm font-normal text-gray-900 dark:text-white"
+						>
+							{$transactionStore.message}
+						</p>
+					{/if}
+				</div>
+				<Button on:click={handleClose} class="mt-4">DISMISS</Button>
+			{:else}
+				<div
+					class="mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-primary-100 dark:bg-primary-900"
+				>
+					<Spinner color="blue" size={10} />
+				</div>
+				<p
+					class="w-full whitespace-pre-wrap break-words text-center text-lg font-semibold text-gray-900 dark:text-white"
+				>
+					{messages.pending}
+				</p>
+				<p
+					class="w-full whitespace-pre-wrap break-words text-center font-normal text-gray-900 dark:text-white"
+				>
+					{$transactionStore.message}
+				</p>
+			{/if}
+		</div>
+	{/if}
+</Modal>
diff --git a/packages/webapp/src/lib/services/modal.ts b/packages/webapp/src/lib/services/modal.ts
new file mode 100644
index 000000000..997ff73fb
--- /dev/null
+++ b/packages/webapp/src/lib/services/modal.ts
@@ -0,0 +1,17 @@
+import DeployModal from '$lib/components/DeployModal.svelte';
+import type {
+	ApprovalCalldataResult,
+	DepositAndAddOrderCalldataResult
+} from '@rainlanguage/orderbook/js_api';
+import type { Hex } from 'viem';
+
+export type DeployModalProps = {
+	approvals: ApprovalCalldataResult;
+	deploymentCalldata: DepositAndAddOrderCalldataResult;
+	orderbookAddress: Hex;
+	chainId: number;
+};
+
+export const handleDeployModal = (args: DeployModalProps) => {
+	new DeployModal({ target: document.body, props: { open: true, ...args } });
+};
diff --git a/packages/webapp/src/routes/+layout.ts b/packages/webapp/src/routes/+layout.ts
index 43a317565..6f1bb44bc 100644
--- a/packages/webapp/src/routes/+layout.ts
+++ b/packages/webapp/src/routes/+layout.ts
@@ -13,7 +13,7 @@ export interface LayoutData {
 	stores: AppStoresInterface;
 }
 
-export const load = async () => {
+export const load = async ({ fetch }) => {
 	const response = await fetch(
 		'https://raw.githubusercontent.com/rainlanguage/rain.strategies/refs/heads/main/settings.json'
 	);
diff --git a/packages/webapp/src/routes/deploy/+layout.svelte b/packages/webapp/src/routes/deploy/+layout.svelte
new file mode 100644
index 000000000..67a5aaa59
--- /dev/null
+++ b/packages/webapp/src/routes/deploy/+layout.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { PageHeader } from '@rainlanguage/ui-components';
+	import { page } from '$app/stores';
+</script>
+
+<PageHeader title={$page.data.name || 'Deploy'} pathname={$page.url.pathname} />
+<slot />
diff --git a/packages/webapp/src/routes/deploy/+layout.ts b/packages/webapp/src/routes/deploy/+layout.ts
new file mode 100644
index 000000000..1eaecf512
--- /dev/null
+++ b/packages/webapp/src/routes/deploy/+layout.ts
@@ -0,0 +1,26 @@
+import type { LayoutLoad } from './$types';
+
+export const load: LayoutLoad = async ({ fetch }) => {
+	try {
+		const response = await fetch(
+			'https://raw.githubusercontent.com/rainlanguage/rain.strategies/refs/heads/main/strategies/dev/registry'
+		);
+		const files = await response.text();
+
+		const _files = files
+			.split('\n')
+			.filter((line: string) => line.trim())
+			.map((line: string) => {
+				const [name, url] = line.split(' ');
+				return { name, url };
+			});
+
+		return {
+			files: _files
+		};
+	} catch {
+		return {
+			files: []
+		};
+	}
+};
diff --git a/packages/webapp/src/routes/deploy/+page.svelte b/packages/webapp/src/routes/deploy/+page.svelte
index 6dddc7b03..dcaf8debb 100644
--- a/packages/webapp/src/routes/deploy/+page.svelte
+++ b/packages/webapp/src/routes/deploy/+page.svelte
@@ -1,11 +1,65 @@
 <script lang="ts">
-	import { DeploymentSteps } from '@rainlanguage/ui-components';
-	import WalletConnect from '$lib/components/WalletConnect.svelte';
-	import { wagmiConfig, connected } from '$lib/stores/wagmi';
+	import { StrategySection } from '@rainlanguage/ui-components';
+	import { page } from '$app/stores';
+	import { Button, Input, Spinner, Toggle } from 'flowbite-svelte';
+	const { files } = $page.data;
+
+	let _registryUrl = '';
+	let _files = files;
+
+	let error = '';
+	let errorDetails = '';
+	let loading = false;
+	let advancedMode = false;
+
+	const getFileRegistry = async (url: string) => {
+		loading = true;
+		try {
+			const response = await fetch(url);
+			const files = await response.text();
+			_files = files
+				.split('\n')
+				.filter((line) => line.trim())
+				.map((line) => {
+					const [name, url] = line.split(' ');
+					return { name, url };
+				});
+		} catch (e) {
+			error = 'Error getting registry';
+			errorDetails = e instanceof Error ? e.message : 'Unknown error';
+		}
+		loading = false;
+		return;
+	};
 </script>
 
-<div class="flex flex-col justify-center pb-12">
-	<DeploymentSteps {wagmiConfig} wagmiConnected={connected}>
-		<WalletConnect slot="wallet-connect" />
-	</DeploymentSteps>
+<div class="flex flex-col">
+	<div class="flex h-12 w-full items-center justify-end gap-4">
+		{#if advancedMode}
+			<Input
+				id="strategy-url"
+				type="url"
+				placeholder="Enter URL to raw strategy registry file"
+				bind:value={_registryUrl}
+				class="max-w-lg"
+			/>
+			<Button on:click={() => getFileRegistry(_registryUrl)}>Load</Button>
+		{/if}
+		<Toggle on:change={() => (advancedMode = !advancedMode)}>
+			{'Advanced Mode'}
+		</Toggle>
+	</div>
+
+	{#if loading}
+		<Spinner />
+	{:else if error}
+		<p>{error}</p>
+		<p>{errorDetails}</p>
+	{:else if _files.length > 0}
+		<div class="flex flex-col gap-36">
+			{#each _files as { name, url }}
+				<StrategySection strategyUrl={url} strategyName={name} />
+			{/each}
+		</div>
+	{/if}
 </div>
diff --git a/packages/webapp/src/routes/deploy/[strategyName]/+page.ts b/packages/webapp/src/routes/deploy/[strategyName]/+page.ts
new file mode 100644
index 000000000..f2323f5fd
--- /dev/null
+++ b/packages/webapp/src/routes/deploy/[strategyName]/+page.ts
@@ -0,0 +1,5 @@
+import { redirect } from '@sveltejs/kit';
+
+export const load = () => {
+	throw redirect(307, '/deploy');
+};
diff --git a/packages/webapp/src/routes/deploy/[strategyName]/[deploymentKey]/+page.svelte b/packages/webapp/src/routes/deploy/[strategyName]/[deploymentKey]/+page.svelte
new file mode 100644
index 000000000..588138fda
--- /dev/null
+++ b/packages/webapp/src/routes/deploy/[strategyName]/[deploymentKey]/+page.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import { goto } from '$app/navigation';
+	import { DeploymentPage } from '@rainlanguage/ui-components';
+	import { wagmiConfig, connected, appKitModal } from '$lib/stores/wagmi';
+	import { handleDeployModal } from '$lib/services/modal';
+	const { dotrain, key, name, description } = $page.data;
+
+	if (!dotrain || !key) {
+		setTimeout(() => {
+			goto('/deploy');
+		}, 5000);
+	}
+</script>
+
+{#if !dotrain || !key}
+	<div>Deployment not found. Redirecting to deployments page...</div>
+{:else}
+	<DeploymentPage
+		{dotrain}
+		{key}
+		{name}
+		{description}
+		{wagmiConfig}
+		wagmiConnected={connected}
+		{appKitModal}
+		{handleDeployModal}
+	/>
+{/if}
diff --git a/packages/webapp/src/routes/deploy/[strategyName]/[deploymentKey]/+page.ts b/packages/webapp/src/routes/deploy/[strategyName]/[deploymentKey]/+page.ts
new file mode 100644
index 000000000..6793faf70
--- /dev/null
+++ b/packages/webapp/src/routes/deploy/[strategyName]/[deploymentKey]/+page.ts
@@ -0,0 +1,68 @@
+import { DotrainOrderGui } from '@rainlanguage/orderbook/js_api';
+
+export const load = async ({
+	fetch,
+	params
+}: {
+	fetch: typeof globalThis.fetch;
+	params: { strategyName: string; deploymentKey: string };
+}) => {
+	try {
+		const response = await fetch(
+			'https://raw.githubusercontent.com/rainlanguage/rain.strategies/refs/heads/main/strategies/dev/registry'
+		);
+		const files = await response.text();
+		const { strategyName, deploymentKey } = params;
+
+		const fileList = files
+			.split('\n')
+			.filter(Boolean)
+			.map((line: string) => {
+				const [name, url] = line.split(' ');
+				return { name, url };
+			});
+
+		const strategy = fileList.find((file: { name: string }) => file.name === strategyName);
+
+		if (strategy) {
+			const dotrainResponse = await fetch(strategy.url);
+			const dotrain = await dotrainResponse.text();
+
+			const deploymentWithDetails = await DotrainOrderGui.getDeploymentDetails(dotrain);
+
+			const deployments = Array.from(deploymentWithDetails, ([key, details]) => ({
+				key,
+				...details
+			}));
+			const deployment = deployments.find(
+				(deployment: { key: string }) => deployment.key === deploymentKey
+			);
+
+			if (!deployment) {
+				throw new Error(`Deployment ${deploymentKey} not found`);
+			}
+
+			const { key, name, description } = deployment;
+
+			return {
+				dotrain,
+				strategyName,
+				key,
+				name,
+				description
+			};
+		} else {
+			return {
+				dotrain: null,
+				strategyName: null,
+				deploymentKey: null
+			};
+		}
+	} catch {
+		return {
+			dotrain: null,
+			strategyName: null,
+			deploymentKey: null
+		};
+	}
+};