diff --git a/Valblaze.sln b/Valblaze.sln
index 8f219f8..b18c57c 100644
--- a/Valblaze.sln
+++ b/Valblaze.sln
@@ -5,6 +5,8 @@ VisualStudioVersion = 17.3.32929.385
 MinimumVisualStudioVersion = 10.0.40219.1
 Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "ValblazeProject", "ValblazeProject\ValblazeProject.csproj", "{87F4C515-C339-4541-91E1-C10B73F92C79}"
 EndProject
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Minecraft.Crafting.Api", "..\Minecraft.Crafting.Api\Minecraft.Crafting.Api.csproj", "{28328FAB-6547-4E91-A545-6127B69F3761}"
+EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
 		Debug|Any CPU = Debug|Any CPU
@@ -15,6 +17,10 @@ Global
 		{87F4C515-C339-4541-91E1-C10B73F92C79}.Debug|Any CPU.Build.0 = Debug|Any CPU
 		{87F4C515-C339-4541-91E1-C10B73F92C79}.Release|Any CPU.ActiveCfg = Release|Any CPU
 		{87F4C515-C339-4541-91E1-C10B73F92C79}.Release|Any CPU.Build.0 = Release|Any CPU
+		{28328FAB-6547-4E91-A545-6127B69F3761}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{28328FAB-6547-4E91-A545-6127B69F3761}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{28328FAB-6547-4E91-A545-6127B69F3761}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{28328FAB-6547-4E91-A545-6127B69F3761}.Release|Any CPU.Build.0 = Release|Any CPU
 	EndGlobalSection
 	GlobalSection(SolutionProperties) = preSolution
 		HideSolutionNode = FALSE
diff --git a/ValblazeProject/Components/Crafting.razor.cs b/ValblazeProject/Components/Crafting.razor.cs
new file mode 100644
index 0000000..be90447
--- /dev/null
+++ b/ValblazeProject/Components/Crafting.razor.cs
@@ -0,0 +1,80 @@
+using Microsoft.AspNetCore.Components;
+using Microsoft.JSInterop;
+using System.Collections.ObjectModel;
+using System.Collections.Specialized;
+using ValblazeProject.Models;
+
+namespace ValblazeProject.Components
+{
+    public partial class Crafting
+    {
+        private Item _recipeResult;
+
+        public Crafting()
+        {
+            Actions = new ObservableCollection<CraftingAction>();
+            Actions.CollectionChanged += OnActionsCollectionChanged;
+            this.RecipeItems = new List<Item> { null, null, null, null, null, null, null, null, null };
+        }
+
+        public ObservableCollection<CraftingAction> Actions { get; set; }
+        public Item CurrentDragItem { get; set; }
+
+        [Parameter]
+        public List<Item> Items { get; set; }
+
+        public List<Item> RecipeItems { get; set; }
+
+        public Item RecipeResult
+        {
+            get => this._recipeResult;
+            set
+            {
+                if (this._recipeResult == value)
+                {
+                    return;
+                }
+
+                this._recipeResult = value;
+                this.StateHasChanged();
+            }
+        }
+
+        [Parameter]
+        public List<CraftingRecipe> Recipes { get; set; }
+
+        /// <summary>
+        /// Gets or sets the java script runtime.
+        /// </summary>
+        [Inject]
+        internal IJSRuntime JavaScriptRuntime { get; set; }
+
+        public void CheckRecipe()
+        {
+            RecipeResult = null;
+
+            // Get the current model
+            var currentModel = string.Join("|", this.RecipeItems.Select(s => s != null ? s.Name : string.Empty));
+
+            this.Actions.Add(new CraftingAction { Action = $"Items : {currentModel}" });
+
+            foreach (var craftingRecipe in Recipes)
+            {
+                // Get the recipe model
+                var recipeModel = string.Join("|", craftingRecipe.Have.SelectMany(s => s));
+
+                this.Actions.Add(new CraftingAction { Action = $"Recipe model : {recipeModel}" });
+
+                if (currentModel == recipeModel)
+                {
+                    RecipeResult = craftingRecipe.Give;
+                }
+            }
+        }
+
+        private void OnActionsCollectionChanged(object? sender, NotifyCollectionChangedEventArgs e)
+        {
+            JavaScriptRuntime.InvokeVoidAsync("Crafting.AddActions", e.NewItems);
+        }
+    }
+}
diff --git a/ValblazeProject/Models/Item.cs b/ValblazeProject/Models/Item.cs
index 975b30a..3d8d9de 100644
--- a/ValblazeProject/Models/Item.cs
+++ b/ValblazeProject/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/ValblazeProject/Models/ItemModel.cs b/ValblazeProject/Models/ItemModel.cs
index 23a944c..71d9251 100644
--- a/ValblazeProject/Models/ItemModel.cs
+++ b/ValblazeProject/Models/ItemModel.cs
@@ -33,5 +33,6 @@ namespace ValblazeProject.Models
 
         [Required(ErrorMessage = "L'image de l'item est obligatoire !")]
         public byte[] ImageContent { get; set; }
