diff --git a/public/scripts/ContactButton.js b/public/scripts/ContactButton.js
new file mode 100644
index 0000000..2ce2dcb
--- /dev/null
+++ b/public/scripts/ContactButton.js
@@ -0,0 +1,36 @@
+document.addEventListener('DOMContentLoaded', function() {
+  let contactSection = document.getElementById('contact');
+  let contactButton = document.querySelector('a[href="#contact"]');
+
+  function getSectionPosition() {
+    let rect = contactSection.getBoundingClientRect();
+    let scrollTop = window.scrollY || document.documentElement.scrollTop;
+    return {
+      top: rect.top + scrollTop,
+      height: rect.height,
+      bottom: rect.top + scrollTop + rect.height
+    };
+  }  // get position of #contact section
+
+  function toggleButtonVisibility() {
+    let sectionPos = getSectionPosition();
+    let scrollTop = window.scrollY || document.documentElement.scrollTop;
+    let viewportHeight = window.innerHeight;
+    let scrollBottom = scrollTop + viewportHeight;
+
+    if (window.innerWidth >= 768) {
+      let inView = (scrollBottom > sectionPos.top) && (scrollTop < sectionPos.bottom);
+      if (inView) {
+        contactButton.classList.add('md:hidden');
+      } else {
+        contactButton.classList.remove('md:hidden');
+      }
+    } else {
+      contactButton.classList.add('md:hidden');
+    }
+  }  // update button visibility based on the scroll position
+
+  toggleButtonVisibility();
+  window.addEventListener('scroll', toggleButtonVisibility);  // listener to update button visibility
+  window.addEventListener('resize', toggleButtonVisibility);  // listener to recheck visibility if screen resized
+});
\ No newline at end of file
diff --git a/public/scripts/animations.js b/public/scripts/animations.js
index 633a47a..d8b76f9 100644
--- a/public/scripts/animations.js
+++ b/public/scripts/animations.js
@@ -32,39 +32,3 @@
 //   };
 // })
 
-document.addEventListener('DOMContentLoaded', function() {
-  let contactSection = document.getElementById('contact');
-  let contactButton = document.querySelector('a[href="#contact"]');
-
-  function getSectionPosition() {
-    let rect = contactSection.getBoundingClientRect();
-    let scrollTop = window.scrollY || document.documentElement.scrollTop;
-    return {
-      top: rect.top + scrollTop,
-      height: rect.height,
-      bottom: rect.top + scrollTop + rect.height
-    };
-  }  // get position of #contact section
-
-  function toggleButtonVisibility() {
-    let sectionPos = getSectionPosition();
-    let scrollTop = window.scrollY || document.documentElement.scrollTop;
-    let viewportHeight = window.innerHeight;
-    let scrollBottom = scrollTop + viewportHeight;
-
-    if (window.innerWidth >= 768) {
-      let inView = (scrollBottom > sectionPos.top) && (scrollTop < sectionPos.bottom);
-      if (inView) {
-        contactButton.classList.add('md:hidden');
-      } else {
-        contactButton.classList.remove('md:hidden');
-      }
-    } else {
-      contactButton.classList.add('md:hidden');
-    }
-  }  // update button visibility based on the scroll position
-
-  toggleButtonVisibility();
-  window.addEventListener('scroll', toggleButtonVisibility);  // listener to update button visibility
-  window.addEventListener('resize', toggleButtonVisibility);  // listener to recheck visibility if screen resized
-});
\ No newline at end of file
diff --git a/src/layouts/PageLayout.astro b/src/layouts/PageLayout.astro
index 74f541a..f028fd0 100644
--- a/src/layouts/PageLayout.astro
+++ b/src/layouts/PageLayout.astro
@@ -29,7 +29,7 @@ const { pageTitle } = Astro.props;
       </div>
     </div>
     <script type="text/javascript" src="/scripts/SmoothScrolling.js"></script>
-    <!-- <script type="text/javascript" src="/scripts/animations.js"></script> -->
+    <script type="text/javascript" src="/scripts/ContactButton.js"></script>
     <script type="text/javascript" src="/scripts/FormHandler.js"></script>
   </body>
 </html>