diff --git a/MyApp/Components/Identity/ExternalLoginPicker.razor b/MyApp/Components/Identity/ExternalLoginPicker.razor
index 5bfc849..87bd543 100644
--- a/MyApp/Components/Identity/ExternalLoginPicker.razor
+++ b/MyApp/Components/Identity/ExternalLoginPicker.razor
@@ -11,9 +11,9 @@
 {
     <div>
         <p>
-            There are no external authentication services configured. 
-            See this <a class="@Css.Link" href="https://go.microsoft.com/fwlink/?LinkID=532715">article
-            about setting up this ASP.NET application to support logging in via external services</a>.
+            There are no external authentication services configured.
+            See this <HyperLink href="https://go.microsoft.com/fwlink/?LinkID=532715">article
+            about setting up this ASP.NET application to support logging in via external services</HyperLink>.
         </p>
     </div>
 }
@@ -26,7 +26,7 @@ else
             <div class="space-x-2">
                 @foreach (var provider in _externalLogins!)
                 {
-                    <button type="submit" class="@Css.SecondaryButton" name="provider" value="@provider.Name" title="Log in using your @provider.DisplayName account">@provider.DisplayName</button>
+                    <button type="submit" class="@SecondaryButton.Classes" name="provider" value="@provider.Name" title="Log in using your @provider.DisplayName account">@provider.DisplayName</button>
                 }
             </div>
         </div>
diff --git a/MyApp/Components/Identity/ShowRecoveryCodes.razor b/MyApp/Components/Identity/ShowRecoveryCodes.razor
index f0683d0..41a9bfe 100644
--- a/MyApp/Components/Identity/ShowRecoveryCodes.razor
+++ b/MyApp/Components/Identity/ShowRecoveryCodes.razor
@@ -1,4 +1,4 @@
-<h3 class="@Css.H3">Recovery codes</h3>
+<Heading3>Recovery codes</Heading3>
 <div class="max-w-xl">
     <StatusMessage Message="@StatusMessage" />
 
diff --git a/MyApp/Components/Layout/ManageLayout.razor b/MyApp/Components/Layout/ManageLayout.razor
index 0665bb4..d1e5c95 100644
--- a/MyApp/Components/Layout/ManageLayout.razor
+++ b/MyApp/Components/Layout/ManageLayout.razor
@@ -3,9 +3,9 @@
 
 
 <div class="mt-8 mx-auto max-w-screen-lg">
-    <h1 class="@Css.H1">Manage your account</h1>
-    <h4 class="font-semibold text-lg my-2">Change your account settings</h4>
-    <hr class="dark:border-gray-700" />
+    <Heading1>Manage your account</Heading1>
+    <Heading4>Change your account settings</Heading4>
+    <hr class="mt-4 dark:border-gray-700" />
     <div class="flex flex-wrap">
         <div class="grow-0">
             <ManageNavMenu />
diff --git a/MyApp/Css.cs b/MyApp/Css.cs
deleted file mode 100644
index 7581251..0000000
--- a/MyApp/Css.cs
+++ /dev/null
@@ -1,23 +0,0 @@
-using ServiceStack;
-
-namespace MyApp;
-
-public static class Css
-{
-    public const string H1 = "text-3xl font-bold tracking-tight text-gray-900 dark:text-gray-50 sm:text-4xl";
-    public const string H2 = "text-3xl md:text-4xl font-bold tracking-tighter leading-tight md:pr-8 whitespace-nowrap text-center pt-8";
-    public const string H3 = "mb-4 text-2xl font-semibold text-gray-900 dark:text-gray-100 leading-tight";
-    public const string H4 = "mb-4 text-xl font-semibold text-gray-900 dark:text-gray-100 leading-tight";
-    public const string Link = "font-semibold text-indigo-600 dark:text-indigo-300 hover:text-indigo-500 dark:hover:text-indigo-400";
-    public const string LinkUnderline = "underline hover:text-success duration-200 transition-colors";
-    public const string PrimaryButton = "cursor-pointer inline-flex justify-center rounded-md border border-transparent py-2 px-4 text-sm font-medium shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 dark:ring-offset-black focus:ring-2 focus:ring-offset-2 text-white bg-indigo-600 hover:bg-indigo-700 focus:ring-indigo-500 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800";
-    public const string SecondaryButton = "cursor-pointer inline-flex justify-center rounded-md border border-gray-300 py-2 px-4 text-sm font-medium shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-400 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-700 focus:ring-indigo-500 dark:focus:ring-indigo-600 dark:ring-offset-black";
-    public const string DangerButton = "cursor-pointer inline-flex justify-center rounded-md border border-transparent py-2 px-4 text-sm font-medium shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 dark:ring-offset-black focus:ring-red-300 text-white bg-red-600 hover:bg-red-700 focus:ring-red-500 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-500 dark:ring-offset-black";
-    public const string ValidationSummary = "mb-3 text-danger text-center font-semibold";
-    public const string ValidationMessage = "mt-2 text-danger text-sm";
-    public static string InputText => CssUtils.Tailwind.Input("");
-    public const string InputLabel = "block text-sm font-medium text-gray-700 dark:text-gray-300";
-    public const string Checkbox = "h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500";
-    public const string AlertDanger = "mb-2 p-2 px-4 flex items-center rounded text-danger bg-red-100 font-semibold";
-    public const string AlertSuccess = "mb-2 p-2 px-4 flex items-center rounded text-success bg-green-100 font-semibold";
-}
diff --git a/MyApp/Pages/Account/ConfirmEmail.razor b/MyApp/Pages/Account/ConfirmEmail.razor
index f86526c..8061d7b 100644
--- a/MyApp/Pages/Account/ConfirmEmail.razor
+++ b/MyApp/Pages/Account/ConfirmEmail.razor
@@ -12,7 +12,7 @@
 <PageTitle>Confirm email</PageTitle>
 
 <div class="mt-8 mx-auto max-w-lg">
-    <h1 class="mb-3 @Css.H1">Confirm email</h1>
+    <Heading1>Confirm email</Heading1>
 
     <StatusMessage Message="@statusMessage" />
 </div>
diff --git a/MyApp/Pages/Account/ConfirmEmailChange.razor b/MyApp/Pages/Account/ConfirmEmailChange.razor
index 550a403..987fd32 100644
--- a/MyApp/Pages/Account/ConfirmEmailChange.razor
+++ b/MyApp/Pages/Account/ConfirmEmailChange.razor
@@ -13,7 +13,7 @@
 
 <PageTitle>Confirm email change</PageTitle>
 
-<h1 class="mb-3 @Css.H1">Confirm email change</h1>
+<Heading1>Confirm email change</Heading1>
 
 <div class="mt-8 mx-auto max-w-lg">
     <StatusMessage Message="@_message" />
diff --git a/MyApp/Pages/Account/ExternalLogin.razor b/MyApp/Pages/Account/ExternalLogin.razor
index 5c50042..6e88414 100644
--- a/MyApp/Pages/Account/ExternalLogin.razor
+++ b/MyApp/Pages/Account/ExternalLogin.razor
@@ -26,8 +26,8 @@
 
 <div class="mt-8 mx-auto max-w-lg">
     <StatusMessage class="mb-3" Message="@_message" />
-    <h1 class="@Css.H1">Register</h1>
-    <h2 class="@Css.H2" id="external-login-title">Associate your @providerDisplayName account.</h2>
+    <Heading1>Register</Heading1>
+    <Heading2 id="external-login-title">Associate your @providerDisplayName account.</Heading2>
 
     <Alert id="external-login-description" Type="AlertType.Information" class="my-4">
         You've successfully authenticated with <strong>@providerDisplayName</strong>.
@@ -39,18 +39,18 @@
         <div class="px-4 bg-white dark:bg-black sm:p-6">
             <EditForm id="confirmation-form" Model="Input" OnValidSubmit="OnValidSubmitAsync" FormName="confirmation" method="post">
                 <DataAnnotationsValidator />
-                <ValidationSummary class="@Css.ValidationSummary" />
+                <ValidationSummary class="mb-3 text-danger text-center font-semibold" />
 
                 <div class="flex flex-col gap-4">
                     <div>
-                        <label for="email" class="@Css.InputLabel">Email</label>
+                        <label for="email" class="@TextInput.LabelClasses">Email</label>
                         <div class="mt-1 relative rounded-md shadow-sm">
-                            <InputText id="email" type="text" @bind-Value="Input.Email" class="@Css.InputText" autocomplete="email" placeholder="Please enter your email." />
+                            <InputText id="email" type="text" @bind-Value="Input.Email" class="@TextInput.InputClasses" autocomplete="email" placeholder="Please enter your email." />
                         </div>
-                        <ValidationMessage For="() => Input.Email" class="@Css.ValidationMessage" />
+                        <ValidationMessage For="() => Input.Email" class="mt-2 text-danger text-sm" />
                     </div>
                     <div>
