diff --git a/.eslintrc.js b/.eslintrc.js
index 6df1e6e1e52..f8cb2150123 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -39,5 +39,6 @@ module.exports = {
     ],
     'jest/expect-expect': 'off',
     'jest/no-disabled-tests': 'off',
+    'no-nested-ternary': 'off',
   },
 };
diff --git a/src/App.tsx b/src/App.tsx
index 157ff68b606..4977067dc60 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -40,6 +40,7 @@ import { IS_ANDROID, IS_DEV } from '@/env';
 import { prefetchDefaultFavorites } from '@/resources/favorites';
 import Routes from '@/navigation/Routes';
 import { BackendNetworks } from '@/components/BackendNetworks';
+import { AbsolutePortalRoot } from './components/AbsolutePortal';
 
 if (IS_DEV) {
   reactNativeDisableYellowBox && LogBox.ignoreAllLogs();
@@ -73,6 +74,7 @@ function App({ walletReady }: AppProps) {
           <InitialRouteContext.Provider value={initialRoute}>
             <Routes ref={handleNavigatorRef} />
             <PortalConsumer />
+            <AbsolutePortalRoot />
           </InitialRouteContext.Provider>
         )}
         <OfflineToast />
diff --git a/src/__swaps__/screens/Swap/components/AnimatedSwapCoinIcon.tsx b/src/__swaps__/screens/Swap/components/AnimatedSwapCoinIcon.tsx
index 2c8ba92b2ea..7d8ec66e8e1 100644
--- a/src/__swaps__/screens/Swap/components/AnimatedSwapCoinIcon.tsx
+++ b/src/__swaps__/screens/Swap/components/AnimatedSwapCoinIcon.tsx
@@ -14,37 +14,19 @@ import { IS_ANDROID, IS_IOS } from '@/env';
 import { PIXEL_RATIO } from '@/utils/deviceUtils';
 import { useSwapContext } from '../providers/swap-provider';
 
