diff --git a/COMETwebapp.Tests/Components/SiteDirectory/Roles/ParticipantRolesTableTestFixture.cs b/COMETwebapp.Tests/Components/SiteDirectory/Roles/ParticipantRolesTableTestFixture.cs
index 8f864f7c..0162f6bb 100644
--- a/COMETwebapp.Tests/Components/SiteDirectory/Roles/ParticipantRolesTableTestFixture.cs
+++ b/COMETwebapp.Tests/Components/SiteDirectory/Roles/ParticipantRolesTableTestFixture.cs
@@ -41,7 +41,7 @@ namespace COMETwebapp.Tests.Components.SiteDirectory.Roles
 
     using DynamicData;
 
-    using Microsoft.AspNetCore.Components;
+    using Microsoft.Extensions.DependencyInjection;
 
     using Moq;
 
@@ -56,7 +56,6 @@ public class ParticipantRolesTableTestFixture
         private IRenderedComponent<ParticipantRolesTable> renderer;
         private Mock<IParticipantRolesTableViewModel> viewModel;
         private ParticipantRole participantRole1;
-        private bool wasRoleSelected;
 
         [SetUp]
         public void SetUp()
@@ -76,17 +75,11 @@ public void SetUp()
 
             this.viewModel.Setup(x => x.Rows).Returns(rows);
             this.viewModel.Setup(x => x.Thing).Returns(this.participantRole1);
-            this.context.ConfigureDevExpressBlazor();
 
-            this.renderer = this.context.RenderComponent<ParticipantRolesTable>(parameters =>
-            {
-                parameters.Add(p => p.ViewModel, this.viewModel.Object);
+            this.context.Services.AddSingleton(this.viewModel.Object);
+            this.context.ConfigureDevExpressBlazor();
 
-                parameters.Add(p => p.OnRoleSelected, new EventCallbackFactory().Create<ParticipantRole>(this, () =>
-                {
-                    this.wasRoleSelected = true;
-                }));
-            });
+            this.renderer = this.context.RenderComponent<ParticipantRolesTable>();
         }
 
         [TearDown]
@@ -124,13 +117,13 @@ public async Task VerifyAddParticipantRoleClick()
         [Test]
         public async Task VerifyRowClick()
         {
-            Assert.That(this.wasRoleSelected, Is.EqualTo(false));
+            Assert.That(this.renderer.Instance.IsRoleSelected, Is.EqualTo(false));
 
             var firstRow = this.viewModel.Object.Rows.Items.First();
             var grid = this.renderer.FindComponent<DxGrid>();
             await this.renderer.InvokeAsync(async () => await grid.Instance.SelectedDataItemChanged.InvokeAsync(firstRow));
 
-            Assert.That(this.wasRoleSelected, Is.EqualTo(true));
+            Assert.That(this.renderer.Instance.IsRoleSelected, Is.EqualTo(true));
         }
     }
 }
diff --git a/COMETwebapp.Tests/Components/SiteDirectory/Roles/PersonRolesTableTestFixture.cs b/COMETwebapp.Tests/Components/SiteDirectory/Roles/PersonRolesTableTestFixture.cs
index a47c9869..d7cfaf89 100644
--- a/COMETwebapp.Tests/Components/SiteDirectory/Roles/PersonRolesTableTestFixture.cs
+++ b/COMETwebapp.Tests/Components/SiteDirectory/Roles/PersonRolesTableTestFixture.cs
@@ -41,7 +41,7 @@ namespace COMETwebapp.Tests.Components.SiteDirectory.Roles
 
     using DynamicData;
 
-    using Microsoft.AspNetCore.Components;
+    using Microsoft.Extensions.DependencyInjection;
 
     using Moq;
 
@@ -56,7 +56,6 @@ public class PersonRolesTableTestFixture
         private IRenderedComponent<PersonRolesTable> renderer;
         private Mock<IPersonRolesTableViewModel> viewModel;
         private PersonRole personRole;
-        private bool wasRoleSelected;
 
         [SetUp]
         public void SetUp()
@@ -76,17 +75,11 @@ public void SetUp()
 
             this.viewModel.Setup(x => x.Rows).Returns(rows);
             this.viewModel.Setup(x => x.Thing).Returns(this.personRole);
-            this.context.ConfigureDevExpressBlazor();
 
