diff --git a/src/components/BookingSection.tsx b/src/components/BookingSection.tsx
index 5dfb736..37b5302 100644
--- a/src/components/BookingSection.tsx
+++ b/src/components/BookingSection.tsx
@@ -45,6 +45,7 @@ const BookingSection = () => {
   const [showCountryDropdown, setShowCountryDropdown] = useState(false);
   const countryDropdownRef = useRef<HTMLDivElement>(null);
   const countryInputRef = useRef<HTMLInputElement>(null);
+  const sectionRef = useRef<HTMLElement>(null);
   // Generate unique requestId on component mount
   useEffect(() => {
     const uniqueId = `REQ-${Date.now()}-${Math.floor(Math.random() * 10000)}`;
@@ -107,6 +108,13 @@ const BookingSection = () => {
     return () => document.removeEventListener('mousedown', handleClickOutside);
   }, [showCountryDropdown]);
 
+  // Ensure the booking section stays in view when status changes (e.g., after submit)
+  useEffect(() => {
+    if (status === "success" || status === "error") {
+      sectionRef.current?.scrollIntoView({ behavior: "smooth", block: "start" });
+    }
+  }, [status]);
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setErrors({});
@@ -141,7 +149,7 @@ const BookingSection = () => {
 
   if (status === "success") {
     return (
-      <section id="booking" className="section-padding bg-background">
+      <section id="booking" ref={sectionRef} className="section-padding bg-background scroll-mt-24">
         <motion.div
           initial={{ opacity: 0, scale: 0.9 }}
           animate={{ opacity: 1, scale: 1 }}
@@ -160,7 +168,7 @@ const BookingSection = () => {
   }
 
   return (
-    <section id="booking" className="section-padding bg-background">
+    <section id="booking" ref={sectionRef} className="section-padding bg-background scroll-mt-24">
       <div className="container mx-auto max-w-2xl">
         <motion.div
           initial={{ opacity: 0, y: 20 }}