diff --git a/public/woodybackground.jpg b/public/woodybackground.jpg
deleted file mode 100644
index f014b28..0000000
Binary files a/public/woodybackground.jpg and /dev/null differ
diff --git a/src/App.css b/src/App.css
index 6a36e5d..30fe038 100644
--- a/src/App.css
+++ b/src/App.css
@@ -25,7 +25,7 @@ body {
 
 body {
   background-color: #FFFFFF;
-  background-image: url("./Assets/backgroundImage.webp");
+  
 }
 
 nav {
@@ -115,14 +115,14 @@ nav {
 
 .secondary-button {
   padding: 1rem 2.5rem;
-  background-color: #fe9e0d;
+  background-color: #23f2dd85;
   outline: none;
   border: none;
   border-radius: 5rem;
   font-size: 1.1rem;
   cursor: pointer;
   font-weight: 600;
-  color: white;
+  color: black;
   transition: 0.2s;
   display: flex;
   align-items: center;
@@ -135,7 +135,7 @@ nav {
 }
 
 .secondary-button:hover {
-  background-color: #e48f0f;
+  background-color: #05d2be85;
 }
 
 .about-section-container {
diff --git a/src/Assets/TeamMemberPhotos/priyansu.jpg b/src/Assets/TeamMemberPhotos/priyansu.jpg
new file mode 100644
index 0000000..72c335d
Binary files /dev/null and b/src/Assets/TeamMemberPhotos/priyansu.jpg differ
diff --git a/src/Assets/TeamMemberPhotos/priyansu.png b/src/Assets/TeamMemberPhotos/priyansu.png
deleted file mode 100644
index cb41b4a..0000000
Binary files a/src/Assets/TeamMemberPhotos/priyansu.png and /dev/null differ
diff --git a/src/Assets/aboutvid.mp4 b/src/Assets/aboutvid.mp4
index e3c7f02..89dc176 100644
Binary files a/src/Assets/aboutvid.mp4 and b/src/Assets/aboutvid.mp4 differ
diff --git a/src/Components/About.js b/src/Components/About.js
index 664cc3f..7952797 100644
--- a/src/Components/About.js
+++ b/src/Components/About.js
@@ -16,8 +16,8 @@ const About = () => {
         />
       </div>
       <div className="about-section-text-container">
-        <p className="primary-subheading">About</p>
-        <h1 className="primary-heading">EventPlanner</h1>
+        <p className="primary-heading">About</p>
+        <h1 className="primary-heading text-2xl">EventEZ</h1>
         <p className="primary-text">
           To enhance the Tri-Valley's official website and boost local business
           tourism, our mission is to address existing technology limitations by
diff --git a/src/Components/Corousel.js b/src/Components/Corousel.js
index c758396..6854ff7 100644
--- a/src/Components/Corousel.js
+++ b/src/Components/Corousel.js
@@ -1,45 +1,79 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect } from "react";
 import { ChevronLeft, ChevronRight } from "react-feather";
 
-const Carousel = ({ children: slides, autoSlide = false, autoSlideInterval = 3000 }) => {
-    const [curr, setCurr] = useState(0);
+const Carousel = ({
+  children: slides,
+  autoSlide = false,
+  autoSlideInterval = 3000,
+}) => {
+  const [curr, setCurr] = useState(0);
 
-    const prev = () => setCurr((curr) => (curr === 0 ? slides.length - 1 : curr - 1));
+  const prev = () =>
+    setCurr((curr) => (curr === 0 ? slides.length - 1 : curr - 1));
 
-    const next = () => setCurr((curr) => (curr === slides.length - 1 ? 0 : curr + 1));
+  const next = () =>
+    setCurr((curr) => (curr === slides.length - 1 ? 0 : curr + 1));
 
-    useEffect(() => {
-        if (!autoSlide) return;
-        const slideInterval = setInterval(next, autoSlideInterval);
-        return () => clearInterval(slideInterval);
-    }, []);
+  useEffect(() => {
+    if (!autoSlide) return;
+    const slideInterval = setInterval(next, autoSlideInterval);
+    return () => clearInterval(slideInterval);
+  }, []);
 
-    return (
-        <div className='overflow-hidden relative h-screen w-full'>
-            <div className='flex transition-transform ease-out duration-500' style={{ transform: `translateX(-${curr * 100}%)`, width: `${slides.length * 100}%` }}>
-                {slides.map((slide, index) => (
-                    <div key={index} className="w-full flex-shrink-0">
-                        {slide}
-                    </div>
-                ))}
-            </div>
-            <div className="absolute inset-0 flex items-center justify-between p-4 sm:p-6 md:p-8 lg:p-10 xl:p-12">
-                <button onClick={prev} className='p-1 rounded-full shadow bg-white/80 text-gray-800 hover:bg-white'>
-                    <ChevronLeft />
-                </button>
-                <button onClick={next} className='p-1 rounded-full shadow bg-white/80 text-gray-800 hover:bg-white'>
-                    <ChevronRight />
-                </button>
-            </div>
-            <div className='absolute bottom-4 right-0 left-0'>
-                <div className='flex items-center justify-center gap-2'>
-                    {slides.map((_, i) => (
-                        <div key={i} className={`transition-all w-1.5 h-1.5 bg-white rounded-full ${curr === i ? "p-0.5" : "bg-opacity-50"}`} />
-                    ))}
-                </div>
+  return (
+    <div>
+      <div>
+        <div className="overflow-hidden relative h-screen w-full">
+          <div
+            className="flex transition-transform ease-out duration-500"
+            style={{
+              transform: `translateX(-${curr * 100}%)`,
+              width: `${slides.length * 100}%`,
+            }}
+          >
+            {slides.map((slide, index) => (
+              <div key={index} className="w-full flex-shrink-0">
+                {slide}
+              </div>
+            ))}
+          </div>
+          <div className="absolute inset-0 flex items-center justify-between p-4 sm:p-6 md:p-8 lg:p-10 xl:p-12">
+            <button
+              onClick={prev}
+              className="p-1 rounded-full shadow bg-white/80 text-gray-800 hover:bg-white"
+            >
+              <ChevronLeft />
+            </button>
+            <button
+              onClick={next}
+              className="p-1 rounded-full shadow bg-white/80 text-gray-800 hover:bg-white"
+            >
+              <ChevronRight />
+            </button>
+          </div>
+          <div className="absolute bottom-4 right-0 left-0">
+            <div className="flex items-center justify-center gap-2">
+              {slides.map((_, i) => (
+                <div
+                  key={i}
+                  className={`transition-all w-1.5 h-1.5 bg-white rounded-full ${
+                    curr === i ? "p-0.5" : "bg-opacity-50"
+                  }`}
+                />
+              ))}
             </div>
+          </div>
+        </div>
+      </div>
+      <div className="w-full  border border-gray-200  py-8 z-50">
+        <div className="flex justify-center gap-8">
+          <h1 className="text-2xl">Planning an event?</h1>
+         <h3 className="text-2xl">Get it with EventEZ</h3>
+        
         </div>
-    );
-}
+      </div>
+    </div>
+  );
+};
 
 export default Carousel;
diff --git a/src/Components/Event.js b/src/Components/Event.js
index b0119df..a3c0e84 100644
--- a/src/Components/Event.js
+++ b/src/Components/Event.js
@@ -18,11 +18,13 @@ const Event = ({ props }) => {
   console.log(props);
 
   return (
-    <div className={`grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 sm:mx-16 my-6`}>
+    <div
+      className={`grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 sm:mx-16 my-6`}
+    >
       {props.map((event) => (
         <div
           key={event.id}
-          className="max-w-sm border border-gray-200 rounded-lg shadow relative transition duration-300 ease-in-out transform hover:scale-105 hover:bg-[#F6E2C0] hover:cursor-pointer"
+          className="max-w-sm border border-gray-200 rounded-lg shadow relative transition duration-300 ease-in-out transform hover:scale-105 hover:bg-[#23f2dd85] hover:cursor-pointer"
         >
           <Link to={"/events/" + event.id}>
             <div>
diff --git a/src/Components/EventCoverCard.js b/src/Components/EventCoverCard.js
index f118815..541a6eb 100644
--- a/src/Components/EventCoverCard.js
+++ b/src/Components/EventCoverCard.js
@@ -16,7 +16,7 @@ const EventCoverCard = ({ events, eventId }) => {
         <div className="flex justify-center relative z-10 bg-white sm:mx-16 sm:mt-3 sm:mb-6 rounded-xl">
           <div className="hidden md:block w-1/2 bg-white my-4 ml-4 rounded-l-xl">
             <div className="h-1/2">
-              <h1 className=" text-2xl font-extrabold">
+              <h1 className=" text-3xl font-extrabold pt-4">
                 {events[eventId - 1].name}
               </h1>
             </div>
diff --git a/src/Components/EventPlannerAi.js b/src/Components/EventPlannerAi.js
index 15918da..2161b3b 100644
--- a/src/Components/EventPlannerAi.js
+++ b/src/Components/EventPlannerAi.js
@@ -3,7 +3,6 @@ import axios from "axios";
 import EventCoverCard from "./EventCoverCard";
 import LocationOnIcon from "@mui/icons-material/LocationOn";
 import LinkIcon from "@mui/icons-material/Link";
-import GoogleMapsCard from "./GoogleMapsCard";
 import ReactMarkdown from "react-markdown";
 import React, { useState, useCallback, useEffect } from "react";
 import {
@@ -88,7 +87,7 @@ const EventPlannerAi = ({ props }) => {
   }, [handleGetLocation]);
 
   useEffect(() => {
-    if (userLocation && eventLocation) {
+    if (userLocation && eventLocation && window.google && window.google.maps) {
       // Calculate distance between two points using Haversine formula
       const R = 6371; // Radius of the Earth in kilometers
       const lat1 = userLocation.lat;
@@ -295,13 +294,31 @@ const EventPlannerAi = ({ props }) => {
                   </div>
                   <button
                     type="submit"
-                    className="secondary-button h-10 mx-auto sm:mx-0 bg-slate-300 text-black hover:bg-gray-500"
+                    className="secondary-button h-10 mx-auto sm:mx-0"
                   >
                     Generate Plan
                   </button>
+                  {generatedAnswer && (
+                    <div className=" flex justify-center">
+                      <div className="text-container text-center ">
+                        <h2 className="animated-text ">Enjoy </h2>
+                        <h2 className="animated-text">Your</h2>
+                        <h2 className="animated-text">Event</h2>
+                        <h2 className="animated-text">🎉</h2>
+                        <h2 className="animated-text"> best wishes✨</h2>
+                      </div>
+                    </div>
+                  )}
                 </form>
               </div>
               <div className="border border-gray-300 w-full shadow-md rounded-lg">
+                {!loading && !generatedAnswer && (
+                  <>
+                    <h2 className=" text-2xl flex justify-center items-center">Your personalized plan will appear here</h2>
+
+                   
+                  </>
+                )}
                 {loading && <p className="text-center mt-4 ">Loading...</p>}
                 {error && (
                   <p className="text-red-500 text-center mt-4">{error}</p>
diff --git a/src/Components/Footer.js b/src/Components/Footer.js
index 528068c..2d0efcc 100644
--- a/src/Components/Footer.js
+++ b/src/Components/Footer.js
@@ -8,7 +8,7 @@ import { FaFacebookF } from "react-icons/fa";
 const Footer = () => {
   return (
     <>
-      <footer className=" mt-auto w-full border border-gray-200  bg-[#F6E2C0]  z-50 flex justify-between items-center px-10 py-2 ">
+      <footer className=" mt-auto w-full border border-gray-200  bg-[#23f2dd85] z-50 flex justify-between items-center px-10 py-2 ">
         <div className="container m-3 mx-auto py-4 px-6 flex justify-between items-center">
           <div>
             <p className="text-sm">
diff --git a/src/Components/Home.js b/src/Components/Home.js
index acbc30d..e2a5810 100644
--- a/src/Components/Home.js
+++ b/src/Components/Home.js
@@ -11,9 +11,9 @@ import gif2 from "../Assets/SliderImages/gif2.gif";
 import vid from "../Assets/smiling.mp4";
 import OurTeam from "./OurTeam";
 const slides = [
-  <img key="gif1" className="h-screen w-screen" src={gif1} alt="Slide 1" />,
   <img key="gif2" className="h-screen w-screen" src={gif2} alt="Slide 2" />,
   <img key="img1" className="h-screen w-screen" src={img1} alt="Slide 3" />,
+  <img key="gif1" className="h-screen w-screen" src={gif1} alt="Slide 1" />,
   <img key="img2" className="h-screen w-screen" src={img2} alt="Slide 4" />,
 ];
 import backgroundImg from "../Assets/backgroundImage.webp";
@@ -21,15 +21,15 @@ import backgroundImg from "../Assets/backgroundImage.webp";
 const Home = () => {
   return (
     <>
-      <div 
-            style={{backgroundImage: `url(${backgroundImg})`,}}
-
-      className=" home-container ">
+      <div
+        style={{ backgroundImage: `url(${backgroundImg})` }}
+        className=" home-container "
+      >
         <div className="flex absolute h-screen  bg-black">
           <Carousel autoSlide autoSlideInterval={5000}>
             {slides}
           </Carousel>
-          <div className="absolute z-100 sm:text-6xl justify-center mt-80 ml-8 text-white font-pacifico">
+          <div className="absolute z-100 sm:text-6xl justify-center mt-80 ml-8 text-white">
             Plan Smarter, Celebrate Bigger with EventEZ
           </div>
         </div>
diff --git a/src/Components/Navbar.js b/src/Components/Navbar.js
index 04b74be..d8e9f27 100644
--- a/src/Components/Navbar.js
+++ b/src/Components/Navbar.js
@@ -16,7 +16,7 @@ import PhoneRoundedIcon from "@mui/icons-material/PhoneRounded";
 import ShoppingCartRoundedIcon from "@mui/icons-material/ShoppingCartRounded";
 import LuggageIcon from "@mui/icons-material/Luggage";
 import { Link } from "react-router-dom";
-import logo from "../Assets/tryvalleylogo.png"
+import logo from "../Assets/tryvalleylogo.png";
 
 const Navbar = () => {
   const [openMenu, setOpenMenu] = useState(false);
@@ -34,31 +34,30 @@ const Navbar = () => {
       text: "Testimonials",
       icon: <CommentRoundedIcon />,
     },
-   
+
     {
       text: "Contact",
       icon: <PhoneRoundedIcon />,
     },
   ];
   return (
-    <nav className="w-full  border border-gray-200  py-4 z-50">
+    <nav className="w-full  border bg-[#23f2dd85] border-gray-200  py-4 z-50">
       <div className="nav-logo-container w-16 mx-8 text-8xl">
         <img src={logo} alt="" />
       </div>
       <div className="navbar-links-container">
         <ul className="flex flex-wrap  items-center ">
           <li>
-            <Link 
-            to="/" >Home</Link>
+            <Link to="/">Home</Link>
           </li>
           <li>
-          <a href="#about">About</a>
+            <a href="#about">About</a>
           </li>
 
           <li>
-           <a href="#our-team">Our Team</a>
+            <a href="#our-team">Team</a>
           </li>
-         
+
           <li>
             <Link to="/events">
               <button className="primary-button">Go to Events</button>
diff --git a/src/Components/OurTeam.js b/src/Components/OurTeam.js
index 7af4524..5190644 100644
--- a/src/Components/OurTeam.js
+++ b/src/Components/OurTeam.js
@@ -1,14 +1,14 @@
 import React from "react";
 import TeamMember from "./TeamMember";
 import deepesh from "../Assets/TeamMemberPhotos/deepesh.jpg";
-import priyansu from "../Assets/TeamMemberPhotos/priyansu.png";
+import priyansu from "../Assets/TeamMemberPhotos/priyansu.jpg";
 import soniya from "../Assets/TeamMemberPhotos/Soniya.png";
 
 const OurTeam = () => {
   return (
     <div>
       <section className="" id="our-team">
-        <div className="flex justify-between py-8 px-4 mx-auto max-w-screen-xl text-center lg:py-16 lg:px-6"></div>
+        <div className="flex justify-between py-8 pl-4 mx-auto max-w-screen-xl text-center lg:py-16 lg:px-6"></div>
         <div className="mx-auto mb-12 max-w-screen-sm lg:mb-16">
           <h2 className="primary-heading ">Our team</h2>
           <p className="primary-text ">Meet Our Team Members</p>
@@ -21,9 +21,10 @@ const OurTeam = () => {
               image={deepesh}
             />
             <TeamMember
-              Name="Priyansu Kumar"
+              Name="Priyansu Mohanty"
               Role="Frontend Developer"
               Github="https://github.com/Priyansu-17"
+              Linkedin="https://www.linkedin.com/in/priyansu-mohanty-105551237/"
               image={priyansu}
             />
             <TeamMember
diff --git a/src/Components/TeamMember.js b/src/Components/TeamMember.js
index 53d38f5..a6e5ae6 100644
--- a/src/Components/TeamMember.js
+++ b/src/Components/TeamMember.js
@@ -7,13 +7,13 @@ const TeamMember = ({ Name, Role, Linkedin, Github, image }) => {
         <img
           class="mx-auto mb-4 w-36 h-36 rounded-full"
           src={image}
-          alt="Bonnie Avatar"
+          alt="User Avatar"
         />
         <h3 class="mb-1 text-2xl font-bold tracking-tight text-gray-900 ">
           <a href="#">{Name}</a>
         </h3>
         <p>{Role}</p>
-        <ul class="flex justify-center mt-4 space-x-4">
+        <ul class="flex justify-center mt-4 space-x-1">
           <li>
             <a
               target="_blank"
diff --git a/src/index.css b/src/index.css
index afe0204..3d4c359 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,4 +1,30 @@
 @import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
\ No newline at end of file
+@tailwind utilities;
+
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');
+
+body {
+  font-family: 'Poppins', sans-serif;
+}
+
+.animated-text {
+    @apply text-[#D73359] mt-4 text-center text-3xl font-semibold;
+    animation: dance 3s ease-in-out infinite;
+  }
+  
+@keyframes dance {
+  0%, 100% {
+    transform: translateY(0) rotate(0deg);
+  }
+  25% {
+    transform: translateY(-10px) rotate(-2deg);
+  }
+  50% {
+    transform: translateY(10px) rotate(2deg);
+  }
+  75% {
+    transform: translateY(-5px) rotate(-1deg);
+  }
+}