diff --git a/src/app/booking/page.tsx b/src/app/booking/page.tsx
new file mode 100644
index 0000000..4fe4fbb
--- /dev/null
+++ b/src/app/booking/page.tsx
@@ -0,0 +1,318 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import ContactSplit from '@/components/sections/contact/ContactSplit';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
+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: "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" },
+  ];
+
+  const footerColumns = [
+    {
+      title: "Services",      items: [
+        { label: "Kids Party Face Painting", href: "/services" },
+        { label: "Festival Face Art", href: "/services" },
+        { label: "Corporate Events", href: "/services" },
+        { label: "Body Painting", href: "/services" },
+        { label: "Custom Designs", href: "/services" },
+      ],
+    },
+    {
+      title: "Company",      items: [
+        { label: "About Us", href: "/about" },
+        { label: "Gallery", href: "/gallery" },
+        { label: "Packages", href: "/packages" },
+        { label: "FAQ", href: "#faq" },
+        { label: "Contact", href: "/contact" },
+      ],
+    },
+    {
+      title: "Connect",      items: [
+        { label: "Instagram", href: "https://instagram.com" },
+        { label: "Facebook", href: "https://facebook.com" },
+        { label: "TikTok", href: "https://tiktok.com" },
+        { label: "Email", href: "mailto:paintasy@events.com" },
+        { label: "Phone", href: "tel:+15551234567" },
+      ],
+    },
+    {
+      title: "Service Areas",      items: [
+        { label: "Local Events", href: "/contact" },
+        { label: "Regional Coverage", href: "/contact" },
+        { label: "Book Now", href: "/booking" },
+        { label: "Get Quote", href: "/contact" },
+      ],
+    },
+  ];
+
+  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 (
+    <ThemeProvider
+      defaultButtonVariant="shift-hover"
+      defaultTextAnimation="background-highlight"
+      borderRadius="rounded"
+      contentWidth="compact"
+      sizing="large"
+      background="none"
+      cardStyle="gradient-bordered"
+      primaryButtonStyle="flat"
+      secondaryButtonStyle="radial-glow"
+      headingFontWeight="extrabold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleFullscreen
+          brandName="Paintasy"
+          navItems={navItems}
+          bottomLeftText="Creative Face & Body Art"
+          bottomRightText="paintasy@events.com"
+        />
+      </div>
+
+      <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">
+        <FooterSimple
+          columns={footerColumns}
+          bottomLeftText="© 2024 Paintasy Face and Body Art. All rights reserved."
+          bottomRightText="Professional Event Entertainment | Creative Services"
+          ariaLabel="Site footer with links"
+          containerClassName="gap-8 lg:gap-12"
+          columnsClassName="grid-cols-2 lg:grid-cols-4"
+          columnTitleClassName="font-extrabold text-lg"
+          columnItemClassName="hover:opacity-70 transition-opacity"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}
\ No newline at end of file