diff --git a/packages/kit/src/connectors/wagmiConnectors/sequenceWaasConnector.ts b/packages/kit/src/connectors/wagmiConnectors/sequenceWaasConnector.ts
index 92456207..a78608dc 100644
--- a/packages/kit/src/connectors/wagmiConnectors/sequenceWaasConnector.ts
+++ b/packages/kit/src/connectors/wagmiConnectors/sequenceWaasConnector.ts
@@ -14,7 +14,8 @@ import {
   ProviderDisconnectedError,
   TransactionRejectedRpcError,
   UserRejectedRequestError,
-  getAddress
+  getAddress,
+  zeroAddress
 } from 'viem'
 import { createConnector } from 'wagmi'
 
@@ -322,7 +323,13 @@ export class SequenceWaasProvider extends ethers.AbstractProvider implements EIP
           throw new UserRejectedRequestError(new Error('User confirmation ids do not match'))
         }
 
-        selectedFeeOption = feeOptions.find(feeOption => feeOption.token.contractAddress === confirmation.feeTokenAddress)
+        selectedFeeOption = feeOptions.find(feeOption => {
+          // Handle the case where feeTokenAddress is ZeroAddress and contractAddress is null
+          if (confirmation.feeTokenAddress === zeroAddress && feeOption.token.contractAddress === null) {
+            return true
+          }
+          return feeOption.token.contractAddress === confirmation.feeTokenAddress
+        })
       }
 
       if (this.requestConfirmationHandler && this.showConfirmation) {
diff --git a/packages/kit/src/hooks/useCheckWaasFeeOptions.ts b/packages/kit/src/hooks/useCheckWaasFeeOptions.ts
new file mode 100644
index 00000000..dd2531dd
--- /dev/null
+++ b/packages/kit/src/hooks/useCheckWaasFeeOptions.ts
@@ -0,0 +1,26 @@
+'use client'
+
+import { FeeOption, Transaction } from '@0xsequence/waas'
+import { useConnections } from 'wagmi'
+
+export function useCheckWaasFeeOptions(): (params: { transactions: Transaction[]; chainId: number }) => Promise<{
+  feeQuote: string | undefined
+  feeOptions: FeeOption[] | undefined
+  isSponsored: boolean
+}> {
+  const connections = useConnections()
+  const waasConnector = connections.find(c => c.connector.id.includes('waas'))?.connector
+
+  return async ({ transactions, chainId }) => {
+    if (!waasConnector) {
+      throw new Error('WaaS connector not found')
+    }
+
+    const waasProvider = (waasConnector as any).sequenceWaasProvider
+    if (!waasProvider) {
+      throw new Error('WaaS provider not found')
+    }
+
+    return waasProvider.checkTransactionFeeOptions({ transactions, chainId })
+  }
+}
diff --git a/packages/kit/src/hooks/useWaasFeeOptions.ts b/packages/kit/src/hooks/useWaasFeeOptions.ts
index 6085b963..886c03ed 100644
--- a/packages/kit/src/hooks/useWaasFeeOptions.ts
+++ b/packages/kit/src/hooks/useWaasFeeOptions.ts
@@ -2,14 +2,11 @@
 
 import { FeeOption } from '@0xsequence/waas'
 import { ethers } from 'ethers'
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useRef } from 'react'
 import { Connector, useConnections } from 'wagmi'
 
 import { Deferred } from '../utils/deferred'
 
