diff --git a/apps/namadillo/src/App/Ibc/Ibc.tsx b/apps/namadillo/src/App/Ibc/Ibc.tsx
index e3be5b628..b6ef52911 100644
--- a/apps/namadillo/src/App/Ibc/Ibc.tsx
+++ b/apps/namadillo/src/App/Ibc/Ibc.tsx
@@ -1,223 +1,40 @@
-import { Coin } from "@cosmjs/launchpad";
-import { coin, coins } from "@cosmjs/proto-signing";
-import {
-  QueryClient,
-  SigningStargateClient,
-  StargateClient,
-  setupIbcExtension,
-} from "@cosmjs/stargate";
-import { Tendermint34Client } from "@cosmjs/tendermint-rpc";
-import { Window as KeplrWindow } from "@keplr-wallet/types";
 import { Panel } from "@namada/components";
-import { DerivedAccount, WindowWithNamada } from "@namada/types";
+import { assertNever } from "@namada/utils";
 import { useState } from "react";
 
-const keplr = (window as KeplrWindow).keplr!;
-const namada = (window as WindowWithNamada).namada!;
+import { IbcFromNamada } from "./IbcFromNamada";
+import { IbcToNamada } from "./IbcToNamada";
 
-const chain = "theta-testnet-001";
-const rpc = "https://rpc-t.cosmos.nodestake.top";
-
-const buttonStyles = "bg-white my-2 p-2 block";
+const tabs = ["cosmos->namada", "namada->cosmos"] as const;
+type Tab = (typeof tabs)[number];
 
 export const Ibc: React.FC = () => {
-  const [error, setError] = useState("");
-  const [address, setAddress] = useState("");
-  const [alias, setAlias] = useState("");
-  const [balances, setBalances] = useState<Coin[] | undefined>();
-  const [namadaAccounts, setNamadaAccounts] = useState<DerivedAccount[]>();
-  const [token, setToken] = useState("");
-  const [target, setTarget] = useState("");
-  const [amount, setAmount] = useState("");
-  const [channelId, setChannelId] = useState("");
-
-  const withErrorReporting =
-    (fn: () => Promise<void>): (() => Promise<void>) =>
-    async () => {
-      try {
-        await fn();
-        setError("");
-      } catch (e) {
-        // eslint-disable-next-line no-console
-        console.log(e);
-        setError(e instanceof Error ? e.message : "unknown error");
-      }
-    };
-
-  const getAddress = withErrorReporting(async () => {
-    const key = await keplr.getKey(chain);
-    setAddress(key.bech32Address);
-    setAlias(key.name);
-  });
+  const [selectedTab, setSelectedTab] = useState<Tab>(tabs[0]);
 
-  const getBalances = withErrorReporting(async () => {
-    setBalances(undefined);
-    const balances = await queryBalances(address);
-    setBalances(balances);
-  });
-
-  const getNamadaAccounts = withErrorReporting(async () => {
-    const accounts = await namada.accounts();
-    setNamadaAccounts(accounts);
-  });
-
-  const submitIbcTransfer = withErrorReporting(async () =>
-    submitBridgeTransfer(rpc, chain, address, target, token, amount, channelId)
-  );
+  const page =
+    selectedTab === "cosmos->namada" ? <IbcToNamada />
+    : selectedTab === "namada->cosmos" ? <IbcFromNamada />
+    : assertNever(selectedTab);
 
   return (
-    <Panel title="IBC" className="mb-2 bg-[#999999] text-black">
-      {/* Error */}
-      <p className="text-[#ff0000]">{error}</p>
-
-      <hr />
-
-      {/* Keplr addresses */}
-      <h3>Keplr addresses</h3>
-      <button className={buttonStyles} onClick={getAddress}>
-        get address
-      </button>
-      <p>
-        {alias} {address}
-      </p>
-
-      <hr />
-
-      {/* Balances */}
-      <h3>Balances</h3>
-      <button className={buttonStyles} onClick={getBalances}>
-        get balances
-      </button>
-      {balances?.map(({ denom, amount }) => (
-        <div key={denom}>
-          <label>
-            <input
-              type="radio"
-              name="token"
-              value={denom}
-              checked={token === denom}
-              onChange={(e) => setToken(e.target.value)}
-            />
-            {denom} {amount}
-          </label>
-        </div>
-      ))}
-
-      <hr />
-
-      {/* Namada accounts */}
-      <h3>Namada accounts</h3>
-      <button className={buttonStyles} onClick={getNamadaAccounts}>
-        get namada accounts
-      </button>
-
-      {namadaAccounts?.map(({ alias, address }) => (
-        <div key={address}>
-          <label>
-            <input
-              type="radio"
-              name="target"
-              value={address}
-              checked={target === address}
-              onChange={(e) => setTarget(e.target.value)}
-            />
-            {alias} {address}
-          </label>
-        </div>
-      ))}
-
-      <hr />
-
-      {/* Amount to send */}
-      <h3>Amount to send</h3>
-      <input value={amount} onChange={(e) => setAmount(e.target.value)} />
-
-      <hr />
-
-      {/* Channel ID */}
-      <h3>Channel ID</h3>
-      <input value={channelId} onChange={(e) => setChannelId(e.target.value)} />
-
-      <hr />
-
-      {/* Submit IBC transfer */}
-      <h3>Submit IBC transfer</h3>
-      <button className={buttonStyles} onClick={submitIbcTransfer}>
-        submit IBC transfer
-      </button>
-    </Panel>
-  );
-};
-
-const queryBalances = async (owner: string): Promise<Coin[]> => {
-  const client = await StargateClient.connect(rpc);
-  const balances = (await client.getAllBalances(owner)) || [];
-
-  await Promise.all(
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    balances.map(async (coin: any) => {
-      // any becuse of annoying readonly
-      if (coin.denom.startsWith("ibc/")) {
-        coin.denom = await ibcAddressToDenom(coin.denom);
-      }
-    })
-  );
-
-  return [...balances];
-};
-
-const ibcAddressToDenom = async (address: string): Promise<string> => {
-  const tmClient = await Tendermint34Client.connect(rpc);
-  const queryClient = new QueryClient(tmClient);
-  const ibcExtension = setupIbcExtension(queryClient);
-
-  const ibcHash = address.replace("ibc/", "");
-  const { denomTrace } = await ibcExtension.ibc.transfer.denomTrace(ibcHash);
-  const baseDenom = denomTrace?.baseDenom;
-
-  if (typeof baseDenom === "undefined") {
-    throw new Error("couldn't get denom from ibc address");
-  }
-
-  return baseDenom;
-};
-
-const submitBridgeTransfer = async (
-  rpc: string,
-  sourceChainId: string,
-  source: string,
-  target: string,
-  token: string,
-  amount: string,
-  channelId: string
-): Promise<void> => {
-  const client = await SigningStargateClient.connectWithSigner(
-    rpc,
-    keplr.getOfflineSigner(sourceChainId),
-    {
-      broadcastPollIntervalMs: 300,
-      broadcastTimeoutMs: 8_000,
-    }
+    <>
+      <Panel>
+        {tabs.map((tab) => (
+          <div key={tab}>
+            <label>
+              <input
+                type="radio"
+                value={tab}
+                checked={selectedTab === tab}
+                onChange={(e) => setSelectedTab(e.target.value as Tab)}
+              ></input>
+              {tab}
+            </label>
+          </div>
+        ))}
+      </Panel>
+
+      {page}
+    </>
   );
-
-  const fee = {
-    amount: coins("0", token),
-    gas: "222000",
-  };
-
-  const response = await client.sendIbcTokens(
-    source,
-    target,
-    coin(amount, token),
-    "transfer",
-    channelId,
-    undefined, // timeout height
-    Math.floor(Date.now() / 1000) + 60, // timeout timestamp
-    fee,
-    `${sourceChainId}->Namada`
-  );
-
-  if (response.code !== 0) {
-    throw new Error(response.code + " " + response.rawLog);
-  }
 };
