diff --git a/ProjetBlazor/Components/MusiqueAction.razor b/ProjetBlazor/Components/MusiqueAction.razor
new file mode 100644
index 0000000..1f30dc0
--- /dev/null
+++ b/ProjetBlazor/Components/MusiqueAction.razor
@@ -0,0 +1,2 @@
+<h3>MusiqueAction</h3>
+
diff --git a/ProjetBlazor/Components/MusiqueAction.razor.cs b/ProjetBlazor/Components/MusiqueAction.razor.cs
new file mode 100644
index 0000000..d6d05b2
--- /dev/null
+++ b/ProjetBlazor/Components/MusiqueAction.razor.cs
@@ -0,0 +1,11 @@
+using ProjetBlazor.Modeles;
+
+namespace ProjetBlazor.Components
+{
+    public partial class MusiqueAction
+    {
+        public string Action { get; set; }
+        public int Index { get; set; }
+        public Musique musique { get; set; }
+    }
+}
diff --git a/ProjetBlazor/Components/MusiqueComponent.razor b/ProjetBlazor/Components/MusiqueComponent.razor
new file mode 100644
index 0000000..c8f143d
--- /dev/null
+++ b/ProjetBlazor/Components/MusiqueComponent.razor
@@ -0,0 +1,51 @@
+<CascadingValue Value="@this">
+    <div class="container">
+        <div class="row">
+            <div class="col-6">
+                
+                <div>Available items:</div>
+                <div>
+                    <div class="css-grid">
+                        
+                        @foreach (var item in Items)
+                        {
+                            <CraftingItem Item="item" NoDrop="true"/>
+                        }
+                    </div>
+                </div>
+
+            </div>
+
+            <div class="col-6">
+                <div>Recipe</div>
+                
+                <div>
+                    
+                    <div class="css-recipe">
+                        <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"/>
+                    </div>
+                </div>
+                
+                <div>Result</div>
+                <div>
+                    <CraftingItem Item="RecipeResult"/>
+                </div>
+            </div>
+
+            <div class="col-12">
+                <div>Actions</div>
+                <div class="actions" id="actions">
+
+                </div>
+            </div>
+        </div>
+    </div>
+</CascadingValue>
\ No newline at end of file
diff --git a/ProjetBlazor/Components/MusiqueComponent.razor.cs b/ProjetBlazor/Components/MusiqueComponent.razor.cs
new file mode 100644
index 0000000..6f17f7b
--- /dev/null
+++ b/ProjetBlazor/Components/MusiqueComponent.razor.cs
@@ -0,0 +1,74 @@
+namespace ProjetBlazor.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/ProjetBlazor/Components/MusiqueComponent.razor.css b/ProjetBlazor/Components/MusiqueComponent.razor.css
new file mode 100644
index 0000000..2a388f2
--- /dev/null
+++ b/ProjetBlazor/Components/MusiqueComponent.razor.css
@@ -0,0 +1,19 @@
+.css-grid {
+    grid-template-columns: repeat(4,minmax(0,1fr));
+    gap: 10px;
+    display: grid;
+    width: 286px;
+}
+
+.css-recipe {
+    grid-template-columns: repeat(3,minmax(0,1fr));
+    gap: 10px;
+    display: grid;
+    width: 212px;
+}
+
+.actions {
+    border: 1px solid black;
+    height: 250px;
+    overflow: scroll;
+}
diff --git a/ProjetBlazor/Components/MusiqueComponent.razor.js b/ProjetBlazor/Components/MusiqueComponent.razor.js
new file mode 100644
index 0000000..8fdb58e
--- /dev/null
+++ b/ProjetBlazor/Components/MusiqueComponent.razor.js
@@ -0,0 +1,16 @@
+window.Crafting =
+{
+    AddActions: function (data) {
+
+        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;
+            }
+
+            document.getElementById('actions').appendChild(div);
+        });
+    }
+}
\ No newline at end of file
diff --git a/ProjetBlazor/Components/MusiqueContainerEcoute.razor b/ProjetBlazor/Components/MusiqueContainerEcoute.razor
new file mode 100644
index 0000000..e02abfc
--- /dev/null
+++ b/ProjetBlazor/Components/MusiqueContainerEcoute.razor
@@ -0,0 +1 @@
+
diff --git a/ProjetBlazor/Components/MusiqueContainerEcoute.razor.cs b/ProjetBlazor/Components/MusiqueContainerEcoute.razor.cs
new file mode 100644
index 0000000..c9e39d3
--- /dev/null
+++ b/ProjetBlazor/Components/MusiqueContainerEcoute.razor.cs
@@ -0,0 +1,10 @@
+using ProjetBlazor.Modeles;
+
+namespace ProjetBlazor.Components
+{
+    public partial class MusiqueContainerEcoute
+    {
+        public Musique musiqueEnEcoute { get; set; }
+
+    }
+}
diff --git a/ProjetBlazor/Components/MusiquesContainer.razor b/ProjetBlazor/Components/MusiquesContainer.razor
new file mode 100644
index 0000000..fc24cea
--- /dev/null
+++ b/ProjetBlazor/Components/MusiquesContainer.razor
@@ -0,0 +1,18 @@
+
+
+<h3>MusiquesContainer</h3>
+
+
+<div class="item"
+     ondragover="event.preventDefault();"
+     draggable="true"
+     @ondragstart="@OnDragStart"
+     @ondrop="@OnDrop"
+     @ondragenter="@OnDragEnter"
+     @ondragleave="@OnDragLeave">
+
+    @if (musique != null)
+    {
+        @musique.titre
+    }
+</div>
\ No newline at end of file
diff --git a/ProjetBlazor/Components/MusiquesContainer.razor.cs b/ProjetBlazor/Components/MusiquesContainer.razor.cs
new file mode 100644
index 0000000..3f9cc05
--- /dev/null
+++ b/ProjetBlazor/Components/MusiquesContainer.razor.cs
@@ -0,0 +1,64 @@
+using Blazorise;
+using Microsoft.AspNetCore.Components;
+using ProjetBlazor.Modeles;
+
+namespace ProjetBlazor.Components
+{
+    public partial class MusiquesContainer
+    {
+        [Parameter]
+        public int Index { get; set; }
+
+        [Parameter]
+        public Musique musique { get; set; }
+
+        [Parameter]
+        public bool NoDrop { get; set; }
+
+        [CascadingParameter]
+        public Crafting Parent { get; set; }
+
+        internal void OnDragEnter()
+        {
+            if (NoDrop)
+            {
+                return;
+            }
+
+            Parent.Actions.Add(new MusiqueAction { Action = "Drag Enter", musique = this.musique, Index = this.Index });
+        }
+
+        internal void OnDragLeave()
+        {
+            if (NoDrop)
+            {
+                return;
+            }
+
+            Parent.Actions.Add(new MusiqueAction { Action = "Drag Leave", musique = this.musique, Index = this.Index });
+        }
+
+        internal void OnDrop()
+        {
+            if (NoDrop)
+            {
+                return;
+            }
+
+            this.musique = Parent.CurrentDragItem;
+            Parent.RecipeItems[this.Index] = this.musique;
+
+            Parent.Actions.Add(new MusiqueAction { Action = "Drop", musique = this.musique, Index = this.Index });
+
+            // Check recipe
+            Parent.CheckRecipe();
+        }
+
+        private void OnDragStart()
+        {
+            Parent.CurrentDragItem = this.musique;
+
+            Parent.Actions.Add(new MusiqueAction { Action = "Drag Start", musique = this.musique, Index = this.Index });
+        }
+    }
+}
diff --git a/ProjetBlazor/Components/MusiquesContainer.razor.css b/ProjetBlazor/Components/MusiquesContainer.razor.css
new file mode 100644
index 0000000..b2d4521
--- /dev/null
+++ b/ProjetBlazor/Components/MusiquesContainer.razor.css
@@ -0,0 +1,6 @@
+.item {
+    width: 64px;
+    height: 64px;
+    border: 1px solid;
+    overflow: hidden;
+}
diff --git a/ProjetBlazor/Pages/Play.razor b/ProjetBlazor/Pages/Play.razor
index 71394ef..987f444 100644
--- a/ProjetBlazor/Pages/Play.razor
+++ b/ProjetBlazor/Pages/Play.razor
@@ -16,18 +16,3 @@
 </figure>
 
 <h1>Scoped CSS Example</h1>