-                        <button type="submit" class="@Css.PrimaryButton">Register</button>
+                        <PrimaryButton type="submit">Register</PrimaryButton>
                     </div>
                 </div>
             </EditForm>
diff --git a/MyApp/Pages/Account/ForgotPassword.razor b/MyApp/Pages/Account/ForgotPassword.razor
index 43ac9a7..e7d0fa6 100644
--- a/MyApp/Pages/Account/ForgotPassword.razor
+++ b/MyApp/Pages/Account/ForgotPassword.razor
@@ -17,22 +17,22 @@
 <PageTitle>Forgot your password?</PageTitle>
 
 <div class="mt-8 mx-auto max-w-lg">
-    <h1 class="mb-3 @Css.H1">Forgot your password?</h1>
-    <h3 class="@Css.H3">Enter your email.</h3>
+    <Heading1>Forgot your password?</Heading1>
+    <Heading3>Enter your email.</Heading3>
 
     <EditForm Model="Input" FormName="forgot-password" OnValidSubmit="OnValidSubmitAsync" method="post">
         <DataAnnotationsValidator />
-        <ValidationSummary class="@Css.ValidationSummary" />
+        <ValidationSummary class="mb-3 text-danger text-center font-semibold" />
         <div class="flex flex-col gap-y-4">
             <div>
-                <label for="email" class="@Css.InputLabel">Email</label>
+                <label for="email" class="@TextInput.LabelClasses">Email</label>
                 <div class="mt-1 relative rounded-md shadow-sm">
-                    <InputText id="email" type="text" @bind-Value="Input.Email" class="@Css.InputText" autocomplete="username" aria-required="true" placeholder="name@example.com" />
+                    <InputText id="email" type="text" @bind-Value="Input.Email" class="@TextInput.InputClasses" autocomplete="username" aria-required="true" placeholder="name@example.com" />
                 </div>
-                <ValidationMessage For="() => Input.Email" class="@Css.ValidationMessage" />
+                <ValidationMessage For="() => Input.Email" class="mt-2 text-danger text-sm" />
             </div>
             <div>
-                <button type="submit" class="@Css.PrimaryButton">Reset password</button>
+                <PrimaryButton type="submit">Reset password</PrimaryButton>
             </div>
         </div>
     </EditForm>
diff --git a/MyApp/Pages/Account/ForgotPasswordConfirmation.razor b/MyApp/Pages/Account/ForgotPasswordConfirmation.razor
index 6ebd370..cbcf33e 100644
--- a/MyApp/Pages/Account/ForgotPasswordConfirmation.razor
+++ b/MyApp/Pages/Account/ForgotPasswordConfirmation.razor
@@ -3,7 +3,7 @@
 <PageTitle>Forgot password confirmation</PageTitle>
 
 <div class="mt-8 mx-auto max-w-lg">
-    <h1 class="@Css.H1">Forgot password confirmation</h1>
+    <Heading1>Forgot password confirmation</Heading1>
 
     <p class="my-4">
         Please check your email to reset your password.
diff --git a/MyApp/Pages/Account/InvalidPasswordReset.razor b/MyApp/Pages/Account/InvalidPasswordReset.razor
index 77ab856..a58f318 100644
--- a/MyApp/Pages/Account/InvalidPasswordReset.razor
+++ b/MyApp/Pages/Account/InvalidPasswordReset.razor
@@ -4,7 +4,7 @@
 
 <div class="mt-8 mx-auto max-w-lg">
 
-    <h1 class="@Css.H1">Invalid password reset</h1>
+    <Heading1>Invalid password reset</Heading1>
 
     <p class="my-4">
         The password reset link is invalid.
diff --git a/MyApp/Pages/Account/InvalidUser.razor b/MyApp/Pages/Account/InvalidUser.razor
index 251aaa1..9830212 100644
--- a/MyApp/Pages/Account/InvalidUser.razor
+++ b/MyApp/Pages/Account/InvalidUser.razor
@@ -4,7 +4,7 @@
 
 <div class="mt-8 mx-auto max-w-lg">
 
-    <h3 class="@Css.H3">Invalid user</h3>
+    <Heading3>Invalid user</Heading3>
 
     <div class="max-w-xl">
         <StatusMessage />
diff --git a/MyApp/Pages/Account/Lockout.razor b/MyApp/Pages/Account/Lockout.razor
index a4e3015..1542240 100644
--- a/MyApp/Pages/Account/Lockout.razor
+++ b/MyApp/Pages/Account/Lockout.razor
@@ -5,7 +5,7 @@
 <div class="mt-8 mx-auto max-w-lg">
 
     <header>
-        <h1 class="@Css.H1">Locked out</h1>
+        <Heading1>Locked out</Heading1>
         <p class="my-4 text-danger">This account has been locked out, please try again later.</p>
     </header>
 
diff --git a/MyApp/Pages/Account/Login.razor b/MyApp/Pages/Account/Login.razor
index cf0f046..d1b73dd 100644
--- a/MyApp/Pages/Account/Login.razor
+++ b/MyApp/Pages/Account/Login.razor
@@ -17,52 +17,50 @@
 
 <div class="mt-8 mx-auto max-w-lg">
     <div class="max-w-xl">
-        <h1 class="mb-3 @Css.H1">
-            Use a local account to log in.
-        </h1>
+        <Heading1>Use a local account to log in.</Heading1>
         <StatusMessage class="mb-3" Message="@errorMessage" />
         <section class="mt-4 sm:shadow overflow-hidden sm:rounded-md">
             <EditForm id="account" Model="Input" method="post" OnValidSubmit="LoginUser" FormName="login">
                 <div class="px-4 bg-white dark:bg-black sm:p-6">
-                    <ValidationSummary class="@Css.ValidationSummary" />
+                    <ValidationSummary class="mb-3 text-danger text-center font-semibold" />
                     <div class="flex flex-col gap-y-4">
                         <div>
                             <div>
-                                <label for="Email" class="@Css.InputLabel">Email</label>
+                                <label for="Email" class="@TextInput.LabelClasses">Email</label>
                                 <div class="mt-1 relative rounded-md shadow-sm">
-                                    <InputText id="email" type="text" @bind-Value="Input.Email" class="@Css.InputText" autocomplete="username" aria-required="true" placeholder="name@example.com" />
+                                    <InputText id="email" type="text" @bind-Value="Input.Email" class="@TextInput.InputClasses" autocomplete="username" aria-required="true" placeholder="name@example.com" />
                                 </div>
                             </div>
                         </div>
                         <div>
                             <div>
-                                <label for="UserName" class="@Css.InputLabel">Password</label>
+                                <label for="UserName" class="@TextInput.LabelClasses">Password</label>
                                 <div class="mt-1 relative rounded-md shadow-sm">
-                                    <InputText id="password" type="password" @bind-Value="Input.Password" class="@Css.InputText" autocomplete="current-password" aria-required="true" placeholder="password" />
+                                    <InputText id="password" type="password" @bind-Value="Input.Password" class="@TextInput.InputClasses" autocomplete="current-password" aria-required="true" placeholder="password" />
                                 </div>
                             </div>
                         </div>
 
                         <div class="flex items-center justify-between">
                             <div class="flex items-center">
-                                <InputCheckbox id="remember-me" @bind-Value="Input.RememberMe" class="@Css.Checkbox" />
+                                <InputCheckbox id="remember-me" @bind-Value="Input.RememberMe" class="@CheckboxInput.InputClasses" />
                                 <label for="remember-me" class="ml-2 block text-sm text-gray-900 dark:text-gray-50 select-none">Remember Me</label>
                             </div>
                         </div>
 
                         <div>
-                            <button id="login-submit" type="submit" class="@Css.PrimaryButton">Log in</button>
+                            <PrimaryButton id="login-submit" type="submit">Log in</PrimaryButton>
                         </div>
 
                         <div class="mt-8 text-sm">
                             <p class="mb-3">
-                                <a class="@Css.Link" id="forgot-password" href="/Account/ForgotPassword">Forgot your password?</a>
+                                <HyperLink class="font-semibold" id="forgot-password" href="/Account/ForgotPassword">Forgot your password?</HyperLink>
                             </p>
                             <p class="mb-3">
-                                <a class="@Css.Link" href="@(NavigationManager.GetUriWithQueryParameters("/Account/Register", new Dictionary<string, object?> { ["ReturnUrl"] = ReturnUrl }))">Register as a new user</a>
+                                <HyperLink class="font-semibold" href="@(NavigationManager.GetUriWithQueryParameters("/Account/Register", new Dictionary<string, object?> { ["ReturnUrl"] = ReturnUrl }))">Register as a new user</HyperLink>
                             </p>
                             <p class="mb-3">
-                                <a class="@Css.Link" id="resend-confirmation" href="/Account/ResendEmailConfirmation">Resend email confirmation</a>
+                                <HyperLink class="font-semibold" id="resend-confirmation" href="/Account/ResendEmailConfirmation">Resend email confirmation</HyperLink>
                             </p>
                         </div>
                     </div>
