diff --git a/Blazor/Blazor/Components/InventoryList.razor b/Blazor/Blazor/Components/InventoryList.razor
index 402f84b..88a67f6 100644
--- a/Blazor/Blazor/Components/InventoryList.razor
+++ b/Blazor/Blazor/Components/InventoryList.razor
@@ -11,14 +11,7 @@
     <DataGridColumn TItem="Item" Field="@nameof(Item.Id)" Caption="#" Width="15%"/>
     <DataGridColumn TItem="Item" Field="@nameof(Item.Id)" Caption="Image" Filterable="false">
     <DisplayTemplate>
-        @if (!string.IsNullOrWhiteSpace(context.ImageBase64))
-        {
-            <img src="data:image/png;base64, @(context.ImageBase64)" class="img-thumbnail" title="@context.DisplayName" alt="@context.DisplayName" style="width: 60px" />
-        }
-        else
-        {
-            <img src="images/default.png" class="img-thumbnail" title="@context.DisplayName" alt="@context.DisplayName" style="width: 60px"/>
-        }
+        <InventoryListImage Item="Item" NoDrop="true"/>
     </DisplayTemplate>
 </DataGridColumn>
     <DataGridColumn TItem="Item" Field="@nameof(Item.DisplayName)" Caption="Display name">
diff --git a/Blazor/Blazor/Components/InventoryListImage.razor b/Blazor/Blazor/Components/InventoryListImage.razor
new file mode 100644
index 0000000..339cef0
--- /dev/null
+++ b/Blazor/Blazor/Components/InventoryListImage.razor
@@ -0,0 +1,21 @@
+@using Blazor.Models;
+
+<div
+    class="item"
+    ondragover="event.preventDefault();"
+    draggable="true"
+    @ondragstart="@OnDragStart"
+    @ondrop="@OnDrop"
+    @ondragenter="@OnDragEnter"
+    @ondragleave="@OnDragLeave">
+
+    @if (!string.IsNullOrWhiteSpace(Item.ImageBase64))
+    {
+        <img src="data:image/png;base64, @(Item.ImageBase64)" class="img-thumbnail" title="Item.DisplayName" alt="Item.DisplayName" style="width: 60px" />
+    }
+    else
+    {
+        <img src="images/default.png" class="img-thumbnail" title="Item.DisplayName" alt="Item.DisplayName" style="width: 60px"/>
+    }
+
+</div>
\ No newline at end of file
diff --git a/Blazor/Blazor/Components/InventoryListImage.razor.cs b/Blazor/Blazor/Components/InventoryListImage.razor.cs
new file mode 100644
index 0000000..6290b71
--- /dev/null
+++ b/Blazor/Blazor/Components/InventoryListImage.razor.cs
@@ -0,0 +1,60 @@
+using Blazor.Models;
+using Microsoft.AspNetCore.Components;
+
+namespace Blazor.Components
+{
+    public partial class InventoryListImage
+    {
+        [Parameter]
+        public int Index { get; set; }
+
+        [Parameter]
+        public Item Item { get; set; }
+
+        [Parameter]
+        public bool NoDrop { get; set; }
+
+        [CascadingParameter]
+        public Crafting Parent { get; set; }
+
+        internal void OnDragEnter()
+        {
+            if (NoDrop)
+            {
+                return;
+            }
+
+            Parent.Actions.Add(new CraftingAction { Action = "Drag Enter", Item = this.Item, Index = this.Index });
+        }
+
+        internal void OnDragLeave()
+        {
+            if (NoDrop)
+            {
+                return;
+            }
+
+            Parent.Actions.Add(new CraftingAction { Action = "Drag Leave", Item = this.Item, Index = this.Index });
+        }
+
+        internal void OnDrop()
+        {
+            if (NoDrop)
+            {
+                return;
+            }
+
+            this.Item = Parent.CurrentDragItem;
+            Parent.RecipeItems[this.Index] = this.Item;
+
+            Parent.Actions.Add(new CraftingAction { Action = "Drop", Item = this.Item, Index = this.Index });
+        }
+
+        private void OnDragStart()
+        {
+            Parent.CurrentDragItem = this.Item;
+
+            Parent.Actions.Add(new CraftingAction { Action = "Drag Start", Item = this.Item, Index = this.Index });
+        }
+    }
+}