diff --git a/BlazorTp1/BlazorTp1.csproj b/BlazorTp1/BlazorTp1.csproj
index 7d44c3c..2b73896 100644
--- a/BlazorTp1/BlazorTp1.csproj
+++ b/BlazorTp1/BlazorTp1.csproj
@@ -20,8 +20,4 @@
     <PackageReference Include="Microsoft.Extensions.Localization.Abstractions" Version="7.0.0" />
   </ItemGroup>
 
-  <ItemGroup>
-    <Folder Include="Services\" />
-  </ItemGroup>
-
 </Project>
diff --git a/BlazorTp1/Factories/ItemFactory.cs b/BlazorTp1/Factories/ItemFactory.cs
index 2a7e9fe..8a87eb4 100644
--- a/BlazorTp1/Factories/ItemFactory.cs
+++ b/BlazorTp1/Factories/ItemFactory.cs
@@ -15,7 +15,8 @@ namespace BlazorTp1.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 BlazorTp1.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 BlazorTp1.Factories
             item.MaxDurability = model.MaxDurability;
             item.StackSize = model.StackSize;
             item.UpdatedDate = DateTime.Now;
+            item.ImageBase64 = Convert.ToBase64String(model.ImageContent);
         }
     }
 }
diff --git a/BlazorTp1/Models/Item.cs b/BlazorTp1/Models/Item.cs
index e697f5a..2ca8525 100644
--- a/BlazorTp1/Models/Item.cs
+++ b/BlazorTp1/Models/Item.cs
@@ -11,5 +11,6 @@
         public List<string> RepairWith { get; set; }
         public DateTime CreatedDate { get; set; }
         public DateTime? UpdatedDate { get; set; }
+        public string ImageBase64 { get; set; }
     }
 }
diff --git a/BlazorTp1/Models/ItemModel.cs b/BlazorTp1/Models/ItemModel.cs
index cf93333..7790cc2 100644
--- a/BlazorTp1/Models/ItemModel.cs
+++ b/BlazorTp1/Models/ItemModel.cs
@@ -33,5 +33,6 @@ namespace BlazorTp1.Models
 
         [Required(ErrorMessage = "The image of the item is mandatory!")]
         public byte[] ImageContent { get; set; }
+        public string ImageBase64 { get; set; }
     }
 }
diff --git a/BlazorTp1/Pages/Edit.razor b/BlazorTp1/Pages/Edit.razor
index c18f772..28c1f8f 100644
--- a/BlazorTp1/Pages/Edit.razor
+++ b/BlazorTp1/Pages/Edit.razor
@@ -77,6 +77,12 @@
             <InputCheckbox @bind-Value="itemModel.AcceptCondition" />
         </label>
     </p>
+    <p>
+        <label>
+            Current Item image:
+            <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>
 
     <button type="submit">Submit</button>
 </EditForm>
diff --git a/BlazorTp1/Pages/Edit.razor.cs b/BlazorTp1/Pages/Edit.razor.cs
index cdf97ab..1267de9 100644
--- a/BlazorTp1/Pages/Edit.razor.cs
+++ b/BlazorTp1/Pages/Edit.razor.cs
@@ -44,11 +44,6 @@ namespace BlazorTp1.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/BlazorTp1/Pages/List.razor b/BlazorTp1/Pages/List.razor
index c4fef1e..bde242a 100644
--- a/BlazorTp1/Pages/List.razor
+++ b/BlazorTp1/Pages/List.razor
@@ -19,9 +19,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/BlazorTp1/Pages/_Layout.cshtml b/BlazorTp1/Pages/_Layout.cshtml
index 10372ee..a2962dc 100644
--- a/BlazorTp1/Pages/_Layout.cshtml
+++ b/BlazorTp1/Pages/_Layout.cshtml
@@ -29,15 +29,13 @@
         </div>
 
         <script src="_framework/blazor.server.js"></script>
