diff --git a/Blazor/Blazor/Components/Card.razor b/Blazor/Blazor/Components/Card.razor
new file mode 100644
index 0000000..a535aaa
--- /dev/null
+++ b/Blazor/Blazor/Components/Card.razor
@@ -0,0 +1,7 @@
+@typeparam TItem
+<h3>Card</h3>
+<div class="card text-center">
+    @CardHeader(Item)
+    @CardBody(Item)
+    @CardFooter
+</div>
\ No newline at end of file
diff --git a/Blazor/Blazor/Components/Card.razor.cs b/Blazor/Blazor/Components/Card.razor.cs
new file mode 100644
index 0000000..d375e03
--- /dev/null
+++ b/Blazor/Blazor/Components/Card.razor.cs
@@ -0,0 +1,19 @@
+using Microsoft.AspNetCore.Components;
+
+namespace Blazor.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/Blazor/Blazor/Components/ShowItems.razor b/Blazor/Blazor/Components/ShowItems.razor
new file mode 100644
index 0000000..62d31ba
--- /dev/null
+++ b/Blazor/Blazor/Components/ShowItems.razor
@@ -0,0 +1,11 @@
+@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/Blazor/Blazor/Components/ShowItems.razor.cs b/Blazor/Blazor/Components/ShowItems.razor.cs
new file mode 100644
index 0000000..068a509
--- /dev/null
+++ b/Blazor/Blazor/Components/ShowItems.razor.cs
@@ -0,0 +1,13 @@
+using Microsoft.AspNetCore.Components;
+
+namespace Blazor.Components
+{
+    public partial class ShowItems<TItem>
+    {
+        [Parameter]
+        public List<TItem> Items { get; set; }
+
+        [Parameter]
+        public RenderFragment<TItem> ShowTemplate { get; set; }
+    }
+}
diff --git a/Blazor/Blazor/Models/Cake.cs b/Blazor/Blazor/Models/Cake.cs
new file mode 100644
index 0000000..36587c3
--- /dev/null
+++ b/Blazor/Blazor/Models/Cake.cs
@@ -0,0 +1,9 @@
+namespace Blazor.Models
+{
+    public class Cake
+    {
+        public int Id { get; set; }
+        public string Name { get; set; }
+        public decimal Cost { get; set; }
+    }
+}
diff --git a/Blazor/Blazor/Pages/Index.razor b/Blazor/Blazor/Pages/Index.razor
index c5907d2..3aba0f3 100644
--- a/Blazor/Blazor/Pages/Index.razor
+++ b/Blazor/Blazor/Pages/Index.razor
@@ -1,5 +1,7 @@
 @page "/"
 @using System.Globalization
+@using Blazor.Components
+
 
 <PageTitle>Index</PageTitle>
 
@@ -12,3 +14,18 @@ Welcome to your new app.
 <p>
     <b>CurrentCulture</b>: @CultureInfo.CurrentCulture
 </p>
+
+
+<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>
diff --git a/Blazor/Blazor/Pages/Index.razor.cs b/Blazor/Blazor/Pages/Index.razor.cs
new file mode 100644
index 0000000..be574ee
--- /dev/null
+++ b/Blazor/Blazor/Pages/Index.razor.cs
@@ -0,0 +1,14 @@
+using Blazor.Models;
+
+namespace Blazor.Pages
+{
+    public partial class Index
+    {
+        private Cake CakeItem = new Cake
+        {
+            Id = 1,
+            Name = "Black Forest",
+            Cost = 50
+        };
+    }
+}
diff --git a/Blazor/Blazor/Pages/List.razor b/Blazor/Blazor/Pages/List.razor
index 55272c5..2f954fc 100644
--- a/Blazor/Blazor/Pages/List.razor
+++ b/Blazor/Blazor/Pages/List.razor
@@ -1,6 +1,6 @@
 @page "/list"
 @using Models
-@* <h3>@Localizer["Title"]</h3> *@
+<h3>@Localizer["Title"]</h3>
 
 ...
 
diff --git a/Blazor/Blazor/Pages/List.razor.cs b/Blazor/Blazor/Pages/List.razor.cs
index e6430f0..5a0a5ce 100644
--- a/Blazor/Blazor/Pages/List.razor.cs
+++ b/Blazor/Blazor/Pages/List.razor.cs
@@ -6,6 +6,7 @@ using Blazored.Modal;
 using Blazored.Modal.Services;
 using Blazorise.DataGrid;
 using Microsoft.AspNetCore.Components;
+using Microsoft.Extensions.Localization;
 
 namespace Blazor.Pages
 {
@@ -27,8 +28,8 @@ namespace Blazor.Pages
         [CascadingParameter]
         public IModalService Modal { get; set; }
 
-        //[Inject]
-        //public IStringLocalizer<List> Localizer { get; set; }
+        [Inject]
+        public IStringLocalizer<List> Localizer { get; set; }
 
         private async Task OnReadData(DataGridReadDataEventArgs<Item> e)
         {