diff --git a/client/package-lock.json b/client/package-lock.json
index b9d9209..9f66c5d 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -36,6 +36,7 @@
         "otp-input-react": "^0.3.0",
         "prop-types": "^15.8.1",
         "react": "^18.2.0",
+        "react-animated-cursor": "^2.11.2",
         "react-bootstrap": "^2.10.2",
         "react-dom": "^18.2.0",
         "react-google-recaptcha": "^3.1.0",
@@ -7591,6 +7592,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-animated-cursor": {
+      "version": "2.11.2",
+      "resolved": "https://registry.npmjs.org/react-animated-cursor/-/react-animated-cursor-2.11.2.tgz",
+      "integrity": "sha512-LV0PtST61tdeW/chCqFt1JLp6i0d5fD9v2uradBcPAkKKCi2Iw7sAcD11ADS1TjXPPj9MOoD9YubEt++/IbZ+g==",
+      "peerDependencies": {
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0"
+      }
+    },
     "node_modules/react-async-script": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/react-async-script/-/react-async-script-1.2.0.tgz",
diff --git a/client/package.json b/client/package.json
index 336849e..f0c76dd 100644
--- a/client/package.json
+++ b/client/package.json
@@ -38,6 +38,7 @@
     "otp-input-react": "^0.3.0",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
+    "react-animated-cursor": "^2.11.2",
     "react-bootstrap": "^2.10.2",
     "react-dom": "^18.2.0",
     "react-google-recaptcha": "^3.1.0",
diff --git a/client/src/App.jsx b/client/src/App.jsx
index 1b93f97..d99a553 100644
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -1,66 +1,66 @@
-import { useEffect, useState } from 'react';
-import { BrowserRouter as Router, Routes, Route, useLocation } from 'react-router-dom';
-import './App.css';
-import './index.css';
-import LoadingBar from 'react-top-loading-bar';
-import About from './component/About';
-import Alert from './component/Alert';
-import Footer from './component/Footer';
-import Home from './component/Home';
-import Login from './component/Login';
-import Navbar from './component/Navbar';
-import Signup from './component/Signup';
-import ProjectState from './context/ProjectState';
-import ProfileState from './context/ProfileState';
-import CodeOfConduct from './component/Footers/Codeofconduct';
-import Feedback from './component/Footers/Feedback';
-import ContactUs from './component/Footers/Contactus';
-import PrivacyPolicy from './component/Footers/Privacypolicy';
-import TermOfUse from './component/Footers/TermOfUse';
-import Community from './component/Community';
-import MyProfile from './component/MyProfile';
-import ScrollTop from './component/ScrollTop';
-import EditProfile from './component/EditProfile';
-import Contributers from './component/Contributers';
-import Discussion from './component/Discussion';
-import { useAtom } from 'jotai';
-import { modeAtom } from './atom/Atom';
-import ForgotPassword from './component/forgotpass';
-import VerifyEmail from './component/Verify';
-import NotFound from './component/NotFound';
+import { useEffect, useState } from "react";
+import {
+  BrowserRouter as Router,
+  Routes,
+  Route,
+  useLocation,
+} from "react-router-dom";
+import "./App.css";
+import "./index.css";
+import LoadingBar from "react-top-loading-bar";
+import About from "./component/About";
+import Alert from "./component/Alert";
+import Footer from "./component/Footer";
+import Home from "./component/Home";
+import Login from "./component/Login";
+import Navbar from "./component/Navbar";
+import Signup from "./component/Signup";
+import ProjectState from "./context/ProjectState";
+import ProfileState from "./context/ProfileState";
+import CodeOfConduct from "./component/Footers/Codeofconduct";
+import Feedback from "./component/Footers/Feedback";
+import ContactUs from "./component/Footers/Contactus";
+import PrivacyPolicy from "./component/Footers/Privacypolicy";
+import TermOfUse from "./component/Footers/TermOfUse";
+import Community from "./component/Community";
+import MyProfile from "./component/MyProfile";
+import ScrollTop from "./component/ScrollTop";
+import EditProfile from "./component/EditProfile";
+import Contributers from "./component/Contributers";
+import Discussion from "./component/Discussion";
+import { useAtom } from "jotai";
+import { modeAtom } from "./atom/Atom";
+import ForgotPassword from "./component/forgotpass";
+import VerifyEmail from "./component/Verify";
+import NotFound from "./component/NotFound";
+import AnimatedCursor from "react-animated-cursor";
+
 // Main Layout Component
 const Layout = ({ children, mode, setProgress, toggleMode, showAlert }) => {
   const location = useLocation(); // Use location inside Router
-  
+
   // Define routes where the footer or navbar should not be shown
-  const hideNavbarRoutes = ['/login', '/signup'];
-  const hideFooterRoutes = ['/login', '/signup'];
+  const hideNavbarRoutes = ["/login", "/signup"];
+  const hideFooterRoutes = ["/login", "/signup"];
 
   return (
     <>
       {/* Conditionally render the Navbar */}
-      {!hideNavbarRoutes.includes(location.pathname) && (
-        <Navbar 
-        />
-      )}
+      {!hideNavbarRoutes.includes(location.pathname) && <Navbar />}
 
       {/* Main content */}
       {children}
 
       {/* Conditionally render the Footer */}
       {!hideFooterRoutes.includes(location.pathname) && (
-        <Footer 
-          mode={mode} 
-          setProgress={setProgress} 
-          setAlert={showAlert} 
-        />
+        <Footer mode={mode} setProgress={setProgress} setAlert={showAlert} />
       )}
     </>
   );
 };
 
 function App() {
-  const [mode]= useAtom(modeAtom)
+  const [mode] = useAtom(modeAtom);
   const [alert, setAlert] = useState(null);
   const showAlert = (message, type) => {
     setAlert({ msg: message, type: type });
@@ -69,34 +69,51 @@ function App() {
     }, 1500);
   };
 
