diff --git a/assets/js/main.js b/assets/js/main.js
index e75def6..085dfe6 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -1838,6 +1838,9 @@ document.addEventListener('DOMContentLoaded', () => {
             document.getElementById('edit-role-icon').value = role.icon;
             document.getElementById('selected-role-emoji-preview').textContent = role.icon || '';
             
+            const modalTitle = document.querySelector('#roleEditorModal .modal-title');
+            if (modalTitle) modalTitle.textContent = 'Modifier le rôle';
+            
             const permsContainer = document.getElementById('role-permissions-checkboxes');
             permsContainer.innerHTML = '';
             const currentPerms = parseInt(role.perms);
@@ -1871,10 +1874,11 @@ document.addEventListener('DOMContentLoaded', () => {
         });
         
         try {
+            const action = id ? 'update' : 'create';
             const resp = await fetch('api_v1_roles.php', {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ action: 'update', server_id: activeServerId, id, name, color, icon_url, permissions })
+                body: JSON.stringify({ action, server_id: activeServerId, id, name, color, icon_url, permissions })
             });
             const data = await resp.json();
             if (data.success) {
@@ -1967,18 +1971,28 @@ document.addEventListener('DOMContentLoaded', () => {
     });
 
     addRoleBtn?.addEventListener('click', async () => {
-        const name = prompt('Role name:');
-        if (!name) return;
-        const color = '#99aab5';
+        document.getElementById('edit-role-id').value = '';
+        document.getElementById('edit-role-name').value = 'New Role';
+        document.getElementById('edit-role-color').value = '#99aab5';
+        document.getElementById('edit-role-icon').value = '';
+        document.getElementById('selected-role-emoji-preview').textContent = '';
         
-        try {
-            const resp = await fetch('api_v1_roles.php', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ action: 'create', server_id: activeServerId, name, color, permissions: 0 })
-            });
-            if ((await resp.json()).success) loadRoles();
-        } catch (e) { console.error(e); }
+        const modalTitle = document.querySelector('#roleEditorModal .modal-title');
+        if (modalTitle) modalTitle.textContent = 'Créer un rôle';
+        
+        const permsContainer = document.getElementById('role-permissions-checkboxes');
+        permsContainer.innerHTML = '';
+        serverPermissions.forEach(p => {
+            permsContainer.innerHTML += `
+                <div class="form-check mb-1">
+                    <input class="form-check-input perm-check" type="checkbox" value="${p.value}" id="perm-${p.value}">
+                    <label class="form-check-label text-white small" for="perm-${p.value}">${p.name}</label>
+                </div>
+            `;
+        });
+
+        const modal = new bootstrap.Modal(document.getElementById('roleEditorModal'));
+        modal.show();
     });
 
     rolesList?.addEventListener('click', async (e) => {
diff --git a/index.php b/index.php
index 81b6ee5..cf5ed67 100644
--- a/index.php
+++ b/index.php
@@ -2569,8 +2569,8 @@ document.addEventListener('DOMContentLoaded', () => {
     </div>
 </div>
 
-<!-- Role Modifieror Modal -->
-<div class="modal fade" id="roleModifierorModal" tabindex="-1">
+<!-- Role Editor Modal -->
+<div class="modal fade" id="roleEditorModal" tabindex="-1">
     <div class="modal-dialog modal-xl">
         <div class="modal-content">
             <div class="modal-header">