diff --git a/COMET.Web.Common.Tests/Components/CardView/CardViewTestFixture.cs b/COMET.Web.Common.Tests/Components/CardView/CardViewTestFixture.cs
new file mode 100644
index 00000000..3ba04fe4
--- /dev/null
+++ b/COMET.Web.Common.Tests/Components/CardView/CardViewTestFixture.cs
@@ -0,0 +1,484 @@
+// --------------------------------------------------------------------------------------------------------------------
+//  <copyright file="CardViewTestFixture.cs" company="Starion Group S.A.">
+//     Copyright (c) 2023-2024 Starion Group S.A.
+// 
+//     Authors: Sam Gerené, Alex Vorobiev, Alexander van Delft, Jaime Bernar, Théate Antoine, Nabil Abbar
+// 
+//     This file is part of CDP4-COMET WEB Community Edition
+//     The CDP4-COMET WEB Community Edition is the Starion 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 COMET.Web.Common.Tests.Components.CardView
+{
+    using Bunit;
+
+    using COMET.Web.Common.Components.CardView;
+
+    using DevExpress.Blazor;
+    using DevExpress.Blazor.Internal;
+
+    using Microsoft.AspNetCore.Components;
+    using Microsoft.Extensions.DependencyInjection;
+
+    using NUnit.Framework;
+
+    using TestContext = Bunit.TestContext;
+
+    public class CardViewTestFixture
+    {
+        private TestContext context;
+        private TestClass testClass1 = new ();
+        private TestClass testClass2 = new ();
+        private TestClass testClass3 = new ();
+        private TestClass[] testClasses;
+        private string[] searchFields = new[] { "Id", "Name" };
+        private string[] sortFields = new[] { string.Empty, "Id", "Name" };
+
+        private static RenderFragment<TestClass> NormalTemplate()
+        {
+            RenderFragment Template(TestClass child) =>
+                builder =>
+                {
+                    builder.OpenComponent<CardField<TestClass>>(0);
+                    builder.AddAttribute(1, "Context", child);
+                    builder.AddAttribute(2, "FieldName", "Id");
+                    builder.CloseComponent();
+                    builder.OpenComponent<CardField<TestClass>>(3);
+                    builder.AddAttribute(4, "Context", child);
+                    builder.AddAttribute(5, "FieldName", "Name");
+                    builder.CloseComponent();
+                };
+
+            return Template;
+        }
+
+        private static RenderFragment<TestClass> NoSearchAndSortTemplate()
+        {
+            RenderFragment Template(TestClass child) =>
+                builder =>
+                {
+                    builder.OpenComponent<CardField<TestClass>>(0);
+                    builder.AddAttribute(1, "Context", child);
+                    builder.AddAttribute(2, "FieldName", "Id");
+                    builder.AddAttribute(3, "AllowSearch", false);
+                    builder.AddAttribute(4, "AllowSort", false);
+                    builder.CloseComponent();
+                    builder.OpenComponent<CardField<TestClass>>(5);
+                    builder.AddAttribute(6, "Context", child);
+                    builder.AddAttribute(7, "FieldName", "Name");
+                    builder.AddAttribute(8, "AllowSearch", false);
+                    builder.AddAttribute(9, "AllowSort", false);
+                    builder.CloseComponent();
+                };
+
+            return Template;
+        }
+
+        [SetUp]
+        public void Setup()
+        {
+            this.context = new TestContext();
+            this.testClasses = [this.testClass1, this.testClass2, this.testClass3];
+
+            this.context.Services.AddDevExpressBlazor(_ => ConfigureJsInterop(this.context.JSInterop));
+
+            this.context.JSInterop.SetupVoid("DxBlazor.AdaptiveDropDown.init");
+            this.context.JSInterop.SetupVoid("DxBlazor.DropDown.getReference");
+            this.context.JSInterop.SetupVoid("DxBlazor.ComboBox.loadModule");
+            this.context.JSInterop.SetupVoid("DxBlazor.Input.loadModule");
+        }
+
+        [Test]
+        public void VerifyComponent()
+        {
+            var component = this.context.RenderComponent<CardView<TestClass>>(parameters =>
+            {
+                parameters
+                    .Add(p => p.Items, this.testClasses)
+                    .Add(p => p.ItemSize, 150)
+                    .Add(p => p.ItemTemplate, NormalTemplate());
+            });
+
+            var cardView = component;
+
+            Assert.Multiple(() =>
+                {
+                    Assert.That(cardView.Instance.AllowSort, Is.True);
+                    Assert.That(cardView.Instance.AllowSearch, Is.True);
+                    Assert.That(cardView.Instance.ItemSize, Is.EqualTo(150));
+                    Assert.That(cardView.Instance.SearchFields, Is.EquivalentTo(this.searchFields));
+                    Assert.That(cardView.Instance.SortFields, Is.EquivalentTo(this.sortFields));
+                });
+
+            var textBoxParentComponent = component.Find("#search-textbox");
+
+            Assert.Multiple(() =>
+            {
+                Assert.That(textBoxParentComponent, Is.Not.Null);
+                Assert.That(textBoxParentComponent.Attributes.Single(x => x.Name == "style").Value.Contains("visibility:block"), Is.True);
+            });
+
+            var comboBoxParentComponent = component.Find("#sort-dropdown");
+
+            Assert.Multiple(() =>
+            {
+                Assert.That(comboBoxParentComponent, Is.Not.Null);
+                Assert.That(comboBoxParentComponent.Attributes.Single(x => x.Name == "style").Value.Contains("visibility:block"), Is.True);
+            });
+
+            var cardFields = component.FindComponents<CardField<TestClass>>();
+
+            Assert.Multiple(() =>
+            {
+                Assert.That(cardFields.Count, Is.EqualTo(6));
+
+                foreach (var cardField in cardFields)
+                {
+                    Assert.That(cardField.Instance.AllowSearch, Is.True);
+                    Assert.That(cardField.Instance.AllowSort, Is.True);
+                }
+
+                Assert.That(cardFields.Where(x => x.Markup.Contains(this.testClass1.Name)).ToList().Count, Is.EqualTo(1));
+                Assert.That(cardFields.Where(x => x.Markup.Contains(this.testClass2.Name)).ToList().Count, Is.EqualTo(1));
+                Assert.That(cardFields.Where(x => x.Markup.Contains(this.testClass3.Name)).ToList().Count, Is.EqualTo(1));
+                Assert.That(cardFields.Where(x => x.Markup.Contains(this.testClass1.Id.ToString())).ToList().Count, Is.EqualTo(1));
+                Assert.That(cardFields.Where(x => x.Markup.Contains(this.testClass2.Id.ToString())).ToList().Count, Is.EqualTo(1));
+                Assert.That(cardFields.Where(x => x.Markup.Contains(this.testClass3.Id.ToString())).Count, Is.EqualTo(1));
+            });
+        }
+
+        [Test]
+        public void VerifyComponentWithoutSortAndSearch()
+        {
+            var component = this.context.RenderComponent<CardView<TestClass>>(parameters =>
+            {
+                parameters
+                    .Add(p => p.Items, this.testClasses)
+                    .Add(p => p.ItemSize, 150)
+                    .Add(p => p.ItemTemplate, NoSearchAndSortTemplate());
+            });
+
+            var cardView = component;
+
+            Assert.Multiple(() =>
+            {
+                Assert.That(cardView.Instance.AllowSort, Is.False);
+                Assert.That(cardView.Instance.AllowSearch, Is.False);
+                Assert.That(cardView.Instance.ItemSize, Is.EqualTo(150));
+                Assert.That(cardView.Instance.SearchFields.Count, Is.EqualTo(0));
+                Assert.That(cardView.Instance.SortFields.Count, Is.EqualTo(1));
+            });
+
+            var textBoxParentComponent = component.Find("#search-textbox");
+
+            Assert.Multiple(() =>
+            {
+                Assert.That(textBoxParentComponent, Is.Not.Null);
+                Assert.That(textBoxParentComponent.Attributes.Single(x => x.Name == "style").Value.Contains("visibility:hidden"), Is.True);
+            });
+
+            var comboBoxParentComponent = component.Find("#sort-dropdown");
+
+            Assert.Multiple(() =>
+            {
+                Assert.That(comboBoxParentComponent, Is.Not.Null);
+                Assert.That(comboBoxParentComponent.Attributes.Single(x => x.Name == "style").Value.Contains("visibility:hidden"), Is.True);
+            });
+
+            var cardFields = component.FindComponents<CardField<TestClass>>();
+
+            Assert.Multiple(() =>
+            {
+                Assert.That(cardFields.Count, Is.EqualTo(6));
+
+                foreach (var cardField in cardFields)
+                {
+                    Assert.That(cardField.Instance.AllowSearch, Is.False);
+                    Assert.That(cardField.Instance.AllowSort, Is.False);
+                }
+
+                Assert.That(cardFields.Where(x => x.Markup.Contains(this.testClass1.Name)).ToList().Count, Is.EqualTo(1));
+                Assert.That(cardFields.Where(x => x.Markup.Contains(this.testClass2.Name)).ToList().Count, Is.EqualTo(1));
+                Assert.That(cardFields.Where(x => x.Markup.Contains(this.testClass3.Name)).ToList().Count, Is.EqualTo(1));
+                Assert.That(cardFields.Where(x => x.Markup.Contains(this.testClass1.Id.ToString())).ToList().Count, Is.EqualTo(1));
+                Assert.That(cardFields.Where(x => x.Markup.Contains(this.testClass2.Id.ToString())).ToList().Count, Is.EqualTo(1));
+                Assert.That(cardFields.Where(x => x.Markup.Contains(this.testClass3.Id.ToString())).Count, Is.EqualTo(1));
+            });
+        }
+
+        [Test]
+        public void VerifyComponentRerenders()
+        {
+            var component = this.context.RenderComponent<CardView<TestClass>>(parameters =>
+            {
+                parameters
+                    .Add(p => p.Items, this.testClasses)
+                    .Add(p => p.ItemSize, 150)
+                    .Add(p => p.ItemTemplate, NoSearchAndSortTemplate());
+            });
+           
+            var cardFields = component.FindComponents<CardField<TestClass>>();
+
+            Assert.Multiple(() =>
+            {
+                Assert.That(cardFields.Count, Is.EqualTo(6));
+
+                foreach (var cardField in cardFields)
+                {
+                    Assert.That(cardField.Instance.AllowSearch, Is.False);
+                    Assert.That(cardField.Instance.AllowSort, Is.False);
+                }
+
+                Assert.That(cardFields.Where(x => x.Markup.Contains(this.testClass1.Name)).ToList().Count, Is.EqualTo(1));
+                Assert.That(cardFields.Where(x => x.Markup.Contains(this.testClass2.Name)).ToList().Count, Is.EqualTo(1));
+                Assert.That(cardFields.Where(x => x.Markup.Contains(this.testClass3.Name)).ToList().Count, Is.EqualTo(1));
+                Assert.That(cardFields.Where(x => x.Markup.Contains(this.testClass1.Id.ToString())).ToList().Count, Is.EqualTo(1));
+                Assert.That(cardFields.Where(x => x.Markup.Contains(this.testClass2.Id.ToString())).ToList().Count, Is.EqualTo(1));
+                Assert.That(cardFields.Where(x => x.Markup.Contains(this.testClass3.Id.ToString())).Count, Is.EqualTo(1));
+            });
+
+            // create new collection of items
+            this.testClass1 = new TestClass();
+            this.testClass2 = new TestClass();
+            this.testClass3 = new TestClass();
+            this.testClasses = [this.testClass1, this.testClass2, this.testClass3];
+
+            component.SetParametersAndRender(parameters => parameters
+                .Add(p => p.Items, this.testClasses));
+
+            cardFields = component.FindComponents<CardField<TestClass>>();
+
+            Assert.Multiple(() =>
+            {
+                Assert.That(cardFields.Count, Is.EqualTo(6));
+
+                foreach (var cardField in cardFields)
+                {
+                    Assert.That(cardField.Instance.AllowSearch, Is.False);
+                    Assert.That(cardField.Instance.AllowSort, Is.False);
+                }
+
+                Assert.That(cardFields.Where(x => x.Markup.Contains(this.testClass1.Name)).ToList().Count, Is.EqualTo(1));
+                Assert.That(cardFields.Where(x => x.Markup.Contains(this.testClass2.Name)).ToList().Count, Is.EqualTo(1));
+                Assert.That(cardFields.Where(x => x.Markup.Contains(this.testClass3.Name)).ToList().Count, Is.EqualTo(1));
+                Assert.That(cardFields.Where(x => x.Markup.Contains(this.testClass1.Id.ToString())).ToList().Count, Is.EqualTo(1));
+                Assert.That(cardFields.Where(x => x.Markup.Contains(this.testClass2.Id.ToString())).ToList().Count, Is.EqualTo(1));
+                Assert.That(cardFields.Where(x => x.Markup.Contains(this.testClass3.Id.ToString())).Count, Is.EqualTo(1));
+            });
+        }
+
+        [Test]
+        public void VerifySelectComponent()
+        {
+            var component = this.context.RenderComponent<CardView<TestClass>>(parameters =>
+            {
+                parameters
+                    .Add(p => p.Items, this.testClasses)
+                    .Add(p => p.ItemSize, 150)
+                    .Add(p => p.ItemTemplate, NormalTemplate());
+            });
+
+            var cardView = component;
+
+            Assert.Multiple(() =>
+            {
+                Assert.That(cardView.Instance.AllowSort, Is.True);
+                Assert.That(cardView.Instance.AllowSearch, Is.True);
+                Assert.That(cardView.Instance.ItemSize, Is.EqualTo(150));
+                Assert.That(cardView.Instance.SearchFields, Is.EquivalentTo(this.searchFields));
+                Assert.That(cardView.Instance.SortFields, Is.EquivalentTo(this.sortFields));
+            });
+
+            var firstCardField = component.Find(".card");
+            firstCardField.Click();
+
+            var selectedCardField = component.Find(".selected");
+
+            Assert.Multiple(() =>
+            {
+                Assert.That(firstCardField.InnerHtml, Is.EqualTo(selectedCardField.InnerHtml));
+            });
+        }
+
+        [Test]
+        public async Task VerifySearchComponent()
+        {
+            var component = this.context.RenderComponent<CardView<TestClass>>(parameters =>
+            {
+                parameters
+                    .Add(p => p.Items, this.testClasses)
+                    .Add(p => p.ItemSize, 150)
+                    .Add(p => p.ItemTemplate, NormalTemplate());
+            });
+
+            var cardView = component;
+
+            Assert.Multiple(() =>
+            {
+                Assert.That(cardView.Instance.AllowSort, Is.True);
+                Assert.That(cardView.Instance.AllowSearch, Is.True);
+                Assert.That(cardView.Instance.ItemSize, Is.EqualTo(150));
+                Assert.That(cardView.Instance.SearchFields, Is.EquivalentTo(this.searchFields));
+                Assert.That(cardView.Instance.SortFields, Is.EquivalentTo(this.sortFields));
+            });
+
+            var textBoxParentComponent = component.Find("#search-textbox");
+
+            Assert.Multiple(() =>
+            {
+                Assert.That(textBoxParentComponent, Is.Not.Null);
+                Assert.That(textBoxParentComponent.Attributes.Single(x => x.Name == "style").Value.Contains("visibility:block"), Is.True);
+            });
+
+            var textBoxComponent = component.FindComponent<DxTextBox>();
+            await component.InvokeAsync(() => textBoxComponent.Instance.TextChanged.InvokeAsync(this.testClass1.Id.ToString()));
+
+            var cardFields = component.FindComponents<CardField<TestClass>>();
+
+            Assert.Multiple(() =>
+            {
+                Assert.That(cardFields.Count, Is.EqualTo(2));
+
+                Assert.That(cardFields.Where(x => x.Markup.Contains(this.testClass1.Name)).ToList().Count, Is.EqualTo(1));
+                Assert.That(cardFields.Where(x => x.Markup.Contains(this.testClass2.Name)).ToList().Count, Is.EqualTo(0));
+                Assert.That(cardFields.Where(x => x.Markup.Contains(this.testClass3.Name)).ToList().Count, Is.EqualTo(0));
+                Assert.That(cardFields.Where(x => x.Markup.Contains(this.testClass1.Id.ToString()) && x.Markup.Contains("search-mark")).ToList().Count, Is.EqualTo(1));
+                Assert.That(cardFields.Where(x => x.Markup.Contains(this.testClass2.Id.ToString())).ToList().Count, Is.EqualTo(0));
+                Assert.That(cardFields.Where(x => x.Markup.Contains(this.testClass3.Id.ToString())).Count, Is.EqualTo(0));
+            });
+
+            await component.InvokeAsync(async () => await textBoxComponent.Instance.TextChanged.InvokeAsync(string.Empty));
+
+            cardFields = component.FindComponents<CardField<TestClass>>();
+
+            Assert.Multiple(() =>
+            {
+                Assert.That(cardFields.Count, Is.EqualTo(6));
+
+                Assert.That(cardFields.Where(x => x.Markup.Contains("search-mark")).ToList().Count, Is.EqualTo(0));
+                Assert.That(cardFields.Where(x => x.Markup.Contains(this.testClass1.Name)).ToList().Count, Is.EqualTo(1));
+                Assert.That(cardFields.Where(x => x.Markup.Contains(this.testClass2.Name)).ToList().Count, Is.EqualTo(1));
+                Assert.That(cardFields.Where(x => x.Markup.Contains(this.testClass3.Name)).ToList().Count, Is.EqualTo(1));
+                Assert.That(cardFields.Where(x => x.Markup.Contains(this.testClass1.Id.ToString())).ToList().Count, Is.EqualTo(1));
+                Assert.That(cardFields.Where(x => x.Markup.Contains(this.testClass2.Id.ToString())).ToList().Count, Is.EqualTo(1));
+                Assert.That(cardFields.Where(x => x.Markup.Contains(this.testClass3.Id.ToString())).Count, Is.EqualTo(1));
+            });
+        }
+
+        [Test]
+        public async Task VerifySortComponent()
+        {
+            var component = this.context.RenderComponent<CardView<TestClass>>(parameters =>
+            {
+                parameters
+                    .Add(p => p.Items, this.testClasses)
+                    .Add(p => p.ItemSize, 150)
+                    .Add(p => p.ItemTemplate, NormalTemplate());
+            });
+
+            var cardView = component;
+
+            Assert.Multiple(() =>
+            {
+                Assert.That(cardView.Instance.AllowSort, Is.True);
+                Assert.That(cardView.Instance.AllowSearch, Is.True);
+                Assert.That(cardView.Instance.ItemSize, Is.EqualTo(150));
+                Assert.That(cardView.Instance.SearchFields, Is.EquivalentTo(this.searchFields));
+                Assert.That(cardView.Instance.SortFields, Is.EquivalentTo(this.sortFields));
+                Assert.That(cardView.Instance.SelectedSortField == string.Empty);
+            });
+
+            var sortParentComponent = component.Find("#sort-dropdown");
+
+            Assert.Multiple(() =>
+            {
+                Assert.That(sortParentComponent, Is.Not.Null);
+                Assert.That(sortParentComponent.Attributes.Single(x => x.Name == "style").Value.Contains("visibility:block"), Is.True);
+            });
+
+            var cardFields = component.FindComponents<CardField<TestClass>>();
+
+            Assert.Multiple(() =>
+            {
+                Assert.That(cardFields.Count, Is.EqualTo(6));
+
+                Assert.That(cardFields.Where(x => x.Markup.Contains(this.testClass1.Name)).ToList().Count, Is.EqualTo(1));
+                Assert.That(cardFields.Where(x => x.Markup.Contains(this.testClass2.Name)).ToList().Count, Is.EqualTo(1));
+                Assert.That(cardFields.Where(x => x.Markup.Contains(this.testClass3.Name)).ToList().Count, Is.EqualTo(1));
+                Assert.That(cardFields.Where(x => x.Markup.Contains(this.testClass1.Id.ToString())).ToList().Count, Is.EqualTo(1));
+                Assert.That(cardFields.Where(x => x.Markup.Contains(this.testClass2.Id.ToString())).ToList().Count, Is.EqualTo(1));
+                Assert.That(cardFields.Where(x => x.Markup.Contains(this.testClass3.Id.ToString())).Count, Is.EqualTo(1));
+            });
+
+            await component.InvokeAsync(() => component.Instance.OnSelectedSortItemChanged("Id"));
+
+            component.Render();
+
+            cardFields = component.FindComponents<CardField<TestClass>>();
+
+            //var sortedTestClasses = this.testClasses.OrderBy(x => x.Id.ToString()).Select(x => x.Name).ToList();
+            var sortedTestClasses = this.testClasses.OrderBy(x => x.Id).Select(x => x.Name).ToList();
+            var sortedCarFields = cardFields.Where(x => x.Markup.StartsWith("Name-")).Select(x => x.Markup).ToList();
+
+            Assert.Multiple(() =>
+            {
+                Assert.That(component.Instance.SelectedSortField == "Id");
+                Assert.That(sortedTestClasses[0], Is.EqualTo(sortedCarFields[0]));
+                Assert.That(sortedTestClasses[1], Is.EqualTo(sortedCarFields[1]));
+                Assert.That(sortedTestClasses[2], Is.EqualTo(sortedCarFields[2]));
+            });
+
+            await component.InvokeAsync(() => component.Instance.OnSelectedSortItemChanged(string.Empty));
+
+            component.Render();
+
+            cardFields = component.FindComponents<CardField<TestClass>>();
+
+            sortedCarFields = cardFields.Where(x => x.Markup.StartsWith("Name-")).Select(x => x.Markup).ToList();
+
+            Assert.Multiple(() =>
+            {
+                Assert.That(component.Instance.SelectedSortField == string.Empty);
+                Assert.That(this.testClasses[0].Name, Is.EqualTo(sortedCarFields[0]));
+                Assert.That(this.testClasses[1].Name, Is.EqualTo(sortedCarFields[1]));
+                Assert.That(this.testClasses[2].Name, Is.EqualTo(sortedCarFields[2]));
+            });
+        }
+
+        /// <summary>
+        /// Configure the <see cref="BunitJSInterop" /> for DevExpress
+        /// </summary>
+        /// <param name="interop">The <see cref="BunitJSInterop" /> to configure</param>
+        private static void ConfigureJsInterop(BunitJSInterop interop)
+        {
+            interop.Mode = JSRuntimeMode.Loose;
+
+            var rootModule = interop.SetupModule("./_content/DevExpress.Blazor/dx-blazor.js");
+            rootModule.Mode = JSRuntimeMode.Strict;
+
+            rootModule.Setup<DeviceInfo>("getDeviceInfo", _ => true)
+                .SetResult(new DeviceInfo(false));
+        }
+    }
+
+    public class TestClass
+    {
+        public Guid Id { get; } = Guid.NewGuid();
+
+        public string Name { get; } = $"Name-{DateTime.Now.Ticks}";
+    }
+}
diff --git a/COMET.Web.Common/COMET.Web.Common.csproj b/COMET.Web.Common/COMET.Web.Common.csproj
index 90d67d8b..b35f7bfa 100644
--- a/COMET.Web.Common/COMET.Web.Common.csproj
+++ b/COMET.Web.Common/COMET.Web.Common.csproj
@@ -36,6 +36,7 @@
         <PackageReference Include="CDP4ServicesDal-CE" Version="27.4.1" />
         <PackageReference Include="CDP4Web-CE" Version="27.4.1" />
         <PackageReference Include="DevExpress.Blazor" Version="23.2.9" />
