diff --git a/.vscode/settings.json b/.vscode/settings.json
index 31bfa7ea..037e03e9 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -2,13 +2,6 @@
   "npm.packageManager": "yarn",
   "typescript.updateImportsOnFileMove.enabled": "always",
   "javascript.updateImportsOnFileMove.enabled": "always",
-  "editor.formatOnSaveMode": "file",
-  "editor.tabCompletion": "on",
-  "editor.tabSize": 2,
-  "editor.inlineSuggest.enabled": true,
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "editor.formatOnSave": true,
-  "editor.formatOnPaste": false,
   "[javascript]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
@@ -18,5 +11,10 @@
   "files.eol": "\n",
   "eslint.enable": true,
   "eslint.debug": true,
-  "prettier.trailingComma": "none",
-}
+  "extensions.disabled": [
+    "ms-vscode.jscs",
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
+    "rvest.vs-code-prettier-eslint"
+  ]
+}
\ No newline at end of file
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index b90589f3..e9498b04 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -31,7 +31,7 @@ type BaseButtonProps = {
   altDisabledStyle?: boolean
 } & ButtonProps
 
-export const BaseButton = styled(RebassButton)<BaseButtonProps>`
+export const BaseButton = styled(RebassButton) <BaseButtonProps>`
   padding: ${({ padding }) => padding ?? '16px'};
   width: ${({ width }) => width ?? '100%'};
   line-height: 24px;
@@ -312,8 +312,7 @@ export function ButtonDropdownLight({ disabled = false, children, ...rest }: { d
 }
 
 const ActiveOutlined = styled(ButtonOutlined)`
-  border: 1px solid;
-  border-color: ${({ theme }) => theme.accent1};
+  border: ${({ theme }) => `1px solid ${theme.jediBlue}`} !important ;
 `;
 
 const Circle = styled.div`
@@ -353,9 +352,9 @@ export function ButtonRadioChecked({ active = false, children, ...rest }: { acti
       <RowBetween>
         {children}
         <CheckboxWrapper>
-          <Circle>
+          {/* <Circle>
             <ResponsiveCheck size={13} stroke={theme.white} />
-          </Circle>
+          </Circle> */}
         </CheckboxWrapper>
       </RowBetween>
     </ActiveOutlined>
@@ -466,7 +465,7 @@ const BaseThemeButton = styled.button<BaseThemeButtonProps>`
   }
 `;
 
-interface ThemeButtonProps extends React.ComponentPropsWithoutRef<'button'>, BaseThemeButtonProps {}
+interface ThemeButtonProps extends React.ComponentPropsWithoutRef<'button'>, BaseThemeButtonProps { }
 type ThemeButtonRef = HTMLButtonElement
 
 export const ThemeButton = forwardRef<ThemeButtonRef, ThemeButtonProps>((
diff --git a/src/components/CurrencyInputPanel/index.tsx b/src/components/CurrencyInputPanel/index.tsx
index 8b372bb8..e4f3fcb2 100644
--- a/src/components/CurrencyInputPanel/index.tsx
+++ b/src/components/CurrencyInputPanel/index.tsx
@@ -1,28 +1,28 @@
-import { Trans } from '@lingui/macro';
-import { BrowserEvent, InterfaceElementName, SwapEventName } from '@uniswap/analytics-events';
-import { Currency, CurrencyAmount } from '@uniswap/sdk-core';
-import { Pair } from '@uniswap/v2-sdk';
-import { useWeb3React } from '@web3-react/core';
-import { darken } from 'polished';
-import { ReactNode, useCallback, useState } from 'react';
-import styled, { useTheme } from 'styled-components';
+import { Trans } from '@lingui/macro'
+import { BrowserEvent, InterfaceElementName, SwapEventName } from '@uniswap/analytics-events'
+import { Currency, CurrencyAmount } from '@uniswap/sdk-core'
+import { Pair } from '@uniswap/v2-sdk'
+import { useWeb3React } from '@web3-react/core'
+import { darken } from 'polished'
+import { ReactNode, useCallback, useState } from 'react'
+import styled, { useTheme } from 'styled-components'
 
-import { TraceEvent } from 'analytics';
-import { LoadingOpacityContainer, loadingOpacityMixin } from 'components/Loader/styled';
-import PrefetchBalancesWrapper from 'components/PrefetchBalancesWrapper/PrefetchBalancesWrapper';
-import { isSupportedChain } from 'constants/chains';
-import { ThemedText } from 'theme/components';
-import { flexColumnNoWrap, flexRowNoWrap } from 'theme/styles';
-import { formatCurrencyAmount } from 'utils/formatCurrencyAmount';
-import { ReactComponent as DropDown } from '../../assets/images/dropdown.svg';
-import { useCurrencyBalance } from '../../state/connection/hooks';
-import { ButtonGray } from '../Button';
-import DoubleCurrencyLogo from '../DoubleLogo';
-import CurrencyLogo from '../Logo/CurrencyLogo';
-import { Input as NumericalInput } from '../NumericalInput';
-import { RowBetween, RowFixed } from '../Row';
-import CurrencySearchModal from '../SearchModal/CurrencySearchModal';
-import { FiatValue } from './FiatValue';
+import { TraceEvent } from 'analytics'
+import { LoadingOpacityContainer, loadingOpacityMixin } from 'components/Loader/styled'
+import PrefetchBalancesWrapper from 'components/PrefetchBalancesWrapper/PrefetchBalancesWrapper'
+import { isSupportedChain } from 'constants/chains'
+import { ThemedText } from 'theme/components'
+import { flexColumnNoWrap, flexRowNoWrap } from 'theme/styles'
+import { formatCurrencyAmount } from 'utils/formatCurrencyAmount'
+import { ReactComponent as DropDown } from '../../assets/images/dropdown.svg'
+import { useCurrencyBalance } from '../../state/connection/hooks'
+import { ButtonGray } from '../Button'
+import DoubleCurrencyLogo from '../DoubleLogo'
+import CurrencyLogo from '../Logo/CurrencyLogo'
+import { Input as NumericalInput } from '../NumericalInput'
+import { RowBetween, RowFixed } from '../Row'
+import CurrencySearchModal from '../SearchModal/CurrencySearchModal'
+import { FiatValue } from './FiatValue'
 
 const InputPanel = styled.div<{ hideInput?: boolean }>`
   ${flexColumnNoWrap};
@@ -34,7 +34,7 @@ const InputPanel = styled.div<{ hideInput?: boolean }>`
   width: ${({ hideInput }) => (hideInput ? '100%' : 'initial')};
   transition: height 1s ease;
   will-change: height;
-`;
+`
 
 const Container = styled.div<{ hideInput: boolean; disabled: boolean }>`
   border-radius: ${({ hideInput }) => (hideInput ? '8px' : '8px')};
@@ -42,16 +42,20 @@ const Container = styled.div<{ hideInput: boolean; disabled: boolean }>`
   // background-color: ${({ theme }) => theme.surface2};
   background-color: rgba(196, 196, 196, 0.01);
   // background-color: #3e1371;
-  box-shadow: 0px 0.76977px 30.79088px 0px rgba(227, 222, 255, 0.20) inset, 0px 3.07909px 13.8559px 0px rgba(154, 146, 210, 0.30) inset, 0px 75.43767px 76.9772px -36.94907px rgba(202, 172, 255, 0.30) inset, 0px -63.12132px 52.3445px -49.26542px rgba(96, 68, 144, 0.30) inset;
+  box-shadow: 0px 0.76977px 30.79088px 0px rgba(227, 222, 255, 0.2) inset,
+    0px 3.07909px 13.8559px 0px rgba(154, 146, 210, 0.3) inset,
+    0px 75.43767px 76.9772px -36.94907px rgba(202, 172, 255, 0.3) inset,
+    0px -63.12132px 52.3445px -49.26542px rgba(96, 68, 144, 0.3) inset;
   width: ${({ hideInput }) => (hideInput ? '90%' : 'initial')};
-  ${({ theme, hideInput, disabled }) => !disabled
-    && `
+  ${({ theme, hideInput, disabled }) =>
+    !disabled &&
+    `
     :focus,
     :hover {
       border: 1px solid ${hideInput ? ' transparent' : theme.surface2};
     }
   `}
-`;
+`
 
 const CurrencySelect = styled(ButtonGray)<{
   visible: boolean
@@ -62,7 +66,7 @@ const CurrencySelect = styled(ButtonGray)<{
 }>`
   align-items: center;
   // background-color: ${({ selected, theme }) => (selected ? theme.surface1 : theme.accent1)};
-  background-color: ${({theme}) => theme.jediNavyBlue};
+  background-color: ${({ theme }) => theme.jediNavyBlue};
   opacity: ${({ disabled }) => (!disabled ? 1 : 0.4)};
   box-shadow: ${({ theme }) => theme.deprecated_shallowShadow};
   color: ${({ selected, theme }) => (selected ? theme.neutral1 : theme.white)};
@@ -80,14 +84,14 @@ const CurrencySelect = styled(ButtonGray)<{
   margin-left: ${({ hideInput }) => (hideInput ? '0' : '12px')};
   visibility: ${({ visible }) => (visible ? 'visible' : 'hidden')};
   ${({ pointerEvents }) => pointerEvents && 'pointer-events: none'}
-`;
+`
 
 const InputRow = styled.div<{ selected: boolean }>`
   ${flexRowNoWrap};
   align-items: center;
   justify-content: space-between;
   padding: ${({ selected }) => (selected ? ' 1rem 1rem 0.75rem 0' : '1rem 1rem 1rem 0')};
-`;
+`
 
 const LabelRow = styled.div`
   ${flexRowNoWrap};
@@ -100,13 +104,13 @@ const LabelRow = styled.div`
     cursor: pointer;
     color: ${({ theme }) => darken(0.2, theme.neutral2)};
   }
-`;
+`
 
 const FiatRow = styled(LabelRow)`
   justify-content: flex-end;
   padding: 0px 1rem 0.75rem;
   height: 32px;
-`;
+`
 
 // note the line height 0 ensures even if we change font/font-size it doesn't break centering
 const Aligner = styled.span`
@@ -115,7 +119,7 @@ const Aligner = styled.span`
   justify-content: space-between;
   width: 100%;
   line-height: 0px;
-`;
+`
 
 const StyledDropDown = styled(DropDown)<{ selected: boolean }>`
   margin: 0 0.25rem 0 0.35rem;
@@ -125,12 +129,14 @@ const StyledDropDown = styled(DropDown)<{ selected: boolean }>`
     stroke: ${({ selected, theme }) => (selected ? theme.neutral1 : theme.white)};
     stroke-width: 1.5px;
   }
-`;
+`
 
 const StyledTokenName = styled.span<{ active?: boolean }>`
   ${({ active }) => (active ? '  margin: 0 0.25rem 0 0.25rem;' : '  margin: 0 0.25rem 0 0.25rem;')}
-  font-size: 20px;
-`;
+  font-size: 14px;
+  font-weight: 700;
+  font-family: 'DM Sans';
+`
 
 const StyledBalanceMax = styled.button<{ disabled?: boolean }>`
   background-color: transparent;
@@ -153,16 +159,16 @@ const StyledBalanceMax = styled.button<{ disabled?: boolean }>`
   :focus {
     outline: none;
   }
-`;
+`
 
 const StyledNumericalInput = styled(NumericalInput)<{ $loading: boolean }>`
   ${loadingOpacityMixin};
   text-align: left;
-`;
+`
 
 const StyledPrefetchBalancesWrapper = styled(PrefetchBalancesWrapper)<{ $fullWidth: boolean }>`
   width: ${({ $fullWidth }) => ($fullWidth ? '100%' : 'auto')};