-            this.renderer = this.context.RenderComponent<PersonRolesTable>(parameters =>
-            {
-                parameters.Add(p => p.ViewModel, this.viewModel.Object);
+            this.context.Services.AddSingleton(this.viewModel.Object);
+            this.context.ConfigureDevExpressBlazor();
 
-                parameters.Add(p => p.OnRoleSelected, new EventCallbackFactory().Create<PersonRole>(this, () =>
-                {
-                    this.wasRoleSelected = true;
-                }));
-            });
+            this.renderer = this.context.RenderComponent<PersonRolesTable>();
         }
 
         [TearDown]
@@ -124,13 +117,13 @@ public async Task VerifyAddPersonRoleClick()
         [Test]
         public async Task VerifyRowClick()
         {
-            Assert.That(this.wasRoleSelected, Is.EqualTo(false));
+            Assert.That(this.renderer.Instance.IsRoleSelected, Is.EqualTo(false));
 
             var firstRow = this.viewModel.Object.Rows.Items.First();
             var grid = this.renderer.FindComponent<DxGrid>();
             await this.renderer.InvokeAsync(async () => await grid.Instance.SelectedDataItemChanged.InvokeAsync(firstRow));
 
-            Assert.That(this.wasRoleSelected, Is.EqualTo(true));
+            Assert.That(this.renderer.Instance.IsRoleSelected, Is.EqualTo(true));
         }
     }
 }
diff --git a/COMETwebapp.Tests/Components/SiteDirectory/Roles/RolesTablesTestFixture.cs b/COMETwebapp.Tests/Components/SiteDirectory/Roles/RolesTablesTestFixture.cs
deleted file mode 100644
index 68a47889..00000000
--- a/COMETwebapp.Tests/Components/SiteDirectory/Roles/RolesTablesTestFixture.cs
+++ /dev/null
@@ -1,109 +0,0 @@
-// --------------------------------------------------------------------------------------------------------------------
-// <copyright file="RolesTablesTestFixture.cs" company="RHEA System S.A.">
-//    Copyright (c) 2023-2024 RHEA System S.A.
-//
-//    Authors: Sam Gerené, Alex Vorobiev, Alexander van Delft, Jaime Bernar, Antoine Théate, João Rua
-//
-//    This file is part of CDP4-COMET WEB Community Edition
-//    The CDP4-COMET WEB Community Edition is the RHEA Web Application implementation of ECSS-E-TM-10-25 Annex A and Annex C.
-//
-//    The CDP4-COMET WEB Community Edition is free software; you can redistribute it and/or
-//    modify it under the terms of the GNU Affero General Public
-//    License as published by the Free Software Foundation; either
-//    version 3 of the License, or (at your option) any later version.
-//
-//    The CDP4-COMET WEB Community Edition is distributed in the hope that it will be useful,
-//    but WITHOUT ANY WARRANTY; without even the implied warranty of
-//    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
-//    Affero General Public License for more details.
-//
-//    You should have received a copy of the GNU Affero General Public License
-//    along with this program.  If not, see <http://www.gnu.org/licenses/>.
-// </copyright>
-// --------------------------------------------------------------------------------------------------------------------
-
-namespace COMETwebapp.Tests.Components.SiteDirectory.Roles
-{
-    using System.Threading.Tasks;
-
-    using Bunit;
-
-    using CDP4Common.SiteDirectoryData;
-
-    using COMET.Web.Common.Test.Helpers;
-
-    using COMETwebapp.Components.SiteDirectory.Roles;
-    using COMETwebapp.ViewModels.Components.SiteDirectory.Roles;
-    using COMETwebapp.ViewModels.Components.SiteDirectory.Rows;
-
-    using DynamicData;
-
-    using Microsoft.Extensions.DependencyInjection;
-
-    using Moq;
-
-    using NUnit.Framework;
-
-    using TestContext = Bunit.TestContext;
-
-    [TestFixture]
-    public class RolesTablesTestFixture
-    {
-        private TestContext context;
-        private IRenderedComponent<RolesTables> renderer;
-        private Mock<IParticipantRolesTableViewModel> participantRolesViewModel;
-        private Mock<IPersonRolesTableViewModel> personRolesViewModel;
-
-        [SetUp]
-        public void SetUp()
-        {
-            this.context = new TestContext();
-
-            this.participantRolesViewModel = new Mock<IParticipantRolesTableViewModel>();
-            this.participantRolesViewModel.Setup(x => x.Rows).Returns(new SourceList<ParticipantRoleRowViewModel>());
-
-            this.personRolesViewModel = new Mock<IPersonRolesTableViewModel>();
-            this.personRolesViewModel.Setup(x => x.Rows).Returns(new SourceList<PersonRoleRowViewModel>());
-
-            this.context.Services.AddSingleton(this.participantRolesViewModel.Object);
-            this.context.Services.AddSingleton(this.personRolesViewModel.Object);
-            this.context.ConfigureDevExpressBlazor();
-
-            this.renderer = this.context.RenderComponent<RolesTables>();
-        }
-
-        [TearDown]
-        public void Teardown()
-        {
-            this.context.CleanContext();
-            this.context.Dispose();
-        }
-
-        [Test]
-        public void VerifyOnInitialized()
-        {
-            Assert.Multiple(() =>
-            {
-                Assert.That(this.renderer.Instance.ParticipantRolesViewModel, Is.Not.Null);
-                Assert.That(this.renderer.Instance.PersonRolesViewModel, Is.Not.Null);
-                this.participantRolesViewModel.Verify(x => x.InitializeViewModel(), Times.Once);
-            });
-        }
-
-        [Test]
-        public async Task VerifyRoleSelection()
-        {
-            Assert.That(this.renderer.Instance.SelectedComponent, Is.Null);
-
-            var participantRoles = this.renderer.FindComponent<ParticipantRolesTable>();
-            await this.renderer.InvokeAsync(() => participantRoles.Instance.OnRoleSelected.InvokeAsync(new ParticipantRole()));
-            Assert.That(this.renderer.Instance.SelectedComponent, Is.Not.Null);
-
-            var detailsComponent = this.renderer.FindComponent<ParticipantRoleDetails>();
-            Assert.That(detailsComponent.Instance.OnCancel.HasDelegate, Is.EqualTo(true));
-
-            await this.renderer.InvokeAsync(detailsComponent.Instance.OnCancel.InvokeAsync);
-            Assert.That(this.renderer.Instance.SelectedComponent, Is.Null);
-        }
-    }
-}
diff --git a/COMETwebapp/Components/SiteDirectory/Roles/ParticipantRolesTable.razor b/COMETwebapp/Components/SiteDirectory/Roles/ParticipantRolesTable.razor
index 13dd9947..42eb500c 100644
--- a/COMETwebapp/Components/SiteDirectory/Roles/ParticipantRolesTable.razor
+++ b/COMETwebapp/Components/SiteDirectory/Roles/ParticipantRolesTable.razor
@@ -17,50 +17,59 @@ Copyright (c) 2023-2024 RHEA System S.A.
 @inherits SelectedDeprecatableDataItemBase<ParticipantRole, ParticipantRoleRowViewModel>
 
 <LoadingComponent IsVisible="@(this.ViewModel.IsLoading)">
