diff --git a/COMET.Web.Common/COMET.Web.Common.csproj b/COMET.Web.Common/COMET.Web.Common.csproj
index cab7d65a..1b0339e6 100644
--- a/COMET.Web.Common/COMET.Web.Common.csproj
+++ b/COMET.Web.Common/COMET.Web.Common.csproj
@@ -38,6 +38,7 @@
     <PackageReference Include="Microsoft.Extensions.Configuration.Abstractions" Version="8.0.0" />
     <PackageReference Include="Microsoft.Extensions.Configuration.Binder" Version="8.0.1" />
     <PackageReference Include="ReactiveUI" Version="19.5.41" />
+    <PackageReference Include="System.Drawing.Common" Version="5.0.3" />
     <PackageReference Include="System.Text.RegularExpressions" Version="4.3.1" />
   </ItemGroup>
   <ItemGroup>
diff --git a/COMETwebapp.Tests/Components/EngineeringModel/PublicationsTableTestFixture.cs b/COMETwebapp.Tests/Components/EngineeringModel/PublicationsTableTestFixture.cs
index 05d05d2d..a6dba648 100644
--- a/COMETwebapp.Tests/Components/EngineeringModel/PublicationsTableTestFixture.cs
+++ b/COMETwebapp.Tests/Components/EngineeringModel/PublicationsTableTestFixture.cs
@@ -144,7 +144,7 @@ public async Task VerifyPublicationDetails()
 
             Assert.Multiple(() =>
             {
-                Assert.That(this.renderer.Instance.IsPublicationDetailsPopupOpen, Is.EqualTo(true));
+                Assert.That(this.renderer.Instance.IsOnEditMode, Is.EqualTo(true));
                 Assert.That(this.renderer.Instance.SelectedRow, Is.EqualTo(this.viewModel.Object.Rows.Items.First()));
             });
         }
diff --git a/COMETwebapp.Tests/Components/SiteDirectory/DomainsOfExpertiseTableTestFixture.cs b/COMETwebapp.Tests/Components/SiteDirectory/DomainsOfExpertiseTableTestFixture.cs
index f01eacc1..a9d7c979 100644
--- a/COMETwebapp.Tests/Components/SiteDirectory/DomainsOfExpertiseTableTestFixture.cs
+++ b/COMETwebapp.Tests/Components/SiteDirectory/DomainsOfExpertiseTableTestFixture.cs
@@ -42,6 +42,7 @@ namespace COMETwebapp.Tests.Components.SiteDirectory
 
     using DynamicData;
 
+    using Microsoft.AspNetCore.Components.Forms;
     using Microsoft.Extensions.DependencyInjection;
 
     using Moq;
@@ -142,16 +143,21 @@ public async Task VerifyAddingOrEditingDomainOfExpertise()
 
             Assert.Multiple(() =>
             {
-                Assert.That(renderer.Instance.ShouldCreateThing, Is.EqualTo(true));
+                Assert.That(renderer.Instance.IsOnEditMode, Is.EqualTo(false));
                 Assert.That(this.viewModel.Object.Thing, Is.InstanceOf(typeof(DomainOfExpertise)));
             });
 
-            var editDomainOfExpertiseButton = renderer.FindComponents<DxButton>().First(x => x.Instance.Id == "editDomainOfExpertiseButton");
-            await renderer.InvokeAsync(editDomainOfExpertiseButton.Instance.Click.InvokeAsync);
+            var domainsGrid = renderer.FindComponent<DxGrid>();
+            await renderer.InvokeAsync(() => domainsGrid.Instance.SelectedDataItemChanged.InvokeAsync(new DomainOfExpertiseRowViewModel(this.domainOfExpertise1)));
+            Assert.That(renderer.Instance.IsOnEditMode, Is.EqualTo(true));
+
+            var domainsForm = renderer.FindComponents<DomainsOfExpertiseForm>()[1];
+            var domainsEditForm = domainsForm.FindComponent<EditForm>();
+            await domainsForm.InvokeAsync(domainsEditForm.Instance.OnValidSubmit.InvokeAsync);
 
             Assert.Multiple(() =>
             {
-                Assert.That(renderer.Instance.ShouldCreateThing, Is.EqualTo(false));
+                this.viewModel.Verify(x => x.CreateOrEditDomainOfExpertise(false), Times.Once);
                 Assert.That(this.viewModel.Object.Thing, Is.InstanceOf(typeof(DomainOfExpertise)));
             });
 
diff --git a/COMETwebapp.Tests/Components/SiteDirectory/EngineeringModels/ActiveDomainsTableTestFixture.cs b/COMETwebapp.Tests/Components/SiteDirectory/EngineeringModels/ActiveDomainsTableTestFixture.cs
index e1e504c1..9f44d9bf 100644
--- a/COMETwebapp.Tests/Components/SiteDirectory/EngineeringModels/ActiveDomainsTableTestFixture.cs
+++ b/COMETwebapp.Tests/Components/SiteDirectory/EngineeringModels/ActiveDomainsTableTestFixture.cs
@@ -120,12 +120,12 @@ public void VerifyOnInitialized()
         [Test]
         public async Task VerifyEditActiveDomains()
         {
-            Assert.That(this.renderer.Instance.IsEditPopupVisible, Is.EqualTo(false));
+            Assert.That(this.renderer.Instance.IsOnEditMode, Is.EqualTo(false));
 
             var editActiveDomainsClickableItem = this.renderer.FindComponent<DxToolbarItem>();
             await this.renderer.InvokeAsync(editActiveDomainsClickableItem.Instance.Click.InvokeAsync);
 
-            Assert.That(this.renderer.Instance.IsEditPopupVisible, Is.EqualTo(true));
+            Assert.That(this.renderer.Instance.IsOnEditMode, Is.EqualTo(true));
 
             var saveActiveDomainsButton = this.renderer.FindComponents<DxButton>().First(x => x.Instance.Id == "saveActiveDomainsButton");
             await this.renderer.InvokeAsync(saveActiveDomainsButton.Instance.Click.InvokeAsync);
@@ -140,7 +140,7 @@ public async Task VerifyEditActiveDomains()
             Assert.Multiple(() =>
             {
                 this.viewModel.Verify(x => x.ResetSelectedDomainsOfExpertise(), Times.Once);
-                Assert.That(this.renderer.Instance.IsEditPopupVisible, Is.EqualTo(false));
+                Assert.That(this.renderer.Instance.IsOnEditMode, Is.EqualTo(false));
             });
         }
     }
diff --git a/COMETwebapp.Tests/Components/SiteDirectory/EngineeringModels/EngineeringModelsTableTestFixture.cs b/COMETwebapp.Tests/Components/SiteDirectory/EngineeringModels/EngineeringModelsTableTestFixture.cs
index 679ea7c1..79b45c8e 100644
--- a/COMETwebapp.Tests/Components/SiteDirectory/EngineeringModels/EngineeringModelsTableTestFixture.cs
+++ b/COMETwebapp.Tests/Components/SiteDirectory/EngineeringModels/EngineeringModelsTableTestFixture.cs
@@ -141,13 +141,13 @@ public async Task VerifyAddEngineeringModel()
         [Test]
         public async Task VerifyRowClick()
         {
-            Assert.That(this.renderer.Instance.IsModelSelected, Is.EqualTo(false));
+            Assert.That(this.renderer.Instance.IsOnEditMode, 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.renderer.Instance.IsModelSelected, Is.EqualTo(true));
+            Assert.That(this.renderer.Instance.IsOnEditMode, Is.EqualTo(true));
         }
     }
 }
