diff --git a/src/features/common/utils/formatNumber.ts b/src/features/common/utils/formatNumber.ts
index 2f525d3..7147572 100644
--- a/src/features/common/utils/formatNumber.ts
+++ b/src/features/common/utils/formatNumber.ts
@@ -14,6 +14,7 @@ export const formatNumber = (
   } else {
     _number = number;
   }
+
   return _number.toLocaleString(window.navigator.language, {
     minimumFractionDigits: 0,
     maximumFractionDigits: 2,
diff --git a/src/features/staking/PieBar.tsx b/src/features/staking/PieBar.tsx
index 333baa5..6f2bbe6 100644
--- a/src/features/staking/PieBar.tsx
+++ b/src/features/staking/PieBar.tsx
@@ -23,23 +23,23 @@ export const PieBar = () => {
   const zeroBalance = !unstakablePercent && !stakedPercent && !unstakedPercent;
 
   const stakableData = [
-    {
-      color: "transparent",
-      bg: "checkered-blue",
-      var: unstaked,
-      text: "unstaked",
-    },
     {
       color: "text-blue-500",
       bg: null,
+      var: unstakable,
+      text: "unstakable",
+    },
+    {
+      color: "transparent",
+      bg: "checkered-blue",
       var: staked,
       text: "staked",
     },
     {
       color: "text-gray-500",
       bg: null,
-      var: unstakable,
-      text: "unstakable",
+      var: unstaked,
+      text: "Not staked",
     },
   ];
 
@@ -64,13 +64,13 @@ export const PieBar = () => {
     <div className="flex w-full flex-col my-6 gap-4">
       <div className="m-auto flex h-2 mb-2 w-full flex-row rounded-full">
         <div
-          style={{ flexBasis: `${unstakedPercent}%` }}
+          style={{ flexBasis: `${unstakablePercent}%` }}
           className={twJoin(
-            "checkered-blue",
+            "bg-airswap-blue",
             zeroBalance
               ? "min-w-full rounded-full"
               : "min-w-[3px] rounded-l-full",
-            unstakedPercent &&
+            unstakablePercent &&
               !stakedPercent &&
               !unstakablePercent &&
               "rounded-full",
@@ -78,13 +78,13 @@ export const PieBar = () => {
         />
         <div
           style={{ flexBasis: `${stakedPercent}%` }}
-          className={twJoin("bg-airswap-blue", stakedPercent && "min-w-[3px]")}
+          className={twJoin("checkered-blue", stakedPercent && "min-w-[3px]")}
         />
         <div
-          style={{ flexBasis: `${unstakablePercent}%` }}
+          style={{ flexBasis: `${unstakedPercent}%` }}
           className={twJoin(
             "bg-gray-500",
-            unstakablePercent && "min-w-[3px] rounded-r-full",
+            unstakedPercent && "min-w-[3px] rounded-r-full",
           )}
         />
       </div>