-    <h3>Participant Roles</h3>
-    <DxGrid @ref="this.Grid"
-            Data="this.ViewModel.Rows.Items"
-            ColumnResizeMode="GridColumnResizeMode.ColumnsContainer"
-            ShowSearchBox="true"
-            SearchBoxNullText="Search for a participant role..."
-            AllowSelectRowByClick="true"
-            SelectedDataItemChanged="@(async row => await this.OnSelectedDataItemChanged((ParticipantRoleRowViewModel)row))"
-            PopupEditFormCssClass="pw-800"
-            PopupEditFormHeaderText="Participant Role"
-            CustomizeElement="DisableDeprecatedThing"
-            CustomizeEditModel="this.CustomizeEditThing"
-            EditMode="GridEditMode.PopupEditForm"
-            EditModelSaving="@(() => this.OnEditThingSaving())"
-            EditFormButtonsVisible="false"
-            PageSize="20"
-            PagerNavigationMode="PagerNavigationMode.Auto"
-            PageSizeSelectorVisible="true"
-            PageSizeSelectorItems="@(new[] { 20, 35, 50 })"
-            PageSizeSelectorAllRowsItemVisible="true"
-            CssClass="d-inline">
-        <Columns>
-            <DxGridDataColumn FieldName="@nameof(ParticipantRoleRowViewModel.Name)" MinWidth="150"/>
-            <DxGridDataColumn FieldName="@nameof(ParticipantRoleRowViewModel.ShortName)" MinWidth="80"/>
-            <DxGridDataColumn FieldName="@nameof(ParticipantRoleRowViewModel.IsDeprecated)" MinWidth="80" Visible="false"/>
-            <DxGridCommandColumn Width="200px" EditButtonVisible="false" DeleteButtonVisible="false">
-                <HeaderTemplate>
-                    <DxButton Id="addParticipantRoleButton" Text="Add Participant Role" IconCssClass="oi oi-plus" Click="() => this.Grid.StartEditNewRowAsync()"/>
-                </HeaderTemplate>
-            </DxGridCommandColumn>
-        </Columns>
+    <div style="display: flex; justify-content: space-between;">
+        <DxGrid @ref="this.Grid"
+                Data="this.ViewModel.Rows.Items"
+                ColumnResizeMode="GridColumnResizeMode.ColumnsContainer"
+                ShowSearchBox="true"
+                SearchBoxNullText="Search for a participant role..."
+                AllowSelectRowByClick="true"
+                SelectedDataItemChanged="@(row => this.OnSelectedDataItemChanged((ParticipantRoleRowViewModel)row))"
+                PopupEditFormCssClass="pw-800"
+                PopupEditFormHeaderText="Participant Role"
+                CustomizeElement="DisableDeprecatedThing"
+                CustomizeEditModel="this.CustomizeEditThing"
+                EditMode="GridEditMode.PopupEditForm"
+                EditModelSaving="@(() => this.OnEditThingSaving())"
+                EditFormButtonsVisible="false"
+                PageSize="20"
+                PagerNavigationMode="PagerNavigationMode.Auto"
+                PageSizeSelectorVisible="true"
+                PageSizeSelectorItems="@(new[] { 20, 35, 50 })"
+                PageSizeSelectorAllRowsItemVisible="true"
+                CssClass="d-inline">
+            <Columns>
+                <DxGridDataColumn FieldName="@nameof(ParticipantRoleRowViewModel.Name)" MinWidth="150"/>
+                <DxGridDataColumn FieldName="@nameof(ParticipantRoleRowViewModel.ShortName)" MinWidth="80"/>
+                <DxGridDataColumn FieldName="@nameof(ParticipantRoleRowViewModel.IsDeprecated)" MinWidth="80" Visible="false"/>
+                <DxGridCommandColumn Width="200px" EditButtonVisible="false" DeleteButtonVisible="false">
+                    <HeaderTemplate>
+                        <DxButton Id="addParticipantRoleButton" Text="Add Participant Role" IconCssClass="oi oi-plus" Click="() => this.Grid.StartEditNewRowAsync()"/>
+                    </HeaderTemplate>
+                </DxGridCommandColumn>
+            </Columns>
 
