diff --git a/src/components/TokenImg.tsx b/src/components/TokenImg.tsx
index 11dc3dde1..0a0ce5c2c 100644
--- a/src/components/TokenImg.tsx
+++ b/src/components/TokenImg.tsx
@@ -43,7 +43,7 @@ function TokenImg({ token, ...rest }: TokenImgProps) {
   return <img src={src} alt={alt} key={alt} onError={onError} {...rest} />
 }
 
-export default styled(TokenImg)<{ size?: number }>`
+export default styled(TokenImg)<{ size?: number; unapproved?: boolean }>`
   // radial-gradient calculates distance from the corner, not the edge: divide by sqrt(2)
   background: radial-gradient(
     ${({ theme }) => theme.module} calc(100% / ${Math.sqrt(2)} - 1.5px),
@@ -52,4 +52,6 @@ export default styled(TokenImg)<{ size?: number }>`
   border-radius: 100%;
   height: ${({ size }) => size || 1}em;
   width: ${({ size }) => size || 1}em;
+
+  ${({ unapproved }) => unapproved && 'filter: grayscale(100%) opacity(60%)'}
 `
diff --git a/src/components/TokenSelect/TokenButton.tsx b/src/components/TokenSelect/TokenButton.tsx
index bff20b394..b83a149a0 100644
--- a/src/components/TokenSelect/TokenButton.tsx
+++ b/src/components/TokenSelect/TokenButton.tsx
@@ -41,10 +41,11 @@ interface TokenButtonProps {
   value?: Currency
   collapsed: boolean
   disabled?: boolean
+  isUnapprovedToken?: boolean
   onClick: () => void
 }
 
-export default function TokenButton({ value, collapsed, disabled, onClick }: TokenButtonProps) {
+export default function TokenButton({ value, collapsed, disabled, isUnapprovedToken, onClick }: TokenButtonProps) {
   const buttonBackgroundColor = useMemo(() => (value ? 'interactive' : 'accent'), [value])
   const contentColor = useMemo(() => (value || disabled ? 'onInteractive' : 'onAccent'), [value, disabled])
 
@@ -85,7 +86,7 @@ export default function TokenButton({ value, collapsed, disabled, onClick }: Tok
         >
           {value ? (
             <>
-              <TokenImg token={value} size={1.2} />
+              <TokenImg token={value} size={1.2} unapproved={isUnapprovedToken} />
               {value.symbol}
             </>
           ) : (
diff --git a/src/components/TokenSelect/index.tsx b/src/components/TokenSelect/index.tsx
index 62ca97df9..55325910e 100644
--- a/src/components/TokenSelect/index.tsx
+++ b/src/components/TokenSelect/index.tsx
@@ -1,10 +1,14 @@
 import { t, Trans } from '@lingui/macro'
 import { Currency } from '@uniswap/sdk-core'
+import { useIsPendingApproval } from 'components/Swap/SwapButton/useApprovalData'
+import { useSwapInfo } from 'hooks/swap'
+import { ApproveOrPermitState, useApproveOrPermit } from 'hooks/swap/useSwapApproval'
 import useActiveWeb3React from 'hooks/useActiveWeb3React'
 import { useCurrencyBalances } from 'hooks/useCurrencyBalance'
 import useNativeCurrency from 'hooks/useNativeCurrency'
 import useTokenList, { useIsTokenListLoaded, useQueryTokens } from 'hooks/useTokenList'
 import { ElementRef, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { Field } from 'state/swap'
 import styled from 'styled-components/macro'
 import { ThemedText } from 'theme'
 
@@ -137,9 +141,25 @@ export default memo(function TokenSelect({ value, collapsed, disabled, onSelect
     },
     [onSelect, setOpen]
   )
+
+  const {
+    [Field.INPUT]: { currency, amount: amountIn },
+    trade,
+    slippage,
+  } = useSwapInfo()
+  const isInputToken = value && currency?.equals(value)
+  const { approvalState } = useApproveOrPermit(trade.trade, slippage.allowed, useIsPendingApproval, amountIn)
+  const isUnapprovedToken = isInputToken && approvalState !== ApproveOrPermitState.APPROVED
+
   return (
     <>
-      <TokenButton value={value} collapsed={collapsed} disabled={disabled} onClick={onOpen} />
+      <TokenButton
+        value={value}
+        collapsed={collapsed}
+        disabled={disabled}
+        isUnapprovedToken={isUnapprovedToken}
+        onClick={onOpen}
+      />
       {open && <TokenSelectDialog value={value} onSelect={selectAndClose} onClose={() => setOpen(false)} />}
     </>
   )