diff --git a/404.html b/404.html
index 290540c9..706b472d 100644
--- a/404.html
+++ b/404.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" id="top">
+<html lang="en" id="page-top">
     <head>
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -45,8 +45,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div>
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -244,13 +243,13 @@ <h2 class="header__title">
 
     headerLinkAll[headerLinkAll.length - 1].addEventListener("blur", handleBlur);
 </script>
-            <main id="content">
-                <h2 class="heading--main text-center">Oops! Content not found.</h2>
+        <main id="content">
+            <h2 class="heading--main text-center">Oops! Content not found.</h2>
 
 <p class="text-center">Go back to <a href="/">home page</a>.</p>
 
-            </main>
-            <footer class="footer">
+        </main>
+        <footer class="footer">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
     <ul class="socials__links">
@@ -296,6 +295,54 @@ <h2 class="visually-hidden">Social Links:</h2>
 
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
+    <p><a class="footer__top-link" href="#page-top">Back to Top</a></p>
+    <button class="top-btn hidden" aria-label="Scroll to top">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M7 11l5-5m0 0l5 5m-5-5v12" />
+    </svg>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        margin: 0;
+        padding: 0;
+        bottom: 0.5rem;
+        right: 0.5rem;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn-bg);
+        color: var(--clr-top-btn-txt);
+        border-radius: 50em;
+        width: 2rem;
+        aspect-ratio: 1 / 1;
+    }
+
+    .top-btn:focus {
+        outline: 0.25em solid var(--clr-top-btn-bg);
+        outline-offset: 0.15em;
+    }
+</style>
+
+<script defer>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script>
     <div class="h-card hidden">
     <span class="p-name">Helen Chong</span>
     <span class="p-given-name">Helen</span>
@@ -366,7 +413,5 @@ <h2 class="visually-hidden">Social Links:</h2>
         }
     }
 </style>
-        </div>
-        <a href="#top" class="top-btn"><span class="visually-hidden">Back to top</span></a>
     </body>
 </html>
\ No newline at end of file
diff --git a/about/index.html b/about/index.html
index 547b7f99..0bf1dbd6 100644
--- a/about/index.html
+++ b/about/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" id="top">
+<html lang="en" id="page-top">
     <head>
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -45,8 +45,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div>
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -244,8 +243,8 @@ <h2 class="header__title">
 
     headerLinkAll[headerLinkAll.length - 1].addEventListener("blur", handleBlur);
 </script>
-            <main id="content">
-                
+        <main id="content">
+            
 <header class="main__header">
     
     <nav>
@@ -284,8 +283,8 @@ <h2>My Certificates:</h2>
     
 </div>
 
-            </main>
-            <footer class="footer">
+        </main>
+        <footer class="footer">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
     <ul class="socials__links">
@@ -331,6 +330,54 @@ <h2 class="visually-hidden">Social Links:</h2>
 
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
+    <p><a class="footer__top-link" href="#page-top">Back to Top</a></p>
+    <button class="top-btn hidden" aria-label="Scroll to top">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M7 11l5-5m0 0l5 5m-5-5v12" />
+    </svg>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        margin: 0;
+        padding: 0;
+        bottom: 0.5rem;
+        right: 0.5rem;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn-bg);
+        color: var(--clr-top-btn-txt);
+        border-radius: 50em;
+        width: 2rem;
+        aspect-ratio: 1 / 1;
+    }
+
+    .top-btn:focus {
+        outline: 0.25em solid var(--clr-top-btn-bg);
+        outline-offset: 0.15em;
+    }
+</style>
+
+<script defer>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script>
     <div class="h-card hidden">
     <span class="p-name">Helen Chong</span>
     <span class="p-given-name">Helen</span>
@@ -401,7 +448,5 @@ <h2 class="visually-hidden">Social Links:</h2>
         }
     }
 </style>
-        </div>
-        <a href="#top" class="top-btn"><span class="visually-hidden">Back to top</span></a>
     </body>
 </html>
\ No newline at end of file
diff --git a/accessibility/index.html b/accessibility/index.html
index b750feb3..6a5802c1 100644
--- a/accessibility/index.html
+++ b/accessibility/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" id="top">
+<html lang="en" id="page-top">
     <head>
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -48,8 +48,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div>
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -247,8 +246,8 @@ <h2 class="header__title">
 
     headerLinkAll[headerLinkAll.length - 1].addEventListener("blur", handleBlur);
 </script>
-            <main id="content">
-                
+        <main id="content">
+            
 <header class="main__header">
     
 
@@ -295,8 +294,8 @@ <h1 class="heading--main">Accessibility</h1>
     
 </div>
 
-            </main>
-            <footer class="footer">
+        </main>
+        <footer class="footer">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
     <ul class="socials__links">
@@ -342,6 +341,54 @@ <h2 class="visually-hidden">Social Links:</h2>
 
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
+    <p><a class="footer__top-link" href="#page-top">Back to Top</a></p>
+    <button class="top-btn hidden" aria-label="Scroll to top">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M7 11l5-5m0 0l5 5m-5-5v12" />
+    </svg>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        margin: 0;
+        padding: 0;
+        bottom: 0.5rem;
+        right: 0.5rem;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn-bg);
+        color: var(--clr-top-btn-txt);
+        border-radius: 50em;
+        width: 2rem;
+        aspect-ratio: 1 / 1;
+    }
+
+    .top-btn:focus {
+        outline: 0.25em solid var(--clr-top-btn-bg);
+        outline-offset: 0.15em;
+    }
+</style>
+
+<script defer>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script>
     <div class="h-card hidden">
     <span class="p-name">Helen Chong</span>
     <span class="p-given-name">Helen</span>
@@ -412,7 +459,5 @@ <h2 class="visually-hidden">Social Links:</h2>
         }
     }
 </style>
-        </div>
-        <a href="#top" class="top-btn"><span class="visually-hidden">Back to top</span></a>
     </body>
 </html>
\ No newline at end of file
diff --git a/assets/css/components.css b/assets/css/components.css
index ac3f00b0..a10d26c4 100644
--- a/assets/css/components.css
+++ b/assets/css/components.css
@@ -19,36 +19,6 @@
     outline: 0.2em solid var(--clr-accent-600);
 }
 
-/* Back to top button */
-.top-btn {
-    --offset: 100px;
-    position: sticky;
-    bottom: 0.5rem;
-    margin-right: 0.5rem;
-    place-self: end;
-    margin-top: calc(100vh + var(--offset));
-    z-index: 999;
-
-    width: 2rem;
-    aspect-ratio: 1;
-    background: var(--clr-top-btn-bg);
-    border-radius: 50em;
-}
-
-.top-btn:before {
-    content:"";
-    position: absolute;
-    inset: 30%;
-    transform: translateY(20%) rotate(-45deg);
-    border-top: 5px solid var(--clr-top-btn-txt);
-    border-right: 5px solid var(--clr-top-btn-txt);
-}
-
-.top-btn:focus {
-    outline: 0.25em solid var(--clr-top-btn-bg);
-    outline-offset: 0.15em;
-}
-
 /* Breadcumbs */
 .breadcrumbs {
     list-style: none;
diff --git a/assets/css/general.css b/assets/css/general.css
index fdb0a026..b489e8c7 100644
--- a/assets/css/general.css
+++ b/assets/css/general.css
@@ -8,9 +8,8 @@ html {
 body {
     color: var(--clr-txt-default);
     background-color: var(--clr-body-bg);
-    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
     display: grid;
-    grid-template-columns: 0px auto 0px;
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 }
 
 main {
diff --git a/blog/categories/100-days-of-code/index.html b/blog/categories/100-days-of-code/index.html
index e1576e83..19652a6e 100644
--- a/blog/categories/100-days-of-code/index.html
+++ b/blog/categories/100-days-of-code/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" id="top">
+<html lang="en" id="page-top">
     <head>
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -45,8 +45,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div>
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -244,8 +243,8 @@ <h2 class="header__title">
 
     headerLinkAll[headerLinkAll.length - 1].addEventListener("blur", handleBlur);
 </script>
-            <main id="content">
-                
+        <main id="content">
+            
 <header class="main__header">
     
 
@@ -308,8 +307,8 @@ <h2 class="blog__nav--title">Blog Navigation</h3>
     
 </div>
 
-            </main>
-            <footer class="footer">
+        </main>
+        <footer class="footer">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
     <ul class="socials__links">
@@ -355,6 +354,54 @@ <h2 class="visually-hidden">Social Links:</h2>
 
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
+    <p><a class="footer__top-link" href="#page-top">Back to Top</a></p>
+    <button class="top-btn hidden" aria-label="Scroll to top">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M7 11l5-5m0 0l5 5m-5-5v12" />
+    </svg>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        margin: 0;
+        padding: 0;
+        bottom: 0.5rem;
+        right: 0.5rem;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn-bg);
+        color: var(--clr-top-btn-txt);
+        border-radius: 50em;
+        width: 2rem;
+        aspect-ratio: 1 / 1;
+    }
+
+    .top-btn:focus {
+        outline: 0.25em solid var(--clr-top-btn-bg);
+        outline-offset: 0.15em;
+    }
+</style>
+
+<script defer>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script>
     <div class="h-card hidden">
     <span class="p-name">Helen Chong</span>
     <span class="p-given-name">Helen</span>
@@ -425,7 +472,5 @@ <h2 class="visually-hidden">Social Links:</h2>
         }
     }
 </style>
-        </div>
-        <a href="#top" class="top-btn"><span class="visually-hidden">Back to top</span></a>
     </body>
 </html>
\ No newline at end of file
diff --git a/blog/categories/about-this-blog/index.html b/blog/categories/about-this-blog/index.html
index 9e7959dd..30d9009c 100644
--- a/blog/categories/about-this-blog/index.html
+++ b/blog/categories/about-this-blog/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" id="top">
+<html lang="en" id="page-top">
     <head>
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -45,8 +45,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div>
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -244,8 +243,8 @@ <h2 class="header__title">
 
     headerLinkAll[headerLinkAll.length - 1].addEventListener("blur", handleBlur);
 </script>
-            <main id="content">
-                
+        <main id="content">
+            
 <header class="main__header">
     
 
@@ -318,8 +317,8 @@ <h2 class="blog__nav--title">Blog Navigation</h3>
     
 </div>
 
-            </main>
-            <footer class="footer">
+        </main>
+        <footer class="footer">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
     <ul class="socials__links">
@@ -365,6 +364,54 @@ <h2 class="visually-hidden">Social Links:</h2>
 
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
+    <p><a class="footer__top-link" href="#page-top">Back to Top</a></p>
+    <button class="top-btn hidden" aria-label="Scroll to top">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M7 11l5-5m0 0l5 5m-5-5v12" />
+    </svg>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        margin: 0;
+        padding: 0;
+        bottom: 0.5rem;
+        right: 0.5rem;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn-bg);
+        color: var(--clr-top-btn-txt);
+        border-radius: 50em;
+        width: 2rem;
+        aspect-ratio: 1 / 1;
+    }
+
+    .top-btn:focus {
+        outline: 0.25em solid var(--clr-top-btn-bg);
+        outline-offset: 0.15em;
+    }
+</style>
+
+<script defer>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script>
     <div class="h-card hidden">
     <span class="p-name">Helen Chong</span>
     <span class="p-given-name">Helen</span>
@@ -435,7 +482,5 @@ <h2 class="visually-hidden">Social Links:</h2>
         }
     }
 </style>
-        </div>
-        <a href="#top" class="top-btn"><span class="visually-hidden">Back to top</span></a>
     </body>
 </html>
\ No newline at end of file
diff --git a/blog/categories/about-this-website/index.html b/blog/categories/about-this-website/index.html
index c9328a46..487ed8bc 100644
--- a/blog/categories/about-this-website/index.html
+++ b/blog/categories/about-this-website/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" id="top">
+<html lang="en" id="page-top">
     <head>
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -45,8 +45,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div>
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -244,8 +243,8 @@ <h2 class="header__title">
 
     headerLinkAll[headerLinkAll.length - 1].addEventListener("blur", handleBlur);
 </script>
-            <main id="content">
-                
+        <main id="content">
+            
 <header class="main__header">
     
 
@@ -328,8 +327,8 @@ <h2 class="blog__nav--title">Blog Navigation</h3>
     
 </div>
 
-            </main>
-            <footer class="footer">
+        </main>
+        <footer class="footer">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
     <ul class="socials__links">
@@ -375,6 +374,54 @@ <h2 class="visually-hidden">Social Links:</h2>
 
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
+    <p><a class="footer__top-link" href="#page-top">Back to Top</a></p>
+    <button class="top-btn hidden" aria-label="Scroll to top">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M7 11l5-5m0 0l5 5m-5-5v12" />
+    </svg>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        margin: 0;
+        padding: 0;
+        bottom: 0.5rem;
+        right: 0.5rem;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn-bg);
+        color: var(--clr-top-btn-txt);
+        border-radius: 50em;
+        width: 2rem;
+        aspect-ratio: 1 / 1;
+    }
+
+    .top-btn:focus {
+        outline: 0.25em solid var(--clr-top-btn-bg);
+        outline-offset: 0.15em;
+    }
+</style>
+
+<script defer>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script>
     <div class="h-card hidden">
     <span class="p-name">Helen Chong</span>
     <span class="p-given-name">Helen</span>
@@ -445,7 +492,5 @@ <h2 class="visually-hidden">Social Links:</h2>
         }
     }
 </style>
-        </div>
-        <a href="#top" class="top-btn"><span class="visually-hidden">Back to top</span></a>
     </body>
 </html>
