diff --git a/src/app/booking/page.tsx b/src/app/booking/page.tsx
index a280845..565c16e 100644
--- a/src/app/booking/page.tsx
+++ b/src/app/booking/page.tsx
@@ -2,17 +2,31 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
-import { useState } from 'react';
-import { Calendar, Clock, Users, Palette, Phone, Mail } from 'lucide-react';
+import HeroLogo from '@/components/sections/hero/HeroLogo';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
 import FooterSimple from '@/components/sections/footer/FooterSimple';
+import { useState } from 'react';
+import { Calendar, Clock, Users, Palette, CheckCircle } from 'lucide-react';
 
 export default function BookingPage() {
+  const [formData, setFormData] = useState({
+    eventType: '',
+    eventDate: '',
+    eventTime: '',
+    guestCount: '',
+    budget: '',
+    notes: '',
+  });
+
+  const [submitted, setSubmitted] = useState(false);
+
   const navItems = [
-    { name: "Home", id: "home" },
-    { name: "Services", id: "services" },
+    { name: "Home", id: "/" },
+    { name: "Services", id: "/#services" },
     { name: "Gallery", id: "/gallery" },
-    { name: "Packages", id: "/packages" },
-    { name: "About", id: "about" },
+    { name: "Packages", id: "/#packages" },
+    { name: "About", id: "/#about" },
+    { name: "Booking", id: "/booking" },
     { name: "Contact", id: "/contact" },
   ];
 
@@ -28,10 +42,10 @@ export default function BookingPage() {
     },
     {
       title: "Company",      items: [
-        { label: "About Us", href: "/about" },
+        { label: "About Us", href: "/#about" },
         { label: "Gallery", href: "/gallery" },
-        { label: "Packages", href: "/packages" },
-        { label: "FAQ", href: "#faq" },
+        { label: "Packages", href: "/#packages" },
+        { label: "FAQ", href: "/#faq" },
         { label: "Contact", href: "/contact" },
       ],
     },
@@ -48,54 +62,35 @@ export default function BookingPage() {
       title: "Service Areas",      items: [
         { label: "Local Events", href: "/contact" },
         { label: "Regional Coverage", href: "/contact" },
-        { label: "Book Now", href: "/packages" },
+        { label: "Book Now", href: "/booking" },
         { label: "Get Quote", href: "/contact" },
       ],
     },
   ];
 
-  const [formData, setFormData] = useState({
-    fullName: '',
-    email: '',
-    phone: '',
-    eventType: '',
-    eventDate: '',
-    eventTime: '',
-    guestCount: '',
-    serviceType: '',
-    additionalNotes: '',
-  });
-
-  const [submitted, setSubmitted] = useState(false);
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
     const { name, value } = e.target;
-    setFormData(prev => ({
-      ...prev,
-      [name]: value
-    }));
+    setFormData(prev => ({ ...prev, [name]: value }));
   };
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
-    console.log('Form submitted:', formData);
     setSubmitted(true);
-    setTimeout(() => {
-      setFormData({
-        fullName: '',
-        email: '',
-        phone: '',
-        eventType: '',
-        eventDate: '',
-        eventTime: '',
-        guestCount: '',
-        serviceType: '',
-        additionalNotes: '',
-      });
-      setSubmitted(false);
-    }, 3000);
+    setTimeout(() => setSubmitted(false), 5000);
   };
 