@@ -71,7 +69,7 @@
         </section>
         <div class="mt-8">
             <section>
-                <h3 class="@Css.H3">Use another service to log in.</h3>
+                <Heading3>Use another service to log in.</Heading3>
                 <ExternalLoginPicker />
             </section>
         </div>
diff --git a/MyApp/Pages/Account/LoginWith2fa.razor b/MyApp/Pages/Account/LoginWith2fa.razor
index d7779af..755e0fb 100644
--- a/MyApp/Pages/Account/LoginWith2fa.razor
+++ b/MyApp/Pages/Account/LoginWith2fa.razor
@@ -13,7 +13,7 @@
 <PageTitle>Two-factor authentication</PageTitle>
 
 <div class="mt-8 mx-auto max-w-lg">
-    <h1 class="@Css.H1">Two-factor authentication</h1>
+    <Heading1>Two-factor authentication</Heading1>
     <StatusMessage Message="@_message" />
     <p class="my-4">Your login is protected with an authenticator app. Enter your authenticator code below.</p>
     <div class="mt-3 shadow overflow-hidden sm:rounded-md">
@@ -22,27 +22,27 @@
                 <input type="hidden" name="ReturnUrl" value="@ReturnUrl" />
                 <input type="hidden" name="RememberMe" value="@RememberMe" />
                 <DataAnnotationsValidator />
-                <ValidationSummary class="@Css.ValidationSummary" />
+                <ValidationSummary class="mb-3 text-danger text-center font-semibold" />
 
                 <div class="flex flex-col gap-y-4">
                     <div>
-                        <label for="two-factor-code" class="@Css.InputLabel">Authenticator code</label>
+                        <label for="two-factor-code" class="@TextInput.LabelClasses">Authenticator code</label>
                         <div class="mt-1 relative rounded-md shadow-sm">
-                            <InputText id="two-factor-code" type="text" @bind-Value="Input.TwoFactorCode" class="@Css.InputText" autocomplete="off" />
+                            <InputText id="two-factor-code" type="text" @bind-Value="Input.TwoFactorCode" class="@TextInput.InputClasses" autocomplete="off" />
                         </div>
-                        <ValidationMessage For="() => Input.TwoFactorCode" class="@Css.ValidationMessage" />
+                        <ValidationMessage For="() => Input.TwoFactorCode" class="mt-2 text-danger text-sm" />
                     </div>
 
                     <div class="flex items-center justify-between">
                         <div class="flex items-center">
-                            <InputCheckbox id="remember-machine" @bind-Value="Input.RememberMachine" class="@Css.Checkbox" />
+                            <InputCheckbox id="remember-machine" @bind-Value="Input.RememberMachine" class="@CheckboxInput.InputClasses" />
                             <label for="remember-machine" class="ml-2 block text-sm text-gray-900 dark:text-gray-50 select-none">
                                 Remember this machine
                             </label>
                         </div>
                     </div>
                     <div>
-                        <button type="submit" class="@Css.PrimaryButton">Log in</button>
+                        <PrimaryButton type="submit">Log in</PrimaryButton>
                     </div>
                 </div>
             </EditForm>
@@ -51,7 +51,7 @@
 </div>
 <p class="mt-4">
     Don't have access to your authenticator device? You can
