diff --git a/ui/src/api/api.tsx b/ui/src/api/api.tsx
index 6c8b6f665..3fb08bad8 100644
--- a/ui/src/api/api.tsx
+++ b/ui/src/api/api.tsx
@@ -245,3 +245,20 @@ export const authAxios = async (msalInstance: PublicClientApplication) => {
   );
   return axios;
 };
+
+export const deleteEntity = async (enity: string) => {
+  const axios = await authAxios(msalInstance);
+  return axios.delete(`${getApiBaseUrl()}/entity/${enity}`);
+};
+
+export const getDependent = async (entity: string) => {
+  const axios = await authAxios(msalInstance);
+  return await axios
+    .get(`${getApiBaseUrl()}/dependent/${entity}`)
+    .then((response) => {
+      return response;
+    })
+    .catch((error) => {
+      return error.response;
+    });
+};
diff --git a/ui/src/pages/dataSource/components/DataSourceTable/index.tsx b/ui/src/pages/dataSource/components/DataSourceTable/index.tsx
index 951bd39fd..19f42de6d 100644
--- a/ui/src/pages/dataSource/components/DataSourceTable/index.tsx
+++ b/ui/src/pages/dataSource/components/DataSourceTable/index.tsx
@@ -1,10 +1,11 @@
 import React, { forwardRef, useRef } from "react";
-import { Button } from "antd";
+import { Button, message, notification, Popconfirm, Space } from "antd";
 import { useQuery } from "react-query";
 import { useNavigate } from "react-router-dom";
 import { DataSource } from "@/models/model";
-import { fetchDataSources } from "@/api";
+import { fetchDataSources, deleteEntity } from "@/api";
 import ResizeTable, { ResizeColumnType } from "@/components/ResizeTable";
