diff --git a/app/src/app.d.ts b/app/src/app.d.ts
index 3ee2bbafde..0ceeb22c08 100644
--- a/app/src/app.d.ts
+++ b/app/src/app.d.ts
@@ -11,7 +11,10 @@ declare global {
   interface Window {
     EventEmitter: typeof EventEmitter
     ethereum: {
-      request(args: { method: EthereumRequestMethod; params?: Record<string, any> }): Promise<any>
+      request(arguments_: {
+        method: EthereumRequestMethod
+        params?: Record<string, any>
+      }): Promise<any>
     }
   }
 }
diff --git a/app/src/lib/components/Connect.svelte b/app/src/lib/components/Connect.svelte
index a2c951ed09..e9c9a6e7bd 100644
--- a/app/src/lib/components/Connect.svelte
+++ b/app/src/lib/components/Connect.svelte
@@ -25,7 +25,7 @@
   on:click={() => connectWallet('injected')}
   disabled={error}
   class={clsx([
-    'shadow-mini hover:bg-dark/95 active:scale-98 rounded-lg bg-stone-50 text-black',
+    'rounded-lg bg-stone-50 text-black shadow-mini hover:bg-dark/95 active:scale-98',
     'inline-flex h-12 items-center justify-center px-[21px]',
     'text-[15px] font-semibold active:transition-all'
   ])}
diff --git a/app/src/lib/components/Faucet.svelte b/app/src/lib/components/Faucet.svelte
index 04c0cb16d4..d3d3db6a39 100644
--- a/app/src/lib/components/Faucet.svelte
+++ b/app/src/lib/components/Faucet.svelte
@@ -1,10 +1,13 @@
 <script lang="ts">
+  import clsx from 'clsx'
+  import { Button } from 'bits-ui'
   import { getUnoFromFaucet } from '$/lib/faucet.ts'
   import { unionAddress } from '$/lib/wallet/config'
 </script>
 
-<div>
-  <button on:click={() => getUnoFromFaucet({ address: $unionAddress })}>
-    get UNO from faucet
-  </button>
-</div>
+<Button.Root
+  class={clsx('rounded-md border-[1px] px-4 py-2')}
+  on:click={() => getUnoFromFaucet({ address: $unionAddress })}
+>
+  get UNO from faucet
+</Button.Root>
diff --git a/app/src/lib/snap.ts b/app/src/lib/snap.ts
index 79fba272a0..65339df0a2 100644
--- a/app/src/lib/snap.ts
+++ b/app/src/lib/snap.ts
@@ -8,7 +8,7 @@ import {
   getSnap,
   suggestChain
 } from '@leapwallet/cosmos-snap-provider'
-import { GasPrice, SigningStargateClient, StargateClient } from '@cosmjs/stargate'
+import { GasPrice, SigningStargateClient, type StargateClient } from '@cosmjs/stargate'
 import { Tendermint37Client } from '@cosmjs/tendermint-rpc'
 import { SigningCosmWasmClient } from '@cosmjs/cosmwasm-stargate'
 
@@ -145,8 +145,8 @@ export async function initializeSigningCosmWasmClient() {
   signingCosmWasmClient.set(_signingCosmWasmClient)
 }
 
