feat(ui): migrate web shell to mudblazor

2026-07-01 13:24:46 +09:00
parent fe8ff44d3f
commit 28e1a8775f
14 changed files with 285 additions and 589 deletions
@@ -0,0 +1,3 @@
+@inherits LayoutComponentBase
+
+@Body
@@ -2,74 +2,36 @@
@inject HttpClient Http
@inject AuthenticationStateProvider AuthStateProvider
@inject NavigationManager NavigationManager
-@using System.Net.Http.Json
-@using Microsoft.FluentUI.AspNetCore.Components
-@using QuantEngine.Web.Client.Infrastructure

-<FluentStack Orientation="Orientation.Vertical" Class="h-100 w-100">
-    <!-- Header -->
-    <FluentHeader>
-        <FluentStack Orientation="Orientation.Horizontal" VerticalAlignment="VerticalAlignment.Center"
-                     Style="width: 100%; padding: 8px 16px; gap: 16px;">
-            <FluentButton OnClick="@(() => navOpen = !navOpen)"
-                         Title="Toggle Navigation"
-                         Style="background: transparent; border: none; cursor: pointer;">
-                ☰
-            </FluentButton>
-            <h1 style="margin: 0; font-size: 20px; font-weight: 600;">QuantEngine v@appVersion</h1>
-            <AuthorizeView>
-                <Authorized>
-                    <div style="margin-left: auto; display: flex; align-items: center; gap: 12px;">
-                        <span style="font-size: 13px; color: var(--neutral-foreground-hint);">관리자 (@context.User.Identity?.Name)</span>
-                        <FluentButton OnClick="HandleLogoutAsync" Style="color: #ff5252; background: transparent; border: 1px solid rgba(255, 82, 82, 0.2); cursor: pointer; padding: 4px 12px; border-radius: 4px;">
-                            로그아웃
-                        </FluentButton>
-                    </div>
-                </Authorized>
-            </AuthorizeView>
-        </FluentStack>
-    </FluentHeader>
+<MudLayout>
+    <MudAppBar Elevation="1" Dense="true">
+        <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@(() => navOpen = !navOpen)" />
+        <MudText Typo="Typo.h6">QuantEngine v@appVersion</MudText>
+        <MudSpacer />
+        <AuthorizeView>
+            <Authorized>
+                <MudText Typo="Typo.body2">관리자 (@context.User.Identity?.Name)</MudText>
+                <MudButton Variant="Variant.Outlined" Color="Color.Error" OnClick="HandleLogoutAsync">로그아웃</MudButton>
+            </Authorized>
+        </AuthorizeView>
+    </MudAppBar>

-    <!-- Main Content Area -->
-    <FluentStack Orientation="Orientation.Horizontal" Class="flex-1" Style="overflow: hidden;">
-        <!-- Navigation Sidebar -->
-        @if (navOpen)
-        {
-            <nav style="width: 240px; background: var(--neutral-layer-1); border-right: 1px solid var(--neutral-stroke-1); padding: 12px; overflow-y: auto;">
-                <NavMenu />
-                <div style="margin-top: auto; padding-top: 12px; border-top: 1px solid var(--neutral-stroke-1); margin-top: 12px; font-size: 11px; color: var(--neutral-foreground-3); line-height: 1.5;">
-                    <div style="font-weight: 500; margin-bottom: 2px;">QuantEngine v@appVersion</div>
-                    <div style="font-size: 10px; opacity: 0.85;">배포: @buildTime</div>
-                </div>
-            </nav>
-        }
+    <MudDrawer Open="@navOpen" Variant="DrawerVariant.Responsive" Elevation="1">
+        <MudNavMenu>
+            <NavMenu />
+        </MudNavMenu>
+        <div style="padding: 16px; border-top: 1px solid var(--mud-palette-lines-default);">
+            <MudText Typo="Typo.caption">QuantEngine v@appVersion</MudText>
+            <MudText Typo="Typo.caption">배포: @buildTime</MudText>
+        </div>
+    </MudDrawer>

-        <!-- Page Content -->
-        <FluentStack Orientation="Orientation.Vertical" Class="flex-1" Style="overflow-y: auto; padding: 24px;">
+    <MudMainContent>
+        <MudContainer MaxWidth="MaxWidth.False" Class="pa-4">
            @Body
-        </FluentStack>
-    </FluentStack>
-</FluentStack>
-
-<div id="blazor-error-ui" data-nosnippet>
-    <div class="alert alert-danger" role="alert">
-        <p>An unhandled error has occurred.</p>
-        <a href="." class="btn btn-primary">Reload</a>
-    </div>
-</div>
-
-<style>
-    .h-100 {
-        height: 100%;
-    }
-    .w-100 {
-        width: 100%;
-    }
-    .flex-1 {
-        flex: 1;
-        display: flex;
-    }
-</style>
+        </MudContainer>
+    </MudMainContent>
+</MudLayout>

@code {
    private bool navOpen = true;
@@ -89,7 +51,6 @@
        }
        catch
        {
-            // Fail-safe default fallback values
        }
    }

@@ -97,7 +58,7 @@
    {
        var customProvider = (CustomAuthenticationStateProvider)AuthStateProvider;
        await customProvider.LogoutFromServerAsync();
-        NavigationManager.NavigateTo("login");
+        NavigationManager.NavigateTo("/login");
    }

    private class VersionInfo
@@ -106,4 +67,3 @@
        public string? Built { get; set; }
    }
 }
-
@@ -1,10 +1,4 @@
-@using Microsoft.FluentUI.AspNetCore.Components
-
-<FluentNavMenu>
-    <FluentNavLink Href="/" Match="NavLinkMatch.All">
-        Dashboard
-    </FluentNavLink>
-    <FluentNavLink Href="/operations" Match="NavLinkMatch.Prefix">
-        Operations
-    </FluentNavLink>
-</FluentNavMenu>
+<MudNavMenu>
+    <MudNavLink Href="/dashboard" Match="NavLinkMatch.All">Dashboard</MudNavLink>
+    <MudNavLink Href="/operations" Match="NavLinkMatch.Prefix">Operations</MudNavLink>
+</MudNavMenu>
@@ -6,118 +6,88 @@

 <PageTitle>QuantEngine - Collection</PageTitle>

