diff --git a/apps/namadillo/package.json b/apps/namadillo/package.json
index 79048005ea..3580a30903 100644
--- a/apps/namadillo/package.json
+++ b/apps/namadillo/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@namada/namadillo",
-  "version": "1.0.6",
+  "version": "1.1.0",
   "description": "Namadillo",
   "repository": "https://github.com/anoma/namada-interface/",
   "author": "Heliax Dev <info@heliax.dev>",
diff --git a/apps/namadillo/src/App/Common/GasFeeModal.tsx b/apps/namadillo/src/App/Common/GasFeeModal.tsx
new file mode 100644
index 0000000000..95fc80a489
--- /dev/null
+++ b/apps/namadillo/src/App/Common/GasFeeModal.tsx
@@ -0,0 +1,111 @@
+import { Modal, SkeletonLoading } from "@namada/components";
+import { chainAssetsMapAtom, nativeTokenAddressAtom } from "atoms/chain";
+import {
+  gasPriceForAllTokensAtom,
+  storageGasTokenAtom,
+} from "atoms/fees/atoms";
+import { tokenPricesFamily } from "atoms/prices/atoms";
+import BigNumber from "bignumber.js";
+import { useAtomValue, useSetAtom } from "jotai";
+import { IoClose } from "react-icons/io5";
+import { twMerge } from "tailwind-merge";
+import { GasConfig } from "types";
+import { unknownAsset } from "utils/assets";
+import { getDisplayGasFee } from "utils/gas";
+import { FiatCurrency } from "./FiatCurrency";
+import { TokenCurrency } from "./TokenCurrency";
+
+export const GasFeeModal = ({
+  gasConfig,
+  onClose,
+}: {
+  gasConfig: GasConfig;
+  onClose: () => void;
+}): JSX.Element => {
+  const setStorageGasToken = useSetAtom(storageGasTokenAtom);
+  const gasPriceForAllTokens = useAtomValue(gasPriceForAllTokensAtom);
+  const chainAssetsMap = useAtomValue(chainAssetsMapAtom);
+  const nativeTokenAddress = useAtomValue(nativeTokenAddressAtom).data;
+
+  const data = gasPriceForAllTokens.data ?? [];
+
+  const tokenAddresses = data.map((item) => item.token);
+  const gasDollarMap = useAtomValue(tokenPricesFamily(tokenAddresses));
+
+  return (
+    <Modal onClose={onClose}>
+      <div
+        className={twMerge(
+          "fixed min-w-[550px] top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2",
+          "px-6 py-7 bg-rblack border border-neutral-500 rounded-md"
+        )}
+      >
+        <i
+          className={twMerge(
+            "cursor-pointer text-white absolute right-3 top-3 text-xl",
+            "hover:text-yellow transition-colors"
+          )}
+          onClick={onClose}
+        >
+          <IoClose />
+        </i>
+        <div className="text-center">
+          <h2 className="font-medium">Select Gas Token</h2>
+          <div className="text-sm mt-1">
+            Gas fees deducted from your Namada accounts
+          </div>
+        </div>
+        <div className="flex flex-col mt-4 max-h-[60vh] overflow-auto">
+          {!data.length ?
+            <SkeletonLoading height="100px" width="100%" />
+          : data
+              .sort((a, b) =>
+                a.token === nativeTokenAddress ? -1
+                : b.token === nativeTokenAddress ? 1
+                : 0
+              )
+              .map(({ token, minDenomAmount }) => {
+                const asset = chainAssetsMap[token] ?? unknownAsset(token);
+                const symbol = asset.symbol;
+                const fee = getDisplayGasFee({
+                  gasLimit: gasConfig.gasLimit,
+                  gasPrice: BigNumber(minDenomAmount),
+                  gasToken: token,
+                  asset,
+                });
+                const price = gasDollarMap.data?.[token];
+                const dollar = price ? fee.multipliedBy(price) : undefined;
+
+                const selected = token === gasConfig.gasToken;
+
+                return (
+                  <button
+                    key={token}
+                    className={twMerge(
+                      "flex justify-between items-center",
+                      "bg-rblack rounded-sm px-5 min-h-[58px]",
+                      "hover:text-yellow hover:border-yellow transition-colors duration-300",
+                      selected ? "border border-white" : "m-px"
+                    )}
+                    type="button"
+                    onClick={() => {
+                      setStorageGasToken(token);
+                      onClose();
+                    }}
+                  >
+                    <div>{symbol}</div>
+                    <div className="text-right">
+                      {dollar && <FiatCurrency amount={dollar} />}
+                      <div className="text-xs">
+                        <TokenCurrency amount={fee} symbol={symbol} />
+                      </div>
+                    </div>
+                  </button>
+                );
+              })
+          }
+        </div>
+      </div>
+    </Modal>
+  );
+};
diff --git a/apps/namadillo/src/App/Common/TransactionFee.tsx b/apps/namadillo/src/App/Common/TransactionFee.tsx
new file mode 100644
index 0000000000..701c94e063
--- /dev/null
+++ b/apps/namadillo/src/App/Common/TransactionFee.tsx
@@ -0,0 +1,21 @@
+import { GasConfig } from "types";
+import { unknownAsset } from "utils/assets";
+import { getDisplayGasFee } from "utils/gas";
+import { TokenCurrency } from "./TokenCurrency";
+
+export const TransactionFee = ({
+  gasConfig,
+}: {
+  gasConfig: GasConfig;
+}): JSX.Element => {
+  const asset = gasConfig.asset ?? unknownAsset(gasConfig.gasToken);
+  const symbol = asset.symbol;
+  const fee = getDisplayGasFee(gasConfig);
+
+  return (
+    <div className="text-sm">
+      <span className="underline">Transaction fee:</span>{" "}
+      <TokenCurrency symbol={symbol} amount={fee} className="font-medium " />
+    </div>
+  );
+};
diff --git a/apps/namadillo/src/App/Common/TransactionFeeButton.tsx b/apps/namadillo/src/App/Common/TransactionFeeButton.tsx
new file mode 100644
index 0000000000..e38cbe9942
--- /dev/null
+++ b/apps/namadillo/src/App/Common/TransactionFeeButton.tsx
@@ -0,0 +1,30 @@
+import { useState } from "react";
+import { GasConfig } from "types";
+import { GasFeeModal } from "./GasFeeModal";
+import { TransactionFee } from "./TransactionFee";
+
+export const TransactionFeeButton = ({
+  gasConfig,
+}: {
+  gasConfig: GasConfig;
+}): JSX.Element => {
+  const [modalOpen, setModalOpen] = useState(false);
+
+  return (
+    <>
+      <button
+        type="button"
+        className="hover:underline cursor-pointer"
+        onClick={() => setModalOpen(true)}
+      >
+        <TransactionFee gasConfig={gasConfig} />
+      </button>
+      {modalOpen && (
+        <GasFeeModal
+          gasConfig={gasConfig}
+          onClose={() => setModalOpen(false)}
+        />
+      )}
+    </>
+  );
+};
diff --git a/apps/namadillo/src/App/Common/TransactionFees.tsx b/apps/namadillo/src/App/Common/TransactionFees.tsx
deleted file mode 100644
index 0631dd83c0..0000000000
--- a/apps/namadillo/src/App/Common/TransactionFees.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import clsx from "clsx";
-import { GasConfig } from "types";
-import { NamCurrency } from "./NamCurrency";
-import { TextLink } from "./TextLink";
-
-type TransactionFeesProps = {
-  gasConfig: GasConfig;
-  className?: string;
-};
-
-export const TransactionFees = ({
-  gasConfig,
-  className,
-}: TransactionFeesProps): JSX.Element => {
-  const fee = gasConfig.gasPrice.times(gasConfig.gasLimit);
-
-  return (
-    <div className={clsx("text-white text-sm", className)}>
-      <TextLink>Transaction fee:</TextLink>{" "}
-      <NamCurrency className="font-medium" amount={fee} />
-    </div>
-  );
-};
diff --git a/apps/namadillo/src/App/Governance/SubmitVote.tsx b/apps/namadillo/src/App/Governance/SubmitVote.tsx
index f531463832..03541740a3 100644
--- a/apps/namadillo/src/App/Governance/SubmitVote.tsx
+++ b/apps/namadillo/src/App/Governance/SubmitVote.tsx
@@ -12,7 +12,7 @@ import {
   isVoteType,
   voteTypes,
 } from "@namada/types";
