diff --git a/src/routes/console/[project]/users/user/[user]/_deleteUser.svelte b/src/routes/console/[project]/users/user/[user]/_deleteUser.svelte
new file mode 100644
index 000000000..4e6b778d2
--- /dev/null
+++ b/src/routes/console/[project]/users/user/[user]/_deleteUser.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+    import { goto } from '$app/navigation';
+    import { base } from '$app/paths';
+    import { page } from '$app/stores';
+    import { Modal } from '$lib/components';
+    import { Button, Form } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdkForProject } from '$lib/stores/sdk';
+    import { user } from './store';
+    import { project } from '../../../store';
+
+    export let showDelete = false;
+
+    const deleteUser = async () => {
+        try {
+            await sdkForProject.users.delete($user.$id);
+            showDelete = false;
+            await goto(`${base}/console/${$page.params.project}/users`);
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        }
+    };
+</script>
+
+<Form on:submit={deleteUser}>
+    <Modal bind:show={showDelete}>
+        <svelte:fragment slot="header">Delete user</svelte:fragment>
+        <p>Are you sure you want to delete <b>{$user.name}</b> from '{$project.name}'?</p>
+        <svelte:fragment slot="footer">
+            <Button text on:click={() => (showDelete = false)}>Cancel</Button>
+            <Button secondary submit>Delete</Button>
+        </svelte:fragment>
+    </Modal>
+</Form>
diff --git a/src/routes/console/[project]/users/user/[user]/index.svelte b/src/routes/console/[project]/users/user/[user]/index.svelte
index d190f60a4..f71d15f80 100644
--- a/src/routes/console/[project]/users/user/[user]/index.svelte
+++ b/src/routes/console/[project]/users/user/[user]/index.svelte
@@ -1,7 +1,4 @@
 <script lang="ts">
-    import { goto } from '$app/navigation';
-    import { base } from '$app/paths';
-    import { page } from '$app/stores';
     import { toLocaleDate } from '$lib/helpers/date';
     import { Avatar, Card } from '$lib/components';
     import { Pill } from '$lib/elements';
@@ -9,8 +6,11 @@
     import { Container } from '$lib/layout';
     import { sdkForProject } from '$lib/stores/sdk';
     import { addNotification } from '$lib/stores/notifications';
+    import DeleteUser from './_deleteUser.svelte';
+
     import { user } from './store';
 
+    let showDelete = false;
     let userName = null;
     let userEmail = null;
     let oldPw = null;
@@ -19,16 +19,6 @@
     const getAvatar = (name: string) =>
         sdkForProject.avatars.getInitials(name, 128, 128).toString();
 
-    const deleteUser = async (id: string) => {
-        try {
-            if (!confirm('Are you sure you want to delete that user?')) return;
-            await sdkForProject.users.delete(id);
-            await goto(`${base}/console/${$page.params.project}/users`);
-        } catch (error) {
-            console.error(error);
-        }
-    };
-
     async function updateVerification() {
         try {
             await sdkForProject.users.updateVerification($user.$id, true);
@@ -233,7 +223,9 @@
         </div>
         <div class="u-flex u-main-space-end common-section">
             <!-- <Button secondary on:click={() => deleteUser($user.$id)}>Delete</Button> -->
-            <Button secondary on:click={() => console.log('open modal')}>Delete</Button>
+            <Button secondary on:click={() => (showDelete = true)}>Delete</Button>
         </div>
     </Card>
 </Container>
+
+<DeleteUser bind:showDelete />