diff --git a/BlazorTest1/Components/Card.razor.cs b/BlazorTest1/Components/Card.razor.cs
index 491383c..3cc7509 100644
--- a/BlazorTest1/Components/Card.razor.cs
+++ b/BlazorTest1/Components/Card.razor.cs
@@ -1,14 +1,18 @@
-public partial class Card<TItem>
+using Microsoft.AspNetCore.Components;
+namespace BlazorTest1.Components
 {
-    [Parameter]
-    public RenderFragment<TItem> CardBody { get; set; }
+    public partial class Card<TItem>
+    {
+        [Parameter]
+        public RenderFragment<TItem> CardBody { get; set; }
 
-    [Parameter]
-    public RenderFragment CardFooter { get; set; }
+        [Parameter]
+        public RenderFragment CardFooter { get; set; }
 
-    [Parameter]
-    public RenderFragment<TItem> CardHeader { get; set; }
+        [Parameter]
+        public RenderFragment<TItem> CardHeader { get; set; }
 
-    [Parameter]
-    public TItem Item { get; set; }
-}
\ No newline at end of file
+        [Parameter]
+        public TItem Item { get; set; }
+    }
+}
diff --git a/BlazorTest1/Components/Crafting.razor b/BlazorTest1/Components/Crafting.razor
index 774d351..ae59dfc 100644
--- a/BlazorTest1/Components/Crafting.razor
+++ b/BlazorTest1/Components/Crafting.razor
@@ -13,7 +13,6 @@
                         }
                     </div>
                 </div>
-
             </div>
 
             <div class="col-6">
diff --git a/BlazorTest1/Components/Crafting.razor.cs b/BlazorTest1/Components/Crafting.razor.cs
new file mode 100644
index 0000000..9e3c0a2
--- /dev/null
+++ b/BlazorTest1/Components/Crafting.razor.cs
@@ -0,0 +1,80 @@
+using BlazorTest1.Models;
+using Microsoft.AspNetCore.Components;
+using Microsoft.JSInterop;
+using System.Collections.ObjectModel;
+using System.Collections.Specialized;
+
+namespace BlazorTest1.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/BlazorTest1/Components/Crafting.razor.css b/BlazorTest1/Components/Crafting.razor.css
new file mode 100644
index 0000000..1c0cb8b
--- /dev/null
+++ b/BlazorTest1/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/BlazorTest1/Components/Crafting.razor.js b/BlazorTest1/Components/Crafting.razor.js
new file mode 100644
index 0000000..3fcb76d
--- /dev/null
+++ b/BlazorTest1/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/BlazorTest1/Components/CraftingAction.cs b/BlazorTest1/Components/CraftingAction.cs
index c18cbcb..877dd17 100644
--- a/BlazorTest1/Components/CraftingAction.cs
+++ b/BlazorTest1/Components/CraftingAction.cs
@@ -1,6 +1,10 @@
-public class CraftingAction
+using BlazorTest1.Models;
+namespace BlazorTest1.Components
 {
-    public string Action { get; set; }
-    public int Index { get; set; }
-    public Item Item { get; set; }
+    public class CraftingAction
+    {
+        public string Action { get; set; }
+        public int Index { get; set; }
+        public Item Item { get; set; }
+    }
 }
\ No newline at end of file
diff --git a/BlazorTest1/Components/CraftingItem.razor b/BlazorTest1/Components/CraftingItem.razor
index db4ca36..8a7a5fd 100644
--- a/BlazorTest1/Components/CraftingItem.razor
+++ b/BlazorTest1/Components/CraftingItem.razor
@@ -1,4 +1,5 @@
-<div
+
+<div
     class="item"
     ondragover="event.preventDefault();"
     draggable="true"
diff --git a/BlazorTest1/Components/CraftingItem.razor.cs b/BlazorTest1/Components/CraftingItem.razor.cs
index b8a34d8..4df6569 100644
--- a/BlazorTest1/Components/CraftingItem.razor.cs
+++ b/BlazorTest1/Components/CraftingItem.razor.cs
@@ -1,60 +1,63 @@
-using BlazorTest1.Components;
-using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components;
+using BlazorTest1.Models;
 
