diff --git a/package-lock.json b/package-lock.json
index 6df6d4f..2eac094 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
         "axios": "^1.6.2",
         "bootstrap": "^5.3.2",
         "react": "^18.2.0",
+        "react-animated-cursor": "^2.11.2",
         "react-dom": "^18.2.0",
         "react-scripts": "^5.0.1",
         "react-scroll": "^1.9.0",
@@ -14675,6 +14676,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-app-polyfill": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/react-app-polyfill/-/react-app-polyfill-3.0.0.tgz",
diff --git a/package.json b/package.json
index 4007c99..39543ee 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "axios": "^1.6.2",
     "bootstrap": "^5.3.2",
     "react": "^18.2.0",
+    "react-animated-cursor": "^2.11.2",
     "react-dom": "^18.2.0",
     "react-scripts": "^5.0.1",
     "react-scroll": "^1.9.0",
diff --git a/src/App.css b/src/App.css
index eef39ea..aa95bb5 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,5 +1,6 @@
 .App {
   text-align: center;
+  background-color: black;
 }
 
 .App-logo {
@@ -22,7 +23,7 @@
   align-items: center;
   justify-content: center;
   /* Use a custom font */
-  font-family: 'Roboto', sans-serif;
+  font-family: "Roboto", sans-serif;
   font-size: calc(10px + 2vmin);
   color: white;
 }
diff --git a/src/App.js b/src/App.js
index b828fee..9bd464a 100644
--- a/src/App.js
+++ b/src/App.js
@@ -6,10 +6,27 @@ import Projects from "./components/Projects";
 import Skills from "./components/Skills";
 import Testimonials from "./components/Testimonials";
 import Contact from "./components/Contact";