-export const snapTransaction = writable<string | null>(null)
-export async function sendSnapTransaction() {
+export const unionTransactions = writable<Array<string>>([])
+export async function sendAssetFromUnionToEthereum({ amount }: { amount: string }) {
   if (!get(snapConnected)) return
   if (!get(snapChainInitialized)) return
   const ethereumAddress = get(wallet).address
@@ -167,7 +167,7 @@ export async function sendSnapTransaction() {
 
   const [{ address: unionAddress }] = await offlineSigner.getAccounts()
 
-  return signingCosmWasmClient.execute(
+  const result = await signingCosmWasmClient.execute(
     unionAddress,
     CONTRACT.UNION.ADDRESS,
     {
@@ -180,95 +180,8 @@ export async function sendSnapTransaction() {
     },
     'auto',
     undefined,
-    [{ denom: UNO.NATIVE_DENOM, amount: '1000' }]
+    [{ denom: UNO.NATIVE_DENOM, amount }]
   )
 
-  // const stargateClient = await StargateClient.connect(URLS.UNION.RPC)
-  // const account = await stargateClient.getAccount(accountData.address)
-  // const [accountNumber, sequence] = [account?.accountNumber, account?.sequence]
-  // console.log(JSON.stringify({ accountNumber, sequence }, undefined, 2))
+  unionTransactions.update(transactions => [...transactions, result.transactionHash])
 }
-// export async function sendSnapTransaction() {
-//   if (!get(snapConnected)) return
-//   if (!get(snapChainInitialized)) return
-//   const ethereumAddress = get(wallet).address
-//   if (!ethereumAddress) return
-//   const offlineSigner = get(snapOfflineSigner)
-//   if (!offlineSigner) return
-
-//   const [accountData] = await offlineSigner.getAccounts()
-
-//   const stargateClient = await StargateClient.connect(URLS.UNION.RPC)
-//   const account = await stargateClient.getAccount(accountData.address)
-//   const [accountNumber, sequence] = [account?.accountNumber, account?.sequence]
-//   // console.log(JSON.stringify({ accountNumber, sequence }, undefined, 2))
-
-//   const message = {
-//     typeUrl: '/cosmwasm.wasm.v1.MsgExecuteContract',
-//     value: MsgExecuteContract.fromPartial({
-//       sender: accountData.address,
-//       contract: CONTRACT.UNION.ADDRESS,
-//       msg: Buffer.from(
-//         JSON.stringify({
-//           transfer: {
-//             channel: CONTRACT.UNION.SOURCE_CHANNEL,
-//             receiver: '0xCa091fE8005596E64ba9Cf028a75755a2380021A'.slice(2),
-//             timeout: null,
-//             memo: "random more than four characters I'm transferring."
-//           }
-//         }),
-//         'utf-8'
-//       ),
-//       funds: [{ denom: UNO.NATIVE_DENOM, amount: '1000' }]
-//     })
-//   }
-
-//   const registry = new Registry()
-//   registry.register('/cosmwasm.wasm.v1.MsgExecuteContract', MsgExecuteContract)
-
-//   const transactionBody = TxBody.fromPartial({
-//     messages: [
-//       {
-//         typeUrl: message.typeUrl,
-//         value: message.value
-//       }
-//     ]
-//   })
-
-//   const bodyBytes = TxBody.encode(transactionBody).finish()
-
-//   const fee = {
-//     amount: [{ denom: UNO.NATIVE_DENOM, amount: '1000' }],
-//     gas: 200000
-//   }
-
-//   const gasPrice = GasPrice.fromString('0.001muno')
-
-//   const signer = [{ pubkey: accountData.pubkey, sequence: sequence }]
-
-//   //
-//   const authInfoBytes = makeAuthInfoBytes(
-//     Any.fromPartial({
-//       typeUrl: '/cosmos.crypto.secp256k1.PubKey',
-//       value: PublicKey.encode(accountData.pubkey).finish()
-//     }),
-//     fee.amount,
-//     fee.gas,
-//     undefined,
-//     undefined,
-//     SignMode.SIGN_MODE_DIRECT
-//   )
-
-//   const signed = await offlineSigner.signDirect(accountData.address, {
-//     chainId: CHAIN.UNION.ID,
-//     // account_number is the account number of the account in state
-//     accountNumber: Long.fromValue(accountNumber!),
-
-//     // auth_info_bytes is a protobuf serialization of an AuthInfo that matches the representation in TxRaw.
-//     authInfoBytes,
-//     // body_bytes is protobuf serialization of a TxBody that matches the representation in TxRaw.
-//     bodyBytes
-//   })
-
-//   console.log('wallet_invokeSnap - signDirect', JSON.stringify(signed, undefined, 2))
-// }
diff --git a/app/src/lib/union-actions.ts b/app/src/lib/union-actions.ts
index 39180c2dff..8b42edd44c 100644
--- a/app/src/lib/union-actions.ts
+++ b/app/src/lib/union-actions.ts
@@ -45,6 +45,7 @@ export async function initCosmWasmClient() {
   cosmWasmClient.set(cosmwasmClient)
 }
 
+export const sepoliaTransactions = writable<Array<string>>([])
 export async function sendAssetFromEthereumToUnion({
   amount,
   simulate = true
@@ -79,7 +80,7 @@ export async function sendAssetFromEthereumToUnion({
 
     const { request } = await simulateContract(config, writeContractParameters)
     const transactionHash = await writeContract(config, request)
-    console.log(JSON.stringify({ transactionHash }, undefined, 2))
+    sepoliaTransactions.update(transactions => [...transactions, transactionHash])
     return transactionHash
   } catch (error) {
     const errorMessage = error instanceof Error ? error.message : error
diff --git a/app/src/lib/utilities/index.ts b/app/src/lib/utilities/index.ts
index db3d8cf7f9..51dac6b888 100644
--- a/app/src/lib/utilities/index.ts
+++ b/app/src/lib/utilities/index.ts
@@ -21,3 +21,7 @@ export async function fetcher<T>(url: string, options?: RequestInit) {
   const data = (await response.json()) as T
   return data
 }
+
+export async function sleep(ms: number): Promise<void> {
+  return new Promise(resolve => setTimeout(resolve, ms))
+}
diff --git a/app/src/lib/wallet/config.ts b/app/src/lib/wallet/config.ts
index 0bfddaee43..2455a911b8 100644
--- a/app/src/lib/wallet/config.ts
+++ b/app/src/lib/wallet/config.ts
@@ -18,7 +18,13 @@ import { getDenomAddress } from '$/lib/union-actions'
 import { mainnet, sepolia } from '@wagmi/core/chains'
 import { writable, type Writable } from 'svelte/store'
 import { injected, metaMask } from '@wagmi/connectors'
-import { getKey, getSnap, connectSnap, suggestChain,signArbitrary } from '@leapwallet/cosmos-snap-provider'
+import {
+  getKey,
+  getSnap,
+  connectSnap,
+  suggestChain,
+  signArbitrary
+} from '@leapwallet/cosmos-snap-provider'
 
 const ssr = !browser
 
diff --git a/app/src/routes/+layout.svelte b/app/src/routes/+layout.svelte
index fb9090bc67..f390aa6af5 100644
--- a/app/src/routes/+layout.svelte
+++ b/app/src/routes/+layout.svelte
@@ -17,6 +17,3 @@
   <slot />
   <SvelteQueryDevtools initialIsOpen={false} />
 </QueryClientProvider>
-
-<style>
-</style>
diff --git a/app/src/routes/+page.svelte b/app/src/routes/+page.svelte
index 40bcb12701..e00fbe4de1 100644
--- a/app/src/routes/+page.svelte
+++ b/app/src/routes/+page.svelte
@@ -1,68 +1,92 @@
 <script lang="ts">
+  import clsx from 'clsx'
+  import { onMount } from 'svelte'
+  import { Button } from 'bits-ui'
+  import { sepolia } from 'viem/chains'
+  import Faucet from '$/lib/components/Faucet.svelte'
+  import Connect from '$lib/components/Connect.svelte'
   import { wallet, switchChain } from '$lib/wallet/config.ts'
   import {
     erc20balanceStore,
     unionBalanceStore,
     getUnoERC20Balance,
     getUnoUnionBalance,
+    sepoliaTransactions,
     sendAssetFromEthereumToUnion
   } from '$/lib/union-actions'
-  import clsx from 'clsx'
-  import { onMount } from 'svelte'
-  import { sepolia } from 'viem/chains'
-  import Faucet from '$/lib/components/Faucet.svelte'
-  import Connect from '$lib/components/Connect.svelte'
   import {
     snapAddress,
     snapInstalled,
+    snapConnected,
     getSnapAddress,
-    snapChainConnected,
     suggestSnapChain,
+    unionTransactions,
+    snapChainConnected,
     ensureSnapInstalled,
-    snapConnected,
     ensureSnapConnected,
-    sendSnapTransaction,
-    ensureSnapChainInitialized
+    snapChainInitialized,
+    ensureSnapChainInitialized,
+    sendAssetFromUnionToEthereum
   } from '$/lib/snap.ts'
+  import { sleep } from '$/lib/utilities'
+
+  /**
+   * TODO: Set polled fetching using @tanstack/svelte-query
+   * @see https://github.com/TanStack/query/blob/main/examples/svelte/auto-refetching/src/routes/%2Bpage.svelte
+   */
 
   let error: any
 
+  $: unoUnionBalance = $unionBalanceStore || '0'
+  $: unoERC20Balance = $erc20balanceStore || 0n
+
   onMount(async () => {
-    // await initializeStargateClient()
     await ensureSnapInstalled()
     await ensureSnapConnected()
     await getSnapAddress()
     await ensureSnapChainInitialized()
 
-    const unoUnionBalance = $snapAddress ? await getUnoUnionBalance($snapAddress) : '0'
+    unoUnionBalance = $snapAddress ? await getUnoUnionBalance($snapAddress) : '0'
     unionBalanceStore.set(unoUnionBalance)
-    const unoERC20Balance = $wallet.address ? await getUnoERC20Balance($wallet.address) : 0n
+    unoERC20Balance = $wallet.address ? await getUnoERC20Balance($wallet.address) : 0n
     erc20balanceStore.set(unoERC20Balance)
   })
 
-  onMount(async () => {})
+  unionTransactions.subscribe(async _ => {
+    if (!$snapAddress) return
+    await sleep(2500)
+    unoUnionBalance = await getUnoUnionBalance($snapAddress)
+    unionBalanceStore.update(_ => unoUnionBalance)
+  })
+
+  sepoliaTransactions.subscribe(async _ => {
+    if (!$wallet.address) return
+    await sleep(2000)
+    unoERC20Balance = await getUnoERC20Balance($wallet.address)
+    erc20balanceStore.update(_ => unoERC20Balance)
+  })
 </script>
 
 <main
   class="mx-auto mt-12 flex min-h-full min-w-full flex-col items-center justify-center space-y-6"
 >
-  <p class="mb-12">Status: {$wallet.status}</p>
+  <p>Status: {$wallet.status}</p>
   {#if $wallet.isConnected}
     <div>
       <p>EVM Address: {$wallet.address}</p>
       <p>EVM Chain ID: {$wallet.chainId}</p>
-      <p>UNO ERC20 Balance: {$erc20balanceStore}</p>
+      <p>UNO ERC20 Balance: {unoERC20Balance}</p>
       <br />
       <p>Union Address: {$snapAddress}</p>
       <p>Union Chain ID: union-testnet-6</p>
-      <p>UNO Union Balance: {$unionBalanceStore}</p>
+      <p>UNO Union Balance: {unoUnionBalance}</p>
       <div>
         <p>SNAP INSTALLED: {$snapInstalled}</p>
         <p>SNAP CONNECTED: {$snapConnected}</p>
 
-        <!-- {#if !$snapChainInitialized} -->
-        <button on:click={() => suggestSnapChain()}>add union chain</button>
-        <!-- {/if} -->
+        {#if !$snapChainInitialized}
+          <button on:click={() => suggestSnapChain()}>add union chain</button>
+        {/if}
         {#if !$snapInstalled}
           <div class="mt-4">
             <button on:click={ensureSnapInstalled}>Add Leap Cosmos Wallet to Metamask 🌌</button>
@@ -74,7 +98,7 @@
           on:click={() => switchChain(sepolia.id)}
           class={clsx([
             'my-5',
-            'shadow-mini hover:bg-dark/95 active:scale-98 rounded-lg bg-stone-50 text-black',
+            'rounded-lg bg-stone-50 text-black shadow-mini hover:bg-dark/95 active:scale-98',
             'inline-flex h-12 items-center justify-center px-[21px]',
             'text-[15px] font-semibold active:transition-all',
             $wallet.chainId === sepolia.id ? 'hidden' : ''
@@ -90,20 +114,53 @@
           {/if}
         </div>
       </div>
-      <br />
-      <!-- <div>
-        {#if $cosmosOfflineSigner}
-          <button on:click={sendUnoFromUnionToSepolia}>Send UNO from Union to Sepolia</button>
-        {/if}
-      </div> -->
-      <div>
-        <button on:click={() => sendSnapTransaction()}>Send UNO from Union to Sepolia</button>
-      </div>
-      <button on:click={() => sendAssetFromEthereumToUnion({ amount: 3n })}>
-        Send UNO from Sepolia to Union
-      </button>
+
+      <section class="my-3 flex max-w-72 flex-col space-y-2">
+        <div>
+          <Button.Root
+            class={clsx(['rounded-md border-[1px] px-4 py-2'])}
+            on:click={() => sendAssetFromUnionToEthereum({ amount: '100' })}
+          >
+            Send UNO from Union to Sepolia
+          </Button.Root>
+          <ol>
+            {#each $unionTransactions as transactionHash}
+              <li>
+                <a
+                  href={`https://testnet.union.explorers.guru/transaction/${transactionHash}`}
+                  class="text-blue-100 underline"
+                >
+                  {transactionHash}
+                </a>
+              </li>
+            {/each}
+          </ol>
+        </div>
+        <div>
+          <Button.Root
+            class={clsx(['rounded-md border-[1px] px-4 py-2'])}
+            on:click={async () => await sendAssetFromEthereumToUnion({ amount: 3n })}
+          >
+            Send UNO from Sepolia to Union
+          </Button.Root>
+          <ol>
+            {#each $sepoliaTransactions as transactionHash}
+              <li>
+                <a
+                  href={`https://11155111.testnet.routescan.io/tx/${transactionHash}`}
+                  class="text-blue-200 underline"
+                >
+                  {transactionHash}
+                </a>
+              </li>
+            {/each}
+          </ol>
+        </div>
+        <div class="w-full">
+          <Faucet />
+        </div>
+      </section>
     </div>
-    <Faucet />
   {:else}
     <Connect />
   {/if}
diff --git a/app/tailwind.config.ts b/app/tailwind.config.ts
index 3e9f5facb2..762e23c576 100644
--- a/app/tailwind.config.ts
+++ b/app/tailwind.config.ts
@@ -1,7 +1,6 @@
 import plugin from 'tailwindcss/plugin'
 import type { Config } from 'tailwindcss'
 import tailwindAnimate from 'tailwindcss-animate'
-import defaultTheme from 'tailwindcss/defaultTheme'
 import typographyPlugin from '@tailwindcss/typography'
 import tailwindScrollbarPlugin from 'tailwind-scrollbar'
 import aspectRatioPlugin from '@tailwindcss/aspect-ratio'
@@ -12,7 +11,81 @@ export default <Config>{
   future: { hoverOnlyWhenSupported: true },
   content: ['./src/**/*.{html,js,svelte,ts}'],
   theme: {
-    extend: {}
+    extend: {
+      colors: {
+        border: {
+          DEFAULT: 'hsl(var(--border-card))',
+          input: 'hsl(var(--border-input))',
+          'input-hover': 'hsl(var(--border-input-hover))'
+        },
+        background: {
+          DEFAULT: 'hsl(var(--background) / <alpha-value>)'
+        },
+        foreground: {
+          DEFAULT: 'hsl(var(--foreground) / <alpha-value>)',
+          alt: 'hsl(var(--foreground-alt) / <alpha-value>)'
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted) / <alpha-value>)',
+          foreground: 'hsl(var(--muted-foreground))'
+        },
+        dark: {
+          DEFAULT: 'hsl(var(--dark) / <alpha-value>)',
+          4: 'hsl(var(--dark-04))',
+          10: 'hsl(var(--dark-10))',
+          40: 'hsl(var(--dark-40))'
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent) / <alpha-value>)',
+          foreground: 'hsl(var(--accent-foreground) / <alpha-value>)'
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive) / <alpha-value>)'
+        },
+        contrast: {
+          DEFAULT: 'hsl(var(--contrast) / <alpha-value>)'
+        }
+      },
+
+      fontSize: {
+        xxs: '10px'
+      },
+      borderWidth: {
+        6: '6px'
+      },
+      borderRadius: {
+        card: '16px',
+        'card-lg': '20px',
+        'card-sm': '10px',
+        input: '9px',
+        button: '5px',
+        '5px': '5px',
+        '9px': '9px',
+        '10px': '10px',
+        '15px': '15px'
+      },
+      height: {
+        input: '3rem',
+        'input-sm': '2.5rem'
+      },
+      boxShadow: {
+        mini: 'var(--shadow-mini)',
+        'mini-inset': 'var(--shadow-mini-inset)',
+        popover: 'var(--shadow-popover)',
+        kbd: 'var(--shadow-kbd)',
+        btn: 'var(--shadow-btn)',
+        card: 'var(--shadow-card)',
+        'date-field-focus': 'var(--shadow-date-field-focus)'
+      },
+      opacity: {
+        8: '0.08'
+      },
+      scale: {
+        80: '.80',
+        98: '.98',
+        99: '.99'
+      }
+    }
   },
   plugins: [
     //