diff --git a/api/Project.js b/api/Project.js
index 48aea229..a7c9738a 100644
--- a/api/Project.js
+++ b/api/Project.js
@@ -139,6 +139,7 @@ export default class Project {
                 throw new Error(`Error removing member: ${response.status}`)
             }
 
+            delete this.collaborators[userId]
             return await response
         } catch (error) {
             userMessage(error.message)
@@ -160,6 +161,9 @@ export default class Project {
                 throw new Error(`Error promoting user to LEADER: ${response.status}`)
             }
 
+            if (this.collaborators[userId] && !this.collaborators[userId].roles.includes("LEADER")) {
+                this.collaborators[userId].roles.push("LEADER")
+            }
             return response
         } catch (error) {
             userMessage(error.message)
@@ -181,6 +185,9 @@ export default class Project {
                 throw new Error(`Error removing LEADER role: ${response.status}`)
             }
 
+            if (this.collaborators[userId]) {
+                this.collaborators[userId].roles = this.collaborators[userId].roles.filter(role => role !== "LEADER")
+            }
             return response
         } catch (error) {
             userMessage(error.message)
@@ -201,8 +208,9 @@ export default class Project {
             if (!response.ok) {
                 throw new Error(`Error revoking write access: ${response.status}`)
             }
-
-            return response
+            if (this.collaborators[userId]) {
+                this.collaborators[userId].roles = ["VIEWER"]
+            }            return response
         } catch (error) {
             userMessage(error.message)
         }
@@ -223,6 +231,9 @@ export default class Project {
                 throw new Error(`Error setting user roles: ${response.status}`)
             }
 
+            if (this.collaborators[userId]) {
+                this.collaborators[userId].roles = roles
+            }
             return response
         } catch (error) {
             userMessage(error.message)
diff --git a/components/manage-role/index.js b/components/manage-role/index.js
index 76b0a927..0819730d 100644
--- a/components/manage-role/index.js
+++ b/components/manage-role/index.js
@@ -18,6 +18,8 @@ class ManageRole extends HTMLElement {
 
     permissions = []
     isExistingRole = false
+    /** @type {Object} Local cache of roles for this component */
+    group = {}
 
     constructor() {
         super()
@@ -55,10 +57,11 @@ class ManageRole extends HTMLElement {
                 'Authorization': `Bearer ${TPEN.getAuthorization()}`
             }
         }).then(response => response.json())
-        this.render(group)
+        this.group = group || {}
+        this.render(this.group)
     }
 