diff --git a/COMETwebapp.Tests/Components/SiteDirectory/EngineeringModels/ParticipantsTableTestFixture.cs b/COMETwebapp.Tests/Components/SiteDirectory/EngineeringModels/ParticipantsTableTestFixture.cs
index e960fa3b..4e7add78 100644
--- a/COMETwebapp.Tests/Components/SiteDirectory/EngineeringModels/ParticipantsTableTestFixture.cs
+++ b/COMETwebapp.Tests/Components/SiteDirectory/EngineeringModels/ParticipantsTableTestFixture.cs
@@ -133,7 +133,7 @@ public void VerifyOnInitialized()
             var details = this.renderer.Find("a");
             details.ClickAsync(new MouseEventArgs());
 
-            Assert.That(this.renderer.Instance.IsActiveDomainsDetailsOpen, Is.EqualTo(true));
+            Assert.That(this.renderer.Instance.IsOnEditMode, Is.EqualTo(true));
         }
 
         [Test]
diff --git a/COMETwebapp.Tests/Components/SiteDirectory/Roles/ParticipantRolesTableTestFixture.cs b/COMETwebapp.Tests/Components/SiteDirectory/Roles/ParticipantRolesTableTestFixture.cs
index 92d16183..ea8beecf 100644
--- a/COMETwebapp.Tests/Components/SiteDirectory/Roles/ParticipantRolesTableTestFixture.cs
+++ b/COMETwebapp.Tests/Components/SiteDirectory/Roles/ParticipantRolesTableTestFixture.cs
@@ -117,20 +117,20 @@ public async Task VerifyAddParticipantRoleClick()
         [Test]
         public async Task VerifyRowClick()
         {
-            Assert.That(this.renderer.Instance.IsRoleSelected, Is.EqualTo(false));
+            Assert.That(this.renderer.Instance.IsOnEditMode, 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.renderer.Instance.IsRoleSelected, Is.EqualTo(true));
+            Assert.That(this.renderer.Instance.IsOnEditMode, Is.EqualTo(true));
 
             var details = this.renderer.FindComponent<ParticipantRoleDetails>();
             await this.renderer.InvokeAsync(details.Instance.OnSubmit.InvokeAsync);
             this.viewModel.Verify(x => x.CreateOrEditParticipantRole(false), Times.Once);
 
             await this.renderer.InvokeAsync(details.Instance.OnCancel.InvokeAsync);
-            Assert.That(this.renderer.Instance.IsRoleSelected, Is.EqualTo(false));
+            Assert.That(this.renderer.Instance.IsOnEditMode, Is.EqualTo(false));
         }
     }
 }
diff --git a/COMETwebapp.Tests/Components/SiteDirectory/Roles/PersonRolesTableTestFixture.cs b/COMETwebapp.Tests/Components/SiteDirectory/Roles/PersonRolesTableTestFixture.cs
index c6795a2d..12c42d83 100644
--- a/COMETwebapp.Tests/Components/SiteDirectory/Roles/PersonRolesTableTestFixture.cs
+++ b/COMETwebapp.Tests/Components/SiteDirectory/Roles/PersonRolesTableTestFixture.cs
@@ -117,20 +117,20 @@ public async Task VerifyAddPersonRoleClick()
         [Test]
         public async Task VerifyRowClick()
         {
-            Assert.That(this.renderer.Instance.IsRoleSelected, Is.EqualTo(false));
+            Assert.That(this.renderer.Instance.IsOnEditMode, 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.renderer.Instance.IsRoleSelected, Is.EqualTo(true));
+            Assert.That(this.renderer.Instance.IsOnEditMode, Is.EqualTo(true));
 
             var details = this.renderer.FindComponent<PersonRoleDetails>();
             await this.renderer.InvokeAsync(details.Instance.OnSubmit.InvokeAsync);
             this.viewModel.Verify(x => x.CreateOrEditPersonRole(false), Times.Once);
 
             await this.renderer.InvokeAsync(details.Instance.OnCancel.InvokeAsync);
-            Assert.That(this.renderer.Instance.IsRoleSelected, Is.EqualTo(false));
+            Assert.That(this.renderer.Instance.IsOnEditMode, Is.EqualTo(false));
         }
     }
 }
diff --git a/COMETwebapp/Components/Common/DataItemDetailsComponent.razor b/COMETwebapp/Components/Common/DataItemDetailsComponent.razor
new file mode 100644
index 00000000..d165df59
--- /dev/null
+++ b/COMETwebapp/Components/Common/DataItemDetailsComponent.razor
@@ -0,0 +1,31 @@
+<!------------------------------------------------------------------------------
+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/.
+------------------------------------------------------------------------------->
+
+@namespace COMETwebapp.Components.Common
+
+<div class="data-item-details-section">
+    @if (this.IsSelected)
+    {
+        @this.ChildContent
+    }
+    else
+    {
+        <h5>Select an item to view or edit</h5>
+        <img src="images/comet-logo-black.png" class="data-item-details-image" alt="Comet Web"/>
+    }
+</div>
+
diff --git a/COMETwebapp/Components/Common/DataItemDetailsComponent.razor.cs b/COMETwebapp/Components/Common/DataItemDetailsComponent.razor.cs
new file mode 100644
index 00000000..cba32465
--- /dev/null
+++ b/COMETwebapp/Components/Common/DataItemDetailsComponent.razor.cs
@@ -0,0 +1,46 @@
+// --------------------------------------------------------------------------------------------------------------------
+// <copyright file="DataItemDetailsComponent.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, 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.Components.Common
+{
+    using Microsoft.AspNetCore.Components;
+
+    /// <summary>
+    /// The <see cref="DataItemDetailsComponent" /> is used to display the details of a selected data item
+    /// </summary>
+    public partial class DataItemDetailsComponent
+    {
+        /// <summary>
+        /// Value asserting that the <see cref="DataItemDetailsComponent" /> is selected or not
+        /// </summary>
+        [Parameter]
+        public bool IsSelected { get; set; }
+
+        /// <summary>
+        /// The child content of the component
+        /// </summary>
+        [Parameter]
+        public RenderFragment ChildContent { get; set; }
+    }
+}
diff --git a/COMETwebapp/Components/Common/DataItemDetailsComponent.razor.css b/COMETwebapp/Components/Common/DataItemDetailsComponent.razor.css
new file mode 100644
index 00000000..efc58176
--- /dev/null
+++ b/COMETwebapp/Components/Common/DataItemDetailsComponent.razor.css
@@ -0,0 +1,10 @@
+.data-item-details-section {
+    width: 50%;
+    padding: 30px;
+}
+
+.data-item-details-image {
+    margin: auto;
+    display: block;
+    width: 300px;
+}
diff --git a/COMETwebapp/Components/Common/SelectedDataItemBase.razor.cs b/COMETwebapp/Components/Common/SelectedDataItemBase.razor.cs
index 11779081..c714da11 100644
--- a/COMETwebapp/Components/Common/SelectedDataItemBase.razor.cs
+++ b/COMETwebapp/Components/Common/SelectedDataItemBase.razor.cs
@@ -53,6 +53,11 @@ public abstract partial class SelectedDataItemBase<T, TRow> : DisposableComponen
         /// </summary>
         public bool ShouldCreateThing { get; protected set; }
 
