diff --git a/myBlazorApp/myBlazorApp/Components/MyInventory.razor b/myBlazorApp/myBlazorApp/Components/MyInventory.razor
new file mode 100644
index 0000000..908d22f
--- /dev/null
+++ b/myBlazorApp/myBlazorApp/Components/MyInventory.razor
@@ -0,0 +1,23 @@
+<h3>My Inventory</h3>
+
+<div class="inventory-items">
+    <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>
+
diff --git a/myBlazorApp/myBlazorApp/Components/MyInventory.razor.cs b/myBlazorApp/myBlazorApp/Components/MyInventory.razor.cs
new file mode 100644
index 0000000..5e3223a
--- /dev/null
+++ b/myBlazorApp/myBlazorApp/Components/MyInventory.razor.cs
@@ -0,0 +1,34 @@
+using System;
+using Microsoft.AspNetCore.Components;
+using myBlazorApp.Models;
+using myBlazorApp.Services;
+namespace myBlazorApp.Components
+{
+    public partial class MyInventory
+    {
+        private List<Item> itemsInventory = new List<Item>();
+
+        [Inject]
+        public IDataService DataService { get; set; }
+
+        [Inject]
+        public IWebHostEnvironment WebHostEnvironment { get; set; }
+
+        [Inject]
+        public NavigationManager NavigationManager { get; set; }
+        /*
+        protected override async Task OnAfterRenderAsync(bool firstRender)
+        {
+            base.OnAfterRenderAsync(firstRender);
+
+            if (!firstRender)
+            {
+                return;
+            }
+            itemsInventory = await DataService.List(0, await DataService.Count());
+            StateHasChanged();
+        }
+        */
+    }
+}
+
diff --git a/myBlazorApp/myBlazorApp/Components/MyInventory.razor.css b/myBlazorApp/myBlazorApp/Components/MyInventory.razor.css
new file mode 100644
index 0000000..34491e9
--- /dev/null
+++ b/myBlazorApp/myBlazorApp/Components/MyInventory.razor.css
@@ -0,0 +1,6 @@
+.inventory-items {
+    grid-template-columns: repeat(6,minmax(0,1fr));
+    gap: 10px;
+    display: grid;
+    width: 40%;
+}
diff --git a/myBlazorApp/myBlazorApp/Pages/Inventory.razor b/myBlazorApp/myBlazorApp/Pages/Inventory.razor
index 5ad0477..36438a1 100644
--- a/myBlazorApp/myBlazorApp/Pages/Inventory.razor
+++ b/myBlazorApp/myBlazorApp/Pages/Inventory.razor
@@ -3,46 +3,14 @@
 @using System.Globalization
 @using myBlazorApp.Models;
 
-<h3>Inventory</h3>
-
-
-<div class="inventory-items">
-    <InventoryItem Index="0" Item=@itemsInventory.ElementAt(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 class="css-grid">
-
-    @foreach (var item in itemsInventory)
-    {
-        <CraftingItem Item="item" NoDrop="true" />
-    }
-<p>
-    <b>CurrentCulture</b>: @CultureInfo.CurrentCulture
-</p>
 
+<div class="inventory">
+    <MyInventory/>
 </div>
 
 <div id="ItemList">
     <div>
-        <p>
-           List of items 
-        </p>
+        <h3>List of Items</h3>
         @*SearchBar*@
 
     </div>
diff --git a/myBlazorApp/myBlazorApp/Pages/Inventory.razor.cs b/myBlazorApp/myBlazorApp/Pages/Inventory.razor.cs
index b8ca1b4..e9dae9e 100644
--- a/myBlazorApp/myBlazorApp/Pages/Inventory.razor.cs
+++ b/myBlazorApp/myBlazorApp/Pages/Inventory.razor.cs
@@ -13,7 +13,7 @@ namespace myBlazorApp.Pages
 	public partial class Inventory
     {
 
-        private List<Item> itemsInventory = new List<Item>();
+        private List<Item> items = new List<Item>();
 
         private int totalItem;
 
@@ -28,18 +28,6 @@ namespace myBlazorApp.Pages
 
         [CascadingParameter]
         public IModalService Modal { get; set; }
-
-        protected override async Task OnAfterRenderAsync(bool firstRender)
-        {
-            base.OnAfterRenderAsync(firstRender);
-
-            if (!firstRender)
-            {
-                return;
-            }
-            itemsInventory= await DataService.List(0, await DataService.Count());
-            StateHasChanged();
-        }
 
         private async Task OnReadData(DataGridReadDataEventArgs<Item> e)
         {
@@ -50,7 +38,7 @@ namespace myBlazorApp.Pages
 
             if (!e.CancellationToken.IsCancellationRequested)
             {
-                itemsInventory = await DataService.List(e.Page, e.PageSize);
+                items = await DataService.List(e.Page, e.PageSize);
                 totalItem = await DataService.Count();
             }
         }