diff --git a/src/ScadaLink.CentralUI/Components/Layout/MainLayout.razor b/src/ScadaLink.CentralUI/Components/Layout/MainLayout.razor
index 0ebafe1..24468b9 100644
--- a/src/ScadaLink.CentralUI/Components/Layout/MainLayout.razor
+++ b/src/ScadaLink.CentralUI/Components/Layout/MainLayout.razor
@@ -1,8 +1,23 @@
 @inherits LayoutComponentBase
 
-<div class="d-flex">
-    <NavMenu />
-    <main class="flex-grow-1 p-3" style="min-height: 100vh; background-color: #f8f9fa;">
+<div class="d-flex flex-column flex-lg-row" style="min-height: 100vh;">
+    @* Hamburger toggle: visible only on viewports <lg.
+       Bootstrap collapse JS lives in bootstrap.bundle.min.js (loaded in App.razor). *@
+    <button class="btn btn-outline-secondary btn-sm d-lg-none m-2 align-self-start"
+            type="button"
+            data-bs-toggle="collapse"
+            data-bs-target="#sidebar-collapse"
+            aria-controls="sidebar-collapse"
+            aria-expanded="false"
+            aria-label="Toggle navigation">
+        &#9776;
+    </button>
+
+    <div class="collapse d-lg-block" id="sidebar-collapse">
+        <NavMenu />
+    </div>
+
+    <main class="flex-grow-1 p-3" style="background-color: #f8f9fa;">
         @Body
     </main>
 </div>
diff --git a/src/ScadaLink.CentralUI/Components/Layout/NavMenu.razor b/src/ScadaLink.CentralUI/Components/Layout/NavMenu.razor
index 59c4fc9..c94e13d 100644
--- a/src/ScadaLink.CentralUI/Components/Layout/NavMenu.razor
+++ b/src/ScadaLink.CentralUI/Components/Layout/NavMenu.razor
@@ -3,87 +3,92 @@
 <nav class="sidebar d-flex flex-column">
     <div class="brand">ScadaLink</div>
 
-    <ul class="nav flex-column flex-grow-1">
-        <li class="nav-item">
-            <NavLink class="nav-link" href="/" Match="NavLinkMatch.All">Dashboard</NavLink>
-        </li>
+    <div style="overflow-y:auto; flex:1 1 auto; min-height:0;">
+        <ul class="nav flex-column">
+            <li class="nav-item">
+                <NavLink class="nav-link" href="/" Match="NavLinkMatch.All">Dashboard</NavLink>
+            </li>
 
-        <AuthorizeView>
-            <Authorized>
-                @* Admin section — Admin role only *@
-                <AuthorizeView Policy="@AuthorizationPolicies.RequireAdmin">
-                    <Authorized Context="adminContext">
-                        <li class="nav-section-header">Admin</li>
-                        <li class="nav-item">
-                            <NavLink class="nav-link" href="/admin/ldap-mappings">LDAP Mappings</NavLink>
-                        </li>
-                        <li class="nav-item">
-                            <NavLink class="nav-link" href="/admin/sites">Sites</NavLink>
-                        </li>
-                        <li class="nav-item">
-                            <NavLink class="nav-link" href="/admin/connections">Connections</NavLink>
-                        </li>
-                        <li class="nav-item">
-                            <NavLink class="nav-link" href="/admin/api-keys">API Keys</NavLink>
-                        </li>
-                    </Authorized>
-                </AuthorizeView>
+            <AuthorizeView>
+                <Authorized>
+                    @* Admin section — Admin role only *@
+                    <AuthorizeView Policy="@AuthorizationPolicies.RequireAdmin">
+                        <Authorized Context="adminContext">
+                            <div role="presentation" class="nav-section-header">Admin</div>
+                            <li class="nav-item">
+                                <NavLink class="nav-link" href="/admin/ldap-mappings">LDAP Mappings</NavLink>
+                            </li>
+                            <li class="nav-item">
+                                <NavLink class="nav-link" href="/admin/sites">Sites</NavLink>
+                            </li>
+                            <li class="nav-item">
+                                <NavLink class="nav-link" href="/admin/connections">Connections</NavLink>
+                            </li>
+                            <li class="nav-item">
+                                <NavLink class="nav-link" href="/admin/api-keys">API Keys</NavLink>
+                            </li>
+                        </Authorized>
+                    </AuthorizeView>
 
