diff --git a/src/components/DoAllocate/DoAllocate.tsx b/src/components/DoAllocate/DoAllocate.tsx
index 188694253..593d1b8cc 100644
--- a/src/components/DoAllocate/DoAllocate.tsx
+++ b/src/components/DoAllocate/DoAllocate.tsx
@@ -103,11 +103,7 @@ const DoAllocate: FC<IProps> = ({ projectId, deploymentId, actionBtn, onSuccess
 
   const avaibleStakeAmount = useMemo(() => {
     const leftAllocation = runnerAllocation.data?.left ? BigNumber(runnerAllocation.data?.left) : BigNumber(0);
-    const haveAllocated = formatSQT(
-      BigNumber(allocatedStake.data?.indexerAllocationSummary?.totalAmount.toString() || '0').toString(),
-    );
-
-    return leftAllocation.plus(haveAllocated).toString();
+    return leftAllocation.toString();
   }, [allocatedStake, runnerAllocation.data?.left]);
 
   const currentAllocatedTokensOfThisDeployment = useMemo(() => {
@@ -123,7 +119,7 @@ const DoAllocate: FC<IProps> = ({ projectId, deploymentId, actionBtn, onSuccess
   const estimatedRewardsAfterInput = useMemo(() => {
     // lack div all tokens
     // to know all tokens that already allocated is not very easy.
-    if (estimatedRewardsPerTokenOneEra.eq(0)) {
+    if (estimatedRewardsPerTokenOneEra.eq(0) || !formAllocateVal) {
       return 'Unkonwn';
     }
 
diff --git a/src/pages/indexer/MyProjects/OwnDeployments/OwnDeployments.tsx b/src/pages/indexer/MyProjects/OwnDeployments/OwnDeployments.tsx
index e0e19c5cc..00d982043 100644
--- a/src/pages/indexer/MyProjects/OwnDeployments/OwnDeployments.tsx
+++ b/src/pages/indexer/MyProjects/OwnDeployments/OwnDeployments.tsx
@@ -194,6 +194,24 @@ export const OwnDeployments: React.FC<Props> = ({ indexer, emptyList, desc }) =>
 
             const sortedData = indexerDepolymentsData?.sort((deployment) => (deployment.isOffline ? 1 : -1));
 
+            const total = BigNumberJs(sortedIndexerData?.ownStake.current || 0)
+              .plus(BigNumberJs(sortedIndexerData?.totalDelegations.current || 0))
+              .plus(BigNumberJs(runnerAllocationData?.left || 0));
+            const renderLineData = {
+              ownStake: BigNumberJs(sortedIndexerData?.ownStake.current || 0)
+                .div(total)
+                .multipliedBy(100)
+                .toFixed(2),
+              delegation: BigNumberJs(sortedIndexerData?.totalDelegations.current || 0)
+                .div(total)
+                .multipliedBy(100)
+                .toFixed(2),
+              unAllocation: BigNumberJs(runnerAllocationData?.left || 0)
+                .div(total)
+                .multipliedBy(100)
+                .toFixed(2),
+            };
+
             return (
               <>
                 {sortedDesc && <div className={styles.desc}>{sortedDesc}</div>}
@@ -229,10 +247,34 @@ export const OwnDeployments: React.FC<Props> = ({ indexer, emptyList, desc }) =>
                             width: '100%',
                             height: 12,
                             borderRadius: 4,
-                            background: 'var(--sq-warning)',
                             margin: '12px 0 20px 0',
+                            overflow: 'hidden',
+                            display: 'flex',
+                            alignItems: 'center',
                           }}
-                        ></div>
+                        >
+                          <div
+                            style={{
+                              width: `${renderLineData.ownStake}%`,
+                              height: '100%',
+                              background: 'var(--sq-blue600)',
+                            }}
+                          ></div>
+                          <div
+                            style={{
+                              width: `${renderLineData.delegation}%`,
+                              height: '100%',
+                              background: 'var(--sq-success)',
+                            }}
+                          ></div>
+                          <div
+                            style={{
+                              width: `${renderLineData.unAllocation}%`,
+                              height: '100%',
+                              background: 'var(--sq-warning)',
+                            }}
+                          ></div>
+                        </div>
 
                         <div style={{ display: 'flex', gap: 53 }}>
                           {[