diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 647552710..b8d57bb21 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -1857,13 +1857,6 @@
   "swapsAlmostDone": {
     "message": "Almost done..."
   },
-  "swapsBestQuote": {
-    "message": "Best quote"
-  },
-  "swapsConvertToAbout": {
-    "message": "Convert $1 to about",
-    "description": "This message is part of a quote for a swap. The $1 is the amount being converted, and the amount it is being swapped for is below this message"
-  },
   "swapsMaxSlippage": {
     "message": "Max slippage"
   },
diff --git a/app/images/down-arrow-grey.svg b/app/images/down-arrow-grey.svg
new file mode 100644
index 000000000..fcdb33eec
--- /dev/null
+++ b/app/images/down-arrow-grey.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="16" viewBox="0 0 12 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M6.00163 15.2045C6.21347 15.1962 6.45833 15.109 6.61275 14.9637L11.6498 10.2232C11.9385 9.90194 12.0577 9.28597 11.7239 8.92693C11.3952 8.57328 10.7576 8.5838 10.4276 8.93611L6.89052 12.2693L6.89052 1.87164C6.89052 1.38076 6.49254 0.982788 6.00163 0.982788C5.51071 0.982788 5.11274 1.38076 5.11274 1.87164L5.11274 12.2693L1.57565 8.93611C1.27181 8.63281 0.611843 8.57675 0.279352 8.92693C-0.0531095 9.27702 0.0531145 9.91513 0.353459 10.2232L5.3905 14.9637C5.56288 15.126 5.76513 15.205 6.00163 15.2045Z" fill="#D6D9DC"/>
+</svg>
diff --git a/ui/app/components/ui/url-icon/index.scss b/ui/app/components/ui/url-icon/index.scss
index 482f327d3..14d5524cb 100644
--- a/ui/app/components/ui/url-icon/index.scss
+++ b/ui/app/components/ui/url-icon/index.scss
@@ -20,9 +20,9 @@
     border-radius: 50%;
     background: #bbc0c5;
     flex: 0 1 auto;
+    display: flex;
     justify-content: center;
     align-items: center;
-    text-align: center;
     padding-top: 2px;
   }
 }
diff --git a/ui/app/components/ui/url-icon/url-icon.js b/ui/app/components/ui/url-icon/url-icon.js
index 6dcfcc06f..115eb5fe1 100644
--- a/ui/app/components/ui/url-icon/url-icon.js
+++ b/ui/app/components/ui/url-icon/url-icon.js
@@ -3,13 +3,13 @@ import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import IconWithFallback from '../icon-with-fallback'
 
