diff --git a/src/components/LabeledBadge/LabeledBadge.tsx b/src/components/LabeledBadge/LabeledBadge.tsx
new file mode 100644
index 000000000..5efc4d18e
--- /dev/null
+++ b/src/components/LabeledBadge/LabeledBadge.tsx
@@ -0,0 +1,37 @@
+import { Badge, BadgeProps, Flex, Icon, Text } from "@chakra-ui/react"
+import { FC } from "react"
+import { IconType } from "react-icons"
+
+interface LabeledBadgeProps extends BadgeProps {
+  label: string
+  icon?: IconType
+}
+
+const LabeledBadge: FC<LabeledBadgeProps> = ({
+  label,
+  icon,
+  children,
+  ...restProps
+}) => {
+  return (
+    <Flex
+      as={Badge}
+      align="center"
+      color="hsl(0, 0%, 53%)"
+      fontSize="xs"
+      lineHeight={1}
+      fontWeight="medium"
+      p={2}
+      pr={3}
+      {...restProps}
+    >
+      <Icon as={icon} mr={2} w={3.5} h={3.5} />
+      {label}&nbsp;
+      <Text as="span" color="hsl(26, 96%, 65%)" textTransform="lowercase">
+        {children}
+      </Text>
+    </Flex>
+  )
+}
+
+export default LabeledBadge
diff --git a/src/components/LabeledBadge/index.ts b/src/components/LabeledBadge/index.ts
new file mode 100644
index 000000000..33c2615b9
--- /dev/null
+++ b/src/components/LabeledBadge/index.ts
@@ -0,0 +1 @@
+export { default as LabeledBadge } from "./LabeledBadge"
diff --git a/src/components/Modal/TbtcMintingConfirmationModal/index.tsx b/src/components/Modal/TbtcMintingConfirmationModal/index.tsx
deleted file mode 100644
index 5fb8e150a..000000000
--- a/src/components/Modal/TbtcMintingConfirmationModal/index.tsx
+++ /dev/null
@@ -1,123 +0,0 @@
-import { Skeleton } from "@chakra-ui/react"
-import { BitcoinUtxo } from "@keep-network/tbtc-v2.ts"
-import {
-  BodyLg,
-  BodySm,
-  Button,
-  H5,
-  ModalBody,
-  ModalCloseButton,
-  ModalFooter,
-  ModalHeader,
-} from "@threshold-network/components"
-import { BigNumber } from "ethers"
-import { FC, useEffect } from "react"
-import { useThreshold } from "../../../contexts/ThresholdContext"
-import { useRevealDepositTransaction } from "../../../hooks/tbtc"
-import { useTbtcState } from "../../../hooks/useTbtcState"
-import MintingTransactionDetails from "../../../pages/tBTC/Bridge/components/MintingTransactionDetails"
-import { BaseModalProps } from "../../../types"
-import { MintingStep } from "../../../types/tbtc"
-import InfoBox from "../../InfoBox"
-import { BridgeContractLink } from "../../tBTC"
-import { InlineTokenBalance } from "../../TokenBalance"
-import withBaseModal from "../withBaseModal"
-
-export interface TbtcMintingConfirmationModalProps extends BaseModalProps {
-  utxo: BitcoinUtxo
-}
-
-const TbtcMintingConfirmationModal: FC<TbtcMintingConfirmationModalProps> = ({
-  utxo,
-  closeModal,
-}) => {
-  const { updateState, tBTCMintAmount, mintingFee, thresholdNetworkFee } =
-    useTbtcState()
-  const threshold = useThreshold()
-
-  const onSuccessfulDepositReveal = () => {
-    updateState("mintingStep", MintingStep.MintingSuccess)
-    closeModal()
-  }
-
-  const { sendTransaction: revealDeposit } = useRevealDepositTransaction(
-    onSuccessfulDepositReveal
-  )
-
-  const initiateMintTransaction = async () => {
-    await revealDeposit(utxo)
-  }
-
-  const amount = BigNumber.from(utxo.value).toString()
-
-  useEffect(() => {
-    const getEstimatedDepositFees = async () => {
-      const { treasuryFee, optimisticMintFee, amountToMint } =
-        await threshold.tbtc.getEstimatedDepositFees(amount)
-
-      updateState("mintingFee", optimisticMintFee)
-      updateState("thresholdNetworkFee", treasuryFee)
-      updateState("tBTCMintAmount", amountToMint)
-    }
-
-    getEstimatedDepositFees()
-  }, [amount, updateState, threshold])
-
-  return (
-    <>
-      <ModalHeader>Initiate minting tBTC</ModalHeader>
-      <ModalCloseButton />
-      <ModalBody>
-        <InfoBox variant="modal" mb="6">
-          <H5>You will initiate the minting of</H5>
-          {/*
-            We can't use `InlineTokenBalance` inside the above `H5` because
-            the tooltip won't work correctly- will display at the top and
-            center of the whole `H5` component not only above token amount.
-           */}
-          <H5 mb="4">
-            <Skeleton isLoaded={!!tBTCMintAmount} maxW="105px" as="span">
-              <InlineTokenBalance
-                tokenAmount={tBTCMintAmount}
-                tokenSymbol="tBTC"
-                withSymbol
-              />
-            </Skeleton>
-          </H5>
-          <BodyLg>
-            Minting tBTC requires a single transaction on Ethereum network and
-            takes approximately 3 hours.
-          </BodyLg>
-        </InfoBox>
-        <MintingTransactionDetails />
-        <BodySm textAlign="center" mt="16">
-          View bridge contract on&nbsp;
-          <BridgeContractLink text="etherscan" />.
-        </BodySm>
-      </ModalBody>
-      <ModalFooter>
-        <Button
-          onClick={closeModal}
-          variant="outline"
-          mr={2}
-          data-ph-capture-attribute-button-name={
-            "Cancel (TBTC Minting Confirmation Modal)"
-          }
-        >
-          Cancel
-        </Button>
-        <Button
-          disabled={!tBTCMintAmount || !mintingFee || !thresholdNetworkFee}
-          onClick={initiateMintTransaction}
-          data-ph-capture-attribute-button-name={
-            "Start minting (TBTC Minting Confirmation Modal)"
-          }
-        >
-          Start minting
-        </Button>
-      </ModalFooter>
-    </>
-  )
-}
-
-export default withBaseModal(TbtcMintingConfirmationModal)
diff --git a/src/components/Modal/TransactionModal/TransactionFailed.tsx b/src/components/Modal/TransactionModal/TransactionFailed.tsx
index 8f9ae64b4..3cc7c57cd 100644
--- a/src/components/Modal/TransactionModal/TransactionFailed.tsx
+++ b/src/components/Modal/TransactionModal/TransactionFailed.tsx
@@ -1,25 +1,25 @@
-import { FC } from "react"
 import {
   Alert,
   AlertIcon,
   AlertTitle,
   Box,
+  Button,
+  Icon,
   ModalBody,
   ModalFooter,
   useDisclosure,
   VStack,
-  Button,
-  Icon,
 } from "@chakra-ui/react"
 import { BodySm } from "@threshold-network/components"
