diff --git a/src/NexusReader.UI.Shared/Components/Organisms/CurrentReadingWidget.razor b/src/NexusReader.UI.Shared/Components/Organisms/CurrentReadingWidget.razor
index c794857..4e0f000 100644
--- a/src/NexusReader.UI.Shared/Components/Organisms/CurrentReadingWidget.razor
+++ b/src/NexusReader.UI.Shared/Components/Organisms/CurrentReadingWidget.razor
@@ -7,7 +7,7 @@
     {
         <div @key='"current-reading-book"' class="card-layout">
             <div class="book-cover">
-                <img src="@(Book.CoverUrl ?? "https://via.placeholder.com/120x180?text=No+Cover")" alt="@Book.Title" />
+                <img src="@(string.IsNullOrEmpty(Book.CoverUrl) ? "https://via.placeholder.com/120x180?text=No+Cover" : Book.CoverUrl)" alt="@Book.Title" />
             </div>
             
             <div class="book-details">
@@ -42,7 +42,7 @@
 
                 <div class="actions">
                     <button class="btn-nexus outline" @onclick="HandleContinueReading">
-                        Continue Reading
+                        Kontynuuj czytanie
                         <NexusIcon Name="arrow-right" Size="16" />
                     </button>
                 </div>
diff --git a/src/NexusReader.UI.Shared/Components/Organisms/CurrentReadingWidget.razor.css b/src/NexusReader.UI.Shared/Components/Organisms/CurrentReadingWidget.razor.css
index 910e14b..59d336b 100644
--- a/src/NexusReader.UI.Shared/Components/Organisms/CurrentReadingWidget.razor.css
+++ b/src/NexusReader.UI.Shared/Components/Organisms/CurrentReadingWidget.razor.css
@@ -198,8 +198,8 @@
     .current-reading-card {
         background: #1e1e22; /* Lighter anthracite slate for depth */
         box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3); /* Ambient card shadow */
-        padding: 20px;
-        border-radius: 20px;
+        padding: 14px;
+        border-radius: 16px;
         border: 1px solid rgba(255, 255, 255, 0.08);
     }
 
@@ -207,12 +207,12 @@
         flex-direction: column;
         align-items: stretch;
         text-align: left;
-        gap: 1.25rem;
+        gap: 0.75rem;
     }
     
     .book-cover {
         align-self: center;
-        width: 120px;
+        width: 90px;
     }
     
     .book-details {
@@ -221,13 +221,14 @@
     }
     
     .book-title {
-        font-size: 1.5rem;
+        font-size: 1.25rem;
         text-align: left;
         white-space: normal;
     }
 
     .author-name {
         text-align: left;
+        font-size: 0.8rem;
     }
     
     .header-info, .chapter-progress {
@@ -236,10 +237,11 @@
 
     .chapter-name {
         white-space: normal;
+        font-size: 0.8rem;
     }
     
     .chapter-progress {
-        margin: 1.25rem 0; /* Margin separator before tracking bar */
+        margin: 0.5rem 0; /* Margin separator before tracking bar */
         width: 100%;
     }
     
@@ -248,24 +250,36 @@
     }
 
     .book-excerpt {
-        display: block; /* Normal display to wrap synopsis */
-        overflow: visible;
-        -webkit-line-clamp: none;
-        text-overflow: clip;
-        margin-bottom: 1.25rem;
+        display: -webkit-box; /* Normal display to wrap synopsis */
+        overflow: hidden;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        margin-bottom: 0.75rem;
         text-align: left;
+        font-size: 0.85rem;
     }
     
     .actions {
         width: 100%;
-        margin-top: 0.5rem;
+        margin-top: 0.25rem;
     }
     
