diff --git a/src/assets/translations/en/main.json b/src/assets/translations/en/main.json
index 60f38fdc016..0a2e5aab12e 100644
--- a/src/assets/translations/en/main.json
+++ b/src/assets/translations/en/main.json
@@ -2226,8 +2226,7 @@
       "yourLoans": "Your Loans",
       "emptyTitle": "The Land of Zero Loans!",
       "emptyBody": "It appears you don't have any loans at the moment. Is this financial zen or just a break before your next big lending adventure? Either way, enjoy the calm!"
-    },
-    "unsafeBorrow": "This borrow has high slippage (%{slippagePercentage}%). Proceed with caution."
+    }
   },
   "foxDiscounts": {
     "currentFoxPower": "Your FOX Power",
@@ -2332,6 +2331,14 @@
       }
     }
   },
+  "warningAcknowledgement": {
+    "understand": "I understand",
+    "attention": "Attention!",
+    "highSlippageDeposit": "This deposit has high slippage (%{slippagePercentage}%). Proceed with caution.",
+    "highSlippageBorrow": "This borrow has high slippage (%{slippagePercentage}%). Proceed with caution.",
+    "highSlippageTrade": "This trade is impacted by price movement (%{slippagePercentage}%). Proceed with caution.",
+    "unsafeTrade": "This trade may be unsafe or below the recommended minimum size, proceed with caution."
+  },
   "watchlist": {
     "empty": {
       "title": "Start building your watchlist",
diff --git a/src/components/MultiHopTrade/components/MultiHopTradeConfirm/MultiHopTradeConfirm.tsx b/src/components/MultiHopTrade/components/MultiHopTradeConfirm/MultiHopTradeConfirm.tsx
index 4b6452f1cd1..88b85c4c015 100644
--- a/src/components/MultiHopTrade/components/MultiHopTradeConfirm/MultiHopTradeConfirm.tsx
+++ b/src/components/MultiHopTrade/components/MultiHopTradeConfirm/MultiHopTradeConfirm.tsx
@@ -1,11 +1,18 @@
 import { Card, CardBody, CardHeader, Heading, useDisclosure, usePrevious } from '@chakra-ui/react'
-import { memo, useCallback, useEffect, useMemo } from 'react'
+import { memo, useCallback, useEffect, useMemo, useState } from 'react'
+import { useTranslate } from 'react-polyglot'
 import { useHistory } from 'react-router-dom'
 import { WithBackButton } from 'components/MultiHopTrade/components/WithBackButton'
+import { usePriceImpact } from 'components/MultiHopTrade/hooks/quoteValidation/usePriceImpact'
 import { TradeSlideTransition } from 'components/MultiHopTrade/TradeSlideTransition'
 import { TradeRoutePaths } from 'components/MultiHopTrade/types'
 import { Text } from 'components/Text'
-import { selectTradeExecutionState } from 'state/slices/tradeQuoteSlice/selectors'
+import { WarningAcknowledgement } from 'components/WarningAcknowledgement/WarningAcknowledgement'
+import { bnOrZero } from 'lib/bignumber/bignumber'
+import {
+  selectActiveQuote,
+  selectTradeExecutionState,
+} from 'state/slices/tradeQuoteSlice/selectors'
 import { tradeQuoteSlice } from 'state/slices/tradeQuoteSlice/tradeQuoteSlice'
 import { TradeExecutionState } from 'state/slices/tradeQuoteSlice/types'
 import { useAppDispatch, useAppSelector } from 'state/store'
@@ -22,10 +29,15 @@ const useDisclosureProps = {
 
 export const MultiHopTradeConfirm = memo(() => {
   const dispatch = useAppDispatch()
+  const translate = useTranslate()
   const tradeExecutionState = useAppSelector(selectTradeExecutionState)
   const previousTradeExecutionState = usePrevious(tradeExecutionState)
   const history = useHistory()
 
+  const [shouldShowWarningAcknowledgement, setShouldShowWarningAcknowledgement] = useState(false)
+  const activeQuote = useAppSelector(selectActiveQuote)
+  const { isModeratePriceImpact, priceImpactPercentage } = usePriceImpact(activeQuote)
+
   const { isLoading } = useIsApprovalInitiallyNeeded()
 
   useEffect(() => {
@@ -65,6 +77,18 @@ export const MultiHopTradeConfirm = memo(() => {
     [tradeExecutionState],
   )
 
+  const handleTradeConfirm = useCallback(() => {
+    dispatch(tradeQuoteSlice.actions.confirmTrade())
+  }, [dispatch])
+
+  const handleSubmit = useCallback(() => {
+    if (isModeratePriceImpact) {
+      setShouldShowWarningAcknowledgement(true)
+    } else {
+      handleTradeConfirm()
+    }
+  }, [handleTradeConfirm, isModeratePriceImpact])
+
   return (
     <TradeSlideTransition>
       <Card
@@ -74,38 +98,47 @@ export const MultiHopTradeConfirm = memo(() => {
         variant='dashboard'
         maxWidth='500px'
       >
-        <CardHeader px={6} pt={4}>
-          <WithBackButton onBack={handleBack}>
-            <Heading textAlign='center' fontSize='md'>
-              <Text
-                translation={
-                  [TradeExecutionState.Initializing, TradeExecutionState.Previewing].includes(
-                    tradeExecutionState,
-                  )
-                    ? 'trade.confirmDetails'
-                    : 'trade.trade'
-                }
-              />
-            </Heading>
-          </WithBackButton>
-        </CardHeader>
-        {isTradeComplete ? (
-          <TradeSuccessTemp handleBack={handleBack}>
-            <Hops isFirstHopOpen isSecondHopOpen />
-          </TradeSuccessTemp>
-        ) : (
-          <>
-            <CardBody py={0} px={0}>
-              <Hops
-                isFirstHopOpen={isFirstHopOpen}
-                isSecondHopOpen={isSecondHopOpen}
-                onToggleFirstHop={onToggleFirstHop}
-                onToggleSecondHop={onToggleSecondHop}
-              />
-            </CardBody>
-            <Footer />
-          </>
-        )}
+        <WarningAcknowledgement
+          message={translate('warningAcknowledgement.highSlippageTrade', {
+            slippagePercentage: bnOrZero(priceImpactPercentage).toFixed(2).toString(),
+          })}
+          onAcknowledge={handleTradeConfirm}
+          shouldShowWarningAcknowledgement={shouldShowWarningAcknowledgement}
+          setShouldShowWarningAcknowledgement={setShouldShowWarningAcknowledgement}
+        >
+          <CardHeader px={6} pt={4}>
+            <WithBackButton onBack={handleBack}>
+              <Heading textAlign='center' fontSize='md'>
+                <Text
+                  translation={
+                    [TradeExecutionState.Initializing, TradeExecutionState.Previewing].includes(
+                      tradeExecutionState,
+                    )
+                      ? 'trade.confirmDetails'
+                      : 'trade.trade'
+                  }
+                />
+              </Heading>
+            </WithBackButton>
+          </CardHeader>
+          {isTradeComplete ? (
+            <TradeSuccessTemp handleBack={handleBack}>
+              <Hops isFirstHopOpen isSecondHopOpen />
+            </TradeSuccessTemp>
+          ) : (
+            <>
+              <CardBody py={0} px={0}>
+                <Hops
+                  isFirstHopOpen={isFirstHopOpen}
+                  isSecondHopOpen={isSecondHopOpen}
+                  onToggleFirstHop={onToggleFirstHop}
+                  onToggleSecondHop={onToggleSecondHop}
+                />
+              </CardBody>
+              <Footer handleSubmit={handleSubmit} />
+            </>
+          )}
+        </WarningAcknowledgement>
       </Card>
     </TradeSlideTransition>
   )
diff --git a/src/components/MultiHopTrade/components/MultiHopTradeConfirm/components/Footer.tsx b/src/components/MultiHopTrade/components/MultiHopTradeConfirm/components/Footer.tsx
index 8062119201f..40ab33beba5 100644
--- a/src/components/MultiHopTrade/components/MultiHopTradeConfirm/components/Footer.tsx
+++ b/src/components/MultiHopTrade/components/MultiHopTradeConfirm/components/Footer.tsx
@@ -9,39 +9,34 @@ import {
   Stack,
 } from '@chakra-ui/react'
 import { SwapperName } from '@shapeshiftoss/swapper'
-import { useCallback, useMemo } from 'react'
+import type { FC } from 'react'
+import { useMemo } from 'react'
 import { useTranslate } from 'react-polyglot'
-import { usePriceImpact } from 'components/MultiHopTrade/hooks/quoteValidation/usePriceImpact'
 import { chainSupportsTxHistory } from 'components/MultiHopTrade/utils'
 import { Text } from 'components/Text'
 import type { TextPropTypes } from 'components/Text/Text'
 import { bnOrZero } from 'lib/bignumber/bignumber'
 import {
-  selectActiveQuote,
   selectActiveSwapperName,
   selectLastHopBuyAsset,
   selectQuoteSellAmountUserCurrency,
   selectTotalNetworkFeeUserCurrencyPrecision,
   selectTradeExecutionState,
 } from 'state/slices/tradeQuoteSlice/selectors'
-import { tradeQuoteSlice } from 'state/slices/tradeQuoteSlice/tradeQuoteSlice'
 import { TradeExecutionState } from 'state/slices/tradeQuoteSlice/types'
-import { useAppDispatch, useAppSelector } from 'state/store'
+import { useAppSelector } from 'state/store'
 
-export const Footer = () => {
+type FooterProps = {
+  handleSubmit: () => void
+}
+
+export const Footer: FC<FooterProps> = ({ handleSubmit }) => {
   const translate = useTranslate()
-  const dispatch = useAppDispatch()
   const swapperName = useAppSelector(selectActiveSwapperName)
-  const activeQuote = useAppSelector(selectActiveQuote)
   const lastHopBuyAsset = useAppSelector(selectLastHopBuyAsset)
   const tradeExecutionState = useAppSelector(selectTradeExecutionState)
   const networkFeeUserCurrency = useAppSelector(selectTotalNetworkFeeUserCurrencyPrecision)
   const sellAmountBeforeFeesUserCurrency = useAppSelector(selectQuoteSellAmountUserCurrency)
-  const { isModeratePriceImpact } = usePriceImpact(activeQuote)
-
-  const handleConfirm = useCallback(() => {
-    dispatch(tradeQuoteSlice.actions.confirmTrade())
-  }, [dispatch])
 
   const networkFeeToTradeRatioPercentage = useMemo(
     () =>
@@ -140,13 +135,13 @@ export const Footer = () => {
         </Alert>
       )}
       <Button
-        colorScheme={isModeratePriceImpact ? 'red' : 'blue'}
+        colorScheme={'blue'}
         size='lg'
         width='full'
-        onClick={handleConfirm}
+        onClick={handleSubmit}
         isLoading={isLoading}
       >
-        <Text translation={isModeratePriceImpact ? 'trade.tradeAnyway' : 'trade.confirmAndTrade'} />
+        <Text translation={'trade.confirmAndTrade'} />
       </Button>
     </CardFooter>
   ) : null
diff --git a/src/components/MultiHopTrade/components/TradeInput/TradeInput.tsx b/src/components/MultiHopTrade/components/TradeInput/TradeInput.tsx
index cadfc4f5e1e..82789102c73 100644
--- a/src/components/MultiHopTrade/components/TradeInput/TradeInput.tsx
+++ b/src/components/MultiHopTrade/components/TradeInput/TradeInput.tsx
@@ -1,8 +1,5 @@
 import { ArrowDownIcon } from '@chakra-ui/icons'
 import {
-  Alert,
-  AlertDescription,
-  AlertIcon,
   Button,
   Card,
   CardFooter,
@@ -39,6 +36,7 @@ import { useReceiveAddress } from 'components/MultiHopTrade/hooks/useReceiveAddr
 import { TradeSlideTransition } from 'components/MultiHopTrade/TradeSlideTransition'
 import { TradeRoutePaths } from 'components/MultiHopTrade/types'
 import { Text } from 'components/Text'
+import { WarningAcknowledgement } from 'components/WarningAcknowledgement/WarningAcknowledgement'
 import { WalletActions } from 'context/WalletProvider/actions'
 import { useErrorHandler } from 'hooks/useErrorToast/useErrorToast'
 import { useIsSmartContractAddress } from 'hooks/useIsSmartContractAddress/useIsSmartContractAddress'
@@ -132,6 +130,7 @@ export const TradeInput = memo(({ isCompact }: TradeInputProps) => {
   const { showErrorToast } = useErrorHandler()
   const [isCompactQuoteListOpen, setIsCompactQuoteListOpen] = useState(false)
   const [isConfirmationLoading, setIsConfirmationLoading] = useState(false)
+  const [shouldShowWarningAcknowledgement, setShouldShowWarningAcknowledgement] = useState(false)
   const isKeplr = useMemo(() => !!wallet && isKeplrHDWallet(wallet), [wallet])
   const buyAssetSearch = useModal('buyTradeAssetSearch')
   const sellAssetSearch = useModal('sellTradeAssetSearch')
@@ -377,13 +376,13 @@ export const TradeInput = memo(({ isCompact }: TradeInputProps) => {
     wallet,
   ])
 
-  const [isUnsafeQuoteNoticeDismissed, setIsUnsafeQuoteNoticeDismissed] = useState<boolean | null>(
-    null,
-  )
-
   useEffect(() => {
-    if (isUnsafeQuote) setIsUnsafeQuoteNoticeDismissed(false)
-  }, [isUnsafeQuote])
+    // Reset the trade warning if the active quote has changed, i.e. a better quote has come in and the
+    // user has not yet confirmed the previous one
+    if (shouldShowWarningAcknowledgement) setShouldShowWarningAcknowledgement(false)
+    // We need to ignore changes to shouldShowWarningAcknowledgement or this effect will react to itself
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [activeQuote])
 
   const quoteHasError = useMemo(() => {
     if (!isAnyTradeQuoteLoaded) return false
@@ -424,42 +423,6 @@ export const TradeInput = memo(({ isCompact }: TradeInputProps) => {
     isTradeQuoteApiQueryPending,
   ])
 
-  const maybeUnsafeTradeWarning = useMemo(() => {
-    if (!isUnsafeQuote) return null
-
-    const recommendedMinimumCryptoBaseUnit = (activeQuote as ThorTradeQuote)
-      ?.recommendedMinimumCryptoBaseUnit
-    if (!recommendedMinimumCryptoBaseUnit) return null
-    const recommendedMinimumCryptoPrecision = fromBaseUnit(
-      recommendedMinimumCryptoBaseUnit,
-      sellAsset.precision,
-    )
-
-    return (
-      <Flex direction='column' gap={2}>
-        <Alert status='error' width='auto' fontSize='sm' variant='solid'>
-          <AlertIcon color='red' />
-          <Stack spacing={0}>
-            <AlertDescription lineHeight='short'>
-              {translate('trade.errors.unsafeQuote', {
-                symbol: sellAsset.symbol,
-                recommendedMin: recommendedMinimumCryptoPrecision,
-              })}
-            </AlertDescription>
-          </Stack>
-        </Alert>
-      </Flex>
-    )
-  }, [activeQuote, isUnsafeQuote, sellAsset.precision, sellAsset.symbol, translate])
-
-  const handleAcknowledgeUnsafeQuote = useCallback(() => {
-    // We don't want to *immediately* set this or there will be a "click-through"
-    // i.e the regular continue button will render immediately, and click will bubble to it
-    setTimeout(() => {
-      setIsUnsafeQuoteNoticeDismissed(true)
-    }, 100)
-  }, [])
-
   const handleCloseCompactQuoteList = useCallback(() => setIsCompactQuoteListOpen(false), [])
 
   const handleOpenCompactQuoteList = useCallback(() => {
@@ -524,28 +487,17 @@ export const TradeInput = memo(({ isCompact }: TradeInputProps) => {
         >
           <WithLazyMount shouldUse={Boolean(receiveAddress)} component={RecipientAddress} />
           <WithLazyMount shouldUse={!walletSupportsBuyAssetChain} component={ManualAddressEntry} />
-          {maybeUnsafeTradeWarning}
-          {isUnsafeQuote && !isUnsafeQuoteNoticeDismissed ? (
-            <Button
-              colorScheme='red'
-              size='lg-multiline'
-              mx={-2}
-              onClick={handleAcknowledgeUnsafeQuote}
-            >
-              <Text translation={'defi.modals.saversVaults.understand'} />
-            </Button>
-          ) : (
-            <Button
-              type='submit'
-              colorScheme={quoteHasError ? 'red' : 'blue'}
-              size='lg-multiline'
-              data-test='trade-form-preview-button'
-              isDisabled={shouldDisablePreviewButton}
-              mx={-2}
-            >
-              <Text translation={quoteStatusTranslation} />
-            </Button>
-          )}
+
+          <Button
+            type='submit'
+            colorScheme={quoteHasError ? 'red' : 'blue'}
+            size='lg-multiline'
+            data-test='trade-form-preview-button'
+            isDisabled={shouldDisablePreviewButton}
+            mx={-2}
+          >
+            <Text translation={quoteStatusTranslation} />
+          </Button>
         </CardFooter>
       </>
     ),
@@ -568,10 +520,6 @@ export const TradeInput = memo(({ isCompact }: TradeInputProps) => {
       priceImpactPercentage,
       receiveAddress,
       walletSupportsBuyAssetChain,
-      maybeUnsafeTradeWarning,
-      isUnsafeQuote,
-      isUnsafeQuoteNoticeDismissed,
-      handleAcknowledgeUnsafeQuote,
       quoteHasError,
       shouldDisablePreviewButton,
       quoteStatusTranslation,
@@ -579,6 +527,10 @@ export const TradeInput = memo(({ isCompact }: TradeInputProps) => {
   )
 
   const handleFormSubmit = useMemo(() => handleSubmit(onSubmit), [handleSubmit, onSubmit])
+  const handleTradeQuoteConfirm = useCallback(
+    () => (isUnsafeQuote ? setShouldShowWarningAcknowledgement(true) : handleFormSubmit()),
+    [handleFormSubmit, isUnsafeQuote],
+  )
 
   const sellTradeAssetSelect = useMemo(
     () => (
@@ -607,6 +559,21 @@ export const TradeInput = memo(({ isCompact }: TradeInputProps) => {
     return !walletSupportsBuyAssetChain
   }, [walletSupportsBuyAssetChain])
 
+  const warningAcknowledgementMessage = (() => {
+    const recommendedMinimumCryptoBaseUnit = (activeQuote as ThorTradeQuote)
+      ?.recommendedMinimumCryptoBaseUnit
+    if (!recommendedMinimumCryptoBaseUnit) return translate('warningAcknowledgement.unsafeTrade')
+    const recommendedMinimumCryptoPrecision = fromBaseUnit(
+      recommendedMinimumCryptoBaseUnit,
+      sellAsset.precision,
+    )
+    const message = translate('trade.errors.unsafeQuote', {
+      symbol: sellAsset.symbol,
+      recommendedMin: recommendedMinimumCryptoPrecision,
+    })
+    return message
+  })()
+
   return (
     <TradeSlideTransition>
       <WithLazyMount shouldUse={hasUserEnteredAmount} component={GetTradeQuotes} />
@@ -635,92 +602,99 @@ export const TradeInput = memo(({ isCompact }: TradeInputProps) => {
               visibility={isCompactQuoteListOpen ? 'hidden' : undefined}
               position={isCompactQuoteListOpen ? 'absolute' : undefined}
             >
-              <Stack spacing={0} as='form' onSubmit={handleFormSubmit}>
-                <CardHeader px={6}>
-                  <Flex alignItems='center' justifyContent='space-between'>
-                    <Heading as='h5' fontSize='md'>
-                      {translate('navBar.trade')}
-                    </Heading>
-                    <Flex gap={2} alignItems='center'>
-                      {activeQuote && (isCompact || isSmallerThanXl) && (
-                        <CountdownSpinner isLoading={isLoading || isRefetching} />
-                      )}
-                      <SlippagePopover />
+              <WarningAcknowledgement
+                message={warningAcknowledgementMessage}
+                onAcknowledge={handleFormSubmit}
+                shouldShowWarningAcknowledgement={shouldShowWarningAcknowledgement}
+                setShouldShowWarningAcknowledgement={setShouldShowWarningAcknowledgement}
+              >
+                <Stack spacing={0} as='form' onSubmit={handleTradeQuoteConfirm}>
+                  <CardHeader px={6}>
+                    <Flex alignItems='center' justifyContent='space-between'>
+                      <Heading as='h5' fontSize='md'>
+                        {translate('navBar.trade')}
+                      </Heading>
+                      <Flex gap={2} alignItems='center'>
+                        {activeQuote && (isCompact || isSmallerThanXl) && (
+                          <CountdownSpinner isLoading={isLoading || isRefetching} />
+                        )}
+                        <SlippagePopover />
+                      </Flex>
                     </Flex>
-                  </Flex>
-                </CardHeader>
-                <Stack spacing={0}>
-                  <SellAssetInput
-                    accountId={initialSellAssetAccountId}
-                    asset={sellAsset}
-                    label={translate('trade.payWith')}
-                    onAccountIdChange={setSellAssetAccountId}
-                    labelPostFix={sellTradeAssetSelect}
-                    percentOptions={percentOptions}
-                  />
-                  <Flex alignItems='center' justifyContent='center' my={-2}>
-                    <Divider />
-                    <CircularProgress
-                      color='blue.500'
-                      thickness='4px'
-                      size='34px'
-                      trackColor='transparent'
-                      isIndeterminate={isLoading}
-                      borderRadius='full'
-                    >
-                      <CircularProgressLabel
-                        fontSize='md'
-                        display='flex'
-                        alignItems='center'
-                        justifyContent='center'
+                  </CardHeader>
+                  <Stack spacing={0}>
+                    <SellAssetInput
+                      accountId={initialSellAssetAccountId}
+                      asset={sellAsset}
+                      label={translate('trade.payWith')}
+                      onAccountIdChange={setSellAssetAccountId}
+                      labelPostFix={sellTradeAssetSelect}
+                      percentOptions={percentOptions}
+                    />
+                    <Flex alignItems='center' justifyContent='center' my={-2}>
+                      <Divider />
+                      <CircularProgress
+                        color='blue.500'
+                        thickness='4px'
+                        size='34px'
+                        trackColor='transparent'
+                        isIndeterminate={isLoading}
+                        borderRadius='full'
                       >
-                        <IconButton
-                          onClick={handleSwitchAssets}
-                          isRound
-                          size='sm'
-                          position='relative'
-                          variant='outline'
-                          borderColor='border.base'
-                          zIndex={1}
-                          aria-label={translate('lending.switchAssets')}
-                          icon={arrowDownIcon}
-                          isDisabled={shouldDisableSwitchAssets}
-                        />
-                      </CircularProgressLabel>
-                    </CircularProgress>
-
-                    <Divider />
-                  </Flex>
-                  <TradeAssetInput
-                    // Disable account selection when user set a manual receive address
-                    isAccountSelectionHidden={Boolean(manualReceiveAddress)}
-                    isReadOnly={true}
-                    accountId={initialBuyAssetAccountId}
-                    assetId={buyAsset.assetId}
-                    assetSymbol={buyAsset.symbol}
-                    assetIcon={buyAsset.icon}
-                    cryptoAmount={
-                      hasUserEnteredAmount
-                        ? positiveOrZero(buyAmountAfterFeesCryptoPrecision).toFixed()
-                        : '0'
-                    }
-                    fiatAmount={
-                      hasUserEnteredAmount
-                        ? positiveOrZero(buyAmountAfterFeesUserCurrency).toFixed()
-                        : '0'
-                    }
-                    percentOptions={emptyPercentOptions}
-                    showInputSkeleton={isLoading}
-                    showFiatSkeleton={isLoading}
-                    label={translate('trade.youGet')}
-                    onAccountIdChange={setBuyAssetAccountId}
-                    formControlProps={formControlProps}
-                    labelPostFix={buyTradeAssetSelect}
-                    priceImpactPercentage={priceImpactPercentage?.toString()}
-                  />
+                        <CircularProgressLabel
+                          fontSize='md'
+                          display='flex'
+                          alignItems='center'
+                          justifyContent='center'
+                        >
+                          <IconButton
+                            onClick={handleSwitchAssets}
+                            isRound
+                            size='sm'
+                            position='relative'
+                            variant='outline'
+                            borderColor='border.base'
+                            zIndex={1}
+                            aria-label={translate('lending.switchAssets')}
+                            icon={arrowDownIcon}
+                            isDisabled={shouldDisableSwitchAssets}
+                          />
+                        </CircularProgressLabel>
+                      </CircularProgress>
+
+                      <Divider />
+                    </Flex>
+                    <TradeAssetInput
+                      // Disable account selection when user set a manual receive address
+                      isAccountSelectionHidden={Boolean(manualReceiveAddress)}
+                      isReadOnly={true}
+                      accountId={initialBuyAssetAccountId}
+                      assetId={buyAsset.assetId}
+                      assetSymbol={buyAsset.symbol}
+                      assetIcon={buyAsset.icon}
+                      cryptoAmount={
+                        hasUserEnteredAmount
+                          ? positiveOrZero(buyAmountAfterFeesCryptoPrecision).toFixed()
+                          : '0'
+                      }
+                      fiatAmount={
+                        hasUserEnteredAmount
+                          ? positiveOrZero(buyAmountAfterFeesUserCurrency).toFixed()
+                          : '0'
+                      }
+                      percentOptions={emptyPercentOptions}
+                      showInputSkeleton={isLoading}
+                      showFiatSkeleton={isLoading}
+                      label={translate('trade.youGet')}
+                      onAccountIdChange={setBuyAssetAccountId}
+                      formControlProps={formControlProps}
+                      labelPostFix={buyTradeAssetSelect}
+                      priceImpactPercentage={priceImpactPercentage?.toString()}
+                    />
+                  </Stack>
+                  {ConfirmSummary}
                 </Stack>
-                {ConfirmSummary}
-              </Stack>
+              </WarningAcknowledgement>
             </Card>
 
             <WithLazyMount
diff --git a/src/components/WarningAcknowledgement/WarningAcknowledgement.tsx b/src/components/WarningAcknowledgement/WarningAcknowledgement.tsx
new file mode 100644
index 00000000000..0f470db8051
--- /dev/null
+++ b/src/components/WarningAcknowledgement/WarningAcknowledgement.tsx
@@ -0,0 +1,185 @@
+import { Box, Button } from '@chakra-ui/react'
+import type { AnimationDefinition, MotionStyle } from 'framer-motion'
+import { AnimatePresence, motion } from 'framer-motion'
+import type { PropsWithChildren } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
+import { FiAlertTriangle } from 'react-icons/fi'
+import { useTranslate } from 'react-polyglot'
+import { RawText, Text } from 'components/Text'
+
+const initialProps = { opacity: 0 }
+const animateProps = { opacity: 1 }
+const exitProps = { opacity: 0, transition: { duration: 0.5 } }
+const transitionProps = { delay: 0.2, duration: 0.1 }
+const motionStyle: MotionStyle = {
+  backgroundColor: 'var(--chakra-colors-blanket)',
+  position: 'absolute',
+  top: 0,
+  bottom: 0,
+  left: 0,
+  right: 0,
+  zIndex: 4,
+}
+
+const WarningOverlay: React.FC<PropsWithChildren> = ({ children }) => {
+  return (
+    <motion.div
+      key='overlay'
+      style={motionStyle}
+      initial={initialProps}
+      animate={animateProps}
+      exit={exitProps}
+      transition={transitionProps}
+    >
+      {children}
+    </motion.div>
+  )
+}
+
+const popoverVariants = {
+  initial: {
+    y: '100%',
+  },
+  animate: {
+    y: 0,
+    transition: {
+      type: 'spring',
+      bounce: 0.2,
+      duration: 0.55,
+    },
+  },
+  exit: {
+    y: '100%',
+    opacity: 0,
+    transition: {
+      duration: 0.2,
+    },
+  },
+}
+
+const popoverStyle: MotionStyle = {
+  backgroundColor: 'var(--chakra-colors-background-surface-overlay-base)',
+  position: 'absolute',
+  borderTopLeftRadius: 'var(--chakra-radii-2xl)',
+  borderTopRightRadius: 'var(--chakra-radii-2xl)',
+  bottom: 0,
+  left: 0,
+  right: 0,
+  zIndex: 5,
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  paddingLeft: '2rem',
+  paddingRight: '2rem',
+  paddingBottom: '2rem',
+  paddingTop: '4rem',
+}
+
+type WarningAcknowledgementProps = {
+  children: React.ReactNode
+  message: string
+  onAcknowledge: () => void
+  shouldShowWarningAcknowledgement: boolean
+  setShouldShowWarningAcknowledgement: (shouldShow: boolean) => void
+}
+
+const cancelHoverProps = { bg: 'rgba(255, 255, 255, 0.2)' }
+const understandHoverProps = { bg: 'red.600' }
+const boxBorderRadius = { base: 'none', md: 'xl' }
+
+export const WarningAcknowledgement = ({
+  children,
+  message,
+  onAcknowledge,
+  shouldShowWarningAcknowledgement,
+  setShouldShowWarningAcknowledgement,
+}: WarningAcknowledgementProps) => {
+  const translate = useTranslate()
+  const [isShowing, setIsShowing] = useState(false)
+
+  const handleAcknowledge = useCallback(() => {
+    setShouldShowWarningAcknowledgement(false)
+    onAcknowledge()
+  }, [onAcknowledge, setShouldShowWarningAcknowledgement])
+
+  const handleCancel = useCallback(() => {
+    setShouldShowWarningAcknowledgement(false)
+  }, [setShouldShowWarningAcknowledgement])
+
+  const handleAnimationComplete = useCallback((def: AnimationDefinition) => {
+    if (def === 'exit') {
+      setIsShowing(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    // enters with overflow: hidden
+    // exit after animation complete return to overflow: visible
+    if (shouldShowWarningAcknowledgement) {
+      setIsShowing(true)
+    }
+  }, [shouldShowWarningAcknowledgement])
+
+  return (
+    <Box
+      position='relative'
+      borderRadius={boxBorderRadius}
+      overflow={isShowing ? 'hidden' : 'visible'}
+      width={'100%'}
+    >
+      <AnimatePresence mode='wait' initial={false}>
+        {shouldShowWarningAcknowledgement && (
+          <WarningOverlay>
+            <motion.div
+              layout
+              key='message'
+              variants={popoverVariants}
+              initial='initial'
+              animate='animate'
+              exit='exit'
+              style={popoverStyle}
+              onAnimationComplete={handleAnimationComplete}
+            >
+              <Box as={FiAlertTriangle} color='red.500' size='80px' mb={4} />
+              <Text
+                translation={'warningAcknowledgement.attention'}
+                fontWeight='semibold'
+                fontSize='2xl'
+              />
+              <RawText
+                align={'center'}
+                maxWidth='90%'
+                mb={8}
+                fontWeight='medium'
+                color='text.subtle'
+              >
+                {message}
+              </RawText>
+              <Button
+                size='lg'
+                mb={2}
+                colorScheme='red'
+                width='full'
+                onClick={handleAcknowledge}
+                _hover={understandHoverProps}
+              >
+                <Text translation='warningAcknowledgement.understand' />
+              </Button>
+              <Button
+                size='lg'
+                width='full'
+                colorScheme='gray'
+                onClick={handleCancel}
+                _hover={cancelHoverProps}
+              >
+                {translate('common.cancel')}
+              </Button>
+            </motion.div>
+          </WarningOverlay>
+        )}
+      </AnimatePresence>
+
+      {children}
+    </Box>
+  )
+}
diff --git a/src/pages/Lending/Pool/components/Borrow/BorrowInput.tsx b/src/pages/Lending/Pool/components/Borrow/BorrowInput.tsx
index 714580a7b11..cb00aebdac9 100644
--- a/src/pages/Lending/Pool/components/Borrow/BorrowInput.tsx
+++ b/src/pages/Lending/Pool/components/Borrow/BorrowInput.tsx
@@ -1,8 +1,5 @@
 import { ArrowDownIcon } from '@chakra-ui/icons'
 import {
-  Alert,
-  AlertDescription,
-  AlertIcon,
   Button,
   CardFooter,
   Collapse,
@@ -25,7 +22,8 @@ import { HelperTooltip } from 'components/HelperTooltip/HelperTooltip'
 import { TradeAssetInput } from 'components/MultiHopTrade/components/TradeAssetInput'
 import { Row } from 'components/Row/Row'
 import { SlideTransition } from 'components/SlideTransition'
-import { RawText, Text } from 'components/Text'
+import { RawText } from 'components/Text'
+import { WarningAcknowledgement } from 'components/WarningAcknowledgement/WarningAcknowledgement'
 import { useFeatureFlag } from 'hooks/useFeatureFlag/useFeatureFlag'
 import { useIsSmartContractAddress } from 'hooks/useIsSmartContractAddress/useIsSmartContractAddress'
 import { useModal } from 'hooks/useModal/useModal'
@@ -102,17 +100,7 @@ export const BorrowInput = ({
   const [fromAddress, setFromAddress] = useState<string | null>(null)
   const [borrowAssetIsFiat, toggleBorrowAssetIsFiat] = useToggle(false)
   const [collateralAssetIsFiat, toggleCollateralAssetIsFiat] = useToggle(false)
-  const [isUnsafeQuoteNoticeDismissed, setIsUnsafeQuoteNoticeDismissed] = useState<boolean | null>(
-    null,
-  )
-
-  const handleAcknowledgeUnsafeQuote = useCallback(() => {
-    // We don't want to *immediately* set this or there will be a "click-through"
-    // i.e the regular continue button will render immediately, and click will bubble to it
-    setTimeout(() => {
-      setIsUnsafeQuoteNoticeDismissed(true)
-    }, 100)
-  }, [])
+  const [shouldShowWarningAcknowledgement, setShouldShowWarningAcknowledgement] = useState(false)
 
   const {
     state: { wallet },
@@ -366,10 +354,6 @@ export const BorrowInput = ({
     [quoteSlippageDecimalPercentage],
   )
 
-  useEffect(() => {
-    if (isUnsafeQuote) setIsUnsafeQuoteNoticeDismissed(false)
-  }, [isUnsafeQuote])
-
   useEffect(() => {
     setConfirmedQuote(lendingQuoteData ?? null)
   }, [isLendingQuoteSuccess, lendingQuoteData, setConfirmedQuote])
@@ -502,76 +486,160 @@ export const BorrowInput = ({
     lendingQuoteError?.message,
   ])
 
+  const handleBorrowSubmit = useCallback(
+    () => (isUnsafeQuote ? setShouldShowWarningAcknowledgement(true) : onSubmit()),
+    [isUnsafeQuote, onSubmit],
+  )
+
   if (!(collateralAsset && borrowAsset && collateralFeeAsset)) return null
 
   return (
     <SlideTransition>
-      <Stack spacing={0}>
-        <TradeAssetInput
-          accountId={collateralAccountId}
-          assetId={collateralAssetId}
-          assetSymbol={collateralAsset.symbol}
-          assetIcon={collateralAsset.icon}
-          onChange={handleDepositInputChange}
-          onToggleIsFiat={toggleCollateralAssetIsFiat}
-          isFiat={collateralAssetIsFiat}
-          cryptoAmount={depositAmountCryptoPrecision ?? '0'}
-          fiatAmount={fiatDepositAmount ?? '0'}
-          isAccountSelectionDisabled={isAccountSelectionDisabled}
-          isSendMaxDisabled={false}
-          percentOptions={percentOptions}
-          showInputSkeleton={false}
-          showFiatSkeleton={false}
-          label={translate('lending.depositAsset', { asset: collateralAsset.symbol })}
-          onAccountIdChange={handleCollateralAccountIdChange}
-          formControlProps={formControlProps}
-          layout='inline'
-          labelPostFix={collateralAssetSelectComponent}
-        />
-        <Flex alignItems='center' justifyContent='center' my={-2}>
-          <Divider />
-          <IconButton
-            isRound
-            size='sm'
-            position='relative'
-            variant='outline'
-            borderColor='border.base'
-            zIndex={1}
-            aria-label={translate('lending.switchAssets')}
-            icon={swapIcon}
+      <WarningAcknowledgement
+        message={translate('warningAcknowledgement.highSlippageBorrow', {
+          slippagePercentage: bnOrZero(quoteSlippageDecimalPercentage)
+            .times(100)
+            .toFixed(2)
+            .toString(),
+        })}
+        onAcknowledge={onSubmit}
+        shouldShowWarningAcknowledgement={shouldShowWarningAcknowledgement}
+        setShouldShowWarningAcknowledgement={setShouldShowWarningAcknowledgement}
+      >
+        <Stack spacing={0}>
+          <TradeAssetInput
+            accountId={collateralAccountId}
+            assetId={collateralAssetId}
+            assetSymbol={collateralAsset.symbol}
+            assetIcon={collateralAsset.icon}
+            onChange={handleDepositInputChange}
+            onToggleIsFiat={toggleCollateralAssetIsFiat}
+            isFiat={collateralAssetIsFiat}
+            cryptoAmount={depositAmountCryptoPrecision ?? '0'}
+            fiatAmount={fiatDepositAmount ?? '0'}
+            isAccountSelectionDisabled={isAccountSelectionDisabled}
+            isSendMaxDisabled={false}
+            percentOptions={percentOptions}
+            showInputSkeleton={false}
+            showFiatSkeleton={false}
+            label={translate('lending.depositAsset', { asset: collateralAsset.symbol })}
+            onAccountIdChange={handleCollateralAccountIdChange}
+            formControlProps={formControlProps}
+            layout='inline'
+            labelPostFix={collateralAssetSelectComponent}
           />
-          <Divider />
-        </Flex>
-        <TradeAssetInput
-          assetId={borrowAsset?.assetId ?? ''}
-          assetSymbol={borrowAsset.symbol}
-          assetIcon={borrowAsset.icon}
-          cryptoAmount={lendingQuoteData?.quoteBorrowedAmountCryptoPrecision ?? '0'}
-          fiatAmount={lendingQuoteData?.quoteBorrowedAmountUserCurrency ?? '0'}
-          isReadOnly
-          onToggleIsFiat={toggleBorrowAssetIsFiat}
-          isFiat={borrowAssetIsFiat}
-          isSendMaxDisabled={false}
-          percentOptions={percentOptions}
-          showInputSkeleton={isLendingQuoteLoading || isLendingQuoteRefetching}
-          showFiatSkeleton={isLendingQuoteLoading || isLendingQuoteRefetching}
-          label={translate('lending.borrow')}
-          onAccountIdChange={handleBorrowAccountIdChange}
-          formControlProps={formControlProps}
-          layout='inline'
-          labelPostFix={borrowAssetSelectComponent}
-        />
-        <Collapse in={isLendingQuoteSuccess}>
-          <LoanSummary
-            confirmedQuote={confirmedQuote}
-            isLoading={isLendingQuoteLoading || isLendingQuoteRefetching}
-            collateralAssetId={collateralAssetId}
-            collateralAccountId={collateralAccountId}
-            debtOccuredAmountUserCurrency={lendingQuoteData?.quoteDebtAmountUserCurrency ?? '0'}
-            depositAmountCryptoPrecision={depositAmountCryptoPrecision ?? '0'}
-            borrowAssetId={borrowAsset?.assetId ?? ''}
-            borrowAccountId={borrowAccountId}
+          <Flex alignItems='center' justifyContent='center' my={-2}>
+            <Divider />
+            <IconButton
+              isRound
+              size='sm'
+              position='relative'
+              variant='outline'
+              borderColor='border.base'
+              zIndex={1}
+              aria-label={translate('lending.switchAssets')}
+              icon={swapIcon}
+            />
+            <Divider />
+          </Flex>
+          <TradeAssetInput
+            assetId={borrowAsset?.assetId ?? ''}
+            assetSymbol={borrowAsset.symbol}
+            assetIcon={borrowAsset.icon}
+            cryptoAmount={lendingQuoteData?.quoteBorrowedAmountCryptoPrecision ?? '0'}
+            fiatAmount={lendingQuoteData?.quoteBorrowedAmountUserCurrency ?? '0'}
+            isReadOnly
+            onToggleIsFiat={toggleBorrowAssetIsFiat}
+            isFiat={borrowAssetIsFiat}
+            isSendMaxDisabled={false}
+            percentOptions={percentOptions}
+            showInputSkeleton={isLendingQuoteLoading || isLendingQuoteRefetching}
+            showFiatSkeleton={isLendingQuoteLoading || isLendingQuoteRefetching}
+            label={translate('lending.borrow')}
+            onAccountIdChange={handleBorrowAccountIdChange}
+            formControlProps={formControlProps}
+            layout='inline'
+            labelPostFix={borrowAssetSelectComponent}
           />
+          <Collapse in={isLendingQuoteSuccess}>
+            <LoanSummary
+              confirmedQuote={confirmedQuote}
+              isLoading={isLendingQuoteLoading || isLendingQuoteRefetching}
+              collateralAssetId={collateralAssetId}
+              collateralAccountId={collateralAccountId}
+              debtOccuredAmountUserCurrency={lendingQuoteData?.quoteDebtAmountUserCurrency ?? '0'}
+              depositAmountCryptoPrecision={depositAmountCryptoPrecision ?? '0'}
+              borrowAssetId={borrowAsset?.assetId ?? ''}
+              borrowAccountId={borrowAccountId}
+            />
+            <CardFooter
+              borderTopWidth={1}
+              borderColor='border.subtle'
+              flexDir='column'
+              gap={4}
+              px={6}
+              py={4}
+              bg='background.surface.raised.accent'
+            >
+              <Row fontSize='sm' fontWeight='medium'>
+                <Row.Label>{translate('common.slippage')}</Row.Label>
+                <Row.Value>
+                  <Skeleton isLoaded={isLendingQuoteSuccess && !isLendingQuoteRefetching}>
+                    <Amount.Crypto
+                      value={lendingQuoteData?.quoteSlippageBorrowedAssetCryptoPrecision ?? '0'}
+                      symbol={borrowAsset.symbol}
+                    />
+                  </Skeleton>
+                </Row.Value>
+              </Row>
+              <Row fontSize='sm' fontWeight='medium'>
+                <Row.Label>{translate('common.gasFee')}</Row.Label>
+                <Row.Value>
+                  <Skeleton
+                    isLoaded={
+                      isEstimatedFeesDataSuccess &&
+                      isLendingQuoteSuccess &&
+                      !isLendingQuoteRefetching
+                    }
+                  >
+                    <Amount.Fiat value={estimatedFeesData?.txFeeFiat ?? '0'} />
+                  </Skeleton>
+                </Row.Value>
+              </Row>
+              {isSweepNeeded && (
+                <Row fontSize='sm' fontWeight='medium'>
+                  <HelperTooltip label={translate('modals.send.consolidate.tooltip')}>
+                    <Row.Label>{translate('modals.send.consolidate.consolidateFunds')}</Row.Label>
+                  </HelperTooltip>
+                  <Row.Value>
+                    <Skeleton
+                      isLoaded={Boolean(isEstimatedSweepFeesDataSuccess && estimatedSweepFeesData)}
+                    >
+                      <Amount.Fiat value={estimatedSweepFeesData?.txFeeFiat ?? '0'} />
+                    </Skeleton>
+                  </Row.Value>
+                </Row>
+              )}
+              <Row fontSize='sm' fontWeight='medium'>
+                <Row.Label>{translate('common.fees')}</Row.Label>
+                <Row.Value>
+                  <Skeleton isLoaded={isLendingQuoteSuccess && !isLendingQuoteRefetching}>
+                    <Amount.Fiat value={lendingQuoteData?.quoteTotalFeesFiatUserCurrency ?? '0'} />
+                  </Skeleton>
+                </Row.Value>
+              </Row>
+              <Row fontSize='sm' fontWeight='medium'>
+                <Row.Label>{translate('bridge.waitTimeLabel')}</Row.Label>
+                <Row.Value>
+                  <Skeleton isLoaded={isLendingQuoteSuccess && !isLendingQuoteRefetching}>
+                    <RawText fontWeight='bold'>
+                      {prettyMilliseconds(lendingQuoteData?.quoteTotalTimeMs ?? 0)}
+                    </RawText>
+                  </Skeleton>
+                </Row.Value>
+              </Row>
+            </CardFooter>
+          </Collapse>
           <CardFooter
             borderTopWidth={1}
             borderColor='border.subtle'
@@ -580,100 +648,13 @@ export const BorrowInput = ({
             px={6}
             py={4}
             bg='background.surface.raised.accent'
+            borderBottomRadius='xl'
           >
-            <Row fontSize='sm' fontWeight='medium'>
-              <Row.Label>{translate('common.slippage')}</Row.Label>
-              <Row.Value>
-                <Skeleton isLoaded={isLendingQuoteSuccess && !isLendingQuoteRefetching}>
-                  <Amount.Crypto
-                    value={lendingQuoteData?.quoteSlippageBorrowedAssetCryptoPrecision ?? '0'}
-                    symbol={borrowAsset.symbol}
-                  />
-                </Skeleton>
-              </Row.Value>
-            </Row>
-            <Row fontSize='sm' fontWeight='medium'>
-              <Row.Label>{translate('common.gasFee')}</Row.Label>
-              <Row.Value>
-                <Skeleton
-                  isLoaded={
-                    isEstimatedFeesDataSuccess && isLendingQuoteSuccess && !isLendingQuoteRefetching
-                  }
-                >
-                  <Amount.Fiat value={estimatedFeesData?.txFeeFiat ?? '0'} />
-                </Skeleton>
-              </Row.Value>
-            </Row>
-            {isSweepNeeded && (
-              <Row fontSize='sm' fontWeight='medium'>
-                <HelperTooltip label={translate('modals.send.consolidate.tooltip')}>
-                  <Row.Label>{translate('modals.send.consolidate.consolidateFunds')}</Row.Label>
-                </HelperTooltip>
-                <Row.Value>
-                  <Skeleton
-                    isLoaded={Boolean(isEstimatedSweepFeesDataSuccess && estimatedSweepFeesData)}
-                  >
-                    <Amount.Fiat value={estimatedSweepFeesData?.txFeeFiat ?? '0'} />
-                  </Skeleton>
-                </Row.Value>
-              </Row>
-            )}
-            <Row fontSize='sm' fontWeight='medium'>
-              <Row.Label>{translate('common.fees')}</Row.Label>
-              <Row.Value>
-                <Skeleton isLoaded={isLendingQuoteSuccess && !isLendingQuoteRefetching}>
-                  <Amount.Fiat value={lendingQuoteData?.quoteTotalFeesFiatUserCurrency ?? '0'} />
-                </Skeleton>
-              </Row.Value>
-            </Row>
-            <Row fontSize='sm' fontWeight='medium'>
-              <Row.Label>{translate('bridge.waitTimeLabel')}</Row.Label>
-              <Row.Value>
-                <Skeleton isLoaded={isLendingQuoteSuccess && !isLendingQuoteRefetching}>
-                  <RawText fontWeight='bold'>
-                    {prettyMilliseconds(lendingQuoteData?.quoteTotalTimeMs ?? 0)}
-                  </RawText>
-                </Skeleton>
-              </Row.Value>
-            </Row>
-          </CardFooter>
-        </Collapse>
-        <CardFooter
-          borderTopWidth={1}
-          borderColor='border.subtle'
-          flexDir='column'
-          gap={4}
-          px={6}
-          py={4}
-          bg='background.surface.raised.accent'
-          borderBottomRadius='xl'
-        >
-          {isUnsafeQuote && !isUnsafeQuoteNoticeDismissed ? (
-            <>
-              <Flex direction='column' gap={2}>
-                <Alert status='error' width='auto' fontSize='sm' variant='solid'>
-                  <AlertIcon color='red' />
-                  <Stack spacing={0}>
-                    <AlertDescription lineHeight='short'>
-                      {translate('lending.unsafeBorrow', {
-                        slippagePercentage: bnOrZero(quoteSlippageDecimalPercentage)
-                          .times(100)
-                          .toFixed(2),
-                      })}
-                    </AlertDescription>
-                  </Stack>
-                </Alert>
-              </Flex>
-              <Button size='lg' colorScheme='red' onClick={handleAcknowledgeUnsafeQuote}>
-                <Text translation={'defi.modals.saversVaults.understand'} />
-              </Button>
-            </>
-          ) : (
             <Button
               size='lg'
               colorScheme={isLendingQuoteError || quoteErrorTranslation ? 'red' : 'blue'}
               mx={-2}
-              onClick={onSubmit}
+              onClick={handleBorrowSubmit}
               isLoading={
                 isPoolDataLoading ||
                 isLendingQuoteLoading ||
@@ -701,9 +682,9 @@ export const BorrowInput = ({
                 ? translate(quoteErrorTranslation)
                 : translate('lending.borrow')}
             </Button>
-          )}
-        </CardFooter>
-      </Stack>
+          </CardFooter>
+        </Stack>
+      </WarningAcknowledgement>
     </SlideTransition>
   )
 }
diff --git a/src/pages/ThorChainLP/components/AddLiquidity/AddLiquidityInput.tsx b/src/pages/ThorChainLP/components/AddLiquidity/AddLiquidityInput.tsx
index 6a94dcec6c6..2d245c12a04 100644
--- a/src/pages/ThorChainLP/components/AddLiquidity/AddLiquidityInput.tsx
+++ b/src/pages/ThorChainLP/components/AddLiquidity/AddLiquidityInput.tsx
@@ -45,6 +45,7 @@ import { Row } from 'components/Row/Row'
 import { SlideTransition } from 'components/SlideTransition'
 import { RawText, Text } from 'components/Text'
 import type { TextPropTypes } from 'components/Text/Text'
+import { WarningAcknowledgement } from 'components/WarningAcknowledgement/WarningAcknowledgement'
 import { useBrowserRouter } from 'hooks/useBrowserRouter/useBrowserRouter'
 import { useFeatureFlag } from 'hooks/useFeatureFlag/useFeatureFlag'
 import { useIsSmartContractAddress } from 'hooks/useIsSmartContractAddress/useIsSmartContractAddress'
@@ -185,6 +186,7 @@ export const AddLiquidityInput: React.FC<AddLiquidityInputProps> = ({
   const [poolAssetTxFeeCryptoBaseUnit, setPoolAssetTxFeeCryptoBaseUnit] = useState<
     string | undefined
   >()
+  const [shouldShowWarningAcknowledgement, setShouldShowWarningAcknowledgement] = useState(false)
 
   // Virtual as in, these are the amounts if depositing symetrically. But a user may deposit asymetrically, so these are not the *actual* amounts
   // Keeping these as virtual amounts is useful from a UI perspective, as it allows rebalancing to automagically work when switching from sym. type,
@@ -199,17 +201,6 @@ export const AddLiquidityInput: React.FC<AddLiquidityInputProps> = ({
     useState<string | undefined>()
 
   const [slippageDecimalPercentage, setSlippageDecimalPercentage] = useState<string | undefined>()
-  const [isUnsafeQuoteNoticeDismissed, setIsUnsafeQuoteNoticeDismissed] = useState<boolean | null>(
-    null,
-  )
-
-  const handleAcknowledgeUnsafeQuote = useCallback(() => {
-    // We don't want to *immediately* set this or there will be a "click-through"
-    // i.e the regular continue button will render immediately, and click will bubble to it
-    setTimeout(() => {
-      setIsUnsafeQuoteNoticeDismissed(true)
-    }, 100)
-  }, [])
 
   const isUnsafeQuote = useMemo(
     () =>
@@ -218,10 +209,6 @@ export const AddLiquidityInput: React.FC<AddLiquidityInputProps> = ({
     [slippageDecimalPercentage],
   )
 
-  useEffect(() => {
-    if (isUnsafeQuote) setIsUnsafeQuoteNoticeDismissed(false)
-  }, [isUnsafeQuote])
-
   const { data: pools } = usePools()
   const assets = useAppSelector(selectAssets)
 
@@ -1515,116 +1502,110 @@ export const AddLiquidityInput: React.FC<AddLiquidityInputProps> = ({
     virtualRuneDepositAmountFiatUserCurrency,
   ])
 
+  const handleDepositSubmit = useCallback(() => {
+    return isUnsafeQuote ? setShouldShowWarningAcknowledgement(true) : handleSubmit()
+  }, [handleSubmit, isUnsafeQuote])
+
   if (!poolAsset || !runeAsset) return null
 
   return (
     <SlideTransition>
-      {renderHeader}
-      <Stack divider={divider} spacing={4} pb={4}>
-        {pairSelect}
-        <Stack>
-          <FormLabel mb={0} px={6} fontSize='sm'>
-            {translate('pools.depositAmounts')}
-          </FormLabel>
-          {!opportunityId && (
-            <LpType
-              assetId={poolAsset.assetId}
-              opportunityId={activeOpportunityId}
-              onAsymSideChange={handleAsymSideChange}
-            />
-          )}
-          {tradeAssetInputs}
+      <WarningAcknowledgement
+        message={translate('warningAcknowledgement.highSlippageDeposit', {
+          slippagePercentage: bnOrZero(slippageDecimalPercentage).times(100).toFixed(2).toString(),
+        })}
+        onAcknowledge={handleSubmit}
+        shouldShowWarningAcknowledgement={shouldShowWarningAcknowledgement}
+        setShouldShowWarningAcknowledgement={setShouldShowWarningAcknowledgement}
+      >
+        {renderHeader}
+        <Stack divider={divider} spacing={4} pb={4}>
+          {pairSelect}
+          <Stack>
+            <FormLabel mb={0} px={6} fontSize='sm'>
+              {translate('pools.depositAmounts')}
+            </FormLabel>
+            {!opportunityId && (
+              <LpType
+                assetId={poolAsset.assetId}
+                opportunityId={activeOpportunityId}
+                onAsymSideChange={handleAsymSideChange}
+              />
+            )}
+            {tradeAssetInputs}
+          </Stack>
         </Stack>
-      </Stack>
-      <Collapse in={hasUserEnteredValue}>
-        <PoolSummary
-          assetId={poolAsset.assetId}
-          runePerAsset={runePerAsset}
-          shareOfPoolDecimalPercent={shareOfPoolDecimalPercent}
-          isLoading={isSlippageLoading}
-        />
+        <Collapse in={hasUserEnteredValue}>
+          <PoolSummary
+            assetId={poolAsset.assetId}
+            runePerAsset={runePerAsset}
+            shareOfPoolDecimalPercent={shareOfPoolDecimalPercent}
+            isLoading={isSlippageLoading}
+          />
+          <CardFooter
+            borderTopWidth={1}
+            borderColor='border.subtle'
+            flexDir='column'
+            gap={4}
+            px={6}
+            py={4}
+            bg='background.surface.raised.accent'
+          >
+            <Row fontSize='sm' fontWeight='medium'>
+              <Row.Label>{translate('common.slippage')}</Row.Label>
+              <Row.Value>
+                <Skeleton isLoaded={!isSlippageLoading}>
+                  <Amount.Fiat value={slippageFiatUserCurrency ?? ''} />
+                </Skeleton>
+              </Row.Value>
+            </Row>
+            <Row fontSize='sm' fontWeight='medium'>
+              <Row.Label>{translate('common.gasFee')}</Row.Label>
+              <Row.Value>
+                <Skeleton isLoaded={Boolean(confirmedQuote)}>
+                  <Amount.Fiat value={confirmedQuote?.totalGasFeeFiatUserCurrency ?? 0} />
+                </Skeleton>
+              </Row.Value>
+            </Row>
+            <Row fontSize='sm' fontWeight='medium' isLoading={Boolean(!confirmedQuote)}>
+              <Row.Label display='flex'>
+                <Text translation={shapeshiftFeeTranslation} />
+                {bnOrZero(confirmedQuote?.feeAmountFiatUserCurrency).gt(0) && (
+                  <RawText>{`(${confirmedQuote?.feeBps ?? 0} bps)`}</RawText>
+                )}
+              </Row.Label>
+              <Row.Value onClick={toggleFeeModal} _hover={shapeShiftFeeModalRowHover}>
+                <Flex alignItems='center' gap={2}>
+                  {bnOrZero(confirmedQuote?.feeAmountFiatUserCurrency).gt(0) ? (
+                    <>
+                      <Amount.Fiat value={confirmedQuote?.feeAmountFiatUserCurrency ?? 0} />
+                      <QuestionIcon />
+                    </>
+                  ) : (
+                    <>
+                      <Text translation='trade.free' fontWeight='semibold' color={greenColor} />
+                      <QuestionIcon color={greenColor} />
+                    </>
+                  )}
+                </Flex>
+              </Row.Value>
+            </Row>
+          </CardFooter>
+        </Collapse>
         <CardFooter
           borderTopWidth={1}
           borderColor='border.subtle'
           flexDir='column'
           gap={4}
           px={6}
-          py={4}
           bg='background.surface.raised.accent'
+          borderBottomRadius='xl'
         >
-          <Row fontSize='sm' fontWeight='medium'>
-            <Row.Label>{translate('common.slippage')}</Row.Label>
-            <Row.Value>
-              <Skeleton isLoaded={!isSlippageLoading}>
-                <Amount.Fiat value={slippageFiatUserCurrency ?? ''} />
-              </Skeleton>
-            </Row.Value>
-          </Row>
-          <Row fontSize='sm' fontWeight='medium'>
-            <Row.Label>{translate('common.gasFee')}</Row.Label>
-            <Row.Value>
-              <Skeleton isLoaded={Boolean(confirmedQuote)}>
-                <Amount.Fiat value={confirmedQuote?.totalGasFeeFiatUserCurrency ?? 0} />
-              </Skeleton>
-            </Row.Value>
-          </Row>
-          <Row fontSize='sm' fontWeight='medium' isLoading={Boolean(!confirmedQuote)}>
-            <Row.Label display='flex'>
-              <Text translation={shapeshiftFeeTranslation} />
-              {bnOrZero(confirmedQuote?.feeAmountFiatUserCurrency).gt(0) && (
-                <RawText>{`(${confirmedQuote?.feeBps ?? 0} bps)`}</RawText>
-              )}
-            </Row.Label>
-            <Row.Value onClick={toggleFeeModal} _hover={shapeShiftFeeModalRowHover}>
-              <Flex alignItems='center' gap={2}>
-                {bnOrZero(confirmedQuote?.feeAmountFiatUserCurrency).gt(0) ? (
-                  <>
-                    <Amount.Fiat value={confirmedQuote?.feeAmountFiatUserCurrency ?? 0} />
-                    <QuestionIcon />
-                  </>
-                ) : (
-                  <>
-                    <Text translation='trade.free' fontWeight='semibold' color={greenColor} />
-                    <QuestionIcon color={greenColor} />
-                  </>
-                )}
-              </Flex>
-            </Row.Value>
-          </Row>
-        </CardFooter>
-      </Collapse>
-      <CardFooter
-        borderTopWidth={1}
-        borderColor='border.subtle'
-        flexDir='column'
-        gap={4}
-        px={6}
-        bg='background.surface.raised.accent'
-        borderBottomRadius='xl'
-      >
-        {incompleteAlert}
-        {maybeOpportunityNotSupportedExplainer}
-        {maybeAlert}
-        {maybeSymAfterRuneAlert}
-        {isUnsafeQuote && !isUnsafeQuoteNoticeDismissed ? (
-          <>
-            <Flex direction='column' gap={2}>
-              <Alert status='error' width='auto' fontSize='sm' variant='solid'>
-                <AlertIcon color='red' />
-                <Stack spacing={0}>
-                  <AlertDescription lineHeight='short'>
-                    {translate('pools.unsafeQuote', {
-                      slippagePercentage: bnOrZero(slippageDecimalPercentage).times(100).toFixed(2),
-                    })}
-                  </AlertDescription>
-                </Stack>
-              </Alert>
-            </Flex>
-            <Button size='lg' colorScheme='red' onClick={handleAcknowledgeUnsafeQuote}>
-              <Text translation={'defi.modals.saversVaults.understand'} />
-            </Button>
-          </>
-        ) : (
+          {incompleteAlert}
+          {maybeOpportunityNotSupportedExplainer}
+          {maybeAlert}
+          {maybeSymAfterRuneAlert}
+
           <Button
             mx={-2}
             size='lg'
@@ -1662,18 +1643,18 @@ export const AddLiquidityInput: React.FC<AddLiquidityInputProps> = ({
               isInboundAddressesDataLoading ||
               (runeTxFeeCryptoBaseUnit === undefined && isEstimatedPoolAssetFeesDataLoading)
             }
-            onClick={handleSubmit}
+            onClick={handleDepositSubmit}
           >
             {confirmCopy}
           </Button>
-        )}
-      </CardFooter>
-      <FeeModal
-        isOpen={showFeeModal}
-        onClose={toggleFeeModal}
-        inputAmountUsd={confirmedQuote?.totalAmountUsd}
-        feeModel='THORCHAIN_LP'
-      />
+        </CardFooter>
+        <FeeModal
+          isOpen={showFeeModal}
+          onClose={toggleFeeModal}
+          inputAmountUsd={confirmedQuote?.totalAmountUsd}
+          feeModel='THORCHAIN_LP'
+        />
+      </WarningAcknowledgement>
     </SlideTransition>
   )
 }