-<h1 style="margin: 0 0 8px 0; font-size: 28px; font-weight: 600;">Data Collection</h1>
-<p style="margin: 0 0 16px 0; color: var(--neutral-foreground-2); font-size: 14px;">
-    KIS API data collection dashboard. Monitor runs, snapshots, and error trends.
-</p>
+<MudText Typo="Typo.h4" Class="mb-2">Data Collection</MudText>
+<MudText Typo="Typo.body2" Class="mb-4">KIS API data collection dashboard. API-first로만 동작합니다.</MudText>

-<!-- Controls -->
-<FluentStack Orientation="Orientation.Horizontal" HorizontalGap="8" Style="margin-bottom: 16px;">
-    <FluentButton Appearance="ButtonAppearance.Primary" OnClick="@StartCollectionAsync" Disabled="@IsProcessing">
-        @if (IsProcessing) { <span>Running...</span> } else { <span>Start Collection</span> }
-    </FluentButton>
-    <FluentButton Appearance="ButtonAppearance.Default" OnClick="@RefreshAsync" Disabled="@IsProcessing">
-        Refresh
-    </FluentButton>
-</FluentStack>
+<MudStack Row="true" Spacing="2" Class="mb-4">
+    <MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="@StartCollectionAsync" Disabled="@IsProcessing">
+        @(IsProcessing ? "Running..." : "Start Collection")
+    </MudButton>
+    <MudButton Variant="Variant.Outlined" OnClick="@RefreshAsync" Disabled="@IsProcessing">Refresh</MudButton>
+</MudStack>

-<!-- Loading skeleton -->
@if (IsLoading)
 {
-    <FluentStack Orientation="Orientation.Vertical" VerticalGap="16">
-        <FluentSkeleton Width="100%" Height="60px" />
-        <FluentSkeleton Width="100%" Height="200px" />
-    </FluentStack>
+    <MudProgressLinear Indeterminate="true" Color="Color.Primary" Class="mb-4" />
 }
 else if (DashboardState != null)
 {
-    <!-- Summary Cards -->
-    <FluentStack Orientation="Orientation.Horizontal" HorizontalGap="16" Wrap="true" Style="margin-bottom: 16px;">
-        <FluentCard Style="flex: 1; min-width: 150px;">
-            <div style="padding: 16px;">
-                <p style="margin: 0 0 8px 0; color: var(--neutral-foreground-2); font-size: 12px; font-weight: 500;">Last Run</p>
-                <h3 style="margin: 0; font-size: 18px; font-weight: 600;">@(DashboardState.LastRunStatus ?? "N/A")</h3>
-                <p style="margin: 8px 0 0 0; color: var(--neutral-foreground-3); font-size: 12px;">@(DashboardState.LastFinishedAt ?? "Not finished")</p>
-            </div>
-        </FluentCard>
-        <FluentCard Style="flex: 1; min-width: 150px;">
-            <div style="padding: 16px;">
-                <p style="margin: 0 0 8px 0; color: var(--neutral-foreground-2); font-size: 12px; font-weight: 500;">Total Snapshots</p>
-                <h3 style="margin: 0; font-size: 18px; font-weight: 600;">@DashboardState.TotalSnapshots</h3>
-            </div>
-        </FluentCard>
-        <FluentCard Style="flex: 1; min-width: 150px;">
-            <div style="padding: 16px;">
-                <p style="margin: 0 0 8px 0; color: var(--neutral-foreground-2); font-size: 12px; font-weight: 500;">Total Errors</p>
-                <h3 style="margin: 0; font-size: 18px; font-weight: 600;">@DashboardState.TotalErrors</h3>
-            </div>
-        </FluentCard>
-    </FluentStack>
+    <MudGrid Spacing="2" Class="mb-4">
+        <MudItem xs="12" sm="4">
+            <MudPaper Class="pa-4" Elevation="2">
+                <MudText Typo="Typo.caption">Last Run</MudText>
+                <MudText Typo="Typo.h6">@(DashboardState.LastRunStatus ?? "N/A")</MudText>
+                <MudText Typo="Typo.body2">@(DashboardState.LastFinishedAt ?? "Not finished")</MudText>
+            </MudPaper>
+        </MudItem>
+        <MudItem xs="12" sm="4">
+            <MudPaper Class="pa-4" Elevation="2">
+                <MudText Typo="Typo.caption">Total Snapshots</MudText>
+                <MudText Typo="Typo.h6">@DashboardState.TotalSnapshots</MudText>
+            </MudPaper>
+        </MudItem>
+        <MudItem xs="12" sm="4">
+            <MudPaper Class="pa-4" Elevation="2">
+                <MudText Typo="Typo.caption">Total Errors</MudText>
+                <MudText Typo="Typo.h6">@DashboardState.TotalErrors</MudText>
+            </MudPaper>
+        </MudItem>
+    </MudGrid>

-    <!-- Recent Errors -->
    @if (DashboardState.RecentErrors.Count > 0)
    {
-        <FluentCard Style="margin-bottom: 16px;">
-            <div style="padding: 16px;">
-                <h3 style="margin: 0 0 12px 0; font-size: 16px; font-weight: 600;">Recent Errors</h3>
-                <table style="width: 100%; border-collapse: collapse;">
-                    <thead style="background: var(--neutral-subtle);">
-                        <tr>
-                            <th style="padding: 8px; text-align: left; border-bottom: 1px solid var(--neutral-divider-rest);">Source</th>
-                            <th style="padding: 8px; text-align: left; border-bottom: 1px solid var(--neutral-divider-rest);">Kind</th>
-                            <th style="padding: 8px; text-align: left; border-bottom: 1px solid var(--neutral-divider-rest);">Ticker</th>
-                            <th style="padding: 8px; text-align: left; border-bottom: 1px solid var(--neutral-divider-rest);">Message</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        @foreach (var error in DashboardState.RecentErrors)
-                        {
-                            <tr>
-                                <td style="padding: 8px; border-bottom: 1px solid var(--neutral-stroke-divider-rest);">@error.SourceName</td>
-                                <td style="padding: 8px; border-bottom: 1px solid var(--neutral-stroke-divider-rest);">@error.ErrorKind</td>
-                                <td style="padding: 8px; border-bottom: 1px solid var(--neutral-stroke-divider-rest);">@error.Ticker</td>
-                                <td style="padding: 8px; border-bottom: 1px solid var(--neutral-stroke-divider-rest);">@error.ErrorMessage</td>
-                            </tr>
-                        }
-                    </tbody>
-                </table>
-            </div>
-        </FluentCard>
+        <MudPaper Class="pa-4 mb-4" Elevation="2">
+            <MudText Typo="Typo.h6" Class="mb-3">Recent Errors</MudText>
+            <MudTable Items="@DashboardState.RecentErrors" Dense="true" Hover="true">
+                <HeaderContent>
+                    <MudTh>Source</MudTh>
+                    <MudTh>Kind</MudTh>
+                    <MudTh>Ticker</MudTh>
+                    <MudTh>Message</MudTh>
+                </HeaderContent>
+                <RowTemplate>
+                    <MudTd DataLabel="Source">@context.SourceName</MudTd>
+                    <MudTd DataLabel="Kind">@context.ErrorKind</MudTd>
+                    <MudTd DataLabel="Ticker">@context.Ticker</MudTd>
+                    <MudTd DataLabel="Message">@context.ErrorMessage</MudTd>
+                </RowTemplate>
+            </MudTable>
+        </MudPaper>
    }

-    <!-- Recent Runs -->
    @if (RecentRuns != null && RecentRuns.Count > 0)
    {
-        <FluentCard>
-            <div style="padding: 16px;">
-                <h3 style="margin: 0 0 12px 0; font-size: 16px; font-weight: 600;">Recent Runs</h3>
-                <table style="width: 100%; border-collapse: collapse;">
-                    <thead style="background: var(--neutral-subtle);">
-                        <tr>
-                            <th style="padding: 8px; text-align: left; border-bottom: 1px solid var(--neutral-divider-rest);">Run ID</th>
-                            <th style="padding: 8px; text-align: left; border-bottom: 1px solid var(--neutral-divider-rest);">Status</th>
-                            <th style="padding: 8px; text-align: left; border-bottom: 1px solid var(--neutral-divider-rest);">Started</th>
-                            <th style="padding: 8px; text-align: left; border-bottom: 1px solid var(--neutral-divider-rest);">Finished</th>
-                            <th style="padding: 8px; text-align: left; border-bottom: 1px solid var(--neutral-divider-rest);">Snapshots</th>
-                            <th style="padding: 8px; text-align: left; border-bottom: 1px solid var(--neutral-divider-rest);">Errors</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        @foreach (var run in RecentRuns)
-                        {
-                            <tr>
-                                <td style="padding: 8px; border-bottom: 1px solid var(--neutral-stroke-divider-rest); font-family: monospace; font-size: 12px;">@run.RunId</td>
-                                <td style="padding: 8px; border-bottom: 1px solid var(--neutral-stroke-divider-rest);">@run.Status</td>
-                                <td style="padding: 8px; border-bottom: 1px solid var(--neutral-stroke-divider-rest); font-size: 12px;">@run.StartedAt</td>
-                                <td style="padding: 8px; border-bottom: 1px solid var(--neutral-stroke-divider-rest); font-size: 12px;">@run.FinishedAt</td>
-                                <td style="padding: 8px; border-bottom: 1px solid var(--neutral-stroke-divider-rest);">@run.TotalSnapshots</td>
-                                <td style="padding: 8px; border-bottom: 1px solid var(--neutral-stroke-divider-rest);">@run.TotalErrors</td>
-                            </tr>
-                        }
-                    </tbody>
-                </table>
-            </div>
-        </FluentCard>
+        <MudPaper Class="pa-4" Elevation="2">
+            <MudText Typo="Typo.h6" Class="mb-3">Recent Runs</MudText>
+            <MudTable Items="@RecentRuns" Dense="true" Hover="true">
+                <HeaderContent>
+                    <MudTh>Run ID</MudTh>
+                    <MudTh>Status</MudTh>
+                    <MudTh>Started</MudTh>
+                    <MudTh>Finished</MudTh>
+                    <MudTh>Snapshots</MudTh>
+                    <MudTh>Errors</MudTh>
+                </HeaderContent>
+                <RowTemplate>
+                    <MudTd DataLabel="Run ID" Style="font-family: monospace; font-size: 12px;">@context.RunId</MudTd>
+                    <MudTd DataLabel="Status">@context.Status</MudTd>
+                    <MudTd DataLabel="Started">@context.StartedAt</MudTd>
+                    <MudTd DataLabel="Finished">@context.FinishedAt</MudTd>
+                    <MudTd DataLabel="Snapshots">@context.TotalSnapshots</MudTd>
+                    <MudTd DataLabel="Errors">@context.TotalErrors</MudTd>
+                </RowTemplate>
+            </MudTable>
+        </MudPaper>
    }
 }

