diff --git a/solution/src/PlcVanguard.Web/Components/Layout/MainLayout.razor b/solution/src/PlcVanguard.Web/Components/Layout/MainLayout.razor
index 316a7db..20a67de 100644
--- a/solution/src/PlcVanguard.Web/Components/Layout/MainLayout.razor
+++ b/solution/src/PlcVanguard.Web/Components/Layout/MainLayout.razor
@@ -1,37 +1,23 @@
 @inherits LayoutComponentBase
-@using System.Security.Claims
-
-<div class="page">
-    <div class="sidebar">
-        <NavMenu />
-    </div>
-
-    <main>
-        <div class="top-row px-4">
-            <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
-            @if (CurrentContext?.User?.Identity?.IsAuthenticated == true)
-            {
-                var name = CurrentContext.User.FindFirst(ClaimTypes.Name)?.Value;
-                <span class="ms-auto me-3">@name [Sign Out]</span>
-            }
-            else
-            {
-                <a href="/login" class="ms-auto me-3">Sign In</a>
-            }
-        </div>
-
-        <article class="content px-4">
-            @Body
-        </article>
-    </main>
-</div>
 
+<NavMenu />
+<main class="main-content">
+    <article class="content px-4 pt-5">
+        @Body
+    </article>
+</main>
 <div id="blazor-error-ui">
     An unhandled error has occurred.
     <a href="" class="reload">Reload</a>
     <a class="dismiss">🗙</a>
 </div>
 
-@code {
-    [Inject] private HttpContext CurrentContext { get; set; } = default!;
-}
+<style>
+    body {
+        margin-top: 56px;
+        background-color: #f1f5f9;
+    }
+    .main-content {
+        min-height: calc(100vh - 56px);
+    }
+</style>
diff --git a/solution/src/PlcVanguard.Web/Components/Layout/NavMenu.razor b/solution/src/PlcVanguard.Web/Components/Layout/NavMenu.razor
index 3f56954..0e7d49e 100644
--- a/solution/src/PlcVanguard.Web/Components/Layout/NavMenu.razor
+++ b/solution/src/PlcVanguard.Web/Components/Layout/NavMenu.razor
@@ -1,29 +1,170 @@
-<div class="top-row ps-3 navbar navbar-dark">
+@inject PLCService PlcService
+@inject NavigationManager NavManager
+@implements IDisposable
+@using Microsoft.AspNetCore.Components.Routing
+@using System.Security.Claims
+
+<nav class="navbar-custom">
     <div class="container-fluid">
-        <a class="navbar-brand" href="">PlcVanguard</a>
+        <div class="nav-brand d-flex align-items-center">
+            <NavLink Match="NavLinkMatch.All" href="/" class="d-flex align-items-center text-decoration-none">
+                <span class="logo-p rounded-circle me-2">P</span>
+                <span class="brand-text fw-semibold">PlcVanguard</span>
+            </NavLink>
+        </div>
+        <div class="nav-links d-flex align-items-center">
+            <NavLink href="/counter" class="nav-link-custom" Match="NavLinkMatch.Prefix">
+                History
+            </NavLink>
+            <NavLink href="/comparison" class="nav-link-custom" Match="NavLinkMatch.Prefix">
+                Comparison
+            </NavLink>
+        </div>
+        <div class="nav-right d-flex align-items-center gap-3">
+            <div class="connection-status d-flex align-items-center gap-2">
+                <span class="pulse-dot @(state.IsConnected ? "pulse-active" : "pulse-inactive")"></span>
+                <span class="status-text @(state.IsConnected ? "text-success" : "text-danger")">
+                    @if (state.IsConnected)
+                    {
+                        <text>Connected: @state.IpAddress (@state.CpuType)</text>
+                    }
+                    else
+                    {
+                        <text>Disconnected</text>
+                    }
+                </span>
+            </div>
+            @if (CurrentContext?.User?.Identity?.IsAuthenticated == true)
+            {
+                var name = CurrentContext.User.Claims.Where(c => c.Type == ClaimTypes.Name).Select(c => c.Value).FirstOrDefault();
+                <a href="/logout" class="text-white-50 small">Sign Out @name</a>
+            }
+            else
+            {
+                <a href="/login" class="text-white-50 small">Sign In</a>
+            }
+        </div>
     </div>