-    .actions .btn-nexus {
+    .actions .btn-nexus.outline {
         width: 100%;
         justify-content: center;
-        padding: 0.95rem 1.5rem; /* Larger touch target */
+        padding: 0.75rem 1.25rem; /* Larger touch target */
         box-sizing: border-box;
+        background: transparent !important;
+        color: var(--accent) !important;
+        border: 1px solid var(--accent) !important;
+        display: inline-flex !important;
+        align-items: center !important;
+        font-weight: 600 !important;
+    }
+
+    .actions .btn-nexus.outline:hover {
+        background: var(--accent-glow) !important;
+        color: var(--accent) !important;
     }
 
     .theme-light .current-reading-card {
diff --git a/src/NexusReader.UI.Shared/Layout/MainHubLayout.razor b/src/NexusReader.UI.Shared/Layout/MainHubLayout.razor
index 5b27574..5c526f1 100644
--- a/src/NexusReader.UI.Shared/Layout/MainHubLayout.razor
+++ b/src/NexusReader.UI.Shared/Layout/MainHubLayout.razor
@@ -1,4 +1,5 @@
 @inherits LayoutComponentBase
+@implements IDisposable
 @using NexusReader.UI.Shared.Components.Molecules
 @using NexusReader.UI.Shared.Components.Atoms
 @using NexusReader.Application.Abstractions.Services
@@ -12,7 +13,7 @@
     </div>
 }
 
-<div @key='"hub-container"' class="hub-container @(_isMobileMenuOpen ? "mobile-menu-open" : "")">
+<div @key='"hub-container"' class="hub-container @(_isMobileMenuOpen ? "mobile-menu-open" : "") @(ThemeService.IsLightMode ? "theme-light" : "theme-dark")">
     <AuthorizeView>
         <Authorized>
             <!-- Mobile Sticky Top-bar -->
@@ -122,10 +123,10 @@
                     <span class="dock-text">Katalog</span>
                 </NavLink>
                 <NavLink class="dock-item central-action" href="/intelligence" title="Globalne AI">
-                    <div class="central-action-glow"></div>
                     <div class="central-action-inner">
-                        <NexusIcon Name="robot" Size="24" />
+                        <NexusIcon Name="robot" Size="20" />
                     </div>
+                    <span class="dock-text">AI</span>
                 </NavLink>
                 <NavLink class="dock-item" href="/my-books" title="Moje">
                     <NexusIcon Name="book-open" Size="20" />
@@ -150,6 +151,7 @@
     [Inject] private AuthenticationStateProvider AuthStateProvider { get; set; } = default!;
     [Inject] private IIdentityService IdentityService { get; set; } = default!;
     [Inject] private NavigationManager NavigationManager { get; set; } = default!;
+    [Inject] private IThemeService ThemeService { get; set; } = default!;
 
     private bool _isSyncing = false;
     private bool _isMobileMenuOpen = false;
@@ -157,6 +159,8 @@
 
     protected override async Task OnInitializedAsync()
     {
+        ThemeService.OnThemeChanged += HandleThemeChanged;
+
         if (_isSyncing) return;
         
         var authState = await AuthStateProvider.GetAuthenticationStateAsync();
@@ -168,6 +172,11 @@
         }
     }
 
+    private void HandleThemeChanged(ThemeMode mode)
+    {
+        InvokeAsync(StateHasChanged);
+    }
+
     protected override void OnAfterRender(bool firstRender)
     {
         if (firstRender)
@@ -193,4 +202,9 @@
         await IdentityService.LogoutAsync();
         NavigationManager.NavigateTo("/account/logout-form", true);
     }
+
+    public void Dispose()
+    {
+        ThemeService.OnThemeChanged -= HandleThemeChanged;
+    }
 }
diff --git a/src/NexusReader.UI.Shared/Layout/MainHubLayout.razor.css b/src/NexusReader.UI.Shared/Layout/MainHubLayout.razor.css
index 91d9cb7..12207c8 100644
--- a/src/NexusReader.UI.Shared/Layout/MainHubLayout.razor.css
+++ b/src/NexusReader.UI.Shared/Layout/MainHubLayout.razor.css
@@ -429,13 +429,13 @@
     }
 
     /* Reader Mobile Dock v3 */