-    <a id="recovery-code-login" class="@Css.Link" href="/Account/LoginWithRecoveryCode?ReturnUrl=@ReturnUrl">log in with a recovery code</a>.
+    <HyperLink class="font-semibold" id="recovery-code-login" href=@($"/Account/LoginWithRecoveryCode?ReturnUrl={ReturnUrl}")>log in with a recovery code</HyperLink>.
 </p>
 
 @code {
diff --git a/MyApp/Pages/Account/LoginWithRecoveryCode.razor b/MyApp/Pages/Account/LoginWithRecoveryCode.razor
index 51a16af..af7270d 100644
--- a/MyApp/Pages/Account/LoginWithRecoveryCode.razor
+++ b/MyApp/Pages/Account/LoginWithRecoveryCode.razor
@@ -14,7 +14,7 @@
 <PageTitle>Recovery code verification</PageTitle>
 
 <div class="mt-8 mx-auto max-w-lg">
-    <h1 class="@Css.H1">Recovery code verification</h1>
+    <Heading1>Recovery code verification</Heading1>
 
     <StatusMessage Message="@_message" />
     <p class="my-4">
@@ -25,17 +25,17 @@
         <div class="px-4 bg-white dark:bg-black sm:p-6">
             <EditForm Model="Input" FormName="login-with-recovery-code" OnValidSubmit="OnValidSubmitAsync" method="post">
                 <DataAnnotationsValidator />
-                <ValidationSummary class="@Css.ValidationSummary" />
+                <ValidationSummary class="mb-3 text-danger text-center font-semibold" />
                 <div class="flex flex-col gap-y-4">
                     <div>
-                        <label for="recovery-code" class="@Css.InputLabel">Recovery Code</label>
+                        <label for="recovery-code" class="@TextInput.LabelClasses">Recovery Code</label>
                         <div class="mt-1 relative rounded-md shadow-sm">
-                            <InputText id="recovery-code" type="text" @bind-Value="Input.RecoveryCode" class="@Css.InputText" autocomplete="off" placeholder="RecoveryCode" />
+                            <InputText id="recovery-code" type="text" @bind-Value="Input.RecoveryCode" class="@TextInput.InputClasses" autocomplete="off" placeholder="RecoveryCode" />
                         </div>
-                        <ValidationMessage For="() => Input.RecoveryCode" class="@Css.ValidationMessage" />
+                        <ValidationMessage For="() => Input.RecoveryCode" class="mt-2 text-danger text-sm" />
                     </div>
                     <div>
-                        <button type="submit" class="@Css.PrimaryButton">Log in</button>
+                        <PrimaryButton type="submit">Log in</PrimaryButton>
                     </div>
                 </div>
             </EditForm>
diff --git a/MyApp/Pages/Account/Manage/ChangePassword.razor b/MyApp/Pages/Account/Manage/ChangePassword.razor
index ffe79c1..88d70a5 100644
--- a/MyApp/Pages/Account/Manage/ChangePassword.razor
+++ b/MyApp/Pages/Account/Manage/ChangePassword.razor
@@ -13,7 +13,7 @@
 
 <PageTitle>Change password</PageTitle>
 
-<h3 class="@Css.H3">Change password</h3>
+<Heading3>Change password</Heading3>
 
 <div class="max-w-xl">
     <StatusMessage Message="@_message" />
@@ -22,32 +22,32 @@
         <div class="px-4 bg-white dark:bg-black sm:p-6">
             <EditForm id="change-password-form" Model="Input" FormName="change-password" OnValidSubmit="OnValidSubmitAsync" method="post">
                 <DataAnnotationsValidator />
-                <ValidationSummary class="@Css.ValidationSummary" />
+                <ValidationSummary class="mb-3 text-danger text-center font-semibold" />
                 
                 <div class="flex flex-col gap-4">
                     <div>
-                        <label for="old-password" class="@Css.InputLabel">Old password</label>
+                        <label for="old-password" class="@TextInput.LabelClasses">Old password</label>
                         <div class="mt-1 relative rounded-md shadow-sm">
-                            <InputText id="old-password" type="password" @bind-Value="Input.OldPassword" class="@Css.InputText" autocomplete="current-password" aria-required="true" placeholder="Please enter your old password." />
+                            <InputText id="old-password" type="password" @bind-Value="Input.OldPassword" class="@TextInput.InputClasses" autocomplete="current-password" aria-required="true" placeholder="Please enter your old password." />
                         </div>
-                        <ValidationMessage For="() => Input.OldPassword" class="@Css.ValidationMessage" />
+                        <ValidationMessage For="() => Input.OldPassword" class="mt-2 text-danger text-sm" />
                     </div>
                     <div>
-                        <label for="new-password" class="@Css.InputLabel">New password</label>
+                        <label for="new-password" class="@TextInput.LabelClasses">New password</label>
                         <div class="mt-1 relative rounded-md shadow-sm">
-                            <InputText id="new-password" type="password" @bind-Value="Input.NewPassword" class="@Css.InputText" autocomplete="new-password" aria-required="true" placeholder="Please enter your new password." />
+                            <InputText id="new-password" type="password" @bind-Value="Input.NewPassword" class="@TextInput.InputClasses" autocomplete="new-password" aria-required="true" placeholder="Please enter your new password." />
                         </div>
-                        <ValidationMessage For="() => Input.NewPassword" class="@Css.ValidationMessage" />
+                        <ValidationMessage For="() => Input.NewPassword" class="mt-2 text-danger text-sm" />
                     </div>
                     <div>
-                        <label for="confirm-password" class="@Css.InputLabel">Confirm password</label>
+                        <label for="confirm-password" class="@TextInput.LabelClasses">Confirm password</label>
                         <div class="mt-1 relative rounded-md shadow-sm">
-                            <InputText id="confirm-password" type="password" @bind-Value="Input.ConfirmPassword" class="@Css.InputText" autocomplete="new-password" aria-required="true" placeholder="Please confirm your new password." />
+                            <InputText id="confirm-password" type="password" @bind-Value="Input.ConfirmPassword" class="@TextInput.InputClasses" autocomplete="new-password" aria-required="true" placeholder="Please confirm your new password." />
                         </div>
-                        <ValidationMessage For="() => Input.ConfirmPassword" class="@Css.ValidationMessage" />
+                        <ValidationMessage For="() => Input.ConfirmPassword" class="mt-2 text-danger text-sm" />
                     </div>
                     <div>
-                        <button type="submit" class="@Css.PrimaryButton">Update password</button>
+                        <PrimaryButton type="submit">Update password</PrimaryButton>
                     </div>
                 </div>
             </EditForm>
diff --git a/MyApp/Pages/Account/Manage/DeletePersonalData.razor b/MyApp/Pages/Account/Manage/DeletePersonalData.razor
index b363bfa..5d7365a 100644
--- a/MyApp/Pages/Account/Manage/DeletePersonalData.razor
+++ b/MyApp/Pages/Account/Manage/DeletePersonalData.razor
@@ -13,7 +13,7 @@
 
 <PageTitle>Delete Personal Data</PageTitle>
 
-<h3 class="@Css.H3">Delete Personal Data</h3>
+<Heading3>Delete Personal Data</Heading3>
 
 <div class="max-w-xl">
     <Alert Type="AlertType.Error" class="mb-3">
@@ -26,20 +26,20 @@
 
             <EditForm class="mt-3" id="delete-user" Model="Input" FormName="delete-user" OnValidSubmit="OnValidSubmitAsync" method="post">
                 <DataAnnotationsValidator />
-                <ValidationSummary class="@Css.ValidationMessage" />
+                <ValidationSummary class="mt-2 text-danger text-sm" />
 
                 <div class="flex flex-col gap-4">
                     @if (_requirePassword)
                     {
                         <div>
-                            <label for="password" class="@Css.InputLabel">Password</label>
+                            <label for="password" class="@TextInput.LabelClasses">Password</label>
                             <div class="mt-1 relative rounded-md shadow-sm">
-                                <InputText id="password" type="password" @bind-Value="Input.Password" class="@Css.InputText" autocomplete="current-password" aria-required="true" placeholder="Please enter your password." />
+                                <InputText id="password" type="password" @bind-Value="Input.Password" class="@TextInput.InputClasses" autocomplete="current-password" aria-required="true" placeholder="Please enter your password." />
                             </div>
-                            <ValidationMessage For="() => Input.Password" class="@Css.ValidationMessage" />
+                            <ValidationMessage For="() => Input.Password" class="mt-2 text-danger text-sm" />
                         </div>
                     }
-                    <button class="@Css.DangerButton" type="submit">Delete data and close my account</button>
+                    <PrimaryButton Style="ButtonStyle.Red" type="submit">Delete data and close my account</PrimaryButton>
                 </div>
             </EditForm>
         </div>
diff --git a/MyApp/Pages/Account/Manage/Disable2fa.razor b/MyApp/Pages/Account/Manage/Disable2fa.razor
index 2546dc4..6e00cc2 100644
--- a/MyApp/Pages/Account/Manage/Disable2fa.razor
+++ b/MyApp/Pages/Account/Manage/Disable2fa.razor
@@ -11,7 +11,7 @@
 
 <PageTitle>Disable two-factor authentication (2FA)</PageTitle>
 
-<h3 class="@Css.H3">Disable two-factor authentication (2FA)</h3>
+<Heading3>Disable two-factor authentication (2FA)</Heading3>
 
 <div class="max-w-xl">
     <StatusMessage />
@@ -29,7 +29,7 @@
     <div class="mt-4">
         <form @formname="disable-2fa" @onsubmit="OnSubmitAsync" method="post">
             <AntiforgeryToken />
-            <button class="@Css.DangerButton" type="submit">Disable 2FA</button>
+            <PrimaryButton Style="ButtonStyle.Red" type="submit">Disable 2FA</PrimaryButton>
         </form>
     </div>
 </div>
diff --git a/MyApp/Pages/Account/Manage/Email.razor b/MyApp/Pages/Account/Manage/Email.razor
index bee74fc..b807887 100644
--- a/MyApp/Pages/Account/Manage/Email.razor
+++ b/MyApp/Pages/Account/Manage/Email.razor
@@ -17,7 +17,7 @@
 
 <PageTitle>Manage email</PageTitle>
 
-<h3 class="@Css.H3">Manage email</h3>
+<Heading3>Manage email</Heading3>
 
 <div class="max-w-xl">
     <StatusMessage />
@@ -29,37 +29,37 @@
             </form>
             <EditForm id="change-email-form" Model="Input" FormName="change-email" OnValidSubmit="OnValidSubmitAsync" method="post">
                 <DataAnnotationsValidator />
-                <ValidationSummary class="@Css.ValidationSummary" />
+                <ValidationSummary class="mb-3 text-danger text-center font-semibold" />
 
                 <div class="flex flex-col gap-4">
                     @if (_isEmailConfirmed)
                     {
                         <div>
-                            <label for="email" class="@Css.InputLabel">Email</label>
+                            <label for="email" class="@TextInput.LabelClasses">Email</label>
                             <div class="mt-1 relative rounded-md shadow-sm">
-                                <input id="email" type="text" value="@_email" class="@Css.InputText" placeholder="Please enter your email." disabled />
+                                <input id="email" type="text" value="@_email" class="@TextInput.InputClasses" placeholder="Please enter your email." disabled />
                             </div>
                         </div>
                     }
                     else
                     {
                         <div>
-                            <label for="email" class="@Css.InputLabel">Email</label>
+                            <label for="email" class="@TextInput.LabelClasses">Email</label>
                             <div class="mt-1 relative rounded-md shadow-sm">
-                                <input id="email" type="text" value="@_email" class="@Css.InputText" placeholder="Please enter your email." disabled />
+                                <input id="email" type="text" value="@_email" class="@TextInput.InputClasses" placeholder="Please enter your email." disabled />
                             </div>
-                            <button id="email-verification" type="submit" class="@Css.SecondaryButton" form="send-verification-form">Send verification email</button>
+                            <SecondaryButton id="email-verification" type="submit" form="send-verification-form">Send verification email</SecondaryButton>
                         </div>
                     }
                 <div>
-                    <label for="new-email" class="@Css.InputLabel">New email</label>
+                    <label for="new-email" class="@TextInput.LabelClasses">New email</label>
                     <div class="mt-1 relative rounded-md shadow-sm">
-                        <InputText id="new-email" type="text" @bind-Value="Input.NewEmail" class="@Css.InputText" autocomplete="email" aria-required="true" placeholder="Please enter new email." />
+                        <InputText id="new-email" type="text" @bind-Value="Input.NewEmail" class="@TextInput.InputClasses" autocomplete="email" aria-required="true" placeholder="Please enter new email." />
                     </div>
-                    <ValidationMessage For="() => Input.NewEmail" class="@Css.ValidationMessage" />
+                    <ValidationMessage For="() => Input.NewEmail" class="mt-2 text-danger text-sm" />
                 </div>
                 <div>
-                    <button id="change-email-button" type="submit" class="@Css.PrimaryButton">Change email</button>
+                    <PrimaryButton id="change-email-button" type="submit">Change email</PrimaryButton>
                 </div>
             </div>
             </EditForm>
diff --git a/MyApp/Pages/Account/Manage/EnableAuthenticator.razor b/MyApp/Pages/Account/Manage/EnableAuthenticator.razor
index 83b65b4..c0a2d2b 100644
--- a/MyApp/Pages/Account/Manage/EnableAuthenticator.razor
+++ b/MyApp/Pages/Account/Manage/EnableAuthenticator.razor
@@ -22,7 +22,7 @@
 }
 else
 {
-    <h3 class="@Css.H3">Configure authenticator app</h3>
+    <Heading3>Configure authenticator app</Heading3>
 
     <div class="max-w-xl" data-module="pages/Account/Manage/EnableAuthenticator.mjs">
         <StatusMessage class="mb-3" />
@@ -32,11 +32,11 @@ else
                 <li>
                     <p class="my-2">
                         Download a two-factor authenticator app like Microsoft Authenticator for
-                        <a class="@Css.Link" href="https://go.microsoft.com/fwlink/?Linkid=825072">Android</a> and
-                        <a class="@Css.Link" href="https://go.microsoft.com/fwlink/?Linkid=825073">iOS</a> or
+                        <HyperLink class="font-semibold" href="https://go.microsoft.com/fwlink/?Linkid=825072">Android</HyperLink> and
+                        <HyperLink class="font-semibold" href="https://go.microsoft.com/fwlink/?Linkid=825073">iOS</HyperLink> or
                         Google Authenticator for
-                        <a class="@Css.Link" href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2&amp;hl=en">Android</a> and
-                        <a class="@Css.Link" href="https://itunes.apple.com/us/app/google-authenticator/id388497605?mt=8">iOS</a>.
+                        <HyperLink class="font-semibold" href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2&amp;hl=en">Android</HyperLink> and
+                        <HyperLink class="font-semibold" href="https://itunes.apple.com/us/app/google-authenticator/id388497605?mt=8">iOS</HyperLink>.
                     </p>
                 </li>
                 <li>
@@ -45,7 +45,7 @@ else
                     </p>
 
                     <Alert class="my-4" Type="AlertType.Information">
-                        Learn how to <a class="@Css.Link" href="https://go.microsoft.com/fwlink/?Linkid=852423">enable QR code generation</a>.
+                        Learn how to <HyperLink class="font-semibold" href="https://go.microsoft.com/fwlink/?Linkid=852423">enable QR code generation</HyperLink>.
                     </Alert>
 
                     <div data-permanent id="qrCode"></div>
@@ -60,17 +60,17 @@ else
                         <div class="max-w-xs">
                             <EditForm id="send-code" Model="Input" FormName="send-code" OnValidSubmit="OnValidSubmitAsync" method="post">
                                 <DataAnnotationsValidator />
-                                <ValidationSummary class="@Css.ValidationSummary" />
+                                <ValidationSummary class="mb-3 text-danger text-center font-semibold" />
 
                                 <div class="flex flex-col gap-4">
                                     <div>
-                                        <label for="code" class="@Css.InputLabel">Verification Code</label>
+                                        <label for="code" class="@TextInput.LabelClasses">Verification Code</label>
                                         <div class="mt-1 relative rounded-md shadow-sm">
-                                            <InputText id="code" type="text" @bind-Value="Input.Code" class="@Css.InputText" autocomplete="off" placeholder="Please enter the code." />
+                                            <InputText id="code" type="text" @bind-Value="Input.Code" class="@TextInput.InputClasses" autocomplete="off" placeholder="Please enter the code." />
                                         </div>
-                                        <ValidationMessage For="() => Input.Code" class="@Css.ValidationMessage" />
+                                        <ValidationMessage For="() => Input.Code" class="mt-2 text-danger text-sm" />
                                     </div>
-                                    <button type="submit" class="@Css.PrimaryButton">Verify</button>
+                                    <PrimaryButton type="submit">Verify</PrimaryButton>
                                 </div>
                             </EditForm>
                         </div>
diff --git a/MyApp/Pages/Account/Manage/ExternalLogins.razor b/MyApp/Pages/Account/Manage/ExternalLogins.razor
index b17d0e4..fdc633a 100644
--- a/MyApp/Pages/Account/Manage/ExternalLogins.razor
+++ b/MyApp/Pages/Account/Manage/ExternalLogins.razor
@@ -18,7 +18,7 @@
     <StatusMessage class="mb-3" />
     @if (_currentLogins?.Count > 0)
     {
-        <h3 class="@Css.H3">Registered Logins</h3>
+        <Heading3>Registered Logins</Heading3>
         <div class="prose prose-xl">
             <table class="table">
                 <tbody>
@@ -34,7 +34,7 @@
                                         <div>
                                             <input type="hidden" name="@nameof(LoginProvider)" value="@login.LoginProvider" />
                                             <input type="hidden" name="@nameof(ProviderKey)" value="@login.ProviderKey" />
-                                            <button type="submit" class="@Css.PrimaryButton" title="Remove this @login.ProviderDisplayName login from your account">Remove</button>
+                                            <PrimaryButton type="submit" title=@($"Remove this {login.ProviderDisplayName} login from your account")>Remove</PrimaryButton>
                                         </div>
                                     </form>
                                 }
@@ -51,7 +51,7 @@
     }
     @if (_otherLogins?.Count > 0)
     {
-        <h4 class="@Css.H4">Add another service to log in.</h4>
+        <Heading4>Add another service to log in.</Heading4>
         <form id="link-login-form" class="form-horizontal" action="/Account/Manage/LinkExternalLogin" method="post">
             <AntiforgeryToken />
             <div id="socialLoginList">
@@ -60,7 +60,7 @@
                     {
                         <button id="link-login-button-@provider.Name"
                                 type="submit"
-                                class="@Css.SecondaryButton mr-2 mb-2"
+                                class="@SecondaryButton.Classes mr-2 mb-2"
                                 name="Provider"
                                 value="@provider.Name"
                                 title="Log in using your @provider.DisplayName account">
diff --git a/MyApp/Pages/Account/Manage/GenerateRecoveryCodes.razor b/MyApp/Pages/Account/Manage/GenerateRecoveryCodes.razor
index cfdb67e..038a18a 100644
--- a/MyApp/Pages/Account/Manage/GenerateRecoveryCodes.razor
+++ b/MyApp/Pages/Account/Manage/GenerateRecoveryCodes.razor
@@ -18,7 +18,7 @@
     }
     else
     {
-        <h3 class="@Css.H3">Generate two-factor authentication (2FA) recovery codes</h3>
+        <Heading3>Generate two-factor authentication (2FA) recovery codes</Heading3>
         <Alert Type="AlertType.Warning">
             <p class="mb-3">
                 <strong>Put these codes in a safe place.</strong>
@@ -28,14 +28,14 @@
             </p>
             <p class="mb-3">
                 Generating new recovery codes does not change the keys used in authenticator apps. 
-                If you wish to change the key used in an authenticator app you should 
-                <a class="@Css.Link" href="/Account/Manage/ResetAuthenticator">reset your authenticator keys.</a>
+                If you wish to change the key used in an authenticator app you should
+                <HyperLink class="font-semibold" href="/Account/Manage/ResetAuthenticator">reset your authenticator keys.</HyperLink>
             </p>
         </Alert>
         <div class="mt-4">
             <form @formname="generate-recovery-codes" @onsubmit="OnSubmitAsync" method="post">
                 <AntiforgeryToken />
-                <button class="@Css.DangerButton" type="submit">Generate Recovery Codes</button>
+                <PrimaryButton Style="ButtonStyle.Red" type="submit">Generate Recovery Codes</PrimaryButton>
             </form>
         </div>
     }
diff --git a/MyApp/Pages/Account/Manage/Index.razor b/MyApp/Pages/Account/Manage/Index.razor
index 28cbe21..f6dc208 100644
--- a/MyApp/Pages/Account/Manage/Index.razor
+++ b/MyApp/Pages/Account/Manage/Index.razor
@@ -14,7 +14,7 @@
 
 <PageTitle>Profile</PageTitle>
 
-<h3 class="@Css.H3">Profile</h3>
+<Heading3>Profile</Heading3>
 <StatusMessage />
 
 <div class="max-w-xl">
@@ -22,24 +22,24 @@
         <EditForm id="profile-form" Model="Input" FormName="profile" OnValidSubmit="OnValidSubmitAsync" method="post"
                   class="px-4 bg-white dark:bg-black sm:p-6">
             <DataAnnotationsValidator />
-            <ValidationSummary class="@Css.ValidationSummary" />
+            <ValidationSummary class="mb-3 text-danger text-center font-semibold" />
 
             <div class="flex flex-col gap-y-4">
                 <div>
-                    <label for="username" class="@Css.InputLabel">Username</label>
+                    <label for="username" class="@TextInput.LabelClasses">Username</label>
                     <div class="mt-1 relative rounded-md shadow-sm">
-                        <input id="username" type="text" value="@_username" class="@Css.InputText" placeholder="Please choose your username." disabled />
+                        <input id="username" type="text" value="@_username" class="@TextInput.InputClasses" placeholder="Please choose your username." disabled />
                     </div>
                 </div>
                 <div>
-                    <label for="phone-number" class="@Css.InputLabel">Phone number</label>
+                    <label for="phone-number" class="@TextInput.LabelClasses">Phone number</label>
                     <div class="mt-1 relative rounded-md shadow-sm">
-                        <InputText id="phone-number" type="text" @bind-Value="Input.PhoneNumber" class="@Css.InputText" placeholder="Please enter your phone number." />
+                        <InputText id="phone-number" type="text" @bind-Value="Input.PhoneNumber" class="@TextInput.InputClasses" placeholder="Please enter your phone number." />
                     </div>
-                    <ValidationMessage For="() => Input.PhoneNumber" class="@Css.ValidationMessage" />
+                    <ValidationMessage For="() => Input.PhoneNumber" class="mt-2 text-danger text-sm" />
                 </div>
                 <div>
-                    <button id="update-profile-button" type="submit" class="@Css.PrimaryButton">Save</button>
+                    <PrimaryButton id="update-profile-button" type="submit">Save</PrimaryButton>
                 </div>
             </div>
         </EditForm>
diff --git a/MyApp/Pages/Account/Manage/PersonalData.razor b/MyApp/Pages/Account/Manage/PersonalData.razor
index c592f8f..85f1fe3 100644
--- a/MyApp/Pages/Account/Manage/PersonalData.razor
+++ b/MyApp/Pages/Account/Manage/PersonalData.razor
@@ -8,7 +8,7 @@
 
 <PageTitle>Personal Data</PageTitle>
 
-<h3 class="@Css.H3">Personal Data</h3>
+<Heading3>Personal Data</Heading3>
 
 <div class="max-w-xl">
     <StatusMessage />
@@ -20,10 +20,10 @@
         </p>
         <form id="download-data" action="/Account/Manage/DownloadPersonalData" method="post">
             <AntiforgeryToken />
-            <button class="@Css.PrimaryButton" type="submit">Download</button>
+            <PrimaryButton type="submit">Download</PrimaryButton>
         </form>
         <p>
-            <a id="delete" href="/Account/Manage/DeletePersonalData" class="@Css.DangerButton">Delete</a>
+            <PrimaryButton Style="ButtonStyle.Red" id="delete" href="/Account/Manage/DeletePersonalData">Delete</PrimaryButton>
         </p>
     </div>
 </div>
diff --git a/MyApp/Pages/Account/Manage/ResetAuthenticator.razor b/MyApp/Pages/Account/Manage/ResetAuthenticator.razor
index 481f7c4..80e5da8 100644
--- a/MyApp/Pages/Account/Manage/ResetAuthenticator.razor
+++ b/MyApp/Pages/Account/Manage/ResetAuthenticator.razor
@@ -12,7 +12,7 @@
 
 <PageTitle>Reset authenticator key</PageTitle>
 
-<h3 class="@Css.H3">Reset authenticator key</h3>
+<Heading3>Reset authenticator key</Heading3>
 
 <div class="max-w-xl">
     <StatusMessage />
@@ -30,7 +30,7 @@
     <div class="pt-4">
         <form id="reset-authenticator-form" @formname="reset-authenticator" @onsubmit="OnSubmitAsync" method="post">
             <AntiforgeryToken />
-            <button id="reset-authenticator-button" class="@Css.DangerButton" type="submit">Reset authenticator key</button>
+            <PrimaryButton Style="ButtonStyle.Red" id="reset-authenticator-button" type="submit">Reset authenticator key</PrimaryButton>
         </form>
     </div>
 </div>
diff --git a/MyApp/Pages/Account/Manage/SetPassword.razor b/MyApp/Pages/Account/Manage/SetPassword.razor
index c946cce..4cea4d2 100644
--- a/MyApp/Pages/Account/Manage/SetPassword.razor
+++ b/MyApp/Pages/Account/Manage/SetPassword.razor
@@ -12,7 +12,7 @@
 
 <PageTitle>Set password</PageTitle>
 
-<h3 class="@Css.H3">Set your password</h3>
+<Heading3>Set your password</Heading3>
 
 <div class="max-w-xl">
     <StatusMessage class="mb-3" Message="@_message" />
@@ -26,25 +26,25 @@
         <div class="px-4 bg-white dark:bg-black sm:p-6">
             <EditForm id="set-password-form" Model="Input" FormName="set-password" OnValidSubmit="OnValidSubmitAsync" method="post">
                 <DataAnnotationsValidator />
-                <ValidationSummary class="@Css.ValidationSummary" />
+                <ValidationSummary class="mb-3 text-danger text-center font-semibold" />
 
                 <div class="flex flex-col gap-4">
                     <div>
-                        <label for="new-password" class="@Css.InputLabel">New password</label>
+                        <label for="new-password" class="@TextInput.LabelClasses">New password</label>
                         <div class="mt-1 relative rounded-md shadow-sm">
-                            <InputText id="new-password" type="password" @bind-Value="Input.NewPassword" class="@Css.InputText" autocomplete="new-password" placeholder="Please enter your new password." />
+                            <InputText id="new-password" type="password" @bind-Value="Input.NewPassword" class="@TextInput.InputClasses" autocomplete="new-password" placeholder="Please enter your new password." />
                         </div>
-                        <ValidationMessage For="() => Input.NewPassword" class="@Css.ValidationMessage" />
+                        <ValidationMessage For="() => Input.NewPassword" class="mt-2 text-danger text-sm" />
                     </div>
                     <div>
-                        <label for="confirm-password" class="@Css.InputLabel">Confirm password</label>
+                        <label for="confirm-password" class="@TextInput.LabelClasses">Confirm password</label>
                         <div class="mt-1 relative rounded-md shadow-sm">
-                            <InputText id="confirm-password" type="password" @bind-Value="Input.ConfirmPassword" class="@Css.InputText" autocomplete="new-password" placeholder="Please confirm your new password." />
+                            <InputText id="confirm-password" type="password" @bind-Value="Input.ConfirmPassword" class="@TextInput.InputClasses" autocomplete="new-password" placeholder="Please confirm your new password." />
                         </div>
-                        <ValidationMessage For="() => Input.ConfirmPassword" class="@Css.ValidationMessage" />
+                        <ValidationMessage For="() => Input.ConfirmPassword" class="mt-2 text-danger text-sm" />
                     </div>
                     <div>
-                        <button type="submit" class="@Css.PrimaryButton">Set password</button>
+                        <PrimaryButton type="submit">Set password</PrimaryButton>
                     </div>
                 </div>
             </EditForm>
diff --git a/MyApp/Pages/Account/Manage/TwoFactorAuthentication.razor b/MyApp/Pages/Account/Manage/TwoFactorAuthentication.razor
index fc05ec9..7dcd181 100644
--- a/MyApp/Pages/Account/Manage/TwoFactorAuthentication.razor
+++ b/MyApp/Pages/Account/Manage/TwoFactorAuthentication.razor
@@ -12,7 +12,7 @@
 
 <PageTitle>Two-factor authentication (2FA)</PageTitle>
 
-<h3 class="@Css.H3">Two-factor authentication (2FA)</h3>
+<Heading3>Two-factor authentication (2FA)</Heading3>
 
 <div class="max-w-xl">
     <StatusMessage class="mb-3" />
@@ -25,45 +25,45 @@
             {
                 <Alert Type="AlertType.Error">
                     <strong>You have no recovery codes left.</strong>
-                    <p>You must <a class="@Css.Link" href="/Account/Manage/GenerateRecoveryCodes">generate a new set of recovery codes</a> before you can log in with a recovery code.</p>
+                    <p>You must <HyperLink href="/Account/Manage/GenerateRecoveryCodes">generate a new set of recovery codes</HyperLink> before you can log in with a recovery code.</p>
                 </Alert>
             }
             else if (_recoveryCodesLeft == 1)
             {
                 <Alert Type="AlertType.Error">
                     <strong>You have 1 recovery code left.</strong>
-                    <p>You can <a class="@Css.Link" href="/Account/Manage/GenerateRecoveryCodes">generate a new set of recovery codes</a>.</p>
+                    <p>You can <HyperLink href="/Account/Manage/GenerateRecoveryCodes">generate a new set of recovery codes</HyperLink>.</p>
                 </Alert>
             }
             else if (_recoveryCodesLeft <= 3)
             {
                 <Alert Type="AlertType.Error">
                     <strong>You have @_recoveryCodesLeft recovery codes left.</strong>
-                    <p>You should <a class="@Css.Link" href="/Account/Manage/GenerateRecoveryCodes">generate a new set of recovery codes</a>.</p>
+                    <p>You should <HyperLink href="/Account/Manage/GenerateRecoveryCodes">generate a new set of recovery codes</HyperLink>.</p>
                 </Alert>
             }
 
             if (_isMachineRemembered)
             {
                 <form class="inline-block" @formname="forget-browser" @onsubmit="OnSubmitForgetBrowserAsync" method="post">
-                    <button type="submit" class="@Css.PrimaryButton">Forget this browser</button>
+                    <PrimaryButton type="submit">Forget this browser</PrimaryButton>
                 </form>
             }
 
-            <a href="/Account/Manage/Disable2fa" class="@Css.PrimaryButton">Disable 2FA</a>
-            <a href="/Account/Manage/GenerateRecoveryCodes" class="@Css.PrimaryButton">Reset recovery codes</a>
+            <PrimaryButton href="/Account/Manage/Disable2fa">Disable 2FA</PrimaryButton>
+            <PrimaryButton href="/Account/Manage/GenerateRecoveryCodes">Reset recovery codes</PrimaryButton>
         }
 
         <div class="mt-4">
