diff --git a/packages/desktop/components/ConfirmationDialog.svelte b/packages/desktop/components/ConfirmationDialog.svelte
index 12ade47f5c..606b5f75f9 100644
--- a/packages/desktop/components/ConfirmationDialog.svelte
+++ b/packages/desktop/components/ConfirmationDialog.svelte
@@ -12,6 +12,7 @@
     export let backText: string = localize('actions.cancel')
     export let confirmText: string = localize('actions.confirm')
     export let onConfirm: () => void
+    export let onClose: () => void
 
     export function openDialog(): void {
         visible = true
@@ -19,6 +20,7 @@
 
     function closeDialog(): void {
         visible = false
+        onClose()
     }
 
     function onConfirmClick(): void {
diff --git a/packages/desktop/components/popup/Popup.svelte b/packages/desktop/components/popup/Popup.svelte
index 9d54771aba..5cb335338d 100644
--- a/packages/desktop/components/popup/Popup.svelte
+++ b/packages/desktop/components/popup/Popup.svelte
@@ -64,6 +64,8 @@
     import SyncAccountsPopup from './popups/SyncAccountsPopup.svelte'
     import TestDeepLinkFormPopup from './popups/TestDeepLinkFormPopup.svelte'
     import TokenInformationPopup from './popups/TokenInformationPopup.svelte'
+    import TransakFramePopup from './popups/TransakFramePopup.svelte'
+    import TransakSelectTokenPopup from './popups/TransakSelectTokenPopup.svelte'
     import VoteForProposal from './popups/VoteForProposalPopup.svelte'
     import VotingPowerToZeroPopup from './popups/VotingPowerToZeroPopup.svelte'
     import { localize } from '@core/i18n'
@@ -146,6 +148,8 @@
         [PopupId.SyncAccounts]: SyncAccountsPopup,
         [PopupId.TestDeepLinkForm]: TestDeepLinkFormPopup,
         [PopupId.TokenInformation]: TokenInformationPopup,
+        [PopupId.TransakFrame]: TransakFramePopup,
+        [PopupId.TransakSelectToken]: TransakSelectTokenPopup,
         [PopupId.VoteForProposal]: VoteForProposal,
         [PopupId.VotingPowerToZero]: VotingPowerToZeroPopup,
     }
@@ -169,6 +173,7 @@
         if (!preventClose) {
             if (confirmClickOutside) {
                 confirmationDialog?.openDialog()
+                modifyPopupState({ confirmClickOutsideActive: true })
             } else {
                 closePopup({ callOnCancel: true })
             }
@@ -241,9 +246,12 @@
     <ConfirmationDialog
         bind:this={confirmationDialog}
         onConfirm={() => {
-            modifyPopupState({ confirmClickOutside: false })
+            modifyPopupState({ confirmClickOutside: false, confirmClickOutsideActive: false })
             closePopup()
         }}
+        onClose={() => {
+            modifyPopupState({ confirmClickOutsideActive: false })
+        }}
         confirmText={localize('actions.close')}
         title="Close popup"
         variant="danger"
diff --git a/packages/desktop/components/popup/popups/TransakFramePopup.svelte b/packages/desktop/components/popup/popups/TransakFramePopup.svelte
new file mode 100644
index 0000000000..37c553c0a9
--- /dev/null
+++ b/packages/desktop/components/popup/popups/TransakFramePopup.svelte
@@ -0,0 +1,137 @@
+<script lang="ts">
+    import { TransakCryptoCurrency } from '@auxiliary/transak'
+    import { Button, Icon, IconName, Spinner, Text } from '@bloomwalletio/ui'
+    import { DISCORD_URL } from '@contexts/settings'
+    import { selectedAccountIndex } from '@core/account/stores'
+    import { openUrlInBrowser, Platform } from '@core/app'
+    import { localize } from '@core/i18n'
+    import { FiatCurrency } from '@core/market'
+    import { SupportedNetworkId } from '@core/network'
+    import { activeProfile } from '@core/profile/stores'
+    import { IPopupState, popupState } from '@desktop/auxiliary/popup'
+    import { TransakConnectionBanner } from '@views/dashboard/buy-sell/components'
+    import { onDestroy, onMount, tick } from 'svelte'
+
+    const isProduction = [SupportedNetworkId.Iota, SupportedNetworkId.Shimmer].includes($activeProfile?.network?.id)
+
+    export let isBuyOrSell: 'BUY' | 'SELL' | undefined = undefined
+    export let fiatAmount: number | undefined = undefined
+    export let fiatCurrency: keyof typeof FiatCurrency | undefined = undefined
+    export let cryptoCurrency: TransakCryptoCurrency | undefined = undefined
+    export let paymentMethod: string | undefined = undefined
+    export let recipientAddress: string | undefined = undefined
+
+    let error: boolean = false
+    let isTransakOpen: boolean = false
+    let isTransakLoading: boolean = false
+
+    $: if ($selectedAccountIndex !== undefined) {
+        void closeTransak()
+    }
+    $: isTransakOpen, void handleOverlayChanges($popupState)
+
+    Platform.onEvent('transak-loaded', () => (isTransakLoading = false))
+    Platform.onEvent('transak-not-loaded', () => (error = true))
+
+    async function handleOverlayChanges(state: IPopupState): Promise<void> {
+        if (!state.confirmClickOutside) {
+            return
+        }
+
+        if (state.confirmClickOutsideActive) {
+            await Platform.hideTransak()
+        } else {
+            await tick()
+            await Platform.showTransak()
+        }
+    }
+
+    let transakContainer: HTMLDivElement | undefined
+    async function updateTransakBounds(): Promise<void> {
+        if (!transakContainer) {
+            return
+        }
+
+        const rect = transakContainer.getBoundingClientRect()
+
+        await Platform.updateTransakBounds({
+            // Safe 1px padding to prevent the iframe from being out of bounds
+            x: rect.x + 1,
+            y: rect.y,
+            // Safe 2px padding to prevent the iframe from being out of bounds
+            width: rect.width - 2,
+            height: rect.height,
+        })
+    }
+
+    export async function resetTransak(): Promise<void> {
+        if (!fiatCurrency || !cryptoCurrency || !recipientAddress || !isBuyOrSell || !fiatAmount || !paymentMethod) {
+            error = true
+            return
+        }
+
+        isTransakLoading = true
+        await Platform.closeTransak()
+        isTransakOpen = false
+        await Platform.openTransak({
+            currency: fiatCurrency,
+            address: recipientAddress,
+            service: isBuyOrSell,
+            amount: Number(fiatAmount),
+            paymentMethod: paymentMethod,
+            networkName: cryptoCurrency.transakNetworkName,
+            cryptoCurrencySymbol: cryptoCurrency.symbol,
+            environment: isProduction ? 'PRODUCTION' : 'STAGING',
+        })
+        isTransakOpen = true
+        await updateTransakBounds()
+    }
+
+    async function closeTransak(): Promise<void> {
+        await Platform.closeTransak()
+        isTransakOpen = false
+    }
+
+    function onButtonClick(): void {
+        openUrlInBrowser(DISCORD_URL)
+    }
+
+    onMount(() => {
+        void resetTransak()
+    })
+
+    onDestroy(() => {
+        void Platform.closeTransak()
+        isTransakOpen = false
+        Platform.removeListenersForEvent('reset-transak')
+    })
+</script>
+
+<svelte:window on:resize={updateTransakBounds} />
+
+<div class="flex flex-col">
+    <div class="border-b border-solid border-stroke dark:border-stroke-dark">
+        <TransakConnectionBanner refreshFunction={resetTransak} />
+    </div>
+    <div class="transak-container" bind:this={transakContainer}>
+        {#if error}
+            <div class="flex flex-col justify-center items-center w-full h-full gap-4 px-10">
+                <Icon name={IconName.ArrowDownUp} size="lg" textColor="brand" />
+                <Text type="body1">{localize('views.buySell.error.title')}</Text>
+                <Text textColor="secondary" align="center">{localize('views.buySell.error.description')}</Text>
+                <Button on:click={onButtonClick} text={localize('actions.visitDiscord')} />
+            </div>
+        {:else if isTransakLoading}
+            <div class="w-full h-full flex justify-center items-center">
+                <Spinner size="lg" textColor="info" />
+            </div>
+        {/if}
+    </div>
+</div>
+
+<style>
+    .transak-container {
+        width: 30rem;
+        height: min(70vh, 700px);
+    }
+</style>
diff --git a/packages/desktop/components/popup/popups/TransakSelectTokenPopup.svelte b/packages/desktop/components/popup/popups/TransakSelectTokenPopup.svelte
new file mode 100644
index 0000000000..c55342ed65
--- /dev/null
+++ b/packages/desktop/components/popup/popups/TransakSelectTokenPopup.svelte
@@ -0,0 +1,108 @@
+<script lang="ts">
+    import { selectedExchangeCryptoCurrency, transakCryptoCurrencies, TransakCryptoCurrency } from '@auxiliary/transak'
+    import { IOption, SelectInput } from '@bloomwalletio/ui'
+    import { PopupTemplate } from '@components'
+    import { handleError } from '@core/error/handlers'
+    import { localize } from '@core/i18n'
+    import { networks } from '@core/network'
+    import { closePopup } from '@desktop/auxiliary/popup'
+    import { SearchInput } from '@ui'
+    import { TransakCryptoCurrencyTile } from '@views/dashboard/buy-sell/components'
+
+    let searchValue: string = ''
+    let selectedToken = $selectedExchangeCryptoCurrency
+
+    const options = [
+        { value: 'all', label: localize('popups.transaction.allNetworks') },
+        ...($networks?.reduce((acc, network) => {
+            if (!acc.find((option) => option.value === network.id)) {
+                acc.push({
+                    value: network.id,
+                    label: network.name,
+                })
+            }
+            return acc
+        }, [] as IOption[]) ?? []),
+    ]
+    let selectedOption = options[0]
+
+    let filteredCryptoCurrencies = $transakCryptoCurrencies
+    function setFilteredfilteredCryptoCurrencies(): void {
+        if (selectedOption.value === 'all') {
+            filteredCryptoCurrencies = $transakCryptoCurrencies?.filter((cryptoCurrency) => {
+                const _searchValue = searchValue.toLowerCase()
+                return (
+                    cryptoCurrency.name.toLowerCase().includes(_searchValue) ||
+                    cryptoCurrency.symbol.toLowerCase().includes(_searchValue)
+                )
+            })
+        } else {
+            filteredCryptoCurrencies = $transakCryptoCurrencies?.filter((cryptoCurrency) => {
+                // TODO: map key to transak network name or compare chain id if possible?
+                const isInNetwork = cryptoCurrency.network.id === selectedOption.value
+
+                const _searchValue = searchValue.toLowerCase()
+                const isSearched =
+                    cryptoCurrency.name.toLowerCase().includes(_searchValue) ||
+                    cryptoCurrency.symbol.toLowerCase().includes(_searchValue)
+
+                return isInNetwork && isSearched
+            })
+        }
+    }
+    $: $transakCryptoCurrencies, searchValue, selectedOption, setFilteredfilteredCryptoCurrencies()
+
+    function onCryptoCurrencyClick(cryptoCurrency: TransakCryptoCurrency): void {
+        try {
+            if (cryptoCurrency === $selectedExchangeCryptoCurrency) {
+                onContinueClick()
+            } else {
+                selectedToken = cryptoCurrency
+            }
+        } catch (err) {
+            handleError(err)
+        }
+    }
+
+    function onCancelClick(): void {
+        closePopup()
+    }
+
+    function onContinueClick(): void {
+        $selectedExchangeCryptoCurrency = selectedToken
+        closePopup()
+    }
+</script>
+
+<PopupTemplate
+    title={localize('popups.transaction.selectToken')}
+    backButton={{ text: localize('actions.cancel'), onClick: onCancelClick }}
+    continueButton={{
+        text: localize('actions.continue'),
+        onClick: onContinueClick,
+        disabled: !selectedToken,
+    }}
+>
+    <div class="flex-1 h-0 flex flex-col gap-4">
+        <div class="flex-none flex flex-col gap-4">
+            {#if $networks.length > 1}
+                <SelectInput bind:selected={selectedOption} {options} hideValue />
+            {/if}
+            <SearchInput bind:value={searchValue} />
+        </div>
+        <div class="-mr-3 overflow-y-scroll">
+            <token-list class="flex flex-col p-0.5 pr-1.5 gap-2">
+                {#each filteredCryptoCurrencies ?? [] as cryptoCurrency}
+                    {@const selected =
+                        selectedToken?.name === cryptoCurrency.name &&
+                        selectedToken?.network.id === cryptoCurrency?.network.id}
+                    <TransakCryptoCurrencyTile
+                        {cryptoCurrency}
+                        onClick={() => onCryptoCurrencyClick(cryptoCurrency)}
+                        {selected}
+                    />
+                {/each}
+            </token-list>
+        </div>
+    </div>
+</PopupTemplate>
diff --git a/packages/desktop/features/buy-sell.features.ts b/packages/desktop/features/buy-sell.features.ts
index 07735ed62c..8d2e1c259f 100644
--- a/packages/desktop/features/buy-sell.features.ts
+++ b/packages/desktop/features/buy-sell.features.ts
@@ -2,6 +2,9 @@ import { IFeatureFlag } from '@lib/features/interfaces'
 
 const buySellFeatures: IFeatureFlag = {
     enabled: true,
+    sell: {
+        enabled: false,
+    },
 }
 
 export default buySellFeatures
diff --git a/packages/desktop/lib/auxiliary/popup/enums/popup-id.enum.ts b/packages/desktop/lib/auxiliary/popup/enums/popup-id.enum.ts
index 429921049d..9efdc19e56 100644
--- a/packages/desktop/lib/auxiliary/popup/enums/popup-id.enum.ts
+++ b/packages/desktop/lib/auxiliary/popup/enums/popup-id.enum.ts
@@ -48,6 +48,8 @@ export enum PopupId {
     SyncAccounts = 'syncAccounts',
     TestDeepLinkForm = 'testDeepLinkForm',
     TokenInformation = 'tokenInformation',
+    TransakFrame = 'transakFrame',
+    TransakSelectToken = 'transakSelectToken',
     VoteForProposal = 'voteForProposal',
     VotingPowerToZero = 'votingPowerToZero',
 }
diff --git a/packages/desktop/lib/auxiliary/popup/interfaces/popup-state.interface.ts b/packages/desktop/lib/auxiliary/popup/interfaces/popup-state.interface.ts
index 1dc7bdac79..db2d3aa370 100644
--- a/packages/desktop/lib/auxiliary/popup/interfaces/popup-state.interface.ts
+++ b/packages/desktop/lib/auxiliary/popup/interfaces/popup-state.interface.ts
@@ -12,4 +12,5 @@ export interface IPopupState {
     relative?: boolean
     autofocusContent?: boolean
     confirmClickOutside?: boolean
+    confirmClickOutsideActive?: boolean
 }
diff --git a/packages/desktop/lib/electron/managers/transak.manager.ts b/packages/desktop/lib/electron/managers/transak.manager.ts
index 8bd5498e19..b5f5bc94a7 100644
--- a/packages/desktop/lib/electron/managers/transak.manager.ts
+++ b/packages/desktop/lib/electron/managers/transak.manager.ts
@@ -3,7 +3,7 @@ import { windows } from '../constants/windows.constant'
 import features from '@features/features'
 import { ITransakManager, ITransakWindowData } from '@core/app'
 import path from 'path'
-import { TRANSAK_WIDGET_URL } from '@auxiliary/transak/constants'
+import { TRANSAK_PRODUCTION_WIDGET_URL, TRANSAK_STAGING_WIDGET_URL } from '@auxiliary/transak/constants'
 import { buildUrl } from '@core/utils/url'
 import { FiatCurrency } from '@core/market/enums/fiat-currency.enum'
 import fs from 'fs'
@@ -144,13 +144,16 @@ export default class TransakManager implements ITransakManager {
         })
 
         windows.transak.webContents.addListener('did-navigate-in-page', (_, url) => {
-            const googlePayUrl = TRANSAK_WIDGET_URL + '/googlepay'
+            const widgetUrl =
+                data.environment === 'PRODUCTION' ? TRANSAK_PRODUCTION_WIDGET_URL : TRANSAK_STAGING_WIDGET_URL
+
+            const googlePayUrl = widgetUrl + '/googlepay'
             if (url.startsWith(googlePayUrl)) {
                 windows.main?.webContents?.send?.('try-open-url-in-browser', url)
                 void windows.transak?.loadURL?.(initialUrl)
             }
 
-            const kycUrl = TRANSAK_WIDGET_URL + '/user/kyc-forms/idProof'
+            const kycUrl = widgetUrl + '/user/kyc-forms/idProof'
             if (process.platform === 'darwin' && url.startsWith(kycUrl)) {
                 void systemPreferences.askForMediaAccess('camera')
             }
@@ -219,14 +222,15 @@ export default class TransakManager implements ITransakManager {
     }
 
     private getUrl(data: ITransakWindowData): string {
-        const { address, currency, service, amount } = data
+        const { address, currency, service, amount, paymentMethod, networkName, cryptoCurrencySymbol, environment } =
+            data
         const apiKey = process.env.TRANSAK_API_KEY
 
         if (typeof apiKey !== 'string') {
             throw new Error('Undefined Transak API key')
         }
 
-        if (!Object.values(FiatCurrency).includes(currency as FiatCurrency)) {
+        if (!Object.keys(FiatCurrency).includes(currency)) {
             throw new Error('Invalid Transak currency')
         }
 
@@ -243,22 +247,34 @@ export default class TransakManager implements ITransakManager {
 
         const queryParams: QueryParameters = {
             apiKey,
-            defaultFiatCurrency: currency,
-            defaultFiatAmount: amount,
-            walletAddress: address,
-            productsAvailed: service,
-            cryptoCurrencyCode: 'IOTA',
-            network: 'miota',
+
+            // Styling
+            colorMode,
             themeColor: '7C41C9',
-            hideMenu: true,
-            disableWalletAddressForm: true,
+
+            // Service Feature Flags
+            productsAvailed: service,
+            hideMenu: false,
             isFeeCalculationHidden: true,
             disablePaymentMethods: ['apple_pay', 'google_pay'],
             excludeFiatCurrencies: 'USD',
-            colorMode,
+
+            // Quotations Fields
+            fiatCurrency: currency,
+            fiatAmount: amount,
+            network: networkName,
+            cryptoCurrencyCode: cryptoCurrencySymbol,
+            walletAddress: address,
+            paymentMethod: paymentMethod,
+
+            // Flags for skippable forms
+            hideExchangeScreen: true,
+            disableWalletAddressForm: true,
         }
 
-        const urlObject = buildUrl({ base: TRANSAK_WIDGET_URL, query: queryParams })
+        const widgetUrl = environment === 'PRODUCTION' ? TRANSAK_PRODUCTION_WIDGET_URL : TRANSAK_STAGING_WIDGET_URL
+
+        const urlObject = buildUrl({ base: widgetUrl, query: queryParams })
 
         return urlObject?.href ?? ''
     }
diff --git a/packages/desktop/lib/electron/preloads/transak.preload.ts b/packages/desktop/lib/electron/preloads/transak.preload.ts
index 7fc46aa60c..2ff174de2a 100644
--- a/packages/desktop/lib/electron/preloads/transak.preload.ts
+++ b/packages/desktop/lib/electron/preloads/transak.preload.ts
@@ -32,7 +32,9 @@ window.addEventListener('DOMContentLoaded', () => {
 
     const appRoot = window.document.getElementById('appRoot')
     if (appRoot) {
-        appRoot.style.borderRadius = '16px'
+        appRoot.style.borderBottomLeftRadius = '32px'
+        appRoot.style.borderBottomRightRadius = '32px'
         appRoot.style.overflow = 'hidden'
     }
+    window.document.documentElement.style.backgroundColor = 'transparent'
 })
diff --git a/packages/desktop/views/dashboard/buy-sell/BuySell.svelte b/packages/desktop/views/dashboard/buy-sell/BuySell.svelte
index d3185a10b6..c45f460266 100644
--- a/packages/desktop/views/dashboard/buy-sell/BuySell.svelte
+++ b/packages/desktop/views/dashboard/buy-sell/BuySell.svelte
@@ -3,12 +3,22 @@
     import features from '@features/features'
     import { BuySellMainView } from './views'
     import { dashboardRoute, DashboardRoute } from '@core/router'
+    import { onMount } from 'svelte'
+    import { updateTransakCryptoCurrencies, updateTransakFiatCurrencies } from '@auxiliary/transak'
+    import { Text } from '@bloomwalletio/ui'
+    import { localize } from '@core/i18n'
 
     $: if (features.analytics.dashboardRoute.buySell.enabled && $dashboardRoute === DashboardRoute.BuySell) {
         Platform.trackEvent('buy-sell-route', { route: $dashboardRoute })
     }
+
+    onMount(() => {
+        void updateTransakFiatCurrencies()
+        void updateTransakCryptoCurrencies()
+    })
 </script>
 
-<div class="w-full h-full flex flex-col flex-nowrap p-8 relative flex-1">
+<div class="w-full h-full flex flex-col flex-nowrap gap-4 p-8 relative flex-1">
+    <Text type="h6">{localize('views.buySell.title')}</Text>
     <BuySellMainView />
 </div>
diff --git a/packages/desktop/views/dashboard/buy-sell/components/TransakAccountPanel.svelte b/packages/desktop/views/dashboard/buy-sell/components/TransakAccountPanel.svelte
deleted file mode 100644
index e4a16a29cb..0000000000
--- a/packages/desktop/views/dashboard/buy-sell/components/TransakAccountPanel.svelte
+++ /dev/null
@@ -1,49 +0,0 @@
-<script lang="ts">
-    import { Pane } from '@ui'
-    import { AccountSwitcher, FormattedBalance } from '@components'
-    import { Copyable, Icon, IconName, Text } from '@bloomwalletio/ui'
-    import { selectedAccount, selectedAccountIndex } from '@core/account/stores'
-    import { formatCurrency } from '@core/i18n'
-    import { getFiatValueFromTokenAmount } from '@core/market/actions'
-    import { activeProfile } from '@core/profile/stores'
-    import { formatTokenAmount } from '@core/token'
-    import { selectedAccountTokens } from '@core/token/stores'
-
-    let tokenBalance: string = ''
-    let fiatBalance: string = ''
-
-    function updateBalances(): void {
-        const tokens = $selectedAccountTokens?.[$activeProfile.network.id]
-        const networkBaseCoin = tokens?.baseCoin
-        if (!networkBaseCoin) return
-        tokenBalance = formatTokenAmount(networkBaseCoin.balance.total, networkBaseCoin.metadata)
-        fiatBalance = formatCurrency(getFiatValueFromTokenAmount(networkBaseCoin.balance.total, networkBaseCoin))
-    }
-
-    $: if ($selectedAccountIndex !== undefined) {
-        updateBalances()
-    }
-</script>
-
-<Pane classes="flex flex-col justify-center items-center w-full p-6 gap-4 bg-surface dark:bg-surface-dark shadow-lg">
-    <div class="w-full flex justify-between items-center gap-2">
-        <div class="flex items-center gap-2">
-            <icon-container class="bg-black p-1 rounded-full">
-                <Icon name={IconName.Iota} size="sm" customColor="#ffffff" />
-            </icon-container>
-            <Text type="body2">IOTA</Text>
-        </div>
-        <AccountSwitcher compact placement="bottom-end" />
-    </div>
-    <div class="w-full flex flex-col gap-1 justify-center">
-        <FormattedBalance balanceText={tokenBalance} textType="h4" />
-        <Text type="h6" textColor="secondary">{fiatBalance}</Text>
-    </div>
-    <Copyable value={$selectedAccount?.depositAddress}>
-        <div class="bg-surface-2 dark:bg-surface-2-dark rounded-xl py-2 px-3">
-            <Text type="pre-sm" textColor="secondary" class="break-all whitespace-normal">
-                {$selectedAccount?.depositAddress}
-            </Text>
-        </div>
-    </Copyable>
-</Pane>
diff --git a/packages/desktop/views/dashboard/buy-sell/components/TransakAmountInput.svelte b/packages/desktop/views/dashboard/buy-sell/components/TransakAmountInput.svelte
new file mode 100644
index 0000000000..ae83db0be7
--- /dev/null
+++ b/packages/desktop/views/dashboard/buy-sell/components/TransakAmountInput.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+    import { activeProfile } from '@core/profile/stores'
+    import { AmountInput } from '@ui'
+    import { Error, Text } from '@bloomwalletio/ui'
+    import { localize, formatCurrency } from '@core/i18n'
+
+    export let currency = $activeProfile?.settings?.marketCurrency?.toUpperCase()
+    export let value: string
+    export let minValue: number | undefined = undefined
+    export let maxValue: number | undefined = undefined
+
+    const fontSize: 'text-32' | 'text-48' | 'text-64' = 'text-64'
+
+    let inputLength: number
+    let error: string = '​'
+
+    $: value, (inputLength = getInputLength())
+    $: maxWidth = `${(inputLength * Number(/\d+/.exec(fontSize)?.[0] ?? 0) * 2) / 3}px`
+    $: {
+        if (minValue !== undefined && Number(value) < minValue) {
+            error = localize('error.buySell.minAmount', { amount: formatCurrency(String(minValue), currency) })
+        } else if (maxValue !== undefined && Number(value) > maxValue) {
+            error = localize('error.buySell.maxAmount', { amount: formatCurrency(String(maxValue), currency) })
+        } else {
+            error = '​'
+        }
+    }
+
+    function getInputLength(): number {
+        const length = value?.length || 1
+        const isDecimal = value?.includes('.') || value?.includes(',')
+
+        return length - (isDecimal ? 0.5 : 0)
+    }
+</script>
+
+<div class="flex flex-col justify-center items-center gap-1">
+    <div class="flex justify-center items-end gap-1">
+        <AmountInput bind:value maxDecimals={2} {fontSize} {maxWidth} />
+        <Text class="pb-5">{currency}</Text>
+    </div>
+    <Error {error} />
+</div>
diff --git a/packages/desktop/views/dashboard/buy-sell/components/TransakConnectionPanel.svelte b/packages/desktop/views/dashboard/buy-sell/components/TransakConnectionBanner.svelte
similarity index 66%
rename from packages/desktop/views/dashboard/buy-sell/components/TransakConnectionPanel.svelte
rename to packages/desktop/views/dashboard/buy-sell/components/TransakConnectionBanner.svelte
index 1b0b830af1..2b1023efee 100644
--- a/packages/desktop/views/dashboard/buy-sell/components/TransakConnectionPanel.svelte
+++ b/packages/desktop/views/dashboard/buy-sell/components/TransakConnectionBanner.svelte
@@ -1,14 +1,16 @@
 <script lang="ts">
-    import { TRANSAK_WIDGET_URL } from '@auxiliary/transak'
     import { TransakConnectionStatus } from '@auxiliary/transak/enums'
-    import { IconButton, IconName, Pill, Text, TooltipIcon, Tooltip } from '@bloomwalletio/ui'
+    import { getTransakWidgetUrl } from '@auxiliary/transak/utils'
+    import { IconButton, IconName, Text, TooltipIcon, Tooltip } from '@bloomwalletio/ui'
     import { Platform } from '@core/app'
     import { localize } from '@core/i18n'
-    import { Pane } from '@ui'
+    import { activeProfile } from '@core/profile/stores'
     import { tick } from 'svelte'
 
     export let refreshFunction: () => Promise<void>
 
+    const transakWidgetUrl = getTransakWidgetUrl($activeProfile?.network?.id)
+
     let refreshButton: HTMLElement
     let textContainer: HTMLElement
     let showTextTooltip: boolean = false
@@ -22,10 +24,12 @@
 
     function getConnectionStatus(url: string): TransakConnectionStatus {
         const _url = URL.canParse(url) ? new URL(url) : null
-        if (_url?.origin === TRANSAK_WIDGET_URL) {
+        if (_url?.origin === transakWidgetUrl) {
             return TransakConnectionStatus.Connected
         } else if (url) {
             return TransakConnectionStatus.Redirected
+        } else if (!url) {
+            return TransakConnectionStatus.Waiting
         } else {
             return TransakConnectionStatus.Disconnected
         }
@@ -39,20 +43,10 @@
     }
 </script>
 
-<Pane classes="flex flex-col items-center w-full p-6 gap-4 bg-surface dark:bg-surface-dark shadow-lg">
-    <div class="w-full flex justify-between items-center h-8">
-        <img data-label="transak-logo" width="90" height="28" src="assets/logos/transak.svg" alt="Transak" />
-        <div>
-            {#if connectionStatus === TransakConnectionStatus.Connected}
-                <Pill color="success">{localize('general.connected')}</Pill>
-            {:else if connectionStatus === TransakConnectionStatus.Redirected}
-                <Pill color="warning">{localize('general.redirected')}</Pill>
-            {:else}
-                <Pill color="danger">{localize('general.disconnected')}</Pill>
-            {/if}
-        </div>
-    </div>
-    <div class="flex flex-row justify-between w-full items-center">
+<div class="flex flex-row items-center w-full p-6 gap-4 bg-surface-1 dark:bg-surface-1-dark rounded-t-[32px]">
+    <img class="w-10 h-10" src="assets/logos/transak-icon.svg" alt="Transak" />
+    <div class="flex flex-col items-start gap-2">
+        <img class="h-4" src="assets/logos/transak-text.svg" alt="Transak" />
         <div class="flex items-center gap-1 w-full h-3">
             {#if connectionStatus === TransakConnectionStatus.Connected}
                 <TooltipIcon
@@ -68,6 +62,13 @@
                     size="xs"
                     tooltip={localize('views.buySell.tooltip.redirected')}
                 />
+            {:else if connectionStatus === TransakConnectionStatus.Waiting}
+                <TooltipIcon
+                    icon={IconName.Globe}
+                    textColor="secondary"
+                    size="xs"
+                    tooltip={localize('general.waitingConnection')}
+                />
             {:else}
                 <TooltipIcon
                     icon={IconName.DangerCircle}
@@ -77,15 +78,22 @@
                 />
             {/if}
             <div bind:this={textContainer} class="truncate">
-                <Text type="sm" textColor="secondary" truncate>{url ?? TRANSAK_WIDGET_URL}</Text>
+                <Text type="sm" textColor="secondary" truncate>{url ?? transakWidgetUrl}</Text>
             </div>
             {#if showTextTooltip}
-                <Tooltip anchor={textContainer} event="hover" placement="top" text={url ?? TRANSAK_WIDGET_URL} />
+                <Tooltip anchor={textContainer} event="hover" placement="top" text={url ?? transakWidgetUrl} />
             {/if}
         </div>
+    </div>
+    <div class="absolute top-8 right-16 flex flex-row justify-between items-center">
         <Tooltip anchor={refreshButton} text={localize('actions.refresh')} event="hover" placement="top" />
         <div bind:this={refreshButton}>
-            <IconButton icon={IconName.Refresh} size="xs" on:click={refreshFunction} />
+            <IconButton
+                icon={IconName.Refresh}
+                size="sm"
+                on:click={refreshFunction}
+                disabled={connectionStatus === TransakConnectionStatus.Waiting}
+            />
         </div>
     </div>
-</Pane>
+</div>
diff --git a/packages/desktop/views/dashboard/buy-sell/components/TransakCryptoCurrencyAvatar.svelte b/packages/desktop/views/dashboard/buy-sell/components/TransakCryptoCurrencyAvatar.svelte
new file mode 100644
index 0000000000..459470f629
--- /dev/null
+++ b/packages/desktop/views/dashboard/buy-sell/components/TransakCryptoCurrencyAvatar.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+    import { TransakCryptoCurrency } from '@auxiliary/transak'
+    import { Avatar } from '@bloomwalletio/ui'
+    import { CoinGeckoCoinImage } from '@core/market/interfaces'
+    import { NetworkBadge } from '@ui/badges'
+
+    export let cryptoCurrency: TransakCryptoCurrency | undefined
+    export let size: 'xxs' | 'xs' | 'sm' | 'base' | 'md' | 'lg' = 'md'
+    export let hideNetworkBadge: boolean = false
+
+    const IMAGE_SIZES: Record<typeof size, keyof CoinGeckoCoinImage> = {
+        xxs: 'thumb',
+        xs: 'thumb',
+        sm: 'thumb',
+        base: 'small',
+        md: 'small',
+        lg: 'small',
+    }
+
+    let imageLoadError = false
+
+    $: image = cryptoCurrency?.image[IMAGE_SIZES[size]]
+</script>
+
+<div class:animate-pulse={!cryptoCurrency}>
+    <Avatar {size} backgroundColor="brand/10">
+        {#if image && !imageLoadError}
+            <img
+                src={image}
+                alt={cryptoCurrency?.name ?? ''}
+                class="w-full h-full object-cover"
+                on:error={() => (imageLoadError = true)}
+            />
+        {/if}
+    </Avatar>
+    {#if (size === 'base' || size === 'md' || size === 'lg') && !hideNetworkBadge}
+        <span class="relative flex justify-center items-center bottom-0 right-0">
+            <NetworkBadge size="xs" networkId={cryptoCurrency?.network.id ?? ''} />
+        </span>
+    {/if}
+</div>
diff --git a/packages/desktop/views/dashboard/buy-sell/components/TransakCryptoCurrencyTile.svelte b/packages/desktop/views/dashboard/buy-sell/components/TransakCryptoCurrencyTile.svelte
new file mode 100644
index 0000000000..d26daed79e
--- /dev/null
+++ b/packages/desktop/views/dashboard/buy-sell/components/TransakCryptoCurrencyTile.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+    import { TransakCryptoCurrency } from '@auxiliary/transak/stores'
+    import { Icon, IconName, Text, Tile } from '@bloomwalletio/ui'
+    import { NetworkNamePill } from '@ui/pills'
+    import TransakCryptoCurrencyAvatar from './TransakCryptoCurrencyAvatar.svelte'
+
+    export let cryptoCurrency: TransakCryptoCurrency | undefined
+    export let onClick: (() => unknown) | undefined = undefined
+    export let selected = false
+    export let variant: 'selector' | 'item' = 'item'
+</script>
+
+<Tile {onClick} {selected} surface={1} width="full" class={cryptoCurrency ? '' : 'animate-pulse'}>
+    <div class="w-full flex items-center gap-2">
+        <TransakCryptoCurrencyAvatar {cryptoCurrency} hideNetworkBadge />
+        {#if variant === 'item'}
+            <div class="flex w-full justify-between items-center">
+                <div class="flex flex-col">
+                    <Text>{cryptoCurrency?.symbol ?? '​'}</Text>
+                    <Text fontWeight="medium">{cryptoCurrency?.name ?? '​'}</Text>
+                </div>
+                <NetworkNamePill
+                    networkId={cryptoCurrency?.network.id}
+                    networkName={cryptoCurrency?.network.name}
+                    compact
+                />
+            </div>
+        {:else}
+            <div class="flex w-full justify-between items-center">
+                <div class="flex flex-col">
+                    <Text>{cryptoCurrency?.symbol ?? '​'}</Text>
+                    <NetworkNamePill
+                        networkId={cryptoCurrency?.network.id}
+                        networkName={cryptoCurrency?.network.name}
+                        compact
+                    />
+                </div>
+                <Icon name={IconName.ChevronDown} size="sm" />
+            </div>
+        {/if}
+    </div>
+</Tile>
diff --git a/packages/desktop/views/dashboard/buy-sell/components/TransakExchangePanel.svelte b/packages/desktop/views/dashboard/buy-sell/components/TransakExchangePanel.svelte
new file mode 100644
index 0000000000..2bd8b6107b
--- /dev/null
+++ b/packages/desktop/views/dashboard/buy-sell/components/TransakExchangePanel.svelte
@@ -0,0 +1,350 @@
+<script lang="ts">
+    import {
+        getTransakPrice,
+        selectedExchangeCryptoCurrency,
+        transakCryptoCurrencies,
+        TransakCryptoCurrency,
+        TransakFiatCurrencies,
+        transakFiatCurrencies,
+    } from '@auxiliary/transak'
+    import { Button, IconName, IOption, Pill, SelectInput, Tabs, Text } from '@bloomwalletio/ui'
+    import { getAddressFromAccountForNetwork, IAccountState } from '@core/account'
+    import { selectedAccount } from '@core/account/stores'
+    import { localize } from '@core/i18n'
+    import { FiatCurrency } from '@core/market'
+    import { MarketCoinId } from '@core/market/enums'
+    import { marketCoinPrices } from '@core/market/stores'
+    import { isEvmNetwork } from '@core/network'
+    import { Subject, SubjectType } from '@core/wallet'
+    import { openPopup, PopupId } from '@desktop/auxiliary/popup'
+    import { isFeatureEnabled } from '@lib/features/utils'
+    import { Pane, RecipientInput } from '@ui'
+    import { onDestroy } from 'svelte'
+    import { TransakAmountInput, TransakCryptoCurrencyTile } from './'
+    import TransakQuotationTile from './TransakQuotationTile.svelte'
+    import { getBestTimeDuration, MILLISECONDS_PER_SECOND } from '@core/utils'
+    import { EmptyListPlaceholder } from '@components'
+
+    // Buy / Sell Tabs
+    const TABS = [
+        { key: 'BUY', value: localize('views.buySell.tabs.buy') },
+        { key: 'SELL', value: localize('views.buySell.tabs.sell') },
+    ]
+    let selectedTab = TABS[0]
+
+    // Fiat Currency Selector
+    let currencyOptions: IOption[] = Object.keys(FiatCurrency).map((currency) => ({
+        value: currency,
+    }))
+    function updateCurrencyOptions(currencies: TransakFiatCurrencies | undefined): void {
+        if (!currencies) return
+        currencyOptions = Object.keys(FiatCurrency).reduce((acc, currency) => {
+            const hasPaymentOptionAvailable = currencies?.[currency]?.paymentOptions?.length > 0
+            return hasPaymentOptionAvailable ? [...acc, { value: currency }] : acc
+        }, [] as IOption[])
+    }
+    $: updateCurrencyOptions($transakFiatCurrencies)
+
+    let selectedCurrencyOption: IOption = currencyOptions[0]
+    $: selectedCurrency = selectedCurrencyOption?.value
+
+    // Fiat Input
+    function customRound(number) {
+        const magnitude = Math.pow(10, Math.floor(Math.log10(number)))
+        return magnitude <= 10
+            ? Math.round(number / magnitude) * magnitude
+            : Math.round((number / magnitude) * 10) * (magnitude / 10)
+    }
+
+    function getDefaultFiatAmount(currency: FiatCurrency): number {
+        const DEFAULT_FIAT_AMOUNT = 100
+        switch (currency) {
+            case FiatCurrency.USD:
+            case FiatCurrency.EUR:
+            case FiatCurrency.GBP:
+                return DEFAULT_FIAT_AMOUNT
+            default: {
+                const conversionRate =
+                    ($marketCoinPrices?.[MarketCoinId.Iota]?.[currency] ?? 1) /
+                    ($marketCoinPrices?.[MarketCoinId.Iota]?.[FiatCurrency.USD] ?? 1)
+                const fiatAmount = DEFAULT_FIAT_AMOUNT * conversionRate
+                const roundedAmount = customRound(fiatAmount)
+                return roundedAmount
+            }
+        }
+    }
+    let fiatValue = String(
+        getDefaultFiatAmount(FiatCurrency[selectedCurrencyOption?.value as keyof typeof FiatCurrency])
+    )
+
+    // Select Crypto Asset
+    $: selectedCryptoCurrency = $selectedExchangeCryptoCurrency ?? $transakCryptoCurrencies?.[0]
+
+    // Payment Options Selector
+    let paymentOptions: IOption[]
+    let selectedPaymentOption: IOption | undefined
+    let minValue: number | undefined
+    let maxValue: number | undefined
+    function updatePaymentOptions(
+        supportedCurrencies: TransakFiatCurrencies | undefined,
+        selectedCurrency: string
+    ): void {
+        paymentOptions =
+            supportedCurrencies?.[selectedCurrency as keyof typeof FiatCurrency]?.paymentOptions.map((option) => ({
+                value: option.id,
+                label: localize(`views.buySell.paymentOptions.${option.id}`),
+                icon: option.id.includes('card') ? IconName.CreditCard : IconName.Bank,
+            })) ?? []
+        if (!paymentOptions.some((paymentOption) => paymentOption.value === selectedPaymentOption?.value)) {
+            selectedPaymentOption = paymentOptions?.[0]
+        }
+
+        const selectedTransakFiatCurrencyPaymentOption = $transakFiatCurrencies?.[
+            selectedCurrency
+        ]?.paymentOptions?.find((paymentOption) => paymentOption.id === selectedPaymentOption?.value)
+        minValue = selectedTransakFiatCurrencyPaymentOption?.minAmount
+        maxValue = selectedTransakFiatCurrencyPaymentOption?.maxAmount
+    }
+    $: updatePaymentOptions($transakFiatCurrencies, selectedCurrency)
+
+    // Recipient Input
+    let recipientInput
+    let selectedRecipient: Subject | undefined
+    function updateSelectedRecipient(
+        account: IAccountState | undefined,
+        cryptoCurrency: TransakCryptoCurrency | undefined
+    ) {
+        if (account && cryptoCurrency) {
+            const address = getAddressFromAccountForNetwork(account, cryptoCurrency.network.id)
+
+            if (address) {
+                selectedRecipient = {
+                    type: SubjectType.Account,
+                    account,
+                    address,
+                }
+            } else {
+                selectedRecipient = undefined
+            }
+        } else {
+            selectedRecipient = undefined
+        }
+    }
+    $: updateSelectedRecipient($selectedAccount, selectedCryptoCurrency)
+
+    // Quotations
+    let quotes: { fiatAmount: number; cryptoAmount: number; provider: string }[] = []
+    let selectedQuoteId: number | undefined = undefined
+    let latestQuoteRequestId = 0
+    let loading = false
+    async function updateQuote(): Promise<void> {
+        const requestId = ++latestQuoteRequestId // Increment the request ID
+        loading = true
+        selectedQuoteId = undefined
+        stopQuoteTimer()
+        if (
+            (minValue !== undefined && Number(fiatValue) < minValue) ||
+            (maxValue !== undefined && Number(fiatValue) > maxValue)
+        ) {
+            quotes = []
+            loading = false
+            return
+        }
+
+        if (!selectedPaymentOption) {
+            loading = false
+            return
+        }
+
+        const params = {
+            fiatCurrency: selectedCurrency as keyof typeof FiatCurrency,
+            cryptoCurrency: selectedCryptoCurrency?.symbol ?? 'IOTA',
+            isBuyOrSell: selectedTab.key as 'BUY' | 'SELL',
+            networkName: selectedCryptoCurrency?.network.name ?? 'miota',
+            paymentMethod: selectedPaymentOption.value,
+            fiatAmount: Number(fiatValue),
+        }
+
+        quotes = []
+
+        const response = await getTransakPrice(params)
+
+        // Only update the quote if this is the latest request
+        if (requestId !== latestQuoteRequestId) {
+            return
+        }
+
+        if (response) {
+            quotes = [
+                {
+                    fiatAmount: response.fiatAmount,
+                    cryptoAmount: response.cryptoAmount,
+                    provider: 'Transak',
+                },
+            ]
+            selectedQuoteId = 0
+            startQuoteTimer()
+        }
+
+        loading = false
+    }
+    $: selectedCurrency,
+        selectedCryptoCurrency,
+        selectedPaymentOption,
+        fiatValue,
+        minValue,
+        maxValue,
+        void updateQuote()
+
+    // Quotations timer
+    let displayedQuotationTime: string | null = null
+    let interval
+    let timeout
+    function startQuoteTimer(): void {
+        clearInterval(interval)
+        clearTimeout(timeout)
+
+        const maxQuoteTime = 30 * MILLISECONDS_PER_SECOND
+        let quotationTimeInMillis = maxQuoteTime
+        displayedQuotationTime = getBestTimeDuration(quotationTimeInMillis)
+
+        interval = setInterval(() => {
+            quotationTimeInMillis -= MILLISECONDS_PER_SECOND
+            displayedQuotationTime = getBestTimeDuration(quotationTimeInMillis)
+        }, MILLISECONDS_PER_SECOND)
+
+        timeout = setTimeout(() => {
+            clearInterval(interval)
+            displayedQuotationTime = null
+            updateQuote()
+        }, maxQuoteTime)
+    }
+
+    function stopQuoteTimer(): void {
+        clearInterval(interval)
+        clearTimeout(timeout)
+        displayedQuotationTime = null
+    }
+
+    // Handlers
+    function onTokenTileClick(): void {
+        openPopup({ id: PopupId.TransakSelectToken })
+    }
+
+    function onButtonClick(): void {
+        openPopup({
+            id: PopupId.TransakFrame,
+            props: {
+                isBuyOrSell: selectedTab.key as 'BUY' | 'SELL',
+                fiatAmount: Number(fiatValue),
+                fiatCurrency: selectedCurrency,
+                cryptoCurrency: selectedCryptoCurrency,
+                paymentMethod: selectedPaymentOption?.value ?? '',
+                recipientAddress: selectedRecipient?.address ?? '',
+            },
+            confirmClickOutside: true,
+        })
+    }
+    $: isButtonDisabled =
+        !selectedCryptoCurrency || !selectedPaymentOption || !selectedRecipient || selectedQuoteId === undefined
+
+    onDestroy(() => {
+        $selectedExchangeCryptoCurrency = undefined
+        stopQuoteTimer()
+    })
+</script>
+
+<Pane
+    classes="px-6 pb-6 pt-4 bg-surface dark:bg-surface-dark shadow-lg w-full h-full grid grid-cols-2 divide-x divide-solid divide-stroke"
+>
+    {@const hasCryptoCurrencies = $transakCryptoCurrencies && $transakCryptoCurrencies.length > 0}
+    <div class="pr-4">
+        <div class="flex flex-col justify-between items-center w-full h-full gap-8">
+            {#if isFeatureEnabled('buySell.sell')}
+                <div class="w-full">
+                    <Tabs bind:selectedTab tabs={TABS} />
+                </div>
+            {/if}
+            <div class="flex flex-col justify-between items-center gap-4 h-full w-full">
+                <div class="flex gap-2">
+                    <div class="w-28">
+                        <SelectInput options={currencyOptions} bind:selected={selectedCurrencyOption} />
+                    </div>
+                    {#key paymentOptions}
+                        <SelectInput options={paymentOptions} bind:selected={selectedPaymentOption} hideValue />
+                    {/key}
+                </div>
+                <TransakAmountInput currency={selectedCurrency} bind:value={fiatValue} {minValue} {maxValue} />
+                <div class="flex flex-col gap-4 w-full">
+                    <TransakCryptoCurrencyTile
+                        cryptoCurrency={selectedCryptoCurrency}
+                        onClick={hasCryptoCurrencies ? onTokenTileClick : undefined}
+                        variant="selector"
+                    />
+                    <RecipientInput
+                        bind:this={recipientInput}
+                        bind:recipient={selectedRecipient}
+                        networkId={selectedCryptoCurrency?.network.id}
+                        isEvmNetwork={isEvmNetwork(selectedCryptoCurrency?.network.id)}
+                        disabled
+                    />
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="w-full h-full flex flex-col justify-between pl-4">
+        <div class="flex-1 flex flex-col gap-3">
+            <div class="flex flex-col items-center gap-2" class:flex-1={quotes.length === 0 && !loading}>
+                <Text type="h6" align="center">
+                    {localize('views.buySell.quotations.title')}
+                </Text>
+                {#if loading}
+                    <Text type="body2" textColor="secondary" align="center">
+                        {localize('views.buySell.quotations.description')}
+                    </Text>
+                    <Pill color="neutral" compact>
+                        {displayedQuotationTime
+                            ? localize('views.buySell.quotations.pill.newQuotes', { time: displayedQuotationTime })
+                            : localize('views.buySell.quotations.pill.fetchingQuotes')}
+                    </Pill>
+                {:else if quotes.length === 0}
+                    <div class="h-full flex justify-center items-center">
+                        <EmptyListPlaceholder
+                            title={localize('views.buySell.quotations.emptyTitle')}
+                            subtitle={localize('views.buySell.quotations.emptyDescription')}
+                            icon={IconName.ArrowDownUp}
+                        />
+                    </div>
+                {:else}
+                    <Text type="body2" textColor="secondary" align="center">
+                        {localize('views.buySell.quotations.description')}
+                    </Text>
+                {/if}
+            </div>
+            {#if loading}
+                <TransakQuotationTile isLoading />
+                <TransakQuotationTile isLoading />
+                <TransakQuotationTile isLoading />
+            {:else if quotes.length > 0}
+                {#each quotes as quote, i}
+                    <TransakQuotationTile
+                        cryptoCurrency={selectedCryptoCurrency}
+                        fiatAmount={quote?.fiatAmount}
+                        fiatSymbol={selectedCurrency}
+                        cryptoAmount={quote?.cryptoAmount}
+                        onClick={() => (selectedQuoteId = i)}
+                        selected={selectedQuoteId === i}
+                    />
+                {/each}
+            {/if}
+        </div>
+        <Button
+            text={selectedQuoteId !== undefined
+                ? localize('views.buySell.quotations.button.selected', { provider: quotes[selectedQuoteId]?.provider })
+                : localize('views.buySell.quotations.button.unselected')}
+            on:click={onButtonClick}
+            width="full"
+            disabled={isButtonDisabled}
+        />
+    </div>
+</Pane>
diff --git a/packages/desktop/views/dashboard/buy-sell/components/TransakInfoPanel.svelte b/packages/desktop/views/dashboard/buy-sell/components/TransakInfoPanel.svelte
deleted file mode 100644
index 53baa91be1..0000000000
--- a/packages/desktop/views/dashboard/buy-sell/components/TransakInfoPanel.svelte
+++ /dev/null
@@ -1,12 +0,0 @@
-<script lang="ts">
-    import { Pill, Text } from '@bloomwalletio/ui'
-    import { localize } from '@core/i18n'
-    import { Pane } from '@ui'
-</script>
-
-<Pane classes="flex flex-col justify-start items-start w-full p-6 gap-4 bg-surface dark:bg-surface-dark shadow-lg">
-    <Pill color="brand">{localize('general.info')}</Pill>
-    <Text color="secondary">{localize('views.buySell.info.receive')}</Text>
-    <Text color="secondary">{localize('views.buySell.info.multipleAccounts')}</Text>
-    <Text color="secondary">{localize('views.buySell.info.changingAccounts')}</Text>
-</Pane>
diff --git a/packages/desktop/views/dashboard/buy-sell/components/TransakQuotationTile.svelte b/packages/desktop/views/dashboard/buy-sell/components/TransakQuotationTile.svelte
new file mode 100644
index 0000000000..57ada5c1c7
--- /dev/null
+++ b/packages/desktop/views/dashboard/buy-sell/components/TransakQuotationTile.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+    import { Tile, Text } from '@bloomwalletio/ui'
+    import { TransakCryptoCurrency } from '@auxiliary/transak/stores'
+    import { FiatCurrency } from '@core/market'
+    import { formatCurrency } from '@core/i18n'
+
+    export let isLoading: boolean = false
+    export let cryptoCurrency: TransakCryptoCurrency | undefined = undefined
+    export let fiatAmount: number | undefined = undefined
+    export let fiatSymbol: keyof typeof FiatCurrency | string | undefined = undefined
+    export let cryptoAmount: number | undefined = undefined
+    export let onClick: () => void = () => {}
+    export let selected: boolean = false
+</script>
+
+<Tile surface={1} width="full" class={isLoading ? 'animate-pulse' : ''} {onClick} {selected}>
+    <div class="w-full flex justify-between items-center gap-2">
+        {#if isLoading}
+            <div class="w-7 h-7 rounded-full bg-surface-2 dark:bg-surface-2-dark animate-pulse"></div>
+            <div class="flex flex-col items-end gap-1">
+                <div class="w-16 h-4 bg-surface-2 dark:bg-surface-2-dark animate-pulse"></div>
+                <div class="w-12 h-4 bg-surface-2 dark:bg-surface-2-dark animate-pulse"></div>
+            </div>
+        {:else}
+            <img
+                data-label="transak-logo"
+                width="90"
+                height="28"
+                src="assets/logos/transak.svg"
+                alt="Transak"
+                class:opacity-0={isLoading}
+            />
+            <div class="flex flex-col">
+                <Text align="right">
+                    {fiatAmount && fiatSymbol ? formatCurrency(String(fiatAmount), fiatSymbol) : '​'}
+                </Text>
+                <Text align="right" fontWeight="medium" textColor="secondary">
+                    {cryptoAmount ? `≈ ${formatCurrency(String(cryptoAmount), cryptoCurrency?.symbol)}` : '​'}
+                </Text>
+            </div>
+        {/if}
+    </div>
+</Tile>
diff --git a/packages/desktop/views/dashboard/buy-sell/components/TransakWindowPlaceholder.svelte b/packages/desktop/views/dashboard/buy-sell/components/TransakWindowPlaceholder.svelte
deleted file mode 100644
index 1abbf927dd..0000000000
--- a/packages/desktop/views/dashboard/buy-sell/components/TransakWindowPlaceholder.svelte
+++ /dev/null
@@ -1,30 +0,0 @@
-<script lang="ts">
-    import { Platform, openUrlInBrowser } from '@core/app'
-    import { Pane } from '@ui'
-    import { Button, Icon, IconName, Spinner, Text } from '@bloomwalletio/ui'
-    import { localize } from '@core/i18n'
-    import { DISCORD_URL } from '@contexts/settings/constants'
-
-    export let loading: boolean = true
-    let error: boolean = false
-
-    Platform.onEvent('transak-loaded', () => (loading = false))
-    Platform.onEvent('transak-not-loaded', () => (error = true))
-
-    function onButtonClick(): void {
-        openUrlInBrowser(DISCORD_URL)
-    }
-</script>
-
-<Pane
-    classes="flex flex-col justify-center items-center w-full h-full px-6 pb-6 pt-4 gap-4 bg-surface dark:bg-surface-dark shadow-lg"
->
-    {#if error}
-        <Icon name={IconName.ArrowDownUp} size="lg" textColor="brand" />
-        <Text type="body1">{localize('views.buySell.error.title')}</Text>
-        <Text textColor="secondary" align="center">{localize('views.buySell.error.description')}</Text>
-        <Button on:click={onButtonClick} text={localize('actions.visitDiscord')} />
-    {:else if loading}
-        <Spinner size="lg" textColor="info" />
-    {/if}
-</Pane>
diff --git a/packages/desktop/views/dashboard/buy-sell/components/index.ts b/packages/desktop/views/dashboard/buy-sell/components/index.ts
index de70d28d33..3c37cf10bf 100644
--- a/packages/desktop/views/dashboard/buy-sell/components/index.ts
+++ b/packages/desktop/views/dashboard/buy-sell/components/index.ts
@@ -1,4 +1,5 @@
-export { default as TransakAccountPanel } from './TransakAccountPanel.svelte'
-export { default as TransakConnectionPanel } from './TransakConnectionPanel.svelte'
-export { default as TransakInfoPanel } from './TransakInfoPanel.svelte'
-export { default as TransakWindowPlaceholder } from './TransakWindowPlaceholder.svelte'
+export { default as TransakQuotationTile } from './TransakQuotationTile.svelte'
+export { default as TransakCryptoCurrencyTile } from './TransakCryptoCurrencyTile.svelte'
+export { default as TransakAmountInput } from './TransakAmountInput.svelte'
+export { default as TransakConnectionBanner } from './TransakConnectionBanner.svelte'
+export { default as TransakExchangePanel } from './TransakExchangePanel.svelte'
diff --git a/packages/desktop/views/dashboard/buy-sell/views/BuySellMainView.svelte b/packages/desktop/views/dashboard/buy-sell/views/BuySellMainView.svelte
index b86b78b1ba..9f5b3bf7e3 100644
--- a/packages/desktop/views/dashboard/buy-sell/views/BuySellMainView.svelte
+++ b/packages/desktop/views/dashboard/buy-sell/views/BuySellMainView.svelte
@@ -1,146 +1,11 @@
 <script lang="ts">
-    import { ISettingsState, settingsState } from '@contexts/settings/stores'
-    import { selectedAccount, selectedAccountIndex } from '@core/account/stores'
-    import { Platform } from '@core/app'
-    import { activeProfile } from '@core/profile/stores'
-    import { IPopupState, IProfileAuthPopupState, popupState, profileAuthPopup } from '@desktop/auxiliary/popup'
-    import { onDestroy, onMount, tick } from 'svelte'
-    import {
-        TransakAccountPanel,
-        TransakConnectionPanel,
-        TransakInfoPanel,
-        TransakWindowPlaceholder,
-    } from '../components'
-    import { isDashboardSideBarExpanded } from '@core/ui'
-    import { FiatCurrency, MarketCoinId } from '@core/market/enums'
-    import { MarketCurrency } from '@core/market/types'
-    import { marketCoinPrices } from '@core/market/stores'
-    import { DrawerState } from '@desktop/auxiliary/drawer/types'
-    import { drawerState } from '@desktop/auxiliary/drawer/stores'
+    import { TransakExchangePanel } from '../components'
 
-    let isTransakOpen: boolean = false
-    let isTransakLoading: boolean = true
-
-    $: $isDashboardSideBarExpanded, void updateTransakBounds()
-
-    $: if ($selectedAccountIndex !== undefined) {
-        void resetTransak()
-    }
-
-    $: isTransakOpen, void handleOverlayChanges($popupState, $profileAuthPopup, $settingsState, $drawerState)
-
-    async function handleOverlayChanges(
-        state: IPopupState,
-        profilePopupState: IProfileAuthPopupState,
-        settingsState: ISettingsState,
-        drawerState: DrawerState
-    ): Promise<void> {
-        if (state.active || profilePopupState.active || settingsState.open || drawerState?.id) {
-            await Platform.hideTransak()
-        } else {
-            await tick()
-            await Platform.showTransak()
-        }
-    }
-
-    let transakContainer: HTMLDivElement | undefined
-    async function updateTransakBounds(): Promise<void> {
-        if (!transakContainer) {
-            return
-        }
-
-        const rect = transakContainer.getBoundingClientRect()
-        const transakPaneStyles = getComputedStyle(transakContainer?.children[0])
-        const extractDigitsToNumbers = (str: string) => Number(str?.replace(/\D/g, '') ?? 0)
-        const borderTop = extractDigitsToNumbers(transakPaneStyles?.borderTopWidth)
-        const borderBottom = extractDigitsToNumbers(transakPaneStyles?.borderBottomWidth)
-        const borderLeft = extractDigitsToNumbers(transakPaneStyles?.borderLeftWidth)
-        const borderRight = extractDigitsToNumbers(transakPaneStyles?.borderRightWidth)
-
-        await Platform.updateTransakBounds({
-            x: rect.x + borderLeft,
-            y: rect.y + borderTop,
-            width: rect.width - borderLeft - borderRight,
-            height: rect.height - borderTop - borderBottom,
-        })
-    }
-
-    function getDefaultFiatAmount(currency: MarketCurrency): number {
-        const DEFAULT_FIAT_AMOUNT = 1000
-        switch (currency) {
-            case FiatCurrency.USD:
-            case FiatCurrency.EUR:
-            case FiatCurrency.GBP:
-                return DEFAULT_FIAT_AMOUNT
-            default: {
-                const conversionRate =
-                    $marketCoinPrices[MarketCoinId.Iota]?.[currency] /
-                    $marketCoinPrices[MarketCoinId.Iota]?.[FiatCurrency.USD]
-                const fiatAmount = DEFAULT_FIAT_AMOUNT * conversionRate
-                const roundedAmount = customRound(fiatAmount)
-                return roundedAmount
-            }
-        }
-    }
-
-    function customRound(number) {
-        const magnitude = Math.pow(10, Math.floor(Math.log10(number)))
-        return magnitude <= 10
-            ? Math.round(number / magnitude) * magnitude
-            : Math.round((number / magnitude) * 10) * (magnitude / 10)
-    }
-
-    async function resetTransak(): Promise<void> {
-        isTransakLoading = true
-        await Platform.closeTransak()
-        isTransakOpen = false
-        await Platform.openTransak({
-            currency: $activeProfile?.settings.marketCurrency,
-            address: $selectedAccount.depositAddress,
-            service: 'BUY',
-            amount: getDefaultFiatAmount($activeProfile?.settings.marketCurrency ?? FiatCurrency.USD),
-        })
-        isTransakOpen = true
-        await updateTransakBounds()
-    }
-
-    onMount(() => {
-        Platform.onEvent('reset-transak', resetTransak)
-    })
-
-    onDestroy(() => {
-        void Platform.closeTransak()
-        isTransakOpen = false
-        Platform.removeListenersForEvent('reset-transak')
-    })
+    let transakExchangePanel: TransakExchangePanel
 </script>
 
-<svelte:window on:resize={updateTransakBounds} />
-
 <div class="flex justify-center gap-4 h-full w-full">
-    <div class="account-panel flex flex-col gap-4">
-        <TransakConnectionPanel refreshFunction={resetTransak} />
-        <TransakAccountPanel />
-    </div>
-    <div class="transak-panel" bind:this={transakContainer}>
-        <TransakWindowPlaceholder bind:loading={isTransakLoading} />
-    </div>
-    <div class="info-panel">
-        <TransakInfoPanel />
+    <div class="w-[40rem] shrink-0 h-[28rem]">
+        <TransakExchangePanel bind:this={transakExchangePanel} />
     </div>
 </div>
-
-<style lang="postcss">
-    .transak-panel {
-        @apply flex-1 min-w-[360px] max-w-[480px] max-h-[786px];
-    }
-
-    .account-panel,
-    .info-panel {
-        @apply max-w-[312px];
-    }
-
-    .account-panel {
-        @apply shrink-0 w-[312px];
-    }
-</style>
diff --git a/packages/desktop/views/dashboard/components/DashboardSidebar.svelte b/packages/desktop/views/dashboard/components/DashboardSidebar.svelte
index 146e879e3b..3d8baea64f 100644
--- a/packages/desktop/views/dashboard/components/DashboardSidebar.svelte
+++ b/packages/desktop/views/dashboard/components/DashboardSidebar.svelte
@@ -4,7 +4,6 @@
     import { ProfileActionsMenu, SidebarTab } from '@components'
     import { APP_STAGE, AppStage } from '@core/app'
     import { localize } from '@core/i18n'
-    import { SupportedStardustNetworkId } from '@core/network'
     import { activeProfile, isSoftwareProfile } from '@core/profile/stores'
     import {
         DashboardRoute,
@@ -16,12 +15,12 @@
     } from '@core/router'
     import { isDashboardSideBarExpanded } from '@core/ui'
     import { IDashboardSidebarTab } from '@desktop/routers'
+    import { isFeatureEnabled, isFeatureNotGeoFenced } from '@lib/features/utils'
     import { Logo } from '@ui'
     import { campaignsRouter } from '../campaigns'
     import LedgerStatusTile from './LedgerStatusTile.svelte'
     import StrongholdStatusTile from './StrongholdStatusTile.svelte'
     import { BackupToast, VersionToast } from './toasts'
-    import { isFeatureEnabled, isFeatureNotGeoFenced } from '@lib/features/utils'
 
     let expanded = true
     function toggleExpand(): void {
@@ -77,11 +76,6 @@
                       label: localize('tabs.buySell'),
                       route: DashboardRoute.BuySell,
                       onClick: openBuySell,
-                      disabled: $activeProfile?.network?.id !== SupportedStardustNetworkId.Iota,
-                      tooltip:
-                          $activeProfile?.network?.id !== SupportedStardustNetworkId.Iota
-                              ? localize('tabs.tooltips.buySell')
-                              : '',
                   },
               ]
             : []),
diff --git a/packages/desktop/webpack.config.ts b/packages/desktop/webpack.config.ts
index f62f3e8c64..43968f97f0 100644
--- a/packages/desktop/webpack.config.ts
+++ b/packages/desktop/webpack.config.ts
@@ -193,6 +193,7 @@ const rendererPlugins = [
         PRELOAD_SCRIPT: JSON.stringify(false),
         'process.env.APP_PROTOCOL': JSON.stringify(appProtocol),
         'process.env.WALLETCONNECT_PROJECT_ID': JSON.stringify(process.env.WALLETCONNECT_PROJECT_ID),
+        'process.env.TRANSAK_API_KEY': JSON.stringify(process.env.TRANSAK_API_KEY),
     }),
     // The ethereumjs libraries require the NormalModuleReplacementPlugin & the ProvidePlugin
     new NormalModuleReplacementPlugin(/node:/, (resource) => {
diff --git a/packages/shared/assets/logos/transak-full.svg b/packages/shared/assets/logos/transak-full.svg
new file mode 100644
index 0000000000..d2937b2653
--- /dev/null
+++ b/packages/shared/assets/logos/transak-full.svg
@@ -0,0 +1,42 @@
+<svg width="201" height="64" viewBox="0 0 201 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_3242_495)">
+        <path
+            d="M32 64C49.6731 64 64 49.6731 64 32C64 14.3269 49.6731 0 32 0C14.3269 0 0 14.3269 0 32C0 49.6731 14.3269 64 32 64Z"
+            fill="url(#paint0_linear_3242_495)" />
+        <path
+            d="M52.2062 30.0437L43.1677 21.0052L43.1513 20.9888L43.1155 20.9575C43.057 20.9046 42.9958 20.8549 42.9321 20.8084C42.8874 20.7726 42.8427 20.7383 42.7949 20.707C42.7741 20.6921 42.7532 20.6802 42.7308 20.6668C42.2155 20.3293 41.5922 20.1979 40.9845 20.2987C40.3768 20.3995 39.8293 20.7252 39.4506 21.211L25.3934 35.2697V22.7452C25.3934 22.0868 25.1318 21.4554 24.6663 20.9898C24.2007 20.5242 23.5693 20.2627 22.9109 20.2627C22.2525 20.2627 21.621 20.5242 21.1555 20.9898C20.6899 21.4554 20.4283 22.0868 20.4283 22.7452V35.2697L15.2963 30.1376C14.8272 29.6903 14.2017 29.4442 13.5536 29.4519C12.9055 29.4596 12.286 29.7205 11.8277 30.1789C11.3694 30.6372 11.1085 31.2566 11.1008 31.9048C11.0931 32.5529 11.3392 33.1784 11.7865 33.6475L21.156 43.017C21.2148 43.0766 21.2771 43.1329 21.3423 43.1854C21.405 43.2361 21.4706 43.2853 21.5362 43.3345C21.8747 43.5539 22.2616 43.6875 22.6634 43.7237H22.6738C22.7543 43.7312 22.8348 43.7356 22.9153 43.7356H22.9526C23.0202 43.7356 23.0873 43.7326 23.1539 43.7267H23.2031C23.2672 43.7192 23.3313 43.7118 23.394 43.6983H23.4223C23.4924 43.6834 23.5624 43.667 23.631 43.6462H23.643C23.7178 43.6236 23.7915 43.5972 23.8636 43.5671C23.9665 43.5246 24.0661 43.4748 24.1618 43.418L24.2185 43.3852C24.3123 43.3279 24.4019 43.2641 24.4869 43.1944L24.5122 43.172C24.5644 43.1273 24.6166 43.0826 24.6613 43.0319L38.9153 28.7689V41.2546C38.9153 41.913 39.1769 42.5444 39.6425 43.01C40.108 43.4756 40.7395 43.7371 41.3979 43.7371C42.0563 43.7371 42.6877 43.4756 43.1533 43.01C43.6188 42.5444 43.8804 41.913 43.8804 41.2546V28.7301L48.6963 33.555C49.1638 34.0114 49.7924 34.265 50.4457 34.261C51.099 34.257 51.7244 33.9957 52.1862 33.5336C52.6481 33.0715 52.9092 32.446 52.9129 31.7927C52.9167 31.1395 52.6627 30.511 52.2062 30.0437Z"
+            fill="white" />
+        <path d="M75.1797 24.5303H82.5453V43.7703H86.9572V24.5303H94.3227V20.4092H75.1797V24.5303Z"
+            fill="#1461DB" />
+        <path
+            d="M103.99 26.2091C103.468 26.2453 102.951 26.3378 102.448 26.4849C101.964 26.6257 101.501 26.8298 101.071 27.0917C100.529 27.4079 100.055 27.8273 99.675 28.3263C99.4958 28.5632 99.3334 28.8123 99.1889 29.0718V26.2493H95.2959V43.7702H99.748V34.8152C99.7362 34.2007 99.8264 33.5885 100.015 33.0036C100.186 32.4859 100.463 32.0098 100.829 31.6061C101.196 31.2023 101.642 30.8799 102.141 30.6597C102.689 30.4032 103.28 30.2515 103.884 30.2124C104.454 30.156 105.03 30.2065 105.581 30.3615V26.2493C105.053 26.1838 104.52 26.1703 103.99 26.2091Z"
+            fill="#1461DB" />
+        <path
+            d="M122.322 28.942C121.748 27.8129 120.778 26.9352 119.597 26.4774C118.397 26.0003 117.023 25.7617 115.476 25.7617C113.367 25.7617 111.702 26.2165 110.479 27.126C109.281 27.999 108.404 29.2417 107.982 30.6627L111.972 31.927C112.254 31.1259 112.746 30.5692 113.448 30.2571C114.083 29.9584 114.774 29.7978 115.476 29.7859C116.645 29.7859 117.478 30.0295 117.975 30.5165C118.364 30.8967 118.596 31.4529 118.68 32.1716C117.934 32.2834 117.226 32.3893 116.563 32.4862C115.429 32.6542 114.412 32.8301 113.514 33.014C112.726 33.1683 111.951 33.3796 111.194 33.6462C110.368 33.9281 109.604 34.3682 108.947 34.9419C108.407 35.4292 107.993 36.0386 107.737 36.7191C107.482 37.4317 107.356 38.1839 107.365 38.9407C107.354 39.8737 107.587 40.7934 108.039 41.6096C108.499 42.4316 109.186 43.1043 110.017 43.5479C110.888 44.03 111.951 44.2706 113.205 44.2696C114.72 44.2696 115.972 44.0072 116.961 43.4823C117.81 43.0089 118.562 42.3778 119.175 41.6231V43.7835H123.037V33.0617C123.04 32.3364 123.007 31.6113 122.938 30.8893C122.863 30.206 122.654 29.5442 122.322 28.942ZM118.201 38.4487C118.019 38.7855 117.793 39.0963 117.529 39.3731C117.149 39.7785 116.698 40.111 116.199 40.3542C115.559 40.6593 114.855 40.8065 114.146 40.7836C113.697 40.7947 113.251 40.7177 112.832 40.557C112.49 40.4264 112.194 40.1983 111.981 39.9009C111.776 39.5973 111.672 39.2368 111.683 38.8707C111.679 38.5943 111.743 38.3214 111.87 38.076C112.013 37.8161 112.213 37.5914 112.453 37.4184C112.776 37.1876 113.127 36.9996 113.497 36.8593C113.927 36.7033 114.365 36.5733 114.811 36.4701C115.308 36.3509 115.962 36.2182 116.774 36.072C117.292 35.9796 117.924 35.8693 118.646 35.747C118.637 36.0586 118.623 36.3941 118.599 36.7907C118.576 37.364 118.44 37.9271 118.201 38.4487Z"
+            fill="#1461DB" />
+        <path
+            d="M143.232 30.4267C143.017 29.6288 142.669 28.8728 142.203 28.1902C141.684 27.4448 140.991 26.8377 140.183 26.4219C139.318 25.9577 138.199 25.7256 136.825 25.7256C135.106 25.7256 133.681 26.0983 132.551 26.8438C132.032 27.1864 131.561 27.5949 131.147 28.059V26.2489H127.222V43.7698H131.695V34.8804C131.695 33.787 131.816 32.9108 132.058 32.2517C132.301 31.5927 132.614 31.0927 132.998 30.7518C133.343 30.4292 133.76 30.1927 134.215 30.0614C134.61 29.9475 135.019 29.8873 135.431 29.8825C136.371 29.8825 137.099 30.0937 137.613 30.5162C138.121 30.9286 138.505 31.4728 138.725 32.0892C138.946 32.692 139.083 33.3229 139.13 33.9634C139.174 34.5847 139.195 35.0956 139.194 35.4962V43.7698H143.667V33.9381C143.667 33.6399 143.647 33.1821 143.603 32.5425C143.547 31.827 143.423 31.1185 143.232 30.4267Z"
+            fill="#1461DB" />
+        <path
+            d="M159.756 34.4942C158.948 34.037 157.88 33.6344 156.551 33.2865C155.189 32.9406 154.175 32.6593 153.51 32.4426C152.845 32.2259 152.407 32.0152 152.196 31.8104C152.093 31.7124 152.011 31.5938 151.957 31.4623C151.902 31.3309 151.875 31.1894 151.879 31.047C151.879 30.5386 152.125 30.1524 152.617 29.8796C153.109 29.6067 153.762 29.5023 154.571 29.556C155.404 29.6206 156.064 29.8423 156.551 30.221C156.791 30.4059 156.989 30.6383 157.135 30.9036C157.28 31.1689 157.369 31.4614 157.395 31.7627L161.906 30.9501C161.773 29.9345 161.353 28.9777 160.696 28.1917C160.003 27.3862 159.119 26.7675 158.124 26.3921C156.959 25.9511 155.72 25.736 154.474 25.7584C153.058 25.7584 151.828 25.9831 150.784 26.4324C149.808 26.8267 148.965 27.492 148.355 28.3498C147.772 29.2131 147.472 30.2365 147.497 31.2781C147.473 32.0804 147.669 32.8739 148.063 33.5728C148.442 34.207 149.059 34.7507 149.913 35.204C150.768 35.6572 151.911 36.0682 153.343 36.437C154.607 36.773 155.54 37.0434 156.14 37.2481C156.736 37.4539 157.127 37.6611 157.3 37.8729C157.482 38.1118 157.574 38.4076 157.559 38.7078C157.569 38.9601 157.515 39.2108 157.402 39.4364C157.288 39.662 157.119 39.8551 156.911 39.9975C156.475 40.3047 155.86 40.4583 155.065 40.4583C154.091 40.4583 153.288 40.2257 152.655 39.7605C152.019 39.2907 151.582 38.5989 151.431 37.8222L146.915 38.52C147.207 40.3479 148.032 41.7624 149.389 42.7634C150.745 43.7643 152.527 44.2643 154.734 44.2633C157.027 44.2633 158.822 43.7494 160.119 42.7216C161.417 41.6938 162.068 40.2803 162.073 38.4812C162.096 37.6699 161.906 36.8667 161.521 36.1522C161.15 35.5101 160.562 34.9574 159.756 34.4942Z"
+            fill="#1461DB" />
+        <path
+            d="M179.62 28.942C179.046 27.8131 178.076 26.9356 176.895 26.4774C175.694 26.0003 174.32 25.7617 172.774 25.7617C170.665 25.7617 169 26.2165 167.777 27.126C166.579 27.9993 165.701 29.2418 165.278 30.6627L169.27 31.927C169.552 31.1259 170.044 30.5692 170.746 30.2571C171.381 29.9584 172.072 29.7978 172.774 29.7859C173.943 29.7859 174.776 30.0295 175.273 30.5165C175.662 30.8968 175.893 31.4529 175.978 32.1716C175.232 32.2834 174.524 32.3893 173.861 32.4862C172.726 32.6542 171.71 32.8301 170.812 33.014C170.024 33.1683 169.249 33.3796 168.492 33.6462C167.551 33.9941 166.802 34.424 166.245 34.9359C165.705 35.4232 165.291 36.0327 165.035 36.7132C164.779 37.4255 164.653 38.1779 164.663 38.9348C164.652 39.8678 164.884 40.7874 165.337 41.6037C165.797 42.4259 166.484 43.0987 167.315 43.542C168.186 44.0241 169.248 44.2646 170.503 44.2636C172.018 44.2636 173.27 44.0012 174.259 43.4764C175.108 43.0029 175.86 42.3719 176.473 41.6171V43.7776H180.335V33.0617C180.338 32.3364 180.305 31.6113 180.236 30.8893C180.161 30.206 179.952 29.5442 179.62 28.942ZM175.499 38.4487C175.317 38.7855 175.091 39.0963 174.827 39.3731C174.447 39.7785 173.996 40.111 173.497 40.3542C172.857 40.6593 172.153 40.8065 171.444 40.7836C170.995 40.7947 170.549 40.7177 170.13 40.557C169.788 40.4264 169.492 40.1983 169.279 39.9009C169.074 39.5973 168.969 39.2369 168.981 38.8707C168.977 38.5943 169.041 38.3214 169.168 38.076C169.311 37.8157 169.51 37.591 169.751 37.4184C170.074 37.1876 170.424 36.9996 170.795 36.8593C171.225 36.7031 171.663 36.5731 172.109 36.4701C172.606 36.3509 173.26 36.2182 174.072 36.072C174.59 35.9796 175.222 35.8693 175.944 35.747C175.935 36.0586 175.92 36.3941 175.897 36.7907C175.872 37.3638 175.737 37.9267 175.499 38.4487Z"
+            fill="#1461DB" />
+        <path
+            d="M194.091 35.0091L200.417 26.2495H194.966L189.029 34.6856V20.4092H184.551L184.519 43.7703H189.029V35.3342L195.096 43.7703H200.839L194.091 35.0091Z"
+            fill="#1461DB" />
+    </g>
+    <defs>
+        <linearGradient id="paint0_linear_3242_495" x1="4.28217" y1="15.997" x2="59.7178"
+            y2="48.0015" gradientUnits="userSpaceOnUse">
+            <stop offset="0.13" stop-color="#348BED" />
+            <stop offset="0.31" stop-color="#2B80E8" />
+            <stop offset="0.64" stop-color="#1461DB" />
+            <stop offset="0.72" stop-color="#0E57D7" />
+        </linearGradient>
+        <clipPath id="clip0_3242_495">
+            <rect width="200.839" height="64" fill="white" />
+        </clipPath>
+    </defs>
+</svg>
diff --git a/packages/shared/assets/logos/transak-icon.svg b/packages/shared/assets/logos/transak-icon.svg
new file mode 100644
index 0000000000..bdbf474f14
--- /dev/null
+++ b/packages/shared/assets/logos/transak-icon.svg
@@ -0,0 +1,22 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_3242_495)">
+        <path
+            d="M32 64C49.6731 64 64 49.6731 64 32C64 14.3269 49.6731 0 32 0C14.3269 0 0 14.3269 0 32C0 49.6731 14.3269 64 32 64Z"
+            fill="url(#paint0_linear_3242_495)" />
+        <path
+            d="M52.2062 30.0437L43.1677 21.0052L43.1513 20.9888L43.1155 20.9575C43.057 20.9046 42.9958 20.8549 42.9321 20.8084C42.8874 20.7726 42.8427 20.7383 42.7949 20.707C42.7741 20.6921 42.7532 20.6802 42.7308 20.6668C42.2155 20.3293 41.5922 20.1979 40.9845 20.2987C40.3768 20.3995 39.8293 20.7252 39.4506 21.211L25.3934 35.2697V22.7452C25.3934 22.0868 25.1318 21.4554 24.6663 20.9898C24.2007 20.5242 23.5693 20.2627 22.9109 20.2627C22.2525 20.2627 21.621 20.5242 21.1555 20.9898C20.6899 21.4554 20.4283 22.0868 20.4283 22.7452V35.2697L15.2963 30.1376C14.8272 29.6903 14.2017 29.4442 13.5536 29.4519C12.9055 29.4596 12.286 29.7205 11.8277 30.1789C11.3694 30.6372 11.1085 31.2566 11.1008 31.9048C11.0931 32.5529 11.3392 33.1784 11.7865 33.6475L21.156 43.017C21.2148 43.0766 21.2771 43.1329 21.3423 43.1854C21.405 43.2361 21.4706 43.2853 21.5362 43.3345C21.8747 43.5539 22.2616 43.6875 22.6634 43.7237H22.6738C22.7543 43.7312 22.8348 43.7356 22.9153 43.7356H22.9526C23.0202 43.7356 23.0873 43.7326 23.1539 43.7267H23.2031C23.2672 43.7192 23.3313 43.7118 23.394 43.6983H23.4223C23.4924 43.6834 23.5624 43.667 23.631 43.6462H23.643C23.7178 43.6236 23.7915 43.5972 23.8636 43.5671C23.9665 43.5246 24.0661 43.4748 24.1618 43.418L24.2185 43.3852C24.3123 43.3279 24.4019 43.2641 24.4869 43.1944L24.5122 43.172C24.5644 43.1273 24.6166 43.0826 24.6613 43.0319L38.9153 28.7689V41.2546C38.9153 41.913 39.1769 42.5444 39.6425 43.01C40.108 43.4756 40.7395 43.7371 41.3979 43.7371C42.0563 43.7371 42.6877 43.4756 43.1533 43.01C43.6188 42.5444 43.8804 41.913 43.8804 41.2546V28.7301L48.6963 33.555C49.1638 34.0114 49.7924 34.265 50.4457 34.261C51.099 34.257 51.7244 33.9957 52.1862 33.5336C52.6481 33.0715 52.9092 32.446 52.9129 31.7927C52.9167 31.1395 52.6627 30.511 52.2062 30.0437Z"
+            fill="white" />
+    </g>
+    <defs>
+        <linearGradient id="paint0_linear_3242_495" x1="4.28217" y1="15.997" x2="59.7178"
+            y2="48.0015" gradientUnits="userSpaceOnUse">
+            <stop offset="0.13" stop-color="#348BED" />
+            <stop offset="0.31" stop-color="#2B80E8" />
+            <stop offset="0.64" stop-color="#1461DB" />
+            <stop offset="0.72" stop-color="#0E57D7" />
+        </linearGradient>
+        <clipPath id="clip0_3242_495">
+            <rect width="200.839" height="64" fill="white" />
+        </clipPath>
+    </defs>
+</svg>
diff --git a/packages/shared/assets/logos/transak-text.svg b/packages/shared/assets/logos/transak-text.svg
new file mode 100644
index 0000000000..430e0f6b0f
--- /dev/null
+++ b/packages/shared/assets/logos/transak-text.svg
@@ -0,0 +1,16 @@
+<svg viewBox="74.756 19.833 126.244 24.43" width="126.244px" height="24.43px" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <clipPath id="clip0_3242_495">
+      <rect width="200.839" height="64" fill="white"/>
+    </clipPath>
+  </defs>
+  <g clip-path="url(#clip0_3242_495)">
+    <path d="M75.1797 24.5303H82.5453V43.7703H86.9572V24.5303H94.3227V20.4092H75.1797V24.5303Z" fill="#1461DB"/>
+    <path d="M103.99 26.2091C103.468 26.2453 102.951 26.3378 102.448 26.4849C101.964 26.6257 101.501 26.8298 101.071 27.0917C100.529 27.4079 100.055 27.8273 99.675 28.3263C99.4958 28.5632 99.3334 28.8123 99.1889 29.0718V26.2493H95.2959V43.7702H99.748V34.8152C99.7362 34.2007 99.8264 33.5885 100.015 33.0036C100.186 32.4859 100.463 32.0098 100.829 31.6061C101.196 31.2023 101.642 30.8799 102.141 30.6597C102.689 30.4032 103.28 30.2515 103.884 30.2124C104.454 30.156 105.03 30.2065 105.581 30.3615V26.2493C105.053 26.1838 104.52 26.1703 103.99 26.2091Z" fill="#1461DB"/>
+    <path d="M122.322 28.942C121.748 27.8129 120.778 26.9352 119.597 26.4774C118.397 26.0003 117.023 25.7617 115.476 25.7617C113.367 25.7617 111.702 26.2165 110.479 27.126C109.281 27.999 108.404 29.2417 107.982 30.6627L111.972 31.927C112.254 31.1259 112.746 30.5692 113.448 30.2571C114.083 29.9584 114.774 29.7978 115.476 29.7859C116.645 29.7859 117.478 30.0295 117.975 30.5165C118.364 30.8967 118.596 31.4529 118.68 32.1716C117.934 32.2834 117.226 32.3893 116.563 32.4862C115.429 32.6542 114.412 32.8301 113.514 33.014C112.726 33.1683 111.951 33.3796 111.194 33.6462C110.368 33.9281 109.604 34.3682 108.947 34.9419C108.407 35.4292 107.993 36.0386 107.737 36.7191C107.482 37.4317 107.356 38.1839 107.365 38.9407C107.354 39.8737 107.587 40.7934 108.039 41.6096C108.499 42.4316 109.186 43.1043 110.017 43.5479C110.888 44.03 111.951 44.2706 113.205 44.2696C114.72 44.2696 115.972 44.0072 116.961 43.4823C117.81 43.0089 118.562 42.3778 119.175 41.6231V43.7835H123.037V33.0617C123.04 32.3364 123.007 31.6113 122.938 30.8893C122.863 30.206 122.654 29.5442 122.322 28.942ZM118.201 38.4487C118.019 38.7855 117.793 39.0963 117.529 39.3731C117.149 39.7785 116.698 40.111 116.199 40.3542C115.559 40.6593 114.855 40.8065 114.146 40.7836C113.697 40.7947 113.251 40.7177 112.832 40.557C112.49 40.4264 112.194 40.1983 111.981 39.9009C111.776 39.5973 111.672 39.2368 111.683 38.8707C111.679 38.5943 111.743 38.3214 111.87 38.076C112.013 37.8161 112.213 37.5914 112.453 37.4184C112.776 37.1876 113.127 36.9996 113.497 36.8593C113.927 36.7033 114.365 36.5733 114.811 36.4701C115.308 36.3509 115.962 36.2182 116.774 36.072C117.292 35.9796 117.924 35.8693 118.646 35.747C118.637 36.0586 118.623 36.3941 118.599 36.7907C118.576 37.364 118.44 37.9271 118.201 38.4487Z" fill="#1461DB"/>
+    <path d="M143.232 30.4267C143.017 29.6288 142.669 28.8728 142.203 28.1902C141.684 27.4448 140.991 26.8377 140.183 26.4219C139.318 25.9577 138.199 25.7256 136.825 25.7256C135.106 25.7256 133.681 26.0983 132.551 26.8438C132.032 27.1864 131.561 27.5949 131.147 28.059V26.2489H127.222V43.7698H131.695V34.8804C131.695 33.787 131.816 32.9108 132.058 32.2517C132.301 31.5927 132.614 31.0927 132.998 30.7518C133.343 30.4292 133.76 30.1927 134.215 30.0614C134.61 29.9475 135.019 29.8873 135.431 29.8825C136.371 29.8825 137.099 30.0937 137.613 30.5162C138.121 30.9286 138.505 31.4728 138.725 32.0892C138.946 32.692 139.083 33.3229 139.13 33.9634C139.174 34.5847 139.195 35.0956 139.194 35.4962V43.7698H143.667V33.9381C143.667 33.6399 143.647 33.1821 143.603 32.5425C143.547 31.827 143.423 31.1185 143.232 30.4267Z" fill="#1461DB"/>
+    <path d="M159.756 34.4942C158.948 34.037 157.88 33.6344 156.551 33.2865C155.189 32.9406 154.175 32.6593 153.51 32.4426C152.845 32.2259 152.407 32.0152 152.196 31.8104C152.093 31.7124 152.011 31.5938 151.957 31.4623C151.902 31.3309 151.875 31.1894 151.879 31.047C151.879 30.5386 152.125 30.1524 152.617 29.8796C153.109 29.6067 153.762 29.5023 154.571 29.556C155.404 29.6206 156.064 29.8423 156.551 30.221C156.791 30.4059 156.989 30.6383 157.135 30.9036C157.28 31.1689 157.369 31.4614 157.395 31.7627L161.906 30.9501C161.773 29.9345 161.353 28.9777 160.696 28.1917C160.003 27.3862 159.119 26.7675 158.124 26.3921C156.959 25.9511 155.72 25.736 154.474 25.7584C153.058 25.7584 151.828 25.9831 150.784 26.4324C149.808 26.8267 148.965 27.492 148.355 28.3498C147.772 29.2131 147.472 30.2365 147.497 31.2781C147.473 32.0804 147.669 32.8739 148.063 33.5728C148.442 34.207 149.059 34.7507 149.913 35.204C150.768 35.6572 151.911 36.0682 153.343 36.437C154.607 36.773 155.54 37.0434 156.14 37.2481C156.736 37.4539 157.127 37.6611 157.3 37.8729C157.482 38.1118 157.574 38.4076 157.559 38.7078C157.569 38.9601 157.515 39.2108 157.402 39.4364C157.288 39.662 157.119 39.8551 156.911 39.9975C156.475 40.3047 155.86 40.4583 155.065 40.4583C154.091 40.4583 153.288 40.2257 152.655 39.7605C152.019 39.2907 151.582 38.5989 151.431 37.8222L146.915 38.52C147.207 40.3479 148.032 41.7624 149.389 42.7634C150.745 43.7643 152.527 44.2643 154.734 44.2633C157.027 44.2633 158.822 43.7494 160.119 42.7216C161.417 41.6938 162.068 40.2803 162.073 38.4812C162.096 37.6699 161.906 36.8667 161.521 36.1522C161.15 35.5101 160.562 34.9574 159.756 34.4942Z" fill="#1461DB"/>
+    <path d="M179.62 28.942C179.046 27.8131 178.076 26.9356 176.895 26.4774C175.694 26.0003 174.32 25.7617 172.774 25.7617C170.665 25.7617 169 26.2165 167.777 27.126C166.579 27.9993 165.701 29.2418 165.278 30.6627L169.27 31.927C169.552 31.1259 170.044 30.5692 170.746 30.2571C171.381 29.9584 172.072 29.7978 172.774 29.7859C173.943 29.7859 174.776 30.0295 175.273 30.5165C175.662 30.8968 175.893 31.4529 175.978 32.1716C175.232 32.2834 174.524 32.3893 173.861 32.4862C172.726 32.6542 171.71 32.8301 170.812 33.014C170.024 33.1683 169.249 33.3796 168.492 33.6462C167.551 33.9941 166.802 34.424 166.245 34.9359C165.705 35.4232 165.291 36.0327 165.035 36.7132C164.779 37.4255 164.653 38.1779 164.663 38.9348C164.652 39.8678 164.884 40.7874 165.337 41.6037C165.797 42.4259 166.484 43.0987 167.315 43.542C168.186 44.0241 169.248 44.2646 170.503 44.2636C172.018 44.2636 173.27 44.0012 174.259 43.4764C175.108 43.0029 175.86 42.3719 176.473 41.6171V43.7776H180.335V33.0617C180.338 32.3364 180.305 31.6113 180.236 30.8893C180.161 30.206 179.952 29.5442 179.62 28.942ZM175.499 38.4487C175.317 38.7855 175.091 39.0963 174.827 39.3731C174.447 39.7785 173.996 40.111 173.497 40.3542C172.857 40.6593 172.153 40.8065 171.444 40.7836C170.995 40.7947 170.549 40.7177 170.13 40.557C169.788 40.4264 169.492 40.1983 169.279 39.9009C169.074 39.5973 168.969 39.2369 168.981 38.8707C168.977 38.5943 169.041 38.3214 169.168 38.076C169.311 37.8157 169.51 37.591 169.751 37.4184C170.074 37.1876 170.424 36.9996 170.795 36.8593C171.225 36.7031 171.663 36.5731 172.109 36.4701C172.606 36.3509 173.26 36.2182 174.072 36.072C174.59 35.9796 175.222 35.8693 175.944 35.747C175.935 36.0586 175.92 36.3941 175.897 36.7907C175.872 37.3638 175.737 37.9267 175.499 38.4487Z" fill="#1461DB"/>
+    <path d="M194.091 35.0091L200.417 26.2495H194.966L189.029 34.6856V20.4092H184.551L184.519 43.7703H189.029V35.3342L195.096 43.7703H200.839L194.091 35.0091Z" fill="#1461DB"/>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/packages/shared/assets/logos/transak.svg b/packages/shared/assets/logos/transak.svg
deleted file mode 100644
index cf5148db37..0000000000
--- a/packages/shared/assets/logos/transak.svg
+++ /dev/null
@@ -1,24 +0,0 @@
-<svg width="201" height="64" viewBox="0 0 201 64" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_3242_495)">
-<path d="M32 64C49.6731 64 64 49.6731 64 32C64 14.3269 49.6731 0 32 0C14.3269 0 0 14.3269 0 32C0 49.6731 14.3269 64 32 64Z" fill="url(#paint0_linear_3242_495)"/>
-<path d="M52.2062 30.0437L43.1677 21.0052L43.1513 20.9888L43.1155 20.9575C43.057 20.9046 42.9958 20.8549 42.9321 20.8084C42.8874 20.7726 42.8427 20.7383 42.7949 20.707C42.7741 20.6921 42.7532 20.6802 42.7308 20.6668C42.2155 20.3293 41.5922 20.1979 40.9845 20.2987C40.3768 20.3995 39.8293 20.7252 39.4506 21.211L25.3934 35.2697V22.7452C25.3934 22.0868 25.1318 21.4554 24.6663 20.9898C24.2007 20.5242 23.5693 20.2627 22.9109 20.2627C22.2525 20.2627 21.621 20.5242 21.1555 20.9898C20.6899 21.4554 20.4283 22.0868 20.4283 22.7452V35.2697L15.2963 30.1376C14.8272 29.6903 14.2017 29.4442 13.5536 29.4519C12.9055 29.4596 12.286 29.7205 11.8277 30.1789C11.3694 30.6372 11.1085 31.2566 11.1008 31.9048C11.0931 32.5529 11.3392 33.1784 11.7865 33.6475L21.156 43.017C21.2148 43.0766 21.2771 43.1329 21.3423 43.1854C21.405 43.2361 21.4706 43.2853 21.5362 43.3345C21.8747 43.5539 22.2616 43.6875 22.6634 43.7237H22.6738C22.7543 43.7312 22.8348 43.7356 22.9153 43.7356H22.9526C23.0202 43.7356 23.0873 43.7326 23.1539 43.7267H23.2031C23.2672 43.7192 23.3313 43.7118 23.394 43.6983H23.4223C23.4924 43.6834 23.5624 43.667 23.631 43.6462H23.643C23.7178 43.6236 23.7915 43.5972 23.8636 43.5671C23.9665 43.5246 24.0661 43.4748 24.1618 43.418L24.2185 43.3852C24.3123 43.3279 24.4019 43.2641 24.4869 43.1944L24.5122 43.172C24.5644 43.1273 24.6166 43.0826 24.6613 43.0319L38.9153 28.7689V41.2546C38.9153 41.913 39.1769 42.5444 39.6425 43.01C40.108 43.4756 40.7395 43.7371 41.3979 43.7371C42.0563 43.7371 42.6877 43.4756 43.1533 43.01C43.6188 42.5444 43.8804 41.913 43.8804 41.2546V28.7301L48.6963 33.555C49.1638 34.0114 49.7924 34.265 50.4457 34.261C51.099 34.257 51.7244 33.9957 52.1862 33.5336C52.6481 33.0715 52.9092 32.446 52.9129 31.7927C52.9167 31.1395 52.6627 30.511 52.2062 30.0437Z" fill="white"/>
-<path d="M75.1797 24.5303H82.5453V43.7703H86.9572V24.5303H94.3227V20.4092H75.1797V24.5303Z" fill="#1461DB"/>
-<path d="M103.99 26.2091C103.468 26.2453 102.951 26.3378 102.448 26.4849C101.964 26.6257 101.501 26.8298 101.071 27.0917C100.529 27.4079 100.055 27.8273 99.675 28.3263C99.4958 28.5632 99.3334 28.8123 99.1889 29.0718V26.2493H95.2959V43.7702H99.748V34.8152C99.7362 34.2007 99.8264 33.5885 100.015 33.0036C100.186 32.4859 100.463 32.0098 100.829 31.6061C101.196 31.2023 101.642 30.8799 102.141 30.6597C102.689 30.4032 103.28 30.2515 103.884 30.2124C104.454 30.156 105.03 30.2065 105.581 30.3615V26.2493C105.053 26.1838 104.52 26.1703 103.99 26.2091Z" fill="#1461DB"/>
-<path d="M122.322 28.942C121.748 27.8129 120.778 26.9352 119.597 26.4774C118.397 26.0003 117.023 25.7617 115.476 25.7617C113.367 25.7617 111.702 26.2165 110.479 27.126C109.281 27.999 108.404 29.2417 107.982 30.6627L111.972 31.927C112.254 31.1259 112.746 30.5692 113.448 30.2571C114.083 29.9584 114.774 29.7978 115.476 29.7859C116.645 29.7859 117.478 30.0295 117.975 30.5165C118.364 30.8967 118.596 31.4529 118.68 32.1716C117.934 32.2834 117.226 32.3893 116.563 32.4862C115.429 32.6542 114.412 32.8301 113.514 33.014C112.726 33.1683 111.951 33.3796 111.194 33.6462C110.368 33.9281 109.604 34.3682 108.947 34.9419C108.407 35.4292 107.993 36.0386 107.737 36.7191C107.482 37.4317 107.356 38.1839 107.365 38.9407C107.354 39.8737 107.587 40.7934 108.039 41.6096C108.499 42.4316 109.186 43.1043 110.017 43.5479C110.888 44.03 111.951 44.2706 113.205 44.2696C114.72 44.2696 115.972 44.0072 116.961 43.4823C117.81 43.0089 118.562 42.3778 119.175 41.6231V43.7835H123.037V33.0617C123.04 32.3364 123.007 31.6113 122.938 30.8893C122.863 30.206 122.654 29.5442 122.322 28.942ZM118.201 38.4487C118.019 38.7855 117.793 39.0963 117.529 39.3731C117.149 39.7785 116.698 40.111 116.199 40.3542C115.559 40.6593 114.855 40.8065 114.146 40.7836C113.697 40.7947 113.251 40.7177 112.832 40.557C112.49 40.4264 112.194 40.1983 111.981 39.9009C111.776 39.5973 111.672 39.2368 111.683 38.8707C111.679 38.5943 111.743 38.3214 111.87 38.076C112.013 37.8161 112.213 37.5914 112.453 37.4184C112.776 37.1876 113.127 36.9996 113.497 36.8593C113.927 36.7033 114.365 36.5733 114.811 36.4701C115.308 36.3509 115.962 36.2182 116.774 36.072C117.292 35.9796 117.924 35.8693 118.646 35.747C118.637 36.0586 118.623 36.3941 118.599 36.7907C118.576 37.364 118.44 37.9271 118.201 38.4487Z" fill="#1461DB"/>
-<path d="M143.232 30.4267C143.017 29.6288 142.669 28.8728 142.203 28.1902C141.684 27.4448 140.991 26.8377 140.183 26.4219C139.318 25.9577 138.199 25.7256 136.825 25.7256C135.106 25.7256 133.681 26.0983 132.551 26.8438C132.032 27.1864 131.561 27.5949 131.147 28.059V26.2489H127.222V43.7698H131.695V34.8804C131.695 33.787 131.816 32.9108 132.058 32.2517C132.301 31.5927 132.614 31.0927 132.998 30.7518C133.343 30.4292 133.76 30.1927 134.215 30.0614C134.61 29.9475 135.019 29.8873 135.431 29.8825C136.371 29.8825 137.099 30.0937 137.613 30.5162C138.121 30.9286 138.505 31.4728 138.725 32.0892C138.946 32.692 139.083 33.3229 139.13 33.9634C139.174 34.5847 139.195 35.0956 139.194 35.4962V43.7698H143.667V33.9381C143.667 33.6399 143.647 33.1821 143.603 32.5425C143.547 31.827 143.423 31.1185 143.232 30.4267Z" fill="#1461DB"/>
-<path d="M159.756 34.4942C158.948 34.037 157.88 33.6344 156.551 33.2865C155.189 32.9406 154.175 32.6593 153.51 32.4426C152.845 32.2259 152.407 32.0152 152.196 31.8104C152.093 31.7124 152.011 31.5938 151.957 31.4623C151.902 31.3309 151.875 31.1894 151.879 31.047C151.879 30.5386 152.125 30.1524 152.617 29.8796C153.109 29.6067 153.762 29.5023 154.571 29.556C155.404 29.6206 156.064 29.8423 156.551 30.221C156.791 30.4059 156.989 30.6383 157.135 30.9036C157.28 31.1689 157.369 31.4614 157.395 31.7627L161.906 30.9501C161.773 29.9345 161.353 28.9777 160.696 28.1917C160.003 27.3862 159.119 26.7675 158.124 26.3921C156.959 25.9511 155.72 25.736 154.474 25.7584C153.058 25.7584 151.828 25.9831 150.784 26.4324C149.808 26.8267 148.965 27.492 148.355 28.3498C147.772 29.2131 147.472 30.2365 147.497 31.2781C147.473 32.0804 147.669 32.8739 148.063 33.5728C148.442 34.207 149.059 34.7507 149.913 35.204C150.768 35.6572 151.911 36.0682 153.343 36.437C154.607 36.773 155.54 37.0434 156.14 37.2481C156.736 37.4539 157.127 37.6611 157.3 37.8729C157.482 38.1118 157.574 38.4076 157.559 38.7078C157.569 38.9601 157.515 39.2108 157.402 39.4364C157.288 39.662 157.119 39.8551 156.911 39.9975C156.475 40.3047 155.86 40.4583 155.065 40.4583C154.091 40.4583 153.288 40.2257 152.655 39.7605C152.019 39.2907 151.582 38.5989 151.431 37.8222L146.915 38.52C147.207 40.3479 148.032 41.7624 149.389 42.7634C150.745 43.7643 152.527 44.2643 154.734 44.2633C157.027 44.2633 158.822 43.7494 160.119 42.7216C161.417 41.6938 162.068 40.2803 162.073 38.4812C162.096 37.6699 161.906 36.8667 161.521 36.1522C161.15 35.5101 160.562 34.9574 159.756 34.4942Z" fill="#1461DB"/>
-<path d="M179.62 28.942C179.046 27.8131 178.076 26.9356 176.895 26.4774C175.694 26.0003 174.32 25.7617 172.774 25.7617C170.665 25.7617 169 26.2165 167.777 27.126C166.579 27.9993 165.701 29.2418 165.278 30.6627L169.27 31.927C169.552 31.1259 170.044 30.5692 170.746 30.2571C171.381 29.9584 172.072 29.7978 172.774 29.7859C173.943 29.7859 174.776 30.0295 175.273 30.5165C175.662 30.8968 175.893 31.4529 175.978 32.1716C175.232 32.2834 174.524 32.3893 173.861 32.4862C172.726 32.6542 171.71 32.8301 170.812 33.014C170.024 33.1683 169.249 33.3796 168.492 33.6462C167.551 33.9941 166.802 34.424 166.245 34.9359C165.705 35.4232 165.291 36.0327 165.035 36.7132C164.779 37.4255 164.653 38.1779 164.663 38.9348C164.652 39.8678 164.884 40.7874 165.337 41.6037C165.797 42.4259 166.484 43.0987 167.315 43.542C168.186 44.0241 169.248 44.2646 170.503 44.2636C172.018 44.2636 173.27 44.0012 174.259 43.4764C175.108 43.0029 175.86 42.3719 176.473 41.6171V43.7776H180.335V33.0617C180.338 32.3364 180.305 31.6113 180.236 30.8893C180.161 30.206 179.952 29.5442 179.62 28.942ZM175.499 38.4487C175.317 38.7855 175.091 39.0963 174.827 39.3731C174.447 39.7785 173.996 40.111 173.497 40.3542C172.857 40.6593 172.153 40.8065 171.444 40.7836C170.995 40.7947 170.549 40.7177 170.13 40.557C169.788 40.4264 169.492 40.1983 169.279 39.9009C169.074 39.5973 168.969 39.2369 168.981 38.8707C168.977 38.5943 169.041 38.3214 169.168 38.076C169.311 37.8157 169.51 37.591 169.751 37.4184C170.074 37.1876 170.424 36.9996 170.795 36.8593C171.225 36.7031 171.663 36.5731 172.109 36.4701C172.606 36.3509 173.26 36.2182 174.072 36.072C174.59 35.9796 175.222 35.8693 175.944 35.747C175.935 36.0586 175.92 36.3941 175.897 36.7907C175.872 37.3638 175.737 37.9267 175.499 38.4487Z" fill="#1461DB"/>
-<path d="M194.091 35.0091L200.417 26.2495H194.966L189.029 34.6856V20.4092H184.551L184.519 43.7703H189.029V35.3342L195.096 43.7703H200.839L194.091 35.0091Z" fill="#1461DB"/>
-</g>
-<defs>
-<linearGradient id="paint0_linear_3242_495" x1="4.28217" y1="15.997" x2="59.7178" y2="48.0015" gradientUnits="userSpaceOnUse">
-<stop offset="0.13" stop-color="#348BED"/>
-<stop offset="0.31" stop-color="#2B80E8"/>
-<stop offset="0.64" stop-color="#1461DB"/>
-<stop offset="0.72" stop-color="#0E57D7"/>
-</linearGradient>
-<clipPath id="clip0_3242_495">
-<rect width="200.839" height="64" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/packages/shared/package.json b/packages/shared/package.json
index 85e72704b7..7b0a7260dd 100644
--- a/packages/shared/package.json
+++ b/packages/shared/package.json
@@ -5,7 +5,7 @@
     "author": "Bloom Labs Ltd <contact@bloomwallet.io>",
     "license": "PolyForm Strict License 1.0.0",
     "dependencies": {
-        "@bloomwalletio/ui": "0.21.8",
+        "@bloomwalletio/ui": "0.21.11",
         "@ethereumjs/common": "4.3.0",
         "@ethereumjs/rlp": "5.0.2",
         "@ethereumjs/tx": "5.3.0",
diff --git a/packages/shared/src/components/inputs/FiatAmountInput.svelte b/packages/shared/src/components/inputs/FiatAmountInput.svelte
new file mode 100644
index 0000000000..19d225765f
--- /dev/null
+++ b/packages/shared/src/components/inputs/FiatAmountInput.svelte
@@ -0,0 +1,130 @@
+<script lang="ts">
+    import { formatCurrency, getDecimalSeparator, localize } from '@core/i18n'
+    import { getFiatValueFromTokenAmount } from '@core/market/actions'
+    import { activeProfile } from '@core/profile/stores'
+    import {
+        ITokenWithBalance,
+        convertToRawAmount,
+        formatTokenAmount,
+        getMaxDecimalsFromTokenMetadata,
+        validateTokenAmount,
+    } from '@core/token'
+    import { visibleSelectedAccountTokens } from '@core/token/stores'
+    import { AmountInput } from '@ui'
+    import { Error as ErrorComponent, Text } from '@bloomwalletio/ui'
+
+    export let token: ITokenWithBalance | undefined =
+        $visibleSelectedAccountTokens?.[$activeProfile?.network?.id]?.baseCoin
+    export let rawAmount: bigint | undefined = undefined
+    export let unit: string | undefined = undefined
+    export let availableBalance: bigint
+    export let inputtedAmount: string | undefined =
+        rawAmount && token?.metadata
+            ? formatTokenAmount(rawAmount, token.metadata, { withUnit: false, round: false })
+            : undefined
+
+    type InputFontSize = 'text-32' | 'text-48' | 'text-64'
+
+    let inputElement: HTMLInputElement | undefined
+    let error: string | undefined
+    let inputLength = 0
+    let fontSize: InputFontSize
+    let maxLength = 0
+
+    $: inputtedAmount,
+        (error = ''),
+        (inputLength = getInputLength()),
+        (fontSize = getFontSizeForInputLength()),
+        (maxLength = getMaxAmountOfDigits())
+    $: allowedDecimals = token?.metadata && unit ? getMaxDecimalsFromTokenMetadata(token.metadata, unit) : 0
+    $: rawAmount =
+        inputtedAmount && token?.metadata ? convertToRawAmount(inputtedAmount, token.metadata, unit) : BigInt(0)
+    $: fiatAmount = token ? getFiatValueFromTokenAmount(rawAmount, token) : undefined
+    $: maxWidth = `${(inputLength * Number(/\d+/.exec(fontSize)?.[0] ?? 0) * 2) / 3}px`
+
+    function getInputLength(): number {
+        const length = inputtedAmount?.length || 1
+        const isDecimal = inputtedAmount?.includes('.') || inputtedAmount?.includes(',')
+
+        return length - (isDecimal ? 0.5 : 0)
+    }
+
+    function getMaxAmountOfDigits(): number {
+        const metadata = token?.metadata
+        if (!metadata) {
+            return 32
+        }
+
+        const decimalSeparator = getDecimalSeparator()
+
+        const decimalPlacesAmount = inputtedAmount?.includes(decimalSeparator)
+            ? inputtedAmount.split(decimalSeparator)[1].length || 1
+            : 0
+        const allowedDecimalAmount = Math.min(decimalPlacesAmount, metadata.decimals)
+
+        const integerLengthOfBalance =
+            formatTokenAmount(availableBalance, metadata, { withUnit: false, round: false }).split(
+                decimalSeparator
+            )?.[0]?.length ?? 0
+
+        return (
+            allowedDecimalAmount +
+            integerLengthOfBalance +
+            (metadata.decimals ? 1 : 0) +
+            (inputtedAmount?.includes(decimalSeparator) ? 1 : 0)
+        )
+    }
+
+    function getFontSizeForInputLength(): InputFontSize {
+        if (inputLength < 10) {
+            return 'text-64'
+        } else if (inputLength < 14) {
+            return 'text-48'
+        } else {
+            return 'text-32'
+        }
+    }
+
+    export async function validate(allowZeroOrNull = false): Promise<void> {
+        if (inputtedAmount === undefined || token === undefined || unit === undefined) {
+            throw new Error(localize('error.send.amountInvalidFormat'))
+        }
+        try {
+            rawAmount = await validateTokenAmount(inputtedAmount, token, unit, allowZeroOrNull)
+        } catch (err) {
+            error = err as string
+            throw new Error(error)
+        }
+    }
+</script>
+
+<token-amount-input class="flex flex-col items-center w-full">
+    <div class="w-full flex flex-col items-center space-y-1">
+        <!-- svelte-ignore a11y-click-events-have-key-events -->
+        <!-- svelte-ignore a11y-no-static-element-interactions -->
+        <div
+            on:click={() => inputElement?.focus()}
+            class="flex flex-row justify-center items-end w-full
+                gap-0.5 cursor-text rounded-lg"
+        >
+            <AmountInput
+                bind:inputElement
+                bind:value={inputtedAmount}
+                maxDecimals={allowedDecimals}
+                maxlength={maxLength}
+                {fontSize}
+                {maxWidth}
+                autofocus
+            />
+            <Text class={inputLength < 14 ? 'py-4' : 'py-2'}>
+                {unit}
+            </Text>
+        </div>
+        {#if error}
+            <ErrorComponent {error} />
+        {/if}
+    </div>
+    <Text textColor="secondary">
+        {formatCurrency(fiatAmount) || '--'}
+    </Text>
+</token-amount-input>
diff --git a/packages/shared/src/components/inputs/RecipientInput.svelte b/packages/shared/src/components/inputs/RecipientInput.svelte
index 31b6e8389c..b5ceb61672 100644
--- a/packages/shared/src/components/inputs/RecipientInput.svelte
+++ b/packages/shared/src/components/inputs/RecipientInput.svelte
@@ -19,10 +19,21 @@
 
     let value: any
     let error: string
-    const selected: IOption = getSelectedRecipient(recipient)
+    let selected: IOption = getSelectedRecipient(recipient)
 
     $: isEvmNetwork, (error = '')
-    $: recipient = getSubjectFromAddress(value, networkId)
+    function updateRecipientIfValueChanges() {
+        recipient = getSubjectFromAddress(value, networkId)
+    }
+    $: value, updateRecipientIfValueChanges()
+
+    function updateValueIfRecipientPassedIn() {
+        if (recipient?.address !== value) {
+            value = recipient?.address
+            selected = getSelectedRecipient(recipient)
+        }
+    }
+    $: recipient, updateValueIfRecipientPassedIn()
 
     export function validate(): void {
         try {
diff --git a/packages/shared/src/components/pills/NetworkNamePill.svelte b/packages/shared/src/components/pills/NetworkNamePill.svelte
new file mode 100644
index 0000000000..363506640b
--- /dev/null
+++ b/packages/shared/src/components/pills/NetworkNamePill.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+    import { Pill, Text } from '@bloomwalletio/ui'
+    import { NetworkId, SupportedNetworkId, getNameFromNetworkId } from '@core/network'
+
+    export let networkId: NetworkId | undefined
+    export let networkName: string | undefined = undefined
+    export let compact: boolean = false
+
+    const PILL_COLOR: { [id in NetworkId]?: string } = {
+        [SupportedNetworkId.Iota]: 'iota-background',
+        [SupportedNetworkId.Shimmer]: 'shimmer',
+        [SupportedNetworkId.Testnet]: 'text-secondary',
+        [SupportedNetworkId.IotaTestnet]: 'text-secondary',
+        [SupportedNetworkId.IotaEvm]: 'iota-evm-background',
+        [SupportedNetworkId.ShimmerEvm]: 'shimmer-evm-background',
+        [SupportedNetworkId.IotaTestnetEvm]: 'iota-evm-background/90',
+        [SupportedNetworkId.TestnetEvm]: 'shimmer-evm-background/90',
+        [SupportedNetworkId.Ethereum]: 'ethereum',
+        [SupportedNetworkId.Sepolia]: 'text-secondary',
+        [SupportedNetworkId.GenericEvm]: 'text-secondary',
+    }
+
+    $: networkName = networkName ? networkName : networkId ? getNameFromNetworkId(networkId) ?? networkId : networkId
+</script>
+
+<Pill color={PILL_COLOR[networkId ?? SupportedNetworkId.GenericEvm]} {compact}>
+    <Text type="xs" textColor="current">
+        {networkName ?? '​'}
+    </Text>
+</Pill>
diff --git a/packages/shared/src/components/pills/index.ts b/packages/shared/src/components/pills/index.ts
index 407eac1e67..a3e2ed4867 100644
--- a/packages/shared/src/components/pills/index.ts
+++ b/packages/shared/src/components/pills/index.ts
@@ -4,6 +4,7 @@ export { default as TimelockPill } from './TimelockPill.svelte'
 export { default as UnclaimedPill } from './UnclaimedPill.svelte'
 export { default as ActivityAsyncStatusPill } from './ActivityAsyncStatusPill.svelte'
 export { default as AsyncStatusPill } from './AsyncStatusPill.svelte'
+export { default as NetworkNamePill } from './NetworkNamePill.svelte'
 export { default as NetworkStatusPill } from './NetworkStatusPill.svelte'
 export { default as NetworkTypePill } from './NetworkTypePill.svelte'
 export { default as NftStandardPill } from './NftStandardPill.svelte'
diff --git a/packages/shared/src/lib/auxiliary/transak/actions/getTransakPrice.ts b/packages/shared/src/lib/auxiliary/transak/actions/getTransakPrice.ts
new file mode 100644
index 0000000000..40344534bf
--- /dev/null
+++ b/packages/shared/src/lib/auxiliary/transak/actions/getTransakPrice.ts
@@ -0,0 +1,19 @@
+import { TransakApi } from '../apis'
+import { ITransakApiPriceParams } from '../interfaces'
+import { getTransakApiUrl } from '../utils'
+
+export async function getTransakPrice(
+    params: ITransakApiPriceParams
+): Promise<{ fiatAmount: number; cryptoAmount: number } | undefined> {
+    const apiUrl = getTransakApiUrl()
+    const api = new TransakApi(apiUrl)
+    const { response } = (await api.getPrices(params)) ?? {}
+
+    if (!response) {
+        return
+    }
+
+    const { cryptoAmount, fiatAmount } = response
+
+    return { fiatAmount, cryptoAmount }
+}
diff --git a/packages/shared/src/lib/auxiliary/transak/actions/index.ts b/packages/shared/src/lib/auxiliary/transak/actions/index.ts
new file mode 100644
index 0000000000..c2563c0067
--- /dev/null
+++ b/packages/shared/src/lib/auxiliary/transak/actions/index.ts
@@ -0,0 +1,3 @@
+export * from './getTransakPrice'
+export * from './updateTransakCryptoCurrencies'
+export * from './updateTransakFiatCurrencies'
diff --git a/packages/shared/src/lib/auxiliary/transak/actions/updateTransakCryptoCurrencies.ts b/packages/shared/src/lib/auxiliary/transak/actions/updateTransakCryptoCurrencies.ts
new file mode 100644
index 0000000000..f06c7deb7b
--- /dev/null
+++ b/packages/shared/src/lib/auxiliary/transak/actions/updateTransakCryptoCurrencies.ts
@@ -0,0 +1,104 @@
+import {
+    NetworkId,
+    NetworkNamespace,
+    StardustNetworkId,
+    SupportedNetworkId,
+    SupportedStardustNetworkId,
+    getEvmNetworks,
+    getNetwork,
+    getStardustNetwork,
+} from '@core/network'
+import { activeProfile } from '@core/profile/stores'
+import { get } from 'svelte/store'
+import { TransakApi } from '../apis'
+import { ITransakApiCryptoCurrenciesResponseItem } from '../interfaces'
+import { TransakCryptoCurrency, transakCryptoCurrencies } from '../stores'
+import { getTransakApiUrl } from '../utils'
+
+const STARDUST_NETWORK_ID_TO_TRANSAK_NETWORK_NAME_MAP: Record<StardustNetworkId, string> = {
+    [SupportedStardustNetworkId.Iota]: 'miota',
+    [SupportedStardustNetworkId.IotaTestnet]: 'miota',
+}
+
+export async function updateTransakCryptoCurrencies(): Promise<void> {
+    const currentNetworkId = get(activeProfile)?.network?.id
+    const isStagingEnvironment = [SupportedNetworkId.IotaTestnet, SupportedNetworkId.Testnet].includes(currentNetworkId)
+
+    const stardustNetwork = getStardustNetwork()
+    const transakNetworkNameForStardustNetwork = STARDUST_NETWORK_ID_TO_TRANSAK_NETWORK_NAME_MAP[stardustNetwork.id]
+    const evmNetworks = getEvmNetworks()
+
+    const allowedNetworkNames = [transakNetworkNameForStardustNetwork]
+    const allowedNetworkChainIds = evmNetworks.map((network) => network.chainId)
+
+    const apiUrl = getTransakApiUrl()
+    const api = new TransakApi(apiUrl)
+    const response = await api.getFilteredCryptoCurrencies(allowedNetworkNames, allowedNetworkChainIds)
+
+    // sort response by stardust network first and then by order of evm networks
+    response?.sort((a, b) => {
+        const aNetworkId = getNetworkIdFromTransakNetwork(a.network.name, a.network.chainId, isStagingEnvironment)
+        const bNetworkId = getNetworkIdFromTransakNetwork(b.network.name, b.network.chainId, isStagingEnvironment)
+        if (aNetworkId === stardustNetwork.id) {
+            return -1
+        } else if (bNetworkId === stardustNetwork.id) {
+            return 1
+        } else {
+            return evmNetworks.findIndex((network) => network.id === aNetworkId) <
+                evmNetworks.findIndex((network) => network.id === bNetworkId)
+                ? -1
+                : 1
+        }
+    })
+
+    transakCryptoCurrencies.set(
+        response?.reduce((acc, token) => {
+            if (!token.isAllowed) {
+                return acc
+            }
+
+            return [...acc, buildTransakCryptoCurrencyFromResponseItem(token, isStagingEnvironment)]
+        }, [] as TransakCryptoCurrency[])
+    )
+}
+
+function buildTransakCryptoCurrencyFromResponseItem(
+    responseItem: ITransakApiCryptoCurrenciesResponseItem,
+    isStagingEnvironment: boolean
+): TransakCryptoCurrency {
+    const networkId = getNetworkIdFromTransakNetwork(
+        responseItem.network.name,
+        responseItem.network.chainId,
+        isStagingEnvironment
+    )
+    const network = getNetwork(networkId)
+    if (!network) {
+        throw new Error(`Unsupported Transak network: ${responseItem.network.name}`)
+    }
+    return {
+        name: responseItem.name,
+        symbol: responseItem.symbol,
+        image: {
+            thumb: responseItem.image.thumb,
+            small: responseItem.image.small,
+            large: responseItem.image.large,
+        },
+        network,
+        transakNetworkName: responseItem.network.name,
+        decimals: responseItem.decimals,
+    }
+}
+
+function getNetworkIdFromTransakNetwork(
+    transakNetworkName: string,
+    chainId: string | null | undefined,
+    isStagingEnvironment: boolean
+): NetworkId {
+    if (transakNetworkName === 'miota') {
+        return isStagingEnvironment ? SupportedStardustNetworkId.IotaTestnet : SupportedStardustNetworkId.Iota
+    } else if (chainId) {
+        return `${NetworkNamespace.Evm}:${chainId}`
+    } else {
+        throw new Error(`Unsupported Transak network: ${transakNetworkName}`)
+    }
+}
diff --git a/packages/shared/src/lib/auxiliary/transak/actions/updateTransakFiatCurrencies.ts b/packages/shared/src/lib/auxiliary/transak/actions/updateTransakFiatCurrencies.ts
new file mode 100644
index 0000000000..7fcf1094c0
--- /dev/null
+++ b/packages/shared/src/lib/auxiliary/transak/actions/updateTransakFiatCurrencies.ts
@@ -0,0 +1,26 @@
+import { TransakApi } from '../apis'
+import { TransakFiatCurrencies, transakFiatCurrencies } from '../stores'
+import { getTransakApiUrl } from '../utils'
+
+const FILTERED_PAYMENT_OPTIONS = ['apple_pay', 'google_pay']
+
+export async function updateTransakFiatCurrencies(): Promise<void> {
+    const apiUrl = getTransakApiUrl()
+    const api = new TransakApi(apiUrl)
+    const { response } = (await api.getFiatCurrencies()) ?? {}
+
+    transakFiatCurrencies.set(
+        response?.reduce((acc, val) => {
+            return {
+                ...acc,
+                [val.symbol]: {
+                    paymentOptions: val.paymentOptions
+                        .filter((option) => !FILTERED_PAYMENT_OPTIONS.includes(option.id) && option.isActive)
+                        .map(({ id, minAmount, maxAmount }) => {
+                            return { id, minAmount, maxAmount }
+                        }),
+                },
+            }
+        }, {} as TransakFiatCurrencies)
+    )
+}
diff --git a/packages/shared/src/lib/auxiliary/transak/apis/transak.api.ts b/packages/shared/src/lib/auxiliary/transak/apis/transak.api.ts
index 99030c5452..35ed8d5948 100644
--- a/packages/shared/src/lib/auxiliary/transak/apis/transak.api.ts
+++ b/packages/shared/src/lib/auxiliary/transak/apis/transak.api.ts
@@ -1,11 +1,16 @@
 import { BaseApi } from '@core/utils'
-import { TRANSAK_API_BASE_URL } from '../constants'
-import { ITransakApiCryptoCurrenciesResponse, ITransakApiFiatCurrenciesResponse } from '../interfaces'
+import {
+    ITransakApiCryptoCurrenciesResponse,
+    ITransakApiCryptoCurrenciesResponseItem,
+    ITransakApiFiatCurrenciesResponse,
+    ITransakApiPriceParams,
+    ITransakApiPriceResponse,
+} from '../interfaces'
 import { TransakApiEndpoint } from '../enums'
 
 export class TransakApi extends BaseApi {
-    constructor() {
-        super(TRANSAK_API_BASE_URL)
+    constructor(url: string) {
+        super(url)
     }
 
     async getFiatCurrencies(): Promise<ITransakApiFiatCurrenciesResponse | undefined> {
@@ -13,8 +18,41 @@ export class TransakApi extends BaseApi {
         return response
     }
 
-    async getCryptoCurrencies(): Promise<ITransakApiCryptoCurrenciesResponse | undefined> {
+    async getCryptoCurrencies(): Promise<ITransakApiCryptoCurrenciesResponseItem[] | undefined> {
         const response = await this.get<ITransakApiCryptoCurrenciesResponse>(TransakApiEndpoint.CryptoCurrencies)
+        return response?.response
+    }
+
+    async getFilteredCryptoCurrencies(
+        allowedNetworkNames: string[],
+        allowedNetworkChainIds: string[]
+    ): Promise<ITransakApiCryptoCurrenciesResponseItem[] | undefined> {
+        const response = await this.getCryptoCurrencies()
+        const filteredResponse = response?.filter((cryptoCurrency) => {
+            if (cryptoCurrency.isAllowed && !cryptoCurrency.isSuspended) {
+                return (
+                    allowedNetworkNames.some((networkName) => networkName === cryptoCurrency.network.name) ||
+                    allowedNetworkChainIds.some((chainId) => chainId === cryptoCurrency.network.chainId)
+                )
+            } else {
+                return false
+            }
+        })
+        return filteredResponse
+    }
+
+    async getPrices(params: ITransakApiPriceParams): Promise<ITransakApiPriceResponse | undefined> {
+        const partnerApiKey = process.env.TRANSAK_API_KEY ?? ''
+        const { fiatCurrency, cryptoCurrency, isBuyOrSell, networkName, paymentMethod, fiatAmount } = params
+        const response = await this.get<ITransakApiPriceResponse>(TransakApiEndpoint.Price, {
+            partnerApiKey,
+            fiatCurrency,
+            cryptoCurrency,
+            isBuyOrSell,
+            networkName,
+            paymentMethod,
+            fiatAmount,
+        })
         return response
     }
 }
diff --git a/packages/shared/src/lib/auxiliary/transak/constants/index.ts b/packages/shared/src/lib/auxiliary/transak/constants/index.ts
index 357bab4c03..3fda7900b6 100644
--- a/packages/shared/src/lib/auxiliary/transak/constants/index.ts
+++ b/packages/shared/src/lib/auxiliary/transak/constants/index.ts
@@ -1,6 +1,4 @@
-export * from './transak-api-base-url.constant'
 export * from './transak-api-production-base-url.constant'
 export * from './transak-api-staging-base-url.constant'
 export * from './transak-production-widget-url.constant'
 export * from './transak-staging-widget-url.constant'
-export * from './transak-widget-url.constant'
diff --git a/packages/shared/src/lib/auxiliary/transak/constants/transak-api-base-url.constant.ts b/packages/shared/src/lib/auxiliary/transak/constants/transak-api-base-url.constant.ts
deleted file mode 100644
index 099a76306d..0000000000
--- a/packages/shared/src/lib/auxiliary/transak/constants/transak-api-base-url.constant.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { AppStage } from '@core/app/enums/app-stage.enum'
-import { TRANSAK_API_PRODUCTION_BASE_URL } from './transak-api-production-base-url.constant'
-import { TRANSAK_API_STAGING_BASE_URL } from './transak-api-staging-base-url.constant'
-
-export const TRANSAK_API_BASE_URL =
-    process.env.STAGE === AppStage.PROD ? TRANSAK_API_PRODUCTION_BASE_URL : TRANSAK_API_STAGING_BASE_URL
diff --git a/packages/shared/src/lib/auxiliary/transak/constants/transak-api-production-base-url.constant.ts b/packages/shared/src/lib/auxiliary/transak/constants/transak-api-production-base-url.constant.ts
index e2b293925e..069f9bc05e 100644
--- a/packages/shared/src/lib/auxiliary/transak/constants/transak-api-production-base-url.constant.ts
+++ b/packages/shared/src/lib/auxiliary/transak/constants/transak-api-production-base-url.constant.ts
@@ -1 +1 @@
-export const TRANSAK_API_PRODUCTION_BASE_URL = 'https://api.transak.com/api/v2'
+export const TRANSAK_API_PRODUCTION_BASE_URL = 'https://api.transak.com'
diff --git a/packages/shared/src/lib/auxiliary/transak/constants/transak-api-staging-base-url.constant.ts b/packages/shared/src/lib/auxiliary/transak/constants/transak-api-staging-base-url.constant.ts
index d60fc85351..aa713b28d1 100644
--- a/packages/shared/src/lib/auxiliary/transak/constants/transak-api-staging-base-url.constant.ts
+++ b/packages/shared/src/lib/auxiliary/transak/constants/transak-api-staging-base-url.constant.ts
@@ -1 +1 @@
-export const TRANSAK_API_STAGING_BASE_URL = 'https://api-stg.transak.com/api/v2'
+export const TRANSAK_API_STAGING_BASE_URL = 'https://api-stg.transak.com'
diff --git a/packages/shared/src/lib/auxiliary/transak/constants/transak-widget-url.constant.ts b/packages/shared/src/lib/auxiliary/transak/constants/transak-widget-url.constant.ts
deleted file mode 100644
index e5649b76a1..0000000000
--- a/packages/shared/src/lib/auxiliary/transak/constants/transak-widget-url.constant.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { AppStage } from '@core/app/enums/app-stage.enum'
-import { TRANSAK_PRODUCTION_WIDGET_URL, TRANSAK_STAGING_WIDGET_URL } from '.'
-
-export const TRANSAK_WIDGET_URL =
-    process.env.STAGE === AppStage.PROD ? TRANSAK_PRODUCTION_WIDGET_URL : TRANSAK_STAGING_WIDGET_URL
diff --git a/packages/shared/src/lib/auxiliary/transak/enums/transak-api-endpoint.enum.ts b/packages/shared/src/lib/auxiliary/transak/enums/transak-api-endpoint.enum.ts
index 96e150b901..59dba76340 100644
--- a/packages/shared/src/lib/auxiliary/transak/enums/transak-api-endpoint.enum.ts
+++ b/packages/shared/src/lib/auxiliary/transak/enums/transak-api-endpoint.enum.ts
@@ -1,4 +1,5 @@
 export enum TransakApiEndpoint {
-    CryptoCurrencies = 'currencies/crypto-currencies',
-    FiatCurrencies = 'currencies/fiat-currencies',
+    CryptoCurrencies = 'api/v2/currencies/crypto-currencies',
+    FiatCurrencies = 'fiat/public/v1/currencies/fiat-currencies',
+    Price = 'api/v1/pricing/public/quotes',
 }
diff --git a/packages/shared/src/lib/auxiliary/transak/enums/transak-connection-status.enum.ts b/packages/shared/src/lib/auxiliary/transak/enums/transak-connection-status.enum.ts
index 40cfd529c9..30d50e7289 100644
--- a/packages/shared/src/lib/auxiliary/transak/enums/transak-connection-status.enum.ts
+++ b/packages/shared/src/lib/auxiliary/transak/enums/transak-connection-status.enum.ts
@@ -1,5 +1,6 @@
 export enum TransakConnectionStatus {
     Connected = 'connected',
     Redirected = 'redirected',
+    Waiting = 'waiting',
     Disconnected = 'disconnected',
 }
diff --git a/packages/shared/src/lib/auxiliary/transak/enums/transak-payment-option.enum.ts b/packages/shared/src/lib/auxiliary/transak/enums/transak-payment-option.enum.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/shared/src/lib/auxiliary/transak/index.ts b/packages/shared/src/lib/auxiliary/transak/index.ts
index 6921285864..1cc1000877 100644
--- a/packages/shared/src/lib/auxiliary/transak/index.ts
+++ b/packages/shared/src/lib/auxiliary/transak/index.ts
@@ -1,2 +1,7 @@
+export * from './actions'
+export * from './apis'
 export * from './constants'
 export * from './enums'
+export * from './interfaces'
+export * from './stores'
+export * from './utils'
diff --git a/packages/shared/src/lib/auxiliary/transak/interfaces/index.ts b/packages/shared/src/lib/auxiliary/transak/interfaces/index.ts
index f082000607..6f86828a8c 100644
--- a/packages/shared/src/lib/auxiliary/transak/interfaces/index.ts
+++ b/packages/shared/src/lib/auxiliary/transak/interfaces/index.ts
@@ -1,2 +1,4 @@
 export * from './transak-api-crypto-currencies-response.interface'
 export * from './transak-api-fiat-currencies-response.interface'
+export * from './transak-api-price-params.interface'
+export * from './transak-api-price-response.interface'
diff --git a/packages/shared/src/lib/auxiliary/transak/interfaces/transak-api-crypto-currencies-response.interface.ts b/packages/shared/src/lib/auxiliary/transak/interfaces/transak-api-crypto-currencies-response.interface.ts
index 744ff7f655..9d7673933c 100644
--- a/packages/shared/src/lib/auxiliary/transak/interfaces/transak-api-crypto-currencies-response.interface.ts
+++ b/packages/shared/src/lib/auxiliary/transak/interfaces/transak-api-crypto-currencies-response.interface.ts
@@ -19,7 +19,7 @@ export interface ITransakApiCryptoCurrenciesResponseItem {
     isIgnorePriceVerification: boolean
     image_bk?: ITransakCryptoCurrencyImage
     kycCountriesNotSupported: string[]
-    network: { name: string; fiatCurrenciesNotSupported: string[]; chainId?: string }
+    network: { name: string; fiatCurrenciesNotSupported: string[]; chainId?: string | null }
     uniqueId: string
     tokenType: string
     isPayInAllowed: boolean
diff --git a/packages/shared/src/lib/auxiliary/transak/interfaces/transak-api-price-params.interface.ts b/packages/shared/src/lib/auxiliary/transak/interfaces/transak-api-price-params.interface.ts
new file mode 100644
index 0000000000..135aa2825c
--- /dev/null
+++ b/packages/shared/src/lib/auxiliary/transak/interfaces/transak-api-price-params.interface.ts
@@ -0,0 +1,10 @@
+import { FiatCurrency } from '@core/market/enums'
+
+export interface ITransakApiPriceParams {
+    fiatCurrency: keyof typeof FiatCurrency
+    cryptoCurrency: string
+    isBuyOrSell: 'BUY' | 'SELL'
+    networkName: string
+    paymentMethod: string
+    fiatAmount: number
+}
diff --git a/packages/shared/src/lib/auxiliary/transak/interfaces/transak-api-price-response.interface.ts b/packages/shared/src/lib/auxiliary/transak/interfaces/transak-api-price-response.interface.ts
new file mode 100644
index 0000000000..b3e04f36f1
--- /dev/null
+++ b/packages/shared/src/lib/auxiliary/transak/interfaces/transak-api-price-response.interface.ts
@@ -0,0 +1,30 @@
+interface ITransakApiPriceResponseFeeBreakdown {
+    name: string
+    value: number
+    id: string
+    ids: string[]
+}
+
+interface ITransakApiPriceResponseContent {
+    quoteId: string
+    conversionPrice: number
+    marketConversionPrice: number
+    slippage: number
+    fiatCurrency: string
+    cryptoCurrency: string
+    paymentMethod: string
+    fiatAmount: number
+    cryptoAmount: number
+    isBuyOrSell: 'BUY' | 'SELL'
+    network: string
+    feeDecimal: number
+    totalFee: number
+    feeBreakdown: ITransakApiPriceResponseFeeBreakdown[]
+    nonce: number
+    cryptoLiquidityProvider: string
+    notes: string[]
+}
+
+export interface ITransakApiPriceResponse {
+    response: ITransakApiPriceResponseContent
+}
diff --git a/packages/shared/src/lib/auxiliary/transak/stores/index.ts b/packages/shared/src/lib/auxiliary/transak/stores/index.ts
new file mode 100644
index 0000000000..20bd985aac
--- /dev/null
+++ b/packages/shared/src/lib/auxiliary/transak/stores/index.ts
@@ -0,0 +1,3 @@
+export * from './selected-exchange-crypto-currency.store'
+export * from './transak-crypto-currencies.store'
+export * from './transak-fiat-currencies.store'
diff --git a/packages/shared/src/lib/auxiliary/transak/stores/selected-exchange-crypto-currency.store.ts b/packages/shared/src/lib/auxiliary/transak/stores/selected-exchange-crypto-currency.store.ts
new file mode 100644
index 0000000000..376f5707cb
--- /dev/null
+++ b/packages/shared/src/lib/auxiliary/transak/stores/selected-exchange-crypto-currency.store.ts
@@ -0,0 +1,4 @@
+import { writable, Writable } from 'svelte/store'
+import { TransakCryptoCurrency } from './transak-crypto-currencies.store'
+
+export const selectedExchangeCryptoCurrency: Writable<TransakCryptoCurrency | undefined> = writable(undefined)
diff --git a/packages/shared/src/lib/auxiliary/transak/stores/transak-crypto-currencies.store.ts b/packages/shared/src/lib/auxiliary/transak/stores/transak-crypto-currencies.store.ts
new file mode 100644
index 0000000000..6eeb606bfe
--- /dev/null
+++ b/packages/shared/src/lib/auxiliary/transak/stores/transak-crypto-currencies.store.ts
@@ -0,0 +1,13 @@
+import { Network } from '@core/network'
+import { Writable, writable } from 'svelte/store'
+
+export type TransakCryptoCurrency = {
+    name: string
+    symbol: string
+    image: { thumb: string; small: string; large: string }
+    network: Network
+    transakNetworkName: string
+    decimals: number
+}
+
+export const transakCryptoCurrencies: Writable<TransakCryptoCurrency[] | undefined> = writable(undefined)
diff --git a/packages/shared/src/lib/auxiliary/transak/stores/transak-fiat-currencies.store.ts b/packages/shared/src/lib/auxiliary/transak/stores/transak-fiat-currencies.store.ts
new file mode 100644
index 0000000000..d7ca0b2205
--- /dev/null
+++ b/packages/shared/src/lib/auxiliary/transak/stores/transak-fiat-currencies.store.ts
@@ -0,0 +1,18 @@
+import { FiatCurrency } from '@core/market'
+import { Writable, writable } from 'svelte/store'
+
+export interface TransakFiatCurrency {
+    paymentOptions: {
+        id: string
+        name: string
+        minAmount: number
+        maxAmount: number
+        disabled?: boolean
+    }[]
+}
+
+export type TransakFiatCurrencies = {
+    [key in keyof typeof FiatCurrency]: TransakFiatCurrency
+}
+
+export const transakFiatCurrencies: Writable<TransakFiatCurrencies | undefined> = writable(undefined)
diff --git a/packages/shared/src/lib/auxiliary/transak/utils/getTransakApiUrl.ts b/packages/shared/src/lib/auxiliary/transak/utils/getTransakApiUrl.ts
new file mode 100644
index 0000000000..be69f5ac4e
--- /dev/null
+++ b/packages/shared/src/lib/auxiliary/transak/utils/getTransakApiUrl.ts
@@ -0,0 +1,11 @@
+import { SupportedNetworkId } from '@core/network'
+import { activeProfile } from '@core/profile/stores'
+import { get } from 'svelte/store'
+import { TRANSAK_API_PRODUCTION_BASE_URL, TRANSAK_API_STAGING_BASE_URL } from '../constants'
+
+export function getTransakApiUrl(): string {
+    const currentNetworkId = get(activeProfile)?.network?.id
+    const isTestnet = [SupportedNetworkId.IotaTestnet, SupportedNetworkId.Testnet].includes(currentNetworkId)
+
+    return isTestnet ? TRANSAK_API_STAGING_BASE_URL : TRANSAK_API_PRODUCTION_BASE_URL
+}
diff --git a/packages/shared/src/lib/auxiliary/transak/utils/getTransakWidgetUrl.ts b/packages/shared/src/lib/auxiliary/transak/utils/getTransakWidgetUrl.ts
new file mode 100644
index 0000000000..54c991f88d
--- /dev/null
+++ b/packages/shared/src/lib/auxiliary/transak/utils/getTransakWidgetUrl.ts
@@ -0,0 +1,12 @@
+import { NetworkId, SupportedNetworkId } from '@core/network'
+import { TRANSAK_PRODUCTION_WIDGET_URL, TRANSAK_STAGING_WIDGET_URL } from '../constants'
+
+export function getTransakWidgetUrl(networkId: NetworkId): string {
+    switch (networkId) {
+        case SupportedNetworkId.Iota:
+        case SupportedNetworkId.Shimmer:
+            return TRANSAK_PRODUCTION_WIDGET_URL
+        default:
+            return TRANSAK_STAGING_WIDGET_URL
+    }
+}
diff --git a/packages/shared/src/lib/auxiliary/transak/utils/index.ts b/packages/shared/src/lib/auxiliary/transak/utils/index.ts
new file mode 100644
index 0000000000..b3422ae8da
--- /dev/null
+++ b/packages/shared/src/lib/auxiliary/transak/utils/index.ts
@@ -0,0 +1,2 @@
+export * from './getTransakApiUrl'
+export * from './getTransakWidgetUrl'
diff --git a/packages/shared/src/lib/core/app/interfaces/transak-window-data.interface.ts b/packages/shared/src/lib/core/app/interfaces/transak-window-data.interface.ts
index 858cf83e7d..4e0a66a791 100644
--- a/packages/shared/src/lib/core/app/interfaces/transak-window-data.interface.ts
+++ b/packages/shared/src/lib/core/app/interfaces/transak-window-data.interface.ts
@@ -1,8 +1,12 @@
-import { MarketCurrency } from '@core/market/types'
+import { FiatCurrency } from '@core/market/enums'
 
 export interface ITransakWindowData {
-    currency: MarketCurrency
+    currency: keyof typeof FiatCurrency
     address: string
     service: 'BUY' | 'SELL'
     amount: number
+    paymentMethod: string
+    networkName: string
+    cryptoCurrencySymbol: string
+    environment: 'PRODUCTION' | 'STAGING'
 }
diff --git a/packages/shared/src/lib/core/market/actions/getMarketPriceForToken.ts b/packages/shared/src/lib/core/market/actions/getMarketPriceForToken.ts
index 7266ed7d43..242c4d8816 100644
--- a/packages/shared/src/lib/core/market/actions/getMarketPriceForToken.ts
+++ b/packages/shared/src/lib/core/market/actions/getMarketPriceForToken.ts
@@ -2,8 +2,10 @@ import { activeProfile } from '@core/profile/stores'
 import { ITokenWithBalance } from '@core/token/interfaces'
 import { get } from 'svelte/store'
 
-export function getMarketPriceForToken(token: ITokenWithBalance): string | undefined {
-    const marketCurrency = get(activeProfile)?.settings?.marketCurrency
+export function getMarketPriceForToken(
+    token: ITokenWithBalance,
+    marketCurrency = get(activeProfile)?.settings?.marketCurrency
+): string | undefined {
     const marketPrice = token?.marketPrices?.[marketCurrency]
     return marketPrice ? String(marketPrice) : undefined
 }
diff --git a/packages/shared/src/lib/core/market/actions/getTokenValueFromFiatAmount.ts b/packages/shared/src/lib/core/market/actions/getTokenValueFromFiatAmount.ts
new file mode 100644
index 0000000000..b4b84aa6d5
--- /dev/null
+++ b/packages/shared/src/lib/core/market/actions/getTokenValueFromFiatAmount.ts
@@ -0,0 +1,29 @@
+import { ITokenWithBalance } from '@core/token/interfaces'
+import { getMarketPriceForToken } from './getMarketPriceForToken'
+import { MarketCurrency } from '../types'
+
+export function getTokenValueFromFiatAmount(
+    fiatValue: string | undefined,
+    token: ITokenWithBalance,
+    marketCurrency?: MarketCurrency
+): bigint | undefined {
+    if (fiatValue === undefined) return undefined
+
+    const marketPrice = getMarketPriceForToken(token, marketCurrency)
+    if (marketPrice === undefined) return undefined
+
+    try {
+        const fiatValueNumber = parseFloat(fiatValue)
+        if (isNaN(fiatValueNumber)) return undefined
+
+        const tokenDecimals = token?.metadata?.decimals || 0
+        const marketPriceNumber = parseFloat(marketPrice)
+        if (isNaN(marketPriceNumber)) return undefined
+
+        // Calculate the token amount: fiatValue / marketPrice * 10^tokenDecimals
+        const tokenAmount = (fiatValueNumber / marketPriceNumber) * Math.pow(10, tokenDecimals)
+        return BigInt(Math.floor(tokenAmount))
+    } catch {
+        return undefined
+    }
+}
diff --git a/packages/shared/src/lib/core/market/actions/index.ts b/packages/shared/src/lib/core/market/actions/index.ts
index d58adb887c..aa269eba07 100644
--- a/packages/shared/src/lib/core/market/actions/index.ts
+++ b/packages/shared/src/lib/core/market/actions/index.ts
@@ -2,4 +2,5 @@ export * from './getAndUpdateMarketPrices'
 export * from './getAndUpdateTokensMetadataFromCoinGecko'
 export * from './getFiatValueFromTokenAmount'
 export * from './getMarketPriceForToken'
+export * from './getTokenValueFromFiatAmount'
 export * from './market-prices-polling'
diff --git a/packages/shared/src/lib/features/interfaces/feature-flag.interface.ts b/packages/shared/src/lib/features/interfaces/feature-flag.interface.ts
index b09ce73231..b0d6a50e77 100644
--- a/packages/shared/src/lib/features/interfaces/feature-flag.interface.ts
+++ b/packages/shared/src/lib/features/interfaces/feature-flag.interface.ts
@@ -1,4 +1,5 @@
 export interface IFeatureFlag {
     enabled: boolean
     hidden?: boolean
+    sell?: IFeatureFlag
 }
diff --git a/packages/shared/src/locales/en.json b/packages/shared/src/locales/en.json
index f0cf5c602e..4e4330148e 100644
--- a/packages/shared/src/locales/en.json
+++ b/packages/shared/src/locales/en.json
@@ -820,11 +820,7 @@
             }
         },
         "buySell": {
-            "info": {
-                "receive": "Your selected account will receive tokens directly from Transak once your payment method has been authorised.",
-                "multipleAccounts": "If you have multiple accounts, you can switch with the account selector dropdown prior to purchase.",
-                "changingAccounts": "Changing accounts will reset all information."
-            },
+            "title": "Buy and Sell",
             "tooltip": {
                 "connected": "connected securely",
                 "redirected": "redirected, be careful!",
@@ -833,6 +829,46 @@
             "error": {
                 "title": "Transak could not be loaded",
                 "description": "Please restart the app, if the issue persists please ask for support in our Discord server"
+            },
+            "tabs": {
+                "buy": "Buy tokens",
+                "sell": "Sell tokens"
+            },
+            "quotations": {
+                "title": "Quotations",
+                "description": "How would you like to buy your crypto?",
+                "pill": {
+                    "newQuotes": "New quotes in {time}",
+                    "fetchingQuotes": "Fetching quotes",
+                    "noQuotes": "No quotes"
+                },
+                "emptyTitle": "No quotes available",
+                "emptyDescription": "Please select other options and try again",
+                "button": {
+                    "selected": "Continue with {provider}",
+                    "unselected": "No quote selected"
+                }
+            },
+            "paymentOptions": {
+                "credit_debit_card": "Card Payment",
+                "apple_pay": "Apple Pay",
+                "google_pay": "Google Pay",
+                "pm_cash_app": "Cash App",
+                "pm_us_wire_bank_transfer": "Wire Transfer",
+                "gbp_bank_transfer": "Instant Transfer",
+                "pm_open_banking": "Open Banking",
+                "inr_bank_transfer": "IMPS",
+                "inr_upi": "UPI",
+                "sepa_bank_transfer": "SEPA Transfer",
+                "pm_astropay": "AstroPay",
+                "pm_pix": "Pix",
+                "pm_gcash": "GCash",
+                "pm_paymaya": "Maya",
+                "pm_bpi": "BPI",
+                "pm_ubp": "Union Bank",
+                "pm_grabpay": "GrabPay",
+                "pm_shopeepay": "ShopeePay",
+                "pm_pse": "PSE"
             }
         }
     },
@@ -1780,6 +1816,7 @@
         "enabled": "Enabled",
         "disabled": "Disabled",
         "networkSettings": "Network settings",
+        "waitingConnection": "Waiting connection",
         "unsupportedVersion": "Unsupported version"
     },
     "filters":{
@@ -2232,6 +2269,10 @@
         },
         "token": {
             "missingMetadata": "The token metadata is missing."
+        },
+        "buySell": {
+            "minAmount": "The minimum amount is {amount}",
+            "maxAmount": "The maximum amount is {amount}"
         }
     },
     "warning": {
@@ -2308,7 +2349,7 @@
         "collectibles": "Collectibles",
         "governance": "Governance",
         "campaigns": "Campaigns",
-        "buySell": "Buy IOTA",
+        "buySell": "Buy / Sell",
         "developer": "Developer",
         "tokens": "Tokens",
         "settings": "Settings",
diff --git a/yarn.lock b/yarn.lock
index 7379ca46c1..bbb7c2a21d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -343,10 +343,10 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
-"@bloomwalletio/ui@0.21.8":
-  version "0.21.8"
-  resolved "https://npm.pkg.github.com/download/@bloomwalletio/ui/0.21.8/035a7b91ac561a9303996dcf33338424d59da548#035a7b91ac561a9303996dcf33338424d59da548"
-  integrity sha512-qfq0kohj89t2OfEpJtZlB80mV/gyz2/jNm7j0L+OVedDGJ7J4Qy0rJNkyo0IT4f2W/GN8R28/k/gjAQdjco1OA==
+"@bloomwalletio/ui@0.21.10":
+  version "0.21.10"
+  resolved "https://npm.pkg.github.com/download/@bloomwalletio/ui/0.21.10/44e5f2c482c58afb570ea8abe125f3f119e00da5#44e5f2c482c58afb570ea8abe125f3f119e00da5"
+  integrity sha512-3177JmjcVIaw2pv12tVU8XvxXJvNGmYYl/X7RWXPD4uOtCFbxPXCG+j+6eBCz4ttf1U2piUf6y9wE02x3SZhFQ==
   dependencies:
     "@floating-ui/dom" "1.4.3"
     "@popperjs/core" "2.11.8"