diff --git a/frontend/src/app/(routes)/staking/validator/[validator]/ValidatorProfile.tsx b/frontend/src/app/(routes)/staking/validator/[validator]/ValidatorProfile.tsx
index 5e44842a9..0fa407b3c 100644
--- a/frontend/src/app/(routes)/staking/validator/[validator]/ValidatorProfile.tsx
+++ b/frontend/src/app/(routes)/staking/validator/[validator]/ValidatorProfile.tsx
@@ -18,7 +18,8 @@ const ValidatorProfile = ({ moniker }: { moniker: string }) => {
   useInitAllValidator();
   const { getChainwiseValidatorInfo,
     getOasisValidatorInfo,
-    getPolygonValidatorInfo, getValidatorStats } =
+    getPolygonValidatorInfo,
+     getValidatorStats } =
     useGetValidatorInfo();
   const {
     chainWiseValidatorData,
@@ -48,7 +49,7 @@ const ValidatorProfile = ({ moniker }: { moniker: string }) => {
   totalDelegators += totalOasisDelegator
 
   return (
-    <div className="py-6 px-10 space-y-10 h-screen flex flex-col">
+    <div className="py-6 px-10 space-y-10 h-screen flex flex-col text-[#E1E1E1]">
       <div className="space-y-10">
         <div className="flex justify-between">
           <h2 className="text-[20px] leading-normal font-normal">
@@ -215,11 +216,11 @@ const StatsCard = ({ name, value }: { name: string; value: string }) => {
             draggable={false}
           />
         </div>
-        <div className="text-sm text-white font-extralight leading-normal">
+        <div className="text-sm text-[#E1E1E1] font-extralight leading-normal">
           {name}
         </div>
       </div>
-      <div className="px-2 pl-[10px] text-lg font-bold leading-normal text-white">
+      <div className="px-2 pl-[10px] text-lg font-bold leading-normal text-[#E1E1E1]">
         {value}
       </div>
     </div>
diff --git a/frontend/src/app/(routes)/staking/validator/[validator]/components/TableHeader.tsx b/frontend/src/app/(routes)/staking/validator/[validator]/components/TableHeader.tsx
index 8627a53cd..e02a541b5 100644
--- a/frontend/src/app/(routes)/staking/validator/[validator]/components/TableHeader.tsx
+++ b/frontend/src/app/(routes)/staking/validator/[validator]/components/TableHeader.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 const TableHeader = ({ title }: { title: string }) => {
   return (
     <th>
-      <div className="min-h-[17px] flex items-center text-sm not-italic font-normal leading-[normal]">
+      <div className="min-h-[17px] flex items-center text-sm not-italic font-normal leading-[normal] text-[#E1E1E1]">
         {title}
       </div>
     </th>
diff --git a/frontend/src/app/(routes)/staking/validator/[validator]/components/ValidatorItem.tsx b/frontend/src/app/(routes)/staking/validator/[validator]/components/ValidatorItem.tsx
index b0b35edfc..dff0992ec 100644
--- a/frontend/src/app/(routes)/staking/validator/[validator]/components/ValidatorItem.tsx
+++ b/frontend/src/app/(routes)/staking/validator/[validator]/components/ValidatorItem.tsx
@@ -119,7 +119,7 @@ const ValidatorItem = ({
   };
 
   return (
-    <tr>
+    <tr className='text-[#E1E1E1]'>
       <td>
         <NetworkItem
           logo={chainLogo}
diff --git a/frontend/src/app/(routes)/staking/validator/[validator]/components/ValidatorsTable.tsx b/frontend/src/app/(routes)/staking/validator/[validator]/components/ValidatorsTable.tsx
index 25814bd28..9547fbb37 100644
--- a/frontend/src/app/(routes)/staking/validator/[validator]/components/ValidatorsTable.tsx
+++ b/frontend/src/app/(routes)/staking/validator/[validator]/components/ValidatorsTable.tsx
@@ -27,8 +27,17 @@ const ValidatorsTable = ({
     'Actions',
   ];
 
+  const sortedKeys = Object.keys(data).sort((a, b) => {
+    return parseInt(data[b].totalStakedInUSD) - parseInt(data[a].totalStakedInUSD);
+  });
+  
+  const sortedObject: Record<string, ValidatorProfileInfo> = {};
+  sortedKeys.forEach(key => {
+    sortedObject[key] = data[key];
+  });
+
   return (
-    <div className="flex flex-col flex-1 overflow-y-scroll">
+    <div className="flex flex-col flex-1 overflow-y-scroll text-[#E1E1E1]">
       <div className="validators-table bg-[#1a1a1b] px-8 py-8">
         <div className="flex flex-col flex-1">
           <div className="flex-1">
@@ -41,7 +50,13 @@ const ValidatorsTable = ({
                 </tr>
               </thead>
               <tbody className="flex-1">
-                {Object.keys(data).map((chainID) => {
+                {isWitval ? (
+                  <>
+                    <NonCosmosValidators networkName={'polygon'} />
+                    <NonCosmosValidators networkName={'oasis'} />
+                  </>
+                ) : null}
+                {Object.keys(sortedObject).map((chainID) => {
                   return (
                     <ValidatorItem
                       validatorInfo={data[chainID]}
@@ -49,12 +64,7 @@ const ValidatorsTable = ({
                     />
                   );
                 })}
-                {isWitval ? (
-                  <>
-                    <NonCosmosValidators networkName={'polygon'} />
-                    <NonCosmosValidators networkName={'oasis'} />
-                  </>
-                ) : null}
+
               </tbody>
             </table>
           </div>
@@ -89,7 +99,7 @@ const NonCosmosValidators = ({ networkName }: { networkName: string }) => {
   const connected = useAppSelector((state) => state.wallet.connected);
 
   return (
-    <tr>
+    <tr className='text-[#E1E1E1]'>
       <td>
         <NetworkItem
           logo={logo}
diff --git a/frontend/src/custom-hooks/useGetValidatorInfo.ts b/frontend/src/custom-hooks/useGetValidatorInfo.ts
index 998c4b61d..0887030be 100644
--- a/frontend/src/custom-hooks/useGetValidatorInfo.ts
+++ b/frontend/src/custom-hooks/useGetValidatorInfo.ts
@@ -174,6 +174,7 @@ const useGetValidatorInfo = () => {
         stakingData[validator.chainID].validatorProfiles?.[
         validator.operatorAddress
         ];
+
       totalDelegators += Number(delegatorsCount?.totalDelegators || 0);
       totalCommission += Number(validator?.commission) || 0;
       if (validator.validatorStatus === 'BOND_STATUS_BONDED') {
@@ -186,10 +187,11 @@ const useGetValidatorInfo = () => {
         const {
           commission,
           totalDelegators: delegators,
-          totalStakedInUSD: totalStaked,
+          // totalStakedInUSD: totalStaked,
         } = getPolygonValidatorInfo();
         totalCommission += Number(commission || 0);
-        totalDelegators += totalStaked;
+        // totalDelegators += totalStaked;
+        // totalStaked+=totalS
         totalDelegators += delegators;
         activeNetworks += 1;
         totalNetworks += 1;
@@ -199,10 +201,10 @@ const useGetValidatorInfo = () => {
         const {
           commission,
           totalDelegators: delegators,
-          totalStakedInUSD: totalStaked,
+          // totalStakedInUSD: totalStaked,
         } = getOasisValidatorInfo();
         totalCommission += Number(commission || 0);
-        totalDelegators += totalStaked;
+        // totalDelegators += totalStaked;
         totalDelegators += delegators;
         activeNetworks += 1;
         totalNetworks += 1;