diff --git a/apps/OpenSign/src/App.js b/apps/OpenSign/src/App.js
index 5f195fb3b..4917ffa07 100644
--- a/apps/OpenSign/src/App.js
+++ b/apps/OpenSign/src/App.js
@@ -1,31 +1,31 @@
 import React, { useState, useEffect } from "react";
 import { Routes, Route, BrowserRouter } from "react-router-dom";
-import Pgsignup from "./routes/Pgsignup";
-import Login from "./routes/Login";
-import Signup from "./routes/Signup";
-import Form from "./routes/Form";
-import Report from "./routes/Report";
-import Dashboard from "./routes/Dashboard";
-import Subscriptions from "./routes/PlanSubscriptions";
-import HomeLayout from "./layout/HomeLayout";
-import UserProfile from "./routes/UserProfile";
-import PageNotFound from "./routes/PageNotFound";
-import ForgetPassword from "./routes/ForgetPassword";
-import ChangePassword from "./routes/ChangePassword";
-import GenerateToken from "./routes/GenerateToken";
-import ValidateRoute from "./primitives/ValidateRoute";
-import Webhook from "./routes/Webhook";
-import Validate from "./primitives/Validate";
-import DebugPdf from "./routes/DebugPdf";
-import ManageSign from "./routes/Managesign";
-import Opensigndrive from "./routes/Opensigndrive";
-import TemplatePlaceholder from "./routes/TemplatePlaceholder";
 import { pdfjs } from "react-pdf";
