diff --git a/src/pages/stakingPage/components/RewardsCard.tsx b/src/pages/stakingPage/components/RewardsCard.tsx
index 9051f46..65ba5c7 100644
--- a/src/pages/stakingPage/components/RewardsCard.tsx
+++ b/src/pages/stakingPage/components/RewardsCard.tsx
@@ -4,8 +4,11 @@ import { useAccount } from 'wagmi';
 
 import { GrixLogo } from '@/components/commons/Logo';
 import { EthLogo } from '@/components/commons/Logo/EthLogo';
+import { AssetPriceResponse } from '@/types/api';
 import { claim, compound } from '@/web3Config/staking/hooks';
 
+import { useVesting } from '../hooks/useVesting';
+
 type RewardsCardProps = {
   data: {
     claimable: string;
@@ -16,26 +19,26 @@ type RewardsCardProps = {
   refetchData: () => Promise<void>;
 };
 
-type DexScreenerResponse = {
-  grix: {
-    usd: number;
-  };
-};
-
 export const RewardsCard = ({ data, refetchData }: RewardsCardProps): JSX.Element => {
   const { address } = useAccount();
   const [isClaiming, setIsClaiming] = useState(false);
   const [isCompounding, setIsCompounding] = useState(false);
   const [grixPrice, setGrixPrice] = useState<number | null>(null);
+  const { totalStaked } = useVesting();
   const toast = useToast();
 
   // Fetch GRIX price from CoinGecko
   useEffect(() => {
     const fetchPrice = async () => {
       try {
-        const res = await fetch('https://api.coingecko.com/api/v3/simple/price?ids=grix&vs_currencies=usd');
-        const json = (await res.json()) as DexScreenerResponse;
-        const price = json.grix.usd;
+        const res = await fetch('https://z61hgkwkn8.execute-api.us-east-1.amazonaws.com/dev/assetprice?asset=GRIX', {
+          headers: {
+            'x-api-key': import.meta.env.VITE_GRIX_API_KEY,
+            origin: 'https://app.grix.finance',
+          },
+        });
+        const json = (await res.json()) as AssetPriceResponse;
+        const price = json.assetPrice;
         setGrixPrice(price);
       } catch {
         setGrixPrice(null);
@@ -143,6 +146,32 @@ export const RewardsCard = ({ data, refetchData }: RewardsCardProps): JSX.Elemen
             )}
           </Text>
         </HStack>
+
+        <HStack justify="space-between" pt={2} borderTop="1px solid" borderColor="gray.800">
+          <HStack spacing={2}>
+            <GrixLogo boxSize="14px" />
+            <Text color="white" fontWeight="600" fontSize="sm" letterSpacing="-0.01em">
+              Total Staked
+            </Text>
+          </HStack>
+          <Text color="gray.400" fontSize="sm" fontWeight="500" flexShrink={0} textAlign="right">
+            {Number(totalStaked).toLocaleString(undefined, {
+              minimumFractionDigits: 1,
+              maximumFractionDigits: 1,
+            })}{' '}
+            GRIX
+            {grixPrice && Number(totalStaked) > 0 && (
+              <Text as="span" color="green.300" fontWeight="600" fontSize="sm" letterSpacing="-0.01em">
+                &nbsp;($
+                {(Number(totalStaked) * grixPrice).toLocaleString(undefined, {
+                  minimumFractionDigits: 2,
+                  maximumFractionDigits: 2,
+                })}
+                )
+              </Text>
+            )}
+          </Text>
+        </HStack>
         <Button
           onClick={() => void handleClaim()}
           isLoading={isClaiming}
diff --git a/src/pages/stakingPage/components/StakingCard.tsx b/src/pages/stakingPage/components/StakingCard.tsx
index 7f32ae3..0f46e1e 100644
--- a/src/pages/stakingPage/components/StakingCard.tsx
+++ b/src/pages/stakingPage/components/StakingCard.tsx
@@ -3,6 +3,7 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { parseEther } from 'viem';
 import { useAccount } from 'wagmi';
 
+import { AssetPriceResponse } from '@/types/api';
 import { stakingContracts } from '@/web3Config/staking/config';
 import {
   approveStaking,
@@ -11,6 +12,8 @@ import {
   getEsGrixStakedAmount,
   getStakedAmount,
   getTokenBalance,
+  getTotalEsGrixStaked,
+  getTotalGrixStaked,
   stakeEsGRIX,
   stakeGRIX,
   unstakeEsGRIX,
@@ -42,6 +45,8 @@ export const StakingCard: React.FC<StakingCardProps> = ({
   const [needsApproval, setNeedsApproval] = useState(true);
   const [availableBalance, setAvailableBalance] = useState('0');
   const [stakedAmount, setStakedAmount] = useState('0');
+  const [totalStakedInProtocol, setTotalStakedInProtocol] = useState('0');
+  const [grixPrice, setGrixPrice] = useState<number | null>(null);
   const [apr, setApr] = useState(0);
   const toast = useToast();
   const tokenAddress = type === 'gx' ? stakingContracts.grixToken.address : stakingContracts.esGRIXToken.address;
@@ -90,19 +95,53 @@ export const StakingCard: React.FC<StakingCardProps> = ({
     setApr(calculatedAPR);
   }, []);
 
+  const fetchTotalStaked = useCallback(async () => {
+    try {
+      if (type === 'gx') {
+        const total = await getTotalGrixStaked();
+        setTotalStakedInProtocol(total);
+      } else {
+        const total = await getTotalEsGrixStaked();
+        setTotalStakedInProtocol(total);
+      }
+    } catch (error) {
+      setTotalStakedInProtocol('0');
+    }
+  }, [type]);
+
+  const fetchGrixPrice = useCallback(async () => {
+    try {
+      const res = await fetch('https://z61hgkwkn8.execute-api.us-east-1.amazonaws.com/dev/assetprice?asset=GRIX', {
+        headers: {
+          'x-api-key': import.meta.env.VITE_GRIX_API_KEY,
+          origin: 'https://app.grix.finance',
+        },
+      });
+      const json = (await res.json()) as AssetPriceResponse;
+      const price = json.assetPrice;
+      setGrixPrice(price);
+    } catch {
+      setGrixPrice(null);
+    }
+  }, []);
+
   useEffect(() => {
     void fetchBalance();
     void fetchStakedAmount();
     void fetchAPR();
+    void fetchTotalStaked();
+    void fetchGrixPrice();
 
     const interval = setInterval(() => {
       void fetchBalance();
       void fetchStakedAmount();
       void fetchAPR();
+      void fetchTotalStaked();
+      void fetchGrixPrice();
     }, 30000);
 
     return () => clearInterval(interval);
-  }, [fetchBalance, fetchStakedAmount, fetchAPR, refreshTrigger]);
+  }, [fetchBalance, fetchStakedAmount, fetchAPR, fetchTotalStaked, fetchGrixPrice, refreshTrigger]);
 
   const isAmountValid = useCallback(() => {
     if (!amount) return false;
@@ -155,12 +194,12 @@ export const StakingCard: React.FC<StakingCardProps> = ({
 
   const refreshAllData = useCallback(
     async (triggerParentRefresh = true) => {
-      await Promise.all([fetchBalance(), fetchStakedAmount(), fetchAPR()]);
+      await Promise.all([fetchBalance(), fetchStakedAmount(), fetchAPR(), fetchTotalStaked(), fetchGrixPrice()]);
       if (triggerParentRefresh) {
         onActionComplete();
       }
     },
-    [fetchBalance, fetchStakedAmount, fetchAPR, onActionComplete]
+    [fetchBalance, fetchStakedAmount, fetchAPR, fetchTotalStaked, fetchGrixPrice, onActionComplete]
   );
 
   useEffect(() => {
@@ -238,6 +277,8 @@ export const StakingCard: React.FC<StakingCardProps> = ({
       description={description}
       stakedAmount={stakedAmount}
       availableBalance={availableBalance}
+      totalStakedInProtocol={totalStakedInProtocol}
+      grixPrice={grixPrice}
       apr={apr}
       amount={amount}
       handleInputChange={handleInputChange}
diff --git a/src/pages/stakingPage/components/StakingCardContent.tsx b/src/pages/stakingPage/components/StakingCardContent.tsx
index a1e2c47..bd61414 100644
--- a/src/pages/stakingPage/components/StakingCardContent.tsx
+++ b/src/pages/stakingPage/components/StakingCardContent.tsx
@@ -12,6 +12,8 @@ type StakingCardContentProps = {
   description: string;
   stakedAmount: string;
   availableBalance: string;
+  totalStakedInProtocol: string;
+  grixPrice: number | null;
   apr: number;
   amount: string;
   handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
@@ -33,6 +35,8 @@ export const StakingCardContent: React.FC<StakingCardContentProps> = ({
   description,
   stakedAmount,
   availableBalance,
+  totalStakedInProtocol,
+  grixPrice,
   apr,
   amount,
   handleInputChange,
@@ -115,6 +119,30 @@ export const StakingCardContent: React.FC<StakingCardContentProps> = ({
             {apr.toFixed(2)}%
           </Text>
         </VStack>
+
+        <VStack align="stretch">
+          <Text fontSize="sm" color="gray.500" mb={1}>
+            Total Staked
+          </Text>
+          <VStack align="flex-start" spacing={1}>
+            <Text fontSize="xl" fontWeight="700" color="white">
+              {Number(totalStakedInProtocol).toLocaleString(undefined, {
+                minimumFractionDigits: 1,
+                maximumFractionDigits: 1,
+              })}
+            </Text>
+            {grixPrice && Number(totalStakedInProtocol) > 0 && (
+              <Text fontSize="sm" color="green.300" fontWeight="600">
+                ($
+                {(Number(totalStakedInProtocol) * grixPrice).toLocaleString(undefined, {
+                  minimumFractionDigits: 2,
+                  maximumFractionDigits: 2,
+                })}
+                )
+              </Text>
+            )}
+          </VStack>
+        </VStack>
       </SimpleGrid>
 
       <HStack spacing={4}>
diff --git a/src/pages/stakingPage/components/VestingModal.tsx b/src/pages/stakingPage/components/VestingModal.tsx
index e5344a7..efdd940 100644
--- a/src/pages/stakingPage/components/VestingModal.tsx
+++ b/src/pages/stakingPage/components/VestingModal.tsx
@@ -18,6 +18,7 @@ import { useEffect, useState } from 'react';
 import { FaEquals, FaPlus } from 'react-icons/fa';
 
 import { GrixLogo } from '@/components/commons/Logo';
+import { AssetPriceResponse } from '@/types/api';
 
 type VestingModalProps = {
   isOpen: boolean;
@@ -29,12 +30,6 @@ type VestingModalProps = {
   claimableRewards: string;
 };
 
-type DexScreenerResponse = {
-  grix: {
-    usd: number;
-  };
-};
-
 export const VestingModal = ({
   isOpen,
   onClose,
@@ -52,9 +47,14 @@ export const VestingModal = ({
   useEffect(() => {
     const fetchPrice = async () => {
       try {
-        const res = await fetch('https://api.coingecko.com/api/v3/simple/price?ids=grix&vs_currencies=usd');
-        const json = (await res.json()) as DexScreenerResponse;
-        const price = json.grix.usd;
+        const res = await fetch('https://z61hgkwkn8.execute-api.us-east-1.amazonaws.com/dev/assetprice?asset=GRIX', {
+          headers: {
+            'x-api-key': import.meta.env.VITE_GRIX_API_KEY,
+            origin: 'https://app.grix.finance',
+          },
+        });
+        const json = (await res.json()) as AssetPriceResponse;
+        const price = json.assetPrice;
         setGrixPrice(price);
       } catch {
         setGrixPrice(null);
diff --git a/src/pages/stakingPage/hooks/useVesting.ts b/src/pages/stakingPage/hooks/useVesting.ts
index 32063ea..4c57edc 100644
--- a/src/pages/stakingPage/hooks/useVesting.ts
+++ b/src/pages/stakingPage/hooks/useVesting.ts
@@ -1,7 +1,10 @@
 import { useCallback, useEffect, useState } from 'react';
-import { parseEther } from 'viem';
+import { erc20Abi, formatEther, parseEther } from 'viem';
 import { useAccount } from 'wagmi';
+import { readContract } from 'wagmi/actions';
 
+import { normalizeAddress } from '@/utils/web3Util';
+import { wagmiConfig } from '@/web3Config/reownConfig';
 import { stakingContracts } from '@/web3Config/staking/config';
 import {
   approveVesting,
@@ -24,8 +27,26 @@ export const useVesting = () => {
   const [esGrixBalance, setEsGrixBalance] = useState('0');
   const [grixBalance, setGrixBalance] = useState('0');
   const [vestingData, setVestingData] = useState<VestingData | null>(null);
+  const [totalStaked, setTotalStaked] = useState('0');
   const [isLoading, setIsLoading] = useState(false);
 
+  const fetchTotalStaked = useCallback(async () => {
+    try {
+      // Get total GRIX tokens staked in the vester contract
+      const balance = await readContract(wagmiConfig, {
+        abi: erc20Abi,
+        address: normalizeAddress(stakingContracts.grixToken.address),
+        functionName: 'balanceOf',
+        args: [normalizeAddress(stakingContracts.rewardTracker.address)],
+      });
+
+      const amount = formatEther(balance);
+      setTotalStaked(amount);
+    } catch (error) {
+      setTotalStaked('0');
+    }
+  }, []);
+
   const fetchVestingData = useCallback(async () => {
     if (!address) return;
 
@@ -35,6 +56,7 @@ export const useVesting = () => {
         getTokenBalance(stakingContracts.esGRIXToken.address, address),
         getTokenBalance(stakingContracts.grixToken.address, address),
         getVestingData(address),
+        fetchTotalStaked(),
       ]);
 
       setVestingAllowance(allowance.toString());
@@ -45,7 +67,7 @@ export const useVesting = () => {
       setVestingData(null);
       throw error;
     }
-  }, [address]);
+  }, [address, fetchTotalStaked]);
 
   useEffect(() => {
     void fetchVestingData();
@@ -80,6 +102,7 @@ export const useVesting = () => {
     esGrixBalance,
     grixBalance,
     vestingData,
+    totalStaked,
     isLoading,
     handleVest,
     fetchVestingData,
diff --git a/src/types/api.ts b/src/types/api.ts
new file mode 100644
index 0000000..7a08743
--- /dev/null
+++ b/src/types/api.ts
@@ -0,0 +1,5 @@
+// API Response Types
+
+export type AssetPriceResponse = {
+  assetPrice: number;
+};
diff --git a/src/web3Config/staking/hooks.ts b/src/web3Config/staking/hooks.ts
index 2e56df2..3f3f699 100644
--- a/src/web3Config/staking/hooks.ts
+++ b/src/web3Config/staking/hooks.ts
@@ -185,6 +185,36 @@ export const getStakedAmount = async (userAddress: string) => {
   }
 };
 
+// Get total GRIX staked in the protocol
+export const getTotalGrixStaked = async () => {
+  try {
+    const balance = await readContract(wagmiConfig, {
+      abi: erc20Abi,
+      address: normalizeAddress(stakingContracts.grixToken.address),
+      functionName: 'balanceOf',
+      args: [normalizeAddress(stakingContracts.rewardTracker.address)],
+    });
+    return formatEther(balance);
+  } catch (error) {
+    return '0';
+  }
+};
+
+// Get total esGRIX staked in the protocol
+export const getTotalEsGrixStaked = async () => {
+  try {
+    const balance = await readContract(wagmiConfig, {
+      abi: erc20Abi,
+      address: normalizeAddress(stakingContracts.esGRIXToken.address),
+      functionName: 'balanceOf',
+      args: [normalizeAddress(stakingContracts.rewardTracker.address)],
+    });
+    return formatEther(balance);
+  } catch (error) {
+    return '0';
+  }
+};
+
 // Update the getEsGrixStakedAmount function to correctly fetch esGRIX staked amount
 export const getEsGrixStakedAmount = async (userAddress: string) => {
   try {
@@ -250,32 +280,53 @@ export const getTotalStaked = async (userAddress: string) => {
 };
 //Staking APR Formula = (ETH rewards + esGS emissions annualized) / (Total GS + esGS staked) * 100
 export const calculateAPR = async () => {
-  // Get total staked amount using totalSupply from the reward tracker
-  const totalStaked = await readContract(wagmiConfig, {
-    abi: rewardTrackerAbi,
-    address: normalizeAddress(stakingContracts.rewardTracker.address),
-    functionName: 'totalSupply',
-    args: [],
-  });
-
-  if (totalStaked === 0n) return 0;
-
-  // Get ETH reward rate from rewardDistributor
-  const ethRewardRate = await getTokenPerInterval();
-
-  // Get esGrix emission rate (assuming it's from the reward distributor as well)
-  const esGrixRewardRate = await getTokenPerInterval();
-
-  // Calculate annual rewards (seconds in a year * tokens per interval)
-  const SECONDS_PER_YEAR = 365n * 24n * 60n * 60n;
-  const annualEthRewards = ethRewardRate * SECONDS_PER_YEAR;
-  const annualEsGrixRewards = esGrixRewardRate * SECONDS_PER_YEAR;
-  const totalAnnualRewards = annualEthRewards + annualEsGrixRewards;
-
-  // Calculate APR: (totalAnnualRewards / totalStaked) * 100
-  const apr = (totalAnnualRewards * 100n) / (totalStaked as bigint);
+  try {
+    // Get total staked amount using totalSupply from the reward tracker
+    const totalStaked = await readContract(wagmiConfig, {
+      abi: rewardTrackerAbi,
+      address: normalizeAddress(stakingContracts.rewardTracker.address),
+      functionName: 'totalSupply',
+      args: [],
+    });
 
-  return Number(apr);
+    if (totalStaked === 0n) return 0;
+
+    // Get core tracker to access fee distributor for ETH rewards
+    const coreTracker = await getCoreTracker();
+
+    // Get esGRIX emission rate from the main reward distributor
+    const esGrixRewardRate = await getTokenPerInterval();
+
+    // Get ETH reward rate from the fee distributor
+    let ethRewardRate = 0n;
+    if (coreTracker.feeDistributor && coreTracker.feeDistributor !== '0x0000000000000000000000000000000000000000') {
+      try {
+        ethRewardRate = await readContract(wagmiConfig, {
+          abi: rewardDistributorAbi,
+          address: normalizeAddress(coreTracker.feeDistributor),
+          functionName: 'tokensPerInterval',
+          args: [],
+        });
+      } catch {
+        // Error fetching ETH reward rate
+      }
+    }
+
+    // Calculate annual rewards (seconds in a year * tokens per interval)
+    const SECONDS_PER_YEAR = 365n * 24n * 60n * 60n;
+    const annualEthRewards = ethRewardRate * SECONDS_PER_YEAR;
+    const annualEsGrixRewards = esGrixRewardRate * SECONDS_PER_YEAR;
+    const totalAnnualRewards = annualEthRewards + annualEsGrixRewards;
+
+    // Calculate APR: (totalAnnualRewards / totalStaked) * 100
+    const apr = (totalAnnualRewards * 10000n) / (totalStaked as bigint);
+
+    // Convert to percentage with 2 decimal places
+    return Number(apr) / 100;
+  } catch {
+    // Error calculating APR
+    return 0;
+  }
 };
 // Add vesting allowance check
 export const checkVestingAllowance = async (owner: string, token: string) => {