diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 039b217..e6fc34c 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -16,12 +16,43 @@
 	{{ end }}
 </main>
 
+<button id="scrollToTop" class="scroll-to-top"><div class="topArrow">
+    ↑
+</div></button>
+
 {{ block "footer.html" . }}
 {{ partialCached "footer.html" . }}
 {{ end }}
 
 {{ block "scripts" . }}
 {{ partial "scripts" . }}
+
+
+<script>
+  document.addEventListener("DOMContentLoaded", () => {
+    const scrollToTopButton = document.getElementById("scrollToTop");
+
+    window.addEventListener("scroll", () => {
+      if (window.scrollY > 300) {
+        scrollToTopButton.style.display = "block";
+      } else {
+        scrollToTopButton.style.display = "none";
+      }
+    });
+
+    scrollToTopButton.addEventListener("click", () => {
+      window.scrollTo({
+        top: 0,
+        behavior: "smooth"
+      });
+    });
+  });
+</script>
+
+<style>
+  
+</style>
+
 {{ end }}
 
 </body>
diff --git a/static/theme.css b/static/theme.css
index 0c8b916..e1f8740 100644
--- a/static/theme.css
+++ b/static/theme.css
@@ -301,6 +301,33 @@ body>header nav a.active {
 	display: none
 }
 
+.scroll-to-top {
+    display: none;
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    padding: 10px 15px;
+    background-color: #007BFF;
+    color: black;
+    border: none;
+    height: 60px;
+    width: 60px;
+    border-radius: 50%;
+    cursor: pointer;
+    z-index: 1000;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+  }
+
+.scroll-to-top:hover {
+    background-color: #0056b3;
+  }
+.topArrow{
+    font-size: 40px;
+    position: relative;
+    bottom: 55px;
+    color: white;
+  }
+
 @media (max-width:71.24em) {
 	body>header {
 		flex-wrap: wrap