-export default function UrlIcon({ url, className, name }) {
+export default function UrlIcon({ url, className, name, fallbackClassName }) {
   return (
     <IconWithFallback
       className={classnames('url-icon', className)}
       icon={url}
       name={name}
-      fallbackClassName="url-icon__fallback"
+      fallbackClassName={classnames('url-icon__fallback', fallbackClassName)}
     />
   )
 }
@@ -18,4 +18,5 @@ UrlIcon.propTypes = {
   url: PropTypes.string,
   className: PropTypes.string,
   name: PropTypes.string,
+  fallbackClassName: PropTypes.string,
 }
diff --git a/ui/app/pages/swaps/exchange-rate-display/exchange-rate-display.js b/ui/app/pages/swaps/exchange-rate-display/exchange-rate-display.js
index fbb268d65..e70ffd8e7 100644
--- a/ui/app/pages/swaps/exchange-rate-display/exchange-rate-display.js
+++ b/ui/app/pages/swaps/exchange-rate-display/exchange-rate-display.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import BigNumber from 'bignumber.js'
 import classnames from 'classnames'
 import { calcTokenAmount } from '../../../helpers/utils/token-util'
-import { toPrecisionWithoutTrailingZeros } from '../../../helpers/utils/util'
+import { formatSwapsValueForDisplay } from '../swaps.util'
 
 export default function ExchangeRateDisplay({
   primaryTokenValue,
@@ -13,6 +13,7 @@ export default function ExchangeRateDisplay({
   secondaryTokenDecimals = 18,
   secondaryTokenSymbol,
   arrowColor = 'black',
+  boldSymbols = true,
   className,
 }) {
   const [showPrimaryToSecondary, setShowPrimaryToSecondary] = useState(true)
@@ -57,16 +58,24 @@ export default function ExchangeRateDisplay({
   } else if (new BigNumber(rate, 10).lt('0.000001', 10)) {
     rateToDisplay = rate
   } else {
-    rateToDisplay = toPrecisionWithoutTrailingZeros(rate, 9)
+    rateToDisplay = formatSwapsValueForDisplay(rate)
   }
 
   return (
     <div className={classnames('exchange-rate-display', className)}>
       <span>1</span>
-      <span className="exchange-rate-display__bold">{baseSymbol}</span>
+      <span
+        className={classnames({ 'exchange-rate-display__bold': boldSymbols })}
+      >
+        {baseSymbol}
+      </span>
       <span>{comparisonSymbol}</span>
       <span>{rateToDisplay}</span>
-      <span className="exchange-rate-display__bold">{ratiodSymbol}</span>
+      <span
+        className={classnames({ 'exchange-rate-display__bold': boldSymbols })}
+      >
+        {ratiodSymbol}
+      </span>
       <div
         className={classnames('exchange-rate-display__switch-arrows', {
           'exchange-rate-display__switch-arrows-rotate': rotating,
@@ -115,4 +124,5 @@ ExchangeRateDisplay.propTypes = {
   secondaryTokenSymbol: PropTypes.string.isRequired,
   className: PropTypes.string,
   arrowColor: PropTypes.string,
+  boldSymbols: PropTypes.bool,
 }
diff --git a/ui/app/pages/swaps/main-quote-summary/index.scss b/ui/app/pages/swaps/main-quote-summary/index.scss
index 7993ea724..650f0717c 100644
--- a/ui/app/pages/swaps/main-quote-summary/index.scss
+++ b/ui/app/pages/swaps/main-quote-summary/index.scss
@@ -3,26 +3,70 @@
   flex-flow: column;
   align-items: center;
   position: relative;
-  height: 196px;
   width: 100%;
-  color: $white;
+  color: $Black-100;
 
-  &__quote-backdrop-with-top-tab,
-  &__quote-backdrop {
-    position: absolute;
-    box-shadow: 0 10px 39px rgba(3, 125, 214, 0.15);
-    border-radius: 8px;
-    background: #fafcff;
+  &__source-row,
+  &__destination-row {
+    width: 100%;
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+
+    @include H6;
+
+    color: $Grey-500;
+  }
+
+  &__source-row {
+    align-items: center;
   }
 
-  &__quote-backdrop-with-top-tab {
-    width: 348px;
-    height: 215px;
+  &__source-row-value,
+  &__source-row-symbol {
+    // Each of these spans can be half their container width minus the space
+    // needed for the token icon and the span margins
+    max-width: calc(50% - 13px);
   }
 
-  &__quote-backdrop {
-    width: 310px;
-    height: 164px;
+
+  &__source-row-value {
+    margin-right: 5px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  &__source-row-symbol {
+    margin-left: 5px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  &__destination-row {
+    margin-top: 6px;
+  }
+
+  &__destination-row-symbol {
+    margin-left: 5px;
+    color: $Black-100;
+  }
+
+  &__icon,
+  &__icon-fallback {
+    height: 16px;
+    width: 16px;
+  }
+
+  &__icon-fallback {
+    padding-top: 0;
+    font-size: 12px;
+    line-height: 16px;
+  }
+
+  &__down-arrow {
+    margin-top: 5px;
   }
 
   &__details {
@@ -33,62 +77,24 @@
     position: relative;
   }
 
-  &__best-quote {
-    @include H7;
-
-    font-weight: bold;
-    position: relative;
-    display: flex;
-    padding-top: 6px;
-    letter-spacing: 0.12px;
-    min-height: 16px;
-
-    > span {
-      margin-left: 4px;
-    }
-  }
-
   &__quote-details-top {
-    height: 94px;
     display: flex;
     flex-flow: column;
     justify-content: center;
     align-items: center;
     width: 100%;
-    padding: 12px;
-    padding-top: 2px;
-    margin-top: 4px;
-  }
-
-  &__bold {
-    font-weight: 900;
-  }
-
-  &__quote-small-white {
-    white-space: nowrap;
-    width: 100%;
-    text-align: center;
-    font-size: 14px;
-    margin-bottom: 8px;
-    margin-top: 6px;
   }
 
   &__quote-large {
     display: flex;
-    align-items: flex-end;
+    align-items: flex-start;
+    margin-top: 8px;
+    height: 50px;
   }
 
   &__quote-large-number {
-    font-size: 40px;
-    line-height: 32px;
-    margin-right: 6px;
-  }
-
-  &__quote-large-symbol {
-    display: flex;
-    align-items: flex-end;
-    font-size: 32px;
-    line-height: 32px;
+    font-size: 60px;
+    line-height: 48px;
   }
 
   &__quote-large-white {
@@ -104,7 +110,10 @@
     justify-content: center;
     align-items: center;
     width: 287px;
-    border-top: 1px solid rgba(255, 255, 255, 0.2);
-    height: 42px;
+    margin-top: 14px;
+  }
+
+  &__exchange-rate-display {
+    color: $Grey-500;
   }
 }
diff --git a/ui/app/pages/swaps/main-quote-summary/main-quote-summary.js b/ui/app/pages/swaps/main-quote-summary/main-quote-summary.js
index 1ae2e7d51..e4f55e42e 100644
--- a/ui/app/pages/swaps/main-quote-summary/main-quote-summary.js
+++ b/ui/app/pages/swaps/main-quote-summary/main-quote-summary.js
@@ -1,62 +1,33 @@
-import React, { useContext } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import BigNumber from 'bignumber.js'
-import classnames from 'classnames'
-import { I18nContext } from '../../../contexts/i18n'
 import { calcTokenAmount } from '../../../helpers/utils/token-util'
 import { toPrecisionWithoutTrailingZeros } from '../../../helpers/utils/util'
 import Tooltip from '../../../components/ui/tooltip'
-import SunCheckIcon from '../../../components/ui/icon/sun-check-icon.component'
+import UrlIcon from '../../../components/ui/url-icon'
 import ExchangeRateDisplay from '../exchange-rate-display'
 import { formatSwapsValueForDisplay } from '../swaps.util'
-import QuoteBackdrop from './quote-backdrop'
 
-function getFontSizes(fontSizeScore) {
-  if (fontSizeScore <= 11) {
-    return [40, 32]
-  }
-  if (fontSizeScore <= 16) {
-    return [30, 24]
+function getFontSizesAndLineHeights(fontSizeScore) {
+  if (fontSizeScore <= 9) {
+    return [60, 48]
   }
-  return [24, 14]
-}
-
-function getLineHeight(fontSizeScore) {
-  if (fontSizeScore <= 11) {
-    return 32
-  }
-  if (fontSizeScore <= 16) {
-    return 26
+  if (fontSizeScore <= 13) {
+    return [40, 32]
   }
-  return 18
-}
-
-// Returns a numerical value based on the length of the two passed strings: amount and symbol.
-// The returned value equals the number of digits in the amount string plus a value calculated
-// from the length of the symbol string. The returned number will be passed to the getFontSizes function
-// to determine the font size to apply to the amount and symbol strings when rendered. The
-// desired maximum digits and letters to show in the ultimately rendered string is 20, and in
-// such cases there can also be ellipsis shown and a decimal, combinding for a rendered "string"
-// length of ~22. As the symbol will always have a smaller font size than the amount, the
-// additive value of the symbol length to the font size score is corrected based on the total
-// number of alphanumeric characters in both strings and the desired rendered length of 22.
-function getFontSizeScore(amount, symbol) {
-  const amountLength = amount.match(/\d+/gu).join('').length
-  const symbolModifier = Math.min((amountLength + symbol.length) / 22, 1)
-  return amountLength + symbol.length * symbolModifier
+  return [26, 15]
 }
 
 export default function MainQuoteSummary({
-  isBestQuote,
   sourceValue,
   sourceSymbol,
   sourceDecimals,
+  sourceIconUrl,
   destinationValue,
   destinationSymbol,
   destinationDecimals,
+  destinationIconUrl,
 }) {
-  const t = useContext(I18nContext)
-
   const sourceAmount = toPrecisionWithoutTrailingZeros(
     calcTokenAmount(sourceValue, sourceDecimals).toString(10),
     12,
@@ -67,43 +38,54 @@ export default function MainQuoteSummary({
   )
 
   const amountToDisplay = formatSwapsValueForDisplay(destinationAmount)
-  const fontSizeScore = getFontSizeScore(amountToDisplay, destinationSymbol)
-  const [numberFontSize, symbolFontSize] = getFontSizes(fontSizeScore)
-  const lineHeight = getLineHeight(fontSizeScore)
-
+  const amountDigitLength = amountToDisplay.match(/\d+/gu).join('').length
+  const [numberFontSize, lineHeight] = getFontSizesAndLineHeights(
+    amountDigitLength,
+  )
   let ellipsedAmountToDisplay = amountToDisplay
-  if (fontSizeScore > 20) {
-    ellipsedAmountToDisplay = `${amountToDisplay.slice(
-      0,
-      amountToDisplay.length - (fontSizeScore - 20),
-    )}...`
+  if (amountDigitLength > 20) {
+    ellipsedAmountToDisplay = `${amountToDisplay.slice(0, 20)}...`
   }
 
   return (
     <div className="main-quote-summary">
-      <div
-        className={classnames('main-quote-summary__quote-backdrop', {
-          'main-quote-summary__quote-backdrop-with-top-tab': isBestQuote,
-        })}
-      >
-        <QuoteBackdrop withTopTab={isBestQuote} />
-      </div>
-      <div className="main-quote-summary__best-quote">
-        {isBestQuote && <SunCheckIcon />}
-        <span>{isBestQuote && t('swapsBestQuote')}</span>
-      </div>
       <div className="main-quote-summary__details">
         <div className="main-quote-summary__quote-details-top">
-          <span className="main-quote-summary__quote-small-white">
-            {t('swapsConvertToAbout', [
-              <span
-                className="main-quote-summary__bold"
-                key="main-quote-summary-bold-1"
-              >
-                {`${sourceAmount} ${sourceSymbol}`}
-              </span>,
-            ])}
-          </span>
+          <div className="main-quote-summary__source-row">
+            <span
+              className="main-quote-summary__source-row-value"
+              title={formatSwapsValueForDisplay(sourceAmount)}
+            >
+              {formatSwapsValueForDisplay(sourceAmount)}
+            </span>
+            <UrlIcon
+              url={sourceIconUrl}
+              className="main-quote-summary__icon"
+              name={sourceSymbol}
+              fallbackClassName="main-quote-summary__icon-fallback"
+            />
+            <span
+              className="main-quote-summary__source-row-symbol"
+              title={sourceSymbol}
+            >
+              {sourceSymbol}
+            </span>
+          </div>
+          <img
+            className="main-quote-summary__down-arrow"
+            src="images/down-arrow-grey.svg"
+          />
+          <div className="main-quote-summary__destination-row">
+            <UrlIcon
+              url={destinationIconUrl}
+              className="main-quote-summary__icon"
+              name={destinationSymbol}
+              fallbackClassName="main-quote-summary__icon-fallback"
+            />
+            <span className="main-quote-summary__destination-row-symbol">
+              {destinationSymbol}
+            </span>
+          </div>
           <div className="main-quote-summary__quote-large">
             <Tooltip
               interactive
@@ -122,15 +104,6 @@ export default function MainQuoteSummary({
                 {`${ellipsedAmountToDisplay}`}
               </span>
             </Tooltip>
-            <span
-              className="main-quote-summary__quote-large-symbol"
-              style={{
-                fontSize: symbolFontSize,
-                lineHeight: `${lineHeight}px`,
-              }}
-            >
-              {`${destinationSymbol}`}
-            </span>
           </div>
         </div>
         <div className="main-quote-summary__exchange-rate-container">
@@ -141,8 +114,9 @@ export default function MainQuoteSummary({
             secondaryTokenValue={destinationValue}
             secondaryTokenDecimals={destinationDecimals}
             secondaryTokenSymbol={destinationSymbol}
-            className="exchange-rate-display--white"
-            arrowColor="white"
+            arrowColor="#037DD6"
+            boldSymbols={false}
+            className="main-quote-summary__exchange-rate-display"
           />
         </div>
       </div>
@@ -151,7 +125,6 @@ export default function MainQuoteSummary({
 }
 
 MainQuoteSummary.propTypes = {
-  isBestQuote: PropTypes.bool,
   sourceValue: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.instanceOf(BigNumber),
@@ -167,4 +140,6 @@ MainQuoteSummary.propTypes = {
     PropTypes.number,
   ]),
   destinationSymbol: PropTypes.string.isRequired,
+  sourceIconUrl: PropTypes.string,
+  destinationIconUrl: PropTypes.string,
 }
diff --git a/ui/app/pages/swaps/main-quote-summary/main-quote-summary.stories.js b/ui/app/pages/swaps/main-quote-summary/main-quote-summary.stories.js
index f6c1ffeb2..709549d7b 100644
--- a/ui/app/pages/swaps/main-quote-summary/main-quote-summary.stories.js
+++ b/ui/app/pages/swaps/main-quote-summary/main-quote-summary.stories.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { text, number, boolean } from '@storybook/addon-knobs/react'
+import { text, number } from '@storybook/addon-knobs/react'
 import MainQuoteSummary from './main-quote-summary'
 
 export default {
@@ -8,28 +8,24 @@ export default {
 
 export const BestQuote = () => {
   return (
-    <MainQuoteSummary
-      sourceValue={text('sourceValue', '2000000000000000000')}
-      sourceDecimals={number('sourceDecimals', 18)}
-      sourceSymbol={text('sourceSymbol', 'ETH')}
-      destinationValue={text('destinationValue', '200000000000000000')}
-      destinationDecimals={number('destinationDecimals', 18)}
-      destinationSymbol={text('destinationSymbol', 'ABC')}
-      isBestQuote={boolean('isBestQuote', true)}
-    />
-  )
-}
-
-export const NotBestQuote = () => {
-  return (
-    <MainQuoteSummary
-      sourceValue={text('sourceValue', '2000000000000000000')}
-      sourceDecimals={number('sourceDecimals', 18)}
-      sourceSymbol={text('sourceSymbol', 'ETH')}
-      destinationValue={text('destinationValue', '200000000000000000')}
-      destinationDecimals={number('destinationDecimals', 18)}
-      destinationSymbol={text('destinationSymbol', 'ABC')}
-      isBestQuote={boolean('isBestQuote', false)}
-    />
+    <div
+      style={{
+        width: '360px',
+        height: '224px',
+        border: '1px solid black',
+        padding: '24px',
+      }}
+    >
+      <MainQuoteSummary
+        sourceValue={text('sourceValue', '2000000000000000000')}
+        sourceDecimals={number('sourceDecimals', 18)}
+        sourceSymbol={text('sourceSymbol', 'ETH')}
+        destinationValue={text('destinationValue', '200000000000000000')}
+        destinationDecimals={number('destinationDecimals', 18)}
+        destinationSymbol={text('destinationSymbol', 'ABC')}
+        sourceIconUrl=".storybook/images/metamark.svg"
+        destinationIconUrl=".storybook/images/sai.svg"
+      />
+    </div>
   )
 }
diff --git a/ui/app/pages/swaps/swaps.util.js b/ui/app/pages/swaps/swaps.util.js
index d3189e5b7..189ff877b 100644
--- a/ui/app/pages/swaps/swaps.util.js
+++ b/ui/app/pages/swaps/swaps.util.js
@@ -507,6 +507,7 @@ export function quotesToRenderableData(
       destinationTokenDecimals: destinationTokenInfo.decimals,
       destinationTokenSymbol: destinationTokenInfo.symbol,
       destinationTokenValue: formatSwapsValueForDisplay(destinationValue),
+      destinationIconUrl: destinationTokenInfo.iconUrl,
       isBestQuote: quote.isBestQuote,
       liquiditySourceKey,
       feeInEth,
@@ -518,6 +519,7 @@ export function quotesToRenderableData(
       sourceTokenDecimals: sourceTokenInfo.decimals,
       sourceTokenSymbol: sourceTokenInfo.symbol,
       sourceTokenValue: sourceValue,
+      sourceTokenIconUrl: sourceTokenInfo.iconUrl,
       ethValueOfTrade,
       minimumAmountReceived,
       metaMaskFee: fee,
diff --git a/ui/app/pages/swaps/view-quote/index.scss b/ui/app/pages/swaps/view-quote/index.scss
index 1b76853fb..a7fef1f42 100644
--- a/ui/app/pages/swaps/view-quote/index.scss
+++ b/ui/app/pages/swaps/view-quote/index.scss
@@ -44,13 +44,13 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    min-height: 46px;
   }
 
   &__view-other-button,
   &__view-other-button-fade {
     display: flex;
     align-items: center;
-    margin-bottom: 16px;
     position: absolute;
 
     @include H7;
@@ -87,10 +87,12 @@
   }
 
   &__insufficient-eth-warning-wrapper {
-    margin-top: 8px;
     width: 100%;
     align-items: center;
     justify-content: center;
+    width: intrinsic;           /* Safari/WebKit uses a non-standard name */
+    width: max-content;
+    max-width: 340px;
 
     @media screen and (min-width: 576px) {
       min-height: 36px;
@@ -127,7 +129,6 @@
 
   &__fee-card-container {
     width: 100%;
-    margin-top: 8px;
     margin-bottom: 8px;
 
     @media screen and (min-width: 576px) {
@@ -139,21 +140,8 @@
     }
   }
 
-  &__main-quote-summary-container {
-    margin-top: 24px;
-
-    @media screen and (max-width: 576px) {
-      margin-top: 0;
-    }
-
-    &--thin {
-      margin-top: 8px;
-    }
-  }
-
   &__metamask-rate {
     display: flex;
-    margin-top: 8%;
   }
 
   &__metamask-rate-text {
diff --git a/ui/app/pages/swaps/view-quote/view-quote.js b/ui/app/pages/swaps/view-quote/view-quote.js
index 8528a38b3..71279aeaf 100644
--- a/ui/app/pages/swaps/view-quote/view-quote.js
+++ b/ui/app/pages/swaps/view-quote/view-quote.js
@@ -115,7 +115,6 @@ export default function ViewQuote() {
   const usedQuote = selectedQuote || topQuote
   const tradeValue = usedQuote?.trade?.value ?? '0x0'
 
-  const { isBestQuote } = usedQuote
   const fetchParamsSourceToken = fetchParams?.sourceToken
 
   const usedGasLimit =
@@ -190,9 +189,11 @@ export default function ViewQuote() {
     destinationTokenDecimals,
     destinationTokenSymbol,
     destinationTokenValue,
+    destinationIconUrl,
     sourceTokenDecimals,
     sourceTokenSymbol,
     sourceTokenValue,
+    sourceTokenIconUrl,
   } = renderableDataForUsedQuote
 
   const { feeInFiat, feeInEth } = getRenderableNetworkFeesForQuote(
@@ -494,24 +495,19 @@ export default function ViewQuote() {
             labelKey="swapNewQuoteIn"
           />
         </div>
-        <div
-          className={classnames('view-quote__main-quote-summary-container', {
-            'view-quote__main-quote-summary-container--thin': showWarning,
-          })}
-        >
-          <MainQuoteSummary
-            sourceValue={calcTokenValue(sourceTokenValue, sourceTokenDecimals)}
-            sourceDecimals={sourceTokenDecimals}
-            sourceSymbol={sourceTokenSymbol}
-            destinationValue={calcTokenValue(
-              destinationTokenValue,
-              destinationTokenDecimals,
-            )}
-            destinationDecimals={destinationTokenDecimals}
-            destinationSymbol={destinationTokenSymbol}
-            isBestQuote={isBestQuote}
-          />
-        </div>
+        <MainQuoteSummary
+          sourceValue={calcTokenValue(sourceTokenValue, sourceTokenDecimals)}
+          sourceDecimals={sourceTokenDecimals}
+          sourceSymbol={sourceTokenSymbol}
+          destinationValue={calcTokenValue(
+            destinationTokenValue,
+            destinationTokenDecimals,
+          )}
+          destinationDecimals={destinationTokenDecimals}
+          destinationSymbol={destinationTokenSymbol}
+          sourceIconUrl={sourceTokenIconUrl}
+          destinationIconUrl={destinationIconUrl}
+        />
         <div className="view-quote__view-other-button-container">
           <div className="view-quote__view-other-button">
             {t('swapNQuotesAvailable', [Object.values(quotes).length])}