-                @* Design section — Design role *@
-                <AuthorizeView Policy="@AuthorizationPolicies.RequireDesign">
-                    <Authorized Context="designContext">
-                        <li class="nav-section-header">Design</li>
-                        <li class="nav-item">
-                            <NavLink class="nav-link" href="/design/templates">Templates</NavLink>
-                        </li>
-                        <li class="nav-item">
-                            <NavLink class="nav-link" href="/design/shared-scripts">Shared Scripts</NavLink>
-                        </li>
-                        <li class="nav-item">
-                            <NavLink class="nav-link" href="/design/external-systems">External Systems</NavLink>
-                        </li>
-                    </Authorized>
-                </AuthorizeView>
+                    @* Design section — Design role *@
+                    <AuthorizeView Policy="@AuthorizationPolicies.RequireDesign">
+                        <Authorized Context="designContext">
+                            <div role="presentation" class="nav-section-header">Design</div>
+                            <li class="nav-item">
+                                <NavLink class="nav-link" href="/design/templates">Templates</NavLink>
+                            </li>
+                            <li class="nav-item">
+                                <NavLink class="nav-link" href="/design/shared-scripts">Shared Scripts</NavLink>
+                            </li>
+                            <li class="nav-item">
+                                <NavLink class="nav-link" href="/design/external-systems">External Systems</NavLink>
+                            </li>
+                            <li class="nav-item">
+                                <NavLink class="nav-link" href="/design/smtp">SMTP Configuration</NavLink>
+                            </li>
+                        </Authorized>
+                    </AuthorizeView>
 
-                @* Deployment section — Deployment role *@
-                <AuthorizeView Policy="@AuthorizationPolicies.RequireDeployment">
-                    <Authorized Context="deploymentContext">
-                        <li class="nav-section-header">Deployment</li>
-                        <li class="nav-item">
-                            <NavLink class="nav-link" href="/deployment/topology">Topology</NavLink>
-                        </li>
-                        <li class="nav-item">
-                            <NavLink class="nav-link" href="/deployment/deployments">Deployments</NavLink>
-                        </li>
-                        <li class="nav-item">
-                            <NavLink class="nav-link" href="/deployment/debug-view">Debug View</NavLink>
-                        </li>
-                    </Authorized>
-                </AuthorizeView>
+                    @* Deployment section — Deployment role *@
+                    <AuthorizeView Policy="@AuthorizationPolicies.RequireDeployment">
+                        <Authorized Context="deploymentContext">
+                            <div role="presentation" class="nav-section-header">Deployment</div>
+                            <li class="nav-item">
+                                <NavLink class="nav-link" href="/deployment/topology">Topology</NavLink>
+                            </li>
+                            <li class="nav-item">
+                                <NavLink class="nav-link" href="/deployment/deployments">Deployments</NavLink>
+                            </li>
+                            <li class="nav-item">
+                                <NavLink class="nav-link" href="/deployment/debug-view">Debug View</NavLink>
+                            </li>
+                        </Authorized>
+                    </AuthorizeView>
 
-                @* Monitoring — visible to all authenticated users *@
-                <li class="nav-section-header">Monitoring</li>
-                <li class="nav-item">
-                    <NavLink class="nav-link" href="/monitoring/health">Health Dashboard</NavLink>
-                </li>
-                <li class="nav-item">
-                    <NavLink class="nav-link" href="/monitoring/event-logs">Event Logs</NavLink>
-                </li>
-                <li class="nav-item">
-                    <NavLink class="nav-link" href="/monitoring/parked-messages">Parked Messages</NavLink>
-                </li>
+                    @* Monitoring — visible to all authenticated users *@
+                    <div role="presentation" class="nav-section-header">Monitoring</div>
+                    <li class="nav-item">
+                        <NavLink class="nav-link" href="/monitoring/health">Health Dashboard</NavLink>
+                    </li>
+                    <li class="nav-item">
+                        <NavLink class="nav-link" href="/monitoring/event-logs">Event Logs</NavLink>
+                    </li>
+                    <li class="nav-item">
+                        <NavLink class="nav-link" href="/monitoring/parked-messages">Parked Messages</NavLink>
+                    </li>
 
