diff --git a/public/components/data_connections/components/data_connection.tsx b/public/components/data_connections/components/data_connection.tsx
index 0df41e30f..42e034871 100644
--- a/public/components/data_connections/components/data_connection.tsx
+++ b/public/components/data_connections/components/data_connection.tsx
@@ -69,9 +69,7 @@ export const DataConnection = (props: any) => {
         })
       )
       .catch((err) => {
-        if (err.body.statusCode === 403) {
-          setHasAccess(false);
-        }
+        setHasAccess(false);
       });
   }, [chrome, http]);
 
diff --git a/public/components/data_connections/components/manage_data_connections_table.tsx b/public/components/data_connections/components/manage_data_connections_table.tsx
index 3f352d2b9..eead0d132 100644
--- a/public/components/data_connections/components/manage_data_connections_table.tsx
+++ b/public/components/data_connections/components/manage_data_connections_table.tsx
@@ -21,6 +21,8 @@ import { DataConnectionsHeader } from './data_connections_header';
 import { HomeProps } from '../home';
 import { DataConnectionsDescription } from './manage_data_connections_description';
 import { ChromeStart } from '../../../../../../src/core/public';
+import { DATACONNECTIONS_BASE } from '../../../../common/constants/shared';
+import { useToast } from '../../../../public/components/common/toast';
 
 interface DataConnection {
   connectionType: 'OPENSEARCH' | 'SPARK';
@@ -31,8 +33,18 @@ interface DataConnection {
 export const ManageDataConnectionsTable = (props: HomeProps) => {
   const { http, chrome, pplService } = props;
 
+  const { setToast } = useToast();
+
   const [data, setData] = useState([]);
-  const [hasAccess, setHasAccess] = useState(true);
+
+  const deleteConnection = (connection: string) => {
+    http!
+      .delete(`${DATACONNECTIONS_BASE}/${connection}`)
+      .then(() => setToast(`Data connection ${connection} deleted successfully`))
+      .catch((err) => {
+        setToast(`Data connection $${connection} not deleted. See output for more details.`);
+      });
+  };
 
   useEffect(() => {
     chrome.setBreadcrumbs([
@@ -83,17 +95,6 @@ export const ManageDataConnectionsTable = (props: HomeProps) => {
         </EuiFlexGroup>
       ),
     },
-    {
-      field: 'connectionStatus',
-      name: 'Connection Status',
-      sortable: true,
-      truncateText: true,
-      render: (value, record) => (
-        <EuiText data-test-subj={`${record.templateName}DataConnectionHealth`}>
-          {_.truncate(record.creationDate, { length: 100 })}
-        </EuiText>
-      ),
-    },
     {
       field: 'actions',
       name: 'Actions',
@@ -103,7 +104,7 @@ export const ManageDataConnectionsTable = (props: HomeProps) => {
         <EuiIcon
           type={'trash'}
           onClick={() => {
-            /* Delete Datasource*/
+            deleteConnection(record.name);
           }}
         />
       ),
diff --git a/public/components/data_connections/components/no_access.tsx b/public/components/data_connections/components/no_access.tsx
index 5c07b2893..c1ecbba1d 100644
--- a/public/components/data_connections/components/no_access.tsx
+++ b/public/components/data_connections/components/no_access.tsx
@@ -12,11 +12,11 @@ export const NoAccess = () => {
     <EuiPage>
       <EuiEmptyPrompt
         iconType="alert"
-        title={<h2>{'No permissions to access'}</h2>}
+        title={<h2>{'No permissions to access or resource does not exist'}</h2>}
         body={
           <EuiText>
             {
-              'Missing permissions to view connection details. Contact your administrator for permissions.'
+              'This connection does not exist or you are missing permissions to view connection details. Contact your administrator for permissions.'
             }
           </EuiText>
         }
diff --git a/public/components/data_connections/components/query_permissions.tsx b/public/components/data_connections/components/query_permissions.tsx
index d983015fe..eee8312a8 100644
--- a/public/components/data_connections/components/query_permissions.tsx
+++ b/public/components/data_connections/components/query_permissions.tsx
@@ -23,10 +23,10 @@ import { PermissionsConfigurationProps } from '../../../../common/types/data_con
 export const QueryPermissionsConfiguration = (props: PermissionsConfigurationProps) => {
   const { roles, selectedRoles, setSelectedRoles } = props;
 
-  const [selectedRadio, setSelectedRadio] = useState(
+  const [selectedAccessLevel, setSelectedAccessLevel] = useState(
     selectedRoles.length ? QUERY_RESTRICTED : QUERY_ALL
   );
-  const radios = [
+  const accessLevelOptions = [
     {
       id: QUERY_RESTRICTED,
       label: 'Restricted - accessible by users with specific OpenSearch roles',
@@ -71,15 +71,15 @@ export const QueryPermissionsConfiguration = (props: PermissionsConfigurationPro
         </EuiFlexItem>
         <EuiFlexItem>
           <EuiRadioGroup
-            options={radios}
-            idSelected={selectedRadio}
-            onChange={(id) => setSelectedRadio(id)}
+            options={accessLevelOptions}
+            idSelected={selectedAccessLevel}
+            onChange={(id) => setSelectedAccessLevel(id)}
             name="query-radio-group"
             legend={{
               children: <span>Access level</span>,
             }}
           />
-          {selectedRadio === QUERY_RESTRICTED && <ConfigureRoles />}
+          {selectedAccessLevel === QUERY_RESTRICTED && <ConfigureRoles />}
         </EuiFlexItem>
       </EuiFlexGroup>
     </EuiFlexItem>
diff --git a/server/adaptors/ppl_plugin.ts b/server/adaptors/ppl_plugin.ts
index ddc2a2ccf..563c43672 100644
--- a/server/adaptors/ppl_plugin.ts
+++ b/server/adaptors/ppl_plugin.ts
@@ -55,6 +55,19 @@ export const PPLPlugin = function (Client, config, components) {
     method: 'GET',
   });
 
+  ppl.deleteDataConnection = ca({
+    url: {
+      fmt: `${OPENSEARCH_DATACONNECTIONS_API.DATACONNECTION}/<%=dataconnection%>`,
+      req: {
+        dataconnection: {
+          type: 'string',
+          required: true,
+        },
+      },
+    },
+    method: 'DELETE',
+  });
+
   ppl.modifyDataConnection = ca({
     url: {
       fmt: `${OPENSEARCH_DATACONNECTIONS_API.DATACONNECTION}`,
diff --git a/server/routes/data_connections/data_connections_router.ts b/server/routes/data_connections/data_connections_router.ts
index b0f2b2bad..a65660ba4 100644
--- a/server/routes/data_connections/data_connections_router.ts
+++ b/server/routes/data_connections/data_connections_router.ts
@@ -37,6 +37,35 @@ export function registerDataConnectionsRoute(router: IRouter) {
     }
   );
 
+  router.delete(
+    {
+      path: `${DATACONNECTIONS_BASE}/{name}`,
+      validate: {
+        params: schema.object({
+          name: schema.string(),
+        }),
+      },
+    },
+    async (context, request, response): Promise<any> => {
+      try {
+        const dataConnectionsresponse = await context.observability_plugin.observabilityClient
+          .asScoped(request)
+          .callAsCurrentUser('ppl.deleteDataConnection', {
+            dataconnection: request.params.name,
+          });
+        return response.ok({
+          body: dataConnectionsresponse,
+        });
+      } catch (error: any) {
+        console.error('Issue in deleting data connection:', error);
+        return response.custom({
+          statusCode: error.statusCode || 500,
+          body: error.message,
+        });
+      }
+    }
+  );
+
   router.put(
     {
       path: `${DATACONNECTIONS_BASE}`,