+import { DeleteOutlined } from "@ant-design/icons";
 
 export interface DataSourceTableProps {
   project?: string;
@@ -92,25 +93,45 @@ const DataSourceTable = (props: DataSourceTableProps, ref: any) => {
     {
       title: "Action",
       fixed: "right",
-      width: 130,
+      width: 200,
       resize: false,
       render: (record: DataSource) => {
+        const { guid } = record;
         return (
-          <Button
-            type="primary"
-            ghost
-            onClick={() => {
-              navigate(getDetialUrl(record.guid));
-            }}
-          >
-            View Details
-          </Button>
+          <Space size="middle">
+            <Button
+              type="primary"
+              ghost
+              onClick={() => {
+                navigate(getDetialUrl(guid));
+              }}
+            >
+              View Details
+            </Button>
+            <Popconfirm
+              title="Are you sure to delete this data source?"
+              placement="topRight"
+              onConfirm={() => {
+                return new Promise((resolve) => {
+                  onDelete(guid, resolve);
+                });
+              }}
+            >
+              <Button type="primary" danger ghost icon={<DeleteOutlined />}>
+                Detete
+              </Button>
+            </Popconfirm>
+          </Space>
         );
       },
     },
   ];
 
-  const { isLoading, data: tableData } = useQuery<DataSource[]>(
+  const {
+    isLoading,
+    data: tableData,
+    refetch,
+  } = useQuery<DataSource[]>(
     ["dataSources", project],
     async () => {
       if (project) {
@@ -126,6 +147,24 @@ const DataSourceTable = (props: DataSourceTableProps, ref: any) => {
     }
   );
 
+  const onDelete = async (
+    entity: string,
+    resolve: (value?: unknown) => void
+  ) => {
+    try {
+      await deleteEntity(entity);
+      message.success("The date source is deleted successfully.");
+      refetch();
+    } catch (e: any) {
+      notification.error({
+        message: "",
+        description: e.detail,
+        placement: "top",
+      });
+    } finally {
+      resolve();
+    }
+  };
   return (
     <ResizeTable
       rowKey="guid"
diff --git a/ui/src/pages/feature/components/FeatureTable/index.tsx b/ui/src/pages/feature/components/FeatureTable/index.tsx
index 69e9c1ae6..28f729f51 100644
--- a/ui/src/pages/feature/components/FeatureTable/index.tsx
+++ b/ui/src/pages/feature/components/FeatureTable/index.tsx
@@ -1,12 +1,13 @@
 import React, { forwardRef, useRef } from "react";
-import { Button } from "antd";
+import { Button, notification, message, Popconfirm, Space } from "antd";
 import { useQuery } from "react-query";
 import { useNavigate } from "react-router-dom";
 import { Feature } from "@/models/model";
-import { fetchFeatures } from "@/api";
+import { fetchFeatures, deleteEntity } from "@/api";
 import ResizeTable, { ResizeColumnType } from "@/components/ResizeTable";
+import { DeleteOutlined } from "@ant-design/icons";
 
-export interface DataSourceTableProps {
+export interface FeatureTableProps {
   project?: string;
   keyword?: string;
 }
@@ -16,7 +17,7 @@ export interface SearchModel {
   roleName?: string;
 }
 
-const DataSourceTable = (props: DataSourceTableProps, ref: any) => {
+const FeatureTable = (props: FeatureTableProps, ref: any) => {
   const navigate = useNavigate();
 
   const { project, keyword } = props;
@@ -97,25 +98,45 @@ const DataSourceTable = (props: DataSourceTableProps, ref: any) => {
     {
       title: "Action",
       fixed: "right",
-      width: 100,
+      width: 200,
       resize: false,
       render: (record: Feature) => {
+        const { guid } = record;
         return (
-          <Button
-            type="primary"
-            ghost
-            onClick={() => {
-              navigate(getDetialUrl(record.guid));
-            }}
-          >
-            View Details
-          </Button>
+          <Space size="middle">
+            <Button
+              type="primary"
+              ghost
+              onClick={() => {
+                navigate(getDetialUrl(guid));
+              }}
+            >
+              View Details
+            </Button>
+            <Popconfirm
+              title="Are you sure to delete this feature?"
+              placement="topRight"
+              onConfirm={() => {
+                return new Promise((resolve) => {
+                  onDelete(guid, resolve);
+                });
+              }}
+            >
+              <Button type="primary" danger ghost icon={<DeleteOutlined />}>
+                Detete
+              </Button>
+            </Popconfirm>
+          </Space>
         );
       },
     },
   ];
 
-  const { isLoading, data: tableData } = useQuery<Feature[]>(
+  const {
+    isLoading,
+    data: tableData,
+    refetch,
+  } = useQuery<Feature[]>(
     ["dataSources", project, keyword],
     async () => {
       if (project) {
@@ -131,6 +152,25 @@ const DataSourceTable = (props: DataSourceTableProps, ref: any) => {
     }
   );
 
+  const onDelete = async (
+    entity: string,
+    resolve: (value?: unknown) => void
+  ) => {
+    try {
+      await deleteEntity(entity);
+      message.success("The feature is deleted successfully.");
+      refetch();
+    } catch (e: any) {
+      notification.error({
+        message: "",
+        description: e.detail,
+        placement: "top",
+      });
+    } finally {
+      resolve();
+    }
+  };
+
   return (
     <ResizeTable
       rowKey="guid"
@@ -142,10 +182,10 @@ const DataSourceTable = (props: DataSourceTableProps, ref: any) => {
   );
 };
 
-const DataSourceTableComponent = forwardRef<unknown, DataSourceTableProps>(
-  DataSourceTable
+const FeatureTableComponent = forwardRef<unknown, FeatureTableProps>(
+  FeatureTable
 );
 
-DataSourceTableComponent.displayName = "DataSourceTableComponent";
+FeatureTableComponent.displayName = "FeatureTableComponent";
 
-export default DataSourceTableComponent;
+export default FeatureTableComponent;
diff --git a/ui/src/pages/project/components/ProjectTable/index.tsx b/ui/src/pages/project/components/ProjectTable/index.tsx
index 566d1443c..0a29ccd37 100644
--- a/ui/src/pages/project/components/ProjectTable/index.tsx
+++ b/ui/src/pages/project/components/ProjectTable/index.tsx
@@ -1,10 +1,11 @@
 import React, { forwardRef } from "react";
-import { Button, Space } from "antd";
+import { Button, Space, notification, Popconfirm, message } from "antd";
 import { useQuery } from "react-query";
 import { useNavigate } from "react-router-dom";
 import { Project } from "@/models/model";
-import { fetchProjects } from "@/api";
+import { fetchProjects, deleteEntity } from "@/api";
 import ResizeTable, { ResizeColumnType } from "@/components/ResizeTable";
+import { DeleteOutlined } from "@ant-design/icons";
 
 export interface ProjectTableProps {
   project?: string;
@@ -30,7 +31,7 @@ const ProjectTable = (props: ProjectTableProps, ref: any) => {
     {
       key: "action",
       title: "Action",
-      width: 130,
+      width: 240,
       resize: false,
       render: (record: Project) => {
         const { name } = record;
@@ -54,13 +55,30 @@ const ProjectTable = (props: ProjectTableProps, ref: any) => {
             >
               View Lineage
             </Button>
+            <Popconfirm
+              title="Are you sure to delete this project?"
+              placement="topRight"
+              onConfirm={() => {
+                return new Promise((resolve) => {
+                  onDelete(name, resolve);
+                });
+              }}
+            >
+              <Button type="primary" danger ghost icon={<DeleteOutlined />}>
+                Detete
+              </Button>
+            </Popconfirm>
           </Space>
         );
       },
     },
   ];
 
-  const { isLoading, data: tableData } = useQuery<Project[]>(
+  const {
+    isLoading,
+    data: tableData,
+    refetch,
+  } = useQuery<Project[]>(
     ["Projects", project],
     async () => {
       const reuslt = await fetchProjects();
@@ -79,6 +97,25 @@ const ProjectTable = (props: ProjectTableProps, ref: any) => {
     }
   );
 
+  const onDelete = async (
+    entity: string,
+    resolve: (value?: unknown) => void
+  ) => {
+    try {
+      await deleteEntity(entity);
+      message.success("The project is deleted successfully.");
+      refetch();
+    } catch (e: any) {
+      notification.error({
+        message: "",
+        description: e.detail,
+        placement: "top",
+      });
+    } finally {
+      resolve();
+    }
+  };
+
   return (
     <ResizeTable
       rowKey="name"