diff --git a/src/components/Swap/PriceImpactRow.test.tsx b/src/components/Swap/PriceImpactRow.test.tsx
index 7943f8255..b828baffa 100644
--- a/src/components/Swap/PriceImpactRow.test.tsx
+++ b/src/components/Swap/PriceImpactRow.test.tsx
@@ -10,12 +10,11 @@ describe('PriceImpactRow', () => {
         impact={{
           percent: new Percent(10, 100),
           warning: 'error',
-          toString: () => '10%',
         }}
       />
     )
     // verify that the percentage string is visible
-    expect(el.getByText('(10%)')).toBeTruthy()
+    expect(el.getByText('(10.00%)')).toBeTruthy()
     // verify the tooltip is visible
     const iconElement = el.container.querySelector('svg')
     expect(iconElement).toBeTruthy()
@@ -27,12 +26,11 @@ describe('PriceImpactRow', () => {
         impact={{
           percent: new Percent(1, 100),
           warning: 'warning',
-          toString: () => '1%',
         }}
       />
     )
     // verify that the percentage string is visible
-    expect(el.getByText('(1%)')).toBeTruthy()
+    expect(el.getByText('(1.00%)')).toBeTruthy()
     // verify the tooltip is visible
     const iconElement = el.container.querySelector('svg')
     expect(iconElement).toBeTruthy()
@@ -43,7 +41,6 @@ describe('PriceImpactRow', () => {
       <PriceImpactRow
         impact={{
           percent: new Percent(1, 10000),
-          toString: () => '0.01%',
         }}
       />
     )
diff --git a/src/components/Swap/PriceImpactRow.tsx b/src/components/Swap/PriceImpactRow.tsx
index 56248973d..bb0a3570c 100644
--- a/src/components/Swap/PriceImpactRow.tsx
+++ b/src/components/Swap/PriceImpactRow.tsx
@@ -1,4 +1,5 @@
 import { Trans } from '@lingui/macro'
+import { formatPriceImpact } from '@uniswap/conedison/format'
 import Row from 'components/Row'
 import Tooltip, { SmallToolTipBody } from 'components/Tooltip'
 import { PriceImpact } from 'hooks/usePriceImpact'
@@ -17,7 +18,7 @@ export function PriceImpactRow({ impact, reverse }: PriceImpactProps) {
   return (
     <Row gap={0.25} flex align="center" flow={reverse ? 'row-reverse' : 'row wrap'}>
       <ThemedText.Body2 userSelect={false} color={impact.warning ?? 'hint'}>
-        ({impact.toString()})
+        ({formatPriceImpact(impact?.percent)})
       </ThemedText.Body2>
       {impact?.warning && (
         <Tooltip icon={AlertTriangle} iconProps={{ color: impact.warning }} data-testid="alert-tooltip">
diff --git a/src/components/Swap/Summary/Details.tsx b/src/components/Swap/Summary/Details.tsx
index 6d577efba..a0bb7a54e 100644
--- a/src/components/Swap/Summary/Details.tsx
+++ b/src/components/Swap/Summary/Details.tsx
@@ -1,5 +1,5 @@
 import { t } from '@lingui/macro'
-import { formatCurrencyAmount, NumberType } from '@uniswap/conedison/format'
+import { formatCurrencyAmount, formatPriceImpact, NumberType } from '@uniswap/conedison/format'
 import { Currency, CurrencyAmount, Token } from '@uniswap/sdk-core'
 import Column from 'components/Column'
 import { useIsDialogPageCentered } from 'components/Dialog'
@@ -26,6 +26,7 @@ import { getEstimateMessage } from './Estimate'
 const Label = styled.span`
   color: ${({ theme }) => theme.secondary};
   margin-right: 0.5rem;
+  max-width: 75%;
 `
 const Value = styled.span<{ color?: Color }>`
   color: ${({ color, theme }) => color && theme[color]};
@@ -52,7 +53,7 @@ interface DetailProps {
 function Detail({ label, value, color }: DetailProps) {
   return (
     <ThemedText.Body2 userSelect>
-      <Row flex align="flex-start">
+      <Row flex align="flex-start" flow="no-wrap">
         <Label>{label}</Label>
         <DetailValue color={color}>{value}</DetailValue>
       </Row>
@@ -152,7 +153,7 @@ export default function Details({ trade, slippage, gasUseEstimateUSD, inputUSDC,
     }
 
     if (impact) {
-      details.push([t`Price impact`, impact?.percent ? impact?.toString() : '-', impact.warning])
+      details.push([t`Price impact`, impact?.percent ? formatPriceImpact(impact?.percent) : '-', impact.warning])
     }
 
     const { estimateMessage, descriptor, value } = getEstimateMessage(trade, slippage)
diff --git a/src/components/Swap/Summary/Summary.tsx b/src/components/Swap/Summary/Summary.tsx
index 988217360..9b9b98f5a 100644
--- a/src/components/Swap/Summary/Summary.tsx
+++ b/src/components/Swap/Summary/Summary.tsx
@@ -1,3 +1,4 @@
+import { formatPriceImpact } from '@uniswap/conedison/format'
 import { Currency, CurrencyAmount } from '@uniswap/sdk-core'
 import { PriceImpact } from 'hooks/usePriceImpact'
 import { ArrowDown, ArrowRight } from 'icons'
@@ -56,7 +57,9 @@ export default function Summary({ input, output, inputUSDC, outputUSDC, impact,
       <TokenValue input={input} usdc={inputUSDC} open={open} />
       {open ? <ArrowRight /> : <ArrowDown />}
       <TokenValue input={output} usdc={outputUSDC} open={open}>
-        {impact && <ThemedText.Caption color={impact.warning}>({impact.toString()})</ThemedText.Caption>}
+        {impact && (
+          <ThemedText.Caption color={impact.warning}>({formatPriceImpact(impact?.percent)})</ThemedText.Caption>
+        )}
       </TokenValue>
     </>
   )
diff --git a/src/components/Swap/Summary/index.tsx b/src/components/Swap/Summary/index.tsx
index 44a99ca33..511b1b473 100644
--- a/src/components/Swap/Summary/index.tsx
+++ b/src/components/Swap/Summary/index.tsx
@@ -1,4 +1,5 @@
 import { t, Trans } from '@lingui/macro'
+import { formatPriceImpact } from '@uniswap/conedison/format'
 import { Currency, CurrencyAmount, Token } from '@uniswap/sdk-core'
 import ActionButton, { Action, ActionButtonColor } from 'components/ActionButton'
 import Column from 'components/Column'
@@ -289,7 +290,8 @@ export function SummaryDialog(props: SummaryDialogProps) {
     <>
       {showSpeedbump && props.impact ? (
         <SpeedBumpDialog onAcknowledge={onAcknowledgeSpeedbump}>
-          {t`This transaction will result in a`} <PriceImpactText>{props.impact.toString()} </PriceImpactText>
+          {t`This transaction will result in a`}{' '}
+          <PriceImpactText>{formatPriceImpact(props.impact?.percent)} </PriceImpactText>
           {t`price impact on the market price of this pool. Do you wish to continue? `}
         </SpeedBumpDialog>
       ) : (
diff --git a/src/components/Swap/Toolbar/index.tsx b/src/components/Swap/Toolbar/index.tsx
index d6f4e845e..5b03747a5 100644
--- a/src/components/Swap/Toolbar/index.tsx
+++ b/src/components/Swap/Toolbar/index.tsx
@@ -1,5 +1,5 @@
 import { t, Trans } from '@lingui/macro'
-import { formatCurrencyAmount, NumberType } from '@uniswap/conedison/format'
+import { formatCurrencyAmount, formatPriceImpact, NumberType } from '@uniswap/conedison/format'
 import ActionButton from 'components/ActionButton'
 import Column from 'components/Column'
 import Expando from 'components/Expando'
@@ -119,7 +119,7 @@ function CaptionRow() {
       {
         color: impact?.warning,
         name: t`Price impact`,
-        value: impact?.percent ? impact?.toString() : '-',
+        value: impact?.percent ? formatPriceImpact(impact.percent) : '-',
         valueTooltip: impact?.warning
           ? {
               icon: AlertTriangle,
@@ -129,7 +129,7 @@ function CaptionRow() {
       },
       {
         // min/max output/input after slippage
-        name: <div style={{ marginRight: '0.25em' }}>{descriptor}</div>,
+        name: <div style={{ marginRight: '0.5em' }}>{descriptor}</div>,
         value,
       },
       {
diff --git a/src/hooks/usePriceImpact.test.tsx b/src/hooks/usePriceImpact.test.tsx
index 85bccdbdc..b8486282a 100644
--- a/src/hooks/usePriceImpact.test.tsx
+++ b/src/hooks/usePriceImpact.test.tsx
@@ -1,3 +1,4 @@
+import { formatPriceImpact } from '@uniswap/conedison/format'
 import { CurrencyAmount, TradeType } from '@uniswap/sdk-core'
 import { InterfaceTrade } from 'state/routing/types'
 import { renderHook } from 'test'
@@ -16,7 +17,7 @@ describe('usePriceImpact', () => {
       tradeType: TradeType.EXACT_INPUT,
     })
     const { result } = renderHook(() => usePriceImpact(trade))
-    expect(result.current?.toString()).toEqual('-99.61%')
+    expect(formatPriceImpact(result.current?.percent)).toEqual('99.61%')
     expect(result.current?.warning).toEqual('error')
   })
 })
diff --git a/src/hooks/usePriceImpact.ts b/src/hooks/usePriceImpact.ts
index 6ce3b9656..386924679 100644
--- a/src/hooks/usePriceImpact.ts
+++ b/src/hooks/usePriceImpact.ts
@@ -9,7 +9,6 @@ import { useUSDCValue } from './useUSDCPrice'
 export interface PriceImpact {
   percent: Percent
   warning?: 'warning' | 'error'
-  toString(): string
 }
 
 export function usePriceImpact(trade?: InterfaceTrade): PriceImpact | undefined {
@@ -19,7 +18,6 @@ export function usePriceImpact(trade?: InterfaceTrade): PriceImpact | undefined
       ? {
           percent: marketPriceImpact,
           warning: getPriceImpactWarning(marketPriceImpact),
-          toString: () => toHumanReadablePercent(marketPriceImpact),
         }
       : undefined
   }, [trade])
@@ -35,17 +33,6 @@ export function useFiatValueChange(trade?: InterfaceTrade) {
     return {
       percent: fiatPriceImpact,
       warning: getPriceImpactWarning(fiatPriceImpact),
-      toString: () => toHumanReadablePercent(fiatPriceImpact),
     }
   }, [inputUSDCValue, outputUSDCValue])
 }
-
-export function toHumanReadablePercent(priceImpact: Percent): string {
-  const sign = priceImpact.lessThan(0) ? '+' : ''
-  const exactFloat = (Number(priceImpact.numerator) / Number(priceImpact.denominator)) * 100
-  if (exactFloat < 0.005) {
-    return '0.00%'
-  }
-  const number = parseFloat(priceImpact.multiply(-1)?.toFixed(2))
-  return `${sign}${number}%`
-}
diff --git a/src/hooks/useSlippage.ts b/src/hooks/useSlippage.ts
index 8228f11cd..93fcb9689 100644
--- a/src/hooks/useSlippage.ts
+++ b/src/hooks/useSlippage.ts
@@ -1,3 +1,4 @@
+import { formatPriceImpact } from '@uniswap/conedison/format'
 import { CurrencyAmount, Percent, Token } from '@uniswap/sdk-core'
 import useAutoSlippageTolerance, { DEFAULT_AUTO_SLIPPAGE } from 'hooks/useAutoSlippageTolerance'
 import { useAtomValue } from 'jotai/utils'
@@ -5,8 +6,6 @@ import { useMemo } from 'react'
 import { InterfaceTrade } from 'state/routing/types'
 import { slippageAtom } from 'state/swap/settings'
 
-import { toHumanReadablePercent } from './usePriceImpact'
-
 export function toPercent(maxSlippage: string | undefined): Percent | undefined {
   if (!maxSlippage) return undefined
   if (Number.isNaN(maxSlippage)) return undefined
@@ -54,5 +53,5 @@ export function getSlippageWarning(slippage?: Percent): 'warning' | 'error' | un
 }
 
 export function formatSlippage(slippage: Slippage): string {
-  return toHumanReadablePercent(slippage.allowed)
+  return formatPriceImpact(slippage.allowed)
 }