diff --git a/COMET.Web.Common/Components/CardView/CardField.cs b/COMET.Web.Common/Components/CardView/CardField.cs
index c8296c2a..24238f25 100644
--- a/COMET.Web.Common/Components/CardView/CardField.cs
+++ b/COMET.Web.Common/Components/CardView/CardField.cs
@@ -1,4 +1,28 @@
-
+// --------------------------------------------------------------------------------------------------------------------
+//  <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;
@@ -8,39 +32,76 @@ namespace COMET.Web.Common.Components.CardView
     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="TypeAccessor"/> used to read properties from the instance of <see cref="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 { get; set; }
 
+        /// <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 <see cref="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.RegisterCardField(this);
+            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);
diff --git a/COMET.Web.Common/Components/CardView/CardView.razor b/COMET.Web.Common/Components/CardView/CardView.razor
index 0a31c95b..4f86e930 100644
--- a/COMET.Web.Common/Components/CardView/CardView.razor
+++ b/COMET.Web.Common/Components/CardView/CardView.razor
@@ -23,24 +23,29 @@
 @typeparam T
 @inherits DisposableComponent
 
-<p style="visibility:@(this.AllowSearch ? "block": "hidden");">
+<p>
     <table>
         <tr>
-            <td><input type="text" @oninput="this.OnSearchTextChanged" placeholder="Search..."/></td>
-            <td><DxComboBox Data="@this.SortFields" SelectedItemChanged="@((string x) => this.OnSelectedItemChanged(x))"
-                                    @bind-Value="@this.SelectedSortField"/>
+            <td style="visibility:@(this.AllowSearch ? "block": "hidden");">
+                <DxTextBox CssClass="inline-search-icon" SizeMode="SizeMode.Medium" BindValueMode="BindValueMode.OnDelayedInput" InputDelay="500" TextChanged="@((string x) => this.OnSearchTextChanged(x))" NullText="Search..." ClearButtonDisplayMode="DataEditorClearButtonDisplayMode.Auto">
+                </DxTextBox>
+            </td>
+            <td style="visibility:@(this.AllowSort ? "block": "hidden");">
+                <DxComboBox CssClass="inline-sort-icon" FilteringMode="DataGridFilteringMode.Contains" SizeMode="SizeMode.Medium" Data="@this.SortFields" SelectedItemChanged="@((string x) => this.OnSelectedSortItemChanged(x))"
+                            @bind-Value="@this.selectedSortField">
+                </DxComboBox>
             </td>
         </tr>
     </table>
 </p>
-<div class="container" style="height:calc(100% - 30px); overflow:auto;">
+<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="height:(@this.ItemSize)px;min-width:(@this.MinWidth)px;">
+                <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.selectOption(@context))"
-                         draggable="true"
+                         @onclick="@(() => this.selectItem(@context))"
+                         draggable="false"
                          dropzone="move"
                          ondragover="event.preventDefault();"
                          @ondragstart="@(() => this.OnDragNode(@context))"
diff --git a/COMET.Web.Common/Components/CardView/CardView.razor.cs b/COMET.Web.Common/Components/CardView/CardView.razor.cs
index 611b6459..07010003 100644
--- a/COMET.Web.Common/Components/CardView/CardView.razor.cs
+++ b/COMET.Web.Common/Components/CardView/CardView.razor.cs
@@ -32,7 +32,6 @@ namespace COMET.Web.Common.Components
     using Microsoft.AspNetCore.Components;
     using Microsoft.AspNetCore.Components.Web.Virtualization;
 
-    using System.Linq.Dynamic;
     using System.Linq.Dynamic.Core;
 
     /// <summary>
