diff --git a/src/components/DoAllocate/DoAllocate.tsx b/src/components/DoAllocate/DoAllocate.tsx
index 593d1b8cc..63a136cde 100644
--- a/src/components/DoAllocate/DoAllocate.tsx
+++ b/src/components/DoAllocate/DoAllocate.tsx
@@ -31,9 +31,11 @@ interface IProps {
   deploymentId?: string;
   actionBtn?: React.ReactNode;
   onSuccess?: () => void;
+  initialStatus?: 'Add' | 'Remove';
+  disabled?: boolean;
 }
 
-const DoAllocate: FC<IProps> = ({ projectId, deploymentId, actionBtn, onSuccess }) => {
+const DoAllocate: FC<IProps> = ({ projectId, deploymentId, actionBtn, onSuccess, initialStatus, disabled }) => {
   const { address: account } = useAccount();
   const project = useProjectFromQuery(projectId ?? '');
   const { data: deploymentMetadata } = useDeploymentMetadata(deploymentId);
@@ -45,7 +47,7 @@ const DoAllocate: FC<IProps> = ({ projectId, deploymentId, actionBtn, onSuccess
   const { contracts } = useWeb3Store();
   const [open, setOpen] = useState(false);
   const [currentRewardsPerToken, setCurrentRewardsPerToken] = useState(BigNumber(0));
-  const [addOrRemove, setAddOrRemove] = useState<'Add' | 'Remove'>('Add');
+  const [addOrRemove, setAddOrRemove] = useState<'Add' | 'Remove'>(initialStatus || 'Add');
 
   const runnerAllocation = useAsyncMemo(async () => {
     if (!account)
@@ -63,6 +65,8 @@ const DoAllocate: FC<IProps> = ({ projectId, deploymentId, actionBtn, onSuccess
     };
   }, [account]);
 
+  console.warn(runnerAllocation.data?.total.toString(), runnerAllocation.data?.used.toString());
+
   const allocationRewardsRate = useAsyncMemo(async () => {
     const rewards = await contracts?.rewardsBooster.boosterQueryRewardRate(
       project.data?.type === ProjectType.RPC ? 1 : 0,
@@ -103,6 +107,7 @@ const DoAllocate: FC<IProps> = ({ projectId, deploymentId, actionBtn, onSuccess
 
   const avaibleStakeAmount = useMemo(() => {
     const leftAllocation = runnerAllocation.data?.left ? BigNumber(runnerAllocation.data?.left) : BigNumber(0);
+
     return leftAllocation.toString();
   }, [allocatedStake, runnerAllocation.data?.left]);
 
@@ -170,7 +175,8 @@ const DoAllocate: FC<IProps> = ({ projectId, deploymentId, actionBtn, onSuccess
   };
 
   useEffect(() => {
-    if (open && account && deploymentId) {
+    if (open && account && deploymentId && !disabled) {
+      setAddOrRemove(initialStatus || 'Add');
       getAllocatedStake({
         variables: {
           id: `${deploymentId}:${account}`,
@@ -180,14 +186,16 @@ const DoAllocate: FC<IProps> = ({ projectId, deploymentId, actionBtn, onSuccess
       getAllocateRewardsPerBlock();
       runnerAllocation.refetch();
     }
-  }, [open, account, deploymentId]);
+  }, [open, account, deploymentId, disabled]);
 
   return (
     <div className={styles.doAllocate}>
       {actionBtn ? (
         <div
           onClick={() => {
-            setOpen(true);
+            if (!disabled) {
+              setOpen(true);
+            }
           }}
         >
           {actionBtn}
diff --git a/src/components/ProjectHeader/ProjectHeader.tsx b/src/components/ProjectHeader/ProjectHeader.tsx
index ca81e8390..53bef99c6 100644
--- a/src/components/ProjectHeader/ProjectHeader.tsx
+++ b/src/components/ProjectHeader/ProjectHeader.tsx
@@ -3,7 +3,6 @@
 
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
-import DoAllocate from '@components/DoAllocate/DoAllocate';
 import UnsafeWarn from '@components/UnsafeWarn';
 import { Manifest } from '@hooks/useGetDeploymentManifest';
 import { ProjectDetailsQuery } from '@hooks/useProjectFromQuery';
@@ -84,7 +83,6 @@ const ProjectHeader: React.FC<Props> = ({
             {/* <Button type="primary" shape="round" size="large">
               Get RPC Endpoint
             </Button> */}
-            <DoAllocate projectId={project.id} deploymentId={currentVersion}></DoAllocate>
           </div>
           <Address address={project.owner} size="small" />
 
diff --git a/src/components/Status/Status.tsx b/src/components/Status/Status.tsx
index a2efd069b..3013334a5 100644
--- a/src/components/Status/Status.tsx
+++ b/src/components/Status/Status.tsx
@@ -16,7 +16,7 @@ export const deploymentStatus: { [key: string]: StatusColor } = {
   INDEXING: StatusColor.blue,
   STARTED: StatusColor.blue,
   READY: StatusColor.green,
-  NOTINDEXING: StatusColor.red,
+  NOTINDEXING: StatusColor.gray,
   TERMINATED: StatusColor.red,
 };
 
diff --git a/src/hooks/useSortedIndexerDeployments.tsx b/src/hooks/useSortedIndexerDeployments.tsx
index dc2cae39a..42e352fac 100644
--- a/src/hooks/useSortedIndexerDeployments.tsx
+++ b/src/hooks/useSortedIndexerDeployments.tsx
@@ -57,8 +57,17 @@ export function useSortedIndexerDeployments(indexer: string): AsyncData<Array<Us
     const filteredDeployments = indexerDeployments?.data?.indexerDeployments?.nodes?.filter(
       (deployment) => deployment?.status !== ServiceStatus.TERMINATED,
     );
+
+    // merge have allocation but not indexing project
+    const mergedDeployments = [
+      ...filteredDeployments,
+      ...(allocatedProjects.data?.indexerAllocationSummaries?.nodes.filter(
+        (i) => !filteredDeployments.find((j) => j?.deploymentId === i?.deploymentId),
+      ) || []),
+    ];
+
     return await Promise.all(
-      filteredDeployments.map(async (indexerDeployment) => {
+      mergedDeployments.map(async (indexerDeployment) => {
         const metadata: ProjectMetadata = indexerDeployment?.deployment?.project
           ? await getMetadataFromCid(indexerDeployment.deployment.project.metadata)
           : {
@@ -71,24 +80,29 @@ export function useSortedIndexerDeployments(indexer: string): AsyncData<Array<Us
               categories: [],
             };
 
-        const deploymentId = indexerDeployment?.deployment?.id;
+        const deploymentId =
+          indexerDeployment?.__typename === 'IndexerAllocationSummary'
+            ? indexerDeployment.deploymentId
+            : indexerDeployment?.deployment?.id;
         // TODO: get `offline` status from external api call
         const isOffline = false;
         let indexingErr = '';
         let sortedIndexingProcess = 0;
         let lastHeight = 0;
         try {
-          const res = await getDeploymentMetadata({
-            indexer,
-            proxyEndpoint,
-            deploymentId,
-          });
-          lastHeight = res?.lastHeight || 0;
-          sortedIndexingProcess = indexingProgress({
-            currentHeight: res?.lastHeight || 0,
-            startHeight: res?.startHeight || 0,
-            targetHeight: res?.targetHeight || 0,
-          });
+          if (indexerDeployment?.__typename === 'IndexerDeployment') {
+            const res = await getDeploymentMetadata({
+              indexer,
+              proxyEndpoint,
+              deploymentId,
+            });
+            lastHeight = res?.lastHeight || 0;
+            sortedIndexingProcess = indexingProgress({
+              currentHeight: res?.lastHeight || 0,
+              startHeight: res?.startHeight || 0,
+              targetHeight: res?.targetHeight || 0,
+            });
+          }
         } catch (e) {
           indexingErr = "Failed to fetch metadata from deployment's Query Service.";
         }
@@ -102,15 +116,19 @@ export function useSortedIndexerDeployments(indexer: string): AsyncData<Array<Us
           })
           ?.sum?.reward.toString();
 
+        const projectId =
+          indexerDeployment?.__typename === 'IndexerDeployment'
+            ? indexerDeployment.deployment?.project?.id
+            : indexerDeployment?.proejctId;
+
         return {
-          ...indexerDeployment,
           indexingErr,
           indexingProgress: sortedIndexingProcess,
           lastHeight,
           isOffline,
           deploymentId,
-          projectId: indexerDeployment?.deployment?.project?.id,
-          projectName: metadata.name ?? indexerDeployment?.deployment?.project?.id,
+          projectId,
+          projectName: metadata.name ?? projectId,
           projectMeta: {
             ...metadata,
           },
diff --git a/src/pages/indexer/MyProjects/OwnDeployments/OwnDeployments.tsx b/src/pages/indexer/MyProjects/OwnDeployments/OwnDeployments.tsx
index 00d982043..8ea5c8ccf 100644
--- a/src/pages/indexer/MyProjects/OwnDeployments/OwnDeployments.tsx
+++ b/src/pages/indexer/MyProjects/OwnDeployments/OwnDeployments.tsx
@@ -104,7 +104,7 @@ export const OwnDeployments: React.FC<Props> = ({ indexer, emptyList, desc }) =>
       dataIndex: 'indexingProgress',
       render: (indexingProgress: number, deployment) => {
         // TODO: will use metric service replace it. hardcode for now.
-        const sortedStatus = getDeploymentStatus(deployment.status as ServiceStatus, false);
+        const sortedStatus = deployment.status ? getDeploymentStatus(deployment.status, false) : 'NOTINDEXING';
 
         const { indexingErr } = deployment;
         if (indexingErr)
@@ -121,9 +121,13 @@ export const OwnDeployments: React.FC<Props> = ({ indexer, emptyList, desc }) =>
               </Typography>
               <Status text={sortedStatus} color={deploymentStatus[sortedStatus]} />
             </div>
-            <Typography type="secondary" variant="small">
-              Current blocks: #{deployment.lastHeight}
-            </Typography>
+            {deployment.lastHeight ? (
+              <Typography type="secondary" variant="small">
+                Current blocks: #{deployment.lastHeight}
+              </Typography>
+            ) : (
+              ''
+            )}
           </div>
         );
       },
@@ -159,12 +163,32 @@ export const OwnDeployments: React.FC<Props> = ({ indexer, emptyList, desc }) =>
             <DoAllocate
               deploymentId={deployment.deploymentId}
               projectId={deployment.projectId}
-              actionBtn={<Typography.Link active>Update Allocation</Typography.Link>}
+              actionBtn={<Typography.Link active>Add Allocation</Typography.Link>}
+              onSuccess={() => {
+                retry(() => {
+                  indexerDeployments.refetch?.();
+                });
+              }}
+              initialStatus="Add"
+            ></DoAllocate>
+
+            <DoAllocate
+              deploymentId={deployment.deploymentId}
+              projectId={deployment.projectId}
+              disabled={deployment.allocatedAmount === '0' || !deployment.allocatedAmount}
+              actionBtn={
+                <Typography
+                  type={deployment.allocatedAmount === '0' || !deployment.allocatedAmount ? 'secondary' : 'danger'}
+                >
+                  Remove Allocation
+                </Typography>
+              }
               onSuccess={() => {
                 retry(() => {
                   indexerDeployments.refetch?.();
                 });
               }}
+              initialStatus="Remove"
             ></DoAllocate>
           </div>
         );