+        /// <summary>
+        /// Gets or sets the condition to check if the current component is on edit mode
+        /// </summary>
+        public bool IsOnEditMode { get; protected set; }
+
         /// <summary>
         /// Gets or sets the grid control that is being customized.
         /// </summary>
diff --git a/COMETwebapp/Components/EngineeringModel/CommonFileStoresTable.razor b/COMETwebapp/Components/EngineeringModel/CommonFileStoresTable.razor
index 5bfd0f5a..160fa89f 100644
--- a/COMETwebapp/Components/EngineeringModel/CommonFileStoresTable.razor
+++ b/COMETwebapp/Components/EngineeringModel/CommonFileStoresTable.razor
@@ -14,12 +14,11 @@ Copyright (c) 2023-2024 RHEA System S.A.
     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/.
 ------------------------------------------------------------------------------->
-
 @using COMETwebapp.Components.EngineeringModel.FileStore
 @inherits SelectedDataItemBase<CommonFileStore, CommonFileStoreRowViewModel>
 
 <LoadingComponent IsVisible="@(this.ViewModel.IsLoading)">
-    <div style="display: flex; justify-content: space-between;">
+    <div class="d-flex justify-content-between">
         <DxGrid @ref="this.Grid"
                 Data="this.ViewModel.Rows.Items"
                 ColumnResizeMode="GridColumnResizeMode.ColumnsContainer"
@@ -37,7 +36,8 @@ Copyright (c) 2023-2024 RHEA System S.A.
                 PagerNavigationMode="PagerNavigationMode.Auto"
                 PageSizeSelectorVisible="true"
                 PageSizeSelectorItems="@(new int[] { 20, 35, 50 })"
-                PageSizeSelectorAllRowsItemVisible="true">
+                PageSizeSelectorAllRowsItemVisible="true"
+                CssClass="height-fit-content">
             <Columns>
                 <DxGridDataColumn FieldName="@nameof(CommonFileStoreRowViewModel.Name)" MinWidth="150" />
                 <DxGridDataColumn FieldName="@nameof(CommonFileStoreRowViewModel.CreatedOn)" MinWidth="80" SearchEnabled="false" />
@@ -67,18 +67,14 @@ Copyright (c) 2023-2024 RHEA System S.A.
             </EditFormTemplate>
         </DxGrid>
         
-        @if (this.IsOnEditMode)
-        {
-            <div style="width: 70%; padding: 30px;">
-                <CommonFileStoresForm ViewModel="@this.ViewModel"
-                                      @bind-IsVisible="@this.IsOnEditMode"
-                                      ShouldCreate="false"/>
-                <DxButton Click="this.OnSeeFolderFileStructureClick">
-                    See Folder-File Structure
-                </DxButton>
-            </div>
-        }
-        
+        <DataItemDetailsComponent IsSelected="@this.IsOnEditMode">
+            <CommonFileStoresForm ViewModel="@this.ViewModel"
+                                  @bind-IsVisible="@this.IsOnEditMode"
+                                  ShouldCreate="false"/>
+            <DxButton Click="this.OnSeeFolderFileStructureClick">
+                See Folder-File Structure
+            </DxButton>
+        </DataItemDetailsComponent>
     </div>
 </LoadingComponent>
 
diff --git a/COMETwebapp/Components/EngineeringModel/CommonFileStoresTable.razor.cs b/COMETwebapp/Components/EngineeringModel/CommonFileStoresTable.razor.cs
index e0a576cc..b486fe27 100644
--- a/COMETwebapp/Components/EngineeringModel/CommonFileStoresTable.razor.cs
+++ b/COMETwebapp/Components/EngineeringModel/CommonFileStoresTable.razor.cs
@@ -47,11 +47,6 @@ public partial class CommonFileStoresTable : SelectedDataItemBase<CommonFileStor
         [Parameter, Required]
         public ICommonFileStoreTableViewModel ViewModel { get; set; }
 
-        /// <summary>
-        /// Gets the value to check if component is on edit mode
-        /// </summary>
-        public bool IsOnEditMode { get; private set; }
-
         /// <summary>
         /// Gets the value to check if the folder file structure component is visible
         /// </summary>
diff --git a/COMETwebapp/Components/EngineeringModel/OptionsTable.razor b/COMETwebapp/Components/EngineeringModel/OptionsTable.razor
index 00e5bbf3..47786c94 100644
--- a/COMETwebapp/Components/EngineeringModel/OptionsTable.razor
+++ b/COMETwebapp/Components/EngineeringModel/OptionsTable.razor
@@ -14,11 +14,10 @@ Copyright (c) 2023-2024 RHEA System S.A.
     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/.
 ------------------------------------------------------------------------------->
-@using COMETwebapp.ViewModels.Components.EngineeringModel.Rows
-@inherits SelectedDataItemBase<CDP4Common.EngineeringModelData.Option, OptionRowViewModel>
+@inherits SelectedDataItemBase<Option, OptionRowViewModel>
 
 <LoadingComponent IsVisible="@(this.ViewModel.IsLoading)">
-    <div style="display: flex; justify-content: space-between;">
+    <div class="d-flex justify-content-between">
         <DxGrid @ref="this.Grid"
                 Data="this.ViewModel.Rows.Items"
                 ColumnResizeMode="GridColumnResizeMode.ColumnsContainer"
@@ -37,7 +36,8 @@ Copyright (c) 2023-2024 RHEA System S.A.
                 PagerNavigationMode="PagerNavigationMode.Auto"
                 PageSizeSelectorVisible="true"
                 PageSizeSelectorItems="@(new int[] { 20, 35, 50 })"
-                PageSizeSelectorAllRowsItemVisible="true">
+                PageSizeSelectorAllRowsItemVisible="true"
+                CssClass="height-fit-content">
             <Columns>
                 <DxGridDataColumn FieldName="@nameof(OptionRowViewModel.Name)" MinWidth="150"/>
                 <DxGridDataColumn FieldName="@nameof(OptionRowViewModel.ShortName)" MinWidth="80" SearchEnabled="false"/>
@@ -68,15 +68,11 @@ Copyright (c) 2023-2024 RHEA System S.A.
             </EditFormTemplate>
         </DxGrid>
         
-        @if (this.IsOnEditMode)
-        {
-            <div style="width: 70%; padding: 30px;">     
-                <OptionsForm ViewModel="@this.ViewModel"
-                             @bind-IsVisible="@this.IsOnEditMode"
-                             ShouldCreate="false"/>
-            </div>
-        }
-        
+        <DataItemDetailsComponent IsSelected="@this.IsOnEditMode">
+            <OptionsForm ViewModel="@this.ViewModel"
+                         @bind-IsVisible="@this.IsOnEditMode"
+                         ShouldCreate="false"/>
+        </DataItemDetailsComponent>
     </div>
 </LoadingComponent>
 
diff --git a/COMETwebapp/Components/EngineeringModel/OptionsTable.razor.cs b/COMETwebapp/Components/EngineeringModel/OptionsTable.razor.cs
index 7241b397..9692bbe2 100644
--- a/COMETwebapp/Components/EngineeringModel/OptionsTable.razor.cs
+++ b/COMETwebapp/Components/EngineeringModel/OptionsTable.razor.cs
@@ -47,11 +47,6 @@ public partial class OptionsTable : SelectedDataItemBase<Option, OptionRowViewMo
         [Parameter, Required]
         public IOptionsTableViewModel ViewModel { get; set; }
 
