diff --git a/Sources/MyFirstBlazor/Factories/ItemFactory.cs b/Sources/MyFirstBlazor/Factories/ItemFactory.cs
index abfaadf..590f578 100644
--- a/Sources/MyFirstBlazor/Factories/ItemFactory.cs
+++ b/Sources/MyFirstBlazor/Factories/ItemFactory.cs
@@ -15,7 +15,8 @@ namespace MyFirstBlazor.Factories
                 EnchantCategories = item.EnchantCategories,
                 MaxDurability = item.MaxDurability,
                 StackSize = item.StackSize,
-                ImageContent = imageContent
+                ImageContent = imageContent,
+                ImageBase64 = string.IsNullOrWhiteSpace(item.ImageBase64) ? Convert.ToBase64String(imageContent) : item.ImageBase64
             };
         }
 
@@ -30,7 +31,8 @@ namespace MyFirstBlazor.Factories
                 EnchantCategories = model.EnchantCategories,
                 MaxDurability = model.MaxDurability,
                 StackSize = model.StackSize,
-                CreatedDate = DateTime.Now
+                CreatedDate = DateTime.Now,
+                ImageBase64 = Convert.ToBase64String(model.ImageContent)
             };
         }
 
@@ -43,6 +45,7 @@ namespace MyFirstBlazor.Factories
             item.MaxDurability = model.MaxDurability;
             item.StackSize = model.StackSize;
             item.UpdatedDate = DateTime.Now;
+            item.ImageBase64 = Convert.ToBase64String(model.ImageContent);
         }
     }
 }
diff --git a/Sources/MyFirstBlazor/Pages/Edit.razor b/Sources/MyFirstBlazor/Pages/Edit.razor
index 5544f1f..f85132e 100644
--- a/Sources/MyFirstBlazor/Pages/Edit.razor
+++ b/Sources/MyFirstBlazor/Pages/Edit.razor
@@ -55,14 +55,7 @@
     <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/Sources/MyFirstBlazor/Pages/Edit.razor.cs b/Sources/MyFirstBlazor/Pages/Edit.razor.cs
index 6ac52b2..bf54c9d 100644
--- a/Sources/MyFirstBlazor/Pages/Edit.razor.cs
+++ b/Sources/MyFirstBlazor/Pages/Edit.razor.cs
@@ -45,11 +45,6 @@ namespace MyFirstBlazor.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/Sources/MyFirstBlazor/Pages/List.razor b/Sources/MyFirstBlazor/Pages/List.razor
index a20c808..10cab50 100644
--- a/Sources/MyFirstBlazor/Pages/List.razor
+++ b/Sources/MyFirstBlazor/Pages/List.razor
@@ -20,9 +20,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: 10000px" />
+                <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/Sources/MyFirstBlazor/Program.cs b/Sources/MyFirstBlazor/Program.cs
index 4083799..ee3c03e 100644
--- a/Sources/MyFirstBlazor/Program.cs
+++ b/Sources/MyFirstBlazor/Program.cs
@@ -10,6 +10,7 @@ using Blazored.Modal;
 using Microsoft.AspNetCore.Localization;
 using System.Globalization;
 using Microsoft.Extensions.Options;
+using Microsoft.Extensions.Logging;
 
 var builder = WebApplication.CreateBuilder(args);
 
@@ -26,6 +27,9 @@ builder.Services
 builder.Services.AddBlazoredLocalStorage();
 builder.Services.AddScoped<IDataService, DataLocalServices>();
 builder.Services.AddBlazoredModal();
+builder.Services.AddScoped<IDataService, DataApiService>();
+builder.Services.AddHttpClient();
+builder.Logging.AddConfiguration(builder.Configuration.GetSection("Logging"));
 
 // Add the controller of the app
 builder.Services.AddControllers();
