diff --git a/app/javascript/admin/controllers/modal_controller.js b/app/javascript/admin/controllers/modal_controller.js
new file mode 100644
index 000000000..1bd569119
--- /dev/null
+++ b/app/javascript/admin/controllers/modal_controller.js
@@ -0,0 +1,11 @@
+import { Controller } from 'stimulus';
+
+export default class ModalController extends Controller {
+  static targets = ['toggle'];
+
+  toggleModal() {
+    if (this.toggleTarget) {
+      this.toggleTarget.classList.toggle('hidden');
+    }
+  }
+}
diff --git a/app/views/admin/profile_fields/_add_group_modal.html.erb b/app/views/admin/profile_fields/_add_group_modal.html.erb
index a9d2f8279..686f685b2 100644
--- a/app/views/admin/profile_fields/_add_group_modal.html.erb
+++ b/app/views/admin/profile_fields/_add_group_modal.html.erb
@@ -1,50 +1,36 @@
-<button class="btn btn-primary" type="button" onclick="showAddGroupModal()">
-  Add group
-</button>
+<span data-controller="modal">
+  <button class="crayons-btn" type="button" data-action="modal#toggleModal">
+    Add group
+  </button>
 
-<div id="add-group-modal" class="hidden">
-  <div class="crayons-modal crayons-modal--s absolute">
-    <div class="crayons-modal__box">
-      <header class="crayons-modal__box__header">
-        <h2>Add Group</h2>
-        <button type="button" onclick="hideAddGroupModal()" class="crayons-btn crayons-btn--icon crayons-btn--ghost">
-          <svg width="24" height="24" viewBox="0 0 24 24" class="crayons-icon" xmlns="http://www.w3.org/2000/svg">
-            <path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636l4.95 4.95z" />
-          </svg>
-        </button>
-      </header>
-      <div class="crayons-modal__box__body">
-        <div class="form-group grid p-6 mb-6 gap-1">
-          <%= form_for [:admin, ProfileFieldGroup.new] do |form| %>
-            <div class="form-group">
-              <%= form.label :name %>
-              <%= form.text_field :name, class: "form-control" %>
-            </div>
-            <div class="form-group">
-              <%= form.label :description %>
-              <%= form.text_field :description, class: "form-control" %>
-            </div>
-            <%= form.submit class: "btn btn-primary" %>
-          <% end %>
+  <div id="add-group-modal" class="hidden" data-target="modal.toggle">
+    <div class="crayons-modal crayons-modal--s absolute">
+      <div class="crayons-modal__box">
+        <header class="crayons-modal__box__header">
+          <h2>Add Group</h2>
+          <button type="button" data-action="modal#toggleModal" class="crayons-btn crayons-btn--icon crayons-btn--ghost">
+            <svg width="24" height="24" viewBox="0 0 24 24" class="crayons-icon" xmlns="http://www.w3.org/2000/svg">
+              <path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636l4.95 4.95z" />
+            </svg>
+          </button>
+        </header>
+        <div class="crayons-modal__box__body">
+          <div class="form-group grid p-6 mb-6 gap-1">
+            <%= form_for [:admin, ProfileFieldGroup.new] do |form| %>
+              <div class="form-group">
+                <%= form.label :name %>
+                <%= form.text_field :name, class: "form-control" %>
+              </div>
+              <div class="form-group">
+                <%= form.label :description %>
+                <%= form.text_field :description, class: "form-control" %>
+              </div>
+              <%= form.submit class: "btn btn-primary" %>
+            <% end %>
+          </div>
         </div>
       </div>
+      <div class="crayons-modal__overlay"></div>
     </div>
-    <div class="crayons-modal__overlay"></div>
   </div>
-</div>
-
-<script>
-  function showAddGroupModal() {
-    const confirmationModal = document.getElementById('add-group-modal');
-    if (confirmationModal) {
-      confirmationModal.classList.remove("hidden");
-    }
-  }
-
-  function hideAddGroupModal() {
-    const confirmationModal = document.getElementById('add-group-modal');
-    if (confirmationModal) {
-      confirmationModal.classList.add("hidden");
-    }
-  }
-</script>
+</span>
diff --git a/app/views/admin/profile_fields/_add_profile_field_modal.html.erb b/app/views/admin/profile_fields/_add_profile_field_modal.html.erb
index 54b488000..5f1de2868 100644
--- a/app/views/admin/profile_fields/_add_profile_field_modal.html.erb
+++ b/app/views/admin/profile_fields/_add_profile_field_modal.html.erb
@@ -1,43 +1,29 @@
-<div onclick="showAddProfileFieldModal('<%= group_name %>')">
-  Add Field
-</div>
+<span data-controller="modal" class="mx-1">
+  <button data-action="modal#toggleModal" class="crayons-btn">
+    Add Field
+  </button>
 
