diff --git a/app/server/static/components/label.vue b/app/server/static/components/label.vue
index 0768da8662..8a5037bc8d 100644
--- a/app/server/static/components/label.vue
+++ b/app/server/static/components/label.vue
@@ -111,11 +111,31 @@
                       span Edit
 
                   p.control
-                    a.button.is-text(v-on:click="removeLabel(label)")
+                    a.button.is-text(v-on:click="confirmDeleteModal(label)")
                       span.icon.is-small
                         i.fas.fa-trash
                       span Delete
 
+          div.modal(
+            v-if="isDeleteModalOpen"
+            v-bind:class="{ 'is-active': isDeleteModalOpen }"
+            v-bind:data="deleteModalData"
+          )
+            div.modal-background
+            div.modal-card
+              header.modal-card-head
+                p.modal-card-title Delete Label
+                button.delete(
+                  v-on:click="isDeleteModalOpen = !isDeleteModalOpen"
+                  aria-label="close"
+                )
+              section.modal-card-body
+                p Are you sure you want to delete the label <b>{{ deleteModalData.text }}</b>?
+              footer.modal-card-foot.pt20.pb20.pr20.pl20.has-background-white-ter
+                a.button.is-primary(v-on:click="removeLabel(deleteModalData)")
+                  span Delete
+                button.button(v-on:click="isDeleteModalOpen = !isDeleteModalOpen") Cancel
+
           div.columns(v-show="label === editedLabel")
             div.column
               div.field
@@ -205,6 +225,8 @@ export default {
     editedLabel: null,
     messages: [],
     shortKeys: 'abcdefghijklmnopqrstuvwxyz',
+    isDeleteModalOpen: false,
+    deleteModalData: null,
   }),
 
   created() {
@@ -268,8 +290,14 @@ export default {
         });
     },
 
+    confirmDeleteModal(label) {
+      this.deleteModalData = label;
+      this.isDeleteModalOpen = !this.isDeleteModalOpen;
+    },
+
     removeLabel(label) {
       const labelId = label.id;
+      this.isDeleteModalOpen = !this.isDeleteModalOpen;
       HTTP.delete(`labels/${labelId}`).then(() => {
         const index = this.labels.indexOf(label);
         this.labels.splice(index, 1);
diff --git a/app/server/static/components/users.vue b/app/server/static/components/users.vue
index ff3ced47a2..cb720eb601 100644
--- a/app/server/static/components/users.vue
+++ b/app/server/static/components/users.vue
@@ -61,10 +61,30 @@
               )
                 | {{ otherRole.name }}
           b-table-column(label="Action")
-            a.button.is-text(v-on:click="removeRoleMapping(props.row.id)")
+            a.button.is-text(v-on:click="confirmDeleteModal(props.row)")
               span.icon.is-small
                 i.fas.fa-trash
               span Delete
+
+    div.modal(
+      v-if="isDeleteModalOpen"
+      v-bind:class="{ 'is-active': isDeleteModalOpen }"
+      v-bind:data="deleteModalData"
+    )
+      div.modal-background
+      div.modal-card
+        header.modal-card-head
+          p.modal-card-title Delete User Role
+          button.delete(
+            v-on:click="isDeleteModalOpen = !isDeleteModalOpen"
+            aria-label="close"
+          )
+        section.modal-card-body
+          p Are you sure you want to delete the role for user <b>{{ deleteModalData.username }}</b>?
+        footer.modal-card-foot.pt20.pb20.pr20.pl20.has-background-white-ter
+          a.button.is-primary(v-on:click="removeRoleMapping(deleteModalData.id)")
+            span Delete
+          button.button(v-on:click="isDeleteModalOpen = !isDeleteModalOpen") Cancel
 </template>
 
 <style>
@@ -99,6 +119,8 @@ export default {
     allUsers: [],
     otherUsers: [],
     roles: [],
+    isDeleteModalOpen: false,
+    deleteModalData: null,
   }),
 
   computed: {
@@ -158,7 +180,13 @@ export default {
       this.newRoleMapping = null;
     },
 
+    confirmDeleteModal(userData) {
+      this.deleteModalData = userData;
+      this.isDeleteModalOpen = !this.isDeleteModalOpen;
+    },
+
     removeRoleMapping(roleMappingId) {
+      this.isDeleteModalOpen = !this.isDeleteModalOpen;
       HTTP.delete(`roles/${roleMappingId}`).then(() => {
         this.roleMappings = this.roleMappings.filter(
           roleMapping => roleMapping.id !== roleMappingId,