diff --git a/BlazorApp/BlazorApp/Components/InventoryComp.razor b/BlazorApp/BlazorApp/Components/InventoryComp.razor
index ab7078a..c09a3dd 100644
--- a/BlazorApp/BlazorApp/Components/InventoryComp.razor
+++ b/BlazorApp/BlazorApp/Components/InventoryComp.razor
@@ -50,20 +50,12 @@
                       TotalItems="@totalItem"
                       PageSize="10"
                       ShowPager
-                      
                       Sortable="true">
                 <Button type="submit" @onclick="() => SortByName()">SORT</Button>
                
                 <DataGridColumn TItem="Item" Field="@nameof(Item.Id)">
                     <DisplayTemplate>
-                        @if (!string.IsNullOrWhiteSpace(context.ImageBase64))
-                        {
-                            <img src="data:image/png;base64, @(context.ImageBase64)" class="img-thumbnail" title="@context.DisplayName" alt="@context.DisplayName" style="min-width: 50px; max-width: 50px" />
-                        }
-                        else
-                        {
-                            <img src="images/default.png" class="img-thumbnail" title="@context.DisplayName" alt="@context.DisplayName" style="max-width: 150px" />
-                        }
+                        <InventoryItem Item="@context" NoDrop="true"/>
                     </DisplayTemplate>
                 </DataGridColumn>
                 <DataGridColumn TItem="Item" Field="@nameof(Item.DisplayName)" />
diff --git a/BlazorApp/BlazorApp/Components/InventoryComp.razor.cs b/BlazorApp/BlazorApp/Components/InventoryComp.razor.cs
index 6ca14eb..012c335 100644
--- a/BlazorApp/BlazorApp/Components/InventoryComp.razor.cs
+++ b/BlazorApp/BlazorApp/Components/InventoryComp.razor.cs
@@ -24,15 +24,30 @@ namespace BlazorApp.Components
 
         public List<Item> InventoryItems { get; set; }
 
+        public ObservableCollection<CraftingAction> Actions { get; set; }
+
+        [Inject]
+        internal IJSRuntime JavaScriptRuntime { get; set; }
+
         private int totalItem;
 
+        private int PageSize { get; set; }
+        private int CurrentPage { get; set; }
+
+        private bool IsSorted { get; set; }
+
+
         public InventoryComp()
         {
-            this.InventoryItems = new List<Item> { };
-            for (int i = 0; i < 18; i++)
-            {
-                this.InventoryItems.Append(null);
+            Actions = new ObservableCollection<CraftingAction>();
+            Actions.CollectionChanged += OnActionsCollectionChanged;
+
+            this.InventoryItems = new List<Item>(new Item[18]);
         }
+
+        private void OnActionsCollectionChanged(object? sender, NotifyCollectionChangedEventArgs e)
+        {
+            JavaScriptRuntime.InvokeVoidAsync("Crafting.AddActions", e.NewItems);
         }
 
         private async Task OnReadData(DataGridReadDataEventArgs<Item> e)
@@ -42,16 +57,28 @@ namespace BlazorApp.Components
                 return;
             }
 
-            if (!e.CancellationToken.IsCancellationRequested)
+            if (!e.CancellationToken.IsCancellationRequested && !IsSorted)
             {
                 Items = await DataService.List(e.Page, e.PageSize);
                 totalItem = await DataService.Count();
-        }
+                CurrentPage = e.Page;
+                PageSize = e.PageSize;
+            }
+            else
+            {
+                CurrentPage = e.Page;
+                PageSize = e.PageSize;
+                Items = await DataService.SortedList(CurrentPage, PageSize);
+            }
         }
 
         private async Task SortByName()
         {
-            Items = await DataService.SortedList();
+            if (!IsSorted)
+            {
+                IsSorted = true;
+                Items = await DataService.SortedList(CurrentPage, PageSize);
+            }
         }
 
         void refresh()
diff --git a/BlazorApp/BlazorApp/Components/InventoryItem.razor b/BlazorApp/BlazorApp/Components/InventoryItem.razor
index 298b7eb..7c66705 100644
--- a/BlazorApp/BlazorApp/Components/InventoryItem.razor
+++ b/BlazorApp/BlazorApp/Components/InventoryItem.razor
@@ -5,10 +5,25 @@
      @ondrop="@OnDrop"
      @ondragenter="@OnDragEnter"
      @ondragleave="@OnDragLeave"