+        <PackageReference Include="FastMember" Version="1.5.0" />
         <PackageReference Include="FluentResults" Version="3.16.0" />
         <PackageReference Include="Microsoft.AspNetCore.Components.Authorization" Version="8.0.10" />
         <PackageReference Include="Microsoft.AspNetCore.WebUtilities" Version="8.0.10" />
@@ -43,6 +44,7 @@
         <PackageReference Include="Microsoft.Extensions.Configuration.Binder" Version="8.0.2" />
         <PackageReference Include="ReactiveUI" Version="20.1.63" />
         <PackageReference Include="System.Drawing.Common" Version="8.0.10" />
+        <PackageReference Include="System.Linq.Dynamic.Core" Version="1.5.0" />
         <PackageReference Include="System.Text.RegularExpressions" Version="4.3.1" />
     </ItemGroup>
 
diff --git a/COMET.Web.Common/Components/CardView/CardField.cs b/COMET.Web.Common/Components/CardView/CardField.cs
new file mode 100644
index 00000000..68ff33ac
--- /dev/null
+++ b/COMET.Web.Common/Components/CardView/CardField.cs
@@ -0,0 +1,141 @@
+// --------------------------------------------------------------------------------------------------------------------
+//  <copyright file="CardField.cs" company="Starion Group S.A.">
+//    Copyright (c) 2023-2024 Starion Group S.A.
+// 
+//    Authors: Sam Gerené, Alex Vorobiev, Alexander van Delft, Jaime Bernar, Théate Antoine, Nabil Abbar
+// 
+//    This file is part of CDP4-COMET WEB Community Edition
+//    The CDP4-COMET WEB Community Edition is the Starion Web Application implementation of ECSS-E-TM-10-25
+//    Annex A and Annex C.
+// 
+//    Licensed under the Apache License, Version 2.0 (the "License");
+//    you may not use this file except in compliance with the License.
+//    You may obtain a copy of the License at
+// 
+//        http://www.apache.org/licenses/LICENSE-2.0
+// 
+//    Unless required by applicable law or agreed to in writing, software
+//    distributed under the License is distributed on an "AS IS" BASIS,
+//    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//    See the License for the specific language governing permissions and
+//    limitations under the License.
+// 
+//  </copyright>
+//  --------------------------------------------------------------------------------------------------------------------
+
+namespace COMET.Web.Common.Components.CardView
+{
+    using System.Text.RegularExpressions;
+
+    using FastMember;
+
+    using Microsoft.AspNetCore.Components;
+    using Microsoft.AspNetCore.Components.Rendering;
+
+    /// <summary>
+    /// A component that represents a data field in a <see cref="CardView{T}"/>'s ItemTemplate
+    /// </summary>
+    /// <typeparam name="T"></typeparam>
+    public class CardField<T> : ComponentBase
+    {
+        /// <summary>
+        /// The <see cref="FastMember.TypeAccessor"/> used to read properties from the instance of T.
+        /// This is a static property on a generic type, so it will have different static values for each used generic type in the application
+        /// </summary>
+        private static TypeAccessor typeAccessor;
+
+        /// <summary>
+        /// Initializes the static properties of this <see cref="CardField{T}"/> class
+        /// </summary>
+        static CardField()
+        {
+            typeAccessor = TypeAccessor.Create(typeof(T));
+        }
+
+        /// <summary>
+        /// Gets or sets The parent <see cref="CardView{T}"/>t
+        /// </summary>
+        [CascadingParameter(Name="CardView")]
+        private CardView<T> CardView { get; set; }
+
+        /// <summary>
+        /// The SearchTerm of the <see cref="CardView{T}"/> used to visually show the SearchTerm in this <see cref="CardField{T}"/>
+        /// </summary>
+        [CascadingParameter(Name = "SearchTerm")]
+        private string SearchTerm { get; set; }
+
+        /// <summary>
+        /// Gets or sets the context of this <see cref="CardField{T}"/>
+        /// </summary>
+        [Parameter]
+        public T Context { get; set; }
+
+        /// <summary>
+        /// Gets or sets the FieldName (propertyname of T) to show in the UI 
+        /// </summary>
+        [Parameter]
+        public string FieldName { get; set; }
+
+        /// <summary>
+        /// Gets or sets a value indicating that sorting is allowed for this <see cref="CardField{T}"/>
+        /// </summary>
+        [Parameter]
+        public bool AllowSort { get; set; } = true;
+
+        /// <summary>
+        /// Gets or sets a value indicating that searching is allowed for this <see cref="CardField{T}"/>
+        /// </summary>
+        [Parameter]
+        public bool AllowSearch { get; set; } = true;
+
+        /// <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.CardView.InitializeCardField(this);
+        }
+
+        /// <summary>
+        /// Renders the component to the supplied <see cref="RenderTreeBuilder"/>.
+        /// </summary>
+        /// <param name="builder">A <see cref="RenderTreeBuilder"/> that will receive the render output.</param>
+        protected override void BuildRenderTree(RenderTreeBuilder builder)
+        {
+            base.BuildRenderTree(builder);
+            var value = typeAccessor[this.Context, this.FieldName].ToString();
+
+            if (this.AllowSearch && !string.IsNullOrWhiteSpace(value) && !string.IsNullOrWhiteSpace(this.SearchTerm))
+            {
+                var separatorPattern = $"({this.SearchTerm})";
+                var result = Regex.Split(value, separatorPattern, RegexOptions.IgnoreCase, TimeSpan.FromSeconds(30));
+                var elementCounter = 0;
+
+                foreach (var element in result)
+                {
+                    if (string.Equals(element, this.SearchTerm, StringComparison.OrdinalIgnoreCase))
+                    {
+                        builder.OpenElement(elementCounter, "span");
+                        elementCounter++;
+                        builder.AddAttribute(elementCounter, "class", "search-mark");
+                        elementCounter++;
+                        builder.AddContent(elementCounter, element);
+                        elementCounter++;
+                        builder.CloseElement();
+                    }
+                    else
+                    {
+                        builder.AddContent(elementCounter, element);
+                        elementCounter++;
+                    }
+                }
+            }
+            else
+            {
+                builder.AddContent(0, value);
+            }
+        }
+    }
+}
diff --git a/COMET.Web.Common/Components/CardView/CardView.razor b/COMET.Web.Common/Components/CardView/CardView.razor
new file mode 100644
index 00000000..7bf4a1ab
--- /dev/null
+++ b/COMET.Web.Common/Components/CardView/CardView.razor
@@ -0,0 +1,61 @@
+<!------------------------------------------------------------------------------
+// Copyright (c) 2023-2024 Starion Group S.A.
+//
+//   Authors: Sam Gerené, Alex Vorobiev, Alexander van Delft, Jaime Bernar, Théate Antoine, Nabil Abbar
+//
+//   This file is part of CDP4-COMET WEB Community Edition
+//   The CDP4-COMET WEB Community Edition is the Starion Web Application implementation of ECSS-E-TM-10-25
+//   Annex A and Annex C.
+//
+//   Licensed under the Apache License, Version 2.0 (the "License");
+//   you may not use this file except in compliance with the License.
+//   You may obtain a copy of the License at
+//
+//       http://www.apache.org/licenses/LICENSE-2.0
+//
+//   Unless required by applicable law or agreed to in writing, software
+//   distributed under the License is distributed on an "AS IS" BASIS,
+//   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//   See the License for the specific language governing permissions and
+//   limitations under the License.
+------------------------------------------------------------------------------->
+
+@namespace COMET.Web.Common.Components.CardView
+@typeparam T
+@inherits DisposableComponent
+
+<p>
+    <table>
+        <tr>
+            <td id="search-textbox" style="visibility:@(this.AllowSearch ? "block": "hidden");">
+                <DxTextBox CssClass="inline-search-icon" SizeMode="SizeMode.Medium" BindValueMode="BindValueMode.OnDelayedInput" InputDelay="500" TextChanged="this.OnSearchTextChanged" NullText="Search..." ClearButtonDisplayMode="DataEditorClearButtonDisplayMode.Auto">
+                </DxTextBox>
+            </td>
+            <td id="sort-dropdown" style="visibility:@(this.AllowSort ? "block": "hidden");">
+                <DxComboBox TData="string" TValue="string" CssClass="inline-sort-icon" FilteringMode="DataGridFilteringMode.Contains" SizeMode="SizeMode.Medium" Data="@this.SortFields" SelectedItemChanged="@( x => this.OnSelectedSortItemChanged(x))"
+                    @bind-Value="@this.SelectedSortField">
+                </DxComboBox>
+            </td>
+        </tr>
+    </table>
+</p>
+<div class="container" style="height:calc(100% - 40px); overflow:auto;">
+    <div class="row">
+        <Virtualize ItemSize="@this.ItemSize" ItemsProvider="this.LoadItems" @ref="this.virtualize">
+            <ItemContent>
+                <div class="col" style="padding-left:0px;margin-left:0px;height:(@this.ItemSize)px;min-width:(@this.MinWidth)px;">
+                    <div class="card @(this.GetSelectedClass(@context))"
+                         @onclick="@(() => this.SelectItem(@context))">
+                        <div class="card-body" style="overflow-y:hidden;overflow-x:hidden">
+                            <CascadingValue Name="CardView" Value = "this">
+                                <CascadingValue Name="SearchTerm" Value="this.SearchTerm">
+                                    @this.ItemTemplate(@context)
+                                </CascadingValue>
+                            </CascadingValue>
+                        </div>
+                    </div>
+                </div>
+            </ItemContent>
+        </Virtualize>
+    </div>
+</div>
diff --git a/COMET.Web.Common/Components/CardView/CardView.razor.cs b/COMET.Web.Common/Components/CardView/CardView.razor.cs
new file mode 100644
index 00000000..3c868352
--- /dev/null
+++ b/COMET.Web.Common/Components/CardView/CardView.razor.cs
@@ -0,0 +1,236 @@
+// --------------------------------------------------------------------------------------------------------------------
+//  <copyright file="CardView.razor.cs" company="Starion Group S.A.">
+//    Copyright (c) 2023-2024 Starion Group S.A.
+// 
+//    Authors: Sam Gerené, Alex Vorobiev, Alexander van Delft, Jaime Bernar, Théate Antoine, Nabil Abbar
+// 
+//    This file is part of CDP4-COMET WEB Community Edition
+//    The CDP4-COMET WEB Community Edition is the Starion Web Application implementation of ECSS-E-TM-10-25
+//    Annex A and Annex C.
+// 
+//    Licensed under the Apache License, Version 2.0 (the "License");
+//    you may not use this file except in compliance with the License.
+//    You may obtain a copy of the License at
+// 
+//        http://www.apache.org/licenses/LICENSE-2.0
+// 
+//    Unless required by applicable law or agreed to in writing, software
+//    distributed under the License is distributed on an "AS IS" BASIS,
+//    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//    See the License for the specific language governing permissions and
+//    limitations under the License.
+// 
+//  </copyright>
+//  --------------------------------------------------------------------------------------------------------------------
+
+namespace COMET.Web.Common.Components.CardView
+{
+    using System.Linq.Dynamic.Core;
+
+    using FastMember;
+
+    using Microsoft.AspNetCore.Components;
+    using Microsoft.AspNetCore.Components.Web.Virtualization;
+
+    /// <summary>
+    /// Component used to show a CardView based on a specific type
+    /// </summary>
+    public partial class CardView<T> : DisposableComponent
+    {
+        /// <summary>
+        /// Gets or sets the item template for the list.
+        /// </summary>
+        [Parameter]
+        public RenderFragment<T>? ItemTemplate { get; set; }
+
+        /// <summary>
+        /// Gets or sets the list of items of type T to use
+        /// </summary>
+        [Parameter]
+        public ICollection<T> Items { get; set; } = new List<T>();
+
+        /// <summary>
+        /// Gets or sets the fixed height of a Card, used to calculate the amout of items to load into the DOM in px
+        /// </summary>
+        [Parameter]
+        public float ItemSize { get; set; } = 150;
+
+        /// <summary>
+        /// Gets or sets the minimum width of a Card
+        /// </summary>
+        [Parameter]
+        public float MinWidth { get; set; } = 250;
+
+        /// <summary>
+        /// Gets or sets a collection of propertynames of type T to perform search on
+        /// </summary>
+        public HashSet<string> SearchFields { get; private set; } = [];
+
+        /// <summary>
+        /// Gets or sets a collection of propertynames of type T to perform sorting on
+        /// </summary>
+        public SortedSet<string> SortFields { get; private set; } = [string.Empty];
+
+        /// <summary>
+        /// Gets or sets a value indication that sorting is allowed
+        /// </summary>
+        public bool AllowSort { get; set; }
+
+        /// <summary>
+        /// Gets or sets a value indication that searching is allowed
+        /// </summary>
+        public bool AllowSearch { get; set; }
+
+        /// <summary>
+        /// hold a reference to the previously selected Item.
+        /// Typically used to check for changes in Items collection
+        /// </summary>
+        private ICollection<T> previousItems;
+
+        /// <summary>
+        /// A reference to the <see cref="Virtualize{T}"/> component for loading items
+        /// </summary>
+        private Virtualize<T>? virtualize; // Reference to the Virtualize component
+
+        /// <summary>
+        /// The FastMember <see cref="FastMember.TypeAccessor"/> to use to perform actions on instances of type T
+        /// </summary>
+        private TypeAccessor typeAccessor = TypeAccessor.Create(typeof(T));
+
+        /// <summary>
+        /// The selected Card in the CardView
+        /// </summary>
+        private T selected;
+
+        /// <summary>
+        /// Gets or sets the term where to search/filter items on
+        /// </summary>
+        public string SearchTerm { get; set; } = string.Empty;
+
+        /// <summary>
+        /// Gets or sets the term where to sort items on
+        /// </summary>
+        public string SelectedSortField { get; set; } = string.Empty;
+
+        /// <summary>
+        /// Gets the class to visually show a Card to be selected or unselected
+        /// </summary>
+        /// <param name="vm"></param>
+        /// <returns>A string that retrurns the css class for selected Card</returns>
+        private string GetSelectedClass(T vm)
+        {
+            return vm.Equals(this.selected) ? "selected" : "";
+        }
+
+        /// <summary>
+        /// Set the selected item
+        /// </summary>
+        /// <param name="item">The item of type T</param>
+        public void SelectItem(T item)
+        {
+            this.selected = item;
+        }
+
+        /// <summary>
+        /// Filters the list of items to show in the UI based on the <see cref="SearchTerm"/>
+        /// </summary>
+        /// <param name="request">The request to perform filtering of the items list</param>
+        /// <returns>an waitable <see cref="ValueTask"/></returns>
+        private ValueTask<ItemsProviderResult<T>> LoadItems(ItemsProviderRequest request)
+        {
+            // Filter items based on the SearchTerm
+            var filteredItems = !this.AllowSearch || string.IsNullOrWhiteSpace(this.SearchTerm)
+                ? this.Items
+                : this.Items.Where(item => this.FilterItem(item, this.SearchTerm)).ToList();
+
+            // Return paged items for virtualization
+            var items = filteredItems.Skip(request.StartIndex).Take(request.Count);
+
+            if (this.AllowSort && !string.IsNullOrWhiteSpace(this.SelectedSortField))
+            {
+                items = items.AsQueryable().OrderBy(this.SelectedSortField);
+            }
+
+            return new ValueTask<ItemsProviderResult<T>>(new ItemsProviderResult<T>(items.ToList(), filteredItems.Count));
+        }
+
+        /// <summary>
+        /// Used to filter items based on the <see cref="SearchTerm"/>
+        /// </summary>
+        /// <param name="item">The item to perform searching on</param>
+        /// <param name="query">The string to search for</param>
+        /// <returns>True if the item's selected properties contain the value to search for, otherwise false</returns>
+        private bool FilterItem(T item, string query)
+        {
+            if (this.AllowSearch)
+            {
+                var props = this.typeAccessor.GetMembers();
+
+                return props.Where(x => this.SearchFields.Contains(x.Name)).Any(prop =>
+                {
+                    var value = this.typeAccessor[item, prop.Name].ToString();
+                    return value != null && value.Contains(query, StringComparison.OrdinalIgnoreCase);
+                });
+            }
+
+            return true;
+        }
+
+        /// <summary>
+        /// A method that is executed when the user changes the search input element
+        /// </summary>
+        /// <param name="value">The text from the UI element's event</param>
+        private void OnSearchTextChanged(string value)
+        {
+            this.SearchTerm = value ?? string.Empty;
+
+            this.virtualize?.RefreshDataAsync(); // Tell Virtualize to refresh data
+        }
+
+        /// <summary>
+        /// Initializes the <see cref="CardField{T}"/>
+        /// </summary>
+        /// <param name="cardField">the <see cref="CardField{T}"/></param>
+        internal void InitializeCardField(CardField<T> cardField)
+        {
+            if (cardField.AllowSort && this.SortFields.Add(cardField.FieldName))
+            {
+                this.AllowSort = true;
+                this.StateHasChanged();
+            }
+
+            if (cardField.AllowSearch && this.SearchFields.Add(cardField.FieldName))
+            {
+                this.AllowSearch = true;
+                this.StateHasChanged();
+            }
+        }
+
+        /// <summary>
+        /// Handles the selection of a the Sort item
+        /// </summary>
+        /// <param name="newVal"></param>
+        public void OnSelectedSortItemChanged(string newVal)
+        {
+            this.SelectedSortField = newVal ?? string.Empty;
+
+            this.virtualize?.RefreshDataAsync(); // Tell Virtualize to refresh data
+        }
+
+        /// <summary>
+        /// Raised when a parameter is set
+        /// </summary>
+        /// <returns>An awaitable <see cref="Task"/></returns>
+        protected override async Task OnParametersSetAsync()
+        {
+            await base.OnParametersSetAsync();
+
+            if (!Equals(this.previousItems, this.Items) && this.virtualize != null)
+            {
+                await this.virtualize.RefreshDataAsync(); // Tell Virtualize to refresh data
+            }
+
+            this.previousItems = this.Items;
+        }
+    }
+}
diff --git a/COMET.Web.Common/Components/CardView/CardView.razor.css b/COMET.Web.Common/Components/CardView/CardView.razor.css
new file mode 100644
index 00000000..4be8b3eb
--- /dev/null
+++ b/COMET.Web.Common/Components/CardView/CardView.razor.css
@@ -0,0 +1,12 @@
+.card {
+    margin-bottom: 10px;
+    background-color: #f9f9fb;
+}
+
+.card:hover {
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+.card.selected {
+    border: 2px solid var(--bs-primary, var(--primary));
+}
diff --git a/COMET.Web.Common/_Imports.razor b/COMET.Web.Common/_Imports.razor
index e2da291b..ecb41a86 100644
--- a/COMET.Web.Common/_Imports.razor
+++ b/COMET.Web.Common/_Imports.razor
@@ -2,6 +2,7 @@
 @using COMET.Web.Common.Components.Applications
 @using COMET.Web.Common.Components.Selectors
 @using COMET.Web.Common.Components.ParameterTypeEditors
+@using COMET.Web.Common.Components.CardView
 @using COMET.Web.Common.Shared
 @using COMET.Web.Common.Shared.TopMenuEntry
 @using System.Net.Http
diff --git a/COMET.Web.Common/wwwroot/css/styles.css b/COMET.Web.Common/wwwroot/css/styles.css
index 719b4eed..83c84789 100644
--- a/COMET.Web.Common/wwwroot/css/styles.css
+++ b/COMET.Web.Common/wwwroot/css/styles.css
@@ -572,3 +572,38 @@
         width: 25%;
         margin: 0;
     }
