diff --git a/package-lock.json b/package-lock.json
index a81dc92..da5baf5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@vercel/analytics": "^1.3.1",
+        "@vercel/speed-insights": "^1.0.12",
         "framer-motion": "^11.3.24",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
@@ -1280,6 +1281,40 @@
         }
       }
     },
+    "node_modules/@vercel/speed-insights": {
+      "version": "1.0.12",
+      "resolved": "https://registry.npmjs.org/@vercel/speed-insights/-/speed-insights-1.0.12.tgz",
+      "integrity": "sha512-ZGQ+a7bcfWJD2VYEp2R1LHvRAMyyaFBYytZXsfnbOMkeOvzGNVxUL7aVUvisIrTZjXTSsxG45DKX7yiw6nq2Jw==",
+      "hasInstallScript": true,
+      "peerDependencies": {
+        "@sveltejs/kit": "^1 || ^2",
+        "next": ">= 13",
+        "react": "^18 || ^19",
+        "svelte": "^4",
+        "vue": "^3",
+        "vue-router": "^4"
+      },
+      "peerDependenciesMeta": {
+        "@sveltejs/kit": {
+          "optional": true
+        },
+        "next": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "svelte": {
+          "optional": true
+        },
+        "vue": {
+          "optional": true
+        },
+        "vue-router": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@vitejs/plugin-react": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.3.1.tgz",
diff --git a/package.json b/package.json
index f420da0..d489fc1 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@vercel/analytics": "^1.3.1",
+    "@vercel/speed-insights": "^1.0.12",
     "framer-motion": "^11.3.24",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
diff --git a/src/App.jsx b/src/App.jsx
index 2a85c4d..4394116 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,5 +1,7 @@
 import Bio from "./Components/Bio";
+import ContactUs from "./Components/ContactUs";
 import First from "./Components/First";
+import Footer from "./Components/Footer";
 import Navbar from "./Components/Navbar";
 import Projects from "./Components/Projects";
 import Skills from "./Components/Skills";
@@ -18,7 +20,11 @@ function App() {
         <Projects />
         <Bio />
         <Skills />
+        <ContactUs />
       </main>
+      <footer>
+        <Footer />
+      </footer>
       <Analytics />
     </div>
   );
diff --git a/src/Components/Bio.jsx b/src/Components/Bio.jsx
index b16a79d..e14168e 100644
--- a/src/Components/Bio.jsx
+++ b/src/Components/Bio.jsx
@@ -1,29 +1,45 @@
-import React from "react";
+import { motion } from "framer-motion";
+import { fadeIn } from "../Variants";
 
 const Bio = () => {
   return (
-    <div className="flex justify-around md:my-32  ">
+    <div className="flex justify-around md:my-32 my-16 ">
       <div>
         <h2 className="text-3xl md:text-4xl mb-8 font-bold text-center">Bio</h2>
-        <div className="flex flex-col items-center justify-center text-xl md:text-2xl px-5  md:max-w-4xl gap-5 ">
-          <p>
+        <div className="flex flex-col items-center justify-center text-xl md:text-2xl px-5  md:max-w-4xl gap-8 ">
+          <motion.p
+            variants={fadeIn("right", 0.2)}
+            initial="hidden"
+            whileInView={"show"}
+            viewport={{ once: true, amount: 0.7 }}
+          >
             I am a 20-year-old from Kolkata, India currently pursuing a B.Tech
             in Computer Science and Engineering(2023-27).
-          </p>
-          <p>
+          </motion.p>
+          <motion.p
+            variants={fadeIn("right", 0.4)}
+            initial="hidden"
+            whileInView={"show"}
+            viewport={{ once: true, amount: 0.7 }}
+          >
             Other than that, I am also a dedicated freelance front-end web
             developer with experience in creating high-quality websites. Skilled
             in React.js and firebase, I aim to leverage my expertise to build
             innovative digital solutions. Passionate about crafting userfriendly
             interfaces and embracing cutting-edge technologies for efficient
             development.
-          </p>
-          <p>
+          </motion.p>
+          <motion.p
+            variants={fadeIn("right", 0.6)}
+            initial="hidden"
+            whileInView={"show"}
+            viewport={{ once: true, amount: 0.7 }}
+          >
             I actively participate in online hackathons and coding competitions,
             if you want to add me in your team then reach out to me on LinkedIn
             .If you have any other questions, feel free to ask in the contact
             page or directly DM me on any of my social media accounts.
-          </p>
+          </motion.p>
         </div>
       </div>
     </div>
diff --git a/src/Components/ContactUs.jsx b/src/Components/ContactUs.jsx
new file mode 100644
index 0000000..6f3f6d6
--- /dev/null
+++ b/src/Components/ContactUs.jsx
@@ -0,0 +1,106 @@
+import React from "react";
+import { motion } from "framer-motion";
+import { useState } from "react";
+import { fadeIn } from "../Variants";
+
+function ContactUs() {
+  const [selectedOption, setSelectedOption] = useState(null);
+  const [formData, setFormData] = useState({
+    name: "",
+    email: "",
+    option: "",
+    budget: "",
+    message: "",
+  });
+
+  const handleOptionClick = (option, field) => {
+    setFormData({
+      ...formData,
+      [field]: option,
+    });
+    setSelectedOption(option);
+  };
+
+  const handleChange = (e) => {
+    setFormData({
+      ...formData,
+      [e.target.name]: e.target.value,
+    });
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    const { name, option, budget, message } = formData;
+
+    const subject = `Hello there, I am ${name}`;
+    const body = `${message}`;
+    const mailtoLink = `mailto:sidharth197502@gmail.com?subject=${encodeURIComponent(
+      subject
+    )}&body=${encodeURIComponent(body)}&cc=ayush215mb@gmail.com`;
+
+    window.location.href = mailtoLink;
+  };
+
+  return (
+    <motion.div>
+      <div className="md:my-20 my-16">
+        <motion.form
+          variants={fadeIn("down", 0.3)}
+          initial="hidden"
+          whileInView={"show"}
+          viewport={{ once: true, amount: 0.7 }}
+          className="max-w-md md:max-w-xl mx-auto p-5 rounded-3xl border-2 border-gray-500 text-white"
+          onSubmit={handleSubmit}
+        >
+          <div className="mb-5 md:mb-10">
+            <label className="block mb-2 text-lg">Your name </label>
+            <input
+              type="text"
+              name="name"
+              value={formData.name}
+              onChange={handleChange}
+              className="w-full py-2 px-4  bg-transparent border-b "
+              placeholder="Enter your name"
+              required
+            />
+          </div>
+          <div className="mb-5 md:mb-10">
+            <label className="block mb-2 text-lg">Your email </label>
+            <input
+              type="email"
+              name="email"
+              value={formData.email}
+              onChange={handleChange}
+              className="w-full py-2 px-4 border-b bg-transparent "
+              placeholder="Enter your email"
+              required
+            />
+          </div>
+
+          <div className="mb-5 md:mb-10">
+            <label htmlFor="message" className="block mb-2 text-lg">
+              Your message:
+            </label>
+            <textarea
+              id="message"
+              name="message"
+              value={formData.brief}
+              onChange={handleChange}
+              className="w-full py-2 px-4 min-h-20   bg-transparent  border rounded-b-lg border-t-0  "
+              placeholder="write your messaage..."
+            ></textarea>
+          </div>
+
+          <button
+            type="submit"
+            className="w-full py-2 px-4 bg-transparent rounded-md hover:bg-cyan-600"
+          >
+            <span className="text-xl font-bold">Submit</span>
+          </button>
+        </motion.form>
+      </div>
+    </motion.div>
+  );
+}
+
+export default ContactUs;
diff --git a/src/Components/First.jsx b/src/Components/First.jsx
index f6cab51..5e97adb 100644
--- a/src/Components/First.jsx
+++ b/src/Components/First.jsx
@@ -1,21 +1,46 @@
 import React from "react";
 import { motion } from "framer-motion";
 import ayush215mb from "../assets/Images/Ayush215mb.jpg";
+import { fadeIn } from "../Variants";
 const First = () => {
   return (
-    <div className=" mx-10 mb-10 ">
+    <div className=" mx-10 mb-16 ">
       <div className="items-center md:flex-row-reverse  flex-col justify-center py-7 flex gap-10 lg:justify-around ">
-        <img
+        <motion.img
+          variants={fadeIn("up", 1.0)}
+          initial="hidden"
+          whileInView={"show"}
+          viewport={{ once: true, amount: 0.7 }}
           src={ayush215mb}
           className="lg:max-w-md rounded-3xl sm:max-w-sm max-w-xs  "
           alt="logo"
         />
         <div className="flex flex-col gap-5">
-          <h1 className="md:text-7xl text-2xl text-center md:text-start">
+          <motion.h1
+            variants={fadeIn("down", 1.0)}
+            initial="hidden"
+            whileInView={"show"}
+            viewport={{ once: true, amount: 0.7 }}
+            className="md:text-7xl text-2xl text-center md:text-start"
+          >
             AYUSH YADAV
-          </h1>
-          <p className="md:text-3xl text-xl">Hello there! 🤙</p>
-          <motion.p className="md:text-2xl text-lg md:max-w-xl">
+          </motion.h1>
+          <motion.p
+            variants={fadeIn("down", 1.0)}
+            initial="hidden"
+            whileInView={"show"}
+            viewport={{ once: true, amount: 0.7 }}
+            className="md:text-3xl text-xl"
+          >
+            Hello there! 🤙
+          </motion.p>
+          <motion.p
+            variants={fadeIn("down", 1.0)}
+            initial="hidden"
+            whileInView={"show"}
+            viewport={{ once: true, amount: 0.7 }}
+            className="md:text-2xl text-lg md:max-w-xl"
+          >
             I am a passionate Web Developer with a knack of creating beautiful
             and functional websites.
             <br /> I like transforming ideas into enaging and user-friendly web
diff --git a/src/Components/Footer.jsx b/src/Components/Footer.jsx
new file mode 100644
index 0000000..c3a14bc
--- /dev/null
+++ b/src/Components/Footer.jsx
@@ -0,0 +1,71 @@
+import { motion } from "framer-motion";
+import { fadeIn } from "../Variants";
+const Footer = () => {
+  return (
+    <div className="flex my-10  md:mx-40 items-center justify-center  ">
+      <div className="flex items-center justify-around gap-7">
+        <a href="https://www.linkedin.com/in/ayush215mb/" target="_blank">
+          <motion.img
+            variants={fadeIn("up", 0.2)}
+            initial="hidden"
+            whileInView={"show"}
+            viewport={{ once: true, amount: 0.7 }}
+            src="https://cdn2.iconfinder.com/data/icons/social-media-2285/512/1_Linkedin_unofficial_colored_svg-512.png"
+            alt="Linkedin_logo"
+            className="max-w-12"
+          />
+        </a>
+        <a
+          href="https://www.instagram.com/ayush215mb?igsh=MWk4OGRtMW11Mzl0aA=="
+          target="_blank"
+        >
+          <motion.img
+            variants={fadeIn("up", 0.3)}
+            initial="hidden"
+            whileInView={"show"}
+            viewport={{ once: true, amount: 0.7 }}
+            src=" https://cdn2.iconfinder.com/data/icons/social-media-2285/512/1_Instagram_colored_svg_1-512.png"
+            alt="Insta_logo"
+            className="max-w-12"
+          />
+        </a>
+        <a href="https://github.com/Ayush215mb" target="_blank">
+          <motion.img
+            variants={fadeIn("up", 0.4)}
+            initial="hidden"
+            whileInView={"show"}
+            viewport={{ once: true, amount: 0.7 }}
+            src="  https://cdn1.iconfinder.com/data/icons/logotypes/32/github-256.png"
+            alt="Github_logo"
+            className="max-w-12 bg-slate-200"
+          />
+        </a>
+
+        <a href="mailto: sidharth197502@gmail.com" target="_blank">
+          <motion.img
+            variants={fadeIn("up", 0.5)}
+            initial="hidden"
+            whileInView={"show"}
+            viewport={{ once: true, amount: 0.7 }}
+            src="https://cdn1.iconfinder.com/data/icons/google-s-logo/150/Google_Icons-02-512.png"
+            alt="gmail_logo"
+            className="max-w-12 "
+          />
+        </a>
+        <a href="https://discord.com/users/903294131768545291" target="_blank">
+          <motion.img
+            variants={fadeIn("up", 0.6)}
+            initial="hidden"
+            whileInView={"show"}
+            viewport={{ once: true, amount: 0.7 }}
+            src=" https://cdn0.iconfinder.com/data/icons/free-social-media-set/24/discord-64.png"
+            alt="discord_logo"
+            className="max-w-12 "
+          />
+        </a>
+      </div>
+    </div>
+  );
+};
+
+export default Footer;
diff --git a/src/Components/Navbar.jsx b/src/Components/Navbar.jsx
index 78072d9..7147be8 100644
--- a/src/Components/Navbar.jsx
+++ b/src/Components/Navbar.jsx
@@ -21,38 +21,49 @@ const Navbar = () => {
 
         <div>
           <ul className=" hidden md:flex gap-20 text-2xl font-bold">
-            <motion.li
-              variants={fadeIn("down", 0.3)}
-              initial="hidden"
-              whileInView={"show"}
-              viewport={{ once: true, amount: 0.7 }}
-            >
-              Projects
-            </motion.li>
-            <motion.li
-              variants={fadeIn("down", 0.4)}
-              initial="hidden"
-              whileInView={"show"}
-              viewport={{ once: true, amount: 0.7 }}
-            >
-              Bio
-            </motion.li>
-            <motion.li
-              variants={fadeIn("down", 0.5)}
-              initial="hidden"
-              whileInView={"show"}
-              viewport={{ once: true, amount: 0.7 }}
-            >
-              Skills
-            </motion.li>
-            <motion.li
-              variants={fadeIn("down", 0.6)}
-              initial="hidden"
-              whileInView={"show"}
-              viewport={{ once: true, amount: 0.7 }}
-            >
-              Contact
-            </motion.li>
+            <a href="#">
+              <motion.li
+                variants={fadeIn("down", 0.3)}
+                initial="hidden"
+                whileInView={"show"}
+                viewport={{ once: true, amount: 0.7 }}
+              >
+                Projects
+              </motion.li>
+            </a>
+
+            <a href="#">
+              <motion.li
+                variants={fadeIn("down", 0.4)}
+                initial="hidden"
+                whileInView={"show"}
+                viewport={{ once: true, amount: 0.7 }}
+              >
+                Bio
+              </motion.li>
+            </a>
+
+            <a href="#">
+              <motion.li
+                variants={fadeIn("down", 0.5)}
+                initial="hidden"
+                whileInView={"show"}
+                viewport={{ once: true, amount: 0.7 }}
+              >
+                Skills
+              </motion.li>
+            </a>
+
+            <a href="#">
+              <motion.li
+                variants={fadeIn("down", 0.6)}
+                initial="hidden"
+                whileInView={"show"}
+                viewport={{ once: true, amount: 0.7 }}
+              >
+                Contact
+              </motion.li>
+            </a>
           </ul>
         </div>
       </div>
diff --git a/src/Components/Skills.jsx b/src/Components/Skills.jsx
index 2cb8729..2c2b298 100644
--- a/src/Components/Skills.jsx
+++ b/src/Components/Skills.jsx
@@ -1,49 +1,101 @@
 import React from "react";
 import html from "../assets/Images/html-1.svg";
 import SkillsTemp from "./SkillsTemp";
+import { motion } from "framer-motion";
+import { fadeIn } from "../Variants";
 const Skills = () => {
   return (
-    <div className="my-10  md:px-52 ">
+    <div className="my-16  md:px-52 ">
       <h2 className="text-3xl  md:text-4xl mb-8 font-bold text-center">
         Skills
       </h2>
       <div className="border-2 rounded-3xl border-gray-700 md:px-10 overflow-hidden w-full ">
-        <SkillsTemp name="HTML" image={html} year="2 years" />
-        <SkillsTemp
-          name="CSS"
-          image="https://upload.wikimedia.org/wikipedia/commons/6/62/CSS3_logo.svg"
-          year="2 years"
-        />
-
-        <SkillsTemp
-          name="Java Script"
-          image="https://upload.wikimedia.org/wikipedia/commons/9/99/Unofficial_JavaScript_logo_2.svg"
-          year="2 years"
-        />
-
-        <SkillsTemp
-          name="React.js"
-          image="https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg"
-          year="1.5 years"
-        />
-
-        <SkillsTemp
-          name="Firebase"
-          image="https://upload.wikimedia.org/wikipedia/commons/8/85/Firebase.svg"
-          year="1.5 year"
-        />
-
-        <SkillsTemp
-          name="React Native"
-          image="https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg"
-          year="learning"
-        />
-
-        <SkillsTemp
-          name="C++"
-          image="https://upload.wikimedia.org/wikipedia/commons/1/18/ISO_C%2B%2B_Logo.svg"
-          year="learning"
-        />
+        <motion.div
+          variants={fadeIn("right", 0.2)}
+          initial="hidden"
+          whileInView={"show"}
+          viewport={{ once: true, amount: 0.7 }}
+        >
+          <SkillsTemp name="HTML" image={html} year="2 years" />
+        </motion.div>
+
+        <motion.div
+          variants={fadeIn("left", 0.3)}
+          initial="hidden"
+          whileInView={"show"}
+          viewport={{ once: true, amount: 0.7 }}
+        >
+          <SkillsTemp
+            name="CSS"
+            image="https://upload.wikimedia.org/wikipedia/commons/6/62/CSS3_logo.svg"
+            year="2 years"
+          />
+        </motion.div>
+
+        <motion.div
+          variants={fadeIn("right", 0.4)}
+          initial="hidden"
+          whileInView={"show"}
+          viewport={{ once: true, amount: 0.7 }}
+        >
+          <SkillsTemp
+            name="Java Script"
+            image="https://upload.wikimedia.org/wikipedia/commons/9/99/Unofficial_JavaScript_logo_2.svg"
+            year="2 years"
+          />
+        </motion.div>
+
+        <motion.div
+          variants={fadeIn("left", 0.5)}
+          initial="hidden"
+          whileInView={"show"}
+          viewport={{ once: true, amount: 0.7 }}
+        >
+          <SkillsTemp
+            name="React.js"
+            image="https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg"
+            year="1 year"
+          />
+        </motion.div>
+
+        <motion.div
+          variants={fadeIn("right", 0.6)}
+          initial="hidden"
+          whileInView={"show"}
+          viewport={{ once: true, amount: 0.7 }}
+        >
+          <SkillsTemp
+            name="Firebase"
+            image="https://upload.wikimedia.org/wikipedia/commons/8/85/Firebase.svg"
+            year="1 year"
+          />
+        </motion.div>
+
+        <motion.div
+          variants={fadeIn("left", 0.7)}
+          initial="hidden"
+          whileInView={"show"}
+          viewport={{ once: true, amount: 0.7 }}
+        >
+          <SkillsTemp
+            name="React Native"
+            image="https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg"
+            year="learning"
+          />
+        </motion.div>
+
+        <motion.div
+          variants={fadeIn("right", 0.8)}
+          initial="hidden"
+          whileInView={"show"}
+          viewport={{ once: true, amount: 0.7 }}
+        >
+          <SkillsTemp
+            name="C++"
+            image="https://upload.wikimedia.org/wikipedia/commons/1/18/ISO_C%2B%2B_Logo.svg"
+            year="learning"
+          />
+        </motion.div>
       </div>
     </div>
   );