-  
   const [progress, setProgress] = useState(0);
 
   useEffect(() => {
-    localStorage.setItem('mode', mode);
+    localStorage.setItem("mode", mode);
   }, [mode]);
 
   const toggleMode = () => {
-    if (mode === 'light') {
-      setMode('dark');
-      document.body.style.backgroundColor = 'black';
-      document.querySelectorAll('*').forEach(element => element.style.color = 'white');
+    if (mode === "light") {
+      setMode("dark");
+      document.body.style.backgroundColor = "black";
+      document
+        .querySelectorAll("*")
+        .forEach((element) => (element.style.color = "white"));
       showAlert("Dark Mode Enabled", "success");
     } else {
-      setMode('light');
-      document.body.style.backgroundColor = 'white';
-      document.querySelectorAll('*').forEach(element => element.style.color = '');
+      setMode("light");
+      document.body.style.backgroundColor = "white";
+      document
+        .querySelectorAll("*")
+        .forEach((element) => (element.style.color = ""));
       showAlert("Light Mode Enabled", "success");
     }
   };
 
   return (
     <div>
+      <AnimatedCursor
+        innerSize={8}
+        outerSize={35}
+        innerScale={1}
+        outerScale={2}
+        outerAlpha={0}
+        hasBlendMode={true}
+        innerStyle={{
+          backgroundColor: "var(--cursor-color)",
+        }}
+        outerStyle={{
+          border: "3px solid var(--cursor-color)",
+        }}
+      />
       <ProjectState>
         <ProfileState>
           <Router>
             <LoadingBar
-              color='blue'
+              color="blue"
               progress={progress}
               onLoaderFinished={() => setProgress(0)}
             />
@@ -106,28 +123,182 @@ function App() {
             <ScrollTop />
 
             {/* Wrap everything inside the Layout component */}
-            <Layout mode={mode} setProgress={setProgress} toggleMode={toggleMode} showAlert={showAlert}>
+            <Layout
+              mode={mode}
+              setProgress={setProgress}
+              toggleMode={toggleMode}
+              showAlert={showAlert}
+            >
               <Routes>
-                <Route exact path="/" element={<Home mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
-                <Route exact path="/discussion" element={<Discussion mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
-                <Route exact path="/community" element={<Community mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
-                <Route exact path="/about" element={<About mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
-                <Route exact path="/myprofile" element={<MyProfile mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
-                <Route exact path="/editprofile" element={<EditProfile mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
-                <Route exact path="/contributers" element={<Contributers mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
-                <Route exact path="/login" element={<Login mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
-                <Route exact path="/signup" element={<Signup mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
-                <Route exact path="/ForgotPassword" element={<ForgotPassword mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
-                <Route exact path="/codeofconduct" element={<CodeOfConduct mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
-                <Route exact path="/feedback" element={<Feedback mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
-                <Route exact path="/contactus" element={<ContactUs mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
-                <Route exact path="/privacypolicy" element={<PrivacyPolicy mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
-                <Route exact path="/termofuse" element={<TermOfUse mode={mode} setProgress={setProgress} showAlert={showAlert} />} />
-                <Route exact path="/verify/:token" element={<VerifyEmail/>} />
+                <Route
+                  exact
+                  path="/"
+                  element={
+                    <Home
+                      mode={mode}
+                      setProgress={setProgress}
+                      showAlert={showAlert}
+                    />
+                  }
+                />
+                <Route
+                  exact
+                  path="/discussion"
+                  element={
+                    <Discussion
+                      mode={mode}
+                      setProgress={setProgress}
+                      showAlert={showAlert}
+                    />
+                  }
+                />
+                <Route
+                  exact
+                  path="/community"
+                  element={
+                    <Community
+                      mode={mode}
+                      setProgress={setProgress}
+                      showAlert={showAlert}
+                    />
+                  }
+                />
+                <Route
+                  exact
+                  path="/about"
+                  element={
+                    <About
+                      mode={mode}
+                      setProgress={setProgress}
+                      showAlert={showAlert}
+                    />
+                  }
+                />
+                <Route
+                  exact
+                  path="/myprofile"
+                  element={
+                    <MyProfile
+                      mode={mode}
+                      setProgress={setProgress}
+                      showAlert={showAlert}
+                    />
+                  }
+                />
+                <Route
+                  exact
+                  path="/editprofile"
+                  element={
+                    <EditProfile
+                      mode={mode}
+                      setProgress={setProgress}
+                      showAlert={showAlert}
+                    />
+                  }
+                />
+                <Route
+                  exact
+                  path="/contributers"
+                  element={
+                    <Contributers
+                      mode={mode}
+                      setProgress={setProgress}
+                      showAlert={showAlert}
+                    />
+                  }
+                />
+                <Route
+                  exact
+                  path="/login"
+                  element={
+                    <Login
+                      mode={mode}
+                      setProgress={setProgress}
+                      showAlert={showAlert}
+                    />
+                  }
+                />
+                <Route
+                  exact
+                  path="/signup"
+                  element={
+                    <Signup
+                      mode={mode}
+                      setProgress={setProgress}
+                      showAlert={showAlert}
+                    />
+                  }
+                />
+                <Route
+                  exact
+                  path="/ForgotPassword"
+                  element={
+                    <ForgotPassword
+                      mode={mode}
+                      setProgress={setProgress}
+                      showAlert={showAlert}
+                    />
+                  }
+                />
+                <Route
+                  exact
+                  path="/codeofconduct"
+                  element={
+                    <CodeOfConduct
+                      mode={mode}
+                      setProgress={setProgress}
+                      showAlert={showAlert}
+                    />
+                  }
+                />
+                <Route
+                  exact
+                  path="/feedback"
+                  element={
+                    <Feedback
+                      mode={mode}
+                      setProgress={setProgress}
+                      showAlert={showAlert}
+                    />
+                  }
+                />
+                <Route
+                  exact
+                  path="/contactus"
+                  element={
+                    <ContactUs
+                      mode={mode}
+                      setProgress={setProgress}
+                      showAlert={showAlert}
+                    />
+                  }
+                />
+                <Route
+                  exact
+                  path="/privacypolicy"
+                  element={
+                    <PrivacyPolicy
+                      mode={mode}
+                      setProgress={setProgress}
+                      showAlert={showAlert}
+                    />
+                  }
+                />
+                <Route
+                  exact
+                  path="/termofuse"
+                  element={
+                    <TermOfUse
+                      mode={mode}
+                      setProgress={setProgress}
+                      showAlert={showAlert}
+                    />
+                  }
+                />
+                <Route exact path="/verify/:token" element={<VerifyEmail />} />
                 {/* 404 Route */}
-                <Route exact path="*" element={<NotFound/>} /> 
+                <Route exact path="*" element={<NotFound />} />
               </Routes>
-                
             </Layout>
           </Router>
         </ProfileState>
diff --git a/client/src/index.css b/client/src/index.css
index 6df5df8..dae3ff7 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -2,43 +2,50 @@
 @tailwind components;
 @tailwind utilities;
 
+html {
+  --cursor-color: #333
+}
+
+html.dark-mode {
+  --cursor-color: #fff
+}
 
 .modal-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: 1000;
-  }
-  
-  .modal-content {
-    width: 400px;
-    background-color: white;
-    padding: 40px;
-    border-radius: 10px;
-    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
-    text-align: center;
-  }
-  
-  .modal-content h3 {
-    margin-bottom: 15px;
-  }
-  
-  .modal-content button {
-    background-color: #007bff;
-    color: white;
-    padding: 10px 20px;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-  }
-  
-  .modal-content button:hover {
-    background-color: #0056b3;
-  }
-  
\ No newline at end of file
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  /* Semi-transparent background */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.modal-content {
+  width: 400px;
+  background-color: white;
+  padding: 40px;
+  border-radius: 10px;
+  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
+  text-align: center;
+}
+
+.modal-content h3 {
+  margin-bottom: 15px;
+}
+
+.modal-content button {
+  background-color: #007bff;
+  color: white;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.modal-content button:hover {
+  background-color: #0056b3;
+}
\ No newline at end of file
diff --git a/client/src/main.jsx b/client/src/main.jsx
index bf98035..5977e23 100644
--- a/client/src/main.jsx
+++ b/client/src/main.jsx
@@ -1,9 +1,9 @@
-import ReactDOM from 'react-dom/client'
-import App from './App.jsx'
-import './index.css'
+import ReactDOM from "react-dom/client";
+import App from "./App.jsx";
+import "./index.css";
 
-ReactDOM.createRoot(document.getElementById('root')).render(
+ReactDOM.createRoot(document.getElementById("root")).render(
   <>
     <App />
-  </>,
-)
+  </>
+);