diff --git a/BlazorApp/BlazorApp/BlazorApp.csproj b/BlazorApp/BlazorApp/BlazorApp.csproj
index 1bb76d0..c675d0d 100644
--- a/BlazorApp/BlazorApp/BlazorApp.csproj
+++ b/BlazorApp/BlazorApp/BlazorApp.csproj
@@ -45,4 +45,7 @@
       <DependentUpon>Pages.List.resx</DependentUpon>
     </Compile>
   </ItemGroup>
+  <ItemGroup>
+    <Content Remove="Components\inventoryAction.razor" />
+  </ItemGroup>
 </Project>
diff --git a/BlazorApp/BlazorApp/Components/Crafting.razor.cs b/BlazorApp/BlazorApp/Components/Crafting.razor.cs
index f7578fc..a154730 100644
--- a/BlazorApp/BlazorApp/Components/Crafting.razor.cs
+++ b/BlazorApp/BlazorApp/Components/Crafting.razor.cs
@@ -15,7 +15,7 @@ namespace BlazorApp.Components
         {
             Actions = new ObservableCollection<CraftingAction>();
             Actions.CollectionChanged += OnActionsCollectionChanged;
-            this.RecipeItems = new List<Item> { null, null, null, null, null, null, null, null, null };
+            this.RecipeItems = new List<Item> { null, null, null, null, null, null, null, null, null};
         }
 
         public ObservableCollection<CraftingAction> Actions { get; set; }
