diff --git a/src/components/UserDetail.svelte b/src/components/UserDetail.svelte
index 36a83466..5ca38693 100644
--- a/src/components/UserDetail.svelte
+++ b/src/components/UserDetail.svelte
@@ -58,14 +58,25 @@
         </nav>
       </div>
     </div>
-    <span
-      class="mb-4 text-3xl font-extrabold leading-tight">{user.firstname}
+    <span class="mb-4 text-3xl font-extrabold leading-tight">{user.firstname}
       {user.middlename || ''}
       {user.lastname}
-      <button
-        type="button"
-        class="w-full inline-flex 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></span>
+      <div data-id="user_actions_${user.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="${user.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="${user.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>
+      </div>
+    </span>
+
     <!--  -->
     <div class="mt-2 flex items-center">
       <img