diff --git a/.github/workflows/pr.yaml b/.github/workflows/pr.yaml
index e19ada6545..0b9eaa7c9a 100644
--- a/.github/workflows/pr.yaml
+++ b/.github/workflows/pr.yaml
@@ -116,7 +116,6 @@ jobs:
           NODE_OPTIONS: '--max_old_space_size=4096'
         run: yarn build-prod
 
-
       - name: Docker build and push
         uses: docker/build-push-action@v2
         with:
diff --git a/src/components/KyberAITokenBanner/index.tsx b/src/components/KyberAITokenBanner/index.tsx
index 7f4696f0f7..b4662bcd10 100644
--- a/src/components/KyberAITokenBanner/index.tsx
+++ b/src/components/KyberAITokenBanner/index.tsx
@@ -20,7 +20,6 @@ import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel'
 import useTheme from 'hooks/useTheme'
 import KyberScoreMeter from 'pages/TrueSightV2/components/KyberScoreMeter'
 import { NETWORK_TO_CHAINID } from 'pages/TrueSightV2/constants'
-import { SUPPORTED_NETWORK_KYBERAI } from 'pages/TrueSightV2/constants/index'
 import { useTokenOverviewQuery } from 'pages/TrueSightV2/hooks/useKyberAIData'
 import { calculateValueToColor } from 'pages/TrueSightV2/utils'
 import { useIsWhiteListKyberAI, useShowKyberAIBanner } from 'state/user/hooks'
