diff --git a/ComponentPractice/ComponentPractice/Components/App.razor b/ComponentPractice/ComponentPractice/Components/App.razor
index 6a1289d..aa839fd 100644
--- a/ComponentPractice/ComponentPractice/Components/App.razor
+++ b/ComponentPractice/ComponentPractice/Components/App.razor
@@ -7,17 +7,19 @@
     <base href="/" />
     <link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
     <link rel="stylesheet" href="app.css" />
+    <link rel="stylesheet" href="custom.css" />
     <link rel="stylesheet" href="ComponentPractice.styles.css" />
-    <link rel="icon" type="image/png" href="favicon.png" />
     <link rel="stylesheet" href="_content/Radzen.Blazor/css/material-base.css">
+
+    <link rel="icon" type="image/png" href="favicon.png" />
     <HeadOutlet />
 </head>
 
 <body>
     <Routes />
     <script src="_framework/blazor.web.js"></script>
-    <script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>
-    @* <script src="_content/Radzen.Blazor/Radzen.Blazor.js?v=@(typeof(Radzen.Colors).Assembly.GetName().Version)"></script> *@
+    @* <script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script> *@
+    <script src="_content/Radzen.Blazor/Radzen.Blazor.js?v=@(typeof(Radzen.Colors).Assembly.GetName().Version)"></script>
 </body>
 
 </html>
diff --git a/ComponentPractice/ComponentPractice/Components/Layout/NavMenu.razor b/ComponentPractice/ComponentPractice/Components/Layout/NavMenu.razor
index 5a6f82a..c8bcb04 100644
--- a/ComponentPractice/ComponentPractice/Components/Layout/NavMenu.razor
+++ b/ComponentPractice/ComponentPractice/Components/Layout/NavMenu.razor
@@ -36,6 +36,7 @@
                 <RadzenPanelMenuItem Text="Stack" Icon="dashboard_customize" Click="@(() => sidebarExpanded = false)" Path="layoutstack" />
                 <RadzenPanelMenuItem Text="Row" Icon="dashboard_customize" Click="@(() => sidebarExpanded = false)" Path="layoutrow" />
                 <RadzenPanelMenuItem Text="Column" Icon="dashboard_customize" Click="@(() => sidebarExpanded = false)" Path="layoutcolumn" />
+                <RadzenPanelMenuItem Text="Card" Icon="dashboard_customize" Click="@(() => sidebarExpanded = false)" Path="layoutcard" />
             </RadzenPanelMenuItem>
         </RadzenPanelMenu>
     </RadzenStack>
diff --git a/ComponentPractice/ComponentPractice/Components/Pages/LayoutCard.razor b/ComponentPractice/ComponentPractice/Components/Pages/LayoutCard.razor
new file mode 100644
index 0000000..cfe07c2
--- /dev/null
+++ b/ComponentPractice/ComponentPractice/Components/Pages/LayoutCard.razor
@@ -0,0 +1,84 @@
+﻿@page "/layoutcard"
+
+@inject InMemoryData data
+
+@rendermode RenderMode.InteractiveServer
+
+<RadzenCard class="rz-p-4 rz-mt-6">
+    <RadzenText TextStyle="TextStyle.H5">Card</RadzenText>
+    <hr style="border:none; background-color: rgba(0,0,0,0.5); height:2px; margin-bottom: 1rem;" />
+    <RadzenText TextStyle="TextStyle.Body1">
+        <RadzenBadge class="radzen-badge">RadzenCard</RadzenBadge> component can display a piece of content, like an image and text.
+    </RadzenText>
+
+    <RadzenCard class="rz-my-12 rz-mx-auto" Style="max-width: 420px">
+        <RadzenStack class="rz-p-4" Orientation="Orientation.Horizontal" JustifyContent="JustifyContent.Start" Gap="1rem">
+            <RadzenImage Path="@employee.Photo" Style="width:100px; height:100px; border-radius:50%"/>
+            <RadzenStack Gap="0">
+                <RadzenText class="rz-display-flex rz-mt-2 rz-my-0" TextStyle="TextStyle.Overline">Employee</RadzenText>
+                <RadzenText TextStyle="TextStyle.Body1"><b>@($"{employee.FirstName} {employee.LastName}")</b></RadzenText>
+                <RadzenText class="rz-display-flex rz-mt-4 rz-mb-0" TextStyle="TextStyle.Overline">Job Title</RadzenText>
+                <RadzenText TextStyle="TextStyle.Body1"><b>@($"{employee.Title} {employee.Job}")</b></RadzenText>
+            </RadzenStack>
+        </RadzenStack>
+        <RadzenCard class="rz-background-color-primary-light rz-shadow-0 rz-border-radius-0 rz-p-8" style="margin: 1rem calc(-1 * var(--rz-card-padding));">
+            <RadzenText class="rz-color-on-primary-light" TextStyle="TextStyle.H6"><strong>Personal Information</strong></RadzenText>
+            <RadzenRow RowGap="0">
+                <RadzenColumn SizeSM="4">
+                    <RadzenText class="rz-color-on-primary-light rz-display-flex rz-mt-4 rz-mb-0" TextStyle="TextStyle.Overline">Hire Date</RadzenText>
+                    <RadzenText class="rz-color-on-primary-light" TextStyle="TextStyle.Body1">@employee.HireDate.ToString("yyyy-MM-dd")</RadzenText>
+                    <RadzenText class="rz-color-on-primary-light rz-display-flex rz-mt-4 rz-mb-0" TextStyle="TextStyle.Overline">Phone</RadzenText>
+                    <RadzenText class="rz-color-on-primary-light" TextStyle="TextStyle.Body1">@employee.Phone</RadzenText>
+                </RadzenColumn>
+                <RadzenColumn OffsetSM="2" SizeSM="6">
+                    <RadzenText class="rz-color-on-primary-light rz-display-flex rz-mt-4 rz-mb-0" TextStyle="TextStyle.Overline">Region</RadzenText>
+                    <RadzenText class="rz-color-on-primary-light" TextStyle="TextStyle.Body1">@employee.Region</RadzenText>
+                    <RadzenText class="rz-color-on-primary-light rz-display-flex rz-mt-4 rz-mb-0" TextStyle="TextStyle.Overline">Address</RadzenText>
+                    <RadzenText class="rz-color-on-primary-light" TextStyle="TextStyle.Body1">@employee.Address</RadzenText>
+                </RadzenColumn>
+            </RadzenRow>
+        </RadzenCard>
+        <RadzenStack Orientation="Orientation.Horizontal" JustifyContent="JustifyContent.End" Gap="0">
+            <RadzenButton Variant="Variant.Text" Text="Send" />
+            <RadzenButton class="rz-text-secondary-color" Variant="Variant.Text" Text="Calcel" />
+        </RadzenStack>
+    </RadzenCard>
+</RadzenCard>
+
+<RadzenCard class="rz-p-4 rz-mt-6">
+    <RadzenText TextStyle="TextStyle.H5">Card Variant</RadzenText>
+    <hr style="border:none; background-color: rgba(0,0,0,0.5); height:2px; margin-bottom: 1rem;" />
+    <RadzenText TextStyle="TextStyle.Body1">
+        Use <RadzenBadge class="radzen-badge">Variant</RadzenBadge> property to change the card varient.
+    </RadzenText>
+
+    <RadzenStack class="rz-p-4 rz-mb-6 rz-border-radius-1 rz-border-base-300" Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem">
+        <RadzenLabel Text="Variant:" />
+        <RadzenSelectBar @bind-Value="@variant" TextProperty="Text" ValueProperty="Value" Data="@(Enum.GetValues(typeof(Variant)).Cast<Variant>().Select(t => new { Text = $"{t}", Value = t }))" Size="ButtonSize.Small" Class="rz-display-none rz-display-xl-flex" />
+        <RadzenDropDown @bind-Value="@variant" TextProperty="Text" ValueProperty="Value" Data="@(Enum.GetValues(typeof(Variant)).Cast<Variant>().Select(t => new { Text = $"{t}", Value = t }))" Class="rz-display-inline-flex rz-display-xl-none" />
+    </RadzenStack>
+    <RadzenCard class="rz-my-12 rz-mx-auto" Variant="@variant" Style="max-width: 420px">
+        <RadzenStack class="rz-p-4" Orientation="Orientation.Horizontal" JustifyContent="JustifyContent.Start" Gap="1rem">
+            <RadzenImage Path="@employee.Photo" Style="width:100px; height:100px; border-radius:50%" />
+            <RadzenStack Gap="0">
+                <RadzenText class="rz-display-flex rz-mt-2 rz-my-0" TextStyle="TextStyle.Overline">Employee</RadzenText>
+                <RadzenText TextStyle="TextStyle.Body1"><b>@($"{employee.FirstName} {employee.LastName}")</b></RadzenText>
+                <RadzenText class="rz-display-flex rz-mt-4 rz-mb-0" TextStyle="TextStyle.Overline">Job Title</RadzenText>
+                <RadzenText TextStyle="TextStyle.Body1"><b>@($"{employee.Title} {employee.Job}")</b></RadzenText>
+            </RadzenStack>
+        </RadzenStack>
+    </RadzenCard>
+</RadzenCard>
+
+@code {
+    Employee employee;
+
+    Variant variant = Variant.Filled;
+
+    protected override async Task OnInitializedAsync()
+    {
+        List<Employee> employees = await data.GetEmployeeDataAsync(100);
+        int id = Random.Shared.Next(1, 100);
+        employee = employees.Where(e => e.ID == id).FirstOrDefault();
+    }
+}
diff --git a/ComponentPractice/ComponentPractice/Components/Pages/LayoutColumn.razor b/ComponentPractice/ComponentPractice/Components/Pages/LayoutColumn.razor
index eaa4861..1975409 100644
--- a/ComponentPractice/ComponentPractice/Components/Pages/LayoutColumn.razor
+++ b/ComponentPractice/ComponentPractice/Components/Pages/LayoutColumn.razor
@@ -1,13 +1,5 @@
 ﻿@page "/layoutcolumn"
 
-<style>
-    .prop {
-        padding-left: 0.1rem;
-        padding-right: 0.1rem;
-        background-color: lightgreen;
-    }
-</style>
-
 <RadzenCard class="rz-p-4 rz-mt-6">
     <RadzenText TextStyle="TextStyle.H5">Auto-layout columns</RadzenText>
     <hr style="border:none; background-color: rgba(0,0,0,0.5); height:2px; margin: 1rem 0;" />
@@ -79,7 +71,7 @@
     <RadzenText TextStyle="TextStyle.H5">Column wrapping</RadzenText>
     <hr style="border:none; background-color: rgba(0,0,0,0.5); height:2px; margin: 1rem 0;" />
     <RadzenText TextStyle="TextStyle.Body1">
-        If the totoal sum of all column sizes is greater than 12, columns might be wrapped. Use <span class="prop">RowGap</span> property to specify the vertical spacing. 
+        If the totoal sum of all column sizes is greater than 12, columns might be wrapped. Use <RadzenBadge class="radzen-badge" IsPill="true">RowGap</RadzenBadge> property to specify the vertical spacing.
     </RadzenText>
     <RadzenRow class="rz-mt-3 rz-text-align-center rz-border-info-light" Gap="1rem">
         <RadzenColumn class="rz-p-5 rz-background-color-info-lighter rz-color-on-info-lighter" Size="12" SizeXS="12" SizeSM="9" SizeMD="7" SizeLG="5" SizeXL="3" SizeXX="1">
@@ -92,7 +84,7 @@
     <RadzenText TextStyle="TextStyle.H5">Column Offset</RadzenText>
     <hr style="border:none; background-color: rgba(0,0,0,0.5); height:2px; margin: 1rem 0;" />
     <RadzenText TextStyle="TextStyle.Body1">
-        The <span class="prop">Offset</span> property moves the column to the right.
+        The <RadzenBadge class="radzen-badge" IsPill="true">Offset</RadzenBadge> property moves the column to the right.
     </RadzenText>
     <RadzenRow class="rz-mt-3 rz-text-align-center rz-border-info-light" Gap="1rem">
         <RadzenColumn class="rz-p-5 rz-background-color-info-lighter rz-color-on-info-lighter" Size="6" Offset="3">
@@ -168,7 +160,7 @@
     <RadzenText TextStyle="TextStyle.H5">Gutters</RadzenText>
     <hr style="border:none; background-color: rgba(0,0,0,0.5); height:2px; margin: 1rem 0;" />
     <RadzenText TextStyle="TextStyle.Body1">
-        Spacing between columns can be controlled by setting the <span class="prop">Gap</span> property of the parent <span class="prop">RadzenRow</span> component.
+        Spacing between columns can be controlled by setting the <RadzenBadge class="radzen-badge" IsPill="true">Gap</RadzenBadge> property of the parent <RadzenBadge class="radzen-badge" IsPill="true">RadzenRow</RadzenBadge> component.
     </RadzenText>
     <RadzenRow class="rz-text-align-center rz-border-info-light" Gap="1rem">
         <RadzenColumn class="rz-background-color-danger-lighter rz-color-on-danger-lighter">1</RadzenColumn>
diff --git a/ComponentPractice/ComponentPractice/wwwroot/custom.css b/ComponentPractice/ComponentPractice/wwwroot/custom.css
new file mode 100644
index 0000000..ac77391
--- /dev/null
+++ b/ComponentPractice/ComponentPractice/wwwroot/custom.css
@@ -0,0 +1,3 @@
+﻿.radzen-badge {
+    text-transform: none !important;
+}
\ No newline at end of file