-        <EditFormTemplate Context="EditFormContext">
-            <ParticipantRoleDetails ViewModel="@this.ViewModel"
-                                    OnSubmit="@(async () => await this.Grid.SaveChangesAsync())"
-                                    OnCancel="@(async () => await this.Grid.CancelEditAsync())"/>
-        </EditFormTemplate>
+            <EditFormTemplate Context="EditFormContext">
+                <ParticipantRoleDetails ViewModel="@this.ViewModel"
+                                        OnSubmit="@(async () => await this.Grid.SaveChangesAsync())"
+                                        OnCancel="@(async () => await this.Grid.CancelEditAsync())"/>
+            </EditFormTemplate>
 
-        <CustomValidators>
-            <FluentValidationValidator/>
-        </CustomValidators>
+            <CustomValidators>
+                <FluentValidationValidator/>
+            </CustomValidators>
 
-    </DxGrid>
-    <div class="pb-3"></div>
+        </DxGrid>
+        
+        @if (this.IsRoleSelected)
+        {
+            <div style="width: 70%; padding: 30px;">
+                <ParticipantRoleDetails ViewModel="@this.ViewModel"
+                                        OnCancel="@(() => this.IsRoleSelected = false)"
+                                        OnSubmit="@(() => this.ViewModel.CreateOrEditParticipantRole(false))"/>
+            </div>
+        }
+    </div>
 </LoadingComponent>
 
 <DxPopup @bind-Visible="@(this.ViewModel.IsOnDeprecationMode)" HeaderText="Please confirm" Width="auto" CloseOnOutsideClick="false">
