diff --git a/.agent/skills/nexus-ui-engine/SKILL.md b/.agent/skills/nexus-ui-engine/SKILL.md
index 4c5eba8..988b731 100644
--- a/.agent/skills/nexus-ui-engine/SKILL.md
+++ b/.agent/skills/nexus-ui-engine/SKILL.md
@@ -12,14 +12,22 @@ description: Design System & Component rules for Blazor
 
 - **Styling & Isolation:** 
   - Mandatory use of scoped CSS (`.razor.css`).
+  - Strict compliance: Zero inline `<style>` tags are allowed in `.razor` files.
   - No global CSS except for design tokens in `app.css`.
   - Use `::deep` only when absolutely necessary to style child components.
 
 - **Design System (Nexus Neon):**
   - **Color Palette:**
     - Primary Accent: `--nexus-neon` (`#00ff99`) - Used for borders, highlights, and icons.
+    - Neon Glow: `--nexus-neon-glow` / `--nexus-primary-glow` (`rgba(0, 255, 153, 0.3)`).
     - Dark Mode: `--nexus-bg` (`#0a0a0a`), `--nexus-card` (`#141414`).
     - Light Mode: `--nexus-bg` (`#f8f9fa`), `--nexus-card` (`#ffffff`).
+    - **No Brand Splitting:** Strict ban on custom purple/indigo/cyan elements or hardcoded accent colors (like `#7c3aed`, `#4c1d95`, `#00b3ff`) on dashboard pages. Neutral/glass surfaces (`rgba(255, 255, 255, 0.05)`) must be used for secondary elements to preserve contrast and ensure the AI/neon-green elements are the focal point.
+  - **Buttons:**
+    - Must inherit from the global `.btn-nexus` class in `app.css`.
+    - Primary Button: `.btn-nexus-primary` (background: `var(--nexus-neon)`, text color: `#000`).
+    - Secondary Button: `.btn-nexus-secondary` (background: `rgba(255, 255, 255, 0.05)`, border: `1px solid rgba(255, 255, 255, 0.1)`, text color: `#fff`).
+    - Hover Interaction: `transform: translateY(-2px)`, increased brightness, and a signature primary neon glow shadow.
   - **Typography:**
     - UI Elements: `Inter` (Sans-Serif) for controls, menus, and labels.
     - Reading Content: `Merriweather` (Serif) with `line-height: 1.65` and `letter-spacing: -0.01em` for high readability.
@@ -44,6 +52,9 @@ description: Design System & Component rules for Blazor
 - **Interactive Flow:**
   - AI Assistant interactions must be non-blocking and smoothly transition using CSS animations.
   - Interactive elements must have clear `:hover`, `:active`, and `:focus` states.
-  - **Glass Panel Standard:** All primary data panels (`.glass-panel`) must implement the following interaction signature:
-    - `transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)`
-    - `:hover` state must include: `transform: translateY(-4px)`, increased background opacity, and a subtle `--nexus-neon` border highlight (e.g., `rgba(0, 255, 153, 0.2)`).
\ No newline at end of file
+  - **Glass Panel Standard:** All primary data panels (`.glass-panel`) must implement the following global parameters from `app.css` (only local modifiers like padding and hover offsets should live in scoped CSS):
+    - Background: `rgba(20, 20, 20, 0.85)` (fallback) / `rgba(255, 255, 255, 0.03)` with `backdrop-filter: blur(10px)` when supported.
+    - Border: `1px solid rgba(255, 255, 255, 0.05)`.
+    - Border Radius: `var(--radius-xl)`.
+    - Transition: `all 0.3s cubic-bezier(0.4, 0, 0.2, 1)`.
+    - `:hover` state: `transform: translateY(-4px)` (or local offset) and highlight accent `border-color: rgba(0, 255, 153, 0.2)`.
\ No newline at end of file
diff --git a/src/NexusReader.Application/Abstractions/Persistence/IConceptsMapReadRepository.cs b/src/NexusReader.Application/Abstractions/Persistence/IConceptsMapReadRepository.cs
new file mode 100644
index 0000000..e02544f
--- /dev/null
+++ b/src/NexusReader.Application/Abstractions/Persistence/IConceptsMapReadRepository.cs
@@ -0,0 +1,23 @@
+using NexusReader.Domain.Entities;
+
+namespace NexusReader.Application.Abstractions.Persistence;
+
+/// <summary>
+/// Read-only abstraction for fetching concepts map data.
+/// Defined in the Application layer to avoid a direct dependency on EF Core / NexusReader.Data.
+/// </summary>
+public interface IConceptsMapReadRepository
+{
+    /// <summary>
+    /// Gets the last read page ID for the specified user.
+    /// </summary>
+    Task<string?> GetLastReadPageIdAsync(string userId, CancellationToken cancellationToken = default);
+
+    /// <summary>
+    /// Gets all knowledge units associated with a book, scoped by tenant.
+    /// </summary>
+    Task<List<KnowledgeUnit>> GetKnowledgeUnitsForBookAsync(
+        Guid bookId,
+        string tenantId,
+        CancellationToken cancellationToken = default);
+}
diff --git a/src/NexusReader.Application/Abstractions/Services/IConceptsMapService.cs b/src/NexusReader.Application/Abstractions/Services/IConceptsMapService.cs
new file mode 100644
index 0000000..77f21c0
--- /dev/null
+++ b/src/NexusReader.Application/Abstractions/Services/IConceptsMapService.cs
@@ -0,0 +1,9 @@
+using FluentResults;
+using NexusReader.Application.Queries.Concepts;
+
+namespace NexusReader.Application.Abstractions.Services;
+
+public interface IConceptsMapService
+{
+    Task<Result<BookConceptsMapResultDto>> GetConceptsMapAsync(Guid bookId);
+}
diff --git a/src/NexusReader.Application/Queries/Concepts/BookConceptsMapResultDto.cs b/src/NexusReader.Application/Queries/Concepts/BookConceptsMapResultDto.cs
new file mode 100644
index 0000000..6615b4a
--- /dev/null
+++ b/src/NexusReader.Application/Queries/Concepts/BookConceptsMapResultDto.cs
@@ -0,0 +1,10 @@
+using System.Collections.Generic;
+using System.Text.Json.Serialization;
+using NexusReader.Application.Queries.Graph;
+
+namespace NexusReader.Application.Queries.Concepts;
+
+public record BookConceptsMapResultDto(
+    [property: JsonPropertyName("nodes")] List<GraphNodeDto> Nodes,
+    [property: JsonPropertyName("lastReadBlockId")] string LastReadBlockId
+);
diff --git a/src/NexusReader.Application/Queries/Concepts/GetBookConceptsMapQuery.cs b/src/NexusReader.Application/Queries/Concepts/GetBookConceptsMapQuery.cs
new file mode 100644
index 0000000..ef2bfcb
--- /dev/null
+++ b/src/NexusReader.Application/Queries/Concepts/GetBookConceptsMapQuery.cs
@@ -0,0 +1,9 @@
+using NexusReader.Application.Abstractions.Messaging;
+
+namespace NexusReader.Application.Queries.Concepts;
+
+public record GetBookConceptsMapQuery(
+    Guid BookId,
+    string UserId,
+    string TenantId
+) : IQuery<BookConceptsMapResultDto>;
diff --git a/src/NexusReader.Application/Queries/Concepts/GetBookConceptsMapQueryHandler.cs b/src/NexusReader.Application/Queries/Concepts/GetBookConceptsMapQueryHandler.cs
new file mode 100644
index 0000000..8cdb123
--- /dev/null
+++ b/src/NexusReader.Application/Queries/Concepts/GetBookConceptsMapQueryHandler.cs
@@ -0,0 +1,92 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text.Json;
+using System.Threading;
+using System.Threading.Tasks;
+using FluentResults;
+using NexusReader.Application.Abstractions.Messaging;
+using NexusReader.Application.Abstractions.Persistence;
+using NexusReader.Application.Queries.Graph;
+using NexusReader.Application.Utilities;
+
+namespace NexusReader.Application.Queries.Concepts;
+
+internal sealed class GetBookConceptsMapQueryHandler : IQueryHandler<GetBookConceptsMapQuery, BookConceptsMapResultDto>
+{
+    private readonly IConceptsMapReadRepository _repository;
+
+    public GetBookConceptsMapQueryHandler(IConceptsMapReadRepository repository)
+    {
+        _repository = repository;
+    }
+
+    public async Task<Result<BookConceptsMapResultDto>> Handle(GetBookConceptsMapQuery request, CancellationToken cancellationToken)
+    {
+        // 1. Fetch user to extract reading progress (LastReadPageId)
+        var lastReadPageId = await _repository.GetLastReadPageIdAsync(request.UserId, cancellationToken);
+        var lastReadBlockId = lastReadPageId ?? string.Empty;
+
+        // 2. Fetch all KnowledgeUnits associated with the ebook and user's tenant
+        var units = await _repository.GetKnowledgeUnitsForBookAsync(request.BookId, request.TenantId, cancellationToken);
+
+        var nodes = new List<GraphNodeDto>();
+
+        foreach (var unit in units)
+        {
+            // Only process units representing sections or conceptual milestones (usually starting with "seg-")
+            if (string.IsNullOrEmpty(unit.Id) || !unit.Id.StartsWith("seg-"))
+            {
+                continue;
+            }
+
+            string label = unit.Id;
+            string group = "concept";
+            string summary = unit.Content;
+            var keyTerms = new List<string>();
+
+            if (!string.IsNullOrEmpty(unit.MetadataJson))
+            {
+                try
+                {
+                    using var doc = JsonDocument.Parse(unit.MetadataJson);
+                    if (doc.RootElement.TryGetProperty("label", out var labelProp))
+                        label = labelProp.GetString() ?? label;
+                    if (doc.RootElement.TryGetProperty("group", out var groupProp))
+                        group = groupProp.GetString() ?? group;
+                    if (doc.RootElement.TryGetProperty("summary", out var summaryProp))
+                        summary = summaryProp.GetString() ?? summary;
+                    if (doc.RootElement.TryGetProperty("key_terms", out var ktProp) && ktProp.ValueKind == JsonValueKind.Array)
+                    {
+                        foreach (var term in ktProp.EnumerateArray())
+                        {
+                            if (term.GetString() is string s)
+                                keyTerms.Add(s);
+                        }
+                    }
+                }
+                catch
+                {
+                    // Fallback to defaults
+                }
+            }
+
+            nodes.Add(new GraphNodeDto(
+                Id: unit.Id,
+                Label: label,
+                Group: group,
+                Description: unit.Content,
+                Type: unit.Type.ToString(),
+                Summary: summary,
+                KeyTerms: keyTerms
+            ));
+        }
+
+        // Return sorted by the numeric value in the seg-ID to ensure topdown vertical alignment
+        var sortedNodes = nodes
+            .OrderBy(n => SegmentIdParser.Parse(n.Id))
+            .ToList();
+
+        return Result.Ok(new BookConceptsMapResultDto(sortedNodes, lastReadBlockId));
+    }
+}
diff --git a/src/NexusReader.Application/Utilities/SegmentIdParser.cs b/src/NexusReader.Application/Utilities/SegmentIdParser.cs
new file mode 100644
index 0000000..cc0def7
--- /dev/null
+++ b/src/NexusReader.Application/Utilities/SegmentIdParser.cs
@@ -0,0 +1,19 @@
+namespace NexusReader.Application.Utilities;
+
+/// <summary>
+/// Shared utility for parsing numeric segment identifiers from IDs like "seg-42".
+/// Centralizes the parsing contract to avoid duplication across handlers and UI components.
+/// </summary>
+public static class SegmentIdParser
+{
+    /// <summary>
+    /// Extracts the numeric portion from a segment identifier string (e.g., "seg-42" → 42).
+    /// Returns 0 if the string is null, empty, or contains no digits.
+    /// </summary>
+    public static int Parse(string? id)
+    {
+        if (string.IsNullOrEmpty(id)) return 0;
+        var digits = new string(id.Where(char.IsDigit).ToArray());
+        return int.TryParse(digits, out var val) ? val : 0;
+    }
+}
diff --git a/src/NexusReader.Infrastructure/DependencyInjection.cs b/src/NexusReader.Infrastructure/DependencyInjection.cs
index 58ea65f..9c39cca 100644
--- a/src/NexusReader.Infrastructure/DependencyInjection.cs
+++ b/src/NexusReader.Infrastructure/DependencyInjection.cs
@@ -121,6 +121,7 @@ public static class DependencyInjection
         // Fix #1: Ebook repository (scoped, matches AppDbContext lifetime)
         services.AddScoped<IEbookRepository, EbookRepository>();
         services.AddScoped<IQuizResultRepository, QuizResultRepository>();
+        services.AddScoped<IConceptsMapReadRepository, ConceptsMapReadRepository>();
 
         // Fix #2: SignalR broadcaster (scoped, wraps IHubContext which is itself a singleton wrapper)
         services.AddScoped<ISyncBroadcaster, SignalRSyncBroadcaster>();