\ No newline at end of file
diff --git a/blog/categories/cassette-beasts/index.html b/blog/categories/cassette-beasts/index.html
index 593eac56..16dc2ebc 100644
--- a/blog/categories/cassette-beasts/index.html
+++ b/blog/categories/cassette-beasts/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" id="top">
+<html lang="en" id="page-top">
     <head>
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -45,8 +45,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div>
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -244,8 +243,8 @@ <h2 class="header__title">
 
     headerLinkAll[headerLinkAll.length - 1].addEventListener("blur", handleBlur);
 </script>
-            <main id="content">
-                
+        <main id="content">
+            
 <header class="main__header">
     
 
@@ -308,8 +307,8 @@ <h2 class="blog__nav--title">Blog Navigation</h3>
     
 </div>
 
-            </main>
-            <footer class="footer">
+        </main>
+        <footer class="footer">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
     <ul class="socials__links">
@@ -355,6 +354,54 @@ <h2 class="visually-hidden">Social Links:</h2>
 
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
+    <p><a class="footer__top-link" href="#page-top">Back to Top</a></p>
+    <button class="top-btn hidden" aria-label="Scroll to top">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M7 11l5-5m0 0l5 5m-5-5v12" />
+    </svg>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        margin: 0;
+        padding: 0;
+        bottom: 0.5rem;
+        right: 0.5rem;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn-bg);
+        color: var(--clr-top-btn-txt);
+        border-radius: 50em;
+        width: 2rem;
+        aspect-ratio: 1 / 1;
+    }
+
+    .top-btn:focus {
+        outline: 0.25em solid var(--clr-top-btn-bg);
+        outline-offset: 0.15em;
+    }
+</style>
+
+<script defer>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script>
     <div class="h-card hidden">
     <span class="p-name">Helen Chong</span>
     <span class="p-given-name">Helen</span>
@@ -425,7 +472,5 @@ <h2 class="visually-hidden">Social Links:</h2>
         }
     }
 </style>
-        </div>
-        <a href="#top" class="top-btn"><span class="visually-hidden">Back to top</span></a>
     </body>
 </html>
\ No newline at end of file
diff --git a/blog/categories/cbpickaxe/index.html b/blog/categories/cbpickaxe/index.html
index 82c62127..a6dc1c51 100644
--- a/blog/categories/cbpickaxe/index.html
+++ b/blog/categories/cbpickaxe/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" id="top">
+<html lang="en" id="page-top">
     <head>
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -45,8 +45,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div>
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -244,8 +243,8 @@ <h2 class="header__title">
 
     headerLinkAll[headerLinkAll.length - 1].addEventListener("blur", handleBlur);
 </script>
-            <main id="content">
-                
+        <main id="content">
+            
 <header class="main__header">
     
 
@@ -308,8 +307,8 @@ <h2 class="blog__nav--title">Blog Navigation</h3>
     
 </div>
 
-            </main>
-            <footer class="footer">
+        </main>
+        <footer class="footer">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
     <ul class="socials__links">
@@ -355,6 +354,54 @@ <h2 class="visually-hidden">Social Links:</h2>
 
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
+    <p><a class="footer__top-link" href="#page-top">Back to Top</a></p>
+    <button class="top-btn hidden" aria-label="Scroll to top">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M7 11l5-5m0 0l5 5m-5-5v12" />
+    </svg>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        margin: 0;
+        padding: 0;
+        bottom: 0.5rem;
+        right: 0.5rem;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn-bg);
+        color: var(--clr-top-btn-txt);
+        border-radius: 50em;
+        width: 2rem;
+        aspect-ratio: 1 / 1;
+    }
+
+    .top-btn:focus {
+        outline: 0.25em solid var(--clr-top-btn-bg);
+        outline-offset: 0.15em;
+    }
+</style>
+
+<script defer>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script>
     <div class="h-card hidden">
     <span class="p-name">Helen Chong</span>
     <span class="p-given-name">Helen</span>
@@ -425,7 +472,5 @@ <h2 class="visually-hidden">Social Links:</h2>
         }
     }
 </style>
-        </div>
-        <a href="#top" class="top-btn"><span class="visually-hidden">Back to top</span></a>
     </body>
 </html>
\ No newline at end of file
diff --git a/blog/categories/chingu/index.html b/blog/categories/chingu/index.html
index b30c0017..10909b70 100644
--- a/blog/categories/chingu/index.html
+++ b/blog/categories/chingu/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" id="top">
+<html lang="en" id="page-top">
     <head>
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -45,8 +45,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div>
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -244,8 +243,8 @@ <h2 class="header__title">
 
     headerLinkAll[headerLinkAll.length - 1].addEventListener("blur", handleBlur);
 </script>
-            <main id="content">
-                
+        <main id="content">
+            
 <header class="main__header">
     
 
@@ -318,8 +317,8 @@ <h2 class="blog__nav--title">Blog Navigation</h3>
     
 </div>
 
-            </main>
-            <footer class="footer">
+        </main>
+        <footer class="footer">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
     <ul class="socials__links">
@@ -365,6 +364,54 @@ <h2 class="visually-hidden">Social Links:</h2>
 
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
+    <p><a class="footer__top-link" href="#page-top">Back to Top</a></p>
+    <button class="top-btn hidden" aria-label="Scroll to top">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M7 11l5-5m0 0l5 5m-5-5v12" />
+    </svg>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        margin: 0;
+        padding: 0;
+        bottom: 0.5rem;
+        right: 0.5rem;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn-bg);
+        color: var(--clr-top-btn-txt);
+        border-radius: 50em;
+        width: 2rem;
+        aspect-ratio: 1 / 1;
+    }
+
+    .top-btn:focus {
+        outline: 0.25em solid var(--clr-top-btn-bg);
+        outline-offset: 0.15em;
+    }
+</style>
+
+<script defer>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script>
     <div class="h-card hidden">
     <span class="p-name">Helen Chong</span>
     <span class="p-given-name">Helen</span>
@@ -435,7 +482,5 @@ <h2 class="visually-hidden">Social Links:</h2>
         }
     }
 </style>
-        </div>
-        <a href="#top" class="top-btn"><span class="visually-hidden">Back to top</span></a>
     </body>
 </html>
\ No newline at end of file
diff --git a/blog/categories/cs50/index.html b/blog/categories/cs50/index.html
index 907b7f9e..8fad956c 100644
--- a/blog/categories/cs50/index.html
+++ b/blog/categories/cs50/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" id="top">
+<html lang="en" id="page-top">
     <head>
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -45,8 +45,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div>
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -244,8 +243,8 @@ <h2 class="header__title">
 
     headerLinkAll[headerLinkAll.length - 1].addEventListener("blur", handleBlur);
 </script>
-            <main id="content">
-                
+        <main id="content">
+            
 <header class="main__header">
     
 
@@ -338,8 +337,8 @@ <h2 class="blog__nav--title">Blog Navigation</h3>
     
 </div>
 
-            </main>
-            <footer class="footer">
+        </main>
+        <footer class="footer">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
     <ul class="socials__links">
@@ -385,6 +384,54 @@ <h2 class="visually-hidden">Social Links:</h2>
 
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
+    <p><a class="footer__top-link" href="#page-top">Back to Top</a></p>
+    <button class="top-btn hidden" aria-label="Scroll to top">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M7 11l5-5m0 0l5 5m-5-5v12" />
+    </svg>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        margin: 0;
+        padding: 0;
+        bottom: 0.5rem;
+        right: 0.5rem;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn-bg);
+        color: var(--clr-top-btn-txt);
+        border-radius: 50em;
+        width: 2rem;
+        aspect-ratio: 1 / 1;
+    }
+
+    .top-btn:focus {
+        outline: 0.25em solid var(--clr-top-btn-bg);
+        outline-offset: 0.15em;
+    }
+</style>
+
+<script defer>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script>
     <div class="h-card hidden">
     <span class="p-name">Helen Chong</span>
     <span class="p-given-name">Helen</span>
@@ -455,7 +502,5 @@ <h2 class="visually-hidden">Social Links:</h2>
         }
     }
 </style>
-        </div>
-        <a href="#top" class="top-btn"><span class="visually-hidden">Back to top</span></a>
     </body>
 </html>
\ No newline at end of file
diff --git a/blog/categories/cs50x/index.html b/blog/categories/cs50x/index.html
index 50f42cda..374d5a7f 100644
--- a/blog/categories/cs50x/index.html
+++ b/blog/categories/cs50x/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" id="top">
+<html lang="en" id="page-top">
     <head>
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -45,8 +45,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div>
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -244,8 +243,8 @@ <h2 class="header__title">
 
     headerLinkAll[headerLinkAll.length - 1].addEventListener("blur", handleBlur);
 </script>
-            <main id="content">
-                
+        <main id="content">
+            
 <header class="main__header">
     
 
@@ -338,8 +337,8 @@ <h2 class="blog__nav--title">Blog Navigation</h3>
     
 </div>
 
-            </main>
-            <footer class="footer">
+        </main>
+        <footer class="footer">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
     <ul class="socials__links">
@@ -385,6 +384,54 @@ <h2 class="visually-hidden">Social Links:</h2>
 
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
+    <p><a class="footer__top-link" href="#page-top">Back to Top</a></p>
+    <button class="top-btn hidden" aria-label="Scroll to top">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M7 11l5-5m0 0l5 5m-5-5v12" />
+    </svg>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        margin: 0;
+        padding: 0;
+        bottom: 0.5rem;
+        right: 0.5rem;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn-bg);
+        color: var(--clr-top-btn-txt);
+        border-radius: 50em;
+        width: 2rem;
+        aspect-ratio: 1 / 1;
+    }
+
+    .top-btn:focus {
+        outline: 0.25em solid var(--clr-top-btn-bg);
+        outline-offset: 0.15em;
+    }
+</style>
+
+<script defer>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script>
     <div class="h-card hidden">
     <span class="p-name">Helen Chong</span>
     <span class="p-given-name">Helen</span>
@@ -455,7 +502,5 @@ <h2 class="visually-hidden">Social Links:</h2>
         }
     }
 </style>
-        </div>
-        <a href="#top" class="top-btn"><span class="visually-hidden">Back to top</span></a>
     </body>
 </html>
\ No newline at end of file
diff --git a/blog/categories/css/index.html b/blog/categories/css/index.html
index 7f5b14d8..c442eb4e 100644
--- a/blog/categories/css/index.html
+++ b/blog/categories/css/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" id="top">
+<html lang="en" id="page-top">
     <head>
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -45,8 +45,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div>
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -244,8 +243,8 @@ <h2 class="header__title">
 
     headerLinkAll[headerLinkAll.length - 1].addEventListener("blur", handleBlur);
 </script>
-            <main id="content">
-                
+        <main id="content">
+            
 <header class="main__header">
     
 
@@ -308,8 +307,8 @@ <h2 class="blog__nav--title">Blog Navigation</h3>
     
 </div>
 
-            </main>
-            <footer class="footer">
+        </main>
+        <footer class="footer">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
     <ul class="socials__links">
@@ -355,6 +354,54 @@ <h2 class="visually-hidden">Social Links:</h2>
 
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
+    <p><a class="footer__top-link" href="#page-top">Back to Top</a></p>
+    <button class="top-btn hidden" aria-label="Scroll to top">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M7 11l5-5m0 0l5 5m-5-5v12" />
+    </svg>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        margin: 0;
+        padding: 0;
+        bottom: 0.5rem;
+        right: 0.5rem;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn-bg);
+        color: var(--clr-top-btn-txt);
+        border-radius: 50em;
+        width: 2rem;
+        aspect-ratio: 1 / 1;
+    }
+
+    .top-btn:focus {
+        outline: 0.25em solid var(--clr-top-btn-bg);
+        outline-offset: 0.15em;
+    }
+</style>
+
+<script defer>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script>
     <div class="h-card hidden">
     <span class="p-name">Helen Chong</span>
     <span class="p-given-name">Helen</span>
@@ -425,7 +472,5 @@ <h2 class="visually-hidden">Social Links:</h2>
         }
     }
 </style>
-        </div>
-        <a href="#top" class="top-btn"><span class="visually-hidden">Back to top</span></a>
     </body>
 </html>
\ No newline at end of file
diff --git a/blog/categories/eleventy/index.html b/blog/categories/eleventy/index.html
index 6f5854a3..8ffb699b 100644
--- a/blog/categories/eleventy/index.html
+++ b/blog/categories/eleventy/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" id="top">
+<html lang="en" id="page-top">
     <head>
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -45,8 +45,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div>
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -244,8 +243,8 @@ <h2 class="header__title">
 
     headerLinkAll[headerLinkAll.length - 1].addEventListener("blur", handleBlur);
 </script>
-            <main id="content">
-                
+        <main id="content">
+            
 <header class="main__header">
     
 
@@ -308,8 +307,8 @@ <h2 class="blog__nav--title">Blog Navigation</h3>
     
 </div>
 
-            </main>
-            <footer class="footer">
+        </main>
+        <footer class="footer">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
     <ul class="socials__links">
@@ -355,6 +354,54 @@ <h2 class="visually-hidden">Social Links:</h2>
 
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
+    <p><a class="footer__top-link" href="#page-top">Back to Top</a></p>
+    <button class="top-btn hidden" aria-label="Scroll to top">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M7 11l5-5m0 0l5 5m-5-5v12" />
+    </svg>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        margin: 0;
+        padding: 0;
+        bottom: 0.5rem;
+        right: 0.5rem;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn-bg);
+        color: var(--clr-top-btn-txt);
+        border-radius: 50em;
+        width: 2rem;
+        aspect-ratio: 1 / 1;
+    }
+
+    .top-btn:focus {
+        outline: 0.25em solid var(--clr-top-btn-bg);
+        outline-offset: 0.15em;
+    }
+</style>
+
+<script defer>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script>
     <div class="h-card hidden">
     <span class="p-name">Helen Chong</span>
     <span class="p-given-name">Helen</span>
