diff --git a/website/src/components/ScrollButton/index.js b/website/src/components/ScrollButton/index.js
new file mode 100644
index 0000000..be224ba
--- /dev/null
+++ b/website/src/components/ScrollButton/index.js
@@ -0,0 +1,55 @@
+import React, { useEffect, useState } from 'react';
+import styles from './styles.module.css';
+
+export default function ScrollButton() {
+  const [showButton, setShowButton] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      if (typeof window !== 'undefined') {
+        setShowButton(window.scrollY > 150);
+      }
+    };
+
+    if (typeof window !== 'undefined') {
+      window.addEventListener('scroll', handleScroll);
+      // Initial check
+      handleScroll();
+      return () => window.removeEventListener('scroll', handleScroll);
+    }
+  }, []);
+
+  const scrollUp = () => {
+    if (typeof window !== 'undefined') {
+      window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
+    }
+  };
+
+  return (
+    <div className={styles.scrollButtonContainer}>
+      {showButton && (
+        <button
+          onClick={scrollUp}
+          className={styles.scrollButton}
+          aria-label="Scroll to top"
+          data-test="scroll-button"
+        >
+          <svg 
+            className={styles.scrollIcon} 
+            xmlns="http://www.w3.org/2000/svg" 
+            width="24" 
+            height="24" 
+            viewBox="0 0 24 24" 
+            fill="none" 
+            stroke="currentColor" 
+            strokeWidth="2" 
+            strokeLinecap="round" 
+            strokeLinejoin="round"
+          >
+            <path d="m18 15-6-6-6 6"/>
+          </svg>
+        </button>
+      )}
+    </div>
+  );
+}
diff --git a/website/src/components/ScrollButton/styles.module.css b/website/src/components/ScrollButton/styles.module.css
new file mode 100644
index 0000000..6e01a7d
--- /dev/null
+++ b/website/src/components/ScrollButton/styles.module.css
@@ -0,0 +1,45 @@
+.scrollButtonContainer {
+  position: fixed;
+  bottom: 2rem;
+  right: 2rem;
+  z-index: 1000;
+}
+
+.scrollButton {
+  width: 3rem;
+  height: 3rem;
+  border-radius: 0.5rem;
+  border: 1px solid #e5e7eb;
+  background-color: #ffffff;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+}
+
+.scrollButton:hover {
+  background-color: #f9fafb;
+  transform: translateY(-0.25rem);
+}
+
+.scrollIcon {
+  width: 1.5rem;
+  height: 1.5rem;
+  color: #374151;
+}
+
+/* Dark mode styles */
+html[data-theme="dark"] .scrollButton {
+  background-color: #1f2937;
+  border-color: #4b5563;
+}
+
+html[data-theme="dark"] .scrollButton:hover {
+  background-color: #374151;
+}
+
+html[data-theme="dark"] .scrollIcon {
+  color: #d1d5db;
+}
diff --git a/website/src/pages/index.js b/website/src/pages/index.js
index eb4c9b9..709ea99 100644
--- a/website/src/pages/index.js
+++ b/website/src/pages/index.js
@@ -1,12 +1,14 @@
 import Layout from "@theme/Layout";
 import HomepageHeader from "../components/HomepageHeader";
 import HomepageContent from "../components/HomepageContent";
+import ScrollButton from "../components/ScrollButton";
 
 export default function Home() {
     return (
         <Layout title="Home" description="Landing page for schema project">
             <HomepageHeader />
             <HomepageContent />
+            <ScrollButton />
         </Layout>
     );
 }