diff --git a/src/App.jsx b/src/App.jsx
index 5fefeea..87b65bc 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,4 +1,5 @@
-
+import { useEffect } from "react";
+import Lenis from "lenis";
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import Navbar from "./components/Navbar";
 import Footer from "./components/Footer";
@@ -9,7 +10,36 @@ import Contributors from "./pages/Contributors";
 import CommunityPage from "./pages/CommunityPage";
 import BackToTop from "./components/shared/BackToTop";
 
+/**
+ * Top-level application component that configures routing, global layout, and smooth scrolling.
+ *
+ * Initializes a Lenis instance on mount to enable smooth scrolling (driven by a requestAnimationFrame loop) and destroys it on unmount.
+ *
+ * @returns {JSX.Element} The root React element containing the Router, layout (Navbar, Routes, Footer), and BackToTop component.
+ */
 export default function App() {
+  useEffect(() => {
+    // Initialize Lenis for smooth scroll
+    const lenis = new Lenis({
+      duration: 0.8, // scroll speed (1.2s for smooth flow)
+      easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), // default easing
+      smooth: true,
+      smoothTouch: false, // disable smooth on mobile for performance
+    });
+
+    // RAF loop
+    const raf = (time) => {
+      lenis.raf(time);
+      requestAnimationFrame(raf);
+    };
+    requestAnimationFrame(raf);
+
+    // Cleanup when component unmounts
+    return () => {
+      lenis.destroy();
+    };
+  }, []);
+  
   return (
     <Router>
       <div className="min-h-screen flex flex-col bg-gradient-to-br from-gray-100 to-indigo-50 dark:from-gray-900 dark:to-gray-800">
@@ -33,4 +63,4 @@ export default function App() {
       </div>
     </Router>
   );
-}
+}
\ No newline at end of file