diff --git a/COMETwebapp/Components/SiteDirectory/Roles/ParticipantRolesTable.razor.cs b/COMETwebapp/Components/SiteDirectory/Roles/ParticipantRolesTable.razor.cs
index d4a85236..f7be0cc3 100644
--- a/COMETwebapp/Components/SiteDirectory/Roles/ParticipantRolesTable.razor.cs
+++ b/COMETwebapp/Components/SiteDirectory/Roles/ParticipantRolesTable.razor.cs
@@ -24,8 +24,6 @@
 
 namespace COMETwebapp.Components.SiteDirectory.Roles
 {
-    using System.ComponentModel.DataAnnotations;
-
     using CDP4Common.SiteDirectoryData;
 
     using COMETwebapp.Components.Common;
@@ -44,14 +42,13 @@ public partial class ParticipantRolesTable : SelectedDeprecatableDataItemBase<Pa
         /// <summary>
         /// The <see cref="IParticipantRolesTableViewModel" /> for this component
         /// </summary>
-        [Parameter, Required]
+        [Inject]
         public IParticipantRolesTableViewModel ViewModel { get; set; }
 
         /// <summary>
-        /// The callback for when a participant role is selected
+        /// Gets the value to check if a role has been selected
         /// </summary>
-        [Parameter]
-        public EventCallback<ParticipantRole> OnRoleSelected { get; set; }
+        public bool IsRoleSelected { get; private set; }
 
         /// <summary>
         /// Method invoked when the component is ready to start, having received its
@@ -85,13 +82,13 @@ protected override void CustomizeEditThing(GridCustomizeEditModelEventArgs e)
         }
 
         /// <summary>
-        /// Metgid invoked everytime a row is selected
+        /// Method invoked everytime a row is selected
         /// </summary>
         /// <param name="row">The selected row</param>
-        private async Task OnSelectedDataItemChanged(ParticipantRoleRowViewModel row)
+        private void OnSelectedDataItemChanged(ParticipantRoleRowViewModel row)
         {
             this.ViewModel.Thing = row.Thing.Clone(true);
-            await this.OnRoleSelected.InvokeAsync(row.Thing);
+            this.IsRoleSelected = true;
         }
     }
 }
diff --git a/COMETwebapp/Components/SiteDirectory/Roles/PersonRolesTable.razor b/COMETwebapp/Components/SiteDirectory/Roles/PersonRolesTable.razor
index c576738b..585de590 100644
--- a/COMETwebapp/Components/SiteDirectory/Roles/PersonRolesTable.razor
+++ b/COMETwebapp/Components/SiteDirectory/Roles/PersonRolesTable.razor
@@ -17,50 +17,59 @@ Copyright (c) 2023-2024 RHEA System S.A.
 @inherits SelectedDeprecatableDataItemBase<PersonRole, PersonRoleRowViewModel>
 
 <LoadingComponent IsVisible="@(this.ViewModel.IsLoading)">
