diff --git a/app/components/booking/generate-booking-pdf.tsx b/app/components/booking/generate-booking-pdf.tsx
index c468b681c..f75adf48f 100644
--- a/app/components/booking/generate-booking-pdf.tsx
+++ b/app/components/booking/generate-booking-pdf.tsx
@@ -1,17 +1,8 @@
 import { useRef, useState } from "react";
 import type { Asset, Booking } from "@prisma/client";
 import { Button } from "~/components/shared/button";
-import {
-  AlertDialog,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-} from "~/components/shared/modal";
 import { tw } from "~/utils/tw";
+import { Dialog, DialogPortal } from "../layout/dialog";
 import { Spinner } from "../shared/spinner";
 
 export const GenerateBookingPdf = ({
@@ -60,69 +51,83 @@ export const GenerateBookingPdf = ({
     }
   };
 
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+
+  const handleOpenDialog = () => {
+    setIsDialogOpen(true);
+  };
+
+  const handleCloseDialog = () => {
+    setIsDialogOpen(false);
+  };
+
   return (
     <>
-      <AlertDialog>
-        <AlertDialogTrigger asChild>
-          <Button
-            variant="link"
-            className="hidden justify-start rounded-sm px-2 py-1.5 text-left text-sm font-medium text-gray-700 outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 hover:bg-slate-100 hover:text-gray-700 md:block"
-            width="full"
-            name="generate pdf"
-            disabled={!totalAssets}
-          >
-            Generate overview PDF
-          </Button>
-        </AlertDialogTrigger>
-        <AlertDialogContent className=" hidden h-[90vh] w-[90vw] max-w-[90vw] md:flex md:flex-col">
-          <AlertDialogHeader>
-            <AlertDialogTitle>
-              Generate booking checklist for "{booking?.name}"
-            </AlertDialogTitle>
-            <AlertDialogDescription>
-              You can either preview or download the PDF.
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <div className="grow">
-            {/** Show spinner if no iframe */}
-            {!iframeLoaded && (
-              <div className="m-4  flex h-full flex-1 flex-col items-center justify-center text-center">
-                <Spinner />
-                <p className="mt-2">Generating PDF...</p>
-              </div>
-            )}
-            {totalAssets && (
-              <div className={tw(iframeLoaded ? "block" : "hidden", "h-full")}>
-                <iframe
-                  id="pdfPreview"
-                  ref={iframeRef}
-                  width="100%"
-                  height="100%"
-                  onLoad={handleIframeLoad}
-                  className="mt-4"
-                  src={url}
-                  title="Booking PDF"
-                  allowFullScreen={true}
-                />
-              </div>
-            )}
+      <Button
+        variant="link"
+        className="hidden justify-start rounded-sm px-2 py-1.5 text-left text-sm font-medium text-gray-700 outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 hover:bg-slate-100 hover:text-gray-700 md:block"
+        width="full"
+        name="generate pdf"
+        onClick={handleOpenDialog}
+        disabled={!totalAssets}
+      >
+        Generate overview PDF
+      </Button>
+      <DialogPortal>
+        <Dialog
+          open={isDialogOpen}
+          onClose={handleCloseDialog}
+          className="h-[90vh] w-full py-0 md:h-[calc(100vh-4rem)]  md:w-[90%]"
+          title={
+            <div>
+              <h3>Generate booking checklist for "{booking?.name}"</h3>
+              <p>You can either preview or download the PDF.</p>
+            </div>
+          }
+        >
+          <div className="flex h-full flex-col px-6">
+            <div className="grow">
+              {/** Show spinner if no iframe */}
+              {!iframeLoaded && (
+                <div className="m-4  flex h-full flex-1 flex-col items-center justify-center text-center">
+                  <Spinner />
+                  <p className="mt-2">Generating PDF...</p>
+                </div>
+              )}
+              {totalAssets && (
+                <div
+                  className={tw(iframeLoaded ? "block" : "hidden", "h-full")}
+                >
+                  <iframe
+                    id="pdfPreview"
+                    width="100%"
+                    height="100%"
+                    onLoad={handleIframeLoad}
+                    ref={iframeRef}
+                    src={url}
+                    title="Booking PDF"
+                    allowFullScreen={true}
+                  />
+                </div>
+              )}
+            </div>
+            <div className="flex justify-end gap-3 py-4">
+              <Button variant="secondary" onClick={handleCloseDialog}>
+                Cancel
+              </Button>
+              <Button
+                variant="secondary"
+                role="link"
+                disabled={!iframeLoaded}
+                icon="download"
+                onClick={handleDownload}
+              >
+                Download
+              </Button>
+            </div>
           </div>
-          <AlertDialogFooter className="mt-4">
-            <AlertDialogCancel asChild>
-              <Button variant="secondary">Cancel</Button>
-            </AlertDialogCancel>
-            <Button
-              to={url}
-              variant="secondary"
-              disabled={!iframeLoaded}
-              icon="download"
-              onClick={handleDownload}
-            >
-              Download
-            </Button>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
+        </Dialog>
+      </DialogPortal>
 
       {/* Only for mobile */}
       <Button
diff --git a/app/components/layout/dialog.tsx b/app/components/layout/dialog.tsx
index 5668a6f0f..d74d08354 100644
--- a/app/components/layout/dialog.tsx
+++ b/app/components/layout/dialog.tsx
@@ -1,4 +1,5 @@
 import type { ReactNode } from "react";
+import ReactDOM from "react-dom";
 import { tw } from "~/utils/tw";
 import { XIcon } from "../icons/library";
 import { Button } from "../shared/button";
@@ -42,3 +43,6 @@ export const Dialog = ({
       </dialog>
     </div>
   ) : null;
+
+export const DialogPortal = ({ children }: { children: React.ReactNode }) =>
+  ReactDOM.createPortal(children, document.body);
diff --git a/app/modules/booking/pdf-helpers.ts b/app/modules/booking/pdf-helpers.ts
index d6b50bebe..277422e5e 100644
--- a/app/modules/booking/pdf-helpers.ts
+++ b/app/modules/booking/pdf-helpers.ts
@@ -138,8 +138,6 @@ export const getBookingAssetsCustomHeader = ({
               display: flex;
               justify-content: space-between;
               align-items: center;
-              padding-bottom:20px;
-              border-bottom: 2px solid #bfbfbf;
             }
             .header-main img {
               height: 40px;
@@ -161,7 +159,7 @@ export const getBookingAssetsCustomHeader = ({
               gap:2px;
             } 
             .header-main .header-content {
-            color:  rgba(0, 0, 0, 0.6);
+              color:  rgba(0, 0, 0, 0.6);
             }
         </style>
         <div class="header">
@@ -169,7 +167,7 @@ export const getBookingAssetsCustomHeader = ({
             <img src="${base64Image}" alt="logo">
             <div class="header-content">
             <div class="text">${
-              booking?.name || ""
+              booking.name
             }</div><span> | ${new Date().toLocaleDateString()} | Page <span class="pageNumber"></span>/<span class="totalPages"></span></span>
             </div>
             </div>
diff --git a/app/routes/_layout+/bookings.$bookingId.generate-pdf.$fileName[.pdf].tsx b/app/routes/_layout+/bookings.$bookingId.generate-pdf.$fileName[.pdf].tsx
index 756dfb5ca..b53a00ac7 100644
--- a/app/routes/_layout+/bookings.$bookingId.generate-pdf.$fileName[.pdf].tsx
+++ b/app/routes/_layout+/bookings.$bookingId.generate-pdf.$fileName[.pdf].tsx
@@ -102,7 +102,7 @@ const styles = {
     borderBottom: "1px solid #bfbfbf",
   },
   infoLabel: {
-    fontWeight: "medium",
+    fontWeight: "500",
     minWidth: "150px",
     fontSize: "14px",
   },
@@ -120,8 +120,8 @@ const styles = {
     borderBottom: "1px solid #bfbfbf",
     padding: "10px",
     textAlign: "left",
-    fontSize: "14px",
-    fontWeight: "normal",
+    fontSize: "10px",
+    fontWeight: "500",
   },
   tableRow: {
     verticalAlign: "top",
@@ -145,12 +145,6 @@ const styles = {
     height: "55px",
     objectFit: "cover",
   },
-  assetImg: {
-    borderWidth: "1px",
-    borderRadius: "4px",
-    padding: "1px",
-    border: "1px solid #bfbfbf",
-  },
   checkbox: {
     display: "block",
     height: "20px",
@@ -221,7 +215,7 @@ const BookingPDFPreview = ({ pdfMeta }: { pdfMeta: PdfDbResult }) => {
                       `${SERVER_URL}/static/images/asset-placeholder.jpg`
                     }
                     alt="Asset"
-                    style={{ ...styles.img, ...styles.assetImg }}
+                    style={{ ...styles.img }}
                   />
                 </div>
               </td>