@@ -425,7 +472,5 @@ <h2 class="visually-hidden">Social Links:</h2>
         }
     }
 </style>
-        </div>
-        <a href="#top" class="top-btn"><span class="visually-hidden">Back to top</span></a>
     </body>
 </html>
\ No newline at end of file
diff --git a/blog/categories/flask/index.html b/blog/categories/flask/index.html
index c9659276..32f9974b 100644
--- a/blog/categories/flask/index.html
+++ b/blog/categories/flask/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" id="top">
+<html lang="en" id="page-top">
     <head>
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -45,8 +45,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div>
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -244,8 +243,8 @@ <h2 class="header__title">
 
     headerLinkAll[headerLinkAll.length - 1].addEventListener("blur", handleBlur);
 </script>
-            <main id="content">
-                
+        <main id="content">
+            
 <header class="main__header">
     
 
@@ -318,8 +317,8 @@ <h2 class="blog__nav--title">Blog Navigation</h3>
     
 </div>
 
-            </main>
-            <footer class="footer">
+        </main>
+        <footer class="footer">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
     <ul class="socials__links">
@@ -365,6 +364,54 @@ <h2 class="visually-hidden">Social Links:</h2>
 
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
+    <p><a class="footer__top-link" href="#page-top">Back to Top</a></p>
+    <button class="top-btn hidden" aria-label="Scroll to top">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M7 11l5-5m0 0l5 5m-5-5v12" />
+    </svg>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        margin: 0;
+        padding: 0;
+        bottom: 0.5rem;
+        right: 0.5rem;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn-bg);
+        color: var(--clr-top-btn-txt);
+        border-radius: 50em;
+        width: 2rem;
+        aspect-ratio: 1 / 1;
+    }
+
+    .top-btn:focus {
+        outline: 0.25em solid var(--clr-top-btn-bg);
+        outline-offset: 0.15em;
+    }
+</style>
+
+<script defer>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script>
     <div class="h-card hidden">
     <span class="p-name">Helen Chong</span>
     <span class="p-given-name">Helen</span>
@@ -435,7 +482,5 @@ <h2 class="visually-hidden">Social Links:</h2>
         }
     }
 </style>
-        </div>
-        <a href="#top" class="top-btn"><span class="visually-hidden">Back to top</span></a>
     </body>
 </html>
\ No newline at end of file
diff --git a/blog/categories/freecodecamp/index.html b/blog/categories/freecodecamp/index.html
index 8e5e726f..978a2799 100644
--- a/blog/categories/freecodecamp/index.html
+++ b/blog/categories/freecodecamp/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" id="top">
+<html lang="en" id="page-top">
     <head>
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -45,8 +45,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div>
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -244,8 +243,8 @@ <h2 class="header__title">
 
     headerLinkAll[headerLinkAll.length - 1].addEventListener("blur", handleBlur);
 </script>
-            <main id="content">
-                
+        <main id="content">
+            
 <header class="main__header">
     
 
@@ -308,8 +307,8 @@ <h2 class="blog__nav--title">Blog Navigation</h3>
     
 </div>
 
-            </main>
-            <footer class="footer">
+        </main>
+        <footer class="footer">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
     <ul class="socials__links">
@@ -355,6 +354,54 @@ <h2 class="visually-hidden">Social Links:</h2>
 
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
+    <p><a class="footer__top-link" href="#page-top">Back to Top</a></p>
+    <button class="top-btn hidden" aria-label="Scroll to top">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M7 11l5-5m0 0l5 5m-5-5v12" />
+    </svg>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        margin: 0;
+        padding: 0;
+        bottom: 0.5rem;
+        right: 0.5rem;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn-bg);
+        color: var(--clr-top-btn-txt);
+        border-radius: 50em;
+        width: 2rem;
+        aspect-ratio: 1 / 1;
+    }
+
+    .top-btn:focus {
+        outline: 0.25em solid var(--clr-top-btn-bg);
+        outline-offset: 0.15em;
+    }
+</style>
+
+<script defer>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script>
     <div class="h-card hidden">
     <span class="p-name">Helen Chong</span>
     <span class="p-given-name">Helen</span>
@@ -425,7 +472,5 @@ <h2 class="visually-hidden">Social Links:</h2>
         }
     }
 </style>
-        </div>
-        <a href="#top" class="top-btn"><span class="visually-hidden">Back to top</span></a>
     </body>
 </html>
\ No newline at end of file
diff --git a/blog/categories/github-pages/index.html b/blog/categories/github-pages/index.html
index 04a7ff3a..39a380ec 100644
--- a/blog/categories/github-pages/index.html
+++ b/blog/categories/github-pages/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" id="top">
+<html lang="en" id="page-top">
     <head>
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -45,8 +45,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div>
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -244,8 +243,8 @@ <h2 class="header__title">
 
     headerLinkAll[headerLinkAll.length - 1].addEventListener("blur", handleBlur);
 </script>
-            <main id="content">
-                
+        <main id="content">
+            
 <header class="main__header">
     
 
@@ -308,8 +307,8 @@ <h2 class="blog__nav--title">Blog Navigation</h3>
     
 </div>
 
-            </main>
-            <footer class="footer">
+        </main>
+        <footer class="footer">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
     <ul class="socials__links">
@@ -355,6 +354,54 @@ <h2 class="visually-hidden">Social Links:</h2>
 
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
+    <p><a class="footer__top-link" href="#page-top">Back to Top</a></p>
+    <button class="top-btn hidden" aria-label="Scroll to top">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M7 11l5-5m0 0l5 5m-5-5v12" />
+    </svg>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        margin: 0;
+        padding: 0;
+        bottom: 0.5rem;
+        right: 0.5rem;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn-bg);
+        color: var(--clr-top-btn-txt);
+        border-radius: 50em;
+        width: 2rem;
+        aspect-ratio: 1 / 1;
+    }
+
+    .top-btn:focus {
+        outline: 0.25em solid var(--clr-top-btn-bg);
+        outline-offset: 0.15em;
+    }
+</style>
+
+<script defer>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script>
     <div class="h-card hidden">
     <span class="p-name">Helen Chong</span>
     <span class="p-given-name">Helen</span>
@@ -425,7 +472,5 @@ <h2 class="visually-hidden">Social Links:</h2>
         }
     }
 </style>
-        </div>
-        <a href="#top" class="top-btn"><span class="visually-hidden">Back to top</span></a>
     </body>
 </html>
\ No newline at end of file
diff --git a/blog/categories/github/index.html b/blog/categories/github/index.html
index 655d3f83..8cca2259 100644
--- a/blog/categories/github/index.html
+++ b/blog/categories/github/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" id="top">
+<html lang="en" id="page-top">
     <head>
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -45,8 +45,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div>
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -244,8 +243,8 @@ <h2 class="header__title">
 
     headerLinkAll[headerLinkAll.length - 1].addEventListener("blur", handleBlur);
 </script>
-            <main id="content">
-                
+        <main id="content">
+            
 <header class="main__header">
     
 
@@ -308,8 +307,8 @@ <h2 class="blog__nav--title">Blog Navigation</h3>
     
 </div>
 
-            </main>
-            <footer class="footer">
+        </main>
+        <footer class="footer">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
     <ul class="socials__links">
@@ -355,6 +354,54 @@ <h2 class="visually-hidden">Social Links:</h2>
 
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
+    <p><a class="footer__top-link" href="#page-top">Back to Top</a></p>
+    <button class="top-btn hidden" aria-label="Scroll to top">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M7 11l5-5m0 0l5 5m-5-5v12" />
+    </svg>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        margin: 0;
+        padding: 0;
+        bottom: 0.5rem;
+        right: 0.5rem;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn-bg);
+        color: var(--clr-top-btn-txt);
+        border-radius: 50em;
+        width: 2rem;
+        aspect-ratio: 1 / 1;
+    }
+
+    .top-btn:focus {
+        outline: 0.25em solid var(--clr-top-btn-bg);
+        outline-offset: 0.15em;
+    }
+</style>
+
+<script defer>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script>
     <div class="h-card hidden">
     <span class="p-name">Helen Chong</span>
     <span class="p-given-name">Helen</span>
@@ -425,7 +472,5 @@ <h2 class="visually-hidden">Social Links:</h2>
         }
     }
 </style>
-        </div>
-        <a href="#top" class="top-btn"><span class="visually-hidden">Back to top</span></a>
     </body>
 </html>
\ No newline at end of file
diff --git a/blog/categories/html/index.html b/blog/categories/html/index.html
index fff68e30..57b000af 100644
--- a/blog/categories/html/index.html
+++ b/blog/categories/html/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" id="top">
+<html lang="en" id="page-top">
     <head>
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -45,8 +45,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div>
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -244,8 +243,8 @@ <h2 class="header__title">
 
     headerLinkAll[headerLinkAll.length - 1].addEventListener("blur", handleBlur);
 </script>
-            <main id="content">
-                
+        <main id="content">
+            
 <header class="main__header">
     
 
@@ -308,8 +307,8 @@ <h2 class="blog__nav--title">Blog Navigation</h3>
     
 </div>
 
-            </main>
-            <footer class="footer">
+        </main>
+        <footer class="footer">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
     <ul class="socials__links">
@@ -355,6 +354,54 @@ <h2 class="visually-hidden">Social Links:</h2>
 
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
+    <p><a class="footer__top-link" href="#page-top">Back to Top</a></p>
+    <button class="top-btn hidden" aria-label="Scroll to top">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M7 11l5-5m0 0l5 5m-5-5v12" />
+    </svg>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        margin: 0;
+        padding: 0;
+        bottom: 0.5rem;
+        right: 0.5rem;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn-bg);
+        color: var(--clr-top-btn-txt);
+        border-radius: 50em;
+        width: 2rem;
+        aspect-ratio: 1 / 1;
+    }
+
+    .top-btn:focus {
+        outline: 0.25em solid var(--clr-top-btn-bg);
+        outline-offset: 0.15em;
+    }
+</style>
+
+<script defer>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script>
     <div class="h-card hidden">
     <span class="p-name">Helen Chong</span>
     <span class="p-given-name">Helen</span>
@@ -425,7 +472,5 @@ <h2 class="visually-hidden">Social Links:</h2>
         }
     }
 </style>
-        </div>
-        <a href="#top" class="top-btn"><span class="visually-hidden">Back to top</span></a>
     </body>
 </html>
\ No newline at end of file
diff --git a/blog/categories/index.html b/blog/categories/index.html
index b1d2f81d..8734228c 100644
--- a/blog/categories/index.html
+++ b/blog/categories/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" id="top">
+<html lang="en" id="page-top">
     <head>
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -45,8 +45,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div>
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -244,8 +243,8 @@ <h2 class="header__title">
 
     headerLinkAll[headerLinkAll.length - 1].addEventListener("blur", handleBlur);
 </script>
-            <main id="content">
-                
+        <main id="content">
+            
 <header class="main__header">
     
 
@@ -378,8 +377,8 @@ <h2 class="blog__nav--title">Blog Navigation</h3>
     
 </div>
 
-            </main>
-            <footer class="footer">
+        </main>
+        <footer class="footer">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
     <ul class="socials__links">
@@ -425,6 +424,54 @@ <h2 class="visually-hidden">Social Links:</h2>
 
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
+    <p><a class="footer__top-link" href="#page-top">Back to Top</a></p>
+    <button class="top-btn hidden" aria-label="Scroll to top">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M7 11l5-5m0 0l5 5m-5-5v12" />
+    </svg>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        margin: 0;
+        padding: 0;
+        bottom: 0.5rem;
+        right: 0.5rem;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn-bg);
+        color: var(--clr-top-btn-txt);
+        border-radius: 50em;
+        width: 2rem;
+        aspect-ratio: 1 / 1;
+    }
+
+    .top-btn:focus {
+        outline: 0.25em solid var(--clr-top-btn-bg);
+        outline-offset: 0.15em;
+    }
+</style>
+
+<script defer>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script>
     <div class="h-card hidden">
     <span class="p-name">Helen Chong</span>
     <span class="p-given-name">Helen</span>
@@ -495,7 +542,5 @@ <h2 class="visually-hidden">Social Links:</h2>
         }
     }
 </style>
-        </div>
-        <a href="#top" class="top-btn"><span class="visually-hidden">Back to top</span></a>
     </body>
 </html>
\ No newline at end of file
diff --git a/blog/categories/javascript/index.html b/blog/categories/javascript/index.html
index 8f992b61..52edfc2a 100644
--- a/blog/categories/javascript/index.html
+++ b/blog/categories/javascript/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" id="top">
+<html lang="en" id="page-top">
     <head>
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -45,8 +45,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div>
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -244,8 +243,8 @@ <h2 class="header__title">
 
     headerLinkAll[headerLinkAll.length - 1].addEventListener("blur", handleBlur);
 </script>
-            <main id="content">
-                
+        <main id="content">
+            
 <header class="main__header">
     
 
@@ -308,8 +307,8 @@ <h2 class="blog__nav--title">Blog Navigation</h3>
     
 </div>
 
-            </main>
-            <footer class="footer">
+        </main>
+        <footer class="footer">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
     <ul class="socials__links">
@@ -355,6 +354,54 @@ <h2 class="visually-hidden">Social Links:</h2>
 
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
+    <p><a class="footer__top-link" href="#page-top">Back to Top</a></p>
+    <button class="top-btn hidden" aria-label="Scroll to top">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M7 11l5-5m0 0l5 5m-5-5v12" />
+    </svg>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        margin: 0;
+        padding: 0;
+        bottom: 0.5rem;
+        right: 0.5rem;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn-bg);
+        color: var(--clr-top-btn-txt);
+        border-radius: 50em;
+        width: 2rem;
+        aspect-ratio: 1 / 1;
+    }
+
+    .top-btn:focus {
+        outline: 0.25em solid var(--clr-top-btn-bg);
+        outline-offset: 0.15em;
+    }
+</style>
+
+<script defer>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script>
     <div class="h-card hidden">
     <span class="p-name">Helen Chong</span>
     <span class="p-given-name">Helen</span>