-public partial class CraftingItem
+namespace BlazorTest1.Components
 {
-    [Parameter]
-    public int Index { get; set; }
+    public partial class CraftingItem
+    {
+        [Parameter]
+        public int Index { get; set; }
 
-    [Parameter]
-    public Item Item { get; set; }
+        [Parameter]
+        public Item Item { get; set; }
 
-    [Parameter]
-    public bool NoDrop { get; set; }
+        [Parameter]
+        public bool NoDrop { get; set; }
 
-    [CascadingParameter]
-    public Crafting Parent { get; set; }
+        [CascadingParameter]
+        public Crafting Parent { get; set; }
 
-    internal void OnDragEnter()
-    {
-        if (NoDrop)
+        internal void OnDragEnter()
         {
-            return;
-        }
+            if (NoDrop)
+            {
+                return;
+            }
 
-        Parent.Actions.Add(new CraftingAction { Action = "Drag Enter", Item = this.Item, Index = this.Index });
-    }
+            Parent.Actions.Add(new CraftingAction { Action = "Drag Enter", Item = this.Item, Index = this.Index });
+        }
 
-    internal void OnDragLeave()
-    {
-        if (NoDrop)
+        internal void OnDragLeave()
         {
-            return;
-        }
+            if (NoDrop)
+            {
+                return;
+            }
 
-        Parent.Actions.Add(new CraftingAction { Action = "Drag Leave", Item = this.Item, Index = this.Index });
-    }
+            Parent.Actions.Add(new CraftingAction { Action = "Drag Leave", Item = this.Item, Index = this.Index });
+        }
 
-    internal void OnDrop()
-    {
-        if (NoDrop)
+        internal void OnDrop()
         {
-            return;
-        }
+            if (NoDrop)
+            {
+                return;
+            }
 
-        this.Item = Parent.CurrentDragItem;
-        Parent.RecipeItems[this.Index] = this.Item;
+            this.Item = Parent.CurrentDragItem;
+            Parent.RecipeItems[this.Index] = this.Item;
 
-        Parent.Actions.Add(new CraftingAction { Action = "Drop", Item = this.Item, Index = this.Index });
+            Parent.Actions.Add(new CraftingAction { Action = "Drop", Item = this.Item, Index = this.Index });
 
-        // Check recipe
-        Parent.CheckRecipe();
-    }
+            // Check recipe
+            Parent.CheckRecipe();
+        }
 
-    private void OnDragStart()
-    {
-        Parent.CurrentDragItem = this.Item;
+        private void OnDragStart()
+        {
+            Parent.CurrentDragItem = this.Item;
 
-        Parent.Actions.Add(new CraftingAction { Action = "Drag Start", Item = this.Item, Index = this.Index });
+            Parent.Actions.Add(new CraftingAction { Action = "Drag Start", Item = this.Item, Index = this.Index });
+        }
     }
 }
