diff --git a/TutoBlazer/Components/Crafting.razor b/TutoBlazer/Components/Crafting.razor
new file mode 100644
index 0000000..a09261f
--- /dev/null
+++ b/TutoBlazer/Components/Crafting.razor
@@ -0,0 +1,52 @@
+
+
+<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/TutoBlazer/Components/Crafting.razor.cs b/TutoBlazer/Components/Crafting.razor.cs
new file mode 100644
index 0000000..3a033b7
--- /dev/null
+++ b/TutoBlazer/Components/Crafting.razor.cs
@@ -0,0 +1,80 @@
+using Microsoft.AspNetCore.Components;
+using Microsoft.JSInterop;
+using System.Collections.ObjectModel;
+using System.Collections.Specialized;
+using TutoBlazer.Models;
+
+namespace TutoBlazer.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/TutoBlazer/Components/Crafting.razor.css b/TutoBlazer/Components/Crafting.razor.css
new file mode 100644
index 0000000..2a388f2
--- /dev/null
+++ b/TutoBlazer/Components/Crafting.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/TutoBlazer/Components/Crafting.razor.js b/TutoBlazer/Components/Crafting.razor.js
new file mode 100644
index 0000000..8fdb58e
--- /dev/null
+++ b/TutoBlazer/Components/Crafting.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/TutoBlazer/Components/CraftingAction.cs b/TutoBlazer/Components/CraftingAction.cs
new file mode 100644
index 0000000..f39e620
--- /dev/null
+++ b/TutoBlazer/Components/CraftingAction.cs
@@ -0,0 +1,11 @@
+using TutoBlazer.Models;
+
+namespace TutoBlazer.Components
+{
+    public class CraftingAction
+    {
+        public string Action { get; set; }
+        public int Index { get; set; }
+        public Item Item { get; set; }
+    }
+}
diff --git a/TutoBlazer/Components/CraftingItem.razor b/TutoBlazer/Components/CraftingItem.razor
new file mode 100644
index 0000000..ddf25bf
--- /dev/null
+++ b/TutoBlazer/Components/CraftingItem.razor
@@ -0,0 +1,13 @@
+<div class="item"
+     ondragover="event.preventDefault();"
+     draggable="true"
+     @ondragstart="@OnDragStart"
+     @ondrop="@OnDrop"
+     @ondragenter="@OnDragEnter"
+     @ondragleave="@OnDragLeave">
+
+    @if (Item != null)
+    {
+        @Item.DisplayName
+    }
+</div>
diff --git a/TutoBlazer/Components/CraftingItem.razor.cs b/TutoBlazer/Components/CraftingItem.razor.cs
new file mode 100644
index 0000000..d70ed07
--- /dev/null
+++ b/TutoBlazer/Components/CraftingItem.razor.cs
@@ -0,0 +1,64 @@
+using Blazorise;
+using Microsoft.AspNetCore.Components;
+using TutoBlazer.Models;
+
+namespace TutoBlazer.Components
+{
+    public partial class CraftingItem
+    {
+        [Parameter]
+        public int Index { get; set; }
+
+        [Parameter]
+        public Item Item { get; set; }
+
+        [Parameter]
+        public bool NoDrop { get; set; }
+
+        [CascadingParameter]
+        public Crafting Parent { get; set; }
+
+        internal void OnDragEnter()
+        {
+            if (NoDrop)
+            {
+                return;
+            }
+
+            Parent.Actions.Add(new CraftingAction { Action = "Drag Enter", Item = this.Item, Index = this.Index });
+        }
+
+        internal void OnDragLeave()
+        {
+            if (NoDrop)
+            {
+                return;
+            }
+
+            Parent.Actions.Add(new CraftingAction { Action = "Drag Leave", Item = this.Item, Index = this.Index });
+        }
+
+        internal void OnDrop()
+        {
+            if (NoDrop)
+            {
+                return;
+            }
+
+            this.Item = Parent.CurrentDragItem;
+            Parent.RecipeItems[this.Index] = this.Item;
+
+            Parent.Actions.Add(new CraftingAction { Action = "Drop", Item = this.Item, Index = this.Index });
+
+            // Check recipe
+            Parent.CheckRecipe();
+        }
+
+        private void OnDragStart()
+        {
+            Parent.CurrentDragItem = this.Item;
+
+            Parent.Actions.Add(new CraftingAction { Action = "Drag Start", Item = this.Item, Index = this.Index });
+        }
+    }
+}
diff --git a/TutoBlazer/Components/CraftingItem.razor.css b/TutoBlazer/Components/CraftingItem.razor.css
new file mode 100644
index 0000000..b2d4521
--- /dev/null
+++ b/TutoBlazer/Components/CraftingItem.razor.css
@@ -0,0 +1,6 @@
+.item {
+    width: 64px;
+    height: 64px;
+    border: 1px solid;
+    overflow: hidden;
+}
diff --git a/TutoBlazer/Components/CraftingRecipe.cs b/TutoBlazer/Components/CraftingRecipe.cs
new file mode 100644
index 0000000..2fe2da7
--- /dev/null
+++ b/TutoBlazer/Components/CraftingRecipe.cs
@@ -0,0 +1,10 @@
+using TutoBlazer.Models;
+
+namespace TutoBlazer.Components
+{
+    public class CraftingRecipe
+    {
+        public Item Give { get; set; }
+        public List<List<string>> Have { get; set; }
+    }
+}
diff --git a/TutoBlazer/Pages/Index.razor b/TutoBlazer/Pages/Index.razor
index be00ca7..286963e 100644
--- a/TutoBlazer/Pages/Index.razor
+++ b/TutoBlazer/Pages/Index.razor
@@ -12,23 +12,7 @@ Welcome to your new app.
     <b>CurrentCulture</b>: @CultureInfo.CurrentCulture
 </p>
 
