diff --git a/src/MultiShop/Client/Shared/DragAndDropList.razor b/src/MultiShop/Client/Shared/DragAndDropList.razor
index 4ed4689..74ead76 100644
--- a/src/MultiShop/Client/Shared/DragAndDropList.razor
+++ b/src/MultiShop/Client/Shared/DragAndDropList.razor
@@ -2,10 +2,10 @@
 @typeparam TItem
 @inject IJSRuntime JS
 
-<ul class=@ListGroupCss style="width: max-content;" @ref="dragAndDrop">
+<ul class=@ListGroupCss style="width: max-content;" ondragover="event.preventDefault()">
     @foreach (TItem item in Items)
     {
-        <li class="list-group-item" draggable=@((!processingDropChange).ToString()) @ondragstart="@(() => itemDraggedIndex = Items.IndexOf(item))" @ondrop="@(async () => await OnDrop(item))">
+        <li class="list-group-item list-group-item-hover" draggable=@((!processingDropChange).ToString()) @ondragstart="@(() => itemDraggedIndex = Items.IndexOf(item))" @ondrop="@(async () => await OnDrop(item))">
             <div class="d-inline-flex">
                 <div class="mr-3">
                     <button class="btn" type="button" style="padding: 0px;" @onclick="@(() => OnButtonClickMove(Items.IndexOf(item), true))" disabled="@(processingDropChange || Items.IndexOf(item) <= 0)"><span class="oi oi-caret-top"></span></button>
@@ -33,8 +33,6 @@
     [Parameter]
     public RenderFragment<TItem> DraggableItem { get; set; }
 
-    private ElementReference dragAndDrop;
-
     private int itemDraggedIndex = -1;
     private bool processingDropChange = false;
 
@@ -50,14 +48,6 @@
         await base.OnParametersSetAsync();
     }
 
-    protected override async Task OnAfterRenderAsync(bool firstRender)
-    {
-        if (firstRender)
-        {
-            await JS.InvokeVoidAsync("dragAndDropList", dragAndDrop);
-        }
-        await base.OnAfterRenderAsync(firstRender);
-    }
 
 
     private async Task OnDrop(TItem dropped)
diff --git a/src/MultiShop/Client/wwwroot/index.html b/src/MultiShop/Client/wwwroot/index.html
index 36c0c9c..a0a0847 100644
--- a/src/MultiShop/Client/wwwroot/index.html
+++ b/src/MultiShop/Client/wwwroot/index.html
@@ -20,7 +20,6 @@
         <a class="dismiss">🗙</a>
     </div>
     
-    <script src="js/ComponentsSupport.js"></script>
     <script src="_content/Microsoft.AspNetCore.Components.WebAssembly.Authentication/AuthenticationService.js"></script>
     <script src="_framework/blazor.webassembly.js"></script>
 </body>
diff --git a/src/MultiShop/Client/wwwroot/js/ComponentsSupport.js b/src/MultiShop/Client/wwwroot/js/ComponentsSupport.js
deleted file mode 100644
index 2122ce1..0000000
--- a/src/MultiShop/Client/wwwroot/js/ComponentsSupport.js
+++ /dev/null
@@ -1,23 +0,0 @@
-function dragAndDropList(elem) {
-    elem.addEventListener("dragover", (e) => {
-        e.preventDefault();
-    });
-    let itemDragged;
-    for (let i = 0; i < elem.childElementCount; i++) {
-        let e = elem.children[i];
-        e.addEventListener("dragstart", () => {
-            itemDragged = e;
-            e.classList.add("list-group-item-secondary");
-        });
-        e.addEventListener("dragenter", () => {
-            e.classList.add("list-group-item-primary");
-        });
-        e.addEventListener("dragleave", () => {
-            e.classList.remove("list-group-item-primary");
-        });
-        e.addEventListener("drop", () => {
-            e.classList.remove("list-group-item-primary");
-            itemDragged.classList.remove("list-group-item-secondary");
-        });
-    }
-}
\ No newline at end of file