-        /// <summary>
-        /// Gets the value to check if component is on edit mode
-        /// </summary>
-        public bool IsOnEditMode { get; private set; }
-
         /// <summary>
         /// Method invoked when the component is ready to start, having received its
         /// initial parameters from its parent in the render tree.
diff --git a/COMETwebapp/Components/EngineeringModel/PublicationsTable.razor b/COMETwebapp/Components/EngineeringModel/PublicationsTable.razor
index e9919902..bd3f2c72 100644
--- a/COMETwebapp/Components/EngineeringModel/PublicationsTable.razor
+++ b/COMETwebapp/Components/EngineeringModel/PublicationsTable.razor
@@ -73,7 +73,7 @@ Copyright (c) 2023-2024 RHEA System S.A.
 
 </LoadingComponent>
 
-<DxPopup @bind-Visible="@this.IsPublicationDetailsPopupOpen" HeaderText="Published Parameters" Width="60%" CloseOnOutsideClick="false">
+<DxPopup @bind-Visible="@this.IsOnEditMode" HeaderText="Published Parameters" Width="60%" CloseOnOutsideClick="false">
     <DxGrid Data="@(this.ViewModel.GetPublishedParametersRows(this.SelectedRow.Thing))"
             ColumnResizeMode="GridColumnResizeMode.ColumnsContainer"
             ShowAllRows="true">
diff --git a/COMETwebapp/Components/EngineeringModel/PublicationsTable.razor.cs b/COMETwebapp/Components/EngineeringModel/PublicationsTable.razor.cs
index 437314b7..6cf91a71 100644
--- a/COMETwebapp/Components/EngineeringModel/PublicationsTable.razor.cs
+++ b/COMETwebapp/Components/EngineeringModel/PublicationsTable.razor.cs
@@ -54,11 +54,6 @@ public partial class PublicationsTable : SelectedDataItemBase<Publication, Publi
         /// </summary>
         public PublicationRowViewModel SelectedRow { get; private set; }
 
-        /// <summary>
-        /// Gets the value to check if the publication details popup is open
-        /// </summary>
-        public bool IsPublicationDetailsPopupOpen { get; private set; }
-
         /// <summary>
         /// Method invoked when the component is ready to start, having received its
         /// initial parameters from its parent in the render tree.
@@ -78,7 +73,7 @@ protected override void OnInitialized()
         private void OnSelectedDataItemChanged(PublicationRowViewModel row)
         {
             this.SelectedRow = row;
-            this.IsPublicationDetailsPopupOpen = true;
+            this.IsOnEditMode = true;
         }
 
         /// <summary>
diff --git a/COMETwebapp/Components/SiteDirectory/DomainsOfExpertiseForm.razor b/COMETwebapp/Components/SiteDirectory/DomainsOfExpertiseForm.razor
new file mode 100644
index 00000000..546495f7
--- /dev/null
+++ b/COMETwebapp/Components/SiteDirectory/DomainsOfExpertiseForm.razor
@@ -0,0 +1,46 @@
+<!------------------------------------------------------------------------------
+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 SelectedDataItemForm
+
+<EditForm Context="editFormContext" Model="@(this.ViewModel.Thing)" OnValidSubmit="@(this.OnValidSubmit)">
+    <FluentValidationValidator />
+    <DxFormLayout CssClass="w-100">
+        <DxFormLayoutItem Caption="Shortname:" ColSpanMd="10">
+            <DxTextBox @bind-Text="@this.ViewModel.Thing.ShortName"/>
+        </DxFormLayoutItem>
+        <DxFormLayoutItem Caption="Name:" ColSpanMd="10">
+            <DxTextBox @bind-Text="@this.ViewModel.Thing.Name"/>
+        </DxFormLayoutItem>
+        <DxFormLayoutItem Caption="Deprecated:" ColSpanMd="6">
+            <DxCheckBox @bind-Checked="@this.ViewModel.Thing.IsDeprecated"/>
+        </DxFormLayoutItem>
+    </DxFormLayout>
+    <div class="pt-3"></div>
+    <ValidationSummary />
+    <div class="dxbl-grid-edit-form-buttons">
+        <DxButton Id="saveCommonFileStoreButton"
+                  SubmitFormOnClick="true">
+            Save
+        </DxButton>
+        
+        <DxButton Id="cancelCommonFileStoreButton"
+                  Click="@(() => this.OnCancel())"
+                  RenderStyle="ButtonRenderStyle.Secondary">
+            Cancel
+        </DxButton>
+    </div>
+</EditForm>
diff --git a/COMETwebapp/Components/SiteDirectory/DomainsOfExpertiseForm.razor.cs b/COMETwebapp/Components/SiteDirectory/DomainsOfExpertiseForm.razor.cs
new file mode 100644
index 00000000..081a6cc7
--- /dev/null
+++ b/COMETwebapp/Components/SiteDirectory/DomainsOfExpertiseForm.razor.cs
@@ -0,0 +1,55 @@
+// --------------------------------------------------------------------------------------------------------------------
+// <copyright file="DomainsOfExpertiseForm.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
+{
+    using System.ComponentModel.DataAnnotations;
+
+    using COMETwebapp.Components.Common;
+    using COMETwebapp.ViewModels.Components.SiteDirectory.DomainsOfExpertise;
+
+    using Microsoft.AspNetCore.Components;
+
+    /// <summary>
+    /// Support class for the <see cref="DomainsOfExpertiseForm"/>
+    /// </summary>
+    public partial class DomainsOfExpertiseForm : SelectedDataItemForm
+    {
+        /// <summary>
+        /// The <see cref="IDomainsOfExpertiseTableViewModel" /> for this component
+        /// </summary>
+        [Parameter, Required]
+        public IDomainsOfExpertiseTableViewModel ViewModel { get; set; }
+
+        /// <summary>
+        /// Method that is executed when there is a valid submit
+        /// </summary>
+        /// <returns>A <see cref="Task"/></returns>
+        protected override async Task OnValidSubmit()
+        {
+            await this.ViewModel.CreateOrEditDomainOfExpertise(this.ShouldCreate);
+            await base.OnValidSubmit();
+        }
+    }
+}
diff --git a/COMETwebapp/Components/SiteDirectory/DomainsOfExpertiseTable.razor b/COMETwebapp/Components/SiteDirectory/DomainsOfExpertiseTable.razor
index 922b7f37..661b78b1 100644
--- a/COMETwebapp/Components/SiteDirectory/DomainsOfExpertiseTable.razor
+++ b/COMETwebapp/Components/SiteDirectory/DomainsOfExpertiseTable.razor
@@ -18,65 +18,65 @@ Copyright (c) 2023-2024 RHEA System S.A.
 @inherits COMETwebapp.Components.Common.SelectedDeprecatableDataItemBase<CDP4Common.SiteDirectoryData.DomainOfExpertise, DomainOfExpertiseRowViewModel>
 
 <LoadingComponent IsVisible="@(this.ViewModel.IsLoading)">