-            <h4 class="@Css.H4">Authenticator app</h4>
+            <Heading4 class="mb-4">Authenticator app</Heading4>
             @if (!_hasAuthenticator)
             {
-                <a id="enable-authenticator" href="/Account/Manage/EnableAuthenticator" class="@Css.PrimaryButton">Add authenticator app</a>
+                <PrimaryButton id="enable-authenticator" href="/Account/Manage/EnableAuthenticator">Add authenticator app</PrimaryButton>
             }
             else
             {
-                <a id="enable-authenticator" href="/Account/Manage/EnableAuthenticator" class="@Css.PrimaryButton">Set up authenticator app</a>
-                <a id="reset-authenticator" href="/Account/Manage/ResetAuthenticator" class="@Css.PrimaryButton">Reset authenticator app</a>
+                <PrimaryButton id="enable-authenticator" href="/Account/Manage/EnableAuthenticator">Set up authenticator app</PrimaryButton>
+                <PrimaryButton id="reset-authenticator" href="/Account/Manage/ResetAuthenticator">Reset authenticator app</PrimaryButton>
             }
         </div>
     }
diff --git a/MyApp/Pages/Account/Register.razor b/MyApp/Pages/Account/Register.razor
index 85c2968..2880365 100644
--- a/MyApp/Pages/Account/Register.razor
+++ b/MyApp/Pages/Account/Register.razor
@@ -21,39 +21,39 @@
 <PageTitle>Register</PageTitle>
 
 <div class="mt-8 mx-auto max-w-lg">
