diff --git a/apps/frontend-v3/app/(app)/pools/[chain]/[variant]/[id]/stake/page.tsx b/apps/frontend-v3/app/(app)/pools/[chain]/[variant]/[id]/stake/page.tsx
index 29cc7053..cbb41e24 100644
--- a/apps/frontend-v3/app/(app)/pools/[chain]/[variant]/[id]/stake/page.tsx
+++ b/apps/frontend-v3/app/(app)/pools/[chain]/[variant]/[id]/stake/page.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 
 import { PoolActionsLayout } from '@repo/lib/modules/pool/actions/PoolActionsLayout'
diff --git a/apps/frontend-v3/app/(app)/pools/[chain]/[variant]/[id]/swap/[[...txHash]]/page.tsx b/apps/frontend-v3/app/(app)/pools/[chain]/[variant]/[id]/swap/[[...txHash]]/page.tsx
new file mode 100644
index 00000000..40530854
--- /dev/null
+++ b/apps/frontend-v3/app/(app)/pools/[chain]/[variant]/[id]/swap/[[...txHash]]/page.tsx
@@ -0,0 +1,44 @@
+'use client'
+
+import { PoolActionsLayout } from '@repo/lib/modules/pool/actions/PoolActionsLayout'
+import { getPoolTokens } from '@repo/lib/modules/pool/pool.helpers'
+import { usePoolRedirect } from '@repo/lib/modules/pool/pool.hooks'
+import { chainToSlugMap } from '@repo/lib/modules/pool/pool.utils'
+import { usePool } from '@repo/lib/modules/pool/PoolProvider'
+import { SwapForm } from '@repo/lib/modules/swap/SwapForm'
+import SwapLayout from '@repo/lib/modules/swap/SwapLayout'
+import { PathParams } from '@repo/lib/modules/swap/SwapProvider'
+import { useTokens } from '@repo/lib/modules/tokens/TokensProvider'
+import { Hash } from 'viem'
+
+type Props = {
+  params: { txHash?: string[] }
+}
+// Page for swapping from a pool page
+export default function PoolSwapPage({ params: { txHash } }: Props) {
+  const { getToken } = useTokens()
+  const { pool, isLoading } = usePool()
+  const { redirectToPoolPage } = usePoolRedirect(pool)
+
+  const poolTokens = getPoolTokens(pool, getToken)
+
+  const maybeTxHash = (txHash?.[0] as Hash) || undefined
+
+  const pathParams: PathParams = {
+    chain: chainToSlugMap[pool.chain],
+    tokenIn: poolTokens[0].address,
+    tokenOut: poolTokens[1].address,
+    poolTokens,
+    urlTxHash: maybeTxHash,
+  }
+
+  return (
+    <PoolActionsLayout>
+      {isLoading ? null : (
+        <SwapLayout pathParams={pathParams}>
+          <SwapForm redirectToPoolPage={redirectToPoolPage} />
+        </SwapLayout>
+      )}
+    </PoolActionsLayout>
+  )
+}
diff --git a/apps/frontend-v3/app/(app)/swap/[[...slug]]/layout.tsx b/apps/frontend-v3/app/(app)/swap/[[...slug]]/layout.tsx
index 7f4cf9ff..fe321954 100644
--- a/apps/frontend-v3/app/(app)/swap/[[...slug]]/layout.tsx
+++ b/apps/frontend-v3/app/(app)/swap/[[...slug]]/layout.tsx
@@ -1,44 +1,20 @@
 'use client'
 
-import { ChainSlug, slugToChainMap } from '@repo/lib/modules/pool/pool.utils'
-import { SwapProvider } from '@repo/lib/modules/swap/SwapProvider'
-import { TokenBalancesProvider } from '@repo/lib/modules/tokens/TokenBalancesProvider'
-import { TokenInputsValidationProvider } from '@repo/lib/modules/tokens/TokenInputsValidationProvider'
-import { useTokens } from '@repo/lib/modules/tokens/TokensProvider'
-import { TransactionStateProvider } from '@repo/lib/modules/transactions/transaction-steps/TransactionStateProvider'
-import { GqlChain } from '@repo/lib/shared/services/api/generated/graphql'
 import { PropsWithChildren } from 'react'