-import { ExternalHref } from "../../../enums"
-import { BaseModalProps } from "../../../types"
-import withBaseModal from "../withBaseModal"
-import Link from "../../Link"
+import { FC } from "react"
 import {
-  HiOutlinePlus as PlusIcon,
   HiOutlineMinus as MinusIcon,
+  HiOutlinePlus as PlusIcon,
 } from "react-icons/hi"
+import { ExternalHref } from "../../../enums"
+import { BaseModalProps } from "../../../types"
+import Link from "../../Link"
+import withBaseModal from "../withBaseModal"
 
 interface TransactionFailedProps extends BaseModalProps {
   transactionHash?: string
diff --git a/src/components/Modal/TransactionModal/TransactionIsPending.tsx b/src/components/Modal/TransactionModal/TransactionIsPending.tsx
index 975980a86..5250fa7bb 100644
--- a/src/components/Modal/TransactionModal/TransactionIsPending.tsx
+++ b/src/components/Modal/TransactionModal/TransactionIsPending.tsx
@@ -30,8 +30,8 @@ const TransactionIsPending: FC<TransactionIsPendingProps> = ({
             text="View"
             id={transactionHash}
             type={ExplorerDataType.TRANSACTION}
-          />{" "}
-          transaction on Etherscan
+          />
+          &nbsp;transaction on Etherscan
         </BodySm>
       </ModalFooter>
     </>
diff --git a/src/components/Modal/TransactionModal/TransactionIsWaitingForConfirmation.tsx b/src/components/Modal/TransactionModal/TransactionIsWaitingForConfirmation.tsx
index 9cbc30ab5..b8c283d03 100644
--- a/src/components/Modal/TransactionModal/TransactionIsWaitingForConfirmation.tsx
+++ b/src/components/Modal/TransactionModal/TransactionIsWaitingForConfirmation.tsx
@@ -5,6 +5,7 @@ import withBaseModal from "../withBaseModal"
 import { BaseModalProps } from "../../../types"
 import Spinner from "../../Spinner"
 
+const MODAL_BODY_PB = "3.75rem"
 interface Props extends BaseModalProps {
   pendingText?: string
 }
diff --git a/src/components/Toast/Toast.tsx b/src/components/Toast/Toast.tsx
new file mode 100644
index 000000000..767d9937c
--- /dev/null
+++ b/src/components/Toast/Toast.tsx
@@ -0,0 +1,129 @@
+import {
+  AlertStatus,
+  Alert,
+  AlertIcon,
+  AlertTitle,
+  AlertDescription,
+  AlertProps as AlertPropsBase,
+  CloseButton,
+  VStack,
+  Stack,
+  Flex,
+  Icon,
+} from "@chakra-ui/react"
+import { FC, useEffect, useState } from "react"
+import { setTimeout, clearTimeout } from "../../utils/setTimeout"
+import { ToastCollapsibleDetails } from "./ToastCollapsibleDetails"
+import { spacing } from "@chakra-ui/theme/foundations/spacing"
+import { customBreakpoints } from "../../theme"
+import { IconType } from "react-icons"
+
+export interface ToastInternalProps {
+  id: number
+  onUnmount?: () => void
+}
+
+type PositionType = "left" | "center" | "right"
+export interface ToastProps {
+  title: string
+  status: AlertStatus
+  description?: string
+  duration?: number
+  isDismissable?: boolean
+  orientation?: "horizontal" | "vertical"
+  position?: PositionType
+  icon?: IconType
+}
+type AlertProps = ToastProps &
+  Omit<AlertPropsBase, "position" | "variant"> &
+  Omit<ToastInternalProps, "id">
+
+const getPositioningProps = (position: PositionType) => {
+  if (position !== "center") {
+    return {
+      [position]: `max(0vw, calc((100vw - ${customBreakpoints["3xl"]}) / 2))`,
+      top: { base: "4.5rem", lg: 28 },
+      mx: { base: 2, lg: 10 },
+    }
+  }
+  return {
+    top: { base: "4.5rem", lg: 20 },
+    left: "50%",
+    transform: "translateX(-50%)",
+    mx: { base: 0, lg: undefined },
+  }
+}
+
+const Toast: FC<AlertProps> = ({
+  title,
+  description,
+  duration = Infinity,
+  isDismissable = true,
+  children,
+  orientation = "horizontal",
+  position = "center",
+  icon,
+  ...restProps
+}) => {
+  const [isMounted, setIsMounted] = useState(true)
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      setIsMounted(false)
+    }, duration)
+
+    return () => clearTimeout(timeout)
+  }, [])
+
+  return isMounted ? (
+    <Alert
+      variant="solid"
+      position="fixed"
+      w={{ base: `calc(100% - 2 * ${spacing[2]})`, md: "100%" }}
+      maxW="toast-width"
+      boxShadow="lg"
+      alignItems="center"
+      whiteSpace="nowrap"
+      px={6}
+      py={5}
+      zIndex="toast"
+      {...getPositioningProps(position)}
+      {...restProps}
+    >
+      <VStack spacing={4} w="full" align="stretch">
+        <Flex>
+          <Icon as={icon ?? AlertIcon} w={5} h={5} mt={0} mr={4} />
+          <Stack
+            spacing={orientation === "horizontal" ? 0 : 2}
+            direction={orientation === "horizontal" ? "row" : "column"}
+            flex={1}
+          >
+            {title ? <AlertTitle lineHeight={5}>{title}</AlertTitle> : null}
+            {description ? (
+              <AlertDescription lineHeight={5} color="hsl(0, 0%, 56%)">
+                {description ?? title}
+              </AlertDescription>
+            ) : null}
+          </Stack>
+          {isDismissable ? (
+            <CloseButton
+              color="hsl(0, 0%, 56%)"
+              onClick={() => setIsMounted(false)}
+              w={5}
+              h={5}
+            />
+          ) : null}
+        </Flex>
+        {children}
+      </VStack>
+    </Alert>
+  ) : (
+    <></>
+  )
+}
+
+const ToastNamespace = Object.assign(Toast, {
+  CollapsibleDetails: ToastCollapsibleDetails,
+})
+
+export default ToastNamespace
diff --git a/src/components/Toast/ToastCollapsibleDetails.tsx b/src/components/Toast/ToastCollapsibleDetails.tsx
new file mode 100644
index 000000000..89a866aa4
--- /dev/null
+++ b/src/components/Toast/ToastCollapsibleDetails.tsx
@@ -0,0 +1,76 @@
+import {
+  HStack,
+  FlexProps,
+  Box,
+  Button,
+  Icon,
+  useDisclosure,
+  Text,
+  Flex,
+} from "@chakra-ui/react"
+import {
+  HiOutlinePlus as PlusIcon,
+  HiOutlineMinus as MinusIcon,
+} from "react-icons/hi"
+import { ExternalHref } from "../../enums"
+import Link from "../Link"
+
+type ToastCollapsibleDetailsProps = Omit<FlexProps, "children"> & {
+  children: string
+}
+
+export const ToastCollapsibleDetails = ({
+  children,
+  ...restProps
+}: ToastCollapsibleDetailsProps) => {
+  const { isOpen, onToggle } = useDisclosure()
+  return (
+    <Flex {...restProps} flex={1} align="flex-start" direction="column">
+      <Button
+        variant="outline"
+        size="sm"
+        borderWidth={0}
+        onClick={onToggle}
+        textTransform="unset"
+        pl={0}
+        pr={0}
+        py={4}
+        mt={-4}
+        mb={isOpen ? 0 : -4}
+        leftIcon={<Icon as={isOpen ? MinusIcon : PlusIcon} />}
+      >
+        Show {isOpen ? "less" : "more"}
+      </Button>
+      {isOpen ? (
+        <>
+          <Box
+            as="pre"
+            bg="hsl(0, 0%, 12%)"
+            color="hsla(0, 0%, 100%, 80%)"
+            whiteSpace="pre-wrap"
+            w="full"
+            p={4}
+            fontFamily="monospace"
+            fontSize="sm"
+            maxH="xs"
+            overflowY="scroll"
+          >
+            {children}
+          </Box>
+          <HStack w="full" justify="flex-end" mt={4}>
+            <Text color="hsla(0, 0%, 100%, 90%)">
+              Get help on&nbsp;
+              <Link
+                isExternal
+                href={ExternalHref.thresholdDiscord}
+                color="brand.100"
+              >
+                Discord
+              </Link>
+            </Text>
+          </HStack>
+        </>
+      ) : null}
+    </Flex>
+  )
+}
diff --git a/src/components/Toast/index.ts b/src/components/Toast/index.ts
new file mode 100644
index 000000000..cc7296b44
--- /dev/null
+++ b/src/components/Toast/index.ts
@@ -0,0 +1 @@
+export { default as Toast } from "./Toast"
diff --git a/src/components/TransactionDetails/index.tsx b/src/components/TransactionDetails/index.tsx
index bdb9ee7ed..43dee8080 100644
--- a/src/components/TransactionDetails/index.tsx
+++ b/src/components/TransactionDetails/index.tsx
@@ -1,28 +1,29 @@
 import { ComponentProps, FC } from "react"