-    <h1 class="mb-3 @Css.H1">Register</h1>
+    <Heading1>Register</Heading1>
 
     <StatusMessage Message="@Message" />
     <div class="mt-3 shadow overflow-hidden sm:rounded-md">
         <div class="px-4 bg-white dark:bg-black sm:p-6">
             <EditForm id="registerForm" Model="Input" asp-route-returnUrl="@ReturnUrl" method="post" OnValidSubmit="RegisterUser" FormName="register">
-                <h3 class="@Css.H3">Create a new account.</h3>
+                <Heading3>Create a new account.</Heading3>
                 <DataAnnotationsValidator />
-                <ValidationSummary class="@Css.ValidationSummary" />
+                <ValidationSummary class="mb-3 text-danger text-center font-semibold" />
                 <div class="flex flex-col gap-y-4">
                     <div>
-                        <label for="email" class="@Css.InputLabel">Email</label>
+                        <label for="email" class="@TextInput.LabelClasses">Email</label>
                         <div class="mt-1 relative rounded-md shadow-sm">
-                            <InputText id="email" type="text" @bind-Value="Input.Email" class="@Css.InputText" autocomplete="username" aria-required="true" placeholder="name@example.com" />
+                            <InputText id="email" type="text" @bind-Value="Input.Email" class="@TextInput.InputClasses" autocomplete="username" aria-required="true" placeholder="name@example.com" />
                         </div>
