diff --git a/README.md b/README.md
index 1df8db1e..2c3b1d94 100644
--- a/README.md
+++ b/README.md
@@ -169,6 +169,22 @@ Special thanks to our amazing mentors who are guiding this project! 🙌
                     <sub><b>Tanishi Rai</b></sub>
                 </a>
             </td>
+            <td align="center">
+                <a href="https://github.com/Shiva-Bajpai">
+                    <img src="https://avatars.githubusercontent.com/u/141490705?v=4" width="100;" alt="Shiva-Bajpai"/>
+                    <br />
+                    <sub><b>Shiva Bajpai</b></sub>
+                </a>
+            </td>
+		</tr>
+		<tr>
+            <td align="center">
+                <a href="https://github.com/Sawan-Kushwah">
+                    <img src="https://avatars.githubusercontent.com/u/138680328?v=4" width="100;" alt="Sawan-Kushwah"/>
+                    <br />
+                    <sub><b>Sawan kushwah </b></sub>
+                </a>
+            </td>
             <td align="center">
                 <a href="https://github.com/Ayush215mb">
                     <img src="https://avatars.githubusercontent.com/u/154300084?v=4" width="100;" alt="Ayush215mb"/>
@@ -206,6 +222,8 @@ Special thanks to our amazing mentors who are guiding this project! 🙌
                     <sub><b>Bashua Mutiat</b></sub>
                 </a>
             </td>
+		</tr>
+		<tr>
             <td align="center">
                 <a href="https://github.com/Sapna127">
                     <img src="https://avatars.githubusercontent.com/u/91309280?v=4" width="100;" alt="Sapna127"/>
@@ -213,15 +231,6 @@ Special thanks to our amazing mentors who are guiding this project! 🙌
                     <sub><b>Sapna Kul</b></sub>
                 </a>
             </td>
-            <td align="center">
-                <a href="https://github.com/Shiva-Bajpai">
-                    <img src="https://avatars.githubusercontent.com/u/141490705?v=4" width="100;" alt="Shiva-Bajpai"/>
-                    <br />
-                    <sub><b>Shiva Bajpai</b></sub>
-                </a>
-            </td>
-		</tr>
-		<tr>
             <td align="center">
                 <a href="https://github.com/stutxi">
                     <img src="https://avatars.githubusercontent.com/u/95741837?v=4" width="100;" alt="stutxi"/>
diff --git a/frontend/src/App.css b/frontend/src/App.css
index 70f99181..fe1a1f51 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -14,7 +14,7 @@ body,
     font-family: "DM Sans", sans-serif;
 }
 
-body{
+body {
     background: #F1EADC;
 }
 
@@ -30,4 +30,4 @@ input[type="radio"] {
     cursor: pointer;
     font-size: 2rem;
     margin-bottom: 0;
-}
+}
\ No newline at end of file
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 17de1827..50e46380 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -6,21 +6,23 @@ import Footer from "../src/components/Shared/Footer";
 import { Outlet } from "react-router-dom";
 import { AuthProvider } from './components/Shared/AuthContext';
 import { KindeProvider } from "@kinde-oss/kinde-auth-react";
+import BackToTopButton from "./components/Shared/BackToTopButton";
 
 function App() {
   return (
     <AuthProvider>
-    <KindeProvider
-    clientId={import.meta.env.VITE_KINDE_CLIENT_ID}
-    domain={import.meta.env.VITE_KINDE_DOMAIN}
-    redirectUri={import.meta.env.VITE_KINDE_REDIRECT_URI}
-    logoutUri={import.meta.env.VITE_KINDE_LOGOUT_REDIRECT_URI}
-  >
-    <Navbar />
-    <Outlet />
-    <Footer />
-  </KindeProvider>
-  </AuthProvider>
+      <KindeProvider
+        clientId={import.meta.env.VITE_KINDE_CLIENT_ID}
+        domain={import.meta.env.VITE_KINDE_DOMAIN}
+        redirectUri={import.meta.env.VITE_KINDE_REDIRECT_URI}
+        logoutUri={import.meta.env.VITE_KINDE_LOGOUT_REDIRECT_URI}
+      >
+        <BackToTopButton />
+        <Navbar />
+        <Outlet />
+        <Footer />
+      </KindeProvider>
+    </AuthProvider>
 
   );
 }
diff --git a/frontend/src/components/Shared/BackToTopButton.jsx b/frontend/src/components/Shared/BackToTopButton.jsx
new file mode 100644
index 00000000..100f2328
--- /dev/null
+++ b/frontend/src/components/Shared/BackToTopButton.jsx
@@ -0,0 +1,58 @@
+import { useState, useEffect } from 'react';
+
+const BackToTopButton = () => {
+  const [isVisible, setIsVisible] = useState(false);
+  const [shouldRender, setShouldRender] = useState(false); // To control button rendering
+
+  // Show button when the user scrolls down 300px
+  const toggleVisibility = () => {
+    if (window.scrollY > 300) {
+      setShouldRender(true); // Start rendering the button
+      setIsVisible(true); // Make it visible (for fade-in)
+    } else {
+      setIsVisible(false); // Hide button (fade-out)
+    }
+  };
+
+  // Scroll to the top of the page
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth', // Smooth scroll to the top
+    });
+  };
+
+  useEffect(() => {
+    window.addEventListener('scroll', toggleVisibility);
+
+    // Cleanup event listener on component unmount
+    return () => {
+      window.removeEventListener('scroll', toggleVisibility);
+    };
+  }, []);
+
+  // Remove the button from the DOM after fade-out animation ends
+  useEffect(() => {
+    if (!isVisible) {
+      const timeout = setTimeout(() => setShouldRender(false), 500); // Match the animation duration
+      return () => clearTimeout(timeout); // Clean up the timeout
+    }
+  }, [isVisible]);
+
+  return (
+    <>
+      {shouldRender && (
+        <button
+          onClick={scrollToTop}
+          className={`z-50 fixed bottom-12 right-8 bg-green-700 hover:bg-green-600 text-white font-bold px-5 py-3 rounded-md shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-110 ${isVisible ? 'animate-fadeInBounce' : 'animate-fadeOutBounce'
+            }`}
+          style={{ boxShadow: "0 4px 8px rgba(0, 0, 0, 0.2)" }}
+        >
+          ↑
+        </button>
+      )}
+    </>
+  );
+};
+
+export default BackToTopButton;
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 2e630091..998b4476 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -11,20 +11,20 @@ export default {
         'roboto': ['"Roboto Serif"', 'sans-serif'],
       },
       keyframes: {
-        fadeIn: {
-          '0%': { opacity: 0 },
-          '100%': { opacity: 1 },
+        fadeInBounce: {
+          '0%': { opacity: 0, transform: 'translateY(40px)' },
+          '100%': { opacity: 1, transform: 'translateY(0)' },
         },
-        slideIn: {
-          '0%': { transform: 'translateX(100%)' },
-          '100%': { transform: 'translateX(0)' },
+        fadeOutBounce: {
+          '0%': { opacity: 1, transform: 'translateY(0)' },
+          '100%': { opacity: 0, transform: 'translateY(40px)' },
         },
       },
       animation: {
-        fadeIn: 'fadeIn 2s ease-in-out',
-        slideIn: 'slideIn 1.5s ease-in-out',
+        fadeInBounce: 'fadeInBounce 0.5s ease-out forwards',
+        fadeOutBounce: 'fadeOutBounce 0.5s ease-out forwards',
       },
     },
   },
   plugins: [],
-}
+};