diff --git a/BlazorApp/BlazorApp/Components/Crafting.razor b/BlazorApp/BlazorApp/Components/Crafting.razor
index 42dd978..b1a79b6 100644
--- a/BlazorApp/BlazorApp/Components/Crafting.razor
+++ b/BlazorApp/BlazorApp/Components/Crafting.razor
@@ -1,5 +1,4 @@
-
-<CascadingValue Value="@this">
+<CascadingValue Value="@this">
     <div class="container">
         <div class="row">
             <div class="col-6">
@@ -49,6 +48,4 @@
             </div>
         </div>
     </div>
-</CascadingValue>
-
-
+</CascadingValue>
\ No newline at end of file
diff --git a/BlazorApp/BlazorApp/Components/Crafting.razor.js b/BlazorApp/BlazorApp/Components/Crafting.razor.js
index f222938..8fdb58e 100644
--- a/BlazorApp/BlazorApp/Components/Crafting.razor.js
+++ b/BlazorApp/BlazorApp/Components/Crafting.razor.js
@@ -1,20 +1,16 @@
-<script>
+window.Crafting =
+{
+    AddActions: function (data) {
 
-    window.Crafting =
-    {
-        AddActions: function (data) {
+        data.forEach(element => {
+            var div = document.createElement('div');
+            div.innerHTML = 'Action: ' + element.action + ' - Index: ' + element.index;
 
-            data.forEach(element => {
-                var div = document.createElement('div');
-                div.innerHTML = 'Action: ' + element.action + ' - Index: ' + element.index;
+            if (element.item) {
+                div.innerHTML += ' - Item Name: ' + element.item.name;
+            }
 
-                if (element.item) {
-                    div.innerHTML += ' - Item Name: ' + element.item.name;
-                }
-
-                document.getElementById('actions').appendChild(div);
-            });
-        }
+            document.getElementById('actions').appendChild(div);
+        });
     }
-
-</script>
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/BlazorApp/BlazorApp/Components/CraftingItem.razor.cs b/BlazorApp/BlazorApp/Components/CraftingItem.razor.cs
index 5893a1f..ae58e14 100644
--- a/BlazorApp/BlazorApp/Components/CraftingItem.razor.cs
+++ b/BlazorApp/BlazorApp/Components/CraftingItem.razor.cs
@@ -1,10 +1,10 @@
-using System;
+using BlazorApp.Components;
 using BlazorApp.Models;
-using Blazorise;
 using Microsoft.AspNetCore.Components;
 
 namespace BlazorApp.Components
 {
+
     public partial class CraftingItem
     {
         [Parameter]
@@ -62,7 +62,4 @@ namespace BlazorApp.Components
             Parent.Actions.Add(new CraftingAction { Action = "Drag Start", Item = this.Item, Index = this.Index });
         }
     }
-}
-
-
-
+}
\ No newline at end of file
diff --git a/BlazorApp/BlazorApp/Factories/ItemFactory.cs b/BlazorApp/BlazorApp/Factories/ItemFactory.cs
index c58fa10..6eaa10b 100644
--- a/BlazorApp/BlazorApp/Factories/ItemFactory.cs
+++ b/BlazorApp/BlazorApp/Factories/ItemFactory.cs
@@ -33,7 +33,8 @@ namespace BlazorApp.Factories
                 EnchantCategories = model.EnchantCategories,
                 MaxDurability = model.MaxDurability,
                 StackSize = model.StackSize,
-                CreatedDate = DateTime.Now
+                CreatedDate = DateTime.Now,
+                ImageBase64 = Convert.ToBase64String(model.ImageContent)
             };
         }
 
@@ -46,6 +47,7 @@ namespace BlazorApp.Factories
             item.MaxDurability = model.MaxDurability;
             item.StackSize = model.StackSize;
             item.UpdatedDate = DateTime.Now;
+            item.ImageBase64 = Convert.ToBase64String(model.ImageContent);
         }
 
     }
diff --git a/BlazorApp/BlazorApp/Pages/Edit.razor b/BlazorApp/BlazorApp/Pages/Edit.razor
index 74d3978..878a5ca 100644
--- a/BlazorApp/BlazorApp/Pages/Edit.razor
+++ b/BlazorApp/BlazorApp/Pages/Edit.razor
@@ -55,14 +55,8 @@
     <p>
         <label>
             Current Item image:
-            @if (File.Exists($"{WebHostEnvironment.WebRootPath}/images/{itemModel.Name}.png"))
-            {
-                <img src="images/@(itemModel.Name).png" class="img-thumbnail" title="@itemModel.DisplayName" alt="@itemModel.DisplayName" style="max-width: 150px" />
-            }
-            else
-            {
-                <img src="images/default.png" class="img-thumbnail" title="@itemModel.DisplayName" alt="@itemModel.DisplayName" style="max-width: 150px" />
-            }
+            <img src="data:image/png;base64, @(itemModel.ImageBase64)" class="img-thumbnail" title="@itemModel.DisplayName" alt="@itemModel.DisplayName" style="min-width: 50px; max-width: 150px" />
+
         </label>
     </p>
     <p>
