diff --git a/apps/OpenSign/src/App.js b/apps/OpenSign/src/App.js
index 4917ffa07..3a2362c05 100644
--- a/apps/OpenSign/src/App.js
+++ b/apps/OpenSign/src/App.js
@@ -1,33 +1,53 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, Suspense, lazy } from "react";
 import { Routes, Route, BrowserRouter } from "react-router-dom";
 import { pdfjs } from "react-pdf";
-import Pgsignup from "./pages/Pgsignup";
 import Login from "./pages/Login";
-import Signup from "./pages/Signup";
 import Form from "./pages/Form";
 import Report from "./pages/Report";
 import Dashboard from "./pages/Dashboard";
-import Subscriptions from "./pages/PlanSubscriptions";
 import HomeLayout from "./layout/HomeLayout";
-import UserProfile from "./pages/UserProfile";
 import PageNotFound from "./pages/PageNotFound";
-import ForgetPassword from "./pages/ForgetPassword";
-import ChangePassword from "./pages/ChangePassword";
-import GenerateToken from "./pages/GenerateToken";
 import ValidateRoute from "./primitives/ValidateRoute";
-import Webhook from "./pages/Webhook";
 import Validate from "./primitives/Validate";
-import DebugPdf from "./pages/DebugPdf";
 import ManageSign from "./pages/Managesign";
-import Opensigndrive from "./pages/Opensigndrive";
 import TemplatePlaceholder from "./pages/TemplatePlaceholder";
 import SignYourSelf from "./pages/SignyourselfPdf";
 import DraftDocument from "./components/pdf/DraftDocument";
 import PlaceHolderSign from "./pages/PlaceHolderSign";
 import PdfRequestFiles from "./pages/PdfRequestFiles";
-import GuestLogin from "./pages/GuestLogin";
+const DebugPdf = lazy(() => import("./pages/DebugPdf"));
+const ForgetPassword = lazy(() => import("./pages/ForgetPassword"));
+const GuestLogin = lazy(() => import("./pages/GuestLogin"));
+const Pgsignup = lazy(() => import("./pages/Pgsignup"));
+const Subscriptions = lazy(() => import("./pages/PlanSubscriptions"));
+const ChangePassword = lazy(() => import("./pages/ChangePassword"));
+const UserProfile = lazy(() => import("./pages/UserProfile"));
+const Signup = lazy(() => import("./pages/Signup"));
+const GenerateToken = lazy(() => import("./pages/GenerateToken"));
+const Webhook = lazy(() => import("./pages/Webhook"));
+const Opensigndrive = lazy(() => import("./pages/Opensigndrive"));
 pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
 