-import { TransactionFees } from "App/Common/TransactionFees";
+import { TransactionFeeButton } from "App/Common/TransactionFeeButton";
 import { defaultGasConfigFamily } from "atoms/fees";
 import {
   createNotificationId,
@@ -181,10 +181,9 @@ export const WithProposalId: React.FC<{ proposalId: bigint }> = ({
             </Stack>
             <footer>
               {gasConfig.isSuccess && (
-                <TransactionFees
-                  className="flex justify-between"
-                  gasConfig={gasConfig.data}
-                />
+                <div className="justify-self-end">
+                  <TransactionFeeButton gasConfig={gasConfig.data} />
+                </div>
               )}
             </footer>
             <ActionButton
diff --git a/apps/namadillo/src/App/Ibc/IbcTransfer.tsx b/apps/namadillo/src/App/Ibc/IbcTransfer.tsx
index d8e7415104..e4b2ab9373 100644
--- a/apps/namadillo/src/App/Ibc/IbcTransfer.tsx
+++ b/apps/namadillo/src/App/Ibc/IbcTransfer.tsx
@@ -21,7 +21,7 @@ import { useTransactionActions } from "hooks/useTransactionActions";
 import { useWalletManager } from "hooks/useWalletManager";
 import { wallets } from "integrations";
 import { KeplrWalletManager } from "integrations/Keplr";
-import { getTransactionFee } from "integrations/utils";
+import { getIbcGasConfig } from "integrations/utils";
 import { useAtomValue } from "jotai";
 import { useEffect, useMemo, useState } from "react";
 import namadaChain from "registry/namada.json";
@@ -71,9 +71,9 @@ export const IbcTransfer: React.FC = () => {
     selectedAssetAddress
   );
 
-  const transactionFee = useMemo(() => {
+  const gasConfig = useMemo(() => {
     if (typeof registry !== "undefined") {
-      return getTransactionFee(registry);
+      return getIbcGasConfig(registry);
     }
     return undefined;
   }, [registry]);
@@ -144,7 +144,7 @@ export const IbcTransfer: React.FC = () => {
         throw new Error("Invalid IBC destination channel");
       }
 
-      if (typeof transactionFee === "undefined") {
+      if (typeof gasConfig === "undefined") {
         throw new Error("No transaction fee is set");
       }
 
@@ -179,7 +179,7 @@ export const IbcTransfer: React.FC = () => {
             destinationAddress,
             amount: displayAmount,
             asset: selectedAsset,
-            transactionFee,
+            gasConfig,
             sourceChannelId: sourceChannel.trim(),
             ...(shielded ?
               {
@@ -254,7 +254,7 @@ export const IbcTransfer: React.FC = () => {
                 isShielded: shielded,
                 onChangeShielded: setShielded,
               }}
-              transactionFee={transactionFee}
+              gasConfig={gasConfig}
               isSubmitting={performIbcTransfer.isPending}
               isIbcTransfer={true}
               requiresIbcChannels={requiresIbcChannels}
diff --git a/apps/namadillo/src/App/Ibc/IbcWithdraw.tsx b/apps/namadillo/src/App/Ibc/IbcWithdraw.tsx
index 67de11ff37..13494e0e4f 100644
--- a/apps/namadillo/src/App/Ibc/IbcWithdraw.tsx
+++ b/apps/namadillo/src/App/Ibc/IbcWithdraw.tsx
@@ -24,7 +24,6 @@ import { broadcastTx } from "lib/query";
 import { useEffect, useState } from "react";
 import namadaChainRegistry from "registry/namada.json";
 import { Address, PartialTransferTransactionData, TransferStep } from "types";
-import { namadaAsset } from "utils";
 import { IbcTopHeader } from "./IbcTopHeader";
 
 const defaultChainId = "cosmoshub-4";
@@ -53,15 +52,6 @@ export const IbcWithdraw: React.FC = () => {
     defaultGasConfigFamily(["IbcTransfer"])
   );
 
-  const transactionFee = mapUndefined(
-    ({ gasLimit, gasPrice }) => ({
-      originalAddress: namadaAsset().address,
-      asset: namadaAsset(),
-      amount: gasPrice.multipliedBy(gasLimit),
-    }),
-    gasConfig
-  );
-
   const {
     walletAddress: keplrAddress,
     connectToChainId,
@@ -203,7 +193,7 @@ export const IbcWithdraw: React.FC = () => {
               onChangeSourceChannel: setSourceChannel,
             }}
             onSubmitTransfer={submitIbcTransfer}
-            transactionFee={transactionFee}
+            gasConfig={gasConfig}
             errorMessage={generalErrorMessage}
           />
         </>
diff --git a/apps/namadillo/src/App/Ibc/ShieldAllPanel.tsx b/apps/namadillo/src/App/Ibc/ShieldAllPanel.tsx
index 5a1d9e897b..0d6f4cde4f 100644
--- a/apps/namadillo/src/App/Ibc/ShieldAllPanel.tsx
+++ b/apps/namadillo/src/App/Ibc/ShieldAllPanel.tsx
@@ -6,9 +6,9 @@ import {
   Stack,
 } from "@namada/components";
 import svgImg from "App/Assets/ShieldedParty.svg";
+import { TransactionFee } from "App/Common/TransactionFee";
 import { SelectedWallet } from "App/Transfer/SelectedWallet";
-import { TransferTransactionFee } from "App/Transfer/TransferTransactionFee";
-import { getTransactionFee } from "integrations/utils";
+import { getIbcGasConfig } from "integrations/utils";
 import { useEffect, useMemo, useState } from "react";
 import {
   AddressWithAssetAndAmount,
@@ -20,6 +20,7 @@ import {
   ShieldAllAssetList,
 } from "./ShieldAllAssetList";
 import { ShieldAllContainer } from "./ShieldAllContainer";
+import ibcTransferImageBlack from "./assets/ibc-transfer-black.png";
 
 type ShieldAllPanelProps = {
   registry: ChainRegistryEntry;
@@ -76,7 +77,7 @@ export const ShieldAllPanel = ({
     [selectableAssets]
   );
 
-  const transactionFee = getTransactionFee(registry);
+  const gasConfig = getIbcGasConfig(registry);
 
   return (
     <ShieldAllContainer>
@@ -115,13 +116,10 @@ export const ShieldAllPanel = ({
           }
         </Stack>
         <Stack as="footer" gap={4}>
-          {transactionFee && (
-            <TransferTransactionFee
-              transactionFee={transactionFee}
-              isIbcTransfer={true}
-              textColor="black"
-            />
-          )}
+          <footer className="flex justify-between items-center">
+            <img src={ibcTransferImageBlack} className="w-20" />
+            {gasConfig && <TransactionFee gasConfig={gasConfig} />}
+          </footer>
           <ActionButton
             backgroundColor="black"
             backgroundHoverColor="cyan"
diff --git a/apps/namadillo/src/App/Ibc/ShieldAllProgress.tsx b/apps/namadillo/src/App/Ibc/ShieldAllProgress.tsx
index b60175db75..8a3151a1fb 100644
--- a/apps/namadillo/src/App/Ibc/ShieldAllProgress.tsx
+++ b/apps/namadillo/src/App/Ibc/ShieldAllProgress.tsx
@@ -1,7 +1,7 @@
 import { Stack } from "@namada/components";
 import svgImg from "App/Assets/ShieldedParty.svg";
 import { Timeline } from "App/Common/Timeline";
-import ibcTransferBlack from "../Transfer/assets/ibc-transfer-black.png";
+import ibcTransferBlack from "./assets/ibc-transfer-black.png";
 import { ShieldAllContainer } from "./ShieldAllContainer";
 
 export const ShieldAllProgress = (): JSX.Element => {
diff --git a/apps/namadillo/src/App/Transfer/assets/ibc-transfer-black.png b/apps/namadillo/src/App/Ibc/assets/ibc-transfer-black.png
similarity index 100%
rename from apps/namadillo/src/App/Transfer/assets/ibc-transfer-black.png
rename to apps/namadillo/src/App/Ibc/assets/ibc-transfer-black.png
diff --git a/apps/namadillo/src/App/Masp/MaspShield.tsx b/apps/namadillo/src/App/Masp/MaspShield.tsx
index 37ad7a2976..2451c0b0d5 100644
--- a/apps/namadillo/src/App/Masp/MaspShield.tsx
+++ b/apps/namadillo/src/App/Masp/MaspShield.tsx
@@ -5,7 +5,6 @@ import { Timeline } from "App/Common/Timeline";
 import { params } from "App/routes";
 import {
   OnSubmitTransferParams,
-  TransactionFee,
   TransferModule,
 } from "App/Transfer/TransferModule";
 import { allDefaultAccountsAtom } from "atoms/accounts";
@@ -71,15 +70,6 @@ export const MaspShield: React.FC = () => {
     defaultGasConfigFamily(["ShieldingTransfer"])
   );
 
-  const transactionFee: TransactionFee | undefined =
-    selectedAsset && gasConfig ?
-      {
-        originalAddress: selectedAsset.originalAddress,
-        asset: selectedAsset.asset,
-        amount: gasConfig.gasPrice.multipliedBy(gasConfig.gasLimit),
-      }
-    : undefined;
-
   const assetImage = selectedAsset ? getAssetImageUrl(selectedAsset.asset) : "";
 
   useEffect(() => {
@@ -207,7 +197,7 @@ export const MaspShield: React.FC = () => {
                 walletAddress: destinationAddress,
                 isShielded: true,
               }}
-              transactionFee={transactionFee}
+              gasConfig={gasConfig}
               isSubmitting={performShieldTransfer.isPending}
               errorMessage={generalErrorMessage}
               onSubmitTransfer={onSubmitTransfer}
diff --git a/apps/namadillo/src/App/Masp/MaspUnshield.tsx b/apps/namadillo/src/App/Masp/MaspUnshield.tsx
index ad48817318..de9612b82e 100644
--- a/apps/namadillo/src/App/Masp/MaspUnshield.tsx
+++ b/apps/namadillo/src/App/Masp/MaspUnshield.tsx
@@ -5,7 +5,6 @@ import { Timeline } from "App/Common/Timeline";
 import { params } from "App/routes";
 import {
   OnSubmitTransferParams,
-  TransactionFee,
   TransferModule,
 } from "App/Transfer/TransferModule";
 import { allDefaultAccountsAtom } from "atoms/accounts";
@@ -72,15 +71,6 @@ export const MaspUnshield: React.FC = () => {
     defaultGasConfigFamily(["UnshieldingTransfer"])
   );
 
-  const transactionFee: TransactionFee | undefined =
-    selectedAsset && gasConfig ?
-      {
-        originalAddress: selectedAsset.originalAddress,
-        asset: selectedAsset.asset,
-        amount: gasConfig.gasPrice.multipliedBy(gasConfig.gasLimit),
-      }
-    : undefined;
-
   const assetImage = selectedAsset ? getAssetImageUrl(selectedAsset.asset) : "";
 
   useEffect(() => {
@@ -213,7 +203,7 @@ export const MaspUnshield: React.FC = () => {
                 walletAddress: destinationAddress,
                 isShielded: false,
               }}
-              transactionFee={transactionFee}
+              gasConfig={gasConfig}
               isSubmitting={performUnshieldTransfer.isPending}
               errorMessage={generalErrorMessage}
               onSubmitTransfer={onSubmitTransfer}
diff --git a/apps/namadillo/src/App/NamadaTransfer/NamadaTransfer.tsx b/apps/namadillo/src/App/NamadaTransfer/NamadaTransfer.tsx
index ed2c2b637b..408cf46670 100644
--- a/apps/namadillo/src/App/NamadaTransfer/NamadaTransfer.tsx
+++ b/apps/namadillo/src/App/NamadaTransfer/NamadaTransfer.tsx
@@ -6,7 +6,6 @@ import { TransferTransactionTimeline } from "App/Transactions/TransferTransactio
 import { isShieldedAddress } from "App/Transfer/common";
 import {
   OnSubmitTransferParams,
-  TransactionFee,
   TransferModule,
 } from "App/Transfer/TransferModule";
 import { allDefaultAccountsAtom } from "atoms/accounts";
@@ -152,15 +151,6 @@ export const NamadaTransfer: React.FC = () => {
     }
   })();
 
-  const transactionFee: TransactionFee | undefined =
-    selectedAsset && gasConfig ?
-      {
-        originalAddress: selectedAsset.originalAddress,
-        asset: selectedAsset.asset,
-        amount: gasConfig.gasPrice.multipliedBy(gasConfig.gasLimit),
-      }
-    : undefined;
-
   const isSourceShielded = isShieldedAddress(source);
   const isTargetShielded = isShieldedAddress(target);
 
@@ -281,7 +271,7 @@ export const NamadaTransfer: React.FC = () => {
               customAddress,
               onChangeCustomAddress: setCustomAddress,
             }}
-            transactionFee={transactionFee}
+            gasConfig={gasConfig}
             isSubmitting={isPerformingTransfer}
             errorMessage={generalErrorMessage}
             onSubmitTransfer={onSubmitTransfer}
diff --git a/apps/namadillo/src/App/Staking/IncrementBonding.tsx b/apps/namadillo/src/App/Staking/IncrementBonding.tsx
index 5524da130b..c2df68dff9 100644
--- a/apps/namadillo/src/App/Staking/IncrementBonding.tsx
+++ b/apps/namadillo/src/App/Staking/IncrementBonding.tsx
@@ -5,7 +5,7 @@ import { Info } from "App/Common/Info";
 import { ModalContainer } from "App/Common/ModalContainer";
 import { NamCurrency } from "App/Common/NamCurrency";
 import { TableRowLoading } from "App/Common/TableRowLoading";
-import { TransactionFees } from "App/Common/TransactionFees";
+import { TransactionFeeButton } from "App/Common/TransactionFeeButton";
 import { routes } from "App/routes";
 import { accountBalanceAtom, defaultAccountAtom } from "atoms/accounts";
 import { chainParametersAtom } from "atoms/chain";
@@ -228,10 +228,9 @@ const IncrementBonding = (): JSX.Element => {
               {isPerformingBonding ? "Processing..." : errorMessage || "Stake"}
             </ActionButton>
             {gasConfig && (
-              <TransactionFees
-                className="justify-self-end px-4"
-                gasConfig={gasConfig}
-              />
+              <div className="justify-self-end px-4">
+                <TransactionFeeButton gasConfig={gasConfig} />
+              </div>
             )}
           </div>
         </form>
diff --git a/apps/namadillo/src/App/Staking/ReDelegateAssignStake.tsx b/apps/namadillo/src/App/Staking/ReDelegateAssignStake.tsx
index bca28d3768..586f49e852 100644
--- a/apps/namadillo/src/App/Staking/ReDelegateAssignStake.tsx
+++ b/apps/namadillo/src/App/Staking/ReDelegateAssignStake.tsx
@@ -1,6 +1,6 @@
 import { ActionButton, Panel } from "@namada/components";
 import { NamCurrency } from "App/Common/NamCurrency";
-import { TransactionFees } from "App/Common/TransactionFees";
+import { TransactionFeeButton } from "App/Common/TransactionFeeButton";
 import BigNumber from "bignumber.js";
 import clsx from "clsx";
 import { useValidatorFilter } from "hooks/useValidatorFilter";
@@ -162,10 +162,9 @@ export const ReDelegateAssignStake = ({
           isPerformingRedelegation={isPerformingRedelegation}
         />
         {gasConfig && (
-          <TransactionFees
-            className="justify-self-end px-4"
-            gasConfig={gasConfig}
-          />
+          <div className="justify-self-end px-4">
+            <TransactionFeeButton gasConfig={gasConfig} />
+          </div>
         )}
       </div>
     </>
diff --git a/apps/namadillo/src/App/Staking/Unstake.tsx b/apps/namadillo/src/App/Staking/Unstake.tsx
index e7201a3d37..e42b69bdfe 100644
--- a/apps/namadillo/src/App/Staking/Unstake.tsx
+++ b/apps/namadillo/src/App/Staking/Unstake.tsx
@@ -5,7 +5,7 @@ import { Info } from "App/Common/Info";
 import { ModalContainer } from "App/Common/ModalContainer";
 import { NamCurrency } from "App/Common/NamCurrency";
 import { TableRowLoading } from "App/Common/TableRowLoading";
-import { TransactionFees } from "App/Common/TransactionFees";
+import { TransactionFeeButton } from "App/Common/TransactionFeeButton";
 import { routes } from "App/routes";
 import { defaultAccountAtom } from "atoms/accounts";
 import { chainParametersAtom } from "atoms/chain";
@@ -215,10 +215,9 @@ export const Unstake = (): JSX.Element => {
               : validationMessage || "Unstake"}
             </ActionButton>
             {gasConfig && (
-              <TransactionFees
-                className="justify-self-end px-4"
-                gasConfig={gasConfig}
-              />
+              <div className="justify-self-end px-4">
+                <TransactionFeeButton gasConfig={gasConfig} />
+              </div>
             )}
           </div>
         </form>
diff --git a/apps/namadillo/src/App/Transfer/TransferDestination.tsx b/apps/namadillo/src/App/Transfer/TransferDestination.tsx
index 5844cd6b83..ab1582f7db 100644
--- a/apps/namadillo/src/App/Transfer/TransferDestination.tsx
+++ b/apps/namadillo/src/App/Transfer/TransferDestination.tsx
@@ -1,14 +1,15 @@
 import { Chain } from "@chain-registry/types";
 import { Stack } from "@namada/components";
 import { TabSelector } from "App/Common/TabSelector";
+import { TransactionFee } from "App/Common/TransactionFee";
+import { TransactionFeeButton } from "App/Common/TransactionFeeButton";
 import clsx from "clsx";
-import { Address, WalletProvider } from "types";
+import { Address, GasConfig, WalletProvider } from "types";
 import { ConnectProviderButton } from "./ConnectProviderButton";
 import { CustomAddressForm } from "./CustomAddressForm";
 import { SelectedChain } from "./SelectedChain";
 import { SelectedWallet } from "./SelectedWallet";
-import { TransactionFee } from "./TransferModule";
-import { TransferTransactionFee } from "./TransferTransactionFee";
+import ibcTransferImageWhite from "./assets/ibc-transfer-white.png";
 
 type TransferDestinationProps = {
   isShielded?: boolean;
@@ -17,7 +18,7 @@ type TransferDestinationProps = {
   wallet?: WalletProvider;
   walletAddress?: string;
   className?: string;
-  transactionFee?: TransactionFee;
+  gasConfig?: GasConfig;
   customAddressActive?: boolean;
   isIbcTransfer?: boolean;
   openChainSelector?: () => void;
@@ -36,7 +37,7 @@ export const TransferDestination = ({
   isShielded,
   isIbcTransfer,
   onChangeShielded,
-  transactionFee,
+  gasConfig,
   customAddressActive,
   onToggleCustomAddress,
   address,
@@ -119,12 +120,18 @@ export const TransferDestination = ({
           />
         </Stack>
       )}
-      {transactionFee && (
-        <footer className="text-neutral-300">
-          <TransferTransactionFee
-            transactionFee={transactionFee}
-            isIbcTransfer={isIbcTransfer}
-          />
+
+      {gasConfig && (
+        <footer className="mt-10">
+          {isIbcTransfer ?
+            <div className="flex justify-between items-center">
+              <img src={ibcTransferImageWhite} className="w-20" />
+              <TransactionFee gasConfig={gasConfig} />
+            </div>
+          : <div className="flex justify-end">
+              <TransactionFeeButton gasConfig={gasConfig} />
+            </div>
+          }
         </footer>
       )}
     </div>
diff --git a/apps/namadillo/src/App/Transfer/TransferModule.tsx b/apps/namadillo/src/App/Transfer/TransferModule.tsx
index 11782e40f4..47dbe9ee46 100644
--- a/apps/namadillo/src/App/Transfer/TransferModule.tsx
+++ b/apps/namadillo/src/App/Transfer/TransferModule.tsx
@@ -6,10 +6,11 @@ import BigNumber from "bignumber.js";
 import { useMemo, useState } from "react";
 import {
   Address,
-  AddressWithAssetAndAmount,
   AddressWithAssetAndAmountMap,
+  GasConfig,
   WalletProvider,
 } from "types";
+import { getDisplayGasFee } from "utils/gas";
 import { parseChainInfo } from "./common";
 import { IbcChannels } from "./IbcChannels";
 import { SelectAssetModal } from "./SelectAssetModal";
@@ -19,8 +20,6 @@ import { TransferArrow } from "./TransferArrow";
 import { TransferDestination } from "./TransferDestination";
 import { TransferSource } from "./TransferSource";
 
-export type TransactionFee = AddressWithAssetAndAmount;
-
 type TransferModuleConfig = {
   wallet?: WalletProvider;
   walletAddress?: string;
@@ -68,7 +67,7 @@ export type TransferModuleProps = {
   source: TransferSourceProps;
   destination: TransferDestinationProps;
   requiresIbcChannels?: boolean;
-  transactionFee?: TransactionFee;
+  gasConfig?: GasConfig;
   isSubmitting?: boolean;
   errorMessage?: string;
   onSubmitTransfer: (params: OnSubmitTransferParams) => void;
@@ -91,7 +90,7 @@ type ValidationResult =
 export const TransferModule = ({
   source,
   destination,
-  transactionFee,
+  gasConfig,
   isSubmitting,
   isIbcTransfer,
   ibcOptions,
@@ -125,16 +124,14 @@ export const TransferModule = ({
       return undefined;
     }
 
-    const minusFees =
-      (
-        transactionFee &&
-        selectedAssetAddress === transactionFee.originalAddress
-      ) ?
-        availableAmount.minus(transactionFee.amount)
-      : availableAmount;
+    if (!gasConfig || gasConfig.gasToken !== selectedAssetAddress) {
+      return availableAmount;
+    }
 
-    return BigNumber.max(minusFees, 0);
-  }, [source.selectedAssetAddress, source.availableAmount, transactionFee]);
+    const totalFees = getDisplayGasFee(gasConfig);
+    const amountMinusFees = availableAmount.minus(totalFees);
+    return BigNumber.max(amountMinusFees, 0);
+  }, [source.selectedAssetAddress, source.availableAmount, gasConfig]);
 
   const validationResult = useMemo((): ValidationResult => {
     if (!source.wallet) {
@@ -147,7 +144,7 @@ export const TransferModule = ({
       return "NoSelectedAsset";
     } else if (!source.amount || source.amount.eq(0)) {
       return "NoAmount";
-    } else if (!transactionFee) {
+    } else if (!gasConfig) {
       return "NoTransactionFee";
     } else if (
       !availableAmountMinusFees ||
@@ -159,7 +156,7 @@ export const TransferModule = ({
     } else {
       return "Ok";
     }
-  }, [source, destination, transactionFee, availableAmountMinusFees]);
+  }, [source, destination, gasConfig, availableAmountMinusFees]);
 
   const onSubmit = (e: React.FormEvent): void => {
     e.preventDefault();
@@ -318,7 +315,7 @@ export const TransferModule = ({
             onChangeAddress={destination.onChangeCustomAddress}
             memo={memo}
             onChangeMemo={setMemo}
-            transactionFee={transactionFee}
+            gasConfig={gasConfig}
           />
           {isIbcTransfer && requiresIbcChannels && (
             <IbcChannels
@@ -378,8 +375,7 @@ export const TransferModule = ({
 
       {destinationChainModalOpen &&
         destination.onChangeChain &&
-        destination.wallet &&
-        destination.walletAddress && (
+        destination.wallet && (
           <SelectChainModal
             onClose={() => setDestinationChainModalOpen(false)}
             chains={destination.availableChains || []}
diff --git a/apps/namadillo/src/App/Transfer/TransferTransactionFee.tsx b/apps/namadillo/src/App/Transfer/TransferTransactionFee.tsx
deleted file mode 100644
index ec63020a77..0000000000
--- a/apps/namadillo/src/App/Transfer/TransferTransactionFee.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { TokenCurrency } from "App/Common/TokenCurrency";
-import clsx from "clsx";
-import { twMerge } from "tailwind-merge";
-import { TransactionFee } from "./TransferModule";
-import ibcTransferImageBlack from "./assets/ibc-transfer-black.png";
-import ibcTransferImageWhite from "./assets/ibc-transfer-white.png";
-
-type TransferTransactionFeeProps = {
-  transactionFee: TransactionFee;
-  isIbcTransfer?: boolean;
-  textColor?: "white" | "black";
-};
-
-export const TransferTransactionFee = ({
-  isIbcTransfer,
-  transactionFee,
-  textColor = "white",
-}: TransferTransactionFeeProps): JSX.Element => {
-  return (
-    <footer
-      className={twMerge(
-        clsx("flex justify-between items-center mt-12 text-sm", {
-          "text-white": textColor === "white",
-          "text-black": textColor === "black",
-        })
-      )}
-    >
-      <span className="underline">Transaction Fee</span>
-      {isIbcTransfer && (
-        <span className="w-20">
-          {textColor === "white" && <img src={ibcTransferImageWhite} />}
-          {textColor === "black" && <img src={ibcTransferImageBlack} />}
-        </span>
-      )}
-      <TokenCurrency
-        amount={(transactionFee.asset, transactionFee.amount)}
-        symbol={transactionFee.asset.symbol}
-      />
-    </footer>
-  );
-};
diff --git a/apps/namadillo/src/App/Transfer/__tests__/TransferDestination.test.tsx b/apps/namadillo/src/App/Transfer/__tests__/TransferDestination.test.tsx
index 903b08ccdc..fefdd01c29 100644
--- a/apps/namadillo/src/App/Transfer/__tests__/TransferDestination.test.tsx
+++ b/apps/namadillo/src/App/Transfer/__tests__/TransferDestination.test.tsx
@@ -1,5 +1,5 @@
 jest.mock("../assets/ibc-transfer-white.png", () => "ibc-transfer-white.png");
-jest.mock("../assets/ibc-transfer-black.png", () => "ibc-transfer-black.png");
+jest.mock("../../Common/GasFeeModal", () => null);
 
 import { Chain } from "@chain-registry/types";
 import { fireEvent, render, screen } from "@testing-library/react";
@@ -9,7 +9,6 @@ import {
 } from "App/Transfer/__mocks__/chains";
 import { TransferDestination } from "App/Transfer/TransferDestination";
 import BigNumber from "bignumber.js";
-import { namadaAsset } from "utils";
 import { walletMock } from "../__mocks__/providers";
 import { parseChainInfo } from "../common";
 
@@ -97,18 +96,17 @@ describe("Component: TransferDestination", () => {
   });
 
   it("should display the transaction fee if provided", () => {
-    const fee = BigNumber(0.000001);
     render(
       <TransferDestination
-        transactionFee={{
-          amount: fee,
-          asset: namadaAsset(),
-          originalAddress: namadaAsset().address,
+        gasConfig={{
+          gasPrice: BigNumber(0.000001),
+          gasLimit: BigNumber(2),
+          gasToken: "tnam1",
         }}
       />
     );
-    const transactionFee = screen.getByText("Transaction Fee");
+    const transactionFee = screen.getByText("Transaction fee:");
     expect(transactionFee).toBeInTheDocument();
-    expect(transactionFee.parentNode?.textContent).toContain("0.000001");
+    expect(transactionFee.parentNode?.textContent).toContain("0.000002");
   });
 });
diff --git a/apps/namadillo/src/App/WorkerTest.tsx b/apps/namadillo/src/App/WorkerTest.tsx
index 146d1e9fee..c26450b607 100644
--- a/apps/namadillo/src/App/WorkerTest.tsx
+++ b/apps/namadillo/src/App/WorkerTest.tsx
@@ -93,6 +93,7 @@ export function WorkerTest(): JSX.Element {
         gasConfig: {
           gasLimit: BigNumber(50000),
           gasPrice: BigNumber(0),
+          gasToken: "tnam1",
         },
         shieldingProps: [shieldingMsgValue],
         indexerUrl,
@@ -158,6 +159,7 @@ export function WorkerTest(): JSX.Element {
         gasConfig: {
           gasLimit: BigNumber(100000),
           gasPrice: BigNumber(0),
+          gasToken: "tnam1",
         },
         unshieldingProps: [shieldingMsgValue],
         chain: chain!,
@@ -223,6 +225,7 @@ export function WorkerTest(): JSX.Element {
         gasConfig: {
           gasLimit: BigNumber(50000),
           gasPrice: BigNumber(0),
+          gasToken: "tnam1",
         },
         shieldingProps: [shieldingMsgValue],
         chain: chain!,
diff --git a/apps/namadillo/src/atoms/balance/atoms.ts b/apps/namadillo/src/atoms/balance/atoms.ts
index 678e5807af..8e2f05f68e 100644
--- a/apps/namadillo/src/atoms/balance/atoms.ts
+++ b/apps/namadillo/src/atoms/balance/atoms.ts
@@ -7,23 +7,21 @@ import {
 } from "atoms/accounts/atoms";
 import {
   chainParametersAtom,
+  chainTokensAtom,
   nativeTokenAddressAtom,
-  tokenAddressesAtom,
 } from "atoms/chain";
 import { shouldUpdateBalanceAtom } from "atoms/etc";
+import { tokenPricesFamily } from "atoms/prices/atoms";
 import { maspIndexerUrlAtom, rpcUrlAtom } from "atoms/settings";
 import { queryDependentFn } from "atoms/utils";
 import BigNumber from "bignumber.js";
-import * as osmosis from "chain-registry/mainnet/osmosis";
 import { atomWithQuery } from "jotai-tanstack-query";
 import { AddressWithAsset } from "types";
 import {
-  findAssetByToken,
   mapNamadaAddressesToAssets,
   mapNamadaAssetsToTokenBalances,
 } from "./functions";
 import {
-  fetchCoinPrices,
   fetchShieldedBalance,
   shieldedSync,
   ShieldedSyncEmitter,
@@ -94,7 +92,7 @@ export const shieldedBalanceAtom = atomWithQuery<
 >((get) => {
   const enablePolling = get(shouldUpdateBalanceAtom);
   const viewingKeysQuery = get(viewingKeysAtom);
-  const tokenAddressesQuery = get(tokenAddressesAtom);
+  const chainTokensQuery = get(chainTokensAtom);
   const namTokenAddressQuery = get(nativeTokenAddressAtom);
   const rpcUrl = get(rpcUrlAtom);
   const maspIndexerUrl = get(maspIndexerUrlAtom);
@@ -105,7 +103,7 @@ export const shieldedBalanceAtom = atomWithQuery<
     queryKey: [
       "shielded-balance",
       viewingKeysQuery.data,
-      tokenAddressesQuery.data,
+      chainTokensQuery.data,
       namTokenAddressQuery.data,
       shieldedSync.data,
       rpcUrl,
@@ -113,9 +111,9 @@ export const shieldedBalanceAtom = atomWithQuery<
     ],
     ...queryDependentFn(async () => {
       const viewingKeys = viewingKeysQuery.data;
-      const tokenAddresses = tokenAddressesQuery.data;
+      const chainTokens = chainTokensQuery.data;
       const syncEmitter = shieldedSync.data;
-      if (!viewingKeys || !tokenAddresses || !syncEmitter) {
+      if (!viewingKeys || !chainTokens || !syncEmitter) {
         return [];
       }
       const [viewingKey] = viewingKeys;
@@ -126,119 +124,72 @@ export const shieldedBalanceAtom = atomWithQuery<
 
       const response = await fetchShieldedBalance(
         viewingKey,
-        tokenAddresses.map((t) => t.address)
+        chainTokens.map((t) => t.address)
       );
       const shieldedBalance = response.map(([address, amount]) => ({
         address,
         minDenomAmount: BigNumber(amount),
       }));
       return shieldedBalance;
-    }, [viewingKeysQuery, tokenAddressesQuery, namTokenAddressQuery]),
-  };
-});
-
-export const tokenPricesAtom = atomWithQuery((get) => {
-  const shieldedBalanceQuery = get(shieldedBalanceAtom);
-  const transparentBalanceQuery = get(transparentBalanceAtom);
-  const namTokenAddressQuery = get(nativeTokenAddressAtom);
-  const tokenAddressesQuery = get(tokenAddressesAtom);
-
-  // Get the list of addresses that exists on balances
-  const obj: Record<string, true> = {};
-  shieldedBalanceQuery.data?.forEach(({ address }) => {
-    obj[address] = true;
-  });
-  transparentBalanceQuery.data?.forEach(({ address }) => {
-    obj[address] = true;
-  });
-  const addresses = Object.keys(obj);
-  const namAddress = namTokenAddressQuery.data;
-  const tokens = tokenAddressesQuery.data;
-
-  return {
-    queryKey: ["token-prices", addresses, tokens, namAddress],
-    queryFn: async () => {
-      const baseMap: Record<string, string> = {};
-      addresses.forEach((address) => {
-        const token = tokens?.find((t) => t.address === address);
-        if (token) {
-          const asset = findAssetByToken(token, osmosis.assets);
-          if (asset) {
-            baseMap[asset.base] = address;
-          }
-        }
-      });
-      const baseList = Object.keys(baseMap);
-      const apiResponse = await fetchCoinPrices(baseList);
-
-      const tokenPrices: Record<string, BigNumber> = {};
-      Object.entries(apiResponse).forEach(([base, value]) => {
-        const address = baseMap[base];
-        const dollar = Object.values(value)[0];
-        if (dollar) {
-          tokenPrices[address] = new BigNumber(dollar);
-        }
-      });
-      // TODO mock NAM price while it's not available on api
-      if (namAddress && !tokenPrices[namAddress]) {
-        tokenPrices[namAddress] = new BigNumber(0);
-      }
-      return tokenPrices;
-    },
+    }, [viewingKeysQuery, chainTokensQuery, namTokenAddressQuery]),
   };
 });
 
 export const namadaShieldedAssetsAtom = atomWithQuery((get) => {
   const shieldedBalances = get(shieldedBalanceAtom);
-  const tokenAddresses = get(tokenAddressesAtom);
+  const chainTokensQuery = get(chainTokensAtom);
   const chainParameters = get(chainParametersAtom);
 
   return {
     queryKey: [
       "namada-shielded-assets",
       shieldedBalances.data,
-      tokenAddresses.data,
+      chainTokensQuery.data,
       chainParameters.data!.chainId,
     ],
     ...queryDependentFn(
       async () =>
         await mapNamadaAddressesToAssets(
           shieldedBalances.data!,
-          tokenAddresses.data!,
+          chainTokensQuery.data!,
           chainParameters.data!.chainId
         ),
-      [shieldedBalances, tokenAddresses, chainParameters]
+      [shieldedBalances, chainTokensQuery, chainParameters]
     ),
   };
 });
 
 export const namadaTransparentAssetsAtom = atomWithQuery((get) => {
   const transparentBalances = get(transparentBalanceAtom);
-  const tokenAddresses = get(tokenAddressesAtom);
+  const chainTokensQuery = get(chainTokensAtom);
   const chainParameters = get(chainParametersAtom);
 
   return {
     queryKey: [
       "namada-transparent-assets",
       transparentBalances.data,
-      tokenAddresses.data,
+      chainTokensQuery.data,
       chainParameters.data!.chainId,
     ],
     ...queryDependentFn(
       async () =>
         await mapNamadaAddressesToAssets(
           transparentBalances.data!,
-          tokenAddresses.data!,
+          chainTokensQuery.data!,
           chainParameters.data!.chainId
         ),
-      [transparentBalances, tokenAddresses, chainParameters]
+      [transparentBalances, chainTokensQuery, chainParameters]
     ),
   };
 });
 
 export const shieldedTokensAtom = atomWithQuery<TokenBalance[]>((get) => {
   const shieldedAssets = get(namadaShieldedAssetsAtom);
-  const tokenPrices = get(tokenPricesAtom);
+  const tokenPrices = get(
+    tokenPricesFamily(
+      Object.values(shieldedAssets.data ?? {}).map((i) => i.originalAddress)
+    )
+  );
 
   return {
     queryKey: ["shielded-tokens", shieldedAssets.data, tokenPrices.data],
@@ -246,8 +197,8 @@ export const shieldedTokensAtom = atomWithQuery<TokenBalance[]>((get) => {
       () =>
         Promise.resolve(
           mapNamadaAssetsToTokenBalances(
-            shieldedAssets.data!,
-            tokenPrices.data!
+            shieldedAssets.data ?? {},
+            tokenPrices.data ?? {}
           )
         ),
       [shieldedAssets, tokenPrices]
@@ -257,7 +208,11 @@ export const shieldedTokensAtom = atomWithQuery<TokenBalance[]>((get) => {
 
 export const transparentTokensAtom = atomWithQuery<TokenBalance[]>((get) => {
   const transparentAssets = get(namadaTransparentAssetsAtom);
-  const tokenPrices = get(tokenPricesAtom);
+  const tokenPrices = get(
+    tokenPricesFamily(
+      Object.values(transparentAssets.data ?? {}).map((i) => i.originalAddress)
+    )
+  );
 
   return {
     queryKey: ["transparent-tokens", transparentAssets.data, tokenPrices.data],
@@ -265,8 +220,8 @@ export const transparentTokensAtom = atomWithQuery<TokenBalance[]>((get) => {
       () =>
         Promise.resolve(
           mapNamadaAssetsToTokenBalances(
-            transparentAssets.data!,
-            tokenPrices.data!
+            transparentAssets.data ?? {},
+            tokenPrices.data ?? {}
           )
         ),
       [transparentAssets, tokenPrices]
diff --git a/apps/namadillo/src/atoms/balance/functions.ts b/apps/namadillo/src/atoms/balance/functions.ts
index e93b7c8144..84fbdf430b 100644
--- a/apps/namadillo/src/atoms/balance/functions.ts
+++ b/apps/namadillo/src/atoms/balance/functions.ts
@@ -1,4 +1,3 @@
-import { Asset, AssetList } from "@chain-registry/types";
 import { IbcToken, NativeToken } from "@namada/indexer-client";
 import { mapCoinsToAssets } from "atoms/integrations";
 import BigNumber from "bignumber.js";
@@ -7,31 +6,6 @@ import { AddressWithAssetAndAmountMap } from "types";
 import { isNamadaAsset } from "utils";
 import { TokenBalance } from "./atoms";
 
-// TODO upgrade this function to be as smart as possible
-// please refer to `tryCoinToIbcAsset` and how we could combine both
-export const findAssetByToken = (
-  token: NativeToken | IbcToken,
-  assetList: AssetList
-): Asset | undefined => {
-  if ("trace" in token) {
-    const traceDenom = token.trace.split("/").at(-1);
-    if (traceDenom) {
-      for (let i = 0; i < assetList.assets.length; i++) {
-        const asset = assetList.assets[i];
-        if (
-          asset.base === traceDenom ||
-          asset.denom_units.find(
-            (u) => u.denom === traceDenom || u.aliases?.includes(traceDenom)
-          )
-        ) {
-          return asset;
-        }
-      }
-    }
-  }
-  return undefined;
-};
-
 /**
  * Sum the dollar amount of a list of tokens
  * @param tokens
@@ -57,9 +31,9 @@ export const getTotalNam = (list?: TokenBalance[]): BigNumber =>
 
 const tnamAddressToDenomTrace = (
   address: string,
-  tokenAddresses: (NativeToken | IbcToken)[]
+  chainTokens: (NativeToken | IbcToken)[]
 ): DenomTrace | undefined => {
-  const token = tokenAddresses.find((entry) => entry.address === address);
+  const token = chainTokens.find((entry) => entry.address === address);
   const trace = token && "trace" in token ? token.trace : undefined;
 
   // If no trace, the token is NAM, but return undefined because we only care
@@ -82,7 +56,7 @@ const tnamAddressToDenomTrace = (
 
 export const mapNamadaAddressesToAssets = async (
   balances: { address: string; minDenomAmount: BigNumber }[],
-  tokenAddresses: (NativeToken | IbcToken)[],
+  chainTokens: (NativeToken | IbcToken)[],
   chainId: string
 ): Promise<AddressWithAssetAndAmountMap> => {
   const coins = balances.map(({ address, minDenomAmount }) => ({
@@ -91,7 +65,7 @@ export const mapNamadaAddressesToAssets = async (
   }));
 
   return await mapCoinsToAssets(coins, chainId, (tnamAddress) =>
-    Promise.resolve(tnamAddressToDenomTrace(tnamAddress, tokenAddresses))
+    Promise.resolve(tnamAddressToDenomTrace(tnamAddress, chainTokens))
   );
 };
 
diff --git a/apps/namadillo/src/atoms/balance/services.ts b/apps/namadillo/src/atoms/balance/services.ts
index 4f9f3289dc..ac8e239d16 100644
--- a/apps/namadillo/src/atoms/balance/services.ts
+++ b/apps/namadillo/src/atoms/balance/services.ts
@@ -12,18 +12,6 @@ import {
 } from "workers/ShieldedSyncWorker";
 import ShieldedSyncWorker from "workers/ShieldedSyncWorker?worker";
 
-const sqsOsmosisApi = "https://sqs.osmosis.zone";
-
-// ref: https://sqs.osmosis.zone/swagger/index.html#/default/get_tokens_prices
-export const fetchCoinPrices = async (
-  assetBaseList: string[]
-): Promise<Record<string, { [usdcAddress: string]: string }>> =>
-  assetBaseList.length ?
-    fetch(
-      `${sqsOsmosisApi}/tokens/prices?base=${assetBaseList.sort((a, b) => a.localeCompare(b)).join(",")}`
-    ).then((res) => res.json())
-  : [];
-
 export type ShieldedSyncEventMap = {
   [SdkEvents.ProgressBarStarted]: ProgressBarStarted[];
   [SdkEvents.ProgressBarIncremented]: ProgressBarIncremented[];
@@ -100,5 +88,6 @@ const mockShieldedBalance = async (viewingKey: string): Promise<Balance> => {
   return [
     ["tnam1qy440ynh9fwrx8aewjvvmu38zxqgukgc259fzp6h", "37"], // nam
     ["tnam1p5nnjnasjtfwen2kzg78fumwfs0eycqpecuc2jwz", "1"], // uatom
+    ["tnam1p4rm6gy30xzeehj29qr8v0t33xmwdlsn5ye0ezf0", "2"], // uosmo
   ];
 };
diff --git a/apps/namadillo/src/atoms/chain/atoms.ts b/apps/namadillo/src/atoms/chain/atoms.ts
index 229df0fc00..6324358dff 100644
--- a/apps/namadillo/src/atoms/chain/atoms.ts
+++ b/apps/namadillo/src/atoms/chain/atoms.ts
@@ -1,4 +1,6 @@
+import { Asset } from "@chain-registry/types";
 import namada from "@namada/chains/chains/namada";
+import { IbcToken, NativeToken } from "@namada/indexer-client";
 import { indexerApiAtom } from "atoms/api";
 import {
   defaultServerConfigAtom,
@@ -7,9 +9,12 @@ import {
 } from "atoms/settings";
 import { queryDependentFn } from "atoms/utils";
 import BigNumber from "bignumber.js";
+import * as osmosis from "chain-registry/mainnet/osmosis";
 import { atom } from "jotai";
 import { atomWithQuery } from "jotai-tanstack-query";
-import { ChainParameters, ChainSettings, ChainStatus } from "types";
+import namadaAssets from "namada-chain-registry/namada/assetlist.json";
+import { Address, ChainParameters, ChainSettings, ChainStatus } from "types";
+import { findAssetByToken } from "utils/assets";
 import { calculateUnbondingPeriod } from "./functions";
 import {
   fetchChainParameters,
@@ -56,15 +61,39 @@ export const nativeTokenAddressAtom = atomWithQuery<string>((get) => {
   };
 });
 
-export const tokenAddressesAtom = atomWithQuery((get) => {
-  const indexerUrl = get(indexerUrlAtom);
-  const api = get(indexerApiAtom);
-  return {
-    queryKey: ["chain-tokens", indexerUrl],
-    staleTime: Infinity,
-    enabled: !!indexerUrl,
-    queryFn: () => fetchChainTokens(api),
-  };
+export const chainTokensAtom = atomWithQuery<(NativeToken | IbcToken)[]>(
+  (get) => {
+    const indexerUrl = get(indexerUrlAtom);
+    const api = get(indexerApiAtom);
+    return {
+      queryKey: ["chain-tokens", indexerUrl],
+      staleTime: Infinity,
+      enabled: !!indexerUrl,
+      queryFn: () => fetchChainTokens(api),
+    };
+  }
+);
+
+export const chainAssetsMapAtom = atom<Record<Address, Asset>>((get) => {
+  const nativeTokenAddress = get(nativeTokenAddressAtom);
+  const chainTokensQuery = get(chainTokensAtom);
+
+  const chainAssetsMap: Record<Address, Asset> = {};
+  if (nativeTokenAddress.data) {
+    // the first asset is the native token asset
+    chainAssetsMap[nativeTokenAddress.data] = namadaAssets.assets[0];
+  }
+  // TODO
+  // while we don't have all assets listed on namada-chain-registry,
+  // merge the osmosis assets to guarantee the most common ones to be available
+  const assetList: Asset[] = [...namadaAssets.assets, ...osmosis.assets.assets];
+  chainTokensQuery.data?.forEach((token) => {
+    const asset = findAssetByToken(token, assetList);
+    if (asset) {
+      chainAssetsMap[token.address] = asset;
+    }
+  });
+  return chainAssetsMap;
 });
 
 // Prefer calling settings@rpcUrlAtom instead, because default rpc url might be
diff --git a/apps/namadillo/src/atoms/fees/atoms.ts b/apps/namadillo/src/atoms/fees/atoms.ts
index 514ab894e0..574c358a06 100644
--- a/apps/namadillo/src/atoms/fees/atoms.ts
+++ b/apps/namadillo/src/atoms/fees/atoms.ts
@@ -1,17 +1,32 @@
+import { GasPriceTableInner } from "@namada/indexer-client";
 import { defaultAccountAtom } from "atoms/accounts";
 import { indexerApiAtom } from "atoms/api";
-import { nativeTokenAddressAtom } from "atoms/chain";
+import { chainAssetsMapAtom, nativeTokenAddressAtom } from "atoms/chain";
 import { queryDependentFn } from "atoms/utils";
 import BigNumber from "bignumber.js";
-import { atom } from "jotai";
+import invariant from "invariant";
+import { atom, getDefaultStore } from "jotai";
 import { atomWithQuery } from "jotai-tanstack-query";
-import { atomFamily } from "jotai/utils";
+import { atomFamily, atomWithStorage, RESET } from "jotai/utils";
 import { isPublicKeyRevealed } from "lib/query";
-import { GasConfig, GasTable } from "types";
+import { Address, GasConfig, GasTable } from "types";
 import { TxKind } from "types/txKind";
-import { fetchGasLimit, fetchMinimumGasPrice } from "./services";
+import {
+  fetchGasLimit,
+  fetchGasPriceForAllTokens,
+  fetchMinimumGasPrice,
+} from "./services";
 
-export const gasCostTxKindAtom = atom<TxKind | undefined>(undefined);
+export const storageGasTokenAtom = atomWithStorage<string | undefined>(
+  "namadillo:gasToken",
+  undefined
+);
+
+export const gasTokenAtom = atom<Address | undefined>((get) => {
+  const storageGasToken = get(storageGasTokenAtom);
+  const nativeTokenQuery = get(nativeTokenAddressAtom);
+  return storageGasToken ?? nativeTokenQuery.data;
+});
 
 export const gasLimitsAtom = atomWithQuery<GasTable>((get) => {
   const api = get(indexerApiAtom);
@@ -21,15 +36,37 @@ export const gasLimitsAtom = atomWithQuery<GasTable>((get) => {
   };
 });
 
+export const gasPriceForAllTokensAtom = atomWithQuery<GasPriceTableInner[]>(
+  (get) => {
+    const api = get(indexerApiAtom);
+    return {
+      queryKey: ["gas-price-for-all-tokens"],
+      queryFn: () => fetchGasPriceForAllTokens(api),
+    };
+  }
+);
+
 export const minimumGasPriceAtom = atomWithQuery<BigNumber>((get) => {
   const api = get(indexerApiAtom);
-  const nativeTokenQuery = get(nativeTokenAddressAtom);
+  const gasToken = get(gasTokenAtom);
+  const namTokenAddressQuery = get(nativeTokenAddressAtom);
+
   return {
-    queryKey: ["minimum-gas-price", nativeTokenQuery.data],
-    ...queryDependentFn(
-      async () => fetchMinimumGasPrice(api, nativeTokenQuery.data!),
-      [nativeTokenQuery]
-    ),
+    queryKey: ["minimum-gas-price", gasToken, namTokenAddressQuery.data],
+    queryFn: async () => {
+      try {
+        invariant(gasToken, "Cannot query minimum gas for undefined token");
+        const tokenCost = (await fetchMinimumGasPrice(api, gasToken))[0];
+        invariant(tokenCost, "Error querying minimum gas price");
+        return BigNumber(tokenCost.minDenomAmount);
+      } catch (e) {
+        // if something goes wrong when querying the gas price,
+        // reset the storage so we can use the default token as fallback
+        const { set } = getDefaultStore();
+        set(storageGasTokenAtom, RESET);
+        throw e;
+      }
+    },
   };
 });
 
@@ -39,6 +76,8 @@ export const defaultGasConfigFamily = atomFamily(
       const defaultAccount = get(defaultAccountAtom);
       const minimumGasPrice = get(minimumGasPriceAtom);
       const gasLimitsTable = get(gasLimitsAtom);
+      const gasToken = get(gasTokenAtom);
+      const chainAssetsMap = get(chainAssetsMapAtom);
 
       return {
         queryKey: [
@@ -46,23 +85,39 @@ export const defaultGasConfigFamily = atomFamily(
           defaultAccount.data?.address,
           minimumGasPrice.data,
           gasLimitsTable.data,
+          gasToken,
         ],
         ...queryDependentFn(async () => {
-          const publicKeyRevealed = await isPublicKeyRevealed(
-            defaultAccount.data!.address
+          invariant(
+            gasLimitsTable.data,
+            "Cannot create a gas config without a gas limit"
+          );
+          invariant(
+            minimumGasPrice.data,
+            "Cannot create a gas config without a gas price"
           );
+          invariant(gasToken, "Cannot create a gas config without a token");
+
+          const publicKeyRevealed =
+            defaultAccount.data?.address ?
+              await isPublicKeyRevealed(defaultAccount.data.address)
+            : false;
 
           const txKindsWithRevealPk =
             publicKeyRevealed ? txKinds : ["RevealPk" as const, ...txKinds];
 
           const gasLimit = txKindsWithRevealPk.reduce(
-            (total, kind) => total.plus(gasLimitsTable.data![kind].native),
+            (total, kind) => total.plus(gasLimitsTable.data[kind].native),
             BigNumber(0)
           );
 
+          invariant(gasToken, "Cannot create a gas config without a token");
+
           return {
             gasLimit,
-            gasPrice: minimumGasPrice.data!,
+            gasPrice: minimumGasPrice.data,
+            gasToken,
+            asset: chainAssetsMap[gasToken],
           };
         }, [defaultAccount, minimumGasPrice, gasLimitsTable]),
       };
diff --git a/apps/namadillo/src/atoms/fees/services.ts b/apps/namadillo/src/atoms/fees/services.ts
index c532cfd811..8621b1978f 100644
--- a/apps/namadillo/src/atoms/fees/services.ts
+++ b/apps/namadillo/src/atoms/fees/services.ts
@@ -1,10 +1,8 @@
-import { DefaultApi } from "@namada/indexer-client";
+import { DefaultApi, GasPriceTableInner } from "@namada/indexer-client";
 import { mapUndefined } from "@namada/utils";
 import BigNumber from "bignumber.js";
-import invariant from "invariant";
-import { GasTable } from "types";
+import { Address, GasTable } from "types";
 import { txKinds } from "types/txKind";
-import { namadaAsset, toDisplayAmount } from "utils";
 import { txKindToIndexer } from "./functions";
 
 export const fetchGasLimit = async (api: DefaultApi): Promise<GasTable> => {
@@ -27,20 +25,13 @@ export const fetchGasLimit = async (api: DefaultApi): Promise<GasTable> => {
 
 export const fetchMinimumGasPrice = async (
   api: DefaultApi,
-  nativeToken: string
-): Promise<BigNumber> => {
-  const gasTableResponse = await api.apiV1GasPriceTokenGet(nativeToken);
-  const nativeTokenCost = gasTableResponse.data.find(
-    ({ token }) => token === nativeToken
-  );
-  invariant(!!nativeTokenCost, "Error querying minimum gas price");
-  const asBigNumber = toDisplayAmount(
-    namadaAsset(),
-    BigNumber(nativeTokenCost.minDenomAmount)
-  );
-  invariant(
-    !asBigNumber.isNaN(),
-    "Error converting minimum gas price to BigNumber"
-  );
-  return asBigNumber;
+  tokenAddress: Address
+): Promise<GasPriceTableInner[]> => {
+  return (await api.apiV1GasPriceTokenGet(tokenAddress)).data;
+};
+
+export const fetchGasPriceForAllTokens = async (
+  api: DefaultApi
+): Promise<GasPriceTableInner[]> => {
+  return (await api.apiV1GasPriceGet()).data;
 };
diff --git a/apps/namadillo/src/atoms/integrations/functions.ts b/apps/namadillo/src/atoms/integrations/functions.ts
index 9fb7c15257..3681a2767a 100644
--- a/apps/namadillo/src/atoms/integrations/functions.ts
+++ b/apps/namadillo/src/atoms/integrations/functions.ts
@@ -2,7 +2,7 @@ import { Asset, AssetList, Chain, IBCInfo } from "@chain-registry/types";
 import { QueryClient, setupIbcExtension } from "@cosmjs/stargate";
 import { Tendermint34Client } from "@cosmjs/tendermint-rpc";
 import { Account, IbcTransferProps } from "@namada/types";
-import { mapUndefined, shortenAddress } from "@namada/utils";
+import { mapUndefined } from "@namada/utils";
 import BigNumber from "bignumber.js";
 import * as celestia from "chain-registry/mainnet/celestia";
 import * as cosmos from "chain-registry/mainnet/cosmoshub";
@@ -28,6 +28,7 @@ import {
   LocalnetToml,
 } from "types";
 import { toBaseAmount, toDisplayAmount } from "utils";
+import { unknownAsset } from "utils/assets";
 import { getSdkInstance } from "utils/sdk";
 
 import housefireAssets from "namada-chain-registry/_testnets/namadahousefire/assetlist.json";
@@ -213,19 +214,6 @@ const tryDenomToIbcAsset = async (
   return originalChainRegistryAsset || unknownAsset(path + "/" + baseDenom);
 };
 
-const unknownAsset = (denom: string): Asset => ({
-  denom_units: [
-    {
-      denom,
-      exponent: 0,
-    },
-  ],
-  base: denom,
-  name: denom,
-  display: denom,
-  symbol: shortenAddress(denom, 4, 4),
-});
-
 const findOriginalAsset = async (
   coin: Coin,
   assets: Asset[],
diff --git a/apps/namadillo/src/atoms/integrations/services.ts b/apps/namadillo/src/atoms/integrations/services.ts
index 349fb13273..7bab7d0faa 100644
--- a/apps/namadillo/src/atoms/integrations/services.ts
+++ b/apps/namadillo/src/atoms/integrations/services.ts
@@ -1,13 +1,13 @@
 import { Chain } from "@chain-registry/types";
 import { OfflineSigner } from "@cosmjs/launchpad";
-import { coins } from "@cosmjs/proto-signing";
 import {
   DeliverTxResponse,
   SigningStargateClient,
   StargateClient,
+  StdFee,
   assertIsDeliverTxSuccess,
+  calculateFee,
 } from "@cosmjs/stargate";
-import { TransactionFee } from "App/Transfer/TransferModule";
 import { queryForAck, queryForIbcTimeout } from "atoms/transactions";
 import BigNumber from "bignumber.js";
 import { getDefaultStore } from "jotai";
@@ -16,6 +16,7 @@ import toml from "toml";
 import {
   AddressWithAsset,
   Coin,
+  GasConfig,
   IbcTransferTransactionData,
   LocalnetToml,
   TransferStep,
@@ -33,7 +34,7 @@ type CommonParams = {
   amount: BigNumber;
   asset: AddressWithAsset;
   sourceChannelId: string;
-  transactionFee: TransactionFee;
+  gasConfig: GasConfig;
 };
 
 type TransparentParams = CommonParams & { isShielded: false };
@@ -92,7 +93,7 @@ export const submitIbcTransfer = async (
     asset,
     sourceChannelId,
     isShielded,
-    transactionFee,
+    gasConfig,
   } = transferParams;
 
   const client = await SigningStargateClient.connectWithSigner(rpc, signer, {
@@ -102,12 +103,11 @@ export const submitIbcTransfer = async (
 
   // cosmjs expects amounts to be represented in the base denom, so convert
   const baseAmount = toBaseAmount(asset.asset, displayAmount);
-  const baseFee = toBaseAmount(transactionFee.asset, transactionFee.amount);
 
-  const fee = {
-    amount: coins(baseFee.toString(), transactionFee.originalAddress),
-    gas: "222000", // TODO: what should this be?
-  };
+  const fee: StdFee = calculateFee(
+    gasConfig.gasLimit.toNumber(),
+    `${gasConfig.gasPrice.toString()}${gasConfig.gasToken}`
+  );
 
   const token = asset.originalAddress;
   const { receiver, memo }: { receiver: string; memo?: string } =
diff --git a/apps/namadillo/src/atoms/prices/atoms.ts b/apps/namadillo/src/atoms/prices/atoms.ts
new file mode 100644
index 0000000000..5507a1f37b
--- /dev/null
+++ b/apps/namadillo/src/atoms/prices/atoms.ts
@@ -0,0 +1,18 @@
+import { chainTokensAtom } from "atoms/chain/atoms";
+import { atomWithQuery } from "jotai-tanstack-query";
+import { atomFamily } from "jotai/utils";
+import { Address } from "types";
+import { fetchTokenPrices } from "./functions";
+
+export const tokenPricesFamily = atomFamily(
+  (addresses: Address[]) =>
+    atomWithQuery((get) => {
+      const chainTokens = get(chainTokensAtom).data;
+      return {
+        queryKey: ["token-prices", addresses, chainTokens],
+        queryFn: () => fetchTokenPrices(addresses, chainTokens ?? []),
+      };
+    }),
+  // Hacky way to compare two objects
+  (a, b) => JSON.stringify(a) === JSON.stringify(b)
+);
diff --git a/apps/namadillo/src/atoms/prices/functions.ts b/apps/namadillo/src/atoms/prices/functions.ts
new file mode 100644
index 0000000000..7da7f8ef6e
--- /dev/null
+++ b/apps/namadillo/src/atoms/prices/functions.ts
@@ -0,0 +1,35 @@
+import { IbcToken, NativeToken } from "@namada/indexer-client";
+import BigNumber from "bignumber.js";
+import * as osmosis from "chain-registry/mainnet/osmosis";
+import { Address } from "types";
+import { findAssetByToken } from "utils/assets";
+import { fetchCoinPrices } from "./services";
+
+export const fetchTokenPrices = async (
+  tokenAddressToFetch: Address[],
+  apiTokens: (NativeToken | IbcToken)[]
+): Promise<Record<Address, BigNumber>> => {
+  const baseMap: Record<string, string> = {};
+  tokenAddressToFetch.forEach((address) => {
+    const token = apiTokens?.find((t) => t.address === address);
+    if (token) {
+      // searching only on osmosis because these are the assets supported by fetchCoinPrices
+      const asset = findAssetByToken(token, osmosis.assets.assets);
+      if (asset) {
+        baseMap[asset.base] = address;
+      }
+    }
+  });
+  const baseList = Object.keys(baseMap);
+  const apiResponse = await fetchCoinPrices(baseList);
+
+  const tokenPrices: Record<string, BigNumber> = {};
+  Object.entries(apiResponse).forEach(([base, value]) => {
+    const address = baseMap[base];
+    const dollar = Object.values(value)[0];
+    if (dollar) {
+      tokenPrices[address] = new BigNumber(dollar);
+    }
+  });
+  return tokenPrices;
+};
diff --git a/apps/namadillo/src/atoms/prices/services.ts b/apps/namadillo/src/atoms/prices/services.ts
new file mode 100644
index 0000000000..4d594647cb
--- /dev/null
+++ b/apps/namadillo/src/atoms/prices/services.ts
@@ -0,0 +1,11 @@
+const sqsOsmosisApi = "https://sqs.osmosis.zone";
+
+// ref: https://sqs.osmosis.zone/swagger/index.html#/default/get_tokens_prices
+export const fetchCoinPrices = async (
+  assetBaseList: string[]
+): Promise<Record<string, { [usdcAddress: string]: string }>> =>
+  assetBaseList.length ?
+    fetch(
+      `${sqsOsmosisApi}/tokens/prices?base=${assetBaseList.sort((a, b) => a.localeCompare(b)).join(",")}`
+    ).then((res) => res.json())
+  : [];
diff --git a/apps/namadillo/src/atoms/settings/atoms.ts b/apps/namadillo/src/atoms/settings/atoms.ts
index 39aa9ecefd..a93d165a85 100644
--- a/apps/namadillo/src/atoms/settings/atoms.ts
+++ b/apps/namadillo/src/atoms/settings/atoms.ts
@@ -49,11 +49,9 @@ export const defaultServerConfigAtom = atomWithQuery((_get) => {
 
 export const defaultLocalStorageProps = {
   version: "0.1",
-  fiat: "usd",
   indexerUrl: "",
   signArbitraryEnabled: false,
-  testnetsEnabled: false,
-};
+} satisfies SettingsStorage;
 
 export const settingsAtom = atomWithStorage<SettingsStorage>(
   "namadillo:settings",
diff --git a/apps/namadillo/src/hooks/useGasEstimate.ts b/apps/namadillo/src/hooks/useGasEstimate.ts
deleted file mode 100644
index a8f7d7af60..0000000000
--- a/apps/namadillo/src/hooks/useGasEstimate.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { minimumGasPriceAtom } from "atoms/fees";
-import BigNumber from "bignumber.js";
-import { useAtomValue } from "jotai";
-
-type useGasEstimateReturn = {
-  gasPrice: BigNumber | undefined;
-  calculateMinGasRequired: (
-    numberOfTransactions?: number,
-    pkRevealNeeded?: number
-  ) => BigNumber | undefined;
-};
-
-export const useGasEstimate = (): useGasEstimateReturn => {
-  const gas = useAtomValue(minimumGasPriceAtom);
-  return {
-    gasPrice: gas.data,
-    calculateMinGasRequired: (
-      numberOfTransactions: number = 1,
-      pkRevealNeeded: number = numberOfTransactions
-    ): BigNumber | undefined => {
-      if (!gas.isSuccess) return undefined;
-      return gas.data.multipliedBy(numberOfTransactions + pkRevealNeeded);
-    },
-  };
-};
diff --git a/apps/namadillo/src/integrations/utils.ts b/apps/namadillo/src/integrations/utils.ts
index e3709411a2..b616f858d7 100644
--- a/apps/namadillo/src/integrations/utils.ts
+++ b/apps/namadillo/src/integrations/utils.ts
@@ -1,10 +1,9 @@
 import { Asset, Chain } from "@chain-registry/types";
 import { Bech32Config, ChainInfo, Currency } from "@keplr-wallet/types";
 import tokenImage from "App/Common/assets/token.svg";
-import { TransactionFee } from "App/Transfer/TransferModule";
 import { getRestApiAddressByIndex, getRpcByIndex } from "atoms/integrations";
 import BigNumber from "bignumber.js";
-import { ChainId, ChainRegistryEntry } from "types";
+import { ChainId, ChainRegistryEntry, GasConfig } from "types";
 
 type GasPriceStep = {
   low: number;
@@ -40,24 +39,33 @@ export const getAssetImageUrl = (asset?: Asset): string => {
   return asset.logo_URIs?.svg || asset.logo_URIs?.png || tokenImage;
 };
 
-export const getTransactionFee = (
+export const getIbcGasConfig = (
   registry: ChainRegistryEntry
-): TransactionFee | undefined => {
+): GasConfig | undefined => {
   // TODO: we get a better type for registry to avoid optional chaining?
   // TODO: some chains support multiple fee tokens - what should we do?
   const feeToken = registry.chain.fees?.fee_tokens?.[0];
   if (typeof feeToken !== "undefined") {
+    const gasPrice =
+      feeToken.average_gas_price ??
+      feeToken.low_gas_price ??
+      feeToken.fixed_min_gas_price ??
+      feeToken.high_gas_price ??
+      0;
+    // TODO to be more precise on gasLimit, we should estimate the transfer gas fee
+    // `await client.simulate(sourceAddress, [transferMsg], undefined)`
+    const gasLimit = 222_000;
+
     const asset = registry.assets.assets.find(
       (asset) => asset.base === feeToken.denom
     );
 
-    if (typeof asset !== "undefined") {
-      return {
-        amount: BigNumber(0.003), // TODO: remove hardcoding
-        asset,
-        originalAddress: asset.base,
-      };
-    }
+    return {
+      gasPrice: BigNumber(gasPrice),
+      gasLimit: BigNumber(gasLimit),
+      gasToken: feeToken.denom,
+      asset,
+    };
   }
   return undefined;
 };
diff --git a/apps/namadillo/src/lib/query.ts b/apps/namadillo/src/lib/query.ts
index acd7097a96..c4bb824263 100644
--- a/apps/namadillo/src/lib/query.ts
+++ b/apps/namadillo/src/lib/query.ts
@@ -17,6 +17,7 @@ import {
   TransactionEventsClasses,
   TransactionEventsStatus,
 } from "types/events";
+import { toDisplayAmount } from "utils";
 import { getSdkInstance } from "utils/sdk";
 
 export type TransactionPair<T> = {
@@ -61,8 +62,12 @@ const getTxProps = (
   );
 
   return {
-    token: chain.nativeTokenAddress,
-    feeAmount: gasConfig.gasPrice,
+    token: gasConfig.gasToken,
+    // TODO should we do toDisplayAmount for all tokens or only NAM?
+    feeAmount:
+      gasConfig.asset ?
+        toDisplayAmount(gasConfig.asset, gasConfig.gasPrice)
+      : gasConfig.gasPrice,
     gasLimit: gasConfig.gasLimit,
     chainId: chain.chainId,
     publicKey: account.publicKey!,
diff --git a/apps/namadillo/src/setupTests.ts b/apps/namadillo/src/setupTests.ts
index 864382a85c..d17ad566bd 100644
--- a/apps/namadillo/src/setupTests.ts
+++ b/apps/namadillo/src/setupTests.ts
@@ -1,5 +1,9 @@
 import "@testing-library/jest-dom";
 import { atom } from "jotai";
+import { TextDecoder, TextEncoder } from "util";
+
+global.TextEncoder = TextEncoder;
+global.TextDecoder = TextDecoder as typeof global.TextDecoder;
 
 jest.mock("atoms/integrations", () => ({
   getRestApiAddressByIndex: jest.fn(),
diff --git a/apps/namadillo/src/types.ts b/apps/namadillo/src/types.ts
index 2c50f6a4a6..17242b7714 100644
--- a/apps/namadillo/src/types.ts
+++ b/apps/namadillo/src/types.ts
@@ -31,11 +31,16 @@ export type GasLimit = BigNumber;
 
 export type GasPrice = BigNumber;
 
+// For Namada chain, it should be the address. For Ibc, it should be the base denom
+export type GasToken = Address | string;
+
 export type AddressBalance = Record<Address, BigNumber>;
 
 export type GasConfig = {
   gasLimit: GasLimit;
   gasPrice: GasPrice;
+  gasToken: GasToken;
+  asset?: Asset;
 };
 
 export type TxGas = Record<Address, GasLimit>;
diff --git a/apps/namadillo/src/utils/assets.ts b/apps/namadillo/src/utils/assets.ts
new file mode 100644
index 0000000000..0e848952c7
--- /dev/null
+++ b/apps/namadillo/src/utils/assets.ts
@@ -0,0 +1,36 @@
+import { Asset } from "@chain-registry/types";
+import { IbcToken, NativeToken } from "@namada/indexer-client";
+import { shortenAddress } from "@namada/utils";
+
+export const unknownAsset = (denom: string): Asset => ({
+  denom_units: [{ denom, exponent: 0 }],
+  base: denom,
+  name: denom,
+  display: denom,
+  symbol: shortenAddress(denom, 4, 4),
+});
+
+// TODO upgrade this function to be as smart as possible
+// please refer to `tnamAddressToDenomTrace` and how we could combine both
+export const findAssetByToken = (
+  token: NativeToken | IbcToken,
+  assets: Asset[]
+): Asset | undefined => {
+  if ("trace" in token) {
+    const traceDenom = token.trace.split("/").at(-1);
+    if (traceDenom) {
+      for (let i = 0; i < assets.length; i++) {
+        const asset = assets[i];
+        if (
+          asset.base === traceDenom ||
+          asset.denom_units.find(
+            (u) => u.denom === traceDenom || u.aliases?.includes(traceDenom)
+          )
+        ) {
+          return asset;
+        }
+      }
+    }
+  }
+  return undefined;
+};
diff --git a/apps/namadillo/src/utils/gas.ts b/apps/namadillo/src/utils/gas.ts
new file mode 100644
index 0000000000..9e3920396b
--- /dev/null
+++ b/apps/namadillo/src/utils/gas.ts
@@ -0,0 +1,12 @@
+import BigNumber from "bignumber.js";
+import { GasConfig } from "types";
+import { toDisplayAmount } from "utils";
+
+export const getBaseGasFee = (gasConfig: GasConfig): BigNumber => {
+  return BigNumber(gasConfig.gasPrice).multipliedBy(gasConfig.gasLimit);
+};
+
+export const getDisplayGasFee = (gasConfig: GasConfig): BigNumber => {
+  const baseFee = getBaseGasFee(gasConfig);
+  return gasConfig.asset ? toDisplayAmount(gasConfig.asset, baseFee) : baseFee;
+};
diff --git a/apps/namadillo/src/workers/MaspTxMessages.ts b/apps/namadillo/src/workers/MaspTxMessages.ts
index 385005af03..c1269695ab 100644
--- a/apps/namadillo/src/workers/MaspTxMessages.ts
+++ b/apps/namadillo/src/workers/MaspTxMessages.ts
@@ -1,5 +1,3 @@
-import BigNumber from "bignumber.js";
-
 import {
   Account,
   ShieldedTransferMsgValue,
@@ -8,7 +6,7 @@ import {
   UnshieldingTransferMsgValue,
 } from "@namada/types";
 import { EncodedTxData } from "lib/query";
-import { ChainSettings } from "types";
+import { ChainSettings, GasConfig } from "types";
 import { WebWorkerMessage } from "./utils";
 
 type InitPayload = {
@@ -22,10 +20,7 @@ export type InitDone = WebWorkerMessage<"init-done", null>;
 
 type ShieldPayload = {
   account: Account;
-  gasConfig: {
-    gasLimit: BigNumber;
-    gasPrice: BigNumber;
-  };
+  gasConfig: GasConfig;
   shieldingProps: ShieldingTransferMsgValue[];
   chain: ChainSettings;
   indexerUrl: string;
@@ -38,10 +33,7 @@ export type ShieldDone = WebWorkerMessage<
 
 type UnshieldPayload = {
   account: Account;
-  gasConfig: {
-    gasLimit: BigNumber;
-    gasPrice: BigNumber;
-  };
+  gasConfig: GasConfig;
   unshieldingProps: UnshieldingTransferMsgValue[];
   chain: ChainSettings;
   indexerUrl: string;
@@ -55,10 +47,7 @@ export type UnshieldDone = WebWorkerMessage<
 
 type ShieldedTransferPayload = {
   account: Account;
-  gasConfig: {
-    gasLimit: BigNumber;
-    gasPrice: BigNumber;
-  };
+  gasConfig: GasConfig;
   shieldingProps: ShieldedTransferMsgValue[];
   chain: ChainSettings;
   vks: string[];
diff --git a/yarn.lock b/yarn.lock
index 4bc1b64db1..05295b2c18 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -15861,8 +15861,8 @@ __metadata:
 
 "namada-chain-registry@https://github.com/anoma/namada-chain-registry":
   version: 0.0.1
-  resolution: "namada-chain-registry@https://github.com/anoma/namada-chain-registry.git#commit=bbcc8535461ae2e939629740628ae455feca8225"
-  checksum: a4b2ab0789cb20dbb2299572fa3749e2c737eedd26823c1bfb9e4484dda701a1cb0a255d1f8944bd4bff1b6315f9cb494ec63482c3dcdd1c05d85deb59f9afeb
+  resolution: "namada-chain-registry@https://github.com/anoma/namada-chain-registry.git#commit=698a9f0f8b21280ebac644781592af0a6ada6dc3"
+  checksum: 0979dadaabfd06e29a3045273b076bc79040eb122530d23995eb74b3ee993669a81217ed80c06186d9c85b0ae40c98f4ac8e128d51475e8125d0aa3bfddeec88
   languageName: node
   linkType: hard