-                        <ValidationMessage For="() => Input.Email" class="@Css.ValidationMessage" />
+                        <ValidationMessage For="() => Input.Email" class="mt-2 text-danger text-sm" />
                     </div>
                     <div>
-                        <label for="password" class="@Css.InputLabel">Password</label>
+                        <label for="password" class="@TextInput.LabelClasses">Password</label>
                         <div class="mt-1 relative rounded-md shadow-sm">
-                            <InputText id="password" type="password" @bind-Value="Input.Password" class="@Css.InputText" autocomplete="new-password" aria-required="true" placeholder="password" />
+                            <InputText id="password" type="password" @bind-Value="Input.Password" class="@TextInput.InputClasses" autocomplete="new-password" aria-required="true" placeholder="password" />
                         </div>
-                        <ValidationMessage For="() => Input.Password" class="@Css.ValidationMessage" />
+                        <ValidationMessage For="() => Input.Password" class="mt-2 text-danger text-sm" />
                     </div>
                     <div>
                         <label for="confirm-password">Confirm Password</label>
                         <div class="mt-1 relative rounded-md shadow-sm">
-                            <InputText id="confirm-password" type="password" @bind-Value="Input.ConfirmPassword" class="@Css.InputText" autocomplete="new-password" aria-required="true" placeholder="password" />
+                            <InputText id="confirm-password" type="password" @bind-Value="Input.ConfirmPassword" class="@TextInput.InputClasses" autocomplete="new-password" aria-required="true" placeholder="password" />
                         </div>
-                        <ValidationMessage For="() => Input.ConfirmPassword" class="@Css.ValidationMessage" />
+                        <ValidationMessage For="() => Input.ConfirmPassword" class="mt-2 text-danger text-sm" />
                     </div>
                     <div>
-                        <button id="registerSubmit" type="submit" class="@Css.PrimaryButton">Register</button>
+                        <PrimaryButton id="registerSubmit" type="submit">Register</PrimaryButton>
                     </div>
                 </div>
             </EditForm>
@@ -61,7 +61,7 @@
     </div>
     <div class="mt-8">
         <section>
-            <h3 class="@Css.H3">Use another service to register.</h3>
+            <Heading3>Use another service to register.</Heading3>
             <ExternalLoginPicker />
         </section>
     </div>
diff --git a/MyApp/Pages/Account/RegisterConfirmation.razor b/MyApp/Pages/Account/RegisterConfirmation.razor
index 8fd470e..c3a4b1a 100644
--- a/MyApp/Pages/Account/RegisterConfirmation.razor
+++ b/MyApp/Pages/Account/RegisterConfirmation.razor
@@ -15,7 +15,7 @@
 <PageTitle>Register confirmation</PageTitle>
 
 <div class="mt-8 mx-auto max-w-lg">
-    <h1 class="@Css.H1">Register confirmation</h1>
+    <Heading1>Register confirmation</Heading1>
 
     <StatusMessage Message="@statusMessage" />
 
@@ -23,11 +23,11 @@
     {
         <p class="my-4">
             This app does not currently have a real email sender registered, see 
-            <a class="@Css.Link" href="https://aka.ms/aspaccountconf">these docs</a> for how to configure a real email sender.
+            <HyperLink class="font-semibold" href="https://aka.ms/aspaccountconf">these docs</HyperLink> for how to configure a real email sender.
         </p>
         <p class="my-4">
             Normally this would be emailed:
-            <a id="confirm-link" class="@Css.Link" href="@emailConfirmationLink">Click here to confirm your account</a>
+            <HyperLink class="font-semibold" id="confirm-link" href="@emailConfirmationLink">Click here to confirm your account</HyperLink>
         </p>
     }
     else
diff --git a/MyApp/Pages/Account/ResendEmailConfirmation.razor b/MyApp/Pages/Account/ResendEmailConfirmation.razor
index f7c1370..7bdc67c 100644
--- a/MyApp/Pages/Account/ResendEmailConfirmation.razor
+++ b/MyApp/Pages/Account/ResendEmailConfirmation.razor
@@ -17,23 +17,23 @@
 <PageTitle>Resend email confirmation</PageTitle>
 
 <div class="mt-8 mx-auto max-w-lg">
-    <h1 class="mb-3 @Css.H1">Resend email confirmation</h1>
-    <h3 class="@Css.H3">Enter your email.</h3>
+    <Heading1>Resend email confirmation</Heading1>
+    <Heading3>Enter your email.</Heading3>
 
     <StatusMessage class="mb-3" Message="@_message" />
     <EditForm Model="Input" FormName="resend-email-confirmation" OnValidSubmit="OnValidSubmitAsync" method="post">
         <DataAnnotationsValidator />
-        <ValidationSummary class="@Css.ValidationSummary" />
+        <ValidationSummary class="mb-3 text-danger text-center font-semibold" />
         <div class="flex flex-col gap-y-4">
             <div>
-                <label for="email" class="@Css.InputLabel">Email</label>
+                <label for="email" class="@TextInput.LabelClasses">Email</label>
                 <div class="mt-1 relative rounded-md shadow-sm">
-                    <InputText id="email" type="text" @bind-Value="Input.Email" class="@Css.InputText" aria-required="true" placeholder="name@example.com" />
+                    <InputText id="email" type="text" @bind-Value="Input.Email" class="@TextInput.InputClasses" aria-required="true" placeholder="name@example.com" />
                 </div>
-                <ValidationMessage For="() => Input.Email" class="@Css.ValidationMessage" />
+                <ValidationMessage For="() => Input.Email" class="mt-2 text-danger text-sm" />
             </div>
             <div>
-                <button type="submit" class="@Css.PrimaryButton">Resend</button>
+                <PrimaryButton type="submit">Resend</PrimaryButton>
             </div>
         </div>
     </EditForm>
diff --git a/MyApp/Pages/Account/ResetPassword.razor b/MyApp/Pages/Account/ResetPassword.razor
index 1c361cf..7aa514e 100644
--- a/MyApp/Pages/Account/ResetPassword.razor
+++ b/MyApp/Pages/Account/ResetPassword.razor
@@ -14,41 +14,41 @@
 <PageTitle>Reset password</PageTitle>
 
 <div class="mt-8 mx-auto max-w-lg">
