diff --git a/src/i18n/locales/de.json b/src/i18n/locales/de.json
index f85a09bf9..d7e0422a1 100644
--- a/src/i18n/locales/de.json
+++ b/src/i18n/locales/de.json
@@ -6,6 +6,7 @@
   },
   "admin": {
     "access_management": "Zugriffsverwaltung",
+    "add_project": "Projekt hinzufügen",
     "alert_created": "Alarm erstellt",
     "alert_deleted": "Alarm gelöscht",
     "alert_log_successful_publish": "Erfolgreiche Alarmierung protokollieren",
@@ -64,6 +65,7 @@
     "create_oidc_group": "Gruppe erstellen",
     "create_oidc_user": "OpenID Connect-Benutzer erstellen",
     "create_repository": "Repository erstellen",
+    "create_role": "Rolle erstellen",
     "create_team": "Team erstellen",
     "create_template": "Vorlage erstellen",
     "create_user": "Benutzer erstellen",
@@ -78,6 +80,7 @@
     "delete_alert": "Alarm löschen",
     "delete_oidc_group": "Gruppe löschen",
     "delete_repository": "Repository löschen",
+    "delete_role": "Rolle löschen",
     "delete_team": "Team löschen",
     "delete_template": "Vorlage löschen",
     "delete_user": "Benutzer löschen",
@@ -164,6 +167,7 @@
     "metrics": "Metriken",
     "mime_type": "Mime Typ",
     "minutes": "Minuten",
+    "multiselect_remove_role": "Rollen können nur geändert werden",
     "name_regex": "Komponentenname Regex",
     "name_regex_desc": "Gibt einen regulären Ausdruck an, der interne Komponenten anhand des Komponentennamens identifiziert.",
     "namespace_regex": "Regulärer Ausdruck für den Komponenten-Namespace",
@@ -193,9 +197,11 @@
     "perform_identification": "Identifizierung durchführen",
     "perform_test": "Test durchführen",
     "permissions": "Berechtigungen",
+    "permissions_updated": "Die Berechtigungen wurden aktualisiert",
     "personal_access_token": "Persönlicher Zugriffstoken",
     "portfolio_access_control": "Portfolio-Zugriffskontrolle",
     "preview": "Vorschau",
+    "project": "Projekt",
     "project_access": "Projektzugriff",
     "project_retention_enable": "Aktivieren Sie das Löschen inaktiver Projekte",
     "publisher": "Publisher",
@@ -214,6 +220,9 @@
     "reindex_vulnerabilities": "Sicherheitslücken",
     "reindex_vulnerable_software": "Anfällige Software",
     "remove_api_key": "remove_api_key",
+    "remove_permission": "Erlaubnis entfernen",
+    "remove_role": "Rolle entfernen",
+    "remove_team_membership": "Mitgliedschaft entfernen",
     "repositories": "Repositorys",
     "repository_authentication": "Authentifizierung erforderlich",
     "repository_created": "Repository erstellt",
@@ -224,6 +233,7 @@
     "required_fullname": "Der vollständige Name ist erforderlich",
     "required_oidc_group_name": "Name ist erforderlich",
     "required_password": "Passwort wird benötigt",
+    "required_role_name": "Rollenname ist erforderlich",
     "required_team_name": "Teamname ist erforderlich",
     "required_username": "Benutzername wird benötigt",
     "restore_default_template": "Standardvorlagen wiederherstellen",
@@ -236,12 +246,21 @@
     "risk_score_weight_medium": "Mittel (Standard: 3)",
     "risk_score_weight_unassigned": "Nicht zugewiesen (Standard: 5)",
     "risk_score_weighting_description": "Sie können die Gewichtung jedes Schweregrads anpassen, um die Risikobewertung anzupassen.",
+    "role": "Rolle",
+    "role_already_assigned": "Der Benutzer hat diese Rolle bereits zugewiesen.",
+    "role_assigned": "Rolle zugewiesen",
+    "role_created": "Rolle erstellt",
+    "role_deleted": "Rolle gelöscht",
+    "role_name": "Rollenname",
+    "role_updated": "Rolle aktualisiert",
+    "roles": "Rollen",
     "scope": "Scope",
     "select_ecosystem": "Ökosysteme auswählen",
     "select_ldap_group": "LDAP-Gruppe auswählen",
     "select_oidc_group": "OpenID Connect-Gruppe auswählen",
     "select_permission": "Berechtigung auswählen",
     "select_project": "Projekt auswählen",
+    "select_role": "Rolle auswählen",
     "select_team": "Team auswählen",
     "select_team_as_recipient": "Team als Empfänger auswählen",
     "snyk": "Snyk (Beta)",
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index 9ff5274d3..189fcbd18 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -6,6 +6,7 @@
   },
   "admin": {
     "access_management": "Access Management",
+    "add_project": "Add Project",
     "alert_created": "Alert created",
     "alert_deleted": "Alert deleted",
     "alert_log_successful_publish": "Log successful publish",
@@ -64,6 +65,7 @@
     "create_oidc_group": "Create Group",
     "create_oidc_user": "Create OpenID Connect User",
     "create_repository": "Create Repository",
+    "create_role": "Create Role",
     "create_team": "Create Team",
     "create_template": "Create Template",
     "create_user": "Create User",
@@ -78,6 +80,7 @@
     "delete_alert": "Delete Alert",
     "delete_oidc_group": "Delete Group",
     "delete_repository": "Delete Repository",
+    "delete_role": "Delete Role",
     "delete_team": "Delete Team",
     "delete_template": "Delete Template",
     "delete_user": "Delete User",
@@ -164,6 +167,7 @@
     "metrics": "Metrics",
     "mime_type": "Mime type",
     "minutes": "Minutes",
+    "multiselect_remove_role": "Roles can only be changed",
     "name_regex": "Component name regex",
     "name_regex_desc": "Specifies a regular expression that identifies internal components by the components name.",
     "namespace_regex": "Component namespace regex",
@@ -193,9 +197,11 @@
     "perform_identification": "Perform Identification",
     "perform_test": "Perform Test",
     "permissions": "Permissions",
+    "permissions_updated": "Permissions updated",
     "personal_access_token": "Personal Access Token",
     "portfolio_access_control": "Portfolio Access Control",
     "preview": "Preview",
+    "project": "Project",
     "project_access": "Project access",
     "project_retention_enable": "Enable Inactive Project Deletion",
     "publisher": "Publisher",
@@ -214,6 +220,9 @@
     "reindex_vulnerabilities": "Vulnerabilities",
     "reindex_vulnerable_software": "Vulnerable software",
     "remove_api_key": "Remove API Key",
+    "remove_permission": "Remove Permission",
+    "remove_role": "Remove Role",
+    "remove_team_membership": "Remove Membership",
     "repositories": "Repositories",
     "repository_authentication": "Authentication required",
     "repository_created": "Repository created",
@@ -224,6 +233,7 @@
     "required_fullname": "Fullname is required",
     "required_oidc_group_name": "Name is required",
     "required_password": "Password is required",
+    "required_role_name": "Role name is required",
     "required_team_name": "Team name is required",
     "required_username": "Username is required",
     "restore_default_template": "Restore default templates",
@@ -236,12 +246,21 @@
     "risk_score_weight_medium": "Medium (default: 3)",
     "risk_score_weight_unassigned": "Unassigned (default: 5)",
     "risk_score_weighting_description": "You can customize the weighting of each severity to customize the risk score.",
+    "role": "Role",
+    "role_already_assigned": "The user already has this role assigned.",
+    "role_assigned": "Role Assigned",
+    "role_created": "Role Created",
+    "role_deleted": "Role Deleted",
+    "role_name": "Role Name",
+    "role_updated": "Role Updated",
+    "roles": "Roles",
     "scope": "Scope",
     "select_ecosystem": "Select Ecosystems",
     "select_ldap_group": "Select LDAP Group",
     "select_oidc_group": "Select OpenID Connect Group",
     "select_permission": "Select permission",
     "select_project": "Select Project",
+    "select_role": "Select Role",
     "select_team": "Select Team",
     "select_team_as_recipient": "Select team as recipient",
     "snyk": "Snyk (Beta)",
diff --git a/src/i18n/locales/es.json b/src/i18n/locales/es.json
index 3df684da7..333983fd0 100644
--- a/src/i18n/locales/es.json
+++ b/src/i18n/locales/es.json
@@ -6,6 +6,7 @@
   },
   "admin": {
     "access_management": "Gestión de Acceso",
+    "add_project": "Agregar proyecto",
     "alert_created": "Alerta creada",
     "alert_deleted": "Alerta eliminada",
     "alert_log_successful_publish": "Registrar publicación exitosa",
@@ -64,6 +65,7 @@
     "create_oidc_group": "Crea un grupo",
     "create_oidc_user": "Crear usuario de OpenID Connect",
     "create_repository": "Crear repositorio",
+    "create_role": "Crear rol",
     "create_team": "Crear equipo",
     "create_template": "Crear plantilla",
     "create_user": "Crear usuario",
@@ -78,6 +80,7 @@
     "delete_alert": "Eliminar alerta",
     "delete_oidc_group": "Eliminar grupo",
     "delete_repository": "Eliminar repositorio",
+    "delete_role": "Delete Role",
     "delete_team": "Eliminar equipo",
     "delete_template": "Eliminar plantilla",
     "delete_user": "Borrar usuario",
@@ -164,6 +167,7 @@
     "metrics": "Métrica",
     "mime_type": "Tipo de Mimica",
     "minutes": "Minutos",
+    "multiselect_remove_role": "Los roles solo se pueden cambiar",
     "name_regex": "Nombre del componente expresión regular",
     "name_regex_desc": "Especifica una expresión regular que identifica los componentes internos por el nombre de los componentes.",
     "namespace_regex": "Expresión regular del espacio de nombres del componente",
@@ -193,9 +197,11 @@
     "perform_identification": "Realizar identificación",
     "perform_test": "Realizar prueba",
     "permissions": "Permisos",
+    "permissions_updated": "Permisos actualizados",
     "personal_access_token": "Token de acceso personal",
     "portfolio_access_control": "Control de acceso al portafolio",
     "preview": "Avance",
+    "project": "Proyecto",
     "project_access": "Acceso al proyecto",
     "project_retention_enable": "Habilitar la eliminación de proyectos inactivos",
     "publisher": "Editor",
@@ -214,6 +220,9 @@
     "reindex_vulnerabilities": "Vulnerabilidades",
     "reindex_vulnerable_software": "software vulnerable",
     "remove_api_key": "remove_api_key",
+    "remove_permission": "Eliminar el permiso",
+    "remove_role": "Eliminar el rol",
+    "remove_team_membership": "Eliminar la membresía",
     "repositories": "Repositorios",
     "repository_authentication": "Autenticacion requerida",
     "repository_created": "Repositorio creado",
@@ -224,6 +233,7 @@
     "required_fullname": "Se requiere el nombre completo",
     "required_oidc_group_name": "Se requiere el nombre",
     "required_password": "se requiere contraseña",
+    "required_role_name": "El nombre del rol es obligatorio",
     "required_team_name": "El nombre del equipo es obligatorio.",
     "required_username": "Se requiere nombre de usuario",
     "restore_default_template": "Restaurar plantillas predeterminadas",
@@ -236,12 +246,21 @@
     "risk_score_weight_medium": "Medio (predeterminado: 3)",
     "risk_score_weight_unassigned": "No asignado (predeterminado: 5)",
     "risk_score_weighting_description": "Puede personalizar la ponderación de cada gravedad para personalizar la puntuación de riesgo.",
+    "role": "Role",
+    "role_already_assigned": "El usuario ya tiene este rol asignado.",
+    "role_assigned": "Rol asignado",
+    "role_created": "Rol creado",
+    "role_deleted": "Rol eliminado",
+    "role_name": "Nombre del rol",
+    "role_updated": "Rol actualizado",
+    "roles": "Roles",
     "scope": "Alcance",
     "select_ecosystem": "Seleccionar ecosistemas",
     "select_ldap_group": "Seleccione grupo LDAP",
     "select_oidc_group": "Seleccione el grupo de conexión OpenID",
     "select_permission": "Seleccionar permiso",
     "select_project": "Seleccionar Proyecto",
+    "select_role": "Rol de selección",
     "select_team": "Selecciona un equipo",
     "select_team_as_recipient": "Seleccionar equipo como destinatario",
     "snyk": "Snyk (Beta)",
diff --git a/src/i18n/locales/fr.json b/src/i18n/locales/fr.json
index 8e7b638e4..c66eebdbe 100644
--- a/src/i18n/locales/fr.json
+++ b/src/i18n/locales/fr.json
@@ -6,6 +6,7 @@
   },
   "admin": {
     "access_management": "Gestion des accès",
+    "add_project": "Ajouter un projet",
     "alert_created": "Alerte créée",
     "alert_deleted": "Alerte supprimée",
     "alert_log_successful_publish": "Journaliser les publications réussies",
@@ -64,6 +65,7 @@
     "create_oidc_group": "Créer un groupe",
     "create_oidc_user": "Créer un utilisateur OpenID Connect",
     "create_repository": "Créer un dépôt",
+    "create_role": "Créer un rôle",
     "create_team": "Créer une équipe",
     "create_template": "Créer un modèle",
     "create_user": "Créer un utilisateur",
@@ -78,6 +80,7 @@
     "delete_alert": "Supprimer l'alerte",
     "delete_oidc_group": "Supprimer le groupe",
     "delete_repository": "Supprimer le dépôt",
+    "delete_role": "Supprimer le rôle",
     "delete_team": "Supprimer l'équipe",
     "delete_template": "Supprimer le modèle",
     "delete_user": "Supprimer l'utilisateur",
@@ -164,6 +167,7 @@
     "metrics": "Métrique",
     "mime_type": "Type MIME",
     "minutes": "Minutes",
+    "multiselect_remove_role": "Les rôles ne peuvent être modifiés que",
     "name_regex": "Regex du nom du composant",
     "name_regex_desc": "Spécifie une expression régulière qui identifie les composants internes par le nom des composants.",
     "namespace_regex": "Regex d'espace de noms de composant",
@@ -193,9 +197,11 @@
     "perform_identification": "Effectuer une identification",
     "perform_test": "Effectuer un test",
     "permissions": "Autorisations",
+    "permissions_updated": "Autorisations mises à jour",
     "personal_access_token": "Jeton d'accès personnel",
     "portfolio_access_control": "Contrôle d'accès au portefolio",
     "preview": "Aperçu",
+    "project": "Projet",
     "project_access": "Accès au projet",
     "project_retention_enable": "Activer la suppression des projets inactifs",
     "publisher": "Éditeur",
@@ -214,6 +220,9 @@
     "reindex_vulnerabilities": "Vulnérabilités",
     "reindex_vulnerable_software": "Logiciels vulnérables",
     "remove_api_key": "Retirer la clé d'API",
+    "remove_permission": "Supprimer l'autorisation",
+    "remove_role": "Supprimer le rôle",
+    "remove_team_membership": "Supprimer",
     "repositories": "Dépôts",
     "repository_authentication": "Authentification requise",
     "repository_created": "Dépôt créé",
@@ -224,6 +233,7 @@
     "required_fullname": "Le nom complet est requis",
     "required_oidc_group_name": "Le nom est requis",
     "required_password": "Mot de passe requis",
+    "required_role_name": "Le nom du rôle est obligatoire",
     "required_team_name": "Le nom de l'équipe est requis",
     "required_username": "Nom d'utilisateur est nécessaire",
     "restore_default_template": "Restaurer les modèles par défaut",
@@ -236,12 +246,21 @@
     "risk_score_weight_medium": "Moyen (par défaut : 3)",
     "risk_score_weight_unassigned": "Non attribué (par défaut : 5)",
     "risk_score_weighting_description": "Vous pouvez personnaliser la pondération de chaque gravité pour personnaliser le score de risque.",
+    "role": "Rôle",
+    "role_already_assigned": "L'utilisateur a déjà ce rôle attribué.",
+    "role_assigned": "Rôle attribué",
+    "role_created": "Rôle créé",
+    "role_deleted": "Rôle supprimé",
+    "role_name": "Nom du rôle",
+    "role_updated": "Rôle mis à jour",
+    "roles": "Rôles",
     "scope": "Périmètre",
     "select_ecosystem": "Sélectionner les écosystèmes",
     "select_ldap_group": "Sélectionner un groupe LDAP",
     "select_oidc_group": "Sélectionner le groupe OpenID Connect",
     "select_permission": "Sélectionner l'autorisation",
     "select_project": "Sélectionner un projet",
+    "select_role": "Sélectionner un rôle",
     "select_team": "Sélectionner une équipe",
     "select_team_as_recipient": "Sélectionner une équipe comme destinataire",
     "snyk": "Snyk (bêta)",
diff --git a/src/i18n/locales/hi.json b/src/i18n/locales/hi.json
index e44b617ce..8f5d5b3f7 100644
--- a/src/i18n/locales/hi.json
+++ b/src/i18n/locales/hi.json
@@ -6,6 +6,7 @@
   },
   "admin": {
     "access_management": "उपयोग प्रबंधन",
+    "add_project": "प्रोजेक्ट जोड़ें",
     "alert_created": "अलर्ट बनाया गया",
     "alert_deleted": "अलर्ट हटा दिया गया",
     "alert_log_successful_publish": "लॉग सफल प्रकाशन",
@@ -64,6 +65,7 @@
     "create_oidc_group": "समूह बनाना",
     "create_oidc_user": "OpenID कनेक्ट उपयोगकर्ता बनाएँ",
     "create_repository": "रिपॉजिटरी बनाएं",
+    "create_role": "भूमिका बनाएँ",
     "create_team": "टीम बनाएं",
     "create_template": "टेम्पलेट बनाएं",
     "create_user": "उपयोगकर्ता बनाइये",
@@ -78,6 +80,7 @@
     "delete_alert": "अलर्ट हटाएं",
     "delete_oidc_group": "समूह हटाएं",
     "delete_repository": "रिपॉजिटरी हटाएँ",
+    "delete_role": "भूमिका हटाएँ",
     "delete_team": "टीम हटाएँ",
     "delete_template": "टेम्पलेट हटाएं",
     "delete_user": "उपभोक्ता मिटायें",
@@ -164,6 +167,7 @@
     "metrics": "मेट्रिक्स",
     "mime_type": "माइम प्रकार",
     "minutes": "मिनट",
+    "multiselect_remove_role": "भूमिकाएँ केवल बदली जा सकती हैं",
     "name_regex": "घटक नाम रेगेक्स",
     "name_regex_desc": "एक नियमित अभिव्यक्ति निर्दिष्ट करता है जो घटक नाम से आंतरिक घटकों की पहचान करता है।",
     "namespace_regex": "घटक नामस्थान regex",
@@ -193,9 +197,11 @@
     "perform_identification": "पहचान करें",
     "perform_test": "परीक्षण करें",
     "permissions": "अनुमतियां",
+    "permissions_updated": "अनुमतियाँ अपडेट की गईं",
     "personal_access_token": "व्यक्तिगत एक्सेस टोकन",
     "portfolio_access_control": "पोर्टफोलियो एक्सेस नियंत्रण",
     "preview": "पूर्व दर्शन",
+    "project": "परियोजना",
     "project_access": "परियोजना तक पहुंच",
     "project_retention_enable": "निष्क्रिय प्रोजेक्ट विलोपन सक्षम करें",
     "publisher": "प्रकाशक",
@@ -214,6 +220,9 @@
     "reindex_vulnerabilities": "कमजोरियों",
     "reindex_vulnerable_software": "कमजोर सॉफ्टवेयर",
     "remove_api_key": "remove_api_key",
+    "remove_permission": "अनुमति निकालें",
+    "remove_role": "भूमिका को दूर करना",
+    "remove_team_membership": "सदस्यता निकालें",
     "repositories": "डेटा संग्रह स्थान",
     "repository_authentication": "प्रमाणित करना",
     "repository_created": "रिपोजिटरी बनाई गई",
@@ -224,6 +233,7 @@
     "required_fullname": "पूरा नाम आवश्यक है",
     "required_oidc_group_name": "नाम आवश्यक है",
     "required_password": "पासवर्ड की आवश्यकता है",
+    "required_role_name": "भूमिका का नाम आवश्यक है",
     "required_team_name": "टीम का नाम आवश्यक है",
     "required_username": "उपयोगकर्ता नाम आवश्यक है",
     "restore_default_template": "डिफ़ॉल्ट टेम्पलेट्स पुनर्स्थापित करें",
@@ -236,12 +246,21 @@
     "risk_score_weight_medium": "मध्यम (डिफ़ॉल्ट: 3)",
     "risk_score_weight_unassigned": "असाइन नहीं किया गया (डिफ़ॉल्ट: 5)",
     "risk_score_weighting_description": "आप जोखिम स्कोर को अनुकूलित करने के लिए प्रत्येक गंभीरता के भार को अनुकूलित कर सकते हैं।",
+    "role": "भूमिका",
+    "role_already_assigned": "उपयोगकर्ता के पास पहले से ही यह भूमिका है।",
+    "role_assigned": "सौंपी गई भूमिका",
+    "role_created": "भूमिका बनाई गई",
+    "role_deleted": "भूमिका हटा दी गई",
+    "role_name": "भूमिका का नाम",
+    "role_updated": "अद्यतन की गई भूमिका",
+    "roles": "भूमिकाएँ",
     "scope": "दायरा",
     "select_ecosystem": "पारिस्थितिकी तंत्र का चयन करें",
     "select_ldap_group": "LDAP समूह चुनें",
     "select_oidc_group": "OpenID कनेक्ट समूह का चयन करें",
     "select_permission": "अनुमति चुनें",
     "select_project": "प्रोजेक्ट चुनें",
+    "select_role": "भूमिका का चयन करें",
     "select_team": "टीम का चयन",
     "select_team_as_recipient": "प्राप्तकर्ता के रूप में टीम का चयन करें",
     "snyk": "स्निक (बीटा)",
diff --git a/src/i18n/locales/it.json b/src/i18n/locales/it.json
index fffd2ed42..e2109a43a 100644
--- a/src/i18n/locales/it.json
+++ b/src/i18n/locales/it.json
@@ -6,6 +6,7 @@
   },
   "admin": {
     "access_management": "gestione degli accessi",
+    "add_project": "Aggiungi progetto",
     "alert_created": "Avviso creato",
     "alert_deleted": "Avviso eliminato",
     "alert_log_successful_publish": "Registra la pubblicazione riuscita",
@@ -64,6 +65,7 @@
     "create_oidc_group": "Creare un gruppo",
     "create_oidc_user": "Crea utente OpenID Connect",
     "create_repository": "Crea archivio",
+    "create_role": "Crea ruolo",
     "create_team": "Crea squadra",
     "create_template": "Crea modello",
     "create_user": "Creare un utente",
@@ -78,6 +80,7 @@
     "delete_alert": "Elimina avviso",
     "delete_oidc_group": "Elimina gruppo",
     "delete_repository": "Elimina archivio",
+    "delete_role": "Elimina ruolo",
     "delete_team": "Elimina squadra",
     "delete_template": "Elimina modello",
     "delete_user": "Elimina utente",
@@ -164,6 +167,7 @@
     "metrics": "Metrica",
     "mime_type": "Tipo mimo",
     "minutes": "Minuti",
+    "multiselect_remove_role": "I ruoli possono essere modificati solo",
     "name_regex": "Nome del componente regex",
     "name_regex_desc": "Specifica un'espressione regolare che identifica i componenti interni tramite il nome dei componenti.",
     "namespace_regex": "Regex dello spazio dei nomi del componente",
@@ -193,9 +197,11 @@
     "perform_identification": "Eseguire l'identificazione",
     "perform_test": "Eseguire la prova",
     "permissions": "Autorizzazioni",
+    "permissions_updated": "Autorizzazioni aggiornate",
     "personal_access_token": "Token di accesso personale",
     "portfolio_access_control": "Controllo degli accessi al portafoglio",
     "preview": "Anteprima",
+    "project": "Progetto",
     "project_access": "Accesso al progetto",
     "project_retention_enable": "Abilita l'eliminazione del progetto inattivo",
     "publisher": "Editore",
@@ -214,6 +220,9 @@
     "reindex_vulnerabilities": "Vulnerabilità",
     "reindex_vulnerable_software": "Software vulnerabile",
     "remove_api_key": "remove_api_key",
+    "remove_permission": "Rimuovere l'autorizzazione",
+    "remove_role": "Rimuovere il ruolo",
+    "remove_team_membership": "Rimuovere l'adesione",
     "repositories": "Repository",
     "repository_authentication": "Autenticazione richiesta",
     "repository_created": "Archivio creato",
@@ -224,6 +233,7 @@
     "required_fullname": "Il nome completo è obbligatorio",
     "required_oidc_group_name": "Il nome è obbligatorio",
     "required_password": "E 'richiesta la password",
+    "required_role_name": "Il nome del ruolo è obbligatorio",
     "required_team_name": "Il nome della squadra è obbligatorio",
     "required_username": "è richiesto il nome utente",
     "restore_default_template": "Ripristina i modelli predefiniti",
@@ -236,12 +246,21 @@
     "risk_score_weight_medium": "Medio (predefinito: 3)",
     "risk_score_weight_unassigned": "Non assegnato (impostazione predefinita: 5)",
     "risk_score_weighting_description": "È possibile personalizzare la ponderazione di ciascuna gravità per personalizzare il punteggio di rischio.",
+    "role": "Ruolo",
+    "role_already_assigned": "L'utente ha già questo ruolo assegnato.",
+    "role_assigned": "Ruolo assegnato",
+    "role_created": "Ruolo creato",
+    "role_deleted": "Ruolo eliminato",
+    "role_name": "Nome del ruolo",
+    "role_updated": "Ruolo aggiornato",
+    "roles": "Ruoli",
     "scope": "Scopo",
     "select_ecosystem": "Seleziona Ecosistemi",
     "select_ldap_group": "Seleziona Gruppo LDAP",
     "select_oidc_group": "Seleziona Gruppo OpenID Connect",
     "select_permission": "Seleziona l'autorizzazione",
     "select_project": "Seleziona Progetto",
+    "select_role": "Seleziona il ruolo",
     "select_team": "Selezionare squadra",
     "select_team_as_recipient": "Seleziona la squadra come destinatario",
     "snyk": "Snyk (Beta)",
diff --git a/src/i18n/locales/ja.json b/src/i18n/locales/ja.json
index c4467180d..97cacf639 100644
--- a/src/i18n/locales/ja.json
+++ b/src/i18n/locales/ja.json
@@ -6,6 +6,7 @@
   },
   "admin": {
     "access_management": "アクセス管理",
+    "add_project": "プロジェクトを追加します",
     "alert_created": "アラートを作成しました",
     "alert_deleted": "アラートを削除しました",
     "alert_log_successful_publish": "発行成功のログ",
@@ -64,6 +65,7 @@
     "create_oidc_group": "グループを作成",
     "create_oidc_user": "OpenID Connect ユーザーを作成する",
     "create_repository": "リポジトリの作成",
+    "create_role": "ロールを作成",
     "create_team": "チームを作成",
     "create_template": "テンプレートを作成",
     "create_user": "ユーザーを作成",
@@ -78,6 +80,7 @@
     "delete_alert": "アラートを削除",
     "delete_oidc_group": "グループを削除",
     "delete_repository": "リポジトリの削除",
+    "delete_role": "ロールを削除",
     "delete_team": "チームを削除",
     "delete_template": "テンプレートを削除",
     "delete_user": "ユーザーを削除",
@@ -129,7 +132,7 @@
     "index_general_description": "Dependency Track は Apache Lucene を使用して、プロジェクトや脆弱性などのさまざまなエンティティの全文検索を可能にします。",
     "index_issues_description": "時間の経過とともに、Lucene インデックスは劣化したり、Dependency Track データベースからずれたりすることがあります。DT はずれを最小限に抑えるために最善を尽くしますが、必要に応じてインデックスをチェックしたり復元したりするために、以下の管理機能が提供されています。使用には注意が必要です。",
     "index_rebuild_description": "一部またはすべてのインデックスの選択的な再構築を即時に開始できます。インデックスの再構築は非同期タスクとして実行されます。Dependency Trackのログから進行状況を確認できます。",
-    "index_use_cases": "全文検索機能は、主に検索 API (すべてのインデックス) と CPE 上の内部アナライザーのあいまい一致 (脆弱なソフトウェア インデックス) に使用されます。",
+    "index_use_cases": "全文検索功能は、主に検索 API (すべてのインデックス) と CPE 上の内部アナライザーのあいまい一致 (脆弱なソフトウェア インデックス) に使用されます。",
     "integration_defectdojo_enable": "DefectDojo統合を有効にする",
     "integration_defectdojo_reimport_enable": "再インポートを有効にする",
     "integration_fortify_ssc_enable": "Fortify SSC統合を有効にする",
@@ -164,6 +167,7 @@
     "metrics": "メトリクス",
     "mime_type": "MIMEタイプ",
     "minutes": "分",
+    "multiselect_remove_role": "役割は変更のみを変更できます",
     "name_regex": "コンポーネント名の正規表現",
     "name_regex_desc": "コンポーネント名によって内部コンポーネントを識別する正規表現を指定します。",
     "namespace_regex": "コンポーネント名前空間の正規表現",
@@ -193,9 +197,11 @@
     "perform_identification": "識別を実行する",
     "perform_test": "テストを実行する",
     "permissions": "権限",
+    "permissions_updated": "権限が更新されました",
     "personal_access_token": "パーソナルアクセストークン",
     "portfolio_access_control": "ポートフォリオアクセス制御",
     "preview": "プレビュー",
+    "project": "プロジェクト",
     "project_access": "プロジェクトへのアクセス",
     "project_retention_enable": "非アクティブなプロジェクトの削除を有効にする",
     "publisher": "パブリッシャー",
@@ -214,6 +220,9 @@
     "reindex_vulnerabilities": "脆弱性",
     "reindex_vulnerable_software": "脆弱なソフトウェア",
     "remove_api_key": "remove_api_key",
+    "remove_permission": "許可を削除します",
+    "remove_role": "役割を削除します",
+    "remove_team_membership": "メンバーシップを削除します",
     "repositories": "リポジトリ",
     "repository_authentication": "認証が必要",
     "repository_created": "リポジトリが作成されました",
@@ -224,6 +233,7 @@
     "required_fullname": "フルネームは必須です",
     "required_oidc_group_name": "名前は必須です",
     "required_password": "パスワードが必要",
+    "required_role_name": "ロール名は必須です",
     "required_team_name": "チーム名は必須です",
     "required_username": "ユーザー名は必須です",
     "restore_default_template": "デフォルトのテンプレートを復元する",
@@ -236,12 +246,21 @@
     "risk_score_weight_medium": "中 (デフォルト: 3)",
     "risk_score_weight_unassigned": "未割り当て (デフォルト: 5)",
     "risk_score_weighting_description": "各重大度の重み付けをカスタマイズして、リスク スコアをカスタマイズできます。",
+    "role": "役割",
+    "role_already_assigned": "ユーザーはすでにこの役割を割り当てています。",
+    "role_assigned": "割り当てられた役割",
+    "role_created": "ロールを作成しました",
+    "role_deleted": "ロールを削除しました",
+    "role_name": "ロール名",
+    "role_updated": "ロールが更新されました",
+    "roles": "ロール",
     "scope": "スコープ",
     "select_ecosystem": "エコシステムを選択",
     "select_ldap_group": "LDAPグループを選択",
     "select_oidc_group": "OpenID Connectグループを選択",
     "select_permission": "権限を選択",
     "select_project": "プロジェクトを選択",
+    "select_role": "役割を選択します",
     "select_team": "チームを選ぶ",
     "select_team_as_recipient": "受信者としてチームを選択",
     "snyk": "Snyk (ベータ版)",
diff --git a/src/i18n/locales/pl.json b/src/i18n/locales/pl.json
index 269c0a774..97bf7e503 100644
--- a/src/i18n/locales/pl.json
+++ b/src/i18n/locales/pl.json
@@ -6,6 +6,7 @@
   },
   "admin": {
     "access_management": "Zarządzanie dostępem",
+    "add_project": "Dodaj projekt",
     "alert_created": "Alert został utworzony",
     "alert_deleted": "Alert usunięty",
     "alert_log_successful_publish": "Zaloguj pomyślną publikację",
@@ -64,6 +65,7 @@
     "create_oidc_group": "Stworzyć grupę",
     "create_oidc_user": "Utwórz użytkownika OpenID Connect",
     "create_repository": "Utwórz repozytorium",
+    "create_role": "Utwórz rolę",
     "create_team": "Utwórz zespół",
     "create_template": "Utwórz szablon",
     "create_user": "Stwórz użytkownika",
@@ -78,6 +80,7 @@
     "delete_alert": "Usuń alert",
     "delete_oidc_group": "Usuń grupę",
     "delete_repository": "Usuń repozytorium",
+    "delete_role": "Usuń rolę",
     "delete_team": "Usuń zespół",
     "delete_template": "Usuń szablon",
     "delete_user": "Usuń użytkownika",
@@ -164,6 +167,7 @@
     "metrics": "Metryka",
     "mime_type": "Typ mima",
     "minutes": "Protokół",
+    "multiselect_remove_role": "Role można tylko zmienić",
     "name_regex": "Wyrażenie regularne nazwy komponentu",
     "name_regex_desc": "Określa wyrażenie regularne identyfikujące komponenty wewnętrzne na podstawie ich nazw.",
     "namespace_regex": "Wyrażenie regularne przestrzeni nazw komponentu",
@@ -193,9 +197,11 @@
     "perform_identification": "Wykonaj identyfikację",
     "perform_test": "Wykonaj test",
     "permissions": "Uprawnienia",
+    "permissions_updated": "Zaktualizowane uprawnienia",
     "personal_access_token": "Osobisty token dostępu",
     "portfolio_access_control": "Kontrola dostępu do portfela",
     "preview": "Zapowiedź",
+    "project": "Projekt",
     "project_access": "Dostęp do projektu",
     "project_retention_enable": "Włącz usuwanie nieaktywnego projektu",
     "publisher": "Wydawca",
@@ -214,6 +220,9 @@
     "reindex_vulnerabilities": "Luki",
     "reindex_vulnerable_software": "Wrażliwe oprogramowanie",
     "remove_api_key": "remove_api_key",
+    "remove_permission": "Usuń pozwolenie",
+    "remove_role": "Usuń rolę",
+    "remove_team_membership": "Usuń członkostwo",
     "repositories": "Repozytoria",
     "repository_authentication": "Wymagane uwierzytelnienie",
     "repository_created": "Repozytorium zostało utworzone",
@@ -224,6 +233,7 @@
     "required_fullname": "Imię i nazwisko jest wymagane",
     "required_oidc_group_name": "imie jest wymagane",
     "required_password": "Wymagane jest hasło",
+    "required_role_name": "Nazwa roli jest wymagana",
     "required_team_name": "Nazwa zespołu jest wymagana",
     "required_username": "Wymagana jest nazwa użytkownika",
     "restore_default_template": "Przywróć domyślne szablony",
@@ -236,12 +246,21 @@
     "risk_score_weight_medium": "Średni (domyślnie: 3)",
     "risk_score_weight_unassigned": "Nieprzypisane (domyślnie: 5)",
     "risk_score_weighting_description": "Możesz dostosować wagę każdej wagi, aby dostosować ocenę ryzyka.",
+    "role": "Rola",
+    "role_already_assigned": "Użytkownik ma już przypisaną tę rolę.",
+    "role_assigned": "Przypisana rola",
+    "role_created": "Rola utworzona",
+    "role_deleted": "Rola usunięta",
+    "role_name": "Nazwa roli",
+    "role_updated": "Zaktualizowano rolę",
+    "roles": "Role",
     "scope": "Zakres",
     "select_ecosystem": "Wybierz Ekosystemy",
     "select_ldap_group": "Wybierz Grupę LDAP",
     "select_oidc_group": "Wybierz grupę OpenID Connect",
     "select_permission": "Wybierz uprawnienia",
     "select_project": "Wybierz Projekt",
+    "select_role": "Wybierz rolę",
     "select_team": "Wybierz drużynę",
     "select_team_as_recipient": "Wybierz zespół jako odbiorcę",
     "snyk": "Snyk (beta)",
diff --git a/src/i18n/locales/pt-BR.json b/src/i18n/locales/pt-BR.json
index 3c5be780f..7b062e94b 100644
--- a/src/i18n/locales/pt-BR.json
+++ b/src/i18n/locales/pt-BR.json
@@ -6,6 +6,7 @@
   },
   "admin": {
     "access_management": "Gerenciamento de acesso",
+    "add_project": "Adicionar projeto",
     "alert_created": "Alerta criado",
     "alert_deleted": "Alerta excluído",
     "alert_log_successful_publish": "Registrar publicação bem-sucedida",
@@ -64,6 +65,7 @@
     "create_oidc_group": "Criar grupo",
     "create_oidc_user": "Criar usuário OpenID Connect",
     "create_repository": "Criar repositório",
+    "create_role": "Criar função",
     "create_team": "Criar equipe",
     "create_template": "Criar modelo",
     "create_user": "Criar usuário",
@@ -78,6 +80,7 @@
     "delete_alert": "Excluir alerta",
     "delete_oidc_group": "Excluir grupo",
     "delete_repository": "Excluir repositório",
+    "delete_role": "Excluir função",
     "delete_team": "Excluir equipe",
     "delete_template": "Excluir modelo",
     "delete_user": "Deletar usuário",
@@ -164,6 +167,7 @@
     "metrics": "Métricas",
     "mime_type": "Tipo Mime",
     "minutes": "Minutos",
+    "multiselect_remove_role": "Os papéis só podem ser alterados",
     "name_regex": "Regex do nome do componente",
     "name_regex_desc": "Especifica uma expressão regular que identifica componentes internos pelo nome dos componentes.",
     "namespace_regex": "Regex do namespace do componente",
@@ -193,9 +197,11 @@
     "perform_identification": "Realizar identificação",
     "perform_test": "Realizar teste",
     "permissions": "Permissões",
+    "permissions_updated": "Permissões atualizadas",
     "personal_access_token": "Token de acesso pessoal",
     "portfolio_access_control": "Controle de acesso ao portfólio",
     "preview": "Visualização",
+    "project": "Projeto",
     "project_access": "Acesso ao projeto",
     "project_retention_enable": "Habilitar exclusão de projetos inativos",
     "publisher": "Editor",
@@ -214,6 +220,9 @@
     "reindex_vulnerabilities": "Vulnerabilidades",
     "reindex_vulnerable_software": "Software vulnerável",
     "remove_api_key": "remove_api_key",
+    "remove_permission": "Remova a permissão",
+    "remove_role": "Remova o papel",
+    "remove_team_membership": "Remova a associação",
     "repositories": "Repositórios",
     "repository_authentication": "Autentificação requerida",
     "repository_created": "Repositório criado",
@@ -224,6 +233,7 @@
     "required_fullname": "O nome completo é obrigatório",
     "required_oidc_group_name": "O nome é obrigatório",
     "required_password": "Senha requerida",
+    "required_role_name": "O nome da função é obrigatório",
     "required_team_name": "O nome da equipe é obrigatório",
     "required_username": "Nome de usuário é requerido",
     "restore_default_template": "Restaurar modelos padrão",
@@ -236,12 +246,21 @@
     "risk_score_weight_medium": "Médio (padrão: 3)",
     "risk_score_weight_unassigned": "Não atribuído (padrão: 5)",
     "risk_score_weighting_description": "Você pode personalizar a ponderação de cada gravidade para personalizar a pontuação de risco.",
+    "role": "Papel",
+    "role_already_assigned": "O usuário já possui essa função atribuída.",
+    "role_assigned": "Função atribuída",
+    "role_created": "Função criada",
+    "role_deleted": "Função excluída",
+    "role_name": "Nome da função",
+    "role_updated": "Função atualizada",
+    "roles": "Funções",
     "scope": "Escopo",
     "select_ecosystem": "Selecione Ecossistemas",
     "select_ldap_group": "Selecione o grupo LDAP",
     "select_oidc_group": "Selecione o grupo OpenID Connect",
     "select_permission": "Selecione a permissão",
     "select_project": "Selecione o projeto",
+    "select_role": "Selecione função",
     "select_team": "Selecionar time",
     "select_team_as_recipient": "Selecione a equipe como destinatário",
     "snyk": "Snyk (beta)",
diff --git a/src/i18n/locales/pt.json b/src/i18n/locales/pt.json
index ef8543f5a..bd1bbe471 100644
--- a/src/i18n/locales/pt.json
+++ b/src/i18n/locales/pt.json
@@ -6,6 +6,7 @@
   },
   "admin": {
     "access_management": "Gerir acessos",
+    "add_project": "Adicionar projeto",
     "alert_created": "Alerta criado",
     "alert_deleted": "Alerta excluído",
     "alert_log_successful_publish": "Registrar publicação bem-sucedida",
@@ -64,6 +65,7 @@
     "create_oidc_group": "Criar grupo",
     "create_oidc_user": "Criar utilizador OpenID Connect",
     "create_repository": "Criar repositório",
+    "create_role": "Criar função",
     "create_team": "Criar equipe",
     "create_template": "Criar modelo",
     "create_user": "Criar utilizador",
@@ -78,6 +80,7 @@
     "delete_alert": "Excluir alerta",
     "delete_oidc_group": "Excluir grupo",
     "delete_repository": "Excluir repositório",
+    "delete_role": "Excluir função",
     "delete_team": "Excluir equipe",
     "delete_template": "Excluir modelo",
     "delete_user": "Deletar utilizador",
@@ -164,6 +167,7 @@
     "metrics": "Métricas",
     "mime_type": "Tipo Mime",
     "minutes": "Minutos",
+    "multiselect_remove_role": "Os papéis só podem ser alterados",
     "name_regex": "Regex do nome do componente",
     "name_regex_desc": "Especifica uma expressão regular que identifica componentes internos pelo nome dos componentes.",
     "namespace_regex": "Regex do namespace do componente",
@@ -193,9 +197,11 @@
     "perform_identification": "Realizar identificação",
     "perform_test": "Realizar teste",
     "permissions": "Permissões",
+    "permissions_updated": "Permissões atualizadas",
     "personal_access_token": "Token de acesso pessoal",
     "portfolio_access_control": "Controle de acesso ao portfólio",
     "preview": "Visualização",
+    "project": "Projeto",
     "project_access": "Acesso ao projeto",
     "project_retention_enable": "Ativar exclusão de projetos inativos",
     "publisher": "Editor",
@@ -214,6 +220,9 @@
     "reindex_vulnerabilities": "Vulnerabilidades",
     "reindex_vulnerable_software": "Software vulnerável",
     "remove_api_key": "remove_api_key",
+    "remove_permission": "Remova a permissão",
+    "remove_role": "Remova o papel",
+    "remove_team_membership": "Remova a associação",
     "repositories": "Repositórios",
     "repository_authentication": "Autentificação requerida",
     "repository_created": "Repositório criado",
@@ -224,6 +233,7 @@
     "required_fullname": "O nome completo é obrigatório",
     "required_oidc_group_name": "O nome é obrigatório",
     "required_password": "Palavra passe obrigatória",
+    "required_role_name": "O nome da função é obrigatório",
     "required_team_name": "O nome da equipe é obrigatório",
     "required_username": "Nome de utilizador é obrigatório",
     "restore_default_template": "Restaurar modelos padrão",
@@ -236,12 +246,21 @@
     "risk_score_weight_medium": "Médio (padrão: 3)",
     "risk_score_weight_unassigned": "Não atribuído (padrão: 5)",
     "risk_score_weighting_description": "Você pode personalizar a ponderação de cada gravidade para personalizar a pontuação de risco.",
+    "role": "Papel",
+    "role_already_assigned": "O usuário já possui essa função atribuída.",
+    "role_assigned": "Função atribuída",
+    "role_created": "Função criada",
+    "role_deleted": "Função excluída",
+    "role_name": "Nome da função",
+    "role_updated": "Função atualizada",
+    "roles": "Funções",
     "scope": "Escopo",
     "select_ecosystem": "Selecione Ecossistemas",
     "select_ldap_group": "Selecione o grupo LDAP",
     "select_oidc_group": "Selecione o grupo OpenID Connect",
     "select_permission": "Selecione a permissão",
     "select_project": "Selecione o projeto",
+    "select_role": "Selecione função",
     "select_team": "Selecionar time",
     "select_team_as_recipient": "Selecione a equipe como destinatário",
     "snyk": "Snyk (beta)",
diff --git a/src/i18n/locales/ru.json b/src/i18n/locales/ru.json
index 58535e873..ff482ec25 100644
--- a/src/i18n/locales/ru.json
+++ b/src/i18n/locales/ru.json
@@ -6,6 +6,7 @@
   },
   "admin": {
     "access_management": "Управление доступом",
+    "add_project": "Добавить проект",
     "alert_created": "Оповещение создано",
     "alert_deleted": "Оповещение удалено",
     "alert_log_successful_publish": "Успешная публикация журнала",
@@ -64,6 +65,7 @@
     "create_oidc_group": "Создать группу",
     "create_oidc_user": "Создать пользователя OpenID Connect",
     "create_repository": "Создать репозиторий",
+    "create_role": "Создать роль",
     "create_team": "Создать команду",
     "create_template": "Создать шаблон",
     "create_user": "Создать пользователя",
@@ -78,6 +80,7 @@
     "delete_alert": "Удалить оповещение",
     "delete_oidc_group": "Удалить группу",
     "delete_repository": "Удалить репозиторий",
+    "delete_role": "Удалить роль",
     "delete_team": "Удалить команду",
     "delete_template": "Удалить шаблон",
     "delete_user": "Удалить пользователя",
@@ -164,6 +167,7 @@
     "metrics": "Метрики",
     "mime_type": "Тип MIME",
     "minutes": "Минуты",
+    "multiselect_remove_role": "Роли могут быть изменены только",
     "name_regex": "Регулярное выражение для имени компонента",
     "name_regex_desc": "Указывает регулярное выражение, которое определяет внутренние компоненты по их именам.",
     "namespace_regex": "Регулярное выражение для пространства имен компонента",
@@ -193,9 +197,11 @@
     "perform_identification": "Выполнить идентификацию",
     "perform_test": "Выполнить тест",
     "permissions": "Разрешения",
+    "permissions_updated": "Разрешения обновлены",
     "personal_access_token": "Персональный токен доступа",
     "portfolio_access_control": "Контроль доступа к портфолио",
     "preview": "Предпросмотр",
+    "project": "Проект",
     "project_access": "Доступ к проекту",
     "project_retention_enable": "Включить удаление неактивного проекта",
     "publisher": "Издатель",
@@ -214,6 +220,9 @@
     "reindex_vulnerabilities": "Уязвимости",
     "reindex_vulnerable_software": "Уязвимое ПО",
     "remove_api_key": "Удалить API-ключ",
+    "remove_permission": "Удалить разрешение",
+    "remove_role": "Удалить роль",
+    "remove_team_membership": "Удалить членство",
     "repositories": "Репозитории",
     "repository_authentication": "Требуется аутентификация",
     "repository_created": "Репозиторий создан",
@@ -224,6 +233,7 @@
     "required_fullname": "Полное имя обязательно",
     "required_oidc_group_name": "Имя обязательно",
     "required_password": "Пароль обязателен",
+    "required_role_name": "Имя роли обязательно",
     "required_team_name": "Имя команды обязательно",
     "required_username": "Имя пользователя обязательно",
     "restore_default_template": "Восстановить шаблоны по умолчанию",
@@ -236,12 +246,21 @@
     "risk_score_weight_medium": "Средний (по умолчанию: 3)",
     "risk_score_weight_unassigned": "Не назначено (по умолчанию: 5)",
     "risk_score_weighting_description": "Вы можете настроить вес каждой серьезности, чтобы настроить оценку риска.",
+    "role": "Роль",
+    "role_already_assigned": "У пользователя уже есть эта роль.",
+    "role_assigned": "Роль назначена",
+    "role_created": "Роль создана",
+    "role_deleted": "Роль удалена",
+    "role_name": "Имя роли",
+    "role_updated": "Роль обновлена",
+    "roles": "Роли",
     "scope": "Область",
     "select_ecosystem": "Выбрать экосистему",
     "select_ldap_group": "Выбрать группу LDAP",
     "select_oidc_group": "Выбрать группу OpenID Connect",
     "select_permission": "Выбрать разрешение",
     "select_project": "Выбрать проект",
+    "select_role": "Выберите роль",
     "select_team": "Выбрать команду",
     "select_team_as_recipient": "Выбрать команду в качестве получателя",
     "snyk": "Snyk (бета)",
diff --git a/src/i18n/locales/uk-UA.json b/src/i18n/locales/uk-UA.json
index 0d299c1d8..ba7c6b615 100644
--- a/src/i18n/locales/uk-UA.json
+++ b/src/i18n/locales/uk-UA.json
@@ -6,6 +6,7 @@
   },
   "admin": {
     "access_management": "Керування доступом",
+    "add_project": "Додайте проект",
     "alert_created": "Сповіщення створено",
     "alert_deleted": "Сповіщення видалено",
     "alert_log_successful_publish": "Журнал успішної публікації",
@@ -64,6 +65,7 @@
     "create_oidc_group": "Створити групу",
     "create_oidc_user": "Створіть користувача OpenID Connect",
     "create_repository": "Створити репозиторій",
+    "create_role": "Створити роль",
     "create_team": "Створити команду",
     "create_template": "Створити шаблон",
     "create_user": "Створити користувача",
@@ -78,6 +80,7 @@
     "delete_alert": "Видалити сповіщення",
     "delete_oidc_group": "Видалити групу",
     "delete_repository": "Видалити репозиторій",
+    "delete_role": "Видалити роль",
     "delete_team": "Видалити команду",
     "delete_template": "Видалити шаблон",
     "delete_user": "Видалити користувача",
@@ -164,6 +167,7 @@
     "metrics": "Метрики",
     "mime_type": "Тип пантоміми",
     "minutes": "хвилин",
+    "multiselect_remove_role": "Ролі можна лише змінити",
     "name_regex": "Регулярний вираз імені компонента",
     "name_regex_desc": "Визначає регулярний вираз, який визначає внутрішні компоненти за назвою компонентів.",
     "namespace_regex": "Регулярний вираз простору імен компонентів",
@@ -193,9 +197,11 @@
     "perform_identification": "Виконайте ідентифікацію",
     "perform_test": "Виконайте тест",
     "permissions": "Дозволи",
+    "permissions_updated": "Дозволи оновлено",
     "personal_access_token": "Персональний маркер доступу",
     "portfolio_access_control": "Контроль доступу до портфоліо",
     "preview": "Попередній перегляд",
+    "project": "Демонструвати",
     "project_access": "Доступ до проекту",
     "project_retention_enable": "Увімкнути видалення неактивного проекту",
     "publisher": "Видавець",
@@ -214,6 +220,9 @@
     "reindex_vulnerabilities": "Вразливі місця",
     "reindex_vulnerable_software": "Вразливе програмне забезпечення",
     "remove_api_key": "Видалити ключ API",
+    "remove_permission": "Видаліть дозвіл",
+    "remove_role": "Видалити роль",
+    "remove_team_membership": "Видалити членство",
     "repositories": "Репозиторії",
     "repository_authentication": "Потрібна автентифікація",
     "repository_created": "Репозиторій створено",
@@ -224,6 +233,7 @@
     "required_fullname": "Введіть повне ім'я",
     "required_oidc_group_name": "Необхідно вказати ім'я",
     "required_password": "Необхідно ввести пароль",
+    "required_role_name": "Необхідно вказати назву ролі",
     "required_team_name": "Необхідно вказати назву команди",
     "required_username": "Потрібно ввести ім'я користувача",
     "restore_default_template": "Відновити стандартні шаблони",
@@ -236,12 +246,21 @@
     "risk_score_weight_medium": "Середній (за замовчуванням: 3)",
     "risk_score_weight_unassigned": "Не призначено (за замовчуванням: 5)",
     "risk_score_weighting_description": "Ви можете налаштувати зважування кожного рівня серйозності, щоб налаштувати оцінку ризику.",
+    "role": "Роль",
+    "role_already_assigned": "У користувача вже призначений ця роль.",
+    "role_assigned": "Роль призначена",
+    "role_created": "Роль створено",
+    "role_deleted": "Роль видалено",
+    "role_name": "Назва ролі",
+    "role_updated": "Роль оновлена",
+    "roles": "Ролі",
     "scope": "Область застосування",
     "select_ecosystem": "Виберіть Екосистеми",
     "select_ldap_group": "Виберіть групу LDAP",
     "select_oidc_group": "Виберіть OpenID Connect Group",
     "select_permission": "Виберіть дозвіл",
     "select_project": "Виберіть Проект",
+    "select_role": "Виберіть роль",
     "select_team": "Виберіть команду",
     "select_team_as_recipient": "Виберіть команду як одержувача",
     "snyk": "Сник (бета)",
diff --git a/src/i18n/locales/zh.json b/src/i18n/locales/zh.json
index da6eb08ae..11108eee6 100644
--- a/src/i18n/locales/zh.json
+++ b/src/i18n/locales/zh.json
@@ -6,6 +6,7 @@
   },
   "admin": {
     "access_management": "用户和权限",
+    "add_project": "添加项目",
     "alert_created": "已创建告警",
     "alert_deleted": "已删除告警",
     "alert_log_successful_publish": "告警日志成功发送",
@@ -64,6 +65,7 @@
     "create_oidc_group": "创建 OIDC 组",
     "create_oidc_user": "创建 OpenID Connect 用户",
     "create_repository": "创建存储库",
+    "create_role": "创建角色",
     "create_team": "创建团队",
     "create_template": "创建模板",
     "create_user": "创建用户",
@@ -78,6 +80,7 @@
     "delete_alert": "删除告警",
     "delete_oidc_group": "删除 OIDC 组",
     "delete_repository": "删除存储库",
+    "delete_role": "删除角色",
     "delete_team": "删除团队",
     "delete_template": "删除模板",
     "delete_user": "删除用户",
@@ -164,6 +167,7 @@
     "metrics": "指标",
     "mime_type": "Mime 类型",
     "minutes": "分钟",
+    "multiselect_remove_role": "角色只能更改",
     "name_regex": "组件名称正则表达式",
     "name_regex_desc": "指定一个正则表达式，通过组件名称来识别内部组件。",
     "namespace_regex": "组件命名空间正则表达式",
@@ -193,9 +197,11 @@
     "perform_identification": "进行识别",
     "perform_test": "进行测试",
     "permissions": "权限",
+    "permissions_updated": "权限已更新",
     "personal_access_token": "个人访问令牌",
     "portfolio_access_control": "portfolio 访问控制",
     "preview": "预览",
+    "project": "项目",
     "project_access": "项目访问",
     "project_retention_enable": "启用非活动项目删除",
     "publisher": "发行商",
@@ -214,6 +220,9 @@
     "reindex_vulnerabilities": "重新生成漏洞索引",
     "reindex_vulnerable_software": "重新生成软件索引",
     "remove_api_key": "删除 API Key",
+    "remove_permission": "删除许可",
+    "remove_role": "删除角色",
+    "remove_team_membership": "删除会员资格",
     "repositories": "存储库",
     "repository_authentication": "存储库身份验证",
     "repository_created": "已创建存储库",
@@ -224,6 +233,7 @@
     "required_fullname": "必填：全名",
     "required_oidc_group_name": "必填：OIDC 组名",
     "required_password": "密码是必需的",
+    "required_role_name": "必填：角色名称",
     "required_team_name": "必填：团队名称",
     "required_username": "必填：用户名",
     "restore_default_template": "恢复默认模板",
@@ -236,12 +246,21 @@
     "risk_score_weight_medium": "中（默认值：3）",
     "risk_score_weight_unassigned": "未分配（默认值：5）",
     "risk_score_weighting_description": "您可以自定义每个严重性的权重来自定义风险评分。",
+    "role": "角色",
+    "role_already_assigned": "用户已经分配了此角色。",
+    "role_assigned": "角色分配",
+    "role_created": "角色已创建",
+    "role_deleted": "角色已删除",
+    "role_name": "角色名称",
+    "role_updated": "角色更新",
+    "roles": "角色",
     "scope": "范围",
     "select_ecosystem": "选择生态系统",
     "select_ldap_group": "选择 LDAP 组",
     "select_oidc_group": "选择 OpenID Connect 组",
     "select_permission": "选择权限",
     "select_project": "选择项目",
+    "select_role": "选择角色",
     "select_team": "选择团队",
     "select_team_as_recipient": "选择团队作为收件人",
     "snyk": "Snyk（测试版）",
diff --git a/src/mixins/userManagementMixin.js b/src/mixins/userManagementMixin.js
new file mode 100644
index 000000000..d1110e195
--- /dev/null
+++ b/src/mixins/userManagementMixin.js
@@ -0,0 +1,211 @@
+import EventBus from '../shared/eventbus';
+
+/**
+ * A Vue.js mixin for managing user-related operations such as roles, permissions, and team memberships.
+ * Provides utility methods for interacting with APIs and handling user management tasks.
+ *
+ * @mixin
+ */
+export default {
+  created: function () {
+    this._userManagementMixin_init();
+  },
+  data: () => ({ _userManagementMixin_ready: false }),
+  methods: {
+    // -- public methods --
+
+    // Loads the user roles for a specific user. return data if targetField is null
+    loadUserProjects: async function (username) {
+      const endpoint = `${this.$api.BASE_URL}/${this.$api.URL_ROLE}/${username}/role`;
+      try {
+        const response = await this.axios.get(endpoint);
+        return response.data;
+      } catch (error) {
+        console.error(error);
+      }
+    },
+
+    // Loads the user roles for a specific user. return data if targetField is null
+    loadAvailableProjectRoles: async function () {
+      const endpoint = `${this.$api.BASE_URL}/${this.$api.URL_ROLE}`;
+      try {
+        const response = await this.axios.get(endpoint);
+        return response.data;
+      } catch (error) {
+        console.error(error);
+      }
+    },
+
+    // TODO: internal server error 500
+    _deleteUser: async function (endpoint) {
+      this._userManagementMixin_checkReady();
+      try {
+        await this.axios.delete(endpoint, {
+          data: {
+            // e.g { username: 'testuser' }
+            [this._identifierField]: this.row[this._identifierField],
+          },
+        });
+        this._successfulResponse_delete();
+      } catch (error) {
+        this.handleError(error);
+      }
+    },
+
+    _updateTeamSelection: async function (selections) {
+      const endpoint = `${this.$api.BASE_URL}/${this.$api.URL_USER_MEMBERSHIP}`;
+      this._userManagementMixin_checkReady();
+      const requestBody = {
+        [this._identifierField]: this.row[this._identifierField],
+        teams: selections.map((team) => team.uuid),
+      };
+      try {
+        const response = await this.axios.put(endpoint, requestBody);
+        this._successfulResponse_update(response);
+      } catch (error) {
+        if (error.response?.status === 304) return;
+        this.handleError(error);
+      }
+    },
+
+    _removeTeamMembership: async function (teamUUID) {
+      const username = this.row[this._identifierField];
+      const endpoint = `${this.$api.BASE_URL}/${this.$api.URL_USER}/${username}/membership`;
+
+      this._userManagementMixin_checkReady();
+      try {
+        const response = await this.axios.delete(endpoint, {
+          data: { uuid: teamUUID },
+        });
+        this._successfulResponse_update(response);
+      } catch (error) {
+        this.handleError(error);
+      }
+    },
+
+    // Updates the permissions for a user. (essentially adds/removes the user from the permission)
+    _updatePermissionSelection: async function (selections) {
+      const endpoint = `${this.$api.BASE_URL}/${this.$api.URL_USER_PERMISSION}`;
+      this._userManagementMixin_checkReady();
+      const requestBody = {
+        [this._identifierField]: this.row[this._identifierField],
+        permissions: selections.map((selection) => selection.name),
+      };
+
+      try {
+        const response = await this.axios.put(endpoint, requestBody);
+        this._successfulResponse_update(response);
+      } catch (error) {
+        this.handleError(error);
+      }
+    },
+
+    // Removes a user from a permission. (essentially removes the user from the permission)
+    _removePermission: async function (permission) {
+      this._userManagementMixin_checkReady();
+      const username = this.row[this._identifierField];
+      const url = `${this.$api.BASE_URL}/${this.$api.URL_PERMISSION}/${permission.name}/user/${username}`;
+      try {
+        const response = await this.axios.delete(url);
+        this._successfulResponse_update(response);
+      } catch (error) {
+        this.handleError(error);
+      }
+    },
+
+    _handleProjectRole: async function (action, projectRole, callbacks = null) {
+      this._userManagementMixin_checkReady();
+      const { role, project } = projectRole;
+      const endpoint = `${this.$api.BASE_URL}/${this.$api.URL_USER_ROLE}`;
+      const requestBody = {
+        [this._identifierField]: this.row[this._identifierField],
+        role,
+        project,
+      };
+
+      try {
+        let response;
+        let successMessage;
+        switch (action) {
+          case 'add':
+          case 'update':
+            response = await this.axios.put(endpoint, requestBody);
+            successMessage =
+              action === 'add'
+                ? this.$t('admin.role_assigned')
+                : this.$t('admin.role_updated');
+            break;
+          case 'remove':
+            response = await this.axios.delete(endpoint, { data: requestBody });
+            successMessage = this.$t('admin.role_deleted');
+            break;
+          default:
+            throw new Error(`Invalid action: ${action}`);
+        }
+
+        this.$toastr.s(successMessage);
+        callbacks?.success?.(response);
+      } catch (error) {
+        this.handleError(error);
+        callbacks?.error?.(error);
+      }
+    },
+
+    // -- utility methods --
+
+    handleError: function (error, toastMessageKey) {
+      const messageKey = toastMessageKey ?? 'condition.unsuccessful_action';
+      console.error(error);
+      this.$toastr.w(this.$t(messageKey));
+    },
+    _successfulResponse_update: function (response) {
+      if (this.rowEvents && this.rowEvents.update)
+        EventBus.$emit(this.rowEvents.update, this.index, response.data);
+      this.$toastr.s(this.$t('message.updated'));
+    },
+
+    _successfulResponse_delete: function () {
+      if (this.rowEvents && this.rowEvents.delete)
+        EventBus.$emit(this.rowEvents.delete, this.index);
+      this.$toastr.s(this.$t('admin.user_deleted'));
+    },
+
+    _userManagementMixin_checkReady: function () {
+      if (!this._userManagementMixin_ready) {
+        throw new Error('userManagementMixin is not ready. Init failed');
+      }
+    },
+
+    _userManagementMixin_init: function () {
+      if (!this._identifierField) {
+        this._identifierField = 'username';
+      }
+
+      if (this.umm_bypassInit === true) {
+        console.warn('userManagementMixin: bypassing init check');
+        this._userManagementMixin_ready = true;
+        return;
+      }
+
+      if (this.index == null || this.row == null) {
+        throw new Error(
+          "userManagementMixin requires 'index' and 'row' variables, which are typically provided by a detailFormatter function.",
+        );
+      }
+
+      const rowEventsReady = !!(
+        this.rowEvents &&
+        this.rowEvents.update &&
+        this.rowEvents.delete
+      );
+
+      if (!rowEventsReady) {
+        console.warn(
+          "userManagementMixin: 'rowEvents' object is either undefined or missing properties 'update' or 'delete'. Changes may not reflect properly until refresh.",
+        );
+      }
+
+      this._userManagementMixin_ready = true;
+    },
+  },
+};
diff --git a/src/router/index.js b/src/router/index.js
index 10f3eb656..20bf9e760 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -94,6 +94,7 @@ const OidcUsers = () =>
   import('@/views/administration/accessmanagement/OidcUsers');
 const OidcGroups = () =>
   import('@/views/administration/accessmanagement/OidcGroups');
+const Roles = () => import('@/views/administration/accessmanagement/Roles');
 const Teams = () => import('@/views/administration/accessmanagement/Teams');
 const Permissions = () =>
   import('@/views/administration/accessmanagement/Permissions');
@@ -1075,6 +1076,23 @@ function configRoutes() {
                 ],
               },
             },
