diff --git a/src/components/SearchModal/CurrencyList.tsx b/src/components/SearchModal/CurrencyList.tsx
index eb9f04332e..aaea0b1631 100644
--- a/src/components/SearchModal/CurrencyList.tsx
+++ b/src/components/SearchModal/CurrencyList.tsx
@@ -136,10 +136,6 @@ export function CurrencyRow({
       return false
     }
 
-    // if (isTokenNative(currency, currency.chainId)) {
-    //   return !!favoriteTokens.includeNativeToken
-    // }
-
     if (currency.isToken) {
       const addr = (currency as Token).address ?? ''
       const addresses = favoriteTokens ?? []
@@ -148,6 +144,7 @@ export function CurrencyRow({
 
     return false
   })()
+
   const balanceComponent = hideBalance ? (
     '******'
   ) : currencyBalance ? (
diff --git a/src/components/SearchModal/CurrencySearch.tsx b/src/components/SearchModal/CurrencySearch.tsx
index 01784ccd6f..681bbcb4a9 100644
--- a/src/components/SearchModal/CurrencySearch.tsx
+++ b/src/components/SearchModal/CurrencySearch.tsx
@@ -76,7 +76,6 @@ const ButtonClear = styled.div`
   gap: 5px;
   cursor: pointer;
 `
-// const MAX_FAVORITE_PAIR = 12
 
 interface CurrencySearchProps {
   isOpen: boolean
@@ -169,7 +168,6 @@ export function CurrencySearch({
   const tokenComparator = useTokenComparator(false, customChainId)
 
   const [commonTokens, setCommonTokens] = useState<(Token | Currency)[]>([])
-  console.log('🚀 ~ file: CurrencySearch.tsx:172 ~ commonTokens:', commonTokens)
   const [loadingCommon, setLoadingCommon] = useState(true)
 
   const tokenImportsFiltered = useMemo(() => {
@@ -288,6 +286,7 @@ export function CurrencySearch({
 
       if (addressesToFetch.length) {
         const tokens = await fetchListTokenByAddresses(addressesToFetch, chainId)
+        // Sort the returned token list to match the order of the passed address list
         result = result.concat(
           tokens.sort((x, y) => {
             return addressesToFetch.indexOf(x.wrapped.address) - addressesToFetch.indexOf(y.wrapped.address)
diff --git a/src/state/user/hooks.tsx b/src/state/user/hooks.tsx
index 6a1946939d..7829024afa 100644
--- a/src/state/user/hooks.tsx
+++ b/src/state/user/hooks.tsx
@@ -53,6 +53,8 @@ import {
 import { CROSS_CHAIN_SETTING_DEFAULT, CrossChainSetting, VIEW_MODE } from 'state/user/reducer'
 import { isAddress, isChristmasTime } from 'utils'
 
+const MAX_FAVORITE_LIMIT = 12
+
 function serializeToken(token: Token | WrappedTokenInfo): SerializedToken {
   return {
     chainId: token.chainId,
@@ -404,20 +406,27 @@ export const useUserFavoriteTokens = (chainId: ChainId) => {
 
   const favoriteTokens = useMemo(() => {
     if (!chainId || !defaultTokens) return undefined
-    const favoritedToken = favoriteTokensByChainId?.[chainId]
-    const favoritedTokenAddresses = favoritedToken
-      ? defaultTokens
-          .filter(address => favoritedToken[address] !== false)
-          .concat(Object.keys(favoritedToken).filter(address => favoritedToken[address]))
-      : []
+    const favoritedTokens = favoriteTokensByChainId?.[chainId] || {}
+    const favoritedTokenAddresses = defaultTokens
+      .filter(address => favoritedTokens[address] !== false)
+      .concat(Object.keys(favoritedTokens).filter(address => favoritedTokens[address]))
+
     return [...new Set(favoritedTokenAddresses)]
   }, [chainId, favoriteTokensByChainId, defaultTokens])
 
   const toggleFavoriteToken = useCallback(
     (payload: ToggleFavoriteTokenPayload) => {
+      // Is adding favorite and reached max limit
+      if (
+        favoriteTokens &&
+        favoriteTokens?.indexOf(payload.address) < 0 &&
+        favoriteTokens.length >= MAX_FAVORITE_LIMIT
+      ) {
+        return
+      }
       dispatch(toggleFavoriteTokenAction(payload))
     },
-    [dispatch],
+    [dispatch, favoriteTokens],
   )
 
   return { favoriteTokens, toggleFavoriteToken }
diff --git a/src/state/user/reducer.ts b/src/state/user/reducer.ts
index c5cab60448..74ab3bd0f5 100644
--- a/src/state/user/reducer.ts
+++ b/src/state/user/reducer.ts
@@ -109,15 +109,14 @@ interface UserState {
       }
     >
   >
-  // favoriteTokensByChainIdv2: Partial<
-  //   Record<
-  //     ChainId,
-  //     {
-  //       [address: string]: boolean
-  //     }
-  //   >
-  // >
-  favoriteTokensByChainIdv2: any
+  favoriteTokensByChainIdv2: Partial<
+    Record<
+      ChainId,
+      {
+        [address: string]: boolean
+      }
+    >
+  >
   readonly chainId: ChainId
   acceptedTermVersion: number | null
   viewMode: VIEW_MODE
@@ -323,37 +322,13 @@ export default createReducer(initialState, builder =>
         state.favoriteTokensByChainId = undefined
       }
 
-      if (!state.favoriteTokensByChainIdv2[chainId]) {
-        state.favoriteTokensByChainIdv2[chainId] = {}
-      }
-
-      state.favoriteTokensByChainIdv2[chainId][address] = !state.favoriteTokensByChainIdv2[chainId][address]
-
-      // if (!state.favoriteTokensByChainId) {
-      //   state.favoriteTokensByChainId = {}
-      // }
+      let favoriteTokens = state.favoriteTokensByChainIdv2[chainId]
 
-      // let favoriteTokens = state.favoriteTokensByChainId[chainId]
-      // if (!favoriteTokens) {
-      //   favoriteTokens = defaultCommonTokens
-      //   state.favoriteTokensByChainId[chainId] = favoriteTokens
-      // }
-
-      // if (isNative) {
-      //   const previousValue = favoriteTokens.includeNativeToken
-      //   favoriteTokens.includeNativeToken = !previousValue
-      //   return
-      // }
+      if (!favoriteTokens) {
+        favoriteTokens = {}
+      }
 
-      // if (address) {
-      //   // this is intentionally added, to remove compiler error
-      //   const index = favoriteTokens.addresses.findIndex(addr => addr === address)
-      //   if (index === -1) {
-      //     favoriteTokens.addresses.push(address)
-      //     return
-      //   }
-      //   favoriteTokens.addresses.splice(index, 1)
-      // }
+      favoriteTokens[address] = !favoriteTokens[address]
     })
     .addCase(updateChainId, (state, { payload: chainId }) => {
       state.chainId = chainId