diff --git a/src/NexusReader.UI.Shared/Components/Organisms/ReaderFooter.razor.css b/src/NexusReader.UI.Shared/Components/Organisms/ReaderFooter.razor.css
index 8a403d9..29c3910 100644
--- a/src/NexusReader.UI.Shared/Components/Organisms/ReaderFooter.razor.css
+++ b/src/NexusReader.UI.Shared/Components/Organisms/ReaderFooter.razor.css
@@ -18,9 +18,11 @@
 }
 
 .navigation-controls {
-    display: flex;
+    display: grid;
+    grid-template-columns: 32px 1fr 32px;
     align-items: center;
-    gap: 1rem;
+    gap: 0.75rem;
+    width: 260px;
     flex-shrink: 0;
 }
 
@@ -51,18 +53,22 @@
 
 .chapter-info {
     display: flex;
+    flex-direction: column;
     align-items: center;
-    gap: 0.5rem;
-    font-size: 0.85rem;
-    color: #333;
-    white-space: nowrap;
+    justify-content: center;
+    min-width: 0;
+    overflow: hidden;
 }
 
 .chapter-title {
     font-weight: 600;
-    max-width: 180px;
+    font-size: 0.75rem;
+    max-width: 100%;
     overflow: hidden;
     text-overflow: ellipsis;
+    white-space: nowrap;
+    text-align: center;
+    line-height: 1.2;
 }
 
 .chapter-count {