diff --git a/components/swap/JupiterRouteInfo.tsx b/components/swap/JupiterRouteInfo.tsx
index a63484ec..e862a010 100644
--- a/components/swap/JupiterRouteInfo.tsx
+++ b/components/swap/JupiterRouteInfo.tsx
@@ -20,6 +20,7 @@ import {
   PencilIcon,
   ArrowsRightLeftIcon,
   CheckCircleIcon,
+  ArrowRightIcon,
 } from '@heroicons/react/20/solid'
 import { useTranslation } from 'next-i18next'
 import Image from 'next/image'
@@ -243,36 +244,46 @@ const JupiterRouteInfo = ({
                 />
               </div>
             </div>
-            <p className="mb-0.5 text-center text-lg">
-              <span className="text-th-fgd-1">{`${formatFixedDecimals(
+            <p className="mb-0.5 flex items-center text-center text-lg">
+              <span className="mr-1 font-mono tracking-tighter text-th-fgd-1">{`${formatFixedDecimals(
                 amountIn.toNumber()
               )}`}</span>{' '}
-              {`${inputTokenInfo!.symbol} for`}{' '}
-              <span className="text-th-fgd-1">{`${formatFixedDecimals(
+              {inputTokenInfo!.symbol}
+              <ArrowRightIcon className="mx-2 h-5 w-5 text-th-fgd-4" />
+              <span className="mr-1 font-mono tracking-tighter text-th-fgd-1">{`${formatFixedDecimals(
                 amountOut.toNumber()
               )}`}</span>{' '}
               {`${outputTokenInfo.symbol}`}
             </p>
           </div>
         </div>
-
         <div className="space-y-2 px-1">
           <div className="flex justify-between">
             <p className="text-sm text-th-fgd-3">{t('swap:rate')}</p>
             <div>
               <div className="flex items-center justify-end">
-                <p className="text-right text-sm text-th-fgd-1">
+                <p className="text-right font-mono text-sm tracking-tighter text-th-fgd-1">
                   {swapRate ? (
                     <>
-                      1 {inputTokenInfo!.name} ≈{' '}
+                      1{' '}
+                      <span className="font-body tracking-wide">
+                        {inputTokenInfo!.name} ≈{' '}
+                      </span>
                       {formatFixedDecimals(amountOut.div(amountIn).toNumber())}{' '}
-                      {outputTokenInfo?.symbol}
+                      <span className="font-body tracking-wide">
+                        {outputTokenInfo?.symbol}
+                      </span>
                     </>
                   ) : (
                     <>
-                      1 {outputTokenInfo?.symbol} ≈{' '}
+                      1{' '}
+                      <span className="font-body tracking-wide">
+                        {outputTokenInfo?.symbol} ≈{' '}
+                      </span>
                       {formatFixedDecimals(amountIn.div(amountOut).toNumber())}{' '}
-                      {inputTokenInfo!.name}
+                      <span className="font-body tracking-wide">
+                        {inputTokenInfo!.symbol}
+                      </span>
                     </>
                   )}
                 </p>
@@ -285,14 +296,14 @@ const JupiterRouteInfo = ({
                 {coingeckoPrices?.outputCoingeckoPrice &&
                 coingeckoPrices?.inputCoingeckoPrice ? (
                   <div
-                    className={`text-right ${
+                    className={`text-right font-mono tracking-tighter ${
                       coinGeckoPriceDifference.gt(0)
                         ? 'text-th-red'
                         : 'text-th-green'
                     }`}
                   >
                     {Decimal.abs(coinGeckoPriceDifference).toFixed(1)}%{' '}
-                    <span className="text-th-fgd-3">{`${
+                    <span className="font-body tracking-wide text-th-fgd-3">{`${
                       coinGeckoPriceDifference.lte(0)
                         ? 'cheaper'
                         : 'more expensive'
@@ -307,13 +318,15 @@ const JupiterRouteInfo = ({
               {t('swap:minimum-received')}
             </p>
             {outputTokenInfo?.decimals ? (
-              <p className="text-right text-sm text-th-fgd-1">
+              <p className="text-right font-mono text-sm tracking-tighter text-th-fgd-1">
                 {formatDecimal(
                   JSBI.toNumber(selectedRoute?.otherAmountThreshold) /
                     10 ** outputTokenInfo.decimals || 1,
                   outputTokenInfo.decimals
                 )}{' '}
-                {outputTokenInfo?.symbol}
+                <span className="font-body tracking-wide">
+                  {outputTokenInfo?.symbol}
+                </span>
               </p>
             ) : null}
           </div>
@@ -321,27 +334,32 @@ const JupiterRouteInfo = ({
             <>
               <div className="flex justify-between">
                 <p className="text-sm text-th-fgd-3">{t('borrow-amount')}</p>
-                <p className="text-right text-sm text-th-fgd-1">
-                  ~ {formatFixedDecimals(borrowAmount)} {inputTokenInfo?.symbol}
+                <p className="text-right font-mono text-sm tracking-tighter text-th-fgd-1">
+                  ~ {formatFixedDecimals(borrowAmount)}{' '}
+                  <span className="font-body tracking-wide">
+                    {inputTokenInfo?.symbol}
+                  </span>
                 </p>
               </div>
               <div className="flex justify-between">
                 <p className="text-sm text-th-fgd-3">Borrow Fee</p>
-                <p className="text-right text-sm text-th-fgd-1">
+                <p className="text-right font-mono text-sm tracking-tighter text-th-fgd-1">
                   ~{' '}
                   {formatFixedDecimals(
                     amountIn
                       .mul(inputBank!.loanOriginationFeeRate.toFixed())
                       .toNumber()
                   )}{' '}
-                  {inputBank!.name}
+                  <span className="font-body tracking-wide">
+                    {inputBank!.name}
+                  </span>
                 </p>
               </div>
             </>
           ) : null}
           <div className="flex justify-between">
             <p className="text-sm text-th-fgd-3">Est. {t('swap:slippage')}</p>
-            <p className="text-right text-sm text-th-fgd-1">
+            <p className="text-right font-mono text-sm tracking-tighter text-th-fgd-1">
               {selectedRoute?.priceImpactPct * 100 < 0.1
                 ? '< 0.1%'
                 : `${(selectedRoute?.priceImpactPct * 100).toFixed(2)}%`}
@@ -377,7 +395,7 @@ const JupiterRouteInfo = ({
             <div className="flex justify-between">
               <p className="text-sm text-th-fgd-3">{t('fee')}</p>
               <div className="flex items-center">
-                <p className="text-right text-sm text-th-fgd-1">
+                <p className="text-right font-mono text-sm tracking-tighter text-th-fgd-1">
                   ≈ ${feeValue?.toFixed(2)}
                 </p>
               </div>
@@ -395,12 +413,15 @@ const JupiterRouteInfo = ({
                     })}
                   </p>
                   {feeToken?.decimals && (
-                    <p className="text-right text-sm text-th-fgd-1">
+                    <p className="text-right font-mono text-sm tracking-tighter text-th-fgd-1">
                       {(
                         JSBI.toNumber(info.lpFee?.amount) /
                         Math.pow(10, feeToken.decimals)
                       ).toFixed(6)}{' '}
-                      {feeToken?.symbol} ({info.lpFee?.pct * 100}%)
+                      <span className="font-body tracking-wide">
+                        {feeToken?.symbol}
+                      </span>{' '}
+                      ({info.lpFee?.pct * 100}%)
                     </p>
                   )}
                 </div>
diff --git a/components/swap/SwapForm.tsx b/components/swap/SwapForm.tsx
index a073d6eb..e7e5aaa8 100644
--- a/components/swap/SwapForm.tsx
+++ b/components/swap/SwapForm.tsx
@@ -203,7 +203,7 @@ const SwapForm = () => {
     >
       <div className="p-6 pt-3">
         <Transition
-          className="thin-scroll absolute top-0 left-0 z-20 h-full w-full overflow-auto bg-th-bkg-2 p-6 pb-0"
+          className="thin-scroll absolute top-0 left-0 z-20 h-full w-full overflow-auto bg-th-bkg-1 p-6 pb-0"
           show={showConfirm}
           enter="transition ease-in duration-300"
           enterFrom="translate-x-full"
@@ -223,7 +223,7 @@ const SwapForm = () => {
           />
         </Transition>
         <EnterBottomExitBottom
-          className="thin-scroll absolute bottom-0 left-0 z-20 h-full w-full overflow-auto bg-th-bkg-2 p-6 pb-0"
+          className="thin-scroll absolute bottom-0 left-0 z-20 h-full w-full overflow-auto bg-th-bkg-1 p-6 pb-0"
           show={!!showTokenSelect}
         >
           <SwapFormTokenList
@@ -237,13 +237,13 @@ const SwapForm = () => {
           />
         </EnterBottomExitBottom>
         <EnterBottomExitBottom
-          className="thin-scroll absolute bottom-0 left-0 z-20 h-full w-full overflow-auto bg-th-bkg-2 p-6 pb-0"
+          className="thin-scroll absolute bottom-0 left-0 z-20 h-full w-full overflow-auto bg-th-bkg-1 p-6 pb-0"
           show={showSettings}
         >
           <SwapSettings onClose={() => setShowSettings(false)} />
         </EnterBottomExitBottom>
         <div className="mb-4 flex items-center justify-between">
-          <h2 className="text-base text-th-fgd-3">{t('swap')}</h2>
+          <h2 className="text-base text-th-fgd-2">{t('swap')}</h2>
           <div id="step-eight">
             <IconButton
               className="text-th-fgd-2"
diff --git a/components/swap/SwapFormTokenList.tsx b/components/swap/SwapFormTokenList.tsx
index 3b317494..c645b1ca 100644
--- a/components/swap/SwapFormTokenList.tsx
+++ b/components/swap/SwapFormTokenList.tsx
@@ -49,7 +49,7 @@ const TokenItem = ({
     <div>
       <button
         key={address}
-        className="flex w-full cursor-pointer items-center justify-between rounded-md p-2 font-normal focus:bg-th-bkg-3 focus:outline-none md:hover:bg-th-bkg-4"
+        className="flex w-full cursor-pointer items-center justify-between rounded-md p-2 font-normal focus:bg-th-bkg-3 focus:outline-none md:hover:bg-th-bkg-2"
         onClick={() => onSubmit(address)}
       >
         <div className="flex items-center">
@@ -78,7 +78,7 @@ const SwapFormTokenList = ({
   onTokenSelect: (x: string) => void
   type: string
 }) => {
-  const { t } = useTranslation()
+  const { t } = useTranslation(['common', 'swap'])
   const [search, setSearch] = useState('')
   const tokens = mangoStore.getState().jupiterTokens
   const walletTokens = mangoStore((s) => s.wallet.tokens)
@@ -135,7 +135,11 @@ const SwapFormTokenList = ({
 
   return (
     <>
-      <p className="mb-3">{type === 'input' ? t('sell') : t('buy')}</p>
+      <p className="mb-3">
+        {type === 'input'
+          ? `${t('swap')} ${t('swap:from')}`
+          : `${t('swap')} ${t('swap:to')}`}
+      </p>
       <IconButton className="absolute top-2 right-2" onClick={onClose} hideBg>
         <XMarkIcon className="h-5 w-5" />
       </IconButton>
@@ -182,7 +186,7 @@ const SwapFormTokenList = ({
         </div>
       ) : null}
       <div className="my-2 border-t border-th-bkg-4"></div>
-      <div className="overflow-auto">
+      <div className="mb-2 overflow-auto">
         {sortedTokens.map((token) => (
           <TokenItem
             key={token.address}
diff --git a/components/swap/SwapSettings.tsx b/components/swap/SwapSettings.tsx
index a7531259..4b560b27 100644
--- a/components/swap/SwapSettings.tsx
+++ b/components/swap/SwapSettings.tsx
@@ -57,7 +57,7 @@ const SwapSettings = ({ onClose }: { onClose: () => void }) => {
           />
         )}
       </div>
-      <div className="mt-6 flex items-center justify-between rounded-md bg-th-bkg-3 p-3">
+      <div className="mt-6 flex items-center justify-between rounded-md bg-th-bkg-2 p-3">
         <p className="text-th-fgd-1">{t('swap:use-margin')}</p>
         <Switch
           className="text-th-fgd-3"