-    <DxGrid @ref="this.Grid"
-            Data="this.ViewModel.Rows.Items"
-            ColumnResizeMode="GridColumnResizeMode.ColumnsContainer"
-            ShowSearchBox="true"
-            SearchBoxNullText="Search for a domain of expertise..."
-            PopupEditFormCssClass="pw-800"
-            PopupEditFormHeaderText="Domain Of Expertise"
-            CustomizeElement="DisableDeprecatedThing"
-            CustomizeEditModel="this.CustomizeEditThing"
-            EditMode="GridEditMode.PopupEditForm"
-            EditModelSaving="@(() => this.OnEditThingSaving())"
-            PageSize="20"
-            PagerNavigationMode="PagerNavigationMode.Auto"
-            PageSizeSelectorVisible="true"
-            PageSizeSelectorItems="@(new int[] { 20,35,50 })"
-            PageSizeSelectorAllRowsItemVisible="true">
-        <Columns>
-            <DxGridDataColumn FieldName="@nameof(DomainOfExpertiseRowViewModel.Name)" MinWidth="150" />
-            <DxGridDataColumn FieldName="@nameof(DomainOfExpertiseRowViewModel.ShortName)" MinWidth="80" SearchEnabled="false" />
-            <DxGridDataColumn FieldName="@nameof(DomainOfExpertiseRowViewModel.IsDeprecated)" UnboundType="GridUnboundColumnType.Boolean" Visible="false" Caption="Is Deprecated" MinWidth="80" SearchEnabled="false" />
-            <DxGridCommandColumn Width="200px" EditButtonVisible="false">
-                <HeaderTemplate>
-                    <DxButton Id="addDomainOfExpertiseButton" Text="Add Domain Of Expertise" IconCssClass="oi oi-plus" Click="() => this.Grid.StartEditNewRowAsync()" />
-                </HeaderTemplate>
-                <CellDisplayTemplate>
-                    @{
-                        var row = (DomainOfExpertiseRowViewModel)context.DataItem;
+    <div class="d-flex justify-content-between">
+        <DxGrid @ref="this.Grid"
+                Data="this.ViewModel.Rows.Items"
+                ColumnResizeMode="GridColumnResizeMode.ColumnsContainer"
+                ShowSearchBox="true"
+                SearchBoxNullText="Search for a domain of expertise..."
+                AllowSelectRowByClick="true"
+                SelectionMode="GridSelectionMode.Single"
+                SelectedDataItemChanged="@((row) => this.OnSelectedDataItemChanged((DomainOfExpertiseRowViewModel)row))"
+                PopupEditFormCssClass="pw-800"
+                PopupEditFormHeaderText="Domain Of Expertise"
+                CustomizeElement="DisableDeprecatedThing"
+                CustomizeEditModel="this.CustomizeEditThing"
+                EditMode="GridEditMode.PopupEditForm"
+                EditModelSaving="@(() => this.OnEditThingSaving())"
+                EditFormButtonsVisible="false"
+                PageSize="20"
+                PagerNavigationMode="PagerNavigationMode.Auto"
+                PageSizeSelectorVisible="true"
+                PageSizeSelectorItems="@(new int[] { 20, 35, 50 })"
+                PageSizeSelectorAllRowsItemVisible="true"
+                CssClass="height-fit-content">
+            <Columns>
+                <DxGridDataColumn FieldName="@nameof(DomainOfExpertiseRowViewModel.Name)" MinWidth="150"/>
+                <DxGridDataColumn FieldName="@nameof(DomainOfExpertiseRowViewModel.ShortName)" MinWidth="80" SearchEnabled="false"/>
+                <DxGridDataColumn FieldName="@nameof(DomainOfExpertiseRowViewModel.IsDeprecated)" UnboundType="GridUnboundColumnType.Boolean" Visible="false" Caption="Is Deprecated" MinWidth="80" SearchEnabled="false"/>
+                <DxGridCommandColumn Width="200px" EditButtonVisible="false">
+                    <HeaderTemplate>
+                        <DxButton Id="addDomainOfExpertiseButton" Text="Add Domain Of Expertise" IconCssClass="oi oi-plus" Click="() => this.Grid.StartEditNewRowAsync()"/>
+                    </HeaderTemplate>
+                    <CellDisplayTemplate>
+                        @{
+                            var row = (DomainOfExpertiseRowViewModel)context.DataItem;
 
-                        <DxButton Id="editDomainOfExpertiseButton" Text="Edit" Click="@(() => this.Grid.StartEditRowAsync(context.VisibleIndex))" Enabled="@(row.IsAllowedToWrite)" />
+                            <DxButton Id="@(row.IsDeprecated ? "undeprecateButton" : "deprecateButton")"
+                                      Text="@(row.IsDeprecated ? "Un-deprecate" : "Deprecate")"
+                                      Click="() => this.ViewModel.OnDeprecateUnDeprecateButtonClick(row)"
+                                      Enabled="@(row.IsAllowedToWrite)"/>
+                        }
+                    </CellDisplayTemplate>
+                </DxGridCommandColumn>
+            </Columns>
 
-                        <DxButton Id="@(row.IsDeprecated ? "undeprecateButton" : "deprecateButton")"
-                                  Text="@(row.IsDeprecated ? "Un-deprecate" : "Deprecate")"
-                                  Click="() => this.ViewModel.OnDeprecateUnDeprecateButtonClick(row)"
-                                  Enabled="@(row.IsAllowedToWrite)" />
-                    }
-                </CellDisplayTemplate>
-            </DxGridCommandColumn>
-        </Columns>
-
-        <EditFormTemplate Context="EditFormContext">
-            <DxFormLayout CssClass="w-100">
-                <DxFormLayoutItem Caption="Shortname:" ColSpanMd="10">
-                    <DxTextBox @bind-Text="@this.ViewModel.Thing.ShortName"/>
-                </DxFormLayoutItem>
-                <DxFormLayoutItem Caption="Name:" ColSpanMd="10">
-                    <DxTextBox @bind-Text="@this.ViewModel.Thing.Name"/>
-                </DxFormLayoutItem>
-                <DxFormLayoutItem Caption="Deprecated:" ColSpanMd="6">
-                    <DxCheckBox @bind-Checked="@this.ViewModel.Thing.IsDeprecated"/>
-                </DxFormLayoutItem>
-            </DxFormLayout>
-            <ValidationSummary/>
-        </EditFormTemplate>
+            <EditFormTemplate Context="EditFormContext">
+                <DomainsOfExpertiseForm ViewModel="@this.ViewModel"
+                                        IsVisible="true"
+                                        ShouldCreate="true"
+                                        OnSaved="@(() => this.Grid.CancelEditAsync())"
+                                        OnCanceled="@(() => this.Grid.CancelEditAsync())"/>
+            </EditFormTemplate>
+        </DxGrid>
         
-        <CustomValidators>
-            <FluentValidationValidator />
-        </CustomValidators>
+        <DataItemDetailsComponent IsSelected="@this.IsOnEditMode">
+            <DomainsOfExpertiseForm ViewModel="@this.ViewModel"
+                                    @bind-IsVisible="@this.IsOnEditMode"
+                                    ShouldCreate="false"/>
+        </DataItemDetailsComponent>
 
-    </DxGrid>
+    </div>
 </LoadingComponent>
 
 <DxPopup @bind-Visible="@this.ViewModel.IsOnDeprecationMode" HeaderText="Please confirm" Width="auto" CloseOnOutsideClick="false">
diff --git a/COMETwebapp/Components/SiteDirectory/DomainsOfExpertiseTable.razor.cs b/COMETwebapp/Components/SiteDirectory/DomainsOfExpertiseTable.razor.cs
index 29573fc9..c050b2fd 100644
--- a/COMETwebapp/Components/SiteDirectory/DomainsOfExpertiseTable.razor.cs
+++ b/COMETwebapp/Components/SiteDirectory/DomainsOfExpertiseTable.razor.cs
@@ -74,16 +74,18 @@ protected override void CustomizeEditThing(GridCustomizeEditModelEventArgs e)
 
             var dataItem = (DomainOfExpertiseRowViewModel)e.DataItem;
             this.ShouldCreateThing = e.IsNew;