+            {
+              path: 'accessManagement/roles',
+              component: Roles,
+              meta: {
+                title: i18n.t('message.administration'),
+                i18n: 'message.administration',
+                sectionPath: '/admin',
+                sectionName: 'Admin',
+                permissions: [
+                  'ACCESS_MANAGEMENT',
+                  'ACCESS_MANAGEMENT_CREATE',
+                  'ACCESS_MANAGEMENT_READ',
+                  'ACCESS_MANAGEMENT_UPDATE',
+                  'ACCESS_MANAGEMENT_DELETE',
+                ],
+              },
+            },
             {
               path: 'accessManagement/teams',
               component: Teams,
diff --git a/src/shared/api.json b/src/shared/api.json
index a38230cbf..061cf7aec 100644
--- a/src/shared/api.json
+++ b/src/shared/api.json
@@ -13,6 +13,7 @@
   "URL_ABOUT": "api/version",
   "URL_ACL_MAPPING": "api/v1/acl/mapping",
   "URL_ACL_TEAM": "api/v1/acl/team",
+  "URL_ACL_USER": "api/v1/acl/user",
   "URL_ANALYSIS": "api/v1/analysis",
   "URL_BOM": "api/v1/bom",
   "URL_CALCULATOR_CVSS": "api/v1/calculator/cvss",
@@ -42,15 +43,20 @@
   "URL_POLICY_VIOLATION_ANALYSIS": "api/v1/violation/analysis",
   "URL_PROJECT": "api/v1/project",
   "URL_REPOSITORY": "api/v1/repository",
+  "URL_ROLE": "api/v1/role",
   "URL_SEARCH": "api/v1/search",
   "URL_SERVICE": "api/v1/service",
   "URL_TAG": "api/v1/tag",
   "URL_TEAM": "api/v1/team",
+  "URL_TEAM_PERMISSION": "api/v1/permission/team",
   "URL_USER": "api/v1/user",
   "URL_USER_LDAP": "api/v1/user/ldap",
   "URL_USER_MANAGED": "api/v1/user/managed",
+  "URL_USER_MEMBERSHIP": "api/v1/user/membership",
   "URL_USER_OIDC": "api/v1/user/oidc",
   "URL_USER_OIDC_LOGIN": "api/v1/user/oidc/login",
+  "URL_USER_PERMISSION": "api/v1/permission/user",
+  "URL_USER_ROLE": "api/v1/user/role",
   "URL_USER_SELF": "api/v1/user/self",
   "URL_VEX": "api/v1/vex",
   "URL_VULNERABILITY": "api/v1/vulnerability",
diff --git a/src/views/administration/AdminMenu.vue b/src/views/administration/AdminMenu.vue
index 599fb5674..cc65b1e59 100644
--- a/src/views/administration/AdminMenu.vue
+++ b/src/views/administration/AdminMenu.vue
@@ -377,6 +377,11 @@ export default {
               name: this.$t('admin.oidc_groups'),
               route: 'accessManagement/oidcGroups',
             },
+            {
+              component: 'Roles',
+              name: this.$t('admin.roles'),
+              route: 'accessManagement/roles',
+            },
             {
               component: 'Teams',
               name: this.$t('admin.teams'),
diff --git a/src/views/administration/Administration.vue b/src/views/administration/Administration.vue
index 04a6231f4..879ac8225 100644
--- a/src/views/administration/Administration.vue
+++ b/src/views/administration/Administration.vue
@@ -76,6 +76,7 @@ import OidcGroups from './accessmanagement/OidcGroups';
 import OidcUsers from './accessmanagement/OidcUsers';
 import Permissions from './accessmanagement/Permissions';
 import PortfolioAccessControl from './accessmanagement/PortfolioAccessControl';
+import Roles from './accessmanagement/Roles';
 import Teams from './accessmanagement/Teams';
 
 export default {
@@ -122,6 +123,7 @@ export default {
     ManagedUsers,
     OidcUsers,
     OidcGroups,
+    Roles,
     Teams,
     Permissions,
     PortfolioAccessControl,
diff --git a/src/views/administration/accessmanagement/CreateLdapUserModal.vue b/src/views/administration/accessmanagement/CreateLdapUserModal.vue
index 2d754c3f6..f1c229898 100644
--- a/src/views/administration/accessmanagement/CreateLdapUserModal.vue
+++ b/src/views/administration/accessmanagement/CreateLdapUserModal.vue
@@ -24,9 +24,13 @@
       <b-button size="md" variant="secondary" @click="cancel()">{{
         $t('message.close')
       }}</b-button>
-      <b-button size="md" variant="primary" @click="createUser()">{{
-        $t('message.create')
-      }}</b-button>
+      <b-button
+        size="md"
+        variant="primary"
+        :disabled="!(username?.length > 0)"
+        @click="createUser()"
+        >{{ $t('message.create') }}</b-button
+      >
     </template>
   </b-modal>
 </template>
diff --git a/src/views/administration/accessmanagement/CreateManagedUserModal.vue b/src/views/administration/accessmanagement/CreateManagedUserModal.vue
index 09028afda..8062f6b58 100644
--- a/src/views/administration/accessmanagement/CreateManagedUserModal.vue
+++ b/src/views/administration/accessmanagement/CreateManagedUserModal.vue
@@ -93,9 +93,13 @@
       <b-button size="md" variant="secondary" @click="cancel()">{{
         $t('message.close')
       }}</b-button>
-      <b-button size="md" variant="primary" @click="createUser()">{{
-        $t('message.create')
-      }}</b-button>
+      <b-button
+        size="md"
+        variant="primary"
+        :disabled="!createReady"
+        @click="createUser()"
+        >{{ $t('message.create') }}</b-button
+      >
     </template>
   </b-modal>
 </template>
@@ -126,6 +130,17 @@ export default {
       },
     };
   },
+  computed: {
+    createReady: function () {
+      return (
+        this.username?.length > 0 &&
+        this.fullname?.length > 0 &&
+        this.email?.length > 0 &&
+        this.password?.length > 0 &&
+        this.confirmPassword?.length > 0
+      );
+    },
+  },
   methods: {
     verifyPasswordState: function () {
       return (
diff --git a/src/views/administration/accessmanagement/CreateOidcUserModal.vue b/src/views/administration/accessmanagement/CreateOidcUserModal.vue
index e530f245f..d88ac0a96 100644
--- a/src/views/administration/accessmanagement/CreateOidcUserModal.vue
+++ b/src/views/administration/accessmanagement/CreateOidcUserModal.vue
@@ -24,9 +24,13 @@
       <b-button size="md" variant="secondary" @click="cancel()">{{
         $t('message.close')
       }}</b-button>
-      <b-button size="md" variant="primary" @click="createUser()">{{
-        $t('message.create')
-      }}</b-button>
+      <b-button
+        size="md"
+        variant="primary"
+        :disabled="!(username?.length > 0)"
+        @click="createUser()"
+        >{{ $t('message.create') }}</b-button
+      >
     </template>
   </b-modal>
 </template>
diff --git a/src/views/administration/accessmanagement/CreateRoleModal.vue b/src/views/administration/accessmanagement/CreateRoleModal.vue
new file mode 100644
index 000000000..a1b254096
--- /dev/null
+++ b/src/views/administration/accessmanagement/CreateRoleModal.vue
@@ -0,0 +1,115 @@
+<template>
+  <b-modal
+    id="createRoleModal"
+    size="md"
+    @hide="resetValues()"
+    hide-header-close
+    :title="$t('admin.create_role')"
+  >
+    <b-input-group-form-input
+      id="name-input"
+      input-group-size="mb-3"
+      type="text"
+      v-model="name"
+      lazy="true"
+      required="true"
+      feedback="true"
+      autofocus="false"
+      :label="$t('admin.role_name')"
+      :feedback-text="$t('admin.required_role_name')"
+    />
+
+    <b-form-group :label="$t('admin.permissions')">
+      <div class="list-group">
+        <span v-for="permission in permissions" :key="permission.id">
+          <actionable-list-group-item
+            :value="permission.name"
+            :delete-icon="true"
+            @actionClicked="removePermission(permission)"
+          />
+        </span>
+        <actionable-list-group-item
+          :add-icon="true"
+          @actionClicked="showSelectPermissionModal"
+        />
+      </div>
+    </b-form-group>
+
+    <template v-slot:modal-footer="{ cancel }">
+      <b-button size="md" variant="secondary" @click="cancel()">
+        {{ $t('message.close') }}
+      </b-button>
+      <b-button
+        size="md"
+        variant="primary"
+        @click="createRole()"
+        :disabled="!name"
+      >
+        {{ $t('message.create') }}
+      </b-button>
+    </template>
+
+    <select-permission-modal @selection="updatePermissionSelection" />
+  </b-modal>
+</template>
+
+<script>
+import permissionsMixin from '../../../mixins/permissionsMixin';
+import BInputGroupFormInput from '../../../forms/BInputGroupFormInput';
+import ActionableListGroupItem from '../../components/ActionableListGroupItem';
+import SelectPermissionModal from './SelectPermissionModal';
+
+export default {
+  mixins: [permissionsMixin],
+  components: {
+    BInputGroupFormInput,
+    ActionableListGroupItem,
+    SelectPermissionModal,
+  },
+  data() {
+    return {
+      name: null,
+      permissions: [],
+    };
+  },
+  methods: {
+    createRole() {
+      let url = `${this.$api.BASE_URL}/${this.$api.URL_ROLE}`;
+      const requestBody = {
+        name: this.name,
+        permissions: this.permissions.map((permission) => permission.name),
+      };
+      this.axios
+        .put(url, {
+          name: this.name,
+          permissions: this.permissions.map((perm) => perm.name),
+        })
+        .then(() => {
+          this.$emit('refreshTable');
+          this.$toastr.s(this.$t('admin.role_created'));
+        })
+        .catch(() => {
+          this.$toastr.w(this.$t('condition.unsuccessful_action'));
+        });
+      this.$root.$emit('bv::hide::modal', 'createRoleModal');
+      this.resetValues();
+    },
+    resetValues() {
+      this.name = null;
+      this.permissions = [];
+    },
+    removePermission(permission) {
+      let index = this.permissions.indexOf(permission);
+      if (index > -1) {
+        this.permissions.splice(index, 1);
+      }
+    },
+    showSelectPermissionModal() {
+      this.$root.$emit('bv::show::modal', 'selectPermissionModal');
+    },
+    updatePermissionSelection(selections) {
+      this.permissions = selections;
+    },
+  },
+};
+</script>
diff --git a/src/views/administration/accessmanagement/LdapUsers.vue b/src/views/administration/accessmanagement/LdapUsers.vue
deleted file mode 100644
index 62c919067..000000000
--- a/src/views/administration/accessmanagement/LdapUsers.vue
+++ /dev/null
@@ -1,278 +0,0 @@
-<template>
-  <b-card no-body :header="header">
-    <b-card-body>
-      <div id="customToolbar">
-        <b-button
-          size="md"
-          variant="outline-primary"
-          v-b-modal.createLdapUserModal
-        >
-          <span class="fa fa-plus"></span> {{ $t('admin.create_user') }}
-        </b-button>
-      </div>
-      <bootstrap-table
-        ref="table"
-        :columns="columns"
-        :data="data"
-        :options="options"
-      >
-      </bootstrap-table>
-    </b-card-body>
-    <create-ldap-user-modal v-on:refreshTable="refreshTable" />
-  </b-card>
-</template>
-
-<script>
-import xssFilters from 'xss-filters';
-import common from '../../../shared/common';
-import i18n from '../../../i18n';
-import CreateLdapUserModal from './CreateLdapUserModal';
-import bootstrapTableMixin from '../../../mixins/bootstrapTableMixin';
-import EventBus from '../../../shared/eventbus';
-import ActionableListGroupItem from '../../components/ActionableListGroupItem';
-import SelectTeamModal from './SelectTeamModal';
-import SelectPermissionModal from './SelectPermissionModal';
-import permissionsMixin from '../../../mixins/permissionsMixin';
-
-export default {
-  props: {
-    header: String,
-  },
-  mixins: [bootstrapTableMixin],
-  components: {
-    CreateLdapUserModal,
-  },
-  mounted() {
-    EventBus.$on('admin:ldapusers:rowUpdate', (index, row) => {
-      this.$refs.table.updateRow({ index: index, row: row });
-      this.$refs.table.expandRow(index);
-    });
-    EventBus.$on('admin:ldapusers:rowDeleted', (index, row) => {
-      this.refreshTable();
-    });
-  },
-  beforeDestroy() {
-    EventBus.$off('admin:ldapusers:rowUpdate');
-    EventBus.$off('admin:ldapusers:rowDeleted');
-  },
-  data() {
-    return {
-      columns: [
-        {
-          title: this.$t('message.username'),
-          field: 'username',
-          sortable: false,
-          formatter(value, row, index) {
-            return xssFilters.inHTMLData(common.valueWithDefault(value, ''));
-          },
-        },
-        {
-          title: this.$t('admin.distinguished_name'),
-          field: 'dn',
-          sortable: false,
-          formatter(value, row, index) {
-            return xssFilters.inHTMLData(common.valueWithDefault(value, ''));
-          },
-        },
-        {
-          title: this.$t('admin.teams'),
-          field: 'teams',
-          sortable: false,
-          formatter(value, row, index) {
-            return value
-              ? xssFilters.inHTMLData(
-                  common.valueWithDefault(value.length, '0'),
-                )
-              : 0;
-          },
-        },
-      ],
-      data: [],
-      options: {
-        search: true,
-        showColumns: true,
-        showRefresh: true,
-        pagination: true,
-        silentSort: false,
-        sidePagination: 'client',
-        queryParamsType: 'pageSize',
-        pageList: '[10, 25, 50, 100]',
-        pageSize: 10,
-        icons: {
-          refresh: 'fa-refresh',
-        },
-        detailView: true,
-        detailViewIcon: false,
-        detailViewByClick: true,
-        detailFormatter: (index, row) => {
-          return this.vueFormatter({
-            i18n,
-            template: `
-                <b-row class="expanded-row">
-                  <b-col sm="6">
-                    <b-form-group :label="this.$t('admin.team_membership')">
-                      <div class="list-group">
-                        <span v-for="team in teams">
-                          <actionable-list-group-item :value="team.name" :delete-icon="true" v-on:actionClicked="removeTeamMembership(team.uuid)"/>
-                        </span>
-                        <actionable-list-group-item :add-icon="true" v-on:actionClicked="$root.$emit('bv::show::modal', 'selectTeamModal')"/>
-                      </div>
-                    </b-form-group>
-                    <b-form-group :label="this.$t('admin.permissions')">
-                      <div class="list-group">
-                        <span v-for="permission in permissions">
-                          <actionable-list-group-item :value="permission.name" :delete-icon="true" v-on:actionClicked="removePermission(permission)"/>
-                        </span>
-                        <actionable-list-group-item :add-icon="true" v-on:actionClicked="$root.$emit('bv::show::modal', 'selectPermissionModal')"/>
-                      </div>
-                    </b-form-group>
-                  </b-col>
-                  <b-col sm="6">
-                    <div style="text-align:right">
-                       <b-button variant="outline-danger" @click="deleteUser">{{ $t('admin.delete_user') }}</b-button>
-                    </div>
-                  </b-col>
-                  <select-team-modal v-on:selection="updateTeamSelection" />
-                  <select-permission-modal v-on:selection="updatePermissionSelection" />
-                </b-row>
-              `,
-            mixins: [permissionsMixin],
-            components: {
-              ActionableListGroupItem,
-              SelectTeamModal,
-              SelectPermissionModal,
-            },
-            data() {
-              return {
-                ldapUser: row,
-                username: row.username,
-                teams: row.teams,
-                permissions: row.permissions,
-              };
-            },
-            methods: {
-              deleteUser: function () {
-                let url = `${this.$api.BASE_URL}/${this.$api.URL_USER_LDAP}`;
-                this.axios
-                  .delete(url, {
-                    data: {
-                      username: this.username,
-                    },
-                  })
-                  .then((response) => {
-                    EventBus.$emit('admin:ldapusers:rowDeleted', index);
-                    this.$toastr.s(this.$t('admin.user_deleted'));
-                  })
-                  .catch((error) => {
-                    this.$toastr.w(this.$t('condition.unsuccessful_action'));
-                  });
-              },
-              updateTeamSelection: function (selections) {
-                this.$root.$emit('bv::hide::modal', 'selectTeamModal');
-                for (let i = 0; i < selections.length; i++) {
-                  let selection = selections[i];
-                  let url = `${this.$api.BASE_URL}/${this.$api.URL_USER}/${this.username}/membership`;
-                  this.axios
-                    .post(url, {
-                      uuid: selection.uuid,
-                    })
-                    .then((response) => {
-                      this.syncVariables(response.data);
-                      EventBus.$emit(
-                        'admin:ldapusers:rowUpdate',
-                        index,
-                        this.ldapUser,
-                      );
-                      this.$toastr.s(this.$t('message.updated'));
-                    })
-                    .catch((error) => {
-                      if (error.response.status === 304) {
-                        //this.$toastr.w(this.$t('condition.unsuccessful_action'));
-                      } else {
-                        this.$toastr.w(
-                          this.$t('condition.unsuccessful_action'),
-                        );
-                      }
-                    });
-                }
-              },
-              removeTeamMembership: function (teamUuid) {
-                let url = `${this.$api.BASE_URL}/${this.$api.URL_USER}/${this.username}/membership`;
-                this.axios
-                  .delete(url, { data: { uuid: teamUuid } })
-                  .then((response) => {
-                    this.syncVariables(response.data);
-                    EventBus.$emit(
-                      'admin:ldapusers:rowUpdate',
-                      index,
-                      this.ldapUser,
-                    );
-                    this.$toastr.s(this.$t('message.updated'));
-                  })
-                  .catch((error) => {
-                    this.$toastr.w(this.$t('condition.unsuccessful_action'));
-                  });
-              },
-              updatePermissionSelection: function (selections) {
-                this.$root.$emit('bv::hide::modal', 'selectPermissionModal');
-                for (let i = 0; i < selections.length; i++) {
-                  let selection = selections[i];
-                  let url = `${this.$api.BASE_URL}/${this.$api.URL_PERMISSION}/${selection.name}/user/${this.username}`;
-                  this.axios
-                    .post(url)
-                    .then((response) => {
-                      this.syncVariables(response.data);
-                      this.$toastr.s(this.$t('message.updated'));
-                    })
-                    .catch((error) => {
-                      console.log(error);
-                      if (error.response.status === 304) {
-                        //this.$toastr.w(this.$t('condition.unsuccessful_action'));
-                      } else {
-                        this.$toastr.w(
-                          this.$t('condition.unsuccessful_action'),
-                        );
-                      }
-                    });
-                }
-              },
-              removePermission: function (permission) {
-                let url = `${this.$api.BASE_URL}/${this.$api.URL_PERMISSION}/${permission.name}/user/${this.username}`;
-                this.axios
-                  .delete(url)
-                  .then((response) => {
-                    this.syncVariables(response.data);
-                    this.$toastr.s(this.$t('message.updated'));
-                  })
-                  .catch((error) => {
-                    this.$toastr.w(this.$t('condition.unsuccessful_action'));
-                  });
-              },
-              syncVariables: function (ldapUser) {
-                this.ldapUser = ldapUser;
-                this.username = ldapUser.username;
-                this.teams = ldapUser.teams;
-                this.permissions = ldapUser.permissions;
-              },
-            },
-          });
-        },
-        onExpandRow: this.vueFormatterInit,
-        toolbar: '#customToolbar',
-        responseHandler: function (res, xhr) {
-          res.total = xhr.getResponseHeader('X-Total-Count');
-          return res;
-        },
-        url: `${this.$api.BASE_URL}/${this.$api.URL_USER_LDAP}`,
-      },
-    };
-  },
-  methods: {
-    refreshTable: function () {
-      this.$refs.table.refresh({
-        silent: true,
-      });
-    },
-  },
-};
-</script>
diff --git a/src/views/administration/accessmanagement/LdapUsers/UserDetails.vue b/src/views/administration/accessmanagement/LdapUsers/UserDetails.vue
new file mode 100644
index 000000000..34914b967
--- /dev/null
+++ b/src/views/administration/accessmanagement/LdapUsers/UserDetails.vue
@@ -0,0 +1,172 @@
+<template>
+  <div>
+    <b-row class="expanded-row">
+      <b-col sm="6">
+        <b-form-group :label="$t('admin.team_membership')">
+          <div class="list-group">
+            <span v-for="team in teams" :key="team.name">
+              <actionable-list-group-item
+                :tooltip="$t('admin.remove_team_membership')"
+                :value="team.name"
+                :delete-icon="true"
+                v-on:actionClicked="removeTeamMembership(team.uuid)"
+              />
+            </span>
+            <actionable-list-group-item
+              :add-icon="true"
+              v-on:actionClicked="
+                $root.$emit('bv::show::modal', 'selectTeamModal')
+              "
+            />
+          </div>
+        </b-form-group>
+        <b-form-group :label="$t('admin.permissions')">
+          <div class="list-group">
+            <span v-for="permission in permissions" :key="permission.name">
+              <actionable-list-group-item
+                :tooltip="$t('admin.remove_permission')"
+                :value="permission.name"
+                :delete-icon="true"
+                v-on:actionClicked="removePermission(permission)"
+              />
+            </span>
+            <actionable-list-group-item
+              :add-icon="true"
+              v-on:actionClicked="
+                $root.$emit('bv::show::modal', 'selectPermissionModal')
+              "
+            />
+          </div>
+        </b-form-group>
+      </b-col>
+      <b-col sm="6">
+        <div style="text-align: right">
+          <b-button variant="outline-danger" @click="deleteUser">{{
+            $t('admin.delete_user')
+          }}</b-button>
+        </div>
+      </b-col>
+    </b-row>
+    <b-row class="expanded-row p-3" colspan="2">
+      <div class="" style="width: 100%">
+        <div v-if="loading" class="d-flex justify-content-center">
+          <b-spinner variant="primary" type="grow" label="Loading"
+            >Loading ...
+          </b-spinner>
+        </div>
+        <div v-else>
+          <label for="">{{ this.$t('message.projects') }}</label>
+          <user-roles-table
+            :parentContext="{ row, index }"
+            :projectRoles="projectRoles"
+            :availableRoles="availableRoles"
+            @addProjectRole="addProjectRole"
+            @updateProjectRole="updateProjectRole"
+            @removeProjectRole="removeProjectRole"
+          />
+        </div>
+      </div>
+    </b-row>
+    <select-team-modal
+      :currentTeams="teams"
+      v-on:selection="updateTeamSelection"
+    />
+    <select-permission-modal
+      :currentPermissions="permissions"
+      v-on:selection="updatePermissionSelection"
+    />
+  </div>
+</template>
+
+<script>
+import i18n from '../../../../i18n';
+import userManagementMixin from '../../../../mixins/userManagementMixin';
+import ActionableListGroupItem from '../../../components/ActionableListGroupItem.vue';
+import UserRolesTable from '../../../components/UserRolesTable.vue';
+import SelectPermissionModal from '../SelectPermissionModal.vue';
+import SelectTeamModal from '../SelectTeamModal.vue';
+
+export default {
+  i18n,
+  props: {
+    index: { type: Number, required: true },
+    row: { type: Object, required: true },
+    rowEvents: { update: { type: String }, delete: { type: String } },
+  },
+  mixins: [userManagementMixin],
+  components: {
+    ActionableListGroupItem,
+    SelectTeamModal,
+    SelectPermissionModal,
+    UserRolesTable,
+  },
+  data() {
+    return {
+      username: this.row.username,
+      teams: this.row.teams,
+      permissions: this.row.permissions,
+      projectRoles: null,
+      availableRoles: null,
+      loading: true,
+    };
+  },
+  mounted() {
+    // Fetch user projects and available roles for each project (userManagementMixin)
+    Promise.all([
+      this.loadUserProjects(this.username),
+      this.loadAvailableProjectRoles(),
+    ])
+      .then((response) => {
+        this.projectRoles = response[0] || [];
+        this.availableRoles = response[1] || [];
+      })
+      .catch((error) => {
+        if (!this.axios.isAxiosError(error)) console.error(error);
+        this.$toastr.e(this.$t('condition.unsuccessful_action'));
+      })
+      .finally(() => {
+        this.loading = false;
+      });
+  },
+  methods: {
+    deleteUser: function () {
+      const endpoint = `${this.$api.BASE_URL}/${this.$api.URL_USER_LDAP}`;
+      this._deleteUser(endpoint);
+    },
+
+    updateTeamSelection: function (selections) {
+      this._updateTeamSelection(selections);
+    },
+
+    removeTeamMembership: function (teamUUID) {
+      this._removeTeamMembership(teamUUID);
+    },
+
+    updatePermissionSelection: function (selections) {
+      this._updatePermissionSelection(selections);
+    },
+
+    removePermission: function (permission) {
+      this._removePermission(permission);
+    },
+
+    addProjectRole: function (projectRole, callbacks) {
+      this._handleProjectRole('add', projectRole, callbacks).then(async () => {
+        this.projectRoles = await this.loadUserProjects(this.username);
+      });
+    },
+
+    updateProjectRole: function (projectRole, callbacks) {
+      this._handleProjectRole('update', projectRole, callbacks);
+    },
+
+    removeProjectRole: function (projectRole, callbacks) {
+      this._handleProjectRole('remove', projectRole, callbacks).then(
+        async () => {
+          this.projectRoles = await this.loadUserProjects(this.username);
+        },
+      );
+    },
+  },
+};
+</script>
diff --git a/src/views/administration/accessmanagement/LdapUsers/index.vue b/src/views/administration/accessmanagement/LdapUsers/index.vue
new file mode 100644
index 000000000..76f31d5e6
--- /dev/null
+++ b/src/views/administration/accessmanagement/LdapUsers/index.vue
@@ -0,0 +1,134 @@
+<template>
+  <b-card no-body :header="header">
+    <b-card-body>
+      <div id="customToolbar">
+        <b-button
+          size="md"
+          variant="outline-primary"
+          v-b-modal.createLdapUserModal
+        >
+          <span class="fa fa-plus"></span> {{ $t('admin.create_user') }}
+        </b-button>
+      </div>
+      <bootstrap-table
+        v-on:refreshTable="refreshTable"
+        ref="table"
+        :columns="columns"
+        :data="data"
+        :options="options"
+      >
+      </bootstrap-table>
+    </b-card-body>
+    <create-ldap-user-modal v-on:refreshTable="refreshTable" />
+  </b-card>
+</template>
+
+<script>
+import xssFilters from 'xss-filters';
+import common from '../../../../shared/common';
+import CreateLdapUserModal from '../CreateLdapUserModal';
+import bootstrapTableMixin from '../../../../mixins/bootstrapTableMixin';
+import EventBus from '../../../../shared/eventbus';
+import UserDetails from './UserDetails.vue';
+
+export default {
+  name: 'LdapUsersView',
+  props: {
+    header: String,
+  },
+  mixins: [bootstrapTableMixin],
+  components: {
+    CreateLdapUserModal,
+  },
+  mounted() {
+    EventBus.$on(this.rowEvents.update, (index, row) => {
+      this.$refs.table.updateRow({ index, row });
+      this.$refs.table.expandRow(index);
+    });
+    EventBus.$on(this.rowEvents.delete, () => {
+      this.refreshTable();
+    });
+  },
+  beforeDestroy() {
+    EventBus.$off(this.rowEvents.update);
+    EventBus.$off(this.rowEvents.delete);
+  },
+  data() {
+    return {
+      rowEvents: {
+        update: 'admin:ldapusers:rowUpdate',
+        delete: 'admin:ldapusers:rowDeleted',
+      },
+      columns: [
+        {
+          title: this.$t('message.username'),
+          field: 'username',
+          sortable: false,
+          formatter(value) {
+            return xssFilters.inHTMLData(common.valueWithDefault(value, ''));
+          },
+        },
+        {
+          title: this.$t('admin.distinguished_name'),
+          field: 'dn',
+          sortable: false,
+          formatter(value) {
+            return xssFilters.inHTMLData(common.valueWithDefault(value, ''));
+          },
+        },
+        {
+          title: this.$t('admin.teams'),
+          field: 'teams',
+          sortable: false,
+          formatter(value) {
+            return value
+              ? xssFilters.inHTMLData(
+                  common.valueWithDefault(value.length, '0'),
+                )
+              : 0;
+          },
+        },
+      ],
+      data: [],
+      options: {
+        search: true,
+        showColumns: true,
+        showRefresh: true,
+        pagination: true,
+        silentSort: false,
+        sidePagination: 'client',
+        queryParamsType: 'pageSize',
+        pageList: '[10, 25, 50, 100]',
+        pageSize: 10,
+        icons: {
+          refresh: 'fa-refresh',
+        },
+        detailView: true,
+        detailViewIcon: false,
+        detailViewByClick: true,
+        detailFormatter: (index, row) => {
+          return this.vueFormatter({
+            render: () => (
+              <UserDetails row={row} index={index} rowEvents={this.rowEvents} />
+            ),
+          });
+        },
+        onExpandRow: this.vueFormatterInit,
+        toolbar: '#customToolbar',
+        responseHandler: function (res, xhr) {
+          res.total = xhr.getResponseHeader('X-Total-Count');
+          return res;
+        },
+        url: `${this.$api.BASE_URL}/${this.$api.URL_USER_LDAP}`,
+      },
+    };
+  },
+  methods: {
+    refreshTable: function () {
+      this.$refs.table.refresh({
+        silent: true,
+      });
+    },
+  },
+};
+</script>
diff --git a/src/views/administration/accessmanagement/ManagedUsers.vue b/src/views/administration/accessmanagement/ManagedUsers.vue
deleted file mode 100644
index 4e793d910..000000000
--- a/src/views/administration/accessmanagement/ManagedUsers.vue
+++ /dev/null
@@ -1,361 +0,0 @@
-<template>
-  <b-card no-body :header="header">
-    <b-card-body>
-      <div id="customToolbar">
-        <b-button
-          size="md"
-          variant="outline-primary"
-          v-b-modal.createManagedUserModal
-        >
-          <span class="fa fa-plus"></span> {{ $t('admin.create_user') }}
-        </b-button>
-      </div>
-      <bootstrap-table
-        ref="table"
-        :columns="columns"
-        :data="data"
-        :options="options"
-      >
-      </bootstrap-table>
-    </b-card-body>
-    <create-managed-user-modal v-on:refreshTable="refreshTable" />
-  </b-card>
-</template>
-
-<script>
-import xssFilters from 'xss-filters';
-import common from '../../../shared/common';
-import i18n from '../../../i18n';
-import CreateManagedUserModal from './CreateManagedUserModal';
-import bootstrapTableMixin from '../../../mixins/bootstrapTableMixin';
-import EventBus from '../../../shared/eventbus';
-import ActionableListGroupItem from '../../components/ActionableListGroupItem';
-import ChangePasswordModal from './ChangePasswordModal';
-import SelectTeamModal from './SelectTeamModal';
-import SelectPermissionModal from './SelectPermissionModal';
-import permissionsMixin from '../../../mixins/permissionsMixin';
-import { Switch as cSwitch } from '@coreui/vue';
-import BInputGroupFormInput from '../../../forms/BInputGroupFormInput';
-
-export default {
-  props: {
-    header: String,
-  },
-  mixins: [bootstrapTableMixin],
-  components: {
-    CreateManagedUserModal,
-  },
-  mounted() {
-    EventBus.$on('admin:managedusers:rowUpdate', (index, row) => {
-      this.$refs.table.updateRow({ index: index, row: row });
-      this.$refs.table.expandRow(index);
-    });
-    EventBus.$on('admin:managedusers:rowDeleted', (index, row) => {
-      this.refreshTable();
-    });
-  },
-  beforeDestroy() {
-    EventBus.$off('admin:managedusers:rowUpdate');
-    EventBus.$off('admin:managedusers:rowDeleted');
-  },
-  data() {
-    return {
-      columns: [
-        {
-          title: this.$t('message.username'),
-          field: 'username',
-          sortable: false,
-          formatter(value, row, index) {
-            return xssFilters.inHTMLData(common.valueWithDefault(value, ''));
-          },
-        },
-        {
-          title: this.$t('message.fullname'),
-          field: 'fullname',
-          sortable: false,
-          formatter(value, row, index) {
-            return xssFilters.inHTMLData(common.valueWithDefault(value, ''));
-          },
-        },
-        {
-          title: this.$t('message.email'),
-          field: 'email',
-          sortable: false,
-          formatter(value, row, index) {
-            return xssFilters.inHTMLData(common.valueWithDefault(value, ''));
-          },
-        },
-        {
-          title: this.$t('admin.teams'),
-          field: 'teams',
-          sortable: false,
-          formatter(value, row, index) {
-            return value
-              ? xssFilters.inHTMLData(
-                  common.valueWithDefault(value.length, '0'),
-                )
-              : 0;
-          },
-        },
-      ],
-      data: [],
-      options: {
-        search: true,
-        showColumns: true,
-        showRefresh: true,
-        pagination: true,
-        silentSort: false,
-        sidePagination: 'client',
-        queryParamsType: 'pageSize',
-        pageList: '[10, 25, 50, 100]',
-        pageSize: 10,
-        icons: {
-          refresh: 'fa-refresh',
-        },
-        detailView: true,
-        detailViewIcon: false,
-        detailViewByClick: true,
-        detailFormatter: (index, row) => {
-          return this.vueFormatter({
-            i18n,
-            template: `
-                <b-row class="expanded-row">
-                  <b-col sm="6">
-                    <b-form-group :label="this.$t('admin.team_membership')">
-                      <div class="list-group">
-                        <span v-for="team in teams">
-                          <actionable-list-group-item :value="team.name" :delete-icon="true" v-on:actionClicked="removeTeamMembership(team.uuid)"/>
-                        </span>
-                        <actionable-list-group-item :add-icon="true" v-on:actionClicked="$root.$emit('bv::show::modal', 'selectTeamModal')"/>
-                      </div>
-                    </b-form-group>
-                    <b-form-group :label="this.$t('admin.permissions')">
-                      <div class="list-group">
-                        <span v-for="permission in permissions">
-                          <actionable-list-group-item :value="permission.name" :delete-icon="true" v-on:actionClicked="removePermission(permission)"/>
-                        </span>
-                        <actionable-list-group-item :add-icon="true" v-on:actionClicked="$root.$emit('bv::show::modal', 'selectPermissionModal')"/>
-                      </div>
-                    </b-form-group>
-                  </b-col>
-                  <b-col sm="6">
-                    <b-input-group-form-input id="input-managed-user-fullname" :label="$t('message.fullname')" input-group-size="mb-3"
-                                              required="true" type="text" v-model="fullname" lazy="true"
-                                              v-debounce:750ms="updateUser" :debounce-events="'keyup'" />
-                    <b-input-group-form-input id="input-managed-user-email" :label="$t('message.email')" input-group-size="mb-3"
-                                              required="true" type="text" v-model="email" lazy="true"
-                                              v-debounce:750ms="updateUser" :debounce-events="'keyup'" />
-                    <c-switch id="forcePasswordChange" color="primary" v-model="forcePasswordChange" label v-bind="labelIcon" />{{$t('admin.change_password_next_login')}}
-                    <br/>
-                    <c-switch id="nonExpiryPassword" color="primary" v-model="nonExpiryPassword" label v-bind="labelIcon" />{{$t('admin.password_never_expires')}}
-                    <br/>
-                    <c-switch id="suspended" color="primary" v-model="suspended" label v-bind="labelIcon" />{{$t('admin.suspended')}}
-                    <div style="text-align:right">
-                       <b-button variant="outline-primary" @click="$root.$emit('bv::show::modal', 'changePasswordModal')">{{ $t('admin.change_password') }}</b-button>
-                       <b-button variant="outline-danger" @click="deleteUser">{{ $t('admin.delete_user') }}</b-button>
-                    </div>
-                  </b-col>
-                  <select-team-modal v-on:selection="updateTeamSelection" />
-                  <select-permission-modal v-on:selection="updatePermissionSelection" />
-                  <change-password-modal :managed-user="managedUser" />
-                </b-row>
-              `,
-            mixins: [permissionsMixin],
-            components: {
-              cSwitch,
-              ActionableListGroupItem,
-              SelectTeamModal,
-              SelectPermissionModal,
-              ChangePasswordModal,
-              BInputGroupFormInput,
-            },
-            data() {
-              return {
-                managedUser: row,
-                username: row.username,
-                teams: row.teams,
-                permissions: row.permissions,
-                fullname: row.fullname,
-                email: row.email,
-                forcePasswordChange: row.forcePasswordChange,
-                nonExpiryPassword: row.nonExpiryPassword,
-                suspended: row.suspended,
-                labelIcon: {
-                  dataOn: '\u2713',
-                  dataOff: '\u2715',
-                },
-              };
-            },
-            watch: {
-              forcePasswordChange() {
-                this.updateUser();
-              },
-              nonExpiryPassword() {
-                this.updateUser();
-              },
-              suspended() {
-                this.updateUser();
-              },
-            },
-            methods: {
-              updateUser: function () {
-                let url = `${this.$api.BASE_URL}/${this.$api.URL_USER_MANAGED}`;
-                this.axios
-                  .post(url, {
-                    username: this.username,
-                    fullname: this.fullname,
-                    email: this.email,
-                    newPassword: null,
-                    confirmPassword: null,
-                    forcePasswordChange: this.forcePasswordChange,
-                    nonExpiryPassword: this.nonExpiryPassword,
-                    suspended: this.suspended,
-                  })
-                  .then((response) => {
-                    this.manageduser = response.data;
-                    EventBus.$emit(
-                      'admin:managedusers:rowUpdate',
-                      index,
-                      this.manageduser,
-                    );
-                    this.$toastr.s(this.$t('message.updated'));
-                  })
-                  .catch((error) => {
-                    this.$toastr.w(this.$t('condition.unsuccessful_action'));
-                  });
-              },
-              deleteUser: function () {
-                let url = `${this.$api.BASE_URL}/${this.$api.URL_USER_MANAGED}`;
-                this.axios
-                  .delete(url, {
-                    data: {
-                      username: this.username,
-                    },
-                  })
-                  .then((response) => {
-                    EventBus.$emit('admin:managedusers:rowDeleted', index);
-                    this.$toastr.s(this.$t('admin.user_deleted'));
-                  })
-                  .catch((error) => {
-                    this.$toastr.w(this.$t('condition.unsuccessful_action'));
-                  });
-              },
-              updateTeamSelection: function (selections) {
-                this.$root.$emit('bv::hide::modal', 'selectTeamModal');
-                for (let i = 0; i < selections.length; i++) {
-                  let selection = selections[i];
-                  let url = `${this.$api.BASE_URL}/${this.$api.URL_USER}/${this.username}/membership`;
-                  this.axios
-                    .post(url, {
-                      uuid: selection.uuid,
-                    })
-                    .then((response) => {
-                      this.syncVariables(response.data);
-                      EventBus.$emit(
-                        'admin:managedusers:rowUpdate',
-                        index,
-                        this.manageduser,
-                      );
-                      this.$toastr.s(this.$t('message.updated'));
-                    })
-                    .catch((error) => {
-                      if (error.response.status === 304) {
-                        //this.$toastr.w(this.$t('condition.unsuccessful_action'));
-                      } else {
-                        this.$toastr.w(
-                          this.$t('condition.unsuccessful_action'),
-                        );
-                      }
-                    });
-                }
-              },
-              removeTeamMembership: function (teamUuid) {
-                let url = `${this.$api.BASE_URL}/${this.$api.URL_USER}/${this.username}/membership`;
-                this.axios
-                  .delete(url, { data: { uuid: teamUuid } })
-                  .then((response) => {
-                    this.syncVariables(response.data);
-                    EventBus.$emit(
-                      'admin:managedusers:rowUpdate',
-                      index,
-                      this.manageduser,
-                    );
-                    this.$toastr.s(this.$t('message.updated'));
-                  })
-                  .catch((error) => {
-                    this.$toastr.w(this.$t('condition.unsuccessful_action'));
-                  });
-              },
-              updatePermissionSelection: function (selections) {
-                this.$root.$emit('bv::hide::modal', 'selectPermissionModal');
-                let updatePromise = Promise.resolve();
-                for (let i = 0; i < selections.length; i++) {
-                  let selection = selections[i];
-                  let url = `${this.$api.BASE_URL}/${this.$api.URL_PERMISSION}/${selection.name}/user/${this.username}`;
-                  updatePromise = updatePromise.then((response) => {
-                    if (response && response.data) {
-                      this.syncVariables(response.data);
-                    }
-                    return this.axios.post(url);
-                  });
-                }
-                updatePromise
-                  .then((response) => {
-                    if (response && response.data) {
-                      this.syncVariables(response.data);
-                    }
-                    this.$toastr.s(this.$t('message.updated'));
-                  })
-                  .catch((error) => {
-                    if (error.response.status === 304) {
-                      //this.$toastr.w(this.$t('condition.unsuccessful_action'));
-                    } else {
-                      this.$toastr.w(this.$t('condition.unsuccessful_action'));
-                    }
-                  });
-              },
-              removePermission: function (permission) {
-                let url = `${this.$api.BASE_URL}/${this.$api.URL_PERMISSION}/${permission.name}/user/${this.username}`;
-                this.axios
-                  .delete(url)
-                  .then((response) => {
-                    this.syncVariables(response.data);
-                    this.$toastr.s(this.$t('message.updated'));
-                  })
-                  .catch(() => {
-                    this.$toastr.w(this.$t('condition.unsuccessful_action'));
-                  });
-              },
-              syncVariables: function (managedUser) {
-                this.manageduser = managedUser;
-                this.username = managedUser.username;
-                this.teams = managedUser.teams;
-                this.permissions = managedUser.permissions;
-                this.fullname = managedUser.fullname;
-                this.email = managedUser.email;
-                this.forcePasswordChange = managedUser.forcePasswordChange;
-                this.nonExpiryPassword = managedUser.nonExpiryPassword;
-                this.suspended = managedUser.suspended;
-              },
-            },
-          });
-        },
-        onExpandRow: this.vueFormatterInit,
-        toolbar: '#customToolbar',
-        responseHandler: function (res, xhr) {
-          res.total = xhr.getResponseHeader('X-Total-Count');
-          return res;
-        },
-        url: `${this.$api.BASE_URL}/${this.$api.URL_USER_MANAGED}`,
-      },
-    };
-  },
-  methods: {
-    refreshTable: function () {
-      this.$refs.table.refresh({
-        silent: true,
-      });
-    },
-  },
-};
-</script>
diff --git a/src/views/administration/accessmanagement/ManagedUsers/UserDetails.vue b/src/views/administration/accessmanagement/ManagedUsers/UserDetails.vue
new file mode 100644
index 000000000..11cf6684a
--- /dev/null
+++ b/src/views/administration/accessmanagement/ManagedUsers/UserDetails.vue
@@ -0,0 +1,278 @@
+<template>
+  <div>
+    <b-row class="expanded-row">
+      <b-col sm="6">
+        <b-form-group :label="this.$t('admin.team_membership')">
+          <div class="list-group">
+            <span v-for="team in teams" :key="team.name">
+              <actionable-list-group-item
+                :tooltip="$t('admin.remove_team_membership')"
+                :value="team.name"
+                :delete-icon="true"
+                v-on:actionClicked="removeTeamMembership(team.uuid)"
+              />
+            </span>
+            <actionable-list-group-item
+              :add-icon="true"
+              v-on:actionClicked="
+                $root.$emit('bv::show::modal', 'selectTeamModal')
+              "
+            />
+          </div>
+        </b-form-group>
+        <b-form-group :label="this.$t('admin.permissions')">
+          <div class="list-group">
+            <span v-for="permission in permissions" :key="permission.name">
+              <actionable-list-group-item
+                :tooltip="$t('admin.remove_permission')"
+                :value="permission.name"
+                :delete-icon="true"
+                v-on:actionClicked="removePermission(permission)"
+              />
+            </span>
+            <actionable-list-group-item
+              :add-icon="true"
+              v-on:actionClicked="openPermissionModal"
+            />
+          </div>
+        </b-form-group>
+      </b-col>
+      <b-col sm="6">
+        <b-input-group-form-input
+          id="input-managed-user-fullname"
+          :label="$t('message.fullname')"
+          input-group-size="mb-3"
+          required="true"
+          type="text"
+          v-model="fullname"
+          lazy="true"
+          v-debounce:750ms="updateUser"
+          :debounce-events="'keyup'"
+        />
+        <b-input-group-form-input
+          id="input-managed-user-email"
+          :label="$t('message.email')"
+          input-group-size="mb-3"
+          required="true"
+          type="text"
+          v-model="email"
+          lazy="true"
+          v-debounce:750ms="updateUser"
+          :debounce-events="'keyup'"
+        />
+        <c-switch
+          id="forcePasswordChange"
+          color="primary"
+          v-model="forcePasswordChange"
+          label
+          v-bind="labelIcon"
+        />{{ $t('admin.change_password_next_login') }}
+        <br />
+        <c-switch
+          id="nonExpiryPassword"
+          color="primary"
+          v-model="nonExpiryPassword"
+          label
+          v-bind="labelIcon"
+        />{{ $t('admin.password_never_expires') }}
+        <br />
+        <c-switch
+          id="suspended"
+          color="primary"
+          v-model="suspended"
+          label
+          v-bind="labelIcon"
+        />{{ $t('admin.suspended') }}
+        <div style="text-align: right">
+          <b-button
+            variant="outline-primary"
+            @click="$root.$emit('bv::show::modal', 'changePasswordModal')"
+            >{{ $t('admin.change_password') }}</b-button
+          >
+          <b-button variant="outline-danger" @click="deleteUser">{{
+            $t('admin.delete_user')
+          }}</b-button>
+        </div>
+      </b-col>
+    </b-row>
+    <b-row class="expanded-row p-3" colspan="2">
+      <div class="" style="width: 100%">
+        <div v-if="loading" class="d-flex justify-content-center">
+          <b-spinner variant="primary" type="grow" label="Loading"
+            >Loading ...
+          </b-spinner>
+        </div>
+        <div v-else>
+          <label for="">{{ this.$t('message.projects') }}</label>
+          <user-roles-table
+            :parentContext="{ row, index }"
+            :projectRoles="projectRoles"
+            :availableRoles="availableRoles"
+            @addProjectRole="addProjectRole"
+            @updateProjectRole="updateProjectRole"
+            @removeProjectRole="removeProjectRole"
+          />
+        </div>
+      </div>
+    </b-row>
+    <select-team-modal
+      :currentTeams="teams"
+      v-on:selection="updateTeamSelection"
+    />
+    <select-permission-modal
+      :currentPermissions="permissions"
+      v-on:selection="updatePermissionSelection"
+    />
+
+    <change-password-modal :managed-user="this.row" />
+  </div>
+</template>
+
+<script>
+import ActionableListGroupItem from '../../../components/ActionableListGroupItem.vue';
+import ChangePasswordModal from '../ChangePasswordModal.vue';
+import SelectTeamModal from '../SelectTeamModal.vue';
+import SelectPermissionModal from '../SelectPermissionModal.vue';
+import permissionsMixin from '../../../../mixins/permissionsMixin';
+import { Switch as cSwitch } from '@coreui/vue';
+import BInputGroupFormInput from '@/forms/BInputGroupFormInput';
+import userManagementMixin from '../../../../mixins/userManagementMixin';
+import EventBus from '../../../../shared/eventbus';
+import i18n from '../../../../i18n';
+import UserRolesTable from '../../../components/UserRolesTable.vue';
+
+export default {
+  i18n,
+  props: {
+    index: { type: Number, required: true },
+    row: { type: Object, required: true },
+    rowEvents: { update: { type: String }, delete: { type: String } },
+  },
+  mixins: [permissionsMixin, userManagementMixin],
+  components: {
+    cSwitch,
+    ActionableListGroupItem,
+    SelectTeamModal,
+    SelectPermissionModal,
+    ChangePasswordModal,
+    BInputGroupFormInput,
+    UserRolesTable,
+  },
+  data() {
+    return {
+      username: this.row.username,
+      teams: this.row.teams,
+      permissions: this.row.permissions,
+      fullname: this.row.fullname,
+      email: this.row.email,
+      forcePasswordChange: this.row.forcePasswordChange,
+      nonExpiryPassword: this.row.nonExpiryPassword,
+      suspended: this.row.suspended,
+      projectRoles: null,
+      availableRoles: null,
+      loading: true,
+      counter: 0,
+      labelIcon: {
+        dataOn: '\u2713',
+        dataOff: '\u2715',
+      },
+    };
+  },
+  mounted() {
+    // Fetch user projects and available roles for each project (userManagementMixin)
+    Promise.all([
+      this.loadUserProjects(this.username),
+      this.loadAvailableProjectRoles(),
+    ])
+      .then((response) => {
+        this.projectRoles = response[0] || [];
+        this.availableRoles = response[1] || [];
+      })
+      .catch((error) => {
+        if (!this.axios.isAxiosError(error)) console.error(error);
+        this.$toastr.e(this.$t('condition.unsuccessful_action'));
+      })
+      .finally(() => {
+        this.loading = false;
+      });
+  },
+  watch: {
+    forcePasswordChange() {
+      this.updateUser();
+    },
+    nonExpiryPassword() {
+      this.updateUser();
+    },
+    suspended() {
+      this.updateUser();
+    },
+  },
+  methods: {
+    openPermissionModal() {
+      this.$root.$emit('bv::show::modal', 'selectPermissionModal');
+    },
+    openProjectModal() {
+      this.$root.$emit('bv::show::modal', 'selectProjectModal');
+    },
+    updateUser: function () {
+      const url = `${this.$api.BASE_URL}/${this.$api.URL_USER_MANAGED}`;
+      this.axios
+        .post(url, {
+          username: this.username,
+          fullname: this.fullname,
+          email: this.email,
+          newPassword: null,
+          confirmPassword: null,
+          forcePasswordChange: this.forcePasswordChange,
+          nonExpiryPassword: this.nonExpiryPassword,
+          suspended: this.suspended,
+        })
+        .then((response) => {
+          EventBus.$emit(this.rowEvents.update, this.index, response.data);
+          this.$toastr.s(this.$t('message.updated'));
+        })
+        .catch(() => {
+          this.$toastr.w(this.$t('condition.unsuccessful_action'));
+        });
+    },
+    deleteUser: function () {
+      const endpoint = `${this.$api.BASE_URL}/${this.$api.URL_USER_MANAGED}`;
+      this._deleteUser(endpoint);
+    },
+
+    updateTeamSelection: function (selections) {
+      this._updateTeamSelection(selections);
+    },
+
+    removeTeamMembership: function (teamUUID) {
+      this._removeTeamMembership(teamUUID);
+    },
+
+    updatePermissionSelection: function (selections) {
+      this._updatePermissionSelection(selections);
+    },
+
+    removePermission: function (permission) {
+      this._removePermission(permission);
+    },
+
+    addProjectRole: function (projectRole, callbacks) {
+      this._handleProjectRole('add', projectRole, callbacks).then(async () => {
+        this.projectRoles = await this.loadUserProjects(this.username);
+      });
+    },
+
+    updateProjectRole: function (projectRole, callbacks) {
+      this._handleProjectRole('update', projectRole, callbacks);
+    },
+
+    removeProjectRole: function (projectRole, callbacks) {
+      this._handleProjectRole('remove', projectRole, callbacks).then(
+        async () => {
+          this.projectRoles = await this.loadUserProjects(this.username);
+        },
+      );
+    },
+  },
+};
+</script>
diff --git a/src/views/administration/accessmanagement/ManagedUsers/index.vue b/src/views/administration/accessmanagement/ManagedUsers/index.vue
new file mode 100644
index 000000000..b28d1c9f4
--- /dev/null
+++ b/src/views/administration/accessmanagement/ManagedUsers/index.vue
@@ -0,0 +1,141 @@
+<template>
+  <b-card no-body :header="header">
+    <b-card-body>
+      <div id="customToolbar">
+        <b-button
+          size="md"
+          variant="outline-primary"
+          v-b-modal.createManagedUserModal
+        >
+          <span class="fa fa-plus"></span> {{ $t('admin.create_user') }}
+        </b-button>
+      </div>
+      <bootstrap-table
+        ref="table"
+        :columns="columns"
+        :data="data"
+        :options="options"
+      >
+      </bootstrap-table>
+    </b-card-body>
+    <create-managed-user-modal v-on:refreshTable="refreshTable" />
+  </b-card>
+</template>
+
+<script>
+import xssFilters from 'xss-filters';
+import common from '../../../../shared/common';
+import bootstrapTableMixin from '../../../../mixins/bootstrapTableMixin';
+import EventBus from '../../../../shared/eventbus';
+import UserDetails from './UserDetails.vue';
+import CreateManagedUserModal from '../CreateManagedUserModal.vue';
+
+export default {
+  name: 'ManagedUsersView',
+  props: {
+    header: String,
+  },
+  mixins: [bootstrapTableMixin],
+  components: {
+    CreateManagedUserModal,
+  },
+  mounted() {
+    EventBus.$on(this.rowEvents.update, (index, row) => {
+      this.$refs.table.updateRow({ index, row });
+      this.$refs.table.expandRow(index);
+    });
+    EventBus.$on(this.rowEvents.delete, () => {
+      this.refreshTable();
+    });
+  },
+  beforeDestroy() {
+    EventBus.$off(this.rowEvents.update);
+    EventBus.$off(this.rowEvents.delete);
+  },
+  data() {
+    return {
+      rowEvents: {
+        update: 'admin:managedusers:rowUpdate',
+        delete: 'admin:managedusers:rowDeleted',
+      },
+      columns: [
+        {
+          title: this.$t('message.username'),
+          field: 'username',
+          sortable: false,
+          formatter(value) {
+            return xssFilters.inHTMLData(common.valueWithDefault(value, ''));
+          },
+        },
+        {
+          title: this.$t('message.fullname'),
+          field: 'fullname',
+          sortable: false,
+          formatter(value) {
+            return xssFilters.inHTMLData(common.valueWithDefault(value, ''));
+          },
+        },
+        {
+          title: this.$t('message.email'),
+          field: 'email',
+          sortable: false,
+          formatter(value) {
+            return xssFilters.inHTMLData(common.valueWithDefault(value, ''));
+          },
+        },
+        {
+          title: this.$t('admin.teams'),
+          field: 'teams',
+          sortable: false,
+          formatter(value) {
+            return value
+              ? xssFilters.inHTMLData(
+                  common.valueWithDefault(value.length, '0'),
+                )
+              : 0;
+          },
+        },
+      ],
+      data: [],
+      options: {
+        search: true,
+        showColumns: true,
+        showRefresh: true,
+        pagination: true,
+        silentSort: false,
+        sidePagination: 'client',
+        queryParamsType: 'pageSize',
+        pageList: '[10, 25, 50, 100]',
+        pageSize: 10,
+        icons: {
+          refresh: 'fa-refresh',
+        },
+        detailView: true,
+        detailViewIcon: false,
+        detailViewByClick: true,
+        detailFormatter: (index, row) => {
+          return this.vueFormatter({
+            render: () => (
+              <UserDetails row={row} index={index} rowEvents={this.rowEvents} />
+            ),
+          });
+        },
+        onExpandRow: this.vueFormatterInit,
+        toolbar: '#customToolbar',
+        responseHandler: function (res, xhr) {
+          res.total = xhr.getResponseHeader('X-Total-Count');
+          return res;
+        },
+        url: `${this.$api.BASE_URL}/${this.$api.URL_USER_MANAGED}`,
+      },
+    };
+  },
+  methods: {
+    refreshTable: function () {
+      this.$refs.table.refresh({
+        silent: true,
+      });
+    },
+  },
+};
+</script>
diff --git a/src/views/administration/accessmanagement/OidcUsers.vue b/src/views/administration/accessmanagement/OidcUsers.vue
deleted file mode 100644
index 7cd939d35..000000000
--- a/src/views/administration/accessmanagement/OidcUsers.vue
+++ /dev/null
@@ -1,278 +0,0 @@
-<template>
-  <b-card no-body :header="header">
-    <b-card-body>
-      <div id="customToolbar">
-        <b-button
-          size="md"
-          variant="outline-primary"
-          v-b-modal.createOidcUserModal
-        >
-          <span class="fa fa-plus"></span> {{ $t('admin.create_user') }}
-        </b-button>
-      </div>
-      <bootstrap-table
-        ref="table"
-        :columns="columns"
-        :data="data"
-        :options="options"
-      >
-      </bootstrap-table>
-    </b-card-body>
-    <create-oidc-user-modal v-on:refreshTable="refreshTable" />
-  </b-card>
-</template>
-
-<script>
-import xssFilters from 'xss-filters';
-import common from '../../../shared/common';
-import i18n from '../../../i18n';
-import CreateOidcUserModal from './CreateOidcUserModal';
-import bootstrapTableMixin from '../../../mixins/bootstrapTableMixin';
-import EventBus from '../../../shared/eventbus';
-import ActionableListGroupItem from '../../components/ActionableListGroupItem';
-import SelectTeamModal from './SelectTeamModal';
-import SelectPermissionModal from './SelectPermissionModal';
-import permissionsMixin from '../../../mixins/permissionsMixin';
-
-export default {
-  props: {
-    header: String,
-  },
-  mixins: [bootstrapTableMixin],
-  components: {
-    CreateOidcUserModal,
-  },
-  mounted() {
-    EventBus.$on('admin:oidcusers:rowUpdate', (index, row) => {
-      this.$refs.table.updateRow({ index: index, row: row });
-      this.$refs.table.expandRow(index);
-    });
-    EventBus.$on('admin:oidcusers:rowDeleted', (index, row) => {
-      this.refreshTable();
-    });
-  },
-  beforeDestroy() {
-    EventBus.$off('admin:oidcusers:rowUpdate');
-    EventBus.$off('admin:oidcusers:rowDeleted');
-  },
-  data() {
-    return {
-      columns: [
-        {
-          title: this.$t('message.username'),
-          field: 'username',
-          sortable: false,
-          formatter(value, row, index) {
-            return xssFilters.inHTMLData(common.valueWithDefault(value, ''));
-          },
-        },
-        {
-          title: this.$t('admin.subject_identifier'),
-          field: 'subjectIdentifier',
-          sortable: false,
-          formatter(value, row, index) {
-            return xssFilters.inHTMLData(common.valueWithDefault(value, ''));
-          },
-        },
-        {
-          title: this.$t('admin.teams'),
-          field: 'teams',
-          sortable: false,
-          formatter(value, row, index) {
-            return value
-              ? xssFilters.inHTMLData(
-                  common.valueWithDefault(value.length, '0'),
-                )
-              : 0;
-          },
-        },
-      ],
-      data: [],
-      options: {
-        search: true,
-        showColumns: true,
-        showRefresh: true,
-        pagination: true,
-        silentSort: false,
-        sidePagination: 'client',
-        queryParamsType: 'pageSize',
-        pageList: '[10, 25, 50, 100]',
-        pageSize: 10,
-        icons: {
-          refresh: 'fa-refresh',
-        },
-        detailView: true,
-        detailViewIcon: false,
-        detailViewByClick: true,
-        detailFormatter: (index, row) => {
-          return this.vueFormatter({
-            i18n,
-            template: `
-                <b-row class="expanded-row">
-                  <b-col sm="6">
-                    <b-form-group :label="this.$t('admin.team_membership')">
-                      <div class="list-group">
-                        <span v-for="team in teams">
-                          <actionable-list-group-item :value="team.name" :delete-icon="true" v-on:actionClicked="removeTeamMembership(team.uuid)"/>
-                        </span>
-                        <actionable-list-group-item :add-icon="true" v-on:actionClicked="$root.$emit('bv::show::modal', 'selectTeamModal')"/>
-                      </div>
-                    </b-form-group>
-                    <b-form-group :label="this.$t('admin.permissions')">
-                      <div class="list-group">
-                        <span v-for="permission in permissions">
-                          <actionable-list-group-item :value="permission.name" :delete-icon="true" v-on:actionClicked="removePermission(permission)"/>
-                        </span>
-                        <actionable-list-group-item :add-icon="true" v-on:actionClicked="$root.$emit('bv::show::modal', 'selectPermissionModal')"/>
-                      </div>
-                    </b-form-group>
-                  </b-col>
-                  <b-col sm="6">
-                    <div style="text-align:right">
-                       <b-button variant="outline-danger" @click="deleteUser">{{ $t('admin.delete_user') }}</b-button>
-                    </div>
-                  </b-col>
-                  <select-team-modal v-on:selection="updateTeamSelection" />
-                  <select-permission-modal v-on:selection="updatePermissionSelection" />
-                </b-row>
-              `,
-            mixins: [permissionsMixin],
-            components: {
-              ActionableListGroupItem,
-              SelectTeamModal,
-              SelectPermissionModal,
-            },
-            data() {
-              return {
-                oidcUser: row,
-                username: row.username,
-                teams: row.teams,
-                permissions: row.permissions,
-              };
-            },
-            methods: {
-              deleteUser: function () {
-                let url = `${this.$api.BASE_URL}/${this.$api.URL_USER_OIDC}`;
-                this.axios
-                  .delete(url, {
-                    data: {
-                      username: this.username,
-                    },
-                  })
-                  .then((response) => {
-                    EventBus.$emit('admin:oidcusers:rowDeleted', index);
-                    this.$toastr.s(this.$t('admin.user_deleted'));
-                  })
-                  .catch((error) => {
-                    this.$toastr.w(this.$t('condition.unsuccessful_action'));
-                  });
-              },
-              updateTeamSelection: function (selections) {
-                this.$root.$emit('bv::hide::modal', 'selectTeamModal');
-                for (let i = 0; i < selections.length; i++) {
-                  let selection = selections[i];
-                  let url = `${this.$api.BASE_URL}/${this.$api.URL_USER}/${this.username}/membership`;
-                  this.axios
-                    .post(url, {
-                      uuid: selection.uuid,
-                    })
-                    .then((response) => {
-                      this.syncVariables(response.data);
-                      EventBus.$emit(
-                        'admin:oidcusers:rowUpdate',
-                        index,
-                        this.oidcUser,
-                      );
-                      this.$toastr.s(this.$t('message.updated'));
-                    })
-                    .catch((error) => {
-                      if (error.response.status === 304) {
-                        //this.$toastr.w(this.$t('condition.unsuccessful_action'));
-                      } else {
-                        this.$toastr.w(
-                          this.$t('condition.unsuccessful_action'),
-                        );
-                      }
-                    });
-                }
-              },
-              removeTeamMembership: function (teamUuid) {
-                let url = `${this.$api.BASE_URL}/${this.$api.URL_USER}/${this.username}/membership`;
-                this.axios
-                  .delete(url, { data: { uuid: teamUuid } })
-                  .then((response) => {
-                    this.syncVariables(response.data);
-                    EventBus.$emit(
-                      'admin:oidcusers:rowUpdate',
-                      index,
-                      this.oidcUser,
-                    );
-                    this.$toastr.s(this.$t('message.updated'));
-                  })
-                  .catch((error) => {
-                    this.$toastr.w(this.$t('condition.unsuccessful_action'));
-                  });
-              },
-              updatePermissionSelection: function (selections) {
-                this.$root.$emit('bv::hide::modal', 'selectPermissionModal');
-                for (let i = 0; i < selections.length; i++) {
-                  let selection = selections[i];
-                  let url = `${this.$api.BASE_URL}/${this.$api.URL_PERMISSION}/${selection.name}/user/${this.username}`;
-                  this.axios
-                    .post(url)
-                    .then((response) => {
-                      this.syncVariables(response.data);
-                      this.$toastr.s(this.$t('message.updated'));
-                    })
-                    .catch((error) => {
-                      console.log(error);
-                      if (error.response.status === 304) {
-                        //this.$toastr.w(this.$t('condition.unsuccessful_action'));
-                      } else {
-                        this.$toastr.w(
-                          this.$t('condition.unsuccessful_action'),
-                        );
-                      }
-                    });
-                }
-              },
-              removePermission: function (permission) {
-                let url = `${this.$api.BASE_URL}/${this.$api.URL_PERMISSION}/${permission.name}/user/${this.username}`;
-                this.axios
-                  .delete(url)
-                  .then((response) => {
-                    this.syncVariables(response.data);
-                    this.$toastr.s(this.$t('message.updated'));
-                  })
-                  .catch((error) => {
-                    this.$toastr.w(this.$t('condition.unsuccessful_action'));
-                  });
-              },
-              syncVariables: function (oidcUser) {
-                this.oidcUser = oidcUser;
-                this.username = oidcUser.username;
-                this.teams = oidcUser.teams;
-                this.permissions = oidcUser.permissions;
-              },
-            },
-          });
-        },
-        onExpandRow: this.vueFormatterInit,
-        toolbar: '#customToolbar',
-        responseHandler: function (res, xhr) {
-          res.total = xhr.getResponseHeader('X-Total-Count');
-          return res;
-        },
-        url: `${this.$api.BASE_URL}/${this.$api.URL_USER_OIDC}`,
-      },
-    };
-  },
-  methods: {
-    refreshTable: function () {
-      this.$refs.table.refresh({
-        silent: true,
-      });
-    },
-  },
-};
-</script>
diff --git a/src/views/administration/accessmanagement/OidcUsers/UserDetails.vue b/src/views/administration/accessmanagement/OidcUsers/UserDetails.vue
new file mode 100644
index 000000000..4a48f334e
--- /dev/null
+++ b/src/views/administration/accessmanagement/OidcUsers/UserDetails.vue
@@ -0,0 +1,170 @@
+<template>
+  <div>
+    <b-row class="expanded-row">
+      <b-col sm="6">
+        <b-form-group :label="this.$t('admin.team_membership')">
+          <div class="list-group">
+            <span v-for="team in teams" :key="team.name">
+              <actionable-list-group-item
+                :value="team.name"
+                :delete-icon="true"
+                v-on:actionClicked="removeTeamMembership(team.uuid)"
+              />
+            </span>
+            <actionable-list-group-item
+              :add-icon="true"
+              v-on:actionClicked="
+                $root.$emit('bv::show::modal', 'selectTeamModal')
+              "
+            />
+          </div>
+        </b-form-group>
+        <b-form-group :label="this.$t('admin.permissions')">
+          <div class="list-group">
+            <span v-for="permission in permissions" :key="permission.name">
+              <actionable-list-group-item
+                :value="permission.name"
+                :delete-icon="true"
+                v-on:actionClicked="removePermission(permission)"
+              />
+            </span>
+            <actionable-list-group-item
+              :add-icon="true"
+              v-on:actionClicked="
+                $root.$emit('bv::show::modal', 'selectPermissionModal')
+              "
+            />
+          </div>
+        </b-form-group>
+      </b-col>
+      <b-col sm="6">
+        <div style="text-align: right">
+          <b-button variant="outline-danger" @click="deleteUser">{{
+            $t('admin.delete_user')
+          }}</b-button>
+        </div>
+      </b-col>
+    </b-row>
+    <b-row class="expanded-row p-3" colspan="2">
+      <div class="" style="width: 100%">
+        <div v-if="loading" class="d-flex justify-content-center">
+          <b-spinner variant="primary" type="grow" label="Loading"
+            >Loading ...
+          </b-spinner>
+        </div>
+        <div v-else>
+          <label for="">{{ this.$t('message.projects') }}</label>
+          <user-roles-table
+            :parentContext="{ row, index }"
+            :projectRoles="projectRoles"
+            :availableRoles="availableRoles"
+            @addProjectRole="addProjectRole"
+            @updateProjectRole="updateProjectRole"
+            @removeProjectRole="removeProjectRole"
+          />
+        </div>
+      </div>
+    </b-row>
+    <select-team-modal
+      :currentTeams="teams"
+      v-on:selection="updateTeamSelection"
+    />
+    <select-permission-modal
+      :currentPermissions="permissions"
+      v-on:selection="updatePermissionSelection"
+    />
+  </div>
+</template>
+<script>
+import i18n from '../../../../i18n';
+import permissionsMixin from '../../../../mixins/permissionsMixin';
+import userManagementMixin from '../../../../mixins/userManagementMixin';
+import ActionableListGroupItem from '../../../components/ActionableListGroupItem.vue';
+import UserRolesTable from '../../../components/UserRolesTable.vue';
+import SelectPermissionModal from '../SelectPermissionModal.vue';
+import SelectTeamModal from '../SelectTeamModal.vue';
+
+export default {
+  i18n,
+  props: {
+    index: { type: Number, required: true },
+    row: { type: Object, required: true },
+    rowEvents: { update: { type: String }, delete: { type: String } },
+  },
+  mixins: [permissionsMixin, userManagementMixin],
+  components: {
+    ActionableListGroupItem,
+    SelectTeamModal,
+    SelectPermissionModal,
+    UserRolesTable,
+  },
+  data() {
+    return {
+      username: this.row.username,
+      teams: this.row.teams,
+      permissions: this.row.permissions,
+      projectRoles: null,
+      availableRoles: null,
+      loading: true,
+    };
+  },
+  mounted() {
+    // Fetch user projects and available roles for each project (userManagementMixin)
+    Promise.all([
+      this.loadUserProjects(this.username),
+      this.loadAvailableProjectRoles(),
+    ])
+      .then((response) => {
+        this.projectRoles = response[0] || [];
+        this.availableRoles = response[1] || [];
+      })
+      .catch((error) => {
+        if (!this.axios.isAxiosError(error)) console.error(error);
+        this.$toastr.e(this.$t('condition.unsuccessful_action'));
+      })
+      .finally(() => {
+        this.loading = false;
+      });
+  },
+  methods: {
+    deleteUser: function () {
+      const endpoint = `${this.$api.BASE_URL}/${this.$api.URL_USER_OIDC}`;
+      this._deleteUser(endpoint);
+    },
+
+    updateTeamSelection: function (selections) {
+      this._updateTeamSelection(selections);
+    },
+
+    removeTeamMembership: function (teamUUID) {
+      this._removeTeamMembership(teamUUID);
+    },
+
+    updatePermissionSelection: function (selections) {
+      this._updatePermissionSelection(selections);
+    },
+
+    removePermission: function (permission) {
+      this._removePermission(permission);
+    },
+
+    addProjectRole: function (projectRole, callbacks) {
+      this._handleProjectRole('add', projectRole, callbacks).then(async () => {
+        this.projectRoles = await this.loadUserProjects(this.username);
+      });
+    },
+
+    updateProjectRole: function (projectRole, callbacks) {
+      this._handleProjectRole('update', projectRole, callbacks);
+    },
+
+    removeProjectRole: function (projectRole, callbacks) {
+      this._handleProjectRole('remove', projectRole, callbacks).then(
+        async () => {
+          this.projectRoles = await this.loadUserProjects(this.username);
+        },
+      );
+    },
+  },
+};
+</script>
diff --git a/src/views/administration/accessmanagement/OidcUsers/index.vue b/src/views/administration/accessmanagement/OidcUsers/index.vue
new file mode 100644
index 000000000..804c4a867
--- /dev/null
+++ b/src/views/administration/accessmanagement/OidcUsers/index.vue
@@ -0,0 +1,135 @@
+<template>
+  <b-card no-body :header="header">
+    <b-card-body>
+      <div id="customToolbar">
+        <b-button
+          size="md"
+          variant="outline-primary"
+          v-b-modal.createOidcUserModal
+        >
+          <span class="fa fa-plus"></span> {{ $t('admin.create_user') }}
+        </b-button>
+      </div>
+      <bootstrap-table
+        ref="table"
+        :columns="columns"
+        :data="data"
+        :options="options"
+      >
+      </bootstrap-table>
+    </b-card-body>
+    <create-oidc-user-modal v-on:refreshTable="refreshTable" />
+  </b-card>
+</template>
+
+<script>
+import xssFilters from 'xss-filters';
+import common from '../../../../shared/common';
+import CreateOidcUserModal from '../CreateOidcUserModal';
+import bootstrapTableMixin from '../../../../mixins/bootstrapTableMixin';
+import EventBus from '../../../../shared/eventbus';
+import UserDetails from './UserDetails.vue';
+import i18n from '../../../../i18n';
+
+export default {
+  name: 'OidcUsersView',
+  i18n,
+  props: {
+    header: String,
+  },
+  mixins: [bootstrapTableMixin],
+  components: {
+    CreateOidcUserModal,
+  },
+  mounted() {
+    EventBus.$on(this.rowEvents.update, (index, row) => {
+      this.$refs.table.updateRow({ index, row });
+      this.$refs.table.expandRow(index);
+    });
+    EventBus.$on(this.rowEvents.delete, () => {
+      this.refreshTable();
+    });
+  },
+  beforeDestroy() {
+    EventBus.$off(this.rowEvents.update);
+    EventBus.$off(this.rowEvents.delete);
+  },
+  data() {
+    return {
+      rowEvents: {
+        update: 'admin:oidcusers:rowUpdate',
+        delete: 'admin:oidcusers:rowDeleted',
+      },
+      columns: [
+        {
+          title: this.$t('message.username'),
+          field: 'username',
+          sortable: false,
+          formatter(value) {
+            return xssFilters.inHTMLData(common.valueWithDefault(value, ''));
+          },
+        },
+        {
+          title: this.$t('admin.subject_identifier'),
+          field: 'subjectIdentifier',
+          sortable: false,
+          formatter(value) {
+            return xssFilters.inHTMLData(common.valueWithDefault(value, ''));
+          },
+        },
+        {
+          title: this.$t('admin.teams'),
+          field: 'teams',
+          sortable: false,
+          formatter(value) {
+            return value
+              ? xssFilters.inHTMLData(
+                  common.valueWithDefault(value.length, '0'),
+                )
+              : 0;
+          },
+        },
+      ],
+      data: [],
+      options: {
+        search: true,
+        showColumns: true,
+        showRefresh: true,
+        pagination: true,
+        silentSort: false,
+        sidePagination: 'client',
+        queryParamsType: 'pageSize',
+        pageList: '[10, 25, 50, 100]',
+        pageSize: 10,
+        icons: {
+          refresh: 'fa-refresh',
+        },
+        detailView: true,
+        detailViewIcon: false,
+        detailViewByClick: true,
+        detailFormatter: (index, row) => {
+          return this.vueFormatter({
+            render: () => (
+              <UserDetails row={row} index={index} rowEvents={this.rowEvents} />
+            ),
+          });
+        },
+        onExpandRow: this.vueFormatterInit,
+        toolbar: '#customToolbar',
+        responseHandler: function (res, xhr) {
+          res.total = xhr.getResponseHeader('X-Total-Count');
+          return res;
+        },
+        url: `${this.$api.BASE_URL}/${this.$api.URL_USER_OIDC}`,
+      },
+    };
+  },
+  methods: {
+    refreshTable: function () {
+      this.$refs.table.refresh({
+        silent: true,
+      });
+    },
+  },
+};
+</script>
diff --git a/src/views/administration/accessmanagement/Roles/RoleDetails.vue b/src/views/administration/accessmanagement/Roles/RoleDetails.vue
new file mode 100644
index 000000000..15bbb0f19
--- /dev/null
+++ b/src/views/administration/accessmanagement/Roles/RoleDetails.vue
@@ -0,0 +1,146 @@
+<template>
+  <b-row class="expanded-row">
+    <b-col sm="6">
+      <b-input-group-form-input
+        id="input-role-name"
+        :label="$t('admin.role_name')"
+        input-group-size="mb-3"
+        required="true"
+        type="text"
+        v-model="name"
+        lazy="true"
+        autofocus="true"
+        v-debounce:750ms="updateRole"
+        :debounce-events="'keyup'"
+      />
+      <b-form-group :label="this.$t('admin.permissions')">
+        <div class="list-group">
+          <span v-for="permission in permissions" :key="permission.name">
+            <actionable-list-group-item
+              :value="permission.name"
+              :delete-icon="true"
+              v-on:actionClicked="removePermission(permission)"
+            />
+          </span>
+          <actionable-list-group-item
+            :add-icon="true"
+            v-on:actionClicked="
+              $root.$emit('bv::show::modal', 'selectPermissionModal')
+            "
+          />
+        </div>
+      </b-form-group>
+    </b-col>
+    <b-col sm="6">
+      <div style="text-align: right">
+        <b-button variant="outline-danger" @click="deleteRole">{{
+          $t('admin.delete_role')
+        }}</b-button>
+      </div>
+    </b-col>
+    <select-permission-modal
+      :currentPermissions="permissions"
+      v-on:selection="updatePermissionSelection"
+    />
+  </b-row>
+</template>
+<script>
+import ActionableListGroupItem from '../../../components/ActionableListGroupItem';
+import permissionsMixin from '../../../../mixins/permissionsMixin';
+import BInputGroupFormInput from '../../../../forms/BInputGroupFormInput';
+import SelectPermissionModal from '../SelectPermissionModal';
+import i18n from '../../../../i18n';
+import EventBus from '../../../../shared/eventbus';
+export default {
+  props: {
+    index: { type: Number, required: true },
+    row: { type: Object, required: true },
+    rowEvents: { update: { type: String }, delete: { type: String } },
+  },
+  i18n,
+  mixins: [permissionsMixin],
+  components: {
+    ActionableListGroupItem,
+    SelectPermissionModal,
+    BInputGroupFormInput,
+  },
+  data() {
+    return {
+      role: this.row,
+      name: this.row.name,
+      permissions: this.row.permissions,
+      labelIcon: {
+        dataOn: '\u2713',
+        dataOff: '\u2715',
+      },
+    };
+  },
+  methods: {
+    updateRole: function () {
+      let url = `${this.$api.BASE_URL}/${this.$api.URL_ROLE}`;
+      this.axios
+        .post(url, {
+          uuid: this.role.uuid,
+          name: this.name,
+        })
+        .then((response) => {
+          // this.role = response.data;
+          EventBus.$emit(this.rowEvents.update, this.index, response.data);
+          this.$toastr.s(this.$t('message.updated'));
+        })
+        .catch(() => {
+          this.$toastr.w(this.$t('condition.unsuccessful_action'));
+        });
+    },
+    deleteRole: function () {
+      let url = `${this.$api.BASE_URL}/${this.$api.URL_ROLE}/${this.role.uuid}`;
+      this.axios
+        .delete(url)
+        .then(() => {
+          EventBus.$emit(this.rowEvents.delete, this.index);
+          this.$toastr.s(this.$t('admin.role_deleted'));
+        })
+        .catch(() => {
+          this.$toastr.w(this.$t('condition.unsuccessful_action'));
+        });
+    },
+    updatePermissionSelection: function (selections) {
+      this.$root.$emit('bv::hide::modal', 'selectPermissionModal');
+      for (let i = 0; i < selections.length; i++) {
+        let selection = selections[i];
+        let url = `${this.$api.BASE_URL}/${this.$api.URL_PERMISSION}/${selection.name}/role/${this.role.uuid}`;
+        this.axios
+          .post(url)
+          .then((response) => {
+            this.syncVariables(response.data);
+            this.$toastr.s(this.$t('message.updated'));
+          })
+          .catch((error) => {
+            if (error.response.status === 304) {
+              //this.$toastr.w(this.$t('condition.unsuccessful_action'));
+            } else {
+              this.$toastr.w(this.$t('condition.unsuccessful_action'));
+            }
+          });
+      }
+    },
+    removePermission: function (permission) {
+      let url = `${this.$api.BASE_URL}/${this.$api.URL_PERMISSION}/${permission.name}/role/${this.role.uuid}`;
+      this.axios
+        .delete(url)
+        .then((response) => {
+          // this.syncVariables(response.data);
+          EventBus.$emit(this.rowEvents.delete, this.index, response.data);
+          this.$toastr.s(this.$t('message.updated'));
+        })
+        .catch(() => {
+          this.$toastr.w(this.$t('condition.unsuccessful_action'));
+        });
+    },
+    syncVariables: function (role) {
+      this.role = role;
+      this.permissions = role.permissions;
+    },
+  },
+};
+</script>
diff --git a/src/views/administration/accessmanagement/Roles/index.vue b/src/views/administration/accessmanagement/Roles/index.vue
new file mode 100644
index 000000000..92cb91b76
--- /dev/null
+++ b/src/views/administration/accessmanagement/Roles/index.vue
@@ -0,0 +1,122 @@
+<template>
+  <b-card no-body :header="header">
+    <b-card-body>
+      <div id="customToolbar">
+        <b-button size="md" variant="outline-primary" v-b-modal.createRoleModal>
+          <span class="fa fa-plus"></span> {{ $t('admin.create_role') }}
+        </b-button>
+      </div>
+      <bootstrap-table
+        ref="table"
+        :columns="columns"
+        :data="data"
+        :options="options"
+      >
+      </bootstrap-table>
+    </b-card-body>
+    <create-role-modal v-on:refreshTable="refreshTable" />
+  </b-card>
+</template>
+
+<script>
+import xssFilters from 'xss-filters';
+import common from '../../../../shared/common';
+import CreateRoleModal from '../CreateRoleModal';
+import bootstrapTableMixin from '../../../../mixins/bootstrapTableMixin';
+import EventBus from '../../../../shared/eventbus';
+import configPropertyMixin from '../../mixins/configPropertyMixin';
+import RoleDetails from './RoleDetails.vue';
+
+export default {
+  name: 'RolesView',
+  props: {
+    header: String,
+  },
+  mixins: [bootstrapTableMixin, configPropertyMixin],
+  components: {
+    CreateRoleModal,
+  },
+  mounted() {
+    EventBus.$on(this.rowEvents.update, (index, row) => {
+      this.$refs.table.updateRow({ index, row });
+      this.$refs.table.expandRow(index);
+    });
+    EventBus.$on(this.rowEvents.delete, () => {
+      this.refreshTable();
+    });
+  },
+  beforeDestroy() {
+    EventBus.$off(this.rowEvents.delete);
+    EventBus.$off(this.rowEvents.update);
+  },
+  data() {
+    return {
+      labelIcon: {
+        dataOn: '\u2713',
+        dataOff: '\u2715',
+      },
+      rowEvents: {
+        update: 'admin:roles:rowUpdate',
+        delete: 'admin:roles:rowDeleted',
+      },
+      columns: [
+        {
+          title: this.$t('admin.role_name'),
+          field: 'name',
+          sortable: false,
+          formatter(value) {
+            return xssFilters.inHTMLData(common.valueWithDefault(value, ''));
+          },
+        },
+        {
+          title: this.$t('admin.permissions'),
+          field: 'permissions',
+          sortable: false,
+          formatter(value, row) {
+            return value ? row.permissions.length : 0;
+          },
+        },
+      ],
+      data: [],
+      options: {
+        search: true,
+        showColumns: true,
+        showRefresh: true,
+        pagination: true,
+        silentSort: false,
+        sidePagination: 'client',
+        queryParamsType: 'pageSize',
+        pageList: '[10, 25, 50, 100]',
+        pageSize: 10,
+        icons: {
+          refresh: 'fa-refresh',
+        },
+        detailView: true,
+        detailViewIcon: false,
+        detailViewByClick: true,
+        detailFormatter: (index, row) => {
+          return this.vueFormatter({
+            render: () => (
+              <RoleDetails index={index} row={row} rowEvents={this.rowEvents} />
+            ),
+          });
+        },
+        onExpandRow: this.vueFormatterInit,
+        toolbar: '#customToolbar',
+        responseHandler: function (res, xhr) {
+          res.total = xhr.getResponseHeader('X-Total-Count');
+          return res;
+        },
+        url: `${this.$api.BASE_URL}/${this.$api.URL_ROLE}`,
+      },
+    };
+  },
+  methods: {
+    refreshTable: function () {
+      this.$refs.table.refresh({
+        silent: true,
+      });
+    },
+  },
+};
+</script>
diff --git a/src/views/administration/accessmanagement/SelectLdapGroupModal.vue b/src/views/administration/accessmanagement/SelectLdapGroupModal.vue
index 0bddd2f97..9ac278a5c 100644
--- a/src/views/administration/accessmanagement/SelectLdapGroupModal.vue
+++ b/src/views/administration/accessmanagement/SelectLdapGroupModal.vue
@@ -62,7 +62,7 @@ export default {
         showRefresh: true,
         pagination: true,
         silentSort: false,
-        sidePagination: 'server',
+        sidePagination: 'client',
         queryParamsType: 'pageSize',
         pageList: '[10, 25, 50, 100]',
         pageSize: 10,
diff --git a/src/views/administration/accessmanagement/SelectOidcGroupModal.vue b/src/views/administration/accessmanagement/SelectOidcGroupModal.vue
index aa51adde9..c681f453b 100644
--- a/src/views/administration/accessmanagement/SelectOidcGroupModal.vue
+++ b/src/views/administration/accessmanagement/SelectOidcGroupModal.vue
@@ -62,7 +62,7 @@ export default {
         showRefresh: true,
         pagination: true,
         silentSort: false,
-        sidePagination: 'server',
+        sidePagination: 'client',
         queryParamsType: 'pageSize',
         pageList: '[10, 25, 50, 100]',
         pageSize: 10,
diff --git a/src/views/administration/accessmanagement/SelectPermissionModal.vue b/src/views/administration/accessmanagement/SelectPermissionModal.vue
index af05258b3..ec9a216f0 100644
--- a/src/views/administration/accessmanagement/SelectPermissionModal.vue
+++ b/src/views/administration/accessmanagement/SelectPermissionModal.vue
@@ -3,7 +3,6 @@
     id="selectPermissionModal"
     size="lg"
     hide-header-close
-    no-stacking
     :title="$t('admin.select_permission')"
   >
     <bootstrap-table
@@ -20,7 +19,8 @@
       <b-button
         size="md"
         variant="primary"
-        @click="$emit('selection', $refs.table.getSelections())"
+        :disabled="selectionHasChanged"
+        @click="handleSelection"
         >{{ $t('message.select') }}</b-button
       >
     </template>
@@ -29,33 +29,35 @@
 
 <script>
 import xssFilters from 'xss-filters';
-import permissionsMixin from '../../../mixins/permissionsMixin';
 import common from '../../../shared/common';
 
 export default {
-  mixins: [permissionsMixin],
+  mixins: [],
+  props: {
+    currentPermissions: {
+      type: Array,
+      default: () => [],
+    },
+  },
   data() {
     return {
-      labelIcon: {
-        dataOn: '\u2713',
-        dataOff: '\u2715',
-      },
+      currentSelection: [],
       columns: [
         {
           field: 'state',
-          checkbox: true,
+          checkbox: true, // Enable checkboxes
           align: 'center',
         },
         {
           title: this.$t('message.name'),
           field: 'name',
           sortable: true,
-          formatter(value, row, index) {
+          formatter(value) {
             return xssFilters.inHTMLData(common.valueWithDefault(value, ''));
           },
         },
       ],
-      data: [],
+      data: [], // retrieved list of addable permissions
       options: {
         search: true,
         showColumns: true,
@@ -75,8 +77,56 @@ export default {
           return res;
         },
         url: `${this.$api.BASE_URL}/${this.$api.URL_PERMISSION}`,
+        onLoadSuccess: () => {
+          // when the addable permissions load
+          const mappedPermissions = this.currentPermissions.map(
+            (perm) => perm.name,
+          );
+          this.$refs.table.checkBy({
+            field: 'name',
+            values: mappedPermissions,
+          });
+        },
+        onCheck: this.updateCurrentSelection,
+        onUncheck: this.updateCurrentSelection,
+        onCheckAll: this.updateCurrentSelection,
+        onUncheckAll: this.updateCurrentSelection,
       },
     };
   },
+  computed: {
+    selectionHasChanged() {
+      if (
+        this.currentSelection.length === 0 &&
+        this.currentPermissions.length === 0
+      ) {
+        return true;
+      }
+
+      if (this.currentSelection.length !== this.currentPermissions.length) {
+        return false;
+      }
+
+      const isEqual = this.currentSelection.every((sel) =>
+        this.currentPermissions.some((team) => team.name === sel.name),
+      );
+
+      return (
+        isEqual &&
+        this.currentPermissions.every((team) =>
+          this.currentSelection.some((sel) => sel.name === team.name),
+        )
+      );
+    },
+  },
+  methods: {
+    handleSelection: function () {
+      this.$root.$emit('bv::hide::modal', this.$children[0].id);
+      this.$emit('selection', this.currentSelection);
+    },
+    updateCurrentSelection() {
+      this.currentSelection = this.$refs.table.getSelections();
+    },
+  },
 };
 </script>
diff --git a/src/views/administration/accessmanagement/SelectTeamModal.vue b/src/views/administration/accessmanagement/SelectTeamModal.vue
index 8f55252a2..d6169f778 100644
--- a/src/views/administration/accessmanagement/SelectTeamModal.vue
+++ b/src/views/administration/accessmanagement/SelectTeamModal.vue
@@ -20,7 +20,8 @@
       <b-button
         size="md"
         variant="primary"
-        @click="$emit('selection', $refs.table.getSelections())"
+        :disabled="selectionHasChanged"
+        @click="handleSelection"
         >{{ $t('message.select') }}</b-button
       >
     </template>
@@ -33,9 +34,16 @@ import permissionsMixin from '../../../mixins/permissionsMixin';
 import common from '../../../shared/common';
 
 export default {
+  props: {
+    currentTeams: {
+      type: Array,
+      default: () => [],
+    },
+  },
   mixins: [permissionsMixin],
   data() {
     return {
+      currentSelection: [],
       labelIcon: {
         dataOn: '\u2713',
         dataOff: '\u2715',
@@ -50,7 +58,7 @@ export default {
           title: this.$t('admin.team_name'),
           field: 'name',
           sortable: true,
-          formatter(value, row, index) {
+          formatter(value) {
             return xssFilters.inHTMLData(common.valueWithDefault(value, ''));
           },
         },
@@ -74,8 +82,54 @@ export default {
           return res;
         },
         url: `${this.$api.BASE_URL}/${this.$api.URL_TEAM}`,
+        onLoadSuccess: () => {
+          const preSelected = this.currentTeams.map((team) => team.name);
+          this.$refs.table.checkBy({
+            field: 'name',
+            values: preSelected,
+          });
+        },
+        onCheck: this.updateCurrentSelection,
+        onUncheck: this.updateCurrentSelection,
+        onCheckAll: this.updateCurrentSelection,
+        onUncheckAll: this.updateCurrentSelection,
       },
     };
   },
+  computed: {
+    selectionHasChanged() {
+      if (
+        this.currentSelection.length === 0 &&
+        this.currentTeams.length === 0
+      ) {
+        return true;
+      }
+
+      if (this.currentSelection.length !== this.currentTeams.length) {
+        return false;
+      }
+
+      const isEqual = this.currentSelection.every((sel) =>
+        this.currentTeams.some((team) => team.name === sel.name),
+      );
+
+      return (
+        isEqual &&
+        this.currentTeams.every((team) =>
+          this.currentSelection.some((sel) => sel.name === team.name),
+        )
+      );
+    },
+  },
+  methods: {
+    handleSelection: function () {
+      // this.$root.$emit('bv::hide::modal', this.$children[0].id);
+      this.$bvModal.hide('selectTeamModal');
+      this.$emit('selection', this.currentSelection);
+    },
+    updateCurrentSelection() {
+      this.currentSelection = this.$refs.table.getSelections();
+    },
+  },
 };
 </script>
diff --git a/src/views/administration/accessmanagement/Teams.vue b/src/views/administration/accessmanagement/Teams.vue
deleted file mode 100644
index c5acc1341..000000000
--- a/src/views/administration/accessmanagement/Teams.vue
+++ /dev/null
@@ -1,566 +0,0 @@
-<template>
-  <b-card no-body :header="header">
-    <b-card-body>
-      <div id="customToolbar">
-        <b-button size="md" variant="outline-primary" v-b-modal.createTeamModal>
-          <span class="fa fa-plus"></span> {{ $t('admin.create_team') }}
-        </b-button>
-      </div>
-      <bootstrap-table
-        ref="table"
-        :columns="columns"
-        :data="data"
-        :options="options"
-      >
-      </bootstrap-table>
-    </b-card-body>
-    <create-team-modal v-on:refreshTable="refreshTable" />
-  </b-card>
-</template>
-
-<script>
-import xssFilters from 'xss-filters';
-import common from '../../../shared/common';
-import i18n from '../../../i18n';
-import CreateTeamModal from './CreateTeamModal';
-import bootstrapTableMixin from '../../../mixins/bootstrapTableMixin';
-import EventBus from '../../../shared/eventbus';
-import ActionableListGroupItem from '../../components/ActionableListGroupItem';
-import ApiKeyListGroupItem from './ApiKeyListGroupItem.vue';
-import SelectLdapGroupModal from './SelectLdapGroupModal';
-import SelectOidcGroupModal from './SelectOidcGroupModal';
-import SelectPermissionModal from './SelectPermissionModal';
-import permissionsMixin from '../../../mixins/permissionsMixin';
-import { Switch as cSwitch } from '@coreui/vue';
-import BInputGroupFormInput from '../../../forms/BInputGroupFormInput';
-
-export default {
-  props: {
-    header: String,
-  },
-  mixins: [bootstrapTableMixin],
-  components: {
-    CreateTeamModal,
-  },
-  mounted() {
-    EventBus.$on('admin:teams:rowUpdate', (index, row) => {
-      this.$refs.table.updateRow({ index: index, row: row });
-      this.$refs.table.expandRow(index);
-    });
-    EventBus.$on('admin:teams:rowDeleted', (index, row) => {
-      this.refreshTable();
-    });
-  },
-  beforeDestroy() {
-    EventBus.$off('admin:teams:rowUpdate');
-    EventBus.$off('admin:teams:rowDeleted');
-  },
-  data() {
-    return {
-      columns: [
-        {
-          title: this.$t('admin.team_name'),
-          field: 'name',
-          sortable: false,
-          formatter(value, row, index) {
-            return xssFilters.inHTMLData(common.valueWithDefault(value, ''));
-          },
-        },
-        {
-          title: this.$t('admin.api_keys'),
-          field: 'apiKeys',
-          sortable: false,
-          formatter(value, row, index) {
-            return value
-              ? xssFilters.inHTMLData(
-                  common.valueWithDefault(value.length, '0'),
-                )
-              : 0;
-          },
-        },
-        {
-          title: this.$t('admin.members'),
-          field: 'members',
-          sortable: false,
-          formatter(value, row, index) {
-            let count = 0;
-            if (row.managedUsers) {
-              count += row.managedUsers.length;
-            }
-            if (row.ldapUsers) {
-              count += row.ldapUsers.length;
-            }
-            if (row.oidcUsers) {
-              count += row.oidcUsers.length;
-            }
-            return count;
-          },
-        },
-      ],
-      data: [],
-      options: {
-        search: true,
-        showColumns: true,
-        showRefresh: true,
-        pagination: true,
-        silentSort: false,
-        sidePagination: 'client',
-        queryParamsType: 'pageSize',
-        pageList: '[10, 25, 50, 100]',
-        pageSize: 10,
-        icons: {
-          refresh: 'fa-refresh',
-        },
-        detailView: true,
-        detailViewIcon: false,
-        detailViewByClick: true,
-        detailFormatter: (index, row) => {
-          return this.vueFormatter({
-            i18n,
-            template: `
-                <b-row class="expanded-row">
-                  <b-col sm="6">
-                    <b-input-group-form-input id="input-team-name" :label="$t('admin.team_name')" input-group-size="mb-3"
-                                              required="true" type="text" v-model="name" lazy="true" autofocus="true"
-                                              v-debounce:750ms="updateTeam" :debounce-events="'keyup'" />
-                    <b-form-group :label="this.$t('admin.api_keys')">
-                      <div class="list-group">
-                        <span v-for="key in sortedApiKeys">
-                          <api-key-list-group-item :team-uuid="team.uuid" :api-key="apiKeys[key]" :delete-icon="true" v-on:removeClicked="removeApiKey(apiKeys[key])" v-on:regenerateClicked="regenerateApiKey(apiKeys[key])"/>
-                        </span>
-                        <actionable-list-group-item :add-icon="true" v-on:actionClicked="createApiKey()" :tooltip="$t('admin.new_api_key_title')"/>
-                      </div>
-                    </b-form-group>
-                    <b-form-group :label="this.$t('admin.permissions')">
-                      <div class="list-group">
-                        <span v-for="permission in permissions">
-                          <actionable-list-group-item :value="permission.name" :delete-icon="true" v-on:actionClicked="removePermission(permission)"/>
-                        </span>
-                        <actionable-list-group-item :add-icon="true" v-on:actionClicked="$root.$emit('bv::show::modal', 'selectPermissionModal')"/>
-                      </div>
-                    </b-form-group>
-                    <b-form-group :label="this.$t('admin.mapped_ldap_groups')">
-                      <div class="list-group">
-                        <span v-for="ldapGroup in ldapGroups">
-                          <actionable-list-group-item :value="ldapGroup.dn" :delete-icon="true" v-on:actionClicked="removeLdapGroupMapping(ldapGroup.uuid)"/>
-                        </span>
-                        <actionable-list-group-item :add-icon="true" v-on:actionClicked="$root.$emit('bv::show::modal', 'selectLdapGroupModal')"/>
-                      </div>
-                    </b-form-group>
-                    <b-form-group :label="this.$t('admin.mapped_oidc_groups')">
-                      <div class="list-group">
-                        <span v-for="mappedOidcGroup in mappedOidcGroups">
-                          <actionable-list-group-item :value="mappedOidcGroup.group.name" :delete-icon="true" v-on:actionClicked="removeOidcGroupMapping(mappedOidcGroup.uuid)"/>
-                        </span>
-                        <actionable-list-group-item :add-icon="true" v-on:actionClicked="$root.$emit('bv::show::modal', 'selectOidcGroupModal')"/>
-                      </div>
-                    </b-form-group>
-                  </b-col>
-                  <b-col sm="6">
-                    <b-form-group v-if="managedUsers && managedUsers.length > 0" :label="this.$t('admin.managed_users')">
-                      <div class="list-group">
-                        <span v-for="managedUser in managedUsers">
-                          <actionable-list-group-item :value="managedUser.username" :delete-icon="true" v-on:actionClicked="removeUser(managedUser)"/>
-                        </span>
-                      </div>
-                    </b-form-group>
-                    <b-form-group v-if="ldapUsers && ldapUsers.length > 0"  :label="this.$t('admin.ldap_users')">
-                      <div class="list-group">
-                        <span v-for="ldapUser in ldapUsers">
-                          <actionable-list-group-item :value="ldapUser.username" :delete-icon="true" v-on:actionClicked="removeUser(ldapUser)"/>
-                        </span>
-                      </div>
-                    </b-form-group>
-                    <b-form-group v-if="oidcUsers && oidcUsers.length > 0"  :label="this.$t('admin.oidc_users')">
-                      <div class="list-group">
-                        <span v-for="oidcUser in oidcUsers">
-                          <actionable-list-group-item :value="oidcUser.username" :delete-icon="true" v-on:actionClicked="removeUser(oidcUser)"/>
-                        </span>
-                      </div>
-                    </b-form-group>
-                    <div style="text-align:right">
-                       <b-button variant="outline-danger" @click="deleteTeam">{{ $t('admin.delete_team') }}</b-button>
-                    </div>
-                  </b-col>
-                  <select-permission-modal v-on:selection="updatePermissionSelection" />
-                  <select-ldap-group-modal v-on:selection="updateLdapGroupSelection" />
-                  <select-oidc-group-modal v-on:selection="updateOidcGroupSelection" />
-                </b-row>
-              `,
-            mixins: [permissionsMixin],
-            components: {
-              cSwitch,
-              ActionableListGroupItem,
-              ApiKeyListGroupItem,
-              SelectLdapGroupModal,
-              SelectOidcGroupModal,
-              SelectPermissionModal,
-              BInputGroupFormInput,
-            },
-            data() {
-              return {
-                team: row,
-                name: row.name,
-                apiKeys: this.apiKeysToDict(row.apiKeys),
-                permissions: row.permissions,
-                ldapGroups: row.mappedLdapGroups,
-                mappedOidcGroups: row.mappedOidcGroups,
-                managedUsers: row.managedUsers,
-                ldapUsers: row.ldapUsers,
-                oidcUsers: row.oidcUsers,
-                labelIcon: {
-                  dataOn: '\u2713',
-                  dataOff: '\u2715',
-                },
-              };
-            },
-            computed: {
-              sortedApiKeys() {
-                return Object.keys(this.apiKeys).sort((a, b) => {
-                  return (
-                    new Date(this.apiKeys[a].created) -
-                    new Date(this.apiKeys[b].created)
-                  );
-                });
-              },
-            },
-            methods: {
-              apiKeysToDict: function (apiKeys) {
-                const dict = {};
-                apiKeys.forEach((item) => {
-                  dict[item.publicId] = item;
-                });
-                return dict;
-              },
-              updateTeam: function () {
-                let url = `${this.$api.BASE_URL}/${this.$api.URL_TEAM}`;
-                this.axios
-                  .post(url, {
-                    uuid: this.team.uuid,
-                    name: this.name,
-                  })
-                  .then((response) => {
-                    this.team = response.data;
-                    EventBus.$emit('admin:teams:rowUpdate', index, this.team);
-                    this.$toastr.s(this.$t('message.updated'));
-                  })
-                  .catch((error) => {
-                    this.$toastr.w(this.$t('condition.unsuccessful_action'));
-                  });
-              },
-              deleteTeam: function () {
-                let url = `${this.$api.BASE_URL}/${this.$api.URL_TEAM}`;
-                this.axios
-                  .delete(url, {
-                    data: {
-                      uuid: this.team.uuid,
-                    },
-                  })
-                  .then((response) => {
-                    EventBus.$emit('admin:teams:rowDeleted', index);
-                    this.$toastr.s(this.$t('admin.team_deleted'));
-                  })
-                  .catch((error) => {
-                    this.$toastr.w(this.$t('condition.unsuccessful_action'));
-                  });
-              },
-              popup: function (title, message, key) {
-                const h = this.$createElement;
-                const titleVNode = h('div', {
-                  domProps: { innerHTML: title },
-                });
-                const messageVNode = h('div', { class: ['foobar'] }, [
-                  h('p', { class: ['text-center'] }, [message]),
-                  h(
-                    'pre',
-                    {
-                      class: [
-                        'b-input-group-form-input',
-                        'text-white',
-                        'plaintext',
-                      ],
-                      style: { overflowX: 'auto' },
-                    },
-                    key,
-                  ),
-                ]);
-                this.$bvModal.msgBoxOk([messageVNode], {
-                  title: [titleVNode],
-                  buttonSize: 'sm',
-                  centered: true,
-                  size: 'md',
-                  footerClass: 'd-flex justify-content-center',
-                  bodyClass: 'd-flex flex-column align-items-center',
-                });
-              },
-              createApiKey() {
-                let url = `${this.$api.BASE_URL}/${this.$api.URL_TEAM}/${this.team.uuid}/key`;
-                this.axios
-                  .put(url)
-                  .then((response) => {
-                    if (!this.apiKeys) {
-                      this.apiKeys = {};
-                    }
-                    this.$set(
-                      this.apiKeys,
-                      response.data.publicId,
-                      response.data,
-                    );
-                    this.popup(
-                      this.$t('admin.new_api_key_title'),
-                      this.$t('admin.new_api_key'),
-                      response.data.key,
-                    );
-                    this.$toastr.s(this.$t('message.updated'));
-                  })
-                  .catch((error) => {
-                    console.error(error);
-                    this.$toastr.w(this.$t('condition.unsuccessful_action'));
-                  });
-              },
-              regenerateApiKey: function (apiKey) {
-                let url = `${this.$api.BASE_URL}/${this.$api.URL_TEAM}/key/${apiKey.publicId}`;
-                this.axios
-                  .post(url)
-                  .then((response) => {
-                    this.$delete(this.apiKeys, apiKey.publicId);
-                    this.$set(
-                      this.apiKeys,
-                      response.data.publicId,
-                      response.data,
-                    );
-                    this.popup(
-                      this.$t('admin.regenerate_api_key_title'),
-                      this.$t('admin.regenerate_api_key'),
-                      response.data.key,
-                    );
-                    this.$toastr.s(this.$t('message.updated'));
-                  })
-                  .catch((error) => {
-                    console.error(error);
-                    this.$toastr.w(this.$t('condition.unsuccessful_action'));
-                  });
-              },
-              removeApiKey: function (apiKey) {
-                let url = `${this.$api.BASE_URL}/${this.$api.URL_TEAM}/key/${apiKey.publicId}`;
-                this.axios
-                  .delete(url)
-                  .then((response) => {
-                    this.$delete(this.apiKeys, apiKey.publicId);
-                    this.$toastr.s(this.$t('message.updated'));
-                  })
-                  .catch((error) => {
-                    console.error(error);
-                    this.$toastr.w(this.$t('condition.unsuccessful_action'));
-                  });
-              },
-              updateLdapGroupSelection: function (selections) {
-                this.$root.$emit('bv::hide::modal', 'selectLdapGroupModal');
-                for (let i = 0; i < selections.length; i++) {
-                  let selection = selections[i];
-                  let url = `${this.$api.BASE_URL}/${this.$api.URL_LDAP_MAPPING}`;
-                  this.axios
-                    .put(url, {
-                      team: this.team.uuid,
-                      dn: selection.dn,
-                    })
-                    .then((response) => {
-                      if (
-                        this.ldapGroups === undefined ||
-                        this.ldapGroups === null
-                      ) {
-                        this.ldapGroups = [];
-                      }
-                      this.ldapGroups.push(response.data);
-                      this.ldapGroups.sort();
-                      this.$toastr.s(this.$t('message.updated'));
-                    })
-                    .catch((error) => {
-                      if (error.response.status === 304) {
-                        //this.$toastr.w(this.$t('condition.unsuccessful_action'));
-                      } else {
-                        this.$toastr.w(
-                          this.$t('condition.unsuccessful_action'),
-                        );
-                      }
-                    });
-                }
-              },
-              removeLdapGroupMapping: function (mappingUuid) {
-                let url = `${this.$api.BASE_URL}/${this.$api.URL_LDAP_MAPPING}/${mappingUuid}`;
-                this.axios
-                  .delete(url)
-                  .then((response) => {
-                    let k = [];
-                    for (let i = 0; i < this.ldapGroups.length; i++) {
-                      if (this.ldapGroups[i].uuid !== mappingUuid) {
-                        k.push(this.ldapGroups[i]);
-                      }
-                    }
-                    this.ldapGroups = k;
-                    this.team.mappedLdapGroups = this.ldapGroups;
-                    this.$toastr.s(this.$t('message.updated'));
-                  })
-                  .catch((error) => {
-                    this.$toastr.w(this.$t('condition.unsuccessful_action'));
-                  });
-              },
-              updateOidcGroupSelection: function (selections) {
-                this.$root.$emit('bv::hide::modal', 'selectOidcGroupModal');
-                for (let i = 0; i < selections.length; i++) {
-                  let selection = selections[i];
-                  let url = `${this.$api.BASE_URL}/${this.$api.URL_OIDC_MAPPING}`;
-                  this.axios
-                    .put(url, {
-                      team: this.team.uuid,
-                      group: selection.uuid,
-                    })
-                    .then((response) => {
-                      if (
-                        this.mappedOidcGroups === undefined ||
-                        this.mappedOidcGroups === null
-                      ) {
-                        this.mappedOidcGroups = [];
-                      }
-                      this.mappedOidcGroups.push(response.data);
-                      this.mappedOidcGroups.sort();
-                      this.$toastr.s(this.$t('message.updated'));
-                    })
-                    .catch((error) => {
-                      if (error.response.status === 304) {
-                        //this.$toastr.w(this.$t('condition.unsuccessful_action'));
-                      } else {
-                        this.$toastr.w(
-                          this.$t('condition.unsuccessful_action'),
-                        );
-                      }
-                    });
-                }
-              },
-              removeOidcGroupMapping: function (mappingUuid) {
-                let url = `${this.$api.BASE_URL}/${this.$api.URL_OIDC_MAPPING}/${mappingUuid}`;
-                this.axios
-                  .delete(url)
-                  .then((response) => {
-                    let k = [];
-                    for (let i = 0; i < this.mappedOidcGroups.length; i++) {
-                      if (this.mappedOidcGroups[i].uuid !== mappingUuid) {
-                        k.push(this.mappedOidcGroups[i]);
-                      }
-                    }
-                    this.mappedOidcGroups = k;
-                    this.team.mappedOidcGroups = this.mappedOidcGroups;
-                    this.$toastr.s(this.$t('message.updated'));
-                  })
-                  .catch((error) => {
-                    this.$toastr.w(this.$t('condition.unsuccessful_action'));
-                  });
-              },
-              updatePermissionSelection: function (selections) {
-                this.$root.$emit('bv::hide::modal', 'selectPermissionModal');
-                for (let i = 0; i < selections.length; i++) {
-                  let selection = selections[i];
-                  let url = `${this.$api.BASE_URL}/${this.$api.URL_PERMISSION}/${selection.name}/team/${this.team.uuid}`;
-                  this.axios
-                    .post(url)
-                    .then((response) => {
-                      this.syncVariables(response.data);
-                      this.$toastr.s(this.$t('message.updated'));
-                    })
-                    .catch((error) => {
-                      if (error.response.status === 304) {
-                        //this.$toastr.w(this.$t('condition.unsuccessful_action'));
-                      } else {
-                        this.$toastr.w(
-                          this.$t('condition.unsuccessful_action'),
-                        );
-                      }
-                    });
-                }
-              },
-              removePermission: function (permission) {
-                let url = `${this.$api.BASE_URL}/${this.$api.URL_PERMISSION}/${permission.name}/team/${this.team.uuid}`;
-                this.axios
-                  .delete(url)
-                  .then((response) => {
-                    this.syncVariables(response.data);
-                    this.$toastr.s(this.$t('message.updated'));
-                  })
-                  .catch((error) => {
-                    this.$toastr.w(this.$t('condition.unsuccessful_action'));
-                  });
-              },
-              removeUser: function (user) {
-                let url = `${this.$api.BASE_URL}/${this.$api.URL_USER}/${user.username}/membership`;
-                this.axios
-                  .delete(url, {
-                    data: {
-                      uuid: this.team.uuid,
-                    },
-                  })
-                  .then((response) => {
-                    if (this.managedUsers) {
-                      let k = [];
-                      for (let i = 0; i < this.managedUsers.length; i++) {
-                        if (this.managedUsers[i].username !== user.username) {
-                          k.push(this.managedUsers[i]);
-                        }
-                      }
-                      this.managedUsers = k;
-                    }
-                    if (this.ldapUsers) {
-                      let k = [];
-                      for (let i = 0; i < this.ldapUsers.length; i++) {
-                        if (this.ldapUsers[i].username !== user.username) {
-                          k.push(this.ldapUsers[i]);
-                        }
-                      }
-                      this.ldapUsers = k;
-                    }
-                    if (this.oidcUsers) {
-                      let k = [];
-                      for (let i = 0; i < this.oidcUsers.length; i++) {
-                        if (this.oidcUsers[i].username !== user.username) {
-                          k.push(this.oidcUsers[i]);
-                        }
-                      }
-                      this.oidcUsers = k;
-                    }
-                    this.$toastr.s(this.$t('message.updated'));
-                  })
-                  .catch((error) => {
-                    this.$toastr.w(this.$t('condition.unsuccessful_action'));
-                  });
-              },
-              syncVariables: function (team) {
-                this.team = team;
-                if (team.apiKeys) {
-                  // Some API server responses don't include API keys.
-                  // Take care to not wipe existing API keys from the UI in those cases.
-                  this.apiKeys = this.apiKeysToDict(team.apiKeys);
-                }
-                this.permissions = team.permissions;
-                //this.ldapGroups = team.mappedLdapGroups;
-              },
-            },
-          });
-        },
-        onExpandRow: this.vueFormatterInit,
-        toolbar: '#customToolbar',
-        responseHandler: function (res, xhr) {
-          res.total = xhr.getResponseHeader('X-Total-Count');
-          return res;
-        },
-        url: `${this.$api.BASE_URL}/${this.$api.URL_TEAM}`,
-      },
-    };
-  },
-  methods: {
-    refreshTable: function () {
-      this.$refs.table.refresh({
-        silent: true,
-      });
-    },
-  },
-};
-</script>
diff --git a/src/views/administration/accessmanagement/Teams/TeamDetails.vue b/src/views/administration/accessmanagement/Teams/TeamDetails.vue
new file mode 100644
index 000000000..c030a5fb8
--- /dev/null
+++ b/src/views/administration/accessmanagement/Teams/TeamDetails.vue
@@ -0,0 +1,506 @@
+<template>
+  <div>
+    <b-row class="expanded-row">
+      <b-col sm="6">
+        <b-input-group-form-input
+          id="input-team-name"
+          :label="$t('admin.team_name')"
+          input-group-size="mb-3"
+          required="true"
+          type="text"
+          v-model="name"
+          lazy="true"
+          autofocus="true"
+          v-debounce:750ms="updateTeam"
+          :debounce-events="'keyup'"
+        />
+        <b-form-group :label="this.$t('admin.api_keys')">
+          <div class="list-group">
+            <span
+              v-for="key in sortedApiKeys"
+              :key="`${key}-${apiKeys[key].created}`"
+            >
+              <api-key-list-group-item
+                :team-uuid="team.uuid"
+                :api-key="apiKeys[key]"
+                :delete-icon="true"
+                v-on:removeClicked="removeApiKey(apiKeys[key])"
+                v-on:regenerateClicked="regenerateApiKey(apiKeys[key])"
+              />
+            </span>
+            <actionable-list-group-item
+              :add-icon="true"
+              v-on:actionClicked="createApiKey()"
+              :tooltip="$t('admin.new_api_key_title')"
+            />
+          </div>
+        </b-form-group>
+        <b-form-group :label="this.$t('admin.permissions')">
+          <div class="list-group">
+            <span v-for="permission in permissions" :key="permission.name">
+              <actionable-list-group-item
+                :value="permission.name"
+                :delete-icon="true"
+                v-on:actionClicked="removePermission(permission)"
+              />
+            </span>
+            <actionable-list-group-item
+              :add-icon="true"
+              v-on:actionClicked="
+                $root.$emit('bv::show::modal', 'selectPermissionModal')
+              "
+            />
+          </div>
+        </b-form-group>
+        <b-form-group :label="this.$t('admin.mapped_ldap_groups')">
+          <div class="list-group">
+            <span v-for="ldapGroup in ldapGroups" :key="ldapGroup.uuid">
+              <actionable-list-group-item
+                :value="ldapGroup.dn"
+                :delete-icon="true"
+                v-on:actionClicked="removeLdapGroupMapping(ldapGroup.uuid)"
+              />
+            </span>
+            <actionable-list-group-item
+              :add-icon="true"
+              v-on:actionClicked="
+                $root.$emit('bv::show::modal', 'selectLdapGroupModal')
+              "
+            />
+          </div>
+        </b-form-group>
+        <b-form-group :label="this.$t('admin.mapped_oidc_groups')">
+          <div class="list-group">
+            <span v-for="oidcGroup in mappedOidcGroups" :key="oidcGroup.uuid">
+              <actionable-list-group-item
+                :value="oidcGroup.group.name"
+                :delete-icon="true"
+                v-on:actionClicked="removeOidcGroupMapping(oidcGroup)"
+              />
+            </span>
+            <actionable-list-group-item
+              :add-icon="true"
+              v-on:actionClicked="
+                $root.$emit('bv::show::modal', 'selectOidcGroupModal')
+              "
+            />
+          </div>
+        </b-form-group>
+      </b-col>
+      <b-col sm="6">
+        <b-form-group
+          v-if="managedUsers && managedUsers.length > 0"
+          :label="this.$t('admin.managed_users')"
+        >
+          <div class="list-group">
+            <span v-for="user in managedUsers" :key="user.username">
+              <actionable-list-group-item
+                :value="user.username"
+                :delete-icon="true"
+                v-on:actionClicked="removeUser(user, 'managedUsers')"
+              />
+            </span>
+          </div>
+        </b-form-group>
+        <b-form-group
+          v-if="ldapUsers && ldapUsers.length > 0"
+          :label="this.$t('admin.ldap_users')"
+        >
+          <div class="list-group">
+            <span v-for="user in ldapUsers" :key="user.username">
+              <actionable-list-group-item
+                :value="user.username"
+                :delete-icon="true"
+                v-on:actionClicked="removeUser(user, 'ldapUsers')"
+              />
+            </span>
+          </div>
+        </b-form-group>
+        <b-form-group
+          v-if="oidcUsers && oidcUsers.length > 0"
+          :label="this.$t('admin.oidc_users')"
+        >
+          <div class="list-group">
+            <span v-for="user in oidcUsers" :key="user.username">
+              <actionable-list-group-item
+                :value="user.username"
+                :delete-icon="true"
+                v-on:actionClicked="removeUser(user, 'oidcUsers')"
+              />
+            </span>
+          </div>
+        </b-form-group>
+        <div style="text-align: right">
+          <b-button variant="outline-danger" @click="deleteTeam">{{
+            $t('admin.delete_team')
+          }}</b-button>
+        </div>
+      </b-col>
+    </b-row>
+    <select-permission-modal
+      :currentPermissions="permissions"
+      v-on:selection="updatePermissionSelection"
+    />
+    <select-ldap-group-modal v-on:selection="updateLdapGroupSelection" />
+    <select-oidc-group-modal v-on:selection="updateOidcGroupSelection" />
+  </div>
+</template>
+
+<script>
+import EventBus from '../../../../shared/eventbus';
+import ActionableListGroupItem from '../../../components/ActionableListGroupItem';
+import ApiKeyListGroupItem from '../ApiKeyListGroupItem.vue';
+import SelectLdapGroupModal from '../SelectLdapGroupModal';
+import SelectOidcGroupModal from '../SelectOidcGroupModal';
+import SelectPermissionModal from '../SelectPermissionModal';
+import permissionsMixin from '../../../../mixins/permissionsMixin';
+import BInputGroupFormInput from '../../../../forms/BInputGroupFormInput';
+import i18n from '../../../../i18n';
+import _ from 'lodash';
+
+export default {
+  i18n,
+  mixins: [permissionsMixin],
+  components: {
+    ActionableListGroupItem,
+    ApiKeyListGroupItem,
+    SelectLdapGroupModal,
+    SelectOidcGroupModal,
+    SelectPermissionModal,
+    BInputGroupFormInput,
+  },
+  props: {
+    row: { type: Object, required: true },
+    index: { type: Number, required: true },
+    rowEvents: { update: { type: String }, delete: { type: String } },
+  },
+  data() {
+    return {
+      team: this.row,
+      name: this.row.name,
+      apiKeys: this.apiKeysToDict(this.row.apiKeys ?? []),
+      permissions: this.row.permissions,
+      ldapGroups: this.row.mappedLdapGroups,
+      mappedOidcGroups: this.row.mappedOidcGroups,
+      managedUsers: this.row.managedUsers,
+      ldapUsers: this.row.ldapUsers,
+      oidcUsers: this.row.oidcUsers,
+      labelIcon: {
+        dataOn: '\u2713',
+        dataOff: '\u2715',
+      },
+      storageIdentifier: `TeamDetail:${this.row.uuid}`,
+    };
+  },
+  beforeMount() {
+    console.log('initializing team details');
+    console.log(this.row.apiKeys);
+    console.log(this.apiKeys);
+    const modified = sessionStorage.getItem(this.storageIdentifier);
+    if (modified) {
+      sessionStorage.removeItem(this.storageIdentifier);
+      this.reloadTeam();
+    }
+  },
+  watch: {
+    team: {
+      handler(newValue) {
+        console.log(`team %O`, newValue);
+        this.name = newValue.name;
+        this.apiKeys = this.apiKeysToDict(newValue.apiKeys ?? []);
+        this.permissions = newValue.permissions;
+        this.ldapGroups = newValue.mappedLdapGroups;
+        this.mappedOidcGroups = newValue.mappedOidcGroups;
+        this.managedUsers = newValue.managedUsers;
+        this.ldapUsers = newValue.ldapUsers;
+        this.oidcUsers = newValue.oidcUsers;
+      },
+      deep: true,
+    },
+  },
+  computed: {
+    sortedApiKeys() {
+      return Object.keys(this.apiKeys).sort(
+        (a, b) =>
+          new Date(this.apiKeys[a].created) - new Date(this.apiKeys[b].created),
+      );
+    },
+  },
+  methods: {
+    apiKeysToDict: function (apiKeys) {
+      return Object.fromEntries(apiKeys.map((item) => [item.publicId, item]));
+    },
+    updateTeam: async function () {
+      const endpoint = `${this.$api.BASE_URL}/${this.$api.URL_TEAM}`;
+      const requestBody = { uuid: this.team.uuid, name: this.name };
+      try {
+        const response = await this.axios.post(endpoint, requestBody);
+        this.team = response.data;
+        EventBus.$emit(this.rowEvents.update, this.index, this.team);
+        this.$toastr.s(this.$t('message.updated'));
+      } catch (error) {
+        this.$toastr.w(this.$t('condition.unsuccessful_action'));
+      }
+    },
+    deleteTeam: async function () {
+      const endpoint = `${this.$api.BASE_URL}/${this.$api.URL_TEAM}`;
+      const requestBody = { data: { uuid: this.team.uuid } };
+      try {
+        await this.axios.delete(endpoint, requestBody);
+        EventBus.$emit(this.rowEvents.delete, this.index);
+        this.$toastr.s(this.$t('admin.team_deleted'));
+      } catch (error) {
+        this.$toastr.w(this.$t('condition.unsuccessful_action'));
+      }
+    },
+    popup: async function (title, message, key) {
+      const h = this.$createElement;
+      const titleVNode = h('div', {
+        domProps: { innerHTML: title },
+      });
+      const messageVNode = h('div', { class: ['foobar'] }, [
+        h('p', { class: ['text-center'] }, [message]),
+        h(
+          'pre',
+          {
+            class: ['b-input-group-form-input', 'text-white', 'plaintext'],
+            style: { overflowX: 'auto' },
+          },
+          key,
+        ),
+      ]);
+      return this.$bvModal.msgBoxOk([messageVNode], {
+        title: [titleVNode],
+        buttonSize: 'sm',
+        centered: true,
+        size: 'md',
+        footerClass: 'd-flex justify-content-center',
+        bodyClass: 'd-flex flex-column align-items-center',
+      });
+    },
+    async createApiKey() {
+      const endpoint = `${this.$api.BASE_URL}/${this.$api.URL_TEAM}/${this.team.uuid}/key`;
+      try {
+        const response = await this.axios.put(endpoint);
+        this.$toastr.s(this.$t('message.updated'));
+        await this.popup(
+          this.$t('admin.new_api_key_title'),
+          this.$t('admin.new_api_key'),
+          response.data.key,
+        );
+        this.syncVariables('addKey', response.data);
+      } catch (error) {
+        console.error(error);
+        this.$toastr.w(this.$t('condition.unsuccessful_action'));
+      }
+    },
+    async regenerateApiKey(apiKey) {
+      const endpoint = `${this.$api.BASE_URL}/${this.$api.URL_TEAM}/key/${apiKey.publicId}`;
+      try {
+        const response = await this.axios.post(endpoint);
+        this.$toastr.s(this.$t('message.updated'));
+        await this.popup(
+          this.$t('admin.regenerate_api_key_title'),
+          this.$t('admin.regenerate_api_key'),
+          response.data.key,
+        );
+        this.syncVariables('replaceKey', { old: apiKey, new: response.data });
+      } catch (error) {
+        console.error(error);
+        this.$toastr.w(this.$t('condition.unsuccessful_action'));
+      }
+    },
+    removeApiKey: async function (apiKey) {
+      const endpoint = `${this.$api.BASE_URL}/${this.$api.URL_TEAM}/key/${apiKey.publicId}`;
+      try {
+        await this.axios.delete(endpoint);
+        this.syncVariables('removeKey', apiKey);
+        this.$toastr.s(this.$t('message.updated'));
+      } catch (error) {
+        console.error(error);
+        this.$toastr.w(this.$t('condition.unsuccessful_action'));
+      }
+    },
+    updateLdapGroupSelection: async function (selections) {
+      this.$root.$emit('bv::hide::modal', 'selectLdapGroupModal');
+      const endpoint = `${this.$api.BASE_URL}/${this.$api.URL_LDAP_MAPPING}`;
+      try {
+        const responses = await Promise.all(
+          selections.map((selection) =>
+            this.axios.put(endpoint, {
+              team: this.team.uuid,
+              dn: selection.dn,
+            }),
+          ),
+        );
+        responses.forEach((response) => {
+          this.syncVariables('addLdapMapping', response.data);
+        });
+        this.$toastr.s(this.$t('message.updated'));
+      } catch (error) {
+        if (error.response && error.response.status === 304) {
+          // Optionally handle 304
+        } else {
+          this.$toastr.w(this.$t('condition.unsuccessful_action'));
+        }
+      }
+    },
+    removeLdapGroupMapping: async function (mapping) {
+      const endpoint = `${this.$api.BASE_URL}/${this.$api.URL_LDAP_MAPPING}/${mapping}`;
+      try {
+        await this.axios.delete(endpoint);
+        this.syncVariables('removeLdapMapping', mapping);
+        this.$toastr.s(this.$t('message.updated'));
+      } catch (error) {
+        this.$toastr.w(this.$t('condition.unsuccessful_action'));
+      }
+    },
+    updateOidcGroupSelection: async function (selections) {
+      this.$root.$emit('bv::hide::modal', 'selectOidcGroupModal');
+      const endpoint = `${this.$api.BASE_URL}/${this.$api.URL_OIDC_MAPPING}`;
+      try {
+        const responses = await Promise.all(
+          selections.map((selection) => {
+            const requestBody = { team: this.team.uuid, group: selection.uuid };
+            return this.axios.put(endpoint, requestBody);
+          }),
+        );
+        responses.forEach((response) => {
+          this.syncVariables('addOidcMapping', response.data);
+        });
+        this.$toastr.s(this.$t('message.updated'));
+      } catch (error) {
+        console.error(error);
+        this.$toastr.w(this.$t('condition.unsuccessful_action'));
+      }
+    },
+    removeOidcGroupMapping: async function (mapping) {
+      const endpoint = `${this.$api.BASE_URL}/${this.$api.URL_OIDC_MAPPING}/${mapping.uuid}`;
+      try {
+        await this.axios.delete(endpoint);
+        this.syncVariables('removeOidcMapping', mapping);
+        this.$toastr.s(this.$t('message.updated'));
+      } catch (error) {
+        console.error(error);
+        this.$toastr.w(this.$t('condition.unsuccessful_action'));
+      }
+    },
+    updatePermissionSelection: async function (selections) {
+      const endpoint = `${this.$api.BASE_URL}/${this.$api.URL_TEAM_PERMISSION}`;
+      const requestBody = {
+        team: this.team.uuid,
+        permissions: selections.map((selection) => selection.name),
+      };
+
+      try {
+        const response = await this.axios.put(endpoint, requestBody);
+        this.syncVariables('team', response.data);
+        this.$toastr.s(this.$t('admin.permissions_updated'));
+      } catch (error) {
+        console.error(error);
+        if (error.response.status === 304) return;
+        this.$toastr.w(this.$t('condition.unsuccessful_action'));
+      }
+    },
+    removePermission: async function (permission) {
+      const endpoint = `${this.$api.BASE_URL}/${this.$api.URL_PERMISSION}/${permission.name}/team/${this.team.uuid}`;
+      try {
+        const response = await this.axios.delete(endpoint);
+        this.syncVariables('team', response.data);
+        this.$toastr.s(this.$t('message.updated'));
+      } catch (error) {
+        this.$toastr.w(this.$t('condition.unsuccessful_action'));
+      }
+    },
+    removeUser: async function (user, group) {
+      const endpoint = `${this.$api.BASE_URL}/${this.$api.URL_USER}/${user.username}/membership`;
+      const requestBody = { data: { uuid: this.team.uuid } };
+      try {
+        await this.axios.delete(endpoint, requestBody);
+        this.syncVariables('removeUser', { user, group });
+        this.$toastr.s(this.$t('message.updated'));
+      } catch (error) {
+        console.error(error);
+        this.$toastr.w(this.$t('condition.unsuccessful_action'));
+      }
+    },
+    reloadTeam: async function () {
+      const endpoint = `${this.$api.BASE_URL}/${this.$api.URL_TEAM}/${this.team.uuid}`;
+      try {
+        const response = await this.axios.get(endpoint);
+        response.data.permissions = response.data.permissions ?? [];
+        response.data.apiKeys = response.data.apiKeys ?? [];
+        EventBus.$emit(this.rowEvents.update, this.index, response.data);
+      } catch (error) {
+        console.error(error);
+        this.$toastr.w(this.$t('condition.unsuccessful_action'));
+      }
+    },
+    syncVariables: function (type = 'team', data = null) {
+      // arr acts as the existing property on the team instance,
+      // updater specifies how it should be modified
+      const updateTeamArray = (prop, updater) => {
+        const arr = this.team[prop] ?? [];
+        const result = updater(arr);
+        this.$set(this.team, prop, result);
+      };
+
+      // operations that should be done on the team instance
+      const handlers = {
+        team: () => {
+          data.permissions = data.permissions ?? [];
+          data.apiKeys = data.apiKeys ?? [];
+          this.team = data;
+        },
+        addKey: () => {
+          updateTeamArray('apiKeys', (arr) => [...arr, _.omit(data, 'key')]);
+        },
+        removeKey: () => {
+          updateTeamArray('apiKeys', (arr) =>
+            arr.filter((key) => key.publicId !== data.publicId),
+          );
+        },
+        replaceKey: () => {
+          const updater = (arr) =>
+            arr.map((key) =>
+              key.publicId === data.old.publicId
+                ? _.omit(data.new, 'key')
+                : key,
+            );
+          updateTeamArray('apiKeys', updater);
+        },
+        addLdapMapping: () => {
+          updateTeamArray('mappedLdapGroups', (arr) => [...arr, data].sort());
+        },
+        removeLdapMapping: () => {
+          updateTeamArray('mappedLdapGroups', (arr) =>
+            arr.filter((mapping) => mapping.dn !== data),
+          );
+        },
+        addOidcMapping: () => {
+          updateTeamArray('mappedOidcGroups', (arr) => [...arr, data].sort());
+        },
+        removeOidcMapping: () => {
+          updateTeamArray('mappedOidcGroups', (arr) =>
+            arr.filter((mapping) => mapping.uuid !== data.uuid),
+          );
+        },
+        removeUser: () => {
+          const { user, group } = data;
+          updateTeamArray(group, (arr) =>
+            arr.filter((u) => u.username !== user.username),
+          );
+        },
+      };
+
+      if (!type || typeof handlers[type] !== 'function') {
+        console.error('Unknown or missing type for syncVariables', type);
+        return;
+      }
+
+      handlers[type]();
+      sessionStorage.setItem(this.storageIdentifier, new Date().toString());
+    },
+  },
+};
+</script>
diff --git a/src/views/administration/accessmanagement/Teams/index.vue b/src/views/administration/accessmanagement/Teams/index.vue
new file mode 100644
index 000000000..79bfd794b
--- /dev/null
+++ b/src/views/administration/accessmanagement/Teams/index.vue
@@ -0,0 +1,139 @@
+<template>
+  <b-card no-body :header="header">
+    <b-card-body>
+      <div id="customToolbar">
+        <b-button size="md" variant="outline-primary" v-b-modal.createTeamModal>
+          <span class="fa fa-plus"></span> {{ $t('admin.create_team') }}
+        </b-button>
+      </div>
+      <bootstrap-table
+        ref="table"
+        :columns="columns"
+        :data="data"
+        :options="options"
+      >
+      </bootstrap-table>
+    </b-card-body>
+    <create-team-modal v-on:refreshTable="refreshTable" />
+  </b-card>
+</template>
+
+<script>
+import xssFilters from 'xss-filters';
+import common from '../../../../shared/common';
+import CreateTeamModal from '../CreateTeamModal';
+import bootstrapTableMixin from '../../../../mixins/bootstrapTableMixin';
+import EventBus from '../../../../shared/eventbus';
+import TeamDetails from './TeamDetails.vue';
+
+export default {
+  name: 'TeamsView',
+  props: {
+    header: String,
+  },
+  mixins: [bootstrapTableMixin],
+  components: {
+    CreateTeamModal,
+  },
+  mounted() {
+    EventBus.$on(this.rowEvents.update, (index, row) => {
+      this.$refs.table.updateRow({ index, row });
+      this.$refs.table.expandRow(index);
+    });
+    EventBus.$on(this.rowEvents.delete, () => {
+      this.refreshTable();
+    });
+  },
+  beforeDestroy() {
+    EventBus.$off(this.rowEvents.update);
+    EventBus.$off(this.rowEvents.delete);
+  },
+  data() {
+    return {
+      rowEvents: {
+        update: 'admin:teams:rowUpdate',
+        delete: 'admin:teams:rowDeleted',
+      },
+      columns: [
+        {
+          title: this.$t('admin.team_name'),
+          field: 'name',
+          sortable: false,
+          formatter(value) {
+            return xssFilters.inHTMLData(common.valueWithDefault(value, ''));
+          },
+        },
+        {
+          title: this.$t('admin.api_keys'),
+          field: 'apiKeys',
+          sortable: false,
+          formatter(value) {
+            return value
+              ? xssFilters.inHTMLData(
+                  common.valueWithDefault(value.length, '0'),
+                )
+              : 0;
+          },
+        },
+        {
+          title: this.$t('admin.members'),
+          field: 'members',
+          sortable: false,
+          formatter(value, row) {
+            let count = 0;
+            if (row.managedUsers) {
+              count += row.managedUsers.length;
+            }
+            if (row.ldapUsers) {
+              count += row.ldapUsers.length;
+            }
+            if (row.oidcUsers) {
+              count += row.oidcUsers.length;
+            }
+            return count;
+          },
+        },
+      ],
+      data: [],
+      options: {
+        search: true,
+        showColumns: true,
+        showRefresh: true,
+        pagination: true,
+        silentSort: false,
+        sidePagination: 'client',
+        queryParamsType: 'pageSize',
+        pageList: '[10, 25, 50, 100]',
+        pageSize: 10,
+        icons: {
+          refresh: 'fa-refresh',
+        },
+        detailView: true,
+        detailViewIcon: false,
+        detailViewByClick: true,
+        detailFormatter: (index, row) => {
+          return this.vueFormatter({
+            render: () => (
+              <TeamDetails row={row} index={index} rowEvents={this.rowEvents} />
+            ),
+          });
+        },
+        onExpandRow: this.vueFormatterInit,
+        toolbar: '#customToolbar',
+        responseHandler: function (res, xhr) {
+          res.total = xhr.getResponseHeader('X-Total-Count');
+          return res;
+        },
+        url: `${this.$api.BASE_URL}/${this.$api.URL_TEAM}`,
+      },
+    };
+  },
+  methods: {
+    refreshTable: function () {
+      this.$refs.table.refresh({
+        silent: true,
+      });
+    },
+  },
+};
+</script>
diff --git a/src/views/components/UserRolesTable.vue b/src/views/components/UserRolesTable.vue
new file mode 100644
index 000000000..e42cd1750
--- /dev/null
+++ b/src/views/components/UserRolesTable.vue
@@ -0,0 +1,350 @@
+<!-- Table containing the users participating project and their respective roles -->
+<template>
+  <div>
+    <b-table :items="projectRoles" :fields="fields">
+      <!-- Project Column -->
+      <template #cell(project)="data">
+        <div
+          v-b-tooltip.hover
+          :title="data.item.project.name"
+          class="text-ellipsis"
+        >
+          {{ data.item.project.name }}
+        </div>
+      </template>
+
+      <!-- Role column  -->
+      <template #cell(role)="data">
+        <div
+          class="d-flex justify-content-between align-items-center"
+          style="gap: 0.625rem"
+        >
+          <multiselect
+            v-model="projectRolesCurrent[data.index].role"
+            :options="availableRoles"
+            :id="data.index"
+            :allow-empty="false"
+            @input="onRoleSelection"
+            :deselect-label="$t('admin.multiselect_remove_role')"
+            :placeholder="$t('admin.select_role')"
+            :open-direction="isLastRow(data.index, false) ? 'top' : 'auto'"
+            label="name"
+            track-by="uuid"
+            class="multiselect"
+          ></multiselect>
+
+          <b-button
+            small
+            class="action-icon"
+            @click="onRemoveProjectRole(data)"
+            v-if="!projectRolesCurrent[data.index].loading"
+            v-b-tooltip.hover
+            :title="$t('admin.remove_role')"
+          >
+            <span class="fa fa-trash-o"></span>
+          </b-button>
+          <b-spinner v-else small variant="primary"></b-spinner>
+        </div>
+      </template>
+
+      <!-- Footer -->
+      <template #custom-foot="">
+        <!-- Project Prototyper -->
+        <b-tr v-for="(prototype, index) in projectRolesPrototype" :key="index">
+          <b-td>{{ prototype.project.name }} <br /> </b-td>
+          <b-td>
+            <div
+              class="d-flex justify-content-between align-items-center"
+              style="gap: 0.625rem"
+            >
+              <multiselect
+                v-model="prototype.role"
+                :placeholder="$t('admin.select_role')"
+                :options="availableRoles"
+                :id="index"
+                :disabled="prototype.disabled"
+                :open-direction="isLastRow(index, true) ? 'top' : 'auto'"
+                @input="onRolePrototypeSelection"
+                label="name"
+                track-by="uuid"
+                class="multiselect"
+              ></multiselect>
+
+              <b-button
+                v-if="!prototype.loading"
+                small
+                class="action-icon"
+                @click="removeProjectPrototype(prototype.project.uuid)"
+                v-b-tooltip.hover
+                :title="$t('message.cancel')"
+              >
+                <i class="fa fa-tasks"></i>
+              </b-button>
+              <b-spinner v-else small variant="primary"></b-spinner>
+            </div>
+            <!-- *Project Prototype* -->
+          </b-td>
+        </b-tr>
+
+        <!-- Add Project Row -->
+        <b-tr @click="showProjectModal">
+          <b-td colspan="2">
+            <b-button
+              size="sm"
+              class="pull-right action-icon"
+              v-on:click="$emit('actionClicked')"
+              v-b-tooltip.hover
+              :title="$t('admin.add_project')"
+            >
+              <span class="fa fa-plus-square"></span>
+            </b-button>
+          </b-td>
+        </b-tr>
+      </template>
+    </b-table>
+
+    <select-project-modal
+      :username="parentContext.row.username"
+      @selection="createPrototypeMapping"
+    />
+  </div>
+</template>
+
+<script>
+import Multiselect from 'vue-multiselect';
+import SelectProjectModal from '../portfolio/projects/SelectProjectModal.vue';
+import i18n from '../../i18n';
+
+export default {
+  i18n,
+  props: {
+    parentContext: {
+      type: Object,
+      required: true,
+      validator(value) {
+        return (
+          typeof value === 'object' &&
+          Object.prototype.hasOwnProperty.call(value, 'row') &&
+          Object.prototype.hasOwnProperty.call(value, 'index')
+        );
+      },
+    },
+    projectRoles: { type: Array, required: true, default: null },
+    availableRoles: { type: Array, required: true, default: null },
+  },
+  mixins: [],
+  components: { Multiselect, SelectProjectModal },
+  created() {
+    this.createProjectMapping(this.projectRoles);
+  },
+  data() {
+    return {
+      // multiselect mutates its model which will cause violation errors, copy is requireds
+      projectRolesCurrent: [],
+      projectRolesPrototype: [],
+      fields: [
+        {
+          key: 'project',
+          label: this.$t('admin.project'),
+          thClass: 'project-column header-row',
+          tdClass: 'project-column',
+          sortable: false,
+        },
+        {
+          key: 'role',
+          label: this.$t('admin.role'),
+          sortable: false,
+          thClass: 'role-column header-row',
+          tdClass: 'role-column',
+        },
+      ],
+    };
+  },
+  watch: {
+    projectRoles(newValue) {
+      this.createProjectMapping(newValue);
+    },
+  },
+  methods: {
+    createProjectMapping(project) {
+      this.projectRolesCurrent = project.map((project) => ({
+        ...project,
+        // for multiselect
+        disabled: false,
+        loading: false,
+      }));
+    },
+
+    createPrototypeMapping(projectSelections) {
+      this.projectRolesPrototype = projectSelections.map((project) => ({
+        project,
+        // for multiselect
+        role: null, // model, acts as blank role
+        disabled: false,
+        loading: false,
+      }));
+    },
+
+    removeProjectPrototype(uuid) {
+      const index = this.projectRolesPrototype.findIndex(
+        (prototype) => prototype.project.uuid === uuid,
+      );
+      if (index !== -1) {
+        this.projectRolesPrototype.splice(index, 1);
+      }
+    },
+
+    // multiselect - utility
+    debugRoleFormatter({ name, uuid }) {
+      if (!name || !uuid) return;
+      const maxLength = 8; // max length of uuid
+      const truncatedUuid =
+        maxLength === 0
+          ? uuid
+          : uuid.length <= maxLength
+            ? uuid
+            : uuid.slice(0, maxLength - 3) + '...';
+      return `${name} - ${truncatedUuid}`;
+    },
+
+    // Add project role
+    onRolePrototypeSelection(prototype, id) {
+      const role = prototype.uuid;
+      const project = this.projectRolesPrototype[id].project.uuid;
+      this.projectRolesPrototype[id].loading = true;
+      this.projectRolesPrototype[id].disabled = true;
+      const error = (error) => {
+        if (error?.response?.status === 304) {
+          this.$toastr.w(this.$t('admin.role_already_assigned'));
+        }
+
+        this.projectRolesPrototype[id].disabled = false;
+        this.projectRolesPrototype[id].loading = false;
+        this.projectRolesPrototype[id].role = null;
+      };
+
+      // changes reflect when projectRoles is updated by parent
+      // we just need to delete the prototype then signal the parent
+      const success = () => {
+        this.removeProjectPrototype(project);
+      };
+      this.$emit('addProjectRole', { role, project }, { success, error });
+    },
+
+    // Update/change project role
+    onRoleSelection(data, id) {
+      const role = data.uuid;
+      const project = this.projectRoles[id].project.uuid;
+      this.projectRolesCurrent[id].loading = true;
+      this.projectRolesCurrent[id].disabled = true;
+      const abortRoleChange = () => {
+        this.projectRolesCurrent[id].disabled = false;
+        this.projectRolesCurrent[id].loading = false;
+        this.projectRolesCurrent[id].role = this.projectRoles[id].role; // set to original
+      };
+      const roleChange = () => {
+        this.projectRolesCurrent[id].disabled = false;
+        this.projectRolesCurrent[id].loading = false;
+      };
+
+      const error = (error) => {
+        if (error?.response?.status === 304) {
+          this.$toastr.e(this.$t('admin.role_already_assigned'));
+          roleChange();
+        }
+        abortRoleChange();
+      };
+
+      this.$emit(
+        'updateProjectRole',
+        { role, project },
+        { success: roleChange, error },
+      );
+    },
+
+    // Remove project role
+    onRemoveProjectRole(data) {
+      const projectRole = {
+        role: data.item.role.uuid,
+        project: this.projectRolesCurrent[data.index].project.uuid,
+      };
+      this.$emit('removeProjectRole', projectRole);
+    },
+
+    showProjectModal() {
+      this.$root.$emit('bv::show::modal', 'selectProjectModal');
+    },
+
+    // Partially mitigates issue where multiselect dropdown opens in the wrong direction
+    isLastRow(index, isPrototype) {
+      if (isPrototype) {
+        return index === this.projectRolesPrototype.length - 1;
+      }
+      return (
+        index === this.projectRolesCurrent.length - 1 &&
+        !this.projectRolesPrototype.length
+      );
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+::v-deep(.project-column) {
+  white-space: no-wrap;
+  text-wrap: wrap;
+  max-width: 12.5rem;
+}
+
+::v-deep(.project-column span) {
+  text-overflow: ellipsis;
+}
+
+::v-deep(.role-column) {
+  width: 60%;
+}
+
+::v-deep(.header-row) {
+  padding: 0.75rem !important;
+}
+
+.multiselect {
+  max-width: 31.25rem;
+}
+
+.action-icon {
+  height: min-content;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  background-color: transparent;
+}
+
+.action-icon .fa {
+  font-size: 1.2rem;
+}
+
+.action-icon .fa-edit {
+  color: var(--secondary);
+}
+
+.action-icon .fa-trash-o {
+  color: var(--danger);
+}
+
+.action-icon .fa-tasks {
+  opacity: 30%;
+}
+
+.action-icon .fa-plus-square {
+  color: var(--primary);
+}
+
+::v-deep(.text-ellipsis) {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: inline-block;
+  width: 100%;
+}
+</style>
diff --git a/src/views/portfolio/projects/SelectProjectModal.vue b/src/views/portfolio/projects/SelectProjectModal.vue
index 5aa8ae143..61d52e038 100644
--- a/src/views/portfolio/projects/SelectProjectModal.vue
+++ b/src/views/portfolio/projects/SelectProjectModal.vue
@@ -18,12 +18,9 @@
       <b-button size="md" variant="secondary" @click="cancel()">{{
         $t('message.cancel')
       }}</b-button>
-      <b-button
-        size="md"
-        variant="primary"
-        @click="$emit('selection', $refs.table.getSelections())"
-        >{{ $t('message.select') }}</b-button
-      >
+      <b-button size="md" variant="primary" @click="handleSelection">{{
+        $t('message.select')
+      }}</b-button>
     </template>
   </b-modal>
 </template>
@@ -35,15 +32,25 @@ import common from '../../../shared/common';
 
 export default {
   mixins: [permissionsMixin],
+  props: {
+    // Current projects should be a list of UUIDs since names can be duplicate
+    username: { type: String, default: null },
+  },
   methods: {
     apiUrl: function () {
-      let url = `${this.$api.BASE_URL}/${this.$api.URL_PROJECT}`;
+      let endpoint = '';
+      if (this.username) {
+        endpoint = `${this.$api.BASE_URL}/${this.$api.URL_ACL_USER}/${this.username}`;
+        return endpoint;
+      }
+
+      endpoint = `${this.$api.BASE_URL}/${this.$api.URL_PROJECT}`;
       if (this.showInactiveProjects === undefined) {
-        url += '?excludeInactive=true';
+        endpoint += '?excludeInactive=true';
       } else {
-        url += '?excludeInactive=' + !this.showInactiveProjects;
+        endpoint += '?excludeInactive=' + !this.showInactiveProjects;
       }
-      return url;
+      return endpoint;
     },
     refreshTable: function () {
       this.$refs.table.refresh({
@@ -52,6 +59,10 @@ export default {
         silent: true,
       });
     },
+    handleSelection: function () {
+      this.$root.$emit('bv::hide::modal', this.$children[0].id);
+      this.$emit('selection', this.$refs.table.getSelections());
+    },
   },
   watch: {
     showInactiveProjects() {
@@ -75,7 +86,7 @@ export default {
           title: this.$t('message.project_name'),
           field: 'name',
           sortable: true,
-          formatter(value, row, index) {
+          formatter(value) {
             return xssFilters.inHTMLData(common.valueWithDefault(value, ''));
           },
         },
@@ -83,14 +94,14 @@ export default {
           title: this.$t('message.version'),
           field: 'version',
           sortable: true,
-          formatter(value, row, index) {
+          formatter(value) {
             return xssFilters.inHTMLData(common.valueWithDefault(value, ''));
           },
         },
         {
           title: this.$t('message.active'),
           field: 'active',
-          formatter(value, row, index) {
+          formatter(value) {
             return value === true ? '<i class="fa fa-check-square-o" />' : '';
           },
           align: 'center',
@@ -113,7 +124,8 @@ export default {
           refresh: 'fa-refresh',
         },
         toolbar: '#projectsToolbar',
-        responseHandler: function (res, xhr) {
+        responseHandler: (res, xhr) => {
+          // console.log(this.currentProjects);
           res.total = xhr.getResponseHeader('X-Total-Count');
           return res;
         },