diff --git a/BlazorApp/BlazorApp/Pages/Edit.razor.cs b/BlazorApp/BlazorApp/Pages/Edit.razor.cs
index 7d1abe1..3dbaa1f 100644
--- a/BlazorApp/BlazorApp/Pages/Edit.razor.cs
+++ b/BlazorApp/BlazorApp/Pages/Edit.razor.cs
@@ -46,11 +46,6 @@ namespace BlazorApp.Pages
 
             var fileContent = await File.ReadAllBytesAsync($"{WebHostEnvironment.WebRootPath}/images/default.png");
 
-            if (File.Exists($"{WebHostEnvironment.WebRootPath}/images/{itemModel.Name}.png"))
-            {
-                fileContent = await File.ReadAllBytesAsync($"{WebHostEnvironment.WebRootPath}/images/{item.Name}.png");
-            }
-
             // Set the model with the item
             itemModel = ItemFactory.ToModel(item, fileContent);
         }
diff --git a/BlazorApp/BlazorApp/Pages/Index.razor b/BlazorApp/BlazorApp/Pages/Index.razor
index 5deb450..7ae5c1c 100644
--- a/BlazorApp/BlazorApp/Pages/Index.razor
+++ b/BlazorApp/BlazorApp/Pages/Index.razor
@@ -4,7 +4,7 @@
 
 <PageTitle>Index</PageTitle>
 
-<h1>Hello, world!</h1>
+<h1>Bonjour, monde!</h1>
 
 <!--
 <ShowItems Items="Cakes">
diff --git a/BlazorApp/BlazorApp/Pages/Index.razor.cs b/BlazorApp/BlazorApp/Pages/Index.razor.cs
index b0e2eb7..c55312f 100644
--- a/BlazorApp/BlazorApp/Pages/Index.razor.cs
+++ b/BlazorApp/BlazorApp/Pages/Index.razor.cs
@@ -8,37 +8,6 @@ namespace BlazorApp.Pages
 {
     public partial class Index
     {
-        /*
-        public List<Cake> Cakes { get; set; }
-
-        protected override Task OnAfterRenderAsync(bool firstRender)
-        {
-            LoadCakes();
-            StateHasChanged();
-            return base.OnAfterRenderAsync(firstRender);
-        }
-
-        public void LoadCakes()
-        {
-            Cakes = new List<Cake>
-            {
-                // items hidden for display purpose
-                new Cake
-                {
-                    Id = 1,
-                    Name = "Red Velvet",
-                    Cost = 60
-                },
-                new Cake
-                {
-                    Id = 2,
-                    Name = "Black Forest",
-                    Cost = 50
-                },
-            };
-        }
-        */
-
         [Inject]
         public IDataService DataService { get; set; }
 
@@ -46,12 +15,19 @@ namespace BlazorApp.Pages
 
         private List<CraftingRecipe> Recipes { get; set; } = new List<CraftingRecipe>();
 
-        protected override async Task   OnInitializedAsync()
+        protected override async Task OnAfterRenderAsync(bool firstRender)
         {
-            await base.OnInitializedAsync();
+            base.OnAfterRenderAsync(firstRender);
 
+            if (!firstRender)
+            {
+                return;
+            }
+  
             Items = await DataService.List(0, await DataService.Count());
             Recipes = await DataService.GetRecipes();
+
+            StateHasChanged();
         }
     }
 }
diff --git a/BlazorApp/BlazorApp/Pages/Inventory.razor b/BlazorApp/BlazorApp/Pages/Inventory.razor
new file mode 100644
index 0000000..306c0bc
--- /dev/null
+++ b/BlazorApp/BlazorApp/Pages/Inventory.razor
@@ -0,0 +1,37 @@
+@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>
\ No newline at end of file
diff --git a/BlazorApp/BlazorApp/Pages/Inventory.razor.cs b/BlazorApp/BlazorApp/Pages/Inventory.razor.cs
new file mode 100644
index 0000000..876e667
--- /dev/null
+++ b/BlazorApp/BlazorApp/Pages/Inventory.razor.cs
@@ -0,0 +1,11 @@
+using System;
+using BlazorApp.Components;
+
+namespace BlazorApp.Pages
+{
+	public partial class Inventory
+	{
+
+	}
+}
+
diff --git a/BlazorApp/BlazorApp/Pages/Inventory.razor.css b/BlazorApp/BlazorApp/Pages/Inventory.razor.css
new file mode 100644
index 0000000..1b5ace6
--- /dev/null
+++ b/BlazorApp/BlazorApp/Pages/Inventory.razor.css
@@ -0,0 +1,6 @@
+.css-grid {
+    grid-template-columns: repeat(6,minmax(0,1fr));
+    gap: 10px;
+    display: grid;
+    width: 40%;
+}
diff --git a/BlazorApp/BlazorApp/Pages/List.razor b/BlazorApp/BlazorApp/Pages/List.razor
index 9fc6239..83da396 100644
--- a/BlazorApp/BlazorApp/Pages/List.razor
+++ b/BlazorApp/BlazorApp/Pages/List.razor
@@ -53,9 +53,9 @@
     <DataGridColumn TItem="Item" Field="@nameof(Item.Id)" Caption="#" />
     <DataGridColumn TItem="Item" Field="@nameof(Item.Id)" Caption="Image">
         <DisplayTemplate>