+            this.ViewModel.Thing = dataItem == null ? new DomainOfExpertise() : dataItem.Thing.Clone(true);
+            e.EditModel = this.ViewModel.Thing;
+        }
 
-            if (dataItem == null)
-            {
-                this.ViewModel.Thing = new DomainOfExpertise();
-                e.EditModel = this.ViewModel.Thing;
-                return;
-            }
-
-            e.EditModel = dataItem;
-            this.ViewModel.Thing = dataItem.Thing.Clone(true);
+        /// <summary>
+        /// Method invoked every time a row is selected
+        /// </summary>
+        /// <param name="row">The selected row</param>
+        private void OnSelectedDataItemChanged(DomainOfExpertiseRowViewModel row)
+        {
+            this.ViewModel.Thing = row.Thing.Clone(true);
+            this.IsOnEditMode = true;
         }
     }
 }
diff --git a/COMETwebapp/Components/SiteDirectory/EngineeringModel/ActiveDomainsTable.razor b/COMETwebapp/Components/SiteDirectory/EngineeringModel/ActiveDomainsTable.razor
index 39c874a5..cfa55519 100644
--- a/COMETwebapp/Components/SiteDirectory/EngineeringModel/ActiveDomainsTable.razor
+++ b/COMETwebapp/Components/SiteDirectory/EngineeringModel/ActiveDomainsTable.razor
@@ -46,7 +46,7 @@ Copyright (c) 2023-2024 RHEA System S.A.
 
     </DxGrid>
     
-    <DxPopup @bind-Visible="@this.IsEditPopupVisible"
+    <DxPopup @bind-Visible="@this.IsOnEditMode"
              HeaderText="Active Domains">
 
         <DxListBox TValue="DomainOfExpertise"
diff --git a/COMETwebapp/Components/SiteDirectory/EngineeringModel/ActiveDomainsTable.razor.cs b/COMETwebapp/Components/SiteDirectory/EngineeringModel/ActiveDomainsTable.razor.cs
index 1c9b68e1..f7d028a7 100644
--- a/COMETwebapp/Components/SiteDirectory/EngineeringModel/ActiveDomainsTable.razor.cs
+++ b/COMETwebapp/Components/SiteDirectory/EngineeringModel/ActiveDomainsTable.razor.cs
@@ -49,11 +49,6 @@ public partial class ActiveDomainsTable : SelectedDataItemBase<DomainOfExpertise
         [Parameter]
         public EngineeringModelSetup EngineeringModelSetup { get; set; }
 
-        /// <summary>
-        /// Gets or sets the condition to check if the edit popup is visible
-        /// </summary>
-        public bool IsEditPopupVisible { get; private set; }
-
         /// <summary>
         /// Method invoked when the component is ready to start, having received its
         /// initial parameters from its parent in the render tree.
@@ -80,7 +75,7 @@ protected override void OnParametersSet()
         /// <param name="visible">The visibility of the popup</param>
         private void SetEditPopupVisibility(bool visible)
         {
-            this.IsEditPopupVisible = visible;
+            this.IsOnEditMode = visible;
         }
 
         /// <summary>
diff --git a/COMETwebapp/Components/SiteDirectory/EngineeringModel/EngineeringModelsTable.razor b/COMETwebapp/Components/SiteDirectory/EngineeringModel/EngineeringModelsTable.razor
index 40c62358..b65c7a18 100644
--- a/COMETwebapp/Components/SiteDirectory/EngineeringModel/EngineeringModelsTable.razor
+++ b/COMETwebapp/Components/SiteDirectory/EngineeringModel/EngineeringModelsTable.razor
@@ -36,7 +36,7 @@ Copyright (c) 2023-2024 RHEA System S.A.
                 PageSizeSelectorVisible="true"
                 PageSizeSelectorItems="@(new[] { 20, 35, 50 })"
                 PageSizeSelectorAllRowsItemVisible="true"
-                CssClass="d-inline">
+                CssClass="d-inline height-fit-content">
             <Columns>
                 <DxGridDataColumn FieldName="@nameof(EngineeringModelRowViewModel.Name)" MinWidth="150"/>
                 <DxGridDataColumn FieldName="@nameof(EngineeringModelRowViewModel.ShortName)" MinWidth="80"/>
@@ -159,29 +159,25 @@ Copyright (c) 2023-2024 RHEA System S.A.
 
         </DxGrid>
         
-        @if (this.IsModelSelected)
-        {
-            <div style="width: 70%;">
-                <DxToolbar ItemClick="@this.OnDetailsItemClick">
-                    <Items>
-                        @foreach (var mappedValue in this.mapOfComponentsAndNames)
-                        {
-                            <DxToolbarItem @key="@(mappedValue.Value)"
-                                           Name="@(mappedValue.Value)" 
-                                           Text="@(mappedValue.Value)" 
-                                           Tooltip="@(mappedValue.Value)"
-                                           RenderStyle="@(mappedValue.Key == this.SelectedComponent ? ButtonRenderStyle.Primary : ButtonRenderStyle.Secondary)" />
-                        }
-                    </Items>
-                </DxToolbar>
-
-                @if (this.SelectedComponent != null)
-                {
-                    <DynamicComponent Type="@this.SelectedComponent" Parameters="this.parameters"/>
-                }
+        <DataItemDetailsComponent IsSelected="@this.IsOnEditMode">
+            <DxToolbar ItemClick="@this.OnDetailsItemClick">
+                <Items>
+                    @foreach (var mappedValue in this.mapOfComponentsAndNames)
+                    {
+                        <DxToolbarItem @key="@(mappedValue.Value)"
+                                       Name="@(mappedValue.Value)" 
+                                       Text="@(mappedValue.Value)" 
+                                       Tooltip="@(mappedValue.Value)"
+                                       RenderStyle="@(mappedValue.Key == this.SelectedComponent ? ButtonRenderStyle.Primary : ButtonRenderStyle.Secondary)" />
+                    }
+                </Items>
+            </DxToolbar>
 
-            </div>
-        }
+            @if (this.SelectedComponent != null)
+            {
+                <DynamicComponent Type="@this.SelectedComponent" Parameters="this.parameters"/>
+            }
+        </DataItemDetailsComponent>
     </div>
     <div class="pb-3"></div>
 </LoadingComponent>
diff --git a/COMETwebapp/Components/SiteDirectory/EngineeringModel/EngineeringModelsTable.razor.cs b/COMETwebapp/Components/SiteDirectory/EngineeringModel/EngineeringModelsTable.razor.cs
index 97a0d7bc..2a1ea2b8 100644
--- a/COMETwebapp/Components/SiteDirectory/EngineeringModel/EngineeringModelsTable.razor.cs
+++ b/COMETwebapp/Components/SiteDirectory/EngineeringModel/EngineeringModelsTable.razor.cs
@@ -45,11 +45,6 @@ public partial class EngineeringModelsTable : SelectedDataItemBase<EngineeringMo
         [Inject]
         public IEngineeringModelsTableViewModel ViewModel { get; set; }
 
-        /// <summary>
-        /// Gets or sets the value to check if a model has been selected
-        /// </summary>
-        public bool IsModelSelected { get; private set; }
-
         /// <summary>
         /// Gets the condition to check if the source model was selected in creation form
         /// </summary>
