diff --git a/src/_includes/main/base.njk b/src/_includes/main/base.njk
index 1a88286d..661c0a6e 100644
--- a/src/_includes/main/base.njk
+++ b/src/_includes/main/base.njk
@@ -33,16 +33,11 @@
         {# JavaScript #}
         <script src="/assets/js/navbar.js" defer></script>
         <script src="/assets/js/events.js" defer></script>
-        <script src="/assets/js/scroll.js" defer></script>
         {% if toc %} <script src="/assets/js/toc.js" defer></script> {% endif %}
 
         <title>{{ title }} | Leilukin's Hub</title>
     </head>
     <body>
-        <button class="top-btn hidden" aria-label="Scroll to top">
-            <img src="/assets/images/elements/top.svg" alt="">
-        </button>
-
         {% include "main/header.njk" %}
         {% include "main/navbar.njk" %}
         <main>
@@ -57,5 +52,8 @@
             </aside> -->
         </main>
         {% include "main/footer.njk" %}
+        {% renderTemplate "webc" %}
+            <top-btn></top-btn>
+        {% endrenderTemplate %}
     </body>
 </html>
\ No newline at end of file
diff --git a/src/_includes/main/top-btn.webc b/src/_includes/main/top-btn.webc
new file mode 100644
index 00000000..e0e1da5e
--- /dev/null
+++ b/src/_includes/main/top-btn.webc
@@ -0,0 +1,49 @@
+<button class="top-btn hidden" aria-label="Scroll to top">
+    <img src="/assets/images/elements/top.svg" alt="">
+</button>
+
+<style webc:keep webc:bucket="defer">
+    :root {
+        --clr-top-btn: #FFD05A;
+    }
+
+    .top-btn {
+        position: fixed;
+        bottom: 20px;
+        right: 20px;
+        z-index: 999;
+        border: none;
+        background-color: var(--clr-top-btn);
+        border-radius: 50em;
+        padding: 0.5em;
+    }
+
+    .top-btn:focus {
+        outline: 0.25em solid var(--clr-top-btn);
+        outline-offset: 0.15em;
+    }
+
+    .top-btn img {
+        width: 2rem;
+    }
+</style>
+
+<script webc:keep webc:bucket="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>
\ No newline at end of file
diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index d22133dc..113877f3 100644
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@@ -229,22 +229,6 @@ dd {
     grid-column-start: 2;
 }
 
-/* Scrool to Top Button */
-.top-btn {
-    position: fixed;
-    bottom: 20px;
-    right: 30px;
-    z-index: 999;
-    border: none;
-    background-color: var(--clr-top-btn);
-    border-radius: 0.2em;
-    padding: 0.4em;
-}
-
-.top-btn img {
-    width: 1.6rem;
-}
-
 /* HEADER COMPONENT */
 .main-header {
     width: 100%;
diff --git a/src/assets/js/scroll.js b/src/assets/js/scroll.js
deleted file mode 100644
index 2fec53d2..00000000
--- a/src/assets/js/scroll.js
+++ /dev/null
@@ -1,17 +0,0 @@
-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",
-    });
-});
\ No newline at end of file