+        <script src="_content/Blazored.Modal/blazored.modal.js"></script>
+        <script src="Components/Crafting.razor.js"></script>
 
         <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">
 
         <link href="_content/Blazorise/blazorise.css" rel="stylesheet" />
-        <link href="_content/Blazorise.Bootstrap/blazorise.bootstrap.css" rel="stylesheet" />
-    
-        <script src="_content/Blazored.Modal/blazored.modal.js"></script>
-
-        <script src="Components/Crafting.razor.js"></script>
+        <link href="_content/Blazorise.Bootstrap/blazorise.bootstrap.css" rel="stylesheet" />      
 
     </body>
 </html>
diff --git a/BlazorTp1/Program.cs b/BlazorTp1/Program.cs
index 97cb8f6..a78b722 100644
--- a/BlazorTp1/Program.cs
+++ b/BlazorTp1/Program.cs
@@ -4,6 +4,7 @@ using Blazorise;
 using Blazorise.Bootstrap;
 using Blazorise.Icons.FontAwesome;
 using BlazorTp1.Data;
+using BlazorTp1.Services;
 using Microsoft.AspNetCore.Localization;
 using Microsoft.Extensions.Options;
 using System.Globalization;
@@ -28,6 +29,8 @@ builder.Services.AddBlazoredLocalStorage();
 
 builder.Services.AddScoped<IDataService, DataLocalService>();
 
+builder.Services.AddScoped<IDataService, DataApiService>();
+
 // Add the controller of the app
 builder.Services.AddControllers();
 
diff --git a/BlazorTp1/Services/DataApiService.cs b/BlazorTp1/Services/DataApiService.cs
new file mode 100644
index 0000000..661478e
--- /dev/null
+++ b/BlazorTp1/Services/DataApiService.cs
@@ -0,0 +1,58 @@
+using BlazorTp1.Factories;
+using BlazorTp1.Components;
+using BlazorTp1.Models;
+namespace BlazorTp1.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://localhost:7234/api/Crafting/{id}", item);
+        }
+
+        public async Task Delete(int id)
+        {
+            await _http.DeleteAsync($"https://localhost:7234/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/BlazorTp1/Services/DataLocalService.cs b/BlazorTp1/Services/DataLocalService.cs
index 9154eb7..1dca040 100644
--- a/BlazorTp1/Services/DataLocalService.cs
+++ b/BlazorTp1/Services/DataLocalService.cs
@@ -34,21 +34,6 @@ public class DataLocalService : IDataService
         // Add the item to the current data
         currentData.Add(ItemFactory.Create(model));
 
-        // Save the image
-        var imagePathInfo = new DirectoryInfo($"{_webHostEnvironment.WebRootPath}/images");
-
-        // Check if the folder "images" exist
-        if (!imagePathInfo.Exists)
-        {
-            imagePathInfo.Create();
-        }
-
-        // Determine the image name
-        var fileName = new FileInfo($"{imagePathInfo}/{model.Name}.png");
-
-        // Write the file content
-        await File.WriteAllBytesAsync(fileName.FullName, model.ImageContent);
-
         // Save the data
         await _localStorage.SetItemAsync("data", currentData);
     }
@@ -117,32 +102,6 @@ public class DataLocalService : IDataService
             throw new Exception($"Unable to found the item with ID: {id}");
         }
 
-        // Save the image
-        var imagePathInfo = new DirectoryInfo($"{_webHostEnvironment.WebRootPath}/images");
-
-        // Check if the folder "images" exist
-        if (!imagePathInfo.Exists)
-        {
-            imagePathInfo.Create();
-        }
-
-        // Delete the previous image
-        if (item.Name != model.Name)
-        {
-            var oldFileName = new FileInfo($"{imagePathInfo}/{item.Name}.png");
-
-            if (oldFileName.Exists)
-            {
-                File.Delete(oldFileName.FullName);
-            }
-        }
-
-        // 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);
 
@@ -161,15 +120,6 @@ public class DataLocalService : IDataService
         // 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);
     }