+
+.inline-search-icon {
+    display: flex;
+    align-items: center;
+    position: relative;
+    padding-left: 20px !important; /* Leave space for the icon */
+}
+
+    .inline-search-icon::before {
+        content: '\e08f'; /* Unicode for an example icon (change this for your preferred icon) */
+        font-family: Icons;
+        top:3px;
+        position: absolute;
+        left: 5px; /* Position of the icon */
+        color: #757575; /* Icon color */
+        font-size: 16px; /* Icon size */
+    }
+
+.inline-sort-icon {
+    display: flex;
+    align-items: center;
+    position: relative;
+    padding-left: 20px !important; /* Leave space for the icon */
+}
+
+    .inline-sort-icon::before {
+        content: '\e0bf'; /* Unicode for an example icon (change this for your preferred icon) */
+        font-family: Icons;
+        vertical-align: middle;
+        position: absolute;
+        top: 3px;
+        left: 5px; /* Position of the icon */
+        color: #757575; /* Icon color */
+        font-size: 16px; /* Icon size */
+    }
\ No newline at end of file
diff --git a/COMETwebapp/Components/Common/DataItemDetailsComponent.razor.css b/COMETwebapp/Components/Common/DataItemDetailsComponent.razor.css
index b737c6d7..013c5918 100644
--- a/COMETwebapp/Components/Common/DataItemDetailsComponent.razor.css
+++ b/COMETwebapp/Components/Common/DataItemDetailsComponent.razor.css
@@ -1,5 +1,5 @@
 .data-item-details-section {
-    padding: 30px;
+    padding: 15px;
     border: 1px dashed;
     border-radius: 10px;
     height: 100%;
diff --git a/COMETwebapp/Components/ModelEditor/DetailsPanelEditor.razor b/COMETwebapp/Components/ModelEditor/DetailsPanelEditor.razor
index 2d260b0e..8ef86c23 100644
--- a/COMETwebapp/Components/ModelEditor/DetailsPanelEditor.razor
+++ b/COMETwebapp/Components/ModelEditor/DetailsPanelEditor.razor
@@ -28,15 +28,38 @@
 
 @if (this.ViewModel.SelectedSystemNode != null)
 {
-	<DxGrid Data="this.ViewModel.Rows" ColumnResizeMode="GridColumnResizeMode.ColumnsContainer" ShowAllRows="true" >
-		<Columns>
-			<DxGridDataColumn Caption="Name" FieldName="@nameof(ElementDefinitionDetailsRowViewModel.ParameterTypeName)" />
-			<DxGridDataColumn Caption="Short Name" FieldName="@nameof(ElementDefinitionDetailsRowViewModel.ShortName)" MinWidth="80" />
-			<DxGridDataColumn Caption="Actual Value" FieldName="@nameof(ElementDefinitionDetailsRowViewModel.ActualValue)" />
-			<DxGridDataColumn Caption="Published Value" FieldName="@nameof(ElementDefinitionDetailsRowViewModel.PublishedValue)" />
-			<DxGridDataColumn Caption="Owner" FieldName="@nameof(ElementDefinitionDetailsRowViewModel.Owner)" MinWidth="50"/>
-			<DxGridDataColumn Caption="Switch" FieldName="@nameof(ElementDefinitionDetailsRowViewModel.SwitchValue)" MinWidth="60"/>
-			<DxGridDataColumn Caption="Model Code" FieldName="@nameof(ElementDefinitionDetailsRowViewModel.ModelCode)" MinWidth="100"/>
-		</Columns>
-	</DxGrid>
-}
\ No newline at end of file
+    <CardView Items="this.ViewModel.Rows" ItemSize="150" MinWidth="180">
+        <ItemTemplate>
+            <div class="row">
+                <div class="col-10">
+                    <h6 title="@context.ParameterTypeName" style="overflow:hidden;text-overflow: ellipsis;white-space: nowrap;"><CardField Context="@context" FieldName="ParameterTypeName"/></h6>
+                </div>
+                <div class="col-2" align="right">
+                    <button class="starion-pill" title="Owning Domain Of Expertise: @context.Owner"><CardField Context="@context" FieldName="Owner" /></button>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-12" style="overflow:hidden;text-overflow: ellipsis;white-space: nowrap;" title="@context.ModelCode">
+                    <CardField Context="@context" FieldName="ModelCode" />
+                </div>
+            </div>
+            <div class="row" style="border-top:1px dotted darkgray;margin-top:8px;padding-top:8px;">
+                <div class="col-6">
+                    <span>
+                        <button class="starion-pill" title="Actual Value's Value Switch: @context.SwitchValue"><CardField Context="@context" FieldName="SwitchValue" /></button>
+                    </span>
+                    <span>Actual:</span>
+                </div>
+                <div class="col-6">
+                    Published:
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-6" style="overflow:hidden;text-overflow: ellipsis;white-space: nowrap;" title="Actual Value: @context.ActualValue">
+                    <CardField Context="@context" FieldName="ActualValue" />
+                </div>
+                <div class="col-6" style="overflow:hidden;text-overflow: ellipsis;white-space: nowrap;" title="Published Value: @context.PublishedValue"><CardField Context="@context" FieldName="PublishedValue" /></div>
+            </div>
+        </ItemTemplate>
+    </CardView>
+}
diff --git a/COMETwebapp/Components/ModelEditor/ElementDefinitionTable.razor b/COMETwebapp/Components/ModelEditor/ElementDefinitionTable.razor
index 95e817d2..b1b9ccdf 100644
--- a/COMETwebapp/Components/ModelEditor/ElementDefinitionTable.razor
+++ b/COMETwebapp/Components/ModelEditor/ElementDefinitionTable.razor
@@ -75,7 +75,6 @@
                                   Width="100%"
                                   CssClass="model-editor-details">
             <div class="mb-2 row">