@@ -425,7 +472,5 @@ <h2 class="visually-hidden">Social Links:</h2>
         }
     }
 </style>
-        </div>
-        <a href="#top" class="top-btn"><span class="visually-hidden">Back to top</span></a>
     </body>
 </html>
\ No newline at end of file
diff --git a/blog/categories/javascriptmas/index.html b/blog/categories/javascriptmas/index.html
index d1e360f7..ba10bd5f 100644
--- a/blog/categories/javascriptmas/index.html
+++ b/blog/categories/javascriptmas/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" id="top">
+<html lang="en" id="page-top">
     <head>
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -45,8 +45,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div>
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -244,8 +243,8 @@ <h2 class="header__title">
 
     headerLinkAll[headerLinkAll.length - 1].addEventListener("blur", handleBlur);
 </script>
-            <main id="content">
-                
+        <main id="content">
+            
 <header class="main__header">
     
 
@@ -308,8 +307,8 @@ <h2 class="blog__nav--title">Blog Navigation</h3>
     
 </div>
 
-            </main>
-            <footer class="footer">
+        </main>
+        <footer class="footer">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
     <ul class="socials__links">
@@ -355,6 +354,54 @@ <h2 class="visually-hidden">Social Links:</h2>
 
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
+    <p><a class="footer__top-link" href="#page-top">Back to Top</a></p>
+    <button class="top-btn hidden" aria-label="Scroll to top">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M7 11l5-5m0 0l5 5m-5-5v12" />
+    </svg>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        margin: 0;
+        padding: 0;
+        bottom: 0.5rem;
+        right: 0.5rem;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn-bg);
+        color: var(--clr-top-btn-txt);
+        border-radius: 50em;
+        width: 2rem;
+        aspect-ratio: 1 / 1;
+    }
+
+    .top-btn:focus {
+        outline: 0.25em solid var(--clr-top-btn-bg);
+        outline-offset: 0.15em;
+    }
+</style>
+
+<script defer>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script>
     <div class="h-card hidden">
     <span class="p-name">Helen Chong</span>
     <span class="p-given-name">Helen</span>
@@ -425,7 +472,5 @@ <h2 class="visually-hidden">Social Links:</h2>
         }
     }
 </style>
-        </div>
-        <a href="#top" class="top-btn"><span class="visually-hidden">Back to top</span></a>
     </body>
 </html>
\ No newline at end of file
diff --git a/blog/categories/python/index.html b/blog/categories/python/index.html
index 458eceb5..285ada85 100644
--- a/blog/categories/python/index.html
+++ b/blog/categories/python/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" id="top">
+<html lang="en" id="page-top">
     <head>
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -45,8 +45,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div>
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -244,8 +243,8 @@ <h2 class="header__title">
 
     headerLinkAll[headerLinkAll.length - 1].addEventListener("blur", handleBlur);
 </script>
-            <main id="content">
-                
+        <main id="content">
+            
 <header class="main__header">
     
 
@@ -328,8 +327,8 @@ <h2 class="blog__nav--title">Blog Navigation</h3>
     
 </div>
 
-            </main>
-            <footer class="footer">
+        </main>
+        <footer class="footer">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
     <ul class="socials__links">
@@ -375,6 +374,54 @@ <h2 class="visually-hidden">Social Links:</h2>
 
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
+    <p><a class="footer__top-link" href="#page-top">Back to Top</a></p>
+    <button class="top-btn hidden" aria-label="Scroll to top">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M7 11l5-5m0 0l5 5m-5-5v12" />
+    </svg>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        margin: 0;
+        padding: 0;
+        bottom: 0.5rem;
+        right: 0.5rem;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn-bg);
+        color: var(--clr-top-btn-txt);
+        border-radius: 50em;
+        width: 2rem;
+        aspect-ratio: 1 / 1;
+    }
+
+    .top-btn:focus {
+        outline: 0.25em solid var(--clr-top-btn-bg);
+        outline-offset: 0.15em;
+    }
+</style>
+
+<script defer>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script>
     <div class="h-card hidden">
     <span class="p-name">Helen Chong</span>
     <span class="p-given-name">Helen</span>
@@ -445,7 +492,5 @@ <h2 class="visually-hidden">Social Links:</h2>
         }
     }
 </style>
-        </div>
-        <a href="#top" class="top-btn"><span class="visually-hidden">Back to top</span></a>
     </body>
 </html>
\ No newline at end of file
diff --git a/blog/categories/react/index.html b/blog/categories/react/index.html
index a2786e16..2984b13e 100644
--- a/blog/categories/react/index.html
+++ b/blog/categories/react/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" id="top">
+<html lang="en" id="page-top">
     <head>
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -45,8 +45,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div>
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -244,8 +243,8 @@ <h2 class="header__title">
 
     headerLinkAll[headerLinkAll.length - 1].addEventListener("blur", handleBlur);
 </script>
-            <main id="content">
-                
+        <main id="content">
+            
 <header class="main__header">
     
 
@@ -308,8 +307,8 @@ <h2 class="blog__nav--title">Blog Navigation</h3>
     
 </div>
 
-            </main>
-            <footer class="footer">
+        </main>
+        <footer class="footer">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
     <ul class="socials__links">
@@ -355,6 +354,54 @@ <h2 class="visually-hidden">Social Links:</h2>
 
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
+    <p><a class="footer__top-link" href="#page-top">Back to Top</a></p>
+    <button class="top-btn hidden" aria-label="Scroll to top">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M7 11l5-5m0 0l5 5m-5-5v12" />
+    </svg>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        margin: 0;
+        padding: 0;
+        bottom: 0.5rem;
+        right: 0.5rem;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn-bg);
+        color: var(--clr-top-btn-txt);
+        border-radius: 50em;
+        width: 2rem;
+        aspect-ratio: 1 / 1;
+    }
+
+    .top-btn:focus {
+        outline: 0.25em solid var(--clr-top-btn-bg);
+        outline-offset: 0.15em;
+    }
+</style>
+
+<script defer>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script>
     <div class="h-card hidden">
     <span class="p-name">Helen Chong</span>
     <span class="p-given-name">Helen</span>
@@ -425,7 +472,5 @@ <h2 class="visually-hidden">Social Links:</h2>
         }
     }
 </style>
-        </div>
-        <a href="#top" class="top-btn"><span class="visually-hidden">Back to top</span></a>
     </body>
 </html>
\ No newline at end of file
diff --git a/blog/categories/scrimba/index.html b/blog/categories/scrimba/index.html
index 7611456a..50ca6462 100644
--- a/blog/categories/scrimba/index.html
+++ b/blog/categories/scrimba/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" id="top">
+<html lang="en" id="page-top">
     <head>
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -45,8 +45,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div>
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -244,8 +243,8 @@ <h2 class="header__title">
 
     headerLinkAll[headerLinkAll.length - 1].addEventListener("blur", handleBlur);
 </script>
-            <main id="content">
-                
+        <main id="content">
+            
 <header class="main__header">
     
 
@@ -318,8 +317,8 @@ <h2 class="blog__nav--title">Blog Navigation</h3>
     
 </div>
 
-            </main>
-            <footer class="footer">
+        </main>
+        <footer class="footer">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
     <ul class="socials__links">
@@ -365,6 +364,54 @@ <h2 class="visually-hidden">Social Links:</h2>
 
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
+    <p><a class="footer__top-link" href="#page-top">Back to Top</a></p>
+    <button class="top-btn hidden" aria-label="Scroll to top">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M7 11l5-5m0 0l5 5m-5-5v12" />
+    </svg>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        margin: 0;
+        padding: 0;
+        bottom: 0.5rem;
+        right: 0.5rem;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn-bg);
+        color: var(--clr-top-btn-txt);
+        border-radius: 50em;
+        width: 2rem;
+        aspect-ratio: 1 / 1;
+    }
+
+    .top-btn:focus {
+        outline: 0.25em solid var(--clr-top-btn-bg);
+        outline-offset: 0.15em;
+    }
+</style>
+
+<script defer>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script>
     <div class="h-card hidden">
     <span class="p-name">Helen Chong</span>
     <span class="p-given-name">Helen</span>
@@ -435,7 +482,5 @@ <h2 class="visually-hidden">Social Links:</h2>
         }
     }
 </style>
-        </div>
-        <a href="#top" class="top-btn"><span class="visually-hidden">Back to top</span></a>
     </body>
 </html>
\ No newline at end of file
diff --git a/blog/categories/sql/index.html b/blog/categories/sql/index.html
index a8efc9ea..91a326a7 100644
--- a/blog/categories/sql/index.html
+++ b/blog/categories/sql/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" id="top">
+<html lang="en" id="page-top">
     <head>
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -45,8 +45,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div>
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -244,8 +243,8 @@ <h2 class="header__title">
 
     headerLinkAll[headerLinkAll.length - 1].addEventListener("blur", handleBlur);
 </script>
-            <main id="content">
-                
+        <main id="content">
+            
 <header class="main__header">
     
 
@@ -328,8 +327,8 @@ <h2 class="blog__nav--title">Blog Navigation</h3>
     
 </div>
 
-            </main>
-            <footer class="footer">
+        </main>
+        <footer class="footer">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
     <ul class="socials__links">
@@ -375,6 +374,54 @@ <h2 class="visually-hidden">Social Links:</h2>
 
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
+    <p><a class="footer__top-link" href="#page-top">Back to Top</a></p>
+    <button class="top-btn hidden" aria-label="Scroll to top">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M7 11l5-5m0 0l5 5m-5-5v12" />
+    </svg>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        margin: 0;
+        padding: 0;
+        bottom: 0.5rem;
+        right: 0.5rem;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn-bg);
+        color: var(--clr-top-btn-txt);
+        border-radius: 50em;
+        width: 2rem;
+        aspect-ratio: 1 / 1;
+    }
+
+    .top-btn:focus {
+        outline: 0.25em solid var(--clr-top-btn-bg);
+        outline-offset: 0.15em;
+    }
+</style>
+
+<script defer>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script>
     <div class="h-card hidden">
     <span class="p-name">Helen Chong</span>
     <span class="p-given-name">Helen</span>
@@ -445,7 +492,5 @@ <h2 class="visually-hidden">Social Links:</h2>
         }
     }
 </style>
-        </div>
-        <a href="#top" class="top-btn"><span class="visually-hidden">Back to top</span></a>
     </body>
 </html>
\ No newline at end of file
diff --git a/blog/index.html b/blog/index.html
index f416fd17..cb431165 100644
--- a/blog/index.html
+++ b/blog/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" id="top">
+<html lang="en" id="page-top">
     <head>
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -45,8 +45,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div>
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -244,8 +243,8 @@ <h2 class="header__title">
 
     headerLinkAll[headerLinkAll.length - 1].addEventListener("blur", handleBlur);
 </script>
-            <main id="content">
-                
+        <main id="content">
+            
 <header class="main__header">
     
 
@@ -333,8 +332,8 @@ <h2 class="blog__nav--title">Blog Navigation</h3>
     
 </div>
 
-            </main>
-            <footer class="footer">
+        </main>
+        <footer class="footer">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
     <ul class="socials__links">
@@ -380,6 +379,54 @@ <h2 class="visually-hidden">Social Links:</h2>
 
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
+    <p><a class="footer__top-link" href="#page-top">Back to Top</a></p>
+    <button class="top-btn hidden" aria-label="Scroll to top">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M7 11l5-5m0 0l5 5m-5-5v12" />
+    </svg>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        margin: 0;
+        padding: 0;
+        bottom: 0.5rem;
+        right: 0.5rem;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn-bg);
+        color: var(--clr-top-btn-txt);
+        border-radius: 50em;
+        width: 2rem;
+        aspect-ratio: 1 / 1;
+    }
+
+    .top-btn:focus {
+        outline: 0.25em solid var(--clr-top-btn-bg);
+        outline-offset: 0.15em;
+    }
+</style>
+
+<script defer>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script>
     <div class="h-card hidden">
     <span class="p-name">Helen Chong</span>
     <span class="p-given-name">Helen</span>
@@ -450,7 +497,5 @@ <h2 class="visually-hidden">Social Links:</h2>
         }
     }
 </style>
-        </div>
-        <a href="#top" class="top-btn"><span class="visually-hidden">Back to top</span></a>
     </body>
 </html>
\ No newline at end of file
diff --git a/blog/posts/1/index.html b/blog/posts/1/index.html
index 5e0dd4ce..a78764b8 100644
--- a/blog/posts/1/index.html
+++ b/blog/posts/1/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" id="top">
+<html lang="en" id="page-top">
     <head>
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -45,8 +45,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div>
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -244,8 +243,8 @@ <h2 class="header__title">
 
     headerLinkAll[headerLinkAll.length - 1].addEventListener("blur", handleBlur);
 </script>
-            <main id="content">
-                
+        <main id="content">
+            
 <header class="main__header">
     
 
@@ -342,8 +341,8 @@ <h2 class="blog__nav--title">Blog Navigation</h3>
     
 </div>
 
-            </main>
-            <footer class="footer">
+        </main>
+        <footer class="footer">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
     <ul class="socials__links">
