diff --git a/static/css/layout.css b/static/css/layout.css
index 72d8120f..69a5375e 100644
--- a/static/css/layout.css
+++ b/static/css/layout.css
@@ -260,8 +260,8 @@
 /* Back to Top Button */
 .back-to-top {
     position: fixed;
-    bottom: 20px;
-    right: 20px;
+    bottom: 85px;
+    right: 30px;
     width: 36px;
     height: 36px;
     border-radius: 50%;
diff --git a/static/js/utils/uiHelpers.js b/static/js/utils/uiHelpers.js
index 90812225..a9da3b64 100644
--- a/static/js/utils/uiHelpers.js
+++ b/static/js/utils/uiHelpers.js
@@ -311,15 +311,12 @@ export function initFolderTagsVisibility() {
 }
 
 export function initBackToTop() {
-    const button = document.createElement('button');
-    button.className = 'back-to-top';
-    button.innerHTML = '<i class="fas fa-chevron-up"></i>';
-    button.title = 'Back to top';
-    document.body.appendChild(button);
+    const button = document.getElementById('backToTopBtn');
+    if (!button) return;
 
     // Get the scrollable container
     const scrollContainer = document.querySelector('.page-content');
-
+    
     // Show/hide button based on scroll position
     const toggleBackToTop = () => {
         const scrollThreshold = window.innerHeight * 0.3;
diff --git a/templates/base.html b/templates/base.html
index 3ed78e79..257ce245 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -76,6 +76,11 @@
         {% include 'components/progress_panel.html' %}
         {% block additional_components %}{% endblock %}
 
+        <!-- Add back-to-top button here -->
+        <button id="backToTopBtn" class="back-to-top" title="Back to top">
+            <i class="fas fa-chevron-up"></i>
+        </button>
+
         <div class="container">
             {% if is_initializing %}
                 <!-- Show initialization component when initializing -->