-    .reader-mobile-dock {
+    ::deep .reader-mobile-dock {
         display: flex;
         position: fixed;
         bottom: calc(16px + env(safe-area-inset-bottom, 0px));
         left: 20px;
         right: 20px;
-        height: 60px;
+        height: 64px;
         background: rgba(26, 26, 30, 0.75); /* Translucent dark mode */
         backdrop-filter: blur(20px);
         -webkit-backdrop-filter: blur(20px);
@@ -448,8 +448,9 @@
         box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
     }
     
-    .dock-item {
+    ::deep .dock-item {
         display: flex;
+        flex-direction: column;
         align-items: center;
         justify-content: center;
         flex: 1;
@@ -458,84 +459,108 @@
         text-decoration: none;
         transition: color 0.2s ease, filter 0.2s ease;
         position: relative;
+        gap: 2px;
     }
     
-    .dock-item:hover, .dock-item.active {
-        color: var(--accent);
+    ::deep .dock-item:hover, ::deep .dock-item.active {
+        color: var(--accent) !important;
         filter: drop-shadow(0 0 4px var(--accent-glow)); /* Clean accent glow drop-shadow */
     }
+
+    ::deep .dock-item ::deep svg,
+    ::deep .dock-item ::deep .nexus-icon,
+    ::deep .dock-item svg,
+    ::deep .dock-item .nexus-icon {
+        color: inherit !important;
+        fill: currentColor !important;
+    }
     
-    .dock-text {
-        display: none !important; /* Eliminate visual noise */
+    ::deep .dock-text {
+        display: block !important;
+        font-size: 10px;
+        font-weight: 500;
+        margin-top: 2px;
+        white-space: nowrap;
+        color: inherit;
     }
 
     /* Central action button style */
-    .dock-item.central-action {
+    ::deep .dock-item.central-action {
         display: flex;
+        flex-direction: column;
         align-items: center;
         justify-content: center;
         position: relative;
-        flex: 0 0 54px;
-        width: 54px;
-        height: 54px;
+        flex: 1;
+        height: 100%;
+        gap: 2px;
         margin-top: 0;
-        transform: translateY(-20px); /* Elevate layout */
+        transform: none !important;
         z-index: 160;
     }
     
-    .central-action-inner {
-        width: 54px;
-        height: 54px;
+    ::deep .central-action-inner {
+        width: 36px;
+        height: 36px;
         border-radius: 50%;
-        background: var(--bg-surface); /* Pure background instead of green bleed */
-        color: var(--accent); /* brand-green robot icon */
+        background: var(--accent); /* Solid green background */
+        color: #ffffff !important; /* White robot icon */
         display: flex;
         align-items: center;
         justify-content: center;
-        border: 2px solid var(--accent); /* Crisp green edge container wrapper */
-        box-shadow: 0 8px 24px var(--accent-glow);
+        border: none !important;
+        box-shadow: 0 4px 10px rgba(0, 255, 153, 0.3);
         transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease;
     }
+
+    ::deep .central-action-inner ::deep svg,
+    ::deep .central-action-inner ::deep .nexus-icon,
+    ::deep .central-action-inner svg,
+    ::deep .central-action-inner .nexus-icon {
+        color: #ffffff !important;
+        fill: currentColor !important;
+    }
     
-    .dock-item.central-action:hover .central-action-inner,
-    .dock-item.central-action.active .central-action-inner {
-        transform: scale(1.08) translateY(-2px);
-        box-shadow: 0 12px 28px var(--accent-glow);
+    ::deep .dock-item.central-action:hover .central-action-inner,
+    ::deep .dock-item.central-action.active .central-action-inner {
+        transform: scale(1.05);
+        box-shadow: 0 4px 14px rgba(0, 255, 153, 0.5);
     }
 
-    .central-action-glow {
+    ::deep .central-action-glow {
         display: none; /* Purged background glow */
     }
 
     /* Light Theme Overrides */
-    .theme-light .reader-mobile-dock {
-        background: rgba(255, 255, 255, 0.85); /* Translucent light mode */
-        border: 1px solid rgba(45, 42, 38, 0.08); /* Light theme microscopic border */
-        box-shadow: 0 8px 32px rgba(139, 130, 115, 0.1);
+    .theme-light ::deep .reader-mobile-dock {
+        background: rgba(244, 241, 234, 0.9); /* Translucent light mode warm paper background */
+        border: 1px solid rgba(139, 130, 115, 0.18); /* Light theme sepia border */
+        box-shadow: 0 8px 30px rgba(139, 130, 115, 0.15);
     }
     
-    .theme-light .dock-item {
+    .theme-light ::deep .dock-item {
         color: var(--text-muted);
     }
     
-    .theme-light .dock-item:hover, .theme-light .dock-item.active {
-        color: var(--accent);
+    .theme-light ::deep .dock-item:hover, .theme-light ::deep .dock-item.active {
+        color: var(--accent) !important;
         filter: drop-shadow(0 0 3px var(--accent-glow));
     }
     
-    .theme-light .central-action-inner {
-        background: var(--bg-surface);
-        color: var(--accent);
-        border: 2px solid var(--accent);
-        box-shadow: 0 8px 24px var(--accent-glow);
+    .theme-light ::deep .central-action-inner {
+        background: var(--accent) !important;
+        color: #ffffff !important;
+        border: none !important;
+        box-shadow: 0 4px 10px rgba(16, 185, 129, 0.25) !important;
     }
     
-    .theme-light .dock-item.central-action:hover .central-action-inner,
-    .theme-light .dock-item.central-action.active .central-action-inner {
-        box-shadow: 0 12px 28px var(--accent-glow);
+    .theme-light ::deep .dock-item.central-action:hover .central-action-inner,
+    .theme-light ::deep .dock-item.central-action.active .central-action-inner {
+        box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35) !important;
+        transform: scale(1.05);
     }
     
-    .theme-light .central-action-glow {
+    .theme-light ::deep .central-action-glow {
         display: none;
     }
 }
diff --git a/src/NexusReader.UI.Shared/Pages/Catalog.razor.css b/src/NexusReader.UI.Shared/Pages/Catalog.razor.css
index eda30ac..9ac910d 100644
--- a/src/NexusReader.UI.Shared/Pages/Catalog.razor.css
+++ b/src/NexusReader.UI.Shared/Pages/Catalog.razor.css
@@ -391,7 +391,7 @@
 
 @media (max-width: 767px) {
     .catalog-page {
-        padding: 1.5rem 1rem;
+        padding: 1.5rem 1rem calc(1.5rem + 72px + env(safe-area-inset-bottom, 0px)) !important;
     }
     
     .catalog-header {
diff --git a/src/NexusReader.UI.Shared/Pages/ConceptsDashboard.razor.css b/src/NexusReader.UI.Shared/Pages/ConceptsDashboard.razor.css
index 0dbd5ed..51756c2 100644
--- a/src/NexusReader.UI.Shared/Pages/ConceptsDashboard.razor.css
+++ b/src/NexusReader.UI.Shared/Pages/ConceptsDashboard.razor.css
@@ -453,3 +453,17 @@
 .theme-light .header-actions .btn-action:hover {
     box-shadow: 0 0 12px rgba(16, 185, 129, 0.1);
 }
+
+@media (max-width: 767px) {
+    .concepts-dashboard-container {
+        padding: 1rem 0.75rem calc(1.5rem + 72px + env(safe-area-inset-bottom, 0px)) !important;
+        gap: 1rem;
+    }
+    .dashboard-header {
+        padding: 1rem;
+        gap: 0.75rem;
+    }
+    .header-title h1 {
+        font-size: 1.25rem;
+    }
+}
diff --git a/src/NexusReader.UI.Shared/Pages/Dashboard.razor.css b/src/NexusReader.UI.Shared/Pages/Dashboard.razor.css
index c6fdb0b..58edbe9 100644
--- a/src/NexusReader.UI.Shared/Pages/Dashboard.razor.css
+++ b/src/NexusReader.UI.Shared/Pages/Dashboard.razor.css
@@ -526,27 +526,27 @@
 /* Mobile Dashboard Overrides */
 @media (max-width: 767px) {
     .dashboard-content {
-        padding: 1rem 0.5rem;
+        padding: 0.5rem 0.5rem calc(1.5rem + 64px) !important;
     }
 
     .profile-header {
-        padding: 16px;
+        padding: 10px 12px;
         background: var(--bg-surface);
         border: 1px solid var(--border);
-        border-radius: 16px;
-        margin-bottom: 16px;
+        border-radius: 12px;
+        margin-bottom: 10px;
     }
 
     .profile-visual {
         display: grid;
         grid-template-columns: auto 1fr;
         align-items: center;
-        gap: 0.75rem;
+        gap: 0.5rem;
     }
 
     .avatar-wrapper {
-        width: 48px;
-        height: 48px;
+        width: 40px;
+        height: 40px;
         margin: 0;
     }
 
@@ -555,7 +555,7 @@
     }
 
     .username {
-        font-size: 1.15rem;
+        font-size: 1.05rem;
         font-weight: 600;
         text-align: left;
         margin: 0;
@@ -563,7 +563,7 @@
     }
 
     .user-role {
-        font-size: 0.85rem;
+        font-size: 0.8rem;
     }
 
     .status-pills {
@@ -572,8 +572,8 @@
         flex-direction: row;
         justify-content: space-between;
         width: 100%;
-        gap: 0.35rem;
-        margin-top: 0.25rem;
+        gap: 0.25rem;
+        margin-top: 0.15rem;
     }
 
     .status-pill {
@@ -581,44 +581,62 @@
         display: flex;
         justify-content: center;
         align-items: center;
-        padding: 0.35rem 0.5rem;
-        font-size: 0.7rem;
-        gap: 0.25rem;
+        padding: 0.25rem 0.4rem;
+        font-size: 0.65rem;
+        gap: 0.2rem;
         white-space: nowrap;
+        border-radius: 6px;
     }
 
     .section-title {
-        font-size: 1.5rem;
+        font-size: 1.25rem;
         font-weight: 700;
         letter-spacing: -0.5px;
-        margin-bottom: 12px;
+        margin-top: 4px;
+        margin-bottom: 8px;
         color: var(--text-main);
     }
 
     .main-grid {
         grid-template-columns: 1fr !important;
-        gap: 1rem !important;
+        gap: 0.75rem !important;
     }
 
     .secondary-grid {
+        display: grid !important;
         grid-template-columns: 1fr !important;
-        gap: 1rem !important;
+        gap: 0.75rem !important;
     }
 
     /* Force all widgets to take 100% width and fit inside parent container nicely */
     .glass-panel {
         width: 100% !important;
-        padding: 1rem !important;
+        padding: 12px !important;
         box-sizing: border-box;
     }
 
     /* Compress Knowledge Graph and Concept stack heights to maximize visible fold space */
     .graph-placeholder {
-        height: 140px;
+        height: 120px;
     }
 
     .concepts-linear-stack {
-        height: 150px;
+        height: 120px !important;
+        max-height: 120px !important;
+        overflow-y: auto !important;
+        padding-right: 4px;
+    }
+
+    .concept-linear-item {
+        padding: 6px 8px !important;
+        font-size: 0.75rem !important;
+        gap: 0.5rem !important;
+        min-height: auto !important; /* Prevent touch target min-height expansion */
+    }
+
+    .concept-badge {
+        padding: 2px 6px !important;
+        font-size: 0.65rem !important;
     }
 
     /* Expand touch-targets to 48px min height for interactive elements */
diff --git a/src/NexusReader.UI.Shared/Pages/MyBooks.razor.css b/src/NexusReader.UI.Shared/Pages/MyBooks.razor.css
index 84e02d5..62c8c96 100644
--- a/src/NexusReader.UI.Shared/Pages/MyBooks.razor.css
+++ b/src/NexusReader.UI.Shared/Pages/MyBooks.razor.css
@@ -410,7 +410,7 @@
 
 @media (max-width: 767px) {
     .my-books-page {
-        padding: 1.5rem 1rem;
+        padding: 1.5rem 1rem calc(1.5rem + 72px + env(safe-area-inset-bottom, 0px)) !important;
     }
     
     .my-books-header {
@@ -439,5 +439,9 @@
         grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
         gap: 1.25rem;
     }
+
+    .book-cover-container {
+        height: 200px !important;
+    }
 }