-const fallbackIconStyle = {
-  ...borders.buildCircleAsObject(32),
-  position: 'absolute' as ViewStyle['position'],
-};
-
-const largeFallbackIconStyle = {
-  ...borders.buildCircleAsObject(36),
-  position: 'absolute' as ViewStyle['position'],
-};
-
-const smallFallbackIconStyle = {
-  ...borders.buildCircleAsObject(16),
-  position: 'absolute' as ViewStyle['position'],
-};
-
 export const AnimatedSwapCoinIcon = memo(function AnimatedSwapCoinIcon({
   assetType,
-  large = true,
-  small,
+  size = 32,
   showBadge = true,
 }: {
   assetType: 'input' | 'output';
-  large?: boolean;
-  small?: boolean;
+  size?: number;
   showBadge?: boolean;
 }) {
   const { isDarkMode, colors } = useTheme();
   const { internalSelectedInputAsset, internalSelectedOutputAsset } = useSwapContext();
 
   const asset = assetType === 'input' ? internalSelectedInputAsset : internalSelectedOutputAsset;
-  const size = small ? 16 : large ? 36 : 32;
 
   const didErrorForUniqueId = useSharedValue<string | undefined>(undefined);
 
@@ -91,15 +73,8 @@ export const AnimatedSwapCoinIcon = memo(function AnimatedSwapCoinIcon({
   }));
 
   return (
-    <View style={small ? sx.containerSmall : large ? sx.containerLarge : sx.container}>
-      <Animated.View
-        style={[
-          sx.reactCoinIconContainer,
-          small ? sx.coinIconFallbackSmall : large ? sx.coinIconFallbackLarge : sx.coinIconFallback,
-          sx.withShadow,
-          animatedCoinIconWrapperStyles,
-        ]}
-      >
+    <View style={containerStyle(size)}>
+      <Animated.View style={[sx.reactCoinIconContainer, coinIconFallbackStyle(size), sx.withShadow, animatedCoinIconWrapperStyles]}>
         <Animated.View style={animatedCoinIconStyles}>
           {/* ⚠️ TODO: This works but we should figure out how to type this correctly to avoid this error */}
           {/* @ts-expect-error: Doesn't pick up that it's getting a source prop via animatedProps */}
@@ -122,29 +97,14 @@ export const AnimatedSwapCoinIcon = memo(function AnimatedSwapCoinIcon({
           />
         </Animated.View>
 
-        <Animated.View
-          style={[animatedFallbackStyles, small ? sx.coinIconFallbackSmall : large ? sx.coinIconFallbackLarge : sx.coinIconFallback]}
-        >
-          <SwapCoinIconTextFallback
-            asset={asset}
-            height={size}
-            width={size}
-            style={small ? smallFallbackIconStyle : large ? largeFallbackIconStyle : fallbackIconStyle}
-          />
+        <Animated.View style={[animatedFallbackStyles, coinIconFallbackStyle(size)]}>
+          <SwapCoinIconTextFallback asset={asset} height={size} width={size} style={fallbackIconStyle(size)} />
         </Animated.View>
 
         <Box
           as={Animated.View}
           background={isDarkMode ? 'fillQuaternary' : 'fillTertiary'}
-          style={[
-            animatedEmptyStateStyles,
-            small ? sx.coinIconFallbackSmall : large ? sx.coinIconFallbackLarge : sx.coinIconFallback,
-            {
-              borderRadius: size / 2,
-              height: size,
-              width: size,
-            },
-          ]}
+          style={[animatedEmptyStateStyles, coinIconFallbackStyle(size)]}
         />
       </Animated.View>
 
@@ -153,28 +113,28 @@ export const AnimatedSwapCoinIcon = memo(function AnimatedSwapCoinIcon({
   );
 });
 
+const fallbackIconStyle = (size: number) => ({
+  ...borders.buildCircleAsObject(size),
+  position: 'absolute' as ViewStyle['position'],
+});
+
+const coinIconFallbackStyle = (size: number) => ({
+  borderRadius: size / 2,
+  height: size,
+  width: size,
+  overflow: 'visible' as const,
+});
+
+const containerStyle = (size: number) => ({
+  elevation: 6,
+  height: size,
+  overflow: 'visible' as const,
+});
+
 const sx = StyleSheet.create({
   coinIcon: {
     overflow: 'hidden',
   },
-  coinIconFallback: {
-    borderRadius: 16,
-    height: 32,
-    overflow: 'visible',
-    width: 32,
-  },
-  coinIconFallbackLarge: {
-    borderRadius: 18,
-    height: 36,
-    overflow: 'visible',
-    width: 36,
-  },
-  coinIconFallbackSmall: {
-    borderRadius: 8,
-    height: 16,
-    overflow: 'visible',
-    width: 16,
-  },
   container: {
     elevation: 6,
     height: 32,
diff --git a/src/__swaps__/screens/Swap/components/CoinRow.tsx b/src/__swaps__/screens/Swap/components/CoinRow.tsx
index c3fb98919b1..dc1894bddf1 100644
--- a/src/__swaps__/screens/Swap/components/CoinRow.tsx
+++ b/src/__swaps__/screens/Swap/components/CoinRow.tsx
@@ -131,7 +131,7 @@ export function CoinRow({ isFavorite, onPress, output, uniqueId, testID, ...asse
                     iconUrl={icon_url}
                     address={address}
                     mainnetAddress={mainnetAddress}
-                    large
+                    size={36}
                     chainId={chainId}
                     symbol={symbol || ''}
                     color={colors?.primary}
diff --git a/src/__swaps__/screens/Swap/components/SwapCoinIcon.tsx b/src/__swaps__/screens/Swap/components/SwapCoinIcon.tsx
index bb5069c5092..f5e15d41c8d 100644
--- a/src/__swaps__/screens/Swap/components/SwapCoinIcon.tsx
+++ b/src/__swaps__/screens/Swap/components/SwapCoinIcon.tsx
@@ -24,20 +24,10 @@ const fallbackTextStyles = {
   textAlign: 'center',
 };
 
-const fallbackIconStyle = {
-  ...borders.buildCircleAsObject(32),
+const fallbackIconStyle = (size: number) => ({
+  ...borders.buildCircleAsObject(size),
   position: 'absolute',
-};
-
-const largeFallbackIconStyle = {
-  ...borders.buildCircleAsObject(36),
-  position: 'absolute',
-};
-
-const smallFallbackIconStyle = {
-  ...borders.buildCircleAsObject(16),
-  position: 'absolute',
-};
+});
 
 /**
  * If mainnet asset is available, get the token under /ethereum/ (token) url.
@@ -63,22 +53,22 @@ export const SwapCoinIcon = React.memo(function FeedCoinIcon({
   iconUrl,
   disableShadow = true,
   forceDarkMode,
-  large,
   mainnetAddress,
   chainId,
-  small,
   symbol,
+  size = 32,
+  chainSize,
 }: {
   address: string;
   color?: string;
   iconUrl?: string;
   disableShadow?: boolean;
   forceDarkMode?: boolean;
-  large?: boolean;
   mainnetAddress?: string;
   chainId: ChainId;
-  small?: boolean;
   symbol: string;
+  size?: number;
+  chainSize?: number;
 }) {
   const theme = useTheme();
 
@@ -92,52 +82,52 @@ export const SwapCoinIcon = React.memo(function FeedCoinIcon({
   const eth = isETH(resolvedAddress);
 
   return (
-    <View style={small ? sx.containerSmall : large ? sx.containerLarge : sx.container}>
+    <View style={[styles.container(size), { height: size }]}>
       {eth ? (
         <Animated.View
           key={`${resolvedAddress}-${eth}`}
-          style={[
-            sx.reactCoinIconContainer,
-            small ? sx.coinIconFallbackSmall : large ? sx.coinIconFallbackLarge : sx.coinIconFallback,
-            small || disableShadow ? {} : sx.withShadow,
-            { shadowColor },
-          ]}
+          style={[sx.reactCoinIconContainer, styles.coinIcon(size), !disableShadow && sx.withShadow, { shadowColor }]}
         >
-          <FastImage
-            source={EthIcon as Source}
-            style={small ? sx.coinIconFallbackSmall : large ? sx.coinIconFallbackLarge : sx.coinIconFallback}
-          />
+          <FastImage source={EthIcon as Source} style={styles.coinIcon(size)} />
         </Animated.View>
       ) : (
-        <FastFallbackCoinIconImage
-          size={small ? 16 : large ? 36 : 32}
-          icon={iconUrl}
-          shadowColor={shadowColor}
-          symbol={symbol}
-          theme={theme}
-        >
+        <FastFallbackCoinIconImage size={size} icon={iconUrl} shadowColor={shadowColor} symbol={symbol} theme={theme}>
           {() => (
             <CoinIconTextFallback
               color={color}
-              height={small ? 16 : large ? 36 : 32}
-              style={small ? smallFallbackIconStyle : large ? largeFallbackIconStyle : fallbackIconStyle}
+              height={size}
+              style={fallbackIconStyle(size)}
               symbol={symbol}
               textStyles={fallbackTextStyles}
-              width={small ? 16 : large ? 36 : 32}
+              width={size}
             />
           )}
         </FastFallbackCoinIconImage>
       )}
 
-      {chainId && chainId !== ChainId.mainnet && !small && (
+      {chainId && chainId !== ChainId.mainnet && size > 16 && (
         <View style={sx.badge}>
-          <ChainImage chainId={chainId} size={16} />
+          <ChainImage chainId={chainId} size={chainSize ?? 16} />
         </View>
       )}
     </View>
   );
 });
 
+const styles = {
+  container: (size: number) => ({
+    elevation: 6,
+    height: size,
+    overflow: 'visible' as const,
+  }),
+  coinIcon: (size: number) => ({
+    borderRadius: size / 2,
+    height: size,
+    width: size,
+    overflow: 'visible' as const,
+  }),
+};
+
 const sx = StyleSheet.create({
   badge: {
     bottom: -0,
@@ -151,39 +141,6 @@ const sx = StyleSheet.create({
     shadowRadius: 6,
     shadowOpacity: 0.2,
   },
-  coinIconFallback: {
-    borderRadius: 16,
-    height: 32,
-    overflow: 'visible',
-    width: 32,
-  },
-  coinIconFallbackLarge: {
-    borderRadius: 18,
-    height: 36,
-    overflow: 'visible',
-    width: 36,
-  },
-  coinIconFallbackSmall: {
-    borderRadius: 8,
-    height: 16,
-    overflow: 'visible',
-    width: 16,
-  },
-  container: {
-    elevation: 6,
-    height: 32,
-    overflow: 'visible',
-  },
-  containerLarge: {
-    elevation: 6,
-    height: 36,
-    overflow: 'visible',
-  },
-  containerSmall: {
-    elevation: 6,
-    height: 16,
-    overflow: 'visible',
-  },
   reactCoinIconContainer: {
     alignItems: 'center',
     justifyContent: 'center',
diff --git a/src/__swaps__/screens/Swap/components/SwapInputAsset.tsx b/src/__swaps__/screens/Swap/components/SwapInputAsset.tsx
index af94a152e8a..23734d39ce8 100644
--- a/src/__swaps__/screens/Swap/components/SwapInputAsset.tsx
+++ b/src/__swaps__/screens/Swap/components/SwapInputAsset.tsx
@@ -96,7 +96,7 @@ function SwapInputAmount() {
 function SwapInputIcon() {
   return (
     <Box paddingRight="10px">
-      <AnimatedSwapCoinIcon assetType={'input'} large />
+      <AnimatedSwapCoinIcon assetType={'input'} size={36} />
     </Box>
   );
 }
diff --git a/src/__swaps__/screens/Swap/components/SwapOutputAsset.tsx b/src/__swaps__/screens/Swap/components/SwapOutputAsset.tsx
index de15b46bee6..93130066142 100644
--- a/src/__swaps__/screens/Swap/components/SwapOutputAsset.tsx
+++ b/src/__swaps__/screens/Swap/components/SwapOutputAsset.tsx
@@ -108,7 +108,7 @@ function SwapOutputAmount({ handleTapWhileDisabled }: { handleTapWhileDisabled:
 function SwapOutputIcon() {
   return (
     <Box paddingRight="10px">
-      <AnimatedSwapCoinIcon assetType="output" large />
+      <AnimatedSwapCoinIcon assetType="output" size={36} />
     </Box>
   );
 }
diff --git a/src/__swaps__/screens/Swap/components/SwapSlider.tsx b/src/__swaps__/screens/Swap/components/SwapSlider.tsx
index 572f9eb6e80..90ac3ac724c 100644
--- a/src/__swaps__/screens/Swap/components/SwapSlider.tsx
+++ b/src/__swaps__/screens/Swap/components/SwapSlider.tsx
@@ -412,7 +412,7 @@ export const SwapSlider = ({
               <Columns alignHorizontal="justify" alignVertical="center">
                 <Inline alignVertical="center" space="6px" wrap={false}>
                   <Bleed vertical="4px">
-                    <AnimatedSwapCoinIcon showBadge={false} assetType={'input'} small />
+                    <AnimatedSwapCoinIcon showBadge={false} assetType={'input'} size={16} />
                   </Bleed>
                   <Inline alignVertical="bottom" wrap={false}>
                     <AnimatedText
diff --git a/src/__swaps__/screens/Swap/providers/swap-provider.tsx b/src/__swaps__/screens/Swap/providers/swap-provider.tsx
index da16527c726..5cbb3638652 100644
--- a/src/__swaps__/screens/Swap/providers/swap-provider.tsx
+++ b/src/__swaps__/screens/Swap/providers/swap-provider.tsx
@@ -232,6 +232,9 @@ export const SwapProvider = ({ children }: SwapProviderProps) => {
       const isBridge = swapsStore.getState().inputAsset?.mainnetAddress === swapsStore.getState().outputAsset?.mainnetAddress;
       const isDegenModeEnabled = swapsStore.getState().degenMode;
       const isSwappingToPopularAsset = swapsStore.getState().outputAsset?.sectionId === 'popular';
+      const lastNavigatedTrendingToken = swapsStore.getState().lastNavigatedTrendingToken;
+      const isSwappingToTrendingAsset =
+        lastNavigatedTrendingToken === parameters.assetToBuy.uniqueId || lastNavigatedTrendingToken === parameters.assetToSell.uniqueId;
 
       const selectedGas = getSelectedGas(parameters.chainId);
       if (!selectedGas) {
@@ -326,6 +329,7 @@ export const SwapProvider = ({ children }: SwapProviderProps) => {
           tradeAmountUSD: parameters.quote.tradeAmountUSD,
           degenMode: isDegenModeEnabled,
           isSwappingToPopularAsset,
+          isSwappingToTrendingAsset,
           errorMessage,
           isHardwareWallet,
         });
@@ -397,6 +401,7 @@ export const SwapProvider = ({ children }: SwapProviderProps) => {
         tradeAmountUSD: parameters.quote.tradeAmountUSD,
         degenMode: isDegenModeEnabled,
         isSwappingToPopularAsset,
+        isSwappingToTrendingAsset,
         isHardwareWallet,
       });
     } catch (error) {
@@ -411,6 +416,11 @@ export const SwapProvider = ({ children }: SwapProviderProps) => {
         },
       });
     }
+
+    // reset the last navigated trending token after a swap has taken place
+    swapsStore.setState({
+      lastNavigatedTrendingToken: undefined,
+    });
   };
 
   const executeSwap = performanceTracking.getState().executeFn({
diff --git a/src/analytics/event.ts b/src/analytics/event.ts
index adfcbee8a6d..ecf733e263e 100644
--- a/src/analytics/event.ts
+++ b/src/analytics/event.ts
@@ -9,6 +9,7 @@ import { RequestSource } from '@/utils/requestNavigationHandlers';
 import { CrosschainQuote, Quote, QuoteError } from '@rainbow-me/swaps';
 import { AnyPerformanceLog, Screen } from '../state/performance/operations';
 import { FavoritedSite } from '@/state/browser/favoriteDappsStore';
+import { TrendingTokens } from '@/resources/trendingTokens/trendingTokens';
 
 /**
  * All events, used by `analytics.track()`
@@ -167,6 +168,14 @@ export const event = {
   // token details
   tokenDetailsErc20: 'token_details.erc20',
   tokenDetailsNFT: 'token_details.nft',
+
+  // trending tokens
+  viewTrendingToken: 'trending_tokens.view_trending_token',
+  viewRankedCategory: 'trending_tokens.view_ranked_category',
+  changeNetworkFilter: 'trending_tokens.change_network_filter',
+  changeTimeframeFilter: 'trending_tokens.change_timeframe_filter',
+  changeSortFilter: 'trending_tokens.change_sort_filter',
+  hasLinkedFarcaster: 'trending_tokens.has_linked_farcaster',
 } as const;
 
 type SwapEventParameters<T extends 'swap' | 'crosschainSwap'> = {
@@ -186,6 +195,7 @@ type SwapEventParameters<T extends 'swap' | 'crosschainSwap'> = {
   tradeAmountUSD: number;
   degenMode: boolean;
   isSwappingToPopularAsset: boolean;
+  isSwappingToTrendingAsset: boolean;
   isHardwareWallet: boolean;
 };
 
@@ -706,4 +716,37 @@ export type EventProperties = {
     eventSentAfterMs: number;
     available_data: { description: boolean; image_url: boolean; floorPrice: boolean };
   };
+
+  [event.viewTrendingToken]: {
+    address: TrendingTokens['trendingTokens']['data'][number]['address'];
+    chainId: TrendingTokens['trendingTokens']['data'][number]['chainId'];
+    symbol: TrendingTokens['trendingTokens']['data'][number]['symbol'];
+    name: TrendingTokens['trendingTokens']['data'][number]['name'];
+    highlightedFriends: number;
+  };
+
+  [event.viewRankedCategory]: {
+    category: string;
+    chainId: ChainId | undefined;
+    isLimited: boolean;
+    isEmpty: boolean;
+  };
+
+  [event.changeNetworkFilter]: {
+    chainId: ChainId | undefined;
+  };
+
+  [event.changeTimeframeFilter]: {
+    timeframe: string;
+  };
+
+  [event.changeSortFilter]: {
+    sort: string | undefined;
+  };
+
+  [event.hasLinkedFarcaster]: {
+    hasFarcaster: boolean;
+    personalizedTrending: boolean;
+    walletHash: string;
+  };
 };
diff --git a/src/analytics/userProperties.ts b/src/analytics/userProperties.ts
index b42d5518a61..8a467e4b09a 100644
--- a/src/analytics/userProperties.ts
+++ b/src/analytics/userProperties.ts
@@ -1,3 +1,4 @@
+import { ChainId } from '@/state/backendNetworks/types';
 import { NativeCurrencyKey } from '@/entities';
 import { Language } from '@/languages';
 
@@ -36,6 +37,9 @@ export interface UserProperties {
   hiddenCOins?: string[];
   appIcon?: string;
 
+  // most used networks at the time the user first opens the network switcher
+  mostUsedNetworks?: ChainId[];
+
   // assets
   NFTs?: number;
   poaps?: number;
diff --git a/src/components/AbsolutePortal.tsx b/src/components/AbsolutePortal.tsx
index b578234bd0a..c98b036cd70 100644
--- a/src/components/AbsolutePortal.tsx
+++ b/src/components/AbsolutePortal.tsx
@@ -32,17 +32,15 @@ export const AbsolutePortalRoot = () => {
     return () => unsubscribe();
   }, []);
 
-  return (
-    <View style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, pointerEvents: 'box-none' }}>
-      <View style={{ position: 'relative', pointerEvents: 'box-none' }}>{nodes}</View>
-    </View>
-  );
+  return <View style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, pointerEvents: 'box-none' }}>{nodes}</View>;
 };
 
 export const AbsolutePortal = ({ children }: PropsWithChildren) => {
   useEffect(() => {
     absolutePortal.addNode(children);
-    return () => absolutePortal.removeNode(children);
+    return () => {
+      absolutePortal.removeNode(children);
+    };
   }, [children]);
 
   return null;
diff --git a/src/screens/discover/components/DiscoverFeaturedResultsCard.tsx b/src/components/Discover/DiscoverFeaturedResultsCard.tsx
similarity index 100%
rename from src/screens/discover/components/DiscoverFeaturedResultsCard.tsx
rename to src/components/Discover/DiscoverFeaturedResultsCard.tsx
diff --git a/src/screens/discover/components/DiscoverHome.tsx b/src/components/Discover/DiscoverHome.tsx
similarity index 93%
rename from src/screens/discover/components/DiscoverHome.tsx
rename to src/components/Discover/DiscoverHome.tsx
index 7132c19c016..54cb5ed71f9 100644
--- a/src/screens/discover/components/DiscoverHome.tsx
+++ b/src/components/Discover/DiscoverHome.tsx
@@ -6,6 +6,7 @@ import useExperimentalFlag, {
   MINTS,
   NFT_OFFERS,
   FEATURED_RESULTS,
+  TRENDING_TOKENS,
 } from '@rainbow-me/config/experimentalHooks';
 import { isTestnetChain } from '@/handlers/web3';
 import { Inline, Inset, Stack, Box } from '@/design-system';
@@ -28,11 +29,12 @@ import { FeaturedResultStack } from '@/components/FeaturedResult/FeaturedResultS
 import Routes from '@/navigation/routesNames';
 import { useNavigation } from '@/navigation';
 import { DiscoverFeaturedResultsCard } from './DiscoverFeaturedResultsCard';
+import { TrendingTokens } from '@/components/Discover/TrendingTokens';
 
 export const HORIZONTAL_PADDING = 20;
 
 export default function DiscoverHome() {
-  const { profiles_enabled, mints_enabled, op_rewards_enabled, featured_results } = useRemoteConfig();
+  const { profiles_enabled, mints_enabled, op_rewards_enabled, featured_results, trending_tokens_enabled } = useRemoteConfig();
   const { chainId } = useAccountSettings();
   const profilesEnabledLocalFlag = useExperimentalFlag(PROFILES);
   const profilesEnabledRemoteFlag = profiles_enabled;
@@ -42,6 +44,7 @@ export default function DiscoverHome() {
   const mintsEnabled = (useExperimentalFlag(MINTS) || mints_enabled) && !IS_TEST;
   const opRewardsLocalFlag = useExperimentalFlag(OP_REWARDS);
   const opRewardsRemoteFlag = op_rewards_enabled;
+  const trendingTokensEnabled = (useExperimentalFlag(TRENDING_TOKENS) || trending_tokens_enabled) && !IS_TEST;
   const testNetwork = isTestnetChain({ chainId });
   const { navigate } = useNavigation();
   const isProfilesEnabled = profilesEnabledLocalFlag && profilesEnabledRemoteFlag;
@@ -67,6 +70,7 @@ export default function DiscoverHome() {
             <GasCard />
             {isProfilesEnabled && <ENSSearchCard />}
           </Inline>
+          {trendingTokensEnabled && <TrendingTokens />}
           <RemoteCardCarousel />
           {mintsEnabled && (
             <Stack space="20px">
diff --git a/src/screens/discover/components/DiscoverScreenContent.tsx b/src/components/Discover/DiscoverScreenContent.tsx
similarity index 76%
rename from src/screens/discover/components/DiscoverScreenContent.tsx
rename to src/components/Discover/DiscoverScreenContent.tsx
index 1e3a7650013..99271271ded 100644
--- a/src/screens/discover/components/DiscoverScreenContent.tsx
+++ b/src/components/Discover/DiscoverScreenContent.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 import { View } from 'react-native';
 import { FlexItem, Page } from '@/components/layout';
-import DiscoverHome from './DiscoverHome';
-import DiscoverSearch from './DiscoverSearch';
-import DiscoverSearchContainer from './DiscoverSearchContainer';
+import DiscoverHome from '@/components/Discover/DiscoverHome';
+import DiscoverSearch from '@/components/Discover/DiscoverSearch';
+import DiscoverSearchContainer from '@/components/Discover/DiscoverSearchContainer';
 import { Box, Inset } from '@/design-system';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { useDiscoverScreenContext } from '../DiscoverScreenContext';
+import { useDiscoverScreenContext } from '@/components/Discover/DiscoverScreenContext';
 
 function Switcher({ children }: { children: React.ReactNode[] }) {
   const { isSearching } = useDiscoverScreenContext();
diff --git a/src/screens/discover/DiscoverScreenContext.tsx b/src/components/Discover/DiscoverScreenContext.tsx
similarity index 96%
rename from src/screens/discover/DiscoverScreenContext.tsx
rename to src/components/Discover/DiscoverScreenContext.tsx
index eb9b276443d..31a8e89106b 100644
--- a/src/screens/discover/DiscoverScreenContext.tsx
+++ b/src/components/Discover/DiscoverScreenContext.tsx
@@ -2,6 +2,7 @@ import { analytics } from '@/analytics';
 import React, { createContext, Dispatch, SetStateAction, RefObject, useState, useRef, useCallback } from 'react';
 import { SectionList, TextInput } from 'react-native';
 import Animated from 'react-native-reanimated';
+import { useTrackDiscoverScreenTime } from './useTrackDiscoverScreenTime';
 
 type DiscoverScreenContextType = {
   scrollViewRef: RefObject<Animated.ScrollView>;
@@ -80,6 +81,8 @@ const DiscoverScreenProvider = ({ children }: { children: React.ReactNode }) =>
     setIsSearching(false);
   }, [searchQuery]);
 
+  useTrackDiscoverScreenTime();
+
   return (
     <DiscoverScreenContext.Provider
       value={{
diff --git a/src/screens/discover/components/DiscoverSearch.tsx b/src/components/Discover/DiscoverSearch.tsx
similarity index 99%
rename from src/screens/discover/components/DiscoverSearch.tsx
rename to src/components/Discover/DiscoverSearch.tsx
index 1eacade9724..92495a2100d 100644
--- a/src/screens/discover/components/DiscoverSearch.tsx
+++ b/src/components/Discover/DiscoverSearch.tsx
@@ -6,7 +6,7 @@ import * as lang from '@/languages';
 import deviceUtils from '@/utils/deviceUtils';
 import CurrencySelectionList from '@/components/CurrencySelectionList';
 import { Row } from '@/components/layout';
-import { useDiscoverScreenContext } from '../DiscoverScreenContext';
+import { useDiscoverScreenContext } from '@/components/Discover/DiscoverScreenContext';
 import { analytics } from '@/analytics';
 import { PROFILES, useExperimentalFlag } from '@/config';
 import { useAccountSettings, useSearchCurrencyList, usePrevious, useHardwareBackOnFocus } from '@/hooks';
diff --git a/src/screens/discover/components/DiscoverSearchContainer.tsx b/src/components/Discover/DiscoverSearchContainer.tsx
similarity index 92%
rename from src/screens/discover/components/DiscoverSearchContainer.tsx
rename to src/components/Discover/DiscoverSearchContainer.tsx
index fa7fabff669..2e5a425b631 100644
--- a/src/screens/discover/components/DiscoverSearchContainer.tsx
+++ b/src/components/Discover/DiscoverSearchContainer.tsx
@@ -3,8 +3,8 @@ import React, { useEffect } from 'react';
 import { ButtonPressAnimation } from '@/components/animations';
 import { Column, Row } from '@/components/layout';
 import { Text } from '@/components/text';
-import DiscoverSearchInput from '@/screens/discover/components/DiscoverSearchInput';
-import { useDiscoverScreenContext } from '../DiscoverScreenContext';
+import DiscoverSearchInput from '@/components/Discover/DiscoverSearchInput';
+import { useDiscoverScreenContext } from '@/components/Discover/DiscoverScreenContext';
 import { deviceUtils } from '@/utils';
 import { useDelayedValueWithLayoutAnimation } from '@/hooks';
 import styled from '@/styled-thing';
diff --git a/src/screens/discover/components/DiscoverSearchInput.tsx b/src/components/Discover/DiscoverSearchInput.tsx
similarity index 98%
rename from src/screens/discover/components/DiscoverSearchInput.tsx
rename to src/components/Discover/DiscoverSearchInput.tsx
index 2d21419dbd5..f8dc62ae696 100644
--- a/src/screens/discover/components/DiscoverSearchInput.tsx
+++ b/src/components/Discover/DiscoverSearchInput.tsx
@@ -13,7 +13,7 @@ import styled from '@/styled-thing';
 import { margin, padding } from '@/styles';
 import { deviceUtils } from '@/utils';
 import { ThemeContextProps } from '@/theme';
-import { useDiscoverScreenContext } from '@/screens/discover/DiscoverScreenContext';
+import { useDiscoverScreenContext } from '@/components/Discover/DiscoverScreenContext';
 import { useBackendNetworksStore } from '@/state/backendNetworks/backendNetworks';
 import { ChainId } from '@/state/backendNetworks/types';
 
diff --git a/src/components/Discover/TrendingTokens.tsx b/src/components/Discover/TrendingTokens.tsx
new file mode 100644
index 00000000000..af42595917e
--- /dev/null
+++ b/src/components/Discover/TrendingTokens.tsx
@@ -0,0 +1,625 @@
+import { DropdownMenu } from '@/components/DropdownMenu';
+import { globalColors, Text, useBackgroundColor } from '@/design-system';
+import { useForegroundColor } from '@/design-system/color/useForegroundColor';
+
+import { SwapCoinIcon } from '@/__swaps__/screens/Swap/components/SwapCoinIcon';
+import { analyticsV2 } from '@/analytics';
+import { useBackendNetworksStore } from '@/state/backendNetworks/backendNetworks';
+import { ChainId } from '@/state/backendNetworks/types';
+import { ChainImage } from '@/components/coin-icon/ChainImage';
+import { NetworkSelector } from '@/components/NetworkSwitcher';
+import Skeleton, { FakeAvatar, FakeText } from '@/components/skeleton/Skeleton';
+import { formatNumber } from '@/helpers/strings';
+import * as i18n from '@/languages';
+import { Navigation } from '@/navigation';
+import Routes from '@/navigation/routesNames';
+import { TrendingTokens as TrendingTokensType, useTrendingTokens } from '@/resources/trendingTokens/trendingTokens';
+import { useNavigationStore } from '@/state/navigation/navigationStore';
+import { swapsStore } from '@/state/swaps/swapsStore';
+import { categories, sortFilters, timeFilters, useTrendingTokensStore } from '@/state/trendingTokens/trendingTokens';
+import { colors } from '@/styles';
+import { useTheme } from '@/theme';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { FlatList, View } from 'react-native';
+import FastImage from 'react-native-fast-image';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import LinearGradient from 'react-native-linear-gradient';
+import Animated, { LinearTransition, runOnJS, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+import { ButtonPressAnimation } from '../animations';
+
+const t = i18n.l.trending_tokens;
+
+const AnimatedLinearGradient = Animated.createAnimatedComponent(LinearGradient);
+
+function FilterButton({ icon, label, onPress }: { onPress?: VoidFunction; label: string; icon: string | JSX.Element }) {
+  const pressed = useSharedValue(false);
+
+  const tap = Gesture.Tap()
+    .onBegin(() => {
+      pressed.value = true;
+      if (onPress) runOnJS(onPress)();
+    })
+    .onFinalize(() => (pressed.value = false));
+
+  const animatedStyles = useAnimatedStyle(() => ({
+    transform: [{ scale: withTiming(pressed.value ? 0.95 : 1, { duration: 100 }) }],
+  }));
+
+  const backgroundColor = useBackgroundColor('fillTertiary');
+  const borderColor = useBackgroundColor('fillSecondary');
+
+  const iconColor = useForegroundColor('labelQuaternary');
+
+  return (
+    <GestureDetector gesture={tap}>
+      <Animated.View
+        style={[
+          {
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 4,
+            height: 36,
+            paddingHorizontal: 12,
+            borderRadius: 18,
+            borderWidth: 1.33,
+            borderColor,
+            backgroundColor,
+          },
+          animatedStyles,
+        ]}
+      >
+        {typeof icon === 'string' ? (
+          <Text color={{ custom: iconColor }} size="icon 13px" weight="heavy" style={{ width: 16 }}>
+            {icon}
+          </Text>
+        ) : (
+          icon
+        )}
+        <Text color="labelSecondary" size="17pt" weight="bold">
+          {label}
+        </Text>
+        <Text color={{ custom: iconColor }} size="13pt" weight="bold" style={{ width: 14 }}>
+          􀆏
+        </Text>
+      </Animated.View>
+    </GestureDetector>
+  );
+}
+
+function useTrendingTokensData() {
+  const { chainId, category, timeframe, sort } = useTrendingTokensStore(state => ({
+    chainId: state.chainId,
+    category: state.category,
+    timeframe: state.timeframe,
+    sort: state.sort,
+  }));
+
+  return useTrendingTokens({
+    chainId,
+    // category,
+    // timeframe,
+    // sort,
+  });
+}
+
+function ReportAnalytics() {
+  const activeSwipeRoute = useNavigationStore(state => state.activeSwipeRoute);
+  const { category, chainId } = useTrendingTokensStore(state => ({ category: state.category, chainId: state.chainId }));
+  const { data, isLoading } = useTrendingTokensData();
+
+  useEffect(() => {
+    if (isLoading || activeSwipeRoute !== Routes.DISCOVER_SCREEN) return;
+
+    const isEmpty = (data?.trendingTokens?.data?.length ?? 0) === 0;
+    const isLimited = !isEmpty && (data?.trendingTokens?.data?.length ?? 0) < 6;
+
+    analyticsV2.track(analyticsV2.event.viewRankedCategory, {
+      category,
+      chainId,
+      isLimited,
+      isEmpty,
+    });
+  }, [isLoading, activeSwipeRoute, data?.trendingTokens.data.length, category, chainId]);
+
+  return null;
+}
+
+function CategoryFilterButton({
+  category,
+  icon,
+  iconWidth = 16,
+  iconColor,
+  label,
+  highlightedBackgroundColor,
+}: {
+  category: (typeof categories)[number];
+  icon: string;
+  iconColor: string;
+  highlightedBackgroundColor: string;
+  iconWidth?: number;
+  label: string;
+}) {
+  const { isDarkMode } = useTheme();
+  const fillTertiary = useBackgroundColor('fillTertiary');
+  const fillSecondary = useBackgroundColor('fillSecondary');
+
+  const selected = useTrendingTokensStore(state => state.category === category);
+
+  const borderColor = selected && isDarkMode ? globalColors.white80 : fillSecondary;
+
+  const pressed = useSharedValue(false);
+
+  const selectCategory = useCallback(() => {
+    useTrendingTokensStore.getState().setCategory(category);
+  }, [category]);
+
+  const tap = Gesture.Tap()
+    .onBegin(() => {
+      pressed.value = true;
+    })
+    .onEnd(() => {
+      pressed.value = false;
+      runOnJS(selectCategory)();
+    });
+
+  const animatedStyles = useAnimatedStyle(() => ({
+    transform: [{ scale: withTiming(pressed.value ? 0.95 : 1, { duration: 100 }) }],
+  }));
+
+  return (
+    <GestureDetector gesture={tap}>
+      <AnimatedLinearGradient
+        colors={selected ? [highlightedBackgroundColor, 'white'] : [fillTertiary, fillTertiary]}
+        style={[
+          {
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 4,
+            height: 36,
+            paddingHorizontal: 12,
+            borderRadius: 18,
+            borderWidth: 1.33,
+            borderColor,
+          },
+          animatedStyles,
+        ]}
+        layout={LinearTransition}
+      >
+        <Text color={{ custom: iconColor }} size="icon 13px" weight="heavy" style={{ width: iconWidth }}>
+          {icon}
+        </Text>
+        <Text color={selected ? { custom: 'black' } : 'labelSecondary'} size="17pt" weight={selected ? 'heavy' : 'bold'}>
+          {label}
+        </Text>
+      </AnimatedLinearGradient>
+    </GestureDetector>
+  );
+}
+
+function FriendHolders() {
+  const backgroundColor = useBackgroundColor('surfacePrimary');
+  return (
+    <View style={{ flexDirection: 'row', gap: 5.67, alignItems: 'center', marginTop: -2 }}>
+      <View style={{ flexDirection: 'row-reverse', alignItems: 'center' }}>
+        <FastImage
+          source={{
+            uri: 'https://rainbowme-res.cloudinary.com/image/upload/v1654696359/assets/ethereum/0x1f9840a85d5af5bf1d1762f925bdaddc4201f984.png',
+          }}
+          style={{
+            height: 12 + 2,
+            width: 12 + 2,
+            borderRadius: 6,
+            borderWidth: 1,
+            borderColor: backgroundColor,
+            marginVertical: -1,
+            marginLeft: -6,
+          }}
+        />
+        <FastImage
+          source={{
+            uri: 'https://rainbowme-res.cloudinary.com/image/upload/v1654696359/assets/ethereum/0x1f9840a85d5af5bf1d1762f925bdaddc4201f984.png',
+          }}
+          style={{
+            height: 12 + 2,
+            width: 12 + 2,
+            borderRadius: 6,
+            borderWidth: 1,
+            borderColor: backgroundColor,
+            marginVertical: -1,
+            marginLeft: -6,
+          }}
+        />
+      </View>
+
+      <Text color="labelSecondary" size="11pt" weight="bold">
+        mikedemarais{' '}
+        <Text color="labelTertiary" size="11pt" weight="bold">
+          and 2 others
+        </Text>
+      </Text>
+    </View>
+  );
+}
+
+function TrendingTokenLoadingRow() {
+  return (
+    <View style={{ flex: 1, gap: 0, height: 78, width: '100%' }}>
+      <Skeleton>
+        <View style={{ padding: 12, flexDirection: 'row', gap: 12, alignItems: 'center' }}>
+          <FakeAvatar />
+
+          <View style={{ gap: 12, flex: 1 }}>
+            <View style={{ flexDirection: 'row', gap: 5.67, alignItems: 'center', marginTop: -2 }}>
+              <View style={{ flexDirection: 'row-reverse', alignItems: 'center' }}>
+                <View
+                  style={{
+                    height: 12 + 2,
+                    width: 12 + 2,
+                    borderRadius: 6,
+                    borderWidth: 1,
+                    borderColor: colors.dark,
+                    backgroundColor: colors.alpha(colors.dark, 0.8),
+                    marginVertical: -1,
+                    marginLeft: -6,
+                  }}
+                />
+                <View
+                  style={{
+                    height: 12 + 2,
+                    width: 12 + 2,
+                    borderRadius: 6,
+                    borderWidth: 1,
+                    borderColor: colors.dark,
+                    backgroundColor: colors.alpha(colors.dark, 0.6),
+                    marginVertical: -1,
+                    marginLeft: -6,
+                  }}
+                />
+                <View
+                  style={{
+                    height: 12 + 2,
+                    width: 12 + 2,
+                    borderRadius: 6,
+                    borderWidth: 1,
+                    borderColor: colors.dark,
+                    backgroundColor: colors.alpha(colors.dark, 0.4),
+                    marginVertical: -1,
+                  }}
+                />
+              </View>
+
+              <FakeText width={148} />
+            </View>
+
+            <View style={{ flexDirection: 'row', gap: 12, alignItems: 'center' }}>
+              <View style={{ gap: 8 }}>
+                <View style={{ flexDirection: 'row', gap: 6, alignItems: 'baseline' }}>
+                  <FakeText height={16} width={84} />
+                  <FakeText height={14} width={32} />
+                  <FakeText height={16} width={60} />
+                </View>
+
+                <View style={{ flexDirection: 'row', gap: 18, alignItems: 'center' }}>
+                  <View style={{ flexDirection: 'row', gap: 4 }}>
+                    <FakeText height={14} width={32} />
+                    <FakeText height={14} width={44} />
+                  </View>
+
+                  <View style={{ flexDirection: 'row', gap: 4 }}>
+                    <FakeText height={14} width={36} />
+                    <FakeText height={14} width={52} />
+                  </View>
+                </View>
+              </View>
+
+              <View style={{ gap: 8, marginLeft: 'auto' }}>
+                <View style={{ flexDirection: 'row', gap: 2, alignItems: 'center' }}>
+                  <FakeText height={16} width={60} />
+                </View>
+                <View style={{ flexDirection: 'row', gap: 5, justifyContent: 'flex-end' }}>
+                  <FakeText width={40} />
+                </View>
+              </View>
+            </View>
+          </View>
+        </View>
+      </Skeleton>
+    </View>
+  );
+}
+
+function TrendingTokenRow({ item }: { item: TrendingTokensType['trendingTokens']['data'][number] }) {
+  const separatorColor = useForegroundColor('separator');
+
+  const priceValue = item.market.price?.value || 0;
+  const isPositiveChange = item.market.price?.change_24h && item.market.price?.change_24h > 0;
+  const price = priceValue < 0.001 ? `< $0.001` : formatNumber(priceValue, { useOrderSuffix: true, decimals: 4, style: '$' });
+  const marketCap = formatNumber(item.market.market_cap?.value || 0, { useOrderSuffix: true, decimals: 1, style: '$' });
+  const volume = formatNumber(item.market.volume_24h || 0, { useOrderSuffix: true, decimals: 1, style: '$' });
+
+  const handleNavigateToToken = useCallback(() => {
+    analyticsV2.track(analyticsV2.event.viewTrendingToken, {
+      address: item.address,
+      chainId: item.chainId,
+      symbol: item.symbol,
+      name: item.name,
+      highlightedFriends: 0, // TODO: Once data is available from backend
+    });
+
+    swapsStore.setState({
+      lastNavigatedTrendingToken: item.uniqueId,
+    });
+
+    Navigation.handleAction(Routes.EXPANDED_ASSET_SHEET, {
+      asset: item,
+      type: 'token',
+    });
+  }, [item]);
+
+  if (!item) return null;
+
+  return (
+    <ButtonPressAnimation onPress={handleNavigateToToken} scaleTo={0.94}>
+      <View style={{ paddingVertical: 12, flexDirection: 'row', gap: 12, alignItems: 'center' }}>
+        <SwapCoinIcon
+          iconUrl={item.icon_url}
+          color={item.colors.primary}
+          chainId={item.chainId}
+          address={item.address}
+          symbol={item.symbol}
+          size={40}
+          chainSize={20}
+        />
+
+        <View style={{ gap: 12, flex: 1 }}>
+          <FriendHolders />
+
+          <View style={{ flexDirection: 'row', gap: 12, alignItems: 'center' }}>
+            <View style={{ gap: 12 }}>
+              <View style={{ flexDirection: 'row', gap: 6, alignItems: 'baseline' }}>
+                <Text color="label" size="15pt" weight="bold" style={{ maxWidth: 100 }} numberOfLines={1}>
+                  {item.name}
+                </Text>
+                <Text color="labelTertiary" size="11pt" weight="bold" style={{ maxWidth: 100 }} numberOfLines={1}>
+                  {item.symbol}
+                </Text>
+                <Text color="label" size="15pt" weight="bold">
+                  {price}
+                </Text>
+              </View>
+
+              <View style={{ flexDirection: 'row', gap: 8, alignItems: 'center' }}>
+                <View style={{ flexDirection: 'row', gap: 4 }}>
+                  <Text color="labelQuaternary" size="11pt" weight="bold">
+                    VOL
+                  </Text>
+                  <Text color="labelTertiary" size="11pt" weight="bold">
+                    {volume}
+                  </Text>
+                </View>
+
+                <Text color={{ custom: separatorColor }} size="icon 9px" weight="bold">
+                  |
+                </Text>
+
+                <View style={{ flexDirection: 'row', gap: 4 }}>
+                  <Text color="labelQuaternary" size="11pt" weight="bold">
+                    MCAP
+                  </Text>
+                  <Text color="labelTertiary" size="11pt" weight="bold">
+                    {marketCap}
+                  </Text>
+                </View>
+              </View>
+            </View>
+
+            <View style={{ gap: 12, marginLeft: 'auto' }}>
+              <View style={{ flexDirection: 'row', gap: 2, alignItems: 'center' }}>
+                <Text color={isPositiveChange ? 'green' : 'red'} size="11pt" weight="bold">
+                  {isPositiveChange ? '􀄨' : '􀄩'}
+                </Text>
+                <Text color={isPositiveChange ? 'green' : 'red'} size="15pt" weight="bold">
+                  {formatNumber(item.market.price?.change_24h || 0, { decimals: 2, useOrderSuffix: true })}%
+                </Text>
+              </View>
+              <View style={{ flexDirection: 'row', gap: 5, justifyContent: 'flex-end' }}>
+                <Text color="labelQuaternary" size="11pt" weight="bold">
+                  1H
+                </Text>
+                <Text color={isPositiveChange ? 'green' : 'red'} size="11pt" weight="bold">
+                  {formatNumber(item.market.price?.change_24h || 0, { decimals: 2, useOrderSuffix: true })}%
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+      </View>
+    </ButtonPressAnimation>
+  );
+}
+
+function NoResults() {
+  const { isDarkMode } = useTheme();
+  const fillQuaternary = useBackgroundColor('fillQuaternary');
+  const backgroundColor = isDarkMode ? '#191A1C' : fillQuaternary;
+
+  return (
+    <View style={{ flex: 1, padding: 20, flexDirection: 'row', justifyContent: 'space-between', backgroundColor, borderRadius: 20 }}>
+      <View style={{ flex: 1, gap: 16 }}>
+        <Text color="label" size="20pt" weight="heavy">
+          {i18n.t(t.no_results.title)}
+        </Text>
+        <Text color="labelSecondary" size="15pt" weight="semibold">
+          {i18n.t(t.no_results.body)}
+        </Text>
+      </View>
+      <View style={{ backgroundColor: '#FF584D', height: 36, width: 36, borderRadius: 18, alignItems: 'center', justifyContent: 'center' }}>
+        <Text color={{ custom: 'white' }} size="13pt" style={{ textAlign: 'center', paddingLeft: 2, paddingTop: 1 }}>
+          􀙭
+        </Text>
+      </View>
+    </View>
+  );
+}
+
+function NetworkFilter() {
+  const [isOpen, setOpen] = useState(false);
+  const selected = useSharedValue<ChainId | undefined>(undefined);
+
+  const { chainId, setChainId } = useTrendingTokensStore(state => ({
+    chainId: state.chainId,
+    setChainId: state.setChainId,
+  }));
+
+  const setSelected = useCallback(
+    (chainId: ChainId | undefined) => {
+      'worklet';
+      selected.value = chainId;
+      runOnJS(setChainId)(chainId);
+    },
+    [selected, setChainId]
+  );
+
+  const label = useMemo(() => {
+    if (!chainId) return i18n.t(t.all);
+    return useBackendNetworksStore.getState().getChainsLabel()[chainId];
+  }, [chainId]);
+
+  const icon = useMemo(() => {
+    if (!chainId) return '􀤆';
+    return <ChainImage chainId={chainId} size={16} />;
+  }, [chainId]);
+
+  return (
+    <>
+      <FilterButton label={label} icon={icon} onPress={() => setOpen(true)} />
+      {isOpen && <NetworkSelector selected={selected} setSelected={setSelected} onClose={() => setOpen(false)} />}
+    </>
+  );
+}
+
+function TimeFilter() {
+  const timeframe = useTrendingTokensStore(state => state.timeframe);
+
+  return (
+    <DropdownMenu
+      menuConfig={{
+        menuItems: timeFilters.map(time => ({
+          actionTitle: i18n.t(t.filters.time[time]),
+          actionKey: time,
+        })),
+      }}
+      side="bottom"
+      onPressMenuItem={timeframe => useTrendingTokensStore.getState().setTimeframe(timeframe)}
+    >
+      <FilterButton label={i18n.t(t.filters.time[timeframe])} icon="􀐫" />
+    </DropdownMenu>
+  );
+}
+
+function SortFilter() {
+  const sort = useTrendingTokensStore(state => state.sort);
+
+  const iconColor = useForegroundColor('labelQuaternary');
+
+  return (
+    <DropdownMenu
+      menuConfig={{
+        menuItems: sortFilters.map(sort => ({
+          actionTitle: i18n.t(t.filters.sort[sort]),
+          actionKey: sort,
+        })),
+      }}
+      side="bottom"
+      onPressMenuItem={selection => {
+        if (selection === sort) return useTrendingTokensStore.getState().setSort(undefined);
+        useTrendingTokensStore.getState().setSort(selection);
+      }}
+    >
+      <FilterButton
+        label={i18n.t(t.filters.sort[sort || 'sort'])}
+        icon={
+          <Text color={{ custom: iconColor }} size="icon 13px" weight="heavy" style={{ width: 20 }}>
+            􀄬
+          </Text>
+        }
+      />
+    </DropdownMenu>
+  );
+}
+
+function TrendingTokenData() {
+  const { data, isLoading } = useTrendingTokensData();
+  if (isLoading)
+    return (
+      <View style={{ flex: 1 }}>
+        {Array.from({ length: 10 }).map((_, index) => (
+          <TrendingTokenLoadingRow key={index} />
+        ))}
+      </View>
+    );
+
+  return (
+    <FlatList
+      style={{ marginHorizontal: -20 }}
+      contentContainerStyle={{ paddingHorizontal: 20 }}
+      ListEmptyComponent={<NoResults />}
+      data={data?.trendingTokens.data}
+      renderItem={({ item }) => <TrendingTokenRow item={item} />}
+    />
+  );
+}
+
+export function TrendingTokens() {
+  const padding = 20;
+  return (
+    <View style={{ gap: 28 }}>
+      <View style={{ gap: 12, justifyContent: 'center' }}>
+        <Animated.ScrollView
+          showsHorizontalScrollIndicator={false}
+          horizontal
+          contentContainerStyle={{ alignItems: 'center', flexDirection: 'row', gap: 12, paddingHorizontal: padding }}
+          style={{ marginHorizontal: -padding }}
+        >
+          <CategoryFilterButton
+            category="trending"
+            label={i18n.t(t.filters.categories.trending)}
+            icon="􀙭"
+            iconColor={'#D0281C'}
+            highlightedBackgroundColor={'#E6A39E'}
+          />
+          <CategoryFilterButton
+            category="new"
+            label={i18n.t(t.filters.categories.new)}
+            icon="􀋃"
+            iconColor={'#FFDA24'}
+            highlightedBackgroundColor={'#F9EAA1'}
+            iconWidth={18}
+          />
+          <CategoryFilterButton
+            category="farcaster"
+            label={i18n.t(t.filters.categories.farcaster)}
+            icon="􀌥"
+            iconColor={'#5F5AFA'}
+            highlightedBackgroundColor={'#B9B7F7'}
+            iconWidth={20}
+          />
+        </Animated.ScrollView>
+
+        <Animated.ScrollView
+          showsHorizontalScrollIndicator={false}
+          horizontal
+          contentContainerStyle={{ alignItems: 'center', flexDirection: 'row', gap: 12, paddingHorizontal: padding }}
+          style={{ marginHorizontal: -padding }}
+        >
+          <NetworkFilter />
+          <TimeFilter />
+          <SortFilter />
+        </Animated.ScrollView>
+      </View>
+
+      <TrendingTokenData />
+      <ReportAnalytics />
+    </View>
+  );
+}
diff --git a/src/components/Discover/useTrackDiscoverScreenTime.ts b/src/components/Discover/useTrackDiscoverScreenTime.ts
new file mode 100644
index 00000000000..64e96a50fa1
--- /dev/null
+++ b/src/components/Discover/useTrackDiscoverScreenTime.ts
@@ -0,0 +1,21 @@
+import { useNavigationStore } from '@/state/navigation/navigationStore';
+import { useEffect } from 'react';
+import Routes from '@/navigation/routesNames';
+import { PerformanceTracking, currentlyTrackedMetrics } from '@/performance/tracking';
+import { PerformanceMetrics } from '@/performance/tracking/types/PerformanceMetrics';
+
+export const useTrackDiscoverScreenTime = () => {
+  const activeSwipeRoute = useNavigationStore(state => state.activeSwipeRoute);
+  useEffect(() => {
+    const isOnDiscoverScreen = activeSwipeRoute === Routes.DISCOVER_SCREEN;
+    const data = currentlyTrackedMetrics.get(PerformanceMetrics.timeSpentOnDiscoverScreen);
+
+    if (!isOnDiscoverScreen && data?.startTimestamp) {
+      PerformanceTracking.finishMeasuring(PerformanceMetrics.timeSpentOnDiscoverScreen);
+    }
+
+    if (isOnDiscoverScreen) {
+      PerformanceTracking.startMeasuring(PerformanceMetrics.timeSpentOnDiscoverScreen);
+    }
+  }, [activeSwipeRoute]);
+};
diff --git a/src/components/NetworkSwitcher.tsx b/src/components/NetworkSwitcher.tsx
new file mode 100644
index 00000000000..da623e9b840
--- /dev/null
+++ b/src/components/NetworkSwitcher.tsx
@@ -0,0 +1,764 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import { getChainColorWorklet } from '@/__swaps__/utils/swaps';
+import { useBackendNetworksStore } from '@/state/backendNetworks/backendNetworks';
+import { ChainId } from '@/state/backendNetworks/types';
+import { AbsolutePortal } from '@/components/AbsolutePortal';
+import { AnimatedBlurView } from '@/components/AnimatedComponents/AnimatedBlurView';
+import { ButtonPressAnimation } from '@/components/animations';
+import { SPRING_CONFIGS } from '@/components/animations/animationConfigs';
+import { AnimatedChainImage, ChainImage } from '@/components/coin-icon/ChainImage';
+import { AnimatedText, DesignSystemProvider, globalColors, Separator, Text, useBackgroundColor, useColorMode } from '@/design-system';
+import { useForegroundColor } from '@/design-system/color/useForegroundColor';
+import * as i18n from '@/languages';
+import { useTheme } from '@/theme';
+import { DEVICE_WIDTH } from '@/utils/deviceUtils';
+import MaskedView from '@react-native-masked-view/masked-view';
+import chroma from 'chroma-js';
+import { PropsWithChildren, ReactElement, useEffect } from 'react';
+import React, { Pressable, View } from 'react-native';
+import { Gesture, GestureDetector, State, TapGesture } from 'react-native-gesture-handler';
+import LinearGradient from 'react-native-linear-gradient';
+import Animated, {
+  FadeIn,
+  FadeOut,
+  FadeOutUp,
+  LinearTransition,
+  runOnJS,
+  SharedValue,
+  SlideInDown,
+  SlideOutDown,
+  useAnimatedReaction,
+  useAnimatedStyle,
+  useDerivedValue,
+  useSharedValue,
+  withDelay,
+  withSequence,
+  withSpring,
+  withTiming,
+} from 'react-native-reanimated';
+import Svg, { Path } from 'react-native-svg';
+import {
+  customizeNetworksBannerStore,
+  dismissCustomizeNetworksBanner,
+  networkSwitcherStore,
+  shouldShowCustomizeNetworksBanner,
+  showCustomizeNetworksBanner,
+} from '@/state/networkSwitcher/networkSwitcher';
+
+const t = i18n.l.network_switcher;
+
+const translations = {
+  edit: i18n.t(t.edit),
+  done: i18n.t(i18n.l.done),
+  networks: i18n.t(t.networks),
+  show_more: i18n.t(t.show_more),
+  show_less: i18n.t(t.show_less),
+  drag_to_rearrange: i18n.t(t.drag_to_rearrange),
+};
+
+function EditButton({ editing }: { editing: SharedValue<boolean> }) {
+  const blue = useForegroundColor('blue');
+  const borderColor = chroma(blue).alpha(0.08).hex();
+
+  const text = useDerivedValue(() => (editing.value ? translations.done : translations.edit));
+
+  return (
+    <ButtonPressAnimation
+      onPress={() => {
+        'worklet';
+        editing.value = !editing.value;
+      }}
+      scaleTo={0.95}
+      style={[
+        { position: 'absolute', right: 0 },
+        { paddingHorizontal: 10, height: 28, justifyContent: 'center' },
+        { borderColor, borderWidth: 1.33, borderRadius: 14 },
+      ]}
+    >
+      <AnimatedText color="blue" size="17pt" weight="bold" style={{ shadowColor: '#268FFF', shadowOpacity: 0.4, shadowRadius: 12 }}>
+        {text}
+      </AnimatedText>
+    </ButtonPressAnimation>
+  );
+}
+
+function Header({ editing }: { editing: SharedValue<boolean> }) {
+  const separatorTertiary = useForegroundColor('separatorTertiary');
+  const fill = useForegroundColor('fill');
+
+  const title = useDerivedValue(() => {
+    return editing.value ? translations.edit : translations.networks;
+  });
+
+  return (
+    <View style={{ height: 66, borderBottomWidth: 1, borderBottomColor: separatorTertiary, paddingTop: 20 }}>
+      <View style={{ position: 'absolute', left: 0, right: 0, top: 6 }}>
+        <View style={{ height: 5, width: 36, marginHorizontal: 'auto', borderRadius: 3, backgroundColor: fill }} />
+      </View>
+
+      <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center', height: 28 }}>
+        <AnimatedText color="label" size="20pt" weight="heavy">
+          {title}
+        </AnimatedText>
+
+        <EditButton editing={editing} />
+      </View>
+    </View>
+  );
+}
+
+const CustomizeNetworksBanner = !showCustomizeNetworksBanner
+  ? () => null
+  : function CustomizeNetworksBanner({ editing }: { editing: SharedValue<boolean> }) {
+      useAnimatedReaction(
+        () => editing.value,
+        (editing, prev) => {
+          if (!prev && editing) runOnJS(dismissCustomizeNetworksBanner)();
+        }
+      );
+
+      const dismissedAt = customizeNetworksBannerStore(s => s.dismissedAt);
+      if (!shouldShowCustomizeNetworksBanner(dismissedAt)) return null;
+
+      const height = 75;
+      const blue = '#268FFF';
+
+      return (
+        <DesignSystemProvider colorMode="light">
+          <Animated.View
+            entering={FadeIn.duration(300).delay(600)}
+            exiting={FadeOutUp.duration(200)}
+            style={{ position: 'absolute', top: -(height + 14), left: 0, right: 0 }}
+          >
+            <MaskedView
+              maskElement={
+                <Svg width="100%" height={height} viewBox="0 0 353 75" fill="none">
+                  <Path
+                    d="M1.27368 16.2855C0 20.0376 0 24.6917 0 34C0 43.3083 0 47.9624 1.27368 51.7145C3.67205 58.7799 9.22007 64.3279 16.2855 66.7263C20.0376 68 24.6917 68 34 68H303.795C305.065 68 305.7 68 306.306 68.1265C306.844 68.2388 307.364 68.4243 307.851 68.6781C308.401 68.9641 308.892 69.3661 309.874 70.17L313.454 73.0986L313.454 73.0988C314.717 74.1323 315.349 74.6491 316.052 74.8469C316.672 75.0214 317.328 75.0214 317.948 74.8469C318.651 74.6491 319.283 74.1323 320.546 73.0988L320.546 73.0986L324.269 70.0528C325.203 69.2882 325.671 68.9059 326.166 68.6362C326.634 68.3817 327.044 68.2214 327.56 68.0907C328.107 67.9521 328.787 67.911 330.146 67.8287C332.84 67.6657 334.885 67.3475 336.715 66.7263C343.78 64.3279 349.328 58.7799 351.726 51.7145C353 47.9624 353 43.3083 353 34C353 24.6917 353 20.0376 351.726 16.2855C349.328 9.22007 343.78 3.67205 336.715 1.27368C332.962 0 328.308 0 319 0H34C24.6917 0 20.0376 0 16.2855 1.27368C9.22007 3.67205 3.67205 9.22007 1.27368 16.2855Z"
+                    fill="black"
+                  />
+                </Svg>
+              }
+            >
+              <AnimatedBlurView blurType="xlight" blurAmount={6} style={{ height }}>
+                <View
+                  style={{
+                    flexDirection: 'row',
+                    height: 68,
+                    flex: 1,
+                    padding: 16 + 12,
+                    gap: 12,
+                    alignItems: 'center',
+                    marginTop: 68 - height,
+                  }}
+                >
+                  <LinearGradient
+                    colors={['#268FFF1F', '#268FFF14']}
+                    angle={135}
+                    useAngle
+                    style={{
+                      height: 36,
+                      width: 36,
+                      borderRadius: 10,
+                      borderWidth: 1,
+                      borderColor: '#268FFF0D',
+                      backgroundColor: '#268FFF14',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                    }}
+                  >
+                    <Text weight="heavy" size="17pt" color={{ custom: blue }}>
+                      􀍱
+                    </Text>
+                  </LinearGradient>
+                  <View style={{ gap: 10 }}>
+                    <Text weight="heavy" size="15pt" color="labelSecondary">
+                      {i18n.t(t.customize_networks_banner.title)}
+                    </Text>
+                    <Text weight="semibold" size="13pt" color="labelQuaternary">
+                      {/* 
+                    is there a way to render a diferent component mid sentence?
+                    like i18n.t(t.customize_networks_banner.description, { Edit: <Text... /> })
+                  */}
+                      Tap the{' '}
+                      <Text weight="bold" size="13pt" color={{ custom: blue }}>
+                        Edit
+                      </Text>{' '}
+                      button below to set up
+                    </Text>
+                  </View>
+                  <Pressable style={{ marginLeft: 'auto', height: '100%' }} onPress={dismissCustomizeNetworksBanner}>
+                    <Text weight="heavy" size="13pt" color="labelQuaternary">
+                      􀆄
+                    </Text>
+                  </Pressable>
+                </View>
+              </AnimatedBlurView>
+            </MaskedView>
+          </Animated.View>
+        </DesignSystemProvider>
+      );
+    };
+
+const useNetworkOptionStyle = (isSelected: SharedValue<boolean>, color: string) => {
+  const { isDarkMode } = useColorMode();
+
+  const surfacePrimary = useBackgroundColor('surfacePrimary');
+  const networkSwitcherBackgroundColor = isDarkMode ? '#191A1C' : surfacePrimary;
+
+  const defaultStyle = {
+    backgroundColor: isDarkMode ? globalColors.white10 : globalColors.grey20,
+    borderColor: '#F5F8FF05',
+  };
+  const selectedStyle = {
+    backgroundColor: chroma.scale([networkSwitcherBackgroundColor, color])(0.16).hex(),
+    borderColor: chroma(color).alpha(0.16).hex(),
+  };
+
+  const scale = useSharedValue(1);
+  useAnimatedReaction(
+    () => isSelected.value,
+    current => {
+      if (current === true) {
+        scale.value = withSequence(withTiming(0.95, { duration: 50 }), withTiming(1, { duration: 80 }));
+      }
+    }
+  );
+
+  const animatedStyle = useAnimatedStyle(() => {
+    const colors = isSelected.value ? selectedStyle : defaultStyle;
+    return {
+      backgroundColor: colors.backgroundColor,
+      borderColor: colors.borderColor,
+      transform: [{ scale: scale.value }],
+    };
+  });
+
+  return {
+    animatedStyle,
+    selectedStyle,
+    defaultStyle,
+  };
+};
+
+function AllNetworksOption({
+  selected,
+  setSelected,
+}: {
+  selected: SharedValue<ChainId | undefined>;
+  setSelected: (chainId: ChainId | undefined) => void;
+}) {
+  const blue = useForegroundColor('blue');
+
+  const isSelected = useDerivedValue(() => selected.value === undefined);
+  const { animatedStyle, selectedStyle, defaultStyle } = useNetworkOptionStyle(isSelected, blue);
+
+  const overlappingBadge = useAnimatedStyle(() => {
+    return {
+      borderColor: isSelected.value ? selectedStyle.backgroundColor : defaultStyle.backgroundColor,
+      borderWidth: 1.67,
+      borderRadius: 16,
+      marginLeft: -9,
+      width: 16 + 1.67 * 2, // size + borders
+      height: 16 + 1.67 * 2,
+    };
+  });
+
+  const tapGesture = Gesture.Tap().onTouchesDown(() => {
+    'worklet';
+    setSelected(undefined);
+  });
+
+  return (
+    <GestureDetector gesture={tapGesture}>
+      <Animated.View
+        style={[
+          {
+            height: ITEM_HEIGHT,
+            paddingHorizontal: 12,
+            flexDirection: 'row',
+            alignItems: 'center',
+            borderRadius: 24,
+            borderWidth: 1.33,
+          },
+          animatedStyle,
+        ]}
+      >
+        <View style={{ flexDirection: 'row', alignItems: 'center', position: 'absolute', marginLeft: 16 }}>
+          <AnimatedChainImage chainId={ChainId.base} size={16} />
+          <AnimatedChainImage chainId={ChainId.mainnet} size={16} style={overlappingBadge} />
+          <AnimatedChainImage chainId={ChainId.optimism} size={16} style={overlappingBadge} />
+          <AnimatedChainImage chainId={ChainId.arbitrum} size={16} style={overlappingBadge} />
+        </View>
+        <Text color="label" size="17pt" weight="bold" style={{ textAlign: 'center', flex: 1 }}>
+          {i18n.t(t.all_networks)}
+        </Text>
+      </Animated.View>
+    </GestureDetector>
+  );
+}
+
+function AllNetworksSection({
+  editing,
+  setSelected,
+  selected,
+}: {
+  editing: SharedValue<boolean>;
+  setSelected: (chainId: ChainId | undefined) => void;
+  selected: SharedValue<ChainId | undefined>;
+}) {
+  const style = useAnimatedStyle(() => ({
+    opacity: editing.value ? withTiming(0, { duration: 50 }) : withDelay(250, withTiming(1, { duration: 250 })),
+    height: withTiming(
+      editing.value ? 0 : ITEM_HEIGHT + 14, // 14 is the gap to the separator
+      { duration: 250 }
+    ),
+    marginTop: editing.value ? 0 : 14,
+    pointerEvents: editing.value ? 'none' : 'auto',
+  }));
+  return (
+    <Animated.View style={[style, { gap: 14 }]}>
+      <AllNetworksOption selected={selected} setSelected={setSelected} />
+      <Separator color="separatorTertiary" direction="horizontal" thickness={1} />
+    </Animated.View>
+  );
+}
+
+function NetworkOption({ chainId, selected }: { chainId: ChainId; selected: SharedValue<ChainId | undefined> }) {
+  const chainName = useBackendNetworksStore.getState().getChainsName()[chainId];
+  const chainColor = getChainColorWorklet(chainId, true);
+  const isSelected = useDerivedValue(() => selected.value === chainId);
+  const { animatedStyle } = useNetworkOptionStyle(isSelected, chainColor);
+
+  return (
+    <Animated.View
+      layout={LinearTransition.springify().mass(0.4)}
+      style={[
+        { height: 48, width: ITEM_WIDTH },
+        { paddingHorizontal: 12, flexDirection: 'row', alignItems: 'center' },
+        { borderRadius: 24, borderWidth: 1.33 },
+        animatedStyle,
+      ]}
+    >
+      <ChainImage chainId={chainId} size={24} />
+      <Text color="label" size="17pt" weight="bold" style={{ textAlign: 'center', flex: 1 }}>
+        {chainName}
+      </Text>
+    </Animated.View>
+  );
+}
+
+const SHEET_OUTER_INSET = 8;
+const SHEET_INNER_PADDING = 16;
+const GAP = 12;
+const ITEM_WIDTH = (DEVICE_WIDTH - SHEET_INNER_PADDING * 2 - SHEET_OUTER_INSET * 2 - GAP) / 2;
+const ITEM_HEIGHT = 48;
+const SEPARATOR_HEIGHT = 68;
+const enum Section {
+  pinned,
+  unpinned,
+}
+
+function Draggable({
+  children,
+  dragging,
+  chainId,
+  networks,
+  sectionsOffsets,
+  isUnpinnedHidden,
+}: PropsWithChildren<{
+  chainId: ChainId;
+  dragging: SharedValue<DraggingState | null>;
+  networks: SharedValue<Record<Section, ChainId[]>>;
+  sectionsOffsets: SharedValue<Record<Section, { y: number }>>;
+  isUnpinnedHidden: SharedValue<boolean>;
+}>) {
+  const zIndex = useSharedValue(0);
+  useAnimatedReaction(
+    () => dragging.value?.chainId,
+    (current, prev) => {
+      if (current === prev) return;
+      if (current === chainId) zIndex.value = 2;
+      if (prev === chainId) zIndex.value = 1;
+    }
+  );
+
+  const draggableStyles = useAnimatedStyle(() => {
+    const section = networks.value[Section.pinned].includes(chainId) ? Section.pinned : Section.unpinned;
+    const itemIndex = networks.value[section].indexOf(chainId);
+    const slotPosition = positionFromIndex(itemIndex, sectionsOffsets.value[section]);
+
+    const opacity =
+      section === Section.unpinned && isUnpinnedHidden.value ? withTiming(0, { duration: 150 }) : withDelay(150, withTiming(1));
+
+    const isBeingDragged = dragging.value?.chainId === chainId;
+    const position = isBeingDragged ? dragging.value!.position : slotPosition;
+
+    return {
+      opacity,
+      zIndex: zIndex.value,
+      transform: [
+        { scale: withSpring(isBeingDragged ? 1.05 : 1, SPRING_CONFIGS.springConfig) },
+        { translateX: isBeingDragged ? position.x : withSpring(position.x, SPRING_CONFIGS.springConfig) },
+        { translateY: isBeingDragged ? position.y : withSpring(position.y, SPRING_CONFIGS.springConfig) },
+      ],
+    };
+  });
+
+  return <Animated.View style={[{ position: 'absolute' }, draggableStyles]}>{children}</Animated.View>;
+}
+
+const indexFromPosition = (x: number, y: number, offset: { y: number }) => {
+  'worklet';
+  const yoffsets = y > offset.y ? offset.y : 0;
+  const column = x > ITEM_WIDTH + GAP / 2 ? 1 : 0;
+  const row = Math.floor((y - yoffsets) / (ITEM_HEIGHT + GAP / 2));
+  const index = row * 2 + column;
+  return index < 0 ? 0 : index; // row can be negative if the dragged item is above the first row
+};
+
+const positionFromIndex = (index: number, offset: { y: number }) => {
+  'worklet';
+  const column = index % 2;
+  const row = Math.floor(index / 2);
+  const position = { x: column * (ITEM_WIDTH + GAP), y: row * (ITEM_HEIGHT + GAP) + offset.y };
+  return position;
+};
+
+type Point = { x: number; y: number };
+type DraggingState = {
+  chainId: ChainId;
+  position: Point;
+};
+
+function SectionSeparator({
+  y,
+  editing,
+  expanded,
+  networks,
+  tapExpand,
+  pressedExpand,
+}: {
+  y: SharedValue<number>;
+  editing: SharedValue<boolean>;
+  expanded: SharedValue<boolean>;
+  networks: SharedValue<Record<Section, ChainId[]>>;
+  tapExpand: TapGesture;
+  pressedExpand: SharedValue<boolean>;
+}) {
+  const separatorStyles = useAnimatedStyle(() => ({
+    transform: [{ translateY: y.value }, { scale: withTiming(pressedExpand.value ? 0.95 : 1) }],
+  }));
+
+  const text = useDerivedValue(() => {
+    if (editing.value) return translations.drag_to_rearrange;
+    return expanded.value ? translations.show_less : translations.show_more;
+  });
+
+  const unpinnedNetworksLength = useDerivedValue(() => networks.value[Section.unpinned].length.toString());
+  const showMoreAmountStyle = useAnimatedStyle(() => ({ opacity: expanded.value || editing.value ? 0 : 1 }));
+  const showMoreOrLessIcon = useDerivedValue(() => (expanded.value ? '􀆇' : '􀆈') as string);
+  const showMoreOrLessIconStyle = useAnimatedStyle(() => ({ opacity: editing.value ? 0 : 1 }));
+
+  const { isDarkMode } = useTheme();
+
+  return (
+    <GestureDetector gesture={tapExpand}>
+      <Animated.View
+        style={[
+          { position: 'absolute', width: '100%', height: SEPARATOR_HEIGHT, justifyContent: 'center', alignItems: 'center' },
+          { flexDirection: 'row', gap: 8 },
+          separatorStyles,
+        ]}
+      >
+        <Animated.View
+          style={[
+            {
+              backgroundColor: isDarkMode ? '#F5F8FF05' : '#1B1D1F0f',
+              height: 24,
+              width: 24,
+              borderRadius: 12,
+              alignItems: 'center',
+              justifyContent: 'center',
+            },
+            showMoreAmountStyle,
+          ]}
+        >
+          <AnimatedText color="labelQuaternary" weight="bold" size="15pt" align="center">
+            {unpinnedNetworksLength}
+          </AnimatedText>
+        </Animated.View>
+        <AnimatedText color="labelQuaternary" weight="bold" size="17pt">
+          {text}
+        </AnimatedText>
+        <Animated.View style={[{ width: 24, justifyContent: 'center' }, showMoreOrLessIconStyle]}>
+          <AnimatedText color="labelQuaternary" weight="heavy" size="13pt">
+            {showMoreOrLessIcon}
+          </AnimatedText>
+        </Animated.View>
+      </Animated.View>
+    </GestureDetector>
+  );
+}
+
+function NetworksGrid({
+  editing,
+  setSelected,
+  selected,
+}: {
+  editing: SharedValue<boolean>;
+  setSelected: (chainId: ChainId | undefined) => void;
+  selected: SharedValue<ChainId | undefined>;
+}) {
+  const initialPinned = networkSwitcherStore.getState().pinnedNetworks;
+  const sortedSupportedChainIds = useBackendNetworksStore.getState().getSortedSupportedChainIds();
+  const initialUnpinned = sortedSupportedChainIds.filter(chainId => !initialPinned.includes(chainId));
+  const networks = useSharedValue({ [Section.pinned]: initialPinned, [Section.unpinned]: initialUnpinned });
+
+  useEffect(() => {
+    // persists pinned networks when closing the sheet
+    // should be the only time this component is unmounted
+    return () => {
+      networkSwitcherStore.setState({ pinnedNetworks: networks.value[Section.pinned] });
+    };
+  }, [networks]);
+
+  const expanded = useSharedValue(false);
+  const isUnpinnedHidden = useDerivedValue(() => !expanded.value && !editing.value);
+
+  const dragging = useSharedValue<DraggingState | null>(null);
+
+  const pinnedHeight = useDerivedValue(() => Math.ceil(networks.value[Section.pinned].length / 2) * (ITEM_HEIGHT + GAP) - GAP);
+  const sectionsOffsets = useDerivedValue(() => ({
+    [Section.pinned]: { y: 0 },
+    [Section.unpinned]: { y: pinnedHeight.value + SEPARATOR_HEIGHT },
+  }));
+  const containerStyle = useAnimatedStyle(() => {
+    const unpinnedHeight = isUnpinnedHidden.value
+      ? 0
+      : Math.ceil(networks.value[Section.unpinned].length / 2) * (ITEM_HEIGHT + GAP) - GAP + 32;
+    const height = pinnedHeight.value + SEPARATOR_HEIGHT + unpinnedHeight;
+    return { height: withTiming(height) };
+  });
+
+  const dragNetwork = Gesture.Pan()
+    .maxPointers(1)
+    .onTouchesDown((e, s) => {
+      if (!editing.value) {
+        s.fail();
+        return;
+      }
+      const touch = e.allTouches[0];
+      const section = touch.y > sectionsOffsets.value[Section.unpinned].y ? Section.unpinned : Section.pinned;
+      const sectionOffset = sectionsOffsets.value[section];
+      const index = indexFromPosition(touch.x, touch.y, sectionOffset);
+      const chainId = networks.value[section][index];
+      if (!chainId) {
+        s.fail();
+        return;
+      }
+
+      const position = positionFromIndex(index, sectionOffset);
+      dragging.value = { chainId, position };
+    })
+    .onChange(e => {
+      if (!dragging.value) return;
+      const chainId = dragging.value.chainId;
+      if (!chainId) return;
+
+      const section = e.y > sectionsOffsets.value[Section.unpinned].y ? Section.unpinned : Section.pinned;
+      const sectionArray = networks.value[section];
+
+      const currentIndex = sectionArray.indexOf(chainId);
+      const newIndex = Math.min(indexFromPosition(e.x, e.y, sectionsOffsets.value[section]), sectionArray.length - 1);
+
+      networks.modify(networks => {
+        if (currentIndex === -1) {
+          // Pin/Unpin
+          if (section === Section.unpinned) networks[Section.pinned].splice(currentIndex, 1);
+          else networks[Section.pinned].splice(newIndex, 0, chainId);
+          networks[Section.unpinned] = sortedSupportedChainIds.filter(chainId => !networks[Section.pinned].includes(chainId));
+        } else if (section === Section.pinned && newIndex !== currentIndex) {
+          // Reorder
+          networks[Section.pinned].splice(currentIndex, 1);
+          networks[Section.pinned].splice(newIndex, 0, chainId);
+        }
+        return networks;
+      });
+      dragging.modify(dragging => {
+        if (!dragging) return dragging;
+        dragging.position.x += e.changeX;
+        dragging.position.y += e.changeY;
+        return dragging;
+      });
+    })
+    .onFinalize(() => {
+      dragging.value = null;
+    });
+
+  const pressedExpand = useSharedValue(false);
+
+  // TODO: Need to prevent this from firing the tapNetwork as well
+  const tapExpand = Gesture.Tap()
+    .onBegin(e => {
+      if (editing.value) {
+        e.state = State.FAILED;
+      }
+      pressedExpand.value = true;
+    })
+    .onEnd(() => {
+      pressedExpand.value = false;
+      expanded.value = !expanded.value;
+    });
+
+  const tapNetwork = Gesture.Tap()
+    .onTouchesDown((e, s) => {
+      if (editing.value) {
+        s.fail();
+      }
+
+      const touches = e.allTouches[0];
+      const section = touches.y > sectionsOffsets.value[Section.unpinned].y ? Section.unpinned : Section.pinned;
+      const index = indexFromPosition(touches.x, touches.y, sectionsOffsets.value[section]);
+      const chainId = networks.value[section][index];
+      if (!chainId) {
+        s.fail();
+      }
+    })
+    .onEnd(e => {
+      const section = e.y > sectionsOffsets.value[Section.unpinned].y ? Section.unpinned : Section.pinned;
+      const index = indexFromPosition(e.x, e.y, sectionsOffsets.value[section]);
+      const chainId = networks.value[section][index];
+      if (!chainId) return;
+
+      setSelected(chainId);
+    });
+
+  const gridGesture = Gesture.Exclusive(dragNetwork, tapNetwork);
+
+  return (
+    <GestureDetector gesture={gridGesture}>
+      <Animated.View style={[containerStyle, { marginTop: 14 }]}>
+        {initialPinned.map(chainId => (
+          <Draggable
+            key={chainId}
+            networks={networks}
+            dragging={dragging}
+            chainId={chainId}
+            sectionsOffsets={sectionsOffsets}
+            isUnpinnedHidden={isUnpinnedHidden}
+          >
+            <NetworkOption key={chainId} chainId={chainId} selected={selected} />
+          </Draggable>
+        ))}
+
+        <SectionSeparator
+          y={pinnedHeight}
+          expanded={expanded}
+          editing={editing}
+          networks={networks}
+          tapExpand={tapExpand}
+          pressedExpand={pressedExpand}
+        />
+
+        {/* {initialUnpinned.length === 0 && (
+          <View style={{ borderRadius: 20, flex: 1, height: ITEM_HEIGHT }}>
+            <Text color="labelQuaternary" size="15pt" weight="semibold" align="center">
+              Drag here to unpin networks
+            </Text>
+          </View>
+        )} */}
+        {initialUnpinned.map(chainId => (
+          <Draggable
+            key={chainId}
+            networks={networks}
+            dragging={dragging}
+            chainId={chainId}
+            sectionsOffsets={sectionsOffsets}
+            isUnpinnedHidden={isUnpinnedHidden}
+          >
+            <NetworkOption key={chainId} chainId={chainId} selected={selected} />
+          </Draggable>
+        ))}
+      </Animated.View>
+    </GestureDetector>
+  );
+}
+
+function SheetBackdrop({ onPress }: { onPress: VoidFunction }) {
+  const tapGesture = Gesture.Tap().onEnd(onPress);
+  return (
+    <GestureDetector gesture={tapGesture}>
+      <Animated.View
+        entering={FadeIn.delay(100)}
+        exiting={FadeOut}
+        style={{ flex: 1, position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, backgroundColor: '#000000B2' }}
+      />
+    </GestureDetector>
+  );
+}
+
+function Sheet({ children, header, onClose }: PropsWithChildren<{ header: ReactElement; onClose: VoidFunction }>) {
+  const { isDarkMode } = useTheme();
+  const surfacePrimary = useBackgroundColor('surfacePrimary');
+  const backgroundColor = isDarkMode ? '#191A1C' : surfacePrimary;
+  const separatorSecondary = useForegroundColor('separatorSecondary');
+
+  const translationY = useSharedValue<number>(0);
+
+  const swipeToClose = Gesture.Pan()
+    .onChange(event => {
+      if (event.translationY < 0) return;
+      translationY.value = event.translationY;
+    })
+    .onFinalize(() => {
+      if (translationY.value > 120) runOnJS(onClose)();
+      else translationY.value = withSpring(0);
+    });
+
+  const sheetStyle = useAnimatedStyle(() => ({ transform: [{ translateY: translationY.value }] }));
+
+  return (
+    <AbsolutePortal>
+      <View style={{ flex: 1 }}>
+        <SheetBackdrop onPress={onClose} />
+
+        <Animated.View
+          layout={LinearTransition.springify().mass(0.5)}
+          entering={SlideInDown.duration(200).springify().mass(0.4)}
+          exiting={SlideOutDown.duration(200)}
+          style={[
+            { position: 'absolute', bottom: 32, left: 8, right: 8 },
+            { paddingHorizontal: 16 },
+            { backgroundColor, borderColor: separatorSecondary },
+            { borderRadius: 42, borderWidth: 1.33 },
+            sheetStyle,
+          ]}
+        >
+          <GestureDetector gesture={swipeToClose}>{header}</GestureDetector>
+          {children}
+        </Animated.View>
+      </View>
+    </AbsolutePortal>
+  );
+}
+
+export function NetworkSelector({
+  onClose,
+  selected,
+  setSelected,
+}: {
+  onClose: VoidFunction;
+  selected: SharedValue<ChainId | undefined>;
+  setSelected: (chainId: ChainId | undefined) => void;
+}) {
+  const editing = useSharedValue(false);
+
+  return (
+    <Sheet header={<Header editing={editing} />} onClose={onClose}>
+      <CustomizeNetworksBanner editing={editing} />
+      <AllNetworksSection editing={editing} setSelected={setSelected} selected={selected} />
+      <NetworksGrid editing={editing} setSelected={setSelected} selected={selected} />
+    </Sheet>
+  );
+}
diff --git a/src/components/coin-icon/ChainImage.tsx b/src/components/coin-icon/ChainImage.tsx
index 1aa5c479b8e..8e6da088f55 100644
--- a/src/components/coin-icon/ChainImage.tsx
+++ b/src/components/coin-icon/ChainImage.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { forwardRef, useMemo } from 'react';
 import { ChainId } from '@/state/backendNetworks/types';
 
 import ApechainBadge from '@/assets/badges/apechain.png';
@@ -20,9 +20,21 @@ import PolygonBadge from '@/assets/badges/polygon.png';
 // import ZksyncBadge from '@/assets/badges/zksync.png';
 import ZoraBadge from '@/assets/badges/zora.png';
 
-import FastImage, { Source } from 'react-native-fast-image';
+import FastImage, { FastImageProps, Source } from 'react-native-fast-image';
+import Animated from 'react-native-reanimated';
 
-export function ChainImage({ chainId, size = 20 }: { chainId: ChainId | null | undefined; size?: number }) {
+export const ChainImage = forwardRef(function ChainImage(
+  {
+    chainId,
+    size = 20,
+    style,
+  }: {
+    chainId: ChainId | null | undefined;
+    size?: number;
+    style?: FastImageProps['style'];
+  },
+  ref
+) {
   const source = useMemo(() => {
     switch (chainId) {
       case ChainId.apechain:
@@ -69,6 +81,14 @@ export function ChainImage({ chainId, size = 20 }: { chainId: ChainId | null | u
   if (!chainId) return null;
 
   return (
-    <FastImage key={`${chainId}-badge-${size}`} source={source as Source} style={{ borderRadius: size / 2, height: size, width: size }} />
+    <FastImage
+      // @ts-expect-error couldn't figure out how to type this ref to make ts happy
+      ref={ref}
+      key={`${chainId}-badge-${size}`}
+      source={source as Source}
+      style={[{ borderRadius: size / 2, height: size, width: size }, style]}
+    />
   );
-}
+});
+
+export const AnimatedChainImage = Animated.createAnimatedComponent(ChainImage);
diff --git a/src/config/experimental.ts b/src/config/experimental.ts
index b68e23260ff..cef7e04d7d7 100644
--- a/src/config/experimental.ts
+++ b/src/config/experimental.ts
@@ -29,6 +29,7 @@ export const DEGEN_MODE = 'Degen Mode';
 export const FEATURED_RESULTS = 'Featured Results';
 export const CLAIMABLES = 'Claimables';
 export const NFTS_ENABLED = 'Nfts Enabled';
+export const TRENDING_TOKENS = 'Trending Tokens';
 
 /**
  * A developer setting that pushes log lines to an array in-memory so that
@@ -66,6 +67,7 @@ export const defaultConfig: Record<string, ExperimentalValue> = {
   [FEATURED_RESULTS]: { settings: true, value: false },
   [CLAIMABLES]: { settings: true, value: false },
   [NFTS_ENABLED]: { settings: true, value: !!IS_TEST },
+  [TRENDING_TOKENS]: { settings: true, value: false },
 };
 
 export const defaultConfigValues: Record<string, boolean> = Object.fromEntries(
diff --git a/src/helpers/strings.ts b/src/helpers/strings.ts
index 4e7fd76ab91..a4151c0dc0b 100644
--- a/src/helpers/strings.ts
+++ b/src/helpers/strings.ts
@@ -10,3 +10,59 @@ export const containsEmoji = memoFn(str => {
   // @ts-expect-error ts-migrate(2571) FIXME: Object is of type 'unknown'.
   return !!str.match(ranges.join('|'));
 });
+
+/*
+ * Return the given number as a formatted string.  The default format is a plain
+ * integer with thousands-separator commas.  The optional parameters facilitate
+ * other formats:
+ *   - decimals = the number of decimals places to round to and show
+ *   - valueIfNaN = the value to show for non-numeric input
+ *   - style
+ *     - '%': multiplies by 100 and appends a percent symbol
+ *     - '$': prepends a dollar sign
+ *   - useOrderSuffix = whether to use suffixes like k for 1,000, etc.
+ *   - orderSuffixes = the list of suffixes to use
+ *   - minOrder and maxOrder allow the order to be constrained.  Examples:
+ *     - minOrder = 1 means the k suffix should be used for numbers < 1,000
+ *     - maxOrder = 1 means the k suffix should be used for numbers >= 1,000,000
+ */
+export function formatNumber(
+  number: string | number,
+  {
+    decimals = 0,
+    valueIfNaN = '',
+    style = '',
+    useOrderSuffix = false,
+    orderSuffixes = ['', 'K', 'M', 'B', 'T'],
+    minOrder = 0,
+    maxOrder = Infinity,
+  } = {}
+) {
+  let x = parseFloat(`${number}`);
+
+  if (isNaN(x)) return valueIfNaN;
+
+  if (style === '%') x *= 100.0;
+
+  let order;
+  if (!isFinite(x) || !useOrderSuffix) order = 0;
+  else if (minOrder === maxOrder) order = minOrder;
+  else {
+    const unboundedOrder = Math.floor(Math.log10(Math.abs(x)) / 3);
+    order = Math.max(0, minOrder, Math.min(unboundedOrder, maxOrder, orderSuffixes.length - 1));
+  }
+
+  const orderSuffix = orderSuffixes[order];
+  if (order !== 0) x /= Math.pow(10, order * 3);
+
+  return (
+    (style === '$' ? '$' : '') +
+    x.toLocaleString('en-US', {
+      style: 'decimal',
+      minimumFractionDigits: decimals,
+      maximumFractionDigits: decimals,
+    }) +
+    orderSuffix +
+    (style === '%' ? '%' : '')
+  );
+}
diff --git a/src/hooks/reanimated/useSyncSharedValue.ts b/src/hooks/reanimated/useSyncSharedValue.ts
index f8c19c71a0c..c48f83a3643 100644
--- a/src/hooks/reanimated/useSyncSharedValue.ts
+++ b/src/hooks/reanimated/useSyncSharedValue.ts
@@ -9,14 +9,14 @@ interface BaseSyncParams<T> {
   /** A boolean or shared value boolean that controls whether synchronization is paused. */
   pauseSync?: DerivedValue<boolean> | SharedValue<boolean> | boolean;
   /** The JS state to be synchronized. */
-  state: T | undefined;
+  state: T;
 }
 
 interface SharedToStateParams<T> extends BaseSyncParams<T> {
   /** The setter function for the JS state (only applicable when `syncDirection` is `'sharedValueToState'`). */
   setState: (value: T) => void;
   /** The shared value to be synchronized. */
-  sharedValue: DerivedValue<T> | DerivedValue<T | undefined> | SharedValue<T> | SharedValue<T | undefined>;
+  sharedValue: DerivedValue<T> | SharedValue<T>;
   /** The direction of synchronization. */
   syncDirection: 'sharedValueToState';
 }
@@ -24,7 +24,7 @@ interface SharedToStateParams<T> extends BaseSyncParams<T> {
 interface StateToSharedParams<T> extends BaseSyncParams<T> {
   setState?: never;
   /** The shared value to be synchronized. */
-  sharedValue: SharedValue<T> | SharedValue<T | undefined>;
+  sharedValue: SharedValue<T>;
   /** The direction of synchronization. */
   syncDirection: 'stateToSharedValue';
 }
@@ -73,7 +73,7 @@ export function useSyncSharedValue<T>({ compareDepth = 'deep', pauseSync, setSta
     },
     shouldSync => {
       if (shouldSync) {
-        if (syncDirection === 'sharedValueToState' && sharedValue.value !== undefined) {
+        if (syncDirection === 'sharedValueToState') {
           runOnJS(setState)(sharedValue.value);
         } else if (syncDirection === 'stateToSharedValue') {
           sharedValue.value = state;
diff --git a/src/languages/en_US.json b/src/languages/en_US.json
index 725d9b674d1..bcc76782c2b 100644
--- a/src/languages/en_US.json
+++ b/src/languages/en_US.json
@@ -3018,6 +3018,45 @@
         "new_tab": "New Tab"
       }
     },
+    "trending_tokens": {
+      "all": "All",
+      "no_results": {
+        "title": "No results",
+        "body": "Try browsing a larger timeframe or a different network or category."
+      },
+      "filters": {
+        "categories": {
+          "trending": "Trending",
+          "new": "New",
+          "farcaster": "Farcaster"
+        },
+        "sort": {
+          "sort": "Sort",
+          "volume": "Volume",
+          "market_cap": "Market Cap",
+          "top_gainers": "Top Gainers",
+          "top_losers": "Top Losers"
+        },
+        "time": {
+          "day": "24h",
+          "week": "1 Week",
+          "month": "1 Month"
+        }
+      }
+    },
+    "network_switcher": {
+      "customize_networks_banner": {
+        "title": "Customize Networks",
+        "description": "Tap the edit button below to set up"
+      },
+      "edit": "Edit",
+      "networks": "Networks",
+      "drag_to_rearrange": "Drag to rearrange",
+      "show_less": "Show less",
+      "show_more": "More Networks",
+      "all_networks": "All Networks"
+    },
+    "done": "Done",
     "copy": "Copy",
     "paste": "Paste"
   }
diff --git a/src/model/remoteConfig.ts b/src/model/remoteConfig.ts
index 40382af707b..1b131c68a7a 100644
--- a/src/model/remoteConfig.ts
+++ b/src/model/remoteConfig.ts
@@ -52,6 +52,7 @@ export interface RainbowConfig extends Record<string, string | boolean | number>
   dapp_browser: boolean;
   idfa_check_enabled: boolean;
   rewards_enabled: boolean;
+  trending_tokens_enabled: boolean;
 
   degen_mode: boolean;
   featured_results: boolean;
@@ -142,6 +143,7 @@ export const DEFAULT_CONFIG: RainbowConfig = {
   dapp_browser: true,
   idfa_check_enabled: true,
   rewards_enabled: true,
+  trending_tokens_enabled: false,
 
   degen_mode: true,
   featured_results: true,
@@ -199,6 +201,7 @@ export async function fetchRemoteConfig(): Promise<RainbowConfig> {
         key === 'dapp_browser' ||
         key === 'idfa_check_enabled' ||
         key === 'rewards_enabled' ||
+        key === 'trending_tokens_enabled' ||
         key === 'degen_mode' ||
         key === 'featured_results' ||
         key === 'claimables' ||
diff --git a/src/navigation/SwipeNavigator.tsx b/src/navigation/SwipeNavigator.tsx
index 33f84504828..781ca8932d4 100644
--- a/src/navigation/SwipeNavigator.tsx
+++ b/src/navigation/SwipeNavigator.tsx
@@ -15,7 +15,7 @@ import RecyclerListViewScrollToTopProvider, {
   useRecyclerListViewScrollToTopContext,
 } from '@/navigation/RecyclerListViewScrollToTopContext';
 import DappBrowserScreen from '@/screens/dapp-browser/DappBrowserScreen';
-import { discoverOpenSearchFnRef } from '@/screens/discover/components/DiscoverSearchContainer';
+import { discoverOpenSearchFnRef } from '@/components/Discover/DiscoverSearchContainer';
 import { PointsScreen } from '@/screens/points/PointsScreen';
 import WalletScreen from '@/screens/WalletScreen';
 import { useTheme } from '@/theme';
@@ -39,7 +39,7 @@ import { TIMING_CONFIGS } from '@/components/animations/animationConfigs';
 import { useBrowserStore } from '@/state/browser/browserStore';
 import { opacityWorklet } from '@/__swaps__/utils/swaps';
 import ProfileScreen from '../screens/ProfileScreen';
-import DiscoverScreen, { discoverScrollToTopFnRef } from '../screens/discover/DiscoverScreen';
+import DiscoverScreen, { discoverScrollToTopFnRef } from '@/screens/DiscoverScreen';
 import { ScrollPositionContext } from './ScrollPositionContext';
 import SectionListScrollToTopProvider, { useSectionListScrollToTopContext } from './SectionListScrollToTopContext';
 import Routes from './routesNames';
diff --git a/src/performance/tracking/index.ts b/src/performance/tracking/index.ts
index 425faba867e..81b8fb5e73a 100644
--- a/src/performance/tracking/index.ts
+++ b/src/performance/tracking/index.ts
@@ -18,7 +18,7 @@ function logDurationIfAppropriate(metric: PerformanceMetricsType, durationInMs:
   }
 }
 
-const currentlyTrackedMetrics = new Map<PerformanceMetricsType, PerformanceMetricData>();
+export const currentlyTrackedMetrics = new Map<PerformanceMetricsType, PerformanceMetricData>();
 
 interface AdditionalParams extends Record<string, any> {
   tag?: PerformanceTagsType;
diff --git a/src/performance/tracking/types/PerformanceMetrics.ts b/src/performance/tracking/types/PerformanceMetrics.ts
index 3baf050eb54..3d272e1e71b 100644
--- a/src/performance/tracking/types/PerformanceMetrics.ts
+++ b/src/performance/tracking/types/PerformanceMetrics.ts
@@ -11,6 +11,7 @@ export const PerformanceMetrics = {
   initializeWalletconnect: 'Performance WalletConnect Initialize Time',
 
   quoteFetching: 'Performance Quote Fetching Time',
+  timeSpentOnDiscoverScreen: 'Time spent on the Discover screen',
 } as const;
 
 export type PerformanceMetricsType = (typeof PerformanceMetrics)[keyof typeof PerformanceMetrics];
diff --git a/src/resources/trendingTokens/trendingTokens.ts b/src/resources/trendingTokens/trendingTokens.ts
index 169a24ab6f4..06e6f623318 100644
--- a/src/resources/trendingTokens/trendingTokens.ts
+++ b/src/resources/trendingTokens/trendingTokens.ts
@@ -22,5 +22,6 @@ export function useTrendingTokens<T = TrendingTokens>(
     ...config,
     staleTime: 60_000, // 1 minute
     cacheTime: 60_000 * 30, // 30 minutes
+    keepPreviousData: true,
   });
 }
diff --git a/src/screens/discover/DiscoverScreen.tsx b/src/screens/DiscoverScreen.tsx
similarity index 95%
rename from src/screens/discover/DiscoverScreen.tsx
rename to src/screens/DiscoverScreen.tsx
index 601066d6260..2a0d43df6a2 100644
--- a/src/screens/discover/DiscoverScreen.tsx
+++ b/src/screens/DiscoverScreen.tsx
@@ -4,7 +4,7 @@ import { useIsFocused } from '@react-navigation/native';
 import { Box } from '@/design-system';
 import { Page } from '@/components/layout';
 import { Navbar } from '@/components/navbar/Navbar';
-import DiscoverScreenContent from './components/DiscoverScreenContent';
+import DiscoverScreenContent from '@/components/Discover/DiscoverScreenContent';
 import { ButtonPressAnimation } from '@/components/animations';
 import { ContactAvatar } from '@/components/contacts';
 import ImageAvatar from '@/components/contacts/ImageAvatar';
@@ -14,7 +14,7 @@ import { useNavigation } from '@/navigation';
 import { safeAreaInsetValues } from '@/utils';
 import * as i18n from '@/languages';
 import Animated, { useAnimatedScrollHandler, useSharedValue } from 'react-native-reanimated';
-import DiscoverScreenProvider, { useDiscoverScreenContext } from './DiscoverScreenContext';
+import DiscoverScreenProvider, { useDiscoverScreenContext } from '@/components/Discover/DiscoverScreenContext';
 
 export let discoverScrollToTopFnRef: () => number | null = () => null;
 
@@ -30,18 +30,18 @@ const Content = () => {
     navigate(Routes.CHANGE_WALLET_SHEET);
   }, [navigate]);
 
-  React.useEffect(() => {
-    if (isSearching && !isFocused) {
-      Keyboard.dismiss();
-    }
-  }, [isFocused, isSearching]);
-
   const scrollHandler = useAnimatedScrollHandler({
     onScroll: event => {
       scrollY.value = event.contentOffset.y;
     },
   });
 
+  useEffect(() => {
+    if (isSearching && !isFocused) {
+      Keyboard.dismiss();
+    }
+  }, [isFocused, isSearching]);
+
   useEffect(() => {
     discoverScrollToTopFnRef = scrollToTop;
   }, [scrollToTop]);
diff --git a/src/state/backendNetworks/backendNetworks.ts b/src/state/backendNetworks/backendNetworks.ts
index 9e1882f2601..60736773864 100644
--- a/src/state/backendNetworks/backendNetworks.ts
+++ b/src/state/backendNetworks/backendNetworks.ts
@@ -19,6 +19,7 @@ export interface BackendNetworksState {
 
   getBackendChains: () => Chain[];
   getSupportedChains: () => Chain[];
+  getSortedSupportedChainIds: () => number[];
 
   getDefaultChains: () => Record<ChainId, Chain>;
   getSupportedChainIds: () => ChainId[];
@@ -75,6 +76,11 @@ export const useBackendNetworksStore = createRainbowStore<BackendNetworksState>(
     return IS_TEST ? [...backendChains, chainHardhat, chainHardhatOptimism] : backendChains;
   },
 
+  getSortedSupportedChainIds: () => {
+    const supportedChains = get().getSupportedChains();
+    return supportedChains.sort((a, b) => a.name.localeCompare(b.name)).map(c => c.id);
+  },
+
   getDefaultChains: () => {
     const supportedChains = get().getSupportedChains();
     return supportedChains.reduce(
diff --git a/src/state/internal/createRainbowStore.ts b/src/state/internal/createRainbowStore.ts
index 9b7d9a39dd7..e0c14b79ead 100644
--- a/src/state/internal/createRainbowStore.ts
+++ b/src/state/internal/createRainbowStore.ts
@@ -43,6 +43,12 @@ interface RainbowPersistConfig<S> {
    * This function will be called when persisted state versions mismatch with the one specified here.
    */
   migrate?: (persistedState: unknown, version: number) => S | Promise<S>;
+  /**
+   * A function returning another (optional) function.
+   * The main function will be called before the state rehydration.
+   * The returned function will be called after the state rehydration or when an error occurred.
+   */
+  onRehydrateStorage?: PersistOptions<S, Partial<S>>['onRehydrateStorage'];
 }
 
 /**
@@ -157,6 +163,7 @@ export function createRainbowStore<S = unknown>(
         storage: persistStorage,
         version,
         migrate: persistConfig.migrate,
+        onRehydrateStorage: persistConfig.onRehydrateStorage,
       })
     )
   );
diff --git a/src/state/networkSwitcher/networkSwitcher.ts b/src/state/networkSwitcher/networkSwitcher.ts
new file mode 100644
index 00000000000..dae6637446a
--- /dev/null
+++ b/src/state/networkSwitcher/networkSwitcher.ts
@@ -0,0 +1,48 @@
+import { ChainId } from '@/state/backendNetworks/types';
+import { createRainbowStore } from '../internal/createRainbowStore';
+import { analyticsV2 } from '@/analytics';
+import { nonceStore } from '@/state/nonces';
+
+function getMostUsedChains() {
+  const noncesByAddress = nonceStore.getState().nonces;
+  const summedNoncesByChainId: Record<string, number> = {};
+  for (const addressNonces of Object.values(noncesByAddress)) {
+    for (const [chainId, { currentNonce }] of Object.entries(addressNonces)) {
+      summedNoncesByChainId[chainId] ??= 0;
+      summedNoncesByChainId[chainId] += currentNonce || 0;
+    }
+  }
+
+  return Object.entries(summedNoncesByChainId)
+    .sort((a, b) => b[1] - a[1])
+    .map(([chainId]) => parseInt(chainId));
+}
+
+export const networkSwitcherStore = createRainbowStore<{
+  pinnedNetworks: ChainId[];
+}>(() => ({ pinnedNetworks: getMostUsedChains().slice(0, 5) }), {
+  storageKey: 'network-switcher',
+  version: 0,
+  onRehydrateStorage(state) {
+    // if we are missing pinned networks, use the user most used chains
+    if (state.pinnedNetworks.length === 0) {
+      const mostUsedNetworks = getMostUsedChains();
+      state.pinnedNetworks = mostUsedNetworks.slice(0, 5);
+      analyticsV2.identify({ mostUsedNetworks: mostUsedNetworks.filter(Boolean) });
+    }
+  },
+});
+
+export const customizeNetworksBannerStore = createRainbowStore<{
+  dismissedAt: number; // timestamp
+}>(() => ({ dismissedAt: 0 }), {
+  storageKey: 'CustomizeNetworksBanner',
+  version: 0,
+});
+
+const twoWeeks = 1000 * 60 * 60 * 24 * 7 * 2;
+export const shouldShowCustomizeNetworksBanner = (dismissedAt: number) => Date.now() - dismissedAt > twoWeeks;
+export const dismissCustomizeNetworksBanner = () => {
+  customizeNetworksBannerStore.setState({ dismissedAt: Date.now() });
+};
+export const showCustomizeNetworksBanner = shouldShowCustomizeNetworksBanner(customizeNetworksBannerStore.getState().dismissedAt);
diff --git a/src/state/swaps/swapsStore.ts b/src/state/swaps/swapsStore.ts
index 49cc99d0268..7d4d0d99f4b 100644
--- a/src/state/swaps/swapsStore.ts
+++ b/src/state/swaps/swapsStore.ts
@@ -1,5 +1,5 @@
 import { INITIAL_SLIDER_POSITION } from '@/__swaps__/screens/Swap/constants';
-import { ExtendedAnimatedAssetWithColors, ParsedSearchAsset } from '@/__swaps__/types/assets';
+import { ExtendedAnimatedAssetWithColors, ParsedSearchAsset, UniqueId } from '@/__swaps__/types/assets';
 import { ChainId } from '@/state/backendNetworks/types';
 import { RecentSwap } from '@/__swaps__/types/swap';
 import { getDefaultSlippage } from '@/__swaps__/utils/swaps';
@@ -42,6 +42,8 @@ export interface SwapsState {
   // degen mode preferences
   preferredNetwork: ChainId | undefined;
   setPreferredNetwork: (preferredNetwork: ChainId | undefined) => void;
+
+  lastNavigatedTrendingToken: UniqueId | undefined;
 }
 
 type StateWithTransforms = Omit<Partial<SwapsState>, 'latestSwapAt' | 'recentSwaps'> & {
@@ -156,6 +158,8 @@ export const swapsStore = createRainbowStore<SwapsState>(
         latestSwapAt: new Map(latestSwapAt),
       });
     },
+
+    lastNavigatedTrendingToken: undefined,
   }),
   {
     storageKey: 'swapsStore',
diff --git a/src/state/trendingTokens/trendingTokens.ts b/src/state/trendingTokens/trendingTokens.ts
new file mode 100644
index 00000000000..fb15fadd862
--- /dev/null
+++ b/src/state/trendingTokens/trendingTokens.ts
@@ -0,0 +1,45 @@
+import { ChainId } from '@/state/backendNetworks/types';
+import { createRainbowStore } from '../internal/createRainbowStore';
+import { analyticsV2 } from '@/analytics';
+
+export const categories = ['trending', 'new', 'farcaster'] as const;
+export const sortFilters = ['volume', 'market_cap', 'top_gainers', 'top_losers'] as const;
+export const timeFilters = ['day', 'week', 'month'] as const;
+
+type TrendingTokensState = {
+  category: 'trending' | 'new' | 'farcaster';
+  chainId: undefined | ChainId;
+  timeframe: (typeof timeFilters)[number];
+  sort: (typeof sortFilters)[number] | undefined;
+
+  setCategory: (category: TrendingTokensState['category']) => void;
+  setChainId: (chainId: TrendingTokensState['chainId']) => void;
+  setTimeframe: (timeframe: TrendingTokensState['timeframe']) => void;
+  setSort: (sort: TrendingTokensState['sort']) => void;
+};
+
+export const useTrendingTokensStore = createRainbowStore<TrendingTokensState>(
+  set => ({
+    category: 'trending',
+    chainId: undefined,
+    timeframe: 'day',
+    sort: 'volume',
+    setCategory: category => set({ category }),
+    setChainId: chainId => {
+      analyticsV2.track(analyticsV2.event.changeNetworkFilter, { chainId });
+      set({ chainId });
+    },
+    setTimeframe: timeframe => {
+      analyticsV2.track(analyticsV2.event.changeTimeframeFilter, { timeframe });
+      set({ timeframe });
+    },
+    setSort: sort => {
+      analyticsV2.track(analyticsV2.event.changeSortFilter, { sort });
+      set({ sort });
+    },
+  }),
+  {
+    storageKey: 'trending-tokens',
+    version: 0,
+  }
+);