diff --git a/css/components/dark-mode.css b/css/components/dark-mode.css
index f5c2dfb..983fb1f 100644
--- a/css/components/dark-mode.css
+++ b/css/components/dark-mode.css
@@ -557,6 +557,7 @@
 .dark .related-container .link {
   background: var(--color-dark-surface);
   border-color: var(--color-dark-border);
+  color: var(--color-light-text-accent);
 }
 
 .dark .related-container .link:hover {
@@ -564,11 +565,11 @@
   background: var(--color-dark-surface-hover);
 }
 
-.dark .related-container .link a {
+.dark .related-container .link .link-title {
   color: var(--color-light-text-accent);
 }
 
-.dark .related-container .link span {
+.dark .related-container .link > span:not(.link-title) {
   color: var(--color-light-text-accent);
 }
 
diff --git a/css/components/layout.css b/css/components/layout.css
index b388374..182fafb 100644
--- a/css/components/layout.css
+++ b/css/components/layout.css
@@ -188,21 +188,15 @@
 
 /* Modern Page Navigation (Previous/Next) */
 @utility related-container {
-  display: grid;
-  grid-template-columns: 1fr;
+  display: flex;
+  justify-content: space-between;
   gap: var(--space-lg);
   margin: var(--space-2xl) 0;
-  padding: 0;
-  background: transparent;
-  border: none;
-  border-radius: 0;
-  box-shadow: none;
-  transition: none;
+  flex-wrap: wrap;
 }
 
 @media (min-width: 768px) {
   .related-container {
-    grid-template-columns: 1fr 1fr;
     gap: var(--space-xl);
   }
 }
@@ -211,12 +205,14 @@
   display: flex;
   align-items: center;
   gap: var(--space-sm);
-  padding: var(--space-md) var(--space-lg);
+  padding: var(--space-sm) var(--space-md);
   background: var(--color-light-surface);
   border: 1px solid var(--color-light-border);
   border-radius: var(--radius-md);
   transition: all var(--duration-fast) var(--ease-out);
   text-decoration: none;
+  color: var(--color-light-link);
+  font-weight: 600;
 }
 
 .related-container .link:hover {
@@ -224,41 +220,18 @@
   background: var(--color-light-surface-hover);
 }
 
-.related-container .link a {
-  color: var(--color-light-link);
-  font-weight: 600;
-  text-decoration: none;
-  flex: 1;
-  pointer-events: none;
-}
-
-.related-container .link a::after {
+.related-container .link::after {
   display: none;
 }
 
-.related-container .link span {
-  font-size: var(--text-2xl);
+.related-container .link .link-title {
+  flex: 1;
   color: var(--color-light-link);
-  transition: transform var(--duration-fast) var(--ease-out);
-  flex-shrink: 0;
-  pointer-events: none;
-}
-
-.related-container .link-previous {
-  justify-content: flex-start;
-}
-
-.related-container .link-previous:hover span {
-  transform: translateX(-4px);
-}
-
-.related-container .link-next {
-  justify-content: flex-end;
-  text-align: right;
 }
 
-.related-container .link-next:hover span {
-  transform: translateX(4px);
+.related-container .link > span:not(.link-title) {
+  color: var(--color-light-link);
+  flex-shrink: 0;
 }
 
 /* Back to Top Button - Modern floating action */
diff --git a/templates/base.html b/templates/base.html
index 36708fc..c53ab10 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -37,7 +37,10 @@
   <meta property="og:image:height" content="512" />
 
   {% block rss %}
-  <link rel="alternate" type="application/atom+xml" title="Blog" href="{{ get_url(path='atom.xml', trailing_slash=false) }}">
+  {% if config.generate_feeds %}
+  <link type="application/atom+xml" rel="alternate" title="{{ config.title }} - Blog" href="{{ get_url(path=config.feed_filename | default(value='atom.xml')) | safe }}">
+  <link type="application/rss+xml" rel="alternate" title="{{ config.title }} - Blog" href="{{ get_url(path=config.feed_filename | default(value='atom.xml')) | safe }}" >
+  {% endif %}
   {% endblock %}
 </head>
 
diff --git a/templates/blog-entry.html b/templates/blog-entry.html
index 6e35e7e..bf6f4bd 100644
--- a/templates/blog-entry.html
+++ b/templates/blog-entry.html
@@ -13,18 +13,18 @@ <h1>{{page.title}}</h1>
     {{page.content | safe}}
 
     <div class="related-container">
-      {% if page.earlier %}
-      <div class="link link-previous">
+      {% if page.lower %}
+      <a href="{{ page.lower.permalink }}" class="link link-previous">
         <span>&larr;</span>
-        <a href="{{ page.earlier.permalink }}">{{ page.earlier.title }}</a>
-      </div>
+        <span class="link-title">{{ page.lower.title }}</span>
+      </a>
       {% endif %}
 
-      {% if page.later %}
-      <div class="link link-next">
-        <a href="{{ page.later.permalink }}">{{ page.later.title }}</a>
+      {% if page.higher %}
+      <a href="{{ page.higher.permalink }}" class="link link-next">
+        <span class="link-title">{{ page.higher.title }}</span>
         <span>&rarr;</span>
-      </div>
+      </a>
       {% endif %}
     </div>
   </div>