diff --git a/Frontend/src/Component/Animation/Appointment.tsx b/Frontend/src/Component/Animation/Appointment.tsx
index 8582441..67b6041 100644
--- a/Frontend/src/Component/Animation/Appointment.tsx
+++ b/Frontend/src/Component/Animation/Appointment.tsx
@@ -1,69 +1,67 @@
 import { useState, useEffect } from 'react';
-import image1 from '../../Assets/image (1).jpg'
-import image2 from '../../Assets/image (2).jpg'
-import image3 from '../../Assets/image.jpg'
+import image1 from '../../Assets/image (1).jpg';
+import image2 from '../../Assets/image (2).jpg';
+import image3 from '../../Assets/image.jpg';
 import { useNavigate } from 'react-router-dom';
 
 const Appointment = () => {
   const [currentDoctorIndex, setCurrentDoctorIndex] = useState(0);
-
-
-
   const navigate = useNavigate();
 
-  
-  
   const doctors = [
     {
       id: 1,
-      name: "Dr. Arjun Sharma",
+      name: 'Dr. Arjun Sharma',
       image: image3,
-      description: "Certified Ayurvedic practitioner with 20+ years of experience in holistic healing and natural therapies.",
-      specialist: "Ayurvedic Specialist",
+      description:
+        'Certified Ayurvedic practitioner with 20+ years of experience in holistic healing and natural therapies.',
+      specialist: 'Ayurvedic Specialist',
       rating: 4.9,
-      location: "123 Wellness Street, Delhi, India"
+      location: '123 Wellness Street, Delhi, India',
     },
     {
       id: 2,
-      name: "Dr. Meera Kapoor",
+      name: 'Dr. Meera Kapoor',
       image: image1,
-      description: "Expert in Panchakarma therapy and Ayurvedic diet planning for chronic diseases.",
-      specialist: "Panchakarma Specialist",
+      description:
+        'Expert in Panchakarma therapy and Ayurvedic diet planning for chronic diseases.',
+      specialist: 'Panchakarma Specialist',
       rating: 4.8,
-      location: "456 Ayurveda Avenue, Mumbai, India"
+      location: '456 Ayurveda Avenue, Mumbai, India',
     },
     {
       id: 3,
-      name: "Dr. Rajesh Verma",
+      name: 'Dr. Rajesh Verma',
       image: image2,
-      description: "Specialist in Ayurvedic treatments for skin disorders and natural wellness therapies.",
-      specialist: "Ayurvedic Dermatologist",
+      description:
+        'Specialist in Ayurvedic treatments for skin disorders and natural wellness therapies.',
+      specialist: 'Ayurvedic Dermatologist',
       rating: 4.7,
-      location: "789 Holistic Lane, Bangalore, India"
+      location: '789 Holistic Lane, Bangalore, India',
     },
   ];
 
   useEffect(() => {
     const interval = setInterval(() => {
-      setCurrentDoctorIndex((prevIndex) => 
+      setCurrentDoctorIndex((prevIndex) =>
         prevIndex === doctors.length - 1 ? 0 : prevIndex + 1
       );
     }, 10000);
-    
+
     return () => clearInterval(interval);
   }, [doctors.length]);
 
   const doctor = doctors[currentDoctorIndex];
 
-  const renderStars = (rating) => {
+  const renderStars = (rating: number) => {
     const fullStars = Math.floor(rating);
     const hasHalfStar = rating % 1 >= 0.5;
-    
+
     return (
       <div className="flex items-center">
         {[...Array(5)].map((_, i) => (
           <span key={i} className="text-amber-500 text-lg">
-            {i < fullStars ? "★" : i === fullStars && hasHalfStar ? "½" : "☆"}
+            {i < fullStars ? '★' : i === fullStars && hasHalfStar ? '½' : '☆'}
           </span>
         ))}
         <span className="ml-2 text-sm text-amber-700">{rating.toFixed(1)}</span>
@@ -72,77 +70,88 @@ const Appointment = () => {
   };
 
   return (
-    <div className="w-full flex justify-center items-center py-16 bg-amber-50 from-amber-100 via-amber-100 to-amber-100">
-      <div className="w-full max-w-4xl p-6 bg-amber-100 rounded-xl  text-gray-800">
-        <div className="flex flex-col md:flex-row w-full">
-         
-          <div className="w-full md:w-1/2 p-4 flex items-center justify-center">
-            <div className="relative">
-              <img 
-                src={doctor.image} 
+    <div className="w-full flex justify-center items-center py-16 bg-gradient-to-br from-amber-100 via-amber-100 to-amber-100 overflow-hidden">
+      <div className="w-full max-w-4xl p-6 bg-amber-100 rounded-xl text-gray-800">
+        {/* Card Layout */}
+        <div className="flex flex-col md:flex-row w-full gap-6">
+          {/* Doctor Image */}
+          <div className="w-full md:w-1/2 flex items-center justify-center">
+            <div className="relative w-full max-w-[300px]">
+              <img
+                src={doctor.image}
                 alt={doctor.name}
-                className="max-h-64 object-cover rounded-lg shadow-md"
+                className="w-full h-64 object-cover rounded-lg shadow-md"
               />
               <div className="absolute bottom-2 right-2 bg-amber-500 w-4 h-4 rounded-full border-2 border-white"></div>
             </div>
           </div>
-          
-          <div className="w-full md:w-1/2 p-4 flex flex-col justify-between">
+
+          {/* Doctor Info */}
+          <div className="w-full md:w-1/2 flex flex-col justify-between">
             <div>
-              <h2 className="text-2xl font-bold text-amber-600 mb-2">{doctor.name}</h2>
+              <h2 className="text-2xl font-bold text-amber-600 mb-2">
+                {doctor.name}
+              </h2>
               <div className="mb-2 text-amber-500 font-medium">
                 {doctor.specialist}
               </div>
               <p className="text-gray-700 mb-3 text-sm">{doctor.description}</p>
-              <div className="mb-3">
-                {renderStars(doctor.rating)}
-              </div>
+              <div className="mb-3">{renderStars(doctor.rating)}</div>
               <div className="flex items-start mb-4">
-                <svg className="w-4 h-4 text-amber-400 mt-1 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
+                <svg
+                  className="w-4 h-4 text-amber-400 mt-1 mr-1"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
+                  />
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
+                  />
                 </svg>
                 <p className="text-xs text-gray-500">{doctor.location}</p>
               </div>
             </div>
-            
-            <button
-       onClick={() => {
-        console.log('Navigation button clicked');
-        navigate('/doctors');
-      }}
-      
-      className="bg-amber-500 hover:bg-amber-600 text-white py-2 px-4 rounded-md flex items-center justify-center transition-all duration-300"
-    >
-      <svg
-        className="w-4 h-4 mr-2"
-        fill="none"
-        stroke="currentColor"
-        viewBox="0 0 24 24"
-      >
-        <path
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={2}
-          d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"
-        />
-      </svg>
-      
 
-      Call for Appointment
-    </button>
+            <button
+              onClick={() => navigate('/doctors')}
+              className="bg-amber-500 hover:bg-amber-600 text-white py-2 px-4 rounded-md flex items-center justify-center transition-all duration-300"
+            >
+              <svg
+                className="w-4 h-4 mr-2"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"
+                />
+              </svg>
+              Call for Appointment
+            </button>
           </div>
         </div>
-        
+
+        {/* Dots */}
         <div className="mt-6 flex justify-center">
           {doctors.map((_, index) => (
             <button
               key={index}
               className={`mx-1 w-3 h-3 rounded-full transition-all duration-300 ${
-                index === currentDoctorIndex ? "bg-amber-500" : "bg-amber-300"
+                index === currentDoctorIndex ? 'bg-amber-500' : 'bg-amber-300'
               }`}
               onClick={() => setCurrentDoctorIndex(index)}
-              // onClick={() => navigate('/doctors')} 
               aria-label={`View doctor ${index + 1}`}
             />
           ))}
diff --git a/Frontend/src/Component/Animation/StepProcess.tsx b/Frontend/src/Component/Animation/StepProcess.tsx
index fe6ba43..fc8cc56 100644
--- a/Frontend/src/Component/Animation/StepProcess.tsx
+++ b/Frontend/src/Component/Animation/StepProcess.tsx
@@ -139,6 +139,57 @@ export default function StepProcess() {
                       </div>
                     </div>
 
+      {/* Staggered Card Layout */}
+      <div className="w-full max-w-6xl px-4 text-center">
+        <h3 className="text-xl sm:text-2xl font-bold text-amber-800 mb-6 sm:mb-8 font-['Verdana'] relative inline-block">
+          <span>Explore Ayurvedic Remedies</span>
+          <span className="absolute -bottom-2 left-0 right-0 h-0.5 bg-gradient-to-r from-amber-500 via-amber-600 to-amber-500"></span>
+        </h3>
+
+        <div className="relative h-80 sm:h-96 mb-8 sm:mb-16" ref={cardsContainerRef}>
+          <div className="absolute inset-0 flex justify-center items-center">
+            {diseases.map((disease, idx) => (
+              <div
+                key={idx}
+                onClick={() => handleCardClick(disease, idx)}
+                className={`absolute transition-all duration-300 cursor-pointer ${getCardWidth()} bg-white border border-amber-200 rounded-xl p-3 sm:p-4 shadow-md hover:shadow-xl`}
+                style={getCardStyle(idx)}
+              >
+                <div className="relative overflow-hidden rounded-lg mb-3 sm:mb-4">
+                  <figure className="w-full h-32 sm:h-40 rounded-lg overflow-hidden">
+                    <figure className="w-full h-32 sm:h-40 rounded-lg overflow-hidden">
+                      <img
+                        src={disease.image_url || '/api/placeholder/260/150'}
+                        alt={disease.alt_text || 'Remedy'}
+                        loading="lazy"
+                        decoding="async"
+                        width="260"
+                        height="150"
+                        className="w-full h-full object-cover transition-all duration-500 hover:scale-110"
+                        srcSet={`
+  ${(disease.image_url || '/api/placeholder/260/150').replace("w_64,h_64", "w_320,h_180")} 320w,
+  ${(disease.image_url || '/api/placeholder/260/150').replace("w_64,h_64", "w_640,h_360")} 640w,
+  ${(disease.image_url || '/api/placeholder/260/150').replace("w_64,h_64", "w_1280,h_720")} 1280w
+`}
+
+                        sizes="(max-width: 640px) 100vw, 640px"
+                      />
+                      <figcaption className="sr-only">
+                        {disease.alt_text || 'Remedy'}
+                      </figcaption>
+                    </figure>
+
+
+                    {/* Accessible caption (screen readers only) */}
+                    <figcaption className="sr-only">
+                      {disease.alt_text || 'Remedy'}
+                    </figcaption>
+                  </figure>
+
+
+                  {idx === activeCardIndex && (
+                    <div className="absolute inset-0 bg-gradient-to-t from-amber-900/60 to-transparent flex items-end">
+                      <span className="text-white text-xs sm:text-sm font-medium p-2 sm:p-3">View Details</span>
                     <div className="p-6">
                       <h3 className="text-xl font-bold text-gray-800 mb-2 line-clamp-2 group-hover:text-amber-700 transition-colors">
                         {disease.alt_text || 'Ayurvedic Treatment'}
diff --git a/Frontend/src/Component/Aurleaf/Home.tsx b/Frontend/src/Component/Aurleaf/Home.tsx
index 4ad332d..e75bb99 100644
--- a/Frontend/src/Component/Aurleaf/Home.tsx
+++ b/Frontend/src/Component/Aurleaf/Home.tsx
@@ -4,112 +4,53 @@ import StepProcess from '../Animation/StepProcess';
 import AyurvedicHealthSection from '../Animation/Infinte';
 import ReviewForm from '../Rating/ReviewForm';
 
-
-
-
-
-
 export default function Home() {
-
-
-    
- 
-
   return (
-
     <>
-  
-
-  <AyurvedicHealthSection/>
-
-<section className="w-full flex flex-col justify-center items-center pt-12 pb-20 bg-amber-50 from-amber-500 via-amber-600 to-amber-500">
-  <h1 className="text-5xl text-center font-extrabold tracking-wide text-amber-700 m-10">
-
-    Ayufit: AI-Powered Diet & Fitness for Better Health
-  </h1>
-
-  <h3 className="text-3xl text-center font-semibold text-amber-600 m-10">
-    Struggling with diabetes, BP, or asthma? Get AI-powered diet & workout plans backed by Ayurveda!
-  </h3>
-
-  
-  <div className="w-full flex justify-center mt-6">
-    <StepProcess />
-  </div>
-</section>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-<section className="w-full flex flex-col justify-center items-center pt-12 pb-20 bg-amber-50 from-amber-500 via-amber-600 to-amber-500">
-  <h1 className="text-5xl text-center font-extrabold tracking-wide text-amber-700 m-10">
-  Ayumed: Your One-Stop Shop for Health & Wellness  </h1>
-
-  <h3 className="text-3xl text-center font-semibold text-amber-600 m-10">
-  Shop medical essentials and Ayurvedic solutions for a healthier life—trusted, safe, and effective.
-  </h3>
-
-  
-
-  <div className="w-full flex justify-center mt-6">
-  <MiniShop />
-  </div>
-</section>
-
-
-
-
-
-
-<section className="w-full flex flex-col justify-center items-center pt-12 pb-20 bg-amber-50 from-amber-100 via-amber-100 to-amber-100">
-  <h1 className="text-5xl text-center font-extrabold tracking-wide text-amber-700 m-10">
-  AyuDoctor: Find & Book Ayurvedic Doctors Near You
-  </h1>
-
-  <h3 className="text-3xl text-center font-semibold text-amber-600 m-10">
-  Connect with expert Ayurvedic doctors and book hassle-free appointments for natural healing and wellness.
-  </h3>
-
-  
-
-  <div className="w-full flex justify-center mt-6">
-  <Appointment />
-  </div>
-</section>
-
-
-
-
-      
-
-
-
-
-
-
-
-
-<ReviewForm/>
-
-
-
-
-      
-
-
-
-     
+      {/* Hero / Ayurvedic Health Section */}
+      <AyurvedicHealthSection />
+
+      {/* AyuFit Section */}
+      <section className="w-full flex flex-col justify-center items-center pt-8 pb-16 px-4 sm:px-6 bg-gradient-to-b from-amber-100 via-amber-100 to-amber-200 text-center">
+        <h1 className="text-3xl sm:text-4xl md:text-5xl font-extrabold tracking-wide text-amber-700 mb-6">
+          Ayufit: AI-Powered Diet & Fitness for Better Health
+        </h1>
+        <h3 className="text-lg sm:text-xl md:text-2xl font-semibold text-amber-600 mb-8">
+          Struggling with diabetes, BP, or asthma? Get AI-powered diet & workout plans backed by Ayurveda!
+        </h3>
+        <div className="w-full flex justify-center mt-6">
+          <StepProcess />
+        </div>
+      </section>
+
+      {/* AyuMed Section */}
+      <section className="w-full flex flex-col justify-center items-center pt-8 pb-16 px-4 sm:px-6 bg-gradient-to-b from-amber-200 via-amber-100 to-amber-200 text-center">
+        <h1 className="text-3xl sm:text-4xl md:text-5xl font-extrabold tracking-wide text-amber-700 mb-6">
+          Ayumed: Your One-Stop Shop for Health & Wellness
+        </h1>
+        <h3 className="text-lg sm:text-xl md:text-2xl font-semibold text-amber-600 mb-8">
+          Shop medical essentials and Ayurvedic solutions for a healthier life—trusted, safe, and effective.
+        </h3>
+        <div className="w-full flex justify-center mt-6">
+          <MiniShop />
+        </div>
+      </section>
+
+      {/* AyuDoctor Section */}
+      <section className="w-full flex flex-col justify-center items-center pt-8 pb-16 px-4 sm:px-6 bg-gradient-to-b from-amber-100 via-amber-100 to-amber-100 text-center">
+        <h1 className="text-3xl sm:text-4xl md:text-5xl font-extrabold tracking-wide text-amber-700 mb-6">
+          AyuDoctor: Find & Book Ayurvedic Doctors Near You
+        </h1>
+        <h3 className="text-lg sm:text-xl md:text-2xl font-semibold text-amber-600 mb-8">
+          Connect with expert Ayurvedic doctors and book hassle-free appointments for natural healing and wellness.
+        </h3>
+        <div className="w-full flex justify-center mt-6">
+          <Appointment />
+        </div>
+      </section>
+
+      {/* Reviews Section */}
+      <ReviewForm />
     </>
   );
 }
diff --git a/Frontend/src/Component/Footer/Foot.tsx b/Frontend/src/Component/Footer/Foot.tsx
index 5ce0423..32d1695 100644
--- a/Frontend/src/Component/Footer/Foot.tsx
+++ b/Frontend/src/Component/Footer/Foot.tsx
@@ -1,5 +1,6 @@
-import { Link, NavLink } from "react-router-dom"; 
-import { FaTwitter, FaLinkedin, FaGithub } from "react-icons/fa";
+import { Link, NavLink } from "react-router-dom";
+import { Link, NavLink } from "react-router-dom"; // React Router DOM
+import { FaTwitter, FaLinkedin, FaGithub } from "react-icons/fa"; // Only required social icons
 import logo from "../../Assets/logo.png";
 
 export default function Foot() {
@@ -7,6 +8,7 @@ export default function Foot() {
     <footer className="w-full bg-amber-50 text-amber-900 px-4 md:px-8 lg:px-10 py-10 font-[Inter] border-t border-amber-100">
       <div className="max-w-screen-xl mx-auto text-center flex flex-col items-center relative">
 
+        {/* Logo + Brand */}
         {/* Logo and Brand */}
         <Link
           to="/"
@@ -16,6 +18,13 @@ export default function Foot() {
           Aurleaf
         </Link>
 
+        {/* Tagline */}
+        <p className="text-amber-800 mt-6 max-w-lg text-base">
+          Ayurleaf — Your personal doctor who truly cares about you.
+        </p>
+
+        {/* Links (responsive grid) */}
+        <div className="mt-10 grid grid-cols-2 sm:grid-cols-2 md:grid-cols-4 gap-6 w-full max-w-lg">
         {/* Description */}
         <p className="text-amber-800 mt-16 max-w-lg text-base">
           Ayurleaf — Your personal doctor who truly cares about you.
@@ -26,31 +35,43 @@ export default function Foot() {
           <NavLink
             to="/fitness"
             className={({ isActive }) =>
-              `text-2xl font-medium ${isActive ? "text-amber-900" : "text-amber-800 hover:text-amber-600"}`
+              `text-lg font-medium ${
+                isActive ? "text-amber-900" : "text-amber-800 hover:text-amber-600"
+              }`
             }
           >
             AyuFit
           </NavLink>
           <NavLink
             to="/products"
+            className="text-lg font-medium text-amber-800 hover:text-amber-600"
             className="text-2xl font-medium text-amber-800 hover:text-amber-600"
           >
             AyuMed
           </NavLink>
           <NavLink
             to="/doctors"
+            className="text-lg font-medium text-amber-800 hover:text-amber-600"
             className="text-2xl font-medium text-amber-800 hover:text-amber-600"
           >
             AyuDoctor
           </NavLink>
           <NavLink
             to="/hospitals"
+            className="text-lg font-medium text-amber-800 hover:text-amber-600"
             className="text-2xl font-medium text-amber-800 hover:text-amber-600"
           >
             AyuHospitals
           </NavLink>
         </div>
 
+        {/* Copyright */}
+        <span className="text-sm text-amber-700 mt-8">
+          © 2025{" "}
+          <Link to="/" className="hover:underline text-amber-600">
+            Ayurleaf™
+          </Link>
+          . All Rights Reserved.
         {/* Social Media Links */}
         <div className="flex space-x-6 justify-center mt-10 mb-4 text-amber-700">
           <a
diff --git a/Frontend/src/Component/Headers/Nav.tsx b/Frontend/src/Component/Headers/Nav.tsx
index 5fde710..00be0ec 100644
--- a/Frontend/src/Component/Headers/Nav.tsx
+++ b/Frontend/src/Component/Headers/Nav.tsx
@@ -2,8 +2,6 @@ import { Link, NavLink, useNavigate } from "react-router";
 import logo from "../../Assets/logo.png";
 import { useState } from "react";
 
-
-
 function Nav() {
   const [isOpen, setIsOpen] = useState(false);
 
@@ -14,69 +12,108 @@ function Nav() {
       <div className="max-w-screen-xl flex items-center justify-between  p-6">
         {/* Logo and Title */}
         <div className="flex items-center">
-          <Link to="/" className="flex items-center space-x-5">
-            <img src={logo} className="h-20 w-auto" alt="Logo" />
-            <span className="text-4xl font-semibold text-amber-900 hover:text-amber-600">Ayurleaf</span>
+          <Link to="/" className="flex items-center space-x-3">
+            <img src={logo} className="h-12 w-auto sm:h-16 md:h-20" alt="Logo" />
+            <span className="text-2xl sm:text-3xl md:text-4xl font-semibold text-amber-900 hover:text-amber-600">
+              Ayurleaf
+            </span>
           </Link>
         </div>
 
         {/* Desktop Nav Links */}
-        <div className="hidden md:flex md:space-x-32 absolute left-1/2 transform -translate-x-1/2">
+        <div className="hidden md:flex md:space-x-8 justify-center w-full">
+        <div className="hidden md:flex md:space-x-8 absolute left-1/2 transform -translate-x-1/2">
+          <NavLink to="/" className="text-2xl font-medium text-amber-800 underline hover:text-amber-600">
+            Home
+          </NavLink>
           <NavLink
             to="/fitness"
             className={({ isActive }) =>
-              `text-2xl font-medium ${isActive ? "text-amber-900" : "text-amber-800 hover:text-amber-600"}`
+              `text-2xl font-medium ${
+                isActive
+                  ? "text-amber-900"
+                  : "text-amber-800 underline hover:text-amber-600"
+              }`
             }
           >
             AyuFit
           </NavLink>
-          <NavLink to="/products" className="text-2xl font-medium text-amber-800 hover:text-amber-600">
+          <NavLink
+            to="/products"
+            className="text-2xl font-medium text-amber-800 underline hover:text-amber-600"
+          >
             AyuMed
           </NavLink>
-          <NavLink to="/doctors" className="text-2xl font-medium text-amber-800 hover:text-amber-600">
+          <NavLink
+            to="/doctors"
+            className="text-2xl font-medium text-amber-800 underline hover:text-amber-600"
+          >
             AyuDoctor
           </NavLink>
-          <NavLink to="/hospitals" className="text-2xl font-medium text-amber-800 hover:text-amber-600">
+          <NavLink
+            to="/hospitals"
+            className="text-2xl font-medium text-amber-800 underline hover:text-amber-600"
+          >
             AyuHospitals
           </NavLink>
         </div>
 
-        
-       
-
         {/* Hamburger Button */}
         <button
           className="md:hidden text-amber-900 p-2 rounded-md focus:outline-none"
           onClick={() => setIsOpen(!isOpen)}
         >
-          <svg className="w-8 h-8" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-            <path d={isOpen ? "M6 18L18 6M6 6l12 12" : "M4 6h16M4 12h16M4 18h16"} />
+          <svg
+            className="w-8 h-8"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+          >
+            <path
+              d={
+                isOpen
+                  ? "M6 18L18 6M6 6l12 12"
+                  : "M4 6h16M4 12h16M4 18h16"
+              }
+            />
           </svg>
         </button>
       </div>
 
       {/* Mobile Menu */}
       {isOpen && (
-        <div className="md:hidden bg-amber-50 border-t border-amber-200 p-4">
-          <NavLink to="/fitness" className="block py-2 text-2xl text-amber-900 hover:text-amber-600">
+        <div className="md:hidden bg-amber-50 border-t border-amber-200 p-4 space-y-2 transition-all duration-300">
+          <NavLink
+            to="/fitness"
+            className="block py-2 text-xl sm:text-2xl text-amber-900 hover:text-amber-600"
+          >
             AyuFit
           </NavLink>
-          <NavLink to="/products" className="block py-2 text-2xl text-amber-900 hover:text-amber-600">
+          <NavLink
+            to="/products"
+            className="block py-2 text-xl sm:text-2xl text-amber-900 hover:text-amber-600"
+          >
             AyuMed
           </NavLink>
-          <NavLink to="/doctors" className="block py-2 text-2xl text-amber-900 hover:text-amber-600">
+          <NavLink
+            to="/doctors"
+            className="block py-2 text-xl sm:text-2xl text-amber-900 hover:text-amber-600"
+          >
             AyuDoctor
           </NavLink>
-          <NavLink to="/hospitals" className="block py-2 text-2xl text-amber-900 hover:text-amber-600">
+          <NavLink
+            to="/hospitals"
+            className="block py-2 text-xl sm:text-2xl text-amber-900 hover:text-amber-600"
+          >
             AyuHospitals
           </NavLink>
           <button
-            onClick={() => navigate('/BMI')}
-            className="w-full mt-3 text-black bg-amber-500 hover:bg-amber-600 font-medium rounded-lg text-3xl px-6 py-3"
+            onClick={() => navigate("/BMI")}
+            className="w-full mt-3 text-black bg-amber-500 hover:bg-amber-600 font-medium rounded-lg text-lg sm:text-xl px-4 py-2"
           >
             Get Instant Help
           </button>
-        
         </div>
       )}
     </nav>
@@ -84,9 +121,3 @@ function Nav() {
 }
 
 export default Nav;
-
-
-
-
-
-
diff --git a/Frontend/src/index.css b/Frontend/src/index.css
index 0513289..e872716 100644
--- a/Frontend/src/index.css
+++ b/Frontend/src/index.css
@@ -1,5 +1,36 @@
 @import "tailwindcss";
 
+html, body {
+  overflow-x: hidden;
+  width: 100%;
+}
+
+@import "./Component/Animation/animation.css";
+
+.text-green-800:hover{
+  color: rgb(33, 238, 30);
+  /* cursor: pointer; */
+}
+
+.underline {
+  position: relative;
+  text-decoration: none;
+}
+
+.underline::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  bottom: -2px;
+  width: 0;
+  height: 2px;
+  background: rgb(46, 229, 83);
+  transition: width 0.5s ease;
+}
+
+.underline:hover::after {
+  width: 100%;
+}
 
 @layer utilities {
     .animate-fade-in {