diff --git a/Frontend/index.html b/Frontend/index.html
index 8c20ad4..c81b3b5 100644
--- a/Frontend/index.html
+++ b/Frontend/index.html
@@ -2,9 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image" href="/images/logo.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
+    <title>Crop Compass</title>
     <link
       href="https://cdn.jsdelivr.net/npm/flowbite@2.5.1/dist/flowbite.min.css"
       rel="stylesheet"
diff --git a/Frontend/src/components/Navbar.jsx b/Frontend/src/components/Navbar.jsx
index b921f1d..342a11c 100644
--- a/Frontend/src/components/Navbar.jsx
+++ b/Frontend/src/components/Navbar.jsx
@@ -26,25 +26,25 @@ const Navbar = () => {
   };
   return (
     <>
-      <nav className="bg-white border-gray-200 dark:bg-gray-900">
+      <nav className="bg-[#3D8D7A] dark:bg-gray-900">
         <div className="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
           <a
             href="/"
             className="flex items-center space-x-3 rtl:space-x-reverse"
           >
             <img
-              src="/images/logo.jpg"
-              className="h-9 rounded-full"
-              alt="Flowbite Logo"
+              src="/images/logo.png"
+              className="size-12 mr-2 "
+              alt="Logo"
             />
-            <span className="self-center text-xl font-bold whitespace-nowrap dark:text-white">
-              MentorFlux
+            <span className="self-center text-4xl font-bold whitespace-nowrap dark:text-white">
+              Crop Compass
             </span>
           </a>
           <div className="flex items-center md:order-2 space-x-3 md:space-x-0 rtl:space-x-reverse">
             <button
               type="button"
-              className="flex text-sm bg-gray-800 rounded-full md:me-0 focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600"
+              className="flex text-sm bg-white rounded-full md:me-0 focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600"
               id="user-menu-button"
               aria-expanded="false"
               data-dropdown-toggle="user-dropdown"
@@ -52,7 +52,7 @@ const Navbar = () => {
             >
               <span className="sr-only">Open user menu</span>
               <img
-                className="w-8 h-8 rounded-full"
+                className="size-9 rounded-full"
                 src={`${user?.avatar}`}
                 alt="user photo"
               />
@@ -116,7 +116,7 @@ const Navbar = () => {
                   <li>
                     <a
                       onClick={handleLogOut}
-                      className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
+                      className="block px-4 py-2 text-sm text-[#FBFFE4] hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
                     >
                       Sign out
                     </a>
@@ -153,11 +153,11 @@ const Navbar = () => {
             className="items-center justify-between hidden w-full md:flex md:w-auto md:order-1"
             id="navbar-user"
           >
-            <ul className="flex flex-col font-medium p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
+            <ul className="flex text-xl flex-col font-medium p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-[#A3D1C6] md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-[#3D8D7A] dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
               <li>
                 <Link
                   to={"/"}
-                  className="block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 md:dark:text-blue-500"
+                  className="block py-2 px-3 bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 md:dark:text-blue-500"
                   aria-current="page"
                 >
                   Home
diff --git a/Frontend/src/pages/Home/Hero.jsx b/Frontend/src/pages/Home/Hero.jsx
index 2534b2e..5dc118c 100644
--- a/Frontend/src/pages/Home/Hero.jsx
+++ b/Frontend/src/pages/Home/Hero.jsx
@@ -4,111 +4,90 @@ import { Link } from "react-router-dom";
 const Hero = () => {
   return (
     <>
-      <section className="bg-white py-12 w-full flex justify-center">
+      <section className="bg-[#FBFFE4] py-12 w-full flex justify-center">
         <div className="flex flex-col-reverse md:flex-row justify-between w-10/12 h-auto">
           <div className="container mx-auto flex flex-col justify-between h-full w-full">
-            <div className="text-center md:text-start flex flex-col gap-5 justify-around h-full">
-              <h2 className="text-xl font-bold mb-4 text-yellow-600">
-                100% SATISFACTION GUARANTEE
-              </h2>
-              <h1 className="text-6xl md:text-8xl md:font-extrabold font-bold mb-4">
-                Find Your Perfect Mentor
+            <div className="text-center md:text-start flex flex-col justify-around h-full">
+              <h1 className="text-6xl md:text-6xl md:w-2/3 md:font-extrabold font-bold">
+                Anything and Everything you Need to know About
               </h1>
-              <div className="flex gap-4 justify-center md:justify-start">
-                <form class="w-full md:w-3/5">
-                  <label
-                    for="default-search"
-                    class="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white"
-                  >
-                    Search
-                  </label>
-                  <div class="relative">
-                    <div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
-                      <svg
-                        class="w-4 h-4 text-gray-500 dark:text-gray-400"
-                        aria-hidden="true"
-                        xmlns="http://www.w3.org/2000/svg"
-                        fill="none"
-                        viewBox="0 0 20 20"
-                      >
-                        <path
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          stroke-width="2"
-                          d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"
-                        />
-                      </svg>
-                    </div>
-                    <input
-                      type="search"
-                      id="default-search"
-                      class="block w-full p-4 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-                      placeholder="Search for mentors"
-                      required
-                    />
-                    <Link
-                      to={"/mentor"}
-                      type="button"
-                      class="text-white  absolute end-2.5 bottom-2.5 bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-800"
-                    >
-                      Find your Mentor
-                    </Link>
-                  </div>
-                </form>
-
-                {/* 
-                <Link
-                  to={"/mentor"}
-                  type="button"
-                  className="focus:outline-none text-white bg-purple-700 hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 font-medium rounded-lg text-base px-5 py-2.5 mb-2 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-900"
-                >
-                  Find your Mentor
-                </Link>
-                <button
-                  type="button"
-                  className="text-white bg-gray-800 hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700"
-                >
-                  Contact Us
-                </button> */}
-              </div>
-              <p className="text-lg mb-8 my-6">
-                Find guidance, support, and industry insights from seasoned
-                professionals. Achieve your goals with our mentorship
-                platform.Our platform bridges the gap between students and
-                experienced mentors.
+              <p className="text-2xl font-semibold mb-8 ">
+                Your crops and their Health!
               </p>
             </div>
           </div>
           <div className="w-full md:w-4/5 object-contain flex justify-center items-center">
-            <img src="/images/student.png" className="w-full h-auto" alt="" />
+            <img src="/images/plant.png" className="w-full h-auto rounded-3xl shadow-xl" alt="plant" />
           </div>
         </div>
       </section>
-      <div className="grid grid-cols-1 sm:grid-cols-2  md:grid-cols-4 mt-8">
-        <div className="w-full p-4">
-          <div className="bg-blue-500 rounded-lg p-6 text-center">
-            <h3 className="text-white font-bold text-3xl mb-2">870</h3>
-            <p className="text-white font-bold">Expert tutors</p>
+
+      
+      <div className=" flex justify-center bg-[#FBFFE4]">
+        <div className=" flex justify-between  py-8 w-5/6 ">     
+
+          <div class="max-w-sm bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
+              <a href="#">
+                  <img class="rounded-t-lg" src="/images/plant.png" alt="plant" />
+              </a>
+              <div class="p-8 bg-[#A3D1C6] rounded-b-lg">
+                  <a href="#">
+                      <h5 class="mb-2 text-2xl font-bold tracking-tight text-white dark:text-white">Noteworthy technology acquisitions 2021</h5>
+                  </a>
+                  <p class="mb-3 font-normal text-white  dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
+                  <a href="#" class="inline-flex shadow-md items-center px-3 py-2 text-sm font-medium text-center text-white bg-[#5aa392] rounded-lg hover:bg-[#3a685d] focus:bg-[#3a685d] dark:bg-[#5aa392] dark:hover:bg-[#3a685d] dark:focus:ring-[#3a685d]">
+                      Read more
+                      <svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
+                          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
+                      </svg>
+                  </a>
+              </div>
           </div>
-        </div>
-        <div className="w-full p-4">
-          <div className="bg-blue-500 rounded-lg p-6 text-center">
-            <h3 className="text-white font-bold text-3xl mb-2">20,000+</h3>
-            <p className="text-white font-bold">Hours tutored</p>
+
+          <div className="flex flex-col gap-10 justify-between ">
+            
+            <div>
+              <a href="#" class="block max-w-sm p-6 bg-[#A3D1C6] border border-gray-200 rounded-lg shadow-md hover:bg-[#8cc0b4] dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">
+              <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy technology acquisitions 2021</h5>
+              <p class="font-normal text-gray-700 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
+              </a>
+            </div>
+
+
+            <div class="max-w-sm p-6 bg-[#A3D1C6] border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700">
+                <a href="#">
+                    <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy technology acquisitions 2021</h5>
+                </a>
+                <p class="mb-3 font-normal text-gray-700 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
+                <a href="#" class="inline-flex shadow-md items-center px-3 py-2 text-sm font-medium text-center text-white bg-[#5aa392] rounded-lg hover:bg-[#3a685d] focus:bg-[#3a685d] dark:bg-[#5aa392] dark:hover:bg-[#3a685d] dark:focus:ring-[#3a685d]">
+                      Read more
+                      <svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
+                          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
+                      </svg>
+                  </a>
+            </div>
+
           </div>
-        </div>
-        <div className="w-full p-4">
-          <div className="bg-blue-500 rounded-lg p-6 text-center">
-            <h3 className="text-white font-bold text-3xl mb-2">298</h3>
-            <p className="text-white font-bold">Subjects and courses</p>
-          </div>
-        </div>
-        <div className="w-full p-4">
-          <div className="bg-blue-500 rounded-lg p-6 text-center">
-            <h3 className="text-white font-bold text-3xl mb-2">72,920</h3>
-            <p className="text-white font-bold">Active students</p>
+
+
+          <div className=" flex flex-col justify-between">
+          
+            <div class="w-full max-w-sm bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:border-gray-700">
+                <a href="#">
+                    <img class=" rounded-lg" src="/images/plant.png" alt="product image" />
+                </a>
+            </div>
+
+
+            <div>
+              <a href="#" class="block max-w-sm p-6 bg-[#A3D1C6] border border-gray-200 rounded-lg shadow-md hover:bg-[#8cc0b4] dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">
+              <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy technology acquisitions 2021</h5>
+              <p class="font-normal text-gray-700 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
+              </a>
+            </div>
+
           </div>
+          
         </div>
       </div>
     </>
@@ -116,3 +95,8 @@ const Hero = () => {
 };
 
 export default Hero;
+
+
+
+
+// {grid grid-cols-1 sm:grid-cols-2  md:grid-cols-2}
\ No newline at end of file
diff --git a/Frontend/src/pages/Home/Testimonial.jsx b/Frontend/src/pages/Home/Testimonial.jsx
index cc6b4b3..0064afe 100644
--- a/Frontend/src/pages/Home/Testimonial.jsx
+++ b/Frontend/src/pages/Home/Testimonial.jsx
@@ -6,7 +6,7 @@ import { FaMessage } from "react-icons/fa6";
 const Testimonial = () => {
   return (
     <>
-      <section className="bg-gray-100 py-12 px-2 md:px-32">
+      <section className="bg-[#FBFFE4] py-12 px-2 md:px-32">
         <div className="container mx-auto">
           <div className="text-center">
             <h2 className="text-xl sm:text-4xl font-bold mb-4">WHY CHOOSE US</h2>
@@ -16,7 +16,7 @@ const Testimonial = () => {
           </div>
           <div className="flex flex-col sm:flex-row  justify-center mt-8 h-auto">
             <div className="w-full h-full md:w-1/3 p-4">
-              <div className="bg-white rounded-lg p-6 text-start shadow-md flex flex-col gap-2">
+              <div className="bg-[#B3D8A8] rounded-lg p-6 text-start shadow-md flex flex-col gap-2">
                 <IoMdContacts className=" text-4xl p-1 rounded-lg text-white bg-blue-600 " />
 
                 <h3 className="text-xl font-bold mb-2">One-on-One Mentoring</h3>
@@ -28,7 +28,7 @@ const Testimonial = () => {
             </div>
 
             <div className="w-full h-full md:w-1/3 p-4">
-              <div className="bg-white rounded-lg p-6 text-start shadow-md flex flex-col gap-2">
+              <div className="bg-[#B3D8A8] rounded-lg p-6 text-start shadow-md flex flex-col gap-2">
                 <FaClock className=" text-4xl p-1.5 rounded-lg text-white bg-green-600 " />
 
                 <h3 className="text-xl font-bold mb-2">24/7 Mentor Availability</h3>
@@ -40,7 +40,7 @@ const Testimonial = () => {
             </div>
 
             <div className="w-full h-full md:w-1/3 p-4">
-              <div className="bg-white rounded-lg p-6 text-start shadow-md flex flex-col gap-2">
+              <div className="bg-[#B3D8A8] rounded-lg p-6 text-start shadow-md flex flex-col gap-2">
                 <FaMessage className=" text-4xl p-2 rounded-lg text-white bg-orange-600 " />
 
                 <h3 className="text-xl font-bold mb-2">Interactive Session</h3>
