diff --git a/BlazorAppClean/Components/CraftingItem.razor.cs b/BlazorAppClean/Components/CraftingItem.razor.cs
index e7d4bd6..1abdd22 100644
--- a/BlazorAppClean/Components/CraftingItem.razor.cs
+++ b/BlazorAppClean/Components/CraftingItem.razor.cs
@@ -12,6 +12,8 @@ namespace BlazorAppClean.Components
         [Parameter]
         public Item Item { get; set; }
 
+
+
         [Parameter]
         public bool NoDrop { get; set; }
 
diff --git a/BlazorAppClean/Components/CraftingItem.razor.css b/BlazorAppClean/Components/CraftingItem.razor.css
index b2d4521..2a3d09a 100644
--- a/BlazorAppClean/Components/CraftingItem.razor.css
+++ b/BlazorAppClean/Components/CraftingItem.razor.css
@@ -3,4 +3,6 @@
     height: 64px;
     border: 1px solid;
     overflow: hidden;
+
 }
+
diff --git a/BlazorAppClean/Components/InventoryComponent.razor b/BlazorAppClean/Components/InventoryComponent.razor
index 4f8483f..e59d953 100644
--- a/BlazorAppClean/Components/InventoryComponent.razor
+++ b/BlazorAppClean/Components/InventoryComponent.razor
@@ -6,28 +6,32 @@
             <div class="col-6">
 
                 <div>
-
+                    <div class="content">
                     <div class="css-inv">
-                        <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" />
+                            <div class="slotSpace">
+                        <h1>Inventory</h1>
+                        <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>
             </div>
             <div class="col-6">
 
@@ -62,6 +66,9 @@
                 </div>
 
             </div>
+            <div>Actions</div>
+                <div class="actions" id="actions">
+                </div>
 
             
         </div>
diff --git a/BlazorAppClean/Components/InventoryComponent.razor.cs b/BlazorAppClean/Components/InventoryComponent.razor.cs
index f5b8402..d26dca8 100644
--- a/BlazorAppClean/Components/InventoryComponent.razor.cs
+++ b/BlazorAppClean/Components/InventoryComponent.razor.cs
@@ -1,19 +1,9 @@
 using BlazorAppClean.Models;
-using Blazorise.DataGrid;
+using BlazorAppClean.Services;
 using Microsoft.AspNetCore.Components;
 using Microsoft.JSInterop;
 using System.Collections.ObjectModel;
 using System.Collections.Specialized;
-using BlazorAppClean.Modals;
-using BlazorAppClean.Models;
-using BlazorAppClean.Services;
-using Blazored.LocalStorage;
-using Blazored.Modal;
-using Blazored.Modal.Services;
-using Blazorise.DataGrid;
-using Microsoft.AspNetCore.Components;
-using Microsoft.Extensions.Localization;
-using Blazorise;
 
 namespace BlazorAppClean.Components
 {
@@ -23,7 +13,24 @@ namespace BlazorAppClean.Components
         public IDataService DataService { get; set; }
 
         private int totalItem;
+
+        public Item CurrentDragItem { get; set; }
+
+        [CascadingParameter]
+        public InventoryComponent Parent { get; set; }
+        public List<Item> RecipeItems { get; set; }
         public List<Item> Items { get; set; } = new List<Item>();
+        public ObservableCollection<InventoryAction> Actions { get; set; }
+
+        [Inject]
+        internal IJSRuntime JavaScriptRuntime { get; set; }
+
+        public InventoryComponent()
+        {
+            Actions = new ObservableCollection<InventoryAction>();
+            Actions.CollectionChanged += OnActionsCollectionChanged;
+            this.RecipeItems = new List<Item> { null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null };
+        }
 
         protected override async Task OnAfterRenderAsync(bool firstRender)
         {
@@ -39,6 +46,10 @@ namespace BlazorAppClean.Components
 
             StateHasChanged();
         }
+        private void OnActionsCollectionChanged(object? sender, NotifyCollectionChangedEventArgs e)
+        {
+            JavaScriptRuntime.InvokeVoidAsync("Crafting.AddActions", e.NewItems);
+        }
 
     }
 }
diff --git a/BlazorAppClean/Components/InventoryComponent.razor.css b/BlazorAppClean/Components/InventoryComponent.razor.css
index 9827773..d132796 100644
--- a/BlazorAppClean/Components/InventoryComponent.razor.css
+++ b/BlazorAppClean/Components/InventoryComponent.razor.css
@@ -4,12 +4,37 @@
     display: grid;
     width: 500px;
 }
