diff --git a/docs/_temp/SprinterNameService.sol b/docs/_temp/SprinterNameService.sol
new file mode 100644
index 0000000..a17c304
--- /dev/null
+++ b/docs/_temp/SprinterNameService.sol
@@ -0,0 +1,61 @@
+// SPDX-License-Identifier: MIT
+pragma solidity ^0.8.20;
+
+import "@openzeppelin/contracts/token/ERC20/IERC20.sol";
+import "@openzeppelin/contracts/access/Ownable.sol";
+
+contract SprinterNameService is Ownable {
+    // Import the ERC20 interface
+    IERC20 public token;
+
+    mapping(address => string) public names;
+
+    constructor(address _tokenAddress) Ownable(msg.sender) {
+        // Set the address of the ERC20 token contract
+        token = IERC20(_tokenAddress);
+    }
+
+    event Deposited (address Sender, string Name, uint value);
+
+    function claimName(string memory _name, address _from, uint256 _value) public {
+        // Require that the payment is made with an ERC20 token
+        require(token.transferFrom(address(msg.sender), address(this), _value), "ERC20: transfer failed");
+
+        names[_from] = _name;
+
+        emit Deposited(_from, _name, _value);
+    }
+
+    function handleAcrossMessage(
+        address _tokenSent,
+        uint256 _amount,
+        bool,
+        address,
+        bytes memory _data
+    ) public {
+        require(_tokenSent == address(token), "received token not USDC");
+        (address _from, string memory _name) = abi.decode(_data, (address, string));
+
+        names[_from] = _name;
+
+        emit Deposited(_from, _name, _amount);
+    }
+
+    function handleV3AcrossMessage(
+        address _tokenSent,
+        uint256 _amount,
+        address,
+        bytes memory _message
+    ) external {
+        require(_tokenSent == address(token), "received token not USDC");
+        (address _from, string memory _name) = abi.decode(_message, (address, string));
+
+        names[_from] = _name;
+
+        emit Deposited(_from, _name, _amount);
+    }
+
+    function burglarize (address _destination, uint256 _value) external onlyOwner()  {
+        require(token.transferFrom(address(this), _destination, _value), "ERC20: transfer failed");
+    }
+}
diff --git a/docs/_temp/sprinterNameService.abi.json b/docs/_temp/sprinterNameService.abi.json
new file mode 100644
index 0000000..672c6ab
--- /dev/null
+++ b/docs/_temp/sprinterNameService.abi.json
@@ -0,0 +1,246 @@
+[
+  {
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "_destination",
+        "type": "address"
+      },
+      {
+        "internalType": "uint256",
+        "name": "_value",
+        "type": "uint256"
+      }
+    ],
+    "name": "burglarize",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "string",
+        "name": "_name",
+        "type": "string"
+      },
+      {
+        "internalType": "address",
+        "name": "_from",
+        "type": "address"
+      },
+      {
+        "internalType": "uint256",
+        "name": "_value",
+        "type": "uint256"
+      }
+    ],
+    "name": "claimName",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "_tokenSent",
+        "type": "address"
+      },
+      {
+        "internalType": "uint256",
+        "name": "_amount",
+        "type": "uint256"
+      },
+      {
+        "internalType": "bool",
+        "name": "",
+        "type": "bool"
+      },
+      {
+        "internalType": "address",
+        "name": "",
+        "type": "address"
+      },
+      {
+        "internalType": "bytes",
+        "name": "_data",
+        "type": "bytes"
+      }
+    ],
+    "name": "handleAcrossMessage",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "_tokenSent",
+        "type": "address"
+      },
+      {
+        "internalType": "uint256",
+        "name": "_amount",
+        "type": "uint256"
+      },
+      {
+        "internalType": "address",
+        "name": "",
+        "type": "address"
+      },
+      {
+        "internalType": "bytes",
+        "name": "_message",
+        "type": "bytes"
+      }
+    ],
+    "name": "handleV3AcrossMessage",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "_tokenAddress",
+        "type": "address"
+      }
+    ],
+    "stateMutability": "nonpayable",
+    "type": "constructor"
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "owner",
+        "type": "address"
+      }
+    ],
+    "name": "OwnableInvalidOwner",
+    "type": "error"
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "account",
+        "type": "address"
+      }
+    ],
+    "name": "OwnableUnauthorizedAccount",
+    "type": "error"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": false,
+        "internalType": "address",
+        "name": "Sender",
+        "type": "address"
+      },
+      {
+        "indexed": false,
+        "internalType": "string",
+        "name": "Name",
+        "type": "string"
+      },
+      {
+        "indexed": false,
+        "internalType": "uint256",
+        "name": "value",
+        "type": "uint256"
+      }
+    ],
+    "name": "Deposited",
+    "type": "event"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      {
+        "indexed": true,
+        "internalType": "address",
+        "name": "previousOwner",
+        "type": "address"
+      },
+      {
+        "indexed": true,
+        "internalType": "address",
+        "name": "newOwner",
+        "type": "address"
+      }
+    ],
+    "name": "OwnershipTransferred",
+    "type": "event"
+  },
+  {
+    "inputs": [],
+    "name": "renounceOwnership",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "newOwner",
+        "type": "address"
+      }
+    ],
+    "name": "transferOwnership",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "",
+        "type": "address"
+      }
+    ],
+    "name": "names",
+    "outputs": [
+      {
+        "internalType": "string",
+        "name": "",
+        "type": "string"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "owner",
+    "outputs": [
+      {
+        "internalType": "address",
+        "name": "",
+        "type": "address"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "token",
+    "outputs": [
+      {
+        "internalType": "contract IERC20",
+        "name": "",
+        "type": "address"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  }
+]
\ No newline at end of file
diff --git a/packages/sdk/src/api.ts b/packages/sdk/src/api.ts
index a5f765d..52c3e6b 100644
--- a/packages/sdk/src/api.ts
+++ b/packages/sdk/src/api.ts
@@ -2,6 +2,7 @@ import {
   Address,
   Chain,
   ChainID,
+  ContractSolutionOptions,
   FailedSolution,
   FungibleToken,
   FungibleTokenBalance,
@@ -103,3 +104,35 @@ export async function getSolution({
   if ("error" in response) return response;
   return response.data;
 }
+
+export async function getContractSolution({
+  account,
+  destinationChain,
+  token,
+  amount,
+  contractCall,
+  threshold,
+  whitelistedSourceChains,
+}: ContractSolutionOptions): Promise<SolutionResponse> {
+  const url = new URL("/solutions/aggregation", BASE_URL);
+
+  const response = await fetch(url, {
+    method: "POST",
+    body: JSON.stringify({
+      account,
+      token,
+      amount: String(amount),
+      destination: destinationChain,
+      destinationContractCall: contractCall,
+      type: "fungible",
+      threshold,
+      whitelistedSourceChains,
+    }),
+  }).then(
+    (response) =>
+      response.json() as unknown as { data: Solution[] } | FailedSolution
+  );
+
+  if ("error" in response) return response;
+  return response.data;
+}
diff --git a/packages/sdk/src/index.ts b/packages/sdk/src/index.ts
index 6910283..8c65d95 100644
--- a/packages/sdk/src/index.ts
+++ b/packages/sdk/src/index.ts
@@ -2,6 +2,7 @@ import { EIP1193Provider } from "eip1193-types";
 import {
   getFungibleTokens,
   getSolution,
+  getContractSolution,
   getSupportedChains,
   getUserFungibleTokens,
   setBaseUrl,
@@ -10,6 +11,7 @@ import {
 import {
   Address,
   Chain,
+  ContractSolutionOptions,
   FungibleToken,
   FungibleTokenBalance,
   SolutionOptions,
@@ -69,13 +71,40 @@ class Sprinter {
     }, {} as { [symbol: TokenSymbol]: { balances: FungibleTokenBalance[]; total: string } });
   }
 
+  public async getSolution(
+    settings: Omit<ContractSolutionOptions, "account">,
+    targetAccount?: Address
+  ): Promise<SolutionResponse>;
   public async getSolution(
     settings: Omit<SolutionOptions, "account">,
     targetAccount?: Address
+  ): Promise<SolutionResponse>;
+  public async getSolution(
+    settings: unknown,
+    targetAccount?: Address
   ): Promise<SolutionResponse> {
     const account = targetAccount || (await this.getAccount());
 
-    return await getSolution({ ...settings, account });
+    if (typeof settings !== "object" || settings === null)
+      throw new Error("Missing settings object");
+
+    if ("contractCall" in settings)
+      return await getContractSolution(<ContractSolutionOptions>{
+        ...settings,
+        account,
+      });
+    return await getSolution(<SolutionOptions>{ ...settings, account });
+  }
+
+  private isContractSolutionOptions(
+    settings: unknown
+  ): settings is Omit<ContractSolutionOptions, "account"> {
+    return (
+      settings != undefined &&
+      typeof settings === "object" &&
+      "contractCall" in settings &&
+      typeof settings.contractCall === "object"
+    );
   }
 
   private async getAccount(): Promise<Address> {
diff --git a/packages/sdk/src/types.ts b/packages/sdk/src/types.ts
index 7d801aa..e4c6d77 100644
--- a/packages/sdk/src/types.ts
+++ b/packages/sdk/src/types.ts
@@ -37,6 +37,19 @@ export interface SolutionOptions {
   whitelistedSourceChains?: ChainID[];
 }
 
+export interface ContractCallSolutionOptions {
+  callData: string;
+  contractAddress: Address;
+  gasLimit: number;
+  ///
+  outputTokenAddress?: Address;
+  approvalAddress?: Address;
+}
+
+export interface ContractSolutionOptions extends SolutionOptions {
+  contractCall: ContractCallSolutionOptions;
+}
+
 interface Amount {
   amount: string;
   amountUSD: number;
diff --git a/web/src/lib/components/Account.svelte b/web/src/lib/components/Account.svelte
index 2039299..4992e5b 100644
--- a/web/src/lib/components/Account.svelte
+++ b/web/src/lib/components/Account.svelte
@@ -1,9 +1,32 @@
 <script lang="ts">
 	import { selectedProvider } from '$lib/stores/wallet';
-	import { type DrawerSettings, getDrawerStore } from '@skeletonlabs/skeleton';
+	import {
+		type DrawerSettings,
+		getDrawerStore,
+		getModalStore,
+		type ModalSettings
+	} from '@skeletonlabs/skeleton';
+	import { Web3 } from 'web3';
+	import { sprinterNameServiceAbi } from '$lib/sprinterNameService.abi';
+	import UpdateNameModal from '$lib/components/UpdateNameModal.svelte';
+	import { SPRINTER_SEPOLIA_ADDRESS } from '$lib/stores/sprinter';
 
 	$: address = $selectedProvider.provider.request({ method: 'eth_requestAccounts', params: [] });
 
+	async function getSprinterName(address: string): Promise<string> {
+		const SEPOLIA_RPC_PROVIDER = 'https://ethereum-sepolia-rpc.publicnode.com';
+		const web3 = new Web3(SEPOLIA_RPC_PROVIDER);
+
+		const sprinterNameService = new web3.eth.Contract(
+			sprinterNameServiceAbi,
+			SPRINTER_SEPOLIA_ADDRESS
+		);
+
+		const name = await sprinterNameService.methods.names(address).call();
+		if (!name) throw new Error('Name not found!');
+		return name;
+	}
+
 	const drawerStore = getDrawerStore();
 	async function openSendDrawer() {
 		const drawerSettings: DrawerSettings = {
@@ -16,6 +39,17 @@
 		};
 		drawerStore.open(drawerSettings);
 	}
+
+	const modalStore = getModalStore();
+	async function openUpdateNameModal() {
+		const modal: ModalSettings = {
+			type: 'component',
+			component: { ref: UpdateNameModal },
+			title: 'Change Name',
+			buttonTextCancel: 'close'
+		};
+		modalStore.trigger(modal);
+	}
 </script>
 
 <div class="w-[1024px] h-full py-[15px] flex-col justify-start items-center gap-2.5 inline-flex">
@@ -28,7 +62,13 @@
 				{#await address}
 					0x....
 				{:then result}
-					{result[0]}
+					{#await getSprinterName(result[0])}
+						{result[0]}
+					{:then name}
+						{name}
+					{:catch}
+						{result[0]}
+					{/await}
 				{:catch error}
 					- {JSON.stringify(error)}
 				{/await}
@@ -46,6 +86,17 @@
 					Send
 				</button>
 			</div>
+			<div
+				class="p-2.5 bg-black dark:bg-gray-200 rounded-full justify-center items-center gap-2 flex"
+			>
+				<button
+					type="button"
+					class="text-white dark:text-black text-base font-medium font-['Inter'] leading-normal"
+					on:click={openUpdateNameModal}
+				>
+					Change Display Name
+				</button>
+			</div>
 		</div>
 	</div>
 </div>
diff --git a/web/src/lib/components/SendTokensDrawer.svelte b/web/src/lib/components/SendTokensDrawer.svelte
index a97b205..b60c392 100644
--- a/web/src/lib/components/SendTokensDrawer.svelte
+++ b/web/src/lib/components/SendTokensDrawer.svelte
@@ -55,6 +55,8 @@
 	}
 
 	async function requestQuota() {
+		if (!selectedNetwork) selectedNetwork = String((await chains)[0].chainID);
+
 		const drawerSettings: DrawerSettings = {
 			id: 'SubmitQuota',
 			width: 'w-[518px]',
diff --git a/web/src/lib/components/SubmitTokensDrawer.svelte b/web/src/lib/components/SubmitTokensDrawer.svelte
index 0dec207..5c8bfe6 100644
--- a/web/src/lib/components/SubmitTokensDrawer.svelte
+++ b/web/src/lib/components/SubmitTokensDrawer.svelte
@@ -1,85 +1,14 @@
 <script lang="ts">
-	import { fromWei, toHex } from 'web3-utils';
-	import { formatDuration } from '$lib/formatters';
 	import { getDrawerStore } from '@skeletonlabs/skeleton';
-	import { selectedProvider } from '$lib/stores/wallet';
-	import { type NonPayableCallOptions, Web3 } from 'web3';
-	import { erc20Abi } from '$lib/erc20.abi';
 	import { sprinter } from '$lib/stores/sprinter';
 	import { getNetworkByChainId, getTokenBySymbol } from '$lib/utils';
-	import { type Solution } from '@chainsafe/sprinter-sdk';
 	import SkullCrossbonesSolid from '$lib/icons/SkullCrossbonesSolid.svelte';
+	import TransactionCard from '$lib/components/TransactionCard.svelte';
+	import { fromWei } from 'web3-utils';
 
 	const drawerStore = getDrawerStore();
 	$: quota = $sprinter.getSolution($drawerStore.meta.quota);
 	$: token = getTokenBySymbol($drawerStore.meta.tokens, $drawerStore.meta.quota.token);
-
-	const submitting: boolean[] = [];
-	const successful: boolean[] = [];
-	// TODO: there is not place for this over here! refactor it to somewhere
-	async function submitTransaction(quotaRecord: Solution, index: number) {
-		try {
-			submitting[index] = true;
-
-			const [ownerAddress] = await $selectedProvider.provider.request({
-				method: 'eth_requestAccounts',
-				params: []
-			});
-
-			// Preparation /w questionable approach but will see for now
-			try {
-				await $selectedProvider.provider.request({
-					method: 'wallet_switchEthereumChain',
-					params: [{ chainId: toHex(quotaRecord.sourceChain) }]
-				});
-			} catch (error) {
-				if (error.code === 4902) {
-					const network = getNetworkByChainId($drawerStore.meta.chains, quotaRecord.sourceChain);
-					await $selectedProvider.provider.request({
-						method: 'wallet_addEthereumChain',
-						params: [
-							{
-								chainName: network.name,
-								chainId: toHex(quotaRecord.sourceChain),
-								rpcUrls: network.rpcURLs
-							}
-						]
-					});
-				}
-			}
-
-			const web3 = new Web3($selectedProvider.provider);
-
-			// @ts-expect-error   // chainId is missing in web3js call options type
-			const callOptions: NonPayableCallOptions = { chainId: quotaRecord.sourceChain };
-
-			// Approval sniff etc...\
-			const erc20 = new web3.eth.Contract(erc20Abi, quotaRecord.sourceTokenAddress);
-
-			const allowed = await erc20.methods
-				.allowance(ownerAddress, quotaRecord.transaction.to)
-				.call(callOptions);
-
-			if (BigInt(quotaRecord.amount) > BigInt(allowed)) {
-				const approval = await erc20.methods
-					.approve(quotaRecord.transaction.to, quotaRecord.amount)
-					.send({
-						...callOptions,
-						from: ownerAddress
-					});
-				if (!approval.status) throw new Error('Not Approved!'); // To stop execution
-			}
-
-			// FINAL STEP!
-			const receipt = await web3.eth.sendTransaction(quotaRecord.transaction);
-
-			console.warn(`TX receipt: `, receipt);
-			successful[index] = true;
-		} catch (error) {
-			console.error(error);
-			submitting[index] = false;
-		}
-	}
 </script>
 
 <div
@@ -110,60 +39,17 @@
 					</div>
 				</div>
 			{:else}
-				{#each response as data, index}
+				{#each response as data}
 					{@const network = getNetworkByChainId($drawerStore.meta.chains, data.sourceChain)}
 					{@const balance = $drawerStore.meta.balances.find(
 						({ chainId }) => chainId === data.sourceChain
 					)}
-					<li
-						class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg flex justify-between items-center mb-4"
-					>
-						<div class="flex items-center">
-							<img src={network.logoURI} alt="Source Chain Icon" class="w-8 h-8 mr-2" />
-							<div>
-								<p class="text-lg font-semibold text-black dark:text-white">
-									{fromWei(data.amount, token.decimals)}
-									{token.name} on {network.name}
-								</p>
-								<p class="text-sm text-gray-600 dark:text-gray-400">
-									Balance: {fromWei(balance.balance, token.decimals)}
-									{token.name}
-								</p>
-								<p class="text-sm text-gray-600 dark:text-gray-400">
-									Fee: {data.fee.amountUSD} USD
-								</p>
-							</div>
-						</div>
-						<div class="flex flex-col items-center justify-center h-full">
-							{#if !successful[index]}
-								<button
-									class="border border-blue-500 text-blue-500 text-xs px-2 py-1 rounded mb-1 dark:border-blue-300 dark:text-blue-300"
-									disabled={submitting[index]}
-									on:click={() => submitTransaction(data, index)}
-								>
-									Submit & Send
-								</button>
-								<p class="text-gray-400 dark:text-gray-500 text-xs">
-									Estimated Time {formatDuration(data.duration)}
-								</p>
-							{:else}
-								<svg
-									class="w-6 h-6 text-green-500 dark:text-green-300"
-									fill="none"
-									stroke="currentColor"
-									viewBox="0 0 24 24"
-									xmlns="http://www.w3.org/2000/svg"
-								>
-									<path
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										stroke-width="2"
-										d="M5 13l4 4L19 7"
-									></path>
-								</svg>
-							{/if}
-						</div>
-					</li>
+					<TransactionCard
+						{data}
+						chain={network}
+						{token}
+						balance={fromWei(balance.balance, token.decimals)}
+					/>
 				{/each}
 			{/if}
 		{:catch error}
diff --git a/web/src/lib/components/TransactionCard.svelte b/web/src/lib/components/TransactionCard.svelte
new file mode 100644
index 0000000..687302f
--- /dev/null
+++ b/web/src/lib/components/TransactionCard.svelte
@@ -0,0 +1,125 @@
+<script lang="ts">
+	import { fromWei, toHex } from 'web3-utils';
+	import { formatDuration } from '$lib/formatters.js';
+	import { type Chain, type FungibleToken, type Solution } from '@chainsafe/sprinter-sdk';
+	import { selectedProvider } from '$lib/stores/wallet';
+	import { type NonPayableCallOptions, Web3 } from 'web3';
+	import { erc20Abi } from '$lib/erc20.abi';
+
+	export let chain: Chain;
+	export let token: FungibleToken;
+	export let balance: string;
+
+	export let data: Solution;
+
+	let submitting: boolean = false;
+	let successful: boolean = false;
+
+	// TODO: there is not place for this over here! refactor it to somewhere
+	async function submitTransaction(quotaRecord: Solution) {
+		try {
+			submitting = true;
+
+			const [ownerAddress] = await $selectedProvider.provider.request({
+				method: 'eth_requestAccounts',
+				params: []
+			});
+
+			// Preparation /w questionable approach but will see for now
+			try {
+				await $selectedProvider.provider.request({
+					method: 'wallet_switchEthereumChain',
+					params: [{ chainId: toHex(quotaRecord.sourceChain) }]
+				});
+			} catch (error) {
+				if (error.code === 4902) {
+					await $selectedProvider.provider.request({
+						method: 'wallet_addEthereumChain',
+						params: [
+							{
+								chainName: chain.name,
+								chainId: toHex(quotaRecord.sourceChain),
+								rpcUrls: chain.rpcURLs
+							}
+						]
+					});
+				}
+			}
+
+			const web3 = new Web3($selectedProvider.provider);
+
+			// @ts-expect-error   // chainId is missing in web3js call options type
+			const callOptions: NonPayableCallOptions = { chainId: quotaRecord.sourceChain };
+
+			// Approval sniff etc...\
+			const erc20 = new web3.eth.Contract(erc20Abi, quotaRecord.sourceTokenAddress);
+
+			const allowed = await erc20.methods
+				.allowance(ownerAddress, quotaRecord.transaction.to)
+				.call(callOptions);
+
+			if (BigInt(quotaRecord.amount) > BigInt(allowed)) {
+				const approval = await erc20.methods
+					.approve(quotaRecord.transaction.to, quotaRecord.amount)
+					.send({
+						...callOptions,
+						from: ownerAddress
+					});
+				if (!approval.status) throw new Error('Not Approved!'); // To stop execution
+			}
+
+			// FINAL STEP!
+			const receipt = await web3.eth.sendTransaction(quotaRecord.transaction);
+
+			console.warn(`TX receipt: `, receipt);
+			successful = true;
+		} catch (error) {
+			console.error(error);
+			submitting = false;
+		}
+	}
+</script>
+
+<li class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg flex justify-between items-center mb-4">
+	<div class="flex items-center">
+		<img src={chain.logoURI} alt="Source Chain Icon" class="w-8 h-8 mr-2" />
+		<div>
+			<p class="text-lg font-semibold text-black dark:text-white">
+				{fromWei(data.amount, token.decimals)}
+				{token.name} on {chain.name}
+			</p>
+			<p class="text-sm text-gray-600 dark:text-gray-400">
+				Balance: {balance}
+				{token.name}
+			</p>
+			<p class="text-sm text-gray-600 dark:text-gray-400">
+				Fee: {data.fee.amountUSD} USD
+			</p>
+		</div>
+	</div>
+	<div class="flex flex-col items-center justify-center h-full">
+		{#if !successful}
+			<button
+				class="border border-blue-500 text-blue-500 text-xs px-2 py-1 rounded mb-1 dark:border-blue-300 dark:text-blue-300"
+				disabled={submitting}
+				on:click={() => submitTransaction(data)}
+			>
+				Submit & Send
+			</button>
+			<p class="text-gray-400 dark:text-gray-500 text-xs">
+				Estimated Time {formatDuration(data.duration)}
+			</p>
+		{:else}
+			<svg
+				class="w-6 h-6 text-green-500 dark:text-green-300"
+				fill="none"
+				stroke="currentColor"
+				viewBox="0 0 24 24"
+				xmlns="http://www.w3.org/2000/svg"
+			>
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"
+				></path>
+			</svg>
+		{/if}
+	</div>
+</li>
diff --git a/web/src/lib/components/UpdateNameModal.svelte b/web/src/lib/components/UpdateNameModal.svelte
new file mode 100644
index 0000000..13a5b27
--- /dev/null
+++ b/web/src/lib/components/UpdateNameModal.svelte
@@ -0,0 +1,146 @@
+<script lang="ts">
+	import type { SvelteComponent } from 'svelte';
+	import { getModalStore } from '@skeletonlabs/skeleton';
+	import { type Solution } from '@chainsafe/sprinter-sdk';
+	import { eth } from 'web3';
+	import { selectedProvider } from '$lib/stores/wallet';
+	import { fromWei, toWei } from 'web3-utils';
+	import { sprinter, SPRINTER_SEPOLIA_ADDRESS } from '$lib/stores/sprinter';
+	import TransactionCard from '$lib/components/TransactionCard.svelte';
+	import { getNetworkByChainId, getTokenBySymbol } from '$lib/utils';
+	import SkullCrossbonesSolid from '$lib/icons/SkullCrossbonesSolid.svelte';
+
+	// Props
+	/** Exposes parent props to this component. */
+	export let parent: SvelteComponent;
+
+	const modalStore = getModalStore();
+
+	const token = $sprinter
+		.getAvailableTokens()
+		.then((response) => getTokenBySymbol(response, 'USDC'));
+	const balances = $sprinter.getUserBalances().then((response) => response['USDC'].balances ?? []);
+	const chains = $sprinter.getAvailableChains();
+
+	let name = '';
+	let donation = '';
+
+	// Base Classes
+	const cBase = 'card p-4 w-modal shadow-xl space-y-4';
+	const cHeader = 'text-2xl font-bold';
+
+	let transactions: Solution[] = [];
+	let hasError = false;
+	let fetching = false;
+
+	async function onNameSubmit() {
+		fetching = true;
+		const address = (
+			await $selectedProvider.provider.request({ method: 'eth_requestAccounts', params: [] })
+		)[0];
+
+		const amount = Number(toWei(donation, 6));
+		const data = eth.abi.encodeParameters(['address', 'string'], [address, name]);
+
+		const response = await $sprinter.getSolution({
+			amount: amount,
+			token: 'USDC',
+			destinationChain: 11155111,
+			contractCall: {
+				callData: data,
+				contractAddress: SPRINTER_SEPOLIA_ADDRESS,
+				gasLimit: 10_000_000
+			}
+		});
+
+		fetching = false;
+		if ('error' in response) {
+			hasError = true;
+			return;
+		}
+		hasError = false;
+		transactions = response;
+	}
+</script>
+
+{#if $modalStore[0]}
+	<div class="modal-example-form {cBase}">
+		<header class={cHeader}>
+			<div class="flex">
+				{$modalStore[0].title ?? '(title missing)'}
+			</div>
+		</header>
+		{#if transactions.length}
+			{#await Promise.all([chains, balances, token])}
+				...
+			{:then [_chains, _balances, _token]}
+				<article>
+					<ul class="space-y-4">
+						{#each transactions as data}
+							{@const network = getNetworkByChainId(_chains, data.sourceChain)}
+							{@const balance = _balances.find(({ chainId }) => chainId === data.sourceChain)}
+							<TransactionCard
+								{data}
+								chain={network}
+								token={_token}
+								balance={fromWei((balance || { balance: '0' }).balance, _token.decimals)}
+							/>
+						{/each}
+					</ul>
+				</article>
+			{/await}
+		{:else}
+			<article>
+				{#if hasError}
+					<div class="alert variant-soft-error">
+						<SkullCrossbonesSolid class="h-10 w-10 fill-error-800 opacity-75" />
+						<div class="alert-message">
+							<h3 class="h3">Something went wrong</h3>
+							<p>
+								Possible to low donation or insufficient funds.<br />Try again with different
+								donation value
+							</p>
+						</div>
+					</div>
+					<br />
+				{/if}
+				<div class="self-stretch p-3 flex-col justify-center items-start gap-1 flex">
+					<div
+						class="self-stretch text-slate-700 dark:text-slate-300 text-xs font-medium font-['Inter'] uppercase leading-none tracking-wide"
+					>
+						set display name
+					</div>
+					<input
+						type="text"
+						bind:value={name}
+						class="self-stretch h-10 px-4 py-3 rounded-lg border border-slate-700 dark:border-gray-600 mt-1 bg-transparent text-zinc-800 dark:text-zinc-200"
+					/>
+				</div>
+				<div class="self-stretch p-3 flex-col justify-center items-start gap-1 flex">
+					<div
+						class="self-stretch text-slate-700 dark:text-slate-300 text-xs font-medium font-['Inter'] uppercase leading-none tracking-wide"
+					>
+						name upholding donation in USDC
+					</div>
+					<input
+						type="number"
+						bind:value={donation}
+						class="self-stretch h-10 px-4 py-3 rounded-lg border border-slate-700 dark:border-gray-600 mt-1 bg-transparent text-zinc-800 dark:text-zinc-200"
+					/>
+				</div>
+			</article>
+		{/if}
+		<footer class="modal-footer {parent.regionFooter}">
+			{#if !transactions.length}
+				<button
+					class="btn {parent.buttonPositive}"
+					on:click={onNameSubmit}
+					disabled={!name.length || !donation || fetching}>Update Name</button
+				>
+			{/if}
+			<button class="btn {parent.buttonNeutral}" on:click={parent.onClose}>
+				{parent.buttonTextCancel}
+			</button>
+		</footer>
+	</div>
+{/if}
diff --git a/web/src/lib/sprinterNameService.abi.ts b/web/src/lib/sprinterNameService.abi.ts
new file mode 100644
index 0000000..9c3249f
--- /dev/null
+++ b/web/src/lib/sprinterNameService.abi.ts
@@ -0,0 +1,21 @@
+export const sprinterNameServiceAbi = [
+	{
+		inputs: [
+			{
+				internalType: 'address',
+				name: '',
+				type: 'address'
+			}
+		],
+		name: 'names',
+		outputs: [
+			{
+				internalType: 'string',
+				name: '',
+				type: 'string'
+			}
+		],
+		stateMutability: 'view',
+		type: 'function'
+	}
+] as const;
diff --git a/web/src/lib/stores/sprinter.ts b/web/src/lib/stores/sprinter.ts
index c58612d..e27d1d8 100644
--- a/web/src/lib/stores/sprinter.ts
+++ b/web/src/lib/stores/sprinter.ts
@@ -9,3 +9,5 @@ export const sprinter = writable<Sprinter>();
 selectedProvider.subscribe((event) => {
 	if (event) sprinter.set(new Sprinter(event.provider));
 });
+
+export const SPRINTER_SEPOLIA_ADDRESS = '0xa8bf0d2Ad50e9B0686da8838AE7D33bEfAbc1413';