diff --git a/packages/builder/src/components/backend/RoleEditor/RoleFlow.svelte b/packages/builder/src/components/backend/RoleEditor/RoleFlow.svelte
index bf30bb3c7a..6df8e342e9 100644
--- a/packages/builder/src/components/backend/RoleEditor/RoleFlow.svelte
+++ b/packages/builder/src/components/backend/RoleEditor/RoleFlow.svelte
@@ -118,7 +118,7 @@
 
   // Creates a new role
   const createRole = async () => {
-    const newRole = {
+    await roles.save({
       name: Helpers.uuid(),
       uiMetadata: {
         displayName: getSequentialName($roles, "New role ", {
@@ -129,22 +129,7 @@
       },
       permissionId: "write",
       inherits: Roles.BASIC,
-    }
-
-    // Immediate state update
-    const newNode = {
-      ...roleToNode({ ...newRole, _id: newRole.name }),
-      selected: true,
-    }
-    const layout = autoLayout({
-      nodes: [...$nodes.map(node => ({ ...node, selected: false })), newNode],
-      edges: $edges,
     })
-    nodes.set(layout.nodes)
-    edges.set(layout.edges)
-
-    // Actually create role
-    await roles.save(newRole)
   }
 
   // Updates a role with new metadata
@@ -155,7 +140,7 @@
       return
     }
 
-    // Immediate state update
+    // Update metadata
     if (metadata) {
       flow.updateNodeData(roleId, metadata)
     }
@@ -167,15 +152,6 @@
 
   // Deletes a role
   const deleteRole = async roleId => {
-    // Immediate state update
-    const layout = autoLayout({
-      nodes: $nodes.filter(x => x.id !== roleId),
-      edges: $edges.filter(x => x.source !== roleId && x.target !== roleId),
-    })
-    nodes.set(layout.nodes)
-    edges.set(layout.edges)
-
-    // Actually delete role
     const role = $roles.find(x => x._id === roleId)
     if (role) {
       roles.delete(role)
diff --git a/packages/builder/src/components/backend/RoleEditor/RoleNode.svelte b/packages/builder/src/components/backend/RoleEditor/RoleNode.svelte
index 9211161506..169f8af973 100644
--- a/packages/builder/src/components/backend/RoleEditor/RoleNode.svelte
+++ b/packages/builder/src/components/backend/RoleEditor/RoleNode.svelte
@@ -12,6 +12,7 @@
   import { NodeWidth, NodeHeight } from "./constants"
   import { getContext } from "svelte"
   import { roles } from "stores/builder"
+  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
 
   export let data
   export let id
@@ -24,6 +25,7 @@
   let tempDisplayName
   let tempDescription
   let tempColor
+  let deleteModal
 
   $: nameError = validateName(tempDisplayName, $roles)
   $: descriptionError = validateDescription(tempDescription)
@@ -90,7 +92,7 @@
   {#if data.custom}
     <div class="buttons">
       <Icon size="S" name="Edit" hoverable on:click={openPopover} />
-      <Icon size="S" name="Delete" hoverable on:click={handleDelete} />
+      <Icon size="S" name="Delete" hoverable on:click={deleteModal?.show} />
     </div>
   {/if}
   {#if id !== Roles.BASIC}
@@ -106,6 +108,14 @@
   {/if}
 </div>
 
+<ConfirmDialog
+  bind:this={deleteModal}
+  title={`Delete ${data.displayName}`}
+  body="Are you sure you want to delete this role? This can't be undone."
+  okText="Delete"
+  onOk={async () => await deleteRole(id)}
+/>
+
 <Modal bind:this={modal}>
   <ModalContent
     title={`Edit ${data.displayName}`}