diff --git a/samples/Sample.ClientSide/wwwroot/404.html b/samples/Sample.ClientSide/wwwroot/404.html
index ee6411e3..6a9d2f6c 100644
--- a/samples/Sample.ClientSide/wwwroot/404.html
+++ b/samples/Sample.ClientSide/wwwroot/404.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+﻿<!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8">
diff --git a/samples/Sample.ClientSide/wwwroot/index.html b/samples/Sample.ClientSide/wwwroot/index.html
index 9982aba3..a9970e10 100644
--- a/samples/Sample.ClientSide/wwwroot/index.html
+++ b/samples/Sample.ClientSide/wwwroot/index.html
@@ -8,9 +8,19 @@
 
     <base href="/" />
 
-    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css" integrity="sha256-zmfNZmXoNWBMemUOo1XUGFfc0ihGGLYdgtJS3KCr/l0=" crossorigin="anonymous" />
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/themes/prism.min.css" integrity="sha256-77qGXu2p8NpfcBpTjw4jsMeQnz0vyh74f5do0cWjQ/Q=" crossorigin="anonymous" />
+    <link rel="stylesheet"
+          href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
+          integrity="sha256-MBffSnbbXwHCuZtgPYiwMQbfE7z+GOZ7fBPCNB06Z98="
+          crossorigin="anonymous">
+
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.1/css/all.min.css"
+          integrity="sha256-Z1K5uhUaJXA7Ll0XrZ/0JhX4lAtZFpT6jkKrEDT0drU="
+          crossorigin="anonymous">
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/themes/prism.min.css"
+          integrity="sha256-77qGXu2p8NpfcBpTjw4jsMeQnz0vyh74f5do0cWjQ/Q="
+          crossorigin="anonymous" />
+
     <link rel="stylesheet" href="/_content/LoreSoft.Blazor.Controls/BlazorControls.css" />
     <link rel="stylesheet" href="site.css" />
 </head>
@@ -32,11 +42,17 @@ <h3 class="d-flex justify-content-center">
 
     <script src="GitHubPages.js" type="text/javascript"></script>
 
-    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
-    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/prism.min.js" integrity="sha256-HWJnMZHGx7U1jmNfxe4yaQedmpo/mtxWSIXvcJkLIf4=" crossorigin="anonymous"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/plugins/autoloader/prism-autoloader.min.js" integrity="sha256-ht8ay6ZTPZfuixYB99I5oRpCLsCq7Do2LjEYLwbe+X8=" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
+            integrity="sha256-gvZPYrsDwbwYJLD5yeBfcNujPhRoGOY831wwbIzz3t0="
+            crossorigin="anonymous"></script>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/prism.min.js"
+            integrity="sha256-HWJnMZHGx7U1jmNfxe4yaQedmpo/mtxWSIXvcJkLIf4="
+            crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/plugins/autoloader/prism-autoloader.min.js"
+            integrity="sha256-ht8ay6ZTPZfuixYB99I5oRpCLsCq7Do2LjEYLwbe+X8="
+            crossorigin="anonymous"></script>
+
     <script src="_framework/blazor.webassembly.js"></script>
 
 </body>
diff --git a/samples/Sample.Core/Pages/DateTimePicker/Examples/RegisterForm.razor b/samples/Sample.Core/Pages/DateTimePicker/Examples/RegisterForm.razor
index aaf9e414..099aba42 100644
--- a/samples/Sample.Core/Pages/DateTimePicker/Examples/RegisterForm.razor
+++ b/samples/Sample.Core/Pages/DateTimePicker/Examples/RegisterForm.razor
@@ -6,7 +6,7 @@
     <DataAnnotationsValidator />
     <ValidationSummary />
 
-    <div class="form-group">
+    <div class="mb-3">
         <label for="DisplayName">Display Name *</label>
         <InputText id="DisplayName"
                    name="DisplayName"
@@ -15,7 +15,7 @@
                    placeholder="Display Name" />
         <ValidationMessage For="@(() => Register.DisplayName)" />
     </div>
-    <div class="form-group">
+    <div class="mb-3">
         <label for="EmailAddress">EmailAddress *</label>
         <InputText id="EmailAddress"
                    name="EmailAddress"
@@ -25,7 +25,7 @@
                    placeholder="Email Address" />
         <ValidationMessage For="@(() => Register.EmailAddress)" />
     </div>
-    <div class="form-group">
+    <div class="mb-3">
         <label for="Manager">Manager *</label>
         <Typeahead SearchMethod="@SearchPeople"
                    Items="Data.PersonList"
@@ -40,12 +40,12 @@
         </Typeahead>
         <ValidationMessage For="@(() => Register.Manager)" />
     </div>
-    <div class="form-group">
+    <div class="mb-3">
         <label for="Birthday">Birthday *</label>
         <DateTimePicker @bind-Value="Register.Birthday" placeholder="Select Birthday"></DateTimePicker>
         <ValidationMessage For="@(() => Register.Birthday)" />
     </div>
-    <div class="form-group">
+    <div class="mb-3">
         <label for="Agree">Agree to terms *</label>
         <ToggleSwitch @bind-Value="Register.Agree"></ToggleSwitch>
         <ValidationMessage For="@(() => Register.Agree)" />
diff --git a/samples/Sample.Core/Pages/Index.razor b/samples/Sample.Core/Pages/Index.razor
index 621211ac..8afc716e 100644
--- a/samples/Sample.Core/Pages/Index.razor
+++ b/samples/Sample.Core/Pages/Index.razor
@@ -1,6 +1,6 @@
 ﻿@page "/"
 
-<div class="jumbotron">
+<div class="bg-light mb-4 rounded-2 py-5 px-3">
     <h1>LoreSoft Blazor Controls</h1>
     <p class="lead">Documentation on how to use LoreSoft Blazor Controls.</p>
 </div>
diff --git a/samples/Sample.Core/Pages/ProgressBar/Index.razor b/samples/Sample.Core/Pages/ProgressBar/Index.razor
index fba4a1a0..9227563c 100644
--- a/samples/Sample.Core/Pages/ProgressBar/Index.razor
+++ b/samples/Sample.Core/Pages/ProgressBar/Index.razor
@@ -33,7 +33,7 @@
     <DataAnnotationsValidator />
     <ValidationSummary />
 
-    <div class="form-group">
+    <div class="mb-3">
         <label for="searchName">Name</label>
         <InputText id="searchName"
                    name="searchName"
diff --git a/samples/Sample.Core/Pages/Skeleton/Examples/Table.razor b/samples/Sample.Core/Pages/Skeleton/Examples/Table.razor
index 2c34b139..94c290c6 100644
--- a/samples/Sample.Core/Pages/Skeleton/Examples/Table.razor
+++ b/samples/Sample.Core/Pages/Skeleton/Examples/Table.razor
@@ -6,9 +6,9 @@
 <p>Example of for loading a table</p>
 
 <div>
-    <div class="custom-control custom-checkbox">
-        <input type="checkbox" class="custom-control-input" id="busy-check" @bind="IsLoading">
-        <label class="custom-control-label" for="busy-check">Loading</label>
+    <div class="form-check">
+        <input type="checkbox" class="form-check-input" id="busy-check" @bind="IsLoading">
+        <label class="form-check-label" for="busy-check">Loading</label>
     </div>
 </div>
 
diff --git a/samples/Sample.Core/Pages/ToggleSwitch/Examples/RegisterForm.razor b/samples/Sample.Core/Pages/ToggleSwitch/Examples/RegisterForm.razor
index 197f6023..aa8253f0 100644
--- a/samples/Sample.Core/Pages/ToggleSwitch/Examples/RegisterForm.razor
+++ b/samples/Sample.Core/Pages/ToggleSwitch/Examples/RegisterForm.razor
@@ -6,7 +6,7 @@
     <DataAnnotationsValidator />
     <ValidationSummary />
 
-    <div class="form-group">
+    <div class="mb-3">
         <label for="DisplayName">Display Name *</label>
         <InputText id="DisplayName"
                    name="DisplayName"
@@ -15,7 +15,7 @@
                    placeholder="Display Name" />
         <ValidationMessage For="@(() => Register.DisplayName)" />
     </div>
-    <div class="form-group">
+    <div class="mb-3">
         <label for="EmailAddress">EmailAddress *</label>
         <InputText id="EmailAddress"
                    name="EmailAddress"
@@ -25,7 +25,7 @@
                    placeholder="Email Address" />
         <ValidationMessage For="@(() => Register.EmailAddress)" />
     </div>
-    <div class="form-group">
+    <div class="mb-3">
         <label for="Manager">Manager *</label>
         <Typeahead SearchMethod="@SearchPeople"
                    Items="Data.PersonList"
@@ -40,7 +40,7 @@
         </Typeahead>
         <ValidationMessage For="@(() => Register.Manager)" />
     </div>
-    <div class="form-group">
+    <div class="mb-3">
         <label for="Agree">Agree to terms *</label>
         <ToggleSwitch @bind-Value="Register.Agree"></ToggleSwitch>
         <ValidationMessage For="@(() => Register.Agree)" />
diff --git a/samples/Sample.Core/Pages/Typeahead/Examples/RegisterForm.razor b/samples/Sample.Core/Pages/Typeahead/Examples/RegisterForm.razor
index 7ac0241e..06e8ea48 100644
--- a/samples/Sample.Core/Pages/Typeahead/Examples/RegisterForm.razor
+++ b/samples/Sample.Core/Pages/Typeahead/Examples/RegisterForm.razor
@@ -6,7 +6,7 @@
     <DataAnnotationsValidator />
     <ValidationSummary />
 
