diff --git a/packages/bridge-ui-v2/src/app.config.ts b/packages/bridge-ui-v2/src/app.config.ts
index 6f833e2df8..7af1819cea 100644
--- a/packages/bridge-ui-v2/src/app.config.ts
+++ b/packages/bridge-ui-v2/src/app.config.ts
@@ -2,9 +2,9 @@ export const recommentProcessingFee = {
   ethGasLimit: BigInt(900_000),
   erc20NotDeployedGasLimit: BigInt(3_100_000),
   erc20DeployedGasLimit: BigInt(1_100_000),
-  erc721NotDeployedGasLimit: BigInt(3_400_000),
+  erc721NotDeployedGasLimit: BigInt(2_400_000),
   erc721DeployedGasLimit: BigInt(1_100_000),
-  erc1155NotDeployedGasLimit: BigInt(4_000_000),
+  erc1155NotDeployedGasLimit: BigInt(2_600_000),
   erc1155DeployedGasLimit: BigInt(1_100_000),
 };
 
@@ -15,9 +15,14 @@ export const processingFeeComponent = {
 
 export const bridgeService = {
   noOwnerGasLimit: BigInt(140_000),
-  noTokenDeployedGasLimit: BigInt(3_000_000),
+  noERC20TokenDeployedGasLimit: BigInt(3_000_000),
   erc20GasLimitThreshold: BigInt(2_500_000),
-  unpredictableGasLimit: BigInt(1_000_000),
+
+  noERC721TokenDeployedGasLimit: BigInt(2_400_000),
+  erc721GasLimitThreshold: BigInt(3_000_000),
+
+  noERC1155TokenDeployedGasLimit: BigInt(2_600_000),
+  erc1155GasLimitThreshold: BigInt(3_000_000),
 };
 
 export const pendingTransaction = {
diff --git a/packages/bridge-ui-v2/src/components/Bridge/Actions.svelte b/packages/bridge-ui-v2/src/components/Bridge/Actions.svelte
index 3b286a8659..548b555d7a 100644
--- a/packages/bridge-ui-v2/src/components/Bridge/Actions.svelte
+++ b/packages/bridge-ui-v2/src/components/Bridge/Actions.svelte
@@ -3,7 +3,7 @@
 
   import { Button } from '$components/Button';
   import { Icon } from '$components/Icon';
-  import { TokenType } from '$libs/token';
+  import { type NFT, TokenType } from '$libs/token';
   import { account, network } from '$stores';
 
   import {
@@ -13,6 +13,7 @@
     errorComputingBalance,
     insufficientAllowance,
     insufficientBalance,
+    notApproved,
     recipientAddress,
     selectedToken,
     tokenBalance,
@@ -50,18 +51,40 @@
 
   // Conditions for approve/bridge steps
   $: isSelectedERC20 = $selectedToken && $selectedToken.type === TokenType.ERC20;
-  $: isTokenApproved = isSelectedERC20 && $enteredAmount && !$insufficientAllowance && !$validatingAmount;
+
+  $: isTokenApproved =
+    $selectedToken?.type === TokenType.ERC20
+      ? isSelectedERC20 && $enteredAmount && !$insufficientAllowance && !$validatingAmount
+      : $selectedToken?.type === TokenType.ERC721 || $selectedToken?.type === TokenType.ERC1155
+      ? allTokensApproved
+      : false;
+
+  // Check if all NFTs are approved
+  $: allTokensApproved =
+    $selectedToken?.type === TokenType.ERC721 || $selectedToken?.type === TokenType.ERC1155
+      ? $notApproved.get(($selectedToken as NFT).tokenId)
+      : false;
 
   // Conditions to disable/enable buttons
-  $: disableApprove = canDoNothing || !$insufficientAllowance || $validatingAmount || approving;
-  $: disableBridge = canDoNothing || $insufficientAllowance || $insufficientBalance || $validatingAmount || bridging;
+  $: disableApprove =
+    $selectedToken?.type === TokenType.ERC20
+      ? canDoNothing || $insufficientBalance || $validatingAmount || approving || isTokenApproved
+      : $selectedToken?.type === TokenType.ERC721
+      ? allTokensApproved || approving
+      : $selectedToken?.type === TokenType.ERC1155
+      ? allTokensApproved || approving
+      : approving;
 
-  // General loading state
-  // $: loading = approving || bridging;
+  $: disableBridge =
+    $selectedToken?.type === TokenType.ERC20
+      ? canDoNothing || $insufficientAllowance || $insufficientBalance || $validatingAmount || bridging
+      : $selectedToken?.type === TokenType.ERC721 || $selectedToken?.type === TokenType.ERC1155
+      ? !allTokensApproved
+      : bridging || !hasAddress || !hasNetworks || !hasBalance || !$selectedToken || !$enteredAmount;
 </script>
 
 <div class="f-between-center w-full gap-4">
-  {#if isSelectedERC20}
+  {#if $selectedToken && $selectedToken.type !== TokenType.ETH}
     <Button
       type="primary"
       class="px-[28px] py-[14px] rounded-full flex-1"
@@ -81,7 +104,6 @@
     </Button>
     <Icon type="arrow-right" />
   {/if}
-
   <Button
     type="primary"
     class="px-[28px] py-[14px] rounded-full flex-1 text-white"
diff --git a/packages/bridge-ui-v2/src/components/Bridge/AddressInput/state.ts b/packages/bridge-ui-v2/src/components/Bridge/AddressInput/state.ts
index 5ba71e8ea8..a6c3794ad9 100644
--- a/packages/bridge-ui-v2/src/components/Bridge/AddressInput/state.ts
+++ b/packages/bridge-ui-v2/src/components/Bridge/AddressInput/state.ts
@@ -1,7 +1,7 @@
 export enum AddressInputState {
-  Default = 'default',
-  Valid = 'valid',
-  Invalid = 'invalid',
-  TooShort = 'too_short',
-  Validating = 'validating',
+  Default,
+  Valid,
+  Invalid,
+  TooShort,
+  Validating,
 }
diff --git a/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte b/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte
index 00ce1931bb..aba3f29fb8 100644
--- a/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte
+++ b/packages/bridge-ui-v2/src/components/Bridge/Bridge.svelte
@@ -25,11 +25,15 @@
     bridges,
     type BridgeTransaction,
     type ERC20BridgeArgs,
+    type ERC721BridgeArgs,
+    type ERC1155BridgeArgs,
     type ETHBridgeArgs,
     MessageStatus,
   } from '$libs/bridge';
   import { hasBridge } from '$libs/bridge/bridges';
   import type { ERC20Bridge } from '$libs/bridge/ERC20Bridge';
+  import type { ERC721Bridge } from '$libs/bridge/ERC721Bridge';
+  import type { ERC1155Bridge } from '$libs/bridge/ERC1155Bridge';
   import { fetchNFTs } from '$libs/bridge/fetchNFTs';
   import {
     ApproveError,
@@ -53,7 +57,8 @@
   import AddressInput from './AddressInput/AddressInput.svelte';
   import { AddressInputState } from './AddressInput/state';
   import Amount from './Amount.svelte';
-  import IdInput from './IDInput.svelte';
+  import IdInput from './IDInput/IDInput.svelte';
+  import { IDInputState } from './IDInput/state';
   import { ProcessingFee } from './ProcessingFee';
   import Recipient from './Recipient.svelte';
   import {
@@ -61,6 +66,7 @@
     bridgeService,
     destNetwork as destinationChain,
     enteredAmount,
+    notApproved,
     processingFee,
     recipientAddress,
     selectedToken,
@@ -121,53 +127,142 @@
   async function approve() {
     if (!$selectedToken || !$network || !$destinationChain) return;
 
-    const erc20Bridge = bridges.ERC20 as ERC20Bridge;
-
     try {
-      const walletClient = await getConnectedWallet($network.id);
+      if ($selectedToken.type === TokenType.ERC721) {
+        const erc721Bridge = bridges[$selectedToken.type] as ERC721Bridge;
+        const walletClient = await getConnectedWallet($network.id);
 
-      const tokenAddress = await getAddress({
-        token: $selectedToken,
-        srcChainId: $network.id,
-        destChainId: $destinationChain.id,
-      });
+        const tokenAddress = $selectedToken.addresses[$network.id];
 
-      if (!tokenAddress) {
-        throw new Error('token address not found');
+        if (!tokenAddress) {
+          throw new Error('token address not found');
+        }
+
+        const spenderAddress = routingContractsMap[$network.id][$destinationChain.id].erc721VaultAddress;
+
+        const tokenIds = nftIdArray
+          ? nftIdArray.map((num) => BigInt(num))
+          : selectedNFT.map((nft) => BigInt(nft.tokenId));
+
+        const txHash = await erc721Bridge.approve({
+          tokenAddress,
+          spenderAddress,
+          tokenIds,
+          wallet: walletClient,
+        });
+
+        const { explorer } = chainConfig[$network.id].urls;
+
+        infoToast(
+          $t('bridge.actions.approve.tx', {
+            values: {
+              token: $selectedToken.symbol,
+              url: `${explorer}/tx/${txHash}`,
+            },
+          }),
+        );
+
+        // await pendingTransactions.add(txHash, $network.id);
+
+        successToast(
+          $t('bridge.actions.approve.success', {
+            values: {
+              token: $selectedToken.symbol,
+            },
+          }),
+        );
       }
+      if ($selectedToken.type === TokenType.ERC1155) {
+        const erc1155Bridge = bridges[$selectedToken.type] as ERC1155Bridge;
+        const walletClient = await getConnectedWallet($network.id);
 
-      const spenderAddress = routingContractsMap[$network.id][$destinationChain.id].erc20VaultAddress;
+        const tokenAddress = $selectedToken.addresses[$network.id];
 
-      const txHash = await erc20Bridge.approve({
-        tokenAddress,
-        spenderAddress,
-        amount: $enteredAmount,
-        wallet: walletClient,
-      });
+        if (!tokenAddress) {
+          throw new Error('token address not found');
+        }
 
-      const { explorer } = chainConfig[$network.id].urls;
+        const spenderAddress = routingContractsMap[$network.id][$destinationChain.id].erc1155VaultAddress;
 
-      infoToast(
-        $t('bridge.actions.approve.tx', {
-          values: {
-            token: $selectedToken.symbol,
-            url: `${explorer}/tx/${txHash}`,
-          },
-        }),
-      );
+        const tokenIds = nftIdArray
+          ? nftIdArray.map((num) => BigInt(num))
+          : selectedNFT.map((nft) => BigInt(nft.tokenId));
 
-      await pendingTransactions.add(txHash, $network.id);
+        const txHash = await erc1155Bridge.approve({
+          tokenAddress,
+          spenderAddress,
+          tokenIds,
+          wallet: walletClient,
+        });
 
-      successToast(
-        $t('bridge.actions.approve.success', {
-          values: {
-            token: $selectedToken.symbol,
-          },
-        }),
-      );
+        const { explorer } = chainConfig[$network.id].urls;
 
-      // Let's run the validation again, which will update UI
-      amountComponent.validateAmount();
+        infoToast(
+          $t('bridge.actions.approve.tx', {
+            values: {
+              token: $selectedToken.symbol,
+              url: `${explorer}/tx/${txHash}`,
+            },
+          }),
+        );
+
+        await pendingTransactions.add(txHash, $network.id);
+
+        successToast(
+          $t('bridge.actions.approve.success', {
+            values: {
+              token: $selectedToken.symbol,
+            },
+          }),
+        );
+      }
+      if ($selectedToken.type === TokenType.ERC20) {
+        const erc20Bridge = bridges.ERC20 as ERC20Bridge;
+        const walletClient = await getConnectedWallet($network.id);
+
+        const tokenAddress = await getAddress({
+          token: $selectedToken,
+          srcChainId: $network.id,
+          destChainId: $destinationChain.id,
+        });
+
+        if (!tokenAddress) {
+          throw new Error('token address not found');
+        }
+
+        const spenderAddress = routingContractsMap[$network.id][$destinationChain.id].erc20VaultAddress;
+
+        const txHash = await erc20Bridge.approve({
+          tokenAddress,
+          spenderAddress,
+          amount: $enteredAmount,
+          wallet: walletClient,
+        });
+
+        const { explorer } = chainConfig[$network.id].urls;
+
+        infoToast(
+          $t('bridge.actions.approve.tx', {
+            values: {
+              token: $selectedToken.symbol,
+              url: `${explorer}/tx/${txHash}`,
+            },
+          }),
+        );
+
+        await pendingTransactions.add(txHash, $network.id);
+
+        successToast(
+          $t('bridge.actions.approve.success', {
+            values: {
+              token: $selectedToken.symbol,
+            },
+          }),
+        );
+
+        // Let's run the validation again, which will update UI
+        amountComponent.validateAmount();
+      }
     } catch (err) {
       console.error(err);
 
@@ -248,10 +343,58 @@
           break;
         }
         case TokenType.ERC721:
-          // todo: implement
+          {
+            //TODO: only handles single NFTs for now
+            const tokenAddress = selectedNFT[0].addresses[$network.id];
+            const tokenVaultAddress = routingContractsMap[$network.id][$destinationChain.id].erc721VaultAddress;
+
+            const tokenIds = nftIdArray
+              ? nftIdArray.map((num) => BigInt(num))
+              : selectedNFT.map((nft) => BigInt(nft.tokenId));
+
+            const isTokenAlreadyDeployed = await isDeployedCrossChain({
+              token: $selectedToken,
+              srcChainId: $network.id,
+              destChainId: $destinationChain.id,
+            });
+
+            bridgeArgs = {
+              ...bridgeArgs,
+              token: tokenAddress,
+              tokenVaultAddress,
+              isTokenAlreadyDeployed,
+              tokenIds,
+              amounts: [BigInt(0)], // ERC721 is always 0
+            } as ERC721BridgeArgs;
+          }
+
           break;
         case TokenType.ERC1155:
-          // todo: implement
+          {
+            //TODO: only handles single NFTs for now
+            const tokenAddress = selectedNFT[0].addresses[$network.id];
+            const tokenVaultAddress = routingContractsMap[$network.id][$destinationChain.id].erc1155VaultAddress;
+
+            const tokenIds = nftIdArray
+              ? nftIdArray.map((num) => BigInt(num))
+              : selectedNFT.map((nft) => BigInt(nft.tokenId));
+
+            const isTokenAlreadyDeployed = await isDeployedCrossChain({
+              token: $selectedToken,
+              srcChainId: $network.id,
+              destChainId: $destinationChain.id,
+            });
+
+            bridgeArgs = {
+              ...bridgeArgs,
+              token: tokenAddress,
+              tokenVaultAddress,
+              isTokenAlreadyDeployed,
+              tokenIds,
+              amounts: [BigInt(1)], // TODO: Dynamic amount from user!
+              wallet: walletClient,
+            } as ERC1155BridgeArgs;
+          }
           break;
         default:
           throw new Error('invalid token type');
@@ -370,17 +513,20 @@
   let nftStepTitle: string;
   let nftStepDescription: string;
   let nextStepButtonText: string;
+
+  let manualNFTInput: boolean = false;
   let nftIdArray: number[];
   let enteredIds: string = '';
   let contractAddress: Address | '';
+
   let addressInputComponent: AddressInput;
   let nftIdInputComponent: IdInput;
+
   let addressInputState: AddressInputState = AddressInputState.Default;
   let isOwnerOfAllToken: boolean = false;
   let validating: boolean = false;
   let detectedTokenType: TokenType | null = null;
 
-  let manualNFTInput: boolean = false;
   let scanning: boolean = false;
   let scanned: boolean = false;
 
@@ -396,16 +542,13 @@
   function onAddressValidation(event: CustomEvent<{ isValidEthereumAddress: boolean; addr: Address }>) {
     const { isValidEthereumAddress, addr } = event.detail;
     addressInputState = AddressInputState.Validating;
-
     if (isValidEthereumAddress && typeof addr === 'string') {
       if (!$network?.id) throw new Error('network not found');
       const srcChainId = $network?.id;
       getTokenWithInfoFromAddress({ contractAddress: addr, srcChainId: srcChainId, owner: $account?.address })
         .then((token) => {
           if (!token) throw new Error('no token with info');
-
           addressInputState = AddressInputState.Valid;
-
           $selectedToken = token;
         })
         .catch((err) => {
@@ -442,6 +585,27 @@
     // TODO: implement
   };
 
+  const getStepText = () => {
+    if (activeStep === NFTSteps.REVIEW) {
+      return $t('common.confirm');
+    }
+    if (activeStep === NFTSteps.CONFIRM) {
+      return $t('common.ok');
+    } else {
+      return $t('common.continue');
+    }
+  };
+
+  function updateApproval(tokenId: number, approval: boolean) {
+    notApproved.update((currentMap) => {
+      // Clone the current map
+      const updatedMap = new Map(currentMap);
+      // Update the approval status of the specified tokenId
+      updatedMap.set(tokenId, approval);
+      return updatedMap;
+    });
+  }
+
   // Whenever the user switches bridge types, we should reset the forms
   $: $activeBridge && (resetForm(), (activeStep = NFTSteps.IMPORT));
 
@@ -449,13 +613,78 @@
     const stepKey = NFTSteps[activeStep].toLowerCase();
     nftStepTitle = $t(`bridge.title.nft.${stepKey}`);
     nftStepDescription = $t(`bridge.description.nft.${stepKey}`);
-    nextStepButtonText = activeStep === NFTSteps.CONFIRM ? $t('common.confirm') : $t('common.continue');
+    nextStepButtonText = getStepText();
   }
 
-  $: {
-    const stepKey = NFTSteps[activeStep].toLowerCase();
-    nftStepTitle = $t(`bridge.title.nft.${stepKey}`);
-    nftStepDescription = $t(`bridge.description.nft.${stepKey}`);
+  const manualImportAction = () => {
+    if (!$network?.id) throw new Error('network not found');
+    const srcChainId = $network?.id;
+    const tokenId = nftIdArray[0];
+
+    if (contractAddress && srcChainId)
+      getTokenWithInfoFromAddress({ contractAddress, srcChainId, owner: $account?.address, tokenId })
+        .then((token) => {
+          if (!token) throw new Error('no token with info');
+
+          selectedNFT = [token as NFT];
+          $selectedToken = token;
+        })
+        .catch((err) => {
+          console.error(err);
+          detectedTokenType = null;
+          addressInputState = AddressInputState.Invalid;
+        });
+    nextStep();
+  };
+
+  $: if (selectedNFT.length > 0) {
+    //TODO: this needs changing if we do batch transfers in the future:
+    // Update either selectedToken store to handle arrays or the actions to access a different store for NFTs
+    $selectedToken = selectedNFT[0];
+    const currentNetwork = $network?.id;
+    if (currentNetwork && $destinationChain?.id && $selectedToken) {
+      if (selectedNFT[0].type === TokenType.ERC721) {
+        const sourceTokenVault = routingContractsMap[currentNetwork][$destinationChain?.id].erc721VaultAddress;
+        const bridge = bridges[selectedNFT[0].type] as ERC721Bridge;
+        bridge
+          .requiresApproval({
+            tokenAddress: selectedNFT[0].addresses[currentNetwork],
+            spenderAddress: sourceTokenVault,
+            tokenId: BigInt(selectedNFT[0].tokenId),
+          })
+          .then((isApproved: boolean) => {
+            if (isApproved) {
+              updateApproval(selectedNFT[0].tokenId, false);
+            } else {
+              updateApproval(selectedNFT[0].tokenId, true);
+            }
+          })
+          .catch((err: Error) => {
+            console.error(err);
+            //TODO: handle error
+          });
+      } else if (selectedNFT[0].type === TokenType.ERC1155) {
+        const sourceTokenVault = routingContractsMap[currentNetwork][$destinationChain?.id].erc1155VaultAddress;
+        const bridge = bridges[selectedNFT[0].type] as ERC1155Bridge;
+        bridge
+          .isApprovedForAll({
+            tokenAddress: selectedNFT[0].addresses[currentNetwork],
+            spenderAddress: sourceTokenVault,
+            tokenId: BigInt(selectedNFT[0].tokenId),
+            owner: $account?.address,
+          })
+          .then((isApproved: boolean) => {
+            if (isApproved) {
+              updateApproval(selectedNFT[0].tokenId, true);
+            } else {
+              updateApproval(selectedNFT[0].tokenId, false);
+            }
+          })
+          .catch((err: Error) => {
+            console.error(err);
+          });
+      }
+    }
   }
 
   $: {
@@ -465,17 +694,27 @@
       validating = true;
 
       if ($account?.address && $network?.id && contractAddress)
-        isOwnerOfAllToken = await checkOwnership(
-          contractAddress,
-          detectedTokenType,
-          nftIdArray,
-          $account?.address,
-          $network?.id,
+        await checkOwnership(contractAddress, detectedTokenType, nftIdArray, $account?.address, $network?.id).then(
+          (result) => {
+            result;
+            isOwnerOfAllToken = result.every((value) => value.isOwner === true);
+          },
         );
       validating = false;
     })();
   }
 
+  let idInputState: IDInputState;
+  $: {
+    if (isOwnerOfAllToken && nftIdArray?.length > 0) {
+      idInputState = IDInputState.VALID;
+    } else if (!isOwnerOfAllToken && nftIdArray?.length > 0) {
+      idInputState = IDInputState.INVALID;
+    } else {
+      idInputState = IDInputState.DEFAULT;
+    }
+  }
+
   $: canProceed = manualNFTInput
     ? addressInputState === AddressInputState.Valid &&
       nftIdArray.length > 0 &&
@@ -557,10 +796,13 @@
                 <FlatAlert type="success" forceColumnFlow message="todo: valid erc1155" />
               {/if}
 
+              <!-- TODO: limit to config -->
               <IdInput
                 bind:this={nftIdInputComponent}
                 bind:enteredIds
                 bind:numbersArray={nftIdArray}
+                bind:state={idInputState}
+                limit={1}
                 class="bg-neutral-background border-0 h-[56px]" />
               <div class="min-h-[20px] !mt-3">
                 {#if !isOwnerOfAllToken && nftIdArray?.length > 0 && !validating}
@@ -577,25 +819,20 @@
             Automatic NFT Input 
           -->
             <div class="f-between-center w-full gap-4">
-              {#if !scanned}
-                <Button
-                  disabled={!canScan}
-                  loading={scanning}
-                  type="primary"
-                  class="px-[28px] py-[14px] rounded-full flex-1 text-white"
-                  on:click={scanForNFTs}>{$t('bridge.actions.nft_scan')}</Button>
-              {:else}
-                <Button
-                  disabled={!canScan}
-                  loading={scanning}
-                  type="neutral"
-                  class="px-[28px] py-[14px] rounded-full flex-1 bg-transparent !border border-primary-brand hover:border-primary-interactive-hover"
-                  on:click={scanForNFTs}>{$t('bridge.actions.nft_scan_again')}</Button>
-              {/if}
+              <Button
+                disabled={!canScan}
+                loading={scanning}
+                type={scanned ? 'neutral' : 'primary'}
+                class="px-[28px] py-[14px] rounded-full flex-1 text-white"
+                on:click={scanForNFTs}>
+                {#if !scanned}
+                  {$t('bridge.actions.nft_scan')}
+                {:else}
+                  {$t('bridge.actions.nft_scan_again')}
+                {/if}
+              </Button>
             </div>
-            <!-- 
-            Automatic NFT Input 
-            -->
+
             <div class="f-col w-full gap-4">
               {#if scanned}
                 <h2>{$t('bridge.nft.step.import.scan_screen.title')}</h2>
@@ -622,7 +859,6 @@
               <div class="font-bold">{$t('common.destination')}</div>
               <div><ChainSelector small value={$destinationChain} readOnly /></div>
             </div>
-
             <div class="flex justify-between mb-2">
               <div class="font-bold">{$t('common.contract_address')}</div>
               <div class="text-secondary-content">
@@ -656,6 +892,7 @@
               </div>
             </div>
           </div>
+
           <div class="h-sep" />
           <!-- 
             Recipient & Processing Fee
@@ -664,46 +901,51 @@
             <Recipient bind:this={recipientComponent} />
             <ProcessingFee bind:this={processingFeeComponent} />
           </div>
+
           <div class="h-sep" />
-          <div class="flex justify-between items-center w-full">
-            <div class="flex items-center gap-2">
-              <span>{$t('bridge.nft.step.review.your_tokens')}</span>
-              <ChainSelector small value={$network} readOnly />
-            </div>
-            <div class="flex gap-2">
-              <Button
-                disabled={true}
-                shape="circle"
-                type="neutral"
-                class="!w-9 !h-9 rounded-full"
-                on:click={searchNFTs}>
-                <Icon type="magnifier" fillClass="fill-primary-icon" size={24} vWidth={24} vHeight={24} />
-              </Button>
-              <IconFlipper
-                iconType1="list"
-                iconType2="cards"
-                selectedDefault="list"
-                class="bg-neutral w-9 h-9 rounded-full"
-                on:labelclick={changeNFTView} />
-              <!-- <Icon type="list" fillClass="fill-primary-icon" size={24} vWidth={24} vHeight={24} /> -->
-            </div>
-          </div>
-          {#if nftView === NFTView.LIST}
-            <NFTList bind:nfts={selectedNFT} chainId={$network?.id} viewOnly />
-          {:else if nftView === NFTView.CARDS}
-            <div class="rounded-[20px] bg-neutral min-h-[200px] w-full p-2 f-center">
-              {#each selectedNFT as nft}
-                <NFTCard {nft} />
-              {/each}
+          <!-- 
+            NFT List or Card View
+           -->
+          <section class="space-y-2">
+            <div class="flex justify-between items-center w-full">
+              <div class="flex items-center gap-2">
+                <span>{$t('bridge.nft.step.review.your_tokens')}</span>
+                <ChainSelector small value={$network} readOnly />
+              </div>
+              <div class="flex gap-2">
+                <Button
+                  disabled={true}
+                  shape="circle"
+                  type="neutral"
+                  class="!w-9 !h-9 rounded-full"
+                  on:click={searchNFTs}>
+                  <Icon type="magnifier" fillClass="fill-primary-icon" size={24} vWidth={24} vHeight={24} />
+                </Button>
+                <IconFlipper
+                  iconType1="list"
+                  iconType2="cards"
+                  selectedDefault="list"
+                  class="bg-neutral w-9 h-9 rounded-full"
+                  on:labelclick={changeNFTView} />
+                <!-- <Icon type="list" fillClass="fill-primary-icon" size={24} vWidth={24} vHeight={24} /> -->
+              </div>
             </div>
-          {/if}
+            {#if nftView === NFTView.LIST}
+              <NFTList bind:nfts={selectedNFT} chainId={$network?.id} viewOnly />
+            {:else if nftView === NFTView.CARDS}
+              <div class="rounded-[20px] bg-neutral min-h-[200px] w-full p-2 f-center">
+                {#each selectedNFT as nft}
+                  <NFTCard {nft} />
+                {/each}
+              </div>
+            {/if}
+          </section>
           <!-- CONFIRM STEP -->
         {:else if activeStep === NFTSteps.CONFIRM}
           <div class="f-between-center gap-4">
             <ChainSelectorWrapper />
           </div>
         {/if}
-
         <div class="h-sep" />
         <!-- 
           User Actions
@@ -716,13 +958,26 @@
               on:click={previousStep}>
               <span class="body-bold">{$t('common.edit')}</span></Button>
           {/if}
-          <Button
-            disabled={!canProceed}
-            type="primary"
-            class="px-[28px] py-[14px] rounded-full flex-1 text-white"
-            on:click={nextStep}><span class="body-bold">{nextStepButtonText}</span></Button>
+          {#if activeStep === NFTSteps.REVIEW}
+            <Actions {approve} {bridge} />
+          {:else if activeStep === NFTSteps.IMPORT}
+            {#if manualNFTInput}
+              <Button
+                disabled={!canProceed}
+                type="primary"
+                class="px-[28px] py-[14px] rounded-full flex-1 text-white"
+                on:click={manualImportAction}><span class="body-bold">{nextStepButtonText} (manual)</span></Button>
+            {:else}
+              <Button
+                disabled={!canProceed}
+                type="primary"
+                class="px-[28px] py-[14px] rounded-full flex-1 text-white"
+                on:click={nextStep}><span class="body-bold">{nextStepButtonText}</span></Button>
+            {/if}
+          {/if}
         </div>
-      </div></Card>
+      </div>
+    </Card>
   </div>
 {/if}
 
diff --git a/packages/bridge-ui-v2/src/components/Bridge/IDInput.svelte b/packages/bridge-ui-v2/src/components/Bridge/IDInput/IDInput.svelte
similarity index 80%
rename from packages/bridge-ui-v2/src/components/Bridge/IDInput.svelte
rename to packages/bridge-ui-v2/src/components/Bridge/IDInput/IDInput.svelte
index 6828c020c2..73ec630c97 100644
--- a/packages/bridge-ui-v2/src/components/Bridge/IDInput.svelte
+++ b/packages/bridge-ui-v2/src/components/Bridge/IDInput/IDInput.svelte
@@ -5,9 +5,13 @@
   import { Icon } from '$components/Icon';
   import { uid } from '$libs/util/uid';
 
+  import { IDInputState as State } from './state';
+
   export let numbersArray: number[] = [];
   export let isDisabled = false;
   export let enteredIds: string = '';
+  export let limit = 1;
+  export let state: State = State.DEFAULT;
 
   export const clearIds = () => {
     enteredIds = '';
@@ -21,12 +25,16 @@
 
   function validateInput(e: Event) {
     const target = e.target as HTMLInputElement;
-    enteredIds = target.value.replace(/\s+/g, '');
+    let newValue = target.value.replace(/\s+/g, '');
+    const inputArray = newValue.split(',');
+    if (inputArray.length > limit) {
+      newValue = inputArray.slice(0, limit).join(',');
+    }
+    enteredIds = newValue;
     dispatch('input', { enteredIds, numbersArray });
   }
 
   $: {
-    enteredIds = enteredIds.replace(/\s+/g, '');
     if (enteredIds === '' || enteredIds.endsWith(',')) {
       numbersArray = [];
     } else {
@@ -49,7 +57,8 @@
       placeholder={$t('inputs.token_id_input.placeholder')}
       bind:value={enteredIds}
       on:input={validateInput}
-      class="w-full input-box withValdiation py-6 pr-16 px-[26px] title-subsection-bold placeholder:text-tertiary-content {$$props.class}" />
+      class="w-full input-box withValdiation py-6 pr-16 px-[26px] title-subsection-bold placeholder:text-tertiary-content {$$props.class}
+      {state === State.VALID ? 'success' : state === State.DEFAULT ? '' : 'error'}" />
     <!-- /*state === State.Valid ? 'success' : state === State.Invalid ? 'error' : ''  -->
     <button class="absolute right-6 uppercase body-bold text-secondary-content" on:click={clearIds}>
       <Icon type="x-close-circle" fillClass="fill-primary-icon" size={24} />
diff --git a/packages/bridge-ui-v2/src/components/Bridge/IDInput/state.ts b/packages/bridge-ui-v2/src/components/Bridge/IDInput/state.ts
new file mode 100644
index 0000000000..175037ca78
--- /dev/null
+++ b/packages/bridge-ui-v2/src/components/Bridge/IDInput/state.ts
@@ -0,0 +1,7 @@
+export enum IDInputState {
+  DEFAULT,
+  VALID,
+  INVALID,
+  VALIDATING,
+  LIMIT_REACHED,
+}
diff --git a/packages/bridge-ui-v2/src/components/Bridge/state.ts b/packages/bridge-ui-v2/src/components/Bridge/state.ts
index 7b9c406ee7..0a3df3e0b4 100644
--- a/packages/bridge-ui-v2/src/components/Bridge/state.ts
+++ b/packages/bridge-ui-v2/src/components/Bridge/state.ts
@@ -3,7 +3,7 @@ import { derived, writable } from 'svelte/store';
 
 import { bridges } from '$libs/bridge';
 import { chains } from '$libs/chain';
-import type { Token } from '$libs/token';
+import type { NFT, Token } from '$libs/token';
 
 import { type BridgeType, BridgeTypes } from './types';
 
@@ -17,7 +17,7 @@ import { type BridgeType, BridgeTypes } from './types';
 // prevent other components outside the Bridge from accessing this store.
 
 export const activeBridge = writable<BridgeType>(BridgeTypes.FUNGIBLE);
-export const selectedToken = writable<Maybe<Token>>(null);
+export const selectedToken = writable<Maybe<Token | NFT>>(null);
 export const tokenBalance = writable<Maybe<FetchBalanceResult>>(null);
 export const enteredAmount = writable<bigint>(BigInt(0));
 export const destNetwork = writable<Maybe<Chain>>(null);
@@ -43,5 +43,8 @@ export const errorComputingBalance = writable<boolean>(false);
 export const insufficientBalance = writable<boolean>(false);
 export const insufficientAllowance = writable<boolean>(false);
 
+// ERC721 needs a tokenID to be approved before bridging
+export const notApproved = writable(new Map<number, boolean>());
+
 // Derived state
 export const bridgeService = derived(selectedToken, (token) => (token ? bridges[token.type] : null));
diff --git a/packages/bridge-ui-v2/src/components/NFTList/NFTList.svelte b/packages/bridge-ui-v2/src/components/NFTList/NFTList.svelte
index 1c1e7aa100..45e78b32ef 100644
--- a/packages/bridge-ui-v2/src/components/NFTList/NFTList.svelte
+++ b/packages/bridge-ui-v2/src/components/NFTList/NFTList.svelte
@@ -83,8 +83,6 @@
               <div class="token-ids my-2">
                 {#each nftsGroup as nft}
                   {@const collectionAddress = nft.addresses[chainId]}
-                  <!-- {@const tokenImage = fetchNFTImage(nft)} -->
-
                   {#if collectionAddress === undefined}
                     <div>TODO: Address for {nft.name} is undefined</div>
                   {:else}
@@ -98,14 +96,10 @@
                       {selectNFT} />
                   {/if}
                 {/each}
-                {#if nftsGroup.length > 2}
-                  <div class="h-sep" />
-                {/if}
               </div>
             {/if}
           </div>
-
-          <!-- -->
+          <div class="h-sep" />
         {/each}
       {/if}
     </div>
diff --git a/packages/bridge-ui-v2/src/components/Transactions/Transaction.svelte b/packages/bridge-ui-v2/src/components/Transactions/Transaction.svelte
index 18c0fc1520..63eef4127b 100644
--- a/packages/bridge-ui-v2/src/components/Transactions/Transaction.svelte
+++ b/packages/bridge-ui-v2/src/components/Transactions/Transaction.svelte
@@ -1,12 +1,13 @@
 <script lang="ts">
   import { createEventDispatcher } from 'svelte';
   import { t } from 'svelte-i18n';
-  import { formatEther } from 'viem';
+  import { formatEther, formatUnits } from 'viem';
 
   import { chainConfig } from '$chainConfig';
   import { DesktopOrLarger } from '$components/DesktopOrLarger';
   import { Icon } from '$components/Icon';
   import { type BridgeTransaction, MessageStatus } from '$libs/bridge';
+  import { TokenType } from '$libs/token';
 
   import ChainSymbolName from './ChainSymbolName.svelte';
   import InsufficientFunds from './InsufficientFunds.svelte';
@@ -65,7 +66,15 @@
       <ChainSymbolName chainId={item.destChainId} />
     </div>
     <div class="w-1/5 py-2 flex flex-col justify-center">
-      {formatEther(item.amount ? item.amount : BigInt(0))}
+      {#if item.tokenType === TokenType.ERC20}
+        {formatUnits(item.amount ? item.amount : BigInt(0), item.decimals)}
+      {:else if item.tokenType === TokenType.ERC721}
+        {item.amount}
+      {:else if item.tokenType === TokenType.ERC1155}
+        {item.amount}
+      {:else if item.tokenType === TokenType.ETH}
+        {formatEther(item.amount ? item.amount : BigInt(0))}
+      {/if}
       {item.symbol}
     </div>
   {:else}
diff --git a/packages/bridge-ui-v2/src/libs/bridge/ERC1155Bridge.ts b/packages/bridge-ui-v2/src/libs/bridge/ERC1155Bridge.ts
index b40573ad14..2c6b4062e9 100644
--- a/packages/bridge-ui-v2/src/libs/bridge/ERC1155Bridge.ts
+++ b/packages/bridge-ui-v2/src/libs/bridge/ERC1155Bridge.ts
@@ -1,14 +1,88 @@
-import type { Hash, Hex } from 'viem';
+import { getContract } from '@wagmi/core';
+import { type Hash, UserRejectedRequestError } from 'viem';
+
+import { erc1155ABI, erc1155VaultABI } from '$abi';
+import { bridgeService } from '$config';
+import { ApproveError, NotApprovedError, SendERC1155Error } from '$libs/error';
+import type { BridgeProver } from '$libs/proof';
+import { getLogger } from '$libs/util/logger';
 
 import { Bridge } from './Bridge';
+import type { ERC1155BridgeArgs, NFTApproveArgs, NFTBridgeTransferOp, RequireApprovalArgs } from './types';
+
+const log = getLogger('ERC1155Bridge');
 
 export class ERC1155Bridge extends Bridge {
-  async estimateGas(): Promise<bigint> {
-    return Promise.resolve(BigInt(0));
+  constructor(prover: BridgeProver) {
+    super(prover);
   }
 
-  async bridge(): Promise<Hex> {
-    return Promise.resolve('0x');
+  async isApprovedForAll({ tokenAddress, spenderAddress, owner }: RequireApprovalArgs) {
+    if (!owner) {
+      throw new Error('Owner is required for ERC1155 approval check');
+    }
+
+    const tokenContract = getContract({
+      abi: erc1155ABI,
+      address: tokenAddress,
+    });
+
+    log('Checking approval');
+    const isApprovedForAll = await tokenContract.read.isApprovedForAll([owner, spenderAddress]);
+
+    log(` ${spenderAddress} is approved for all: ${isApprovedForAll}`);
+    return isApprovedForAll;
+  }
+
+  async estimateGas(args: ERC1155BridgeArgs): Promise<bigint> {
+    const { tokenVaultContract, sendERC1155Args } = await ERC1155Bridge._prepareTransaction(args);
+    const { fee: value } = sendERC1155Args;
+
+    log('Estimating gas for sendERC1155 call with value', value);
+
+    const estimatedGas = tokenVaultContract.estimateGas.sendToken([sendERC1155Args], { value });
+
+    log('Gas estimated', estimatedGas);
+
+    return estimatedGas;
+  }
+
+  async bridge(args: ERC1155BridgeArgs) {
+    const { token, tokenVaultAddress, tokenIds, wallet } = args;
+    const { tokenVaultContract, sendERC1155Args } = await ERC1155Bridge._prepareTransaction(args);
+    const { fee: value } = sendERC1155Args;
+
+    // const tokenIdsWithoutApproval: bigint[] = [];
+
+    const tokenId = tokenIds[0]; // TODO: support multiple tokenIds
+
+    const isApprovedForAll = await this.isApprovedForAll({
+      tokenAddress: token,
+      spenderAddress: tokenVaultAddress,
+      tokenId: tokenId,
+      owner: wallet.account.address,
+    });
+
+    if (!isApprovedForAll) {
+      throw new NotApprovedError(`Not approved for all for token`);
+    }
+
+    try {
+      log('Sending ERC1155 with fee', value);
+      log('Sending ERC1155 with args', sendERC1155Args);
+
+      const tx = await tokenVaultContract.write.sendToken([sendERC1155Args], { value });
+
+      log('ERC1155 sent', tx);
+
+      return tx;
+    } catch (err) {
+      console.error(err);
+      if (`${err}`.includes('denied transaction signature')) {
+        throw new UserRejectedRequestError(err as Error);
+      }
+      throw new SendERC1155Error('failed to bridge ERC1155 token', { cause: err });
+    }
   }
 
   async claim() {
@@ -18,4 +92,95 @@ export class ERC1155Bridge extends Bridge {
   async release() {
     return Promise.resolve('0x' as Hash);
   }
+
+  async approve(args: NFTApproveArgs) {
+    const { tokenAddress, spenderAddress, wallet, tokenIds } = args;
+
+    const tokenId = tokenIds[0]; // TODO: support multiple tokenIds
+
+    const isApprovedForAll = await this.isApprovedForAll({
+      tokenAddress,
+      spenderAddress,
+      tokenId: tokenId,
+      owner: wallet.account.address,
+    });
+
+    log(`Is approved for all: ${isApprovedForAll}`);
+
+    if (!isApprovedForAll) {
+      log(`No allowance required for the token ${tokenId}`);
+      throw new NotApprovedError(`Not approved for all`);
+    }
+
+    const tokenContract = getContract({
+      walletClient: wallet,
+      abi: erc1155ABI,
+      address: tokenAddress,
+    });
+
+    try {
+      log(`Calling approve for spender "${spenderAddress}" for token`, tokenIds);
+
+      const txHash = await tokenContract.write.setApprovalForAll([spenderAddress, true]);
+
+      log('Transaction hash for approve call', txHash);
+
+      return txHash;
+    } catch (err) {
+      console.error(err);
+
+      if (`${err}`.includes('denied transaction signature')) {
+        throw new UserRejectedRequestError(err as Error);
+      }
+
+      throw new ApproveError('failed to approve ERC1155 token', { cause: err });
+    }
+  }
+
+  private static async _prepareTransaction(args: ERC1155BridgeArgs) {
+    const {
+      to,
+      amount,
+      wallet,
+      destChainId,
+      token,
+      fee,
+      tokenVaultAddress,
+      isTokenAlreadyDeployed,
+      memo = '',
+      tokenIds,
+      amounts,
+    } = args;
+
+    const tokenVaultContract = getContract({
+      walletClient: wallet,
+      abi: erc1155VaultABI,
+      address: tokenVaultAddress,
+    });
+
+    const refundTo = wallet.account.address;
+
+    const gasLimit = !isTokenAlreadyDeployed
+      ? BigInt(bridgeService.noERC1155TokenDeployedGasLimit)
+      : fee > 0
+      ? bridgeService.noOwnerGasLimit
+      : BigInt(0);
+
+    const sendERC1155Args: NFTBridgeTransferOp = {
+      destChainId: BigInt(destChainId),
+      to,
+      token,
+      amount,
+      gasLimit,
+      fee,
+      refundTo,
+      memo,
+      tokenIds,
+      amounts,
+    };
+
+    log('Preparing transaction with args', sendERC1155Args);
+
+    return { tokenVaultContract, sendERC1155Args };
+  }
 }
diff --git a/packages/bridge-ui-v2/src/libs/bridge/ERC20Bridge.ts b/packages/bridge-ui-v2/src/libs/bridge/ERC20Bridge.ts
index fb87ce1408..1722d1068f 100644
--- a/packages/bridge-ui-v2/src/libs/bridge/ERC20Bridge.ts
+++ b/packages/bridge-ui-v2/src/libs/bridge/ERC20Bridge.ts
@@ -41,7 +41,7 @@ export class ERC20Bridge extends Bridge {
     const refundTo = wallet.account.address;
 
     const gasLimit = !isTokenAlreadyDeployed
-      ? BigInt(bridgeService.noTokenDeployedGasLimit)
+      ? BigInt(bridgeService.noERC20TokenDeployedGasLimit)
       : fee > 0
       ? bridgeService.noOwnerGasLimit
       : BigInt(0);
@@ -152,9 +152,7 @@ export class ERC20Bridge extends Bridge {
     }
 
     const { tokenVaultContract, sendERC20Args } = await ERC20Bridge._prepareTransaction(args);
-    const { fee } = sendERC20Args;
-
-    const value = fee;
+    const { fee: value } = sendERC20Args;
 
     try {
       log('Calling sendERC20 with value', value);
diff --git a/packages/bridge-ui-v2/src/libs/bridge/ERC721Bridge.ts b/packages/bridge-ui-v2/src/libs/bridge/ERC721Bridge.ts
index 202fc536f7..1a9aeb1603 100644
--- a/packages/bridge-ui-v2/src/libs/bridge/ERC721Bridge.ts
+++ b/packages/bridge-ui-v2/src/libs/bridge/ERC721Bridge.ts
@@ -1,14 +1,96 @@
-import type { Hash, Hex } from 'viem';
+import { getContract } from '@wagmi/core';
+import { type Hash, UserRejectedRequestError } from 'viem';
+
+import { erc721ABI, erc721VaultABI } from '$abi';
+import { bridgeService } from '$config';
+import { ApproveError, NotApprovedError, SendERC721Error } from '$libs/error';
+import type { BridgeProver } from '$libs/proof';
+import { getLogger } from '$libs/util/logger';
 
 import { Bridge } from './Bridge';
+import type { ERC721BridgeArgs, NFTApproveArgs, NFTBridgeTransferOp, RequireApprovalArgs } from './types';
+
+const log = getLogger('ERC721Bridge');
 
 export class ERC721Bridge extends Bridge {
-  async estimateGas(): Promise<bigint> {
-    return Promise.resolve(BigInt(0));
+  constructor(prover: BridgeProver) {
+    super(prover);
+  }
+
+  async requiresApproval({ tokenAddress, spenderAddress, tokenId }: RequireApprovalArgs) {
+    const tokenContract = getContract({
+      abi: erc721ABI,
+      address: tokenAddress,
+    });
+
+    log('Checking approval for token ', tokenId);
+    const requiresApproval = (await tokenContract.read.getApproved([tokenId])) !== spenderAddress;
+
+    log(`Token with ID ${tokenId} requires approval ${spenderAddress}: ${requiresApproval}`);
+    return requiresApproval;
+  }
+
+  async estimateGas(args: ERC721BridgeArgs): Promise<bigint> {
+    const { tokenVaultContract, sendERC721Args } = await ERC721Bridge._prepareTransaction(args);
+    const { fee: value } = sendERC721Args;
+
+    log('Estimating gas for sendERC721 call with value', value);
+
+    const estimatedGas = tokenVaultContract.estimateGas.sendToken([sendERC721Args], { value });
+
+    log('Gas estimated', estimatedGas);
+
+    return estimatedGas;
   }
 
-  async bridge(): Promise<Hex> {
-    return Promise.resolve('0x');
+  async bridge(args: ERC721BridgeArgs) {
+    const { token, tokenVaultAddress, tokenIds } = args;
+    const { tokenVaultContract, sendERC721Args } = await ERC721Bridge._prepareTransaction(args);
+    const { fee: value } = sendERC721Args;
+
+    const tokenIdsWithoutApproval: bigint[] = [];
+    await Promise.all(
+      tokenIds.map(async (tokenId) => {
+        try {
+          const requireApproval = await this.requiresApproval({
+            tokenAddress: token,
+            spenderAddress: tokenVaultAddress,
+            tokenId: tokenId,
+          });
+
+          if (!requireApproval) {
+            log(`No allowance required for the token ${tokenId}`);
+            return null;
+          } else {
+            tokenIdsWithoutApproval.push(tokenId);
+          }
+        } catch (err) {
+          throw new SendERC721Error('failed to bridge ERC721 token', { cause: err });
+        }
+      }),
+    );
+
+    if (tokenIdsWithoutApproval.length > 0) {
+      log(`Tokens missing approval ${tokenIdsWithoutApproval}`);
+      throw new NotApprovedError(`The following tokens are not approved ${tokenIdsWithoutApproval}`);
+    }
+
+    try {
+      log('Sending ERC721 with fee', value);
+      log('Sending ERC721 with args', sendERC721Args);
+
+      const tx = await tokenVaultContract.write.sendToken([sendERC721Args], { value });
+
+      log('ERC721 sent', tx);
+
+      return tx;
+    } catch (err) {
+      console.error(err);
+      if (`${err}`.includes('denied transaction signature')) {
+        throw new UserRejectedRequestError(err as Error);
+      }
+      throw new SendERC721Error('failed to bridge ERC721 token', { cause: err });
+    }
   }
 
   async claim() {
@@ -18,4 +100,93 @@ export class ERC721Bridge extends Bridge {
   async release() {
     return Promise.resolve('0x' as Hash);
   }
+
+  async approve(args: NFTApproveArgs) {
+    const { tokenAddress, spenderAddress, wallet, tokenIds } = args;
+
+    const tokenId = tokenIds[0]; //TODO: handle multiple tokenIds
+    const requireApproval = await this.requiresApproval({
+      tokenAddress,
+      spenderAddress,
+      tokenId,
+    });
+
+    log(`required approval for token ${tokenId}: ${requireApproval}`);
+
+    if (!requireApproval) {
+      log(`No allowance required for the token ${tokenId}`);
+      throw new Error(`No allowance required for the token ${tokenId}`); // todo: better error
+    }
+
+    const tokenContract = getContract({
+      walletClient: wallet,
+      abi: erc721ABI,
+      address: tokenAddress,
+    });
+
+    try {
+      log(`Calling approve for spender "${spenderAddress}" for token`, tokenIds);
+
+      const txHash = await tokenContract.write.approve([spenderAddress, tokenId]);
+
+      log('Transaction hash for approve call', txHash);
+
+      return txHash;
+    } catch (err) {
+      console.error(err);
+
+      if (`${err}`.includes('denied transaction signature')) {
+        throw new UserRejectedRequestError(err as Error);
+      }
+
+      throw new ApproveError('failed to approve ERC721 token', { cause: err });
+    }
+  }
+
+  private static async _prepareTransaction(args: ERC721BridgeArgs) {
+    const {
+      to,
+      amount,
+      wallet,
+      destChainId,
+      token,
+      fee,
+      tokenVaultAddress,
+      isTokenAlreadyDeployed,
+      memo = '',
+      tokenIds,
+      amounts,
+    } = args;
+
+    const tokenVaultContract = getContract({
+      walletClient: wallet,
+      abi: erc721VaultABI,
+      address: tokenVaultAddress,
+    });
+
+    const refundTo = wallet.account.address;
+
+    const gasLimit = !isTokenAlreadyDeployed
+      ? BigInt(bridgeService.noERC721TokenDeployedGasLimit)
+      : fee > 0
+      ? bridgeService.noOwnerGasLimit
+      : BigInt(0);
+
+    const sendERC721Args: NFTBridgeTransferOp = {
+      destChainId: BigInt(destChainId),
+      to,
+      token,
+      amount,
+      gasLimit,
+      fee,
+      refundTo,
+      memo,
+      tokenIds,
+      amounts,
+    };
+
+    log('Preparing transaction with args', sendERC721Args);
+
+    return { tokenVaultContract, sendERC721Args };
+  }
 }
diff --git a/packages/bridge-ui-v2/src/libs/bridge/fetchNFTs.ts b/packages/bridge-ui-v2/src/libs/bridge/fetchNFTs.ts
index 4bf947f838..3b13cfa6a1 100644
--- a/packages/bridge-ui-v2/src/libs/bridge/fetchNFTs.ts
+++ b/packages/bridge-ui-v2/src/libs/bridge/fetchNFTs.ts
@@ -3,6 +3,7 @@ import type { Address } from 'viem';
 import type { ChainID } from '$libs/chain';
 import { eventIndexerApiServices } from '$libs/eventIndexer/initEventIndexer';
 import { type NFT, TokenType } from '$libs/token';
+import { checkOwnershipOfNFTs } from '$libs/token/checkOwnership';
 import { getTokenWithInfoFromAddress } from '$libs/token/getTokenWithInfoFromAddress';
 import { getLogger } from '$libs/util/logger';
 
@@ -62,7 +63,22 @@ export async function fetchNFTs(userAddress: Address, chainID: ChainID): Promise
   // Deduplicate based on address and chainID
   const deduplicatedNfts = deduplicateNFTs(nftArrays);
 
-  log(`found ${deduplicatedNfts.length} unique NFTs from all indexers`, deduplicatedNfts);
+  // Double check the ownership
+  const ownsAllNfts = await checkOwnershipOfNFTs(nftArrays.flat(), userAddress, Number(chainID));
+  log(`user ${userAddress} owns all NFTs:`, ownsAllNfts);
 
-  return { nfts: deduplicatedNfts, error };
+  // filter out the NFTs that the user doesn't own
+  const filteredNfts = deduplicatedNfts.filter((nft) => {
+    const isOwned = ownsAllNfts.successfulOwnershipChecks.find((result) => result.tokenId === nft.tokenId);
+    return isOwned;
+  });
+
+  if (filteredNfts.length !== deduplicatedNfts.length) {
+    //TODO: handle this case differently? maybe show a warning to the user?
+    log(`found ${deduplicatedNfts.length - filteredNfts.length} tokens that the user doesn't own`);
+  }
+
+  log(`found ${filteredNfts.length} unique NFTs from all indexers`, filteredNfts);
+
+  return { nfts: filteredNfts, error };
 }
diff --git a/packages/bridge-ui-v2/src/libs/bridge/types.ts b/packages/bridge-ui-v2/src/libs/bridge/types.ts
index bd5f3a531c..e352c884fb 100644
--- a/packages/bridge-ui-v2/src/libs/bridge/types.ts
+++ b/packages/bridge-ui-v2/src/libs/bridge/types.ts
@@ -88,6 +88,11 @@ export type BridgeTransferOp = {
   memo: string;
 };
 
+export type NFTBridgeTransferOp = BridgeTransferOp & {
+  tokenIds: bigint[];
+  amounts: bigint[];
+};
+
 export type ApproveArgs = {
   amount: bigint;
   tokenAddress: Address;
@@ -95,6 +100,13 @@ export type ApproveArgs = {
   wallet: WalletClient;
 };
 
+export type NFTApproveArgs = {
+  tokenAddress: Address;
+  spenderAddress: Address;
+  wallet: WalletClient;
+  tokenIds: bigint[];
+};
+
 export type BridgeArgs = {
   to: Address;
   wallet: WalletClient;
@@ -115,12 +127,30 @@ export type ERC20BridgeArgs = BridgeArgs & {
   isTokenAlreadyDeployed?: boolean;
 };
 
+export type ERC721BridgeArgs = BridgeArgs & {
+  token: Address;
+  tokenVaultAddress: Address;
+  isTokenAlreadyDeployed?: boolean;
+  tokenIds: bigint[];
+  amounts: bigint[];
+};
+
+export type ERC1155BridgeArgs = ERC721BridgeArgs;
+
 export type RequireAllowanceArgs = {
   tokenAddress: Address;
   ownerAddress: Address;
   spenderAddress: Address;
   amount: bigint;
 };
+
+export type RequireApprovalArgs = {
+  tokenAddress: Address;
+  spenderAddress: Address;
+  tokenId: bigint;
+  owner?: Address;
+};
+
 export type ClaimArgs = {
   msgHash: Hash;
   message: Message;
diff --git a/packages/bridge-ui-v2/src/libs/error/errors.ts b/packages/bridge-ui-v2/src/libs/error/errors.ts
index adf92f4960..a7b3ce878f 100644
--- a/packages/bridge-ui-v2/src/libs/error/errors.ts
+++ b/packages/bridge-ui-v2/src/libs/error/errors.ts
@@ -14,6 +14,10 @@ export class InsufficientAllowanceError extends Error {
   name = 'InsufficientAllowanceError';
 }
 
+export class NotApprovedError extends Error {
+  name = 'NotApprovedError';
+}
+
 export class NoAllowanceRequiredError extends Error {
   name = 'NoAllowanceRequiredError';
 }
@@ -34,6 +38,14 @@ export class SendERC20Error extends Error {
   name = 'SendERC20Error';
 }
 
+export class SendERC721Error extends Error {
+  name = 'SendERC721Error';
+}
+
+export class SendERC1155Error extends Error {
+  name = 'SendERC1155Error';
+}
+
 export class ApproveError extends Error {
   name = 'ApproveError';
 }
diff --git a/packages/bridge-ui-v2/src/libs/relayer/RelayerAPIService.ts b/packages/bridge-ui-v2/src/libs/relayer/RelayerAPIService.ts
index 11c8939480..69ba02c0df 100644
--- a/packages/bridge-ui-v2/src/libs/relayer/RelayerAPIService.ts
+++ b/packages/bridge-ui-v2/src/libs/relayer/RelayerAPIService.ts
@@ -269,12 +269,17 @@ export class RelayerAPIService {
 
 function _checkType(bridgeTx: BridgeTransaction): TokenType {
   const to = bridgeTx.message?.to;
-  switch (to) {
-    case routingContractsMap[Number(bridgeTx.destChainId)][Number(bridgeTx.srcChainId)].erc20VaultAddress:
+
+  switch (to?.toLowerCase()) {
+    case routingContractsMap[Number(bridgeTx.destChainId)][Number(bridgeTx.srcChainId)].erc20VaultAddress.toLowerCase():
       return TokenType.ERC20;
-    case routingContractsMap[Number(bridgeTx.destChainId)][Number(bridgeTx.srcChainId)].erc721VaultAddress:
+    case routingContractsMap[Number(bridgeTx.destChainId)][
+      Number(bridgeTx.srcChainId)
+    ].erc721VaultAddress.toLowerCase():
       return TokenType.ERC721;
-    case routingContractsMap[Number(bridgeTx.destChainId)][Number(bridgeTx.srcChainId)].erc1155VaultAddress:
+    case routingContractsMap[Number(bridgeTx.destChainId)][
+      Number(bridgeTx.srcChainId)
+    ].erc1155VaultAddress.toLowerCase():
       return TokenType.ERC1155;
     default:
       return TokenType.ETH;
diff --git a/packages/bridge-ui-v2/src/libs/token/checkOwnership.test.ts b/packages/bridge-ui-v2/src/libs/token/checkOwnership.test.ts
index b87dedf7c8..5f008db038 100644
--- a/packages/bridge-ui-v2/src/libs/token/checkOwnership.test.ts
+++ b/packages/bridge-ui-v2/src/libs/token/checkOwnership.test.ts
@@ -19,76 +19,188 @@ describe('checkOwnership', () => {
   const TOKEN_IDS = [1, 2];
   const CHAIN_ID = 1;
 
-  it('should return true if the account owns all the tokens (ERC1155)', async () => {
-    // Given
-    vi.mocked(readContract).mockResolvedValueOnce(BigInt(10)).mockResolvedValueOnce(BigInt(10));
-
-    // When
-    const result = await checkOwnership(TOKEN_ADDRESS, TokenType.ERC1155, TOKEN_IDS, OWNER, CHAIN_ID);
-
-    // Then
-    expect(result).toBe(true);
-  });
-
-  it('should return false if the account does not own any of the tokens (ERC1155)', async () => {
-    // Given
-    vi.mocked(readContract).mockResolvedValueOnce(BigInt(0)).mockResolvedValueOnce(BigInt(0));
-
-    // When
-    const result = await checkOwnership(TOKEN_ADDRESS, TokenType.ERC1155, TOKEN_IDS, OWNER, CHAIN_ID);
-
-    // Then
-    expect(result).toBe(false);
-  });
-
-  it('should return true if the account owns all the tokens (ERC721)', async () => {
-    // Given
-    vi.mocked(readContract).mockResolvedValueOnce(OWNER).mockResolvedValueOnce(OWNER);
-
-    // When
-    const result = await checkOwnership(TOKEN_ADDRESS, TokenType.ERC721, TOKEN_IDS, OWNER, CHAIN_ID);
-
-    // Then
-    expect(result).toBe(true);
+  afterEach(() => {
+    vi.clearAllMocks();
+    vi.resetAllMocks();
   });
 
-  it('should return true if the account owns all the tokens (no token type passed)', async () => {
-    // Given
-    vi.mocked(readContract).mockResolvedValueOnce(OWNER).mockResolvedValueOnce(OWNER);
-
-    vi.mocked(detectContractType).mockResolvedValueOnce(TokenType.ERC721);
-
-    // When
-    const result = await checkOwnership(TOKEN_ADDRESS, null, TOKEN_IDS, OWNER, CHAIN_ID);
-
-    // Then
-    expect(result).toBe(true);
+  describe('ERC1155', () => {
+    it('should return the correct result if the account owns all the tokens', async () => {
+      // Given
+      vi.mocked(readContract).mockResolvedValueOnce(BigInt(10)).mockResolvedValueOnce(BigInt(10));
+
+      // When
+      const result = await checkOwnership(TOKEN_ADDRESS, TokenType.ERC1155, TOKEN_IDS, OWNER, CHAIN_ID);
+
+      // Then
+      expect(result).toEqual([
+        { tokenId: TOKEN_IDS[0], isOwner: true },
+        { tokenId: TOKEN_IDS[1], isOwner: true },
+      ]);
+    });
+
+    it('should return the correct result if a single token is passed and the account owns it', async () => {
+      // Given
+      vi.mocked(readContract).mockResolvedValueOnce(BigInt(10)).mockResolvedValueOnce(BigInt(10));
+
+      // When
+      const result = await checkOwnership(TOKEN_ADDRESS, TokenType.ERC1155, TOKEN_IDS[0], OWNER, CHAIN_ID);
+
+      // Then
+      expect(result).toEqual([{ tokenId: TOKEN_IDS[0], isOwner: true }]);
+    });
+
+    it('should return the correct result if the account does not own any of the tokens', async () => {
+      // Given
+      vi.mocked(readContract).mockResolvedValueOnce(BigInt(0)).mockResolvedValueOnce(BigInt(0));
+
+      // When
+      const result = await checkOwnership(TOKEN_ADDRESS, TokenType.ERC1155, TOKEN_IDS, OWNER, CHAIN_ID);
+
+      // Then
+      expect(result).toEqual([
+        { tokenId: TOKEN_IDS[0], isOwner: false },
+        { tokenId: TOKEN_IDS[1], isOwner: false },
+      ]);
+    });
+
+    it('should return the correct result if the account only owns some of the tokens', async () => {
+      // Given
+      vi.mocked(readContract).mockResolvedValueOnce(BigInt(10)).mockResolvedValueOnce(BigInt(0));
+
+      // When
+      const result = await checkOwnership(TOKEN_ADDRESS, TokenType.ERC1155, TOKEN_IDS, OWNER, CHAIN_ID);
+
+      // Then
+      expect(result).toEqual([
+        { tokenId: TOKEN_IDS[0], isOwner: true },
+        { tokenId: TOKEN_IDS[1], isOwner: false },
+      ]);
+    });
+
+    it('should return the correct result if a single token is passed and the account does not own it', async () => {
+      // Given
+      vi.mocked(readContract).mockResolvedValueOnce(BigInt(0)).mockResolvedValueOnce(BigInt(0));
+
+      // When
+      const result = await checkOwnership(TOKEN_ADDRESS, TokenType.ERC1155, TOKEN_IDS[0], OWNER, CHAIN_ID);
+
+      // Then
+      expect(result).toEqual([{ tokenId: TOKEN_IDS[0], isOwner: false }]);
+    });
+
+    it('should return the correct result if the account does not own any of the tokens ', async () => {
+      // Given
+      vi.mocked(readContract).mockResolvedValueOnce(BigInt(0)).mockResolvedValueOnce(BigInt(0));
+
+      // When
+      const result = await checkOwnership(TOKEN_ADDRESS, TokenType.ERC1155, TOKEN_IDS, OWNER, CHAIN_ID);
+
+      // Then
+      expect(result).toEqual([
+        { tokenId: TOKEN_IDS[0], isOwner: false },
+        { tokenId: TOKEN_IDS[1], isOwner: false },
+      ]);
+    });
   });
 
-  it('should return false if the account does not own any of the tokens (ERC721)', async () => {
-    // Given
-    vi.mocked(readContract).mockResolvedValueOnce('0x2').mockResolvedValueOnce('0x3');
-
-    // When
-    const result = await checkOwnership(TOKEN_ADDRESS, TokenType.ERC721, TOKEN_IDS, OWNER, CHAIN_ID);
-
-    // Then
-    expect(result).toBe(false);
+  describe('ERC721', () => {
+    it('should return true if the account owns all the tokens', async () => {
+      // Given
+      vi.mocked(readContract).mockResolvedValueOnce(OWNER).mockResolvedValueOnce(OWNER);
+
+      // When
+      const result = await checkOwnership(TOKEN_ADDRESS, TokenType.ERC721, TOKEN_IDS, OWNER, CHAIN_ID);
+
+      // Then
+      expect(result).toEqual([
+        { tokenId: TOKEN_IDS[0], isOwner: true },
+        { tokenId: TOKEN_IDS[1], isOwner: true },
+      ]);
+    });
+
+    it('should return the correct result if the account owns all the tokens (no token type passed)', async () => {
+      // Given
+      vi.mocked(readContract).mockResolvedValueOnce(OWNER).mockResolvedValueOnce(OWNER);
+
+      vi.mocked(detectContractType).mockResolvedValueOnce(TokenType.ERC721);
+
+      // When
+      const result = await checkOwnership(TOKEN_ADDRESS, null, TOKEN_IDS, OWNER, CHAIN_ID);
+
+      // Then
+      expect(result).toEqual([
+        { tokenId: TOKEN_IDS[0], isOwner: true },
+        { tokenId: TOKEN_IDS[1], isOwner: true },
+      ]);
+    });
+
+    it('should return the correct result if a single token is passed and the account owns it', async () => {
+      // Given
+      vi.mocked(readContract).mockResolvedValueOnce(OWNER);
+
+      // When
+      const result = await checkOwnership(TOKEN_ADDRESS, TokenType.ERC721, TOKEN_IDS[0], OWNER, CHAIN_ID);
+
+      // Then
+      expect(result).toEqual([{ tokenId: TOKEN_IDS[0], isOwner: true }]);
+    });
+
+    it('should return correct result if the account does not own any of the tokens', async () => {
+      // Given
+      vi.mocked(readContract).mockResolvedValueOnce('0x2').mockResolvedValueOnce('0x3');
+
+      // When
+      const result = await checkOwnership(TOKEN_ADDRESS, TokenType.ERC721, TOKEN_IDS, OWNER, CHAIN_ID);
+
+      // Then
+      expect(result).toEqual([
+        { tokenId: TOKEN_IDS[0], isOwner: false },
+        { tokenId: TOKEN_IDS[1], isOwner: false },
+      ]);
+    });
+
+    it('should return the correct result if the account only owns some of the tokens', async () => {
+      // Given
+      vi.mocked(readContract).mockResolvedValueOnce(OWNER).mockResolvedValueOnce('0x3');
+
+      // When
+      const result = await checkOwnership(TOKEN_ADDRESS, TokenType.ERC721, TOKEN_IDS, OWNER, CHAIN_ID);
+
+      // Then
+      expect(result).toEqual([
+        { tokenId: TOKEN_IDS[0], isOwner: true },
+        { tokenId: TOKEN_IDS[1], isOwner: false },
+      ]);
+    });
+
+    it('should return the correct result if a single token is passed and the account does not own it', async () => {
+      // Given
+      vi.mocked(readContract).mockResolvedValueOnce('0x2').mockResolvedValueOnce('0x3');
+
+      // When
+      const result = await checkOwnership(TOKEN_ADDRESS, TokenType.ERC721, TOKEN_IDS[0], OWNER, CHAIN_ID);
+
+      // Then
+      expect(result).toEqual([{ tokenId: TOKEN_IDS[0], isOwner: false }]);
+    });
   });
 
-  it('should return false if tokenType is null', async () => {
-    // When
-    const result = await checkOwnership(TOKEN_ADDRESS, null, TOKEN_IDS, OWNER, CHAIN_ID);
+  describe('General tests', () => {
+    it('should return an emtpy array if tokenType is null', async () => {
+      // When
+      const result = await checkOwnership(TOKEN_ADDRESS, null, TOKEN_IDS, OWNER, CHAIN_ID);
 
-    // Then
-    expect(result).toBe(false);
-  });
+      // Then
+      expect(result).toEqual([]);
+    });
 
-  it('should return false if tokenIds array is empty', async () => {
-    // When
-    const result = await checkOwnership(TOKEN_ADDRESS, TokenType.ERC721, [], OWNER, CHAIN_ID);
+    it('should return an emtpy array if tokenIds array is empty', async () => {
+      // When
+      const result = await checkOwnership(TOKEN_ADDRESS, TokenType.ERC721, [], OWNER, CHAIN_ID);
 
-    // Then
-    expect(result).toBe(false);
+      // Then
+      expect(result).toEqual([]);
+    });
   });
 });
diff --git a/packages/bridge-ui-v2/src/libs/token/checkOwnership.ts b/packages/bridge-ui-v2/src/libs/token/checkOwnership.ts
index 2c8e9e83a6..9c7aba61c8 100644
--- a/packages/bridge-ui-v2/src/libs/token/checkOwnership.ts
+++ b/packages/bridge-ui-v2/src/libs/token/checkOwnership.ts
@@ -4,7 +4,77 @@ import type { Address } from 'viem';
 import { erc1155ABI } from '$abi';
 
 import { detectContractType } from './detectContractType';
-import { TokenType } from './types';
+import { type NFT, TokenType } from './types';
+
+export const checkOwnershipOfNFTs = async (nfts: NFT[], accountAddress: Address, chainId: number) => {
+  const checkPromises = nfts.map((nft) =>
+    checkOwnership(nft.addresses[chainId], nft.type, nft.tokenId, accountAddress, chainId),
+  );
+
+  const ownershipResults = await Promise.all(checkPromises);
+
+  // Flatten the arrays of results into a single array
+  const flattenedResults = ownershipResults.flat();
+
+  // Separate the results based on the ownership status
+  const failedOwnershipChecks = flattenedResults.filter((result) => !result.isOwner);
+  const successfulOwnershipChecks = flattenedResults.filter((result) => result.isOwner);
+
+  return {
+    allOwned: failedOwnershipChecks.length === 0,
+    failedOwnershipChecks,
+    successfulOwnershipChecks,
+  };
+};
+
+export const checkOwnership = async (
+  tokenAddress: Address,
+  tokenType: TokenType | null,
+  tokenIds: number[] | number,
+  accountAddress: Address,
+  chainId: number,
+): Promise<{ tokenId: number; isOwner: boolean }[]> => {
+  if (!tokenType) tokenType = await detectContractType(tokenAddress);
+  if (
+    !tokenType ||
+    tokenIds === undefined ||
+    tokenIds === null ||
+    (Array.isArray(tokenIds) && tokenIds.length === 0) ||
+    !accountAddress ||
+    !chainId
+  )
+    return [];
+
+  if (Array.isArray(tokenIds)) {
+    const checkPromises = tokenIds.map(async (tokenId) => {
+      const isOwner = await determineOwnership(tokenType!, tokenAddress, tokenId, accountAddress, chainId);
+      return { tokenId, isOwner };
+    });
+
+    return await Promise.all(checkPromises);
+  } else {
+    const checkOwnershipForTokenId = async (tokenId: number) => {
+      const isOwner = await determineOwnership(tokenType!, tokenAddress, tokenId, accountAddress, chainId);
+      return { tokenId, isOwner };
+    };
+    const result = await checkOwnershipForTokenId(tokenIds);
+    return [result];
+  }
+};
+
+const determineOwnership = async (
+  tokenType: TokenType,
+  tokenAddress: Address,
+  tokenId: number,
+  accountAddress: Address,
+  chainId: number,
+) => {
+  return tokenType === TokenType.ERC1155
+    ? isOwnerERC1155(tokenAddress, tokenId, accountAddress, chainId)
+    : tokenType === TokenType.ERC721
+    ? isOwnerERC721(tokenAddress, tokenId, accountAddress, chainId)
+    : Promise.resolve(false);
+};
 
 const isOwnerERC1155 = async (
   tokenAddress: Address,
@@ -41,30 +111,9 @@ const isOwnerERC721 = async (
       chainId,
       args: [BigInt(tokenId)],
     });
+
     return owner === accountAddress;
   } catch (error) {
     return false;
   }
 };
-
-export const checkOwnership = async (
-  tokenAddress: Address,
-  tokenType: TokenType | null,
-  tokenIds: number[],
-  accountAddress: Address,
-  chainId: number,
-): Promise<boolean> => {
-  if (!tokenType) tokenType = await detectContractType(tokenAddress);
-  if (!tokenType || !tokenIds.length || !accountAddress || !chainId) return false;
-
-  const checkPromises = tokenIds.map((tokenId) =>
-    tokenType === TokenType.ERC1155
-      ? isOwnerERC1155(tokenAddress, tokenId, accountAddress, chainId)
-      : tokenType === TokenType.ERC721
-      ? isOwnerERC721(tokenAddress, tokenId, accountAddress, chainId)
-      : Promise.resolve(false),
-  );
-
-  const ownershipResults = await Promise.all(checkPromises);
-  return ownershipResults.every((isOwner) => isOwner);
-};
diff --git a/packages/bridge-ui-v2/src/libs/token/fetchNFTImageUrl.ts b/packages/bridge-ui-v2/src/libs/token/fetchNFTImageUrl.ts
index 7ffc5ce0dd..54377a3ac4 100644
--- a/packages/bridge-ui-v2/src/libs/token/fetchNFTImageUrl.ts
+++ b/packages/bridge-ui-v2/src/libs/token/fetchNFTImageUrl.ts
@@ -1,13 +1,18 @@
 import { parseNFTMetadata } from '$libs/util/parseNFTMetadata';
 import { safeParseUrl } from '$libs/util/safeParseUrl';
 
-import type { NFT } from './types';
+import type { NFT, NFTMetadata } from './types';
 
 const PLACEHOLDER_IMAGE_URL = '/chains/taiko.svg';
 
 export const fetchNFTImageUrl = async (token: NFT) => {
   try {
-    const metadata = await parseNFTMetadata(token);
+    let metadata: NFTMetadata | null;
+    if (!token.metadata) {
+      metadata = await parseNFTMetadata(token);
+    } else {
+      metadata = token.metadata;
+    }
     if (!metadata?.image || metadata?.image === '') return PLACEHOLDER_IMAGE_URL;
     return safeParseUrl(metadata?.image);
   } catch (error) {
diff --git a/packages/bridge-ui-v2/src/libs/token/getCrossChainAddress.ts b/packages/bridge-ui-v2/src/libs/token/getCrossChainAddress.ts
index 71450b8d36..13c1fbcadd 100644
--- a/packages/bridge-ui-v2/src/libs/token/getCrossChainAddress.ts
+++ b/packages/bridge-ui-v2/src/libs/token/getCrossChainAddress.ts
@@ -1,7 +1,7 @@
 import { type Address, getContract } from '@wagmi/core';
-import { zeroAddress } from 'viem';
+import { type Abi, zeroAddress } from 'viem';
 
-import { erc20VaultABI } from '$abi';
+import { erc20VaultABI, erc721VaultABI } from '$abi';
 import { routingContractsMap } from '$bridgeConfig';
 import { chains } from '$libs/chain';
 import { getLogger } from '$libs/util/logger';
@@ -10,33 +10,32 @@ import { type GetCrossChainAddressArgs, TokenType } from './types';
 
 const log = getLogger('token:getCrossChainAddress');
 
-// TODO: have another look at this function
-
 export async function getCrossChainAddress({
   token,
   srcChainId,
   destChainId,
 }: GetCrossChainAddressArgs): Promise<Address | null> {
   if (token.type === TokenType.ETH) return null; // ETH doesn't have an address
+
   log(
-    `Getting cross chain address for token ${token.symbol} (${token.name}) from chain ${srcChainId} to chain ${destChainId}`,
+    `Getting cross chain address for ${token.type} token ${token.symbol} (${token.name}) from chain ${srcChainId} to chain ${destChainId}`,
   );
 
-  if (token.type === TokenType.ERC721) return null; // TODO
-  if (token.type === TokenType.ERC1155) return null; // TODO
-
   const srcChainTokenAddress = token.addresses[srcChainId];
   const destChainTokenAddress = token.addresses[destChainId];
 
   const existsOnDestinationChain = destChainTokenAddress && destChainTokenAddress !== zeroAddress;
   const existsOnSourceChain = srcChainTokenAddress && srcChainTokenAddress !== zeroAddress;
 
-  // check if we already have it but only if we have it on the current chain as well
+  // check if we already have the address
   if (existsOnDestinationChain && existsOnSourceChain) {
     return token.addresses[destChainId];
   }
 
-  // it could be that we don't have the token address on the current chain, but we have it on another chain
+  const vaultABI = token.type === TokenType.ERC721 ? erc721VaultABI : erc20VaultABI;
+  const vaultAddressKey = token.type === TokenType.ERC721 ? 'erc721VaultAddress' : 'erc20VaultAddress';
+
+  // it could be that we don't have the token address on the current chain, but we might it on another chain
   if (!existsOnSourceChain) {
     // find one chain with a configured address
     const configuredChainId = Object.keys(token.addresses).find((chainId) => token.addresses[chainId] !== zeroAddress);
@@ -44,85 +43,88 @@ export async function getCrossChainAddress({
     // if we have no configuration at all, we cannot find the address
     if (!configuredChainId) return null;
 
-    // get the configured token address on that chain
-    const configuredTokenAddress = token.addresses[Number(configuredChainId)];
-
-    // we need find a vault that is configured with the selected srcChainId and the configuredChainId
-    const erc20VaultInfo = chains
-      .filter((chain) => {
-        const routesForChain = routingContractsMap[chain.id];
-        return (
-          routesForChain &&
-          routesForChain[Number(configuredChainId)] &&
-          routesForChain[Number(configuredChainId)].erc20VaultAddress
-        );
-      })
-      .map((chain) => {
-        const erc20VaultAddress = routingContractsMap[chain.id][Number(configuredChainId)].erc20VaultAddress;
-        return {
-          chainId: chain.id,
-          vaultAddress: erc20VaultAddress,
-        };
-      });
+    const vaultInfo = await getVaultForToken(token.type, configuredChainId);
 
     // if we don't have any vault, we cannot find the address
-    if (erc20VaultInfo.length === 0) return null;
+    if (!vaultInfo) return null;
 
-    // use the first one we find
-    const { chainId: foundChainId, vaultAddress: erc20VaultAddress } = erc20VaultInfo[0];
+    const { chainId: foundChainId, vaultAddress } = vaultInfo;
+    const configuredTokenAddress = token.addresses[Number(configuredChainId)];
 
     const configuredTokenVaultContract = getContract({
-      abi: erc20VaultABI,
+      abi: vaultABI as Abi,
       chainId: foundChainId,
-      address: erc20VaultAddress,
+      address: vaultAddress,
     });
 
-    const bridgedAddress = await configuredTokenVaultContract.read.canonicalToBridged([
+    const bridgedAddress = (await configuredTokenVaultContract.read.canonicalToBridged([
       BigInt(configuredChainId),
       configuredTokenAddress,
-    ]);
+    ])) as Address;
 
     return bridgedAddress;
-
-    // now that we have the bridgedAddress address, we can check if it is bridged
-    // const { erc20VaultAddress: destChainTokenVaultAddress } =
-    //   routingContractsMap[destChainId][foundChainId];
-    // const destTokenVaultContract = getContract({
-    //   abi: erc20VaultABI,
-    //   chainId: destChainId,
-    //   address: destChainTokenVaultAddress,
-    // });
-
-    // return await destTokenVaultContract.read.canonicalToBridged([BigInt(destChainId), bridgedAddress]);
   } else {
-    const { erc20VaultAddress: srcChainTokenVaultAddress } = routingContractsMap[srcChainId][destChainId];
-    const { erc20VaultAddress: destChainTokenVaultAddress } = routingContractsMap[destChainId][srcChainId];
+    // If we do have an address on the current chain, we need to find the canonical address on the other chain
 
     const srcTokenVaultContract = getContract({
-      abi: erc20VaultABI,
+      abi: vaultABI as Abi,
       chainId: srcChainId,
-      address: srcChainTokenVaultAddress,
+      address: routingContractsMap[srcChainId][destChainId][vaultAddressKey],
     });
 
     const destTokenVaultContract = getContract({
-      abi: erc20VaultABI,
+      abi: vaultABI as Abi,
       chainId: destChainId,
-      address: destChainTokenVaultAddress,
+      address: routingContractsMap[destChainId][srcChainId][vaultAddressKey],
     });
 
     // first we need to figure out the canonical address of the token
-    const canonicalTokenInfo = await srcTokenVaultContract.read.bridgedToCanonical([srcChainTokenAddress]);
+    const canonicalTokenInfo = (await srcTokenVaultContract.read.bridgedToCanonical([srcChainTokenAddress])) as Address;
     const canonicalTokenAddress = canonicalTokenInfo[1]; // this will break if the contracts ever change the order of the return values
 
     // if the canonical address is 0x0, then the token is canonical
     if (canonicalTokenAddress === zeroAddress) {
       // let's check if it is bridged on the destination chain by querying the destination vault
       // e.g. bridged L1 -> L2 with native L1 token
-      return await destTokenVaultContract.read.canonicalToBridged([BigInt(srcChainId), srcChainTokenAddress]);
+      return (await destTokenVaultContract.read.canonicalToBridged([
+        BigInt(srcChainId),
+        srcChainTokenAddress,
+      ])) as Address;
     } else {
       // if we have found a canonical, we can check for the bridged address on the source token vault
       // e.g. bridging L2 -> L1 with native L1 token
-      return await srcTokenVaultContract.read.canonicalToBridged([BigInt(destChainId), canonicalTokenAddress]);
+      return (await srcTokenVaultContract.read.canonicalToBridged([
+        BigInt(destChainId),
+        canonicalTokenAddress,
+      ])) as Address;
     }
   }
 }
+
+async function getVaultForToken(tokenType: TokenType, configuredChainId: string) {
+  const vaultTypeKey =
+    tokenType === TokenType.ERC721
+      ? 'erc721VaultAddress'
+      : tokenType === TokenType.ERC1155
+      ? 'erc1155VaultAddress'
+      : 'erc20VaultAddress';
+
+  // we need find a vault that is configured with the selected srcChainId and the configuredChainId
+  const vaultInfo = chains
+    .filter((chain) => {
+      const routesForChain = routingContractsMap[chain.id];
+      return (
+        routesForChain &&
+        routesForChain[Number(configuredChainId)] &&
+        routesForChain[Number(configuredChainId)][vaultTypeKey]
+      );
+    })
+    .map((chain) => {
+      const vaultAddress = routingContractsMap[chain.id][Number(configuredChainId)][vaultTypeKey];
+      return {
+        chainId: chain.id,
+        vaultAddress,
+      };
+    });
+  return vaultInfo.length > 0 ? vaultInfo[0] : null;
+}
diff --git a/packages/bridge-ui-v2/src/libs/token/getTokenWithInfoFromAddress.ts b/packages/bridge-ui-v2/src/libs/token/getTokenWithInfoFromAddress.ts
index 58b2b3aa34..af4b6cf4a7 100644
--- a/packages/bridge-ui-v2/src/libs/token/getTokenWithInfoFromAddress.ts
+++ b/packages/bridge-ui-v2/src/libs/token/getTokenWithInfoFromAddress.ts
@@ -26,6 +26,7 @@ export const getTokenWithInfoFromAddress = async ({
   tokenId,
   type,
 }: GetTokenWithInfoFromAddressParams): Promise<Token | NFT> => {
+  log(`getting token info for ${contractAddress} id: ${tokenId}`);
   try {
     const tokenType: TokenType = type ?? (await detectContractType(contractAddress));
     if (tokenType === TokenType.ERC20) {
@@ -82,7 +83,7 @@ const getERC1155Info = async (
     chainId: srcChainId,
   });
 
-  if (tokenId && !uri)
+  if (tokenId !== null && tokenId !== undefined && !uri) {
     uri = await safeReadContract({
       address: contractAddress,
       abi: erc1155ABI,
@@ -90,9 +91,10 @@ const getERC1155Info = async (
       args: [BigInt(tokenId)],
       chainId: srcChainId,
     });
+  }
 
   let balance;
-  if (tokenId && owner) {
+  if (tokenId !== null && tokenId !== undefined && owner) {
     balance = await readContract({
       address: contractAddress,
       abi: erc1155ABI,
@@ -114,11 +116,14 @@ const getERC1155Info = async (
       tokenId,
       balance: balance ? balance : 0,
     } as NFT;
-    const metadata = await parseNFTMetadata(token);
-    if (metadata?.name !== '') name = metadata?.name;
-    // todo: more metadata?
-    log('logging', token.name, metadata);
-    token.metadata = metadata || undefined;
+    try {
+      const metadata = await parseNFTMetadata(token);
+      if (metadata?.name !== '') name = metadata?.name;
+      // todo: more metadata?
+      token.metadata = metadata || undefined;
+    } catch {
+      return token;
+    }
     return token;
   } catch (error) {
     log(`error fetching metadata for ${contractAddress} id: ${tokenId}`, error);
@@ -148,7 +153,7 @@ const getERC721Info = async (
 
   let uri;
 
-  if (tokenId) {
+  if (tokenId !== null && tokenId !== undefined) {
     uri = await safeReadContract({
       address: contractAddress,
       abi: erc721ABI,
@@ -168,5 +173,11 @@ const getERC721Info = async (
     tokenId: tokenId ?? 0,
     uri: uri ? uri.toString() : undefined,
   } as NFT;
+  try {
+    const metadata = await parseNFTMetadata(token);
+    token.metadata = metadata || undefined;
+  } catch {
+    return token;
+  }
   return token;
 };
diff --git a/packages/bridge-ui-v2/src/libs/util/parseNFTMetadata.ts b/packages/bridge-ui-v2/src/libs/util/parseNFTMetadata.ts
index 61314c9b9b..de89341b7a 100644
--- a/packages/bridge-ui-v2/src/libs/util/parseNFTMetadata.ts
+++ b/packages/bridge-ui-v2/src/libs/util/parseNFTMetadata.ts
@@ -11,12 +11,16 @@ const log = getLogger('libs:token:parseNFTMetadata');
 export const parseNFTMetadata = async (token: NFT): Promise<NFTMetadata | null> => {
   if (token.type !== TokenType.ERC721 && token.type !== TokenType.ERC1155) throw new Error('Not a NFT');
 
+  log(`fetching metadata for ${token.name} id: ${token.tokenId}`);
+
   if (!token.uri) throw new Error('No token URI found');
+
   if (token.uri.includes('{id}')) {
     token.uri = token.uri.replace('{id}', token.tokenId.toString());
   }
+
   const url = safeParseUrl(token.uri);
-  if (!url) throw new Error('No metadata found');
+  if (!url) throw new Error(`Invalid token URI: ${token.uri}`);
 
   let json;
   try {
@@ -27,7 +31,7 @@ export const parseNFTMetadata = async (token: NFT): Promise<NFTMetadata | null>
     //todo: handle different error scenarios?
     json = await retry(url, token.tokenId);
   }
-  if (!json || !json.data) throw new Error('No metadata found');
+  if (!json || !json.data) throw new Error(`No metadata found for ${token.name} id: ${token.tokenId}`);
 
   const metadata = {
     description: json.data.description || '',