-                @* Audit Log — Admin only *@
-                <AuthorizeView Policy="@AuthorizationPolicies.RequireAdmin">
-                    <Authorized Context="auditContext">
-                        <li class="nav-item">
-                            <NavLink class="nav-link" href="/monitoring/audit-log">Audit Log</NavLink>
-                        </li>
-                    </Authorized>
-                </AuthorizeView>
-            </Authorized>
-        </AuthorizeView>
-    </ul>
+                    @* Audit Log — Admin only *@
+                    <AuthorizeView Policy="@AuthorizationPolicies.RequireAdmin">
+                        <Authorized Context="auditContext">
+                            <li class="nav-item">
+                                <NavLink class="nav-link" href="/monitoring/audit-log">Audit Log</NavLink>
+                            </li>
+                        </Authorized>
+                    </AuthorizeView>
+                </Authorized>
+            </AuthorizeView>
+        </ul>
+    </div>
 
     <AuthorizeView>
         <Authorized>
diff --git a/src/ScadaLink.CentralUI/Components/Pages/Admin/Sites.razor b/src/ScadaLink.CentralUI/Components/Pages/Admin/Sites.razor
index 5fbab62..8261e78 100644
--- a/src/ScadaLink.CentralUI/Components/Pages/Admin/Sites.razor
+++ b/src/ScadaLink.CentralUI/Components/Pages/Admin/Sites.razor
@@ -41,7 +41,7 @@
     </div>
 
     <ToastNotification @ref="_toast" />
