diff --git a/css/style.css b/css/style.css
index b3723e9..9216fe0 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,165 +1,163 @@
-@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap");
 
-*{
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-    font-family: 'Poppins', sans-serif;
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: "Poppins", sans-serif;
+  scroll-behavior: smooth;
 }
 
-body{
-background-color: #070F21;
+body {
+  background-color: #070f21;
 }
 
 header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 5px 10%;
-    padding-top: 0px;
-  }
- 
-  #logo{
-    margin-top: 15px;
-  }
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 5px 10%;
+  padding-top: 0px;
+}
 
-  .nav__links a,
-  .cta,
-  .overlay__content a {
-    color: #edf0f1;
-    text-decoration: none;
-    font-size: px;
-  }
-  
-  .nav__links {
-    list-style: none;
-    display: flex;
-  }
-  
-  .nav__links li {
-    padding: 0px 20px;
-  }
-  
-  .nav__links li a {
-    transition: color 0.3s ease 0s;
-  }
-  
-  .nav__links li a:hover {
-    color: #0088a9;
-  }
-  
-  .cta {
-    padding: 9px 25px;
-    background-color: #FCA311;
-    border: none;
-    border-radius: 50px;
-    cursor: pointer;
-    transition: background-color 0.3s ease 0s;
-  }
-  
-  .cta:hover {
-    background-color: #FCA311
-  }
-  
-  /* Mobile Nav */
-  
-  .menu {
-    display: none;
+#logo {
+  margin-top: 15px;
+}
 
