diff --git a/apps/OpenSign/src/components/AppendFormInForm.js b/apps/OpenSign/src/components/AppendFormInForm.js
index 47679d033..4f757e5bf 100644
--- a/apps/OpenSign/src/components/AppendFormInForm.js
+++ b/apps/OpenSign/src/components/AppendFormInForm.js
@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from "react";
 import Parse from "parse";
 import axios from "axios";
+import { modalCancelBtnColor, modalSubmitBtnColor } from "../constant/const";
 
 const AppendFormInForm = (props) => {
   const [name, setName] = useState("");
@@ -293,14 +294,16 @@ const AppendFormInForm = (props) => {
           <div className="mt-4 flex justify-start">
             <button
               type="submit"
-              className="bg-[#1ab6ce] text-sm text-white px-4 py-2 rounded shadow focus:outline-none"
+              style={{ backgroundColor: modalSubmitBtnColor }}
+              className="mr-2 px-[20px] py-1.5 text-white rounded shadow-md text-center focus:outline-none "
             >
               Submit
             </button>
             <button
               type="button"
               onClick={() => handleReset()}
-              className="bg-[#188ae2] text-sm text-white px-4 py-2 rounded ml-2 shadow focus:outline-none"
+              style={{ backgroundColor: modalCancelBtnColor }}
+              className="px-4 py-1.5 text-black border-[1px] border-[#ccc] shadow-md rounded focus:outline-none"
             >
               Reset
             </button>
diff --git a/apps/OpenSign/src/components/LoginGoogle.js b/apps/OpenSign/src/components/LoginGoogle.js
index a95f903bf..002686390 100644
--- a/apps/OpenSign/src/components/LoginGoogle.js
+++ b/apps/OpenSign/src/components/LoginGoogle.js
@@ -2,6 +2,8 @@ import React, { useState, useRef } from "react";
 import Parse from "parse";
 import jwtDecode from "jwt-decode";
 import { useScript } from "../hook/useScript";
+import ModalUi from "../primitives/ModalUi";
+import { modalCancelBtnColor, modalSubmitBtnColor } from "../constant/const";
 
 /*
  * `GoogleSignInBtn`as it's name indicates it render google sign in button
@@ -231,118 +233,94 @@ const GoogleSignInBtn = ({
         </div>
       )}
       <div ref={googleBtn} className="text-sm"></div>
-
-      {isModal && (
-        <div
-          className="modal fade show"
-          id="exampleModal"
-          tabIndex="-1"
-          role="dialog"
-          style={{ display: "block", zIndex: 1 }}
-        >
-          <div className="modal-dialog" role="document">
-            <div className="modal-content">
-              <div className="modal-header">
-                <h5 className="modal-title">Sign up form</h5>
-                <span>
-                  <span></span>
-                </span>
-              </div>
-              <div className="modal-body">
-                <form>
-                  <div className="form-group">
-                    <label
-                      htmlFor="Phone"
-                      style={{ display: "flex" }}
-                      className="col-form-label"
-                    >
-                      Phone{" "}
-                      <span style={{ fontSize: 13, color: "red" }}>*</span>
-                    </label>
-                    <input
-                      type="tel"
-                      className="form-control"
-                      id="Phone"
-                      value={userDetails.Phone}
-                      onChange={(e) =>
-                        setUserDetails({
-                          ...userDetails,
-                          Phone: e.target.value
-                        })
-                      }
-                      required
-                    />
-                  </div>
-                  <div className="form-group">
-                    <label
-                      htmlFor="Company"
-                      style={{ display: "flex" }}
-                      className="col-form-label"
-                    >
-                      Company{" "}
-                      <span style={{ fontSize: 13, color: "red" }}>*</span>
-                    </label>
-                    <input
-                      type="text"
-                      className="form-control"
-                      id="Company"
-                      value={userDetails.Company}
-                      onChange={(e) =>
-                        setUserDetails({
-                          ...userDetails,
-                          Company: e.target.value
-                        })
-                      }
-                      required
-                    />
-                  </div>
-                  <div className="form-group">
-                    <label
-                      htmlFor="JobTitle"
-                      style={{ display: "flex" }}
-                      className="col-form-label"
-                    >
-                      Job Title{" "}
-                      <span style={{ fontSize: 13, color: "red" }}>*</span>
-                    </label>
-                    <input
-                      type="text"
-                      className="form-control"
-                      id="JobTitle"
-                      value={userDetails.Destination}
-                      onChange={(e) =>
-                        setUserDetails({
-                          ...userDetails,
-                          Destination: e.target.value
-                        })
-                      }
-                      required
-                    />
-                  </div>
-                  <div>
-                    <button
-                      type="button"
-                      className="bg-[#17a2b8] p-2 text-white rounded"
-                      onClick={() => handleSubmitbtn()}
-                      style={{ marginRight: 10 }}
-                    >
-                      Sign up
-                    </button>
-                    <button
-                      type="button"
-                      className="bg-[#6c757d] p-2 text-white rounded"
-                      onClick={handleCloseModal}
-                      style={{ width: 90 }}
-                    >
-                      Cancel
-                    </button>
-                  </div>
-                </form>
-              </div>
-            </div>
+      <ModalUi showClose={false} isOpen={isModal} title="Sign up form">
+        <form className="px-4 py-3">
+          <div className="mb-3">
+            <label
+              htmlFor="Phone"
+              style={{ display: "flex" }}
+              className="block text-xs text-gray-700 font-semibold"
+            >
+              Phone <span style={{ fontSize: 13, color: "red" }}>*</span>
+            </label>
+            <input
+              type="tel"
+              className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+              id="Phone"
+              value={userDetails.Phone}
+              onChange={(e) =>
+                setUserDetails({
+                  ...userDetails,
+                  Phone: e.target.value
+                })
+              }
+              required
+            />
           </div>
-        </div>
-      )}
+          <div className="mb-3">
+            <label
+              htmlFor="Company"
+              style={{ display: "flex" }}
+              className="block text-xs text-gray-700 font-semibold"
+            >
+              Company <span style={{ fontSize: 13, color: "red" }}>*</span>
+            </label>
+            <input
+              type="text"
+              className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+              id="Company"
+              value={userDetails.Company}
+              onChange={(e) =>
+                setUserDetails({
+                  ...userDetails,
+                  Company: e.target.value
+                })
+              }
+              required
+            />
+          </div>
+          <div className="mb-3">
+            <label
+              htmlFor="JobTitle"
+              style={{ display: "flex" }}
+              className="block text-xs text-gray-700 font-semibold"
+            >
+              Job Title <span style={{ fontSize: 13, color: "red" }}>*</span>
+            </label>
+            <input
+              type="text"
+              className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+              id="JobTitle"
+              value={userDetails.Destination}
+              onChange={(e) =>
+                setUserDetails({
+                  ...userDetails,
+                  Destination: e.target.value
+                })
+              }
+              required
+            />
+          </div>
+          <div>
+            <button
+              type="button"
+              className="px-3 py-1.5 text-white rounded shadow-md text-center focus:outline-none "
+              onClick={() => handleSubmitbtn()}
+              style={{ marginRight: 10, backgroundColor: modalSubmitBtnColor }}
+            >
+              Sign up
+            </button>
+            <button
+              type="button"
+              className="p-1.5 text-black border-[1px] border-[#ccc] shadow-md rounded focus:outline-none"
+              onClick={handleCloseModal}
+              style={{ width: 90, backgroundColor: modalCancelBtnColor }}
+            >
+              Cancel
+            </button>
+          </div>
+        </form>
+      </ModalUi>
     </div>
   );
 };
diff --git a/apps/OpenSign/src/components/fields/SignersInput.js b/apps/OpenSign/src/components/fields/SignersInput.js
index af6016931..6cfb93dc0 100644
--- a/apps/OpenSign/src/components/fields/SignersInput.js
+++ b/apps/OpenSign/src/components/fields/SignersInput.js
@@ -147,6 +147,7 @@ const SignersInput = (props) => {
               right: "auto",
               bottom: "auto",
               transform: "translate(-50%, -50%)",
+              border: "1px transparent",
               padding: 0
             },
             overlay: {
@@ -158,18 +159,15 @@ const SignersInput = (props) => {
         >
           <div className="min-w-full md:min-w-[500px]">
             <div
-              type="button"
-              className="flex justify-between items-center p-3 border-b-[1px] border-gray-300"
+              className="flex justify-between rounded-t items-center py-[10px] px-[20px] text-white"
+              style={{ background: "#32a3ac" }}
             >
-              <div className=" text-black text-xl font-semibold pl-3">
-                Add Signer
-              </div>
-              <button onClick={handleModalCloseClick}>
-                <i
-                  style={{ fontSize: 25 }}
-                  className="fa fa-times-circle"
-                  aria-hidden="true"
-                ></i>
+              <div className="text-[1.2rem] font-normal">Add Signer</div>
+              <button
+                onClick={handleModalCloseClick}
+                className="text-[1.5rem] cursor-pointer focus:outline-none"
+              >
+                &times;
               </button>
             </div>
 
diff --git a/apps/OpenSign/src/constant/const.js b/apps/OpenSign/src/constant/const.js
index b2401db56..4f7ded0f8 100644
--- a/apps/OpenSign/src/constant/const.js
+++ b/apps/OpenSign/src/constant/const.js
@@ -5,3 +5,5 @@ export const rejectBtn =
   "bg-[#ffffff] rounded-sm shadow-md text-[12px] font-semibold uppercase text-black py-1.5 px-4 focus:outline-none text-center border-[1px] border-[#b4b4b4]";
 export const submitBtn =
   "bg-[#32a3ac] rounded-sm shadow-md text-[12px] font-semibold uppercase text-white py-1.5 px-4 focus:outline-none text-center";
+export const modalSubmitBtnColor = "#17a2b8";
+export const modalCancelBtnColor = "white";
diff --git a/apps/OpenSign/src/json/plansArr.json b/apps/OpenSign/src/json/plansArr.json
index 8d337fdb0..90ab47bdc 100644
--- a/apps/OpenSign/src/json/plansArr.json
+++ b/apps/OpenSign/src/json/plansArr.json
@@ -27,7 +27,7 @@
         "planName": "THANKS PLAN",
         "currency": "$",
         "price": "29.99",
-        "subtitle": "Use code 'FREEBETA' to get this for free(First 1000 users)",
+        "subtitle": "Use code <span style='background-color: yellow;'>'FREEBETA'</span> to get this for free(First 1000 users)",
         "btnText": "Subscribe",
         "url": "https://subscriptions.zoho.in/subscribe/ef798486e6a0a11ea65f2bae8f2af901dbadf3175d495584fd25b9af5d2f2b9e/thanks",
         "target": "_self",
diff --git a/apps/OpenSign/src/routes/Form.js b/apps/OpenSign/src/routes/Form.js
index 0bf604eaa..1069753e6 100644
--- a/apps/OpenSign/src/routes/Form.js
+++ b/apps/OpenSign/src/routes/Form.js
@@ -148,6 +148,7 @@ const Forms = (props) => {
   const dropboxCancel = async () => {};
   const handleSubmit = async (e) => {
     e.preventDefault();
+    e.stopPropagation();
     setIsSubmit(true);
     try {
       const currentUser = Parse.User.current();
diff --git a/apps/OpenSign/src/routes/Login.js b/apps/OpenSign/src/routes/Login.js
index 53d349211..04c49ac2f 100644
--- a/apps/OpenSign/src/routes/Login.js
+++ b/apps/OpenSign/src/routes/Login.js
@@ -11,6 +11,8 @@ import GoogleSignInBtn from "../components/LoginGoogle";
 import { NavLink, useNavigate, useLocation } from "react-router-dom";
 import login_img from "../assets/images/login_img.svg";
 import { useWindowSize } from "../hook/useWindowSize";
+import ModalUi from "../primitives/ModalUi";
+import { modalCancelBtnColor, modalSubmitBtnColor } from "../constant/const";
 
 function Login(props) {
   const navigate = useNavigate();
@@ -1131,100 +1133,76 @@ function Login(props) {
               {state.toastDescription}
             </div>
           </div>
-          {isModal && (
-            <div
-              className="modal fade show"
-              id="exampleModal"
-              tabIndex="-1"
-              role="dialog"
-              style={{
-                display: "block",
-                zIndex: 1,
-                backgroundColor: "rgba(0,0,0,0.5)"
-              }}
-            >
-              <div className="modal-dialog" role="document">
-                <div className="modal-content">
-                  <div className="modal-header">
-                    <h5 className="modal-title font-semibold">
-                      Additional Info
-                    </h5>
-                    <span>
-                      <span></span>
-                    </span>
-                  </div>
-                  <div className="modal-body">
-                    <form className="text-sm">
-                      <div className="form-group">
-                        <label
-                          htmlFor="Company"
-                          style={{ display: "flex" }}
-                          className="col-form-label"
-                        >
-                          Company{" "}
-                          <span style={{ fontSize: 13, color: "red" }}>*</span>
-                        </label>
-                        <input
-                          type="text"
-                          className="form-control"
-                          id="Company"
-                          value={userDetails.Company}
-                          onChange={(e) =>
-                            setUserDetails({
-                              ...userDetails,
-                              Company: e.target.value
-                            })
-                          }
-                          required
-                        />
-                      </div>
-                      <div className="form-group">
-                        <label
-                          htmlFor="JobTitle"
-                          style={{ display: "flex" }}
-                          className="col-form-label"
-                        >
-                          Job Title
-                          <span style={{ fontSize: 13, color: "red" }}>*</span>
-                        </label>
-                        <input
-                          type="text"
-                          className="form-control"
-                          id="JobTitle"
-                          value={userDetails.Destination}
-                          onChange={(e) =>
-                            setUserDetails({
-                              ...userDetails,
-                              Destination: e.target.value
-                            })
-                          }
-                          required
-                        />
-                      </div>
-                      <div className="mt-4">
-                        <button
-                          type="button"
-                          className="bg-[#17a2b8] text-sm p-2 text-white rounded uppercase"
-                          onClick={(e) => handleSubmitbtn(e)}
-                          style={{ marginRight: 10 }}
-                        >
-                          Login
-                        </button>
-                        <button
-                          type="button"
-                          className="bg-[#6c757d] text-sm p-2 text-white rounded uppercase"
-                          onClick={handleCloseModal}
-                          style={{ width: 90 }}
-                        >
-                          Cancel
-                        </button>
-                      </div>
-                    </form>
-                  </div>
-                </div>
+          <ModalUi isOpen={isModal} title="Additional Info" showClose={false}>
+            <form className="px-4 py-3">
+              <div className="mb-3">
+                <label
+                  htmlFor="Company"
+                  style={{ display: "flex" }}
+                  className="block text-xs text-gray-700 font-semibold"
+                >
+                  Company <span style={{ fontSize: 13, color: "red" }}>*</span>
+                </label>
+                <input
+                  type="text"
+                  className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+                  id="Company"
+                  value={userDetails.Company}
+                  onChange={(e) =>
+                    setUserDetails({
+                      ...userDetails,
+                      Company: e.target.value
+                    })
+                  }
+                  required
+                />
               </div>
-            </div>
-          )}
+              <div className="mb-3">
+                <label
+                  htmlFor="JobTitle"
+                  style={{ display: "flex" }}
+                  className="block text-xs text-gray-700 font-semibold"
+                >
+                  Job Title
+                  <span style={{ fontSize: 13, color: "red" }}>*</span>
+                </label>
+                <input
+                  type="text"
+                  className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+                  id="JobTitle"
+                  value={userDetails.Destination}
+                  onChange={(e) =>
+                    setUserDetails({
+                      ...userDetails,
+                      Destination: e.target.value
+                    })
+                  }
+                  required
+                />
+              </div>
+              <div className="mt-4">
+                <button
+                  type="button"
+                  className="px-3 py-1.5 text-white rounded shadow-md text-center focus:outline-none "
+                  onClick={(e) => handleSubmitbtn(e)}
+                  style={{
+                    marginRight: 10,
+                    backgroundColor: modalSubmitBtnColor
+                  }}
+                >
+                  Login
+                </button>
+                <button
+                  type="button"
+                  className="py-1.5 text-black border-[1px] border-[#ccc] shadow-md rounded focus:outline-none"
+                  onClick={handleCloseModal}
+                  style={{ width: 75, backgroundColor: modalCancelBtnColor }}
+                >
+                  Cancel
+                </button>
+              </div>
+            </form>
+          </ModalUi>
         </>
       ) : (
         <div
diff --git a/apps/OpenSign/src/routes/PlanSubscriptions.js b/apps/OpenSign/src/routes/PlanSubscriptions.js
index ceb764a3f..db39ee465 100644
--- a/apps/OpenSign/src/routes/PlanSubscriptions.js
+++ b/apps/OpenSign/src/routes/PlanSubscriptions.js
@@ -104,11 +104,27 @@ const PlanSubscriptions = () => {
                         <div
                           className={`${
                             item.subtitle.length <= 32
-                              ? "w-[150px]  text-center"
+                              ? "w-[150px] text-center"
                               : ""
                           } text-sm text-center my-2`}
                         >
-                          <p>{item.subtitle}</p>
+                          <p
+                            style={{
+                              backgroundColor: item.subtitlecolor
+                                ? item.subtitlecolor
+                                : "white"
+                            }}
+                          >
+                            {item.subtitle.includes("<") ? (
+                              <div
+                                dangerouslySetInnerHTML={{
+                                  __html: item.subtitle
+                                }}
+                              />
+                            ) : (
+                              <span>{item.subtitle}</span>
+                            )}
+                          </p>
                         </div>
                       </div>