-import SignYourSelf from "./routes/SignyourselfPdf";
+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 "./routes/PlaceHolderSign";
-import PdfRequestFiles from "./routes/PdfRequestFiles";
-import GuestLogin from "./routes/GuestLogin";
+import PlaceHolderSign from "./pages/PlaceHolderSign";
+import PdfRequestFiles from "./pages/PdfRequestFiles";
+import GuestLogin from "./pages/GuestLogin";
 pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
 
 function App() {
diff --git a/apps/OpenSign/src/components/pdf/Certificate.js b/apps/OpenSign/src/components/pdf/Certificate.js
index 1885bdd58..1e4bd682b 100644
--- a/apps/OpenSign/src/components/pdf/Certificate.js
+++ b/apps/OpenSign/src/components/pdf/Certificate.js
@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from "react";
-import "../../styles/certificate.css";
 import opensignLogo from "../../assets/images/open-sign-logo.png";
 import {
   Page,
diff --git a/apps/OpenSign/src/components/pdf/RecipientList.js b/apps/OpenSign/src/components/pdf/RecipientList.js
index cf4edc665..a46519d49 100644
--- a/apps/OpenSign/src/components/pdf/RecipientList.js
+++ b/apps/OpenSign/src/components/pdf/RecipientList.js
@@ -1,5 +1,4 @@
 import React, { useRef, useState } from "react";
-import "../../styles/signerListPlace.css";
 import { darkenColor, getFirstLetter } from "../../constant/Utils";
 
 const RecipientList = (props) => {
diff --git a/apps/OpenSign/src/components/pdf/SignerListPlace.js b/apps/OpenSign/src/components/pdf/SignerListPlace.js
index e123c257a..046aa9fa0 100644
--- a/apps/OpenSign/src/components/pdf/SignerListPlace.js
+++ b/apps/OpenSign/src/components/pdf/SignerListPlace.js
@@ -1,6 +1,5 @@
 import React from "react";
 import { themeColor } from "../../constant/const";
-import "../../styles/signerListPlace.css";
 import RecipientList from "./RecipientList";
 
 function SignerListPlace(props) {
@@ -22,7 +21,7 @@ function SignerListPlace(props) {
       {props.handleAddSigner && (
         <div
           data-tut="reactourAddbtn"
-          className="addSignerBtn"
+          className="p-[10px] my-[2px] flex flex-row items-center justify-center border-[1px] border-[#47a3ad] hover:bg-[#47a3ad] text-[#47a3ad]  hover:text-white cursor-pointer"
           onClick={() => props.handleAddSigner()}
         >
           <i className="fa-solid fa-plus"></i>
diff --git a/apps/OpenSign/src/components/pdf/WidgetComponent.js b/apps/OpenSign/src/components/pdf/WidgetComponent.js
index 656f60616..943e9f30e 100644
--- a/apps/OpenSign/src/components/pdf/WidgetComponent.js
+++ b/apps/OpenSign/src/components/pdf/WidgetComponent.js
@@ -4,13 +4,12 @@ import RecipientList from "./RecipientList";
 import { useDrag } from "react-dnd";
 import WidgetList from "./WidgetList";
 import { widgets } from "../../constant/Utils";
-
+import { themeColor } from "../../constant/const";
 function WidgetComponent({
   dragSignature,
   signRef,
   handleDivClick,
   handleMouseLeave,
-  themeColor,
   dragStamp,
   isSignYourself,
   addPositionOfSignature,
@@ -321,7 +320,7 @@ function WidgetComponent({
                   backgroundColor: themeColor,
                   color: "white"
                 }}
-                className="addSignerBtn"
+                className="p-[10px] my-[2px] flex flex-row items-center justify-center border-[1px] border-[#47a3ad] hover:bg-[#47a3ad] text-[#47a3ad] hover:text-white cursor-pointer"
                 onClick={() => handleAddSigner()}
               >
                 <i className="fa-solid fa-plus"></i>
diff --git a/apps/OpenSign/src/routes/ChangePassword.js b/apps/OpenSign/src/pages/ChangePassword.js
similarity index 100%
rename from apps/OpenSign/src/routes/ChangePassword.js
rename to apps/OpenSign/src/pages/ChangePassword.js
diff --git a/apps/OpenSign/src/routes/Dashboard.js b/apps/OpenSign/src/pages/Dashboard.js
similarity index 100%
rename from apps/OpenSign/src/routes/Dashboard.js
rename to apps/OpenSign/src/pages/Dashboard.js
diff --git a/apps/OpenSign/src/routes/DebugPdf.js b/apps/OpenSign/src/pages/DebugPdf.js
similarity index 100%
rename from apps/OpenSign/src/routes/DebugPdf.js
rename to apps/OpenSign/src/pages/DebugPdf.js
diff --git a/apps/OpenSign/src/routes/ForgetPassword.js b/apps/OpenSign/src/pages/ForgetPassword.js
similarity index 100%
rename from apps/OpenSign/src/routes/ForgetPassword.js
rename to apps/OpenSign/src/pages/ForgetPassword.js
diff --git a/apps/OpenSign/src/routes/Form.js b/apps/OpenSign/src/pages/Form.js
similarity index 100%
rename from apps/OpenSign/src/routes/Form.js
rename to apps/OpenSign/src/pages/Form.js
diff --git a/apps/OpenSign/src/routes/GenerateToken.js b/apps/OpenSign/src/pages/GenerateToken.js
similarity index 100%
rename from apps/OpenSign/src/routes/GenerateToken.js
rename to apps/OpenSign/src/pages/GenerateToken.js
diff --git a/apps/OpenSign/src/routes/GuestLogin.js b/apps/OpenSign/src/pages/GuestLogin.js
similarity index 100%
rename from apps/OpenSign/src/routes/GuestLogin.js
rename to apps/OpenSign/src/pages/GuestLogin.js
diff --git a/apps/OpenSign/src/routes/Login.js b/apps/OpenSign/src/pages/Login.js
similarity index 100%
rename from apps/OpenSign/src/routes/Login.js
rename to apps/OpenSign/src/pages/Login.js
diff --git a/apps/OpenSign/src/routes/Managesign.js b/apps/OpenSign/src/pages/Managesign.js
similarity index 100%
rename from apps/OpenSign/src/routes/Managesign.js
rename to apps/OpenSign/src/pages/Managesign.js
diff --git a/apps/OpenSign/src/routes/Opensigndrive.js b/apps/OpenSign/src/pages/Opensigndrive.js
similarity index 100%
rename from apps/OpenSign/src/routes/Opensigndrive.js
rename to apps/OpenSign/src/pages/Opensigndrive.js
diff --git a/apps/OpenSign/src/routes/PageNotFound.js b/apps/OpenSign/src/pages/PageNotFound.js
similarity index 100%
rename from apps/OpenSign/src/routes/PageNotFound.js
rename to apps/OpenSign/src/pages/PageNotFound.js
diff --git a/apps/OpenSign/src/routes/PdfRequestFiles.js b/apps/OpenSign/src/pages/PdfRequestFiles.js
similarity index 100%
rename from apps/OpenSign/src/routes/PdfRequestFiles.js
rename to apps/OpenSign/src/pages/PdfRequestFiles.js
diff --git a/apps/OpenSign/src/routes/Pgsignup.js b/apps/OpenSign/src/pages/Pgsignup.js
similarity index 100%
rename from apps/OpenSign/src/routes/Pgsignup.js
rename to apps/OpenSign/src/pages/Pgsignup.js
diff --git a/apps/OpenSign/src/routes/PlaceHolderSign.js b/apps/OpenSign/src/pages/PlaceHolderSign.js
similarity index 99%
rename from apps/OpenSign/src/routes/PlaceHolderSign.js
rename to apps/OpenSign/src/pages/PlaceHolderSign.js
index 9e3817004..9b65a676d 100644
--- a/apps/OpenSign/src/routes/PlaceHolderSign.js
+++ b/apps/OpenSign/src/pages/PlaceHolderSign.js
@@ -1628,7 +1628,6 @@ function PlaceHolderSign() {
                   handleDivClick={handleDivClick}
                   handleMouseLeave={handleMouseLeave}
                   isDragSign={isDragSign}
-                  themeColor={themeColor}
                   dragStamp={dragStamp}
                   dragRef={dragRef}
                   isDragStamp={isDragStamp}
@@ -1676,7 +1675,6 @@ function PlaceHolderSign() {
                         handleDivClick={handleDivClick}
                         handleMouseLeave={handleMouseLeave}
                         isDragSign={isDragSign}
-                        themeColor={themeColor}
                         dragStamp={dragStamp}
                         dragRef={dragRef}
                         isDragStamp={isDragStamp}
diff --git a/apps/OpenSign/src/routes/PlanSubscriptions.js b/apps/OpenSign/src/pages/PlanSubscriptions.js
similarity index 100%
rename from apps/OpenSign/src/routes/PlanSubscriptions.js
rename to apps/OpenSign/src/pages/PlanSubscriptions.js
diff --git a/apps/OpenSign/src/routes/Report.js b/apps/OpenSign/src/pages/Report.js
similarity index 100%
rename from apps/OpenSign/src/routes/Report.js
rename to apps/OpenSign/src/pages/Report.js
diff --git a/apps/OpenSign/src/routes/Signup.js b/apps/OpenSign/src/pages/Signup.js
similarity index 100%
rename from apps/OpenSign/src/routes/Signup.js
rename to apps/OpenSign/src/pages/Signup.js
diff --git a/apps/OpenSign/src/routes/SignyourselfPdf.js b/apps/OpenSign/src/pages/SignyourselfPdf.js
similarity index 100%
rename from apps/OpenSign/src/routes/SignyourselfPdf.js
rename to apps/OpenSign/src/pages/SignyourselfPdf.js
diff --git a/apps/OpenSign/src/routes/TemplatePlaceholder.js b/apps/OpenSign/src/pages/TemplatePlaceholder.js
similarity index 99%
rename from apps/OpenSign/src/routes/TemplatePlaceholder.js
rename to apps/OpenSign/src/pages/TemplatePlaceholder.js
index 7c6caa857..12e72e855 100644
--- a/apps/OpenSign/src/routes/TemplatePlaceholder.js
+++ b/apps/OpenSign/src/pages/TemplatePlaceholder.js
@@ -1405,7 +1405,6 @@ const TemplatePlaceholder = () => {
                   handleDivClick={handleDivClick}
                   handleMouseLeave={handleMouseLeave}
                   isDragSign={isDragSign}
-                  themeColor={themeColor}
                   dragStamp={dragStamp}
                   dragRef={dragRef}
                   isDragStamp={isDragStamp}
@@ -1463,7 +1462,6 @@ const TemplatePlaceholder = () => {
                         handleDivClick={handleDivClick}
                         handleMouseLeave={handleMouseLeave}
                         isDragSign={isDragSign}
-                        themeColor={themeColor}
                         dragStamp={dragStamp}
                         dragRef={dragRef}
                         isDragStamp={isDragStamp}
diff --git a/apps/OpenSign/src/routes/UserProfile.js b/apps/OpenSign/src/pages/UserProfile.js
similarity index 100%
rename from apps/OpenSign/src/routes/UserProfile.js
rename to apps/OpenSign/src/pages/UserProfile.js
diff --git a/apps/OpenSign/src/routes/Webhook.js b/apps/OpenSign/src/pages/Webhook.js
similarity index 100%
rename from apps/OpenSign/src/routes/Webhook.js
rename to apps/OpenSign/src/pages/Webhook.js
diff --git a/apps/OpenSign/src/primitives/GetReportDisplay.js b/apps/OpenSign/src/primitives/GetReportDisplay.js
index 136275a35..1656c4dce 100644
--- a/apps/OpenSign/src/primitives/GetReportDisplay.js
+++ b/apps/OpenSign/src/primitives/GetReportDisplay.js
@@ -2,10 +2,10 @@ import React, { useState, useEffect, useMemo } from "react";
 import pad from "../assets/images/pad.svg";
 import { useNavigate } from "react-router-dom";
 import axios from "axios";
-import "../styles/report.css";
 import ModalUi from "./ModalUi";
 import AppendFormInForm from "../components/AppendFormInForm";
 import { modalSubmitBtnColor, modalCancelBtnColor } from "../constant/const";
+import Alert from "./Alert";
 const ReportTable = ({
   ReportName,
   List,
@@ -149,6 +149,7 @@ const ReportTable = ({
                 if (res.data && res.data.objectId) {
                   setActLoader({});
                   setIsAlert(true);
+                  setTimeout(() => setIsAlert(false), 1500);
                   navigate(`/${url}/${res.data.objectId}`, {
                     state: { title: "Use Template" }
                   });
@@ -157,6 +158,7 @@ const ReportTable = ({
                 console.log("Err", err);
                 setIsAlert(true);
                 setIsErr(true);
+                setTimeout(() => setIsAlert(false), 1500);
                 setActLoader({});
               }
             } else {
@@ -166,12 +168,14 @@ const ReportTable = ({
           } else {
             setIsAlert(true);
             setIsErr(true);
+            setTimeout(() => setIsAlert(false), 1500);
             setActLoader({});
           }
         } catch (err) {
           console.log("err", err);
           setIsAlert(true);
           setIsErr(true);
+          setTimeout(() => setIsAlert(false), 1500);
           setActLoader({});
         }
       }
@@ -227,6 +231,7 @@ const ReportTable = ({
       if (res.data && res.data.updatedAt) {
         setActLoader({});
         setIsAlert(true);
+        setTimeout(() => setIsAlert(false), 1500);
         const upldatedList = List.filter((x) => x.objectId !== item.objectId);
         setList(upldatedList);
       }
@@ -234,6 +239,7 @@ const ReportTable = ({
       console.log("err", err);
       setIsAlert(true);
       setIsErr(true);
+      setTimeout(() => setIsAlert(false), 1500);
       setActLoader({});
     }
   };
@@ -242,17 +248,12 @@ const ReportTable = ({
   return (
     <div className="p-2 overflow-x-scroll w-full bg-white rounded-md">
       {isAlert && (
-        <div
-          className={`alert alert-${isErr ? "danger" : "success"} alertBox`}
-          role="alert"
-          onAnimationEnd={() => setIsAlert(false)}
-        >
+        <Alert type={isErr ? "danger" : "success"}>
           {isErr
             ? "Something went wrong, Please try again later!"
             : "Record deleted successfully!"}
-        </div>
+        </Alert>
       )}
-
       <div className="flex flex-row items-center justify-between my-2 mx-3 text-[20px] md:text-[23px]">
         <div className="font-light">{ReportName}</div>
         {ReportName === "Templates" && (
diff --git a/apps/OpenSign/src/primitives/PdfDeclineModal.js b/apps/OpenSign/src/primitives/PdfDeclineModal.js
index 6d12144e3..a0439de9e 100644
--- a/apps/OpenSign/src/primitives/PdfDeclineModal.js
+++ b/apps/OpenSign/src/primitives/PdfDeclineModal.js
@@ -1,6 +1,6 @@
 import React from "react";
-import "../styles/customModal.css";
 import "../styles/signature.css";
+import { rejectBtn } from "../constant/const";
 
 function CustomModal({
   show,
@@ -15,40 +15,34 @@ function CustomModal({
   return (
     show && (
       <div
-        className="parentDiv"
+        className="bg-black bg-opacity-[75%] absolute z-[50] flex flex-col items-center justify-center"
         style={{
           width: containerWH && containerWH.width,
           height: isMobile ? "100%" : containerWH && containerWH.height
         }}
       >
-        <div className="childDiv">
-          <div className="modalHeadDiv bg-danger">{headMsg && headMsg}</div>
-          <div className="modalBodyDIv">
-            <p className="pTagBody">{bodyMssg && bodyMssg}</p>
+        <div className="bg-white rounded outline-none md:w-[40%] w-[80%]">
+          <div className="bg-[#de4337] text-white p-[10px] rounded-t">
+            {headMsg && headMsg}
+          </div>
+          <div className="p-[15px]">
+            <p className="text-[15px]">{bodyMssg && bodyMssg}</p>
           </div>
           {footerMessage && (
             <>
-              <div
-                style={{
-                  height: "1px",
-                  backgroundColor: "#9f9f9f",
-                  width: "100%"
-                }}
-              ></div>
-              <div className="modalFooterDiv">
+              <div className="h-[1px] bg-[#9f9f9f] w-full"></div>
+              <div className="m-[15px] ">
                 <button
-                  style={{
-                    background: "#de4337"
-                  }}
+                  className={`${rejectBtn} text-white mr-2`}
+                  style={{ background: "#de4337" }}
                   type="button"
-                  className="finishBtn"
                   onClick={() => declineDoc()}
                 >
                   Yes
                 </button>
                 <button
                   type="button"
-                  className="finishBtn cancelBtn"
+                  className={rejectBtn}
                   onClick={() => setIsDecline({ isDeclined: false })}
                 >
                   Close
diff --git a/apps/OpenSign/src/styles/AddUser.css b/apps/OpenSign/src/styles/AddUser.css
index 00576a9fc..f703f1528 100644
--- a/apps/OpenSign/src/styles/AddUser.css
+++ b/apps/OpenSign/src/styles/AddUser.css
@@ -1,79 +1,77 @@
 .addusercontainer {
-    height: 100%;
-    padding: 10px 20px 10px 20px;
+  height: 100%;
+  padding: 10px 20px 10px 20px;
 }
 
 .loaderdiv {
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background-color: rgba(0, 0, 0, 0.3);
-
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(0, 0, 0, 0.3);
 }
 
 .form-wrapper {
-    width: 100%;
-    margin-left: auto;
-    margin-right: auto;
-    padding: 8px;
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 8px;
 }
 
 .form-section {
-    margin-bottom: 0.75rem;
+  margin-bottom: 0.75rem;
 }
 
 .checkbox-label {
-    margin-left: 0.5rem;
-    color: #4b5563;
+  margin-left: 0.5rem;
+  color: #4b5563;
 }
 
 .addUserInput {
-    padding: 0.5rem 0.75rem;
-    width: 100%;
-    border-width: 1px;
-    border-color: #d1d5db;
-    border-radius: 0.375rem;
-    outline: none;
-    font-size: 0.75rem;
+  padding: 0.5rem 0.75rem;
+  width: 100%;
+  border-width: 1px;
+  border-color: #d1d5db;
+  border-radius: 0.375rem;
+  outline: none;
+  font-size: 0.75rem;
 }
 
-
 .buttoncontainer {
-    margin-top: 1rem;
-    display: flex;
-    justify-content: flex-start;
+  margin-top: 1rem;
+  display: flex;
+  justify-content: flex-start;
 }
 
 .submitbutton {
-    background: #1ab6ce;
-    border-radius: 2px;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18);
-    border: none;
-    text-transform: uppercase;
-    font-size: 13px;
-    font-weight: 600;
-    padding: 0.375rem 0.75rem;
-    text-align: center;
-    color: #ffffff;
-    outline: none;
+  background: #1ab6ce;
+  border-radius: 2px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18);
+  border: none;
+  text-transform: uppercase;
+  font-size: 13px;
+  font-weight: 600;
+  padding: 0.375rem 0.75rem;
+  text-align: center;
+  color: #ffffff;
+  outline: none;
 }
 /* For classes: bg-[#188ae2] text-sm text-white px-4 py-2 rounded ml-2 shadow focus:outline-none */
 .resetbutton {
-    background-color: #188ae2;
-    border-radius: 2px;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18);
-    border: none;
-    text-transform: uppercase;
-    font-size: 13px;
-    font-weight: 600;
-    padding: 0.375rem 0.75rem;
-    text-align: center;
-    color: #ffffff;
-    outline: none;
-    margin-left: 8px;
-}
\ No newline at end of file
+  background-color: #188ae2;
+  border-radius: 2px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18);
+  border: none;
+  text-transform: uppercase;
+  font-size: 13px;
+  font-weight: 600;
+  padding: 0.375rem 0.75rem;
+  text-align: center;
+  color: #ffffff;
+  outline: none;
+  margin-left: 8px;
+}
diff --git a/apps/OpenSign/src/styles/certificate.css b/apps/OpenSign/src/styles/certificate.css
deleted file mode 100644
index 6d491ca7b..000000000
--- a/apps/OpenSign/src/styles/certificate.css
+++ /dev/null
@@ -1,9 +0,0 @@
-.containerBox {
-    border-radius: 5px;
-    padding: 10px;
-}
-
-.certificateBox {
-    border: 1px solid rgb(177, 174, 174);
-    padding: 20px;
-}
\ No newline at end of file
diff --git a/apps/OpenSign/src/styles/customModal.css b/apps/OpenSign/src/styles/customModal.css
deleted file mode 100644
index 4fc6b56c1..000000000
--- a/apps/OpenSign/src/styles/customModal.css
+++ /dev/null
@@ -1,59 +0,0 @@
-.parentDiv {
-  background: gray;
-  position: absolute;
-  z-index: 20;
-  background-color: rgba(0, 0, 0, 0.75);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-
-.childDiv {
-  width: 40%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-content: center;
-  background-color: #fff;
-  margin: 30px 20px;
-  border: 0px 1px 1px 1px solid rgba(0, 0, 0, 0.2);
-  border-radius: 0.3rem;
-  outline: 0;
-}
-
-.modalHeadDiv {
-  padding: 10px;
-  color: #fff;
-  border-top-left-radius: 0.3rem;
-  border-top-right-radius: 0.3rem;
-  font-size: 17px;
-  font-weight: 400;
-}
-
-.modalBodyDIv {
-  padding: 15px;
-}
-
-.spanTagHead {
-  color: white !important;
-  font-size: 17px;
-  font-weight: 500;
-}
-
-.pTagBody {
-  font-size: 15px !important;
-}
-
-.modalFooterDiv {
-  margin: 15px 15px 15px 5px;
-  display: flex;
-  justify-content: flex-start;
-}
-
-@media screen and (max-width: 500px) {
-  .childDiv {
-    margin: 50px 7px;
-    width: 80%;
-  }
-}
diff --git a/apps/OpenSign/src/styles/form.css b/apps/OpenSign/src/styles/form.css
deleted file mode 100644
index 0a3206419..000000000
--- a/apps/OpenSign/src/styles/form.css
+++ /dev/null
@@ -1,57 +0,0 @@
-.submiBtn {
-    background: #1ab6ce;
-    border-radius: 2px;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18);
-    border: none;
-    text-transform: uppercase;
-    font-size: 13px;
-    font-weight: 600;
-}
-
-.submiBtn:hover {
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18);
-    background: #028fa5;
-    color: white;
-
-}
-
-.resetBtn {
-    background: #188ae2;
-    border-radius: 2px;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18);
-    border: none;
-    color: white;
-    text-transform: uppercase;
-    font-size: 13px;
-    font-weight: 600;
-
-}
-
-.resetBtn:hover {
-    box-shadow: 0 2px 4px rgba(27, 26, 26, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18);
-    background: #0362aa;
-    color: white;
-
-}
-
-.form-group {
-    margin-bottom: 0.5rem;
-
-}
-
-.required{
-    color: red;
-}
-
-.form-control {
-    height: 35px;
-    font-size: 12px;
-}
-
-.form-group.field.field-object {
-    margin-left: 5px;
-}
-legend{
-    font-size: 17px;
-    font-weight: 500;
-}
\ No newline at end of file
diff --git a/apps/OpenSign/src/styles/loginPage.css b/apps/OpenSign/src/styles/loginPage.css
index bd80e9b0b..0c18fe779 100644
--- a/apps/OpenSign/src/styles/loginPage.css
+++ b/apps/OpenSign/src/styles/loginPage.css
@@ -1,29 +1,25 @@
-.loginInput{
+.loginInput {
   padding: 10px;
-
   border-radius: 4px;
   width: 100%;
   font-size: 0.75rem;
- border: 1px solid #e2dddd;;
+  border: 1px solid #e2dddd;
   background-color: #e0e5f5;
-     color: black;
-    
-    padding-left: 1rem!important;
-    padding-right: 1rem!important;
-    padding-top: 0.5rem!important;
-    
-    font-family: inherit;
-    font-feature-settings: inherit;
-    font-variation-settings: inherit;
-    font-weight: inherit;
-    overflow: visible;
-    
- }
- .loginInput:focus{
+  color: black;
+  padding-left: 1rem !important;
+  padding-right: 1rem !important;
+  padding-top: 0.5rem !important;
+  font-family: inherit;
+  font-feature-settings: inherit;
+  font-variation-settings: inherit;
+  font-weight: inherit;
+  overflow: visible;
+}
+.loginInput:focus {
   outline: none;
   border: none;
- }
-.verifyBtn{
+}
+.verifyBtn {
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18);
   padding: 3px 30px;
   color: white;
@@ -36,7 +32,6 @@
   outline: none;
 }
 
-
 .verifyBtn:hover {
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18);
   color: white;
@@ -124,7 +119,6 @@
   margin-bottom: 12px;
 }
 
-
 .login-btn {
   width: 100% !important;
   display: block !important;
@@ -135,7 +129,6 @@
     float: inherit;
   }
 
-
   .login-btn {
     width: 210px !important;
   }
@@ -154,10 +147,9 @@
   margin-left: 17px;
   margin-bottom: 12px;
 }
-.welcomeText{
+.welcomeText {
   font-size: 30px;
 }
- 
 
 @media only screen and (max-width: 600px) {
   .KLO1 {
@@ -183,28 +175,23 @@
     padding-top: 10px;
     border-bottom: 1px dashed #eeeeee;
   }
-
-
-
 }
-@media screen and (max-width:366px) {
-
+@media screen and (max-width: 366px) {
   .main-logo {
     width: 150px;
     height: 46px;
     display: inline-block;
   }
-  .welcomeText{
+  .welcomeText {
     font-size: 20px;
   }
   .KNLO {
     color: #878787;
     font-size: 10px;
   }
-  .btnContainer{
+  .btnContainer {
     display: flex;
     justify-content: center;
     align-items: center;
   }
-  
-}
\ No newline at end of file
+}
diff --git a/apps/OpenSign/src/styles/managesign.css b/apps/OpenSign/src/styles/managesign.css
index c273c7082..901f66ae0 100644
--- a/apps/OpenSign/src/styles/managesign.css
+++ b/apps/OpenSign/src/styles/managesign.css
@@ -1,225 +1,220 @@
 .mainDiv {
-    position: relative;
+  position: relative;
 }
 
 .successBtn {
-    background: #3ac9d6;
-    border: 1px solid #3ac9d6;
+  background: #3ac9d6;
+  border: 1px solid #3ac9d6;
 }
 
 .warning {
-    position: absolute;
-    padding: 8px;
-    border: 1px solid black;
-    background: white;
-    width: 300px;
-    border-radius: 5px;
-    animation: inAnimation 2s ease-in-out;
-    z-index: 1;
+  position: absolute;
+  padding: 8px;
+  border: 1px solid black;
+  background: white;
+  width: 300px;
+  border-radius: 5px;
+  animation: inAnimation 2s ease-in-out;
+  z-index: 1;
 }
 
 .nameWarning {
-    position: absolute;
-    bottom: -70px;
-    left: 10px;
+  position: absolute;
+  bottom: -70px;
+  left: 10px;
 }
 
 .nameWarning::before {
-    content: '';
-    width: 0px;
-    height: 0px;
-    border-style: outset;
-    border-width: 0px 10px 10px 10px;
-    border-color: transparent transparent black transparent;
-    display: inline-block;
-    position: absolute;
-    top: -29%;
-    left: 0;
-    right: 75%;
-    margin: 0 auto;
+  content: "";
+  width: 0px;
+  height: 0px;
+  border-style: outset;
+  border-width: 0px 10px 10px 10px;
+  border-color: transparent transparent black transparent;
+  display: inline-block;
+  position: absolute;
+  top: -29%;
+  left: 0;
+  right: 75%;
+  margin: 0 auto;
 }
 
 .signWarning {
-    bottom: 70px;
-    left: 50px;
+  bottom: 70px;
+  left: 50px;
 }
 
 .signWarning::before {
-    content: '';
-    width: 0px;
-    height: 0px;
-    border-style: outset;
-    border-width: 0px 10px 10px 10px;
-    border-color: transparent transparent black transparent;
-    display: inline-block;
-    position: absolute;
-    top: -29%;
-    left: 0;
-    right: 75%;
-    margin: 0 auto;
+  content: "";
+  width: 0px;
+  height: 0px;
+  border-style: outset;
+  border-width: 0px 10px 10px 10px;
+  border-color: transparent transparent black transparent;
+  display: inline-block;
+  position: absolute;
+  top: -29%;
+  left: 0;
+  right: 75%;
+  margin: 0 auto;
 }
 
 .successBox {
-    z-index: 1;
-    position: absolute;
-    top: 5%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    font-size: 13px;
-    animation: inAnimation 2s ease-in-out;
+  z-index: 1;
+  position: absolute;
+  top: 5%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 13px;
+  animation: inAnimation 2s ease-in-out;
 }
 
 @keyframes inAnimation {
-    0% {
-        opacity: 0;
-        visibility: hidden;
-    }
+  0% {
+    opacity: 0;
+    visibility: hidden;
+  }
 
-    25% {
-        opacity: 1;
-        visibility: visible;
-    }
+  25% {
+    opacity: 1;
+    visibility: visible;
+  }
 
-    50% {
-        opacity: 1;
-        visibility: visible;
-    }
+  50% {
+    opacity: 1;
+    visibility: visible;
+  }
 
-    75% {
-        opacity: 1;
-        visibility: visible;
-    }
+  75% {
+    opacity: 1;
+    visibility: visible;
+  }
 
-    100% {
-        opacity: 0;
-        visibility: hidden;
-    }
+  100% {
+    opacity: 0;
+    visibility: hidden;
+  }
 }
 
 .signature {
-    color: white;
-    cursor: pointer;
-    padding: 10px 14px 10px;
-    background: #15b4e9;
-    font-size: 12px;
-    font-weight: 600;
-    border-radius: 2px;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18);
+  color: white;
+  cursor: pointer;
+  padding: 10px 14px 10px;
+  background: #15b4e9;
+  font-size: 12px;
+  font-weight: 600;
+  border-radius: 2px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18);
 }
 
 .signature:hover {
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18);
-    background: #13a8da;
-    color: white;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18);
+  background: #13a8da;
+  color: white;
 }
 
 .imgupload {
-    color: white;
-    cursor: pointer;
-    padding: 10px 14px 10px;
-    background: #15b4e9;
-    font-size: 12px;
-    font-weight: 600;
-    border-radius: 2px;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18);
-    min-width: 105px;
+  color: white;
+  cursor: pointer;
+  padding: 10px 14px 10px;
+  background: #15b4e9;
+  font-size: 12px;
+  font-weight: 600;
+  border-radius: 2px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18);
+  min-width: 105px;
 }
 
 .imgupload:hover {
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18);
-    background: #13a8da;
-    color: white;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18);
+  background: #13a8da;
+  color: white;
 }
 
-
 .loaderContainer {
-    position: fixed;
-    inset: 0%;
-    width: 100%;
-    height: 100svh;
-    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7));
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  position: fixed;
+  inset: 0%;
+  width: 100%;
+  height: 100svh;
+  background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7));
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .loader {
-    width: 70px;
-    height: 70px;
-    border-top: 4px solid #1b8ef4;
-    border-left: 4px solid #1b8ef4;
-    border-radius: 80%;
-    animation: spin 0.5s linear infinite;
-
+  width: 70px;
+  height: 70px;
+  border-top: 4px solid #1b8ef4;
+  border-left: 4px solid #1b8ef4;
+  border-radius: 80%;
+  animation: spin 0.5s linear infinite;
 }
 
 @keyframes spin {
-    from {
-        transform: rotate(0);
-    }
+  from {
+    transform: rotate(0);
+  }
 
-    to {
-        transform: rotate(360deg);
-    }
+  to {
+    transform: rotate(360deg);
+  }
 }
 
 .customBtn {
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18);
-    padding: 10px 14px 10px;
-    color: white;
-    font-weight: 600;
-    font-size: 12px;
-    text-transform: uppercase;
-    border-radius: 2px;
-    margin-left: 10px;
-    width: 100px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18);
+  padding: 10px 14px 10px;
+  color: white;
+  font-weight: 600;
+  font-size: 12px;
+  text-transform: uppercase;
+  border-radius: 2px;
+  margin-left: 10px;
+  width: 100px;
 }
 
 .clearbtn {
-    font-size: 15px;
+  font-size: 15px;
 }
 
 .clearbtn:hover {
-    text-decoration: underline;
-    text-underline-offset: 2px;
-    color: blue;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  color: blue;
 }
 
 .successBtn:hover {
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18);
-    background: #1ab6ce;
-    color: white;
-
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18);
+  background: #1ab6ce;
+  color: white;
 }
 
 .resetBtn {
-    background: #188ae2;
-    margin-left: 10;
-    border: 1px solid #188ae2;
+  background: #188ae2;
+  margin-left: 10;
+  border: 1px solid #188ae2;
 }
 
 .resetBtn:hover {
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18);
-    background: #177ecd;
-    color: white;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18);
+  background: #177ecd;
+  color: white;
 }
 
 .signBlock {
-    display: flex;
-    flex-direction: row;
-    gap: 12px;
+  display: flex;
+  flex-direction: row;
+  gap: 12px;
 }
-.signInputManage{
-    width: 50%;
+.signInputManage {
+  width: 50%;
 }
 @media (max-width: 815px) {
-    .signBlock {
-        display: flex;
-        flex-direction: column;
-
-    }
-    .signInputManage{
-        width: 100%;
-    }
+  .signBlock {
+    display: flex;
+    flex-direction: column;
+  }
+  .signInputManage {
+    width: 100%;
+  }
 }
- 
\ No newline at end of file
diff --git a/apps/OpenSign/src/styles/modal.css b/apps/OpenSign/src/styles/modal.css
deleted file mode 100644
index 5199aebbc..000000000
--- a/apps/OpenSign/src/styles/modal.css
+++ /dev/null
@@ -1,47 +0,0 @@
-.modal-backdrop {
-    position: relative;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 1040;
-    background-color: #000;
-}
-
-.createFolder {
-    background-color: rgb(0, 128, 128);
-    color: #fff;
-    width: auto;
-    padding: 3px 17px
-}
-
-.createFolder:hover {
-    box-shadow: 0 2px 4px rgba(27, 26, 26, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18);
-    background-color: rgb(2, 146, 146);
-
-}
-
-.deleteFolder {
-    background-color: rgb(0, 51, 128);
-    color: #fff;
-    margin-left: 4px;
-    width: auto;
-    padding: 2px 17px
-}
-
-.deleteFolder:hover {
-    box-shadow: 0 2px 4px rgba(36, 35, 35, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18);
-    background-color: rgb(6, 68, 161);
-}
-
-.saveFolder {
-    background-color: rgb(51, 51, 51);
-    color: #fff;
-    margin-left: 4px;
-    width: auto;
-    padding: 4px 17px;
-}
-.saveFolder:hover{
-    box-shadow: 0 2px 4px rgba(36, 35, 35, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18);
-    background-color: rgb(63, 62, 62);
-}
\ No newline at end of file
diff --git a/apps/OpenSign/src/styles/pgsignup.css b/apps/OpenSign/src/styles/pgsignup.css
index 102a878de..b5f96ee0b 100644
--- a/apps/OpenSign/src/styles/pgsignup.css
+++ b/apps/OpenSign/src/styles/pgsignup.css
@@ -1,138 +1,136 @@
 /* Full-width input fields */
 .inputt {
-    width: 100%;
-    padding: 8px;
-    margin-bottom: 10px;
-    /* margin: 5px 0 14px 0; */
-    display: inline-block;
-    border: none;
-    background: #f1f1f1;
-    color: black;
-    font-size: 12px;
+  width: 100%;
+  padding: 8px;
+  margin-bottom: 10px;
+  /* margin: 5px 0 14px 0; */
+  display: inline-block;
+  border: none;
+  background: #f1f1f1;
+  color: black;
+  font-size: 12px;
 }
 
 /* Add a background color when the inputs get focus */
 .inputt:focus {
-    background-color: #ddd;
-    outline: none;
+  background-color: #ddd;
+  outline: none;
 }
 
-
 .confirmInputt {
-    width: 100%;
-    padding: 8px;
-    /* margin: 5px 0 14px 0; */
-    display: inline-block;
-    background: #f1f1f1;
-    color: black;
-    font-size: 12px;
+  width: 100%;
+  padding: 8px;
+  /* margin: 5px 0 14px 0; */
+  display: inline-block;
+  background: #f1f1f1;
+  color: black;
+  font-size: 12px;
 }
 
 .inputt::placeholder,
 .confirmInputt::placeholder {
-    color: #474e5d;
-    opacity: 1;
-    /* Firefox */
+  color: #474e5d;
+  opacity: 1;
+  /* Firefox */
 }
 
 .inputt:-ms-input-placeholder,
 .confirmInputt:-ms-input-placeholder {
-    /* Internet Explorer 10-11 */
-    color: #474e5d;
+  /* Internet Explorer 10-11 */
+  color: #474e5d;
 }
 
 /* Set a style for all buttons */
 .signupbtn {
-    background-color: #15b4e9;
-    color: white;
-    padding: 12px 12px;
-    margin: 8px 0;
-    border: none;
-    cursor: pointer;
-    opacity: 0.9;
-    float: left;
-    width: 50%;
+  background-color: #15b4e9;
+  color: white;
+  padding: 12px 12px;
+  margin: 8px 0;
+  border: none;
+  cursor: pointer;
+  opacity: 0.9;
+  float: left;
+  width: 50%;
 }
 
 .signupbtn:hover {
-    opacity: 1;
+  opacity: 1;
 }
 
 /* Add padding to pgsignup-container elements */
 .pgsignup-container {
-    padding: 16px;
+  padding: 16px;
 }
 
 /* The pgsignup (background) */
 .pgsignup {
-    display: none;
-    /* Hidden by default */
-    position: fixed;
-    /* Stay in place */
-    z-index: 1;
-    /* Sit on top */
-    left: 0;
-    top: 0;
-    width: 100%;
-    /* Full width */
-    height: 100%;
-    /* Full height */
-    overflow: auto;
-    /* Enable scroll if needed */
-    background-color: #474e5d;
-    padding-top: 50px;
+  display: none;
+  /* Hidden by default */
+  position: fixed;
+  /* Stay in place */
+  z-index: 1;
+  /* Sit on top */
+  left: 0;
+  top: 0;
+  width: 100%;
+  /* Full width */
+  height: 100%;
+  /* Full height */
+  overflow: auto;
+  /* Enable scroll if needed */
+  background-color: #474e5d;
+  padding-top: 50px;
 }
 
 /* pgsignup Content/Box */
 .pgsignup-content {
-    background-color: #fefefe;
-    margin: 5% auto 15% auto;
-    /* 5% from the top, 15% from the bottom and centered */
-    border: 1px solid #888;
-    width: 50%;
-    /* Could be more or less, depending on screen size */
+  background-color: #fefefe;
+  margin: 5% auto 15% auto;
+  /* 5% from the top, 15% from the bottom and centered */
+  border: 1px solid #888;
+  width: 50%;
+  /* Could be more or less, depending on screen size */
 }
 
 /* Style the horizontal ruler */
 .hrt {
-    border: 1px solid #f1f1f1;
-    margin-bottom: 25px;
+  border: 1px solid #f1f1f1;
+  margin-bottom: 25px;
 }
 
 .clearfix {
-    display: flex;
-    justify-content: center;
-    align-items: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 /* Clear floats */
 .clearfix::after {
-    content: "";
-    clear: both;
-    display: table;
+  content: "";
+  clear: both;
+  display: table;
 }
 
 /* Change styles for cancel button and signup button on extra small screens */
 @media screen and (max-width: 768px) {
+  /* pgsignup Content/Box */
+  .pgsignup-content {
+    background-color: #fefefe;
+    margin: 5% auto 15% auto;
+    /* 5% from the top, 15% from the bottom and centered */
+    border: 1px solid #888;
+    width: 90%;
+    /* Could be more or less, depending on screen size */
+  }
 
-    /* pgsignup Content/Box */
-    .pgsignup-content {
-        background-color: #fefefe;
-        margin: 5% auto 15% auto;
-        /* 5% from the top, 15% from the bottom and centered */
-        border: 1px solid #888;
-        width: 90%;
-        /* Could be more or less, depending on screen size */
-    }
+  .signupbtn {
+    width: 100%;
+    font-size: 16px;
+  }
 
-    .signupbtn {
-        width: 100%;
-        font-size: 16px;
-    }
-
-    /* Style the horizontal ruler */
-    .hrt {
-        border: 1px solid #f1f1f1;
-        margin-bottom: 16px;
-    }
-}
\ No newline at end of file
+  /* Style the horizontal ruler */
+  .hrt {
+    border: 1px solid #f1f1f1;
+    margin-bottom: 16px;
+  }
+}
diff --git a/apps/OpenSign/src/styles/report.css b/apps/OpenSign/src/styles/report.css
deleted file mode 100644
index 09b9a4d23..000000000
--- a/apps/OpenSign/src/styles/report.css
+++ /dev/null
@@ -1,36 +0,0 @@
-.alertBox {
-    z-index: 1;
-    position: absolute;
-    top: 10%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    font-size: 13px;
-    animation: inAnimation 2s ease-in-out;
-}
-
-@keyframes inAnimation {
-    0% {
-        opacity: 0;
-        visibility: hidden;
-    }
-
-    25% {
-        opacity: 1;
-        visibility: visible;
-    }
-
-    50% {
-        opacity: 1;
-        visibility: visible;
-    }
-
-    75% {
-        opacity: 1;
-        visibility: visible;
-    }
-
-    100% {
-        opacity: 0;
-        visibility: hidden;
-    }
-}
\ No newline at end of file
diff --git a/apps/OpenSign/src/styles/signature.css b/apps/OpenSign/src/styles/signature.css
index b126e0082..8229cdb05 100644
--- a/apps/OpenSign/src/styles/signature.css
+++ b/apps/OpenSign/src/styles/signature.css
@@ -1,7 +1,7 @@
-@import url('https://fonts.googleapis.com/css2?family=Fasthand&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Delicious+Handrawn&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Cedarville+Cursive&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Fasthand&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Delicious+Handrawn&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Cedarville+Cursive&display=swap");
 
 .placeholderBlock {
   padding: 0px;
@@ -13,7 +13,6 @@
   text-align: center;
   justify-content: center;
   border-width: 0.2px;
-
 }
 
 .dropdownContainer {
@@ -36,7 +35,6 @@
   /* Disable text selection in WebKit browsers */
   -moz-user-select: none;
   user-select: none;
-
 }
 
 .inputPlaceholder {
@@ -48,7 +46,6 @@
   /* font-size: 12px; */
   border: 1px solid #007bff;
   border-radius: 2px;
-
 }
 
 .radioButton {
@@ -80,7 +77,6 @@
   font-variation-settings: inherit;
   font-weight: inherit;
   overflow: visible;
-
 }
 
 .drodown-input:focus {
@@ -96,7 +92,6 @@
   font-size: 13px;
   border: none;
   margin-left: 10px;
-
 }
 
 .dropdownAdd:focus {
@@ -111,7 +106,6 @@
 }
 
 .signatureCanvas {
-
   border: 2px solid #888;
   background-color: rgb(255, 255, 255);
   width: 460px;
@@ -145,7 +139,6 @@
   display: inline-block;
   width: 14px;
   height: 14px;
-
 }
 
 .borderResize :hover {
@@ -156,7 +149,6 @@
   min-width: 7rem;
 }
 
-
 .mailBtn {
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18);
   padding: 3px 15px !important;
@@ -377,7 +369,6 @@
 
 .finishBtn:hover {
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18);
-
 }
 
 .saveBtn {
@@ -486,7 +477,6 @@
 .showScroll {
   height: 100%;
   overflow: scroll;
-
 }
 
 .showScroll::-webkit-scrollbar {
@@ -532,7 +522,6 @@
 }
 
 .pTagBody {
-
   font-size: 15px !important;
 }
 
@@ -569,7 +558,7 @@
   flex-direction: row;
   justify-content: space-between;
   background-color: #ebebeb;
-  position: "relative"
+  position: "relative";
 }
 
 .signatureHeader {
@@ -585,7 +574,6 @@
   width: 180px;
   background-color: white;
   height: 100%;
-
 }
 
 .modalBody {
@@ -597,7 +585,7 @@
   padding: 30px;
   display: flex;
   flex-direction: column;
-  align-items: center
+  align-items: center;
 }
 
 .signLayoutContainer2 {
@@ -625,7 +613,7 @@
 .DropdownMenuSubContent {
   min-width: 130px;
   background-color: #fff;
-  border: 1px solid rgba(0, 0, 0, .15);
+  border: 1px solid rgba(0, 0, 0, 0.15);
   border-radius: 0.25rem;
   padding: 5px;
   animation-duration: 400ms;
@@ -634,23 +622,23 @@
   z-index: 30 !important;
 }
 
-.DropdownMenuContent[data-side='top'],
-.DropdownMenuSubContent[data-side='top'] {
+.DropdownMenuContent[data-side="top"],
+.DropdownMenuSubContent[data-side="top"] {
   animation-name: slideDownAndFade;
 }
 
-.DropdownMenuContent[data-side='right'],
-.DropdownMenuSubContent[data-side='right'] {
+.DropdownMenuContent[data-side="right"],
+.DropdownMenuSubContent[data-side="right"] {
   animation-name: slideLeftAndFade;
 }
 
-.DropdownMenuContent[data-side='bottom'],
-.DropdownMenuSubContent[data-side='bottom'] {
+.DropdownMenuContent[data-side="bottom"],
+.DropdownMenuSubContent[data-side="bottom"] {
   animation-name: slideUpAndFade;
 }
 
-.DropdownMenuContent[data-side='left'],
-.DropdownMenuSubContent[data-side='left'] {
+.DropdownMenuContent[data-side="left"],
+.DropdownMenuSubContent[data-side="left"] {
   animation-name: slideRightAndFade;
 }
 
@@ -690,7 +678,6 @@
 }
 
 .selectEmail {
-
   align-items: center;
   justify-content: center;
   border-radius: 4px;
@@ -711,7 +698,6 @@ option {
   overflow-y: scroll;
 }
 
-
 .SelectTrigger:hover {
   border: none;
   outline: none;
@@ -722,7 +708,6 @@ option {
   outline: none;
 }
 
-
 .SelectTrigger:focus {
   /* box-shadow: 0 0 0 2px black; */
   border: none;
@@ -747,7 +732,8 @@ option {
   overflow: hidden;
   background-color: white;
   border-radius: 6px;
-  box-shadow: 0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2);
+  box-shadow: 0px 10px 38px -10px rgba(22, 23, 24, 0.35),
+    0px 10px 20px -15px rgba(22, 23, 24, 0.2);
 }
 
 .SelectViewport {
@@ -814,7 +800,6 @@ option {
 .fontOptionContainer {
   border: 1px solid #d6d3d3;
   margin: 10px 0px 5px 0px;
-
 }
 
 .dropDownStyle {
@@ -853,19 +838,15 @@ option {
   justify-content: flex-start;
 }
 
-
-
 .labelTextArea {
- 
-    font-size: 12px;
-    min-width: 100%;
-    min-height: 100%;
-    border: 1px solid #007bff;
-    outline: none;
-    z-index: 999;
-    border-radius: 2px;
-    resize: none;
- 
+  font-size: 12px;
+  min-width: 100%;
+  min-height: 100%;
+  border: 1px solid #007bff;
+  outline: none;
+  z-index: 999;
+  border-radius: 2px;
+  resize: none;
 }
 
 .labelTextArea:focus {
@@ -873,8 +854,7 @@ option {
   border: 1px solid #188ae2;
 }
 
-@media screen and (max-width:766px) {
-
+@media screen and (max-width: 766px) {
   .validateInputText {
     width: 93%;
   }
@@ -900,13 +880,10 @@ option {
   .signatureContainer {
     display: flex;
     flex-direction: column;
-
   }
 
-
   .signerComponent {
     display: none;
-
   }
 
   .preBtn1 {
@@ -968,11 +945,10 @@ option {
   to prevent sudden quick movement (as the
   navigation bar gets a new position at the top of the
   page (position:fixed and top:0) */
-  .stickyHead+.content {
+  .stickyHead + .content {
     padding-top: 60px;
   }
 
-
   .signLayoutContainer2 {
     display: flex;
     flex-direction: row;
@@ -981,7 +957,6 @@ option {
     padding: 2px 5px 10px 5px;
     position: sticky;
     align-items: center;
-
   }
 
   .headerBtn {
@@ -1006,9 +981,8 @@ option {
   }
 }
 
-@media screen and (max-width:487px) and (min-width:351px) {
+@media screen and (max-width: 487px) and (min-width: 351px) {
   .signatureCanvas {
-
     width: 300px;
     height: 120px;
   }
@@ -1030,17 +1004,14 @@ option {
   }
 
   .signTab {
-
     font-weight: 500 !important;
 
     font-size: 12px !important;
   }
-
 }
 
-@media screen and (max-width:350px) and (min-width:311px) {
+@media screen and (max-width: 350px) and (min-width: 311px) {
   .signatureCanvas {
-
     width: 280px;
     height: 112px;
   }
@@ -1054,7 +1025,6 @@ option {
   }
 
   .signTab {
-
     font-weight: 500 !important;
 
     font-size: 10px !important;
@@ -1065,7 +1035,6 @@ option {
   }
 
   .uploadImg {
-
     font-size: 10px !important;
   }
 
@@ -1074,9 +1043,8 @@ option {
   }
 }
 
-@media screen and (max-width:310px) {
+@media screen and (max-width: 310px) {
   .signatureCanvas {
-
     width: 230px;
     height: 92px;
   }
@@ -1090,7 +1058,6 @@ option {
   }
 
   .signTab {
-
     font-weight: 500 !important;
 
     font-size: 8px !important;
@@ -1101,7 +1068,6 @@ option {
   }
 
   .uploadImg {
-
     font-size: 10px !important;
   }
 
@@ -1207,56 +1173,53 @@ option {
 .defaultOptions {
   font-size: 12px;
   margin-left: 5px;
-
 }
-.defaultOptions:focus{
+.defaultOptions:focus {
   outline: none;
 }
 
-@media (max-width:767px) {
-
+@media (max-width: 767px) {
   .modalcontainer {
-      position: fixed;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      background-color: #fff;
-      border-radius: 8px;
-      box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
-      z-index: 1000;
-      max-height: 80%;
-      min-width: 90%;
-      overflow-y: auto;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: #fff;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+    z-index: 1000;
+    max-height: 80%;
+    min-width: 90%;
+    overflow-y: auto;
   }
 
   .dropdownModal {
-      position: fixed;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      background-color: #fff;
-      border-radius: 8px;
-      box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
-      z-index: 1000;
-      max-height: 80%;
-      min-width: 60%;
-      overflow-y: auto;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: #fff;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+    z-index: 1000;
+    max-height: 80%;
+    min-width: 60%;
+    overflow-y: auto;
   }
 }
 
-@media (max-width:464px) {
+@media (max-width: 464px) {
   .dropdownModal {
-      position: fixed;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      background-color: #fff;
-      border-radius: 8px;
-      box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
-      z-index: 1000;
-      max-height: 80%;
-      min-width: 78%;
-      overflow-y: auto;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: #fff;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+    z-index: 1000;
+    max-height: 80%;
+    min-width: 78%;
+    overflow-y: auto;
   }
-
-}
\ No newline at end of file
+}
diff --git a/apps/OpenSign/src/styles/signerListPlace.css b/apps/OpenSign/src/styles/signerListPlace.css
deleted file mode 100644
index 1df701b70..000000000
--- a/apps/OpenSign/src/styles/signerListPlace.css
+++ /dev/null
@@ -1,16 +0,0 @@
-.addSignerBtn{
-    padding: 10px;
-    margin-top: 2px;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    border: 1px solid #47a3ad;
-    margin: 1px;
-    color: #47a3ad;
-    cursor: pointer
-}
-.addSignerBtn:hover{
-    background: #47a3ad;
-    color: #ffffff;
-}
diff --git a/apps/OpenSign/src/styles/spinner.css b/apps/OpenSign/src/styles/spinner.css
deleted file mode 100644
index ae0ce3b63..000000000
--- a/apps/OpenSign/src/styles/spinner.css
+++ /dev/null
@@ -1,59 +0,0 @@
-.Loader,
-.Loader:before,
-.Loader:after {
-  background: #fff;
-  -webkit-animation: load1 1s infinite ease-in-out;
-  animation: load1 1s infinite ease-in-out;
-  width: 1em;
-  height: 4em;
-}
-.Loader {
-  color: #e62d2d;
-  text-indent: -9999em;
-  margin: 88px auto;
-  position: relative;
-  font-size: 11px;
-  -webkit-transform: translateZ(0);
-  -ms-transform: translateZ(0);
-  transform: translateZ(0);
-  -webkit-animation-delay: -0.16s;
-  animation-delay: -0.16s;
-}
-.Loader:before,
-.Loader:after {
-  position: absolute;
-  top: 0;
-  content: '';
-}
-.Loader:before {
-  left: -1.5em;
-  -webkit-animation-delay: -0.32s;
-  animation-delay: -0.32s;
-}
-.Loader:after {
-  left: 1.5em;
-}
-@-webkit-keyframes load1 {
-  0%,
-  80%,
-  100% {
-    box-shadow: 0 0;
-    height: 4em;
-  }
-  40% {
-    box-shadow: 0 -2em;
-    height: 5em;
-  }
-}
-@keyframes load1 {
-  0%,
-  80%,
-  100% {
-    box-shadow: 0 0;
-    height: 4em;
-  }
-  40% {
-    box-shadow: 0 -2em;
-    height: 5em;
-  }
-}