-    render(group) {
+    render(group = this.group) {
         this.shadowRoot.innerHTML = `
             <style>
                 h3 {
@@ -454,17 +457,26 @@ class ManageRole extends HTMLElement {
                     this.shadowRoot.getElementById('role-name').value = ''
                     this.permissions = []
                     const roleId = roleLi.querySelector("#roleID").textContent.toUpperCase()
-                    await fetch(`${TPEN.servicesURL}/project/${TPEN.activeProject._id}/removeCustomRoles`, {
-                        method: 'DELETE',
-                        headers: {
-                            'Content-Type': 'application/json',
-                            'Authorization': `Bearer ${TPEN.getAuthorization()}`
-                        },
-                        body: JSON.stringify({ roles: [roleId] })
-                    }).then(response => {
-                        TPEN.eventDispatcher.dispatch("tpen-toast", response.ok ? { status: "info", message: 'Successfully Removed Role' } : { status: "error", message: 'Error Removing Role' })
-                    })
-                    this.render()
+                    try {
+                        const response = await fetch(`${TPEN.servicesURL}/project/${TPEN.activeProject._id}/removeCustomRoles`, {
+                            method: 'DELETE',
+                            headers: {
+                                'Content-Type': 'application/json',
+                                'Authorization': `Bearer ${TPEN.getAuthorization()}`
+                            },
+                            body: JSON.stringify({ roles: [roleId] })
+                        })
+
+                        if (response.ok) {
+                            delete this.group[roleId]
+                            TPEN.eventDispatcher.dispatch("tpen-toast", { status: "info", message: 'Successfully Removed Role' })
+                        } else {
+                            TPEN.eventDispatcher.dispatch("tpen-toast", { status: "error", message: 'Error Removing Role' })
+                        }
+                    } catch (err) {
+                        TPEN.eventDispatcher.dispatch("tpen-toast", { status: "error", message: `Error Removing Role: ${err.message}` })
+                    }
+                    this.render(this.group)
                 })
             })
 
@@ -474,7 +486,7 @@ class ManageRole extends HTMLElement {
         })
     }
 
-    updateRolePermissions(group, selectedRole) {
+    updateRolePermissions(group = this.group, selectedRole) {
         this.shadowRoot.getElementById('role-name').value = selectedRole.querySelector('#roleID').textContent
         this.permissions = []
         this.isExistingRole = true
@@ -509,33 +521,34 @@ class ManageRole extends HTMLElement {
         const role = this.shadowRoot.getElementById('role-name')
         if (!role.value) return TPEN.eventDispatcher.dispatch("tpen-toast", { status: "error", message: 'No role selected for update' })
 
-        Object.keys(group || {}).forEach(key => {
+        Object.keys(this.group || {}).forEach(key => {
             if (key.toUpperCase() === role.value.toUpperCase()) {
-                group[key] = this.permissions
+                this.group[key] = [...this.permissions]
             }
         })
 
-        await fetch(`${TPEN.servicesURL}/project/${TPEN.activeProject._id}/updateCustomRoles`, {
-            method: 'PUT',
-            headers: {
-                'Content-Type': 'application/json',
-                'Authorization': `Bearer ${TPEN.getAuthorization()}`
-            },
-            body: JSON.stringify({ roles: group })
-        }).then(response => {
+        try {
+            const response = await fetch(`${TPEN.servicesURL}/project/${TPEN.activeProject._id}/updateCustomRoles`, {
+                method: 'PUT',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': `Bearer ${TPEN.getAuthorization()}`
+                },
+                body: JSON.stringify({ roles: this.group })
+            })
+
             if (response.ok) {
                 TPEN.eventDispatcher.dispatch("tpen-toast", { status: "info", message: 'Successfully Updated Role' })
-                this.render()
+                // Reset internal state before rendering
+                this.permissions = []
+                this.isExistingRole = false
+                this.render(this.group)
             } else {
                 TPEN.eventDispatcher.dispatch("tpen-toast", { status: "error", message: 'Error Updating Role' })
             }
-        }).catch(error => {
+        } catch (error) {
             TPEN.eventDispatcher.dispatch("tpen-toast", { status: "error", message: `Error updating role: ${error.message}` })
-        })
-
-        this.resetPermissions()
-        role.value = ''
-        this.permissions = []
+        }
     }
 
 
@@ -644,6 +657,7 @@ class ManageRole extends HTMLElement {
     }
 
     addPermissions(group) {
+        group = group || this.group
         let permissionString = this.shadowRoot.getElementById('permission')
         const permissionsDiv = this.shadowRoot.getElementById('permissions')
         const role = this.shadowRoot.getElementById('role-name')
@@ -751,6 +765,7 @@ class ManageRole extends HTMLElement {
 
     async addRole(group) {
         const role = this.shadowRoot.getElementById('role-name')
+        group = group || this.group
  
         if (!role.value) {
             return TPEN.eventDispatcher.dispatch("tpen-toast", { status: "error", message: 'Role name is required' })
@@ -770,29 +785,35 @@ class ManageRole extends HTMLElement {
             return TPEN.eventDispatcher.dispatch("tpen-toast", { status: "error", message: 'At least one permission is required' })
         }
 
-        await fetch(`${TPEN.servicesURL}/project/${TPEN.activeProject._id}/addCustomRoles`, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-                'Authorization': `Bearer ${TPEN.getAuthorization()}`
-            },
-            body: JSON.stringify({
-                roles: {
-                    [role.value.toUpperCase()]: this.permissions
-                }
+        try {
+            const response = await fetch(`${TPEN.servicesURL}/project/${TPEN.activeProject._id}/addCustomRoles`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': `Bearer ${TPEN.getAuthorization()}`
+                },
+                body: JSON.stringify({
+                    roles: {
+                        [role.value.toUpperCase()]: this.permissions
+                    }
+                })
             })
-        })
-        .then(response => {
+
             if (response.ok) {
-                return TPEN.eventDispatcher.dispatch("tpen-toast", { status: "info", message: 'Custom role added successfully' })
+                // update local cache and re-render without refetching
+                this.group = this.group || {}
+                this.group[role.value.toUpperCase()] = [...this.permissions]
+                TPEN.eventDispatcher.dispatch("tpen-toast", { status: "info", message: 'Custom role added successfully' })
+                // Reset internal state before rendering
+                this.permissions = []
+                this.isExistingRole = false
+                this.render(this.group)
+            } else {
+                TPEN.eventDispatcher.dispatch("tpen-toast", { status: "error", message: 'Error adding role' })
             }
-        })
-        .catch(error => {
+        } catch (error) {
             TPEN.eventDispatcher.dispatch("tpen-toast", { status: "error", message: `Error adding role: ${error.message}` })
-        })
-
-        this.resetPermissions()
-        this.render()
+        }
     }
 }
 
diff --git a/components/member-invitation/index.js b/components/member-invitation/index.js
index d2550617..97c05368 100644
--- a/components/member-invitation/index.js
+++ b/components/member-invitation/index.js
@@ -123,6 +123,9 @@ class InviteMemberElement extends HTMLElement {
             const response = await TPEN.activeProject.addMember(this.shadowRoot.querySelector('#invitee-email').value)
             if (!response) throw new Error("Invitation failed")
             
+            // Dispatch event to notify other components of the new member
+            TPEN.eventDispatcher.dispatch('tpen-member-invited', { email: email })
+            
             this.shadowRoot.querySelector('#submit').textContent = "Submit"
             this.shadowRoot.querySelector('#submit').disabled = false
             this.shadowRoot.querySelector('#invitee-email').value = ""
diff --git a/components/project-collaborators/index.js b/components/project-collaborators/index.js
index 02244675..6d502192 100644
--- a/components/project-collaborators/index.js
+++ b/components/project-collaborators/index.js
@@ -99,6 +99,14 @@ class ProjectCollaborators extends HTMLElement {
             })
             .join(" ")
     }
+
+    /**
+     * Refreshes the collaborators display by re-rendering the collaborators list.
+     * This is called when role changes occur to update the UI without a full page refresh.
+     */
+    refreshCollaborators() {
+        this.renderProjectCollaborators()
+    }
 }
 
 customElements.define('project-collaborators', ProjectCollaborators)
diff --git a/components/roles-handler/index.js b/components/roles-handler/index.js
index 13785ce8..09a49286 100644
--- a/components/roles-handler/index.js
+++ b/components/roles-handler/index.js
@@ -23,9 +23,45 @@ class RolesHandler extends HTMLElement {
 
     connectedCallback() {
         TPEN.attachAuthentication(this)
+        this._injectManageButtonStyles()
         this._unsubProject = onProjectReady(this, this.authgate)
     }
 
+    _injectManageButtonStyles() {
+        // Check if styles are already injected
+        if (document.getElementById('roles-handler-manage-button-styles')) return
+        
+        const styleEl = document.createElement('style')
+        styleEl.id = 'roles-handler-manage-button-styles'
+        styleEl.textContent = `
+            project-collaborators::part(manage-button) {
+                background: var(--primary-color, #1976d2);
+                color: var(--white, white);
+                border: none;
+                padding: 8px 16px;
+                border-radius: 4px;
+                cursor: pointer;
+                font-weight: 500;
+                font-size: 0.9rem;
+                transition: all 0.2s ease;
+                box-shadow: 0 2px 6px var(--interface-primary-shadow, rgba(25, 118, 210, 0.25));
+            }
+            project-collaborators::part(manage-button):hover {
+                background: var(--primary-dark, #1565c0);
+                box-shadow: 0 4px 10px var(--interface-primary-shadow, rgba(25, 118, 210, 0.4));
+                transform: translateY(-1px);
+            }
+            project-collaborators::part(manage-button):active {
+                transform: translateY(0);
+                box-shadow: 0 2px 4px var(--interface-primary-shadow, rgba(25, 118, 210, 0.25));
+            }
+        `
+        document.head.appendChild(styleEl)
+        this.cleanup.add(() => {
+            document.getElementById('roles-handler-manage-button-styles')?.remove()
+        })
+    }
+
     /**
      * Authorization gate - checks permissions before rendering.
      * Shows permission message if user lacks MEMBER view access.
@@ -47,48 +83,294 @@ class RolesHandler extends HTMLElement {
     render() {
         this.shadowRoot.innerHTML = `
         <style>
-        #rolesListContainer {
+        #roleModal {
+            padding: 50px 24px 24px 24px;
+            border-radius: 8px;
+            border: none;
+            max-width: 600px;
+            width: 90%;
+            max-height: 80vh;
+            position: relative;
+            overflow: visible;
+        }
+        #roleModal::backdrop {
+            background: rgba(0, 0, 0, 0.5);
+        }
+        #roleModal[open] {
             display: flex;
             flex-direction: column;
-            gap: 5px;
-            padding: 10px;
-            width: 80%;
-            margin: 0 auto;
-        }
-        .role-modal-container .modal {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: rgba(0, 0, 0, 0.5);
+        }
+        #roleModal {
+            color: var(--color-text, #333);
+            background: var(--color-white, white);
+        }
+        #roleModal > :first-child {
+            margin-top: 0;
+        }
+        #roleCloseButton {
+            position: absolute;
+            top: 12px;
+            right: 12px;
+            background: none;
+            border: none;
+            font-size: 1.5rem;
+            color: var(--color-text, #333);
+            cursor: pointer;
+            padding: 4px 8px;
             display: flex;
+            align-items: center;
             justify-content: center;
+            transition: color 0.2s;
+        }
+        #roleCloseButton:hover {
+            color: var(--danger-color, #d32f2f);
+        }
+        .role-toggles {
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+            margin-bottom: 20px;
+        }
+        .role-row {
+            display: flex;
             align-items: center;
-            z-index: 1000;
+            gap: 16px;
         }