@@ -389,6 +388,54 @@ <h2 class="visually-hidden">Social Links:</h2>
 
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
+    <p><a class="footer__top-link" href="#page-top">Back to Top</a></p>
+    <button class="top-btn hidden" aria-label="Scroll to top">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M7 11l5-5m0 0l5 5m-5-5v12" />
+    </svg>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        margin: 0;
+        padding: 0;
+        bottom: 0.5rem;
+        right: 0.5rem;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn-bg);
+        color: var(--clr-top-btn-txt);
+        border-radius: 50em;
+        width: 2rem;
+        aspect-ratio: 1 / 1;
+    }
+
+    .top-btn:focus {
+        outline: 0.25em solid var(--clr-top-btn-bg);
+        outline-offset: 0.15em;
+    }
+</style>
+
+<script defer>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script>
     <div class="h-card hidden">
     <span class="p-name">Helen Chong</span>
     <span class="p-given-name">Helen</span>
@@ -459,7 +506,5 @@ <h2 class="visually-hidden">Social Links:</h2>
         }
     }
 </style>
-        </div>
-        <a href="#top" class="top-btn"><span class="visually-hidden">Back to top</span></a>
     </body>
 </html>
\ No newline at end of file
diff --git a/blog/posts/2023-08-21-Welcome-to-Helen-Codes/index.html b/blog/posts/2023-08-21-Welcome-to-Helen-Codes/index.html
index aa03c115..cb6ee5a9 100644
--- a/blog/posts/2023-08-21-Welcome-to-Helen-Codes/index.html
+++ b/blog/posts/2023-08-21-Welcome-to-Helen-Codes/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" id="top">
+<html lang="en" id="page-top">
     <head>
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -45,8 +45,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div>
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -244,8 +243,8 @@ <h2 class="header__title">
 
     headerLinkAll[headerLinkAll.length - 1].addEventListener("blur", handleBlur);
 </script>
-            <main id="content">
-                
+        <main id="content">
+            
 <header class="main__header">
     
     <nav>
@@ -320,8 +319,8 @@ <h2 class="blog__nav--title">Blog Navigation</h3>
     
 </div>
 
-            </main>
-            <footer class="footer">
+        </main>
+        <footer class="footer">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
     <ul class="socials__links">
@@ -367,6 +366,54 @@ <h2 class="visually-hidden">Social Links:</h2>
 
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
+    <p><a class="footer__top-link" href="#page-top">Back to Top</a></p>
+    <button class="top-btn hidden" aria-label="Scroll to top">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M7 11l5-5m0 0l5 5m-5-5v12" />
+    </svg>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        margin: 0;
+        padding: 0;
+        bottom: 0.5rem;
+        right: 0.5rem;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn-bg);
+        color: var(--clr-top-btn-txt);
+        border-radius: 50em;
+        width: 2rem;
+        aspect-ratio: 1 / 1;
+    }
+
+    .top-btn:focus {
+        outline: 0.25em solid var(--clr-top-btn-bg);
+        outline-offset: 0.15em;
+    }
+</style>
+
+<script defer>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script>
     <div class="h-card hidden">
     <span class="p-name">Helen Chong</span>
     <span class="p-given-name">Helen</span>
@@ -437,7 +484,5 @@ <h2 class="visually-hidden">Social Links:</h2>
         }
     }
 </style>
-        </div>
-        <a href="#top" class="top-btn"><span class="visually-hidden">Back to top</span></a>
     </body>
 </html>
\ No newline at end of file
diff --git a/blog/posts/2023-08-24-Built-a-TickyBot-Clone-for-Chingus-Solo-Project/index.html b/blog/posts/2023-08-24-Built-a-TickyBot-Clone-for-Chingus-Solo-Project/index.html
index 233d0407..e86a2bc2 100644
--- a/blog/posts/2023-08-24-Built-a-TickyBot-Clone-for-Chingus-Solo-Project/index.html
+++ b/blog/posts/2023-08-24-Built-a-TickyBot-Clone-for-Chingus-Solo-Project/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" id="top">
+<html lang="en" id="page-top">
     <head>
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -45,8 +45,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div>
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -244,8 +243,8 @@ <h2 class="header__title">
 
     headerLinkAll[headerLinkAll.length - 1].addEventListener("blur", handleBlur);
 </script>
-            <main id="content">
-                
+        <main id="content">
+            
 <header class="main__header">
     
     <nav>
@@ -321,8 +320,8 @@ <h2 class="blog__nav--title">Blog Navigation</h3>
     
 </div>
 
-            </main>
-            <footer class="footer">
+        </main>
+        <footer class="footer">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
     <ul class="socials__links">
@@ -368,6 +367,54 @@ <h2 class="visually-hidden">Social Links:</h2>
 
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
+    <p><a class="footer__top-link" href="#page-top">Back to Top</a></p>
+    <button class="top-btn hidden" aria-label="Scroll to top">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M7 11l5-5m0 0l5 5m-5-5v12" />
+    </svg>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        margin: 0;
+        padding: 0;
+        bottom: 0.5rem;
+        right: 0.5rem;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn-bg);
+        color: var(--clr-top-btn-txt);
+        border-radius: 50em;
+        width: 2rem;
+        aspect-ratio: 1 / 1;
+    }
+
+    .top-btn:focus {
+        outline: 0.25em solid var(--clr-top-btn-bg);
+        outline-offset: 0.15em;
+    }
+</style>
+
+<script defer>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script>
     <div class="h-card hidden">
     <span class="p-name">Helen Chong</span>
     <span class="p-given-name">Helen</span>
@@ -438,7 +485,5 @@ <h2 class="visually-hidden">Social Links:</h2>
         }
     }
 </style>
-        </div>
-        <a href="#top" class="top-btn"><span class="visually-hidden">Back to top</span></a>
     </body>
 </html>
\ No newline at end of file
diff --git a/blog/posts/2023-09-10-CS50x-Week-7-Completed/index.html b/blog/posts/2023-09-10-CS50x-Week-7-Completed/index.html
index 1f0b1124..845b63de 100644
--- a/blog/posts/2023-09-10-CS50x-Week-7-Completed/index.html
+++ b/blog/posts/2023-09-10-CS50x-Week-7-Completed/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" id="top">
+<html lang="en" id="page-top">
     <head>
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -45,8 +45,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div>
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -244,8 +243,8 @@ <h2 class="header__title">
 
     headerLinkAll[headerLinkAll.length - 1].addEventListener("blur", handleBlur);
 </script>
-            <main id="content">
-                
+        <main id="content">
+            
 <header class="main__header">
     
     <nav>
@@ -324,8 +323,8 @@ <h2 class="blog__nav--title">Blog Navigation</h3>
     
 </div>
 
-            </main>
-            <footer class="footer">
+        </main>
+        <footer class="footer">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
     <ul class="socials__links">
@@ -371,6 +370,54 @@ <h2 class="visually-hidden">Social Links:</h2>
 
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
+    <p><a class="footer__top-link" href="#page-top">Back to Top</a></p>
+    <button class="top-btn hidden" aria-label="Scroll to top">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M7 11l5-5m0 0l5 5m-5-5v12" />
+    </svg>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        margin: 0;
+        padding: 0;
+        bottom: 0.5rem;
+        right: 0.5rem;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn-bg);
+        color: var(--clr-top-btn-txt);
+        border-radius: 50em;
+        width: 2rem;
+        aspect-ratio: 1 / 1;
+    }
+
+    .top-btn:focus {
+        outline: 0.25em solid var(--clr-top-btn-bg);
+        outline-offset: 0.15em;
+    }
+</style>
+
+<script defer>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script>
     <div class="h-card hidden">
     <span class="p-name">Helen Chong</span>
     <span class="p-given-name">Helen</span>
@@ -441,7 +488,5 @@ <h2 class="visually-hidden">Social Links:</h2>
         }
     }
 </style>
-        </div>
-        <a href="#top" class="top-btn"><span class="visually-hidden">Back to top</span></a>
     </body>
 </html>
\ No newline at end of file
diff --git a/blog/posts/2023-09-26-CS50x-Week-8-Assignments-Completed/index.html b/blog/posts/2023-09-26-CS50x-Week-8-Assignments-Completed/index.html
index e29904a4..fd448ef9 100644
--- a/blog/posts/2023-09-26-CS50x-Week-8-Assignments-Completed/index.html
+++ b/blog/posts/2023-09-26-CS50x-Week-8-Assignments-Completed/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" id="top">
+<html lang="en" id="page-top">
     <head>
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -45,8 +45,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div>
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -244,8 +243,8 @@ <h2 class="header__title">
 
     headerLinkAll[headerLinkAll.length - 1].addEventListener("blur", handleBlur);
 </script>
-            <main id="content">
-                
+        <main id="content">
+            
 <header class="main__header">
     
     <nav>
@@ -327,8 +326,8 @@ <h2 class="blog__nav--title">Blog Navigation</h3>
     
 </div>
 
-            </main>
-            <footer class="footer">
+        </main>
+        <footer class="footer">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
     <ul class="socials__links">
@@ -374,6 +373,54 @@ <h2 class="visually-hidden">Social Links:</h2>
 
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
+    <p><a class="footer__top-link" href="#page-top">Back to Top</a></p>
+    <button class="top-btn hidden" aria-label="Scroll to top">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M7 11l5-5m0 0l5 5m-5-5v12" />
+    </svg>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        margin: 0;
+        padding: 0;
+        bottom: 0.5rem;
+        right: 0.5rem;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn-bg);
+        color: var(--clr-top-btn-txt);
+        border-radius: 50em;
+        width: 2rem;
+        aspect-ratio: 1 / 1;
+    }
+
+    .top-btn:focus {
+        outline: 0.25em solid var(--clr-top-btn-bg);
+        outline-offset: 0.15em;
+    }
+</style>
+
+<script defer>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script>
     <div class="h-card hidden">
     <span class="p-name">Helen Chong</span>
     <span class="p-given-name">Helen</span>
@@ -444,7 +491,5 @@ <h2 class="visually-hidden">Social Links:</h2>
         }
     }
 </style>
-        </div>
-        <a href="#top" class="top-btn"><span class="visually-hidden">Back to top</span></a>
     </body>
 </html>
\ No newline at end of file
diff --git a/blog/posts/2023-11-13-My-First-PR-in-Python/index.html b/blog/posts/2023-11-13-My-First-PR-in-Python/index.html
index 347e99c9..525a6010 100644
--- a/blog/posts/2023-11-13-My-First-PR-in-Python/index.html
+++ b/blog/posts/2023-11-13-My-First-PR-in-Python/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" id="top">
+<html lang="en" id="page-top">
     <head>
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -45,8 +45,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div>
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -244,8 +243,8 @@ <h2 class="header__title">
 
     headerLinkAll[headerLinkAll.length - 1].addEventListener("blur", handleBlur);
 </script>
-            <main id="content">
-                
+        <main id="content">
+            
 <header class="main__header">
     
     <nav>
@@ -336,8 +335,8 @@ <h2 class="blog__nav--title">Blog Navigation</h3>
     
 </div>
 
-            </main>
-            <footer class="footer">
+        </main>
+        <footer class="footer">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
     <ul class="socials__links">
@@ -383,6 +382,54 @@ <h2 class="visually-hidden">Social Links:</h2>
 
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
+    <p><a class="footer__top-link" href="#page-top">Back to Top</a></p>
+    <button class="top-btn hidden" aria-label="Scroll to top">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M7 11l5-5m0 0l5 5m-5-5v12" />
+    </svg>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        margin: 0;
+        padding: 0;
+        bottom: 0.5rem;
+        right: 0.5rem;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn-bg);
+        color: var(--clr-top-btn-txt);
+        border-radius: 50em;
+        width: 2rem;
+        aspect-ratio: 1 / 1;
+    }
+
+    .top-btn:focus {
+        outline: 0.25em solid var(--clr-top-btn-bg);
+        outline-offset: 0.15em;
+    }
+</style>
+
+<script defer>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script>
     <div class="h-card hidden">
     <span class="p-name">Helen Chong</span>
     <span class="p-given-name">Helen</span>
@@ -453,7 +500,5 @@ <h2 class="visually-hidden">Social Links:</h2>
         }
     }
 </style>
-        </div>
-        <a href="#top" class="top-btn"><span class="visually-hidden">Back to top</span></a>
     </body>
 </html>
\ No newline at end of file
diff --git a/blog/posts/2023-11-25-Chingu-Voyage-46-Completed/index.html b/blog/posts/2023-11-25-Chingu-Voyage-46-Completed/index.html
index c1192cc9..d8a80ba7 100644
--- a/blog/posts/2023-11-25-Chingu-Voyage-46-Completed/index.html
+++ b/blog/posts/2023-11-25-Chingu-Voyage-46-Completed/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" id="top">
+<html lang="en" id="page-top">
     <head>
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -45,8 +45,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div>
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -244,8 +243,8 @@ <h2 class="header__title">
 
     headerLinkAll[headerLinkAll.length - 1].addEventListener("blur", handleBlur);
 </script>
-            <main id="content">
-                
+        <main id="content">
+            
 <header class="main__header">
     
     <nav>
@@ -323,8 +322,8 @@ <h2 class="blog__nav--title">Blog Navigation</h3>
     
 </div>
 
-            </main>
-            <footer class="footer">
+        </main>
+        <footer class="footer">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
     <ul class="socials__links">
@@ -370,6 +369,54 @@ <h2 class="visually-hidden">Social Links:</h2>
 
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
+    <p><a class="footer__top-link" href="#page-top">Back to Top</a></p>
+    <button class="top-btn hidden" aria-label="Scroll to top">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M7 11l5-5m0 0l5 5m-5-5v12" />
+    </svg>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        margin: 0;
+        padding: 0;
+        bottom: 0.5rem;
+        right: 0.5rem;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn-bg);
+        color: var(--clr-top-btn-txt);
+        border-radius: 50em;
+        width: 2rem;
+        aspect-ratio: 1 / 1;
+    }
+
+    .top-btn:focus {
+        outline: 0.25em solid var(--clr-top-btn-bg);
+        outline-offset: 0.15em;
+    }
+</style>
+
+<script defer>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script>
     <div class="h-card hidden">
     <span class="p-name">Helen Chong</span>
     <span class="p-given-name">Helen</span>
@@ -440,7 +487,5 @@ <h2 class="visually-hidden">Social Links:</h2>
         }
     }
 </style>
-        </div>
-        <a href="#top" class="top-btn"><span class="visually-hidden">Back to top</span></a>
     </body>
 </html>
\ No newline at end of file
diff --git a/blog/posts/2023-12-27-JavaScriptmas-2023-Challenge-Completed-and-Won/index.html b/blog/posts/2023-12-27-JavaScriptmas-2023-Challenge-Completed-and-Won/index.html
index 6419d469..0c1880f9 100644
--- a/blog/posts/2023-12-27-JavaScriptmas-2023-Challenge-Completed-and-Won/index.html
+++ b/blog/posts/2023-12-27-JavaScriptmas-2023-Challenge-Completed-and-Won/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" id="top">
+<html lang="en" id="page-top">
     <head>
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -45,8 +45,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div>
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -244,8 +243,8 @@ <h2 class="header__title">
 
     headerLinkAll[headerLinkAll.length - 1].addEventListener("blur", handleBlur);
 </script>
-            <main id="content">
-                
+        <main id="content">
+            
 <header class="main__header">
     
     <nav>
@@ -323,8 +322,8 @@ <h2 class="blog__nav--title">Blog Navigation</h3>
     
 </div>
 
-            </main>
-            <footer class="footer">
+        </main>
+        <footer class="footer">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
     <ul class="socials__links">
@@ -370,6 +369,54 @@ <h2 class="visually-hidden">Social Links:</h2>
 
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
+    <p><a class="footer__top-link" href="#page-top">Back to Top</a></p>
+    <button class="top-btn hidden" aria-label="Scroll to top">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M7 11l5-5m0 0l5 5m-5-5v12" />
+    </svg>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        margin: 0;
+        padding: 0;
+        bottom: 0.5rem;
+        right: 0.5rem;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn-bg);
+        color: var(--clr-top-btn-txt);
+        border-radius: 50em;
+        width: 2rem;
+        aspect-ratio: 1 / 1;
+    }
+
+    .top-btn:focus {
+        outline: 0.25em solid var(--clr-top-btn-bg);
+        outline-offset: 0.15em;
+    }
+</style>
+
+<script defer>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script>
     <div class="h-card hidden">
     <span class="p-name">Helen Chong</span>
     <span class="p-given-name">Helen</span>
@@ -440,7 +487,5 @@ <h2 class="visually-hidden">Social Links:</h2>
         }
     }
 </style>
-        </div>
-        <a href="#top" class="top-btn"><span class="visually-hidden">Back to top</span></a>
     </body>
 </html>
\ No newline at end of file
diff --git a/blog/posts/2024-04-11-rebuilding-my-developer-portfolio-with-eleventy/index.html b/blog/posts/2024-04-11-rebuilding-my-developer-portfolio-with-eleventy/index.html
index 2cf210d2..52a7b776 100644
--- a/blog/posts/2024-04-11-rebuilding-my-developer-portfolio-with-eleventy/index.html
+++ b/blog/posts/2024-04-11-rebuilding-my-developer-portfolio-with-eleventy/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" id="top">
+<html lang="en" id="page-top">
     <head>
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -45,8 +45,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div>
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -244,8 +243,8 @@ <h2 class="header__title">
 
     headerLinkAll[headerLinkAll.length - 1].addEventListener("blur", handleBlur);
 </script>
-            <main id="content">
-                
+        <main id="content">
+            
 <header class="main__header">
     
     <nav>
@@ -333,8 +332,8 @@ <h2 class="blog__nav--title">Blog Navigation</h3>
     
 </div>
 
-            </main>
-            <footer class="footer">
+        </main>
+        <footer class="footer">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
     <ul class="socials__links">
@@ -380,6 +379,54 @@ <h2 class="visually-hidden">Social Links:</h2>
 
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
+    <p><a class="footer__top-link" href="#page-top">Back to Top</a></p>
+    <button class="top-btn hidden" aria-label="Scroll to top">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M7 11l5-5m0 0l5 5m-5-5v12" />
+    </svg>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        margin: 0;
+        padding: 0;
+        bottom: 0.5rem;
+        right: 0.5rem;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn-bg);
+        color: var(--clr-top-btn-txt);
+        border-radius: 50em;
+        width: 2rem;
+        aspect-ratio: 1 / 1;
+    }
+
+    .top-btn:focus {
+        outline: 0.25em solid var(--clr-top-btn-bg);
+        outline-offset: 0.15em;
+    }
+</style>
+
+<script defer>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script>
     <div class="h-card hidden">
     <span class="p-name">Helen Chong</span>
     <span class="p-given-name">Helen</span>
@@ -450,7 +497,5 @@ <h2 class="visually-hidden">Social Links:</h2>
         }
     }
 </style>
-        </div>
-        <a href="#top" class="top-btn"><span class="visually-hidden">Back to top</span></a>
     </body>
 </html>
\ No newline at end of file
diff --git a/blog/posts/2024-04-13-round-1-100-days-of-code-challenge-completed/index.html b/blog/posts/2024-04-13-round-1-100-days-of-code-challenge-completed/index.html
index 25018ddc..7bae0c45 100644
--- a/blog/posts/2024-04-13-round-1-100-days-of-code-challenge-completed/index.html
+++ b/blog/posts/2024-04-13-round-1-100-days-of-code-challenge-completed/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" id="top">
+<html lang="en" id="page-top">
     <head>
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -45,8 +45,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div>
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -244,8 +243,8 @@ <h2 class="header__title">
 
     headerLinkAll[headerLinkAll.length - 1].addEventListener("blur", handleBlur);
 </script>
-            <main id="content">
-                
+        <main id="content">
+            
 <header class="main__header">
     
     <nav>
@@ -327,8 +326,8 @@ <h2 class="blog__nav--title">Blog Navigation</h3>
     
 </div>
 
-            </main>
-            <footer class="footer">
+        </main>
+        <footer class="footer">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
     <ul class="socials__links">
@@ -374,6 +373,54 @@ <h2 class="visually-hidden">Social Links:</h2>
 
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
+    <p><a class="footer__top-link" href="#page-top">Back to Top</a></p>
+    <button class="top-btn hidden" aria-label="Scroll to top">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M7 11l5-5m0 0l5 5m-5-5v12" />
+    </svg>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        margin: 0;
+        padding: 0;
+        bottom: 0.5rem;
+        right: 0.5rem;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn-bg);
+        color: var(--clr-top-btn-txt);
+        border-radius: 50em;
+        width: 2rem;
+        aspect-ratio: 1 / 1;
+    }
+
+    .top-btn:focus {
+        outline: 0.25em solid var(--clr-top-btn-bg);
+        outline-offset: 0.15em;
+    }
+</style>
+
+<script defer>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script>
     <div class="h-card hidden">
     <span class="p-name">Helen Chong</span>
     <span class="p-given-name">Helen</span>
@@ -444,7 +491,5 @@ <h2 class="visually-hidden">Social Links:</h2>
         }
     }
 </style>
-        </div>
-        <a href="#top" class="top-btn"><span class="visually-hidden">Back to top</span></a>
     </body>
 </html>
\ No newline at end of file
diff --git a/blog/posts/2024-04-15-cs50x-week-9-completed/index.html b/blog/posts/2024-04-15-cs50x-week-9-completed/index.html
index 6b17709d..d5693186 100644
--- a/blog/posts/2024-04-15-cs50x-week-9-completed/index.html
+++ b/blog/posts/2024-04-15-cs50x-week-9-completed/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" id="top">
+<html lang="en" id="page-top">
     <head>
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -45,8 +45,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div>
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -244,8 +243,8 @@ <h2 class="header__title">
 
     headerLinkAll[headerLinkAll.length - 1].addEventListener("blur", handleBlur);
 </script>
-            <main id="content">
-                
+        <main id="content">
+            
 <header class="main__header">
     
     <nav>
@@ -340,8 +339,8 @@ <h2 class="blog__nav--title">Blog Navigation</h3>
     
 </div>
 
-            </main>
-            <footer class="footer">
+        </main>
+        <footer class="footer">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
     <ul class="socials__links">
@@ -387,6 +386,54 @@ <h2 class="visually-hidden">Social Links:</h2>
 
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
+    <p><a class="footer__top-link" href="#page-top">Back to Top</a></p>
+    <button class="top-btn hidden" aria-label="Scroll to top">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M7 11l5-5m0 0l5 5m-5-5v12" />
+    </svg>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        margin: 0;
+        padding: 0;
+        bottom: 0.5rem;
+        right: 0.5rem;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn-bg);
+        color: var(--clr-top-btn-txt);
+        border-radius: 50em;
+        width: 2rem;
+        aspect-ratio: 1 / 1;
+    }
+
+    .top-btn:focus {
+        outline: 0.25em solid var(--clr-top-btn-bg);
+        outline-offset: 0.15em;
+    }
+</style>
+
+<script defer>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script>
     <div class="h-card hidden">
     <span class="p-name">Helen Chong</span>
     <span class="p-given-name">Helen</span>
@@ -457,7 +504,5 @@ <h2 class="visually-hidden">Social Links:</h2>
         }
     }
 </style>
-        </div>
-        <a href="#top" class="top-btn"><span class="visually-hidden">Back to top</span></a>
     </body>
 </html>
\ No newline at end of file
diff --git a/blog/posts/2024-04-22-now-page-for-my-website/index.html b/blog/posts/2024-04-22-now-page-for-my-website/index.html
index b7972394..2669acd3 100644
--- a/blog/posts/2024-04-22-now-page-for-my-website/index.html
+++ b/blog/posts/2024-04-22-now-page-for-my-website/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" id="top">
+<html lang="en" id="page-top">
     <head>
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -45,8 +45,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div>
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -244,8 +243,8 @@ <h2 class="header__title">
 
     headerLinkAll[headerLinkAll.length - 1].addEventListener("blur", handleBlur);
 </script>
-            <main id="content">
-                
+        <main id="content">
+            
 <header class="main__header">
     
     <nav>
@@ -320,8 +319,8 @@ <h2 class="blog__nav--title">Blog Navigation</h3>
     
 </div>
 
-            </main>
-            <footer class="footer">
+        </main>
+        <footer class="footer">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
     <ul class="socials__links">
@@ -367,6 +366,54 @@ <h2 class="visually-hidden">Social Links:</h2>
 
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
+    <p><a class="footer__top-link" href="#page-top">Back to Top</a></p>
+    <button class="top-btn hidden" aria-label="Scroll to top">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M7 11l5-5m0 0l5 5m-5-5v12" />
+    </svg>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        margin: 0;
+        padding: 0;
+        bottom: 0.5rem;
+        right: 0.5rem;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn-bg);
+        color: var(--clr-top-btn-txt);
+        border-radius: 50em;
+        width: 2rem;
+        aspect-ratio: 1 / 1;
+    }
+
+    .top-btn:focus {
+        outline: 0.25em solid var(--clr-top-btn-bg);
+        outline-offset: 0.15em;
+    }
+</style>
+
+<script defer>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script>
     <div class="h-card hidden">
     <span class="p-name">Helen Chong</span>
     <span class="p-given-name">Helen</span>
@@ -437,7 +484,5 @@ <h2 class="visually-hidden">Social Links:</h2>
         }
     }
 </style>
-        </div>
-        <a href="#top" class="top-btn"><span class="visually-hidden">Back to top</span></a>
     </body>
 </html>
\ No newline at end of file
diff --git a/blog/posts/2024-05-27-cs50x-course-completed/index.html b/blog/posts/2024-05-27-cs50x-course-completed/index.html
index 6e097386..fe246ef7 100644
--- a/blog/posts/2024-05-27-cs50x-course-completed/index.html
+++ b/blog/posts/2024-05-27-cs50x-course-completed/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" id="top">
+<html lang="en" id="page-top">
     <head>
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -45,8 +45,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div>
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -244,8 +243,8 @@ <h2 class="header__title">
 
     headerLinkAll[headerLinkAll.length - 1].addEventListener("blur", handleBlur);
 </script>
-            <main id="content">
-                
+        <main id="content">
+            
 <header class="main__header">
     
     <nav>
@@ -347,8 +346,8 @@ <h2 class="blog__nav--title">Blog Navigation</h3>
     
 </div>
 
-            </main>
-            <footer class="footer">
+        </main>
+        <footer class="footer">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
     <ul class="socials__links">
@@ -394,6 +393,54 @@ <h2 class="visually-hidden">Social Links:</h2>
 
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
+    <p><a class="footer__top-link" href="#page-top">Back to Top</a></p>
+    <button class="top-btn hidden" aria-label="Scroll to top">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M7 11l5-5m0 0l5 5m-5-5v12" />
+    </svg>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        margin: 0;
+        padding: 0;
+        bottom: 0.5rem;
+        right: 0.5rem;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn-bg);
+        color: var(--clr-top-btn-txt);
+        border-radius: 50em;
+        width: 2rem;
+        aspect-ratio: 1 / 1;
+    }
+
+    .top-btn:focus {
+        outline: 0.25em solid var(--clr-top-btn-bg);
+        outline-offset: 0.15em;
+    }
+</style>
+
+<script defer>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script>
     <div class="h-card hidden">
     <span class="p-name">Helen Chong</span>
     <span class="p-given-name">Helen</span>
@@ -464,7 +511,5 @@ <h2 class="visually-hidden">Social Links:</h2>
         }
     }
 </style>
-        </div>
-        <a href="#top" class="top-btn"><span class="visually-hidden">Back to top</span></a>
     </body>
 </html>
\ No newline at end of file
diff --git a/blog/posts/2024-05-29-custom-domain-name-helenchong-dev/index.html b/blog/posts/2024-05-29-custom-domain-name-helenchong-dev/index.html
index 1bea7871..3d1c165b 100644
--- a/blog/posts/2024-05-29-custom-domain-name-helenchong-dev/index.html
+++ b/blog/posts/2024-05-29-custom-domain-name-helenchong-dev/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" id="top">
+<html lang="en" id="page-top">
     <head>
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -45,8 +45,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div>
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -244,8 +243,8 @@ <h2 class="header__title">
 
     headerLinkAll[headerLinkAll.length - 1].addEventListener("blur", handleBlur);
 </script>
-            <main id="content">
-                
+        <main id="content">
+            
 <header class="main__header">
     
     <nav>
@@ -324,8 +323,8 @@ <h2 class="blog__nav--title">Blog Navigation</h3>
     
 </div>
 
-            </main>
-            <footer class="footer">
+        </main>
+        <footer class="footer">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
     <ul class="socials__links">
@@ -371,6 +370,54 @@ <h2 class="visually-hidden">Social Links:</h2>
 
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
+    <p><a class="footer__top-link" href="#page-top">Back to Top</a></p>
+    <button class="top-btn hidden" aria-label="Scroll to top">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M7 11l5-5m0 0l5 5m-5-5v12" />
+    </svg>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        margin: 0;
+        padding: 0;
+        bottom: 0.5rem;
+        right: 0.5rem;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn-bg);
+        color: var(--clr-top-btn-txt);
+        border-radius: 50em;
+        width: 2rem;
+        aspect-ratio: 1 / 1;
+    }
+
+    .top-btn:focus {
+        outline: 0.25em solid var(--clr-top-btn-bg);
+        outline-offset: 0.15em;
+    }
+</style>
+
+<script defer>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script>
     <div class="h-card hidden">
     <span class="p-name">Helen Chong</span>
     <span class="p-given-name">Helen</span>
@@ -441,7 +488,5 @@ <h2 class="visually-hidden">Social Links:</h2>
         }
     }
 </style>
-        </div>
-        <a href="#top" class="top-btn"><span class="visually-hidden">Back to top</span></a>
     </body>
 </html>
\ No newline at end of file
diff --git a/blog/posts/2024-06-03-deploy-scrimba-react-solo-projects-to-github-pages/index.html b/blog/posts/2024-06-03-deploy-scrimba-react-solo-projects-to-github-pages/index.html
index b43664d8..ad8fefee 100644
--- a/blog/posts/2024-06-03-deploy-scrimba-react-solo-projects-to-github-pages/index.html
+++ b/blog/posts/2024-06-03-deploy-scrimba-react-solo-projects-to-github-pages/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" id="top">
+<html lang="en" id="page-top">
     <head>
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -45,8 +45,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div>
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -244,8 +243,8 @@ <h2 class="header__title">
 
     headerLinkAll[headerLinkAll.length - 1].addEventListener("blur", handleBlur);
 </script>
-            <main id="content">
-                
+        <main id="content">
+            
 <header class="main__header">
     
     <nav>
@@ -408,8 +407,8 @@ <h2 class="blog__nav--title">Blog Navigation</h3>
     
 </div>
 
-            </main>
-            <footer class="footer">
+        </main>
+        <footer class="footer">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
     <ul class="socials__links">
@@ -455,6 +454,54 @@ <h2 class="visually-hidden">Social Links:</h2>
 
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
+    <p><a class="footer__top-link" href="#page-top">Back to Top</a></p>
+    <button class="top-btn hidden" aria-label="Scroll to top">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M7 11l5-5m0 0l5 5m-5-5v12" />
+    </svg>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        margin: 0;
+        padding: 0;
+        bottom: 0.5rem;
+        right: 0.5rem;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn-bg);
+        color: var(--clr-top-btn-txt);
+        border-radius: 50em;
+        width: 2rem;
+        aspect-ratio: 1 / 1;
+    }
+
+    .top-btn:focus {
+        outline: 0.25em solid var(--clr-top-btn-bg);
+        outline-offset: 0.15em;
+    }
+</style>
+
+<script defer>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script>
     <div class="h-card hidden">
     <span class="p-name">Helen Chong</span>
     <span class="p-given-name">Helen</span>
@@ -525,7 +572,5 @@ <h2 class="visually-hidden">Social Links:</h2>
         }
     }
 </style>
-        </div>
-        <a href="#top" class="top-btn"><span class="visually-hidden">Back to top</span></a>
     </body>
 </html>
\ No newline at end of file
diff --git a/blog/posts/index.html b/blog/posts/index.html
index 6c07cca1..7fa83355 100644
--- a/blog/posts/index.html
+++ b/blog/posts/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" id="top">
+<html lang="en" id="page-top">
     <head>
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -45,8 +45,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div>
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -244,8 +243,8 @@ <h2 class="header__title">
 
     headerLinkAll[headerLinkAll.length - 1].addEventListener("blur", handleBlur);
 </script>
-            <main id="content">
-                
+        <main id="content">
+            
 <header class="main__header">
     
 
@@ -402,8 +401,8 @@ <h2 class="blog__nav--title">Blog Navigation</h3>
     
 </div>
 
-            </main>
-            <footer class="footer">
+        </main>
+        <footer class="footer">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
     <ul class="socials__links">
@@ -449,6 +448,54 @@ <h2 class="visually-hidden">Social Links:</h2>
 
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
+    <p><a class="footer__top-link" href="#page-top">Back to Top</a></p>
+    <button class="top-btn hidden" aria-label="Scroll to top">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M7 11l5-5m0 0l5 5m-5-5v12" />
+    </svg>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        margin: 0;
+        padding: 0;
+        bottom: 0.5rem;
+        right: 0.5rem;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn-bg);
+        color: var(--clr-top-btn-txt);
+        border-radius: 50em;
+        width: 2rem;
+        aspect-ratio: 1 / 1;
+    }
+
+    .top-btn:focus {
+        outline: 0.25em solid var(--clr-top-btn-bg);
+        outline-offset: 0.15em;
+    }
+</style>
+
+<script defer>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script>
     <div class="h-card hidden">
     <span class="p-name">Helen Chong</span>
     <span class="p-given-name">Helen</span>
@@ -519,7 +566,5 @@ <h2 class="visually-hidden">Social Links:</h2>
         }
     }
 </style>
-        </div>
-        <a href="#top" class="top-btn"><span class="visually-hidden">Back to top</span></a>
     </body>
 </html>
\ No newline at end of file
diff --git a/colophon/index.html b/colophon/index.html
index 41c34bd8..7367e30d 100644
--- a/colophon/index.html
+++ b/colophon/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" id="top">
+<html lang="en" id="page-top">
     <head>
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -48,8 +48,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div>
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -247,8 +246,8 @@ <h2 class="header__title">
 
     headerLinkAll[headerLinkAll.length - 1].addEventListener("blur", handleBlur);
 </script>
-            <main id="content">
-                
+        <main id="content">
+            
 <header class="main__header">
     
 
@@ -315,8 +314,8 @@ <h2>Credits</h2>
     
 </div>
 
-            </main>
-            <footer class="footer">
+        </main>
+        <footer class="footer">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
     <ul class="socials__links">
@@ -362,6 +361,54 @@ <h2 class="visually-hidden">Social Links:</h2>
 
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
+    <p><a class="footer__top-link" href="#page-top">Back to Top</a></p>
+    <button class="top-btn hidden" aria-label="Scroll to top">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M7 11l5-5m0 0l5 5m-5-5v12" />
+    </svg>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        margin: 0;
+        padding: 0;
+        bottom: 0.5rem;
+        right: 0.5rem;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn-bg);
+        color: var(--clr-top-btn-txt);
+        border-radius: 50em;
+        width: 2rem;
+        aspect-ratio: 1 / 1;
+    }
+
+    .top-btn:focus {
+        outline: 0.25em solid var(--clr-top-btn-bg);
+        outline-offset: 0.15em;
+    }
+</style>
+
+<script defer>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script>
     <div class="h-card hidden">
     <span class="p-name">Helen Chong</span>
     <span class="p-given-name">Helen</span>
@@ -432,7 +479,5 @@ <h2 class="visually-hidden">Social Links:</h2>
         }
     }
 </style>
-        </div>
-        <a href="#top" class="top-btn"><span class="visually-hidden">Back to top</span></a>
     </body>
 </html>
\ No newline at end of file
diff --git a/contact/index.html b/contact/index.html
index 10817c6f..9961a0ff 100644
--- a/contact/index.html
+++ b/contact/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" id="top">
+<html lang="en" id="page-top">
     <head>
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -45,8 +45,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div>
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -244,8 +243,8 @@ <h2 class="header__title">
 
     headerLinkAll[headerLinkAll.length - 1].addEventListener("blur", handleBlur);
 </script>
-            <main id="content">
-                
+        <main id="content">
+            
 <header class="main__header">
     
 
@@ -283,8 +282,8 @@ <h1 class="heading--main">Want to get in touch?</h1>
     
 </div>
 
-            </main>
-            <footer class="footer">
+        </main>
+        <footer class="footer">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
     <ul class="socials__links">
@@ -330,6 +329,54 @@ <h2 class="visually-hidden">Social Links:</h2>
 
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
+    <p><a class="footer__top-link" href="#page-top">Back to Top</a></p>
+    <button class="top-btn hidden" aria-label="Scroll to top">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M7 11l5-5m0 0l5 5m-5-5v12" />
+    </svg>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        margin: 0;
+        padding: 0;
+        bottom: 0.5rem;
+        right: 0.5rem;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn-bg);
+        color: var(--clr-top-btn-txt);
+        border-radius: 50em;
+        width: 2rem;
+        aspect-ratio: 1 / 1;
+    }
+
+    .top-btn:focus {
+        outline: 0.25em solid var(--clr-top-btn-bg);
+        outline-offset: 0.15em;
+    }
+</style>
+
+<script defer>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script>
     <div class="h-card hidden">
     <span class="p-name">Helen Chong</span>
     <span class="p-given-name">Helen</span>
@@ -400,7 +447,5 @@ <h2 class="visually-hidden">Social Links:</h2>
         }
     }
 </style>
-        </div>
-        <a href="#top" class="top-btn"><span class="visually-hidden">Back to top</span></a>
     </body>
 </html>
\ No newline at end of file
diff --git a/index.html b/index.html
index 054c0b43..28986f19 100644
--- a/index.html
+++ b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" id="top">
+<html lang="en" id="page-top">
     <head>
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -48,8 +48,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div>
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -247,8 +246,8 @@ <h2 class="header__title">
 
     headerLinkAll[headerLinkAll.length - 1].addEventListener("blur", handleBlur);
 </script>
-            <main id="content">
-                
+        <main id="content">
+            
 <h1 class="visually-hidden">Home Page</h1>
 <div class="home--container">
     <section class="profile">
@@ -531,8 +530,8 @@ <h2 class="heading--home">Badges</h2>
     <script src="https://unpkg.com/website-carbon-badges@1.1.3/b.min.js" defer></script>
 </section>
 </div>
-            </main>
-            <footer class="footer">
+        </main>
+        <footer class="footer">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
     <ul class="socials__links">
@@ -578,6 +577,54 @@ <h2 class="visually-hidden">Social Links:</h2>
 
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
+    <p><a class="footer__top-link" href="#page-top">Back to Top</a></p>
+    <button class="top-btn hidden" aria-label="Scroll to top">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M7 11l5-5m0 0l5 5m-5-5v12" />
+    </svg>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        margin: 0;
+        padding: 0;
+        bottom: 0.5rem;
+        right: 0.5rem;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn-bg);
+        color: var(--clr-top-btn-txt);
+        border-radius: 50em;
+        width: 2rem;
+        aspect-ratio: 1 / 1;
+    }
+
+    .top-btn:focus {
+        outline: 0.25em solid var(--clr-top-btn-bg);
+        outline-offset: 0.15em;
+    }
+</style>
+
+<script defer>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script>
     <div class="h-card hidden">
     <span class="p-name">Helen Chong</span>
     <span class="p-given-name">Helen</span>
@@ -648,7 +695,5 @@ <h2 class="visually-hidden">Social Links:</h2>
         }
     }
 </style>
-        </div>
-        <a href="#top" class="top-btn"><span class="visually-hidden">Back to top</span></a>
     </body>
 </html>
\ No newline at end of file
diff --git a/now/index.html b/now/index.html
index a39b34e1..68b1d6fa 100644
--- a/now/index.html
+++ b/now/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" id="top">
+<html lang="en" id="page-top">
     <head>
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -48,8 +48,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div>
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -247,8 +246,8 @@ <h2 class="header__title">
 
     headerLinkAll[headerLinkAll.length - 1].addEventListener("blur", handleBlur);
 </script>
-            <main id="content">
-                
+        <main id="content">
+            
 <header class="main__header">
     
     <nav>
@@ -291,8 +290,8 @@ <h2>Other Things I Have Been Doing Recently</h2>
     
 </div>
 
-            </main>
-            <footer class="footer">
+        </main>
+        <footer class="footer">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
     <ul class="socials__links">