-import { PriceImpactProvider } from '@repo/lib/modules/price-impact/PriceImpactProvider'
-import { DefaultPageContainer } from '@repo/lib/shared/components/containers/DefaultPageContainer'
 import { getSwapPathParams } from '@repo/lib/modules/swap/getSwapPathParams'
-import { RelayerSignatureProvider } from '@repo/lib/modules/relayer/RelayerSignatureProvider'
+import SwapLayout from '../../../../../../packages/lib/modules/swap/SwapLayout'
+import { DefaultPageContainer } from '@repo/lib/shared/components/containers/DefaultPageContainer'
 
 type Props = PropsWithChildren<{
   params: { slug?: string[] }
 }>
 
-export default function SwapLayout({ params: { slug }, children }: Props) {
+export default function Layout({ params: { slug }, children }: Props) {
   const pathParams = getSwapPathParams(slug)
 
-  const { getTokensByChain } = useTokens()
-  const initChain = pathParams.chain
-    ? slugToChainMap[pathParams.chain as ChainSlug]
-    : GqlChain.Mainnet
-  const initTokens = getTokensByChain(initChain)
-
   return (
     <DefaultPageContainer minH="100vh">
-      <TransactionStateProvider>
-        <RelayerSignatureProvider>
-          <TokenInputsValidationProvider>
-            <TokenBalancesProvider initTokens={initTokens}>
-              <PriceImpactProvider>
-                <SwapProvider pathParams={{ ...pathParams }}>{children}</SwapProvider>
-              </PriceImpactProvider>
-            </TokenBalancesProvider>
-          </TokenInputsValidationProvider>
-        </RelayerSignatureProvider>
-      </TransactionStateProvider>
+      <SwapLayout pathParams={pathParams}> {children} </SwapLayout>
     </DefaultPageContainer>
   )
 }
diff --git a/packages/lib/modules/pool/PoolDetail/PoolHeader/PoolAdvancedOptions.tsx b/packages/lib/modules/pool/PoolDetail/PoolHeader/PoolAdvancedOptions.tsx
new file mode 100644
index 00000000..adb92fd3
--- /dev/null
+++ b/packages/lib/modules/pool/PoolDetail/PoolHeader/PoolAdvancedOptions.tsx
@@ -0,0 +1,70 @@
+'use client'
+
+import {
+  Box,
+  Button,
+  HStack,
+  Link,
+  Popover,
+  PopoverArrow,
+  PopoverBody,
+  PopoverCloseButton,
+  PopoverContent,
+  PopoverTrigger,
+  VStack,
+} from '@chakra-ui/react'
+import { SwapIcon } from '@repo/lib/shared/components/icons/SwapIcon'
+import { staggeredFadeInUp } from '@repo/lib/shared/utils/animations'
+import { AnimatePresence, motion } from 'framer-motion'
+import NextLink from 'next/link'
+import { usePathname } from 'next/navigation'
+import { useState } from 'react'
+import { MoreVertical } from 'react-feather'
+
+export function PoolAdvancedOptions() {
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false)
+  const pathname = usePathname()
+
+  return (
+    <Popover
+      isOpen={isPopoverOpen}
+      onOpen={() => setIsPopoverOpen(true)}
+      onClose={() => setIsPopoverOpen(false)}
+      placement="bottom-end"
+    >
+      <PopoverTrigger>
+        <Button variant="tertiary" size="lg" color="grayText">
+          {<MoreVertical size={16} />}
+        </Button>
+      </PopoverTrigger >
+      <Box zIndex="popover" shadow="2xl" width="max">
+        <PopoverContent>
+          <PopoverArrow bg="background.level3" />
+          <PopoverCloseButton top="sm" />
+          <PopoverBody p="lg">
+            <AnimatePresence>
+              {isPopoverOpen && (
+                <VStack
+                  align="start"
+                  spacing="xxs"
+                  as={motion.div}
+                  initial="hidden"
+                  animate="show"
+                  exit="exit"
+                  variants={staggeredFadeInUp}
+                >
+                  <HStack>
+                    <SwapIcon size={24} />
+                    <Link as={NextLink} href={`${pathname}/swap`} prefetch={true} variant="nav">
+                      Swap tokens directly via this pool
+                    </Link>
+                  </HStack>
+                </VStack>
+              )}
+            </AnimatePresence>
+          </PopoverBody>
+        </PopoverContent>
+      </Box>
+    </Popover>
+  )
+}
diff --git a/packages/lib/modules/pool/PoolDetail/PoolHeader/PoolHeader.tsx b/packages/lib/modules/pool/PoolDetail/PoolHeader/PoolHeader.tsx
index 37c7571a..18369650 100644
--- a/packages/lib/modules/pool/PoolDetail/PoolHeader/PoolHeader.tsx
+++ b/packages/lib/modules/pool/PoolDetail/PoolHeader/PoolHeader.tsx
@@ -1,4 +1,4 @@
-import { Stack, Button, VStack, useDisclosure } from '@chakra-ui/react'
+import { Stack, Button, VStack, useDisclosure, HStack } from '@chakra-ui/react'
 import { usePathname, useRouter } from 'next/navigation'
 import PoolMetaBadges from './PoolMetaBadges'
 
