diff --git a/src/components/WalletManagement/ModalChooseWallet/WalletByNetwork/WalletByNetwork.tsx b/src/components/WalletManagement/ModalChooseWallet/WalletByNetwork/WalletByNetwork.tsx
index c79811cb5..1a8e6e89e 100644
--- a/src/components/WalletManagement/ModalChooseWallet/WalletByNetwork/WalletByNetwork.tsx
+++ b/src/components/WalletManagement/ModalChooseWallet/WalletByNetwork/WalletByNetwork.tsx
@@ -1,4 +1,4 @@
-import { WalletType as WalletCosmosType } from '@oraichain/oraidex-common';
+import { OraiIcon, WalletType as WalletCosmosType } from '@oraichain/oraidex-common';
 import { Button } from 'components/Button';
 import { TToastType, displayToast } from 'components/Toasts/Toast';
 import type { WalletNetwork, WalletProvider, WalletType } from 'components/WalletManagement/walletConfig';
@@ -255,11 +255,11 @@ export const WalletByNetwork = ({ walletProvider }: { walletProvider: WalletProv
 
   const renderNetworkIcons = () => {
     return networks.map((network, index) => {
-      let NetworkIcon = theme === 'dark' ? network.Icon : network.IconLight;
-      if (!NetworkIcon) NetworkIcon = DefaultIcon;
+      let NetworkIcon = theme === 'dark' ? network.chainSymbolImageUrl : network.chainSymbolImageUrl;
+      if (!NetworkIcon) NetworkIcon = OraiIcon;
       return (
         <div className={styles.networkIcon} key={network.chainName + index}>
-          <NetworkIcon width={20} height={20} />
+          <img src={NetworkIcon} alt="NetworkIcon" width={20} height={20} />
         </div>
       );
     });
diff --git a/src/helper/index.tsx b/src/helper/index.tsx
index 42e5816b6..e1afd22c4 100644
--- a/src/helper/index.tsx
+++ b/src/helper/index.tsx
@@ -8,8 +8,7 @@ import {
   MULTIPLIER,
   TRON_SCAN,
   EVM_CHAIN_ID_COMMON,
-  WalletType as WalletCosmosType,
-  chainIcons
+  WalletType as WalletCosmosType
 } from '@oraichain/oraidex-common';
 import { serializeError } from 'serialize-error';
 import { fromBech32, toBech32 } from '@cosmjs/encoding';
@@ -26,7 +25,15 @@ import { WalletsByNetwork } from 'reducer/wallet';
 import { evmChainInfos } from 'config/evmChainInfos';
 import DefaultIcon from 'assets/icons/tokens.svg?react';
 import { numberWithCommas } from './format';
-import { chainInfos, chainInfosWithIcon, cosmosChains, evmChains, flattenTokensWithIcon, network } from 'initCommon';
+import {
+  chainInfos,
+  chainInfosWithIcon,
+  cosmosChains,
+  evmChains,
+  flattenTokens,
+  flattenTokensWithIcon,
+  network
+} from 'initCommon';
 import { CosmosChainId, CustomChainInfo, NetworkChainId } from '@oraichain/common';
 
 export interface Tokens {
@@ -620,23 +627,23 @@ export function formatMoney(num) {
 
 export const getIcon = ({ isLightTheme, type, chainId, coinGeckoId, width, height }: GetIconInterface) => {
   if (type === 'token') {
-    const tokenIcon = flattenTokensWithIcon.find((tokenWithIcon) => tokenWithIcon.coinGeckoId === coinGeckoId);
+    const tokenIcon = flattenTokens.find((token) => token.coinGeckoId === coinGeckoId);
     if (tokenIcon) {
       return isLightTheme ? (
-        <tokenIcon.IconLight width={width} height={height} />
+        <img src={tokenIcon.iconLight} alt="" width={width} height={height} />
       ) : (
-        <tokenIcon.Icon width={width} height={height} />
+        <img src={tokenIcon.icon} alt="" width={width} height={height} />
       );
     }
 
     return <DefaultIcon />;
   } else {
-    const networkIcon = chainIcons.find((chain) => chain.chainId === chainId);
+    const networkIcon = chainInfos.find((chain) => chain.chainId === chainId);
     if (networkIcon) {
       return isLightTheme ? (
-        <networkIcon.IconLight width={width} height={height} />
+        <img src={networkIcon.chainSymbolImageUrl} alt="" width={width} height={height} />
       ) : (
-        <networkIcon.Icon width={width} height={height} />
+        <img src={networkIcon.chainSymbolImageUrl} alt="" width={width} height={height} />
       );
     }
 
diff --git a/src/libs/contractSingleton.ts b/src/libs/contractSingleton.ts
index 050aff6dc..c2a981af7 100644
--- a/src/libs/contractSingleton.ts
+++ b/src/libs/contractSingleton.ts
@@ -192,7 +192,7 @@ export default class SingletonOraiswapV3 {
     return this._cosmwasmClient;
   }
 
-  private constructor() { }
+  private constructor() {}
 
   public static async load(signingClient: SigningCosmWasmClient, sender: string) {
     if (!this._cosmwasmClient) {
@@ -902,7 +902,7 @@ export async function fetchPoolAprInfo(
           const token = oraichainTokens.find(
             (token) => extractAddress(token) === parseAssetInfo(incentive.reward_token)
           );
-          return token.denom.toUpperCase();
+          return token.name.toUpperCase();
         })
         .filter((incentive) => incentive !== null),
       swapFee: {
diff --git a/src/pages/Balance/TransferConvertToken/index.tsx b/src/pages/Balance/TransferConvertToken/index.tsx
index 95c85657d..2553bf122 100644
--- a/src/pages/Balance/TransferConvertToken/index.tsx
+++ b/src/pages/Balance/TransferConvertToken/index.tsx
@@ -30,8 +30,8 @@ import styles from './index.module.scss';
 import { useGetContractConfig } from 'pages/BitcoinDashboardV2/hooks';
 import ToggleSwitch from 'components/ToggleSwitch';
 import { CWBitcoinFactoryDenom } from 'helper/constants';
-import { cosmosTokens, evmChains, flattenTokens, tokenMap } from 'initCommon';
-import { NetworkChainId } from "@oraichain/common";
+import { btcChains, cosmosTokens, evmChains, flattenTokens, tokenMap } from 'initCommon';
+import { NetworkChainId } from '@oraichain/common';
 
 interface TransferConvertProps {
   token: TokenItemType;
@@ -287,13 +287,9 @@ const TransferConvertToken: FC<TransferConvertProps> = ({
                     <div style={{ display: 'flex', alignItems: 'center' }}>
                       <div className={styles.search_logo}>
                         {theme === 'light' ? (
-                          toNetwork.IconLight ? (
-                            <toNetwork.IconLight width={44} height={44} />
-                          ) : (
-                            <toNetwork.Icon width={44} height={44} />
-                          )
+                          <img width={44} height={44} src={toNetwork.chainSymbolImageUrl} alt="chainSymbolImageUrl" />
                         ) : (
-                          <toNetwork.Icon width={44} height={44} />
+                          <img width={44} height={44} src={toNetwork.chainSymbolImageUrl} alt="chainSymbolImageUrl" />
                         )}
                       </div>
                       <span className={classNames(styles.search_text, styles[theme])}>{toNetwork.chainName}</span>
@@ -324,7 +320,7 @@ const TransferConvertToken: FC<TransferConvertProps> = ({
                             {net && (
                               <div className={classNames(styles.items_chain)}>
                                 <div>
-                                  <net.Icon width={44} height={44} />
+                                  <img width={44} height={44} src={net.chainSymbolImageUrl} alt="chainSymbolImageUrl" />
                                 </div>
                                 <div className={classNames(styles.items_title, styles[theme])}>{net.chainName}</div>
                               </div>
diff --git a/src/pages/Pool-V3/components/PositionItem/index.tsx b/src/pages/Pool-V3/components/PositionItem/index.tsx
index a3b6e4030..ad4014181 100644
--- a/src/pages/Pool-V3/components/PositionItem/index.tsx
+++ b/src/pages/Pool-V3/components/PositionItem/index.tsx
@@ -527,7 +527,7 @@ const PositionItem = ({ position }) => {
                 {incentives && <div style={{ height: 8 }} />}
                 {incentives &&
                   Object.keys(incentives).map((incent, i) => {
-                    const tokenIncentive = oraichainTokensWithIcon.find((orai) =>
+                    const tokenIncentive = oraichainTokens.find((orai) =>
                       [orai.denom, orai.contractAddress].includes(incent)
                     );
 
@@ -537,7 +537,11 @@ const PositionItem = ({ position }) => {
                         <div className={classNames(styles.itemAsset, styles[theme])}>
                           <span className={classNames(styles.token, styles[theme])}></span>
                           <span className={classNames(styles.token, styles[theme])}>
-                            {theme === 'light' ? <tokenIncentive.IconLight /> : <tokenIncentive.Icon />}
+                            {theme === 'light' ? (
+                              <img src={tokenIncentive.iconLight} alt="tokenIncentive" width={20} height={20} />
+                            ) : (
+                              <img src={tokenIncentive.icon} alt="tokenIncentive" width={20} height={20} />
+                            )}
                             {toDisplay(incentives[incent].toString())} {tokenIncentive?.name}
                           </span>
                         </div>
diff --git a/src/pages/Pool-V3/components/TransactionHistory/index.tsx b/src/pages/Pool-V3/components/TransactionHistory/index.tsx
index 5dec683bf..d8cf77e5d 100644
--- a/src/pages/Pool-V3/components/TransactionHistory/index.tsx
+++ b/src/pages/Pool-V3/components/TransactionHistory/index.tsx
@@ -1,4 +1,4 @@
-import { TokenItemType, parseTokenInfoRawDenom, toDisplay } from '@oraichain/oraidex-common';
+import { OraiIcon, TokenItemType, parseTokenInfoRawDenom, toDisplay } from '@oraichain/oraidex-common';
 import { isMobile } from '@walletconnect/browser-utils';
 import LinkIcon from 'assets/icons/link.svg?react';
 import DefaultIcon from 'assets/icons/tokens.svg?react';
@@ -28,7 +28,7 @@ const TransactionHistory = ({
   const mobileMode = isMobile();
   const { data: prices } = useCoinGeckoPrices();
 
-  let [BaseTokenIcon, QuoteTokenIcon] = [null, null];
+  let [BaseTokenIcon, QuoteTokenIcon] = [OraiIcon, OraiIcon];
 
   const baseDenom = baseToken && parseTokenInfoRawDenom(baseToken);
   const quoteDenom = quoteToken && parseTokenInfoRawDenom(quoteToken);
@@ -57,20 +57,8 @@ const TransactionHistory = ({
                   const offerToken = item.offerDenom === baseDenom ? baseToken : quoteToken;
                   const returnToken = item.askDenom === quoteDenom ? quoteToken : baseToken;
 
-                  if (offerToken)
-                    BaseTokenIcon =
-                      theme === 'light' ? (
-                        <img src={offerToken.iconLight} alt="icon" />
-                      ) : (
-                        <img src={offerToken.icon} alt="icon" />
-                      );
-                  if (returnToken)
-                    QuoteTokenIcon =
-                      theme === 'light' ? (
-                        <img src={returnToken.iconLight} alt="icon" />
-                      ) : (
-                        <img src={returnToken.icon} alt="icon" />
-                      );
+                  if (offerToken) BaseTokenIcon = theme === 'light' ? offerToken.iconLight : offerToken.icon;
+                  if (returnToken) QuoteTokenIcon = theme === 'light' ? returnToken.iconLight : returnToken.icon;
 
                   const returnUSD = item.volumeUSD;
                   const feeUSD = item.commissionAmount;
@@ -107,7 +95,7 @@ const TransactionHistory = ({
                         <div className={`${styles.pay}`}>
                           <div className={styles.titleItem}>Pay amount</div>
                           <div className={styles.amount}>
-                            <div>{BaseTokenIcon}</div>
+                            <img src={BaseTokenIcon} alt="" width={20} height={20} />
                             <span>
                               {numberWithCommas(toDisplay(item.offerAmount), undefined, { maximumFractionDigits: 6 })}
                             </span>
@@ -118,7 +106,7 @@ const TransactionHistory = ({
                         <div className={`${styles.receive}`}>
                           <div className={styles.titleItem}>Receive amount</div>
                           <div className={styles.amount}>
-                            <div>{QuoteTokenIcon}</div>
+                            <img src={QuoteTokenIcon} alt="" width={20} height={20} />
                             <span>
                               {numberWithCommas(toDisplay(item.returnAmount), undefined, { maximumFractionDigits: 6 })}
                             </span>
@@ -192,7 +180,7 @@ const TransactionHistory = ({
                           </td>
                           <td className={`${styles.pay}`}>
                             <div className={styles.amount}>
-                              <div>{BaseTokenIcon}</div>
+                              <img src={BaseTokenIcon} alt="" width={20} height={20} />
                               <span>
                                 {numberWithCommas(toDisplay(item.offerAmount), undefined, { maximumFractionDigits: 6 })}
                               </span>
@@ -201,7 +189,7 @@ const TransactionHistory = ({
                           </td>
                           <td className={`${styles.receive}`}>
                             <div className={styles.amount}>
-                              <div>{QuoteTokenIcon}</div>
+                              <img src={QuoteTokenIcon} width={20} height={20} alt="" />
                               <span>
                                 {numberWithCommas(toDisplay(item.returnAmount), undefined, {
                                   maximumFractionDigits: 6
diff --git a/src/pages/Pools/PoolDetail.tsx b/src/pages/Pools/PoolDetail.tsx
index cc8db8ad2..9d990739b 100644
--- a/src/pages/Pools/PoolDetail.tsx
+++ b/src/pages/Pools/PoolDetail.tsx
@@ -1,5 +1,5 @@
 import { MulticallQueryClient } from '@oraichain/common-contracts-sdk';
-import { BTC_CONTRACT, fetchRetry, toDisplay } from '@oraichain/oraidex-common';
+import { BTC_CONTRACT, fetchRetry, OraiIcon, toDisplay } from '@oraichain/oraidex-common';
 import { useQueryClient } from '@tanstack/react-query';
 import { isMobile } from '@walletconnect/browser-utils';
 import AddIcon from 'assets/icons/Add.svg?react';
@@ -12,7 +12,7 @@ import { formatNumberKMB, numberWithCommas } from 'helper/format';
 import useConfigReducer from 'hooks/useConfigReducer';
 import useLoadTokens from 'hooks/useLoadTokens';
 import useTheme from 'hooks/useTheme';
-import { network, oraichainTokensWithIcon } from 'initCommon';
+import { network, oraichainTokens, oraichainTokensWithIcon } from 'initCommon';
 import Content from 'layouts/Content';
 import React, { useCallback, useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
@@ -98,22 +98,22 @@ const PoolDetail: React.FC = () => {
   const baseToken = (token1?.contractAddress || token1?.denom) === params.base_denom ? token1 : token2;
   const quoteToken = (token2?.contractAddress || token2?.denom) === params.base_denom ? token1 : token2;
 
-  let BaseTokenIcon = DefaultIcon;
-  let QuoteTokenIcon = DefaultIcon;
-  const BaseTokenInOraichain = oraichainTokensWithIcon.find(
+  let BaseTokenIcon = OraiIcon;
+  let QuoteTokenIcon = OraiIcon;
+  const BaseTokenInOraichain = oraichainTokens.find(
     (oraiTokens) =>
       [oraiTokens.denom, oraiTokens.contractAddress].filter(Boolean).includes(baseToken.contractAddress) ||
       [oraiTokens.denom, oraiTokens.contractAddress].filter(Boolean).includes(baseToken.denom)
   );
-  const QuoteTokenInOraichain = oraichainTokensWithIcon.find(
+  const QuoteTokenInOraichain = oraichainTokens.find(
     (oraiTokens) =>
       [oraiTokens.denom, oraiTokens.contractAddress].filter(Boolean).includes(quoteToken.contractAddress) ||
       [oraiTokens.denom, oraiTokens.contractAddress].filter(Boolean).includes(quoteToken.denom)
   );
   if (BaseTokenInOraichain)
-    BaseTokenIcon = theme === 'light' ? BaseTokenInOraichain.IconLight : BaseTokenInOraichain.Icon;
+    BaseTokenIcon = theme === 'light' ? BaseTokenInOraichain.iconLight : BaseTokenInOraichain.icon;
   if (QuoteTokenInOraichain)
-    QuoteTokenIcon = theme === 'light' ? QuoteTokenInOraichain.IconLight : QuoteTokenInOraichain.Icon;
+    QuoteTokenIcon = theme === 'light' ? QuoteTokenInOraichain.iconLight : QuoteTokenInOraichain.icon;
 
   const isInactive = baseToken?.name === 'BTC (Legacy)' || quoteToken?.name === 'BTC (Legacy)';
 
@@ -159,8 +159,8 @@ const PoolDetail: React.FC = () => {
               <BackIcon className={styles.backIcon} />
               <div className={styles.info}>
                 <div className={classNames(styles.icons, styles[theme])}>
-                  {BaseTokenIcon && <BaseTokenIcon />}
-                  {QuoteTokenIcon && <QuoteTokenIcon />}
+                  <img src={BaseTokenIcon} alt="icon" width={30} height={30} />
+                  <img src={QuoteTokenIcon} alt="icon" width={30} height={30} />
                 </div>
                 <span>
                   {baseToken?.name?.toUpperCase()} /{' '}
@@ -174,18 +174,19 @@ const PoolDetail: React.FC = () => {
               {/* TODO: remove after pool close */}
               {ratioOraiBtc
                 ? `1 ${baseToken?.name} = ${numberWithCommas(1 / (ratioOraiBtc || 1), undefined, {
-                  maximumFractionDigits: 6
-                })}`
+                    maximumFractionDigits: 6
+                  })}`
                 : `1 ${baseToken?.name} = ${numberWithCommas(priceChange?.price || 0, undefined, {
-                  maximumFractionDigits: 6
-                })}`}
+                    maximumFractionDigits: 6
+                  })}`}
               {/* TODO: remove after pool close */} {quoteToken?.name === 'BTC (Legacy)' ? 'BTC' : quoteToken?.name}
               {isMobileMode ? <br /> : <div className={styles.divider}>|</div>}1{' '}
               {quoteToken?.name === 'BTC (Legacy)' ? 'BTC' : quoteToken?.name} ={' '}
               {ratioOraiBtc
                 ? `${numberWithCommas(ratioOraiBtc || 0, undefined, { maximumFractionDigits: 6 })} ${baseToken?.name}`
-                : `${numberWithCommas(1 / (priceChange?.price || 1) || 0, undefined, { maximumFractionDigits: 6 })} ${baseToken?.name
-                }`}
+                : `${numberWithCommas(1 / (priceChange?.price || 1) || 0, undefined, { maximumFractionDigits: 6 })} ${
+                    baseToken?.name
+                  }`}
             </div>
           </div>
           <div className={styles.addPosition}>
@@ -194,7 +195,8 @@ const PoolDetail: React.FC = () => {
               onClick={(event) => {
                 event.stopPropagation();
                 setPairDenomsDeposit(
-                  `${baseToken?.contractAddress || baseToken?.denom}_${quoteToken?.contractAddress || quoteToken?.denom
+                  `${baseToken?.contractAddress || baseToken?.denom}_${
+                    quoteToken?.contractAddress || quoteToken?.denom
                   }`
                 );
               }}
@@ -217,11 +219,6 @@ const PoolDetail: React.FC = () => {
             }}
           />
         </div>
-        {/* <div className={styles.summary}>
-          <div className={styles.chart}>
-            <ChartDetailSection pair={pair} symbol={poolDetailData?.info?.symbols} />
-          </div>
-        </div> */}
 
         <Tabs
           tabKey="tab"
diff --git a/src/pages/Pools/components/Earning/Earning.tsx b/src/pages/Pools/components/Earning/Earning.tsx
index 192e77b06..0d00a3e7c 100644
--- a/src/pages/Pools/components/Earning/Earning.tsx
+++ b/src/pages/Pools/components/Earning/Earning.tsx
@@ -200,7 +200,7 @@ export const Earning = ({ onLiquidityChange }: { onLiquidityChange: () => void }
                   <div className={styles.assetEarning} key={idx}>
                     <div className={styles.title}>
                       {generateIcon(pendingReward)}
-                      <span>{pendingReward.denom.toUpperCase()} Earning</span>
+                      <span>{pendingReward.name.toUpperCase()} Earning</span>
                     </div>
                     <div className={styles.amountWrapper}>
                       <div className={styles.amount}>
@@ -219,7 +219,7 @@ export const Earning = ({ onLiquidityChange }: { onLiquidityChange: () => void }
                         <TokenBalance
                           balance={{
                             amount: pendingReward.amount,
-                            denom: pendingReward?.denom.toUpperCase(),
+                            denom: pendingReward?.name.toUpperCase(),
                             decimals: 6
                           }}
                           decimalScale={6}
diff --git a/src/pages/Pools/components/OverviewPool/OverviewPool.tsx b/src/pages/Pools/components/OverviewPool/OverviewPool.tsx
index ba7d01711..5a9b026a1 100644
--- a/src/pages/Pools/components/OverviewPool/OverviewPool.tsx
+++ b/src/pages/Pools/components/OverviewPool/OverviewPool.tsx
@@ -1,4 +1,4 @@
-import { BTC_CONTRACT, CW20_DECIMALS, fetchRetry, toDisplay } from '@oraichain/oraidex-common';
+import { BTC_CONTRACT, CW20_DECIMALS, fetchRetry, OraiIcon, toDisplay } from '@oraichain/oraidex-common';
 import DefaultIcon from 'assets/icons/tokens.svg?react';
 import classNames from 'classnames';
 import TokenBalance from 'components/TokenBalance';
@@ -27,9 +27,9 @@ export const OverviewPool = ({ poolDetailData }: { poolDetailData: PoolDetail })
   const isLight = theme === 'light';
   const IconBoots = isLight ? BootsIcon : BootsIconDark;
 
-  let [BaseTokenIcon, QuoteTokenIcon] = [DefaultIcon, DefaultIcon];
-  if (token1) BaseTokenIcon = theme === 'light' ? token1.IconLight || token1.Icon : token1.Icon;
-  if (token2) QuoteTokenIcon = theme === 'light' ? token2.IconLight || token2.Icon : token2.Icon;
+  let [BaseTokenIcon, QuoteTokenIcon] = [OraiIcon, OraiIcon];
+  if (token1) BaseTokenIcon = theme === 'light' ? token1.iconLight || token1.icon : token1.icon;
+  if (token2) QuoteTokenIcon = theme === 'light' ? token2.iconLight || token2.icon : token2.icon;
 
   const aprBoost = Number(poolDetailData.info?.aprBoost || 0).toFixed(2);
   const isApproximatelyZero = Number(aprBoost) === 0;
@@ -99,24 +99,24 @@ export const OverviewPool = ({ poolDetailData }: { poolDetailData: PoolDetail })
           {listBTCAddresses.includes(token2.denom) || listBTCAddresses.includes(token2.contractAddress) ? (
             <div className={styles.tokens}>
               <div className={classNames(styles.tokenItem, styles[theme])}>
-                {BaseTokenIcon && <BaseTokenIcon />}
+                <img src={BaseTokenIcon} alt="" />
                 <span className={styles.value}>{oraiBtcAllocation.oraiBalanceDisplay}</span>
               </div>
               <div className={classNames(styles.tokenItem, styles[theme])}>
-                {QuoteTokenIcon && <QuoteTokenIcon />}
+                <img src={QuoteTokenIcon} alt="" />
                 <span className={styles.value}>{oraiBtcAllocation.btcBalanceDisplay}</span>
               </div>
             </div>
           ) : (
             <div className={styles.tokens}>
               <div className={classNames(styles.tokenItem, styles[theme])}>
-                {BaseTokenIcon && <BaseTokenIcon />}
+                <img src={BaseTokenIcon} alt="" />
                 <span className={styles.value}>
                   {formatNumberKMB(toDisplay(pairAmountInfoData?.token1Amount || '0'), false)}
                 </span>
               </div>
               <div className={classNames(styles.tokenItem, styles[theme])}>
-                {QuoteTokenIcon && <QuoteTokenIcon />}
+                <img src={QuoteTokenIcon} alt="" />
                 <span className={styles.value}>
                   {formatNumberKMB(toDisplay(pairAmountInfoData?.token2Amount || '0'), false)}
                 </span>
diff --git a/src/pages/Pools/components/TransactionHistory/index.tsx b/src/pages/Pools/components/TransactionHistory/index.tsx
index dd609bd3f..d5ba54767 100644
--- a/src/pages/Pools/components/TransactionHistory/index.tsx
+++ b/src/pages/Pools/components/TransactionHistory/index.tsx
@@ -1,4 +1,4 @@
-import { TokenItemType, parseTokenInfoRawDenom, toDisplay } from '@oraichain/oraidex-common';
+import { OraiIcon, TokenItemType, parseTokenInfoRawDenom, toDisplay } from '@oraichain/oraidex-common';
 import { isMobile } from '@walletconnect/browser-utils';
 import LinkIcon from 'assets/icons/link.svg?react';
 import DefaultIcon from 'assets/icons/tokens.svg?react';
@@ -20,7 +20,7 @@ const TransactionHistory = ({ baseToken, quoteToken }: { baseToken: TokenItemTyp
   const mobileMode = isMobile();
   const { data: prices } = useCoinGeckoPrices();
 
-  let [BaseTokenIcon, QuoteTokenIcon] = [DefaultIcon, DefaultIcon];
+  let [BaseTokenIcon, QuoteTokenIcon] = [OraiIcon, OraiIcon];
 
   const baseDenom = baseToken && parseTokenInfoRawDenom(baseToken);
   const quoteDenom = quoteToken && parseTokenInfoRawDenom(quoteToken);
@@ -50,13 +50,12 @@ const TransactionHistory = ({ baseToken, quoteToken }: { baseToken: TokenItemTyp
                   const returnToken = item.askDenom === quoteDenom ? quoteToken : baseToken;
 
                   if (offerToken)
-                    BaseTokenIcon = theme === 'light' ? offerToken.IconLight || offerToken.Icon : offerToken.Icon;
+                    BaseTokenIcon = theme === 'light' ? offerToken.iconLight || offerToken.icon : offerToken.icon;
                   if (returnToken)
-                    QuoteTokenIcon = theme === 'light' ? returnToken.IconLight || returnToken.Icon : returnToken.Icon;
+                    QuoteTokenIcon = theme === 'light' ? returnToken.iconLight || returnToken.icon : returnToken.icon;
 
                   const returnUSD = getUsd(item.returnAmount, returnToken, prices);
                   const feeUSD = getUsd(item.commissionAmount, returnToken, prices);
-
                   return (
                     <div className={styles.item} key={index}>
                       <div className={styles.info}>
@@ -109,7 +108,7 @@ const TransactionHistory = ({ baseToken, quoteToken }: { baseToken: TokenItemTyp
                           <div className={styles.titleItem}>Pay amount</div>
                           <div className={styles.amount}>
                             <div>
-                              <BaseTokenIcon />
+                              <img width={20} height={20} src={BaseTokenIcon} alt="" />
                             </div>
                             <span>
                               {numberWithCommas(toDisplay(item.offerAmount), undefined, { maximumFractionDigits: 6 })}
@@ -122,7 +121,7 @@ const TransactionHistory = ({ baseToken, quoteToken }: { baseToken: TokenItemTyp
                           <div className={styles.titleItem}>Receive amount</div>
                           <div className={styles.amount}>
                             <div>
-                              <QuoteTokenIcon />
+                              <img width={20} height={20} src={QuoteTokenIcon} alt="" />
                             </div>
                             <span>
                               {numberWithCommas(toDisplay(item.returnAmount), undefined, { maximumFractionDigits: 6 })}
@@ -169,10 +168,10 @@ const TransactionHistory = ({ baseToken, quoteToken }: { baseToken: TokenItemTyp
                       const returnToken = item.askDenom === quoteDenom ? quoteToken : baseToken;
 
                       if (offerToken)
-                        BaseTokenIcon = theme === 'light' ? offerToken.IconLight || offerToken.Icon : offerToken.Icon;
+                        BaseTokenIcon = theme === 'light' ? offerToken.iconLight || offerToken.icon : offerToken.icon;
                       if (returnToken)
                         QuoteTokenIcon =
-                          theme === 'light' ? returnToken.IconLight || returnToken.Icon : returnToken.Icon;
+                          theme === 'light' ? returnToken.iconLight || returnToken.icon : returnToken.icon;
 
                       const returnUSD = getUsd(item.returnAmount, returnToken, prices);
                       const feeUSD = getUsd(item.commissionAmount, returnToken, prices);
@@ -198,7 +197,7 @@ const TransactionHistory = ({ baseToken, quoteToken }: { baseToken: TokenItemTyp
                           <td className={`${styles.pay}`}>
                             <div className={styles.amount}>
                               <div>
-                                <BaseTokenIcon />
+                                <img src={BaseTokenIcon} width={20} height={20} alt="" />
                               </div>
                               <span>
                                 {numberWithCommas(toDisplay(item.offerAmount), undefined, { maximumFractionDigits: 6 })}
@@ -214,7 +213,7 @@ const TransactionHistory = ({ baseToken, quoteToken }: { baseToken: TokenItemTyp
                           <td className={`${styles.receive}`}>
                             <div className={styles.amount}>
                               <div>
-                                <QuoteTokenIcon />
+                                <img src={QuoteTokenIcon} width={20} height={20} alt="" />
                               </div>
                               <span>
                                 {numberWithCommas(toDisplay(item.returnAmount), undefined, {
diff --git a/src/pages/Pools/index.module.scss b/src/pages/Pools/index.module.scss
index 95a5bbd7d..746b763be 100644
--- a/src/pages/Pools/index.module.scss
+++ b/src/pages/Pools/index.module.scss
@@ -60,13 +60,13 @@
     &_right {
       position: relative;
       right: 10px;
-      width: 44px;
-      height: 44px;
+      width: 32px;
+      height: 32px;
     }
 
     &_left {
-      width: 44px;
-      height: 44px;
+      width: 32px;
+      height: 32px;
     }
   }
 
@@ -74,4 +74,4 @@
     font-weight: 500;
     font-size: 16px;
   }
-}
+}
\ No newline at end of file
diff --git a/src/pages/Pools/index.tsx b/src/pages/Pools/index.tsx
index 733a35459..3e67c2f5d 100644
--- a/src/pages/Pools/index.tsx
+++ b/src/pages/Pools/index.tsx
@@ -1,4 +1,4 @@
-import { CW20_DECIMALS, TokenItemType, toDisplay } from '@oraichain/oraidex-common';
+import { CW20_DECIMALS, OraiIcon, TokenItemType, toDisplay } from '@oraichain/oraidex-common';
 import { isMobile } from '@walletconnect/browser-utils';
 import DefaultIcon from 'assets/icons/tokens.svg?react';
 import useConfigReducer from 'hooks/useConfigReducer';
@@ -109,10 +109,10 @@ const Pools: React.FC<{}> = () => {
     });
 
   const generateIcon = (baseToken: TokenItemType, quoteToken: TokenItemType): JSX.Element => {
-    let [BaseTokenIcon, QuoteTokenIcon] = [DefaultIcon, DefaultIcon];
+    let [BaseTokenIcon, QuoteTokenIcon] = [OraiIcon, OraiIcon];
 
-    if (baseToken) BaseTokenIcon = theme === 'light' ? baseToken.IconLight : baseToken.Icon;
-    if (quoteToken) QuoteTokenIcon = theme === 'light' ? quoteToken.IconLight : quoteToken.Icon;
+    if (baseToken) BaseTokenIcon = theme === 'light' ? baseToken.iconLight : baseToken.icon;
+    if (quoteToken) QuoteTokenIcon = theme === 'light' ? quoteToken.iconLight : quoteToken.icon;
 
     // TODO: hardcode reverse logo for ORAI/INJ,USDC/ORAIX, need to update later
     const isReverseLogo = reverseSymbolArr.some(
@@ -121,16 +121,16 @@ const Pools: React.FC<{}> = () => {
     if (isReverseLogo) {
       return (
         <div className={styles.symbols}>
-          <QuoteTokenIcon className={styles.symbols_logo_left} />
-          <BaseTokenIcon className={styles.symbols_logo_right} />
+          <img width={32} height={32} src={QuoteTokenIcon} className={styles.symbols_logo_left} alt="" />
+          <img width={32} height={32} src={BaseTokenIcon} className={styles.symbols_logo_right} alt="" />
         </div>
       );
     }
 
     return (
       <div className={styles.symbols}>
-        <BaseTokenIcon className={styles.symbols_logo_left} />
-        <QuoteTokenIcon className={styles.symbols_logo_right} />
+        <img width={32} height={32} src={BaseTokenIcon} className={styles.symbols_logo_left} alt="" />
+        <img width={32} height={32} src={QuoteTokenIcon} className={styles.symbols_logo_right} alt="" />
       </div>
     );
   };