diff --git a/src/app/booking/page.tsx b/src/app/booking/page.tsx
index 3bd567b..4fe4fbb 100644
--- a/src/app/booking/page.tsx
+++ b/src/app/booking/page.tsx
@@ -2,19 +2,30 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
-import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import ContactSplit from '@/components/sections/contact/ContactSplit';
 import FooterSimple from '@/components/sections/footer/FooterSimple';
-import { Calendar, Mail, Phone, MapPin } from 'lucide-react';
+import { useState } from 'react';
+import { Heart, Mail, Phone, MapPin, Facebook, Instagram, Twitter } from 'lucide-react';
 
 export default function BookingPage() {
+  const [formData, setFormData] = useState({
+    name: '',
+    email: '',
+    phone: '',
+    eventDate: '',
+    eventType: '',
+    guestCount: '',
+    message: '',
+  });
+
   const navItems = [
-    { name: "Home", id: "/" },
+    { name: "Home", id: "home" },
     { name: "Services", id: "services" },
     { name: "Gallery", id: "gallery" },
     { name: "Packages", id: "packages" },
     { name: "About", id: "about" },
-    { name: "Booking", id: "/booking" },
-    { name: "Contact", id: "/contact" },
+    { name: "Booking", id: "booking" },
+    { name: "Contact", id: "contact" },
   ];
 
   const footerColumns = [
@@ -55,9 +66,24 @@ export default function BookingPage() {
     },
   ];
 
-  const handleBookingSubmit = (data: Record<string, string>) => {
-    console.log("Booking inquiry:", data);
-    // Handle form submission
+  const handleFormChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
+    const { name, value } = e.target;
+    setFormData(prev => ({ ...prev, [name]: value }));
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    console.log('Booking form submitted:', formData);
+    alert('Thank you for your booking request! We will contact you soon.');
+    setFormData({
+      name: '',
+      email: '',
+      phone: '',
+      eventDate: '',
+      eventType: '',
+      guestCount: '',
+      message: '',
+    });
   };
 
   return (
@@ -82,58 +108,197 @@ export default function BookingPage() {
         />
       </div>
 
-      <div id="booking-form" data-section="booking-form" className="mx-auto px-4 md:px-6 lg:px-8 min-h-screen py-12 sm:py-16 lg:py-20">
-        <ContactSplitForm
-          title="Get Your Quote - Book Face Painting Services"
-          description="Ready to add color and magic to your event? Fill out our booking form and tell us about your special occasion. We'll review your request and get back to you within 24 hours with a personalized quote and availability."
-          imageSrc="http://img.b2bpic.net/free-photo/hand-holding-brush-close-up_23-2148966902.jpg?_wi=1"
-          imageAlt="Professional face painting artist at work"
-          mediaAnimation="blur-reveal"
-          mediaPosition="right"
-          useInvertedBackground={false}
-          inputs={[
-            {
-              name: "eventName",              type: "text",              placeholder: "Event Name (e.g., Sarah's Birthday)",              required: true,
-              className: "w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white text-gray-900 placeholder-gray-500"},
-            {
-              name: "eventDate",              type: "date",              placeholder: "Event Date",              required: true,
-              className: "w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white text-gray-900"},
-            {
-              name: "eventTime",              type: "time",              placeholder: "Event Time",              required: true,
-              className: "w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white text-gray-900"},
-            {
-              name: "eventLocation",              type: "text",              placeholder: "Event Location / Venue Name",              required: true,
-              className: "w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white text-gray-900 placeholder-gray-500"},
-            {
-              name: "eventType",              type: "text",              placeholder: "Event Type (Birthday, Festival, Corporate, Wedding, etc.)",              required: true,
-              className: "w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white text-gray-900 placeholder-gray-500"},
-            {
-              name: "guestCount",              type: "number",              placeholder: "Expected Number of Guests",              required: true,
-              className: "w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white text-gray-900 placeholder-gray-500"},
-            {
-              name: "contactName",              type: "text",              placeholder: "Your Full Name",              required: true,
-              className: "w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white text-gray-900 placeholder-gray-500"},
-            {
-              name: "contactEmail",              type: "email",              placeholder: "Your Email Address",              required: true,
-              className: "w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white text-gray-900 placeholder-gray-500"},
-            {
-              name: "contactPhone",              type: "tel",              placeholder: "Your Phone Number",              required: true,
-              className: "w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white text-gray-900 placeholder-gray-500"},
-          ]}
-          textarea={{
-            name: "specialRequests",            placeholder: "Tell us about your event! Share details about themes, design preferences, special requests, or any questions you have.",            rows: 5,
-            required: false,
-            className: "w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white text-gray-900 placeholder-gray-500 resize-none"}}
-          buttonText="Request Quote"
-          onSubmit={handleBookingSubmit}
-          ariaLabel="Booking request form"
-          containerClassName="gap-8 lg:gap-12"
-          titleClassName="text-3xl sm:text-4xl lg:text-5xl font-extrabold"
-          descriptionClassName="text-base sm:text-lg opacity-90 max-w-2xl"
-          formCardClassName="bg-gradient-to-br from-purple-50 via-pink-50 to-blue-50 rounded-2xl p-6 sm:p-8 border-2 border-purple-200 shadow-lg"
-          buttonClassName="bg-gradient-to-r from-purple-500 via-pink-500 to-blue-500 hover:from-purple-600 hover:via-pink-600 hover:to-blue-600 text-white font-bold py-3 px-6 rounded-lg transition-all duration-300 transform hover:scale-105 w-full sm:w-auto"
-          buttonTextClassName="text-white font-extrabold"
-        />
+      <div id="booking-hero" data-section="booking-hero" className="mx-auto px-4 md:px-6 lg:px-8 py-16 md:py-24 lg:py-32">
+        <div className="max-w-4xl mx-auto">
+          <h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold mb-6 text-center bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500 bg-clip-text text-transparent">
+            Book Your Event
+          </h1>
+          <p className="text-lg md:text-xl text-center opacity-80 mb-12 max-w-2xl mx-auto">
+            Request a quote for professional face painting and body art services. Fill out the form below and we'll get back to you with availability and pricing.
+          </p>
+        </div>
+      </div>
+
+      <div id="booking-form" data-section="booking-form" className="mx-auto px-4 md:px-6 lg:px-8 py-12 md:py-16 lg:py-20">
+        <div className="max-w-2xl mx-auto">
+          <div className="rounded-lg p-8 md:p-12 bg-gradient-to-br from-pink-50 via-purple-50 to-indigo-50 border-2 border-purple-200 shadow-lg">
+            <form onSubmit={handleSubmit} className="space-y-6">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <div>
+                  <label className="block text-sm font-semibold mb-2 text-gray-800">Full Name *</label>
+                  <input
+                    type="text"
+                    name="name"
+                    value={formData.name}
+                    onChange={handleFormChange}
+                    required
+                    placeholder="Your name"
+                    className="w-full px-4 py-3 rounded-lg border-2 border-purple-300 focus:border-purple-500 focus:outline-none transition-colors bg-white text-gray-800 placeholder-gray-500"
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm font-semibold mb-2 text-gray-800">Email Address *</label>
+                  <input
+                    type="email"
+                    name="email"
+                    value={formData.email}
+                    onChange={handleFormChange}
+                    required
+                    placeholder="your@email.com"
+                    className="w-full px-4 py-3 rounded-lg border-2 border-purple-300 focus:border-purple-500 focus:outline-none transition-colors bg-white text-gray-800 placeholder-gray-500"
+                  />
+                </div>
+              </div>
+
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <div>
+                  <label className="block text-sm font-semibold mb-2 text-gray-800">Phone Number *</label>
+                  <input
+                    type="tel"
+                    name="phone"
+                    value={formData.phone}
+                    onChange={handleFormChange}
+                    required
+                    placeholder="(555) 123-4567"
+                    className="w-full px-4 py-3 rounded-lg border-2 border-purple-300 focus:border-purple-500 focus:outline-none transition-colors bg-white text-gray-800 placeholder-gray-500"
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm font-semibold mb-2 text-gray-800">Event Date *</label>
+                  <input
+                    type="date"
+                    name="eventDate"
+                    value={formData.eventDate}
+                    onChange={handleFormChange}
+                    required
+                    className="w-full px-4 py-3 rounded-lg border-2 border-purple-300 focus:border-purple-500 focus:outline-none transition-colors bg-white text-gray-800"
+                  />
+                </div>
+              </div>
+
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <div>
+                  <label className="block text-sm font-semibold mb-2 text-gray-800">Event Type *</label>
+                  <select
+                    name="eventType"
+                    value={formData.eventType}
+                    onChange={handleFormChange}
+                    required
+                    className="w-full px-4 py-3 rounded-lg border-2 border-purple-300 focus:border-purple-500 focus:outline-none transition-colors bg-white text-gray-800"
+                  >
+                    <option value="">Select event type</option>
+                    <option value="birthday-party">Birthday Party</option>
+                    <option value="festival">Festival/Outdoor Event</option>
+                    <option value="corporate">Corporate Event</option>
+                    <option value="wedding">Wedding/Reception</option>
+                    <option value="school-event">School Event</option>
+                    <option value="other">Other</option>
+                  </select>
+                </div>
+                <div>
+                  <label className="block text-sm font-semibold mb-2 text-gray-800">Number of Guests *</label>
+                  <input
+                    type="number"
+                    name="guestCount"
+                    value={formData.guestCount}
+                    onChange={handleFormChange}
+                    required
+                    placeholder="Approximate guest count"
+                    min="1"
+                    className="w-full px-4 py-3 rounded-lg border-2 border-purple-300 focus:border-purple-500 focus:outline-none transition-colors bg-white text-gray-800 placeholder-gray-500"
+                  />
+                </div>
+              </div>
+
+              <div>
+                <label className="block text-sm font-semibold mb-2 text-gray-800">Message / Special Requests</label>
+                <textarea
+                  name="message"
+                  value={formData.message}
+                  onChange={handleFormChange}
+                  placeholder="Tell us about your event and any special requests..."
+                  rows={5}
+                  className="w-full px-4 py-3 rounded-lg border-2 border-purple-300 focus:border-purple-500 focus:outline-none transition-colors bg-white text-gray-800 placeholder-gray-500 resize-none"
+                />
+              </div>
+
+              <button
+                type="submit"
+                className="w-full bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500 hover:from-pink-600 hover:via-purple-600 hover:to-indigo-600 text-white font-bold py-3 px-6 rounded-lg transition-all duration-300 transform hover:scale-105 shadow-lg text-lg"
+              >
+                Get Your Quote
+              </button>
+            </form>
+          </div>
+        </div>
+      </div>
+
+      <div id="booking-info" data-section="booking-info" className="mx-auto px-4 md:px-6 lg:px-8 py-12 md:py-16 lg:py-20 bg-gradient-to-b from-transparent via-purple-50 to-transparent">
+        <div className="max-w-6xl mx-auto">
+          <h2 className="text-3xl md:text-4xl lg:text-5xl font-extrabold text-center mb-12">Get In Touch</h2>
+          
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+            <div className="rounded-lg p-8 bg-white border-2 border-pink-200 shadow-lg text-center hover:shadow-xl transition-shadow">
+              <Phone className="w-12 h-12 mx-auto mb-4 text-pink-500" />
+              <h3 className="text-xl font-bold mb-2">Phone</h3>
+              <p className="text-gray-700 mb-4">Call us for quick inquiries</p>
+              <a href="tel:+15551234567" className="text-pink-500 font-semibold hover:text-pink-700 transition-colors">
+                (555) 123-4567
+              </a>
+            </div>
+
+            <div className="rounded-lg p-8 bg-white border-2 border-purple-200 shadow-lg text-center hover:shadow-xl transition-shadow">
+              <Mail className="w-12 h-12 mx-auto mb-4 text-purple-500" />
+              <h3 className="text-xl font-bold mb-2">Email</h3>
+              <p className="text-gray-700 mb-4">Send us your booking details</p>
+              <a href="mailto:paintasy@events.com" className="text-purple-500 font-semibold hover:text-purple-700 transition-colors">
+                paintasy@events.com
+              </a>
+            </div>
+
+            <div className="rounded-lg p-8 bg-white border-2 border-indigo-200 shadow-lg text-center hover:shadow-xl transition-shadow">
+              <MapPin className="w-12 h-12 mx-auto mb-4 text-indigo-500" />
+              <h3 className="text-xl font-bold mb-2">Location</h3>
+              <p className="text-gray-700 mb-4">We service events in your area</p>
+              <p className="text-indigo-500 font-semibold">
+                Regional Coverage Available
+              </p>
+            </div>
+          </div>
+
+          <div className="mt-16 text-center">
+            <h3 className="text-2xl font-bold mb-6">Follow Us On Social Media</h3>
+            <div className="flex justify-center gap-6 flex-wrap">
+              <a
+                href="https://facebook.com"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center gap-2 px-6 py-3 rounded-lg bg-blue-500 text-white font-semibold hover:bg-blue-600 transition-colors shadow-lg hover:shadow-xl"
+              >
+                <Facebook className="w-5 h-5" />
+                Facebook
+              </a>
+              <a
+                href="https://instagram.com"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center gap-2 px-6 py-3 rounded-lg bg-gradient-to-r from-pink-500 to-purple-500 text-white font-semibold hover:from-pink-600 hover:to-purple-600 transition-colors shadow-lg hover:shadow-xl"
+              >
+                <Instagram className="w-5 h-5" />
+                Instagram
+              </a>
+              <a
+                href="https://tiktok.com"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center gap-2 px-6 py-3 rounded-lg bg-gray-900 text-white font-semibold hover:bg-gray-800 transition-colors shadow-lg hover:shadow-xl"
+              >
+                <Twitter className="w-5 h-5" />
+                TikTok
+              </a>
+            </div>
+          </div>
+        </div>
       </div>
 
       <div id="footer-booking" data-section="footer-booking" className="mx-auto px-4 md:px-6 lg:px-8">