diff --git a/packages/caip/src/adapters/coingecko/index.ts b/packages/caip/src/adapters/coingecko/index.ts
index f8065e6ff9b..d609a8326b1 100644
--- a/packages/caip/src/adapters/coingecko/index.ts
+++ b/packages/caip/src/adapters/coingecko/index.ts
@@ -4,7 +4,21 @@ import type { AssetId } from '../../assetId/assetId'
 import { fromAssetId } from '../../assetId/assetId'
 import type { ChainId } from '../../chainId/chainId'
 import { fromChainId, toChainId } from '../../chainId/chainId'
-import { CHAIN_NAMESPACE, CHAIN_REFERENCE } from '../../constants'
+import {
+  arbitrumChainId,
+  arbitrumNovaChainId,
+  avalancheChainId,
+  baseChainId,
+  bscChainId,
+  CHAIN_NAMESPACE,
+  CHAIN_REFERENCE,
+  cosmosChainId,
+  ethChainId,
+  gnosisChainId,
+  optimismChainId,
+  polygonChainId,
+  thorchainChainId,
+} from '../../constants'
 import * as adapters from './generated'
 
 // https://api.coingecko.com/api/v3/asset_platforms
@@ -101,6 +115,35 @@ export const chainIdToCoingeckoAssetPlatform = (chainId: ChainId): string => {
   }
 }
 
+export const coingeckoAssetPlatformToChainId = (platform: CoingeckoAssetPlatform): ChainId => {
+  switch (platform) {
+    case CoingeckoAssetPlatform.Ethereum:
+      return ethChainId
+    case CoingeckoAssetPlatform.Avalanche:
+      return avalancheChainId
+    case CoingeckoAssetPlatform.Optimism:
+      return optimismChainId
+    case CoingeckoAssetPlatform.BnbSmartChain:
+      return bscChainId
+    case CoingeckoAssetPlatform.Polygon:
+      return polygonChainId
+    case CoingeckoAssetPlatform.Gnosis:
+      return gnosisChainId
+    case CoingeckoAssetPlatform.Arbitrum:
+      return arbitrumChainId
+    case CoingeckoAssetPlatform.ArbitrumNova:
+      return arbitrumNovaChainId
+    case CoingeckoAssetPlatform.Base:
+      return baseChainId
+    case CoingeckoAssetPlatform.Cosmos:
+      return cosmosChainId
+    case CoingeckoAssetPlatform.Thorchain:
+      return thorchainChainId
+    default:
+      throw new Error(`Unsupported Coingecko asset platform: ${platform}`)
+  }
+}
+
 export const makeCoingeckoAssetUrl = (assetId: AssetId): string | undefined => {
   const id = assetIdToCoingecko(assetId)
   if (!id) return
diff --git a/src/assets/nightsky.jpg b/src/assets/nightsky.jpg
deleted file mode 100644
index 89d6ba53d24..00000000000
Binary files a/src/assets/nightsky.jpg and /dev/null differ
diff --git a/src/assets/splash-sidebar.jpg b/src/assets/splash-sidebar.jpg
new file mode 100644
index 00000000000..c45b1e21276
Binary files /dev/null and b/src/assets/splash-sidebar.jpg differ
diff --git a/src/assets/translations/en/main.json b/src/assets/translations/en/main.json
index 38ea6f54738..4848a7a00fb 100644
--- a/src/assets/translations/en/main.json
+++ b/src/assets/translations/en/main.json
@@ -287,12 +287,16 @@
   },
   "connectWalletPage": {
     "title": "The Original Multichain Exchange",
+    "primaryTitle": "Welcome to Multichain DeFi.",
+    "secondaryTitle": "Private. Decentralized. Non-custodial.",
+    "primaryDescription": "Trade, bridge, and earn rewards effortlessly. Experience Native Bitcoin, Dogecoin, and more. Manage Liquidity and DeFi Positions in One-Click.",
+    "snapDescription": "Download the ShapeShift Multichain Snap and Unlock Bitcoin, Dogecoin, and more for your MetaMask.",
     "shapeshift": "ShapeShift",
     "exploreThe": "Explore the",
     "defiUniverse": "DeFi Universe",
     "body": "Trade, bridge & earn. Private. Community owned. Non-custodial. Decentralized.",
     "header": "Please connect a wallet to get started",
-    "cta": "Connect Wallet",
+    "cta": "Connect or Create Wallet",
     "viewADemo": "View a Demo",
     "dontHaveWallet": "Don't have a wallet?",
     "welcomeBack": "Welcome back!",
@@ -1544,8 +1548,6 @@
         "title": "Multichain Snap needs updating",
         "subtitle": "Click 'Update' to continue using ShapeShift's multichain features with MetaMask!"
       },
-      "secondaryTitle": "The best Multichain experience for MetaMask: Powered by ShapeShift",
-      "secondaryBody": "Send, receive, track, trade, and earn with the ShapeShift Multichain Snap on the following chains:",
       "connectMetaMask": "Connect MetaMask",
       "andMore": "...and more",
       "snapInstalledToast": "ShapeShift Multichain MetaMask Snap Installed",
