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..d62a673
--- /dev/null
+++ b/BlazorApp/BlazorApp/Components/InventoryComp.razor
@@ -0,0 +1,53 @@
+<CascadingValue Value="@this">
+    <div class="container">
+        <div class="row">
+            <div class="col-6">
+
+                <div>Inventory:</div>
+                <div>
+
+
+                    <div class="css-grid">
+                        <InventoryItem Index="0" />
+                        <InventoryItem Index="1" />
+                        <InventoryItem Index="2" />
+                        <InventoryItem Index="3" />
+                        <InventoryItem Index="4" />
+                        <InventoryItem Index="5" />
+                        <InventoryItem Index="6" />
+                        <InventoryItem Index="7" />
+                        <InventoryItem Index="8" />
+                        <InventoryItem Index="9" />
+                        <InventoryItem Index="10" />
+                        <InventoryItem Index="11" />
+                        <InventoryItem Index="12" />
+                        <InventoryItem Index="13" />
+                        <InventoryItem Index="14" />
+                        <InventoryItem Index="15" />
+                        <InventoryItem Index="16" />
+                        <InventoryItem Index="17" />
+                    </div>
+                    
+                </div>
+
+            </div>
+
+            <div class="col-6">
+                <div>Available items:</div>
+
+                <div>
+                    <div class="css-grid">
+
+                        @foreach (var item in Items)
+                        {
+                            <CraftingItem Item="item" NoDrop="true" />
+                        }
+                    </div>
+
+                </div>
+
+  
+            </div>
+        </div>
+    </div>
+</CascadingValue>
\ No newline at end of file
diff --git a/BlazorApp/BlazorApp/Components/InventoryComp.razor.cs b/BlazorApp/BlazorApp/Components/InventoryComp.razor.cs
new file mode 100644
index 0000000..14773c6
--- /dev/null
+++ b/BlazorApp/BlazorApp/Components/InventoryComp.razor.cs
@@ -0,0 +1,31 @@
+using System;
+using BlazorApp.Models;
+using Microsoft.AspNetCore.Components;
+using Microsoft.JSInterop;
+using System.Collections.ObjectModel;
+using System.Collections.Specialized;
+
+namespace BlazorApp.Components
+{
+    public partial class InventoryComp
+    {
+
+        public Item CurrentDragItem { get; set; }
+
+        [Parameter]
+        public List<Item> Items { get; set; }
+
+        public List<Item> RecipeItems { get; set; }
+
+        public InventoryComp()
+        {
+            this.RecipeItems = new List<Item> {};
+            for (int i= 0; i<18; i++)
+            {
+                this.RecipeItems.Append(null);
+            }
+        }
+
+    }
+}
+
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 68cc6c8..40082a0 100644
--- a/BlazorApp/BlazorApp/Pages/Inventory.razor
+++ b/BlazorApp/BlazorApp/Pages/Inventory.razor
@@ -1,42 +1,10 @@
 @page "/inventory"
 @using BlazorApp.Components;
 
-
 <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>
+    <InventoryComp Items="Items" />
 </div>
 
-<div>
-    <AvailableItem Items="Items"/>
-</div>
\ No newline at end of file
+
diff --git a/BlazorApp/BlazorApp/Pages/Inventory.razor.cs b/BlazorApp/BlazorApp/Pages/Inventory.razor.cs
index 6c32433..fc4f0f5 100644
--- a/BlazorApp/BlazorApp/Pages/Inventory.razor.cs
+++ b/BlazorApp/BlazorApp/Pages/Inventory.razor.cs
@@ -23,7 +23,6 @@ namespace BlazorApp.Pages
             }
 
             Items = await DataService.List(0, await DataService.Count());
-
             StateHasChanged();
         }
     }
diff --git a/BlazorApp/BlazorApp/Pages/InventoryPage.razor.cs b/BlazorApp/BlazorApp/Pages/InventoryPage.razor.cs
new file mode 100644
index 0000000..8f80632
--- /dev/null
+++ b/BlazorApp/BlazorApp/Pages/InventoryPage.razor.cs
@@ -0,0 +1,32 @@
+using System;
+using BlazorApp.Components;
+using BlazorApp.Models;
+using BlazorApp.Services;
+using Microsoft.AspNetCore.Components;
+
+namespace BlazorApp.Pages
+{
+	public partial class InventoryPage
+	{
+        [Inject]
+        public IDataService DataService { get; set; }
+
+        public List<Item> Items { get; set; } = new List<Item>();
+
+        protected override async Task OnAfterRenderAsync(bool firstRender)
+        {
+            base.OnAfterRenderAsync(firstRender);
+
+            if (!firstRender)
+            {
+                return;
+            }
+
+            Items = await DataService.List(0, await DataService.Count());
+            Recipes = await DataService.GetRecipes();
+
+            StateHasChanged();
+        }
+    }
+}
+