diff --git a/CetteAppliVaMarcher/CetteAppliVaMarcher/Factories/ItemFactory.cs b/CetteAppliVaMarcher/CetteAppliVaMarcher/Factories/ItemFactory.cs
index e6e1ca9..ee5275c 100644
--- a/CetteAppliVaMarcher/CetteAppliVaMarcher/Factories/ItemFactory.cs
+++ b/CetteAppliVaMarcher/CetteAppliVaMarcher/Factories/ItemFactory.cs
@@ -15,7 +15,8 @@ namespace CetteAppliVaMarcher.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 CetteAppliVaMarcher.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 CetteAppliVaMarcher.Factories
             item.MaxDurability = model.MaxDurability;
             item.StackSize = model.StackSize;
             item.UpdatedDate = DateTime.Now;
+            item.ImageBase64 = Convert.ToBase64String(model.ImageContent);
         }
     }
 }
diff --git a/CetteAppliVaMarcher/CetteAppliVaMarcher/Models/Item.cs b/CetteAppliVaMarcher/CetteAppliVaMarcher/Models/Item.cs
index 87ededf..058a3c3 100644
--- a/CetteAppliVaMarcher/CetteAppliVaMarcher/Models/Item.cs
+++ b/CetteAppliVaMarcher/CetteAppliVaMarcher/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/CetteAppliVaMarcher/CetteAppliVaMarcher/Models/ItemModel.cs b/CetteAppliVaMarcher/CetteAppliVaMarcher/Models/ItemModel.cs
index 5474390..2de4a45 100644
--- a/CetteAppliVaMarcher/CetteAppliVaMarcher/Models/ItemModel.cs
+++ b/CetteAppliVaMarcher/CetteAppliVaMarcher/Models/ItemModel.cs
@@ -33,5 +33,6 @@ namespace CetteAppliVaMarcher.Models
 
         [Required(ErrorMessage = "The image of the item is mandatory!")]
         public byte[] ImageContent { get; set; }
+        public string ImageBase64 { get; set; }
     }
 }
diff --git a/CetteAppliVaMarcher/CetteAppliVaMarcher/Pages/Edit.razor b/CetteAppliVaMarcher/CetteAppliVaMarcher/Pages/Edit.razor
index 57cedae..3f92e5a 100644
--- a/CetteAppliVaMarcher/CetteAppliVaMarcher/Pages/Edit.razor
+++ b/CetteAppliVaMarcher/CetteAppliVaMarcher/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/CetteAppliVaMarcher/CetteAppliVaMarcher/Pages/Edit.razor.cs b/CetteAppliVaMarcher/CetteAppliVaMarcher/Pages/Edit.razor.cs
index 586d603..99c800a 100644
--- a/CetteAppliVaMarcher/CetteAppliVaMarcher/Pages/Edit.razor.cs
+++ b/CetteAppliVaMarcher/CetteAppliVaMarcher/Pages/Edit.razor.cs
@@ -45,11 +45,6 @@ namespace CetteAppliVaMarcher.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/CetteAppliVaMarcher/CetteAppliVaMarcher/Pages/Index.razor.cs b/CetteAppliVaMarcher/CetteAppliVaMarcher/Pages/Index.razor.cs
index 57e814a..4db766e 100644
--- a/CetteAppliVaMarcher/CetteAppliVaMarcher/Pages/Index.razor.cs
+++ b/CetteAppliVaMarcher/CetteAppliVaMarcher/Pages/Index.razor.cs
@@ -11,12 +11,4 @@ public partial class Index
     public List<Item> Items { get; set; } = new List<Item>();
 
     private List<CraftingRecipe> Recipes { get; set; } = new List<CraftingRecipe>();
-
-    protected override async Task OnInitializedAsync()
-    {
-        await base.OnInitializedAsync();
-
-        Items = await DataService.List(0, await DataService.Count());
-        Recipes = await DataService.GetRecipes();
-    }
 }
\ No newline at end of file
diff --git a/CetteAppliVaMarcher/CetteAppliVaMarcher/Pages/List.razor b/CetteAppliVaMarcher/CetteAppliVaMarcher/Pages/List.razor
index 8ac8eaf..79cd913 100644
--- a/CetteAppliVaMarcher/CetteAppliVaMarcher/Pages/List.razor
+++ b/CetteAppliVaMarcher/CetteAppliVaMarcher/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: 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/CetteAppliVaMarcher/CetteAppliVaMarcher/Program.cs b/CetteAppliVaMarcher/CetteAppliVaMarcher/Program.cs
index d84b08d..c19b14c 100644
--- a/CetteAppliVaMarcher/CetteAppliVaMarcher/Program.cs
+++ b/CetteAppliVaMarcher/CetteAppliVaMarcher/Program.cs
@@ -23,7 +23,7 @@ builder.Services
    .AddBlazorise()
    .AddBootstrapProviders()
    .AddFontAwesomeIcons();
-builder.Services.AddScoped<IDataService, DataLocalService>();
+builder.Services.AddScoped<IDataService, DataApiService>();
 builder.Services.AddBlazoredLocalStorage();
 builder.Services.AddBlazoredModal();
 
diff --git a/CetteAppliVaMarcher/CetteAppliVaMarcher/Services/DataApiService.cs b/CetteAppliVaMarcher/CetteAppliVaMarcher/Services/DataApiService.cs
new file mode 100644
index 0000000..42824c6
--- /dev/null
+++ b/CetteAppliVaMarcher/CetteAppliVaMarcher/Services/DataApiService.cs
@@ -0,0 +1,59 @@
+using CetteAppliVaMarcher.Components;
+using CetteAppliVaMarcher.Factories;
+using CetteAppliVaMarcher.Models;
+
+namespace CetteAppliVaMarcher.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/CetteAppliVaMarcher/CetteAppliVaMarcher/wwwroot/images/slumberia.png b/CetteAppliVaMarcher/CetteAppliVaMarcher/wwwroot/images/slumberia.png
new file mode 100644
index 0000000..fa1eb20
Binary files /dev/null and b/CetteAppliVaMarcher/CetteAppliVaMarcher/wwwroot/images/slumberia.png differ