diff --git a/src/lib/coingecko/constants.ts b/src/lib/coingecko/constants.ts
new file mode 100644
index 00000000000..b0adc5f43f8
--- /dev/null
+++ b/src/lib/coingecko/constants.ts
@@ -0,0 +1,31 @@
+import type { AssetId } from '@shapeshiftoss/caip'
+import {
+  adapters,
+  baseAssetId,
+  bchAssetId,
+  bscAssetId,
+  btcAssetId,
+  cosmosAssetId,
+  dogeAssetId,
+  ethAssetId,
+  gnosisAssetId,
+  ltcAssetId,
+  polygonAssetId,
+  thorchainAssetId,
+} from '@shapeshiftoss/caip'
+
+export const COINGECKO_NATIVE_ASSET_ID_TO_ASSET_ID: Partial<Record<string, AssetId>> = {
+  bitcoin: btcAssetId,
+  'bitcoin-cash': bchAssetId,
+  dogecoin: dogeAssetId,
+  litecoin: ltcAssetId,
+  [adapters.CoingeckoAssetPlatform.Ethereum]: ethAssetId,
+  [adapters.CoingeckoAssetPlatform.Thorchain]: thorchainAssetId,
+  [adapters.CoingeckoAssetPlatform.Gnosis]: gnosisAssetId,
+  [adapters.CoingeckoAssetPlatform.Cosmos]: cosmosAssetId,
+  // This isn't a mistake - the network and id are different in the case of MATIC/POS
+  'polygon-ecosystem-token': polygonAssetId,
+  [adapters.CoingeckoAssetPlatform.Base]: baseAssetId,
+  // This isn't a mistake - the network and id are different in the case of BSC
+  binanceCoin: bscAssetId,
+}
diff --git a/src/lib/coingecko/types.ts b/src/lib/coingecko/types.ts
new file mode 100644
index 00000000000..43c6754275a
--- /dev/null
+++ b/src/lib/coingecko/types.ts
@@ -0,0 +1,80 @@
+import type { AssetId, ChainId } from '@shapeshiftoss/caip'
+import type {
+  CoinGeckoMarketCap,
+  CoinGeckoMarketData,
+} from 'lib/market-service/coingecko/coingecko-types'
+
+// Non-exhaustive types, refer to https://docs.coingecko.com/reference/coins-id and other endpoints for full response schema
+export type CoingeckoAssetDetails = {
+  market_data: CoinGeckoMarketData
+  asset_platform_id: string
+  id: string
+  image: Record<string, string>
+  name: string
+  symbol: string
+  detail_platforms: Record<string, { decimal_place: number; contract_address: string }>
+  platforms: Record<string, string>
+}
+
+export type MoverAsset = Pick<
+  CoinGeckoMarketCap,
+  'id' | 'symbol' | 'name' | 'image' | 'market_cap_rank'
+> & {
+  usd: string
+  usd_24h_vol: string
+  usd_1y_change: string
+}
+
+export type MoversResponse = {
+  top_gainers: MoverAsset[]
+  top_losers: MoverAsset[]
+}
+
+// Non-exhaustive
+export type TrendingCoin = {
+  id: string
+  coin_id: number
+  name: string
+  symbol: string
+  market_cap_rank: number
+  thumb: string
+  small: string
+  large: string
+  slug: string
+  price_btc: number
+  score: number
+  data: {
+    price: number
+    price_btc: string
+    price_change_percentage_24h: Record<string, number>
+    market_cap: string
+    market_cap_btc: string
+    total_volume: string
+  }
+}
+
+export type TrendingResponse = {
+  coins: {
+    item: TrendingCoin
+  }[]
+}
+
+export type RecentlyAddedCoin = {
+  id: string
+  symbol: string
+  name: string
+  activated_at: number
+}
+
+export type RecentlyAddedResponse = RecentlyAddedCoin[]
+
+export type CoingeckoAsset = {
+  assetId: AssetId
+  details: CoingeckoAssetDetails
+}
+
+export type CoingeckoList = {
+  byId: Record<AssetId, CoingeckoAsset>
+  ids: AssetId[]
+  chainIds: ChainId[]
+}
diff --git a/src/lib/coingecko/utils.ts b/src/lib/coingecko/utils.ts
new file mode 100644
index 00000000000..031b7e1c458
--- /dev/null
+++ b/src/lib/coingecko/utils.ts
@@ -0,0 +1,120 @@
+import { adapters, ASSET_NAMESPACE, bscChainId, toAssetId } from '@shapeshiftoss/caip'
+import type { CoingeckoAssetPlatform } from '@shapeshiftoss/caip/src/adapters'
+import axios from 'axios'
+import { queryClient } from 'context/QueryClientProvider/queryClient'
+import type { CoinGeckoMarketCap } from 'lib/market-service/coingecko/coingecko-types'
+
+import { COINGECKO_NATIVE_ASSET_ID_TO_ASSET_ID } from './constants'
+import type {
+  CoingeckoAsset,
+  CoingeckoAssetDetails,
+  MoverAsset,
+  MoversResponse,
+  RecentlyAddedCoin,
+  RecentlyAddedResponse,
+  TrendingCoin,
+  TrendingResponse,
+} from './types'
+
+const coingeckoBaseUrl = 'https://api.proxy.shapeshift.com/api/v1/markets'
+
+const getCoinDetails = async (
+  marketCap: CoinGeckoMarketCap | RecentlyAddedCoin | TrendingCoin | MoverAsset,
+  i: number,
+  all: CoingeckoAsset[],
+) => {
+  try {
+    const { data } = await queryClient.fetchQuery({
+      queryKey: ['coingecko', 'coin', marketCap.id],
+      // Shared query across consumers, so make it infinite as there will be a lot of overlap
+      queryFn: () => axios.get<CoingeckoAssetDetails>(`${coingeckoBaseUrl}/coins/${marketCap.id}`),
+      gcTime: Infinity,
+      staleTime: Infinity,
+    })
+    const { asset_platform_id, id } = data
+
+    const address = data.platforms?.[asset_platform_id]
+
+    if (!address) return
+
+    const assetId = (() => {
+      // Handles native assets, which *may* not contain a platform_id
+      if (COINGECKO_NATIVE_ASSET_ID_TO_ASSET_ID[id])
+        return COINGECKO_NATIVE_ASSET_ID_TO_ASSET_ID[id]
+
+      const chainId = adapters.coingeckoAssetPlatformToChainId(
+        asset_platform_id as CoingeckoAssetPlatform,
+      )
+      if (!chainId) return
+
+      const assetId = toAssetId({
+        chainId,
+        assetNamespace: chainId === bscChainId ? ASSET_NAMESPACE.bep20 : ASSET_NAMESPACE.erc20,
+        assetReference: address,
+      })
+      return assetId
+    })()
+
+    if (!assetId) return marketCap
+
+    all[i] = {
+      assetId,
+      details: data,
+    }
+  } catch (error) {
+    console.error(`Error fetching asset details for ${marketCap.id}:`, error)
+    return null
+  }
+}
+
+export const getCoingeckoTopMovers = async (): Promise<CoingeckoAsset[]> => {
+  const { data } = await axios.get<MoversResponse>(
+    `${coingeckoBaseUrl}/coins/top_gainers_losers?vs_currency=usd`,
+  )
+
+  const all: CoingeckoAsset[] = []
+
+  await Promise.allSettled(
+    data.top_gainers
+      .concat(data.top_losers)
+      .map((marketData, i) => getCoinDetails(marketData, i, all)),
+  )
+
+  return all.filter(mover => Boolean(mover.assetId))
+}
+
+export const getCoingeckoTrending = async (): Promise<CoingeckoAsset[]> => {
+  const { data } = await axios.get<TrendingResponse>(`${coingeckoBaseUrl}/search/trending`)
+
+  const all: CoingeckoAsset[] = []
+
+  await Promise.allSettled(
+    data.coins.map(({ item }) => item).map((marketData, i) => getCoinDetails(marketData, i, all)),
+  )
+
+  return all.filter(mover => Boolean(mover.assetId))
+}
+
+export const getCoingeckoRecentlyAdded = async (): Promise<CoingeckoAsset[]> => {
+  const { data } = await axios.get<RecentlyAddedResponse>(`${coingeckoBaseUrl}/coins/list/new`)
+
+  const all: CoingeckoAsset[] = []
+
+  await Promise.allSettled(data.map((marketData, i) => getCoinDetails(marketData, i, all)))
+
+  return all.filter(mover => Boolean(mover.assetId))
+}
+
+export const getCoingeckoMarkets = async (
+  order: 'market_cap_desc' | 'volume_desc',
+): Promise<CoingeckoAsset[]> => {
+  const { data } = await axios.get<CoinGeckoMarketCap[]>(
+    `${coingeckoBaseUrl}/coins/markets?vs_currency=usd&order=${order}`,
+  )
+
+  const all: CoingeckoAsset[] = []
+
+  await Promise.allSettled(data.map((marketData, i) => getCoinDetails(marketData, i, all)))
+
+  return all.filter(mover => Boolean(mover.assetId))
+}
diff --git a/src/pages/ConnectWallet/ConnectWallet.tsx b/src/pages/ConnectWallet/ConnectWallet.tsx
index f18d213bd66..e078f71924b 100644
--- a/src/pages/ConnectWallet/ConnectWallet.tsx
+++ b/src/pages/ConnectWallet/ConnectWallet.tsx
@@ -1,8 +1,7 @@
-import type { ResponsiveValue } from '@chakra-ui/react'
 import {
+  Box,
   Button,
   Center,
-  Circle,
   Divider,
   Flex,
   Heading,
@@ -10,16 +9,15 @@ import {
   Link,
   Stack,
   Tooltip,
+  useColorModeValue,
 } from '@chakra-ui/react'
-import { isEvmChainId } from '@shapeshiftoss/chain-adapters'
 import { KnownChainIds } from '@shapeshiftoss/types'
 import { knownChainIds } from 'constants/chains'
 import { useCallback, useEffect, useMemo } from 'react'
 import { useTranslate } from 'react-polyglot'
 import { generatePath, matchPath, useHistory } from 'react-router-dom'
-import NightSky from 'assets/nightsky.jpg'
+import SplashSidebar from 'assets/splash-sidebar.jpg'
 import { AssetIcon } from 'components/AssetIcon'
-import { FoxIcon } from 'components/Icons/FoxIcon'
 import { MetaMaskIcon } from 'components/Icons/MetaMaskIcon'
 import { LanguageSelector } from 'components/LanguageSelector'
 import { Page } from 'components/Layout/Page'
@@ -48,9 +46,7 @@ const IncludeChains = [
 ]
 
 const containerPt = { base: 8, lg: 0 }
-const flexAlign = { base: 'center', lg: 'flex-start' }
 const flexRightAlign = { base: 'center', lg: 'flex-end' }
-const textAlign: ResponsiveValue<any> = { base: 'center', lg: 'left' }
 const margin = { base: 0, lg: 'auto' }
 const spacing = { base: 6, lg: 8 }
 const display = { base: 'none', lg: 'flex' }
@@ -68,6 +64,7 @@ export const ConnectWallet = () => {
   const { state, dispatch, connectDemo, connect } = useWallet()
   const hasWallet = Boolean(state.walletInfo?.deviceId)
   const isSnapEnabled = useFeatureFlag('Snaps')
+  const snapInfoBgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50')
 
   const allNativeAssets = useMemo(() => {
     return knownChainIds
@@ -80,17 +77,6 @@ export const ConnectWallet = () => {
       .filter(isSome)
   }, [])
 
-  const evmChains = useMemo(() => {
-    return knownChainIds
-      .filter(isEvmChainId)
-      .map(knownChainId => {
-        const assetId = getChainAdapterManager().get(knownChainId)?.getFeeAssetId()!
-        const asset = selectAssetById(store.getState(), assetId)
-        return asset
-      })
-      .filter(isSome)
-  }, [])
-
   const history = useHistory()
   const translate = useTranslate()
   const query = useQuery<{ returnUrl: string }>()
@@ -129,10 +115,6 @@ export const ConnectWallet = () => {
     ))
   }, [allNativeAssets])
 