\ No newline at end of file
diff --git a/BlazorTest1/Components/CraftingItem.razor.css b/BlazorTest1/Components/CraftingItem.razor.css
new file mode 100644
index 0000000..1499794
--- /dev/null
+++ b/BlazorTest1/Components/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/BlazorTest1/Components/CraftingRecipe.cs b/BlazorTest1/Components/CraftingRecipe.cs
index df56fa2..6ef146b 100644
--- a/BlazorTest1/Components/CraftingRecipe.cs
+++ b/BlazorTest1/Components/CraftingRecipe.cs
@@ -1,4 +1,5 @@
-public class CraftingRecipe
+using BlazorTest1.Models;
+public class CraftingRecipe
 {
     public Item Give { get; set; }
     public List<List<string>> Have { get; set; }
diff --git a/BlazorTest1/Components/MyFirstChildComponent.razor b/BlazorTest1/Components/MyFirstChildComponent.razor
new file mode 100644
index 0000000..0417cc9
--- /dev/null
+++ b/BlazorTest1/Components/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/BlazorTest1/Components/MyRootComponent.razor b/BlazorTest1/Components/MyRootComponent.razor
new file mode 100644
index 0000000..9d78106
--- /dev/null
+++ b/BlazorTest1/Components/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/BlazorTest1/Components/MySecondChildComponent.razor b/BlazorTest1/Components/MySecondChildComponent.razor
new file mode 100644
index 0000000..e54a948
--- /dev/null
+++ b/BlazorTest1/Components/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/BlazorTest1/Components/ShowItems.razor.cs b/BlazorTest1/Components/ShowItems.razor.cs
index 0b82251..6e2bbb5 100644
--- a/BlazorTest1/Components/ShowItems.razor.cs
+++ b/BlazorTest1/Components/ShowItems.razor.cs
@@ -1,8 +1,12 @@
-public partial class ShowItems<TItem>
+using Microsoft.AspNetCore.Components;
+namespace BlazorTest1.Components
 {
-    [Parameter]
-    public List<TItem> Items { get; set; }
+    public partial class ShowItems<TItem>
+    {
+        [Parameter]
+        public List<TItem> Items { get; set; }
 
-    [Parameter]
-    public RenderFragment<TItem> ShowTemplate { get; set; }
+        [Parameter]
+        public RenderFragment<TItem> ShowTemplate { get; set; }
+    }
 }
\ No newline at end of file
diff --git a/BlazorTest1/Modals/DeleteConfirmation.razor.cs b/BlazorTest1/Modals/DeleteConfirmation.razor.cs
index 2a6c375..cc1f5b8 100644
--- a/BlazorTest1/Modals/DeleteConfirmation.razor.cs
+++ b/BlazorTest1/Modals/DeleteConfirmation.razor.cs
@@ -1,29 +1,38 @@
-public partial class DeleteConfirmation
+using Blazored.Modal;
+using Blazored.Modal.Services;
+using BlazorTest1.Models;
+using BlazorTest1.Services;
+using Microsoft.AspNetCore.Components;
+
+namespace BlazorTest1.Modals
 {
-    [CascadingParameter]
-    public BlazoredModalInstance ModalInstance { get; set; }
+    public partial class DeleteConfirmation
+    {
+        [CascadingParameter]
+        public BlazoredModalInstance ModalInstance { get; set; }
 
-    [Inject]
-    public IDataService DataService { get; set; }
+        [Inject]
+        public IDataService DataService { get; set; }
 
-    [Parameter]
-    public int Id { get; set; }
+        [Parameter]
+        public int Id { get; set; }
 
-    private Item item = new Item();
+        private Item item = new Item();
 
-    protected override async Task OnInitializedAsync()
-    {
-        // Get the item
-        item = await DataService.GetById(Id);
-    }
+        protected override async Task OnInitializedAsync()
+        {
+            // Get the item
+            item = await DataService.GetById(Id);
+        }
 
-    void ConfirmDelete()
-    {
-        ModalInstance.CloseAsync(ModalResult.Ok(true));
-    }
+        void ConfirmDelete()
+        {
+            ModalInstance.CloseAsync(ModalResult.Ok(true));
+        }
 
-    void Cancel()
-    {
-        ModalInstance.CancelAsync();
+        void Cancel()
+        {
+            ModalInstance.CancelAsync();
+        }
     }
 }
\ No newline at end of file
diff --git a/BlazorTest1/Models/Cake.cs b/BlazorTest1/Models/Cake.cs
index 5298adf..692b838 100644
--- a/BlazorTest1/Models/Cake.cs
+++ b/BlazorTest1/Models/Cake.cs
@@ -1,6 +1,9 @@
-public class Cake
+namespace BlazorTest1.Models
 {
-    public int Id { get; set; }
-    public string Name { get; set; }
-    public decimal Cost { get; set; }
+    public class Cake
+    {
+        public int Id { get; set; }
+        public string Name { get; set; }
+        public decimal Cost { get; set; }
+    }
 }
\ No newline at end of file
diff --git a/BlazorTest1/Models/Item.cs b/BlazorTest1/Models/Item.cs
index 407ae3a..25f716e 100644
--- a/BlazorTest1/Models/Item.cs
+++ b/BlazorTest1/Models/Item.cs
@@ -1,12 +1,15 @@
-public class Item
+namespace BlazorTest1.Models
 {
-    public int Id { get; set; }
-    public string DisplayName { get; set; }
-    public string Name { get; set; }
-    public int StackSize { get; set; }
-    public int MaxDurability { get; set; }
-    public List<string> EnchantCategories { get; set; }
-    public List<string> RepairWith { get; set; }
-    public DateTime CreatedDate { get; set; }
-    public DateTime? UpdatedDate { get; set; }
+    public class Item
+    {
+        public int Id { get; set; }
+        public string DisplayName { get; set; }
+        public string Name { get; set; }
+        public int StackSize { get; set; }
+        public int MaxDurability { get; set; }
+        public List<string> EnchantCategories { get; set; }
+        public List<string> RepairWith { get; set; }
+        public DateTime CreatedDate { get; set; }
+        public DateTime? UpdatedDate { get; set; }
+    }
 }
\ No newline at end of file
diff --git a/BlazorTest1/Pages/CallJsExample1.razor b/BlazorTest1/Pages/CallJsExample1.razor
new file mode 100644
index 0000000..441fe3e
--- /dev/null
+++ b/BlazorTest1/Pages/CallJsExample1.razor
@@ -0,0 +1,35 @@
+@page "/call-js-example-1"
+@inject IJSRuntime JS
+
+<h1>Call JS <code>convertArray</code> Function</h1>
+
+<p>
+    <button @onclick="ConvertArray">Convert Array</button>
+</p>
+
+<p>
+    @text
+</p>
+
+<p>
+    <a href="https://www.imdb.com/title/tt0379786/" target="_blank">Serenity</a><br>
+    <a href="https://www.imdb.com/name/nm0472710/" target="_blank">David Krumholtz on IMDB</a>
+</p>
+
+@code {
+    private MarkupString text;
+
+    private uint[] quoteArray = 
+        new uint[]
+        {
+            60, 101, 109, 62, 67, 97, 110, 39, 116, 32, 115, 116, 111, 112, 32,
+            116, 104, 101, 32, 115, 105, 103, 110, 97, 108, 44, 32, 77, 97,
+            108, 46, 60, 47, 101, 109, 62, 32, 45, 32, 77, 114, 46, 32, 85, 110,
+            105, 118, 101, 114, 115, 101, 10, 10,
+        };
+
+    private async Task ConvertArray()
+    {
+        text = new(await JS.InvokeAsync<string>("convertArray", quoteArray));
+    }
+}
\ No newline at end of file
diff --git a/BlazorTest1/Pages/CallJsExample3.razor b/BlazorTest1/Pages/CallJsExample3.razor
new file mode 100644
index 0000000..80916e7
--- /dev/null
+++ b/BlazorTest1/Pages/CallJsExample3.razor
@@ -0,0 +1,36 @@
+@page "/call-js-example-3"
+@inject IJSRuntime JS
+
+<h1>Call JS Example 3</h1>
+
+<p>
+    <button @onclick="SetStock">Set Stock</button>
+</p>
+
+@if (stockSymbol is not null)
+{
+    <p>@stockSymbol price: @price.ToString("c")</p>
+}
+
+@if (result is not null)
+{
+    <p>@result</p>
+}
+
+@code {
+    private Random r = new();
+    private string? stockSymbol;
+    private decimal price;
+    private string? result;
+
+    private async Task SetStock()
+    {
+        stockSymbol = 
+            $"{(char)('A' + r.Next(0, 26))}{(char)('A' + r.Next(0, 26))}";
+        price = r.Next(1, 101);
+        var interopResult = 
+            await JS.InvokeAsync<string>("displayTickerAlert2", stockSymbol, price);
+        result = $"Result of TickerChanged call for {stockSymbol} at " +
+            $"{price.ToString("c")}: {interopResult}";
+    }
+}
\ No newline at end of file
diff --git a/BlazorTest1/Pages/Index.razor b/BlazorTest1/Pages/Index.razor
index ce193c3..1a8612e 100644
--- a/BlazorTest1/Pages/Index.razor
+++ b/BlazorTest1/Pages/Index.razor
@@ -1,113 +1,3 @@
-@page "/"
-@using System.Globalization
-
-<PageTitle>Index</PageTitle>
-
-<h1>Hello, world!</h1>
-
-Welcome to your new app.
-
-<p>
-    <b>CurrentCulture</b>: @CultureInfo.CurrentCulture
-</p>
-
-<Card>
-    <CardHeader>
-        <div class="card-header">
-           My Templated Component
-        </div>
-    </CardHeader>
-    <CardBody>
-        <div class="card-body">
-            <h5>Welcome To Template Component</h5>
-        </div>
-    </CardBody>
-    <CardFooter>
-        <div class="card-footer text-muted">
-            Click Here
-        </div>
-    </CardFooter>
-</Card>
-
-<Card>
-    <CardHeader>
-        <div class="card-header">
-            Templated Component
-        </div>
-    </CardHeader>
-    <CardHeader>
-        <div class="card-header">
-            Hi I'm duplicated header
-        </div>
-    </CardHeader>
-</Card>
-
-<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>
-
-<Card Item="CakeItem" Context="cakeContext">
-    <CardHeader>
-        <div class="card-header">
-            Cake Token Number - @cakeContext.Id
-        </div>
-    </CardHeader>
-    <CardBody>
-        <div class="card-body">
-            <div>@cakeContext.Name</div>
-            <div>$ @cakeContext.Cost</div>
-        </div>
-    </CardBody>
-</Card>
-
-<Card Item="CakeItem">
-    <CardHeader Context="headContext">
-        <div class="card-header">
-            Cake Token Number - @headContext.Id
-        </div>
-    </CardHeader>
-    <CardBody Context="bodyContext">
-        <div class="card-body">
-            <div>@bodyContext.Name</div>
-            <div>$ @bodyContext.Cost</div>
-        </div>
-    </CardBody>
-</Card>
-
-<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>
-
-<TestRenderFragment>
-    <div>Content of my TestRenderFragment</div>
-</TestRenderFragment>
-
-<SurveyPrompt Title="How is Blazor working for you?" />
+<div>
+    <Crafting Items="Items" Recipes="Recipes" />
+</div>
\ No newline at end of file
diff --git a/BlazorTest1/Pages/Index.razor.cs b/BlazorTest1/Pages/Index.razor.cs
index 60084cf..614409b 100644
--- a/BlazorTest1/Pages/Index.razor.cs
+++ b/BlazorTest1/Pages/Index.razor.cs
@@ -1,33 +1,30 @@
-public partial class Index
-{
-    ...
-    
-    public List<Cake> Cakes { get; set; }
+using BlazorTest1.Models;
+using BlazorTest1.Services;
+using Microsoft.AspNetCore.Components;
 
-    protected override Task OnAfterRenderAsync(bool firstRender)
+namespace BlazorTest1.Pages {
+    public partial class Index
     {
-        LoadCakes();
-        StateHasChanged();
-        return base.OnAfterRenderAsync(firstRender);
-    }
+        [Inject]
+        public IDataService DataService { get; set; }
 
-    public void LoadCakes()
-    {
-        Cakes = new List<Cake>
+        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)
         {
-            // items hidden for display purpose
-            new Cake
+            base.OnAfterRenderAsync(firstRender);
+
+            if (!firstRender)
             {
-                Id = 1,
-                Name = "Red Velvet",
-                Cost = 60
-            },
-        };
+                return;
+            }
+
+            Items = await DataService.List(0, await DataService.Count());
+            Recipes = await DataService.GetRecipes();
+
+            StateHasChanged();
+        }
     }
-    private Cake CakeItem = new Cake
-    {
-        Id = 1,
-        Name = "Black Forest",
-        Cost = 50
-    };
 }
