diff --git a/src/pages/TrueSightV2/components/SearchWithDropDown.tsx b/src/pages/TrueSightV2/components/SearchWithDropDown.tsx
index 30e195d44c..7d5ea5b850 100644
--- a/src/pages/TrueSightV2/components/SearchWithDropDown.tsx
+++ b/src/pages/TrueSightV2/components/SearchWithDropDown.tsx
@@ -210,7 +210,7 @@ const TokenItem = ({ token, onClick }: { token: ITokenSearchResult; onClick?: ()
     >
       <td>
         <RowFit gap="10px">
-          <WatchlistButton size={16} assetId={token.assetId} />
+          <WatchlistButton size={16} assetId={token.assetId} symbol={token.symbol} />
 
           <div style={{ position: 'relative' }}>
             <div style={{ borderRadius: '50%', overflow: 'hidden' }}>
diff --git a/src/pages/TrueSightV2/components/WatchlistButton.tsx b/src/pages/TrueSightV2/components/WatchlistButton.tsx
index a701768a9e..cf7dbf21ab 100644
--- a/src/pages/TrueSightV2/components/WatchlistButton.tsx
+++ b/src/pages/TrueSightV2/components/WatchlistButton.tsx
@@ -1,6 +1,6 @@
 import { Trans, t } from '@lingui/macro'
 import { AnimatePresence, Reorder, useDragControls } from 'framer-motion'
-import { CSSProperties, useEffect, useRef, useState } from 'react'
+import { CSSProperties, memo, useEffect, useRef, useState } from 'react'
 import { Check, Plus, X } from 'react-feather'
 import { useDispatch } from 'react-redux'
 import { Text } from 'rebass'
@@ -15,6 +15,8 @@ import AnimatedSpinLoader from 'components/Loader/AnimatedSpinLoader'
 import Modal from 'components/Modal'
 import Popover from 'components/Popover'
 import Row, { RowBetween, RowFit } from 'components/Row'
+import { MouseoverTooltip } from 'components/Tooltip'
+import { MIXPANEL_TYPE, useMixpanelKyberAI } from 'hooks/useMixpanel'
 import { useOnClickOutside } from 'hooks/useOnClickOutside'
 
 import kyberAIApi, {
@@ -343,23 +345,30 @@ const debounce = (func: () => void, timeout = 1000) => {
   timer = setTimeout(() => func(), timeout)
 }
 
-export default function WatchlistButton({
+const MAX_LIMIT_WATCHED_TOKEN = 50
+
+function WatchlistButton({
   assetId,
+  symbol,
   size,
   wrapperStyle,
 }: {
   assetId?: string
+  symbol?: string
   size?: number
   wrapperStyle?: CSSProperties
 }) {
   const theme = useTheme()
   const dispatch = useDispatch()
+  const mixpanelHandler = useMixpanelKyberAI()
+
   const [openMenu, setOpenMenu] = useState(false)
   const [openManageModal, setOpenManageModal] = useState(false)
 
   const { data, refetch: refetchWatchlists } = useGetWatchlistInformationQuery()
   const watchlists = data?.watchlists || []
   const numberOfWatchlists = watchlists?.length || 0
+  const isReachMaxLimit = (data?.totalUniqueAssetNumber || 0) >= MAX_LIMIT_WATCHED_TOKEN
 
   const [updateWatchlistsPriorities] = useUpdateCustomizedWatchlistsPrioritiesMutation()
 
@@ -375,12 +384,20 @@ export default function WatchlistButton({
   const handleAddtoWatchlist = (id: number) => {
     if (id && assetId) {
       addToWatchlist({ userWatchlistId: id, assetId: +assetId })
+      mixpanelHandler(MIXPANEL_TYPE.KYBERAI_ADD_TOKEN_TO_WATCHLIST, {
+        token_name: symbol?.toUpperCase(),
+        option: 'add',
+      })
     }
   }
 
   const handleRemoveFromWatchlist = (id: number) => {
     if (id && assetId) {
       removeFromWatchlist({ userWatchlistId: id, assetId: +assetId })
+      mixpanelHandler(MIXPANEL_TYPE.KYBERAI_ADD_TOKEN_TO_WATCHLIST, {
+        token_name: symbol?.toUpperCase(),
+        option: 'remove',
+      })
     }
   }
 
@@ -437,13 +454,20 @@ export default function WatchlistButton({
         placement="bottom-start"
         noArrow={true}
       >
-        <StarWithAnimation
-          loading={false}
-          watched={!!assetId && !!watchlists && watchlists?.some(item => item.assetIds?.includes(+assetId))}
-          onClick={() => setOpenMenu(prev => !prev)}
-          wrapperStyle={wrapperStyle}
-          size={size}
-        />
+        <MouseoverTooltip
+          text={t`You can only watch up to ${MAX_LIMIT_WATCHED_TOKEN} tokens`}
+          disableTooltip={!isReachMaxLimit}
+        >
+          <StarWithAnimation
+            loading={false}
+            watched={!!assetId && !!watchlists && watchlists?.some(item => item.assetIds?.includes(+assetId))}
+            onClick={() => {
+              !isReachMaxLimit && setOpenMenu(prev => !prev)
+            }}
+            wrapperStyle={wrapperStyle}
+            size={size}
+          />
+        </MouseoverTooltip>
       </Popover>
       <Modal isOpen={openManageModal} width="380px">
         <ModalWrapper onClick={e => e.stopPropagation()}>
@@ -474,3 +498,5 @@ export default function WatchlistButton({
     </div>
   )
 }
+
+export default memo(WatchlistButton)
diff --git a/src/pages/TrueSightV2/components/table/index.tsx b/src/pages/TrueSightV2/components/table/index.tsx
index c51ebdb696..ef808f48a8 100644
--- a/src/pages/TrueSightV2/components/table/index.tsx
+++ b/src/pages/TrueSightV2/components/table/index.tsx
@@ -579,17 +579,10 @@ const WidgetTokenRow = ({
 }) => {
   const theme = useTheme()
   const navigate = useNavigate()
-  // const { account } = useActiveWeb3React()
-  // const mixpanelHandler = useMixpanelKyberAI()
-  // const reachedMaxLimit = useIsReachMaxLimitWatchedToken(token?.tokens.length)
 
   const latestKyberScore: IKyberScoreChart | undefined = token?.ks_3d?.[token.ks_3d.length - 1]
   const hasMutipleChain = token?.tokens?.length > 1
   const [showSwapMenu, setShowSwapMenu] = useState(false)
-  // const [isWatched, setIsWatched] = useState(!!token.isWatched)
-  // const [loadingStar, setLoadingStar] = useState(false)
-  // const [addToWatchlist] = useAddToWatchlistMutation()
-  // const [removeFromWatchlist] = useRemoveFromWatchlistMutation()
 
   const rowRef = useRef<HTMLTableRowElement>(null)
 
@@ -646,10 +639,6 @@ const WidgetTokenRow = ({
   //   }
   // }
 
-  // useEffect(() => {
-  //   setIsWatched(token.isWatched)
-  // }, [token.isWatched])
-
   return (
     <tr onClick={handleRowClick} style={{ position: 'relative' }} ref={rowRef}>
       {isMobile ? (
@@ -657,7 +646,7 @@ const WidgetTokenRow = ({
           <td>
             <Column gap="4px">
               <RowFit gap="6px">
-                <WatchlistButton assetId={token.asset_id} />
+                <WatchlistButton assetId={token.asset_id} symbol={token.symbol} />
                 <img
                   alt="tokenInList"
                   src={token.tokens[0].logo}
@@ -693,7 +682,7 @@ const WidgetTokenRow = ({
         <>
           <td>
             <RowFit gap="6px">
-              <WatchlistButton assetId={token.asset_id} />
+              <WatchlistButton assetId={token.asset_id} symbol={token.symbol} />
               <Row gap="8px" style={{ position: 'relative', width: '24px', height: '24px' }}>
                 <img
                   alt="tokenInList"
diff --git a/src/pages/TrueSightV2/hooks/useIsReachMaxLimitWatchedToken.tsx b/src/pages/TrueSightV2/hooks/useIsReachMaxLimitWatchedToken.tsx
deleted file mode 100644
index cbf9e8902b..0000000000
--- a/src/pages/TrueSightV2/hooks/useIsReachMaxLimitWatchedToken.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { useMemo } from 'react'
-
-import { useIsWhiteListKyberAI } from 'state/user/hooks'
-
-import { ITokenList, KyberAIListType } from '../types'
-import { useTokenListQuery } from './useKyberAIData'
-
-const MAX_LIMIT_WATCHED_TOKEN = 30
-export default function useIsReachMaxLimitWatchedToken(tokenCount?: number) {
-  const { isWhiteList } = useIsWhiteListKyberAI()
-
-  const { data } = useTokenListQuery(
-    {
-      type: KyberAIListType.ALL,
-      chain: 'all',
-      page: 1,
-      pageSize: 30,
-      watchlist: true,
-    },
-    { skip: !isWhiteList },
-  )
-
-  const watchedCount = useMemo(() => {
-    let count = 0
-    data?.data.forEach((t: ITokenList) => {
-      count += t.tokens.length
-    })
-    return count
-  }, [data])
-
-  return watchedCount + (tokenCount || 1) > MAX_LIMIT_WATCHED_TOKEN
-}
diff --git a/src/pages/TrueSightV2/hooks/useKyberAIData.tsx b/src/pages/TrueSightV2/hooks/useKyberAIData.tsx
index 584162ecf2..9c661a7cb6 100644
--- a/src/pages/TrueSightV2/hooks/useKyberAIData.tsx
+++ b/src/pages/TrueSightV2/hooks/useKyberAIData.tsx
@@ -4,6 +4,7 @@ import baseQueryOauth from 'services/baseQueryOauth'
 
 import { SelectOption } from 'components/Select'
 import { BFF_API } from 'constants/env'
+import { useIsWhiteListKyberAI } from 'state/user/hooks'
 
 import {
   IAssetOverview,
@@ -346,6 +347,14 @@ const kyberAIApi = createApi({
   }),
 })
 
+export const useGetWatchlistInformationQuery = () => {
+  const { isWhiteList } = useIsWhiteListKyberAI()
+
+  const data = kyberAIApi.useGetWatchlistInformationQuery(undefined, { skip: !isWhiteList })
+
+  return data
+}
+
 export const {
   useAssetOverviewQuery,
   useTokenOverviewQuery,
@@ -369,7 +378,6 @@ export const {
   useCreateCustomWatchlistMutation,
   useDeleteCustomWatchlistMutation,
   useUpdateWatchlistsNameMutation,
-  useGetWatchlistInformationQuery,
   useUpdateCustomizedWatchlistsPrioritiesMutation,
   useGetFilterCategoriesQuery,
 } = kyberAIApi
diff --git a/src/pages/TrueSightV2/pages/SingleToken.tsx b/src/pages/TrueSightV2/pages/SingleToken.tsx
index ecdff4fb2e..cc3eb24da7 100644
--- a/src/pages/TrueSightV2/pages/SingleToken.tsx
+++ b/src/pages/TrueSightV2/pages/SingleToken.tsx
@@ -1,7 +1,7 @@
 import { Trans, t } from '@lingui/macro'
 import { rgba } from 'polished'
 import { stringify } from 'querystring'
-import { ReactNode, useCallback, useEffect, useRef, useState } from 'react'
+import { ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { ChevronLeft } from 'react-feather'
 import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'
 import { useLocation, useNavigate, useParams, useSearchParams } from 'react-router-dom'
@@ -247,42 +247,13 @@ const TokenDescription = ({ description }: { description: string }) => {
 }
 
 const TokenNameGroup = ({ token, isLoading }: { token?: IAssetOverview; isLoading?: boolean }) => {
-  const { account } = useActiveWeb3React()
   const theme = useTheme()
-  const mixpanelHandler = useMixpanelKyberAI()
   const navigate = useNavigate()
   const location = useLocation()
   const above768 = useMedia(`(min-width:${MEDIA_WIDTHS.upToSmall}px)`)
   const { assetId } = useParams()
   const { chain } = useKyberAIAssetOverview()
-  // const reachedMaxLimit = useIsReachMaxLimitWatchedToken()
-  // const [addToWatchlist, { isLoading: loadingAddtoWatchlist }] = useAddToWatchlistMutation()
-  // const [removeFromWatchlist, { isLoading: loadingRemovefromWatchlist }] = useRemoveFromWatchlistMutation()
-  // const [isWatched, setIsWatched] = useState(false)
 
-  // const handleStarClick = () => {
-  //   if (!token || !chain || !address || !account) return
-  //   if (isWatched) {
-  //     mixpanelHandler(MIXPANEL_TYPE.KYBERAI_ADD_TOKEN_TO_WATCHLIST, {
-  //       token_name: token.symbol?.toUpperCase(),
-  //       source: 'explore',
-  //       option: 'remove',
-  //     })
-  //     removeFromWatchlist({
-  //       tokenAddress: address,
-  //       chain,
-  //     }).then(() => setIsWatched(false))
-  //   } else {
-  //     if (!reachedMaxLimit) {
-  //       mixpanelHandler(MIXPANEL_TYPE.KYBERAI_ADD_TOKEN_TO_WATCHLIST, {
-  //         token_name: token.symbol?.toUpperCase(),
-  //         source: 'explore',
-  //         option: 'add',
-  //       })
-  //       addToWatchlist({ tokenAddress: address, chain }).then(() => setIsWatched(true))
-  //     }
-  //   }
-  // }
   const handleGoBackClick = () => {
     if (!!location?.state?.from) {
       navigate(location.state.from)
@@ -290,11 +261,7 @@ const TokenNameGroup = ({ token, isLoading }: { token?: IAssetOverview; isLoadin
       navigate({ pathname: APP_PATHS.KYBERAI_RANKINGS })
     }
   }
-  useEffect(() => {
-    if (token) {
-      // setIsWatched(token.isWatched)
-    }
-  }, [token])
+
   return (
     <>
       <SimpleTooltip text={t`Go back Ranking page`} hideOnMobile>
@@ -304,13 +271,16 @@ const TokenNameGroup = ({ token, isLoading }: { token?: IAssetOverview; isLoadin
       </SimpleTooltip>
       <WatchlistButton
         assetId={assetId}
-        wrapperStyle={{
-          color: theme.subText,
-          backgroundColor: theme.darkMode ? theme.buttonGray : theme.background,
-          height: above768 ? '36px' : '32px',
-          width: above768 ? '36px' : '32px',
-          borderRadius: '100%',
-        }}
+        wrapperStyle={useMemo(() => {
+          return {
+            color: theme.subText,
+            backgroundColor: theme.darkMode ? theme.buttonGray : theme.background,
+            height: above768 ? '36px' : '32px',
+            width: above768 ? '36px' : '32px',
+            borderRadius: '100%',
+          }
+        }, [above768, theme])}
+        symbol={token?.symbol}
       />
       <div style={{ position: 'relative' }}>
         <div style={{ borderRadius: '50%', overflow: 'hidden' }}>
diff --git a/src/pages/TrueSightV2/pages/TokenAnalysisList.tsx b/src/pages/TrueSightV2/pages/TokenAnalysisList.tsx
index d127089076..e597ad95f3 100644
--- a/src/pages/TrueSightV2/pages/TokenAnalysisList.tsx
+++ b/src/pages/TrueSightV2/pages/TokenAnalysisList.tsx
@@ -24,7 +24,6 @@ import { useOnClickOutside } from 'hooks/useOnClickOutside'
 import useTheme from 'hooks/useTheme'
 import { StyledSectionWrapper } from 'pages/TrueSightV2/components'
 import TokenFilter from 'pages/TrueSightV2/components/TokenFilter'
-import { StarWithAnimation } from 'pages/TrueSightV2/components/WatchlistStar'
 import { MEDIA_WIDTHS } from 'theme'
 
 import ChevronIcon from '../components/ChevronIcon'
@@ -38,8 +37,7 @@ import WatchlistButton from '../components/WatchlistButton'
 import KyberScoreChart from '../components/chart/KyberScoreChart'
 import TokenAnalysisListShareContent from '../components/shareContent/TokenAnalysisListShareContent'
 import { KYBERAI_LISTYPE_TO_MIXPANEL, Z_INDEX_KYBER_AI } from '../constants'
-import useIsReachMaxLimitWatchedToken from '../hooks/useIsReachMaxLimitWatchedToken'
-import { useAddToWatchlistMutation, useRemoveFromWatchlistMutation, useTokenListQuery } from '../hooks/useKyberAIData'
+import { useTokenListQuery } from '../hooks/useKyberAIData'
 import { IKyberScoreChart, ITokenList, KyberAIListType, QueryTokenParams } from '../types'
 import { calculateValueToColor, formatLocaleStringNum, formatTokenPrice, navigateToSwapPage } from '../utils'
 
@@ -461,14 +459,9 @@ const TokenRow = React.memo(function TokenRow({
   const navigate = useNavigate()
   const location = useLocation()
   const mixpanelHandler = useMixpanelKyberAI()
-  // const { account } = useActiveWeb3React()
   const theme = useTheme()
-  const reachedMaxLimit = useIsReachMaxLimitWatchedToken()
   const [showSwapMenu, setShowSwapMenu] = useState(false)
-  const [addToWatchlist] = useAddToWatchlistMutation()
-  const [removeFromWatchlist] = useRemoveFromWatchlistMutation()
-  const [isWatched, setIsWatched] = useState(false)
-  const [loadingStar, setLoadingStar] = useState(false)
+
   const rowRef = useRef<HTMLTableRowElement>(null)
 
   useOnClickOutside(rowRef, () => setShowSwapMenu(false))
@@ -485,54 +478,12 @@ const TokenRow = React.memo(function TokenRow({
     )
   }
 
-  // const handleWatchlistClick = (e: any) => {
-  //   e.stopPropagation()
-  //   setLoadingStar(true)
-  //   if (isWatched) {
-  //     mixpanelHandler(MIXPANEL_TYPE.KYBERAI_ADD_TOKEN_TO_WATCHLIST, {
-  //       token_name: token.symbol?.toUpperCase(),
-  //       source: KYBERAI_LISTYPE_TO_MIXPANEL[listType],
-  //       ranking_order: index,
-  //       option: 'remove',
-  //     })
-  //     Promise.all(token.tokens.map(t => removeFromWatchlist({ tokenAddress: t.address, chain: t.chain }))).then(() => {
-  //       setIsWatched(false)
-  //       setLoadingStar(false)
-  //     })
-  //   } else {
-  //     if (!reachedMaxLimit) {
-  //       mixpanelHandler(MIXPANEL_TYPE.KYBERAI_ADD_TOKEN_TO_WATCHLIST, {
-  //         token_name: token.symbol?.toUpperCase(),
-  //         source: KYBERAI_LISTYPE_TO_MIXPANEL[listType],
-  //         ranking_order: index,
-  //         option: 'add',
-  //       })
-  //       Promise.all(token.tokens.map(t => addToWatchlist({ tokenAddress: t.address, chain: t.chain }))).then(() => {
-  //         setIsWatched(true)
-  //         setLoadingStar(false)
-  //       })
-  //     }
-  //   }
-  // }
-
-  // useEffect(() => {
-  //   setIsWatched(token.isWatched)
-  // }, [token.isWatched])
-
   const latestKyberScore: IKyberScoreChart | undefined = token?.ks_3d?.[token.ks_3d.length - 1]
   return (
     <tr key={token.asset_id} ref={rowRef} onClick={handleRowClick} style={{ position: 'relative' }}>
       <td>
         <RowFit gap="6px">
-          <WatchlistButton size={above768 ? 20 : 16} assetId={token.asset_id} />
-          {/* <StarWithAnimation
-              key={token.SourceTokenID}
-              watched={isWatched}
-              loading={loadingStar}
-              onClick={handleWatchlistClick}
-              size={above768 ? 20 : 16}
-              disabled={!isWatched && reachedMaxLimit}
-            /> */}
+          <WatchlistButton size={above768 ? 20 : 16} assetId={token.asset_id} symbol={token.symbol} />
           {above768 ? index : <></>}
         </RowFit>
       </td>
@@ -559,7 +510,6 @@ const TokenRow = React.memo(function TokenRow({
 
           <Column gap="8px" style={{ cursor: 'pointer', alignItems: 'flex-start' }}>
             <Text style={{ textTransform: 'uppercase' }}>{token.symbol}</Text>{' '}
-            {/* <TokenListVariants tokens={token.tokens} /> */}
           </Column>
         </Row>
       </td>