+import AnimatedCursor from "react-animated-cursor";
 
 export default function App() {
   return (
-    <main style={{backgroundImage: "url(/image.jpg)", backgroundSize: "cover", backgroundPosition: "center", backgroundRepeat: "no-repeat"}}>
+    <main
+      style={{
+        backgroundImage: "url(/image.jpg)",
+        backgroundSize: "cover",
+        backgroundPosition: "center",
+        backgroundRepeat: "no-repeat",
+        backgroundColor: "white",
+      }}
+    >
+      <AnimatedCursor
+        innerSize={8}
+        outerSize={8}
+        color="255, 165, 0"
+        outerAlpha={0.2}
+        innerScale={0.7}
+        outerScale={5}
+      />
       <Navbar />
       <About />
       <Projects />
diff --git a/src/components/About.js b/src/components/About.js
index 22554f7..c159099 100644
--- a/src/components/About.js
+++ b/src/components/About.js
@@ -6,23 +6,35 @@ export default function About() {
     <section id="about" className="container py-5">
       <div className="row">
         <div className="col-lg-6 col-md-12">
-          <img src="/profile.jpg" alt="Profile" className="img-fluid rounded-circle mb-3" />
+          <img
+            src="/profile.jpg"
+            alt="Profile"
+            className="img-fluid rounded-circle mb-3"
+          />
         </div>
         <div className="col-lg-6 col-md-12">
-          <h2 className="text-primary">About Me</h2>
-          <p className="lead">
-            Hi, <b>Vishwanath M,</b>a Product Engineer based in Bengaluru, India. I love creating
-            beautiful and functional websites using modern technologies like React, Node, MongoDB,
-            etc. I have over 2 years of experience in web development and have worked on various
-            projects ranging from e-commerce, social media, infrastructure used websites, and more.
+          <h2 className="text-black">About Me</h2>
+          <p className="lead text-black">
+            Hi, <b>Vishwanath M,</b>a Product Engineer based in Bengaluru,
+            India. I love creating beautiful and functional websites using
+            modern technologies like React, Node, MongoDB, etc. I have over 2
+            years of experience in web development and have worked on various
+            projects ranging from e-commerce, social media, infrastructure used
+            websites, and more.
           </p>
-          <p className="lead">
-            I'm passionate about learning new skills and exploring new challenges. I'm always open
-            to new opportunities and collaborations. If you have a project that you want to get
-            started, or you need some help with your existing project, feel free to contact me. I
-            would love to hear from you and work with you.
+          <p className="lead text-black">
+            I'm passionate about learning new skills and exploring new
+            challenges. I'm always open to new opportunities and collaborations.
+            If you have a project that you want to get started, or you need some
+            help with your existing project, feel free to contact me. I would
+            love to hear from you and work with you.
           </p>
-          <a href="/resume.pdf" className="btn btn-primary mr-3" target="_blank" rel="noreferrer">
+          <a
+            href="/resume.pdf"
+            className="btn btn-primary mr-3"
+            target="_blank"
+            rel="noreferrer"
+          >
             Download Resume
           </a>
           <a href="#contact" className="btn btn-outline-primary">
diff --git a/src/components/Contact.js b/src/components/Contact.js
index 9ab314e..37df6eb 100644
--- a/src/components/Contact.js
+++ b/src/components/Contact.js
@@ -32,13 +32,13 @@ export default function Contact() {
   return (
     <section id="contact" className="container py-5">
       <h2 className="text-primary">Contact</h2>
-      <p className="lead">
-        If you want to get in touch with me, you can fill out the contact form below and I will get
-        back to you as soon as possible. You can also find my email, phone, and social media links
-        at the bottom of this page.
+      <p className="lead text-black">
+        If you want to get in touch with me, you can fill out the contact form
+        below and I will get back to you as soon as possible. You can also find
+        my email, phone, and social media links at the bottom of this page.
       </p>
       <form onSubmit={handleSubmit}>
-        <div className="form-group">
+        <div className="form-group text-black">
           <label htmlFor="name">Name</label>
           <input
             type="text"
@@ -50,7 +50,7 @@ export default function Contact() {
             required
           />
         </div>
-        <div className="form-group">
+        <div className="form-group text-black">
           <label htmlFor="email">Email</label>
           <input
             type="email"
@@ -62,7 +62,7 @@ export default function Contact() {
             required
           />
         </div>
-        <div className="form-group">
+        <div className="form-group text-black">
           <label htmlFor="message">Message</label>
           <textarea
             className="form-control"
diff --git a/src/components/Projects.js b/src/components/Projects.js
index 6dd60d3..8fc428f 100644
--- a/src/components/Projects.js
+++ b/src/components/Projects.js
@@ -6,13 +6,15 @@ export default function Projects() {
   const projects = [
     {
       title: "E-commerce Website",
-      description: "A full-stack e-commerce website built with React, Node, Express, and MongoDB. It features user authentication, product listing, shopping cart, checkout, payment, and order history.",
+      description:
+        "A full-stack e-commerce website built with React, Node, Express, and MongoDB. It features user authentication, product listing, shopping cart, checkout, payment, and order history.",
       image: "/ecommerce.jpg", // You will need to save your project images in the public folder and use the relative path
       link: "https://ecommerce.com", // You can use the link to your live demo or GitHub repository
     },
     {
       title: "Social Media App",
-      description: "A full-stack social media app built with React, Node, Express, and MongoDB. It features user authentication, profile creation, post creation, likes, comments, and followers.",
+      description:
+        "A full-stack social media app built with React, Node, Express, and MongoDB. It features user authentication, profile creation, post creation, likes, comments, and followers.",
       image: "/social.jpg",
       link: "https://social.com",
     },
@@ -27,15 +29,20 @@ export default function Projects() {
   return (
     <section id="projects" className="container py-5">
       <h2 className="text-primary">Projects</h2>
-      <p className="lead">
-        Here are some of the projects I have made using various web technologies. You can click on
-        the project title to view the live demo or the source code.
+      <p className="lead text-black">
+        Here are some of the projects I have made using various web
+        technologies. You can click on the project title to view the live demo
+        or the source code.
       </p>
       <div className="row">
         {projects.map((project, index) => (
           <div className="col-lg-4 col-md-6 mb-4" key={index}>
             <div className="card h-100">
-              <img src={project.image} alt={project.title} className="card-img-top" />
+              <img
+                src={project.image}
+                alt={project.title}
+                className="card-img-top"
+              />
               <div className="card-body">
                 <h5 className="card-title">
                   <a href={project.link} target="_blank" rel="noreferrer">
diff --git a/src/components/Skills.js b/src/components/Skills.js
index d8ac5d6..a85cf03 100644
--- a/src/components/Skills.js
+++ b/src/components/Skills.js
@@ -44,16 +44,19 @@ export default function Skills() {
   return (
     <section id="skills" className="container py-5">
       <h2 className="text-primary">Skills</h2>
-      <p className="lead">
-        Here are some of the skills I have used in making my projects. You can see the icons, names,
-        and levels of my skills below.
+      <p className="lead text-black">
+        Here are some of the skills I have used in making my projects. You can
+        see the icons, names, and levels of my skills below.
       </p>
       <div className="row">
         {skills.map((skill, index) => (
           <div className="col-lg-4 col-md-6 mb-4" key={index}>
             <div className="card h-100">
               <div className="card-body text-center">
-                <i className={skill.icon} style={{ fontSize: "5rem", color: "#007bff" }}></i>
+                <i
+                  className={skill.icon}
+                  style={{ fontSize: "5rem", color: "#007bff" }}
+                ></i>
                 <h5 className="card-title">{skill.name}</h5>
                 <p className="card-text">{skill.level}</p>
               </div>
diff --git a/src/components/Testimonials.js b/src/components/Testimonials.js
index 9ca70f4..e2a71a6 100644
--- a/src/components/Testimonials.js
+++ b/src/components/Testimonials.js
@@ -7,32 +7,39 @@ export default function Testimonials() {
     {
       name: "Alice Smith",
       photo: "/alice.jpg", // You will need to save your client or employer photos in the public folder and use the relative path
-      quote: "John is a talented and reliable web developer. He delivered the project on time and with high quality. He was always responsive and communicative. I highly recommend him for any web development project.",
+      quote:
+        "John is a talented and reliable web developer. He delivered the project on time and with high quality. He was always responsive and communicative. I highly recommend him for any web development project.",
     },
     {
       name: "Bob Jones",
       photo: "/bob.jpg",
-      quote: "John is a great web developer who knows how to create amazing websites using modern technologies. He was very helpful and friendly throughout the project. He exceeded my expectations and I'm very happy with the result.",
+      quote:
+        "John is a great web developer who knows how to create amazing websites using modern technologies. He was very helpful and friendly throughout the project. He exceeded my expectations and I'm very happy with the result.",
     },
     {
       name: "Charlie Lee",
       photo: "/charlie.jpg",
-      quote: "John is a skilled and professional web developer who can handle any challenge. He was very flexible and adaptable to the changing requirements of the project. He delivered a stunning website that met all my needs and goals.",
+      quote:
+        "John is a skilled and professional web developer who can handle any challenge. He was very flexible and adaptable to the changing requirements of the project. He delivered a stunning website that met all my needs and goals.",
     },
   ];
 
   return (
     <section id="testimonials" className="container py-5">
       <h2 className="text-primary">Testimonials</h2>
-      <p className="lead">
-        Here are some of the testimonials from my clients and employers. You can see their photos,
-        names, and quotes below.
+      <p className="lead text-black">
+        Here are some of the testimonials from my clients and employers. You can
+        see their photos, names, and quotes below.
       </p>
       <div className="row">
         {testimonials.map((testimonial, index) => (
           <div className="col-lg-4 col-md-6 mb-4" key={index}>
             <div className="card h-100">
-              <img src={testimonial.photo} alt={testimonial.name} className="card-img-top" />
+              <img
+                src={testimonial.photo}
+                alt={testimonial.name}
+                className="card-img-top"
+              />
               <div className="card-body">
                 <h5 className="card-title">{testimonial.name}</h5>
                 <p className="card-text">{testimonial.quote}</p>
diff --git a/src/index.css b/src/index.css
index ec2585e..4a1df4d 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,13 +1,13 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }