diff --git a/.squad/agents/legolas/history.md b/.squad/agents/legolas/history.md
index 1ca1f89d..f72929eb 100644
--- a/.squad/agents/legolas/history.md
+++ b/.squad/agents/legolas/history.md
@@ -649,3 +649,85 @@ Fix theme color selector persistence — selected color not surviving page reloa
 ### Outcome
 
 ✅ Theme color and brightness now persist correctly across page reloads and sessions. PR #239 opened, ready for review.
+
+## Learnings
+
+### 2025-07 — Button Variant Styling (Issue #292, branch squad/291-input-css-fine-tuning)
+
+**Source of truth for app button styles:** `src/Web/Styles/input.css` under `@layer components`. This compiles to `src/Web/wwwroot/css/tailwind.css` (gitignored — regenerated by `npm run tw:build`).
+
+**Tailwind v4 grouped selector pattern:** Use a shared multi-class selector to avoid duplicating base styles across variants:
+
+```css
+.btn-primary, .btn-secondary, .btn-warning, .btn-destructive {
+  @apply inline-flex items-center gap-2 ... focus-visible:ring-2 disabled:opacity-50;
+}
+```
+
+Then each variant only declares its colour-specific overrides. This is idiomatic Tailwind v4 component authoring.
+
+**Fixed colour palette — all four variants:** All button variants use fixed Tailwind palette classes, not `var(--primary-*)` theme tokens. `.btn-primary` is green, `.btn-secondary` is blue, `.btn-warning` is amber, and `.btn-destructive` is red. None shift when the user picks a different colour theme — the palette is intentionally static to give each variant a clear, invariant semantic meaning.
+
+**Bootstrap-like interactive states checklist:**
+
+- `cursor-pointer` + `select-none` — Bootstrap sets these on buttons
+- `focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-{color}` — replaces Bootstrap's box-shadow focus ring
+- `disabled:opacity-50 disabled:cursor-not-allowed` — Bootstrap uses `opacity: 0.65`
+- `active:scale-[0.98]` — subtle press affordance (Bootstrap uses active filter)
+
+**ConfirmDeleteDialog.razor:** Was using hardcoded inline Tailwind for delete/cancel buttons (`bg-red-600 text-white ...`). Migrated to `.btn-destructive` / `.btn-secondary`. File: `src/Web/Features/BlogPosts/Delete/ConfirmDeleteDialog.razor`.
+
+**ManageRoles.razor inline role chip buttons:** Left as-is — they are compact chip/badge-style elements (px-3 py-1 text-sm) with a different visual purpose. Not the same pattern as action buttons.
+
+**Pre-existing branch changes:** The `squad/291-input-css-fine-tuning` branch had uncommitted Profile.razor changes that upgraded role badges from soft pastel (`bg-red-100 text-red-800`) to solid (`bg-red-700 text-white`). Three bUnit tests in `tests/Web.Tests.Bunit/Features/ProfileTests.cs` needed updating to match the current Profile.razor output.
+
+**Key files:**
+
+- Button CSS source: `src/Web/Styles/input.css`
+- Confirm delete dialog: `src/Web/Features/BlogPosts/Delete/ConfirmDeleteDialog.razor`
+- Profile badge tests: `tests/Web.Tests.Bunit/Features/ProfileTests.cs`
+- Tailwind build: `npm run tw:build`
+
+## Learnings
+
+### 2026-05-07 — Issue #292 follow-up: btn-destructive consistency
+
+**Task:** The inline delete button in `src/Web/Features/BlogPosts/List/Index.razor` had hardcoded Tailwind classes (`bg-red-600 text-white hover:bg-red-700 ...`) instead of the shared `btn-destructive` utility defined in `input.css`. The delete dialog already used `btn-destructive` (from the #292 main work), but the list page was inconsistent.
+
+**Change:**
+
+- Replaced `class="inline-block px-3 py-1 text-sm rounded font-medium bg-red-600 text-white hover:bg-red-700 transition"` with `class="btn-destructive"` on the delete button in `Index.razor`.
+- Added bUnit test `BlogIndexUsesBtnDestructiveForInlineDeleteButton` to `RazorSmokeTests.cs` to lock the variant in place and prevent regression.
+
+**Rule reinforced:** Any destructive action (delete) must always use `.btn-destructive`, never raw Tailwind. This keeps colour/dark-mode and spacing behaviour consistent across all delete surfaces.
+
+**Test results:** Architecture.Tests 16/16, Web.Tests.Bunit 74/74 — all green.
+
+## Learnings
+
+### 2025-07 — PR #295 Review (dark-mode colours + PageHeadingComponent)
+
+**What I reviewed:**
+
+- `input.css` centralised button variants, fixed dark-mode heading/paragraph contrast, migrated body/table/form colours to primary palette
+- New `PageHeadingComponent.razor` (shared heading + PageTitle wrapper)
+- All feature pages (Create, Edit, Index, ManageRoles, Profile) adopt the new component
+- `NavMenu.razor` switched from inline Tailwind utility string on `<nav>` to `class="nav"`
+- `_Imports.razor` adds `@using MyBlog.Web.Components.Shared` for Features
+- bUnit tests updated to match new colour classes
+
+**Key findings (for future work):**
+
+1. **`TextColorClass` is dead code** — All call sites pass `text-primary-900 dark:text-primary-50`. The `h1/h2/h3` base rules in `input.css` already apply exactly those colours. The parameter never overrides anything meaningful. Future components should omit it or give it a genuinely different default.
+
+2. **`<header>` in `PageHeadingComponent` degrades accessibility** — Every page gets a second `<header>` landmark. Screen readers present all landmarks in a navigation shortcut list; multiple anonymous `<header>` elements create noise. Should use a plain `<div>` or `<section>` instead.
+
+3. **`class="nav"` in NavMenu is misleading** — CSS uses `nav {}` element selector, not `.nav` class rule. The `class="nav"` attribute is redundant/dead code. Either rename the CSS to `.nav {}` or remove the class attribute from the element.
+
+4. **`Profile.razor` still has explicit `@using MyBlog.Web.Components.Shared`** — Redundant after `_Imports.razor` was updated. Small but noisy.
+
+5. **`btn-primary` is always green** — Decoupled from the theme's primary palette. May be intentional (semantic: success/action = green) but breaks the expectation that primary buttons track the selected colour theme.
+
+6. **`form-input`/`form-label` bump to `text-lg font-semibold`** — Unusually large/bold for form field text; worth a visual QA check.
+
+**Verdict:** Approved with concerns (items 1, 2, 3 are the meaningful ones for follow-up).
diff --git a/.squad/decisions/inbox/legolas-pr295-review-fixes.md b/.squad/decisions/inbox/legolas-pr295-review-fixes.md
new file mode 100644
index 00000000..ff4f72f7
--- /dev/null
+++ b/.squad/decisions/inbox/legolas-pr295-review-fixes.md
@@ -0,0 +1,23 @@
+# PR #295 Review Fix Decisions
+
+**Agent:** Legolas  
+**Date:** 2026-05-07  
+**Branch:** squad/291-input-css-fine-tuning  
+
+## Decisions Made
+
+### `.container-card` gains `mx-auto px-4`
+
+The `.container-card` utility was bare `max-w-7xl` with no centering or padding. Aligned it to match the app's shared layout pattern (consistent with how `nav` wraps `mx-auto max-w-7xl px-4`). Any future page wrapper that adopts `.container-card` will automatically center and pad correctly.
+
+### `.btn-secondary` is a solid blue, not an outline button
+
+The comment said "outline style" but the implementation was always solid blue fill. Chose to fix the comment (not the style) to preserve existing UX. The solid blue secondary button is the canonical pattern going forward.
+
+### `PageHeadingComponent` falls back to `<h1>` on unknown `Level`
+
+Added a `default` switch arm that renders `<h1>`. Predictable output over silent empty rendering.
+
+### All four button variants use fixed palettes (no theme tokens)
+
+All of `.btn-primary` (green), `.btn-secondary` (blue), `.btn-warning` (amber), `.btn-destructive` (red) use fixed Tailwind colour classes. None follow the user's colour-theme switch. The history.md learning entry from Issue #292 incorrectly stated that primary/secondary used `var(--primary-*)` tokens — corrected.
diff --git a/src/Web/Components/Layout/MainLayout.razor b/src/Web/Components/Layout/MainLayout.razor
index 2834ba06..79a2b9d8 100644
--- a/src/Web/Components/Layout/MainLayout.razor
+++ b/src/Web/Components/Layout/MainLayout.razor
@@ -1,10 +1,11 @@
 @inherits LayoutComponentBase
 
 
-<div class="min-h-screen flex flex-col bg-primary-100 dark:bg-primary-800 text-primary-900 dark:text-primary-100">
-	<NavMenu/>
+<div class="min-h-screen flex flex-col bg-primary-300 dark:bg-primary-800 text-primary-900 dark:text-primary-100">
+	<NavMenu />
 
-	<main id="main-content" tabindex="-1" class="mx-auto w-full max-w-7xl flex-1 px-4 pt-20 pb-8 outline-none focus:outline-none focus-visible:outline-none">
+	<main id="main-content" tabindex="-1"
+				class="mx-auto w-full max-w-7xl flex-1 px-4 pt-20 pb-8 outline-none focus:outline-none focus-visible:outline-none">
 		@Body
 	</main>
 
diff --git a/src/Web/Components/Layout/NavMenu.razor b/src/Web/Components/Layout/NavMenu.razor
index e981096e..3bd71e6d 100644
--- a/src/Web/Components/Layout/NavMenu.razor
+++ b/src/Web/Components/Layout/NavMenu.razor
@@ -1,7 +1,5 @@
 <header>
-	<nav class="fixed top-0 left-0 right-0 z-50
-		bg-primary-500 dark:bg-primary-900
-		border-b-2 border-primary-300 dark:border-primary-700" aria-label="Main navigation">
+	<nav aria-label="Main navigation">
 		<div class="mx-auto max-w-7xl px-4">
 			<div class="flex items-center justify-between h-16">
 
diff --git a/src/Web/Components/Shared/PageHeadingComponent.razor b/src/Web/Components/Shared/PageHeadingComponent.razor
new file mode 100644
index 00000000..69d8ee68
--- /dev/null
+++ b/src/Web/Components/Shared/PageHeadingComponent.razor
@@ -0,0 +1,48 @@
+<PageTitle>@HeaderText</PageTitle>
+
+<header class="container-card">
+
+	@switch (Level)
+	{
+		case "1":
+
+			<h1 class=@($"{TextColorClass}")>@HeaderText</h1>
+
+			break;
+
+		case "2":
+
+			<h2 class=@($"{TextColorClass}")>@HeaderText</h2>
+
+			break;
+
+		case "3":
+
+			<h3 class=@($"{TextColorClass}")>@HeaderText</h3>
+
+			break;
+
+		case "4":
+
+			<h4 class=@($"{TextColorClass}")>@HeaderText</h4>
+
+			break;
+
+		default:
+
+			<h1 class=@($"{TextColorClass}")>@HeaderText</h1>
+
+			break;
+	}
+
+</header>
+
+@code {
+
+	[Parameter] public string HeaderText { get; set; } = "My Blog";
+
+	[Parameter] public string Level { get; set; } = "1";
+
+	[Parameter] public string TextColorClass { get; set; } = string.Empty;
+
+}
diff --git a/src/Web/Features/BlogPosts/Create/Create.razor b/src/Web/Features/BlogPosts/Create/Create.razor
index 25364977..18322cb3 100644
--- a/src/Web/Features/BlogPosts/Create/Create.razor
+++ b/src/Web/Features/BlogPosts/Create/Create.razor
@@ -1,69 +1,66 @@
 @page "/blog/create"
-@using MyBlog.Web.Features.BlogPosts.Create
 @inject ISender Sender
 @inject NavigationManager Navigation
 @rendermode InteractiveServer
 @attribute [Authorize(Roles = "Author,Admin")]
 
-<PageTitle>Create Post</PageTitle>
-
-<h1 class="text-3xl font-bold mb-6">Create Post</h1>
+<PageHeadingComponent HeaderText="Create Post" Level="1" TextColorClass="text-primary-900 dark:text-primary-50" />
 
 @if (_error is not null)
 {
-    <div class="alert-error" role="alert">
-        <span>@_error</span>
-        <button type="button" class="alert-dismiss" @onclick="() => _error = null">&times;</button>
-    </div>
+	<div class="alert-error" role="alert">
+		<span>@_error</span>
+		<button type="button" class="alert-dismiss" @onclick="() => _error = null">&times;</button>
+	</div>
 }
 
 <div class="form-panel">
-    <EditForm Model="_model" OnValidSubmit="HandleSubmit">
-        <DataAnnotationsValidator />
-        <ValidationSummary class="mb-4" />
+	<EditForm Model="_model" OnValidSubmit="HandleSubmit">
+		<DataAnnotationsValidator />
+		<ValidationSummary class="mb-4" />
 
-        <div class="form-group">
-            <label class="form-label">Title</label>
-            <InputText class="form-input" @bind-Value="_model.Title" />
-        </div>
-        <div class="form-group">
-            <label class="form-label">Author</label>
-            <InputText class="form-input" @bind-Value="_model.Author" />
-        </div>
-        <div class="form-group">
-            <label class="form-label">Content</label>
-            <InputTextArea class="form-input" rows="8" @bind-Value="_model.Content" />
-        </div>
+		<div class="form-group">
+			<label class="form-label">Title</label>
+			<InputText class="form-input" @bind-Value="_model.Title" />
+		</div>
+		<div class="form-group">
+			<label class="form-label">Author</label>
+			<InputText class="form-input" @bind-Value="_model.Author" />
+		</div>
+		<div class="form-group">
+			<label class="form-label">Content</label>
+			<InputTextArea class="form-input" rows="8" @bind-Value="_model.Content" />
+		</div>
 
-        <div class="flex gap-2">
-            <button type="submit" class="btn-primary">Create</button>
-            <a href="/blog" class="btn-secondary">Cancel</a>
-        </div>
-    </EditForm>
+		<div class="flex gap-2">
+			<button type="submit" class="btn-primary">Create</button>
+			<a href="/blog" class="btn-secondary">Cancel</a>
+		</div>
+	</EditForm>
 </div>
 
 @code {
-    private readonly PostFormModel _model = new();
-    private string? _error;
+	private readonly PostFormModel _model = new();
+	private string? _error;
 
-    private async Task HandleSubmit()
-    {
-        var result = await Sender.Send(new CreateBlogPostCommand(_model.Title, _model.Content, _model.Author));
-        if (result.Success)
-            Navigation.NavigateTo("/blog");
-        else
-            _error = result.Error;
-    }
+	private async Task HandleSubmit()
+	{
+		var result = await Sender.Send(new CreateBlogPostCommand(_model.Title, _model.Content, _model.Author));
+		if (result.Success)
+			Navigation.NavigateTo("/blog");
+		else
+			_error = result.Error;
+	}
 
-    private sealed class PostFormModel
-    {
-        [System.ComponentModel.DataAnnotations.Required]
-        public string Title { get; set; } = string.Empty;
+	private sealed class PostFormModel
+	{
+		[System.ComponentModel.DataAnnotations.Required]
+		public string Title { get; set; } = string.Empty;
 
-        [System.ComponentModel.DataAnnotations.Required]
-        public string Author { get; set; } = string.Empty;
+		[System.ComponentModel.DataAnnotations.Required]
+		public string Author { get; set; } = string.Empty;
 
-        [System.ComponentModel.DataAnnotations.Required]
-        public string Content { get; set; } = string.Empty;
-    }
+		[System.ComponentModel.DataAnnotations.Required]
+		public string Content { get; set; } = string.Empty;
+	}
 }
diff --git a/src/Web/Features/BlogPosts/Delete/ConfirmDeleteDialog.razor b/src/Web/Features/BlogPosts/Delete/ConfirmDeleteDialog.razor
index 2785348e..b60a5a77 100644
--- a/src/Web/Features/BlogPosts/Delete/ConfirmDeleteDialog.razor
+++ b/src/Web/Features/BlogPosts/Delete/ConfirmDeleteDialog.razor
@@ -8,8 +8,8 @@
                 <p class="text-red-600 dark:text-red-400 text-sm">This action cannot be undone.</p>
             </div>
             <div class="flex gap-2 justify-end">
-                <button class="px-4 py-2 rounded font-medium bg-red-600 text-white hover:bg-red-700 transition" @onclick="OnConfirm">Delete</button>
-                <button class="px-4 py-2 rounded font-medium border border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-50 hover:bg-gray-100 dark:hover:bg-gray-700 transition" @onclick="OnCancel">Cancel</button>
+                <button class="btn-destructive" @onclick="OnConfirm">Delete</button>
+                <button class="btn-secondary" @onclick="OnCancel">Cancel</button>
             </div>
         </div>
     </div>
diff --git a/src/Web/Features/BlogPosts/Edit/Edit.razor b/src/Web/Features/BlogPosts/Edit/Edit.razor
index a358dff7..22cc29f8 100644
--- a/src/Web/Features/BlogPosts/Edit/Edit.razor
+++ b/src/Web/Features/BlogPosts/Edit/Edit.razor
@@ -1,13 +1,10 @@
 @page "/blog/edit/{Id:guid}"
-@using MyBlog.Web.Features.BlogPosts.Edit
 @inject ISender Sender
 @inject NavigationManager Navigation
 @rendermode InteractiveServer
 @attribute [Authorize(Roles = "Author,Admin")]
 
-<PageTitle>Edit Post</PageTitle>
-
-<h1 class="text-3xl font-bold mb-6">Edit Post</h1>
+<PageHeadingComponent HeaderText="Edit Post" Level="1" TextColorClass="text-primary-900 dark:text-primary-50" />
 
 @if (_error is not null)
 {
@@ -21,7 +18,7 @@
 {
     <div class="alert-warning" role="alert">
         <div>
-            <strong class="font-semibold">Concurrency Conflict:</strong> This post was modified by another user. 
+            <strong class="font-semibold">Concurrency Conflict:</strong> This post was modified by another user.
             Please reload the page to get the latest version.
         </div>
         <button type="button" class="alert-dismiss" @onclick="() => _concurrencyError = false">&times;</button>
diff --git a/src/Web/Features/BlogPosts/List/Index.razor b/src/Web/Features/BlogPosts/List/Index.razor
index db0b5df2..224fe71a 100644
--- a/src/Web/Features/BlogPosts/List/Index.razor
+++ b/src/Web/Features/BlogPosts/List/Index.razor
@@ -1,137 +1,130 @@
 @page "/blog"
 @using MyBlog.Web.Features.BlogPosts.Delete
-@using MyBlog.Web.Features.BlogPosts.List
 @inject ISender Sender
 @rendermode InteractiveServer
 @attribute [StreamRendering]
 
-<PageTitle>Blog Posts</PageTitle>
-
-<h1 class="font-bold mb-6">Blog Posts</h1>
+<PageHeadingComponent HeaderText="Blog Posts" Level="1" TextColorClass="text-primary-900 dark:text-primary-50" />
 
 @if (_error is not null)
 {
-    <div class="alert-error" role="alert">
-        <span>@_error</span>
-        <button type="button" class="alert-dismiss" @onclick="() => _error = null">&times;</button>
-    </div>
+	<div class="alert-error" role="alert">
+		<span>@_error</span>
+		<button type="button" class="alert-dismiss" @onclick="() => _error = null">&times;</button>
+	</div>
 }
 
 @if (_concurrencyError)
 {
-    <div class="alert-warning" role="alert">
-        <div>
-            <strong class="font-semibold">Concurrency Conflict:</strong> This post was modified by another user.
-            Please reload the page to get the latest version.
-        </div>
-        <button type="button" class="alert-dismiss" @onclick="() => _concurrencyError = false">&times;</button>
-    </div>
+	<div class="alert-warning" role="alert">
+		<div>
+			<strong class="font-semibold">Concurrency Conflict:</strong> This post was modified by another user.
+			Please reload the page to get the latest version.
+		</div>
+		<button type="button" class="alert-dismiss" @onclick="() => _concurrencyError = false">&times;</button>
+	</div>
 }
 
 <AuthorizeView Roles="Author,Admin">
-    <Authorized>
-        <a href="/blog/create" class="btn-primary inline-block mb-4">New Post</a>
-    </Authorized>
+	<Authorized>
+		<a href="/blog/create" class="btn-primary inline-block mb-4">New Post</a>
+	</Authorized>
 </AuthorizeView>
 
 @if (_posts is null)
 {
-    <p>Loading...</p>
+	<p>Loading...</p>
 }
 else if (!_posts.Any())
 {
-    <p>No posts yet.</p>
+	<p>No posts yet.</p>
 }
 else
 {
-    <div class="table-wrapper">
-        <table class="data-table">
-            <thead>
-                <tr>
-                    <th>Title</th>
-                    <th>Author</th>
-                    <th>Published</th>
-                    <th>Created</th>
-                    <AuthorizeView Roles="Author,Admin">
-                        <Authorized>
-                            <th></th>
-                        </Authorized>
-                    </AuthorizeView>
-                </tr>
-            </thead>
-            <tbody>
-                @foreach (var post in _posts)
-                {
-                    <tr>
-                        <td>@post.Title</td>
-                        <td>@post.Author</td>
-                        <td>@(post.IsPublished ? "Yes" : "No")</td>
-                        <td>@post.CreatedAt.ToShortDateString()</td>
-                        <AuthorizeView Roles="Author,Admin">
-                            <Authorized>
-                                <td>
-                                    <a href="/blog/edit/@post.Id" class="btn-secondary inline-block mr-1">Edit</a>
-                                    <button class="inline-block px-3 py-1 text-sm rounded font-medium bg-red-600 text-white hover:bg-red-700 transition"
-                                            @onclick="() => ConfirmDelete(post)">Delete</button>
-                                </td>
-                            </Authorized>
-                        </AuthorizeView>
-                    </tr>
-                }
-            </tbody>
-        </table>
-    </div>
+	<div class="table-wrapper">
+		<table class="data-table">
+			<thead>
+				<tr>
+					<th>Title</th>
+					<th>Author</th>
+					<th>Published</th>
+					<th>Created</th>
+					<AuthorizeView Roles="Author,Admin">
+						<Authorized>
+							<th></th>
+						</Authorized>
+					</AuthorizeView>
+				</tr>
+			</thead>
+			<tbody>
+				@foreach (var post in _posts)
+				{
+					<tr>
+						<td>@post.Title</td>
+						<td>@post.Author</td>
+						<td>@(post.IsPublished ? "Yes" : "No")</td>
+						<td>@post.CreatedAt.ToShortDateString()</td>
+						<AuthorizeView Roles="Author,Admin">
+							<Authorized>
+								<td>
+									<a href="/blog/edit/@post.Id" class="btn-secondary inline-block mr-1">Edit</a>
+									<button class="btn-destructive" @onclick="() => ConfirmDelete(post)">Delete</button>
+								</td>
+							</Authorized>
+						</AuthorizeView>
+					</tr>
+				}
+			</tbody>
+		</table>
+	</div>
 }
 
-<ConfirmDeleteDialog
-    IsVisible="_showDeleteDialog"
-    PostTitle="@(_postToDelete?.Title ?? string.Empty)"
-    OnConfirm="ExecuteDelete"
-    OnCancel="@(() => _showDeleteDialog = false)" />
+<ConfirmDeleteDialog IsVisible="_showDeleteDialog" PostTitle="@(_postToDelete?.Title ?? string.Empty)"
+										 OnConfirm="ExecuteDelete" OnCancel="@(() => _showDeleteDialog = false)" />
 
 @code {
-    private IReadOnlyList<BlogPostDto>? _posts;
-    private BlogPostDto? _postToDelete;
-    private bool _showDeleteDialog;
-    private string? _error;
-    private bool _concurrencyError;
+	private IReadOnlyList<BlogPostDto>? _posts;
+	private BlogPostDto? _postToDelete;
+	private bool _showDeleteDialog;
+	private string? _error;
+	private bool _concurrencyError;
 
-    protected override async Task OnInitializedAsync()
-    {
-        var result = await Sender.Send(new GetBlogPostsQuery());
-        if (result.Success)
-            _posts = result.Value;
-        else
-            _error = result.Error;
-    }
+	protected override async Task OnInitializedAsync()
+	{
+		var result = await Sender.Send(new GetBlogPostsQuery());
+		if (result.Success)
+			_posts = result.Value;
+		else
+			_error = result.Error;
+	}
 
-    private void ConfirmDelete(BlogPostDto post)
-    {
-        _postToDelete = post;
-        _showDeleteDialog = true;
-    }
+	private void ConfirmDelete(BlogPostDto post)
+	{
+		_postToDelete = post;
+		_showDeleteDialog = true;
+	}
 
-    private async Task ExecuteDelete()
-    {
-        if (_postToDelete is not null)
-        {
-            var result = await Sender.Send(new DeleteBlogPostCommand(_postToDelete.Id));
-            if (result.Failure)
-            {
-                _error = result.Error;
-                if (result.ErrorCode == global::MyBlog.Domain.Abstractions.ResultErrorCode.Concurrency)
-                    _concurrencyError = true;
-                _showDeleteDialog = false;
-                _postToDelete = null;
-                return;
-            }
-        }
-        _showDeleteDialog = false;
-        _postToDelete = null;
-        var listResult = await Sender.Send(new GetBlogPostsQuery());
-        if (listResult.Success)
-            _posts = listResult.Value;
-        else
-            _error = listResult.Error;
-    }
+	private async Task ExecuteDelete()
+	{
+		if (_postToDelete is not null)
+		{
+			var result = await Sender.Send(new DeleteBlogPostCommand(_postToDelete.Id));
+			if (result.Failure)
+			{
+				_error = result.Error;
+				if (result.ErrorCode == global::MyBlog.Domain.Abstractions.ResultErrorCode.Concurrency)
+					_concurrencyError = true;
+				_showDeleteDialog = false;
+				_postToDelete = null;
+				return;
+			}
+		}
+		_showDeleteDialog = false;
+		_postToDelete = null;
+		var listResult = await Sender.Send(new GetBlogPostsQuery());
+		if (listResult.Success)
+			_posts = listResult.Value;
+		else
+			_error = listResult.Error;
+	}
 }
diff --git a/src/Web/Features/UserManagement/ManageRoles.razor b/src/Web/Features/UserManagement/ManageRoles.razor
index c25ebb09..a23e9e5f 100644
--- a/src/Web/Features/UserManagement/ManageRoles.razor
+++ b/src/Web/Features/UserManagement/ManageRoles.razor
@@ -3,111 +3,112 @@
 @rendermode InteractiveServer
 @attribute [Authorize(Roles = "Admin")]
 
-<PageTitle>Manage User Roles</PageTitle>
-
-<h1 class="text-3xl font-bold mb-6">Manage User Roles</h1>
+<PageHeadingComponent HeaderText="Manage User Roles" Level="1" TextColorClass="text-primary-900 dark:text-primary-50" />
 
 @if (_loading)
 {
-    <p class="text-gray-600 dark:text-gray-400">Loading users...</p>
+	<p>Loading users...</p>
 }
 else
 {
-    @if (_error is not null)
-    {
-        <div class="alert-error" role="alert">
-            <span>@_error</span>
-            <button type="button" class="alert-dismiss" aria-label="Close error" @onclick="() => _error = null">&times;</button>
-        </div>
-    }
+	@if (_error is not null)
+	{
+		<div class="alert-error" role="alert">
+			<span>@_error</span>
+			<button type="button" class="alert-dismiss" aria-label="Close error" @onclick="() => _error = null">&times;</button>
+		</div>
+	}
 
-    @if (_availableRoles.Any())
-    {
-        <p class="text-gray-600 dark:text-gray-400 mb-4">Available roles: @string.Join(", ", _availableRoles.Select(r => r.Name))</p>
-    }
+	@if (_availableRoles.Any())
+	{
+		<p>Available roles: @string.Join(", ", _availableRoles.Select(r =>
+										r.Name))</p>
+		}
 
-    <div class="table-wrapper">
-        <table class="data-table">
-            <thead>
-                <tr>
-                    <th>User</th>
-                    <th>Email</th>
-                    <th>Current Roles</th>
-                    <th>Actions</th>
-                </tr>
-            </thead>
-            <tbody>
-                @foreach (var user in _users)
-                {
-                    <tr>
-                        <td>@user.Name</td>
-                        <td>@user.Email</td>
-                        <td>@string.Join(", ", user.Roles)</td>
-                        <td>
-                            @foreach (var role in _availableRoles.Where(r => !user.Roles.Contains(r.Name)))
-                            {
-                                <button class="inline-block px-3 py-1 text-sm rounded border border-green-600 text-green-600 hover:bg-green-50 dark:hover:bg-green-900/20 transition mr-1 mb-1"
-                                        @onclick="() => AssignRole(user.UserId, role.Id)">
-                                    + @role.Name
-                                </button>
-                            }
-                            @foreach (var role in _availableRoles.Where(r => user.Roles.Contains(r.Name)))
-                            {
-                                <button class="inline-block px-3 py-1 text-sm rounded border border-red-600 text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 transition mr-1 mb-1"
-                                        @onclick="() => RemoveRole(user.UserId, role.Id)">
-                                    - @role.Name
-                                </button>
-                            }
-                        </td>
-                    </tr>
-                }
-            </tbody>
-        </table>
-    </div>
-}
+		<div class="table-wrapper">
+			<table class="data-table">
+				<thead>
+					<tr>
+						<th>User</th>
+						<th>Email</th>
+						<th>Current Roles</th>
+						<th>Actions</th>
+					</tr>
+				</thead>
+				<tbody>
+					@foreach (var user in _users)
+					{
+						<tr>
+							<td>@user.Name</td>
+							<td>@user.Email</td>
+							<td>@string.Join(", ", user.Roles)</td>
+							<td>
+								@foreach (var role in _availableRoles.Where(r => !user.Roles.Contains(r.Name)))
+								{
+									<button
+										class="inline-block px-3 py-1 text-sm rounded border border-green-600 text-green-600 hover:bg-green-50 dark:hover:bg-green-900/20 transition mr-1 mb-1"
+										@onclick="() => AssignRole(user.UserId, role.Id)">
+										+ @role.Name
+									</button>
+								}
+								@foreach (var role in _availableRoles.Where(r => user.Roles.Contains(r.Name)))
+								{
+									<button
+										class="inline-block px-3 py-1 text-sm rounded border border-red-600 text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 transition mr-1 mb-1"
+										@onclick="() => RemoveRole(user.UserId, role.Id)">
+										- @role.Name
+									</button>
+								}
+							</td>
+						</tr>
+					}
+				</tbody>
+			</table>
+		</div>
+	}
 
 @code {
-    private IReadOnlyList<UserWithRolesDto> _users = [];
-    private IReadOnlyList<RoleDto> _availableRoles = [];
-    private bool _loading = true;
-    private string? _error;
+	private IReadOnlyList<UserWithRolesDto> _users = [];
+	private IReadOnlyList<RoleDto> _availableRoles = [];
+	private bool _loading = true;
+	private string? _error;
 
-    protected override async Task OnInitializedAsync()
-    {
-        var usersTask = Sender.Send(new GetUsersWithRolesQuery());
-        var rolesTask = Sender.Send(new GetAvailableRolesQuery());
-        await Task.WhenAll(usersTask, rolesTask);
+	protected override async Task OnInitializedAsync()
+	{
+		var usersTask = Sender.Send(new GetUsersWithRolesQuery());
+		var rolesTask = Sender.Send(new GetAvailableRolesQuery());
+		await Task.WhenAll(usersTask, rolesTask);
 
-        var usersResult = await usersTask;
-        var rolesResult = await rolesTask;
+		var usersResult = await usersTask;
+		var rolesResult = await rolesTask;
 
-        if (usersResult.Success) _users = usersResult.Value!;
-        else _error = usersResult.Error;
+		if (usersResult.Success) _users = usersResult.Value!;
+		else _error = usersResult.Error;
 
-        if (rolesResult.Success) _availableRoles = rolesResult.Value!;
-        else _error ??= rolesResult.Error;
+		if (rolesResult.Success) _availableRoles = rolesResult.Value!;
+		else _error ??= rolesResult.Error;
 
-        _loading = false;
-    }
+		_loading = false;
+	}
 
-    private async Task AssignRole(string userId, string roleId)
-    {
-        var result = await Sender.Send(new AssignRoleCommand(userId, roleId));
-        if (result.Failure) { _error = result.Error; return; }
-        await RefreshAsync();
-    }
+	private async Task AssignRole(string userId, string roleId)
+	{
+		var result = await Sender.Send(new AssignRoleCommand(userId, roleId));
+		if (result.Failure) { _error = result.Error; return; }
+		await RefreshAsync();
+	}
 
-    private async Task RemoveRole(string userId, string roleId)
-    {
-        var result = await Sender.Send(new RemoveRoleCommand(userId, roleId));
-        if (result.Failure) { _error = result.Error; return; }
-        await RefreshAsync();
-    }
+	private async Task RemoveRole(string userId, string roleId)
+	{
+		var result = await Sender.Send(new RemoveRoleCommand(userId, roleId));
+		if (result.Failure) { _error = result.Error; return; }
+		await RefreshAsync();
+	}
 
-    private async Task RefreshAsync()
-    {
-        var result = await Sender.Send(new GetUsersWithRolesQuery());
-        if (result.Success) _users = result.Value!;
-        StateHasChanged();
-    }
+	private async Task RefreshAsync()
+	{
+		var result = await Sender.Send(new GetUsersWithRolesQuery());
+		if (result.Success) _users = result.Value!;
+		StateHasChanged();
+	}
 }
diff --git a/src/Web/Features/UserManagement/Profile.razor b/src/Web/Features/UserManagement/Profile.razor
index c68278ca..e2964027 100644
--- a/src/Web/Features/UserManagement/Profile.razor
+++ b/src/Web/Features/UserManagement/Profile.razor
@@ -4,9 +4,7 @@
 @using MyBlog.Web.Security
 @attribute [Authorize]
 
-<PageTitle>User Profile</PageTitle>
-
-<h1 class="mb-6">User Profile</h1>
+<PageHeadingComponent HeaderText="User Profile" Level="1" TextColorClass="text-primary-900 dark:text-primary-50" />
 
 @if (_user is null)
 {
@@ -15,7 +13,7 @@
 else
 {
 	<div class="grid gap-6 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.35fr)]">
-		<section class="card p-6">
+		<section class="card">
 			<div class="flex flex-col items-center gap-4 text-center sm:flex-row sm:items-start sm:text-left">
 				@if (!string.IsNullOrWhiteSpace(_pictureUrl))
 				{
@@ -32,27 +30,26 @@ else
 
 				<div class="space-y-2">
 					<div class="flex flex-wrap items-center gap-2">
-						<h2 class="!text-2xl">@_displayName</h2>
+						<h2>@_displayName</h2>
 						@if (_isAdmin)
 						{
 							<span
-							class="rounded-full bg-red-600 px-3 py-0.5 text-xs font-bold uppercase tracking-wide text-white shadow-sm dark:bg-red-700"
+							class="rounded-full bg-red-700 px-3 py-0.5 text-xs font-bold uppercase tracking-wide text-white shadow-sm dark:bg-red-700"
 							title="Administrator">Admin</span>
 						}
 					</div>
-					<p class="!text-base !font-medium text-gray-600 dark:text-gray-300">@_emailAddress</p>
+					<p>@_emailAddress</p>
 					@if (!string.IsNullOrWhiteSpace(_userId))
 					{
-						<p class="!text-sm !font-medium text-gray-500 dark:text-gray-400 break-all">User ID: @_userId</p>
+						<p>User ID: @_userId</p>
 					}
 				</div>
 			</div>
 
 			<div class="mt-6 grid gap-4 sm:grid-cols-2">
-				<div
-					class="rounded-lg border border-primary-200 bg-primary-50/70 p-4 dark:border-primary-800 dark:bg-primary-950/40">
-					<h3 class="mb-2 !text-base">Identity</h3>
-					<dl class="space-y-2 text-sm text-gray-700 dark:text-gray-200">
+				<div class="card-member">
+					<h3>Identity</h3>
+					<dl class="space-y-2 text-sm">
 						<div>
 							<dt class="font-semibold">Authenticated</dt>
 							<dd>@(_user.Identity?.IsAuthenticated == true ? "Yes" : "No")</dd>
@@ -64,9 +61,8 @@ else
 					</dl>
 				</div>
 
-				<div
-					class="rounded-lg border border-primary-200 bg-primary-50/70 p-4 dark:border-primary-800 dark:bg-primary-950/40">
-					<h3 class="mb-2 !text-base">Roles</h3>
+				<div class="card-member">
+					<h3>Roles</h3>
 					@if (_roles.Count > 0)
 					{
 						<div class="flex flex-wrap gap-2">
@@ -75,66 +71,61 @@ else
 								@if (role.Equals("Admin", StringComparison.OrdinalIgnoreCase))
 								{
 									<span
-									class="rounded-full bg-red-100 px-3 py-1 text-sm font-semibold text-red-800 dark:bg-red-900/40 dark:text-red-300">@role</span>
+									class="rounded-full bg-red-700 px-3 py-0.5 text-xs font-semibold text-white dark:bg-red-700 dark:text-white">@role</span>
 								}
 								else
 								{
 									<span
-									class="rounded-full bg-green-100 px-3 py-1 text-sm font-semibold text-green-800 dark:bg-green-900/40 dark:text-green-300">@role</span>
+									class="rounded-full bg-green-700 px-3 py-0.5 text-xs font-semibold text-white dark:bg-green-700 dark:text-white">@role</span>
 								}
 							}
 						</div>
 					}
 					else
 					{
-						<p class="!text-sm !font-medium text-amber-700 dark:text-amber-300">No roles found in the current claims.</p>
+						<p>No roles found in the current claims.</p>
 					}
 				</div>
 			</div>
 		</section>
 
-		<section class="card overflow-hidden">
-			<div class="border-b border-primary-200 px-6 py-4 dark:border-primary-800">
-				<h2 class="!text-xl">Claims</h2>
-				<p class="!mt-1 !text-sm !font-medium text-gray-600 dark:text-gray-300">Claims currently present on your
-					authenticated user principal.</p>
-				</div>
+		<section class="card">
+			<div class="border-b border-primary-200 dark:border-primary-800">
+				<h2>Claims</h2>
+				<p>Claims currently present on your authenticated user principal.</p>
+			</div>
 
-				@if (_claims.Count == 0)
-				{
-					<div class="px-6 py-4">
-						<p class="!text-sm !font-medium text-gray-600 dark:text-gray-300">No claims were found.</p>
-					</div>
-				}
-				else
-				{
-					<div class="overflow-x-auto">
-						<table class="min-w-full divide-y divide-primary-200 dark:divide-primary-800">
-							<thead class="bg-primary-50 dark:bg-primary-950/60">
+			@if (_claims.Count == 0)
+			{
+				<div>
+					<p>No claims were found.</p>
+				</div>
+			}
+			else
+			{
+				<div class="overflow-x-auto">
+					<table class="data-table">
+						<thead>
+							<tr>
+								<th>Claim Type</th>
+								<th>Value</th>
+							</tr>
+						</thead>
+						<tbody>
+							@foreach (var claim in _claims)
+							{
 								<tr>
-									<th
-										class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-gray-700 dark:text-gray-300">
-										Claim Type</th>
-										<th
-											class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-gray-700 dark:text-gray-300">
-											Value</th>
-										</tr>
-									</thead>
-									<tbody class="divide-y divide-primary-100 dark:divide-primary-900/80">
-										@foreach (var claim in _claims)
-										{
-											<tr class="align-top odd:bg-white odd:dark:bg-gray-900 even:bg-primary-50/40 even:dark:bg-primary-950/20">
-												<td class="px-4 py-3 text-sm font-semibold text-gray-800 dark:text-gray-200 break-all">@claim.Type</td>
-												<td class="px-4 py-3 text-sm text-gray-700 dark:text-gray-300 break-all">@claim.Value</td>
-											</tr>
-										}
-									</tbody>
-								</table>
-							</div>
-						}
-					</section>
+									<td>@claim.Type</td>
+									<td>@claim.Value</td>
+								</tr>
+							}
+						</tbody>
+					</table>
 				</div>
 			}
+		</section>
+	</div>
+}
 
 @code {
 	[CascadingParameter]
diff --git a/src/Web/Features/_Imports.razor b/src/Web/Features/_Imports.razor
index a4bd1aa9..33ffed6d 100644
--- a/src/Web/Features/_Imports.razor
+++ b/src/Web/Features/_Imports.razor
@@ -5,3 +5,4 @@
 @using Microsoft.AspNetCore.Authorization
 @using MediatR
 @using MyBlog.Web.Data
+@using MyBlog.Web.Components.Shared
diff --git a/src/Web/Styles/input.css b/src/Web/Styles/input.css
index 414d3d11..2bf7a3af 100644
--- a/src/Web/Styles/input.css
+++ b/src/Web/Styles/input.css
@@ -13,7 +13,7 @@
 /* @theme inline generates utility classes (bg-primary-400, text-primary-50,  */
 /* etc.) whose values resolve from CSS vars at runtime.                       */
 @theme inline {
-	--color-primary-50:  var(--primary-50);
+	--color-primary-50: var(--primary-50);
 	--color-primary-100: var(--primary-100);
 	--color-primary-200: var(--primary-200);
 	--color-primary-300: var(--primary-300);
@@ -29,19 +29,19 @@
 @layer base {
 	/* ─── Common element standardization ──────────────────────────────────── */
 	body {
-		@apply bg-gray-50 dark:bg-gray-950 text-gray-900 dark:text-gray-50;
+		@apply bg-primary-200 dark:bg-primary-950 text-primary-900 dark:text-primary-50;
 	}
 
 	h1 {
-		@apply text-2xl font-bold text-primary-800 dark:text-primary-200;
+		@apply text-2xl font-bold text-primary-950 dark:text-primary-50;
 	}
 
 	h2 {
-		@apply text-xl font-semibold text-primary-800 dark:text-primary-200;
+		@apply text-xl font-semibold text-primary-950 dark:text-primary-50;
 	}
 
 	h3 {
-		@apply text-lg font-semibold text-primary-800 dark:text-primary-200;
+		@apply text-lg font-semibold text-primary-950 dark:text-primary-50;
 	}
 
 	p {
@@ -50,15 +50,21 @@
 }
 
 @layer components {
+	/* ─── Nav ──────────────────────────────────────────────────────--------- */
+	nav {
+		@apply fixed top-0 left-0 right-0 z-50
+		bg-primary-500 dark:bg-primary-900
+		border-b-2 border-primary-300 dark:border-primary-700;
+	}
+
 	/* ─── Nav Links ───────────────────────────────────────────────────────── */
 	.nav-link {
-		@apply text-primary-900 dark:text-primary-500
-		hover:text-primary-700 dark:hover:text-primary-200
-		transition-colors;
+		@apply text-primary-950 dark:text-primary-50
+		hover:text-primary-700 dark:hover:text-primary-100;
 	}
 
 	.nav-link.active {
-		@apply font-bold border-b-2 border-primary-900 dark:border-primary-500;
+		@apply font-bold border-b-2 border-primary-950 dark:border-primary-500;
 	}
 
 	/* ─── Footer ─────────────────────────────────────────────────────────── */
@@ -70,33 +76,83 @@
 	}
 
 	/* ─── Buttons ─────────────────────────────────────────────────────────── */
+	/* Base shape, spacing, and interactive states shared across all variants. */
+	.btn-primary,
+	.btn-secondary,
+	.btn-warning,
+	.btn-destructive {
+		@apply inline-flex items-center gap-2
+		px-4 py-1 rounded-md font-medium
+		cursor-pointer select-none
+		transition-colors
+		focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1
+		disabled:opacity-50 disabled:cursor-not-allowed
+		active:scale-[0.98];
+	}
+
+	/* Primary — themed solid fill (Bootstrap btn-primary feel). */
 	.btn-primary {
-		@apply bg-primary-600 dark:bg-primary-500
-		text-white
-		hover:bg-primary-700 dark:hover:bg-primary-400
-		rounded-md px-4 py-2 font-medium transition-colors;
+		@apply text-white border border-transparent
+		bg-green-500 dark:bg-green-500
+		hover:bg-green-700 dark:hover:bg-green-700
+		focus-visible:ring-primary-500;
+	}
+
+	/* Secondary — solid blue fill for secondary / cancel actions (fixed palette). */
+	.btn-secondary {
+		@apply text-white border border-transparent
+		bg-blue-500 dark:bg-blue-500
+		hover:bg-blue-700 dark:hover:bg-blue-700
+		focus-visible:ring-blue-500;
+	}
+
+	/* Warning — amber fixed palette for caution actions (not theme-dependent). */
+	.btn-warning {
+		@apply text-white border border-transparent
+		bg-amber-500 dark:bg-amber-500
+		hover:bg-amber-700 dark:hover:bg-amber-700
+		focus-visible:ring-amber-500;
+	}
+
+	/* Destructive — red fixed palette for irreversible / delete actions. */
+	.btn-destructive {
+		@apply text-white border border-transparent
+		bg-red-500 dark:bg-red-500
+		hover:bg-red-700 dark:hover:bg-red-700
+		focus-visible:ring-red-500;
+	}
+
+	/* ─── Container / page wrapper ─────────────────────────────────────────── */
+	.container-card {
+		@apply mx-auto max-w-7xl px-4;
 	}
 
 	/* ─── Cards / Surfaces ────────────────────────────────────────────────── */
 	.card {
-		@apply bg-white
-		dark:bg-gray-900
+		@apply p-4 bg-primary-500 dark:bg-primary-500
 		border border-primary-200 dark:border-primary-800
 		rounded-lg shadow;
 	}
 
+	.card-member {
+		@apply rounded-lg shadow p-4
+		bg-primary-300 dark:bg-primary-700
+		text-primary-950 dark:text-primary-50;
+	}
+
 	/* ─── Tables ──────────────────────────────────────────────────────────── */
 	.table-wrapper {
-		@apply rounded-lg shadow bg-white dark:bg-gray-800 overflow-hidden;
+		@apply rounded-lg shadow bg-primary-50 dark:bg-primary-800 overflow-hidden;
 	}
 
 	.data-table {
-		@apply w-full text-sm text-left text-gray-900 dark:text-gray-50;
+		@apply w-full text-sm text-left text-primary-900 dark:text-primary-50;
 
 		& thead {
-			@apply bg-primary-500 dark:bg-primary-900
-			text-primary-900 dark:text-primary-500
-			border-b border-primary-300 dark:border-primary-700;
+			@apply border-b
+			bg-primary-500 dark:bg-primary-900
+			text-primary-900 dark:text-primary-50
+			border-primary-900 dark:border-primary-50;
 		}
 
 		& thead th {
@@ -104,9 +160,11 @@
 		}
 
 		& tbody tr {
-			@apply odd:bg-white odd:dark:bg-gray-800 even:bg-gray-50 even:dark:bg-gray-900
-			border-b border-gray-200 dark:border-gray-700
-			hover:bg-primary-100 dark:hover:bg-primary-800 transition;
+			@apply border-b
+			odd:bg-primary-300 odd:dark:bg-primary-700
+			even:bg-primary-100 even:dark:bg-primary-800
+			border-primary-900 dark:border-primary-50
+			hover:bg-primary-400 dark:hover:bg-primary-900 transition;
 		}
 
 		& tbody td {
@@ -116,7 +174,7 @@
 
 	/* ─── Forms ───────────────────────────────────────────────────────────── */
 	.form-panel {
-		@apply rounded-lg shadow p-6 bg-white dark:bg-gray-800 max-w-2xl;
+		@apply rounded-lg shadow p-6 bg-primary-500 dark:bg-primary-900 max-w-3xl;
 	}
 
 	.form-group {
@@ -124,25 +182,17 @@
 	}
 
 	.form-label {
-		@apply block text-sm font-medium text-gray-900 dark:text-gray-50 mb-1;
+		@apply block text-lg font-semibold text-primary-950 dark:text-primary-50 mb-1;
 	}
 
 	.form-input {
-		@apply w-full rounded border border-gray-300 dark:border-gray-600
-		bg-white dark:bg-gray-700
-		text-gray-900 dark:text-gray-50
-		px-3 py-2 text-sm
+		@apply w-full rounded border border-primary-300 dark:border-primary-600
+		bg-primary-50 dark:bg-primary-700
+		text-primary-950 dark:text-primary-50
+		px-3 py-2 text-lg font-semibold
 		focus:outline-none focus:ring-2 focus:ring-primary-400;
 	}
 
-	/* ─── Secondary button (Cancel / neutral action) ──────────────────────── */
-	.btn-secondary {
-		@apply px-4 py-2 rounded font-medium
-		border border-gray-300 dark:border-gray-600
-		text-gray-900 dark:text-gray-50
-		hover:bg-gray-100 dark:hover:bg-gray-700 transition;
-	}
-
 	/* ─── Alert banners ───────────────────────────────────────────────────── */
 	.alert-error {
 		@apply rounded-lg border border-red-300 bg-red-50 text-red-700
@@ -159,7 +209,7 @@
 	}
 
 	/* ─── Blazor form validation ──────────────────────────────────────────── */
-	.valid.modified:not([type=checkbox]) {
+	.valid.modified:not([type="checkbox"]) {
 		@apply outline-1 outline-green-500;
 	}
 
diff --git a/tests/Web.Tests.Bunit/Components/PageHeadingComponentTests.cs b/tests/Web.Tests.Bunit/Components/PageHeadingComponentTests.cs
new file mode 100644
index 00000000..b70bab6b
--- /dev/null
+++ b/tests/Web.Tests.Bunit/Components/PageHeadingComponentTests.cs
@@ -0,0 +1,68 @@
+//=======================================================
+//Copyright (c) 2026. All rights reserved.
+//File Name :     PageHeadingComponentTests.cs
+//Company :       mpaulosky
+//Author :        Matthew Paulosky
+//Solution Name : MyBlog
+//Project Name :  Web.Tests.Bunit
+//=======================================================
+
+using MyBlog.Web.Components.Shared;
+
+namespace Web.Components;
+
+public class PageHeadingComponentTests : BunitContext
+{
+	[Theory]
+	[InlineData("1", "h1")]
+	[InlineData("2", "h2")]
+	[InlineData("3", "h3")]
+	[InlineData("4", "h4")]
+	public void PageHeadingRendersRequestedHeadingLevel(string level, string selector)
+	{
+		// Arrange (none)
+		// Act
+		var cut = Render<PageHeadingComponent>(parameters => parameters
+				.Add(component => component.HeaderText, "Section heading")
+				.Add(component => component.Level, level)
+				.Add(component => component.TextColorClass, "text-primary-900 dark:text-primary-50"));
+
+		// Assert
+		var heading = cut.Find($"header {selector}");
+
+		heading.TextContent.Trim().Should().Be("Section heading");
+		heading.GetAttribute("class").Should().Contain("text-primary-900").And.Contain("dark:text-primary-50");
+		cut.FindAll("header h1, header h2, header h3, header h4").Should().ContainSingle();
+	}
+
+	[Fact]
+	public void PageHeadingDefaultsToLevelOneWhenLevelIsOmitted()
+	{
+		// Arrange (none)
+		// Act
+		var cut = Render<PageHeadingComponent>(parameters => parameters
+				.Add(component => component.HeaderText, "Default heading"));
+
+		// Assert
+		cut.Find("header h1").TextContent.Trim().Should().Be("Default heading");
+		cut.FindAll("header h2, header h3, header h4").Should().BeEmpty();
+	}
+
+	[Fact]
+	public void PageHeadingFallsBackToLevelOneWhenLevelIsUnsupported()
+	{
+		// Arrange (none)
+		// Act
+		var cut = Render<PageHeadingComponent>(parameters => parameters
+				.Add(component => component.HeaderText, "Fallback heading")
+				.Add(component => component.Level, "99")
+				.Add(component => component.TextColorClass, "text-primary-900 dark:text-primary-50"));
+
+		// Assert
+		var heading = cut.Find("header h1");
+
+		heading.TextContent.Trim().Should().Be("Fallback heading");
+		heading.GetAttribute("class").Should().Contain("text-primary-900").And.Contain("dark:text-primary-50");
+		cut.FindAll("header h2, header h3, header h4").Should().BeEmpty();
+	}
+}
diff --git a/tests/Web.Tests.Bunit/Components/RazorSmokeTests.cs b/tests/Web.Tests.Bunit/Components/RazorSmokeTests.cs
index 086ac951..bb0032ab 100644
--- a/tests/Web.Tests.Bunit/Components/RazorSmokeTests.cs
+++ b/tests/Web.Tests.Bunit/Components/RazorSmokeTests.cs
@@ -89,6 +89,25 @@ public void ConfirmDeleteDialogShowsDialogWhenVisible()
 		cut.Markup.Should().Contain("My Post");
 	}
 
+	[Fact]
+	public void ConfirmDeleteDialogUsesDestructiveAndSecondaryButtonVariants()
+	{
+		// Arrange (none)
+		// Act
+		var cut = Render<ConfirmDeleteDialog>(parameters => parameters
+				.Add(p => p.IsVisible, true)
+				.Add(p => p.PostTitle, "My Post"));
+
+		var deleteButton = cut.FindAll("button")
+				.Single(button => string.Equals(button.TextContent.Trim(), "Delete", StringComparison.Ordinal));
+		var cancelButton = cut.FindAll("button")
+				.Single(button => string.Equals(button.TextContent.Trim(), "Cancel", StringComparison.Ordinal));
+
+		// Assert
+		deleteButton.GetAttribute("class").Should().Contain("btn-destructive");
+		cancelButton.GetAttribute("class").Should().Contain("btn-secondary");
+	}
+
 	[Fact]
 	public void RedirectToLoginNavigatesToLoginWithReturnUrl()
 	{
@@ -136,12 +155,66 @@ public void BlogIndexRendersPostsForAuthorizedUserAndCanOpenDeleteDialog()
 		var cut = RenderWithUser<MyBlog.Web.Features.BlogPosts.List.Index>(CreatePrincipal("Alice", ["Author"]));
 
 		// Assert
+		var heading = cut.Find("header h1");
+
+		heading.TextContent.Trim().Should().Be("Blog Posts");
+		heading.GetAttribute("class").Should().Contain("text-primary-900").And.Contain("dark:text-primary-50");
 		cut.Markup.Should().Contain("First");
 		cut.Markup.Should().Contain("Edit");
 		cut.Find("button").Click();
 		cut.Markup.Should().Contain("Confirm Delete");
 	}
 
+	[Fact]
+	public void BlogIndexUsesPrimaryAndSecondaryButtonVariantsForAuthorActions()
+	{
+		// Arrange
+		var sender = Substitute.For<ISender>();
+		var posts = new[]
+		{
+						new BlogPostDto(Guid.NewGuid(), "First", "Content", "Alice", DateTime.UtcNow, null, false)
+				};
+
+		sender.Send(Arg.Any<GetBlogPostsQuery>(), Arg.Any<CancellationToken>())
+				.Returns(Task.FromResult(Result.Ok<IReadOnlyList<BlogPostDto>>(posts)));
+
+		Services.AddSingleton(sender);
+
+		// Act
+		var cut = RenderWithUser<MyBlog.Web.Features.BlogPosts.List.Index>(CreatePrincipal("Alice", ["Author"]));
+		var createLink = cut.Find("a[href='/blog/create']");
+		var editLink = cut.Find($"a[href='/blog/edit/{posts[0].Id}']");
+
+		// Assert
+		createLink.GetAttribute("class").Should().Contain("btn-primary");
+		editLink.GetAttribute("class").Should().Contain("btn-secondary");
+	}
+
+	[Fact]
+	public void BlogIndexUsesBtnDestructiveForInlineDeleteButton()
+	{
+		// Arrange
+		var sender = Substitute.For<ISender>();
+		var posts = new[]
+		{
+						new BlogPostDto(Guid.NewGuid(), "First", "Content", "Alice", DateTime.UtcNow, null, false)
+				};
+
+		sender.Send(Arg.Any<GetBlogPostsQuery>(), Arg.Any<CancellationToken>())
+				.Returns(Task.FromResult(Result.Ok<IReadOnlyList<BlogPostDto>>(posts)));
+
+		Services.AddSingleton(sender);
+
+		// Act
+		var cut = RenderWithUser<MyBlog.Web.Features.BlogPosts.List.Index>(CreatePrincipal("Alice", ["Author"]));
+
+		var deleteButton = cut.FindAll("button")
+				.Single(button => string.Equals(button.TextContent.Trim(), "Delete", StringComparison.Ordinal));
+
+		// Assert — inline delete must use the shared destructive variant, not raw Tailwind classes
+		deleteButton.GetAttribute("class").Should().Contain("btn-destructive");
+	}
+
 	[Fact]
 	public void BlogIndexShowsEmptyStateWhenNoPostsExist()
 	{
@@ -159,6 +232,25 @@ public void BlogIndexShowsEmptyStateWhenNoPostsExist()
 		cut.Markup.Should().Contain("No posts yet.");
 	}
 
+	[Fact]
+	public void BlogIndexShowsDismissibleErrorWhenInitialLoadFails()
+	{
+		// Arrange
+		var sender = Substitute.For<ISender>();
+		sender.Send(Arg.Any<GetBlogPostsQuery>(), Arg.Any<CancellationToken>())
+				.Returns(Task.FromResult(Result.Fail<IReadOnlyList<BlogPostDto>>("Unable to load posts.")));
+
+		Services.AddSingleton(sender);
+
+		// Act
+		var cut = RenderWithUser<MyBlog.Web.Features.BlogPosts.List.Index>(CreatePrincipal("Alice", ["Author"]));
+
+		// Assert
+		cut.Markup.Should().Contain("Unable to load posts.");
+		cut.Find("button.alert-dismiss").Click();
+		cut.Markup.Should().NotContain("Unable to load posts.");
+	}
+
 	[Fact]
 	public void BlogIndexConfirmDeleteSendsDeleteCommandAndRefreshesList()
 	{
@@ -232,11 +324,30 @@ public void CreatePostRendersForm()
 		var cut = RenderWithUser<Create>(CreatePrincipal("Alice", ["Author"]));
 
 		// Assert
-		cut.Markup.Should().Contain("Create Post");
+		var heading = cut.Find("header h1");
+
+		heading.TextContent.Trim().Should().Be("Create Post");
+		heading.GetAttribute("class").Should().Contain("text-primary-900").And.Contain("dark:text-primary-50");
 		cut.FindAll("input").Count.Should().BeGreaterThanOrEqualTo(2);
 		cut.Find("textarea");
 	}
 
+	[Fact]
+	public void CreatePostUsesPrimaryAndSecondaryButtonVariants()
+	{
+		// Arrange
+		Services.AddSingleton(Substitute.For<ISender>());
+
+		// Act
+		var cut = RenderWithUser<Create>(CreatePrincipal("Alice", ["Author"]));
+		var submitButton = cut.Find("button[type='submit']");
+		var cancelLink = cut.Find("a[href='/blog']");
+
+		// Assert
+		submitButton.GetAttribute("class").Should().Contain("btn-primary");
+		cancelLink.GetAttribute("class").Should().Contain("btn-secondary");
+	}
+
 	[Fact]
 	public void CreatePostSubmitsAndNavigatesToBlogWhenCommandSucceeds()
 	{
@@ -264,6 +375,29 @@ public void CreatePostSubmitsAndNavigatesToBlogWhenCommandSucceeds()
 		navigation.Uri.Should().EndWith("/blog");
 	}
 
+	[Fact]
+	public void CreatePostShowsDismissibleErrorWhenCommandFails()
+	{
+		// Arrange
+		var sender = Substitute.For<ISender>();
+		sender.Send(Arg.Any<CreateBlogPostCommand>(), Arg.Any<CancellationToken>())
+				.Returns(Task.FromResult(Result.Fail<Guid>("Unable to create post.")));
+		Services.AddSingleton(sender);
+
+		// Act
+		var cut = RenderWithUser<Create>(CreatePrincipal("Alice", ["Author"]));
+
+		cut.FindAll("input")[0].Change("My title");
+		cut.FindAll("input")[1].Change("Alice");
+		cut.Find("textarea").Change("Hello world");
+		cut.Find("form").Submit();
+
+		// Assert
+		cut.Markup.Should().Contain("Unable to create post.");
+		cut.Find("button.alert-dismiss").Click();
+		cut.Markup.Should().NotContain("Unable to create post.");
+	}
+
 	[Fact]
 	public void EditPostLoadsExistingPost()
 	{
@@ -286,6 +420,29 @@ public void EditPostLoadsExistingPost()
 		cut.Markup.Should().Contain("Existing content");
 	}
 
+	[Fact]
+	public void EditPostUsesPrimaryAndSecondaryButtonVariants()
+	{
+		// Arrange
+		var sender = Substitute.For<ISender>();
+		var postId = Guid.NewGuid();
+		var post = new BlogPostDto(postId, "Existing title", "Existing content", "Alice", DateTime.UtcNow, null, false);
+
+		sender.Send(Arg.Any<GetBlogPostByIdQuery>(), Arg.Any<CancellationToken>())
+				.Returns(Task.FromResult(Result.Ok<BlogPostDto?>(post)));
+
+		Services.AddSingleton(sender);
+
+		// Act
+		var cut = RenderWithUser<Edit>(CreatePrincipal("Alice", ["Author"]), parameters => parameters.Add(p => p.Id, postId));
+		var saveButton = cut.Find("button[type='submit']");
+		var cancelLink = cut.Find("a[href='/blog']");
+
+		// Assert
+		saveButton.GetAttribute("class").Should().Contain("btn-primary");
+		cancelLink.GetAttribute("class").Should().Contain("btn-secondary");
+	}
+
 	[Fact]
 	public void EditPostShowsConcurrencyMessageWhenSaveFailsWithConcurrency()
 	{
@@ -363,11 +520,61 @@ public void ManageRolesRendersUsersAndAvailableRoles()
 		var cut = RenderWithUser<ManageRoles>(CreatePrincipal("Admin User", ["Admin"]));
 
 		// Assert
-		cut.Markup.Should().Contain("Manage User Roles");
+		var heading = cut.Find("header h1");
+
+		heading.TextContent.Trim().Should().Be("Manage User Roles");
+		heading.GetAttribute("class").Should().Contain("text-primary-900").And.Contain("dark:text-primary-50");
 		cut.Markup.Should().Contain("Available roles: Admin, Author");
 		cut.Markup.Should().Contain("admin@example.com");
 	}
 
+	[Fact]
+	public void ManageRolesShowsLoadingMessageWhileQueriesArePending()
+	{
+		// Arrange
+		var sender = Substitute.For<ISender>();
+		var usersTask = new TaskCompletionSource<Result<IReadOnlyList<UserWithRolesDto>>>(TaskCreationOptions.RunContinuationsAsynchronously);
+		var rolesTask = new TaskCompletionSource<Result<IReadOnlyList<RoleDto>>>(TaskCreationOptions.RunContinuationsAsynchronously);
+
+		sender.Send(Arg.Any<GetUsersWithRolesQuery>(), Arg.Any<CancellationToken>())
+				.Returns(usersTask.Task);
+		sender.Send(Arg.Any<GetAvailableRolesQuery>(), Arg.Any<CancellationToken>())
+				.Returns(rolesTask.Task);
+
+		Services.AddSingleton(sender);
+
+		// Act
+		var cut = RenderWithUser<ManageRoles>(CreatePrincipal("Admin User", ["Admin"]));
+
+		// Assert
+		cut.Markup.Should().Contain("Loading users...");
+
+		usersTask.SetResult(Result.Ok<IReadOnlyList<UserWithRolesDto>>(Array.Empty<UserWithRolesDto>()));
+		rolesTask.SetResult(Result.Ok<IReadOnlyList<RoleDto>>(Array.Empty<RoleDto>()));
+		cut.WaitForAssertion(() => cut.Markup.Should().Contain("Actions"));
+	}
+
+	[Fact]
+	public void ManageRolesShowsDismissibleErrorWhenUsersCannotLoad()
+	{
+		// Arrange
+		var sender = Substitute.For<ISender>();
+		sender.Send(Arg.Any<GetUsersWithRolesQuery>(), Arg.Any<CancellationToken>())
+				.Returns(Task.FromResult(Result.Fail<IReadOnlyList<UserWithRolesDto>>("Unable to load users.")));
+		sender.Send(Arg.Any<GetAvailableRolesQuery>(), Arg.Any<CancellationToken>())
+				.Returns(Task.FromResult(Result.Ok<IReadOnlyList<RoleDto>>(Array.Empty<RoleDto>())));
+
+		Services.AddSingleton(sender);
+
+		// Act
+		var cut = RenderWithUser<ManageRoles>(CreatePrincipal("Admin User", ["Admin"]));
+
+		// Assert
+		cut.Markup.Should().Contain("Unable to load users.");
+		cut.Find("button.alert-dismiss").Click();
+		cut.Markup.Should().NotContain("Unable to load users.");
+	}
+
 	[Fact]
 	public void ManageRolesAssignButtonSendsCommandAndRefreshesUsers()
 	{
diff --git a/tests/Web.Tests.Bunit/Features/ProfileTests.cs b/tests/Web.Tests.Bunit/Features/ProfileTests.cs
index 139a93ab..d8ba6647 100644
--- a/tests/Web.Tests.Bunit/Features/ProfileTests.cs
+++ b/tests/Web.Tests.Bunit/Features/ProfileTests.cs
@@ -171,15 +171,15 @@ public void ProfileAdminRoleBadgeHasRedColorClasses()
 		// Act
 		var cut = RenderForUser(principal);
 
-		// Assert — the roles card Admin span must carry red Tailwind classes
+		// Assert — the roles card Admin span must carry solid red Tailwind classes
 		var adminBadge = cut.FindAll("span")
 				.FirstOrDefault(span =>
 						span.TextContent.Trim() == "Admin"
 						&& span.GetAttribute("class") is { } cls
-						&& cls.Contains("bg-red-100", StringComparison.Ordinal));
+						&& cls.Contains("bg-red-700", StringComparison.Ordinal));
 
-		adminBadge.Should().NotBeNull("Admin role should render with red-100 background");
-		adminBadge.GetAttribute("class").Should().Contain("text-red-800");
+		adminBadge.Should().NotBeNull("Admin role should render with red-700 background");
+		adminBadge.GetAttribute("class").Should().Contain("text-white");
 	}
 
 	[Fact]
@@ -197,15 +197,15 @@ public void ProfileNonAdminRoleBadgeHasGreenColorClasses()
 		// Act
 		var cut = RenderForUser(principal);
 
-		// Assert — the roles card Author span must carry green Tailwind classes
+		// Assert — the roles card Author span must carry solid green Tailwind classes
 		var authorBadge = cut.FindAll("span")
 				.FirstOrDefault(span =>
 						span.TextContent.Trim() == "Author"
 						&& span.GetAttribute("class") is { } cls
-						&& cls.Contains("bg-green-100", StringComparison.Ordinal));
+						&& cls.Contains("bg-green-700", StringComparison.Ordinal));
 
-		authorBadge.Should().NotBeNull("Non-admin role should render with green-100 background");
-		authorBadge.GetAttribute("class").Should().Contain("text-green-800");
+		authorBadge.Should().NotBeNull("Non-admin role should render with green-700 background");
+		authorBadge.GetAttribute("class").Should().Contain("text-white");
 	}
 
 	[Fact]
@@ -223,14 +223,14 @@ public void ProfileAdminHeaderBadgeHasRedBackgroundClass()
 		// Act
 		var cut = RenderForUser(principal);
 
-		// Assert — the header-area Admin badge (title="Administrator") must use red-600 bg
+		// Assert — the header-area Admin badge (title="Administrator") must use red-700 bg
 		var headerBadge = cut.FindAll("span")
 				.FirstOrDefault(span =>
 						span.GetAttribute("title") == "Administrator"
 						&& span.GetAttribute("class") is { } cls
-						&& cls.Contains("bg-red-600", StringComparison.Ordinal));
+						&& cls.Contains("bg-red-700", StringComparison.Ordinal));
 
-		headerBadge.Should().NotBeNull("Header Admin badge should render with bg-red-600");
+		headerBadge.Should().NotBeNull("Header Admin badge should render with bg-red-700");
 	}
 
 	private IRenderedComponent<Profile> RenderForUser(ClaimsPrincipal principal)