diff --git a/apps/namadillo/src/App/AccountOverview/NavigationFooter.tsx b/apps/namadillo/src/App/AccountOverview/NavigationFooter.tsx
index 7dfe73789..ebc76ce6a 100644
--- a/apps/namadillo/src/App/AccountOverview/NavigationFooter.tsx
+++ b/apps/namadillo/src/App/AccountOverview/NavigationFooter.tsx
@@ -1,6 +1,5 @@
 import { ActionButton, Heading, Stack } from "@namada/components";
-import GovernanceRoutes from "App/Governance/routes";
-import StakingRoutes from "App/Staking/routes";
+import { routes } from "App/routes";
 
 export const NavigationFooter = (): JSX.Element => {
   return (
@@ -11,7 +10,7 @@ export const NavigationFooter = (): JSX.Element => {
       <Stack gap={3} direction="horizontal">
         <ActionButton
           className="border uppercase"
-          href={StakingRoutes.overview().url}
+          href={routes.staking}
           size="sm"
           backgroundColor="cyan"
           outlineColor="cyan"
@@ -23,7 +22,7 @@ export const NavigationFooter = (): JSX.Element => {
         </ActionButton>
         <ActionButton
           size="sm"
-          href={GovernanceRoutes.index()}
+          href={routes.governance}
           outlineColor="yellow"
           className="uppercase"
           backgroundColor="transparent"
diff --git a/apps/namadillo/src/App/AppRoutes.tsx b/apps/namadillo/src/App/AppRoutes.tsx
index 722a19819..47d7da13a 100644
--- a/apps/namadillo/src/App/AppRoutes.tsx
+++ b/apps/namadillo/src/App/AppRoutes.tsx
@@ -1,4 +1,5 @@
 import { Router } from "@remix-run/router";
+import { applicationFeaturesAtom } from "atoms/settings";
 import { useAtomValue } from "jotai";
 import {
   Route,
@@ -10,24 +11,35 @@ import {
 } from "react-router-dom";
 import { AccountOverview } from "./AccountOverview";
 import { App } from "./App";
+import { NotFound } from "./Common/NotFound";
 import { RouteErrorBoundary } from "./Common/RouteErrorBoundary";
-import { Governance } from "./Governance";
-import { Ibc } from "./Ibc";
+import { GovernanceOverview } from "./Governance/GovernanceOverview";
+import { ProposalAndVote } from "./Governance/ProposalAndVote";
+import { SubmitVote } from "./Governance/SubmitVote";
+import { ViewJson } from "./Governance/ViewJson";
+import { IbcLayout } from "./Ibc/IbcLayout";
+import { IbcShieldAll } from "./Ibc/IbcShieldAll";
+import { IbcTransfer } from "./Ibc/IbcTransfer";
+import { IbcWithdraw } from "./Ibc/IbcWithdraw";
+import { MaspLayout } from "./Masp/MaspLayout";
+import { MaspOverview } from "./Masp/MaspOverview";
+import { MaspShield } from "./Masp/MaspShield";
+import { MaspUnshield } from "./Masp/MaspUnshield";
+import { Advanced } from "./Settings/Advanced";
+import { EnableFeatures } from "./Settings/EnableFeatures";
+import { SettingsMain } from "./Settings/SettingsMain";
 import { SettingsPanel } from "./Settings/SettingsPanel";
-import { Staking } from "./Staking";
-import { SwitchAccountPanel } from "./SwitchAccount/SwitchAccountPanel";
-
-import { applicationFeaturesAtom } from "atoms/settings";
-import GovernanceRoutes from "./Governance/routes";
-import IbcRoutes from "./Ibc/routes";
-import SettingsRoutes from "./Settings/routes";
+import { SettingsSignArbitrary } from "./Settings/SettingsSignArbitrary";
 import { SignMessages } from "./SignMessages/SignMessages";
-import MessageRoutes from "./SignMessages/routes";
+import IncrementBonding from "./Staking/IncrementBonding";
+import { ReDelegate } from "./Staking/ReDelegate";
+import { StakingOverview } from "./Staking/StakingOverview";
 import { StakingRewards } from "./Staking/StakingRewards";
-import StakingRoutes from "./Staking/routes";
-import SwitchAccountRoutes from "./SwitchAccount/routes";
-import { Transfer } from "./Transfer/Transfer";
-import TransferRoutes from "./Transfer/routes";
+import { Unstake } from "./Staking/Unstake";
+import { SwitchAccountPanel } from "./SwitchAccount/SwitchAccountPanel";
+import { NamTransfer } from "./Transfer/NamTransfer";
+import { TransferLayout } from "./Transfer/TransferLayout";
+import { routes } from "./routes";
 
 export const MainRoutes = (): JSX.Element => {
   const location = useLocation();
@@ -36,46 +48,97 @@ export const MainRoutes = (): JSX.Element => {
 
   // Avoid animation being fired twice when navigating inside settings modal routes
   const settingsAnimationKey =
-    location.pathname.indexOf(SettingsRoutes.index()) > -1 ?
+    location.pathname.indexOf(routes.settings) > -1 ?
       "settings-modal"
     : location.pathname;
 
   return (
     <>
       <Routes location={state?.backgroundLocation || location}>
-        <Route path="/" element={<App />} errorElement={<RouteErrorBoundary />}>
+        <Route
+          path={routes.root}
+          element={<App />}
+          errorElement={<RouteErrorBoundary />}
+        >
+          {/* Home */}
           <Route index element={<AccountOverview />} />
-          <Route path={`${StakingRoutes.index()}/*`} element={<Staking />} />
+
+          {/* Staking */}
+          <Route path={routes.staking} element={<StakingOverview />} />
           <Route
-            path={`${GovernanceRoutes.index()}/*`}
-            element={<Governance />}
+            path={routes.stakingBondingIncrement}
+            element={<IncrementBonding />}
           />
-          <Route path={`${TransferRoutes.index()}/*`} element={<Transfer />} />
+          <Route path={routes.stakingBondingUnstake} element={<Unstake />} />
+          <Route
+            path={routes.stakingBondingRedelegate}
+            element={<ReDelegate />}
+          />
+
+          {/* Governance */}
+          <Route path={routes.governance} element={<GovernanceOverview />} />
+          <Route
+            path={routes.governanceProposal}
+            element={<ProposalAndVote />}
+          />
+          <Route path={routes.governanceSubmitVote} element={<SubmitVote />} />
+          <Route path={routes.governanceJson} element={<ViewJson />} />
+
+          {/* Masp */}
+          {features.maspEnabled && (
+            <Route element={<MaspLayout />}>
+              <Route path={routes.masp} element={<MaspOverview />} />
+              <Route path={routes.maspShield} element={<MaspShield />} />
+              <Route path={routes.maspUnshield} element={<MaspUnshield />} />
+            </Route>
+          )}
+
+          {/* Ibc */}
           {features.ibcTransfersEnabled && (
-            <Route path={`${IbcRoutes.index()}/*`} element={<Ibc />} />
+            <Route element={<IbcLayout />}>
+              <Route path={routes.ibc} element={<IbcTransfer />} />
+              <Route path={routes.ibcWithdraw} element={<IbcWithdraw />} />
+              <Route path={routes.ibcShieldAll} element={<IbcShieldAll />} />
+            </Route>
           )}
+
+          {/* Transfer */}
+          {features.namTransfersEnabled && (
+            <Route element={<TransferLayout />}>
+              <Route path={routes.transfer} element={<NamTransfer />} />
+            </Route>
+          )}
+
+          {/* Other */}
+          <Route path="*" element={<NotFound />} />
         </Route>
       </Routes>
+
+      {/* Modals */}
       <Routes location={location} key={settingsAnimationKey}>
-        <Route
-          path={`${SettingsRoutes.index()}/*`}
-          element={<SettingsPanel />}
-          errorElement={<RouteErrorBoundary />}
-        />
-        <Route
-          path={`${SwitchAccountRoutes.index()}/*`}
-          element={<SwitchAccountPanel />}
-          errorElement={<RouteErrorBoundary />}
-        />
-        <Route
-          path={`${MessageRoutes.index()}/*`}
-          element={<SignMessages />}
-          errorElement={<RouteErrorBoundary />}
-        />
-        <Route
-          path={`${StakingRoutes.claimRewards().url}`}
-          element={<StakingRewards />}
-        />
+        <Route errorElement={<RouteErrorBoundary />}>
+          {/* Settings */}
+          <Route element={<SettingsPanel />}>
+            <Route path={routes.settings} element={<SettingsMain />} />
+            <Route path={routes.settingsAdvanced} element={<Advanced />} />
+            <Route
+              path={routes.settingsSignArbitrary}
+              element={<SettingsSignArbitrary />}
+            />
+            <Route
+              path={routes.settingsFeatures}
+              element={<EnableFeatures />}
+            />
+          </Route>
+
+          {/* Other Modals */}
+          <Route path={routes.switchAccount} element={<SwitchAccountPanel />} />
+          <Route path={routes.signMessages} element={<SignMessages />} />
+          <Route
+            path={routes.stakingClaimRewards}
+            element={<StakingRewards />}
+          />
+        </Route>
       </Routes>
       <ScrollRestoration />
     </>
diff --git a/apps/namadillo/src/App/Common/NotFound.tsx b/apps/namadillo/src/App/Common/NotFound.tsx
new file mode 100644
index 000000000..7e93534cd
--- /dev/null
+++ b/apps/namadillo/src/App/Common/NotFound.tsx
@@ -0,0 +1,13 @@
+import { ErrorBox } from "./ErrorBox";
+
+export const NotFound = (): JSX.Element => {
+  return (
+    <ErrorBox
+      niceError="404 Not found"
+      containerProps={{
+        className:
+          "bg-black max-w-full rounded-sm w-full text-white min-h-full",
+      }}
+    />
+  );
+};
diff --git a/apps/namadillo/src/App/Governance/AllProposalsTable.tsx b/apps/namadillo/src/App/Governance/AllProposalsTable.tsx
index d9062aa6e..f03226544 100644
--- a/apps/namadillo/src/App/Governance/AllProposalsTable.tsx
+++ b/apps/namadillo/src/App/Governance/AllProposalsTable.tsx
@@ -4,12 +4,13 @@ import { Proposal, isProposalStatus, proposalStatuses } from "@namada/types";
 import { mapUndefined } from "@namada/utils";
 import { Search } from "App/Common/Search";
 import { TableWithPaginator } from "App/Common/TableWithPaginator";
+import { routes } from "App/routes";
 import { paginatedProposalsFamily } from "atoms/proposals";
 import clsx from "clsx";
 import { useAtomValue } from "jotai";
 import { useEffect, useState } from "react";
 import { GoCheckCircleFill, GoInfo } from "react-icons/go";
-import { useNavigate } from "react-router-dom";
+import { generatePath, useNavigate } from "react-router-dom";
 import {
   proposalStatusToString,
   proposalTypeStringToString,
@@ -17,7 +18,6 @@ import {
   secondsToTimeString,
 } from "utils";
 import { StatusLabel, TypeLabel } from "./ProposalLabels";
-import GovernanceRoutes from "./routes";
 
 const Table: React.FC<
   {
@@ -50,7 +50,11 @@ const Table: React.FC<
       "[&_td:first-child]:rounded-s-md [&_td:last-child]:rounded-e-md"
     ),
     onClick: () => {
-      navigate(GovernanceRoutes.proposal(proposal.id).url);
+      navigate(
+        generatePath(routes.governanceProposal, {
+          proposalId: proposal.id.toString(),
+        })
+      );
     },
     cells: [
       // ID
diff --git a/apps/namadillo/src/App/Governance/Governance.tsx b/apps/namadillo/src/App/Governance/Governance.tsx
deleted file mode 100644
index 783951942..000000000
--- a/apps/namadillo/src/App/Governance/Governance.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Route, Routes } from "react-router-dom";
-import { GovernanceOverview } from "./GovernanceOverview";
-import { ProposalAndVote } from "./ProposalAndVote";
-import { SubmitVote } from "./SubmitVote";
-import { ViewJson } from "./ViewJson";
-import GovernanceRoutes from "./routes";
-
-export const Governance: React.FC = () => (
-  <main className="w-full">
-    <Routes>
-      <Route path="/*" element={<GovernanceOverview />} />
-      <Route
-        path={`${GovernanceRoutes.proposal()}`}
-        element={<ProposalAndVote />}
-      />
-      <Route
-        path={`${GovernanceRoutes.submitVote()}`}
-        element={<SubmitVote />}
-      />
-      <Route path={`${GovernanceRoutes.viewJson()}`} element={<ViewJson />} />
-    </Routes>
-  </main>
-);
diff --git a/apps/namadillo/src/App/Governance/LiveGovernanceProposals.tsx b/apps/namadillo/src/App/Governance/LiveGovernanceProposals.tsx
index a8272019b..8287eddb1 100644
--- a/apps/namadillo/src/App/Governance/LiveGovernanceProposals.tsx
+++ b/apps/namadillo/src/App/Governance/LiveGovernanceProposals.tsx
@@ -1,12 +1,12 @@
 import { SegmentedBar, Stack } from "@namada/components";
 import { Proposal, VoteType, voteTypes } from "@namada/types";
+import { routes } from "App/routes";
 import BigNumber from "bignumber.js";
 import clsx from "clsx";
 import { GoInfo } from "react-icons/go";
-import { useNavigate } from "react-router-dom";
+import { generatePath, useNavigate } from "react-router-dom";
 import { secondsToDateTimeString } from "utils";
 import { StatusLabel, TypeLabel, VotedLabel } from "./ProposalLabels";
-import GovernanceRoutes from "./routes";
 import { colors } from "./types";
 
 const ProposalListItem: React.FC<{
@@ -33,7 +33,13 @@ const ProposalListItem: React.FC<{
     <Stack
       as="li"
       gap={3}
-      onClick={() => navigate(GovernanceRoutes.proposal(proposal.id).url)}
+      onClick={() =>
+        navigate(
+          generatePath(routes.governanceProposal, {
+            proposalId: proposal.id.toString(),
+          })
+        )
+      }
       className={clsx(
         "group/proposal cursor-pointer text-sm",
         "rounded-md bg-[#191919] p-4"
@@ -85,8 +91,9 @@ export const LiveGovernanceProposals: React.FC<
         className="dark-scrollbar overscroll-contain overflow-x-auto"
       >
         {proposals.map((proposal) => {
-          const vote = votedProposals.find((v) => v.proposalId === proposal.id)
-            ?.vote;
+          const vote = votedProposals.find(
+            (v) => v.proposalId === proposal.id
+          )?.vote;
           return (
             <ProposalListItem
               proposal={proposal}
diff --git a/apps/namadillo/src/App/Governance/ProposalHeader.tsx b/apps/namadillo/src/App/Governance/ProposalHeader.tsx
index c1ec8b3f1..5c61c6ba8 100644
--- a/apps/namadillo/src/App/Governance/ProposalHeader.tsx
+++ b/apps/namadillo/src/App/Governance/ProposalHeader.tsx
@@ -4,6 +4,7 @@ import {
   Stack,
 } from "@namada/components";
 import { Proposal, VoteType } from "@namada/types";
+import { routes } from "App/routes";
 import {
   canVoteAtom,
   proposalFamily,
@@ -16,7 +17,7 @@ import { AtomWithQueryResult } from "jotai-tanstack-query";
 import { FaChevronLeft } from "react-icons/fa";
 import { SiWebassembly } from "react-icons/si";
 import { VscJson } from "react-icons/vsc";
-import { Link, useNavigate } from "react-router-dom";
+import { generatePath, Link, useNavigate } from "react-router-dom";
 import {
   proposalIdToString,
   secondsToDateTimeString,
@@ -27,7 +28,6 @@ import {
   TypeLabel as TypeLabelComponent,
   VotedLabel as VotedLabelComponent,
 } from "./ProposalLabels";
-import GovernanceRoutes from "./routes";
 
 export const ProposalHeader: React.FC<{
   proposalId: bigint;
@@ -78,16 +78,15 @@ const Title: React.FC<{
 
 const Breadcrumbs: React.FC<{ proposalId: bigint }> = ({ proposalId }) => (
   <div className="text-xxs text-neutral-500">
-    <Link
-      className="transition-colors hover:text-white"
-      to={GovernanceRoutes.index()}
-    >
+    <Link className="transition-colors hover:text-white" to={routes.governance}>
       Governance
     </Link>{" "}
     /&nbsp;
     <Link
       className="transition-colors hover:text-white"
-      to={GovernanceRoutes.proposal(proposalId).url}
+      to={generatePath(routes.governanceProposal, {
+        proposalId: proposalId.toString(),
+      })}
     >
       Proposal {proposalIdToString(proposalId)}
     </Link>
@@ -96,7 +95,7 @@ const Breadcrumbs: React.FC<{ proposalId: bigint }> = ({ proposalId }) => (
 
 const BackButton: React.FC = () => (
   <Link
-    to={GovernanceRoutes.index()}
+    to={routes.governance}
     className={clsx(
       "inline-flex items-center text-xxs gap-1",
       "text-neutral-200 bg-neutral-900 my-2 px-2 py-0.5 rounded-sm",
@@ -125,7 +124,9 @@ const JsonButton: React.FC<{
       className="px-3 py-2"
       size="xs"
       outlineColor="white"
-      href={GovernanceRoutes.viewJson(proposalId).url}
+      href={generatePath(routes.governanceJson, {
+        proposalId: proposalId.toString(),
+      })}
     >
       <span className="flex text-xs justify-between gap-2">
         <VscJson />
@@ -320,7 +321,12 @@ const VoteButton: React.FC<{
 
       return {
         disabled,
-        onClick: () => navigate(GovernanceRoutes.submitVote(proposalId).url),
+        onClick: () =>
+          navigate(
+            generatePath(routes.governanceSubmitVote, {
+              proposalId: proposalId.toString(),
+            })
+          ),
         text,
       };
     }
diff --git a/apps/namadillo/src/App/Governance/UpcomingProposals.tsx b/apps/namadillo/src/App/Governance/UpcomingProposals.tsx
index fe78eee4d..bc8e4d72d 100644
--- a/apps/namadillo/src/App/Governance/UpcomingProposals.tsx
+++ b/apps/namadillo/src/App/Governance/UpcomingProposals.tsx
@@ -1,9 +1,9 @@
 import { SegmentedBar, Stack } from "@namada/components";
-import GovernanceRoutes from "./routes";
 
 import { Proposal } from "@namada/types";
+import { routes } from "App/routes";
 import clsx from "clsx";
-import { useNavigate } from "react-router-dom";
+import { generatePath, useNavigate } from "react-router-dom";
 import { StatusLabel, TypeLabel } from "./ProposalLabels";
 
 const ProposalListItem: React.FC<{
@@ -22,7 +22,13 @@ const ProposalListItem: React.FC<{
     <Stack
       as="li"
       gap={3}
-      onClick={() => navigate(GovernanceRoutes.proposal(proposal.id).url)}
+      onClick={() =>
+        navigate(
+          generatePath(routes.governanceProposal, {
+            proposalId: proposal.id.toString(),
+          })
+        )
+      }
       className={clsx(
         "group/proposal cursor-pointer text-sm",
         "rounded-md bg-[#191919] p-4"
diff --git a/apps/namadillo/src/App/Governance/ViewJson.tsx b/apps/namadillo/src/App/Governance/ViewJson.tsx
index 680155de5..ada5ae86c 100644
--- a/apps/namadillo/src/App/Governance/ViewJson.tsx
+++ b/apps/namadillo/src/App/Governance/ViewJson.tsx
@@ -1,16 +1,16 @@
 import { useAtomValue } from "jotai";
-import { useNavigate } from "react-router-dom";
+import { generatePath, useNavigate } from "react-router-dom";
 
 import { Modal } from "@namada/components";
 import { PgfTarget, Proposal } from "@namada/types";
 import { assertNever, copyToClipboard } from "@namada/utils";
 import { ModalContainer } from "App/Common/ModalContainer";
+import { routes } from "App/routes";
 import { proposalFamily } from "atoms/proposals";
 import clsx from "clsx";
 import { useProposalIdParam } from "hooks";
 import { useState } from "react";
 import { GoCheck, GoCopy } from "react-icons/go";
-import GovernanceRoutes from "./routes";
 
 type DefaultData = Uint8Array;
 
@@ -142,7 +142,11 @@ export const ViewJson: React.FC = () => {
   }
 
   const onCloseModal = (): void =>
-    navigate(GovernanceRoutes.proposal(proposalId).url);
+    navigate(
+      generatePath(routes.governanceProposal, {
+        proposalId: proposalId.toString(),
+      })
+    );
 
   return (
     <Modal onClose={onCloseModal}>
diff --git a/apps/namadillo/src/App/Governance/index.ts b/apps/namadillo/src/App/Governance/index.ts
deleted file mode 100644
index 27f9db425..000000000
--- a/apps/namadillo/src/App/Governance/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { Governance } from "./Governance";
diff --git a/apps/namadillo/src/App/Governance/routes.ts b/apps/namadillo/src/App/Governance/routes.ts
deleted file mode 100644
index 016a3a472..000000000
--- a/apps/namadillo/src/App/Governance/routes.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { createRouteOutput, RouteOutput } from "utils/routes";
-
-export const index = (): string => `/governance`;
-
-const routeOutput = createRouteOutput(index);
-
-export const overview = (): RouteOutput => routeOutput(`/`);
-
-export const proposal = (proposalId?: bigint): RouteOutput =>
-  routeOutput(`/proposal/${proposalIdString(proposalId)}`);
-
-export const submitVote = (proposalId?: bigint): RouteOutput =>
-  routeOutput(`/submit-vote/${proposalIdString(proposalId)}`);
-
-export const viewJson = (proposalId?: bigint): RouteOutput =>
-  routeOutput(`/json/${proposalIdString(proposalId)}`);
-
-const proposalIdString = (proposalId?: bigint): string =>
-  typeof proposalId === "undefined" ? ":proposalId" : proposalId.toString();
-
-export default {
-  index,
-  overview,
-  proposal,
-  submitVote,
-  viewJson,
-};
diff --git a/apps/namadillo/src/App/Ibc/IbcLayout.tsx b/apps/namadillo/src/App/Ibc/IbcLayout.tsx
new file mode 100644
index 000000000..955a8c697
--- /dev/null
+++ b/apps/namadillo/src/App/Ibc/IbcLayout.tsx
@@ -0,0 +1,14 @@
+import { PageWithSidebar } from "App/Common/PageWithSidebar";
+import { ShieldAllBanner } from "App/Sidebars/ShieldAllBanner";
+import { Outlet } from "react-router-dom";
+
+export const IbcLayout: React.FC = () => {
+  return (
+    <PageWithSidebar>
+      <Outlet />
+      <aside className="w-full mt-2 flex flex-col sm:flex-row lg:mt-0 lg:flex-col gap-2">
+        <ShieldAllBanner />
+      </aside>
+    </PageWithSidebar>
+  );
+};
diff --git a/apps/namadillo/src/App/Ibc/IbcShieldAll.tsx b/apps/namadillo/src/App/Ibc/IbcShieldAll.tsx
new file mode 100644
index 000000000..c1f0507e9
--- /dev/null
+++ b/apps/namadillo/src/App/Ibc/IbcShieldAll.tsx
@@ -0,0 +1,9 @@
+import { Panel } from "@namada/components";
+
+export const IbcShieldAll: React.FC = () => {
+  return (
+    <Panel>
+      <div className="text-yellow">IBC: ShieldAll (WIP)</div>
+    </Panel>
+  );
+};
diff --git a/apps/namadillo/src/App/Ibc/Ibc.tsx b/apps/namadillo/src/App/Ibc/IbcTransfer.tsx
similarity index 99%
rename from apps/namadillo/src/App/Ibc/Ibc.tsx
rename to apps/namadillo/src/App/Ibc/IbcTransfer.tsx
index e3be5b628..ca2e5e704 100644
--- a/apps/namadillo/src/App/Ibc/Ibc.tsx
+++ b/apps/namadillo/src/App/Ibc/IbcTransfer.tsx
@@ -20,7 +20,7 @@ const rpc = "https://rpc-t.cosmos.nodestake.top";
 
 const buttonStyles = "bg-white my-2 p-2 block";
 
-export const Ibc: React.FC = () => {
+export const IbcTransfer: React.FC = () => {
   const [error, setError] = useState("");
   const [address, setAddress] = useState("");
   const [alias, setAlias] = useState("");
diff --git a/apps/namadillo/src/App/Ibc/IbcWithdraw.tsx b/apps/namadillo/src/App/Ibc/IbcWithdraw.tsx
new file mode 100644
index 000000000..760440d2c
--- /dev/null
+++ b/apps/namadillo/src/App/Ibc/IbcWithdraw.tsx
@@ -0,0 +1,9 @@
+import { Panel } from "@namada/components";
+
+export const IbcWithdraw: React.FC = () => {
+  return (
+    <Panel>
+      <div className="text-yellow">IBC: Withdraw (WIP)</div>
+    </Panel>
+  );
+};
diff --git a/apps/namadillo/src/App/Ibc/index.ts b/apps/namadillo/src/App/Ibc/index.ts
deleted file mode 100644
index 863deea33..000000000
--- a/apps/namadillo/src/App/Ibc/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { Ibc } from "./Ibc";
diff --git a/apps/namadillo/src/App/Ibc/routes.ts b/apps/namadillo/src/App/Ibc/routes.ts
deleted file mode 100644
index 369def705..000000000
--- a/apps/namadillo/src/App/Ibc/routes.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export const index = (): string => `/ibc`;
-
-export default {
-  index,
-};
diff --git a/apps/namadillo/src/App/Layout/ActiveAccount.tsx b/apps/namadillo/src/App/Layout/ActiveAccount.tsx
index 125b0b5df..9e492a9ed 100644
--- a/apps/namadillo/src/App/Layout/ActiveAccount.tsx
+++ b/apps/namadillo/src/App/Layout/ActiveAccount.tsx
@@ -1,5 +1,5 @@
 import { CopyToClipboardControl, Tooltip } from "@namada/components";
-import SwitchAccountRoutes from "App/SwitchAccount/routes";
+import { routes } from "App/routes";
 import { defaultAccountAtom, disconnectAccountAtom } from "atoms/accounts";
 import clsx from "clsx";
 import { useAtomValue } from "jotai";
@@ -39,7 +39,7 @@ export const ActiveAccount = (): JSX.Element => {
         <button
           className={buttonClassName}
           onClick={() => {
-            navigate(SwitchAccountRoutes.index(), {
+            navigate(routes.switchAccount, {
               state: { backgroundLocation: location },
             });
           }}
diff --git a/apps/namadillo/src/App/Layout/AppHeader.tsx b/apps/namadillo/src/App/Layout/AppHeader.tsx
index 3eb156ed8..1358629b1 100644
--- a/apps/namadillo/src/App/Layout/AppHeader.tsx
+++ b/apps/namadillo/src/App/Layout/AppHeader.tsx
@@ -1,3 +1,4 @@
+import { routes } from "App/routes";
 import { ReactNode } from "react";
 import { Link } from "react-router-dom";
 import { twMerge } from "tailwind-merge";
@@ -17,7 +18,7 @@ export const AppHeader = ({ burger }: { burger: ReactNode }): JSX.Element => {
       <div className="flex items-center gap-4">
         <span className="sm:px-0 lg:hidden">{burger}</span>
         <Link
-          to={"/"}
+          to={routes.root}
           className={twMerge(
             "flex items-center gap-3",
             "text-yellow text-xl font-medium uppercase"
diff --git a/apps/namadillo/src/App/Layout/Navigation.tsx b/apps/namadillo/src/App/Layout/Navigation.tsx
index ce78d7e0c..63fc33261 100644
--- a/apps/namadillo/src/App/Layout/Navigation.tsx
+++ b/apps/namadillo/src/App/Layout/Navigation.tsx
@@ -1,6 +1,7 @@
 import { SidebarMenuItem } from "App/Common/SidebarMenuItem";
-import GovernanceRoutes from "App/Governance/routes";
 import { MASPIcon } from "App/Icons/MASPIcon";
+import { routes } from "App/routes";
+import { applicationFeaturesAtom } from "atoms/settings";
 import { useAtomValue } from "jotai";
 import { AiFillHome } from "react-icons/ai";
 import { BsDiscord, BsTwitterX } from "react-icons/bs";
@@ -10,11 +11,6 @@ import { IoSwapHorizontal } from "react-icons/io5";
 import { TbVectorTriangle } from "react-icons/tb";
 import { DISCORD_URL, TWITTER_URL } from "urls";
 
-import IbcRoutes from "App/Ibc/routes";
-import StakingRoutes from "App/Staking/routes";
-import TransferRoutes from "App/Transfer/routes";
-import { applicationFeaturesAtom } from "atoms/settings";
-
 export const Navigation = (): JSX.Element => {
   const features = useAtomValue(applicationFeaturesAtom);
 
@@ -22,31 +18,32 @@ export const Navigation = (): JSX.Element => {
     {
       label: "Overview",
       icon: <AiFillHome />,
-      url: "/",
+      url: routes.root,
     },
     {
       label: "Staking",
       icon: <GoStack />,
-      url: StakingRoutes.index(),
+      url: routes.staking,
     },
     {
       label: "Governance",
       icon: <FaVoteYea />,
-      url: GovernanceRoutes.index(),
+      url: routes.governance,
     },
     {
       label: "MASP",
       icon: <MASPIcon />,
-      url: features.maspEnabled ? TransferRoutes.masp().url : undefined,
+      url: features.maspEnabled ? routes.masp : undefined,
     },
     {
       label: "IBC Transfer",
       icon: <TbVectorTriangle />,
-      url: features.ibcTransfersEnabled ? IbcRoutes.index() : undefined,
+      url: features.ibcTransfersEnabled ? routes.ibc : undefined,
     },
     {
       label: "Transfer",
       icon: <IoSwapHorizontal />,
+      url: features.namTransfersEnabled ? routes.transfer : undefined,
     },
   ];
 
diff --git a/apps/namadillo/src/App/Layout/TopNavigation.tsx b/apps/namadillo/src/App/Layout/TopNavigation.tsx
index c9b9ef455..5aad127f0 100644
--- a/apps/namadillo/src/App/Layout/TopNavigation.tsx
+++ b/apps/namadillo/src/App/Layout/TopNavigation.tsx
@@ -1,7 +1,6 @@
 import { ActionButton } from "@namada/components";
 import { ConnectExtensionButton } from "App/Common/ConnectExtensionButton";
-import SettingsRoutes from "App/Settings/routes";
-import MessageRoutes from "App/SignMessages/routes";
+import { routes } from "App/routes";
 import {
   applicationFeaturesAtom,
   namadaExtensionConnectedAtom,
@@ -11,7 +10,6 @@ import { useAtomValue } from "jotai";
 import { AiOutlineMessage } from "react-icons/ai";
 import { IoSettingsOutline } from "react-icons/io5";
 import { useLocation, useNavigate } from "react-router-dom";
-import TransferRoutes from "../Transfer/routes";
 import { ActiveAccount } from "./ActiveAccount";
 import { SyncIndicator } from "./SyncIndicator";
 
@@ -37,7 +35,7 @@ export const TopNavigation = (): JSX.Element => {
       <div className="hidden lg:flex gap-2">
         {maspEnabled && (
           <ActionButton
-            href={TransferRoutes.shield().url}
+            href={routes.maspShield}
             size="sm"
             className="w-[140px]"
           >
@@ -46,7 +44,7 @@ export const TopNavigation = (): JSX.Element => {
         )}
         {namTransfersEnabled && (
           <ActionButton
-            href={TransferRoutes.namTransfer().url}
+            href={routes.transfer}
             size="sm"
             backgroundColor="white"
             className="w-[140px]"
@@ -61,7 +59,7 @@ export const TopNavigation = (): JSX.Element => {
       <button
         className="text-2xl text-yellow hover:text-cyan"
         onClick={() =>
-          navigate(SettingsRoutes.index(), {
+          navigate(routes.settings, {
             state: { backgroundLocation: location },
           })
         }
@@ -73,7 +71,7 @@ export const TopNavigation = (): JSX.Element => {
           className="text-2xl text-yellow hover:text-cyan"
           title="Sign Message"
           onClick={() =>
-            navigate(MessageRoutes.index(), {
+            navigate(routes.signMessages, {
               state: { backgroundLocation: location },
             })
           }
diff --git a/apps/namadillo/src/App/Masp/MaspLayout.tsx b/apps/namadillo/src/App/Masp/MaspLayout.tsx
new file mode 100644
index 000000000..f8dbd26d3
--- /dev/null
+++ b/apps/namadillo/src/App/Masp/MaspLayout.tsx
@@ -0,0 +1,14 @@
+import { PageWithSidebar } from "App/Common/PageWithSidebar";
+import { ShieldAllBanner } from "App/Sidebars/ShieldAllBanner";
+import { Outlet } from "react-router-dom";
+
+export const MaspLayout: React.FC = () => {
+  return (
+    <PageWithSidebar>
+      <Outlet />
+      <aside className="w-full mt-2 flex flex-col sm:flex-row lg:mt-0 lg:flex-col gap-2">
+        <ShieldAllBanner />
+      </aside>
+    </PageWithSidebar>
+  );
+};
diff --git a/apps/namadillo/src/App/Masp/MaspOverview.tsx b/apps/namadillo/src/App/Masp/MaspOverview.tsx
new file mode 100644
index 000000000..d1842fcc2
--- /dev/null
+++ b/apps/namadillo/src/App/Masp/MaspOverview.tsx
@@ -0,0 +1,40 @@
+import { Panel } from "@namada/components";
+import { ConnectBanner } from "App/Common/ConnectBanner";
+import { namadaExtensionConnectedAtom } from "atoms/settings";
+import { useUserHasAccount } from "hooks/useUserHasAccount";
+import { useAtomValue } from "jotai";
+import { ShieldedBalanceChart } from "./ShieldedBalanceChart";
+import { ShieldedNamBalance } from "./ShieldedNamBalance";
+import { ShieldedOverviewPanel } from "./ShieldedOverviewPanel";
+
+export const MaspOverview: React.FC = () => {
+  const hasAccount = useUserHasAccount();
+  const isConnected = useAtomValue(namadaExtensionConnectedAtom);
+
+  return (
+    <div className="flex flex-col gap-2">
+      {!isConnected && (
+        <ConnectBanner text="To shield assets please connect your account" />
+      )}
+      {isConnected && hasAccount === false && (
+        <ConnectBanner text="To shield assets please create or import an account using Namada keychain" />
+      )}
+      {isConnected && hasAccount && (
+        <div className="flex flex-col sm:grid sm:grid-cols-[2fr_3fr] gap-2">
+          <Panel>
+            <ShieldedBalanceChart />
+          </Panel>
+          <Panel>
+            <ShieldedNamBalance />
+          </Panel>
+        </div>
+      )}
+      <Panel
+        className="relative pb-6 border border-yellow"
+        title="Shielded Overview"
+      >
+        <ShieldedOverviewPanel />
+      </Panel>
+    </div>
+  );
+};
diff --git a/apps/namadillo/src/App/Masp/MaspShield.tsx b/apps/namadillo/src/App/Masp/MaspShield.tsx
new file mode 100644
index 000000000..d512a61a5
--- /dev/null
+++ b/apps/namadillo/src/App/Masp/MaspShield.tsx
@@ -0,0 +1,9 @@
+import { Panel } from "@namada/components";
+
+export const MaspShield: React.FC = () => {
+  return (
+    <Panel>
+      <div className="text-yellow">MASP: Shield (WIP)</div>
+    </Panel>
+  );
+};
diff --git a/apps/namadillo/src/App/Masp/MaspUnshield.tsx b/apps/namadillo/src/App/Masp/MaspUnshield.tsx
new file mode 100644
index 000000000..526ece4b5
--- /dev/null
+++ b/apps/namadillo/src/App/Masp/MaspUnshield.tsx
@@ -0,0 +1,9 @@
+import { Panel } from "@namada/components";
+
+export const MaspUnshield: React.FC = () => {
+  return (
+    <Panel>
+      <div className="text-yellow">MASP: Unshield (WIP)</div>
+    </Panel>
+  );
+};
diff --git a/apps/namadillo/src/App/Transfer/ShieldedBalanceChart.tsx b/apps/namadillo/src/App/Masp/ShieldedBalanceChart.tsx
similarity index 100%
rename from apps/namadillo/src/App/Transfer/ShieldedBalanceChart.tsx
rename to apps/namadillo/src/App/Masp/ShieldedBalanceChart.tsx
diff --git a/apps/namadillo/src/App/Transfer/ShieldedFungibleTable.tsx b/apps/namadillo/src/App/Masp/ShieldedFungibleTable.tsx
similarity index 94%
rename from apps/namadillo/src/App/Transfer/ShieldedFungibleTable.tsx
rename to apps/namadillo/src/App/Masp/ShieldedFungibleTable.tsx
index d1c93b236..4e5c11365 100644
--- a/apps/namadillo/src/App/Transfer/ShieldedFungibleTable.tsx
+++ b/apps/namadillo/src/App/Masp/ShieldedFungibleTable.tsx
@@ -3,6 +3,7 @@ import { formatPercentage } from "@namada/utils";
 import { AtomErrorBoundary } from "App/Common/AtomErrorBoundary";
 import { NamCurrency } from "App/Common/NamCurrency";
 import { TableWithPaginator } from "App/Common/TableWithPaginator";
+import { routes } from "App/routes";
 import BigNumber from "bignumber.js";
 import { AtomWithQueryResult } from "jotai-tanstack-query";
 import { useEffect, useState } from "react";
@@ -84,6 +85,7 @@ export const ShieldedFungibleTable = (): JSX.Element => {
           size="xs"
           outlineColor="white"
           className="w-fit mx-auto"
+          href={token.name === "NAM" ? routes.maspUnshield : routes.ibcWithdraw}
         >
           Unshield
         </ActionButton>,
@@ -116,14 +118,7 @@ export const ShieldedFungibleTable = (): JSX.Element => {
       niceError="Unable to load your validators list"
       containerProps={{ className: "pb-16" }}
     >
-      <ActionButton
-        size="xs"
-        outlineColor="white"
-        className="w-fit ml-auto mt-6"
-      >
-        Unshield ALL
-      </ActionButton>
-      <div className="text-sm font-medium">
+      <div className="text-sm font-medium mt-6">
         <span className="text-yellow">{list.length} </span>
         Tokens
       </div>
diff --git a/apps/namadillo/src/App/Transfer/ShieldedNFTTable.tsx b/apps/namadillo/src/App/Masp/ShieldedNFTTable.tsx
similarity index 100%
rename from apps/namadillo/src/App/Transfer/ShieldedNFTTable.tsx
rename to apps/namadillo/src/App/Masp/ShieldedNFTTable.tsx
diff --git a/apps/namadillo/src/App/Transfer/ShieldedNamBalance.tsx b/apps/namadillo/src/App/Masp/ShieldedNamBalance.tsx
similarity index 100%
rename from apps/namadillo/src/App/Transfer/ShieldedNamBalance.tsx
rename to apps/namadillo/src/App/Masp/ShieldedNamBalance.tsx
diff --git a/apps/namadillo/src/App/Transfer/ShieldedOverviewPanel.tsx b/apps/namadillo/src/App/Masp/ShieldedOverviewPanel.tsx
similarity index 100%
rename from apps/namadillo/src/App/Transfer/ShieldedOverviewPanel.tsx
rename to apps/namadillo/src/App/Masp/ShieldedOverviewPanel.tsx
diff --git a/apps/namadillo/src/App/Transfer/assets/nam-balance-icon.png b/apps/namadillo/src/App/Masp/assets/nam-balance-icon.png
similarity index 100%
rename from apps/namadillo/src/App/Transfer/assets/nam-balance-icon.png
rename to apps/namadillo/src/App/Masp/assets/nam-balance-icon.png
diff --git a/apps/namadillo/src/App/Masp/assets/namada-shielded.svg b/apps/namadillo/src/App/Masp/assets/namada-shielded.svg
new file mode 100644
index 000000000..8d1e160ab
--- /dev/null
+++ b/apps/namadillo/src/App/Masp/assets/namada-shielded.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 44 43"><circle cx="22.074" cy="21.637" r="21.143" fill="#FF0"/><g fill="#262626"><path d="M28.02 21.636h-5.732v5.732h5.732v-5.732ZM16.552 15.901a5.735 5.735 0 0 1 5.732 5.732h-5.732v-5.732ZM16.551 21.636l-3.31 5.732h6.62l-3.31-5.732ZM28.04 21.632a2.864 2.864 0 1 0 0-5.729 2.864 2.864 0 0 0 0 5.729Z"/><path d="M22.074 36.963a15.228 15.228 0 0 1-10.839-4.49 15.227 15.227 0 0 1-4.49-10.838c0-4.094 1.595-7.944 4.49-10.839a15.228 15.228 0 0 1 10.84-4.49c4.094 0 7.943 1.595 10.838 4.49a15.228 15.228 0 0 1 4.49 10.839c0 4.095-1.595 7.944-4.49 10.839a15.228 15.228 0 0 1-10.839 4.49v-.001Zm0-28.757c-3.587 0-6.959 1.397-9.495 3.933a13.34 13.34 0 0 0-3.934 9.496 13.34 13.34 0 0 0 3.934 9.496 13.34 13.34 0 0 0 9.495 3.933c3.587 0 6.96-1.397 9.496-3.933a13.341 13.341 0 0 0 3.933-9.496c0-3.587-1.397-6.96-3.933-9.496a13.341 13.341 0 0 0-9.496-3.933Z"/></g></svg>
diff --git a/apps/namadillo/src/App/Settings/SettingsMain.tsx b/apps/namadillo/src/App/Settings/SettingsMain.tsx
index c9768dec6..480a5a7ab 100644
--- a/apps/namadillo/src/App/Settings/SettingsMain.tsx
+++ b/apps/namadillo/src/App/Settings/SettingsMain.tsx
@@ -1,17 +1,14 @@
+import { routes } from "App/routes";
 import { version } from "../../../package.json";
 import { SettingsPanelMenuItem } from "./SettingsPanelMenuItem";
-import SettingsRoutes from "./routes";
 
 export const SettingsMain = (): JSX.Element => {
   return (
     <div className="flex flex-1 justify-between flex-col">
       <ul className="flex flex-col gap-2">
+        <SettingsPanelMenuItem url={routes.settingsAdvanced} text="Advanced" />
         <SettingsPanelMenuItem
-          url={`${SettingsRoutes.advanced().url}`}
-          text="Advanced"
-        />
-        <SettingsPanelMenuItem
-          url={`${SettingsRoutes.signArbitrary().url}`}
+          url={routes.settingsSignArbitrary}
           text="Sign Arbitrary"
         />
       </ul>
diff --git a/apps/namadillo/src/App/Settings/SettingsPanel.tsx b/apps/namadillo/src/App/Settings/SettingsPanel.tsx
index 80a830bd8..c0de7eef9 100644
--- a/apps/namadillo/src/App/Settings/SettingsPanel.tsx
+++ b/apps/namadillo/src/App/Settings/SettingsPanel.tsx
@@ -1,15 +1,11 @@
 import { Modal } from "@namada/components";
 import { ModalTransition } from "App/Common/ModalTransition";
+import { routes } from "App/routes";
 import clsx from "clsx";
 import { useModalCloseEvent } from "hooks/useModalCloseEvent";
 import { FaChevronLeft } from "react-icons/fa6";
 import { IoClose } from "react-icons/io5";
-import { Route, Routes, useLocation, useNavigate } from "react-router-dom";
-import { Advanced } from "./Advanced";
-import { EnableFeatures } from "./EnableFeatures";
-import { SettingsMain } from "./SettingsMain";
-import { SettingsSignArbitrary } from "./SettingsSignArbitrary";
-import SettingsRoutes from "./routes";
+import { Outlet, useLocation, useNavigate } from "react-router-dom";
 
 export const SettingsPanel = (): JSX.Element => {
   const location = useLocation();
@@ -17,7 +13,7 @@ export const SettingsPanel = (): JSX.Element => {
   const { onCloseModal } = useModalCloseEvent();
 
   const onClickBack = (): void => {
-    navigate(SettingsRoutes.index(), { state: location.state });
+    navigate(routes.settings, { state: location.state });
   };
 
   return (
@@ -44,7 +40,7 @@ export const SettingsPanel = (): JSX.Element => {
             >
               <IoClose />
             </button>
-            {location.pathname !== SettingsRoutes.index() && (
+            {location.pathname !== routes.settings && (
               <button
                 className="absolute left-0 top-0 flex items-center h-full text-lg hover:text-yellow"
                 onClick={onClickBack}
@@ -54,21 +50,7 @@ export const SettingsPanel = (): JSX.Element => {
             )}
           </header>
           <div className="flex flex-1 overflow-auto dark-scrollbar">
-            <Routes>
-              <Route index element={<SettingsMain />} />
-              <Route
-                path={`${SettingsRoutes.signArbitrary()}`}
-                element={<SettingsSignArbitrary />}
-              />
-              <Route
-                path={`${SettingsRoutes.advanced()}`}
-                element={<Advanced />}
-              />
-              <Route
-                path={`${SettingsRoutes.features()}`}
-                element={<EnableFeatures />}
-              />
-            </Routes>
+            <Outlet />
           </div>
         </div>
       </ModalTransition>
diff --git a/apps/namadillo/src/App/Settings/routes.ts b/apps/namadillo/src/App/Settings/routes.ts
deleted file mode 100644
index def0bbfe1..000000000
--- a/apps/namadillo/src/App/Settings/routes.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { RouteOutput, createRouteOutput } from "utils/routes";
-
-export const index = (): string => "/settings";
-
-export const routeOutput = createRouteOutput(index);
-
-export const currencySelection = (): RouteOutput => routeOutput("/currency");
-
-export const advanced = (): RouteOutput => routeOutput("/advanced");
-
-export const features = (): RouteOutput => routeOutput("/features");
-
-export const signArbitrary = (): RouteOutput => routeOutput("/sign-arbitrary");
-
-export default { index, currencySelection, advanced, signArbitrary, features };
diff --git a/apps/namadillo/src/App/Setup/ChainLoader.tsx b/apps/namadillo/src/App/Setup/ChainLoader.tsx
index b6ea79c9a..43a087424 100644
--- a/apps/namadillo/src/App/Setup/ChainLoader.tsx
+++ b/apps/namadillo/src/App/Setup/ChainLoader.tsx
@@ -1,6 +1,6 @@
 import { AtomErrorBoundary } from "App/Common/AtomErrorBoundary";
 import { ErrorBox } from "App/Common/ErrorBox";
-import SettingsRoutes from "App/Settings/routes";
+import { routes } from "App/routes";
 import { chainAtom } from "atoms/chain";
 import { useAtomValue } from "jotai";
 import { ReactNode } from "react";
@@ -15,7 +15,7 @@ const UpdateSettingsButton = (): JSX.Element => {
     <button
       className="text-yellow hover:text-cyan"
       onClick={() => {
-        navigate(SettingsRoutes.advanced().url, {
+        navigate(routes.settingsAdvanced, {
           state: { backgroundLocation: location },
         });
       }}
diff --git a/apps/namadillo/src/App/Sidebars/ShieldAllBanner.tsx b/apps/namadillo/src/App/Sidebars/ShieldAllBanner.tsx
index 3d228cbd8..bac62f5a7 100644
--- a/apps/namadillo/src/App/Sidebars/ShieldAllBanner.tsx
+++ b/apps/namadillo/src/App/Sidebars/ShieldAllBanner.tsx
@@ -1,6 +1,6 @@
 import { ActionButton } from "@namada/components";
 import svgImg from "App/Assets/ShieldedParty.svg";
-import TransferRoutes from "App/Transfer/routes";
+import { routes } from "App/routes";
 import { useState } from "react";
 import { Link } from "react-router-dom";
 import { twMerge } from "tailwind-merge";
@@ -24,7 +24,7 @@ export const ShieldAllBanner = (): JSX.Element => {
         src={`${svgImg}${isAnimating ? "#hover " : ""}`}
       />
       <Link
-        to={TransferRoutes.shieldAll().url}
+        to={routes.ibcShieldAll}
         onMouseEnter={() => setIsAnimating(true)}
         onMouseLeave={() => setIsAnimating(false)}
       >
diff --git a/apps/namadillo/src/App/SignMessages/SignMessages.tsx b/apps/namadillo/src/App/SignMessages/SignMessages.tsx
index 57f7edb70..933764c8f 100644
--- a/apps/namadillo/src/App/SignMessages/SignMessages.tsx
+++ b/apps/namadillo/src/App/SignMessages/SignMessages.tsx
@@ -1,5 +1,6 @@
 import { ActionButton, Input, Modal, Stack } from "@namada/components";
 import { ModalContainer } from "App/Common/ModalContainer";
+import { routes } from "App/routes";
 import { arbitraryMessagesAtom } from "atoms/arbitraryMessages";
 import { signArbitraryEnabledAtom } from "atoms/settings";
 import { useModalCloseEvent } from "hooks/useModalCloseEvent";
@@ -23,7 +24,7 @@ export const SignMessages = (): JSX.Element => {
 
   useEffect(() => {
     if (!signArbitraryEnabled) {
-      navigate("/", { replace: true });
+      navigate(routes.root, { replace: true });
     }
   }, [signArbitraryEnabled]);
 
diff --git a/apps/namadillo/src/App/SignMessages/routes.ts b/apps/namadillo/src/App/SignMessages/routes.ts
deleted file mode 100644
index 3eff64fdb..000000000
--- a/apps/namadillo/src/App/SignMessages/routes.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export const index = (): string => `/sign-messages`;
-export default {
-  index,
-};
diff --git a/apps/namadillo/src/App/Staking/AllValidatorsTable.tsx b/apps/namadillo/src/App/Staking/AllValidatorsTable.tsx
index f215cbc88..edb1883d5 100644
--- a/apps/namadillo/src/App/Staking/AllValidatorsTable.tsx
+++ b/apps/namadillo/src/App/Staking/AllValidatorsTable.tsx
@@ -5,6 +5,7 @@ import { NamCurrency } from "App/Common/NamCurrency";
 import { Search } from "App/Common/Search";
 import { TableRowLoading } from "App/Common/TableRowLoading";
 import { WalletAddress } from "App/Common/WalletAddress";
+import { routes } from "App/routes";
 import { namadaExtensionConnectedAtom } from "atoms/settings";
 import { atomsAreLoading, atomsAreNotInitialized } from "atoms/utils";
 import { allValidatorsAtom } from "atoms/validators";
@@ -18,7 +19,6 @@ import { Validator } from "types";
 import { ValidatorAlias } from "./ValidatorAlias";
 import { ValidatorThumb } from "./ValidatorThumb";
 import { ValidatorsTable } from "./ValidatorsTable";
-import StakingRoutes from "./routes";
 
 type AllValidatorsProps = {
   resultsPerPage?: number;
@@ -121,7 +121,7 @@ export const AllValidatorsTable = ({
             <ActionButton
               size="sm"
               backgroundColor="cyan"
-              href={StakingRoutes.incrementBonding().url}
+              href={routes.stakingBondingIncrement}
             >
               Stake
             </ActionButton>
diff --git a/apps/namadillo/src/App/Staking/AmountField.tsx b/apps/namadillo/src/App/Staking/AmountField.tsx
index e6a4dd5f2..6c55e26dd 100644
--- a/apps/namadillo/src/App/Staking/AmountField.tsx
+++ b/apps/namadillo/src/App/Staking/AmountField.tsx
@@ -1,5 +1,5 @@
 import { NamInput, NamInputProps } from "App/Common/NamInput";
-import StakingRoutes from "App/Staking/routes";
+import { routes } from "App/routes";
 import clsx from "clsx";
 import { Link } from "react-router-dom";
 import { twMerge } from "tailwind-merge";
@@ -68,10 +68,7 @@ export const AmountField = ({
         {isInactive && hasStakedAmounts && (
           <p>
             Validator is inactive please{" "}
-            <Link
-              to={StakingRoutes.redelegateBonding().url}
-              className="underline"
-            >
+            <Link to={routes.stakingBondingRedelegate} className="underline">
               redelegate
             </Link>{" "}
             your stake
diff --git a/apps/namadillo/src/App/Staking/IncrementBonding.tsx b/apps/namadillo/src/App/Staking/IncrementBonding.tsx
index 51a70b0c0..5524da130 100644
--- a/apps/namadillo/src/App/Staking/IncrementBonding.tsx
+++ b/apps/namadillo/src/App/Staking/IncrementBonding.tsx
@@ -6,6 +6,7 @@ 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 { routes } from "App/routes";
 import { accountBalanceAtom, defaultAccountAtom } from "atoms/accounts";
 import { chainParametersAtom } from "atoms/chain";
 import { createBondTxAtom } from "atoms/staking";
@@ -23,7 +24,6 @@ import { ValidatorFilterOptions } from "types";
 import { BondingAmountOverview } from "./BondingAmountOverview";
 import { IncrementBondingTable } from "./IncrementBondingTable";
 import { ValidatorFilterNav } from "./ValidatorFilterNav";
-import StakingRoutes from "./routes";
 
 const IncrementBonding = (): JSX.Element => {
   const [filter, setFilter] = useState<string>("");
@@ -60,7 +60,7 @@ const IncrementBonding = (): JSX.Element => {
       .filter((entries) => entries.amount.gt(0));
   };
 
-  const onCloseModal = (): void => navigate(StakingRoutes.overview().url);
+  const onCloseModal = (): void => navigate(routes.staking);
 
   const {
     execute: performBonding,
diff --git a/apps/namadillo/src/App/Staking/MyValidatorsTable.tsx b/apps/namadillo/src/App/Staking/MyValidatorsTable.tsx
index 355d579d9..c09c19b2e 100644
--- a/apps/namadillo/src/App/Staking/MyValidatorsTable.tsx
+++ b/apps/namadillo/src/App/Staking/MyValidatorsTable.tsx
@@ -3,6 +3,7 @@ import { formatPercentage } from "@namada/utils";
 import { AtomErrorBoundary } from "App/Common/AtomErrorBoundary";
 import { NamCurrency } from "App/Common/NamCurrency";
 import { WalletAddress } from "App/Common/WalletAddress";
+import { routes } from "App/routes";
 import { myValidatorsAtom } from "atoms/validators";
 import BigNumber from "bignumber.js";
 import { useValidatorTableSorting } from "hooks/useValidatorTableSorting";
@@ -10,7 +11,6 @@ import { useAtomValue } from "jotai";
 import { Address, MyValidator, Validator } from "types";
 import { ValidatorCard } from "./ValidatorCard";
 import { ValidatorsTable } from "./ValidatorsTable";
-import StakingRoutes from "./routes";
 
 export const MyValidatorsTable = (): JSX.Element => {
   const myValidators = useAtomValue(myValidatorsAtom);
@@ -108,7 +108,7 @@ export const MyValidatorsTable = (): JSX.Element => {
           className="basis-[content] py-1"
           backgroundColor="cyan"
           size="md"
-          href={StakingRoutes.incrementBonding().url}
+          href={routes.stakingBondingIncrement}
         >
           Stake
         </ActionButton>
@@ -116,7 +116,7 @@ export const MyValidatorsTable = (): JSX.Element => {
           className="basis-[content] py-1"
           backgroundColor="white"
           size="md"
-          href={StakingRoutes.redelegateBonding().url}
+          href={routes.stakingBondingRedelegate}
         >
           Redelegate
         </ActionButton>
@@ -128,7 +128,7 @@ export const MyValidatorsTable = (): JSX.Element => {
           textHoverColor="white"
           backgroundHoverColor="pink"
           size="md"
-          href={StakingRoutes.unstake().url}
+          href={routes.stakingBondingUnstake}
         >
           Unstake
         </ActionButton>
diff --git a/apps/namadillo/src/App/Staking/ReDelegate.tsx b/apps/namadillo/src/App/Staking/ReDelegate.tsx
index f220cef01..2808ca25d 100644
--- a/apps/namadillo/src/App/Staking/ReDelegate.tsx
+++ b/apps/namadillo/src/App/Staking/ReDelegate.tsx
@@ -2,6 +2,7 @@ import { ActionButton, Alert, Modal, Panel } from "@namada/components";
 import { RedelegateMsgValue } from "@namada/types";
 import { Info } from "App/Common/Info";
 import { ModalContainer } from "App/Common/ModalContainer";
+import { routes } from "App/routes";
 import { defaultAccountAtom } from "atoms/accounts";
 import { createReDelegateTxAtom } from "atoms/staking";
 import { allValidatorsAtom } from "atoms/validators";
@@ -18,7 +19,6 @@ import { AddressBalance, Validator } from "types";
 import { BondingAmountOverview } from "./BondingAmountOverview";
 import { ReDelegateAssignStake } from "./ReDelegateAssignStake";
 import { ReDelegateRemoveStake } from "./ReDelegateRemoveStake";
-import StakingRoutes from "./routes";
 
 export const ReDelegate = (): JSX.Element => {
   const [step, setStep] = useState<"remove" | "assign">("remove");
@@ -51,7 +51,7 @@ export const ReDelegate = (): JSX.Element => {
     );
   };
 
-  const onCloseModal = (): void => navigate(StakingRoutes.overview().url);
+  const onCloseModal = (): void => navigate(routes.staking);
 
   const {
     execute: performRedelegate,
@@ -169,7 +169,7 @@ export const ReDelegate = (): JSX.Element => {
                 backgroundColor="white"
                 backgroundHoverColor="pink"
                 size="sm"
-                href={StakingRoutes.unstake().url}
+                href={routes.stakingBondingUnstake}
               >
                 Unstake
               </ActionButton>
diff --git a/apps/namadillo/src/App/Staking/Staking.tsx b/apps/namadillo/src/App/Staking/Staking.tsx
deleted file mode 100644
index 3d7ceb69e..000000000
--- a/apps/namadillo/src/App/Staking/Staking.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { minimumGasPriceAtom } from "atoms/fees";
-import { useAtomValue } from "jotai";
-import { Route, Routes, useLocation } from "react-router-dom";
-import IncrementBonding from "./IncrementBonding";
-import { ReDelegate } from "./ReDelegate";
-import { StakingOverview } from "./StakingOverview";
-import Unstake from "./Unstake";
-import StakingRoutes from "./routes";
-
-export const Staking = (): JSX.Element => {
-  const location = useLocation();
-  useAtomValue(minimumGasPriceAtom);
-
-  return (
-    <main className="w-full">
-      <Routes>
-        <Route path="/*" element={<StakingOverview />} />
-      </Routes>
-      <Routes location={location} key={location.pathname}>
-        <Route
-          path={`${StakingRoutes.incrementBonding()}`}
-          element={<IncrementBonding />}
-        />
-        <Route path={`${StakingRoutes.unstake()}`} element={<Unstake />} />
-        <Route
-          path={`${StakingRoutes.redelegateBonding()}`}
-          element={<ReDelegate />}
-        />
-      </Routes>
-    </main>
-  );
-};
diff --git a/apps/namadillo/src/App/Staking/StakingRewardsPanel.tsx b/apps/namadillo/src/App/Staking/StakingRewardsPanel.tsx
index b78d34763..ce2ee4be4 100644
--- a/apps/namadillo/src/App/Staking/StakingRewardsPanel.tsx
+++ b/apps/namadillo/src/App/Staking/StakingRewardsPanel.tsx
@@ -1,6 +1,6 @@
 import { ActionButton, AmountSummaryCard } from "@namada/components";
 import { NamCurrency } from "App/Common/NamCurrency";
-import StakingRoutes from "App/Staking/routes";
+import { routes } from "App/routes";
 import { applicationFeaturesAtom } from "atoms/settings";
 import { claimableRewardsAtom } from "atoms/staking";
 import BigNumber from "bignumber.js";
@@ -49,7 +49,7 @@ export const StakingRewardsPanel = (): JSX.Element => {
           backgroundColor="white"
           disabled={!claimRewardsEnabled || availableRewards.eq(0)}
           onClick={() =>
-            navigate(StakingRoutes.claimRewards().url, {
+            navigate(routes.stakingClaimRewards, {
               state: { backgroundLocation: location },
             })
           }
diff --git a/apps/namadillo/src/App/Staking/StakingSummary.tsx b/apps/namadillo/src/App/Staking/StakingSummary.tsx
index 5eaa5caa2..277d038e0 100644
--- a/apps/namadillo/src/App/Staking/StakingSummary.tsx
+++ b/apps/namadillo/src/App/Staking/StakingSummary.tsx
@@ -7,8 +7,8 @@ import {
 import { AtomErrorBoundary } from "App/Common/AtomErrorBoundary";
 import { BalanceChart } from "App/Common/BalanceChart";
 import { NamCurrency } from "App/Common/NamCurrency";
+import { routes } from "App/routes";
 import { useBalances } from "hooks/useBalances";
-import StakingRoutes from "./routes";
 import { StakingRewardsPanel } from "./StakingRewardsPanel";
 
 export const StakingSummary = (): JSX.Element => {
@@ -72,7 +72,7 @@ export const StakingSummary = (): JSX.Element => {
                 className="px-8"
                 size="xs"
                 backgroundColor="cyan"
-                href={StakingRoutes.incrementBonding().url}
+                href={routes.stakingBondingIncrement}
               >
                 Stake
               </ActionButton>
diff --git a/apps/namadillo/src/App/Staking/Unstake.tsx b/apps/namadillo/src/App/Staking/Unstake.tsx
index 44665a668..a8cd2eef4 100644
--- a/apps/namadillo/src/App/Staking/Unstake.tsx
+++ b/apps/namadillo/src/App/Staking/Unstake.tsx
@@ -6,6 +6,7 @@ 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 { routes } from "App/routes";
 import { defaultAccountAtom } from "atoms/accounts";
 import { chainParametersAtom } from "atoms/chain";
 import { createUnbondTxAtom } from "atoms/staking";
@@ -20,9 +21,8 @@ import { useNavigate } from "react-router-dom";
 import { MyValidator } from "types";
 import { BondingAmountOverview } from "./BondingAmountOverview";
 import { UnstakeBondingTable } from "./UnstakeBondingTable";
-import StakingRoutes from "./routes";
 
-const Unstake = (): JSX.Element => {
+export const Unstake = (): JSX.Element => {
   const navigate = useNavigate();
   const { data: account } = useAtomValue(defaultAccountAtom);
   const validators = useAtomValue(myValidatorsAtom);
@@ -45,7 +45,7 @@ const Unstake = (): JSX.Element => {
     }));
   };
 
-  const onCloseModal = (): void => navigate(StakingRoutes.overview().url);
+  const onCloseModal = (): void => navigate(routes.staking);
 
   const {
     execute: performUnbond,
@@ -224,5 +224,3 @@ const Unstake = (): JSX.Element => {
     </Modal>
   );
 };
-
-export default Unstake;
diff --git a/apps/namadillo/src/App/Staking/__tests__/StakingRewardsPanel.test.tsx b/apps/namadillo/src/App/Staking/__tests__/StakingRewardsPanel.test.tsx
index 7ea5af342..1fc0096c4 100644
--- a/apps/namadillo/src/App/Staking/__tests__/StakingRewardsPanel.test.tsx
+++ b/apps/namadillo/src/App/Staking/__tests__/StakingRewardsPanel.test.tsx
@@ -3,7 +3,7 @@ mockReactRouterDom("/");
 mockJotai();
 
 import { fireEvent, render, screen } from "@testing-library/react";
-import StakingRoutes from "App/Staking/routes";
+import { routes } from "App/routes";
 import { StakingRewardsPanel } from "App/Staking/StakingRewardsPanel";
 import { applicationFeaturesAtom } from "atoms/settings";
 import { claimableRewardsAtom } from "atoms/staking";
@@ -82,11 +82,8 @@ describe("Component: StakingRewardsPanel", () => {
     const claimButton = getClaimButton();
     expect(claimButton).not.toBeDisabled();
     fireEvent.click(claimButton);
-    expect(mockNavigate).toHaveBeenCalledWith(
-      StakingRoutes.claimRewards().url,
-      {
-        state: { backgroundLocation: { pathname: "/" } },
-      }
-    );
+    expect(mockNavigate).toHaveBeenCalledWith(routes.stakingClaimRewards, {
+      state: { backgroundLocation: { pathname: "/" } },
+    });
   });
 });
diff --git a/apps/namadillo/src/App/Staking/index.ts b/apps/namadillo/src/App/Staking/index.ts
deleted file mode 100644
index 0c9e03239..000000000
--- a/apps/namadillo/src/App/Staking/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { Staking } from "./Staking";
diff --git a/apps/namadillo/src/App/Staking/routes.ts b/apps/namadillo/src/App/Staking/routes.ts
deleted file mode 100644
index ee9166a91..000000000
--- a/apps/namadillo/src/App/Staking/routes.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { RouteOutput, createRouteOutput } from "utils/routes";
-
-export const index = (): string => `/staking`;
-
-const routeOutput = createRouteOutput(index);
-
-export const overview = (): RouteOutput => routeOutput(`/`);
-
-export const manage = (): RouteOutput => routeOutput("/manage");
-
-export const incrementBonding = (): RouteOutput =>
-  routeOutput("/bonding/increment");
-
-export const redelegateBonding = (): RouteOutput =>
-  routeOutput("/bonding/redelegate");
-
-export const claimRewards = (): RouteOutput => routeOutput("/claim-rewards");
-
-export const validatorDetails = (id: string | number): RouteOutput =>
-  routeOutput(`/validator-details/${id}`);
-
-export const validatorDetailsOwner = (
-  validatorId: string | number,
-  ownerId: string | number
-): RouteOutput => routeOutput(`${validatorDetails(validatorId)}/${ownerId}`);
-
-export const unstake = (): RouteOutput => routeOutput("/bonding/unstake");
-
-export default {
-  index,
-  manage,
-  overview,
-  validatorDetails,
-  validatorDetailsOwner,
-  incrementBonding,
-  redelegateBonding,
-  claimRewards,
-  unstake,
-};
diff --git a/apps/namadillo/src/App/SwitchAccount/routes.ts b/apps/namadillo/src/App/SwitchAccount/routes.ts
deleted file mode 100644
index 4ec04c738..000000000
--- a/apps/namadillo/src/App/SwitchAccount/routes.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export const index = (): string => `/switch-account`;
-export default {
-  index,
-};
diff --git a/apps/namadillo/src/App/Transfer/MaspOverview.tsx b/apps/namadillo/src/App/Transfer/MaspOverview.tsx
deleted file mode 100644
index cc12b3aff..000000000
--- a/apps/namadillo/src/App/Transfer/MaspOverview.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { Panel } from "@namada/components";
-import { ConnectBanner } from "App/Common/ConnectBanner";
-import { PageWithSidebar } from "App/Common/PageWithSidebar";
-import { ShieldAllBanner } from "App/Sidebars/ShieldAllBanner";
-import { namadaExtensionConnectedAtom } from "atoms/settings";
-import { useUserHasAccount } from "hooks/useUserHasAccount";
-import { useAtomValue } from "jotai";
-import { ShieldedBalanceChart } from "./ShieldedBalanceChart";
-import { ShieldedNamBalance } from "./ShieldedNamBalance";
-import { ShieldedOverviewPanel } from "./ShieldedOverviewPanel";
-
-export const MaspOverview: React.FC = () => {
-  const hasAccount = useUserHasAccount();
-  const isConnected = useAtomValue(namadaExtensionConnectedAtom);
-
-  return (
-    <PageWithSidebar>
-      <div className="flex flex-col gap-2">
-        {!isConnected && (
-          <ConnectBanner text="To shield assets please connect your account" />
-        )}
-        {isConnected && hasAccount === false && (
-          <ConnectBanner text="To shield assets please create or import an account using Namada keychain" />
-        )}
-        {isConnected && hasAccount && (
-          <div className="flex flex-col sm:grid sm:grid-cols-[2fr_3fr] gap-2">
-            <Panel>
-              <ShieldedBalanceChart />
-            </Panel>
-            <Panel>
-              <ShieldedNamBalance />
-            </Panel>
-          </div>
-        )}
-        <Panel
-          className="relative pb-6 border border-yellow"
-          title="Shielded Overview"
-        >
-          <ShieldedOverviewPanel />
-        </Panel>
-      </div>
-      <aside className="w-full mt-2 flex flex-col sm:flex-row lg:mt-0 lg:flex-col gap-2">
-        <ShieldAllBanner />
-      </aside>
-    </PageWithSidebar>
-  );
-};
diff --git a/apps/namadillo/src/App/Transfer/NamTransfer.tsx b/apps/namadillo/src/App/Transfer/NamTransfer.tsx
index f202a3aa9..158dfcb64 100644
--- a/apps/namadillo/src/App/Transfer/NamTransfer.tsx
+++ b/apps/namadillo/src/App/Transfer/NamTransfer.tsx
@@ -1,14 +1,11 @@
-import { PageWithSidebar } from "App/Common/PageWithSidebar";
+import { Panel } from "@namada/components";
+import { Example } from "./Example";
 
 export const NamTransfer: React.FC = () => {
   return (
-    <PageWithSidebar>
-      <div className="flex flex-col gap-2 text-yellow">
-        <div>Internal Transfer (WIP)</div>
-      </div>
-      <aside className="flex flex-col gap-2 text-yellow">
-        <div>Sidebar (WIP)</div>
-      </aside>
-    </PageWithSidebar>
+    <Panel>
+      <div className="text-yellow">Transfer: Nam Transfer (WIP)</div>
+      <Example />
+    </Panel>
   );
 };
diff --git a/apps/namadillo/src/App/Transfer/Shield.tsx b/apps/namadillo/src/App/Transfer/Shield.tsx
deleted file mode 100644
index a89e791b8..000000000
--- a/apps/namadillo/src/App/Transfer/Shield.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { PageWithSidebar } from "App/Common/PageWithSidebar";
-
-export const Shield: React.FC = () => {
-  return (
-    <PageWithSidebar>
-      <div className="flex flex-col gap-2 text-yellow">
-        <div>Shield (WIP)</div>
-      </div>
-      <aside className="flex flex-col gap-2 text-yellow">
-        <div>Sidebar (WIP)</div>
-      </aside>
-    </PageWithSidebar>
-  );
-};
diff --git a/apps/namadillo/src/App/Transfer/ShieldAll.tsx b/apps/namadillo/src/App/Transfer/ShieldAll.tsx
deleted file mode 100644
index 793c6d064..000000000
--- a/apps/namadillo/src/App/Transfer/ShieldAll.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { PageWithSidebar } from "App/Common/PageWithSidebar";
-
-export const ShieldAll: React.FC = () => {
-  return (
-    <PageWithSidebar>
-      <div className="flex flex-col gap-2 text-yellow">
-        <div>Shield All (WIP)</div>
-      </div>
-      <aside className="flex flex-col gap-2 text-yellow">
-        <div>Sidebar (WIP)</div>
-      </aside>
-    </PageWithSidebar>
-  );
-};
diff --git a/apps/namadillo/src/App/Transfer/Transfer.tsx b/apps/namadillo/src/App/Transfer/Transfer.tsx
deleted file mode 100644
index da468cce2..000000000
--- a/apps/namadillo/src/App/Transfer/Transfer.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { Route, Routes } from "react-router-dom";
-import { Example } from "./Example";
-import { MaspOverview } from "./MaspOverview";
-import { NamTransfer } from "./NamTransfer";
-import { Shield } from "./Shield";
-import { ShieldAll } from "./ShieldAll";
-import TransferRoutes from "./routes";
-
-export const Transfer: React.FC = () => (
-  <main className="w-full">
-    <Routes>
-      <Route
-        path={TransferRoutes.masp().toString()}
-        element={<MaspOverview />}
-      />
-      <Route
-        path={TransferRoutes.namTransfer().toString()}
-        element={<NamTransfer />}
-      />
-      <Route path={TransferRoutes.shield().toString()} element={<Shield />} />
-      <Route
-        path={TransferRoutes.shieldAll().toString()}
-        element={<ShieldAll />}
-      />
-      <Route path={TransferRoutes.example().toString()} element={<Example />} />
-    </Routes>
-  </main>
-);
diff --git a/apps/namadillo/src/App/Transfer/TransferLayout.tsx b/apps/namadillo/src/App/Transfer/TransferLayout.tsx
new file mode 100644
index 000000000..5ec70b190
--- /dev/null
+++ b/apps/namadillo/src/App/Transfer/TransferLayout.tsx
@@ -0,0 +1,14 @@
+import { PageWithSidebar } from "App/Common/PageWithSidebar";
+import { ShieldAllBanner } from "App/Sidebars/ShieldAllBanner";
+import { Outlet } from "react-router-dom";
+
+export const TransferLayout: React.FC = () => {
+  return (
+    <PageWithSidebar>
+      <Outlet />
+      <aside className="w-full mt-2 flex flex-col sm:flex-row lg:mt-0 lg:flex-col gap-2">
+        <ShieldAllBanner />
+      </aside>
+    </PageWithSidebar>
+  );
+};
diff --git a/apps/namadillo/src/App/Transfer/index.ts b/apps/namadillo/src/App/Transfer/index.ts
deleted file mode 100644
index bf40070b2..000000000
--- a/apps/namadillo/src/App/Transfer/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { Transfer } from "./Transfer";
diff --git a/apps/namadillo/src/App/Transfer/routes.ts b/apps/namadillo/src/App/Transfer/routes.ts
deleted file mode 100644
index 6f7f44839..000000000
--- a/apps/namadillo/src/App/Transfer/routes.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { createRouteOutput, RouteOutput } from "utils/routes";
-
-export const index = (): string => `/transfer`;
-
-const routeOutput = createRouteOutput(index);
-
-export const overview = (): RouteOutput => routeOutput("/");
-
-export const masp = (): RouteOutput => routeOutput("/masp");
-
-export const namTransfer = (): RouteOutput => routeOutput("/nam");
-
-export const shield = (): RouteOutput => routeOutput("/shield");
-
-export const shieldAll = (): RouteOutput => routeOutput(`/shield-all`);
-
-export const example = (): RouteOutput => routeOutput(`/example`);
-
-export default {
-  index,
-  overview,
-  masp,
-  namTransfer,
-  shield,
-  shieldAll,
-  example,
-};
diff --git a/apps/namadillo/src/App/routes.ts b/apps/namadillo/src/App/routes.ts
new file mode 100644
index 000000000..b614afad6
--- /dev/null
+++ b/apps/namadillo/src/App/routes.ts
@@ -0,0 +1,39 @@
+export const routes = {
+  root: "/",
+
+  // Staking
+  staking: "/staking",
+  stakingBondingIncrement: "/staking/bonding/increment",
+  stakingBondingRedelegate: "/staking/bonding/redelegate",
+  stakingBondingUnstake: "/staking/bonding/unstake",
+  stakingClaimRewards: "/staking/claim-rewards",
+
+  // Governance
+  governance: "/governance",
+  governanceProposal: "/governance/proposal/:proposalId",
+  governanceSubmitVote: "/governance/submit-vote/:proposalId",
+  governanceJson: "/governance/json/:proposalId",
+
+  // Masp
+  masp: "/masp",
+  maspShield: "/masp/shield",
+  maspUnshield: "/masp/unshield",
+
+  // Ibc
+  ibc: "/ibc",
+  ibcWithdraw: "/ibc/withdraw",
+  ibcShieldAll: "/ibc/shield-all",
+
+  // Transfer
+  transfer: "/transfer",
+
+  // Settings
+  settings: "/settings",
+  settingsAdvanced: "/settings/advanced",
+  settingsSignArbitrary: "/settings/sign-arbitrary",
+  settingsFeatures: "/settings/features",
+
+  // Other
+  switchAccount: "/switch-account",
+  signMessages: "/sign-messages",
+} as const;
diff --git a/apps/namadillo/src/hooks/useModalCloseEvent.ts b/apps/namadillo/src/hooks/useModalCloseEvent.ts
index eb9d3644a..a36c628af 100644
--- a/apps/namadillo/src/hooks/useModalCloseEvent.ts
+++ b/apps/namadillo/src/hooks/useModalCloseEvent.ts
@@ -1,3 +1,4 @@
+import { routes } from "App/routes";
 import { useLocation, useNavigate } from "react-router-dom";
 
 type useModalCloseEventProps = {
@@ -14,7 +15,7 @@ export const useModalCloseEvent = (): useModalCloseEventProps => {
         replace: true,
       });
     } else {
-      navigate("/", { replace: true });
+      navigate(routes.root, { replace: true });
     }
   };
 
diff --git a/apps/namadillo/src/hooks/useProposalIdParam.ts b/apps/namadillo/src/hooks/useProposalIdParam.ts
index 8823a7e56..8efc4344f 100644
--- a/apps/namadillo/src/hooks/useProposalIdParam.ts
+++ b/apps/namadillo/src/hooks/useProposalIdParam.ts
@@ -2,7 +2,7 @@ import { useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 
 import { useSanitizedParams } from "@namada/hooks";
-import GovernanceRoutes from "App/Governance/routes";
+import { routes } from "App/routes";
 
 const parseProposalId = (asString: string | undefined): bigint | null => {
   if (typeof asString === "undefined") {
@@ -25,7 +25,7 @@ export const useProposalIdParam = (): bigint | null => {
 
   useEffect(() => {
     if (proposalId === null) {
-      navigate(GovernanceRoutes.overview().url);
+      navigate(routes.governance);
     }
   }, [proposalId]);