+        public string ImageBase64 { get; set; }
     }
 }
diff --git a/ValblazeProject/Pages/Index.razor b/ValblazeProject/Pages/Index.razor
index f8de525..9cb9b96 100644
--- a/ValblazeProject/Pages/Index.razor
+++ b/ValblazeProject/Pages/Index.razor
@@ -49,7 +49,7 @@ Welcome to your new app.
         </div>
     </CardHeader>
 </Card>
--->
+
 
 <Card Item="CakeItem">
     <CardHeader>
@@ -83,7 +83,7 @@ Welcome to your new app.
         </div>
     </CardBody>
 </Card>
-
+-->
 <ShowItems Items="Cakes" >
     <ShowTemplate Context="CakeContext">
         <div class="card text-center">
diff --git a/ValblazeProject/Pages/Index.razor.cs b/ValblazeProject/Pages/Index.razor.cs
index 8b3586a..61d129e 100644
--- a/ValblazeProject/Pages/Index.razor.cs
+++ b/ValblazeProject/Pages/Index.razor.cs
@@ -9,7 +9,7 @@ namespace ValblazeProject.Pages
     {
         public List<Cake> Cakes { get; set; }
 
-        protected override Task OnAfterRenderAsync(bool firstRender)
+        /*protected override Task OnAfterRenderAsync(bool firstRender)
         {
             LoadCakes();
             StateHasChanged();
@@ -34,7 +34,7 @@ namespace ValblazeProject.Pages
             Id = 1,
             Name = "Black Forest",
             Cost = 50
-        };
+        };*/
 
         [Inject]
         public IDataService DataService { get; set; }
diff --git a/ValblazeProject/Program.cs b/ValblazeProject/Program.cs
index 1b1a1fb..ff63ff1 100644
--- a/ValblazeProject/Program.cs
+++ b/ValblazeProject/Program.cs
@@ -16,6 +16,7 @@ var builder = WebApplication.CreateBuilder(args);
 // Add services to the container.
 
 builder.Services.AddScoped<IDataService, DataLocalService>();
+builder.Services.AddScoped<IDataService, DataApiService>();
 
 builder.Services.AddRazorPages();
 builder.Services.AddServerSideBlazor();
diff --git a/ValblazeProject/Services/DataApiService.cs b/ValblazeProject/Services/DataApiService.cs
new file mode 100644
index 0000000..b7bb27c
--- /dev/null
+++ b/ValblazeProject/Services/DataApiService.cs
@@ -0,0 +1,59 @@
+using ValblazeProject.Components;
+using ValblazeProject.Factories;
+using ValblazeProject.Models;
+
+namespace ValblazeProject.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://localhost:7234/api/Crafting/", item);
+        }
+
+        public async Task<int> Count()
+        {
+            return await _http.GetFromJsonAsync<int>("https://localhost:7234/api/Crafting/count");
+        }
+
+        public async Task<List<Item>> List(int currentPage, int pageSize)
+        {
+            return await _http.GetFromJsonAsync<List<Item>>($"https://localhost:7234/api/Crafting/?currentPage={currentPage}&pageSize={pageSize}");
+        }
+
+        public async Task<Item> GetById(int id)
+        {
+            return await _http.GetFromJsonAsync<Item>($"https://localhost:7234/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://localhost:7234/api/Crafting/recipe");
+        }
+    }
+}
diff --git a/ValblazeProject/Services/IDataService.cs b/ValblazeProject/Services/IDataService.cs
index 20c52b8..5118793 100644
--- a/ValblazeProject/Services/IDataService.cs
+++ b/ValblazeProject/Services/IDataService.cs
@@ -1,4 +1,5 @@
 using ValblazeProject.Models;
+using ValblazeProject.Components;
 
 namespace ValblazeProject.Services
 {