-
-
-<!--
-<DataGrid Class="tab" TItem="Musique"
-          Data="@listeMusique"
-          ReadData="@OnReadData"
-          Responsive>
-
-    <DataGridColumn TItem="Musique" Field="@nameof(Musique.id)" Caption="Image">
-        <DisplayTemplate>
-            <img src="https://localhost:7234/images/@(context.imageName)"/>
-        </DisplayTemplate>
-    </DataGridColumn>
-</DataGrid>
--->
diff --git a/ProjetBlazor/ProjetBlazor.csproj b/ProjetBlazor/ProjetBlazor.csproj
index cad1a35..d99b04e 100644
--- a/ProjetBlazor/ProjetBlazor.csproj
+++ b/ProjetBlazor/ProjetBlazor.csproj
@@ -6,6 +6,10 @@
     <ImplicitUsings>enable</ImplicitUsings>
   </PropertyGroup>
 
+  <ItemGroup>
+    <Compile Remove="Components\Musique.razor.cs" />
+  </ItemGroup>
+
   <ItemGroup>
     <PackageReference Include="Blazorise.Bootstrap" Version="1.1.5" />
     <PackageReference Include="Blazorise.DataGrid" Version="1.1.5" />
@@ -13,8 +17,11 @@
   </ItemGroup>
 
   <ItemGroup>
-    <Folder Include="Components\" />
     <Folder Include="wwwroot\song\" />
   </ItemGroup>
+
+  <ItemGroup>
+    <None Include="Components\MusiqueComponent.razor.cs" />
+  </ItemGroup>
   
 </Project>