diff --git a/src/app/page.tsx b/src/app/page.tsx
index c40963b..a493779 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -10,9 +10,28 @@ import MetricCardOne from "@/components/sections/metrics/MetricCardOne";
 import TestimonialCardTen from "@/components/sections/testimonial/TestimonialCardTen";
 import ContactCTA from "@/components/sections/contact/ContactCTA";
 import FooterSimple from "@/components/sections/footer/FooterSimple";
-import { Waves, Info, DoorOpen, Gift, Trophy, Users, Phone, MapPin, Sparkles, Heart, Zap, Star, MessageCircle, Wallet } from "lucide-react";
+import { Waves, Info, DoorOpen, Gift, Trophy, Users, Phone, MapPin, Sparkles, Heart, Zap, Star, MessageCircle, Wallet, MessageSquare } from "lucide-react";
+import { useState } from "react";
 
 export default function LandingPage() {
+  const [formData, setFormData] = useState({
+    name: "",    phone: "",    checkIn: "",    checkOut: ""
+  });
+
+  const handleFormChange = (field: string, value: string) => {
+    setFormData(prev => ({
+      ...prev,
+      [field]: value
+    }));
+  };
+
+  const handleBooking = () => {
+    if (formData.name && formData.phone && formData.checkIn && formData.checkOut) {
+      const message = `Booking Request - Name: ${formData.name}, Phone: ${formData.phone}, Check-in: ${formData.checkIn}, Check-out: ${formData.checkOut}`;
+      window.open(`https://wa.me/919624388777?text=${encodeURIComponent(message)}`);
+    }
+  };
+
   return (
     <ThemeProvider
       defaultButtonVariant="hover-bubble"
@@ -26,6 +45,32 @@ export default function LandingPage() {
       secondaryButtonStyle="solid"
       headingFontWeight="normal"
     >
+      {/* Floating WhatsApp Button */}
+      <a
+        href="https://wa.me/919624388777"
+        target="_blank"
+        rel="noopener noreferrer"
+        className="fixed bottom-8 right-8 z-40 bg-green-500 hover:bg-green-600 text-white rounded-full p-4 shadow-lg animate-bounce transition-all duration-300 hover:scale-110 md:bottom-6 md:right-6 sm:bottom-4 sm:right-4"
+        aria-label="Contact us on WhatsApp"
+      >
+        <MessageSquare size={24} className="md:size-6 sm:size-5" />
+      </a>
+
+      {/* Sticky Book Now Button */}
+      <div className="fixed top-24 right-0 z-30 md:top-20 sm:top-16 animate-fade-in">
+        <button
+          onClick={() => {
+            const bookingSection = document.getElementById('booking');
+            if (bookingSection) {
+              bookingSection.scrollIntoView({ behavior: 'smooth' });
+            }
+          }}
+          className="bg-gradient-to-r from-blue-600 to-blue-800 hover:from-blue-700 hover:to-blue-900 text-white font-bold py-3 px-6 rounded-l-lg shadow-lg transition-all duration-300 hover:shadow-xl transform hover:-translate-x-1 md:py-2 md:px-4 sm:py-2 sm:px-3 sm:text-sm"
+        >
+          Book Now
+        </button>
+      </div>
+
       <div id="nav" data-section="nav">
         <NavbarLayoutFloatingOverlay
           brandName="Hotel Ambica"
@@ -215,6 +260,130 @@ export default function LandingPage() {
         />
       </div>
 
+      {/* Booking Form Section */}
+      <div id="booking" data-section="booking" className="w-full py-16 md:py-12 sm:py-8 px-4 md:px-6 sm:px-4 bg-gradient-to-br from-blue-50 to-indigo-50">
+        <div className="max-w-4xl mx-auto">
+          <div className="text-center mb-12 md:mb-8 sm:mb-6 animate-fade-in-up">
+            <h2 className="text-4xl md:text-3xl sm:text-2xl font-bold text-gray-900 mb-4 md:mb-2">Book Your Stay</h2>
+            <p className="text-lg md:text-base sm:text-sm text-gray-600">Fill in your details below and we'll confirm your reservation</p>
+          </div>
+
+          <div className="bg-white rounded-lg shadow-lg p-8 md:p-6 sm:p-4 animate-slide-up">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-4 sm:gap-3 mb-8 md:mb-6 sm:mb-4">
+              {/* Name Input */}
+              <div className="animate-fade-in-left" style={{ animationDelay: '0.1s' }}>
+                <label className="block text-sm font-medium text-gray-700 mb-2 md:mb-1">Full Name</label>
+                <input
+                  type="text"
+                  placeholder="Your full name"
+                  value={formData.name}
+                  onChange={(e) => handleFormChange('name', e.target.value)}
+                  className="w-full px-4 md:px-3 py-3 md:py-2 sm:py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300 hover:border-blue-400 sm:text-sm"
+                />
+              </div>
+
+              {/* Phone Input */}
+              <div className="animate-fade-in-left" style={{ animationDelay: '0.2s' }}>
+                <label className="block text-sm font-medium text-gray-700 mb-2 md:mb-1">Phone Number</label>
+                <input
+                  type="tel"
+                  placeholder="+91 XXXXXXXXXX"
+                  value={formData.phone}
+                  onChange={(e) => handleFormChange('phone', e.target.value)}
+                  className="w-full px-4 md:px-3 py-3 md:py-2 sm:py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300 hover:border-blue-400 sm:text-sm"
+                />
+              </div>
+
+              {/* Check-in Date */}
+              <div className="animate-fade-in-left" style={{ animationDelay: '0.3s' }}>
+                <label className="block text-sm font-medium text-gray-700 mb-2 md:mb-1">Check-in Date</label>
+                <input
+                  type="date"
+                  value={formData.checkIn}
+                  onChange={(e) => handleFormChange('checkIn', e.target.value)}
+                  className="w-full px-4 md:px-3 py-3 md:py-2 sm:py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300 hover:border-blue-400 sm:text-sm"
+                />
+              </div>
+
+              {/* Check-out Date */}
+              <div className="animate-fade-in-left" style={{ animationDelay: '0.4s' }}>
+                <label className="block text-sm font-medium text-gray-700 mb-2 md:mb-1">Check-out Date</label>
+                <input
+                  type="date"
+                  value={formData.checkOut}
+                  onChange={(e) => handleFormChange('checkOut', e.target.value)}
+                  className="w-full px-4 md:px-3 py-3 md:py-2 sm:py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300 hover:border-blue-400 sm:text-sm"
+                />
+              </div>
+            </div>
+
+            {/* Submit Button */}
+            <button
+              onClick={handleBooking}
+              disabled={!formData.name || !formData.phone || !formData.checkIn || !formData.checkOut}
+              className="w-full bg-gradient-to-r from-blue-600 to-blue-800 hover:from-blue-700 hover:to-blue-900 disabled:from-gray-400 disabled:to-gray-500 disabled:cursor-not-allowed text-white font-bold py-3 md:py-2 sm:py-2 px-6 rounded-lg shadow-lg transition-all duration-300 hover:shadow-xl transform hover:scale-105 disabled:scale-100 sm:text-sm"
+            >
+              {formData.name && formData.phone && formData.checkIn && formData.checkOut
+                ? 'Complete Booking via WhatsApp'
+                : 'Fill all fields to book'}
+            </button>
+          </div>
+        </div>
+
+        <style>{`
+          @keyframes fade-in-up {
+            from {
+              opacity: 0;
+              transform: translateY(20px);
+            }
+            to {
+              opacity: 1;
+              transform: translateY(0);
+            }
+          }
+          @keyframes slide-up {
+            from {
+              opacity: 0;
+              transform: translateY(30px);
+            }
+            to {
+              opacity: 1;
+              transform: translateY(0);
+            }
+          }
+          @keyframes fade-in-left {
+            from {
+              opacity: 0;
+              transform: translateX(-20px);
+            }
+            to {
+              opacity: 1;
+              transform: translateX(0);
+            }
+          }
+          @keyframes bounce {
+            0%, 100% {
+              transform: translateY(0);
+            }
+            50% {
+              transform: translateY(-10px);
+            }
+          }
+          .animate-fade-in-up {
+            animation: fade-in-up 0.8s ease-out;
+          }
+          .animate-slide-up {
+            animation: slide-up 0.8s ease-out;
+          }
+          .animate-fade-in-left {
+            animation: fade-in-left 0.6s ease-out forwards;
+          }
+          .animate-bounce {
+            animation: bounce 2s infinite;
+          }
+        `}</style>
+      </div>
+
       <div id="contact" data-section="contact">
         <ContactCTA
           tag="Get In Touch"
@@ -275,4 +444,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
\ No newline at end of file
+}
diff --git a/src/app/styles/variables.css b/src/app/styles/variables.css
index 4fd73bf..ded95bf 100644
--- a/src/app/styles/variables.css
+++ b/src/app/styles/variables.css
@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #ffffff;
-  --card: #f9f9f9;
-  --foreground: #000612e6;
-  --primary-cta: #15479c;
+  --background: #f5f1e8;
+  --card: #ffffff;
+  --foreground: #1a3a3a;
+  --primary-cta: #0d7a8a;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #f9f9f9;
+  --secondary-cta: #d4af37;
   --secondary-cta-text: #000612e6;
-  --accent: #e2e2e2;
-  --background-accent: #c4c4c4;
+  --accent: #0d7a8a;
+  --background-accent: #e8f4f6;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);