diff --git a/apps/core/package.json b/apps/core/package.json
index fd24dd7be3d..0a8cd7acfeb 100644
--- a/apps/core/package.json
+++ b/apps/core/package.json
@@ -26,12 +26,16 @@
         "@amplitude/analytics-types": "^0.20.0",
         "@growthbook/growthbook-react": "^1.0.0",
         "@hookform/resolvers": "^3.9.0",
+        "@iota/apps-ui-kit": "workspace:*",
         "@iota/dapp-kit": "workspace:*",
         "@iota/iota-sdk": "workspace:*",
         "@iota/kiosk": "workspace:*",
+        "@iota/ui-icons": "workspace:*",
         "@sentry/react": "^7.59.2",
         "@tanstack/react-query": "^5.50.1",
         "bignumber.js": "^9.1.1",
+        "clsx": "^2.1.1",
+        "formik": "^2.4.2",
         "qrcode.react": "^4.0.1",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
diff --git a/apps/core/src/components/Inputs/AddressInput.tsx b/apps/core/src/components/Inputs/AddressInput.tsx
new file mode 100644
index 00000000000..63920a9afe0
--- /dev/null
+++ b/apps/core/src/components/Inputs/AddressInput.tsx
@@ -0,0 +1,67 @@
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { Input, InputType } from '@iota/apps-ui-kit';
+import { Close } from '@iota/ui-icons';
+import { useIotaAddressValidation } from '../../hooks';
+import React, { useCallback } from 'react';
+import { useField, useFormikContext } from 'formik';
+
+export interface AddressInputProps {
+    name: string;
+    disabled?: boolean;
+    placeholder?: string;
+    label?: string;
+}
+
+export function AddressInput({
+    name,
+    disabled,
+    placeholder = '0x...',
+    label = 'Enter Recipient Address',
+}: AddressInputProps) {
+    const { validateField } = useFormikContext();
+    const [field, meta, helpers] = useField<string>(name);
+    const iotaAddressValidation = useIotaAddressValidation();
+
+    const formattedValue = iotaAddressValidation.cast(field.value);
+
+    const handleOnChange = useCallback(
+        async (e: React.ChangeEvent<HTMLInputElement>) => {
+            const address = e.currentTarget.value;
+            await helpers.setValue(iotaAddressValidation.cast(address));
+            validateField(name);
+        },
+        [name, iotaAddressValidation],
+    );
+
+    const clearAddress = () => {
+        helpers.setValue('');
+    };
+
+    return (
+        <Input
+            type={InputType.Text}
+            disabled={disabled}
+            placeholder={placeholder}
+            value={formattedValue}
+            name={field.name}
+            onBlur={field.onBlur}
+            label={label}
+            onChange={handleOnChange}
+            errorMessage={meta.error}
+            trailingElement={
+                formattedValue ? (
+                    <button
+                        onClick={clearAddress}
+                        type="button"
+                        className="flex items-center justify-center"
+                    >
+                        <Close />
+                    </button>
+                ) : undefined
+            }
+        />
+    );
+}
diff --git a/apps/core/src/components/Inputs/SendTokenFormInput.tsx b/apps/core/src/components/Inputs/SendTokenFormInput.tsx
new file mode 100644
index 00000000000..b0fffbc2ea3
--- /dev/null
+++ b/apps/core/src/components/Inputs/SendTokenFormInput.tsx
@@ -0,0 +1,80 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { ButtonPill, Input, InputType } from '@iota/apps-ui-kit';
+import { CoinStruct } from '@iota/iota-sdk/client';
+import { useGasBudgetEstimation } from '../../hooks';
+import { useEffect } from 'react';
+import { useField, useFormikContext } from 'formik';
+import { TokenForm } from '../../forms';
+
+export interface SendTokenInputProps {
+    coins: CoinStruct[];
+    symbol: string;
+    coinDecimals: number;
+    activeAddress: string;
+    to: string;
+    onActionClick: () => Promise<void>;
+    isMaxActionDisabled?: boolean;
+    name: string;
+}
+
+export function SendTokenFormInput({
+    coins,
+    to,
+    symbol,
+    coinDecimals,
+    activeAddress,
+    onActionClick,
+    isMaxActionDisabled,
+    name,
+}: SendTokenInputProps) {
+    const { values, setFieldValue, isSubmitting, validateField } = useFormikContext<TokenForm>();
+    const gasBudgetEstimation = useGasBudgetEstimation({
+        coinDecimals,
+        coins: coins ?? [],
+        activeAddress,
+        to: to,
+        amount: values.amount,
+        isPayAllIota: values.isPayAllIota,
+    });
+
+    const [field, meta, helpers] = useField<string>(name);
+    const errorMessage = meta.error;
+    const isActionButtonDisabled = isSubmitting || isMaxActionDisabled;
+
+    const renderAction = () => (
+        <ButtonPill disabled={isActionButtonDisabled} onClick={onActionClick}>
+            Max
+        </ButtonPill>
+    );
+
+    // gasBudgetEstimation should change when the amount above changes
+    useEffect(() => {
+        setFieldValue('gasBudgetEst', gasBudgetEstimation, false);
+    }, [gasBudgetEstimation, setFieldValue, values.amount]);
+
+    return (
+        <Input
+            type={InputType.NumericFormat}
+            name={field.name}
+            onBlur={field.onBlur}
+            value={field.value}
+            caption="Est. Gas Fees:"
+            placeholder="0.00"
+            label="Send Amount"
+            suffix={` ${symbol}`}
+            prefix={values.isPayAllIota ? '~ ' : undefined}
+            allowNegative={false}
+            errorMessage={errorMessage}
+            amountCounter={!errorMessage ? (coins ? gasBudgetEstimation : '--') : undefined}
+            trailingElement={renderAction()}
+            decimalScale={coinDecimals ? undefined : 0}
+            thousandSeparator
+            onValueChange={async (values) => {
+                await helpers.setValue(values.value);
+                validateField(name);
+            }}
+        />
+    );
+}
diff --git a/apps/core/src/components/Inputs/index.ts b/apps/core/src/components/Inputs/index.ts
new file mode 100644
index 00000000000..5ab7c849a28
--- /dev/null
+++ b/apps/core/src/components/Inputs/index.ts
@@ -0,0 +1,5 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './AddressInput';
+export * from './SendTokenFormInput';
diff --git a/apps/wallet/src/ui/app/components/coin-icon/index.tsx b/apps/core/src/components/coin/CoinIcon.tsx
similarity index 87%
rename from apps/wallet/src/ui/app/components/coin-icon/index.tsx
rename to apps/core/src/components/coin/CoinIcon.tsx
index 5214a1e7420..77dd5e2a43c 100644
--- a/apps/wallet/src/ui/app/components/coin-icon/index.tsx
+++ b/apps/core/src/components/coin/CoinIcon.tsx
@@ -2,10 +2,11 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { ImageIcon, ImageIconSize } from '_app/shared/image-icon';
-import { useCoinMetadata } from '@iota/core';
-import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
+import React from 'react';
+import { useCoinMetadata } from '../../hooks';
 import { IotaLogoMark } from '@iota/ui-icons';
+import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
+import { ImageIcon, ImageIconSize } from '../icon';
 import cx from 'clsx';
 
 interface NonIotaCoinProps {
@@ -28,7 +29,6 @@ function NonIotaCoin({ coinType, size = ImageIconSize.Full, rounded }: NonIotaCo
         </div>
     );
 }