-`;
+`
 
 interface CurrencyInputPanelProps {
   value: string
@@ -183,11 +189,12 @@ interface CurrencyInputPanelProps {
   disableNonToken?: boolean
   renderBalance?: (amount: CurrencyAmount<Currency>) => ReactNode
   locked?: boolean
-  loading?: boolean,
-  hideShadow?: boolean,
+  loading?: boolean
+  hideShadow?: boolean
 }
 
-export default function CurrencyInputPanel({ value,
+export default function CurrencyInputPanel({
+  value,
   onUserInput,
   onMax,
   showMaxButton,
@@ -206,19 +213,20 @@ export default function CurrencyInputPanel({ value,
   locked = false,
   loading = false,
   hideShadow = false,
-  ...rest }: CurrencyInputPanelProps) {
-  const [modalOpen, setModalOpen] = useState(false);
-  const { account, chainId } = useWeb3React();
-  const selectedCurrencyBalance = useCurrencyBalance(account ?? undefined, currency ?? undefined);
-  const theme = useTheme();
+  ...rest
+}: CurrencyInputPanelProps) {
+  const [modalOpen, setModalOpen] = useState(false)
+  const { account, chainId } = useWeb3React()
+  const selectedCurrencyBalance = useCurrencyBalance(account ?? undefined, currency ?? undefined)
+  const theme = useTheme()
 
   const handleDismissSearch = useCallback(() => {
-    setModalOpen(false);
-  }, [setModalOpen]);
+    setModalOpen(false)
+  }, [setModalOpen])
 
-  const chainAllowed = isSupportedChain(chainId);
+  const chainAllowed = isSupportedChain(chainId)
 
-  const containerStyles = hideShadow ? {boxShadow: 'none'} : {};
+  const containerStyles = hideShadow ? { boxShadow: 'none' } : {}
   return (
     <InputPanel id={id} hideInput={hideInput} {...rest}>
       {!locked && (
@@ -233,7 +241,7 @@ export default function CurrencyInputPanel({ value,
                 className="open-currency-select-button"
                 onClick={() => {
                   if (onCurrencySelect) {
-                    setModalOpen(true);
+                    setModalOpen(true)
                   }
                 }}
                 pointerEvents={!onCurrencySelect ? 'none' : undefined}
@@ -252,14 +260,12 @@ export default function CurrencyInputPanel({ value,
                         {pair?.token0.symbol}:{pair?.token1.symbol}
                       </StyledTokenName>
                     ) : (
-                      <StyledTokenName
-                        className="token-symbol-container"
-                        active={Boolean(currency && currency.symbol)}
-                      >
+                      <StyledTokenName className="token-symbol-container" active={Boolean(currency && currency.symbol)}>
                         {(currency && currency.symbol && currency.symbol.length > 20
-                          ? `${currency.symbol.slice(0, 4)
-                          }...${
-                            currency.symbol.slice(currency.symbol.length - 5, currency.symbol.length)}`
+                          ? `${currency.symbol.slice(0, 4)}...${currency.symbol.slice(
+                              currency.symbol.length - 5,
+                              currency.symbol.length
+                            )}`
                           : currency?.symbol) || <Trans>Select a token</Trans>}
                       </StyledTokenName>
                     )}
@@ -276,7 +282,7 @@ export default function CurrencyInputPanel({ value,
                   onUserInput={onUserInput}
                   disabled={!chainAllowed}
                   $loading={loading}
-                  style={{width: 'auto', textAlign: 'right'}}
+                  style={{ width: 'auto', textAlign: 'right' }}
                 />
               </div>
             )}
@@ -304,16 +310,16 @@ export default function CurrencyInputPanel({ value,
                       fontSize={14}
                       style={{ display: 'inline', cursor: 'pointer' }}
                     >
-                      {Boolean(!hideBalance && currency && selectedCurrencyBalance)
-                          && (renderBalance?.(selectedCurrencyBalance as CurrencyAmount<Currency>) || (
-                            <Trans>Bal: {formatCurrencyAmount(selectedCurrencyBalance, 4)}</Trans>
-                          ))}
+                      {Boolean(!hideBalance && currency && selectedCurrencyBalance) &&
+                        (renderBalance?.(selectedCurrencyBalance as CurrencyAmount<Currency>) || (
+                          <Trans>Bal: {formatCurrencyAmount(selectedCurrencyBalance, 4)}</Trans>
+                        ))}
                     </ThemedText.DeprecatedBody>
                   </RowFixed>
                 )}
-              <LoadingOpacityContainer $loading={loading}>
-                {fiatValue && <FiatValue fiatValue={fiatValue} />}
-              </LoadingOpacityContainer>
+                <LoadingOpacityContainer $loading={loading}>
+                  {fiatValue && <FiatValue fiatValue={fiatValue} />}
+                </LoadingOpacityContainer>
               </RowBetween>
             </FiatRow>
           )}
@@ -332,5 +338,5 @@ export default function CurrencyInputPanel({ value,
         />
       )}
     </InputPanel>
-  );
+  )
 }
diff --git a/src/components/FeeSelector/FeeTierPercentageBadge.tsx b/src/components/FeeSelector/FeeTierPercentageBadge.tsx
index b6b433b8..f0a84a7e 100644
--- a/src/components/FeeSelector/FeeTierPercentageBadge.tsx
+++ b/src/components/FeeSelector/FeeTierPercentageBadge.tsx
@@ -16,8 +16,8 @@ export function FeeTierPercentageBadge({
   poolState: PoolState
 }) {
   return (
-    <Badge style={{backgroundColor: '#444', borderRadius: '4px', padding: '2px'}}>
-      <ThemedText.DeprecatedLabel fontSize={10}>
+    <Badge style={{ backgroundColor: '#444', borderRadius: '4px', padding: '4px' }}>
+      <ThemedText.DeprecatedLabel fontSize={10} lineHeight={1}>
         {!distributions || poolState === PoolState.NOT_EXISTS || poolState === PoolState.INVALID ? (
           <Trans>Not created</Trans>
         ) : distributions[feeAmount] !== undefined ? (
diff --git a/src/components/FeeSelector/index.tsx b/src/components/FeeSelector/index.tsx
index 67120f34..eba67ac5 100644
--- a/src/components/FeeSelector/index.tsx
+++ b/src/components/FeeSelector/index.tsx
@@ -34,10 +34,11 @@ const pulse = (color: string) => keyframes`
     box-shadow: 0 0 0 0 ${color};
   }
 `
-const FocusedOutlineCard = styled(Card)<{ pulsing: boolean }>`
-  border: 1px solid ${({ theme }) => theme.surface3};
+const FocusedOutlineCard = styled(Card) <{ pulsing: boolean, feeAmount: FeeAmount }>`
+  border: 1px solid ${({ theme, feeAmount }) => feeAmount ? theme.jediBlue : theme.surface3};
   animation: ${({ pulsing, theme }) => pulsing && pulse(theme.accent1)} 0.6s linear;
   align-self: center;
+  border-radius: 8px;
 `
 
 const Select = styled.div`
@@ -146,24 +147,27 @@ export default function FeeSelector({
   return (
     <AutoColumn gap="16px">
       <DynamicSection gap="md" disabled={disabled}>
-        <FocusedOutlineCard pulsing={pulsing} onAnimationEnd={() => setPulsing(false)}>
+        <FocusedOutlineCard pulsing={pulsing} onAnimationEnd={() => setPulsing(false)} feeAmount={feeAmount}>
           <RowBetween>
             <AutoColumn id="add-liquidity-selected-fee">
               {!feeAmount ? (
                 <>
-                  <ThemedText.DeprecatedLabel>
-                    <Trans>Select Fee tier</Trans>
+                  <ThemedText.DeprecatedLabel style={{ fontFamily: 'DM Sans', fontWeight: '500', fontSize: '16px' }}>
+                    <Trans>Select Fee Tier</Trans>
                   </ThemedText.DeprecatedLabel>
-                  <ThemedText.DeprecatedMain fontWeight={485} fontSize="12px" textAlign="left">
+                  <ThemedText.DeprecatedMain fontSize="12px" textAlign="left" style={{ fontFamily: 'DM Sans' }}>
                     <Trans>The % you will earn in fees.</Trans>
                   </ThemedText.DeprecatedMain>
                 </>
               ) : (
                 <>
                   <ThemedText.DeprecatedLabel className="selected-fee-label">
-                    <Trans>{FEE_AMOUNT_DETAIL[feeAmount].label}% fee tier</Trans>
+                    <Trans>{FEE_AMOUNT_DETAIL[feeAmount].label}% Fee Tier</Trans>
                   </ThemedText.DeprecatedLabel>
-                  <Box style={{ width: 'fit-content', marginTop: '8px', backgroundColor: '#444', borderRadius: '4px' }} className="selected-fee-percentage">
+                  {/* <Box
+                    style={{ width: 'fit-content', marginTop: '8px', backgroundColor: '#444', borderRadius: '4px' }}
+                    className="selected-fee-percentage"
+                  >
                     {distributions && (
                       <FeeTierPercentageBadge
                         distributions={distributions}
@@ -171,18 +175,18 @@ export default function FeeSelector({
                         poolState={poolsByFeeTier[feeAmount]}
                       />
                     )}
-                  </Box>
+                  </Box> */}
                 </>
               )}
             </AutoColumn>
 
-            <ButtonGray onClick={() => setShowOptions(!showOptions)} width="auto" padding="4px" $borderRadius="6px">
+            {/* <ButtonGray onClick={() => setShowOptions(!showOptions)} width="auto" padding="4px" $borderRadius="6px">
               {showOptions ? <Trans>Hide</Trans> : <Trans>Edit</Trans>}
-            </ButtonGray>
+            </ButtonGray> */}
           </RowBetween>
         </FocusedOutlineCard>
 
-        {chainId && showOptions && (
+        {chainId && (
           <Select>
             {[FeeAmount.LOWEST, FeeAmount.LOW, FeeAmount.MEDIUM, FeeAmount.HIGH].map((_feeAmount, i) => {
               const { supportedChains } = FEE_AMOUNT_DETAIL[_feeAmount]
diff --git a/src/components/NavigationTabs/index.tsx b/src/components/NavigationTabs/index.tsx
index 4aefafe2..01795b94 100644
--- a/src/components/NavigationTabs/index.tsx
+++ b/src/components/NavigationTabs/index.tsx
@@ -46,7 +46,7 @@ const StyledArrowLeft = styled(ArrowLeft)`
 export function FindPoolTabs({ origin }: { origin: string }) {
   return (
     <Tabs>
-      <RowBetween style={{ padding: '1rem 1rem 0 1rem', position: 'relative' }}>
+      <RowBetween style={{ padding: '8px', position: 'relative' }}>
         <Link to={origin}>
           <StyledArrowLeft />
         </Link>
@@ -61,6 +61,9 @@ export function FindPoolTabs({ origin }: { origin: string }) {
 const AddRemoveTitleText = styled(ThemedText.SubHeaderLarge)`
   flex: 1;
   margin: auto;
+  font-family: 'Avenir LT Std', sans-serif;
+  font-size: 24px !important;
+  font-weight: 700 !important;
 `
 
 export function AddRemoveTabs({
@@ -90,7 +93,7 @@ export function AddRemoveTabs({
 
   return (
     <Tabs>
-      <RowBetween style={{ padding: '1rem 1rem 0 1rem' }} align="center">
+      <RowBetween style={{ padding: '16px' }} align="center">
         <StyledLink
           to={poolLink}
           onClick={() => {
@@ -108,7 +111,7 @@ export function AddRemoveTabs({
           {creating ? (
             <Trans>Create a pair</Trans>
           ) : adding ? (
-            <Trans>Add liquidity</Trans>
+            <Trans>Add Liquidity</Trans>
           ) : (
             <Trans>Remove liquidity</Trans>
           )}
diff --git a/src/components/NumericalInput/index.tsx b/src/components/NumericalInput/index.tsx
index f619dd49..fa7c1d69 100644
--- a/src/components/NumericalInput/index.tsx
+++ b/src/components/NumericalInput/index.tsx
@@ -102,7 +102,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
         // text-specific options
         type="text"
         pattern="^[0-9]*[.,]?[0-9]*$"
-        placeholder={placeholder || '0'}
+        placeholder={placeholder || '0.0'}
         minLength={1}
         maxLength={79}
         spellCheck="false"
diff --git a/src/components/swap/styled.tsx b/src/components/swap/styled.tsx
index e237c054..20f1a3fd 100644
--- a/src/components/swap/styled.tsx
+++ b/src/components/swap/styled.tsx
@@ -1,13 +1,13 @@
-import { transparentize } from 'polished';
-import { ReactNode } from 'react';
-import { AlertTriangle } from 'react-feather';
-import styled, { css } from 'styled-components';
+import { transparentize } from 'polished'
+import { ReactNode } from 'react'
+import { AlertTriangle } from 'react-feather'
+import styled, { css } from 'styled-components'
 
-import { Z_INDEX } from 'theme/zIndex';
-import { AutoColumn } from '../Column';
+import { Z_INDEX } from 'theme/zIndex'
+import { AutoColumn } from '../Column'
 
 export const PageWrapper = styled.div`
-  padding: 68px 8px 0px;
+  padding: 0px 8px 0px;
   max-width: 480px;
   width: 100%;
 
@@ -18,7 +18,7 @@ export const PageWrapper = styled.div`
   @media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.sm}px`}) {
     padding-top: 20px;
   }
-`;
+`
 
 // Mostly copied from `AppBody` but it was getting too hard to maintain backwards compatibility.
 const SwapWrapperOuter = styled.main`
@@ -26,37 +26,41 @@ const SwapWrapperOuter = styled.main`
   z-index: ${Z_INDEX.default};
   transition: transform 250ms ease;
   border-radius: 16px;
-`;
+`
 
 const SwapWrapperInner = styled.div`
-  border-radius:16px;
+  border-radius: 16px;
   z-index: -1;
   padding: 40px 32px;
   position: relative;
 
   backdrop-filter: blur(38px);
   background-color: rgba(196, 196, 196, 0.01);
-  box-shadow: 0px 0.76977px 30.79088px 0px rgba(227, 222, 255, 0.20) inset, 0px 3.07909px 13.8559px 0px rgba(154, 146, 210, 0.30) inset, 0px 75.43767px 76.9772px -36.94907px rgba(202, 172, 255, 0.30) inset, 0px -63.12132px 52.3445px -49.26542px rgba(96, 68, 144, 0.30) inset, 0px 5.38841px 8.46749px -3.07909px #FFF inset, 0px 30.02111px 43.10724px -27.7118px rgba(255, 255, 255, 0.50) inset;
-  
+  box-shadow: 0px 0.76977px 30.79088px 0px rgba(227, 222, 255, 0.2) inset,
+    0px 3.07909px 13.8559px 0px rgba(154, 146, 210, 0.3) inset,
+    0px 75.43767px 76.9772px -36.94907px rgba(202, 172, 255, 0.3) inset,
+    0px -63.12132px 52.3445px -49.26542px rgba(96, 68, 144, 0.3) inset, 0px 5.38841px 8.46749px -3.07909px #fff inset,
+    0px 30.02111px 43.10724px -27.7118px rgba(255, 255, 255, 0.5) inset;
+
   &:before {
-    content: "";
+    content: '';
     position: absolute;
     inset: 0;
     border-radius: 16px;
-    background: linear-gradient(270deg, #EF35FF, #50D5FF);
+    background: linear-gradient(270deg, #ef35ff, #50d5ff);
     mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
     -webkit-mask-composite: xor;
     mask-composite: exclude;
     pointer-events: none;
     padding: 2px;
   }
-`;
+`
 
 export const SwapWrapper = (props: React.ComponentProps<typeof SwapWrapperOuter>) => (
   <SwapWrapperOuter {...props}>
     <SwapWrapperInner>{props.children}</SwapWrapperInner>
   </SwapWrapperOuter>
-);
+)
 
 const springDownKeyframes = `@keyframes spring-down {
   0% { transform: translateY(-80px); }
@@ -64,12 +68,12 @@ const springDownKeyframes = `@keyframes spring-down {
   50% { transform: translateY(-1px); }
   75% { transform: translateY(0px); }
   100% { transform: translateY(0px); }
-}`;
+}`
 
 const backUpKeyframes = `@keyframes back-up {
   0% { transform: translateY(0px); }
   100% { transform: translateY(-80px); }
-}`;
+}`
 
 export const ArrowWrapper = styled.div<{ clickable: boolean }>`
   border-radius: 4px;
@@ -81,19 +85,24 @@ export const ArrowWrapper = styled.div<{ clickable: boolean }>`
   background-color: ${({ theme }) => theme.surface4};
   border-color: ${({ theme }) => theme.surface1};
   background: rgba(196, 196, 196, 0.01);
-  box-shadow: 0px 0.76977px 30.79088px 0px rgba(227, 222, 255, 0.20) inset, 0px 3.07909px 13.8559px 0px rgba(154, 146, 210, 0.30) inset, 0px 75.43767px 76.9772px -36.94907px rgba(202, 172, 255, 0.30) inset, 0px -63.12132px 52.3445px -49.26542px rgba(96, 68, 144, 0.30) inset, 0px 5.38841px 8.46749px -3.07909px #FFF inset, 0px 30.02111px 43.10724px -27.7118px rgba(255, 255, 255, 0.50) inset;
+  box-shadow: 0px 0.76977px 30.79088px 0px rgba(227, 222, 255, 0.2) inset,
+    0px 3.07909px 13.8559px 0px rgba(154, 146, 210, 0.3) inset,
+    0px 75.43767px 76.9772px -36.94907px rgba(202, 172, 255, 0.3) inset,
+    0px -63.12132px 52.3445px -49.26542px rgba(96, 68, 144, 0.3) inset, 0px 5.38841px 8.46749px -3.07909px #fff inset,
+    0px 30.02111px 43.10724px -27.7118px rgba(255, 255, 255, 0.5) inset;
   backdrop-filter: blur(38.48860168457031px);
-  
+
   z-index: 2;
-  ${({ clickable }) => (clickable
-    ? css`
+  ${({ clickable }) =>
+    clickable
+      ? css`
           :hover {
             cursor: pointer;
             opacity: 0.8;
           }
         `
-    : null)}
-`;
+      : null}
+`
 
 // styles
 export const Dots = styled.span`
@@ -115,7 +124,7 @@ export const Dots = styled.span`
       content: '...';
     }
   }
-`;
+`
 
 const SwapCallbackErrorInner = styled.div`
   background-color: ${({ theme }) => transparentize(0.9, theme.critical)};
@@ -133,7 +142,7 @@ const SwapCallbackErrorInner = styled.div`
     margin: 0;
     font-weight: 535;
   }
-`;
+`
 
 const SwapCallbackErrorInnerAlertTriangle = styled.div`
   background-color: ${({ theme }) => transparentize(0.9, theme.critical)};
@@ -144,7 +153,7 @@ const SwapCallbackErrorInnerAlertTriangle = styled.div`
   border-radius: 12px;
   min-width: 48px;
   height: 48px;
-`;
+`
 
 export function SwapCallbackError({ error }: { error: ReactNode }) {
   return (
@@ -154,7 +163,7 @@ export function SwapCallbackError({ error }: { error: ReactNode }) {
       </SwapCallbackErrorInnerAlertTriangle>
       <p style={{ wordBreak: 'break-word' }}>{error}</p>
     </SwapCallbackErrorInner>
-  );
+  )
 }
 
 export const SwapShowAcceptChanges = styled(AutoColumn)`
@@ -163,4 +172,4 @@ export const SwapShowAcceptChanges = styled(AutoColumn)`
   padding: 12px;
   border-radius: 12px;
   margin-top: 8px;
-`;
+`
diff --git a/src/pages/AddLiquidity/index.tsx b/src/pages/AddLiquidity/index.tsx
index a5c02e08..12404752 100644
--- a/src/pages/AddLiquidity/index.tsx
+++ b/src/pages/AddLiquidity/index.tsx
@@ -1,125 +1,132 @@
-import { BigNumber } from '@ethersproject/bignumber';
-import type { TransactionResponse } from '@ethersproject/providers';
-import { Trans } from '@lingui/macro';
-import { BrowserEvent, InterfaceElementName, InterfaceEventName, LiquidityEventName } from '@uniswap/analytics-events';
-import { Currency, CurrencyAmount, NONFUNGIBLE_POSITION_MANAGER_ADDRESSES, Percent } from '@uniswap/sdk-core';
-import { FeeAmount, NonfungiblePositionManager } from '@uniswap/v3-sdk';
-import { useWeb3React } from '@web3-react/core';
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { AlertTriangle } from 'react-feather';
-import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
-import { Text } from 'rebass';
-import styled, { useTheme } from 'styled-components';
-
-import { sendAnalyticsEvent, TraceEvent, useTrace } from 'analytics';
-import { useToggleAccountDrawer } from 'components/AccountDrawer';
-import OwnershipWarning from 'components/addLiquidity/OwnershipWarning';
-import UnsupportedCurrencyFooter from 'components/swap/UnsupportedCurrencyFooter';
-import { isSupportedChain } from 'constants/chains';
-import usePrevious from 'hooks/usePrevious';
-import { useSingleCallResult } from 'lib/hooks/multicall';
-import { BodyWrapper } from 'pages/AppBody';
-import { PositionPageUnsupportedContent } from 'pages/Pool/PositionPage';
-import { useRangeHopCallbacks,
+import { BigNumber } from '@ethersproject/bignumber'
+import type { TransactionResponse } from '@ethersproject/providers'
+import { Trans } from '@lingui/macro'
+import { BrowserEvent, InterfaceElementName, InterfaceEventName, LiquidityEventName } from '@uniswap/analytics-events'
+import { Currency, CurrencyAmount, NONFUNGIBLE_POSITION_MANAGER_ADDRESSES, Percent } from '@uniswap/sdk-core'
+import { FeeAmount, NonfungiblePositionManager } from '@uniswap/v3-sdk'
+import { useWeb3React } from '@web3-react/core'
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { AlertTriangle } from 'react-feather'
+import { useNavigate, useParams, useSearchParams } from 'react-router-dom'
+import { Text } from 'rebass'
+import styled, { useTheme } from 'styled-components'
+
+import { sendAnalyticsEvent, TraceEvent, useTrace } from 'analytics'
+import { useToggleAccountDrawer } from 'components/AccountDrawer'
+import OwnershipWarning from 'components/addLiquidity/OwnershipWarning'
+import UnsupportedCurrencyFooter from 'components/swap/UnsupportedCurrencyFooter'
+import { isSupportedChain } from 'constants/chains'
+import usePrevious from 'hooks/usePrevious'
+import { useSingleCallResult } from 'lib/hooks/multicall'
+import { BodyWrapper } from 'pages/AppBody'
+import { PositionPageUnsupportedContent } from 'pages/Pool/PositionPage'
+import {
+  useRangeHopCallbacks,
   useV3DerivedMintInfo,
   useV3MintActionHandlers,
-  useV3MintState } from 'state/mint/v3/hooks';
-import { ThemedText } from 'theme/components';
-import { addressesAreEquivalent } from 'utils/addressesAreEquivalent';
-import { WrongChainError } from 'utils/errors';
-import { ButtonError, ButtonLight, ButtonPrimary, ButtonText } from '../../components/Button';
-import { BlueCard, LightCard, OutlineCard, YellowCard } from '../../components/Card';
-import { AutoColumn } from '../../components/Column';
-import CurrencyInputPanel from '../../components/CurrencyInputPanel';
-import FeeSelector from '../../components/FeeSelector';
-import HoverInlineText from '../../components/HoverInlineText';
-import LiquidityChartRangeInput from '../../components/LiquidityChartRangeInput';
-import { AddRemoveTabs } from '../../components/NavigationTabs';
-import { PositionPreview } from '../../components/PositionPreview';
-import RangeSelector from '../../components/RangeSelector';
-import PresetsButtons from '../../components/RangeSelector/PresetsButtons';
-import RateToggle from '../../components/RateToggle';
-import Row, { RowBetween, RowFixed } from '../../components/Row';
-import { SwitchLocaleLink } from '../../components/SwitchLocaleLink';
-import TransactionConfirmationModal, { ConfirmationModalContent } from '../../components/TransactionConfirmationModal';
-import { ZERO_PERCENT } from '../../constants/misc';
-import { WRAPPED_NATIVE_CURRENCY } from '../../constants/tokens';
-import { useCurrency } from '../../hooks/Tokens';
-import { ApprovalState, useApproveCallback } from '../../hooks/useApproveCallback';
-import { useArgentWalletContract } from '../../hooks/useArgentWalletContract';
-import { useV3NFTPositionManagerContract } from '../../hooks/useContract';
-import { useDerivedPositionInfo } from '../../hooks/useDerivedPositionInfo';
-import { useIsSwapUnsupported } from '../../hooks/useIsSwapUnsupported';
-import { useStablecoinValue } from '../../hooks/useStablecoinPrice';
-import useTransactionDeadline from '../../hooks/useTransactionDeadline';
-import { useV3PositionFromTokenId } from '../../hooks/useV3Positions';
-import { Bound, Field } from '../../state/mint/v3/actions';
-import { useTransactionAdder } from '../../state/transactions/hooks';
-import { TransactionInfo, TransactionType } from '../../state/transactions/types';
-import { useUserSlippageToleranceWithDefault } from '../../state/user/hooks';
-import approveAmountCalldata from '../../utils/approveAmountCalldata';
-import { calculateGasMargin } from '../../utils/calculateGasMargin';
-import { currencyId } from '../../utils/currencyId';
-import { maxAmountSpend } from '../../utils/maxAmountSpend';
-import { Dots } from '../Pool/styled';
-import { Review } from './Review';
-import { DynamicSection, MediumOnly, ResponsiveTwoColumns, ScrollablePage, StyledInput, Wrapper } from './styled';
-
-const DEFAULT_ADD_IN_RANGE_SLIPPAGE_TOLERANCE = new Percent(50, 10_000);
-
-const StyledBodyWrapper = styled(BodyWrapper)<{ $hasExistingPosition: boolean }>`
+  useV3MintState,
+} from 'state/mint/v3/hooks'
+import { ThemedText } from 'theme/components'
+import { addressesAreEquivalent } from 'utils/addressesAreEquivalent'
+import { WrongChainError } from 'utils/errors'
+import { ButtonError, ButtonLight, ButtonPrimary, ButtonText } from '../../components/Button'
+import { BlueCard, LightCard, OutlineCard, YellowCard } from '../../components/Card'
+import { AutoColumn } from '../../components/Column'
+import CurrencyInputPanel from '../../components/CurrencyInputPanel'
+import FeeSelector from '../../components/FeeSelector'
+import HoverInlineText from '../../components/HoverInlineText'
+import LiquidityChartRangeInput from '../../components/LiquidityChartRangeInput'
+import { AddRemoveTabs } from '../../components/NavigationTabs'
+import { PositionPreview } from '../../components/PositionPreview'
+import RangeSelector from '../../components/RangeSelector'
+import PresetsButtons from '../../components/RangeSelector/PresetsButtons'
+import RateToggle from '../../components/RateToggle'
+import Row, { RowBetween, RowFixed } from '../../components/Row'
+import { SwitchLocaleLink } from '../../components/SwitchLocaleLink'
+import TransactionConfirmationModal, { ConfirmationModalContent } from '../../components/TransactionConfirmationModal'
+import { ZERO_PERCENT } from '../../constants/misc'
+import { WRAPPED_NATIVE_CURRENCY } from '../../constants/tokens'
+import { useCurrency } from '../../hooks/Tokens'
+import { ApprovalState, useApproveCallback } from '../../hooks/useApproveCallback'
+import { useArgentWalletContract } from '../../hooks/useArgentWalletContract'
+import { useV3NFTPositionManagerContract } from '../../hooks/useContract'
+import { useDerivedPositionInfo } from '../../hooks/useDerivedPositionInfo'
+import { useIsSwapUnsupported } from '../../hooks/useIsSwapUnsupported'
+import { useStablecoinValue } from '../../hooks/useStablecoinPrice'
+import useTransactionDeadline from '../../hooks/useTransactionDeadline'
+import { useV3PositionFromTokenId } from '../../hooks/useV3Positions'
+import { Bound, Field } from '../../state/mint/v3/actions'
+import { useTransactionAdder } from '../../state/transactions/hooks'
+import { TransactionInfo, TransactionType } from '../../state/transactions/types'
+import { useUserSlippageToleranceWithDefault } from '../../state/user/hooks'
+import approveAmountCalldata from '../../utils/approveAmountCalldata'
+import { calculateGasMargin } from '../../utils/calculateGasMargin'
+import { currencyId } from '../../utils/currencyId'
+import { maxAmountSpend } from '../../utils/maxAmountSpend'
+import { Dots } from '../Pool/styled'
+import { Review } from './Review'
+import { DynamicSection, MediumOnly, ResponsiveTwoColumns, ScrollablePage, StyledInput, Wrapper } from './styled'
+
+const DEFAULT_ADD_IN_RANGE_SLIPPAGE_TOLERANCE = new Percent(50, 10_000)
+
+const StyledBodyWrapper = styled(BodyWrapper) <{ $hasExistingPosition: boolean }>`
   padding: ${({ $hasExistingPosition }) => ($hasExistingPosition ? '10px' : 0)};
   max-width: 640px;
-`;
+`
 
 export default function AddLiquidityWrapper() {
-  const { chainId } = useWeb3React();
+  const { chainId } = useWeb3React()
   if (isSupportedChain(chainId)) {
-    return <AddLiquidity />;
+    return <AddLiquidity />
   }
-  return <PositionPageUnsupportedContent />;
+  return <PositionPageUnsupportedContent />
 }
 
 function AddLiquidity() {
-  const navigate = useNavigate();
-  const { currencyIdA,
+  const navigate = useNavigate()
+  const {
+    currencyIdA,
     currencyIdB,
     feeAmount: feeAmountFromUrl,
-    tokenId } = useParams<{
+    tokenId,
+  } = useParams<{
     currencyIdA?: string
     currencyIdB?: string
     feeAmount?: string
     tokenId?: string
-  }>();
-  const { account, chainId, provider } = useWeb3React();
-  const theme = useTheme();
-  const trace = useTrace();
+  }>()
+  const { account, chainId, provider } = useWeb3React()
+  const theme = useTheme()
+  const trace = useTrace()
 
-  const toggleWalletDrawer = useToggleAccountDrawer(); // toggle wallet when disconnected
-  const addTransaction = useTransactionAdder();
-  const positionManager = useV3NFTPositionManagerContract();
+  const toggleWalletDrawer = useToggleAccountDrawer() // toggle wallet when disconnected
+  const addTransaction = useTransactionAdder()
+  const positionManager = useV3NFTPositionManagerContract()
 
   // check for existing position if tokenId in url
   const { position: existingPositionDetails, loading: positionLoading } = useV3PositionFromTokenId(
-    tokenId ? BigNumber.from(tokenId) : undefined,
-  );
-  const hasExistingPosition = !!existingPositionDetails && !positionLoading;
-  const { position: existingPosition } = useDerivedPositionInfo(existingPositionDetails);
+    tokenId ? BigNumber.from(tokenId) : undefined
+  )
+  const hasExistingPosition = !!existingPositionDetails && !positionLoading
+  const { position: existingPosition } = useDerivedPositionInfo(existingPositionDetails)
 
   // fee selection from url
-  const feeAmount: FeeAmount | undefined = feeAmountFromUrl && Object.values(FeeAmount).includes(parseFloat(feeAmountFromUrl))
-    ? parseFloat(feeAmountFromUrl)
-    : undefined;
+  const feeAmount: FeeAmount | undefined =
+    feeAmountFromUrl && Object.values(FeeAmount).includes(parseFloat(feeAmountFromUrl))
+      ? parseFloat(feeAmountFromUrl)
+      : undefined
 
-  const baseCurrency = useCurrency(currencyIdA);
-  const currencyB = useCurrency(currencyIdB);
+  const baseCurrency = useCurrency(currencyIdA)
+  const currencyB = useCurrency(currencyIdB)
   // prevent an error if they input ETH/WETH
-  const quoteCurrency = baseCurrency && currencyB && baseCurrency.wrapped.equals(currencyB.wrapped) ? undefined : currencyB;
+  const quoteCurrency =
+    baseCurrency && currencyB && baseCurrency.wrapped.equals(currencyB.wrapped) ? undefined : currencyB
 
   // mint state
-  const { independentField, typedValue, startPriceTypedValue } = useV3MintState();
+  const { independentField, typedValue, startPriceTypedValue } = useV3MintState()
 
-  const { pool,
+  const {
+    pool,
     ticks,
     dependentField,
     price,
@@ -137,37 +144,39 @@ function AddLiquidity() {
     depositADisabled,
     depositBDisabled,
     invertPrice,
-    ticksAtLimit } = useV3DerivedMintInfo(
+    ticksAtLimit,
+  } = useV3DerivedMintInfo(
     baseCurrency ?? undefined,
     quoteCurrency ?? undefined,
     feeAmount,
     baseCurrency ?? undefined,
-    existingPosition,
-  );
+    existingPosition
+  )
 
-  const { onFieldAInput, onFieldBInput, onLeftRangeInput, onRightRangeInput, onStartPriceInput } = useV3MintActionHandlers(noLiquidity);
+  const { onFieldAInput, onFieldBInput, onLeftRangeInput, onRightRangeInput, onStartPriceInput } =
+    useV3MintActionHandlers(noLiquidity)
 
-  const isValid = !errorMessage && !invalidRange;
+  const isValid = !errorMessage && !invalidRange
 
   // modal and loading
-  const [showConfirm, setShowConfirm] = useState<boolean>(false);
-  const [attemptingTxn, setAttemptingTxn] = useState<boolean>(false); // clicked confirm
+  const [showConfirm, setShowConfirm] = useState<boolean>(false)
+  const [attemptingTxn, setAttemptingTxn] = useState<boolean>(false) // clicked confirm
 
   // txn values
-  const deadline = useTransactionDeadline(); // custom from users settings
+  const deadline = useTransactionDeadline() // custom from users settings
 
-  const [txHash, setTxHash] = useState<string>('');
+  const [txHash, setTxHash] = useState<string>('')
 
   // get formatted amounts
   const formattedAmounts = {
     [independentField]: typedValue,
     [dependentField]: parsedAmounts[dependentField]?.toSignificant(6) ?? '',
-  };
+  }
 
   const usdcValues = {
     [Field.CURRENCY_A]: useStablecoinValue(parsedAmounts[Field.CURRENCY_A]),
     [Field.CURRENCY_B]: useStablecoinValue(parsedAmounts[Field.CURRENCY_B]),
-  };
+  }
 
   // get the max amounts user can add
   const maxAmounts: { [field in Field]?: CurrencyAmount<Currency> } = [Field.CURRENCY_A, Field.CURRENCY_B].reduce(
@@ -175,66 +184,69 @@ function AddLiquidity() {
       ...accumulator,
       [field]: maxAmountSpend(currencyBalances[field]),
     }),
-    {},
-  );
+    {}
+  )
 
   const atMaxAmounts: { [field in Field]?: CurrencyAmount<Currency> } = [Field.CURRENCY_A, Field.CURRENCY_B].reduce(
     (accumulator, field) => ({
       ...accumulator,
       [field]: maxAmounts[field]?.equalTo(parsedAmounts[field] ?? '0'),
     }),
-    {},
-  );
+    {}
+  )
 
-  const argentWalletContract = useArgentWalletContract();
+  const argentWalletContract = useArgentWalletContract()
 
   // check whether the user has approved the router on the tokens
   const [approvalA, approveACallback] = useApproveCallback(
     argentWalletContract ? undefined : parsedAmounts[Field.CURRENCY_A],
-    chainId ? NONFUNGIBLE_POSITION_MANAGER_ADDRESSES[chainId] : undefined,
-  );
+    chainId ? NONFUNGIBLE_POSITION_MANAGER_ADDRESSES[chainId] : undefined
+  )
   const [approvalB, approveBCallback] = useApproveCallback(
     argentWalletContract ? undefined : parsedAmounts[Field.CURRENCY_B],
-    chainId ? NONFUNGIBLE_POSITION_MANAGER_ADDRESSES[chainId] : undefined,
-  );
+    chainId ? NONFUNGIBLE_POSITION_MANAGER_ADDRESSES[chainId] : undefined
+  )
 
   const allowedSlippage = useUserSlippageToleranceWithDefault(
-    outOfRange ? ZERO_PERCENT : DEFAULT_ADD_IN_RANGE_SLIPPAGE_TOLERANCE,
-  );
+    outOfRange ? ZERO_PERCENT : DEFAULT_ADD_IN_RANGE_SLIPPAGE_TOLERANCE
+  )
 
   async function onAdd() {
-    if (!chainId || !provider || !account) { return; }
+    if (!chainId || !provider || !account) {
+      return
+    }
 
     if (!positionManager || !baseCurrency || !quoteCurrency) {
-      return;
+      return
     }
 
     if (position && account && deadline) {
-      const useNative = baseCurrency.isNative ? baseCurrency : quoteCurrency.isNative ? quoteCurrency : undefined;
-      const { calldata, value } = hasExistingPosition && tokenId
-        ? NonfungiblePositionManager.addCallParameters(position, {
-          tokenId,
-          slippageTolerance: allowedSlippage,
-          deadline: deadline.toString(),
-          useNative,
-        })
-        : NonfungiblePositionManager.addCallParameters(position, {
-          slippageTolerance: allowedSlippage,
-          recipient: account,
-          deadline: deadline.toString(),
-          useNative,
-          createPool: noLiquidity,
-        });
+      const useNative = baseCurrency.isNative ? baseCurrency : quoteCurrency.isNative ? quoteCurrency : undefined
+      const { calldata, value } =
+        hasExistingPosition && tokenId
+          ? NonfungiblePositionManager.addCallParameters(position, {
+            tokenId,
+            slippageTolerance: allowedSlippage,
+            deadline: deadline.toString(),
+            useNative,
+          })
+          : NonfungiblePositionManager.addCallParameters(position, {
+            slippageTolerance: allowedSlippage,
+            recipient: account,
+            deadline: deadline.toString(),
+            useNative,
+            createPool: noLiquidity,
+          })
 
       let txn: { to: string; data: string; value: string } = {
         to: NONFUNGIBLE_POSITION_MANAGER_ADDRESSES[chainId],
         data: calldata,
         value,
-      };
+      }
 
       if (argentWalletContract) {
-        const amountA = parsedAmounts[Field.CURRENCY_A];
-        const amountB = parsedAmounts[Field.CURRENCY_B];
+        const amountA = parsedAmounts[Field.CURRENCY_A]
+        const amountB = parsedAmounts[Field.CURRENCY_B]
         const batch = [
           ...(amountA && amountA.currency.isToken
             ? [approveAmountCalldata(amountA, NONFUNGIBLE_POSITION_MANAGER_ADDRESSES[chainId])]
@@ -247,19 +259,21 @@ function AddLiquidity() {
             data: txn.data,
             value: txn.value,
           },
-        ];
-        const data = argentWalletContract.interface.encodeFunctionData('wc_multiCall', [batch]);
+        ]
+        const data = argentWalletContract.interface.encodeFunctionData('wc_multiCall', [batch])
         txn = {
           to: argentWalletContract.address,
           data,
           value: '0x0',
-        };
+        }
       }
 
-      const connectedChainId = await provider.getSigner().getChainId();
-      if (chainId !== connectedChainId) { throw new WrongChainError(); }
+      const connectedChainId = await provider.getSigner().getChainId()
+      if (chainId !== connectedChainId) {
+        throw new WrongChainError()
+      }
 
-      setAttemptingTxn(true);
+      setAttemptingTxn(true)
 
       provider
         .getSigner()
@@ -268,13 +282,13 @@ function AddLiquidity() {
           const newTxn = {
             ...txn,
             gasLimit: calculateGasMargin(estimate),
-          };
+          }
 
           return provider
             .getSigner()
             .sendTransaction(newTxn)
             .then((response: TransactionResponse) => {
-              setAttemptingTxn(false);
+              setAttemptingTxn(false)
               const transactionInfo: TransactionInfo = {
                 type: TransactionType.ADD_LIQUIDITY_V3_POOL,
                 baseCurrencyId: currencyId(baseCurrency),
@@ -283,262 +297,270 @@ function AddLiquidity() {
                 expectedAmountBaseRaw: parsedAmounts[Field.CURRENCY_A]?.quotient?.toString() ?? '0',
                 expectedAmountQuoteRaw: parsedAmounts[Field.CURRENCY_B]?.quotient?.toString() ?? '0',
                 feeAmount: position.pool.fee,
-              };
-              addTransaction(response, transactionInfo);
-              setTxHash(response.hash);
+              }
+              addTransaction(response, transactionInfo)
+              setTxHash(response.hash)
               sendAnalyticsEvent(LiquidityEventName.ADD_LIQUIDITY_SUBMITTED, {
                 label: [currencies[Field.CURRENCY_A]?.symbol, currencies[Field.CURRENCY_B]?.symbol].join('/'),
                 ...trace,
                 ...transactionInfo,
-              });
-            });
+              })
+            })
         })
         .catch((error) => {
-          console.error('Failed to send transaction', error);
-          setAttemptingTxn(false);
+          console.error('Failed to send transaction', error)
+          setAttemptingTxn(false)
           // we only care if the error is something _other_ than the user rejected the tx
           if (error?.code !== 4001) {
-            console.error(error);
+            console.error(error)
           }
-        });
+        })
     } else {
-
     }
   }
 
   const handleCurrencySelect = useCallback(
     (currencyNew: Currency, currencyIdOther?: string): (string | undefined)[] => {
-      const currencyIdNew = currencyId(currencyNew);
+      const currencyIdNew = currencyId(currencyNew)
 
       if (currencyIdNew === currencyIdOther) {
         // not ideal, but for now clobber the other if the currency ids are equal
-        return [currencyIdNew, undefined];
+        return [currencyIdNew, undefined]
       }
       // prevent weth + eth
-      const isETHOrWETHNew = currencyIdNew === 'ETH'
-          || (chainId !== undefined && currencyIdNew === WRAPPED_NATIVE_CURRENCY[chainId]?.address);
-      const isETHOrWETHOther = currencyIdOther !== undefined
-          && (currencyIdOther === 'ETH'
-            || (chainId !== undefined && currencyIdOther === WRAPPED_NATIVE_CURRENCY[chainId]?.address));
+      const isETHOrWETHNew =
+        currencyIdNew === 'ETH' ||
+        (chainId !== undefined && currencyIdNew === WRAPPED_NATIVE_CURRENCY[chainId]?.address)
+      const isETHOrWETHOther =
+        currencyIdOther !== undefined &&
+        (currencyIdOther === 'ETH' ||
+          (chainId !== undefined && currencyIdOther === WRAPPED_NATIVE_CURRENCY[chainId]?.address))
 
       if (isETHOrWETHNew && isETHOrWETHOther) {
-        return [currencyIdNew, undefined];
+        return [currencyIdNew, undefined]
       }
-      return [currencyIdNew, currencyIdOther];
+      return [currencyIdNew, currencyIdOther]
     },
-    [chainId],
-  );
+    [chainId]
+  )
 
   const handleCurrencyASelect = useCallback(
     (currencyANew: Currency) => {
-      const [idA, idB] = handleCurrencySelect(currencyANew, currencyIdB);
+      const [idA, idB] = handleCurrencySelect(currencyANew, currencyIdB)
       if (idB === undefined) {
-        navigate(`/add/${idA}`);
+        navigate(`/add/${idA}`)
       } else {
-        navigate(`/add/${idA}/${idB}`);
+        navigate(`/add/${idA}/${idB}`)
       }
     },
-    [handleCurrencySelect, currencyIdB, navigate],
-  );
+    [handleCurrencySelect, currencyIdB, navigate]
+  )
 
   const handleCurrencyBSelect = useCallback(
     (currencyBNew: Currency) => {
-      const [idB, idA] = handleCurrencySelect(currencyBNew, currencyIdA);
+      const [idB, idA] = handleCurrencySelect(currencyBNew, currencyIdA)
       if (idA === undefined) {
-        navigate(`/add/${idB}`);
+        navigate(`/add/${idB}`)
       } else {
-        navigate(`/add/${idA}/${idB}`);
+        navigate(`/add/${idA}/${idB}`)
       }
     },
-    [handleCurrencySelect, currencyIdA, navigate],
-  );
+    [handleCurrencySelect, currencyIdA, navigate]
+  )
 
   const handleFeePoolSelect = useCallback(
     (newFeeAmount: FeeAmount) => {
-      onLeftRangeInput('');
-      onRightRangeInput('');
-      navigate(`/add/${currencyIdA}/${currencyIdB}/${newFeeAmount}`);
+      onLeftRangeInput('')
+      onRightRangeInput('')
+      navigate(`/add/${currencyIdA}/${currencyIdB}/${newFeeAmount}`)
     },
-    [currencyIdA, currencyIdB, navigate, onLeftRangeInput, onRightRangeInput],
-  );
+    [currencyIdA, currencyIdB, navigate, onLeftRangeInput, onRightRangeInput]
+  )
 
   const handleDismissConfirmation = useCallback(() => {
-    setShowConfirm(false);
+    setShowConfirm(false)
     // if there was a tx hash, we want to clear the input
     if (txHash) {
-      onFieldAInput('');
+      onFieldAInput('')
       // dont jump to pool page if creating
-      navigate('/pools');
+      navigate('/pools')
     }
-    setTxHash('');
-  }, [navigate, onFieldAInput, txHash]);
+    setTxHash('')
+  }, [navigate, onFieldAInput, txHash])
 
-  const addIsUnsupported = useIsSwapUnsupported(currencies?.CURRENCY_A, currencies?.CURRENCY_B);
+  const addIsUnsupported = useIsSwapUnsupported(currencies?.CURRENCY_A, currencies?.CURRENCY_B)
 
   const clearAll = useCallback(() => {
-    onFieldAInput('');
-    onFieldBInput('');
-    onLeftRangeInput('');
-    onRightRangeInput('');
-    navigate('/add');
-  }, [navigate, onFieldAInput, onFieldBInput, onLeftRangeInput, onRightRangeInput]);
+    onFieldAInput('')
+    onFieldBInput('')
+    onLeftRangeInput('')
+    onRightRangeInput('')
+    navigate('/add')
+  }, [navigate, onFieldAInput, onFieldBInput, onLeftRangeInput, onRightRangeInput])
 
   // get value and prices at ticks
-  const { [Bound.LOWER]: tickLower, [Bound.UPPER]: tickUpper } = ticks;
-  const { [Bound.LOWER]: priceLower, [Bound.UPPER]: priceUpper } = pricesAtTicks;
+  const { [Bound.LOWER]: tickLower, [Bound.UPPER]: tickUpper } = ticks
+  const { [Bound.LOWER]: priceLower, [Bound.UPPER]: priceUpper } = pricesAtTicks
 
-  const { getDecrementLower, getIncrementLower, getDecrementUpper, getIncrementUpper, getSetFullRange } = useRangeHopCallbacks(baseCurrency ?? undefined, quoteCurrency ?? undefined, feeAmount, tickLower, tickUpper, pool);
+  const { getDecrementLower, getIncrementLower, getDecrementUpper, getIncrementUpper, getSetFullRange } =
+    useRangeHopCallbacks(baseCurrency ?? undefined, quoteCurrency ?? undefined, feeAmount, tickLower, tickUpper, pool)
 
   // we need an existence check on parsed amounts for single-asset deposits
-  const showApprovalA = !argentWalletContract && approvalA !== ApprovalState.APPROVED && !!parsedAmounts[Field.CURRENCY_A];
-  const showApprovalB = !argentWalletContract && approvalB !== ApprovalState.APPROVED && !!parsedAmounts[Field.CURRENCY_B];
+  const showApprovalA =
+    !argentWalletContract && approvalA !== ApprovalState.APPROVED && !!parsedAmounts[Field.CURRENCY_A]
+  const showApprovalB =
+    !argentWalletContract && approvalB !== ApprovalState.APPROVED && !!parsedAmounts[Field.CURRENCY_B]
 
-  const pendingText = `Supplying ${!depositADisabled ? parsedAmounts[Field.CURRENCY_A]?.toSignificant(6) : ''} ${
-    !depositADisabled ? currencies[Field.CURRENCY_A]?.symbol : ''
-  } ${!outOfRange ? 'and' : ''} ${!depositBDisabled ? parsedAmounts[Field.CURRENCY_B]?.toSignificant(6) : ''} ${
-    !depositBDisabled ? currencies[Field.CURRENCY_B]?.symbol : ''
-  }`;
+  const pendingText = `Supplying ${!depositADisabled ? parsedAmounts[Field.CURRENCY_A]?.toSignificant(6) : ''} ${!depositADisabled ? currencies[Field.CURRENCY_A]?.symbol : ''
+    } ${!outOfRange ? 'and' : ''} ${!depositBDisabled ? parsedAmounts[Field.CURRENCY_B]?.toSignificant(6) : ''} ${!depositBDisabled ? currencies[Field.CURRENCY_B]?.symbol : ''
+    }`
 
-  const [searchParams, setSearchParams] = useSearchParams();
+  const [searchParams, setSearchParams] = useSearchParams()
 
   const handleSetFullRange = useCallback(() => {
-    getSetFullRange();
+    getSetFullRange()
 
-    const minPrice = pricesAtLimit[Bound.LOWER];
-    if (minPrice) { searchParams.set('minPrice', minPrice.toSignificant(5)); }
-    const maxPrice = pricesAtLimit[Bound.UPPER];
-    if (maxPrice) { searchParams.set('maxPrice', maxPrice.toSignificant(5)); }
-    setSearchParams(searchParams);
-  }, [getSetFullRange, pricesAtLimit, searchParams, setSearchParams]);
+    const minPrice = pricesAtLimit[Bound.LOWER]
+    if (minPrice) {
+      searchParams.set('minPrice', minPrice.toSignificant(5))
+    }
+    const maxPrice = pricesAtLimit[Bound.UPPER]
+    if (maxPrice) {
+      searchParams.set('maxPrice', maxPrice.toSignificant(5))
+    }
+    setSearchParams(searchParams)
+  }, [getSetFullRange, pricesAtLimit, searchParams, setSearchParams])
 
   // START: sync values with query string
-  const oldSearchParams = usePrevious(searchParams);
+  const oldSearchParams = usePrevious(searchParams)
   // use query string as an input to onInput handlers
   useEffect(() => {
-    const minPrice = searchParams.get('minPrice');
-    const oldMinPrice = oldSearchParams?.get('minPrice');
+    const minPrice = searchParams.get('minPrice')
+    const oldMinPrice = oldSearchParams?.get('minPrice')
     if (
-      minPrice
-      && typeof minPrice === 'string'
-      && !isNaN(minPrice as any)
-      && (!oldMinPrice || oldMinPrice !== minPrice)
+      minPrice &&
+      typeof minPrice === 'string' &&
+      !isNaN(minPrice as any) &&
+      (!oldMinPrice || oldMinPrice !== minPrice)
     ) {
-      onLeftRangeInput(minPrice);
+      onLeftRangeInput(minPrice)
     }
     // disable eslint rule because this hook only cares about the url->input state data flow
     // input state -> url updates are handled in the input handlers
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [searchParams]);
+  }, [searchParams])
   useEffect(() => {
-    const maxPrice = searchParams.get('maxPrice');
-    const oldMaxPrice = oldSearchParams?.get('maxPrice');
+    const maxPrice = searchParams.get('maxPrice')
+    const oldMaxPrice = oldSearchParams?.get('maxPrice')
     if (
-      maxPrice
-      && typeof maxPrice === 'string'
-      && !isNaN(maxPrice as any)
-      && (!oldMaxPrice || oldMaxPrice !== maxPrice)
+      maxPrice &&
+      typeof maxPrice === 'string' &&
+      !isNaN(maxPrice as any) &&
+      (!oldMaxPrice || oldMaxPrice !== maxPrice)
     ) {
-      onRightRangeInput(maxPrice);
+      onRightRangeInput(maxPrice)
     }
     // disable eslint rule because this hook only cares about the url->input state data flow
     // input state -> url updates are handled in the input handlers
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [searchParams]);
+  }, [searchParams])
   // END: sync values with query string
 
-  const Buttons = () => (addIsUnsupported ? (
-    <ButtonPrimary disabled $borderRadius="12px" padding="12px">
-      <ThemedText.DeprecatedMain mb="4px">
-        <Trans>Unsupported Asset</Trans>
-      </ThemedText.DeprecatedMain>
-    </ButtonPrimary>
-  ) : !account ? (
-    <TraceEvent
-      events={[BrowserEvent.onClick]}
-      name={InterfaceEventName.CONNECT_WALLET_BUTTON_CLICKED}
-      properties={{ received_swap_quote: false }}
-      element={InterfaceElementName.CONNECT_WALLET_BUTTON}
-    >
-      <ButtonLight onClick={toggleWalletDrawer} $borderRadius="12px" padding="12px">
-        <Trans>Connect wallet</Trans>
-      </ButtonLight>
-    </TraceEvent>
-  ) : (
-    <AutoColumn gap="md">
-      {(approvalA === ApprovalState.NOT_APPROVED
-          || approvalA === ApprovalState.PENDING
-          || approvalB === ApprovalState.NOT_APPROVED
-          || approvalB === ApprovalState.PENDING)
-          && isValid && (
-          <RowBetween>
-          {showApprovalA && (
-            <ButtonPrimary
-              onClick={approveACallback}
-              disabled={approvalA === ApprovalState.PENDING}
-              width={showApprovalB ? '48%' : '100%'}
-            >
-              {approvalA === ApprovalState.PENDING ? (
-                <Dots>
-                  <Trans>Approving {currencies[Field.CURRENCY_A]?.symbol}</Trans>
-                </Dots>
-              ) : (
-                <Trans>Approve {currencies[Field.CURRENCY_A]?.symbol}</Trans>
+  const Buttons = () =>
+    addIsUnsupported ? (
+      <ButtonPrimary disabled $borderRadius="12px" padding="12px">
+        <ThemedText.DeprecatedMain mb="4px">
+          <Trans>Unsupported Asset</Trans>
+        </ThemedText.DeprecatedMain>
+      </ButtonPrimary>
+    ) : !account ? (
+      <TraceEvent
+        events={[BrowserEvent.onClick]}
+        name={InterfaceEventName.CONNECT_WALLET_BUTTON_CLICKED}
+        properties={{ received_swap_quote: false }}
+        element={InterfaceElementName.CONNECT_WALLET_BUTTON}
+      >
+        <ButtonLight onClick={toggleWalletDrawer} $borderRadius="12px" padding="12px">
+          <Trans>Connect wallet</Trans>
+        </ButtonLight>
+      </TraceEvent>
+    ) : (
+      <AutoColumn gap="md">
+        {(approvalA === ApprovalState.NOT_APPROVED ||
+          approvalA === ApprovalState.PENDING ||
+          approvalB === ApprovalState.NOT_APPROVED ||
+          approvalB === ApprovalState.PENDING) &&
+          isValid && (
+            <RowBetween>
+              {showApprovalA && (
+                <ButtonPrimary
+                  onClick={approveACallback}
+                  disabled={approvalA === ApprovalState.PENDING}
+                  width={showApprovalB ? '48%' : '100%'}
+                >
+                  {approvalA === ApprovalState.PENDING ? (
+                    <Dots>
+                      <Trans>Approving {currencies[Field.CURRENCY_A]?.symbol}</Trans>
+                    </Dots>
+                  ) : (
+                    <Trans>Approve {currencies[Field.CURRENCY_A]?.symbol}</Trans>
+                  )}
+                </ButtonPrimary>
               )}
-            </ButtonPrimary>
-          )}
-          {showApprovalB && (
-            <ButtonPrimary
-              onClick={approveBCallback}
-              disabled={approvalB === ApprovalState.PENDING}
-              width={showApprovalA ? '48%' : '100%'}
-            >
-              {approvalB === ApprovalState.PENDING ? (
-                <Dots>
-                  <Trans>Approving {currencies[Field.CURRENCY_B]?.symbol}</Trans>
-                </Dots>
-              ) : (
-                <Trans>Approve {currencies[Field.CURRENCY_B]?.symbol}</Trans>
+              {showApprovalB && (
+                <ButtonPrimary
+                  onClick={approveBCallback}
+                  disabled={approvalB === ApprovalState.PENDING}
+                  width={showApprovalA ? '48%' : '100%'}
+                >
+                  {approvalB === ApprovalState.PENDING ? (
+                    <Dots>
+                      <Trans>Approving {currencies[Field.CURRENCY_B]?.symbol}</Trans>
+                    </Dots>
+                  ) : (
+                    <Trans>Approve {currencies[Field.CURRENCY_B]?.symbol}</Trans>
+                  )}
+                </ButtonPrimary>
               )}
-            </ButtonPrimary>
+            </RowBetween>
           )}
-        </RowBetween>
-      )}
-      <ButtonError
-        onClick={() => {
-          setShowConfirm(true);
-        }}
-        disabled={
-          !isValid
-            || (!argentWalletContract && approvalA !== ApprovalState.APPROVED && !depositADisabled)
-            || (!argentWalletContract && approvalB !== ApprovalState.APPROVED && !depositBDisabled)
-        }
-        error={!isValid && !!parsedAmounts[Field.CURRENCY_A] && !!parsedAmounts[Field.CURRENCY_B]}
-      >
-        <Text fontWeight={535}>{errorMessage || <Trans>Preview</Trans>}</Text>
-      </ButtonError>
-    </AutoColumn>
-  ));
-
-  const usdcValueCurrencyA = usdcValues[Field.CURRENCY_A];
-  const usdcValueCurrencyB = usdcValues[Field.CURRENCY_B];
+        <ButtonError
+          onClick={() => {
+            setShowConfirm(true)
+          }}
+          disabled={
+            !isValid ||
+            (!argentWalletContract && approvalA !== ApprovalState.APPROVED && !depositADisabled) ||
+            (!argentWalletContract && approvalB !== ApprovalState.APPROVED && !depositBDisabled)
+          }
+          error={!isValid && !!parsedAmounts[Field.CURRENCY_A] && !!parsedAmounts[Field.CURRENCY_B]}
+        >
+          <Text fontWeight={535}>{errorMessage || <Trans>Preview</Trans>}</Text>
+        </ButtonError>
+      </AutoColumn>
+    )
+
+  const usdcValueCurrencyA = usdcValues[Field.CURRENCY_A]
+  const usdcValueCurrencyB = usdcValues[Field.CURRENCY_B]
   const currencyAFiat = useMemo(
     () => ({
       data: usdcValueCurrencyA ? parseFloat(usdcValueCurrencyA.toSignificant()) : undefined,
       isLoading: false,
     }),
-    [usdcValueCurrencyA],
-  );
+    [usdcValueCurrencyA]
+  )
   const currencyBFiat = useMemo(
     () => ({
       data: usdcValueCurrencyB ? parseFloat(usdcValueCurrencyB.toSignificant()) : undefined,
       isLoading: false,
     }),
-    [usdcValueCurrencyB],
-  );
+    [usdcValueCurrencyB]
+  )
 
-  const owner = useSingleCallResult(tokenId ? positionManager : null, 'ownerOf', [tokenId]).result?.[0];
-  const ownsNFT = addressesAreEquivalent(owner, account) || addressesAreEquivalent(existingPositionDetails?.operator, account);
-  const showOwnershipWarning = Boolean(hasExistingPosition && account && !ownsNFT);
+  const owner = useSingleCallResult(tokenId ? positionManager : null, 'ownerOf', [tokenId]).result?.[0]
+  const ownsNFT =
+    addressesAreEquivalent(owner, account) || addressesAreEquivalent(existingPositionDetails?.operator, account)
+  const showOwnershipWarning = Boolean(hasExistingPosition && account && !ownsNFT)
 
   return (
     <>
@@ -586,7 +608,7 @@ function AddLiquidity() {
               <Row justifyContent="flex-end" style={{ width: 'fit-content', minWidth: 'fit-content' }}>
                 <MediumOnly>
                   <ButtonText onClick={clearAll}>
-                    <ThemedText.DeprecatedBlue fontSize="12px">
+                    <ThemedText.DeprecatedBlue fontSize="14px" style={{ color: theme.jediBlue, fontWeight: '700' }}>
                       <Trans>Clear all</Trans>
                     </ThemedText.DeprecatedBlue>
                   </ButtonText>
@@ -601,9 +623,9 @@ function AddLiquidity() {
                   <>
                     <AutoColumn gap="md">
                       <RowBetween paddingBottom="20px">
-                        <ThemedText.DeprecatedLabel>
+                        <ThemedText.SubHeader style={{ fontFamily: 'DM Sans', fontWeight: '500' }}>
                           <Trans>Select pair</Trans>
-                        </ThemedText.DeprecatedLabel>
+                        </ThemedText.SubHeader>
                       </RowBetween>
                       <RowBetween gap="md">
                         <CurrencyInputPanel
@@ -611,7 +633,7 @@ function AddLiquidity() {
                           onUserInput={onFieldAInput}
                           hideInput
                           onMax={() => {
-                            onFieldAInput(maxAmounts[Field.CURRENCY_A]?.toExact() ?? '');
+                            onFieldAInput(maxAmounts[Field.CURRENCY_A]?.toExact() ?? '')
                           }}
                           onCurrencySelect={handleCurrencyASelect}
                           showMaxButton={!atMaxAmounts[Field.CURRENCY_A]}
@@ -627,7 +649,7 @@ function AddLiquidity() {
                           onUserInput={onFieldBInput}
                           onCurrencySelect={handleCurrencyBSelect}
                           onMax={() => {
-                            onFieldBInput(maxAmounts[Field.CURRENCY_B]?.toExact() ?? '');
+                            onFieldBInput(maxAmounts[Field.CURRENCY_B]?.toExact() ?? '')
                           }}
                           showMaxButton={!atMaxAmounts[Field.CURRENCY_B]}
                           currency={currencies[Field.CURRENCY_B] ?? null}
@@ -674,37 +696,34 @@ function AddLiquidity() {
                             handleRateToggle={() => {
                               if (!ticksAtLimit[Bound.LOWER] && !ticksAtLimit[Bound.UPPER]) {
                                 onLeftRangeInput(
-                                  (invertPrice ? priceLower : priceUpper?.invert())?.toSignificant(6) ?? '',
-                                );
+                                  (invertPrice ? priceLower : priceUpper?.invert())?.toSignificant(6) ?? ''
+                                )
                                 onRightRangeInput(
-                                  (invertPrice ? priceUpper : priceLower?.invert())?.toSignificant(6) ?? '',
-                                );
-                                onFieldAInput(formattedAmounts[Field.CURRENCY_B] ?? '');
+                                  (invertPrice ? priceUpper : priceLower?.invert())?.toSignificant(6) ?? ''
+                                )
+                                onFieldAInput(formattedAmounts[Field.CURRENCY_B] ?? '')
                               }
                               navigate(
-                                `/add/${currencyIdB as string}/${currencyIdA as string}${
-                                  feeAmount ? `/${feeAmount}` : ''
-                                }`,
-                              );
+                                `/add/${currencyIdB as string}/${currencyIdA as string}${feeAmount ? `/${feeAmount}` : ''
+                                }`
+                              )
                             }}
                           />
                         </RowFixed>
                       )}
                     </RowBetween>
                     <LiquidityChartRangeInput
-                          currencyA={baseCurrency ?? undefined}
-                          currencyB={quoteCurrency ?? undefined}
-                          feeAmount={feeAmount}
-                          ticksAtLimit={ticksAtLimit}
-                          price={
-                            price ? parseFloat((invertPrice ? price.invert() : price).toSignificant(8)) : undefined
-                          }
-                          priceLower={priceLower}
-                          priceUpper={priceUpper}
-                          onLeftRangeInput={onLeftRangeInput}
-                          onRightRangeInput={onRightRangeInput}
-                          interactive={!hasExistingPosition}
-                        />
+                      currencyA={baseCurrency ?? undefined}
+                      currencyB={quoteCurrency ?? undefined}
+                      feeAmount={feeAmount}
+                      ticksAtLimit={ticksAtLimit}
+                      price={price ? parseFloat((invertPrice ? price.invert() : price).toSignificant(8)) : undefined}
+                      priceLower={priceLower}
+                      priceUpper={priceUpper}
+                      onLeftRangeInput={onLeftRangeInput}
+                      onRightRangeInput={onRightRangeInput}
+                      interactive={!hasExistingPosition}
+                    />
                     <RangeSelector
                       priceLower={priceLower}
                       priceUpper={priceUpper}
@@ -784,15 +803,12 @@ function AddLiquidity() {
                             }}
                           >
                             <ThemedText.DeprecatedBody
-                              fontSize={14}
-                              style={{ fontWeight: 535 }}
+                              fontSize={12}
                               textAlign="left"
                               color={theme.accent1}
                             >
                               <Trans>
-                                This pool must be initialized before you can add liquidity. To initialize, select a
-                                starting price for the pool. Then, enter your liquidity price range and deposit amount.
-                                Gas fees will be higher than usual due to the initialization transaction.
+                                This pool must be initialized before you can add liquidity. To initialize, select a starting price for the pool. Then, enter your liquidity price range and deposit amount. Gas fees will be higher than usual due to the initialization transaction.
                               </Trans>
                             </ThemedText.DeprecatedBody>
                           </BlueCard>
@@ -847,7 +863,7 @@ function AddLiquidity() {
                       value={formattedAmounts[Field.CURRENCY_A]}
                       onUserInput={onFieldAInput}
                       onMax={() => {
-                        onFieldAInput(maxAmounts[Field.CURRENCY_A]?.toExact() ?? '');
+                        onFieldAInput(maxAmounts[Field.CURRENCY_A]?.toExact() ?? '')
                       }}
                       showMaxButton={!atMaxAmounts[Field.CURRENCY_A]}
                       currency={currencies[Field.CURRENCY_A] ?? null}
@@ -861,7 +877,7 @@ function AddLiquidity() {
                       value={formattedAmounts[Field.CURRENCY_B]}
                       onUserInput={onFieldBInput}
                       onMax={() => {
-                        onFieldBInput(maxAmounts[Field.CURRENCY_B]?.toExact() ?? '');
+                        onFieldBInput(maxAmounts[Field.CURRENCY_B]?.toExact() ?? '')
                       }}
                       showMaxButton={!atMaxAmounts[Field.CURRENCY_B]}
                       fiatValue={currencyBFiat}
@@ -887,5 +903,5 @@ function AddLiquidity() {
       </ScrollablePage>
       <SwitchLocaleLink />
     </>
-  );
+  )
 }
diff --git a/src/pages/AddLiquidity/styled.tsx b/src/pages/AddLiquidity/styled.tsx
index bf0e1dd6..08b4e5ef 100644
--- a/src/pages/AddLiquidity/styled.tsx
+++ b/src/pages/AddLiquidity/styled.tsx
@@ -1,21 +1,23 @@
-import styled from 'styled-components';
+import styled from 'styled-components'
 
-import { AutoColumn } from 'components/Column';
-import { Input } from 'components/NumericalInput';
+import { AutoColumn } from 'components/Column'
+import { Input } from 'components/NumericalInput'
 
 export const Wrapper = styled.div`
   position: relative;
-  padding: 26px 16px;
-`;
+`
 
 export const ScrollablePage = styled.div`
-  padding: 20px 8px 0px;
   position: relative;
   display: flex;
   flex-direction: column;
   border-radius: 8px;
   background: rgba(196, 196, 196, 0.01);
-  box-shadow: 0px 0.76977px 30.79088px 0px rgba(227, 222, 255, 0.20) inset, 0px 3.07909px 13.8559px 0px rgba(154, 146, 210, 0.30) inset, 0px 75.43767px 76.9772px -36.94907px rgba(202, 172, 255, 0.30) inset, 0px -63.12132px 52.3445px -49.26542px rgba(96, 68, 144, 0.30) inset, 0px 5.38841px 8.46749px -3.07909px #FFF inset, 0px 30.02111px 43.10724px -27.7118px rgba(255, 255, 255, 0.50) inset;
+  box-shadow: 0px 0.76977px 30.79088px 0px rgba(227, 222, 255, 0.2) inset,
+    0px 3.07909px 13.8559px 0px rgba(154, 146, 210, 0.3) inset,
+    0px 75.43767px 76.9772px -36.94907px rgba(202, 172, 255, 0.3) inset,
+    0px -63.12132px 52.3445px -49.26542px rgba(96, 68, 144, 0.3) inset, 0px 5.38841px 8.46749px -3.07909px #fff inset,
+    0px 30.02111px 43.10724px -27.7118px rgba(255, 255, 255, 0.5) inset;
   backdrop-filter: blur(38.48860168457031px);
 
   ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium`
@@ -29,35 +31,35 @@ export const ScrollablePage = styled.div`
   @media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.sm}px`}) {
     padding-top: 20px;
   }
-`;
+`
 
 export const DynamicSection = styled(AutoColumn)<{ disabled?: boolean }>`
   opacity: ${({ disabled }) => (disabled ? '0.2' : '1')};
   pointer-events: ${({ disabled }) => (disabled ? 'none' : 'initial')};
-`;
+`
 
 export const StyledInput = styled(Input)`
   text-align: left;
   font-size: 18px;
   width: 100%;
-`;
+`
 
 /* two-column layout where DepositAmount is moved at the very end on mobile. */
 export const ResponsiveTwoColumns = styled.div<{ wide: boolean }>`
   display: flex;
   flex-direction: column;
   gap: 20px;
-  padding-top: 20px;
+  padding: 20px;
 
-  border-top: 1px solid ${({ theme }) => theme.surface3};
+  border-top: 1px solid rgba(255, 255, 255, 0.2);
 
   ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium`
     margin-top: 0;
   `};
-`;
+`
 
 export const MediumOnly = styled.div`
   ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium`
     display: none;
   `};
-`;
+`
diff --git a/src/pages/App.tsx b/src/pages/App.tsx
index 4dae17ba..d1aef372 100644
--- a/src/pages/App.tsx
+++ b/src/pages/App.tsx
@@ -1,22 +1,22 @@
-import { useWeb3React } from '@web3-react/core';
-import { useAtom } from 'jotai';
-import { lazy, Suspense, useEffect, useLayoutEffect, useMemo, useState } from 'react';
-import { Navigate, Route, Routes, useLocation, useSearchParams } from 'react-router-dom';
-import styled from 'styled-components';
-
-import ErrorBoundary from 'components/ErrorBoundary';
-import Loader from 'components/Icons/LoadingSpinner';
-import NavBar, { PageTabs } from 'components/NavBar';
-import { FeatureFlag, useFeatureFlagsIsLoaded } from 'featureFlags';
-import { useUniswapXDefaultEnabled } from 'featureFlags/flags/uniswapXDefault';
-import { shouldDisableNFTRoutesAtom } from 'state/application/atoms';
-import { useAppSelector } from 'state/hooks';
-import { AppState } from 'state/reducer';
-import { RouterPreference } from 'state/routing/types';
-import { useRouterPreference, useUserOptedOutOfUniswapX } from 'state/user/hooks';
-import { flexRowNoWrap } from 'theme/styles';
-import { Z_INDEX } from 'theme/zIndex';
-import { RouteDefinition, routes, useRouterConfig } from './RouteDefinitions';
+import { useWeb3React } from '@web3-react/core'
+import { useAtom } from 'jotai'
+import { lazy, Suspense, useEffect, useLayoutEffect, useMemo, useState } from 'react'
+import { Navigate, Route, Routes, useLocation, useSearchParams } from 'react-router-dom'
+import styled from 'styled-components'
+
+import ErrorBoundary from 'components/ErrorBoundary'
+import Loader from 'components/Icons/LoadingSpinner'
+import NavBar, { PageTabs } from 'components/NavBar'
+import { FeatureFlag, useFeatureFlagsIsLoaded } from 'featureFlags'
+import { useUniswapXDefaultEnabled } from 'featureFlags/flags/uniswapXDefault'
+import { shouldDisableNFTRoutesAtom } from 'state/application/atoms'
+import { useAppSelector } from 'state/hooks'
+import { AppState } from 'state/reducer'
+import { RouterPreference } from 'state/routing/types'
+import { useRouterPreference, useUserOptedOutOfUniswapX } from 'state/user/hooks'
+import { flexRowNoWrap } from 'theme/styles'
+import { Z_INDEX } from 'theme/zIndex'
+import { RouteDefinition, routes, useRouterConfig } from './RouteDefinitions'
 
 const BodyWrapper = styled.div<{ bannerIsVisible?: boolean }>`
   display: flex;
@@ -26,6 +26,8 @@ const BodyWrapper = styled.div<{ bannerIsVisible?: boolean }>`
   padding: ${({ theme }) => theme.navHeight}px 0px 5rem 0px;
   align-items: center;
   flex: 1;
+  margin-top: 78px;
+  font-family: 'DM Sans';
 
   @media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.md}px`}) {
     min-height: calc(100vh);
@@ -34,7 +36,7 @@ const BodyWrapper = styled.div<{ bannerIsVisible?: boolean }>`
   @media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.sm}px`}) {
     min-height: calc(100vh);
   }
-`;
+`
 
 const MobileBottomBar = styled.div`
   z-index: ${Z_INDEX.sticky};
@@ -51,11 +53,11 @@ const MobileBottomBar = styled.div`
   margin: 0;
   border-radius: 0;
   width: 100%;
- 
+
   @media screen and (min-width: ${({ theme }) => theme.breakpoint.md}px) {
     display: none;
   }
-`;
+`
 
 const HeaderWrapper = styled.div<{ transparent?: boolean; bannerIsVisible?: boolean; scrollY: number }>`
   ${flexRowNoWrap};
@@ -70,7 +72,7 @@ const HeaderWrapper = styled.div<{ transparent?: boolean; bannerIsVisible?: bool
   transition-property: background-color;
   transition-duration: ${({ theme }) => theme.transition.duration.fast};
   transition-timing-function: linear;
-  
+
   @media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.md}px`}) {
     top: 0;
   }
@@ -78,32 +80,32 @@ const HeaderWrapper = styled.div<{ transparent?: boolean; bannerIsVisible?: bool
   @media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.sm}px`}) {
     top: 0;
   }
-`;
+`
 
 export default function App() {
-  const isLoaded = useFeatureFlagsIsLoaded();
+  const isLoaded = useFeatureFlagsIsLoaded()
 
-  const location = useLocation();
-  const { pathname } = location;
+  const location = useLocation()
+  const { pathname } = location
 
-  const [scrollY, setScrollY] = useState(0);
-  const scrolledState = scrollY > 0;
-  const routerConfig = useRouterConfig();
+  const [scrollY, setScrollY] = useState(0)
+  const scrolledState = scrollY > 0
+  const routerConfig = useRouterConfig()
 
-  const isHeaderTransparent = !scrolledState;
+  const isHeaderTransparent = !scrolledState
 
   useEffect(() => {
-    window.scrollTo(0, 0);
-    setScrollY(0);
-  }, [pathname]);
+    window.scrollTo(0, 0)
+    setScrollY(0)
+  }, [pathname])
 
   useEffect(() => {
     const scrollListener = () => {
-      setScrollY(window.scrollY);
-    };
-    window.addEventListener('scroll', scrollListener);
-    return () => window.removeEventListener('scroll', scrollListener);
-  }, []);
+      setScrollY(window.scrollY)
+    }
+    window.addEventListener('scroll', scrollListener)
+    return () => window.removeEventListener('scroll', scrollListener)
+  }, [])
 
   return (
     <ErrorBoundary>
@@ -114,13 +116,15 @@ export default function App() {
         <Suspense fallback={<Loader />}>
           {isLoaded ? (
             <Routes>
-              {routes.map((route: RouteDefinition) => (route.enabled(routerConfig) ? (
-                <Route key={route.path} path={route.path} element={route.getElement(routerConfig)}>
-                  {route.nestedPaths.map((nestedPath) => (
-                    <Route path={nestedPath} key={`${route.path}/${nestedPath}`} />
-                  ))}
-                </Route>
-              ) : null))}
+              {routes.map((route: RouteDefinition) =>
+                route.enabled(routerConfig) ? (
+                  <Route key={route.path} path={route.path} element={route.getElement(routerConfig)}>
+                    {route.nestedPaths.map((nestedPath) => (
+                      <Route path={nestedPath} key={`${route.path}/${nestedPath}`} />
+                    ))}
+                  </Route>
+                ) : null
+              )}
             </Routes>
           ) : (
             <Loader />
@@ -131,5 +135,5 @@ export default function App() {
         <PageTabs />
       </MobileBottomBar>
     </ErrorBoundary>
-  );
+  )
 }
diff --git a/src/pages/AppBody.tsx b/src/pages/AppBody.tsx
index dba97190..081ba723 100644
--- a/src/pages/AppBody.tsx
+++ b/src/pages/AppBody.tsx
@@ -1,7 +1,7 @@
-import { PropsWithChildren } from 'react';
-import styled from 'styled-components';
+import { PropsWithChildren } from 'react'
+import styled from 'styled-components'
 
-import { Z_INDEX } from 'theme/zIndex';
+import { Z_INDEX } from 'theme/zIndex'
 
 interface BodyWrapperProps {
   $margin?: string
@@ -13,18 +13,15 @@ export const BodyWrapper = styled.main<BodyWrapperProps>`
   margin-top: ${({ $margin }) => $margin ?? '0px'};
   max-width: ${({ $maxWidth }) => $maxWidth ?? '420px'};
   width: 100%;
-  border-radius: 16px;
-  border: 1px solid ${({ theme }) => theme.surface3};
-  margin-top: 1rem;
   margin-left: auto;
   margin-right: auto;
   z-index: ${Z_INDEX.default};
   font-feature-settings: 'ss01' on, 'ss02' on, 'cv01' on, 'cv03' on;
-`;
+`
 
 /**
  * The styled container element that wraps the content of most pages and the tabs.
  */
 export default function AppBody(props: PropsWithChildren<BodyWrapperProps>) {
-  return <BodyWrapper {...props} />;
+  return <BodyWrapper {...props} />
 }
diff --git a/src/pages/Pool/CTACards.tsx b/src/pages/Pool/CTACards.tsx
index 9cf31093..9ff99373 100644
--- a/src/pages/Pool/CTACards.tsx
+++ b/src/pages/Pool/CTACards.tsx
@@ -27,7 +27,7 @@ const HeaderText = styled(ThemedText.DeprecatedLabel)`
   align-items: center;
   color: ${({ theme }) => theme.jediBlue};
   font-feature-settings: 'clig' off, 'liga' off;
-  font-family: Avenir LT Std;
+  font-family: 'Avenir LT Std', sans-serif;
   font-size: 16px;
   font-style: normal;
   font-weight: 700;
diff --git a/src/pages/Pool/index.tsx b/src/pages/Pool/index.tsx
index 7a9292cb..eef0f5f4 100644
--- a/src/pages/Pool/index.tsx
+++ b/src/pages/Pool/index.tsx
@@ -27,7 +27,7 @@ import WalletIcon from '../../assets/wallets/Wallet.png';
 import NoPositionsIcon from '../../assets/images/noPosition.png';
 
 const PageWrapper = styled(AutoColumn)`
-  padding: 70px 8px 0px;
+  padding: 0px 8px 0px;
   max-width: 920px;
   width: 100%;
 
diff --git a/src/pages/PoolFinder/index.tsx b/src/pages/PoolFinder/index.tsx
index 766c05f3..94e9ab6e 100644
--- a/src/pages/PoolFinder/index.tsx
+++ b/src/pages/PoolFinder/index.tsx
@@ -1,33 +1,33 @@
-import { Trans } from '@lingui/macro';
-import { InterfacePageName } from '@uniswap/analytics-events';
-import { Currency, CurrencyAmount, Token } from '@uniswap/sdk-core';
-import { useWeb3React } from '@web3-react/core';
-import JSBI from 'jsbi';
-import { useCallback, useEffect, useState } from 'react';
-import { Plus } from 'react-feather';
-import { useLocation } from 'react-router';
-import { Text } from 'rebass';
-
-import { V2Unsupported } from 'components/V2Unsupported';
-import { useNetworkSupportsV2 } from 'hooks/useNetworkSupportsV2';
-import { Trace } from 'analytics';
-import { StyledInternalLink, ThemedText } from 'theme/components';
-import { ButtonDropdownLight } from '../../components/Button';
-import { LightCard, BlueCard } from '../../components/Card';
-import { AutoColumn, ColumnCenter } from '../../components/Column';
-import CurrencyLogo from '../../components/Logo/CurrencyLogo';
-import { FindPoolTabs } from '../../components/NavigationTabs';
-import { MinimalPositionCard } from '../../components/PositionCard';
-import Row from '../../components/Row';
-import CurrencySearchModal from '../../components/SearchModal/CurrencySearchModal';
-import { SwitchLocaleLink } from '../../components/SwitchLocaleLink';
-import { nativeOnChain } from '../../constants/tokens';
-import { PairState, useV2Pair } from '../../hooks/useV2Pairs';
-import { useTokenBalance } from '../../state/connection/hooks';
-import { usePairAdder } from '../../state/user/hooks';
-import { currencyId } from '../../utils/currencyId';
-import AppBody from '../AppBody';
-import { Dots } from '../Pool/styled';
+import { Trans } from '@lingui/macro'
+import { InterfacePageName } from '@uniswap/analytics-events'
+import { Currency, CurrencyAmount, Token } from '@uniswap/sdk-core'
+import { useWeb3React } from '@web3-react/core'
+import JSBI from 'jsbi'
+import { useCallback, useEffect, useState } from 'react'
+import { Plus } from 'react-feather'
+import { useLocation } from 'react-router'
+import { Text } from 'rebass'
+
+import { V2Unsupported } from 'components/V2Unsupported'
+import { useNetworkSupportsV2 } from 'hooks/useNetworkSupportsV2'
+import { Trace } from 'analytics'
+import { StyledInternalLink, ThemedText } from 'theme/components'
+import { ButtonDropdownLight } from '../../components/Button'
+import { LightCard, BlueCard } from '../../components/Card'
+import { AutoColumn, ColumnCenter } from '../../components/Column'
+import CurrencyLogo from '../../components/Logo/CurrencyLogo'
+import { FindPoolTabs } from '../../components/NavigationTabs'
+import { MinimalPositionCard } from '../../components/PositionCard'
+import Row from '../../components/Row'
+import CurrencySearchModal from '../../components/SearchModal/CurrencySearchModal'
+import { SwitchLocaleLink } from '../../components/SwitchLocaleLink'
+import { nativeOnChain } from '../../constants/tokens'
+import { PairState, useV2Pair } from '../../hooks/useV2Pairs'
+import { useTokenBalance } from '../../state/connection/hooks'
+import { usePairAdder } from '../../state/user/hooks'
+import { currencyId } from '../../utils/currencyId'
+import AppBody from '../AppBody'
+import { Dots } from '../Pool/styled'
 
 enum Fields {
   TOKEN0 = 0,
@@ -35,53 +35,54 @@ enum Fields {
 }
 
 function useQuery() {
-  return new URLSearchParams(useLocation().search);
+  return new URLSearchParams(useLocation().search)
 }
 
 export default function PoolFinder() {
-  const query = useQuery();
+  const query = useQuery()
 
-  const { account, chainId } = useWeb3React();
+  const { account, chainId } = useWeb3React()
 
-  const [showSearch, setShowSearch] = useState<boolean>(false);
-  const [activeField, setActiveField] = useState<number>(Fields.TOKEN1);
+  const [showSearch, setShowSearch] = useState<boolean>(false)
+  const [activeField, setActiveField] = useState<number>(Fields.TOKEN1)
 
-  const [currency0, setCurrency0] = useState<Currency | null>(() => (chainId ? nativeOnChain(chainId) : null));
-  const [currency1, setCurrency1] = useState<Currency | null>(null);
+  const [currency0, setCurrency0] = useState<Currency | null>(() => (chainId ? nativeOnChain(chainId) : null))
+  const [currency1, setCurrency1] = useState<Currency | null>(null)
 
-  const [pairState, pair] = useV2Pair(currency0 ?? undefined, currency1 ?? undefined);
-  const addPair = usePairAdder();
+  const [pairState, pair] = useV2Pair(currency0 ?? undefined, currency1 ?? undefined)
+  const addPair = usePairAdder()
   useEffect(() => {
     if (pair) {
-      addPair(pair);
+      addPair(pair)
     }
-  }, [pair, addPair]);
+  }, [pair, addPair])
 
-  const validPairNoLiquidity: boolean = pairState === PairState.NOT_EXISTS
-    || Boolean(
-      pairState === PairState.EXISTS
-        && pair
-        && JSBI.equal(pair.reserve0.quotient, JSBI.BigInt(0))
-        && JSBI.equal(pair.reserve1.quotient, JSBI.BigInt(0)),
-    );
+  const validPairNoLiquidity: boolean =
+    pairState === PairState.NOT_EXISTS ||
+    Boolean(
+      pairState === PairState.EXISTS &&
+        pair &&
+        JSBI.equal(pair.reserve0.quotient, JSBI.BigInt(0)) &&
+        JSBI.equal(pair.reserve1.quotient, JSBI.BigInt(0))
+    )
 
-  const position: CurrencyAmount<Token> | undefined = useTokenBalance(account ?? undefined, pair?.liquidityToken);
-  const hasPosition = Boolean(position && JSBI.greaterThan(position.quotient, JSBI.BigInt(0)));
+  const position: CurrencyAmount<Token> | undefined = useTokenBalance(account ?? undefined, pair?.liquidityToken)
+  const hasPosition = Boolean(position && JSBI.greaterThan(position.quotient, JSBI.BigInt(0)))
 
   const handleCurrencySelect = useCallback(
     (currency: Currency) => {
       if (activeField === Fields.TOKEN0) {
-        setCurrency0(currency);
+        setCurrency0(currency)
       } else {
-        setCurrency1(currency);
+        setCurrency1(currency)
       }
     },
-    [activeField],
-  );
+    [activeField]
+  )
 
   const handleSearchDismiss = useCallback(() => {
-    setShowSearch(false);
-  }, [setShowSearch]);
+    setShowSearch(false)
+  }, [setShowSearch])
 
   const prerequisiteMessage = (
     <LightCard padding="45px 10px">
@@ -93,10 +94,12 @@ export default function PoolFinder() {
         )}
       </Text>
     </LightCard>
-  );
+  )
 
-  const networkSupportsV2 = useNetworkSupportsV2();
-  if (!networkSupportsV2) { return <V2Unsupported />; }
+  const networkSupportsV2 = useNetworkSupportsV2()
+  if (!networkSupportsV2) {
+    return <V2Unsupported />
+  }
 
   return (
     <Trace page={InterfacePageName.POOL_PAGE} shouldLogImpression>
@@ -115,8 +118,8 @@ export default function PoolFinder() {
             </BlueCard>
             <ButtonDropdownLight
               onClick={() => {
-                setShowSearch(true);
-                setActiveField(Fields.TOKEN0);
+                setShowSearch(true)
+                setActiveField(Fields.TOKEN0)
               }}
             >
               {currency0 ? (
@@ -127,7 +130,7 @@ export default function PoolFinder() {
                   </Text>
                 </Row>
               ) : (
-                <Text fontWeight={535} fontSize={20} marginLeft="12px">
+                <Text fontWeight={700} fontSize={14} marginLeft="12px" fontFamily={'DM Sans'}>
                   <Trans>Select a token</Trans>
                 </Text>
               )}
@@ -139,8 +142,8 @@ export default function PoolFinder() {
 
             <ButtonDropdownLight
               onClick={() => {
-                setShowSearch(true);
-                setActiveField(Fields.TOKEN1);
+                setShowSearch(true)
+                setActiveField(Fields.TOKEN1)
               }}
             >
               {currency1 ? (
@@ -151,7 +154,7 @@ export default function PoolFinder() {
                   </Text>
                 </Row>
               ) : (
-                <Text fontWeight={535} fontSize={20} marginLeft="12px">
+                <Text fontWeight={700} fontSize={14} marginLeft="12px" fontFamily={'DM Sans'}>
                   <Trans>Select a token</Trans>
                 </Text>
               )}
@@ -235,5 +238,5 @@ export default function PoolFinder() {
         <SwitchLocaleLink />
       </>
     </Trace>
-  );
+  )
 }
diff --git a/src/theme/components/text.tsx b/src/theme/components/text.tsx
index 4880699e..ff995363 100644
--- a/src/theme/components/text.tsx
+++ b/src/theme/components/text.tsx
@@ -2,14 +2,15 @@
  * Preset styles of the Rebass Text component
  */
 
-import { Text, TextProps as TextPropsOriginal } from 'rebass';
-import styled from 'styled-components';
+import { Text, TextProps as TextPropsOriginal } from 'rebass'
+import styled from 'styled-components'
 
 const TextWrapper = styled(Text).withConfig({
   shouldForwardProp: (prop) => prop !== 'color',
 })<{ color: keyof string }>`
   color: ${({ color, theme }) => (theme as any)[color]};
-`;
+  font-family: 'DM Sans';
+`
 
 type TextProps = Omit<TextPropsOriginal, 'css'>
 
@@ -17,102 +18,102 @@ type TextProps = Omit<TextPropsOriginal, 'css'>
 export const ThemedText = {
   // todo: there should be just one `Body` with default color, no need to make all variations
   BodyPrimary(props: TextProps) {
-    return <TextWrapper fontWeight={400} fontSize={16} color="neutral1" {...props} />;
+    return <TextWrapper fontWeight={400} fontSize={16} color="neutral1" {...props} />
   },
   BodySecondary(props: TextProps) {
-    return <TextWrapper fontWeight={400} fontSize={16} color="neutral2" {...props} />;
+    return <TextWrapper fontWeight={400} fontSize={16} color="neutral2" {...props} />
   },
   BodySmall(props: TextProps) {
-    return <TextWrapper fontWeight={400} fontSize={14} color="neutral1" {...props} />;
+    return <TextWrapper fontWeight={400} fontSize={14} color="neutral1" {...props} />
   },
   HeadlineSmall(props: TextProps) {
-    return <TextWrapper fontWeight={400} fontSize={20} lineHeight="28px" color="neutral1" {...props} />;
+    return <TextWrapper fontWeight={400} fontSize={20} lineHeight="28px" color="neutral1" {...props} />
   },
   HeadlineMedium(props: TextProps) {
-    return <TextWrapper fontWeight={400} fontSize={28} color="neutral1" {...props} />;
+    return <TextWrapper fontWeight={400} fontSize={28} color="neutral1" {...props} />
   },
   HeadlineLarge(props: TextProps) {
-    return <TextWrapper fontWeight={400} fontSize={36} lineHeight="44px" color="neutral1" {...props} />;
+    return <TextWrapper fontWeight={400} fontSize={36} lineHeight="44px" color="neutral1" {...props} />
   },
   LargeHeader(props: TextProps) {
-    return <TextWrapper fontWeight={400} fontSize={36} color="neutral1" {...props} />;
+    return <TextWrapper fontWeight={400} fontSize={36} color="neutral1" {...props} />
   },
   Hero(props: TextProps) {
-    return <TextWrapper fontWeight={400} fontSize={48} color="neutral1" {...props} />;
+    return <TextWrapper fontWeight={400} fontSize={48} color="neutral1" {...props} />
   },
   LabelSmall(props: TextProps) {
-    return <TextWrapper fontWeight={400} fontSize={14} color="neutral2" {...props} />;
+    return <TextWrapper fontWeight={400} fontSize={14} color="neutral2" {...props} />
   },
   LabelMicro(props: TextProps) {
-    return <TextWrapper fontWeight={400} fontSize={12} color="neutral1" {...props} />;
+    return <TextWrapper fontWeight={400} fontSize={12} color="neutral1" {...props} />
   },
   Caption(props: TextProps) {
-    return <TextWrapper fontWeight={400} fontSize={12} lineHeight="16px" color="neutral1" {...props} />;
+    return <TextWrapper fontWeight={400} fontSize={12} lineHeight="16px" color="neutral1" {...props} />
   },
   Link(props: TextProps) {
-    return <TextWrapper fontWeight={400} fontSize={14} color="accent1" {...props} />;
+    return <TextWrapper fontWeight={400} fontSize={14} color="accent1" {...props} />
   },
   MediumHeader(props: TextProps) {
-    return <TextWrapper fontWeight={400} fontSize={20} color="neutral1" {...props} />;
+    return <TextWrapper fontWeight={400} fontSize={20} color="neutral1" {...props} />
   },
   SubHeaderLarge(props: TextProps) {
-    return <TextWrapper fontWeight={400} fontSize={20} color="neutral1" {...props} />;
+    return <TextWrapper fontWeight={400} fontSize={20} color="neutral1" {...props} />
   },
   SubHeader(props: TextProps) {
-    return <TextWrapper fontWeight={750} fontSize={16} color="neutral1" lineHeight="24px" {...props} />;
+    return <TextWrapper fontWeight={750} fontSize={16} color="neutral1" lineHeight="24px" {...props} />
   },
   SubHeaderSmall(props: TextProps) {
-    return <TextWrapper fontWeight={400} fontSize={12} color="neutral1" {...props} />;
+    return <TextWrapper fontWeight={400} fontSize={12} color="neutral1" {...props} />
   },
   UtilityBadge(props: TextProps) {
-    return <TextWrapper fontWeight={400} fontSize="8px" lineHeight="12px" {...props} />;
+    return <TextWrapper fontWeight={400} fontSize="8px" lineHeight="12px" {...props} />
   },
   DeprecatedMain(props: TextProps) {
-    return <TextWrapper fontWeight={400} color="white" {...props} />;
+    return <TextWrapper fontWeight={400} color="white" {...props} />
   },
   DeprecatedLink(props: TextProps) {
-    return <TextWrapper fontWeight={400} color="accent1" {...props} />;
+    return <TextWrapper fontWeight={400} color="accent1" {...props} />
   },
   DeprecatedLabel(props: TextProps) {
-    return <TextWrapper fontWeight={400} color="neutral1" {...props} />;
+    return <TextWrapper fontWeight={400} color="neutral1" {...props} />
   },
   DeprecatedBlack(props: TextProps) {
-    return <TextWrapper fontWeight={400} color="neutral1" {...props} />;
+    return <TextWrapper fontWeight={400} color="neutral1" {...props} />
   },
   DeprecatedWhite(props: TextProps) {
-    return <TextWrapper fontWeight={400} color="white" {...props} />;
+    return <TextWrapper fontWeight={400} color="white" {...props} />
   },
   DeprecatedBody(props: TextProps) {
-    return <TextWrapper fontWeight={400} fontSize={16} color="neutral1" {...props} />;
+    return <TextWrapper fontWeight={400} fontSize={16} color="neutral1" {...props} />
   },
   DeprecatedLargeHeader(props: TextProps) {
-    return <TextWrapper fontWeight={535} fontSize={24} {...props} />;
+    return <TextWrapper fontWeight={535} fontSize={24} {...props} />
   },
   DeprecatedMediumHeader(props: TextProps) {
-    return <TextWrapper fontWeight={535} fontSize={20} {...props} />;
+    return <TextWrapper fontWeight={535} fontSize={20} {...props} />
   },
   DeprecatedSubHeader(props: TextProps) {
-    return <TextWrapper fontWeight={400} fontSize={14} {...props} />;
+    return <TextWrapper fontWeight={400} fontSize={14} {...props} />
   },
   DeprecatedSmall(props: TextProps) {
-    return <TextWrapper fontWeight={400} fontSize={11} {...props} />;
+    return <TextWrapper fontWeight={400} fontSize={11} {...props} />
   },
   DeprecatedBlue(props: TextProps) {
-    return <TextWrapper fontWeight={400} color="accent1" {...props} />;
+    return <TextWrapper fontWeight={400} color="accent1" {...props} />
   },
   DeprecatedYellow(props: TextProps) {
-    return <TextWrapper fontWeight={400} color="deprecated_yellow3" {...props} />;
+    return <TextWrapper fontWeight={400} color="deprecated_yellow3" {...props} />
   },
   DeprecatedDarkGray(props: TextProps) {
-    return <TextWrapper fontWeight={400} color="neutral2" {...props} />;
+    return <TextWrapper fontWeight={400} color="neutral2" {...props} />
   },
   DeprecatedGray(props: TextProps) {
-    return <TextWrapper fontWeight={400} color="surface2" {...props} />;
+    return <TextWrapper fontWeight={400} color="surface2" {...props} />
   },
   DeprecatedItalic(props: TextProps) {
-    return <TextWrapper fontWeight={400} fontSize={12} fontStyle="italic" color="neutral2" {...props} />;
+    return <TextWrapper fontWeight={400} fontSize={12} fontStyle="italic" color="neutral2" {...props} />
   },
   DeprecatedError({ error, ...props }: { error: boolean } & TextProps) {
-    return <TextWrapper fontWeight={400} color={error ? 'critical' : 'neutral2'} {...props} />;
+    return <TextWrapper fontWeight={400} color={error ? 'critical' : 'neutral2'} {...props} />
   },
-};
+}