-            @if (File.Exists($"{WebHostEnvironment.WebRootPath}/images/{context.Name}.png"))
+            @if (!string.IsNullOrWhiteSpace(context.ImageBase64))
             {
-                <img src="images/@(context.Name).png" class="img-thumbnail" title="@context.DisplayName" alt="@context.DisplayName" style="max-width: 150px" />
+                <img src="data:image/png;base64, @(context.ImageBase64)" class="img-thumbnail" title="@context.DisplayName" alt="@context.DisplayName" style="min-width: 50px; max-width: 150px" />
             }
             else
             {
diff --git a/BlazorApp/BlazorApp/Program.cs b/BlazorApp/BlazorApp/Program.cs
index a981be2..77f260e 100644
--- a/BlazorApp/BlazorApp/Program.cs
+++ b/BlazorApp/BlazorApp/Program.cs
@@ -25,7 +25,7 @@ builder.Services
 
 builder.Services.AddBlazoredLocalStorage();
 
-builder.Services.AddScoped<IDataService, DataLocalService>();
+builder.Services.AddScoped<IDataService, DataApiService>();
 
 builder.Services.AddBlazoredModal();
 
diff --git a/BlazorApp/BlazorApp/Services/DataApiService.cs b/BlazorApp/BlazorApp/Services/DataApiService.cs
new file mode 100644
index 0000000..51cc446
--- /dev/null
+++ b/BlazorApp/BlazorApp/Services/DataApiService.cs
@@ -0,0 +1,61 @@
+using System;
+using BlazorApp.Components;
+using BlazorApp.Factories;
+using BlazorApp.Models;
+
+namespace BlazorApp.Services
+{
+    public class DataApiService : IDataService
+    {
+        private readonly HttpClient _http;
+
+        public DataApiService(
+            HttpClient http)
+        {
+            _http = http;
+        }
+
+        public async Task Add(ItemModel model)
+        {
+            // Get the item
+            var item = ItemFactory.Create(model);
+
+            // Save the data
+            await _http.PostAsJsonAsync("https://codefirst.iut.uca.fr/containers/container-blazor-web-api-julienriboulet/api/Crafting/", item);
+        }
+
+        public async Task<int> Count()
+        {
+            return await _http.GetFromJsonAsync<int>("https://codefirst.iut.uca.fr/containers/container-blazor-web-api-julienriboulet/api/Crafting/count");
+        }
+
+        public async Task<List<Item>> List(int currentPage, int pageSize)
+        {
+            return await _http.GetFromJsonAsync<List<Item>>($"https://codefirst.iut.uca.fr/containers/container-blazor-web-api-julienriboulet/api/Crafting/?currentPage={currentPage}&pageSize={pageSize}");
+        }
+
+        public async Task<Item> GetById(int id)
+        {
+            return await _http.GetFromJsonAsync<Item>($"https://codefirst.iut.uca.fr/containers/container-blazor-web-api-julienriboulet/api/Crafting/{id}");
+        }
+
+        public async Task Update(int id, ItemModel model)
+        {
+            // Get the item
+            var item = ItemFactory.Create(model);
+
+            await _http.PutAsJsonAsync($"https://codefirst.iut.uca.fr/containers/container-blazor-web-api-julienriboulet/api/Crafting/{id}", item);
+        }
+
+        public async Task Delete(int id)
+        {
+            await _http.DeleteAsync($"https://codefirst.iut.uca.fr/containers/container-blazor-web-api-julienriboulet/Crafting/{id}");
+        }
+
+        public async Task<List<CraftingRecipe>> GetRecipes()
+        {
+            return await _http.GetFromJsonAsync<List<CraftingRecipe>>("https://codefirst.iut.uca.fr/containers/container-blazor-web-api-julienriboulet/api/Crafting/recipe");
+        }
+    }
+}
+
diff --git a/BlazorApp/BlazorApp/Shared/NavMenu.razor b/BlazorApp/BlazorApp/Shared/NavMenu.razor
index 126f4bf..c97ace3 100644
--- a/BlazorApp/BlazorApp/Shared/NavMenu.razor
+++ b/BlazorApp/BlazorApp/Shared/NavMenu.razor
@@ -14,6 +14,11 @@
                 <span class="oi oi-list-rich" aria-hidden="true"></span> List
             </NavLink>
         </div>
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="inventory">
+                <span class="oi oi-briefcase" aria-hidden="true"></span> Inventory
+            </NavLink>
+        </div>
         <div class="nav-item px-3">
             <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                 <span class="oi oi-home" aria-hidden="true"></span> Home