diff --git a/frontend/src/components/pipelines-or-deployments/pipelines-or-deployments/PipelinesOrDeployments.jsx b/frontend/src/components/pipelines-or-deployments/pipelines-or-deployments/PipelinesOrDeployments.jsx
index 1be909ec6c..08c6aed0bf 100644
--- a/frontend/src/components/pipelines-or-deployments/pipelines-or-deployments/PipelinesOrDeployments.jsx
+++ b/frontend/src/components/pipelines-or-deployments/pipelines-or-deployments/PipelinesOrDeployments.jsx
@@ -15,7 +15,7 @@ import { useEffect, useState } from "react";
 import { CustomButton } from "../../widgets/custom-button/CustomButton.jsx";
 import "./PipelinesOrDeployments.css";
 
-import { listOfAppDeployments } from "../../../helpers/GetStaticData";
+import { EmptyState } from "../../widgets/empty-state/EmptyState";
 import { SpinnerLoader } from "../../widgets/spinner-loader/SpinnerLoader.jsx";
 import { DeleteModal } from "../delete-modal/DeleteModal.jsx";
 import { EtlTaskDeploy } from "../etl-task-deploy/EtlTaskDeploy.jsx";
@@ -29,10 +29,10 @@ function PipelinesOrDeployments({ type }) {
   const [openDeleteModal, setOpenDeleteModal] = useState(false);
   const [selectedPorD, setSelectedPorD] = useState({});
 
+  // TODO: add appdeployment management logic when it is available
   useEffect(() => {
     setHeaderText("App Deployments");
     setModalTitle("Deploy App");
-    setTableData(listOfAppDeployments);
   }, [type]);
 
   const actionItems = [
@@ -225,7 +225,6 @@ function PipelinesOrDeployments({ type }) {
       ),
     },
   ];
-
   return (
     <div className="p-or-d-layout">
       <ToolNavBar
@@ -236,6 +235,7 @@ function PipelinesOrDeployments({ type }) {
               type="primary"
               icon={<PlusOutlined />}
               onClick={() => setOpenEtlOrTaskModal(true)}
+              disabled={true}
             >
               App Deployment
             </CustomButton>
@@ -245,14 +245,18 @@ function PipelinesOrDeployments({ type }) {
       <div className="p-or-d-body1">
         <div className="p-or-d-body2">
           <div className="p-or-d-table">
-            <div>
-              <Table
-                size="small"
-                columns={columns}
-                dataSource={tableData}
-                rowKey="id"
-              />
-            </div>
+            {!tableData || tableData?.length === 0 ? (
+              <EmptyState text="Coming soon" />
+            ) : (
+              <div>
+                <Table
+                  size="small"
+                  columns={columns}
+                  dataSource={tableData}
+                  rowKey="id"
+                />
+              </div>
+            )}
           </div>
         </div>
       </div>