-                <h4 class="d-inline">Panel Editor</h4>
                 <div class="float-end">
                     @if (this.ViewModel.SelectedElementDefinition is not null)
                     {
@@ -85,7 +84,7 @@
                     <DxButton Id="addElementDefinition" Text="Add Element Definition" IconCssClass="oi oi-plus" Click="@this.ViewModel.OpenCreateElementDefinitionCreationPopup"/>
                 </div>
             </div>
-            <div style="height: 73vh!important;" class="sticky-scrollable-column d-flex justify-content-between">
+            <div style="height: 73vh!important;" class="sticky-scrollable-column justify-content-between">
                 <DetailsPanelEditor ViewModel="this.ViewModel.ElementDefinitionDetailsViewModel"/>
             </div>
         </DataItemDetailsComponent>
diff --git a/COMETwebapp/Components/ModelEditor/ElementDefinitionTable.razor.css b/COMETwebapp/Components/ModelEditor/ElementDefinitionTable.razor.css
index c81656e7..67aafaa3 100644
--- a/COMETwebapp/Components/ModelEditor/ElementDefinitionTable.razor.css
+++ b/COMETwebapp/Components/ModelEditor/ElementDefinitionTable.razor.css
@@ -6,5 +6,5 @@
     position: sticky;
     top: 0px;
     max-height: 80vh;
-    overflow: auto;
+    overflow:hidden;
 }