@@ -138,7 +108,6 @@ else if (DashboardState != null)
        try
        {
            DashboardState = await ApiClient.GetCollectionStateAsync();
-
            var runsResponse = await ApiClient.GetCollectionRunsAsync(10);
            RecentRuns = runsResponse?.Runs ?? new();
        }
@@ -1,89 +1,84 @@
-@page "/"
+@page "/dashboard"
@attribute [Authorize]
@using QuantEngine.Core.Infrastructure
@inject HttpClient Http

 <PageTitle>Quant Engine - Dashboard</PageTitle>

-<h1 style="margin: 0 0 8px 0; font-size: 28px; font-weight: 600;">Quant Engine</h1>
-<p style="margin: 0 0 16px 0; color: var(--neutral-foreground-2); font-size: 14px;">
-    루트 화면은 운영 진입점입니다. 가짜 성과 수치 없이 현재 스냅샷 상태와 리포트 경로만 보여줍니다.
-</p>
+<MudText Typo="Typo.h4" Class="mb-2">Quant Engine</MudText>
+<MudText Typo="Typo.body2" Class="mb-4">운영 진입점입니다. 로그인 후 현재 스냅샷 상태와 리포트 경로만 표시합니다.</MudText>

-<!-- Top 3 Cards -->
-<FluentStack Orientation="Orientation.Horizontal" HorizontalGap="16" Wrap="true" Style="margin-bottom: 16px;">
-    <FluentCard Style="flex: 1; min-width: 200px;">
-        <div style="padding: 16px;">
-            <p style="margin: 0 0 8px 0; color: var(--neutral-foreground-2); font-size: 12px; font-weight: 500;">Operational Report</p>
-            <h3 style="margin: 0; font-size: 20px; font-weight: 600;">@ReportStateLabel</h3>
-            <p style="margin: 8px 0 0 0; color: var(--neutral-foreground-3); font-size: 12px;">@ReportPath</p>
-        </div>
-    </FluentCard>
-    <FluentCard Style="flex: 1; min-width: 200px;">
-        <div style="padding: 16px;">
-            <p style="margin: 0 0 8px 0; color: var(--neutral-foreground-2); font-size: 12px; font-weight: 500;">Sections</p>
-            <h3 style="margin: 0; font-size: 20px; font-weight: 600;">@SectionCountLabel</h3>
-            <p style="margin: 8px 0 0 0; color: var(--neutral-foreground-3); font-size: 12px;">Temp/operational_report.json</p>
-        </div>
-    </FluentCard>
-    <FluentCard Style="flex: 1; min-width: 200px;">
-        <div style="padding: 16px;">
-            <p style="margin: 0 0 8px 0; color: var(--neutral-foreground-2); font-size: 12px; font-weight: 500;">Primary Route</p>
-            <FluentButton Appearance="ButtonAppearance.Primary" Href="/operations" Style="margin-top: 8px;">
-                Open Operations
-            </FluentButton>
-        </div>
-    </FluentCard>
-</FluentStack>
+<MudGrid Spacing="2" Class="mb-4">
+    <MudItem xs="12" sm="4">
+        <MudPaper Class="pa-4" Elevation="2">
+            <MudText Typo="Typo.caption">Operational Report</MudText>
+            <MudText Typo="Typo.h6">@ReportStateLabel</MudText>
+            <MudText Typo="Typo.body2">@ReportPath</MudText>
+        </MudPaper>
+    </MudItem>
+    <MudItem xs="12" sm="4">
+        <MudPaper Class="pa-4" Elevation="2">
+            <MudText Typo="Typo.caption">Sections</MudText>
+            <MudText Typo="Typo.h6">@SectionCountLabel</MudText>
+            <MudText Typo="Typo.body2">Temp/operational_report.json</MudText>
+        </MudPaper>
+    </MudItem>
+    <MudItem xs="12" sm="4">
+        <MudPaper Class="pa-4" Elevation="2">
+            <MudText Typo="Typo.caption">Primary Route</MudText>
+            <MudButton Variant="Variant.Filled" Color="Color.Primary" Href="/operations" Class="mt-2">Open Operations</MudButton>
+        </MudPaper>
+    </MudItem>
+</MudGrid>