diff --git a/src/NexusReader.Infrastructure/Persistence/ConceptsMapReadRepository.cs b/src/NexusReader.Infrastructure/Persistence/ConceptsMapReadRepository.cs
new file mode 100644
index 0000000..29062b1
--- /dev/null
+++ b/src/NexusReader.Infrastructure/Persistence/ConceptsMapReadRepository.cs
@@ -0,0 +1,48 @@
+using Microsoft.EntityFrameworkCore;
+using NexusReader.Application.Abstractions.Persistence;
+using NexusReader.Data.Persistence;
+using NexusReader.Domain.Entities;
+
+namespace NexusReader.Infrastructure.Persistence;
+
+/// <summary>
+/// EF Core implementation of <see cref="IConceptsMapReadRepository"/>.
+/// Uses <see cref="IDbContextFactory{TContext}"/> for Blazor-safe scoped context creation.
+/// </summary>
+internal sealed class ConceptsMapReadRepository : IConceptsMapReadRepository
+{
+    private readonly IDbContextFactory<AppDbContext> _dbContextFactory;
+
+    public ConceptsMapReadRepository(IDbContextFactory<AppDbContext> dbContextFactory)
+    {
+        _dbContextFactory = dbContextFactory;
+    }
+
+    /// <inheritdoc />
+    public async Task<string?> GetLastReadPageIdAsync(string userId, CancellationToken cancellationToken = default)
+    {
+        await using var dbContext = await _dbContextFactory.CreateDbContextAsync(cancellationToken);
+
+        var user = await dbContext.Users
+            .Where(u => u.Id == userId)
+            .Select(u => new { u.LastReadPageId })
+            .FirstOrDefaultAsync(cancellationToken);
+
+        return user?.LastReadPageId;
+    }
+
+    /// <inheritdoc />
+    public async Task<List<KnowledgeUnit>> GetKnowledgeUnitsForBookAsync(
+        Guid bookId,
+        string tenantId,
+        CancellationToken cancellationToken = default)
+    {
+        await using var dbContext = await _dbContextFactory.CreateDbContextAsync(cancellationToken);
+
+        return await dbContext.KnowledgeUnits
+            .Where(k => k.EbookId == bookId &&
+                        (k.TenantId == tenantId || k.TenantId == "global" || string.IsNullOrEmpty(k.TenantId)))
+            .OrderBy(k => k.CreatedAt)
+            .ToListAsync(cancellationToken);
+    }
+}
diff --git a/src/NexusReader.UI.Shared/Components/Organisms/ConceptsMap.razor b/src/NexusReader.UI.Shared/Components/Organisms/ConceptsMap.razor
new file mode 100644
index 0000000..46239da
--- /dev/null
+++ b/src/NexusReader.UI.Shared/Components/Organisms/ConceptsMap.razor
@@ -0,0 +1,110 @@
+@using NexusReader.Application.Queries.Graph
+@using NexusReader.Application.Utilities
+@using NexusReader.UI.Shared.Components.Atoms
+
+<div class="concepts-map">
+    @if (Nodes == null || !Nodes.Any())
+    {
+        <div class="empty-map-state">
+            <NexusIcon Name="map" Size="48" Class="dim-icon" />
+            <p>Brak wygenerowanej mapy pojęć dla tej książki.</p>
+        </div>
+    }
+    else
+    {
+        <div class="timeline-container">
+            @for (int i = 0; i < Nodes.Count; i++)
+            {
+                var index = i;
+                var node = Nodes[index];
+                var isUnlocked = IsUnlocked(node.Id);
+                var isSelected = SelectedNode?.Id == node.Id;
+                
+                var showTrack = index < Nodes.Count - 1;
+                var isNextUnlocked = showTrack && IsUnlocked(Nodes[index + 1].Id);
+                
+                <div class="timeline-step @(isUnlocked ? "unlocked" : "locked") @(isSelected ? "selected" : "")" 
+                     @onclick="() => HandleNodeClick(node)">
+                    
+                    <div class="node-connector-wrapper">
+                        <div class="node-circle">
+                            @if (isUnlocked)
+                            {
+                                <div class="node-glow"></div>
+                                <NexusIcon Name="check" Size="16" Class="check-icon" />
+                            }
+                            else
+                            {
+                                <NexusIcon Name="lock" Size="16" Class="lock-icon" />
+                            }
+                        </div>
+                        
+                        @if (showTrack)
+                        {
+                            <div class="vertical-track @(isNextUnlocked ? "track-active" : "track-inactive")"></div>
+                        }
+                    </div>
+                    
+                    <div class="node-content">
+                        <div class="node-header">
+                            <span class="segment-tag">@node.Id.ToUpper()</span>
+                            @if (isUnlocked)
+                            {
+                                <span class="badge badge-unlocked">Odblokowane</span>
+                            }
+                            else
+                            {
+                                <span class="badge badge-locked">Zablokowane</span>
+                            }
+                        </div>
+                        <h4 class="node-title">@node.Label</h4>
+                        <p class="node-desc">@GetShortDescription(node.Description)</p>
+                    </div>
+                </div>
+            }
+        </div>
+    }
+</div>
+
+@code {
+    [Parameter] public List<GraphNodeDto> Nodes { get; set; } = new();
+    [Parameter] public string LastReadBlockId { get; set; } = string.Empty;
+    [Parameter] public EventCallback<GraphNodeDto> OnNodeSelected { get; set; }
+    [Parameter] public GraphNodeDto? SelectedNode { get; set; }
+
+    private bool IsUnlocked(string nodeId)
+    {
+        if (string.IsNullOrEmpty(nodeId)) return false;
+        
+        var nodeSeq = SegmentIdParser.Parse(nodeId);
+        
+        // Always unlock the very first segment so the user has a starting node
+        var minNodeSeq = Nodes.Any() ? Nodes.Min(n => SegmentIdParser.Parse(n.Id)) : 0;
+        if (nodeSeq == minNodeSeq) return true;
+
+        if (string.IsNullOrEmpty(LastReadBlockId))
+        {
+            return false;
+        }
+
+        var progressSeq = SegmentIdParser.Parse(LastReadBlockId);
+        return nodeSeq <= progressSeq;
+    }
+
+
+
+    private async Task HandleNodeClick(GraphNodeDto node)
+    {
+        if (OnNodeSelected.HasDelegate)
+        {
+            await OnNodeSelected.InvokeAsync(node);
+        }
+    }
+
+    private string GetShortDescription(string? desc)
+    {
+        if (string.IsNullOrEmpty(desc)) return "Brak opisu.";
+        if (desc.Length <= 110) return desc;
+        return desc[..107] + "...";
+    }
+}
diff --git a/src/NexusReader.UI.Shared/Components/Organisms/ConceptsMap.razor.css b/src/NexusReader.UI.Shared/Components/Organisms/ConceptsMap.razor.css
new file mode 100644
index 0000000..47220b5
--- /dev/null
+++ b/src/NexusReader.UI.Shared/Components/Organisms/ConceptsMap.razor.css
@@ -0,0 +1,235 @@
+.concepts-map {
+    width: 100%;
+    max-height: 72vh;
+    overflow-y: auto;
+    padding: 1.5rem;
+    box-sizing: border-box;
+}
+
+/* Scrollbar Customization for modern aesthetic */
+.concepts-map::-webkit-scrollbar {
+    width: 6px;
+}
+.concepts-map::-webkit-scrollbar-track {
+    background: rgba(255, 255, 255, 0.02);
+}
+.concepts-map::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 3px;
+}
+.concepts-map::-webkit-scrollbar-thumb:hover {
+    background: var(--nexus-neon);
+}
+
+.empty-map-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 3rem;
+    background: rgba(255, 255, 255, 0.02);
+    border: 1px dashed rgba(255, 255, 255, 0.08);
+    border-radius: 12px;
+    color: rgba(255, 255, 255, 0.4);
+    text-align: center;
+}
+
+.empty-map-state .dim-icon {
+    margin-bottom: 1rem;
+    color: rgba(255, 255, 255, 0.2);
+}
+
+.timeline-container {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+    position: relative;
+    padding-left: 0.5rem;
+}
+
+.timeline-step {
+    display: flex;
+    flex-direction: row;
+    gap: 1.5rem;
+    padding: 1rem;
+    border-radius: 12px;
+    border: 1px solid transparent;
+    cursor: pointer;
+    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+    margin-bottom: 0.5rem;
+}
+
+.timeline-step:hover {
+    background: rgba(255, 255, 255, 0.02);
+    transform: translateX(4px);
+}
+
+.timeline-step.unlocked:hover {
+    border-color: rgba(0, 255, 153, 0.15);
+    box-shadow: 0 4px 20px rgba(0, 255, 153, 0.05);
+}
+
+.timeline-step.selected {
+    background: rgba(0, 255, 153, 0.04);
+    border-color: var(--nexus-neon);
+    box-shadow: 0 0 15px var(--nexus-primary-glow);
+}
+
+.node-connector-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 32px;
+    position: relative;
+    flex-shrink: 0;
+}
+
+.node-circle {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    z-index: 2;
+    transition: all 0.3s ease;
+    background: #0d0d0d;
+}
+
+.unlocked .node-circle {
+    border: 2px solid var(--nexus-neon);
+    color: var(--nexus-neon);
+    box-shadow: 0 0 10px var(--nexus-primary-glow);
+}
+
+.locked .node-circle {
+    border: 2px solid rgba(255, 255, 255, 0.1);
+    color: rgba(255, 255, 255, 0.2);
+}
+
+.node-glow {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background: var(--nexus-neon);
+    opacity: 0.15;
+    filter: blur(4px);
+    z-index: -1;
+    animation: pulse-glow 2s infinite ease-in-out;
+}
+
+@keyframes pulse-glow {
+    0% { transform: scale(1); opacity: 0.15; }
+    50% { transform: scale(1.25); opacity: 0.3; }
+    100% { transform: scale(1); opacity: 0.15; }
+}
+
+.vertical-track {
+    width: 2px;
+    position: absolute;
+    top: 32px;
+    bottom: -18px; /* Extends to link to next node circle */
+    z-index: 1;
+    transition: all 0.3s ease;
+}
+
+.track-active {
+    background: linear-gradient(180deg, var(--nexus-neon), rgba(0, 255, 153, 0.2));
+    box-shadow: 0 0 6px var(--nexus-primary-glow);
+}
+
+.track-inactive {
+    background: rgba(255, 255, 255, 0.08);
+}
+
+.node-content {
+    flex-grow: 1;
+    background: rgba(255, 255, 255, 0.02);
+    border: 1px solid rgba(255, 255, 255, 0.04);
+    border-radius: 8px;
+    padding: 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    transition: all 0.3s ease;
+    backdrop-filter: blur(4px);
+}
+
+.timeline-step.selected .node-content {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: rgba(0, 255, 153, 0.2);
+}
+
+.node-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.segment-tag {
+    font-family: 'Outfit', sans-serif;
+    font-size: 0.75rem;
+    font-weight: 600;
+    letter-spacing: 0.05em;
+    color: rgba(255, 255, 255, 0.4);
+}
+
+.unlocked .segment-tag {
+    color: var(--nexus-neon);
+}
+
+.badge {
+    font-size: 0.7rem;
+    padding: 0.2rem 0.5rem;
+    border-radius: 12px;
+    font-weight: 500;
+}
+
+.badge-unlocked {
+    background: rgba(0, 255, 153, 0.08);
+    color: var(--nexus-neon);
+    border: 1px solid rgba(0, 255, 153, 0.2);
+}
+
+.badge-locked {
+    background: rgba(255, 255, 255, 0.05);
+    color: rgba(255, 255, 255, 0.3);
+    border: 1px solid rgba(255, 255, 255, 0.03);
+}
+
+.node-title {
+    margin: 0;
+    font-size: 0.95rem;
+    font-weight: 600;
+    color: #fff;
+    transition: color 0.2s ease;
+}
+
+.timeline-step.unlocked:hover .node-title {
+    color: var(--nexus-neon);
+}
+
+.locked .node-title {
+    color: rgba(255, 255, 255, 0.4);
+}
+
+.node-desc {
+    margin: 0;
+    font-size: 0.8rem;
+    line-height: 1.4;
+    color: rgba(255, 255, 255, 0.5);
+}
+
+.locked .node-desc {
+    color: rgba(255, 255, 255, 0.3);
+}
+
+.check-icon {
+    color: var(--nexus-neon);
+}
+
+.lock-icon {
+    color: rgba(255, 255, 255, 0.2);
+}
diff --git a/src/NexusReader.UI.Shared/Components/Organisms/ReaderCanvas.razor b/src/NexusReader.UI.Shared/Components/Organisms/ReaderCanvas.razor
index 1646a98..066e336 100644
--- a/src/NexusReader.UI.Shared/Components/Organisms/ReaderCanvas.razor
+++ b/src/NexusReader.UI.Shared/Components/Organisms/ReaderCanvas.razor
@@ -103,7 +103,7 @@
             _isInteractive = true;
             if (ViewModel != null)
             {
-                await Coordinator.ProcessFullPageAsync(GetFullPageContent());
+                await Coordinator.ProcessFullPageAsync(GetFullPageContent(), ebookId: ViewModel.EbookId);
             }
         }
 
@@ -246,7 +246,7 @@
 
             if (_isInteractive)
             {
-                await Coordinator.ProcessFullPageAsync(GetFullPageContent());
+                await Coordinator.ProcessFullPageAsync(GetFullPageContent(), ebookId: ViewModel.EbookId);
             }
         }
         else
diff --git a/src/NexusReader.UI.Shared/Layout/AuthLayout.razor b/src/NexusReader.UI.Shared/Layout/AuthLayout.razor
index 9085127..84599fc 100644
--- a/src/NexusReader.UI.Shared/Layout/AuthLayout.razor
+++ b/src/NexusReader.UI.Shared/Layout/AuthLayout.razor
@@ -4,21 +4,3 @@
     <link rel="stylesheet" href="_content/NexusReader.UI.Shared/css/nexus-auth.css" />
     @Body
 </div>
-
-<style>
-    .nexus-auth-shell {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100vw;
-        height: 100vh;
-        background-color: #121418 !important;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        z-index: 99999;
-        margin: 0;
-        padding: 0;
-        overflow: hidden;
-    }
-</style>
diff --git a/src/NexusReader.UI.Shared/Layout/AuthLayout.razor.css b/src/NexusReader.UI.Shared/Layout/AuthLayout.razor.css
new file mode 100644
index 0000000..dbc4235
--- /dev/null
+++ b/src/NexusReader.UI.Shared/Layout/AuthLayout.razor.css
@@ -0,0 +1,15 @@
+.nexus-auth-shell {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background: radial-gradient(circle at center, #1b202e 0%, #0f1115 100%) !important;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 99999;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+}
diff --git a/src/NexusReader.UI.Shared/Pages/Account/Profile.razor b/src/NexusReader.UI.Shared/Pages/Account/Profile.razor
index 0b21a66..6511897 100644
--- a/src/NexusReader.UI.Shared/Pages/Account/Profile.razor
+++ b/src/NexusReader.UI.Shared/Pages/Account/Profile.razor
@@ -89,7 +89,7 @@
                             <span class="tenant-tag">Node: @_profile.TenantId.ToString().ToUpper()</span>
                         </div>
                         <div class="profile-actions">
-                            <button class="btn-nexus secondary" @onclick="HandleUpgrade">Zarządzaj Subskrypcją</button>
+                            <button class="btn-nexus btn-nexus-secondary" @onclick="HandleUpgrade">Zarządzaj Subskrypcją</button>
                             <button class="btn-nexus logout" @onclick="HandleLogout">
                                 <NexusIcon Name="log-out" Size="18" />
                                 Wyloguj
diff --git a/src/NexusReader.UI.Shared/Pages/Account/Profile.razor.css b/src/NexusReader.UI.Shared/Pages/Account/Profile.razor.css
index 2cec44a..935fc0c 100644
--- a/src/NexusReader.UI.Shared/Pages/Account/Profile.razor.css
+++ b/src/NexusReader.UI.Shared/Pages/Account/Profile.razor.css
@@ -119,23 +119,10 @@
 }
 
 .glass-panel {
-    background: rgba(20, 20, 20, 0.8); /* Fallback */
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    border-radius: 24px;
     padding: 32px;
-    transition: all 0.3s ease;
-}
-
-@supports (backdrop-filter: blur(12px)) {
-    .glass-panel {
-        background: rgba(255, 255, 255, 0.03);
-        backdrop-filter: blur(12px);
-        -webkit-backdrop-filter: blur(12px);
-    }
 }
 
 .glass-panel:hover {
-    background: rgba(255, 255, 255, 0.05);
     border-color: rgba(0, 255, 153, 0.2);
     transform: translateY(-4px);
 }
@@ -289,38 +276,21 @@
     gap: 16px;
 }
 