@@ -338,6 +337,54 @@ <h2 class="visually-hidden">Social Links:</h2>
 
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
+    <p><a class="footer__top-link" href="#page-top">Back to Top</a></p>
+    <button class="top-btn hidden" aria-label="Scroll to top">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M7 11l5-5m0 0l5 5m-5-5v12" />
+    </svg>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        margin: 0;
+        padding: 0;
+        bottom: 0.5rem;
+        right: 0.5rem;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn-bg);
+        color: var(--clr-top-btn-txt);
+        border-radius: 50em;
+        width: 2rem;
+        aspect-ratio: 1 / 1;
+    }
+
+    .top-btn:focus {
+        outline: 0.25em solid var(--clr-top-btn-bg);
+        outline-offset: 0.15em;
+    }
+</style>
+
+<script defer>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script>
     <div class="h-card hidden">
     <span class="p-name">Helen Chong</span>
     <span class="p-given-name">Helen</span>
@@ -408,7 +455,5 @@ <h2 class="visually-hidden">Social Links:</h2>
         }
     }
 </style>
-        </div>
-        <a href="#top" class="top-btn"><span class="visually-hidden">Back to top</span></a>
     </body>
 </html>
\ No newline at end of file
diff --git a/projects/frontend-mentor/index.html b/projects/frontend-mentor/index.html
index 9720372d..8efe7c71 100644
--- a/projects/frontend-mentor/index.html
+++ b/projects/frontend-mentor/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" id="top">
+<html lang="en" id="page-top">
     <head>
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -45,8 +45,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div>
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -244,8 +243,8 @@ <h2 class="header__title">
 
     headerLinkAll[headerLinkAll.length - 1].addEventListener("blur", handleBlur);
 </script>
-            <main id="content">
-                <div class="project--page">
+        <main id="content">
+            <div class="project--page">
     <header class="main__header">
         
     <nav>
@@ -292,8 +291,8 @@ <h2>Lessons Learned</h2>
         </div>
     </article>
 </div>
-            </main>
-            <footer class="footer">
+        </main>
+        <footer class="footer">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
     <ul class="socials__links">
@@ -339,6 +338,54 @@ <h2 class="visually-hidden">Social Links:</h2>
 
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
+    <p><a class="footer__top-link" href="#page-top">Back to Top</a></p>
+    <button class="top-btn hidden" aria-label="Scroll to top">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M7 11l5-5m0 0l5 5m-5-5v12" />
+    </svg>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        margin: 0;
+        padding: 0;
+        bottom: 0.5rem;
+        right: 0.5rem;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn-bg);
+        color: var(--clr-top-btn-txt);
+        border-radius: 50em;
+        width: 2rem;
+        aspect-ratio: 1 / 1;
+    }
+
+    .top-btn:focus {
+        outline: 0.25em solid var(--clr-top-btn-bg);
+        outline-offset: 0.15em;
+    }
+</style>
+
+<script defer>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script>
     <div class="h-card hidden">
     <span class="p-name">Helen Chong</span>
     <span class="p-given-name">Helen</span>
@@ -409,7 +456,5 @@ <h2 class="visually-hidden">Social Links:</h2>
         }
     }
 </style>
-        </div>
-        <a href="#top" class="top-btn"><span class="visually-hidden">Back to top</span></a>
     </body>
 </html>
\ No newline at end of file
diff --git a/projects/index.html b/projects/index.html
index 4dbd0df2..2a3e1080 100644
--- a/projects/index.html
+++ b/projects/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" id="top">
+<html lang="en" id="page-top">
     <head>
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -45,8 +45,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div>
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -244,8 +243,8 @@ <h2 class="header__title">
 
     headerLinkAll[headerLinkAll.length - 1].addEventListener("blur", handleBlur);
 </script>
-            <main id="content">
-                
+        <main id="content">
+            
 <header class="main__header">
     
 
@@ -424,8 +423,8 @@ <h2 class="project-card__title">Tenzies Game</h3>
     
 </div>
 
-            </main>
-            <footer class="footer">
+        </main>
+        <footer class="footer">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
     <ul class="socials__links">
@@ -471,6 +470,54 @@ <h2 class="visually-hidden">Social Links:</h2>
 
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
+    <p><a class="footer__top-link" href="#page-top">Back to Top</a></p>
+    <button class="top-btn hidden" aria-label="Scroll to top">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M7 11l5-5m0 0l5 5m-5-5v12" />
+    </svg>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        margin: 0;
+        padding: 0;
+        bottom: 0.5rem;
+        right: 0.5rem;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn-bg);
+        color: var(--clr-top-btn-txt);
+        border-radius: 50em;
+        width: 2rem;
+        aspect-ratio: 1 / 1;
+    }
+
+    .top-btn:focus {
+        outline: 0.25em solid var(--clr-top-btn-bg);
+        outline-offset: 0.15em;
+    }
+</style>
+
+<script defer>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script>
     <div class="h-card hidden">
     <span class="p-name">Helen Chong</span>
     <span class="p-given-name">Helen</span>
@@ -541,7 +588,5 @@ <h2 class="visually-hidden">Social Links:</h2>
         }
     }
 </style>
-        </div>
-        <a href="#top" class="top-btn"><span class="visually-hidden">Back to top</span></a>
     </body>
 </html>
\ No newline at end of file
diff --git a/projects/quizzical/index.html b/projects/quizzical/index.html
index 478dba19..a27266a7 100644
--- a/projects/quizzical/index.html
+++ b/projects/quizzical/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" id="top">
+<html lang="en" id="page-top">
     <head>
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -45,8 +45,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div>
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -244,8 +243,8 @@ <h2 class="header__title">
 
     headerLinkAll[headerLinkAll.length - 1].addEventListener("blur", handleBlur);
 </script>
-            <main id="content">
-                <div class="project--page">
+        <main id="content">
+            <div class="project--page">
     <header class="main__header">
         
     <nav>
@@ -291,8 +290,8 @@ <h2>Technologies Used</h2>
         </div>
     </article>
 </div>
-            </main>
-            <footer class="footer">
+        </main>
+        <footer class="footer">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
     <ul class="socials__links">
@@ -338,6 +337,54 @@ <h2 class="visually-hidden">Social Links:</h2>
 
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
+    <p><a class="footer__top-link" href="#page-top">Back to Top</a></p>
+    <button class="top-btn hidden" aria-label="Scroll to top">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M7 11l5-5m0 0l5 5m-5-5v12" />
+    </svg>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        margin: 0;
+        padding: 0;
+        bottom: 0.5rem;
+        right: 0.5rem;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn-bg);
+        color: var(--clr-top-btn-txt);
+        border-radius: 50em;
+        width: 2rem;
+        aspect-ratio: 1 / 1;
+    }
+
+    .top-btn:focus {
+        outline: 0.25em solid var(--clr-top-btn-bg);
+        outline-offset: 0.15em;
+    }
+</style>
+
+<script defer>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script>
     <div class="h-card hidden">
     <span class="p-name">Helen Chong</span>
     <span class="p-given-name">Helen</span>
@@ -408,7 +455,5 @@ <h2 class="visually-hidden">Social Links:</h2>
         }
     }
 </style>
-        </div>
-        <a href="#top" class="top-btn"><span class="visually-hidden">Back to top</span></a>
     </body>
 </html>
\ No newline at end of file
diff --git a/projects/recipe-hub/index.html b/projects/recipe-hub/index.html
index 6f96738b..ebe26be2 100644
--- a/projects/recipe-hub/index.html
+++ b/projects/recipe-hub/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" id="top">
+<html lang="en" id="page-top">
     <head>
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -45,8 +45,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div>
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -244,8 +243,8 @@ <h2 class="header__title">
 
     headerLinkAll[headerLinkAll.length - 1].addEventListener("blur", handleBlur);
 </script>
-            <main id="content">
-                <div class="project--page">
+        <main id="content">
+            <div class="project--page">
     <header class="main__header">
         
     <nav>
@@ -289,8 +288,8 @@ <h3>Lessons Learned</h3>
         </div>
     </article>
 </div>
-            </main>
-            <footer class="footer">
+        </main>
+        <footer class="footer">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
     <ul class="socials__links">
@@ -336,6 +335,54 @@ <h2 class="visually-hidden">Social Links:</h2>
 
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
+    <p><a class="footer__top-link" href="#page-top">Back to Top</a></p>
+    <button class="top-btn hidden" aria-label="Scroll to top">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M7 11l5-5m0 0l5 5m-5-5v12" />
+    </svg>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        margin: 0;
+        padding: 0;
+        bottom: 0.5rem;
+        right: 0.5rem;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn-bg);
+        color: var(--clr-top-btn-txt);
+        border-radius: 50em;
+        width: 2rem;
+        aspect-ratio: 1 / 1;
+    }
+
+    .top-btn:focus {
+        outline: 0.25em solid var(--clr-top-btn-bg);
+        outline-offset: 0.15em;
+    }
+</style>
+
+<script defer>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script>
     <div class="h-card hidden">
     <span class="p-name">Helen Chong</span>
     <span class="p-given-name">Helen</span>
@@ -406,7 +453,5 @@ <h2 class="visually-hidden">Social Links:</h2>
         }
     }
 </style>
-        </div>
-        <a href="#top" class="top-btn"><span class="visually-hidden">Back to top</span></a>
     </body>
 </html>
\ No newline at end of file
diff --git a/projects/scrimba/index.html b/projects/scrimba/index.html
index 1c55e4ea..bdafb787 100644
--- a/projects/scrimba/index.html
+++ b/projects/scrimba/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" id="top">
+<html lang="en" id="page-top">
     <head>
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -45,8 +45,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div>
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -244,8 +243,8 @@ <h2 class="header__title">
 
     headerLinkAll[headerLinkAll.length - 1].addEventListener("blur", handleBlur);
 </script>
-            <main id="content">
-                <div class="project--page">
+        <main id="content">
+            <div class="project--page">
     <header class="main__header">
         
     <nav>
@@ -291,8 +290,8 @@ <h2>Technologies Used</h2>
         </div>
     </article>
 </div>
-            </main>
-            <footer class="footer">
+        </main>
+        <footer class="footer">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
     <ul class="socials__links">
@@ -338,6 +337,54 @@ <h2 class="visually-hidden">Social Links:</h2>
 
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
+    <p><a class="footer__top-link" href="#page-top">Back to Top</a></p>
+    <button class="top-btn hidden" aria-label="Scroll to top">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M7 11l5-5m0 0l5 5m-5-5v12" />
+    </svg>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        margin: 0;
+        padding: 0;
+        bottom: 0.5rem;
+        right: 0.5rem;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn-bg);
+        color: var(--clr-top-btn-txt);
+        border-radius: 50em;
+        width: 2rem;
+        aspect-ratio: 1 / 1;
+    }
+
+    .top-btn:focus {
+        outline: 0.25em solid var(--clr-top-btn-bg);
+        outline-offset: 0.15em;
+    }
+</style>
+
+<script defer>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script>
     <div class="h-card hidden">
     <span class="p-name">Helen Chong</span>
     <span class="p-given-name">Helen</span>
@@ -408,7 +455,5 @@ <h2 class="visually-hidden">Social Links:</h2>
         }
     }
 </style>
-        </div>
-        <a href="#top" class="top-btn"><span class="visually-hidden">Back to top</span></a>
     </body>
 </html>
\ No newline at end of file
diff --git a/projects/tenzies/index.html b/projects/tenzies/index.html
index 88b7ea08..45ce00db 100644
--- a/projects/tenzies/index.html
+++ b/projects/tenzies/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" id="top">
+<html lang="en" id="page-top">
     <head>
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -45,8 +45,7 @@
     </head>
     <body>
         <div class="skip-btn"><a href="#content">Skip to content</a></div>
-        <div>
-            
+        
 
 <header class="header">
     <h2 class="header__title">
@@ -244,8 +243,8 @@ <h2 class="header__title">
 
     headerLinkAll[headerLinkAll.length - 1].addEventListener("blur", handleBlur);
 </script>
-            <main id="content">
-                <div class="project--page">
+        <main id="content">
+            <div class="project--page">
     <header class="main__header">
         
     <nav>
@@ -289,8 +288,8 @@ <h2>Lessons Learned</h2>
         </div>
     </article>
 </div>
-            </main>
-            <footer class="footer">
+        </main>
+        <footer class="footer">
     <nav class="socials">
     <h2 class="visually-hidden">Social Links:</h2>
     <ul class="socials__links">
@@ -336,6 +335,54 @@ <h2 class="visually-hidden">Social Links:</h2>
 
     <p>Built with <a href="https://www.11ty.dev/">Eleventy</a>. <a href="https://github.com/helenclx/helenclx.github.io">Source Code</a>.</p>
 
+    <p><a class="footer__top-link" href="#page-top">Back to Top</a></p>
+    <button class="top-btn hidden" aria-label="Scroll to top">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M7 11l5-5m0 0l5 5m-5-5v12" />
+    </svg>
+</button>
+
+<style>
+    .top-btn {
+        position: fixed;
+        margin: 0;
+        padding: 0;
+        bottom: 0.5rem;
+        right: 0.5rem;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn-bg);
+        color: var(--clr-top-btn-txt);
+        border-radius: 50em;
+        width: 2rem;
+        aspect-ratio: 1 / 1;
+    }
+
+    .top-btn:focus {
+        outline: 0.25em solid var(--clr-top-btn-bg);
+        outline-offset: 0.15em;
+    }
+</style>
+
+<script defer>
+    const topButton = document.querySelector(".top-btn");
+
+    window.onscroll = () => {
+        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            topButton.classList.remove("hidden");
+        } else {
+            topButton.classList.add("hidden");
+        }
+    }
+
+    topButton.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: "smooth",
+        });
+    });
+</script>
     <div class="h-card hidden">
     <span class="p-name">Helen Chong</span>
     <span class="p-given-name">Helen</span>
@@ -406,7 +453,5 @@ <h2 class="visually-hidden">Social Links:</h2>
         }
     }
 </style>
-        </div>
-        <a href="#top" class="top-btn"><span class="visually-hidden">Back to top</span></a>
     </body>
 </html>
\ No newline at end of file