-<!-- Current State & Routing Notes -->
-<FluentStack Orientation="Orientation.Horizontal" HorizontalGap="16" Wrap="true" Style="margin-bottom: 16px;">
-    <FluentCard Style="flex: 2; min-width: 300px;">
-        <div style="padding: 16px;">
-            <h3 style="margin: 0 0 12px 0; font-size: 16px; font-weight: 600;">Current State</h3>
-            <FluentStack Orientation="Orientation.Vertical" VerticalGap="8">
-                <p style="margin: 0; font-size: 14px;"><strong>Status:</strong> <FluentBadge Appearance="BadgeAppearance.Filled">@ReportChipLabel</FluentBadge></p>
-                <p style="margin: 0; font-size: 14px;"><strong>Generated:</strong> @GeneratedAtLabel</p>
-                <p style="margin: 0; font-size: 14px;"><strong>Source:</strong> @SourceLabel</p>
-                <p style="margin: 0; font-size: 14px;"><strong>Decision feed:</strong> @DecisionFeedLabel</p>
-                <p style="margin: 0; font-size: 14px;"><strong>Factor feed:</strong> @FactorFeedLabel</p>
-                <p style="margin: 0; font-size: 14px;"><strong>Raw feed:</strong> @RawFeedLabel</p>
-            </FluentStack>
-        </div>
-    </FluentCard>
-
-    <FluentCard Style="flex: 1; min-width: 250px;">
-        <div style="padding: 16px;">
-            <h3 style="margin: 0 0 12px 0; font-size: 16px; font-weight: 600;">Routing Notes</h3>
-            <ul style="margin: 0; padding-left: 16px; font-size: 14px;">
+<MudGrid Spacing="2" Class="mb-4">
+    <MudItem xs="12" md="8">
+        <MudPaper Class="pa-4" Elevation="2">
+            <MudText Typo="Typo.h6" Class="mb-3">Current State</MudText>
+            <MudStack Spacing="1">
+                <MudText Typo="Typo.body2">Status: <MudChip T="string" Color="@(ReportChipLabel == "READY" ? Color.Success : Color.Warning)" Variant="Variant.Filled">@ReportChipLabel</MudChip></MudText>
+                <MudText Typo="Typo.body2">Generated: @GeneratedAtLabel</MudText>
+                <MudText Typo="Typo.body2">Source: @SourceLabel</MudText>
+                <MudText Typo="Typo.body2">Decision feed: @DecisionFeedLabel</MudText>
+                <MudText Typo="Typo.body2">Factor feed: @FactorFeedLabel</MudText>
+                <MudText Typo="Typo.body2">Raw feed: @RawFeedLabel</MudText>
+            </MudStack>
+        </MudPaper>
+    </MudItem>
+    <MudItem xs="12" md="4">
+        <MudPaper Class="pa-4" Elevation="2">
+            <MudText Typo="Typo.h6" Class="mb-3">Routing Notes</MudText>
+            <ul style="margin: 0; padding-left: 18px;">
                <li>운영 데이터는 snapshot 우선입니다.</li>
-                <li>Excel/GAS 의존 문구는 운영 경로에서 제거 대상입니다.</li>
+                <li>Excel/GAS 의존 문구는 제거 대상입니다.</li>
                <li>숫자는 provenance 없으면 표시하지 않습니다.</li>
            </ul>
-        </div>
-    </FluentCard>
-</FluentStack>
+        </MudPaper>
+    </MudItem>
+</MudGrid>