@@ -36,7 +35,6 @@ const KyberAITokenBanner = ({
   const { chainId, account } = useActiveWeb3React()
   const { isWhiteList } = useIsWhiteListKyberAI()
   const isShowKyberAIBanner = useShowKyberAIBanner()
-
   const { mixpanelHandler } = useMixpanel()
   const chain = Object.keys(NETWORK_TO_CHAINID).find(i => NETWORK_TO_CHAINID[i] === chainId)
   const above768 = useMedia(`(min-width:${MEDIA_WIDTHS.upToSmall}px)`)
@@ -68,7 +66,7 @@ const KyberAITokenBanner = ({
     { skip: !account || !isWhiteList || !chain || !isShowKyberAIBanner, refetchOnMountOrArgChange: true },
   )
 
-  const token: { kyberScore?: number; label?: string; address?: string; logo?: string; symbol?: string } | undefined =
+  const token: { kyberScore?: number; label?: string; assetId?: number; logo?: string; symbol?: string } | undefined =
     useMemo(() => {
       if (staticMode) {
         return undefined
@@ -88,7 +86,7 @@ const KyberAITokenBanner = ({
       return {
         kyberScore: token?.kyberScore?.score,
         label: token?.kyberScore?.label,
-        address: '', //todo
+        assetId: token?.assetId,
         logo: token?.logo,
         symbol: token?.symbol,
       }
@@ -99,24 +97,23 @@ const KyberAITokenBanner = ({
   if (staticMode && isStableCoin(currencyIn?.wrapped.address.toLowerCase())) return null
   const staticModeCurrency = !currencyIn || KNC[chainId].equals(currencyIn) ? NativeCurrencies[chainId] : currencyIn
   const color = staticMode ? theme.primary : calculateValueToColor(token?.kyberScore || 0, theme)
+
+  const handleBannerClick = () => {
+    if (staticMode) {
+      window.open(APP_PATHS.KYBERAI_ABOUT, '_blank')
+    } else {
+      if (!token) return
+      window.open(APP_PATHS.KYBERAI_EXPLORE + '/' + token?.assetId, '_blank')
+    }
+    mixpanelHandler(MIXPANEL_TYPE.KYBERAI_SWAP_INSIGHT_CLICK, {
+      input_token: token0?.symbol?.toUpperCase(),
+      output_token: token1?.symbol?.toUpperCase(),
+    })
+  }
   return (
     <Wrapper>
       {above768 ? (
-        <Container
-          color={color}
-          onClick={() => {
-            mixpanelHandler(MIXPANEL_TYPE.KYBERAI_SWAP_INSIGHT_CLICK, {
-              input_token: token0?.symbol?.toUpperCase(),
-              output_token: token1?.symbol?.toUpperCase(),
-            })
-            staticMode
-              ? window.open(APP_PATHS.KYBERAI_ABOUT, '_blank')
-              : window.open(
-                  APP_PATHS.KYBERAI_EXPLORE + '/' + SUPPORTED_NETWORK_KYBERAI[chainId] + '/' + token?.address,
-                  '_blank',
-                )
-          }}
-        >
+        <Container color={color} onClick={handleBannerClick}>
           <RowFit gap="8px">
             {staticMode ? (
               <CurrencyLogo currency={staticModeCurrency} size={'32px'} />
@@ -172,19 +169,7 @@ const KyberAITokenBanner = ({
                 </Text>{' '}
                 here!{' '}
               </Trans>
-              <ArrowRight
-                size={14}
-                stroke={theme.primary}
-                style={{ cursor: 'pointer' }}
-                onClick={() => {
-                  mixpanelHandler(MIXPANEL_TYPE.KYBERAI_SWAP_INSIGHT_CLICK, {
-                    input_token: token0?.symbol?.toUpperCase(),
-                    output_token: token1?.symbol?.toUpperCase(),
-                  })
-
-                  //navigate(APP_PATHS.KYBERAI_EXPLORE + '/' + SUPPORTED_NETWORK_KYBERAI[chainId] + '/' + token?.address)
-                }}
-              />
+              <ArrowRight size={14} stroke={theme.primary} style={{ cursor: 'pointer' }} />
             </RowFit>
           </Column>
           <div style={{ width: '100px' }}></div>
@@ -193,14 +178,7 @@ const KyberAITokenBanner = ({
         <MobileContainer
           color={color}
           onClick={() => {
-            mixpanelHandler(MIXPANEL_TYPE.KYBERAI_SWAP_INSIGHT_CLICK, {
-              input_token: token0?.symbol?.toUpperCase(),
-              output_token: token1?.symbol?.toUpperCase(),
-            })
-            // window.open(
-            //   APP_PATHS.KYBERAI_EXPLORE + '/' + SUPPORTED_NETWORK_KYBERAI[chainId] + '/' + token?.address,
-            //   '_blank',
-            // )
+            handleBannerClick
           }}
         >
           <RowBetween>
diff --git a/src/components/Select.tsx b/src/components/Select.tsx
deleted file mode 100644
index 3441fb4e8c..0000000000
--- a/src/components/Select.tsx
+++ /dev/null
@@ -1,179 +0,0 @@
-import { AnimatePresence, motion } from 'framer-motion'
-import { CSSProperties, ReactNode, useEffect, useRef, useState } from 'react'
-import styled from 'styled-components'
-
-import { useOnClickOutside } from 'hooks/useOnClickOutside'
-
-import { DropdownArrowIcon } from './ArrowRotate'
-
-const SelectWrapper = styled.div`
-  cursor: pointer;
-  border-radius: 12px;
-  background: ${({ theme }) => theme.buttonBlack};
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  position: relative;
-  font-size: 12px;
-  color: ${({ theme }) => theme.subText};
-  padding: 12px;
-  :hover {
-    filter: brightness(1.2);
-    z-index: 10;
-  }
-`
-
-const SelectMenu = styled(motion.div)`
-  position: absolute;
-  top: 40px;
-  left: 0;
-  right: 0;
-  margin: auto;
-  border-radius: 16px;
-  filter: drop-shadow(0px 4px 12px rgba(0, 0, 0, 0.36));
-  z-index: 2;
-  background: ${({ theme }) => theme.tabActive};
-  padding: 10px 0px;
-  width: max-content;
-`
-
-const Option = styled.div<{ $selected: boolean }>`
-  padding: 10px 18px;
-  cursor: pointer;
-  font-size: 12px;
-  color: ${({ theme }) => theme.subText};
-  white-space: nowrap;
-  &:hover {
-    background-color: ${({ theme }) => theme.background};
-  }
-  font-weight: ${({ $selected }) => ($selected ? '500' : 'unset')};
-`
-
-const SelectedWrap = styled.div`
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  flex: 1;
-`
-export type SelectOption = { value?: string | number; label: ReactNode; onSelect?: () => void }
-
-const getOptionValue = (option: SelectOption | undefined) => {
-  if (!option) return ''
-  return typeof option !== 'object' ? option : option.value ?? ''
-}
-const getOptionLabel = (option: SelectOption | undefined) => {
-  if (!option) return ''
-  return typeof option !== 'object' ? option : option.label || option.value
-}
-
-function isElementOverflowBottom(el: HTMLElement) {
-  const rect = el.getBoundingClientRect()
-  return rect.bottom >= (window.innerHeight || document?.documentElement?.clientHeight)
-}
-
-function Select({
-  options = [],
-  activeRender,
-  optionRender,
-  style = {},
-  menuStyle = {},
-  optionStyle = {},
-  onChange,
-  value: selectedValue,
-  className,
-  forceMenuPlacementTop = false,
-  arrowColor,
-  dropdownRender,
-}: {
-  value?: string | number
-  className?: string
-  options: SelectOption[]
-  dropdownRender?: (menu: ReactNode) => ReactNode
-  activeRender?: (selectedItem: SelectOption | undefined) => ReactNode
-  optionRender?: (option: SelectOption | undefined) => ReactNode
-  style?: CSSProperties
-  menuStyle?: CSSProperties
-  optionStyle?: CSSProperties
-  onChange?: (value: any) => void
-  forceMenuPlacementTop?: boolean
-  arrowColor?: string
-}) {
-  const [selected, setSelected] = useState(getOptionValue(options?.[0]))
-  const [showMenu, setShowMenu] = useState(false)
-  const [menuPlacementTop, setForceMenuPlacementTop] = useState(forceMenuPlacementTop)
-
-  useEffect(() => {
-    const findValue = options.find(item => getOptionValue(item) === selectedValue)?.value
-    setSelected(findValue || getOptionValue(options?.[0]))
-  }, [selectedValue, options])
-
-  useEffect(() => {
-    if (!refMenu?.current) return
-    if (!menuPlacementTop) setForceMenuPlacementTop(showMenu && isElementOverflowBottom(refMenu.current))
-  }, [showMenu, menuPlacementTop])
-
-  const ref = useRef(null)
-  useOnClickOutside(ref, () => {
-    setShowMenu(false)
-  })
-  const selectedInfo = options.find(item => getOptionValue(item) === selected)
-  const refMenu = useRef<HTMLDivElement>(null)
-
-  const renderMenu = () => {
-    return options.map(item => {
-      const value = getOptionValue(item)
-      const onClick = (e: React.MouseEvent<HTMLDivElement>) => {
-        e.stopPropagation()
-        e.preventDefault()
-        setShowMenu(prev => !prev)
-        if (item.onSelect) item.onSelect?.()
-        else {
-          setSelected(value)
-          onChange?.(value)
-        }
-      }
-      return (
-        <Option
-          key={value}
-          role="button"
-          $selected={value === selectedValue || value === getOptionValue(selectedInfo)}
-          onClick={onClick}
-          style={optionStyle}
-        >
-          {optionRender ? optionRender(item) : getOptionLabel(item)}
-        </Option>
-      )
-    })
-  }
-
-  return (
-    <SelectWrapper
-      ref={ref}
-      role="button"
-      onClick={() => {
-        setShowMenu(!showMenu)
-      }}
-      style={style}
-      className={className}
-    >
-      <SelectedWrap>{activeRender ? activeRender(selectedInfo) : getOptionLabel(selectedInfo)}</SelectedWrap>
-      <DropdownArrowIcon rotate={showMenu} color={arrowColor} />
-      <AnimatePresence>
-        {showMenu && (
-          <SelectMenu
-            initial={{ y: -10, opacity: 0 }}
-            animate={{ y: 0, opacity: 1 }}
-            exit={{ y: -10, opacity: 0 }}
-            transition={{ duration: 0.1 }}
-            style={{ ...menuStyle, ...(menuPlacementTop ? { bottom: 40, top: 'unset' } : {}) }}
-            ref={refMenu}
-          >
-            {dropdownRender ? dropdownRender(renderMenu()) : renderMenu()}
-          </SelectMenu>
-        )}
-      </AnimatePresence>
-    </SelectWrapper>
-  )
-}
-
-export default styled(Select)``
diff --git a/src/pages/MyEarnings/MultipleChainSelectV2/ApplyButton.tsx b/src/components/Select/MultipleChainSelect/ApplyButton.tsx
similarity index 100%
rename from src/pages/MyEarnings/MultipleChainSelectV2/ApplyButton.tsx
rename to src/components/Select/MultipleChainSelect/ApplyButton.tsx
diff --git a/src/pages/MyEarnings/MultipleChainSelectV2/SelectButton.tsx b/src/components/Select/MultipleChainSelect/SelectButton.tsx
similarity index 98%
rename from src/pages/MyEarnings/MultipleChainSelectV2/SelectButton.tsx
rename to src/components/Select/MultipleChainSelect/SelectButton.tsx
index 9c64e2af52..3bf59f0d5c 100644
--- a/src/pages/MyEarnings/MultipleChainSelectV2/SelectButton.tsx
+++ b/src/components/Select/MultipleChainSelect/SelectButton.tsx
@@ -74,7 +74,6 @@ const SelectButton: React.FC<Props> = ({ selectedChainIds, chainIds, activeRende
         paddingRight: '8px',
         justifyContent: 'space-between',
         alignItems: 'center',
-        background: theme.background,
         userSelect: 'none',
         cursor: 'pointer',
         ...activeStyle,
diff --git a/src/pages/MyEarnings/MultipleChainSelectV2/index.tsx b/src/components/Select/MultipleChainSelect/index.tsx
similarity index 96%
rename from src/pages/MyEarnings/MultipleChainSelectV2/index.tsx
rename to src/components/Select/MultipleChainSelect/index.tsx
index 6be07bb188..23580e7505 100644
--- a/src/pages/MyEarnings/MultipleChainSelectV2/index.tsx
+++ b/src/components/Select/MultipleChainSelect/index.tsx
@@ -7,7 +7,7 @@ import styled, { CSSProperties } from 'styled-components'
 
 import { ReactComponent as LogoKyber } from 'assets/svg/logo_kyber.svg'
 import Checkbox from 'components/CheckBox'
-import Select from 'components/SelectV2'
+import Select from 'components/Select'
 import { MouseoverTooltip } from 'components/Tooltip'
 import { NETWORKS_INFO } from 'constants/networks'
 import useChainsConfig from 'hooks/useChainsConfig'
@@ -67,6 +67,14 @@ const Label = styled.span`
   user-select: none;
 `
 
+const StyledSelect = styled(Select)`
+  flex: 0 0 150px;
+  width: 150px;
+  position: relative;
+  border-radius: 18px;
+  background-color: ${({ theme }) => theme.buttonGray};
+`
+
 const MultipleChainSelect: React.FC<MultipleChainSelectProps> = ({ className, style, ...props }) => {
   const { comingSoonList = [], selectedChainIds = [], handleChangeChains, chainIds = [], onTracking } = props
   const options = chainIds.map(id => ({ value: id, label: id }))
@@ -107,10 +115,10 @@ const MultipleChainSelect: React.FC<MultipleChainSelectProps> = ({ className, st
   }, [selectedChains])
 
   return (
-    <Select
+    <StyledSelect
       onHideMenu={onHideMenu}
       className={className}
-      style={{ ...style, flex: '0 0 150px', width: '150px', position: 'relative', zIndex: '3' }}
+      style={style}
       activeRender={_ => <SelectButton {...props} />}
       options={options}
       optionStyle={{ padding: 0 }}
diff --git a/src/components/SelectV2.tsx b/src/components/Select/index.tsx
similarity index 72%
rename from src/components/SelectV2.tsx
rename to src/components/Select/index.tsx
index ea18a5b388..105c00edae 100644
--- a/src/components/SelectV2.tsx
+++ b/src/components/Select/index.tsx
@@ -1,13 +1,14 @@
+import { Placement } from '@popperjs/core'
 import { Portal } from '@reach/portal'
 import { AnimatePresence, motion } from 'framer-motion'
-import { CSSProperties, ReactNode, useCallback, useEffect, useRef, useState } from 'react'
+import { CSSProperties, ReactNode, useEffect, useRef, useState } from 'react'
 import { usePopper } from 'react-popper'
 import styled from 'styled-components'
 
-import useInterval from 'hooks/useInterval'
+import { Z_INDEXS } from 'constants/styles'
 import { useOnClickOutside } from 'hooks/useOnClickOutside'
 
-import { DropdownArrowIcon } from './ArrowRotate'
+import { DropdownArrowIcon } from '../ArrowRotate'
 
 const SelectWrapper = styled.div`
   cursor: pointer;
@@ -26,12 +27,8 @@ const SelectWrapper = styled.div`
 `
 
 const SelectMenu = styled(motion.div)`
-  position: absolute;
-  top: 0px;
-  left: 0;
-  right: 0;
-  margin: auto;
   border-radius: 16px;
+  overflow: hidden;
   filter: drop-shadow(0px 4px 12px rgba(0, 0, 0, 0.36));
   z-index: 2;
   background: ${({ theme }) => theme.tabActive};
@@ -69,11 +66,6 @@ const getOptionLabel = (option: SelectOption | undefined) => {
   return typeof option !== 'object' ? option : option.label || option.value
 }
 
-// function isElementOverflowBottom(el: HTMLElement) {
-//   const rect = el.getBoundingClientRect()
-//   return rect.bottom >= (window.innerHeight || document?.documentElement?.clientHeight)
-// }
-
 const defaultOffset: [number, number] = [0 /* skidding */, 2 /* distance */]
 function Select({
   options = [],
@@ -89,6 +81,7 @@ function Select({
   arrowColor,
   dropdownRender,
   onHideMenu,
+  placement = 'bottom',
 }: {
   value?: string | number
   className?: string
@@ -102,6 +95,7 @@ function Select({
   onChange?: (value: any) => void
   forceMenuPlacementTop?: boolean
   arrowColor?: string
+  placement?: string
   onHideMenu?: () => void // hide without changes
 }) {
   const [selected, setSelected] = useState(getOptionValue(options?.[0]))
@@ -113,18 +107,13 @@ function Select({
     setSelected(findValue || getOptionValue(options?.[0]))
   }, [selectedValue, options])
 
-  useEffect(() => {
-    if (!refMenu?.current) return
-    // if (!menuPlacementTop) setForceMenuPlacementTop(showMenu && isElementOverflowBottom(refMenu.current))
-  }, [showMenu, menuPlacementTop])
-  const [referenceElement, setReferenceElement] = useState<HTMLDivElement | null>(null)
+  const ref = useRef<HTMLDivElement>(null)
 
-  useOnClickOutside(referenceElement as any, () => {
+  useOnClickOutside(ref, () => {
     setShowMenu(false)
     onHideMenu?.()
   })
   const selectedInfo = options.find(item => getOptionValue(item) === selected)
-  const refMenu = useRef<HTMLDivElement>(null)
 
   const renderMenu = () => {
     return options.map(item => {
@@ -132,7 +121,7 @@ function Select({
       const onClick = (e: React.MouseEvent<HTMLDivElement>) => {
         e.stopPropagation()
         e.preventDefault()
-        setShowMenu(prev => !prev)
+        setShowMenu(false)
         if (item.onSelect) item.onSelect?.()
         else {
           setSelected(value)
@@ -155,25 +144,18 @@ function Select({
 
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null)
 
-  const { styles, update } = usePopper(referenceElement, popperElement, {
-    placement: 'bottom',
+  const { styles } = usePopper(ref.current, popperElement, {
+    placement: placement as Placement,
     strategy: 'fixed',
     modifiers: [{ name: 'offset', options: { offset: defaultOffset } }],
   })
 
-  const updateCallback = useCallback(() => {
-    update?.()
-  }, [update])
-
-  useInterval(updateCallback, showMenu ? 100 : null)
-
   return (
     <SelectWrapper
-      ref={setReferenceElement as any}
-      // ref={ref}
+      ref={ref}
       role="button"
       onClick={() => {
-        setShowMenu(!showMenu)
+        setShowMenu(v => !v)
       }}
       style={style}
       className={className}
@@ -183,17 +165,24 @@ function Select({
       <AnimatePresence>
         {showMenu && (
           <Portal>
-            <SelectMenu
-              ref={setPopperElement as any}
-              // initial={{ y: -10, opacity: 0 }}
-              // animate={{ y: 0, opacity: 1 }}
-              // exit={{ y: -10, opacity: 0 }}
-              // transition={{ duration: 0.1 }}
-              style={{ ...styles.popper, ...menuStyle, ...(menuPlacementTop ? { bottom: 40, top: 'unset' } : {}) }}
-              // ref={refMenu}
+            <div
+              ref={setPopperElement}
+              style={{
+                ...styles.popper,
+                ...(menuPlacementTop ? { bottom: 40, top: 'unset' } : {}),
+                zIndex: Z_INDEXS.POPOVER_CONTAINER,
+              }}
             >
-              {dropdownRender ? dropdownRender(renderMenu()) : renderMenu()}
-            </SelectMenu>
+              <SelectMenu
+                initial={{ y: -10, opacity: 0 }}
+                animate={{ y: 0, opacity: 1 }}
+                exit={{ y: -10, opacity: 0 }}
+                transition={{ duration: 0.1 }}
+                style={menuStyle}
+              >
+                <div>{dropdownRender ? dropdownRender(renderMenu()) : renderMenu()}</div>
+              </SelectMenu>
+            </div>
           </Portal>
         )}
       </AnimatePresence>
diff --git a/src/components/swapv2/LimitOrder/ExpirePicker.tsx b/src/components/swapv2/LimitOrder/ExpirePicker.tsx
index e230c9f7ae..a81ade16f2 100644
--- a/src/components/swapv2/LimitOrder/ExpirePicker.tsx
+++ b/src/components/swapv2/LimitOrder/ExpirePicker.tsx
@@ -132,11 +132,10 @@ export default function DateTimePicker({
     menuStyle: {
       height: 250,
       overflow: 'scroll',
-      top: 'unset',
-      right: 'unset',
       textAlign: 'center',
       width: 'fit-content',
     } as CSSProperties,
+    placement: 'left',
   }
 
   const expireResult = defaultExpire ? Date.now() + defaultExpire * 1000 : date
diff --git a/src/pages/MyEarnings/ChainSelect.tsx b/src/pages/MyEarnings/ChainSelect.tsx
index d8098e4919..5d734e2e27 100644
--- a/src/pages/MyEarnings/ChainSelect.tsx
+++ b/src/pages/MyEarnings/ChainSelect.tsx
@@ -6,6 +6,7 @@ import { Flex, Text } from 'rebass'
 import styled from 'styled-components'
 
 import { ButtonOutlined } from 'components/Button'
+import MultipleChainSelect from 'components/Select/MultipleChainSelect'
 import {
   COMING_SOON_NETWORKS_FOR_MY_EARNINGS,
   COMING_SOON_NETWORKS_FOR_MY_EARNINGS_CLASSIC,
@@ -16,7 +17,6 @@ import { VERSION } from 'constants/v2'
 import { useActiveWeb3React } from 'hooks'
 import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel'
 import useTheme from 'hooks/useTheme'
-import MultipleChainSelect from 'pages/MyEarnings/MultipleChainSelect'
 import { AppState } from 'state'
 import { useAppSelector } from 'state/hooks'
 import { selectChains } from 'state/myEarnings/actions'
diff --git a/src/pages/MyEarnings/MultipleChainSelect/PopoverBody.tsx b/src/pages/MyEarnings/MultipleChainSelect/PopoverBody.tsx
deleted file mode 100644
index 4ccd478a59..0000000000
--- a/src/pages/MyEarnings/MultipleChainSelect/PopoverBody.tsx
+++ /dev/null
@@ -1,256 +0,0 @@
-import { Trans } from '@lingui/macro'
-import { rgba } from 'polished'
-import { MouseEventHandler, useEffect, useRef, useState } from 'react'
-import { Box, Flex, Text } from 'rebass'
-import styled from 'styled-components'
-
-import { ReactComponent as LogoKyber } from 'assets/svg/logo_kyber.svg'
-import { ButtonPrimary } from 'components/Button'
-import Checkbox from 'components/CheckBox'
-import { MouseoverTooltip } from 'components/Tooltip'
-import { NETWORKS_INFO } from 'constants/networks'
-import useChainsConfig from 'hooks/useChainsConfig'
-import useTheme from 'hooks/useTheme'
-
-import { MultipleChainSelectProps, StyledLogo } from '.'
-
-const ChainListWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  max-height: 180px;
-  overflow: auto;
-
-  /* width */
-  ::-webkit-scrollbar {
-    display: unset;
-    width: 8px;
-    border-radius: 999px;
-  }
-
-  /* Track */
-  ::-webkit-scrollbar-track {
-    background: transparent;
-    border-radius: 999px;
-  }
-
-  /* Handle */
-  ::-webkit-scrollbar-thumb {
-    background: ${({ theme }) => rgba(theme.subText, 0.4)};
-    border-radius: 999px;
-  }
-`
-
-type ApplyButtonProps = {
-  disabled: boolean
-  onClick: MouseEventHandler<HTMLButtonElement>
-  numOfChains: number
-}
-
-const ApplyButton: React.FC<ApplyButtonProps> = ({ disabled, onClick, numOfChains }) => {
-  const theme = useTheme()
-  return (
-    <ButtonPrimary
-      disabled={disabled}
-      style={{
-        height: '40px',
-        padding: '0 12px',
-      }}
-      onClick={onClick}
-    >
-      <Flex
-        as="span"
-        sx={{
-          width: '100%',
-          display: 'inline-flex',
-          justifyContent: 'space-between',
-          alignItems: 'center',
-        }}
-      >
-        <Trans>View Selected Chains</Trans>
-        <Flex
-          as="span"
-          sx={{
-            width: '22px',
-            height: '22px',
-            borderRadius: '999px',
-            display: 'inline-flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            background: disabled ? undefined : theme.darkText,
-            color: disabled ? theme.border : theme.primary,
-          }}
-        >
-          {numOfChains ? String(numOfChains).padStart(2, '0') : 0}
-        </Flex>
-      </Flex>
-    </ButtonPrimary>
-  )
-}
-
-const PopoverBody: React.FC<MultipleChainSelectProps & { onClose: () => void }> = ({
-  onClose,
-  comingSoonList = [],
-  chainIds,
-  selectedChainIds,
-  handleChangeChains,
-  onTracking,
-  menuStyle,
-}) => {
-  const theme = useTheme()
-  const selectAllRef = useRef<HTMLInputElement>(null)
-
-  const { activeChains } = useChainsConfig()
-  const selectedChains = selectedChainIds.filter(item => !comingSoonList.includes(item))
-
-  const [localSelectedChains, setLocalSelectedChains] = useState(() => selectedChains)
-
-  const networkList = chainIds.filter(
-    item => !comingSoonList.includes(item) && activeChains.some(e => e.chainId === item),
-  )
-
-  const isAllSelected = localSelectedChains.length === networkList.length
-
-  useEffect(() => {
-    setLocalSelectedChains(selectedChains)
-    // eslint-disable-next-line
-  }, [selectedChains.length])
-
-  useEffect(() => {
-    if (!selectAllRef.current) {
-      return
-    }
-
-    const indeterminate = 0 < localSelectedChains.length && localSelectedChains.length < networkList.length
-    selectAllRef.current.indeterminate = indeterminate
-  }, [localSelectedChains, networkList.length])
-
-  const allNetworks = [...networkList, ...comingSoonList]
-
-  const onChangeChain = () => {
-    if (isAllSelected) {
-      setLocalSelectedChains([])
-    } else {
-      onTracking?.()
-      setLocalSelectedChains(networkList)
-    }
-  }
-
-  return (
-    <Flex
-      sx={{
-        flexDirection: 'column',
-        gap: '12px',
-        padding: '16px',
-        borderRadius: '20px',
-        background: theme.tableHeader,
-        width: '250px',
-        position: 'absolute',
-        top: 'calc(100% + 8px)',
-        right: '0',
-        ...menuStyle,
-      }}
-    >
-      <Flex
-        sx={{
-          alignItems: 'center',
-          gap: '8px',
-          padding: '4px',
-        }}
-      >
-        <Checkbox type="checkbox" checked={isAllSelected} ref={selectAllRef} onChange={onChangeChain} />
-
-        <Flex width="20px" alignItems="center" justifyContent="center">
-          <LogoKyber width="14px" height="auto" color={theme.primary} />
-        </Flex>
-
-        <Text
-          as="span"
-          sx={{
-            fontWeight: 500,
-            fontSize: '14px',
-            lineHeight: '20px',
-            color: theme.text,
-          }}
-        >
-          <Trans>All Chains</Trans>
-        </Text>
-      </Flex>
-
-      <ChainListWrapper>
-        {allNetworks.map((network, i) => {
-          const config = NETWORKS_INFO[network]
-
-          const isComingSoon = comingSoonList.includes(network)
-          const isSelected = isComingSoon ? false : localSelectedChains.includes(network)
-
-          const handleClick = () => {
-            if (isComingSoon) return
-            if (isSelected) {
-              setLocalSelectedChains(localSelectedChains.filter(chain => chain !== network))
-            } else {
-              setLocalSelectedChains([...localSelectedChains, network])
-            }
-          }
-
-          return (
-            <MouseoverTooltip
-              key={i}
-              text={isComingSoon ? 'Coming soon' : ''}
-              width="fit-content"
-              placement="top"
-              containerStyle={{ width: 'fit-content' }}
-            >
-              <Flex
-                onClick={handleClick}
-                sx={{
-                  alignItems: 'center',
-                  gap: '8px',
-                  padding: '4px',
-                  cursor: isComingSoon ? 'not-allowed' : 'pointer',
-                  userSelect: 'none',
-                  opacity: isComingSoon ? 0.6 : 1,
-                }}
-              >
-                <Checkbox type="checkbox" checked={isSelected} onChange={handleClick} />
-
-                <StyledLogo src={theme.darkMode && config.iconDark ? config.iconDark : config.icon} />
-
-                <Text
-                  as="span"
-                  sx={{
-                    fontWeight: 500,
-                    fontSize: '14px',
-                    lineHeight: '20px',
-                    color: theme.text,
-                  }}
-                >
-                  {config.name}
-                </Text>
-              </Flex>
-            </MouseoverTooltip>
-          )
-        })}
-      </ChainListWrapper>
-
-      <Box
-        sx={{
-          width: '100%',
-          height: '0',
-          borderBottom: `1px solid ${theme.border}`,
-        }}
-      />
-
-      <ApplyButton
-        disabled={!localSelectedChains.length}
-        onClick={() => {
-          handleChangeChains(localSelectedChains)
-          onClose()
-        }}
-        numOfChains={localSelectedChains.length}
-      />
-    </Flex>
-  )
-}
-
-export default PopoverBody
diff --git a/src/pages/MyEarnings/MultipleChainSelect/SelectButton.tsx b/src/pages/MyEarnings/MultipleChainSelect/SelectButton.tsx
deleted file mode 100644
index a14e6b8bc0..0000000000
--- a/src/pages/MyEarnings/MultipleChainSelect/SelectButton.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import { Trans } from '@lingui/macro'
-import { Flex } from 'rebass'
-import styled from 'styled-components'
-
-import { ReactComponent as DropdownSVG } from 'assets/svg/down.svg'
-import { ReactComponent as LogoKyber } from 'assets/svg/logo_kyber.svg'
-import { NETWORKS_INFO } from 'constants/networks'
-import useTheme from 'hooks/useTheme'
-
-import { MultipleChainSelectProps, StyledLogo } from '.'
-
-const DropdownIcon = styled(DropdownSVG)`
-  transition: transform 300ms;
-  color: ${({ theme }) => theme.subText};
-  &[data-flip='true'] {
-    transform: rotate(180deg);
-  }
-`
-
-const ButtonBodyWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 8px;
-`
-
-const Label = styled.span<{ labelColor?: string }>`
-  font-weight: 500;
-  font-size: 14px;
-  line-height: 20px;
-  color: ${({ theme, labelColor }) => labelColor || theme.subText};
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-`
-type Props = {
-  expanded: boolean
-  onClick: () => void
-} & MultipleChainSelectProps
-const SelectButton: React.FC<Props> = ({
-  expanded,
-  onClick,
-  selectedChainIds,
-  chainIds,
-  activeRender,
-  activeStyle,
-  labelColor,
-}) => {
-  const theme = useTheme()
-
-  const renderButtonBody = () => {
-    if (selectedChainIds.length === chainIds.length) {
-      return (
-        <ButtonBodyWrapper>
-          <LogoKyber color={theme.subText} />
-          <Label labelColor={labelColor}>
-            <Trans>All Chains</Trans>
-          </Label>
-        </ButtonBodyWrapper>
-      )
-    }
-
-    if (selectedChainIds.length === 1) {
-      const config = NETWORKS_INFO[selectedChainIds[0]]
-      const iconSrc = theme.darkMode && config.iconDark ? config.iconDark : config.icon
-
-      return (
-        <ButtonBodyWrapper>
-          <StyledLogo src={iconSrc} />
-          <Label labelColor={labelColor}>{config.name}</Label>
-        </ButtonBodyWrapper>
-      )
-    }
-
-    return (
-      <ButtonBodyWrapper>
-        {selectedChainIds.slice(0, 3).map(chainId => {
-          const config = NETWORKS_INFO[chainId]
-          const iconSrc = theme.darkMode && config.iconDark ? config.iconDark : config.icon
-
-          return <StyledLogo src={iconSrc} key={chainId} />
-        })}
-
-        {selectedChainIds.length > 3 && `+${selectedChainIds.length - 3}`}
-      </ButtonBodyWrapper>
-    )
-  }
-
-  return (
-    <Flex
-      sx={{
-        width: '100%',
-        height: '100%',
-        paddingLeft: '12px',
-        paddingRight: '8px',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        borderRadius: '18px',
-        background: theme.background,
-        userSelect: 'none',
-        cursor: 'pointer',
-        ...activeStyle,
-      }}
-      onClick={onClick}
-    >
-      {activeRender ? activeRender(renderButtonBody()) : renderButtonBody()}
-      <DropdownIcon data-flip={expanded} />
-    </Flex>
-  )
-}
-
-export default SelectButton
diff --git a/src/pages/MyEarnings/MultipleChainSelect/index.tsx b/src/pages/MyEarnings/MultipleChainSelect/index.tsx
deleted file mode 100644
index a691f8e05b..0000000000
--- a/src/pages/MyEarnings/MultipleChainSelect/index.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import { ChainId } from '@kyberswap/ks-sdk-core'
-import { AnimatePresence, motion } from 'framer-motion'
-import { ReactNode, useRef, useState } from 'react'
-import { Flex } from 'rebass'
-import styled, { CSSProperties } from 'styled-components'
-
-import { useOnClickOutside } from 'hooks/useOnClickOutside'
-
-import PopoverBody from './PopoverBody'
-import SelectButton from './SelectButton'
-
-export const StyledLogo = styled.img`
-  width: 20px;
-  height: auto;
-`
-
-export type MultipleChainSelectProps = {
-  className?: string
-  comingSoonList?: ChainId[]
-  chainIds: ChainId[]
-  selectedChainIds: ChainId[]
-  handleChangeChains: (v: ChainId[]) => void
-  onTracking?: () => void
-  menuStyle?: CSSProperties
-  style?: CSSProperties
-  activeStyle?: CSSProperties
-  labelColor?: string
-  activeRender?: (node: ReactNode) => ReactNode
-}
-const MultipleChainSelect: React.FC<MultipleChainSelectProps> = ({ className, style, ...props }) => {
-  const [expanded, setExpanded] = useState(false)
-  const ref = useRef<HTMLDivElement>(null)
-
-  const collapse = () => {
-    setExpanded(false)
-  }
-
-  useOnClickOutside(ref, expanded ? collapse : undefined)
-
-  return (
-    <Flex
-      ref={ref}
-      sx={{
-        flex: '0 0 150px',
-        width: '150px',
-        position: 'relative',
-        zIndex: '3',
-        ...style,
-      }}
-      className={className}
-    >
-      <SelectButton expanded={expanded} onClick={() => setExpanded(e => !e)} {...props} />
-      <AnimatePresence>
-        {expanded && (
-          <motion.div
-            initial={{ y: -10, opacity: 0 }}
-            animate={{ y: 0, opacity: 1 }}
-            exit={{ y: -10, opacity: 0 }}
-            transition={{ duration: 0.1 }}
-            style={{ position: 'absolute', left: 0, top: '100%' }}
-          >
-            <PopoverBody onClose={() => setExpanded(false)} {...props} />
-          </motion.div>
-        )}
-      </AnimatePresence>
-    </Flex>
-  )
-}
-
-export default styled(MultipleChainSelect)``
diff --git a/src/pages/MyEarnings/MyEarningStats/index.tsx b/src/pages/MyEarnings/MyEarningStats/index.tsx
index 6b9f37005d..bfa5b2452f 100644
--- a/src/pages/MyEarnings/MyEarningStats/index.tsx
+++ b/src/pages/MyEarnings/MyEarningStats/index.tsx
@@ -5,6 +5,7 @@ import { Flex, Text } from 'rebass'
 import { useGetClassicEarningQuery, useGetElasticEarningQuery, useGetElasticLegacyEarningQuery } from 'services/earning'
 import styled from 'styled-components'
 
+import MultipleChainSelect from 'components/Select/MultipleChainSelect'
 import {
   COMING_SOON_NETWORKS_FOR_MY_EARNINGS_CLASSIC,
   COMING_SOON_NETWORKS_FOR_MY_EARNINGS_LEGACY,
@@ -12,7 +13,6 @@ import {
 import { useActiveWeb3React } from 'hooks'
 import useTheme from 'hooks/useTheme'
 import ChainSelect from 'pages/MyEarnings/ChainSelect'
-import MultipleChainSelect from 'pages/MyEarnings/MultipleChainSelect'
 import TotalEarningsAndChainSelect from 'pages/MyEarnings/TotalEarningsAndChainSelect'
 import { calculateEarningBreakdowns, calculateTicksOfAccountEarningsInMultipleChains } from 'pages/MyEarnings/utils'
 import { useAppSelector } from 'state/hooks'
diff --git a/src/pages/TrueSightV2/components/MultipleChainDropdown.tsx b/src/pages/TrueSightV2/components/MultipleChainDropdown.tsx
index 7c288a5de0..63b9b6aee2 100644
--- a/src/pages/TrueSightV2/components/MultipleChainDropdown.tsx
+++ b/src/pages/TrueSightV2/components/MultipleChainDropdown.tsx
@@ -48,6 +48,16 @@ const StyledMobileChainIcon = styled.div`
   padding: 10px 8px;
 `
 const ChainIcon = ({ id, name, onClick }: { id: ICON_ID; name: string; onClick: () => void }) => {
+  const theme = useTheme()
+  if (isMobile)
+    return (
+      <StyledMobileChainIcon onClick={onClick}>
+        <Icon id={id} size={20} />{' '}
+        <Text fontSize="12px" color={theme.subText}>
+          {name}
+        </Text>
+      </StyledMobileChainIcon>
+    )
   return (
     <SimpleTooltip text={name}>
       <StyledChainIcon onClick={onClick}>
@@ -57,106 +67,97 @@ const ChainIcon = ({ id, name, onClick }: { id: ICON_ID; name: string; onClick:
   )
 }
 
-const MobileChainIcon = ({ id, name, onClick }: { id: ICON_ID; name: string; onClick: () => void }) => {
-  const theme = useTheme()
-  return (
-    <StyledMobileChainIcon onClick={onClick}>
-      <Icon id={id} size={20} />{' '}
-      <Text fontSize="12px" color={theme.subText}>
-        {name}
-      </Text>
-    </StyledMobileChainIcon>
-  )
-}
-
 const MultipleChainDropdown = React.forwardRef(
   (
     props: {
       show: boolean
       tokens?: Array<{ address: string; chain: string }>
       onChainClick: (chain: string, address: string) => void
+      onDismiss?: () => void
     },
     ref,
   ) => {
-    const { show, tokens, onChainClick } = props
+    const { show, tokens, onChainClick, onDismiss } = props
+
+    const renderOptions = () =>
+      tokens?.map((item: { address: string; chain: string }) => {
+        if (item.chain === 'ethereum')
+          return (
+            <ChainIcon
+              key={item.address}
+              id="eth-mono"
+              name="Ethereum"
+              onClick={() => onChainClick('ethereum', item.address)}
+            />
+          )
+        if (item.chain === 'bsc')
+          return (
+            <ChainIcon
+              key={item.address}
+              id="bnb-mono"
+              name="Binance"
+              onClick={() => onChainClick('bsc', item.address)}
+            />
+          )
+        if (item.chain === 'avalanche')
+          return (
+            <ChainIcon
+              key={item.address}
+              id="ava-mono"
+              name="Avalanche"
+              onClick={() => onChainClick('avalanche', item.address)}
+            />
+          )
+        if (item.chain === 'polygon')
+          return (
+            <ChainIcon
+              key={item.address}
+              id="matic-mono"
+              name="Polygon"
+              onClick={() => onChainClick('polygon', item.address)}
+            />
+          )
+        if (item.chain === 'arbitrum')
+          return (
+            <ChainIcon
+              key={item.address}
+              id="arbitrum-mono"
+              name="Arbitrum"
+              onClick={() => onChainClick('arbitrum', item.address)}
+            />
+          )
+        if (item.chain === 'fantom')
+          return (
+            <ChainIcon
+              key={item.address}
+              id="fantom-mono"
+              name="Fantom"
+              onClick={() => onChainClick('fantom', item.address)}
+            />
+          )
+        if (item.chain === 'optimism')
+          return (
+            <ChainIcon
+              key={item.address}
+              id="optimism-mono"
+              name="Optimism"
+              onClick={() => onChainClick('optimism', item.address)}
+            />
+          )
+        return <></>
+      })
+
     const theme = useTheme()
     if (isMobile) {
       return (
-        <Modal isOpen={show}>
+        <Modal isOpen={show} onDismiss={onDismiss}>
           <Column padding="24px" width="100%" gap="12px" onClick={e => e.stopPropagation()}>
             <Row>
               <Text fontSize="20px" fontWeight={500}>
                 Select Chain
               </Text>
             </Row>
-            <Row style={{ flexWrap: 'wrap', gap: '12px', marginTop: '12px' }}>
-              {tokens?.map((item: { address: string; chain: string }) => {
-                if (item.chain === 'ethereum')
-                  return (
-                    <MobileChainIcon
-                      key={item.address}
-                      id="eth-mono"
-                      name="Ethereum"
-                      onClick={() => onChainClick('ethereum', item.address)}
-                    />
-                  )
-                if (item.chain === 'bsc')
-                  return (
-                    <MobileChainIcon
-                      key={item.address}
-                      id="bnb-mono"
-                      name="Binance"
-                      onClick={() => onChainClick('bsc', item.address)}
-                    />
-                  )
-                if (item.chain === 'avalanche')
-                  return (
-                    <MobileChainIcon
-                      key={item.address}
-                      id="ava-mono"
-                      name="Avalanche"
-                      onClick={() => onChainClick('avalanche', item.address)}
-                    />
-                  )
-                if (item.chain === 'polygon')
-                  return (
-                    <MobileChainIcon
-                      key={item.address}
-                      id="matic-mono"
-                      name="Polygon"
-                      onClick={() => onChainClick('polygon', item.address)}
-                    />
-                  )
-                if (item.chain === 'arbitrum')
-                  return (
-                    <MobileChainIcon
-                      key={item.address}
-                      id="arbitrum-mono"
-                      name="Arbitrum"
-                      onClick={() => onChainClick('arbitrum', item.address)}
-                    />
-                  )
-                if (item.chain === 'fantom')
-                  return (
-                    <MobileChainIcon
-                      key={item.address}
-                      id="fantom-mono"
-                      name="Fantom"
-                      onClick={() => onChainClick('fantom', item.address)}
-                    />
-                  )
-                if (item.chain === 'optimism')
-                  return (
-                    <MobileChainIcon
-                      key={item.address}
-                      id="optimism-mono"
-                      name="Optimism"
-                      onClick={() => onChainClick('optimism', item.address)}
-                    />
-                  )
-                return <></>
-              })}
-            </Row>
+            <Row style={{ flexWrap: 'wrap', gap: '12px', marginTop: '12px' }}>{renderOptions()}</Row>
           </Column>
         </Modal>
       )
@@ -170,72 +171,7 @@ const MultipleChainDropdown = React.forwardRef(
         ref={ref}
         onClick={e => e.stopPropagation()}
       >
-        {tokens?.map((item: { address: string; chain: string }) => {
-          if (item.chain === 'ethereum')
-            return (
-              <ChainIcon
-                key={item.address}
-                id="eth-mono"
-                name="Ethereum"
-                onClick={() => onChainClick('ethereum', item.address)}
-              />
-            )
-          if (item.chain === 'bsc')
-            return (
-              <ChainIcon
-                key={item.address}
-                id="bnb-mono"
-                name="Binance"
-                onClick={() => onChainClick('bsc', item.address)}
-              />
-            )
-          if (item.chain === 'avalanche')
-            return (
-              <ChainIcon
-                key={item.address}
-                id="ava-mono"
-                name="Avalanche"
-                onClick={() => onChainClick('avalanche', item.address)}
-              />
-            )
-          if (item.chain === 'polygon')
-            return (
-              <ChainIcon
-                key={item.address}
-                id="matic-mono"
-                name="Polygon"
-                onClick={() => onChainClick('polygon', item.address)}
-              />
-            )
-          if (item.chain === 'arbitrum')
-            return (
-              <ChainIcon
-                key={item.address}
-                id="arbitrum-mono"
-                name="Arbitrum"
-                onClick={() => onChainClick('arbitrum', item.address)}
-              />
-            )
-          if (item.chain === 'fantom')
-            return (
-              <ChainIcon
-                key={item.address}
-                id="fantom-mono"
-                name="Fantom"
-                onClick={() => onChainClick('fantom', item.address)}
-              />
-            )
-          if (item.chain === 'optimism')
-            return (
-              <ChainIcon
-                key={item.address}
-                id="optimism-mono"
-                name="Optimism"
-                onClick={() => onChainClick('optimism', item.address)}
-              />
-            )
-          return <></>
-        })}
+        {renderOptions()}
       </MenuDropdown>
     )
   },
diff --git a/src/pages/TrueSightV2/components/SimpleTooltip.tsx b/src/pages/TrueSightV2/components/SimpleTooltip.tsx
index 4c550df076..2750431db4 100644
--- a/src/pages/TrueSightV2/components/SimpleTooltip.tsx
+++ b/src/pages/TrueSightV2/components/SimpleTooltip.tsx
@@ -30,6 +30,7 @@ const ContentWrapper = styled.div`
   border-radius: 12px;
   background-color: ${({ theme }) => theme.tableHeader};
   font-size: 12px;
+  line-height: 16px;
   color: ${({ theme }) => theme.subText};
   width: fit-content;
   max-width: 250px;
diff --git a/src/pages/TrueSightV2/components/TokenFilter/index.tsx b/src/pages/TrueSightV2/components/TokenFilter/index.tsx
index 6c8c4c27ef..32e8884f21 100644
--- a/src/pages/TrueSightV2/components/TokenFilter/index.tsx
+++ b/src/pages/TrueSightV2/components/TokenFilter/index.tsx
@@ -10,12 +10,12 @@ import styled, { CSSProperties, css } from 'styled-components'
 import { ButtonGray } from 'components/Button'
 import Column from 'components/Column'
 import Icon from 'components/Icons/Icon'
-import Select from 'components/SelectV2'
+import Select from 'components/Select'
+import MultipleChainSelect from 'components/Select/MultipleChainSelect'
 import { EMPTY_OBJECT } from 'constants/index'
 import { MIXPANEL_TYPE, useMixpanelKyberAI } from 'hooks/useMixpanel'
 import useShowLoadingAtLeastTime from 'hooks/useShowLoadingAtLeastTime'
 import useTheme from 'hooks/useTheme'
-import MultipleChainSelect from 'pages/MyEarnings/MultipleChainSelectV2'
 import SubscribeButtonKyberAI from 'pages/TrueSightV2/components/SubscireButtonKyberAI'
 import WatchlistSelect from 'pages/TrueSightV2/components/TokenFilter/WatchlistSelect'
 import {
@@ -54,7 +54,7 @@ export const StyledSelect = styled(Select)`
 const StyledChainSelect = styled(MultipleChainSelect)`
   ${shareStyle}
   padding: 12px;
-  background: ${({ theme }) => theme.buttonBlack};
+  background: ${({ theme }) => theme.buttonBlack} !important;
 `
 
 const SelectName = styled.div`
@@ -87,11 +87,11 @@ const ShareGroup = styled.div`
     height: unset;
     position: absolute;
     right: 0;
-    top: 0;
-    bottom: 0;
+    top: -2px;
+    bottom: -2px;
     padding: 0 12px;
     z-index: ${Z_INDEX_KYBER_AI.FILTER_TOKEN_OPTIONS};
-    background: ${theme.background}
+    background: ${theme.background};
   `}
 `
 
@@ -215,8 +215,6 @@ export default function TokenFilter({
   const upToSmall = useMedia(`(max-width: ${MEDIA_WIDTHS.upToSmall}px)`)
 
   const menuStyle: CSSProperties = {
-    zIndex: Z_INDEX_KYBER_AI.FILTER_TOKEN_OPTIONS,
-    top: upToSmall ? undefined : 0,
     maxHeight: 400,
     overflowY: 'scroll',
   }
@@ -233,7 +231,7 @@ export default function TokenFilter({
         ) : (
           <>
             <StyledChainSelect
-              menuStyle={{ left: 0, zIndex: Z_INDEX_KYBER_AI.FILTER_TOKEN_OPTIONS }}
+              menuStyle={menuStyle}
               activeStyle={{
                 backgroundColor: 'transparent',
                 padding: 0,
diff --git a/src/pages/TrueSightV2/hooks/useKyberAIData.tsx b/src/pages/TrueSightV2/hooks/useKyberAIData.tsx
index e55a85ce3f..43750b6f7f 100644
--- a/src/pages/TrueSightV2/hooks/useKyberAIData.tsx
+++ b/src/pages/TrueSightV2/hooks/useKyberAIData.tsx
@@ -19,6 +19,7 @@ import {
   INumberOfTrades,
   INumberOfTransfers,
   ITokenList,
+  ITokenOverview,
   ITokenSearchResult,
   ITradingVolume,
   KyberAIListType,
@@ -86,7 +87,7 @@ const kyberAIApi = createApi({
       },
     }),
     //4.
-    tokenOverview: builder.query<IAssetOverview, { chain?: string; address?: string }>({
+    tokenOverview: builder.query<ITokenOverview, { chain?: string; address?: string }>({
       query: ({ chain, address }: { chain?: string; address?: string }) => ({
         url: `/overview/${chain}/${address}`,
       }),
diff --git a/src/pages/TrueSightV2/pages/LandingPage.tsx b/src/pages/TrueSightV2/pages/LandingPage.tsx
index 51d132e52f..89e7f78d13 100644
--- a/src/pages/TrueSightV2/pages/LandingPage.tsx
+++ b/src/pages/TrueSightV2/pages/LandingPage.tsx
@@ -202,7 +202,7 @@ const FloatingImageWithMotion = (props: {
     [0, props.parallaxDistance ? 2200 / props.parallaxDistance : 0],
   )
 
-  const translateY = useSpring(transformedTranslateY, { bounce: 0, duration: 0.5 })
+  const translateY = useSpring(transformedTranslateY, { damping: 10, stiffness: 100 })
 
   return (
     <motion.div transition={transition} style={{ translateY, ...props.style }}>
diff --git a/src/pages/TrueSightV2/pages/TokenAnalysisList.tsx b/src/pages/TrueSightV2/pages/TokenAnalysisList.tsx
index 14f342330e..1f8981c643 100644
--- a/src/pages/TrueSightV2/pages/TokenAnalysisList.tsx
+++ b/src/pages/TrueSightV2/pages/TokenAnalysisList.tsx
@@ -252,12 +252,11 @@ const LoadingWrapper = styled(Row)`
   opacity: 0.8;
   z-index: ${Z_INDEX_KYBER_AI.LOADING_TOKENS_TABLE};
   border-radius: 20px;
-  padding-top: min(25vh, 20%);
+  padding-top: min(25vh, 25%);
   justify-content: center;
   align-items: flex-start;
   box-sizing: border-box;
   ${({ theme }) => theme.mediaWidth.upToSmall`
-    inset: 0 -16px 0 -16px;
     width: 100vw;
     border-radius: 0;
   `}
@@ -576,6 +575,7 @@ const TokenRow = React.memo(function TokenRow({
             <>
               <MultipleChainDropdown
                 show={showSwapMenu}
+                onDismiss={() => setShowSwapMenu(false)}
                 tokens={token?.addresses}
                 onChainClick={(chain, address) => {
                   if (chain && address) {
diff --git a/src/pages/TrueSightV2/types/index.tsx b/src/pages/TrueSightV2/types/index.tsx
index c2f9fd58ef..8c6297e46c 100644
--- a/src/pages/TrueSightV2/types/index.tsx
+++ b/src/pages/TrueSightV2/types/index.tsx
@@ -4,6 +4,37 @@ export interface IKyberScoreChart {
   kyberScore: number
   createdAt: number
 }
+
+export interface ITokenOverview {
+  assetId: number
+  address: string
+  symbol: string
+  logo: string
+  decimals: number
+  chain: string
+  description: string
+  webs: string[]
+  communities: string[]
+  tags: string[]
+  atl: number
+  ath: number
+  '24hVolume': number
+  price: number
+  price24hChangePercent: number
+  '24hLow': number
+  '24hHigh': number
+  '1yLow': number
+  '1yHigh': number
+  circulatingSupply: number
+  marketCap: number
+  numberOfHolders: number
+  kyberScore: {
+    score: number
+    label: string
+    ks3d: Array<{ tag: string; price: number; kyber_score: number; created_at: number }>
+  }
+}
+
 export interface IAssetOverview {
   addresses: { chain: string; address: string }[]
   tags: string[]