-// null means it's native token
-let _pendingFeeConfirmation: Deferred<{ id: string; feeTokenAddress?: string | null; confirmed: boolean }> | undefined
-
 export type WaasFeeOptionConfirmation = {
   id: string
   options: FeeOption[]
@@ -23,49 +20,55 @@ export function useWaasFeeOptions(): [
 ] {
   const connections = useConnections()
   const waasConnector: Connector | undefined = connections.find(c => c.connector.id.includes('waas'))?.connector
-
   const [pendingFeeOptionConfirmation, setPendingFeeOptionConfirmation] = useState<WaasFeeOptionConfirmation | undefined>()
+  const pendingConfirmationRef = useRef<Deferred<{ id: string; feeTokenAddress?: string | null; confirmed: boolean }>>()
 
   function confirmPendingFeeOption(id: string, feeTokenAddress: string | null) {
-    _pendingFeeConfirmation?.resolve({ id, feeTokenAddress, confirmed: true })
-    setPendingFeeOptionConfirmation(undefined)
-    _pendingFeeConfirmation = undefined
+    if (pendingConfirmationRef.current) {
+      pendingConfirmationRef.current.resolve({ id, feeTokenAddress, confirmed: true })
+      setPendingFeeOptionConfirmation(undefined)
+      pendingConfirmationRef.current = undefined
+    }
   }
 
   function rejectPendingFeeOption(id: string) {
-    _pendingFeeConfirmation?.resolve({ id, feeTokenAddress: undefined, confirmed: false })
-    setPendingFeeOptionConfirmation(undefined)
-    _pendingFeeConfirmation = undefined
+    if (pendingConfirmationRef.current) {
+      pendingConfirmationRef.current.resolve({ id, feeTokenAddress: undefined, confirmed: false })
+      setPendingFeeOptionConfirmation(undefined)
+      pendingConfirmationRef.current = undefined
+    }
   }
 
   useEffect(() => {
-    async function setup() {
-      if (!waasConnector) {
-        return
-      }
+    if (!waasConnector) {
+      return
+    }
 
-      const waasProvider = (waasConnector as any).sequenceWaasProvider
+    const waasProvider = (waasConnector as any).sequenceWaasProvider
+    if (!waasProvider) {
+      return
+    }
 
-      if (!waasProvider) {
-        return
-      }
+    const originalHandler = waasProvider.feeConfirmationHandler
 
-      waasProvider.feeConfirmationHandler = {
-        confirmFeeOption(
-          id: string,
-          options: FeeOption[],
-          txs: ethers.Transaction[],
-          chainId: number
-        ): Promise<{ id: string; feeTokenAddress?: string | null; confirmed: boolean }> {
-          const pending = new Deferred<{ id: string; confirmed: boolean }>()
-          setPendingFeeOptionConfirmation({ id, options, chainId })
-          _pendingFeeConfirmation = pending
-          return pending.promise
-        }
+    waasProvider.feeConfirmationHandler = {
+      confirmFeeOption(
+        id: string,
+        options: FeeOption[],
+        txs: ethers.Transaction[],
+        chainId: number
+      ): Promise<{ id: string; feeTokenAddress?: string | null; confirmed: boolean }> {
+        const pending = new Deferred<{ id: string; feeTokenAddress?: string | null; confirmed: boolean }>()
+        pendingConfirmationRef.current = pending
+        setPendingFeeOptionConfirmation({ id, options, chainId })
+        return pending.promise
       }
     }
-    setup()
-  })
+
+    return () => {
+      waasProvider.feeConfirmationHandler = originalHandler
+    }
+  }, [waasConnector])
 
   return [pendingFeeOptionConfirmation, confirmPendingFeeOption, rejectPendingFeeOption]
 }
diff --git a/packages/kit/src/index.ts b/packages/kit/src/index.ts
index 57342645..fcfb845a 100644
--- a/packages/kit/src/index.ts
+++ b/packages/kit/src/index.ts
@@ -84,6 +84,7 @@ export { useOpenConnectModal } from './hooks/useOpenConnectModal'
 export { useTheme } from './hooks/useTheme'
 export { useWalletSettings } from './hooks/useWalletSettings'
 export { useWaasFeeOptions } from './hooks/useWaasFeeOptions'
+export { useCheckWaasFeeOptions } from './hooks/useCheckWaasFeeOptions'
 export { useWaasSignInEmail } from './hooks/useWaasSignInEmail'
 export { useSignInEmail } from './hooks/useSignInEmail'
 export { useProjectAccessKey } from './hooks/useProjectAccessKey'
diff --git a/packages/wallet/src/contexts/Navigation.ts b/packages/wallet/src/contexts/Navigation.ts
index 18a375f4..68543700 100644
--- a/packages/wallet/src/contexts/Navigation.ts
+++ b/packages/wallet/src/contexts/Navigation.ts
@@ -102,6 +102,8 @@ export type History = Navigation[]
 type NavigationContext = {
   setHistory: (history: History) => void
   history: History
+  isBackButtonEnabled: boolean
+  setIsBackButtonEnabled: (enabled: boolean) => void
 }
 
 export const [useNavigationContext, NavigationContextProvider] = createGenericContext<NavigationContext>()
diff --git a/packages/wallet/src/shared/Alert.tsx b/packages/wallet/src/shared/Alert.tsx
new file mode 100644
index 00000000..8ba4fc88
--- /dev/null
+++ b/packages/wallet/src/shared/Alert.tsx
@@ -0,0 +1,53 @@
+import { Box, Button, Text } from '@0xsequence/design-system'
+import React, { ComponentProps } from 'react'
+
+export type AlertProps = {
+  title: string
+  description: string
+  secondaryDescription?: string
+  variant: 'negative' | 'warning' | 'positive'
+  buttonProps?: ComponentProps<typeof Button>
+  children?: React.ReactNode
+}
+
+export const Alert = ({ title, description, secondaryDescription, variant, buttonProps, children }: AlertProps) => {
+  return (
+    <Box borderRadius="md" background={variant}>
+      <Box
+        background="backgroundOverlay"
+        borderRadius="md"
+        paddingX={{ sm: '4', md: '5' }}
+        paddingY="4"
+        width="full"
+        flexDirection="column"
+        gap="3"
+      >
+        <Box width="full" flexDirection={{ sm: 'column', md: 'row' }} gap="2" justifyContent="space-between">
+          <Box flexDirection="column" gap="1">
+            <Text variant="normal" color="text100" fontWeight="medium">
+              {title}
+            </Text>
+
+            <Text variant="normal" color="text50" fontWeight="medium">
+              {description}
+            </Text>
+
+            {secondaryDescription && (
+              <Text variant="normal" color="text80" fontWeight="medium">
+                {secondaryDescription}
+              </Text>
+            )}
+          </Box>
+
+          {buttonProps ? (
+            <Box background={variant} borderRadius="sm" width={'min'} height={'min'}>
+              <Button variant="emphasis" shape="square" flexShrink="0" {...buttonProps} />
+            </Box>
+          ) : null}
+        </Box>
+
+        {children}
+      </Box>
+    </Box>
+  )
+}
diff --git a/packages/wallet/src/shared/FeeOptionSelector.tsx b/packages/wallet/src/shared/FeeOptionSelector.tsx
new file mode 100644
index 00000000..64bad879
--- /dev/null
+++ b/packages/wallet/src/shared/FeeOptionSelector.tsx
@@ -0,0 +1,138 @@
+import { Box, Text, TokenImage } from '@0xsequence/design-system'
+import { ZeroAddress, formatUnits, parseUnits } from 'ethers'
+import React from 'react'
+
+import { Alert, AlertProps } from './Alert'
+
+export interface FeeOption {
+  token: FeeToken
+  to: string
+  value: string
+  gasLimit: number
+}
+export interface FeeToken {
+  chainId: number
+  name: string
+  symbol: string
+  decimals?: number
+  logoURL: string
+  contractAddress?: string
+  tokenID?: string
+}
+
+export interface FeeOptionBalance {
+  tokenName: string
+  decimals: number
+  balance: string
+}
+
+export interface FeeOptionSelectorProps {
+  txnFeeOptions: FeeOption[]
+  feeOptionBalances: FeeOptionBalance[]
+  selectedFeeOptionAddress: string | undefined
+  setSelectedFeeOptionAddress: (address: string) => void
+}
+
+const isBalanceSufficient = (balance: string, fee: string, decimals: number) => {
+  const balanceBN = parseUnits(balance, decimals)
+  const feeBN = parseUnits(fee, decimals)
+  return balanceBN >= feeBN
+}
+
+export const FeeOptionSelector: React.FC<FeeOptionSelectorProps> = ({
+  txnFeeOptions,
+  feeOptionBalances,
+  selectedFeeOptionAddress,
+  setSelectedFeeOptionAddress
+}) => {
+  const [feeOptionAlert, setFeeOptionAlert] = React.useState<AlertProps | undefined>()
+
+  const sortedOptions = [...txnFeeOptions].sort((a, b) => {
+    const balanceA = feeOptionBalances.find(balance => balance.tokenName === a.token.name)
+    const balanceB = feeOptionBalances.find(balance => balance.tokenName === b.token.name)
+    const isSufficientA = balanceA ? isBalanceSufficient(balanceA.balance, a.value, a.token.decimals || 0) : false
+    const isSufficientB = balanceB ? isBalanceSufficient(balanceB.balance, b.value, b.token.decimals || 0) : false
+    return isSufficientA === isSufficientB ? 0 : isSufficientA ? -1 : 1
+  })
+
+  return (
+    <Box marginTop="3" width="full">
+      <Text variant="normal" color="text100" fontWeight="bold">
+        Select a fee option
+      </Text>
+      <Box flexDirection="column" marginTop="2" gap="2">
+        {sortedOptions.map((option, index) => {
+          const isSelected = selectedFeeOptionAddress === (option.token.contractAddress ?? ZeroAddress)
+          const balance = feeOptionBalances.find(b => b.tokenName === option.token.name)
+          const isSufficient = isBalanceSufficient(balance?.balance || '0', option.value, option.token.decimals || 0)
+          return (
+            <Box
+              key={index}
+              paddingX="3"
+              paddingY="2"
+              borderRadius="md"
+              borderColor={isSelected ? 'borderFocus' : 'transparent'}
+              borderWidth="thick"
+              borderStyle="solid"
+              background="backgroundRaised"
+              onClick={() => {
+                if (isSufficient) {
+                  setSelectedFeeOptionAddress(option.token.contractAddress ?? ZeroAddress)
+                  setFeeOptionAlert(undefined)
+                } else {
+                  setFeeOptionAlert({
+                    title: `Insufficient ${option.token.name} balance`,
+                    description: `Please select another fee option or add funds to your wallet.`,
+                    variant: 'warning'
+                  })
+                }
+              }}
+              cursor={isSufficient ? 'pointer' : 'default'}
+              opacity={isSufficient ? '100' : '50'}
+            >
+              <Box flexDirection="row" justifyContent="space-between" alignItems="center">
+                <Box flexDirection="row" alignItems="center" gap="2">
+                  <TokenImage src={option.token.logoURL} symbol={option.token.name} />
+                  <Box flexDirection="column">
+                    <Text variant="small" color="text100" fontWeight="bold">
+                      {option.token.name}
+                    </Text>
+                    <Text variant="xsmall" color="text80">
+                      Fee:{' '}
+                      {parseFloat(formatUnits(BigInt(option.value), option.token.decimals || 0)).toLocaleString(undefined, {
+                        maximumFractionDigits: 6
+                      })}
+                    </Text>
+                  </Box>
+                </Box>
+                <Box flexDirection="column" alignItems="flex-end">
+                  <Text variant="xsmall" color="text80">
+                    Balance:
+                  </Text>
+                  <Text variant="xsmall" color="text100">
+                    {parseFloat(formatUnits(BigInt(balance?.balance || '0'), option.token.decimals || 0)).toLocaleString(
+                      undefined,
+                      { maximumFractionDigits: 6 }
+                    )}
+                  </Text>
+                </Box>
+              </Box>
+            </Box>
+          )
+        })}
+      </Box>
+      <Box marginTop="3" alignItems="flex-end" justifyContent="center" flexDirection="column">
+        {feeOptionAlert && (
+          <Box marginTop="3">
+            <Alert
+              title={feeOptionAlert.title}
+              description={feeOptionAlert.description}
+              secondaryDescription={feeOptionAlert.secondaryDescription}
+              variant={feeOptionAlert.variant}
+            />
+          </Box>
+        )}
+      </Box>
+    </Box>
+  )
+}
diff --git a/packages/wallet/src/shared/KitWalletProvider/index.tsx b/packages/wallet/src/shared/KitWalletProvider/index.tsx
index 2372bddb..6afc5e6c 100644
--- a/packages/wallet/src/shared/KitWalletProvider/index.tsx
+++ b/packages/wallet/src/shared/KitWalletProvider/index.tsx
@@ -19,35 +19,6 @@ const DEFAULT_LOCATION: Navigation = {
   location: 'home'
 }
 
-// const DEFAULT_LOCATION: Navigation = {
-//   location: 'search',
-// }
-
-// const DEFAULT_LOCATION: Navigation = {
-//   location: 'collection-details',
-//   params: {
-//     contractAddress: '0x631998e91476da5b870d741192fc5cbc55f5a52e',
-//     chainId: 137,
-//   }
-// }
-
-// const DEFAULT_LOCATION: Navigation = {
-//   location: 'coin-details',
-//   params: {
-//     contractAddress: ethers.ZeroAddress,
-//     chainId: 137,
-//   }
-// }
-
-// const DEFAULT_LOCATION: Navigation = {
-//   location: 'collectible-details',
-//   params: {
-//     contractAddress: '0x624e4fa6980afcf8ea27bfe08e2fb5979b64df1c',
-//     chainId: 137,
-//     tokenId: '14641',
-//   }
-// }
-
 export const KitWalletProvider = (props: KitWalletProviderProps) => {
   const queryClient = new QueryClient()
 
@@ -66,6 +37,7 @@ export const KitWalletContent = ({ children }: KitWalletProviderProps) => {
 
   // Navigation Context
   const [history, setHistory] = useState<History>([])
+  const [isBackButtonEnabled, setIsBackButtonEnabled] = useState(true)
   const navigation = history.length > 0 ? history[history.length - 1] : DEFAULT_LOCATION
 
   const displayScrollbar =
@@ -86,7 +58,7 @@ export const KitWalletContent = ({ children }: KitWalletProviderProps) => {
 
   return (
     <WalletModalContextProvider value={{ setOpenWalletModal, openWalletModalState: openWalletModal }}>
-      <NavigationContextProvider value={{ setHistory, history }}>
+      <NavigationContextProvider value={{ setHistory, history, isBackButtonEnabled, setIsBackButtonEnabled }}>
         <div id="kit-wallet">
           <ThemeProvider root="#kit-wallet" scope="kit" theme={theme}>
             <AnimatePresence>
diff --git a/packages/wallet/src/shared/NavigationHeader/index.tsx b/packages/wallet/src/shared/NavigationHeader/index.tsx
index 5bae0b61..fdc187e9 100644
--- a/packages/wallet/src/shared/NavigationHeader/index.tsx
+++ b/packages/wallet/src/shared/NavigationHeader/index.tsx
@@ -1,8 +1,8 @@
-import { Box, IconButton, ChevronLeftIcon, Text, Modal, ModalPrimitive } from '@0xsequence/design-system'
-import React from 'react'
+import { Box, IconButton, ChevronLeftIcon, Text, ModalPrimitive } from '@0xsequence/design-system'
 
 import { HEADER_HEIGHT } from '../../constants'
 import { useNavigation } from '../../hooks/useNavigation'
+import { useNavigationContext } from '../../contexts/Navigation'
 
 interface NavigationHeaderProps {
   primaryText?: string
@@ -11,8 +11,10 @@ interface NavigationHeaderProps {
 
 export const NavigationHeader = ({ secondaryText, primaryText }: NavigationHeaderProps) => {
   const { goBack, history } = useNavigation()
+  const { isBackButtonEnabled } = useNavigationContext()
 
   const onClickBack = () => {
+    if (!isBackButtonEnabled) return
     goBack()
   }
 
@@ -31,7 +33,17 @@ export const NavigationHeader = ({ secondaryText, primaryText }: NavigationHeade
         paddingTop: '6px'
       }}
     >
-      {history.length > 0 ? <IconButton onClick={onClickBack} icon={ChevronLeftIcon} size="xs" /> : <Box />}
+      {history.length > 0 ? (
+        <IconButton
+          onClick={onClickBack}
+          icon={ChevronLeftIcon}
+          size="xs"
+          disabled={!isBackButtonEnabled}
+          style={{ opacity: isBackButtonEnabled ? 1 : 0.5 }}
+        />
+      ) : (
+        <Box />
+      )}
       <Box>
         <Text fontWeight="medium" variant="small" color="text50">
           {secondaryText}
diff --git a/packages/wallet/src/shared/TransactionConfirmation.tsx b/packages/wallet/src/shared/TransactionConfirmation.tsx
new file mode 100644
index 00000000..9aeea5df
--- /dev/null
+++ b/packages/wallet/src/shared/TransactionConfirmation.tsx
@@ -0,0 +1,188 @@
+import { Box, Button, ChevronRightIcon, Text, vars, Card, GradientAvatar, Spinner } from '@0xsequence/design-system'
+import { useIndexerClient } from '@0xsequence/kit'
+import { useQuery } from '@tanstack/react-query'
+import React, { useState } from 'react'
+import { useAccount } from 'wagmi'
+
+import { truncateAtMiddle } from '../utils'
+
+import { FeeOption, FeeOptionSelector, type FeeOptionBalance } from './FeeOptionSelector'
+import { SendItemInfo } from './SendItemInfo'
+
+interface TransactionConfirmationProps {
+  // Display data
+  name: string
+  symbol: string
+  imageUrl?: string
+  amount: string
+  toAddress: string
+  showSquareImage?: boolean
+  fiatValue?: string
+  chainId: number
+  balance: string
+  decimals: number
+  feeOptions?: {
+    options: FeeOption[]
+    chainId: number
+  }
+  onSelectFeeOption?: (feeTokenAddress: string | null) => void
+  isLoading?: boolean
+
+  // Callbacks
+  onConfirm: () => void
+  onCancel: () => void
+}
+
+const useFeeOptionBalances = (feeOptions: TransactionConfirmationProps['feeOptions'], chainId: number) => {
+  const { address: accountAddress } = useAccount()
+  const indexerClient = useIndexerClient(chainId)
+
+  return useQuery({
+    queryKey: ['feeOptionBalances', chainId, accountAddress, feeOptions?.options?.length],
+    queryFn: async () => {
+      if (!feeOptions?.options || !accountAddress || !indexerClient) return []
+
+      const nativeTokenBalance = await indexerClient.getEtherBalance({
+        accountAddress
+      })
+
+      const tokenBalances = await indexerClient.getTokenBalances({
+        accountAddress
+      })
+
+      return feeOptions.options.map(option => {
+        if (option.token.contractAddress === null) {
+          return {
+            tokenName: option.token.name,
+            decimals: option.token.decimals || 0,
+            balance: nativeTokenBalance.balance.balanceWei
+          }
+        } else {
+          return {
+            tokenName: option.token.name,
+            decimals: option.token.decimals || 0,
+            balance:
+              tokenBalances.balances.find(b => b.contractAddress.toLowerCase() === option.token.contractAddress?.toLowerCase())
+                ?.balance || '0'
+          }
+        }
+      })
+    },
+    enabled: Boolean(feeOptions?.options && accountAddress && indexerClient),
+    refetchInterval: 10000,
+    staleTime: 10000
+  })
+}
+
+export const TransactionConfirmation = ({
+  name,
+  symbol,
+  imageUrl,
+  amount,
+  toAddress,
+  showSquareImage,
+  fiatValue,
+  chainId,
+  balance,
+  decimals,
+  feeOptions,
+  onSelectFeeOption,
+  isLoading,
+  onConfirm,
+  onCancel
+}: TransactionConfirmationProps) => {
+  const [selectedFeeOptionAddress, setSelectedFeeOptionAddress] = useState<string>()
+  const { data: feeOptionBalances = [] } = useFeeOptionBalances(feeOptions, chainId)
+
+  const handleFeeOptionSelect = (address: string) => {
+    setSelectedFeeOptionAddress(address)
+    onSelectFeeOption?.(address)
+  }
+
+  // If feeOptions exist and have options, a selection is required
+  // If feeOptions don't exist or have no options, no selection is required
+  const isFeeSelectionRequired = Boolean(feeOptions?.options?.length)
+  const isConfirmDisabled = isFeeSelectionRequired && !selectedFeeOptionAddress
+
+  return (
+    <Box width="full" height="full" display="flex" alignItems="center" justifyContent="center" background="backgroundPrimary">
+      <Box gap="2" flexDirection="column" background="backgroundPrimary" width="full">
+        <Box background="backgroundSecondary" borderRadius="md" padding="4" paddingBottom="3" gap="2" flexDirection="column">
+          <SendItemInfo
+            imageUrl={imageUrl}
+            showSquareImage={showSquareImage}
+            name={name}
+            symbol={symbol}
+            chainId={chainId}
+            balance={balance}
+            decimals={decimals}
+          />
+
+          <Box marginTop="2" gap="1" flexDirection="column">
+            <Text variant="small" color="text50">
+              Amount
+            </Text>
+            <Box flexDirection="row" alignItems="center" gap="2">
+              <Text variant="normal" color="text100">
+                {amount} {symbol}
+              </Text>
+              {fiatValue && (
+                <Text variant="small" color="text50">
+                  ~${fiatValue}
+                </Text>
+              )}
+            </Box>
+          </Box>
+
+          <Box marginTop="2" gap="1" flexDirection="column">
+            <Text variant="small" color="text50">
+              To
+            </Text>
+            <Card width="full" flexDirection="row" alignItems="center" style={{ height: '52px' }}>
+              <Box flexDirection="row" justifyContent="center" alignItems="center" gap="2">
+                <GradientAvatar address={toAddress} style={{ width: '20px' }} />
+                <Text color="text100" variant="normal">{`0x${truncateAtMiddle(toAddress.substring(2), 10)}`}</Text>
+              </Box>
+            </Card>
+          </Box>
+
+          {isFeeSelectionRequired && feeOptions?.options && (
+            <FeeOptionSelector
+              txnFeeOptions={feeOptions.options}
+              feeOptionBalances={feeOptionBalances}
+              selectedFeeOptionAddress={selectedFeeOptionAddress}
+              setSelectedFeeOptionAddress={handleFeeOptionSelect}
+            />
+          )}
+        </Box>
+
+        <Box marginTop="3" gap="2">
+          {isLoading ? (
+            <Box width="full" style={{ height: '52px' }} alignItems="center" justifyContent="center">
+              <Spinner />
+            </Box>
+          ) : (
+            <>
+              <Button
+                width="full"
+                variant="primary"
+                onClick={onConfirm}
+                label="Confirm"
+                rightIcon={ChevronRightIcon}
+                disabled={isConfirmDisabled}
+                style={{ height: '52px', borderRadius: vars.radii.md }}
+              />
+              <Button
+                variant="glass"
+                width="full"
+                onClick={onCancel}
+                label="Cancel"
+                style={{ height: '52px', borderRadius: vars.radii.md }}
+              />
+            </>
+          )}
+        </Box>
+      </Box>
+    </Box>
+  )
+}
diff --git a/packages/wallet/src/views/CollectibleDetails/Skeleton.tsx b/packages/wallet/src/views/CollectibleDetails/Skeleton.tsx
index b3d0938e..f37c6e40 100644
--- a/packages/wallet/src/views/CollectibleDetails/Skeleton.tsx
+++ b/packages/wallet/src/views/CollectibleDetails/Skeleton.tsx
@@ -22,7 +22,7 @@ export const CollectibleDetailsSkeleton = () => {
           <Skeleton style={{ width: '140px', height: '40px' }} />
         </Box>
         <Box>
-          <Skeleton style={{ width: '347px', height: '347px' }} />
+          <Skeleton style={{ width: '100%', aspectRatio: '1/1' }} />
         </Box>
         <Box>
           {/* balance */}
diff --git a/packages/wallet/src/views/CollectibleDetails/index.tsx b/packages/wallet/src/views/CollectibleDetails/index.tsx
index a814be50..bd2b92c9 100644
--- a/packages/wallet/src/views/CollectibleDetails/index.tsx
+++ b/packages/wallet/src/views/CollectibleDetails/index.tsx
@@ -105,15 +105,17 @@ export const CollectibleDetails = ({ contractAddress, chainId, tokenId }: Collec
       >
         <Box gap="3" alignItems="center" justifyContent="center" flexDirection="column">
           <Box flexDirection="row" gap="2" justifyContent="center" alignItems="center">
-            <Image
-              borderRadius="circle"
-              width="8"
-              src={collectionLogo}
-              alt="collection logo"
-              style={{
-                objectFit: 'cover'
-              }}
-            />
+            {collectionLogo && (
+              <Image
+                borderRadius="circle"
+                width="8"
+                src={collectionLogo}
+                alt="collection logo"
+                style={{
+                  objectFit: 'cover'
+                }}
+              />
+            )}
             <Box gap="1" flexDirection="row" justifyContent="center" alignItems="center">
               <Text variant="small" fontWeight="bold" color="text100">
                 {collectionName}
diff --git a/packages/wallet/src/views/CollectionDetails/index.tsx b/packages/wallet/src/views/CollectionDetails/index.tsx
index 511d942c..4524416d 100644
--- a/packages/wallet/src/views/CollectionDetails/index.tsx
+++ b/packages/wallet/src/views/CollectionDetails/index.tsx
@@ -94,7 +94,7 @@ export const CollectionDetails = ({ chainId, contractAddress }: CollectionDetail
                   alignItems="center"
                   marginBottom="2"
                 >
-                  <Image style={{ height: '100%' }} src={balance.tokenMetadata?.image} />
+                  <Image style={{ height: '100%' }} borderRadius="sm" src={balance.tokenMetadata?.image} />
                 </Box>
                 <Box>
                   <Text variant="normal" fontWeight="bold" color="text100">
diff --git a/packages/wallet/src/views/SendCoin.tsx b/packages/wallet/src/views/SendCoin.tsx
index 2050e804..6a9fcee4 100644
--- a/packages/wallet/src/views/SendCoin.tsx
+++ b/packages/wallet/src/views/SendCoin.tsx
@@ -19,15 +19,19 @@ import {
   ExtendedConnector,
   useExchangeRate,
   useCoinPrices,
-  useBalances
+  useBalances,
+  useCheckWaasFeeOptions,
+  useWaasFeeOptions
 } from '@0xsequence/kit'
 import { ethers } from 'ethers'
-import React, { useState, ChangeEvent, useRef } from 'react'
+import React, { useState, ChangeEvent, useRef, useEffect } from 'react'
 import { useAccount, useChainId, useSwitchChain, useConfig, useSendTransaction } from 'wagmi'
 
 import { ERC_20_ABI, HEADER_HEIGHT } from '../constants'
+import { useNavigationContext } from '../contexts/Navigation'
 import { useSettings, useNavigation } from '../hooks'
 import { SendItemInfo } from '../shared/SendItemInfo'
+import { TransactionConfirmation } from '../shared/TransactionConfirmation'
 import { compareAddress, computeBalanceFiat, limitDecimals, isEthAddress, truncateAtMiddle } from '../utils'
 
 interface SendCoinProps {
@@ -37,6 +41,7 @@ interface SendCoinProps {
 
 export const SendCoin = ({ chainId, contractAddress }: SendCoinProps) => {
   const { setNavigation } = useNavigation()
+  const { setIsBackButtonEnabled } = useNavigationContext()
   const { analytics } = useAnalyticsContext()
   const { chains } = useConfig()
   const connectedChainId = useChainId()
@@ -51,6 +56,19 @@ export const SendCoin = ({ chainId, contractAddress }: SendCoinProps) => {
   const [toAddress, setToAddress] = useState<string>('')
   const { sendTransaction } = useSendTransaction()
   const [isSendTxnPending, setIsSendTxnPending] = useState(false)
+  const [showConfirmation, setShowConfirmation] = useState(false)
+  const [feeOptions, setFeeOptions] = useState<
+    | {
+        options: any[]
+        chainId: number
+      }
+    | undefined
+  >()
+  const [isCheckingFeeOptions, setIsCheckingFeeOptions] = useState(false)
+  const [selectedFeeTokenAddress, setSelectedFeeTokenAddress] = useState<string | null>(null)
+  const checkFeeOptions = useCheckWaasFeeOptions()
+  const [pendingFeeOption, confirmFeeOption, rejectFeeOption] = useWaasFeeOptions()
+
   const { data: balances = [], isPending: isPendingBalances } = useBalances({
     chainIds: [chainId],
     accountAddress: accountAddress,
@@ -69,6 +87,18 @@ export const SendCoin = ({ chainId, contractAddress }: SendCoinProps) => {
 
   const isPending = isPendingBalances || isPendingCoinPrices || isPendingConversionRate
 
+  // Handle fee option confirmation when pendingFeeOption is available
+  useEffect(() => {
+    if (pendingFeeOption && selectedFeeTokenAddress !== null) {
+      confirmFeeOption(pendingFeeOption.id, selectedFeeTokenAddress)
+    }
+  }, [pendingFeeOption, selectedFeeTokenAddress])
+
+  // Control back button when showing confirmation
+  useEffect(() => {
+    setIsBackButtonEnabled(!showConfirmation)
+  }, [showConfirmation, setIsBackButtonEnabled])
+
   if (isPending) {
     return null
   }
@@ -119,69 +149,99 @@ export const SendCoin = ({ chainId, contractAddress }: SendCoinProps) => {
     setToAddress('')
   }
 
-  const executeTransaction = async (e: ChangeEvent<HTMLFormElement>) => {
+  const handleSendClick = async (e: ChangeEvent<HTMLFormElement>) => {
+    e.preventDefault()
+
+    setIsCheckingFeeOptions(true)
+
+    const sendAmount = ethers.parseUnits(amountToSendFormatted, decimals)
+    let transaction
+
+    if (isNativeCoin) {
+      transaction = {
+        to: toAddress as `0x${string}`,
+        value: BigInt(sendAmount.toString())
+      }
+    } else {
+      transaction = {
+        to: tokenBalance?.contractAddress as `0x${string}`,
+        data: new ethers.Interface(ERC_20_ABI).encodeFunctionData('transfer', [
+          toAddress,
+          ethers.toQuantity(sendAmount)
+        ]) as `0x${string}`
+      }
+    }
+
+    // Check fee options before showing confirmation
+    const feeOptionsResult = await checkFeeOptions({
+      transactions: [transaction],
+      chainId
+    })
+
+    setFeeOptions(
+      feeOptionsResult?.feeOptions
+        ? {
+            options: feeOptionsResult.feeOptions,
+            chainId
+          }
+        : undefined
+    )
+
+    setShowConfirmation(true)
+
+    setIsCheckingFeeOptions(false)
+  }
+
+  const executeTransaction = async () => {
     if (!isCorrectChainId && isConnectorSequenceBased) {
       await switchChainAsync({ chainId })
     }
 
-    e.preventDefault()
+    analytics?.track({
+      event: 'SEND_TRANSACTION_REQUEST',
+      props: {
+        walletClient: (connector as ExtendedConnector | undefined)?._wallet?.id || 'unknown',
+        source: 'sequence-kit/wallet'
+      }
+    })
+
+    setIsSendTxnPending(true)
 
     const sendAmount = ethers.parseUnits(amountToSendFormatted, decimals)
 
-    if (isNativeCoin) {
-      analytics?.track({
-        event: 'SEND_TRANSACTION_REQUEST',
-        props: {
-          walletClient: (connector as ExtendedConnector | undefined)?._wallet?.id || 'unknown',
-          source: 'sequence-kit/wallet'
+    const txOptions = {
+      onSettled: (result: any) => {
+        setIsBackButtonEnabled(true)
+
+        if (result) {
+          setNavigation({
+            location: 'home'
+          })
         }
-      })
-      setIsSendTxnPending(true)
+        setIsSendTxnPending(false)
+      }
+    }
+
+    if (isNativeCoin) {
       sendTransaction(
         {
-          to: toAddress as `0x${string}}`,
+          to: toAddress as `0x${string}`,
           value: BigInt(sendAmount.toString()),
           gas: null
         },
-        {
-          onSettled: result => {
-            if (result) {
-              setNavigation({
-                location: 'home'
-              })
-            }
-            setIsSendTxnPending(false)
-          }
-        }
+        txOptions
       )
     } else {
-      analytics?.track({
-        event: 'SEND_TRANSACTION_REQUEST',
-        props: {
-          walletClient: (connector as ExtendedConnector | undefined)?._wallet?.id || 'unknown',
-          source: 'sequence-kit/wallet'
-        }
-      })
-      setIsSendTxnPending(true)
       sendTransaction(
         {
-          to: tokenBalance?.contractAddress as `0x${string}}`,
+          to: tokenBalance?.contractAddress as `0x${string}`,
           data: new ethers.Interface(ERC_20_ABI).encodeFunctionData('transfer', [
             toAddress,
             ethers.toQuantity(sendAmount)
           ]) as `0x${string}`,
           gas: null
         },
-        {
-          onSettled: result => {
-            if (result) {
-              setNavigation({
-                location: 'home'
-              })
-            }
-            setIsSendTxnPending(false)
-          }
-        }
+        txOptions
       )
     }
   }
@@ -196,130 +256,159 @@ export const SendCoin = ({ chainId, contractAddress }: SendCoinProps) => {
       gap="2"
       flexDirection="column"
       as="form"
-      onSubmit={executeTransaction}
+      onSubmit={handleSendClick}
       pointerEvents={isSendTxnPending ? 'none' : 'auto'}
     >
-      <Box background="backgroundSecondary" borderRadius="md" padding="4" gap="2" flexDirection="column">
-        <SendItemInfo
-          imageUrl={imageUrl}
-          decimals={decimals}
-          name={name}
-          symbol={symbol}
-          balance={tokenBalance?.balance || '0'}
-          fiatValue={computeBalanceFiat({
-            balance: tokenBalance as TokenBalance,
-            prices: coinPrices,
-            conversionRate,
-            decimals
-          })}
-          chainId={chainId}
-        />
-        <NumericInput
-          ref={amountInputRef}
-          style={{ fontSize: vars.fontSizes.xlarge, fontWeight: vars.fontWeights.bold }}
-          name="amount"
-          value={amount}
-          onChange={handleChangeAmount}
-          controls={
-            <>
-              <Text variant="small" color="text50" whiteSpace="nowrap">
-                {`~${fiatCurrency.sign}${amountToSendFiat}`}
+      {!showConfirmation && (
+        <>
+          <Box background="backgroundSecondary" borderRadius="md" padding="4" gap="2" flexDirection="column">
+            <SendItemInfo
+              imageUrl={imageUrl}
+              decimals={decimals}
+              name={name}
+              symbol={symbol}
+              balance={tokenBalance?.balance || '0'}
+              fiatValue={computeBalanceFiat({
+                balance: tokenBalance as TokenBalance,
+                prices: coinPrices,
+                conversionRate,
+                decimals
+              })}
+              chainId={chainId}
+            />
+            <NumericInput
+              ref={amountInputRef}
+              style={{ fontSize: vars.fontSizes.xlarge, fontWeight: vars.fontWeights.bold }}
+              name="amount"
+              value={amount}
+              onChange={handleChangeAmount}
+              controls={
+                <>
+                  <Text variant="small" color="text50" whiteSpace="nowrap">
+                    {`~${fiatCurrency.sign}${amountToSendFiat}`}
+                  </Text>
+                  <Button size="xs" shape="square" label="Max" onClick={handleMax} data-id="maxCoin" flexShrink="0" />
+                  <Text variant="xlarge" fontWeight="bold" color="text100">
+                    {symbol}
+                  </Text>
+                </>
+              }
+            />
+            {insufficientFunds && (
+              <Text as="div" variant="normal" color="negative" marginTop="2">
+                Insufficient Funds
               </Text>
-              <Button size="xs" shape="square" label="Max" onClick={handleMax} data-id="maxCoin" flexShrink="0" />
-              <Text variant="xlarge" fontWeight="bold" color="text100">
-                {symbol}
+            )}
+          </Box>
+          <Box background="backgroundSecondary" borderRadius="md" padding="4" gap="2" flexDirection="column">
+            <Text variant="normal" color="text50">
+              To
+            </Text>
+            {isEthAddress(toAddress) ? (
+              <Card
+                clickable
+                width="full"
+                flexDirection="row"
+                justifyContent="space-between"
+                alignItems="center"
+                onClick={handleToAddressClear}
+                style={{ height: '52px' }}
+              >
+                <Box flexDirection="row" justifyContent="center" alignItems="center" gap="2">
+                  <GradientAvatar address={toAddress} style={{ width: '20px' }} />
+                  <Text color="text100" variant="normal">{`0x${truncateAtMiddle(toAddress.substring(2), 10)}`}</Text>
+                </Box>
+                <CloseIcon size="sm" color="white" />
+              </Card>
+            ) : (
+              <TextInput
+                value={toAddress}
+                onChange={ev => setToAddress(ev.target.value)}
+                placeholder={`${nativeTokenInfo.name} Address (0x...)`}
+                name="to-address"
+                data-1p-ignore
+                controls={
+                  <Button
+                    size="xs"
+                    shape="square"
+                    label="Paste"
+                    onClick={handlePaste}
+                    data-id="to-address"
+                    flexShrink="0"
+                    leftIcon={CopyIcon}
+                  />
+                }
+              />
+            )}
+          </Box>
+
+          {showSwitchNetwork && (
+            <Box marginTop="3">
+              <Text variant="small" color="negative" marginBottom="2">
+                The wallet is connected to the wrong network. Please switch network before proceeding
               </Text>
-            </>
-          }
-        />
-        {insufficientFunds && (
-          <Text as="div" variant="normal" color="negative" marginTop="2">
-            Insufficient Funds
-          </Text>
-        )}
-      </Box>
-      <Box background="backgroundSecondary" borderRadius="md" padding="4" gap="2" flexDirection="column">
-        <Text variant="normal" color="text50">
-          To
-        </Text>
-        {isEthAddress(toAddress) ? (
-          <Card
-            clickable
-            width="full"
-            flexDirection="row"
-            justifyContent="space-between"
-            alignItems="center"
-            onClick={handleToAddressClear}
-            style={{ height: '52px' }}
-          >
-            <Box flexDirection="row" justifyContent="center" alignItems="center" gap="2">
-              <GradientAvatar address={toAddress} style={{ width: '20px' }} />
-              <Text color="text100">{`0x${truncateAtMiddle(toAddress.substring(2), 8)}`}</Text>
+              <Button
+                marginTop="2"
+                width="full"
+                variant="primary"
+                type="button"
+                label="Switch Network"
+                onClick={async () => await switchChainAsync({ chainId })}
+                disabled={isCorrectChainId}
+                style={{ height: '52px', borderRadius: vars.radii.md }}
+              />
             </Box>
-            <CloseIcon size="xs" />
-          </Card>
-        ) : (
-          <TextInput
-            value={toAddress}
-            onChange={ev => setToAddress(ev.target.value)}
-            placeholder={`${nativeTokenInfo.name} Address (0x...)`}
-            name="to-address"
-            data-1p-ignore
-            controls={
+          )}
+
+          <Box style={{ height: '52px' }} alignItems="center" justifyContent="center">
+            {isCheckingFeeOptions ? (
+              <Spinner />
+            ) : (
               <Button
-                size="xs"
-                shape="square"
-                label="Paste"
-                onClick={handlePaste}
-                data-id="to-address"
-                flexShrink="0"
-                leftIcon={CopyIcon}
+                color="text100"
+                marginTop="3"
+                width="full"
+                variant="primary"
+                type="submit"
+                disabled={
+                  !isNonZeroAmount ||
+                  !isEthAddress(toAddress) ||
+                  insufficientFunds ||
+                  (!isCorrectChainId && !isConnectorSequenceBased)
+                }
+                label="Send"
+                rightIcon={ChevronRightIcon}
+                style={{ height: '52px', borderRadius: vars.radii.md }}
               />
-            }
-          />
-        )}
-      </Box>
-
-      {showSwitchNetwork && (
-        <Box marginTop="3">
-          <Text variant="small" color="negative" marginBottom="2">
-            The wallet is connected to the wrong network. Please switch network before proceeding
-          </Text>
-          <Button
-            marginTop="2"
-            width="full"
-            variant="primary"
-            type="button"
-            label="Switch Network"
-            onClick={async () => await switchChainAsync({ chainId })}
-            disabled={isCorrectChainId}
-            style={{ height: '52px', borderRadius: vars.radii.md }}
-          />
-        </Box>
+            )}
+          </Box>
+        </>
       )}
 
-      <Box style={{ height: '52px' }} alignItems="center" justifyContent="center">
-        {isSendTxnPending ? (
-          <Spinner />
-        ) : (
-          <Button
-            color="text100"
-            marginTop="3"
-            width="full"
-            variant="primary"
-            type="submit"
-            disabled={
-              !isNonZeroAmount ||
-              !isEthAddress(toAddress) ||
-              insufficientFunds ||
-              (!isCorrectChainId && !isConnectorSequenceBased)
-            }
-            label="Send"
-            rightIcon={ChevronRightIcon}
-            style={{ height: '52px', borderRadius: vars.radii.md }}
-          />
-        )}
-      </Box>
+      {showConfirmation && (
+        <TransactionConfirmation
+          name={name}
+          symbol={symbol}
+          imageUrl={imageUrl}
+          amount={amountToSendFormatted}
+          toAddress={toAddress}
+          chainId={chainId}
+          balance={tokenBalance?.balance || '0'}
+          decimals={decimals}
+          fiatValue={amountToSendFiat}
+          feeOptions={feeOptions}
+          onSelectFeeOption={feeTokenAddress => {
+            setSelectedFeeTokenAddress(feeTokenAddress)
+          }}
+          isLoading={isSendTxnPending}
+          onConfirm={() => {
+            executeTransaction()
+          }}
+          onCancel={() => {
+            setShowConfirmation(false)
+          }}
+        />
+      )}
     </Box>
   )
 }
diff --git a/packages/wallet/src/views/SendCollectible.tsx b/packages/wallet/src/views/SendCollectible.tsx
index 23f685e5..05569d67 100644
--- a/packages/wallet/src/views/SendCollectible.tsx
+++ b/packages/wallet/src/views/SendCollectible.tsx
@@ -15,15 +15,23 @@ import {
   Card
 } from '@0xsequence/design-system'
 import { TokenBalance } from '@0xsequence/indexer'
-import { getNativeTokenInfoByChainId, useAnalyticsContext, ExtendedConnector, useCollectibleBalance } from '@0xsequence/kit'
+import {
+  getNativeTokenInfoByChainId,
+  useAnalyticsContext,
+  ExtendedConnector,
+  useCollectibleBalance,
+  useCheckWaasFeeOptions,
+  useWaasFeeOptions
+} from '@0xsequence/kit'
 import { ethers } from 'ethers'
 import React, { useRef, useState, ChangeEvent, useEffect } from 'react'
-import { zeroAddress } from 'viem'
 import { useAccount, useChainId, useSwitchChain, useConfig, useSendTransaction } from 'wagmi'
 
 import { ERC_1155_ABI, ERC_721_ABI, HEADER_HEIGHT } from '../constants'
+import { useNavigationContext } from '../contexts/Navigation'
 import { useNavigation } from '../hooks'
 import { SendItemInfo } from '../shared/SendItemInfo'
+import { TransactionConfirmation } from '../shared/TransactionConfirmation'
 import { limitDecimals, isEthAddress, truncateAtMiddle } from '../utils'
 
 interface SendCollectibleProps {
@@ -34,6 +42,7 @@ interface SendCollectibleProps {
 
 export const SendCollectible = ({ chainId, contractAddress, tokenId }: SendCollectibleProps) => {
   const { setNavigation } = useNavigation()
+  const { setIsBackButtonEnabled } = useNavigationContext()
   const { analytics } = useAnalyticsContext()
   const { chains } = useConfig()
   const connectedChainId = useChainId()
@@ -48,6 +57,19 @@ export const SendCollectible = ({ chainId, contractAddress, tokenId }: SendColle
   const [showAmountControls, setShowAmountControls] = useState<boolean>(false)
   const { sendTransaction } = useSendTransaction()
   const [isSendTxnPending, setIsSendTxnPending] = useState(false)
+  const [showConfirmation, setShowConfirmation] = useState(false)
+  const [feeOptions, setFeeOptions] = useState<
+    | {
+        options: any[]
+        chainId: number
+      }
+    | undefined
+  >()
+  const [isCheckingFeeOptions, setIsCheckingFeeOptions] = useState(false)
+  const [selectedFeeTokenAddress, setSelectedFeeTokenAddress] = useState<string | null>(null)
+  const checkFeeOptions = useCheckWaasFeeOptions()
+  const [pendingFeeOption, confirmFeeOption, rejectFeeOption] = useWaasFeeOptions()
+
   const { data: tokenBalance, isPending: isPendingBalances } = useCollectibleBalance({
     accountAddress,
     chainId,
@@ -71,6 +93,16 @@ export const SendCollectible = ({ chainId, contractAddress, tokenId }: SendColle
     }
   }, [tokenBalance])
 
+  useEffect(() => {
+    if (pendingFeeOption && selectedFeeTokenAddress !== null) {
+      confirmFeeOption(pendingFeeOption.id, selectedFeeTokenAddress)
+    }
+  }, [pendingFeeOption, selectedFeeTokenAddress])
+
+  useEffect(() => {
+    setIsBackButtonEnabled(!showConfirmation)
+  }, [showConfirmation, setIsBackButtonEnabled])
+
   const nativeTokenInfo = getNativeTokenInfoByChainId(chainId, chains)
 
   const isPending = isPendingBalances
@@ -131,15 +163,79 @@ export const SendCollectible = ({ chainId, contractAddress, tokenId }: SendColle
     setToAddress('')
   }
 
-  const executeTransaction = async (e: ChangeEvent<HTMLFormElement>) => {
+  const handleSendClick = async (e: ChangeEvent<HTMLFormElement>) => {
     e.preventDefault()
 
+    setIsCheckingFeeOptions(true)
+
+    const sendAmount = ethers.parseUnits(amountToSendFormatted, decimals)
+    let transaction
+
+    switch (contractType) {
+      case 'ERC721':
+        transaction = {
+          to: (tokenBalance as TokenBalance).contractAddress as `0x${string}`,
+          data: new ethers.Interface(ERC_721_ABI).encodeFunctionData('safeTransferFrom', [
+            accountAddress,
+            toAddress,
+            tokenId
+          ]) as `0x${string}`
+        }
+        break
+      case 'ERC1155':
+      default:
+        transaction = {
+          to: (tokenBalance as TokenBalance).contractAddress as `0x${string}`,
+          data: new ethers.Interface(ERC_1155_ABI).encodeFunctionData('safeBatchTransferFrom', [
+            accountAddress,
+            toAddress,
+            [tokenId],
+            [ethers.toQuantity(sendAmount)],
+            new Uint8Array()
+          ]) as `0x${string}`
+        }
+    }
+
+    // Check fee options before showing confirmation
+    const feeOptionsResult = await checkFeeOptions({
+      transactions: [transaction],
+      chainId
+    })
+
+    setFeeOptions(
+      feeOptionsResult?.feeOptions
+        ? {
+            options: feeOptionsResult.feeOptions,
+            chainId
+          }
+        : undefined
+    )
+
+    setShowConfirmation(true)
+
+    setIsCheckingFeeOptions(false)
+  }
+
+  const executeTransaction = async () => {
     if (!isCorrectChainId && isConnectorSequenceBased) {
       switchChain({ chainId })
     }
 
     const sendAmount = ethers.parseUnits(amountToSendFormatted, decimals)
 
+    const txOptions = {
+      onSettled: (result: any) => {
+        setIsBackButtonEnabled(true)
+
+        if (result) {
+          setNavigation({
+            location: 'home'
+          })
+        }
+        setIsSendTxnPending(false)
+      }
+    }
+
     switch (contractType) {
       case 'ERC721':
         analytics?.track({
@@ -153,7 +249,7 @@ export const SendCollectible = ({ chainId, contractAddress, tokenId }: SendColle
         // _from, _to, _id
         sendTransaction(
           {
-            to: (tokenBalance as TokenBalance).contractAddress as `0x${string}}`,
+            to: (tokenBalance as TokenBalance).contractAddress as `0x${string}`,
             data: new ethers.Interface(ERC_721_ABI).encodeFunctionData('safeTransferFrom', [
               accountAddress,
               toAddress,
@@ -161,16 +257,7 @@ export const SendCollectible = ({ chainId, contractAddress, tokenId }: SendColle
             ]) as `0x${string}`,
             gas: null
           },
-          {
-            onSettled: result => {
-              if (result) {
-                setNavigation({
-                  location: 'home'
-                })
-              }
-              setIsSendTxnPending(false)
-            }
-          }
+          txOptions
         )
         break
       case 'ERC1155':
@@ -186,7 +273,7 @@ export const SendCollectible = ({ chainId, contractAddress, tokenId }: SendColle
         // _from, _to, _ids, _amounts, _data
         sendTransaction(
           {
-            to: (tokenBalance as TokenBalance).contractAddress as `0x${string}}`,
+            to: (tokenBalance as TokenBalance).contractAddress as `0x${string}`,
             data: new ethers.Interface(ERC_1155_ABI).encodeFunctionData('safeBatchTransferFrom', [
               accountAddress,
               toAddress,
@@ -196,16 +283,7 @@ export const SendCollectible = ({ chainId, contractAddress, tokenId }: SendColle
             ]) as `0x${string}`,
             gas: null
           },
-          {
-            onSettled: result => {
-              if (result) {
-                setNavigation({
-                  location: 'home'
-                })
-              }
-              setIsSendTxnPending(false)
-            }
-          }
+          txOptions
         )
     }
   }
@@ -225,126 +303,155 @@ export const SendCollectible = ({ chainId, contractAddress, tokenId }: SendColle
       gap="2"
       flexDirection="column"
       as="form"
-      onSubmit={executeTransaction}
+      onSubmit={handleSendClick}
       pointerEvents={isSendTxnPending ? 'none' : 'auto'}
     >
-      <Box background="backgroundSecondary" borderRadius="md" padding="4" gap="2" flexDirection="column">
-        <SendItemInfo
-          imageUrl={imageUrl}
-          showSquareImage
-          decimals={decimals}
-          name={name}
-          symbol={''}
-          balance={tokenBalance?.balance || '0'}
-          chainId={chainId}
-        />
-        <NumericInput
-          ref={amountInputRef}
-          style={{ fontSize: vars.fontSizes.xlarge, fontWeight: vars.fontWeights.bold }}
-          name="amount"
-          value={amount}
-          onChange={handleChangeAmount}
-          disabled={!showAmountControls}
-          controls={
-            <>
-              {showAmountControls && (
-                <Box gap="2">
-                  <Button disabled={isMinimum} size="xs" onClick={handleSubtractOne} leftIcon={SubtractIcon} />
-                  <Button disabled={isMaximum} size="xs" onClick={handleAddOne} leftIcon={AddIcon} />
-                  <Button size="xs" shape="square" label="Max" onClick={handleMax} data-id="maxCoin" flexShrink="0" />
+      {!showConfirmation && (
+        <>
+          <Box background="backgroundSecondary" borderRadius="md" padding="4" gap="2" flexDirection="column">
+            <SendItemInfo
+              imageUrl={imageUrl}
+              showSquareImage
+              decimals={decimals}
+              name={name}
+              symbol={''}
+              balance={tokenBalance?.balance || '0'}
+              chainId={chainId}
+            />
+            <NumericInput
+              ref={amountInputRef}
+              style={{ fontSize: vars.fontSizes.xlarge, fontWeight: vars.fontWeights.bold }}
+              name="amount"
+              value={amount}
+              onChange={handleChangeAmount}
+              disabled={!showAmountControls}
+              controls={
+                <>
+                  {showAmountControls && (
+                    <Box gap="2">
+                      <Button disabled={isMinimum} size="xs" onClick={handleSubtractOne} leftIcon={SubtractIcon} />
+                      <Button disabled={isMaximum} size="xs" onClick={handleAddOne} leftIcon={AddIcon} />
+                      <Button size="xs" shape="square" label="Max" onClick={handleMax} data-id="maxCoin" flexShrink="0" />
+                    </Box>
+                  )}
+                </>
+              }
+            />
+            {insufficientFunds && (
+              <Text as="div" variant="normal" color="negative" marginTop="2">
+                Insufficient Balance
+              </Text>
+            )}
+          </Box>
+          <Box background="backgroundSecondary" borderRadius="md" padding="4" gap="2" flexDirection="column">
+            <Text variant="normal" color="text50">
+              To
+            </Text>
+            {isEthAddress(toAddress) ? (
+              <Card
+                clickable
+                width="full"
+                flexDirection="row"
+                justifyContent="space-between"
+                alignItems="center"
+                onClick={handleToAddressClear}
+                style={{ height: '52px' }}
+              >
+                <Box flexDirection="row" justifyContent="center" alignItems="center" gap="2">
+                  <GradientAvatar address={toAddress} style={{ width: '20px' }} />
+                  <Text color="text100" variant="normal">{`0x${truncateAtMiddle(toAddress.substring(2), 10)}`}</Text>
                 </Box>
-              )}
-            </>
-          }
-        />
-        {insufficientFunds && (
-          <Text as="div" variant="normal" color="negative" marginTop="2">
-            Insufficient Balance
-          </Text>
-        )}
-      </Box>
-      <Box background="backgroundSecondary" borderRadius="md" padding="4" gap="2" flexDirection="column">
-        <Text variant="normal" color="text50">
-          To
-        </Text>
-        {isEthAddress(toAddress) ? (
-          <Card
-            clickable
-            width="full"
-            flexDirection="row"
-            justifyContent="space-between"
-            alignItems="center"
-            onClick={handleToAddressClear}
-            style={{ height: '52px' }}
-          >
-            <Box flexDirection="row" justifyContent="center" alignItems="center" gap="2">
-              <GradientAvatar address={toAddress} style={{ width: '20px' }} />
-              <Text color="text100">{`0x${truncateAtMiddle(toAddress.substring(2), 8)}`}</Text>
+                <CloseIcon size="sm" color="white" />
+              </Card>
+            ) : (
+              <TextInput
+                value={toAddress}
+                onChange={ev => setToAddress(ev.target.value)}
+                placeholder={`${nativeTokenInfo.name} Address (0x...)`}
+                name="to-address"
+                data-1p-ignore
+                controls={
+                  <Button
+                    size="xs"
+                    shape="square"
+                    label="Paste"
+                    onClick={handlePaste}
+                    data-id="to-address"
+                    flexShrink="0"
+                    leftIcon={CopyIcon}
+                  />
+                }
+              />
+            )}
+          </Box>
+
+          {showSwitchNetwork && (
+            <Box marginTop="3">
+              <Text variant="small" color="negative" marginBottom="2">
+                The wallet is connected to the wrong network. Please switch network before proceeding
+              </Text>
+              <Button
+                marginTop="2"
+                width="full"
+                variant="primary"
+                type="button"
+                label="Switch Network"
+                onClick={() => switchChain({ chainId })}
+                disabled={isCorrectChainId}
+                style={{ height: '52px', borderRadius: vars.radii.md }}
+              />
             </Box>
-            <CloseIcon size="xs" />
-          </Card>
-        ) : (
-          <TextInput
-            value={toAddress}
-            onChange={ev => setToAddress(ev.target.value)}
-            placeholder={`${nativeTokenInfo.name} Address (0x...)`}
-            name="to-address"
-            data-1p-ignore
-            controls={
+          )}
+
+          <Box style={{ height: '52px' }} alignItems="center" justifyContent="center">
+            {isCheckingFeeOptions ? (
+              <Spinner />
+            ) : (
               <Button
-                size="xs"
-                shape="square"
-                label="Paste"
-                onClick={handlePaste}
-                data-id="to-address"
-                flexShrink="0"
-                leftIcon={CopyIcon}
+                color="text100"
+                marginTop="3"
+                width="full"
+                variant="primary"
+                type="submit"
+                disabled={
+                  !isNonZeroAmount ||
+                  !isEthAddress(toAddress) ||
+                  insufficientFunds ||
+                  (!isCorrectChainId && !isConnectorSequenceBased)
+                }
+                label="Send"
+                rightIcon={ChevronRightIcon}
+                style={{ height: '52px', borderRadius: vars.radii.md }}
               />
-            }
-          />
-        )}
-      </Box>
-
-      {showSwitchNetwork && (
-        <Box marginTop="3">
-          <Text variant="small" color="negative" marginBottom="2">
-            The wallet is connected to the wrong network. Please switch network before proceeding
-          </Text>
-          <Button
-            marginTop="2"
-            width="full"
-            variant="primary"
-            type="button"
-            label="Switch Network"
-            onClick={() => switchChain({ chainId })}
-            disabled={isCorrectChainId}
-            style={{ height: '52px', borderRadius: vars.radii.md }}
-          />
-        </Box>
+            )}
+          </Box>
+        </>
       )}
 
-      <Box style={{ height: '52px' }} alignItems="center" justifyContent="center">
-        {isSendTxnPending ? (
-          <Spinner />
-        ) : (
-          <Button
-            color="text100"
-            marginTop="3"
-            width="full"
-            variant="primary"
-            type="submit"
-            disabled={
-              !isNonZeroAmount ||
-              !isEthAddress(toAddress) ||
-              insufficientFunds ||
-              (!isCorrectChainId && !isConnectorSequenceBased)
-            }
-            label="Send"
-            rightIcon={ChevronRightIcon}
-            style={{ height: '52px', borderRadius: vars.radii.md }}
-          />
-        )}
-      </Box>
+      {showConfirmation && (
+        <TransactionConfirmation
+          name={name}
+          symbol=""
+          imageUrl={imageUrl}
+          amount={amountToSendFormatted}
+          toAddress={toAddress}
+          showSquareImage={true}
+          chainId={chainId}
+          balance={tokenBalance?.balance || '0'}
+          decimals={decimals}
+          feeOptions={feeOptions}
+          onSelectFeeOption={feeTokenAddress => {
+            setSelectedFeeTokenAddress(feeTokenAddress)
+          }}
+          isLoading={isSendTxnPending}
+          onConfirm={() => {
+            executeTransaction()
+          }}
+          onCancel={() => {
+            setShowConfirmation(false)
+          }}
+        />
+      )}
     </Box>
   )
 }