diff --git a/BlazorApp1/Components/Crafting.razor b/BlazorApp1/Components/Crafting.razor
index c8f143d..ebc8ad6 100644
--- a/BlazorApp1/Components/Crafting.razor
+++ b/BlazorApp1/Components/Crafting.razor
@@ -10,6 +10,7 @@
                         @foreach (var item in Items)
                         {
                             <CraftingItem Item="item" NoDrop="true"/>
+
                         }
                     </div>
                 </div>
diff --git a/BlazorApp1/Components/CraftingItem.razor b/BlazorApp1/Components/CraftingItem.razor
index c1043b8..3ae8ec4 100644
--- a/BlazorApp1/Components/CraftingItem.razor
+++ b/BlazorApp1/Components/CraftingItem.razor
@@ -1,4 +1,6 @@
-<div
+@using BlazorApp1.Models
+
+<div
     class="item"
     ondragover="event.preventDefault();"
     draggable="true"
diff --git a/BlazorApp1/Components/InventoryComponent.razor b/BlazorApp1/Components/InventoryComponent.razor
new file mode 100644
index 0000000..42b7436
--- /dev/null
+++ b/BlazorApp1/Components/InventoryComponent.razor
@@ -0,0 +1,75 @@
+<h3>Inventory</h3>
+
+<CascadingValue Value="@this">
+    <div class="container">
+        <div class="row">
+
+            <div class="col-6">
+                <div>Recipe</div>
+                    
+                    <div class="css-inventory">
+                        <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"/>
+                        <InventoryItem Index="18"/>
+                        <InventoryItem Index="19"/>
+                        <InventoryItem Index="20"/>
+                        <InventoryItem Index="21"/>
+                        <InventoryItem Index="22"/>
+                        <InventoryItem Index="23"/>
+                        <InventoryItem Index="24"/>
+                        <InventoryItem Index="25"/>
+                        <InventoryItem Index="26"/>
+                        <InventoryItem Index="27"/>
+                        <InventoryItem Index="28"/>
+                        <InventoryItem Index="29"/>
+                        <InventoryItem Index="30"/>
+                        <InventoryItem Index="31"/>
+                        <InventoryItem Index="32"/>
+                        <InventoryItem Index="33"/>
+                        <InventoryItem Index="34"/>
+                        <InventoryItem Index="35"/>
+                    </div>
+
+            </div>
+
+            <div class="col-6">
+                
+                <div>Available items:</div>
+                <div>
+                    <div class="css-grid">
+                        
+                        @foreach (var item in Items)
+                        {
+                            <InventoryItem Item="item" NoDrop="true"/>
+
+                        }
+                    </div>
+                </div>
+
+            </div>
+
+            <div class="col-12">
+                <div>Actions</div>
+                <div class="actions" id="actions">
+
+                </div>
+            </div>
+        </div>
+    </div>
+</CascadingValue>
\ No newline at end of file
diff --git a/BlazorApp1/Components/InventoryComponent.razor.cs b/BlazorApp1/Components/InventoryComponent.razor.cs
new file mode 100644
index 0000000..0e1b9a4
--- /dev/null
+++ b/BlazorApp1/Components/InventoryComponent.razor.cs
@@ -0,0 +1,38 @@
+using BlazorApp1.Models;
+using Microsoft.AspNetCore.Components;
+using Microsoft.JSInterop;
+using System.Collections.ObjectModel;
+using System.Collections.Specialized;
+
+namespace BlazorApp1.Components
+{
+    public partial class InventoryComponent
+    {
+        public InventoryComponent()
+        {
+            Actions = new ObservableCollection<CraftingAction>();
+            Actions.CollectionChanged += OnActionsCollectionChanged;
+            this.InventoryItems = new List<Item> { null, null, null, null, null, null, null, null, null };
+        }
+
+        public ObservableCollection<CraftingAction> Actions { get; set; }
+        public Item CurrentDragItem { get; set; }
+
+        [Parameter]
+        public List<Item> Items { get; set; }
+
+        public List<Item> InventoryItems { get; set; }
+
+        /// <summary>
+        /// Gets or sets the java script runtime.
+        /// </summary>
+        [Inject]
+        internal IJSRuntime JavaScriptRuntime { get; set; }
+
+        private void OnActionsCollectionChanged(object? sender, NotifyCollectionChangedEventArgs e)
+        {
+            JavaScriptRuntime.InvokeVoidAsync("Crafting.AddActions", e.NewItems);
+        }
+
+    }
+}
diff --git a/BlazorApp1/Components/InventoryComponent.razor.css b/BlazorApp1/Components/InventoryComponent.razor.css
new file mode 100644
index 0000000..951f1f7
--- /dev/null
+++ b/BlazorApp1/Components/InventoryComponent.razor.css
@@ -0,0 +1,13 @@
+.css-inventory {
+    grid-template-columns: repeat(9,minmax(auto,auto));
+    gap: 10px;
+    display: grid;
+    width: 212px;
+}
+
+.css-grid {
+    grid-template-columns: repeat(4,minmax(0,1fr));
+    gap: 10px;
+    display: grid;
+    width: 286px;
+}
\ No newline at end of file
diff --git a/BlazorApp1/Components/InventoryItem.razor b/BlazorApp1/Components/InventoryItem.razor
new file mode 100644
index 0000000..3ae8ec4
--- /dev/null
+++ b/BlazorApp1/Components/InventoryItem.razor
@@ -0,0 +1,16 @@
+@using BlazorApp1.Models
+
+<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/BlazorApp1/Components/InventoryItem.razor.cs b/BlazorApp1/Components/InventoryItem.razor.cs
new file mode 100644
index 0000000..a89a4a4
--- /dev/null
+++ b/BlazorApp1/Components/InventoryItem.razor.cs
@@ -0,0 +1,59 @@
+using BlazorApp1.Models;
+using Microsoft.AspNetCore.Components;
+
+namespace BlazorApp1.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 InventoryComponent 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.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 });
+        }
+    }
+}
diff --git a/BlazorApp1/Components/InventoryItem.razor.css b/BlazorApp1/Components/InventoryItem.razor.css
new file mode 100644
index 0000000..b2d4521
--- /dev/null
+++ b/BlazorApp1/Components/InventoryItem.razor.css
@@ -0,0 +1,6 @@
+.item {
+    width: 64px;
+    height: 64px;
+    border: 1px solid;
+    overflow: hidden;
+}
diff --git a/BlazorApp1/Pages/Inventory.razor b/BlazorApp1/Pages/Inventory.razor
new file mode 100644
index 0000000..309c4b8
--- /dev/null
+++ b/BlazorApp1/Pages/Inventory.razor
@@ -0,0 +1,14 @@
+@page "/inventory"
+@using System.Globalization
+@using BlazorApp1.Components
+
+<PageTitle>Inventory</PageTitle>
+
+<div>
+    <InventoryComponent Items="Items"/>
+</div>
+
+<p>
+    <b>CurrentCulture</b>: @CultureInfo.CurrentCulture
+</p>
+
diff --git a/BlazorApp1/Pages/Inventory.razor.cs b/BlazorApp1/Pages/Inventory.razor.cs
new file mode 100644
index 0000000..cca96bf
--- /dev/null
+++ b/BlazorApp1/Pages/Inventory.razor.cs
@@ -0,0 +1,28 @@
+using BlazorApp1.Components;
+using BlazorApp1.Models;
+using Microsoft.AspNetCore.Components;
+
+namespace BlazorApp1.Pages
+{
+    public partial class Inventory
+    {
+        [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());
+
+            StateHasChanged();
+        }
+    }
+}
diff --git a/BlazorApp1/Shared/NavMenu.razor b/BlazorApp1/Shared/NavMenu.razor
index 99c320f..cc162e8 100644
--- a/BlazorApp1/Shared/NavMenu.razor
+++ b/BlazorApp1/Shared/NavMenu.razor
@@ -20,7 +20,7 @@
             </NavLink>
         </div>
         <div class="nav-item px-3">
-            <NavLink class="nav-link" href="counter">
+            <NavLink class="nav-link" href="inventory">
                 <span class="oi oi-box" aria-hidden="true"></span> Inventory
             </NavLink>
         </div>