diff --git a/BlazorTp1/Components/Card.razor b/BlazorTp1/Components/Card.razor
index d2fe1aa..00d680f 100644
--- a/BlazorTp1/Components/Card.razor
+++ b/BlazorTp1/Components/Card.razor
@@ -1,5 +1,6 @@
-<h3>Card</h3>
-
-@code {
-
-}
+@typeparam TItem
+<div class="card text-center">
+    @CardHeader(Item)
+    @CardBody(Item)
+    @CardFooter
+</div>
diff --git a/BlazorTp1/Components/Card.razor.cs b/BlazorTp1/Components/Card.razor.cs
new file mode 100644
index 0000000..03dc91e
--- /dev/null
+++ b/BlazorTp1/Components/Card.razor.cs
@@ -0,0 +1,21 @@
+using Blazorise;
+using BlazorTp1.Models;
+using Microsoft.AspNetCore.Components;
+
+namespace BlazorTp1.Components
+{
+    public partial class Card<TItem>
+    {
+        [Parameter]
+        public RenderFragment<TItem> CardBody { get; set; }
+
+        [Parameter]
+        public RenderFragment CardFooter { get; set; }
+
+        [Parameter]
+        public RenderFragment<TItem> CardHeader { get; set; }
+
+        [Parameter]
+        public TItem Item { get; set; }
+    }
+}
diff --git a/BlazorTp1/Components/Crafting.razor b/BlazorTp1/Components/Crafting.razor
index b6c8ec7..0aacb92 100644
--- a/BlazorTp1/Components/Crafting.razor
+++ b/BlazorTp1/Components/Crafting.razor
@@ -41,7 +41,6 @@
                     <CraftingItem Item="RecipeResult"/>
                 </div>
             </div>
-
             <div class="col-12">
                 <div>Actions</div>
                 <div class="actions" id="actions">
diff --git a/BlazorTp1/Components/Crafting.razor.cs b/BlazorTp1/Components/Crafting.razor.cs
index 8f7d934..4282903 100644
--- a/BlazorTp1/Components/Crafting.razor.cs
+++ b/BlazorTp1/Components/Crafting.razor.cs
@@ -25,10 +25,6 @@ namespace BlazorTp1.Components
 
         public List<Item> RecipeItems { get; set; }
 
-        //se der ruim tirar esse attributo
-        [CascadingParameter]
-        public Crafting Parent { get; set; }
-
         public Item RecipeResult
         {
             get => this._recipeResult;
@@ -47,7 +43,6 @@ namespace BlazorTp1.Components
         [Parameter]
         public List<CraftingRecipe> Recipes { get; set; }
 
-
         /// <summary>
         /// Gets or sets the java script runtime.
         /// </summary>
diff --git a/BlazorTp1/Components/CraftingItem.razor.css b/BlazorTp1/Components/CraftingItem.razor.css
new file mode 100644
index 0000000..b2d4521
--- /dev/null
+++ b/BlazorTp1/Components/CraftingItem.razor.css
@@ -0,0 +1,6 @@
+.item {
+    width: 64px;
+    height: 64px;
+    border: 1px solid;
+    overflow: hidden;
+}
diff --git a/BlazorTp1/Components/ShowItems.razor b/BlazorTp1/Components/ShowItems.razor
new file mode 100644
index 0000000..7739061
--- /dev/null
+++ b/BlazorTp1/Components/ShowItems.razor
@@ -0,0 +1,12 @@
+@typeparam TItem
+
+<div>
+    @if ((Items?.Count ?? 0) != 0)
+    {
+        @foreach (var item in Items)
+        {
+            @ShowTemplate(item)
+            ;
+        }
+    }
+</div>
\ No newline at end of file
diff --git a/BlazorTp1/Components/ShowItems.razor.cs b/BlazorTp1/Components/ShowItems.razor.cs
new file mode 100644
index 0000000..a452fcc
--- /dev/null
+++ b/BlazorTp1/Components/ShowItems.razor.cs
@@ -0,0 +1,13 @@
+using Microsoft.AspNetCore.Components;
+
+namespace BlazorTp1.Components
+{
+    public partial class ShowItems<TItem>
+    {
+        [Parameter]
+        public List<TItem> Items { get; set; }
+
+        [Parameter]
+        public RenderFragment<TItem> ShowTemplate { get; set; }
+    }
+}
diff --git a/BlazorTp1/Pages/Index.razor b/BlazorTp1/Pages/Index.razor
index 2e2907d..b0e6e78 100644
--- a/BlazorTp1/Pages/Index.razor
+++ b/BlazorTp1/Pages/Index.razor
@@ -1,5 +1,6 @@
 @page "/"
 @using System.Globalization
+@using BlazorTp1.Components
 
 <PageTitle>Index</PageTitle>
 
@@ -15,24 +16,6 @@ Welcome to your new app.
     <Crafting Items="Items" Recipes="Recipes" />
 </div>
 
-<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>
-
 
 
 <SurveyPrompt Title="How is Blazor working for you?" />
diff --git a/BlazorTp1/Pages/Index.razor.cs b/BlazorTp1/Pages/Index.razor.cs
index 1a5c3f8..36832ff 100644
--- a/BlazorTp1/Pages/Index.razor.cs
+++ b/BlazorTp1/Pages/Index.razor.cs
@@ -7,18 +7,25 @@ namespace BlazorTp1.Pages
     public partial class Index
     {
         [Inject]
-        public IDataService DataService { get; set; }
+        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 OnInitializedAsync()
+        protected override async Task OnAfterRenderAsync(bool firstRender)
         {
-            await base.OnInitializedAsync();
+            base.OnAfterRenderAsync(firstRender);
+
+            if (!firstRender)
+            {
+                return;
+            }
 
             Items = await DataService.List(0, await DataService.Count());
             Recipes = await DataService.GetRecipes();
+
+            StateHasChanged();
         }
     }
 }