diff --git a/apps/namadillo/package.json b/apps/namadillo/package.json
index 9f78d2a8c..de603a6d7 100644
--- a/apps/namadillo/package.json
+++ b/apps/namadillo/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@namada/namadillo",
-  "version": "1.1.6",
+  "version": "1.1.7",
   "description": "Namadillo",
   "repository": "https://github.com/anoma/namada-interface/",
   "author": "Heliax Dev <info@heliax.dev>",
diff --git a/apps/namadillo/src/App/Masp/MaspShield.tsx b/apps/namadillo/src/App/Masp/MaspShield.tsx
index 76bbe8027..b567bcad6 100644
--- a/apps/namadillo/src/App/Masp/MaspShield.tsx
+++ b/apps/namadillo/src/App/Masp/MaspShield.tsx
@@ -1,54 +1,45 @@
 import { Chain } from "@chain-registry/types";
 import { Panel } from "@namada/components";
 import { AccountType } from "@namada/types";
-import { Timeline } from "App/Common/Timeline";
-import { params } from "App/routes";
-import { TransferModule } from "App/Transfer/TransferModule";
+import { NamadaTransferTopHeader } from "App/NamadaTransfer/NamadaTransferTopHeader";
+import { params, routes } from "App/routes";
+import {
+  OnSubmitTransferParams,
+  TransferModule,
+} from "App/Transfer/TransferModule";
 import { allDefaultAccountsAtom } from "atoms/accounts";
 import { namadaTransparentAssetsAtom } from "atoms/balance/atoms";
 import { chainParametersAtom } from "atoms/chain/atoms";
 import { rpcUrlAtom } from "atoms/settings";
 import BigNumber from "bignumber.js";
-import clsx from "clsx";
-import { AnimatePresence, motion } from "framer-motion";
 import { useTransactionActions } from "hooks/useTransactionActions";
 import { useTransfer } from "hooks/useTransfer";
 import { wallets } from "integrations";
-import { getAssetImageUrl } from "integrations/utils";
 import invariant from "invariant";
 import { useAtomValue } from "jotai";
 import { createTransferDataFromNamada } from "lib/transactions";
-import { useEffect, useState } from "react";
-import { useSearchParams } from "react-router-dom";
+import { useState } from "react";
+import { generatePath, useNavigate, useSearchParams } from "react-router-dom";
 import namadaChain from "registry/namada.json";
-import { Address, PartialTransferTransactionData, TransferStep } from "types";
-import { MaspTopHeader } from "./MaspTopHeader";
+import { Address, TransferTransactionData } from "types";
 
 export const MaspShield: React.FC = () => {
+  const navigate = useNavigate();
   const [searchParams, setSearchParams] = useSearchParams();
+  const [displayAmount, setDisplayAmount] = useState<BigNumber | undefined>();
+  const [generalErrorMessage, setGeneralErrorMessage] = useState("");
 
   const rpcUrl = useAtomValue(rpcUrlAtom);
   const chainParameters = useAtomValue(chainParametersAtom);
   const defaultAccounts = useAtomValue(allDefaultAccountsAtom);
+
   const { data: availableAssets, isLoading: isLoadingAssets } = useAtomValue(
     namadaTransparentAssetsAtom
   );
 
-  const [displayAmount, setDisplayAmount] = useState<BigNumber | undefined>();
-  const [currentStepIndex, setCurrentStepIndex] = useState(0);
-  const [generalErrorMessage, setGeneralErrorMessage] = useState("");
-
-  const [transaction, setTransaction] =
-    useState<PartialTransferTransactionData>();
-
-  const {
-    transactions: myTransactions,
-    findByHash,
-    storeTransaction,
-  } = useTransactionActions();
+  const { storeTransaction } = useTransactionActions();
 
   const chainId = chainParameters.data?.chainId;
-
   const sourceAddress = defaultAccounts.data?.find(
     (account) => account.type !== AccountType.ShieldedKeys
   )?.address;
@@ -72,17 +63,6 @@ export const MaspShield: React.FC = () => {
     displayAmount: displayAmount ?? new BigNumber(0),
   });
 
