diff --git a/components/ScrollButton.tsx b/components/ScrollButton.tsx
new file mode 100644
index 00000000..0f9d42fe
--- /dev/null
+++ b/components/ScrollButton.tsx
@@ -0,0 +1,49 @@
+import React, { useEffect, useState } from "react";
+
+import CustomImage from "./CustomImage";
+
+export default function ScrollButton() {
+  const [isVisible, setIsVisible] = useState(false);
+
+  const toggleVisible = () => {
+    const scrolled = document.documentElement.scrollTop;
+    if (scrolled > 100) {
+      setIsVisible(true);
+    } else {
+      setIsVisible(false);
+    }
+  };
+
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth",
+      /* you can also use 'auto' behaviour
+             in place of 'smooth' */
+    });
+  };
+
+  useEffect(() => {
+    window.addEventListener("scroll", toggleVisible);
+  });
+
+  return (
+    <a
+      style={{
+        display: isVisible ? "inline" : "none",
+        position: "fixed",
+        bottom: "3px",
+        right: "30px",
+        zIndex: "1",
+      }}
+    >
+      <CustomImage
+        onClick={scrollToTop}
+        imageKey="icons/scroll-to-top"
+        alt="Logo"
+        width={60}
+        height={60}
+      />
+    </a>
+  );
+}
diff --git a/images/all-images.ts b/images/all-images.ts
index ca956f46..99e4840c 100644
--- a/images/all-images.ts
+++ b/images/all-images.ts
@@ -22,6 +22,7 @@ const allImages = {
   "content/photoshoot-marketing-17": { width: 6000, height: 2954, maxSize: 3840, extension: ".jpg" },
   "content/photoshoot-marketing-3": { width: 3760, height: 3294, maxSize: 3840, extension: ".jpg" },
   "content/photoshoot-marketing-7": { width: 6000, height: 3376, maxSize: 3840, extension: ".jpg" },
+  "icons/scroll-to-top": { width: 266, height: 263, maxSize: 384, extension: ".png" },
   "icons/tse-bulb": { width: 1484, height: 1484, maxSize: 1920, extension: ".png" },
   "members/aammya_sapra": { width: 999, height: 999, maxSize: 1080, extension: ".jpg" },
   "members/aaron_chan": { width: 1500, height: 1500, maxSize: 1080, extension: ".png" },
diff --git a/images/icons/scroll-to-top.png b/images/icons/scroll-to-top.png
new file mode 100644
index 00000000..ed5f7c5b
Binary files /dev/null and b/images/icons/scroll-to-top.png differ
diff --git a/pages/_app.tsx b/pages/_app.tsx
index f2f86ab2..398854a7 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -4,6 +4,7 @@ import "../styles/common.scss";
 
 import Footer from "../components/Footer";
 import Navbar from "../components/Navbar";
+import ScrollButton from "../components/ScrollButton";
 
 import styles from "./_app.module.scss";
 
@@ -11,6 +12,7 @@ function MyApp({ Component, pageProps }: AppProps) {
   return (
     <div className={styles.container}>
       <Navbar />
+      <ScrollButton />
       <main className={styles.main}>
         <Component {...pageProps} />
       </main>