diff --git a/.release/.changeset/serious-cars-worry.md b/.release/.changeset/serious-cars-worry.md
new file mode 100644
index 00000000..910f2f9c
--- /dev/null
+++ b/.release/.changeset/serious-cars-worry.md
@@ -0,0 +1,5 @@
+---
+"@bnb-chain/canonical-bridge-widget": patch
+---
+
+Add more token info to token element
diff --git a/apps/canonical-bridge-ui/next-env.d.ts b/apps/canonical-bridge-ui/next-env.d.ts
index a4a7b3f5..4f11a03d 100644
--- a/apps/canonical-bridge-ui/next-env.d.ts
+++ b/apps/canonical-bridge-ui/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/apps/canonical-bridge-ui/package.json b/apps/canonical-bridge-ui/package.json
index 01771be5..b9c0ef73 100644
--- a/apps/canonical-bridge-ui/package.json
+++ b/apps/canonical-bridge-ui/package.json
@@ -51,7 +51,6 @@
     "eslint-config-next": "14.2.3",
     "lint-staged": "~13.0.3",
     "prettier": "~2.7.1",
-    "supports-color": "8.1.1",
     "typescript": "5.5.4"
   },
   "lint-staged": {
diff --git a/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/ChooseTokenModal.tsx b/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/ChooseTokenModal.tsx
index af62c3ca..778f48de 100644
--- a/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/ChooseTokenModal.tsx
+++ b/packages/canonical-bridge-widget/src/modules/aggregator/components/SelectModal/ChooseTokenModal.tsx
@@ -110,6 +110,9 @@ export function ChooseTokenModal(props: ChooseTokenModalProps) {
                 isActive={isActive}
                 isDisabled={isDisabled}
                 data-address={item.address}
+                data-name={item.name}
+                data-symbol={item.symbol}
+                data-display-symbol={item.displaySymbol}
                 incompatibleTooltip={formatMessage({
                   id: 'select-modal.token.incompatible.tooltip',
                 })}
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/SelectButton/TokenSelectButton.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/SelectButton/TokenSelectButton.tsx
index aea43e14..2e61c386 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/SelectButton/TokenSelectButton.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/SelectButton/TokenSelectButton.tsx
@@ -43,7 +43,7 @@ export function TokenSelectButton(props: SelectButtonProps) {
       <Flex gap={'8px'} alignItems={'center'} position={'relative'} overflow="hidden">
         <TokenInfoTooltip
           chainType={fromChain?.chainType}
-          tokenAddress={token?.address ?? ''}
+          tokenInfo={token}
           tokenLinkUrl={tokenUrl}
           offset={[-20, 6]}
         >
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/RouteTitle.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/RouteTitle.tsx
index 9aceabc9..d14b494a 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/RouteTitle.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/RouteTitle.tsx
@@ -53,7 +53,7 @@ export const RouteTitle = ({
       {toTokenInfo && hoverToShowTokenAddress && (
         <TokenInfoTooltip
           chainType={toChain?.chainType}
-          tokenAddress={toTokenInfo.address}
+          tokenInfo={toTokenInfo}
           tokenLinkUrl={tokenUrl}
           isReceiveArea={true}
         >
@@ -125,6 +125,9 @@ export const ToTokenInfo = React.forwardRef(
             justifyContent="flex-start"
             className="bccb-widget-route-token-to-address"
             data-address={toTokenInfo.address}
+            data-name={toTokenInfo.name}
+            data-symbol={toTokenInfo.symbol}
+            data-display-symbol={toTokenInfo.displaySymbol}
           >
             <Link
               href={tokenUrl}
diff --git a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/TokenInfoTooltip.tsx b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/TokenInfoTooltip.tsx
index 47b7f5fd..a5c460af 100644
--- a/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/TokenInfoTooltip.tsx
+++ b/packages/canonical-bridge-widget/src/modules/transfer/components/TransferOverview/RouteInfo/TokenInfoTooltip.tsx
@@ -15,11 +15,11 @@ import {
 import { useMemo } from 'react';
 
 import { isNativeToken } from '@/core/utils/address.ts';
-import { ChainType } from '@/modules/aggregator';
+import { ChainType, IBridgeTokenBaseInfo } from '@/modules/aggregator';
 
 interface TokenTooltipProps extends PopoverProps {
   tokenLinkUrl: string;
-  tokenAddress: string;
+  tokenInfo?: IBridgeTokenBaseInfo;
   children: React.ReactNode;
   isReceiveArea?: boolean;
   chainType?: ChainType;
@@ -27,12 +27,14 @@ interface TokenTooltipProps extends PopoverProps {
 
 export const TokenInfoTooltip = ({
   children,
-  tokenAddress,
+  tokenInfo,
   tokenLinkUrl,
   isReceiveArea,
   chainType = 'evm',
   ...restProps
 }: TokenTooltipProps) => {
+  const tokenAddress = tokenInfo?.address ?? '';
+
   const theme = useTheme();
   const nativeToken = useMemo(
     () => isNativeToken(tokenAddress, chainType),
@@ -42,7 +44,10 @@ export const TokenInfoTooltip = ({
   return (
     <Flex
       className="bccb-widget-route-token-tooltip"
-      data-address={tokenAddress}
+      data-address={tokenInfo?.address}
+      data-name={tokenInfo?.name}
+      data-symbol={tokenInfo?.symbol}
+      data-display-symbol={tokenInfo?.displaySymbol}
       display={'inline-block'}
       w={'auto'}
     >