-    <h3>Person Roles</h3>
-    <DxGrid @ref="this.Grid"
-            Data="this.ViewModel.Rows.Items"
-            ColumnResizeMode="GridColumnResizeMode.ColumnsContainer"
-            ShowSearchBox="true"
-            SearchBoxNullText="Search for a person role..."
-            AllowSelectRowByClick="true"
-            SelectedDataItemChanged="@(async row => await this.OnSelectedDataItemChanged((PersonRoleRowViewModel)row))"
-            PopupEditFormCssClass="pw-800"
-            PopupEditFormHeaderText="Person Role"
-            CustomizeElement="DisableDeprecatedThing"
-            CustomizeEditModel="this.CustomizeEditThing"
-            EditMode="GridEditMode.PopupEditForm"
-            EditModelSaving="@(() => this.OnEditThingSaving())"
-            EditFormButtonsVisible="false"
-            PageSize="20"
-            PagerNavigationMode="PagerNavigationMode.Auto"
-            PageSizeSelectorVisible="true"
-            PageSizeSelectorItems="@(new[] { 20, 35, 50 })"
-            PageSizeSelectorAllRowsItemVisible="true"
-            CssClass="d-inline">
-        <Columns>
-            <DxGridDataColumn FieldName="@nameof(PersonRoleRowViewModel.Name)" MinWidth="150"/>
-            <DxGridDataColumn FieldName="@nameof(PersonRoleRowViewModel.ShortName)" MinWidth="80"/>
-            <DxGridDataColumn FieldName="@nameof(PersonRoleRowViewModel.IsDeprecated)" MinWidth="80" Visible="false"/>
-            <DxGridCommandColumn Width="200px" EditButtonVisible="false" DeleteButtonVisible="false">
-                <HeaderTemplate>
-                    <DxButton Id="addPersonRoleButton" Text="Add Person Role" IconCssClass="oi oi-plus" Click="() => this.Grid.StartEditNewRowAsync()"/>
-                </HeaderTemplate>
-            </DxGridCommandColumn>
-        </Columns>
+    <div style="display: flex; justify-content: space-between;">
+        <DxGrid @ref="this.Grid"
+                Data="this.ViewModel.Rows.Items"
+                ColumnResizeMode="GridColumnResizeMode.ColumnsContainer"
+                ShowSearchBox="true"
+                SearchBoxNullText="Search for a person role..."
+                AllowSelectRowByClick="true"
+                SelectedDataItemChanged="@(row => this.OnSelectedDataItemChanged((PersonRoleRowViewModel)row))"
+                PopupEditFormCssClass="pw-800"
+                PopupEditFormHeaderText="Person Role"
+                CustomizeElement="DisableDeprecatedThing"
+                CustomizeEditModel="this.CustomizeEditThing"
+                EditMode="GridEditMode.PopupEditForm"
+                EditModelSaving="@(() => this.OnEditThingSaving())"
+                EditFormButtonsVisible="false"
+                PageSize="20"
+                PagerNavigationMode="PagerNavigationMode.Auto"
+                PageSizeSelectorVisible="true"
+                PageSizeSelectorItems="@(new[] { 20, 35, 50 })"
+                PageSizeSelectorAllRowsItemVisible="true"
+                CssClass="d-inline">
+            <Columns>
+                <DxGridDataColumn FieldName="@nameof(PersonRoleRowViewModel.Name)" MinWidth="150"/>
+                <DxGridDataColumn FieldName="@nameof(PersonRoleRowViewModel.ShortName)" MinWidth="80"/>
+                <DxGridDataColumn FieldName="@nameof(PersonRoleRowViewModel.IsDeprecated)" MinWidth="80" Visible="false"/>
+                <DxGridCommandColumn Width="200px" EditButtonVisible="false" DeleteButtonVisible="false">
+                    <HeaderTemplate>
+                        <DxButton Id="addPersonRoleButton" Text="Add Person Role" IconCssClass="oi oi-plus" Click="() => this.Grid.StartEditNewRowAsync()"/>
+                    </HeaderTemplate>
+                </DxGridCommandColumn>
+            </Columns>
 
-        <EditFormTemplate Context="EditFormContext">
-            <PersonRoleDetails ViewModel="@this.ViewModel"
-                               OnSubmit="@(async () => await this.Grid.SaveChangesAsync())"
-                               OnCancel="@(async () => await this.Grid.CancelEditAsync())"/>
-        </EditFormTemplate>
+            <EditFormTemplate Context="EditFormContext">
+                <PersonRoleDetails ViewModel="@this.ViewModel"
+                                   OnSubmit="@(async () => await this.Grid.SaveChangesAsync())"
+                                   OnCancel="@(async () => await this.Grid.CancelEditAsync())"/>
+            </EditFormTemplate>
 
-        <CustomValidators>
-            <FluentValidationValidator/>
-        </CustomValidators>
+            <CustomValidators>
+                <FluentValidationValidator/>
+            </CustomValidators>
 
-    </DxGrid>
-    <div class="pb-3"></div>
+        </DxGrid>
+        
+        @if (this.IsRoleSelected)
+        {
+            <div style="width: 70%; padding: 30px;">
+                <PersonRoleDetails ViewModel="@this.ViewModel"
+                                        OnCancel="@(() => this.IsRoleSelected = false)"
+                                        OnSubmit="@(() => this.ViewModel.CreateOrEditPersonRole(false))"/>
+            </div>
+        }
+    </div>
 </LoadingComponent>
 
 <DxPopup @bind-Visible="@(this.ViewModel.IsOnDeprecationMode)" HeaderText="Please confirm" Width="auto" CloseOnOutsideClick="false">
diff --git a/COMETwebapp/Components/SiteDirectory/Roles/PersonRolesTable.razor.cs b/COMETwebapp/Components/SiteDirectory/Roles/PersonRolesTable.razor.cs
index 514e8efc..5914391d 100644
--- a/COMETwebapp/Components/SiteDirectory/Roles/PersonRolesTable.razor.cs
+++ b/COMETwebapp/Components/SiteDirectory/Roles/PersonRolesTable.razor.cs
@@ -44,14 +44,13 @@ public partial class PersonRolesTable : SelectedDeprecatableDataItemBase<PersonR
         /// <summary>
         /// The <see cref="IPersonRolesTableViewModel" /> for this component
         /// </summary>
