diff --git a/src/main/client/app/pages/credentials/credentials-list.vue b/src/main/client/app/pages/credentials/credentials-list.vue
index aeddb9c78..dd296b3a5 100644
--- a/src/main/client/app/pages/credentials/credentials-list.vue
+++ b/src/main/client/app/pages/credentials/credentials-list.vue
@@ -28,6 +28,13 @@
           >
             <font-awesome-icon icon="edit" />
           </b-button>
+          <b-button
+            title="Delete this credentials"
+            variant="danger"
+            @click="deleteCredentials(credentials)"
+          >
+            <font-awesome-icon :icon="['far', 'trash-alt']" />
+          </b-button>
         </template>
       </b-card>
     </b-card-group>
@@ -35,9 +42,10 @@
 </template>
 
 <script>
-  import { getCredentialsList } from '@/shared/api/credentials-api';
+  import { getCredentialsList, deleteCredentials } from '@/shared/api/credentials-api';
 
   import { AppProviderHeader } from '@/shared/components';
+  import { displayConfirmDialog, displayNotification } from '@/shared/services/modal-service';
 
   export default {
     name: 'Credentials',
@@ -55,6 +63,24 @@
     async created() {
       this.credentialsList = await getCredentialsList();
     },
+
+    methods: {
+      async deleteCredentials(credentials) {
+        const message = 'This will delete the credentials. Continue?';
+        const confirm = await displayConfirmDialog(this, { title: 'Delete Request', message });
+        if (confirm) {
+          try {
+            await deleteCredentials(credentials);
+            displayNotification(this, { message: 'Credentials deleted.', variant: 'info' });
+
+            const index = this.credentialsList.findIndex((cred) => cred.id === credentials.id);
+            this.credentialsList.splice(index, 1);
+          } catch (e) {
+            displayNotification(this, { message: 'Unable to delete credentials.', variant: 'danger' });
+          }
+        }
+      },
+    },
   };
 </script>
 
@@ -66,4 +92,10 @@
   .card-title {
     margin: 0;
   }
+
+  .card-footer {
+    display: flex;
+    justify-content: space-between;
+
+  }
 </style>
diff --git a/src/main/client/app/shared/api/credentials-api.js b/src/main/client/app/shared/api/credentials-api.js
index 6512154b3..7f81d7c34 100644
--- a/src/main/client/app/shared/api/credentials-api.js
+++ b/src/main/client/app/shared/api/credentials-api.js
@@ -7,3 +7,5 @@ export const getCredentials = async (credentialsId) => axios.get(`/api/credentia
 export const updateCredentials = async (credentials) => axios.put(`/api/credentials/${credentials.id}`, credentials);
 
 export const createCredentials = async (credentials) => axios.post('/api/credentials', credentials);
+
+export const deleteCredentials = async (credentials) => axios.delete(`/api/credentials/${credentials.id}`);
diff --git a/src/main/java/io/gaia_app/credentials/CredentialsRestController.java b/src/main/java/io/gaia_app/credentials/CredentialsRestController.java
index d3d6e8d7f..fad4670e0 100644
--- a/src/main/java/io/gaia_app/credentials/CredentialsRestController.java
+++ b/src/main/java/io/gaia_app/credentials/CredentialsRestController.java
@@ -35,4 +35,9 @@ public Credentials createCredentials(@RequestBody Credentials credentials){
     public Credentials updateCredentials(@RequestBody Credentials credentials, @PathVariable  String id){
         return this.credentialsRepository.save(credentials);
     }
+
+    @DeleteMapping("/{id}")
+    public void deleteCredentials(@PathVariable String id){
+        this.credentialsRepository.deleteById(id);
+    }
 }