diff --git a/MP-TAB-SERV/Components/CardTest.razor b/MP-TAB-SERV/Components/CardTest.razor
new file mode 100644
index 00000000..908afa56
--- /dev/null
+++ b/MP-TAB-SERV/Components/CardTest.razor
@@ -0,0 +1,62 @@
+<div class="card shadow" style="width: 22rem">
+    <div class="card-header @CardCss">
+        <h3 class="card-title">
+            @if (DoPlaceholder)
+            {
+                <div class="placeholder-glow">
+                    <span class="placeholder col-6"></span>
+                </div>
+            }
+            else
+            {
+                @Title
+            }
+        </h3>
+    </div>
+    <div class="card-body">
+        @if (DoPlaceholder)
+        {
+            <div class="placeholder-glow">
+                <span class="placeholder col-7"></span>
+                <span class="placeholder col-4"></span>
+                <span class="placeholder col-4"></span>
+                <span class="placeholder col-7"></span>
+            </div>
+        }
+        else
+        {
+            <p class="card-text">@ChildContent</p>
+        }
+    </div>
+    <div class="card-footer">
+        @if (DoPlaceholder)
+        {
+            <div class="placeholder-glow">
+                <button class="btn btn-sm btn-dark disabled placeholder col-2"></button>
+            </div>
+        }
+        else
+        {
+            <button class="btn btn-sm btn-dark" @onclick="OnYes">Yes!</button>
+        }
+    </div>
+</div>
+
+@code {
+    [Parameter]
+    public RenderFragment? ChildContent { get; set; }
+
+    [Parameter]
+    public string? Title { get; set; }
+
+    [Parameter]
+    public string CardCss { get; set; } = "";
+
+    [Parameter]
+    public bool DoPlaceholder { get; set; } = false;
+
+    private void OnYes()
+    {
+        Console.WriteLine($"{Title} | 'Yes' button selected.");
+    }
+}
\ No newline at end of file
diff --git a/MP-TAB-SERV/Pages/CardDemo.razor b/MP-TAB-SERV/Pages/CardDemo.razor
new file mode 100644
index 00000000..8581926d
--- /dev/null
+++ b/MP-TAB-SERV/Pages/CardDemo.razor
@@ -0,0 +1,58 @@
+@page "/CardDemo"
+
+@if (CardTitles == null || CardTitles.Count == 0)
+{
+    <div class="row">
+        <div class="col-12 my-2 alert alert-secondary fs-3">
+            waiting on browser
+        </div>
+        @for (int i = 0; i < 9; i++)
+        {
+            <div class="col-4 my-2">
+                <CardTest Title="Loading" DoPlaceholder="true" CardCss="bg-secondary">
+                </CardTest>
+            </div>
+        }
+    </div>
+}
+else
+{
+
+    <div class="row">
+        <div class="col-12 my-2 alert alert-success fs-3">
+            loaded on browser
+        </div>
+        @foreach (var item in CardTitles)
+        {
+            <div class="col-4 my-2">
+                <CardTest Title="@item">
+                    <div>
+                        Demo content page for <b>@item</b>
+                    </div>
+                    <div>
+                        This is an example Blazor component!
+                    </div>
+                </CardTest>
+            </div>
+        }
+    </div>
+}
+
+@code {
+
+    protected List<string>? CardTitles { get; set; }
+
+    protected override async Task OnInitializedAsync()
+    {
+        CardTitles = null;
+        await Task.Delay(300);
+        CardTitles = new List<string>();
+        await InvokeAsync(StateHasChanged);
+        await Task.Delay(300);
+        for (int i = 0; i < 9; i++)
+        {
+            CardTitles.Add($"Card {i + 1:00}");
+        }
+        await Task.Delay(10);
+    }
+}
\ No newline at end of file