diff --git a/src/plugins/credential_management/public/components/edit_credential/edit_credential.tsx b/src/plugins/credential_management/public/components/edit_credential/edit_credential.tsx
index 3e9e4880097a..acdf1d2720b4 100644
--- a/src/plugins/credential_management/public/components/edit_credential/edit_credential.tsx
+++ b/src/plugins/credential_management/public/components/edit_credential/edit_credential.tsx
@@ -20,6 +20,10 @@ import {
   EuiButton,
   EuiPageContent,
   EuiFieldPassword,
+  EuiFlexItem,
+  EuiToolTip,
+  EuiButtonIcon,
+  EuiConfirmModal,
 } from '@elastic/eui';
 import { DocLinksStart } from 'src/core/public';
 import { getCreateBreadcrumbs } from '../breadcrumbs';
@@ -36,6 +40,7 @@ interface EditCredentialState {
   dual: boolean;
   toasts: EuiGlobalToastListToast[];
   docLinks: DocLinksStart;
+  isVisible: boolean;
 }
 
 export interface EditCredentialProps extends RouteComponentProps {
@@ -61,6 +66,7 @@ export class EditCredentialComponent extends React.Component<
       dual: true,
       toasts: [],
       docLinks: context.services.docLinks,
+      isVisible: false,
     };
   }
 
@@ -72,6 +78,23 @@ export class EditCredentialComponent extends React.Component<
 
     return (
       <EuiPageContent>
+        <div style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "end"
+        }}>
+          <EuiFlexItem>
+            <EuiToolTip content="Remove this credential">
+              <EuiButtonIcon
+                color="danger"
+                onClick={this.removeCredential}
+                iconType="trash"
+                aria-label={"Remove this credential"}
+              // data-test-subj="deleteIndexPatternButton"
+              />
+            </EuiToolTip>
+          </EuiFlexItem>
+        </div>
         <EuiHorizontalRule />
         <EuiForm component="form">
           <EuiDescribedFormGroup
@@ -161,10 +184,37 @@ export class EditCredentialComponent extends React.Component<
           }}
           toastLifeTimeMs={6000}
         />
+        {
+          this.state.isVisible ?
+            <EuiConfirmModal
+              title="Delete credential permanently?"
+              onCancel={() => { this.setState({ isVisible: false }) }}
+              onConfirm={async () => {
+                const { savedObjects } = this.context.services;
+                try {
+                  //await deleteCredentials(savedObjects.client, [this.props.credential]);
+                  await savedObjects.client.delete('credential', this.props.credential.id);
+                  this.props.history.push('');
+                } catch (e) {
+                  console.log(e);
+                }
+              }}
+              cancelButtonText="Cancel"
+              confirmButtonText="Delete"
+              defaultFocusedButton="confirm">
+              <p>This will also delete their credential materials. All data sources using this credential will be invalid for access, and they must choose new credentials. </p>
+              <p>To confirm deletion, enter delete in the text input field.</p>
+              <p>Note: this action is irrevocable!</p>
+            </EuiConfirmModal> : null
+        }
       </>
     );
   }
 
+  removeCredential = async () => {
+    this.setState({ isVisible: true })
+  }
+
   updateCredential = async () => {
     const { savedObjects } = this.context.services;
     try {