diff --git a/macro_areas.php b/macro_areas.php
index 6a5a3cb..9b001d8 100644
--- a/macro_areas.php
+++ b/macro_areas.php
@@ -191,35 +191,46 @@ $macro_areas = $stmt->fetchAll(PDO::FETCH_ASSOC);
 
 <script>
 document.addEventListener('DOMContentLoaded', function () {
-    $('#macroAreaModal').on('show.bs.modal', function (event) {
-        var button = $(event.relatedTarget);
-        var modal = $(this);
+    var macroAreaModal = document.getElementById('macroAreaModal');
+    macroAreaModal.addEventListener('show.bs.modal', function (event) {
+        var button = event.relatedTarget;
+        var modal = this;
 
-        var id = button.data('id');
+        // The button that triggered the modal may not exist, e.g. if the modal is shown due to a server-side error.
+        var id = button ? button.getAttribute('data-id') : null;
 
         // Reset form for new entry
-        modal.find('.modal-title').text('Nova Macro Área');
-        modal.find('#macroAreaForm')[0].reset();
-        modal.find('#macroAreaId').val('');
-        modal.find('#macroAreaAtivo').prop('checked', true); // Default to active
+        modal.querySelector('.modal-title').textContent = 'Nova Macro Área';
+        modal.querySelector('#macroAreaForm').reset();
+        modal.querySelector('#macroAreaId').value = '';
+        modal.querySelector('#macroAreaAtivo').checked = true; // Default to active
 
         if (id) {
             // If editing, populate form
-            var nome = button.data('nome');
-            var descricao = button.data('descricao');
-            var ativo = button.data('ativo');
+            var nome = button.getAttribute('data-nome');
+            var descricao = button.getAttribute('data-descricao');
+            var ativo = button.getAttribute('data-ativo');
 
-            modal.find('.modal-title').text('Editar Macro Área');
-            modal.find('#macroAreaId').val(id);
-            modal.find('#macroAreaNome').val(nome);
-            modal.find('#macroAreaDescricao').val(descricao);
-            modal.find('#macroAreaAtivo').prop('checked', ativo == 1);
+            modal.querySelector('.modal-title').textContent = 'Editar Macro Área';
+            modal.querySelector('#macroAreaId').value = id;
+            modal.querySelector('#macroAreaNome').value = nome;
+            modal.querySelector('#macroAreaDescricao').value = descricao;
+            modal.querySelector('#macroAreaAtivo').checked = ativo == 1;
         }
     });
 
-    // If there was a server-side error, show the modal again
+    // If there was a server-side error, show the modal again and pre-fill the form
     <?php if ($error): ?>
-    $('#macroAreaModal').modal('show');
+    var modal = new bootstrap.Modal(document.getElementById('macroAreaModal'));
+    modal.show();
+    // Pre-fill form with submitted data
+    document.getElementById('macroAreaId').value = '<?php echo $_POST['id'] ?? '' ?>';
+    document.getElementById('macroAreaNome').value = '<?php echo htmlspecialchars($_POST['nome'] ?? '') ?>';
+    document.getElementById('macroAreaDescricao').value = '<?php echo htmlspecialchars($_POST['descricao'] ?? '') ?>';
+    document.getElementById('macroAreaAtivo').checked = <?php echo isset($_POST['ativo']) ? 'true' : 'false' ?>;
+    <?php if (!empty($_POST['id'])): ?>
+    document.querySelector('#macroAreaModal .modal-title').textContent = 'Editar Macro Área';
+    <?php endif; ?>
     <?php endif; ?>
 });
 </script>