diff --git a/examples/react/src/components/Connected.tsx b/examples/react/src/components/Connected.tsx
index b97bab9bd..a376f9cf8 100644
--- a/examples/react/src/components/Connected.tsx
+++ b/examples/react/src/components/Connected.tsx
@@ -4,9 +4,9 @@ import {
   useCheckoutModal,
   useERC1155SaleContractCheckout,
   useSelectPaymentModal,
-  useSwapModal
+  useSwapModal,
+  type SwapModalSettings
 } from '@0xsequence/checkout'
-import type { SwapModalSettings } from '@0xsequence/checkout'
 import {
   getModalPositionCss,
   signEthAuthProof,
@@ -23,16 +23,15 @@ import { useOpenWalletModal } from '@0xsequence/wallet-widget'
 import { CardButton, Header, WalletListItem } from 'example-shared-components'
 import { AnimatePresence } from 'motion/react'
 import React, { useEffect, type ComponentProps } from 'react'
-import { encodeFunctionData, formatUnits, parseAbi, toHex, zeroAddress } from 'viem'
+import { encodeFunctionData, formatUnits, parseAbi } from 'viem'
 import { createSiweMessage, generateSiweNonce } from 'viem/siwe'
 import { useAccount, useChainId, usePublicClient, useSendTransaction, useWalletClient, useWriteContract } from 'wagmi'
 
 import { sponsoredContractAddresses } from '../config'
 import { messageToSign } from '../constants'
-import { ERC_1155_SALE_CONTRACT } from '../constants/erc1155-sale-contract'
-// import { ERC_721_SALE_CONTRACT } from '../constants/erc721-sale-contract'
 import { abi } from '../constants/nft-abi'
 import { delay, getCheckoutSettings, getOrderbookCalldata } from '../utils'
+import { checkoutPresets } from '../utils/checkout'
 
 import { CustomCheckout } from './CustomCheckout'
 import { Select } from './Select'
@@ -42,6 +41,7 @@ const searchParams = new URLSearchParams(location.search)
 const isDebugMode = searchParams.has('debug')
 const checkoutProvider = searchParams.get('checkoutProvider')
 const onRampProvider = searchParams.get('onRampProvider')
+const checkoutPreset = searchParams.get('checkoutPreset') || 'forte-payment-erc1155-sale-native-token-testnet'
 
 export const Connected = () => {
   const [isOpenCustomCheckout, setIsOpenCustomCheckout] = React.useState(false)
@@ -413,78 +413,16 @@ export const Connected = () => {
       return
     }
 
-    // NATIVE token sale
-    const currencyAddress = zeroAddress
-    const salesContractAddress = '0xf0056139095224f4eec53c578ab4de1e227b9597'
-    const collectionAddress = '0x92473261f2c26f2264429c451f70b0192f858795'
-    const price = '200000000000000'
-    const contractId = '674eb55a3d739107bbd18ecb'
-
-    // // ERC-20 contract
-    // const currencyAddress = '0x3c499c542cEF5E3811e1192ce70d8cC03d5c3359'
-    // const salesContractAddress = '0xe65b75eb7c58ffc0bf0e671d64d0e1c6cd0d3e5b'
-    // const collectionAddress = '0xdeb398f41ccd290ee5114df7e498cf04fac916cb'
-    // const price = '200000'
-    // const contractId = '674eb5613d739107bbd18ed2'
-
-    const collectibles = [
-      {
-        tokenId: '1',
-        quantity: '1'
-      }
-    ]
-
-    const purchaseTransactionData = encodeFunctionData({
-      abi: ERC_1155_SALE_CONTRACT,
-      functionName: 'mint',
-      // [to, tokenIds, amounts, data, expectedPaymentToken, maxTotal, proof]
-      args: [
-        address,
-        collectibles.map(c => BigInt(c.tokenId)),
-        collectibles.map(c => BigInt(c.quantity)),
-        toHex(0),
-        currencyAddress,
-        price,
-        [toHex(0, { size: 32 })]
-      ]
-    })
-
-    // ERC-721 contract
-    // const currencyAddress = '0x3c499c542cEF5E3811e1192ce70d8cC03d5c3359'
-    // const salesContractAddress = '0xa0284905d29cbeb19f4be486f9091fac215b7a6a'
-    // const collectionAddress = '0xd705db0a96075b98758c4bdafe8161d8566a68f8'
-    // const price = '1'
-    // const contractId = '674eb5613d739107bbd18ed2'
-
-    // const chainId = 137
-
-    // const collectibles = [
-    //   {
-    //     quantity: '1'
-    //   }
-    // ]
-
-    // const purchaseTransactionData = encodeFunctionData({
-    //   abi: ERC_721_SALE_CONTRACT,
-    //   functionName: 'mint',
-    //   // [to, amount, expectedPaymentToken, maxTotal, proof]
-    //   args: [address, BigInt(1), currencyAddress, price, [toHex(0, { size: 32 })]]
-    // })
+    const creditCardProvider = checkoutProvider || 'forte'
 
     openSelectPaymentModal({
-      collectibles,
-      chain: chainId,
-      price,
-      targetContractAddress: salesContractAddress,
       recipientAddress: address,
-      currencyAddress,
-      collectionAddress,
-      creditCardProviders: [checkoutProvider || 'transak'],
+      creditCardProviders: [creditCardProvider],
       onRampProvider: onRampProvider ? (onRampProvider as TransactionOnRampProvider) : TransactionOnRampProvider.transak,
       transakConfig: {
-        contractId
+        contractId: '674eb5613d739107bbd18ed2'
       },
-      onSuccess: (txnHash: string) => {
+      onSuccess: (txnHash?: string) => {
         console.log('success!', txnHash)
       },
       onError: (error: Error) => {
@@ -493,7 +431,7 @@ export const Connected = () => {
       onClose: () => {
         console.log('modal closed!')
       },
-      txData: purchaseTransactionData
+      ...checkoutPresets[checkoutPreset as keyof typeof checkoutPresets](address || '')
     })
   }
 
diff --git a/examples/react/src/components/CustomCheckout/index.tsx b/examples/react/src/components/CustomCheckout/index.tsx
index 92ffcfb48..44eb6e32d 100644
--- a/examples/react/src/components/CustomCheckout/index.tsx
+++ b/examples/react/src/components/CustomCheckout/index.tsx
@@ -59,7 +59,7 @@ export const CustomCheckout = () => {
       contractId,
       apiKey: '5911d9ec-46b5-48fa-a755-d59a715ff0cf'
     },
-    onSuccess: (txnHash: string) => {
+    onSuccess: (txnHash?: string) => {
       console.log('success!', txnHash)
     },
     onError: (error: Error) => {
diff --git a/examples/react/src/config.ts b/examples/react/src/config.ts
index cd3cfa834..5e3ef4f3c 100644
--- a/examples/react/src/config.ts
+++ b/examples/react/src/config.ts
@@ -15,7 +15,7 @@ const walletType: WalletType = searchParams.get('type') === 'universal' ? 'unive
 const isDebugMode = searchParams.has('debug')
 // @ts-ignore
 const isDev = __SEQUENCE_WEB_SDK_IS_DEV__
-const projectAccessKey = isDev ? 'AQAAAAAAAAK2JvvZhWqZ51riasWBftkrVXE' : 'AQAAAAAAAEGvyZiWA9FMslYeG_yayXaHnSI'
+const projectAccessKey = isDev ? 'AQAAAAAAAAbRfXdDS5e-ZD2pNeMcCtNnij4' : 'AQAAAAAAAEGvyZiWA9FMslYeG_yayXaHnSI'
 const walletConnectProjectId = 'c65a6cb1aa83c4e24500130f23a437d8'
 
 export const sponsoredContractAddresses: Record<number, `0x${string}`> = {
@@ -184,7 +184,8 @@ export const checkoutConfig: SequenceCheckoutConfig = {
         sardineCheckoutUrl: 'https://sardine-checkout-sandbox.sequence.info',
         sardineOnRampUrl: 'https://crypto.sandbox.sardine.ai/',
         transakApiUrl: 'https://global-stg.transak.com',
-        transakApiKey: 'c20f2a0e-fe6a-4133-8fa7-77e9f84edf98'
+        transakApiKey: 'c20f2a0e-fe6a-4133-8fa7-77e9f84edf98',
+        forteWidgetUrl: 'https://payments.sandbox.lemmax.com/forte-payments-widget.js'
       }
     : undefined
 }
diff --git a/examples/react/src/utils/checkout.ts b/examples/react/src/utils/checkout.ts
new file mode 100644
index 000000000..2118f82d9
--- /dev/null
+++ b/examples/react/src/utils/checkout.ts
@@ -0,0 +1,422 @@
+import { type ForteConfig } from '@0xsequence/checkout'
+import { zeroAddress } from 'viem'
+import { encodeFunctionData, toHex } from 'viem'
+
+import { ERC_1155_SALE_CONTRACT } from '../constants/erc1155-sale-contract'
+import { ERC_721_SALE_CONTRACT } from '../constants/erc721-sale-contract'
+import { orderbookAbi } from '../constants/orderbook-abi'
+
+interface PurchaseTransactionDataERC721Sale {
+  recipientAddress: string
+  currencyAddress: string
+  price: string
+}
+
+const getPurchaseTransactionERC721Sale = ({ recipientAddress, currencyAddress, price }: PurchaseTransactionDataERC721Sale) => {
+  return encodeFunctionData({
+    abi: ERC_721_SALE_CONTRACT,
+    functionName: 'mint',
+    // [to, amount, expectedPaymentToken, maxTotal, proof]
+    args: [recipientAddress, BigInt(1), currencyAddress, price, [toHex(0, { size: 32 })]]
+  }) as `0x${string}`
+}
+
+interface PurchaseTransactionDataERC1155Sale {
+  recipientAddress: string
+  currencyAddress: string
+  price: string
+  collectibles: {
+    tokenId: string
+    quantity: string
+  }[]
+}
+
+const getPurchaseTransactionERC1155Sale = ({
+  recipientAddress,
+  currencyAddress,
+  price,
+  collectibles
+}: PurchaseTransactionDataERC1155Sale) => {
+  return encodeFunctionData({
+    abi: ERC_1155_SALE_CONTRACT,
+    functionName: 'mint',
+    // [to, tokenIds, amounts, data, expectedPaymentToken, maxTotal, proof]
+    args: [
+      recipientAddress,
+      collectibles.map(c => BigInt(c.tokenId)),
+      collectibles.map(c => BigInt(c.quantity)),
+      toHex(0),
+      currencyAddress,
+      price,
+      [toHex(0, { size: 32 })]
+    ]
+  }) as `0x${string}`
+}
+
+interface GetOrderbookTransactionDataArgs {
+  recipientAddress: string
+  requestId: string
+  quantity: string
+}
+
+const getOrderbookTransactionData = ({ recipientAddress, requestId, quantity }: GetOrderbookTransactionDataArgs) => {
+  return encodeFunctionData({
+    abi: orderbookAbi,
+    functionName: 'acceptRequest',
+    args: [requestId, quantity, recipientAddress, [], []]
+  }) as `0x${string}`
+}
+
+interface CheckoutPreset {
+  chain: number | string
+  currencyAddress: string
+  targetContractAddress: string
+  collectionAddress: string
+  price: string
+  collectibles: {
+    tokenId?: string
+    quantity: string
+  }[]
+  txData: `0x${string}`
+  forteConfig?: ForteConfig
+}
+
+export const checkoutPresets: Record<string, (recipientAddress: string) => CheckoutPreset> = {
+  'erc1155-sale-native-token-polygon': (recipientAddress: string) => {
+    const collectibles = [
+      {
+        tokenId: '1',
+        quantity: '1'
+      }
+    ]
+    const price = '200000000000000'
+    return {
+      chain: 137,
+      currencyAddress: zeroAddress,
+      targetContractAddress: '0xf0056139095224f4eec53c578ab4de1e227b9597',
+      collectionAddress: '0x92473261f2c26f2264429c451f70b0192f858795',
+      price,
+      collectibles,
+      txData: getPurchaseTransactionERC1155Sale({
+        recipientAddress,
+        currencyAddress: zeroAddress,
+        price,
+        collectibles
+      })
+    }
+  },
+  'erc1155-sale-erc20-token-polygon': (recipientAddress: string) => {
+    const collectibles = [
+      {
+        tokenId: '1',
+        quantity: '1'
+      }
+    ]
+    const price = '20000'
+    return {
+      chain: 137,
+      currencyAddress: '0x3c499c542cEF5E3811e1192ce70d8cC03d5c3359',
+      targetContractAddress: '0xe65b75eb7c58ffc0bf0e671d64d0e1c6cd0d3e5b',
+      collectionAddress: '0xdeb398f41ccd290ee5114df7e498cf04fac916cb',
+      price,
+      collectibles,
+      txData: getPurchaseTransactionERC1155Sale({
+        recipientAddress,
+        currencyAddress: '0x3c499c542cEF5E3811e1192ce70d8cC03d5c3359',
+        price,
+        collectibles
+      })
+    }
+  },
+  'erc721-sale-erc20-token-polygon': (recipientAddress: string) => {
+    const collectibles = [
+      {
+        quantity: '1'
+      }
+    ]
+    const price = '1'
+    return {
+      chain: 137,
+      currencyAddress: '0x3c499c542cEF5E3811e1192ce70d8cC03d5c3359',
+      targetContractAddress: '0xa0284905d29cbeb19f4be486f9091fac215b7a6a',
+      collectionAddress: '0xd705db0a96075b98758c4bdafe8161d8566a68f8',
+      price,
+      collectibles,
+      txData: getPurchaseTransactionERC721Sale({
+        recipientAddress,
+        currencyAddress: '0x3c499c542cEF5E3811e1192ce70d8cC03d5c3359',
+        price
+      })
+    }
+  },
+  'forte-payment-testnet-testing-opensea': (recipientAddress: string) => {
+    const collectibles = [
+      {
+        tokenId: '1',
+        quantity: '1'
+      }
+    ]
+    const price = '1000000000000000'
+    const structuredCalldata = ''
+    return {
+      chain: 11155111,
+      currencyAddress: zeroAddress,
+      targetContractAddress: '0x1130e2e03f682f05f298fd702787d9bd0bf94316',
+      collectionAddress: '0xb496d64e1fe4f3465fb83f3fd8cb50d8e227101b',
+      price,
+      collectibles,
+      txData: getPurchaseTransactionERC1155Sale({
+        recipientAddress,
+        currencyAddress: zeroAddress,
+        price,
+        collectibles
+      }),
+      forteConfig: {
+        protocol: 'custom_evm_call',
+        calldata: structuredCalldata,
+        sellerAddress: '0x184D4F89ad34bb0491563787ca28118273402986'
+      }
+    }
+  },
+  'forte-payment-erc1155-sale-native-token-testnet': (recipientAddress: string) => {
+    const collectibles = [
+      {
+        tokenId: '1',
+        quantity: '1'
+      }
+    ]
+    const price = '1000000000000000'
+
+    const structuredCalldata = {
+      functionName: 'mint',
+      arguments: [
+        {
+          type: 'address',
+          value: '${receiver_address}'
+        },
+        {
+          type: 'uint256[]',
+          value: ['1']
+        },
+        {
+          type: 'uint256[]',
+          value: ['1']
+        },
+        {
+          type: 'bytes',
+          value: toHex(0)
+        },
+        {
+          type: 'address',
+          value: zeroAddress
+        },
+        {
+          type: 'uint256',
+          value: price
+        },
+        {
+          type: 'bytes32[]',
+          value: [toHex(0, { size: 32 })]
+        }
+      ]
+    }
+
+    return {
+      chain: 11155111,
+      currencyAddress: zeroAddress,
+      targetContractAddress: '0x1130e2e03f682f05f298fd702787d9bd0bf94316',
+      collectionAddress: '0xb496d64e1fe4f3465fb83f3fd8cb50d8e227101b',
+      price,
+      collectibles,
+      txData: getPurchaseTransactionERC1155Sale({
+        recipientAddress,
+        currencyAddress: zeroAddress,
+        price,
+        collectibles
+      }),
+      forteConfig: {
+        protocol: 'mint',
+        calldata: structuredCalldata,
+        sellerAddress: '0x184D4F89ad34bb0491563787ca28118273402986'
+      }
+    }
+  },
+  'forte-payment-custom-evm-call-native-token-testnet': (recipientAddress: string) => {
+    const collectibles = [
+      {
+        tokenId: '1',
+        quantity: '1'
+      }
+    ]
+    const price = '1000000000000000'
+    const requestId = '40'
+    const txData = getOrderbookTransactionData({
+      recipientAddress: recipientAddress,
+      requestId,
+      quantity: collectibles[0].quantity
+    })
+
+    const structuredCalldata = {
+      functionName: 'acceptRequest',
+      arguments: [
+        {
+          type: 'uint256',
+          value: requestId
+        },
+        {
+          type: 'uint256',
+          value: collectibles[0].quantity
+        },
+        {
+          type: 'address',
+          value: '${receiver_address}'
+        },
+        {
+          type: 'uint256[]',
+          value: []
+        },
+        {
+          type: 'address[]',
+          value: []
+        }
+      ]
+    }
+
+    return {
+      chain: 11155111,
+      currencyAddress: zeroAddress,
+      targetContractAddress: '0xfdb42A198a932C8D3B506Ffa5e855bC4b348a712',
+      collectionAddress: '0xb496d64e1fe4f3465fb83f3fd8cb50d8e227101b',
+      price,
+      collectibles,
+      txData,
+      forteConfig: {
+        protocol: 'custom_evm_call',
+        calldata: structuredCalldata,
+        sellerAddress: '0x184D4F89ad34bb0491563787ca28118273402986'
+      }
+    }
+  },
+  'forte-payment-erc1155-sale-erc20-token-testnet': (recipientAddress: string) => {
+    const collectibles = [
+      {
+        tokenId: '1',
+        quantity: '1'
+      }
+    ]
+    const price = '1000000000000000'
+    const currencyAddress = '0xfFf9976782d46CC05630D1f6eBAb18b2324d6B14'
+
+    const structuredCalldata = {
+      functionName: 'mint',
+      arguments: [
+        {
+          type: 'address',
+          value: '${receiver_address}'
+        },
+        {
+          type: 'uint256[]',
+          value: ['1']
+        },
+        {
+          type: 'uint256[]',
+          value: ['1']
+        },
+        {
+          type: 'bytes',
+          value: toHex(0)
+        },
+        {
+          type: 'address',
+          value: currencyAddress
+        },
+        {
+          type: 'uint256',
+          value: price
+        },
+        {
+          type: 'bytes32[]',
+          value: [toHex(0, { size: 32 })]
+        }
+      ]
+    }
+
+    return {
+      chain: 11155111,
+      currencyAddress,
+      targetContractAddress: '0x0c29598a69aeda9f3fed0ba64a2d94c54f83e8c6',
+      approvedSpenderAddress: '0x0c29598a69aeda9f3fed0ba64a2d94c54f83e8c6',
+      collectionAddress: '0xb496d64e1fe4f3465fb83f3fd8cb50d8e227101b',
+      price,
+      collectibles,
+      txData: getPurchaseTransactionERC1155Sale({
+        recipientAddress,
+        currencyAddress,
+        price,
+        collectibles
+      }),
+      forteConfig: {
+        protocol: 'mint',
+        calldata: structuredCalldata,
+        sellerAddress: '0x184D4F89ad34bb0491563787ca28118273402986'
+      }
+    }
+  },
+  'forte-payment-erc1155-orderbook-erc20-token-testnet': (recipientAddress: string) => {
+    const collectibles = [
+      {
+        tokenId: '1',
+        quantity: '1'
+      }
+    ]
+    const price = '1000000000000000'
+    const currencyAddress = '0xfFf9976782d46CC05630D1f6eBAb18b2324d6B14'
+    const requestId = '41'
+    const txData = getOrderbookTransactionData({
+      recipientAddress: recipientAddress,
+      requestId,
+      quantity: collectibles[0].quantity
+    })
+
+    const structuredCalldata = {
+      functionName: 'acceptRequest',
+      arguments: [
+        {
+          type: 'uint256',
+          value: requestId
+        },
+        {
+          type: 'uint256',
+          value: collectibles[0].quantity
+        },
+        {
+          type: 'address',
+          value: '${receiver_address}'
+        },
+        {
+          type: 'uint256[]',
+          value: []
+        },
+        {
+          type: 'address[]',
+          value: []
+        }
+      ]
+    }
+
+    return {
+      chain: 11155111,
+      currencyAddress,
+      targetContractAddress: '0xfdb42A198a932C8D3B506Ffa5e855bC4b348a712',
+      collectionAddress: '0xb496d64e1fe4f3465fb83f3fd8cb50d8e227101b',
+      price,
+      collectibles,
+      txData,
+      forteConfig: {
+        protocol: 'custom_evm_call',
+        calldata: structuredCalldata,
+        sellerAddress: '0x184D4F89ad34bb0491563787ca28118273402986'
+      }
+    }
+  }
+}
diff --git a/packages/checkout/README.md b/packages/checkout/README.md
index 603b1e853..6c78c2373 100644
--- a/packages/checkout/README.md
+++ b/packages/checkout/README.md
@@ -102,7 +102,7 @@ const MyComponent = () => {
       collectionAddress,
       creditCardProviders: ['sardine'],
       copyrightText: 'ⓒ2024 Sequence',
-      onSuccess: (txnHash: string) => {
+      onSuccess: (txnHash?: string) => {
         console.log('success!', txnHash)
       },
       onError: (error: Error) => {
@@ -156,7 +156,7 @@ const MyComponent = () => {
         quantity: "1",
       },
     ],
-    onSuccess: (txnHash: string) => {
+    onSuccess: (txnHash?: string) => {
       console.log("success!", txnHash);
     },
     onError: (error: Error) => {
@@ -278,7 +278,7 @@ const CustomCheckoutUI = () => {
       contractId,
       apiKey: '5911d9ec-46b5-48fa-a755-d59a715ff0cf'
     },
-    onSuccess: (txnHash: string) => {
+    onSuccess: (txnHash?: string) => {
       console.log('success!', txnHash)
     },
     onError: (error: Error) => {
diff --git a/packages/checkout/src/api/data.ts b/packages/checkout/src/api/data.ts
index 75c44eb5c..fd0dfe2ea 100644
--- a/packages/checkout/src/api/data.ts
+++ b/packages/checkout/src/api/data.ts
@@ -1,8 +1,9 @@
 import type { SequenceAPIClient } from '@0xsequence/api'
 import type { TokenMetadata } from '@0xsequence/metadata'
-import { networks, type ChainId } from '@0xsequence/network'
+import { findSupportedNetwork, networks, type ChainId } from '@0xsequence/network'
+import { zeroAddress } from 'viem'
 
-import type { CreditCardCheckout } from '../contexts/CheckoutModal.js'
+import { type CreditCardCheckout, type ForteConfig, type StructuredCalldata } from '../contexts/index.js'
 
 export interface FetchSardineClientTokenReturn {
   token: string
@@ -233,3 +234,268 @@ export const fetchSardineOnRampLink = async ({
 
   return url.href
 }
+
+export interface FetchForteAccessTokenReturn {
+  accessToken: string
+  expiresIn: number
+  tokenType: string
+}
+
+export const fetchForteAccessToken = async (forteApiUrl: string): Promise<FetchForteAccessTokenReturn> => {
+  const clientId = ''
+  const clientSecret = ''
+
+  const url = `${forteApiUrl}/auth/v1/oauth2/token`
+
+  const res = await fetch(url, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    body: JSON.stringify({
+      client_id: clientId,
+      client_secret: clientSecret
+    })
+  })
+
+  const { data } = await res.json()
+
+  return {
+    accessToken: data.access_token,
+    expiresIn: data.expires_in,
+    tokenType: data.token_type
+  }
+}
+
+export interface CreateFortePaymentIntentArgs {
+  recipientAddress: string
+  chainId: string
+  signature?: string
+  nftAddress: string
+  currencyAddress: string
+  targetContractAddress: string
+  nftName: string
+  imageUrl: string
+  tokenId?: string
+  currencyQuantity: string
+  protocolConfig: ForteConfig
+  calldata: string | StructuredCalldata
+  approvedSpenderAddress?: string
+}
+
+const forteCurrencyMap: { [chainId: string]: { [currencyAddress: string]: string } } = {
+  '1': {
+    [zeroAddress]: 'ETH',
+    ['0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48'.toLowerCase()]: 'USDC_ETH'
+  },
+  '137': {
+    [zeroAddress]: 'POL',
+    ['0x3c499c542cEF5E3811e1192ce70d8cC03d5c3359'.toLowerCase()]: 'USDC_POLYGON'
+  },
+  '8453': {
+    [zeroAddress]: 'BASE_ETH'
+  },
+  '11155111': {
+    [zeroAddress]: 'ETH',
+    ['0xfFf9976782d46CC05630D1f6eBAb18b2324d6B14'.toLowerCase()]: 'WETH'
+  }
+}
+
+const getForteCurrency = (chainId: string, currencyAddress: string) => {
+  return forteCurrencyMap[chainId]?.[currencyAddress.toLowerCase()] || 'ETH'
+}
+
+export const createFortePaymentIntent = async (
+  sequenceApiUrl: string,
+  projectAccessKey: string,
+  args: CreateFortePaymentIntentArgs
+): Promise<any> => {
+  const {
+    recipientAddress,
+    chainId,
+    calldata,
+    targetContractAddress,
+    nftName,
+    nftAddress,
+    imageUrl,
+    tokenId,
+    protocolConfig,
+    currencyAddress,
+    currencyQuantity,
+    approvedSpenderAddress
+  } = args
+
+  const network = findSupportedNetwork(chainId)
+
+  if (!network) {
+    throw new Error('Invalid chainId')
+  }
+
+  const url = `${sequenceApiUrl}/rpc/API/FortePayCreateIntent`
+  const forteBlockchainName = network.name.toLowerCase().replace('-', '_')
+  const idempotencyKey = `${recipientAddress}-${tokenId}-${targetContractAddress}-${nftName}-${new Date().getTime()}`
+
+  let intent: { [key: string]: any } = {
+    blockchain: forteBlockchainName,
+    idempotencyKey: idempotencyKey,
+    buyer: {
+      id: recipientAddress,
+      wallet: {
+        address: recipientAddress,
+        blockchain: forteBlockchainName
+      }
+    }
+  }
+
+  if (protocolConfig.protocol == 'mint') {
+    intent = {
+      ...intent,
+      transactionType: 'BUY_NFT_MINT',
+      currency: getForteCurrency(chainId, currencyAddress),
+      seller: {
+        wallet: {
+          address: protocolConfig.sellerAddress,
+          blockchain: forteBlockchainName
+        }
+      },
+      items: [
+        {
+          id: '1',
+          amount: currencyQuantity,
+          imageUrl: imageUrl,
+          title: nftName,
+          mintData: {
+            ...(approvedSpenderAddress ? { payToAddress: approvedSpenderAddress } : {}),
+            tokenContractAddress: nftAddress,
+            tokenIds: tokenId ? [tokenId] : [],
+            protocolAddress: targetContractAddress,
+            protocol: 'custom_evm_call',
+            ...(typeof calldata === 'string'
+              ? {
+                  calldata: calldata
+                }
+              : {
+                  structuredCalldata: {
+                    function_name: calldata.functionName,
+                    arguments: calldata.arguments
+                  }
+                })
+          }
+        }
+      ]
+    }
+  } else {
+    let listingData: { [key: string]: any } = {}
+
+    if (protocolConfig.protocol == 'custom_evm_call') {
+      listingData = {
+        ...(approvedSpenderAddress ? { payToAddress: approvedSpenderAddress } : {}),
+        protocol: protocolConfig.protocol,
+        protocolAddress: targetContractAddress,
+        ...(typeof protocolConfig.calldata === 'string'
+          ? { calldata: protocolConfig.calldata }
+          : {
+              structuredCalldata: {
+                function_name: protocolConfig.calldata.functionName,
+                arguments: protocolConfig.calldata.arguments
+              }
+            })
+      }
+    }
+
+    intent = {
+      ...intent,
+      transactionType: 'BUY_NFT',
+      currency: getForteCurrency(chainId, currencyAddress),
+      items: [
+        {
+          amount: currencyQuantity,
+          id: '1',
+          imageUrl: imageUrl,
+          listingData: listingData,
+          nftData: {
+            contractAddress: nftAddress,
+            tokenId: tokenId
+          },
+          title: nftName
+        }
+      ],
+      seller: {
+        wallet: {
+          address: protocolConfig.sellerAddress || '',
+          blockchain: forteBlockchainName
+        }
+      }
+    }
+  }
+
+  const res = await fetch(url, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      'X-Access-Key': projectAccessKey
+    },
+    body: JSON.stringify({ intent })
+  })
+
+  if (!res.ok) {
+    let errorMessage = `Failed to fetch widget data, with status: ${res.status}`
+
+    try {
+      const data = await res.json()
+
+      if (data.cause) {
+        errorMessage = `Failed to fetch widget data: ${data.cause}`
+      } else if (data.message) {
+        errorMessage = `Failed to fetch widget data: ${data.message}`
+      } else if (data.error) {
+        errorMessage = `Failed to fetch widget data: ${data.error}`
+      }
+    } catch (parseError) {
+      console.error('Could not parse error response as JSON:', parseError)
+    }
+
+    throw new Error(errorMessage)
+  }
+
+  const data = await res.json()
+
+  return data.resp
+}
+
+export interface FetchFortePaymentStatusArgs {
+  paymentIntentId: string
+}
+
+export type FortePaymentStatus = 'Expired' | 'Created' | 'Declined' | 'Approved'
+
+export interface FetchFortePaymentStatusReturn {
+  status: FortePaymentStatus
+}
+
+export const fetchFortePaymentStatus = async (
+  forteApiUrl: string,
+  projectAccessKey: string,
+  args: FetchFortePaymentStatusArgs
+): Promise<FetchFortePaymentStatusReturn> => {
+  const { paymentIntentId } = args
+
+  const url = `${forteApiUrl}/rpc/API/FortePayGetPaymentStatuses`
+
+  const res = await fetch(url, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      'X-Access-Key': projectAccessKey
+    },
+    body: JSON.stringify({
+      paymentIntentIds: [paymentIntentId]
+    })
+  })
+
+  const { statuses } = await res.json()
+
+  return {
+    status: (statuses[0]?.status as FortePaymentStatus) || ''
+  }
+}
diff --git a/packages/checkout/src/components/SequenceCheckoutProvider/ForteController.tsx b/packages/checkout/src/components/SequenceCheckoutProvider/ForteController.tsx
new file mode 100644
index 000000000..e58ea8b34
--- /dev/null
+++ b/packages/checkout/src/components/SequenceCheckoutProvider/ForteController.tsx
@@ -0,0 +1,136 @@
+import { useConfig } from '@0xsequence/hooks'
+import { useEffect, useState } from 'react'
+
+import { fetchFortePaymentStatus } from '../../api/data.js'
+import { FortePaymentControllerProvider, useEnvironmentContext, type FortePaymentData } from '../../contexts/index.js'
+
+const POLLING_TIME = 10 * 1000
+
+export const ForteController = ({ children }: { children: React.ReactNode }) => {
+  const [fortePaymentData, setFortePaymentData] = useState<FortePaymentData>()
+  const { forteWidgetUrl } = useEnvironmentContext()
+  const [isSuccess, setIsSuccess] = useState(false)
+  const [widgetInitialized, setWidgetInitialized] = useState(false)
+  const { env, projectAccessKey } = useConfig()
+  const apiUrl = env.apiUrl
+
+  const initializeWidget = (fortePaymentData: FortePaymentData) => {
+    setIsSuccess(false)
+    setFortePaymentData(fortePaymentData)
+  }
+
+  useEffect(() => {
+    const widgetInitializedListener: () => void = () => {
+      setWidgetInitialized(true)
+    }
+
+    if (!widgetInitialized) {
+      window.addEventListener('FortePaymentsWidgetLoaded', widgetInitializedListener)
+    }
+
+    return () => {
+      window.removeEventListener('FortePaymentsWidgetLoaded', widgetInitializedListener)
+    }
+  }, [widgetInitialized, fortePaymentData])
+
+  useEffect(() => {
+    if (widgetInitialized && fortePaymentData) {
+      const widgetData = fortePaymentData.widgetData
+
+      // @ts-ignore-next-line
+      if (window?.initFortePaymentsWidget && widgetData) {
+        const data = {
+          notes: widgetData.notes,
+          widget_data: widgetData.widgetData,
+          payment_intent_id: widgetData.paymentIntentId,
+          error_code: widgetData.error_code ?? null,
+          flow: widgetData.flow
+        }
+
+        // @ts-ignore-next-line
+        window.initFortePaymentsWidget({
+          containerId: 'forte-payments-widget-container',
+          data
+        })
+      }
+    }
+  }, [widgetInitialized, fortePaymentData])
+
+  useEffect(() => {
+    let interval: NodeJS.Timeout | undefined
+    let widgetClosedListener: () => void
+
+    if (fortePaymentData && !isSuccess) {
+      interval = setInterval(() => {
+        checkFortePaymentStatus()
+      }, POLLING_TIME)
+
+      widgetClosedListener = () => {
+        fortePaymentData.creditCardCheckout?.onClose?.()
+      }
+
+      window.addEventListener('FortePaymentsWidgetClosed', widgetClosedListener)
+    }
+
+    return () => {
+      clearInterval(interval)
+      window.removeEventListener('FortePaymentsWidgetClosed', widgetClosedListener)
+    }
+  }, [fortePaymentData, isSuccess, widgetInitialized])
+
+  useEffect(() => {
+    if (!fortePaymentData) {
+      return
+    }
+    if (document.getElementById('forte-widget-script')) {
+      return
+    }
+
+    const container = document.createElement('div')
+    container.id = 'forte-payments-widget-container'
+    document.body.appendChild(container)
+
+    const script = document.createElement('script')
+    script.id = 'forte-widget-script'
+    script.type = 'module'
+    script.async = true
+    script.src = forteWidgetUrl
+
+    document.body.appendChild(script)
+
+    // After loading the script, Forte will generate a FortePaymentsWidgetLoaded event when the widget is ready to be called
+  }, [fortePaymentData])
+
+  const checkFortePaymentStatus = async () => {
+    if (!fortePaymentData || isSuccess) {
+      return
+    }
+
+    const { status } = await fetchFortePaymentStatus(apiUrl, projectAccessKey, {
+      paymentIntentId: fortePaymentData.paymentIntentId
+    })
+
+    if (status === 'Approved') {
+      fortePaymentData.creditCardCheckout?.onSuccess?.()
+      setIsSuccess(true)
+    }
+
+    if (status === 'Declined' || status === 'Expired') {
+      fortePaymentData.creditCardCheckout?.onError?.(
+        new Error('A problem occurred while processing your payment'),
+        fortePaymentData.creditCardCheckout
+      )
+    }
+  }
+
+  return (
+    <FortePaymentControllerProvider
+      value={{
+        data: fortePaymentData,
+        initializeWidget
+      }}
+    >
+      {children}
+    </FortePaymentControllerProvider>
+  )
+}
diff --git a/packages/checkout/src/components/SequenceCheckoutProvider/SequenceCheckoutProvider.tsx b/packages/checkout/src/components/SequenceCheckoutProvider/SequenceCheckoutProvider.tsx
index 15832ae78..10d4c008f 100644
--- a/packages/checkout/src/components/SequenceCheckoutProvider/SequenceCheckoutProvider.tsx
+++ b/packages/checkout/src/components/SequenceCheckoutProvider/SequenceCheckoutProvider.tsx
@@ -42,6 +42,8 @@ import {
 } from '../../views/index.js'
 import { NavigationHeader } from '../NavigationHeader.js'
 
+import { ForteController } from './ForteController.js'
+
 export interface SequenceCheckoutConfig {
   env?: Partial<EnvironmentOverrides>
 }
@@ -245,177 +247,180 @@ export const SequenceCheckoutProvider = ({ children, config }: SequenceCheckoutP
         sardineCheckoutUrl: config?.env?.sardineCheckoutUrl ?? 'https://sardine-checkout.sequence.info',
         sardineOnRampUrl: config?.env?.sardineOnRampUrl ?? 'https://crypto.sardine.ai/',
         transakApiUrl: config?.env?.transakApiUrl ?? 'https://global.transak.com',
-        transakApiKey: config?.env?.transakApiKey ?? '5911d9ec-46b5-48fa-a755-d59a715ff0cf'
+        transakApiKey: config?.env?.transakApiKey ?? '5911d9ec-46b5-48fa-a755-d59a715ff0cf',
+        forteWidgetUrl: config?.env?.forteWidgetUrl ?? 'https://payments.prod.lemmax.com/forte-payments-widget.js'
       }}
     >
-      <SwapModalContextProvider
-        value={{
-          isSwapModalOpen: isOpenSwapModal,
-          openSwapModal,
-          closeSwapModal,
-          swapModalSettings
-        }}
-      >
-        <TransactionStatusModalContextProvider
+      <ForteController>
+        <SwapModalContextProvider
           value={{
-            openTransactionStatusModal: triggerTransactionStatusModal,
-            closeTransactionStatusModal,
-            transactionStatusSettings
+            isSwapModalOpen: isOpenSwapModal,
+            openSwapModal,
+            closeSwapModal,
+            swapModalSettings
           }}
         >
-          <SelectPaymentContextProvider
+          <TransactionStatusModalContextProvider
             value={{
-              openSelectPaymentModal,
-              closeSelectPaymentModal,
-              selectPaymentSettings
+              openTransactionStatusModal: triggerTransactionStatusModal,
+              closeTransactionStatusModal,
+              transactionStatusSettings
             }}
           >
-            <AddFundsContextProvider
+            <SelectPaymentContextProvider
               value={{
-                isAddFundsModalOpen: openAddFundsModal,
-                triggerAddFunds,
-                closeAddFunds,
-                addFundsSettings
+                openSelectPaymentModal,
+                closeSelectPaymentModal,
+                selectPaymentSettings
               }}
             >
-              <CheckoutModalContextProvider
+              <AddFundsContextProvider
                 value={{
-                  triggerCheckout,
-                  closeCheckout,
-                  settings,
-                  theme
+                  isAddFundsModalOpen: openAddFundsModal,
+                  triggerAddFunds,
+                  closeAddFunds,
+                  addFundsSettings
                 }}
               >
-                <TransferFundsContextProvider
+                <CheckoutModalContextProvider
                   value={{
-                    openTransferFundsModal: openTransferFunds,
-                    closeTransferFundsModal: closeTransferFunds,
-                    transferFundsSettings
+                    triggerCheckout,
+                    closeCheckout,
+                    settings,
+                    theme
                   }}
                 >
-                  <NavigationContextProvider value={{ history, setHistory, defaultLocation: getDefaultLocation() }}>
-                    <NavigationCheckoutContextProvider
-                      value={{
-                        history: checkoutHistory,
-                        setHistory: setCheckoutHistory,
-                        defaultLocation: getDefaultLocationCheckout()
-                      }}
-                    >
-                      <ShadowRoot theme={theme} customCSS={customCSS}>
-                        <AnimatePresence>
-                          {openCheckoutModal && (
-                            <Modal
-                              contentProps={{
-                                style: {
-                                  maxWidth: '540px',
-                                  height: 'auto',
-                                  ...getModalPositionCss(position)
-                                }
-                              }}
-                              scroll={false}
-                              onClose={() => setOpenCheckoutModal(false)}
-                            >
-                              <div id="sequence-kit-checkout-content">
-                                {getCheckoutHeader()}
-                                {getCheckoutContent()}
-                              </div>
-                            </Modal>
-                          )}
-                          {openAddFundsModal && (
-                            <Modal
-                              contentProps={{
-                                style: {
-                                  maxWidth: '540px',
-                                  height: 'auto',
-                                  ...getModalPositionCss(position)
-                                }
-                              }}
-                              scroll={false}
-                              onClose={closeAddFunds}
-                            >
-                              <div id="sequence-kit-add-funds-content">
-                                {getAddFundsHeader()}
-                                {getAddFundsContent()}
-                              </div>
-                            </Modal>
-                          )}
-                          {openPaymentSelectionModal && (
-                            <Modal
-                              contentProps={{
-                                style: {
-                                  maxWidth: '320px',
-                                  height: 'auto',
-                                  ...getModalPositionCss(position)
-                                }
-                              }}
-                              scroll={false}
-                              onClose={() => setOpenPaymentSelectionModal(false)}
-                            >
-                              <div id="sequence-web-sdk-payment-selection-content">
-                                {getCheckoutFlowHeader()}
-                                {getCheckoutFlowContent()}
-                              </div>
-                            </Modal>
-                          )}
-                          {openTransferFundsModal && (
-                            <Modal
-                              contentProps={{
-                                style: {
-                                  height: 'auto',
-                                  ...getModalPositionCss(position)
-                                }
-                              }}
-                              onClose={closeTransferFunds}
-                            >
-                              <div id="sequence-kit-transfer-funds-modal">
-                                <NavigationHeader primaryText="Receive" />
-                                <TransferToWallet />
-                              </div>
-                            </Modal>
-                          )}
-                          {openTransactionStatusModal && (
-                            <Modal
-                              contentProps={{
-                                style: {
-                                  height: 'auto',
-                                  ...getModalPositionCss(position)
-                                }
-                              }}
-                              onClose={closeTransactionStatusModal}
-                            >
-                              <div id="sequence-kit-transaction-status-modal">
-                                <TransactionStatus />
-                              </div>
-                            </Modal>
-                          )}
-                          {isOpenSwapModal && (
-                            <Modal
-                              contentProps={{
-                                style: {
-                                  maxWidth: '450px',
-                                  height: 'auto',
-                                  ...getModalPositionCss(position)
-                                }
-                              }}
-                              onClose={closeSwapModal}
-                            >
-                              <div id="sequence-kit-swap-modal">
-                                <NavigationHeader primaryText={swapModalSettings?.title || 'Swap'} />
-                                <Swap />
-                              </div>
-                            </Modal>
-                          )}
-                        </AnimatePresence>
-                      </ShadowRoot>
-                      {children}
-                    </NavigationCheckoutContextProvider>
-                  </NavigationContextProvider>
-                </TransferFundsContextProvider>
-              </CheckoutModalContextProvider>
-            </AddFundsContextProvider>
-          </SelectPaymentContextProvider>
-        </TransactionStatusModalContextProvider>
-      </SwapModalContextProvider>
+                  <TransferFundsContextProvider
+                    value={{
+                      openTransferFundsModal: openTransferFunds,
+                      closeTransferFundsModal: closeTransferFunds,
+                      transferFundsSettings
+                    }}
+                  >
+                    <NavigationContextProvider value={{ history, setHistory, defaultLocation: getDefaultLocation() }}>
+                      <NavigationCheckoutContextProvider
+                        value={{
+                          history: checkoutHistory,
+                          setHistory: setCheckoutHistory,
+                          defaultLocation: getDefaultLocationCheckout()
+                        }}
+                      >
+                        <ShadowRoot theme={theme} customCSS={customCSS}>
+                          <AnimatePresence>
+                            {openCheckoutModal && (
+                              <Modal
+                                contentProps={{
+                                  style: {
+                                    maxWidth: '540px',
+                                    height: 'auto',
+                                    ...getModalPositionCss(position)
+                                  }
+                                }}
+                                scroll={false}
+                                onClose={() => setOpenCheckoutModal(false)}
+                              >
+                                <div id="sequence-kit-checkout-content">
+                                  {getCheckoutHeader()}
+                                  {getCheckoutContent()}
+                                </div>
+                              </Modal>
+                            )}
+                            {openAddFundsModal && (
+                              <Modal
+                                contentProps={{
+                                  style: {
+                                    maxWidth: '540px',
+                                    height: 'auto',
+                                    ...getModalPositionCss(position)
+                                  }
+                                }}
+                                scroll={false}
+                                onClose={closeAddFunds}
+                              >
+                                <div id="sequence-kit-add-funds-content">
+                                  {getAddFundsHeader()}
+                                  {getAddFundsContent()}
+                                </div>
+                              </Modal>
+                            )}
+                            {openPaymentSelectionModal && (
+                              <Modal
+                                contentProps={{
+                                  style: {
+                                    maxWidth: '320px',
+                                    height: 'auto',
+                                    ...getModalPositionCss(position)
+                                  }
+                                }}
+                                scroll={false}
+                                onClose={() => setOpenPaymentSelectionModal(false)}
+                              >
+                                <div id="sequence-web-sdk-payment-selection-content">
+                                  {getCheckoutFlowHeader()}
+                                  {getCheckoutFlowContent()}
+                                </div>
+                              </Modal>
+                            )}
+                            {openTransferFundsModal && (
+                              <Modal
+                                contentProps={{
+                                  style: {
+                                    height: 'auto',
+                                    ...getModalPositionCss(position)
+                                  }
+                                }}
+                                onClose={closeTransferFunds}
+                              >
+                                <div id="sequence-kit-transfer-funds-modal">
+                                  <NavigationHeader primaryText="Receive" />
+                                  <TransferToWallet />
+                                </div>
+                              </Modal>
+                            )}
+                            {openTransactionStatusModal && (
+                              <Modal
+                                contentProps={{
+                                  style: {
+                                    height: 'auto',
+                                    ...getModalPositionCss(position)
+                                  }
+                                }}
+                                onClose={closeTransactionStatusModal}
+                              >
+                                <div id="sequence-kit-transaction-status-modal">
+                                  <TransactionStatus />
+                                </div>
+                              </Modal>
+                            )}
+                            {isOpenSwapModal && (
+                              <Modal
+                                contentProps={{
+                                  style: {
+                                    maxWidth: '450px',
+                                    height: 'auto',
+                                    ...getModalPositionCss(position)
+                                  }
+                                }}
+                                onClose={closeSwapModal}
+                              >
+                                <div id="sequence-kit-swap-modal">
+                                  <NavigationHeader primaryText={swapModalSettings?.title || 'Swap'} />
+                                  <Swap />
+                                </div>
+                              </Modal>
+                            )}
+                          </AnimatePresence>
+                        </ShadowRoot>
+                        {children}
+                      </NavigationCheckoutContextProvider>
+                    </NavigationContextProvider>
+                  </TransferFundsContextProvider>
+                </CheckoutModalContextProvider>
+              </AddFundsContextProvider>
+            </SelectPaymentContextProvider>
+          </TransactionStatusModalContextProvider>
+        </SwapModalContextProvider>
+      </ForteController>
     </EnvironmentContextProvider>
   )
 }
diff --git a/packages/checkout/src/contexts/CheckoutModal.ts b/packages/checkout/src/contexts/CheckoutModal.ts
index 6d2d9d8ac..ad4eaf8b6 100644
--- a/packages/checkout/src/contexts/CheckoutModal.ts
+++ b/packages/checkout/src/contexts/CheckoutModal.ts
@@ -24,6 +24,27 @@ export interface TransakConfig {
   callDataOverride?: string
 }
 
+export type ForteProtocolType = 'seaport' | 'mint' | 'custom_evm_call'
+
+export interface StructuredCalldata {
+  functionName: string
+  arguments: any[]
+}
+
+export interface ForteMintConfig {
+  protocol: 'mint'
+  calldata: string | StructuredCalldata
+  sellerAddress: string
+}
+
+export interface ForteCustomEvmCallConfig {
+  protocol: 'custom_evm_call'
+  calldata: string | StructuredCalldata
+  sellerAddress: string
+}
+
+export type ForteConfig = ForteMintConfig | ForteCustomEvmCallConfig
+
 export interface CreditCardCheckout {
   chainId: number
   contractAddress: string
@@ -37,9 +58,10 @@ export interface CreditCardCheckout {
   nftQuantity: string
   nftDecimals?: string
   calldata: string
-  provider?: 'sardine' | 'transak'
+  provider?: 'sardine' | 'transak' | 'forte'
   transakConfig?: TransakConfig
-  onSuccess?: (transactionHash: string, settings: CreditCardCheckout) => void
+  forteConfig?: ForteConfig
+  onSuccess?: (transactionHash?: string, settings?: CreditCardCheckout) => void
   onError?: (error: Error, settings: CreditCardCheckout) => void
   onClose?: () => void
   approvedSpenderAddress?: string
diff --git a/packages/checkout/src/contexts/Environment.ts b/packages/checkout/src/contexts/Environment.ts
index 54b3fc7dc..94cf353af 100644
--- a/packages/checkout/src/contexts/Environment.ts
+++ b/packages/checkout/src/contexts/Environment.ts
@@ -8,6 +8,7 @@ export interface EnvironmentOverrides {
   transakApiKey: string
   sardineCheckoutUrl: string
   sardineOnRampUrl: string
+  forteWidgetUrl: string
 }
 
 const [useEnvironmentContext, EnvironmentContextProvider] = createGenericContext<EnvironmentOverrides>()
diff --git a/packages/checkout/src/contexts/FortePayment.ts b/packages/checkout/src/contexts/FortePayment.ts
new file mode 100644
index 000000000..8eec10a30
--- /dev/null
+++ b/packages/checkout/src/contexts/FortePayment.ts
@@ -0,0 +1,19 @@
+'use client'
+
+import { type CreditCardCheckout } from './CheckoutModal.js'
+import { createGenericContext } from './genericContext.js'
+
+export interface FortePaymentData {
+  paymentIntentId: string
+  widgetData: any
+  creditCardCheckout: CreditCardCheckout
+}
+
+export interface FortePaymentController {
+  data?: FortePaymentData
+  initializeWidget: (fortePaymentData: FortePaymentData) => void
+}
+
+const [useFortePaymentController, FortePaymentControllerProvider] = createGenericContext<FortePaymentController>()
+
+export { FortePaymentControllerProvider, useFortePaymentController }
diff --git a/packages/checkout/src/contexts/SelectPaymentModal.ts b/packages/checkout/src/contexts/SelectPaymentModal.ts
index a4d2ee601..138e6d602 100644
--- a/packages/checkout/src/contexts/SelectPaymentModal.ts
+++ b/packages/checkout/src/contexts/SelectPaymentModal.ts
@@ -2,11 +2,11 @@ import { TransactionOnRampProvider } from '@0xsequence/marketplace'
 import { type SequenceIndexer, type TransactionReceipt } from '@0xsequence/indexer'
 import type { Hex } from 'viem'
 
-import type { TransakConfig } from '../contexts/CheckoutModal.js'
+import type { ForteConfig, TransakConfig } from '../contexts/CheckoutModal.js'
 
 import { createGenericContext } from './genericContext.js'
 
-export type CreditCardProviders = 'sardine' | 'transak'
+export type CreditCardProviders = 'sardine' | 'transak' | 'forte'
 
 export interface Collectible {
   tokenId?: string
@@ -39,13 +39,14 @@ export interface SelectPaymentSettings {
   recipientAddress: string | Hex
   approvedSpenderAddress?: string
   transactionConfirmations?: number
-  onSuccess?: (txHash: string) => void
+  onSuccess?: (txHash?: string) => void
   onError?: (error: Error) => void
   onClose?: () => void
   onRampProvider?: TransactionOnRampProvider
   creditCardProviders?: string[]
   transakConfig?: TransakConfig
   sardineConfig?: SardineConfig
+  forteConfig?: ForteConfig
   customProviderCallback?: (onSuccess: (txHash: string) => void, onError: (error: Error) => void, onClose: () => void) => void
   supplementaryAnalyticsInfo?: SupplementaryAnalyticsInfo
   skipNativeBalanceCheck?: boolean
diff --git a/packages/checkout/src/contexts/index.ts b/packages/checkout/src/contexts/index.ts
index 54086ba4d..fc38d9e36 100644
--- a/packages/checkout/src/contexts/index.ts
+++ b/packages/checkout/src/contexts/index.ts
@@ -7,3 +7,4 @@ export * from './SwapModal.js'
 export * from './TransferFundsModal.js'
 export * from './TransactionStatusModal.js'
 export * from './Environment.js'
+export * from './FortePayment.js'
diff --git a/packages/checkout/src/hooks/index.ts b/packages/checkout/src/hooks/index.ts
index 892be5aa0..64778dda4 100644
--- a/packages/checkout/src/hooks/index.ts
+++ b/packages/checkout/src/hooks/index.ts
@@ -12,3 +12,5 @@ export * from './useCheckoutOptionsSalesContract.js'
 export * from './useERC1155SaleContractCheckout.js'
 export * from './useSkipOnCloseCallback.js'
 export * from './useSardineOnRampLink.js'
+export * from './useFortePaymentIntent.js'
+export * from './useAddFundsModal.js'
diff --git a/packages/checkout/src/hooks/useERC1155SaleContractCheckout.ts b/packages/checkout/src/hooks/useERC1155SaleContractCheckout.ts
index 3d1a5b207..601ef1331 100644
--- a/packages/checkout/src/hooks/useERC1155SaleContractCheckout.ts
+++ b/packages/checkout/src/hooks/useERC1155SaleContractCheckout.ts
@@ -1,7 +1,7 @@
 import { useFindVersion } from '@0xsequence/hooks'
 import { type CheckoutOptionsSalesContractArgs } from '@0xsequence/marketplace'
 import { findSupportedNetwork } from '@0xsequence/network'
-import { encodeFunctionData, keccak256, sha256, toHex, zeroAddress, type Abi, type Hex } from 'viem'
+import { encodeFunctionData, sha256, toHex, zeroAddress, type Hex } from 'viem'
 import { useBytecode, useReadContract, useReadContracts } from 'wagmi'
 
 import { ERC_1155_SALE_CONTRACT } from '../constants/abi.js'
diff --git a/packages/checkout/src/hooks/useFortePaymentIntent.ts b/packages/checkout/src/hooks/useFortePaymentIntent.ts
new file mode 100644
index 000000000..0a472a40e
--- /dev/null
+++ b/packages/checkout/src/hooks/useFortePaymentIntent.ts
@@ -0,0 +1,26 @@
+import { useConfig } from '@0xsequence/hooks'
+import { useQuery } from '@tanstack/react-query'
+
+import { createFortePaymentIntent, type CreateFortePaymentIntentArgs } from '../api/data.js'
+
+interface UseFortePaymentIntentOptions {
+  disabled?: boolean
+}
+
+export const useFortePaymentIntent = (args: CreateFortePaymentIntentArgs, options?: UseFortePaymentIntentOptions) => {
+  const { env, projectAccessKey } = useConfig()
+  const apiUrl = env.apiUrl
+
+  return useQuery({
+    queryKey: ['useFortePaymentIntent', args],
+    queryFn: async () => {
+      const res = await createFortePaymentIntent(apiUrl, projectAccessKey, args)
+
+      return res
+    },
+    retry: false,
+    staleTime: 60 * 1000,
+    refetchOnMount: 'always',
+    enabled: !options?.disabled
+  })
+}
diff --git a/packages/checkout/src/index.ts b/packages/checkout/src/index.ts
index d4a0ee817..de4ea8780 100644
--- a/packages/checkout/src/index.ts
+++ b/packages/checkout/src/index.ts
@@ -11,8 +11,10 @@ export { useSwapModal } from './hooks/useSwapModal.js'
 export { useERC1155SaleContractCheckout, useERC1155SaleContractPaymentModal } from './hooks/useERC1155SaleContractCheckout.js'
 export { useCheckoutUI } from './hooks/useCheckoutUI/index.js'
 
-export { type CheckoutSettings } from './contexts/CheckoutModal.js'
+export { type ForteConfig } from './contexts/CheckoutModal.js'
 export { type AddFundsSettings } from './contexts/AddFundsModal.js'
+export { type CheckoutSettings } from './contexts/CheckoutModal.js'
+export { type ForteProtocolType } from './contexts/CheckoutModal.js'
 export { type SelectPaymentSettings } from './contexts/SelectPaymentModal.js'
 export { type SwapModalSettings } from './contexts/SwapModal.js'
 export { type CreditCardProviders } from './contexts/SelectPaymentModal.js'
diff --git a/packages/checkout/src/views/Checkout/PaymentMethodSelect/PayWithCreditCard/index.tsx b/packages/checkout/src/views/Checkout/PaymentMethodSelect/PayWithCreditCard/index.tsx
index 33d370b5e..4393e656f 100644
--- a/packages/checkout/src/views/Checkout/PaymentMethodSelect/PayWithCreditCard/index.tsx
+++ b/packages/checkout/src/views/Checkout/PaymentMethodSelect/PayWithCreditCard/index.tsx
@@ -27,8 +27,8 @@ export const PayWithCreditCardTab = ({ skipOnCloseCallback }: PayWithCreditCardT
     onError = () => {},
     onClose = () => {},
     creditCardProviders = [],
-    transakConfig,
-    supplementaryAnalyticsInfo = {}
+    approvedSpenderAddress,
+    ...rest
   } = selectPaymentSettings!
 
   const { address: userAddress } = useAccount()
@@ -54,6 +54,7 @@ export const PayWithCreditCardTab = ({ skipOnCloseCallback }: PayWithCreditCardT
         return
       case 'sardine':
       case 'transak':
+      case 'forte':
         onPurchase()
         return
       default:
@@ -77,14 +78,13 @@ export const PayWithCreditCardTab = ({ skipOnCloseCallback }: PayWithCreditCardT
 
     const checkoutSettings: CheckoutSettings = {
       creditCardCheckout: {
-        onSuccess: (txHash: string) => {
+        onSuccess: (txHash?: string) => {
           clearCachedBalances()
           onSuccess(txHash)
         },
         onError,
         onClose,
         chainId,
-        recipientAddress: userAddress,
         contractAddress: targetContractAddress,
         currencyQuantity: price,
         currencySymbol: currencyInfoData.symbol,
@@ -96,10 +96,9 @@ export const PayWithCreditCardTab = ({ skipOnCloseCallback }: PayWithCreditCardT
         nftDecimals: collectible.decimals === undefined ? undefined : String(collectible.decimals),
         provider: selectedPaymentProvider as BasePaymentProviderOptions,
         calldata: txData,
-        transakConfig,
-        approvedSpenderAddress: sardineConfig?.approvedSpenderAddress || targetContractAddress,
-        supplementaryAnalyticsInfo,
-        onSuccessChecker: selectPaymentSettings?.onSuccessChecker
+        onSuccessChecker: selectPaymentSettings?.onSuccessChecker,
+        approvedSpenderAddress: sardineConfig?.approvedSpenderAddress || approvedSpenderAddress,
+        ...rest
       }
     }
 
diff --git a/packages/checkout/src/views/PaymentSelection/PayWithCreditCard/index.tsx b/packages/checkout/src/views/PaymentSelection/PayWithCreditCard/index.tsx
new file mode 100644
index 000000000..bc268c8c3
--- /dev/null
+++ b/packages/checkout/src/views/PaymentSelection/PayWithCreditCard/index.tsx
@@ -0,0 +1,181 @@
+import { ArrowRightIcon, Card, PaymentsIcon, Spinner, Text } from '@0xsequence/design-system'
+import { useClearCachedBalances, useGetContractInfo } from '@0xsequence/hooks'
+import { findSupportedNetwork } from '@0xsequence/network'
+import { useEffect, useState } from 'react'
+import { useAccount } from 'wagmi'
+
+import type { CheckoutSettings } from '../../../contexts/CheckoutModal.js'
+import type { SelectPaymentSettings } from '../../../contexts/SelectPaymentModal.js'
+import { useCheckoutModal, useSelectPaymentModal } from '../../../hooks/index.js'
+
+interface PayWithCreditCardProps {
+  settings: SelectPaymentSettings
+  disableButtons: boolean
+  skipOnCloseCallback: () => void
+}
+
+type BasePaymentProviderOptions = 'sardine' | 'transak' | 'forte'
+type CustomPaymentProviderOptions = 'custom'
+type PaymentProviderOptions = BasePaymentProviderOptions | CustomPaymentProviderOptions
+
+export const PayWithCreditCard = ({ settings, disableButtons, skipOnCloseCallback }: PayWithCreditCardProps) => {
+  const {
+    chain,
+    currencyAddress,
+    targetContractAddress,
+    price,
+    txData,
+    collectibles,
+    collectionAddress,
+    sardineConfig,
+    onSuccess = () => {},
+    onError = () => {},
+    onClose = () => {},
+    creditCardProviders = [],
+    supplementaryAnalyticsInfo = {},
+    transakConfig,
+    forteConfig
+  } = settings
+
+  const { address: userAddress } = useAccount()
+  const { clearCachedBalances } = useClearCachedBalances()
+  const { closeSelectPaymentModal } = useSelectPaymentModal()
+  const { triggerCheckout } = useCheckoutModal()
+  const network = findSupportedNetwork(chain)
+  const chainId = network?.chainId || 137
+  const { data: currencyInfoData, isLoading: isLoadingContractInfo } = useGetContractInfo({
+    chainID: String(chainId),
+    contractAddress: currencyAddress
+  })
+  const [selectedPaymentProvider, setSelectedPaymentProvider] = useState<PaymentProviderOptions>()
+  const isLoading = isLoadingContractInfo
+
+  useEffect(() => {
+    if (selectedPaymentProvider) {
+      payWithSelectedProvider()
+    }
+  }, [selectedPaymentProvider])
+
+  const payWithSelectedProvider = () => {
+    switch (selectedPaymentProvider) {
+      case 'custom':
+        if (settings.customProviderCallback) {
+          onClickCustomProvider()
+        }
+        return
+      case 'sardine':
+      case 'transak':
+      case 'forte':
+        onPurchase()
+        return
+      default:
+        return
+    }
+  }
+
+  const onClickCustomProvider = () => {
+    if (settings.customProviderCallback) {
+      closeSelectPaymentModal()
+      settings.customProviderCallback(onSuccess, onError, onClose)
+    }
+  }
+
+  const onPurchase = () => {
+    if (!userAddress || !currencyInfoData) {
+      return
+    }
+
+    const collectible = collectibles[0]
+
+    const checkoutSettings: CheckoutSettings = {
+      creditCardCheckout: {
+        onSuccess: (txHash?: string) => {
+          clearCachedBalances()
+          onSuccess(txHash)
+        },
+        onError,
+        onClose,
+        chainId,
+        recipientAddress: userAddress,
+        contractAddress: targetContractAddress,
+        currencyQuantity: price,
+        currencySymbol: currencyInfoData.symbol,
+        currencyAddress,
+        currencyDecimals: String(currencyInfoData?.decimals || 0),
+        nftId: collectible.tokenId ?? '',
+        nftAddress: collectionAddress,
+        nftQuantity: collectible.quantity,
+        nftDecimals: collectible.decimals === undefined ? undefined : String(collectible.decimals),
+        provider: selectedPaymentProvider as BasePaymentProviderOptions,
+        calldata: txData,
+        approvedSpenderAddress: sardineConfig?.approvedSpenderAddress || settings.approvedSpenderAddress,
+        supplementaryAnalyticsInfo,
+        transakConfig,
+        forteConfig
+      }
+    }
+
+    skipOnCloseCallback()
+    closeSelectPaymentModal()
+    triggerCheckout(checkoutSettings)
+  }
+
+  const Options = () => {
+    return (
+      <div className="flex flex-col justify-center items-center gap-2 w-full">
+        {/* Only 1 option will be displayed, even if multiple providers are passed */}
+        {creditCardProviders
+          .slice(0, 1)
+          .filter(provider => {
+            // cannot display transak checkout if the settings aren't provided
+            if (provider === 'transak' && !settings.transakConfig) {
+              return false
+            }
+            return true
+          })
+          .map(creditCardProvider => {
+            switch (creditCardProvider) {
+              case 'sardine':
+              case 'transak':
+              case 'forte':
+              case 'custom':
+                return (
+                  <Card
+                    className="flex justify-between items-center p-4 cursor-pointer"
+                    key="sardine"
+                    onClick={() => {
+                      setSelectedPaymentProvider(creditCardProvider)
+                    }}
+                    disabled={disableButtons}
+                  >
+                    <div className="flex flex-row gap-3 items-center">
+                      <PaymentsIcon className="text-white" />
+                      <Text color="primary" variant="normal" fontWeight="bold">
+                        Pay with credit or debit card
+                      </Text>
+                    </div>
+                    <div style={{ transform: 'rotate(-45deg)' }}>
+                      <ArrowRightIcon className="text-white" />
+                    </div>
+                  </Card>
+                )
+              default:
+                return null
+            }
+          })}
+      </div>
+    )
+  }
+
+  return (
+    <div className="w-full">
+      {isLoading ? (
+        <div className="flex w-full pt-5 justify-center items-center">
+          <Spinner />
+        </div>
+      ) : (
+        <Options />
+      )}
+    </div>
+  )
+}
diff --git a/packages/checkout/src/views/PendingCreditCardTransaction.tsx b/packages/checkout/src/views/PendingCreditCardTransaction.tsx
index c867db7af..83eda431e 100644
--- a/packages/checkout/src/views/PendingCreditCardTransaction.tsx
+++ b/packages/checkout/src/views/PendingCreditCardTransaction.tsx
@@ -8,9 +8,10 @@ import { formatUnits } from 'viem'
 
 import { fetchSardineOrderStatus } from '../api/data.js'
 import { EVENT_SOURCE } from '../constants/index.js'
-import { useEnvironmentContext, type TransactionPendingNavigation } from '../contexts/index.js'
+import { useEnvironmentContext, useFortePaymentController, type TransactionPendingNavigation } from '../contexts/index.js'
 import {
   useCheckoutModal,
+  useFortePaymentIntent,
   useNavigation,
   useSardineClientToken,
   useSkipOnCloseCallback,
@@ -35,6 +36,8 @@ export const PendingCreditCardTransaction = () => {
   const { skipOnCloseCallback } = useSkipOnCloseCallback(onClose)
 
   switch (provider) {
+    case 'forte':
+      return <PendingCreditCardTransactionForte skipOnCloseCallback={skipOnCloseCallback} />
     case 'transak':
       return <PendingCreditCardTransactionTransak skipOnCloseCallback={skipOnCloseCallback} />
     case 'sardine':
@@ -440,3 +443,100 @@ export const PendingCreditCardTransactionSardine = ({ skipOnCloseCallback }: Pen
     </div>
   )
 }
+
+export const PendingCreditCardTransactionForte = ({ skipOnCloseCallback }: PendingCreditTransactionProps) => {
+  const { initializeWidget } = useFortePaymentController()
+  const nav = useNavigation()
+  const {
+    params: { creditCardCheckout }
+  } = nav.navigation as TransactionPendingNavigation
+  const { closeCheckout } = useCheckoutModal()
+
+  const {
+    data: tokenMetadatas,
+    isLoading: isLoadingTokenMetadata,
+    isError: isErrorTokenMetadata
+  } = useGetTokenMetadata({
+    chainID: String(creditCardCheckout.chainId),
+    contractAddress: creditCardCheckout.nftAddress,
+    tokenIDs: [creditCardCheckout.nftId]
+  })
+
+  const tokenMetadata = tokenMetadatas ? tokenMetadatas[0] : undefined
+
+  const currencyQuantity = formatUnits(
+    BigInt(creditCardCheckout.currencyQuantity),
+    Number(creditCardCheckout.currencyDecimals || 18)
+  )
+
+  const {
+    data: paymentIntentData,
+    isError: isErrorPaymentIntent,
+    error: paymentIntentError
+  } = useFortePaymentIntent(
+    {
+      recipientAddress: creditCardCheckout.recipientAddress,
+      chainId: creditCardCheckout.chainId.toString(),
+      nftAddress: creditCardCheckout.nftAddress,
+      currencyAddress: creditCardCheckout.currencyAddress,
+      targetContractAddress: creditCardCheckout.contractAddress,
+      nftName: tokenMetadata?.name || '',
+      imageUrl: tokenMetadata?.image || '',
+      tokenId: creditCardCheckout.nftId,
+      protocolConfig: creditCardCheckout.forteConfig!,
+      currencyQuantity,
+      calldata:
+        creditCardCheckout.forteConfig!.protocol === 'mint'
+          ? creditCardCheckout.forteConfig!.calldata
+          : creditCardCheckout.calldata,
+      approvedSpenderAddress: creditCardCheckout.approvedSpenderAddress
+    },
+    {
+      disabled: isLoadingTokenMetadata
+    }
+  )
+
+  const isPriceTooLow = paymentIntentError?.message?.includes('price too low')
+  // A more unique error message in the case of a high price is pending from forte
+  const isPriceTooHigh = paymentIntentError?.message?.includes('failed with status code 500')
+
+  const getErrorMessage = () => {
+    if (isPriceTooLow) {
+      return 'The price for the item is too low for credit card paymetns'
+    }
+    if (isPriceTooHigh) {
+      return 'The price for the item is too high for credit card payments'
+    }
+    return 'An error has occurred'
+  }
+
+  useEffect(() => {
+    if (!paymentIntentData) {
+      return
+    }
+
+    initializeWidget({
+      paymentIntentId: paymentIntentData.paymentIntentId,
+      widgetData: paymentIntentData,
+      creditCardCheckout
+    })
+    skipOnCloseCallback()
+    closeCheckout()
+  }, [paymentIntentData])
+
+  const isError = isErrorTokenMetadata || isErrorPaymentIntent
+
+  if (isError) {
+    return (
+      <div className="flex items-center justify-center px-4 text-center" style={{ height: '770px' }}>
+        <Text color="primary">{getErrorMessage()}</Text>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex items-center justify-center" style={{ height: '770px' }}>
+      <Spinner size="lg" />
+    </div>
+  )
+}
diff --git a/packages/checkout/src/views/TransactionStatus/index.tsx b/packages/checkout/src/views/TransactionStatus/index.tsx
index f8c076ab0..23be6dca5 100644
--- a/packages/checkout/src/views/TransactionStatus/index.tsx
+++ b/packages/checkout/src/views/TransactionStatus/index.tsx
@@ -225,9 +225,12 @@ export const TransactionStatus = () => {
         return (
           <div className="flex gap-2 justify-center items-center">
             <div className="w-6 h-6 flex rounded-full bg-positive web-sdk-tx-status-icon">
-              <CheckmarkIcon className="text-white relative web-sdk-tx-status-checkmark-icon" style={{ top: '3px', right: '-1px' }} />
+              <CheckmarkIcon
+                className="text-white relative web-sdk-tx-status-checkmark-icon"
+                style={{ top: '3px', right: '-1px' }}
+              />
             </div>
-            <Text className='web-sdk-tx-status-indicator' variant="normal" color="muted">
+            <Text className="web-sdk-tx-status-indicator" variant="normal" color="muted">
               Transaction complete
             </Text>
           </div>
@@ -238,7 +241,7 @@ export const TransactionStatus = () => {
             <div className="w-6 h-6 rounded-full bg-negative web-sdk-tx-status-icon">
               <CloseIcon className="text-white relative" style={{ top: '2px', right: '-2px' }} />
             </div>
-            <Text className='web-sdk-tx-status-indicator' variant="normal" color="muted">
+            <Text className="web-sdk-tx-status-indicator" variant="normal" color="muted">
               Transaction failed
             </Text>
           </div>
@@ -247,8 +250,8 @@ export const TransactionStatus = () => {
       default:
         return (
           <div className="flex gap-2 justify-center items-center">
-            <Spinner className='web-sdk-tx-status-icon'/>
-            <Text className='web-sdk-tx-status-indicator' variant="normal" color="muted">
+            <Spinner className="web-sdk-tx-status-icon" />
+            <Text className="web-sdk-tx-status-indicator" variant="normal" color="muted">
               Processing transaction
             </Text>
           </div>
@@ -353,7 +356,7 @@ export const TransactionStatus = () => {
         ) : (
           <>
             <div className="flex w-full justify-start">
-              <Text className='web-sdk-tx-status-information-text' variant="normal" color="primary">
+              <Text className="web-sdk-tx-status-information-text" variant="normal" color="primary">
                 {getInformationText()}
               </Text>
             </div>
@@ -365,7 +368,12 @@ export const TransactionStatus = () => {
             )}
             <div className="flex w-full justify-between items-center">
               <StatusIndicator />
-              <Text className="no-underline cursor-pointer web-sdk-tx-status-txhash" variant="normal" style={{ color: '#8E7EFF' }} asChild>
+              <Text
+                className="no-underline cursor-pointer web-sdk-tx-status-txhash"
+                variant="normal"
+                style={{ color: '#8E7EFF' }}
+                asChild
+              >
                 <a href={blockExplorerUrl} target="_blank" rel="noreferrer">
                   {truncateAddress(txHash, 4, 4)}
                 </a>
diff --git a/packages/connect/src/connectors/epic/EpicLogo.tsx b/packages/connect/src/connectors/epic/EpicLogo.tsx
index ba93be912..dd60e01bb 100644
--- a/packages/connect/src/connectors/epic/EpicLogo.tsx
+++ b/packages/connect/src/connectors/epic/EpicLogo.tsx
@@ -3,7 +3,7 @@ import type { FunctionComponent } from 'react'
 import type { LogoProps } from '../../types.js'
 
 export const EpicLogo: FunctionComponent = (props: LogoProps) => (
-  <svg fill="#fff" width="30px" height="30px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+  <svg fill="#fff" width="30px" height="30px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path d="M4.719 0c-1.833 0-2.505 0.677-2.505 2.505v22.083c0 0.209 0.011 0.401 0.027 0.579 0.047 0.401 0.047 0.792 0.421 1.229 0.036 0.052 0.412 0.328 0.412 0.328 0.203 0.099 0.343 0.172 0.572 0.265l11.115 4.656c0.573 0.261 0.819 0.371 1.235 0.355h0.005c0.421 0.016 0.667-0.093 1.24-0.355l11.109-4.656c0.235-0.093 0.369-0.167 0.577-0.265 0 0 0.376-0.287 0.412-0.328 0.375-0.437 0.375-0.828 0.421-1.229 0.016-0.177 0.027-0.369 0.027-0.573v-22.088c0-1.828-0.677-2.505-2.505-2.505zM22.527 4.145h0.905c1.511 0 2.251 0.735 2.251 2.267v2.505h-1.833v-2.407c0-0.489-0.224-0.713-0.699-0.713h-0.312c-0.489 0-0.713 0.224-0.713 0.713v7.749c0 0.489 0.224 0.713 0.713 0.713h0.349c0.468 0 0.692-0.224 0.692-0.713v-2.771h1.833v2.86c0 1.525-0.749 2.276-2.265 2.276h-0.921c-1.521 0-2.267-0.756-2.267-2.276v-7.923c0-1.525 0.745-2.281 2.267-2.281zM6.276 4.251h4.151v1.703h-2.287v3.468h2.204v1.699h-2.204v3.697h2.319v1.704h-4.183zM11.364 4.251h2.928c1.515 0 2.265 0.755 2.265 2.28v3.261c0 1.525-0.751 2.276-2.265 2.276h-1.057v4.453h-1.871zM17.401 4.251h1.864v12.271h-1.864zM13.229 5.901v4.52h0.771c0.469 0 0.693-0.228 0.693-0.719v-3.083c0-0.489-0.224-0.719-0.693-0.719zM8.088 19.437h0.276l0.063 0.011h0.1l0.052 0.016h0.052l0.047 0.015 0.052 0.011 0.041 0.011 0.093 0.021 0.053 0.015 0.036 0.011 0.041 0.016 0.052 0.016 0.036 0.015 0.053 0.021 0.047 0.021 0.041 0.025 0.047 0.021 0.036 0.025 0.053 0.027 0.041 0.025 0.041 0.021 0.041 0.031 0.043 0.027 0.036 0.031 0.125 0.095-0.032 0.041-0.036 0.036-0.032 0.037-0.036 0.041-0.025 0.036-0.032 0.037-0.036 0.036-0.032 0.041-0.025 0.036-0.037 0.043-0.031 0.036-0.036 0.041-0.032 0.037-0.025 0.041-0.037 0.036-0.031 0.043-0.036 0.036-0.032 0.036-0.036-0.025-0.041-0.037-0.043-0.025-0.077-0.052-0.047-0.027-0.043-0.025-0.047-0.027-0.036-0.021-0.041-0.020-0.084-0.032-0.052-0.009-0.041-0.011-0.047-0.011-0.053-0.011-0.052-0.005h-0.052l-0.061-0.011h-0.1l-0.052 0.005h-0.052l-0.052 0.016-0.041 0.011-0.047 0.016-0.047 0.009-0.043 0.021-0.052 0.021-0.072 0.052-0.043 0.025-0.036 0.032-0.036 0.025-0.037 0.032-0.025 0.036-0.043 0.036-0.052 0.073-0.025 0.041-0.021 0.047-0.025 0.037-0.027 0.047-0.016 0.047-0.020 0.041-0.016 0.052-0.005 0.052-0.015 0.048-0.011 0.052v0.052l-0.005 0.052v0.12l0.005 0.052v0.041l0.005 0.052 0.009 0.047 0.016 0.041 0.005 0.053 0.016 0.041 0.015 0.036 0.021 0.052 0.027 0.052 0.020 0.037 0.052 0.083 0.032 0.041 0.025 0.037 0.043 0.031 0.025 0.036 0.036 0.032 0.084 0.063 0.036 0.020 0.041 0.027 0.048 0.021 0.052 0.020 0.036 0.021 0.104 0.031 0.047 0.005 0.052 0.016 0.052 0.005h0.224l0.063-0.005h0.047l0.053-0.021 0.052-0.005 0.052-0.015 0.041-0.011 0.047-0.021 0.041-0.020 0.047-0.021 0.032-0.021 0.041-0.025v-0.464h-0.735v-0.744h1.661v1.667l-0.036 0.025-0.036 0.031-0.037 0.027-0.041 0.031-0.041 0.021-0.036 0.032-0.084 0.052-0.052 0.025-0.083 0.052-0.053 0.021-0.041 0.020-0.047 0.021-0.104 0.041-0.041 0.021-0.095 0.031-0.047 0.011-0.047 0.016-0.052 0.016-0.041 0.009-0.156 0.032-0.048 0.005-0.104 0.011-0.057 0.005-0.052 0.004-0.057 0.005h-0.26l-0.052-0.009h-0.052l-0.052-0.011h-0.047l-0.052-0.016-0.152-0.031-0.041-0.016-0.047-0.005-0.052-0.021-0.095-0.031-0.093-0.041-0.052-0.021-0.036-0.021-0.052-0.020-0.037-0.032-0.052-0.020-0.031-0.027-0.041-0.025-0.084-0.063-0.041-0.027-0.032-0.031-0.041-0.032-0.068-0.067-0.036-0.032-0.031-0.036-0.037-0.037-0.025-0.041-0.032-0.031-0.025-0.043-0.032-0.041-0.025-0.036-0.027-0.041-0.025-0.048-0.021-0.041-0.021-0.047-0.020-0.041-0.041-0.095-0.016-0.036-0.021-0.047-0.011-0.047-0.009-0.041-0.011-0.052-0.016-0.048-0.011-0.052-0.005-0.041-0.009-0.052-0.011-0.093-0.011-0.104v-0.276l0.011-0.053v-0.052l0.016-0.052v-0.052l0.015-0.047 0.016-0.052 0.021-0.093 0.015-0.052 0.016-0.047 0.063-0.141 0.020-0.041 0.021-0.047 0.027-0.048 0.020-0.041 0.027-0.036 0.052-0.084 0.031-0.041 0.032-0.036 0.025-0.041 0.068-0.068 0.031-0.037 0.037-0.036 0.031-0.036 0.043-0.032 0.072-0.063 0.041-0.031 0.043-0.027 0.036-0.031 0.041-0.027 0.043-0.020 0.047-0.027 0.052-0.025 0.036-0.027 0.052-0.020 0.047-0.021 0.047-0.025 0.043-0.011 0.052-0.016 0.041-0.021 0.047-0.009 0.047-0.016 0.052-0.011 0.043-0.016 0.052-0.011h0.052l0.047-0.015h0.052l0.052-0.011h0.047zM24.073 19.448h0.276l0.063 0.011h0.099l0.052 0.015h0.057l0.052 0.016 0.093 0.021 0.052 0.011 0.047 0.009 0.053 0.016 0.047 0.016 0.041 0.011 0.047 0.015 0.052 0.016 0.041 0.021 0.052 0.020 0.048 0.021 0.047 0.027 0.036 0.020 0.047 0.027 0.047 0.020 0.043 0.027 0.047 0.031 0.036 0.027 0.084 0.063 0.041 0.025-0.032 0.041-0.025 0.043-0.031 0.036-0.032 0.041-0.025 0.047-0.027 0.043-0.031 0.036-0.032 0.041-0.025 0.043-0.032 0.041-0.025 0.036-0.032 0.041-0.025 0.048-0.032 0.041-0.031 0.036-0.032 0.041-0.025 0.043-0.041-0.032-0.048-0.025-0.036-0.027-0.041-0.025-0.047-0.021-0.043-0.027-0.047-0.020-0.036-0.021-0.052-0.020-0.037-0.021-0.041-0.016-0.093-0.031-0.104-0.032-0.156-0.031-0.052-0.005-0.095-0.011h-0.109l-0.057 0.011-0.052 0.011-0.047 0.011-0.041 0.020-0.037 0.021-0.041 0.036-0.031 0.047-0.021 0.048v0.124l0.027 0.057 0.020 0.032 0.032 0.031 0.052 0.027 0.041 0.025 0.047 0.021 0.052 0.020 0.068 0.016 0.036 0.016 0.043 0.011 0.052 0.011 0.041 0.015 0.047 0.011 0.057 0.016 0.052 0.016 0.057 0.015 0.057 0.011 0.047 0.016 0.057 0.015 0.052 0.011 0.047 0.011 0.157 0.047 0.041 0.016 0.052 0.016 0.047 0.020 0.052 0.027 0.104 0.041 0.047 0.027 0.084 0.052 0.077 0.057 0.048 0.031 0.036 0.036 0.036 0.043 0.037 0.036 0.025 0.036 0.037 0.052 0.025 0.037 0.021 0.052 0.020 0.031 0.016 0.052 0.016 0.043 0.011 0.047 0.020 0.104 0.005 0.052 0.005 0.047v0.125l-0.005 0.057-0.011 0.104-0.011 0.052-0.015 0.047-0.011 0.052-0.016 0.052-0.015 0.047-0.021 0.037-0.021 0.047-0.025 0.041-0.032 0.037-0.052 0.083-0.063 0.073-0.036 0.025-0.041 0.037-0.032 0.031-0.041 0.031-0.041 0.021-0.041 0.032-0.048 0.025-0.093 0.047-0.052 0.021-0.047 0.020-0.052 0.016-0.047 0.016-0.043 0.011-0.104 0.020-0.036 0.011-0.052 0.011h-0.052l-0.047 0.011h-0.052l-0.052 0.011h-0.371l-0.156-0.016-0.052-0.011-0.047-0.005-0.104-0.020-0.057-0.011-0.047-0.011-0.052-0.016-0.053-0.011-0.047-0.015-0.052-0.016-0.052-0.021-0.041-0.015-0.052-0.016-0.052-0.021-0.037-0.020-0.052-0.016-0.041-0.027-0.052-0.020-0.041-0.027-0.037-0.025-0.052-0.027-0.036-0.020-0.041-0.032-0.041-0.025-0.043-0.032-0.036-0.031-0.041-0.032-0.037-0.025-0.041-0.037 0.032-0.041 0.036-0.036 0.031-0.037 0.037-0.041 0.025-0.036 0.032-0.041 0.036-0.037 0.031-0.036 0.037-0.041 0.025-0.037 0.037-0.036 0.031-0.041 0.032-0.037 0.036-0.041 0.025-0.036 0.037-0.037 0.036-0.041 0.036 0.032 0.048 0.031 0.036 0.031 0.052 0.027 0.036 0.027 0.047 0.031 0.043 0.027 0.047 0.020 0.036 0.027 0.047 0.015 0.052 0.021 0.043 0.021 0.047 0.015 0.041 0.021 0.052 0.016 0.047 0.015 0.052 0.016 0.052 0.005 0.048 0.016 0.052 0.005h0.057l0.047 0.015h0.281l0.047-0.009 0.052-0.011 0.036-0.005 0.043-0.016 0.036-0.020 0.047-0.032 0.027-0.036 0.020-0.041 0.016-0.048v-0.12l-0.021-0.047-0.025-0.041-0.032-0.031-0.047-0.032-0.036-0.015-0.047-0.021-0.052-0.021-0.057-0.025-0.037-0.011-0.041-0.011-0.052-0.016-0.036-0.009-0.052-0.016-0.052-0.005-0.053-0.021-0.052-0.005-0.057-0.015-0.047-0.011-0.052-0.016-0.052-0.011-0.052-0.015-0.047-0.016-0.052-0.011-0.041-0.016-0.095-0.031-0.052-0.021-0.052-0.015-0.104-0.043-0.047-0.025-0.052-0.027-0.036-0.025-0.048-0.027-0.036-0.025-0.047-0.027-0.068-0.068-0.036-0.031-0.063-0.073-0.027-0.036-0.020-0.036-0.032-0.048-0.015-0.036-0.048-0.125-0.009-0.052-0.011-0.047v-0.047l-0.011-0.052v-0.213l0.011-0.104 0.011-0.043 0.009-0.047 0.016-0.041 0.011-0.052 0.021-0.036 0.020-0.053 0.021-0.041 0.020-0.052 0.027-0.036 0.036-0.041 0.027-0.043 0.041-0.036 0.031-0.036 0.032-0.043 0.047-0.036 0.032-0.027 0.041-0.031 0.083-0.052 0.047-0.027 0.095-0.047 0.041-0.015 0.047-0.016 0.052-0.021 0.052-0.015 0.037-0.011 0.047-0.011 0.041-0.011 0.047-0.011 0.052-0.011 0.104-0.009 0.048-0.005zM11.755 19.484h0.943l0.043 0.095 0.020 0.041 0.016 0.052 0.021 0.047 0.015 0.041 0.027 0.047 0.031 0.095 0.027 0.047 0.041 0.093 0.011 0.041 0.083 0.188 0.016 0.047 0.021 0.043 0.025 0.047 0.011 0.047 0.027 0.052 0.009 0.047 0.048 0.093 0.020 0.037 0.021 0.052 0.016 0.052 0.015 0.036 0.027 0.052 0.016 0.043 0.020 0.052 0.016 0.036 0.021 0.052 0.047 0.093 0.015 0.047 0.011 0.048 0.021 0.047 0.025 0.041 0.021 0.052 0.021 0.047 0.015 0.041 0.043 0.095 0.015 0.047 0.021 0.047 0.016 0.047 0.020 0.041 0.027 0.048 0.020 0.047 0.021 0.041 0.011 0.052 0.041 0.093 0.021 0.043 0.015 0.047 0.043 0.093 0.025 0.052 0.011 0.041 0.027 0.053 0.009 0.036 0.021 0.052 0.027 0.052 0.020 0.036 0.016 0.052 0.021 0.043 0.015 0.052 0.027 0.036 0.031 0.104 0.021 0.037 0.020 0.052 0.027 0.041 0.021 0.052 0.009 0.047 0.016 0.041 0.021 0.047 0.025 0.043h-1.041l-0.025-0.043-0.016-0.047-0.021-0.047-0.020-0.052-0.011-0.041-0.043-0.093-0.015-0.043-0.041-0.093-0.016-0.041-0.021-0.052-0.031-0.095-0.021-0.041h-1.448l-0.020 0.047-0.016 0.043-0.021 0.052-0.020 0.047-0.011 0.041-0.021 0.052-0.020 0.041-0.016 0.047-0.021 0.043-0.020 0.052-0.016 0.036-0.021 0.052-0.015 0.052-0.021 0.037-0.016 0.052h-1.031l0.015-0.048 0.043-0.093 0.015-0.052 0.016-0.041 0.027-0.047 0.020-0.047 0.021-0.043 0.011-0.047 0.020-0.052 0.027-0.041 0.020-0.047 0.032-0.095 0.047-0.093 0.016-0.047 0.020-0.041 0.016-0.048 0.063-0.14 0.021-0.052 0.015-0.041 0.016-0.047 0.027-0.043 0.020-0.052 0.016-0.047 0.016-0.041 0.020-0.052 0.027-0.037 0.016-0.052 0.020-0.041 0.016-0.047 0.021-0.052 0.025-0.041 0.016-0.052 0.020-0.037 0.016-0.052 0.021-0.052 0.020-0.036 0.021-0.052 0.016-0.043 0.020-0.052 0.016-0.036 0.027-0.052 0.020-0.052 0.021-0.041 0.011-0.047 0.020-0.048 0.027-0.047 0.020-0.041 0.011-0.052 0.021-0.047 0.021-0.043 0.041-0.093 0.015-0.041 0.043-0.104 0.020-0.037 0.021-0.052 0.016-0.041 0.015-0.052 0.021-0.047 0.027-0.041 0.020-0.052 0.016-0.037 0.016-0.052 0.020-0.041 0.027-0.047 0.016-0.052 0.015-0.043 0.021-0.052 0.020-0.036 0.027-0.052 0.016-0.052 0.015-0.036 0.021-0.052zM14.683 19.511h1.031l0.032 0.041 0.052 0.084 0.025 0.047 0.027 0.036 0.025 0.047 0.027 0.041 0.025 0.048 0.027 0.041 0.025 0.036 0.027 0.047 0.025 0.043 0.037 0.041 0.015 0.041 0.032 0.047 0.025 0.043 0.032 0.036 0.021 0.047 0.025 0.041 0.032 0.043 0.015 0.041 0.037 0.047 0.077 0.125 0.021 0.041 0.031 0.041 0.027 0.041 0.025 0.048 0.079 0.124 0.025 0.048 0.027 0.041 0.031-0.041 0.021-0.053 0.031-0.036 0.027-0.047 0.025-0.036 0.021-0.052 0.036-0.037 0.027-0.047 0.021-0.036 0.025-0.043 0.032-0.047 0.025-0.036 0.027-0.052 0.025-0.036 0.032-0.048 0.020-0.036 0.027-0.052 0.025-0.031 0.027-0.043 0.031-0.052 0.027-0.036 0.020-0.047 0.032-0.037 0.025-0.052 0.027-0.031 0.031-0.041 0.027-0.052 0.025-0.037 0.027-0.047 0.025-0.036 0.027-0.052 0.031-0.037 0.021-0.047 0.027-0.036h1.047v3.719h-0.98v-2.188l-0.025 0.037-0.032 0.052-0.025 0.031-0.032 0.041-0.020 0.052-0.032 0.037-0.025 0.036-0.032 0.052-0.052 0.073-0.031 0.041-0.027 0.052-0.031 0.037-0.027 0.036-0.020 0.052-0.032 0.036-0.025 0.037-0.032 0.052-0.025 0.036-0.032 0.041-0.025 0.047-0.021 0.037-0.031 0.041-0.027 0.047-0.031 0.036-0.032 0.043-0.020 0.041-0.027 0.047-0.031 0.037-0.032 0.041-0.020 0.052-0.037 0.031-0.020 0.041-0.032 0.053-0.025 0.036h-0.021l-0.031-0.047-0.027-0.043-0.025-0.047-0.027-0.036-0.031-0.047-0.027-0.041-0.031-0.043-0.027-0.041-0.025-0.047-0.027-0.036-0.036-0.048-0.021-0.041-0.031-0.047-0.027-0.036-0.025-0.047-0.032-0.043-0.025-0.052-0.032-0.036-0.025-0.047-0.027-0.043-0.025-0.047-0.032-0.036-0.025-0.047-0.032-0.041-0.020-0.043-0.032-0.041-0.025-0.047-0.032-0.036-0.025-0.048-0.032-0.041-0.020-0.047-0.037-0.036-0.020-0.048-0.032-0.041v2.193h-0.963v-3.683zM19.307 19.511h2.933v0.839h-1.959v0.599h1.76v0.792h-1.76v0.635h1.984v0.844h-2.953v-3.677zM12.213 20.651l-0.016 0.047-0.015 0.043-0.021 0.052-0.021 0.047-0.015 0.047-0.043 0.093-0.020 0.052-0.016 0.043-0.016 0.052-0.020 0.036-0.016 0.052-0.021 0.052-0.020 0.037-0.016 0.052-0.020 0.041-0.016 0.052-0.027 0.047-0.011 0.041-0.020 0.052-0.021 0.048-0.016 0.041-0.020 0.052h0.859l-0.020-0.052-0.016-0.047-0.041-0.095-0.016-0.047-0.021-0.041-0.015-0.052-0.021-0.047-0.016-0.047-0.020-0.043-0.016-0.047-0.021-0.052-0.015-0.041-0.043-0.093-0.009-0.048-0.021-0.047-0.021-0.052-0.015-0.036-0.043-0.104-0.015-0.047zM10.683 27.615h10.681l-5.452 1.797z" />
   </svg>
 )
@@ -17,7 +17,7 @@ export const getMonochromeEpicLogo = ({ isDarkMode }: GetEpicMonochromeLogo) =>
 
   const EpicMonochromeLogo: FunctionComponent = (props: LogoProps) => {
     return (
-      <svg fill={fillColor} width="800px" height="800px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+      <svg fill={fillColor} width="800px" height="800px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" {...props}>
         <path d="M4.719 0c-1.833 0-2.505 0.677-2.505 2.505v22.083c0 0.209 0.011 0.401 0.027 0.579 0.047 0.401 0.047 0.792 0.421 1.229 0.036 0.052 0.412 0.328 0.412 0.328 0.203 0.099 0.343 0.172 0.572 0.265l11.115 4.656c0.573 0.261 0.819 0.371 1.235 0.355h0.005c0.421 0.016 0.667-0.093 1.24-0.355l11.109-4.656c0.235-0.093 0.369-0.167 0.577-0.265 0 0 0.376-0.287 0.412-0.328 0.375-0.437 0.375-0.828 0.421-1.229 0.016-0.177 0.027-0.369 0.027-0.573v-22.088c0-1.828-0.677-2.505-2.505-2.505zM22.527 4.145h0.905c1.511 0 2.251 0.735 2.251 2.267v2.505h-1.833v-2.407c0-0.489-0.224-0.713-0.699-0.713h-0.312c-0.489 0-0.713 0.224-0.713 0.713v7.749c0 0.489 0.224 0.713 0.713 0.713h0.349c0.468 0 0.692-0.224 0.692-0.713v-2.771h1.833v2.86c0 1.525-0.749 2.276-2.265 2.276h-0.921c-1.521 0-2.267-0.756-2.267-2.276v-7.923c0-1.525 0.745-2.281 2.267-2.281zM6.276 4.251h4.151v1.703h-2.287v3.468h2.204v1.699h-2.204v3.697h2.319v1.704h-4.183zM11.364 4.251h2.928c1.515 0 2.265 0.755 2.265 2.28v3.261c0 1.525-0.751 2.276-2.265 2.276h-1.057v4.453h-1.871zM17.401 4.251h1.864v12.271h-1.864zM13.229 5.901v4.52h0.771c0.469 0 0.693-0.228 0.693-0.719v-3.083c0-0.489-0.224-0.719-0.693-0.719zM8.088 19.437h0.276l0.063 0.011h0.1l0.052 0.016h0.052l0.047 0.015 0.052 0.011 0.041 0.011 0.093 0.021 0.053 0.015 0.036 0.011 0.041 0.016 0.052 0.016 0.036 0.015 0.053 0.021 0.047 0.021 0.041 0.025 0.047 0.021 0.036 0.025 0.053 0.027 0.041 0.025 0.041 0.021 0.041 0.031 0.043 0.027 0.036 0.031 0.125 0.095-0.032 0.041-0.036 0.036-0.032 0.037-0.036 0.041-0.025 0.036-0.032 0.037-0.036 0.036-0.032 0.041-0.025 0.036-0.037 0.043-0.031 0.036-0.036 0.041-0.032 0.037-0.025 0.041-0.037 0.036-0.031 0.043-0.036 0.036-0.032 0.036-0.036-0.025-0.041-0.037-0.043-0.025-0.077-0.052-0.047-0.027-0.043-0.025-0.047-0.027-0.036-0.021-0.041-0.020-0.084-0.032-0.052-0.009-0.041-0.011-0.047-0.011-0.053-0.011-0.052-0.005h-0.052l-0.061-0.011h-0.1l-0.052 0.005h-0.052l-0.052 0.016-0.041 0.011-0.047 0.016-0.047 0.009-0.043 0.021-0.052 0.021-0.072 0.052-0.043 0.025-0.036 0.032-0.036 0.025-0.037 0.032-0.025 0.036-0.043 0.036-0.052 0.073-0.025 0.041-0.021 0.047-0.025 0.037-0.027 0.047-0.016 0.047-0.020 0.041-0.016 0.052-0.005 0.052-0.015 0.048-0.011 0.052v0.052l-0.005 0.052v0.12l0.005 0.052v0.041l0.005 0.052 0.009 0.047 0.016 0.041 0.005 0.053 0.016 0.041 0.015 0.036 0.021 0.052 0.027 0.052 0.020 0.037 0.052 0.083 0.032 0.041 0.025 0.037 0.043 0.031 0.025 0.036 0.036 0.032 0.084 0.063 0.036 0.020 0.041 0.027 0.048 0.021 0.052 0.020 0.036 0.021 0.104 0.031 0.047 0.005 0.052 0.016 0.052 0.005h0.224l0.063-0.005h0.047l0.053-0.021 0.052-0.005 0.052-0.015 0.041-0.011 0.047-0.021 0.041-0.020 0.047-0.021 0.032-0.021 0.041-0.025v-0.464h-0.735v-0.744h1.661v1.667l-0.036 0.025-0.036 0.031-0.037 0.027-0.041 0.031-0.041 0.021-0.036 0.032-0.084 0.052-0.052 0.025-0.083 0.052-0.053 0.021-0.041 0.020-0.047 0.021-0.104 0.041-0.041 0.021-0.095 0.031-0.047 0.011-0.047 0.016-0.052 0.016-0.041 0.009-0.156 0.032-0.048 0.005-0.104 0.011-0.057 0.005-0.052 0.004-0.057 0.005h-0.26l-0.052-0.009h-0.052l-0.052-0.011h-0.047l-0.052-0.016-0.152-0.031-0.041-0.016-0.047-0.005-0.052-0.021-0.095-0.031-0.093-0.041-0.052-0.021-0.036-0.021-0.052-0.020-0.037-0.032-0.052-0.020-0.031-0.027-0.041-0.025-0.084-0.063-0.041-0.027-0.032-0.031-0.041-0.032-0.068-0.067-0.036-0.032-0.031-0.036-0.037-0.037-0.025-0.041-0.032-0.031-0.025-0.043-0.032-0.041-0.025-0.036-0.027-0.041-0.025-0.048-0.021-0.041-0.021-0.047-0.020-0.041-0.041-0.095-0.016-0.036-0.021-0.047-0.011-0.047-0.009-0.041-0.011-0.052-0.016-0.048-0.011-0.052-0.005-0.041-0.009-0.052-0.011-0.093-0.011-0.104v-0.276l0.011-0.053v-0.052l0.016-0.052v-0.052l0.015-0.047 0.016-0.052 0.021-0.093 0.015-0.052 0.016-0.047 0.063-0.141 0.020-0.041 0.021-0.047 0.027-0.048 0.020-0.041 0.027-0.036 0.052-0.084 0.031-0.041 0.032-0.036 0.025-0.041 0.068-0.068 0.031-0.037 0.037-0.036 0.031-0.036 0.043-0.032 0.072-0.063 0.041-0.031 0.043-0.027 0.036-0.031 0.041-0.027 0.043-0.020 0.047-0.027 0.052-0.025 0.036-0.027 0.052-0.020 0.047-0.021 0.047-0.025 0.043-0.011 0.052-0.016 0.041-0.021 0.047-0.009 0.047-0.016 0.052-0.011 0.043-0.016 0.052-0.011h0.052l0.047-0.015h0.052l0.052-0.011h0.047zM24.073 19.448h0.276l0.063 0.011h0.099l0.052 0.015h0.057l0.052 0.016 0.093 0.021 0.052 0.011 0.047 0.009 0.053 0.016 0.047 0.016 0.041 0.011 0.047 0.015 0.052 0.016 0.041 0.021 0.052 0.020 0.048 0.021 0.047 0.027 0.036 0.020 0.047 0.027 0.047 0.020 0.043 0.027 0.047 0.031 0.036 0.027 0.084 0.063 0.041 0.025-0.032 0.041-0.025 0.043-0.031 0.036-0.032 0.041-0.025 0.047-0.027 0.043-0.031 0.036-0.032 0.041-0.025 0.043-0.032 0.041-0.025 0.036-0.032 0.041-0.025 0.048-0.032 0.041-0.031 0.036-0.032 0.041-0.025 0.043-0.041-0.032-0.048-0.025-0.036-0.027-0.041-0.025-0.047-0.021-0.043-0.027-0.047-0.020-0.036-0.021-0.052-0.020-0.037-0.021-0.041-0.016-0.093-0.031-0.104-0.032-0.156-0.031-0.052-0.005-0.095-0.011h-0.109l-0.057 0.011-0.052 0.011-0.047 0.011-0.041 0.020-0.037 0.021-0.041 0.036-0.031 0.047-0.021 0.048v0.124l0.027 0.057 0.020 0.032 0.032 0.031 0.052 0.027 0.041 0.025 0.047 0.021 0.052 0.020 0.068 0.016 0.036 0.016 0.043 0.011 0.052 0.011 0.041 0.015 0.047 0.011 0.057 0.016 0.052 0.016 0.057 0.015 0.057 0.011 0.047 0.016 0.057 0.015 0.052 0.011 0.047 0.011 0.157 0.047 0.041 0.016 0.052 0.016 0.047 0.020 0.052 0.027 0.104 0.041 0.047 0.027 0.084 0.052 0.077 0.057 0.048 0.031 0.036 0.036 0.036 0.043 0.037 0.036 0.025 0.036 0.037 0.052 0.025 0.037 0.021 0.052 0.020 0.031 0.016 0.052 0.016 0.043 0.011 0.047 0.020 0.104 0.005 0.052 0.005 0.047v0.125l-0.005 0.057-0.011 0.104-0.011 0.052-0.015 0.047-0.011 0.052-0.016 0.052-0.015 0.047-0.021 0.037-0.021 0.047-0.025 0.041-0.032 0.037-0.052 0.083-0.063 0.073-0.036 0.025-0.041 0.037-0.032 0.031-0.041 0.031-0.041 0.021-0.041 0.032-0.048 0.025-0.093 0.047-0.052 0.021-0.047 0.020-0.052 0.016-0.047 0.016-0.043 0.011-0.104 0.020-0.036 0.011-0.052 0.011h-0.052l-0.047 0.011h-0.052l-0.052 0.011h-0.371l-0.156-0.016-0.052-0.011-0.047-0.005-0.104-0.020-0.057-0.011-0.047-0.011-0.052-0.016-0.053-0.011-0.047-0.015-0.052-0.016-0.052-0.021-0.041-0.015-0.052-0.016-0.052-0.021-0.037-0.020-0.052-0.016-0.041-0.027-0.052-0.020-0.041-0.027-0.037-0.025-0.052-0.027-0.036-0.020-0.041-0.032-0.041-0.025-0.043-0.032-0.036-0.031-0.041-0.032-0.037-0.025-0.041-0.037 0.032-0.041 0.036-0.036 0.031-0.037 0.037-0.041 0.025-0.036 0.032-0.041 0.036-0.037 0.031-0.036 0.037-0.041 0.025-0.037 0.037-0.036 0.031-0.041 0.032-0.037 0.036-0.041 0.025-0.036 0.037-0.037 0.036-0.041 0.036 0.032 0.048 0.031 0.036 0.031 0.052 0.027 0.036 0.027 0.047 0.031 0.043 0.027 0.047 0.020 0.036 0.027 0.047 0.015 0.052 0.021 0.043 0.021 0.047 0.015 0.041 0.021 0.052 0.016 0.047 0.015 0.052 0.016 0.052 0.005 0.048 0.016 0.052 0.005h0.057l0.047 0.015h0.281l0.047-0.009 0.052-0.011 0.036-0.005 0.043-0.016 0.036-0.020 0.047-0.032 0.027-0.036 0.020-0.041 0.016-0.048v-0.12l-0.021-0.047-0.025-0.041-0.032-0.031-0.047-0.032-0.036-0.015-0.047-0.021-0.052-0.021-0.057-0.025-0.037-0.011-0.041-0.011-0.052-0.016-0.036-0.009-0.052-0.016-0.052-0.005-0.053-0.021-0.052-0.005-0.057-0.015-0.047-0.011-0.052-0.016-0.052-0.011-0.052-0.015-0.047-0.016-0.052-0.011-0.041-0.016-0.095-0.031-0.052-0.021-0.052-0.015-0.104-0.043-0.047-0.025-0.052-0.027-0.036-0.025-0.048-0.027-0.036-0.025-0.047-0.027-0.068-0.068-0.036-0.031-0.063-0.073-0.027-0.036-0.020-0.036-0.032-0.048-0.015-0.036-0.048-0.125-0.009-0.052-0.011-0.047v-0.047l-0.011-0.052v-0.213l0.011-0.104 0.011-0.043 0.009-0.047 0.016-0.041 0.011-0.052 0.021-0.036 0.020-0.053 0.021-0.041 0.020-0.052 0.027-0.036 0.036-0.041 0.027-0.043 0.041-0.036 0.031-0.036 0.032-0.043 0.047-0.036 0.032-0.027 0.041-0.031 0.083-0.052 0.047-0.027 0.095-0.047 0.041-0.015 0.047-0.016 0.052-0.021 0.052-0.015 0.037-0.011 0.047-0.011 0.041-0.011 0.047-0.011 0.052-0.011 0.104-0.009 0.048-0.005zM11.755 19.484h0.943l0.043 0.095 0.020 0.041 0.016 0.052 0.021 0.047 0.015 0.041 0.027 0.047 0.031 0.095 0.027 0.047 0.041 0.093 0.011 0.041 0.083 0.188 0.016 0.047 0.021 0.043 0.025 0.047 0.011 0.047 0.027 0.052 0.009 0.047 0.048 0.093 0.020 0.037 0.021 0.052 0.016 0.052 0.015 0.036 0.027 0.052 0.016 0.043 0.020 0.052 0.016 0.036 0.021 0.052 0.047 0.093 0.015 0.047 0.011 0.048 0.021 0.047 0.025 0.041 0.021 0.052 0.021 0.047 0.015 0.041 0.043 0.095 0.015 0.047 0.021 0.047 0.016 0.047 0.020 0.041 0.027 0.048 0.020 0.047 0.021 0.041 0.011 0.052 0.041 0.093 0.021 0.043 0.015 0.047 0.043 0.093 0.025 0.052 0.011 0.041 0.027 0.053 0.009 0.036 0.021 0.052 0.027 0.052 0.020 0.036 0.016 0.052 0.021 0.043 0.015 0.052 0.027 0.036 0.031 0.104 0.021 0.037 0.020 0.052 0.027 0.041 0.021 0.052 0.009 0.047 0.016 0.041 0.021 0.047 0.025 0.043h-1.041l-0.025-0.043-0.016-0.047-0.021-0.047-0.020-0.052-0.011-0.041-0.043-0.093-0.015-0.043-0.041-0.093-0.016-0.041-0.021-0.052-0.031-0.095-0.021-0.041h-1.448l-0.020 0.047-0.016 0.043-0.021 0.052-0.020 0.047-0.011 0.041-0.021 0.052-0.020 0.041-0.016 0.047-0.021 0.043-0.020 0.052-0.016 0.036-0.021 0.052-0.015 0.052-0.021 0.037-0.016 0.052h-1.031l0.015-0.048 0.043-0.093 0.015-0.052 0.016-0.041 0.027-0.047 0.020-0.047 0.021-0.043 0.011-0.047 0.020-0.052 0.027-0.041 0.020-0.047 0.032-0.095 0.047-0.093 0.016-0.047 0.020-0.041 0.016-0.048 0.063-0.14 0.021-0.052 0.015-0.041 0.016-0.047 0.027-0.043 0.020-0.052 0.016-0.047 0.016-0.041 0.020-0.052 0.027-0.037 0.016-0.052 0.020-0.041 0.016-0.047 0.021-0.052 0.025-0.041 0.016-0.052 0.020-0.037 0.016-0.052 0.021-0.052 0.020-0.036 0.021-0.052 0.016-0.043 0.020-0.052 0.016-0.036 0.027-0.052 0.020-0.052 0.021-0.041 0.011-0.047 0.020-0.048 0.027-0.047 0.020-0.041 0.011-0.052 0.021-0.047 0.021-0.043 0.041-0.093 0.015-0.041 0.043-0.104 0.020-0.037 0.021-0.052 0.016-0.041 0.015-0.052 0.021-0.047 0.027-0.041 0.020-0.052 0.016-0.037 0.016-0.052 0.020-0.041 0.027-0.047 0.016-0.052 0.015-0.043 0.021-0.052 0.020-0.036 0.027-0.052 0.016-0.052 0.015-0.036 0.021-0.052zM14.683 19.511h1.031l0.032 0.041 0.052 0.084 0.025 0.047 0.027 0.036 0.025 0.047 0.027 0.041 0.025 0.048 0.027 0.041 0.025 0.036 0.027 0.047 0.025 0.043 0.037 0.041 0.015 0.041 0.032 0.047 0.025 0.043 0.032 0.036 0.021 0.047 0.025 0.041 0.032 0.043 0.015 0.041 0.037 0.047 0.077 0.125 0.021 0.041 0.031 0.041 0.027 0.041 0.025 0.048 0.079 0.124 0.025 0.048 0.027 0.041 0.031-0.041 0.021-0.053 0.031-0.036 0.027-0.047 0.025-0.036 0.021-0.052 0.036-0.037 0.027-0.047 0.021-0.036 0.025-0.043 0.032-0.047 0.025-0.036 0.027-0.052 0.025-0.036 0.032-0.048 0.020-0.036 0.027-0.052 0.025-0.031 0.027-0.043 0.031-0.052 0.027-0.036 0.020-0.047 0.032-0.037 0.025-0.052 0.027-0.031 0.031-0.041 0.027-0.052 0.025-0.037 0.027-0.047 0.025-0.036 0.027-0.052 0.031-0.037 0.021-0.047 0.027-0.036h1.047v3.719h-0.98v-2.188l-0.025 0.037-0.032 0.052-0.025 0.031-0.032 0.041-0.020 0.052-0.032 0.037-0.025 0.036-0.032 0.052-0.052 0.073-0.031 0.041-0.027 0.052-0.031 0.037-0.027 0.036-0.020 0.052-0.032 0.036-0.025 0.037-0.032 0.052-0.025 0.036-0.032 0.041-0.025 0.047-0.021 0.037-0.031 0.041-0.027 0.047-0.031 0.036-0.032 0.043-0.020 0.041-0.027 0.047-0.031 0.037-0.032 0.041-0.020 0.052-0.037 0.031-0.020 0.041-0.032 0.053-0.025 0.036h-0.021l-0.031-0.047-0.027-0.043-0.025-0.047-0.027-0.036-0.031-0.047-0.027-0.041-0.031-0.043-0.027-0.041-0.025-0.047-0.027-0.036-0.036-0.048-0.021-0.041-0.031-0.047-0.027-0.036-0.025-0.047-0.032-0.043-0.025-0.052-0.032-0.036-0.025-0.047-0.027-0.043-0.025-0.047-0.032-0.036-0.025-0.047-0.032-0.041-0.020-0.043-0.032-0.041-0.025-0.047-0.032-0.036-0.025-0.048-0.032-0.041-0.020-0.047-0.037-0.036-0.020-0.048-0.032-0.041v2.193h-0.963v-3.683zM19.307 19.511h2.933v0.839h-1.959v0.599h1.76v0.792h-1.76v0.635h1.984v0.844h-2.953v-3.677zM12.213 20.651l-0.016 0.047-0.015 0.043-0.021 0.052-0.021 0.047-0.015 0.047-0.043 0.093-0.020 0.052-0.016 0.043-0.016 0.052-0.020 0.036-0.016 0.052-0.021 0.052-0.020 0.037-0.016 0.052-0.020 0.041-0.016 0.052-0.027 0.047-0.011 0.041-0.020 0.052-0.021 0.048-0.016 0.041-0.020 0.052h0.859l-0.020-0.052-0.016-0.047-0.041-0.095-0.016-0.047-0.021-0.041-0.015-0.052-0.021-0.047-0.016-0.047-0.020-0.043-0.016-0.047-0.021-0.052-0.015-0.041-0.043-0.093-0.009-0.048-0.021-0.047-0.021-0.052-0.015-0.036-0.043-0.104-0.015-0.047zM10.683 27.615h10.681l-5.452 1.797z" />
       </svg>
     )
diff --git a/packages/connect/src/styles.ts b/packages/connect/src/styles.ts
index 4d855452a..2700224e8 100644
--- a/packages/connect/src/styles.ts
+++ b/packages/connect/src/styles.ts
@@ -8,9 +8,11 @@ export const styles = String.raw`
       "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     --color-red-500: oklch(63.7% 0.237 25.331);
     --color-violet-600: oklch(54.1% 0.281 293.009);
+    --color-gray-500: oklch(55.1% 0.027 264.364);
     --color-black: #000;
     --color-white: #fff;
     --spacing: 0.25rem;
+    --container-md: 28rem;
     --text-xs: 0.75rem;
     --text-xs--line-height: calc(1 / 0.75);
     --text-sm: 0.875rem;
@@ -313,6 +315,9 @@ export const styles = String.raw`
   .my-4 {
     margin-block: calc(var(--spacing) * 4);
   }
+  .mt-0 {
+    margin-top: calc(var(--spacing) * 0);
+  }
   .mt-1 {
     margin-top: calc(var(--spacing) * 1);
   }
@@ -349,6 +354,9 @@ export const styles = String.raw`
   .mb-2 {
     margin-bottom: calc(var(--spacing) * 2);
   }
+  .mb-3 {
+    margin-bottom: calc(var(--spacing) * 3);
+  }
   .mb-4 {
     margin-bottom: calc(var(--spacing) * 4);
   }
@@ -595,6 +603,9 @@ export const styles = String.raw`
   .max-w-full {
     max-width: 100%;
   }
+  .max-w-md {
+    max-width: var(--container-md);
+  }
   .min-w-0 {
     min-width: calc(var(--spacing) * 0);
   }
@@ -767,6 +778,9 @@ export const styles = String.raw`
     text-overflow: ellipsis;
     white-space: nowrap;
   }
+  .overflow-auto {
+    overflow: auto;
+  }
   .overflow-hidden {
     overflow: hidden;
   }
@@ -822,10 +836,22 @@ export const styles = String.raw`
     border-top-left-radius: var(--radius-2xl);
     border-top-right-radius: var(--radius-2xl);
   }
+  .rounded-t-none {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+  .rounded-t-xl {
+    border-top-left-radius: var(--radius-xl);
+    border-top-right-radius: var(--radius-xl);
+  }
   .rounded-b-none {
     border-bottom-right-radius: 0;
     border-bottom-left-radius: 0;
   }
+  .rounded-b-xl {
+    border-bottom-right-radius: var(--radius-xl);
+    border-bottom-left-radius: var(--radius-xl);
+  }
   .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -870,6 +896,12 @@ export const styles = String.raw`
   .border-border-normal {
     border-color: var(--seq-color-border-normal);
   }
+  .border-primary {
+    border-color: var(--seq-color-primary);
+  }
+  .border-red-500 {
+    border-color: var(--color-red-500);
+  }
   .border-transparent {
     border-color: transparent;
   }
@@ -936,6 +968,10 @@ export const styles = String.raw`
   .bg-white {
     background-color: var(--color-white);
   }
+  .bg-gradient-to-r {
+    --tw-gradient-position: to right in oklab;
+    background-image: linear-gradient(var(--tw-gradient-stops));
+  }
   .bg-gradient-primary {
     background-image: var(--seq-color-gradient-primary);
   }
@@ -1020,6 +1056,9 @@ export const styles = String.raw`
   .py-4 {
     padding-block: calc(var(--spacing) * 4);
   }
+  .py-5 {
+    padding-block: calc(var(--spacing) * 5);
+  }
   .py-6 {
     padding-block: calc(var(--spacing) * 6);
   }
@@ -1225,6 +1264,9 @@ export const styles = String.raw`
   .text-black {
     color: var(--color-black);
   }
+  .text-gray-500 {
+    color: var(--color-gray-500);
+  }
   .text-info {
     color: var(--seq-color-info);
   }
@@ -2458,6 +2500,4 @@ export const styles = String.raw`
       --tw-gradient-to-position: 100%;
     }
   }
-}
-
-`
+}`
diff --git a/packages/wallet-widget/src/views/CollectibleDetails/index.tsx b/packages/wallet-widget/src/views/CollectibleDetails/index.tsx
index bcd30d834..a19fd7223 100644
--- a/packages/wallet-widget/src/views/CollectibleDetails/index.tsx
+++ b/packages/wallet-widget/src/views/CollectibleDetails/index.tsx
@@ -35,7 +35,7 @@ export const CollectibleDetails = ({ contractAddress, chainId, tokenId, accountA
   const [triggerWidth, setTriggerWidth] = useState<number>(0)
 
   const [isExternalPopoverOpen, setIsExternalPopoverOpen] = useState(false)
-  const [foundMarketplaceURL, setFoundMarketplaceURL] = useState<string | null>(null)
+  const [foundMarketplaceURL] = useState<string | null>(null)
 
   useEffect(() => {
     if (triggerRef.current) {