diff --git a/packages/checkout/widgets-lib/src/components/Handover/HandoverContent.tsx b/packages/checkout/widgets-lib/src/components/Handover/HandoverContent.tsx
index e9fd4813a5..2a77a53b43 100644
--- a/packages/checkout/widgets-lib/src/components/Handover/HandoverContent.tsx
+++ b/packages/checkout/widgets-lib/src/components/Handover/HandoverContent.tsx
@@ -1,6 +1,7 @@
 import {
   Body, Box, Button, Heading,
 } from '@biom3/react';
+import { ReactNode } from 'react';
 
 export function HandoverContent({
   headingText,
@@ -11,7 +12,7 @@ export function HandoverContent({
   onSecondaryButtonClick,
 }: {
   headingText: string;
-  subheadingText?: string;
+  subheadingText?: ReactNode;
   primaryButtonText?: string;
   onPrimaryButtonClick?: () => void;
   secondaryButtonText?: string;
diff --git a/packages/checkout/widgets-lib/src/context/view-context/AddFundsViewContextTypes.ts b/packages/checkout/widgets-lib/src/context/view-context/AddFundsViewContextTypes.ts
index f0b5222ce5..e68db1e85b 100644
--- a/packages/checkout/widgets-lib/src/context/view-context/AddFundsViewContextTypes.ts
+++ b/packages/checkout/widgets-lib/src/context/view-context/AddFundsViewContextTypes.ts
@@ -4,10 +4,9 @@ import { ViewType } from './ViewType';
 export enum AddFundsWidgetViews {
   ADD_FUNDS = 'ADD_FUNDS',
   REVIEW = 'REVIEW',
-  CONFIRMATION = 'CONFIRMATION',
 }
 
-export type AddFundsWidgetView = AddFundsView | AddFundsReview | AddFundsConfirmation;
+export type AddFundsWidgetView = AddFundsView | AddFundsReview;
 
 interface AddFundsView extends ViewType {
   type: AddFundsWidgetViews.ADD_FUNDS;
@@ -18,11 +17,6 @@ interface AddFundsReview extends ViewType {
   data: AddFundsReviewData;
 }
 
-interface AddFundsConfirmation extends ViewType {
-  type: AddFundsWidgetViews.CONFIRMATION;
-  data: AddFundsConfirmationData;
-}
-
 export interface AddFundsReviewData {
   balance: TokenBalance;
   toAmount: string;
diff --git a/packages/checkout/widgets-lib/src/widgets/add-funds/AddFundsRoot.tsx b/packages/checkout/widgets-lib/src/widgets/add-funds/AddFundsRoot.tsx
index ca418731f9..cbec59b66f 100644
--- a/packages/checkout/widgets-lib/src/widgets/add-funds/AddFundsRoot.tsx
+++ b/packages/checkout/widgets-lib/src/widgets/add-funds/AddFundsRoot.tsx
@@ -77,6 +77,7 @@ export class AddFunds extends Base<WidgetType.ADD_FUNDS> {
         getL1ChainId(this.checkout.config),
         getL2ChainId(this.checkout.config),
       ],
+      isCheckNetworkEnabled: false,
     };
 
     this.reactRoot.render(
diff --git a/packages/checkout/widgets-lib/src/widgets/add-funds/AddFundsWidget.tsx b/packages/checkout/widgets-lib/src/widgets/add-funds/AddFundsWidget.tsx
index 77199c5b6a..fab06c96ad 100644
--- a/packages/checkout/widgets-lib/src/widgets/add-funds/AddFundsWidget.tsx
+++ b/packages/checkout/widgets-lib/src/widgets/add-funds/AddFundsWidget.tsx
@@ -22,6 +22,8 @@ import { ErrorView } from '../../views/error/ErrorView';
 import { useSquid } from './hooks/useSquid';
 import { useAnalytics, UserJourney } from '../../context/analytics-provider/SegmentAnalyticsProvider';
 import { fetchChains } from './functions/fetchChains';
+import { Review } from './views/Review';
+import { fetchBalances } from './functions/fetchBalances';
 
 export type AddFundsWidgetInputs = AddFundsWidgetParams & {
   checkout: Checkout;
@@ -56,6 +58,10 @@ export default function AddFundsWidget({
 
   const [addFundsState, addFundsDispatch] = useReducer(addFundsReducer, initialAddFundsState);
 
+  const {
+    squid, provider, chains,
+  } = addFundsState;
+
   const addFundsReducerValues = useMemo(
     () => ({
       addFundsState,
@@ -64,55 +70,47 @@ export default function AddFundsWidget({
     [addFundsState, addFundsDispatch],
   );
 
-  const squid = useSquid(checkout);
+  const squidSdk = useSquid(checkout);
 
   useEffect(() => {
     (async () => {
-      const chains = await fetchChains();
+      const chainsResponse = await fetchChains();
 
       addFundsDispatch({
         payload: {
           type: AddFundsActions.SET_CHAINS,
-          chains,
+          chains: chainsResponse,
         },
       });
     })();
   }, []);
 
   useEffect(() => {
-    if (!addFundsState.squid || !addFundsState.chains || !addFundsState.provider) return;
+    if (!squid || !chains || !provider) return;
 
     (async () => {
-      const chainIds = addFundsState.chains?.map((chain) => chain.id);
-      const fromAddress = await addFundsState.provider?.getSigner().getAddress();
-
-      const balances = await addFundsState.squid?.getAllBalances({
-        chainIds,
-        evmAddress: fromAddress,
-      });
-      const filteredBalances = balances?.evmBalances?.filter(
-        (balance) => balance.balance !== '0',
-      );
+      const evmChains = chains.filter((chain) => chain.type === 'evm');
+      const balances = await fetchBalances(squid, evmChains, provider);
 
       addFundsDispatch({
         payload: {
           type: AddFundsActions.SET_BALANCES,
-          balances: filteredBalances ?? [],
+          balances: balances ?? [],
         },
       });
     })();
-  }, [addFundsState.squid, addFundsState.chains, addFundsState.provider]);
+  }, [squid, chains, provider]);
 
   useEffect(() => {
-    if (!squid || addFundsState.squid) return;
+    if (!squidSdk) return;
 
     addFundsDispatch({
       payload: {
         type: AddFundsActions.SET_SQUID,
-        squid,
+        squid: squidSdk,
       },
     });
-  }, [squid]);
+  }, [squidSdk]);
 
   useEffect(() => {
     if (!web3Provider) return;
@@ -162,6 +160,20 @@ export default function AddFundsWidget({
             onCloseButtonClick={() => sendAddFundsCloseEvent(eventTarget)}
           />
         )}
+        {viewState.view.type === AddFundsWidgetViews.REVIEW && (
+          <Review
+            data={viewState.view.data}
+            onCloseButtonClick={() => sendAddFundsCloseEvent(eventTarget)}
+            onBackButtonClick={() => {
+              viewDispatch({
+                payload: {
+                  type: ViewActions.GO_BACK,
+                },
+              });
+            }}
+            showBackButton
+          />
+        )}
         {viewState.view.type === SharedViews.ERROR_VIEW && (
           <ErrorView
             actionText={t('views.ERROR_VIEW.actionText')}
diff --git a/packages/checkout/widgets-lib/src/widgets/add-funds/components/Option.tsx b/packages/checkout/widgets-lib/src/widgets/add-funds/components/Option.tsx
deleted file mode 100644
index d0160ea8c2..0000000000
--- a/packages/checkout/widgets-lib/src/widgets/add-funds/components/Option.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import {
-  type AllDualVariantIconKeys, MenuItem, type MenuItemSize,
-} from '@biom3/react';
-import type { ReactElement } from 'react';
-import { useTranslation } from 'react-i18next';
-
-export enum OptionTypes {
-  SWAP = 'swap',
-  DEBIT = 'debit',
-  CREDIT = 'credit',
-}
-
-export interface OptionProps<RC extends ReactElement | undefined = undefined> {
-  rc?: RC;
-  type: OptionTypes;
-  onClick: (type: OptionTypes) => void;
-  disabled?: boolean;
-  caption?: string;
-  size?: MenuItemSize;
-}
-
-export function Option<RC extends ReactElement | undefined = undefined>({
-  type,
-  onClick,
-  disabled = false,
-  caption,
-  size,
-  rc = <span />,
-}: OptionProps<RC>) {
-  const { t } = useTranslation();
-
-  const icon: Record<OptionTypes, AllDualVariantIconKeys> = {
-    [OptionTypes.SWAP]: 'Coins',
-    [OptionTypes.DEBIT]: 'BankCard',
-    [OptionTypes.CREDIT]: 'BankCard',
-  };
-
-  const handleClick = () => onClick(type);
-
-  const menuItemProps = {
-    disabled,
-    emphasized: true,
-    onClick: disabled ? undefined : handleClick,
-  };
-
-  return (
-    <MenuItem
-      rc={rc}
-      size={size || 'medium'}
-      sx={{
-        marginBottom: 'base.spacing.x1',
-        userSelect: 'none',
-        ...(disabled && {
-          filter: 'opacity(0.5)',
-          cursor: 'not-allowed !important',
-        }),
-      }}
-      {...menuItemProps}
-    >
-      <MenuItem.FramedIcon icon={icon[type]} />
-      <MenuItem.Label size="medium">
-        {t(`views.ADD_FUNDS.drawer.options.${type}.heading`)}
-      </MenuItem.Label>
-      {!disabled && <MenuItem.IntentIcon />}
-      <MenuItem.Caption>
-        {caption
-          || t(
-            `views.ADD_FUNDS.drawer.options.${type}.${
-              disabled ? 'disabledCaption' : 'caption'
-            }`,
-          )}
-      </MenuItem.Caption>
-    </MenuItem>
-  );
-}
diff --git a/packages/checkout/widgets-lib/src/widgets/add-funds/components/Options.tsx b/packages/checkout/widgets-lib/src/widgets/add-funds/components/Options.tsx
index 9437245725..761ad48e3d 100644
--- a/packages/checkout/widgets-lib/src/widgets/add-funds/components/Options.tsx
+++ b/packages/checkout/widgets-lib/src/widgets/add-funds/components/Options.tsx
@@ -1,43 +1,103 @@
-import { Box, MenuItemSize } from '@biom3/react';
-
+import {
+  Box, LoadingOverlay, MenuItemSize,
+} from '@biom3/react';
 import { motion } from 'framer-motion';
-import { useMemo } from 'react';
+import { TokenBalance } from '@0xsquid/sdk/dist/types';
 import {
   listItemVariants,
   listVariants,
 } from '../../../lib/animation/listAnimation';
-import { Option, OptionTypes } from './Option';
+import { FiatOption } from './FiatOption';
+import { Chain, FiatOptionType, RouteData } from '../types';
+import { RouteOption } from './RouteOption';
+import { convertTokenBalanceToUsd } from '../functions/convertTokenBalanceToUsd';
+import { sortRoutesByFastestTime } from '../functions/sortRoutesByFastestTime';
 
-const defaultOptions: OptionTypes[] = [
-  OptionTypes.SWAP,
-  OptionTypes.DEBIT,
-  OptionTypes.CREDIT,
+const defaultFiatOptions: FiatOptionType[] = [
+  FiatOptionType.DEBIT,
+  FiatOptionType.CREDIT,
 ];
 
 export interface OptionsProps {
-  onClick: (type: OptionTypes) => void;
-  disabledOptions?: OptionTypes[];
-  options?: OptionTypes[];
-  captions?: Partial<Record<OptionTypes, string>>;
+  chains: Chain[] | null;
+  balances: TokenBalance[] | null;
+  onCardClick: (type: FiatOptionType) => void;
+  onRouteClick: (route: RouteData) => void;
+  routes?: RouteData[];
   size?: MenuItemSize;
-  hideDisabledOptions?: boolean;
+  showOnrampOption?: boolean;
 }
 
-export function Options(props: OptionsProps) {
-  const {
-    disabledOptions = [],
-    options,
-    onClick,
-    captions,
-    size,
-    hideDisabledOptions,
-  } = props;
-  const filteredOptions = useMemo(
-    () => (options || defaultOptions).filter(
-      (option) => !hideDisabledOptions || !disabledOptions.includes(option),
-    ),
-    [options, disabledOptions, hideDisabledOptions],
-  );
+export function Options({
+  routes,
+  chains,
+  balances,
+  onCardClick,
+  onRouteClick,
+  size,
+  showOnrampOption,
+}: OptionsProps) {
+  const getUsdBalance = (balance: TokenBalance | undefined, route: RouteData) => {
+    if (!balance) return undefined;
+
+    try {
+      return convertTokenBalanceToUsd(balance, route.route)?.toString();
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error('Error calculating USD balance:', error);
+      return undefined;
+    }
+  };
+
+  const sortedRoutes = sortRoutesByFastestTime(routes);
+
+  if (!sortedRoutes) {
+    return (
+      <LoadingOverlay visible>
+        <LoadingOverlay.Content>
+          <LoadingOverlay.Content.LoopingText
+            text={['Fetching balances', 'Fetching routes']}
+            textDuration={5000}
+          />
+        </LoadingOverlay.Content>
+      </LoadingOverlay>
+    );
+  }
+
+  const routeOptions = sortedRoutes.map((route: RouteData) => {
+    const { fromToken } = route.amountData;
+
+    const chain = chains?.find((c) => c.id === fromToken.chainId);
+    const balance = balances?.find(
+      (bal) => bal.address === fromToken.address && bal.chainId === fromToken.chainId,
+    );
+
+    const usdBalance = getUsdBalance(balance, route);
+
+    return (
+      <RouteOption
+        key={`route-option-${fromToken.chainId}-${fromToken.address}`}
+        chain={chain}
+        route={route}
+        usdBalance={usdBalance}
+        onClick={onRouteClick}
+        size={size}
+        rc={<motion.div variants={listItemVariants} />}
+      />
+    );
+  });
+
+  const fiatOptions = showOnrampOption
+    ? defaultFiatOptions.map((type, idx) => (
+      <FiatOption
+        key={`fiat-option-${type}`}
+        type={type}
+        size={size}
+        onClick={onCardClick}
+        rc={<motion.div custom={idx} variants={listItemVariants} />}
+      />
+    ))
+    : null;
 
   return (
     <Box
@@ -49,21 +109,10 @@ export function Options(props: OptionsProps) {
         justifyContent: 'center',
         alignItems: 'flex-start',
       }}
-      rc={
-        <motion.div variants={listVariants} initial="hidden" animate="show" />
-      }
+      rc={<motion.div variants={listVariants} initial="hidden" animate="show" />}
     >
-      {filteredOptions.map((type, idx: number) => (
-        <Option
-          key={`option-type-${type}`}
-          type={type}
-          size={size}
-          onClick={onClick}
-          disabled={disabledOptions.includes(type)}
-          caption={captions?.[type]}
-          rc={<motion.div custom={idx} variants={listItemVariants} />}
-        />
-      ))}
+      {routeOptions}
+      {fiatOptions}
     </Box>
   );
 }
diff --git a/packages/checkout/widgets-lib/src/widgets/add-funds/components/OptionsDrawer.tsx b/packages/checkout/widgets-lib/src/widgets/add-funds/components/OptionsDrawer.tsx
index bf52e11390..a29a8aa11a 100644
--- a/packages/checkout/widgets-lib/src/widgets/add-funds/components/OptionsDrawer.tsx
+++ b/packages/checkout/widgets-lib/src/widgets/add-funds/components/OptionsDrawer.tsx
@@ -1,35 +1,37 @@
 import { Box, Drawer } from '@biom3/react';
 import { motion } from 'framer-motion';
+import { useContext } from 'react';
 import { listVariants } from '../../../lib/animation/listAnimation';
 import { Options } from './Options';
-import { OptionTypes } from './Option';
+import { FiatOptionType, RouteData } from '../types';
+import { AddFundsContext } from '../context/AddFundsContext';
 
 type OptionsDrawerProps = {
+  routes: RouteData[] | undefined;
+  visible: boolean;
+  onClose: () => void;
+  onRouteClick: (route: RouteData) => void;
+  onCardClick: (type: FiatOptionType) => void;
   showOnrampOption?: boolean;
   showSwapOption?: boolean;
   showBridgeOption?: boolean;
-  visible: boolean;
-  onClose: () => void;
-  onPayWithCard?: (paymentType: OptionTypes) => void;
 };
 
 export function OptionsDrawer({
+  routes,
+  visible,
+  onClose,
+  onRouteClick,
+  onCardClick,
   showOnrampOption,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   showSwapOption,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   showBridgeOption,
-  visible,
-  onClose,
-  onPayWithCard,
 }: OptionsDrawerProps) {
-  const disabledOptions: OptionTypes[] = [];
-  if (!showOnrampOption) {
-    disabledOptions.push(OptionTypes.CREDIT);
-    disabledOptions.push(OptionTypes.DEBIT);
-  }
-  if (!showSwapOption) {
-    disabledOptions.push(OptionTypes.SWAP);
-  }
+  const {
+    addFundsState: { chains, balances },
+  } = useContext(AddFundsContext);
 
   return (
     <Drawer
@@ -42,7 +44,7 @@ export function OptionsDrawer({
       <Drawer.Content
         rc={
           <motion.div variants={listVariants} initial="hidden" animate="show" />
-                }
+  }
       >
         <Box
           sx={{
@@ -54,21 +56,13 @@ export function OptionsDrawer({
           }}
         >
           <Options
-            onClick={onPayWithCard ?? (() => {
-            })}
             size="medium"
-            hideDisabledOptions
-            options={[
-              OptionTypes.SWAP,
-              OptionTypes.DEBIT,
-              OptionTypes.CREDIT,
-            ]}
-            disabledOptions={disabledOptions}
-            captions={{
-              [OptionTypes.SWAP]: 'Swap',
-              [OptionTypes.DEBIT]: 'Debit',
-              [OptionTypes.CREDIT]: 'Credit',
-            }}
+            routes={routes}
+            chains={chains}
+            balances={balances}
+            onCardClick={onCardClick}
+            onRouteClick={onRouteClick}
+            showOnrampOption={showOnrampOption}
           />
         </Box>
       </Drawer.Content>
diff --git a/packages/checkout/widgets-lib/src/widgets/add-funds/components/RouteOption.tsx b/packages/checkout/widgets-lib/src/widgets/add-funds/components/RouteOption.tsx
index d28ee3982a..41d9c4e66e 100644
--- a/packages/checkout/widgets-lib/src/widgets/add-funds/components/RouteOption.tsx
+++ b/packages/checkout/widgets-lib/src/widgets/add-funds/components/RouteOption.tsx
@@ -8,7 +8,7 @@ import { Chain, RouteData } from '../types';
 
 export interface RouteOptionProps<RC extends ReactElement | undefined = undefined> {
   route: RouteData;
-  onClick?: (route: RouteData) => void;
+  onClick: (route: RouteData) => void;
   chain?: Chain;
   usdBalance?: string;
   disabled?: boolean;
@@ -39,7 +39,7 @@ export function RouteOption<RC extends ReactElement | undefined = undefined>({
   const formattedUsdBalance = useMemo(() => (usdBalance ? Number(usdBalance).toFixed(2) : undefined), [usdBalance]);
 
   const estimatedDurationFormatted = useMemo(() => {
-    const seconds = estimate.estimatedRouteDuration / 1000;
+    const seconds = estimate.estimatedRouteDuration;
     if (seconds >= 60) {
       const minutes = Math.round(seconds / 60);
       return minutes === 1 ? '1 min' : `${minutes} mins`;
@@ -48,7 +48,7 @@ export function RouteOption<RC extends ReactElement | undefined = undefined>({
   }, [estimate.estimatedRouteDuration]);
 
   const handleClick = () => {
-    onClick?.(route);
+    onClick(route);
   };
 
   const menuItemProps = {
diff --git a/packages/checkout/widgets-lib/src/widgets/add-funds/functions/isSquidNativeToken.ts b/packages/checkout/widgets-lib/src/widgets/add-funds/functions/isSquidNativeToken.ts
index 25054dcbf1..36560b1d89 100644
--- a/packages/checkout/widgets-lib/src/widgets/add-funds/functions/isSquidNativeToken.ts
+++ b/packages/checkout/widgets-lib/src/widgets/add-funds/functions/isSquidNativeToken.ts
@@ -1,3 +1,3 @@
-const SQUID_NATIVE_TOKEN = '0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee';
+import { SQUID_NATIVE_TOKEN } from '../utils/config';
 
-export const isSquidNativeToken = (token: string) => token === SQUID_NATIVE_TOKEN;
+export const isSquidNativeToken = (token: string) => token.toLowerCase() === SQUID_NATIVE_TOKEN.toLowerCase();
diff --git a/packages/checkout/widgets-lib/src/widgets/add-funds/hooks/useExecute.ts b/packages/checkout/widgets-lib/src/widgets/add-funds/hooks/useExecute.ts
index e5ac8ebb23..ede8544e61 100644
--- a/packages/checkout/widgets-lib/src/widgets/add-funds/hooks/useExecute.ts
+++ b/packages/checkout/widgets-lib/src/widgets/add-funds/hooks/useExecute.ts
@@ -17,7 +17,7 @@ export const useExecute = () => {
     chainId: string,
   ): Promise<void> => {
     if (!provider.provider.request) {
-      throw Error('provider does not have request method');
+      throw new Error('provider does not have request method');
     }
 
     try {
@@ -36,10 +36,36 @@ export const useExecute = () => {
         });
       }
     } catch (e) {
-      throw Error('Error checking provider');
+      throw new Error('Error checking provider');
     }
   };
 
+  const getAllowance = async (
+    provider: Web3Provider,
+    routeResponse: RouteResponse,
+  ): Promise<ethers.BigNumber | undefined> => {
+    if (!isSquidNativeToken(routeResponse?.route?.params.fromToken)) {
+      const erc20Abi = [
+        'function allowance(address owner, address spender) public view returns (uint256)',
+      ];
+      const fromToken = routeResponse?.route.params.fromToken;
+      const signer = provider.getSigner();
+      const tokenContract = new ethers.Contract(fromToken, erc20Abi, signer);
+
+      const ownerAddress = await signer.getAddress();
+      const transactionRequestTarget = routeResponse?.route?.transactionRequest?.target;
+
+      if (!transactionRequestTarget) {
+        throw new Error('transactionRequest target is undefined');
+      }
+
+      const allowance = await tokenContract.allowance(ownerAddress, transactionRequestTarget);
+      return allowance;
+    }
+
+    return ethers.constants.MaxUint256; // no approval is needed for native tokens
+  };
+
   const approve = async (
     provider: Web3Provider,
     routeResponse: RouteResponse,
@@ -48,7 +74,6 @@ export const useExecute = () => {
       if (!isSquidNativeToken(routeResponse?.route?.params.fromToken)) {
         const erc20Abi = [
           'function approve(address spender, uint256 amount) public returns (bool)',
-          'function allowance(address owner, address spender) public view returns (uint256)',
         ];
         const fromToken = routeResponse?.route.params.fromToken;
         const signer = provider.getSigner();
@@ -64,16 +89,11 @@ export const useExecute = () => {
           throw new Error('transactionRequest target is undefined');
         }
 
-        const ownerAddress = await signer.getAddress();
-        const allowance = await tokenContract.allowance(ownerAddress, transactionRequestTarget);
-
-        if (allowance.lt(fromAmount)) {
-          const tx = await tokenContract.approve(transactionRequestTarget, fromAmount);
-          await tx.wait();
-        }
+        const tx = await tokenContract.approve(transactionRequestTarget, fromAmount);
+        await tx.wait();
       }
     } catch (e) {
-      throw Error('Error approving tokens');
+      throw new Error('Error approving tokens');
     }
   };
 
@@ -83,7 +103,7 @@ export const useExecute = () => {
     routeResponse: RouteResponse,
   ): Promise<ethers.providers.TransactionReceipt> => {
     if (!provider.provider.request) {
-      throw Error('provider does not have request method');
+      throw new Error('provider does not have request method');
     }
 
     try {
@@ -93,11 +113,11 @@ export const useExecute = () => {
       })) as unknown as ethers.providers.TransactionResponse;
       return tx.wait();
     } catch (e) {
-      throw Error('Error executing route');
+      throw new Error('Error executing route');
     }
   };
 
   return {
-    convertToNetworkChangeableProvider, checkProviderChain, approve, execute,
+    convertToNetworkChangeableProvider, checkProviderChain, getAllowance, approve, execute,
   };
 };
diff --git a/packages/checkout/widgets-lib/src/widgets/add-funds/types.ts b/packages/checkout/widgets-lib/src/widgets/add-funds/types.ts
index 2b9119ed65..76a2af9484 100644
--- a/packages/checkout/widgets-lib/src/widgets/add-funds/types.ts
+++ b/packages/checkout/widgets-lib/src/widgets/add-funds/types.ts
@@ -33,3 +33,11 @@ export enum FiatOptionType {
   CREDIT = 'credit',
   DEBIT = 'debit',
 }
+
+export enum RiveStateMachineInput {
+  START = 0,
+  WAITING = 1,
+  PROCESSING = 2,
+  COMPLETED = 3,
+  ERROR = 4,
+}
diff --git a/packages/checkout/widgets-lib/src/widgets/add-funds/utils/config.ts b/packages/checkout/widgets-lib/src/widgets/add-funds/utils/config.ts
index 0c85c0a848..7289a7c2d4 100644
--- a/packages/checkout/widgets-lib/src/widgets/add-funds/utils/config.ts
+++ b/packages/checkout/widgets-lib/src/widgets/add-funds/utils/config.ts
@@ -1,3 +1,5 @@
 export const SQUID_SDK_BASE_URL = 'https://apiplus.squidrouter.com';
 
 export const SQUID_API_BASE_URL = 'https://api.squidrouter.com/v1';
+
+export const SQUID_NATIVE_TOKEN = '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE';
diff --git a/packages/checkout/widgets-lib/src/widgets/add-funds/views/AddFunds.tsx b/packages/checkout/widgets-lib/src/widgets/add-funds/views/AddFunds.tsx
index 3cdc44feb5..d96f9f9c6f 100644
--- a/packages/checkout/widgets-lib/src/widgets/add-funds/views/AddFunds.tsx
+++ b/packages/checkout/widgets-lib/src/widgets/add-funds/views/AddFunds.tsx
@@ -1,11 +1,8 @@
 import {
-  Checkout,
-  IMTBLWidgetEvents,
-  TokenFilterTypes,
-  TokenInfo,
+  ChainId, Checkout, IMTBLWidgetEvents, TokenFilterTypes, TokenInfo,
 } from '@imtbl/checkout-sdk';
 import {
-  Body, Box, MenuItem, OverflowPopoverMenu, HeroTextInput,
+  Body, Box, HeroTextInput, MenuItem, OverflowPopoverMenu,
 } from '@biom3/react';
 import {
   useCallback, useContext, useEffect, useRef, useState,
@@ -15,14 +12,13 @@ import { HeaderNavigation } from '../../../components/Header/HeaderNavigation';
 import { OptionsDrawer } from '../components/OptionsDrawer';
 import { EventTargetContext } from '../../../context/event-target-context/EventTargetContext';
 import { orchestrationEvents } from '../../../lib/orchestrationEvents';
-import { OptionTypes } from '../components/Option';
 import { AddFundsActions, AddFundsContext } from '../context/AddFundsContext';
 import { getL2ChainId } from '../../../lib';
-import {
-  SharedViews,
-  ViewActions,
-  ViewContext,
-} from '../../../context/view-context/ViewContext';
+import { SharedViews, ViewActions, ViewContext } from '../../../context/view-context/ViewContext';
+import { useRoutes } from '../hooks/useRoutes';
+import { RouteData } from '../types';
+import { AddFundsWidgetViews } from '../../../context/view-context/AddFundsViewContextTypes';
+import { SQUID_NATIVE_TOKEN } from '../utils/config';
 
 interface AddFundsProps {
   checkout?: Checkout;
@@ -49,7 +45,7 @@ export function AddFunds({
 }: AddFundsProps) {
   const showBack = showBackButton || !!onBackButtonClick;
 
-  const { addFundsDispatch } = useContext(AddFundsContext);
+  const { addFundsState: { squid, balances }, addFundsDispatch } = useContext(AddFundsContext);
 
   const { viewDispatch } = useContext(ViewContext);
 
@@ -72,6 +68,8 @@ export function AddFunds({
 
   const debounceTimeoutRef = useRef<NodeJS.Timeout | null>(null);
 
+  const { routes, fetchRoutesWithRateLimit, resetRoutes } = useRoutes();
+
   const handleAmountChange = (value: string) => {
     if (debounceTimeoutRef.current) {
       clearTimeout(debounceTimeoutRef.current);
@@ -103,6 +101,22 @@ export function AddFunds({
     [viewDispatch],
   );
 
+  useEffect(() => {
+    resetRoutes();
+
+    if (balances && squid && currentToTokenAddress?.address && currentToAmount) {
+      fetchRoutesWithRateLimit(
+        squid,
+        balances,
+        ChainId.IMTBL_ZKEVM_MAINNET.toString(),
+        currentToTokenAddress.address === 'native' ? SQUID_NATIVE_TOKEN : currentToTokenAddress.address,
+        currentToAmount,
+        5,
+        1000,
+      );
+    }
+  }, [balances, squid, currentToTokenAddress, currentToAmount]);
+
   useEffect(() => {
     if (!checkout) {
       showErrorView(new Error('Checkout object is missing'));
@@ -119,8 +133,8 @@ export function AddFunds({
         if (tokenResponse?.tokens.length > 0) {
           setAllowedTokens(tokenResponse.tokens);
 
-          const token = tokenResponse.tokens.find((t) => t.address === toTokenAddress)
-            || tokenResponse.tokens[0];
+          const token = tokenResponse.tokens.find((t) => t.address?.toLowerCase() === toTokenAddress?.toLowerCase())
+            ?? tokenResponse.tokens[0];
           setCurrentToTokenAddress(token);
 
           addFundsDispatch({
@@ -177,28 +191,37 @@ export function AddFunds({
   //   console.log('handle review click');
   // };
 
-  const onPayWithCard = (paymentType: OptionTypes) => {
-    if (paymentType === OptionTypes.SWAP) {
-      orchestrationEvents.sendRequestSwapEvent(
-        eventTarget,
-        IMTBLWidgetEvents.IMTBL_ADD_FUNDS_WIDGET_EVENT,
-        {
-          toTokenAddress: currentToTokenAddress?.address ?? '',
-          amount: toAmount ?? '',
-          fromTokenAddress: '',
-        },
-      );
-    } else {
-      const data = {
-        tokenAddress: currentToTokenAddress?.address ?? '',
-        amount: toAmount ?? '',
-      };
-      orchestrationEvents.sendRequestOnrampEvent(
-        eventTarget,
-        IMTBLWidgetEvents.IMTBL_ADD_FUNDS_WIDGET_EVENT,
-        data,
-      );
+  const onCardClick = () => {
+    const data = {
+      tokenAddress: currentToTokenAddress?.address ?? '',
+      amount: currentToAmount ?? '',
+    };
+    orchestrationEvents.sendRequestOnrampEvent(
+      eventTarget,
+      IMTBLWidgetEvents.IMTBL_ADD_FUNDS_WIDGET_EVENT,
+      data,
+    );
+  };
+
+  const onRouteClick = (routeData: RouteData) => {
+    if (!currentToAmount || !currentToTokenAddress?.address) {
+      return;
     }
+
+    viewDispatch({
+      payload: {
+        type: ViewActions.UPDATE_VIEW,
+        view: {
+          type: AddFundsWidgetViews.REVIEW,
+          data: {
+            balance: routeData.amountData.balance,
+            toChainId: ChainId.IMTBL_ZKEVM_MAINNET.toString(),
+            toTokenAddress: currentToTokenAddress.address,
+            toAmount: currentToAmount,
+          },
+        },
+      },
+    });
   };
 
   const checkShowOnRampOption = () => {
@@ -306,12 +329,14 @@ export function AddFunds({
           }}
         >
           <OptionsDrawer
+            routes={routes}
             showOnrampOption={checkShowOnRampOption()}
             showSwapOption={showSwapOption}
             showBridgeOption={showBridgeOption}
             visible={showOptionsDrawer}
             onClose={() => setShowOptionsDrawer(false)}
-            onPayWithCard={onPayWithCard}
+            onCardClick={onCardClick}
+            onRouteClick={onRouteClick}
           />
         </Box>
         {/* <Button
diff --git a/packages/checkout/widgets-lib/src/widgets/add-funds/views/Confirmation.tsx b/packages/checkout/widgets-lib/src/widgets/add-funds/views/Confirmation.tsx
deleted file mode 100644
index 4fbd14a914..0000000000
--- a/packages/checkout/widgets-lib/src/widgets/add-funds/views/Confirmation.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { Link } from '@biom3/react';
-import { Environment } from '@imtbl/config';
-import { SimpleLayout } from '../../../components/SimpleLayout/SimpleLayout';
-import { HeaderNavigation } from '../../../components/Header/HeaderNavigation';
-import { AddFundsConfirmationData } from '../../../context/view-context/AddFundsViewContextTypes';
-import { RocketHero } from '../../../components/Hero/RocketHero';
-import { SimpleTextBody } from '../../../components/Body/SimpleTextBody';
-
-interface ConfirmationProps {
-  data: AddFundsConfirmationData;
-  onCloseClick: () => void;
-}
-
-export function Confirmation({ data, onCloseClick }: ConfirmationProps) {
-  return (
-    <SimpleLayout
-      header={(<HeaderNavigation transparent onCloseButtonClick={onCloseClick} />)}
-      heroContent={<RocketHero environment={Environment.PRODUCTION} />}
-      floatHeader
-    >
-      <SimpleTextBody heading="Confirmation">
-        <Link
-          size="small"
-          rc={
-            <a href={`https://axelarscan.io/gmp/${data.transactionHash}`} />
-          }
-        >
-          <Link.Icon icon="ArrowForward" />
-          Go to Axelarscan for details
-        </Link>
-      </SimpleTextBody>
-    </SimpleLayout>
-  );
-}
diff --git a/packages/checkout/widgets-lib/src/widgets/add-funds/views/Review.tsx b/packages/checkout/widgets-lib/src/widgets/add-funds/views/Review.tsx
index 982722648b..0d8dcfa654 100644
--- a/packages/checkout/widgets-lib/src/widgets/add-funds/views/Review.tsx
+++ b/packages/checkout/widgets-lib/src/widgets/add-funds/views/Review.tsx
@@ -1,4 +1,6 @@
-import { useContext, useEffect, useState } from 'react';
+import {
+  ReactNode, useContext, useEffect, useState,
+} from 'react';
 import {
   Body,
   Button,
@@ -9,6 +11,7 @@ import {
   Heading,
   hFlex,
   Icon,
+  Link,
   PriceDisplay,
   Stack,
 } from '@biom3/react';
@@ -17,12 +20,17 @@ import { BigNumber, utils } from 'ethers';
 import { SimpleLayout } from '../../../components/SimpleLayout/SimpleLayout';
 import { AddFundsContext } from '../context/AddFundsContext';
 import { useRoutes } from '../hooks/useRoutes';
-import { AddFundsReviewData, AddFundsWidgetViews } from '../../../context/view-context/AddFundsViewContextTypes';
+import { AddFundsReviewData } from '../../../context/view-context/AddFundsViewContextTypes';
 import { HeaderNavigation } from '../../../components/Header/HeaderNavigation';
-import { Chain } from '../types';
+import { Chain, RiveStateMachineInput } from '../types';
 import { useExecute } from '../hooks/useExecute';
 import { SharedViews, ViewActions, ViewContext } from '../../../context/view-context/ViewContext';
 import { SquidIcon } from '../components/SquidIcon';
+import { useHandover } from '../../../lib/hooks/useHandover';
+import { HandoverTarget } from '../../../context/handover-context/HandoverContext';
+import { HandoverContent } from '../../../components/Handover/HandoverContent';
+import { getRemoteRive } from '../../../lib/utils';
+import { SQUID_NATIVE_TOKEN } from '../utils/config';
 
 interface ReviewProps {
   data: AddFundsReviewData;
@@ -31,13 +39,22 @@ interface ReviewProps {
   onCloseButtonClick?: () => void;
 }
 
+const FIXED_HANDOVER_DURATION = 2000;
+
+const APPROVE_TXN_ANIMATION = '/access_coins.riv';
+const EXECUTE_TXN_ANIMATION = '/purchasing_items.riv';
+
 export function Review({
   data,
   showBackButton = false,
   onBackButtonClick, onCloseButtonClick,
 }: ReviewProps) {
   const { viewDispatch } = useContext(ViewContext);
-  const { addFundsState: { squid, provider, chains } } = useContext(AddFundsContext);
+  const {
+    addFundsState: {
+      squid, provider, chains, checkout,
+    },
+  } = useContext(AddFundsContext);
 
   const [route, setRoute] = useState<RouteResponse | undefined>();
   const [fromAddress, setFromAddress] = useState<string | undefined>();
@@ -45,20 +62,21 @@ export function Review({
   const [proceedDisabled, setProceedDisabled] = useState(true);
 
   const { getFromAmount, getRoute } = useRoutes();
+  const { addHandover, closeHandover } = useHandover({
+    id: HandoverTarget.GLOBAL,
+  });
 
   const {
-    convertToNetworkChangeableProvider, checkProviderChain, approve, execute,
+    convertToNetworkChangeableProvider, checkProviderChain, getAllowance, approve, execute,
   } = useExecute();
 
   const getFromAmountAndRoute = async () => {
-    if (!squid) {
-      return;
-    }
+    if (!squid) return;
 
     const address = await provider?.getSigner().getAddress();
-    if (!address) {
-      return;
-    }
+
+    if (!address) return;
+
     setFromAddress(address);
 
     const amountData = await getFromAmount(
@@ -66,19 +84,17 @@ export function Review({
       data.balance,
       data.toAmount,
       data.toChainId,
-      data.toTokenAddress,
+      data.toTokenAddress === 'native' ? SQUID_NATIVE_TOKEN : data.toTokenAddress,
     );
 
-    if (!amountData) {
-      return;
-    }
+    if (!amountData) return;
 
     const routeResponse = await getRoute(
       squid,
       amountData?.fromToken,
       amountData?.toToken,
       data.toAmount,
-      data.toTokenAddress,
+      address,
       address,
       false,
     );
@@ -129,7 +145,22 @@ export function Review({
     return `Gas Refuel +${route.route.estimate.gasCosts[0].token.name} ${formattedTotalGasFee}`;
   };
 
-  const onProceedClick = async () => {
+  const showHandover = (
+    animationPath: string,
+    state: RiveStateMachineInput,
+    headingText: string,
+    subheadingText?: ReactNode,
+    duration?: number,
+  ) => {
+    addHandover({
+      animationUrl: getRemoteRive(checkout?.config.environment, animationPath),
+      inputValue: state,
+      duration,
+      children: <HandoverContent headingText={headingText} subheadingText={subheadingText} />,
+    });
+  };
+
+  const handleTransaction = async () => {
     if (!squid || !provider || !route) {
       return;
     }
@@ -138,26 +169,71 @@ export function Review({
       clearInterval(getRouteIntervalId);
       setProceedDisabled(true);
 
-      const changeableProvider = await convertToNetworkChangeableProvider(provider);
+      showHandover(APPROVE_TXN_ANIMATION, RiveStateMachineInput.START, 'Preparing');
 
+      const changeableProvider = await convertToNetworkChangeableProvider(provider);
       await checkProviderChain(changeableProvider, route.route.params.fromChain);
 
-      await approve(changeableProvider, route);
+      const allowance = await getAllowance(changeableProvider, route);
+      const { fromAmount } = route.route.params;
+
+      if (allowance?.lt(fromAmount)) {
+        showHandover(
+          APPROVE_TXN_ANIMATION,
+          RiveStateMachineInput.WAITING,
+          'Waiting for access approval in your wallet',
+          'Approve the transaction request to complete this transaction',
+        );
+
+        await approve(changeableProvider, route);
+
+        showHandover(
+          APPROVE_TXN_ANIMATION,
+          RiveStateMachineInput.COMPLETED,
+          'Granted access to your tokens',
+          '',
+          FIXED_HANDOVER_DURATION,
+        );
+      }
+
+      showHandover(
+        EXECUTE_TXN_ANIMATION,
+        RiveStateMachineInput.WAITING,
+        'Waiting for transaction approval in wallet',
+        'Approve the transaction request to complete this transaction',
+      );
 
       const txReceipt = await execute(squid, changeableProvider, route);
 
-      viewDispatch({
-        payload: {
-          type: ViewActions.UPDATE_VIEW,
-          view: {
-            type: AddFundsWidgetViews.CONFIRMATION,
-            data: {
-              transactionHash: txReceipt.transactionHash,
-            },
-          },
-        },
-      });
+      showHandover(APPROVE_TXN_ANIMATION, RiveStateMachineInput.PROCESSING, 'Processing', '', FIXED_HANDOVER_DURATION);
+
+      showHandover(
+        EXECUTE_TXN_ANIMATION,
+        RiveStateMachineInput.COMPLETED,
+        'Funds added successfully', (
+          <>
+            Go to
+            {' '}
+            <Link
+              size="small"
+              rc={(
+                <a
+                  target="_blank"
+                  href={`https://axelarscan.io/gmp/${txReceipt.transactionHash}`}
+                  rel="noreferrer"
+                />
+            )}
+            >
+              Axelarscan
+            </Link>
+            {' '}
+            for transaction details
+          </>
+        ),
+      );
     } catch (e) {
+      closeHandover();
+
       viewDispatch({
         payload: {
           type: ViewActions.UPDATE_VIEW,
@@ -170,6 +246,8 @@ export function Review({
     }
   };
 
+  const onProceedClick = () => handleTransaction();
+
   return (
     <SimpleLayout
       header={(
@@ -180,7 +258,7 @@ export function Review({
         />
       )}
     >
-      {!route && <Body>Loading...</Body>}
+      {!route && <Heading>Loading...</Heading>}
       {route && (
         <Stack sx={{ w: '100%', flex: 1, p: 'base.spacing.x4' }} alignItems="stretch">
           <Stack sx={{ minh: '60px' }} rc={<header />} justifyContent="center">