diff --git a/packages/web/src/components/common/line-graph/LineGraph.tsx b/packages/web/src/components/common/line-graph/LineGraph.tsx
index 83e3f8acf..d9760cdf0 100644
--- a/packages/web/src/components/common/line-graph/LineGraph.tsx
+++ b/packages/web/src/components/common/line-graph/LineGraph.tsx
@@ -222,7 +222,7 @@ const LineGraph: React.FC<LineGraphProps> = ({
     const minMaxGap = (() => {
       if (maxValueBigNumber.minus(minValueBigNumber).isEqualTo(0)) return maxValueBigNumber.multipliedBy(gapRatio);
 
-      if (minValueBigNumber.isLessThan(0)) return maxValueBigNumber;
+      if (minValueBigNumber.isLessThan(0) || hasOnlyOnePoint) return maxValueBigNumber;
 
       return maxValueBigNumber.minus(minValueBigNumber);
     })();
@@ -354,6 +354,20 @@ const LineGraph: React.FC<LineGraphProps> = ({
         .toNumber();
     };
 
+    // if (hasOnlyOnePoint) {
+    // const onlySingleData = mappedDatas[0];
+
+    // const x = BigNumber(time - minTime)
+    // .multipliedBy((width) - baseLineNumberWidthComputation)
+    // .dividedBy(maxTime - minTime)
+    // .toNumber(); 
+
+    // setPoints([{
+    //   x: optimizeTime(onlySingleData.time, width) + baseLineNumberWidthComputation,
+    //   y: optimizeValue(onlySingleData.value, height),
+    // }]);
+    // }
+
     const points = mappedDatas.map<Point>(data => ({
       x: optimizeTime(data.time, width) + baseLineNumberWidthComputation,
       y: optimizeValue(data.value, height),
@@ -516,6 +530,8 @@ const LineGraph: React.FC<LineGraphProps> = ({
     return datas[currentPointIndex]?.time && datas[currentPointIndex]?.value;
   }, [currentPointIndex, datas]);
 
+  const hasOnlyOnePoint = useMemo(() => datas.length === 1, [datas.length]);
+
   return (
     <LineGraphWrapper
       className={className}
diff --git a/packages/web/src/components/increase/increase-amount-info/IncreaseAmountInfo.tsx b/packages/web/src/components/increase/increase-amount-info/IncreaseAmountInfo.tsx
index edad7bcb4..d95185d0f 100644
--- a/packages/web/src/components/increase/increase-amount-info/IncreaseAmountInfo.tsx
+++ b/packages/web/src/components/increase/increase-amount-info/IncreaseAmountInfo.tsx
@@ -43,7 +43,7 @@ const IncreaseAmountInfo: React.FC<IncreaseAmountInfoProps> = ({
             usdPrice={tokenB.usdPrice}
           />
         )}
-        {(!isDepositTokenA || !isDepositTokenA) && <div className="icon-wrapper">
+        {(!isDepositTokenA || !isDepositTokenB) && <div className="icon-wrapper">
           <IconAdd className="icon-add" />
         </div>}
       </div>
diff --git a/packages/web/src/components/pool/my-liquidity-content/MyLiquidityContent.tsx b/packages/web/src/components/pool/my-liquidity-content/MyLiquidityContent.tsx
index 9f6e5538f..257364ed0 100644
--- a/packages/web/src/components/pool/my-liquidity-content/MyLiquidityContent.tsx
+++ b/packages/web/src/components/pool/my-liquidity-content/MyLiquidityContent.tsx
@@ -10,7 +10,7 @@ import { RewardType } from "@constants/option.constant";
 import { PositionClaimInfo } from "@models/position/info/position-claim-info";
 import { SkeletonEarnDetailWrapper } from "@layouts/pool-layout/PoolLayout.styles";
 import { pulseSkeletonStyle } from "@constants/skeleton.constant";
-import { convertToKMB } from "@utils/stake-position-utils";
+import { convertToKMB, formatUsdNumber } from "@utils/stake-position-utils";
 import LoadingSpinner from "@components/common/loading-spinner/LoadingSpinner";
 import { MyPositionClaimContent } from "../my-position-card/MyPositionCardClaimContent";
 import MissingLogo from "@components/common/missing-logo/MissingLogo";
@@ -72,6 +72,7 @@ const MyLiquidityContent: React.FC<MyLiquidityContentProps> = ({
       SWAP_FEE: {},
       INTERNAL: {},
       EXTERNAL: {},
+      // Not use any more
       STAKING: {},
     };
     positions
@@ -115,6 +116,7 @@ const MyLiquidityContent: React.FC<MyLiquidityContentProps> = ({
       SWAP_FEE: Object.values(infoMap["SWAP_FEE"]),
       INTERNAL: Object.values(infoMap["INTERNAL"]),
       EXTERNAL: Object.values(infoMap["EXTERNAL"]),
+      // Not use any more
       STAKING: Object.values(infoMap["STAKING"]),
     };
   }, [isDisplay, positions, tokenPrices]);
@@ -131,6 +133,7 @@ const MyLiquidityContent: React.FC<MyLiquidityContentProps> = ({
       SWAP_FEE: {},
       INTERNAL: {},
       EXTERNAL: {},
+      // Not use any more
       STAKING: {},
     };
     positions
@@ -144,26 +147,35 @@ const MyLiquidityContent: React.FC<MyLiquidityContentProps> = ({
       .forEach(rewardInfo => {
         const existReward =
           infoMap[rewardInfo.rewardType]?.[rewardInfo.token.priceID];
+        const tokenPrice = Number(tokenPrices[rewardInfo.token.priceID] ?? 0);
         if (existReward) {
           infoMap[rewardInfo.rewardType][rewardInfo.token.priceID] = {
             ...existReward,
             accuReward1D: existReward.accuReward1D + rewardInfo.accuReward1D,
             apr: existReward.apr + rewardInfo.apr,
+            accuReward1DPrice: (existReward.accuReward1D * tokenPrice) + (rewardInfo.accuReward1D * tokenPrice),
           };
         } else {
-          infoMap[rewardInfo.rewardType][rewardInfo.token.priceID] = rewardInfo;
+          infoMap[rewardInfo.rewardType][rewardInfo.token.priceID] = {
+            ...rewardInfo,
+            accuReward1DPrice: (rewardInfo.accuReward1D * tokenPrice)
+          };
         }
       });
     return {
       SWAP_FEE: Object.values(infoMap["SWAP_FEE"]),
       INTERNAL: Object.values(infoMap["INTERNAL"]),
       EXTERNAL: Object.values(infoMap["EXTERNAL"]),
+      // Not use any more
       STAKING: Object.values(infoMap["STAKING"]),
     };
   }, [isDisplay, positions, tokenPrices]);
 
   const isShowRewardInfoTooltip = useMemo(() => {
-    return aprRewardInfo !== null && (aprRewardInfo?.EXTERNAL.length !== 0 || aprRewardInfo?.INTERNAL.length !== 0 || aprRewardInfo?.SWAP_FEE.length !== 0);
+    return aprRewardInfo !== null
+      && (aprRewardInfo?.EXTERNAL.length !== 0 ||
+        aprRewardInfo?.INTERNAL.length !== 0 ||
+        aprRewardInfo?.SWAP_FEE.length !== 0);
   }, [aprRewardInfo]);
 
   const dailyEarning = useMemo(() => {
@@ -194,7 +206,8 @@ const MyLiquidityContent: React.FC<MyLiquidityContentProps> = ({
       .map(reward => ({
         token: reward.rewardToken,
         rewardType: reward.rewardType,
-        balance: makeDisplayTokenAmount(reward.rewardToken, reward.totalAmount) || 0,
+        balance: makeDisplayTokenAmount(reward.rewardToken, reward.totalAmount) ||
+          0,
         balanceUSD:
           makeDisplayTokenAmount(
             reward.rewardToken,
@@ -302,12 +315,11 @@ const MyLiquidityContent: React.FC<MyLiquidityContentProps> = ({
   ]);
 
   const feeDaily = useMemo(() => {
-    // const temp = claimableRewardInfo?.SWAP_FEE;
-    // const sumUSD =
-    //   temp?.reduce((accum, current) => accum + current.balance, 0) || 0;
-    // return formatUsdNumber(`${sumUSD}`, 2, true);
-    return "$0";
-  }, []);
+    const temp = aprRewardInfo?.SWAP_FEE;
+    const sumUSD =
+      temp?.reduce((accum, current) => accum + current.accuReward1DPrice, 0) || 0;
+    return formatUsdNumber(`${sumUSD}`, 2, true);
+  }, [aprRewardInfo?.SWAP_FEE]);
 
   const feeClaim = useMemo(() => {
     const temp = claimableRewardInfo?.SWAP_FEE;
@@ -319,7 +331,7 @@ const MyLiquidityContent: React.FC<MyLiquidityContentProps> = ({
   const logoDaily = useMemo(() => {
     const temp = claimableRewardInfo?.SWAP_FEE;
     return temp?.map(item => getGnotPath(item.token).logoURI) || [];
-  }, [claimableRewardInfo]);
+  }, [claimableRewardInfo?.SWAP_FEE]);
 
   const logoReward = useMemo(() => {
     const temp = claimableRewardInfo?.INTERNAL;
@@ -329,15 +341,12 @@ const MyLiquidityContent: React.FC<MyLiquidityContentProps> = ({
   }, [claimableRewardInfo, getGnotPath, positionData]);
 
   const rewardDaily = useMemo(() => {
-    const sumRewardDaily = positions.reduce((positionAcc, positionCurrent) => {
-      const currentPositionDailyReward = positionCurrent.reward.reduce((rewardAcc, rewardCurrent) => {
-        return rewardAcc + Number(rewardCurrent.accuReward1D);
-      }, 0);
+    const temp = [...(aprRewardInfo?.INTERNAL ?? []), ...(aprRewardInfo?.EXTERNAL ?? [])];
+    const sumUSD =
+      temp?.reduce((accum, current) => accum + current.accuReward1DPrice, 0) || 0;
+    return formatUsdNumber(`${sumUSD}`, 2, true);
 
-      return positionAcc + currentPositionDailyReward;
-    }, 0);
-    return toUnitFormat(`${sumRewardDaily}`, true, true);
-  }, [positions]);
+  }, [aprRewardInfo?.EXTERNAL, aprRewardInfo?.INTERNAL]);
 
   const rewardClaim = useMemo(() => {
     const temp = [...(claimableRewardInfo?.EXTERNAL ?? []), ...(claimableRewardInfo?.INTERNAL ?? [])];
@@ -413,13 +422,12 @@ const MyLiquidityContent: React.FC<MyLiquidityContentProps> = ({
       </section>
       <section>
         <h4>Total Daily Earnings</h4>
-        {!loading && isShowRewardInfoTooltip ? (
+        {(!loading && isShowRewardInfoTooltip) ? (
           <Tooltip
             placement="top"
             FloatingContent={
               <div>
-                {/* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */}
-                <MyPositionAprContent rewardInfo={aprRewardInfo!} />
+                {aprRewardInfo && <MyPositionAprContent rewardInfo={aprRewardInfo} />}
               </div>
             }
           >
diff --git a/packages/web/src/components/pool/my-position-card/MyPositionCard.tsx b/packages/web/src/components/pool/my-position-card/MyPositionCard.tsx
index 495bb2539..aafd6a5a3 100644
--- a/packages/web/src/components/pool/my-position-card/MyPositionCard.tsx
+++ b/packages/web/src/components/pool/my-position-card/MyPositionCard.tsx
@@ -211,6 +211,7 @@ const MyPositionCard: React.FC<MyPositionCardProps> = ({
       },
       {
         SWAP_FEE: [],
+        // Not use any more
         STAKING: [],
         EXTERNAL: [],
         INTERNAL: [],
@@ -273,6 +274,7 @@ const MyPositionCard: React.FC<MyPositionCardProps> = ({
               token: current.rewardToken,
               rewardType: current.rewardType,
               accuReward1D: Number(current.accuReward1D),
+              accuReward1DPrice: Number(current.accuReward1D),
               apr: Number(current.apr),
             });
           }
@@ -280,13 +282,16 @@ const MyPositionCard: React.FC<MyPositionCardProps> = ({
         },
         {
           SWAP_FEE: [],
+          // NOt use anymore
           STAKING: [],
           EXTERNAL: [],
           INTERNAL: [],
         },
       );
       return aprRewardInfo;
-    }, []);
+    }, [position.reward]);
+
+
 
   const stringPrice = useMemo(() => {
     const price = tickToPriceStr(position?.pool?.currentTick, 40);
@@ -477,6 +482,17 @@ const MyPositionCard: React.FC<MyPositionCardProps> = ({
     return isAllReserveZeroBin40 && isAllReserveZeroBin;
   }, [position.pool.bins, position.pool.bins40]);
 
+  const isShowRewardInfoTooltip = useMemo(() => {
+    return aprRewardInfo !== null
+      && (aprRewardInfo?.EXTERNAL.length !== 0
+        || aprRewardInfo?.INTERNAL.length !== 0
+        || aprRewardInfo?.SWAP_FEE.length !== 0);
+  }, [aprRewardInfo]);
+
+  const isShowTotalRewardInfo = useMemo(() => {
+    return totalRewardInfo && (totalRewardInfo?.EXTERNAL.length !== 0 || totalRewardInfo?.INTERNAL.length !== 0 || totalRewardInfo?.SWAP_FEE.length !== 0);
+  }, [totalRewardInfo]);
+
   return (
     <>
       <PositionCardAnchor id={`${position.id}`} />
@@ -645,7 +661,7 @@ const MyPositionCard: React.FC<MyPositionCardProps> = ({
           </div>
           <div className="info-box">
             <span className="symbol-text">Daily Earnings</span>
-            {!isClosed && aprRewardInfo && !loading ? (
+            {!isClosed && isShowRewardInfoTooltip && !loading ? (
               <Tooltip
                 placement="top"
                 FloatingContent={
@@ -671,12 +687,12 @@ const MyPositionCard: React.FC<MyPositionCardProps> = ({
           </div>
           <div className="info-box">
             <span className="symbol-text">Claimable Rewards</span>
-            {!isClosed && !loading && totalRewardInfo ? (
+            {!isClosed && !loading && isShowTotalRewardInfo ? (
               <Tooltip
                 placement="top"
                 FloatingContent={
                   <div>
-                    <MyPositionRewardContent rewardInfo={totalRewardInfo} />
+                    {totalRewardInfo && <MyPositionRewardContent rewardInfo={totalRewardInfo} />}
                   </div>
                 }
               >
@@ -770,13 +786,9 @@ const MyPositionCard: React.FC<MyPositionCardProps> = ({
             <div className="convert-price">
               <div>
                 1
-                {(!isSwap ? tokenA : tokenB)?.symbol} =& nbsp;
-                <ExchangeRate value={minPriceStr} /> & nbsp;
-                {(!isSwap ? tokenB : tokenA)?.symbol}& nbsp; (
-                <span className={startClass}>
-                  {!isSwap ? minTickLabel : maxTickLabel}
-                </span>
-                ) & nbsp;
+                {(!isSwap ? tokenA : tokenB)?.symbol} =&nbsp;
+                <ExchangeRate value={minPriceStr} />&nbsp;
+                {(!isSwap ? tokenB : tokenA)?.symbol}&nbsp;(<span className={startClass}>{!isSwap ? minTickLabel : maxTickLabel}</span>)&nbsp;
                 <Tooltip
                   placement="top"
                   FloatingContent={
@@ -789,14 +801,11 @@ const MyPositionCard: React.FC<MyPositionCardProps> = ({
                 >
                   <IconInfo />
                 </Tooltip>
-                & nbsp;
+                &nbsp;
               </div >
               <div>
-                ~& nbsp;
-                <ExchangeRate value={maxPriceStr} /> & nbsp; {(!isSwap ? tokenB : tokenA)?.symbol}& nbsp;
-                (<span className={endClass}>
-                  {!isSwap ? maxTickLabel : minTickLabel}
-                </span>)&nbsp;
+                ~&nbsp;
+                <ExchangeRate value={maxPriceStr} /> &nbsp;{(!isSwap ? tokenB : tokenA)?.symbol}&nbsp;(<span className={endClass}>{!isSwap ? maxTickLabel : minTickLabel}</span>)&nbsp;
                 <Tooltip
                   placement="top"
                   FloatingContent={
diff --git a/packages/web/src/components/pool/my-position-card/MyPositionCardAprContent.tsx b/packages/web/src/components/pool/my-position-card/MyPositionCardAprContent.tsx
index f9dd05a2b..355def3b4 100644
--- a/packages/web/src/components/pool/my-position-card/MyPositionCardAprContent.tsx
+++ b/packages/web/src/components/pool/my-position-card/MyPositionCardAprContent.tsx
@@ -19,7 +19,7 @@ export const MyPositionAprContent: React.FC<MyPositionAprContentProps> = ({ rewa
     return rewardInfo.SWAP_FEE;
   }, [rewardInfo.SWAP_FEE]);
 
-  const stakingRewards = useMemo(() => {
+  const internalRewards = useMemo(() => {
     if (rewardInfo.INTERNAL.length === 0) {
       return null;
     }
@@ -60,14 +60,14 @@ export const MyPositionAprContent: React.FC<MyPositionAprContentProps> = ({ rewa
           ))}
         </React.Fragment>
       )}
-      {stakingRewards && <div className="divider" />}
-      {stakingRewards && (
+      {internalRewards && <div className="divider" />}
+      {internalRewards && (
         <React.Fragment>
           <div className="list">
             <span className="title">Staking Rewards</span>
             <span className="title"></span>
           </div>
-          {stakingRewards.map((reward, index) => (
+          {internalRewards.map((reward, index) => (
             <div key={index} className="list">
               <div className="coin-info">
                 <img
diff --git a/packages/web/src/components/pool/my-position-card/MyPositionCardClaimContent.tsx b/packages/web/src/components/pool/my-position-card/MyPositionCardClaimContent.tsx
index d7d99ee37..f572534d9 100644
--- a/packages/web/src/components/pool/my-position-card/MyPositionCardClaimContent.tsx
+++ b/packages/web/src/components/pool/my-position-card/MyPositionCardClaimContent.tsx
@@ -30,10 +30,10 @@ export const MyPositionClaimContent: React.FC<MyPositionClaimContentProps> = ({
     if (!rewardInfo) {
       return null;
     }
-    if (rewardInfo.STAKING.length === 0) {
+    if (rewardInfo.INTERNAL.length === 0) {
       return null;
     }
-    return rewardInfo.STAKING;
+    return rewardInfo.INTERNAL;
   }, [rewardInfo]);
 
   const externalRewards = useMemo(() => {
@@ -57,11 +57,11 @@ export const MyPositionClaimContent: React.FC<MyPositionClaimContentProps> = ({
     return toUnitFormat(sumUSD, true);
   }, [rewardInfo]);
 
-  const stakingRewardUSD = useMemo(() => {
+  const internalRewardUSD = useMemo(() => {
     if (!rewardInfo) {
       return 0;
     }
-    const sumUSD = rewardInfo.STAKING.reduce(
+    const sumUSD = rewardInfo.INTERNAL.reduce(
       (accum, current) => accum + current.claimableUSD,
       0,
     );
@@ -114,7 +114,7 @@ export const MyPositionClaimContent: React.FC<MyPositionClaimContentProps> = ({
         <React.Fragment>
           <div className="list">
             <span className="title">Internal Rewards</span>
-            <span className="title">{stakingRewardUSD}</span>
+            <span className="title">{internalRewardUSD}</span>
           </div>
           {stakingRewards.map((reward, index) => (
             <div key={index} className="list">
diff --git a/packages/web/src/components/pool/pool-pair-info-content/PoolPairInfoContent.tsx b/packages/web/src/components/pool/pool-pair-info-content/PoolPairInfoContent.tsx
index 160d03e58..8b13acb5d 100644
--- a/packages/web/src/components/pool/pool-pair-info-content/PoolPairInfoContent.tsx
+++ b/packages/web/src/components/pool/pool-pair-info-content/PoolPairInfoContent.tsx
@@ -117,7 +117,7 @@ const PoolPairInfoContent: React.FC<PoolPairInfoContentProps> = ({
   }, [pool?.rewardTokens]);
 
   const isHideBar = useMemo(() => {
-    const isAllReserveZeroBin40 = pool.bins40.every(item => Number(item.reserveTokenA) === 0 && Number(item.reserveTokenB) === 0);
+    const isAllReserveZeroBin40 = pool.bins40?.every(item => Number(item.reserveTokenA) === 0 && Number(item.reserveTokenB) === 0);
     const isAllReserveZeroBin = pool.bins.every(item => Number(item.reserveTokenA) === 0 && Number(item.reserveTokenB) === 0);
 
     return (isAllReserveZeroBin40 && isAllReserveZeroBin);
diff --git a/packages/web/src/components/swap/confirm-swap-modal/ConfirmSwapModal.styles.ts b/packages/web/src/components/swap/confirm-swap-modal/ConfirmSwapModal.styles.ts
index 95086a09c..eac31e45d 100644
--- a/packages/web/src/components/swap/confirm-swap-modal/ConfirmSwapModal.styles.ts
+++ b/packages/web/src/components/swap/confirm-swap-modal/ConfirmSwapModal.styles.ts
@@ -196,6 +196,9 @@ export const ConfirmModal = styled.div`
               ${fonts.p2};
             }
             color: ${({ theme }) => theme.color.text10};
+            & > div {
+              display: inline-block
+            }
           }
           .exchange-price {
             ${fonts.body12};
@@ -358,9 +361,6 @@ export const ConfirmModal = styled.div`
   }
   .modal-body-loading {
     gap: 24px;
-    .view-transaction {
-      padding-bottom: 36px;
-    }
     ${media.mobile} {
       gap: 12px;
       .view-transaction {
@@ -372,6 +372,7 @@ export const ConfirmModal = styled.div`
           height: 60px;
         }
       }
+    }
   }
 `;
 
diff --git a/packages/web/src/components/swap/confirm-swap-modal/ConfirmSwapModal.tsx b/packages/web/src/components/swap/confirm-swap-modal/ConfirmSwapModal.tsx
index ea1665e3b..bbd6c2247 100644
--- a/packages/web/src/components/swap/confirm-swap-modal/ConfirmSwapModal.tsx
+++ b/packages/web/src/components/swap/confirm-swap-modal/ConfirmSwapModal.tsx
@@ -37,12 +37,7 @@ const ConfirmSwapModal: React.FC<ConfirmSwapModalProps> = ({
 }) => {
   const swapRateDescription = useMemo(() => {
     const { tokenA, tokenB, swapRate } = swapSummaryInfo;
-    return (
-      <>
-        1 {tokenA.symbol} = <ExchangeRate value={convertSwapRate(swapRate)} />{" "}
-        {tokenB.symbol}
-      </>
-    );
+    return <>1&nbsp;{tokenA.symbol}&nbsp;=&nbsp;<ExchangeRate value={convertSwapRate(swapRate)} />&nbsp;{tokenB.symbol}</>;
   }, [swapSummaryInfo]);
 
   const swapRateUSDStr = useMemo(() => {
@@ -83,13 +78,12 @@ const ConfirmSwapModal: React.FC<ConfirmSwapModalProps> = ({
   return (
     <ConfirmModal>
       <div
-        className={`modal-body ${
-          swapResult === null && submitted
+        className={`modal-body ${swapResult === null && submitted
             ? "modal-body-loading"
             : submitted
-            ? "submitted-modal"
-            : ""
-        }`}
+              ? "submitted-modal"
+              : ""
+          }`}
       >
         <div className="modal-header">
           <span>Confirm Swap</span>
diff --git a/packages/web/src/components/token/token-chart/TokenChart.tsx b/packages/web/src/components/token/token-chart/TokenChart.tsx
index 560b2f42d..a4ec203af 100644
--- a/packages/web/src/components/token/token-chart/TokenChart.tsx
+++ b/packages/web/src/components/token/token-chart/TokenChart.tsx
@@ -1,5 +1,5 @@
 import { ChartInfo, TokenChartGraphPeriodType, TokenInfo } from "@containers/token-chart-container/TokenChartContainer";
-import React from "react";
+import React, { useMemo } from "react";
 import TokenChartInfo from "../token-chart-info/TokenChartInfo";
 import TokenChartGraphTab from "./token-chart-graph-tab/TokenChartGraphTab";
 import TokenChartGraph from "./token-chart-graph/TokenChartGraph";
@@ -30,9 +30,11 @@ const TokenChart: React.FC<TokenChartProps> = ({
   size,
   breakpoint,
 }) => {
-  const isAllZero = (chartInfo?.datas?.length ?? 0) > 0 && chartInfo?.datas.every(item => {
-    Number(item.amount.value) === 0;
-  });
+  const isAllZero = useMemo(() => {
+    return ((chartInfo?.datas?.length || 0) > 0) && chartInfo?.datas.every(item => {
+      return Number(item.amount.value) === 0;
+    });
+  }, [chartInfo?.datas]);
 
   return (
     <TokenChartWrapper>
@@ -41,13 +43,13 @@ const TokenChart: React.FC<TokenChartProps> = ({
         currentTab={currentTab}
         changeTab={changeTab}
       />
-      {(chartInfo?.datas.length === 0 && !loading) && <ChartNotFound>
+      {(chartInfo?.datas.length === 0 && !loading || isAllZero) && <ChartNotFound>
         No data
       </ChartNotFound>}
       {loading && <LoadingChart>
         <LoadingSpinner />
       </LoadingChart>}
-      {((chartInfo?.datas.length !== 0 && !loading) || isAllZero) && <TokenChartGraph
+      {(chartInfo?.datas.length !== 0 && !loading && !isAllZero) && <TokenChartGraph
         xAxisLabels={chartInfo?.xAxisLabels || []}
         yAxisLabels={chartInfo?.yAxisLabels || []}
         datas={chartInfo?.datas || []}
diff --git a/packages/web/src/components/token/token-chart/token-chart-graph/TokenChartGraph.tsx b/packages/web/src/components/token/token-chart/token-chart-graph/TokenChartGraph.tsx
index 8b7e38797..e245f4234 100644
--- a/packages/web/src/components/token/token-chart/token-chart-graph/TokenChartGraph.tsx
+++ b/packages/web/src/components/token/token-chart/token-chart-graph/TokenChartGraph.tsx
@@ -200,8 +200,6 @@ const TokenChartGraph: React.FC<TokenChartGraphProps> = ({
             value: data.amount.value,
             time: data.time,
           }))}
-          // showBaseLine
-          // baseLineMap={[true, false, false, true]}
           firstPointColor={theme.color.border05}
           customData={customData}
         />
diff --git a/packages/web/src/components/token/trending-crypto-card-list/TrendingCryptoCardList.tsx b/packages/web/src/components/token/trending-crypto-card-list/TrendingCryptoCardList.tsx
index 890577d58..eaf4ab115 100644
--- a/packages/web/src/components/token/trending-crypto-card-list/TrendingCryptoCardList.tsx
+++ b/packages/web/src/components/token/trending-crypto-card-list/TrendingCryptoCardList.tsx
@@ -12,10 +12,10 @@ const TrendingCryptoCardList: React.FC<TrendingCryptoCardListProps> = ({
   list,
   loading,
 }) => {
-  if (loading) return(
-  <div css={loadingWrapper}>
-    <LoadingSpinner />
-  </div>);
+  if (loading) return (
+    <div css={loadingWrapper}>
+      <LoadingSpinner />
+    </div>);
 
   if (list.length === 0) {
     return (
diff --git a/packages/web/src/containers/best-pools-container/BestPoolsContainer.tsx b/packages/web/src/containers/best-pools-container/BestPoolsContainer.tsx
index 9c34531e0..1397878ef 100644
--- a/packages/web/src/containers/best-pools-container/BestPoolsContainer.tsx
+++ b/packages/web/src/containers/best-pools-container/BestPoolsContainer.tsx
@@ -73,7 +73,7 @@ const BestPoolsContainer: React.FC = () => {
   const { isLoadingCommon } = useLoading();
 
   const bestPoolList: BestPool[] = useMemo(() => {
-    return bestPools.map((item: IBestPoolResponse) => {
+    return (bestPools ?? []).map((item: IBestPoolResponse) => {
       const temp =
         pools.filter(
           (_item: PoolModel) => _item.poolPath === item.poolPath,
diff --git a/packages/web/src/containers/exchange-rate-graph-container/ExchangeRateGraphContainer.tsx b/packages/web/src/containers/exchange-rate-graph-container/ExchangeRateGraphContainer.tsx
index 9bb11e11e..8ab2e5d16 100644
--- a/packages/web/src/containers/exchange-rate-graph-container/ExchangeRateGraphContainer.tsx
+++ b/packages/web/src/containers/exchange-rate-graph-container/ExchangeRateGraphContainer.tsx
@@ -39,7 +39,7 @@ export const initialPool: PoolModel = {
   volume24h: 0,
   volumeChange: 0,
   id: "",
-  apr: 0,
+  apr: "0",
   fee: "",
   feeUsd24h: 0,
   currentTick: 0,
diff --git a/packages/web/src/containers/home-swap-container/HomeSwapContainer.tsx b/packages/web/src/containers/home-swap-container/HomeSwapContainer.tsx
index 6c71ad713..426bdba96 100644
--- a/packages/web/src/containers/home-swap-container/HomeSwapContainer.tsx
+++ b/packages/web/src/containers/home-swap-container/HomeSwapContainer.tsx
@@ -116,16 +116,20 @@ const HomeSwapContainer: React.FC = () => {
   }, [slippage, swapDirection, tokenA, tokenAAmount, tokenABalance, tokenAUSD, tokenB, tokenBAmount, tokenBBalance, tokenBUSD]);
 
   const swapNow = useCallback(() => {
-    if (swapDirection === "EXACT_IN" && !!Number(tokenAAmount)) {
+    const queries = [
+      `from=${tokenA?.path}`,
+      `to=${tokenB?.path}`,
+      `direction=${swapDirection}`,
+      ...tokenAAmount ? [`token_a_amount=${tokenAAmount}`] : [],
+      ...tokenBAmount ? [`token_b_amount=${tokenBAmount}`] : [],
+    ];
+    const queriesString = queries.join("&");
+    if (!!swapDirection && (!!tokenAAmount || !!tokenBAmount)) {
       router.push(
-        `/swap?from=${tokenA?.path}&to=${tokenB?.path}&direction=EXACT_IN`
-      );
-    } else {
-      router.push(
-        `/swap?from=${tokenA?.path}&to=${tokenB?.path}&direction=EXACT_IN`
+        `/swap?${queriesString}`
       );
     }
-  }, [router, swapDirection, tokenA, tokenB, tokenAAmount]);
+  }, [router, swapDirection, tokenA, tokenB, tokenAAmount, tokenBAmount]);
 
   const onSubmitSwapValue = () => {
     setTokenA(tokenB);
@@ -147,6 +151,7 @@ const HomeSwapContainer: React.FC = () => {
     setSwapValue(prev => ({
       ...prev,
       tokenBAmount: value,
+      tokenAAmount: "",
       type: "EXACT_OUT",
     }));
     setTokenBAmount(value);
diff --git a/packages/web/src/containers/pool-list-container/PoolListContainer.tsx b/packages/web/src/containers/pool-list-container/PoolListContainer.tsx
index fbe76d033..96eebc1db 100644
--- a/packages/web/src/containers/pool-list-container/PoolListContainer.tsx
+++ b/packages/web/src/containers/pool-list-container/PoolListContainer.tsx
@@ -12,7 +12,6 @@ import { ThemeState } from "@states/index";
 import { PoolListInfo } from "@models/pool/info/pool-list-info";
 import { useLoading } from "@hooks/common/use-loading";
 import { INCENTIVE_TYPE } from "@constants/option.constant";
-import { isNumber } from "@utils/number-utils";
 import { EARN_POOL_LIST_SIZE } from "@constants/table.constant";
 
 export interface Pool {
@@ -122,7 +121,7 @@ const PoolListContainer: React.FC = () => {
       return convertKMBtoNumber(formattedNumber);
     }
 
-    if (!isNumber(formattedNumber)) {
+    if (isNaN(Number(formattedNumber))) {
       return -1;
     }
 
@@ -271,8 +270,8 @@ const PoolListContainer: React.FC = () => {
         sortOption?.key !== item
           ? "desc"
           : sortOption.direction === "asc"
-          ? "desc"
-          : "asc";
+            ? "desc"
+            : "asc";
 
       setTokenSortOption({
         key,
diff --git a/packages/web/src/containers/pool-pair-information-container/PoolPairInformationContainer.tsx b/packages/web/src/containers/pool-pair-information-container/PoolPairInformationContainer.tsx
index 5def5b3a3..620f531af 100644
--- a/packages/web/src/containers/pool-pair-information-container/PoolPairInformationContainer.tsx
+++ b/packages/web/src/containers/pool-pair-information-container/PoolPairInformationContainer.tsx
@@ -53,7 +53,7 @@ export const initialPool: PoolDetailModel = {
   volumeChange: 0,
   rewards24hUsd: 0,
   id: "",
-  apr: 0,
+  apr: "0",
   fee: "",
   feeUsd24h: 0,
   currentTick: 0,
diff --git a/packages/web/src/containers/recently-added-card-list-container/RecentlyAddedCardListContainer.tsx b/packages/web/src/containers/recently-added-card-list-container/RecentlyAddedCardListContainer.tsx
index e4715f85c..4a640144b 100644
--- a/packages/web/src/containers/recently-added-card-list-container/RecentlyAddedCardListContainer.tsx
+++ b/packages/web/src/containers/recently-added-card-list-container/RecentlyAddedCardListContainer.tsx
@@ -46,7 +46,7 @@ const RecentlyAddedCardListContainer: React.FC = () => {
     },
     {
       label: "Swap Fees 24h",
-      content: `$${fees24hUsd || "0"}`,
+      content: toUnitFormat(fees24hUsd || "0", true, true),
     },
   ];
 
diff --git a/packages/web/src/containers/swap-container/SwapContainer.tsx b/packages/web/src/containers/swap-container/SwapContainer.tsx
index 92987a9bd..19e275559 100644
--- a/packages/web/src/containers/swap-container/SwapContainer.tsx
+++ b/packages/web/src/containers/swap-container/SwapContainer.tsx
@@ -68,17 +68,20 @@ const SwapContainer: React.FC = () => {
       tokens.find(token => token.path === query.from) || null;
     const currentTokenB =
       tokens.find(token => token.path === query.to) || null;
-    const direction: SwapDirectionType =
-      query.direction === "EXACT_OUT" ? "EXACT_OUT" : "EXACT_IN";
+    const direction = query.direction as SwapDirectionType;
+    // const tokenAAmountQuery = (query.token_a_amount ?? "") as string;
+    // const tokenBAmountQuery = (query.token_b_amount ?? "") as string;
     if (!currentTokenA && !currentTokenB) return;
     setSwapValue({
       tokenA: currentTokenA,
       tokenB: currentTokenB,
       type: direction,
+      // tokenAAmount: tokenAAmountQuery,
+      // tokenBAmount: tokenBAmountQuery,
       tokenAAmount: "",
       tokenBAmount: "",
     });
-  }, [initialized]);
+  }, [initialized, router.query, tokens]);
 
   return (
     <SwapCard
diff --git a/packages/web/src/containers/swap-liquidity-container/SwapLiquidityContainer.tsx b/packages/web/src/containers/swap-liquidity-container/SwapLiquidityContainer.tsx
index e13c7b92b..6fa304117 100644
--- a/packages/web/src/containers/swap-liquidity-container/SwapLiquidityContainer.tsx
+++ b/packages/web/src/containers/swap-liquidity-container/SwapLiquidityContainer.tsx
@@ -95,7 +95,7 @@ const SwapLiquidityContainer: React.FC = () => {
           ..._,
           volume: `${toUnitFormat(Number(poolItem[0].volume24h), true, true)}`,
           liquidity: `$${convertToKMB(poolItem[0].tvl.toString(), { maximumFractionDigits: 2 })}`,
-          apr: poolItem[0].apr === null ? "" : poolItem[0].apr.toString(),
+          apr: (poolItem?.[0]?.apr ?? "").toString(),
           active: true,
           id: poolItem[0].id,
         };
diff --git a/packages/web/src/containers/trending-card-list-container/TrendingCardListContainer.tsx b/packages/web/src/containers/trending-card-list-container/TrendingCardListContainer.tsx
index 9df045218..b4f5bfd01 100644
--- a/packages/web/src/containers/trending-card-list-container/TrendingCardListContainer.tsx
+++ b/packages/web/src/containers/trending-card-list-container/TrendingCardListContainer.tsx
@@ -2,17 +2,44 @@ import TrendingCardList from "@components/home/trending-card-list/TrendingCardLi
 import { useLoading } from "@hooks/common/use-loading";
 import { useWindowSize } from "@hooks/common/use-window-size";
 import { usePoolData } from "@hooks/pool/use-pool-data";
-import { useTokenData } from "@hooks/token/use-token-data";
+import { useGnotToGnot } from "@hooks/token/use-gnot-wugnot";
+import { UpDownType } from "@models/common/card-list-item-info";
+import { TokenModel } from "@models/token/token-model";
+import { useGetChainList, useGetTokensList } from "@query/token";
+import { ITrending } from "@repositories/token";
 import { makeId } from "@utils/common";
+import { toPriceFormat } from "@utils/number-utils";
 import { useRouter } from "next/router";
-import React, { useCallback } from "react";
+import React, { useCallback, useMemo } from "react";
+
+const defaultToken = {
+  path: "",
+  type: "grc20",
+  address: "",
+  chainId: "",
+  name: "",
+  symbol: "",
+  decimals: 0,
+  logoURI: "",
+  createdAt: "",
+  isWrappedGasToken: false,
+  isGasToken: false,
+  description: "",
+  websiteURL: "",
+  wrappedPath: "",
+  denom: "",
+  priceID: ""
+};
 
 const TrendingCardListContainer: React.FC = () => {
   const router = useRouter();
   const { breakpoint } = useWindowSize();
-  const { trendingTokens, loading, isLoadingTokenPrice } = useTokenData();
+  const { data: { tokens = [] } = {}, isLoading: isLoadingListToken } =
+    useGetTokensList();
+  const { data: { trending = [] } = {}, isLoading } = useGetChainList();
   const { loading: isLoadingPoolData } = usePoolData();
   const { isLoadingCommon } = useLoading();
+  const { gnot, wugnotPath } = useGnotToGnot();
 
   const moveTokenDetails = useCallback((path: string) => {
     router.push("/tokens/" + makeId(path));
@@ -22,12 +49,43 @@ const TrendingCardListContainer: React.FC = () => {
     moveTokenDetails(path);
   }, [moveTokenDetails]);
 
+  const trendingCryptoList = useMemo(() => {
+    return (trending ?? [])
+      ?.map((item: ITrending) => {
+        const tempToken = tokens.find(
+          (token: TokenModel) => token.path === item.tokenPath,
+        ) as TokenModel ?? defaultToken;
+        const priceChange = item.tokenPrice24hChange || 0;
+        const status = (() => {
+          if (priceChange === "" || Number(priceChange) >= 0) return "up";
+
+          return "down";
+        })();
+        return {
+          token: {
+            ...tempToken,
+            path:
+              item.tokenPath === wugnotPath ? gnot?.path || "" : item.tokenPath || "",
+            name: item.tokenPath === wugnotPath ? gnot?.name || "" : tempToken?.name || "",
+            symbol:
+              item.tokenPath === wugnotPath ? gnot?.symbol || "" : tempToken?.symbol || "",
+            logoURI:
+              item.tokenPath === wugnotPath ? gnot?.logoURI || "" : tempToken?.logoURI || "",
+          },
+          price: `${(toPriceFormat(item.tokenPrice, { usd: true }))}`,
+          upDown: status as UpDownType,
+          content: `${Number(priceChange).toFixed(2)}%`
+        };
+      })
+      .slice(0, 3);
+  }, [tokens, trending, gnot, wugnotPath]);
+
   return (
     <TrendingCardList
-      list={trendingTokens}
+      list={trendingCryptoList}
       device={breakpoint}
       onClickItem={onClickItem}
-      loading={loading || isLoadingPoolData || isLoadingCommon || isLoadingTokenPrice}
+      loading={isLoading || isLoadingPoolData || isLoadingCommon || isLoadingListToken}
     />
   );
 };
diff --git a/packages/web/src/hooks/swap/use-swap-handler.tsx b/packages/web/src/hooks/swap/use-swap-handler.tsx
index 1bbf3a752..d43a4b5e1 100644
--- a/packages/web/src/hooks/swap/use-swap-handler.tsx
+++ b/packages/web/src/hooks/swap/use-swap-handler.tsx
@@ -391,7 +391,7 @@ export const useSwapHandler = () => {
     }
     if (
       Number(tokenBAmount) >
-        Number(parseFloat(tokenBBalance.replace(/,/g, ""))) &&
+      Number(parseFloat(tokenBBalance.replace(/,/g, ""))) &&
       type === "EXACT_OUT"
     ) {
       return false;
@@ -681,13 +681,12 @@ export const useSwapHandler = () => {
               swapTokenInfo.tokenAAmount,
             ).toLocaleString("en-US", {
               maximumFractionDigits: 6,
-            })}</span> <span>${
-              swapTokenInfo?.tokenA?.symbol
-            }</span> for <span>${Number(
-              swapTokenInfo.tokenBAmount,
-            ).toLocaleString("en-US", {
-              maximumFractionDigits: 6,
-            })}</span> <span>${swapTokenInfo?.tokenB?.symbol}</span>`,
+            })}</span> <span>${swapTokenInfo?.tokenA?.symbol
+              }</span> for <span>${Number(
+                swapTokenInfo.tokenBAmount,
+              ).toLocaleString("en-US", {
+                maximumFractionDigits: 6,
+              })}</span> <span>${swapTokenInfo?.tokenB?.symbol}</span>`,
           },
           {
             timeout: 50000,
@@ -709,10 +708,10 @@ export const useSwapHandler = () => {
       tokenAAmount: isExactIn
         ? tokenAAmount
         : makeDisplayTokenAmount(tokenA, estimatedAmount || 0)?.toString() ||
-          "0",
+        "0",
       tokenBAmount: isExactIn
         ? makeDisplayTokenAmount(tokenB, estimatedAmount || 0)?.toString() ||
-          "0"
+        "0"
         : tokenBAmount,
     };
 
diff --git a/packages/web/src/models/pool/info/pool-list-info.ts b/packages/web/src/models/pool/info/pool-list-info.ts
index b61c6faaf..e5b9ee2f7 100644
--- a/packages/web/src/models/pool/info/pool-list-info.ts
+++ b/packages/web/src/models/pool/info/pool-list-info.ts
@@ -32,4 +32,5 @@ export interface PoolListInfo {
   bins40: PoolBinModel[];
 
   tvl: string;
+
 }
diff --git a/packages/web/src/models/pool/mapper/pool-mapper.ts b/packages/web/src/models/pool/mapper/pool-mapper.ts
index fdd9974e0..01b80b685 100644
--- a/packages/web/src/models/pool/mapper/pool-mapper.ts
+++ b/packages/web/src/models/pool/mapper/pool-mapper.ts
@@ -38,15 +38,15 @@ export class PoolMapper {
       tokenA,
       tokenB,
       feeTier: feeTierInfo?.type || "NONE",
-      apr: apr !== null ? apr.toString() : "",
+      apr: apr,
       liquidity: `$${BigNumber(liquidity).toFormat(0)}`,
       volume24h: toUnitFormat(volume24h || "0", true, true),
       fees24h: toUnitFormat(feeUsd24h || "0", true, true),
       rewardTokens,
       currentTick,
       price,
-      bins,
-      bins40,
+      bins: bins ?? [],
+      bins40: bins40 ?? [],
       tvl: toUnitFormat(tvl || "0", true, true),
     };
   }
@@ -95,15 +95,15 @@ export class PoolMapper {
       tokenA,
       tokenB,
       feeTier: feeTierInfo?.type || "NONE",
-      apr: apr !== null ? apr.toString() : "",
+      apr: apr,
       liquidity: toUnitFormat(tvl || "0", true, true),
       volume24h: toUnitFormat(volume24h || "0", true, true),
       fees24h: toUnitFormat(feeUsd24h || "0", true, true),
       rewardTokens,
       currentTick,
       price,
-      bins,
-      bins40,
+      bins: bins ?? [],
+      bins40: bins40 ?? [],
       poolPath: poolPath,
       tvl: tvl.toString(),
     };
@@ -116,7 +116,7 @@ export class PoolMapper {
       id,
       incentiveType: pool.incentiveType as INCENTIVE_TYPE,
       rewardTokens: pool.rewardTokens || [],
-      apr: pool.apr,
+      apr: pool.totalApr,
       bins: pool?.bins || [],
       bins40: pool?.bins40 || [],
       liquidity: pool.liquidity,
@@ -131,9 +131,10 @@ export class PoolMapper {
       ...pool,
       id,
       incentiveType: pool.incentiveType as INCENTIVE_TYPE,
-      bins: [],
+      bins: pool?.bins ?? [],
+      bins40: pool?.bins40 ?? [],
       rewardTokens: pool.rewardTokens || [],
-      apr: pool.apr,
+      apr: pool.totalApr ?? "",
       totalApr: pool.totalApr,
       allTimeVolumeUsd: Number(pool.allTimeVolumeUsd),
       price: Number(pool.price),
diff --git a/packages/web/src/models/pool/pool-model.ts b/packages/web/src/models/pool/pool-model.ts
index 9d1a1c46c..dd849d04e 100644
--- a/packages/web/src/models/pool/pool-model.ts
+++ b/packages/web/src/models/pool/pool-model.ts
@@ -38,7 +38,7 @@ export interface PoolModel {
 
   fee: string;
 
-  apr: number | string | null;
+  apr: string;
 
   totalApr: number | string | null;
 
diff --git a/packages/web/src/models/position/info/position-apr-info.ts b/packages/web/src/models/position/info/position-apr-info.ts
index 27d3d5464..17475186c 100644
--- a/packages/web/src/models/position/info/position-apr-info.ts
+++ b/packages/web/src/models/position/info/position-apr-info.ts
@@ -6,4 +6,5 @@ export interface PositionAPRInfo {
   rewardType: RewardType;
   accuReward1D: number;
   apr: number;
+  accuReward1DPrice: number;
 }
diff --git a/packages/web/src/repositories/notification/notification-repository-impl.ts b/packages/web/src/repositories/notification/notification-repository-impl.ts
index a6f5775fc..3c0884a0d 100644
--- a/packages/web/src/repositories/notification/notification-repository-impl.ts
+++ b/packages/web/src/repositories/notification/notification-repository-impl.ts
@@ -73,12 +73,12 @@ export class NotificationRepositoryImpl implements NotificationRepository {
   };
 
   private replaceToken = (symbol: string) => {
-    if (symbol === "WGNOT") return "GNOT";
+    if (symbol === "wugnot") return "GNOT";
     return symbol;
   };
 
   private replaceUri = (symbol: string, uri: string) => {
-    if (symbol === "WGNOT")
+    if (symbol === "wugnot")
       return "https://raw.githubusercontent.com/onbloc/gno-token-resource/main/gno-native/images/gnot.svg";
     return uri;
   };
@@ -206,7 +206,7 @@ export class NotificationRepositoryImpl implements NotificationRepository {
       return [];
     }
     try {
-      const { data } = await this.networkClient.get<{data: AccountActivity[],error: any}>({
+      const { data } = await this.networkClient.get<{ data: AccountActivity[], error: any }>({
         url: "/users/" + request.address + "/activity",
       });
 
@@ -219,8 +219,8 @@ export class NotificationRepositoryImpl implements NotificationRepository {
   public getGroupedNotification = async (
     request: AccountActivityRequest,
   ): Promise<TransactionGroupsType[]> => {
-      const data = await this.getAccountOnchainActivity(request) ;
-      return this.groupTransactionsByDate(data);
+    const data = await this.getAccountOnchainActivity(request);
+    return this.groupTransactionsByDate(data);
   };
 
   public clearNotification = async (
diff --git a/packages/web/src/repositories/pool/mock/pool-detail.json b/packages/web/src/repositories/pool/mock/pool-detail.json
index 0378e9cea..4f2f0c48f 100644
--- a/packages/web/src/repositories/pool/mock/pool-detail.json
+++ b/packages/web/src/repositories/pool/mock/pool-detail.json
@@ -32,7 +32,7 @@
     "volumeChange": 118279700.0,
     "totalVolume": 1182797.0,
     "id": "bar_foo_500",
-    "apr": 0.12345,
+    "apr": "0.12345",
     "fee": "0.05%",
     "feeUsd24h": 131.937491,
     "feeChange": 13193.749143,
diff --git a/packages/web/src/repositories/pool/response/pool-list-response.ts b/packages/web/src/repositories/pool/response/pool-list-response.ts
index e28f429c6..4cb1e4704 100644
--- a/packages/web/src/repositories/pool/response/pool-list-response.ts
+++ b/packages/web/src/repositories/pool/response/pool-list-response.ts
@@ -11,49 +11,49 @@ export interface PoolListResponse {
 }
 export interface PoolResponse {
   poolPath: string;
-  
+
   incentiveType?: string;
-  
+
   price: number;
-  
+
   tokenA: TokenModel;
-  
+
   tokenB: TokenModel;
-  
+
   tokenABalance: number;
-  
+
   tokenBBalance: number;
-  
+
   tickSpacing: number;
-  
+
   currentTick: number;
-  
+
   bins: PoolBinModel[];
-  
+
   bins40: PoolBinModel[];
-  
+
   tvl: number;
-  
+
   tvlChange: number;
-  
+
   volume24h: number;
-  
+
   fee: string;
-  
+
   feeUsd24h: number;
-  
+
   apr: number;
-  
-  totalApr: string | number | null;
-  
+
+  totalApr: string;
+
   rewardTokens?: TokenModel[];
-  
+
   priceRatio: IPoolPriceRatio;
-  
+
   liquidity: string;
-  
+
   allTimeVolumeUsd: number;
-  
+
   volumeChange24h: number;
 
   rewards24hUsd: number;
@@ -62,16 +62,17 @@ export interface PoolResponse {
 
   stakingApr: string;
 
+
   // TODO Remove later
 
   // feeChange: number;
-  
+
   id?: string;
-  
+
   volumeChange: number;
-  
+
   // totalVolume: number;
-  
+
   // name: string;
 }