-  const assetImage = selectedAsset ? getAssetImageUrl(selectedAsset.asset) : "";
-
-  useEffect(() => {
-    if (transaction?.hash) {
-      const tx = findByHash(transaction.hash);
-      if (tx) {
-        setTransaction(tx);
-      }
-    }
-  }, [myTransactions]);
-
   const onChangeSelectedAsset = (address?: Address): void => {
     setSearchParams(
       (currentParams) => {
@@ -98,120 +78,84 @@ export const MaspShield: React.FC = () => {
     );
   };
 
-  const onSubmitTransfer = async (): Promise<void> => {
+  const redirectToTimeline = (tx: TransferTransactionData): void => {
+    invariant(tx.hash, "Invalid TX hash");
+    navigate(generatePath(routes.transaction, { hash: tx.hash }));
+  };
+
+  const onSubmitTransfer = async ({
+    memo,
+  }: OnSubmitTransferParams): Promise<void> => {
     try {
       setGeneralErrorMessage("");
-      setCurrentStepIndex(1);
 
       invariant(sourceAddress, "Source address is not defined");
       invariant(chainId, "Chain ID is undefined");
       invariant(selectedAsset, "No asset is selected");
       invariant(gasConfig, "No gas config");
 
-      setTransaction({
-        type: "TransparentToShielded",
-        currentStep: TransferStep.Sign,
-        asset: selectedAsset.asset,
-        chainId,
-      });
-
-      const txResponse = await performTransfer();
+      const txResponse = await performTransfer({ memo });
 
       if (txResponse) {
         const txList = createTransferDataFromNamada(
           txKind,
           selectedAsset.asset,
           rpcUrl,
-          txResponse
+          txResponse,
+          memo
         );
 
         // Currently we don't have the option of batching transfer transactions
         if (txList.length === 0) {
-          throw "Couldn't create TransferData object ";
+          throw "Couldn't create TransferData object";
         }
-
         const tx = txList[0];
-        setTransaction(tx);
         storeTransaction(tx);
+        redirectToTimeline(tx);
       } else {
         throw "Invalid transaction response";
       }
     } catch (err) {
       setGeneralErrorMessage(err + "");
-      setTransaction(undefined);
     }
   };
 
   return (
-    <Panel className="pt-8 pb-20">
+    <Panel className="relative min-h-[600px]">
       <header className="flex flex-col items-center text-center mb-3 gap-6">
-        <h1 className="text-yellow text-lg">Shield</h1>
-        <MaspTopHeader type="shield" isShielded />
+        <h1 className="mt-6 text-lg text-yellow">Shield</h1>
+        <NamadaTransferTopHeader
+          isSourceShielded={false}
+          isDestinationShielded={true}
+        />
         <h2 className="text-lg">Namada Transparent to Namada Shielded</h2>
       </header>
-      <AnimatePresence>
-        {currentStepIndex === 0 && (
-          <motion.div
-            key="transfer"
-            exit={{ opacity: 0 }}
-            className="min-h-[600px]"
-          >
-            <TransferModule
-              source={{
-                isLoadingAssets,
-                availableAssets,
-                selectedAssetAddress,
-                availableAmount: selectedAsset?.amount,
-                chain: namadaChain as Chain,
-                availableWallets: [wallets.namada],
-                wallet: wallets.namada,
-                walletAddress: sourceAddress,
-                onChangeSelectedAsset,
-                amount: displayAmount,
-                onChangeAmount: setDisplayAmount,
-              }}
-              destination={{
-                chain: namadaChain as Chain,
-                availableWallets: [wallets.namada],
-                wallet: wallets.namada,
-                walletAddress: destinationAddress,
-                isShielded: true,
-              }}
-              gasConfig={gasConfig}
-              isSubmitting={isPerformingTransfer}
-              errorMessage={generalErrorMessage}
-              onSubmitTransfer={onSubmitTransfer}
-            />
-          </motion.div>
-        )}
-        {currentStepIndex > 0 && transaction?.currentStep && (
-          <motion.div
-            key="progress"
-            className={clsx("my-12 text-yellow")}
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            exit={{ opacity: 0 }}
-          >
-            <Timeline
-              currentStepIndex={currentStepIndex}
-              steps={[
-                {
-                  children: <img src={assetImage} className="w-14" />,
-                },
-                { children: "Signature Required", bullet: true },
-                {
-                  children: (
-                    <>
-                      <img src={assetImage} className="w-14 mb-2" />
-                      Shielded Transfer Complete
-                    </>
-                  ),
-                },
-              ]}
-            />
-          </motion.div>
-        )}
-      </AnimatePresence>
+      <TransferModule
+        source={{
+          isLoadingAssets,
+          availableAssets,
+          selectedAssetAddress,
+          availableAmount: selectedAsset?.amount,
+          chain: namadaChain as Chain,
+          availableWallets: [wallets.namada],
+          wallet: wallets.namada,
+          walletAddress: sourceAddress,
+          onChangeSelectedAsset,
+          amount: displayAmount,
+          onChangeAmount: setDisplayAmount,
+        }}
+        destination={{
+          chain: namadaChain as Chain,
+          availableWallets: [wallets.namada],
+          wallet: wallets.namada,
+          walletAddress: destinationAddress,
+          isShielded: true,
+        }}
+        gasConfig={gasConfig}
+        isSubmitting={isPerformingTransfer}
+        errorMessage={generalErrorMessage}
+        onSubmitTransfer={onSubmitTransfer}
+      />
     </Panel>
   );
 };
diff --git a/apps/namadillo/src/App/Masp/MaspUnshield.tsx b/apps/namadillo/src/App/Masp/MaspUnshield.tsx
index 4ee7042de..72d3d11c4 100644
--- a/apps/namadillo/src/App/Masp/MaspUnshield.tsx
+++ b/apps/namadillo/src/App/Masp/MaspUnshield.tsx
@@ -1,51 +1,43 @@
 import { Chain } from "@chain-registry/types";
 import { Panel } from "@namada/components";
 import { AccountType } from "@namada/types";
-import { Timeline } from "App/Common/Timeline";
-import { params } from "App/routes";
-import { TransferModule } from "App/Transfer/TransferModule";
+import { NamadaTransferTopHeader } from "App/NamadaTransfer/NamadaTransferTopHeader";
+import { params, routes } from "App/routes";
+import {
+  OnSubmitTransferParams,
+  TransferModule,
+} from "App/Transfer/TransferModule";
 import { allDefaultAccountsAtom } from "atoms/accounts";
 import { namadaShieldedAssetsAtom } from "atoms/balance/atoms";
 import { chainParametersAtom } from "atoms/chain/atoms";
 import { rpcUrlAtom } from "atoms/settings";
 import BigNumber from "bignumber.js";
-import clsx from "clsx";
-import { AnimatePresence, motion } from "framer-motion";
 import { useTransactionActions } from "hooks/useTransactionActions";
 import { useTransfer } from "hooks/useTransfer";
 import { wallets } from "integrations";
-import { getAssetImageUrl } from "integrations/utils";
 import invariant from "invariant";
 import { useAtomValue } from "jotai";
 import { createTransferDataFromNamada } from "lib/transactions";
-import { useEffect, useState } from "react";
-import { useSearchParams } from "react-router-dom";
+import { useState } from "react";
+import { generatePath, useNavigate, useSearchParams } from "react-router-dom";
 import namadaChain from "registry/namada.json";
-import { Address, PartialTransferTransactionData, TransferStep } from "types";
-import { MaspTopHeader } from "./MaspTopHeader";
+import { Address, TransferTransactionData } from "types";
 
 export const MaspUnshield: React.FC = () => {
+  const navigate = useNavigate();
   const [searchParams, setSearchParams] = useSearchParams();
+  const [displayAmount, setDisplayAmount] = useState<BigNumber | undefined>();
+  const [generalErrorMessage, setGeneralErrorMessage] = useState("");
 
   const rpcUrl = useAtomValue(rpcUrlAtom);
   const chainParameters = useAtomValue(chainParametersAtom);
   const defaultAccounts = useAtomValue(allDefaultAccountsAtom);
+
   const { data: availableAssets, isLoading: isLoadingAssets } = useAtomValue(
     namadaShieldedAssetsAtom
   );
 
-  const [displayAmount, setDisplayAmount] = useState<BigNumber | undefined>();
-  const [currentStepIndex, setCurrentStepIndex] = useState(0);
-  const [generalErrorMessage, setGeneralErrorMessage] = useState("");
-
-  const [transaction, setTransaction] =
-    useState<PartialTransferTransactionData>();
-
-  const {
-    transactions: myTransactions,
-    findByHash,
-    storeTransaction,
-  } = useTransactionActions();
+  const { storeTransaction } = useTransactionActions();
 
   const chainId = chainParameters.data?.chainId;
   const account = defaultAccounts.data?.find(
@@ -72,17 +64,6 @@ export const MaspUnshield: React.FC = () => {
     displayAmount: displayAmount ?? new BigNumber(0),
   });
 
-  const assetImage = selectedAsset ? getAssetImageUrl(selectedAsset.asset) : "";
-
-  useEffect(() => {
-    if (transaction?.hash) {
-      const tx = findByHash(transaction.hash);
-      if (tx) {
-        setTransaction(tx);
-      }
-    }
-  }, [myTransactions]);
-
   const onChangeSelectedAsset = (address?: Address): void => {
     setSearchParams(
       (currentParams) => {
@@ -98,122 +79,85 @@ export const MaspUnshield: React.FC = () => {
     );
   };
 
-  const onSubmitTransfer = async (): Promise<void> => {
+  const redirectToTimeline = (tx: TransferTransactionData): void => {
+    invariant(tx.hash, "Invalid TX hash");
+    navigate(generatePath(routes.transaction, { hash: tx.hash }));
+  };
+
+  const onSubmitTransfer = async ({
+    memo,
+  }: OnSubmitTransferParams): Promise<void> => {
     try {
       setGeneralErrorMessage("");
-      setCurrentStepIndex(1);
 
       invariant(sourceAddress, "Source address is not defined");
       invariant(chainId, "Chain ID is undefined");
       invariant(selectedAsset, "No asset is selected");
       invariant(gasConfig, "No gas config");
 
-      setTransaction({
-        type: "ShieldedToTransparent",
-        asset: selectedAsset.asset,
-        chainId,
-        currentStep: TransferStep.Sign,
-      });
-
-      const txResponse = await performTransfer();
+      const txResponse = await performTransfer({ memo });
 
       if (txResponse) {
         const txList = createTransferDataFromNamada(
           txKind,
           selectedAsset.asset,
           rpcUrl,
-          txResponse
+          txResponse,
+          memo
         );
 
         // Currently we don't have the option of batching transfer transactions
         if (txList.length === 0) {
-          throw "Couldn't create TransferData object ";
+          throw "Couldn't create TransferData object";
         }
-
         const tx = txList[0];
-        setTransaction(tx);
         storeTransaction(tx);
+        redirectToTimeline(tx);
       } else {
         throw "Invalid transaction response";
       }
     } catch (err) {
       setGeneralErrorMessage(err + "");
-      setTransaction(undefined);
     }
   };
 
   return (
-    <Panel className="pt-8 pb-20">
+    <Panel className="relative min-h-[600px]">
       <header className="flex flex-col items-center text-center mb-3 gap-6">
-        <h1 className="text-lg">Unshield</h1>
-        <MaspTopHeader type="unshield" isShielded />
+        <h1 className="mt-6 text-lg">Unshield</h1>
+        <NamadaTransferTopHeader
+          isSourceShielded={true}
+          isDestinationShielded={false}
+        />
         <h2 className="text-lg">Namada Shielded to Namada Transparent</h2>
       </header>
-      <AnimatePresence>
-        {currentStepIndex === 0 && (
-          <motion.div
-            key="transfer"
-            exit={{ opacity: 0 }}
-            className="min-h-[600px]"
-          >
-            <TransferModule
-              source={{
-                isLoadingAssets: isLoadingAssets,
-                availableAssets,
-                selectedAssetAddress,
-                availableAmount: selectedAsset?.amount,
-                chain: namadaChain as Chain,
-                availableWallets: [wallets.namada],
-                wallet: wallets.namada,
-                walletAddress: sourceAddress,
-                isShielded: true,
-                onChangeSelectedAsset,
-                amount: displayAmount,
-                onChangeAmount: setDisplayAmount,
-              }}
-              destination={{
-                chain: namadaChain as Chain,
-                availableWallets: [wallets.namada],
-                wallet: wallets.namada,
-                walletAddress: destinationAddress,
-                isShielded: false,
-              }}
-              gasConfig={gasConfig}
-              isSubmitting={isPerformingTransfer}
-              errorMessage={generalErrorMessage}
-              onSubmitTransfer={onSubmitTransfer}
-            />
-          </motion.div>
-        )}
-        {currentStepIndex > 0 && transaction?.currentStep && (
-          <motion.div
-            key="progress"
-            className={clsx("my-12 ")}
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            exit={{ opacity: 0 }}
-          >
-            <Timeline
-              currentStepIndex={currentStepIndex}
-              steps={[
-                {
-                  children: <img src={assetImage} className="w-14" />,
-                },
-                { children: "Signature Required", bullet: true },
-                { children: "Asset Leaving MASP" },
-                {
-                  children: (
-                    <>
-                      <img src={assetImage} className="w-14 mb-2" />
-                      Unshielded Transfer Complete
-                    </>
-                  ),
-                },
-              ]}
-            />
-          </motion.div>
-        )}
-      </AnimatePresence>
+      <TransferModule
+        source={{
+          isLoadingAssets: isLoadingAssets,
+          availableAssets,
+          selectedAssetAddress,
+          availableAmount: selectedAsset?.amount,
+          chain: namadaChain as Chain,
+          availableWallets: [wallets.namada],
+          wallet: wallets.namada,
+          walletAddress: sourceAddress,
+          isShielded: true,
+          onChangeSelectedAsset,
+          amount: displayAmount,
+          onChangeAmount: setDisplayAmount,
+        }}
+        destination={{
+          chain: namadaChain as Chain,
+          availableWallets: [wallets.namada],
+          wallet: wallets.namada,
+          walletAddress: destinationAddress,
+          isShielded: false,
+        }}
+        gasConfig={gasConfig}
+        isSubmitting={isPerformingTransfer}
+        errorMessage={generalErrorMessage}
+        onSubmitTransfer={onSubmitTransfer}
+      />
     </Panel>
   );
 };
diff --git a/apps/namadillo/src/App/NamadaTransfer/NamadaTransfer.tsx b/apps/namadillo/src/App/NamadaTransfer/NamadaTransfer.tsx
index 0e42ffd61..c0dad9023 100644
--- a/apps/namadillo/src/App/NamadaTransfer/NamadaTransfer.tsx
+++ b/apps/namadillo/src/App/NamadaTransfer/NamadaTransfer.tsx
@@ -1,8 +1,7 @@
 import { Chain } from "@chain-registry/types";
 import { Panel } from "@namada/components";
 import { AccountType } from "@namada/types";
-import { params } from "App/routes";
-import { TransferTransactionTimeline } from "App/Transactions/TransferTransactionTimeline";
+import { params, routes } from "App/routes";
 import { isShieldedAddress } from "App/Transfer/common";
 import {
   OnSubmitTransferParams,
@@ -13,29 +12,27 @@ import { namadaTransparentAssetsAtom } from "atoms/balance/atoms";
 import { chainParametersAtom } from "atoms/chain/atoms";
 import { applicationFeaturesAtom, rpcUrlAtom } from "atoms/settings";
 import BigNumber from "bignumber.js";
-import clsx from "clsx";
 import { useTransactionActions } from "hooks/useTransactionActions";
 import { useTransfer } from "hooks/useTransfer";
 import { wallets } from "integrations";
 import invariant from "invariant";
 import { useAtomValue } from "jotai";
 import { createTransferDataFromNamada } from "lib/transactions";
-import { useEffect, useMemo, useState } from "react";
-import { useSearchParams } from "react-router-dom";
+import { useMemo, useState } from "react";
+import { generatePath, useNavigate, useSearchParams } from "react-router-dom";
 import namadaChain from "registry/namada.json";
 import { twMerge } from "tailwind-merge";
-import { Address, PartialTransferTransactionData, TransferStep } from "types";
+import { Address, TransferTransactionData } from "types";
 import { isNamadaAsset } from "utils";
 import { NamadaTransferTopHeader } from "./NamadaTransferTopHeader";
 
 export const NamadaTransfer: React.FC = () => {
+  const navigate = useNavigate();
   const [searchParams, setSearchParams] = useSearchParams();
   const [displayAmount, setDisplayAmount] = useState<BigNumber | undefined>();
   const [shielded, setShielded] = useState<boolean>(true);
   const [customAddress, setCustomAddress] = useState<string>("");
   const [generalErrorMessage, setGeneralErrorMessage] = useState("");
-  const [transaction, setTransaction] =
-    useState<PartialTransferTransactionData>();
 
   const rpcUrl = useAtomValue(rpcUrlAtom);
   const features = useAtomValue(applicationFeaturesAtom);
@@ -45,11 +42,7 @@ export const NamadaTransfer: React.FC = () => {
   const { data: availableAssetsData, isLoading: isLoadingAssets } =
     useAtomValue(namadaTransparentAssetsAtom);
 
-  const {
-    transactions: myTransactions,
-    findByHash,
-    storeTransaction,
-  } = useTransactionActions();
+  const { storeTransaction } = useTransactionActions();
 
   const availableAssets = useMemo(() => {
     if (features.namTransfersEnabled) {
@@ -93,15 +86,6 @@ export const NamadaTransfer: React.FC = () => {
   const isSourceShielded = isShieldedAddress(source);
   const isTargetShielded = isShieldedAddress(target);
 
-  useEffect(() => {
-    if (transaction?.hash) {
-      const tx = findByHash(transaction.hash);
-      if (tx) {
-        setTransaction(tx);
-      }
-    }
-  }, [myTransactions]);
-
   const onChangeSelectedAsset = (address?: Address): void => {
     setSearchParams(
       (currentParams) => {
@@ -117,6 +101,11 @@ export const NamadaTransfer: React.FC = () => {
     );
   };
 
+  const redirectToTimeline = (tx: TransferTransactionData): void => {
+    invariant(tx.hash, "Invalid TX hash");
+    navigate(generatePath(routes.transaction, { hash: tx.hash }));
+  };
+
   const onSubmitTransfer = async ({
     memo,
   }: OnSubmitTransferParams): Promise<void> => {
@@ -128,13 +117,6 @@ export const NamadaTransfer: React.FC = () => {
       invariant(selectedAsset, "No asset is selected");
       invariant(gasConfig, "No gas config");
 
-      setTransaction({
-        type: txKind,
-        currentStep: TransferStep.Sign,
-        asset: selectedAsset.asset,
-        chainId,
-      });
-
       const txResponse = await performTransfer({ memo });
 
       if (txResponse) {
@@ -148,74 +130,60 @@ export const NamadaTransfer: React.FC = () => {
 
         // Currently we don't have the option of batching transfer transactions
         if (txList.length === 0) {
-          throw "Couldn't create TransferData object ";
+          throw "Couldn't create TransferData object";
         }
 
         const tx = txList[0];
-        setTransaction(tx);
         storeTransaction(tx);
+        redirectToTimeline(tx);
       } else {
         throw "Invalid transaction response";
       }
     } catch (err) {
       setGeneralErrorMessage(err + "");
-      setTransaction(undefined);
     }
   };
 
   return (
-    <Panel className="relative pt-8 pb-20">
-      {!transaction && (
-        <div className="min-h-[600px]">
-          <header className="flex flex-col items-center text-center mb-8 gap-6">
-            <h1
-              className={twMerge("text-lg", isSourceShielded && "text-yellow")}
-            >
-              Transfer
-            </h1>
-            <NamadaTransferTopHeader
-              isSourceShielded={isSourceShielded}
-              isDestinationShielded={target ? isTargetShielded : undefined}
-            />
-          </header>
-          <TransferModule
-            source={{
-              isLoadingAssets,
-              availableAssets,
-              availableAmount: selectedAsset?.amount,
-              chain: namadaChain as Chain,
-              availableWallets: [wallets.namada],
-              wallet: wallets.namada,
-              walletAddress: sourceAddress,
-              selectedAssetAddress,
-              onChangeSelectedAsset,
-              isShielded: shielded,
-              onChangeShielded: setShielded,
-              amount: displayAmount,
-              onChangeAmount: setDisplayAmount,
-            }}
-            destination={{
-              chain: namadaChain as Chain,
-              enableCustomAddress: true,
-              customAddress,
-              onChangeCustomAddress: setCustomAddress,
-            }}
-            gasConfig={gasConfig}
-            isSubmitting={isPerformingTransfer}
-            errorMessage={generalErrorMessage}
-            onSubmitTransfer={onSubmitTransfer}
-          />
-        </div>
-      )}
-      {transaction && (
-        <div
-          className={clsx("absolute z-50 py-12 left-0 top-0 w-full h-full", {
-            "text-yellow": shielded,
-          })}
+    <Panel className="relative min-h-[600px]">
+      <header className="flex flex-col items-center text-center mb-3 gap-6">
+        <h1
+          className={twMerge("mt-6 text-lg", isSourceShielded && "text-yellow")}
         >
-          <TransferTransactionTimeline transaction={transaction} />
-        </div>
-      )}
+          Transfer
+        </h1>
+        <NamadaTransferTopHeader
+          isSourceShielded={isSourceShielded}
+          isDestinationShielded={target ? isTargetShielded : undefined}
+        />
+      </header>
+      <TransferModule
+        source={{
+          isLoadingAssets,
+          availableAssets,
+          availableAmount: selectedAsset?.amount,
+          chain: namadaChain as Chain,
+          availableWallets: [wallets.namada],
+          wallet: wallets.namada,
+          walletAddress: sourceAddress,
+          selectedAssetAddress,
+          onChangeSelectedAsset,
+          isShielded: shielded,
+          onChangeShielded: setShielded,
+          amount: displayAmount,
+          onChangeAmount: setDisplayAmount,
+        }}
+        destination={{
+          chain: namadaChain as Chain,
+          enableCustomAddress: true,
+          customAddress,
+          onChangeCustomAddress: setCustomAddress,
+        }}
+        gasConfig={gasConfig}
+        isSubmitting={isPerformingTransfer}
+        errorMessage={generalErrorMessage}
+        onSubmitTransfer={onSubmitTransfer}
+      />
     </Panel>
   );
 };