-<div id="add-<%= group_name %>-profile-field-modal" class="hidden">
-  <div class="crayons-modal crayons-modal--s">
-    <div class="crayons-modal__box">
-      <header class="crayons-modal__box__header">
-        <h2>Add Profile Field</h2>
-        <button type="button" onclick="hideProfileFieldModal('<%= group_name %>')" class="crayons-btn crayons-btn--icon crayons-btn--ghost">
-          <svg width="24" height="24" viewBox="0 0 24 24" class="crayons-icon" xmlns="http://www.w3.org/2000/svg">
-            <path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636l4.95 4.95z" />
-          </svg>
-        </button>
-      </header>
-      <div class="crayons-modal__box__body">
-        <div class="form-group grid p-6 mb-6 gap-1">
-          <%= form_for [:admin, ProfileField.new] do |form| %>
-            <%= render "profile_field_form", form: form, group: group, group_name: group_name %>
-            <%= form.submit class: "btn btn-primary" %>
-          <% end %>
+  <div id="add-<%= group_name %>-profile-field-modal" class="hidden" data-target="modal.toggle">
+    <div class="crayons-modal crayons-modal--s">
+      <div class="crayons-modal__box">
+        <header class="crayons-modal__box__header">
+          <h2>Add Profile Field</h2>
+          <button type="button" data-action="modal#toggleModal" class="crayons-btn crayons-btn--icon crayons-btn--ghost">
+            <svg width="24" height="24" viewBox="0 0 24 24" class="crayons-icon" xmlns="http://www.w3.org/2000/svg">
+              <path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636l4.95 4.95z" />
+            </svg>
+          </button>
+        </header>
+        <div class="crayons-modal__box__body">
+          <div class="form-group grid p-6 mb-6 gap-1">
+            <%= form_for [:admin, ProfileField.new] do |form| %>
+              <%= render "profile_field_form", form: form, group: group, group_name: group_name %>
+              <%= form.submit class: "btn btn-primary" %>
+            <% end %>
+          </div>
         </div>
       </div>
+      <div class="crayons-modal__overlay"></div>
     </div>
-    <div class="crayons-modal__overlay"></div>
   </div>
-</div>
-
-<script>
-  function showAddProfileFieldModal(group_name) {
-    const confirmationModal = document.getElementById(`add-${group_name}-profile-field-modal`);
-    if (confirmationModal) {
-      confirmationModal.classList.remove("hidden");
-    }
-  }
-
-  function hideProfileFieldModal(group_name) {
-    const confirmationModal = document.getElementById(`add-${group_name}-profile-field-modal`);
-    if (confirmationModal) {
-      confirmationModal.classList.add("hidden");
-    }
-  }
-</script>
+</span>
diff --git a/app/views/admin/profile_fields/_edit_group_modal.html.erb b/app/views/admin/profile_fields/_edit_group_modal.html.erb
index 45a12028c..84a0ce947 100644
--- a/app/views/admin/profile_fields/_edit_group_modal.html.erb
+++ b/app/views/admin/profile_fields/_edit_group_modal.html.erb
@@ -1,50 +1,36 @@
-<div onclick="showEditGroupModal('<%= group_name %>')" class="color-accent-warning-darker">
-  Edit group
-</div>
+<span data-controller="modal" class="mx-1">
+  <button data-action="modal#toggleModal" class="crayons-btn crayons-btn--secondary">
+    Edit group
+  </button>
 
