diff --git a/app/components/scroll-to-top.tsx b/app/components/scroll-to-top.tsx
new file mode 100644
index 0000000..15af7fc
--- /dev/null
+++ b/app/components/scroll-to-top.tsx
@@ -0,0 +1,47 @@
+"use client";
+
+import {useEffect} from "react";
+import {useAnimationControls, useScroll, motion, Variants} from "framer-motion";
+import {FaArrowAltCircleUp, FaArrowCircleUp, FaArrowUp} from "react-icons/fa"
+
+const isBrowser = () => typeof window != 'undefined';
+
+const ScrollToTopContainerVariants: Variants = {
+ hide: {opacity: 0, y: 100},
+ show: {opacity: 1, y: 0},
+}
+
+const scrollToTop = () => {
+ if (!isBrowser()) {
+ return;
+ }
+ window.scrollTo({top: 0, behavior: 'smooth'});
+};
+
+const ScrollToTopButton = () => {
+ const {scrollY} = useScroll();
+ const controls = useAnimationControls();
+
+ useEffect(() => {
+ return scrollY.on('change', (latestValue) => {
+ if (latestValue > window.innerHeight) {
+ controls.start('show');
+ } else {
+ controls.start('hide');
+ }
+ });
+ });
+
+ return (
+
+
+
+ );
+};
+
+export default ScrollToTopButton;
\ No newline at end of file
diff --git a/app/layout.tsx b/app/layout.tsx
index 3375a25..b909185 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -5,6 +5,7 @@ import Navbar from "./components/navbar";
import ModalOverlay from "./components/modal-overlay";
import Link from "next/link";
import Footer from "./components/footer";
+import ScrollToTopButton from "@/app/components/scroll-to-top";
const inter = Inter({ subsets: ["latin"] });
@@ -23,6 +24,7 @@ export default function RootLayout({
{children}
+