-        [Parameter, Required]
+        [Inject]
         public IPersonRolesTableViewModel ViewModel { get; set; }
 
         /// <summary>
-        /// The callback for when a person role is selected
+        /// Gets the value to check if a role has been selected
         /// </summary>
-        [Parameter]
-        public EventCallback<PersonRole> OnRoleSelected { get; set; }
+        public bool IsRoleSelected { get; private set; }
 
         /// <summary>
         /// Method invoked when the component is ready to start, having received its
@@ -85,13 +84,13 @@ protected override void CustomizeEditThing(GridCustomizeEditModelEventArgs e)
         }
 
         /// <summary>
-        /// Metgid invoked everytime a row is selected
+        /// Method invoked everytime a row is selected
         /// </summary>
         /// <param name="row">The selected row</param>
-        private async Task OnSelectedDataItemChanged(PersonRoleRowViewModel row)
+        private void OnSelectedDataItemChanged(PersonRoleRowViewModel row)
         {
             this.ViewModel.Thing = row.Thing.Clone(true);
-            await this.OnRoleSelected.InvokeAsync(row.Thing);
+            this.IsRoleSelected = true;
         }
     }
 }
diff --git a/COMETwebapp/Components/SiteDirectory/Roles/RolesTables.razor b/COMETwebapp/Components/SiteDirectory/Roles/RolesTables.razor
deleted file mode 100644
index c3ec0c6a..00000000
--- a/COMETwebapp/Components/SiteDirectory/Roles/RolesTables.razor
+++ /dev/null
@@ -1,35 +0,0 @@
-<!------------------------------------------------------------------------------
-Copyright (c) 2023-2024 RHEA System S.A.
-    Authors: Sam Gerené, Alex Vorobiev, Alexander van Delft, Jaime Bernar, Antoine Théate, João Rua
-    This file is part of CDP4-COMET WEB Community Edition
-     The CDP4-COMET WEB Community Edition is the RHEA Web Application implementation of ECSS-E-TM-10-25 Annex A and Annex C.
-    The CDP4-COMET WEB Community Edition is free software; you can redistribute it and/or
-    modify it under the terms of the GNU Affero General Public
-    License as published by the Free Software Foundation; either
-    version 3 of the License, or (at your option) any later version.
-    The CDP4-COMET WEB Community Edition is distributed in the hope that it will be useful,
-    but WITHOUT ANY WARRANTY; without even the implied warranty of
-    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
-    Affero General Public License for more details.
-    You should have received a copy of the GNU Affero General Public License
-    along with this program. If not, see http://www.gnu.org/licenses/.
-------------------------------------------------------------------------------->
-@inherits DisposableComponent
-
-<div style="display: flex; justify-content: space-between;">
-    <div style="display: grid; width: fit-content;" class="d-grid pt-3">
-        <PersonRolesTable ViewModel="@this.PersonRolesViewModel"
-                          OnRoleSelected="@(this.OnRoleSelected)"/>
-
-        <ParticipantRolesTable ViewModel="@this.ParticipantRolesViewModel"
-                               OnRoleSelected="@(this.OnRoleSelected)"/>
-    </div>
-    
-    @if (this.SelectedComponent != null)
-    {
-        <div style="width: 70%; padding: 30px; padding-top: 55px;">
-            <DynamicComponent Type="@this.SelectedComponent" Parameters="this.parameters"/>
-        </div>
-    }
-</div>
-
diff --git a/COMETwebapp/Components/SiteDirectory/Roles/RolesTables.razor.cs b/COMETwebapp/Components/SiteDirectory/Roles/RolesTables.razor.cs
deleted file mode 100644
index 75dbdec6..00000000
--- a/COMETwebapp/Components/SiteDirectory/Roles/RolesTables.razor.cs
+++ /dev/null
@@ -1,99 +0,0 @@
-// --------------------------------------------------------------------------------------------------------------------
-// <copyright file="RolesTables.razor.cs" company="RHEA System S.A.">
-//    Copyright (c) 2023-2024 RHEA System S.A.
-//
-//    Authors: Sam Gerené, Alex Vorobiev, Alexander van Delft, Jaime Bernar, Théate Antoine, João Rua
-//
-//    This file is part of CDP4-COMET WEB Community Edition
-//    The CDP4-COMET WEB Community Edition is the RHEA Web Application implementation of ECSS-E-TM-10-25 Annex A and Annex C.
-//
-//    The CDP4-COMET WEB Community Edition is free software; you can redistribute it and/or
-//    modify it under the terms of the GNU Affero General Public
-//    License as published by the Free Software Foundation; either
-//    version 3 of the License, or (at your option) any later version.
-//
-//    The CDP4-COMET WEB Community Edition is distributed in the hope that it will be useful,
-//    but WITHOUT ANY WARRANTY; without even the implied warranty of
-//    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
-//    Affero General Public License for more details.
-//
-//    You should have received a copy of the GNU Affero General Public License
-//    along with this program.  If not, see <http://www.gnu.org/licenses/>.
-// </copyright>
-// --------------------------------------------------------------------------------------------------------------------
-
-namespace COMETwebapp.Components.SiteDirectory.Roles
-{
-    using CDP4Common.CommonData;
-    using CDP4Common.SiteDirectoryData;
-
-    using COMET.Web.Common.Components;
-
-    using COMETwebapp.ViewModels.Components.SiteDirectory.Roles;
-
-    using Microsoft.AspNetCore.Components;
-
-    /// <summary>
-    /// Support class for the <see cref="RolesTables"/>
-    /// </summary>
-    public partial class RolesTables : DisposableComponent
-    {
-        /// <summary>
-        /// The <see cref="IParticipantRolesTableViewModel" /> for this component
-        /// </summary>
-        [Inject]
-        public IParticipantRolesTableViewModel ParticipantRolesViewModel { get; set; }
-
-        /// <summary>
-        /// The <see cref="IPersonRolesTableViewModel" /> for this component
-        /// </summary>
-        [Inject]
-        public IPersonRolesTableViewModel PersonRolesViewModel { get; set; }
-
-        /// <summary>
-        /// The selected component type
-        /// </summary>
-        public Type SelectedComponent { get; private set; }
-
-        /// <summary>
-        /// A <see cref="Dictionary{TKey,TValue}" /> for the <see cref="DynamicComponent.Parameters" />
-        /// </summary>
-        private readonly Dictionary<string, object> parameters = [];
-
-        /// <summary>
-        /// A map with all the available detail components and their names
-        /// </summary>
-        private readonly Dictionary<Type, (Type, object)> mapOfRolesAndDetailsData = [];
-
-        /// <summary>
-        /// Method invoked when the component is ready to start, having received its
-        /// initial parameters from its parent in the render tree.
-        /// </summary>
-        protected override void OnInitialized()
-        {
-            base.OnInitialized();
-
-            this.mapOfRolesAndDetailsData.Clear();
-            this.mapOfRolesAndDetailsData.Add(typeof(ParticipantRole), (typeof(ParticipantRoleDetails), this.ParticipantRolesViewModel));
-            this.mapOfRolesAndDetailsData.Add(typeof(PersonRole), (typeof(PersonRoleDetails), this.PersonRolesViewModel));
-        }
-
-        /// <summary>
-        /// Method that is executed everytime a role is selected
-        /// </summary>
-        /// <param name="role"></param>
-        private void OnRoleSelected(Thing role)
-        {
-            var tupleOfDetailsData = this.mapOfRolesAndDetailsData.FirstOrDefault(x => x.Key == role.GetType()).Value;
-            this.parameters["ViewModel"] = tupleOfDetailsData.Item2;
-
-            this.parameters["OnCancel"] = new EventCallbackFactory().Create(this, async () =>
-            {
-                this.SelectedComponent = null;
-                await this.InvokeAsync(this.StateHasChanged);
-            });
-
-            this.SelectedComponent = tupleOfDetailsData.Item1;
-        }
-    }
-}
diff --git a/COMETwebapp/Pages/SiteDirectory/DirectoryPage.razor.cs b/COMETwebapp/Pages/SiteDirectory/DirectoryPage.razor.cs
index a9d9af8a..4158be00 100644
--- a/COMETwebapp/Pages/SiteDirectory/DirectoryPage.razor.cs
+++ b/COMETwebapp/Pages/SiteDirectory/DirectoryPage.razor.cs
@@ -51,7 +51,8 @@ public partial class DirectoryPage
             {typeof(DomainsOfExpertiseTable), "Domains"},
             {typeof(OrganizationsTable), "Organizations"},
             {typeof(UserManagementTable), "User Management"},
-            {typeof(RolesTables), "Roles"},
+            {typeof(PersonRolesTable), "Person Roles"},
+            {typeof(ParticipantRolesTable), "Participant Roles"},
         };
 
         /// <summary>