-import {
-  BodySm,
-  ListItem,
-  Skeleton,
-  useColorModeValue,
-} from "@threshold-network/components"
+import { Text, ListItem, Skeleton, useMultiStyleConfig } from "@chakra-ui/react"
 import { InlineTokenBalance } from "../TokenBalance"
 
 type TransactionDetailsItemProps = {
   label: string
   value?: string
+  variant?: "simple" | "bold" | "highlight"
 }
 
 export const TransactionDetailsItem: FC<TransactionDetailsItemProps> = ({
   label,
   value,
   children,
+  ...restProps
 }) => {
-  const valueTextColor = useColorModeValue("gray.700", "gray.300")
+  const styles = useMultiStyleConfig("TransactionDetailsItem", restProps)
 
   return (
-    <ListItem display="flex" justifyContent="space-between" alignItems="center">
-      <BodySm color="gray.500">{label}</BodySm>
-      {value ? <BodySm color={valueTextColor}>{value}</BodySm> : children}
+    <ListItem sx={styles.container}>
+      <Text sx={styles.label}>{label}</Text>
+      {
+        <Text as="div" sx={styles.value}>
+          {value ?? children}
+        </Text>
+      }
     </ListItem>
   )
 }
@@ -31,23 +32,21 @@ type TransactionDetailsAmountItemProps = Omit<
   ComponentProps<typeof InlineTokenBalance>,
   "tokenAmount"
 > &