-
 export interface CoinIconProps {
     coinType: string;
     size?: ImageIconSize;
@@ -37,7 +37,7 @@ export interface CoinIconProps {
 
 export function CoinIcon({ coinType, size = ImageIconSize.Full, rounded }: CoinIconProps) {
     return coinType === IOTA_TYPE_ARG ? (
-        <div className={cx(size)}>
+        <div className={cx(size, 'text-neutral-10')}>
             <IotaLogoMark className="h-full w-full" />
         </div>
     ) : (
diff --git a/apps/core/src/components/coin/CoinSelector.tsx b/apps/core/src/components/coin/CoinSelector.tsx
new file mode 100644
index 00000000000..254b0180982
--- /dev/null
+++ b/apps/core/src/components/coin/CoinSelector.tsx
@@ -0,0 +1,61 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
+import { Select, SelectOption } from '@iota/apps-ui-kit';
+import { CoinBalance } from '@iota/iota-sdk/client';
+import { useFormatCoin } from '../../hooks';
+import { CoinIcon } from './CoinIcon';
+import { ImageIconSize } from '../icon';
+
+interface CoinSelectorProps {
+    activeCoinType: string;
+    coins: CoinBalance[];
+    onClick: (coinType: string) => void;
+}
+
+export function CoinSelector({
+    activeCoinType = IOTA_TYPE_ARG,
+    coins,
+    onClick,
+}: CoinSelectorProps) {
+    const activeCoin = coins?.find(({ coinType }) => coinType === activeCoinType) ?? coins?.[0];
+    const initialValue = activeCoin?.coinType;
+    const coinsOptions: SelectOption[] =
+        coins?.map((coin) => ({
+            id: coin.coinType,
+            renderLabel: () => <CoinSelectOption coin={coin} />,
+        })) || [];
+
+    return (
+        <Select
+            label="Select Coins"
+            value={initialValue}
+            options={coinsOptions}
+            onValueChange={(coinType) => {
+                onClick(coinType);
+            }}
+        />
+    );
+}
+
+function CoinSelectOption({ coin: { coinType, totalBalance } }: { coin: CoinBalance }) {
+    const [formatted, symbol, { data: coinMeta }] = useFormatCoin(totalBalance, coinType);
+    const isIota = coinType === IOTA_TYPE_ARG;
+
+    return (
+        <div className="flex w-full flex-row items-center justify-between">
+            <div className="flex flex-row items-center gap-x-md">
+                <div className="flex h-6 w-6 items-center justify-center">
+                    <CoinIcon size={ImageIconSize.Small} coinType={coinType} rounded />
+                </div>
+                <span className="text-body-lg text-neutral-10">
+                    {isIota ? (coinMeta?.name || '').toUpperCase() : coinMeta?.name || symbol}
+                </span>
+            </div>
+            <span className="text-label-lg text-neutral-60">
+                {formatted} {symbol}
+            </span>
+        </div>
+    );
+}
diff --git a/apps/wallet-dashboard/components/Popup/Popups/SendCoinPopup/index.ts b/apps/core/src/components/coin/index.ts
similarity index 55%
rename from apps/wallet-dashboard/components/Popup/Popups/SendCoinPopup/index.ts
rename to apps/core/src/components/coin/index.ts
index 50cde552014..7eedc42ec44 100644
--- a/apps/wallet-dashboard/components/Popup/Popups/SendCoinPopup/index.ts
+++ b/apps/core/src/components/coin/index.ts
@@ -1,4 +1,5 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-export { default as SendCoinPopup } from './SendCoinPopup';
+export * from './CoinIcon';
+export * from './CoinSelector';
diff --git a/apps/wallet-dashboard/components/ImageIcon.tsx b/apps/core/src/components/icon/ImageIcon.tsx
similarity index 61%
rename from apps/wallet-dashboard/components/ImageIcon.tsx
rename to apps/core/src/components/icon/ImageIcon.tsx
index 06939516971..6b58dbf715a 100644
--- a/apps/wallet-dashboard/components/ImageIcon.tsx
+++ b/apps/core/src/components/icon/ImageIcon.tsx
@@ -1,8 +1,7 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { useState } from 'react';
-import Image from 'next/image';
+import React, { useState } from 'react';
 import cn from 'clsx';
 
 export enum ImageIconSize {
@@ -12,67 +11,60 @@ export enum ImageIconSize {
     Full = 'w-full h-full',
 }
 
+export interface ImageIconProps {
+    src: string | null | undefined;
+    label: string;
+    fallback: string;
+    alt?: string;
+    rounded?: boolean;
+    size?: ImageIconSize;
+}
+
 interface FallBackAvatarProps {
-    text: string;
+    str: string;
     rounded?: boolean;
     size?: ImageIconSize;
 }
-function FallBackAvatar({ text, rounded, size = ImageIconSize.Large }: FallBackAvatarProps) {
-    const textSize = (() => {
+
+function FallBackAvatar({ str, rounded, size = ImageIconSize.Large }: FallBackAvatarProps) {
+    function generateTextSize(size: ImageIconSize) {
         switch (size) {
             case ImageIconSize.Small:
                 return 'text-label-sm';
             case ImageIconSize.Medium:
                 return 'text-label-md';
             case ImageIconSize.Large:
-                return 'text-title-md';
-            case ImageIconSize.Full:
                 return 'text-title-lg';
+            case ImageIconSize.Full:
+                return 'text-display-lg';
         }
-    })();
-
+    }
     return (
         <div
             className={cn(
-                'flex h-full w-full items-center justify-center bg-neutral-96 bg-gradient-to-r capitalize dark:bg-neutral-20',
-                { 'rounded-full': rounded },
-                textSize,
+                'flex items-center justify-center bg-neutral-96 bg-gradient-to-r capitalize text-neutral-10 dark:bg-neutral-92 dark:text-primary-100',
+                { 'rounded-full': rounded, 'rounded-lg': !rounded },
+                size,
+                generateTextSize(size),
             )}
         >
-            {text.slice(0, 2)}
+            {str?.slice(0, 2)}
         </div>
     );
 }
-export interface ImageIconProps {
-    src: string | null | undefined;
-    label: string;
-    fallbackText: string;
-    alt?: string;
-    rounded?: boolean;
-    size?: ImageIconSize;
-}
 
-export function ImageIcon({
-    src,
-    label,
-    alt = label,
-    fallbackText,
-    rounded,
-    size,
-}: ImageIconProps) {
+export function ImageIcon({ src, label, alt = label, fallback, rounded, size }: ImageIconProps) {
     const [error, setError] = useState(false);
     return (
         <div role="img" aria-label={label} className={size}>
             {error || !src ? (
-                <FallBackAvatar rounded={rounded} text={fallbackText} size={size} />
+                <FallBackAvatar rounded={rounded} str={fallback} size={size} />
             ) : (
-                <Image
+                <img
                     src={src}
                     alt={alt}
                     className="flex h-full w-full items-center justify-center rounded-full object-cover"
                     onError={() => setError(true)}
-                    layout="fill"
-                    objectFit="cover"
                 />
             )}
         </div>
diff --git a/apps/core/src/components/icon/index.ts b/apps/core/src/components/icon/index.ts
new file mode 100644
index 00000000000..3fda2c89887
--- /dev/null
+++ b/apps/core/src/components/icon/index.ts
@@ -0,0 +1,4 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './ImageIcon';
diff --git a/apps/core/src/components/index.ts b/apps/core/src/components/index.ts
index fac843e4062..0a8093eeadb 100644
--- a/apps/core/src/components/index.ts
+++ b/apps/core/src/components/index.ts
@@ -2,4 +2,8 @@
 // SPDX-License-Identifier: Apache-2.0
 
 export * from './KioskClientProvider';
+
+export * from './coin';
+export * from './icon';
+export * from './Inputs';
 export * from './QR';
diff --git a/apps/core/src/forms/index.ts b/apps/core/src/forms/index.ts
new file mode 100644
index 00000000000..220b7ec05d5
--- /dev/null
+++ b/apps/core/src/forms/index.ts
@@ -0,0 +1,4 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './token';
diff --git a/apps/core/src/forms/token.ts b/apps/core/src/forms/token.ts
new file mode 100644
index 00000000000..abad79c1100
--- /dev/null
+++ b/apps/core/src/forms/token.ts
@@ -0,0 +1,9 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export type TokenForm = {
+    amount: string;
+    to: string;
+    isPayAllIota: boolean;
+    gasBudgetEst: string;
+};
diff --git a/apps/core/src/hooks/index.ts b/apps/core/src/hooks/index.ts
index 5a2d85e1243..544c59c8a30 100644
--- a/apps/core/src/hooks/index.ts
+++ b/apps/core/src/hooks/index.ts
@@ -37,6 +37,7 @@ export * from './useUnlockTimelockedObjectsTransaction';
 export * from './useGetAllOwnedObjects';
 export * from './useGetTimelockedStakedObjects';
 export * from './useGetActiveValidatorsInfo';
+export * from './useGasBudgetEstimation';
 export * from './useTransactionData';
 export * from './useGetStakingValidatorDetails';
 export * from './useCursorPagination';
diff --git a/apps/core/src/hooks/useGasBudgetEstimation.ts b/apps/core/src/hooks/useGasBudgetEstimation.ts
new file mode 100644
index 00000000000..5dbe7d2ff1e
--- /dev/null
+++ b/apps/core/src/hooks/useGasBudgetEstimation.ts
@@ -0,0 +1,65 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { useIotaClient } from '@iota/dapp-kit';
+import { CoinStruct } from '@iota/iota-sdk/client';
+import { useQuery } from '@tanstack/react-query';
+import { createTokenTransferTransaction } from '../utils';
+import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
+import { useFormatCoin } from './useFormatCoin';
+import { GAS_SYMBOL } from '../constants';
+
+interface UseGasBudgetEstimationOptions {
+    coinDecimals: number;
+    coins: CoinStruct[];
+    activeAddress: string;
+    to: string;
+    amount: string;
+    isPayAllIota: boolean;
+}
+
+export function useGasBudgetEstimation({
+    coinDecimals,
+    coins,
+    activeAddress,
+    to,
+    amount,
+    isPayAllIota,
+}: UseGasBudgetEstimationOptions) {
+    const client = useIotaClient();
+    const { data: gasBudget } = useQuery({
+        // eslint-disable-next-line @tanstack/query/exhaustive-deps
+        queryKey: [
+            'transaction-gas-budget-estimate',
+            {
+                to,
+                amount,
+                coins,
+                activeAddress,
+                coinDecimals,
+            },
+        ],
+        queryFn: async () => {
+            if (!amount || !to || !coins || !activeAddress) {
+                return null;
+            }
+
+            const tx = createTokenTransferTransaction({
+                to,
+                amount: amount,
+                coinType: IOTA_TYPE_ARG,
+                coinDecimals,
+                isPayAllIota: isPayAllIota,
+                coins,
+            });
+
+            tx.setSender(activeAddress);
+            await tx.build({ client });
+            return tx.getData().gasData.budget;
+        },
+    });
+
+    const [formattedGas] = useFormatCoin(gasBudget, IOTA_TYPE_ARG);
+
+    return formattedGas ? formattedGas + ' ' + GAS_SYMBOL : '--';
+}
diff --git a/apps/core/src/index.ts b/apps/core/src/index.ts
index 5aed649aada..6d113bf483b 100644
--- a/apps/core/src/index.ts
+++ b/apps/core/src/index.ts
@@ -8,3 +8,4 @@ export * from './components';
 export * from './utils';
 export * from './hooks';
 export * from './constants';
+export * from './forms';
diff --git a/apps/wallet/src/shared/validation.ts b/apps/core/src/utils/validation/createTokenValidation.ts
similarity index 96%
rename from apps/wallet/src/shared/validation.ts
rename to apps/core/src/utils/validation/createTokenValidation.ts
index 567968c11c4..fef974c1f49 100644
--- a/apps/wallet/src/shared/validation.ts
+++ b/apps/core/src/utils/validation/createTokenValidation.ts
@@ -2,9 +2,9 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { formatBalance } from '@iota/core';
 import BigNumber from 'bignumber.js';
 import * as Yup from 'yup';
+import { formatBalance } from '../../hooks';
 
 export function createTokenValidation(coinBalance: bigint, coinSymbol: string, decimals: number) {
     return Yup.mixed<BigNumber>()
diff --git a/apps/wallet/src/ui/app/pages/home/transfer-coin/validation.ts b/apps/core/src/utils/validation/createValidationSchemaSendTokenForm.ts
similarity index 52%
rename from apps/wallet/src/ui/app/pages/home/transfer-coin/validation.ts
rename to apps/core/src/utils/validation/createValidationSchemaSendTokenForm.ts
index dbab4e6e602..6880c023b78 100644
--- a/apps/wallet/src/ui/app/pages/home/transfer-coin/validation.ts
+++ b/apps/core/src/utils/validation/createValidationSchemaSendTokenForm.ts
@@ -2,11 +2,13 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { createIotaAddressValidation } from '@iota/core';
-import { createTokenValidation } from '_src/shared/validation';
 import * as Yup from 'yup';
+import { createIotaAddressValidation } from './createIotaAdressValidation';
+import { createTokenValidation } from './createTokenValidation';
 
-export function createValidationSchemaStepOne(...args: Parameters<typeof createTokenValidation>) {
+export function createValidationSchemaSendTokenForm(
+    ...args: Parameters<typeof createTokenValidation>
+) {
     return Yup.object({
         to: createIotaAddressValidation(),
         amount: createTokenValidation(...args),
diff --git a/apps/core/src/utils/validation/index.ts b/apps/core/src/utils/validation/index.ts
index 7618fa24584..29e7b158322 100644
--- a/apps/core/src/utils/validation/index.ts
+++ b/apps/core/src/utils/validation/index.ts
@@ -2,3 +2,5 @@
 // SPDX-License-Identifier: Apache-2.0
 
 export * from './createIotaAdressValidation';
+export * from './createTokenValidation';
+export * from './createValidationSchemaSendTokenForm';
diff --git a/apps/wallet-dashboard/components/Dialogs/SendToken/SendTokenDialog.tsx b/apps/wallet-dashboard/components/Dialogs/SendToken/SendTokenDialog.tsx
new file mode 100644
index 00000000000..71440df5a07
--- /dev/null
+++ b/apps/wallet-dashboard/components/Dialogs/SendToken/SendTokenDialog.tsx
@@ -0,0 +1,121 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import React, { useState } from 'react';
+import { EnterValuesFormView, ReviewValuesFormView } from './views';
+import { CoinBalance } from '@iota/iota-sdk/client';
+import { useSendCoinTransaction, useNotifications } from '@/hooks';
+import { useSignAndExecuteTransaction } from '@iota/dapp-kit';
+import { NotificationType } from '@/stores/notificationStore';
+import { useGetAllCoins } from '@iota/core';
+import { Dialog, DialogBody, DialogContent, DialogPosition, Header } from '@iota/apps-ui-kit';
+import { FormDataValues } from './interfaces';
+import { INITIAL_VALUES } from './constants';
+
+interface SendCoinPopupProps {
+    coin: CoinBalance;
+    activeAddress: string;
+    setOpen: (bool: boolean) => void;
+    open: boolean;
+}
+
+enum FormStep {
+    EnterValues,
+    ReviewValues,
+}
+
+function SendTokenDialogBody({
+    coin,
+    activeAddress,
+    setOpen,
+}: SendCoinPopupProps): React.JSX.Element {
+    const [step, setStep] = useState<FormStep>(FormStep.EnterValues);
+    const [selectedCoin, setSelectedCoin] = useState<CoinBalance>(coin);
+    const [formData, setFormData] = useState<FormDataValues>(INITIAL_VALUES);
+    const { addNotification } = useNotifications();
+
+    const { data: coinsData } = useGetAllCoins(selectedCoin.coinType, activeAddress);
+
+    const {
+        mutateAsync: signAndExecuteTransaction,
+        error,
+        isPending,
+    } = useSignAndExecuteTransaction();
+
+    const { data: transaction } = useSendCoinTransaction(
+        coinsData || [],
+        selectedCoin?.coinType,
+        activeAddress,
+        formData.to,
+        formData.amount,
+        selectedCoin?.totalBalance === formData.amount,
+    );
+
+    function handleTransfer() {
+        if (!transaction) {
+            addNotification('There was an error with the transaction', NotificationType.Error);
+            return;
+        } else {
+            signAndExecuteTransaction({
+                transaction,
+            })
+                .then(() => {
+                    setOpen(false);
+                    addNotification('Transfer transaction has been sent');
+                })
+                .catch(() => {
+                    addNotification('Transfer transaction was not sent', NotificationType.Error);
+                });
+        }
+    }
+
+    function onNext(): void {
+        setStep(FormStep.ReviewValues);
+    }
+
+    function onBack(): void {
+        setStep(FormStep.EnterValues);
+    }
+
+    return (
+        <>
+            <Header
+                title={step === FormStep.EnterValues ? 'Send' : 'Review & Send'}
+                onClose={() => setOpen(false)}
+            />
+            <div className="h-full [&>div]:h-full">
+                <DialogBody>
+                    {step === FormStep.EnterValues && (
+                        <EnterValuesFormView
+                            coin={selectedCoin}
+                            activeAddress={activeAddress}
+                            setSelectedCoin={setSelectedCoin}
+                            onNext={onNext}
+                            setFormData={setFormData}
+                        />
+                    )}
+                    {step === FormStep.ReviewValues && (
+                        <ReviewValuesFormView
+                            formData={formData}
+                            onBack={onBack}
+                            executeTransfer={handleTransfer}
+                            senderAddress={activeAddress}
+                            error={error?.message}
+                            isPending={isPending}
+                        />
+                    )}
+                </DialogBody>
+            </div>
+        </>
+    );
+}
+
+export function SendTokenDialog(props: SendCoinPopupProps): React.JSX.Element {
+    return (
+        <Dialog open={props.open} onOpenChange={props.setOpen}>
+            <DialogContent containerId="overlay-portal-container" position={DialogPosition.Right}>
+                <SendTokenDialogBody {...props} />
+            </DialogContent>
+        </Dialog>
+    );
+}
diff --git a/apps/wallet-dashboard/components/Dialogs/SendToken/constants/index.ts b/apps/wallet-dashboard/components/Dialogs/SendToken/constants/index.ts
new file mode 100644
index 00000000000..319d67de744
--- /dev/null
+++ b/apps/wallet-dashboard/components/Dialogs/SendToken/constants/index.ts
@@ -0,0 +1,11 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { FormDataValues } from '../interfaces';
+
+export const INITIAL_VALUES: FormDataValues = {
+    to: '',
+    amount: '',
+    isPayAllIota: false,
+    gasBudgetEst: '',
+};
diff --git a/apps/wallet-dashboard/components/Dialogs/SendToken/index.ts b/apps/wallet-dashboard/components/Dialogs/SendToken/index.ts
new file mode 100644
index 00000000000..2ba88b33c94
--- /dev/null
+++ b/apps/wallet-dashboard/components/Dialogs/SendToken/index.ts
@@ -0,0 +1,6 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './SendTokenDialog';
+
+export * from './views';
diff --git a/apps/wallet-dashboard/components/Dialogs/SendToken/interfaces/index.ts b/apps/wallet-dashboard/components/Dialogs/SendToken/interfaces/index.ts
new file mode 100644
index 00000000000..06ae882b260
--- /dev/null
+++ b/apps/wallet-dashboard/components/Dialogs/SendToken/interfaces/index.ts
@@ -0,0 +1,8 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+export interface FormDataValues {
+    amount: string;
+    to: string;
+    isPayAllIota: boolean;
+    gasBudgetEst: string;
+}
diff --git a/apps/wallet-dashboard/components/Dialogs/SendToken/views/EnterValuesFormView.tsx b/apps/wallet-dashboard/components/Dialogs/SendToken/views/EnterValuesFormView.tsx
new file mode 100644
index 00000000000..e7aa08c9825
--- /dev/null
+++ b/apps/wallet-dashboard/components/Dialogs/SendToken/views/EnterValuesFormView.tsx
@@ -0,0 +1,271 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { CoinBalance, CoinMetadata, CoinStruct } from '@iota/iota-sdk/client';
+import {
+    AddressInput,
+    CoinFormat,
+    COINS_QUERY_REFETCH_INTERVAL,
+    COINS_QUERY_STALE_TIME,
+    CoinSelector,
+    createValidationSchemaSendTokenForm,
+    filterAndSortTokenBalances,
+    parseAmount,
+    SendTokenFormInput,
+    useCoinMetadata,
+    useFormatCoin,
+    useGetAllCoins,
+} from '@iota/core';
+import {
+    ButtonHtmlType,
+    ButtonType,
+    InfoBox,
+    InfoBoxType,
+    Button,
+    InfoBoxStyle,
+    LoadingIndicator,
+} from '@iota/apps-ui-kit';
+import { useIotaClientQuery } from '@iota/dapp-kit';
+import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
+import { Form, Formik, FormikProps } from 'formik';
+import { Exclamation } from '@iota/ui-icons';
+import { UseQueryResult } from '@tanstack/react-query';
+import { useEffect } from 'react';
+import { FormDataValues } from '../interfaces';
+import { INITIAL_VALUES } from '../constants';
+
+interface EnterValuesFormProps {
+    coin: CoinBalance;
+    activeAddress: string;
+    setFormData: React.Dispatch<React.SetStateAction<FormDataValues>>;
+    setSelectedCoin: React.Dispatch<React.SetStateAction<CoinBalance>>;
+    onNext: () => void;
+}
+
+interface FormInputsProps extends FormikProps<FormDataValues> {
+    coinType: string;
+    coinDecimals: number;
+    coinBalance: bigint;
+    iotaBalance: bigint;
+    formattedTokenBalance: string;
+    symbol: string;
+    activeAddress: string;
+    coins: CoinStruct[];
+    queryResult: UseQueryResult<CoinMetadata | null>;
+}
+
+function totalBalance(coins: CoinStruct[]): bigint {
+    return coins.reduce((partialSum, c) => partialSum + getBalanceFromCoinStruct(c), BigInt(0));
+}
+function getBalanceFromCoinStruct(coin: CoinStruct): bigint {
+    return BigInt(coin.balance);
+}
+
+function FormInputs({
+    isValid,
+    isSubmitting,
+    setFieldValue,
+    values,
+    submitForm,
+    coinType,
+    coinDecimals,
+    coinBalance,
+    iotaBalance,
+    formattedTokenBalance,
+    symbol,
+    activeAddress,
+    coins,
+    queryResult,
+}: FormInputsProps): React.JSX.Element {
+    const newPayIotaAll =
+        parseAmount(values.amount, coinDecimals) === coinBalance && coinType === IOTA_TYPE_ARG;
+
+    const hasEnoughBalance =
+        values.isPayAllIota ||
+        iotaBalance >
+            parseAmount(values.gasBudgetEst, coinDecimals) +
+                parseAmount(coinType === IOTA_TYPE_ARG ? values.amount : '0', coinDecimals);
+
+    async function onMaxTokenButtonClick() {
+        await setFieldValue('amount', formattedTokenBalance);
+    }
+
+    const isMaxActionDisabled =
+        parseAmount(values.amount, coinDecimals) === coinBalance ||
+        queryResult.isPending ||
+        !coinBalance;
+
+    useEffect(() => {
+        if (values.isPayAllIota !== newPayIotaAll) {
+            setFieldValue('isPayAllIota', newPayIotaAll);
+        }
+    }, [values.isPayAllIota, newPayIotaAll, setFieldValue]);
+
+    return (
+        <div className="flex h-full w-full flex-col">
+            <Form autoComplete="off" noValidate className="flex-1">
+                <div className="flex h-full w-full flex-col gap-md">
+                    {!hasEnoughBalance && (
+                        <InfoBox
+                            type={InfoBoxType.Error}
+                            supportingText="Insufficient IOTA to cover transaction"
+                            style={InfoBoxStyle.Elevated}
+                            icon={<Exclamation />}
+                        />
+                    )}
+
+                    <SendTokenFormInput
+                        name="amount"
+                        to={values.to}
+                        symbol={symbol}
+                        coins={coins}
+                        coinDecimals={coinDecimals}
+                        activeAddress={activeAddress}
+                        onActionClick={onMaxTokenButtonClick}
+                        isMaxActionDisabled={isMaxActionDisabled}
+                    />
+                    <AddressInput name="to" placeholder="Enter Address" />
+                </div>
+            </Form>
+
+            <div className="pt-xs">
+                <Button
+                    onClick={submitForm}
+                    htmlType={ButtonHtmlType.Submit}
+                    type={ButtonType.Primary}
+                    disabled={
+                        !isValid || isSubmitting || !hasEnoughBalance || values.gasBudgetEst === ''
+                    }
+                    text="Review"
+                    fullWidth
+                />
+            </div>
+        </div>
+    );
+}
+
+export function EnterValuesFormView({
+    coin,
+    activeAddress,
+    setFormData,
+    setSelectedCoin,
+    onNext,
+}: EnterValuesFormProps): JSX.Element {
+    // Get all coins of the type
+    const { data: coinsData, isPending: coinsIsPending } = useGetAllCoins(
+        coin.coinType,
+        activeAddress,
+    );
+    const { data: iotaCoinsData, isPending: iotaCoinsIsPending } = useGetAllCoins(
+        IOTA_TYPE_ARG,
+        activeAddress,
+    );
+
+    const { data: coinsBalance, isPending: coinsBalanceIsPending } = useIotaClientQuery(
+        'getAllBalances',
+        { owner: activeAddress },
+        {
+            enabled: !!activeAddress,
+            refetchInterval: COINS_QUERY_REFETCH_INTERVAL,
+            staleTime: COINS_QUERY_STALE_TIME,
+            select: filterAndSortTokenBalances,
+        },
+    );
+
+    const iotaCoins = iotaCoinsData;
+    const coins = coinsData;
+    const coinBalance = totalBalance(coins || []);
+    const iotaBalance = totalBalance(iotaCoins || []);
+
+    const [tokenBalance, symbol, queryResult] = useFormatCoin(
+        coinBalance,
+        coin.coinType,
+        CoinFormat.FULL,
+    );
+
+    const coinMetadata = useCoinMetadata(coin.coinType);
+    const coinDecimals = coinMetadata.data?.decimals ?? 0;
+
+    const validationSchemaStepOne = createValidationSchemaSendTokenForm(
+        coinBalance,
+        symbol,
+        coinDecimals,
+    );
+
+    const formattedTokenBalance = tokenBalance.replace(/,/g, '');
+    const initAmountBig = parseAmount('', coinDecimals);
+
+    if (coinsBalanceIsPending || coinsIsPending || iotaCoinsIsPending) {
+        return (
+            <div className="flex h-full w-full items-center justify-center">
+                <LoadingIndicator />
+            </div>
+        );
+    }
+
+    async function handleFormSubmit({ to, amount, isPayAllIota, gasBudgetEst }: FormDataValues) {
+        if (!coins || !iotaCoins) return;
+        const coinsIDs = [...coins]
+            .sort((a, b) => Number(b.balance) - Number(a.balance))
+            .map(({ coinObjectId }) => coinObjectId);
+
+        const formattedAmount = parseAmount(amount, coinDecimals).toString();
+
+        const data = {
+            to,
+            amount: formattedAmount,
+            isPayAllIota,
+            coins,
+            coinIds: coinsIDs,
+            gasBudgetEst,
+        };
+        setFormData(data);
+        onNext();
+    }
+
+    return (
+        <div className="flex h-full w-full flex-col gap-md">
+            <CoinSelector
+                activeCoinType={coin.coinType}
+                coins={coinsBalance ?? []}
+                onClick={(coinType) => {
+                    setFormData(INITIAL_VALUES);
+                    const coin = coinsBalance?.find((coin) => coin.coinType === coinType);
+                    setSelectedCoin(coin!);
+                }}
+            />
+
+            <Formik
+                initialValues={{
+                    amount: '',
+                    to: '',
+                    isPayAllIota:
+                        !!initAmountBig &&
+                        initAmountBig === coinBalance &&
+                        coin.coinType === IOTA_TYPE_ARG,
+                    gasBudgetEst: '',
+                }}
+                validationSchema={validationSchemaStepOne}
+                enableReinitialize
+                validateOnChange={false}
+                validateOnBlur={false}
+                onSubmit={handleFormSubmit}
+            >
+                {(props: FormikProps<FormDataValues>) => (
+                    <FormInputs
+                        {...props}
+                        coinType={coin.coinType}
+                        coinDecimals={coinDecimals}
+                        coinBalance={coinBalance}
+                        iotaBalance={iotaBalance}
+                        formattedTokenBalance={formattedTokenBalance}
+                        symbol={symbol}
+                        activeAddress={activeAddress}
+                        coins={coins ?? []}
+                        queryResult={queryResult}
+                    />
+                )}
+            </Formik>
+        </div>
+    );
+}
diff --git a/apps/wallet-dashboard/components/Popup/Popups/SendCoinPopup/views/ReviewValuesFormView.tsx b/apps/wallet-dashboard/components/Dialogs/SendToken/views/ReviewValuesFormView.tsx
similarity index 79%
rename from apps/wallet-dashboard/components/Popup/Popups/SendCoinPopup/views/ReviewValuesFormView.tsx
rename to apps/wallet-dashboard/components/Dialogs/SendToken/views/ReviewValuesFormView.tsx
index 0732b263cfc..ccec1ab1d72 100644
--- a/apps/wallet-dashboard/components/Popup/Popups/SendCoinPopup/views/ReviewValuesFormView.tsx
+++ b/apps/wallet-dashboard/components/Dialogs/SendToken/views/ReviewValuesFormView.tsx
@@ -1,23 +1,21 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { FormDataValues } from '../SendCoinPopup';
 import { Button } from '@/components';
+import { FormDataValues } from '../interfaces';
 
 interface ReviewValuesFormProps {
     formData: FormDataValues;
     senderAddress: string;
-    gasBudget: string;
     error: string | undefined;
     isPending: boolean;
     executeTransfer: () => void;
     onBack: () => void;
 }
 
-function ReviewValuesFormView({
-    formData: { amount, recipientAddress },
+export function ReviewValuesFormView({
+    formData: { amount, to, gasBudgetEst },
     senderAddress,
-    gasBudget,
     error,
     isPending,
     executeTransfer,
@@ -29,8 +27,8 @@ function ReviewValuesFormView({
             <div className="flex flex-col gap-4">
                 <p>Sending: {amount}</p>
                 <p>From: {senderAddress}</p>
-                <p>To: {recipientAddress}</p>
-                <p>Gas fee: {gasBudget}</p>
+                <p>To: {to}</p>
+                <p>Gas fee: {gasBudgetEst}</p>
             </div>
             {error ? <span className="text-red-700">{error}</span> : null}
             <div className="mt-4 flex justify-around">
@@ -44,4 +42,3 @@ function ReviewValuesFormView({
         </div>
     );
 }
-export default ReviewValuesFormView;
diff --git a/apps/wallet-dashboard/components/Dialogs/SendToken/views/index.ts b/apps/wallet-dashboard/components/Dialogs/SendToken/views/index.ts
new file mode 100644
index 00000000000..bc7f7fd90e7
--- /dev/null
+++ b/apps/wallet-dashboard/components/Dialogs/SendToken/views/index.ts
@@ -0,0 +1,5 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './EnterValuesFormView';
+export * from './ReviewValuesFormView';
diff --git a/apps/wallet-dashboard/components/Dialogs/index.ts b/apps/wallet-dashboard/components/Dialogs/index.ts
index e68e1329243..989b8445e48 100644
--- a/apps/wallet-dashboard/components/Dialogs/index.ts
+++ b/apps/wallet-dashboard/components/Dialogs/index.ts
@@ -1,6 +1,7 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
+export * from './SendToken';
 export * from './ReceiveFundsDialog';
 export * from './Staking';
 export * from './StakeDetails';
diff --git a/apps/wallet-dashboard/components/Dropdown.tsx b/apps/wallet-dashboard/components/Dropdown.tsx
deleted file mode 100644
index 50ac7decf3f..00000000000
--- a/apps/wallet-dashboard/components/Dropdown.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-// Copyright (c) 2024 IOTA Stiftung
-// SPDX-License-Identifier: Apache-2.0
-
-import React from 'react';
-
-interface DropdownProps<T> {
-    options: T[];
-    selectedOption: T | null | undefined;
-    onChange: (selectedOption: T) => void;
-    placeholder?: string;
-    disabled?: boolean;
-    getOptionId: (option: T) => string | number;
-}
-
-function Dropdown<T>({
-    options,
-    selectedOption,
-    onChange,
-    placeholder,
-    disabled = false,
-    getOptionId,
-}: DropdownProps<T>): JSX.Element {
-    function handleSelectionChange(e: React.ChangeEvent<HTMLSelectElement>): void {
-        const selectedKey = e.target.value;
-        const selectedOption = options.find((option) => getOptionId(option) === selectedKey);
-        if (selectedOption) {
-            onChange(selectedOption);
-        }
-    }
-
-    return (
-        <select
-            value={selectedOption ? getOptionId(selectedOption) : ''}
-            onChange={handleSelectionChange}
-            className="px-2 py-3"
-            disabled={disabled}
-        >
-            {placeholder && (
-                <option value="" disabled>
-                    {placeholder}
-                </option>
-            )}
-
-            {options.map((option, index) => (
-                <option key={index} value={getOptionId(option)}>
-                    {getOptionId(option)}
-                </option>
-            ))}
-        </select>
-    );
-}
-
-export default Dropdown;
diff --git a/apps/wallet-dashboard/components/Popup/Popups/SendCoinPopup/SendCoinPopup.tsx b/apps/wallet-dashboard/components/Popup/Popups/SendCoinPopup/SendCoinPopup.tsx
deleted file mode 100644
index c3f917df955..00000000000
--- a/apps/wallet-dashboard/components/Popup/Popups/SendCoinPopup/SendCoinPopup.tsx
+++ /dev/null
@@ -1,129 +0,0 @@
-// Copyright (c) 2024 IOTA Stiftung
-// SPDX-License-Identifier: Apache-2.0
-
-import React, { useState } from 'react';
-import { EnterValuesFormView, ReviewValuesFormView } from './views';
-import { CoinBalance } from '@iota/iota-sdk/client';
-import { useSendCoinTransaction, useNotifications } from '@/hooks';
-import { useSignAndExecuteTransaction } from '@iota/dapp-kit';
-import { NotificationType } from '@/stores/notificationStore';
-import { Dropdown } from '@/components';
-import { useGetAllCoins } from '@iota/core';
-
-export interface FormDataValues {
-    amount: string;
-    recipientAddress: string;
-}
-
-interface SendCoinPopupProps {
-    coin: CoinBalance;
-    senderAddress: string;
-    onClose: () => void;
-    coins: CoinBalance[];
-}
-
-enum FormStep {
-    EnterValues,
-    ReviewValues,
-}
-
-function SendCoinPopup({
-    coin,
-    senderAddress,
-    onClose,
-    coins,
-}: SendCoinPopupProps): React.JSX.Element {
-    const [step, setStep] = useState<FormStep>(FormStep.EnterValues);
-    const [selectedCoin, setCoin] = useState<CoinBalance>(coin);
-    const [formData, setFormData] = useState<FormDataValues>({
-        amount: '',
-        recipientAddress: '',
-    });
-    const { addNotification } = useNotifications();
-
-    const { data: coinsData } = useGetAllCoins(selectedCoin.coinType, senderAddress);
-
-    const {
-        mutateAsync: signAndExecuteTransaction,
-        error,
-        isPending,
-    } = useSignAndExecuteTransaction();
-    const { data: sendCoinData } = useSendCoinTransaction(
-        coinsData || [],
-        selectedCoin.coinType,
-        senderAddress,
-        formData.recipientAddress,
-        formData.amount,
-        selectedCoin.totalBalance === formData.amount,
-    );
-
-    function handleTransfer() {
-        if (!sendCoinData?.transaction) {
-            addNotification('There was an error with the transaction', NotificationType.Error);
-            return;
-        } else {
-            signAndExecuteTransaction({
-                transaction: sendCoinData.transaction,
-            })
-                .then(() => {
-                    onClose();
-                    addNotification('Transfer transaction has been sent');
-                })
-                .catch(() => {
-                    addNotification('Transfer transaction was not sent', NotificationType.Error);
-                });
-        }
-    }
-
-    function onNext(): void {
-        setStep(FormStep.ReviewValues);
-    }
-
-    function onBack(): void {
-        setStep(FormStep.EnterValues);
-    }
-
-    function handleSelectedCoin(coin: CoinBalance): void {
-        setCoin(coin);
-        setFormData({
-            amount: '',
-            recipientAddress: '',
-        });
-    }
-
-    return (
-        <>
-            <Dropdown
-                options={coins}
-                selectedOption={selectedCoin}
-                onChange={handleSelectedCoin}
-                placeholder="Select a coin to send"
-                disabled={step !== FormStep.EnterValues}
-                getOptionId={(_selectedCoin) => _selectedCoin.coinType}
-            />
-            {step === FormStep.EnterValues && (
-                <EnterValuesFormView
-                    coin={selectedCoin}
-                    onClose={onClose}
-                    onNext={onNext}
-                    formData={formData}
-                    gasBudget={sendCoinData?.gasBudget?.toString() || '--'}
-                    setFormData={setFormData}
-                />
-            )}
-            {step === FormStep.ReviewValues && (
-                <ReviewValuesFormView
-                    formData={formData}
-                    onBack={onBack}
-                    executeTransfer={handleTransfer}
-                    senderAddress={senderAddress}
-                    gasBudget={sendCoinData?.gasBudget?.toString() || '--'}
-                    error={error?.message}
-                    isPending={isPending}
-                />
-            )}
-        </>
-    );
-}
-
-export default SendCoinPopup;
diff --git a/apps/wallet-dashboard/components/Popup/Popups/SendCoinPopup/views/EnterValuesFormView.tsx b/apps/wallet-dashboard/components/Popup/Popups/SendCoinPopup/views/EnterValuesFormView.tsx
deleted file mode 100644
index 8c094ac8a90..00000000000
--- a/apps/wallet-dashboard/components/Popup/Popups/SendCoinPopup/views/EnterValuesFormView.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-// Copyright (c) 2024 IOTA Stiftung
-// SPDX-License-Identifier: Apache-2.0
-
-import { CoinBalance } from '@iota/iota-sdk/client';
-import { FormDataValues } from '../SendCoinPopup';
-import { Button } from '@/components';
-import { useFormatCoin } from '@iota/core';
-
-interface EnterValuesFormProps {
-    coin: CoinBalance;
-    formData: FormDataValues;
-    gasBudget: string;
-    setFormData: React.Dispatch<React.SetStateAction<FormDataValues>>;
-    onClose: () => void;
-    onNext: () => void;
-}
-
-function EnterValuesFormView({
-    coin: { totalBalance, coinType },
-    formData: { amount, recipientAddress },
-    gasBudget,
-    setFormData,
-    onClose,
-    onNext,
-}: EnterValuesFormProps): JSX.Element {
-    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        const { name, value } = e.target;
-        setFormData((prevFormData) => ({
-            ...prevFormData,
-            [name]: value,
-        }));
-    };
-    const [formattedCoin, coinSymbol, { data: coinMeta }] = useFormatCoin(totalBalance, coinType);
-
-    return (
-        <div className="flex flex-col gap-4">
-            <h1 className="mb-4 text-center text-xl">Send</h1>
-            <div className="flex flex-col gap-4">
-                <h3>{coinMeta?.name.toUpperCase() ?? coinType}</h3>
-                <p>
-                    Balance: {formattedCoin} {coinSymbol}
-                </p>
-                <label htmlFor="amount">Coin amount to send: </label>
-                <input
-                    type="number"
-                    id="amount"
-                    name="amount"
-                    min="1"
-                    value={amount}
-                    onChange={handleChange}
-                    placeholder="Enter the amount to send coins"
-                />
-                <label htmlFor="address">Address: </label>
-                <input
-                    type="text"
-                    id="recipientAddress"
-                    name="recipientAddress"
-                    value={recipientAddress}
-                    onChange={handleChange}
-                    placeholder="Enter the address to send coins"
-                />
-                <p>Gas fee: {gasBudget}</p>
-            </div>
-            <div className="mt-4 flex justify-around">
-                <Button onClick={onClose}>Cancel</Button>
-                <Button onClick={onNext} disabled={!recipientAddress || !amount}>
-                    Next
-                </Button>
-            </div>
-        </div>
-    );
-}
-
-export default EnterValuesFormView;
diff --git a/apps/wallet-dashboard/components/Popup/Popups/SendCoinPopup/views/index.ts b/apps/wallet-dashboard/components/Popup/Popups/SendCoinPopup/views/index.ts
deleted file mode 100644
index 57e3b376e7b..00000000000
--- a/apps/wallet-dashboard/components/Popup/Popups/SendCoinPopup/views/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-// Copyright (c) 2024 IOTA Stiftung
-// SPDX-License-Identifier: Apache-2.0
-
-export { default as EnterValuesFormView } from './EnterValuesFormView';
-export { default as ReviewValuesFormView } from './ReviewValuesFormView';
diff --git a/apps/wallet-dashboard/components/Popup/Popups/index.ts b/apps/wallet-dashboard/components/Popup/Popups/index.ts
index f6dcf9b3a31..e0e4a17db69 100644
--- a/apps/wallet-dashboard/components/Popup/Popups/index.ts
+++ b/apps/wallet-dashboard/components/Popup/Popups/index.ts
@@ -3,8 +3,6 @@
 
 export { default as TransactionDetailsPopup } from './TransactionDetailsPopup';
 export { default as UnstakePopup } from './UnstakePopup';
-export { default as SendCoinPopup } from './SendCoinPopup/SendCoinPopup';
 export { default as SendAssetPopup } from './SendAssetPopup';
 
-export * from './SendCoinPopup';
 export * from './VestingPopup';
diff --git a/apps/wallet-dashboard/components/account-balance/AccountBalance.tsx b/apps/wallet-dashboard/components/account-balance/AccountBalance.tsx
index 55ac2567f89..151a46d473f 100644
--- a/apps/wallet-dashboard/components/account-balance/AccountBalance.tsx
+++ b/apps/wallet-dashboard/components/account-balance/AccountBalance.tsx
@@ -1,56 +1,29 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { useCurrentAccount, useIotaClientContext, useIotaClientQuery } from '@iota/dapp-kit';
+import { useCurrentAccount, useIotaClientContext } from '@iota/dapp-kit';
 import { formatAddress, IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
-import {
-    COINS_QUERY_REFETCH_INTERVAL,
-    COINS_QUERY_STALE_TIME,
-    filterAndSortTokenBalances,
-    useBalance,
-    useFormatCoin,
-} from '@iota/core';
+import { useBalance, useFormatCoin } from '@iota/core';
 import { Address, Button, ButtonSize, ButtonType, Panel } from '@iota/apps-ui-kit';
-import { CoinBalance, getNetwork } from '@iota/iota-sdk/client';
-import { SendCoinPopup } from '../Popup';
-import { ReceiveFundsDialog } from '../Dialogs';
-import { usePopups } from '@/hooks';
+import { getNetwork } from '@iota/iota-sdk/client';
+import { ReceiveFundsDialog, SendTokenDialog } from '../Dialogs';
 import toast from 'react-hot-toast';
 import { useState } from 'react';
 
 export function AccountBalance() {
     const account = useCurrentAccount();
     const address = account?.address;
-    const { openPopup, closePopup } = usePopups();
     const [isReceiveDialogOpen, setIsReceiveDialogOpen] = useState(false);
     const { network } = useIotaClientContext();
     const { explorer } = getNetwork(network);
     const { data: coinBalance, isPending } = useBalance(address!);
     const formattedAddress = formatAddress(address!);
     const [formatted, symbol] = useFormatCoin(coinBalance?.totalBalance, IOTA_TYPE_ARG);
-    const { data: coinBalances } = useIotaClientQuery(
-        'getAllBalances',
-        { owner: address! },
-        {
-            enabled: !!address,
-            staleTime: COINS_QUERY_STALE_TIME,
-            refetchInterval: COINS_QUERY_REFETCH_INTERVAL,
-            select: filterAndSortTokenBalances,
-        },
-    );
+    const [isSendTokenDialogOpen, setIsSendTokenDialogOpen] = useState(false);
     const explorerLink = `${explorer}/address/${address}`;
 
-    function openSendTokenPopup(coin: CoinBalance, address: string): void {
-        if (coinBalances) {
-            openPopup(
-                <SendCoinPopup
-                    coin={coin}
-                    senderAddress={address}
-                    onClose={closePopup}
-                    coins={coinBalances}
-                />,
-            );
-        }
+    function openSendTokenPopup(): void {
+        setIsSendTokenDialogOpen(true);
     }
 
     function openReceiveTokenPopup(): void {
@@ -64,30 +37,26 @@ export function AccountBalance() {
     return (
         <>
             <Panel>
-                {isPending && <p>Loading...</p>}
-                {!isPending && (
+                {isPending ? (
+                    <p>Loading...</p>
+                ) : (
                     <div className="flex h-full flex-col items-center justify-center gap-y-lg p-lg">
-                        <div className="flex h-full flex-col items-center justify-center gap-y-xs">
-                            {address && (
-                                <Address
-                                    text={formattedAddress}
-                                    isCopyable
-                                    copyText={address}
-                                    isExternal
-                                    externalLink={explorerLink}
-                                    onCopySuccess={handleOnCopySuccess}
-                                />
-                            )}
-                            <span className="text-headline-lg text-neutral-10 dark:text-neutral-92">
-                                {formatted} {symbol}
-                            </span>
-                        </div>
+                        {address && (
+                            <Address
+                                text={formattedAddress}
+                                isCopyable
+                                copyText={address}
+                                isExternal
+                                externalLink={explorerLink}
+                                onCopySuccess={handleOnCopySuccess}
+                            />
+                        )}
+                        <span className="text-headline-lg text-neutral-10 dark:text-neutral-92">
+                            {formatted} {symbol}
+                        </span>
                         <div className="flex w-full max-w-56 gap-xs">
                             <Button
-                                onClick={() =>
-                                    coinBalance &&
-                                    openSendTokenPopup(coinBalance, account?.address ?? '')
-                                }
+                                onClick={openSendTokenPopup}
                                 text="Send"
                                 size={ButtonSize.Small}
                                 disabled={!address}
@@ -104,12 +73,22 @@ export function AccountBalance() {
                         </div>
                     </div>
                 )}
+                {address && (
+                    <>
+                        <SendTokenDialog
+                            activeAddress={address}
+                            coin={coinBalance!}
+                            open={isSendTokenDialogOpen}
+                            setOpen={setIsSendTokenDialogOpen}
+                        />
+                        <ReceiveFundsDialog
+                            address={address}
+                            open={isReceiveDialogOpen}
+                            setOpen={setIsReceiveDialogOpen}
+                        />
+                    </>
+                )}
             </Panel>
-            <ReceiveFundsDialog
-                address={address!}
-                open={isReceiveDialogOpen}
-                setOpen={setIsReceiveDialogOpen}
-            />
         </>
     );
 }
diff --git a/apps/wallet-dashboard/components/coins/CoinIcon.tsx b/apps/wallet-dashboard/components/coins/CoinIcon.tsx
deleted file mode 100644
index a5c24107baa..00000000000
--- a/apps/wallet-dashboard/components/coins/CoinIcon.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-// Copyright (c) 2024 IOTA Stiftung
-// SPDX-License-Identifier: Apache-2.0
-
-import { useCoinMetadata } from '@iota/core';
-import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
-import { IotaLogoMark } from '@iota/ui-icons';
-import cx from 'clsx';
-import { ImageIcon, ImageIconSize } from '../ImageIcon';
-
-interface NonIotaCoinProps {
-    coinType: string;
-    size?: ImageIconSize;
-    rounded?: boolean;
-}
-
-function NonIotaCoin({ coinType, size = ImageIconSize.Full, rounded }: NonIotaCoinProps) {
-    const { data: coinMeta } = useCoinMetadata(coinType);
-    return (
-        <div className="flex h-full w-full items-center justify-center rounded-full bg-neutral-96 text-neutral-10 dark:bg-neutral-20 dark:text-neutral-100">
-            <ImageIcon
-                src={coinMeta?.iconUrl}
-                label={coinMeta?.name || coinType}
-                fallbackText={coinMeta?.name || coinType}
-                size={size}
-                rounded={rounded}
-            />
-        </div>
-    );
-}
-
-export interface CoinIconProps {
-    coinType: string;
-    size?: ImageIconSize;
-    rounded?: boolean;
-}
-
-export function CoinIcon({ coinType, size = ImageIconSize.Full, rounded }: CoinIconProps) {
-    return coinType === IOTA_TYPE_ARG ? (
-        <div className="flex h-full w-full items-center justify-center border border-shader-neutral-light-8 bg-neutral-100 text-neutral-10 dark:bg-neutral-0 dark:text-neutral-100">
-            <IotaLogoMark className={cx(size)} />
-        </div>
-    ) : (
-        <NonIotaCoin rounded={rounded} size={size} coinType={coinType} />
-    );
-}
diff --git a/apps/wallet-dashboard/components/coins/CoinItem.tsx b/apps/wallet-dashboard/components/coins/CoinItem.tsx
index 29e8be5aa35..01528cb5ac1 100644
--- a/apps/wallet-dashboard/components/coins/CoinItem.tsx
+++ b/apps/wallet-dashboard/components/coins/CoinItem.tsx
@@ -10,11 +10,9 @@ import {
     CardType,
     ImageType,
 } from '@iota/apps-ui-kit';
-import { useFormatCoin } from '@iota/core';
+import { CoinIcon, useFormatCoin, ImageIconSize } from '@iota/core';
 import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
 import { type ReactNode } from 'react';
-import { ImageIconSize } from '../ImageIcon';
-import { CoinIcon } from './CoinIcon';
 
 interface CoinItemProps {
     coinType: string;
diff --git a/apps/wallet-dashboard/components/coins/MyCoins.tsx b/apps/wallet-dashboard/components/coins/MyCoins.tsx
index bf3a3d6a8f7..9ba3810ff98 100644
--- a/apps/wallet-dashboard/components/coins/MyCoins.tsx
+++ b/apps/wallet-dashboard/components/coins/MyCoins.tsx
@@ -3,8 +3,7 @@
 
 import React, { useState } from 'react';
 import { useCurrentAccount, useIotaClientQuery } from '@iota/dapp-kit';
-import { CoinItem, SendCoinPopup } from '@/components';
-import { usePopups } from '@/hooks';
+import { CoinItem, SendTokenDialog } from '@/components';
 import { CoinBalance } from '@iota/iota-sdk/client';
 import {
     COINS_QUERY_REFETCH_INTERVAL,
@@ -44,8 +43,9 @@ const TOKEN_CATEGORIES = [
 
 function MyCoins(): React.JSX.Element {
     const [selectedTokenCategory, setSelectedTokenCategory] = useState(TokenCategory.All);
+    const [isSendTokenDialogOpen, setIsSendTokenDialogOpen] = useState(false);
+    const [selectedCoin, setSelectedCoin] = useState<CoinBalance>();
 
-    const { openPopup, closePopup } = usePopups();
     const account = useCurrentAccount();
     const activeAccountAddress = account?.address;
 
@@ -61,16 +61,10 @@ function MyCoins(): React.JSX.Element {
     );
     const { recognized, unrecognized } = useSortedCoinsByCategories(coinBalances ?? []);
 
-    function openSendTokenPopup(coin: CoinBalance, address: string): void {
+    function openSendTokenDialog(coin: CoinBalance): void {
         if (coinBalances) {
-            openPopup(
-                <SendCoinPopup
-                    coin={coin}
-                    senderAddress={address}
-                    onClose={closePopup}
-                    coins={coinBalances}
-                />,
-            );
+            setIsSendTokenDialogOpen(true);
+            setSelectedCoin(coin);
         }
     }
 
@@ -111,9 +105,7 @@ function MyCoins(): React.JSX.Element {
                                         key={index}
                                         coinType={coin.coinType}
                                         balance={BigInt(coin.totalBalance)}
-                                        onClick={() =>
-                                            openSendTokenPopup(coin, account?.address ?? '')
-                                        }
+                                        onClick={() => openSendTokenDialog(coin)}
                                         icon={
                                             <RecognizedBadge className="h-4 w-4 text-primary-40" />
                                         }
@@ -129,15 +121,21 @@ function MyCoins(): React.JSX.Element {
                                         key={index}
                                         coinType={coin.coinType}
                                         balance={BigInt(coin.totalBalance)}
-                                        onClick={() =>
-                                            openSendTokenPopup(coin, account?.address ?? '')
-                                        }
+                                        onClick={() => openSendTokenDialog(coin)}
                                     />
                                 );
                             })}
                     </div>
                 </div>
             </div>
+            {selectedCoin && activeAccountAddress && (
+                <SendTokenDialog
+                    activeAddress={activeAccountAddress}
+                    coin={selectedCoin}
+                    open={isSendTokenDialogOpen}
+                    setOpen={setIsSendTokenDialogOpen}
+                />
+            )}
         </Panel>
     );
 }
diff --git a/apps/wallet-dashboard/components/coins/index.ts b/apps/wallet-dashboard/components/coins/index.ts
index 51468194c31..d1519105eec 100644
--- a/apps/wallet-dashboard/components/coins/index.ts
+++ b/apps/wallet-dashboard/components/coins/index.ts
@@ -3,4 +3,3 @@
 
 export { default as MyCoins } from './MyCoins';
 export { default as CoinItem } from './CoinItem';
-export * from './CoinIcon';
diff --git a/apps/wallet-dashboard/components/index.ts b/apps/wallet-dashboard/components/index.ts
index 9907b82ea25..83697f63914 100644
--- a/apps/wallet-dashboard/components/index.ts
+++ b/apps/wallet-dashboard/components/index.ts
@@ -8,7 +8,6 @@ export { default as AmountBox } from './AmountBox';
 export { default as Input } from './Input';
 export { default as VirtualList } from './VirtualList';
 export { default as ExternalImage } from './ExternalImage';
-export { default as Dropdown } from './Dropdown';
 export * from './PageSizeSelector';
 export * from './PaginationOptions';
 
@@ -21,6 +20,5 @@ export * from './Buttons';
 export * from './transactions';
 export * from './staking-overview';
 export * from './Dialogs';
-export * from './ImageIcon';
 export * from './ValidatorStakingData';
 export * from './tiles';
diff --git a/apps/wallet-dashboard/hooks/useSendCoinTransaction.ts b/apps/wallet-dashboard/hooks/useSendCoinTransaction.ts
index 8b793e6405d..b439c27a2df 100644
--- a/apps/wallet-dashboard/hooks/useSendCoinTransaction.ts
+++ b/apps/wallet-dashboard/hooks/useSendCoinTransaction.ts
@@ -45,11 +45,5 @@ export function useSendCoinTransaction(
         },
         enabled: !!recipientAddress && !!amount && !!coins && !!senderAddress && !!coinType,
         gcTime: 0,
-        select: (transaction) => {
-            return {
-                transaction,
-                gasBudget: transaction.getData().gasData.budget,
-            };
-        },
     });
 }
diff --git a/apps/wallet-dashboard/package.json b/apps/wallet-dashboard/package.json
index 9093f6da53e..44066a00ef1 100644
--- a/apps/wallet-dashboard/package.json
+++ b/apps/wallet-dashboard/package.json
@@ -25,6 +25,7 @@
         "@tanstack/react-query": "^5.50.1",
         "@tanstack/react-virtual": "^3.5.0",
         "clsx": "^2.1.1",
+        "formik": "^2.4.2",
         "next": "14.2.10",
         "react": "^18.3.1",
         "react-hot-toast": "^2.4.1",
diff --git a/apps/wallet/src/ui/app/components/active-coins-card/CoinItem.tsx b/apps/wallet/src/ui/app/components/active-coins-card/CoinItem.tsx
index 5e7dce765f5..b5fe3327917 100644
--- a/apps/wallet/src/ui/app/components/active-coins-card/CoinItem.tsx
+++ b/apps/wallet/src/ui/app/components/active-coins-card/CoinItem.tsx
@@ -2,8 +2,7 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { CoinIcon } from '_components';
-import { useFormatCoin } from '@iota/core';
+import { CoinIcon, useFormatCoin } from '@iota/core';
 import { type ReactNode } from 'react';
 import {
     Card,
diff --git a/apps/wallet/src/ui/app/components/address-input/index.tsx b/apps/wallet/src/ui/app/components/address-input/index.tsx
deleted file mode 100644
index e5d61c02b22..00000000000
--- a/apps/wallet/src/ui/app/components/address-input/index.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-// Copyright (c) Mysten Labs, Inc.
-// Modifications Copyright (c) 2024 IOTA Stiftung
-// SPDX-License-Identifier: Apache-2.0
-
-import { useField, useFormikContext } from 'formik';
-import { useCallback, useMemo } from 'react';
-import type { ChangeEventHandler } from 'react';
-import { useIotaAddressValidation } from '@iota/core';
-import { Input, InputType } from '@iota/apps-ui-kit';
-import { Close } from '@iota/ui-icons';
-
-export interface AddressInputProps {
-    disabled?: boolean;
-    placeholder?: string;
-    name: string;
-    label?: string;
-    shouldValidateManually?: boolean;
-}
-
-export function AddressInput({
-    disabled: forcedDisabled,
-    placeholder = '0x...',
-    name = 'to',
-    label = 'Enter Recipient Address',
-}: AddressInputProps) {
-    const [field, meta] = useField(name);
-
-    const { isSubmitting, setFieldValue, validateField } = useFormikContext();
-    const iotaAddressValidation = useIotaAddressValidation();
-
-    const disabled = forcedDisabled !== undefined ? forcedDisabled : isSubmitting;
-    const handleOnChange = useCallback<ChangeEventHandler<HTMLInputElement>>(
-        (e) => {
-            const address = e.currentTarget.value;
-            setFieldValue(name, iotaAddressValidation.cast(address)).then(() => {
-                validateField(name);
-            });
-        },
-        [setFieldValue, name, iotaAddressValidation],
-    );
-    const formattedValue = useMemo(
-        () => iotaAddressValidation.cast(field?.value),
-        [field?.value, iotaAddressValidation],
-    );
-
-    const clearAddress = useCallback(() => {
-        setFieldValue('to', '');
-    }, [setFieldValue]);
-
-    return (
-        <>
-            <Input
-                type={InputType.Text}
-                disabled={disabled}
-                placeholder={placeholder}
-                value={formattedValue}
-                name={name}
-                onBlur={field.onBlur}
-                label={label}
-                onChange={handleOnChange}
-                errorMessage={meta.error}
-                trailingElement={
-                    formattedValue ? (
-                        <button
-                            onClick={clearAddress}
-                            type="button"
-                            className="flex items-center justify-center"
-                        >
-                            <Close />
-                        </button>
-                    ) : undefined
-                }
-            />
-        </>
-    );
-}
diff --git a/apps/wallet/src/ui/app/components/index.ts b/apps/wallet/src/ui/app/components/index.ts
index b4261f15214..418c14428a2 100644
--- a/apps/wallet/src/ui/app/components/index.ts
+++ b/apps/wallet/src/ui/app/components/index.ts
@@ -14,8 +14,6 @@ export * from './WalletListSelect';
 export * from './accounts';
 export * from './active-coins-card';
 export * from './active-coins-card/CoinItem';
-export * from './address-input';
-export * from './coin-icon';
 export * from './error-boundary';
 export * from './explorer-link';
 export * from './explorer-link/Explorer';
diff --git a/apps/wallet/src/ui/app/components/receipt-card/TxnAmount.tsx b/apps/wallet/src/ui/app/components/receipt-card/TxnAmount.tsx
index 623ed671b9a..ceaa4ead1e2 100644
--- a/apps/wallet/src/ui/app/components/receipt-card/TxnAmount.tsx
+++ b/apps/wallet/src/ui/app/components/receipt-card/TxnAmount.tsx
@@ -2,7 +2,7 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { useFormatCoin } from '@iota/core';
+import { CoinIcon, useFormatCoin } from '@iota/core';
 import {
     Card,
     CardAction,
@@ -12,7 +12,6 @@ import {
     CardType,
     ImageType,
 } from '@iota/apps-ui-kit';
-import { CoinIcon } from '../coin-icon';
 import { ImageIconSize } from '../../shared/image-icon';
 
 interface TxnAmountProps {
diff --git a/apps/wallet/src/ui/app/pages/home/nft-transfer/TransferNFTForm.tsx b/apps/wallet/src/ui/app/pages/home/nft-transfer/TransferNFTForm.tsx
index 59d02cf434e..9e4801aa3cb 100644
--- a/apps/wallet/src/ui/app/pages/home/nft-transfer/TransferNFTForm.tsx
+++ b/apps/wallet/src/ui/app/pages/home/nft-transfer/TransferNFTForm.tsx
@@ -2,16 +2,15 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { AddressInput } from '_components';
 import { ampli } from '_src/shared/analytics/ampli';
 import { getSignerOperationErrorMessage } from '_src/ui/app/helpers/errorMessages';
 import { useActiveAddress } from '_src/ui/app/hooks';
 import { useActiveAccount } from '_src/ui/app/hooks/useActiveAccount';
 import { useSigner } from '_src/ui/app/hooks/useSigner';
-import { createNftSendValidationSchema, useGetKioskContents } from '@iota/core';
+import { createNftSendValidationSchema, useGetKioskContents, AddressInput } from '@iota/core';
 import { Transaction } from '@iota/iota-sdk/transactions';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { Field, Form, Formik } from 'formik';
+import { Form, Formik } from 'formik';
 import { toast } from 'react-hot-toast';
 import { useNavigate } from 'react-router-dom';
 
@@ -96,12 +95,7 @@ export function TransferNFTForm({ objectId, objectType }: TransferNFTFormProps)
             {({ isValid, dirty, isSubmitting }) => (
                 <Form autoComplete="off" className="h-full">
                     <div className="flex h-full flex-col justify-between">
-                        <Field
-                            component={AddressInput}
-                            allowNegative={false}
-                            name="to"
-                            placeholder="Enter Address"
-                        />
+                        <AddressInput name="to" placeholder="Enter Address" />
 
                         <Button
                             htmlType={ButtonHtmlType.Submit}
diff --git a/apps/wallet/src/ui/app/pages/home/transfer-coin/FormInput.tsx b/apps/wallet/src/ui/app/pages/home/transfer-coin/FormInput.tsx
deleted file mode 100644
index 88200721c5c..00000000000
--- a/apps/wallet/src/ui/app/pages/home/transfer-coin/FormInput.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-// Copyright (c) 2024 IOTA Stiftung
-// SPDX-License-Identifier: Apache-2.0
-
-import { Input, InputType, type InputProps, type NumericFormatInputProps } from '@iota/apps-ui-kit';
-import { useField, useFormikContext } from 'formik';
-
-interface FormInputWithFormixProps {
-    name: string;
-    renderAction?: (isDisabled?: boolean) => React.JSX.Element;
-    decimals?: boolean;
-}
-
-export function FormInput({
-    renderAction,
-    decimals,
-    ...props
-}: InputProps & FormInputWithFormixProps) {
-    const [field, meta] = useField(props.name);
-    const form = useFormikContext();
-
-    const { isSubmitting } = form;
-    const isInputDisabled = isSubmitting || props.disabled;
-
-    const isActionButtonDisabled =
-        isInputDisabled || meta?.initialValue === meta?.value || !!meta?.error;
-    const errorMessage = meta?.error ? meta.error : undefined;
-
-    const isNumericFormat = props.type === InputType.NumericFormat;
-    const numericPropsOnly: Partial<NumericFormatInputProps> = {
-        decimalScale: decimals ? undefined : 0,
-        thousandSeparator: true,
-        onValueChange: (values) => {
-            form.setFieldValue(props.name, values.value).then(() => {
-                form.validateField(props.name);
-            });
-        },
-    };
-
-    return (
-        <Input
-            {...props}
-            {...field}
-            defaultValue={meta.initialValue}
-            disabled={isInputDisabled}
-            errorMessage={errorMessage}
-            amountCounter={!errorMessage ? props.amountCounter : undefined}
-            trailingElement={renderAction?.(isActionButtonDisabled)}
-            {...(isNumericFormat ? { ...numericPropsOnly, onChange: undefined } : {})}
-        />
-    );
-}
diff --git a/apps/wallet/src/ui/app/pages/home/transfer-coin/SendTokenForm.tsx b/apps/wallet/src/ui/app/pages/home/transfer-coin/SendTokenForm.tsx
index 474efd855e6..a9b263403f3 100644
--- a/apps/wallet/src/ui/app/pages/home/transfer-coin/SendTokenForm.tsx
+++ b/apps/wallet/src/ui/app/pages/home/transfer-coin/SendTokenForm.tsx
@@ -3,35 +3,30 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { useActiveAddress } from '_app/hooks/useActiveAddress';
-import { AddressInput, Loading } from '_components';
+import { Loading } from '_components';
 import {
     useGetAllCoins,
     CoinFormat,
-    createTokenTransferTransaction,
     useCoinMetadata,
     useFormatCoin,
     parseAmount,
-    GAS_SYMBOL,
+    AddressInput,
+    SendTokenFormInput,
+    createValidationSchemaSendTokenForm,
 } from '@iota/core';
-import { useIotaClient } from '@iota/dapp-kit';
 import { type CoinStruct } from '@iota/iota-sdk/client';
 import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
-import { useQuery } from '@tanstack/react-query';
-import { Field, Form, Formik, useFormikContext } from 'formik';
+import { Form, Formik } from 'formik';
 import { useEffect, useMemo } from 'react';
 
-import { createValidationSchemaStepOne } from './validation';
 import {
     InfoBox,
     InfoBoxStyle,
     InfoBoxType,
-    InputType,
     Button,
     ButtonType,
     ButtonHtmlType,
-    ButtonPill,
 } from '@iota/apps-ui-kit';
-import { FormInput } from './FormInput';
 import { Exclamation } from '@iota/ui-icons';
 
 const INITIAL_VALUES = {
@@ -66,61 +61,6 @@ function getBalanceFromCoinStruct(coin: CoinStruct): bigint {
     return BigInt(coin.balance);
 }
 
-function useGasBudgetEstimation({
-    coinDecimals,
-    coins,
-}: {
-    coinDecimals: number;
-    coins: CoinStruct[];
-}) {
-    const activeAddress = useActiveAddress();
-    const { values, setFieldValue } = useFormikContext<FormValues>();
-
-    const client = useIotaClient();
-    const { data: gasBudget } = useQuery({
-        // eslint-disable-next-line @tanstack/query/exhaustive-deps
-        queryKey: [
-            'transaction-gas-budget-estimate',
-            {
-                to: values.to,
-                amount: values.amount,
-                coins,
-                activeAddress,
-                coinDecimals,
-            },
-        ],
-        queryFn: async () => {
-            if (!values.amount || !values.to || !coins || !activeAddress) {
-                return null;
-            }
-
-            const to = values.to;
-
-            const tx = createTokenTransferTransaction({
-                to,
-                amount: values.amount,
-                coinType: IOTA_TYPE_ARG,
-                coinDecimals,
-                isPayAllIota: values.isPayAllIota,
-                coins,
-            });
-
-            tx.setSender(activeAddress);
-            await tx.build({ client });
-            return tx.blockData.gasConfig.budget;
-        },
-    });
-
-    const [formattedGas] = useFormatCoin(gasBudget, IOTA_TYPE_ARG);
-    // gasBudgetEstimation should change when the amount above changes
-
-    useEffect(() => {
-        setFieldValue('gasBudgetEst', formattedGas, false);
-    }, [formattedGas, setFieldValue, values.amount]);
-
-    return formattedGas ? formattedGas + ' ' + GAS_SYMBOL : '--';
-}
-
 // Set the initial gasEstimation from initial amount
 // base on the input amount field update the gasEstimation value
 // Separating the gasEstimation from the formik context to access the input amount value and update the gasEstimation value
@@ -130,7 +70,6 @@ export function SendTokenForm({
     initialAmount = '',
     initialTo = '',
 }: SendTokenFormProps) {
-    const client = useIotaClient();
     const activeAddress = useActiveAddress();
     // Get all coins of the type
     const { data: coinsData, isPending: coinsIsPending } = useGetAllCoins(coinType, activeAddress!);
@@ -155,8 +94,8 @@ export function SendTokenForm({
     );
 
     const validationSchemaStepOne = useMemo(
-        () => createValidationSchemaStepOne(coinBalance, symbol, coinDecimals),
-        [client, coinBalance, symbol, coinDecimals],
+        () => createValidationSchemaSendTokenForm(coinBalance, symbol, coinDecimals),
+        [coinBalance, symbol, coinDecimals],
     );
 
     // remove the comma from the token balance
@@ -209,9 +148,6 @@ export function SendTokenForm({
                     const newPayIotaAll =
                         parseAmount(values.amount, coinDecimals) === coinBalance &&
                         coinType === IOTA_TYPE_ARG;
-                    if (values.isPayAllIota !== newPayIotaAll) {
-                        setFieldValue('isPayAllIota', newPayIotaAll);
-                    }
 
                     const hasEnoughBalance =
                         values.isPayAllIota ||
@@ -231,6 +167,12 @@ export function SendTokenForm({
                         queryResult.isPending ||
                         !coinBalance;
 
+                    useEffect(() => {
+                        if (values.isPayAllIota !== newPayIotaAll) {
+                            setFieldValue('isPayAllIota', newPayIotaAll);
+                        }
+                    }, [values.isPayAllIota, newPayIotaAll, setFieldValue]);
+
                     return (
                         <div className="flex h-full w-full flex-col">
                             <Form autoComplete="off" noValidate className="flex-1">
@@ -243,21 +185,17 @@ export function SendTokenForm({
                                             icon={<Exclamation />}
                                         />
                                     ) : null}
-
                                     <SendTokenFormInput
-                                        coinDecimals={coinDecimals}
+                                        name="amount"
+                                        to={values.to}
                                         symbol={symbol}
-                                        coins={coins}
-                                        values={values}
+                                        coinDecimals={coinDecimals}
+                                        activeAddress={activeAddress ?? ''}
+                                        coins={coins ?? []}
                                         onActionClick={onMaxTokenButtonClick}
-                                        isActionButtonDisabled={isMaxActionDisabled}
-                                    />
-                                    <Field
-                                        component={AddressInput}
-                                        allowNegative={false}
-                                        name="to"
-                                        placeholder="Enter Address"
+                                        isMaxActionDisabled={isMaxActionDisabled}
                                     />
+                                    <AddressInput name="to" placeholder="Enter Address" />
                                 </div>
                             </Form>
 
@@ -283,56 +221,3 @@ export function SendTokenForm({
         </Loading>
     );
 }
-
-interface SendTokenInputProps {
-    coinDecimals: number;
-    coins?: CoinStruct[];
-    symbol: string;
-    values: {
-        amount: string;
-        isPayAllIota: boolean;
-    };
-    onActionClick: () => Promise<void>;
-    isActionButtonDisabled?: boolean | 'auto';
-}
-
-function SendTokenFormInput({
-    coinDecimals,
-    coins,
-    values,
-    symbol,
-    onActionClick,
-    isActionButtonDisabled,
-}: SendTokenInputProps) {
-    const gasBudgetEstimation = useGasBudgetEstimation({
-        coinDecimals: coinDecimals,
-        coins: coins ?? [],
-    });
-
-    return (
-        <FormInput
-            type={InputType.NumericFormat}
-            name="amount"
-            label="Send Amount"
-            placeholder="0.00"
-            caption="Est. Gas Fees:"
-            suffix={` ${symbol}`}
-            decimals
-            allowNegative={false}
-            prefix={values.isPayAllIota ? '~ ' : undefined}
-            amountCounter={coins ? gasBudgetEstimation : '--'}
-            renderAction={(isButtonDisabled) => (
-                <ButtonPill
-                    disabled={
-                        isActionButtonDisabled === 'auto'
-                            ? isButtonDisabled
-                            : isActionButtonDisabled
-                    }
-                    onClick={onActionClick}
-                >
-                    Max
-                </ButtonPill>
-            )}
-        />
-    );
-}
diff --git a/apps/wallet/src/ui/app/pages/home/transfer-coin/index.tsx b/apps/wallet/src/ui/app/pages/home/transfer-coin/index.tsx
index 2a7cea08f5f..b743f0e20a6 100644
--- a/apps/wallet/src/ui/app/pages/home/transfer-coin/index.tsx
+++ b/apps/wallet/src/ui/app/pages/home/transfer-coin/index.tsx
@@ -2,17 +2,19 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { CoinIcon, Loading, Overlay } from '_components';
+import { Overlay } from '_components';
 import { ampli } from '_src/shared/analytics/ampli';
 import { getSignerOperationErrorMessage } from '_src/ui/app/helpers/errorMessages';
 import { useActiveAccount } from '_src/ui/app/hooks/useActiveAccount';
 import { useSigner } from '_src/ui/app/hooks/useSigner';
 import { useUnlockedGuard } from '_src/ui/app/hooks/useUnlockedGuard';
 import {
+    COINS_QUERY_REFETCH_INTERVAL,
+    COINS_QUERY_STALE_TIME,
+    CoinSelector,
     createTokenTransferTransaction,
     filterAndSortTokenBalances,
     useCoinMetadata,
-    useFormatCoin,
 } from '@iota/core';
 import * as Sentry from '@sentry/react';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
@@ -21,13 +23,9 @@ import { toast } from 'react-hot-toast';
 import { Navigate, useNavigate, useSearchParams } from 'react-router-dom';
 import { PreviewTransfer } from './PreviewTransfer';
 import { SendTokenForm, type SubmitProps } from './SendTokenForm';
-import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
-import { Select, Button, type SelectOption, ButtonType } from '@iota/apps-ui-kit';
-import { useActiveAddress, useCoinsReFetchingConfig } from '_src/ui/app/hooks';
-import { useIotaClientQuery } from '@iota/dapp-kit';
-import type { CoinBalance } from '@iota/iota-sdk/client';
-import { ImageIconSize } from '_src/ui/app/shared/image-icon';
+import { Button, ButtonType, LoadingIndicator } from '@iota/apps-ui-kit';
 import { Loader } from '@iota/ui-icons';
+import { useIotaClientQuery } from '@iota/dapp-kit';
 
 function TransferCoinPage() {
     const [searchParams] = useSearchParams();
@@ -41,6 +39,25 @@ function TransferCoinPage() {
     const address = activeAccount?.address;
     const queryClient = useQueryClient();
 
+    const { data: coinsBalance, isPending: coinsBalanceIsPending } = useIotaClientQuery(
+        'getAllBalances',
+        { owner: address! },
+        {
+            enabled: !!address,
+            refetchInterval: COINS_QUERY_REFETCH_INTERVAL,
+            staleTime: COINS_QUERY_STALE_TIME,
+            select: filterAndSortTokenBalances,
+        },
+    );
+
+    if (coinsBalanceIsPending) {
+        return (
+            <div className="flex h-full w-full items-center justify-center">
+                <LoadingIndicator />
+            </div>
+        );
+    }
+
     const transaction = useMemo(() => {
         if (!coinType || !signer || !formData || !address) return null;
 
@@ -104,7 +121,7 @@ function TransferCoinPage() {
         return null;
     }
 
-    if (!coinType) {
+    if (!coinType || !coinsBalance) {
         return <Navigate to="/" replace={true} />;
     }
 
@@ -147,8 +164,14 @@ function TransferCoinPage() {
                 ) : (
                     <>
                         <CoinSelector
-                            onActiveCoinChange={() => setFormData(undefined)}
                             activeCoinType={coinType}
+                            coins={coinsBalance || []}
+                            onClick={(coinType) => {
+                                setFormData(undefined);
+                                navigate(
+                                    `/send?${new URLSearchParams({ type: coinType }).toString()}`,
+                                );
+                            }}
                         />
 
                         <SendTokenForm
@@ -168,74 +191,4 @@ function TransferCoinPage() {
     );
 }
 
-function CoinSelector({
-    activeCoinType = IOTA_TYPE_ARG,
-    onActiveCoinChange,
-}: {
-    activeCoinType: string;
-    onActiveCoinChange: () => void;
-}) {
-    const selectedAddress = useActiveAddress();
-    const navigate = useNavigate();
-
-    const { staleTime, refetchInterval } = useCoinsReFetchingConfig();
-    const { data: coins, isPending } = useIotaClientQuery(
-        'getAllBalances',
-        { owner: selectedAddress! },
-        {
-            enabled: !!selectedAddress,
-            refetchInterval,
-            staleTime,
-            select: filterAndSortTokenBalances,
-        },
-    );
-
-    if (!coins?.length) {
-        return <Navigate to="/" replace={true} />;
-    }
-
-    const activeCoin = coins?.find(({ coinType }) => coinType === activeCoinType) ?? coins?.[0];
-    const initialValue = activeCoin?.coinType;
-    const coinsOptions: SelectOption[] =
-        coins?.map((coin) => ({
-            id: coin.coinType,
-            renderLabel: () => <CoinSelectOption coin={coin} />,
-        })) || [];
-
-    return (
-        <Loading loading={isPending}>
-            <Select
-                label="Select Coins"
-                value={initialValue}
-                options={coinsOptions}
-                onValueChange={(coinType) => {
-                    onActiveCoinChange();
-                    navigate(`/send?${new URLSearchParams({ type: coinType }).toString()}`);
-                }}
-            />
-        </Loading>
-    );
-}
-
-function CoinSelectOption({ coin: { coinType, totalBalance } }: { coin: CoinBalance }) {
-    const [formatted, symbol, { data: coinMeta }] = useFormatCoin(totalBalance, coinType);
-    const isIota = coinType === IOTA_TYPE_ARG;
-
-    return (
-        <div className="flex w-full flex-row items-center justify-between">
-            <div className="flex flex-row items-center gap-x-md">
-                <div className="flex h-6 w-6 items-center justify-center">
-                    <CoinIcon size={ImageIconSize.Small} coinType={coinType} rounded />
-                </div>
-                <span className="text-body-lg text-neutral-10">
-                    {isIota ? (coinMeta?.name || '').toUpperCase() : coinMeta?.name || symbol}
-                </span>
-            </div>
-            <span className="text-label-lg text-neutral-60">
-                {formatted} {symbol}
-            </span>
-        </div>
-    );
-}
-
 export default TransferCoinPage;
diff --git a/apps/wallet/src/ui/app/redux/slices/iota-objects/Coin.ts b/apps/wallet/src/ui/app/redux/slices/iota-objects/Coin.ts
index 8f0fdf452b8..d624c690069 100644
--- a/apps/wallet/src/ui/app/redux/slices/iota-objects/Coin.ts
+++ b/apps/wallet/src/ui/app/redux/slices/iota-objects/Coin.ts
@@ -8,7 +8,6 @@ const COIN_TYPE = '0x2::coin::Coin';
 const COIN_TYPE_ARG_REGEX = /^0x2::coin::Coin<(.+)>$/;
 
 export const IOTA_BIP44_COIN_TYPE = 4218;
-export const GAS_SYMBOL = 'IOTA';
 
 // TODO use sdk
 export class Coin {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1949708d445..0f8d5ad6e06 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -223,6 +223,9 @@ importers:
       '@hookform/resolvers':
         specifier: ^3.9.0
         version: 3.9.0(react-hook-form@7.53.0(react@18.3.1))
+      '@iota/apps-ui-kit':
+        specifier: workspace:*
+        version: link:../ui-kit
       '@iota/dapp-kit':
         specifier: workspace:*
         version: link:../../sdk/dapp-kit
@@ -232,6 +235,9 @@ importers:
       '@iota/kiosk':
         specifier: workspace:*
         version: link:../../sdk/kiosk
+      '@iota/ui-icons':
+        specifier: workspace:*
+        version: link:../ui-icons
       '@sentry/react':
         specifier: ^7.59.2
         version: 7.119.0(react@18.3.1)
@@ -241,6 +247,12 @@ importers:
       bignumber.js:
         specifier: ^9.1.1
         version: 9.1.2
+      clsx:
+        specifier: ^2.1.1
+        version: 2.1.1
+      formik:
+        specifier: ^2.4.2
+        version: 2.4.6(react@18.3.1)
       qrcode.react:
         specifier: ^4.0.1
         version: 4.0.1(react@18.3.1)
@@ -1022,6 +1034,9 @@ importers:
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
+      formik:
+        specifier: ^2.4.2
+        version: 2.4.6(react@18.3.1)
       next:
         specifier: 14.2.10
         version: 14.2.10(@babel/core@7.25.2)(@playwright/test@1.47.2)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.79.3)