diff --git a/README.md b/README.md
index 24e1046fc..ede88954f 100644
--- a/README.md
+++ b/README.md
@@ -136,7 +136,7 @@ We would like to thank all our contributors and users for their support and feed
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/VikramNagwal"><img src="https://avatars.githubusercontent.com/u/123088024?v=4?s=100" width="100px;" alt="Vikram"/><br /><sub><b>Vikram</b></sub></a><br /><a href="#code-VikramNagwal" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/ugoconsonni"><img src="https://avatars.githubusercontent.com/u/13661702?v=4?s=100" width="100px;" alt="ugoconsonni"/><br /><sub><b>ugoconsonni</b></sub></a><br /><a href="#code-ugoconsonni" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/daniel-mutwiri"><img src="https://avatars.githubusercontent.com/u/8936960?v=4?s=100" width="100px;" alt="Daniel Mutwiri"/><br /><sub><b>Daniel Mutwiri</b></sub></a><br /><a href="#code-daniel-mutwiri" title="Code">💻</a></td>
-      <td align="center" valign="top" width="14.28%"><a href="https://github.com/Zathiel"><img src="https://avatars.githubusercontent.com/u/26553418?v=4?s=100" width="100px;" alt="Zathiel"/><br /><sub><b>Zathiel</b></sub></a><br /><a href="#code-Zathiel" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/Zathiel"><img src="https://avatars.githubusercontent.com/u/26553418?v=4?s=100" width="100px;" alt="Zathiel"/><br /><sub><b>Zathiel</b></sub></a><br /><a href="#code-Zathiel" title="Code">💻</a><a href="#security-Zathiel" title="Security">🛡️</a></td>
     </tr>
   </tbody>
 </table>
diff --git a/apps/OpenSign/src/components/pdf/PdfHeader.js b/apps/OpenSign/src/components/pdf/PdfHeader.js
index ad230f29d..419983798 100644
--- a/apps/OpenSign/src/components/pdf/PdfHeader.js
+++ b/apps/OpenSign/src/components/pdf/PdfHeader.js
@@ -1,15 +1,15 @@
 import React, { useState } from "react";
 import PrevNext from "./PrevNext";
-import printModule from "print-js";
-import { getBase64FromUrl } from "../../constant/Utils";
-import { saveAs } from "file-saver";
+import {
+  handleDownloadCertificate,
+  handleDownloadPdf,
+  handleToPrint
+} from "../../constant/Utils";
 import "../../styles/signature.css";
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
 import { useNavigate } from "react-router-dom";
 import { themeColor } from "../../constant/const";
-import axios from "axios";
 import ModalUi from "../../primitives/ModalUi";