\ No newline at end of file
diff --git a/BlazorTest1/Pages/List.razor.cs b/BlazorTest1/Pages/List.razor.cs
index 4fa0070..13bc312 100644
--- a/BlazorTest1/Pages/List.razor.cs
+++ b/BlazorTest1/Pages/List.razor.cs
@@ -2,6 +2,8 @@
 using Blazored.Modal;
 using Blazored.Modal.Services;
 using Blazorise.DataGrid;
+using BlazorTest1.Modals;
+using BlazorTest1.Models;
 using BlazorTest1.Services;
 using Microsoft.AspNetCore.Components;
 using Microsoft.Extensions.Localization;
diff --git a/BlazorTest1/Pages/_Layout.cshtml b/BlazorTest1/Pages/_Layout.cshtml
index b6fd86e..1b8254f 100644
--- a/BlazorTest1/Pages/_Layout.cshtml
+++ b/BlazorTest1/Pages/_Layout.cshtml
@@ -7,6 +7,7 @@
 <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>
 <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
diff --git a/BlazorTest1/Services/DataLocalService.cs b/BlazorTest1/Services/DataLocalService.cs
index d1f9685..58df09c 100644
--- a/BlazorTest1/Services/DataLocalService.cs
+++ b/BlazorTest1/Services/DataLocalService.cs
@@ -179,5 +179,23 @@ namespace BlazorTest1.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/BlazorTest1/Services/IDataServices.cs b/BlazorTest1/Services/IDataServices.cs
index a5594dd..f0ac554 100644
--- a/BlazorTest1/Services/IDataServices.cs
+++ b/BlazorTest1/Services/IDataServices.cs
@@ -13,6 +13,9 @@ namespace BlazorTest1.Services
         Task<Item> GetById(int id);
 
         Task Update(int id, ItemModel model);
+
         Task Delete(int id);
+
+        Task<List<CraftingRecipe>> GetRecipes();
     }
-}
+}
\ No newline at end of file
diff --git a/BlazorTest1/_Imports.razor b/BlazorTest1/_Imports.razor
index 98a919d..2efcd9e 100644
--- a/BlazorTest1/_Imports.razor
+++ b/BlazorTest1/_Imports.razor
@@ -9,3 +9,9 @@
 @using BlazorTest1
 @using BlazorTest1.Shared
 @using Blazorise.DataGrid
+@using Blazorise.Components
+@using BlazorTest1.Components
+@using BlazorTest1.Models
+@using BlazorTest1.Modals
+@using BlazorTest1.Pages
+@using BlazorTest1.Data
\ No newline at end of file