diff --git a/bun.lockb b/bun.lockb
index b952b8c..a6adfba 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index 069ad93..ad68186 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "devwallet",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "private": true,
   "extension": {
     "name": "DW: DevWallet",
@@ -42,7 +42,7 @@
     "@radix-ui/react-form": "^0.0.3",
     "@radix-ui/react-polymorphic": "^0.0.14",
     "@radix-ui/react-popover": "^1.1.15",
-    "@radix-ui/react-progress": "^1.1.7",
+    "@radix-ui/react-progress": "^1.1.8",
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-tooltip": "^1.2.8",
     "@react-hook/resize-observer": "^1.2.6",
@@ -67,14 +67,14 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-flatten-children": "^1.1.2",
-    "react-hook-form": "^7.65.0",
+    "react-hook-form": "^7.66.0",
     "react-intersection-observer": "^9.16.0",
     "react-router": "^6.30.1",
     "react-router-dom": "^6.30.1",
     "remeda": "^1.61.0",
     "sonner": "^0.7.4",
     "use-sync-external-store": "^1.6.0",
-    "viem": "^2.38.3",
+    "viem": "^2.38.6",
     "zustand": "^4.5.7"
   },
   "devDependencies": {
@@ -90,7 +90,7 @@
     "@types/which-pm-runs": "^1.0.2",
     "@vanilla-extract/vite-plugin": "^4.0.20",
     "@vitejs/plugin-react": "^4.7.0",
-    "bun-types": "^1.3.0",
+    "bun-types": "^1.3.1",
     "cross-env": "^7.0.3",
     "globby": "^13.2.2",
     "patch-package": "^8.0.1",
diff --git a/src/app.tsx b/src/app.tsx
index fce28ee..71da54a 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -50,6 +50,7 @@ import OnboardingRun from './screens/onboarding/run'
 import OnboardingStart from './screens/onboarding/start'
 import Session from './screens/session'
 import Settings from './screens/settings'
+import TokenTransfer from './screens/token-transfer'
 import TransactionDetails from './screens/transaction-details'
 
 export function init({ type = 'standalone' }: { type?: AppMeta['type'] } = {}) {
@@ -73,6 +74,10 @@ export function init({ type = 'standalone' }: { type?: AppMeta['type'] } = {}) {
           path: 'account/:address',
           element: <AccountDetails />,
         },
+        {
+          path: 'transfer/:accountAddress/:tokenAddress?',
+          element: <TokenTransfer />,
+        },
         {
           path: 'block-config',
           element: <BlockConfig />,
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index ef6afd4..5b6a0b5 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -431,10 +431,9 @@ function BaseFee() {
   )
   if (!block) return null
   return (
-    <HeaderItem label="Base Fee">
+    <HeaderItem label="Base Fee (gwei)">
       <Text family="numeric" size="12px">
-        {intl.format(Number(formatGwei(block.baseFeePerGas!)))}{' '}
-        <Text color="text/tertiary">gwei</Text>
+        {intl.format(Number(formatGwei(block.baseFeePerGas!)))}
       </Text>
     </HeaderItem>
   )
diff --git a/src/components/abi/AbiFunctionsAccordion.tsx b/src/components/abi/AbiFunctionsAccordion.tsx
index ffa8a28..412d40c 100644
--- a/src/components/abi/AbiFunctionsAccordion.tsx
+++ b/src/components/abi/AbiFunctionsAccordion.tsx
@@ -213,7 +213,7 @@ export function AbiFunctionContent({
                   <Button
                     height="24px"
                     onClick={() => invoke({ type: 'read' })}
-                    variant="stroked fill"
+                    variant="solid invert"
                     width="fit"
                     type="button"
                   >
@@ -222,7 +222,7 @@ export function AbiFunctionContent({
                   <Button
                     height="24px"
                     onClick={() => invoke({ type: 'write' })}
-                    variant="stroked fill"
+                    variant="solid invert"
                     width="fit"
                     type="button"
                   >
@@ -232,7 +232,7 @@ export function AbiFunctionContent({
               ) : isWrite || abiFunction.inputs?.length > 0 ? (
                 <Button
                   height="24px"
-                  variant="stroked fill"
+                  variant="solid invert"
                   width="fit"
                   type="submit"
                 >
diff --git a/src/design-system/components/SFSymbol.tsx b/src/design-system/components/SFSymbol.tsx
index f2b759f..a0752ca 100644
--- a/src/design-system/components/SFSymbol.tsx
+++ b/src/design-system/components/SFSymbol.tsx
@@ -18,6 +18,7 @@ import {
   Minus,
   Plus,
   RefreshCcw,
+  Send,
   Settings,
   SkipBack,
   SquarePen,
@@ -73,6 +74,7 @@ const symbolToIcon: Record<SymbolName, LucideIcon> = {
   minus: Minus,
   'backward.fill': ArrowLeft,
   'arrow.counterclockwise': Undo2,
+  paperplane: Send,
 }
 
 export const SFSymbol = forwardRef<SVGSVGElement, SFSymbolProps>(
diff --git a/src/design-system/tokens.ts b/src/design-system/tokens.ts
index aa15015..2e2252a 100644
--- a/src/design-system/tokens.ts
+++ b/src/design-system/tokens.ts
@@ -679,6 +679,7 @@ export const symbolNames = [
   'minus',
   'backward.fill',
   'arrow.counterclockwise',
+  'paperplane',
 ] as const
 export type SymbolName = (typeof symbolNames)[number]
 
diff --git a/src/screens/account-details.tsx b/src/screens/account-details.tsx
index 79e911b..32bea7b 100644
--- a/src/screens/account-details.tsx
+++ b/src/screens/account-details.tsx
@@ -1,19 +1,27 @@
 import * as Tabs from '@radix-ui/react-tabs'
-import { useEffect, useState } from 'react'
+import { useEffect } from 'react'
 import { useForm } from 'react-hook-form'
 import { useNavigate, useParams, useSearchParams } from 'react-router-dom'
 import { toast } from 'sonner'
-import {
-  type Address,
-  type BaseError,
-  formatUnits,
-  isAddress,
-  parseUnits,
-} from 'viem'
+import { type Address, type BaseError, formatUnits, isAddress } from 'viem'
 
 import { TabsContent, TabsList, Tooltip } from '~/components'
 import * as Form from '~/components/form'
 import { Spinner } from '~/components/svgs'
+import { truncate } from '~/utils'
+
+function formatBalance(
+  balance: bigint,
+  decimals: number,
+  maxDecimals = 5,
+): string {
+  const formatted = formatUnits(balance, decimals)
+  const [whole, decimal] = formatted.split('.')
+  if (!decimal) return whole
+  const truncated = decimal.slice(0, maxDecimals)
+  const trimmed = truncated.replace(/0+$/, '')
+  return trimmed ? `${whole}.${trimmed}` : whole
+}
 import {
   Bleed,
   Box,
@@ -21,18 +29,15 @@ import {
   Column,
   Columns,
   Inline,
-  Input,
   Inset,
-  Row,
-  Rows,
   Separator,
   Stack,
   Text,
 } from '~/design-system'
 import { useAccountTokens } from '~/hooks/useAccountTokens'
+import { useBalance } from '~/hooks/useBalance'
 import { useErc20Balance } from '~/hooks/useErc20Balance'
 import { useErc20Metadata } from '~/hooks/useErc20Metadata'
-import { useSetErc20Balance } from '~/hooks/useSetErc20Balance'
 
 export default function AccountDetails() {
   const { address } = useParams()
@@ -66,9 +71,9 @@ export default function AccountDetails() {
             <Text color="text/tertiary" size="9px">
               Account
             </Text>
-            <Text.Truncated family="address" size="11px">
-              {address}
-            </Text.Truncated>
+            <Text family="address" size="11px">
+              {truncate(address, { start: 5, end: 10 })}
+            </Text>
           </Stack>
         </Inline>
       </Box>
@@ -89,9 +94,9 @@ export default function AccountDetails() {
               <TabsContent inset={false} value="tokens">
                 <Tokens accountAddress={address as Address} />
               </TabsContent>
-              {/* <TabsContent inset={false} value="nfts">
-              <NFTs />
-            </TabsContent> */}
+              {/*<TabsContent inset={false} value="nfts">*/}
+              {/*    <NFTs />*/}
+              {/*</TabsContent>*/}
             </Box>
           </Tabs.Root>
         </Stack>
@@ -109,25 +114,29 @@ function Tokens({ accountAddress }: { accountAddress: Address }) {
       <ImportToken accountAddress={accountAddress} />
       <Box style={{ height: '4px' }} />
       <Box style={{ height: '24px' }}>
-        <Columns alignHorizontal="justify" gap="4px">
-          <Column alignVertical="center" width="content">
+        <Columns alignHorizontal="justify" gap="8px">
+          <Column alignVertical="center">
             <Text color="text/tertiary" size="9px" wrap={false}>
               TOKEN
             </Text>
           </Column>
-          <Column alignVertical="center">
+          <Column alignVertical="center" width="content">
             <Text align="right" color="text/tertiary" size="9px" wrap={false}>
               BALANCE
             </Text>
           </Column>
-          <Column width="content">
-            <Box style={{ width: '24px' }} />
+          <Column alignVertical="center" width="content">
+            <Text align="right" color="text/tertiary" size="9px" wrap={false}>
+              ACTIONS
+            </Text>
           </Column>
         </Columns>
       </Box>
       <Bleed horizontal="-8px">
         <Separator />
       </Bleed>
+      {/* Native ETH */}
+      <TokenRow accountAddress={accountAddress} />
       {/* TODO: Handle empty state. */}
       {tokens?.map((token) =>
         token.visible ? (
@@ -183,117 +192,120 @@ function ImportToken({ accountAddress }: { accountAddress: Address }) {
   )
 }
 
-function TokenRow({
-  accountAddress,
-  tokenAddress,
-}: { accountAddress: Address; tokenAddress: Address }) {
-  const { hideToken, removeToken } = useAccountTokens({
+interface TokenRowProps {
+  accountAddress: Address
+  tokenAddress?: Address
+}
+
+function TokenRow({ accountAddress, tokenAddress }: TokenRowProps) {
+  const navigate = useNavigate()
+  const isNative = !tokenAddress
+
+  const { data: nativeBalance } = useBalance({
+    address: accountAddress,
+  })
+
+  const { removeToken } = useAccountTokens({
     address: accountAddress,
   })
 
-  const { data: balance, error: balanceError } = useErc20Balance({
+  const { data: erc20Balance, error: balanceError } = useErc20Balance({
     address: accountAddress,
-    tokenAddress,
+    tokenAddress: tokenAddress!,
   })
 
-  const { data, error: metadataError } = useErc20Metadata({
-    tokenAddress,
+  const { data: metadata, error: metadataError } = useErc20Metadata({
+    tokenAddress: tokenAddress!,
   })
 
   useEffect(() => {
+    if (!tokenAddress) return
+
     if (balanceError) {
       toast.error((balanceError as BaseError).shortMessage)
       removeToken({ tokenAddress })
+      return
     }
-  }, [balanceError, tokenAddress, removeToken])
-
-  useEffect(() => {
     if (metadataError) {
       toast.error((metadataError as BaseError).shortMessage)
       removeToken({ tokenAddress })
+      return
     }
-  }, [metadataError, tokenAddress, removeToken])
+  }, [metadataError, balanceError, tokenAddress, removeToken])
 
-  const isLoading = !data
-  const { name, symbol, decimals } = data || {}
+  const balance = isNative ? nativeBalance : erc20Balance
+  const decimals = isNative ? 18 : metadata?.decimals ?? 0
+  const symbol = isNative ? 'ETH' : metadata?.symbol ?? '???'
+  const name = isNative ? 'Ethereum' : metadata?.name ?? 'Token'
+  const isLoading = !isNative && !metadata
 
   return (
     <>
       <Inset vertical="12px">
         <Box position="relative">
-          <Columns alignVertical="center" gap="4px">
+          <Columns alignVertical="center" alignHorizontal="justify" gap="8px">
             <Column>
-              <Rows gap="8px">
-                <Row>
-                  {isLoading ? (
-                    <Inline alignVertical="center" gap="4px">
-                      <Spinner size="11px" />
-                      <Text color="text/tertiary" size="12px">
-                        Importing...
+              <Stack gap="4px">
+                {isLoading ? (
+                  <Inline alignVertical="center" gap="4px">
+                    <Spinner size="11px" />
+                    <Text color="text/tertiary" size="12px">
+                      Importing...
+                    </Text>
+                  </Inline>
+                ) : (
+                  <>
+                    <Tooltip label={name}>
+                      <Text family="numeric" size="14px">
+                        {symbol}
                       </Text>
-                    </Inline>
-                  ) : (
-                    <Text size="12px">{name}</Text>
-                  )}
-                </Row>
-                <Row>
-                  <Inline>
-                    <Box paddingRight="16px" style={{ width: '160px' }}>
-                      <Tooltip label={tokenAddress}>
-                        <Text.Truncated
-                          family="address"
-                          color="text/tertiary"
-                          size="11px"
-                        >
-                          {tokenAddress}
-                        </Text.Truncated>
+                    </Tooltip>
+                    {isNative ? (
+                      <Tooltip label="Gas token">
+                        <Text family="address" color="text/tertiary" size="9px">
+                          Gas token
+                        </Text>
                       </Tooltip>
-                    </Box>
-                    {symbol && (
-                      <Box position="relative">
-                        <Box
-                          position="absolute"
-                          style={{ left: -10, top: -2.5 }}
-                        >
-                          <Box
-                            borderWidth="1px"
-                            borderColor="surface/invert@0.2"
-                            padding="2px"
+                    ) : (
+                      <Inline gap="4px" alignVertical="center">
+                        <Tooltip label={tokenAddress}>
+                          <Text
+                            family="address"
+                            color="text/tertiary"
+                            size="9px"
                           >
-                            <Text
-                              family="numeric"
-                              color="text/tertiary"
-                              size="9px"
-                            >
-                              {symbol}
-                            </Text>
-                          </Box>
-                        </Box>
-                      </Box>
+                            {truncate(tokenAddress!, { start: 4, end: 3 })}
+                          </Text>
+                        </Tooltip>
+                        <Button.Copy
+                          height="16px"
+                          text={tokenAddress!}
+                          variant="ghost primary"
+                        />
+                      </Inline>
                     )}
-                  </Inline>
-                </Row>
-              </Rows>
+                  </>
+                )}
+              </Stack>
             </Column>
-            <Column>
-              {typeof balance === 'bigint' && typeof decimals === 'number' && (
-                <BalanceInput
-                  address={accountAddress}
-                  balance={balance}
-                  decimals={decimals}
-                  tokenAddress={tokenAddress}
-                />
-              )}
+            <Column width="content">
+              <Text align="right" family="numeric" size="12px">
+                {formatBalance(balance ?? 0n, decimals)}
+              </Text>
             </Column>
             <Column width="content">
               <Button.Symbol
-                label="Delete"
-                symbol="trash"
-                height="24px"
-                variant="ghost red"
+                label="Send"
+                symbol="paperplane"
+                height="36px"
+                variant="ghost blue"
                 onClick={(e) => {
                   e.stopPropagation()
-                  hideToken({ tokenAddress })
+                  navigate(
+                    tokenAddress
+                      ? `/transfer/${accountAddress}/${tokenAddress}`
+                      : `/transfer/${accountAddress}`,
+                  )
                 }}
               />
             </Column>
@@ -306,58 +318,3 @@ function TokenRow({
     </>
   )
 }
-
-function BalanceInput({
-  address,
-  balance,
-  decimals,
-  tokenAddress,
-}: {
-  address: Address
-  balance: bigint
-  decimals: number
-  tokenAddress: Address
-}) {
-  // TODO: Handle errors when setting balance.
-  const { mutate, isPending } = useSetErc20Balance()
-
-  const [value, setValue] = useState(formatUnits(balance, decimals))
-
-  useEffect(() => {
-    setValue(formatUnits(balance, decimals))
-  }, [balance, decimals])
-
-  return (
-    <Box>
-      <Columns alignVertical="center" alignHorizontal="right" gap="8px">
-        {isPending && (
-          <Column alignHorizontal="right" width="1/5">
-            <Spinner size="15px" />
-          </Column>
-        )}
-        <Column alignHorizontal="right" width="4/5">
-          <Input
-            onChange={(e) => setValue(e.target.value)}
-            onClick={(e) => e.stopPropagation()}
-            onBlur={(e) => {
-              const newValue = parseUnits(
-                e.target.value as `${number}`,
-                decimals,
-              )
-              if (newValue !== balance) {
-                mutate({
-                  address,
-                  tokenAddress,
-                  value: newValue,
-                })
-              }
-            }}
-            height="24px"
-            style={{ maxWidth: '180px', textAlign: 'right' }}
-            value={value}
-          />
-        </Column>
-      </Columns>
-    </Box>
-  )
-}
diff --git a/src/screens/block-details.tsx b/src/screens/block-details.tsx
index 0b6bbca..dd48d75 100644
--- a/src/screens/block-details.tsx
+++ b/src/screens/block-details.tsx
@@ -81,14 +81,11 @@ export default function BlockDetails() {
               </Column>
             )}
             <Column width="1/4">
-              <LabelledContent label="Base Fee">
+              <LabelledContent label="Base Fee (gwei)">
                 <Text family="numeric" size="12px">
                   {numberIntl6SigFigs.format(
                     Number(formatGwei(block.baseFeePerGas!)),
-                  )}{' '}
-                  <Text family="numeric" color="text/tertiary">
-                    gwei
-                  </Text>
+                  )}
                 </Text>
               </LabelledContent>
             </Column>
diff --git a/src/screens/index.tsx b/src/screens/index.tsx
index 7edef09..c6bbd97 100644
--- a/src/screens/index.tsx
+++ b/src/screens/index.tsx
@@ -79,7 +79,7 @@ export default function Index() {
             items={[
               { label: 'Accounts', value: 'accounts' },
               { label: 'Contracts', value: 'contracts' },
-              { label: 'Transactions', value: 'transactions' },
+              { label: 'TXs', value: 'txs' },
               { label: 'Blocks', value: 'blocks' },
             ]}
             onSelect={(item) => {
@@ -93,7 +93,7 @@ export default function Index() {
           <TabsContent inset={false} scrollable="auto" value="contracts">
             <Contracts />
           </TabsContent>
-          <TabsContent inset={false} scrollable="auto" value="transactions">
+          <TabsContent inset={false} scrollable="auto" value="txs">
             <Transactions />
           </TabsContent>
           <TabsContent inset={false} value="blocks">
@@ -135,7 +135,7 @@ function AccountRow({ account }: { account: Account }) {
   const active = activeAccount?.address === account.address
   const truncatedAddress =
     account.address && account.address.length > 0
-      ? truncate(account.address, { start: 6, end: 4 })
+      ? truncate(account.address, { start: 5, end: 5 })
       : undefined
   return (
     <Box
@@ -192,7 +192,7 @@ function AccountRow({ account }: { account: Account }) {
       )}
       <Stack gap="16px">
         <Box width="fit" position="relative">
-          <Inline gap="4px">
+          <Inline gap="8px">
             {account.state === 'loading' && (
               <Text color="text/tertiary" size="12px">
                 {truncate(account.key, { start: 20, end: 20 })}
diff --git a/src/screens/token-transfer.tsx b/src/screens/token-transfer.tsx
new file mode 100644
index 0000000..3482fc8
--- /dev/null
+++ b/src/screens/token-transfer.tsx
@@ -0,0 +1,259 @@
+import { useState } from 'react'
+import { useForm } from 'react-hook-form'
+import { useNavigate, useParams } from 'react-router-dom'
+import { toast } from 'sonner'
+import {
+  type Address,
+  type BaseError,
+  type Hex,
+  formatUnits,
+  isAddress,
+  parseUnits,
+} from 'viem'
+
+import { Container } from '~/components'
+import * as Form from '~/components/form'
+import { Spinner } from '~/components/svgs'
+import { erc20Abi } from '~/constants/abi'
+import {
+  Box,
+  Button,
+  Column,
+  Columns,
+  Inline,
+  Separator,
+  Stack,
+  Text,
+} from '~/design-system'
+import { useBalance } from '~/hooks/useBalance'
+import { useClient } from '~/hooks/useClient'
+import { useErc20Balance } from '~/hooks/useErc20Balance'
+import { useErc20Metadata } from '~/hooks/useErc20Metadata'
+import { useWriteContract } from '~/hooks/useWriteContract'
+
+type TransferFormData = {
+  recipient: string
+  amount: string
+}
+
+export default function TokenTransfer() {
+  const { accountAddress, tokenAddress } = useParams<{
+    accountAddress: Address
+    tokenAddress?: Address
+  }>()
+  const navigate = useNavigate()
+  const [isSubmitting, setIsSubmitting] = useState(false)
+
+  const isNativeTransfer = !tokenAddress
+
+  // Fetch token metadata if ERC20
+  const { data: tokenMetadata } = useErc20Metadata({
+    tokenAddress: tokenAddress!,
+  })
+
+  // Fetch balances
+  const { data: nativeBalance } = useBalance({ address: accountAddress })
+  const { data: tokenBalance } = useErc20Balance({
+    address: accountAddress!,
+    tokenAddress: tokenAddress!,
+  })
+
+  const balance = isNativeTransfer ? nativeBalance : tokenBalance
+  const decimals = isNativeTransfer ? 18 : tokenMetadata?.decimals ?? 18
+  const symbol = isNativeTransfer ? 'ETH' : tokenMetadata?.symbol ?? ''
+  const name = isNativeTransfer ? 'Ethereum' : tokenMetadata?.name ?? ''
+
+  const client = useClient()
+  const { mutateAsync: writeContract } = useWriteContract()
+
+  // Form state
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isValid },
+    setValue,
+  } = useForm<TransferFormData>({
+    mode: 'onChange',
+    defaultValues: {
+      recipient: '',
+      amount: '',
+    },
+  })
+
+  const onSubmit = handleSubmit(async (data) => {
+    if (!accountAddress || !balance) return
+
+    setIsSubmitting(true)
+    try {
+      const amount = parseUnits(data.amount, decimals)
+
+      let txHash: Hex
+
+      if (isNativeTransfer) {
+        // Native ETH transfer
+        txHash = await client.sendTransaction({
+          account: accountAddress,
+          to: data.recipient as Address,
+          value: amount,
+          chain: null,
+        })
+      } else {
+        // ERC20 token transfer
+        txHash = await writeContract({
+          address: tokenAddress!,
+          abi: erc20Abi,
+          functionName: 'transfer',
+          args: [data.recipient as Address, amount],
+          account: accountAddress,
+        })
+      }
+
+      // Wait for transaction receipt to confirm success/failure
+      const receipt = await client.waitForTransactionReceipt({ hash: txHash })
+
+      if (receipt.status === 'success') {
+        toast.success(`Transfer successful! TX: ${txHash.slice(0, 10)}...`)
+        navigate(-1)
+      } else {
+        toast.error('Transaction reverted')
+      }
+    } catch (error) {
+      const err = error as BaseError
+      console.error('Transfer error:', err)
+
+      // Show detailed error message including cause if available
+      const errorMessage =
+        err.shortMessage ||
+        (err.cause as any)?.reason ||
+        (err.cause as any)?.shortMessage ||
+        err.message ||
+        'Transfer failed'
+
+      toast.error(errorMessage, {
+        description: (err.cause as any)?.details || err.details,
+        duration: 5000,
+      })
+    } finally {
+      setIsSubmitting(false)
+    }
+  })
+
+  const handleMaxClick = () => {
+    if (balance) {
+      setValue('amount', formatUnits(balance, decimals), {
+        shouldValidate: true,
+      })
+    }
+  }
+
+  return (
+    <Container dismissable header={`Send ${symbol || 'Token'}`}>
+      <Stack gap="24px">
+        {/* Token Info */}
+        <Box>
+          <Stack gap="4px">
+            <Text size="14px" weight="medium">
+              {name}
+            </Text>
+            <Columns alignVertical="center" gap="8px">
+              <Column>
+                <Text color="text/tertiary" size="11px">
+                  Available Balance
+                </Text>
+              </Column>
+              <Column>
+                <Text align="right" family="numeric" size="11px">
+                  {balance ? formatUnits(balance, decimals) : '0'} {symbol}
+                </Text>
+              </Column>
+            </Columns>
+          </Stack>
+        </Box>
+
+        <Separator />
+
+        {/* Transfer Form */}
+        <Form.Root onSubmit={onSubmit}>
+          <Stack gap="20px">
+            {/* Recipient Address Field */}
+            <Form.InputField
+              label="Recipient Address"
+              placeholder="0x..."
+              register={register('recipient', {
+                required: 'Recipient address is required',
+                validate: (value) =>
+                  isAddress(value) || 'Invalid Ethereum address',
+              })}
+              errorMessage={errors.recipient?.message}
+              height="36px"
+            />
+
+            {/* Amount Field */}
+            <Form.InputField
+              label={`Amount (${symbol})`}
+              placeholder="0.0"
+              type="number"
+              step="any"
+              register={register('amount', {
+                required: 'Amount is required',
+                validate: (value) => {
+                  if (!value || value === '0')
+                    return 'Amount must be greater than 0'
+                  try {
+                    const amount = parseUnits(value, decimals)
+                    if (balance && amount > balance) {
+                      return 'Insufficient balance'
+                    }
+                    return true
+                  } catch {
+                    return 'Invalid amount'
+                  }
+                },
+              })}
+              errorMessage={errors.amount?.message}
+              height="36px"
+              innerRight={
+                <Button
+                  height="24px"
+                  variant="ghost primary"
+                  onClick={handleMaxClick}
+                  type="button"
+                >
+                  MAX
+                </Button>
+              }
+            />
+
+            <Separator />
+
+            {/* Action Buttons */}
+            <Inline gap="12px" wrap={false}>
+              <Button
+                onClick={() => navigate(-1)}
+                variant="stroked fill"
+                disabled={isSubmitting}
+                type="button"
+              >
+                Cancel
+              </Button>
+              <Button
+                type="submit"
+                variant="solid green"
+                disabled={!isValid || isSubmitting || !balance}
+              >
+                {isSubmitting ? (
+                  <Inline gap="8px" alignVertical="center">
+                    <Spinner size="14px" />
+                    <Text>Sending...</Text>
+                  </Inline>
+                ) : (
+                  'Send'
+                )}
+              </Button>
+            </Inline>
+          </Stack>
+        </Form.Root>
+      </Stack>
+    </Container>
+  )
+}
diff --git a/yarn.lock b/yarn.lock
index 75097d8..e71e7c1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1,6 +1,6 @@
 # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
 # yarn lockfile v1
-# bun ./bun.lockb --hash: D872C131C96E2063-5bbb92c690dd0960-585D1794AC5EA5D3-013902884911978e
+# bun ./bun.lockb --hash: 471FFBB55E23723E-8f31cff949a5132d-73DE31F80BF753DC-7b6106664aa34b10
 
 
 "@aashutoshrathi/word-wrap@^1.2.3":
@@ -1319,6 +1319,11 @@
   resolved "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz"
   integrity sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==
 
+"@radix-ui/react-context@1.1.3":
+  version "1.1.3"
+  resolved "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.3.tgz"
+  integrity sha512-ieIFACdMpYfMEjF0rEf5KLvfVyIkOz6PDGyNnP+u+4xQ6jny3VCgA4OgXOwNx2aUkxn8zx9fiVcM8CfFYv9Lxw==
+
 "@radix-ui/react-dialog@^1.1.15":
   version "1.1.15"
   resolved "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.15.tgz"
@@ -1478,13 +1483,20 @@
   dependencies:
     "@radix-ui/react-slot" "1.2.3"
 
-"@radix-ui/react-progress@^1.1.7":
-  version "1.1.7"
-  resolved "https://registry.npmjs.org/@radix-ui/react-progress/-/react-progress-1.1.7.tgz"
-  integrity sha512-vPdg/tF6YC/ynuBIJlk1mm7Le0VgW6ub6J2UWnTQ7/D23KXcPI1qy+0vBkgKgd38RCMJavBXpB83HPNFMTb0Fg==
+"@radix-ui/react-primitive@2.1.4":
+  version "2.1.4"
+  resolved "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.4.tgz"
+  integrity sha512-9hQc4+GNVtJAIEPEqlYqW5RiYdrr8ea5XQ0ZOnD6fgru+83kqT15mq2OCcbe8KnjRZl5vF3ks69AKz3kh1jrhg==
   dependencies:
-    "@radix-ui/react-context" "1.1.2"
-    "@radix-ui/react-primitive" "2.1.3"
+    "@radix-ui/react-slot" "1.2.4"
+
+"@radix-ui/react-progress@^1.1.8":
+  version "1.1.8"
+  resolved "https://registry.npmjs.org/@radix-ui/react-progress/-/react-progress-1.1.8.tgz"
+  integrity sha512-+gISHcSPUJ7ktBy9RnTqbdKW78bcGke3t6taawyZ71pio1JewwGSJizycs7rLhGTvMJYCQB1DBK4KQsxs7U8dA==
+  dependencies:
+    "@radix-ui/react-context" "1.1.3"
+    "@radix-ui/react-primitive" "2.1.4"
 
 "@radix-ui/react-roving-focus@1.1.11":
   version "1.1.11"
@@ -1516,6 +1528,13 @@
   dependencies:
     "@radix-ui/react-compose-refs" "1.1.2"
 
+"@radix-ui/react-slot@1.2.4":
+  version "1.2.4"
+  resolved "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.4.tgz"
+  integrity sha512-Jl+bCv8HxKnlTLVrcDE8zTMJ09R9/ukw4qBs/oZClOfoQk/cOTbDn+NceXfV7j09YPVQUryJPHurafcSg6EVKA==
+  dependencies:
+    "@radix-ui/react-compose-refs" "1.1.2"
+
 "@radix-ui/react-tabs@^1.1.13":
   version "1.1.13"
   resolved "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.1.13.tgz"
@@ -2603,10 +2622,10 @@ bufferutil@^4.0.1:
   dependencies:
     node-gyp-build "^4.3.0"
 
-bun-types@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.npmjs.org/bun-types/-/bun-types-1.3.0.tgz"
-  integrity sha512-u8X0thhx+yJ0KmkxuEo9HAtdfgCBaM/aI9K90VQcQioAmkVp3SG3FkwWGibUFz3WdXAdcsqOcbU40lK7tbHdkQ==
+bun-types@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.npmjs.org/bun-types/-/bun-types-1.3.1.tgz"
+  integrity sha512-NMrcy7smratanWJ2mMXdpatalovtxVggkj11bScuWuiOoXTiKIu2eVS1/7qbyI/4yHedtsn175n4Sm4JcdHLXw==
   dependencies:
     "@types/node" "*"
 
@@ -5338,10 +5357,10 @@ react-flatten-children@^1.1.2:
   resolved "https://registry.npmjs.org/react-flatten-children/-/react-flatten-children-1.1.2.tgz"
   integrity sha512-9pnG/uw2Wa0n97s+yBZg/WgfMPE8RC4qNcr6iYbyb19sacCk3gRJCmCzAhTuANSWesFsK9v/yTKW42pkenaAfw==
 
-react-hook-form@^7.65.0:
-  version "7.65.0"
-  resolved "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.65.0.tgz"
-  integrity sha512-xtOzDz063WcXvGWaHgLNrNzlsdFgtUWcb32E6WFaGTd7kPZG3EeDusjdZfUsPwKCKVXy1ZlntifaHZ4l8pAsmw==
+react-hook-form@^7.66.0:
+  version "7.66.0"
+  resolved "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.66.0.tgz"
+  integrity sha512-xXBqsWGKrY46ZqaHDo+ZUYiMUgi8suYu5kdrS20EG8KiL7VRQitEbNjm+UcrDYrNi1YLyfpmAeGjCZYXLT9YBw==
 
 react-intersection-observer@^9.16.0:
   version "9.16.0"
@@ -6261,10 +6280,10 @@ verror@1.10.0:
     core-util-is "1.0.2"
     extsprintf "^1.2.0"
 
-viem@^2.38.3:
-  version "2.38.3"
-  resolved "https://registry.npmjs.org/viem/-/viem-2.38.3.tgz"
-  integrity sha512-By2TutLv07iNHHtWqHHzjGipevYsfGqT7KQbGEmqLco1qTJxKnvBbSviqiu6/v/9REV6Q/FpmIxf2Z7/l5AbcQ==
+viem@^2.38.6:
+  version "2.38.6"
+  resolved "https://registry.npmjs.org/viem/-/viem-2.38.6.tgz"
+  integrity sha512-aqO6P52LPXRjdnP6rl5Buab65sYa4cZ6Cpn+k4OLOzVJhGIK8onTVoKMFMT04YjDfyDICa/DZyV9HmvLDgcjkw==
   dependencies:
     "@noble/curves" "1.9.1"
     "@noble/hashes" "1.8.0"