diff --git a/.github/workflows/repo--validate-pr-title.yml b/.github/workflows/repo--validate-pr-title.yml
index 0f2f1bb62dd..145e7cf8f95 100644
--- a/.github/workflows/repo--validate-pr-title.yml
+++ b/.github/workflows/repo--validate-pr-title.yml
@@ -42,6 +42,7 @@ jobs:
             relayer
             taikoon
             alpha-nft
+            ui-lib
             taiko-client
             supplementary-contracts
           requireScope: true
diff --git a/packages/bridge-ui/config/schemas/configuredCustomTokens.schema.json b/packages/bridge-ui/config/schemas/configuredCustomTokens.schema.json
index 1a92562b13f..f7a13d72ada 100644
--- a/packages/bridge-ui/config/schemas/configuredCustomTokens.schema.json
+++ b/packages/bridge-ui/config/schemas/configuredCustomTokens.schema.json
@@ -26,15 +26,30 @@
         "type": "string"
       },
       "logoURI": {
-        "type": "string"
-      },
-      "mintable": {
-        "type": "boolean"
+        "type": ["string", "null"]
       },
-      "wrapped": {
-        "type": "boolean"
+      "attributes": {
+        "type": "array",
+        "items": {
+          "type": "object",
+          "properties": {
+            "wrapped": {
+              "type": "boolean"
+            },
+            "supported": {
+              "type": "boolean"
+            },
+            "stablecoin": {
+              "type": "boolean"
+            },
+            "mintable": {
+              "type": "boolean"
+            }
+          },
+          "additionalProperties": false
+        }
       }
     },
-    "required": ["name", "addresses", "symbol", "decimals", "type", "logoURI"]
+    "required": ["name", "addresses", "symbol", "decimals", "type"]
   }
 }
diff --git a/packages/bridge-ui/scripts/utils/validateJson.ts b/packages/bridge-ui/scripts/utils/validateJson.ts
index 3e9c5e4577e..31d9d92c693 100644
--- a/packages/bridge-ui/scripts/utils/validateJson.ts
+++ b/packages/bridge-ui/scripts/utils/validateJson.ts
@@ -1,6 +1,7 @@
 /* eslint-disable no-console */
 import Ajv, { type Schema } from 'ajv';
 
+import { type NFT, type Token, TokenAttributeKey } from '../../src/libs/token/types';
 import { PluginLogger } from './PluginLogger';
 
 const ajv = new Ajv({ strict: false });
@@ -9,7 +10,7 @@ type SchemaWithId = Schema & { $id?: string };
 
 const logger = new PluginLogger('json-validator');
 
