diff --git a/packages/builder/src/pages/builder/portal/manage/users/[userId].svelte b/packages/builder/src/pages/builder/portal/manage/users/[userId].svelte
index 6dfb139fa3..287fa0f57e 100644
--- a/packages/builder/src/pages/builder/portal/manage/users/[userId].svelte
+++ b/packages/builder/src/pages/builder/portal/manage/users/[userId].svelte
@@ -17,7 +17,6 @@
     Popover,
     Select,
     Modal,
-    ModalContent,
     notifications,
     StatusLight,
   } from "@budibase/bbui"
@@ -29,10 +28,11 @@
   import ForceResetPasswordModal from "./_components/ForceResetPasswordModal.svelte"
   import { RoleUtils } from "@budibase/frontend-core"
   import UserGroupPicker from "components/settings/UserGroupPicker.svelte"
+  import DeleteUserModal from "./_components/DeleteUserModal.svelte"
 
   export let userId
 
-  let deleteUserModal
+  let deleteModal
   let resetPasswordModal
   let popoverAnchor
   let searchTerm = ""
@@ -83,15 +83,6 @@
     : "appUser"
 
   const userFetch = fetchData(`/api/global/users/${userId}`)
-  async function deleteUser() {
-    try {
-      await users.delete(userId)
-      notifications.success(`User ${$userFetch?.data?.email} deleted.`)
-      $goto("./")
-    } catch (error) {
-      notifications.error("Error deleting user")
-    }
-  }
 
   function getHighestRole(roles) {
     let highestRole
@@ -207,9 +198,7 @@
           <MenuItem on:click={resetPasswordModal.show} icon="Refresh"
             >Force Password Reset</MenuItem
           >
-          <MenuItem on:click={deleteUserModal.show} icon="Delete"
-            >Delete</MenuItem
-          >
+          <MenuItem on:click={deleteModal.show} icon="Delete">Delete</MenuItem>
         </ActionMenu>
       </div>
     </div>
@@ -331,19 +320,8 @@
   </Layout>
 </Layout>
 
-<Modal bind:this={deleteUserModal}>
-  <ModalContent
-    warning
-    onConfirm={deleteUser}
-    title="Delete User"
-    confirmText="Delete user"
-    cancelText="Cancel"
-    showCloseIcon={false}
-  >
-    <Body>
-      Are you sure you want to delete <strong>{$userFetch?.data?.email}</strong>
-    </Body>
-  </ModalContent>
+<Modal bind:this={deleteModal}>
+  <DeleteUserModal user={$userFetch.data} />
 </Modal>
 <Modal bind:this={resetPasswordModal}>
   <ForceResetPasswordModal
diff --git a/packages/builder/src/pages/builder/portal/manage/users/_components/DeleteUserModal.svelte b/packages/builder/src/pages/builder/portal/manage/users/_components/DeleteUserModal.svelte
new file mode 100644
index 0000000000..946fa430d2
--- /dev/null
+++ b/packages/builder/src/pages/builder/portal/manage/users/_components/DeleteUserModal.svelte
@@ -0,0 +1,31 @@
+<script>
+  import { goto } from "@roxi/routify"
+  import { Body, ModalContent, notifications } from "@budibase/bbui"
+
+  import { users } from "stores/portal"
+
+  export let user
+
+  async function deleteUser() {
+    try {
+      await users.delete(user._id)
+      notifications.success(`User ${user?.email} deleted.`)
+      $goto("./")
+    } catch (error) {
+      notifications.error("Error deleting user")
+    }
+  }
+</script>
+
+<ModalContent
+  warning
+  onConfirm={deleteUser}
+  title="Delete User"
+  confirmText="Delete user"
+  cancelText="Cancel"
+  showCloseIcon={false}
+>
+  <Body>
+    Are you sure you want to delete <strong>{user?.email}</strong>
+  </Body>
+</ModalContent>