@@ -52,6 +51,18 @@ public partial class CardView<T> : DisposableComponent
         [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 <see cref="T"/> to perform search on
         /// </summary>
@@ -63,21 +74,21 @@ public partial class CardView<T> : DisposableComponent
         public SortedSet<string> SortFields { get; set; } = [string.Empty];
 
         /// <summary>
-        /// Gets or sets the fixed height of a Card, used to calculate the amout of items to load into the DOM in px
+        /// Gets or sets a value indication that sorting is allowed
         /// </summary>
-        [Parameter]
-        public float ItemSize { get; set; } = 150;
+        public bool AllowSort { get; set; } = false;
 
         /// <summary>
-        /// Gets or sets the minimum width of a Card
+        /// Gets or sets a value indication that searching is allowed
         /// </summary>
-        [Parameter]
-        public float MinWidth { get; set; } = 250;
-
-        public bool AllowSort { get; set; } = false;
-
         public bool AllowSearch { get; set; } = false;
 
+        /// <summary>
+        /// hold a reference to the previously selected Item.
+        /// Typically used to check for changes in Items collection
+        /// </summary>
+        private ICollection<T> previousItems = null;
+
         /// <summary>
         /// A reference to the <see cref="Virtualize{T}"/> component for loading items
         /// </summary>
@@ -99,17 +110,20 @@ public partial class CardView<T> : DisposableComponent
         private T draggedNode { get; set; }
 
         /// <summary>
-        /// Gets or sets the term where to search/filter item of
+        /// Gets or sets the term where to search/filter items on
         /// </summary>
         private string searchTerm { get; set; } = string.Empty;
 
-        public string SelectedSortField { get; set; }
+        /// <summary>
+        /// Gets or sets the term where to sort items on
+        /// </summary>
+        private 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></returns>
+        /// <returns>A string that retrurns the css class for selected Card</returns>
         private string GetSelectedClass(T vm)
         {
             return vm.Equals(this.selected) ? "selected" : "";
@@ -118,8 +132,8 @@ private string GetSelectedClass(T vm)
         /// <summary>
         /// Set the selected item
         /// </summary>
-        /// <param name="item"></param>
-        private void selectOption(T item)
+        /// <param name="item">The item <see cref="T"/></param>
+        private void selectItem(T item)
         {
             this.selected = item;
         }
@@ -140,18 +154,7 @@ private void OnDragNode(T node)
         /// <returns>A <see cref="Task"/></returns>
         private async Task OnDropNode(T targetNode)
         {
-            //TODO: Implement
-            // var targetFolder = (Folder)targetNode.Thing;
-
-            // switch (this.DraggedNode?.Thing)
-            // {
-            //     case File file:
-            //         await this.ViewModel.FileHandlerViewModel.MoveFile(file, targetFolder);
-            //         break;
-            //     case Folder folder:
-            //         await this.ViewModel.FolderHandlerViewModel.MoveFolder(folder, targetFolder);
-            //         break;
-            // }
+            //not implemented yet
         }
 
         /// <summary>
@@ -162,16 +165,16 @@ private async Task OnDropNode(T targetNode)
         private async ValueTask<ItemsProviderResult<T>> LoadItems(ItemsProviderRequest request)
         {
             // Filter items based on the SearchTerm
-            var filteredItems = string.IsNullOrWhiteSpace(this.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 (!string.IsNullOrWhiteSpace(this.SelectedSortField))
+            if (this.AllowSort && !string.IsNullOrWhiteSpace(this.selectedSortField))
             {
-                items = items.AsQueryable().OrderBy(this.SelectedSortField);
+                items = items.AsQueryable().OrderBy(this.selectedSortField);
             }
 
             return new ItemsProviderResult<T>(items.ToList(), filteredItems.Count);
@@ -185,31 +188,36 @@ private async ValueTask<ItemsProviderResult<T>> LoadItems(ItemsProviderRequest r
         /// <returns>True if the item's selected properties contain the value to search for, otherwise false</returns>
         private bool FilterItem(T item, string query)
         {
-            var props = this.typeAccessor.GetMembers();
-
-            return props.Where(x => this.SearchFields.Contains(x.Name)).Any(prop =>
+            if (this.AllowSearch)
             {
-                var value = this.typeAccessor[item, prop.Name].ToString();
-                return value != null && value.Contains(query, StringComparison.OrdinalIgnoreCase);
-            });
+                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="e">The <see cref="ChangeEventArgs"/> from the UI element's event</param>
-        /// <returns></returns>
-        private async Task OnSearchTextChanged(ChangeEventArgs e)
+        /// <param name="value">The text from the UI element's event</param>
+        private void OnSearchTextChanged(string value)
         {
-            this.searchTerm = e.Value?.ToString() ?? string.Empty;
+            this.searchTerm = value ?? string.Empty;
 
-            if (this.virtualize != null)
-            {
-                await this.virtualize.RefreshDataAsync(); // Tell Virtualize to refresh data
-            }
+            this.virtualize?.RefreshDataAsync(); // Tell Virtualize to refresh data
         }
 
-        internal void RegisterCardField(CardField<T> cardField)
+        /// <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)
             {
@@ -230,11 +238,31 @@ internal void RegisterCardField(CardField<T> cardField)
             }
         }
 
-        private void OnSelectedItemChanged(string arg)
+        /// <summary>
+        /// Handles the selection of a the Sort item
+        /// </summary>
+        /// <param name="arg"></param>
+        private void OnSelectedSortItemChanged(string arg)
         {
-            this.SelectedSortField = arg ?? string.Empty;
+            this.selectedSortField = arg ?? 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/wwwroot/css/styles.css b/COMET.Web.Common/wwwroot/css/styles.css
index 719b4eed..946a1700 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 213ad787..8ef86c23 100644
--- a/COMETwebapp/Components/ModelEditor/DetailsPanelEditor.razor
+++ b/COMETwebapp/Components/ModelEditor/DetailsPanelEditor.razor
@@ -28,7 +28,7 @@
 
 @if (this.ViewModel.SelectedSystemNode != null)
 {
-    <CardView Items="@this.ViewModel.Rows.ToList()" ItemSize="150" MinWidth="180">
+    <CardView Items="this.ViewModel.Rows" ItemSize="150" MinWidth="180">
         <ItemTemplate>
             <div class="row">
                 <div class="col-10">
@@ -45,29 +45,21 @@
             </div>
             <div class="row" style="border-top:1px dotted darkgray;margin-top:8px;padding-top:8px;">
                 <div class="col-6">
-                    <CardField Context="@context" FieldName="SwitchValue" />:
+                    <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="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>
 }
-
-@code 
-{
-    private string[] searchAndSortFields =
-    [
-        nameof(ElementDefinitionDetailsRowViewModel.ParameterTypeName),
-        nameof(ElementDefinitionDetailsRowViewModel.Owner),
-        nameof(ElementDefinitionDetailsRowViewModel.ModelCode),
-        nameof(ElementDefinitionDetailsRowViewModel.ActualValue),
-        nameof(ElementDefinitionDetailsRowViewModel.PublishedValue),
-        nameof(ElementDefinitionDetailsRowViewModel.SwitchValue)
-    ];
-}
diff --git a/COMETwebapp/Components/ModelEditor/ElementDefinitionTable.razor b/COMETwebapp/Components/ModelEditor/ElementDefinitionTable.razor
index d6fb40b9..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)
                     {
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; }
     }
 }