diff --git a/COMETwebapp/ViewModels/Components/SystemRepresentation/ElementDefinitionDetailsViewModel.cs b/COMETwebapp/ViewModels/Components/SystemRepresentation/ElementDefinitionDetailsViewModel.cs
index cbfb4096..a40c87f6 100644
--- a/COMETwebapp/ViewModels/Components/SystemRepresentation/ElementDefinitionDetailsViewModel.cs
+++ b/COMETwebapp/ViewModels/Components/SystemRepresentation/ElementDefinitionDetailsViewModel.cs
@@ -53,6 +53,6 @@ public ElementBase SelectedSystemNode
         /// <summary>
         /// A collection of <see cref="ElementDefinitionDetailsRowViewModel" />
         /// </summary>
-        public IEnumerable<ElementDefinitionDetailsRowViewModel> Rows { get; set; }
+        public ICollection<ElementDefinitionDetailsRowViewModel> Rows { get; set; }
     }
 }
diff --git a/COMETwebapp/ViewModels/Components/SystemRepresentation/IElementDefinitionDetailsViewModel.cs b/COMETwebapp/ViewModels/Components/SystemRepresentation/IElementDefinitionDetailsViewModel.cs
index ba343ca6..f88364b1 100644
--- a/COMETwebapp/ViewModels/Components/SystemRepresentation/IElementDefinitionDetailsViewModel.cs
+++ b/COMETwebapp/ViewModels/Components/SystemRepresentation/IElementDefinitionDetailsViewModel.cs
@@ -40,6 +40,6 @@ public interface IElementDefinitionDetailsViewModel
         /// <summary>
         /// A collection of <see cref="ElementDefinitionDetailsRowViewModel" />
         /// </summary>
