diff --git a/src/components/trade/_shared/TradeInputSelector.tsx b/src/components/trade/_shared/TradeInputSelector.tsx
deleted file mode 100644
index 02f9aca5c..000000000
--- a/src/components/trade/_shared/TradeInputSelector.tsx
+++ /dev/null
@@ -1,175 +0,0 @@
-import Image from 'next/image'
-import { colors, useColorStyles } from '@/lib/styles/colors'
-
-import { ChevronDownIcon } from '@chakra-ui/icons'
-import { Box, Flex, Input, Text } from '@chakra-ui/react'
-
-import { Token } from '@/constants/tokens'
-
-interface InputSelectorConfig {
-  isDarkMode: boolean
-  isNarrowVersion: boolean
-  isInputDisabled?: boolean
-  isSelectorDisabled?: boolean
-  isReadOnly?: boolean
-  showMaxLabel: boolean
-}
-
-const TradeInputSelector = (props: {
-  config: InputSelectorConfig
-  formattedFiat: string
-  // Used from swap to show price impact behind fiat value
-  priceImpact?: { priceImpact: string; colorCoding: string }
-  selectedToken: Token
-  selectedTokenAmount: string
-  selectedTokenBalance: string
-  onClickBalance: () => void
-  onSelectedToken: (symbol: string) => void
-  onChangeInput?: (token: Token, input: string) => void
-}) => {
-  const { styles } = useColorStyles()
-  const { config, selectedToken, selectedTokenAmount, selectedTokenBalance } =
-    props
-  const borderColor = styles.border
-  const borderRadius = 16
-  const selectedTokenSymbol = selectedToken.symbol
-
-  const onChangeInput = (amount: string) => {
-    if (
-      props.onChangeInput === undefined ||
-      config.isInputDisabled ||
-      config.isSelectorDisabled ||
-      config.isReadOnly
-    )
-      return
-    props.onChangeInput(selectedToken, amount)
-  }
-
-  return (
-    <Flex direction='column'>
-      <Flex
-        bg={styles.background}
-        border='1px solid'
-        borderColor={borderColor}
-        borderRadius={borderRadius}
-        direction='column'
-        p='16px'
-      >
-        <Flex align='flex-start' direction='row' justify='space-between'>
-          <Input
-            color={styles.text2}
-            fontSize='28px'
-            overflow='hidden'
-            placeholder='0.0'
-            pr='4px'
-            type='number'
-            step='any'
-            textOverflow='ellipsis'
-            variant='unstyled'
-            whiteSpace='nowrap'
-            disabled={config.isInputDisabled ?? false}
-            isReadOnly={config.isReadOnly ?? false}
-            value={selectedTokenAmount}
-            onChange={(event) => {
-              onChangeInput(event.target.value)
-            }}
-          />
-          <SelectorButton
-            onClick={() => props.onSelectedToken(selectedTokenSymbol)}
-            selectedTokenImage={selectedToken.image}
-            selectedTokenSymbol={selectedTokenSymbol}
-          />
-        </Flex>
-        <Flex
-          align='flex-start'
-          direction='row'
-          justify='space-between'
-          mt='8px'
-        >
-          <Flex>
-            <Text fontSize='14px' textColor={styles.text3}>
-              {props.formattedFiat}
-            </Text>
-            {props.priceImpact && (
-              <Text fontSize='14px' textColor={props.priceImpact.colorCoding}>
-                &nbsp;{props.priceImpact.priceImpact}
-              </Text>
-            )}
-          </Flex>
-          <Balance
-            balance={selectedTokenBalance}
-            onClick={props.onClickBalance}
-            showMaxLabel={config.showMaxLabel}
-          />
-        </Flex>
-      </Flex>
-    </Flex>
-  )
-}
-
-type BalanceProps = {
-  balance: string
-  onClick: () => void
-  showMaxLabel: boolean
-}
-
-const Balance = ({ balance, onClick, showMaxLabel }: BalanceProps) => (
-  <Flex cursor='pointer' onClick={onClick} mr='4px'>
-    <Text color={colors.icGray2} fontSize='14px' fontWeight='400'>
-      Balance: {balance}
-    </Text>
-    {showMaxLabel && (
-      <Flex
-        align='center'
-        bg={colors.icBlue10}
-        borderRadius='12px'
-        justify='center'
-        py='2px'
-        px='6px'
-        ml='4px'
-      >
-        <Text color={colors.icBlue2} fontSize='10px'>
-          MAX
-        </Text>
-      </Flex>
-    )}
-  </Flex>
-)
-
-type SelectorProps = {
-  onClick: () => void
-  selectedTokenImage: string
-  selectedTokenSymbol: string
-}
-
-const SelectorButton = ({
-  onClick,
-  selectedTokenImage,
-  selectedTokenSymbol,
-}: SelectorProps) => (
-  <Flex
-    bg={colors.icGray1}
-    borderRadius='32'
-    boxShadow='sm'
-    cursor='pointer'
-    onClick={onClick}
-    py='10px'
-    px='10px'
-    shrink={0}
-  >
-    <Box w='24px'>
-      <Image
-        alt={`${selectedTokenSymbol} logo`}
-        src={selectedTokenImage}
-        width={24}
-        height={24}
-      />
-    </Box>
-    <Text color={colors.icGray4} ml='10px' mr='8px'>
-      {selectedTokenSymbol}
-    </Text>
-    <ChevronDownIcon w={6} h={6} color={colors.icGray4} />
-  </Flex>
-)
-
-export default TradeInputSelector
diff --git a/src/components/trade/flashmint/DirectIssuance.tsx b/src/components/trade/flashmint/DirectIssuance.tsx
index 001fcaa39..0324b4618 100644
--- a/src/components/trade/flashmint/DirectIssuance.tsx
+++ b/src/components/trade/flashmint/DirectIssuance.tsx
@@ -10,7 +10,7 @@ import { Box, Flex, Image, Text } from '@chakra-ui/react'
 
 import { Token } from '@/constants/tokens'
 
