diff --git a/package-lock.json b/package-lock.json
index b9f48bf..6ac81e5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -61,7 +61,6 @@
       "integrity": "sha512-2BCOP7TN8M+gVDj7/ht3hsaO/B/n5oDbiAyyvnRlNOs+u1o+JWNYTQrmpuNp1/Wq2gcFrI01JAW+paEKDMx/CA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.3",
@@ -1611,7 +1610,6 @@
       "integrity": "sha512-hHkbU/eoO3EG5/MZkuFSKmYqPbSVk5byPFa3e7y/8TybHiLMACgI8seVYlicwk7H5K/rI2px9xrQp/C+AUDTiQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "csstype": "^3.0.2"
       }
@@ -1653,7 +1651,6 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -1776,7 +1773,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.8.3",
         "caniuse-lite": "^1.0.30001741",
@@ -2130,7 +2126,6 @@
       "integrity": "sha512-hB4FIzXovouYzwzECDcUkJ4OcfOEkXTv2zRY6B9bkwjx/cprAq0uvm1nl7zvQ0/TsUk0zQiN4uPfJpB9m+rPMQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -3282,7 +3277,6 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -3349,7 +3343,6 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.1.1.tgz",
       "integrity": "sha512-w8nqGImo45dmMIfljjMwOGtbmC/mk4CMYhWIicdSflH91J9TyCyczcPFXJzrZ/ZXcgGRFeP6BU0BEJTw6tZdfQ==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -3359,7 +3352,6 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.1.tgz",
       "integrity": "sha512-Dlq/5LAZgF0Gaz6yiqZCf6VCcZs1ghAJyrsu84Q/GT0gV+mCxbfmKNoGRKBYMJ8IEdGPqu49YWXD02GCknEDkw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "scheduler": "^0.26.0"
       },
@@ -3694,7 +3686,6 @@
       "resolved": "https://registry.npmjs.org/vite/-/vite-7.1.6.tgz",
       "integrity": "sha512-SRYIB8t/isTwNn8vMB3MR6E+EQZM/WG1aKmmIUCfDXfVvKfc20ZpamngWHKzAmmu9ppsgxsg4b2I7c90JZudIQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "^0.25.0",
         "fdir": "^6.5.0",
diff --git a/src/assets/ScrollToTop.png b/src/assets/ScrollToTop.png
new file mode 100644
index 0000000..5bbe6de
Binary files /dev/null and b/src/assets/ScrollToTop.png differ
diff --git a/src/components/ScrollToTop.jsx b/src/components/ScrollToTop.jsx
new file mode 100644
index 0000000..1514c81
--- /dev/null
+++ b/src/components/ScrollToTop.jsx
@@ -0,0 +1,36 @@
+// components/ScrollToTopButton.tsx
+import { useEffect, useState } from "react";
+import image from "../assets/ScrollToTop.png"; 
+
+const ScrollToTopButton = () => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    const toggleVisibility = () => {
+      setIsVisible(window.scrollY > 300);
+    };
+
+    window.addEventListener("scroll", toggleVisibility);
+    return () => window.removeEventListener("scroll", toggleVisibility);
+  }, []);
+
+  const scrollToTop = () => {
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  };
+
+  if (!isVisible) return null;
+
+  return (
+    // Scroll to top button
+    <button
+      onClick={scrollToTop}
+      className="fixed bottom-6 right-6 z-50 p-3 rounded-full bg-[#A0A0FF] text-white shadow-lg hover:bg-violet-700 transition-colors duration-300"
+      aria-label="Scroll to top"
+    >
+      {/* Up arrow image */}
+      <img src={image} alt="" className="h-8 w-8 hover:invert-100" />
+    </button>
+  );
+};
+
+export default ScrollToTopButton;
diff --git a/src/components/ui/Hero.jsx b/src/components/ui/Hero.jsx
index 4e6bb6f..ac0a1b7 100644
--- a/src/components/ui/Hero.jsx
+++ b/src/components/ui/Hero.jsx
@@ -1,6 +1,7 @@
 import { motion } from "framer-motion";
 import { useState } from "react";
 import HeroAnimation from "../animations/HeroAnimation";
+import ScrollToTopButton from "../ScrollToTop";
 import { useNavigate } from "react-router-dom";
 
 function Hero() {
@@ -33,6 +34,9 @@ function Hero() {
 
   return (
     <section className="relative min-h-screen flex items-center justify-center overflow-hidden px-4 sm:px-6 lg:px-8 py-12 sm:py-16">
+      {/* scroll to top button */}
+      <ScrollToTopButton />
+
       {/* top animation */}
       <HeroAnimation className="absolute top-[5%] right-[2%] sm:top-[8%] sm:right-[4%] lg:top-[10%] lg:right-[5%] scale-50 sm:scale-75 lg:scale-100" />
 
diff --git a/src/pages/AboutPage.jsx b/src/pages/AboutPage.jsx
index 53ce5fe..9b37da9 100644
--- a/src/pages/AboutPage.jsx
+++ b/src/pages/AboutPage.jsx
@@ -10,6 +10,7 @@ import {
   FiHeart,
 } from "react-icons/fi";
 import Footer from "../components/Footer";
+import ScrollToTopButton from "../components/ScrollToTop"
 
 //? Scroll to top on mount
 const AboutPage = () => {
@@ -63,6 +64,9 @@ const AboutPage = () => {
 
   return (
     <div className="min-h-screen bg-gradient-to-b from-[rgb(20,20,48)] via-[rgb(28,28,64)] to-[rgb(15,15,35)] text-white">
+      {/* Scroll to Top Button */}
+      <ScrollToTopButton />
+
       {/* Hero Section */}
       <section className="px-4 sm:px-6 lg:px-8 py-24 md:py-15 text-center bg-gradient-to-b from-[rgba(160,160,255,0.1)] to-transparent">
         <motion.div
diff --git a/src/pages/FeaturesPage.jsx b/src/pages/FeaturesPage.jsx
index 2ef4fe9..a3e343a 100644
--- a/src/pages/FeaturesPage.jsx
+++ b/src/pages/FeaturesPage.jsx
@@ -19,6 +19,7 @@ import {
 import Footer from "../components/Footer";
 import { useNavigate } from "react-router-dom";
 import { useEffect } from "react";
+import ScrollToTopButton from "../components/ScrollToTop"
 
 const FeaturesPage = () => {
   useEffect(() => {
@@ -153,6 +154,8 @@ const FeaturesPage = () => {
 
   return (
     <div className="min-h-screen bg-gradient-to-b from-slate-950 via-slate-900 to-slate-950 text-white">
+      {/* Scroll to Top Button */}
+      <ScrollToTopButton />
       {/* Hero Section */}
       <section className="relative px-4 sm:px-6 lg:px-8 py-24 md:py-32 text-center overflow-hidden">
         {/* Background decoration */}