diff --git a/BlazorProject/Components/Card.razor b/BlazorProject/Components/Card.razor
new file mode 100644
index 0000000..b474fdc
--- /dev/null
+++ b/BlazorProject/Components/Card.razor
@@ -0,0 +1,6 @@
+@typeparam TItem
+<div class="card text-center">
+    @CardHeader(Item)
+    @CardBody(Item)
+    @CardFooter
+</div>
\ No newline at end of file
diff --git a/BlazorProject/Components/Card.razor.cs b/BlazorProject/Components/Card.razor.cs
new file mode 100644
index 0000000..10798ef
--- /dev/null
+++ b/BlazorProject/Components/Card.razor.cs
@@ -0,0 +1,18 @@
+using Microsoft.AspNetCore.Components;
+
+namespace BlazorProject.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; }
+}
\ No newline at end of file
diff --git a/BlazorProject/Components/ShowItems.razor b/BlazorProject/Components/ShowItems.razor
new file mode 100644
index 0000000..c1820e4
--- /dev/null
+++ b/BlazorProject/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/BlazorProject/Components/ShowItems.razor.cs b/BlazorProject/Components/ShowItems.razor.cs
new file mode 100644
index 0000000..9e0e0e2
--- /dev/null
+++ b/BlazorProject/Components/ShowItems.razor.cs
@@ -0,0 +1,12 @@
+using Microsoft.AspNetCore.Components;
+
+namespace BlazorProject.Components;
+
+public partial class ShowItems<TItem>
+{
+    [Parameter]
+    public List<TItem> Items { get; set; }
+
+    [Parameter]
+    public RenderFragment<TItem> ShowTemplate { get; set; }
+}
\ No newline at end of file
diff --git a/BlazorProject/Layout/MainLayout.razor b/BlazorProject/Layout/MainLayout.razor
index ab1a579..2020ed2 100644
--- a/BlazorProject/Layout/MainLayout.razor
+++ b/BlazorProject/Layout/MainLayout.razor
@@ -1,5 +1,6 @@
 @using System.Globalization
 @using BlazorProject.Pages
+@using BlazorProject.Components
 @inherits LayoutComponentBase
 <div class="page">
     <div class="sidebar">
@@ -14,9 +15,42 @@
                 <b>CurrentCulture</b>: @CultureInfo.CurrentCulture
             </p>
         </div>
-
         <article class="content px-4">
             @Body
         </article>
     </main>
+    <!--<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>-->
+    <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>
 </div>
diff --git a/BlazorProject/Layout/MainLayout.razor.cs b/BlazorProject/Layout/MainLayout.razor.cs
new file mode 100644
index 0000000..35ee323
--- /dev/null
+++ b/BlazorProject/Layout/MainLayout.razor.cs
@@ -0,0 +1,36 @@
+using BlazorProject.Models;
+
+namespace BlazorProject.Layout;
+
+public partial class MainLayout
+{
+    public List<Cake> Cakes { get; set; }
+
+    protected override Task OnAfterRenderAsync(bool firstRender)
+    {
+        LoadCakes();
+        StateHasChanged();
+        return base.OnAfterRenderAsync(firstRender);
+    }
+
+    public void LoadCakes()
+    {
+        Cakes = new List<Cake>
+        {
+            // items hidden for display purpose
+            new Cake
+            {
+                Id = 1,
+                Name = "Red Velvet",
+                Cost = 60
+            },
+            new Cake
+            {
+                Id = 2,
+                Name = "Black Forest",
+                Cost = 50
+            },
+        };
+    }
+
+}
\ No newline at end of file
diff --git a/BlazorProject/Layout/TableTemplate.razor b/BlazorProject/Layout/TableTemplate.razor
new file mode 100644
index 0000000..39ee6ed
--- /dev/null
+++ b/BlazorProject/Layout/TableTemplate.razor
@@ -0,0 +1,28 @@
+@typeparam TItem
+@using System.Diagnostics.CodeAnalysis
+
+<table class="table">
+    <thead>
+        <tr>@TableHeader</tr>
+    </thead>
+    <tbody>
+        @foreach (var item in Items)
+        {
+            if (RowTemplate is not null)
+            {
+                <tr>@RowTemplate(item)</tr>
+            }
+        }
+    </tbody>
+</table>
+
+@code {
+    [Parameter]
+    public RenderFragment? TableHeader { get; set; }
+
+    [Parameter]
+    public RenderFragment<TItem>? RowTemplate { get; set; }
+
+    [Parameter, AllowNull]
+    public IReadOnlyList<TItem> Items { get; set; }
+}
\ No newline at end of file
diff --git a/BlazorProject/Models/Cake.cs b/BlazorProject/Models/Cake.cs
new file mode 100644
index 0000000..987227d
--- /dev/null
+++ b/BlazorProject/Models/Cake.cs
@@ -0,0 +1,8 @@
+namespace BlazorProject.Models;
+
+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/BlazorProject/Pages/Pets1.razor b/BlazorProject/Pages/Pets1.razor
new file mode 100644
index 0000000..89d973a
--- /dev/null
+++ b/BlazorProject/Pages/Pets1.razor
@@ -0,0 +1,29 @@
+@page "/pets1"
+
+<h1>Pets</h1>
+
+<TableTemplate Items="pets" Context="pet">
+    <TableHeader>
+        <th>ID</th>
+        <th>Name</th>
+    </TableHeader>
+    <RowTemplate>
+        <td>@pet.PetId</td>
+        <td>@pet.Name</td>
+    </RowTemplate>
+</TableTemplate>
+
+@code {
+    private List<Pet> pets = new()
+    {
+        new Pet { PetId = 2, Name = "Mr. Bigglesworth" },
+        new Pet { PetId = 4, Name = "Salem Saberhagen" },
+        new Pet { PetId = 7, Name = "K-9" }
+    };
+
+    private class Pet
+    {
+        public int PetId { get; set; }
+        public string? Name { get; set; }
+    }
+}
\ No newline at end of file
diff --git a/BlazorProject/Pages/Pets2.razor b/BlazorProject/Pages/Pets2.razor
new file mode 100644
index 0000000..7dd51c4
--- /dev/null
+++ b/BlazorProject/Pages/Pets2.razor
@@ -0,0 +1,29 @@
+@page "/pets2"
+
+<h1>Pets</h1>
+
+<TableTemplate Items="pets">
+    <TableHeader>
+        <th>ID</th>
+        <th>Name</th>
+    </TableHeader>
+    <RowTemplate Context="pet">
+        <td>@pet.PetId</td>
+        <td>@pet.Name</td>
+    </RowTemplate>
+</TableTemplate>
+
+@code {
+    private List<Pet> pets = new()
+    {
+        new Pet { PetId = 2, Name = "Mr. Bigglesworth" },
+        new Pet { PetId = 4, Name = "Salem Saberhagen" },
+        new Pet { PetId = 7, Name = "K-9" }
+    };
+
+    private class Pet
+    {
+        public int PetId { get; set; }
+        public string? Name { get; set; }
+    }
+}
\ No newline at end of file