diff --git a/BlazorApp/BlazorApp/Components/InventoryComp.razor b/BlazorApp/BlazorApp/Components/InventoryComp.razor
new file mode 100644
index 0000000..e02abfc
--- /dev/null
+++ b/BlazorApp/BlazorApp/Components/InventoryComp.razor
@@ -0,0 +1 @@
+
diff --git a/BlazorApp/BlazorApp/Components/InventoryComp.razor.cs b/BlazorApp/BlazorApp/Components/InventoryComp.razor.cs
new file mode 100644
index 0000000..5f28270
--- /dev/null
+++ b/BlazorApp/BlazorApp/Components/InventoryComp.razor.cs
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/BlazorApp/BlazorApp/Components/InventoryComp.razor.css b/BlazorApp/BlazorApp/Components/InventoryComp.razor.css
new file mode 100644
index 0000000..06bc1c9
--- /dev/null
+++ b/BlazorApp/BlazorApp/Components/InventoryComp.razor.css
@@ -0,0 +1,14 @@
+.css-grid {
+    grid-template-columns: repeat(6,minmax(0,1fr));
+    gap: 10px;
+    display: grid;
+    width: 40%;
+}
+
+
+.css-recipe {
+    grid-template-columns: repeat(3,minmax(0,1fr));
+    gap: 10px;
+    display: grid;
+    width: 212px;
+}
diff --git a/BlazorApp/BlazorApp/Components/InventoryItem.razor b/BlazorApp/BlazorApp/Components/InventoryItem.razor
new file mode 100644
index 0000000..e64e6cd
--- /dev/null
+++ b/BlazorApp/BlazorApp/Components/InventoryItem.razor
@@ -0,0 +1,13 @@
+<div class="item"
+     ondragover="event.preventDefault();"
+     draggable="true"
+     @ondragstart="@OnDragStart"
+     @ondrop="@OnDrop"
+     @ondragenter="@OnDragEnter"
+     @ondragleave="@OnDragLeave">
+
+    @if (Item != null)
+    {
+        @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
new file mode 100644
index 0000000..cef8968
--- /dev/null
+++ b/BlazorApp/BlazorApp/Components/InventoryItem.razor.cs
@@ -0,0 +1,58 @@
+using System;
+using BlazorApp.Models;
+using BlazorApp.Components;
+using Microsoft.AspNetCore.Components;
+
+namespace BlazorApp.Components
+{
+	public partial class InventoryItem
+	{
+        [Parameter]
+        public int Index { get; set; }
+
+        [Parameter]
+        public Item Item { get; set; }
+
+        [Parameter]
+        public bool NoDrop { get; set; }
+
+        [CascadingParameter]
+        public InventoryComp Parent { get; set; }
+
+        internal void OnDragEnter()
+        {
+            if (NoDrop)
+            {
+                return;
+            }
+
+        }
+
+        internal void OnDragLeave()
+        {
+            if (NoDrop)
+            {
+                return;
+            }
+
+        }
+
+        internal void OnDrop()
+        {
+            if (NoDrop)
+            {
+                return;
+            }
+
+            this.Item = Parent.CurrentDragItem;
+            Item tmp = Parent.RecipeItems[this.Index];
+            Parent.RecipeItems[this.Index] = this.Item;
+        }
+
+        private void OnDragStart()
+        {
+            Parent.CurrentDragItem = this.Item;
+        }
+    }
+}
+
diff --git a/BlazorApp/BlazorApp/Components/InventoryItem.razor.css b/BlazorApp/BlazorApp/Components/InventoryItem.razor.css
new file mode 100644
index 0000000..b2d4521
--- /dev/null
+++ b/BlazorApp/BlazorApp/Components/InventoryItem.razor.css
@@ -0,0 +1,6 @@
+.item {
+    width: 64px;
+    height: 64px;
+    border: 1px solid;
+    overflow: hidden;
+}
diff --git a/BlazorApp/BlazorApp/Components/MyFirstChildComponent.razor b/BlazorApp/BlazorApp/Components/MyFirstChildComponent.razor
deleted file mode 100644
index 592c4e4..0000000
--- a/BlazorApp/BlazorApp/Components/MyFirstChildComponent.razor
+++ /dev/null
@@ -1,14 +0,0 @@
-@code {
-    [Parameter]
-    public RenderFragment ChildContent { get; set; }
-
-    [CascadingParameter]
-    public MyRootComponent RootComponent { get; set; }
-}
-
-<div style="border: 1px solid black; padding: 10px;">
-    <strong>MyFirstChildComponent - @RootComponent.Text</strong>
-    <div>
-        @ChildContent
-    </div>
-</div>
\ No newline at end of file
diff --git a/BlazorApp/BlazorApp/Components/MyRootComponent.razor b/BlazorApp/BlazorApp/Components/MyRootComponent.razor
deleted file mode 100644
index 18895ba..0000000
--- a/BlazorApp/BlazorApp/Components/MyRootComponent.razor
+++ /dev/null
@@ -1,16 +0,0 @@
-@code {
-    [Parameter]
-    public RenderFragment ChildContent { get; set; }
-
-    [Parameter]
-    public string Text { get; set; }
-}
-
-<div style="border: 1px solid black; padding: 10px;">
-    <strong>MyRootComponent - @Text</strong>
-    <div>
-        <CascadingValue Value="@this">
-            @ChildContent
-        </CascadingValue>
-    </div>
-</div>
\ No newline at end of file
diff --git a/BlazorApp/BlazorApp/Components/MySecondChildComponent.razor b/BlazorApp/BlazorApp/Components/MySecondChildComponent.razor
deleted file mode 100644
index 7d207e6..0000000
--- a/BlazorApp/BlazorApp/Components/MySecondChildComponent.razor
+++ /dev/null
@@ -1,14 +0,0 @@
-@code {
-    [Parameter]
-    public RenderFragment ChildContent { get; set; }
-
-    [CascadingParameter]
-    public MyRootComponent RootComponent { get; set; }
-}
-
-<div style="border: 1px solid black; padding: 10px;">
-    <strong>MySecondChildComponent - @RootComponent.Text</strong>
-    <div>
-        @ChildContent
-    </div>
-</div>
\ No newline at end of file
diff --git a/BlazorApp/BlazorApp/Components/TestRenderFragment.razor b/BlazorApp/BlazorApp/Components/TestRenderFragment.razor
deleted file mode 100644
index e8ca13f..0000000
--- a/BlazorApp/BlazorApp/Components/TestRenderFragment.razor
+++ /dev/null
@@ -1,7 +0,0 @@
-<h3>TestRenderFragment</h3>
-
-@code {
-    [Parameter]
-    public RenderFragment ChildContent { get; set; }
-}
-
diff --git a/BlazorApp/BlazorApp/Pages/Inventory.razor b/BlazorApp/BlazorApp/Pages/Inventory.razor
index 4ead9fd..3f9c38d 100644
--- a/BlazorApp/BlazorApp/Pages/Inventory.razor
+++ b/BlazorApp/BlazorApp/Pages/Inventory.razor
@@ -3,73 +3,8 @@
 @using BlazorApp.Pages;
 @using BlazorApp.Models;
 
-<div class="inventory">
-    <h3>Inventory</h3>
 
-    <div class="css-grid">
-
-        <CraftingItem Index="0" />
-        <CraftingItem Index="1" />
-        <CraftingItem Index="2" />
-        <CraftingItem Index="3" />
-        <CraftingItem Index="4" />
-        <CraftingItem Index="5" />
-        <CraftingItem Index="6" />
-        <CraftingItem Index="7" />
-        <CraftingItem Index="8" />
-        <CraftingItem Index="9" />
-        <CraftingItem Index="10" />
-        <CraftingItem Index="11" />
-        <CraftingItem Index="12" />
-        <CraftingItem Index="13" />
-        <CraftingItem Index="14" />
-        <CraftingItem Index="15" />
-        <CraftingItem Index="16" />
-        <CraftingItem Index="17" />
-        <!--
-        <CraftingItem Index="18" />
-        <CraftingItem Index="19" />
-        <CraftingItem Index="20" />
-        <CraftingItem Index="21" />
-        <CraftingItem Index="22" />
-        <CraftingItem Index="23" />
-        <CraftingItem Index="24" />
-        <CraftingItem Index="25" />
-        <CraftingItem Index="26" />
-        -->
-    </div>
+<div>
+    <InventoryComp Items="Items" />
 </div>
-<div class="available-items">
-
-    <div class="search-container">
-        <form action="/action_page.php">
-            <h3>Available Items</h3>
-            <input type="text" placeholder="Search" name="search"/>
-            <button type="submit"><i class="fa fa-search"></i></button>
-        </form>
-    </div>
-
-    <DataGrid TItem="Item"
-              Data="@Items"
-              ReadData="@OnReadData"
-              TotalItems="@totalItem"
-              PageSize="10"
-              ShowPager
-              Sortable="true">
 
-        <button type="submit" @onclick="() => SortByName()"></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" />
-                }
-            </DisplayTemplate>
-        </DataGridColumn>
-        <DataGridColumn TItem="Item" Field="@nameof(Item.DisplayName)"/>
-    </DataGrid>
-</div>
\ No newline at end of file
diff --git a/BlazorApp/BlazorApp/Pages/Inventory.razor.cs b/BlazorApp/BlazorApp/Pages/Inventory.razor.cs
index ca82231..ee24093 100644
--- a/BlazorApp/BlazorApp/Pages/Inventory.razor.cs
+++ b/BlazorApp/BlazorApp/Pages/Inventory.razor.cs
@@ -27,7 +27,6 @@ namespace BlazorApp.Pages
             }
 
             Items = await DataService.List(0, await DataService.Count());