-import TradeInputSelector from '../_shared/TradeInputSelector'
+import { TradeInputSelector } from '../trade-input-selector'
 
 type DirectIssuanceProps = {
   indexToken: Token
@@ -43,7 +43,6 @@ const DirectIssuance = ({
   inputOutputTokenFiatFormatted,
   isIssue,
   isMintable,
-  isNarrow,
   onClickBalance,
   onChangeBuyTokenAmount,
   onSelectIndexToken,
@@ -74,22 +73,23 @@ const DirectIssuance = ({
         paddingTop='16px'
       >
         <TradeInputSelector
+          caption=''
           config={{
-            isDarkMode,
             isInputDisabled: isIssue && !isMintable,
-            isNarrowVersion: isNarrow,
             isSelectorDisabled: isIssue && !isMintable,
             isReadOnly: isIssue && !isMintable,
-            showMaxLabel: isIssue && isMintable,
           }}
+          balance={indexTokenBalanceFormatted}
           selectedToken={indexToken}
           selectedTokenAmount={indexTokenAmountFormatted}
-          selectedTokenBalance={indexTokenBalanceFormatted}
           formattedFiat={indexTokenFiatFormatted}
-          priceImpact={priceImpact}
+          priceImpact={{
+            colorCoding: priceImpact?.colorCoding ?? '',
+            value: priceImpact?.priceImpact ?? '',
+          }}
           onChangeInput={onChangeBuyTokenAmount}
           onClickBalance={onClickBalance}
-          onSelectedToken={(_) => onSelectIndexToken()}
+          onSelectToken={onSelectIndexToken}
         />
         <Text marginTop='16px'>
           {isIssue
diff --git a/src/components/trade/swap/index.tsx b/src/components/trade/swap/index.tsx
index ae802b3aa..3a343da45 100644
--- a/src/components/trade/swap/index.tsx
+++ b/src/components/trade/swap/index.tsx
@@ -35,12 +35,13 @@ import {
   getTradeInfoData0x,
   shouldShowWarningSign,
 } from '../_shared/QuickTradeFormatter'
-import TradeInputSelector from '../_shared/TradeInputSelector'
 import {
   getSelectTokenListItems,
   SelectTokenModal,
 } from '../_shared/SelectTokenModal'
 
+import { TradeInputSelector } from '../trade-input-selector'
+
 import { BetterQuoteState, BetterQuoteView } from './BetterQuoteView'
 import { TradeDetails } from './trade-details'
 import { TradeInfoItem } from './trade-details/trade-info'
@@ -472,52 +473,51 @@ const QuickTrade = (props: QuickTradeProps) => {
 
   return (
     <Box>
-      <Flex direction='column' m='40px 0 20px'>
+      <Flex direction='column' m='4px 0 6px'>
         <TradeInputSelector
-          config={{
-            isDarkMode,
-            isInputDisabled: false,
-            isNarrowVersion: isNarrow,
-            isSelectorDisabled: false,
-            isReadOnly: false,
-            showMaxLabel: true,
-          }}
+          config={{ isReadOnly: false }}
+          balance={inputTokenBalanceFormatted}
+          caption='You pay'
+          formattedFiat={sellTokenFiat}
           selectedToken={sellToken}
           selectedTokenAmount={inputTokenAmountFormatted}
-          selectedTokenBalance={inputTokenBalanceFormatted}
-          formattedFiat={sellTokenFiat}
           onChangeInput={onChangeInputTokenAmount}
           onClickBalance={onClickInputBalance}
-          onSelectedToken={(_) => {
+          onSelectToken={() => {
             if (inputTokenItems.length > 1) onOpenSelectInputToken()
           }}
         />
-        <Box h='12px' alignSelf={'center'}>
+        <Box h='6px' alignSelf={'center'}>
           <IconButton
-            background={colors.icGray1}
+            background={colors.icWhite}
             margin={'-16px 0 0 0'}
-            aria-label='switch buy/sell tokens'
-            color={isDarkMode ? colors.icWhite : colors.black}
+            aria-label='switch input/output tokens'
+            color={colors.icGray2}
             icon={<UpDownIcon />}
             onClick={onSwitchTokens}
           />
         </Box>
         <TradeInputSelector
           config={{
-            isDarkMode,
             isInputDisabled: true,
-            isNarrowVersion: isNarrow,
             isSelectorDisabled: false,
             isReadOnly: true,
-            showMaxLabel: false,
           }}
+          caption={'You receive'}
           selectedToken={buyToken}
           selectedTokenAmount={buyTokenAmountFormatted}
-          selectedTokenBalance={outputTokenBalanceFormatted}
+          balance={outputTokenBalanceFormatted}
           formattedFiat={buyTokenFiat}
-          priceImpact={priceImpact ?? undefined}
+          priceImpact={
+            priceImpact
+              ? {
+                  value: priceImpact.priceImpact,
+                  colorCoding: priceImpact.colorCoding,
+                }
+              : undefined
+          }
           onClickBalance={onClickOutputBalance}
-          onSelectedToken={(_) => {
+          onSelectToken={() => {
             if (outputTokenItems.length > 1) onOpenSelectOutputToken()
           }}
         />