diff --git a/apps/namadillo/src/App/AccountOverview/AccountOverview.tsx b/apps/namadillo/src/App/AccountOverview/AccountOverview.tsx
index 9f5297875a..7cea6b7388 100644
--- a/apps/namadillo/src/App/AccountOverview/AccountOverview.tsx
+++ b/apps/namadillo/src/App/AccountOverview/AccountOverview.tsx
@@ -1,4 +1,4 @@
-import { Panel, Stack } from "@namada/components";
+import { Panel } from "@namada/components";
 import { ConnectPanel } from "App/Common/ConnectPanel";
 import { PageWithSidebar } from "App/Common/PageWithSidebar";
 import { EpochInformation } from "App/Sidebars/EpochInformation";
@@ -9,8 +9,7 @@ import { applicationFeaturesAtom } from "atoms/settings";
 import { useUserHasAccount } from "hooks/useIsAuthenticated";
 import { useAtomValue } from "jotai";
 import { twMerge } from "tailwind-merge";
-import { AccountBalanceContainer } from "./AccountBalanceContainer";
-import { BalanceContainer } from "./BalanceContainer";
+import { BalanceOverviewChart } from "./BalanceOverviewChart";
 import { MaspBanner } from "./MaspBanner";
 import { NamBalanceContainer } from "./NamBalanceContainer";
 import { NavigationFooter } from "./NavigationFooter";
