diff --git a/apps/OpenSign/src/primitives/ModalUi.jsx b/apps/OpenSign/src/primitives/ModalUi.jsx
index 36486dbd33..967dfefbf2 100644
--- a/apps/OpenSign/src/primitives/ModalUi.jsx
+++ b/apps/OpenSign/src/primitives/ModalUi.jsx
@@ -1,5 +1,6 @@
 import { useEffect, useRef } from "react";
 import { useTranslation } from "react-i18next";
+import { createPortal } from "react-dom";
 import "../styles/signature.css";
 import Loader from "./Loader";
 import Tooltip from "./Tooltip";
@@ -49,7 +50,7 @@ const ModalUi = ({
     };
   }, [isOpen, position]);
 
-  return (
+  return createPortal(
     <>
       {isOpen && (
         <dialog
@@ -95,7 +96,8 @@ const ModalUi = ({
           </div>
         </dialog>
       )}
-    </>
+    </>,
+    document.body
   );
 };
 
diff --git a/apps/OpenSign/src/primitives/ShareButton.jsx b/apps/OpenSign/src/primitives/ShareButton.jsx
index bcc2d9225f..385fb92263 100644
--- a/apps/OpenSign/src/primitives/ShareButton.jsx
+++ b/apps/OpenSign/src/primitives/ShareButton.jsx
@@ -73,13 +73,14 @@ export default function ShareButton({ title, text, url, className, children }) {
             </>
           }
           handleClose={() => setPopupOpen(false)}
+          reduceWidth="md:min-w-[650px]"
         >
           {error && <p style={{ color: "red" }}>Error: {error.message}</p>}
-          <div className="grid grid-cols-1 md:grid-cols-2 justify-items-start text-lg p-[20px]">
+          <div className="flex flex-wrap justify-center text-lg p-[20px]">
             {/* Copy Link */}
             <button
               onClick={() => navigator.clipboard.writeText(url)}
-              className="m-2 op-btn op-btn-primary op-btn-outline op-btn-xs md:op-btn-sm w-[190px]"
+              className="m-2 op-btn op-btn-primary op-btn-outline op-btn-xs md:op-btn-sm w-[270px]"
             >
               <i className="fa-solid fa-clipboard fa-lg"></i> Copy to clipboard
             </button>
@@ -92,7 +93,7 @@ export default function ShareButton({ title, text, url, className, children }) {
                   "noopener"
                 )
               }
-              className="m-2 op-btn op-btn-primary op-btn-outline op-btn-xs md:op-btn-sm w-[190px]"
+              className="m-2 op-btn op-btn-primary op-btn-outline op-btn-xs md:op-btn-sm w-[270px]"
             >
               <i className="fa-brands fa-square-x-twitter fa-lg"></i> Share on
               Twitter
@@ -107,7 +108,7 @@ export default function ShareButton({ title, text, url, className, children }) {
                   "noopener"
                 )
               }
-              className="m-2 op-btn op-btn-primary op-btn-outline op-btn-xs md:op-btn-sm w-[190px]"
+              className="m-2 op-btn op-btn-primary op-btn-outline op-btn-xs md:op-btn-sm w-[270px]"
             >
               <i className="fa-brands fa-square-facebook fa-lg"></i> Share on
               Facebook
@@ -122,7 +123,7 @@ export default function ShareButton({ title, text, url, className, children }) {
                   "noopener"
                 )
               }
-              className="m-2 op-btn op-btn-primary op-btn-outline op-btn-xs md:op-btn-sm w-[190px]"
+              className="m-2 op-btn op-btn-primary op-btn-outline op-btn-xs md:op-btn-sm w-[270px]"
             >
               <i className="fa-brands fa-square-whatsapp fa-lg"></i> Share on
               WhatsApp
@@ -137,7 +138,7 @@ export default function ShareButton({ title, text, url, className, children }) {
                   "noopener"
                 )
               }
-              className="m-2 op-btn op-btn-primary op-btn-outline op-btn-xs md:op-btn-sm w-[190px]"
+              className="m-2 op-btn op-btn-primary op-btn-outline op-btn-xs md:op-btn-sm w-[270px]"
             >
               <i className="fa-solid fa-envelope fa-lg"></i> Share via Gmail
             </button>
@@ -151,7 +152,7 @@ export default function ShareButton({ title, text, url, className, children }) {
                   "noopener"
                 )
               }
-              className="m-2 op-btn op-btn-primary op-btn-outline op-btn-xs md:op-btn-sm w-[190px]"
+              className="m-2 op-btn op-btn-primary op-btn-outline op-btn-xs md:op-btn-sm w-[270px]"
             >
               <i className="fa-brands fa-microsoft fa-lg"></i> Share on Teams
             </button>
@@ -165,7 +166,7 @@ export default function ShareButton({ title, text, url, className, children }) {
                   "noopener"
                 )
               }
-              className="m-2 op-btn op-btn-primary op-btn-outline op-btn-xs md:op-btn-sm w-[190px]"
+              className="m-2 op-btn op-btn-primary op-btn-outline op-btn-xs md:op-btn-sm w-[270px]"
             >
               <i className="fa-solid fa-envelope-open-text fa-lg"></i> Share via
               Outlook