-    <div class="form-group">
+    <div class="mb-3">
         <label for="DisplayName">Display Name *</label>
         <InputText id="DisplayName"
                    name="DisplayName"
@@ -15,7 +15,7 @@
                    placeholder="Display Name" />
         <ValidationMessage For="@(() => Register.DisplayName)" />
     </div>
-    <div class="form-group">
+    <div class="mb-3">
         <label for="EmailAddress">EmailAddress *</label>
         <InputText id="EmailAddress"
                    name="EmailAddress"
@@ -25,7 +25,7 @@
                    placeholder="Email Address" />
         <ValidationMessage For="@(() => Register.EmailAddress)" />
     </div>
-    <div class="form-group">
+    <div class="mb-3">
         <label for="Manager">Manager *</label>
         <Typeahead SearchMethod="@SearchPeople"
                    Items="Data.PersonList"
@@ -40,12 +40,12 @@
         </Typeahead>
         <ValidationMessage For="@(() => Register.Manager)" />
     </div>
-    <div class="form-group">
-        <div class="custom-control custom-checkbox">
+    <div class="mb-3">
+        <div class="form-check">
             <InputCheckbox id="Agree"
                            @bind-Value="Register.Agree" 
-                           class="custom-control-input" />
-            <label class="custom-control-label" for="Agree">Agree to terms</label>
+                           class="form-check-input" />
+            <label class="form-check-label" for="Agree">Agree to terms</label>
             <ValidationMessage For="@(() => Register.Agree)" />
         </div>
     </div>
diff --git a/samples/Sample.Core/Shared/MainMenu.razor b/samples/Sample.Core/Shared/MainMenu.razor
index f6521f6c..5e33895f 100644
--- a/samples/Sample.Core/Shared/MainMenu.razor
+++ b/samples/Sample.Core/Shared/MainMenu.razor
@@ -1,49 +1,51 @@
 ﻿<nav class="navbar navbar-expand-xl navbar-light bg-light fixed-top">
-    <a class="navbar-brand" href="/">
-        <img src="logo.png"
-             alt="LoreSoft"
-             height="30" />
-        Blazor Controls
-    </a>
-    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
-        <span class="navbar-toggler-icon"></span>
-    </button>
-    <div class="collapse navbar-collapse" id="navbarCollapse">
-        <ul class="navbar-nav mr-auto">
-            <li class="nav-item">
-                <NavLink class="nav-link" href="/" Match="NavLinkMatch.All">Home</NavLink>
-            </li>
+    <div class="container-fluid">
+        <a class="navbar-brand" href="/">
+            <img src="logo.png"
+                 alt="LoreSoft"
+                 height="30" />
+            Blazor Controls
+        </a>
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarCollapse">
+            <ul class="navbar-nav me-auto">
+                <li class="nav-item">
+                    <NavLink class="nav-link" href="/" Match="NavLinkMatch.All">Home</NavLink>
+                </li>
 
-            <li class="nav-item dropdown">
-                <a class="nav-link dropdown-toggle" href="#" id="navbar-components" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                    Components
-                </a>
-                <div class="dropdown-menu" aria-labelledby="navbar-components">
-                    <NavLink class="dropdown-item" href="/datagrid/index" Match="NavLinkMatch.Prefix">DataGrid</NavLink>
-                    <NavLink class="dropdown-item" href="/datalist/index" Match="NavLinkMatch.Prefix">DataList</NavLink>
-                    <div class="dropdown-divider"></div>
-                    <NavLink class="dropdown-item" href="/datetimepicker/index" Match="NavLinkMatch.Prefix">DateTimePicker</NavLink>
-                    <div class="dropdown-divider"></div>
-                    <NavLink class="dropdown-item" href="/progressbar/index" Match="NavLinkMatch.Prefix">ProgressBar</NavLink>
-                    <NavLink class="dropdown-item" href="/skeleton/index" Match="NavLinkMatch.Prefix">Skeleton</NavLink>
-                    <NavLink class="dropdown-item" href="/toggleSwitch/index" Match="NavLinkMatch.Prefix">ToggleSwitch</NavLink>
-                    <div class="dropdown-divider"></div>
-                    <NavLink class="dropdown-item" href="/typeahead/index" Match="NavLinkMatch.Prefix">Typeahead</NavLink>
-                </div>
-            </li>
-        </ul>
+                <li class="nav-item dropdown">
+                    <a class="nav-link dropdown-toggle" href="#" id="navbar-components" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                        Components
+                    </a>
+                    <div class="dropdown-menu" aria-labelledby="navbar-components">
+                        <NavLink class="dropdown-item" href="/datagrid/index" Match="NavLinkMatch.Prefix">DataGrid</NavLink>
+                        <NavLink class="dropdown-item" href="/datalist/index" Match="NavLinkMatch.Prefix">DataList</NavLink>
+                        <div class="dropdown-divider"></div>
+                        <NavLink class="dropdown-item" href="/datetimepicker/index" Match="NavLinkMatch.Prefix">DateTimePicker</NavLink>
+                        <div class="dropdown-divider"></div>
+                        <NavLink class="dropdown-item" href="/progressbar/index" Match="NavLinkMatch.Prefix">ProgressBar</NavLink>
+                        <NavLink class="dropdown-item" href="/skeleton/index" Match="NavLinkMatch.Prefix">Skeleton</NavLink>
+                        <NavLink class="dropdown-item" href="/toggleSwitch/index" Match="NavLinkMatch.Prefix">ToggleSwitch</NavLink>
+                        <div class="dropdown-divider"></div>
+                        <NavLink class="dropdown-item" href="/typeahead/index" Match="NavLinkMatch.Prefix">Typeahead</NavLink>
+                    </div>
+                </li>
+            </ul>
 
-        <ul class="navbar-nav">
-            <li class="nav-item">
-                <a class="nav-link" title="GitHub Repository" target="_blank" href="https://github.com/loresoft/LoreSoft.Blazor.Controls">
-                    <i class="fab fa-github"></i> GitHub Repository
-                </a>
-            </li>
-            <li class="nav-item">
-                <a class="nav-link" title="Nuget Package" target="_blank" href="https://www.nuget.org/packages/LoreSoft.Blazor.Controls/">
-                    <img aria-hidden="true" alt="" src="https://www.nuget.org/Content/gallery/img/default-package-icon.svg" height="16" style="margin-top: -6px;" /> Nuget Package
-                </a>
-            </li>
-        </ul>
+            <ul class="navbar-nav">
+                <li class="nav-item">
+                    <a class="nav-link" title="GitHub Repository" target="_blank" href="https://github.com/loresoft/LoreSoft.Blazor.Controls">
+                        <i class="fab fa-github"></i> GitHub Repository
+                    </a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" title="Nuget Package" target="_blank" href="https://www.nuget.org/packages/LoreSoft.Blazor.Controls/">
+                        <img aria-hidden="true" alt="" src="https://www.nuget.org/Content/gallery/img/default-package-icon.svg" height="16" style="margin-top: -6px;" /> Nuget Package
+                    </a>
+                </li>
+            </ul>
+        </div>
     </div>
 </nav>
diff --git a/samples/Sample.ServerSide/Pages/_Host.cshtml b/samples/Sample.ServerSide/Pages/_Host.cshtml
index 6740709b..6899c96a 100644
--- a/samples/Sample.ServerSide/Pages/_Host.cshtml
+++ b/samples/Sample.ServerSide/Pages/_Host.cshtml
@@ -13,10 +13,16 @@
 
     <base href="~/" />
 
-    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
+    <link rel="stylesheet"
+          href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
+          integrity="sha256-MBffSnbbXwHCuZtgPYiwMQbfE7z+GOZ7fBPCNB06Z98="
+          crossorigin="anonymous">
+
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css" integrity="sha256-zmfNZmXoNWBMemUOo1XUGFfc0ihGGLYdgtJS3KCr/l0=" crossorigin="anonymous" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/themes/prism.min.css" integrity="sha256-77qGXu2p8NpfcBpTjw4jsMeQnz0vyh74f5do0cWjQ/Q=" crossorigin="anonymous" />
+    
     <link rel="stylesheet" href="~/_content/LoreSoft.Blazor.Controls/BlazorControls.css" asp-append-version="true" />
+    
     <link rel="stylesheet" href="~/site.css" asp-append-version="true" />
 </head>
 <body style="padding-top: 4.5rem;">
@@ -35,11 +41,13 @@
         <a class="dismiss">🗙</a>
     </div>
 
-    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
-    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
+            integrity="sha256-gvZPYrsDwbwYJLD5yeBfcNujPhRoGOY831wwbIzz3t0="
+            crossorigin="anonymous"></script>
+
     <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/prism.min.js" integrity="sha256-HWJnMZHGx7U1jmNfxe4yaQedmpo/mtxWSIXvcJkLIf4=" crossorigin="anonymous"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/plugins/autoloader/prism-autoloader.min.js" integrity="sha256-ht8ay6ZTPZfuixYB99I5oRpCLsCq7Do2LjEYLwbe+X8=" crossorigin="anonymous"></script>
+
     <script src="~/_framework/blazor.server.js" asp-append-version="true"></script>
 
 </body>