@@ -18,9 +17,7 @@ import { TransparentOverviewPanel } from "./TransparentOverviewPanel";
 
 export const AccountOverview = (): JSX.Element => {
   const userHasAccount = useUserHasAccount();
-  const { claimRewardsEnabled, maspEnabled } = useAtomValue(
-    applicationFeaturesAtom
-  );
+  const { maspEnabled } = useAtomValue(applicationFeaturesAtom);
 
   if (!userHasAccount) {
     return (
@@ -33,37 +30,29 @@ export const AccountOverview = (): JSX.Element => {
   return (
     <PageWithSidebar>
       <div className={twMerge("flex w-full")}>
-        {claimRewardsEnabled ?
-          <section className="flex flex-col w-full rounded-sm min-h-full gap-2">
-            <div className="grid sm:grid-cols-[1.25fr_1fr] gap-2">
-              <Panel>
-                {maspEnabled ?
-                  <BalanceContainer />
-                : <NamBalanceContainer />}
-              </Panel>
-              <Panel>
-                <StakingRewardsPanel />
-              </Panel>
-            </div>
-            {maspEnabled && (
-              <>
-                <MaspBanner />
-                <TransparentOverviewPanel />
-              </>
-            )}
-            <Panel className="flex items-center flex-1 justify-center">
-              <NavigationFooter />
+        <section className="flex flex-col w-full rounded-sm min-h-full gap-2">
+          <div className="grid sm:grid-cols-[0.8fr_1.25fr_0.66fr] gap-2">
+            <Panel className="flex items-center justify-center">
+              <BalanceOverviewChart />
+            </Panel>
+            <Panel>
+              <NamBalanceContainer />
             </Panel>
-          </section>
-        : <section className="flex items-center bg-black rounded-sm w-full">
-            <Stack gap={5} className="my-auto min-w-[365px] mx-auto py-12">
-              <AccountBalanceContainer />
-              <NavigationFooter />
-            </Stack>
-          </section>
-        }
+            <Panel>
+              <StakingRewardsPanel />
+            </Panel>
+          </div>
+          {maspEnabled && (
+            <>
+              <MaspBanner />
+              <TransparentOverviewPanel />
+            </>
+          )}
+          <Panel className="flex items-center flex-1 justify-center">
+            <NavigationFooter />
+          </Panel>
+        </section>
       </div>
-
       <aside className="flex flex-col gap-2">
         <EpochInformation />
         <ShieldAllBanner />
diff --git a/apps/namadillo/src/App/AccountOverview/BalanceContainer.tsx b/apps/namadillo/src/App/AccountOverview/BalanceContainer.tsx
deleted file mode 100644
index 28df8e73a1..0000000000
--- a/apps/namadillo/src/App/AccountOverview/BalanceContainer.tsx
+++ /dev/null
@@ -1,143 +0,0 @@
-import { SkeletonLoading, Stack } from "@namada/components";
-import { AtomErrorBoundary } from "App/Common/AtomErrorBoundary";
-import { FiatCurrency } from "App/Common/FiatCurrency";
-import { NamCurrency } from "App/Common/NamCurrency";
-import { shieldedTokensAtom, transparentTokensAtom } from "atoms/balance/atoms";
-import { getTotalDollar, getTotalNam } from "atoms/balance/functions";
-import { getStakingTotalAtom } from "atoms/staking";
-import BigNumber from "bignumber.js";
-import { useAtomValue } from "jotai";
-import { ReactNode } from "react";
-import { colors } from "theme";
-
-type ItemProps = {
-  title: string;
-  color: string;
-  isLoading: boolean;
-  children?: ReactNode;
-};
-
-const Item = ({
-  title,
-  color,
-  isLoading,
-  children,
-}: ItemProps): JSX.Element => {
-  return (
-    <li className="leading-5 bg-neutral-900 px-4 py-3 rounded-sm min-w-[165px] flex justify-between">
-      <span className="flex items-center text-xs gap-1.5">
-        <i className="w-2 h-2 rounded-full" style={{ background: color }} />
-        {title}
-      </span>
-      <div className="text-lg pl-3.5">
-        {isLoading ?
-          <SkeletonLoading height="22px" width="80px" />
-        : children}
-      </div>
-    </li>
-  );
-};
-
-const DollarItem = ({
-  dollar,
-  ...props
-}: {
-  dollar?: BigNumber;
-} & ItemProps): JSX.Element => {
-  return (
-    <Item {...props}>
-      {dollar ?
-        <FiatCurrency amount={dollar} />
-      : "N/A"}
-    </Item>
-  );
-};
-
-const NamItem = ({
-  nam,
-  ...props
-}: { nam?: BigNumber } & ItemProps): JSX.Element => {
-  return (
-    <Item {...props}>
-      {nam ?
-        <NamCurrency amount={nam} currencySymbolClassName="hidden" />
-      : "N/A"}
-    </Item>
-  );
-};
-
-export const BalanceContainer = (): JSX.Element => {
-  const shieldedTokensQuery = useAtomValue(shieldedTokensAtom);
-  const transparentTokensQuery = useAtomValue(transparentTokensAtom);
-  const stakingTotalQuery = useAtomValue(getStakingTotalAtom);
-
-  const shieldedDollars = getTotalDollar(shieldedTokensQuery.data);
-  const shieldedNam = getTotalNam(shieldedTokensQuery.data);
-
-  const transparentDollars = getTotalDollar(transparentTokensQuery.data);
-  const transparentNam = getTotalNam(transparentTokensQuery.data);
-
-  const bondedAmount = stakingTotalQuery.data?.totalBonded;
-  const unbondedAmount = stakingTotalQuery.data?.totalUnbonded;
-  const withdrawableAmount = stakingTotalQuery.data?.totalWithdrawable;
-
-  return (
-    <div className="flex items-center justify-center h-full w-full">
-      <AtomErrorBoundary
-        result={[
-          shieldedTokensQuery,
-          transparentTokensQuery,
-          stakingTotalQuery,
-        ]}
-        niceError="Unable to load balances"
-      >
-        <div className="flex flex-wrap md:flex-nowrap gap-4 items-center justify-center w-full">
-          <Stack gap={2} as="ul" className=" w-full">
-            <DollarItem
-              title="Shielded Assets"
-              color={colors.shielded}
-              dollar={shieldedDollars}
-              isLoading={shieldedTokensQuery.isPending}
-            />
-            <NamItem
-              title="Shielded NAM"
-              color={colors.shielded}
-              nam={shieldedNam}
-              isLoading={shieldedTokensQuery.isPending}
-            />
-
-            <DollarItem
-              title="Transparent Assets"
-              color={colors.balance}
-              dollar={transparentDollars}
-              isLoading={transparentTokensQuery.isPending}
-            />
-            <NamItem
-              title="Transparent NAM"
-              color={colors.balance}
-              nam={transparentNam}
-              isLoading={transparentTokensQuery.isPending}
-            />
-
-            <NamItem
-              title="Staked NAM"
-              color={colors.bond}
-              nam={bondedAmount}
-              isLoading={stakingTotalQuery.isPending}
-            />
-            <NamItem
-              title="Unbonded NAM"
-              color={colors.unbond}
-              nam={
-                unbondedAmount && withdrawableAmount ?
-                  unbondedAmount.plus(withdrawableAmount)
-                : undefined
-              }
-              isLoading={stakingTotalQuery.isPending}
-            />
-          </Stack>
-        </div>
-      </AtomErrorBoundary>
-    </div>
-  );
-};
diff --git a/apps/namadillo/src/App/AccountOverview/BalanceOverviewChart.tsx b/apps/namadillo/src/App/AccountOverview/BalanceOverviewChart.tsx
new file mode 100644
index 0000000000..ee08211754
--- /dev/null
+++ b/apps/namadillo/src/App/AccountOverview/BalanceOverviewChart.tsx
@@ -0,0 +1,131 @@
+import {
+  Heading,
+  PieChart,
+  PieChartData,
+  SkeletonLoading,
+} from "@namada/components";
+import { FiatCurrency } from "App/Common/FiatCurrency";
+import { NamCurrency } from "App/Common/NamCurrency";
+import { shieldedTokensAtom, transparentTokensAtom } from "atoms/balance";
+import { getTotalDollar } from "atoms/balance/functions";
+import { applicationFeaturesAtom } from "atoms/settings";
+import BigNumber from "bignumber.js";
+import { useBalances } from "hooks/useBalances";
+import { useAtomValue } from "jotai";
+import { colors } from "theme";
+
+const BalanceOverviewCaptionItem = ({
+  color,
+  children,
+}: { color: string } & React.PropsWithChildren): JSX.Element => {
+  return (
+    <li className="flex gap-2 items-center text-base">
+      <i
+        className="w-3 h-3 aspect-square rounded-full"
+        style={{ background: color }}
+      />
+      {children}
+    </li>
+  );
+};
+
+export const BalanceOverviewChart = (): JSX.Element => {
+  const { maspEnabled } = useAtomValue(applicationFeaturesAtom);
+  const shieldedTokensQuery = useAtomValue(shieldedTokensAtom);
+  const transparentTokensQuery = useAtomValue(transparentTokensAtom);
+  const { totalTransparentAmount, isLoading: isLoadingTransparent } =
+    useBalances();
+  const shieldedDollars =
+    getTotalDollar(shieldedTokensQuery.data) || new BigNumber(0);
+  const transparentDollars =
+    getTotalDollar(transparentTokensQuery.data) || new BigNumber(0);
+  const totalAmountInDollars = shieldedDollars.plus(transparentDollars);
+
+  const isLoading =
+    maspEnabled ?
+      isLoadingTransparent ||
+      shieldedTokensQuery.isLoading ||
+      transparentTokensQuery.isLoading
+    : isLoadingTransparent;
+
+  const getPiechartData = (): Array<PieChartData> => {
+    if (isLoading) {
+      return [];
+    }
+
+    if (!maspEnabled) {
+      return [
+        {
+          value: 1,
+          color: totalTransparentAmount.gt(0) ? colors.shielded : colors.empty,
+        },
+      ];
+    }
+
+    if (totalAmountInDollars.eq(0)) {
+      return [{ value: 1, color: colors.empty }];
+    }
+
+    return [
+      {
+        value: transparentDollars || new BigNumber(0),
+        color: colors.balance,
+      },
+      { value: shieldedDollars || new BigNumber(0), color: colors.shielded },
+    ];
+  };
+
+  return (
+    <div>
+      <div className="h-[230px] w-[230px]">
+        {isLoading ?
+          <SkeletonLoading
+            height="100%"
+            width="100%"
+            className="rounded-full border-neutral-800 border-[24px] bg-transparent"
+          />
+        : <PieChart
+            id="balance-chart"
+            data={getPiechartData()}
+            strokeWidth={24}
+            radius={125}
+            segmentMargin={0}
+          >
+            <div className="flex flex-col gap-1 leading-tight">
+              <Heading className="text-sm" level="h3">
+                {maspEnabled ? "Total Balance" : "NAM Balance"}
+              </Heading>
+              <div className="text-2xl">
+                {maspEnabled ?
+                  <span>
+                    <FiatCurrency amount={totalAmountInDollars} />*
+                  </span>
+                : <NamCurrency
+                    amount={totalTransparentAmount}
+                    currencySymbolClassName="hidden"
+                    decimalPlaces={2}
+                  />
+                }
+              </div>
+            </div>
+          </PieChart>
+        }
+      </div>
+      {maspEnabled && (
+        <>
+          <ul className="mx-auto px-5 mt-3">
+            <BalanceOverviewCaptionItem color={colors.shielded}>
+              Shielded Assets
+            </BalanceOverviewCaptionItem>
+            <BalanceOverviewCaptionItem color={colors.balance}>
+              Transparent Assets
+            </BalanceOverviewCaptionItem>
+          </ul>
+          <small className="text-xxs -mb-3 mt-3 block">
+            * Balances exclude NAM until phase 5
+          </small>
+        </>
+      )}
+    </div>
+  );
+};
diff --git a/apps/namadillo/src/App/AccountOverview/NamBalanceContainer.tsx b/apps/namadillo/src/App/AccountOverview/NamBalanceContainer.tsx
index 2fced5e1a8..aa957cfe08 100644
--- a/apps/namadillo/src/App/AccountOverview/NamBalanceContainer.tsx
+++ b/apps/namadillo/src/App/AccountOverview/NamBalanceContainer.tsx
@@ -1,9 +1,13 @@
 import { SkeletonLoading, Stack } from "@namada/components";
 import { AtomErrorBoundary } from "App/Common/AtomErrorBoundary";
-import { BalanceChart } from "App/Common/BalanceChart";
 import { NamCurrency } from "App/Common/NamCurrency";
+import { ShieldedRewardsBox } from "App/Masp/ShieldedRewardsBox";
+import { applicationFeaturesAtom } from "atoms/settings";
 import BigNumber from "bignumber.js";
+import clsx from "clsx";
 import { useBalances } from "hooks/useBalances";
+import { useAtomValue } from "jotai";
+import { twMerge } from "tailwind-merge";
 import { colors } from "theme";
 
 type NamBalanceListItemProps = {
@@ -11,6 +15,35 @@ type NamBalanceListItemProps = {
   color: string;
   amount: BigNumber;
   isLoading: boolean;
+  isEnabled?: boolean;
+};
+
+type ListItemContainerProps = {
+  isEnabled: boolean;
+} & React.ComponentPropsWithoutRef<"li"> &
+  React.PropsWithChildren;
+
+const ListItemContainer = ({
+  isEnabled,
+  children,
+  className = "",
+  ...props
+}: ListItemContainerProps &
+  React.ComponentPropsWithoutRef<"li">): JSX.Element => {
+  return (
+    <li
+      className={twMerge(
+        clsx(
+          "leading-snug bg-neutral-900 pr-6 pl-5 py-6 rounded-sm min-w-[165px]",
+          { "opacity-40 pointer-events-none select-none": !isEnabled },
+          className
+        )
+      )}
+      {...props}
+    >
+      {children}
+    </li>
+  );
 };
 
 const NamBalanceListItem = ({
@@ -18,29 +51,38 @@ const NamBalanceListItem = ({
   color,
   amount,
   isLoading,
+  isEnabled = true,
 }: NamBalanceListItemProps): JSX.Element => {
   return (
-    <li
-      className="leading-5 bg-neutral-900 px-4 py-3 rounded-sm min-w-[165px]"
+    <ListItemContainer
+      isEnabled={isEnabled}
       aria-description={`${title} amount is ${amount.toString()} NAM`}
     >
-      <span className="flex items-center text-xs gap-1.5">
-        <i className="w-2 h-2 rounded-full" style={{ background: color }} />
+      <span className="flex items-center text-sm gap-1.5">
+        <i
+          className="w-2 h-2 rounded-full mr-1.5"
+          style={{ background: color }}
+        />
         {title}
       </span>
       {isLoading ?
         <SkeletonLoading height="22px" width="100px" />
       : <NamCurrency
           amount={amount}
-          className="text-lg pl-3.5"
+          className="text-2xl pl-5 font-light"
           currencySymbolClassName="hidden"
+          decimalPlaces={2}
         />
       }
-    </li>
+    </ListItemContainer>
   );
 };
 
 export const NamBalanceContainer = (): JSX.Element => {
+  const { maspEnabled, shieldingRewardsEnabled } = useAtomValue(
+    applicationFeaturesAtom
+  );
+
   const {
     balanceQuery,
     stakeQuery,
@@ -49,46 +91,57 @@ export const NamBalanceContainer = (): JSX.Element => {
     bondedAmount,
     unbondedAmount,
     withdrawableAmount,
-    totalAmount,
+    shieldedAmountQuery,
+    shieldedNamAmount,
   } = useBalances();
 
   return (
-    <div className="flex items-center justify-center h-full w-full">
+    <div className="flex gap-2 h-full w-full">
       <AtomErrorBoundary
         result={[balanceQuery, stakeQuery]}
         niceError="Unable to load balances"
       >
-        <div className="flex flex-wrap md:flex-nowrap gap-4 items-center justify-center">
-          <BalanceChart
-            view="total"
+        <Stack
+          as="ul"
+          gap={2}
+          className={clsx("w-full", {
+            "order-1": maspEnabled && shieldingRewardsEnabled,
+          })}
+        >
+          <NamBalanceListItem
+            title="Transparent NAM"
+            color={colors.balance}
+            amount={availableAmount}
             isLoading={isLoading}
-            availableAmount={availableAmount}
-            bondedAmount={bondedAmount}
-            unbondedAmount={unbondedAmount}
-            withdrawableAmount={withdrawableAmount}
-            totalAmount={totalAmount}
           />
-          <Stack gap={2} as="ul">
-            <NamBalanceListItem
-              title="Available NAM"
-              color={colors.balance}
-              amount={availableAmount}
-              isLoading={isLoading}
-            />
-            <NamBalanceListItem
-              title="Staked NAM"
-              color={colors.bond}
-              amount={bondedAmount}
-              isLoading={isLoading}
-            />
-            <NamBalanceListItem
-              title="Unbonded NAM"
-              color={colors.unbond}
-              amount={unbondedAmount.plus(withdrawableAmount)}
-              isLoading={isLoading}
-            />
-          </Stack>
-        </div>
+          <NamBalanceListItem
+            title="Staked NAM"
+            color={colors.bond}
+            amount={bondedAmount}
+            isLoading={isLoading}
+          />
+          <NamBalanceListItem
+            title="Unbonded NAM"
+            color={colors.unbond}
+            amount={unbondedAmount.plus(withdrawableAmount)}
+            isLoading={isLoading}
+          />
+        </Stack>
+        <Stack className="w-full" gap={2}>
+          <NamBalanceListItem
+            title="Shielded NAM"
+            color={colors.shielded}
+            amount={maspEnabled ? shieldedNamAmount : new BigNumber(0)}
+            isLoading={shieldedAmountQuery.isLoading}
+            isEnabled={maspEnabled}
+          />
+          <ListItemContainer
+            isEnabled={shieldingRewardsEnabled}
+            className="flex flex-1"
+          >
+            <ShieldedRewardsBox />
+          </ListItemContainer>
+        </Stack>
       </AtomErrorBoundary>
     </div>
   );
diff --git a/apps/namadillo/src/App/AccountOverview/__tests__/NamBalanceContainer.test.tsx b/apps/namadillo/src/App/AccountOverview/__tests__/NamBalanceContainer.test.tsx
index 8a3d60d2cb..daab32a77f 100644
--- a/apps/namadillo/src/App/AccountOverview/__tests__/NamBalanceContainer.test.tsx
+++ b/apps/namadillo/src/App/AccountOverview/__tests__/NamBalanceContainer.test.tsx
@@ -22,6 +22,7 @@ describe("Component: NamBalanceContainer", () => {
       mockUseBalances({
         balanceQuery: { isError: balanceQueryError } as AtomWithQueryResult,
         stakeQuery: { isError: stakeQueryError } as AtomWithQueryResult,
+        shieldedAmountQuery: {} as AtomWithQueryResult,
         isLoading: false,
         isSuccess: false,
       });
@@ -42,13 +43,14 @@ describe("Component: NamBalanceContainer", () => {
       bondedAmount: new BigNumber(50),
       unbondedAmount: new BigNumber(30),
       withdrawableAmount: new BigNumber(25),
-      totalAmount: new BigNumber(200),
+      totalTransparentAmount: new BigNumber(200),
+      shieldedAmountQuery: { isLoading: false } as AtomWithQueryResult,
     });
 
     render(<NamBalanceContainer />);
 
     // Check if the list items for each balance type are rendered
-    expect(screen.getByText(/Available NAM/i)).toBeInTheDocument();
+    expect(screen.getByText(/Transparent NAM/i)).toBeInTheDocument();
     expect(screen.getByText(/Staked NAM/i)).toBeInTheDocument();
     expect(screen.getByText(/Unbonded NAM/i)).toBeInTheDocument();
 
diff --git a/apps/namadillo/src/App/Masp/ShieldedRewardsBox.tsx b/apps/namadillo/src/App/Masp/ShieldedRewardsBox.tsx
new file mode 100644
index 0000000000..fcb8989316
--- /dev/null
+++ b/apps/namadillo/src/App/Masp/ShieldedRewardsBox.tsx
@@ -0,0 +1,23 @@
+import { NamCurrency } from "App/Common/NamCurrency";
+import BigNumber from "bignumber.js";
+
+type ShieldedRewardsBoxProps = {
+  shieldedRewardsAmount?: BigNumber;
+};
+
+export const ShieldedRewardsBox = ({
+  shieldedRewardsAmount,
+}: ShieldedRewardsBoxProps): JSX.Element => {
+  return (
+    <div className="flex flex-col text-yellow text-sm text-center">
+      <h3>Your Est. Shielding rewards per Epoch</h3>
+      <div className="flex items-center justify-center text-3xl flex-1">
+        {shieldedRewardsAmount === undefined ?
+          <span>
+            --<i className="block text-sm not-italic">NAM</i>
+          </span>
+        : <NamCurrency amount={shieldedRewardsAmount} decimalPlaces={2} />}
+      </div>
+    </div>
+  );
+};
diff --git a/apps/namadillo/src/App/Staking/StakingRewardsPanel.tsx b/apps/namadillo/src/App/Staking/StakingRewardsPanel.tsx
index 211b26e540..896055fc44 100644
--- a/apps/namadillo/src/App/Staking/StakingRewardsPanel.tsx
+++ b/apps/namadillo/src/App/Staking/StakingRewardsPanel.tsx
@@ -38,7 +38,7 @@ export const StakingRewardsPanel = (): JSX.Element => {
       mainAmount={
         <NamCurrency
           amount={availableRewards}
-          className="block leading-none"
+          className="block leading-none text-2xl"
           currencySymbolClassName="block mb-3 mt-0.5 text-sm"
           decimalPlaces={2}
         />
diff --git a/apps/namadillo/src/App/Staking/StakingSummary.tsx b/apps/namadillo/src/App/Staking/StakingSummary.tsx
index b8d80604cd..b996ef1e9b 100644
--- a/apps/namadillo/src/App/Staking/StakingSummary.tsx
+++ b/apps/namadillo/src/App/Staking/StakingSummary.tsx
@@ -20,7 +20,7 @@ export const StakingSummary = (): JSX.Element => {
     bondedAmount,
     unbondedAmount,
     withdrawableAmount,
-    totalAmount,
+    totalTransparentAmount: totalAmount,
   } = useBalances();
 
   return (
diff --git a/apps/namadillo/src/hooks/useBalances.ts b/apps/namadillo/src/hooks/useBalances.ts
index 7db97512f8..04203a4e5b 100644
--- a/apps/namadillo/src/hooks/useBalances.ts
+++ b/apps/namadillo/src/hooks/useBalances.ts
@@ -1,4 +1,6 @@
 import { accountBalanceAtom } from "atoms/accounts";
+import { shieldedTokensAtom } from "atoms/balance";
+import { getTotalNam } from "atoms/balance/functions";
 import { getStakingTotalAtom } from "atoms/staking";
 import BigNumber from "bignumber.js";
 import { useAtomValue } from "jotai";
@@ -9,28 +11,33 @@ export type useBalancesOutput = {
   isSuccess: boolean;
   stakeQuery: AtomWithQueryResult;
   balanceQuery: AtomWithQueryResult;
+  shieldedAmountQuery: AtomWithQueryResult;
   bondedAmount: BigNumber;
   availableAmount: BigNumber;
   unbondedAmount: BigNumber;
   withdrawableAmount: BigNumber;
-  totalAmount: BigNumber;
+  shieldedNamAmount: BigNumber;
+  totalTransparentAmount: BigNumber;
 };
 
 export const useBalances = (): useBalancesOutput => {
-  const totalStakedBalance = useAtomValue(getStakingTotalAtom);
-  const totalAccountBalance = useAtomValue(accountBalanceAtom);
+  const totalStakedBalanceQuery = useAtomValue(getStakingTotalAtom);
+  const totalAccountBalanceQuery = useAtomValue(accountBalanceAtom);
+  const shieldedNamQuery = useAtomValue(shieldedTokensAtom);
 
   const {
     data: balance,
     isLoading: isFetchingBalance,
     isSuccess: isBalanceLoaded,
-  } = totalAccountBalance;
+  } = totalAccountBalanceQuery;
 
   const {
     data: stakeBalance,
     isLoading: isFetchingStaking,
     isSuccess: isStakedBalanceLoaded,
-  } = totalStakedBalance;
+  } = totalStakedBalanceQuery;
+
+  const { data: shieldedNamAmount } = shieldedNamQuery;
 
   const availableAmount = new BigNumber(balance || 0);
   const bondedAmount = new BigNumber(stakeBalance?.totalBonded || 0);
@@ -38,7 +45,8 @@ export const useBalances = (): useBalancesOutput => {
   const withdrawableAmount = new BigNumber(
     stakeBalance?.totalWithdrawable || 0
   );
-  const totalAmount = BigNumber.sum(
+
+  const totalTransparentAmount = BigNumber.sum(
     availableAmount,
     bondedAmount,
     unbondedAmount,
@@ -48,12 +56,14 @@ export const useBalances = (): useBalancesOutput => {
   return {
     isLoading: isFetchingStaking || isFetchingBalance,
     isSuccess: isBalanceLoaded && isStakedBalanceLoaded,
-    stakeQuery: totalStakedBalance,
-    balanceQuery: totalAccountBalance,
+    stakeQuery: totalStakedBalanceQuery,
+    balanceQuery: totalAccountBalanceQuery,
+    shieldedAmountQuery: shieldedNamQuery,
     availableAmount,
     bondedAmount,
     unbondedAmount,
     withdrawableAmount,
-    totalAmount,
+    shieldedNamAmount: getTotalNam(shieldedNamAmount),
+    totalTransparentAmount: totalTransparentAmount,
   };
 };