diff --git a/static/js/pages/users.js b/static/js/pages/users.js
index 9163b993..01d04b84 100644
--- a/static/js/pages/users.js
+++ b/static/js/pages/users.js
@@ -79,10 +79,9 @@
 
     function showCreateModal() {
         const overlay = document.createElement('div');
-        overlay.className = 'modal-overlay';
-        overlay.id = 'user-modal-overlay';
+        overlay.className = 'modal active';
         overlay.innerHTML = `
-            <div class="modal" style="max-width: 480px;">
+            <div class="modal-content" style="max-width: 480px;">
                 <div class="modal-header">
                     <h3>Create New User</h3>
                     <button class="modal-close" id="user-modal-close"><i class="fas fa-times"></i></button>
@@ -157,10 +156,9 @@
         if (!user) return;
 
         const overlay = document.createElement('div');
-        overlay.className = 'modal-overlay';
-        overlay.id = 'user-edit-overlay';
+        overlay.className = 'modal active';
         overlay.innerHTML = `
-            <div class="modal" style="max-width: 480px;">
+            <div class="modal-content" style="max-width: 480px;">
                 <div class="modal-header">
                     <h3>Edit User: ${escapeHtml(user.username)}</h3>
                     <button class="modal-close" id="edit-modal-close"><i class="fas fa-times"></i></button>
@@ -211,10 +209,9 @@
 
     window._resetUserPassword = function (id, username) {
         const overlay = document.createElement('div');
-        overlay.className = 'modal-overlay';
-        overlay.id = 'pw-reset-overlay';
+        overlay.className = 'modal active';
         overlay.innerHTML = `
-            <div class="modal" style="max-width: 420px;">
+            <div class="modal-content" style="max-width: 420px;">
                 <div class="modal-header">
                     <h3>Reset Password: ${escapeHtml(username)}</h3>
                     <button class="modal-close" id="pw-modal-close"><i class="fas fa-times"></i></button>