diff --git a/go.mod b/go.mod
index 61d6cb40de..88cde8d900 100644
--- a/go.mod
+++ b/go.mod
@@ -229,7 +229,8 @@ require (
 	github.com/prysmaticlabs/gohashtree v0.0.3-alpha // indirect
 	github.com/prysmaticlabs/prombbolt v0.0.0-20210126082820-9b7adba6db7c // indirect
 	github.com/quic-go/qpack v0.4.0 // indirect
-	github.com/quic-go/quic-go v0.42.0 // indirect
+	github.com/quic-go/qtls-go1-20 v0.3.4 // indirect
+	github.com/quic-go/quic-go v0.39.4 // indirect
 	github.com/quic-go/webtransport-go v0.6.0 // indirect
 	github.com/raulk/go-watchdog v1.3.0 // indirect
 	github.com/rivo/uniseg v0.4.4 // indirect
@@ -269,7 +270,7 @@ require (
 	go.opentelemetry.io/otel/trace v1.24.0 // indirect
 	go.uber.org/dig v1.17.1 // indirect
 	go.uber.org/fx v1.20.1 // indirect
-	go.uber.org/mock v0.4.0 // indirect
+	go.uber.org/mock v0.3.0 // indirect
 	go.uber.org/multierr v1.11.0 // indirect
 	go.uber.org/zap v1.26.0 // indirect
 	golang.org/x/crypto v0.22.0 // indirect
diff --git a/go.sum b/go.sum
index 591d7adf2e..ca234aa4bc 100644
--- a/go.sum
+++ b/go.sum
@@ -992,8 +992,10 @@ github.com/prysmaticlabs/prysm/v4 v4.2.0 h1:87QoRT3Azs7c1Y6SnIq0+CNtQRbAt0sVKGj2
 github.com/prysmaticlabs/prysm/v4 v4.2.0/go.mod h1:PQrQtHJeeqTz4K3udN/EX1Gs2xhWR4j93gSj0OQZ1f4=
 github.com/quic-go/qpack v0.4.0 h1:Cr9BXA1sQS2SmDUWjSofMPNKmvF6IiIfDRmgU0w1ZCo=
 github.com/quic-go/qpack v0.4.0/go.mod h1:UZVnYIfi5GRk+zI9UMaCPsmZ2xKJP7XBUvVyT1Knj9A=
-github.com/quic-go/quic-go v0.42.0 h1:uSfdap0eveIl8KXnipv9K7nlwZ5IqLlYOpJ58u5utpM=
-github.com/quic-go/quic-go v0.42.0/go.mod h1:132kz4kL3F9vxhW3CtQJLDVwcFe5wdWeJXXijhsO57M=
+github.com/quic-go/qtls-go1-20 v0.3.4 h1:MfFAPULvst4yoMgY9QmtpYmfij/em7O8UUi+bNVm7Cg=
+github.com/quic-go/qtls-go1-20 v0.3.4/go.mod h1:X9Nh97ZL80Z+bX/gUXMbipO6OxdiDi58b/fMC9mAL+k=
+github.com/quic-go/quic-go v0.39.4 h1:PelfiuG7wXEffUT2yceiqz5V6Pc0TA5ruOd1LcmFc1s=
+github.com/quic-go/quic-go v0.39.4/go.mod h1:T09QsDQWjLiQ74ZmacDfqZmhY/NLnw5BC40MANNNZ1Q=
 github.com/quic-go/webtransport-go v0.6.0 h1:CvNsKqc4W2HljHJnoT+rMmbRJybShZ0YPFDD3NxaZLY=
 github.com/quic-go/webtransport-go v0.6.0/go.mod h1:9KjU4AEBqEQidGHNDkZrb8CAa1abRaosM2yGOyiikEc=
 github.com/rabbitmq/amqp091-go v1.9.0 h1:qrQtyzB4H8BQgEuJwhmVQqVHB9O4+MNDJCCAcpc3Aoo=
@@ -1225,8 +1227,8 @@ go.uber.org/fx v1.20.1/go.mod h1:iSYNbHf2y55acNCwCXKx7LbWb5WG1Bnue5RDXz1OREg=
 go.uber.org/goleak v1.1.11-0.20210813005559-691160354723/go.mod h1:cwTWslyiVhfpKIDGSZEM2HlOvcqm+tG4zioyIeLoqMQ=
 go.uber.org/goleak v1.2.1 h1:NBol2c7O1ZokfZ0LEU9K6Whx/KnwvepVetCUhtKja4A=
 go.uber.org/goleak v1.2.1/go.mod h1:qlT2yGI9QafXHhZZLxlSuNsMw3FFLxBr+tBRlmO1xH4=
-go.uber.org/mock v0.4.0 h1:VcM4ZOtdbR4f6VXfiOpwpVJDL6lCReaZ6mw31wqh7KU=
-go.uber.org/mock v0.4.0/go.mod h1:a6FSlNadKUHUa9IP5Vyt1zh4fC7uAwxMutEAscFbkZc=
+go.uber.org/mock v0.3.0 h1:3mUxI1No2/60yUYax92Pt8eNOEecx2D3lcXZh2NEZJo=
+go.uber.org/mock v0.3.0/go.mod h1:a6FSlNadKUHUa9IP5Vyt1zh4fC7uAwxMutEAscFbkZc=
 go.uber.org/multierr v1.1.0/go.mod h1:wR5kodmAFQ0UK8QlbwjlSNy0Z68gJhDJUG5sjR94q/0=
 go.uber.org/multierr v1.3.0/go.mod h1:VgVr7evmIr6uPjLBxg28wmKNXyqE9akIJ5XnfpiKl+4=
 go.uber.org/multierr v1.6.0/go.mod h1:cdWPpRnG4AhwMwsgIHip0KRBQjJy5kYEpYjJxpXp9iU=
diff --git a/packages/bridge-ui/config/schemas/configuredCustomTokens.schema.json b/packages/bridge-ui/config/schemas/configuredCustomTokens.schema.json
index 044be0aff9..1a92562b13 100644
--- a/packages/bridge-ui/config/schemas/configuredCustomTokens.schema.json
+++ b/packages/bridge-ui/config/schemas/configuredCustomTokens.schema.json
@@ -30,6 +30,9 @@
       },
       "mintable": {
         "type": "boolean"
+      },
+      "wrapped": {
+        "type": "boolean"
       }
     },
     "required": ["name", "addresses", "symbol", "decimals", "type", "logoURI"]