@@ -116,7 +111,7 @@ protected override void CustomizeEditThing(GridCustomizeEditModelEventArgs e)
         private void OnSelectedDataItemChanged(EngineeringModelRowViewModel row)
         {
             this.ViewModel.Thing = row.Thing;
-            this.IsModelSelected = true;
+            this.IsOnEditMode = true;
             this.parameters[nameof(EngineeringModelSetup)] = row.Thing;
         }
 
diff --git a/COMETwebapp/Components/SiteDirectory/EngineeringModel/ParticipantsTable.razor b/COMETwebapp/Components/SiteDirectory/EngineeringModel/ParticipantsTable.razor
index 47667161..6bc7ac0b 100644
--- a/COMETwebapp/Components/SiteDirectory/EngineeringModel/ParticipantsTable.razor
+++ b/COMETwebapp/Components/SiteDirectory/EngineeringModel/ParticipantsTable.razor
@@ -127,7 +127,7 @@ Copyright (c) 2023-2024 RHEA System S.A.
     </div>
 </DxPopup>
 
-<DxPopup @bind-Visible="@this.IsActiveDomainsDetailsOpen"
+<DxPopup @bind-Visible="@this.IsOnEditMode"
          HeaderText="Assigned Domains">
     <ul>
         @foreach (var assignedDomain in this.AssignedDomainsPopupText.Split(ParticipantRowViewModel.Separator))
diff --git a/COMETwebapp/Components/SiteDirectory/EngineeringModel/ParticipantsTable.razor.cs b/COMETwebapp/Components/SiteDirectory/EngineeringModel/ParticipantsTable.razor.cs
index 1ffbd5c6..2c722fc1 100644
--- a/COMETwebapp/Components/SiteDirectory/EngineeringModel/ParticipantsTable.razor.cs
+++ b/COMETwebapp/Components/SiteDirectory/EngineeringModel/ParticipantsTable.razor.cs
@@ -51,11 +51,6 @@ public partial class ParticipantsTable : SelectedDataItemBase<Participant, Parti
         [Parameter]
         public EngineeringModelSetup EngineeringModelSetup { get; set; }
 
-        /// <summary>
-        /// Gets or sets the condition to check if the active domains details popup is open
-        /// </summary>
-        public bool IsActiveDomainsDetailsOpen { get; private set; }
-
         /// <summary>
         /// Gets or sets the active domains details text
         /// </summary>
@@ -124,7 +119,7 @@ protected override void CustomizeEditThing(GridCustomizeEditModelEventArgs e)
         private void OpenAssignedDomainDetailsPopup(string text)
         {
             this.AssignedDomainsPopupText = text; 
-            this.IsActiveDomainsDetailsOpen = true;
+            this.IsOnEditMode = true;
         }
 
         /// <summary>
diff --git a/COMETwebapp/Components/SiteDirectory/Roles/ParticipantRolesTable.razor b/COMETwebapp/Components/SiteDirectory/Roles/ParticipantRolesTable.razor
index 42eb500c..e8de84b4 100644
--- a/COMETwebapp/Components/SiteDirectory/Roles/ParticipantRolesTable.razor
+++ b/COMETwebapp/Components/SiteDirectory/Roles/ParticipantRolesTable.razor
@@ -17,7 +17,7 @@ Copyright (c) 2023-2024 RHEA System S.A.
 @inherits SelectedDeprecatableDataItemBase<ParticipantRole, ParticipantRoleRowViewModel>
 
 <LoadingComponent IsVisible="@(this.ViewModel.IsLoading)">
-    <div style="display: flex; justify-content: space-between;">
+    <div class="d-flex justify-content-between">
         <DxGrid @ref="this.Grid"
                 Data="this.ViewModel.Rows.Items"
                 ColumnResizeMode="GridColumnResizeMode.ColumnsContainer"
@@ -37,7 +37,7 @@ Copyright (c) 2023-2024 RHEA System S.A.
                 PageSizeSelectorVisible="true"
                 PageSizeSelectorItems="@(new[] { 20, 35, 50 })"
                 PageSizeSelectorAllRowsItemVisible="true"
-                CssClass="d-inline">
+                CssClass="d-inline height-fit-content">
             <Columns>
                 <DxGridDataColumn FieldName="@nameof(ParticipantRoleRowViewModel.Name)" MinWidth="150"/>
                 <DxGridDataColumn FieldName="@nameof(ParticipantRoleRowViewModel.ShortName)" MinWidth="80"/>
@@ -46,6 +46,16 @@ Copyright (c) 2023-2024 RHEA System S.A.
                     <HeaderTemplate>
                         <DxButton Id="addParticipantRoleButton" Text="Add Participant Role" IconCssClass="oi oi-plus" Click="() => this.Grid.StartEditNewRowAsync()"/>
                     </HeaderTemplate>
+                    <CellDisplayTemplate>
+                        @{
+                            var row = (ParticipantRoleRowViewModel)context.DataItem;
+
+                            <DxButton Id="@(row.IsDeprecated ? "undeprecateButton" : "deprecateButton")"
+                                      Text="@(row.IsDeprecated ? "Un-deprecate" : "Deprecate")"
+                                      Click="() => this.ViewModel.OnDeprecateUnDeprecateButtonClick(row)"
+                                      Enabled="@(row.IsAllowedToWrite)" />
+                        }
+                    </CellDisplayTemplate>
                 </DxGridCommandColumn>
             </Columns>
 
@@ -61,14 +71,11 @@ Copyright (c) 2023-2024 RHEA System S.A.
 
         </DxGrid>
         
-        @if (this.IsRoleSelected)
-        {
-            <div style="width: 70%; padding: 30px;">
-                <ParticipantRoleDetails ViewModel="@this.ViewModel"
-                                        OnCancel="@(() => this.IsRoleSelected = false)"
-                                        OnSubmit="@(() => this.ViewModel.CreateOrEditParticipantRole(false))"/>
-            </div>
-        }
+        <DataItemDetailsComponent IsSelected="@this.IsOnEditMode">
+            <ParticipantRoleDetails ViewModel="@this.ViewModel"
+                                    OnCancel="@(() => this.IsOnEditMode = false)"
+                                    OnSubmit="@(() => this.ViewModel.CreateOrEditParticipantRole(false))"/>
+        </DataItemDetailsComponent>
     </div>
 </LoadingComponent>
 
diff --git a/COMETwebapp/Components/SiteDirectory/Roles/ParticipantRolesTable.razor.cs b/COMETwebapp/Components/SiteDirectory/Roles/ParticipantRolesTable.razor.cs
index f7be0cc3..55cd555b 100644
--- a/COMETwebapp/Components/SiteDirectory/Roles/ParticipantRolesTable.razor.cs
+++ b/COMETwebapp/Components/SiteDirectory/Roles/ParticipantRolesTable.razor.cs
@@ -45,11 +45,6 @@ public partial class ParticipantRolesTable : SelectedDeprecatableDataItemBase<Pa
         [Inject]
         public IParticipantRolesTableViewModel ViewModel { get; set; }
 
-        /// <summary>
-        /// Gets the value to check if a role has been selected
-        /// </summary>
-        public bool IsRoleSelected { get; private set; }
-
         /// <summary>
         /// Method invoked when the component is ready to start, having received its
         /// initial parameters from its parent in the render tree.
@@ -88,7 +83,7 @@ protected override void CustomizeEditThing(GridCustomizeEditModelEventArgs e)
         private void OnSelectedDataItemChanged(ParticipantRoleRowViewModel row)
         {
             this.ViewModel.Thing = row.Thing.Clone(true);
-            this.IsRoleSelected = true;
+            this.IsOnEditMode = true;
         }
     }
 }