-    <ConfirmDialog @ref="_confirmDialog" />
+    <ConfirmDialog @ref="_confirmDialog" ConfirmButtonClass="btn-danger" />
 
     @if (_loading)
     {
diff --git a/src/ScadaLink.CentralUI/Components/Pages/Login.razor b/src/ScadaLink.CentralUI/Components/Pages/Login.razor
index 774c8fe..69e5b07 100644
--- a/src/ScadaLink.CentralUI/Components/Pages/Login.razor
+++ b/src/ScadaLink.CentralUI/Components/Pages/Login.razor
@@ -2,8 +2,8 @@
 @using Microsoft.AspNetCore.Authorization
 @attribute [AllowAnonymous]
 
-<div class="container" style="max-width: 400px; margin-top: 10vh;">
-    <div class="card shadow-sm">
+<div class="d-flex align-items-center justify-content-center min-vh-100">
+    <div class="card shadow-sm" style="max-width: 400px; width: 100%;">
         <div class="card-body p-4">
             <h4 class="card-title mb-4 text-center">ScadaLink</h4>
 
@@ -25,9 +25,9 @@
                 </div>
                 <button type="submit" class="btn btn-primary w-100">Sign In</button>
             </form>
+            <p class="text-center text-muted mt-3 small mb-0">Authenticate with your organization's LDAP credentials.</p>
         </div>
     </div>
-    <p class="text-center text-muted mt-3 small">Authenticate with your organization's LDAP credentials.</p>
 </div>
 
 @code {
diff --git a/src/ScadaLink.CentralUI/Components/Shared/ConfirmDialog.razor b/src/ScadaLink.CentralUI/Components/Shared/ConfirmDialog.razor
index 1d55c59..04d6349 100644
--- a/src/ScadaLink.CentralUI/Components/Shared/ConfirmDialog.razor
+++ b/src/ScadaLink.CentralUI/Components/Shared/ConfirmDialog.razor
@@ -1,9 +1,16 @@
-@* Reusable confirmation dialog using Bootstrap modal *@
+@* Reusable confirmation dialog using Bootstrap modal.
+   z-index ladder: Toast container 1090 > this modal 1055 > this backdrop 1040. *@
+@inject IJSRuntime JS
+@implements IAsyncDisposable
 
 @if (_visible)
 {
     <div class="modal-backdrop fade show"></div>
-    <div class="modal fade show d-block" tabindex="-1" role="dialog">
+    <div @ref="_modalRef"
+         class="modal fade show d-block"
+         tabindex="-1"
+         role="dialog"
+         @onkeydown="OnKeyDownAsync">
         <div class="modal-dialog modal-dialog-centered" role="document">
             <div class="modal-content">
                 <div class="modal-header">
@@ -24,12 +31,14 @@
 
 @code {
     private bool _visible;
+    private bool _bodyLocked;
     private TaskCompletionSource<bool>? _tcs;
+    private ElementReference _modalRef;
 
     [Parameter] public string Title { get; set; } = "Confirm";
     [Parameter] public string Message { get; set; } = "Are you sure?";
     [Parameter] public string ConfirmText { get; set; } = "Confirm";
-    [Parameter] public string ConfirmButtonClass { get; set; } = "btn-danger";
+    [Parameter] public string ConfirmButtonClass { get; set; } = "btn-primary";
 
     public Task<bool> ShowAsync(string? message = null, string? title = null)
     {
@@ -41,15 +50,82 @@
         return _tcs.Task;
     }
 
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (_visible && !_bodyLocked)
+        {
+            _bodyLocked = true;
+            await TryLockBodyAsync();
+            // Focus the modal so the @onkeydown handler receives Escape.
+            try { await _modalRef.FocusAsync(); }
+            catch { /* prerender or detached: ignore */ }
+        }
+    }
+
+    private async Task OnKeyDownAsync(KeyboardEventArgs e)
+    {
+        if (e.Key == "Escape")
+        {
+            await CancelAsync();
+        }
+    }
+
     private void Confirm()
     {
-        _visible = false;
-        _tcs?.TrySetResult(true);
+        Close(true);
     }
 
     private void Cancel()
+    {
+        Close(false);
+    }
+
+    private Task CancelAsync()
+    {
+        Close(false);
+        return Task.CompletedTask;
+    }
+
+    private void Close(bool result)
     {
         _visible = false;
-        _tcs?.TrySetResult(false);
+        _ = TryUnlockBodyAsync();
+        _tcs?.TrySetResult(result);
+    }
+
+    private async Task TryLockBodyAsync()
+    {
+        try
+        {
+            await JS.InvokeVoidAsync("document.body.classList.add", "modal-open");
+        }
+        catch
+        {
+            // Prerendering has no JS runtime; log only.
+            try { await JS.InvokeVoidAsync("console.debug", "ConfirmDialog: JS interop unavailable for body lock."); }
+            catch { /* swallow */ }
+        }
+    }
+
+    private async Task TryUnlockBodyAsync()
+    {
+        _bodyLocked = false;
+        try
+        {
+            await JS.InvokeVoidAsync("document.body.classList.remove", "modal-open");
+        }
+        catch
+        {
+            try { await JS.InvokeVoidAsync("console.debug", "ConfirmDialog: JS interop unavailable for body unlock."); }
+            catch { /* swallow */ }
+        }
+    }
+
+    public async ValueTask DisposeAsync()
+    {
+        if (_bodyLocked)
+        {
+            await TryUnlockBodyAsync();
+        }
     }
 }
diff --git a/src/ScadaLink.CentralUI/Components/Shared/DataTable.razor b/src/ScadaLink.CentralUI/Components/Shared/DataTable.razor
index 3b6c706..361e02a 100644
--- a/src/ScadaLink.CentralUI/Components/Shared/DataTable.razor
+++ b/src/ScadaLink.CentralUI/Components/Shared/DataTable.razor
@@ -6,8 +6,15 @@
     {
         <div class="row mb-2">
             <div class="col-md-4">
-                <input type="text" class="form-control form-control-sm" placeholder="Search..."
-                       @bind="_searchTerm" @bind:event="oninput" @bind:after="ApplyFilter" />
+                <div class="input-group input-group-sm">
+                    <input type="text" class="form-control form-control-sm" placeholder="Search..."
+                           @bind="_searchTerm" @bind:event="oninput" @bind:after="ApplyFilter" />
+                    @if (!string.IsNullOrEmpty(_searchTerm))
+                    {
+                        <button type="button" class="btn btn-outline-secondary"
+                                aria-label="Clear search" @onclick="ClearSearch">&times;</button>
+                    }
+                </div>
             </div>
             @if (FilterContent != null)
             {
@@ -47,7 +54,10 @@
     <nav>
         <ul class="pagination pagination-sm justify-content-end">
             <li class="page-item @(_currentPage <= 1 ? "disabled" : "")">
-                <button class="page-link" @onclick="() => GoToPage(_currentPage - 1)">Previous</button>
+                <button class="page-link" type="button"
+                        disabled="@(_currentPage <= 1)"
+                        aria-disabled="@((_currentPage <= 1).ToString().ToLowerInvariant())"
+                        @onclick="() => GoToPage(_currentPage - 1)">Previous</button>
             </li>
             @for (int i = 1; i <= _totalPages; i++)
             {
@@ -57,7 +67,10 @@
                 </li>
             }
             <li class="page-item @(_currentPage >= _totalPages ? "disabled" : "")">
-                <button class="page-link" @onclick="() => GoToPage(_currentPage + 1)">Next</button>
+                <button class="page-link" type="button"
+                        disabled="@(_currentPage >= _totalPages)"
+                        aria-disabled="@((_currentPage >= _totalPages).ToString().ToLowerInvariant())"
+                        @onclick="() => GoToPage(_currentPage + 1)">Next</button>
             </li>
         </ul>
     </nav>
@@ -112,6 +125,12 @@
         UpdatePage();
     }
 
+    private void ClearSearch()
+    {
+        _searchTerm = string.Empty;
+        ApplyFilter();
+    }
+
     private void UpdatePage()
     {
         _pagedItems = _filteredItems
diff --git a/src/ScadaLink.CentralUI/Components/Shared/LoadingSpinner.razor b/src/ScadaLink.CentralUI/Components/Shared/LoadingSpinner.razor
index 0fe7537..59384ad 100644
--- a/src/ScadaLink.CentralUI/Components/Shared/LoadingSpinner.razor
+++ b/src/ScadaLink.CentralUI/Components/Shared/LoadingSpinner.razor
@@ -2,7 +2,7 @@
 
 @if (IsLoading)
 {
-    <div class="d-flex align-items-center text-muted @CssClass">
+    <div class="d-flex align-items-center text-secondary @CssClass">
         <div class="spinner-border spinner-border-sm me-2" role="status">
             <span class="visually-hidden">Loading...</span>
         </div>
diff --git a/src/ScadaLink.CentralUI/Components/Shared/NewFolderDialog.razor b/src/ScadaLink.CentralUI/Components/Shared/NewFolderDialog.razor
index e1c6c15..5e0411e 100644
--- a/src/ScadaLink.CentralUI/Components/Shared/NewFolderDialog.razor
+++ b/src/ScadaLink.CentralUI/Components/Shared/NewFolderDialog.razor
@@ -1,7 +1,8 @@
 @if (IsVisible)
 {
-    <div class="modal show d-block" tabindex="-1" style="background: rgba(0,0,0,0.4);">
-        <div class="modal-dialog modal-sm">
+    <div class="modal-backdrop fade show"></div>
+    <div class="modal fade show d-block" tabindex="-1" role="dialog">
+        <div class="modal-dialog modal-dialog-centered modal-sm" role="document">
             <div class="modal-content">
                 <div class="modal-header">
                     <h6 class="modal-title">New Folder</h6>
diff --git a/src/ScadaLink.CentralUI/Components/Shared/NotAuthorizedView.razor b/src/ScadaLink.CentralUI/Components/Shared/NotAuthorizedView.razor
index 60cbc2d..2d33a9c 100644
--- a/src/ScadaLink.CentralUI/Components/Shared/NotAuthorizedView.razor
+++ b/src/ScadaLink.CentralUI/Components/Shared/NotAuthorizedView.razor
@@ -1,7 +1,14 @@
-<div class="container mt-5">
-    <div class="alert alert-warning" role="alert">
-        <h5 class="alert-heading">Not Authorized</h5>
-        <p class="mb-0">You do not have permission to access this page. Contact your administrator if you believe this is an error.</p>
+<div class="d-flex align-items-center justify-content-center min-vh-100">
+    <div class="card shadow-sm" style="max-width: 480px; width: 100%;">
+        <div class="card-body p-4">
+            <h4 class="card-title mb-3 text-center">ScadaLink</h4>
+            <div class="alert alert-warning" role="alert">
+                <h5 class="alert-heading">Not Authorized</h5>
+                <p class="mb-0">You do not have permission to access this page. Contact your administrator if you believe this is an error.</p>
+            </div>
+            <div class="d-flex justify-content-center">
+                <a href="/" class="btn btn-outline-primary btn-sm">Return to Dashboard</a>
+            </div>
+        </div>
     </div>
-    <a href="/" class="btn btn-outline-primary btn-sm">Return to Dashboard</a>
 </div>
diff --git a/src/ScadaLink.CentralUI/Components/Shared/ToastNotification.razor b/src/ScadaLink.CentralUI/Components/Shared/ToastNotification.razor
index 713f976..fb00bb9 100644
--- a/src/ScadaLink.CentralUI/Components/Shared/ToastNotification.razor
+++ b/src/ScadaLink.CentralUI/Components/Shared/ToastNotification.razor
@@ -1,7 +1,17 @@
-@* Reusable toast notification component *@
+@*
+   Reusable toast notification component.
+
+   z-index ladder:
+     Toast container   1090  (this component, on top)
+     ConfirmDialog modal element  1055  (Bootstrap default for .modal)
+     ConfirmDialog backdrop       1040  (Bootstrap default for .modal-backdrop)
+
+   Toasts intentionally float above ConfirmDialog so confirmation feedback
+   (Success/Error) is visible even while a dialog is open.
+*@
 @implements IDisposable
 
-<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 1090;">
+<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 1090;" aria-live="polite" aria-atomic="true">
     @foreach (var toast in _toasts)
     {
         <div class="toast show mb-2" role="alert">
@@ -15,30 +25,32 @@
 </div>
 
 @code {
+    private const int DefaultAutoDismissMs = 5000;
+
     private readonly List<ToastItem> _toasts = new();
     private readonly object _lock = new();
 
-    public void ShowSuccess(string message, string title = "Success")
+    public void ShowSuccess(string message, string title = "Success", int? autoDismissMs = null)
     {
-        AddToast(title, message, ToastType.Success);
+        AddToast(title, message, ToastType.Success, autoDismissMs);
     }
 
-    public void ShowError(string message, string title = "Error")
+    public void ShowError(string message, string title = "Error", int? autoDismissMs = null)
     {
-        AddToast(title, message, ToastType.Error);
+        AddToast(title, message, ToastType.Error, autoDismissMs);
     }
 
-    public void ShowWarning(string message, string title = "Warning")
+    public void ShowWarning(string message, string title = "Warning", int? autoDismissMs = null)
     {
-        AddToast(title, message, ToastType.Warning);
+        AddToast(title, message, ToastType.Warning, autoDismissMs);
     }
 
-    public void ShowInfo(string message, string title = "Info")
+    public void ShowInfo(string message, string title = "Info", int? autoDismissMs = null)
     {
-        AddToast(title, message, ToastType.Info);
+        AddToast(title, message, ToastType.Info, autoDismissMs);
     }
 
-    private void AddToast(string title, string message, ToastType type)
+    private void AddToast(string title, string message, ToastType type, int? autoDismissMs)
     {
         var toast = new ToastItem { Title = title, Message = message, Type = type };
         lock (_lock)
@@ -47,8 +59,8 @@
         }
         StateHasChanged();
 
-        // Auto-dismiss after 5 seconds
-        _ = Task.Delay(5000).ContinueWith(_ =>
+        var dismissMs = autoDismissMs ?? DefaultAutoDismissMs;
+        _ = Task.Delay(dismissMs).ContinueWith(_ =>
         {
             lock (_lock)
             {
diff --git a/src/ScadaLink.CentralUI/wwwroot/css/site.css b/src/ScadaLink.CentralUI/wwwroot/css/site.css
new file mode 100644
index 0000000..9e89e6f
--- /dev/null
+++ b/src/ScadaLink.CentralUI/wwwroot/css/site.css
@@ -0,0 +1,75 @@
+/* ScadaLink Central UI – global styles. Loaded from Host App.razor as
+   `_content/ScadaLink.CentralUI/css/site.css`. */
+
+.sidebar {
+    min-width: 220px;
+    max-width: 220px;
+    min-height: 100vh;
+    background-color: #212529;
+}
+
+.sidebar .nav-link {
+    color: #adb5bd;
+    padding: 0.4rem 1rem;
+    font-size: 0.9rem;
+}
+
+.sidebar .nav-link:hover {
+    color: #fff;
+    background-color: #343a40;
+}
+
+.sidebar .nav-link.active {
+    color: #fff;
+    background-color: #0d6efd;
+    /* Left accent so active state isn't carried by color alone. */
+    border-left: 3px solid #0d6efd;
+    padding-left: calc(1rem - 3px);
+}
+
+.sidebar .nav-section-header {
+    color: #6c757d;
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    padding: 0.75rem 1rem 0.25rem;
+    margin-top: 0.5rem;
+}
+
+.sidebar .brand {
+    color: #fff;
+    font-size: 1.1rem;
+    font-weight: 600;
+    padding: 1rem;
+    border-bottom: 1px solid #343a40;
+}
+
+/* When the sidebar is collapsed under <lg viewports the Bootstrap collapse
+   container removes the fixed width; restore full width on mobile. */
+@media (max-width: 991.98px) {
+    .sidebar {
+        min-width: 100%;
+        max-width: 100%;
+        min-height: auto;
+    }
+}
+
+#reconnect-modal {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 9999;
+    background-color: rgba(0, 0, 0, 0.5);
+}
+
+#reconnect-modal .modal-content {
+    max-width: 400px;
+    padding: 2rem;
+    text-align: center;
+    background: #fff;
+    border-radius: 0.5rem;
+}
diff --git a/src/ScadaLink.Host/Components/App.razor b/src/ScadaLink.Host/Components/App.razor
index f9213d6..87b684e 100644
--- a/src/ScadaLink.Host/Components/App.razor
+++ b/src/ScadaLink.Host/Components/App.razor
@@ -8,70 +8,14 @@
     <link href="/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
     <link href="/lib/bootstrap-icons/bootstrap-icons.css" rel="stylesheet" />
     <link href="/ScadaLink.Host.styles.css" rel="stylesheet" />
-    <style>
-        .sidebar {
-            min-width: 220px;
-            max-width: 220px;
-            min-height: 100vh;
-            background-color: #212529;
-        }
-        .sidebar .nav-link {
-            color: #adb5bd;
-            padding: 0.4rem 1rem;
-            font-size: 0.9rem;
-        }
-        .sidebar .nav-link:hover {
-            color: #fff;
-            background-color: #343a40;
-        }
-        .sidebar .nav-link.active {
-            color: #fff;
-            background-color: #0d6efd;
-        }
-        .sidebar .nav-section-header {
-            color: #6c757d;
-            font-size: 0.75rem;
-            font-weight: 600;
-            text-transform: uppercase;
-            letter-spacing: 0.05em;
-            padding: 0.75rem 1rem 0.25rem;
-            margin-top: 0.5rem;
-        }
-        .sidebar .brand {
-            color: #fff;
-            font-size: 1.1rem;
-            font-weight: 600;
-            padding: 1rem;
-            border-bottom: 1px solid #343a40;
-        }
-        #reconnect-modal {
-            display: none;
-            position: fixed;
-            top: 0; left: 0; right: 0; bottom: 0;
-            z-index: 9999;
-            background-color: rgba(0,0,0,0.5);
-        }
-        #reconnect-modal .modal-dialog {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            min-height: 100vh;
-        }
-        #reconnect-modal .modal-content {
-            max-width: 400px;
-            padding: 2rem;
-            text-align: center;
-            background: #fff;
-            border-radius: 0.5rem;
-        }
-    </style>
+    <link href="_content/ScadaLink.CentralUI/css/site.css" rel="stylesheet" />
     <HeadOutlet @rendermode="InteractiveServer" />
 </head>
 <body>
     <Routes @rendermode="InteractiveServer" />
 
     <div id="reconnect-modal">
-        <div class="modal-dialog">
+        <div class="modal-dialog modal-dialog-centered">
             <div class="modal-content">
                 <div class="spinner-border text-primary mb-3" role="status">
                     <span class="visually-hidden">Reconnecting...</span>