diff --git a/src/components/Supporter/Supporter.css b/src/components/Supporter/Supporter.css
index e821df5..855384f 100644
--- a/src/components/Supporter/Supporter.css
+++ b/src/components/Supporter/Supporter.css
@@ -22,6 +22,8 @@
     display: flex;
     gap: 17.3px;
     justify-content: center;
+    margin-top: 20px;
+    margin-bottom: 30px;
   }
 
   .patreon-button {
diff --git a/src/components/common/RelatedPagesNav.jsx b/src/components/common/RelatedPagesNav.jsx
index 51f75a8..9fdb552 100644
--- a/src/components/common/RelatedPagesNav.jsx
+++ b/src/components/common/RelatedPagesNav.jsx
@@ -1,7 +1,5 @@
-// src/components/common/RelatedPagesNav.jsx
-
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import './RelatedPagesNav.css';
 
 const RelatedPagesNav = ({ currentPage }) => {
@@ -27,21 +25,35 @@ const RelatedPagesNav = ({ currentPage }) => {
     }
   ];
 
+  const navigate = useNavigate();
+
   // Filter out the current page
   const otherPages = pages.filter(page => page.id !== currentPage);
 
+  // Function to handle navigation and scroll to top
+  const handleNavigation = (path, e) => {
+    e.preventDefault();
+    navigate(path);
+    window.scrollTo(0, 0);
+  };
+
   return (
     <div className="related-pages-container">
       <h3 className="related-pages-title">Related Pages</h3>
       <div className="related-pages-links">
         {otherPages.map(page => (
-          <Link key={page.id} to={page.path} className="related-page-link">
+          <a 
+            key={page.id}
+            href={page.path}
+            className="related-page-link"
+            onClick={(e) => handleNavigation(page.path, e)}
+          >
             <div className="related-page-content">
               <h4>{page.title}</h4>
               <p>{page.description}</p>
             </div>
             <span className="related-page-arrow">→</span>
-          </Link>
+          </a>
         ))}
       </div>
     </div>