diff --git a/src/components/UserDetail.svelte b/src/components/UserDetail.svelte
index 323d64a5..6d290e88 100644
--- a/src/components/UserDetail.svelte
+++ b/src/components/UserDetail.svelte
@@ -7,6 +7,7 @@
   export let params;
   const user_promise = UserService.userControllerGetOne(params.userid);
   let data_loaded = false;
+  $: delete_triggered = false;
   $: original_data = {};
   $: editable_userdata = undefined;
   user_promise.then((data) => {
@@ -33,6 +34,16 @@
       console.log("no changes performed");
     }
   }
+  function deleteUser() {
+    UserService.userControllerRemove(original_data.id, true)
+      .then((resp) => {
+        console.log(resp);
+        location.replace("./");
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  }
 </script>
 
 {#await user_promise}
@@ -86,23 +97,26 @@
       {original_data.middlename || ''}
       {original_data.lastname}
       <span data-id="user_actions_${editable_userdata.id}">
-        <button
-          class="hidden w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-green-400 text-base font-medium text-white sm:w-auto sm:text-sm"
-          data-userid="${editable_userdata.id}"
-          onclick="user__delete_cancel()">{$_('cancel')}</button>
-        <button
-          class="hidden w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-500 text-base font-medium text-white sm:w-auto sm:text-sm"
-          data-userid="${editable_userdata.id}"
-          onclick="user__delete_confirm()">{$_('confirm-delete')}</button>
-        <button
-          type="button"
-          class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('delete-user')}</button>
-        <button
-          disabled={!changes_performed}
-          class:opacity-50={!changes_performed}
-          type="button"
-          on:click={submit}
-          class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('save-changes')}</button>
+            <button
+              on:click={deleteUser}
+              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('confirm-delete')}</button>
+            <button
+              on:click={() => {
+                delete_triggered = !delete_triggered;
+              }}
+              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:text-sm">{$_('cancel')}</button>
+            <button
+              on:click={() => {
+                delete_triggered = true;
+              }}
+              type="button"
+              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('delete-user')}</button>
+          <button
+            disabled={!changes_performed}
+            class:opacity-50={!changes_performed}
+            type="button"
+            on:click={submit}
+            class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('save-changes')}</button>
       </span>
     </div>