-<div id="edit-group-<%= group_name %>-modal" class="hidden">
-  <div class="crayons-modal crayons-modal--s">
-    <div class="crayons-modal__box">
-      <header class="crayons-modal__box__header">
-        <h2>Edit Group <%= group_name %></h2>
-        <button type="button" onclick="hideEditGroupModal('<%= group_name %>')" class="crayons-btn crayons-btn--icon crayons-btn--ghost">
-          <svg width="24" height="24" viewBox="0 0 24 24" class="crayons-icon" xmlns="http://www.w3.org/2000/svg">
-            <path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636l4.95 4.95z" />
-          </svg>
-        </button>
-      </header>
-      <div class="crayons-modal__box__body">
-        <div class="form-group grid p-6 mb-6 gap-1">
-          <%= form_for [:admin, group] do |form| %>
-            <div class="form-group">
-              <%= form.label :name %>
-              <%= form.text_field :name, class: "form-control" %>
-            </div>
-            <div class="form-group">
-              <%= form.label :description %>
-              <%= form.text_field :description, class: "form-control" %>
-            </div>
-            <%= form.submit class: "btn btn-primary" %>
-          <% end %>
+  <div id="edit-group-<%= group_name %>-modal" class="hidden" data-target="modal.toggle">
+    <div class="crayons-modal crayons-modal--s">
+      <div class="crayons-modal__box">
+        <header class="crayons-modal__box__header">
+          <h2>Edit Group <%= group_name %></h2>
+          <button type="button" data-action="modal#toggleModal" class="crayons-btn crayons-btn--icon crayons-btn--ghost">
+            <svg width="24" height="24" viewBox="0 0 24 24" class="crayons-icon" xmlns="http://www.w3.org/2000/svg">
+              <path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636l4.95 4.95z" />
+            </svg>
+          </button>
+        </header>
+        <div class="crayons-modal__box__body">
+          <div class="form-group grid p-6 mb-6 gap-1">
+            <%= form_for [:admin, group] do |form| %>
+              <div class="form-group">
+                <%= form.label :name %>
+                <%= form.text_field :name, class: "form-control" %>
+              </div>
+              <div class="form-group">
+                <%= form.label :description %>
+                <%= form.text_field :description, class: "form-control" %>
+              </div>
+              <%= form.submit class: "btn btn-primary" %>
+            <% end %>
+          </div>
         </div>
       </div>
+      <div class="crayons-modal__overlay"></div>
     </div>
-    <div class="crayons-modal__overlay"></div>
   </div>
-</div>
-
-<script>
-  function showEditGroupModal(group_name) {
-    const confirmationModal = document.getElementById(`edit-group-${group_name}-modal`);
-    if (confirmationModal) {
-      confirmationModal.classList.remove("hidden");
-    }
-  }
-
-  function hideEditGroupModal(group_name) {
-    const confirmationModal = document.getElementById(`edit-group-${group_name}-modal`);
-    if (confirmationModal) {
-      confirmationModal.classList.add("hidden");
-    }
-  }
-</script>
+</span>
diff --git a/app/views/admin/profile_fields/_grouped_profile_fields.html.erb b/app/views/admin/profile_fields/_grouped_profile_fields.html.erb
index 08a3ae6a3..88d876876 100644
--- a/app/views/admin/profile_fields/_grouped_profile_fields.html.erb
+++ b/app/views/admin/profile_fields/_grouped_profile_fields.html.erb
@@ -14,9 +14,11 @@
         <div class="card-header__actions">
           <%= render partial: "add_profile_field_modal", locals: { group: group, group_name: group_name } %>
           <%= render partial: "edit_group_modal", locals: { group: group, group_name: group_name } %>
-          <div><%= link_to "Delete Group", admin_profile_field_group_path(group), data: { confirm: "Are you sure?" }, method: :delete, class: "color-accent-danger" %></div>
-          <div id="<%= group_name %>Header" data-toggle="collapse" class="color-base-70"
-            data-target="#<%= group_name %>BodyContainer" aria-expanded="false" aria-controls="<%= group_name %>BodyContainer">Toggle</div>
+          <%= button_to "Delete Group", admin_profile_field_group_path(group), data: { confirm: "Are you sure?" }, method: :delete, class: "crayons-btn crayons-btn--danger mx-1" %>
+          <button id="<%= group_name %>Header" data-toggle="collapse" class="crayons-btn crayons-btn--secondary mx-1"
+                  data-target="#<%= group_name %>BodyContainer" aria-expanded="false" aria-controls="<%= group_name %>BodyContainer">
+            Toggle
+          </button>
         </div>
       </div>
 
@@ -39,7 +41,7 @@
                     <%= render "profile_field_form", form: form, group: group %>
                     <%= form.submit class: "btn btn-primary" %>
                   <% end %>
-                  <%= button_to "Delete Profile Field", admin_profile_field_path(field), data: { confirm: "Are you sure?" }, method: :delete, class: "btn btn-secondary" %>
+                  <%= button_to "Delete Profile Field", admin_profile_field_path(field), data: { confirm: "Are you sure?" }, method: :delete, class: "btn btn-secondary mx-auto" %>
                 </div>
               </div>
             </div>