diff --git a/Component/Crafting.razor b/Component/Crafting.razor
new file mode 100644
index 0000000..65c9b93
--- /dev/null
+++ b/Component/Crafting.razor
@@ -0,0 +1,50 @@
+<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/Component/Crafting.razor.cs b/Component/Crafting.razor.cs
new file mode 100644
index 0000000..283ebd1
--- /dev/null
+++ b/Component/Crafting.razor.cs
@@ -0,0 +1,80 @@
+using Blazor.Models;
+using Microsoft.AspNetCore.Components;
+using Microsoft.JSInterop;
+using System.Collections.ObjectModel;
+using System.Collections.Specialized;
+
+namespace Blazor.Component
+{
+    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/Component/Crafting.razor.css b/Component/Crafting.razor.css
new file mode 100644
index 0000000..2a388f2
--- /dev/null
+++ b/Component/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/Component/Crafting.razor.js b/Component/Crafting.razor.js
new file mode 100644
index 0000000..8fdb58e
--- /dev/null
+++ b/Component/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/Component/CraftingItem.razor b/Component/CraftingItem.razor
index 2c0b429..e64e6cd 100644
--- a/Component/CraftingItem.razor
+++ b/Component/CraftingItem.razor
@@ -1,6 +1,4 @@
-@*@using Models;
-
-<div class="item"
+<div class="item"
      ondragover="event.preventDefault();"
      draggable="true"
      @ondragstart="@OnDragStart"
@@ -12,4 +10,4 @@
     {
         @Item.DisplayName
     }
-</div>*@
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/Component/CraftingItem.razor.cs b/Component/CraftingItem.razor.cs
index 17ce183..29a3a61 100644
--- a/Component/CraftingItem.razor.cs
+++ b/Component/CraftingItem.razor.cs
@@ -1,4 +1,4 @@
-/*using Blazor.Models;
+using Blazor.Models;
 using Blazorise;
 using Microsoft.AspNetCore.Components;
 
@@ -62,4 +62,3 @@ namespace Blazor.Component
         }
     }
 }
-*/
\ No newline at end of file
diff --git a/Component/CraftingItem.razor.css b/Component/CraftingItem.razor.css
new file mode 100644
index 0000000..e527d89
--- /dev/null
+++ b/Component/CraftingItem.razor.css
@@ -0,0 +1,6 @@
+.item {
+    width: 64px;
+    height: 64px;
+    border: 1px solid;
+    overflow: hidden;
+}
\ No newline at end of file
diff --git a/Component/MyFirstChildComponent.razor b/Component/MyFirstChildComponent.razor
new file mode 100644
index 0000000..592c4e4
--- /dev/null
+++ b/Component/MyFirstChildComponent.razor
@@ -0,0 +1,14 @@
+@code {
+    [Parameter]
+    public RenderFragment ChildContent { get; set; }
+
+    [CascadingParameter]
+    public MyRootComponent RootComponent { get; set; }
+}
+
+<div style="border: 1px solid black; padding: 10px;">
+    <strong>MyFirstChildComponent - @RootComponent.Text</strong>
+    <div>
+        @ChildContent
+    </div>
+</div>
\ No newline at end of file
diff --git a/Component/MyRootComponent.razor b/Component/MyRootComponent.razor
new file mode 100644
index 0000000..18895ba
--- /dev/null
+++ b/Component/MyRootComponent.razor
@@ -0,0 +1,16 @@
+@code {
+    [Parameter]
+    public RenderFragment ChildContent { get; set; }
+
+    [Parameter]
+    public string Text { get; set; }
+}
+
+<div style="border: 1px solid black; padding: 10px;">
+    <strong>MyRootComponent - @Text</strong>
+    <div>
+        <CascadingValue Value="@this">
+            @ChildContent
+        </CascadingValue>
+    </div>
+</div>
\ No newline at end of file
diff --git a/Component/MySecondChildComponent.razor b/Component/MySecondChildComponent.razor
new file mode 100644
index 0000000..7d207e6
--- /dev/null
+++ b/Component/MySecondChildComponent.razor
@@ -0,0 +1,14 @@
+@code {
+    [Parameter]
+    public RenderFragment ChildContent { get; set; }
+
+    [CascadingParameter]
+    public MyRootComponent RootComponent { get; set; }
+}
+
+<div style="border: 1px solid black; padding: 10px;">
+    <strong>MySecondChildComponent - @RootComponent.Text</strong>
+    <div>
+        @ChildContent
+    </div>
+</div>
\ No newline at end of file
diff --git a/Pages/Index.razor b/Pages/Index.razor
index 47f10bb..1894e7f 100644
--- a/Pages/Index.razor
+++ b/Pages/Index.razor
@@ -2,8 +2,6 @@
 @using System.Globalization
 @using Blazor.Component
 @using Blazor.Models;
-@using Component;
-@using Models;
 @using Blazor.Pages;
 
 <PageTitle>Index</PageTitle>
@@ -15,20 +13,6 @@ Welcome to your new app.
 <p>
     <b>CurrentCulture</b>: @CultureInfo.CurrentCulture
 </p>
-<ShowItems Items="Cakes" >
-    <ShowTemplate Context="CakeContext">
-        <div class="card text-center">
-            <div class="card-header">
-                Cake Token Id - @CakeContext.Id
-            </div>
-            <div class="card-body">
-                <h5 class="card-title">@CakeContext.Name</h5>
-                <p class="card-text">Price $@CakeContext.Cost</p>
-            </div>
-            <div class="card-footer text-muted">
-                Click Here
-            </div>
-        </div>
-    </ShowTemplate>
-</ShowItems>
-<SurveyPrompt Title="How is Blazor working for you?" />
+<div>
+    <Crafting Items="Items" Recipes="Recipes" />
+</div>
\ No newline at end of file
diff --git a/Pages/Index.razor.cs b/Pages/Index.razor.cs
index 2f8c5a6..6060a18 100644
--- a/Pages/Index.razor.cs
+++ b/Pages/Index.razor.cs
@@ -1,43 +1,32 @@
-using Blazor.Models;
+using Blazor.Component;
+using Blazor.Models;
+using Blazor.Services;
+using Microsoft.AspNetCore.Components;
 
 namespace Blazor.Pages
 {
     public partial class Index
     {
-        private Cake CakeItem = new Cake
-        {
-            Id = 1,
-            Name = "Black Forest",
-            Cost = 50
-        };
-        public List<Cake> Cakes { get; set; }
+        [Inject]
+        public IDataService DataService { get; set; }
 
-        protected override Task OnAfterRenderAsync(bool firstRender)
-        {
-            LoadCakes();
-            StateHasChanged();
-            return base.OnAfterRenderAsync(firstRender);
-        }
+        public List<Item> Items { get; set; } = new List<Item>();
 
-        public void LoadCakes()
-        {
-            Cakes = new List<Cake>
+        private List<CraftingRecipe> Recipes { get; set; } = new List<CraftingRecipe>();
+
+        protected override async Task OnAfterRenderAsync(bool firstRender)
         {
-            // items hidden for display purpose
-            new Cake
-            {
-                Id = 1,
-                Name = "Red Velvet",
-                Cost = 60
-            },
-            new Cake
+            base.OnAfterRenderAsync(firstRender);
+
+            if (!firstRender)
             {
-                Id = 2,
-                Name = "Tiramisu",
-                Cost= 1000000,
+                return;
             }
-        };
+
+            Items = await DataService.List(0, await DataService.Count());
+            Recipes = await DataService.GetRecipes();
+
+            StateHasChanged();
         }
     }
-
 }
diff --git a/Pages/_Layout.cshtml b/Pages/_Layout.cshtml
index 001f014..538b0a5 100644
--- a/Pages/_Layout.cshtml
+++ b/Pages/_Layout.cshtml
@@ -28,6 +28,8 @@
     </div>
 
     <script src="_framework/blazor.server.js"></script>
+    <script src="Component/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" />
diff --git a/Services/DataLocalService.cs b/Services/DataLocalService.cs
index 5282bf3..69c233a 100644
--- a/Services/DataLocalService.cs
+++ b/Services/DataLocalService.cs
@@ -1,4 +1,5 @@
-using Blazor.Factories;
+using Blazor.Component;
+using Blazor.Factories;
 using Blazor.Models;
 using Blazored.LocalStorage;
 using Microsoft.AspNetCore.Components;
@@ -181,5 +182,23 @@ namespace Blazor.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/Services/IDataService.cs b/Services/IDataService.cs
index 2d7dd8f..7568595 100644
--- a/Services/IDataService.cs
+++ b/Services/IDataService.cs
@@ -1,4 +1,5 @@
-using Blazor.Models;
+using Blazor.Component;
+using Blazor.Models;
 
 namespace Blazor.Services
 {
@@ -15,5 +16,6 @@ namespace Blazor.Services
         Task Update(int id, ItemModel model);
 
         Task Delete(int id);
+        Task<List<CraftingRecipe>> GetRecipes();
     }
 }