diff --git a/apps/OpenSign/package-lock.json b/apps/OpenSign/package-lock.json
index 95ce733d0..10b01f986 100644
--- a/apps/OpenSign/package-lock.json
+++ b/apps/OpenSign/package-lock.json
@@ -22,6 +22,7 @@
         "radix-ui": "^1.0.1",
         "react": "^18.2.0",
         "react-bootstrap": "^2.10.2",
+        "react-confetti": "^6.1.0",
         "react-cookie": "^7.1.4",
         "react-datepicker": "^6.4.0",
         "react-dnd": "^16.0.1",
@@ -19458,6 +19459,20 @@
         "react": "^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/react-confetti": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/react-confetti/-/react-confetti-6.1.0.tgz",
+      "integrity": "sha512-7Ypx4vz0+g8ECVxr88W9zhcQpbeujJAVqL14ZnXJ3I23mOI9/oBVTQ3dkJhUmB0D6XOtCZEM6N0Gm9PMngkORw==",
+      "dependencies": {
+        "tween-functions": "^1.2.0"
+      },
+      "engines": {
+        "node": ">=10.18"
+      },
+      "peerDependencies": {
+        "react": "^16.3.0 || ^17.0.1 || ^18.0.0"
+      }
+    },
     "node_modules/react-cookie": {
       "version": "7.1.4",
       "resolved": "https://registry.npmjs.org/react-cookie/-/react-cookie-7.1.4.tgz",
@@ -22575,6 +22590,11 @@
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
       "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
     },
+    "node_modules/tween-functions": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/tween-functions/-/tween-functions-1.2.0.tgz",
+      "integrity": "sha512-PZBtLYcCLtEcjL14Fzb1gSxPBeL7nWvGhO5ZFPGqziCcr8uvHp0NDmdjBchp6KHL+tExcg0m3NISmKxhU394dA=="
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
diff --git a/apps/OpenSign/package.json b/apps/OpenSign/package.json
index 2b9861354..ebf2e291b 100644
--- a/apps/OpenSign/package.json
+++ b/apps/OpenSign/package.json
@@ -17,6 +17,7 @@
     "radix-ui": "^1.0.1",
     "react": "^18.2.0",
     "react-bootstrap": "^2.10.2",
+    "react-confetti": "^6.1.0",
     "react-cookie": "^7.1.4",
     "react-datepicker": "^6.4.0",
     "react-dnd": "^16.0.1",