diff --git a/COMETwebapp/Components/SiteDirectory/Roles/PersonRolesTable.razor b/COMETwebapp/Components/SiteDirectory/Roles/PersonRolesTable.razor
index 585de590..1bbd28a9 100644
--- a/COMETwebapp/Components/SiteDirectory/Roles/PersonRolesTable.razor
+++ b/COMETwebapp/Components/SiteDirectory/Roles/PersonRolesTable.razor
@@ -17,7 +17,7 @@ Copyright (c) 2023-2024 RHEA System S.A.
 @inherits SelectedDeprecatableDataItemBase<PersonRole, PersonRoleRowViewModel>
 
 <LoadingComponent IsVisible="@(this.ViewModel.IsLoading)">
-    <div style="display: flex; justify-content: space-between;">
+    <div class="d-flex justify-content-between">
         <DxGrid @ref="this.Grid"
                 Data="this.ViewModel.Rows.Items"
                 ColumnResizeMode="GridColumnResizeMode.ColumnsContainer"
@@ -37,7 +37,7 @@ Copyright (c) 2023-2024 RHEA System S.A.
                 PageSizeSelectorVisible="true"
                 PageSizeSelectorItems="@(new[] { 20, 35, 50 })"
                 PageSizeSelectorAllRowsItemVisible="true"
-                CssClass="d-inline">
+                CssClass="d-inline height-fit-content">
             <Columns>
                 <DxGridDataColumn FieldName="@nameof(PersonRoleRowViewModel.Name)" MinWidth="150"/>
                 <DxGridDataColumn FieldName="@nameof(PersonRoleRowViewModel.ShortName)" MinWidth="80"/>
@@ -46,6 +46,16 @@ Copyright (c) 2023-2024 RHEA System S.A.
                     <HeaderTemplate>
                         <DxButton Id="addPersonRoleButton" Text="Add Person Role" IconCssClass="oi oi-plus" Click="() => this.Grid.StartEditNewRowAsync()"/>
                     </HeaderTemplate>
+                    <CellDisplayTemplate>
+                        @{
+                            var row = (PersonRoleRowViewModel)context.DataItem;
+
+                            <DxButton Id="@(row.IsDeprecated ? "undeprecateButton" : "deprecateButton")"
+                                      Text="@(row.IsDeprecated ? "Un-deprecate" : "Deprecate")"
+                                      Click="() => this.ViewModel.OnDeprecateUnDeprecateButtonClick(row)"
+                                      Enabled="@(row.IsAllowedToWrite)" />
+                        }
+                    </CellDisplayTemplate>
                 </DxGridCommandColumn>
             </Columns>
 
@@ -61,14 +71,11 @@ Copyright (c) 2023-2024 RHEA System S.A.
 
         </DxGrid>
         
-        @if (this.IsRoleSelected)
-        {
-            <div style="width: 70%; padding: 30px;">
-                <PersonRoleDetails ViewModel="@this.ViewModel"
-                                        OnCancel="@(() => this.IsRoleSelected = false)"
-                                        OnSubmit="@(() => this.ViewModel.CreateOrEditPersonRole(false))"/>
-            </div>
-        }
+        <DataItemDetailsComponent IsSelected="@this.IsOnEditMode">
+            <PersonRoleDetails ViewModel="@this.ViewModel"
+                               OnCancel="@(() => this.IsOnEditMode = false)"
+                               OnSubmit="@(() => this.ViewModel.CreateOrEditPersonRole(false))"/>
+        </DataItemDetailsComponent>
     </div>
 </LoadingComponent>
 
diff --git a/COMETwebapp/Components/SiteDirectory/Roles/PersonRolesTable.razor.cs b/COMETwebapp/Components/SiteDirectory/Roles/PersonRolesTable.razor.cs
index 5914391d..fbe664d1 100644
--- a/COMETwebapp/Components/SiteDirectory/Roles/PersonRolesTable.razor.cs
+++ b/COMETwebapp/Components/SiteDirectory/Roles/PersonRolesTable.razor.cs
@@ -24,8 +24,6 @@
 
 namespace COMETwebapp.Components.SiteDirectory.Roles
 {
-    using System.ComponentModel.DataAnnotations;
-
     using CDP4Common.SiteDirectoryData;
 
     using COMETwebapp.Components.Common;
@@ -47,11 +45,6 @@ public partial class PersonRolesTable : SelectedDeprecatableDataItemBase<PersonR
         [Inject]
         public IPersonRolesTableViewModel ViewModel { get; set; }
 
-        /// <summary>
-        /// Gets the value to check if a role has been selected
-        /// </summary>
-        public bool IsRoleSelected { get; private set; }
-
         /// <summary>
         /// Method invoked when the component is ready to start, having received its
         /// initial parameters from its parent in the render tree.
@@ -90,7 +83,7 @@ protected override void CustomizeEditThing(GridCustomizeEditModelEventArgs e)
         private void OnSelectedDataItemChanged(PersonRoleRowViewModel row)
         {
             this.ViewModel.Thing = row.Thing.Clone(true);
-            this.IsRoleSelected = true;
+            this.IsOnEditMode = true;
         }
     }
 }
diff --git a/COMETwebapp/ViewModels/Components/Common/DeprecatableDataItemTable/IDeprecatableDataItemTableViewModel.cs b/COMETwebapp/ViewModels/Components/Common/DeprecatableDataItemTable/IDeprecatableDataItemTableViewModel.cs
index 37f57ae4..c0703029 100644
--- a/COMETwebapp/ViewModels/Components/Common/DeprecatableDataItemTable/IDeprecatableDataItemTableViewModel.cs
+++ b/COMETwebapp/ViewModels/Components/Common/DeprecatableDataItemTable/IDeprecatableDataItemTableViewModel.cs
@@ -27,8 +27,6 @@ namespace COMETwebapp.ViewModels.Components.Common.DeprecatableDataItemTable
     using COMETwebapp.Services.ShowHideDeprecatedThingsService;
     using COMETwebapp.ViewModels.Components.Common.BaseDataItemTable;
 
-    using DynamicData;
-
     /// <summary>
     /// View model that provides the basic functionalities for a reference data item
     /// </summary>
diff --git a/COMETwebapp/wwwroot/css/app.css b/COMETwebapp/wwwroot/css/app.css
index 520eeb2d..9eb1c9d8 100644
--- a/COMETwebapp/wwwroot/css/app.css
+++ b/COMETwebapp/wwwroot/css/app.css
@@ -51,6 +51,8 @@ html, body, #app {
 
 .width-fit-content { width: fit-content; }
 
+.height-fit-content { height: fit-content; }
+
 .max-width-40 { max-width: 40%; }
 
 .margin-top-120 { margin-top: 120px; }
diff --git a/COMETwebapp/wwwroot/images/comet-logo-black.png b/COMETwebapp/wwwroot/images/comet-logo-black.png
new file mode 100644
index 00000000..21039642
Binary files /dev/null and b/COMETwebapp/wwwroot/images/comet-logo-black.png differ
diff --git a/COMETwebapp/wwwroot/images/comet-logo-white.png b/COMETwebapp/wwwroot/images/comet-logo-white.png
new file mode 100644
index 00000000..c348f7df
Binary files /dev/null and b/COMETwebapp/wwwroot/images/comet-logo-white.png differ