-     @ondragend="@OnDragEnd" >
+     @ondragend="@OnDragEnd">
 
     @if (Item != null)
     {
-        @Item.DisplayName
+        if (NoDrop)
+        {
+            @if (!string.IsNullOrWhiteSpace(Item.ImageBase64))
+            {
+                <img src="data:image/png;base64, @(Item.ImageBase64)" class="img-thumbnail" title="@Item.DisplayName" alt="@Item.DisplayName" style="min-width: 64px; max-width: 64px " />
+            }
+            else
+            {
+                <img src="images/default.png" class="img-thumbnail" title="@Item.DisplayName" alt="@Item.DisplayName" style="max-width: 64px" />
+            }
+        }
+        else
+        {
+            @Item.DisplayName
+        }
+
     }
 </div>
\ No newline at end of file
diff --git a/BlazorApp/BlazorApp/Components/InventoryItem.razor.cs b/BlazorApp/BlazorApp/Components/InventoryItem.razor.cs
index 6af5477..9ccfd8e 100644
--- a/BlazorApp/BlazorApp/Components/InventoryItem.razor.cs
+++ b/BlazorApp/BlazorApp/Components/InventoryItem.razor.cs
@@ -52,6 +52,8 @@ namespace BlazorApp.Components
                 Parent.CurrentDragItem = tmp;
                 Parent.CurrentDragIndex = this.Index;
             }
+            Parent.Actions.Add(new CraftingAction { Action = "On Drop", Item = this.Item, Index = this.Index });
+
         }
 
         private void OnDragStart()
@@ -72,6 +74,8 @@ namespace BlazorApp.Components
                 }
 
             }
+            Parent.Actions.Add(new CraftingAction { Action = "Drag Start", Item = this.Item, Index = this.Index });
+
         }
 
         internal void OnDragEnd()
@@ -85,6 +89,9 @@ namespace BlazorApp.Components
                 Parent.InventoryItems[this.Index] = this.Item;
                 this.Item = Parent.CurrentDragItem;
             }
+
+            Parent.Actions.Add(new CraftingAction { Action = "Drag End", Item = this.Item, Index = this.Index });
+
             Parent.CurrentDragIndex = -1;
             Parent.CurrentDragItem = null;
 
diff --git a/BlazorApp/BlazorApp/Services/DataApiService.cs b/BlazorApp/BlazorApp/Services/DataApiService.cs
index 035adb2..78f44de 100644
--- a/BlazorApp/BlazorApp/Services/DataApiService.cs
+++ b/BlazorApp/BlazorApp/Services/DataApiService.cs
@@ -57,10 +57,11 @@ namespace BlazorApp.Services
             return await _http.GetFromJsonAsync<List<CraftingRecipe>>("https://localhost:7234/api/Crafting/recipe");
         }
 
-        public async Task<List<Item>> SortedList()
+        public async Task<List<Item>> SortedList(int currentPage, int pageSize)
         {
             List<Item> it = await _http.GetFromJsonAsync<List<Item>>($"https://localhost:7234/api/Crafting/all/");
-            return it.OrderBy(i => i.DisplayName).ToList();
+            it = it.OrderBy(i => i.DisplayName).ToList();
+            return it.GetRange((currentPage - 1) * 10, pageSize);
 
         }
         
diff --git a/BlazorApp/BlazorApp/Services/DataLocalService.cs b/BlazorApp/BlazorApp/Services/DataLocalService.cs
index 3b13a80..d599597 100644
--- a/BlazorApp/BlazorApp/Services/DataLocalService.cs
+++ b/BlazorApp/BlazorApp/Services/DataLocalService.cs
@@ -185,7 +185,7 @@ namespace BlazorApp.Services
             return Task.FromResult(items);
         }
 
-        public Task<List<Item>> SortedList()
+        public Task<List<Item>> SortedList(int currentPage, int pageSize)
         {
             throw new NotImplementedException();
         }
diff --git a/BlazorApp/BlazorApp/Services/IDataService.cs b/BlazorApp/BlazorApp/Services/IDataService.cs
index a39928c..12d2cdb 100644
--- a/BlazorApp/BlazorApp/Services/IDataService.cs
+++ b/BlazorApp/BlazorApp/Services/IDataService.cs
@@ -14,7 +14,7 @@ namespace BlazorApp.Services
         Task Update(int id, ItemModel itemModel);
         Task Delete(int id);
         Task<List<CraftingRecipe>> GetRecipes();
-        Task<List<Item>> SortedList();
+        Task<List<Item>> SortedList(int currentPage, int pageSize);
     }
 }