+const Loader = () => {
+  return (
+    <div
+      style={{
+        height: "100vh",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      }}
+    >
+      <div
+        style={{
+          fontSize: "45px",
+          color: "#3dd3e0"
+        }}
+        className="loader-37"
+      ></div>
+    </div>
+  );
+};
 function App() {
   const [isloading, setIsLoading] = useState(true);
   useEffect(() => {
@@ -55,99 +75,86 @@ function App() {
   return (
     <div className="bg-[#eef1f5]">
       {isloading ? (
-        <div
-          style={{
-            height: "100vh",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center"
-          }}
-        >
-          <div
-            style={{
-              fontSize: "45px",
-              color: "#3dd3e0"
-            }}
-            className="loader-37"
-          ></div>
-        </div>
+        <Loader />
       ) : (
         <BrowserRouter>
-          <Routes>
-            <Route element={<ValidateRoute />}>
-              <Route exact path="/" element={<Login />} />
-              <Route exact path="/signup" element={<Signup />} />
-            </Route>
-            <Route element={<Validate />}>
+          <Suspense fallback={<Loader />}>
+            <Routes>
+              <Route element={<ValidateRoute />}>
+                <Route exact path="/" element={<Login />} />
+                <Route exact path="/signup" element={<Signup />} />
+              </Route>
+              <Route element={<Validate />}>
+                <Route
+                  path="/load/template/:templateId"
+                  element={<TemplatePlaceholder />}
+                />
+                <Route
+                  exact
+                  path="/load/placeholdersign/:docId"
+                  element={<PlaceHolderSign />}
+                />
+                <Route
+                  exact
+                  path="/load/recipientSignPdf/:docId/:contactBookId"
+                  element={<PdfRequestFiles />}
+                />
+              </Route>
               <Route
-                exact
-                path="/load/template/:templateId"
-                element={<TemplatePlaceholder />}
+                path="/loadmf/signmicroapp/login"
+                element={<GuestLogin />}
               />
               <Route
-                exact
-                path="/load/placeholdersign/:docId"
-                element={<PlaceHolderSign />}
+                path="/login/:id/:userMail/:contactBookId/:serverUrl"
+                element={<GuestLogin />}
               />
-              <Route
-                exact
-                path="/load/recipientSignPdf/:docId/:contactBookId"
-                element={<PdfRequestFiles />}
-              />
-            </Route>
-            <Route path="/loadmf/signmicroapp/login" element={<GuestLogin />} />
-            {/* login page route */}
-            <Route
-              path="/login/:id/:userMail/:contactBookId/:serverUrl"
-              element={<GuestLogin />}
-            />
-
-            <Route path="/debugpdf" element={<DebugPdf />} />
-            <Route exact path="/forgetpassword" element={<ForgetPassword />} />
-            {process.env.REACT_APP_ENABLE_SUBSCRIPTION && (
-              <>
-                <Route exact path="/pgsignup" element={<Pgsignup />} />
-                <Route exact path="/subscription" element={<Subscriptions />} />
-              </>
-            )}
-            <Route element={<HomeLayout />}>
-              <Route path="/changepassword" element={<ChangePassword />} />
-              <Route path="/form/:id" element={<Form />} />
-              <Route path="/report/:id" element={<Report />} />
-              <Route path="/dashboard/:id" element={<Dashboard />} />
-              <Route path="/profile" element={<UserProfile />} />
-              <Route path="/generatetoken" element={<GenerateToken />} />
-              <Route path="/webhook" element={<Webhook />} />
-              <Route path="/managesign" element={<ManageSign />} />
-              <Route path="/opensigndrive" element={<Opensigndrive />} />
-              <Route
-                path="/template/:templateId"
-                element={<TemplatePlaceholder />}
-              />
-              {/* signyouself route with no rowlevel data using docId from url */}
-              <Route path="/signaturePdf/:docId" element={<SignYourSelf />} />
-              {/* draft document route to handle and navigate route page accordiing to document status */}
-              <Route path="/draftDocument" element={<DraftDocument />} />
-              {/* recipient placeholder set route with no rowlevel data using docId from url*/}
-              <Route
-                path="/placeHolderSign/:docId"
-                element={<PlaceHolderSign />}
-              />
-              {/* for user signature (need your sign route) with row level data */}
-              <Route path="/pdfRequestFiles" element={<PdfRequestFiles />} />
-              {/* for user signature (need your sign route) with no row level data */}
-              <Route
-                path="/pdfRequestFiles/:docId"
-                element={<PdfRequestFiles />}
-              />
-              {/* recipient signature route with no rowlevel data using docId from url */}
-              <Route
-                path="/recipientSignPdf/:docId/:contactBookId"
-                element={<PdfRequestFiles />}
-              />
-            </Route>
-            <Route path="*" element={<PageNotFound />} />
-          </Routes>
+              <Route path="/debugpdf" element={<DebugPdf />} />
+              <Route path="/forgetpassword" element={<ForgetPassword />} />
+              {process.env.REACT_APP_ENABLE_SUBSCRIPTION && (
+                <>
+                  <Route exact path="/pgsignup" element={<Pgsignup />} />
+                  <Route path="/subscription" element={<Subscriptions />} />
+                </>
+              )}
+              <Route element={<HomeLayout />}>
+                <Route path="/changepassword" element={<ChangePassword />} />
+                <Route path="/form/:id" element={<Form />} />
+                <Route path="/report/:id" element={<Report />} />
+                <Route path="/dashboard/:id" element={<Dashboard />} />
+                <Route path="/profile" element={<UserProfile />} />
+                <Route path="/generatetoken" element={<GenerateToken />} />
+                <Route path="/webhook" element={<Webhook />} />
+                <Route path="/managesign" element={<ManageSign />} />
+                <Route path="/opensigndrive" element={<Opensigndrive />} />
+                <Route
+                  path="/template/:templateId"
+                  element={<TemplatePlaceholder />}
+                />
+                {/* signyouself route with no rowlevel data using docId from url */}
+                <Route path="/signaturePdf/:docId" element={<SignYourSelf />} />
+                {/* draft document route to handle and navigate route page accordiing to document status */}
+                <Route path="/draftDocument" element={<DraftDocument />} />
+                {/* recipient placeholder set route with no rowlevel data using docId from url*/}
+                <Route
+                  path="/placeHolderSign/:docId"
+                  element={<PlaceHolderSign />}
+                />
+                {/* for user signature (need your sign route) with row level data */}
+                <Route path="/pdfRequestFiles" element={<PdfRequestFiles />} />
+                {/* for user signature (need your sign route) with no row level data */}
+                <Route
+                  path="/pdfRequestFiles/:docId"
+                  element={<PdfRequestFiles />}
+                />
+                {/* recipient signature route with no rowlevel data using docId from url */}
+                <Route
+                  path="/recipientSignPdf/:docId/:contactBookId"
+                  element={<PdfRequestFiles />}
+                />
+              </Route>
+              <Route path="*" element={<PageNotFound />} />
+            </Routes>
+          </Suspense>
         </BrowserRouter>
       )}
     </div>
diff --git a/apps/OpenSign/src/assets/images/blackPen.png b/apps/OpenSign/src/assets/images/blackPen.png
deleted file mode 100644
index 2d72bcaca..000000000
Binary files a/apps/OpenSign/src/assets/images/blackPen.png and /dev/null differ
diff --git a/apps/OpenSign/src/assets/images/bluePen.png b/apps/OpenSign/src/assets/images/bluePen.png
deleted file mode 100644
index a08e74078..000000000
Binary files a/apps/OpenSign/src/assets/images/bluePen.png and /dev/null differ
diff --git a/apps/OpenSign/src/assets/images/certificate.png b/apps/OpenSign/src/assets/images/certificate.png
deleted file mode 100644
index 177ee5b0b..000000000
Binary files a/apps/OpenSign/src/assets/images/certificate.png and /dev/null differ
diff --git a/apps/OpenSign/src/assets/images/draftDoc1.png b/apps/OpenSign/src/assets/images/draftDoc1.png
deleted file mode 100644
index 2a2b8f60f..000000000
Binary files a/apps/OpenSign/src/assets/images/draftDoc1.png and /dev/null differ
diff --git a/apps/OpenSign/src/assets/images/open-sign-logo.png b/apps/OpenSign/src/assets/images/open-sign-logo.png
deleted file mode 100644
index 8db538124..000000000
Binary files a/apps/OpenSign/src/assets/images/open-sign-logo.png and /dev/null differ
diff --git a/apps/OpenSign/src/assets/images/redPen.png b/apps/OpenSign/src/assets/images/redPen.png
deleted file mode 100644
index 87d05fdaf..000000000
Binary files a/apps/OpenSign/src/assets/images/redPen.png and /dev/null differ
diff --git a/apps/OpenSign/src/components/AppendFormInForm.js b/apps/OpenSign/src/components/AddSigner.js
similarity index 99%
rename from apps/OpenSign/src/components/AppendFormInForm.js
rename to apps/OpenSign/src/components/AddSigner.js
index 9fb2723f1..f5e070e82 100644
--- a/apps/OpenSign/src/components/AppendFormInForm.js
+++ b/apps/OpenSign/src/components/AddSigner.js
@@ -3,7 +3,7 @@ import Parse from "parse";
 import axios from "axios";
 import { modalCancelBtnColor, modalSubmitBtnColor } from "../constant/const";
 
-const AppendFormInForm = (props) => {
+const AddSigner = (props) => {
   const [name, setName] = useState("");
   const [phone, setPhone] = useState("");
   const [email, setEmail] = useState("");
@@ -312,4 +312,4 @@ const AppendFormInForm = (props) => {
   );
 };
 
-export default AppendFormInForm;
+export default AddSigner;
diff --git a/apps/OpenSign/src/components/dashboard/GetDashboard.js b/apps/OpenSign/src/components/dashboard/GetDashboard.js
index 5550506a3..a1e3cd063 100644
--- a/apps/OpenSign/src/components/dashboard/GetDashboard.js
+++ b/apps/OpenSign/src/components/dashboard/GetDashboard.js
@@ -12,7 +12,21 @@ const GetDashboard = (props) => {
             data-tut={col.widget.data.tourSection}
             style={{ background: col.widget.bgColor }}
           >
-            <Suspense fallback={<div>please wait</div>}>
+            <Suspense
+              fallback={
+                <div style={{ height: "300px" }}>
+                  <div
+                    style={{
+                      marginLeft: "45%",
+                      marginTop: "150px",
+                      fontSize: "45px",
+                      color: "#3dd3e0"
+                    }}
+                    className="loader-37"
+                  ></div>
+                </div>
+              }
+            >
               <DashboardCard
                 Icon={col.widget.icon}
                 Label={col.widget.label}
diff --git a/apps/OpenSign/src/components/opensigndrive/DriveBody.js b/apps/OpenSign/src/components/opensigndrive/DriveBody.js
index 089020646..41e5a6110 100644
--- a/apps/OpenSign/src/components/opensigndrive/DriveBody.js
+++ b/apps/OpenSign/src/components/opensigndrive/DriveBody.js
@@ -1,7 +1,6 @@
 import React, { useState, useEffect, useRef } from "react";
 import folder from "../../assets/images/folder.png";
 import "../../styles/opensigndrive.css";
-import draftDoc from "../../assets/images/draftDoc1.png";
 import pdfLogo from "../../assets/images/pdf3.png";
 import axios from "axios";
 import * as ContextMenu from "@radix-ui/react-context-menu";
@@ -9,7 +8,7 @@ import { saveAs } from "file-saver";
 import { useNavigate } from "react-router-dom";
 import Table from "react-bootstrap/Table";
 import * as HoverCard from "@radix-ui/react-hover-card";
-import SelectFolder from "../fields/SelectFolder"; //check this one
+import SelectFolder from "../shared/fields/SelectFolder"; //check this one
 import ModalUi from "../../primitives/ModalUi";
 import { themeColor } from "../../constant/const";
 
@@ -291,10 +290,6 @@ function DriveBody({
     }
   };
 
-  const handleDraftDoc = (data) => {
-    navigate(`/legagenie?${data.objectId}`);
-  };
-
   //component to handle type of document and render according to type
   const handleFolderData = (data, ind, listType) => {
     let createddate, status, isDecline, signerExist, isComplete, isPlaceholder;
@@ -373,25 +368,6 @@ function DriveBody({
           <td>_</td>
           <td>_</td>
         </tr>
-      ) : data.Type === "AIDoc" ? (
-        <tr onClick={() => handleDraftDoc(data)}>
-          <td
-            style={{ cursor: "pointer", display: "flex", alignItems: "center" }}
-          >
-            <i
-              className="fa fa-file-text"
-              style={{ color: "#0ea3ed", marginRight: "8px", fontSize: "26px" }}
-            ></i>
-
-            <span style={{ fontSize: "12px", fontWeight: "500" }}>
-              {data.Name}
-            </span>
-          </td>
-          <td>{createddate}</td>
-          <td>LegaGenie Draft</td>
-          <td>_</td>
-          <td>_</td>
-        </tr>
       ) : (
         <tr onClick={() => checkPdfStatus(data)}>
           <td
@@ -470,71 +446,6 @@ function DriveBody({
             </div>
           </ContextMenu.Trigger>
 
-          <ContextMenu.Portal>
-            <ContextMenu.Content
-              className="ContextMenuContent"
-              sideOffset={5}
-              align="end"
-            >
-              <ContextMenu.Item
-                onClick={() => handleMenuItemClick("Rename", data)}
-                className="ContextMenuItem"
-              >
-                <i className="fa-solid fa-font"></i>
-                <span style={{ marginLeft: "8px" }}>Rename</span>
-              </ContextMenu.Item>
-            </ContextMenu.Content>
-          </ContextMenu.Portal>
-        </ContextMenu.Root>
-      </div>
-    ) : data.Type === "AIDoc" ? (
-      <div key={ind} className="folderBox">
-        <ContextMenu.Root>
-          <ContextMenu.Trigger className="ContextMenuTrigger">
-            <div
-              style={{
-                display: "flex",
-                flexDirection: "column",
-                cursor: "pointer"
-              }}
-            >
-              <img
-                alt="no img"
-                onClick={() => handleDraftDoc(data)}
-                src={draftDoc}
-                width={100}
-                height={103}
-              />
-              {rename === data.objectId ? (
-                <input
-                  onFocus={() => {
-                    inputRef.current.setSelectionRange(0, 0);
-                    const input = inputRef.current;
-                    if (input) {
-                      input.select();
-                    }
-                  }}
-                  autoFocus={true}
-                  type="text"
-                  onBlur={() => handledRenameDoc(data)}
-                  onKeyDown={(e) => handleEnterPress(e, data)}
-                  ref={inputRef}
-                  defaultValue={renameValue}
-                  // value={renameValue}
-                  onChange={(e) => setRenameValue(e.target.value)}
-                  style={{
-                    width: "100px",
-                    border: "1.5px solid black",
-                    borderRadius: "2px",
-                    fontSize: "10px"
-                  }}
-                />
-              ) : (
-                <span className="foldName">{data.Name}</span>
-              )}
-            </div>
-          </ContextMenu.Trigger>
-
           <ContextMenu.Portal>
             <ContextMenu.Content
               className="ContextMenuContent"
diff --git a/apps/OpenSign/src/primitives/AddRoleModal.js b/apps/OpenSign/src/components/pdf/AddRoleModal.js
similarity index 97%
rename from apps/OpenSign/src/primitives/AddRoleModal.js
rename to apps/OpenSign/src/components/pdf/AddRoleModal.js
index 4c95afe87..8a2d1acb1 100644
--- a/apps/OpenSign/src/primitives/AddRoleModal.js
+++ b/apps/OpenSign/src/components/pdf/AddRoleModal.js
@@ -1,5 +1,5 @@
 import React from "react";
-import ModalUi from "./ModalUi";
+import ModalUi from "../../primitives/ModalUi";
 
 const AddRoleModal = (props) => {
   return (
diff --git a/apps/OpenSign/src/components/pdf/Certificate.js b/apps/OpenSign/src/components/pdf/Certificate.js
index 1e4bd682b..2051c26cd 100644
--- a/apps/OpenSign/src/components/pdf/Certificate.js
+++ b/apps/OpenSign/src/components/pdf/Certificate.js
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import opensignLogo from "../../assets/images/open-sign-logo.png";
+import opensignLogo from "../../assets/images/logo.png";
 import {
   Page,
   Text,
diff --git a/apps/OpenSign/src/components/pdf/DraftDocument.js b/apps/OpenSign/src/components/pdf/DraftDocument.js
index 6decadf5b..750a9ad96 100644
--- a/apps/OpenSign/src/components/pdf/DraftDocument.js
+++ b/apps/OpenSign/src/components/pdf/DraftDocument.js
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
-import Loader from "./Loader";
+import Loader from "../../primitives/LoaderWithMsg";
 import { contractDocument } from "../../constant/Utils";
 import HandleError from "../../primitives/HandleError";
 function DraftDocument() {
diff --git a/apps/OpenSign/src/components/pdf/EmailComponent.js b/apps/OpenSign/src/components/pdf/EmailComponent.js
index c9e5983b6..3ca39f177 100644
--- a/apps/OpenSign/src/components/pdf/EmailComponent.js
+++ b/apps/OpenSign/src/components/pdf/EmailComponent.js
@@ -28,7 +28,6 @@ function EmailComponent({
       try {
         const imgPng =
           "https://qikinnovation.ams3.digitaloceanspaces.com/logo.png";
-        // "https://qikinnovation.ams3.digitaloceanspaces.com/mailLogo_2023-08-18T12%3A51%3A31.573Z.png";
 
         let url = `${localStorage.getItem("baseUrl")}functions/sendmailv3/`;
         const headers = {
diff --git a/apps/OpenSign/src/components/pdf/Header.js b/apps/OpenSign/src/components/pdf/PdfHeader.js
similarity index 98%
rename from apps/OpenSign/src/components/pdf/Header.js
rename to apps/OpenSign/src/components/pdf/PdfHeader.js
index d2c64c7c5..771770ced 100644
--- a/apps/OpenSign/src/components/pdf/Header.js
+++ b/apps/OpenSign/src/components/pdf/PdfHeader.js
@@ -131,20 +131,15 @@ function Header({
                 }}
               >
                 <i
-                  className="fa fa-certificate"
-                  style={{
-                    marginRight: "2px"
-                  }}
+                  className="fa-solid fa-award"
+                  style={{ marginRight: "2px" }}
                   aria-hidden="true"
                 ></i>
                 Certificate
               </div>
             ) : (
               <div
-                style={{
-                  border: "none",
-                  backgroundColor: "#fff"
-                }}
+                style={{ border: "none", backgroundColor: "#fff" }}
                 onClick={() =>
                   handleDownload(
                     blob,
@@ -155,10 +150,8 @@ function Header({
                 }
               >
                 <i
-                  className="fa fa-certificate"
-                  style={{
-                    marginRight: "2px"
-                  }}
+                  className="fa-solid fa-award"
+                  style={{ marginRight: "2px" }}
                   aria-hidden="true"
                 ></i>
                 Certificate
@@ -190,7 +183,7 @@ function Header({
             }}
           >
             <i
-              className="fa fa-certificate"
+              className="fa-solid fa-award"
               style={{
                 color: "white",
                 fontSize: "15px",
diff --git a/apps/OpenSign/src/components/pdf/SignPad.js b/apps/OpenSign/src/components/pdf/SignPad.js
index 9428f8297..b709ec88f 100644
--- a/apps/OpenSign/src/components/pdf/SignPad.js
+++ b/apps/OpenSign/src/components/pdf/SignPad.js
@@ -1,8 +1,5 @@
 import React, { useRef, useState, useEffect } from "react";
 import SignatureCanvas from "react-signature-canvas";
-import redPen from "../../assets/images/redPen.png";
-import bluePen from "../../assets/images/bluePen.png";
-import blackPen from "../../assets/images/blackPen.png";
 import { themeColor } from "../../constant/const";
 
 function SignPad({
@@ -26,7 +23,7 @@ function SignPad({
   widgetType
 }) {
   const [penColor, setPenColor] = useState("blue");
-  const allColor = [bluePen, redPen, blackPen];
+  const allColor = ["blue", "red", "black"];
   const canvasRef = useRef(null);
   const [isDefaultSign, setIsDefaultSign] = useState(false);
   const [isTab, setIsTab] = useState("draw");
@@ -630,12 +627,10 @@ function SignPad({
                     <div style={{ display: "flex", flexDirection: "row" }}>
                       {allColor.map((data, key) => {
                         return (
-                          <img
-                            key={key}
-                            alt="pen img"
+                          <i
                             style={{
-                              border: "none",
                               margin: "5px",
+                              color: data,
                               borderBottom:
                                 key === 0 && penColor === "blue"
                                   ? "2px solid blue"
@@ -654,14 +649,14 @@ function SignPad({
                                 setPenColor("black");
                               }
                             }}
-                            src={data}
+                            key={key}
+                            className="fa solid fa-pen-nib"
                             width={20}
                             height={20}
-                          />
+                          ></i>
                         );
                       })}
                     </div>
-
                     <SaveBtn />
                   </div>
                 </>
diff --git a/apps/OpenSign/src/components/fields/CreateFolder.js b/apps/OpenSign/src/components/shared/fields/CreateFolder.js
similarity index 98%
rename from apps/OpenSign/src/components/fields/CreateFolder.js
rename to apps/OpenSign/src/components/shared/fields/CreateFolder.js
index 7c13e6145..80af92051 100644
--- a/apps/OpenSign/src/components/fields/CreateFolder.js
+++ b/apps/OpenSign/src/components/shared/fields/CreateFolder.js
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import Parse from "parse";
-import Alert from "../../primitives/Alert";
+import Alert from "../../../primitives/Alert";
 
 const CreateFolder = ({ parentFolderId, onSuccess, folderCls }) => {
   const folderPtr = {
diff --git a/apps/OpenSign/src/components/fields/DropboxChoose.js b/apps/OpenSign/src/components/shared/fields/DropboxChoose.js
similarity index 91%
rename from apps/OpenSign/src/components/fields/DropboxChoose.js
rename to apps/OpenSign/src/components/shared/fields/DropboxChoose.js
index a97e2e20f..940ff8119 100644
--- a/apps/OpenSign/src/components/fields/DropboxChoose.js
+++ b/apps/OpenSign/src/components/shared/fields/DropboxChoose.js
@@ -41,12 +41,15 @@ export default function DropboxChooser({ children, onSuccess, onCancel }) {
     [onSuccess, onCancel]
   );
 
-  const handleChoose = useCallback((e) => {
-    e.preventDefault()
-    if (window.Dropbox) {
-      window.Dropbox.choose(options);
-    }
-  }, [options]);
+  const handleChoose = useCallback(
+    (e) => {
+      e.preventDefault();
+      if (window.Dropbox) {
+        window.Dropbox.choose(options);
+      }
+    },
+    [options]
+  );
 
   return (
     <div onClick={handleChoose}>
diff --git a/apps/OpenSign/src/components/fields/SelectFolder.js b/apps/OpenSign/src/components/shared/fields/SelectFolder.js
similarity index 99%
rename from apps/OpenSign/src/components/fields/SelectFolder.js
rename to apps/OpenSign/src/components/shared/fields/SelectFolder.js
index 38694b740..ff4798b0b 100644
--- a/apps/OpenSign/src/components/fields/SelectFolder.js
+++ b/apps/OpenSign/src/components/shared/fields/SelectFolder.js
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import Parse from "parse";
 import CreateFolder from "./CreateFolder";
-import ModalUi from "../../primitives/ModalUi";
+import ModalUi from "../../../primitives/ModalUi";
 
 const SelectFolder = ({ required, onSuccess, folderCls }) => {
   const [isOpen, SetIsOpen] = useState(false);
diff --git a/apps/OpenSign/src/primitives/SelectSigners.js b/apps/OpenSign/src/components/shared/fields/SelectSigners.js
similarity index 98%
rename from apps/OpenSign/src/primitives/SelectSigners.js
rename to apps/OpenSign/src/components/shared/fields/SelectSigners.js
index 96f0bd1af..f598b9265 100644
--- a/apps/OpenSign/src/primitives/SelectSigners.js
+++ b/apps/OpenSign/src/components/shared/fields/SelectSigners.js
@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import Parse from "parse";
-import "../styles/AddUser.css";
+import "../../../styles/AddUser.css";
 import AsyncSelect from "react-select/async";
 
 const customStyles = {
diff --git a/apps/OpenSign/src/components/fields/SignersInput.js b/apps/OpenSign/src/components/shared/fields/SignersInput.js
similarity index 98%
rename from apps/OpenSign/src/components/fields/SignersInput.js
rename to apps/OpenSign/src/components/shared/fields/SignersInput.js
index 6cfb93dc0..efe2c58a8 100644
--- a/apps/OpenSign/src/components/fields/SignersInput.js
+++ b/apps/OpenSign/src/components/shared/fields/SignersInput.js
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 import Select from "react-select";
-import AppendFormInForm from "../AppendFormInForm";
+import AddSigner from "../../AddSigner";
 import Modal from "react-modal";
 import Parse from "parse";
 function arrayMove(array, from, to) {
@@ -172,7 +172,7 @@ const SignersInput = (props) => {
             </div>
 
             {isModal && (
-              <AppendFormInForm
+              <AddSigner
                 valueKey={"objectId"}
                 displayKey={"Name"}
                 details={handleNewDetails}
diff --git a/apps/OpenSign/src/pages/Form.js b/apps/OpenSign/src/pages/Form.js
index 87f505ddb..8b32c16e0 100644
--- a/apps/OpenSign/src/pages/Form.js
+++ b/apps/OpenSign/src/pages/Form.js
@@ -6,8 +6,8 @@ import sanitizeFileName from "../primitives/sanitizeFileName";
 import Parse from "parse";
 import DropboxChooser from "../components/fields/DropboxChoose";
 import Alert from "../primitives/Alert";
-import SelectFolder from "../components/fields/SelectFolder";
-import SignersInput from "../components/fields/SignersInput";
+import SelectFolder from "../components/shared/fields/SelectFolder";
+import SignersInput from "../components/shared/fields/SignersInput";
 import Title from "../components/Title";
 import PageNotFound from "./PageNotFound";
 
diff --git a/apps/OpenSign/src/pages/Managesign.js b/apps/OpenSign/src/pages/Managesign.js
index e4cd4ee0f..80f465a73 100644
--- a/apps/OpenSign/src/pages/Managesign.js
+++ b/apps/OpenSign/src/pages/Managesign.js
@@ -1,8 +1,5 @@
 import React, { useState, useRef, useEffect } from "react";
 import SignatureCanvas from "react-signature-canvas";
-import redPen from "../assets/images/redPen.png";
-import bluePen from "../assets/images/bluePen.png";
-import blackPen from "../assets/images/blackPen.png";
 import "../styles/managesign.css";
 import "../styles/signature.css";
 import axios from "axios";
@@ -18,7 +15,7 @@ const ManageSign = () => {
   const [warning, setWarning] = useState(false);
   const [nameWarning, setNameWarning] = useState(false);
   const [isvalue, setIsValue] = useState(false);
-  const allColor = [bluePen, redPen, blackPen];
+  const allColor = ["blue", "red", "black"];
   const [isLoader, setIsLoader] = useState(true);
   const [isSuccess, setIsSuccess] = useState(false);
   const [Initials, setInitials] = useState("");
@@ -316,6 +313,21 @@ const ManageSign = () => {
         overflow: "auto"
       }}
     >
+      {isLoader && (
+        <div className="absolute bg-black bg-opacity-75 inset-0 z-50 flex justify-center items-center">
+          <div style={{ height: "300px" }}>
+            <div
+              style={{
+                marginLeft: "45%",
+                marginTop: "150px",
+                fontSize: "45px",
+                color: "#3dd3e0"
+              }}
+              className="loader-37"
+            ></div>
+          </div>
+        </div>
+      )}
       {isSuccess && (
         <div
           className="alert alert-success successBox"
@@ -497,11 +509,10 @@ const ManageSign = () => {
                           >
                             {allColor.map((data, key) => {
                               return (
-                                <img
-                                  alt="black img"
+                                <i
                                   style={{
-                                    border: "none",
                                     margin: "5px",
+                                    color: data,
                                     borderBottom:
                                       key === 0 && penColor === "blue"
                                         ? "2px solid blue"
@@ -521,10 +532,10 @@ const ManageSign = () => {
                                     }
                                   }}
                                   key={key}
-                                  src={data}
+                                  className="fa solid fa-pen-nib"
                                   width={20}
                                   height={20}
-                                />
+                                ></i>
                               );
                             })}
                           </div>
@@ -533,7 +544,7 @@ const ManageSign = () => {
                       <div>
                         <div
                           type="button"
-                          className="clearbtn"
+                          className="clearbtn cursor-pointer"
                           onClick={() => handleClear()}
                         >
                           Clear
@@ -613,11 +624,10 @@ const ManageSign = () => {
                       <div style={{ display: "flex", flexDirection: "row" }}>
                         {allColor.map((data, key) => {
                           return (
-                            <img
-                              alt="pen"
+                            <i
                               style={{
-                                border: "none",
                                 margin: "5px",
+                                color: data,
                                 borderBottom:
                                   key === 0 && initialPen === "blue"
                                     ? "2px solid blue"
@@ -637,10 +647,10 @@ const ManageSign = () => {
                                 }
                               }}
                               key={key}
-                              src={data}
+                              className="fa solid fa-pen-nib"
                               width={20}
                               height={20}
-                            />
+                            ></i>
                           );
                         })}
                       </div>
@@ -649,7 +659,7 @@ const ManageSign = () => {
                   <div>
                     <div
                       type="button"
-                      className="clearbtn"
+                      className="clearbtn cursor-pointer"
                       onClick={() => handleClearInitials()}
                     >
                       Clear
@@ -677,11 +687,6 @@ const ManageSign = () => {
             </button>
           </div>
         </div>
-        {isLoader && (
-          <div className="loaderContainer">
-            <div className="loader"></div>
-          </div>
-        )}
       </div>
     </div>
   );
diff --git a/apps/OpenSign/src/pages/PdfRequestFiles.js b/apps/OpenSign/src/pages/PdfRequestFiles.js
index e1e648226..2218c6db3 100644
--- a/apps/OpenSign/src/pages/PdfRequestFiles.js
+++ b/apps/OpenSign/src/pages/PdfRequestFiles.js
@@ -21,9 +21,9 @@ import {
   onSaveImage,
   addDefaultSignatureImg
 } from "../constant/Utils";
-import Loader from "../components/pdf/Loader";
+import Loader from "../primitives/LoaderWithMsg";
 import HandleError from "../primitives/HandleError";
-import Header from "../components/pdf/Header";
+import Header from "../components/pdf/PdfHeader";
 import RenderPdf from "../components/pdf/RenderPdf";
 import PdfDeclineModal from "../primitives/PdfDeclineModal";
 import Title from "../components/Title";
diff --git a/apps/OpenSign/src/pages/PlaceHolderSign.js b/apps/OpenSign/src/pages/PlaceHolderSign.js
index 9b65a676d..08901a80e 100644
--- a/apps/OpenSign/src/pages/PlaceHolderSign.js
+++ b/apps/OpenSign/src/pages/PlaceHolderSign.js
@@ -12,10 +12,10 @@ import WidgetComponent from "../components/pdf/WidgetComponent";
 import Tour from "reactour";
 import loader from "../assets/images/loader2.gif";
 import { useLocation, useParams } from "react-router-dom";
-import Loader from "../components/pdf/Loader";
+import Loader from "../primitives/LoaderWithMsg";
 import HandleError from "../primitives/HandleError";
 import SignerListPlace from "../components/pdf/SignerListPlace";
-import Header from "../components/pdf/Header";
+import Header from "../components/pdf/PdfHeader";
 import {
   pdfNewWidthFun,
   contractDocument,
diff --git a/apps/OpenSign/src/pages/SignyourselfPdf.js b/apps/OpenSign/src/pages/SignyourselfPdf.js
index 3d077e80c..246115897 100644
--- a/apps/OpenSign/src/pages/SignyourselfPdf.js
+++ b/apps/OpenSign/src/pages/SignyourselfPdf.js
@@ -4,7 +4,7 @@ import "../styles/signature.css";
 import { themeColor } from "../constant/const";
 import axios from "axios";
 import moment from "moment";
-import Loader from "../components/pdf/Loader";
+import Loader from "../primitives/LoaderWithMsg";
 import loader from "../assets/images/loader2.gif";
 import RenderAllPdfPage from "../components/pdf/RenderAllPdfPage";
 import { DndProvider } from "react-dnd";
@@ -30,7 +30,7 @@ import { useParams } from "react-router-dom";
 import Tour from "reactour";
 import Signedby from "../components/pdf/Signedby";
 import HandleError from "../primitives/HandleError";
-import Header from "../components/pdf/Header";
+import Header from "../components/pdf/PdfHeader";
 import RenderPdf from "../components/pdf/RenderPdf";
 import PlaceholderCopy from "../components/pdf/PlaceholderCopy";
 import TourContentWithBtn from "../primitives/TourContentWithBtn";
diff --git a/apps/OpenSign/src/pages/TemplatePlaceholder.js b/apps/OpenSign/src/pages/TemplatePlaceholder.js
index 12e72e855..571604702 100644
--- a/apps/OpenSign/src/pages/TemplatePlaceholder.js
+++ b/apps/OpenSign/src/pages/TemplatePlaceholder.js
@@ -9,10 +9,10 @@ import { HTML5Backend } from "react-dnd-html5-backend";
 import { useDrag, useDrop } from "react-dnd";
 import WidgetComponent from "../components/pdf/WidgetComponent";
 import Tour from "reactour";
-import Loader from "../components/pdf/Loader";
+import Loader from "../primitives/LoaderWithMsg";
 import HandleError from "../primitives/HandleError";
 import SignerListPlace from "../components/pdf/SignerListPlace";
-import Header from "../components/pdf/Header";
+import Header from "../components/pdf/PdfHeader";
 import WidgetNameModal from "../components/pdf/WidgetNameModal";
 import {
   pdfNewWidthFun,
@@ -29,7 +29,7 @@ import Title from "../components/Title";
 import LinkUserModal from "../primitives/LinkUserModal";
 import EditTemplate from "../components/pdf/EditTemplate";
 import ModalUi from "../primitives/ModalUi";
-import AddRoleModal from "../primitives/AddRoleModal";
+import AddRoleModal from "../components/pdf/AddRoleModal";
 import PlaceholderCopy from "../components/pdf/PlaceholderCopy";
 import TourContentWithBtn from "../primitives/TourContentWithBtn";
 import DropdownWidgetOption from "../components/pdf/DropdownWidgetOption";
diff --git a/apps/OpenSign/src/primitives/GetReportDisplay.js b/apps/OpenSign/src/primitives/GetReportDisplay.js
index 1656c4dce..e11ac0a31 100644
--- a/apps/OpenSign/src/primitives/GetReportDisplay.js
+++ b/apps/OpenSign/src/primitives/GetReportDisplay.js
@@ -3,7 +3,7 @@ import pad from "../assets/images/pad.svg";
 import { useNavigate } from "react-router-dom";
 import axios from "axios";
 import ModalUi from "./ModalUi";
-import AppendFormInForm from "../components/AppendFormInForm";
+import AddSigner from "../components/AddSigner";
 import { modalSubmitBtnColor, modalCancelBtnColor } from "../constant/const";
 import Alert from "./Alert";
 const ReportTable = ({
@@ -498,7 +498,7 @@ const ReportTable = ({
         isOpen={isContactform}
         handleClose={handleContactFormModal}
       >
-        <AppendFormInForm
+        <AddSigner
           handleUserData={handleUserData}
           closePopup={handleContactFormModal}
         />
diff --git a/apps/OpenSign/src/primitives/LinkUserModal.js b/apps/OpenSign/src/primitives/LinkUserModal.js
index 930645b61..8cb272191 100644
--- a/apps/OpenSign/src/primitives/LinkUserModal.js
+++ b/apps/OpenSign/src/primitives/LinkUserModal.js
@@ -1,5 +1,5 @@
 import React from "react";
-import SelectSigners from "./SelectSigners";
+import SelectSigners from "../components/shared/fields/SelectSigners";
 import AddUser from "./AddUser";
 import ModalUi from "./ModalUi";
 
diff --git a/apps/OpenSign/src/components/pdf/Loader.js b/apps/OpenSign/src/primitives/LoaderWithMsg.js
similarity index 90%
rename from apps/OpenSign/src/components/pdf/Loader.js
rename to apps/OpenSign/src/primitives/LoaderWithMsg.js
index a1c3bed1e..02392ee4e 100644
--- a/apps/OpenSign/src/components/pdf/Loader.js
+++ b/apps/OpenSign/src/primitives/LoaderWithMsg.js
@@ -1,5 +1,5 @@
 import React from "react";
-import loader from "../../assets/images/loader2.gif";
+import loader from "../assets/images/loader2.gif";
 
 function Loader({ isLoading }) {
   return (