-        IEnumerable<ElementDefinitionDetailsRowViewModel> Rows { get; set; }
+        ICollection<ElementDefinitionDetailsRowViewModel> Rows { get; set; }
     }
 }
diff --git a/COMETwebapp/_Imports.razor b/COMETwebapp/_Imports.razor
index 4f12a364..c8047d07 100644
--- a/COMETwebapp/_Imports.razor
+++ b/COMETwebapp/_Imports.razor
@@ -40,6 +40,7 @@
 @using COMET.Web.Common.Components.ParameterTypeEditors
 @using COMET.Web.Common.Components.Selectors
 @using COMET.Web.Common.Components.ValueSetRenderers
+@using COMET.Web.Common.Components.CardView
 @using COMET.Web.Common.Pages
 @using Blazor.Diagrams.Core;
 @using Blazor.Diagrams.Core.Models;
diff --git a/COMETwebapp/wwwroot/css/app.css b/COMETwebapp/wwwroot/css/app.css
index 2f4bcb17..e8d71525 100644
--- a/COMETwebapp/wwwroot/css/app.css
+++ b/COMETwebapp/wwwroot/css/app.css
@@ -302,3 +302,18 @@ sub {
 .validation-container:not(:has(li)) {
     display: none;
 }
+
+.starion-pill {
+    margin: 1px;
+    height: 19px;
+    width: auto;
+    border-radius: 30px;
+    background-color: white;
+    border: 1px solid dimgray;
+    color: dimgray;
+    padding-top: 0px;
+}
+
+.search-mark {
+    background-color: yellow !important;
+}
diff --git a/COMETwebapp/wwwroot/css/vars.css b/COMETwebapp/wwwroot/css/vars.css
index d90dde54..f4081555 100644
--- a/COMETwebapp/wwwroot/css/vars.css
+++ b/COMETwebapp/wwwroot/css/vars.css
@@ -59,7 +59,7 @@
     --spacing-18: 4.5rem;
     --spacing-19: 4.75rem;
     --spacing-20: 5rem;
-    --dxbl-listbox-font-size: 0.98rem;
-    --bs-body-font-size: 0.98rem;
+    --dxbl-listbox-font-size: 0.88rem;
+    --bs-body-font-size: 0.88rem;
     --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 }