-</div>
+</nav>
 
-<input type="checkbox" title="Navigation menu" class="navbar-toggler" />
+@code {
+    [Inject] private HttpContext? CurrentContext { get; set; }
 
-<div class="nav-scrollable" onclick="document.querySelector('.navbar-toggler').click()">
-    <nav class="flex-column">
-        <div class="nav-item px-3">
-            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
-                <span class="bi bi-house-door-fill" aria-hidden="true"></span> Dashboard
-            </NavLink>
-        </div>
+    private PlcState state = new();
+    private Timer? _pollTimer;
 
-        <div class="nav-item px-3">
-            <NavLink class="nav-link" href="counter">
-                <span class="bi bi-plus-square" aria-hidden="true"></span> Historical
-            </NavLink>
-        </div>
+    protected override void OnInitialized()
+    {
+        state = PlcService.GetState();
+        _pollTimer = new Timer(_ =>
+        {
+            InvokeAsync(() =>
+            {
+                state = PlcService.GetState();
+                StateHasChanged();
+            });
+        }, null, 1000, 1000);
+    }
 
-        <div class="nav-item px-3">
-            <NavLink class="nav-link" href="comparison">
-                <span class="bi bi-graph-up" aria-hidden="true"></span> Comparison
-            </NavLink>
-        </div>
-    </nav>
-</div>
+    public void Dispose()
+    {
+        _pollTimer?.Dispose();
+    }
+}
+
+<style>
+    .navbar-custom {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        background-color: #0f172a;
+        height: 56px;
+        border-bottom: 1px solid #1e293b;
+        z-index: 1040;
+    }
+
+    .navbar-custom .container-fluid {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        height: 100%;
+        padding: 0 16px;
+    }
+
+    .brand-link {
+        text-decoration: none;
+        display: flex;
+        align-items: center;
+    }
+
+    .brand-text {
+        color: #f8fafc;
+        font-size: 1.1rem;
+    }
+
+    .logo-p {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 28px;
+        height: 28px;
+        background-color: #3b82f6;
+        color: #ffffff;
+        font-weight: bold;
+        font-size: 14px;
+        border-radius: 6px;
+        flex-shrink: 0;
+    }
+
+    .nav-link-custom {
+        color: #94a3b8 !important;
+        padding: 8px 16px;
+        border-radius: 6px;
+        font-size: 0.9rem;
+        transition: background-color 0.2s, color 0.2s;
+        text-decoration: none !important;
+    }
+
+    .nav-link-custom:hover {
+        background-color: rgba(255, 255, 255, 0.05) !important;
+        color: #f8fafc !important;
+    }
+
+    .nav-link-custom.active {
+        background-color: rgba(59, 130, 246, 0.2) !important;
+        color: #60a5fa !important;
+    }
+
+    .nav-links {
+        display: flex;
+        gap: 4px;
+    }
+
+    .connection-status {
+        font-size: 0.82rem;
+    }
+
+    .status-text {
+        font-weight: 500;
+        white-space: nowrap;
+    }
+
+    .pulse-dot {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background-color: #64748b;
+        flex-shrink: 0;
+    }
+
+    .pulse-active {
+        background-color: #22c55e;
+        box-shadow: 0 0 6px rgba(34, 197, 94, 0.6);
+        animation: _pv_pulse 2s ease-in-out infinite;
+    }
+
+    .pulse-inactive {
+        background-color: #dc2626;
+    }
+</style>
diff --git a/solution/src/PlcVanguard.Web/Components/Shared/HistoryTable.razor b/solution/src/PlcVanguard.Web/Components/Shared/HistoryTable.razor
new file mode 100644
index 0000000..1c6891a
--- /dev/null
+++ b/solution/src/PlcVanguard.Web/Components/Shared/HistoryTable.razor
@@ -0,0 +1,90 @@
+@using Microsoft.AspNetCore.Components.Web
+@using PlcVanguard.Web.Components.Shared
+
+<div class="rounded-xl border border-gray-200 bg-white p-6 shadow-sm">
+    <h2 class="font-semibold text-lg mb-4">Recording Sessions</h2>
+    <div class="overflow-x-auto">
+        <table class="w-full text-left text-xs">
+            <thead class="bg-gray-50">
+                <tr class="border-b">
+                    <th class="p-2">Session ID</th>
+                    <th class="p-2">Timestamp</th>
+                    <th class="p-2">Status</th>
+                    <th class="p-2">Action</th>
+                </tr>
+            </thead>
+            <tbody>
+                @if (Sessions.Any())
+                {
+                    @foreach (var s in Sessions)
+                    {
+                        <tr class="border-b hover:bg-gray-50 transition">
+                            <td class="p-2 font-mono font-semibold text-blue-600">@s.Id</td>
+                            <td class="p-2">@s.Timestamp.ToString("yyyy-MM-dd HH:mm:ss")</td>
+                            <td class="p-2">
+                                @if (s.Status == "Success")
+                                {
+                                    <span class="px-2 py-1 rounded-full text-[10px] font-bold bg-green-100 text-green-700">@s.Status</span>
+                                }
+                                else
+                                {
+                                    <span class="px-2 py-1 rounded-full text-[10px] font-bold bg-gray-100 text-gray-700">@s.Status</span>
+                                }
+                            </td>
+                            <td class="p-2">
+                                <button class="text-blue-600 hover:underline font-semibold"
+                                    @onclick="() => SelectedSession.InvokeAsync(s.Id)">
+                                    Load
+                                </button>
+                            </td>
+                        </tr>
+                    }
+                }
+                else
+                {
+                    <tr>
+                        <td colspan="4" class="p-4 text-center text-gray-400 italic">No recording sessions found.</td>
+                    </tr>
+                }
+            </tbody>
+        </table>
+    </div>
+
+    @if (Sessions.Any())
+    {
+        <div class="flex justify-between items-center mt-4">
+            <button class="px-3 py-1 bg-gray-200 hover:bg-gray-300 rounded text-xs font-semibold transition"
+                @onclick="PrevPage"
+                disabled="@(Page == 1)">
+                Prev
+            </button>
+            <span class="text-xs text-gray-600">Page @Page of @TotalPages</span>
+            <button class="px-3 py-1 bg-gray-200 hover:bg-gray-300 rounded text-xs font-semibold transition"
+                @onclick="NextPage"
+                disabled="@(Page >= TotalPages)">
+                Next
+            </button>
+        </div>
+    }
+</div>
+
+@code {
+    [Parameter] public List<SessionInfo> Sessions { get; set; } = new();
+    [Parameter] public EventCallback<string> SelectedSession { get; set; }
+    [Parameter] public int Page { get; set; } = 1;
+    [Parameter] public int PageSize { get; set; } = 10;
+
+    private int TotalPages => (int)Math.Ceiling(Sessions.Count / (double)PageSize);
+
+    private void PrevPage()
+    {
+        if (Page > 1)
+            SelectedSession.InvokeAsync(Sessions[Math.Max(0, (Page - 2) * PageSize % Sessions.Count)].Id);
+    }
+
+    private void NextPage()
+    {
+        if (Page < TotalPages)
+            SelectedSession.InvokeAsync(Sessions[Math.Min(Sessions.Count - 1, Page * PageSize % Sessions.Count)].Id);
+    }
+}
diff --git a/solution/src/PlcVanguard.Web/Components/Shared/LiveChart.razor b/solution/src/PlcVanguard.Web/Components/Shared/LiveChart.razor
new file mode 100644
index 0000000..d8716eb
--- /dev/null
+++ b/solution/src/PlcVanguard.Web/Components/Shared/LiveChart.razor
@@ -0,0 +1,76 @@
+@using Microsoft.JSInterop
+@using PlcVanguard.Web.Components.Shared
+@implements IAsyncDisposable
+
+<div class="rounded-xl border border-gray-200 bg-white p-6 shadow-sm h-full flex flex-col">
+    <div class="flex justify-between items-center mb-4 flex-shrink-0">
+        <h2 class="font-semibold text-lg">@Title</h2>
+        <span class="text-sm text-gray-500">@subtitle</span>
+    </div>
+    <div class="flex-1 min-h-0 relative">
+        <canvas id="@ChartId"></canvas>
+    </div>
+</div>
+
+@code {
+    [Parameter] public string Title { get; set; } = "Live Chart";
+    [Parameter] public string subtitle { get; set; } = "";
+    [Parameter] public List<DataLabel> Data { get; set; } = new();
+    [Parameter] public string ChartId { get; set; } = "liveChart";
+    [Parameter] public EventCallback OnChartReady { get; set; }
+
+    [Inject] private IJSRuntime JS { get; set; } = default!;
+    private IJSObjectReference? _jsModule;
+    private bool _initialized;
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender && Data.Count > 1)
+        {
+            var ok = await EnsureChartAsync();
+            if (ok) await OnChartReady.InvokeAsync();
+        }
+        else if (_initialized && Data.Count > 1)
+        {
+            await UpdateChartAsync();
+        }
+    }
+
+    private async Task<bool> EnsureChartAsync()
+    {
+        try
+        {
+            _jsModule = await JS.InvokeAsync<IJSObjectReference>("import", "/js/chartHelper.js");
+            await _jsModule.InvokeVoidAsync("initChart", ChartId, Data);
+            _initialized = true;
+            return true;
+        }
+        catch (Exception ex)
+        {
+            Console.WriteLine("Chart init failed: " + ex.Message);
+            return false;
+        }
+    }
+
+    private async Task<bool> UpdateChartAsync()
+    {
+        try
+        {
+            if (_jsModule == null)
+                _jsModule = await JS.InvokeAsync<IJSObjectReference>("import", "/js/chartHelper.js");
+            await _jsModule.InvokeVoidAsync("updateLiveDataset", ChartId, Data);
+            return true;
+        }
+        catch (Exception ex)
+        {
+            Console.WriteLine("Chart update failed: " + ex.Message);
+            return false;
+        }
+    }
+
+    public async ValueTask DisposeAsync()
+    {
+        if (_jsModule != null)
+            await _jsModule.DisposeAsync();
+    }
+}
diff --git a/solution/src/PlcVanguard.Web/Components/Shared/LivePanel.razor b/solution/src/PlcVanguard.Web/Components/Shared/LivePanel.razor
new file mode 100644
index 0000000..b7ec3b1
--- /dev/null
+++ b/solution/src/PlcVanguard.Web/Components/Shared/LivePanel.razor
@@ -0,0 +1,68 @@
+@using Microsoft.AspNetCore.Components.Web
+@using PlcVanguard.Web.Components.Shared
+
+<div class="rounded-xl border border-gray-200 bg-white p-6 shadow-sm">
+    <h2 class="font-semibold text-lg mb-4">Control Panel</h2>
+    <div class="space-y-4">
+        @if (IsAcquiring)
+        {
+            <div class="w-full bg-gray-200 rounded-full h-2.5">
+                <div class="bg-blue-600 h-2.5 rounded-full transition-all duration-300" style="width: @(ProgressPercent.ToString("F0"))%"></div>
+            </div>
+            <p class="text-xs text-gray-400 mt-2">Acquisition in progress... @($"{ProgressPercent:F0}")%</p>
+        }
+        else
+        {
+            @if (IsConnected)
+            {
+                <p class="text-sm text-gray-500">PLC Connected<br>@($"{plcIp} | {plcType}")</p>
+                <button class="w-full bg-green-600 hover:bg-green-700 text-white font-bold py-3 rounded-lg transition shadow-md"
+                    @onclick="StartAcquisition">
+                    Start Acquisition (@SampleRate Hz)
+                </button>
+                <button class="w-full bg-red-600 hover:bg-red-700 text-white font-bold py-2 rounded-lg transition"
+                    @onclick="Disconnect">
+                    Disconnect
+                </button>
+            }
+            else
+            {
+                <p class="text-sm text-gray-500">Target: @($"{plcIp} ({plcType})")</p>
+                <button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 rounded-lg transition shadow-md"
+                    @onclick="Connect">
+                    Connect to PLC
+                </button>
+            }
+        }
+    </div>
+</div>
+
+@if (IsConnected)
+{
+    <div class="rounded-xl border border-gray-200 bg-slate-900 text-white p-6 shadow-lg mt-6">
+        <h2 class="font-semibold text-lg mb-2">System Overview</h2>
+        <ul class="text-sm space-y-2 opacity-90">
+            <li>PLC: @plcType</li>
+            <li>Area: DB100 (Continuous)</li>
+            <li>Mode: @($"{SampleRate}Hz Polling")</li>
+            <li>Persistence: File + MariaDB</li>
+        </ul>
+    </div>
+}
+
+@code {
+    [Parameter] public bool IsConnected { get; set; }
+    [Parameter] public string plcIp { get; set; } = "192.168.0.102";
+    [Parameter] public string plcType { get; set; } = "S7-1500";
+    [Parameter] public bool IsAcquiring { get; set; }
+    [Parameter] public double ProgressPercent { get; set; }
+    [Parameter] public int SampleRate { get; set; } = 5;
+
+    [Parameter] public EventCallback OnConnect { get; set; }
+    [Parameter] public EventCallback OnDisconnect { get; set; }
+    [Parameter] public EventCallback OnStartAcquisition { get; set; }
+
+    private async Task Connect() => await OnConnect.InvokeAsync();
+    private async Task Disconnect() => await OnDisconnect.InvokeAsync();
+    private async Task StartAcquisition() => await OnStartAcquisition.InvokeAsync();
+}
diff --git a/solution/src/PlcVanguard.Web/Components/Shared/SessionData.cs b/solution/src/PlcVanguard.Web/Components/Shared/SessionData.cs
new file mode 100644
index 0000000..4c5878a
--- /dev/null
+++ b/solution/src/PlcVanguard.Web/Components/Shared/SessionData.cs
@@ -0,0 +1,23 @@
+namespace PlcVanguard.Web.Components.Shared;
+
+public class DataLabel
+{
+    public double X { get; set; }
+    public double Y { get; set; }
+}
+
+public class PointData
+{
+    public int Index { get; set; }
+    public DateTime Timestamp { get; set; }
+    public double Value { get; set; }
+    public bool IsError { get; set; }
+    public bool IsWarning { get; set; }
+}
+
+public class SessionInfo
+{
+    public string Id { get; set; } = string.Empty;
+    public DateTime Timestamp { get; set; }
+    public string Status { get; set; } = "Success";
+}
diff --git a/solution/src/PlcVanguard.Web/Components/Shared/SessionDetail.razor b/solution/src/PlcVanguard.Web/Components/Shared/SessionDetail.razor
new file mode 100644
index 0000000..eb8ec60
--- /dev/null
+++ b/solution/src/PlcVanguard.Web/Components/Shared/SessionDetail.razor
@@ -0,0 +1,116 @@
+@using PlcVanguard.Web.Components.Shared
+
+<div class="rounded-xl border border-gray-200 bg-white p-6 shadow-sm">
+    @if (SessionId == null)
+    {
+        <h2 class="font-semibold text-lg mb-4">
+            <span class="text-gray-400 italic">Click a session in the left table to load data</span>
+        </h2>
+        <div class="text-gray-400 italic text-center py-20">
+            Select a recording session to view details
+        </div>
+    }
+    else
+    {
+        <h2 class="font-semibold text-lg mb-4">
+            Session @SessionId
+        </h2>
+
+        <div class="p-3 bg-gray-50 rounded-lg border border-gray-100 mb-4">
+            <h3 class="text-xs uppercase font-bold text-gray-400 mb-2">Session Summary</h3>
+            <table class="w-full text-left text-xs">
+                <thead class="bg-gray-50 border-b">
+                    <tr>
+                        <th class="p-2">Index</th>
+                        <th class="p-2">Timestamp</th>
+                        <th class="p-2">Value</th>
+                        <th class="p-2">Status</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    @foreach (var p in DisplayPoints)
+                    {
+                        <tr class="border-b hover:bg-blue-50 transition cursor-pointer"
+                            @onclick="() => { SelectedPoint = p; StateHasChanged(); }">
+                            <td class="p-2">@p.Index</td>
+                            <td class="p-2">@p.Timestamp.ToString("HH:mm:ss.fff")</td>
+                            <td class="p-2 font-mono font-bold">@p.Value.ToString("F3")</td>
+                            <td class="p-2">
+                                @if (p.IsError)
+                                {
+                                    <span class="px-2 py-0.5 rounded-full text-[10px] font-bold bg-red-100 text-red-700">Error</span>
+                                }
+                                else if (p.IsWarning)
+                                {
+                                    <span class="px-2 py-0.5 rounded-full text-[10px] font-bold bg-yellow-100 text-yellow-700">Warning</span>
+                                }
+                                else
+                                {
+                                    <span class="px-2 py-0.5 rounded-full text-[10px] font-bold bg-green-100 text-green-700">OK</span>
+                                }
+                            </td>
+                        </tr>
+                    }
+                </tbody>
+            </table>
+        </div>
+
+        <div class="flex justify-between items-center mt-4">
+            <button class="px-3 py-1 bg-gray-200 hover:bg-gray-300 rounded text-xs font-semibold transition"
+                @onclick="PrevPage"
+                disabled="@(CurrentPage == 1)">
+                Prev
+            </button>
+            <span class="text-xs text-gray-600">Page @CurrentPage of @TotalPages</span>
+            <button class="px-3 py-1 bg-gray-200 hover:bg-gray-300 rounded text-xs font-semibold transition"
+                @onclick="NextPage"
+                disabled="@(CurrentPage >= TotalPages)">
+                Next
+            </button>
+        </div>
+
+        @if (SelectedPoint != null)
+        {
+            <div class="mt-4 p-3 bg-blue-50 border border-blue-200 rounded">
+                <h4 class="text-xs font-bold text-blue-800 mb-1">Selected Point</h4>
+                <p class="text-xs font-mono">Idx = @(SelectedPoint.Index), Val = @(SelectedPoint.Value.ToString("F3")), Time = @(SelectedPoint.Timestamp.ToString("HH:mm:ss.fff"))</p>
+            </div>
+        }
+    }
+</div>
+
+@code {
+    [Parameter] public string SessionId { get; set; }
+    [Parameter] public List<PointData> AllPoints { get; set; } = new();
+    [Parameter] public int WarningLimit { get; set; } = 2;
+    [Parameter] public int ErrorLimit { get; set; } = 3;
+    [Parameter] public double TargetMean { get; set; } = 210;
+
+    private int CurrentPage { get; set; } = 1;
+    private const int PageSize = 10;
+    private int TotalPages => (int)Math.Ceiling(AllPoints.Count / (double)PageSize);
+    private PointData? SelectedPoint { get; set; }
+
+    private List<PointData> DisplayPoints => AllPoints
+        .Skip((CurrentPage - 1) * PageSize)
+        .Take(PageSize)
+        .ToList();
+
+    private void NextPage()
+    {
+        if (CurrentPage < TotalPages)
+        {
+            CurrentPage++;
+            StateHasChanged();
+        }
+    }
+
+    private void PrevPage()
+    {
+        if (CurrentPage > 1)
+        {
+            CurrentPage--;
+            StateHasChanged();
+        }
+    }
+}
diff --git a/solution/src/PlcVanguard.Web/wwwroot/app.css b/solution/src/PlcVanguard.Web/wwwroot/app.css
index f17c1bb..d7d8b34 100644
--- a/solution/src/PlcVanguard.Web/wwwroot/app.css
+++ b/solution/src/PlcVanguard.Web/wwwroot/app.css
@@ -141,3 +141,8 @@ body {
 .chart-polyline {
     animation: chart-draw 1s ease-in-out;
 }
+
+@keyframes _pv_pulse {
+    0%, 100% { opacity: 1; transform: scale(1); }
+    50% { opacity: 0.5; transform: scale(1.3); }
+}
diff --git a/solution/src/PlcVanguard.Web/wwwroot/index.html b/solution/src/PlcVanguard.Web/wwwroot/index.html
index 463ecc1..5a7c8b4 100644
--- a/solution/src/PlcVanguard.Web/wwwroot/index.html
+++ b/solution/src/PlcVanguard.Web/wwwroot/index.html
@@ -1,10 +1,24 @@
-using Microsoft.AspNetCore.Components.Web;
-using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>PlcVanguard</title>
+    <base href="/" />
+    <link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
+    <link rel="stylesheet" href="app.css" />
+    <link rel="icon" type="image/png" href="favicon.png" />
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
+    <component type="typeof(HeadOutlet)" render-mode="HeadOutlet" />
+</head>
+<body>
+    <component type="typeof(App)" render-mode="ServerPrerendered" />
 
-var builder = WebAssemblyHostBuilder.CreateDefault(args);
-builder.RootComponents.Add<App>("#app");
-builder.RootComponents.Add<HeadOutlet>("head::after");
-
-builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
-
-await builder.Build().RunAsync();
+    <div id="blazor-error-ui">
+        An unhandled error has occurred.
+        <a href="" class="reload">Reload</a>
+        <a class="dismiss">🗙</a>
+    </div>
+    <script src="_framework/blazor.server.js"></script>
+</body>
+</html>
diff --git a/solution/src/PlcVanguard.Web/wwwroot/js/chartHelper.js b/solution/src/PlcVanguard.Web/wwwroot/js/chartHelper.js
new file mode 100644
index 0000000..3afdc70
--- /dev/null
+++ b/solution/src/PlcVanguard.Web/wwwroot/js/chartHelper.js
@@ -0,0 +1,148 @@
+let chartInstances = {};
+
+window.initChart = function(canvasId, dataItems) {
+    if (typeof Chart === 'undefined') return;
+    
+    const ctx = document.getElementById(canvasId);
+    if (!ctx) return;
+
+    const values = Array.isArray(dataItems[0]) 
+        ? dataItems[0] 
+        : dataItems;
+    
+    // Ensure we have at least 2 points
+    if (values.length < 2) return;
+
+    // Generate y-limits if not provided
+    const minVal = Math.min(...values.map(v => v.Y));
+    const maxVal = Math.max(...values.map(v => v.Y));
+    const range = maxVal - minVal || 1;
+    const padding = range * 0.15;
+
+    chartInstances[canvasId] = new Chart(ctx, {
+        type: 'line',
+        data: {
+            datasets: [
+                {
+                    label: 'Value',
+                    data: values.map(v => ({ x: v.X, y: v.Y })),
+                    borderColor: '#3b82f6',
+                    backgroundColor: 'rgba(59, 130, 246, 0.1)',
+                    fill: true,
+                    pointRadius: 1,
+                    borderWidth: 2,
+                    tension: 0.1
+                },
+                {
+                    label: 'Warning UCL',
+                    data: values.map(v => ({ x: v.X, y: minVal + range + padding })),
+                    borderColor: '#facc15',
+                    borderWidth: 1,
+                    pointRadius: 0,
+                    fill: false,
+                    borderDash: [5, 5]
+                },
+                {
+                    label: 'Warning LCL',
+                    data: values.map(v => ({ x: v.X, y: minVal - padding })),
+                    borderColor: '#facc15',
+                    borderWidth: 1,
+                    pointRadius: 0,
+                    fill: false,
+                    borderDash: [5, 5]
+                },
+                {
+                    label: 'Error UCL',
+                    data: values.map(v => ({ x: v.X, y: minVal + range * 2 + padding })),
+                    borderColor: '#f87171',
+                    borderWidth: 1,
+                    pointRadius: 0,
+                    fill: false,
+                    borderDash: [5, 5]
+                },
+                {
+                    label: 'Error LCL',
+                    data: values.map(v => ({ x: v.X, y: minVal - range * 2 - padding })),
+                    borderColor: '#f87171',
+                    borderWidth: 1,
+                    pointRadius: 0,
+                    fill: false,
+                    borderDash: [5, 5]
+                }
+            ]
+        },
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            animation: { duration: 300 },
+            scales: {
+                x: { type: 'linear', title: { display: true, text: 'Acquisition Time' } },
+                y: { min: minVal - padding, max: maxVal + padding, title: { display: true, text: 'Value' } }
+            },
+            plugins: {
+                legend: { display: false },
+                tooltip: { enabled: true, mode: 'index', intersect: false }
+            }
+        }
+    });
+};
+
+window.updateLiveDataset = function(canvasId, dataItems) {
+    const chart = chartInstances[canvasId];
+    if (!chart) return;
+    if (!dataItems || !dataItems.length) return;
+
+    const newData = Array.isArray(dataItems[0])
+        ? dataItems[0]
+        : dataItems;
+
+    if (newData.length < 2) return;
+
+    chart.data.datasets[0].data = newData.map(v => ({ x: v.X, y: v.Y }));
+
+    const minVal = Math.min(...newData.map(v => v.Y));
+    const maxVal = Math.max(...newData.map(v => v.Y));
+    const range = maxVal - minVal || 1;
+    const padding = range * 0.15;
+
+    chart.data.datasets[1].data = newData.map(v => ({ x: v.X, y: minVal + range + padding }));
+    chart.data.datasets[2].data = newData.map(v => ({ x: v.X, y: minVal - padding }));
+    chart.data.datasets[3].data = newData.map(v => ({ x: v.X, y: minVal + range * 2 + padding }));
+    chart.data.datasets[4].data = newData.map(v => ({ x: v.X, y: minVal - range * 2 - padding }));
+
+    chart.options.scales.y.min = minVal - padding;
+    chart.options.scales.y.max = maxVal + padding;
+
+    chart.update();
+};
+
+window.updateFromSession = function(canvasId, dataItems) {
+    const chart = chartInstances[canvasId];
+    if (!chart) return;
+    const newData = Array.isArray(dataItems[0]) ? dataItems[0] : dataItems;
+    if (newData.length < 2) return;
+
+    chart.data.datasets[0].data = newData.map(v => ({ x: v.X, y: v.Y }));
+
+    const minVal = Math.min(...newData.map(v => v.Y));
+    const maxVal = Math.max(...newData.map(v => v.Y));
+    const range = maxVal - minVal || 1;
+    const padding = range * 0.15;
+
+    chart.data.datasets[1].data = newData.map(v => ({ x: v.X, y: minVal + range + padding }));
+    chart.data.datasets[2].data = newData.map(v => ({ x: v.X, y: minVal - padding }));
+    chart.data.datasets[3].data = newData.map(v => ({ x: v.X, y: minVal + range * 2 + padding }));
+    chart.data.datasets[4].data = newData.map(v => ({ x: v.X, y: minVal - range * 2 - padding }));
+
+    chart.options.scales.y.min = minVal - padding;
+    chart.options.scales.y.max = maxVal + padding;
+
+    chart.update();
+};
+
+window.destroyChart = function(canvasId) {
+    if (chartInstances[canvasId]) {
+        chartInstances[canvasId].destroy();
+        chartInstances[canvasId] = null;
+    }
+};