diff --git a/index.html b/index.html
index bf5a58b..1a69cc1 100644
--- a/index.html
+++ b/index.html
@@ -81,6 +81,10 @@ <h6 id="confirm-msg-all">Are you sure you want to delete this task?</h6>
   </div>
   <!-- ------------------- -->
   <div class="container">
+    <!-- <button onclick="topFunction()" id="myBtn" title="Go to top">Top</button> -->
+    <img onclick="topFunction()" src="./scroll_img.svg" id="myBtn">
+    
+    
     <!-- <header class="text-center">
         <div class="container">
           <div class="row">
@@ -147,6 +151,7 @@ <h3 class="mt-4 text-center" id="heading-tasks">Tasks</h3>
     </div>
   </div>
   <br /><br />
+  
   <div >
   <h2 style=" text-align: center" class="mt-2 animate__animated animate__fadeInUp animate__slow  animate__delay-3s">Why Simply Tasked?</h2>
   <p style="padding: 0px 10px; text-align: center" class="mb-4 animate__animated animate__fadeInUp animate__slow  animate__delay-3s">
@@ -163,7 +168,7 @@ <h2 style=" text-align: center" class="mt-2 animate__animated animate__fadeInUp
   </div>
   </div>
 
-
+<script src="scroll.js"></script>
   <script src="index.js"></script>
   <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
   <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js">
diff --git a/scroll.js b/scroll.js
new file mode 100644
index 0000000..f39df5a
--- /dev/null
+++ b/scroll.js
@@ -0,0 +1,106 @@
+/*
+// Get the button:
+let mybutton = document.getElementById("myBtn");
+
+// When the user scrolls down 20px from the top of the document, show the button
+window.onscroll = function() {
+  scrollFunction();
+};
+
+function scrollFunction() {
+  if (
+    document.body.scrollTop > 20 ||
+    document.documentElement.scrollTop > 20
+  ) {
+    mybutton.style.display = "block";
+  } else {
+    mybutton.style.display = "none";
+  }
+}
+
+// When the user clicks on the button, scroll to the top of the document smoothly
+function topFunction() {
+  // For Safari
+  document.body.scrollTop = 0;
+  // For Chrome, Firefox, IE and Opera
+  document.documentElement.scrollTop = 0;
+
+  // Check for browser support
+  if ("scrollBehavior" in document.documentElement.style) {
+    // Smooth scroll to the top
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth"
+    });
+  } else {
+    // Fallback for browsers that do not support smooth scrolling
+    window.scrollTo(0, 0);
+  }
+}
+*/
+// Get the button:
+//final
+
+let mybutton = document.getElementById("myBtn");
+
+// When the user scrolls down 20px from the top of the document, show the button
+window.onscroll = function() {
+  scrollFunction();
+};
+
+function scrollFunction() {
+  if (
+    document.body.scrollTop > 20 ||
+    document.documentElement.scrollTop > 20
+  ) {
+    mybutton.style.display = "block";
+  } else {
+    mybutton.style.display = "none";
+  }
+}
+
+// When the user clicks on the button, scroll to the top of the document smoothly
+function topFunction() {
+  // For Safari
+  document.body.scrollTop = 0;
+  // For Chrome, Firefox, IE, and Opera
+  document.documentElement.scrollTop = 0;
+
+  // Check for browser support
+  if ("scrollBehavior" in document.documentElement.style) {
+    // Smooth scroll to the top
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth"
+    });
+  } else {
+    // Fallback for browsers that do not support smooth scrolling
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth"
+    });
+  }
+}
+
+/*
+const topButton = document.getElementById("myBtn");
+const contentWrapper = document.querySelector(".contentWrapper");
+
+function scrollUp() {
+  if (contentWrapper.scrollTop > 100) {
+    topButton.style.display = "block";
+  } else {
+    topButton.style.display = "none";
+  }
+}
+
+function getTop() {
+  contentWrapper.scrollTo({
+    top: 0,
+    behavior: "smooth",
+  });
+}
+
+contentWrapper.addEventListener("scroll", scrollUp);
+topButton.addEventListener("click", getTop);
+  */
\ No newline at end of file
diff --git a/scroll_img.svg b/scroll_img.svg
new file mode 100644
index 0000000..5c9a013
--- /dev/null
+++ b/scroll_img.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-double-up" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M7.646 2.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 3.707 2.354 9.354a.5.5 0 1 1-.708-.708l6-6z"/>
+  <path fill-rule="evenodd" d="M7.646 6.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 7.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"/>
+</svg>
\ No newline at end of file
diff --git a/style.css b/style.css
index d15135d..a92d25f 100644
--- a/style.css
+++ b/style.css
@@ -63,6 +63,27 @@ body {
   transition: 0.4s;
   border-radius: 30px;
 }
+html{
+
+  scroll-behavior: smooth;
+
+}
+#myBtn {
+  display: none; /* Hidden by default */
+  position: fixed; /* Fixed/sticky position */
+  bottom: 50px; /* Place the button at the bottom of the page */
+  left: 30px; /* Place the button 30px from the left */
+  z-index: 99; /* Make sure it does not overlap */
+  border: none; /* Remove borders */
+  outline: none; /* Remove outline */
+  cursor: pointer; /* Add a mouse pointer on hover */
+  width: 30px;
+  height: 30px;
+}
+
+#myBtn:hover {
+  background-color: #06d1f5; /* Add a dark-grey background on hover */
+}
 
 .slider:before {
   position: absolute;