diff --git a/myBlazorApp/myBlazorApp/Components/InventoryItem.razor b/myBlazorApp/myBlazorApp/Components/InventoryItem.razor
new file mode 100644
index 0000000..8a168d5
--- /dev/null
+++ b/myBlazorApp/myBlazorApp/Components/InventoryItem.razor
@@ -0,0 +1,11 @@
+<div class="inventory-item">
+    @if (Item != null)
+    {
+        @Item.DisplayName
+    }
+    else
+    {
+        <p>Empty</p>
+    }
+</div>
+
diff --git a/myBlazorApp/myBlazorApp/Components/InventoryItem.razor.cs b/myBlazorApp/myBlazorApp/Components/InventoryItem.razor.cs
new file mode 100644
index 0000000..32bacb7
--- /dev/null
+++ b/myBlazorApp/myBlazorApp/Components/InventoryItem.razor.cs
@@ -0,0 +1,14 @@
+using System;
+namespace myBlazorApp.Components;
+using Microsoft.AspNetCore.Components;
+using myBlazorApp.Models;
+
+public partial class InventoryItem
+{
+    [Parameter]
+    public Item Item { get; set; }
+    [Parameter]
+    public int Index { get; set; }
+
+}
+
diff --git a/myBlazorApp/myBlazorApp/Components/InventoryItem.razor.css b/myBlazorApp/myBlazorApp/Components/InventoryItem.razor.css
new file mode 100644
index 0000000..252e639
--- /dev/null
+++ b/myBlazorApp/myBlazorApp/Components/InventoryItem.razor.css
@@ -0,0 +1,7 @@
+.inventory-item {
+    width: 64px;
+    height: 64px;
+    border: 1px solid;
+    overflow: hidden;
+    align-content:center
+}
\ No newline at end of file
diff --git a/myBlazorApp/myBlazorApp/Pages/Inventory.razor b/myBlazorApp/myBlazorApp/Pages/Inventory.razor
index faa633b..e738625 100644
--- a/myBlazorApp/myBlazorApp/Pages/Inventory.razor
+++ b/myBlazorApp/myBlazorApp/Pages/Inventory.razor
@@ -1,6 +1,33 @@
 @page "/inventory"
+@using myBlazorApp.Components
 
 <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" />
+    }
+</div>
diff --git a/myBlazorApp/myBlazorApp/Pages/Inventory.razor.cs b/myBlazorApp/myBlazorApp/Pages/Inventory.razor.cs
index b225bfd..d509240 100644
--- a/myBlazorApp/myBlazorApp/Pages/Inventory.razor.cs
+++ b/myBlazorApp/myBlazorApp/Pages/Inventory.razor.cs
@@ -1,8 +1,43 @@
 using System;
+using Blazored.Modal.Services;
+using Blazorise.DataGrid;
+using Microsoft.AspNetCore.Components;
+using Microsoft.Extensions.Localization;
+using myBlazorApp.Models;
+using myBlazorApp.Services;
+
 namespace myBlazorApp.Pages
 {
 	public partial class Inventory
-	{
-	}
+    {
+
+        private List<Item> itemsInventory = new List<Item>();
+
+        private int totalItem;
+
+        [Inject]
+        public IDataService DataService { get; set; }
+
+        [Inject]
+        public IWebHostEnvironment WebHostEnvironment { get; set; }
+
+        [Inject]
+        public NavigationManager NavigationManager { get; set; }
+
+        [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();
+        }
+    }
 }
 
diff --git a/myBlazorApp/myBlazorApp/Pages/Inventory.razor.css b/myBlazorApp/myBlazorApp/Pages/Inventory.razor.css
new file mode 100644
index 0000000..34491e9
--- /dev/null
+++ b/myBlazorApp/myBlazorApp/Pages/Inventory.razor.css
@@ -0,0 +1,6 @@
+.inventory-items {
+    grid-template-columns: repeat(6,minmax(0,1fr));
+    gap: 10px;
+    display: grid;
+    width: 40%;
+}