diff --git a/apps/namadillo/src/App/Ibc/IbcFromNamada.tsx b/apps/namadillo/src/App/Ibc/IbcFromNamada.tsx
new file mode 100644
index 000000000..83c869840
--- /dev/null
+++ b/apps/namadillo/src/App/Ibc/IbcFromNamada.tsx
@@ -0,0 +1,162 @@
+import { Key as KeplrKey, Window as KeplrWindow } from "@keplr-wallet/types";
+import { Panel } from "@namada/components";
+import { WindowWithNamada } from "@namada/types";
+import BigNumber from "bignumber.js";
+import { getSdkInstance } from "hooks";
+import { useAtomValue } from "jotai";
+import { useEffect, useState } from "react";
+
+import { NamCurrency } from "App/Common/NamCurrency";
+import { NamInput } from "App/Common/NamInput";
+import { accountBalanceAtom, defaultAccountAtom } from "atoms/accounts";
+import { chainAtom, chainParametersAtom } from "atoms/chain";
+import { getFirstError } from "atoms/utils";
+
+const keplr = (window as KeplrWindow).keplr!;
+const namada = (window as WindowWithNamada).namada!;
+
+const keplrChain = "theta-testnet-001";
+
+const buttonStyles = "bg-white my-2 p-2 block";
+
+export const IbcFromNamada: React.FC = () => {
+  const [error, setError] = useState("");
+  const [keplrAccount, setKeplrAccount] = useState<KeplrKey>();
+  const [amount, setAmount] = useState<BigNumber>();
+  const [channel, setChannel] = useState("");
+
+  const namadaAccount = useAtomValue(defaultAccountAtom);
+  const balance = useAtomValue(accountBalanceAtom);
+  const namadaChain = useAtomValue(chainAtom);
+  const namadaChainParams = useAtomValue(chainParametersAtom);
+
+  useEffect(() => {
+    const error = getFirstError(
+      namadaAccount,
+      balance,
+      namadaChain,
+      namadaChainParams
+    );
+    setError(error ? error.message : "");
+  }, [
+    namadaAccount.isError,
+    balance.isError,
+    namadaChain.isError,
+    namadaChainParams.isError,
+  ]);
+
+  const withErrorReporting =
+    (fn: () => Promise<void>): (() => Promise<void>) =>
+    async () => {
+      try {
+        await fn();
+        setError("");
+      } catch (e) {
+        // eslint-disable-next-line no-console
+        console.log(e);
+        setError(e instanceof Error ? e.message : "unknown error");
+      }
+    };
+
+  const getKeplrAccount = withErrorReporting(async () => {
+    const key = await keplr.getKey(keplrChain);
+    setKeplrAccount(key);
+  });
+
+  const submitIbcTransfer = withErrorReporting(async () => {
+    const wrapperTxProps = {
+      token: namadaChain.data!.nativeTokenAddress,
+      feeAmount: BigNumber(0),
+      gasLimit: BigNumber(20_000),
+      chainId: namadaChain.data!.chainId,
+      publicKey: namadaAccount.data!.publicKey,
+      memo: `Namada->${keplrChain}`,
+    };
+
+    const sdk = await getSdkInstance();
+    const tx = await sdk.tx.buildIbcTransfer(wrapperTxProps, {
+      source: namadaAccount.data!.address,
+      receiver: keplrAccount!.bech32Address,
+      token: namadaChain.data!.nativeTokenAddress,
+      amount: amount!,
+      portId: "transfer",
+      channelId: channel,
+      timeoutHeight: undefined,
+      timeoutSecOffset: undefined,
+      memo: `Namada->${keplrChain}`, // how is this different from the wrapper memo?
+      shieldingData: undefined,
+    });
+
+    const signedTxBytes = await namada.sign({
+      signer: namadaAccount.data!.address,
+      txs: [tx],
+      checksums: namadaChainParams.data!.checksums,
+    });
+
+    await sdk.rpc.broadcastTx(signedTxBytes![0], wrapperTxProps);
+  });
+
+  return (
+    <Panel
+      title="IBC Namada -> Cosmos"
+      className="mb-2 bg-[#999999] text-black"
+    >
+      {/* Error */}
+      <p className="text-[#ff0000]">{error}</p>
+
+      <hr />
+
+      {/* Namada account */}
+      <h3>Namada account</h3>
+      {namadaAccount.isSuccess && typeof namadaAccount.data !== "undefined" && (
+        <p>
+          {namadaAccount.data.alias} {namadaAccount.data.address}
+        </p>
+      )}
+
+      <hr />
+
+      {/* Balance */}
+      <h3>Balance</h3>
+      {balance.isSuccess && <NamCurrency amount={balance.data} />}
+
+      <hr />
+
+      {/* Keplr address */}
+      <h3>Keplr address</h3>
+      <button className={buttonStyles} onClick={getKeplrAccount}>
+        get address
+      </button>
+
+      {keplrAccount && (
+        <p>
+          {keplrAccount.name} {keplrAccount.bech32Address}
+        </p>
+      )}
+
+      <hr />
+
+      {/* Amount */}
+      <h3>Amount to send</h3>
+      <NamInput value={amount} onChange={(e) => setAmount(e.target.value)} />
+
+      <hr />
+
+      {/* Channel */}
+      <h3>Channel</h3>
+      <input
+        type="text"
+        value={channel}
+        onChange={(e) => setChannel(e.target.value)}
+      />
+
+      <hr />
+
+      {/* Submit IBC transfer */}
+      <h3>Submit IBC transfer</h3>
+      <button className={buttonStyles} onClick={submitIbcTransfer}>
+        submit IBC transfer
+      </button>
+    </Panel>
+  );
+};
diff --git a/apps/namadillo/src/App/Ibc/IbcToNamada.tsx b/apps/namadillo/src/App/Ibc/IbcToNamada.tsx
new file mode 100644
index 000000000..0ce1f1f32
--- /dev/null
+++ b/apps/namadillo/src/App/Ibc/IbcToNamada.tsx
@@ -0,0 +1,226 @@
+import { Coin } from "@cosmjs/launchpad";
+import { coin, coins } from "@cosmjs/proto-signing";
+import {
+  QueryClient,
+  SigningStargateClient,
+  StargateClient,
+  setupIbcExtension,
+} from "@cosmjs/stargate";
+import { Tendermint34Client } from "@cosmjs/tendermint-rpc";
+import { Window as KeplrWindow } from "@keplr-wallet/types";
+import { Panel } from "@namada/components";
+import { DerivedAccount, WindowWithNamada } from "@namada/types";
+import { useState } from "react";
+
+const keplr = (window as KeplrWindow).keplr!;
+const namada = (window as WindowWithNamada).namada!;
+
+const chain = "theta-testnet-001";
+const rpc = "https://rpc-t.cosmos.nodestake.top";
+
+const buttonStyles = "bg-white my-2 p-2 block";
+
+export const IbcToNamada: React.FC = () => {
+  const [error, setError] = useState("");
+  const [address, setAddress] = useState("");
+  const [alias, setAlias] = useState("");
+  const [balances, setBalances] = useState<Coin[] | undefined>();
+  const [namadaAccounts, setNamadaAccounts] = useState<DerivedAccount[]>();
+  const [token, setToken] = useState("");
+  const [target, setTarget] = useState("");
+  const [amount, setAmount] = useState("");
+  const [channelId, setChannelId] = useState("");
+
+  const withErrorReporting =
+    (fn: () => Promise<void>): (() => Promise<void>) =>
+    async () => {
+      try {
+        await fn();
+        setError("");
+      } catch (e) {
+        // eslint-disable-next-line no-console
+        console.log(e);
+        setError(e instanceof Error ? e.message : "unknown error");
+      }
+    };
+
+  const getAddress = withErrorReporting(async () => {
+    const key = await keplr.getKey(chain);
+    setAddress(key.bech32Address);
+    setAlias(key.name);
+  });
+
+  const getBalances = withErrorReporting(async () => {
+    setBalances(undefined);
+    const balances = await queryBalances(address);
+    setBalances(balances);
+  });
+
+  const getNamadaAccounts = withErrorReporting(async () => {
+    const accounts = await namada.accounts();
+    setNamadaAccounts(accounts);
+  });
+
+  const submitIbcTransfer = withErrorReporting(async () =>
+    submitBridgeTransfer(rpc, chain, address, target, token, amount, channelId)
+  );
+
+  return (
+    <Panel
+      title="IBC Cosmos -> Namada"
+      className="mb-2 bg-[#999999] text-black"
+    >
+      {/* Error */}
+      <p className="text-[#ff0000]">{error}</p>
+
+      <hr />
+
+      {/* Keplr addresses */}
+      <h3>Keplr addresses</h3>
+      <button className={buttonStyles} onClick={getAddress}>
+        get address
+      </button>
+      <p>
+        {alias} {address}
+      </p>
+
+      <hr />
+
+      {/* Balances */}
+      <h3>Balances</h3>
+      <button className={buttonStyles} onClick={getBalances}>
+        get balances
+      </button>
+      {balances?.map(({ denom, amount }) => (
+        <div key={denom}>
+          <label>
+            <input
+              type="radio"
+              name="token"
+              value={denom}
+              checked={token === denom}
+              onChange={(e) => setToken(e.target.value)}
+            />
+            {denom} {amount}
+          </label>
+        </div>
+      ))}
+
+      <hr />
+
+      {/* Namada accounts */}
+      <h3>Namada accounts</h3>
+      <button className={buttonStyles} onClick={getNamadaAccounts}>
+        get namada accounts
+      </button>
+
+      {namadaAccounts?.map(({ alias, address }) => (
+        <div key={address}>
+          <label>
+            <input
+              type="radio"
+              name="target"
+              value={address}
+              checked={target === address}
+              onChange={(e) => setTarget(e.target.value)}
+            />
+            {alias} {address}
+          </label>
+        </div>
+      ))}
+
+      <hr />
+
+      {/* Amount to send */}
+      <h3>Amount to send</h3>
+      <input value={amount} onChange={(e) => setAmount(e.target.value)} />
+
+      <hr />
+
+      {/* Channel ID */}
+      <h3>Channel ID</h3>
+      <input value={channelId} onChange={(e) => setChannelId(e.target.value)} />
+
+      <hr />
+
+      {/* Submit IBC transfer */}
+      <h3>Submit IBC transfer</h3>
+      <button className={buttonStyles} onClick={submitIbcTransfer}>
+        submit IBC transfer
+      </button>
+    </Panel>
+  );
+};
+
+const queryBalances = async (owner: string): Promise<Coin[]> => {
+  const client = await StargateClient.connect(rpc);
+  const balances = (await client.getAllBalances(owner)) || [];
+
+  await Promise.all(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    balances.map(async (coin: any) => {
+      // any becuse of annoying readonly
+      if (coin.denom.startsWith("ibc/")) {
+        coin.denom = await ibcAddressToDenom(coin.denom);
+      }
+    })
+  );
+
+  return [...balances];
+};
+
+const ibcAddressToDenom = async (address: string): Promise<string> => {
+  const tmClient = await Tendermint34Client.connect(rpc);
+  const queryClient = new QueryClient(tmClient);
+  const ibcExtension = setupIbcExtension(queryClient);
+
+  const ibcHash = address.replace("ibc/", "");
+  const { denomTrace } = await ibcExtension.ibc.transfer.denomTrace(ibcHash);
+  const baseDenom = denomTrace?.baseDenom;
+
+  if (typeof baseDenom === "undefined") {
+    throw new Error("couldn't get denom from ibc address");
+  }
+
+  return baseDenom;
+};
+
+const submitBridgeTransfer = async (
+  rpc: string,
+  sourceChainId: string,
+  source: string,
+  target: string,
+  token: string,
+  amount: string,
+  channelId: string
+): Promise<void> => {
+  const client = await SigningStargateClient.connectWithSigner(
+    rpc,
+    keplr.getOfflineSigner(sourceChainId),
+    {
+      broadcastPollIntervalMs: 300,
+      broadcastTimeoutMs: 8_000,
+    }
+  );
+
+  const fee = {
+    amount: coins("0", token),
+    gas: "222000",
+  };
+
+  const response = await client.sendIbcTokens(
+    source,
+    target,
+    coin(amount, token),
+    "transfer",
+    channelId,
+    undefined, // timeout height
+    Math.floor(Date.now() / 1000) + 60, // timeout timestamp
+    fee,
+    `${sourceChainId}->Namada`
+  );
+
+  if (response.code !== 0) {
+    throw new Error(response.code + " " + response.rawLog);
+  }
+};