diff --git a/packages/browser-wallet/.storybook/main.js b/packages/browser-wallet/.storybook/main.js
index 81c79a823..26b73cd75 100644
--- a/packages/browser-wallet/.storybook/main.js
+++ b/packages/browser-wallet/.storybook/main.js
@@ -7,6 +7,7 @@ const pathToSvgAssets = path.resolve(__dirname, '../src/assets/svg');
 
 module.exports = {
     stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+    staticDirs: [{ from: '../src/assets', to: '/assets' }],
 
     addons: [
         getAbsolutePath('@storybook/addon-links'),
@@ -14,6 +15,7 @@ module.exports = {
         getAbsolutePath('@storybook/addon-interactions'),
         getAbsolutePath('@storybook/preset-scss'),
         getAbsolutePath('@storybook/addon-webpack5-compiler-swc'),
+        getAbsolutePath('@storybook/addon-viewport'),
     ],
 
     framework: {
@@ -34,7 +36,21 @@ module.exports = {
         rules.push({
             test: /\.svg$/,
             include: pathToSvgAssets,
-            use: ['@svgr/webpack'],
+            use: [
+                {
+                    loader: '@svgr/webpack',
+                    options: {
+                        svgoConfig: {
+                            plugins: [
+                                {
+                                    name: 'removeViewBox',
+                                    active: false,
+                                },
+                            ],
+                        },
+                    },
+                },
+            ],
         });
 
         config.resolve.plugins = [new TsconfigPathsPlugin()];
diff --git a/packages/browser-wallet/.storybook/preview.jsx b/packages/browser-wallet/.storybook/preview.jsx
index a5d399975..20f9bcfd5 100644
--- a/packages/browser-wallet/.storybook/preview.jsx
+++ b/packages/browser-wallet/.storybook/preview.jsx
@@ -3,6 +3,14 @@ import React, { useEffect } from 'react';
 import '../src/popup/index.scss';
 import '../src/popup/shell/i18n';
 
+// Workaround for bigint serialization error: https://github.com/storybookjs/storybook/issues/22452
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+// eslint-disable-next-line no-extend-native, func-names
+BigInt.prototype.toJSON = function () {
+    return this.toString();
+};
+
 document.getElementsByTagName('html').item(0)?.classList.add('ui-scale-large');
 
 /**
@@ -30,14 +38,46 @@ const themeDecorator = (Story, { globals, parameters }) => {
     return <Story />;
 };
 
+/**
+ * Adds custom styling to the HTML surrounding individual stories.
+ */
+const customStyleDecorator = (Story) => {
+    return (
+        <div style={{ padding: '0.5rem' }}>
+            <Story />
+        </div>
+    );
+};
+
 export const parameters = {
+    viewport: {
+        viewports: {
+            Small: {
+                name: 'Small',
+                styles: {
+                    width: '312px',
+                    height: '528px',
+                },
+            },
+            Normal: {
+                name: 'Normal',
+                styles: {
+                    width: '375px',
+                    height: '600px',
+                },
+            },
+        },
+        // Optionally, you can set default viewports
+        defaultViewport: 'Normal',
+    },
     controls: {
         matchers: {
             color: /(background|color)$/i,
             date: /Date$/,
         },
     },
+    backgrounds: { default: 'dark' },
 };
 
-export const decorators = [themeDecorator];
+export const decorators = [themeDecorator, customStyleDecorator];
 export const tags = ['autodocs'];
diff --git a/packages/browser-wallet/package.json b/packages/browser-wallet/package.json
index 493b7f5b6..34a1ac9b9 100644
--- a/packages/browser-wallet/package.json
+++ b/packages/browser-wallet/package.json
@@ -64,6 +64,7 @@
         "@storybook/addon-essentials": "^8.3.5",
         "@storybook/addon-interactions": "^8.3.5",
         "@storybook/addon-links": "^8.3.5",
+        "@storybook/addon-viewport": "^8.3.5",
         "@storybook/addon-webpack5-compiler-swc": "^1.0.5",
         "@storybook/preset-scss": "^1.0.3",
         "@storybook/react": "^8.3.5",
diff --git a/packages/browser-wallet/src/popup/popupX/pages/MainPage/MainPage.tsx b/packages/browser-wallet/src/popup/popupX/pages/MainPage/MainPage.tsx
index 47f10acfd..de05f0d55 100644
--- a/packages/browser-wallet/src/popup/popupX/pages/MainPage/MainPage.tsx
+++ b/packages/browser-wallet/src/popup/popupX/pages/MainPage/MainPage.tsx
@@ -21,6 +21,7 @@ import FileText from '@assets/svgX/file-text.svg';
 import ConcordiumLogo from '@assets/svgX/concordium-logo.svg';
 import Plant from '@assets/svgX/plant.svg';
 import Gear from '@assets/svgX/gear.svg';
+import { formatTokenAmount } from '@popup/popupX/shared/utils/helpers';
 
 /** Hook loading every fungible token added to the account. */
 function useAccountFungibleTokens(account: WalletCredential) {
@@ -34,22 +35,11 @@ function useAccountTokenBalance(accountAddress: string, contractAddress: string,
     return balance;
 }
 
-/** Display a token balance with a number of decimals. Localized. */
-function formatBalance(balance: bigint, decimals: number = 0) {
-    const padded = balance.toString().padStart(decimals + 1, '0');
-    const integer = padded.slice(0, -decimals);
-    const fraction = padded.slice(-decimals);
-    const balanceFormatter = new Intl.NumberFormat(undefined, { minimumFractionDigits: decimals });
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore format below supports strings, TypeScript is just not aware.
-    return balanceFormatter.format(`${integer}.${fraction}`);
-}
-
 type TokenBalanceProps = { decimals?: number; tokenId: string; contractAddress: string; accountAddress: string };
 /** Component for fetching and displaying a CIS-2 token balance of an account. */
 function AccountTokenBalance({ decimals, tokenId, contractAddress, accountAddress }: TokenBalanceProps) {
     const balanceRaw = useAccountTokenBalance(accountAddress, contractAddress, tokenId) ?? 0n;
-    const balance = useMemo(() => formatBalance(balanceRaw, decimals), [balanceRaw]);
+    const balance = useMemo(() => formatTokenAmount(balanceRaw, decimals), [balanceRaw]);
     return <span>{balance}</span>;
 }
 
diff --git a/packages/browser-wallet/src/popup/popupX/shared/Form/Form.scss b/packages/browser-wallet/src/popup/popupX/shared/Form/Form.scss
index ed557a006..39ba6da5d 100644
--- a/packages/browser-wallet/src/popup/popupX/shared/Form/Form.scss
+++ b/packages/browser-wallet/src/popup/popupX/shared/Form/Form.scss
@@ -24,8 +24,10 @@
         margin-bottom: rem(8px);
         width: 100%;
         outline: none;
-        font-size: rem(14px); /* override base style, remove after release */
-        transform: unset; /* override base style, remove after release */
+        font-size: rem(14px);
+        /* override base style, remove after release */
+        transform: unset;
+        /* override base style, remove after release */
         @include transition(border-color);
 
         &:focus {
@@ -76,6 +78,7 @@
         transform: unset;
 
         svg {
+
             g,
             path {
                 fill: $color-mineral-3;
@@ -110,11 +113,11 @@ $handle-size: rem(20px);
 
 .form-toggle-x {
     &__root {
-        input:checked + .form-toggle-x__slider {
+        input:checked+.form-toggle-x__slider {
             background-color: $color-green-toggle;
         }
 
-        input:checked + .form-toggle-x__slider::before {
+        input:checked+.form-toggle-x__slider::before {
             transform: translateX(rem(24px));
         }
     }
@@ -191,11 +194,11 @@ $handle-size: rem(20px);
             }
         }
 
-        &:hover input ~ .checkmark {
+        &:hover input~.checkmark {
             background-color: $color-grey-3;
         }
 
-        input:checked ~ .checkmark::after {
+        input:checked~.checkmark::after {
             display: block;
         }
 
@@ -206,3 +209,7 @@ $handle-size: rem(20px);
         }
     }
 }
+
+.form-error-message {
+    color: $color-red-attention !important;
+}
diff --git a/packages/browser-wallet/src/popup/popupX/shared/Form/Password/Password.tsx b/packages/browser-wallet/src/popup/popupX/shared/Form/Password/Password.tsx
index 852840ec3..ee99d1a20 100644
--- a/packages/browser-wallet/src/popup/popupX/shared/Form/Password/Password.tsx
+++ b/packages/browser-wallet/src/popup/popupX/shared/Form/Password/Password.tsx
@@ -32,7 +32,7 @@ type Props = Pick<InputHTMLAttributes<HTMLInputElement>, 'className' | 'autoFocu
  * Password input with reveal button and optional strength check.
  */
 export function Password({ showStrength = false, value, className, autoFocus, ...props }: Props) {
-    const { t } = useTranslation();
+    const { t } = useTranslation('x', { keyPrefix: 'sharedX' });
     const [reveal, setReveal] = useState(false);
 
     const strength = useMemo(
diff --git a/packages/browser-wallet/src/popup/popupX/shared/Form/TokenAmount/TokenAmount.scss b/packages/browser-wallet/src/popup/popupX/shared/Form/TokenAmount/TokenAmount.scss
new file mode 100644
index 000000000..1ad87a397
--- /dev/null
+++ b/packages/browser-wallet/src/popup/popupX/shared/Form/TokenAmount/TokenAmount.scss
@@ -0,0 +1,140 @@
+.token-amount {
+    display: flex;
+    flex-direction: column;
+    border-radius: rem(16px);
+    background: $gradient-card-bg;
+    margin-top: rem(16px);
+    padding: rem(20px) rem(16px);
+
+    .text__main_medium,
+    .text__main {
+        color: $color-black;
+    }
+
+    .capture__main_small {
+        color: $color-grey-3
+    }
+
+    .capture__additional_small {
+        padding: rem(4px);
+        border-radius: rem(4px);
+        color: $color-black;
+        background: $secondary-button-bg;
+    }
+
+    &_token,
+    &_amount,
+    &_receiver {
+        display: flex;
+        flex-direction: column;
+    }
+
+    &_token {
+        .token-selector-container {
+            flex-wrap: wrap;
+            display: flex;
+            align-items: center;
+            margin-top: rem(12px);
+            padding-bottom: rem(12px);
+            border-bottom: 1px solid rgba($color-black, 0.1);
+
+            .token-selector {
+                display: flex;
+                cursor: pointer;
+                position: relative;
+            }
+
+            .text__additional_small {
+                margin-left: auto;
+                text-wrap: nowrap;
+            }
+
+            .token-icon {
+                display: flex;
+                padding: rem(5px);
+                margin-right: rem(8px);
+                border-radius: rem(6px);
+                background: $color-grey-1;
+
+                svg,
+                img {
+                    width: rem(14px);
+                    height: rem(14px);
+                }
+            }
+
+            select {
+                appearance: none;
+                background: none;
+                border: none;
+                position: absolute;
+                z-index: 0;
+                color: transparent;
+                width: 100%;
+                height: 100%;
+
+                &::selection {
+                    background-color: transparent;
+                }
+            }
+        }
+    }
+
+    &_amount {
+        position: relative;
+        margin-top: rem(24px);
+
+        &_selector {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: rem(8px) 0;
+            margin-bottom: rem(4px);
+            border-bottom: 1px solid rgba($color-black, 0.1);
+
+            .heading_medium {
+                color: $color-black;
+            }
+        }
+
+        &_field {
+            flex: 1;
+            min-width: 0;
+            margin-right: rem(4px);
+        }
+
+        &_max {
+            flex: 0;
+            text-wrap: nowrap;
+        }
+    }
+
+    &_field {
+        border: none;
+        width: 100%;
+        background: none;
+
+        &--invalid {
+            color: $color-red-attention !important;
+        }
+    }
+
+    button.capture__additional_small {
+        border: unset;
+        cursor: pointer;
+    }
+
+    &_receiver {
+        margin-top: rem(24px);
+
+        .address-selector {
+            display: flex;
+            justify-content: space-between;
+            margin-top: rem(12px);
+        }
+
+        textarea {
+            resize: none;
+        }
+    }
+}
diff --git a/packages/browser-wallet/src/popup/popupX/shared/Form/TokenAmount/TokenAmount.stories.tsx b/packages/browser-wallet/src/popup/popupX/shared/Form/TokenAmount/TokenAmount.stories.tsx
new file mode 100644
index 000000000..ca72059ef
--- /dev/null
+++ b/packages/browser-wallet/src/popup/popupX/shared/Form/TokenAmount/TokenAmount.stories.tsx
@@ -0,0 +1,95 @@
+/* eslint-disable no-console */
+/* eslint-disable prefer-destructuring */
+import React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import { CcdAmount, ContractAddress } from '@concordium/web-sdk';
+import { PropsOf } from 'wallet-common-helpers';
+
+import TokenAmountView, { AmountReceiveForm } from './View';
+import Form, { useForm } from '..';
+
+function Wrapper(props: PropsOf<typeof TokenAmountView>) {
+    const form = useForm<AmountReceiveForm>({
+        mode: 'onTouched',
+        defaultValues: {
+            amount: '1,000.00',
+            receiver: '3ybJ66spZ2xdWF3avgxQb2meouYa7mpvMWNPmUnczU8FoF8cGB',
+        },
+    });
+    return (
+        <Form formMethods={form} onSubmit={console.log}>
+            {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
+            {() => <TokenAmountView {...props} form={form as any} />}
+        </Form>
+    );
+}
+
+export default {
+    title: 'X/Shared/Form/TokenAmount',
+    component: TokenAmountView,
+    render: (props) => <Wrapper {...props} />,
+    beforeEach: () => {
+        const body = document.getElementsByTagName('body').item(0);
+        body?.classList.add('popup-x');
+
+        return () => {
+            body?.classList.remove('popup-x');
+        };
+    },
+} as Meta<typeof TokenAmountView>;
+
+type Story = StoryObj<typeof TokenAmountView>;
+
+const tokens = [
+    {
+        id: '',
+        contract: ContractAddress.create(123, 0),
+        metadata: {
+            symbol: 'wETH',
+            name: 'Wrapped Ether',
+            decimals: 18,
+            thumbnail: { url: 'https://s2.coinmarketcap.com/static/img/coins/64x64/2396.png' },
+        },
+    },
+    {
+        id: '',
+        contract: ContractAddress.create(432, 0),
+        metadata: { symbol: 'wCCD', name: 'Wrapped CCD', decimals: 6 },
+    },
+];
+
+export const OnlyAmount: Story = {
+    args: {
+        tokenType: 'ccd',
+        fee: CcdAmount.fromCcd(0.032),
+        buttonMaxLabel: 'Stake max.',
+        receiver: false,
+        tokens,
+        balance: 17004000000n,
+        onSelectToken: console.log,
+    },
+};
+
+export const WithReceiver: Story = {
+    args: {
+        buttonMaxLabel: 'Send max.',
+        fee: CcdAmount.fromCcd(0.032),
+        receiver: true,
+        tokens,
+        balance: 17004000000n,
+        onSelectToken: console.log,
+    },
+};
+
+export const TokenWithReceiver: Story = {
+    args: {
+        tokenType: 'cis2',
+        tokenAddress: { id: '', contract: ContractAddress.create(123, 0) },
+        buttonMaxLabel: 'Send max.',
+        fee: CcdAmount.fromCcd(0.132),
+        receiver: true,
+        tokens,
+        balance: 17004000000n,
+        onSelectToken: console.log,
+    },
+};
diff --git a/packages/browser-wallet/src/popup/popupX/shared/Form/TokenAmount/TokenAmount.tsx b/packages/browser-wallet/src/popup/popupX/shared/Form/TokenAmount/TokenAmount.tsx
new file mode 100644
index 000000000..79ed84ea9
--- /dev/null
+++ b/packages/browser-wallet/src/popup/popupX/shared/Form/TokenAmount/TokenAmount.tsx
@@ -0,0 +1,90 @@
+import React, { useState } from 'react';
+import { atomFamily, selectAtom, useAtomValue } from 'jotai/utils';
+import { AccountAddress, AccountInfo, ContractAddress, CIS2 } from '@concordium/web-sdk';
+import { atom } from 'jotai';
+
+import { contractBalancesFamily } from '@popup/store/token';
+import TokenAmountView, { TokenAmountViewProps } from './View';
+import { useTokenInfo } from './util';
+
+const tokenAddressEq = (a: CIS2.TokenAddress | null, b: CIS2.TokenAddress | null) => {
+    if (a !== null && b !== null) {
+        return a.id === b.id && ContractAddress.equals(a.contract, b.contract);
+    }
+
+    return a === b;
+};
+
+const balanceAtomFamily = atomFamily(
+    ([account, tokenAddress]: [AccountInfo, CIS2.TokenAddress | null]) => {
+        if (tokenAddress === null) {
+            return atom(account.accountAvailableBalance.microCcdAmount);
+        }
+        const tokens = contractBalancesFamily(account.accountAddress.address, tokenAddress.contract.index.toString());
+        return selectAtom(tokens, (ts) => ts[tokenAddress.id]);
+    },
+    ([aa, ta], [ab, tb]) => AccountAddress.equals(aa.accountAddress, ab.accountAddress) && tokenAddressEq(ta, tb)
+);
+
+type Props = Omit<TokenAmountViewProps, 'tokens' | 'balance' | 'onSelectToken'> & {
+    /** The account info of the account to take the amount from */
+    accountInfo: AccountInfo;
+};
+
+/**
+ * TokenAmount component renders a form for transferring tokens with an amount field and optionally a receiver field.
+ *
+ * @example
+ * const formMethods = useForm<AmountReceiveForm>();
+ * const tokens = [{
+ *   id: '',
+ *   contract: ContractAddress.create(1),
+ *   metadata: { symbol: 'wETH', name: 'Wrapped Ether', decimals: 18 },
+ * }];
+ *
+ * // Usage with token picker & receiver
+ * <TokenAmount
+ *   buttonMaxLabel="Max"
+ *   fee={CcdAmount.fromMicroCcd(1000n)}
+ *   form={formMethods}
+ *   receiver
+ * />
+ *
+ * // Usage with CCD token
+ * const formMethods = useForm<AmountForm>();
+ * <TokenAmount
+ *   buttonMaxLabel="Max"
+ *   fee={CcdAmount.fromMicroCcd(1000n)}
+ *   form={formMethods}
+ *   token="ccd"
+ * />
+ *
+ * // Usage with CIS2 token + receiver
+ * const formMethods = useForm<AmountReceiveForm>();
+ * <TokenAmount
+ *   buttonMaxLabel="Max"
+ *   fee={CcdAmount.fromMicroCcd(1000n)}
+ *   form={formMethods}
+ *   receiver
+ *   token="cis2"
+ *   address={{ id: '', contract: ContractAddress.create(1) }}
+ * />
+ */
+export default function TokenAmount({ accountInfo, ...props }: Props) {
+    const tokenInfo = useTokenInfo(accountInfo.accountAddress);
+    const [tokenAddress, setTokenAddress] = useState<CIS2.TokenAddress | null>(null);
+    const tokenBalance = useAtomValue(balanceAtomFamily([accountInfo, tokenAddress]));
+
+    if (tokenInfo.loading) {
+        return null;
+    }
+
+    return (
+        <TokenAmountView
+            {...(props as TokenAmountViewProps)}
+            tokens={tokenInfo.value}
+            onSelectToken={setTokenAddress}
+            balance={tokenBalance}
+        />
+    );
+}
diff --git a/packages/browser-wallet/src/popup/popupX/shared/Form/TokenAmount/View.tsx b/packages/browser-wallet/src/popup/popupX/shared/Form/TokenAmount/View.tsx
new file mode 100644
index 000000000..20618d4fe
--- /dev/null
+++ b/packages/browser-wallet/src/popup/popupX/shared/Form/TokenAmount/View.tsx
@@ -0,0 +1,420 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable react/destructuring-assignment */
+import React, { InputHTMLAttributes, ReactNode, forwardRef, useCallback, useEffect, useMemo, useState } from 'react';
+import { UseFormReturn, Validate } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import clsx from 'clsx';
+import { CIS2, CcdAmount, ContractAddress } from '@concordium/web-sdk';
+import { CCD_METADATA } from '@shared/constants/token-metadata';
+import { ensureDefined } from '@shared/utils/basic-helpers';
+import SideArrow from '@assets/svgX/side-arrow.svg';
+import ConcordiumLogo from '@assets/svgX/concordium-logo.svg';
+import { validateAccountAddress, validateTransferAmount } from '@popup/shared/utils/transaction-helpers';
+import Img, { DEFAULT_FAILED } from '@popup/shared/Img';
+import { displayAsCcd } from 'wallet-common-helpers';
+import { RequiredUncontrolledFieldProps } from '../common/types';
+import { makeUncontrolled } from '../common/utils';
+import Button from '../../Button';
+import { formatTokenAmount, parseTokenAmount, removeNumberGrouping } from '../../utils/helpers';
+import ErrorMessage from '../ErrorMessage';
+import { TokenInfo } from './util';
+
+type AmountInputProps = Pick<
+    InputHTMLAttributes<HTMLInputElement>,
+    'className' | 'type' | 'value' | 'onChange' | 'onBlur' | 'autoFocus'
+> &
+    RequiredUncontrolledFieldProps<HTMLInputElement>;
+
+/**
+ * @description
+ * Use as a normal \<input /\>. Should NOT be used for checkbox or radio.
+ */
+const InputClear = forwardRef<HTMLInputElement, AmountInputProps>(
+    ({ error, className, type = 'text', ...props }, ref) => {
+        return (
+            <input
+                className={clsx('token-amount_field', error !== undefined && 'token-amount_field--invalid', className)}
+                type={type}
+                ref={ref}
+                autoComplete="off"
+                spellCheck="false"
+                {...props}
+            />
+        );
+    }
+);
+
+const FormInputClear = makeUncontrolled(InputClear);
+
+type ReceiverInputProps = Pick<
+    InputHTMLAttributes<HTMLTextAreaElement>,
+    'className' | 'value' | 'onChange' | 'onBlur' | 'autoFocus'
+> &
+    RequiredUncontrolledFieldProps<HTMLInputElement>;
+
+/**
+ * @description
+ * Use as a normal \<textarea /\>.
+ */
+const ReceiverInput = forwardRef<HTMLTextAreaElement, ReceiverInputProps>(({ error, className, ...props }, ref) => {
+    return (
+        <textarea
+            className={clsx('token-amount_field', error !== undefined && 'token-amount_field--invalid', className)}
+            ref={ref}
+            autoComplete="off"
+            spellCheck="false"
+            {...props}
+        />
+    );
+});
+
+const FormReceiverInput = makeUncontrolled(ReceiverInput);
+
+const parseTokenSelectorId = (value: string): null | CIS2.TokenAddress => {
+    if (value.startsWith('ccd')) {
+        return null;
+    }
+
+    const [, index, subindex, id] = value.split(':');
+    return { id, contract: ContractAddress.create(BigInt(index), BigInt(subindex)) };
+};
+
+const formatTokenSelectorId = (address: null | CIS2.TokenAddress) => {
+    if (address == null) {
+        return 'ccd';
+    }
+    return `cis2:${address.contract.index}:${address.contract.subindex}:${address.id}`;
+};
+
+const DEFAULT_TOKEN_THUMBNAIL = DEFAULT_FAILED;
+
+type TokenPickerProps = {
+    /** null == CCD */
+    selectedToken: null | TokenInfo;
+    /** The set of tokens available for the account specified by `accountInfo` */
+    tokens: TokenInfo[];
+    /** Callback invoked when a token is selected */
+    onSelect(value: null | CIS2.TokenAddress): void;
+    /** Whether to enable selection */
+    canSelect?: boolean;
+    /** The balance of the selected token */
+    selectedTokenBalance: bigint | undefined;
+    /** function to format token amounts */
+    formatAmount(amountValue: bigint): string;
+};
+
+function TokenPicker({
+    selectedToken,
+    tokens,
+    onSelect,
+    canSelect = false,
+    selectedTokenBalance,
+    formatAmount,
+}: TokenPickerProps) {
+    const { t } = useTranslation('x', { keyPrefix: 'sharedX' });
+    const token: {
+        name: string;
+        icon: ReactNode;
+        decimals: number;
+        type: 'ccd' | 'cis2';
+        address: null | CIS2.TokenAddress;
+    } = useMemo(() => {
+        if (selectedToken !== null) {
+            const {
+                metadata: { symbol, name, decimals = 0, thumbnail },
+                id,
+                contract,
+            } = ensureDefined(
+                tokens.find(
+                    (tk) => tk.id === selectedToken.id && ContractAddress.equals(tk.contract, selectedToken.contract)
+                ),
+                'Expected the token specified to be available in the set of tokens given'
+            );
+            const safeName = symbol ?? name ?? `${selectedToken.id}@${selectedToken.contract.toString()}`;
+            const tokenImage = thumbnail?.url ?? DEFAULT_TOKEN_THUMBNAIL;
+            const icon = <Img src={tokenImage} alt={name} withDefaults />;
+            return { name: safeName, icon, decimals, type: 'cis2', address: { id, contract } };
+        }
+        const name = 'CCD';
+        const icon = <ConcordiumLogo />;
+        return { name, icon, decimals: 6, type: 'ccd', address: null };
+    }, [selectedToken]);
+
+    return (
+        <div className="token-selector-container">
+            <label className="token-selector">
+                {canSelect && (
+                    <select
+                        value={formatTokenSelectorId(selectedToken)}
+                        onChange={(e) => onSelect(parseTokenSelectorId(e.target.value))}
+                    >
+                        <option value={formatTokenSelectorId(null)}>CCD</option>
+                        {tokens.map((tk) => {
+                            const id = formatTokenSelectorId(tk);
+                            return (
+                                <option key={id} value={id}>
+                                    {tk.metadata.symbol ?? tk.metadata.name ?? `${tk.id}@${tk.contract.toString()}`}
+                                </option>
+                            );
+                        })}
+                    </select>
+                )}
+                <div className="token-icon">{token.icon}</div>
+                <span className="text__main">{token.name}</span>
+                {canSelect && <SideArrow />}
+            </label>
+            {selectedTokenBalance !== undefined && (
+                <span className="text__additional_small">
+                    {t('form.tokenAmount.token.available', {
+                        balance: formatAmount(selectedTokenBalance),
+                    })}
+                </span>
+            )}
+        </div>
+    );
+}
+
+type TokenVariant =
+    | {
+          /** The token type. If undefined, a token picker is rendered */
+          tokenType?: 'ccd';
+      }
+    | {
+          /** The token type. If undefined, a token picker is rendered */
+          tokenType: 'cis2';
+          /** The token address */
+          tokenAddress: CIS2.TokenAddress;
+      };
+
+/**
+ * @description
+ * Represents a form with an amount field.
+ */
+export type AmountForm = {
+    /** The amount to be transferred */
+    amount: string;
+};
+
+/**
+ * @description
+ * Represents a form with an amount field and a receiver field.
+ */
+export type AmountReceiveForm = AmountForm & {
+    /** The receiver of the amount */
+    receiver: string;
+};
+
+type ValueVariant =
+    | {
+          /** Whether it should be possible to specify a receiver. Defaults to false */
+          receiver?: false;
+          /** The form type control for the inner fields */
+          form: UseFormReturn<AmountForm>;
+      }
+    | {
+          /** Whether it should be possible to specify a receiver. Defaults to false */
+          receiver: true;
+          /** The form type control for the inner fields */
+          form: UseFormReturn<AmountReceiveForm>;
+      };
+
+/** The event emitted when a token is selected internally. `null` is used when CCD is selected. */
+export type TokenSelectEvent = null | CIS2.TokenAddress;
+
+export type TokenAmountViewProps = {
+    /** The label used for the button setting the amount to the maximum possible */
+    buttonMaxLabel: string;
+    /** The fee associated with the transaction */
+    fee: CcdAmount.Type;
+    /** The set of tokens available for the account specified by `accountInfo` */
+    tokens: TokenInfo[];
+    /** The token balance. `undefined` should be used to indicate that the balance is not yet available. */
+    balance: bigint | undefined;
+    /**
+     * Callback invoked when the user selects a token. This is also invoked when the component renders initially.
+     * `null` is used to communicate the native token (CCD) is selected.
+     */
+    onSelectToken(event: TokenSelectEvent): void;
+} & ValueVariant &
+    TokenVariant;
+
+/**
+ * TokenAmount component renders a form for transferring tokens with an amount field and optionally a receiver field.
+ *
+ * Generally the version connected to the application store (`TokenAmount`) should be used instead of this.
+ */
+export default function TokenAmountView(props: TokenAmountViewProps) {
+    const { t } = useTranslation('x', { keyPrefix: 'sharedX' });
+    const { buttonMaxLabel, fee, tokens, balance, onSelectToken } = props;
+    const [selectedToken, setSelectedToken] = useState<TokenInfo | null>(() => {
+        switch (props.tokenType) {
+            case 'cis2': {
+                return ensureDefined(
+                    tokens.find(
+                        (tk) =>
+                            tk.id === props.tokenAddress.id &&
+                            ContractAddress.equals(tk.contract, props.tokenAddress.contract)
+                    ),
+                    'Expected the token specified to be available in the set of tokens given'
+                );
+            }
+            case 'ccd':
+            case undefined: {
+                return null;
+            }
+            default:
+                throw new Error('Unreachable');
+        }
+    });
+
+    const handleTokenSelect = useCallback(
+        (value: null | CIS2.TokenAddress) => {
+            if (value === null) {
+                setSelectedToken(value);
+            } else {
+                const selected = ensureDefined(
+                    tokens.find((tk) => tk.id === value.id && ContractAddress.equals(tk.contract, value.contract)),
+                    'Expected the token specified to be available in the set of tokens given'
+                );
+                setSelectedToken(selected);
+            }
+        },
+        [tokens, setSelectedToken]
+    );
+
+    const tokenDecimals = useMemo(() => {
+        if (selectedToken === null) {
+            return CCD_METADATA.decimals;
+        }
+        return selectedToken.metadata.decimals ?? 0;
+    }, [selectedToken]);
+
+    useEffect(() => {
+        onSelectToken(selectedToken);
+    }, [selectedToken]);
+
+    const formatAmount = useCallback(
+        (amountValue: bigint) => formatTokenAmount(amountValue, tokenDecimals, 2),
+        [tokenDecimals]
+    );
+    const parseAmount = useCallback(
+        (amountValue: string) => parseTokenAmount(amountValue, tokenDecimals),
+        [tokenDecimals]
+    );
+
+    const availableAmount: bigint | undefined = useMemo(() => {
+        if (balance === undefined) {
+            return undefined;
+        }
+        return selectedToken === null ? balance - fee.microCcdAmount : balance;
+    }, [selectedToken, fee, balance]);
+
+    const setMax = useCallback(() => {
+        if (availableAmount === undefined) return;
+
+        (props.form as UseFormReturn<AmountForm>).setValue('amount', formatAmount(availableAmount) ?? '', {
+            shouldDirty: true,
+            shouldTouch: true,
+            shouldValidate: true,
+        });
+    }, [availableAmount, props.form]);
+
+    const handleAmountBlur: React.FocusEventHandler<HTMLInputElement> = useCallback(
+        (event) => {
+            const { value } = event.target;
+
+            if (value === '') {
+                return;
+            }
+
+            try {
+                const formatted = formatAmount(parseAmount(value));
+                if (formatted !== value) {
+                    (props.form as UseFormReturn<AmountForm>).setValue('amount', formatted ?? '');
+                }
+            } catch {
+                // Do nothing...
+            }
+        },
+        [props.form, formatAmount, parseAmount]
+    );
+
+    const validateAmount: Validate<string> = useCallback(
+        (value) =>
+            validateTransferAmount(
+                removeNumberGrouping(value),
+                balance,
+                tokenDecimals,
+                selectedToken === null ? fee.microCcdAmount : 0n
+            ),
+        [balance, tokenDecimals, selectedToken, fee]
+    );
+
+    return (
+        <div className="token-amount">
+            <div className="token-amount_token">
+                <span className="text__main_medium">{t('form.tokenAmount.token.label')}</span>
+                {props.tokenType !== undefined ? (
+                    <TokenPicker
+                        selectedToken={selectedToken}
+                        onSelect={handleTokenSelect}
+                        tokens={tokens}
+                        selectedTokenBalance={balance}
+                        formatAmount={formatAmount}
+                    />
+                ) : (
+                    <TokenPicker
+                        selectedToken={selectedToken}
+                        onSelect={handleTokenSelect}
+                        tokens={tokens}
+                        canSelect
+                        selectedTokenBalance={balance}
+                        formatAmount={formatAmount}
+                    />
+                )}
+            </div>
+            <div className="token-amount_amount">
+                <span className="text__main_medium">Amount</span>
+                <div className="token-amount_amount_selector">
+                    <FormInputClear
+                        className="heading_medium token-amount_amount_field"
+                        register={(props.form as UseFormReturn<AmountForm>).register}
+                        name="amount"
+                        onBlur={handleAmountBlur}
+                        rules={{
+                            required: t('utils.amount.required'),
+                            min: { value: 0, message: t('utils.amount.zero') },
+                            validate: validateAmount,
+                        }}
+                    />
+                    <Button.Base className="capture__additional_small token-amount_amount_max" onClick={() => setMax()}>
+                        {buttonMaxLabel}
+                    </Button.Base>
+                </div>
+                <ErrorMessage className="capture__main_small">
+                    {props.form.formState.errors.amount?.message}
+                </ErrorMessage>
+                <span className="capture__main_small">
+                    {t('form.tokenAmount.amount.fee', { fee: displayAsCcd(fee, false, true) })}
+                </span>
+            </div>
+            {props.receiver === true && (
+                <div className="token-amount_receiver">
+                    <span className="text__main_medium">{t('form.tokenAmount.address.label')}</span>
+                    <FormReceiverInput
+                        className="text__main"
+                        register={(props.form as UseFormReturn<AmountReceiveForm>).register}
+                        name="receiver"
+                        rules={{
+                            required: t('utils.address.required'),
+                            validate: validateAccountAddress,
+                        }}
+                    />
+                    <ErrorMessage className="capture__main_small">
+                        {props.form.formState.errors.receiver?.message}
+                    </ErrorMessage>
+                </div>
+            )}
+        </div>
+    );
+}
diff --git a/packages/browser-wallet/src/popup/popupX/shared/Form/TokenAmount/index.ts b/packages/browser-wallet/src/popup/popupX/shared/Form/TokenAmount/index.ts
new file mode 100644
index 000000000..a77bfa962
--- /dev/null
+++ b/packages/browser-wallet/src/popup/popupX/shared/Form/TokenAmount/index.ts
@@ -0,0 +1,2 @@
+export { default } from './TokenAmount';
+export { type AmountForm, type AmountReceiveForm } from './View';
diff --git a/packages/browser-wallet/src/popup/popupX/shared/Form/TokenAmount/util.ts b/packages/browser-wallet/src/popup/popupX/shared/Form/TokenAmount/util.ts
new file mode 100644
index 000000000..27496c64b
--- /dev/null
+++ b/packages/browser-wallet/src/popup/popupX/shared/Form/TokenAmount/util.ts
@@ -0,0 +1,38 @@
+import { AccountAddress, CIS2, ContractAddress } from '@concordium/web-sdk';
+import { accountTokensFamily } from '@popup/store/token';
+import { TokenMetadata } from '@shared/storage/types';
+import { useAtomValue } from 'jotai';
+
+/** Token info in the format expected by the `TokenAmount` component */
+export type TokenInfo = CIS2.TokenAddress & {
+    /** The token metadata corresponding to the {@linkcode CIS2.TokenAddress} */
+    metadata: TokenMetadata;
+};
+
+type TokenInfoResponse = { loading: true } | { loading: false; value: TokenInfo[] };
+
+/**
+ * Custom hook to fetch token information for a given account. This matches the format expected by the `TokenAmount` component
+ *
+ * @param {AccountAddress.Type} account - The account address for which to fetch token information.
+ * @returns {TokenInfoResponse} - An object containing a loading state and an array of token information.
+ */
+export function useTokenInfo(account: AccountAddress.Type): TokenInfoResponse {
+    const { value, loading } = useAtomValue(accountTokensFamily(account.address));
+
+    if (loading === true) {
+        return { loading: true };
+    }
+
+    const mapped = Object.entries(value).flatMap(([index, tokens]) =>
+        tokens.map(
+            (t): TokenInfo => ({
+                contract: ContractAddress.create(BigInt(index)),
+                id: t.id,
+                metadata: t.metadata,
+            })
+        )
+    );
+
+    return { loading: false, value: mapped };
+}
diff --git a/packages/browser-wallet/src/popup/popupX/shared/Form/common/types.ts b/packages/browser-wallet/src/popup/popupX/shared/Form/common/types.ts
index be0bfb440..5d20cbd6b 100644
--- a/packages/browser-wallet/src/popup/popupX/shared/Form/common/types.ts
+++ b/packages/browser-wallet/src/popup/popupX/shared/Form/common/types.ts
@@ -9,7 +9,7 @@ export type RequiredFormFieldProps = {
     /**
      * Sets valid state of the field. This has no effect if an error is also set.
      */
-    valid?: boolean;
+    valid?: boolean; // TODO: in practice this is a number, either 0 or 1???
 };
 export type RequiredControlledFieldProps = RequiredFormFieldProps &
     Omit<Partial<ControllerRenderProps>, 'ref' | 'onBlur'> & {
diff --git a/packages/browser-wallet/src/popup/popupX/shared/i18n/en.ts b/packages/browser-wallet/src/popup/popupX/shared/i18n/en.ts
index cf5a5fae0..0978b4a34 100644
--- a/packages/browser-wallet/src/popup/popupX/shared/i18n/en.ts
+++ b/packages/browser-wallet/src/popup/popupX/shared/i18n/en.ts
@@ -6,6 +6,28 @@ const t = {
             medium: 'Medium',
             strong: 'Strong',
         },
+        tokenAmount: {
+            token: {
+                label: 'Token',
+                available: '{{balance}} available',
+            },
+            amount: {
+                label: 'Amount',
+                fee: 'Estimated transaction fee: {{fee}}',
+            },
+            address: {
+                label: 'Receiver address',
+            },
+        },
+    },
+    utils: {
+        address: {
+            required: 'Please enter an address',
+        },
+        amount: {
+            required: 'Please enter an amount',
+            zero: 'Amount may not be zero',
+        },
     },
 };
 
diff --git a/packages/browser-wallet/src/popup/popupX/shared/utils/helpers.ts b/packages/browser-wallet/src/popup/popupX/shared/utils/helpers.ts
index b0ac61638..43906130e 100644
--- a/packages/browser-wallet/src/popup/popupX/shared/utils/helpers.ts
+++ b/packages/browser-wallet/src/popup/popupX/shared/utils/helpers.ts
@@ -9,6 +9,34 @@ export async function copyToClipboard(text: string): Promise<void> {
     }
 }
 
+export const removeNumberGrouping = (amount: string) => amount.replace(/,/g, '');
+
+/** Display a token amount with a number of decimals + number groupings (thousand separators) */
+export function formatTokenAmount(amount: bigint, decimals = 0, minDecimals = decimals) {
+    const padded = amount.toString().padStart(decimals + 1, '0'); // Ensure the string length is minimum decimals + 1 characters. For CCD, this would mean minimum 7 characters long
+    const integer = padded.slice(0, -decimals);
+    const fraction = padded.slice(-decimals);
+    const balanceFormatter = new Intl.NumberFormat('en-US', {
+        minimumFractionDigits: minDecimals,
+        maximumFractionDigits: decimals,
+        useGrouping: true,
+    });
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore format below supports strings, TypeScript is just not aware.
+    return balanceFormatter.format(`${integer}.${fraction}`);
+}
+
+/** An inverse of {@linkcode formatTokenAmount}, parsing formatted balances */
+export function parseTokenAmount(amount: string, decimals = 0): bigint {
+    // Remove grouping separators (e.g., commas)
+    const sanitizedAmount = removeNumberGrouping(amount);
+    const parts = sanitizedAmount.split('.');
+    const integerPart = parts[0] || '0';
+    const fractionPart = parts[1] ? parts[1].padEnd(decimals, '0') : ''.padEnd(decimals, '0');
+    const combined = integerPart + fractionPart;
+    return BigInt(combined);
+}
+
 export function useUrlDisplay() {
     const { state } = useLocation();
 
diff --git a/packages/browser-wallet/src/popup/popupX/styles/_elements.scss b/packages/browser-wallet/src/popup/popupX/styles/_elements.scss
index 3b5e22d07..f952427ce 100644
--- a/packages/browser-wallet/src/popup/popupX/styles/_elements.scss
+++ b/packages/browser-wallet/src/popup/popupX/styles/_elements.scss
@@ -39,3 +39,4 @@
 @import '../shared/ExternalLink/ExternalLink';
 @import '../shared/Carousel/Carousel';
 @import '../shared/Form/Form';
+@import '../shared/Form/TokenAmount/TokenAmount';
diff --git a/packages/browser-wallet/src/popup/shared/Img.tsx b/packages/browser-wallet/src/popup/shared/Img.tsx
index d95b17a0a..879617917 100644
--- a/packages/browser-wallet/src/popup/shared/Img.tsx
+++ b/packages/browser-wallet/src/popup/shared/Img.tsx
@@ -3,7 +3,7 @@ import React, { useState } from 'react';
 import { ClassName } from 'wallet-common-helpers';
 
 const DEFAULT_LOADING = '/assets/svg/loading_icon.svg';
-const DEFAULT_FAILED = '/assets/svg/no_icon.svg';
+export const DEFAULT_FAILED = '/assets/svg/no_icon.svg';
 
 type BaseProps = ClassName & {
     src?: string;
diff --git a/packages/browser-wallet/src/shared/utils/token-helpers.ts b/packages/browser-wallet/src/shared/utils/token-helpers.ts
index a7ed453a3..aeb6f17a6 100644
--- a/packages/browser-wallet/src/shared/utils/token-helpers.ts
+++ b/packages/browser-wallet/src/shared/utils/token-helpers.ts
@@ -107,21 +107,58 @@ function confirmString(field?: any) {
 export const getMetadataUnique = ({ unique }: TokenMetadata) => Boolean(unique);
 export const getMetadataDecimals = ({ decimals }: TokenMetadata) => Number(decimals ?? 0);
 
+export enum TokenMetadataErrorType {
+    FetchError = 'FetchError',
+    IncorrectChecksum = 'IncorrectChecksum',
+}
+
+export class TokenMetadataError extends Error {
+    constructor(public type: TokenMetadataErrorType, message?: string) {
+        super(message);
+        this.name = 'TokenMetadataError';
+    }
+}
+
 /**
- * Fetches token metadata from the given url
+ * Fetches and verifies the metadata URL.
+ *
+ * @param {MetadataUrl} url - The metadata URL and optional checksum hash.
+ * @returns {Promise<Buffer>} - The fetched data.
+ * @throws {TokenMetadataError} - If the fetch fails, the checksum is incorrect.
  */
-export async function getTokenMetadata({ url, hash: checksumHash }: MetadataUrl): Promise<TokenMetadata> {
+export async function getMetadataUrlChecked({ url, hash: checksumHash }: MetadataUrl): Promise<Buffer> {
     const resp = await fetch(url, { headers: new Headers({ 'Access-Control-Allow-Origin': '*' }), mode: 'cors' });
     if (!resp.ok) {
-        throw new Error(i18n.t('addTokens.metadata.fetchError', { status: resp.status }));
+        throw new TokenMetadataError(TokenMetadataErrorType.FetchError, resp.status.toString());
     }
 
     const body = Buffer.from(await resp.arrayBuffer());
     if (checksumHash && sha256([body]).toString('hex') !== checksumHash) {
-        throw new Error(i18n.t('addTokens.metadata.incorrectChecksum'));
+        throw new TokenMetadataError(TokenMetadataErrorType.IncorrectChecksum);
+    }
+    return body;
+}
+
+/**
+ * Fetches token metadata from the given url
+ */
+export async function getTokenMetadata(url: MetadataUrl): Promise<TokenMetadata> {
+    let body: Buffer;
+    try {
+        body = await getMetadataUrlChecked(url);
+    } catch (e) {
+        const err = e as TokenMetadataError;
+        switch (err.type) {
+            case TokenMetadataErrorType.FetchError:
+                throw new Error(i18n.t('addTokens.metadata.fetchError', { status: err.message }));
+            case TokenMetadataErrorType.IncorrectChecksum:
+                throw new Error(i18n.t('addTokens.metadata.incorrectChecksum'));
+            default:
+                throw err;
+        }
     }
 
-    let metadata;
+    let metadata: TokenMetadata;
     try {
         metadata = JSON.parse(body.toString());
     } catch (e) {
diff --git a/yarn.lock b/yarn.lock
index 08cd888ed..1b519e151 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2184,6 +2184,7 @@ __metadata:
     "@storybook/addon-essentials": ^8.3.5
     "@storybook/addon-interactions": ^8.3.5
     "@storybook/addon-links": ^8.3.5
+    "@storybook/addon-viewport": ^8.3.5
     "@storybook/addon-webpack5-compiler-swc": ^1.0.5
     "@storybook/preset-scss": ^1.0.3
     "@storybook/react": ^8.3.5
@@ -4221,7 +4222,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/addon-viewport@npm:8.3.5":
+"@storybook/addon-viewport@npm:8.3.5, @storybook/addon-viewport@npm:^8.3.5":
   version: 8.3.5
   resolution: "@storybook/addon-viewport@npm:8.3.5"
   dependencies: