diff --git a/apps/OpenSign/src/assets/gif/mail_sent.gif b/apps/OpenSign/src/assets/gif/mail_sent.gif
new file mode 100644
index 000000000..20e21daa2
Binary files /dev/null and b/apps/OpenSign/src/assets/gif/mail_sent.gif differ
diff --git a/apps/OpenSign/src/components/pdf/AddRoleModal.js b/apps/OpenSign/src/components/pdf/AddRoleModal.js
index 6770c06f2..1da6f8a98 100644
--- a/apps/OpenSign/src/components/pdf/AddRoleModal.js
+++ b/apps/OpenSign/src/components/pdf/AddRoleModal.js
@@ -31,7 +31,7 @@ const AddRoleModal = (props) => {
             <button
               onClick={props.handleCloseRoleModal}
               type="button"
-              className="op-btn op-btn-secondary ml-2"
+              className="op-btn op-btn-ghost ml-2"
             >
               Close
             </button>
diff --git a/apps/OpenSign/src/components/pdf/PdfHeader.js b/apps/OpenSign/src/components/pdf/PdfHeader.js
index 67346698c..2ca5ce5b2 100644
--- a/apps/OpenSign/src/components/pdf/PdfHeader.js
+++ b/apps/OpenSign/src/components/pdf/PdfHeader.js
@@ -8,7 +8,6 @@ import {
 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 ModalUi from "../../primitives/ModalUi";
 import Loader from "../../primitives/Loader";
 
@@ -80,15 +79,7 @@ function Header({
             {pdfUrl && alreadySign ? (
               <DropdownMenu.Root>
                 <DropdownMenu.Trigger asChild>
-                  <div
-                    style={{
-                      color: themeColor,
-                      border: "none",
-                      fontWeight: "650",
-                      fontSize: "16px",
-                      padding: "0px 3px 0px 5px"
-                    }}
-                  >
+                  <div className="op-link op-link-primary no-underline text-[16px] font-semibold pr-[3px] pl-[5px]">
                     <i className="fa fa-ellipsis-v" aria-hidden="true"></i>
                   </div>
                 </DropdownMenu.Trigger>
@@ -183,8 +174,9 @@ function Header({
                             alertSendEmail();
                           }
                         }}
-                        className="border-none font-[650] text-[14px]"
-                        style={{ color: isMailSend ? "gray" : themeColor }}
+                        className={`${
+                          isMailSend ? "" : "op-link-primary"
+                        } op-link no-underline font-[650] text-[14px]`}
                         data-tut={dataTut4}
                       >
                         {completeBtnTitle ? completeBtnTitle : "Send"}
@@ -199,18 +191,14 @@ function Header({
                             embedWidgetsData();
                           }
                         }}
-                        style={{ color: themeColor }}
-                        className="border-none font-[650] text-[14px]"
+                        className="border-none font-[650] text-[14px] op-link op-link-primary no-underline"
                       >
                         Finish
                       </div>
                     )}
                     <DropdownMenu.Root>
                       <DropdownMenu.Trigger asChild>
-                        <div
-                          className="border-none font-[650] text-[18px] px-2 ml-[4px]"
-                          style={{ color: themeColor }}
-                        >
+                        <div className="font-[650] text-[18px] px-2 ml-[4px] op-link op-link-info no-underline">
                           <i
                             className="fa fa-ellipsis-v"
                             aria-hidden="true"
diff --git a/apps/OpenSign/src/components/pdf/PlaceholderCopy.js b/apps/OpenSign/src/components/pdf/PlaceholderCopy.js
index 6063e1fe5..2fa532223 100644
--- a/apps/OpenSign/src/components/pdf/PlaceholderCopy.js
+++ b/apps/OpenSign/src/components/pdf/PlaceholderCopy.js
@@ -1,5 +1,4 @@
 import React, { useState } from "react";
-import { themeColor } from "../../constant/const";
 import ModalUi from "../../primitives/ModalUi";
 import { randomId, textWidget } from "../../constant/Utils";
 
@@ -214,33 +213,22 @@ function PlaceholderCopy(props) {
           );
         })}
 
-        <div
-          style={{
-            height: "1px",
-            backgroundColor: "#9f9f9f",
-            width: "100%",
-            marginTop: "15px",
-            marginBottom: "15px"
-          }}
-        ></div>
+        <div className="flex bg-[#9f9f9f] w-full my-[15px]"></div>
         <button
           onClick={() => {
             handleApplyCopy();
             handleUniqueId();
           }}
-          style={{ background: themeColor }}
           type="button"
           disabled={!selectCopyType}
-          className="finishBtn"
+          className="op-btn op-btn-primary"
         >
           Apply
         </button>
         <button
           type="button"
-          className="finishBtn cancelBtn"
-          onClick={() => {
-            handleUniqueId();
-          }}
+          className="op-btn op-btn-ghost"
+          onClick={() => handleUniqueId()}
         >
           Cancel
         </button>
diff --git a/apps/OpenSign/src/components/pdf/SignPad.js b/apps/OpenSign/src/components/pdf/SignPad.js
index 28db8e815..5e9ca1039 100644
--- a/apps/OpenSign/src/components/pdf/SignPad.js
+++ b/apps/OpenSign/src/components/pdf/SignPad.js
@@ -1,6 +1,5 @@
 import React, { useRef, useState, useEffect } from "react";
 import SignatureCanvas from "react-signature-canvas";
-import { themeColor } from "../../constant/const";
 
 function SignPad({
   isSignPad,
@@ -291,7 +290,7 @@ function SignPad({
                 <div className="flex flex-row justify-between mt-[3px]">
                   <div className="flex flex-row justify-between gap-[5px] md:gap-[8px] text-[11px] md:text-base">
                     {isStamp ? (
-                      <span style={{ color: themeColor }} className="signTab">
+                      <span className="op-link-primary op-link">
                         {widgetType === "image"
                           ? "Upload image"
                           : "Upload stamp image"}
@@ -306,22 +305,14 @@ function SignPad({
                               setIsTab("draw");
                               setImage();
                             }}
-                            style={{
-                              color: isTab === "draw" ? themeColor : "#515252",
-                              marginLeft: "2px"
-                            }}
-                            className="signTab"
+                            className={`${
+                              isTab === "draw"
+                                ? "op-link-primary"
+                                : "no-underline"
+                            } op-link underline-offset-8 ml-[2px]`}
                           >
                             Draw
                           </span>
-
-                          <div
-                            className={
-                              isTab === "draw"
-                                ? "border-[1.5px] border-[#108783]"
-                                : "border-[1.5px] border-[#ffffff]"
-                            }
-                          ></div>
                         </div>
                         <div>
                           <span
@@ -331,21 +322,14 @@ function SignPad({
                               setIsTab("uploadImage");
                               setSignatureType("");
                             }}
-                            style={{
-                              color:
-                                isTab === "uploadImage" ? themeColor : "#515252"
-                            }}
-                            className="signTab"
+                            className={`${
+                              isTab === "uploadImage"
+                                ? "op-link-primary"
+                                : "no-underline"
+                            } op-link underline-offset-8 ml-[2px]`}
                           >
                             Upload Image
                           </span>
-                          <div
-                            className={
-                              isTab === "uploadImage"
-                                ? "border-[1.5px] border-[#108783]"
-                                : "border-[1.5px] border-[#ffffff]"
-                            }
-                          ></div>
                         </div>
                         <div>
                           <span
@@ -356,22 +340,14 @@ function SignPad({
                               setSignatureType("");
                               setImage();
                             }}
-                            style={{
-                              color: isTab === "type" ? themeColor : "#515252",
-                              marginLeft: "2px"
-                            }}
-                            className="signTab"
+                            className={`${
+                              isTab === "type"
+                                ? "op-link-primary"
+                                : "no-underline"
+                            } op-link underline-offset-8 ml-[2px]`}
                           >
                             Type
                           </span>
-
-                          <div
-                            className={
-                              isTab === "type"
-                                ? "border-[1.5px] border-[#108783]"
-                                : "border-[1.5px] border-[#ffffff]"
-                            }
-                          ></div>
                         </div>
                         {!isInitial && defaultSign ? (
                           <div>
@@ -383,23 +359,14 @@ function SignPad({
                                 setSignatureType("");
                                 setImage();
                               }}
-                              style={{
-                                color:
-                                  isTab === "mysignature"
-                                    ? themeColor
-                                    : "#515252"
-                              }}
-                              className="signTab"
+                              className={`${
+                                isTab === "mysignature"
+                                  ? "op-link-primary"
+                                  : "no-underline"
+                              } op-link underline-offset-8 ml-[2px]`}
                             >
                               My Signature
                             </span>
-                            <div
-                              className={
-                                isTab === "mysignature"
-                                  ? "border-[1.5px] border-[#108783]"
-                                  : "border-[1.5px] border-[#ffffff]"
-                              }
-                            ></div>
                           </div>
                         ) : (
                           isInitial &&
@@ -413,23 +380,14 @@ function SignPad({
                                   setSignatureType("");
                                   setImage();
                                 }}
-                                style={{
-                                  color:
-                                    isTab === "mysignature"
-                                      ? themeColor
-                                      : "#515252"
-                                }}
-                                className="signTab"
+                                className={`${
+                                  isTab === "mysignature"
+                                    ? "op-link-primary"
+                                    : "no-underline"
+                                } op-link underline-offset-8 ml-[2px]`}
                               >
                                 My Initials
                               </span>
-                              <div
-                                className={
-                                  isTab === "mysignature"
-                                    ? "border-[1.5px] border-[#108783]"
-                                    : "border-[1.5px] border-[#ffffff]"
-                                }
-                              ></div>
                             </div>
                           )
                         )}
diff --git a/apps/OpenSign/src/components/shared/fields/SelectSigners.js b/apps/OpenSign/src/components/shared/fields/SelectSigners.js
index 1ea271c4b..52525870a 100644
--- a/apps/OpenSign/src/components/shared/fields/SelectSigners.js
+++ b/apps/OpenSign/src/components/shared/fields/SelectSigners.js
@@ -101,7 +101,7 @@ const SelectSigners = (props) => {
         <p
           className={`${
             isError ? "text-[red]" : "text-transparent"
-          } text-[12px] m-[5px]`}
+          } text-[11px] ml-[6px] my-[2px]`}
         >
           Please select signer
         </p>
diff --git a/apps/OpenSign/src/pages/PlaceHolderSign.js b/apps/OpenSign/src/pages/PlaceHolderSign.js
index 14f0264fd..9ccbebd33 100644
--- a/apps/OpenSign/src/pages/PlaceHolderSign.js
+++ b/apps/OpenSign/src/pages/PlaceHolderSign.js
@@ -49,7 +49,7 @@ import { EmailBody } from "../components/pdf/EmailBody";
 import Upgrade from "../primitives/Upgrade";
 import Alert from "../primitives/Alert";
 import Loader from "../primitives/Loader";
-
+import mail_sent_gif from "../assets/gif/mail_sent.gif";
 function PlaceHolderSign() {
   const editorRef = useRef();
   const navigate = useNavigate();
@@ -1789,19 +1789,27 @@ function PlaceHolderSign() {
               >
                 <div className="h-[100%] p-[20px]">
                   {mailStatus === "success" ? (
-                    <p>You have successfully sent mails to all recipients!</p>
+                    <div className="text-center mb-[10px]">
+                      <img
+                        src={mail_sent_gif}
+                        className="w-[120px] h-[120px] mx-auto"
+                      />
+                      <p>You have successfully sent mails to all recipients!</p>
+                      {isCurrUser && (
+                        <p>Do you want to sign documents right now ?</p>
+                      )}
+                    </div>
                   ) : (
                     <p>Please setup mail adapter to send mail!</p>
                   )}
-                  {isCurrUser && (
-                    <p>Do you want to sign documents right now ?</p>
+                  {!mailStatus && (
+                    <div className="w-full h-[1px] bg-[#9f9f9f] my-[15px]"></div>
                   )}
-                  <div className="w-full h-[1px] bg-[#9f9f9f] my-[15px]"></div>
                   {isCurrUser && (
                     <button
                       onClick={() => handleRecipientSign()}
                       type="button"
-                      className="op-btn op-btn-primary"
+                      className="op-btn op-btn-primary mr-1"
                     >
                       Yes
                     </button>
@@ -1812,7 +1820,7 @@ function PlaceHolderSign() {
                       setSignerPos([]);
                     }}
                     type="button"
-                    className="finishBtn cancelBtn"
+                    className="op-btn op-btn-ghost"
                   >
                     {isCurrUser ? "No" : "Close"}
                   </button>
@@ -1833,7 +1841,7 @@ function PlaceHolderSign() {
                       setIsShowEmail(false);
                     }}
                     type="button"
-                    className="finishBtn cancelBtn"
+                    className="op-btn op-btn-primary"
                   >
                     Ok
                   </button>
@@ -1992,9 +2000,7 @@ function PlaceHolderSign() {
                   aria-disabled
                 >
                   <div
-                    style={{
-                      maxHeight: window.innerHeight - 70 + "px"
-                    }}
+                    style={{ maxHeight: window.innerHeight - 70 + "px" }}
                     className="overflow-y-auto hide-scrollbar"
                   >
                     <SignerListPlace
@@ -2057,7 +2063,6 @@ function PlaceHolderSign() {
             </button>
           </div>
         </ModalUi>
-
         <LinkUserModal
           handleAddUser={handleAddUser}
           isAddUser={isAddUser}
diff --git a/apps/OpenSign/src/primitives/AddContact.js b/apps/OpenSign/src/primitives/AddContact.js
index d65fa1e21..f42a31ecc 100644
--- a/apps/OpenSign/src/primitives/AddContact.js
+++ b/apps/OpenSign/src/primitives/AddContact.js
@@ -266,7 +266,7 @@ const AddContact = (props) => {
             />
           </div>
 
-          <div className="mt-[1rem] flex justify-start gap-2">
+          <div className="mt-6 flex justify-start gap-2">
             <button type="submit" className="op-btn op-btn-primary">
               Submit
             </button>
diff --git a/apps/OpenSign/tailwind.config.js b/apps/OpenSign/tailwind.config.js
index 6270181a0..f3a4f7697 100644
--- a/apps/OpenSign/tailwind.config.js
+++ b/apps/OpenSign/tailwind.config.js
@@ -61,7 +61,10 @@ module.exports = {
           warning: "#ffbe00",
           "warning-content": "#ccd9e8",
           error: "#ff0000",
-          "error-content": "#f3f4f6"
+          "error-content": "#f3f4f6",
+          "--rounded-btn": "1.9rem",
+          "--tab-border": "2px",
+          "--tab-radius": "0.7rem"
         }
       }
     ],