-
             StateHasChanged();
         }
 
@@ -46,7 +45,7 @@ namespace BlazorApp.Pages
             }
         }
 
-        private async Task SortByName(DataGridReadDataEventArgs<Item> e)
+        private async Task SortByName()
         {
             Items = await DataService.SortedList();
         }
diff --git a/BlazorApp/BlazorApp/Services/DataApiService.cs b/BlazorApp/BlazorApp/Services/DataApiService.cs
index 19e473b..c2943a3 100644
--- a/BlazorApp/BlazorApp/Services/DataApiService.cs
+++ b/BlazorApp/BlazorApp/Services/DataApiService.cs
@@ -69,5 +69,9 @@ namespace BlazorApp.Services
 
         }
         */
+        public Task<List<Item>> SortedList()
+        {
+            throw new NotImplementedException();
+        }
     }
 }
\ No newline at end of file
diff --git a/BlazorApp/BlazorApp/Services/DataLocalService.cs b/BlazorApp/BlazorApp/Services/DataLocalService.cs
index f2cbcb7..3b13a80 100644
--- a/BlazorApp/BlazorApp/Services/DataLocalService.cs
+++ b/BlazorApp/BlazorApp/Services/DataLocalService.cs
@@ -184,6 +184,11 @@ namespace BlazorApp.Services
 
             return Task.FromResult(items);
         }
+
+        public Task<List<Item>> SortedList()
+        {
+            throw new NotImplementedException();
+        }
     }
 }