-  Pick<TransactionDetailsItemProps, "label"> & { tokenAmount?: string }
+  Omit<TransactionDetailsItemProps, "value"> & {
+    tokenAmount?: string
+  }
 
 export const TransactionDetailsAmountItem: FC<
   TransactionDetailsAmountItemProps
-> = ({ label, tokenAmount, ...restProps }) => {
-  const tokenBalanceTextColor = useColorModeValue("gray.700", "gray.300")
-
+> = ({ label, tokenAmount, variant, ...restProps }) => {
   return (
-    <TransactionDetailsItem label={label}>
+    <TransactionDetailsItem label={label} variant={variant}>
       <Skeleton isLoaded={!!tokenAmount}>
-        <BodySm color={tokenBalanceTextColor}>
-          <InlineTokenBalance
-            withSymbol
-            tokenAmount={tokenAmount || "0"}
-            {...restProps}
-          />
-        </BodySm>
+        <InlineTokenBalance
+          withSymbol
+          tokenAmount={tokenAmount || "0"}
+          {...restProps}
+        />
       </Skeleton>
     </TransactionDetailsItem>
   )
diff --git a/src/enums/modal.ts b/src/enums/modal.ts
index ad535c3f4..589ad478b 100644
--- a/src/enums/modal.ts
+++ b/src/enums/modal.ts
@@ -3,7 +3,6 @@ export enum ModalType {
   TransactionIsPending = "TRANSACTION_IS_PENDING",
   TransactionIsWaitingForConfirmation = "TRANSACTION_IS_WAITING_FOR_CONFIRMATION",
   TransactionFailed = "TRANSACTION_FAILED",
-  TbtcMintingConfirmation = "TBTC_MINTING_CONFIRMATION",
   NewTBTCApp = "NEW_TBTC_APP",
   GenerateNewDepositAddress = "TBTC_GENERATE_NEW_DEPOSIT_ADDRESS",
   InitiateUnminting = "INITIATE_UNMINTING",
diff --git a/src/pages/tBTC/Bridge/Minting/InitiateMinting.tsx b/src/pages/tBTC/Bridge/Minting/InitiateMinting.tsx
index 5d8df2eb4..f5d1bea1d 100644
--- a/src/pages/tBTC/Bridge/Minting/InitiateMinting.tsx
+++ b/src/pages/tBTC/Bridge/Minting/InitiateMinting.tsx
@@ -1,43 +1,169 @@
 import { BitcoinUtxo } from "@keep-network/tbtc-v2.ts"
-import { BodyMd, Box, Button } from "@threshold-network/components"
-import { FC } from "react"
+import {
+  Badge,
+  BodyMd,
+  Box,
+  Button,
+  H5,
+  HStack,
+  VStack,
+} from "@threshold-network/components"
+import { BigNumber } from "ethers"
+import { FC, useEffect, useState } from "react"
+import { FaClock as ClockIcon } from "react-icons/fa"
+import { LabeledBadge } from "../../../../components/LabeledBadge"
+import { Toast } from "../../../../components/Toast"
+import { InlineTokenBalance } from "../../../../components/TokenBalance"
 import withOnlyConnectedWallet from "../../../../components/withOnlyConnectedWallet"
-import { ModalType } from "../../../../enums"
+import { useThreshold } from "../../../../contexts/ThresholdContext"
+import { useRevealDepositTransaction } from "../../../../hooks/tbtc"
 import { useModal } from "../../../../hooks/useModal"
+import { useTbtcState } from "../../../../hooks/useTbtcState"
 import { MintingStep } from "../../../../types/tbtc"
+import { getDurationByNumberOfConfirmations } from "../../../../utils/tBTC"
 import { BridgeProcessCardTitle } from "../components/BridgeProcessCardTitle"
+import MintingTransactionDetails from "../components/MintingTransactionDetails"
+
+type RevealDepositErrorType = {
+  code: number
+  message: string
+}
 
 const InitiateMintingComponent: FC<{
   utxo: BitcoinUtxo
   onPreviousStepClick: (previousStep?: MintingStep) => void
 }> = ({ utxo, onPreviousStepClick }) => {
-  const { openModal } = useModal()
+  const { updateState } = useTbtcState()
+  const threshold = useThreshold()
+  const { closeModal } = useModal()
+  const [depositRevealErrorData, setDepositRevealErrorData] =
+    useState<RevealDepositErrorType>()
+
+  const onSuccessfulDepositReveal = () => {
+    updateState("mintingStep", MintingStep.MintingSuccess)
+    // We don't have success modal for deposit reveal so we just closing the
+    // current TransactionIsPending modal.
+    closeModal()
+  }
 
-  const confirmDespotAndMint = async () => {
-    openModal(ModalType.TbtcMintingConfirmation, { utxo: utxo })
+  const onFailedDepositReveal = (error: RevealDepositErrorType) => {
+    setDepositRevealErrorData(error)
+    closeModal()
+  }
+
+  const { sendTransaction: revealDeposit } = useRevealDepositTransaction(
+    onSuccessfulDepositReveal,
+    onFailedDepositReveal
+  )
+
+  const depositedAmount = BigNumber.from(utxo.value).toString()
+  const confirmations = threshold.tbtc.minimumNumberOfConfirmationsNeeded(
+    utxo.value
+  )
+  const durationInMinutes = getDurationByNumberOfConfirmations(confirmations)
+  // Round up the minutes to the nearest half-hour
+  const hours = (Math.round(durationInMinutes / 30) * 30) / 60
+
+  const hoursSuffix = hours === 1 ? "hour" : "hours"
+  const confirmationsSuffix =
+    confirmations === 1 ? "confirmation" : "confirmations"
+
+  useEffect(() => {
+    const getEstimatedDepositFees = async () => {
+      const { treasuryFee, optimisticMintFee, amountToMint } =
+        await threshold.tbtc.getEstimatedDepositFees(depositedAmount)
+      updateState("mintingFee", optimisticMintFee)
+      updateState("thresholdNetworkFee", treasuryFee)
+      updateState("tBTCMintAmount", amountToMint)
+    }
+
+    getEstimatedDepositFees()
+  }, [depositedAmount, updateState, threshold])
+
+  const initiateMintTransaction = async () => {
+    if (depositRevealErrorData) {
+      setDepositRevealErrorData(undefined)
+      console.log("Revealing deposit failed, trying again...")
+    }
+    await revealDeposit(utxo)
   }
 
   return (
     <Box mx={{ base: 0, lg: 10 }}>
+      {depositRevealErrorData ? (
+        <Toast
+          status="error"
+          title="Error."
+          description={`Code: ${depositRevealErrorData?.code}`}
+        >
+          <Toast.CollapsibleDetails>
+            {depositRevealErrorData?.message}
+          </Toast.CollapsibleDetails>
+        </Toast>
+      ) : null}
       <BridgeProcessCardTitle
-        onPreviousStepClick={onPreviousStepClick}
         badgeText="3/3"
-        title="Initiate minting"
+        title="Initiate Minting"
+        description="
+          Receiving tBTC requires a single transaction on Base. The bridging 
+          can be initiated before you get all your Bitcoin deposit 
+          confirmations.
+        "
+        afterDescription={<Badge variant="subtle">Action on Ethereum</Badge>}
+        onPreviousStepClick={onPreviousStepClick}
       />
-      <BodyMd color="gray.500" mb={6}>
-        This step requires you to sign a transaction in your Ethereum wallet.
-      </BodyMd>
-      <BodyMd color="gray.500" mb={6}>
-        Your tBTC will arrive in your wallet in around ~3 hours.
-      </BodyMd>
+      <VStack spacing={6} mt={8}>
+        <VStack spacing={2}>
+          <H5 as="p" color="hsla(0, 0%, 100%, 50%)" fontWeight="normal">
+            Deposit received
+          </H5>
+          <Box
+            as="p"
+            fontSize="40px"
+            lineHeight="48px"
+            fontWeight="normal"
+            color="hsla(0, 0%, 100%, 50%)"
+          >
+            <InlineTokenBalance
+              fontWeight="black"
+              color="white"
+              tokenAmount={depositedAmount}
+              tokenDecimals={8}
+              precision={6}
+              higherPrecision={8}
+              displayTildeBelow={0}
+            />
+            &nbsp;BTC
+          </Box>
+        </VStack>
+        <HStack
+          px={4}
+          py={2}
+          border="1px solid #333"
+          bg="hsla(0, 0%, 0%, 30%)"
+          rounded="3xl"
+          spacing={4}
+        >
+          <BodyMd color="hsla(0, 0%, 100%, 50%)">
+            <Box as="span" color="hsl(151, 100%, 70%)">
+              +{confirmations}
+            </Box>
+            &nbsp;{confirmationsSuffix}
+          </BodyMd>
+          <LabeledBadge label="Est." icon={ClockIcon}>
+            {hours} {hoursSuffix}
+          </LabeledBadge>
+        </HStack>
+      </VStack>
+      <MintingTransactionDetails my={8} />
       <Button
-        onClick={confirmDespotAndMint}
+        onClick={initiateMintTransaction}
         isFullWidth
         data-ph-capture-attribute-button-name={
           "Confirm deposit & mint (Step 2)"
         }
       >
-        Initiate minting
+        {depositRevealErrorData ? "Try again" : "Mint"}
       </Button>
     </Box>
   )
diff --git a/src/pages/tBTC/Bridge/Minting/MintingFlowRouter.tsx b/src/pages/tBTC/Bridge/Minting/MintingFlowRouter.tsx
index f84692503..a77a4be7b 100644
--- a/src/pages/tBTC/Bridge/Minting/MintingFlowRouter.tsx
+++ b/src/pages/tBTC/Bridge/Minting/MintingFlowRouter.tsx
@@ -77,7 +77,9 @@ const MintingFlowRouterBase = () => {
       return (
         <InitiateMinting
           utxo={utxo!}
-          onPreviousStepClick={onPreviousStepClick}
+          onPreviousStepClick={() =>
+            onPreviousStepClick(MintingStep.ProvideData)
+          }
         />
       )
     }
diff --git a/src/pages/tBTC/Bridge/components/MintingTransactionDetails.tsx b/src/pages/tBTC/Bridge/components/MintingTransactionDetails.tsx
index 607db7b50..166b1815f 100644
--- a/src/pages/tBTC/Bridge/components/MintingTransactionDetails.tsx
+++ b/src/pages/tBTC/Bridge/components/MintingTransactionDetails.tsx
@@ -1,39 +1,62 @@
-import { List } from "@threshold-network/components"
 import {
-  TransactionDetailsAmountItem,
-  TransactionDetailsItem,
-} from "../../../../components/TransactionDetails"
+  List,
+  ListProps,
+  ListItem,
+  StackDivider,
+} from "@threshold-network/components"
+import { BigNumber } from "ethers"
+import { FC } from "react"
+import { TransactionDetailsAmountItem } from "../../../../components/TransactionDetails"
 import { useTbtcState } from "../../../../hooks/useTbtcState"
-import shortenAddress from "../../../../utils/shortenAddress"
 
-const MintingTransactionDetails = () => {
-  const { tBTCMintAmount, mintingFee, thresholdNetworkFee, ethAddress } =
-    useTbtcState()
+const MintingTransactionDetails: FC<ListProps> = (props) => {
+  const { tBTCMintAmount, mintingFee, thresholdNetworkFee } = useTbtcState()
+
+  if (!tBTCMintAmount || !mintingFee || !thresholdNetworkFee) {
+    // It's already hidden behind a Skelton component
+    return null
+  }
+
+  const totalFees = BigNumber.from(mintingFee).add(
+    BigNumber.from(thresholdNetworkFee)
+  )
+
+  const amountToReceive = BigNumber.from(tBTCMintAmount).sub(totalFees)
 
   return (
-    <List spacing="2" mb="6">
+    <List spacing={4} {...props}>
       <TransactionDetailsAmountItem
-        label="Amount To Be Minted"
-        tokenAmount={tBTCMintAmount}
+        label="Bitcoin Deposit Miner Fee"
+        tokenAmount={mintingFee}
         tokenSymbol="tBTC"
+        precision={6}
+        higherPrecision={8}
       />
       <TransactionDetailsAmountItem
-        label="Minting Fee"
-        tokenAmount={mintingFee}
+        label="tBTC Bridge Fee"
+        tokenAmount={thresholdNetworkFee}
         tokenSymbol="tBTC"
         precision={6}
         higherPrecision={8}
       />
+      <ListItem>
+        <StackDivider w="full" h="1px" bg="hsla(0, 0%, 100%, 10%)" />
+      </ListItem>
       <TransactionDetailsAmountItem
-        label="Threshold Network Fee"
-        tokenAmount={thresholdNetworkFee}
+        label="Total Fees"
+        tokenAmount={totalFees.toString()}
         tokenSymbol="tBTC"
         precision={6}
         higherPrecision={8}
+        variant="bold"
       />
-      <TransactionDetailsItem
-        label="ETH address"
-        value={shortenAddress(ethAddress)}
+      <TransactionDetailsAmountItem
+        label="You will receive"
+        tokenAmount={amountToReceive.toString()}
+        tokenSymbol="tBTC"
+        precision={6}
+        higherPrecision={8}
+        variant="highlight"
       />
     </List>
   )
diff --git a/src/theme/Alert.ts b/src/theme/Alert.ts
index c03273aba..bd716274e 100644
--- a/src/theme/Alert.ts
+++ b/src/theme/Alert.ts
@@ -45,7 +45,16 @@ const statusError = {
   },
 }
 
-const statusStyles = (props: AlertProps) => {
+const solidStyles = {
+  container: {
+    bg: "linear-gradient(315deg, #0A1616 0%, #090909 100%)",
+    border: "1px solid",
+    borderColor: "whiteAlpha.250",
+    rounded: "lg",
+  },
+}
+
+const subtleStatusStyles = (props: AlertProps) => {
   const { status } = props
 
   const styleMap = new Map([
@@ -58,6 +67,27 @@ const statusStyles = (props: AlertProps) => {
   return styleMap.get(status!) || {}
 }
 
+const solidStatusStyles = (props: AlertProps) => {
+  const { status } = props
+
+  const styles = new Map([
+    ["info", statusInfo],
+    ["warning", statusWarning],
+    ["success", statusSuccess],
+    ["error", statusError],
+  ]).get(status!)
+
+  if (styles) {
+    styles.container = Object.assign(styles.container, solidStyles.container)
+  }
+
+  if (styles && status === "info") {
+    styles.container.color = "brand.100"
+  }
+
+  return styles || {}
+}
+
 export const Alert = {
   defaultProps,
   baseStyle: {
@@ -80,6 +110,7 @@ export const Alert = {
     },
   },
   variants: {
-    subtle: statusStyles,
+    subtle: subtleStatusStyles,
+    solid: solidStatusStyles,
   },
 }
diff --git a/src/theme/TransactionDetailsItem.ts b/src/theme/TransactionDetailsItem.ts
new file mode 100644
index 000000000..1f9c4da4c
--- /dev/null
+++ b/src/theme/TransactionDetailsItem.ts
@@ -0,0 +1,41 @@
+import { PartsStyleObject, anatomy } from "@chakra-ui/theme-tools"
+
+const parts = anatomy("TransactionDetailsItem").parts(
+  "container",
+  "label",
+  "value"
+)
+
+const baseStyle: PartsStyleObject<typeof parts> = {
+  container: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    fontSize: "md",
+    lineHeight: "base",
+  },
+}
+
+const variants: PartsStyleObject = {
+  simple: {
+    label: { color: "hsl(0, 0%, 50%)" },
+    value: { color: "white" },
+  },
+  bold: {
+    label: { color: "white" },
+    value: { fontWeight: "bold" },
+  },
+  highlight: {
+    label: { color: "brand.100" },
+    value: { fontWeight: "bold", color: "brand.100" },
+  },
+}
+
+export const TransactionDetailsItem = {
+  defaultProps: {
+    variant: "simple",
+  },
+  parts: parts.keys,
+  baseStyle,
+  variants,
+}
diff --git a/src/theme/index.ts b/src/theme/index.ts
index e67c18fc5..4b619f8db 100644
--- a/src/theme/index.ts
+++ b/src/theme/index.ts
@@ -12,9 +12,15 @@ import { Tooltip } from "./Tooltip"
 import { fonts } from "./fonts"
 import { Button } from "./Button"
 import { Alert } from "./Alert"
+import { TransactionDetailsItem } from "./TransactionDetailsItem"
+
+export const customBreakpoints = {
+  "3xl": "120rem", // 1920px
+}
 
 export const customSizes = {
   "content-max-width": "89.25rem", // 1428px
+  "toast-width": "34.375rem", // 550px
 }
 
 const index = extendTheme({
@@ -41,6 +47,7 @@ const index = extendTheme({
     },
   },
   sizes: customSizes,
+  breakpoints: customBreakpoints,
   fontSizes: {
     "4.5xl": "2.5rem",
   },
@@ -60,6 +67,7 @@ const index = extendTheme({
     Tooltip,
     Button,
     Alert,
+    TransactionDetailsItem,
   },
   config: {
     initialColorMode: "dark",
diff --git a/src/types/modal.ts b/src/types/modal.ts
index 6932ba1dc..82280f857 100644
--- a/src/types/modal.ts
+++ b/src/types/modal.ts
@@ -6,7 +6,6 @@ import {
   TransactionIsPending,
   TransactionIsWaitingForConfirmation,
 } from "../components/Modal/TransactionModal"
-import TbtcMintingConfirmationModal from "../components/Modal/TbtcMintingConfirmationModal"
 import {
   GenerateNewDepositAddress,
   InitiateUnminting,
@@ -19,7 +18,6 @@ export const MODAL_TYPES: Record<ModalType, ElementType> = {
   [ModalType.TransactionIsWaitingForConfirmation]:
     TransactionIsWaitingForConfirmation,
   [ModalType.TransactionFailed]: TransactionFailed,
-  [ModalType.TbtcMintingConfirmation]: TbtcMintingConfirmationModal,
   [ModalType.NewTBTCApp]: NewTBTCApp,
   [ModalType.GenerateNewDepositAddress]: GenerateNewDepositAddress,
   [ModalType.InitiateUnminting]: InitiateUnminting,
diff --git a/src/utils/setTimeout.ts b/src/utils/setTimeout.ts
new file mode 100644
index 000000000..9160741d3
--- /dev/null
+++ b/src/utils/setTimeout.ts
@@ -0,0 +1,23 @@
+export function setTimeout(callback: VoidFunction, duration: number) {
+  let requestId: number
+  let start: number | null = null
+
+  const loop = (timestamp: number) => {
+    if (!start) {
+      start = timestamp
+    }
+
+    if (timestamp - start < duration) {
+      requestId = requestAnimationFrame(loop)
+    } else {
+      callback()
+    }
+  }
+
+  requestId = requestAnimationFrame(loop)
+  return requestId
+}
+
+export function clearTimeout(requestId: number) {
+  cancelAnimationFrame(requestId)
+}