-<Card Item="CakeItem">
-    <CardHeader>
-        <div class="card-header">
-            Cake Token Number - @context.Id
-        </div>
-    </CardHeader>
-    <CardBody>
-        <div class="card-body">
-            <div>@context.Name</div>
-            <div>$ @context.Cost</div>
-        </div>
-    </CardBody>
-    <CardFooter>
-        <div class="card-footer text-muted">
-            Click Here
-        </div>
-    </CardFooter>
-</Card>
-
+<div>
+    <Crafting Items="Items" Recipes="Recipes" />
+</div>
 <SurveyPrompt Title="How is Blazor working for you?" />
diff --git a/TutoBlazer/Pages/Index.razor.cs b/TutoBlazer/Pages/Index.razor.cs
index ab999f4..f048fa4 100644
--- a/TutoBlazer/Pages/Index.razor.cs
+++ b/TutoBlazer/Pages/Index.razor.cs
@@ -1,14 +1,31 @@
-using TutoBlazer.Models;
+using Microsoft.AspNetCore.Components;
+using TutoBlazer.Components;
+using TutoBlazer.Models;
 
 namespace TutoBlazer.Pages
 {
     public partial class Index
     {
-        private Cake CakeItem = new Cake
+        [Inject]
+        public IDataService DataService { get; set; }
+
+        public List<Item> Items { get; set; } = new List<Item>();
+
+        private List<CraftingRecipe> Recipes { get; set; } = new List<CraftingRecipe>();
+
+        protected override async Task OnAfterRenderAsync(bool firstRender)
         {
-            Id = 1,
-            Name = "Black Forest",
-            Cost = 50
-        };
+            base.OnAfterRenderAsync(firstRender);
+
+            if (!firstRender)
+            {
+                return;
+            }
+
+            Items = await DataService.List(0, await DataService.Count());
+            Recipes = await DataService.GetRecipes();
+
+            StateHasChanged();
+        }
     }
 }
diff --git a/TutoBlazer/Pages/_Layout.cshtml b/TutoBlazer/Pages/_Layout.cshtml
index 33c480f..e2659a2 100644
--- a/TutoBlazer/Pages/_Layout.cshtml
+++ b/TutoBlazer/Pages/_Layout.cshtml
@@ -35,5 +35,6 @@
     <link href="_content/Blazorise.Bootstrap/blazorise.bootstrap.css" rel="stylesheet" />
     <link href="_content/Blazored.Modal/blazored-modal.css" rel="stylesheet" />
     <script src="_content/Blazored.Modal/blazored.modal.js"></script>
+    <script src="Components/Crafting.razor.js"></script>
 </body>
 </html>
diff --git a/TutoBlazer/Services/DataApiService.cs b/TutoBlazer/Services/DataApiService.cs
index 596d886..cd623eb 100644
--- a/TutoBlazer/Services/DataApiService.cs
+++ b/TutoBlazer/Services/DataApiService.cs
@@ -52,9 +52,9 @@ namespace TutoBlazer.Services
             await _http.DeleteAsync($"https://localhost:7234/api/Crafting/{id}");
         }
 
-        /*public async Task<List<CraftingRecipe>> GetRecipes()
+        public async Task<List<CraftingRecipe>> GetRecipes()
         {
             return await _http.GetFromJsonAsync<List<CraftingRecipe>>("https://localhost:7234/api/Crafting/recipe");
-        }*/
+        }
     }
 }
diff --git a/TutoBlazer/Services/DataLocalService.cs b/TutoBlazer/Services/DataLocalService.cs
index 4147f4c..643710c 100644
--- a/TutoBlazer/Services/DataLocalService.cs
+++ b/TutoBlazer/Services/DataLocalService.cs
@@ -1,5 +1,6 @@
 using Blazored.LocalStorage;
 using Microsoft.AspNetCore.Components;
+using TutoBlazer.Components;
 using TutoBlazer.Factories;
 using TutoBlazer.Models;
 
@@ -123,5 +124,24 @@ namespace TutoBlazer.Services
             // Save the data
             await _localStorage.SetItemAsync("data", currentData);
         }
+
+        public Task<List<CraftingRecipe>> GetRecipes()
+        {
+            var items = new List<CraftingRecipe>
+        {
+            new CraftingRecipe
+            {
+                Give = new Item { DisplayName = "Diamond", Name = "diamond" },
+                Have = new List<List<string>>
+                {
+                    new List<string> { "dirt", "dirt", "dirt" },
+                    new List<string> { "dirt", null, "dirt" },
+                    new List<string> { "dirt", "dirt", "dirt" }
+                }
+            }
+        };
+
+            return Task.FromResult(items);
+        }
     }
 }
diff --git a/TutoBlazer/Services/IDataService.cs b/TutoBlazer/Services/IDataService.cs
index bcd78b0..dc615e0 100644
--- a/TutoBlazer/Services/IDataService.cs
+++ b/TutoBlazer/Services/IDataService.cs
@@ -1,4 +1,5 @@
-using TutoBlazer.Models;
+using TutoBlazer.Components;
+using TutoBlazer.Models;
 
 public interface IDataService
 {
@@ -13,4 +14,6 @@ public interface IDataService
     Task Update(int id, ItemModel model);
 
     Task Delete(int id);
+
+    Task<List<CraftingRecipe>> GetRecipes();
 }
\ No newline at end of file