+h1 {
+    margin: 5px 10px;
+    padding-inline-end: 300px;
+    font-family: 'VT323', monospace;
+    font-size: 24px;
+    color: #404040;
+}
+.content {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+.slotSpace {
+    margin: 10px 10px;
+    display: flex;
+    flex-wrap: wrap;
+}
 
 .css-inv {
     grid-template-columns: repeat(6,minmax(0,1fr));
     gap: 10px;
-    display: grid;
-    width: 500px;
+    width: 410px;
+    background: #c6c6c6;
+    border-radius: 3px;
+    box-shadow: 5px 5px 0px #555555, inset 4px 4px 0px #fefefe;
+    padding-top: 5px;
+    padding-left: 5px;
+    margin-bottom: 10px;
 }
 
 .actions {
@@ -20,4 +45,8 @@
 
 .body {
     display: flex;
+    background: #ccc;
+    box-sizing: border-box;
+    width: 100%;
+    height: 80vh;
 }
diff --git a/BlazorAppClean/Components/InventoryComponent.razor.js b/BlazorAppClean/Components/InventoryComponent.razor.js
new file mode 100644
index 0000000..e9dc10c
--- /dev/null
+++ b/BlazorAppClean/Components/InventoryComponent.razor.js
@@ -0,0 +1,16 @@
+window.Inventory =
+{
+    AddActions: function (data) {
+
+        data.forEach(element => {
+            var div = document.createElement('div');
+            div.innerHTML = 'Aaction: ' + element.action + ' - Index: ' + element.index;
+
+            if (element.item) {
+                div.innerHTML += ' - Item Name: ' + element.item.name;
+            }
+
+            document.getElementById('actions').appendChild(div);
+        });
+    }
+}
\ No newline at end of file
diff --git a/BlazorAppClean/Components/InventoryItem.razor b/BlazorAppClean/Components/InventoryItem.razor
new file mode 100644
index 0000000..1e1470b
--- /dev/null
+++ b/BlazorAppClean/Components/InventoryItem.razor
@@ -0,0 +1,14 @@
+<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/BlazorAppClean/Components/InventoryItem.razor.cs b/BlazorAppClean/Components/InventoryItem.razor.cs
new file mode 100644
index 0000000..cc407cb
--- /dev/null
+++ b/BlazorAppClean/Components/InventoryItem.razor.cs
@@ -0,0 +1,65 @@
+using BlazorAppClean.Models;
+using BlazorAppClean.Pages;
+using Blazorise;
+using Microsoft.AspNetCore.Components;
+
+namespace BlazorAppClean.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 InventoryAction { Action = "Drag Enter", Item = this.Item, Index = this.Index });
+        }
+
+        internal void OnDragLeave()
+        {
+            if (NoDrop)
+            {
+                return;
+            }
+
+            Parent.Actions.Add(new InventoryAction { Action = "Drag Leave", Item = this.Item, Index = this.Index });
+        }
+
+        internal void OnDrop()
+        {
+            if (NoDrop)
+            {
+                return;
+            }
+
+            this.Item = Parent.CurrentDragItem;
+
+
+            Parent.Actions.Add(new InventoryAction { Action = "Drop", Item = this.Item, Index = this.Index });
+
+        }
+
+        private void OnDragStart()
+        {
+            Parent.CurrentDragItem = this.Item;
+
+            Parent.Actions.Add(new InventoryAction { Action = "Drag Start", Item = this.Item, Index = this.Index });
+        }
+    }
+}
diff --git a/BlazorAppClean/Components/InventoryItem.razor.css b/BlazorAppClean/Components/InventoryItem.razor.css
new file mode 100644
index 0000000..e9f2861
--- /dev/null
+++ b/BlazorAppClean/Components/InventoryItem.razor.css
@@ -0,0 +1,10 @@
+.item {
+   width: 64px;
+    height: 64px;
+    border: 1px solid;
+
+    display: flex;
+    justify-content: center;
+    background: #8b8b8b;
+    box-shadow: inset 1.5px 1.5px 0px rgba(55, 55, 55, 0.8), inset -2px -2px 0px #ffffff;
+}
diff --git a/BlazorAppClean/Pages/Inventory.razor b/BlazorAppClean/Pages/Inventory.razor
index d0a70a4..1cdc229 100644
--- a/BlazorAppClean/Pages/Inventory.razor
+++ b/BlazorAppClean/Pages/Inventory.razor
@@ -4,5 +4,5 @@
 <h1>My Inventory</h1>
 
 
+<InventoryComponent  />
 
-<InventoryComponent/>
diff --git a/BlazorAppClean/Pages/Inventory.razor.cs b/BlazorAppClean/Pages/Inventory.razor.cs
index 354f882..0695267 100644
--- a/BlazorAppClean/Pages/Inventory.razor.cs
+++ b/BlazorAppClean/Pages/Inventory.razor.cs
@@ -14,8 +14,6 @@ namespace BlazorAppClean.Pages
 
         public List<Item> Items { get; set; } = new List<Item>();
 
-        private List<CraftingRecipe> Recipes { get; set; } = new List<CraftingRecipe>();
-
         protected override async Task OnAfterRenderAsync(bool firstRender)
         {
             base.OnAfterRenderAsync(firstRender);
@@ -25,8 +23,7 @@ namespace BlazorAppClean.Pages
                 return;
             }
 
-            Items = await DataService.List(0, await DataService.Count());
-            Recipes = await DataService.GetRecipes();
+            Items = await DataService.getAll();
 
             StateHasChanged();
         }
diff --git a/BlazorAppClean/Shared/MainLayout.razor.css b/BlazorAppClean/Shared/MainLayout.razor.css
index 551e4b2..b7fa124 100644
--- a/BlazorAppClean/Shared/MainLayout.razor.css
+++ b/BlazorAppClean/Shared/MainLayout.razor.css
@@ -8,6 +8,17 @@ main {
     flex: 1;
 }
 
+.inventory {
+    width: 335px;
+    height: 200px;
+    background: #c6c6c6;
+    border-radius: 3px;
+    box-shadow: 5px 5px 0px #555555, inset 4px 4px 0px #fefefe;
+    padding-top: 5px;
+    padding-left: 5px;
+    margin-bottom: 10px;
+}
+
 .sidebar {
     background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
 }