-        .role-modal-container .modal.hidden {
-            display: none;
+        .role-toggle-btn {
+            min-width: 120px;
+            padding: 10px 16px;
+            border: 2px solid var(--border-color, #ddd);
+            background: linear-gradient(to right, var(--primary-color, #1976d2) 50%, var(--color-white, white) 50%);
+            background-size: 200% 100%;
+            background-position: 100% 0;
+            border-radius: 6px;
+            cursor: pointer;
+            font-weight: 500;
+            font-size: 1rem;
+            transition: background-position 0.3s ease, border-color 0.3s ease, color 0.3s ease;
+            color: var(--color-text, #333);
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        .role-toggle-btn::before {
+            content: '☐';
+            font-size: 1.1em;
+            flex-shrink: 0;
+        }
+        .role-toggle-btn:hover {
+            border-color: var(--primary-color, #1976d2);
+        }
+        .role-toggle-btn.active {
+            background-position: 0 0;
+            border-color: var(--primary-color, #1976d2);
+            color: var(--color-white, white);
+        }
+        .role-toggle-btn.active::before {
+            content: '☑';
+        }
+        .role-help-text {
+            flex: 1;
+            font-size: 0.875rem;
+            color: var(--color-text-secondary, #666);
+        }
+        .action-row {
+            display: flex;
+            gap: 8px;
+            margin-top: 20px;
+            padding-top: 20px;
+            border-top: 1px solid var(--border-color, #e0e0e0);
+            flex-wrap: nowrap;
+            overflow: visible;
+        }
+        .action-btn {
+            padding: 8px 16px;
+            border: 1px solid var(--border-color, #ccc);
+            background: var(--color-white, white);
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 0.9rem;
+            color: var(--color-text, #333);
+            transition: all 0.2s;
+        }
+        .action-btn:hover {
+            background: var(--gray-100, #f5f5f5);
+        }
+        .action-btn.readonly-btn {
+            color: var(--text-primary, #f57c00);
         }
-        .modal.hidden {
+        .action-btn.readonly-btn:hover {
+            background: var(--warning-color, #fff3e0);
+        }
+        .action-btn.destructive {
+            color: var(--danger-color, #d32f2f);
+        }
+        .action-btn.destructive:hover {
+            background: var(--danger-light, #ffebee);
+        }
+        .action-btn.icon-only {
+            width: 36px;
+            height: 36px;
+            padding: 8px;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            position: relative;
+        }
+        .action-btn.icon-only .tooltip {
+            position: absolute;
+            bottom: 100%;
+            left: 50%;
+            transform: translateX(-50%);
+            margin-bottom: 8px;
+            padding: 6px 10px;
+            background: var(--color-text, #333);
+            color: var(--color-white, white);
+            font-size: 0.8rem;
+            white-space: nowrap;
+            border-radius: 4px;
+            opacity: 0;
+            pointer-events: none;
+            transition: opacity 0.2s;
+            z-index: 10000;
+        }
+        .action-btn.icon-only .tooltip::after {
+            content: '';
+            position: absolute;
+            top: 100%;
+            left: 50%;
+            transform: translateX(-50%);
+            border: 4px solid transparent;
+            border-top-color: var(--color-text, #333);
+        }
+        .action-btn.icon-only:hover .tooltip {
+            opacity: 1;
+        }
+        .action-btn.hidden {
             display: none;
         }
+        .modal-actions {
+            display: flex;
+            gap: 8px;
+            justify-content: flex-end;
+            margin-top: 20px;
+        }
+        .modal-actions button {
+            padding: 10px 20px;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-weight: 500;
+        }
+        #modalSaveButton {
+            background: var(--primary-color, #1976d2);
+            color: var(--color-white, white);
+            padding: 12px 28px;
+            font-size: 1rem;
+            min-width: 140px;
+            box-shadow: 0 2px 8px rgba(25, 118, 210, 0.3);
+            transition: all 0.2s ease;
+        }
+        #modalSaveButton:hover {
+            background: var(--primary-dark, #1565c0);
+            box-shadow: 0 4px 12px rgba(25, 118, 210, 0.5);
+            transform: translateY(-1px);
+        }
+        #modalSaveButton:active {
+            transform: translateY(0);
+            box-shadow: 0 2px 4px rgba(25, 118, 210, 0.3);
+        }
+        .custom-roles-section {
+            margin: 20px 0;
+            padding: 16px;
+            border: 1px solid var(--border-color, #e0e0e0);
+            border-radius: 6px;
+            background: var(--gray-50, #fafafa);
+        }
+        .custom-roles-section h3 {
+            margin: 0 0 12px 0;
+            font-size: 1rem;
+            color: var(--color-text, #333);
+        }
+        .custom-roles-toggles {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 12px;
+        }
+        .custom-role-toggle {
+            min-width: 100px;
+            padding: 6px 12px;
+            border: 2px solid var(--border-color, #ddd);
+            background: linear-gradient(to right, var(--primary-color, #1976d2) 50%, var(--color-white, white) 50%);
+            background-size: 200% 100%;
+            background-position: 100% 0;
+            border-radius: 6px;
+            cursor: pointer;
+            font-weight: 500;
+            font-size: 0.875rem;
+            transition: background-position 0.3s ease, border-color 0.3s ease, color 0.3s ease;
+            color: var(--color-text, #333);
+            display: flex;
+            align-items: center;
+            gap: 6px;
+        }
+        .custom-role-toggle::before {
+            content: '☐';
+            font-size: 1.1em;
+            flex-shrink: 0;
+        }
+        .custom-role-toggle:hover {
+            border-color: var(--primary-color, #1976d2);
+        }
+        .custom-role-toggle.active {
+            background-position: 0 0;
+            border-color: var(--primary-color, #1976d2);
+            color: var(--color-white, white);
+        }
+        .custom-role-toggle.active::before {
+            content: '☑';
+        }
         </style>
-        <div part="role-modal-container" class="role-modal-container">
-            <div id="roleModal" class="modal hidden">
-                <div part="modal-content" class="modal-content">
-                    <h2 id="modalTitle"></h2>
-                    <p id="modalDescription"></p>
-                    <!-- Roles List -->
-                    <div id="rolesListContainer" class="defaultRoles"></div>
-                    <!-- Modal Buttons -->
-                    <div part="modal-actions" class="modal-actions">
-                        <button part="modal-buttons-confirm" id="modalConfirmButton">Confirm</button>
-                        <button part="modal-buttons-cancel" id="modalCancelButton">Cancel</button>
-                    </div>
+        <dialog id="roleModal" aria-labelledby="modalTitle">
+            <button id="roleCloseButton" aria-label="Close dialog">✕</button>
+            <h2 id="modalTitle"></h2>
+            
+            <!-- Role Toggle Buttons -->
+            <div class="role-toggles">
+                <div class="role-row">
+                    <button class="role-toggle-btn" id="leaderToggle">Leader</button>
+                    <span class="role-help-text">Manage materials and membership</span>
                 </div>
+                <div class="role-row">
+                    <button class="role-toggle-btn" id="contributorToggle">Contributor</button>
+                    <span class="role-help-text">Describe and annotate</span>
+                </div>
+            </div>
+            
+            <!-- Custom Roles Section -->
+            <div class="custom-roles-section" id="customRolesSection" style="display: none;">
+                <h3>Custom Roles</h3>
+                <div class="custom-roles-toggles" id="customRolesToggles"></div>
+            </div>
+            
+            <!-- Action Buttons Row -->
+            <div class="action-row">
+                <button class="action-btn readonly-btn" id="readonlyBtn">Set to Read-Only</button>
+                <button class="action-btn destructive icon-only" id="transferBtn" aria-label="Transfer Ownership">
+                    <span class="icon">👑</span>
+                    <span class="tooltip">Transfer Ownership</span>
+                </button>
+                <button class="action-btn destructive icon-only" id="removeBtn" aria-label="Remove Collaborator">
+                    <span class="icon">✕</span>
+                    <span class="tooltip">Remove Collaborator</span>
+                </button>
             </div>
-        </div>
+            
+            <!-- Modal Buttons -->
+            <div part="modal-actions" class="modal-actions">
+                <button part="modal-buttons-save" id="modalSaveButton">Save Changes</button>
+            </div>
+        </dialog>
         `
         this.addEventListeners()
         this.renderProjectCollaborators()
@@ -101,22 +383,30 @@ class RolesHandler extends HTMLElement {
         const groupMembersElement = document.querySelector("project-collaborators")?.shadowRoot?.querySelector(".group-members")
         if(!groupMembersElement) return
         this.renderCleanup.onElement(groupMembersElement, 'click', this.rolesHandler.bind(this))
+        
+        // Listen for member invitation events to refresh the collaborators list
+        this.renderCleanup.onEvent(TPEN.eventDispatcher, 'tpen-member-invited', () => {
+            this.refreshCollaborators()
+        })
     }
 
     renderProjectCollaborators() {
         if (!TPEN.activeProject) {
             return this.errorHTML.innerHTML = "No project"
         }
-        const userId = this.getAttribute('tpen-user-id')
         const collaborators = TPEN.activeProject.collaborators
-        let isOwnerOrLeader = ["OWNER", "LEADER"].some(role => collaborators[userId]?.roles.includes(role))
         const userHasEditAccess = CheckPermissions.checkEditAccess("member", "*")
         const groupMembersElement = document.querySelector("project-collaborators")?.shadowRoot?.querySelector(".group-members") 
         if(!groupMembersElement) return
-        Array.from(groupMembersElement.children).filter(child => {
+        Array.from(groupMembersElement.children).forEach(child => {
             const groupMembersActionsElement = child.querySelector(".actions")
             for (const collaboratorId in collaborators) {
                 if (groupMembersActionsElement?.getAttribute("data-member-id") == collaboratorId) {
+                    // Clear any previously injected manage buttons to prevent duplicates
+                    groupMembersActionsElement.querySelectorAll(".manage-button").forEach(btn => {
+                        btn.closest("div")?.remove()
+                    })
+                    
                     let memberHTML
                     if(userHasEditAccess){
                         memberHTML = this.createMemberHTML(collaboratorId)
@@ -126,233 +416,397 @@ class RolesHandler extends HTMLElement {
                         memberHTML.innerHTML = "You do not have permission to edit member roles"
                     }
                     groupMembersActionsElement.appendChild(memberHTML)
-                }  
+                }
             }
-        })        
-        this.manageRoleButtons(isOwnerOrLeader)
+        })
     }
 
     createMemberHTML(collaboratorId) {
         const memberElement = document.createElement("div")
         memberElement.innerHTML = `
-            <button part="manage-roles-button" class="manage-roles-button" data-member-id="${collaboratorId}">
-                Manage Roles <i class="fas fa-caret-down"></i>
+            <button part="manage-button" class="manage-button" data-member-id="${collaboratorId}">
+                Manage
             </button>
         `
         return memberElement
     }
 
+    openManageModal(memberID) {
+        if (!memberID) return
+        const collaborator = TPEN.activeProject?.collaborators?.[memberID]
+        if (!collaborator) return
 
-    manageRoleButtons(isOwnerOrLeader) {
-        const groupMembers = document.querySelector("project-collaborators")?.shadowRoot?.querySelector('.group-members')
-        if(!groupMembers) return
-        this.renderCleanup.onElement(groupMembers, "click", (e) => {
-            const button = e.target
-            if (button.classList.contains("manage-roles-button")) {
-                this.toggleRoleManagementButtons(button)
-            }
-        })
+        const memberName = collaborator.profile?.displayName ?? memberID
+        this.currentMemberID = memberID
+        this.currentMemberName = memberName
+        this.originalRoles = [...collaborator.roles]
+        
+        this.openRoleModal(
+            `Manage ${memberName}`,
+            memberID
+        )
     }
 
-    toggleRoleManagementButtons(button) {
-        const memberID = button.dataset.memberId
-        const actionsDiv = button.closest(".member").querySelector(".actions")
-
-        if (actionsDiv.querySelector(".role-management-buttons")) {
-            actionsDiv.querySelector(".role-management-buttons").remove()
-            return
+    /**
+     * Helper to extract meaningful error message from error object
+     * @param {Error|Object} error - The error object
+     * @returns {string} - User-friendly error message
+     */
+    getErrorMessage(error) {
+        // Check for HTTP status codes
+        if (error?.response?.status) {
+            const status = error.response.status
+            const statusText = error.response.statusText || ''
+            const message = error.response?.data?.message || error.response?.data?.error || ''
+            
+            if (message) {
+                return `${status} ${statusText}: ${message}`.trim()
+            }
+            
+            if (status === 403) return '403 Forbidden: You do not have permission to perform this action'
+            if (status === 404) return '404 Not Found: The resource could not be found'
+            if (status === 409) return '409 Conflict: This action conflicts with the current state'
+            if (status >= 500) return `${status} Server Error: Please try again later`
+            if (status >= 400) return `${status} ${statusText}`
         }
+        
+        // Check for message property
+        if (error?.message) return error.message
+        
+        // Fallback
+        return 'An unexpected error occurred'
+    }
 
-        const collaborator = TPEN.activeProject.collaborators[memberID]
-        const buttons = this.generateRoleManagementButtons(collaborator, button.dataset)
+    async rolesHandler(event) {
+        try {
+            const button = event.target.closest("button")
+            if (!button) return
 
-        const roleManagementButtonsHTML = `
-            <div part="role-management-buttons" class="role-management-buttons">
-                ${buttons.join("")}
-            </div>
-        `
+            const { memberId } = button.dataset
+            if (!memberId) return console.warn("Button does not have a valid member ID")
 
-        const roleManagementDiv = document.createElement("div")
-        roleManagementDiv.innerHTML = roleManagementButtonsHTML
-        actionsDiv.appendChild(roleManagementDiv)
+            if (button.classList.contains("manage-button")) {
+                // Store trigger element for focus restoration
+                this.triggerElement = button
+                this.openManageModal(memberId)
+            }
+        } catch (error) {
+            console.error("Error handling button action:", error)
+            alert("An error occurred. Please try again.")
+        }
     }
 
-    generateRoleManagementButtons(collaborator, button) {
+    openRoleModal(title, memberID) {
+        const modal = this.shadowRoot.querySelector("#roleModal")
+        const modalTitle = this.shadowRoot.querySelector("#modalTitle")
+        const leaderToggle = this.shadowRoot.querySelector("#leaderToggle")
+        const contributorToggle = this.shadowRoot.querySelector("#contributorToggle")
+        const readonlyBtn = this.shadowRoot.querySelector("#readonlyBtn")
+        const transferBtn = this.shadowRoot.querySelector("#transferBtn")
+        const removeBtn = this.shadowRoot.querySelector("#removeBtn")
+        const saveButton = this.shadowRoot.querySelector("#modalSaveButton")
+        const closeButton = this.shadowRoot.querySelector("#roleCloseButton")
+
+        const collaborator = TPEN.activeProject?.collaborators?.[memberID]
+        if (!collaborator) return
+
         const currentUserID = this.getAttribute("tpen-user-id")
         const currentUserIsOwner = TPEN.activeProject.collaborators[currentUserID]?.roles.includes("OWNER")
-
-        const memberID = button.memberId
-        const memberName = collaborator.profile?.displayName
         const hasDeleteAccess = CheckPermissions.checkDeleteAccess("member", "*")
+        const isOwner = collaborator.roles.includes("OWNER")
+        const memberName = collaborator.profile?.displayName ?? memberID
 
-        const buttons = []
-
-        if (!collaborator.roles.includes("OWNER") && currentUserIsOwner) {
-            buttons.push(`<button part="transfer-ownership-button" class="transfer-ownership-button" data-member-id=${memberID}> Transfer Ownership</button>`)
+        modalTitle.textContent = title
+        
+        // Get custom roles from project.roles (anything not a default role)
+        const defaultRoles = ['OWNER', 'LEADER', 'CONTRIBUTOR', 'VIEWER']
+        const customRoleIds = Object.keys(TPEN.activeProject?.roles || {}).filter(roleId => 
+            !defaultRoles.includes(roleId.toUpperCase())
+        )
+        
+        // Render custom roles toggle buttons
+        const customRolesSection = this.shadowRoot.querySelector("#customRolesSection")
+        const customRolesToggles = this.shadowRoot.querySelector("#customRolesToggles")
+        
+        if (customRoleIds.length > 0) {
+            customRolesSection.style.display = 'block'
+            customRolesToggles.innerHTML = ''
+            
+            customRoleIds.forEach(roleId => {
+                const isActive = collaborator.roles.some(r => r.toUpperCase() === roleId.toUpperCase())
+                const button = document.createElement('button')
+                button.className = `custom-role-toggle ${isActive ? 'active' : ''}`
+                button.setAttribute('data-role-id', roleId.toUpperCase())
+                button.setAttribute('aria-pressed', isActive)
+                button.textContent = roleId
+                
+                this.renderCleanup.onElement(button, 'click', () => {
+                    button.classList.toggle('active')
+                    button.setAttribute('aria-pressed', button.classList.contains('active'))
+                    updateSaveButtonState()
+                })
+                
+                customRolesToggles.appendChild(button)
+            })
+        } else {
+            customRolesSection.style.display = 'none'
         }
-
-        if (!collaborator.roles.includes("LEADER")) {
-            buttons.push(`<button part="make-leader-button" class="make-leader-button" data-member-id=${memberID}>Promote to Leader</button>`)
+        
+        // Helper to get current roles from modal state
+        const getCurrentRoles = () => {
+            const currentRoles = []
+            if (leaderToggle.classList.contains("active")) currentRoles.push("LEADER")
+            if (contributorToggle.classList.contains("active")) currentRoles.push("CONTRIBUTOR")
+            
+            // Collect custom roles from toggle buttons
+            const customRoleToggles = this.shadowRoot.querySelectorAll(".custom-role-toggle.active")
+            customRoleToggles.forEach(button => {
+                const roleId = button.getAttribute('data-role-id')
+                if (roleId) currentRoles.push(roleId)
+            })
+            
+            // Add VIEWER if no Leader or Contributor
+            if (!currentRoles.includes("LEADER") && !currentRoles.includes("CONTRIBUTOR")) {
+                currentRoles.push("VIEWER")
+            }
+            
+            return currentRoles
+        }
+        
+        // Helper to check if there are unsaved changes
+        const hasChanges = () => {
+            const currentRoles = getCurrentRoles()
+            const currentSelection = currentRoles.sort().join(",")
+            const originalSelection = this.originalRoles.sort().join(",")
+            return currentSelection !== originalSelection
+        }
+        
+        // Helper to update Save button state
+        const updateSaveButtonState = () => {
+            saveButton.disabled = !hasChanges()
+        }
+        
+        // Set initial toggle states
+        const updateToggleStates = () => {
+            const hasLeader = leaderToggle.classList.contains("active")
+            const hasContributor = contributorToggle.classList.contains("active")
+            
+            // Show readonly button only if Leader or Contributor is active
+            if (hasLeader || hasContributor) {
+                readonlyBtn.classList.remove("hidden")
+            } else {
+                readonlyBtn.classList.add("hidden")
+            }
+            
+            updateSaveButtonState()
         }
 
+        // Initialize role toggles - clear first, then set based on current member
+        leaderToggle.classList.remove("active")
+        contributorToggle.classList.remove("active")
+        leaderToggle.setAttribute("aria-pressed", "false")
+        contributorToggle.setAttribute("aria-pressed", "false")
         if (collaborator.roles.includes("LEADER")) {
-            buttons.push(`<button part="demote-leader-button" class="demote-leader-button" data-member-id=${memberID}>Demote from Leader</button>`)
+            leaderToggle.classList.add("active")
+            leaderToggle.setAttribute("aria-pressed", "true")
         }
-
-        if (!collaborator.roles.includes("VIEWER")) {
-            buttons.push(`<button part="set-to-viewer-button" class="set-to-viewer-button" data-member-id=${memberID}>Revoke Write Access</button>`)
+        if (collaborator.roles.includes("CONTRIBUTOR")) {
+            contributorToggle.classList.add("active")
+            contributorToggle.setAttribute("aria-pressed", "true")
         }
+        updateToggleStates()
 
-        buttons.push(`<button part="set-role-button" class="set-role-button" data-member-id=${memberID}>Set Role</button>`)
+        // Toggle handlers
+        this.renderCleanup.onElement(leaderToggle, 'click', () => {
+            leaderToggle.classList.toggle("active")
+            leaderToggle.setAttribute("aria-pressed", leaderToggle.classList.contains("active"))
+            updateToggleStates()
+        })
 
-        if (hasDeleteAccess) {
-            buttons.push(`<button part="remove-button" class="remove-button" data-member-id=${memberID} data-member-name=${memberName}>Remove User</button>`)
+        this.renderCleanup.onElement(contributorToggle, 'click', () => {
+            contributorToggle.classList.toggle("active")
+            contributorToggle.setAttribute("aria-pressed", contributorToggle.classList.contains("active"))
+            updateToggleStates()
+        })
+
+        // Read-only button: remove Leader and Contributor
+        this.renderCleanup.onElement(readonlyBtn, 'click', () => {
+            leaderToggle.classList.remove("active")
+            contributorToggle.classList.remove("active")
+            leaderToggle.setAttribute("aria-pressed", "false")
+            contributorToggle.setAttribute("aria-pressed", "false")
+            updateToggleStates()
+        })
+
+        // Transfer ownership button
+        if (!isOwner && currentUserIsOwner) {
+            transferBtn.classList.remove("hidden")
+            this.renderCleanup.onElement(transferBtn, 'click', async () => {
+                await this.handleTransferOwnership(memberID, memberName)
+            })
+        } else {
+            transferBtn.classList.add("hidden")
         }
 
-        return buttons
-    }
+        // Remove collaborator button
+        if (hasDeleteAccess) {
+            removeBtn.classList.remove("hidden")
+            this.renderCleanup.onElement(removeBtn, 'click', async () => {
+                await this.handleRemoveMember(memberID, memberName)
+            })
+        } else {
+            removeBtn.classList.add("hidden")
+        }
 
-    async rolesHandler(event) {
-        try {
-            const button = event.target.closest("button")
-            if (!button) return
+        // Save button handler
+        this.renderCleanup.onElement(saveButton, 'click', async () => {
+            await this.saveRoleChanges(memberID, leaderToggle, contributorToggle)
+        })
 
-            const { memberId } = button.dataset
-            const memberName = button.dataset.memberName
-            if (!memberId) return console.warn("Button does not have a valid member ID")
+        // Cancel button handler with unsaved changes check
+        this.renderCleanup.onElement(closeButton, 'click', (e) => {
+            e.preventDefault()
+            this.handleModalClose(leaderToggle, contributorToggle)
+        })
 
-            const actions = {
-                "remove-button": () => this.removeMember(memberId, memberName),
-                "set-role-button": () => this.handleSetRoleButton(memberId),
-                "set-to-viewer-button": () => this.handleSetToViewerButton(memberId),
-                "make-leader-button": () => this.handleMakeLeaderButton(memberId),
-                "transfer-ownership-button": () => this.handleTransferOwnershipButton(memberId),
-                "demote-leader-button": () => this.handleDemoteLeaderButton(memberId),
-            }
+        // Handle Escape key with unsaved changes check
+        this.renderCleanup.onElement(modal, 'cancel', (e) => {
+            e.preventDefault()
+            this.handleModalClose(leaderToggle, contributorToggle)
+        })
 
-            for (const [className, action] of Object.entries(actions)) {
-                if (button.classList.contains(className)) {
-                    await action()
-                    break
-                }
-            }
-        } catch (error) {
-            console.error("Error handling button action:", error)
-            alert("An error occurred. Please try again.")
-        }
+        modal.showModal()
     }
 
-    async removeMember(memberID, memberName) {
-        if (!confirm(`This action will remove ${memberName} from your project. Click 'OK' to continue?`)) return
+    async saveRoleChanges(memberID, leaderToggle, contributorToggle) {
+        const saveButton = this.shadowRoot.querySelector("#modalSaveButton")
+        const selectedRoles = []
+        
+        if (leaderToggle.classList.contains("active")) selectedRoles.push("LEADER")
+        if (contributorToggle.classList.contains("active")) selectedRoles.push("CONTRIBUTOR")
+        
+        // Collect custom roles from toggle buttons
+        const customRoleToggles = this.shadowRoot.querySelectorAll(".custom-role-toggle.active")
+        customRoleToggles.forEach(button => {
+            const roleId = button.getAttribute('data-role-id')
+            if (roleId) selectedRoles.push(roleId)
+        })
+        
+        // If no Leader or Contributor, they become VIEWER
+        if (!selectedRoles.includes("LEADER") && !selectedRoles.includes("CONTRIBUTOR")) {
+            selectedRoles.push("VIEWER")
+        }
+        
+        // Disable button and show loading state
+        saveButton.disabled = true
+        saveButton.textContent = "Saving..."
+        
         try {
-            const data = await TPEN.activeProject.removeMember(memberID)
-            if (data) {
-                document.querySelector(`[data-member-id="${memberID}"]`)?.remove()
-                alert('Member removed successfully')
+            const response = await TPEN.activeProject.cherryPickRoles(memberID, selectedRoles)
+            if (response) {
+                TPEN.eventDispatcher.dispatch('tpen-toast', { message: 'Roles updated successfully.', status: 'success' })
+                this.closeRoleModal()
+                this.refreshCollaborators()
             }
         } catch (error) {
-            console.error("Error removing member:", error)
-        }
-    }
-
-    async handleSetRoleButton(memberID) {
-        this.openRoleModal(
-            "Manage Roles",
-            `Add or remove roles for ${TPEN.activeProject.collaborators[memberID]?.profile?.displayName ?? " contributor " + memberID}`,
-            async (selectedRoles) => {
-                if (selectedRoles.length > 0) {
-                    const response = await TPEN.activeProject.cherryPickRoles(memberID, selectedRoles)
-                    if (response) alert("Roles updated successfully.")
-                }
-            }
-        )
-    }
-
-    async handleSetToViewerButton(memberID) {
-        if (window.confirm(`Are you sure you want to remove all write access for ${memberID}? The user will become a VIEWER.`)) {
-            const response = await TPEN.activeProject.setToViewer(memberID)
-            if (response) alert("User role updated to VIEWER.")
+            console.error("Error updating roles:", error)
+            const errorMessage = this.getErrorMessage(error)
+            TPEN.eventDispatcher.dispatch('tpen-toast', { message: errorMessage, status: 'error', dismissible: true })
+        } finally {
+            // Re-enable button and restore text
+            saveButton.disabled = false
+            saveButton.textContent = "Save Changes"
         }
     }
 
-    async handleMakeLeaderButton(memberID) {
-        if (window.confirm(`Are you sure you want to promote collaborator ${memberID} to LEADER?`)) {
-            const response = await TPEN.activeProject.makeLeader(memberID)
-            if (response) alert("User promoted to LEADER.")
+    handleModalClose(leaderToggle, contributorToggle) {
+        const currentRoles = []
+        if (leaderToggle.classList.contains("active")) currentRoles.push("LEADER")
+        if (contributorToggle.classList.contains("active")) currentRoles.push("CONTRIBUTOR")
+        
+        // Collect custom roles from toggle buttons
+        const customRoleToggles = this.shadowRoot.querySelectorAll(".custom-role-toggle.active")
+        customRoleToggles.forEach(button => {
+            const roleId = button.getAttribute('data-role-id')
+            if (roleId) currentRoles.push(roleId)
+        })
+        
+        if (!currentRoles.includes("LEADER") && !currentRoles.includes("CONTRIBUTOR")) {
+            currentRoles.push("VIEWER")
         }
-    }
-
-    async handleDemoteLeaderButton(memberID) {
-        if (window.confirm(`Are you sure you want to demote collaborator ${memberID} from LEADER?`)) {
-            const response = await TPEN.activeProject.demoteLeader(memberID)
-            if (response) alert("User demoted from LEADER.")
+        
+        const currentSelection = currentRoles.sort().join(",")
+        const originalSelection = this.originalRoles.sort().join(",")
+        
+        if (currentSelection !== originalSelection) {
+            if (confirm("You have unsaved changes. Discard changes and close?")) {
+                this.closeRoleModal()
+            }
+        } else {
+            this.closeRoleModal()
         }
     }
 
-    async handleTransferOwnershipButton(memberID) {
-        const confirmMessage = `You are about to transfer ownership of this project to ${TPEN.activeProject.collaborators[memberID]?.profile?.displayName ?? " contributor " + memberID}. This action is irreversible. Please confirm if you want to proceed.`
-        if (window.confirm(confirmMessage)) {
+    async handleTransferOwnership(memberID, memberName) {
+        const confirmMessage = `You are about to transfer ownership of this project to ${memberName}. This action is irreversible. Please confirm if you want to proceed.`
+        if (!window.confirm(confirmMessage)) return
+        
+        try {
             const response = await TPEN.activeProject.transferOwnership(memberID)
             if (response) {
-                alert("Ownership transferred successfully.")
+                TPEN.eventDispatcher.dispatch('tpen-toast', { message: 'Ownership transferred successfully.', status: 'success' })
                 location.reload()
             }
+        } catch (error) {
+            console.error("Error transferring ownership:", error)
+            const errorMessage = this.getErrorMessage(error)
+            TPEN.eventDispatcher.dispatch('tpen-toast', { message: errorMessage, status: 'error', dismissible: true })
         }
     }
 
-    openRoleModal(title, description, confirmCallback) {
-        const modal = this.shadowRoot.querySelector("#roleModal")
-        const modalTitle = this.shadowRoot.querySelector("#modalTitle")
-        const modalDescription = this.shadowRoot.querySelector("#modalDescription")
-        const rolesListContainer = this.shadowRoot.querySelector("#rolesListContainer")
-        const confirmButton = this.shadowRoot.querySelector("#modalConfirmButton")
-        const cancelButton = this.shadowRoot.querySelector("#modalCancelButton")
-
-        modalTitle.textContent = title
-        modalDescription.textContent = description
-        this.renderRolesList(TPEN.activeProject.roles, rolesListContainer)
-
-        confirmButton.onclick = () => {
-            const selectedRoles = Array.from(
-                rolesListContainer.querySelectorAll("input[type=checkbox]:checked")
-            ).map((checkbox) => checkbox.value)
-            confirmCallback(selectedRoles)
-            this.closeRoleModal()
+    async handleRemoveMember(memberID, memberName) {
+        if (!confirm(`This action will remove ${memberName} from your project. Click 'OK' to continue?`)) return
+        try {
+            const data = await TPEN.activeProject.removeMember(memberID)
+            if (data) {
+                TPEN.eventDispatcher.dispatch('tpen-toast', { message: 'Member removed successfully', status: 'success' })
+                this.closeRoleModal()
+                this.refreshCollaborators()
+            }
+        } catch (error) {
+            console.error("Error removing member:", error)
+            const errorMessage = this.getErrorMessage(error)
+            TPEN.eventDispatcher.dispatch('tpen-toast', { message: errorMessage, status: 'error', dismissible: true })
         }
-
-        cancelButton.onclick = this.closeRoleModal.bind(this)
-        modal.classList.remove("hidden")
     }
 
-    renderRolesList(rolesObject, container) {
-        container.innerHTML = ""
-        Object.keys(rolesObject).forEach((role) => {
-            if (role.toLowerCase() !== "owner") {
-                container.innerHTML += `
-                <style>
-                .role-checkbox {
-                    display: flex;
-                    align-items: center;
-                }
-                .role-checkbox label {
-                    display: flex;
-                    align-items: center;
-                }
-                .role-checkbox input[type="checkbox"] {
-                    margin-right: 5px;
-                }
-                </style>
-                <div class="role-checkbox">
-                    <label>
-                        <input type="checkbox" value="${role}"/>${role}
-                    </label>
-                </div>`
-            }
-        })
+    closeRoleModal() {
+        const modal = this.shadowRoot.querySelector("#roleModal")
+        modal.close()
+        this.currentMemberID = null
+        this.currentMemberName = null
+        this.originalRoles = []
+        
+        // Restore focus to the trigger element
+        if (this.triggerElement) {
+            this.triggerElement.focus()
+            this.triggerElement = null
+        }
     }
 
-    closeRoleModal() {
-        this.shadowRoot.querySelector("#roleModal").classList.add("hidden")
+    /**
+     * Refreshes the project collaborators display by calling the refresh method
+     * on the project-collaborators component.
+     */
+    refreshCollaborators() {
+        const collaboratorsComponent = document.querySelector("project-collaborators")
+        if (collaboratorsComponent?.refreshCollaborators) {
+            collaboratorsComponent.refreshCollaborators()
+        }
+        requestAnimationFrame(() => {
+            this.addEventListeners()
+            this.renderProjectCollaborators()
+        })
     }
 }
 
diff --git a/interfaces/manage-project/collaborators.html b/interfaces/manage-project/collaborators.html
index f18df907..7e448b6f 100644
--- a/interfaces/manage-project/collaborators.html
+++ b/interfaces/manage-project/collaborators.html
@@ -19,9 +19,11 @@
     <link rel="stylesheet" href="/css/collaborators/index.css">
     <link href="/components/gui/site/index.css" rel="stylesheet" type="text/css" />
     <style>
+        tpen-card {
+            grid-column: 1 / -1;
+        }
+
         #projectManagementBtn {
-            position: absolute;
-            display: none;
             background-color: var(--primary-color);
             padding: 10px 20px;
             color: var(--white);
@@ -29,6 +31,9 @@
             cursor: pointer;
             transition: background-color 0.3s;
             border: none;
+            margin-top: 1em;
+            grid-column: 1 / -1;
+            justify-self: start;
         }
 
         #projectManagementBtn:hover,