diff --git a/apps/OpenSign/src/components/pdf/EmailComponent.js b/apps/OpenSign/src/components/pdf/EmailComponent.js
index db630a5ad..66c4cc682 100644
--- a/apps/OpenSign/src/components/pdf/EmailComponent.js
+++ b/apps/OpenSign/src/components/pdf/EmailComponent.js
@@ -16,13 +16,12 @@ function EmailComponent({
   sender,
   setIsAlert,
   extUserId,
-  activeMailAdapter,
-  isEmailCelebration
+  activeMailAdapter
 }) {
   const [emailList, setEmailList] = useState([]);
   const [emailValue, setEmailValue] = useState();
   const [isLoading, setIsLoading] = useState(false);
-  const [isCelebration, setIsCelebration] = useState(false);
+  const [isEmailCelebration, setIsEmailCelebration] = useState(false);
   //function for send email
   const sendEmail = async () => {
     setIsLoading(true);
@@ -63,9 +62,9 @@ function EmailComponent({
             " target=_blank>here</a> </p></div></div></body></html>"
         };
         sendMail = await axios.post(url, params, { headers: headers });
-        setIsCelebration(true);
+        setIsEmailCelebration(true);
         setTimeout(() => {
-          setIsCelebration(false);
+          setIsEmailCelebration(false);
         }, 3000);
       } catch (error) {
         console.log("error", error);
@@ -250,7 +249,7 @@ function EmailComponent({
               </div>
             </div>
             <div style={{ height: "100%", padding: 20 }}>
-              {(isCelebration || isEmailCelebration) && (
+              {isEmailCelebration && (
                 <div className="absolute w-[100%] flex justify-center items-center">
                   <img
                     alt="print img"
diff --git a/apps/OpenSign/src/pages/PdfRequestFiles.js b/apps/OpenSign/src/pages/PdfRequestFiles.js
index a608ff3b9..45c77174b 100644
--- a/apps/OpenSign/src/pages/PdfRequestFiles.js
+++ b/apps/OpenSign/src/pages/PdfRequestFiles.js
@@ -11,6 +11,7 @@ import { useLocation, useNavigate, useParams } from "react-router-dom";
 import SignPad from "../components/pdf/SignPad";
 import RenderAllPdfPage from "../components/pdf/RenderAllPdfPage";
 import Tour from "reactour";
+import Confetti from "react-confetti";
 import moment from "moment";
 import {
   contractDocument,
@@ -260,9 +261,6 @@ function PdfRequestFiles() {
         };
         setAlreadySign(true);
         setIsCompleted(data);
-        setTimeout(() => {
-          setIsCelebration(false);
-        }, 1500);
       } else if (declined) {
         const currentDecline = {
           currnt: "another",
@@ -429,6 +427,11 @@ function PdfRequestFiles() {
               message:
                 "You have successfully signed the document. You can download or print a copy of the partially signed document. A copy of the digitally signed document will be sent to the owner over email once it is signed by all signers."
             });
+          } else {
+            setIsCelebration(true);
+            setTimeout(() => {
+              setIsCelebration(false);
+            }, 2500);
           }
         }
 
@@ -722,7 +725,6 @@ function PdfRequestFiles() {
                 setSignedSigners([]);
                 setUnSignedSigners([]);
                 getDocumentDetails(true);
-                setIsCelebration(true);
                 const index = pdfDetails?.[0].Signers.findIndex(
                   (x) => x.Email === jsonSender.email
                 );
@@ -1182,6 +1184,14 @@ function PdfRequestFiles() {
                   </span>
                 </div>
               )}
+              {isCelebration && (
+                <div style={{ position: "relative", zIndex: "1000" }}>
+                  <Confetti
+                    width={window.innerWidth}
+                    height={window.innerHeight}
+                  />
+                </div>
+              )}
 
               <div
                 className="relative flex flex-col md:flex-row justify-between bg-[#ebebeb]"
@@ -1371,7 +1381,6 @@ function PdfRequestFiles() {
                     handleClose={() => {
                       setIsCompleted((prev) => ({ ...prev, isModal: false }));
                     }}
-                    isCelebration={!isCompleted?.message && isCelebration}
                   >
                     <div style={{ height: "100%", padding: 20 }}>
                       <p>
diff --git a/apps/OpenSign/src/pages/SignyourselfPdf.js b/apps/OpenSign/src/pages/SignyourselfPdf.js
index 0a8f7c7b5..341526ffb 100644
--- a/apps/OpenSign/src/pages/SignyourselfPdf.js
+++ b/apps/OpenSign/src/pages/SignyourselfPdf.js
@@ -3,6 +3,7 @@ import { PDFDocument } from "pdf-lib";
 import "../styles/signature.css";
 import Parse from "parse";
 import { isEnableSubscription, themeColor } from "../constant/const";
+import Confetti from "react-confetti";
 import axios from "axios";
 import Loader from "../primitives/LoaderWithMsg";
 import loader from "../assets/images/loader2.gif";
@@ -108,7 +109,7 @@ function SignYourSelf() {
   const [isDontShow, setIsDontShow] = useState(false);
   const [extUserId, setExtUserId] = useState("");
   const [isCompleted, setIsCompleted] = useState(false);
-  const [isCompletionCeleb, setIsCompletionCeleb] = useState(false);
+  const [isCelebration, setIsCelebration] = useState(false);
   const [pdfArrayBuffer, setPdfArrayBuffer] = useState("");
   const [activeMailAdapter, setActiveMailAdapter] = useState("");
   const [isEmailVerified, setIsEmailVerified] = useState(true);
@@ -229,11 +230,12 @@ function SignYourSelf() {
           setIsUiLoading(false);
           setIsSignPad(false);
           setIsEmail(true);
+          setIsCelebration(true);
           setXyPostion([]);
           setSignBtnPosition([]);
           setTimeout(() => {
-            setIsCompletionCeleb(false);
-          }, 1500);
+            setIsCelebration(false);
+          }, 2500);
         }
       }
     } else if (
@@ -768,7 +770,6 @@ function SignYourSelf() {
         setPdfUrl(json.result.data);
         if (json.result.data) {
           getDocumentDetails(false);
-          setIsCompletionCeleb(true);
         }
       })
       .catch((err) => {
@@ -1122,6 +1123,11 @@ function SignYourSelf() {
               </span>
             </div>
           )}
+          {isCelebration && (
+            <div style={{ position: "relative", zIndex: "999" }}>
+              <Confetti width={window.innerWidth} height={window.innerHeight} />
+            </div>
+          )}
 
           <div className="signatureContainer" ref={divRef}>
             {!isEmailVerified && (
@@ -1265,8 +1271,6 @@ function SignYourSelf() {
                 setIsAlert={setIsAlert}
                 extUserId={extUserId}
                 activeMailAdapter={activeMailAdapter}
-                isEmailCelebration={isCompletionCeleb}
-                setIsCompletionCeleb={setIsCompletionCeleb}
               />
               {/* pdf header which contain funish back button */}
               <Header
diff --git a/apps/OpenSign/src/primitives/ModalUi.js b/apps/OpenSign/src/primitives/ModalUi.js
index 0d54712b0..dcc726f18 100644
--- a/apps/OpenSign/src/primitives/ModalUi.js
+++ b/apps/OpenSign/src/primitives/ModalUi.js
@@ -1,7 +1,6 @@
 import React from "react";
 import { isEnableSubscription } from "../constant/const";
 import PremiumAlertHeader from "./PremiumAlertHeader";
-import celebration from "../assets/images/newCeleb.gif";
 
 const ModalUi = ({
   children,
@@ -12,8 +11,7 @@ const ModalUi = ({
   showHeader = true,
   showClose = true,
   styleClass,
-  showHeaderMessage,
-  isCelebration
+  showHeaderMessage
 }) => {
   return (
     <>
@@ -26,16 +24,6 @@ const ModalUi = ({
                 : "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"
             }
           >
-            {isCelebration && (
-              <div className="absolute w-[100%] flex justify-center items-center">
-                <img
-                  alt="print img"
-                  width={300}
-                  height={100}
-                  src={celebration}
-                />
-              </div>
-            )}
             {showHeader && (
               <div
                 className="flex justify-between rounded-t items-center py-[15px] px-[20px] text-white"