@@ -13,6 +13,7 @@ import {
 } from '@repo/lib/shared/components/modals/PartnerRedirectModal'
 import { useState } from 'react'
 import { getXavePoolLink } from '../../pool.utils'
+import { PoolAdvancedOptions } from './PoolAdvancedOptions'
 
 export function PoolHeader() {
   const pathname = usePathname()
@@ -55,14 +56,18 @@ export function PoolHeader() {
         <PoolMetaBadges />
         <Stack spacing="md" direction={{ base: 'column', md: 'row' }}>
           <PoolCategories />
-          <Button
-            onClick={handleClick}
-            variant="primary"
-            size="lg"
-            isDisabled={isAddLiquidityBlocked}
-          >
-            Add liquidity
-          </Button>
+          <HStack spacing="sm">
+
+            <Button
+              onClick={handleClick}
+              variant="primary"
+              size="lg"
+              isDisabled={isAddLiquidityBlocked}
+            >
+              Add liquidity
+            </Button>
+            <PoolAdvancedOptions />
+          </HStack>
           <PartnerRedirectModal
             partner={redirectPartner}
             redirectUrl={redirectPartnerUrl}
diff --git a/packages/lib/modules/swap/PoolSwapCard.tsx b/packages/lib/modules/swap/PoolSwapCard.tsx
new file mode 100644
index 00000000..42252624
--- /dev/null
+++ b/packages/lib/modules/swap/PoolSwapCard.tsx
@@ -0,0 +1,29 @@
+import { VStack, Card, HStack, Text } from '@chakra-ui/react'
+import { BalAlert } from '@repo/lib/shared/components/alerts/BalAlert'
+import { BalAlertContent } from '@repo/lib/shared/components/alerts/BalAlertContent'
+import { NetworkIcon } from '@repo/lib/shared/components/icons/NetworkIcon'
+import { usePool } from '../pool/PoolProvider'
+
+export function PoolSwapCard() {
+  const { pool } = usePool()
+  return (
+    <VStack>
+      <BalAlert
+        status="warning"
+        content={
+          <BalAlertContent
+            title="Direct single pool swap (expert option)"
+            description="This swap routes through a single pool only. Better rates are usually available through the standard swap UI."
+            forceColumnMode
+          />
+        }
+      />
+      <Card h="full">
+        <HStack>
+          <NetworkIcon chain={pool.chain} size={6} />
+          <Text>{pool.name} (swap route)</Text>
+        </HStack>
+      </Card>
+    </VStack>
+  )
+}
diff --git a/packages/lib/modules/swap/SwapForm.tsx b/packages/lib/modules/swap/SwapForm.tsx
index 4a0d526f..bb4372fd 100644
--- a/packages/lib/modules/swap/SwapForm.tsx
+++ b/packages/lib/modules/swap/SwapForm.tsx
@@ -38,8 +38,14 @@ import { useUserAccount } from '../web3/UserAccountProvider'
 import { ConnectWallet } from '../web3/ConnectWallet'
 import { SafeAppAlert } from '@repo/lib/shared/components/alerts/SafeAppAlert'
 import { useTokens } from '../tokens/TokensProvider'
+import { useIsPoolSwap } from './useIsPoolSwap'
+import { CompactTokenSelectModal } from '../tokens/TokenSelectModal/TokenSelectList/CompactTokenSelectModal'
+import { PoolSwapCard } from './PoolSwapCard'
 
-export function SwapForm() {
+type Props = {
+  redirectToPoolPage?: () => void // Only used for pool swaps
+}
+export function SwapForm({ redirectToPoolPage }: Props) {
   const {
     tokenIn,
     tokenOut,
@@ -72,6 +78,7 @@ export function SwapForm() {
   const isMounted = useIsMounted()
   const { isConnected } = useUserAccount()
   const { startTokenPricePolling } = useTokens()
+  const isPoolSwap = useIsPoolSwap()
 
   const isLoadingSwaps = simulationQuery.isLoading
   const isLoading = isLoadingSwaps || !isMounted
@@ -107,8 +114,9 @@ export function SwapForm() {
 
     if (swapTxHash) {
       resetSwapAmounts()
-      replaceUrlPath()
       transactionSteps.resetTransactionSteps()
+      if (isPoolSwap) return redirectToPoolPage?.()
+      replaceUrlPath()
     }
   }
 
@@ -124,7 +132,7 @@ export function SwapForm() {
       >
         <Card rounded="xl">
           <CardHeader as={HStack} w="full" justify="space-between" zIndex={11}>
-            <span>{capitalize(swapAction)}</span>
+            <span>{isPoolSwap ? 'Single pool swap' : capitalize(swapAction)}</span>
             <HStack>
               <Tooltip label={copiedDeepLink ? 'Copied!' : 'Copy swap link'}>
                 <Button variant="tertiary" size="sm" color="grayText" onClick={copyDeepLink}>
@@ -137,14 +145,17 @@ export function SwapForm() {
           </CardHeader>
           <CardBody as={VStack} align="start">
             <VStack spacing="md" w="full">
+              {isPoolSwap && <PoolSwapCard />}
               <SafeAppAlert />
-              <ChainSelect
-                value={selectedChain}
-                onChange={newValue => {
-                  setSelectedChain(newValue as GqlChain)
-                  setTokenInAmount('')
-                }}
-              />
+              {!isPoolSwap && (
+                <ChainSelect
+                  value={selectedChain}
+                  onChange={newValue => {
+                    setSelectedChain(newValue as GqlChain)
+                    setTokenInAmount('')
+                  }}
+                />
+              )}
               <VStack w="full">
                 <TokenInput
                   ref={finalRefTokenIn}
@@ -235,16 +246,29 @@ export function SwapForm() {
           </CardFooter>
         </Card>
       </Center>
-      <TokenSelectModal
-        finalFocusRef={tokenSelectKey === 'tokenIn' ? finalRefTokenIn : finalRefTokenOut}
-        chain={selectedChain}
-        tokens={tokens}
-        currentToken={tokenSelectKey === 'tokenIn' ? tokenIn.address : tokenOut.address}
-        isOpen={tokenSelectDisclosure.isOpen}
-        onOpen={tokenSelectDisclosure.onOpen}
-        onClose={tokenSelectDisclosure.onClose}
-        onTokenSelect={handleTokenSelect}
-      />
+      {isPoolSwap ? (
+        <CompactTokenSelectModal
+          finalFocusRef={tokenSelectKey === 'tokenIn' ? finalRefTokenIn : finalRefTokenOut}
+          chain={selectedChain}
+          tokens={tokens}
+          isOpen={tokenSelectDisclosure.isOpen}
+          onOpen={tokenSelectDisclosure.onOpen}
+          onClose={tokenSelectDisclosure.onClose}
+          onTokenSelect={handleTokenSelect}
+        />
+      ) : (
+        <TokenSelectModal
+          finalFocusRef={tokenSelectKey === 'tokenIn' ? finalRefTokenIn : finalRefTokenOut}
+          chain={selectedChain}
+          tokens={tokens}
+          currentToken={tokenSelectKey === 'tokenIn' ? tokenIn.address : tokenOut.address}
+          isOpen={tokenSelectDisclosure.isOpen}
+          onOpen={tokenSelectDisclosure.onOpen}
+          onClose={tokenSelectDisclosure.onClose}
+          onTokenSelect={handleTokenSelect}
+        />
+      )}
+
       <SwapPreviewModal
         finalFocusRef={nextBtn}
         isOpen={previewModalDisclosure.isOpen}
diff --git a/packages/lib/modules/swap/SwapLayout.tsx b/packages/lib/modules/swap/SwapLayout.tsx
new file mode 100644
index 00000000..2915e37e
--- /dev/null
+++ b/packages/lib/modules/swap/SwapLayout.tsx
@@ -0,0 +1,39 @@
+'use client'
+
+import { ChainSlug, slugToChainMap } from '@repo/lib/modules/pool/pool.utils'
+import { PriceImpactProvider } from '@repo/lib/modules/price-impact/PriceImpactProvider'
+import { RelayerSignatureProvider } from '@repo/lib/modules/relayer/RelayerSignatureProvider'
+import { PathParams, SwapProvider } from '@repo/lib/modules/swap/SwapProvider'
+import { TokenBalancesProvider } from '@repo/lib/modules/tokens/TokenBalancesProvider'
+import { TokenInputsValidationProvider } from '@repo/lib/modules/tokens/TokenInputsValidationProvider'
+import { useTokens } from '@repo/lib/modules/tokens/TokensProvider'
+import { TransactionStateProvider } from '@repo/lib/modules/transactions/transaction-steps/TransactionStateProvider'
+import { GqlChain } from '@repo/lib/shared/services/api/generated/graphql'
+import { PropsWithChildren } from 'react'
+
+type Props = PropsWithChildren<{
+  pathParams: PathParams
+}>
+
+// Layout shared by standard swap page (/swap) and pool swap page (/poolid/swap)
+export default function SwapLayout({ pathParams, children }: Props) {
+  const { getTokensByChain } = useTokens()
+  const initChain = pathParams.chain
+    ? slugToChainMap[pathParams.chain as ChainSlug]
+    : GqlChain.Mainnet
+  const initTokens = pathParams.poolTokens || getTokensByChain(initChain)
+
+  return (
+    <TransactionStateProvider>
+      <RelayerSignatureProvider>
+        <TokenInputsValidationProvider>
+          <TokenBalancesProvider initTokens={initTokens}>
+            <PriceImpactProvider>
+              <SwapProvider pathParams={{ ...pathParams }}>{children}</SwapProvider>
+            </PriceImpactProvider>
+          </TokenBalancesProvider>
+        </TokenInputsValidationProvider>
+      </RelayerSignatureProvider>
+    </TransactionStateProvider>
+  )
+}
diff --git a/packages/lib/modules/swap/SwapProvider.tsx b/packages/lib/modules/swap/SwapProvider.tsx
index df1f0c6d..fdea9b79 100644
--- a/packages/lib/modules/swap/SwapProvider.tsx
+++ b/packages/lib/modules/swap/SwapProvider.tsx
@@ -48,6 +48,7 @@ import { usePriceImpact } from '../price-impact/PriceImpactProvider'
 import { calcMarketPriceImpact } from '../price-impact/price-impact.utils'
 import { isAuraBalSwap } from './swap.helpers'
 import { AuraBalSwapHandler } from './handlers/AuraBalSwap.handler'
+import { useIsPoolSwap } from './useIsPoolSwap'
 
 export type UseSwapResponse = ReturnType<typeof _useSwap>
 export const SwapContext = createContext<UseSwapResponse | null>(null)
@@ -60,6 +61,8 @@ export type PathParams = {
   amountOut?: string
   // When urlTxHash is present the rest of the params above are not used
   urlTxHash?: Hash
+  // Only used by pool swap
+  poolTokens?: GqlToken[]
 }
 
 function selectSwapHandler(
@@ -83,6 +86,7 @@ function selectSwapHandler(
 }
 
 export function _useSwap({ urlTxHash, ...pathParams }: PathParams) {
+  const isPoolSwap = useIsPoolSwap()
   const swapStateVar = useMakeVarPersisted<SwapState>(
     {
       tokenIn: {
@@ -335,6 +339,7 @@ export function _useSwap({ urlTxHash, ...pathParams }: PathParams) {
   }
 
   function replaceUrlPath() {
+    if (isPoolSwap) return // Avoid redirection when the swap is within a pool page
     const { selectedChain, tokenIn, tokenOut, swapType } = swapState
     const { popularTokens } = networkConfig.tokens
     const chainSlug = chainToSlugMap[selectedChain]
@@ -467,6 +472,10 @@ export function _useSwap({ urlTxHash, ...pathParams }: PathParams) {
     setInitialTokenOut(tokenOut)
     setInitialAmounts(amountIn, amountOut)
 
+    if (isPoolSwap) {
+      setTokens(pathParams.poolTokens!)
+    }
+
     if (!swapState.tokenIn.address && !swapState.tokenOut.address) setDefaultTokens()
   }, [])
 
@@ -509,6 +518,7 @@ export function _useSwap({ urlTxHash, ...pathParams }: PathParams) {
 
   // Update selecteable tokens when the chain changes
   useEffect(() => {
+    if (isPoolSwap) return
     setTokens(getTokensByChain(swapState.selectedChain))
   }, [swapState.selectedChain])
 
diff --git a/packages/lib/modules/swap/modal/SwapModal.tsx b/packages/lib/modules/swap/modal/SwapModal.tsx
index 27db8d0c..ca983711 100644
--- a/packages/lib/modules/swap/modal/SwapModal.tsx
+++ b/packages/lib/modules/swap/modal/SwapModal.tsx
@@ -20,6 +20,7 @@ import { SwapSummary } from './SwapSummary'
 import { useSwapReceipt } from '../../transactions/transaction-steps/receipts/receipt.hooks'
 import { useUserAccount } from '../../web3/UserAccountProvider'
 import { useTokens } from '../../tokens/TokensProvider'
+import { useIsPoolSwap } from '../useIsPoolSwap'
 
 type Props = {
   isOpen: boolean
@@ -34,6 +35,7 @@ export function SwapPreviewModal({
   finalFocusRef,
   ...rest
 }: Props & Omit<ModalProps, 'children'>) {
+  const isPoolSwap = useIsPoolSwap()
   const { isDesktop } = useBreakpoints()
   const initialFocusRef = useRef(null)
   const { userAddress } = useUserAccount()
@@ -59,7 +61,10 @@ export function SwapPreviewModal({
 
   useEffect(() => {
     if (!isWrap && swapTxHash && !window.location.pathname.includes(swapTxHash)) {
-      window.history.pushState({}, '', `/swap/${chainToSlugMap[selectedChain]}/${swapTxHash}`)
+      const url = isPoolSwap
+        ? `${window.location.pathname}/${swapTxHash}`
+        : `/swap/${chainToSlugMap[selectedChain]}/${swapTxHash}`
+      window.history.pushState({}, '', url)
     }
   }, [swapTxHash])
 
@@ -102,7 +107,7 @@ export function SwapPreviewModal({
         <ActionModalFooter
           isSuccess={!!swapTxHash && !swapReceipt.isLoading}
           currentStep={transactionSteps.currentStep}
-          returnLabel="Swap again"
+          returnLabel={isPoolSwap ? 'Return to pool' : 'Swap again'}
           returnAction={onClose}
           urlTxHash={urlTxHash}
         />
diff --git a/packages/lib/modules/swap/useIsPoolSwap.tsx b/packages/lib/modules/swap/useIsPoolSwap.tsx
new file mode 100644
index 00000000..503dfb00
--- /dev/null
+++ b/packages/lib/modules/swap/useIsPoolSwap.tsx
@@ -0,0 +1,6 @@
+import { usePathname } from 'next/navigation'
+
+export function useIsPoolSwap() {
+  const pathname = usePathname()
+  return pathname.includes('/pools') && pathname.includes('/swap')
+}
diff --git a/packages/lib/modules/tokens/NativeAssetSelectModal.tsx b/packages/lib/modules/tokens/NativeAssetSelectModal.tsx
index 14da0419..99107507 100644
--- a/packages/lib/modules/tokens/NativeAssetSelectModal.tsx
+++ b/packages/lib/modules/tokens/NativeAssetSelectModal.tsx
@@ -13,7 +13,7 @@ import {
 } from '@chakra-ui/react'
 import { RefObject } from 'react'
 import { GqlChain, GqlToken } from '@repo/lib/shared/services/api/generated/graphql'
-import { NativeAssetSelectList } from './NativeAssetSelectList'
+import { CompactTokenSelectList } from './TokenSelectModal/TokenSelectList/CompactTokenSelectList'
 
 type Props = {
   chain: GqlChain
@@ -54,7 +54,7 @@ export function NativeAssetSelectModal({
         <ModalBody p={0}>
           <VStack w="full" align="start" spacing="md">
             <Box px="md" w="full">
-              <NativeAssetSelectList tokens={nativeAssets} onTokenSelect={closeOnSelect} />
+              <CompactTokenSelectList tokens={nativeAssets} onTokenSelect={closeOnSelect} />
             </Box>
           </VStack>
         </ModalBody>
diff --git a/packages/lib/modules/tokens/NativeAssetSelectList.tsx b/packages/lib/modules/tokens/TokenSelectModal/TokenSelectList/CompactTokenSelectList.tsx
similarity index 88%
rename from packages/lib/modules/tokens/NativeAssetSelectList.tsx
rename to packages/lib/modules/tokens/TokenSelectModal/TokenSelectList/CompactTokenSelectList.tsx
index 2c05be3f..2f1154d2 100644
--- a/packages/lib/modules/tokens/NativeAssetSelectList.tsx
+++ b/packages/lib/modules/tokens/TokenSelectModal/TokenSelectList/CompactTokenSelectList.tsx
@@ -1,20 +1,20 @@
 'use client'
 
 import { Box, BoxProps, Center, Text } from '@chakra-ui/react'
-import { TokenSelectListRow } from './TokenSelectModal/TokenSelectList/TokenSelectListRow'
 import { GqlToken } from '@repo/lib/shared/services/api/generated/graphql'
-import { useTokenBalances } from './TokenBalancesProvider'
 import { useUserAccount } from '@repo/lib/modules/web3/UserAccountProvider'
 import { useState } from 'react'
 import { useHotkeys } from 'react-hotkeys-hook'
 import { Virtuoso } from 'react-virtuoso'
+import { useTokenBalances } from '../../TokenBalancesProvider'
+import { TokenSelectListRow } from './TokenSelectListRow'
 
 type Props = {
   tokens: GqlToken[]
   onTokenSelect: (token: GqlToken) => void
 }
 
-export function NativeAssetSelectList({ tokens, onTokenSelect, ...rest }: Props & BoxProps) {
+export function CompactTokenSelectList({ tokens, onTokenSelect, ...rest }: Props & BoxProps) {
   const [activeIndex, setActiveIndex] = useState(0)
   const { balanceFor, isBalancesLoading } = useTokenBalances()
   const { isConnected } = useUserAccount()
@@ -40,6 +40,8 @@ export function NativeAssetSelectList({ tokens, onTokenSelect, ...rest }: Props
     return `${token.address}:${token.chain}:${index}`
   }
 
+  const style = { height: `${tokens.length * 75}px` }
+
   return (
     <Box {...rest}>
       {tokens.length === 0 ? (
@@ -50,7 +52,7 @@ export function NativeAssetSelectList({ tokens, onTokenSelect, ...rest }: Props
         </Center>
       ) : (
         <Virtuoso
-          style={{ height: '150px' }}
+          style={style}
           data={tokens}
           itemContent={index => {
             const token = tokens[index]
diff --git a/packages/lib/modules/tokens/TokenSelectModal/TokenSelectList/CompactTokenSelectModal.tsx b/packages/lib/modules/tokens/TokenSelectModal/TokenSelectList/CompactTokenSelectModal.tsx
new file mode 100644
index 00000000..fa73a5a2
--- /dev/null
+++ b/packages/lib/modules/tokens/TokenSelectModal/TokenSelectList/CompactTokenSelectModal.tsx
@@ -0,0 +1,64 @@
+'use client'
+
+import {
+  Box,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalHeader,
+  ModalOverlay,
+  ModalProps,
+  VStack,
+} from '@chakra-ui/react'
+import { RefObject } from 'react'
+import { GqlChain, GqlToken } from '@repo/lib/shared/services/api/generated/graphql'
+import { CompactTokenSelectList } from './CompactTokenSelectList'
+
+type Props = {
+  chain: GqlChain
+  isOpen: boolean
+  onClose(): void
+  onOpen(): void
+  finalFocusRef?: RefObject<HTMLInputElement>
+  onTokenSelect: (token: GqlToken) => void
+  tokens: GqlToken[]
+}
+
+export function CompactTokenSelectModal({
+  isOpen,
+  onClose,
+  finalFocusRef,
+  onTokenSelect,
+  tokens,
+  ...rest
+}: Props & Omit<ModalProps, 'children'>) {
+  function closeOnSelect(token: GqlToken) {
+    onClose()
+    onTokenSelect(token)
+  }
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      finalFocusRef={finalFocusRef}
+      isCentered
+      preserveScrollBarGap
+      {...rest}
+    >
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader color="font.primary">Select a token</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody p={0}>
+          <VStack w="full" align="start" spacing="md">
+            <Box px="md" w="full">
+              <CompactTokenSelectList tokens={tokens} onTokenSelect={closeOnSelect} />
+            </Box>
+          </VStack>
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+  )
+}
diff --git a/packages/lib/shared/components/icons/SwapIcon.tsx b/packages/lib/shared/components/icons/SwapIcon.tsx
new file mode 100644
index 00000000..5fa8b414
--- /dev/null
+++ b/packages/lib/shared/components/icons/SwapIcon.tsx
@@ -0,0 +1,48 @@
+/* eslint-disable max-len */
+export function SwapIcon({ size = 24 }: { size?: number }) {
+  return (
+    <svg
+      viewBox="0 0 25 25"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+    >
+      <g clip-path="url(#clip0_1_5255)">
+        <path
+          d="M3.5 17.499H8.5L10.17 15.113M13.83 9.88602L15.5 7.49902H21.5"
+          stroke="#A0AEC0"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M18.5 4.49902L21.5 7.49902L18.5 10.499"
+          stroke="#A0AEC0"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M3.5 7.49902H8.5L15.5 17.499H21.5"
+          stroke="#A0AEC0"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M18.5 20.501L21.5 17.501L18.5 14.501"
+          stroke="#A0AEC0"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_1_5255">
+          <rect width="24" height="24" fill="white" transform="translate(0.5 0.5)" />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+}