-  }
-  
-  .overlay {
-    height: 100%;
-    width: 0;
-    position: fixed;
-    z-index: 1;
-    left: 0;
-    top: 0;
-    overflow-x: hidden;
-    transition: width 0.5s ease 0s;
-  }
-  
-  .overlay--active {
-    width: 100%;
-  }
-  
-  .overlay__content {
-    display: flex;
-    height: 100%;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    background-color: rgb(0, 0, 0);
-  }
-  
+.nav__links a,
+.cta,
+.overlay__content a {
+  color: #edf0f1;
+  text-decoration: none;
+  font-size: px;
+}
+
+.nav__links {
+  list-style: none;
+  display: flex;
+}
+
+.nav__links li {
+  padding: 0px 20px;
+}
+
+.nav__links li a {
+  transition: color 0.3s ease 0s;
+}
+
+.nav__links li a:hover {
+  color: #0088a9;
+}
+
+.cta {
+  padding: 9px 25px;
+  background-color: #fca311;
+  border: none;
+  border-radius: 50px;
+  cursor: pointer;
+  transition: background-color 0.3s ease 0s;
+}
+
+.cta:hover {
+  background-color: #fca311;
+}
+
+/* Mobile Nav */
+
+.menu {
+  display: none;
+}
+
+.overlay {
+  height: 100%;
+  width: 0;
+  position: fixed;
+  z-index: 1;
+  left: 0;
+  top: 0;
+  overflow-x: hidden;
+  transition: width 0.5s ease 0s;
+}
+
+.overlay--active {
+  width: 100%;
+}
+
+.overlay__content {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: rgb(0, 0, 0);
+}
+
+.overlay a {
+  padding: 15px;
+  font-size: 25px;
+  display: block;
+  transition: color 0.3s ease 0s;
+}
+
+.overlay a:hover,
+.overlay a:focus {
+  color: #0088a9;
+}
+.overlay .close {
+  position: absolute;
+  top: 90px;
+  right: 45px;
+  font-size: 60px;
+  color: #edf0f1;
+}
+
+@media screen and (max-height: 450px) {
   .overlay a {
-    padding: 15px;
-    font-size: 25px;
-    display: block;
-    transition: color 0.3s ease 0s;
+    font-size: 20px;
   }
-  
-  .overlay a:hover,
-  .overlay a:focus {
-    color: #0088a9;
+  .overlay {
+    background-color: black;
   }
   .overlay .close {
-    position: absolute;
-    top: 90px;
-    right: 45px;
-    font-size: 60px;
-    color: #edf0f1;
+    font-size: 40px;
+    top: 15px;
+    right: 35px;
   }
-  
-  @media screen and (max-height: 450px) {
-    .overlay a {
-      font-size: 20px;
-    }
-    .overlay{
-        background-color: black;
-    }
-    .overlay .close {
-      font-size: 40px;
-      top: 15px;
-      right: 35px;
-    }
+}
+
+@media only screen and (max-width: 800px) {
+  .nav__links,
+  .cta {
+    display: none;
   }
-  
-  @media only screen and (max-width: 800px) {
-    .nav__links,
-    .cta {
-      display: none;
-    }
-    .menu {
-      display: initial;
-    }
+  .menu {
+    display: initial;
   }
+}
 
-  
-#logo img{
-    width: 100px;
+#logo img {
+  width: 100px;
 }
 
-.hero{
+.hero {
   text-align: center;
   color: #dbc169;
   background-image: url(../images/banner.svg);
   background-repeat: no-repeat;
   opacity: 1;
-
 }
 
-#main{
+#main {
   margin-top: 1.5em;
   font-size: 30px;
 }
 
-#description{
+#description {
   font-size: 20px;
   line-height: 40px;
 }
 
-.button{
+.button {
   border: 1px solid #d9cda3;
   background: none;
   padding: 10px 20px;
@@ -172,11 +170,11 @@ header {
   overflow: hidden;
 }
 
-.button:hover{
+.button:hover {
   color: #fff;
 }
 
-.button:before{
+.button:before {
   bottom: 0;
   border-radius: 50% 50% 0 0;
   height: 180%;
@@ -197,11 +195,11 @@ header {
   font-weight: 300;
 }
 
-.row hr{
-color:#FCA311;
-text-align: center;
-width: 50px;
-align-items: center;
+.row hr {
+  color: #fca311;
+  text-align: center;
+  width: 50px;
+  align-items: center;
 }
 
 .column {
@@ -220,7 +218,7 @@ align-items: center;
   cursor: pointer;
 }
 
-a{
+a {
   text-decoration: none;
   color: white;
 }
@@ -280,4 +278,35 @@ a{
     max-width: 33.33%;
     padding: 0 1em;
   }
-}
\ No newline at end of file
+}
+
+#myBtn {
+  display: none; /* Hidden by default */
+  position: fixed; /* Fixed/sticky position */
+  bottom: 20px; /* Place the button at the bottom of the page */
+  right: 30px; /* Place the button 30px from the right */
+  z-index: 99; /* Make sure it does not overlap */
+  border: none; /* Remove borders */
+  outline: none; /* Remove outline */
+  background-color: #fca311; /* Set a background color */
+  color: white; /* Text color */
+  cursor: pointer; /* Add a mouse pointer on hover */
+  padding: 7px 15px; /* Some padding */
+  border-radius: 50%; /* Rounded corners */
+  font-size: 18px; /* Increase font size */
+}
+
+#myBtn:hover {
+  background-color: #555; /* Add a dark-grey background on hover */
+}
+@media only screen and (max-width: 600px) {
+  #myBtn {
+    font-size: 30px;
+    border-radius: 100px;
+    width: 55px;
+  }
+
+  #myBtn:hover {
+    background-color: #555; /* Add a dark-grey background on hover */
+  }
+}
diff --git a/index.html b/index.html
index f396ffe..9c24a39 100644
--- a/index.html
+++ b/index.html
@@ -12,6 +12,7 @@
     <link rel="stylesheet" href="css/style.css">
 </head>
 <body>
+    <button onclick="topFunction()" id="myBtn" title="Go to top">	⇮</button>
     <section class="navbar">
         <header>
         <a id="logo" href="/"><img src="images/logo.png" alt="mantra bot logo"></a></a>
diff --git a/js/responsive.js b/js/responsive.js
index 34bf076..f5237ca 100644
--- a/js/responsive.js
+++ b/js/responsive.js
@@ -10,3 +10,24 @@ menuOpen.addEventListener("click", () => {
 menuClose.addEventListener("click", () => {
   overlay.classList.remove("overlay--active");
 });
+
+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
+function topFunction() {
+  document.body.scrollTop = 0; // For Safari
+  document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
+}