diff --git a/Sources/MyFirstBlazor/Services/DataApiService.cs b/Sources/MyFirstBlazor/Services/DataApiService.cs
new file mode 100644
index 0000000..2f4a1b0
--- /dev/null
+++ b/Sources/MyFirstBlazor/Services/DataApiService.cs
@@ -0,0 +1,59 @@
+using MyFirstBlazor.Components;
+using MyFirstBlazor.Factories;
+using MyFirstBlazor.Models;
+
+namespace MyFirstBlazor.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/api/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/Sources/MyFirstBlazor/Services/DataLocalService.cs b/Sources/MyFirstBlazor/Services/DataLocalService.cs
index 0f27546..0dbecdb 100644
--- a/Sources/MyFirstBlazor/Services/DataLocalService.cs
+++ b/Sources/MyFirstBlazor/Services/DataLocalService.cs
@@ -27,24 +27,21 @@ namespace MyFirstBlazor.Services
 
         public async Task Add(ItemModel model)
         {
+            // Get the current data
+            var currentData = await _localStorage.GetItemAsync<List<Item>>("data");
 
-            // Save the image
-            var imagePathInfo = new DirectoryInfo($"{_webHostEnvironment.WebRootPath}/images");
-
-            // Check if the folder "images" exist
-            if (!imagePathInfo.Exists)
-            {
-                imagePathInfo.Create();
-            }
+            // Simulate the Id
+            model.Id = currentData.Max(s => s.Id) + 1;
 
-            // Determine the image name
-            var fileName = new FileInfo($"{imagePathInfo}/{model.Name}.png");
+            // Add the item to the current data
+            currentData.Add(ItemFactory.Create(model));
 
-            // Write the file content
-            await File.WriteAllBytesAsync(fileName.FullName, model.ImageContent);
+            // Save the data
+            await _localStorage.SetItemAsync("data", currentData);
 
         }
 
+
         public async Task<int> Count()
         {
             return (await _localStorage.GetItemAsync<Item[]>("data")).Length;
@@ -81,41 +78,27 @@ namespace MyFirstBlazor.Services
 
             return item;
         }
-
         public async Task Update(int id, ItemModel model)
         {
-      
-
-       
+            // Get the current data
+            var currentData = await _localStorage.GetItemAsync<List<Item>>("data");
 
-            // Save the image
-            var imagePathInfo = new DirectoryInfo($"{_webHostEnvironment.WebRootPath}/images");
+            // Get the item int the list
+            var item = currentData.FirstOrDefault(w => w.Id == id);
 
-            // Check if the folder "images" exist
-            if (!imagePathInfo.Exists)
-            {
-                imagePathInfo.Create();
-            }
-            // Delete the previous image
-            if (item.Name != model.Name)
+            // Check if item exist
+            if (item == null)
             {
-                var oldFileName = new FileInfo($"{imagePathInfo}/{item.Name}.png");
-
-                if (oldFileName.Exists)
-                {
-                    File.Delete(oldFileName.FullName);
-                }
+                throw new Exception($"Unable to found the item with ID: {id}");
             }
 
-            // Determine the image name
-            var fileName = new FileInfo($"{imagePathInfo}/{model.Name}.png");
-
-            // Write the file content
-            await File.WriteAllBytesAsync(fileName.FullName, model.ImageContent);
-
-      
+            // Modify the content of the item
+            ItemFactory.Update(item, model);
 
+            // Save the data
+            await _localStorage.SetItemAsync("data", currentData);
         }
+
         public async Task Delete(int id)
         {
             // Get the current data
@@ -127,15 +110,6 @@ namespace MyFirstBlazor.Services
             // Delete item in
             currentData.Remove(item);
 
-            // Delete the image
-            var imagePathInfo = new DirectoryInfo($"{_webHostEnvironment.WebRootPath}/images");
-            var fileName = new FileInfo($"{imagePathInfo}/{item.Name}.png");
-
-            if (fileName.Exists)
-            {
-                File.Delete(fileName.FullName);
-            }
-
             // Save the data
             await _localStorage.SetItemAsync("data", currentData);
         }
diff --git a/Sources/MyFirstBlazor/wwwroot/appsettings.json b/Sources/MyFirstBlazor/wwwroot/appsettings.json
new file mode 100644
index 0000000..ef6372d
--- /dev/null
+++ b/Sources/MyFirstBlazor/wwwroot/appsettings.json
@@ -0,0 +1,9 @@
+{
+  "Logging": {
+    "LogLevel": {
+      "Default": "Trace",
+      "Microsoft": "Warning",
+      "Microsoft.Hosting.Lifetime": "Information"
+    }
+  }
+}
\ No newline at end of file