-  const renderEvmChainText = useMemo(() => {
-    return evmChains.map(asset => asset.networkName).join(', ')
-  }, [evmChains])
-
   const handleConnectClick = useCallback(
     () => dispatch({ type: WalletActions.SET_WALLET_MODAL, payload: true }),
     [dispatch],
@@ -178,83 +160,64 @@ export const ConnectWallet = () => {
             maxWidth={maxWidth}
             width={width}
           >
-            {isMobile ? (
-              <Stack spacing={4} textAlign={textAlign}>
-                <Flex flexDir='row' textAlign='left' fontSize='2xl' letterSpacing='tight'>
-                  <RawText color='white' lineHeight='1' userSelect={'none'}>
-                    {translate('connectWalletPage.exploreThe')}{' '}
-                    <RawText color='white' fontWeight='bold' as='span'>
-                      {translate('connectWalletPage.defiUniverse')}
-                    </RawText>
+            <Stack spacing={6}>
+              <Stack textAlign='center' alignItems='center' fontWeight='bold'>
+                <Stack spacing={2}>
+                  <RawText color='blue.300' fontSize='xs' textTransform='uppercase'>
+                    {translate('connectWalletPage.secondaryTitle')}
+                  </RawText>
+                  <Heading as='h1' fontSize='4xl'>
+                    {translate('connectWalletPage.primaryTitle')}
+                  </Heading>
+                  <RawText color='text.subtle' fontSize='md' fontWeight='medium'>
+                    {translate('connectWalletPage.primaryDescription')}
                   </RawText>
-                </Flex>
-                <Text
-                  userSelect={'none'}
-                  color='text.subtle'
-                  fontSize='lg'
-                  textAlign='left'
-                  translation={'connectWalletPage.body'}
-                />
-              </Stack>
-            ) : isSnapEnabled ? (
-              <>
-                <Stack spacing={6}>
-                  <Stack spacing={4} textAlign={textAlign}>
-                    <Heading as='h3' fontSize='2xl'>
-                      {translate('walletProvider.metaMaskSnap.secondaryTitle')}
-                    </Heading>
-                    <RawText color='text.subtle' fontSize='lg'>
-                      {translate('walletProvider.metaMaskSnap.secondaryBody')}
-                    </RawText>
-                    <HStack spacing={4} justify={flexAlign} wrap='wrap' mb={4}>
-                      {renderChains}
-                      <Tooltip label={renderEvmChainText}>
-                        <RawText color='text.subtle'>
-                          {translate('walletProvider.metaMaskSnap.andMore')}
-                        </RawText>
-                      </Tooltip>
-                    </HStack>
-                  </Stack>
-                  <Button
-                    width='full'
-                    size='lg-multiline'
-                    onClick={handleMetaMaskConnect}
-                    leftIcon={metamaskIcon}
-                  >
-                    {translate('walletProvider.metaMaskSnap.connectMetaMask')}
-                  </Button>
                 </Stack>
-                <Flex alignItems='center' justifyContent='center' width='full' gap={4}>
-                  <Divider flex={1} borderColor='border.bold' opacity='1' />
-                  <Text
-                    color='text.subtle'
-                    fontWeight='medium'
-                    textAlign='center'
-                    translation='common.or'
-                  />
-                  <Divider flex={1} borderColor='border.bold' opacity='1' />
-                </Flex>
-              </>
-            ) : (
-              <Stack spacing={6}>
-                <Heading as='h3' fontSize='2xl'>
-                  {translate('connectWalletPage.welcomeBack')}
-                </Heading>
-                <RawText fontSize='lg' color='text.subtle'>
-                  {translate('connectWalletPage.welcomeBody')}
-                </RawText>
+                <Button
+                  size='lg-multiline'
+                  zIndex={1}
+                  colorScheme='blue'
+                  width='fit-content'
+                  onClick={handleConnectClick}
+                  data-test='connect-wallet-button'
+                  my={4}
+                >
+                  <Text translation='connectWalletPage.cta' />
+                </Button>
+                {isSnapEnabled && (
+                  <>
+                    <Flex alignItems='center' justifyContent='center' width='full' gap={4}>
+                      <Divider flex={1} borderColor='border.bold' opacity='1' />
+                      <Text
+                        color='text.subtle'
+                        fontWeight='medium'
+                        textAlign='center'
+                        translation='common.or'
+                        textTransform='uppercase'
+                      />
+                      <Divider flex={1} borderColor='border.bold' opacity='1' />
+                    </Flex>
+                    <Box bg={snapInfoBgColor} p={8} borderRadius='lg' mt={4}>
+                      <HStack spacing={2} justify='center' wrap='wrap' mb={4}>
+                        {renderChains}
+                      </HStack>
+                      <RawText fontWeight='medium' fontSize='md'>
+                        {translate('connectWalletPage.snapDescription')}
+                      </RawText>
+                      <Button
+                        width='fit-content'
+                        size='lg-multiline'
+                        onClick={handleMetaMaskConnect}
+                        leftIcon={metamaskIcon}
+                        mt={6}
+                      >
+                        {translate('walletProvider.metaMaskSnap.connectMetaMask')}
+                      </Button>
+                    </Box>
+                  </>
+                )}
               </Stack>
-            )}
-            <Button
-              size='lg-multiline'
-              zIndex={1}
-              colorScheme='blue'
-              width='full'
-              onClick={handleConnectClick}
-              data-test='connect-wallet-button'
-            >
-              <Text translation='connectWalletPage.cta' />
-            </Button>
+            </Stack>
             <Flex gap={1}>
               <RawText color='text.subtle'>{translate('connectWalletPage.dontHaveWallet')}</RawText>
               <Button
@@ -283,7 +246,7 @@ export const ConnectWallet = () => {
           zIndex={1}
           width='full'
           maxWidth='400px'
-          bgImage={NightSky}
+          bgImage={SplashSidebar}
           backgroundSize='cover'
           display={display}
         >
@@ -292,29 +255,7 @@ export const ConnectWallet = () => {
             // Full height with "-webkit-fill-available" polyfill, see https://chakra-ui.com/changelog/v2.3.1#styled-system-231
             height='$100vh'
             px={6}
-          >
-            <Flex>
-              <Circle size='52px' mb='auto' mt={12}>
-                <FoxIcon boxSize='100%' color='white' />
-              </Circle>
-            </Flex>
-            <Stack mt='auto' spacing={6}>
-              <Flex flexDir='row' textAlign='left' fontSize='2xl' letterSpacing='tight'>
-                <RawText color='white' lineHeight='1' userSelect={'none'}>
-                  {translate('connectWalletPage.title')}
-                </RawText>
-              </Flex>
-              <Divider borderWidth={2} opacity='1' borderColor='white' maxWidth='80px' />
-              <Text
-                userSelect={'none'}
-                color='text.subtle'
-                fontSize='lg'
-                mb={12}
-                textAlign='left'
-                translation={'connectWalletPage.body'}
-              />
-            </Stack>
-          </Center>
+          />
         </Flex>
       </Flex>
     </Page>
diff --git a/src/pages/Markets/Recommended.tsx b/src/pages/Markets/Recommended.tsx
index 6debf62ee7e..0ec54c370e2 100644
--- a/src/pages/Markets/Recommended.tsx
+++ b/src/pages/Markets/Recommended.tsx
@@ -2,19 +2,30 @@ import { Box, Flex, Grid, GridItem, Heading, Skeleton, Text } from '@chakra-ui/r
 import type { AssetId, ChainId } from '@shapeshiftoss/caip'
 import { ethAssetId, fromAssetId } from '@shapeshiftoss/caip'
 import { KnownChainIds } from '@shapeshiftoss/types'
+import { useQuery } from '@tanstack/react-query'
 import noop from 'lodash/noop'
-import { useCallback, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useTranslate } from 'react-polyglot'
 import { useHistory } from 'react-router'
 import { ChainDropdown } from 'components/ChainDropdown/ChainDropdown'
 import { Main } from 'components/Layout/Main'
 import { SEO } from 'components/Layout/Seo'
-import { selectAssetIds, selectFeatureFlag } from 'state/slices/selectors'
-import { useAppSelector } from 'state/store'
+import { opportunitiesApi } from 'state/slices/opportunitiesSlice/opportunitiesApiSlice'
+import { thorchainSaversOpportunityIdsResolver } from 'state/slices/opportunitiesSlice/resolvers/thorchainsavers'
+import { SUPPORTED_THORCHAIN_SAVERS_CHAIN_IDS } from 'state/slices/opportunitiesSlice/resolvers/thorchainsavers/utils'
+import { DefiProvider, DefiType } from 'state/slices/opportunitiesSlice/types'
+import { selectFeatureFlag } from 'state/slices/selectors'
+import { useAppDispatch, useAppSelector } from 'state/store'
 
 import { AssetCard } from './components/AssetCard'
 import { CardWithSparkline } from './components/CardWithSparkline'
-import { LpCard } from './components/LpCard'
+import { LpGridItem } from './components/LpCard'
+import {
+  useMarketsQuery,
+  useRecentlyAddedQuery,
+  useTopMoversQuery,
+  useTrendingQuery,
+} from './hooks/useCoingeckoData'
 import { usePortalsAssetsQuery } from './hooks/usePortalsAssetsQuery'
 import { MarketsHeader } from './MarketsHeader'
 
@@ -46,9 +57,7 @@ const AssetsGrid: React.FC<{
       (selectedChainId
         ? assetIds.filter(assetId => fromAssetId(assetId).chainId === selectedChainId)
         : assetIds
-      )
-        // TODO(gomes): remove me when we have real data here for all categories
-        .slice(0, 7),
+      ).slice(0, 7),
     [assetIds, selectedChainId],
   )
 
@@ -110,9 +119,7 @@ const LpGrid: React.FC<{ assetIds: AssetId[]; selectedChainId?: ChainId; isLoadi
       (selectedChainId
         ? assetIds.filter(assetId => fromAssetId(assetId).chainId === selectedChainId)
         : assetIds
-      )
-        // TODO(gomes): remove me when we have real data here for all categories
-        .slice(0, 7),
+      ).slice(0, 7),
     [assetIds, selectedChainId],
   )
 
@@ -133,27 +140,18 @@ const LpGrid: React.FC<{ assetIds: AssetId[]; selectedChainId?: ChainId; isLoadi
   return (
     <Grid templateRows={gridTemplateRowsSx} gridTemplateColumns={gridTemplateColumnSx} gap={4}>
       {filteredAssetIds.map((assetId, index) => {
-        const apy = portalsAssets?.byId[assetId]?.metrics.apy
-        const volume24H = portalsAssets?.byId[assetId]?.metrics.volumeUsd1d
+        const maybePortalsApy = portalsAssets?.byId[assetId]?.metrics.apy
+        const maybePortalsVolume = portalsAssets?.byId[assetId]?.metrics.volumeUsd1d
 
-        if (index === 0) {
-          return (
-            <GridItem rowSpan={rowSpanSparklineSx} colSpan={colSpanSparklineSx}>
-              <CardWithSparkline assetId={assetId} onClick={handleCardClick} />
-            </GridItem>
-          )
-        } else {
-          return (
-            <GridItem colSpan={colSpanSx}>
-              <LpCard
-                assetId={assetId}
-                apy={apy ?? '0'}
-                volume24H={volume24H ?? '0'}
-                onClick={handleCardClick}
-              />
-            </GridItem>
-          )
-        }
+        return (
+          <LpGridItem
+            assetId={assetId}
+            index={index}
+            onClick={handleCardClick}
+            apy={maybePortalsApy}
+            volume={maybePortalsVolume}
+          />
+        )
       })}
     </Grid>
   )
@@ -175,6 +173,52 @@ const OneClickDefiAssets: React.FC<{
   )
 }
 
+const ThorchainAssets: React.FC<{
+  selectedChainId: ChainId | undefined
+}> = ({ selectedChainId }) => {
+  const dispatch = useAppDispatch()
+  const { data: thorchainAssetIdsData, isLoading: isThorchainAssetIdsDataLoading } = useQuery({
+    queryKey: ['thorchainAssets'],
+    queryFn: thorchainSaversOpportunityIdsResolver,
+    staleTime: Infinity,
+    select: pools => pools.data,
+  })
+
+  useEffect(() => {
+    ;(async () => {
+      await dispatch(
+        opportunitiesApi.endpoints.getOpportunityIds.initiate(
+          {
+            defiType: DefiType.Staking,
+            defiProvider: DefiProvider.ThorchainSavers,
+          },
+          { forceRefetch: true },
+        ),
+      )
+
+      await dispatch(
+        opportunitiesApi.endpoints.getOpportunitiesMetadata.initiate(
+          [
+            {
+              defiType: DefiType.Staking,
+              defiProvider: DefiProvider.ThorchainSavers,
+            },
+          ],
+          { forceRefetch: true },
+        ),
+      )
+    })()
+  }, [dispatch])
+
+  return (
+    <LpGrid
+      assetIds={thorchainAssetIdsData ?? []}
+      selectedChainId={selectedChainId}
+      isLoading={isThorchainAssetIdsDataLoading}
+    />
+  )
+}
+
 const Row: React.FC<RowProps> = ({ title, subtitle, supportedChainIds, children }) => {
   const [selectedChainId, setSelectedChainId] = useState<ChainId | undefined>(undefined)
   const isArbitrumNovaEnabled = useAppSelector(state => selectFeatureFlag(state, 'ArbitrumNova'))
@@ -220,23 +264,43 @@ const Row: React.FC<RowProps> = ({ title, subtitle, supportedChainIds, children
 export const Recommended: React.FC = () => {
   const translate = useTranslate()
   const headerComponent = useMemo(() => <MarketsHeader />, [])
-  const assetIds = useAppSelector(selectAssetIds)
 
   // Fetch for all chains here so we know which chains to show in the dropdown
-  const { isLoading: isPortalsAssetsLoading, data: allPortalsAssets } = usePortalsAssetsQuery({
+  const { data: allPortalsAssets } = usePortalsAssetsQuery({
     chainIds: undefined,
   })
 
+  const { data: topMoversData, isLoading: isTopMoversDataLoading } = useTopMoversQuery()
+  const { data: trendingData, isLoading: isTrendingDataLoading } = useTrendingQuery()
+  const { data: recentlyAddedData, isLoading: isRecentlyAddedDataLoading } = useRecentlyAddedQuery()
+  const { data: highestVolumeData, isLoading: isHighestVolumeDataLoading } = useMarketsQuery({
+    orderBy: 'volume_desc',
+  })
+  const { data: marketCapData, isLoading: isMarketCapDataLoading } = useMarketsQuery({
+    orderBy: 'market_cap_desc',
+  })
+
   const rows = useMemo(
     () => [
       {
-        title: 'Most Popular',
+        title: translate('markets.categories.tradingVolume.title'),
+        subtitle: translate('markets.categories.tradingVolume.subtitle'),
+        component: (selectedChainId: ChainId | undefined) => (
+          <AssetsGrid
+            assetIds={highestVolumeData?.ids ?? []}
+            selectedChainId={selectedChainId}
+            isLoading={isHighestVolumeDataLoading}
+          />
+        ),
+      },
+      {
+        title: translate('markets.categories.marketCap.title'),
+        subtitle: translate('markets.categories.marketCap.subtitle'),
         component: (selectedChainId: ChainId | undefined) => (
           <AssetsGrid
-            assetIds={assetIds}
+            assetIds={marketCapData?.ids ?? []}
             selectedChainId={selectedChainId}
-            // TODO(gomes): loading state when implemented
-            isLoading={isPortalsAssetsLoading}
+            isLoading={isMarketCapDataLoading}
           />
         ),
       },
@@ -245,21 +309,19 @@ export const Recommended: React.FC = () => {
         subtitle: translate('markets.categories.trending.subtitle', { percentage: '10' }),
         component: (selectedChainId: ChainId | undefined) => (
           <AssetsGrid
-            assetIds={assetIds}
+            assetIds={trendingData?.ids ?? []}
             selectedChainId={selectedChainId}
-            // TODO(gomes): loading state when implemented
-            isLoading={isPortalsAssetsLoading}
+            isLoading={isTrendingDataLoading}
           />
         ),
       },
       {
-        title: translate('markets.categories.topMovements.title'),
+        title: translate('markets.categories.topMovers.title'),
         component: (selectedChainId: ChainId | undefined) => (
           <AssetsGrid
-            assetIds={assetIds}
+            assetIds={topMoversData?.ids ?? []}
             selectedChainId={selectedChainId}
-            // TODO(gomes): loading state when implemented
-            isLoading={isPortalsAssetsLoading}
+            isLoading={isTopMoversDataLoading}
           />
         ),
       },
@@ -268,10 +330,9 @@ export const Recommended: React.FC = () => {
         // TODO(gomes): loading state when implemented
         component: (selectedChainId: ChainId | undefined) => (
           <AssetsGrid
-            assetIds={assetIds}
+            assetIds={recentlyAddedData?.ids ?? []}
             selectedChainId={selectedChainId}
-            // TODO(gomes): loading state when implemented
-            isLoading={isPortalsAssetsLoading}
+            isLoading={isRecentlyAddedDataLoading}
           />
         ),
       },
@@ -285,16 +346,25 @@ export const Recommended: React.FC = () => {
       {
         title: translate('markets.categories.thorchainDefi.title'),
         component: (selectedChainId: ChainId | undefined) => (
-          <LpGrid
-            assetIds={assetIds}
-            selectedChainId={selectedChainId}
-            // TODO(gomes): loading state when implemented
-            isLoading={isPortalsAssetsLoading}
-          />
+          <ThorchainAssets selectedChainId={selectedChainId} />
         ),
+        supportedChainIds: SUPPORTED_THORCHAIN_SAVERS_CHAIN_IDS,
       },
     ],
-    [allPortalsAssets?.chainIds, assetIds, isPortalsAssetsLoading, translate],
+    [
+      allPortalsAssets?.chainIds,
+      highestVolumeData?.ids,
+      isHighestVolumeDataLoading,
+      isMarketCapDataLoading,
+      isRecentlyAddedDataLoading,
+      isTopMoversDataLoading,
+      isTrendingDataLoading,
+      marketCapData?.ids,
+      recentlyAddedData?.ids,
+      topMoversData?.ids,
+      translate,
+      trendingData?.ids,
+    ],
   )
 
   return (
diff --git a/src/pages/Markets/components/LpCard.tsx b/src/pages/Markets/components/LpCard.tsx
index 141c05de6b1..74f7c18951a 100644
--- a/src/pages/Markets/components/LpCard.tsx
+++ b/src/pages/Markets/components/LpCard.tsx
@@ -1,13 +1,32 @@
-import { Box, Button, Card, CardBody, Flex, Text as CText, Tooltip } from '@chakra-ui/react'
+import {
+  Box,
+  Button,
+  Card,
+  CardBody,
+  Flex,
+  GridItem,
+  Text as CText,
+  Tooltip,
+} from '@chakra-ui/react'
 import type { AssetId } from '@shapeshiftoss/caip'
-import { useCallback } from 'react'
+import { useCallback, useMemo } from 'react'
 import { Amount } from 'components/Amount/Amount'
 import { AssetIcon } from 'components/AssetIcon'
 import { Text } from 'components/Text'
 import { bnOrZero } from 'lib/bignumber/bignumber'
-import { selectAssetById } from 'state/slices/selectors'
+import {
+  selectAssetById,
+  selectMarketDataByAssetIdUserCurrency,
+  selectStakingOpportunityByFilter,
+} from 'state/slices/selectors'
 import { useAppSelector } from 'state/store'
 
+import { CardWithSparkline } from './CardWithSparkline'
+
+const rowSpanSparklineSx = { base: 1, md: 2 }
+const colSpanSparklineSx = { base: 1, md: 3 }
+const colSpanSx = { base: 1, md: 2 }
+
 type LpCardProps = {
   assetId: AssetId
   apy: string
@@ -91,3 +110,46 @@ export const LpCard: React.FC<LpCardProps> = ({ assetId, apy, volume24H, onClick
     </Card>
   )
 }
+
+export const LpGridItem = ({
+  assetId,
+  apy: _apy,
+  volume,
+  onClick,
+  index,
+}: {
+  assetId: AssetId
+  apy: string | undefined
+  volume: string | undefined
+  onClick: (assetId: AssetId) => void
+  index: number
+}) => {
+  const marketData = useAppSelector(state => selectMarketDataByAssetIdUserCurrency(state, assetId))
+  const volume24H = volume ?? marketData?.volume ?? 0
+
+  // TODO(gomes): remove weird branching between THOR and Portals - Portals assets should be upserted as a DeFi Opportunity, so we can select them from the same slice
+  const opportunityMetadataFilter = useMemo(() => ({ assetId }), [assetId])
+  const opportunityData = useAppSelector(state =>
+    selectStakingOpportunityByFilter(state, opportunityMetadataFilter),
+  )
+
+  const apy =
+    _apy ??
+    bnOrZero(opportunityData?.apy)
+      .times(100)
+      .toString()
+
+  if (index === 0) {
+    return (
+      <GridItem rowSpan={rowSpanSparklineSx} colSpan={colSpanSparklineSx}>
+        <CardWithSparkline assetId={assetId} onClick={onClick} />
+      </GridItem>
+    )
+  } else {
+    return (
+      <GridItem colSpan={colSpanSx}>
+        <LpCard assetId={assetId} apy={apy ?? '0'} volume24H={volume24H ?? '0'} onClick={onClick} />
+      </GridItem>
+    )
+  }
+}
diff --git a/src/pages/Markets/hooks/useCoingeckoData.ts b/src/pages/Markets/hooks/useCoingeckoData.ts
new file mode 100644
index 00000000000..3f7e6e8e9d1
--- /dev/null
+++ b/src/pages/Markets/hooks/useCoingeckoData.ts
@@ -0,0 +1,148 @@
+import { fromAssetId } from '@shapeshiftoss/caip'
+import type { AssetsByIdPartial, MarketData } from '@shapeshiftoss/types'
+import { makeAsset } from '@shapeshiftoss/utils'
+import { useQuery } from '@tanstack/react-query'
+import { DEFAULT_HISTORY_TIMEFRAME } from 'constants/Config'
+import type { CoingeckoAsset, CoingeckoList } from 'lib/coingecko/types'
+import {
+  getCoingeckoMarkets,
+  getCoingeckoRecentlyAdded,
+  getCoingeckoTopMovers,
+  getCoingeckoTrending,
+} from 'lib/coingecko/utils'
+import { assets as assetsSlice } from 'state/slices/assetsSlice/assetsSlice'
+import { marketApi, marketData } from 'state/slices/marketDataSlice/marketDataSlice'
+import { selectAssets, selectFeeAssetById } from 'state/slices/selectors'
+import type { AppDispatch } from 'state/store'
+import { store, useAppDispatch, useAppSelector } from 'state/store'
+
+const selectCoingeckoAssets = (
+  data: CoingeckoAsset[],
+  dispatch: AppDispatch,
+  assets: AssetsByIdPartial,
+) => {
+  if (!data) return
+
+  return data.reduce<CoingeckoList>(
+    (acc, topMover, i) => {
+      const assetId = topMover.assetId
+      const chainId = fromAssetId(assetId).chainId
+      const feeAsset = selectFeeAssetById(store.getState(), assetId)
+      const precision =
+        topMover.details.detail_platforms[topMover.details.asset_platform_id]?.decimal_place
+      if (!feeAsset) return acc
+
+      const asset = makeAsset(assets, {
+        assetId,
+        symbol: topMover.details.symbol,
+        name: topMover.details.name,
+        precision,
+        icon: topMover.details.image.small,
+      })
+
+      if (!asset) return acc
+
+      // upsert fetched asset if doesn't exist in generatedAssetData.json
+      if (!assets[assetId]) {
+        dispatch(
+          assetsSlice.actions.upsertAssets({
+            ids: [assetId],
+            byId: { [assetId]: asset },
+          }),
+        )
+
+        const currentMarketData: MarketData = {
+          price: topMover.details.market_data.current_price.usd.toString(),
+          marketCap: topMover.details.market_data.market_cap.toString(),
+          volume: (topMover.details.market_data.total_volume ?? 0).toString(),
+          changePercent24Hr: topMover.details.market_data.price_change_percentage_24h,
+          supply: topMover.details.market_data.circulating_supply.toString(),
+          maxSupply:
+            topMover.details.market_data.max_supply?.toString() ??
+            topMover.details.market_data.total_supply?.toString(),
+        }
+
+        dispatch(marketData.actions.setCryptoMarketData({ [assetId]: currentMarketData }))
+
+        // We only need price history for the 0th item (big card with chart)
+        if (i === 0) {
+          dispatch(
+            marketApi.endpoints.findPriceHistoryByAssetId.initiate({
+              assetId,
+              timeframe: DEFAULT_HISTORY_TIMEFRAME,
+            }),
+          )
+        }
+      }
+
+      if (!acc.chainIds.includes(chainId)) {
+        acc.chainIds.push(chainId)
+      }
+
+      acc.byId[assetId] = topMover
+      acc.ids.push(assetId)
+      return acc
+    },
+    {
+      byId: {},
+      ids: [],
+      chainIds: [],
+    },
+  )
+}
+
+export const useTopMoversQuery = () => {
+  const dispatch = useAppDispatch()
+  const assets = useAppSelector(selectAssets)
+
+  const topMoversQuery = useQuery({
+    queryKey: ['coinGeckoTopMovers'],
+    queryFn: getCoingeckoTopMovers,
+    staleTime: Infinity,
+    select: data => selectCoingeckoAssets(data, dispatch, assets),
+  })
+
+  return topMoversQuery
+}
+
+export const useTrendingQuery = () => {
+  const dispatch = useAppDispatch()
+  const assets = useAppSelector(selectAssets)
+
+  const trendingQuery = useQuery({
+    queryKey: ['coinGeckoTrending'],
+    queryFn: getCoingeckoTrending,
+    staleTime: Infinity,
+    select: data => selectCoingeckoAssets(data, dispatch, assets),
+  })
+
+  return trendingQuery
+}
+
+export const useRecentlyAddedQuery = () => {
+  const dispatch = useAppDispatch()
+  const assets = useAppSelector(selectAssets)
+
+  const recentlyAddedQuery = useQuery({
+    queryKey: ['coinGeckoRecentlyAdded'],
+    queryFn: getCoingeckoRecentlyAdded,
+    staleTime: Infinity,
+    select: data => selectCoingeckoAssets(data, dispatch, assets),
+  })
+
+  return recentlyAddedQuery
+}
+
+export const useMarketsQuery = ({ orderBy }: { orderBy: 'market_cap_desc' | 'volume_desc' }) => {
+  const dispatch = useAppDispatch()
+  const assets = useAppSelector(selectAssets)
+
+  const recentlyAddedQuery = useQuery({
+    queryKey: ['coinGeckoMarkets', orderBy],
+    queryFn: () => getCoingeckoMarkets(orderBy),
+    staleTime: Infinity,
+    select: data => selectCoingeckoAssets(data, dispatch, assets),
+  })
+
+  return recentlyAddedQuery
+}
diff --git a/src/pages/Markets/hooks/usePortalsAssetsQuery.ts b/src/pages/Markets/hooks/usePortalsAssetsQuery.ts
index cb9acdde307..4ad87c0c0c6 100644
--- a/src/pages/Markets/hooks/usePortalsAssetsQuery.ts
+++ b/src/pages/Markets/hooks/usePortalsAssetsQuery.ts
@@ -68,11 +68,11 @@ export const usePortalsAssetsQuery = ({ chainIds }: { chainIds: ChainId[] | unde
                 byId: { [assetId]: asset },
               }),
             )
-
-            // and its market-data since it may or may not be missing
-            dispatch(marketApi.endpoints.findByAssetId.initiate(assetId))
           }
 
+          // and fetch its market-data since it may or may not be missing
+          dispatch(marketApi.endpoints.findByAssetId.initiate(assetId))
+
           if (!acc.chainIds.includes(chainId)) {
             acc.chainIds.push(chainId)
           }
diff --git a/src/state/slices/opportunitiesSlice/resolvers/thorchainsavers/utils.ts b/src/state/slices/opportunitiesSlice/resolvers/thorchainsavers/utils.ts
index 01aa66eb8b3..99fc1d98a0b 100644
--- a/src/state/slices/opportunitiesSlice/resolvers/thorchainsavers/utils.ts
+++ b/src/state/slices/opportunitiesSlice/resolvers/thorchainsavers/utils.ts
@@ -19,6 +19,7 @@ import type { Result } from '@sniptt/monads'
 import { Err, Ok } from '@sniptt/monads'
 import axios from 'axios'
 import { getConfig } from 'config'
+import uniq from 'lodash/uniq'
 import { queryClient } from 'context/QueryClientProvider/queryClient'
 import { BigNumber, bnOrZero } from 'lib/bignumber/bignumber'
 import { fromThorBaseUnit, getAccountAddresses, toThorBaseUnit } from 'lib/utils/thorchain'
@@ -48,7 +49,7 @@ const usdtEthereumAssetId: AssetId = 'eip155:1/erc20:0xdac17f958d2ee523a22062069
 // The minimum amount to be sent both for deposit and withdraws
 // else it will be considered a dust attack and gifted to the network
 export const THORCHAIN_SAVERS_DUST_THRESHOLDS_CRYPTO_BASE_UNIT = {
-  [btcAssetId]: '30000',
+  [btcAssetId]: '10000',
   [bchAssetId]: '10000',
   [ltcAssetId]: '10000',
   [dogeAssetId]: '100000000',
@@ -78,8 +79,8 @@ const SUPPORTED_THORCHAIN_SAVERS_ASSET_IDS = [
   thorchainAssetId,
 ]
 
-const SUPPORTED_THORCHAIN_SAVERS_CHAIN_IDS = SUPPORTED_THORCHAIN_SAVERS_ASSET_IDS.map(
-  assetId => fromAssetId(assetId).chainId,
+export const SUPPORTED_THORCHAIN_SAVERS_CHAIN_IDS = uniq(
+  SUPPORTED_THORCHAIN_SAVERS_ASSET_IDS.map(assetId => fromAssetId(assetId).chainId),
 )
 
 export const getAllThorchainSaversPositions = async (