+  const availableDates = [
+    { date: '2025-02-15', available: true },
+    { date: '2025-02-16', available: false },
+    { date: '2025-02-17', available: true },
+    { date: '2025-02-22', available: true },
+    { date: '2025-02-23', available: true },
+    { date: '2025-03-01', available: true },
+    { date: '2025-03-02', available: false },
+    { date: '2025-03-08', available: true },
+    { date: '2025-03-09', available: true },
+  ];
+
   return (
     <ThemeProvider
       defaultButtonVariant="shift-hover"
@@ -118,201 +113,183 @@ export default function BookingPage() {
         />
       </div>
 
-      <div id="booking-form" data-section="booking-form" className="mx-auto px-4 md:px-6 py-20 max-w-2xl">
-        <div className="mb-12">
-          <h1 className="text-4xl font-extrabold mb-4">Book Your Event</h1>
-          <p className="text-lg opacity-90 mb-8">Complete this form to request a booking for professional face and body art services at your event. We'll get back to you within 24 hours with availability and pricing details.</p>
-        </div>
+      <div id="hero-booking" data-section="hero-booking" className="mx-auto px-4 md:px-6">
+        <HeroLogo
+          logoText="Event Booking"
+          description="Secure your date and customize your face painting and body art experience. Check availability, fill out your booking form, and let's create something amazing."
+          buttons={[{ text: "Scroll to Book", href: "#booking-form" }]}
+          buttonAnimation="blur-reveal"
+          showDimOverlay={false}
+          ariaLabel="Booking page hero section"
+          className="min-h-screen flex items-center justify-center"
+          containerClassName="text-center"
+          descriptionClassName="text-lg opacity-90 max-w-2xl mx-auto"
+          logoContainerClassName="mb-6"
+          logoClassName="text-5xl md:text-6xl font-extrabold"
+        />
+      </div>
 
-        {submitted && (
-          <div className="mb-6 p-4 bg-green-100 border border-green-300 rounded-lg text-green-800">
-            <p className="font-semibold">Thank you! Your booking request has been submitted. We'll contact you soon to confirm details.</p>
-          </div>
-        )}
-
-        <form onSubmit={handleSubmit} className="space-y-6">
-          {/* Contact Information Section */}
-          <div className="border-b pb-6">
-            <h2 className="text-2xl font-bold mb-4 flex items-center gap-2">
-              <Mail className="w-5 h-5" />
-              Contact Information
-            </h2>
-            
+      <div id="availability-calendar" data-section="availability-calendar" className="mx-auto px-4 md:px-6 py-16">
+        <div className="max-w-4xl mx-auto">
+          <h2 className="text-4xl font-extrabold mb-4 text-center">Availability Calendar</h2>
+          <p className="text-lg opacity-90 text-center mb-12 max-w-2xl mx-auto">Check our availability and select your preferred event date. Green indicates available dates, red shows booked slots.</p>
+          
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
             <div className="space-y-4">
-              <div>
-                <label htmlFor="fullName" className="block text-sm font-semibold mb-2">Full Name *</label>
-                <input
-                  id="fullName"
-                  type="text"
-                  name="fullName"
-                  value={formData.fullName}
-                  onChange={handleChange}
-                  required
-                  placeholder="Your full name"
-                  className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500"
-                />
+              <div className="flex items-center gap-3 p-3 bg-green-100 rounded-lg">
+                <div className="w-4 h-4 bg-green-500 rounded"></div>
+                <span className="text-sm font-medium">Available</span>
               </div>
-
-              <div>
-                <label htmlFor="email" className="block text-sm font-semibold mb-2">Email Address *</label>
-                <input
-                  id="email"
-                  type="email"
-                  name="email"
-                  value={formData.email}
-                  onChange={handleChange}
-                  required
-                  placeholder="your.email@example.com"
-                  className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500"
-                />
-              </div>
-
-              <div>
-                <label htmlFor="phone" className="block text-sm font-semibold mb-2">Phone Number *</label>
-                <input
-                  id="phone"
-                  type="tel"
-                  name="phone"
-                  value={formData.phone}
-                  onChange={handleChange}
-                  required
-                  placeholder="(555) 123-4567"
-                  className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500"
-                />
+              <div className="flex items-center gap-3 p-3 bg-red-100 rounded-lg">
+                <div className="w-4 h-4 bg-red-500 rounded"></div>
+                <span className="text-sm font-medium">Booked</span>
               </div>
             </div>
-          </div>
-
-          {/* Event Details Section */}
-          <div className="border-b pb-6">
-            <h2 className="text-2xl font-bold mb-4 flex items-center gap-2">
-              <Calendar className="w-5 h-5" />
-              Event Details
-            </h2>
             
-            <div className="space-y-4">
+            <div className="grid grid-cols-3 gap-2">
+              {availableDates.map((slot) => {
+                const date = new Date(slot.date);
+                return (
+                  <button
+                    key={slot.date}
+                    className={`p-3 rounded-lg font-semibold text-sm transition-all ${
+                      slot.available
+                        ? 'bg-green-100 text-green-900 hover:bg-green-200 cursor-pointer'
+                        : 'bg-red-100 text-red-900 cursor-not-allowed opacity-50'
+                    }`}
+                    disabled={!slot.available}
+                  >
+                    {date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div id="booking-form" data-section="booking-form" className="mx-auto px-4 md:px-6 py-16">
+        <div className="max-w-2xl mx-auto">
+          <h2 className="text-4xl font-extrabold mb-4 text-center">Booking Form</h2>
+          <p className="text-lg opacity-90 text-center mb-12">Tell us about your event and we'll customize the perfect package for you.</p>
+          
+          {submitted ? (
+            <div className="bg-green-100 border-2 border-green-500 rounded-lg p-8 text-center">
+              <CheckCircle className="w-12 h-12 text-green-600 mx-auto mb-4" />
+              <h3 className="text-2xl font-bold mb-2">Booking Request Submitted!</h3>
+              <p className="text-lg opacity-90">We'll contact you within 24 hours to confirm your event details and finalize your booking.</p>
+            </div>
+          ) : (
+            <form onSubmit={handleSubmit} className="space-y-6 bg-white bg-opacity-5 backdrop-blur-sm p-8 rounded-lg border border-white border-opacity-10">
               <div>
                 <label htmlFor="eventType" className="block text-sm font-semibold mb-2">Event Type *</label>
                 <select
                   id="eventType"
                   name="eventType"
                   value={formData.eventType}
-                  onChange={handleChange}
+                  onChange={handleInputChange}
                   required
-                  className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500"
+                  className="w-full px-4 py-2 rounded-lg bg-white bg-opacity-10 border border-white border-opacity-20 focus:outline-none focus:border-opacity-50 transition-all"
                 >
-                  <option value="">Select an event type</option>
+                  <option value="">Select event type</option>
                   <option value="birthday">Birthday Party</option>
-                  <option value="festival">Festival or Outdoor Event</option>
+                  <option value="festival">Festival/Outdoor Event</option>
                   <option value="corporate">Corporate Event</option>
-                  <option value="wedding">Wedding</option>
-                  <option value="school">School Event</option>
+                  <option value="wedding">Wedding/Reception</option>
                   <option value="other">Other</option>
                 </select>
               </div>
 
-              <div className="grid grid-cols-2 gap-4">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                 <div>
-                  <label htmlFor="eventDate" className="block text-sm font-semibold mb-2">Event Date *</label>
+                  <label htmlFor="eventDate" className="block text-sm font-semibold mb-2 flex items-center gap-2">
+                    <Calendar className="w-4 h-4" /> Event Date *
+                  </label>
                   <input
-                    id="eventDate"
                     type="date"
+                    id="eventDate"
                     name="eventDate"
                     value={formData.eventDate}
-                    onChange={handleChange}
+                    onChange={handleInputChange}
                     required
-                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500"
+                    className="w-full px-4 py-2 rounded-lg bg-white bg-opacity-10 border border-white border-opacity-20 focus:outline-none focus:border-opacity-50 transition-all"
                   />
                 </div>
 
                 <div>
-                  <label htmlFor="eventTime" className="block text-sm font-semibold mb-2 flex items-center gap-1">
-                    <Clock className="w-4 h-4" />
-                    Event Time *
+                  <label htmlFor="eventTime" className="block text-sm font-semibold mb-2 flex items-center gap-2">
+                    <Clock className="w-4 h-4" /> Event Time *
                   </label>
                   <input
-                    id="eventTime"
                     type="time"
+                    id="eventTime"
                     name="eventTime"
                     value={formData.eventTime}
-                    onChange={handleChange}
+                    onChange={handleInputChange}
                     required
-                    className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500"
+                    className="w-full px-4 py-2 rounded-lg bg-white bg-opacity-10 border border-white border-opacity-20 focus:outline-none focus:border-opacity-50 transition-all"
+                  />
+                </div>
+              </div>
+
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <div>
+                  <label htmlFor="guestCount" className="block text-sm font-semibold mb-2 flex items-center gap-2">
+                    <Users className="w-4 h-4" /> Expected Guest Count *
+                  </label>
+                  <input
+                    type="number"
+                    id="guestCount"
+                    name="guestCount"
+                    value={formData.guestCount}
+                    onChange={handleInputChange}
+                    placeholder="e.g., 30"
+                    required
+                    min="1"
+                    className="w-full px-4 py-2 rounded-lg bg-white bg-opacity-10 border border-white border-opacity-20 focus:outline-none focus:border-opacity-50 transition-all"
+                  />
+                </div>
+
+                <div>
+                  <label htmlFor="budget" className="block text-sm font-semibold mb-2 flex items-center gap-2">
+                    <Palette className="w-4 h-4" /> Budget (Optional)
+                  </label>
+                  <input
+                    type="text"
+                    id="budget"
+                    name="budget"
+                    value={formData.budget}
+                    onChange={handleInputChange}
+                    placeholder="e.g., $200-300"
+                    className="w-full px-4 py-2 rounded-lg bg-white bg-opacity-10 border border-white border-opacity-20 focus:outline-none focus:border-opacity-50 transition-all"
                   />
                 </div>
               </div>
 
               <div>
-                <label htmlFor="guestCount" className="block text-sm font-semibold mb-2 flex items-center gap-1">
-                  <Users className="w-4 h-4" />
-                  Expected Guest Count *
-                </label>
-                <input
-                  id="guestCount"
-                  type="number"
-                  name="guestCount"
-                  value={formData.guestCount}
-                  onChange={handleChange}
-                  required
-                  placeholder="e.g., 25"
-                  min="1"
-                  className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500"
+                <label htmlFor="notes" className="block text-sm font-semibold mb-2">Additional Notes</label>
+                <textarea
+                  id="notes"
+                  name="notes"
+                  value={formData.notes}
+                  onChange={handleInputChange}
+                  placeholder="Tell us about your vision, themes, special requests, etc."
+                  rows={4}
+                  className="w-full px-4 py-2 rounded-lg bg-white bg-opacity-10 border border-white border-opacity-20 focus:outline-none focus:border-opacity-50 transition-all resize-none"
                 />
               </div>
-            </div>
-          </div>
 
-          {/* Service Selection Section */}
-          <div className="border-b pb-6">
-            <h2 className="text-2xl font-bold mb-4 flex items-center gap-2">
-              <Palette className="w-5 h-5" />
-              Service Selection
-            </h2>
-            
-            <div>
-              <label htmlFor="serviceType" className="block text-sm font-semibold mb-2">What service are you interested in? *</label>
-              <select
-                id="serviceType"
-                name="serviceType"
-                value={formData.serviceType}
-                onChange={handleChange}
-                required
-                className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500"
+              <button
+                type="submit"
+                className="w-full bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white font-bold py-3 px-6 rounded-lg transition-all duration-300 transform hover:scale-105"
               >
-                <option value="">Select a service</option>
-                <option value="face-painting">Face Painting Only</option>
-                <option value="body-painting">Body Painting</option>
-                <option value="both">Face & Body Painting</option>
-                <option value="custom">Custom Design Package</option>
-                <option value="unsure">Not sure - need consultation</option>
-              </select>
-            </div>
-          </div>
-
-          {/* Additional Notes Section */}
-          <div>
-            <label htmlFor="additionalNotes" className="block text-sm font-semibold mb-2">Additional Notes or Special Requests</label>
-            <textarea
-              id="additionalNotes"
-              name="additionalNotes"
-              value={formData.additionalNotes}
-              onChange={handleChange}
-              placeholder="Tell us about your vision, theme, any special requests, allergies, or other details that would help us serve you better."
-              rows={5}
-              className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500"
-            />
-          </div>
-
-          <div className="pt-6">
-            <button
-              type="submit"
-              className="w-full px-6 py-3 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition-colors"
-            >
-              Submit Booking Request
-            </button>
-            <p className="text-xs text-gray-600 mt-3 text-center">We'll respond to your booking request within 24 hours with availability and pricing.</p>
-          </div>
-        </form>
+                Submit Booking Request
+              </button>
+              
+              <p className="text-sm opacity-75 text-center">* Required fields. We'll contact you shortly to confirm and discuss details.</p>
+            </form>
+          )}
+        </div>
       </div>
 
       <div id="footer-booking" data-section="footer-booking" className="mx-auto px-4 md:px-6">
@@ -329,4 +306,4 @@ export default function BookingPage() {
       </div>
     </ThemeProvider>
   );
-}
\ No newline at end of file
+}