-    <h1 class="@Css.H1">Reset password</h1>
-    <h2 class="@Css.H2">Reset your password.</h2>
+    <Heading1>Reset password</Heading1>
+    <Heading2>Reset your password.</Heading2>
 
     <StatusMessage Message="@Message" />
     <div class="mt-3 shadow overflow-hidden sm:rounded-md">
         <div class="px-4 bg-white dark:bg-black sm:p-6">
             <EditForm id="reset-password-form" Model="Input" FormName="reset-password" OnValidSubmit="OnValidSubmitAsync" method="post">
                 <DataAnnotationsValidator />
-                <ValidationSummary class="@Css.ValidationSummary" />
+                <ValidationSummary class="mb-3 text-danger text-center font-semibold" />
                 <input type="hidden" name="Input.Code" value="@Input.Code" />
 
                 <div class="flex flex-col gap-y-4">
                     <div>
-                        <label for="email" class="@Css.InputLabel">Email</label>
+                        <label for="email" class="@TextInput.LabelClasses">Email</label>
                         <div class="mt-1 relative rounded-md shadow-sm">
-                            <InputText id="email" type="text" @bind-Value="Input.Email" class="@Css.InputText" autocomplete="username" aria-required="true" placeholder="name@example.com" />
+                            <InputText id="email" type="text" @bind-Value="Input.Email" class="@TextInput.InputClasses" autocomplete="username" aria-required="true" placeholder="name@example.com" />
                         </div>
-                        <ValidationMessage For="() => Input.Email" class="@Css.ValidationMessage" />
+                        <ValidationMessage For="() => Input.Email" class="mt-2 text-danger text-sm" />
                     </div>
                     <div>
-                        <label for="password" class="@Css.InputLabel">Password</label>
+                        <label for="password" class="@TextInput.LabelClasses">Password</label>
                         <div class="mt-1 relative rounded-md shadow-sm">
-                            <InputText id="password" type="password" @bind-Value="Input.Password" class="@Css.InputText" autocomplete="new-password" aria-required="true" placeholder="Please enter your password." />
+                            <InputText id="password" type="password" @bind-Value="Input.Password" class="@TextInput.InputClasses" autocomplete="new-password" aria-required="true" placeholder="Please enter your password." />
                         </div>
-                        <ValidationMessage For="() => Input.Password" class="@Css.ValidationMessage" />
+                        <ValidationMessage For="() => Input.Password" class="mt-2 text-danger text-sm" />
                     </div>
                     <div>
-                        <label for="confirm-password" class="@Css.InputLabel">Confirm password</label>
+                        <label for="confirm-password" class="@TextInput.LabelClasses">Confirm password</label>
                         <div class="mt-1 relative rounded-md shadow-sm">
-                            <InputText id="confirm-password" type="password" @bind-Value="Input.ConfirmPassword" class="@Css.InputText" autocomplete="new-password" aria-required="true" placeholder="Please confirm your password." />
+                            <InputText id="confirm-password" type="password" @bind-Value="Input.ConfirmPassword" class="@TextInput.InputClasses" autocomplete="new-password" aria-required="true" placeholder="Please confirm your password." />
                         </div>
-                        <ValidationMessage For="() => Input.ConfirmPassword" class="@Css.ValidationMessage" />
+                        <ValidationMessage For="() => Input.ConfirmPassword" class="mt-2 text-danger text-sm" />
                     </div>
                     <div>
-                        <button type="submit" class="@Css.PrimaryButton">Reset</button>
+                        <PrimaryButton type="submit">Reset</PrimaryButton>
                     </div>
                 </div>
             </EditForm>
diff --git a/MyApp/Pages/Account/ResetPasswordConfirmation.razor b/MyApp/Pages/Account/ResetPasswordConfirmation.razor
index 385b48e..38a05ca 100644
--- a/MyApp/Pages/Account/ResetPasswordConfirmation.razor
+++ b/MyApp/Pages/Account/ResetPasswordConfirmation.razor
@@ -3,10 +3,10 @@
 
 <div class="mt-8 mx-auto max-w-lg">
 
-    <h1 class="@Css.H1">Reset password confirmation</h1>
+    <Heading1>Reset password confirmation</Heading1>
 
     <p class="my-4">
-        Your password has been reset. Please <a class="@Css.Link" href="/Account/Login">click here to log in</a>.
+        Your password has been reset. Please <HyperLink class="font-semibold" href="/Account/Login">click here to log in</HyperLink>.
     </p>
 
 </div>
diff --git a/MyApp/Pages/Counter.razor b/MyApp/Pages/Counter.razor
index 5b57824..29150e0 100644
--- a/MyApp/Pages/Counter.razor
+++ b/MyApp/Pages/Counter.razor
@@ -3,7 +3,7 @@
 <PageTitle>Counter</PageTitle>
 
 <div class="mt-8 mb-20 mx-auto max-w-fit">
-    <h1 class="@Css.H1">Counter</h1>
+    <Heading1>Counter</Heading1>
 
     <div data-component="pages/Counter.mjs"></div>
 
diff --git a/MyApp/Pages/Secure/Bookings.razor b/MyApp/Pages/Secure/Bookings.razor
index cede1b9..0357f99 100644
--- a/MyApp/Pages/Secure/Bookings.razor
+++ b/MyApp/Pages/Secure/Bookings.razor
@@ -3,7 +3,7 @@
 
 <div class="mt-8 mb-20 mx-auto max-w-fit">
 
-    <h1 class="mb-4 @Css.H1">Bookings AutoQueryGrid</h1>
+    <Heading1>Bookings AutoQueryGrid</Heading1>
 
     <div id="bookings" data-component="pages/Bookings.mjs"></div>
 
@@ -18,9 +18,9 @@
 
         <h4 class="mt-20 text-center text-xl">
             Manage Bookings in
-            <a href="/admin/#Bookings" data-enhance-nav="false" class="font-semibold text-indigo-600 dark:text-indigo-300 hover:text-indigo-500">Admin</a>,
-            <a href="/locode/QueryBookings" data-enhance-nav="false" class="font-semibold text-indigo-600 dark:text-indigo-300 hover:text-indigo-500">Locode</a> or
-            <a href="/ui/QueryBookings" data-enhance-nav="false" class="font-semibold text-indigo-600 dark:text-indigo-300 hover:text-indigo-500">API Explorer</a>
+            <HyperLink class="font-semibold" href="/admin/#Bookings" data-enhance-nav="false">Admin</HyperLink>,
+            <HyperLink class="font-semibold" href="/locode/QueryBookings" data-enhance-nav="false">Locode</HyperLink> or
+            <HyperLink class="font-semibold" href="/ui/QueryBookings" data-enhance-nav="false">API Explorer</HyperLink>
         </h4>
 
         <div class="mt-20 mx-auto text-gray-500 max-w-screen-lg">
@@ -29,13 +29,13 @@
             </h2>
             <p class="my-3 mx-auto text-base text-gray-500 sm:text-lg md:mt-5 md:text-xl">
                 The Bookings APIs are built using
-                <a class="@Css.Link" href="https://docs.servicestack.net/autoquery-crud">AutoQuery CRUD</a>,
+                <HyperLink class="font-semibold" href="https://docs.servicestack.net/autoquery-crud">AutoQuery CRUD</HyperLink>,
                 allowing for rapid development of typed CRUD Services using only declarative POCO DTOs, enabling
                 developing entire
-                <a class="@Css.Link" href="https://docs.servicestack.net/autoquery-crud#advanced-crud-example">audited</a>
-                &amp; <a class="@Css.Link" href="https://docs.servicestack.net/autoquery-audit-log">verifiable</a>
+                <HyperLink class="font-semibold" href="https://docs.servicestack.net/autoquery-crud#advanced-crud-example">audited</HyperLink>
+                &amp; <HyperLink class="font-semibold" href="https://docs.servicestack.net/autoquery-audit-log">verifiable</HyperLink>
                 data-driven systems in mins
-                <a class="@Css.Link" href="https://docs.servicestack.net/autoquery-crud-bookings">more...</a>
+                <HyperLink class="font-semibold" href="https://docs.servicestack.net/autoquery-crud-bookings">more...</HyperLink>
             </p>
             <iframe class="mt-4 w-full aspect-video" src="https://www.youtube.com/embed/rSFiikDjGos" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
         </div>
diff --git a/MyApp/Pages/Weather.razor b/MyApp/Pages/Weather.razor
index 67b5f4b..f666ca0 100644
--- a/MyApp/Pages/Weather.razor
+++ b/MyApp/Pages/Weather.razor
@@ -4,7 +4,7 @@
 <PageTitle>Weather</PageTitle>
 
 <div class="mt-8 mb-20 mx-auto max-w-screen-md">
-    <h1 class="@Css.H1">Weather</h1>
+    <Heading1>Weather</Heading1>
 
     <p class="my-4">This component demonstrates showing data.</p>