diff --git a/src/app/booking/page.tsx b/src/app/booking/page.tsx
new file mode 100644
index 0000000..76ecfe9
--- /dev/null
+++ b/src/app/booking/page.tsx
@@ -0,0 +1,82 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
+import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
+
+export default function BookingPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="hover-magnetic"
+        defaultTextAnimation="reveal-blur"
+        borderRadius="pill"
+        contentWidth="smallMedium"
+        sizing="mediumSizeLargeTitles"
+        background="blurBottom"
+        cardStyle="gradient-bordered"
+        primaryButtonStyle="diagonal-gradient"
+        secondaryButtonStyle="glass"
+        headingFontWeight="medium"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleCentered
+            navItems={[
+              { name: "Services", id: "services" },
+              { name: "Why Us", id: "why-us" },
+              { name: "Testimonials", id: "testimonials" },
+              { name: "Contact", id: "contact" },
+            ]}
+            button={{ text: "Book Now", href: "/booking" }}
+            brandName="Quick N’ Clean"
+          />
+        </div>
+
+        <div id="booking-form" data-section="booking-form">
+          <ContactCenter
+            tag="Schedule Now"
+            title="Book Your Mobile Detailing Appointment"
+            description="Provide your details below, and our team will contact you shortly to confirm your booking and arrange a convenient time for your luxury car detailing service."
+            background={{ variant: "radial-gradient" }}
+            useInvertedBackground={false}
+            inputPlaceholder="Enter your email"
+            buttonText="Confirm Booking"
+            termsText="By clicking Confirm Booking, you agree to our booking terms and conditions."
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+            <FooterBaseReveal
+            columns={[
+                {
+                title: "Services",                items: [
+                    { label: "Interior Deep Clean", href: "/#services" },
+                    { label: "Exterior Detail", href: "/#services" },
+                    { label: "Full Detail Package", href: "/#services" },
+                    { label: "Book Now", href: "/booking" },
+                ],
+                },
+                {
+                title: "Company",                items: [
+                    { label: "About Us", href: "/#why-us" },
+                    { label: "Testimonials", href: "/#testimonials" },
+                    { label: "Contact Us", href: "/booking" },
+                    { label: "Book a Service",          href: "/booking"}
+                ],
+                },
+                {
+                title: "Legal",                items: [
+                    { label: "Privacy Policy", href: "#" },
+                    { label: "Terms of Service", href: "#" },
+                ],
+                },
+            ]}
+            copyrightText="© {year} Quick N’ Clean Mobile Detailing. All rights reserved."
+            />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}
\ No newline at end of file
diff --git a/src/app/page.tsx b/src/app/page.tsx
index dd33fb8..30d723c 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -39,7 +39,7 @@ export default function LandingPage() {
           name: "Contact",          id: "contact"},
       ]}
       button={{
-        text: "Book Now",        href: "#contact"}}
+        text: "Book Now",        href: "/booking"}}
       brandName="Quick N’ Clean"
     />
   </div>
@@ -67,9 +67,9 @@ export default function LandingPage() {
       ]}
       buttons={[
         {
-          text: "Book Now",          href: "#contact"},
+          text: "Book Now",          href: "/booking"},
         {
-          text: "Get a Quote",          href: "#contact"},
+          text: "Get a Quote",          href: "/booking"},
       ]}
       avatars={[
         {
@@ -181,7 +181,7 @@ export default function LandingPage() {
       text="Ready for a Spotless Ride? Experience the Quick N’ Clean difference today. Book your mobile detail and enjoy a pristine vehicle without leaving your driveway."
       buttons={[
         {
-          text: "Book Your Detail Now",          href: "#contact"},
+          text: "Book Your Detail Now",          href: "/booking"},
       ]}
     />
   </div>
@@ -198,7 +198,7 @@ export default function LandingPage() {
             {
               label: "Full Detail Package",              href: "#services"},
             {
-              label: "Get a Quote",              href: "#contact"},
+              label: "Get a Quote",              href: "/booking"},
           ],
         },
         {
@@ -208,7 +208,9 @@ export default function LandingPage() {
             {
               label: "Testimonials",              href: "#testimonials"},
             {
-              label: "Contact Us",              href: "#contact"},
+              label: "Contact Us",              href: "/booking"},
+            {
+              label: "Book a Service",          href: "/booking"}
           ],
         },
         {
@@ -226,4 +228,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}
\ No newline at end of file