diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index adac84d..cd9610c 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -74,7 +74,7 @@ export function Header() {
           : "bg-transparent"
       }`}
     >
-      <div className="mx-auto flex h-16 max-w-6xl items-center justify-between px-6 sm:px-8">
+      <div className="flex h-16 items-center justify-between px-6 sm:px-10 lg:px-16">
         <Link href="/" className="group flex items-center gap-2.5">
           <div className="relative flex h-8 w-8 items-center justify-center">
             <div
diff --git a/src/components/ui/BookingModal.tsx b/src/components/ui/BookingModal.tsx
index 26767a3..3ceb209 100644
--- a/src/components/ui/BookingModal.tsx
+++ b/src/components/ui/BookingModal.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useState, useEffect, useCallback } from "react";
+import { createPortal } from "react-dom";
 import { X, Instagram, Send, CheckCircle, Phone } from "lucide-react";
 import { siteContent } from "@/data/content";
 
@@ -84,7 +85,7 @@ export function BookingModal({ open, onClose }: BookingModalProps) {
 
   if (!open) return null;
 
-  return (
+  return createPortal(
     <div
       className="modal-overlay fixed inset-0 z-50 flex items-center justify-center p-4"
       onClick={handleClose}
@@ -193,6 +194,7 @@ export function BookingModal({ open, onClose }: BookingModalProps) {
           </>
         )}
       </div>
-    </div>
+    </div>,
+    document.body
   );
 }