-<!-- Coverage Summary -->
-<FluentCard>
-    <div style="padding: 16px;">
-        <h3 style="margin: 0 0 12px 0; font-size: 16px; font-weight: 600;">Coverage Summary</h3>
-        @if (Sections.Count == 0)
-        {
-            <div style="padding: 12px; background: var(--warning-background-1); border: 1px solid var(--warning-stroke-1); border-radius: 4px; color: var(--warning-foreground-1); font-size: 14px;">
-                DATA_MISSING: operational_report.json이 비어 있거나 아직 생성되지 않았습니다.
-            </div>
-        }
-        else
-        {
-            <FluentDataGrid Items="@Sections.AsQueryable()">
-                <PropertyColumn Property="@(x => x.Name)" Title="Name" />
-                <PropertyColumn Property="@(x => x.Title)" Title="Title" />
-                <PropertyColumn Property="@(x => x.Preview)" Title="Preview" />
-            </FluentDataGrid>
-        }
-    </div>
-</FluentCard>
+<MudPaper Class="pa-4" Elevation="2">
+    <MudText Typo="Typo.h6" Class="mb-3">Coverage Summary</MudText>
+    @if (Sections.Count == 0)
+    {
+        <MudAlert Severity="Severity.Warning">DATA_MISSING: operational_report.json이 비어 있거나 아직 생성되지 않았습니다.</MudAlert>
+    }
+    else
+    {
+        <MudTable Items="@Sections" Dense="true" Hover="true">
+            <HeaderContent>
+                <MudTh>Name</MudTh>
+                <MudTh>Title</MudTh>
+                <MudTh>Preview</MudTh>
+            </HeaderContent>
+            <RowTemplate>
+                <MudTd DataLabel="Name">@context.Name</MudTd>
+                <MudTd DataLabel="Title">@context.Title</MudTd>
+                <MudTd DataLabel="Preview">@context.Preview</MudTd>
+            </RowTemplate>
+        </MudTable>
+    }
+</MudPaper>