-.btn-nexus {
+.profile-actions .btn-nexus {
     padding: 12px 24px;
-    border-radius: 12px;
     font-size: 0.9rem;
-    font-weight: 700;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    border: none;
 }
 
-.btn-nexus.secondary {
-    background: rgba(255, 255, 255, 0.05);
-    color: #fff;
-    border: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.btn-nexus.secondary:hover {
-    background: rgba(255, 255, 255, 0.1);
-}
-
-.btn-nexus.logout {
+.profile-actions .btn-nexus.logout {
     background: rgba(255, 71, 87, 0.1);
     color: #ff4757;
     border: 1px solid rgba(255, 71, 87, 0.2);
 }
 
-.btn-nexus.logout:hover {
+.profile-actions .btn-nexus.logout:hover {
     background: #ff4757;
     color: #fff;
+    box-shadow: 0 4px 15px rgba(255, 71, 87, 0.4);
 }
 
 /* Decorations */
diff --git a/src/NexusReader.UI.Shared/Pages/ConceptsDashboard.razor b/src/NexusReader.UI.Shared/Pages/ConceptsDashboard.razor
new file mode 100644
index 0000000..e4ae704
--- /dev/null
+++ b/src/NexusReader.UI.Shared/Pages/ConceptsDashboard.razor
@@ -0,0 +1,304 @@
+@page "/book/{BookId:guid}/concepts"
+@page "/concepts-map"
+@using Microsoft.AspNetCore.Authorization
+@using NexusReader.UI.Shared.Components.Atoms
+@using NexusReader.UI.Shared.Components.Organisms
+@using NexusReader.UI.Shared.Services
+@using NexusReader.Application.Queries.Graph
+@using NexusReader.Application.Queries.Concepts
+@using System.Net.Http.Json
+@using NexusReader.Application.Abstractions.Services
+@using NexusReader.Application.Utilities
+@inject IConceptsMapService ConceptsMapService
+@inject NavigationManager NavigationManager
+@inject IIdentityService IdentityService
+@inject ISyncService SyncService
+@attribute [Authorize]
+@implements IAsyncDisposable
+
+<PageTitle>Mapa Pojęć | Nexus Reader</PageTitle>
+
+<div class="concepts-dashboard-container">
+    @if (_isLoading)
+    {
+        <div class="loading-state glass-panel">
+            <div class="preloader-robot">
+                <NexusIcon Name="robot" Size="64" Class="neon-pulse" />
+                <div class="scan-line"></div>
+            </div>
+            <p class="loading-text">Inicjalizowanie mapy pojęć...</p>
+        </div>
+    }
+    else if (!string.IsNullOrEmpty(_errorMessage))
+    {
+        <div class="error-state glass-panel">
+            <NexusIcon Name="alert-triangle" Size="48" Class="error-icon" />
+            <h3>Wystąpił Błąd</h3>
+            <p>@_errorMessage</p>
+            <button class="btn-nexus btn-nexus-secondary" @onclick="LoadDataAsync">Spróbuj ponownie</button>
+        </div>
+    }
+    else if (!BookId.HasValue || BookId.Value == Guid.Empty || Nodes == null || !Nodes.Any())
+    {
+        <div class="empty-dashboard-state glass-panel">
+            <NexusIcon Name="book-open" Size="64" Class="dim-icon" />
+            <h2>Brak Aktywnych Książek</h2>
+            <p>Nie wybrano żadnej książki lub ta książka nie ma jeszcze wygenerowanej mapy pojęć przez Nexus AI.</p>
+            <a href="/library" class="btn-nexus btn-nexus-primary">Przejdź do Biblioteki</a>
+        </div>
+    }
+    else
+    {
+        <header class="dashboard-header">
+            <div class="header-back">
+                <button class="btn-nexus btn-nexus-secondary btn-back" @onclick="GoBackToLibrary">
+                    <NexusIcon Name="arrow-left" Size="16" />
+                    <span>Biblioteka</span>
+                </button>
+            </div>
+            <div class="header-title">
+                <h1>Mapa Pojęć</h1>
+                <span class="subtitle">Interaktywna ścieżka rozwoju Twoich postępów nauki</span>
+            </div>
+            <div class="header-actions">
+                <button class="btn-nexus btn-nexus-primary btn-action" @onclick="GoToReader">
+                    <span>Otwórz Czytnik</span>
+                    <NexusIcon Name="book-open" Size="16" />
+                </button>
+            </div>
+        </header>
+
+        <div class="concepts-dashboard">
+            <!-- Left Pane: Interactive Skill Tree -->
+            <section class="left-pane glass-panel">
+                <div class="pane-header">
+                    <h3><NexusIcon Name="map" Size="18" /> Ścieżka Rozwoju Wiedzy</h3>
+                </div>
+                <div class="pane-content">
+                    <ConceptsMap Nodes="Nodes" 
+                                 LastReadBlockId="LastReadBlockId" 
+                                 SelectedNode="SelectedNode" 
+                                 OnNodeSelected="HandleNodeSelected" />
+                </div>
+            </section>
+
+            <!-- Right Pane: Reactive Deep-Dive Workspace -->
+            <section class="right-pane glass-panel">
+                @if (SelectedNode == null)
+                {
+                    <div class="workspace-empty">
+                        <div class="empty-glowing-brain">
+                            <NexusIcon Name="cpu" Size="48" Class="neon-pulse" />
+                        </div>
+                        <h4>Wybierz węzeł na mapie</h4>
+                        <p>Kliknij dowolne pojęcie z lewego panelu, aby uruchomić głęboką analizę i prześledzić szczegóły wygenerowane przez sztuczną inteligencję.</p>
+                    </div>
+                }
+                else
+                {
+                    var isSelectedNodeUnlocked = IsUnlocked(SelectedNode.Id);
+                    
+                    <div class="workspace-content">
+                        <div class="workspace-header">
+                            <div class="node-meta">
+                                <span class="node-id">@SelectedNode.Id.ToUpper()</span>
+                                @if (isSelectedNodeUnlocked)
+                                {
+                                    <span class="badge badge-unlocked">
+                                        <NexusIcon Name="check" Size="12" /> Odblokowane
+                                    </span>
+                                }
+                                else
+                                {
+                                    <span class="badge badge-locked">
+                                        <NexusIcon Name="lock" Size="12" /> Zablokowane
+                                    </span>
+                                }
+                            </div>
+                            <h2 class="workspace-title">@SelectedNode.Label</h2>
+                        </div>
+
+                        <div class="workspace-body scrollable-content">
+                            @if (!isSelectedNodeUnlocked)
+                            {
+                                <div class="locked-warning">
+                                    <NexusIcon Name="lock" Size="20" Class="lock-warning-icon" />
+                                    <div>
+                                        <strong>Ten etap jest zablokowany</strong>
+                                        <p>Kontynuuj czytanie książki, aby odblokować to pojęcie. Po przeczytaniu rozdziału, postęp zsynchronizuje się automatycznie.</p>
+                                    </div>
+                                </div>
+                            }
+
+                            <div class="metadata-section">
+                                <h4><NexusIcon Name="info" Size="14" /> Opis Pojęcia</h4>
+                                <p class="section-text">@SelectedNode.Description</p>
+                            </div>
+
+                            <div class="metadata-section">
+                                <h4><NexusIcon Name="file-text" Size="14" /> Podsumowanie AI</h4>
+                                <div class="summary-box">
+                                    <p class="section-text">@SelectedNode.Summary</p>
+                                </div>
+                            </div>
+
+                            @if (SelectedNode.KeyTerms != null && SelectedNode.KeyTerms.Any())
+                            {
+                                <div class="metadata-section">
+                                    <h4><NexusIcon Name="list" Size="14" /> Kluczowe Terminy</h4>
+                                    <div class="key-terms-grid">
+                                        @foreach (var term in SelectedNode.KeyTerms)
+                                        {
+                                            <span class="term-pill">@term</span>
+                                        }
+                                    </div>
+                                </div>
+                            }
+                        </div>
+
+                        <div class="workspace-footer">
+                            <button class="btn-nexus btn-nexus-primary w-100" @onclick="GoToSelectedChapter">
+                                <NexusIcon Name="book-open" Size="16" />
+                                <span>Czytaj ten rozdział</span>
+                            </button>
+                        </div>
+                    </div>
+                }
+            </section>
+        </div>
+    }
+</div>
+
+@code {
+    [Parameter] public Guid? BookId { get; set; }
+
+    private List<GraphNodeDto> Nodes { get; set; } = new();
+    private string LastReadBlockId { get; set; } = string.Empty;
+    private GraphNodeDto? SelectedNode { get; set; }
+    private bool _isLoading = true;
+    private string _errorMessage = string.Empty;
+
+    protected override async Task OnInitializedAsync()
+    {
+        IdentityService.OnStateInvalidated += HandleStateInvalidatedAsync;
+        await SyncService.InitializeAsync();
+        SyncService.OnProgressReceived += HandleProgressReceivedAsync;
+        await LoadDataAsync();
+    }
+
+    private async Task LoadDataAsync()
+    {
+        _isLoading = true;
+        _errorMessage = string.Empty;
+        StateHasChanged();
+
+        try
+        {
+            if (!BookId.HasValue || BookId.Value == Guid.Empty)
+            {
+                var profileResult = await IdentityService.GetProfileAsync();
+                if (profileResult.IsSuccess && profileResult.Value.LastReadBook != null)
+                {
+                    BookId = profileResult.Value.LastReadBook.Id;
+                }
+            }
+
+            if (BookId.HasValue && BookId.Value != Guid.Empty)
+            {
+                var result = await ConceptsMapService.GetConceptsMapAsync(BookId.Value);
+                if (result.IsSuccess)
+                {
+                    Nodes = result.Value.Nodes;
+                    LastReadBlockId = result.Value.LastReadBlockId;
+
+                    if (Nodes.Any())
+                    {
+                        SelectedNode = Nodes.FirstOrDefault(n => IsUnlocked(n.Id)) ?? Nodes.First();
+                    }
+                }
+                else
+                {
+                    _errorMessage = result.Errors.FirstOrDefault()?.Message ?? "Brak odpowiedzi od serwera.";
+                }
+            }
+        }
+        catch (Exception ex)
+        {
+            _errorMessage = $"Błąd podczas pobierania danych: {ex.Message}";
+        }
+        finally
+        {
+            _isLoading = false;
+            StateHasChanged();
+        }
+    }
+
+    private bool IsUnlocked(string nodeId)
+    {
+        if (string.IsNullOrEmpty(nodeId)) return false;
+        var nodeSeq = SegmentIdParser.Parse(nodeId);
+        
+        var minNodeSeq = Nodes.Any() ? Nodes.Min(n => SegmentIdParser.Parse(n.Id)) : 0;
+        if (nodeSeq == minNodeSeq) return true;
+
+        if (string.IsNullOrEmpty(LastReadBlockId)) return false;
+
+        var progressSeq = SegmentIdParser.Parse(LastReadBlockId);
+        return nodeSeq <= progressSeq;
+    }
+
+
+
+    private void HandleNodeSelected(GraphNodeDto node)
+    {
+        SelectedNode = node;
+        StateHasChanged();
+    }
+
+    private void GoBackToLibrary()
+    {
+        NavigationManager.NavigateTo("/library");
+    }
+
+    private void GoToReader()
+    {
+        if (BookId.HasValue)
+        {
+            NavigationManager.NavigateTo($"/reader/{BookId.Value}");
+        }
+    }
+
+    private void GoToSelectedChapter()
+    {
+        if (BookId.HasValue && SelectedNode != null)
+        {
+            var chapterIndex = SegmentIdParser.Parse(SelectedNode.Id);
+            NavigationManager.NavigateTo($"/reader/{BookId.Value}?chapter={chapterIndex}");
+        }
+    }
+
+    private async Task HandleStateInvalidatedAsync()
+    {
+        await InvokeAsync(async () =>
+        {
+            await LoadDataAsync();
+        });
+    }
+
+    private async Task HandleProgressReceivedAsync(string pageId, DateTime timestamp)
+    {
+        await InvokeAsync(() =>
+        {
+            LastReadBlockId = pageId;
+            StateHasChanged();
+            return Task.CompletedTask;
+        });
+    }
+
+    public ValueTask DisposeAsync()
+    {
+        IdentityService.OnStateInvalidated -= HandleStateInvalidatedAsync;
+        SyncService.OnProgressReceived -= HandleProgressReceivedAsync;
+        return ValueTask.CompletedTask;
+    }
+}
diff --git a/src/NexusReader.UI.Shared/Pages/ConceptsDashboard.razor.css b/src/NexusReader.UI.Shared/Pages/ConceptsDashboard.razor.css
new file mode 100644
index 0000000..53edb26
--- /dev/null
+++ b/src/NexusReader.UI.Shared/Pages/ConceptsDashboard.razor.css
@@ -0,0 +1,405 @@
+.concepts-dashboard-container {
+    width: 100%;
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 2rem 1.5rem;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    min-height: calc(100vh - 80px);
+}
+
+/* Header Section */
+.dashboard-header {
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    align-items: center;
+    gap: 2rem;
+    padding: 1.25rem 2rem;
+    background: rgba(20, 20, 20, 0.35);
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    border-radius: 16px;
+    backdrop-filter: blur(12px);
+    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
+}
+
+.header-back .btn-back {
+    padding: 0.5rem 1.25rem;
+    font-size: 0.85rem;
+}
+
+.header-back .btn-back:hover {
+    border-color: var(--nexus-neon);
+    color: var(--nexus-neon);
+    background: var(--nexus-primary-glow);
+    box-shadow: 0 0 10px var(--nexus-primary-glow);
+}
+
+.header-title h1 {
+    margin: 0;
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: #fff;
+}
+
+.header-title .subtitle {
+    font-size: 0.85rem;
+    color: rgba(255, 255, 255, 0.4);
+}
+
+.header-actions .btn-action {
+    padding: 0.6rem 1.4rem;
+    font-size: 0.85rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+.header-actions .btn-action:hover {
+    box-shadow: 0 0 20px var(--nexus-primary-glow);
+}
+
+/* Grid Layout */
+.concepts-dashboard {
+    display: grid;
+    grid-template-columns: 1.1fr 1fr;
+    gap: 1.5rem;
+    height: 72vh;
+}
+
+/* Glass Panels */
+.glass-panel {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    padding: 0;
+}
+
+.pane-header {
+    padding: 1.25rem 1.5rem;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.pane-header h3 {
+    margin: 0;
+    font-size: 1rem;
+    font-weight: 600;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.pane-content {
+    flex-grow: 1;
+    overflow: hidden;
+}
+
+/* Loading, Error and Empty States */
+.loading-state, .error-state, .empty-dashboard-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 4rem 2rem;
+    text-align: center;
+    margin: auto;
+    width: 100%;
+    max-width: 480px;
+    box-sizing: border-box;
+}
+
+.preloader-robot {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 1.5rem;
+}
+
+.neon-pulse {
+    color: var(--nexus-neon);
+    filter: drop-shadow(0 0 10px var(--nexus-neon));
+    animation: robot-pulse 2s infinite ease-in-out;
+}
+
+@keyframes robot-pulse {
+    0% { transform: scale(1); filter: drop-shadow(0 0 10px var(--nexus-neon)); }
+    50% { transform: scale(1.08); filter: drop-shadow(0 0 25px var(--nexus-neon)); }
+    100% { transform: scale(1); filter: drop-shadow(0 0 10px var(--nexus-neon)); }
+}
+
+.scan-line {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 2px;
+    background: var(--nexus-neon);
+    box-shadow: 0 0 15px var(--nexus-neon);
+    animation: scan 2s infinite linear;
+    opacity: 0.8;
+}
+
+@keyframes scan {
+    0% { top: 0; }
+    50% { top: 100%; }
+    100% { top: 0; }
+}
+
+.loading-text {
+    font-size: 0.95rem;
+    color: rgba(255, 255, 255, 0.7);
+    margin-top: 1rem;
+    letter-spacing: 0.05em;
+}
+
+.error-icon, .dim-icon {
+    margin-bottom: 1.5rem;
+}
+
+.error-icon {
+    color: #ff4a4a;
+    filter: drop-shadow(0 0 8px rgba(255, 74, 74, 0.4));
+}
+
+.dim-icon {
+    color: rgba(255, 255, 255, 0.15);
+}
+
+.empty-dashboard-state h2, .error-state h3 {
+    color: #fff;
+    margin: 0 0 0.75rem 0;
+    font-weight: 600;
+}
+
+.empty-dashboard-state p, .error-state p {
+    color: rgba(255, 255, 255, 0.45);
+    font-size: 0.88rem;
+    line-height: 1.5;
+    margin: 0 0 2rem 0;
+}
+
+/* Workspace Panels */
+.workspace-empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    flex-grow: 1;
+    padding: 3rem;
+    text-align: center;
+    color: rgba(255, 255, 255, 0.4);
+}
+
+.empty-glowing-brain {
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    background: rgba(0, 255, 153, 0.04);
+    border: 1px solid rgba(0, 255, 153, 0.15);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 1.5rem;
+    box-shadow: 0 0 20px var(--nexus-primary-glow);
+}
+
+.workspace-empty h4 {
+    margin: 0 0 0.75rem 0;
+    color: #fff;
+    font-size: 1.1rem;
+    font-weight: 600;
+}
+
+.workspace-empty p {
+    font-size: 0.85rem;
+    line-height: 1.5;
+    max-width: 320px;
+    margin: 0;
+}
+
+.workspace-content {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+.workspace-header {
+    padding: 1.5rem;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.node-meta {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    margin-bottom: 0.5rem;
+}
+
+.node-id {
+    font-family: var(--nexus-font-sans);
+    font-size: 0.75rem;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    color: var(--nexus-neon);
+}
+
+.badge {
+    font-size: 0.7rem;
+    padding: 0.2rem 0.55rem;
+    border-radius: 12px;
+    font-weight: 500;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+}
+
+.badge-unlocked {
+    background: rgba(0, 255, 153, 0.08);
+    color: var(--nexus-neon);
+    border: 1px solid rgba(0, 255, 153, 0.2);
+}
+
+.badge-locked {
+    background: rgba(255, 255, 255, 0.05);
+    color: rgba(255, 255, 255, 0.4);
+    border: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.workspace-title {
+    margin: 0;
+    font-size: 1.4rem;
+    font-weight: 700;
+    color: #fff;
+}
+
+.workspace-body {
+    flex-grow: 1;
+    overflow-y: auto;
+    padding: 1.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+}
+
+/* Scrollbar customization for workspace body */
+.workspace-body::-webkit-scrollbar {
+    width: 6px;
+}
+.workspace-body::-webkit-scrollbar-track {
+    background: transparent;
+}
+.workspace-body::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.08);
+    border-radius: 3px;
+}
+.workspace-body::-webkit-scrollbar-thumb:hover {
+    background: var(--nexus-neon);
+}
+
+.locked-warning {
+    display: flex;
+    flex-direction: row;
+    gap: 1rem;
+    background: rgba(255, 171, 0, 0.04);
+    border: 1px solid rgba(255, 171, 0, 0.15);
+    border-radius: 8px;
+    padding: 1rem;
+    color: rgba(255, 255, 255, 0.85);
+}
+
+.lock-warning-icon {
+    color: #ffab00;
+    flex-shrink: 0;
+    margin-top: 0.1rem;
+}
+
+.locked-warning strong {
+    font-size: 0.85rem;
+    color: #ffab00;
+    display: block;
+    margin-bottom: 0.25rem;
+}
+
+.locked-warning p {
+    margin: 0;
+    font-size: 0.8rem;
+    line-height: 1.4;
+    color: rgba(255, 255, 255, 0.55);
+}
+
+.metadata-section h4 {
+    margin: 0 0 0.5rem 0;
+    font-size: 0.85rem;
+    font-weight: 600;
+    color: #aaa;
+    display: flex;
+    align-items: center;
+    gap: 0.35rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+.section-text {
+    margin: 0;
+    font-size: 0.88rem;
+    line-height: 1.6;
+    color: rgba(255, 255, 255, 0.7);
+}
+
+.summary-box {
+    background: rgba(255, 255, 255, 0.02);
+    border-left: 3px solid var(--nexus-neon);
+    border-radius: 0 8px 8px 0;
+    padding: 1rem;
+    margin-top: 0.25rem;
+}
+
+.key-terms-grid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    margin-top: 0.5rem;
+}
+
+.term-pill {
+    font-size: 0.75rem;
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    color: rgba(255, 255, 255, 0.6);
+    padding: 0.3rem 0.75rem;
+    border-radius: 20px;
+    font-weight: 500;
+    transition: all 0.2s ease;
+}
+
+.term-pill:hover {
+    border-color: rgba(0, 255, 153, 0.2);
+    color: var(--nexus-neon);
+    background: rgba(0, 255, 153, 0.03);
+}
+
+.workspace-footer {
+    padding: 1.25rem 1.5rem;
+    border-top: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+@media (max-width: 1024px) {
+    .concepts-dashboard {
+        grid-template-columns: 1fr;
+        height: auto;
+    }
+    .concepts-dashboard-container {
+        padding: 1rem;
+    }
+    .dashboard-header {
+        grid-template-columns: 1fr;
+        text-align: center;
+        gap: 1rem;
+    }
+    .header-back, .header-actions {
+        display: flex;
+        justify-content: center;
+    }
+}
diff --git a/src/NexusReader.UI.Shared/Pages/Intelligence.razor b/src/NexusReader.UI.Shared/Pages/Intelligence.razor
index c8ea621..13404ff 100644
--- a/src/NexusReader.UI.Shared/Pages/Intelligence.razor
+++ b/src/NexusReader.UI.Shared/Pages/Intelligence.razor
@@ -120,7 +120,7 @@
                            @bind:event="oninput"
                            @onkeyup="HandleKeyUp"
                            disabled="@_isLoading" />
-                    <button class="btn-nexus primary search-btn" 
+                    <button class="btn-nexus btn-nexus-primary search-btn" 
                             disabled="@(string.IsNullOrWhiteSpace(_question) || _isLoading)" 
                             @onclick="AskQuestionAsync">
                         @if (_isLoading)
@@ -138,412 +138,6 @@
     </div>
 </div>
 
-<style>
-    .intelligence-page {
-        padding: 2rem;
-        max-width: 1100px;
-        margin: 0 auto;
-        height: calc(100vh - 100px);
-        display: flex;
-        flex-direction: column;
-        animation: fadeIn 0.5s ease-out;
-    }
-
-    .intelligence-header {
-        margin-bottom: 1.5rem;
-        flex-shrink: 0;
-    }
-
-    .neon-glow-text {
-        font-family: var(--nexus-font-sans, 'Outfit', sans-serif);
-        font-size: 2.5rem;
-        font-weight: 800;
-        margin: 0 0 0.25rem 0;
-        background: linear-gradient(135deg, #00ff99 0%, #06b6d4 100%);
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-        filter: drop-shadow(0 0 8px rgba(6, 182, 212, 0.2));
-    }
-
-    .subtitle {
-        font-size: 0.95rem;
-        color: rgba(255, 255, 255, 0.6);
-        margin: 0;
-    }
-
-    .intelligence-layout {
-        flex-grow: 1;
-        display: flex;
-        flex-direction: column;
-        border-radius: 20px;
-        background: rgba(10, 16, 26, 0.45);
-        border: 1px solid rgba(6, 182, 212, 0.15);
-        backdrop-filter: blur(16px);
-        -webkit-backdrop-filter: blur(16px);
-        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), 0 0 20px rgba(6, 182, 212, 0.05);
-        overflow: hidden;
-    }
-
-    .chat-thread-container {
-        flex-grow: 1;
-        overflow-y: auto;
-        padding: 2rem;
-        display: flex;
-        flex-direction: column;
-    }
-
-    /* Custom Scrollbars */
-    .chat-thread-container::-webkit-scrollbar {
-        width: 6px;
-    }
-    .chat-thread-container::-webkit-scrollbar-track {
-        background: rgba(255, 255, 255, 0.01);
-    }
-    .chat-thread-container::-webkit-scrollbar-thumb {
-        background: rgba(6, 182, 212, 0.2);
-        border-radius: 4px;
-    }
-    .chat-thread-container::-webkit-scrollbar-thumb:hover {
-        background: rgba(6, 182, 212, 0.4);
-    }
-
-    .chat-bubbles-scroll {
-        display: flex;
-        flex-direction: column;
-        gap: 1.5rem;
-        width: 100%;
-    }
-
-    .message-row {
-        display: flex;
-        gap: 1rem;
-        width: 100%;
-        max-width: 85%;
-        animation: bubble-fade-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
-    }
-
-    .user-row {
-        align-self: flex-end;
-        flex-direction: row-reverse;
-    }
-
-    .ai-row {
-        align-self: flex-start;
-    }
-
-    .message-avatar {
-        width: 38px;
-        height: 38px;
-        border-radius: 50%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-size: 1.1rem;
-        flex-shrink: 0;
-    }
-
-    .user-row .message-avatar {
-        background: linear-gradient(135deg, #7c3aed 0%, #4c1d95 100%);
-        color: #f5f3ff;
-        border: 1px solid rgba(139, 92, 246, 0.4);
-        box-shadow: 0 0 10px rgba(139, 92, 246, 0.25);
-    }
-
-    .ai-row .message-avatar {
-        background: linear-gradient(135deg, #0f766e 0%, #115e59 100%);
-        color: #ccfbf1;
-        border: 1px solid rgba(13, 148, 136, 0.4);
-        box-shadow: 0 0 10px rgba(13, 148, 136, 0.25);
-    }
-
-    .message-bubble {
-        padding: 1.25rem 1.5rem;
-        border-radius: 16px;
-        position: relative;
-        line-height: 1.6;
-        font-size: 0.975rem;
-    }
-
-    .user-bubble {
-        background: rgba(43, 24, 80, 0.35);
-        border: 1px solid rgba(139, 92, 246, 0.25);
-        color: #f3e8ff;
-        border-top-right-radius: 4px;
-        box-shadow: 0 4px 15px rgba(139, 92, 246, 0.05);
-    }
-
-    .ai-bubble {
-        background: rgba(10, 20, 30, 0.55);
-        border: 1px solid rgba(6, 182, 212, 0.2);
-        color: #e2e8f0;
-        border-top-left-radius: 4px;
-        box-shadow: 0 4px 15px rgba(6, 182, 212, 0.05);
-        flex-grow: 1;
-    }
-
-    .message-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-bottom: 0.5rem;
-        font-size: 0.75rem;
-        opacity: 0.6;
-    }
-
-    .sender-name {
-        font-weight: 700;
-        text-transform: uppercase;
-        letter-spacing: 0.5px;
-    }
-
-    .message-time {
-        font-family: monospace;
-    }
-
-    .message-content {
-        word-break: break-word;
-    }
-
-    /* Paragraph Spacing & Markdown */
-    .message-content p {
-        margin: 0 0 1rem 0;
-    }
-    .message-content p:last-child {
-        margin-bottom: 0;
-    }
-
-    .nexus-code-block {
-        background: rgba(0, 0, 0, 0.4) !important;
-        border: 1px solid rgba(255, 255, 255, 0.08) !important;
-        border-radius: 8px;
-        padding: 1rem;
-        margin: 1rem 0;
-        overflow-x: auto;
-        font-family: 'Fira Code', monospace;
-        font-size: 0.85rem;
-        color: #a7f3d0;
-    }
-
-    .nexus-inline-code {
-        background: rgba(255, 255, 255, 0.06);
-        border: 1px solid rgba(255, 255, 255, 0.1);
-        border-radius: 4px;
-        padding: 0.15rem 0.35rem;
-        font-family: monospace;
-        font-size: 0.9em;
-        color: #f472b6; /* Light pink for inline code */
-    }
-
-    /* Pending State Bubble */
-    .pending-bubble {
-        border-color: rgba(6, 182, 212, 0.4);
-        box-shadow: 0 0 15px rgba(6, 182, 212, 0.1);
-    }
-
-    .typing-indicator {
-        display: flex;
-        gap: 4px;
-        align-items: center;
-        margin-bottom: 0.5rem;
-    }
-
-    .typing-indicator span {
-        width: 8px;
-        height: 8px;
-        background: #06b6d4;
-        border-radius: 50%;
-        display: inline-block;
-        animation: typing-bounce 1.4s infinite ease-in-out both;
-    }
-
-    .typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
-    .typing-indicator span:nth-child(2) { animation-delay: -0.16s; }
-
-    .loading-label {
-        font-size: 0.85rem;
-        color: rgba(255, 255, 255, 0.5);
-        font-style: italic;
-    }
-
-    /* Input Controls */
-    .chat-input-controls {
-        padding: 1.5rem 2rem 2rem 2rem;
-        background: rgba(0, 0, 0, 0.2);
-        border-top: 1px solid rgba(255, 255, 255, 0.05);
-        flex-shrink: 0;
-    }
-
-    .input-panel-wrapper {
-        display: flex;
-        flex-direction: column;
-        gap: 0.75rem;
-    }
-
-    .scope-bar {
-        display: flex;
-        align-items: center;
-    }
-
-    .scope-selector {
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-        font-size: 0.85rem;
-        color: rgba(255, 255, 255, 0.5);
-    }
-
-    .nexus-select {
-        background: rgba(255, 255, 255, 0.02);
-        border: 1px solid rgba(255, 255, 255, 0.08);
-        color: #ffffff;
-        padding: 0.35rem 2rem 0.35rem 0.75rem;
-        border-radius: 8px;
-        outline: none;
-        cursor: pointer;
-        font-size: 0.85rem;
-        transition: all 0.3s ease;
-        appearance: none;
-        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
-        background-repeat: no-repeat;
-        background-position: right 0.75rem center;
-        background-size: 0.85em;
-    }
-
-    .nexus-select:focus {
-        border-color: #06b6d4;
-        box-shadow: 0 0 8px rgba(6, 182, 212, 0.2);
-    }
-
-    .input-field-group {
-        display: flex;
-        background: rgba(255, 255, 255, 0.02);
-        border: 1px solid rgba(255, 255, 255, 0.08);
-        border-radius: 12px;
-        padding: 0.35rem;
-        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    }
-
-    .input-field-group:focus-within {
-        border-color: #06b6d4;
-        background: rgba(6, 182, 212, 0.01);
-        box-shadow: 0 0 15px rgba(6, 182, 212, 0.15);
-    }
-
-    .nexus-input {
-        flex-grow: 1;
-        background: transparent;
-        border: none;
-        color: #ffffff;
-        font-size: 1rem;
-        outline: none;
-        padding: 0.5rem 1rem;
-    }
-
-    .nexus-input::placeholder {
-        color: rgba(255, 255, 255, 0.35);
-    }
-
-    .btn-nexus {
-        padding: 0.75rem 1.25rem;
-        border-radius: 10px;
-        font-size: 0.95rem;
-        font-weight: 600;
-        cursor: pointer;
-        transition: all 0.2s;
-        border: none;
-    }
-
-    .btn-nexus.primary {
-        background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
-        color: #ffffff;
-        box-shadow: 0 4px 10px rgba(6, 182, 212, 0.25);
-    }
-
-    .btn-nexus:hover:not(:disabled) {
-        transform: translateY(-1px);
-        filter: brightness(1.1);
-        box-shadow: 0 4px 15px rgba(6, 182, 212, 0.4);
-    }
-
-    .btn-nexus:disabled {
-        background: rgba(255, 255, 255, 0.05);
-        color: rgba(255, 255, 255, 0.25);
-        box-shadow: none;
-        cursor: not-allowed;
-    }
-
-    .search-btn {
-        width: 46px;
-        height: 46px;
-        padding: 0 !important;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border-radius: 10px;
-    }
-
-    .welcome-state {
-        text-align: center;
-        color: rgba(255, 255, 255, 0.5);
-        padding: 4rem 2rem;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        height: 100%;
-    }
-
-    .welcome-icon {
-        color: rgba(6, 182, 212, 0.4);
-        margin-bottom: 1.5rem;
-        filter: drop-shadow(0 0 10px rgba(6, 182, 212, 0.2));
-        animation: pulse 2.5s infinite alternate;
-    }
-
-    .welcome-state h3 {
-        color: #ffffff;
-        font-size: 1.5rem;
-        margin: 0 0 0.75rem 0;
-    }
-
-    .welcome-state p {
-        max-width: 550px;
-        margin: 0;
-        font-size: 0.95rem;
-        line-height: 1.6;
-    }
-
-    .btn-spinner {
-        width: 20px;
-        height: 20px;
-        border: 2px solid rgba(255, 255, 255, 0.1);
-        border-radius: 50%;
-        border-top-color: #ffffff;
-        animation: spin 0.8s linear infinite;
-    }
-
-    /* Keyframe Animations */
-    @@keyframes bubble-fade-in {
-        0% { opacity: 0; transform: translateY(10px) scale(0.98); }
-        100% { opacity: 1; transform: translateY(0) scale(1); }
-    }
-
-    @@keyframes typing-bounce {
-        0%, 100% { transform: translateY(0); }
-        50% { transform: translateY(-4px); }
-    }
-
-    @@keyframes pulse {
-        0% { transform: scale(0.96); opacity: 0.8; }
-        100% { transform: scale(1.04); opacity: 1; }
-    }
-
-    @@keyframes spin {
-        0% { transform: rotate(0deg); }
-        100% { transform: rotate(360deg); }
-    }
-</style>
-
 @code {
     private string _question = string.Empty;
     private string _selectedBookId = string.Empty;
diff --git a/src/NexusReader.UI.Shared/Pages/Intelligence.razor.css b/src/NexusReader.UI.Shared/Pages/Intelligence.razor.css
new file mode 100644
index 0000000..0ddaf47
--- /dev/null
+++ b/src/NexusReader.UI.Shared/Pages/Intelligence.razor.css
@@ -0,0 +1,368 @@
+.intelligence-page {
+    padding: 2rem;
+    max-width: 1100px;
+    margin: 0 auto;
+    height: calc(100vh - 100px);
+    display: flex;
+    flex-direction: column;
+    animation: fadeIn 0.5s ease-out;
+}
+
+.intelligence-header {
+    margin-bottom: 1.5rem;
+    flex-shrink: 0;
+}
+
+.neon-glow-text {
+    font-family: var(--nexus-font-sans);
+    font-size: 2.5rem;
+    font-weight: 800;
+    margin: 0 0 0.25rem 0;
+    background: linear-gradient(135deg, var(--nexus-neon) 0%, rgba(0, 255, 153, 0.7) 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    filter: drop-shadow(0 0 8px rgba(0, 255, 153, 0.2));
+}
+
+.subtitle {
+    font-size: 0.95rem;
+    color: rgba(255, 255, 255, 0.6);
+    margin: 0;
+}
+
+.intelligence-layout {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    padding: 0;
+}
+
+.chat-thread-container {
+    flex-grow: 1;
+    overflow-y: auto;
+    padding: 2rem;
+    display: flex;
+    flex-direction: column;
+}
+
+/* Custom Scrollbars */
+.chat-thread-container::-webkit-scrollbar {
+    width: 6px;
+}
+.chat-thread-container::-webkit-scrollbar-track {
+    background: rgba(255, 255, 255, 0.01);
+}
+.chat-thread-container::-webkit-scrollbar-thumb {
+    background: rgba(0, 255, 153, 0.2);
+    border-radius: 4px;
+}
+.chat-thread-container::-webkit-scrollbar-thumb:hover {
+    background: rgba(0, 255, 153, 0.4);
+}
+
+.chat-bubbles-scroll {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    width: 100%;
+}
+
+.message-row {
+    display: flex;
+    gap: 1rem;
+    width: 100%;
+    max-width: 85%;
+    animation: bubble-fade-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+.user-row {
+    align-self: flex-end;
+    flex-direction: row-reverse;
+}
+
+.ai-row {
+    align-self: flex-start;
+}
+
+.message-avatar {
+    width: 38px;
+    height: 38px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.1rem;
+    flex-shrink: 0;
+}
+
+.user-row .message-avatar {
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%);
+    color: #ffffff;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
+}
+
+.ai-row .message-avatar {
+    background: linear-gradient(135deg, #005f38 0%, #004024 100%);
+    color: #e6fffa;
+    border: 1px solid rgba(0, 255, 153, 0.4);
+    box-shadow: 0 0 10px rgba(0, 255, 153, 0.25);
+}
+
+.message-bubble {
+    padding: 1.25rem 1.5rem;
+    border-radius: var(--radius-lg);
+    position: relative;
+    line-height: 1.6;
+    font-size: 0.975rem;
+}
+
+.user-bubble {
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    color: #ffffff;
+    border-top-right-radius: 4px;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+}
+
+.ai-bubble {
+    background: rgba(10, 20, 30, 0.55);
+    border: 1px solid rgba(0, 255, 153, 0.2);
+    color: #e2e8f0;
+    border-top-left-radius: 4px;
+    box-shadow: 0 4px 15px rgba(0, 255, 153, 0.05);
+    flex-grow: 1;
+}
+
+.message-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.5rem;
+    font-size: 0.75rem;
+    opacity: 0.6;
+}
+
+.sender-name {
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.message-time {
+    font-family: monospace;
+}
+
+.message-content {
+    word-break: break-word;
+}
+
+/* Paragraph Spacing & Markdown */
+.message-content p {
+    margin: 0 0 1rem 0;
+}
+.message-content p:last-child {
+    margin-bottom: 0;
+}
+
+.nexus-code-block {
+    background: rgba(0, 0, 0, 0.4) !important;
+    border: 1px solid rgba(255, 255, 255, 0.08) !important;
+    border-radius: var(--radius-sm);
+    padding: 1rem;
+    margin: 1rem 0;
+    overflow-x: auto;
+    font-family: 'Fira Code', monospace;
+    font-size: 0.85rem;
+    color: #a7f3d0;
+}
+
+.nexus-inline-code {
+    background: rgba(255, 255, 255, 0.06);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 4px;
+    padding: 0.15rem 0.35rem;
+    font-family: monospace;
+    font-size: 0.9em;
+    color: #f472b6; /* Light pink for inline code */
+}
+
+/* Pending State Bubble */
+.pending-bubble {
+    border-color: rgba(0, 255, 153, 0.4);
+    box-shadow: 0 0 15px rgba(0, 255, 153, 0.1);
+}
+
+.typing-indicator {
+    display: flex;
+    gap: 4px;
+    align-items: center;
+    margin-bottom: 0.5rem;
+}
+
+.typing-indicator span {
+    width: 8px;
+    height: 8px;
+    background: var(--nexus-neon);
+    border-radius: 50%;
+    display: inline-block;
+    animation: typing-bounce 1.4s infinite ease-in-out both;
+}
+
+.typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
+.typing-indicator span:nth-child(2) { animation-delay: -0.16s; }
+
+.loading-label {
+    font-size: 0.85rem;
+    color: rgba(255, 255, 255, 0.5);
+    font-style: italic;
+}
+
+/* Input Controls */
+.chat-input-controls {
+    padding: 1.5rem 2rem 2rem 2rem;
+    background: rgba(0, 0, 0, 0.2);
+    border-top: 1px solid rgba(255, 255, 255, 0.05);
+    flex-shrink: 0;
+}
+
+.input-panel-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+
+.scope-bar {
+    display: flex;
+    align-items: center;
+}
+
+.scope-selector {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.85rem;
+    color: rgba(255, 255, 255, 0.5);
+}
+
+.nexus-select {
+    background: rgba(255, 255, 255, 0.02);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    color: #ffffff;
+    padding: 0.35rem 2rem 0.35rem 0.75rem;
+    border-radius: var(--radius-sm);
+    outline: none;
+    cursor: pointer;
+    font-size: 0.85rem;
+    transition: all 0.3s ease;
+    appearance: none;
+    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
+    background-repeat: no-repeat;
+    background-position: right 0.75rem center;
+    background-size: 0.85em;
+}
+
+.nexus-select:focus {
+    border-color: var(--nexus-neon);
+    box-shadow: 0 0 8px rgba(0, 255, 153, 0.2);
+}
+
+.input-field-group {
+    display: flex;
+    background: rgba(255, 255, 255, 0.02);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: var(--radius-md);
+    padding: 0.35rem;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.input-field-group:focus-within {
+    border-color: var(--nexus-neon);
+    background: rgba(0, 255, 153, 0.01);
+    box-shadow: 0 0 15px rgba(0, 255, 153, 0.15);
+}
+
+.nexus-input {
+    flex-grow: 1;
+    background: transparent;
+    border: none;
+    color: #ffffff;
+    font-size: 1rem;
+    outline: none;
+    padding: 0.5rem 1rem;
+}
+
+.nexus-input::placeholder {
+    color: rgba(255, 255, 255, 0.35);
+}
+
+.search-btn {
+    width: 46px;
+    height: 46px;
+    padding: 0 !important;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.welcome-state {
+    text-align: center;
+    color: rgba(255, 255, 255, 0.5);
+    padding: 4rem 2rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+}
+
+.welcome-icon {
+    color: rgba(0, 255, 153, 0.4);
+    margin-bottom: 1.5rem;
+    filter: drop-shadow(0 0 10px rgba(0, 255, 153, 0.2));
+    animation: pulse 2.5s infinite alternate;
+}
+
+.welcome-state h3 {
+    color: #ffffff;
+    font-size: 1.5rem;
+    margin: 0 0 0.75rem 0;
+}
+
+.welcome-state p {
+    max-width: 550px;
+    margin: 0;
+    font-size: 0.95rem;
+    line-height: 1.6;
+}
+
+.btn-spinner {
+    width: 20px;
+    height: 20px;
+    border: 2px solid rgba(0, 0, 0, 0.1);
+    border-radius: 50%;
+    border-top-color: #000000;
+    animation: spin 0.8s linear infinite;
+}
+
+/* Keyframe Animations */
+@keyframes bubble-fade-in {
+    0% { opacity: 0; transform: translateY(10px) scale(0.98); }
+    100% { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+@keyframes typing-bounce {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-4px); }
+}
+
+@keyframes pulse {
+    0% { transform: scale(0.96); opacity: 0.8; }
+    100% { transform: scale(1.04); opacity: 1; }
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
diff --git a/src/NexusReader.UI.Shared/Pages/Library.razor b/src/NexusReader.UI.Shared/Pages/Library.razor
index 94d2355..6fc6f0e 100644
--- a/src/NexusReader.UI.Shared/Pages/Library.razor
+++ b/src/NexusReader.UI.Shared/Pages/Library.razor
@@ -59,7 +59,7 @@
                 <p>Nie masz jeszcze żadnych książek w swojej kolekcji.</p>
                 <AuthorizeView Roles="Admin, ContentManager">
                     <Authorized>
-                        <button class="btn-nexus primary" @onclick="() => _isModalOpen = true">
+                        <button class="btn-nexus btn-nexus-primary" @onclick="() => _isModalOpen = true">
                             Prześlij pierwszą książkę
                         </button>
                     </Authorized>
@@ -106,403 +106,6 @@
     </div>
 </div>
 
-<style>
-    .library-page {
-        padding: 3rem 2rem;
-        max-width: 1200px;
-        margin: 0 auto;
-        animation: fadeIn 0.6s ease-out;
-    }
-
-    .library-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-bottom: 3rem;
-        flex-wrap: wrap;
-        gap: 1.5rem;
-    }
-
-    .header-title-section h1 {
-        font-family: var(--nexus-font-serif, 'Outfit', 'Georgia', serif);
-        font-size: 2.8rem;
-        font-weight: 700;
-        margin: 0 0 0.5rem 0;
-        background: linear-gradient(135deg, var(--nexus-text, #ffffff) 0%, rgba(var(--nexus-text-rgb, 255, 255, 255), 0.7) 100%);
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-        letter-spacing: -0.5px;
-    }
-
-    .header-title-section .subtitle {
-        font-size: 1rem;
-        color: rgba(255, 255, 255, 0.6);
-        margin: 0;
-    }
-
-    .add-book-trigger {
-        background: linear-gradient(135deg, var(--nexus-primary, #6366f1) 0%, var(--nexus-primary-hover, #4f46e5) 100%) !important;
-        border: none !important;
-        box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4) !important;
-        font-weight: 600 !important;
-        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
-    }
-
-    .add-book-trigger:hover {
-        transform: translateY(-2px) !important;
-        box-shadow: 0 8px 20px rgba(99, 102, 241, 0.6) !important;
-    }
-
-    .btn-icon {
-        margin-right: 0.5rem;
-        font-weight: bold;
-    }
-
-    /* Books Grid */
-    .books-grid, .loading-grid {
-        display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-        gap: 2rem;
-    }
-
-    .book-card {
-        cursor: pointer;
-        display: flex;
-        flex-direction: column;
-        height: 100%;
-        overflow: hidden;
-        border-radius: var(--nexus-radius-lg, 16px);
-        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-        position: relative;
-    }
-
-    .book-card::before {
-        content: '';
-        position: absolute;
-        inset: 0;
-        background: radial-gradient(800px circle at var(--x, 0) var(--y, 0), rgba(255, 255, 255, 0.06), transparent 40%);
-        opacity: 0;
-        transition: opacity 0.5s;
-        pointer-events: none;
-    }
-
-    .book-card:hover {
-        transform: translateY(-8px) scale(1.02);
-        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 2px rgba(255, 255, 255, 0.1) inset;
-        border-color: rgba(255, 255, 255, 0.2);
-    }
-
-    .book-card:hover::before {
-        opacity: 1;
-    }
-
-    .book-cover-container {
-        position: relative;
-        height: 380px;
-        background: rgba(0, 0, 0, 0.2);
-        overflow: hidden;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-    }
-
-    .book-cover {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-        transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
-    }
-
-    .book-card:hover .book-cover {
-        transform: scale(1.08);
-    }
-
-    .cover-overlay {
-        position: absolute;
-        inset: 0;
-        background: rgba(15, 23, 42, 0.6);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        opacity: 0;
-        transition: opacity 0.3s ease;
-        backdrop-filter: blur(4px);
-    }
-
-    .book-card:hover .cover-overlay {
-        opacity: 1;
-    }
-
-    .read-action {
-        color: #ffffff;
-        font-weight: 600;
-        font-size: 1.1rem;
-        padding: 0.75rem 1.5rem;
-        border: 2px solid #ffffff;
-        border-radius: 30px;
-        transform: translateY(10px);
-        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    }
-
-    .book-card:hover .read-action {
-        transform: translateY(0);
-        background: #ffffff;
-        color: #0f172a;
-    }
-
-    .book-details {
-        padding: 1.5rem;
-        display: flex;
-        flex-direction: column;
-        flex-grow: 1;
-        background: rgba(15, 23, 42, 0.3);
-    }
-
-    .book-title {
-        font-size: 1.25rem;
-        font-weight: 600;
-        margin: 0 0 0.5rem 0;
-        color: var(--nexus-text, #ffffff);
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        font-family: var(--nexus-font-sans, 'Inter', sans-serif);
-    }
-
-    .book-author {
-        font-size: 0.9rem;
-        color: rgba(255, 255, 255, 0.5);
-        margin: 0 0 1rem 0;
-    }
-
-    .new-badge {
-        align-self: flex-start;
-        font-size: 0.75rem;
-        font-weight: 600;
-        color: var(--nexus-primary, #6366f1);
-        background: rgba(99, 102, 241, 0.15);
-        padding: 0.25rem 0.75rem;
-        border-radius: 20px;
-        border: 1px solid rgba(99, 102, 241, 0.3);
-    }
-
-    /* Book Progress Bar */
-    .book-progress-section {
-        margin-top: auto;
-        display: flex;
-        flex-direction: column;
-        gap: 0.5rem;
-    }
-
-    .progress-bar {
-        height: 6px;
-        background: rgba(255, 255, 255, 0.1);
-        border-radius: 3px;
-        overflow: hidden;
-    }
-
-    .progress-fill {
-        height: 100%;
-        background: linear-gradient(90deg, var(--nexus-primary, #6366f1) 0%, #a855f7 100%);
-        border-radius: 3px;
-    }
-
-    .progress-text {
-        font-size: 0.8rem;
-        color: rgba(255, 255, 255, 0.4);
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-
-    /* Empty State */
-    .empty-state-container {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        padding: 5rem 2rem;
-        text-align: center;
-        border-radius: var(--nexus-radius-lg, 16px);
-    }
-
-    .empty-icon-pulse {
-        margin-bottom: 2rem;
-        color: rgba(255, 255, 255, 0.2);
-        animation: pulse 3s infinite alternate;
-    }
-
-    .empty-state-container h3 {
-        font-family: var(--nexus-font-serif);
-        font-size: 1.8rem;
-        margin: 0 0 0.5rem 0;
-        color: var(--nexus-text);
-    }
-
-    .empty-state-container p {
-        color: rgba(255, 255, 255, 0.5);
-        max-width: 400px;
-        margin: 0 0 2rem 0;
-    }
-
-    .btn-nexus.primary {
-        background: linear-gradient(135deg, var(--nexus-primary, #6366f1) 0%, var(--nexus-primary-hover, #4f46e5) 100%);
-        color: #ffffff;
-        border: none;
-        padding: 0.75rem 2rem;
-        border-radius: 30px;
-        font-weight: 600;
-        cursor: pointer;
-        box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
-        transition: all 0.3s ease;
-    }
-
-    .btn-nexus.primary:hover {
-        transform: translateY(-2px);
-        box-shadow: 0 8px 20px rgba(99, 102, 241, 0.6);
-    }
-
-    .restricted-info {
-        font-size: 0.85rem;
-        font-style: italic;
-        color: rgba(255, 255, 255, 0.35) !important;
-    }
-
-    /* Skeleton Loading */
-    .skeleton-card {
-        border-radius: var(--nexus-radius-lg, 16px);
-        overflow: hidden;
-        height: 480px;
-    }
-
-    .skeleton-cover {
-        height: 380px;
-        background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.03) 75%);
-        background-size: 200% 100%;
-        animation: loading 1.5s infinite;
-    }
-
-    .skeleton-details {
-        padding: 1.5rem;
-        display: flex;
-        flex-direction: column;
-        gap: 0.75rem;
-    }
-
-    .skeleton-line {
-        background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.03) 75%);
-        background-size: 200% 100%;
-        animation: loading 1.5s infinite;
-        border-radius: 4px;
-    }
-
-    .skeleton-line.title {
-        height: 20px;
-        width: 80%;
-    }
-
-    .skeleton-line.author {
-        height: 14px;
-        width: 50%;
-    }
-
-    .skeleton-line.progress {
-        height: 8px;
-        width: 100%;
-        margin-top: auto;
-    }
-
-    .library-loading-container {
-        position: relative;
-        width: 100%;
-    }
-
-    .library-loading-container .loader-card {
-        position: absolute;
-        top: 180px;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        z-index: 10;
-        display: flex;
-        align-items: center;
-        gap: 1.25rem;
-        padding: 1.25rem 2.25rem;
-        border-radius: 40px;
-        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), 0 0 1px rgba(255, 255, 255, 0.15) inset;
-        background: rgba(15, 23, 42, 0.75);
-        backdrop-filter: blur(16px);
-        border: 1px solid rgba(255, 255, 255, 0.08);
-        animation: scaleIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
-    }
-
-    .spinner-glow {
-        width: 60px;
-        height: 60px;
-        border: 3px solid rgba(0, 255, 153, 0.1);
-        border-radius: 50%;
-        border-top-color: var(--nexus-neon, #00ff99);
-        animation: spin 1s cubic-bezier(0.55, 0.055, 0.675, 0.19) infinite;
-        box-shadow: 0 0 15px rgba(0, 255, 153, 0.2);
-    }
-
-    .spinner-glow.small {
-        width: 28px;
-        height: 28px;
-        border-width: 2px;
-    }
-
-    .loader-text {
-        font-family: var(--nexus-font-sans, 'Inter', sans-serif);
-        font-weight: 500;
-        color: #ffffff;
-        font-size: 0.95rem;
-        letter-spacing: 0.2px;
-    }
-
-    /* Skeleton Loading enhancements */
-    .skeleton-card {
-        background: rgba(255, 255, 255, 0.02) !important;
-        border: 1px solid rgba(255, 255, 255, 0.05) !important;
-        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
-        opacity: 0.5;
-    }
-
-    .skeleton-cover {
-        background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.04) 75%) !important;
-    }
-
-    .skeleton-line {
-        background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.04) 75%) !important;
-    }
-
-    /* Animations */
-    @@keyframes fadeIn {
-        from { opacity: 0; transform: translateY(15px); }
-        to { opacity: 1; transform: translateY(0); }
-    }
-
-    @@keyframes pulse {
-        0% { transform: scale(0.95); opacity: 0.6; }
-        100% { transform: scale(1.05); opacity: 0.9; }
-    }
-
-    @@keyframes loading {
-        0% { background-position: 200% 0; }
-        100% { background-position: -200% 0; }
-    }
-
-    @@keyframes spin {
-        0% { transform: rotate(0deg); }
-        100% { transform: rotate(360deg); }
-    }
-
-    @@keyframes scaleIn {
-        from { transform: translate(-50%, -50%) scale(0.9); opacity: 0; }
-        to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
-    }
-</style>
-
 @code {
     private bool _isModalOpen;
     private bool _isLoading = true;
diff --git a/src/NexusReader.UI.Shared/Pages/Library.razor.css b/src/NexusReader.UI.Shared/Pages/Library.razor.css
new file mode 100644
index 0000000..3fde1ce
--- /dev/null
+++ b/src/NexusReader.UI.Shared/Pages/Library.razor.css
@@ -0,0 +1,368 @@
+.library-page {
+    padding: 3rem 2rem;
+    max-width: 1200px;
+    margin: 0 auto;
+    animation: fadeIn 0.6s ease-out;
+}
+
+.library-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 3rem;
+    flex-wrap: wrap;
+    gap: 1.5rem;
+}
+
+.header-title-section h1 {
+    font-family: var(--nexus-font-serif);
+    font-size: 2.8rem;
+    font-weight: 700;
+    margin: 0 0 0.5rem 0;
+    background: linear-gradient(135deg, var(--nexus-text) 0%, rgba(255, 255, 255, 0.7) 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    letter-spacing: -0.5px;
+}
+
+.header-title-section .subtitle {
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 0.6);
+    margin: 0;
+}
+
+.add-book-trigger {
+    background: var(--nexus-neon) !important;
+    color: #000000 !important;
+    border: none !important;
+    box-shadow: 0 4px 15px var(--nexus-primary-glow) !important;
+    font-weight: 600 !important;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+    border-radius: var(--radius-md) !important;
+}
+
+.add-book-trigger:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 8px 20px rgba(0, 255, 153, 0.5) !important;
+    filter: brightness(1.1);
+}
+
+.btn-icon {
+    margin-right: 0.5rem;
+    font-weight: bold;
+}
+
+/* Books Grid */
+.books-grid, .loading-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    gap: 2rem;
+}
+
+.book-card {
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
+    border-radius: var(--radius-lg);
+    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    position: relative;
+}
+
+.book-card::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: radial-gradient(800px circle at var(--x, 0) var(--y, 0), rgba(255, 255, 255, 0.06), transparent 40%);
+    opacity: 0;
+    transition: opacity 0.5s;
+    pointer-events: none;
+}
+
+.book-card:hover {
+    transform: translateY(-8px) scale(1.02);
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 2px rgba(255, 255, 255, 0.1) inset;
+    border-color: rgba(0, 255, 153, 0.2);
+}
+
+.book-card:hover::before {
+    opacity: 1;
+}
+
+.book-cover-container {
+    position: relative;
+    height: 380px;
+    background: rgba(0, 0, 0, 0.2);
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.book-cover {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.book-card:hover .book-cover {
+    transform: scale(1.08);
+}
+
+.cover-overlay {
+    position: absolute;
+    inset: 0;
+    background: rgba(15, 23, 42, 0.6);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    backdrop-filter: blur(4px);
+}
+
+.book-card:hover .cover-overlay {
+    opacity: 1;
+}
+
+.read-action {
+    color: #ffffff;
+    font-weight: 600;
+    font-size: 1.1rem;
+    padding: 0.75rem 1.5rem;
+    border: 2px solid #ffffff;
+    border-radius: 30px;
+    transform: translateY(10px);
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.book-card:hover .read-action {
+    transform: translateY(0);
+    background: #ffffff;
+    color: #0f172a;
+}
+
+.book-details {
+    padding: 1.5rem;
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    background: rgba(15, 23, 42, 0.3);
+}
+
+.book-title {
+    font-size: 1.25rem;
+    font-weight: 600;
+    margin: 0 0 0.5rem 0;
+    color: var(--nexus-text);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-family: var(--nexus-font-sans);
+}
+
+.book-author {
+    font-size: 0.9rem;
+    color: rgba(255, 255, 255, 0.5);
+    margin: 0 0 1rem 0;
+}
+
+.new-badge {
+    align-self: flex-start;
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--nexus-primary);
+    background: rgba(0, 255, 153, 0.15);
+    padding: 0.25rem 0.75rem;
+    border-radius: 20px;
+    border: 1px solid rgba(0, 255, 153, 0.3);
+}
+
+/* Book Progress Bar */
+.book-progress-section {
+    margin-top: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.progress-bar {
+    height: 6px;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 3px;
+    overflow: hidden;
+}
+
+.progress-fill {
+    height: 100%;
+    background: linear-gradient(90deg, var(--nexus-neon) 0%, #00ccff 100%);
+    border-radius: 3px;
+}
+
+.progress-text {
+    font-size: 0.8rem;
+    color: rgba(255, 255, 255, 0.4);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+/* Empty State */
+.empty-state-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 5rem 2rem;
+    text-align: center;
+    border-radius: var(--radius-lg);
+}
+
+.empty-icon-pulse {
+    margin-bottom: 2rem;
+    color: rgba(255, 255, 255, 0.2);
+    animation: pulse 3s infinite alternate;
+}
+
+.empty-state-container h3 {
+    font-family: var(--nexus-font-serif);
+    font-size: 1.8rem;
+    margin: 0 0 0.5rem 0;
+    color: var(--nexus-text);
+}
+
+.empty-state-container p {
+    color: rgba(255, 255, 255, 0.5);
+    max-width: 400px;
+    margin: 0 0 2rem 0;
+}
+
+.restricted-info {
+    font-size: 0.85rem;
+    font-style: italic;
+    color: rgba(255, 255, 255, 0.35) !important;
+}
+
+/* Skeleton Loading */
+.skeleton-card {
+    border-radius: var(--radius-lg);
+    overflow: hidden;
+    height: 480px;
+    background: rgba(255, 255, 255, 0.02) !important;
+    border: 1px solid rgba(255, 255, 255, 0.05) !important;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
+    opacity: 0.5;
+}
+
+.skeleton-cover {
+    height: 380px;
+    background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.04) 75%) !important;
+    background-size: 200% 100%;
+    animation: loading 1.5s infinite;
+}
+
+.skeleton-details {
+    padding: 1.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+
+.skeleton-line {
+    background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.04) 75%) !important;
+    background-size: 200% 100%;
+    animation: loading 1.5s infinite;
+    border-radius: 4px;
+}
+
+.skeleton-line.title {
+    height: 20px;
+    width: 80%;
+}
+
+.skeleton-line.author {
+    height: 14px;
+    width: 50%;
+}
+
+.skeleton-line.progress {
+    height: 8px;
+    width: 100%;
+    margin-top: auto;
+}
+
+.library-loading-container {
+    position: relative;
+    width: 100%;
+}
+
+.library-loading-container .loader-card {
+    position: absolute;
+    top: 180px;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 10;
+    display: flex;
+    align-items: center;
+    gap: 1.25rem;
+    padding: 1.25rem 2.25rem;
+    border-radius: 40px;
+    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), 0 0 1px rgba(255, 255, 255, 0.15) inset;
+    background: rgba(15, 23, 42, 0.75);
+    backdrop-filter: blur(16px);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    animation: scaleIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.spinner-glow {
+    width: 60px;
+    height: 60px;
+    border: 3px solid rgba(0, 255, 153, 0.1);
+    border-radius: 50%;
+    border-top-color: var(--nexus-neon);
+    animation: spin 1s cubic-bezier(0.55, 0.055, 0.675, 0.19) infinite;
+    box-shadow: 0 0 15px rgba(0, 255, 153, 0.2);
+}
+
+.spinner-glow.small {
+    width: 28px;
+    height: 28px;
+    border-width: 2px;
+}
+
+.loader-text {
+    font-family: var(--nexus-font-sans);
+    font-weight: 500;
+    color: #ffffff;
+    font-size: 0.95rem;
+    letter-spacing: 0.2px;
+}
+
+/* Animations */
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(15px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes pulse {
+    0% { transform: scale(0.95); opacity: 0.6; }
+    100% { transform: scale(1.05); opacity: 0.9; }
+}
+
+@keyframes loading {
+    0% { background-position: 200% 0; }
+    100% { background-position: -200% 0; }
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+@keyframes scaleIn {
+    from { transform: translate(-50%, -50%) scale(0.9); opacity: 0; }
+    to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
+}
diff --git a/src/NexusReader.UI.Shared/Pages/SerilogDemo.razor b/src/NexusReader.UI.Shared/Pages/SerilogDemo.razor
index 08c8fde..2c6159c 100644
--- a/src/NexusReader.UI.Shared/Pages/SerilogDemo.razor
+++ b/src/NexusReader.UI.Shared/Pages/SerilogDemo.razor
@@ -2,13 +2,14 @@
 @inject ILogger<SerilogDemo> Logger
 @inject IJSRuntime JSRuntime
 
+#if DEBUG
 <div class="serilog-demo-container">
-    <div class="header-card">
+    <div class="header-card glass-panel">
         <div class="header-content">
             <NexusIcon Name="cpu" Size="36" Class="header-icon" />
             <div class="header-text">
                 <h1>Serilog Logging Infrastructure</h1>
-                <p class="subtitle">Production-grade diagnostic pipeline for unified native & web logs</p>
+                <p class="subtitle">Production-grade diagnostic pipeline for unified native &amp; web logs</p>
             </div>
         </div>
         <div class="status-badge">
@@ -19,7 +20,7 @@
 
     <div class="demo-grid">
         <!-- Native .NET Logging Panel -->
-        <div class="control-card">
+        <div class="control-card glass-panel">
             <div class="card-header">
                 <NexusIcon Name="terminal" Size="20" Class="card-icon" />
                 <h2>Native .NET Logs (C#)</h2>
@@ -42,7 +43,7 @@
         </div>
 
         <!-- Blazor / JS Interop Bridge Panel -->
-        <div class="control-card">
+        <div class="control-card glass-panel">
             <div class="card-header">
                 <NexusIcon Name="globe" Size="20" Class="card-icon js-icon" />
                 <h2>Blazor / JS WebView Logs</h2>
@@ -62,7 +63,7 @@
     </div>
 
     <!-- Active Log Config Panel -->
-    <div class="config-card">
+    <div class="config-card glass-panel">
         <div class="card-header">
             <NexusIcon Name="settings" Size="20" Class="card-icon" />
             <h2>Pipeline Diagnostics</h2>
@@ -87,255 +88,18 @@
         </div>
     </div>
 </div>
+#else
+<div class="serilog-demo-container">
+    <div class="glass-panel" style="text-align: center; padding: 3rem;">
+        <h2>Diagnostics Unavailable</h2>
+        <p>This page is only available in DEBUG builds.</p>
+    </div>
+</div>
+#endif
 
-<style>
-.serilog-demo-container {
-    padding: 2rem;
-    max-width: 1200px;
-    margin: 0 auto;
-    color: #e2e8f0;
-    font-family: 'Inter', system-ui, -apple-system, sans-serif;
-}
-
-.header-card {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    background: linear-gradient(135deg, rgba(30, 41, 59, 0.7) 0%, rgba(15, 23, 42, 0.8) 100%);
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    border-radius: 16px;
-    padding: 2rem;
-    margin-bottom: 2rem;
-    backdrop-filter: blur(12px);
-    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
-}
-
-.header-content {
-    display: flex;
-    align-items: center;
-    gap: 1.5rem;
-}
-
-.header-icon {
-    color: #6366f1;
-    filter: drop-shadow(0 0 8px rgba(99, 102, 241, 0.5));
-}
-
-.header-text h1 {
-    font-size: 1.8rem;
-    font-weight: 700;
-    margin: 0;
-    background: linear-gradient(to right, #ffffff, #94a3b8);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-}
-
-.subtitle {
-    margin: 0.25rem 0 0 0;
-    color: #94a3b8;
-    font-size: 0.95rem;
-}
-
-.status-badge {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    background: rgba(16, 185, 129, 0.1);
-    border: 1px solid rgba(16, 185, 129, 0.2);
-    padding: 0.5rem 1rem;
-    border-radius: 9999px;
-}
-
-.status-dot {
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-}
-
-.status-dot.green {
-    background-color: #10b981;
-    box-shadow: 0 0 8px #10b981;
-}
-
-.status-text {
-    font-size: 0.85rem;
-    font-weight: 600;
-    color: #10b981;
-}
-
-.demo-grid {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 2rem;
-    margin-bottom: 2rem;
-}
-
-@@media (max-width: 768px) {
-    .demo-grid {
-        grid-template-columns: 1fr;
-    }
-}
-
-.control-card {
-    background: rgba(30, 41, 59, 0.45);
-    border: 1px solid rgba(255, 255, 255, 0.05);
-    border-radius: 16px;
-    padding: 2rem;
-    backdrop-filter: blur(8px);
-}
-
-.card-header {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    margin-bottom: 1rem;
-}
-
-.card-icon {
-    color: #6366f1;
-}
-
-.js-icon {
-    color: #eab308;
-}
-
-.card-header h2 {
-    font-size: 1.25rem;
-    font-weight: 600;
-    margin: 0;
-}
-
-.card-desc {
-    color: #94a3b8;
-    font-size: 0.9rem;
-    margin-bottom: 1.5rem;
-    line-height: 1.5;
-}
-
-.btn-group {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 1rem;
-}
-
-.btn {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 0.75rem 1.25rem;
-    border-radius: 8px;
-    font-size: 0.85rem;
-    font-weight: 600;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    border: none;
-}
-
-.btn-info {
-    background-color: rgba(99, 102, 241, 0.1);
-    color: #818cf8;
-    border: 1px solid rgba(99, 102, 241, 0.2);
-}
-
-.btn-info:hover {
-    background-color: #6366f1;
-    color: white;
-}
-
-.btn-warning {
-    background-color: rgba(245, 158, 11, 0.1);
-    color: #fbbf24;
-    border: 1px solid rgba(245, 158, 11, 0.2);
-}
-
-.btn-warning:hover {
-    background-color: #f59e0b;
-    color: white;
-}
-
-.btn-error {
-    background-color: rgba(239, 68, 68, 0.1);
-    color: #f87171;
-    border: 1px solid rgba(239, 68, 68, 0.2);
-}
-
-.btn-error:hover {
-    background-color: #ef4444;
-    color: white;
-}
-
-.btn-js-info {
-    background-color: rgba(234, 179, 8, 0.1);
-    color: #fef08a;
-    border: 1px solid rgba(234, 179, 8, 0.2);
-}
-
-.btn-js-info:hover {
-    background-color: #eab308;
-    color: #0f172a;
-}
-
-.btn-js-error {
-    background-color: rgba(236, 72, 153, 0.1);
-    color: #fbcfe8;
-    border: 1px solid rgba(236, 72, 153, 0.2);
-}
-
-.btn-js-error:hover {
-    background-color: #ec4899;
-    color: white;
-}
-
-.config-card {
-    background: rgba(15, 23, 42, 0.5);
-    border: 1px solid rgba(255, 255, 255, 0.05);
-    border-radius: 16px;
-    padding: 2rem;
-}
-
-.config-grid {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 1.5rem;
-    margin-top: 1.5rem;
-}
-
-@@media (max-width: 768px) {
-    .config-grid {
-        grid-template-columns: 1fr;
-    }
-}
-
-.config-item {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-}
-
-.config-item .label {
-    font-size: 0.8rem;
-    color: #64748b;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    font-weight: 600;
-}
-
-.config-item .value {
-    font-size: 0.95rem;
-    color: #cbd5e1;
-}
-
-.code-value {
-    font-family: 'Fira Code', 'Courier New', Courier, monospace;
-    background: rgba(0, 0, 0, 0.2);
-    padding: 0.25rem 0.5rem;
-    border-radius: 4px;
-    border: 1px solid rgba(255, 255, 255, 0.05);
-    word-break: break-all;
-}
-</style>
 
 @code {
+#if DEBUG
     private void LogInfo()
     {
         Logger.LogInformation("Structured native log triggered by user from SerilogDemo. Button: LogInfo");
@@ -367,4 +131,5 @@
     {
         await JSRuntime.InvokeVoidAsync("eval", "throw new Error('Simulated runtime JS Exception triggered from Blazor UI button click!');");
     }
+#endif
 }
diff --git a/src/NexusReader.UI.Shared/Pages/SerilogDemo.razor.css b/src/NexusReader.UI.Shared/Pages/SerilogDemo.razor.css
new file mode 100644
index 0000000..f8c402a
--- /dev/null
+++ b/src/NexusReader.UI.Shared/Pages/SerilogDemo.razor.css
@@ -0,0 +1,246 @@
+.serilog-demo-container {
+    padding: 3rem 2rem;
+    max-width: 1200px;
+    margin: 0 auto;
+    animation: fadeIn 0.6s ease-out;
+}
+
+.header-card {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 2rem;
+    margin-bottom: 2rem;
+}
+
+.header-content {
+    display: flex;
+    align-items: center;
+    gap: 1.5rem;
+}
+
+::deep .header-icon {
+    color: var(--nexus-neon);
+    filter: drop-shadow(0 0 8px var(--nexus-primary-glow));
+}
+
+.header-text h1 {
+    font-family: var(--nexus-font-sans);
+    font-size: 1.8rem;
+    font-weight: 700;
+    margin: 0;
+    background: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0.7));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.subtitle {
+    margin: 0.25rem 0 0 0;
+    color: rgba(255, 255, 255, 0.6);
+    font-size: 0.95rem;
+}
+
+.status-badge {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    background: rgba(0, 255, 153, 0.05);
+    border: 1px solid rgba(0, 255, 153, 0.2);
+    padding: 0.5rem 1rem;
+    border-radius: 9999px;
+}
+
+.status-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+}
+
+.status-dot.green {
+    background-color: var(--nexus-neon);
+    box-shadow: 0 0 8px var(--nexus-neon);
+}
+
+.status-text {
+    font-size: 0.85rem;
+    font-weight: 600;
+    color: var(--nexus-neon);
+}
+
+.demo-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 2rem;
+    margin-bottom: 2rem;
+}
+
+@media (max-width: 768px) {
+    .demo-grid {
+        grid-template-columns: 1fr;
+    }
+}
+
+.control-card {
+    border-radius: var(--radius-lg);
+    padding: 2rem;
+    transition: all 0.3s ease;
+}
+
+.card-header {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    margin-bottom: 1rem;
+}
+
+::deep .card-icon {
+    color: var(--nexus-neon);
+}
+
+::deep .js-icon {
+    color: #eab308;
+}
+
+.card-header h2 {
+    font-size: 1.25rem;
+    font-weight: 600;
+    margin: 0;
+    color: #ffffff;
+}
+
+.card-desc {
+    color: rgba(255, 255, 255, 0.5);
+    font-size: 0.9rem;
+    margin-bottom: 1.5rem;
+    line-height: 1.5;
+}
+
+.btn-group {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+}
+
+.btn {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.75rem 1.25rem;
+    border-radius: var(--radius-md);
+    font-size: 0.85rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    border: none;
+}
+
+.btn-info {
+    background-color: rgba(0, 255, 153, 0.05);
+    color: var(--nexus-neon);
+    border: 1px solid rgba(0, 255, 153, 0.2) !important;
+}
+
+.btn-info:hover {
+    background-color: var(--nexus-neon);
+    color: #000000;
+    box-shadow: 0 0 15px var(--nexus-primary-glow);
+}
+
+.btn-warning {
+    background-color: rgba(245, 158, 11, 0.05);
+    color: #fbbf24;
+    border: 1px solid rgba(245, 158, 11, 0.2) !important;
+}
+
+.btn-warning:hover {
+    background-color: #f59e0b;
+    color: #000000;
+    box-shadow: 0 0 15px rgba(245, 158, 11, 0.3);
+}
+
+.btn-error {
+    background-color: rgba(239, 68, 68, 0.05);
+    color: #f87171;
+    border: 1px solid rgba(239, 68, 68, 0.2) !important;
+}
+
+.btn-error:hover {
+    background-color: #ef4444;
+    color: white;
+    box-shadow: 0 0 15px rgba(239, 68, 68, 0.3);
+}
+
+.btn-js-info {
+    background-color: rgba(234, 179, 8, 0.05);
+    color: #fef08a;
+    border: 1px solid rgba(234, 179, 8, 0.2) !important;
+}
+
+.btn-js-info:hover {
+    background-color: #eab308;
+    color: #0f172a;
+    box-shadow: 0 0 15px rgba(234, 179, 8, 0.3);
+}
+
+.btn-js-error {
+    background-color: rgba(236, 72, 153, 0.05);
+    color: #fbcfe8;
+    border: 1px solid rgba(236, 72, 153, 0.2) !important;
+}
+
+.btn-js-error:hover {
+    background-color: #ec4899;
+    color: white;
+    box-shadow: 0 0 15px rgba(236, 72, 153, 0.3);
+}
+
+.config-card {
+    border-radius: var(--radius-lg);
+    padding: 2rem;
+}
+
+.config-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1.5rem;
+    margin-top: 1.5rem;
+}
+
+@media (max-width: 768px) {
+    .config-grid {
+        grid-template-columns: 1fr;
+    }
+}
+
+.config-item {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.config-item .label {
+    font-size: 0.8rem;
+    color: rgba(255, 255, 255, 0.4);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    font-weight: 600;
+}
+
+.config-item .value {
+    font-size: 0.95rem;
+    color: #cbd5e1;
+}
+
+.code-value {
+    font-family: var(--nexus-font-mono);
+    background: rgba(0, 0, 0, 0.2);
+    padding: 0.25rem 0.5rem;
+    border-radius: 4px;
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    word-break: break-all;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(15px); }
+    to { opacity: 1; transform: translateY(0); }
+}
diff --git a/src/NexusReader.UI.Shared/Pages/Settings.razor b/src/NexusReader.UI.Shared/Pages/Settings.razor
index f19734b..ae288b8 100644
--- a/src/NexusReader.UI.Shared/Pages/Settings.razor
+++ b/src/NexusReader.UI.Shared/Pages/Settings.razor
@@ -5,60 +5,15 @@
     <h1>Settings</h1>
     <p>Configure your account and application preferences.</p>
 
-    <div class="settings-section">
-        <h2>Diagnostics & System Logs</h2>
+    #if DEBUG
+    <div class="settings-section glass-panel">
+        <h2>Diagnostics &amp; System Logs</h2>
         <p>Inspect native logging infrastructure, trigger custom logs, and trace WebView errors.</p>
         <a class="diag-btn" href="/serilog-demo">
             <NexusIcon Name="cpu" Size="16" />
             Open Serilog Diagnostics Dashboard
         </a>
     </div>
+    #endif
 </div>
 
-<style>
-    .settings-page {
-        padding: 2rem;
-        color: #e2e8f0;
-        font-family: 'Inter', sans-serif;
-    }
-    h1 {
-        margin-bottom: 0.5rem;
-        color: #fff;
-    }
-    h2 {
-        margin-top: 2rem;
-        font-size: 1.2rem;
-        color: #fff;
-        margin-bottom: 0.5rem;
-    }
-    .settings-section {
-        background: rgba(30, 41, 59, 0.45);
-        border: 1px solid rgba(255, 255, 255, 0.05);
-        padding: 1.5rem;
-        border-radius: 12px;
-        margin-top: 1.5rem;
-    }
-    .settings-section p {
-        color: #94a3b8;
-        font-size: 0.9rem;
-        margin-bottom: 1.25rem;
-    }
-    .diag-btn {
-        display: inline-flex;
-        align-items: center;
-        gap: 0.5rem;
-        background: rgba(99, 102, 241, 0.1);
-        color: #818cf8;
-        border: 1px solid rgba(99, 102, 241, 0.2);
-        padding: 0.75rem 1.25rem;
-        border-radius: 8px;
-        text-decoration: none;
-        font-size: 0.85rem;
-        font-weight: 600;
-        transition: all 0.2s ease;
-    }
-    .diag-btn:hover {
-        background: #6366f1;
-        color: white;
-    }
-</style>
diff --git a/src/NexusReader.UI.Shared/Pages/Settings.razor.css b/src/NexusReader.UI.Shared/Pages/Settings.razor.css
new file mode 100644
index 0000000..7df77b0
--- /dev/null
+++ b/src/NexusReader.UI.Shared/Pages/Settings.razor.css
@@ -0,0 +1,74 @@
+.settings-page {
+    padding: 3rem 2rem;
+    max-width: 1200px;
+    margin: 0 auto;
+    animation: fadeIn 0.6s ease-out;
+}
+
+.settings-page > h1 {
+    font-family: var(--nexus-font-serif);
+    font-size: 2.8rem;
+    font-weight: 700;
+    margin: 0 0 0.5rem 0;
+    background: linear-gradient(135deg, var(--nexus-text) 0%, rgba(255, 255, 255, 0.7) 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    letter-spacing: -0.5px;
+}
+
+.settings-page > p {
+    font-size: 1rem;
+    color: rgba(255, 255, 255, 0.6);
+    margin-bottom: 3rem;
+}
+
+.settings-section {
+    padding: 2rem;
+    margin-top: 1.5rem;
+    border-radius: var(--radius-lg);
+    transition: all 0.3s ease;
+}
+
+.settings-section h2 {
+    font-family: var(--nexus-font-sans);
+    font-size: 1.35rem;
+    font-weight: 600;
+    color: #ffffff;
+    margin: 0 0 0.75rem 0;
+}
+
+.settings-section p {
+    color: rgba(255, 255, 255, 0.5);
+    font-size: 0.95rem;
+    margin: 0 0 1.5rem 0;
+    line-height: 1.5;
+}
+
+.diag-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    background: rgba(0, 255, 153, 0.05);
+    color: var(--nexus-neon);
+    border: 1px solid rgba(0, 255, 153, 0.2);
+    padding: 0.75rem 1.5rem;
+    border-radius: var(--radius-md);
+    text-decoration: none;
+    font-size: 0.9rem;
+    font-weight: 600;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: 0 0 0 transparent;
+}
+
+.diag-btn:hover {
+    background: var(--nexus-neon);
+    color: #000000;
+    border-color: var(--nexus-neon);
+    box-shadow: 0 0 15px var(--nexus-primary-glow);
+    transform: translateY(-2px);
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(15px); }
+    to { opacity: 1; transform: translateY(0); }
+}
diff --git a/src/NexusReader.UI.Shared/Services/KnowledgeCoordinator.cs b/src/NexusReader.UI.Shared/Services/KnowledgeCoordinator.cs
index 9489616..1986436 100644
--- a/src/NexusReader.UI.Shared/Services/KnowledgeCoordinator.cs
+++ b/src/NexusReader.UI.Shared/Services/KnowledgeCoordinator.cs
@@ -75,7 +75,7 @@ public sealed partial class KnowledgeCoordinator : IDisposable
         }
     }
 
-    public async Task ProcessFullPageAsync(string fullContent, string tenantId = "global")
+    public async Task ProcessFullPageAsync(string fullContent, string tenantId = "global", Guid? ebookId = null)
     {
         if (string.IsNullOrWhiteSpace(fullContent)) return;
 
@@ -87,7 +87,7 @@ public sealed partial class KnowledgeCoordinator : IDisposable
         
         try
         {
-            var result = await _knowledgeService.GetGraphDataAsync(fullContent, tenantId);
+            var result = await _knowledgeService.GetGraphDataAsync(fullContent, tenantId, ebookId);
             if (result.IsSuccess)
             {
                 var packet = result.Value;
diff --git a/src/NexusReader.UI.Shared/wwwroot/app.css b/src/NexusReader.UI.Shared/wwwroot/app.css
index 8de4576..2238d4d 100644
--- a/src/NexusReader.UI.Shared/wwwroot/app.css
+++ b/src/NexusReader.UI.Shared/wwwroot/app.css
@@ -2,6 +2,7 @@
 
 :root {
     --nexus-neon: #00ff99;
+    --nexus-neon-glow: rgba(0, 255, 153, 0.3);
     --nexus-bg: #121212;
     --nexus-card: #1a1a1a;
     --nexus-text: #ffffff;
@@ -9,6 +10,17 @@
     --nexus-font-sans: 'Inter', sans-serif;
     --nexus-font-serif: 'Merriweather', serif;
     
+    /* Global Semantic Theme Mapping */
+    --nexus-primary: var(--nexus-neon);
+    --nexus-primary-glow: var(--nexus-neon-glow);
+    --nexus-primary-hover: #00e688;
+    
+    /* Standard Layout Tokens */
+    --radius-sm: 8px;
+    --radius-md: 12px;
+    --radius-lg: 16px;
+    --radius-xl: 20px;
+    
     /* Safe Area Insets with fallbacks */
     --safe-area-inset-top: env(safe-area-inset-top, 0px);
     --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
@@ -23,7 +35,7 @@
 .glass-panel {
     background: rgba(20, 20, 20, 0.85); /* Darker fallback for readability */
     border: 1px solid rgba(255, 255, 255, 0.05);
-    border-radius: 20px;
+    border-radius: var(--radius-xl);
     padding: 1.5rem;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -35,6 +47,40 @@
     }
 }
 
+/* Unified Enterprise Component Constraints */
+.btn-nexus {
+    font-family: var(--nexus-font-sans);
+    font-weight: 600;
+    border-radius: var(--radius-md);
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    border: none;
+    text-decoration: none;
+}
+.btn-nexus-primary {
+    background: var(--nexus-neon);
+    color: #000000;
+}
+.btn-nexus-secondary {
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    color: #ffffff;
+}
+.btn-nexus:hover {
+    transform: translateY(-2px);
+    filter: brightness(1.1);
+}
+.btn-nexus-primary:hover {
+    box-shadow: 0 4px 15px var(--nexus-primary-glow);
+}
+.btn-nexus-secondary:hover {
+    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.05);
+}
+
 
 .theme-light {
     --nexus-bg: var(--nexus-paper);
diff --git a/src/NexusReader.UI.Shared/wwwroot/css/nexus-auth.css b/src/NexusReader.UI.Shared/wwwroot/css/nexus-auth.css
index 01d40a1..ab7b525 100644
--- a/src/NexusReader.UI.Shared/wwwroot/css/nexus-auth.css
+++ b/src/NexusReader.UI.Shared/wwwroot/css/nexus-auth.css
@@ -1,9 +1,8 @@
 :root {
-    --nexus-primary: #44ff77;
-    --nexus-bg: #121418;
-    --nexus-card-bg: #1c1f24;
+    --nexus-primary: var(--nexus-neon);
+    --nexus-card-bg: var(--nexus-card);
     --nexus-border: rgba(255, 255, 255, 0.08);
-    --nexus-text-muted: #666;
+    --nexus-text-muted: #888888;
     --nexus-text-bright: #e2e8f0;
 }
 
diff --git a/src/NexusReader.Web.Client/Program.cs b/src/NexusReader.Web.Client/Program.cs
index 9eed57e..a011bc3 100644
--- a/src/NexusReader.Web.Client/Program.cs
+++ b/src/NexusReader.Web.Client/Program.cs
@@ -36,6 +36,7 @@ builder.Services.AddCascadingAuthenticationState();
 
 // AI & Content Services
 builder.Services.AddScoped<IKnowledgeService, WasmKnowledgeService>();
+builder.Services.AddScoped<IConceptsMapService, WasmConceptsMapService>();
 
 builder.Services.AddTransient<NexusReader.Web.Client.Handlers.AuthenticationHeaderHandler>();
 builder.Services.AddHttpClient("NexusAPI", client => 
diff --git a/src/NexusReader.Web.Client/Services/WasmConceptsMapService.cs b/src/NexusReader.Web.Client/Services/WasmConceptsMapService.cs
new file mode 100644
index 0000000..41d10fa
--- /dev/null
+++ b/src/NexusReader.Web.Client/Services/WasmConceptsMapService.cs
@@ -0,0 +1,36 @@
+using System.Net.Http.Json;
+using FluentResults;
+using NexusReader.Application.Abstractions.Services;
+using NexusReader.Application.Queries.Concepts;
+
+namespace NexusReader.Web.Client.Services;
+
+public class WasmConceptsMapService : IConceptsMapService
+{
+    private readonly HttpClient _httpClient;
+
+    public WasmConceptsMapService(HttpClient httpClient)
+    {
+        _httpClient = httpClient;
+    }
+
+    public async Task<Result<BookConceptsMapResultDto>> GetConceptsMapAsync(Guid bookId)
+    {
+        try
+        {
+            var response = await _httpClient.GetAsync($"api/book/{bookId}/concepts-map");
+            if (response.IsSuccessStatusCode)
+            {
+                var result = await response.Content.ReadFromJsonAsync<BookConceptsMapResultDto>();
+                return result != null ? Result.Ok(result) : Result.Fail<BookConceptsMapResultDto>("Błąd deserializacji mapy pojęć.");
+            }
+
+            var errorContent = await response.Content.ReadAsStringAsync();
+            return Result.Fail<BookConceptsMapResultDto>($"Błąd serwera ({response.StatusCode}): {errorContent}");
+        }
+        catch (Exception ex)
+        {
+            return Result.Fail<BookConceptsMapResultDto>(new Error("Błąd sieci przy pobieraniu mapy pojęć.").CausedBy(ex));
+        }
+    }
+}
diff --git a/src/NexusReader.Web/Program.cs b/src/NexusReader.Web/Program.cs
index 9e10a59..70cdb68 100644
--- a/src/NexusReader.Web/Program.cs
+++ b/src/NexusReader.Web/Program.cs
@@ -7,6 +7,7 @@ using NexusReader.Application.Abstractions.Services;
 using NexusReader.Application.Queries.User;
 using NexusReader.Application.Commands.Library;
 using NexusReader.Application.Queries.Library;
+using NexusReader.Application.Queries.Concepts;
 using MediatR;
 using NexusReader.Web.Client.Services;
 using NexusReader.UI.Shared.Services;
@@ -73,6 +74,7 @@ builder.Services.AddHttpClient("NexusAPI", (sp, client) =>
 builder.Services.AddScoped(sp => sp.GetRequiredService<IHttpClientFactory>().CreateClient("NexusAPI"));
 
 builder.Services.AddScoped<IIdentityService, NexusReader.Web.Services.ServerIdentityService>();
+builder.Services.AddScoped<IConceptsMapService, NexusReader.Web.Services.ServerConceptsMapService>();
 builder.Services.AddCascadingAuthenticationState();
 
 builder.Services.AddApplication();
@@ -86,6 +88,11 @@ builder.Services.AddMediatR(cfg => cfg.RegisterServicesFromAssemblies(
 // Authorization Policies
 builder.Services.AddScoped<IAuthorizationHandler, TokenLimitHandler>();
 builder.Services.AddAuthorizationBuilder()
+    .SetDefaultPolicy(new Microsoft.AspNetCore.Authorization.AuthorizationPolicyBuilder(
+        IdentityConstants.ApplicationScheme,
+        IdentityConstants.BearerScheme)
+        .RequireAuthenticatedUser()
+        .Build())
     .AddPolicy("ProUser", policy => policy.RequireClaim("Plan", SubscriptionPlan.ProName, SubscriptionPlan.EnterpriseName))
     .AddPolicy("HasAvailableTokens", policy => policy.AddRequirements(new TokenLimitRequirement()));
 
@@ -369,6 +376,28 @@ app.MapGet("/api/library/books", async (ClaimsPrincipal user, IMediator mediator
     return Results.BadRequest(errorMsg);
 }).RequireAuthorization();
 
+app.MapGet("/api/book/{bookId:guid}/concepts-map", async (
+    Guid bookId,
+    ClaimsPrincipal user,
+    IMediator mediator) =>
+{
+    var userId = user.FindFirstValue(ClaimTypes.NameIdentifier);
+    var tenantId = user.FindFirstValue("TenantId") ?? "global";
+
+    if (string.IsNullOrEmpty(userId))
+    {
+        return Results.Unauthorized();
+    }
+
+    var result = await mediator.Send(new GetBookConceptsMapQuery(bookId, userId, tenantId));
+    if (result.IsFailed)
+    {
+        return Results.BadRequest(result.Errors.FirstOrDefault()?.Message ?? "Failed to fetch concepts map.");
+    }
+
+    return Results.Ok(result.Value);
+}).RequireAuthorization();
+
 app.MapPost("/api/StripeWebhook", async (
     HttpContext context, 
     UserManager<NexusUser> userManager, 
diff --git a/src/NexusReader.Web/Services/ServerConceptsMapService.cs b/src/NexusReader.Web/Services/ServerConceptsMapService.cs
new file mode 100644
index 0000000..04845e4
--- /dev/null
+++ b/src/NexusReader.Web/Services/ServerConceptsMapService.cs
@@ -0,0 +1,49 @@
+using System.Security.Claims;
+using FluentResults;
+using MediatR;
+using NexusReader.Application.Abstractions.Services;
+using NexusReader.Application.Queries.Concepts;
+
+namespace NexusReader.Web.Services;
+
+public class ServerConceptsMapService : IConceptsMapService
+{
+    private readonly IMediator _mediator;
+    private readonly IIdentityService _identityService;
+
+    public ServerConceptsMapService(
+        IMediator mediator,
+        IIdentityService identityService)
+    {
+        _mediator = mediator;
+        _identityService = identityService;
+    }
+
+    public async Task<Result<BookConceptsMapResultDto>> GetConceptsMapAsync(Guid bookId)
+    {
+        try
+        {
+            var profileResult = await _identityService.GetProfileAsync();
+
+            if (profileResult.IsFailed)
+            {
+                return Result.Fail<BookConceptsMapResultDto>("Użytkownik nie jest uwierzytelniony.");
+            }
+
+            var profile = profileResult.Value;
+            var userId = profile.UserId;
+            var tenantId = profile.TenantId.ToString();
+
+            if (string.IsNullOrEmpty(userId))
+            {
+                return Result.Fail<BookConceptsMapResultDto>("Nie znaleziono identyfikatora użytkownika.");
+            }
+
+            return await _mediator.Send(new GetBookConceptsMapQuery(bookId, userId, tenantId));
+        }
+        catch (Exception ex)
+        {
+            return Result.Fail<BookConceptsMapResultDto>(new Error("Błąd pobierania mapy pojęć na serwerze.").CausedBy(ex));
+        }
+    }
+}
diff --git a/src/NexusReader.Web/Services/ServerIdentityService.cs b/src/NexusReader.Web/Services/ServerIdentityService.cs
index 2a1aaff..56b0061 100644
--- a/src/NexusReader.Web/Services/ServerIdentityService.cs
+++ b/src/NexusReader.Web/Services/ServerIdentityService.cs
@@ -9,6 +9,7 @@ using NexusReader.Application.Queries.User;
 using MediatR;
 using NexusReader.Application.Constants;
 using NexusReader.Application.Abstractions.Services;
+using Microsoft.AspNetCore.Components.Authorization;
 
 namespace NexusReader.Web.Services;
 
@@ -19,6 +20,7 @@ public class ServerIdentityService : IIdentityService
     private readonly IHttpContextAccessor _httpContextAccessor;
     private readonly IMediator _mediator;
     private readonly INativeStorageService _storageService;
+    private readonly AuthenticationStateProvider _authStateProvider;
 
     public event Func<Task>? OnStateInvalidated;
 
@@ -27,13 +29,15 @@ public class ServerIdentityService : IIdentityService
         SignInManager<NexusUser> signInManager,
         IHttpContextAccessor httpContextAccessor,
         IMediator mediator,
-        INativeStorageService storageService)
+        INativeStorageService storageService,
+        AuthenticationStateProvider authStateProvider)
     {
         _userManager = userManager;
         _signInManager = signInManager;
         _httpContextAccessor = httpContextAccessor;
         _mediator = mediator;
         _storageService = storageService;
+        _authStateProvider = authStateProvider;
     }
 
     public async Task<Result> LoginAsync(string email, string password, bool rememberMe = false) 
@@ -107,8 +111,15 @@ public class ServerIdentityService : IIdentityService
 
     public async Task<Result<UserProfileDto>> GetProfileAsync()
     {
-        var user = _httpContextAccessor.HttpContext?.User;
-        if (user == null || !user.Identity?.IsAuthenticated == true) return Result.Fail("Not authenticated.");
+        var authState = await _authStateProvider.GetAuthenticationStateAsync();
+        var user = authState.User;
+        
+        if (user == null || user.Identity?.IsAuthenticated != true)
+        {
+            user = _httpContextAccessor.HttpContext?.User;
+        }
+
+        if (user == null || user.Identity?.IsAuthenticated != true) return Result.Fail("Not authenticated.");
 
         var userId = user.FindFirstValue(ClaimTypes.NameIdentifier);
         if (userId == null) return Result.Fail("User ID not found.");