diff --git a/frontend/package.json b/frontend/package.json
index 54e0924..c9c2175 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -3,6 +3,7 @@
   "version": "1.0.0",
   "private": true,
   "devDependencies": {
+    "0xsequence": "^1.1.15",
     "@types/react": "^18.2.21",
     "@types/react-dom": "^18.2.7",
     "@walletconnect/client": "^1.8.0",
diff --git a/frontend/src/chains.ts b/frontend/src/chains.ts
index c0f3fc1..db37a33 100644
--- a/frontend/src/chains.ts
+++ b/frontend/src/chains.ts
@@ -1,3 +1,4 @@
+import { SequenceIndexerServices } from "@0xsequence/indexer"
 import {
   mainnet,
   goerli,
@@ -23,3 +24,11 @@ export const CHAINS = {
 export type ChainId = keyof typeof CHAINS
 
 export const DEFAULT_CHAIN = CHAINS[5]
+
+export const SEQUENCER_ENDPOINTS: Record<ChainId, SequenceIndexerServices> = {
+  1: SequenceIndexerServices.MAINNET,
+  5: SequenceIndexerServices.GOERLI,
+  100: SequenceIndexerServices.GNOSIS,
+  137: SequenceIndexerServices.POLYGON,
+  80001: SequenceIndexerServices.POLYGON_MUMBAI,
+}
diff --git a/frontend/src/components/NFTGrid/index.tsx b/frontend/src/components/NFTGrid/index.tsx
index b2576d7..5296270 100644
--- a/frontend/src/components/NFTGrid/index.tsx
+++ b/frontend/src/components/NFTGrid/index.tsx
@@ -1,63 +1,43 @@
-import { useEffect, useState } from "react"
-
-import useNFTsByOwner, { MechNFT } from "../../hooks/useNFTsByOwner"
+import { ContractType, TokenBalance } from "@0xsequence/indexer"
 import NFTGridItem from "../NFTGridItem"
 import Spinner from "../Spinner"
-import Button from "../Button"
 
 import classes from "./NFTGrid.module.css"
 import clsx from "clsx"
 import { useChainId } from "wagmi"
 import { useDeployedMechs } from "../../hooks/useDeployMech"
 import { calculateMechAddress } from "../../utils/calculateMechAddress"
+import useTokenBalances from "../../hooks/useTokenBalances"
 
 interface Props {
   address: string
 }
 
 const NFTGrid: React.FC<Props> = ({ address }) => {
-  const [pageToken, setPageToken] = useState<string | undefined>(undefined)
-
   const chainId = useChainId()
 
-  const { data, isLoading } = useNFTsByOwner({
-    walletAddress: address,
+  const { balances, isLoading } = useTokenBalances({
+    accountAddress: address,
     chainId,
-    pageToken,
   })
 
-  const [nftData, setNftData] = useState<MechNFT[]>([])
-
-  useEffect(() => {
-    setNftData((nftData) => {
-      if (nftData.length === 0) {
-        return data?.assets || []
-      }
-      const ids = new Set(
-        nftData.map((nft) => nft.nft.tokenID + nft.contractAddress)
-      )
-
-      // merge and dedupe
-      return [
-        ...nftData,
-        ...data?.assets.filter(
-          (nft) => !ids.has(nft.nft.tokenID + nft.contractAddress)
-        ),
-      ]
-    })
-  }, [data])
+  const nftBalances = balances.filter(
+    (balance) =>
+      balance.contractType === ContractType.ERC721 ||
+      balance.contractType === ContractType.ERC1155
+  )
 
-  const deployedMechs = useDeployedMechs(nftData)
+  const deployedMechs = useDeployedMechs(nftBalances)
 
-  const isDeployed = (nft: MechNFT) =>
+  const isDeployed = (nft: TokenBalance) =>
     deployedMechs.some(
       (mech) =>
         mech.chainId === chainId &&
         mech.address.toLowerCase() === calculateMechAddress(nft).toLowerCase()
     )
 
-  const deployed = nftData.filter(isDeployed)
-  const undeployed = nftData.filter((nft) => !isDeployed(nft))
+  const deployed = nftBalances.filter(isDeployed)
+  const undeployed = nftBalances.filter((nft) => !isDeployed(nft))
 
   return (
     <div className={classes.container}>
@@ -75,7 +55,7 @@ const NFTGrid: React.FC<Props> = ({ address }) => {
       <ul className={classes.grid}>
         {deployed.map((nft, index) => (
           <li key={`${index}-${nft.contractAddress}`}>
-            <NFTGridItem nftData={nft} />
+            <NFTGridItem tokenBalance={nft} />
           </li>
         ))}
       </ul>
@@ -89,24 +69,12 @@ const NFTGrid: React.FC<Props> = ({ address }) => {
         <ul className={classes.grid}>
           {undeployed.map((nft, index) => (
             <li key={`${index}-${nft.contractAddress}`}>
-              <NFTGridItem nftData={nft} />
+              <NFTGridItem tokenBalance={nft} />
             </li>
           ))}
         </ul>
       )}
-      {isLoading ? (
-        <Spinner />
-      ) : (
-        <Button
-          onClick={() => {
-            console.log("set page token")
-            setPageToken(data?.nextPageToken)
-          }}
-          secondary
-        >
-          Load more
-        </Button>
-      )}
+      {isLoading && <Spinner />}
     </div>
   )
 }
diff --git a/frontend/src/components/NFTGridItem/index.tsx b/frontend/src/components/NFTGridItem/index.tsx
index 6a1df48..4e4229f 100644
--- a/frontend/src/components/NFTGridItem/index.tsx
+++ b/frontend/src/components/NFTGridItem/index.tsx
@@ -1,3 +1,4 @@
+import { TokenBalance } from "@0xsequence/indexer"
 import { useState } from "react"
 import copy from "copy-to-clipboard"
 import clsx from "clsx"
@@ -7,47 +8,49 @@ import classes from "./NFTItem.module.css"
 import Button from "../Button"
 import { shortenAddress } from "../../utils/shortenAddress"
 import Spinner from "../Spinner"
-import { MechNFT } from "../../hooks/useNFTsByOwner"
 import ChainIcon from "../ChainIcon"
 import { calculateMechAddress } from "../../utils/calculateMechAddress"
 import { CHAINS, ChainId } from "../../chains"
 import { useDeployMech } from "../../hooks/useDeployMech"
 
 interface Props {
-  nftData: MechNFT
+  tokenBalance: TokenBalance
 }
 
-const NFTGridItem: React.FC<Props> = ({ nftData }) => {
+const NFTGridItem: React.FC<Props> = ({ tokenBalance }) => {
   const [imageError, setImageError] = useState(false)
 
-  const chain = CHAINS[parseInt(nftData.blockchain.shortChainID) as ChainId]
+  const chain = CHAINS[tokenBalance.chainId as ChainId]
 
-  const mechAddress = calculateMechAddress(nftData)
-  const { deploy, deployPending, deployed } = useDeployMech(nftData)
+  const mechAddress = calculateMechAddress(tokenBalance)
+  const { deploy, deployPending, deployed } = useDeployMech(tokenBalance)
+
+  const name =
+    tokenBalance.tokenMetadata?.name || tokenBalance.contractInfo?.name
 
   return (
     <div className={classes.itemContainer}>
       <div className={classes.header}>
         <p className={classes.tokenName}>
           <Link
-            to={`mechs/${chain.prefix}:${nftData.contractAddress}/${nftData.nft.tokenID}`}
+            to={`mechs/${chain.prefix}:${tokenBalance.contractAddress}/${tokenBalance.tokenID}`}
           >
-            {nftData.nft.title || nftData.nft.contractTitle || "..."}
+            {name || "..."}
           </Link>
         </p>
-        {nftData.nft.tokenID.length < 5 && (
-          <p className={classes.tokenId}>{nftData.nft.tokenID || "..."}</p>
+        {tokenBalance.tokenID.length < 5 && (
+          <p className={classes.tokenId}>{tokenBalance.tokenID || "..."}</p>
         )}
       </div>
       <div className={classes.main}>
-        {(!nftData.nft.previews || imageError) && (
+        {(imageError || !tokenBalance.tokenMetadata?.image) && (
           <div className={classes.noImage}></div>
         )}
-        {!imageError && nftData.nft.previews && (
+        {!imageError && tokenBalance.tokenMetadata?.image && (
           <div className={classes.imageContainer}>
             <img
-              src={nftData.nft.previews[0].URI}
-              alt={nftData.nft.contractTitle}
+              src={tokenBalance.tokenMetadata?.image}
+              alt={name}
               className={classes.image}
               onError={() => setImageError(true)}
             />
@@ -68,7 +71,7 @@ const NFTGridItem: React.FC<Props> = ({ nftData }) => {
       </div>
       {deployed ? (
         <Link
-          to={`mechs/${chain.prefix}:${nftData.contractAddress}/${nftData.nft.tokenID}`}
+          to={`mechs/${chain.prefix}:${tokenBalance.contractAddress}/${tokenBalance.tokenID}`}
         >
           <Button className={classes.useButton} onClick={() => {}}>
             Use Mech
diff --git a/frontend/src/components/NFTItem/index.tsx b/frontend/src/components/NFTItem/index.tsx
index 9207169..d45e18b 100644
--- a/frontend/src/components/NFTItem/index.tsx
+++ b/frontend/src/components/NFTItem/index.tsx
@@ -1,62 +1,57 @@
+import { TokenBalance } from "@0xsequence/indexer"
 import classes from "./NFTItem.module.css"
 import { useState } from "react"
 import { shortenAddress } from "../../utils/shortenAddress"
 import copy from "copy-to-clipboard"
 import clsx from "clsx"
 
-import useAccountBalance from "../../hooks/useAccountBalance"
+import useTokenBalances from "../../hooks/useTokenBalances"
 import Spinner from "../Spinner"
 import { useDeployMech } from "../../hooks/useDeployMech"
 
-import { MechNFT } from "../../hooks/useNFTsByOwner"
 import { calculateMechAddress } from "../../utils/calculateMechAddress"
+import { formatUnits } from "viem"
 
 interface Props {
-  nftData: MechNFT
+  tokenBalance: TokenBalance
 }
 
-const NFTItem: React.FC<Props> = ({ nftData }) => {
-  const mechAddress = calculateMechAddress(nftData)
-
-  const operatorAddress = nftData.nft.owner?.address as string | undefined
-  const operatorLabel =
-    operatorAddress &&
-    ((nftData.nft.owner?.ens && nftData.nft.owner?.ens[0]?.name) ||
-      shortenAddress(operatorAddress))
+const NFTItem: React.FC<Props> = ({ tokenBalance }) => {
+  const mechAddress = calculateMechAddress(tokenBalance)
+  const operatorAddress = tokenBalance.accountAddress
 
   const [imageError, setImageError] = useState(false)
 
   const {
-    isLoading: assetsLoading,
-    data: assetsData,
-    error: assetsError,
-  } = useAccountBalance({
-    address: mechAddress,
-    chainId: parseInt(nftData.blockchain.shortChainID),
+    balances: mechBalances,
+    isLoading: mechBalancesLoading,
+    error: mechBalancesError,
+  } = useTokenBalances({
+    accountAddress: mechAddress,
+    chainId: tokenBalance.chainId,
   })
 
-  const { deployed } = useDeployMech(nftData)
-
+  const { deployed } = useDeployMech(tokenBalance)
+  const name =
+    tokenBalance.tokenMetadata?.name || tokenBalance.contractInfo?.name || "..."
   return (
     <div className={classes.itemContainer}>
       <div className={classes.header}>
-        <p className={classes.tokenName}>
-          {nftData.nft.title || nftData.nft.contractTitle || "..."}
-        </p>
+        <p className={classes.tokenName}>{name}</p>
 
-        <p className={classes.tokenId} title={nftData.nft.tokenID}>
-          {nftData.nft.tokenID}
+        <p className={classes.tokenId} title={tokenBalance.tokenID}>
+          {tokenBalance.tokenID}
         </p>
       </div>
       <div className={classes.main}>
-        {(imageError || !nftData.nft.previews) && (
+        {(imageError || !tokenBalance.tokenMetadata?.image) && (
           <div className={classes.noImage}></div>
         )}
-        {!imageError && nftData.nft.previews && (
+        {!imageError && tokenBalance.tokenMetadata?.image && (
           <div className={classes.imageContainer}>
             <img
-              src={nftData.nft.previews[0].URI}
-              alt={nftData.nft.contractTitle}
+              src={tokenBalance.tokenMetadata?.image}
+              alt={name}
               className={classes.image}
               onError={() => setImageError(true)}
             />
@@ -98,45 +93,47 @@ const NFTItem: React.FC<Props> = ({ nftData }) => {
               title={operatorAddress}
             >
               <div className={classes.ellipsis}>
-                {operatorAddress ? operatorLabel : "\u2014"}
+                {operatorAddress ? shortenAddress(operatorAddress) : "\u2014"}
               </div>
             </div>
           </li>
-          <li>
+          {/* <li>
             <label>Balance</label>
             <div className={clsx(classes.infoItem)}>
               {assetsError || !assetsData
                 ? "n/a"
                 : `$ ${assetsData.totalBalanceUSD}`}
             </div>
-          </li>
+          </li> */}
         </ul>
       </div>
       <label>Assets</label>
       <div
         className={clsx(
           classes.assetsContainer,
-          assetsData && assetsData.assets.length === 0 && classes.empty
+          mechBalances.length === 0 && classes.empty
         )}
       >
-        {assetsError && <p>Failed to load assets</p>}
-        {assetsLoading && <Spinner />}
-        {assetsData && (
-          <>
-            {assetsData.assets.length === 0 && <p>No assets found</p>}
-            <ul className={classes.assetList}>
-              {assetsData.assets.map((asset, index) => (
-                <li key={index} className={classes.asset}>
-                  <div className={classes.name}>{asset.name}</div>
-                  <div className={classes.value}>
-                    <p>{asset.pretty}</p>
-                    <p>{asset.symbol}</p>
-                  </div>
-                </li>
-              ))}
-            </ul>
-          </>
-        )}
+        {mechBalancesError && <p>Failed to load assets</p>}
+        {mechBalancesLoading && <Spinner />}
+
+        {mechBalances.length === 0 && <p>No assets found</p>}
+        <ul className={classes.assetList}>
+          {mechBalances.map((balance, index) => (
+            <li key={index} className={classes.asset}>
+              <div className={classes.name}>{balance.contractInfo?.name}</div>
+              <div className={classes.value}>
+                <p>
+                  {formatUnits(
+                    BigInt(balance.balance),
+                    balance.contractInfo?.decimals || 0
+                  )}
+                </p>
+                <p>{balance.contractInfo?.symbol}</p>
+              </div>
+            </li>
+          ))}
+        </ul>
       </div>
     </div>
   )
diff --git a/frontend/src/hooks/useAccountBalance.ts b/frontend/src/hooks/useAccountBalance.ts
deleted file mode 100644
index fc83c85..0000000
--- a/frontend/src/hooks/useAccountBalance.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-import { useEffect, useState } from "react"
-import { nxyzFungibleBalance } from "../types/nxyzApiTypes"
-
-interface Props {
-  address: string
-  chainId: number
-}
-
-interface AccountResult {
-  data: {
-    totalBalanceUSD?: number
-    assets: nxyzFungibleBalance[]
-  }
-  isLoading: boolean
-  error: any
-}
-
-type useAccountBalanceType = (props: Props) => AccountResult
-
-const sumNxyzFiatBalances = (balances: nxyzFungibleBalance[]) => {
-  return balances.reduce((acc, balance) => {
-    if (balance.fiat) {
-      const usdBalance = balance.fiat.find((fiat) => fiat.symbol === "USD")
-      return acc + (usdBalance ? usdBalance?.tokenValue : 0)
-    }
-    return acc
-  }, 0)
-}
-
-const useAccountBalance: useAccountBalanceType = ({ address, chainId }) => {
-  const [data, setData] = useState<any>(null)
-  const [isLoading, setIsLoading] = useState(false)
-  const [error, setError] = useState<any>(null)
-
-  useEffect(() => {
-    const apiUrl = `https://nxyz-api-wrapper.vercel.app/api/v1/address/${address}/balances/fungibles?chainID=eip155:${chainId}&filterDust=true&filterSpam=true`
-    const fetchData = async () => {
-      try {
-        setIsLoading(true)
-        const res = await fetch(apiUrl)
-        const data = await res.json()
-
-        setData({
-          assets: data,
-          totalBalanceUSD: sumNxyzFiatBalances(data),
-        })
-        setIsLoading(false)
-      } catch (e) {
-        setError(e)
-        setIsLoading(false)
-      }
-    }
-
-    fetchData()
-  }, [address, chainId])
-
-  return { data, isLoading, error }
-}
-
-export default useAccountBalance
diff --git a/frontend/src/hooks/useDeployMech.tsx b/frontend/src/hooks/useDeployMech.tsx
index 9f3f30c..dfa96b7 100644
--- a/frontend/src/hooks/useDeployMech.tsx
+++ b/frontend/src/hooks/useDeployMech.tsx
@@ -1,3 +1,4 @@
+import { TokenBalance } from "@0xsequence/indexer"
 import { useEffect, useState } from "react"
 import {
   PublicClient,
@@ -9,7 +10,6 @@ import {
 } from "wagmi"
 import { calculateMechAddress } from "../utils/calculateMechAddress"
 import { makeMechDeployTransaction } from "../utils/deployMech"
-import { MechNFT } from "./useNFTsByOwner"
 
 interface QueryKeyArgs {
   address: `0x${string}`
@@ -29,7 +29,7 @@ function queryFn(client: PublicClient) {
   }
 }
 
-export const useDeployMech = (token: MechNFT | null) => {
+export const useDeployMech = (token: TokenBalance | null) => {
   const mechAddress = token && calculateMechAddress(token)
   const chainId = useChainId()
 
@@ -66,7 +66,7 @@ export const useDeployMech = (token: MechNFT | null) => {
   return { deployed, deploy, deployPending }
 }
 
-export const useDeployedMechs = (nfts: MechNFT[]) => {
+export const useDeployedMechs = (nfts: TokenBalance[]) => {
   const queryClient = useQueryClient()
 
   useEffect(() => {
@@ -75,7 +75,7 @@ export const useDeployedMechs = (nfts: MechNFT[]) => {
         "mechDeployed",
         {
           address: calculateMechAddress(nft),
-          chainId: parseInt(nft.blockchain.shortChainID),
+          chainId: nft.chainId,
         },
       ])
     })
diff --git a/frontend/src/hooks/useNFT.ts b/frontend/src/hooks/useNFT.ts
deleted file mode 100644
index b89e90a..0000000
--- a/frontend/src/hooks/useNFT.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import { useEffect, useState } from "react"
-import { usePublicClient } from "wagmi"
-
-import { nxyzNFT } from "../types/nxyzApiTypes"
-import { MechNFT } from "./useNFTsByOwner"
-
-interface NFTProps {
-  contractAddress: string
-  chainId: number
-  tokenId: string
-}
-
-interface NFTResult {
-  data: MechNFT | null
-  isLoading: boolean
-  error: any
-}
-
-type useNFTType = (props: NFTProps) => NFTResult
-
-const useNFT: useNFTType = ({ contractAddress, chainId, tokenId }) => {
-  const [data, setData] = useState<any>(null)
-  const [isLoading, setIsLoading] = useState(false)
-  const [error, setError] = useState<any>(null)
-  const client = usePublicClient()
-
-  useEffect(() => {
-    const fetchData = async () => {
-      const apiUrl = `https://nxyz-api-wrapper.vercel.app/api/v1/nfts/${contractAddress}/${tokenId}?chainID=eip155:${chainId}&limit=20&filterSpam=false`
-      try {
-        setIsLoading(true)
-        const res = await fetch(apiUrl)
-        const data: nxyzNFT[] = await res.json()
-        const mechData = data[0] as MechNFT
-        setData(mechData)
-        setIsLoading(false)
-      } catch (e) {
-        setError(e)
-        setIsLoading(false)
-      }
-    }
-
-    fetchData()
-  }, [contractAddress, chainId, tokenId, client])
-
-  return { data, isLoading, error }
-}
-
-export default useNFT
diff --git a/frontend/src/hooks/useNFTsByOwner.ts b/frontend/src/hooks/useNFTsByOwner.ts
deleted file mode 100644
index 2f1bf39..0000000
--- a/frontend/src/hooks/useNFTsByOwner.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-import { useEffect, useState } from "react"
-import { usePublicClient } from "wagmi"
-import { CHAINS } from "../chains"
-import { nxyzNFT } from "../types/nxyzApiTypes"
-
-interface NFTProps {
-  walletAddress: string
-  chainId?: number
-  pageToken?: string
-}
-
-export interface MechNFT extends nxyzNFT {
-  tokenStandard?: "ERC-721" | "ERC-1155"
-}
-
-interface MechGetNFTsByOwnerReply {
-  assets: MechNFT[]
-  nextPageToken?: string
-}
-
-interface NFTResult {
-  data: MechGetNFTsByOwnerReply
-  isLoading: boolean
-  error: any
-}
-
-type useNFTsByOwnerType = (props: NFTProps) => NFTResult
-
-const DEFAULT_CHAIN = CHAINS[5]
-
-const useNFTsByOwner: useNFTsByOwnerType = ({
-  walletAddress,
-  chainId,
-  pageToken,
-}) => {
-  const [data, setData] = useState<any>(null)
-  const [isLoading, setIsLoading] = useState(false)
-  const [error, setError] = useState<any>(null)
-  const client = usePublicClient()
-
-  useEffect(() => {
-    const apiUrl = `https://nxyz-api-wrapper.vercel.app/api/v1/address/${walletAddress}/balances/nfts?chainID=eip155:${
-      chainId || DEFAULT_CHAIN.id
-    }&limit=20&filterSpam=false${pageToken ? `&cursor=${pageToken}` : ""}`
-    const fetchData = async () => {
-      try {
-        setIsLoading(true)
-        const res = await fetch(apiUrl)
-        const cursor = res.headers.get("X-Doc-Next-Cursor")
-        const nfts: nxyzNFT[] = await res.json()
-        setData({ assets: nfts, nextPageToken: cursor })
-        setIsLoading(false)
-      } catch (e) {
-        setError(e)
-        setIsLoading(false)
-      }
-    }
-
-    fetchData()
-  }, [walletAddress, chainId, pageToken, client])
-
-  return { data, isLoading, error }
-}
-
-export default useNFTsByOwner
diff --git a/frontend/src/hooks/useTokenBalances.ts b/frontend/src/hooks/useTokenBalances.ts
new file mode 100644
index 0000000..82432cc
--- /dev/null
+++ b/frontend/src/hooks/useTokenBalances.ts
@@ -0,0 +1,49 @@
+import { SequenceIndexerClient, TokenBalance } from "@0xsequence/indexer"
+import { useEffect, useState } from "react"
+import { ChainId, SEQUENCER_ENDPOINTS } from "../chains"
+
+interface Props {
+  accountAddress?: string
+  chainId: number
+  tokenContract?: string
+  tokenId?: string
+}
+
+const useTokenBalances = ({
+  accountAddress,
+  chainId,
+  tokenContract,
+  tokenId,
+}: Props) => {
+  const [balances, setBalances] = useState<TokenBalance[]>([])
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState<any>(null)
+
+  useEffect(() => {
+    const indexer = new SequenceIndexerClient(
+      SEQUENCER_ENDPOINTS[chainId as ChainId]
+    )
+    const fetchData = async () => {
+      try {
+        setIsLoading(true)
+        const tokenBalances = await indexer.getTokenBalances({
+          includeMetadata: true,
+          accountAddress,
+          contractAddress: tokenContract,
+          tokenID: tokenId,
+        })
+        setBalances(tokenBalances.balances)
+        setIsLoading(false)
+      } catch (e) {
+        setError(e)
+        setIsLoading(false)
+      }
+    }
+
+    fetchData()
+  }, [accountAddress, tokenContract, tokenId, chainId])
+
+  return { balances, isLoading, error }
+}
+
+export default useTokenBalances
diff --git a/frontend/src/routes/Mech/index.tsx b/frontend/src/routes/Mech/index.tsx
index d6a3a43..bff300c 100644
--- a/frontend/src/routes/Mech/index.tsx
+++ b/frontend/src/routes/Mech/index.tsx
@@ -1,7 +1,7 @@
 import React from "react"
+import { TokenBalance } from "@0xsequence/indexer"
 import { useParams } from "react-router-dom"
 import Layout from "../../components/Layout"
-import useNFT from "../../hooks/useNFT"
 import NFTItem from "../../components/NFTItem"
 
 import classes from "./Mech.module.css"
@@ -13,6 +13,7 @@ import { useDeployMech } from "../../hooks/useDeployMech"
 import MechDeploy from "../../components/Deploy"
 import { calculateMechAddress } from "../../utils/calculateMechAddress"
 import { CHAINS } from "../../chains"
+import useTokenBalances from "../../hooks/useTokenBalances"
 
 const Mech: React.FC = () => {
   const { token, tokenId } = useParams()
@@ -35,15 +36,16 @@ const Mech: React.FC = () => {
     throw new Error("token must be a valid address")
   }
 
-  const { data, error, isLoading } = useNFT({
-    contractAddress,
-    tokenId: tokenId,
+  const { balances, error, isLoading } = useTokenBalances({
+    tokenContract: contractAddress,
     chainId: chain.id,
+    tokenId: tokenId,
   })
+  const balance: TokenBalance | null = balances[0]
 
-  const { deployed, deploy, deployPending } = useDeployMech(data)
+  const { deployed, deploy, deployPending } = useDeployMech(balance)
 
-  const mechAddress = data && calculateMechAddress(data)
+  const mechAddress = balance && calculateMechAddress(balance)
 
   const handleRequest = useHandleRequest(mechAddress)
 
@@ -51,9 +53,9 @@ const Mech: React.FC = () => {
     <Layout mechAddress={mechAddress || undefined}>
       <div className={classes.container}>
         {isLoading && <Spinner />}
-        {!error && !isLoading && data && mechAddress && (
+        {!error && !isLoading && balance && mechAddress && (
           <>
-            <NFTItem nftData={data} />
+            <NFTItem tokenBalance={balance} />
 
             <ProvideWalletConnect
               chainId={chain.id}
diff --git a/frontend/src/types/nxyzApiTypes.ts b/frontend/src/types/nxyzApiTypes.ts
deleted file mode 100644
index d009ea7..0000000
--- a/frontend/src/types/nxyzApiTypes.ts
+++ /dev/null
@@ -1,95 +0,0 @@
-export interface nxyzBlockchain {
-  name: string
-  shortName: string
-  chainID: string
-  shortChainID: string
-}
-
-export interface nxyzTokenSymbol {
-  uri?: string
-  duration?: string
-  format?: string
-  height?: number
-  width?: number
-  kind?: string
-}
-
-export interface nxyzFiat {
-  decimals: number
-  name?: string
-  percentChange24hour?: number
-  pretty: string
-  symbol?: string
-  symbolLogos?: nxyzTokenSymbol[]
-  tokenValue: number
-  updateTime?: string
-  value: string
-}
-
-export interface nxyzFungibleBalance {
-  value: string
-  tokenValue: number
-  pretty: string
-  decimals: number
-  symbol: string
-  contractAddress: string
-  name: string
-  blockchain: nxyzBlockchain
-  fiat?: nxyzFiat[]
-  historicalFiat?: nxyzFiat[]
-  symbolLogos?: nxyzTokenSymbol[]
-}
-
-export interface nxyzNFT {
-  balance?: number
-  blockchain: nxyzBlockchain
-  contractAddress: string
-  isSpam?: boolean
-  nft: nxyzNFTDetail
-  openSeaContract?: any
-  symbol?: string
-  tokenStandard?: string
-}
-
-export interface nxyzNFTDetail {
-  attributes?: any[]
-  collection?: any
-  contractTitle?: string
-  creatorAddress?: string
-  description?: string
-  durability?: "On-Chain" | "Decentralized" | "Web" | "Unknown"
-  hidden?: boolean
-  lastSoldPrice?: any
-  lastSoldTime?: string
-  media?: {
-    key?: string
-    URI?: string
-    version: any[]
-  }
-  owner?: any
-  previews?: {
-    URI?: string
-    duration?: string
-    format?: string
-    height?: number
-    width?: number
-    kind?: "video" | "image" | "raw" | "audio"
-  }[]
-  projectName?: string
-  purchase?: any
-  title?: string
-  tokenID: string
-}
-
-export type nxyzShortChainID =
-  | "10"
-  | "56"
-  | "42220"
-  | "100"
-  | "1"
-  | "80001"
-  | "42161"
-  | "43114"
-  | "1284"
-  | "5"
-  | "137"
diff --git a/frontend/src/utils/calculateMechAddress.ts b/frontend/src/utils/calculateMechAddress.ts
index b7430b1..aabe722 100644
--- a/frontend/src/utils/calculateMechAddress.ts
+++ b/frontend/src/utils/calculateMechAddress.ts
@@ -1,16 +1,16 @@
+import { TokenBalance, ContractType } from "@0xsequence/indexer"
 import {
   calculateERC1155TokenboundMechAddress,
   calculateERC721TokenboundMechAddress,
 } from "mech-sdk"
-import { MechNFT } from "../hooks/useNFTsByOwner"
 
-export const calculateMechAddress = (token: MechNFT) => {
+export const calculateMechAddress = (token: TokenBalance) => {
   const context = {
-    chainId: parseInt(token.blockchain.shortChainID),
+    chainId: token.chainId,
     token: token.contractAddress as `0x${string}`,
-    tokenId: BigInt(token.nft.tokenID),
+    tokenId: BigInt(token.tokenID),
   }
-  return token.tokenStandard === "ERC-1155"
+  return token.contractType === ContractType.ERC1155
     ? calculateERC1155TokenboundMechAddress(context)
     : calculateERC721TokenboundMechAddress(context)
 }
diff --git a/frontend/src/utils/deployMech.ts b/frontend/src/utils/deployMech.ts
index 8d8b03e..9c33c7f 100644
--- a/frontend/src/utils/deployMech.ts
+++ b/frontend/src/utils/deployMech.ts
@@ -1,17 +1,16 @@
+import { TokenBalance, ContractType } from "@0xsequence/indexer"
 import {
   makeERC1155TokenboundMechDeployTransaction,
   makeERC721TokenboundMechDeployTransaction,
 } from "mech-sdk"
-import { MechNFT } from "../hooks/useNFTsByOwner"
 
-export const makeMechDeployTransaction = (token: MechNFT) => {
-  const chainId = parseInt(token.blockchain.shortChainID)
+export const makeMechDeployTransaction = (token: TokenBalance) => {
   const context = {
-    chainId: parseInt(token.blockchain.shortChainID),
+    chainId: token.chainId,
     token: token.contractAddress as `0x${string}`,
-    tokenId: BigInt(token.nft.tokenID),
+    tokenId: BigInt(token.tokenID),
   }
-  return token.tokenStandard === "ERC-1155"
+  return token.contractType === ContractType.ERC1155
     ? makeERC1155TokenboundMechDeployTransaction(context)
     : makeERC721TokenboundMechDeployTransaction(context)
 }
diff --git a/yarn.lock b/yarn.lock
index d12aeed..be2411d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5,6 +5,267 @@ __metadata:
   version: 6
   cacheKey: 8
 
+"0xsequence@npm:^1.1.15":
+  version: 1.1.15
+  resolution: "0xsequence@npm:1.1.15"
+  dependencies:
+    "@0xsequence/abi": 1.1.15
+    "@0xsequence/account": 1.1.15
+    "@0xsequence/api": 1.1.15
+    "@0xsequence/auth": 1.1.15
+    "@0xsequence/core": 1.1.15
+    "@0xsequence/guard": 1.1.15
+    "@0xsequence/indexer": 1.1.15
+    "@0xsequence/metadata": 1.1.15
+    "@0xsequence/migration": 1.1.15
+    "@0xsequence/multicall": 1.1.15
+    "@0xsequence/network": 1.1.15
+    "@0xsequence/provider": 1.1.15
+    "@0xsequence/relayer": 1.1.15
+    "@0xsequence/sessions": 1.1.15
+    "@0xsequence/signhub": 1.1.15
+    "@0xsequence/utils": 1.1.15
+    "@0xsequence/wallet": 1.1.15
+  peerDependencies:
+    ethers: ">=5.5 < 6"
+  checksum: 16fe23f8d098b21a3070d4f330e856dc6f04d8af7feed0573be50ed5f03abb0203fd167d7edc5dadeccc5b28a7fe0ac6efc6e14513839419fc51ba12941145b3
+  languageName: node
+  linkType: hard
+
+"@0xsequence/abi@npm:1.1.15":
+  version: 1.1.15
+  resolution: "@0xsequence/abi@npm:1.1.15"
+  checksum: 5574814ff08e665af85332836a893ab403ed993db06f894046e5087b29e2acbf06d3eb9fbcad812442d810b24be6e7c833f003f590c008607ffc84c120af8b45
+  languageName: node
+  linkType: hard
+
+"@0xsequence/account@npm:1.1.15":
+  version: 1.1.15
+  resolution: "@0xsequence/account@npm:1.1.15"
+  dependencies:
+    "@0xsequence/core": 1.1.15
+    "@0xsequence/migration": 1.1.15
+    "@0xsequence/network": 1.1.15
+    "@0xsequence/relayer": 1.1.15
+    "@0xsequence/sessions": 1.1.15
+    "@0xsequence/utils": 1.1.15
+    "@0xsequence/wallet": 1.1.15
+    ethers: ^5.5.2
+  checksum: d7fe4ad074def24b37ef13077dfd1526fdd423560c1156413980399ba311d8d4ec4f7f9627b15b8045cf145d4de64068f2a9b374b50694b32137de40d3294ca3
+  languageName: node
+  linkType: hard
+
+"@0xsequence/api@npm:1.1.15":
+  version: 1.1.15
+  resolution: "@0xsequence/api@npm:1.1.15"
+  checksum: e1443fa4e88afde59c71e6648a4652304f184234e66d2527e9b3fa561bd0050a65aa60d23ce499ef145955e72f87cc24cedeba07f276703529e023ca2e0fc219
+  languageName: node
+  linkType: hard
+
+"@0xsequence/auth@npm:1.1.15":
+  version: 1.1.15
+  resolution: "@0xsequence/auth@npm:1.1.15"
+  dependencies:
+    "@0xsequence/abi": 1.1.15
+    "@0xsequence/account": 1.1.15
+    "@0xsequence/api": 1.1.15
+    "@0xsequence/core": 1.1.15
+    "@0xsequence/ethauth": ^0.8.1
+    "@0xsequence/indexer": 1.1.15
+    "@0xsequence/metadata": 1.1.15
+    "@0xsequence/migration": 1.1.15
+    "@0xsequence/network": 1.1.15
+    "@0xsequence/sessions": 1.1.15
+    "@0xsequence/signhub": 1.1.15
+    "@0xsequence/utils": 1.1.15
+    "@0xsequence/wallet": 1.1.15
+  peerDependencies:
+    ethers: ">=5.5 < 6"
+  checksum: d2443f50554415e7351759879eefd2267f113a53ef6ec79ae047c1fbe53c43550b7eee8d2b9f391cfebf49bc191a84f18ed680817a8676652713e9071c690daf
+  languageName: node
+  linkType: hard
+
+"@0xsequence/core@npm:1.1.15":
+  version: 1.1.15
+  resolution: "@0xsequence/core@npm:1.1.15"
+  dependencies:
+    "@0xsequence/abi": 1.1.15
+  peerDependencies:
+    ethers: ">=5.5"
+  checksum: b61f57c15bdb0138cde4245bd6dcf0e9dc3b4a80f7c6feaf4fcd943e8c98bb4c5f2d79c88e448ca9bce63d2c1bfbcd0b56898b437b1cb88718fe855c70d78d71
+  languageName: node
+  linkType: hard
+
+"@0xsequence/ethauth@npm:^0.8.1":
+  version: 0.8.1
+  resolution: "@0xsequence/ethauth@npm:0.8.1"
+  dependencies:
+    js-base64: ^3.7.2
+  peerDependencies:
+    ethers: ">=5.5"
+  checksum: 4122371cc69e63a34730bd3b05d93ab4b49b4cab6f6c11c3453e4c9cee4cc8d5b6f85e9482099a143fa3c9ca6dc3bd7635817026236f676a78b52a6bf4dedde9
+  languageName: node
+  linkType: hard
+
+"@0xsequence/guard@npm:1.1.15":
+  version: 1.1.15
+  resolution: "@0xsequence/guard@npm:1.1.15"
+  dependencies:
+    "@0xsequence/core": 1.1.15
+    "@0xsequence/signhub": 1.1.15
+    ethers: ^5.7.2
+  checksum: b216bd4bce986a262ada9817dd2fb3cd19f674a8202565f9acbd81378429e45c9da74f44a0fee6488961c74f7db5c35a43c592ba0e4074b5b320deea97b4d244
+  languageName: node
+  linkType: hard
+
+"@0xsequence/indexer@npm:1.1.15":
+  version: 1.1.15
+  resolution: "@0xsequence/indexer@npm:1.1.15"
+  checksum: 1b9dc5ba8556ec6b2978f54e602827538a30fbc493fdd93f3a0875f3abb24419a7022c958f57956e30b6f1079424a9dbc6e6cded1239966a07ba77b315c52a13
+  languageName: node
+  linkType: hard
+
+"@0xsequence/metadata@npm:1.1.15":
+  version: 1.1.15
+  resolution: "@0xsequence/metadata@npm:1.1.15"
+  checksum: ccb874a5e98457f8db19f3057303a298b1c64a8378b47c5075b431c76b825fe7367701791cdde3a25aa3952eb029801a503d36f9ff6beaf176b8b1d44b2fbe3d
+  languageName: node
+  linkType: hard
+
+"@0xsequence/migration@npm:1.1.15":
+  version: 1.1.15
+  resolution: "@0xsequence/migration@npm:1.1.15"
+  dependencies:
+    "@0xsequence/abi": 1.1.15
+    "@0xsequence/core": 1.1.15
+    "@0xsequence/wallet": 1.1.15
+    ethers: ^5.5.2
+  checksum: 6a56cf4af37b69bd39c1935a52cab2f359f4b86ce1cf2f2b4aed0a43a9fa9121ed413fd88fe7b01422f94d2d83a596bfa632acc3be9b359278536e6f2ae4d589
+  languageName: node
+  linkType: hard
+
+"@0xsequence/multicall@npm:1.1.15":
+  version: 1.1.15
+  resolution: "@0xsequence/multicall@npm:1.1.15"
+  dependencies:
+    "@0xsequence/abi": 1.1.15
+    "@0xsequence/network": 1.1.15
+    "@0xsequence/utils": 1.1.15
+  peerDependencies:
+    ethers: ">=5.5 < 6"
+  checksum: 5b9d3ab0c45b82c49e9322e648500ce7c404a5ea13dd42337ca8f82b3379eb958a81e91821cb15d76b8d17e1411d342f84381be0fd9b845b5c553c56544bc96c
+  languageName: node
+  linkType: hard
+
+"@0xsequence/network@npm:1.1.15":
+  version: 1.1.15
+  resolution: "@0xsequence/network@npm:1.1.15"
+  dependencies:
+    "@0xsequence/core": 1.1.15
+    "@0xsequence/indexer": 1.1.15
+    "@0xsequence/relayer": 1.1.15
+    "@0xsequence/utils": 1.1.15
+  peerDependencies:
+    ethers: ">=5.5 < 6"
+  checksum: 3cb3f8b0f1d071a30d8fafb1295b9b7e169c71dd3403e2238a1cfa3ec36056714e445eeb86097bd39eebd8c0950542e3a35b72345d2943d19c81109753a73c49
+  languageName: node
+  linkType: hard
+
+"@0xsequence/provider@npm:1.1.15":
+  version: 1.1.15
+  resolution: "@0xsequence/provider@npm:1.1.15"
+  dependencies:
+    "@0xsequence/abi": 1.1.15
+    "@0xsequence/account": 1.1.15
+    "@0xsequence/auth": 1.1.15
+    "@0xsequence/core": 1.1.15
+    "@0xsequence/migration": 1.1.15
+    "@0xsequence/network": 1.1.15
+    "@0xsequence/relayer": 1.1.15
+    "@0xsequence/utils": 1.1.15
+    "@0xsequence/wallet": 1.1.15
+    eventemitter2: ^6.4.5
+    webextension-polyfill: ^0.10.0
+  peerDependencies:
+    ethers: ">=5.5 < 6"
+  checksum: 67670225896583eca9821c764b7c771c6f1a1ca3b9142e48720b82fd8389f93acfc3a5f4d5c9d904cfbb1d167add70d03237cda3e4532d63f63f4f76eb05b85b
+  languageName: node
+  linkType: hard
+
+"@0xsequence/relayer@npm:1.1.15":
+  version: 1.1.15
+  resolution: "@0xsequence/relayer@npm:1.1.15"
+  dependencies:
+    "@0xsequence/abi": 1.1.15
+    "@0xsequence/core": 1.1.15
+    "@0xsequence/utils": 1.1.15
+  peerDependencies:
+    ethers: ">=5.5 < 6"
+  checksum: f1161c123a142c2fc50238c966fd9ef5dcf3a5eda13144fda36bb2e215711aa344f2fcfff11f294c1e1227f819d5d7e350b762c39675729253d96186bff57a20
+  languageName: node
+  linkType: hard
+
+"@0xsequence/replacer@npm:1.1.15":
+  version: 1.1.15
+  resolution: "@0xsequence/replacer@npm:1.1.15"
+  dependencies:
+    "@0xsequence/abi": 1.1.15
+    "@0xsequence/core": 1.1.15
+  peerDependencies:
+    ethers: ">=5.5"
+  checksum: ee0da587e8bcc0176438a6dab3869d67284813efabc453abd6544f046c6c9b6b4740ab3b6a368ea79342349c06fd8d739f6b820c06323668a0428998a26cd793
+  languageName: node
+  linkType: hard
+
+"@0xsequence/sessions@npm:1.1.15":
+  version: 1.1.15
+  resolution: "@0xsequence/sessions@npm:1.1.15"
+  dependencies:
+    "@0xsequence/core": 1.1.15
+    "@0xsequence/migration": 1.1.15
+    "@0xsequence/replacer": 1.1.15
+    ethers: ^5.5.2
+    idb: ^7.1.1
+  checksum: a866e006d07d31f7c072265e2e8c75222d3e442598e4c1873dec53115376d378d68989eaf11b699ad49a51ac061a81e058baedcb735b8ae9c507767c8ed40a2d
+  languageName: node
+  linkType: hard
+
+"@0xsequence/signhub@npm:1.1.15":
+  version: 1.1.15
+  resolution: "@0xsequence/signhub@npm:1.1.15"
+  dependencies:
+    ethers: ^5.5.2
+  checksum: ab0b45cd6a0fa9e9bbc2480830cd931fd52e39181435e7438542bab02aadcb10a8c76643a7d161c2ecc7d8c378349f276203bc160eccfd20a6e64d2f28a43663
+  languageName: node
+  linkType: hard
+
+"@0xsequence/utils@npm:1.1.15":
+  version: 1.1.15
+  resolution: "@0xsequence/utils@npm:1.1.15"
+  dependencies:
+    js-base64: ^3.7.2
+  peerDependencies:
+    ethers: ">=5.5 < 6"
+  checksum: f3d35cd2ba2db40adb047bfea982a03b37df45a3ef41470e97fb19fe755287ec148f0e2fd2554fbfbf9bda6951755bbd602bcaf4cd9cb6f5596c90a64c8940ca
+  languageName: node
+  linkType: hard
+
+"@0xsequence/wallet@npm:1.1.15":
+  version: 1.1.15
+  resolution: "@0xsequence/wallet@npm:1.1.15"
+  dependencies:
+    "@0xsequence/abi": 1.1.15
+    "@0xsequence/core": 1.1.15
+    "@0xsequence/network": 1.1.15
+    "@0xsequence/relayer": 1.1.15
+    "@0xsequence/signhub": 1.1.15
+    "@0xsequence/utils": 1.1.15
+  peerDependencies:
+    ethers: ">=5.5 < 6"
+  checksum: 1ff366ba7b3d34f6aa86db346ef8f637bc73e6fa66ce36010a1b70be9b6bd4cf4fe82aa46d43f3f80e24d1921ccf894e9f9554932126cb3172e730b38790b80d
+  languageName: node
+  linkType: hard
+
 "@aashutoshrathi/word-wrap@npm:^1.2.3":
   version: 1.2.6
   resolution: "@aashutoshrathi/word-wrap@npm:1.2.6"
@@ -10203,7 +10464,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ethers@npm:^5.5.3, ethers@npm:^5.6.5, ethers@npm:^5.7.1":
+"ethers@npm:^5.5.2, ethers@npm:^5.5.3, ethers@npm:^5.6.5, ethers@npm:^5.7.1, ethers@npm:^5.7.2":
   version: 5.7.2
   resolution: "ethers@npm:5.7.2"
   dependencies:
@@ -10276,6 +10537,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"eventemitter2@npm:^6.4.5":
+  version: 6.4.9
+  resolution: "eventemitter2@npm:6.4.9"
+  checksum: be59577c1e1c35509c7ba0e2624335c35bbcfd9485b8a977384c6cc6759341ea1a98d3cb9dbaa5cea4fff9b687e504504e3f9c2cc1674cf3bd8a43a7c74ea3eb
+  languageName: node
+  linkType: hard
+
 "eventemitter3@npm:4.0.4":
   version: 4.0.4
   resolution: "eventemitter3@npm:4.0.4"
@@ -10856,6 +11124,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "frontend@workspace:frontend"
   dependencies:
+    0xsequence: ^1.1.15
     "@types/react": ^18.2.21
     "@types/react-dom": ^18.2.7
     "@walletconnect/client": ^1.8.0
@@ -12003,7 +12272,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"idb@npm:^7.0.1":
+"idb@npm:^7.0.1, idb@npm:^7.1.1":
   version: 7.1.1
   resolution: "idb@npm:7.1.1"
   checksum: 1973c28d53c784b177bdef9f527ec89ec239ec7cf5fcbd987dae75a16c03f5b7dfcc8c6d3285716fd0309dd57739805390bd9f98ce23b1b7d8849a3b52de8d56
@@ -13323,6 +13592,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"js-base64@npm:^3.7.2":
+  version: 3.7.5
+  resolution: "js-base64@npm:3.7.5"
+  checksum: 67a78c8b1c47b73f1c6fba1957e9fe6fd9dc78ac93ac46cc2e43472dcb9cf150d126fb0e593192e88e0497354fa634d17d255add7cc6ee3c7b4d29870faa8e18
+  languageName: node
+  linkType: hard
+
 "js-sdsl@npm:^4.1.4":
   version: 4.4.2
   resolution: "js-sdsl@npm:4.4.2"
@@ -20451,6 +20727,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"webextension-polyfill@npm:^0.10.0":
+  version: 0.10.0
+  resolution: "webextension-polyfill@npm:0.10.0"
+  checksum: 4a59036bda571360c2c0b2fb03fe1dc244f233946bcf9a6766f677956c40fd14d270aaa69cdba95e4ac521014afbe4008bfa5959d0ac39f91c990eb206587f91
+  languageName: node
+  linkType: hard
+
 "webidl-conversions@npm:^3.0.0":
   version: 3.0.1
   resolution: "webidl-conversions@npm:3.0.1"