-export const validateJsonAgainstSchema = (json: JSON, schema: SchemaWithId): boolean => {
+const validateJsonAgainstSchema = (json: JSON, schema: SchemaWithId): boolean => {
   logger.info(`Validating ${schema.$id}`);
   const validate = ajv.compile(schema);
 
@@ -17,9 +18,29 @@ export const validateJsonAgainstSchema = (json: JSON, schema: SchemaWithId): boo
 
   if (!valid) {
     logger.error('Validation failed.');
-    console.error('Error details:', ajv.errors);
+    console.error('Error details:', validate.errors);
     return false;
   }
+
+  // Additional validation for attributes against TokenAttributeKey enum
+  if (Array.isArray(json)) {
+    json.forEach((token: Token | NFT) => {
+      if (token.attributes) {
+        token.attributes.forEach((attribute: Record<string, unknown>) => {
+          Object.keys(attribute).forEach((key) => {
+            if (!Object.values(TokenAttributeKey).includes(key as TokenAttributeKey)) {
+              logger.error(`Invalid attribute key: ${key}`);
+              console.error(`Invalid attribute key: ${key}`);
+              throw new Error(`Invalid attribute key: ${key}`);
+            }
+          });
+        });
+      }
+    });
+  }
+
   logger.info(`Validation of ${schema.$id} succeeded.`);
   return true;
 };
+
+export { validateJsonAgainstSchema };
diff --git a/packages/bridge-ui/src/components/Bridge/FungibleBridge.svelte b/packages/bridge-ui/src/components/Bridge/FungibleBridge.svelte
index 8f0152513d0..b05d83398ae 100644
--- a/packages/bridge-ui/src/components/Bridge/FungibleBridge.svelte
+++ b/packages/bridge-ui/src/components/Bridge/FungibleBridge.svelte
@@ -16,6 +16,8 @@
   let hasEnoughEth: boolean = false;
   let bridgingStatus: BridgingStatus;
 
+  let needsManualConfirmation: boolean;
+
   const handleTransactionDetailsClick = () => (activeStep = BridgeSteps.RECIPIENT);
   const handleBackClick = () => (activeStep = BridgeSteps.IMPORT);
 
@@ -51,6 +53,7 @@
         <ReviewStep
           on:editTransactionDetails={handleTransactionDetailsClick}
           on:goBack={handleBackClick}
+          bind:needsManualConfirmation
           bind:hasEnoughEth />
       {:else if activeStep === BridgeSteps.RECIPIENT}
         <!-- RECIPIENT STEP -->
@@ -60,7 +63,7 @@
         <ConfirmationStep bind:bridgingStatus />
       {/if}
       <!-- NAVIGATION -->
-      <StepNavigation bind:activeStep {bridgingStatus} />
+      <StepNavigation bind:activeStep {bridgingStatus} bind:needsManualConfirmation />
     </div>
   </Card>
 </div>
diff --git a/packages/bridge-ui/src/components/Bridge/FungibleBridgeComponents/ReviewStep/ReviewStep.svelte b/packages/bridge-ui/src/components/Bridge/FungibleBridgeComponents/ReviewStep/ReviewStep.svelte
index 099573e7cff..d5bed5c6537 100644
--- a/packages/bridge-ui/src/components/Bridge/FungibleBridgeComponents/ReviewStep/ReviewStep.svelte
+++ b/packages/bridge-ui/src/components/Bridge/FungibleBridgeComponents/ReviewStep/ReviewStep.svelte
@@ -9,10 +9,11 @@
   import { destNetwork as destChain, enteredAmount, selectedToken } from '$components/Bridge/state';
   import { PUBLIC_SLOW_L1_BRIDGING_WARNING } from '$env/static/public';
   import { LayerType } from '$libs/chain';
-  import { isWrapped, type Token } from '$libs/token';
+  import { isStablecoin, isSupported, isWrapped, type Token } from '$libs/token';
   import { connectedSourceChain } from '$stores/network';
 
   export let hasEnoughEth: boolean = false;
+  export let needsManualConfirmation = false;
 
   let recipientComponent: Recipient;
   let processingFeeComponent: ProcessingFee;
@@ -24,8 +25,19 @@
 
   $: wrapped = $selectedToken !== null && isWrapped($selectedToken as Token);
 
+  $: unsupportedStableCoin =
+    $selectedToken !== null && !isSupported($selectedToken as Token) && isStablecoin($selectedToken as Token);
+
   $: wrappedAssetWarning = $t('bridge.alerts.wrapped_eth');
 
+  $: stableCoinWarning = $t('bridge.alerts.stable_coin');
+
+  $: if (wrapped || unsupportedStableCoin) {
+    needsManualConfirmation = true;
+  } else {
+    needsManualConfirmation = false;
+  }
+
   const dispatch = createEventDispatcher();
 
   const editTransactionDetails = () => {
@@ -69,11 +81,6 @@
   <Alert type="warning">{$t('bridge.alerts.slow_bridging')}</Alert>
 {/if}
 
-{#if wrapped}
-  <!-- eslint-disable-next-line svelte/no-at-html-tags -->
-  <Alert type="warning">{@html wrappedAssetWarning}</Alert>
-{/if}
-
 <div class="h-sep" />
 <!-- 
 Recipient & Processing Fee
@@ -88,3 +95,13 @@ Recipient & Processing Fee
 </div>
 
 <div class="h-sep" />
+
+{#if wrapped}
+  <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+  <Alert type="warning">{@html wrappedAssetWarning}</Alert>
+{/if}
+
+{#if unsupportedStableCoin}
+  <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+  <Alert type="warning">{@html stableCoinWarning}</Alert>
+{/if}
diff --git a/packages/bridge-ui/src/components/Bridge/FungibleBridgeComponents/StepNavigation/StepNavigation.svelte b/packages/bridge-ui/src/components/Bridge/FungibleBridgeComponents/StepNavigation/StepNavigation.svelte
index ac9bc90cfb7..fecc9a881a6 100644
--- a/packages/bridge-ui/src/components/Bridge/FungibleBridgeComponents/StepNavigation/StepNavigation.svelte
+++ b/packages/bridge-ui/src/components/Bridge/FungibleBridgeComponents/StepNavigation/StepNavigation.svelte
@@ -4,16 +4,20 @@
   import { importDone } from '$components/Bridge/state';
   import { BridgeSteps, BridgingStatus } from '$components/Bridge/types';
   import { ActionButton } from '$components/Button';
+  import { Icon } from '$components/Icon';
   import { StepBack } from '$components/Stepper';
   import { account } from '$stores/account';
 
   export let activeStep: BridgeSteps = BridgeSteps.IMPORT;
   export let validatingImport = false;
 
+  export let needsManualConfirmation: boolean;
   export let bridgingStatus: BridgingStatus;
 
   let nextStepButtonText: string;
 
+  let manuallyConfirmed = false;
+
   const getStepText = () => {
     if (activeStep === BridgeSteps.REVIEW) {
       return $t('common.confirm');
@@ -45,55 +49,68 @@
     } else if (activeStep === BridgeSteps.RECIPIENT) {
       activeStep = BridgeSteps.REVIEW;
     }
+    reset();
   };
 
-  $: disabled = !$account || !$account.isConnected;
+  const reset = () => {
+    manuallyConfirmed = false;
+  };
 
-  $: showStepNavigation = true;
+  $: disabled = !$account || !$account.isConnected;
 
   $: {
     nextStepButtonText = getStepText();
   }
+
+  $: needsConfirmation = needsManualConfirmation && !manuallyConfirmed;
 </script>
 
-{#if showStepNavigation}
-  <div class="f-col w-full justify-content-center gap-4">
-    {#if activeStep === BridgeSteps.IMPORT}
-      <div class="h-sep mt-0" />
-      <ActionButton
-        priority="primary"
-        disabled={!$importDone || disabled}
-        loading={validatingImport}
-        on:click={() => handleNextStep()}>
-        <span class="body-bold">{nextStepButtonText}</span>
+<div class="f-col w-full justify-content-center gap-4">
+  {#if activeStep === BridgeSteps.IMPORT}
+    <div class="h-sep mt-0" />
+    <ActionButton
+      priority="primary"
+      disabled={!$importDone || disabled}
+      loading={validatingImport}
+      on:click={() => handleNextStep()}>
+      <span class="body-bold">{nextStepButtonText}</span>
+    </ActionButton>
+  {/if}
+  {#if activeStep === BridgeSteps.REVIEW}
+    {#if needsManualConfirmation}
+      <ActionButton priority="primary" disabled={manuallyConfirmed} on:click={() => (manuallyConfirmed = true)}>
+        {#if needsConfirmation}
+          {$t('bridge.actions.acknowledge')}
+        {:else}
+          <Icon type="check" />{$t('common.confirmed')}
+        {/if}
       </ActionButton>
     {/if}
-    {#if activeStep === BridgeSteps.REVIEW}
-      <ActionButton priority="primary" {disabled} on:click={() => handleNextStep()}>
-        <span class="body-bold">{nextStepButtonText}</span>
-      </ActionButton>
 
-      <StepBack on:click={() => handlePreviousStep()}>
-        {$t('common.back')}
-      </StepBack>
-    {/if}
+    <ActionButton priority="primary" disabled={disabled || needsConfirmation} on:click={() => handleNextStep()}>
+      <span class="body-bold">{nextStepButtonText}</span>
+    </ActionButton>
+
+    <StepBack on:click={() => handlePreviousStep()}>
+      {$t('common.back')}
+    </StepBack>
+  {/if}
 
-    {#if activeStep === BridgeSteps.RECIPIENT}
+  {#if activeStep === BridgeSteps.RECIPIENT}
+    <ActionButton {disabled} priority="primary" on:click={() => handleNextStep()}>
+      <span class="body-bold">{nextStepButtonText}</span>
+    </ActionButton>
+  {/if}
+
+  {#if activeStep === BridgeSteps.CONFIRM}
+    {#if bridgingStatus === BridgingStatus.DONE}
       <ActionButton {disabled} priority="primary" on:click={() => handleNextStep()}>
         <span class="body-bold">{nextStepButtonText}</span>
       </ActionButton>
+    {:else}
+      <StepBack on:click={() => handlePreviousStep()}>
+        {$t('common.back')}
+      </StepBack>
     {/if}
-
-    {#if activeStep === BridgeSteps.CONFIRM}
-      {#if bridgingStatus === BridgingStatus.DONE}
-        <ActionButton {disabled} priority="primary" on:click={() => handleNextStep()}>
-          <span class="body-bold">{nextStepButtonText}</span>
-        </ActionButton>
-      {:else}
-        <StepBack on:click={() => handlePreviousStep()}>
-          {$t('common.back')}
-        </StepBack>
-      {/if}
-    {/if}
-  </div>
-{/if}
+  {/if}
+</div>
diff --git a/packages/bridge-ui/src/components/Dialogs/RetryDialog/RetryDialog.svelte b/packages/bridge-ui/src/components/Dialogs/RetryDialog/RetryDialog.svelte
index afe32b1f25f..ab01ed55c35 100644
--- a/packages/bridge-ui/src/components/Dialogs/RetryDialog/RetryDialog.svelte
+++ b/packages/bridge-ui/src/components/Dialogs/RetryDialog/RetryDialog.svelte
@@ -30,13 +30,13 @@
 
   export let loading = false;
 
+  export let activeStep: RetrySteps = INITIAL_STEP;
+
   const log = getLogger('RetryDialog');
   const dispatch = createEventDispatcher();
 
   const dialogId = `dialog-${uid()}`;
 
-  export let activeStep: RetrySteps = INITIAL_STEP;
-
   let canContinue = false;
   let retrying: boolean;
   let retryDone = false;
diff --git a/packages/bridge-ui/src/components/Faucet/Faucet.svelte b/packages/bridge-ui/src/components/Faucet/Faucet.svelte
index eb19cb8a8b6..6ffd72608ff 100644
--- a/packages/bridge-ui/src/components/Faucet/Faucet.svelte
+++ b/packages/bridge-ui/src/components/Faucet/Faucet.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
+  import { switchChain } from '@wagmi/core';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
-  import { type Chain, ContractFunctionExecutionError, UserRejectedRequestError } from 'viem';
+  import { type Chain, ContractFunctionExecutionError, SwitchChainError, UserRejectedRequestError } from 'viem';
 
   import { chainConfig } from '$chainConfig';
   import { Alert } from '$components/Alert';
@@ -11,9 +12,13 @@
   import { successToast, warningToast } from '$components/NotificationToast';
   import { errorToast, infoToast } from '$components/NotificationToast/NotificationToast.svelte';
   import { TokenDropdown } from '$components/TokenDropdown';
+  import { web3modal } from '$libs/connect';
   import { InsufficientBalanceError, MintError, TokenMintedError } from '$libs/error';
-  import { checkMintable, mint, testERC20Tokens, testNFT, type Token } from '$libs/token';
+  import { getAlternateNetwork } from '$libs/network';
+  import { checkMintable, isMintable, mint, testERC20Tokens, testNFT, type Token } from '$libs/token';
+  import { config } from '$libs/wagmi';
   import { account, connectedSourceChain, pendingTransactions } from '$stores';
+  import { switchingNetwork } from '$stores/network';
 
   let minting = false;
   let checkingMintable = false;
@@ -35,6 +40,7 @@
     // Let's begin the minting process
     minting = true;
     mintButtonEnabled = false;
+    minted = false;
 
     try {
       const txHash = await mint(selectedToken, $connectedSourceChain.id);
@@ -57,6 +63,7 @@
         title: $t('faucet.mint.success.title'),
         message: $t('faucet.mint.success.message'),
       });
+      minted = true;
     } catch (err) {
       console.error(err);
 
@@ -87,17 +94,15 @@
   // the user why they can't mint
   async function updateMintButtonState(connected: boolean, token?: Token, network?: Chain) {
     if (!token || !network) return false;
-
     checkingMintable = true;
     mintButtonEnabled = false;
     let reasonNotMintable = '';
-
+    wrongChain = false;
     try {
       await checkMintable(token, network.id);
       mintButtonEnabled = true;
     } catch (err) {
       console.error(err);
-
       switch (true) {
         case err instanceof InsufficientBalanceError:
           reasonNotMintable = $t('faucet.warning.insufficient_balance');
@@ -105,9 +110,11 @@
         case err instanceof TokenMintedError:
           reasonNotMintable = $t('faucet.warning.token_minted');
           break;
-        case err instanceof ContractFunctionExecutionError:
+        case err instanceof ContractFunctionExecutionError && err.functionName === 'minters':
           reasonNotMintable = $t('faucet.warning.not_mintable');
+          wrongChain = true;
           break;
+
         default:
           reasonNotMintable = $t('faucet.warning.unknown');
           break;
@@ -119,20 +126,58 @@
     alertMessage = getAlertMessage(connected, reasonNotMintable);
   }
 
+  const handleTokenSelected = (event: CustomEvent<{ token: Token }>) => {
+    selectedToken = event.detail.token;
+    minted = false;
+    updateMintButtonState(connected, selectedToken, $connectedSourceChain);
+  };
+
   function getAlertMessage(connected: boolean, reasonNotMintable: string) {
     if (!connected) return $t('messages.account.required');
     if (reasonNotMintable) return reasonNotMintable;
     return '';
   }
 
+  const switchChains = async () => {
+    $switchingNetwork = true;
+    try {
+      const alternateChain = getAlternateNetwork();
+      if (!alternateChain) {
+        web3modal.open();
+        return;
+      }
+      await switchChain(config, { chainId: alternateChain });
+    } catch (err) {
+      if (err instanceof SwitchChainError) {
+        warningToast({
+          title: $t('messages.network.pending.title'),
+          message: $t('messages.network.pending.message'),
+        });
+      } else if (err instanceof UserRejectedRequestError) {
+        warningToast({
+          title: $t('messages.network.rejected.title'),
+          message: $t('messages.network.rejected.message'),
+        });
+        console.error(err);
+      }
+    } finally {
+      $switchingNetwork = false;
+      updateMintButtonState(connected, selectedToken, $connectedSourceChain);
+    }
+  };
+
   onMount(() => {
     // Only show tokens in the dropdown that are mintable
-    const testERC20 = testERC20Tokens.filter((token) => token.mintable);
-    const testNFTs = testNFT.filter((token) => token.mintable);
+    const testERC20 = testERC20Tokens.filter((token) => isMintable(token));
+    const testNFTs = testNFT.filter((token) => isMintable(token));
 
     mintableTokens = [...testERC20, ...testNFTs];
   });
 
+  $: minted = false;
+
+  $: wrongChain = false;
+
   $: connected = isUserConnected($account);
 
   $: disabled = !$account || !$account.isConnected;
@@ -148,29 +193,48 @@
         direction={ChainSelectorDirection.SOURCE}
         label={$t('chain_selector.currently_on')}
         switchWallet />
-      <TokenDropdown {disabled} tokens={mintableTokens} {onlyMintable} bind:value={selectedToken} />
+      <TokenDropdown
+        {disabled}
+        tokens={mintableTokens}
+        {onlyMintable}
+        bind:value={selectedToken}
+        on:tokenSelected={handleTokenSelected} />
     </div>
 
-    {#if alertMessage}
+    {#if minted}
+      <Alert type="success">
+        <span class="text-lg font-bold">{$t('faucet.mint.success.title')}</span>
+        <br />
+        <span>{$t('faucet.mint.success.message')}</span>
+      </Alert>
+    {:else if alertMessage}
       <Alert type="warning" forceColumnFlow>
         {alertMessage}
       </Alert>
     {/if}
 
-    <ActionButton
-      priority="primary"
-      disabled={!mintButtonEnabled || disabled}
-      loading={checkingMintable || minting}
-      on:click={mintToken}>
-      <span class="body-bold">
-        {#if checkingMintable}
-          {$t('faucet.button.checking')}
-        {:else if minting}
-          {$t('faucet.button.minting')}
-        {:else}
-          {$t('faucet.button.mint')}
-        {/if}
-      </span>
-    </ActionButton>
+    {#if wrongChain}
+      <ActionButton priority="primary" disabled={$switchingNetwork} loading={$switchingNetwork} on:click={switchChains}>
+        <span class="body-bold">
+          {$t('common.switch_chain')}
+        </span>
+      </ActionButton>
+    {:else}
+      <ActionButton
+        priority="primary"
+        disabled={!mintButtonEnabled || disabled}
+        loading={checkingMintable || minting}
+        on:click={mintToken}>
+        <span class="body-bold">
+          {#if checkingMintable}
+            {$t('faucet.button.checking')}
+          {:else if minting}
+            {$t('faucet.button.minting')}
+          {:else}
+            {$t('faucet.button.mint')}
+          {/if}
+        </span>
+      </ActionButton>
+    {/if}
   </div>
 </Card>
diff --git a/packages/bridge-ui/src/components/TokenDropdown/TokenDropdown.svelte b/packages/bridge-ui/src/components/TokenDropdown/TokenDropdown.svelte
index 5b40f1e2b81..03040944f31 100644
--- a/packages/bridge-ui/src/components/TokenDropdown/TokenDropdown.svelte
+++ b/packages/bridge-ui/src/components/TokenDropdown/TokenDropdown.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { deepEqual } from '@wagmi/core';
-  import { onDestroy, onMount, tick } from 'svelte';
+  import { createEventDispatcher, onDestroy, onMount, tick } from 'svelte';
   import { t } from 'svelte-i18n';
   import type { Address } from 'viem';
   import { zeroAddress } from 'viem';
@@ -35,6 +35,8 @@
 
   const log = getLogger('TokenDropdown');
 
+  const dispatch = createEventDispatcher();
+
   export let tokens: Token[] = [];
   export let value: Maybe<Token> = null;
   export let onlyMintable: boolean = false;
@@ -65,6 +67,7 @@
   };
 
   const selectToken = async (token: Token) => {
+    dispatch('tokenSelected', { token });
     const srcChain = $connectedSourceChain;
     const destChain = $destNetwork;
     $computingBalance = true;
diff --git a/packages/bridge-ui/src/components/Transactions/MobileDetailsDialog.svelte b/packages/bridge-ui/src/components/Transactions/MobileDetailsDialog.svelte
index 267191bd8bb..560a3d5057e 100644
--- a/packages/bridge-ui/src/components/Transactions/MobileDetailsDialog.svelte
+++ b/packages/bridge-ui/src/components/Transactions/MobileDetailsDialog.svelte
@@ -55,9 +55,9 @@
   let canonicalAddress: Address | null;
   let canonicalChain: number | null;
 
-  $: if (token && !fetchingAddress && !canonicalAddress && !bridgedAddress) {
-    fetchTokenAddresses();
-  }
+  const forwardEvent = (e: CustomEvent) => {
+    dispatch(e.type, e.detail);
+  };
 
   const fetchTokenAddresses = async () => {
     if (!token) return;
@@ -85,6 +85,9 @@
     fetchingAddress = false;
   };
 
+  $: if (token && !fetchingAddress && !canonicalAddress && !bridgedAddress) {
+    fetchTokenAddresses();
+  }
   $: imageUrl = token?.metadata?.image || placeholderUrl;
 
   $: isERC721 = selectedItem?.tokenType === TokenType.ERC721;
@@ -127,7 +130,11 @@
               </div>
             </h4>
             <div class="f-items-center space-x-1">
-              <Status bridgeTx={selectedItem} on:insufficientFunds={handleInsufficientFunds} />
+              <Status
+                bridgeTxStatus={selectedItem.status}
+                bridgeTx={selectedItem}
+                on:openModal={forwardEvent}
+                on:insufficientFunds={handleInsufficientFunds} />
             </div>
           </li>
 
diff --git a/packages/bridge-ui/src/components/Transactions/Status/Status.svelte b/packages/bridge-ui/src/components/Transactions/Status/Status.svelte
index 2215fc52d22..868218e8a6a 100644
--- a/packages/bridge-ui/src/components/Transactions/Status/Status.svelte
+++ b/packages/bridge-ui/src/components/Transactions/Status/Status.svelte
@@ -1,28 +1,26 @@
 <script lang="ts">
-  import { onDestroy, onMount } from 'svelte';
+  import { createEventDispatcher, onDestroy, onMount } from 'svelte';
   import { t } from 'svelte-i18n';
 
-  import { ClaimDialog, ReleaseDialog, RetryDialog } from '$components/Dialogs';
   import { Spinner } from '$components/Spinner';
   import { StatusDot } from '$components/StatusDot';
   import { type BridgeTransaction, MessageStatus } from '$libs/bridge';
-  import { getMessageStatusForMsgHash } from '$libs/bridge/getMessageStatusForMsgHash';
   import { isTransactionProcessable } from '$libs/bridge/isTransactionProcessable';
   import { BridgePausedError } from '$libs/error';
   import { PollingEvent, startPolling } from '$libs/polling/messageStatusPoller';
-  import type { NFT } from '$libs/token';
   import { isBridgePaused } from '$libs/util/checkForPausedContracts';
   import { account } from '$stores/account';
   import { connectedSourceChain } from '$stores/network';
 
+  const dispatch = createEventDispatcher();
+
   export let bridgeTx: BridgeTransaction;
-  export let nft: NFT | null = null;
 
   let polling: ReturnType<typeof startPolling>;
 
   // UI state
   let isProcessable = false; // bridge tx state to be processed: claimed/retried/released
-  let bridgeTxStatus: Maybe<MessageStatus>;
+  export let bridgeTxStatus: Maybe<MessageStatus>;
 
   let loading = false;
 
@@ -30,16 +28,6 @@
     isProcessable = isTxProcessable;
   }
 
-  async function claimingDone() {
-    // Keeping model and UI in sync
-    bridgeTx.msgStatus = await getMessageStatusForMsgHash({
-      msgHash: bridgeTx.msgHash,
-      srcChainId: Number(bridgeTx.srcChainId),
-      destChainId: Number(bridgeTx.destChainId),
-    });
-    bridgeTxStatus = bridgeTx.msgStatus;
-  }
-
   function onStatusChange(status: MessageStatus) {
     // Keeping model and UI in sync
     bridgeTxStatus = bridgeTx.msgStatus = status;
@@ -50,7 +38,8 @@
       if (paused) throw new BridgePausedError('Bridge is paused');
     });
     if (!$connectedSourceChain || !$account?.address) return;
-    retryModalOpen = true;
+    // retryModalOpen = true;
+    dispatch('openModal', 'retry');
   }
 
   async function handleReleaseClick() {
@@ -58,7 +47,8 @@
       if (paused) throw new BridgePausedError('Bridge is paused');
     });
     if (!$connectedSourceChain || !$account?.address) return;
-    releaseModalOpen = true;
+    // releaseModalOpen = true;
+    dispatch('openModal', 'release');
   }
 
   async function handleClaimClick() {
@@ -67,7 +57,8 @@
     });
     if (!$connectedSourceChain || !$account?.address) return;
 
-    claimModalOpen = true;
+    // claimModalOpen = true;
+    dispatch('openModal', 'claim');
   }
 
   async function release() {
@@ -78,10 +69,6 @@
     // TODO: implement release handling
   }
 
-  $: claimModalOpen = false;
-  $: retryModalOpen = false;
-  $: releaseModalOpen = false;
-
   onMount(async () => {
     if (bridgeTx && $account?.address) {
       bridgeTxStatus = bridgeTx.msgStatus;
@@ -143,9 +130,3 @@
     <span>{$t('transactions.status.error.name')}</span>
   {/if}
 </div>
-
-<RetryDialog {bridgeTx} bind:dialogOpen={retryModalOpen} />
-
-<ReleaseDialog {bridgeTx} bind:dialogOpen={releaseModalOpen} />
-
-<ClaimDialog {bridgeTx} bind:loading bind:dialogOpen={claimModalOpen} {nft} on:claimingDone={() => claimingDone()} />
diff --git a/packages/bridge-ui/src/components/Transactions/Transaction.svelte b/packages/bridge-ui/src/components/Transactions/Transaction.svelte
index 0f5abfb7cce..2c0202446dc 100644
--- a/packages/bridge-ui/src/components/Transactions/Transaction.svelte
+++ b/packages/bridge-ui/src/components/Transactions/Transaction.svelte
@@ -4,11 +4,13 @@
 
   import { chainConfig } from '$chainConfig';
   import { DesktopOrLarger } from '$components/DesktopOrLarger';
+  import { ClaimDialog, ReleaseDialog, RetryDialog } from '$components/Dialogs';
   import { Icon } from '$components/Icon';
   import { LoadingText } from '$components/LoadingText';
   import NftInfoDialog from '$components/NFTs/NFTInfoDialog.svelte';
   import Spinner from '$components/Spinner/Spinner.svelte';
-  import type { BridgeTransaction } from '$libs/bridge';
+  import { type BridgeTransaction, MessageStatus } from '$libs/bridge';
+  import { getMessageStatusForMsgHash } from '$libs/bridge/getMessageStatusForMsgHash';
   import { getChainName } from '$libs/chain';
   import { type NFT, TokenType } from '$libs/token';
   import { fetchNFTImageUrl } from '$libs/token/fetchNFTImageUrl';
@@ -17,6 +19,7 @@
 
   import ChainSymbolName from './ChainSymbolName.svelte';
   import InsufficientFunds from './InsufficientFunds.svelte';
+  import MobileDetailsDialog from './MobileDetailsDialog.svelte';
   import { Status } from './Status';
 
   export let item: BridgeTransaction;
@@ -26,6 +29,9 @@
   let insufficientModal = false;
   let nftInfoOpen = false;
   let isDesktopOrLarger = false;
+  let detailsOpen = false;
+
+  let bridgeTxStatus: Maybe<MessageStatus>;
 
   let attrs = isDesktopOrLarger ? {} : { role: 'button' };
 
@@ -35,10 +41,30 @@
     nftInfoOpen = true;
   };
 
+  const openDetails = () => {
+    if (!isDesktopOrLarger && !interactiveDialogsOpen) {
+      detailsOpen = true;
+    }
+  };
+
+  const closeDetails = () => {
+    detailsOpen = false;
+  };
+
   const handleInsufficientFunds = () => {
     insufficientModal = true;
   };
 
+  const handleOpenModal = (event: CustomEvent) => {
+    if (event.detail === 'retry') {
+      retryModalOpen = true;
+    } else if (event.detail === 'release') {
+      releaseModalOpen = true;
+    } else if (event.detail === 'claim') {
+      claimModalOpen = true;
+    }
+  };
+
   async function analyzeTransactionInput(): Promise<void> {
     loading = true;
     try {
@@ -54,6 +80,16 @@
     loading = false;
   }
 
+  async function claimingDone() {
+    // Keeping model and UI in sync
+    item.msgStatus = await getMessageStatusForMsgHash({
+      msgHash: item.msgHash,
+      srcChainId: Number(item.srcChainId),
+      destChainId: Number(item.destChainId),
+    });
+    bridgeTxStatus = item.msgStatus;
+  }
+
   $: {
     if (item.tokenType === TokenType.ERC721 || item.tokenType === TokenType.ERC1155) {
       // for NFTs we need to fetch more information about the transaction
@@ -66,6 +102,12 @@
   $: itemAmountDisplay = item.tokenType === TokenType.ERC721 ? '---' : item.amount;
 
   $: isNFT = [TokenType.ERC1155, TokenType.ERC721].includes(item.tokenType);
+
+  $: claimModalOpen = false;
+  $: retryModalOpen = false;
+  $: releaseModalOpen = false;
+
+  $: interactiveDialogsOpen = claimModalOpen || retryModalOpen || releaseModalOpen;
 </script>
 
 {#if isNFT}
@@ -108,7 +150,8 @@
         {itemAmountDisplay}
       </div>
     {:else}
-      <div class="flex text-primary-content w-full justify-content-left">
+      <!-- svelte-ignore a11y-no-static-element-interactions -->
+      <div on:click={openDetails} {...attrs} class="flex text-primary-content w-full justify-content-left">
         {#if loading}
           <div class="rounded-[10px] w-[50px] h-[50px] bg-neutral flex items-center justify-center">
             <Spinner />
@@ -128,7 +171,7 @@
             <LoadingText mask="&nbsp;" class="min-w-[50px] max-w-[50px] h-3" />
           </div>
         {:else}
-          <div class="f-col" {...attrs} tabindex="0">
+          <div class="f-col" tabindex="0">
             <div class="f-row font-bold">
               {truncateString(getChainName(Number(item.srcChainId)), 8)}
               <i role="img" aria-label="arrow to" class="mx-auto px-2">
@@ -142,7 +185,11 @@
       </div>
     {/if}
     <div class="flex md:w-2/12 py-2 flex flex-col justify-center text-center" {...attrs} tabindex="0">
-      <Status bridgeTx={item} nft={token} on:insufficientFunds={handleInsufficientFunds} />
+      <Status
+        bridgeTx={item}
+        bind:bridgeTxStatus
+        on:openModal={handleOpenModal}
+        on:insufficientFunds={handleInsufficientFunds} />
     </div>
     <div class="hidden md:flex grow py-2 flex flex-col justify-center">
       <a
@@ -155,7 +202,11 @@
     </div>
   </div>
 {:else}
-  <div {...attrs} class="flex text-primary-content md:h-[80px] h-[45px] w-full my-[10px] md:my-[0px]">
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
+  <div
+    on:click={openDetails}
+    {...attrs}
+    class="flex text-primary-content md:h-[80px] h-[45px] w-full my-[10px] md:my-[0px]">
     {#if isDesktopOrLarger}
       <div class="w-1/5 py-2 flex flex-row">
         <ChainSymbolName chainId={item.srcChainId} />
@@ -194,7 +245,11 @@
     {/if}
 
     <div class="md:w-1/5 py-2 flex flex-col justify-center">
-      <Status bridgeTx={item} on:insufficientFunds={handleInsufficientFunds} />
+      <Status
+        bridgeTx={item}
+        bind:bridgeTxStatus
+        on:openModal={handleOpenModal}
+        on:insufficientFunds={handleInsufficientFunds} />
     </div>
     <div class="hidden md:flex w-1/5 py-2 flex flex-col justify-center">
       <a
@@ -213,3 +268,22 @@
 <NftInfoDialog nft={token} bind:modalOpen={nftInfoOpen} viewOnly />
 
 <InsufficientFunds bind:modalOpen={insufficientModal} />
+
+<MobileDetailsDialog
+  {token}
+  {closeDetails}
+  {detailsOpen}
+  selectedItem={item}
+  on:insufficientFunds={handleInsufficientFunds}
+  on:openModal={handleOpenModal} />
+
+<RetryDialog bridgeTx={item} bind:dialogOpen={retryModalOpen} />
+
+<ReleaseDialog bridgeTx={item} bind:dialogOpen={releaseModalOpen} />
+
+<ClaimDialog
+  bridgeTx={item}
+  bind:loading
+  bind:dialogOpen={claimModalOpen}
+  nft={token}
+  on:claimingDone={() => claimingDone()} />
diff --git a/packages/bridge-ui/src/i18n/en.json b/packages/bridge-ui/src/i18n/en.json
index 9479addf465..c4deece53e5 100644
--- a/packages/bridge-ui/src/i18n/en.json
+++ b/packages/bridge-ui/src/i18n/en.json
@@ -6,6 +6,7 @@
   },
   "bridge": {
     "actions": {
+      "acknowledge": "I understand",
       "approve": {
         "rejected": {
           "title": "Request to approve rejected"
@@ -39,6 +40,7 @@
     },
     "alerts": {
       "slow_bridging": "Please note: Bridging to L1 will take around 24hrs!",
+      "stable_coin": "You are bridging a stable coin. Currently we are not supporting a native 1:1 conversion. Please use the <a href=\"https://stargate.finance/transfer\" class=\"link\">Stargate Bridge</a> instead. Your bridged asset might not be of any use.",
       "wrapped_eth": "You are bridging wrapped ETH. Please be aware that un-wrapping will only work on the original chain of the token, <span class=\"font-bold\">NOT</span> on the destination."
     },
     "button": {
@@ -226,6 +228,7 @@
     "close": "Close",
     "collection": "Collection",
     "confirm": "Confirm",
+    "confirmed": "Confirmed",
     "continue": "Continue",
     "contract_address": "Contract address",
     "customized": "Customized",
@@ -246,6 +249,7 @@
     "sender": "Sender",
     "status": "Status",
     "success": "Success",
+    "switch_chain": "Switch chain",
     "switch_to": "Switch to",
     "symbol": "Symbol",
     "to": "To",
@@ -282,7 +286,7 @@
     "warning": {
       "insufficient_balance": "You don't have enough ETH to complete the transaction. Please add some ETH to your wallet.",
       "no_connected": "Please connect your wallet to mint tokens.",
-      "not_mintable": "This token is not mintable on this network",
+      "not_mintable": "This token is not mintable on this network. Please switch to the correct network.",
       "token_minted": "You have already minted this token.",
       "unknown": "Something did not work"
     },
diff --git a/packages/bridge-ui/src/libs/token/tokens.ts b/packages/bridge-ui/src/libs/token/tokens.ts
index 1d93f217ee8..880ae86fb4c 100644
--- a/packages/bridge-ui/src/libs/token/tokens.ts
+++ b/packages/bridge-ui/src/libs/token/tokens.ts
@@ -3,7 +3,7 @@ import { zeroAddress } from 'viem';
 import { customToken } from '$customToken';
 import { getConfiguredChainIds } from '$libs/chain';
 
-import { type Token, TokenType } from './types';
+import { type Token, TokenAttributeKey, TokenType } from './types';
 
 const chains = getConfiguredChainIds();
 
@@ -27,4 +27,12 @@ export const tokens = [ETHToken, ...testERC20Tokens];
 
 export const getTokensByType = (type: TokenType): Token[] => tokens.filter((token) => token.type === type);
 
-export const isWrapped = (token: Token): boolean => tokens.find((token) => token.wrapped === true) === token;
+const hasAttribute = (token: Token, attribute: TokenAttributeKey): boolean => {
+  if (!token.attributes) return false;
+  return token.attributes.some((attr) => attr[attribute] === true);
+};
+
+export const isWrapped = (token: Token): boolean => hasAttribute(token, TokenAttributeKey.Wrapped);
+export const isSupported = (token: Token): boolean => hasAttribute(token, TokenAttributeKey.Supported);
+export const isStablecoin = (token: Token): boolean => hasAttribute(token, TokenAttributeKey.Stablecoin);
+export const isMintable = (token: Token): boolean => hasAttribute(token, TokenAttributeKey.Mintable);
diff --git a/packages/bridge-ui/src/libs/token/types.ts b/packages/bridge-ui/src/libs/token/types.ts
index 8472614d9f0..1f9e26ba1b0 100644
--- a/packages/bridge-ui/src/libs/token/types.ts
+++ b/packages/bridge-ui/src/libs/token/types.ts
@@ -13,6 +13,20 @@ export enum TokenType {
   ERC1155 = 'ERC1155',
 }
 
+export enum TokenAttributeKey {
+  Mintable = 'mintable',
+  Wrapped = 'wrapped',
+  Stablecoin = 'stablecoin',
+  Supported = 'supported',
+}
+
+export type TokenAttributes = {
+  [TokenAttributeKey.Mintable]?: boolean;
+  [TokenAttributeKey.Wrapped]?: boolean;
+  [TokenAttributeKey.Stablecoin]?: boolean;
+  [TokenAttributeKey.Supported]?: boolean;
+};
+
 export type Token = {
   type: TokenType;
   name: string;
@@ -21,9 +35,8 @@ export type Token = {
   decimals: number;
   logoURI?: string;
   imported?: boolean;
-  mintable?: boolean;
   balance?: bigint;
-  wrapped?: boolean;
+  attributes?: TokenAttributes[];
 };
 
 export type NFT = Token & {