-import { appInfo } from "../../constant/appinfo";
 
 function Header({
   isPdfRequestFiles,
@@ -59,130 +59,6 @@ function Header({
     setIsDecline(currentDecline);
   };
 
-  //function for print digital sign pdf
-  const handleToPrint = async (event) => {
-    event.preventDefault();
-    setIsDownloading("pdf");
-    try {
-      // const url = await Parse.Cloud.run("getsignedurl", { url: pdfUrl });
-      const axiosRes = await axios.post(
-        `${appInfo.baseUrl}/functions/getsignedurl`,
-        { url: pdfUrl },
-        {
-          headers: {
-            "content-type": "Application/json",
-            "X-Parse-Application-Id": appInfo.appId,
-            "X-Parse-Session-Token": localStorage.getItem("accesstoken")
-          }
-        }
-      );
-      const url = axiosRes.data.result;
-      const pdf = await getBase64FromUrl(url);
-      const isAndroidDevice = navigator.userAgent.match(/Android/i);
-      const isAppleDevice =
-        (/iPad|iPhone|iPod/.test(navigator.platform) ||
-          (navigator.platform === "MacIntel" &&
-            navigator.maxTouchPoints > 1)) &&
-        !window.MSStream;
-      if (isAndroidDevice || isAppleDevice) {
-        const byteArray = Uint8Array.from(
-          atob(pdf)
-            .split("")
-            .map((char) => char.charCodeAt(0))
-        );
-        const blob = new Blob([byteArray], { type: "application/pdf" });
-        const blobUrl = URL.createObjectURL(blob);
-        window.open(blobUrl, "_blank");
-        setIsDownloading("");
-      } else {
-        printModule({ printable: pdf, type: "pdf", base64: true });
-        setIsDownloading("");
-      }
-    } catch (err) {
-      setIsDownloading("");
-      console.log("err in getsignedurl", err);
-      alert("something went wrong, please try again later.");
-    }
-  };
-
-  //handle download signed pdf
-  const handleDownloadPdf = async () => {
-    setIsDownloading("pdf");
-    const pdfName = pdfDetails[0] && pdfDetails[0].Name;
-    try {
-      // const url = await Parse.Cloud.run("getsignedurl", { url: pdfUrl });
-      const axiosRes = await axios.post(
-        `${appInfo.baseUrl}/functions/getsignedurl`,
-        { url: pdfUrl },
-        {
-          headers: {
-            "content-type": "Application/json",
-            "X-Parse-Application-Id": appInfo.appId,
-            "X-Parse-Session-Token": localStorage.getItem("accesstoken")
-          }
-        }
-      );
-      const url = axiosRes.data.result;
-      saveAs(url, `${sanitizeFileName(pdfName)}_signed_by_OpenSign™.pdf`);
-      setIsDownloading("");
-    } catch (err) {
-      console.log("err in getsignedurl", err);
-      setIsDownloading("");
-      alert("something went wrong, please try again later.");
-    }
-  };
-
-  const sanitizeFileName = (pdfName) => {
-    // Replace spaces with underscore
-    return pdfName.replace(/ /g, "_");
-  };
-
-  //handle download signed pdf
-  const handleDownloadCertificate = async () => {
-    if (pdfDetails?.length > 0 && pdfDetails[0]?.CertificateUrl) {
-      try {
-        await fetch(pdfDetails[0] && pdfDetails[0]?.CertificateUrl);
-        const certificateUrl = pdfDetails[0] && pdfDetails[0]?.CertificateUrl;
-        saveAs(certificateUrl, `Certificate_signed_by_OpenSign™.pdf`);
-      } catch (err) {
-        console.log("err in download in certificate", err);
-      }
-    } else {
-      setIsDownloading("certificate");
-      try {
-        const data = {
-          docId: pdfDetails[0]?.objectId
-        };
-        const docDetails = await axios.post(
-          `${localStorage.getItem("baseUrl")}functions/getDocument`,
-          data,
-          {
-            headers: {
-              "Content-Type": "application/json",
-              "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
-              sessionToken: localStorage.getItem("accesstoken")
-            }
-          }
-        );
-        if (docDetails.data && docDetails.data.result) {
-          const doc = docDetails.data.result;
-          if (doc?.CertificateUrl) {
-            await fetch(doc?.CertificateUrl);
-            const certificateUrl = doc?.CertificateUrl;
-            saveAs(certificateUrl, `Certificate_signed_by_OpenSign™.pdf`);
-            setIsDownloading("");
-          } else {
-            setIsDownloading("certificate");
-          }
-        }
-      } catch (err) {
-        setIsDownloading("");
-        console.log("err in download in certificate", err);
-        alert("something went wrong, please try again later.");
-      }
-    }
-  };
-
   return (
     <div style={{ padding: "5px 0px 5px 0px" }} className="mobileHead">
       {isMobile && isShowHeader ? (
@@ -255,7 +131,9 @@ function Header({
                   >
                     <DropdownMenu.Item
                       className="DropdownMenuItem"
-                      onClick={() => handleDownloadPdf()}
+                      onClick={() =>
+                        handleDownloadPdf(pdfDetails, pdfUrl, setIsDownloading)
+                      }
                     >
                       <div
                         style={{
@@ -274,7 +152,12 @@ function Header({
                     {isCompleted && (
                       <DropdownMenu.Item
                         className="DropdownMenuItem"
-                        onClick={() => handleDownloadCertificate()}
+                        onClick={() =>
+                          handleDownloadCertificate(
+                            pdfDetails,
+                            setIsDownloading
+                          )
+                        }
                       >
                         <div
                           style={{
@@ -313,7 +196,9 @@ function Header({
                     )}
                     <DropdownMenu.Item
                       className="DropdownMenuItem"
-                      onClick={handleToPrint}
+                      onClick={(e) =>
+                        handleToPrint(e, pdfUrl, setIsDownloading)
+                      }
                     >
                       <div
                         style={{
@@ -395,7 +280,13 @@ function Header({
                         >
                           <DropdownMenu.Item
                             className="flex flex-row justify-center items-center text-[13px] focus:outline-none cursor-pointer"
-                            onClick={() => handleDownloadPdf()}
+                            onClick={() =>
+                              handleDownloadPdf(
+                                pdfDetails,
+                                pdfUrl,
+                                setIsDownloading
+                              )
+                            }
                           >
                             <i
                               className="fa fa-arrow-down mr-[5px]"
@@ -482,7 +373,9 @@ function Header({
                 {isCompleted && (
                   <button
                     type="button"
-                    onClick={() => handleDownloadCertificate()}
+                    onClick={() =>
+                      handleDownloadCertificate(pdfDetails, setIsDownloading)
+                    }
                     className="flex flex-row items-center shadow rounded-[3px] py-[3px] px-[11px] text-white font-[500] text-[13px] mr-[5px] bg-[#08bc66]"
                   >
                     <i
@@ -494,7 +387,7 @@ function Header({
                 )}
 
                 <button
-                  onClick={handleToPrint}
+                  onClick={(e) => handleToPrint(e, pdfUrl, setIsDownloading)}
                   type="button"
                   className="flex flex-row items-center  shadow rounded-[3px] py-[3px] px-[11px] text-white font-[500] text-[13px] mr-[5px] bg-[#188ae2]"
                 >
@@ -505,7 +398,9 @@ function Header({
                 <button
                   type="button"
                   className="flex flex-row items-center shadow rounded-[3px] py-[3px] px-[11px] text-white font-[500] text-[13px] mr-[5px] bg-[#f14343]"
-                  onClick={() => handleDownloadPdf()}
+                  onClick={() =>
+                    handleDownloadPdf(pdfDetails, pdfUrl, setIsDownloading)
+                  }
                 >
                   <i className="fa fa-download py-[3px]" aria-hidden="true"></i>
                   <span className="hidden lg:block ml-1">Download</span>
@@ -554,7 +449,13 @@ function Header({
                         >
                           <DropdownMenu.Item
                             className="flex flex-row justify-center items-center text-[13px] focus:outline-none cursor-pointer"
-                            onClick={() => handleDownloadPdf()}
+                            onClick={() =>
+                              handleDownloadPdf(
+                                pdfDetails,
+                                pdfUrl,
+                                setIsDownloading
+                              )
+                            }
                           >
                             <i
                               className="fa fa-arrow-down mr-[5px]"
@@ -574,7 +475,9 @@ function Header({
               {isCompleted && (
                 <button
                   type="button"
-                  onClick={() => handleDownloadCertificate()}
+                  onClick={() =>
+                    handleDownloadCertificate(pdfDetails, setIsDownloading)
+                  }
                   className="flex flex-row items-center shadow rounded-[3px] py-[3px] px-[11px] text-white font-[500] text-[13px] mr-[5px] bg-[#08bc66]"
                 >
                   <i
@@ -585,7 +488,7 @@ function Header({
                 </button>
               )}
               <button
-                onClick={handleToPrint}
+                onClick={(e) => handleToPrint(e, pdfUrl, setIsDownloading)}
                 type="button"
                 className="flex flex-row items-center shadow rounded-[3px] py-[3px] px-[11px] text-white font-[500] text-[13px] mr-[5px] bg-[#188ae2]"
               >
@@ -595,7 +498,9 @@ function Header({
               <button
                 type="button"
                 className="flex flex-row items-center shadow rounded-[3px] py-[3px] px-[11px] text-white font-[500] text-[13px] mr-[5px] bg-[#f14343]"
-                onClick={() => handleDownloadPdf()}
+                onClick={() =>
+                  handleDownloadPdf(pdfDetails, pdfUrl, setIsDownloading)
+                }
               >
                 <i className="fa fa-download py-[3px]" aria-hidden="true"></i>
                 <span className="hidden lg:block ml-1">Download</span>
diff --git a/apps/OpenSign/src/constant/Utils.js b/apps/OpenSign/src/constant/Utils.js
index 9d310dd82..147d360d2 100644
--- a/apps/OpenSign/src/constant/Utils.js
+++ b/apps/OpenSign/src/constant/Utils.js
@@ -4,6 +4,9 @@ import { isEnableSubscription, themeColor } from "./const";
 import React from "react";
 import { rgb } from "pdf-lib";
 import Parse from "parse";
+import { appInfo } from "./appinfo";
+import { saveAs } from "file-saver";
+import printModule from "print-js";
 
 export const isMobile = window.innerWidth < 767;
 export const textInputWidget = "text input";
@@ -1351,8 +1354,8 @@ export const multiSignEmbed = async (
           position.type === radioButtonWidget
             ? 10
             : position.type === "checkbox"
-            ? 10
-            : newUpdateHeight;
+              ? 10
+              : newUpdateHeight;
         const newHeight = ind ? (ind > 0 ? widgetHeight : 0) : widgetHeight;
 
         if (signyourself) {
@@ -2030,7 +2033,133 @@ export const handleSendOTP = async (email) => {
     alert(error.message);
   }
 };
+//handle download signed pdf
+export const handleDownloadPdf = async (
+  pdfDetails,
+  pdfUrl,
+  setIsDownloading
+) => {
+  const pdfName = pdfDetails[0] && pdfDetails[0].Name;
+  setIsDownloading("pdf");
+  try {
+    // const url = await Parse.Cloud.run("getsignedurl", { url: pdfUrl });
+    const axiosRes = await axios.post(
+      `${appInfo.baseUrl}/functions/getsignedurl`,
+      { url: pdfUrl },
+      {
+        headers: {
+          "content-type": "Application/json",
+          "X-Parse-Application-Id": appInfo.appId,
+          "X-Parse-Session-Token": localStorage.getItem("accesstoken")
+        }
+      }
+    );
+    const url = axiosRes.data.result;
+    saveAs(url, `${sanitizeFileName(pdfName)}_signed_by_OpenSign™.pdf`);
+    setIsDownloading("");
+  } catch (err) {
+    console.log("err in getsignedurl", err);
+    setIsDownloading("");
+    alert("something went wrong, please try again later.");
+  }
+};
 
+export const sanitizeFileName = (pdfName) => {
+  // Replace spaces with underscore
+  return pdfName.replace(/ /g, "_");
+};
+//function for print digital sign pdf
+export const handleToPrint = async (event, pdfUrl, setIsDownloading) => {
+  event.preventDefault();
+  setIsDownloading("pdf");
+  try {
+    // const url = await Parse.Cloud.run("getsignedurl", { url: pdfUrl });
+    const axiosRes = await axios.post(
+      `${appInfo.baseUrl}/functions/getsignedurl`,
+      { url: pdfUrl },
+      {
+        headers: {
+          "content-type": "Application/json",
+          "X-Parse-Application-Id": appInfo.appId,
+          "X-Parse-Session-Token": localStorage.getItem("accesstoken")
+        }
+      }
+    );
+    const url = axiosRes.data.result;
+    const pdf = await getBase64FromUrl(url);
+    const isAndroidDevice = navigator.userAgent.match(/Android/i);
+    const isAppleDevice =
+      (/iPad|iPhone|iPod/.test(navigator.platform) ||
+        (navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1)) &&
+      !window.MSStream;
+    if (isAndroidDevice || isAppleDevice) {
+      const byteArray = Uint8Array.from(
+        atob(pdf)
+          .split("")
+          .map((char) => char.charCodeAt(0))
+      );
+      const blob = new Blob([byteArray], { type: "application/pdf" });
+      const blobUrl = URL.createObjectURL(blob);
+      window.open(blobUrl, "_blank");
+      setIsDownloading("");
+    } else {
+      printModule({ printable: pdf, type: "pdf", base64: true });
+      setIsDownloading("");
+    }
+  } catch (err) {
+    setIsDownloading("");
+    console.log("err in getsignedurl", err);
+    alert("something went wrong, please try again later.");
+  }
+};
+
+//handle download signed pdf
+export const handleDownloadCertificate = async (
+  pdfDetails,
+  setIsDownloading
+) => {
+  if (pdfDetails?.length > 0 && pdfDetails[0]?.CertificateUrl) {
+    try {
+      await fetch(pdfDetails[0] && pdfDetails[0]?.CertificateUrl);
+      const certificateUrl = pdfDetails[0] && pdfDetails[0]?.CertificateUrl;
+      saveAs(certificateUrl, `Certificate_signed_by_OpenSign™.pdf`);
+    } catch (err) {
+      console.log("err in download in certificate", err);
+    }
+  } else {
+    setIsDownloading("certificate");
+    try {
+      const data = {
+        docId: pdfDetails[0]?.objectId
+      };
+      const docDetails = await axios.post(
+        `${localStorage.getItem("baseUrl")}functions/getDocument`,
+        data,
+        {
+          headers: {
+            "Content-Type": "application/json",
+            "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
+            sessionToken: localStorage.getItem("accesstoken")
+          }
+        }
+      );
+      if (docDetails.data && docDetails.data.result) {
+        const doc = docDetails.data.result;
+        if (doc?.CertificateUrl) {
+          await fetch(doc?.CertificateUrl);
+          const certificateUrl = doc?.CertificateUrl;
+          saveAs(certificateUrl, `Certificate_signed_by_OpenSign™.pdf`);
+          setIsDownloading("");
+        } else {
+          setIsDownloading("certificate");
+        }
+      }
+    } catch (err) {
+      console.log("err in download in certificate", err);
+      alert("something went wrong, please try again later.");
+    }
+  }
+};
 export async function findContact(value) {
   try {
     const currentUser = Parse.User.current();
diff --git a/apps/OpenSign/src/pages/PdfRequestFiles.js b/apps/OpenSign/src/pages/PdfRequestFiles.js
index 2b3a3f976..505b4b493 100644
--- a/apps/OpenSign/src/pages/PdfRequestFiles.js
+++ b/apps/OpenSign/src/pages/PdfRequestFiles.js
@@ -29,7 +29,10 @@ import {
   convertPdfArrayBuffer,
   contractUsers,
   handleSendOTP,
-  contactBook
+  contactBook,
+  handleDownloadPdf,
+  handleToPrint,
+  handleDownloadCertificate
 } from "../constant/Utils";
 import Loader from "../primitives/LoaderWithMsg";
 import HandleError from "../primitives/HandleError";
@@ -92,6 +95,7 @@ function PdfRequestFiles() {
   const [expiredDate, setExpiredDate] = useState("");
   const [signerUserId, setSignerUserId] = useState();
   const [isDontShow, setIsDontShow] = useState(false);
+  const [isDownloading, setIsDownloading] = useState("");
   const [defaultSignAlert, setDefaultSignAlert] = useState({
     isShow: false,
     alertMessage: ""
@@ -1567,38 +1571,104 @@ function PdfRequestFiles() {
                     handleClose={() => {
                       setIsCompleted((prev) => ({ ...prev, isModal: false }));
                     }}
+                    reduceWidth={!isCompleted?.message}
                   >
                     <div style={{ height: "100%", padding: 20 }}>
-                      <p>
-                        {" "}
-                        {isCompleted?.message ||
-                          "This document has been signed by all Signers."}
-                      </p>
-
-                      <div
-                        style={{
-                          height: "1px",
-                          backgroundColor: "#9f9f9f",
-                          width: "100%",
-                          marginTop: "15px",
-                          marginBottom: "15px"
-                        }}
-                      ></div>
-                      <button
-                        type="button"
-                        className="finishBtn cancelBtn"
-                        onClick={() => {
-                          setIsCompleted((prev) => ({
-                            ...prev,
-                            isModal: false
-                          }));
-                        }}
-                      >
-                        Close
-                      </button>
+                      {isCompleted?.message ? (
+                        <p>{isCompleted?.message}</p>
+                      ) : (
+                        <div className="px-[15px]">
+                          <span>
+                            Congratulations! 🎉 This document has been
+                            successfully signed by all participants!
+                          </span>
+                        </div>
+                      )}
+                      {!isCompleted?.message && (
+                        <div className="flex mt-4 gap-1 px-[15px]">
+                          <button
+                            type="button"
+                            onClick={() =>
+                              handleDownloadCertificate(
+                                pdfDetails,
+                                setIsDownloading
+                              )
+                            }
+                            className="flex flex-row items-center shadow rounded-[3px] py-[3px] px-[11px] text-white font-[500] text-[13px] mr-[5px] bg-[#08bc66]"
+                          >
+                            <i
+                              className="fa-solid fa-award py-[3px]"
+                              aria-hidden="true"
+                            ></i>
+                            <span className="hidden lg:block ml-1">
+                              Certificate
+                            </span>
+                          </button>
+                          <button
+                            onClick={(e) =>
+                              handleToPrint(e, pdfUrl, setIsDownloading)
+                            }
+                            type="button"
+                            className="flex flex-row items-center  shadow rounded-[3px] py-[3px] px-[11px] text-white font-[500] text-[13px] mr-[5px] bg-[#188ae2]"
+                          >
+                            <i
+                              className="fa fa-print py-[3px]"
+                              aria-hidden="true"
+                            ></i>
+                            <span className="hidden lg:block ml-1">Print</span>
+                          </button>
+                          <button
+                            type="button"
+                            className="flex flex-row items-center shadow rounded-[3px] py-[3px] px-[11px] text-white font-[500] text-[13px] mr-[5px] bg-[#f14343]"
+                            onClick={() =>
+                              handleDownloadPdf(
+                                pdfDetails,
+                                pdfUrl,
+                                setIsDownloading
+                              )
+                            }
+                          >
+                            <i
+                              className="fa fa-download py-[3px]"
+                              aria-hidden="true"
+                            ></i>
+                            <span className="hidden lg:block ml-1">
+                              Download
+                            </span>
+                          </button>
+                        </div>
+                      )}
+                    </div>
+                  </ModalUi>
+                  {isDownloading === "pdf" && (
+                    <div className="fixed z-[1000] inset-0 flex justify-center items-center bg-black bg-opacity-30">
+                      <div
+                        style={{ fontSize: "45px", color: "#3dd3e0" }}
+                        className="loader-37"
+                      ></div>
+                    </div>
+                  )}
+                  <ModalUi
+                    isOpen={isDownloading === "certificate"}
+                    title={
+                      isDownloading === "certificate"
+                        ? "Generating certificate"
+                        : "PDF Download"
+                    }
+                    handleClose={() => setIsDownloading("")}
+                  >
+                    <div className="p-3 md:p-5 text-[13px] md:text-base text-center">
+                      {isDownloading === "certificate"}{" "}
+                      <p>
+                        Your completion certificate is being generated. Please
+                        wait momentarily.
+                      </p>
+                      <p>
+                        If the download doesn&apos;t start shortly, click the
+                        button again.
+                      </p>
                     </div>
                   </ModalUi>
-
                   {/* this component is used for signature pad modal */}
                   <SignPad
                     isSignPad={isSignPad}
diff --git a/apps/OpenSign/src/primitives/ModalUi.js b/apps/OpenSign/src/primitives/ModalUi.js
index dcc726f18..778d483d1 100644
--- a/apps/OpenSign/src/primitives/ModalUi.js
+++ b/apps/OpenSign/src/primitives/ModalUi.js
@@ -10,7 +10,7 @@ const ModalUi = ({
   handleClose,
   showHeader = true,
   showClose = true,
-  styleClass,
+  reduceWidth,
   showHeaderMessage
 }) => {
   return (
@@ -18,11 +18,11 @@ const ModalUi = ({
       {isOpen && (
         <div className="fixed z-[999] top-0 left-0 w-[100%] h-[100%] bg-black bg-opacity-[75%]">
           <div
-            className={
-              styleClass
-                ? styleClass
-                : "fixed z-[1000] top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-sm bg-white rounded shadow-md max-h-90 min-w-[90%] md:min-w-[500px] overflow-y-auto hide-scrollbar"
-            }
+            className={`${
+              reduceWidth
+                ? "md:min-w-[440px] md:max-w-[400px]"
+                : "md:min-w-[500px]"
+            } fixed z-[1000] top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-sm bg-white rounded shadow-md max-h-90 min-w-[90%]  overflow-y-auto hide-scrollbar `}
           >
             {showHeader && (
               <div