diff --git a/packages/bridge-ui/src/components/Alert/FlatAlert.svelte b/packages/bridge-ui/src/components/Alert/FlatAlert.svelte
index 6fc7fd4d02..a82472fe18 100644
--- a/packages/bridge-ui/src/components/Alert/FlatAlert.svelte
+++ b/packages/bridge-ui/src/components/Alert/FlatAlert.svelte
@@ -30,7 +30,7 @@
     info: {
       textClass: 'text-secondary-content',
       iconType: 'info-circle',
-      iconFillClass: 'fill-info-content',
+      iconFillClass: 'fill-secondary-content',
     },
   };
 
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 17a5dd1a86..099573e7cf 100644
--- a/packages/bridge-ui/src/components/Bridge/FungibleBridgeComponents/ReviewStep/ReviewStep.svelte
+++ b/packages/bridge-ui/src/components/Bridge/FungibleBridgeComponents/ReviewStep/ReviewStep.svelte
@@ -9,6 +9,7 @@
   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 { connectedSourceChain } from '$stores/network';
 
   export let hasEnoughEth: boolean = false;
@@ -21,6 +22,10 @@
 
   $: displayL1Warning = slowL1Warning && $destChain?.id && chainConfig[$destChain.id].type === LayerType.L1;
 
+  $: wrapped = $selectedToken !== null && isWrapped($selectedToken as Token);
+
+  $: wrappedAssetWarning = $t('bridge.alerts.wrapped_eth');
+
   const dispatch = createEventDispatcher();
 
   const editTransactionDetails = () => {
@@ -64,6 +69,11 @@
   <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
diff --git a/packages/bridge-ui/src/components/Bridge/SharedBridgeComponents/AddressInput/AddressInput.svelte b/packages/bridge-ui/src/components/Bridge/SharedBridgeComponents/AddressInput/AddressInput.svelte
index 92fd502b3c..f7a8d25ce4 100644
--- a/packages/bridge-ui/src/components/Bridge/SharedBridgeComponents/AddressInput/AddressInput.svelte
+++ b/packages/bridge-ui/src/components/Bridge/SharedBridgeComponents/AddressInput/AddressInput.svelte
@@ -99,7 +99,7 @@
 
   <!-- Conditional alerts -->
   {#if !quiet}
-    <div class="">
+    <div class="pt-[8px]">
       {#if state === State.INVALID && ethereumAddress}
         <FlatAlert type="error" forceColumnFlow message={$t('inputs.address_input.errors.invalid')} />
       {:else if state === State.TOO_SHORT && ethereumAddress}
diff --git a/packages/bridge-ui/src/components/DialogTabs/DialogTab.svelte b/packages/bridge-ui/src/components/DialogTabs/DialogTab.svelte
new file mode 100644
index 0000000000..9c1ab0557f
--- /dev/null
+++ b/packages/bridge-ui/src/components/DialogTabs/DialogTab.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+
+  import { classNames } from '$libs/util/classNames';
+
+  const dispatch = createEventDispatcher();
+
+  export let active: boolean;
+
+  function onClick() {
+    dispatch('click');
+  }
+</script>
+
+<button
+  role="tab"
+  aria-selected={active}
+  class:tab-active={active}
+  class={classNames('tab !border-color-red', active ? 'tab-active ' : '')}
+  on:click={onClick}>
+  <slot></slot>
+</button>
+
+<style>
+  .tab {
+    box-sizing: border-box !important;
+    padding-bottom: 6px;
+  }
+  .tab:not(.tab-active) {
+    border-color: var(--tertiary-content) !important;
+    border-bottom: 1px solid;
+    margin-bottom: 2px;
+    padding-top: 2px;
+  }
+  .tab-active {
+    border-bottom: 4px solid;
+    border-color: var(--primary-brand) !important;
+    padding-bottom: 4px;
+  }
+</style>
diff --git a/packages/bridge-ui/src/components/DialogTabs/DialogTabs.svelte b/packages/bridge-ui/src/components/DialogTabs/DialogTabs.svelte
new file mode 100644
index 0000000000..919434c01d
--- /dev/null
+++ b/packages/bridge-ui/src/components/DialogTabs/DialogTabs.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+
+  import DialogTab from './DialogTab.svelte';
+
+  export let tabs: { id: string; title: string }[];
+  export let activeTab: string;
+  const dispatch = createEventDispatcher();
+
+  function setActiveTab(tabId: string) {
+    if (activeTab !== tabId) {
+      activeTab = tabId;
+      dispatch('change', { tabId });
+    }
+  }
+</script>
+
+<div role="tablist" class="tabs">
+  {#each tabs as tab}
+    <DialogTab active={tab.id === activeTab} on:click={() => setActiveTab(tab.id)}>
+      {tab.title}
+    </DialogTab>
+  {/each}
+</div>
diff --git a/packages/bridge-ui/src/components/DialogTabs/index.ts b/packages/bridge-ui/src/components/DialogTabs/index.ts
new file mode 100644
index 0000000000..1db8f2a45c
--- /dev/null
+++ b/packages/bridge-ui/src/components/DialogTabs/index.ts
@@ -0,0 +1,2 @@
+export { default as DialogTab } from './DialogTab.svelte';
+export { default as DialogTabs } from './DialogTabs.svelte';
diff --git a/packages/bridge-ui/src/components/Icon/Icon.svelte b/packages/bridge-ui/src/components/Icon/Icon.svelte
index 95e37b2de9..87b3de139e 100644
--- a/packages/bridge-ui/src/components/Icon/Icon.svelte
+++ b/packages/bridge-ui/src/components/Icon/Icon.svelte
@@ -202,7 +202,7 @@
       class={fillClass}
       fill-rule="evenodd"
       clip-rule="evenodd"
-      d="M20,6H16V5a3,3,0,0,0-3-3H11A3,3,0,0,0,8,5V6H4A1,1,0,0,0,4,8H5V19a3,3,0,0,0,3,3h8a3,3,0,0,0,3-3V8h1a1,1,0,0,0,0-2ZM10,5a1,1,0,0,1,1-1h2a1,1,0,0,1,1,1V6H10Zm7,14a1,1,0,0,1-1,1H8a1,1,0,0,1-1-1V8H17Z" />
+      d="M6.12461 0.699951C5.06146 0.699951 4.19961 1.5618 4.19961 2.62495V2.93484C3.64291 2.98875 3.09083 3.05858 2.54381 3.14386C2.25733 3.18852 2.06129 3.45697 2.10595 3.74346C2.15061 4.02995 2.41907 4.22599 2.70556 4.18132L2.80909 4.16538L3.39814 11.5285C3.47817 12.5289 4.31339 13.2999 5.31701 13.2999H8.68206C9.68568 13.2999 10.5209 12.5289 10.6009 11.5285L11.19 4.16534L11.2938 4.18132C11.5803 4.22599 11.8488 4.02995 11.8934 3.74346C11.9381 3.45697 11.742 3.18852 11.4556 3.14386C10.9085 3.05857 10.3564 2.98874 9.79961 2.93482V2.62495C9.79961 1.5618 8.93776 0.699951 7.87461 0.699951H6.12461ZM6.99968 2.79995C7.58723 2.79995 8.17071 2.81761 8.74961 2.85244V2.62495C8.74961 2.1417 8.35786 1.74995 7.87461 1.74995H6.12461C5.64136 1.74995 5.24961 2.1417 5.24961 2.62495V2.85245C5.82856 2.81762 6.41208 2.79995 6.99968 2.79995ZM5.94903 5.40625C5.93868 5.14758 5.72059 4.94626 5.46192 4.95661C5.20324 4.96696 5.00193 5.18505 5.01228 5.44372L5.22229 10.6937C5.23263 10.9524 5.45072 11.1537 5.7094 11.1434C5.96807 11.133 6.16938 10.9149 6.15904 10.6563L5.94903 5.40625ZM8.98704 5.44372C8.99738 5.18505 8.79607 4.96696 8.5374 4.95661C8.27872 4.94627 8.06063 5.14758 8.05029 5.40625L7.84029 10.6563C7.82994 10.9149 8.03125 11.133 8.28993 11.1434C8.5486 11.1537 8.76669 10.9524 8.77704 10.6937L8.98704 5.44372Z" />
   {:else if type === 'adjustments'}
     <path
       class={fillClass}
diff --git a/packages/bridge-ui/src/components/InputBox/InputBox.svelte b/packages/bridge-ui/src/components/InputBox/InputBox.svelte
index 094a6fcea8..e06f42fe46 100644
--- a/packages/bridge-ui/src/components/InputBox/InputBox.svelte
+++ b/packages/bridge-ui/src/components/InputBox/InputBox.svelte
@@ -9,7 +9,7 @@
   $: disabled = $$props.disabled || false;
 
   let classes = classNames(
-    'w-full input-box bg-neutral-background shadow-none placeholder:text-tertiary-content font-bold shadow-none outline-none ',
+    'w-full input-box bg-neutral-background placeholder:text-tertiary-content font-bold',
     disabled ? 'cursor-not-allowed ' : 'cursor-pointer',
     $$props.class,
   );
diff --git a/packages/bridge-ui/src/components/TokenDropdown/AddCustomERC20.svelte b/packages/bridge-ui/src/components/TokenDropdown/AddCustomERC20.svelte
index e615001f5d..d9f59bbfbe 100644
--- a/packages/bridge-ui/src/components/TokenDropdown/AddCustomERC20.svelte
+++ b/packages/bridge-ui/src/components/TokenDropdown/AddCustomERC20.svelte
@@ -31,10 +31,10 @@
 
   export let modalOpen = false;
   export let loadingTokenDetails = false;
+  export let customTokens: Token[] = [];
 
   let addressInputComponent: AddressInput;
   let tokenAddress: Address | string = '';
-  let customTokens: Token[] = [];
   let customToken: Token | null = null;
   let customTokenWithDetails: Token | null = null;
   let disabled = true;
@@ -88,10 +88,6 @@
   };
 
   const remove = async (token: Token) => {
-    log('remove token', token);
-    const address = $account.address;
-    tokenService.removeToken(token, address as Address);
-    customTokens = tokenService.getTokens(address as Address);
     dispatch('tokenRemoved', { token });
   };
 
@@ -155,8 +151,6 @@
       ? formatUnits(customTokenWithDetails.balance, customTokenWithDetails.decimals)
       : 0;
 
-  $: customTokens = tokenService.getTokens($account?.address as Address);
-
   $: disabled = state !== AddressInputState.VALID || tokenAddress === '' || tokenAddress.length !== 42;
 
   const closeModalIfClickedOutside = (e: MouseEvent) => {
@@ -186,7 +180,7 @@
         on:addressvalidation={onAddressValidation}
         bind:state
         onDialog />
-      <div class="w-full flex items-center justify-between mt-4">
+      <div class="w-full flex items-center justify-between">
         {#if customTokenWithDetails}
           <span>{$t('common.name')}: {customTokenWithDetails.symbol}</span>
           <span>{$t('common.balance')}: {formattedBalance}</span>
@@ -194,16 +188,12 @@
           <FlatAlert type="error" message={$t('bridge.errors.custom_token.not_found.message')} />
         {:else if loadingTokenDetails}
           <Spinner />
-        {:else}
-          <div class="min-h-[25px]" />
+        {:else if state === AddressInputState.DEFAULT}
+          <FlatAlert type="info" message={$t('token_dropdown.custom_token.default_message')} />
         {/if}
       </div>
     </div>
-
-    <ActionButton priority="primary" {disabled} on:click={addCustomErc20Token} onPopup>
-      {$t('token_dropdown.custom_token.button')}
-    </ActionButton>
-
+    <div class="h-sep" />
     {#if customTokens.length > 0}
       <div class="flex h-full w-full flex-col justify-between mt-6">
         <h3 class="title-body-bold mb-7">{$t('token_dropdown.imported_tokens')}</h3>
@@ -217,10 +207,15 @@
               <Icon type="trash" fillClass="fill-primary-icon" size={24} />
             </button>
           </div>
-          <div class="h-sep" />
         {/each}
       </div>
+    {:else}
+      <span>{$t('token_dropdown.no_imported_token')}</span>
     {/if}
+    <div class="h-sep" />
+    <ActionButton priority="primary" {disabled} on:click={addCustomErc20Token} onPopup>
+      {$t('token_dropdown.custom_token.button')}
+    </ActionButton>
   </div>
   <!-- We catch key events above -->
   <!-- svelte-ignore a11y-click-events-have-key-events -->
diff --git a/packages/bridge-ui/src/components/TokenDropdown/DialogView.svelte b/packages/bridge-ui/src/components/TokenDropdown/DialogView.svelte
index cf199d2b11..cb355971ce 100644
--- a/packages/bridge-ui/src/components/TokenDropdown/DialogView.svelte
+++ b/packages/bridge-ui/src/components/TokenDropdown/DialogView.svelte
@@ -1,34 +1,49 @@
 <script lang="ts">
-  import { onDestroy, onMount } from 'svelte';
+  import { deepEqual } from '@wagmi/core';
+  import { createEventDispatcher, onDestroy, onMount } from 'svelte';
   import { t } from 'svelte-i18n';
   import type { Address } from 'viem';
 
   import { CloseButton } from '$components/Button';
+  import { DialogTabs } from '$components/DialogTabs';
   import { Icon } from '$components/Icon';
   import Erc20 from '$components/Icon/ERC20.svelte';
+  import { InputBox } from '$components/InputBox';
   import { OnAccount } from '$components/OnAccount';
   import { closeOnEscapeOrOutsideClick } from '$libs/customActions';
   import { tokenService } from '$libs/storage/services';
   import type { Token } from '$libs/token';
   import { noop } from '$libs/util/noop';
+  import { truncateString } from '$libs/util/truncateString';
   import { account } from '$stores/account';
 
-  import AddCustomErc20 from './AddCustomERC20.svelte';
   import { symbolToIconMap } from './symbolToIconMap';
+  import { TabTypes, TokenTabs } from './types';
 
   export let id: string;
   export let tokens: Token[] = [];
   export let customTokens: Token[] = [];
   export let value: Maybe<Token> = null;
   export let menuOpen = false;
-  export let modalOpen = false;
   export let onlyMintable: boolean = false;
   export let selectToken: (token: Token) => void = noop;
   export let closeMenu: () => void = noop;
 
+  export let activeTab: TabTypes = TabTypes.TOKEN;
+
+  const dispatch = createEventDispatcher();
+
+  const searchToken = (event: Event) => {
+    enteredTokenName = (event.target as HTMLInputElement).value;
+  };
+
+  const handleTabChange = (event: CustomEvent) => {
+    activeTab = event.detail.tabId;
+  };
+
   const showAddERC20 = () => {
     menuOpen = false;
-    modalOpen = true;
+    dispatch('openCustomTokenModal');
   };
 
   const handleStorageChange = (newTokens: Token[]) => {
@@ -41,6 +56,10 @@
     }
   };
 
+  const removeToken = async (token: Token) => {
+    dispatch('tokenRemoved', { token });
+  };
+
   const getTokenKeydownHandler = (token: Token) => {
     return (event: KeyboardEvent) => {
       if (event.key === 'Enter') {
@@ -52,6 +71,22 @@
     };
   };
 
+  $: filteredCustomTokens = [] as Token[];
+  $: filteredTokens = [] as Token[];
+  $: enteredTokenName = '';
+
+  $: if (enteredTokenName !== '') {
+    filteredTokens = tokens.filter((token) => {
+      return token.name.includes(enteredTokenName) || token.symbol.includes(enteredTokenName);
+    });
+    filteredCustomTokens = customTokens.filter((token) => {
+      return token.name.includes(enteredTokenName) || token.symbol.includes(enteredTokenName);
+    });
+  } else {
+    filteredTokens = tokens;
+    filteredCustomTokens = customTokens;
+  }
+
   onMount(() => tokenService.subscribeToChanges(handleStorageChange));
 
   onDestroy(() => tokenService.unsubscribeFromChanges(handleStorageChange));
@@ -69,64 +104,92 @@
     <div class="w-full">
       <h3 class="title-body-bold mb-7">{$t('token_dropdown.label')}</h3>
 
+      <DialogTabs tabs={TokenTabs} bind:activeTab on:change={handleTabChange} />
+
+      <InputBox
+        {id}
+        type="text"
+        placeholder={$t('common.search_token')}
+        bind:value={enteredTokenName}
+        on:input={searchToken}
+        class="p-[12px] my-[20px]" />
       <ul role="listbox" class="menu p-0">
-        {#each tokens as token (token.symbol)}
-          {@const selected = token === value}
-          <!-- svelte-ignore a11y-click-events-have-key-events -->
-          <li
-            role="option"
-            tabindex="0"
-            aria-selected={selected}
-            class="rounded-[10px]"
-            class:bg-tertiary-interactive-accent={selected}
-            on:click={() => selectToken(token)}>
-            <div class="p-4">
-              {#if symbolToIconMap[token.symbol] && !token.imported}
-                <i role="img" aria-label={token.name}>
-                  <svelte:component this={symbolToIconMap[token.symbol]} size={28} />
-                </i>
-              {:else}
-                <i role="img" aria-label={token.symbol}>
-                  <svelte:component this={Erc20} size={28} />
-                </i>
-              {/if}
-              <span class="body-bold">{token.symbol}</span>
-            </div>
-          </li>
-        {/each}
-        {#if !onlyMintable}
-          {#each customTokens as token, index (index)}
+        {#if activeTab === TabTypes.TOKEN}
+          {#each filteredTokens as token (token.symbol)}
+            {@const selected = deepEqual(token, value)}
+            <!-- svelte-ignore a11y-click-events-have-key-events -->
             <li
               role="option"
               tabindex="0"
-              aria-selected={token === value}
-              on:click={() => selectToken(token)}
-              on:keydown={getTokenKeydownHandler(token)}>
+              aria-selected={selected}
+              class="rounded-[10px]"
+              class:bg-tertiary-interactive-accent={selected}
+              on:click={() => selectToken(token)}>
               <div class="p-4">
-                <i role="img" aria-label={token.name}>
-                  <Erc20 />
-                </i>
+                {#if symbolToIconMap[token.symbol] && !token.imported}
+                  <i role="img" aria-label={token.name}>
+                    <svelte:component this={symbolToIconMap[token.symbol]} size={28} />
+                  </i>
+                {:else}
+                  <i role="img" aria-label={token.symbol}>
+                    <svelte:component this={Erc20} size={28} />
+                  </i>
+                {/if}
                 <span class="body-bold">{token.symbol}</span>
               </div>
             </li>
           {/each}
-
-          <div class="h-sep" />
-          <li>
-            <button on:click={showAddERC20} class="flex hover:bg-dark-5 justify-center items-center p-4 rounded-sm">
-              <Icon type="plus-circle" fillClass="fill-primary-icon" />
-              <span
-                class="
-            body-bold
-            bg-transparent
-            flex-1
-            w-[100px]
-            px-0
-            pl-2">
-                {$t('token_dropdown.add_custom')}
-              </span>
-            </button>
-          </li>
+        {:else if activeTab === TabTypes.CUSTOM}
+          {#if !onlyMintable}
+            {#each filteredCustomTokens as ct, index (index)}
+              {@const selected = deepEqual(ct, value)}
+              <li
+                role="option"
+                tabindex="0"
+                aria-selected={selected}
+                class="rounded-[10px]"
+                class:bg-tertiary-interactive-accent={selected}
+                on:click={() => selectToken(ct)}
+                on:keydown={getTokenKeydownHandler(ct)}>
+                <div class="p-4 flex">
+                  <i
+                    role="option"
+                    tabindex="0"
+                    aria-selected={ct === value}
+                    on:click={() => selectToken(ct)}
+                    on:keydown={getTokenKeydownHandler(ct)}
+                    aria-label={ct.name}>
+                    <Erc20 />
+                  </i>
+                  <span
+                    role="option"
+                    aria-selected={ct === value}
+                    tabindex="-1"
+                    on:click={() => selectToken(ct)}
+                    on:keydown={getTokenKeydownHandler(ct)}
+                    class="grow body-bold">{truncateString(ct.symbol, 10)}</span>
+                  <div
+                    role="button"
+                    tabindex="-1"
+                    on:click={() => removeToken(ct)}
+                    on:keydown={getTokenKeydownHandler(ct)}
+                    class="cursor-pointer">
+                    <Icon type="trash" size={25} fillClass="fill-primary-icon" />
+                  </div>
+                </div>
+              </li>
+            {/each}
+            <li class="f-between-center max-h-[42px]">
+              <button
+                on:click={showAddERC20}
+                class="flex w-full hover:bg-dark-5 justify-center items-center rounded-sm">
+                <Icon type="plus-circle" fillClass="fill-primary-icon" />
+                <span class=" body-bold bg-transparent flex-1 w-[100px] px-0 pl-2">
+                  {$t('token_dropdown.add_custom')}
+                </span>
+              </button>
+            </li>
+          {/if}
         {/if}
       </ul>
     </div>
@@ -134,7 +197,4 @@
   <button class="overlay-backdrop" data-modal-uuid={id} />
 </dialog>
 
-<AddCustomErc20 bind:modalOpen on:tokenRemoved />
-
-<!-- <OnNetwork change={onNetworkChange} /> -->
 <OnAccount change={onAccountChange} />
diff --git a/packages/bridge-ui/src/components/TokenDropdown/DropdownView.svelte b/packages/bridge-ui/src/components/TokenDropdown/DropdownView.svelte
index 46d20e118f..b12c2ad6b6 100644
--- a/packages/bridge-ui/src/components/TokenDropdown/DropdownView.svelte
+++ b/packages/bridge-ui/src/components/TokenDropdown/DropdownView.svelte
@@ -1,10 +1,13 @@
 <script lang="ts">
-  import { onDestroy, onMount } from 'svelte';
+  import { deepEqual } from '@wagmi/core';
+  import { createEventDispatcher, onDestroy, onMount } from 'svelte';
   import { t } from 'svelte-i18n';
   import type { Address } from 'viem';
 
+  import { DialogTabs } from '$components/DialogTabs';
   import { Icon } from '$components/Icon';
   import Erc20 from '$components/Icon/ERC20.svelte';
+  import InputBox from '$components/InputBox/InputBox.svelte';
   import { OnAccount } from '$components/OnAccount';
   import { closeOnEscapeOrOutsideClick } from '$libs/customActions';
   import { tokenService } from '$libs/storage/services';
@@ -16,23 +19,29 @@
 
   import AddCustomErc20 from './AddCustomERC20.svelte';
   import { symbolToIconMap } from './symbolToIconMap';
+  import { TabTypes, TokenTabs } from './types';
 
   export let id: string;
   export let menuOpen = false;
-  export let closeMenu: () => void = noop;
-
+  export let closeMenu: () => void = () => {
+    noop();
+  };
   export let tokens: Token[] = [];
   export let customTokens: Token[] = [];
   export let value: Maybe<Token> = null;
   export let selectToken: (token: Token) => void = noop;
   export let onlyMintable: boolean = false;
 
-  let addArc20ModalOpen = false;
+  export let activeTab: TabTypes = TabTypes.TOKEN;
 
-  $: menuClasses = classNames(
-    'menu absolute right-0 w-[265px] p-3 mt-2 rounded-[10px] bg-neutral-background z-10  box-shadow-small',
-    menuOpen ? 'visible opacity-100' : 'invisible opacity-0',
-  );
+  const dispatch = createEventDispatcher();
+
+  const handleCloseMenu = () => {
+    enteredTokenName = '';
+    closeMenu();
+  };
+
+  let addArc20ModalOpen = false;
 
   const getTokenKeydownHandler = (token: Token) => {
     return (event: KeyboardEvent) => {
@@ -42,7 +51,7 @@
     };
   };
 
-  const showAddERC20 = () => (addArc20ModalOpen = true);
+  const showAddERC20 = () => dispatch('openCustomTokenModal');
 
   const handleStorageChange = (newTokens: Token[]) => {
     customTokens = newTokens;
@@ -54,6 +63,39 @@
     }
   };
 
+  const handleTabChange = (event: CustomEvent) => {
+    activeTab = event.detail.tabId;
+  };
+
+  const searchToken = (event: Event) => {
+    enteredTokenName = (event.target as HTMLInputElement).value;
+  };
+
+  const removeToken = async (token: Token) => {
+    dispatch('tokenRemoved', { token });
+  };
+
+  $: filteredCustomTokens = [] as Token[];
+  $: filteredTokens = [] as Token[];
+  $: enteredTokenName = '';
+
+  $: if (enteredTokenName !== '') {
+    filteredTokens = tokens.filter((token) => {
+      return token.name.includes(enteredTokenName) || token.symbol.includes(enteredTokenName);
+    });
+    filteredCustomTokens = customTokens.filter((token) => {
+      return token.name.includes(enteredTokenName) || token.symbol.includes(enteredTokenName);
+    });
+  } else {
+    filteredTokens = tokens;
+    filteredCustomTokens = customTokens;
+  }
+
+  $: menuClasses = classNames(
+    'menu absolute right-0 w-[244px] p-3 mt-2 rounded-[10px] bg-neutral-background z-10  box-shadow-small',
+    menuOpen ? 'visible opacity-100' : 'invisible opacity-0',
+  );
+
   onMount(() => {
     tokenService.subscribeToChanges(handleStorageChange);
   });
@@ -64,66 +106,97 @@
 </script>
 
 <!-- Desktop (or larger) view -->
-<ul
-  role="listbox"
+<div
   {id}
   class={menuClasses}
-  use:closeOnEscapeOrOutsideClick={{ enabled: menuOpen, callback: closeMenu, uuid: id }}>
-  {#each tokens as t (t.symbol)}
-    <li
-      role="option"
-      tabindex="0"
-      aria-selected={t === value}
-      on:click={() => selectToken(t)}
-      on:keydown={getTokenKeydownHandler(t)}>
-      <div class="p-4">
-        <!-- Only match icons to configurd tokens -->
-        {#if symbolToIconMap[t.symbol] && !t.imported}
-          <i role="img" aria-label={t.name}>
-            <svelte:component this={symbolToIconMap[t.symbol]} size={28} />
-          </i>
-        {:else}
-          <i role="img" aria-label={t.symbol}>
-            <svelte:component this={Erc20} size={28} />
-          </i>
-        {/if}
-        <span class="body-bold">{t.symbol}</span>
-      </div>
-    </li>
-  {/each}
-  {#if !onlyMintable}
-    {#each customTokens as ct, index (index)}
-      <li
-        role="option"
-        tabindex="0"
-        aria-selected={ct === value}
-        on:click={() => selectToken(ct)}
-        on:keydown={getTokenKeydownHandler(ct)}>
-        <div class="p-4">
-          <i role="img" aria-label={ct.name}>
-            <Erc20 />
-          </i>
-          <span class="body-bold">{truncateString(ct.symbol, 10)}</span>
-        </div>
-      </li>
-    {/each}
-    <div class="h-sep my-[8px]" />
-    <li>
-      <button on:click={showAddERC20} class="flex hover:bg-dark-5 justify-center items-center rounded-lg h-[64px]">
-        <Icon type="plus-circle" fillClass="fill-primary-icon" size={32} vWidth={28} vHeight={28} />
-        <span
-          class="
+  use:closeOnEscapeOrOutsideClick={{ enabled: menuOpen, callback: handleCloseMenu, uuid: id }}>
+  <DialogTabs tabs={TokenTabs} bind:activeTab on:change={handleTabChange} />
+
+  <InputBox
+    {id}
+    type="text"
+    placeholder={$t('common.search_token')}
+    bind:value={enteredTokenName}
+    on:input={searchToken}
+    class="p-[12px] my-[20px]" />
+  <ul role="listbox" {id} class="gap-2">
+    {#if activeTab === TabTypes.TOKEN}
+      {#each filteredTokens as t (t.symbol)}
+        {@const selected = deepEqual(t, value)}
+        <li
+          role="option"
+          tabindex="0"
+          aria-selected={selected}
+          class="rounded-[10px] my-[8px]"
+          class:bg-tertiary-interactive-accent={selected}
+          on:click={() => selectToken(t)}
+          on:keydown={getTokenKeydownHandler(t)}>
+          <div class="p-4">
+            <!-- Only match icons to configurd tokens -->
+            {#if symbolToIconMap[t.symbol] && !t.imported}
+              <i role="img" aria-label={t.name}>
+                <svelte:component this={symbolToIconMap[t.symbol]} size={28} />
+              </i>
+            {:else}
+              <i role="img" aria-label={t.symbol}>
+                <svelte:component this={Erc20} size={28} />
+              </i>
+            {/if}
+            <span class="body-bold">{t.symbol}</span>
+          </div>
+        </li>
+      {/each}
+    {:else if activeTab === TabTypes.CUSTOM}
+      {#if !onlyMintable}
+        {#each filteredCustomTokens as ct, index (index)}
+          <li>
+            <div class="p-4 flex">
+              <i
+                role="option"
+                tabindex="0"
+                aria-selected={ct === value}
+                on:click={() => selectToken(ct)}
+                on:keydown={getTokenKeydownHandler(ct)}
+                aria-label={ct.name}>
+                <Erc20 />
+              </i>
+              <span
+                role="option"
+                aria-selected={ct === value}
+                tabindex="-1"
+                on:click={() => selectToken(ct)}
+                on:keydown={getTokenKeydownHandler(ct)}
+                class="grow body-bold">{truncateString(ct.symbol, 10)}</span>
+              <div
+                role="button"
+                tabindex="-1"
+                on:click={() => removeToken(ct)}
+                on:keydown={getTokenKeydownHandler(ct)}
+                class="cursor-pointer">
+                <Icon type="trash" size={25} fillClass="fill-primary-icon" />
+              </div>
+            </div>
+          </li>
+        {/each}
+
+        <div class="h-sep my-[8px]" />
+        <li>
+          <button on:click={showAddERC20} class="flex hover:bg-dark-5 justify-center items-center rounded-lg h-[64px]">
+            <Icon type="plus-circle" fillClass="fill-primary-icon" size={32} vWidth={28} vHeight={28} />
+            <span
+              class="
             body-bold
             bg-transparent
             flex-1
             px-0">
-          {$t('token_dropdown.add_custom')}
-        </span>
-      </button>
-    </li>
-  {/if}
-</ul>
-
+              {$t('token_dropdown.add_custom')}
+            </span>
+          </button>
+        </li>
+      {/if}
+    {/if}
+  </ul>
+</div>
 <AddCustomErc20 bind:modalOpen={addArc20ModalOpen} on:tokenRemoved />
 
 <OnAccount change={onAccountChange} />
diff --git a/packages/bridge-ui/src/components/TokenDropdown/TokenDropdown.svelte b/packages/bridge-ui/src/components/TokenDropdown/TokenDropdown.svelte
index 07ddc5a786..5b40f1e2b8 100644
--- a/packages/bridge-ui/src/components/TokenDropdown/TokenDropdown.svelte
+++ b/packages/bridge-ui/src/components/TokenDropdown/TokenDropdown.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { deepEqual } from '@wagmi/core';
   import { onDestroy, onMount, tick } from 'svelte';
   import { t } from 'svelte-i18n';
   import type { Address } from 'viem';
@@ -26,9 +27,11 @@
   import { type Account, account } from '$stores/account';
   import { connectedSourceChain } from '$stores/network';
 
+  import AddCustomErc20 from './AddCustomERC20.svelte';
   import DialogView from './DialogView.svelte';
   import DropdownView from './DropdownView.svelte';
   import { symbolToIconMap } from './symbolToIconMap';
+  import { TabTypes } from './types';
 
   const log = getLogger('TokenDropdown');
 
@@ -38,10 +41,15 @@
   export let disabled = false;
   export let combined = false;
 
+  let customTokenModalOpen = false;
+
   let id = `menu-${uid()}`;
   $: menuOpen = false;
 
-  const customTokens = tokenService.getTokens($account?.address as Address);
+  let activeTab: TabTypes = TabTypes.TOKEN;
+
+  let customTokens = tokenService.getTokens($account?.address as Address);
+
   // This will control which view to render depending on the screensize.
   // Since markup will differ, and there is logic running when interacting
   // with this component, it makes more sense to not render the view that's
@@ -115,11 +123,21 @@
     $computingBalance = false;
   };
 
+  const handleCustomTokenModal = () => {
+    closeMenu();
+    customTokenModalOpen = true;
+  };
+
   const handleTokenRemoved = (event: { detail: { token: Token } }) => {
+    const token = event.detail.token;
+
     // if the selected token is the one that was removed by the user, remove it
-    if (event.detail.token === value) {
+    if (deepEqual(token, value)) {
       value = ETHToken;
     }
+    const address = $account.address;
+    tokenService.removeToken(token, address as Address);
+    customTokens = tokenService.getTokens(address as Address);
   };
 
   async function updateBalance() {
@@ -231,16 +249,31 @@
       bind:menuOpen
       {onlyMintable}
       {tokens}
-      {customTokens}
+      bind:customTokens
       {value}
       {selectToken}
       {closeMenu}
-      on:tokenRemoved={handleTokenRemoved} />
+      {activeTab}
+      on:tokenRemoved={handleTokenRemoved}
+      on:openCustomTokenModal={handleCustomTokenModal} />
   {:else}
-    <DialogView {id} bind:menuOpen {onlyMintable} {tokens} {customTokens} {value} {selectToken} {closeMenu} />
+    <DialogView
+      {id}
+      bind:menuOpen
+      {onlyMintable}
+      {tokens}
+      bind:customTokens
+      {value}
+      {selectToken}
+      {closeMenu}
+      {activeTab}
+      on:tokenRemoved={handleTokenRemoved}
+      on:openCustomTokenModal={handleCustomTokenModal} />
   {/if}
 </div>
 
 <div data-modal-uuid={id} />
 
 <OnAccount change={onAccountChange} />
+
+<AddCustomErc20 bind:modalOpen={customTokenModalOpen} bind:customTokens on:tokenRemoved />
diff --git a/packages/bridge-ui/src/components/TokenDropdown/types.ts b/packages/bridge-ui/src/components/TokenDropdown/types.ts
new file mode 100644
index 0000000000..e7be0b3c2d
--- /dev/null
+++ b/packages/bridge-ui/src/components/TokenDropdown/types.ts
@@ -0,0 +1,9 @@
+export enum TabTypes {
+  TOKEN = 'token',
+  CUSTOM = 'custom',
+}
+
+export const TokenTabs = [
+  { id: TabTypes.TOKEN, title: 'Token' },
+  { id: TabTypes.CUSTOM, title: 'Custom' },
+];
diff --git a/packages/bridge-ui/src/i18n/en.json b/packages/bridge-ui/src/i18n/en.json
index eea6937a31..0a32cdb4ac 100644
--- a/packages/bridge-ui/src/i18n/en.json
+++ b/packages/bridge-ui/src/i18n/en.json
@@ -38,7 +38,8 @@
       "nft_scan_again": "Scan again"
     },
     "alerts": {
-      "slow_bridging": "Please note: Bridging to L1 will take around 24hrs!"
+      "slow_bridging": "Please note: Bridging to L1 will take around 24hrs!",
+      "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": {
       "approve": "Approve",
@@ -240,6 +241,7 @@
     "ok": "Okay",
     "recipient": "Recipient",
     "review": "Review",
+    "search_token": "Search token",
     "see_results": "See results",
     "sender": "Sender",
     "status": "Status",
@@ -360,10 +362,10 @@
     "transactions": "Transactions"
   },
   "paginator": {
-    "of": "of",
-    "page": "Page",
+    "everything_loaded": "Everything loaded",
     "more": "Fetch more...",
-    "everything_loaded": "Everything loaded"
+    "of": "of",
+    "page": "Page"
   },
   "paused_modal": {
     "description": "The bridge is currently not available. Follow our official communication channels for more information. ",
@@ -412,11 +414,13 @@
     "add_custom": "Add Custom",
     "custom_token": {
       "button": "Add token",
+      "default_message": "Only ERC20 token accepted",
       "description": "You can add your own token by entering the contract address below. Make sure you are on the chain where the token is deployed.",
       "title": "Add your own token"
     },
     "imported_tokens": "Your imported tokens:",
-    "label": "Select token"
+    "label": "Select token",
+    "no_imported_token": "No imported tokens yet"
   },
   "transactions": {
     "actions": {
diff --git a/packages/bridge-ui/src/libs/fee/recommendProcessingFee.ts b/packages/bridge-ui/src/libs/fee/recommendProcessingFee.ts
index ed40a6b307..909fcdb40d 100644
--- a/packages/bridge-ui/src/libs/fee/recommendProcessingFee.ts
+++ b/packages/bridge-ui/src/libs/fee/recommendProcessingFee.ts
@@ -29,14 +29,12 @@ export async function recommendProcessingFee({
   let estimatedMsgGaslimit;
 
   const baseFee = await getBaseFee(BigInt(destChainId));
-  log(`Base fee: ${baseFee}`);
 
   const destPublicClient = getPublicClient(config, { chainId: destChainId });
 
   if (!destPublicClient) throw new Error('Could not get public client');
 
   const maxPriorityFee = await destPublicClient.estimateMaxPriorityFeePerGas();
-  log(`Max priority fee: ${maxPriorityFee}`);
 
   if (!baseFee) throw new Error('Unable to get base fee');
 
@@ -57,15 +55,9 @@ export async function recommendProcessingFee({
         log(`token ${token.symbol} is already deployed on chain ${destChainId}`);
 
         estimatedMsgGaslimit = BigInt(gasLimitConfig.GAS_RESERVE) + gasLimitConfig.erc20DeployedGasLimit;
-        log(
-          `calculation ${gasLimitConfig.GAS_RESERVE} + ${gasLimitConfig.erc20DeployedGasLimit} = ${estimatedMsgGaslimit}`,
-        );
       } else {
         log(`token ${token.symbol} is not deployed on chain ${destChainId}`);
         estimatedMsgGaslimit = BigInt(gasLimitConfig.GAS_RESERVE) + gasLimitConfig.erc20NotDeployedGasLimit;
-        log(
-          `calculation ${gasLimitConfig.GAS_RESERVE} + ${gasLimitConfig.erc20NotDeployedGasLimit} = ${estimatedMsgGaslimit}`,
-        );
       }
     } else if (token.type === TokenType.ERC721) {
       if (isTokenAlreadyDeployed) {
@@ -87,14 +79,10 @@ export async function recommendProcessingFee({
   } else {
     log(`Fee for ETH bridging`);
     estimatedMsgGaslimit = BigInt(gasLimitConfig.GAS_RESERVE);
-    log(`calculation ${gasLimitConfig.GAS_RESERVE}  = ${estimatedMsgGaslimit}`);
   }
   if (!estimatedMsgGaslimit) throw new Error('Unable to calculate fee');
 
   const fee = estimatedMsgGaslimit * (BigInt(PUBLIC_FEE_MULTIPLIER) * (baseFee + maxPriorityFee));
-  log(`Formula: ${estimatedMsgGaslimit} * ${PUBLIC_FEE_MULTIPLIER} * (${baseFee} + ${maxPriorityFee})) = ${fee}`);
-
-  log(`Recommended fee: ${fee.toString()}`);
   return roundWeiTo6DecimalPlaces(fee);
 }
 
diff --git a/packages/bridge-ui/src/libs/token/tokens.ts b/packages/bridge-ui/src/libs/token/tokens.ts
index aab7965a15..1d93f217ee 100644
--- a/packages/bridge-ui/src/libs/token/tokens.ts
+++ b/packages/bridge-ui/src/libs/token/tokens.ts
@@ -24,3 +24,7 @@ export const testNFT: Token[] = customToken.filter(
 );
 
 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;
diff --git a/packages/bridge-ui/src/libs/token/types.ts b/packages/bridge-ui/src/libs/token/types.ts
index da71e4b15e..8472614d9f 100644
--- a/packages/bridge-ui/src/libs/token/types.ts
+++ b/packages/bridge-ui/src/libs/token/types.ts
@@ -23,6 +23,7 @@ export type Token = {
   imported?: boolean;
   mintable?: boolean;
   balance?: bigint;
+  wrapped?: boolean;
 };
 
 export type NFT = Token & {
diff --git a/packages/bridge-ui/src/styles/components.css b/packages/bridge-ui/src/styles/components.css
index 35115edbc3..36dfaa6d69 100644
--- a/packages/bridge-ui/src/styles/components.css
+++ b/packages/bridge-ui/src/styles/components.css
@@ -189,7 +189,10 @@
   }
 
   input {
-    border: 1px solid var(--primary-border);
+    border: 1px solid var(--primary-border-dark);
+    &:hover {
+      border: 1px solid transparent;
+    }
   }
 
   h1 {
diff --git a/packages/protocol/docs/images/native_support.png b/packages/protocol/docs/images/native_support.png
deleted file mode 100644
index 393bce01af..0000000000
Binary files a/packages/protocol/docs/images/native_support.png and /dev/null differ
diff --git a/packages/protocol/docs/native_token_support.md b/packages/protocol/docs/native_token_support.md
deleted file mode 100644
index 4fce256435..0000000000
--- a/packages/protocol/docs/native_token_support.md
+++ /dev/null
@@ -1,20 +0,0 @@
-# Taiko native vs. wrapped token bridging
-
-![Wrapped_vs_Native](./images/native_support.png "Wrapped vs. Native bridging")
-
-Taiko's bridging concept is a lock-and-mint type. It simply means (the red path above) on the canonical chain we take custody of the assets and on the destination chain we mint the wrapped counterpart. When someone wants to bridge back (from destination to canonical) it will first burn the tokens, then release the funds on the canonical chain.
-
-But there might be some incentives (e.g.: adoption, liquidity fragmentation, etc.) when deploying a native token on the destination chain is beneficial. For this reason Taiko introduced the possibility of deploying the canonical assets (together with all their sub/parent/proxy contracts) and plug it into our ERC20Vault via adapters (green path).
-
-Important to note that while wrapped asset bridging is 'automatic', the native one requires the willingness and efforts from Taiko side (and maybe also original token issuer green light to recognise officially as "native"), to support that type of asset-transfer.
-
-## Howto
-
-There are some steps to do in order to facilitate native token bridging. In the next steps, here is a TLDR breakdown how we do it with USDC.
-
-1. Deploy the same (bytecode equivalent) ERC-20 token on L2. An example of the contracts + deployments can be found in our [USDC repo](https://github.com/taikoxyz/USDC).
-2. Deploy adapter (e.g.: [USDC adapter](../contracts/tokenvault/adapters/USDCAdapter.sol)). As this will serve as the plug-in to our `ERC20Vault` for custom (native) tokens. This adapter serves multiple purposes. It is also a wrapper around the native token in a way - that it matches our conform `ERC20Vault` interfaces so that we can be sure any kind of native ERC-20 can be supported on L2. Also can handle custom logic required by the native asset (roles handling, specific logic, etc.).
-3. Transfer the ownership (if not already owned by) to `ERC20Vault` owner since those 2 have to be owned by the same address. (!IMPORTANT! Not the token owned by the same owner, but the token adapter! USDC owner will still be Circle on L2.)
-4. Since our bridge is permissionless, there might have been some USDC bridge operations in the past. It would mean, there is already an existing `BridgedUSDC` on our L2. To overcome liquidity fragmentation, we (Taiko) need to call `ERC20Vault` `changeBridgedToken()` function with the appropriate parameters. This way the "old" `BridgedUSDC` can be migrated to this new native token and the bridging operation will mint into the new token frm that point on.
-
-The above steps (2. - 4.) is incorporated into the script [DeployUSDCAdapter.s.sol](../script/DeployUSDCAdapter.s.sol).