diff --git a/core/auth/memberships/group.html b/core/auth/memberships/group.html
index 3995fb7..42a2e38 100644
--- a/core/auth/memberships/group.html
+++ b/core/auth/memberships/group.html
@@ -27,7 +27,7 @@
     <hr class="divider">
     <form action="/group/{{ .GroupName }}/add-child-group" method="post">
         <label for="child-group">Select Child Group:</label>
-        <select id="child-group" name="child-group" required>
+        <select id="child-group" aria-label="Select" name="child-group" required>
             {{- range .AvailableGroups }}
             <option value="{{ . }}">{{ . }}</option>
             {{- end }}
@@ -44,8 +44,8 @@
         <tr>
             <td><a href="/user/{{ . }}">{{ . }}</a></td>
             <td>
-                <form action="/group/{{ $parentGroupName }}/remove-owner/{{ . }}" method="post" onsubmit="return confirm('Are you sure you want to revoke user {{ . }} ownership of the {{ $parentGroupName }} group?')">
-                    <button type="submit" class="button">Remove</button>
+                <form action="/group/{{ $parentGroupName }}/remove-owner/{{ . }}" method="post" class="remove-form" data-confirmation-message="Are you sure you want to revoke user <strong>{{ . }}</strong>'s ownership of the  <strong>{{ $parentGroupName }}</strong> group?">
+                    <button type="submit">Remove</button>
                 </form>
             </td>
         </tr>
@@ -61,7 +61,7 @@
         <tr>
             <td><a href="/user/{{ . }}">{{ . }}</a></td>
             <td>
-                <form action="/group/{{ $parentGroupName }}/remove-member/{{ . }}" method="post" onsubmit="return confirm('Are you sure you want to remove user {{ . }} user from {{ $parentGroupName }} group?')">
+                <form action="/group/{{ $parentGroupName }}/remove-member/{{ . }}" method="post" class="remove-form" data-confirmation-message="Are you sure you want to remove user  <strong>{{ . }}</strong> user from  <strong>{{ $parentGroupName }}</strong> group?">
                     <button type="submit" class="button">Remove</button>
                 </form>
             </td>
@@ -93,12 +93,23 @@
             <td><a href="/group/{{ .Name }}">{{ .Name }}</a></td>
             <td>{{ .Description }}</td>
             <td>
-                <form action="/group/{{ $parentGroupName }}/remove-child-group/{{ .Name }}" method="post" onsubmit="return confirm('Are you sure you want to remove group {{ .Name }} as a child of the group {{ $parentGroupName }}?')">
+                <form action="/group/{{ $parentGroupName }}/remove-child-group/{{ .Name }}" method="post" class="remove-form" data-confirmation-message="Are you sure you want to remove group  <strong>{{ .Name }}</strong> as a child of the group  <strong>{{ $parentGroupName }}</strong>?">
                     <button type="submit" class="button">Remove</button>
                 </form>
             </td>
         </tr>
         {{- end }}
     </table>
+    <dialog id="confirmation" close>
+        <article>
+            <h2>Confirm Your Action</h2>
+            <p id="confirmation-message">Are you sure?</p>
+            <footer>
+                <button id="cancel-button" class="secondary cancel-button">Cancel</button>
+                <button id="confirm-button">Confirm</button>
+            </footer>
+        </article>
+    </dialog>
+    <script src="/static/main.js"></script>
 </body>
 </html>
diff --git a/core/auth/memberships/static/main.js b/core/auth/memberships/static/main.js
new file mode 100644
index 0000000..e4ea2ca
--- /dev/null
+++ b/core/auth/memberships/static/main.js
@@ -0,0 +1,47 @@
+const confirmationDialog = document.getElementById("confirmation");
+const cancelButton = document.getElementById("cancel-button");
+const confirmButton = document.getElementById("confirm-button");
+
+function showConfirmationDialog(form) {
+    const message = form.dataset.confirmationMessage;
+    document.getElementById("confirmation-message").innerHTML = message;
+    confirmationDialog.showModal();
+    let confirmed;
+    let p = new Promise((resolve) => {
+        confirmed = resolve;
+    });
+    confirmButton.onclick = () => {
+        confirmed(true);
+    };
+    cancelButton.onclick = () => {
+        hideConfirmationDialog();
+        confirmed(false);
+    };
+    return p;
+}
+
+function hideConfirmationDialog() {
+    confirmationDialog.close();
+}
+
+async function handleRemoveOwnerSubmit(form) {
+    event.preventDefault();
+    return await showConfirmationDialog(form);
+}
+
+document.addEventListener("DOMContentLoaded", function () {
+    const removeOwnerForms = document.querySelectorAll(".remove-form");
+    removeOwnerForms.forEach((form) => {
+        form.addEventListener("submit", async function (event) {
+            event.preventDefault();
+            try {
+                isConfirmed = await handleRemoveOwnerSubmit(form);
+                if (isConfirmed) {
+                    form.submit();
+                }
+            } catch (error) {
+                console.error(error);
+            }
+        });
+    });
+});