@code {
    private readonly List<OperationalReportSection> Sections = new();
@@ -1,264 +1,54 @@
@page "/login"
@attribute [AllowAnonymous]
+@layout AuthLayout
@inject AuthenticationStateProvider AuthStateProvider
@inject NavigationManager NavigationManager
@inject HttpClient Http

 <PageTitle>로그인 - QuantEngine</PageTitle>

-<div class="auth-container">
-    <div class="auth-card">
-        <div class="brand-section">
-            <img src="images/quant_engine_logo.jpg" alt="QuantEngine Logo" class="brand-logo" />
-            <h1 class="brand-title">QuantEngine</h1>
-            <p class="brand-subtitle">은퇴자산포트폴리오 투자 관리 시스템</p>
-        </div>
+<MudContainer MaxWidth="MaxWidth.False" Class="login-shell">
+    <MudPaper Class="login-card pa-8" Elevation="10">
+        <MudStack AlignItems="AlignItems.Center" Spacing="2" Class="mb-6">
+            <MudAvatar Size="Size.Large" Color="Color.Primary">Q</MudAvatar>
+            <MudText Typo="Typo.h4">QuantEngine</MudText>
+            <MudText Typo="Typo.body2" Align="Align.Center">은퇴자산포트폴리오 투자 관리 시스템</MudText>
+        </MudStack>

-        <form @onsubmit="HandleLoginAsync" @onsubmit:preventDefault="true" class="auth-form">
-            <div class="form-group">
-                <label for="username">관리자 아이디</label>
-                <input type="text" id="username" class="form-control" @bind="Username" placeholder="아이디를 입력하세요" autocomplete="username" />
-            </div>
-
-            <div class="form-group">
-                <label for="password">비밀번호</label>
-                <input type="password" id="password" class="form-control" @bind="Password" placeholder="비밀번호를 입력하세요" autocomplete="current-password" />
-            </div>
+        <MudStack Spacing="2">
+            <MudTextField Label="관리자 아이디" @bind-Value="Username" Variant="Variant.Outlined" Immediate="true" AutoFocus="true" />
+            <MudTextField Label="비밀번호" @bind-Value="Password" Variant="Variant.Outlined" InputType="InputType.Password" Immediate="true" />

            @if (!string.IsNullOrEmpty(ErrorMessage))
            {
-                <div class="error-message">
-                    <svg class="error-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
-                    </svg>
-                    <span>@ErrorMessage</span>
-                </div>
+                <MudAlert Severity="Severity.Error">@ErrorMessage</MudAlert>
            }

-            <button type="submit" class="btn-submit" disabled="@IsSubmitting">
-                @if (IsSubmitting)
-                {
-                    <span class="spinner"></span>
-                    <span>인증 중...</span>
-                }
-                else
-                {
-                    <span>로그인</span>
-                }
-            </button>
-        </form>
-    </div>
-</div>
+            <MudButton Variant="Variant.Filled" Color="Color.Primary" FullWidth="true" Disabled="@IsSubmitting" OnClick="HandleLoginAsync">
+                @(IsSubmitting ? "인증 중..." : "로그인")
+            </MudButton>
+        </MudStack>
+    </MudPaper>
+</MudContainer>

 <style>
-    .auth-container {
-        display: flex;
-        align-items: center;
-        justify-content: center;
+    .login-shell {
        min-height: 100vh;
-        width: 100vw;
-        background: linear-gradient(135deg, #090a15 0%, #12142d 100%);
-        font-family: 'Roboto', 'Inter', sans-serif;
-        color: #ffffff;
-        position: fixed;
-        top: 0;
-        left: 0;
-        z-index: 9999;
-        overflow: hidden;
-    }
-
-    /* Ambient background glow */
-    .auth-container::before {
-        content: "";
-        position: absolute;
-        width: 600px;
-        height: 600px;
-        background: radial-gradient(circle, rgba(0, 242, 254, 0.08) 0%, rgba(79, 172, 254, 0) 70%);
-        top: -10%;
-        left: -10%;
-        pointer-events: none;
-    }
-
-    .auth-container::after {
-        content: "";
-        position: absolute;
-        width: 600px;
-        height: 600px;
-        background: radial-gradient(circle, rgba(79, 172, 254, 0.08) 0%, rgba(0, 242, 254, 0) 70%);
-        bottom: -10%;
-        right: -10%;
-        pointer-events: none;
-    }
-
-    .auth-card {
-        background: rgba(255, 255, 255, 0.02);
-        backdrop-filter: blur(25px);
-        -webkit-backdrop-filter: blur(25px);
-        border: 1px solid rgba(255, 255, 255, 0.06);
-        border-radius: 20px;
-        padding: 48px;
-        width: 440px;
-        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        z-index: 10;
-        animation: fadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1);
-    }
-
-    .brand-section {
-        text-align: center;
-        margin-bottom: 36px;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-    }
-
-    .brand-logo {
-        width: 80px;
-        height: 80px;
-        border-radius: 50%;
-        object-fit: cover;
-        border: 2px solid rgba(0, 242, 254, 0.3);
-        box-shadow: 0 0 20px rgba(0, 242, 254, 0.15);
-        margin-bottom: 16px;
-        transition: transform 0.3s ease;
-    }
-
-    .brand-logo:hover {
-        transform: rotate(5deg) scale(1.05);
-    }
-
-    .brand-title {
-        font-size: 26px;
-        font-weight: 700;
-        margin: 0;
-        background: linear-gradient(90deg, #00f2fe 0%, #4facfe 100%);
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-        letter-spacing: 0.5px;
-    }
-
-    .brand-subtitle {
-        font-size: 13px;
-        color: rgba(255, 255, 255, 0.5);
-        margin: 6px 0 0 0;
-        font-weight: 300;
-    }
-
-    .auth-form {
-        width: 100%;
-        display: flex;
-        flex-direction: column;
-        gap: 20px;
-    }
-
-    .form-group {
-        display: flex;
-        flex-direction: column;
-        gap: 8px;
-    }
-
-    .form-group label {
-        font-size: 13px;
-        font-weight: 500;
-        color: rgba(255, 255, 255, 0.8);
-        padding-left: 2px;
-    }
-
-    .form-control {
-        background: rgba(255, 255, 255, 0.04);
-        border: 1px solid rgba(255, 255, 255, 0.1);
-        border-radius: 10px;
-        padding: 14px 16px;
-        color: #ffffff;
-        font-size: 14px;
-        transition: all 0.3s ease;
-        outline: none;
-    }
-
-    .form-control:focus {
-        border-color: rgba(0, 242, 254, 0.6);
-        background: rgba(255, 255, 255, 0.08);
-        box-shadow: 0 0 12px rgba(0, 242, 254, 0.15);
-    }
-
-    .form-control::placeholder {
-        color: rgba(255, 255, 255, 0.25);
-    }
-
-    .error-message {
-        display: flex;
-        align-items: center;
-        gap: 10px;
-        background: rgba(239, 68, 68, 0.08);
-        border: 1px solid rgba(239, 68, 68, 0.2);
-        border-radius: 10px;
-        padding: 12px 16px;
-        color: #f87171;
-        font-size: 13px;
-    }
-
-    .error-icon {
-        width: 18px;
-        height: 18px;
-        flex-shrink: 0;
-    }
-
-    .btn-submit {
-        background: linear-gradient(90deg, #00f2fe 0%, #4facfe 100%);
-        border: none;
-        border-radius: 10px;
-        padding: 14px;
-        color: #0b0c15;
-        font-size: 15px;
-        font-weight: 700;
-        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
-        gap: 10px;
-        transition: all 0.3s ease;
-        box-shadow: 0 4px 15px rgba(0, 242, 254, 0.2);
+        background:
+            radial-gradient(circle at top left, rgba(0, 242, 254, 0.08), transparent 30%),
+            radial-gradient(circle at bottom right, rgba(79, 172, 254, 0.1), transparent 35%),
+            linear-gradient(135deg, #090a15 0%, #12142d 100%);
    }

-    .btn-submit:hover:not(:disabled) {
-        transform: translateY(-2px);
-        box-shadow: 0 6px 20px rgba(0, 242, 254, 0.35);
-    }
-
-    .btn-submit:active:not(:disabled) {
-        transform: translateY(0);
-    }
-
-    .btn-submit:disabled {
-        opacity: 0.6;
-        cursor: not-allowed;
-        box-shadow: none;
-    }
-
-    .spinner {
-        width: 16px;
-        height: 16px;
-        border: 2px solid rgba(11, 12, 21, 0.25);
-        border-top-color: #0b0c15;
-        border-radius: 50%;
-        animation: spin 0.8s linear infinite;
-    }
-
-    @@keyframes spin {
-        to { transform: rotate(360deg); }
-    }
-
-    @@keyframes fadeIn {
-        from {
-            opacity: 0;
-            transform: translateY(20px);
-        }
-        to {
-            opacity: 1;
-            transform: translateY(0);
-        }
+    .login-card {
+        width: min(480px, calc(100vw - 32px));
+        border-radius: 20px;
+        background: rgba(255, 255, 255, 0.04);
+        backdrop-filter: blur(24px);
+        color: white;
    }
 </style>

@@ -291,7 +81,6 @@
        try
        {
            var response = await Http.PostAsJsonAsync("api/auth/login", new { Username, Password });
-
            if (response.IsSuccessStatusCode)
            {
                var auth = await response.Content.ReadFromJsonAsync<LoginResponse>();
@@ -303,9 +92,7 @@

                var customProvider = (CustomAuthenticationStateProvider)AuthStateProvider;
                await customProvider.MarkUserAsAuthenticatedAsync(auth.Username ?? Username, auth.AccessToken, auth.Role ?? "Admin");
-                
-                // Redirect back to home dashboard
-                NavigationManager.NavigateTo("");
+                NavigationManager.NavigateTo("/dashboard");
            }
            else
            {
@@ -3,87 +3,82 @@
@using QuantEngine.Core.Infrastructure
@inject HttpClient Http

-<PageTitle>Quant Engine - Operations</PageTitle>
+<PageTitle>QuantEngine - Operations</PageTitle>

-<h1 style="margin: 0 0 8px 0; font-size: 28px; font-weight: 600;">Operational Report</h1>
-<p style="margin: 0 0 16px 0; color: var(--neutral-foreground-2); font-size: 14px;">
-    이 페이지는 `Temp/operational_report.json`만 읽습니다. DB 연결과 무관하게 동일한 결과를 보여주는 운영 고정 화면입니다.
-</p>
+<MudText Typo="Typo.h4" Class="mb-2">Operational Report</MudText>
+<MudText Typo="Typo.body2" Class="mb-4">Temp/operational_report.json만 읽는 운영 고정 화면입니다.</MudText>

-<!-- Metadata Cards -->
-<FluentStack Orientation="Orientation.Horizontal" HorizontalGap="16" Wrap="true" Style="margin-bottom: 16px;">
-    <FluentCard Style="flex: 1; min-width: 150px;">
-        <div style="padding: 16px;">
-            <p style="margin: 0 0 8px 0; color: var(--neutral-foreground-2); font-size: 12px; font-weight: 500;">Schema</p>
-            <h3 style="margin: 0; font-size: 18px; font-weight: 600;">@SchemaVersion</h3>
-        </div>
-    </FluentCard>
-    <FluentCard Style="flex: 1; min-width: 150px;">
-        <div style="padding: 16px;">
-            <p style="margin: 0 0 8px 0; color: var(--neutral-foreground-2); font-size: 12px; font-weight: 500;">Sections</p>
-            <h3 style="margin: 0; font-size: 18px; font-weight: 600;">@SectionCountLabel</h3>
-        </div>
-    </FluentCard>
-    <FluentCard Style="flex: 1; min-width: 150px;">
-        <div style="padding: 16px;">
-            <p style="margin: 0 0 8px 0; color: var(--neutral-foreground-2); font-size: 12px; font-weight: 500;">Source</p>
-            <h3 style="margin: 0; font-size: 18px; font-weight: 600;">@SourceJson</h3>
-        </div>
-    </FluentCard>
-    <FluentCard Style="flex: 1; min-width: 150px;">
-        <div style="padding: 16px;">
-            <p style="margin: 0 0 8px 0; color: var(--neutral-foreground-2); font-size: 12px; font-weight: 500;">Generated</p>
-            <h3 style="margin: 0; font-size: 18px; font-weight: 600;">@GeneratedAt</h3>
-        </div>
-    </FluentCard>
-</FluentStack>
+<MudGrid Spacing="2" Class="mb-4">
+    <MudItem xs="12" sm="3">
+        <MudPaper Class="pa-4" Elevation="2">
+            <MudText Typo="Typo.caption">Schema</MudText>
+            <MudText Typo="Typo.h6">@SchemaVersion</MudText>
+        </MudPaper>
+    </MudItem>
+    <MudItem xs="12" sm="3">
+        <MudPaper Class="pa-4" Elevation="2">
+            <MudText Typo="Typo.caption">Sections</MudText>
+            <MudText Typo="Typo.h6">@SectionCountLabel</MudText>
+        </MudPaper>
+    </MudItem>
+    <MudItem xs="12" sm="3">
+        <MudPaper Class="pa-4" Elevation="2">
+            <MudText Typo="Typo.caption">Source</MudText>
+            <MudText Typo="Typo.h6">@SourceJson</MudText>
+        </MudPaper>
+    </MudItem>
+    <MudItem xs="12" sm="3">
+        <MudPaper Class="pa-4" Elevation="2">
+            <MudText Typo="Typo.caption">Generated</MudText>
+            <MudText Typo="Typo.h6">@GeneratedAt</MudText>
+        </MudPaper>
+    </MudItem>
+</MudGrid>

-<!-- Highlight Sections Grid -->
-<FluentStack Orientation="Orientation.Horizontal" HorizontalGap="16" Wrap="true" Style="margin-bottom: 16px;">
+<MudGrid Spacing="2" Class="mb-4">
    @foreach (var section in HighlightSections)
    {
-        <FluentCard Style="flex: 1; min-width: 200px;">
-            <div style="padding: 16px;">
-                <p style="margin: 0 0 4px 0; color: var(--neutral-foreground-2); font-size: 12px;">@(section.Name)</p>
-                <h3 style="margin: 4px 0; font-size: 16px; font-weight: 600;">@(section.Title)</h3>
-                <p style="margin: 8px 0 0 0; color: var(--neutral-foreground-3); font-size: 12px;">@(section.Preview)</p>
-            </div>
-        </FluentCard>
+        <MudItem xs="12" sm="6" md="3" @key="section.Name">
+            <MudPaper Class="pa-4" Elevation="2">
+                <MudText Typo="Typo.caption">@(section.Name)</MudText>
+                <MudText Typo="Typo.h6">@(section.Title)</MudText>
+                <MudText Typo="Typo.body2">@(section.Preview)</MudText>
+            </MudPaper>
+        </MudItem>
    }
-</FluentStack>
+</MudGrid>

-<!-- Report Health -->
-<FluentCard Style="margin-bottom: 16px;">
-    <div style="padding: 16px;">
-        <h3 style="margin: 0 0 12px 0; font-size: 16px; font-weight: 600;">Report Health</h3>
-        <FluentStack Orientation="Orientation.Vertical" VerticalGap="8">
-            <p style="margin: 0; font-size: 14px;"><strong>Status:</strong> <FluentBadge Appearance="BadgeAppearance.Filled">@HealthLabel</FluentBadge></p>
-            <p style="margin: 0; font-size: 14px;"><strong>Path:</strong> @ReportPath</p>
-            <p style="margin: 0; font-size: 14px;"><strong>Sections rendered:</strong> @RenderedSectionCountLabel</p>
-        </FluentStack>
-    </div>
-</FluentCard>
+<MudPaper Class="pa-4 mb-4" Elevation="2">
+    <MudText Typo="Typo.h6" Class="mb-3">Report Health</MudText>
+    <MudStack Spacing="1">
+        <MudText Typo="Typo.body2">Status: <MudChip T="string" Color="@(HealthLabel == "PASS" ? Color.Success : Color.Warning)" Variant="Variant.Filled">@HealthLabel</MudChip></MudText>
+        <MudText Typo="Typo.body2">Path: @ReportPath</MudText>
+        <MudText Typo="Typo.body2">Sections rendered: @RenderedSectionCountLabel</MudText>
+    </MudStack>
+</MudPaper>

-<!-- Sections Table -->
-<FluentCard>
-    <div style="padding: 16px;">
-        <h3 style="margin: 0 0 12px 0; font-size: 16px; font-weight: 600;">Sections</h3>
-        @if (Sections.Count == 0)
-        {
-            <div style="padding: 12px; background: var(--warning-background-1); border: 1px solid var(--warning-stroke-1); border-radius: 4px; color: var(--warning-foreground-1); font-size: 14px;">
-                DATA_MISSING: operational_report.json에 표시할 섹션이 없습니다.
-            </div>
-        }
-        else
-        {
-            <FluentDataGrid Items="@Sections.AsQueryable()">
-                <PropertyColumn Property="@(x => x.Name)" Title="Name" />
-                <PropertyColumn Property="@(x => x.Title)" Title="Title" />
-                <PropertyColumn Property="@(x => x.Preview)" Title="Preview" />
-            </FluentDataGrid>
-        }
-    </div>
-</FluentCard>
+<MudPaper Class="pa-4" Elevation="2">
+    <MudText Typo="Typo.h6" Class="mb-3">Sections</MudText>
+    @if (Sections.Count == 0)
+    {
+        <MudAlert Severity="Severity.Warning">DATA_MISSING: operational_report.json에 표시할 섹션이 없습니다.</MudAlert>
+    }
+    else
+    {
+        <MudTable Items="@Sections" Dense="true" Hover="true">
+            <HeaderContent>
+                <MudTh>Name</MudTh>
+                <MudTh>Title</MudTh>
+                <MudTh>Preview</MudTh>
+            </HeaderContent>
+            <RowTemplate>
+                <MudTd DataLabel="Name">@context.Name</MudTd>
+                <MudTd DataLabel="Title">@context.Title</MudTd>
+                <MudTd DataLabel="Preview">@context.Preview</MudTd>
+            </RowTemplate>
+        </MudTable>
+    }
+</MudPaper>

@code {
    private readonly List<OperationalReportSection> Sections = new();
@@ -106,7 +101,7 @@
                SchemaVersion = report.SchemaVersion;
                SourceJson = report.SourceJson;
                GeneratedAt = report.GeneratedAt;
-                
+
                Sections.Clear();
                Sections.AddRange(report.Sections);

@@ -1,14 +1,10 @@
 using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
-using Microsoft.FluentUI.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Authorization;
 using QuantEngine.Web.Client.Services;
 using QuantEngine.Web.Client.Infrastructure;

 var builder = WebAssemblyHostBuilder.CreateDefault(args);

-// Register Fluent UI
-builder.Services.AddFluentUIComponents();
-
 // Register LocalStorage for cross-platform session persistence
 builder.Services.AddScoped<LocalStorageService>();

@@ -16,8 +16,7 @@
  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="10.0.0-preview.2.25120.18" />
    <PackageReference Include="Microsoft.AspNetCore.Components.Authorization" Version="10.0.0-preview.2.25120.18" />
-    <PackageReference Include="Microsoft.FluentUI.AspNetCore.Components" Version="5.0.0-rc.4-26177.1" />
-    <PackageReference Include="Microsoft.FluentUI.AspNetCore.Components.Icons" Version="5.0.0-rc.4-26177.1" />
+    <PackageReference Include="MudBlazor" Version="8.6.0" />
  </ItemGroup>

 </Project>
@@ -6,8 +6,7 @@
@using static Microsoft.AspNetCore.Components.Web.RenderMode
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
-@using Microsoft.FluentUI.AspNetCore.Components
-@using Microsoft.FluentUI.AspNetCore.Components.Icons
+@using MudBlazor
@using QuantEngine.Web.Client
@using QuantEngine.Web.Client.Pages
@using QuantEngine.Web.Client.Layout
@@ -1,14 +1,13 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="ko">

 <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <ResourcePreloader />
-    <!-- Fluent UI CSS -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
-    <link href="_content/Microsoft.FluentUI.AspNetCore.Components/css/fluent-components.css" rel="stylesheet" />
+    <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="@Assets["app.css"]" />
    <link rel="stylesheet" href="@Assets["QuantEngine.Web.styles.css"]" />
    <ImportMap />
@@ -18,13 +17,14 @@
 </head>

 <body>
-    <FluentDesignSystemProvider>
+    <MudThemeProvider>
+        <MudDialogProvider />
+        <MudSnackbarProvider />
        <Routes @rendermode="InteractiveWebAssembly" />
        <ReconnectModal />
-    </FluentDesignSystemProvider>
+    </MudThemeProvider>

-    <!-- Fluent UI JS -->
-    <script src="_content/Microsoft.FluentUI.AspNetCore.Components/js/fluent-components.js"></script>
+    <script src="_content/MudBlazor/MudBlazor.min.js"></script>
    <script src="@Assets["_framework/blazor.web.js"]"></script>
 </body>

@@ -6,8 +6,7 @@
@using static Microsoft.AspNetCore.Components.Web.RenderMode
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
-@using Microsoft.FluentUI.AspNetCore.Components
-@using Microsoft.FluentUI.AspNetCore.Components.Icons
+@using MudBlazor
@using QuantEngine.Web
@using QuantEngine.Web.Components
@using QuantEngine.Web.Components.Layout
@@ -8,7 +8,6 @@ using QuantEngine.Core.Interfaces;
 using QuantEngine.Application.Services;
 using System.Text.Json;
 using static QuantEngine.Application.Services.DataCollectionService;
-using Microsoft.FluentUI.AspNetCore.Components;
 using Serilog;
 using QuantEngine.Web.Client.Infrastructure;
 using QuantEngine.Web.Client.Services;
@@ -19,6 +18,7 @@ using QuantEngine.Core.Models;
 using Microsoft.AspNetCore.Authentication;
 using System.Text.Encodings.Web;
 using Microsoft.Extensions.Options;
+using MudBlazor.Services;

 // Serilog Configuration with Telegram Sink
 Log.Logger = new LoggerConfiguration()
@@ -43,8 +43,7 @@ builder.Services.AddScoped<LocalStorageService>();
 builder.Services.AddScoped<AuthenticationStateProvider, CustomAuthenticationStateProvider>();
 builder.Services.AddAuthorizationCore();

-// Fluent UI Services
-builder.Services.AddFluentUIComponents();
+builder.Services.AddMudServices();

 // PostgreSQL Dapper Setup
 var connectionString = builder.Configuration.GetConnectionString("DefaultConnection")
@@ -112,6 +111,8 @@ app.UseAuthorization();

 app.MapStaticAssets();

+app.MapGet("/", () => Results.Redirect("/login"));
+
 // Collection API Endpoints (must be before MapRazorComponents)
 app.MapCollectionEndpoints();

@@ -8,8 +8,7 @@
  </ItemGroup>

  <ItemGroup>
-    <PackageReference Include="Microsoft.FluentUI.AspNetCore.Components" Version="5.0.0-rc.4-26177.1" />
-    <PackageReference Include="Microsoft.FluentUI.AspNetCore.Components.Icons" Version="5.0.0-rc.4-26177.1" />
+    <PackageReference Include="MudBlazor" Version="8.6.0" />
    <PackageReference Include="Serilog.AspNetCore" Version="10.0.0" />
    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Server" Version="10.0.0-preview.2.25120.18" />
  </ItemGroup>